@charset "utf-8";

/* 공통 */
body {--header-top-bg: #00263e; --header-bg: #fff; --gnb-top-bg: #0a234b; --gnb-on: #1B2E57; --pc-gnb: #889eba; --family-site-bg: #000f20; --footer-bg: #1E2432; --footer-border: #3f4550;}

/* header */
.header {position: fixed;left: 0;top: 0;z-index: 101;width: 100%;box-sizsing: border-box;}
.header-util {position: fixed; max-width: 600px; height: 125px; top: 61px; left: -100%; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column-reverse; font-size: 14px; justify-content: space-between; align-items: center; width: 100%; background: #fff; border-bottom: 1px solid #dddee2; transition: left 0.2s;}
.header-util.on {left: 0; z-index: 30;}
.out-lnk {display: flex; align-items: center; padding-top: 20px;}
.out-lnk>li:nth-child(n+2) {padding-left: 30px;}
.out-lnk>li>a {display: block; color: #333; font-weight: 400; position: relative;}
.out-lnk>li:nth-child(n+2)>a:before {content: ''; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 45px; background: #777;}
.in-lnk {display: flex; align-items: center; gap: 10px; width: 100%;}
.in-lnk>* {color: #fff; background: #61666F; width: 100%; height: 40px; display: flex; align-items: center; justify-content: center;}
.inner-header-wrap {transition: .3s;}
.inner-header {height: 60px; padding: 10px 20px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; transition: 0.2s;}
.logo>a {display: block; font-size: 24px; color: #fff; font-weight: 300;}
.logo img {max-width: 100%; padding-right: 5px;}
.logo img.on {display: none;}
.header.sticky {background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.header.sticky .logo img {display: none;}
.header.sticky .logo img.on {display: inline-block;}
.header.sticky .logo>a {color: #1B2E57; font-weight: 700;}
.header.sticky .menu-btn>span, .header.sticky .menu-btn:before, .header.sticky .menu-btn:after {background: #1B2E57;}

.gnb-wrap {max-width: 600px; height: 100%; transition: 0.2s; overflow: visible;}
.gnb-top {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F1F1F1; padding: 0 15px; height: 60px; background: #fff;}
.gnb-top img {margin-right: 5px;}
.gnb-top>a {color: #1B2E57; font-size: 24px; font-weight: 700;}
.gnb-close:before, .gnb-close:after {height: 30px; background: #000;}
.gnb-inner {display: flex; flex-direction: column; height: calc(100% - 185px); padding-top: 125px; background: linear-gradient(90deg, var(--gnb-on) 120px, #fff 120px);}
.gnb-inner .gnb {padding: 20px 0; position: relative;}
.gnb-inner .gnb .dep1 {width: 120px;}
.gnb-inner .gnb .dep1.active>a {left: 20px; background-color: #535BF2; color: #fff;}
.gnb-inner .gnb .dep1>a {position: relative; left: 0; height: 40px; display: flex; padding: 0 15px; align-items: center; font-size: 16px; letter-spacing: -0.3px; box-sizing: border-box; color: #C4C4C4; transition: left 0.2s;}
.gnb-inner .gnb .dep2-wrap {display: none; width: calc(100% - 120px); height: calc(100vh - 186px); overflow-y: auto; position: absolute; z-index: 1; right: 0; top: 0; padding: 0 20px 0 40px; opacity: 0; box-sizing: border-box;}
.gnb-inner .gnb .dep2-wrap.show {opacity: 1; display: block;}
.dep2-wrap>p {display: none; color: #fff;}
.dep2-wrap .dep2>li {border-bottom: 1px solid #f1f1f1;}
.dep2-wrap .dep2>li>a {display: block; padding: 19px 0 15px;}
.dep2-wrap .dep2>li.active>a {color: #535BF2;}
.gnb-wrap .gnb .dep3 {padding: 25px 0; display: none; border-top: 1px solid #535BF2;}
.gnb-wrap .gnb .dep3>li+li {margin-top: 5px;}
.gnb-wrap .gnb .dep3>li>a {font-size: 14px; color: #888;}
.header.sticky .apply-btn .ico-write {background-image: url('/type/common/img/layout/ico-linepen-b.png');}

.menu-btn {--menu-btn-bg: #fff; width: 25px; height: 22px;}
.menu-btn:before, .menu-btn:after {width: 70%;}
.menu-btn>span, .menu-btn:before, .menu-btn:after {transition: .3s;}
.menu-btn:hover span{width: 70%}
.menu-btn:hover:before, .menu-btn:hover:after {width: 100%;}

@media screen and (min-width: 768px){
    .header-util {padding: 20px 40px; font-size: 16px;}
    .gnb-inner {background: linear-gradient(90deg, var(--gnb-on) 180px, #fff 180px);}
    .gnb-inner .gnb .dep1 {width: 180px;}
    .gnb-inner .gnb .dep1>a {font-size: 18px; padding: 0 20px; height: 45px;}
    .gnb-inner .gnb .dep2-wrap {width: calc(100% - 180px); padding: 0 30px 0 50px;}
    .dep2-wrap .dep2>li>a {font-size: 16px; padding: 20px 0 18px;}
    .gnb-wrap .gnb .dep3>li>a {font-size: 15px;}
}
@media screen and (min-width: 1200px){
    .header {width: 240px; bottom: 0; background: #fff;}
    .header:before {content: ''; position: fixed; z-index: -1; left: 0; top: 0; bottom: 0; width: 240px; background: #fff; transition: left 0.25s;}
    .header:after {content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: #ccc; z-index: 100;}
    .header.active:before {left: 240px; box-shadow: 5px 0 20px rgba(166,166,166,0.2);}
    .header.sticky {box-shadow: none;}
    .header.sticky .apply-btn .ico-write {background-image: url('/type/common/img/layout/ico-linepen-w.png');}
    .header-util {position: absolute; top: 140px; left: 0; font-size: 15px; color: #777; border-bottom: none; padding: 20px 50px; height: auto;}
    .in-lnk {gap: 0; justify-content: space-between; position: relative;}
    .in-lnk:after {content: ''; position: absolute; left: 50%; margin-left: -5px; width: 2px; top: 4px; height: 15px; background: #eee;}
    .in-lnk>* {color: #777; background: none; height: auto; width: auto; opacity: 1; transition: opacity 0.3s;}
    .out-lnk>li>a {opacity: 1; transition: opacity 0.3s;}
    .in-lnk>*:hover, .in-lnk>*:focus, .out-lnk>li>a:hover, .out-lnk>li>a:focus {opacity: 0.5;}
    .out-lnk {display: block; width: 100%;}
    .out-lnk>li:nth-child(n+2) {padding-left: 0; padding-top: 7px;}
    .out-lnk>li:nth-child(n+2)>a:before {display: none;}
    .inner-header-wrap {transition: none;}
    .inner-header {transition: none; height: auto; padding: 0; display: block;}
    .logo {padding-top: 30px;}
    .logo>a {display: flex; flex-direction: column; align-items: center; color: #1B2E57; font-weight: 700;}
    .logo img, .menu-btn {display: none;}
    .logo img.on {display: block; padding: 0 0 10px; width: 60px; height: 60px;}
    .apply-btn {position: fixed; top: 40px; right: 60px; width: 130px; height: 50px;}

    .gnb-wrap {position: absolute; top: 310px; left: 0; height: auto;}
    .gnb-top {display: none;}
    .gnb-inner {background: none; padding-top: 0;}
    .gnb-inner .gnb {padding: 20px 0; background: #fff;}
    .gnb-inner .gnb .dep1 {width: 100%; padding-left: 50px; box-sizing: border-box;}
    .gnb-inner .gnb .dep1:nth-child(n+2) {padding-top: 10px;}
    .gnb-inner .gnb .dep1>a {font-size: 24px; color: #111; font-weight: 700; width: fit-content; height: auto; letter-spacing: -1.2px; padding: 0; transition: color 0.3s;}
    .gnb-inner .gnb .dep1>a.active {color: #535BF2;}
    .gnb-inner .gnb .dep2-wrap {display: block; z-index: -1; width: 240px; height: auto; left: 0; background: #fff; padding: 0; transition: left 0.25s;}
    .gnb-inner .gnb .dep2-wrap.show {left: 240px; opacity: 1;}
    .dep2-wrap .dep2 {padding: 20px 40px;}
    .dep2-wrap .dep2>li {border-bottom: none;}
    .dep2-wrap .dep2>li+li {padding-top: 25px;}
    .dep2-wrap .dep2>li>a {font-size: 20px; width: fit-content; color: #111; font-weight: 500; padding: 0; line-height: 1.2; word-break: keep-all; letter-spacing: -1px; transition: color 0.3s; position: relative;}
    .dep2-wrap .dep2>li>a:after {content: ''; position: absolute; left: -3px; bottom: 0; width: 0; height: 7px; background: #535BF2; opacity: 0.2; transition: width 0.2s;}
    .dep2-wrap .dep2>li>a:hover, .dep2-wrap .dep2>li>a:focus, .dep2-wrap .dep2>li>a.active {color: #535BF2;}
    .dep2-wrap .dep2>li>a:hover:after, .dep2-wrap .dep2>li>a:focus:after, .dep2-wrap .dep2>li>a.active:after {width: calc(100% + 6px);}
    .gnb-wrap .gnb .dep3 {padding: 15px 0 15px 20px; border-top: none;}
    .gnb-wrap .gnb .dep3>li>a {font-size: 17px;}
    .gnb-wrap .gnb .dep3>li>a:hover, .gnb-wrap .gnb .dep3>li>a:focus {color: #535BF2;}
}


/* footer */
.footer {position: relative; background: var(--footer-bg);font-weight: 300; color: #878D91; font-size: 13px; text-align: center; padding: 25px 15px;}
.footer a {color: #878D91;}
.footer-logo {font-size: 23px; font-weight: 500; display: flex; align-items: center; justify-content: center;}
.footer-logo img {width: 35px; height: 35px; margin-right: 5px;}
.footer-top .util {display: flex; align-items: center; justify-content: center;}
.footer-top .util>a {display: block; width: 100%; padding: 15px; position: relative;}
.footer-top .util>a:before {content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 24px; margin-top: -12px; background: rgba(255,255,255,0.2);}
.footer-top .util>a:last-child:before {display: none;}
.footer-top .info>a {display: inline-block; padding: 0 15px;}
.family-site-wrap, .footer-bottom>* {padding-top: 30px;}
.family-site-wrap {max-width: 500px; margin: 0 auto;}
.family-site-wrap .family-site {position: relative;}
.family-site .site-list {position: absolute; display: none; z-index: 1; bottom: 40px; background: #05548f; max-height: 300px; overflow: auto;}
.family-site .site-category {height: 40px; display: flex; align-items: center; padding: 0 15px; color: #fff; font-weight: 700; border-bottom: 1px dashed rgba(255,255,255,0.5);}
.family-site .site-category:nth-child(n+2) {border-top: 1px dashed rgba(255,255,255,0.5);}
.family-site .site-list>li>a {display: block; text-align: left; padding: 7px 15px; color: #fff; opacity: 0.5; transition: opacity 0.3s;}
.family-site .site-list>li>a:hover {opacity: 1;}
.family-site:nth-child(n+2) {padding-top: 5px;}
.family-site-wrap button {width: 100%; height: 40px; padding: 0 15px; color: #878D91; display: flex; text-align: left; align-items: center; justify-content: space-between; border: 1px solid #61666F;}
.family-site-wrap button:after {content: ''; display: block; width: 0; height: 0; border-top: 6px solid #878D91; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.family-site-wrap button.active:after {border-top: none; border-bottom: 6px solid #878D91;}
.copyright {padding-top: 20px;}
.copyright>span {display: inline-block;}
.footer .sns-wrap {display: flex; align-items: center; justify-content: center;}
.footer .sns-wrap>li:nth-child(n+2) {padding-left: 15px;}
.footer .sns-wrap>li>a {display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 45px; border: 1px solid #505050;}
.footer .sns-wrap>li>a:hover {opacity: 0.4; transition: all 0.3s;}

@media screen and (min-width: 768px){
    .footer {padding: 30px;}
    .footer-top .left {display: flex; align-items: center; justify-content: center;}
    .footer-top .util>a {white-space: nowrap; padding: 0; margin-right: 20px; padding-right: 20px;}
    .footer-top .util>a:last-child:before {display: block;}
    .footer-top .info>a {padding: 0;}
    .footer-top .info>a:last-child {padding-left: 20px;}
    .footer-bottom {display: grid; grid-template-columns: 2fr 1fr; text-align: left; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.2);}
    .footer-logo {justify-content: flex-start; font-size: 25px;}
    .footer-bottom .txt {grid-template: 1; grid-row: 2;}
    .footer .sns-wrap {justify-content: flex-end;}
}
@media screen and (min-width: 1024px){
    .footer {font-size: 14px; padding: 30px 40px 40px;}
    .footer-top {display: flex; justify-content: space-between;}
    .family-site-wrap {margin: 0; padding-top: 0; display: flex;}
    .family-site-wrap .family-site {width: 180px;}
    .family-site:nth-child(n+2) {padding-top: 0; margin-left: 5px;}
    .footer-top .left {justify-content: flex-start;}
    .footer-top .left a:hover, .footer-top .left a:focus {text-decoration: underline; text-underline-position: under;}
    .footer-top .left:before {display: inline-block; content: ''; width: 1px; height: 24px; background: rgba(255,255,255,0.2);}
    .footer .sns-wrap>li>a {width: 50px; height: 50px;}
}
@media screen and (min-width: 1200px){
    .footer {margin-left: 240px; font-size: 15px;}
    .footer-top, .footer-bottom {max-width: 1436px; margin: 0 auto;}
    .footer-top .util {padding-left: 20px;}
    .footer-bottom {margin-top: 40px;}
}