@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 {height: 8rem;}
#header .container {position: fixed; left: 0; top: 0; background-color: #ffffff; max-width: 100%; width: 100%; display: flex; align-items: center; height: 8rem; z-index: 7; justify-content: space-between; border-bottom: 0.1rem solid #E9ECEF;}
#header.on{}

.logo {width: 15rem; height: 3rem; background: url('../img/common/logo.png') no-repeat center/100%; flex: none;}
.logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; }

#gnb {flex: 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;}
#gnb .logo {display: none;}
#gnb .btn-close {display: none; position: absolute; right: -6rem; top: 2.4rem;}
#gnb ul {display: flex; align-items: center; justify-content: center; gap: 2rem 4rem;}
#gnb ul li a {position: relative; display: block; padding: 0 1rem; font-weight: 700; font-size: 1.6rem; color: #343A40; line-height: 5;}
#gnb ul li a::before {content: ""; width: 100%; height: 0.4rem; position: absolute; left: 0; bottom: 0;}
#gnb ul li.on a {color: #6741D9;}
#gnb ul li.on a::before {background-color: #6741D9;}
#gnb .etc {display: none; margin-top: 6rem; width: 100%;}
#gnb .etc .btn {width: 100%;}
#gnb .etc .btn + .btn {margin-top: 1rem;}

.gnb-m{}

.etc {flex: none; display: flex; align-items: center; gap: 0 1rem;}
.etc .btn-ic {display: none;}

.shortcut {}

.util {}

.support {}

.assistant {}

.branding {}
 
/*-------------------------------------------------------------------
    @floating
-------------------------------------------------------------------*/
.floating .inner {position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 12.5rem; background-color: #212529; z-index: 6;}
.floating .inner ul li {text-align: center; color: #ffffff; font-size: 1.6rem; line-height: 1.5; font-weight: 600;}
.floating .inner ul li + li {border-top: 1px solid #868E96;}
.floating .inner ul li a {padding: 2rem 0 6.4rem; display: block; background: url('../img/icon/ic_link.png') no-repeat center bottom 2rem/2rem; color: #ffffff;}
.floating .inner ul li:nth-of-type(1) {padding: 2rem 0;}
.floating .inner ul li:nth-of-type(1) a {display: inline-block; font-size: 1.2rem; line-height: 1.667; font-weight: 500; background-repeat: no-repeat; background-position: left center; background-size: 2rem; padding: 0 0 0 2.4rem;}
.floating .inner ul li:nth-of-type(1) .link-android {margin-top: 2rem; background-image: url('../img/icon/ic_android.png');}
.floating .inner ul li:nth-of-type(1) .link-iphone {margin-top: 1rem; background-image: url('../img/icon/ic_iphone.png');}
 
/*-------------------------------------------------------------------
    @footer
-------------------------------------------------------------------*/
#footer {background-color: #343A40; padding: 8rem 0;}

.link{}

.family{}

.sns{}

.address{}

.logo-f{}

.copyright {font-size: 1.4rem; color: #868E96; text-align: center; line-height: 1.215; margin-top: 4rem;}

.fnb {display: flex; align-items: center; justify-content: center;}
.fnb ul {display: flex; align-items: center; justify-content: center; gap: 0.9rem 1.8rem; flex-wrap: wrap;}
.fnb ul li {position: relative;}
.fnb ul li::after {content: ""; width: 0.1rem; height: 0.6rem; background-color: #868E96; position: absolute; right: -0.9rem; top: 0.6rem;}
.fnb ul li:last-child:after {display: none;}
.fnb ul li a {color: #ffffff; font-weight: 600; font-size: 1.4rem; line-height: 1.215; display: block;}
 
/*-------------------------------------------------------------------
    @content
-------------------------------------------------------------------*/
#content{}

.container {max-width: 124rem; padding-left: 2rem; padding-right: 2rem; margin-left: auto; margin-right: auto;}

.has-padding{}

/*-------------------------------------------------------------------
    @floating
-------------------------------------------------------------------*/
 
/*-------------------------------------------------------------------
    @popup
-------------------------------------------------------------------*/
.dim {width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: #000000; opacity: 0.8; z-index: 8;}
.popup{}

.popup .pop-head{}

.popup .pop-cont{}

.popup .pop-footer{}

@media screen and (max-width: 1280px) {
    /*-------------------------------------------------------------------
        @header
    -------------------------------------------------------------------*/
    #gnb {position: fixed; top: 0; left: 0; height: 100vh; width: 100%; max-width: 36rem; z-index: 9; background-color: #ffffff; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 2.5rem 2rem; display: none}
    #header.on #gnb {display: flex;}
    #gnb .logo {display: block;}
    #gnb .btn-close {display: block;}
    #gnb ul {flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: 6rem;}
    #gnb ul li {width: 100%;}
    #gnb ul li a {font-size: 2rem; line-height: 3;}
    #gnb .etc {display: block;}
    #gnb .etc .btn {justify-content: flex-start; display: flex;}

    /* .etc {flex: none; display: flex; align-items: center; gap: 0 1rem;} */
    .etc .btn {display: none;}
    .etc .btn-ic {display: block;}

    /*-------------------------------------------------------------------
        @floating
    -------------------------------------------------------------------*/
    .floating {height: 11.6rem;}
    .floating .inner {position: fixed; right: auto; left: 0; top: auto; bottom: 0; transform: translateY(0); width: 100%;}
    .floating .inner ul {display: flex;}
    .floating .inner ul li {flex: 1 0; min-width: 0; height: 11.6rem;}
    .floating .inner ul li br {display: none;}
    .floating .inner ul li + li {border-top: 0; border-left: 1px solid #868E96;}
    .floating .inner ul li a {padding: 2rem 0 7.2rem; background-size: 3.2rem;}
    .floating .inner ul li:nth-of-type(1) a {background-size: 3.2rem; padding: 0; width: 3.2rem; height: 3.2rem}
    .floating .inner ul li:nth-of-type(1) a span {display: none;}
    .floating .inner ul li:nth-of-type(1) .link-android {margin-top: 2rem;}
    .floating .inner ul li:nth-of-type(1) .link-iphone {margin-top: 2rem; margin-left: 2rem;}
}