@charset "utf-8";

/*-------------------------------------------------------------------
    파일정의 : 레이아웃
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
    @공통
-------------------------------------------------------------------*/
#skip-nav {height:0}
#skip-nav a {display: block; position: absolute; left: 0; top: -100px; width: 100%; height: 1px; text-align: center}
#skip-nav a:focus, #skip a:active {position: absolute; top: 0; z-index: 120; height: 25px; padding: 10px 0; font-size: 1.4em; font-weight: 700; color: #36348f; background: #fff;}

/*-------------------------------------------------------------------
    @header
-------------------------------------------------------------------*/
#header {background-color: #ffffff; padding-top: 5px;}
#header.on {}

.logo {width: 180px;left: 50px;top: 40px;height: 81px;position: absolute;bottom: 10px;background: url('../img/common/logo.png') no-repeat center;background-size: 100%;}
.logo a { display: block; width: 100%; height: 100%; text-indent: -9999px; }
/* a:hover{color : #868686;} */

#header .btn-menu {display: none;}

.navigation {padding-left: 350px;display: flex;flex-direction: column-reverse;}

#header .btn-close {display: none; position: absolute; left: 25px; top: 32px;}

.util {display: flex; flex-direction: column; align-items: flex-end;}
.error-message{color:red; padding-left:10px;}

