@charset "utf-8";

/**************************************************
*
*   layout.css
*
***************************************************/
/* body[data-page-type="sub"] .wrap {display: flex; flex-direction: column; min-height: 100vh;} */

.w-1510 {width: 100%; max-width: 1510px; margin: 0 auto; }
.w-1200 {width: 100%; max-width: 1200px; margin: 0 auto; }



@media screen and (max-width: 1510px) {
    .w-1510 {padding: 0 20px;}
    .sub-content-inner.w-1510 {padding: 100px 20px;}
}

@media screen and (max-width: 1200px) {
    .w-1200 {padding: 0 20px;}
    .sub-content-inner.w-1200 {padding: 60px 20px;}
}




/************************************************** 
    margin-bottom
***************************************************/
.mb-20 {margin-bottom: 20px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}
.mb-60 {margin-bottom: 60px;}
.mb-80 {margin-bottom: 80px;}




/************************************************** 
    #header
***************************************************/

#hd {position: relative; width: 100%; background: #fff; border-bottom: 1px solid #ddd; z-index: 999;}
#hd > .inner {height: 90px; display: flex; align-items: center; justify-content: space-between;}

#hd .head-logo {width: 100%; max-width: 240px;}
#hd .head-logo a {display: block;}

#hd .gnb {flex-grow: 1; width: 55%; margin: 0 20px;}
#hd .gnb .dep1 {display: flex; justify-content: center;}
#hd .gnb .dep1 > li { font-size: 20px; font-weight: 500; font-family: 'NEXON-Lv2-Gothic'; height: 90px; display: flex; align-items: center; padding: 0 14px;}

#hd .gnb .dep1 > li > a {position: relative; display: block;}
#hd .gnb .dep1 > li > a::before {content: ''; background: #aaa; width: 4px; height: 4px; position: absolute; top: 50%; left: -2px; transform: translateY(-50%); display: block; border-radius: 50%;}
#hd .gnb .dep1 > li > a:first-child::before {display: none;}

#hd .gnb .dep1 > li.on > a, #hd .gnb .dep1 > li > a:hover {color:#009C78; font-weight: bold;}
#hd .gnb .dep1 > li > a::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #009C78; opacity:0}
#hd .gnb .dep1 > li.on::after {width: 100%; opacity: 1;}

#hd .gnb .sub-menu-cmn {display: none; position: absolute; top: 100%; left: 0; width : 100%; box-shadow: 0px 20px 20px rgba(0,0,0,.1); background: #EFF8F2; border-top: 1px solid #ddd;}
#hd .gnb .sub-menu-cmn .inner {display: flex; min-height: 242px; transition: .3s;}
#hd .gnb .sub-menu-cmn .sub-title {width: 30%; padding: 50px 0; border-radius: 0 0 30px 0; position: relative;}
#hd .gnb .sub-menu-cmn .sub-title::after {content: ''; background: url('../../../user/web/images/main/sub_menu_logo_img.png') center no-repeat; width: 330px; height: 223px; position: absolute; right: 0; bottom: -10px;}
#hd .gnb .sub-menu-cmn .sub-title h2 {font-size: 30px; display: flex; height: auto;}
/*#hd .gnb .sub-menu-cmn .sub-title h2::after {content: ''; background: url('../../../user/web/images/main/sub_title_icon.svg') center no-repeat; width: 30px; height: 30px; display: block; margin-left: 10px; margin-right: 30px;}*/
#hd .gnb .sub-menu-cmn .sub-title p {color: #4B4B4B; margin-top: 10px;}
#hd .gnb .dep2 {width: 70%; padding: 50px 46px; padding-right: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;}
#hd .gnb .dep2 > li {font-size: 18px; min-height: 59px;}
#hd .gnb .dep2 > li > a {display: block; padding : 18px 15px; width: 100%; border: 1px solid #ddd; border-radius: 5px; transition: .3s; background: #fff;}
#hd .gnb .dep2 > li > a::after {content: ''; background: url('../../../user/web/images/icon/icon_sub_menu.svg');}
#hd .gnb .dep2 > li > a:is(:hover, :focus) {background: #00B087; color: #fff;}

#hd .head-util {display: flex; align-items: center; gap: 30px;}
#hd .head-util .info {display: flex; align-items: center; gap: 20px;}
#hd .head-util .info li {font-size: 15px;}
#hd .head-util .info li a {display: block;}
#hd .head-util .info li a img {margin: 0 auto 5px;}
#hd .head-util .info li.search a img {margin-bottom: 0;}
#hd .head-util .sitemap-btn {display: flex; flex-direction: column; gap: 8px;}
#hd .head-util .sitemap-btn span {display: block; width: 34px; height: 3px; background: #000;}


