@charset "utf-8";

/* 전역 스타일 */
:root {
  --wrapper: 1440px;
}

.is-floting{width: 100%; position: absolute; left: 0; overflow: hidden; height: 100%;}

/* 사이트 전체를 감싸기 */
#wrap{position: relative;min-width:var(--wrapper);max-width: 100%;overflow:hidden}


/* 레이아웃 wrapper 너비 */
/* 헤더 */  .head-wrapper{max-width: var(--wrapper); margin:0 auto}
/* 푸터 */  .foot-wrapper{max-width: var(--wrapper); margin:0 auto}
/* 퀵메뉴 */  .quickMenu-wrapper{max-width: var(--wrapper); margin:0 auto}

/* sub contents wrapper 너비*/
.contents-wrapper{width: var(--wrapper); margin:0 auto}


/* 네비게이션 상호작용시 백 아웃 레이어 */
#blackCurtain{display:none;z-index: 10000;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.5)}
#gnbCurtain{display:none;z-index: 1000;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.5)}


/* 다크모드 버튼 */
#util{display: flex;z-index:100;position: fixed;bottom: 20px;right: 20px;flex-direction:column;align-items:flex-end}
#util a, #util button{display:flex;align-items:center}
#util button ~ button{margin-top:10px}
#util button ~ a{margin-top:10px}
#util a ~ button{margin-top:10px}
#util a ~ a{margin-top:10px}
#util .scroll-top{display:none;width: 40px;height: 40px;background-color:#5c5e63;color:#aaa;border-radius:100%;box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
#util .scroll-top img{width: 13px;vertical-align: -3px}
@media screen and (max-width:1780px) {
  #util .auth-out, #util .logout{width:40px;padding:0;position:relative;text-indent:100%;white-space:nowrap;overflow:hidden}
  #util .auth-out img{position:absolute;top:11px;left:13px}
  #util .logout img{position:absolute;top:12px;left:13px}
  #util .btn-mode-toggle{width:40px}
  #util .btn-mode-toggle .toggle-symbole{left:4px}
}