.support ul {display: flex; align-items: center; justify-content: flex-start; gap: 0 17px;}
.support ul li + li {position: relative;}
.support ul li + li::before {content: ""; width: 1px; height: 17px; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); background-color: #707070;}
.support ul li a {color: #777777;line-height: 1.25;display: block;/* font-weight: 700; */}
.support ul li a:hover {font-weight:700;}
.etc {margin-top: 10px; display: flex; align-items: center; justify-content: flex-start; gap: 0 20px;}
.etc .total {width: 320px; position: relative;}
.etc .total input[type="text"] {display: block; width: 100%; height: 37px; border-radius: 18px; border: 1px solid #D5D5D5; padding: 0 54px 0 15px;}
.etc .total .btn-search {position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}

.sns ul {display: flex; align-items: center; justify-content: flex-start; gap: 0 6px;}
.sns ul li .instagram {width: 37px; height: 37px; border-radius: 19px; background-color: #888888; background-image: url('../img/icon/ic_sns_instagram.png'); background-repeat: no-repeat; background-position: 7.5px center; background-size: 22.5px; display: flex; align-items: center; justify-content: center; gap: 0 12px;}
.sns ul li .instagram a {display: none; font-size: 13px; color: #ffffff; position: relative; line-height: 1.154; position: relative;}
.sns ul li .instagram a + a::before {content: ""; width: 1px; height: 12px; background-color: #ffffff; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);}

.gnb {position: relative; z-index: 11;}
.gnb .bg {width: 200vw;/* left: 50%; */left: -1000px;/* right: -1000px; */top: 54px;background-color: #F4F4F4;position: absolute;z-index: 2;/* margin-left: 0; *//* transform: translateX(-50%); */}
.gnb .depth01 {display: flex; justify-content: space-between; align-items: flex-start;}
.gnb .depth01 > li {flex: none; position: relative; padding-top: 20px; padding-bottom: 15px; z-index: 3;}
.gnb .depth01 > li > a {display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.005em; position: relative; line-height: 1.125;}
.gnb .depth01 > li > a::before {content: ""; width: 100%; height: 3px; background-color: #FD7915; position: absolute; left: 0; top: 100%; margin-top: 3px; display: none;}

.gnb .depth02 {position: absolute; top: 100%; /*width: max-content;*/ width: calc(100% + 32px); padding-top: 15px; padding-bottom: 40px; display: none; z-index: 1;}
.gnb .depth02 > ul > li > a {padding: 15px 0 0; display: block; font-size: 16px; line-height: 1.2; letter-spacing: -0.08em; word-break: keep-all;}
.gnb .depth02 > ul > li > a:hover{color:rgb(253,121,11,0.8);}
.gnb .depth03 {display: none;}



.sns ul li .instagram:hover {width: auto; padding: 0 16px 0 39px; background-color: #FD3F90;}
.sns ul li .instagram:hover a {display: block;}

.gnb .depth01 > li:hover > a,
.gnb .depth01 > li.on > a {color: #FD7915;}
.gnb .depth01 > li:hover > a::before,
.gnb .depth01 > li.on > a::before {display: block;}

.gnb .menuDepth2 ul li a {color:#ACACAC;font-size:14px; line-height: 1;}

.gnb:hover .depth01 > li > .depth02 {display: block;}

/* 메뉴롤오버 전체배경*/
.gnb_bg {position: absolute;top: 55px;left: -2000px;width: 1000%;height: 300px;
    background-color: #F4F4F4;opacity: 0;pointer-events: none; transition: opacity 0.1s ease;
    z-index: 2;}
.gnb:hover .gnb_bg {opacity: 1;}


.gnb-m{}

.shortcut {}


.assistant {}

.branding {}
 
/*-------------------------------------------------------------------
    @footer
-------------------------------------------------------------------*/
#footer {padding: 50px 0;background: #888888 url('../img/common/bg_footer.png') no-repeat right bottom;background-size: 398px;}
#footer .container {display: flex;align-items: center;justify-content: center;gap: 0 80px;}


#footer .logo-footer {width: 240px;height: 119px;background: url('../img/common/logo_footer.png') no-repeat center;background-size: 100%;text-indent: -9999px;flex: none;}

#footer .company dl {display: flex; align-items: flex-start; justify-content: flex-start; gap: 21px;}
#footer .company dl dt {position: relative;color: #FFFFFF;font-weight: 700;text-align: justify; width: 41px;text-align-last: justify;}

#footer .company dl dt::after {content: "";width: 1px;height: 20px;background-color: #ffffff;position: absolute;right: -11px;top: 2px;}
#footer .company dl dd {flex: 1 0; ; line-height: 1.12; font-weight:300;}
#footer .company dl dd .cs {overflow: hidden;}
#footer .company dl dd .cs li {float: left; color:#fff; padding-right:10px;}
#footer em.space{color:#888888;}
#footer .link{}

#footer .family{}

#footer .sns{}

#footer .address{color:#fff;}

#footer .copyright{}

#footer .fnb {}
 
/*-------------------------------------------------------------------
    @content
-------------------------------------------------------------------*/
#content {}

.container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1400px;
    }
.container::after { display: block; clear: both; content: ""; }

.has-padding{}

/*-------------------------------------------------------------------
    @floating
-------------------------------------------------------------------*/
.dim {width: 100vw; height: 100vh; background: #565656; opacity: 0.7; top: 0; left: 0; position: fixed; z-index: 11;}
 
/*-------------------------------------------------------------------
    @popup
-------------------------------------------------------------------*/
.popup{}

.popup .pop-head{}

.popup .pop-cont{}

.popup .pop-footer{}






@media screen and (max-width: 1399px) {
    .logo {width: 160px;left: 70px;top: 40px;height: 81px;position: absolute;bottom: 10px;background: url('../img/common/logo.png') no-repeat center;background-size: 100%;}

    .container {max-width: 1200px;padding: 0 30px;}
    .support ul li a {font-size: 14px;}

    

    .gnb .depth01 li > a {font-size:17px;}
    .gnb .depth02 > ul > li > a {font-size:14px; line-height:1.2; letter-spacing:-0.6px;}

    #footer {font-size:14px;}
    #footer {padding: 30px 0 30px;}
    #footer .logo-footer {width: 230px;height: 80px;}    
    .navigation {padding-left: 300px;display: flex;flex-direction: column-reverse;}

}





@media screen and (max-width: 1199px) {
    /*-------------------------------------------------------------------
        @header
    -------------------------------------------------------------------*/
    #header {padding-top: 0;}
    #header .container {display: flex; align-items: center; justify-content: space-between; height: 100px;}
    #header .container::after {display: none;}

    .logo {position: static; flex: none; width: 200px; height: 64px;}

    #header .btn-menu {display: block;}

    .navigation {display: flex; padding-left: 0; position: fixed; width: calc(100vw - 95px); background-color: #0A507E; right: 0; top: 0; max-height: 100vh; min-height: 100vh; z-index: 99; padding-top: 90px; flex-direction: column; justify-content: flex-start; align-items: flex-start; transform: translateX(100%); overflow: auto; padding-bottom: 32px;}
    .navigation.active {transform: translateX(0)}

.gnb .depth02 > ul > li.active > .depth03 {display: block;}
    .gnb .depth03 > ul > li + li {border-top: 1px solid #67BCF4;}
    .gnb .depth03 > ul > li > a {background-color: #238CD1; color: #ffffff; padding: 10px 42px; display: block; width: 100%; font-size: 16px;}
    .gnb .depth02 .menuDepth2 ul > li{display:none;}/*3차메뉴 숨기기*/

    
    .gnb {width: 100%;}
    .gnb .depth01 {display: block; width: 100%;}
    .gnb .depth01 > li {padding: 0;}
    .gnb .depth01 > li + li {border-top: 1px solid #FFFFFF;}
    .gnb .depth01 > li > a {padding: 24px 20px;font-size: 22px;font-weight: 700;color: #FFFFFF;background: url('../img/icon/ic_arr_gnb.png') no-repeat right 16px center;background-size: 25px;}

    .gnb:hover .depth01 > li > .depth02 {display: none;}
    .sitemap{display: none;}
    
    .gnb .depth02 {/* border-top: 1px solid #ffffff; */padding: 20px 0;background-color: #15689F;}
    .gnb .depth02 > ul > li > a {padding: 10px 60px 10px 42px; color: #ffffff; font-size: 16px;}

    .gnb .depth02 > ul > li.has-depth > a {background: url('../img/icon/ic_link_gnb.png') no-repeat right 20px center; background-size: 15px;}

    .gnb .depth01 > li.active > .depth02 {display: block; position: static; width: 100%;}


    .gnb .depth01 > li:hover > a, .gnb .depth01 > li.on > a {color: #fff;}
    .gnb .depth01 > li > a::before {background-color: #fff;height: 1px;margin-top: 0;}
    .gnb .depth02 > ul > li > a:hover{color:#fff;}

    
    .util {margin-top: 32px; width: 100%; padding-left: 20px; padding-right: 20px; align-items: flex-start;}
    
    .support ul {gap: 25px;}
    .support ul li{color:#fff;}    
    .support ul li + li::before {height: 20px; background-color: #ffffff; left: -13px;}
    .support ul li a {font-size: 20px; color: #FFFFFF; line-height: 1.35;}

    .etc {margin-top: 10px; width: 100%;}
    .etc .total {display: none;}
    
    .sns ul li .instagram {background-color: #0B6EAF;}
    .sns ul li .instagram.active {width: auto; padding: 0 16px 0 39px; background-color: #FD3F90;}
    .sns ul li .instagram.active a {display: block;}

    #header .btn-close {display: block;}

    /*-------------------------------------------------------------------
        @footer
    -------------------------------------------------------------------*/
    #footer {padding: 35px 0 40px; background-size: 232px;}
    #footer .container {gap: 30px 0; flex-direction: column;}

    .logo-footer {width: 197px; height: 63px;}

    .company dl {gap: 12px;}
    .company dl + dl {margin-top: 30px;}
    .company dl dt {font-size: 13px;}
    .company dl dt::after {height: 12px; right: -6px; top: 4px;}
    .company dl dd {font-size: 13px;}
    .company dl dd .cs li {width: 100%;}

    .gnb .bg, .gnb_bg {display:none;}
    /* 메뉴롤오버 전체배경*/
    
    
    /* .dim{display:none;} */
}