@media screen and (max-width: 1510px) {
    
}
@media screen and (max-width: 1400px) {
    #hd .head-logo {max-width: 220px;}
    #hd .gnb .dep1 {width: 100%}
    #hd .gnb .dep1 > li {font-size: 18px; padding: 0 10px;}
    #hd .head-util .info li{font-size: 0; padding: 5px;}
    #hd .head-util .info li a img {margin-bottom: 0;}
    #hd .head-util {gap: 20px;}
    #hd .head-util .info {gap: 10px;}
    #hd .gnb .sub-menu-cmn .sub-title h2 {font-size: 24px}
    #hd .gnb .sub-menu-cmn .sub-title p {font-size: 16px;}
    #hd .gnb .dep2 > li {font-size: 16px;}
    
}

@media screen and (max-width: 1200px) {
    #hd .head-logo {max-width: 185px;}
    #hd .gnb {margin : 0 10px;}
    #hd .gnb .dep1 > li {font-size: 17px; padding: 0 6px;}
    #hd .head-util {gap: 10px;}
    #hd .head-util .info {gap: 6px;}
    #hd .head-util .info li a img {width: 26px;}
    #hd .head-util .sitemap-btn span {width: 30px;}
}

@media screen and (max-width: 1024px) {
    #hd .gnb {display: none;}
    #hd .head-util {display: none;}
    #hd .head-util .info li {font-size: 14px;}
}

@media screen and (max-width: 768px) {
    #hd > .inner {height: 80px;}
}

@media screen and (max-width: 480px) {
    #hd .head-logo {max-width: 200px; transition: .3s;}
    #hd .head-util {margin-left: 20px;}
    #hd .head-util .info {gap: 10px;}

}



/************************************************** 
    사이트맵
***************************************************/
#hd .sitemap-wrap {}
#hd .sitemap-popup {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100vh;     background: #fff url('../../../user/web/images/main/sitemap_bg.png') no-repeat bottom -20px right 0px; filter: grayscale(50%); opacity: 0; visibility: hidden; transition: opacity 0s ease-in, transform 0s; display: flex;}
#hd .sitemap-popup .left-box {position: relative; z-index: 1; overflow: hidden;background: linear-gradient(90deg, #4BC065 12%, #00A37D 100%); min-width: 360px;}
#hd .sitemap-popup .left-box h3 {font-size: 32px; padding: 0 40px; transform: translateY(80px); font-weight: 500; color: #fff; position: relative; z-index: 10;}
#hd .sitemap-popup .left-box h3 span {display: block;}
#hd .sitemap-popup .left-box h3 span strong {font-weight: 500;}
#hd .sitemap-popup .left-box h3 span:first-of-type strong {color: #00FFEA;}
#hd .sitemap-popup .left-box h3 span:last-of-type strong {color: #FFFF73;}
#hd .sitemap-popup .rolling-text {position: absolute; left: -45px; top: 0; white-space: nowrap; display: inline-block; animation: marquee02 25s linear infinite;}
#hd .sitemap-popup .rolling-text p {display: block; margin: 0; font-size: 130px; font-weight: bolder; color: #ffffff0e; writing-mode: vertical-rl;}

#hd .sitemap-popup .right-box {width: calc(100% - 360px); padding: 35px 160px 20px 125px; display: flex; flex-direction: column; gap: 50px;}
#hd .sitemap-popup .right-box .hd-box {display: flex; align-items: center; justify-content: flex-end; gap: 40px;}
#hd .sitemap-popup .right-box .hd-box a {display: block; font-size: 13px;}
#hd .sitemap-popup .right-box .hd-box .sitemap-cls-btn {width: 22px; height: 22px; background: url('../../../user/web/images/icon/icon_cls_btn.svg') no-repeat center; background-size: contain;}
#hd .sitemap-popup .right-box .menu-wrap {display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; margin-right: 50px;}
#hd .sitemap-popup .right-box .menu-wrap .hd {padding-bottom: 32px; border-bottom: 1px solid #d9d9d9;}
#hd .sitemap-popup .right-box .menu-wrap .hd span {display: block; text-transform: uppercase; color: #aaa; font-size: 17px; font-weight: 200; margin-bottom: 15px;}
#hd .sitemap-popup .right-box .menu-wrap .hd h3 {font-size: 28px; font-weight: 600;}
#hd .sitemap-popup .right-box .menu-wrap .list {display: flex; flex-direction: column; gap: 15px; margin-top: 40px;}
#hd .sitemap-popup .right-box .menu-wrap .list li a {display: block; font-size: 18px; color: #888; font-weight: 500;}
#hd .sitemap-popup .right-box .menu-wrap .list li a:hover {color: #00B893; text-decoration: underline; text-underline-offset: 3px;}

