@charset "utf-8";

.header {position:fixed;left:0;right:0;top:0;background:#fff;border-bottom:1px solid #ccc;z-index:10;}
.top {display:flex;align-items:center;justify-content:space-between;width:1200px;margin:30px auto 0;}
.top .logo {width:264px;height:29px;background:url('../images/logo.png') no-repeat center;}
.top .utils {display:flex;align-items:center;justify-content:flex-end;}
.top .utils li:first-child {}
.top .utils li:last-child {margin-left:14px;}
.top .utils li a {display:inline-block;font-size:16px;color:#555;}
.top .utils li:first-child a:after {content:'';display:inline-block;width:1px;height:11px;background:#dbdbdb;margin-left:14px;}
.top .utils li a:hover {color:#2d62cf;}

.gnb {position:relative;display:flex;align-items:center;width:1200px;margin:0 auto;padding:32px 0 28px;}
.gnb li {padding:0 16px;}
.gnb li a:hover {color:#2d62cf;}
.gnb li.menu-call {position:absolute;right:0;padding:0;margin-left:16px;}
.gnb li:nth-child(1) {width:200px;}
.gnb li:nth-child(2) {width:160px;margin-left:10px;}
.gnb li:nth-child(3) {width:240px;margin-left:10px;}
.gnb li:nth-child(4) {width:220px;}
.gnb li:nth-child(5) {width:170px;margin-left:20px;}
.gnb li:nth-child(6) {width:140px;margin-left:20px;}
.gnb li a {display:block;color:#111;font-size:18px;text-align:center;font-weight:500;}
.gnb li.menu-call a {position:relative;display:inline-block;width:18px;height:18px;}
.gnb li.menu-call a:before {position:absolute;left:0;top:0;content:'';display:inline-block;width:18px;height:2px;background:#111;transition:.2s;}
.gnb li.menu-call a:after  {position:absolute;left:0;bottom:0;content:'';display:inline-block;width:18px;height:2px;background:#111;transition:.2s;}
.gnb li.menu-call a span {position:absolute;left:0;top:50%;transform:translateY(-50%);display:inline-block;width:18px;height:2px;background:#111;}
.gnb li.menu-call:hover a:before {background:#0075FF;}
.gnb li.menu-call:hover a:after {background:#0075FF;}
.gnb li.menu-call:hover a span {background:#0075FF;}
.gnb li.menu-call.on a:before {top:50%;transform:rotate(45deg);transition:.2s;}
.gnb li.menu-call.on a:after {top:50%;transform:rotate(-45deg);transition:.2s;}
.gnb li.menu-call.on a span {display:none;}
.menu-all {position:absolute;left:0;right:0;display:none;width:100%;background:#fff;border-top:1px solid #ccc;z-index:2;}
.menu-all:after {content:'';display:block;width:100%;height:3px;background:linear-gradient(to right, #ef8001, #f49c01, #24af32, #b5d404);}
.menu-all .menu-wrap {display:flex;align-items:flex-start;width:1200px;margin:0 auto;}
.menu-all .menu-wrap .depth-second {height:372px;padding:16px;}
.menu-all .menu-wrap .depth-second:hover {background:#4679e0;border-radius:0 24px 0 0;}
.menu-all .menu-wrap .depth-second:nth-child(1) {display:block;width:200px;}
.menu-all .menu-wrap .depth-second:nth-child(2) {display:block;width:160px;margin-left:20px;}
.menu-all .menu-wrap .depth-second:nth-child(3) {display:block;width:240px;margin-left:20px;}
.menu-all .menu-wrap .depth-second:nth-child(4) {display:block;width:220px;margin-left:20px;}
.menu-all .menu-wrap .depth-second:nth-child(5) {display:block;width:210px;margin-left:20px;}
.menu-all .menu-wrap .depth-second:nth-child(6) {display:block;width:160px;}
.menu-all .menu-wrap .depth-second li {display:block;width:100%;text-align:center;}
.menu-all .menu-wrap .depth-second li a {display:inline-block;font-size:16px;color:#555;padding:2px 0;margin:6px 0;line-height:1.2em;border-bottom:1px solid transparent;}
.menu-all .menu-wrap .depth-second:hover li a {color:#fff;}
.menu-all .menu-wrap .depth-second li a:hover {border-bottom:1px solid #fff;}

.container {position:relative;width:100%;background:url('../images/body_bg.png') no-repeat top center;padding:60px 0;margin-top:136px; }
.container:before {content:'';position:absolute;left:0;right:0;top:0;display:block;width:100%;height:3px;background:linear-gradient(to right, #ef8001, #f49c01, #24af32, #b5d404);}
.search-wrap {display:flex;align-items:center;width:600px;margin:0 auto 50px;}
.search-wrap .search {width:498px;height:58px;border-radius:30px;border:1px solid #c2cce1;margin-right:10px;padding:0 26px;font-size:20px;color:#0075FF;}
.search-wrap .search::placeholder {color:#959595;font-size:17px;}
.search-wrap .btn_search {display:inline-block;width:60px;height:60px;border-radius:30px;background:url('../images/icon_search.png') no-repeat center #2e3a59;}
.main-icon {display:flex;align-items:center;justify-content:space-between;gap:30px;width:1200px;margin:0 auto 52px;}
.main-icon li {width:100%;}
.main-icon li a {display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:238px;border-radius:20px;font-size:20px;color:#fff;font-weight:500;}
.main-icon li a span {display:block;width:100px;height:90px;margin-bottom:30px;}
.main-icon li:nth-child(1) a {background:#2e3a59;}
.main-icon li:nth-child(2) a {background:#4679e0;}
.main-icon li:nth-child(3) a {background:#ef7901;}
.main-icon li:nth-child(4) a {background:#16ad36;}
.main-icon li:nth-child(1) a span {background:url('../images/main_icon_01.png') no-repeat center;}
.main-icon li:nth-child(2) a span {background:url('../images/main_icon_02.png') no-repeat center;}
.main-icon li:nth-child(3) a span {background:url('../images/main_icon_03.png') no-repeat center;}
.main-icon li:nth-child(4) a span {background:url('../images/main_icon_04.png') no-repeat center;}
.main-icon li:nth-child(1) a:hover {background:#3a486d;}
.main-icon li:nth-child(2) a:hover {background:#3a6cd1;}
.main-icon li:nth-child(3) a:hover {background:#d8740e;}
.main-icon li:nth-child(4) a:hover {background:#18a035;}

.direct {width:1200px;margin:0 auto 50px;}
.direct h3 {text-align:center;font-size:24px;font-weight:500;}
.direct h3 span {position:relative;}
.direct h3 span:after {content:'';position:absolute;left:0;bottom:0;width:100%;height:15px;background:#d7e4fe;border-radius:8px;z-index:1;}
.direct h3 span i {position:relative;display:inline-block;z-index:2;}
.direct h3 span i:before {content:'';position:absolute;left:-24px;top:-16px;display:inline-block;width:20px;height:30px;background:url('../images/title_bullet.png') no-repeat center;}
.direct h3 span i:after  {content:'';position:absolute;right:-24px;top:8px;display:inline-block;width:20px;height:30px;background:url('../images/title_bullet.png') no-repeat center;transform:rotate(-30deg);}
.direct ul {display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding:0 60px 50px;}
.direct ul li {}
.direct ul li a {display:flex;flex-direction: column;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:500;color:#333;}
.direct ul li a span {display:block;width:120px;height:120px;border:4px solid transparent;margin-bottom:34px;box-shadow:0 0 25px rgba(46, 58, 89, .08)}
.direct ul li:nth-child(1) a span {background:url('../images/direct_icon_01.png') no-repeat center #fff;border-radius:56px 56px 0 56px;}
.direct ul li:nth-child(2) a span {background:url('../images/direct_icon_02.png') no-repeat center #fff;border-radius:56px 0 56px 56px;}
.direct ul li:nth-child(3) a span {background:url('../images/direct_icon_03.png') no-repeat center #fff;border-radius:56px 56px 56px 0;}
.direct ul li:nth-child(4) a span {background:url('../images/direct_icon_04.png') no-repeat center #fff;border-radius:0 56px 56px 56px;}
.direct ul li:nth-child(5) a span {background:url('../images/direct_icon_05.png') no-repeat center #fff;border-radius:56px 56px 0 56px;}
.direct ul li a:hover {color:#4679e0;}
.direct ul li a:hover span {border-color:#4679e0;box-shadow:0 0 25px rgba(70, 121, 224, .35);}
.direct ul li a:hover span:after {content:'';display:block;box-shadow:inset 0 10px 0 #d7e4fe;}
.board {width:1200px;margin:0 auto;}
.board h3 {display:flex;align-items:center;font-size:24px;margin-bottom:48px;}
.board h3 a.more {position:relative;display:block;width:12px;height:12px;margin-left:16px;}
.board h3 a.more:before {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:block;width:12px;height:1px;background:#111;}
.board h3 a.more:after  {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:block;width:1px;height:12px;background:#111;}
.board h3:hover {color:#2d62cf;}
.board ul {display:flex;align-items:flex-start;}
.board ul li {position:relative;padding:0 24px;}
.board ul li:after {content:'';position:absolute;top:0;right:0;width:1px;height:120px;background:#dbdbdb;}
.board ul li:last-child:after {display:none;}
.board ul li a strong {display:block;color:#333;font-weight:500;font-size:18px;line-height:1.2em;margin-bottom:30px;}
.board ul li a span {display:block;color:#767676;font-size:15px;}
.board ul li a strong:hover {color:#2d62cf;}
.board ul li a span:hover {color:#2d62cf;}

/* character */
.character.green-hair {position:absolute;left:calc(50% + 510px);top:89px;width:80px;height:86px;background:url('../images/character_green_hair.png') no-repeat center;}
.character.together {position:absolute;left:calc(50% - 900px);top:595px;width:288px;height:137px;background:url('../images/character_together.png') no-repeat center;}
.character.tea {position:absolute;left:calc(50% + 630px);top:637px;width:133px;height:126px;background:url('../images/character_tea.png') no-repeat center;}


.footer-wrap {background:#f7f7f7;padding:50px 0;}
.footer {width:1200px;margin:0 auto;}
.foot-utils-wrap {display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;}
.foot-utils {display:flex;align-items:center;}
.foot-utils li {position:relative;padding-right:32px;}
.foot-utils li:after {content:'';position:absolute;top:50%;transform:translateY(-50%);right:16px;display:inline-block;width:1px;height:10px;background:#959595;}
.foot-utils li:last-child:after {display:none;}
.foot-utils li a {font-size:18px;font-weight:500;color:#181878;}
.foot-utils li a:hover {color:#111111;}

.btn-wrap {display:flex;align-items:center;justify-content:flex-end;}
.btn-wrap a {display:flex;align-items:center;justify-content:center;width:250px;height:55px;margin-left:10px;background:#fff;border:1px solid #181878;border-radius:2px 16px 16px 16px;color:#181878;font-size:16px;font-weight:500;}
.btn-wrap a span {display:inline-block;width:34px;height:34px;margin-right:16px;}
.btn-wrap a.find span {background:url('../images/footer_btn_icon_01.png') no-repeat center;}
.btn-wrap a.pay span  {background:url('../images/footer_btn_icon_02.png') no-repeat center;}
.btn-wrap a:hover {background:#ecf1fa;}

.copyright-wrap {position:relative;}
.copyright-wrap .custom-center {display:flex;align-items:center;margin-bottom:24px;}
.copyright-wrap .custom-center strong {display:flex;align-items:center;font-size:18px;color:#333;font-weight:500;margin-right:24px;}
.copyright-wrap .custom-center strong:before {content:'';display:inline-block;width:20px;height:20px;background:url('../images/footer_tel.png') no-repeat center;margin-right:8px;}
.copyright-wrap .custom-center span {position:relative;display:flex;align-items:center;font-size:18px;color:#333;font-weight:400;margin-right:20px;}
.copyright-wrap .custom-center span:after {position:absolute;right:-10px;content:'';display:inline-block;width:1px;height:6px;background:#959595;}
.copyright-wrap .custom-center span:last-of-type:after {display:none;}
.copyright-wrap .custom-center span .orange {color:#f49302;}
.copyright-wrap .custom-center span .green {color:#13a538;}
.copyright-wrap .custom-center span .blue {color:#508aff;}
.address {font-size:16px;color:#333;font-weight:500;margin-bottom:16px;}
.copyright {font-size:13px;color:#959595;font-weight:400;}
.family-site {position:absolute;top:0;right:0;width:180px;height:60px;padding:0 12px;border-bottom:1px solid #959595;}
.family-site strong {display:flex;align-items:center;justify-content:space-between;height:60px;font-size:16px;font-weight:500;color:#555;cursor:pointer;}
.family-site strong span {position:relative;display:block;width:10px;height:10px;}
.family-site strong span:before {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:block;width:10px;height:1px;background:#555;}
.family-site strong span:after  {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:block;width:1px;height:10px;background:#555;}
.family-site .dropdown-menu {position:absolute;left:0;bottom:60px;display:none;width:100%;background:#fff;border:1px solid #ccc;}
.family-site .dropdown-menu li a {display:flex;align-items:center;width:100%;height:40px;padding:0 16px;font-size:14px;color:#333;}
.family-site .dropdown-menu li a:hover {background:#0075FF;color:#fff;}

@media (max-width:1200px) {
    body {width:1200px;overflow-x:auto;}
    .container {width:1200px;overflow:hidden;}
}