@charset "utf-8";
:root {

}

/* section */
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;}
#main.container {padding-top: 60px;}

/* header */
.lottie-ani01 {display: none;}
.header {position: fixed;background: #fff;left: 0;top: 0;z-index: 22;width: 100%;box-sizing: border-box;border-bottom: 1px solid #ebebeb;}
.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: #777; font-weight: 300; position: relative;}
.out-lnk>li:nth-child(n+2)>a:before {content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 45px; background: #ddd;}
.in-lnk {display: flex; align-items: center; gap: 10px; width: 100%;}
.in-lnk>* {background: #61666F; width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff;}
.inner-header-wrap {transition: .4s;}
.inner-header {height: 60px; padding: 10px 20px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; background: #fff;}
.logo>a {display: flex; align-items: center; font-size: 24px; color: #1B2E57; font-weight: 700; word-break: keep-all;}
.pc-logo {display: none;}
.logo img {max-width: 100%; padding-right: 5px;}
.logo img.on {display: none;}
.header.sticky {box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.header.sticky .menu-btn>span, .header.sticky .menu-btn:before, .header.sticky .menu-btn:after {background: #1B2E57;}

.gnb-wrap {position: fixed; left: -100%; top: 0; width: 100%; max-width: 600px; height: 100%; box-sizing: border-box; z-index: 25; transition: 0.2s; background: #fff; overflow: visible;}
.gnb-wrap.open {left: 0;}
.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 {width: 32px; height: 32px; position: relative;}
.gnb-close:before, .gnb-close:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 2px; height: 30px; background: #000;}
.gnb-close:after {transform: translate(-50%,-50%) rotate(-45deg);}
.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;}
.apply-btn.type2 {position: absolute; right: 60px; display: block;}
.apply-btn.type2 .ico-write {display: block; width: 25px; height: 25px; background: url('/type/common/img/layout/ico-linepen-b.png') center no-repeat; background-size: 22px;}
.apply-btn.type2>span {position: absolute; top: 28px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; box-sizing: border-box; background-color: var(--point-color);}
.apply-btn.type2>span::before {content: ''; display: block; position: absolute; left: 50%; top: -5px; margin-left: -5px; width: 0; height: 0; border-bottom: 8px solid var(--point-color); border-left: 5px solid transparent; border-right: 5px solid transparent;}
.apply-btn.type2>span>em {padding-top: 6px; text-align: center; color: #FFF; font-size: 12px; line-height: 14px;}

.menu-btn {--menu-btn-bg: #1B2E57; 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){
    #main.container {padding-top: 150px;}
    .header-dimm {right: 0;top: 100px;z-index: -1;opacity: 1;bottom: auto;padding-bottom: 0;transition: padding-bottom 0.3s;background: #fff;height: auto;}
    .logo>a {font-size: 30px; color: #fff;}
    .logo img {display: none; width: 60px; padding-right: 15px; transition: .4s;}

    .logo img.pc-logo {display: inline-block;}
    .menu-btn, .gnb-top {display: none;}
    .header-util {max-width: 434px; position: absolute; z-index: 1; top:50%; transform: translateY(-50%); left: auto; right: 40px; margin: 0 auto; border-bottom: none; padding: 0; height: 50px; background: none; align-items: flex-end; flex-direction: column-reverse; font-size: 15px; }
    .out-lnk>li>a, .in-lnk>* {line-height: 1; background: none; width: fit-content; height: auto; color: var(--black);}
    .out-lnk {padding-top: 0;}
    .out-lnk>li, .out-lnk>li:nth-child(n+2) {padding: 0 0 0 15px;}
    .out-lnk>li>a {display: flex; align-items: center; color: var(--black); font-weight: normal;}
    .out-lnk>li>a:before {content: ''; border-radius: 45px; width: 4px; height: 4px; background: #ddd;}
    .out-lnk>li:first-of-type>a:before {display: none;}
    .in-lnk {width: auto; gap: 0;}
    .in-lnk>a {justify-content: flex-start; margin-left: 15px;}
    .in-lnk>a:after {content: ''; width: 1px; height: 15px; border-radius: 45px; background: #ddd; margin-left: 15px;}
    .in-lnk>a:last-of-type:after {display: none;}

    .header.sticky .inner-header, .header.active .inner-header{height: 80px;}
    .header.sticky .logo img, .header.active .logo img {transform: scale(0.8);}
    .header.sticky .apply-btn.type2 .ico-write {background: url(/type/common/img/layout/ico-linepen-b.png) center no-repeat; background-size: 30px;}

    .apply-btn.type2.ani {display:flex; top: 20vh; right: 10vh; flex-direction: column; height: auto; z-index: 100; background-color: transparent;}
    .lottie-ani01 {display: block; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; position: absolute; top: 50%; left: 50%; background: transparent; transition: .5s;}
    .apply-btn.type2 .ico-write {width: 30px; background-size: 30px;}
    .apply-btn.type2.ani:hover .lottie-ani01 {transform: scale(1.2); opacity: 0.5; animation: none; animation-play-state :  paused }
    .apply-btn.type2>span {background-color: transparent; width: auto; height: auto; padding-left: 0;}
    .apply-btn.type2>span::before {display: none;}
    .apply-btn.type2>span>em {color: var(--black);}
    .apply-btn.type2>span>em br {display: none;}

    .header.sticky, .header.active {background: #fff;}
    .header .logo>a, .header.active .logo>a {color: #1B2E57;}
    .header .logo img.pc-logo, .header.active .logo img.pc-logo {display: none;}
    .header .logo img.on, .header.active .logo img.on {display: block;}
    .header .gnb-inner .gnb .dep1>a, .header .gnb-inner .gnb .dep1>a {color: #222;}

    .inner-header-wrap {padding: 0 40px; position: relative; border-top: 1px solid rgba(255,255,255,0.3);}
    .inner-header-wrap.open:before {content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: #ddd;}
    .inner-header {padding: 0; height: 100px; max-width: 1720px; margin: 0 auto; transition: .4s;}

    .gnb-wrap {margin-right: auto; padding-left: 30px; position: static; max-width: none; height: auto; width: fit-content; background: none;}
    .gnb-inner {background: none; padding: 0; height: auto;}
    .gnb-inner .gnb {padding: 0; display: flex; position: static;}
    .gnb-inner .gnb .dep1 {width: auto; padding: 0 10px;}
    .gnb-inner .gnb .dep1>a {color: #fff; height: 100px; font-weight: 700; word-break: keep-all;}
    .gnb-inner .gnb .dep1.active>a {left: auto; background-color: inherit;}
    .gnb-inner .gnb .dep1>a.active {color: #535BF2 !important;}
    .gnb-inner .gnb .dep2-wrap {display: flex !important; visibility: hidden; justify-content: center; opacity: 0; background: #fff; width: 100%; height: auto; overflow-y: hidden; padding: 0; top: 80px; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 0.3s; z-index: -1;}
    .gnb-inner .gnb .dep2-wrap:before {content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 30%; height: 100%; background: #F8FAFB;}
    .gnb-inner .gnb .dep2-wrap.show {z-index: 1; visibility: visible;}
    .inner-header-wrap.open .gnb-inner .gnb .dep2-wrap {box-shadow: 0 20px 20px rgba(162,162,162,0.3); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);}
    .dep2-wrap .dep2>li>a {padding: 12px 0; font-size: 18px; font-weight: 700; opacity: 1 !important;}
    .dep2-wrap .dep2>li>a:hover, .dep2-wrap .dep2>li>a:focus {color: #535BF2;}
    .dep2-wrap>p {display: block; letter-spacing: -0.7px; white-space: nowrap; min-width: 230px; background: #F8FAFB; padding: 40px 30px; box-sizing: border-box; justify-content: center; align-items: center; color: #222; font-weight: 700; font-size: 40px;}
    .gnb .dep2 {width: 100%; background: #fff; max-width: 1370px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 40px; padding: 45px 60px; box-sizing: border-box;}
    .gnb-wrap .gnb .dep3 {border-color: #067BDE; padding-left: 10px;}
    .gnb-wrap .gnb .dep3>li>a {font-weight: 500;}
    .gnb-wrap .gnb .dep3>li>a:hover, .gnb-wrap .gnb .dep3>li>a:focus {color: #1B2E57;}
}
@media screen and (min-width: 1400px){
    .gnb-inner .gnb .dep1 {padding: 0 15px;}

}
/*@media screen and (min-width: 1500px){*/
/*    .header-util {flex-direction: row-reverse; align-items: center;}*/
/*    .in-lnk>a:last-of-type:after {display: block;}*/
/*}*/

/* footer */
@media screen and (min-width: 768px){
    .footer-bottom .txt {grid-column: 1 / 3; grid-row: 2;}
    .footer-bottom .txt ul {display: flex; gap: 30px;}
}