#hd .sitemap-popup.active {transition: opacity 0.3s ease-out, transform 0.3s ease-out; opacity: 1; visibility: visible; transform: scale(1);}

/* 외부창 연결시 */
#hd .sitemap-popup .right-box .menu-wrap .list li a[target=_blank]::after {content: ''; display: inline-block; margin-left: 3px; width: 15px; height: 15px; background: url('../../../user/web/images/icon/icon_external.svg') no-repeat center;}
.lnb .dep2 li a[target=_blank]::after {content: ''; display: inline-block; margin-left: 3px; width: 15px; height: 15px; background: url('../../../user/web/images/icon/icon_external.svg') no-repeat center;}
#hd .gnb .dep2 > li a[target=_blank]::after {content: ''; display: inline-block; margin-left: 5px; width: 15px; height: 15px; background: url('../../../user/web/images/icon/icon_external.svg') no-repeat center;}
#hd .gnb .dep2 > li a[target=_blank]:hover::after {background: url('../../../user/web/images/icon/icon_external_white.svg') no-repeat center;}


@media screen and (max-width: 1600px) {
    #hd .sitemap-popup .left-box {min-width: 20%;}
    #hd .sitemap-popup .left-box h3 {padding: 80px 20px; transform: translateY(0);}
    #hd .sitemap-popup .right-box {width: 80%; padding: 35px 20px 20px 50px;}
    #hd .sitemap-popup .right-box .menu-wrap {margin-right: 0;}
}
@media screen and (max-width: 1400px) {
    #hd .sitemap-popup .left-box h3 {font-size: 28px;}
    #hd .sitemap-popup .right-box {padding: 35px 20px 20px 50px;}
    #hd .sitemap-popup .right-box .menu-wrap {gap: 30px;}
    #hd .sitemap-popup .right-box .menu-wrap .hd {padding-bottom: 15px;}
    #hd .sitemap-popup .right-box .menu-wrap .hd span {margin-bottom: 5px; font-size: 14px;}
    #hd .sitemap-popup .right-box .menu-wrap .hd h3 {font-size: 28px;}
    #hd .sitemap-popup .right-box .menu-wrap .list {margin-top: 20px;}
    #hd .sitemap-popup .right-box .menu-wrap .list li a {font-size: 16px;}
}
@media screen and (max-width: 1080px) {
    #hd .sitemap-popup .left-box {width: 200px;}
    #hd .sitemap-popup .left-box h3 {font-size: 24px; padding: 50px 30px; transform: translateY(0);}
    #hd .sitemap-popup .left-box h3 span {display: inline-block;}
    #hd .sitemap-popup .rolling-text {left: -5px; animation: marquee02 25s linear infinite;}
    #hd .sitemap-popup .rolling-text p {font-size: 80px;}
    #hd .sitemap-popup .right-box .menu-wrap {grid-template-columns: repeat(3, 1fr); overflow: hidden; overflow-y: auto;}
    #hd .sitemap-popup .right-box .menu-wrap::-webkit-scrollbar {display: none;}
    #hd .sitemap-popup .right-box .menu-wrap::-webkit-scrollbar-thumb {display: none;}
    #hd .sitemap-popup .right-box .menu-wrap .hd h3 {font-size: 22px;}
    #hd .sitemap-popup .right-box .menu-wrap .list {gap: 10px;}
    #hd .sitemap-popup {background-size: 300px; background-position: bottom -40px right 10px;}
}
@media screen and (max-width: 890px) {
    #hd .sitemap-wrap {display: none;}
}




