@charset "utf-8";

:root {
    --headerTopHeight : 0;
}

body{overflow: hidden}

/* [S] 헤더 */
header{position: fixed; left: 0; top: 0; width: 100%; z-index: 51;}
.top-header{border-bottom: .1rem solid rgba(255,255,255,.2); padding: .9rem 0 1rem;}
.top-header .area{max-width: 188rem; padding: 0 4rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.top-header .top-header-link ul{display: flex; flex-wrap: wrap; margin: 0 -1.3rem;}
.top-header .top-header-link li{padding: 0 1.3rem; position: relative;}
.top-header .top-header-link li::after{content:""; display: block; position: absolute; right: 0; top: 50%; margin-top: -.5rem; width: .1rem; height: 1rem; background-color: rgba(255,255,255,.2);}
.top-header .top-header-link li:last-child::after{display: none;}
.top-header .top-header-link a{font-size: 1.4rem; color: #ffffff; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem; transition: background-size .5s;}
.top-header .top-header-link a:hover{background-size: 100% .1rem;}

.top-header-language{position: relative;}
.top-language-button{font-size: 1.3rem; font-family: pb; color: #ffffff; display: block; padding-left: 1.8rem; background: url(../../images/common/btn-lang.png) no-repeat left center / 1.4rem; padding-right: 2.1rem; position: relative;}
.top-language-button::after{content:""; display: block; position: absolute; right: 0; top: 50%; margin-top: -.25rem; width: .9rem; height: .5rem; background: url(../../images/common/ic-lang-arrow.png) no-repeat center center / cover; transition: transform .3s;}
.top-language-button.on::after{transform: rotate(180deg);}
.top-header-language ul{position: absolute; right: 0; top: calc(100% + 1.4rem); background-color: #f2f2f2; width: 100%; visibility: hidden; opacity: 0; z-index: 2; border-radius: 1rem; overflow: hidden;}
.top-header-language ul.on{visibility: visible; opacity: 1;}
.top-header-language a{font-size: 1.6rem; font-family: pb; color: #222222; display: block; padding: .3rem .7rem; text-align: center;}
.top-header-language a:hover{color: #503992; background-color: rgba(80,57,146,.2);}

.wrap-header{border-bottom: .1rem solid rgba(255,255,255,.2);}
.wrap-header .area{max-width: 188rem; padding: 0 4rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.wrap-header .header-logo img{display: none; width: 18.7rem}
.wrap-header .header-logo img.on{display: block;}
.wrap-header .header-menu-box{display: flex; flex-wrap: wrap; align-items: center;}
.wrap-header .mobile-menu-header{display: none;}
.wrap-header .header-menu > ul{display: none;}
.wrap-header .header-menu .ul_1{display: flex; flex-wrap: wrap; align-items: center; margin: 0 -5rem;}
.wrap-header .header-menu .li_1:last-child{display: none;}
.wrap-header .header-menu .a_1{font-size: 2.2rem; font-family: pm; color: white; font-family: pm; display: block; padding: 3.35rem 5rem}
.wrap-header .header-menu .div_2{position: absolute; left: 0; top: 100%; width: 100%; background-color: #f7fafa; visibility: hidden; opacity: 0; transition: opacity .35s;}
.wrap-header .header-menu .ul_2{max-width: 168rem; margin: 0 auto; display: flex; flex-wrap: wrap; margin-top: -1.8rem; padding: 4.5rem 4rem 5.5rem;}
.wrap-header .header-menu .li_2{width: 20%; margin-top: 1.8rem}
.wrap-header .header-menu .a_2{font-size: 2rem; font-family: pm; color: #222222; display: inline-block; padding-left: 1.8rem; position: relative;}
.wrap-header .header-menu .a_2 span{background-image: linear-gradient(#503992, #503992); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 .1rem; transition: background-size .5s;}
.wrap-header .header-menu .a_2::before{content:""; display: block; position: absolute; left: 0; top: 1rem; width: .8rem; height: .8rem; border-radius: 50%; background-color: #222222;}
.wrap-header .header-menu .a_2[target=_blank]{padding-right: 2.4rem; background: url(../../images/common/ic-blank.png) no-repeat right top .5rem;}
.wrap-header .header-menu .a_2:hover span{background-size: 100% .1rem;}
.wrap-header .header-menu .li_2:hover .a_2{color: #503992;}
.wrap-header .header-menu .li_2:hover .a_2::before{background-color: #503992;}
.wrap-header .header-menu .li_2:hover .a_2[target=_blank]{background: url(../../images/common/ic-blank-hover.png) no-repeat right top .5rem;}
.wrap-header .header-menu .li_2:hover .a_2[target=_blank]::after{width: calc(100% - 4.2rem);}
.wrap-header .header-menu .ul_3{margin-top: 2rem;}
.wrap-header .header-menu .li_3{margin-bottom: .5rem;}
.wrap-header .header-menu .li_3:last-child{margin-bottom: 0;}
.wrap-header .header-menu .a_3{font-size: 1.6rem; color: #555555; font-family: pm; display: inline-block; position: relative; padding-left: 1.8rem;}
.wrap-header .header-menu .a_3 span{background-image: linear-gradient(#74bfc7, #74bfc7); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 .1rem; transition: background-size .5s;}
.wrap-header .header-menu .a_3::before{content:""; display: block; position: absolute; left: 0; top: 1rem; width: .8rem; height: .2rem; background-color: #a2a2a2;}
.wrap-header .header-menu .a_3[target=_blank]{padding-right: 2.4rem; background: url(../../images/common/ic-blank.png) no-repeat right top .2rem;}
.wrap-header .header-menu .li_3:hover span{background-size: 100% .1rem;}
.wrap-header .header-menu .li_3._active .a_3,
.wrap-header .header-menu .li_3:hover .a_3{color: #74bfc7;}
.wrap-header .header-menu .li_3._active .a_3::after,
.wrap-header .header-menu .li_3:hover .a_3::after{width: calc(100% - 1.8rem);}
.wrap-header .header-menu .li_3:hover .a_3[target=_blank]{background: url(../../images/common/ic-blank-hover2.png) no-repeat right top .2rem;}
.wrap-header .header-menu .li_3:hover .a_3[target=_blank]::after{width: calc(100% - 4.2rem);}
.wrap-header .header-info ul{display: flex; flex-wrap: wrap; align-items: center;}
.wrap-header .header-info li{position: relative;}
.wrap-header .header-info li.mobile-info{display: none;}
.wrap-header .header-info .popup-open{background: url(../../images/common/ic-alert.png) no-repeat center center / cover;; text-indent: -9999rem; width: 2.3rem; height: 2.6rem; margin-left: 12rem;}
.wrap-header .header-info .popup-count{position: absolute; right: -.8rem; bottom: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background-color: #36c0c9; text-align: center; line-height: 1.8rem; font-size: 1.2rem; font-family: pb; color: white; text-indent: 0;}
.wrap-header .header-info .sitemap-link{width: 2.8rem; height: 2.2rem; text-indent: -999rem; display: block; margin-left: 9rem; position: relative;}
.wrap-header .header-info .sitemap-link span{position: absolute; background-color: white; height: .3rem; left: 0; transition: width .35s;}
.wrap-header .header-info .sitemap-link span.top-line{top: 0; width: 100%;}
.wrap-header .header-info .sitemap-link span.middle-line{width: 100%; top: 50%; margin-top: -.15rem;}
.wrap-header .header-info .sitemap-link span.bottom-line{bottom: 0; width: 1.9rem;}
.wrap-header .header-info .sitemap-link:hover span{width: 100%;}
.wrap-header .header-info .btn-gnb-open{display: none;}

header.on,
header.scroll{background-color: white;}
header.on .top-header,
header.scroll .top-header{border-bottom: .1rem solid rgba(133,133,133,.2);}
header.on .wrap-header .header-logo .white,
header.scroll .wrap-header .header-logo .white{display: none;}
header.on .wrap-header .header-logo .color,
header.scroll .wrap-header .header-logo .color{display: block;}
header.on .top-language-button,
header.scroll .top-language-button{background: url(../../images/common/btn-lang-on.png) no-repeat left center / 1.4rem; color: #222222;}
header.on .top-language-button::after,
header.scroll .top-language-button::after{background: url(../../images/common/ic-lang-arrow-on.png) no-repeat center center / cover;}
header.on .top-header-link a,
header.scroll .top-header-link a{color: #555555;}
header.on .top-header-link li::after,
header.scroll .top-header-link li::after{background-color: #d8d8d8;}
header.on .wrap-header,
header.scroll .wrap-header{border-bottom: .1rem solid rgba(133,133,133,.2);}
header.on .wrap-header .header-menu .a_1,
header.scroll .wrap-header .header-menu .a_1{color: #222222; position: relative;}
header.on .wrap-header .header-menu .a_1.on,
header.scroll .wrap-header .header-menu .a_1.on{color: #503992;}
header.on .wrap-header .header-menu .a_1.on::before,
header.scroll .wrap-header .header-menu .a_1.on::before{content:""; display: block; position: absolute; left: 50%; margin-left: -.9rem; bottom: 2rem; width: 1.8rem; height:.8rem; background: url(../../images/common/ic-menu-on.png) no-repeat center center / cover;}
header.on .wrap-header .header-info .popup-open,
header.scroll .wrap-header .header-info .popup-open{background: url(../../images/common/ic-alert-on.png) no-repeat center center / cover;}
header.on .wrap-header .header-info .sitemap-link span,
header.scroll .wrap-header .header-info .sitemap-link span{background-color: #222222}

header.on .top-header .top-header-link a,
header.scroll .top-header .top-header-link a{background-image: linear-gradient(#555555, #555555)}

.wrap-header .header-menu .div_2.on{visibility: visible; opacity: 1;}

@media screen and (max-width: 1680px) {
    .wrap-header .header-menu .a_1{font-size: 2rem; padding: 2.5rem 1.5rem;}
    .wrap-header .header-info .popup-open{margin-left: 5rem;}
    .wrap-header .header-info .sitemap-link{margin-left: 5rem;}
}

@media screen and (max-width: 1200px) {
    .wrap-header .area{padding: 2.45rem 4rem;}
    .wrap-header .header-menu{position: absolute; right: -100%; top: var(--headerTopHeight); width: calc(100% - 2rem); max-width: 50rem; z-index: 2; height: calc(100vh - var(--headerTopHeight)); background-color: white; transition: right .35s;}
    @supports (-webkit-touch-callout: none) {
        .wrap-header .header-menu{height: calc(var(--vh, 1vh) * 94);}
    }
    .wrap-header .header-menu.on{right: 0;}
    .wrap-header .mobile-menu-header{display: none; flex-wrap: wrap; justify-content: space-between; align-items: center; height: 6rem; padding: 0 1.8rem 0 2rem; background-color: #f7fafa;}
    .wrap-header .mobile-menu-header .mobile-menu-logo img{width: 10.7rem;}
    .wrap-header .mobile-menu-header .mobile-menu-close{width: 6.5rem; height: 6rem; text-indent: -9999rem; background: url(../../images/common/btn-menu-close.png) no-repeat center center; transition: transform .3s}
    .wrap-header .mobile-menu-header .mobile-menu-close:hover{transform: rotate(180deg);}
    .wrap-header .mobile-menu-info{display: flex; flex-wrap: wrap; align-items: center;}
    .wrap-header .header-menu .menuUItop{position: relative; height: 100%;}
    .wrap-header .header-menu .ul_1{flex-direction: column; align-items: start; margin: 0;}
    .wrap-header .header-menu .a_1{width: 18rem; height: 6.5rem; color: #222222 !important; padding: 0; font-size: 2rem; text-align: center; display: flex; justify-content: center; align-items: center;}
    .wrap-header .header-menu .div_2{left: auto; right: 0; width: calc(100% - 18rem); visibility: visible; opacity: 1; top: 0; height: 100%; display: none; background-color: #f7fafa;}
    .wrap-header .header-menu .div_2.on{display: block;}
    .wrap-header .header-menu .ul_2{padding: 0; margin-top: 0;}
    .wrap-header .header-menu .li_2{width: 100%; margin-top: 0;}
    .wrap-header .header-menu .a_2{position: relative; width: 100%; display: block; padding: 1.25rem 7rem 1.25rem 3rem; font-size: 1.8rem; color: #222;}
    .wrap-header .header-menu .li_2:hover .a_2[target=_blank],
    .wrap-header .header-menu .a_2[target=_blank]{background-position: right 4rem center;}
    .wrap-header .header-menu .a_2::before,
    .wrap-header .header-menu .a_2::after{display: none;}
    .wrap-header .header-menu .a_2.plus::before{content:""; display: block; position: absolute; left: auto; right: 4rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -.7rem; background: url(../../images/common/ic-a2-more.png) no-repeat center center / cover;}
    .wrap-header .header-menu .a_2.plus.on::before{background: url(../../images/common/ic-a2-minus.png) no-repeat center center;}
    .wrap-header .header-menu .li_2:hover .a_2::before{background-color: transparent;}
    .wrap-header .header-menu .div_3{display: none;}
    .wrap-header .header-menu .div_3.on{display: block;}
    .wrap-header .header-menu .ul_3{margin-top: 0; margin: 1rem 4rem; background-color: white; padding: 1.2rem 1rem;}
    .wrap-header .header-menu .a_3::before{width: .9rem; height: .4rem; background: transparent url(../../images/common/ic-mobile-menu.png) no-repeat bottom center;}
    .wrap-header .header-menu .li_3:hover .a_3::before{background-position: top center;}
    .wrap-header .header-info .sitemap-link{display: none;}
    .wrap-header .header-info .btn-gnb-open{display: block; width: 2.8rem; height: 2.8rem; background: url(../../images/common/ic-sitemap.png) no-repeat center center / 2.8rem; text-indent: -9999rem; margin-left: 4rem;}
    .wrap-header .header-info .btn-gnb-open.on{background: url(../../images/common/btn-menu-close.png) no-repeat center center / 2.6rem;}

    header.on .wrap-header .header-info .btn-gnb-open,
    header.scroll .wrap-header .header-info .btn-gnb-open{background: url(../../images/common/ic-sitemap-on.png) no-repeat center center / 2.8rem;}
    header.on .wrap-header .header-info .btn-gnb-open.on,
    header.scroll .wrap-header .header-info .btn-gnb-open.on{background: url(../../images/common/btn-menu-close.png) no-repeat center center / 2.6rem;}

    .wrap-header .header-menu .a_1.on{background-color: #503992; color: white !important;}
    .wrap-header .header-menu .a_1.on::before{display: none !important;}

}

@media screen and (max-width: 768px) {
    .top-header{display: none;}
    .top-header .area{padding: 0 2rem; justify-content: end;}
    .top-header .top-header-link{display: none;}
    .wrap-header .area{padding: 1.521rem 2rem;}
    .wrap-header .header-logo img{width: 14.6rem;}
    .wrap-header .header-menu{width: 100%;}
    .wrap-header .header-menu > ul{position: absolute; left: 0; bottom: 3.5rem; width: 100%; padding-left: 3rem; display: block;}
    .wrap-header .header-menu > ul > li{margin-bottom: 1.4rem;}
    .wrap-header .header-menu > ul > li:last-child{margin-bottom: 0;}
    .wrap-header .header-menu > ul a{font-size: 1.4rem; color: #555555; position: relative; padding-left: 1.4rem;}
    .wrap-header .header-menu > ul a::before{content:""; display: block; position: absolute; left: 0; top: .7rem; width: .2rem; height: .2rem; border-radius: 50%; background-color: #000000;}
    .wrap-header .header-info .popup-open{margin-left: 4rem;}
    header.on .wrap-header .header-info li.mobile-info{display: block;}
    header .wrap-header .top-header-language ul{display: block;;}
}
/* [E] 헤더 */


/* [S] 서브 레이아웃 */
.wrap-sub-visual{background-repeat: no-repeat; background-size: cover; background-position: center center; height: 48rem; position: relative;}
.wrap-sub-visual.m1{background-image: url(../../images/common/bg-sub1.jpg);}
.wrap-sub-visual.m2{background-image: url(../../images/common/bg-sub2.jpg);}
.wrap-sub-visual.m3{background-image: url(../../images/common/bg-sub3.jpg);}
.wrap-sub-visual.m4{background-image: url(../../images/common/bg-sub4.jpg);}
.wrap-sub-visual.m5{background-image: url(../../images/common/bg-sub5.jpg);}
.wrap-sub-visual.m6{background-image: url(../../images/common/bg-sub6.jpg);}
.wrap-sub-visual.m7{background-image: url(../../images/common/bg-sub7.jpg);}
.wrap-sub-visual.m8{background-image: url(../../images/common/bg-sub1.jpg);}
.wrap-sub-cell{padding: 20.6rem 0 0;}
.wrap-sub-cell .slogan{text-align: center;}
.wrap-sub-cell .slogan .slogan-big{font-size: 4.2rem; font-family: pbl; color: white;}
.wrap-sub-cell .slogan p{font-size: 2.2rem; line-height: 2.8rem; color: white; font-family: pm; margin-top: 1.4rem;}

.wrap-sub-navi{position: absolute; left: 0; bottom: 0; width: 100%;}
.wrap-sub-navi .container{max-width: 150rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; border-top-left-radius: .5rem; border-top-right-radius: .5rem; background-color: rgba(255,255,255,.95); padding: 0 3rem; position: relative;}
.wrap-sub-navi .sub-navi > ul {display: flex; flex-wrap: wrap; align-items: center; font-size: 0; position: relative;}
.wrap-sub-navi .sub-navi > ul > li {position: relative;}
.wrap-sub-navi .sub-navi > ul > li.home {padding-right: 3.5rem;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button {position: relative; display: flex; align-items: center; height: 7rem; padding-left: 4rem; padding-right: 4.5rem; font-family: pm; font-size: 1.8rem; color: #000000;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button.on {color: #503992;}
.wrap-sub-navi .sub-navi > ul > li#pagetitle1 > .inner > button{padding-left: 0;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button::before {content: ''; position: absolute; right: 0; width: .4rem; height: .4rem; background: #000;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button.on::before,
.wrap-sub-navi .sub-navi > ul > li > .inner > button:hover::before{display: none;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button::after {content: ''; position: absolute; right: -1.3rem; top: 2rem; width: 3rem; height: 3rem; background: transparent url('../../images/common/ic-sub-navi-arrow2.png') no-repeat center / 1.4rem; border-radius: 100%; transform: scale(0); transition: transform .35s;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button:hover::after {transform: scale(1);}
.wrap-sub-navi .sub-navi > ul > li > .inner > button.on::after,
.wrap-sub-navi .sub-navi > ul > li > .inner > button.on:hover::after {transform: scale(1) rotate(180deg); background: transparent url('../../images/common/ic-sub-navi-arrow2-on.png') no-repeat center / 1.4rem;}
.wrap-sub-navi .sub-navi > ul > li.last > .inner > button {padding-right: 6rem; padding-left: 3rem; color: #503992;}
.wrap-sub-navi .sub-navi > ul > li.last > .inner > button::before{display: none;}
.wrap-sub-navi .sub-navi > ul > li.last > .inner > button:after {right: -.1rem; top: 2.1rem; width: 3rem; height: 3rem; background: transparent url('../../images/common/ic-sub-navi-arrow2-on.png') no-repeat center / 1.4rem; border-radius: 100%; transform: scale(1); transition: .35s;}
.wrap-sub-navi .sub-navi > ul > li.last > .inner > button.on::after {background: transparent url('../../images/common/ic-sub-navi-arrow2-on.png') no-repeat center / 1.4rem; transform: scale(1) rotate(180deg);}
.wrap-sub-navi .sub-navi .home a {position: relative; display: flex; width: 18.5rem; height: 7rem; background: url('../../images/common/ic-sub-home.png') no-repeat left center / 2.7rem; text-indent: -9999rem;}.wrap-sub-navi .sub-navi .home a::after {content: ''; position: absolute; right: 0; top: 50%; width: 12rem; height: 1px; background: #c4c4c4;}
.wrap-sub-navi .sub-navi > strong {width: 15.5rem; flex-shrink: 0; font-family: 'Mont Bold'; font-size: 1.8rem; font-style: italic; color: #005128;}
.wrap-sub-navi .sub-navi .navUl {visibility: hidden; overflow: hidden; position: absolute; top: calc(100% - 1.5rem); z-index: 50; min-width: 17.5rem; width: calc(100% - 1rem); max-height: 0; opacity: 0; left: .5rem;}
.wrap-sub-navi .sub-navi .navUl::-webkit-scrollbar {width: 1.1rem; height: 1.1rem;}
.wrap-sub-navi .sub-navi .navUl::-webkit-scrollbar-thumb {background: #c5c5c5; border: .2rem solid #fff; border-radius: 1rem;}
.wrap-sub-navi .sub-navi .navUl.on {visibility: visible; overflow: hidden; max-height: 17.5rem; padding: 1rem 0; background: #fff; border-radius: 2rem; box-shadow: 0 0 3px rgba(0,0,0,.2); opacity: 1;}
.wrap-sub-navi .sub-navi .navUl a {position: relative; display: block; padding: .7rem 2.5rem; font-family: pm; font-size: 1.5rem; color: #555555; word-break: keep-all;}
.wrap-sub-navi .sub-navi .navUl a:hover,
.wrap-sub-navi .sub-navi .navUl a._active {background: #f6f8fe; font-family: pb; color: #000000;}
.wrap-sub-navi .sub-navi .navUl a[target=_blank]::after {content: ''; position: absolute; right: 1rem; top: 1rem; display: inline-block; width: 1.6rem; height: 1.6rem; margin-left: 1rem; background: url('../../images/common/new-win.png') no-repeat center top;}
.wrap-sub-navi .sub-navi .navUl a[target=_blank]:hover::after  {background-position: center bottom;}

.wrap-sub-navi .sub-util > ul{display: flex; flex-wrap: wrap;}
.wrap-sub-navi .sub-util > ul > li > button{width: 7rem; height: 7rem; background-repeat: no-repeat; background-position: center center; text-indent: -9999rem; position: relative;}
.wrap-sub-navi .sub-util > ul > li > button::before{content:""; display: block; position: absolute; right: 0; top: 50%; margin-top: -.2rem; width: .4rem; height: .4rem; background: rgba(0,0,0,.2);}
.wrap-sub-navi .sub-util > ul > li:last-child > button::before{display: none;}
.wrap-sub-navi .sub-util > ul > li > button.sub-favo{background-image: url(../../images/common/ic-favo.png); background-size: 2.2rem;}
/* .wrap-sub-navi .sub-util > ul > li > button.sub-favo.on, */
.wrap-sub-navi .sub-util > ul > li > button.sub-favo.memory,
.wrap-sub-navi .sub-util > ul > li > button.sub-favo:hover{background-image: url(../../images/common/ic-favo-on.png);}
.wrap-sub-navi .sub-util > ul > li > button.sub-share{background-image: url(../../images/common/ic-share.png); background-size: 2rem}
/* .wrap-sub-navi .sub-util > ul > li > button.sub-share.on, */
.wrap-sub-navi .sub-util > ul > li > button.sub-share:hover{background-image: url(../../images/common/ic-share-on.png);}
.wrap-sub-navi .sub-util > ul > li > button.sub-print{background-image: url(../../images/common/ic-print.png); background-size: 2.4rem;}
/* .wrap-sub-navi .sub-util > ul > li > button.sub-print.on, */
.wrap-sub-navi .sub-util > ul > li > button.sub-print:hover{background-image: url(../../images/common/ic-print-on.png)}
.wrap-sub-navi .sub-util > ul > li .box-sub-favo{position: absolute; right: 0; width: 24rem; background-color: white; border-radius: 2rem; box-shadow: .3rem 0 .8rem rgba(0,0,0,.2);}
.wrap-sub-navi .sub-util .box-sub-favo {display: none; opacity: 0; overflow: hidden; position: absolute; right: 0; top: calc(100% - 1rem); z-index: 1; width: 25rem; max-height: 0; background: #fff; border-radius: 2rem; transition: .35s; box-shadow: 0 0 3px rgba(0,0,0,.2); z-index: 20;}
.wrap-sub-navi .sub-util .box-sub-favo.on {display: block; opacity: 1; max-height: 50rem;}
.wrap-sub-navi .sub-util .box-sub-favo > strong {display: block; font-family: pm; font-size: 1.8rem; padding: 1.6rem 2.5rem; border-bottom: 1px solid #d6d6d6; color: #000000;}
.wrap-sub-navi .sub-util .box-sub-favo ul {padding: 1.5rem 0;}
.wrap-sub-navi .sub-util .box-sub-favo ul li {display: flex;  position: relative; padding: .2rem 2.5rem; transition: all .3s;}
.wrap-sub-navi .sub-util .box-sub-favo ul li > a {display: inline-block; font-family: pr; font-size: 1.4rem; vertical-align: middle; color: #555555;}
.wrap-sub-navi .sub-util .box-sub-favo ul li strong {position: relative; display: inline-block; transition: color .3s;}
.wrap-sub-navi .sub-util .box-sub-favo ul li:hover strong {color:#503992;}
.wrap-sub-navi .sub-util .box-sub-favo ul li strong::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background: #503992; transition: all .3s;} 
.wrap-sub-navi .sub-util .box-sub-favo ul li:hover strong::after {width: 100%;}
.wrap-sub-navi .sub-util .box-sub-favo ul li a span {display: none;}
.wrap-sub-navi .sub-util .box-sub-favo .close {position: absolute; right: 1.5rem; top: 1.5rem; width: 3rem; height: 3rem; background: #f1f1f1 url('../../images/common/btn-favo-close.png') no-repeat center center / 1rem; border-radius: 100%; text-indent: -9999rem;}
.wrap-sub-navi .sub-util .box-sub-favo .close:hover {transform: rotate( 180deg ); transition: all 0.75s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .sub-util .box-sub-favo .del {display: inline-block; width: 1.7rem; height: 1.7rem; margin: .1rem 1rem 0 0; background: url('../../images/common/favo-del.png') no-repeat center center / 1rem; text-indent: -9999rem; vertical-align: middle;}
.wrap-sub-navi .sub-util .box-sub-favo .control {display: flex; overflow: hidden; font-size: 0; text-align: center;}
.wrap-sub-navi .sub-util .box-sub-favo .control::after {content: ''; display: block; clear: both;}
.wrap-sub-navi .sub-util .box-sub-favo .control button {display: inline-block; width: 50%; padding: 1.6rem 2rem; font-family: pm; font-size: 1.6rem; color: #fff;}
.wrap-sub-navi .sub-util .box-sub-favo .control button.add {background: #503992;}
.wrap-sub-navi .sub-util .box-sub-favo .control button.reset {background: #36c0c9;}
.wrap-sub-navi .sub-util .box-sub-share {display: none; opacity: 0; overflow: hidden; position: absolute; right: 0; top: calc(100% - 1rem); z-index: 20; max-height: 0; box-shadow: 0 0 3px rgba(0,0,0,.2); border-radius: 2rem; transition: .35s; background-color: white;}
.wrap-sub-navi .sub-util .box-sub-share.on {display: block; opacity: 1; max-height: 30rem;}
.wrap-sub-navi .sub-util .box-sub-share ul {display: flex; align-items: center; padding: 0 6rem 0 1.5rem;}
.wrap-sub-navi .sub-util .box-sub-share ul button,
.wrap-sub-navi .sub-util .box-sub-share ul a {position: relative; display: block; width: 4.5rem; height: 6rem; text-indent:-9999rem;}
.wrap-sub-navi .sub-util .box-sub-share .fb {background: url('../../images/common/ic-fb.png') no-repeat center center / 1.4rem;}
.wrap-sub-navi .sub-util .box-sub-share .tw {background: url('../../images/common/ic-tw.png') no-repeat center center / 2.5rem;}
.wrap-sub-navi .sub-util .box-sub-share .addr {background: url('../../images/common/ic-copy.png') no-repeat center / 2.8rem;}
.wrap-sub-navi .sub-util .box-sub-share .close {position: absolute; right: 2rem; top: 1.5rem; width: 3rem; height: 3rem; background: #f1f1f1 url('../../images/common/ic-share-close.png') no-repeat center center / 1rem; border-radius: 100%; text-indent: -9999rem;}
.wrap-sub-navi .sub-util .sub-print {background: url('../../images/common/ic-print.png') no-repeat center center;}
.wrap-sub-navi .sub-util .copy {text-align: center;}
.wrap-sub-navi .sub-util .copy button {display: inline-block; width: 3.8rem; height: 3.8rem; margin: 0 auto 0px auto;  text-indent: -9999rem;}

.wrap-sub-contents > .area{max-width: 158rem; padding: 0 4rem; margin: 0 auto; padding-top: 6.7rem;}
.wrap-sub-contents > .area .page-title{font-size: 4.8rem; color: #000000; font-family: pbl; display: inline-block; padding-right: 3.4rem; position: relative; margin-bottom: 4.6rem; word-break: break-all;}
.wrap-sub-contents > .area .page-title::after{content:""; display: block; position: absolute; right: 0; top: 0; width: 1.8rem; height: 1.8rem; background: url(../../images/common/ic-title.png) no-repeat center center / cover;}

@media screen and (max-width: 1200px) {
    .wrap-sub-visual{height: 46rem;}
    .wrap-sub-cell .slogan .slogan-big{font-size: 3.4rem;}
    .wrap-sub-cell .slogan p{font-size: 2rem; margin-top: .8rem}
    .wrap-sub-navi{width: calc(100% - 8rem); left: 4rem;}
    .wrap-sub-navi .container{padding-right: .5rem;}
    .wrap-sub-navi .sub-navi > ul > li.home{padding-right: 4rem;}
    .wrap-sub-navi .sub-navi .home a{width: 2.7rem;}
    .wrap-sub-navi .sub-navi .home a::after{display: none;}
    .wrap-sub-navi .sub-util > ul > li > button.sub-favo,
    .wrap-sub-navi .sub-util > ul > li > button.sub-print{display: none;}
    .wrap-sub-navi .sub-util > ul > li > button::before{display: none;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button{display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24.9rem;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button::before{top: 50%; transform: translateY(-50%);}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button::after{right: -.8rem}
}

@media screen and (max-width: 768px) {
    .wrap-sub-visual{height: 25.2rem;}
    .wrap-sub-cell{padding: 8.3rem 0 0 0;}
    .wrap-sub-cell .slogan .slogan-big{font-size: 3.4rem;}
    .wrap-sub-cell .slogan p{font-size: 1.4rem; line-height: 2rem;}
    .wrap-sub-navi{width: calc(100% - 4rem); left: 2rem;}
    .wrap-sub-navi .container{padding: 0 0 0 1.5rem;}
    .wrap-sub-navi .sub-navi > ul > li.home{padding-right: 1.7rem;}
    .wrap-sub-navi .sub-navi .home a{height: 5rem; width: 2.4rem; background-size: 2.4rem;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button{font-size: 1.6rem; height: 5rem; padding: 0 1.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; display: -webkit-box; -webkit-line-clamp: 1;}
    .wrap-sub-navi .sub-navi > ul > li.last > .inner > button{padding: 0 0 0 1.4rem;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button.on::before,
    .wrap-sub-navi .sub-navi > ul > li > .inner > button:hover::before {display: block}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button::after{display: none;}
    .wrap-sub-navi .sub-navi > ul > li.last > .inner > button::before{display: none;}
    .wrap-sub-navi .sub-navi > ul > li.last > .inner > button.on::before{display: none;}
    .wrap-sub-navi .sub-util > ul > li > button{width: 5rem; height: 5rem;}
    .wrap-sub-navi .sub-util > ul > li > button.sub-share{background-size: 1.8rem;}
    .wrap-sub-contents > .area{padding: 0 2rem; padding-top: 6.7rem;}
  .wrap-sub-contents > .area .page-title{font-size: 3.5rem; padding-right: 2rem;}
  .wrap-sub-contents > .area .page-title::after{width: 1rem; height: 1rem;}
}
/* [E] 서브 레이아웃 */



/* [S] 푸터 */
.wrap-footer{background-color: #2f2f2f; padding: 4rem 0 3.9rem; border-top: .1rem solid #363636;}
.sub .wrap-footer{margin-top: 10rem;}
.sub .wrap-footer.non-top{margin-top: 0;}
.footer-top{display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 188rem; padding: 0 4rem; margin: 0 auto;}
.footer-left{width: 100%;}
.footer-left .footer-logo{opacity: .4; margin-bottom: 3rem;}
.footer-left .footer-logo img{width: 14.9rem}
.footer-left .footer-info li{font-size: 1.6rem; color: #ffffff; font-family: pm; padding-left: 1rem; position: relative;; margin-bottom: .3rem}
.footer-left .footer-info li::before{content:""; display: block; position: absolute; left: 0; top: .9rem; width: .5rem; height: .5rem; background-color: white;}
.footer-left .footer-info li:last-child{margin-bottom: 0;}
.footer-left .footer-info li .empty-area{display: inline-block; width: 4.4rem;}
.footer-left .footer-sub-info{display: flex; flex-wrap: wrap; margin-top: 2.2rem;}
.footer-left .footer-sub-info dl{display: flex; flex-wrap: wrap; margin-right: 3.5rem;}
.footer-left .footer-sub-info dl:last-child{margin-right: 0;}
.footer-left .footer-sub-info dt{font-size: 1.6rem; color: #ffffff; font-family: psb;}
.footer-left .footer-sub-info dd{font-size: 1.6rem; color: #8f8f8f; font-family: pm; padding-left: 1.4rem;}
.footer-left .copyright{font-size: 1.6rem; color: #b7abda; margin-top: 1.5rem;}
.footer-right{position: relative; width: 30rem; margin-top: 6rem;}
.footer-right .family-link-btn{font-size: 1.6rem; color: #ffffff; width: 100%; border-radius: .5rem; text-align: left; padding: 1.5rem 2rem; background-color: #4e4e4e; position: relative;}
.footer-right .family-link-btn::after{content:""; display: block; position: absolute; right: 2rem; top: 50%; margin-top: -.25rem; width: .8rem; height: .5rem; background: url(../../images/common/ic-family-link.png) no-repeat center center / cover; transition: all .35s;}
.footer-right .family-link-btn.active::after{transform:rotate(180deg);}
.footer-right .footer-link-list{position: absolute; left:0; bottom: calc(100% + .1rem); width: 100%; background-color: #4e4e4e; border-radius: .5rem; z-index: 2; padding: 1.5rem 0; height: 24rem; display: none;}
.footer-right .footer-link-list.active{display: block;}
.footer-right .footer-link-list .mCSB_scrollTools .mCSB_draggerContainer .mCSB_dragger .mCSB_dragger_bar{background-color: rgba(255,255,255,.2); width: .8rem; border-radius: .4rem; right: 1.8rem;}
.footer-right .footer-link-list a{font-size: 1.6rem; color: #ffffff; display: block; padding: .6rem 2rem;}
.footer-right .footer-link-list a span{background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem; transition: background-size .5s;}
.footer-right .footer-link-list a:hover span{background-size: 100% .1rem;}
.footer-bottom{background-color: #323037; padding: 1.7rem 0;}
.footer-bottom .footer-bottom-area{max-width: 188rem; padding: 0 4rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
.footer-bottom .footer-bottom-link{display: flex; flex-wrap: wrap;}
.footer-bottom .footer-bottom-link ul{display: flex; flex-wrap: wrap; align-items: center; margin: 0 -1.6rem;}
.footer-bottom .footer-bottom-link li{margin: 0 1.6rem;}
.footer-bottom .footer-bottom-link a{font-size: 1.6rem; color: #b7abda; display: block; background-image: linear-gradient(#b7abda, #b7abda); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem; transition: background-size .5s;}
.footer-bottom .footer-bottom-link a.private{color: #ffffff; font-family: pb; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem; transition: background-size .5s;}
.footer-bottom .footer-bottom-link a:hover{background-size: 100% .1rem;}
.btn-top-page{position: fixed; right: 6rem; bottom: -10rem; z-index: 2; transition: bottom .5s;}
.btn-top-page.fix{bottom: 9rem;}
.btn-top-page button{width: 5rem; height: 5rem; position: relative; border-radius: 50%; background-color: #36c0c9; text-indent: -9999rem;}
.btn-top-page button::after{content:""; display: block; position: absolute; left: 50%; top: 50%; width: 2rem; height: 2rem; background: url(../../images/common/btn-top.png) no-repeat center center / cover; margin: -1rem 0 0 -1rem; transform: rotate(0); transition: transform .35s;}
.btn-top-page button:hover::after{transform: rotate(360deg);}

@media screen and (max-width: 1200px) {
    .sub .wrap-footer{margin-top: 6rem;}
    .sub .wrap-footer.non-top{margin-top: 0;}
    .footer-left .footer-logo{margin-bottom: 2.5rem;}
    .footer-left .footer-info li .empty-area{display: block}
    .footer-left{width: 100%;}
    .footer-left .footer-sub-info{margin-top: 1.2rem;}
    .footer-left .footer-sub-info dl{margin-top: .8rem;}
    .footer-right{margin-top: 0;}
    .footer-bottom{margin-top: 4rem; padding: 2.5rem 0;}
    .footer-bottom .footer-bottom-area{flex-direction: column-reverse;}
    .footer-bottom .footer-bottom-area .copyright{margin-top: 1rem;}
    .btn-top-page{right: 4rem;}
    .btn-top-page.fix{bottom: 5.5rem;}
}

@media screen and (max-width: 768px) {
    .footer-top,
    .footer-bottom .footer-bottom-area{padding: 0 2rem;}
    .footer-bottom{margin-top: 3rem;}
    .footer-bottom .footer-bottom-link ul{margin-top: -.7rem}
    .footer-bottom .footer-bottom-link li{margin-top: .7rem;}
    .btn-top-page{right: 2rem;}
    .btn-top-page.fix{bottom: 5rem;}
}
/* [E] 푸터 */

/* [S] 사용자 */
.user-service-list-wrap{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 100; display: table; visibility: hidden; opacity: 0; transition: all .5s;}
.user-service-list-wrap.on{visibility: visible; opacity: 1;}
.user-service-list-inner{display: table-cell; vertical-align: middle;}
.user-service-list-box{max-width: 96rem; margin: 0 auto; background-color: white; border-radius: 2rem; position: relative;}
.user-service-list-box .user-service-close{position: absolute; right: 3rem; top: -3rem; width: 6rem; height: 6rem; background-color: #000000; border-radius: 50%; z-index: 3;}
.user-service-list-box .user-service-close::after{content:""; display: block; position: absolute; left: 50%; top: 50%; margin: -.9rem 0 0 -.9rem; width: 1.8rem; height: 1.8rem; background: url(../../images/common/user-service-close.png) no-repeat center center / cover; transform: rotate(0deg); transition: all .35s;}
.user-service-list-box .user-service-close:hover::after{transform: rotate(180deg);}
.user-service-list-header{display: flex; align-items: center; padding: 0 8rem; position: relative; padding-bottom: 3.5rem; padding-top: 3.1rem; background-color: #503992; border-radius: 1.5rem 1.5rem 0 0; z-index: 2;}
.user-service-list-header h1{font-size: 5.6rem; font-family: pbl; color: white; margin-right: 3.2rem;}
.user-service-list-header span{font-size: 2.2rem; font-family: pm; color: white; display: block; position: relative; top: .5rem; opacity: .2;}
.user-service-list-content{display: flex; flex-wrap: wrap; padding: 0 8rem; position: relative; padding-bottom: 6rem; padding-top: 4rem;}
.user-service-list-content::before{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 31.4rem; height: 100%; background-color: #ecf0f2; border-bottom-left-radius: 2rem;}
.user-service-list-left{width: 25rem; position: relative; z-index: 2;}
.user-service-list-left li button{color: #000000; font-size: 2.2rem; font-family: pb; display: block; border-radius: 1rem 1rem 2rem 1rem; width: 100%; text-align: left; padding: 1.7rem 4rem;}
.user-service-list-left li.on button{color: white; background-color: #36c0c9;}
.user-service-list-left li button:hover{color: #36c0c9;}
.user-service-list-left li.on button:hover{color: white;}
.user-service-list-right{width: calc(100% - 25rem);}
.user-service-list-right-box{display: none;}
.user-service-list-right-box.on{display: block;}
.user-service-list-right ul{display: flex; flex-wrap: wrap; padding-left: 6rem; margin-top: -1rem;}
.user-service-list-right li{width: 50%; margin-top: 3rem;}
.user-service-list-right li a{display: block; font-size: 1.8rem; color: #222222; font-family: pm; padding-left: 2.7rem; background: url(../../images/common/ic-user-service-check.png) no-repeat left top .5rem;}
.user-service-list-right li a span{background-image: linear-gradient(#503992, #503992); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 .2rem; transition: background-size .5s;}
.user-service-list-right li a:hover{background-image: url(../../images/common/ic-user-service-check-on.png); color: #503992; font-family: pb;}
.user-service-list-right li a:hover span{background-size: 100% .2rem;}

@media screen and (max-width: 1200px) {
    .user-service-list-box{margin: 0 4rem;}
    .user-service-list-header{padding: 3rem 4rem;}
    .user-service-list-content{padding: 3rem 4rem;}
    .user-service-list-content::before{width: 25rem;}
}

@media screen and (max-width: 768px) {
    .user-service-list-header{flex-direction: column; align-items: start; padding: 1.5rem 3rem 2rem;}
    .user-service-list-header h1{font-size: 3rem;}
    .user-service-list-header span{font-size: 1.6rem;}
    .user-service-list-content{flex-direction: column; padding: 1rem 2rem 2rem;}
    .user-service-list-content::before{display: none;}
    .user-service-list-left{width: 100%;}
    .user-service-list-left li button{font-size: 1.6rem; padding: 1rem 2rem;}
    .user-service-list-right{width: 100%; margin-top: 1rem;}
    .user-service-list-right ul{padding-left: 0; margin-top: 0; padding-top: 1rem; border-top: .1rem solid #eaeaea;}
    .user-service-list-right li{width: 100%; margin-top: 1rem;}
    .user-service-list-right li a{font-size: 1.4rem; background-position: left top .1rem;}
}
/* [E] 사용자 */