@charset "UTF-8";
body{position: relative; width:100%; height:100%;}
.mobile-menu{display: none;}

/*** header ***/
.m-nav{display: none;}
.header{position: fixed; top:0; left:0; width:100%; z-index: 10; transition: top 0.5s;}
.header.hide { top: -240px; transition: top 0.5s; }
.header-inner{max-width:1680px; margin:0 auto; padding:5rem 2rem 0;}
nav .gnb{display: flex; align-items: center;}
nav .gnb .logo{margin:0 10rem; flex-shrink: 0;}
nav .gnb .logo a h1{height:134px;}
nav .gnb .logo a h1 svg{width:154px; height:134px;}
nav .gnb .logo svg .cls-3{fill:#fff;}
nav .gnb > li{position: relative;}
nav .gnb > li:nth-child(1){width:20.8%; text-align: right;} /* 350px */
nav .gnb > li:nth-child(2){width:18.75%; text-align:right} /* 315px */
nav .gnb > li:nth-child(3){} /* logo */
nav .gnb > li:nth-child(4){width:19.34%} /* 325px */
nav .gnb > li:nth-child(5){width:20.23%} /* 340px */
nav .gnb > li > a{font-size:2.8rem; color:#fff; font-weight:600; white-space: nowrap; transition: all 0.3s;}
nav .gnb > li > a:hover{color:#3daaff; transition: all 0.3s;}
nav .gnb.on .logo svg .cls-3{fill:#000;}
nav .gnb.on > li > a{color:#000; transition: all 0.3s;}
nav .gnb.on > li > a:hover{color:#3daaff; transition: all 0.3s;}

.header.sub{background:#fff}
.header.sub .header-inner{padding:5rem 2rem 5rem 2rem;}
.header.sub nav .gnb .logo svg .cls-3{fill:#004ea2;}
.header.sub nav .gnb > li > a{color:#000; transition: all 0.3s;}
.header.sub nav .gnb > li > a:hover{color:#3daaff; transition: all 0.3s;}

/* depth2 */
nav .gnb > li .depth2{position: absolute; top:60px; left:0; width:100%; height:100%; z-index: 1} 
nav .gnb > li:nth-child(1) .depth2{left:78%; text-align: left;}
nav .gnb > li:nth-child(1) .depth2 ul{max-width:290px; min-width:290px;}
nav .gnb > li .depth2 ul{padding:1.5rem 0; background:rgba(13, 24, 61, 0.8); border-radius: 5px; box-sizing: border-box; max-width: 220px;}
nav .gnb > li .depth2 ul a{font-size:1.7rem; padding:1.5rem 2.8rem; display:block; color:#fff; font-weight: 600; position: relative; transition: all 0.3s;}
nav .gnb > li .depth2 ul a:hover{color:#60b9ff; transition: all 0.3s;}
nav .gnb > li .depth2 ul a:hover:after{width:16px; height:2px; content:''; background: linear-gradient(90deg, #1984ba, #509743); position: absolute; top:50%; left:0; transform: translateY(-50%); transition: all 0.3s;}

/*** 전체메뉴 ***/
/* .total{width:100%; height:100vh; position: fixed; top:0; left:0; background:rgba(0,0,0,0.85); z-index: 1;}
.total .total-inner{max-width:1760px; padding:0 2rem; margin:0 auto; display: flex; flex-direction: column; height: 100vh;}
.total .total-inner .total-top{padding:5rem 0; display: flex; align-items: center; justify-content: center; position: relative;}
.total .total-inner .total-top #total-header_80th{width: 154px; height: 134px;}
.total .total-inner .total-top #total-header_80th .cls-3{fill:#fff;}
.total .total-inner .total-top .total-close{position: absolute; top:50%; right:0; transform: translateY(-50%); background:transparent}
.total .total-inner .total-top .total-close img{width:29px;}
.total .total-inner .total-bottom{max-width:1370px; width:100%; margin:0 auto; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;}
.total .total-inner .total-bottom .total-menu .total-menu-list{display: flex; align-items: flex-start;}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1{width:390px; display: flex; align-items: center; justify-content: flex-end;}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1 strong{font-size:5.6rem; padding:3rem 0 3.5rem; color:#fff; font-weight:600; display:block;}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1 strong.on{color:#60b9ff}
.total .total-inner .total-bottom .total-menu .total-menu-list:nth-child(1) .total-depth2{grid-template-columns: repeat(2, 1fr);}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2{width:calc(100% - 390px); padding:5.5rem 8rem 5.5rem 14rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:2rem 0; box-sizing: border-box; border-bottom:1px solid rgba(255,255,255,0.15); position: relative;}
.total .total-inner .total-bottom .total-menu .total-menu-list:last-child .total-depth2{border-bottom:0;}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2:after{width:40px; height:3px; position: absolute; bottom:-1px; left:-40px; background: linear-gradient(90deg, #1984ba, #509743); content:'';}
.total .total-inner .total-bottom .total-menu .total-menu-list:last-child .total-depth2:after{display: none;}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li a{font-size:2.4rem; color:#fff; font-weight: 600; transition: all 0.3s;}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li a.on{color:#3daaff;}
.total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li a:hover{color:#3daaff; transition: all 0.3s;} */

/*** footer ***/
.footer{border-top:1px solid #ebebeb}
.footer .footer-inner{max-width:1680px; margin:0 auto; padding:4rem 2rem 5.5rem 2rem;  display:flex; align-items: center; justify-content: space-between;}
.footer-left{display: flex; align-items: flex-start;}
.footer-left .footer-logo{margin-right:7rem; display:flex; align-items: center;}
.footer-left .footer-logo a img{display: block;}
.footer-left .footer-logo a:nth-child(1) img{margin-right:2rem;}
.footer-left .copyright p{font-size:1.4rem; margin-bottom:0.3rem; color:#888; font-family: "Lato", sans-serif; font-weight: 400;}
.footer-left .copyright p:first-child{margin-top:1rem;}
.footer-left .copyright p:last-child{margin-bottom:0;}
.footer-left .copyright p span{margin:0 1.5rem;}
.footer-right{margin-left:2rem;}
.footer-right .link{display: flex; align-items: center; gap:0.8rem;}

/*** asdie ***/
aside{position: fixed; top:50%; left:24px; transform: translateY(-50%); z-index: 1}
aside ul li a{font-size:1.2rem; padding:1.5rem 0; display: flex; align-items: center; font-family: 'SUITE-Md'; color:#fff; filter: drop-shadow(0px 0px 4px #000);}
aside ul li:first-child a{padding-top:0;}
aside ul li:last-child a{padding-bottom:0;}
aside ul li a .s-lable {display: none;}
aside ul li a.on .s-lable {display: block;}
aside ul li a span.dot{width:9px; display: flex; align-items: center; justify-content: center;}
aside ul li a.on span.dot{width: auto;}
aside ul li a span i{width:3px; height:3px; display: block; background:#fff;}
aside ul li a.on span i{width:9px; height:9px; margin-right:1rem; display: block; content:''; background:#fff; border:1px solid rgba(159,180,180,0.5); box-sizing: border-box;}
aside.dark ul li a {color:#000}
aside.dark ul li a span i {background: #000}
aside.dark ul li a.on span i {background: #000}

@media all and (min-width:992px) and (max-width:1200px){
    
    /*** footer ***/
    .footer-left{flex-direction: column;}

}

@media all and (min-width:992px) and (max-width:1450px){ 

    /*** 전체메뉴 ***/
    /* .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2{padding:5.5rem 7rem 5.5rem 7rem} */

}

@media all and (min-width:992px) and (max-width:1500px){ 

    /*** header ***/
    nav .gnb .logo{margin:0 8rem;}
    nav .gnb > li:nth-child(1) .depth2{left:74%;}
}

@media all and (min-width:992px) and (max-width:1300px){

    /*** header ***/
    nav .gnb > li:nth-child(1){width:16%}
    nav .gnb > li:nth-child(1) .depth2{left:65%;}
    /* nav .gnb{justify-content:space-around}
    nav .gnb .logo{margin:0;}
    nav .gnb > li:nth-child(1){width:188px; text-align: center;}
    nav .gnb > li:nth-child(2){width:188px; text-align: center;}
    nav .gnb > li:nth-child(3){width:154px;}
    nav .gnb > li:nth-child(4){width:188px; text-align: center;}
    nav .gnb > li:nth-child(5){width:188px; text-align: center;} */

    /*** 전체메뉴 ***/
    /* .total .total-inner .total-top #total-header_80th{margin-left:-77px;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1{width:330px;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1 strong{font-size:4.8rem;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2{width:calc(100% - 330px)}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li a{font-size:2.2rem;} */
} 

@media all and (min-width:992px) and (max-width:1200px){

    /*** header ***/
    nav .gnb > li > a{font-size:2.2rem;}
    nav .gnb > li .depth2 ul{max-width:180px;}
    nav .gnb > li .depth2 ul a{font-size:1.5rem; padding:1.5rem 2rem;}
    nav .gnb > li:nth-child(1) .depth2 ul{min-width:250px;}

    /*** 전체메뉴 ***/
    /* .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1{width:260px;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1 strong{font-size:3.8rem;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2{width:calc(100% - 260px); padding:5rem 3rem 5rem 3rem}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li a{font-size:2rem;} */
}

@media all and (min-width:992px) and (max-width:1100px){

    /*** header ***/
    nav .gnb > li:nth-child(1){width:12%;}
    nav .gnb > li:nth-child(1) .depth2{left:50%;}

}

@media all and (max-width:991px){

    /*** header ***/
    .header-inner{padding:4rem 2rem;}
    .pc-nav{display: none;}
    .m-nav{display: flex; align-items: center; justify-content: center;}
    .m-nav #m-header_80th{width:154px; height:134px; display: block;}
    .m-nav #m-header_80th .cls-3{fill:#fff;}
    .m-nav button{position: absolute; top:80px; right:20px; background:transparent;}
    .m-nav button svg{width:55px; height:45px; display: block;}
    .m-nav button svg path{fill:#fff;}
    .m-nav.on #m-header_80th .cls-3{fill:#004ea2;}
    .m-nav.on button svg path{fill:#231f20;}

    .header.sub .header-inner{background:#fff;}
    .header.sub .m-nav #m-header_80th{width:154px; height:134px; display: block;}
    .header.sub .m-nav #m-header_80th .cls-3{fill:#004ea2;}
    .header.sub .m-nav button svg path{fill:#231f20;}

    /*** 전체메뉴 ***/
    /* .total .total-inner .total-bottom{padding-bottom:8rem;}
    .total .total-inner .total-top .total-close{top:80px; transform: none;}
    .total .total-inner .total-top .total-close img{width:46px;}
    .total .total-inner .total-bottom .total-menu .total-menu-list{flex-direction: column; padding:8rem 0 9rem; border-bottom:3px solid #ddd; position: relative;}
    .total .total-inner .total-bottom .total-menu .total-menu-list:after{width:60px; height:9px; content:''; position: absolute; bottom:-6px; left:0; background: linear-gradient(90deg, #1984ba, #509743);}
    .total .total-inner .total-bottom .total-menu .total-menu-list:last-child::after{display: none;}
    .total .total-inner .total-bottom .total-menu .total-menu-list:last-child{border-bottom:0;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1{width:100%; display: block;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1 strong{padding:0;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2{width:100%; display: block; padding:0; border:0;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li{padding-top:4rem;}
    .total .total-inner .total-bottom .total-menu .total-menu-list:nth-child(1) .total-depth2{width:100%; display: block; padding:0;} */

    /*** MOBILE MENU ***/
    .mobile-menu{display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 100;}
    .mobile-menu .mobile-menu-inner{display: flex; flex-direction: column; height: 100%; background: #fff;}
    .mobile-menu .mobile-menu-inner .menu-top{padding:4rem 2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); mix-blend-mode: multiply;}
    .mobile-menu .mobile-menu-inner .menu-top a svg{width:154px; height:134px; display: block;}
    .mobile-menu .mobile-menu-inner .menu-top a svg .cls-3{fill:#004ea2;}
    .mobile-menu .mobile-menu-inner .menu-top button{position: absolute; top:80px; right:20px; background:transparent;}
    .mobile-menu .mobile-menu-inner .menu-top button img{display: block;}
    .mobile-menu .mobile-menu-inner .menu-bottom{flex: 1; overflow-y: auto; padding: 7rem 2rem 24rem; background:#efefef; scrollbar-width: none; -ms-overflow-style: none;}
    .mobile-menu .mobile-menu-inner .menu-bottom > ul > li > a{font-size:4.8rem; padding:3.5rem 0 3.5rem 1.8rem; color:#000; font-weight: 600; display: block;}
    .mobile-menu .mobile-menu-inner .menu-bottom > ul > li > a.on{color:#004ea2;}
    .mobile-menu .mobile-menu-inner .menu-bottom > ul > li:first-child > a{padding-top:0;}
    .mobile-menu .mobile-menu-inner .menu-bottom > ul > li:nth-child(2) > a{border-bottom:3px solid #ddd; box-sizing: border-box;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2{padding:5rem 0; background:#323456; border-radius: 5px;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2 ul{display: flex; flex-direction: column; gap:5rem;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2 ul li a{font-size:3.8rem; padding:0 5rem; color:#fff; font-weight: 600; display: block ;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2 ul li a.on{color:#60b9ff; position: relative;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2 ul li a.on:after{width:32px; height:4px; content:''; background: linear-gradient(90deg, #1984ba, #509743); position: absolute; top:50%; left:0; transform: translateY(-50%);}

    /*** footer ***/
    .footer .footer-inner{flex-direction: column; align-items: flex-start;}
    .footer-left{flex-direction: column;}
    .footer-left .footer-logo{margin-right:0; margin-bottom:3.5rem;}
    .footer-left .copyright p:first-child{margin-top:0;}
    .footer-right{margin-left:0; margin-top:6rem;}

    /*** asdie ***/
    aside{display: none;}
}

@media all and (max-width:767px){

    /*** header ***/
    .header-inner{padding:2rem 2rem;}
    .m-nav #m-header_80th{width:77px; height:67px;}
    .m-nav button{top:40px;}
    .m-nav button svg{width:28px; height:23px;}

    .header.sub .m-nav #m-header_80th{width: 77px; height: 67px;}
    .header.sub .header-inner{padding:2rem;}

    /*** 전체메뉴 ***/
    .total .total-inner .total-top .total-close{top:40px;}
    .total .total-inner .total-top .total-close img{width:23px;}
    .total .total-inner .total-top #total-header_80th{width:77px; height:67px;}
    .total .total-inner .total-top{padding:2rem 0;}
    .total .total-inner .total-bottom{padding-bottom:4rem;}
    .total .total-inner .total-bottom .total-menu .total-menu-list{padding:4rem 0 4.5rem; border-bottom:2px solid #ddd;}
    .total .total-inner .total-bottom .total-menu .total-menu-list:after{width:30px; height:4px; bottom:-3px; left:0;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth1 strong{font-size:3.6rem;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li{padding-top:2rem;}
    .total .total-inner .total-bottom .total-menu .total-menu-list .total-depth2 li a{font-size:1.9rem;}

    /*** MOBILE MENU ***/
    .mobile-menu .mobile-menu-inner .menu-top{padding:2rem;}
    .mobile-menu .mobile-menu-inner .menu-top a svg{width:77px; height:67px;}
    .mobile-menu .mobile-menu-inner .menu-top button{top:40px;}
    .mobile-menu .mobile-menu-inner .menu-top button img{width:23px;}
    .mobile-menu .mobile-menu-inner .menu-bottom{padding: 3.8rem 2rem 12rem;}
    .mobile-menu .mobile-menu-inner .menu-bottom > ul > li > a{font-size:2.4rem; padding:1.8rem 0 1.8rem 0.9rem;}
    .mobile-menu .mobile-menu-inner .menu-bottom > ul > li:nth-child(2) > a{border-bottom:2px solid #ddd;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2{padding:2.5rem 0;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2 ul{ gap:2.5rem;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2 ul li a{font-size:1.9rem; padding:0 2.5rem;}
    .mobile-menu .mobile-menu-inner .menu-bottom .mobile-menu-depth2 ul li a.on:after{width:16px; height:2px;}

    /*** footer ***/
    .footer .footer-inner{padding:4.5rem 2rem;}
    .footer-left .footer-logo a:nth-child(1) img{width:55px; margin-right:1.5rem;}
    .footer-left .footer-logo a:nth-child(2) img{width:150px;}
    .footer-left .footer-logo{margin-bottom:2.5rem;}
    .footer-left .copyright p{margin-bottom:0.7rem;}
    .footer-right{margin-top:5rem;}

}