/************************************************** 
    footer
***************************************************/
#ft {width: 100%; background: #395140; color: #eee; font-family: 'pretendard';}
#ft .inner {padding: 60px 0;}
#ft .foot-top {padding-bottom: 40px; border-bottom: 1px solid #adadad;}
#ft .foot-top .link {display: flex; gap: 40px;}
#ft .foot-top .link li {position: relative;}
#ft .foot-top .link li::after {content: ''; background: #aaa; width: 4px; height: 4px; position: absolute; top: 50%; right: -22px; transform: translateY(-50%); display: block; border-radius: 50%;}
#ft .foot-top .link li:last-child:after{display: none;}
#ft .foot-top .link li a {display: block; font-weight: 500;}


#ft .foot-btm {padding-top: 40px; display: flex; justify-content: space-between;}
#ft .foot-btm .info {}
#ft .foot-btm .info li {display: flex; gap: 30px; font-size: 16px; line-height: 26px;}
#ft .foot-btm .info li span {display: block;}
#ft .foot-btm .info li b {margin-left: 10px;}
#ft .foot-btm .info li.copyright {color: #aaa;}

@media screen and (max-width: 1510px) {
    #ft .inner {padding: 60px 20px;}
}

@media screen and (max-width: 1024px) {
    #ft .inner {padding: 40px 20px;}
    #ft .foot-top .link li {font-size: 16px;}
    #ft .foot-btm {flex-direction: column;}
    #ft .foot-btm .info li {flex-direction: column; gap: 0;}
    #ft .foot-logo {margin-top: 10px;}
}

@media screen and (max-width: 768px) {
    #ft .inner {padding: 30px 20px;}
    #ft .foot-top {padding-bottom: 25px;}
    #ft .foot-top .link {gap: 30px;}
    #ft .foot-top .link li::after {right: -16px;}
    #ft .foot-btm {padding-top: 25px;}
    #ft .foot-btm .info li {font-size: 15px;}
}

/************************************************** 
   모바일 메뉴
***************************************************/
#hd .mb-menu-open {width: 30px; height: 30px; display: none;}
#hd .mb-menu-open span {display: block; width: 100%; height: 3px; border-radius: 2px; background-color: #000; transition: background-color .4s; position: relative;}
#hd .mb-menu-open span+span {margin-top: 5px;}
#hd .mb-menu-open span:nth-child(1) {animation: ease .8s menu-icon-top-2 forwards;} 
#hd .mb-menu-open span:nth-child(2) {animation: ease .8s menu-icon-scaled-2 forwards;} 
#hd .mb-menu-open span:nth-child(3) {animation: ease .8s menu-icon-bottom-2 forwards;} 
#hd .mb-menu-open:hover span:nth-child(1) {animation: ease .8s menu-icon-top forwards;} 
#hd .mb-menu-open:hover span:nth-child(2) {animation: ease .8s menu-icon-scaled forwards;} 
#hd .mb-menu-open:hover span:nth-child(3) {animation: ease .8s menu-icon-bottom forwards;}