/* 모바일 네비게이션 */ 
#mobileGnb{display:none;z-index:11000;position: fixed;top:0;right: -280px;width: 280px;height:100vh;background-color:#fff}
#mobileGnb li ul{display:none}
  #mobileGnbList{height:calc(100% - 100px);overflow-y:scroll}
    .moGnb-util{position:relative;height:100px;overflow:hidden;background-color:#303644}
    .moGnb-util .moGnb-util-close{position:absolute;top: 15px;right:15px}
    .moGnb-util .moGnb-util-account{display:flex;align-items:center;flex-wrap:wrap;padding:15px;height:100%}
    .moGnb-util .moGnb-util-account .head-util-logout{flex:0 0 100%;display:flex;align-items:center;justify-content:center;margin:0 0 15px}
    .moGnb-util .moGnb-util-account .head-util-logout i{margin-right:10px;color:#fff}
    .moGnb-util .moGnb-util-account .util-account-login{padding:8px 15px;text-align:center;border-radius:25px;font-size: 18px;font-family: 'Roboto', sans-serif}
    .moGnb-util .moGnb-util-account .util-account-login img{/* width:12px; */margin-right:3px;/* vertical-align:-1px; */}
    .moGnb-util .moGnb-util-account .util-account-login{/* border:1px solid #87898e; */color:#fff}
    .moGnb-util .moGnb-util-account .util-account-login ~ .util-account-login{margin-left:7px}

    .moGnb-depth-1 > li > a{display:block;padding: 0 18px 0 20px;transition: initial;border-bottom:1px solid #dfdfdf}
    .moGnb-depth-1 > li > a span{display:block;padding:20px 0;font-size: 18px;font-weight: 500;color:#5d5d5d;background:url(/resources/images/name/user/template01/layout/mo-gnb-depth-1.png) no-repeat 100% 50%}
    .moGnb-depth-1 > li > a.is-selected{background-color: #174572;border-color:#174572}
    .moGnb-depth-1 > li > a.is-selected span{font-weight: 400;color: #fff;background: url(/resources/images/name/user/template01/layout/snb-item-parent-bullet-hover.png) no-repeat 100% 50%}
    
    .moGnb-depth-2{position:relative;padding:15px 20px 20px}
    .moGnb-depth-2::after{content:'';position:absolute;bottom:0;left:0;width:100%;border-bottom:1px solid #174572}
    .moGnb-depth-2 > li ~ li{margin-top:8px}
    .moGnb-depth-2 > li > a{display: flex;height: 50px;padding: 0 15px;border-radius: 5px;font-size: 16px;border: 1px solid #c5c5c5}
    .moGnb-depth-2 > li > a span{display: block;flex: 1 1 auto;align-self: center;background: url(/resources/images/name/user/template01/layout/snb-state-fold.png) no-repeat 100% 50%}
    .moGnb-depth-2 > li > a.is-selected{background-color: #176ac7;color: #fff;border-color: #176ac7;border-radius: 5px 5px 0 0}
    .moGnb-depth-2 > li > a.is-selected span{background-image: url(/resources/images/name/user/template01/layout/snb-state-unfold.png)}
    .moGnb-depth-2 > li > a.is-selected.empty{border-radius: 5px}
    .moGnb-depth-2 > li > a.is-selected.empty span{background-image:none}
    .moGnb-depth-2 > li > a.empty span{background-image:none}  

    .moGnb-depth-3{display: none;padding: 10px 15px;border-radius: 0 0 5px 5px;border: solid #176ac7;border-width: 0 1px 1px 1px}
    .moGnb-depth-3 > li > a{display: block;padding: 3px 0 3px 20px;position: relative;background: url(/resources/images/name/user/template01/layout/snb-state-fold.png) no-repeat 100% 50%;transition:color 100ms ease-out}
    .moGnb-depth-3 > li > a span{display:inline-block;padding-bottom: 1px;border:1px solid transparent;line-height: 110%}
    .moGnb-depth-3 > li > a::before{content: '';position: absolute;top: 0;left: 8px;width: 4px;height: 100%;background: url(/resources/images/name/user/template01/layout/depth-3.png) no-repeat 0 10px;transition: inherit}
    .moGnb-depth-3 > li > a.is-selected{background-image: url(/resources/images/name/user/template01/layout/snb-state-unfold-black.png)}
    .moGnb-depth-3 > li > a.is-selected span{border-bottom-color: #176ac7;color: #176ac7}
    .moGnb-depth-3 > li > a.is-selected.empty{background-image:none}
    .moGnb-depth-3 > li > a.empty{background-image:none}

    .moGnb-depth-4{display:none;padding: 13px 17px;margin-top: 7px;background-color:#f4f5f9}
    .moGnb-depth-4 > li ~ li{margin-top:10px}
    .moGnb-depth-4 > li > a{display:block;position:relative;padding-left:13px;font-size: 14px}
    .moGnb-depth-4 > li > a::before{content:'';position:absolute;top:6px;left:0;width:5px;height:1px;background-color:#aaaaaa}
    .moGnb-depth-4 > li > a.is-selected{color:#176ac7}
    .moGnb-depth-4 > li > a.is-selected::before{background-color:#176ac7}

#mobileGnb.isAnonymous .moGnb-util{height:75px}
#mobileGnb.isAnonymous .moGnb-util .moGnb-util-close{top:28px}
#mobileGnb.isAnonymous .moGnb-util .moGnb-util-signin{margin-right:20px}
#mobileGnb.isAnonymous .moGnb-util .moGnb-util-signin a{color:#fff}
#mobileGnb.isAnonymous .moGnb-util .moGnb-util-signin a ~ a{position:relative;margin-left:20px}
#mobileGnb.isAnonymous .moGnb-util .moGnb-util-signin a ~ a::before{content:'';position:absolute;top:2px;left:-12px;width:1px;height:10px;background-color:rgba(255, 255, 255, 0.3)} 
#mobileGnb.isAnonymous #mobileGnbList{height:calc(100% - 75px)}








/* 헤더 */
#header{z-index:1010;position:relative;padding: 0 20px;}
.head-wrapper{position:relative}
  .head-logo{position:absolute;top: 25px;left:0}
  .head-logo h1{display:flex;align-items: center;}
  .head-logo h1 a{display:block}
  .head-logo h1 .head-logo-white{display:none}
  .head-logo h1 .head-logo-black{display:block}
  .head-logo h1 .v-bar{height:18px;width:1px;background-color: #ccc;margin:0 10px}
  .head-logo h1 small>a{font-size:30px;color:#000;font-weight: 700;transition:none}

  .head-mobile-menu{display:none;position:absolute;top: 23px;right:0}
  

/* GNB */
.ani-gnb{z-index: 1000;position:absolute;top:0;left:0;width:100%;height:90px;overflow:hidden;transition: background-color 100ms ease-out}
.ani-gnb::after{content:'';z-index: 1001;position:absolute;top:89px;left:0;width:100%;height:1px;background-color:#ddd;display:none}
.head-gnb{z-index: 1002;position:relative;width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:flex-end;}
.head-gnb .gnb-container{display:flex;align-items:center;margin-right: 70px;}
.head-gnb .gnb-container a[target="_blank"] span::after{display: inline-block;width: 14px;height: 14px;margin-left: 5px;margin-top: 5px;background: url(/resources/images/name/user/styleguide/icon-window.png) no-repeat 100% 0 / 14px;}

.head-gnb .gnb-parent-item{height:90px;}
.head-gnb .gnb-parent-item>a{position:relative;display:block;min-width:170px;text-align: center;height:90px;padding: 35px 20px 0;font-size: 20px;font-weight:700;color: #000;}

.head-gnb .gnb-parent-item>a span{display:inline-block}
.head-gnb .gnb-parent-item>.is-selected{background-color:#0a52a7;color:#fff;}

.head-gnb .gnb-parent-item>a::after{content:'';position:absolute;z-index: 1;top:89px;left:0;width:100%;height:1px;background-color:#fff;opacity: 0;}
.head-gnb .gnb-parent-item>.is-selected::after{background-color:#3b75b9}

.gnb-parent-item{position: relative;}
.gnb-parent-item .gnb-slave-wrapper{display:none;position:absolute;padding: 15px 0;top: 90px;left:0;width: 100%;min-height: 270px;background-color:#fff;transition:background-color 100ms ease-out}
.gnb-parent-item:nth-child(1) .gnb-slave-wrapper{border-left-width:1px}

  .gnb-slave-item>a{display:block;font-size:16px;color:#2f2f2f;padding:8px 15px;border-radius:3px;text-align:center;font-weight:500}
  .gnb-slave-item>a span{position:relative;;line-height:145%;border-bottom:1px solid transparent;word-break:keep-all}
  .gnb-slave-item>.is-selected{color:#2cd4ff}

  .gnb-slave-item>a.empty span::after{background:none}

  .gnb-parent-item>.is-selected+.gnb-slave-wrapper{background-color:#0a52a7}
  .gnb-parent-item>.is-selected+.gnb-slave-wrapper .gnb-slave-item>a{color:#fff}
  .gnb-parent-item>.is-selected+.gnb-slave-wrapper .gnb-slave-item>a.is-selected{color:#2cd4ff}
  .gnb-parent-item>.is-selected+.gnb-slave-wrapper .gnb-slave-item>a:hover span{color:#2cd4ff;border-bottom-color:#2fd5ff}

  .gnb-slave-wrapper:hover{background-color:#0a52a7}
  .gnb-slave-wrapper:hover .gnb-slave-item>a{color:#fff}
  .gnb-slave-wrapper:hover .gnb-slave-item>a.is-selected{color:#2cd4ff}
  .gnb-slave-wrapper:hover .gnb-slave-item>a:hover span{border-bottom-color:#2fd5ff}

  .gnb-slave-wrapper .gnb-slave-item>a.is-selected {color:#2cd4ff;font-weight:700}
  .gnb-slave-wrapper .gnb-slave-item>a.is-selected span{border-bottom-color:#2fd5ff;}

  .gnb-accessory{position:absolute;top: 180px;left: -40px}

.gnb-sitemap{position:absolute;top: 35px;right:0}
.gnb-sitemap .gnb-sitemap-white{display:none}
.gnb-sitemap .gnb-sitemap-black{display:block}



#quickMenu{padding: 27px 20px;background-color:#151521;border-bottom:1px solid #5c5c64}
#quickMenu .quickMenu-wrapper{display:flex;align-items:center;}
#quickMenu .quickMenu-title{flex:1}
#quickMenu .quickMenu-title h4{position:relative;font-weight:700;font-size:28px;color:#fff}
#quickMenu .quickMenu-title h4 img{vertical-align:-3px;margin-left:10px}

#quickMenu .quickMenu-navigation{display:flex;align-items:center}
#quickMenu .quickMenu-navigation a{font-weight:500;font-size:18px;color:#fff}
#quickMenu .quickMenu-navigation a:hover{color:#26aad4}
#quickMenu .quickMenu-navigation .v-bar{width:1px;height:17px;margin:0 50px;background-color:#5c5c64}


#footer{padding:60px 0;background-color:#151521}
  .foot-wrapper{display:flex}
    .foot-logo{margin-right:70px}
    .foot-logo{margin-right:70px}

    .foot-siteInformation{flex:1;display:flex;align-items:flex-start;padding-top:10px}
      .siteInformation-address{flex:1}
      .siteInformation-address p{font-weight:300;font-size:16px;line-height:25px;color:#fff}
      .siteInformation-address .copyright{margin-top:10px;color:#7c7c82}

      .siteInformation-termsMenu{margin-right:60px}
      .siteInformation-termsMenu a{display:block;font-weight:300;font-size:16px;color:#fff}
      .siteInformation-termsMenu a ~ a{margin-top: 19px;}
      .siteInformation-termsMenu a:hover{color:#26aad4}

      .siteInformation-familySite{position:relative;width:230px}
      .siteInformation-familySite .familySite-button{width: 100%;height:46px;padding:0 20px;font-weight:300;font-size:17px;background-color:#151521;color:#fff;border:1px solid #fff}
      .siteInformation-familySite .familySite-button span{position:relative;display:block;text-align:left}
      .siteInformation-familySite .familySite-button img{position:absolute;top:6px;right:0}
      .siteInformation-familySite .familySite-list{display:none;position:absolute;bottom:100%;left:0;width:100%;padding:30px 20px 20px;background-color:#151521;border:solid #fff;border-width:1px 1px 0 1px}
      .siteInformation-familySite .familySite-list li ~ li{margin-top:20px}
      .siteInformation-familySite .familySite-list li a{font-weight:300px;font-size:16px;color:#fff}
      .siteInformation-familySite .familySite-list li a:before{content:'-';display:inline-block;margin-right:10px;color:#fff}
      .siteInformation-familySite .familySite-list li a:hover{color:#26aad4}

      .siteInformation-familySite.is-visible .familySite-button{border-top-color: #3f3f57}



/* 상호작용시 스타일 변경 */
:root .is-gnbEnter .head-logo h1 .head-logo-white{display:none}
:root .is-gnbEnter .head-logo h1 .head-logo-black{display:block}
:root .is-gnbEnter .head-logo h1 small>a{color:#000}
:root .is-gnbEnter .head-logo h1 .v-bar{opacity:1;background-color:#ccc}

:root .is-gnbEnter .ani-gnb{background-color:#fff}
:root .is-gnbEnter .ani-gnb::after{background-color:#ddd;opacity:1}
:root .is-gnbEnter .head-gnb .gnb-parent-item>a::after{opacity:1}
:root .is-gnbEnter .head-gnb .gnb-parent-item>a:not(.is-selected)::after{background-color:#ddd}
:root .is-gnbEnter .head-gnb .gnb-parent-item>a:not(.is-selected){color:#000}

:root .is-gnbEnter .gnb-sitemap .gnb-sitemap-white{display:none}
:root .is-gnbEnter .gnb-sitemap .gnb-sitemap-black{display:block}

:root .is-gnbEnter .ani-gnb::after{display:block}




/* #sub-contents */
.main-contents{margin-top: 130px;padding: 0 20px;}
.main-contents .contents-wrapper{position:relative;display:flex;align-items: flex-start;}

  #snb{width:275px;margin-right:60px;border-radius: 25px;overflow:hidden;margin-bottom:50px;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);}
  #snb .snb-title{
    display:flex;
    justify-content:center;
    align-items:center;
    height:138px;
    border-radius:25px 25px 0 0;
    color:#fff;
    font-weight:700;
    font-size:30px;
    padding-bottom:28px;
    background:#0a52a7 url(/resources/images/name/user/template01/layout/snb-title-background.png) no-repeat 100% 100%
  }
  #snb .snb-list{padding:20px;margin-top:-28px;background-color:#fff;border-radius:25px 25px 0 0}
  #snb .snb-list .snb-item-parent ~ .snb-item-parent{border-top:1px solid #ccc}
  #snb .snb-list .snb-item-parent>a{display:flex;align-items:center;min-height:55px;padding:10px;font-weight:500;font-size:18px;color:#666}
  #snb .snb-list .snb-item-parent>a span{flex:1;position:relative;display:block;line-height:125%;word-break:keep-all}
  #snb .snb-list .snb-item-parent>a span::before{
    content:'';position:absolute;top:50%;right:0;transform:translateY(-50%);width:24px;height:25px;border-radius:3px;border:1px solid #ccc;
    background:#fff url(/resources/images/name/user/template01/layout/snb-item-plus.png) no-repeat 50% 50%;
  }

  #snb .snb-list .snb-item-parent>.is-selected{font-weight:700;color:#0a52a7}
  #snb .snb-list .snb-item-parent>.is-selected span::before{
    border-color:#0a52a7;
    background:#0a52a7 url(/resources/images/name/user/template01/layout/snb-item-minus.png) no-repeat 50% 50%;
  }

  #snb .snb-list .snb-item-parent .empty span::before{display:none}

  #snb .snb-list .snb-item-parent>a:hover{font-weight:700;color:#0a52a7}


  #snb .snb-list .snb-depth-3{display:none;padding:20px 15px;border-top:3px solid #084796}
  #snb .snb-list .snb-depth-3 .snb-slave-item ~ .snb-slave-item{margin-top:15px}
  #snb .snb-list .snb-depth-3 .snb-slave-item>a{position:relative;display:block;font-weight:400;font-size:16px;color:#666;padding-left:15px}
  #snb .snb-list .snb-depth-3 .snb-slave-item>a::before{content:'';position:absolute;top:50%;;left:0;transform:translateY(-50%);width:5px;height:5px;background-color:#a5a5a5;border-radius:100%}

  #snb .snb-list .snb-depth-3 .snb-slave-item>.is-selected{font-weight:600;color:#000}
  #snb .snb-list .snb-depth-3 .snb-slave-item>.is-selected::before{background-color:#000}
  
  #snb .snb-list .snb-depth-3 .snb-slave-item>a:hover{font-weight:600;color:#000}
  #snb .snb-list .snb-depth-3 .snb-slave-item>a:hover::before{background-color:#000}
  
  #snb .snb-list .is-selected + .snb-depth-3{display:block}

  .sub-container{min-height: 630px;padding-bottom: 100px;flex: 1}
    #navigator .navi-wrapper{min-height:115px;display:flex;flex-wrap:wrap;align-items: flex-start;padding-top: 30px;}
    #navigator .navi-title{flex:1 1 auto;font-weight:700;font-size:40px;color:#000;margin-bottom:20px}

    #navigator .navi-link{flex:0 0 auto;display:flex;align-items:center;padding-top: 15px;}
    #navigator .navi-link li{flex:0 0 auto}
    #navigator .navi-link li a{display:block;font-weight:400;font-size:15px;color:#666}
    #navigator .navi-link li a:hover{color:#0a52a7}
    #navigator .navi-link li ~ li img{margin:0 13px}
    #navigator .navi-link li ~ li .is-selected{font-weight:500;color:#111}
    #navigator .navi-link li ~ li .is-selected:hover{color:#0a52a7}

    #navigator .navi-util{flex:0 0 auto;margin-left:20px}
    #navigator .navi-util button{line-height:0;width:45px;height:45px;;border-radius:100%;border:1px solid #ddd}


    #sub-contents{padding:0 0 100px;background-color:#fff;}




/* 1440 이하 */
@media screen and (max-width:1480px) {

  /* 사이트 전체를 감싸기 */
  #wrap{min-width:480px}

  /* 레이아웃 wrapper 너비 */
  /* 헤더 */  .head-wrapper{width:auto;max-width: var(--wrapper)}
  /* 푸터 */  .foot-wrapper{width:auto;max-width: var(--wrapper)}

  /* sub contents wrapper 너비*/
  .contents-wrapper{width:auto;max-width: var(--wrapper);}


  #header{margin-bottom:0;height:70px;border-bottom:1px solid #ddd}
  
  .head-logo{top:16px}
  .head-logo h1 small>a{font-size:24px}

  .head-mobile-menu{display:block}

  .ani-gnb{display:none}
  .sitemap{display:none}

  .main-contents{margin-top:0}

  #snb{display:none}

  #navigator .navi-wrapper{min-height:80px}
  #navigator .navi-title{font-size:30px}
  #navigator .navi-link{padding-top:10px}
  #navigator .navi-util{display:none}

  #quickMenu{display:none}

  #footer{padding:40px 20px}
    .foot-wrapper{display:block}
      .foot-logo{margin:0;text-align: center;}
      .foot-siteInformation{display:block;padding: 40px 0;}
        .siteInformation-address p{text-align:center}
        .siteInformation-termsMenu{margin:20px 0 0;display:flex;justify-content:center}
        .siteInformation-termsMenu a{position:relative}
        .siteInformation-termsMenu a ~ a{margin:0 0 0 15px;padding-left:15px}
        .siteInformation-termsMenu a ~ a::before{content:'';position:absolute;top:50%;left:0;width:1px;height:10px;background-color:rgba(255, 255, 255, 0.2);transform:translateY(-50%)}
        .siteInformation-familySite{text-align:center;margin: 30px auto 0;}
}

@media screen and (max-width:700px) {
  #navigator .navi-wrapper{position:relative;display:block;height:auto}
  #navigator .navi-title{text-align: center}
  #navigator .navi-link{justify-content:center}
  #sub-contents{padding-top:20px}
}