@charset "utf-8";

body, html, input, button {font-family: sr;}

.sub footer{margin-top :70px }

.wrap_contents{min-height:400px;}
.inner{max-width:1400px; margin:0 auto;}
.wrap_sub_visual{background-color: #f7cbcb;height:200px;text-align:center;}

.sub #_contentBuilder ._objTag, 
.sub #_contentBuilder ._objHtml, 
.sub #_contentBuilder ._objImage, 
.sub #_contentBuilder ._objWidget, 
.sub #_contentBuilder ._objHeading {max-width:1480px; margin-left:auto !important; margin-right:auto !important; height: auto !important; min-height:25px !important; z-index: auto !important;}
.sub #_contentBuilder ._objHeading {width: 100% !important;}
.sub #_contentBuilder .full-width {max-width: none;}

@media screen and (max-width:1500px) {
    .sub #_contentBuilder ._objTag,
    .sub #_contentBuilder ._objHtml, 
    .sub #_contentBuilder ._objImage, 
    .sub #_contentBuilder ._objWidget, 
    .sub #_contentBuilder ._objHeading {padding:0 20px;}
}

.wrap-sub-navi .inner,
.wrap-contents .tab .inner,
.wrap-contents .sub-subject .inner {max-width: 1480px;}

@media screen and (max-width: 1700px) {
    .inner {padding: 0 30px;}
    .wrap-sub-navi .inner,
    .wrap-contents .tab .inner,
    .wrap-contents .sub-subject .inner {padding:0;}
}

@media screen and (max-width: 1500px) {
    .wrap-sub-navi .inner,
    .wrap-contents .tab .inner,
    .wrap-contents .sub-subject .inner {padding: 0 30px;}
    .head-navi .div_2 .inner{padding: 0 0;}
}

@media screen and (max-width: 1200px) {
    .inner {padding: 0 80px;}
    .wrap-top .inner{padding: 0 30px;}
    .head-navi .div_2 .inner{padding: 0 0;}
}

@media screen and (max-width: 920px) {
    .inner,
    .wrap-top .inner,
    .wrap-header .inner,
    .wrap-contents .tab .inner,
    .wrap-contents .sub-subject .inner {padding: 0 20px;}
    .wrap-sub-navi .inner {padding:0 20px;}
}
/* Header */
.wrap-header {position: fixed; left: 0; top: 0; width: 100%; z-index: 100;}

.wrap-header.scrolled,
.wrap-header.white,
.wrap-header:hover {background: rgba(255,255,255,1); transition: background .5s; box-shadow: 0 0 10px rgba(0,0,0,.3);}
.wrap-header:hover .head-navi .div_1 .a_1 {color: #000000;}
.head-logo .color ,
.wrap-header.scrolled .head-logo .color,
.wrap-header.white .head-logo .color {display: none;}
.wrap-header.scrolled .head-logo .white,
.wrap-header.white .head-logo .white{display: none;}
.wrap-header.scrolled .head-logo .color,
.wrap-header.white .head-logo .color{display: block;}
.wrap-header.scrolled .head-navi .div_1 .a_1,
.wrap-header.white .head-navi .div_1 .a_1 {color: #000000;}

.wrap-header:hover .head-logo .color{display: block;}
.wrap-header:hover .head-logo .white{display: none;}

.wrap-header.scrolled .head-util button,
.wrap-header.white .head-util button{color: #000;}
.wrap-header.scrolled .head-sitemap a,
.wrap-header.white .head-sitemap a{background:url(../../images/common/site-map-ic-on.png) no-repeat center;}
.wrap-header.scrolled .head-util .util-link ul .ico1 a,
.wrap-header.white .head-util .util-link ul .ico1 a {background:url(../../images/common/search-ic-on.png)no-repeat center /cover;}
.wrap-header.scrolled .head-util button::before,
.wrap-header.white .head-util button::before{background: url(../../images/common/util-arrow-on.png) no-repeat center / cover;}
.wrap-header .head-inner {display: flex; justify-content: space-between; align-items: center; max-width: 1820px; height: 120px; transition: height .35s; margin: auto; } /* overflow: hidden; */

.head-navi {flex: 1;}

/* div_1 */
.head-navi .div_1 .ul_1{text-align: center;}
.head-navi .div_1 .li_1 {display:inline-block;}
.head-navi .div_1 .li_1:last-child {display: none;}
.head-navi .div_1 .a_1{display: flex; align-items: center; height: 120px; padding: 0 45px; font-family: sr; font-size: 20px; color: #fff; transition: all .3s;}

/* div_2 */
.head-navi .div_2 {position: absolute; top:100%; left:50%; width:100%; max-height:900px; min-height:230px; background:#fff; text-align: left; transform: translate(-50%,0); z-index: 110; opacity:0; visibility: hidden;} 
.head-navi .div_2::before{content: ''; width: 574px; height: 242px; position: absolute; right: -5%; top: -26%; background: url(../../images/common/11.png) no-repeat right / cover; opacity: 0.1;}
.head-navi .div_2.on {opacity:1; visibility: visible; transition: opacity .5s, visibility .5s;}
.head-navi .div_2 .inner {max-width:1720px; width:100%; margin:0 auto ; display: flex; justify-content: space-between; align-items: flex-start;}
.head-navi .div_2 .title {width:400px; text-align:left; padding-top: 65px;}
.head-navi .div_2 .title strong {position: relative; font-size: 36px; font-family: sb; color:#fff;}
.head-navi .div_2 .title p {position: relative; font-size: 15px; font-family: sr; color:#fff; display: block; margin-top: 8px;}
.head-navi .div_2 .navi-bg {display: block; width:500px; height:100%; position: absolute; left:50%; top:0; margin-left:-960px; }
.head-navi .div_2 .navi-bg::before {content:'';  background: url('../../images/common/navi-bg.jpg') no-repeat left center / cover;position: absolute; top:0; left:0; width:100%; height:100%;}

.head-navi .ul_2 { position: relative; flex-grow: 1; display: flex; flex-wrap:wrap;padding:45px 50px 25px 50px; margin: 0 -12px; overflow:hidden;} 
.head-navi .li_2 {width:25%;  text-align: center; padding: 0 12px; margin-bottom: 20px;}

.head-navi .a_2 {color:#fff; background:#fff;height:60px; display: flex; align-items: center; justify-content: center; overflow:hidden; position: relative; border: 1px solid #898B8C; font-size: 18px; font-family: sr; color: #515151; transition: all 0.3s; }
.head-navi .a_2:hover{background: #00AAB5; border: 1px solid #00AAB5; color: #fff;}
.head-navi .a_2 span {display: inline-block; position: relative; line-height: 1.2;}
.head-navi .a_2 span::after {content:''; width:0%; height:1px; background:#fff; position: absolute; left:0; bottom:0; transition: width .5s;}
.head-navi .a_2:hover span::after {width:100%;}

/* util */
.head-util{display: flex;}
.head-util .util-box{display: flex;}
.head-util button{font-size: 14px; font-family: sb; color: #fff; margin: 0 12px; padding-right: 18px; position: relative;}
.head-util button::before{content: ''; position: absolute; top: 7px; right: 0; background: url(../../images/common/util-arrow.png) no-repeat center / cover; width: 7px; height: 4px;}
.head-util button .num {display: none;}
.head-util .util-lang{position: relative;}
.head-util .util-lang .list {overflow: hidden; position: absolute; left: 0; top: 130%; width: 100%; max-height: 0; padding: 5px 10px; background: rgba(0,0,0,.8); border-radius: 5px; opacity: 0; transition: max-height .35s; z-index: 999;} 
.head-util .util-lang .list > a {color: #fff;}
.head-util .util-lang .list.on {max-height: 100px; opacity: 1; }
.head-util .util-link ul .ico1 a {background:url(../../images/common/search-ic.png)no-repeat center /cover; width: 27px; height: 27px; display: block; margin-left: 45px;}
.head-sitemap {flex-shrink: 0;width: 55px;text-align: right;font-size: 0; width: 80px;}
.head-sitemap a {display: inline-block; width: 46px; height: 13px; background:url('../../images/common/site-map-ic.png') no-repeat center;text-align: right; }
.wrap-header:hover .head-util button{color: #000;}

.wrap-header:hover .head-sitemap a{background:url(../../images/common/site-map-ic-on.png) no-repeat center;}
.wrap-header:hover .head-util .util-link ul .ico1 a {background:url(../../images/common/search-ic-on.png)no-repeat center /cover;}
.wrap-header:hover .head-util button::before{background: url(../../images/common/util-arrow-on.png) no-repeat center / cover;}

/*모바일 gnb*/
.head-navi  .head-util {display: none;}
.mobile-lang {display: none;}
.btn-gnb-close {display: none;}
.mobile-logo {display: none;}
.btn-gnb-open {flex-shrink: 0;width: 55px;text-align: right;font-size: 0; width: 80px; display: none;}
.btn-gnb-open button {width: 46px; height: 13px; background:url('../../images/common/site-map-ic.png') no-repeat center; text-indent: -9999px !important; display: inline-block;}
.wrap-header.scrolled .btn-gnb-open button,
.wrap-header.white .btn-gnb-open button,
.wrap-header:hover .btn-gnb-open button{background:url(../../images/common/site-map-ic-on.png) no-repeat center;}

@media screen and (max-width: 1880px) {
    .wrap-header .head-inner {padding: 0 30px;}
    .head-navi .div_2 .navi-bg{display: none;}
    .head-navi .div_2 .inner{display: block;}
    .head-navi .div_2 .title{display: none;}
    .head-navi .ul_2{width: 100%;}
}

@media screen and (max-width:1500px){
    .head-navi .div_1 .ul_1{text-align: right;}
    .head-navi .div_1 .a_1{font-size: 17px; padding: 0 30px;}
}

@media screen and (max-width:1300px){
    .head-logo{width: 260px;}
}

@media screen and (max-width:1200px){
    /* .head-navi .div_1 .ul_1{display: none;} */
    .head-sitemap{display: none;}
    .btn-gnb-open{display: block; width: 70px;}
    .head-navi  .head-util {display: block; margin-bottom: 10px;}
    .head-sitemap{display: none;}
    .head-util{flex: 1; justify-content: flex-end;}
    .wrap-header .head-inner{height: 100px;padding: 0 20px;}

    .mobile-util, .mobile-lang , .btn-gnb-close, .mobile-logo {display: block;}
    .wrap-header.scrolled .head-util button,
    .wrap-header.white .head-util button{color: #fff;}
    .wrap-header:hover .head-util button {color: #fff;}
    .wrap-header.scrolled .head-util button::before,
    .wrap-header.white .head-util button::before,
    .wrap-header:hover .head-util button::before{background: url(../../images/common/util-arrow.png) no-repeat center / cover;}
    .head-util .util-box{display: none;}
    .menu-top .head-util .util-box{display: flex; justify-content: flex-end; padding-right: 11px;}

    /* gnb */
    .head-navi{position: fixed; top:0px; right:-100%; z-index: 10000; width:100%; max-width:460px; height:100%; padding:0; background:#00AAB5;transition:right .3s;}
    .head-navi.on {right:0;}
    .mobile-logo{padding: 15px 20px 25px 20px;}

    /*ul_1*/
    .wrap-header.scrolled .head-navi .div_1 .a_1 ,
    .wrap-header.white .head-navi .div_1 .a_1 ,
    .wrap-header:hover .head-navi .div_1 .a_1 {color: #fff;}
    .head-navi .div_1{position: relative;}
    .head-navi .div_1 .li_1{display: block; width: 180px; margin: 10px 0;text-align: left;}
    .head-navi .div_1 .a_1{display: block; height: auto; padding: 0 0 0 30px; text-align: left; font-size: 20px; font-family: sb; line-height: 50px; }
    .head-navi .div_1 .a_1.on{background: #007077;}
    .head-navi .div_2 {position: absolute;z-index: 1; min-height:285px;width:60.8% !important;right:0;left:auto;top:0; max-height:none; height:100%;padding:0;background: #fff;border:0;transform:none; overflow: hidden;}
    .head-navi .div_2::before{content: ''; width: 267px; height: 158px; position: absolute; right: 0; bottom: 0; top: unset; background: url(../../images/main/mo-shape.png) no-repeat right / cover; opacity: unset;}
    .head-navi .ul_2{display: block; padding: 8px 0 0 30px; margin: 0;}
    .head-navi .li_2{width: 100%; padding: 0; text-align: left;margin-bottom: 0;}
    .head-navi .a_2{font-size: 17px; color: #333333; justify-content: unset; border: none; transition: none; background: none; height: 50px; position: relative; padding-left: 10px;}
    .head-navi .a_2::before{content: ''; width: 3px; height: 3px; border-radius: 50px; position: absolute; top: 22px; left: 0; background: #333333;}
    .head-navi .a_2:hover{background: none; border: none; color: #00AAB5;}
    .head-navi .a_2:hover::before{background: #00AAB5;}
    .head-navi .a_2 span::after {content:''; background:#00AAB5;}
    .btn-gnb-close {display: block;}
    .btn-gnb-close button {display: block; background:url('../../images/main/menu-close.png') no-repeat center; widtH:60px; height:55px; position: absolute; right:0; top:0; text-indent: -9999px;}
}

@media screen and (max-width:768px){
    .wrap-header .head-inner{ height: 55px;}
    .head-logo{width: 195px;}
    /* .head-navi{height: 47.5%;} */
}

/* Sub Visual */
.wrap-sub-visual {width: 100%; background-attachment: fixed; background-size: cover auto;}
.wrap-sub-visual.m1 {background: url('../../images/common/bg-sub-visual1-small.jpg') no-repeat center top;}
.wrap-sub-visual.m2 {background: url('../../images/common/bg-sub-visual2-small.jpg') no-repeat center top;}
.wrap-sub-visual.m3 {background: url('../../images/common/bg-sub-visual3-small.jpg') no-repeat center top;}
.wrap-sub-visual.m4 {background: url('../../images/common/bg-sub-visual4-small.jpg') no-repeat center top;}
.wrap-sub-visual.m5 {background: url('../../images/common/bg-sub-visual1-small.jpg') no-repeat center top;}
.wrap-sub-visual.m6 {background: url('../../images/common/bg-sub-visual2-small.jpg') no-repeat center top;}
.wrap-sub-visual.m7 {background: url('../../images/common/bg-sub-visual3-small.jpg') no-repeat center top;}
.wrap-sub-visual.m8 {background: url('../../images/common/bg-sub-visual4-small.jpg') no-repeat center top;}
.wrap-sub-visual .wrap-sub-cell {position: relative; display: flex; align-items: center; height: 430px; text-align: center; color: #fff;}
.wrap-sub-visual .inner {position: relative; z-index: 1;}
.wrap-sub-visual .slogan {margin-top: 20px;}
.wrap-sub-visual .slogan-small {display: block; font-family: sr; font-size: 15px; color: #fff;}
.wrap-sub-visual .slogan-big {position: relative; display: block; font-family: sb; font-size: 50px; line-height: 1.5;}
.wrap-sub-visual .page-move {display: none; position: absolute; left: 0px; top: -5px; width: 100%; height: 0px;}
.wrap-sub-visual .page-move a {position: relative; display: block; width: 50px; height: 50px; border: 2px solid rgba(255,255,255,1); border-radius: 100%;}
.wrap-sub-visual .page-move a.prev {float: left; transition: background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a.prev:after {content: ''; position: absolute; left: 18px; top: 20px; width: 12px; height: 9px; background:url('../../images/common/page_move_prev.png') no-repeat center center;}
.wrap-sub-visual .page-move a.next {float: right; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a.next:after {content: ''; position: absolute; right: 18px; top:20px; width: 12px; height: 9px; background:url('../../images/common/page_move_next.png') no-repeat center center;}
.wrap-sub-visual .page-move a span {display: none;}

@media screen and (min-width: 2000px) {
    .wrap-sub-visual {background-size: 100% auto;}
    .wrap-sub-visual.m1 {background: url('../../images/common/bg-sub-visual1.jpg') no-repeat center / center;}
    .wrap-sub-visual.m2 {background: url('../../images/common/bg-sub-visual2.jpg') no-repeat center / center;}
    .wrap-sub-visual.m3 {background: url('../../images/common/bg-sub-visual3.jpg') no-repeat center / center;}
    .wrap-sub-visual.m4 {background: url('../../images/common/bg-sub-visual4.jpg') no-repeat center / center;}
    .wrap-sub-visual.m5 {background: url('../../images/common/bg-sub-visual1.jpg') no-repeat center / center;}
    .wrap-sub-visual.m6 {background: url('../../images/common/bg-sub-visual2.jpg') no-repeat center / center;}
    .wrap-sub-visual.m7 {background: url('../../images/common/bg-sub-visual3.jpg') no-repeat center / center;}
    .wrap-sub-visual.m8 {background: url('../../images/common/bg-sub-visual4.jpg') no-repeat center / center;}
}

@media screen and (max-width: 1200px) {
    .wrap-sub-visual {background-attachment: scroll; background-size: cover;}
    .wrap-sub-visual .wrap-sub-cell {height: 400px;}
    .wrap-sub-visual .slogan {margin-top: 17px;}
    .wrap-sub-visual .slogan-big {font-size: 35px;}
}

@media screen and (max-width: 700px) {
    .wrap-sub-visual .wrap-sub-cell {height: 320px;}
    .wrap-sub-visual .slogan {margin-top: -2px;}
    .wrap-sub-visual .slogan-big {font-size: 30px;}
}

/* Sub Navi */
.wrap-sub-navi {position: relative; z-index: 20; margin-top: -75px; background: rgba(0,0,0,0.5)}
.wrap-sub-navi .inner {position: relative; max-width: 1540px; margin: auto; width: 100%;}
.wrap-sub-navi .subject {position: relative; padding: 55px 0 40px 0;}
.wrap-sub-navi .subject h2 {font-family: 'Noto Bold'; font-size: 60px; line-height: 1; color: #000;}
.wrap-sub-navi .sub-navi { font-size: 0;}
.wrap-sub-navi .sub-navi > ul {display: flex; align-items: center; height: 75px;}
.wrap-sub-navi .sub-navi > ul > li {display: none; position: relative; height: 100%; padding-right: 25px;}
.wrap-sub-navi .sub-navi > ul > li.on {display:flex; align-items: center; position: relative;}
.wrap-sub-navi .sub-navi > ul > li.on::before{content: ''; width: 1px; height: 10px; background: #fff; opacity: 0.3; position: absolute; top: 50%; margin-top: -5px; right: 0;}
.wrap-sub-navi .sub-navi > ul > li.last::before{background: none;}
.wrap-sub-navi .sub-navi > ul > li > .inner {display: flex; height: 100%;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button {position: relative; display: block; width: 100%; padding-right: 115px; padding-left: 30px; background: url('../../images/common/navi-arrow.png') no-repeat right center; font-family:dm; font-size: 17px; text-align: left; color: #fff; transition: all 0.3s;}

.wrap-sub-navi .sub-navi > ul > li:hover button{color: #0098B3; background: url('../../images/common/navi-arrow-on.png') no-repeat right center;}

.wrap-sub-navi .sub-navi > ul > li > .inner > button span {position: relative; top: 1px;}
.wrap-sub-navi .sub-navi > ul > li.last > .inner > button::after {display: none;}

.wrap-sub-navi .sub-navi .home {display: block; width: 95px; min-width: auto; height: 100%; padding: 0px; background-image: none;}
.wrap-sub-navi .sub-navi .home a {display: block; width: 100%; height: 100%; background: url('../../images/common/ic_home.png') no-repeat center center; text-indent: -9999px;}
.sub-info .sub-navi .navUl {visibility: hidden; overflow: hidden; position: absolute; left: -20px; top: calc(100% + 10px); z-index: 5; width: 210px; max-height: 0; opacity: 0;}
.wrap-sub-navi .sub-navi .navUl {visibility: hidden; overflow: hidden; position: absolute; left: 0; top: calc(100%); z-index: 5; width: 210px; max-height: 0; opacity: 0;}
.wrap-sub-navi .sub-navi .navUl::-webkit-scrollbar {width: 8px;}
.wrap-sub-navi .sub-navi .navUl::-webkit-scrollbar-thumb {background: #0098b3; border: 1px solid #007c92;}
.wrap-sub-navi .sub-navi .navUl.on {visibility: visible; overflow: hidden; overflow-y: auto; max-height: 250px; background: #fff; box-shadow: 0 5px 10px rgba(0,0,0,.1) ; opacity: 1; width: 250px;}
.wrap-sub-navi .sub-navi .navUl a {position: relative; display: flex; align-items: center; height: 50px; padding: 0 25px; background:#fff url('../../images/common/arr-sub-navi.png') no-repeat right center; font-family: dl; font-size: 15px; color: #333333; word-break: keep-all; border-bottom: 1px solid #DDDDDD;}
.wrap-sub-navi .sub-navi .navUl a:last-child{border-bottom: 0;}
.wrap-sub-navi .sub-navi .navUl a._active,
.wrap-sub-navi .sub-navi .navUl a:hover {background:#00AAB5 url('../../images/common/arr-sub-navi.png') no-repeat right 20px center;color: #fff; border-bottom: 1px solid #00AAB5;}
.wrap-sub-navi .sub-navi .navUl a[target=_blank]::after {content: ''; position: relative; top: 0px; display: inline-block; width: 14px; height: 14px; margin: 0 0 0 5px; background: url('../../images/common/new_win_gray.png') no-repeat 93% center;}

.wrap-sub-navi .sub-util {display: flex; align-items: center;  position: absolute; right: 0; top: 0; height: 75px;}
.wrap-sub-navi .sub-util > ul {position: relative; display: inline-block; height: 100%; vertical-align: middle; font-size: 0;}
.wrap-sub-navi .sub-util > ul > li {position: relative; display: flex; align-items: center; float: left; height: 100%;}
.wrap-sub-navi .sub-util > ul > li > button {width: 75px; height: 100%; text-indent: -9999px;}

.wrap-sub-navi .sub-util .sub-favo {background:url('../../images/common/ic-favorite.png') no-repeat center center;}
.wrap-sub-navi .sub-util .sub-share {background:url('../../images/common/ic-share.png') no-repeat center center;}
.wrap-sub-navi .sub-util .sub-print {background: url('../../images/common/ic-print.png') no-repeat center center;}

.wrap-sub-navi .sub-util .box-sub-favo {opacity: 0; overflow: hidden; position: absolute; right: 0; top: calc(100% + 10px); z-index: 1; width: 250px; max-height: 0px; background: #fff; border-radius: 10px; transition: .35s}
.wrap-sub-navi .sub-util .box-sub-favo.on {opacity: 1; max-height: 500px;}
.wrap-sub-navi .sub-util .box-sub-favo > strong {display: block; padding: 16px 25px; border: 1px solid #d2d2d2; border-bottom: 1px solid #d6d6d6; border-radius: 10px 10px 0 0; font-family: sr; font-size: 15px; color: #000000;}
.wrap-sub-navi .sub-util .box-sub-favo ul {padding: 15px 0; border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2;}
.wrap-sub-navi .sub-util .box-sub-favo ul li {position: relative; padding: 2px 25px; transition: all .3s;}
.wrap-sub-navi .sub-util .box-sub-favo ul li > a {display: inline-block; font-family: sr; font-size: 15px; vertical-align: middle; color: #666;}
.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:#0e3999;}
.wrap-sub-navi .sub-util .box-sub-favo ul li strong::after {content: ''; position:absolute; left:0; bottom:0; width: 0%; height: 1px; background: #0e3999; 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: 0px; top: 0px; width: 56px; height: 56px; background: url('../../images/common/btn_favo_close.png') no-repeat center center; text-indent: -9999px;}
.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: 17px; height: 17px; margin: 0 10px 0 0; background: url('../../images/common/favo-del.png') no-repeat center center; text-indent: -9999px; vertical-align: middle;}
.wrap-sub-navi .sub-util .box-sub-favo .control {overflow: hidden; border-radius: 0 0 10px 10px; 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: 16px 20px; font-family: sr; font-size: 14px; color: #fff;}
.wrap-sub-navi .sub-util .box-sub-favo .control button.add {background: #1f303e;}
.wrap-sub-navi .sub-util .box-sub-favo .control button.reset {background: #4f5f6c;}
.wrap-sub-navi .sub-util .box-sub-share {opacity: 0; overflow: hidden; position: absolute; left: 0; top: calc(100%); width: 100%; max-height: 0px; background: #fff; box-shadow: 0 5px 10px rgba(0,0,0,.1); transition: .35s;}
.wrap-sub-navi .sub-util .box-sub-share.on {opacity: 1; max-height: 1000px; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: .35s;}
.wrap-sub-navi .sub-util .box-sub-share ul {padding: 10px 0;}
.wrap-sub-navi .sub-util .box-sub-share ul button {position: relative; display: inline-block; width: 45px; height: 45px; border-radius: 10px; text-indent:-9999px;}
.wrap-sub-navi .sub-util .box-sub-share ul li {padding: 5px; text-align: center;}
.wrap-sub-navi .sub-util .box-sub-share ul li:last-child button:after {display: none;}
.wrap-sub-navi .sub-util .box-sub-share .fb {background: url('../../images/common/ic-fb.png') no-repeat center center;}
.wrap-sub-navi .sub-util .box-sub-share .tw {background: url('../../images/common/ic-tw.png') no-repeat center center;}
.wrap-sub-navi .sub-util .box-sub-share .pin {background: url('../../images/common/ico_sns_pin.png') no-repeat center center;}
.wrap-sub-navi .sub-util .box-sub-share .insta {background: url('../../images/common/ic-insta.png') no-repeat center center;}
.wrap-sub-navi .sub-util .box-sub-share .kakao {background: #fdd101 url('../../images/common/ic-kakao.png') no-repeat center center;}
.wrap-sub-navi .sub-util .box-sub-share .naver {background: url('../../images/common/ic-blog.png') no-repeat center center;}
.wrap-sub-navi .sub-util .box-sub-share .addr {background: #717881 url('../../images/common/ic-copy.png') no-repeat center;}
.wrap-sub-navi .sub-util .box-sub-share .whatsapp {background:#30B545 url('../../images/common/ic-noti-app.png') no-repeat center;}
.wrap-sub-navi .sub-util .box-sub-share .mail {background:#00ABB3 url('../../images/common/ic-mail.png') no-repeat center;}
.wrap-sub-navi .sub-util .box-sub-share .close {width: 45px; height: 30px; background: #F99D1B url('../../images/common/btn_share_close.png') no-repeat center center; text-indent: -9999px;}
.wrap-sub-navi .sub-util .copy {text-align: center;}
.wrap-sub-navi .sub-util .copy button {display: inline-block; width: 38px; height: 38px; margin: 0 auto 0px auto; text-indent: -9999px;}


@media screen and (max-width: 1700px) {
    .wrap-sub-navi .sub-navi > ul > li > .inner {padding: 0;}
}

@media screen and (max-width: 1500px) {
    .wrap-sub-navi .sub-util {right: 30px;}
}

@media screen and (max-width: 1200px) {
    .wrap-sub-navi{margin-top: -60px;}
    .wrap-sub-navi .sub-navi .home {width: 90px;}
    .wrap-sub-navi .sub-navi .home a {background-size: 70px auto;}
    .wrap-sub-navi .sub-navi > ul {height: 60px;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button {padding-right: 50px; padding-left: 30px; background-size: 14px auto; font-size: 15px;}
    .wrap-sub-navi .sub-util {height: 60px;}
    .wrap-sub-navi .sub-util > ul > li > button {width: 60px;}
    .wrap-sub-navi .sub-navi .navUl.on{width: 210px;}
    .wrap-sub-navi .sub-navi .navUl a{height: 40px;}
}

@media screen and (max-width: 750px) {
    .wrap-sub-navi{margin-top: -50px;}
    .wrap-sub-navi .sub-navi .home {width: 33px;}
    .wrap-sub-navi .sub-navi .home a {background-position: 0px center; background-size: 57px auto;}
    .wrap-sub-navi .sub-navi > ul {height: 50px;}
    .wrap-sub-navi .sub-navi > ul > li{padding-right: 15px;}
    .wrap-sub-navi .sub-navi > ul > li.on::before{background: none;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button {padding: 0 20px 0 0 ; background: url(../../images/common/mo-navi-arrow.png) no-repeat right center;font-size: 15px; color: #D0D0D0;}
    .wrap-sub-navi .sub-navi > ul > li:hover button{color: #0098B3;}
    .wrap-sub-navi .sub-navi > ul > li:last-child > .inner > button {background: none;}
    .wrap-sub-navi .sub-util {right: 15px; height:50px;}
    .wrap-sub-navi .sub-util .sub-print, .wrap-sub-navi .sub-util .sub-favo{background: none;}
    .wrap-sub-navi .sub-util .sub-share{background-size: 22px;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button::after {top: 14px;}
}

/* Suject */
.sub-subject strong {display: block; margin: 100px 0 80px 0; font-family: dm; font-size: 42px; line-height: 1; color: #111; text-align: center; font-weight:600;}

@media screen and (max-width: 1200px) {
    .sub-subject strong {margin: 40px 0 30px 0; font-size: 30px;}
}

/*  top-button */

.top-button{display: none;}

@media screen and (max-width:850px){
    .top-button {display:block; position: fixed; right: 0px; bottom: -120px; z-index: 1; width: 64px;height: 64px; text-indent: -9999px; ; background: url('../../images/main/ic-goto-top.png') no-repeat center; font-family: 'Dream Medium'; font-size: 14px; line-height: 95px; color: #fff;transition: 1s;}
    .top-button:hover { animation-duration: 1s; animation-name: bounceAni;animation-iteration-count: infinite;}
    .top-button.fix { bottom: 0px;}

    @keyframes bounceAni {
        0% {
            bottom: 0px;
        }

        50% {
            bottom: 5px;
        }

        100% {
            bottom: 0px;
        }
    }
}

.black-bg {position: fixed; left: -99999px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 90; opacity: 0; transition: opacity .3s;}
.black-bg.on {left: 0; opacity: 1;}


/* footer */
footer {position: relative; background: #050712; color:#fff; padding: 32px 0 40px 0; } /*overflow: hidden;*/
footer .footer-inner {max-width:1820px; width:100%; margin:0 auto;}
footer .top {display: flex; justify-content: space-between; padding:0 0 22px 0; border-bottom:1px solid rgba(255,255,255,0.2); order: 2;}
footer .etc {display: flex; margin:0 -15px; align-items: center; order: 1;}
footer .etc li {font-size: 16px; font-family: sr; padding:0 15px; position: relative;}
footer .etc li:last-child::after {display: none;}
footer .etc li a {color:#fff; position: relative; display: inline-block;}
footer .etc li a::after {content:''; width:0%; height:1px; background:#fff; position: absolute; bottom:0; left:0; transition:width .3s;}
footer .etc li a:hover::after {width:100%;}
footer .etc li.pri a {color: #ffee00;}
footer .etc li.pri a::after {background: #ffee00;}

footer .bottom{padding-top: 35px; display: flex; justify-content: space-between;}
footer .address > span{font-size: 16px; font-family: sr; color: #CACACA;}
footer .address .co1{color: #149C95;}
footer .address .co2{color: #796BCF; margin-left: 20px; display: inline-block;}
footer .address .copy{font-size: 14px; line-height: 30px; font-family: ml; color: #fff; text-transform: uppercase; opacity: 0.4; line-height: 1.5; margin-top: 5px;}

/* family */
footer .family {position: relative; margin-left: 20px;}
footer .family button {display: flex; align-items: center; justify-content: space-between; font-family: sr; font-size: 18px; line-height: 30px; color:#fff; width:230px; position: relative;  padding-bottom: 15px; border-bottom:1px solid #fff;}
footer .family button.on::after {transform:rotate(180deg);}
footer .family button::after {content:''; display: block; width:13px; height:8px; background:url('../../images/common/select-arrow.png') no-repeat center; transition:transform .3s;}
footer .family .list {overflow:auto; position: absolute; left:0; bottom:calc(100% + 25px); width:100%; max-height:0px; background:#111; border-radius:10px; transition:.35s; z-index: 5;}
footer .family .list::-webkit-scrollbar {width:15px;}
footer .family .list::-webkit-scrollbar-thumb {background-color: #EC5A4B; border-radius: 10px; border: 3px solid #111;}
footer .family .list::-webkit-scrollbar-track {background:#111;  border-radius:10px;}
footer .family .list.on {max-height:245px;}
footer .family .list a {color:#fff; padding: 5px 10px; font-size: 15px; font-family: sr; display: block;}

@media screen and (max-width:1880px){
    footer{padding: 32px 30px 40px 30px;}
}

@media screen and (max-width:1300px){
    footer{padding: 32px 20px 40px 20px;}
    footer .address > span{display: block;}
    footer .address .co2{margin-left: 0;}
}

@media screen and (max-width:1200px){
    footer{position: relative;}
    footer .etc{margin: 0 -10px;}
    footer .etc li{font-size: 13px; padding: 0 10px;}
}

@media screen and (max-width:850px){
    footer{padding: 0 20px 65px 20px}
    footer .etc{padding: 27px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
    footer .top{display: block; border: 0; padding-top: 12px;}
    .footer-logo{text-align: center; padding-top: 105px;}
    footer .bottom{display: block; position: relative; padding-top: 12px;}
    footer .address{text-align: center;}
    footer .address .co1{display: block;}
    footer .none-em{display: none;}
    footer .address > span{line-height: 30px;}
    footer .family{position: absolute; top: -146px; width: 100%; margin-left: 0;}
    footer .family button{width: 100%;}
    footer .address .copy{font-size: 12px; margin-top: 20px;}
}

@media screen and (max-width:768px){
    footer .etc{ justify-content: space-between;}
}

/* Search */
.wrap-search {overflow: hidden; position: absolute; left: 0; top: 100%; z-index: 5; width: 100%; max-height: 0; background: #fff; opacity: 0; transition: opacity 0s, visibility 0s;}
.wrap-search.on {opacity: 1; max-height: 200px; transition: opacity 0.5s, visibility 0.5s;}
.wrap-search .box {display: flex; justify-content: center; align-items: center; padding: 5px 0 0 0;}
.wrap-header.scrolled .wrap-search .box {padding: 10px 0 0 0;}
.wrap-search .title {font-family: sb; font-size: 25px; color: #000000;}
.wrap-search .title strong {color: #1473e6;}
.wrap-search .form {flex-shrink: 0; position: relative; margin: 0 40px; width: 490px;}
.wrap-search .form .input input {width: 100%; height: 66px; padding: 0 30px; background: #e8edf1; border-radius: 100px; font-family: sr; font-size: 18px; color: #000;}
.wrap-search .form .input input::placeholder {font-family: sr; font-size: 18px; color: #666;}
.wrap-search .form .submit {position: absolute; right: 7px; top: 7px;}
.wrap-search .form .submit .btn-submit {width: 50px; height: 50px; background: #1473e6 url('../../images/common/ic-search-btn.png') no-repeat center; border-radius: 100%; text-indent: -999999px;}
.wrap-search .close button {width: 50px; height: 50px; background: url('../../images/common/ic-search-close.png') no-repeat center; text-indent: -999999px;}
.wrap-search .favo {display: flex; justify-content: center; align-items: center; padding: 20px 0 50px 0;}
.wrap-header.scrolled .favo {padding: 20px 0 30px 0;}
.wrap-search .favo strong {margin-right: 20px; padding: 3px 7px; background: #1473e6; border-radius: 5px; font-size: 15px; color: #fff;}
.wrap-search .favo ul {display: flex; align-items: center;}
.wrap-search .favo li {position: relative; margin-right: 10px; padding-right: 10px;}
.wrap-search .favo li::after {content: ''; position: absolute; right: 0; top: 6px; width: 1px; height: 10px; background: #d1d1d1;}
.wrap-search .favo li:last-child::after {display: none;}
.wrap-search .favo li a {color: #666;}
.wrap-search .favo li a:hover {color: #1473e6;}

@media screen and (max-width: 1024px) {
    .wrap-search .title {font-size: 20px;}
    .wrap-search .form {width: 350px; margin: 0 20px;}
    .wrap-search .form .input input {height: 50px;}
    .wrap-search .form .submit {right: 5px; top: 5px;}
    .wrap-search .form .submit .btn-submit {width: 40px; height: 40px; background-size: 50%;}
    .wrap-search .close button {width: 40px; height: 40px; background-size: 100%;}
}

@media screen and (max-width: 700px) {
    .wrap-search .box {flex-wrap: wrap; padding: 5px 0 0 0;}
    .wrap-search .favo {padding: 20px 0 30px 0;}
    .wrap-search .title {width: 100%; margin-bottom: 20px; text-align: center;}
    .wrap-search .form {flex-grow: 1; width: auto; margin: 0; margin-right: 15px;}
    .wrap-search .form .input input {font-size: 16px;}
    .wrap-search .form .input input::placeholder {font-size: 16px;}
    .wrap-search .close {flex-shrink: 0; width: 40px;}
}