#mob-gnb {background: #fff; width: 100%; height: 100%; overflow: auto; position: fixed; top: 0; right: 0; z-index: 50; padding-bottom: 50px; display: none; font-family: 'pretendard', sans-serif;}
#mob-gnb::-webkit-scrollbar {display: none;}
#mob-gnb::-webkit-scrollbar-thumb {display: none;}
#mob-gnb_bg_black {content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 49; display: none;}
#mob-gnb.active {display: none; right: 0;}
#mob-gnb .mob-gnb-hd {display: flex; align-items: center; justify-content: space-between; padding: 26px 20px; background: #00B893; margin-bottom: 40px;}
#mob-gnb .mob-gnb-hd .lb {margin-right: auto; color: #fff; display: flex; gap: 20px;}
#mob-gnb .mob-gnb-hd .lb a {display: flex; align-items: center; gap: 10px;}
#mob-gnb .mob-gnb-hd .lb a:hover {color: #9bff98;}
#mob-gnb .mob-gnb-hd .lb a::before {content: ''; display: block; width: 20px; height: 22px; background-size: contain;}
#mob-gnb .mob-gnb-hd .lb a.login::before {background: url('../../../user/web/images/icon/icon_m_login.svg') no-repeat center; background-size: cover; width: 22px;}
#mob-gnb .mob-gnb-hd .lb a.join::before {background: url('../../../user/web/images/icon/icon_m_join.svg') no-repeat center; background-size: cover; width: 22px;}
#mob-gnb .mob-gnb-hd .lb a.logout::before {background: url('../../../user/web/images/icon/icon_m_logout.svg') no-repeat center; background-size: cover;}
#mob-gnb .mob-gnb-hd .lb a.mypage::before {background: url('../../../user/web/images/icon/icon_m_mypage.svg') no-repeat center; background-size: cover;}
#mob-gnb .mob-gnb-hd .lb a.admin::before {background: url('../../../user/web/images/icon/icon_m_admin.svg') no-repeat center; background-size: cover;}
#mob-gnb .mob-gnb-hd .mb-menu-close {filter: invert(10);}
#mob-gnb .mb-close-btn {width: 35px; height: 35px; overflow: hidden;}
#mob-gnb .mb-close-btn img { transition: all .35s ease; filter: invert(10);}
#mob-gnb .mb-close-btn:hover img {transform: rotate(180deg);}
#mob-gnb .depth-list {display: grid; gap: 30px; padding: 0 20px;}
#mob-gnb .depth-list a.dep-01 {display: block; color: #222; font-size: 20px; font-weight: 600; transition: all ease .3s; border-bottom: 1px solid #ddd; padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between;}
#mob-gnb .depth-list a.dep-01 p {font-family: 'Pretendard', sans-serif; font-weight: bold;}
#mob-gnb .depth-list a.dep-01 span {display: block; font-size: 14px; font-weight: 400; color: #686868; transition: all ease .3s; word-break: keep-all; text-transform: uppercase;}
#mob-gnb .dep-02-list {padding-top: 15px; border-top: 1px solid #333; margin-top: -1px; display: none;}
#mob-gnb .dep-02-list li {border-bottom: 1px solid #ddd;}
#mob-gnb .dep-02-list a {display: flex; gap: 5px; width: 100%; font-size: 16px; -webkit-font-weight: 300; color: #686868; margin: 5px 0; padding: 5px 0;}
#mob-gnb .dep-02-list a img {filter: brightness(0.65); width: 12px;}
#mob-gnb .dep-02-list a:hover {color: #000; font-weight: 500;}
#mob-gnb .dep-02-list a:hover img {filter: brightness(0.1);}

#mob-gnb .mb-toggle-btn {height: 25px; width: 25px; background: #525252; overflow: hidden; border-radius: 50%;}
#mob-gnb .mb-toggle-btn img {transition: all .35s ease;}
#mob-gnb .mb-toggle-btn:hover img {transform: translateY(-25px) rotate(180deg);}
#mob-gnb .mb-toggle-btn.active {background: #1ea772;}
#mob-gnb .mb-toggle-btn.active img {transform: translateY(-25px) rotate(180deg);}
#mob-gnb .mb-toggle-btn.active img:last-of-type {filter: brightness(10);}

#mob-gnb .login-box {margin-top: 50px; width: 100%; display: flex; align-items: center; gap: 15px;}
#mob-gnb .login-box button {display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #585858;}
#mob-gnb .login-box button img {transition: all ease .3s;}
#mob-gnb .login-box button:hover {color: #191B1D;}
#mob-gnb .login-box button:hover img {filter: invert(1);}

/* 외부창 연결 */
#mob-gnb .dep-02-list a[target=_blank]::after {content: ''; display: inline-block; width: 15px; height: 15px; background: url('../../../user/web/images/icon/icon_external.svg') no-repeat center;}

@media screen and (max-width: 1024px) {
    #hd .mb-menu-open {display: block;}
}


/* 마키텍스트 애니메이션 */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee02 {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes menu-icon-top {
    0% {
      top: 0;
      transform: rotate(0);
    }
  
    50% {
      top: 8px;
      transform: rotate(0);
    }
  
    100% {
      top: 8px;
      transform: rotate(45deg);
    }
}

@keyframes menu-icon-top-2 {
    0% {
        top: 8px;
        transform: rotate(45deg);
    }

    50% {
        top: 8px;
        transform: rotate(0);
    }

    100% {
        top: 0;
        transform: rotate(0);
    }
}

@keyframes menu-icon-bottom {
    0% {
        bottom: 0;
        transform: rotate(0);
    }

    50% {
        bottom: 8px;
        transform: rotate(0);
    }

    100% {
        bottom: 8px;
        transform: rotate(135deg);
    }
}

@keyframes menu-icon-bottom-2 {
    0% {
        bottom: 8px;
        transform: rotate(135deg);
    }

    50% {
        bottom: 8px;
        transform: rotate(0);
    }

    100% {
        bottom: 0;
        transform: rotate(0);
    }
}

@keyframes menu-icon-scaled {
    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes menu-icon-scaled-2 {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}



@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) {
    
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 480px) {
    
}