@charset "utf-8";

/* 4K 대응 */
@media screen and (min-width: 2000px) {
  html, body {font-size: .5vw !important;}
}
.wrap_contents {overflow: hidden;}

:root {
  --headerTopHeight: 0;
}

.container {max-width:160rem; width:100%; margin:0 auto;}
@media screen and (max-width:1680px) {
  .container {padding:0 4rem;}
}
@media screen and (max-width:768px) {
  .container {padding:0 2rem;}
}


/* [S] 헤더 */
header {position: fixed; left:0; top:0; width:100%; z-index: 1000; transition:background .35s;}
.sub header {top:0 !important}
/* header-top */
.header-top {background:#2C2929; padding:0.75rem 0;}
.header-top .container {display: flex; align-items: center; justify-content: space-between; max-width:160rem; width:100%; margin:0 auto;}
.header-top ul {display: flex;}
.header-top ul li {position: relative; margin-right: 1.3rem; padding-right: 1.4rem;}
.header-top ul li::after {content:''; position: absolute; right:0; top:50%; width: 0.2rem; height:0.2rem; margin-top:-.01rem; background:#fff;}
.header-top ul li:last-child::after {display: none;}
.header-top ul a {font-family: pr; font-size: 1.4rem; line-height: 2.5rem; color:#fff;}
.header-top ul a:hover {font-family: pm; color:#FF94A3;}
.header-top .top-text {font-family: pl; font-size: 1.5rem; color:#9E9E9E;}

/* header */
header .gnbBg {overflow:hidden; visibility: hidden; position: absolute; top:100%; left:0; width:100%; background:#fff; opacity:0;}
header .gnbBg::before {content:''; position: absolute; bottom: -4.2rem; left: -7.8rem; width:48rem; height:38rem; background:url('../../images/common/bg-gnb.png') no-repeat center / cover;}
header .gnbBg.on {visibility: visible; opacity:1; transition:opacity .3s;}
header .gnbBg::after {content:''; position: absolute; top:0; left:0; width:100%; height:0.1rem; background:#E9E9E9;}
header .this-text {position: absolute; width:100%; display: none;}
header .this-text span{position: relative; display: block; max-width:160rem; width:100%; margin:0 auto; padding: 2.6rem 0 1.5rem 0; font-family: pb; font-size: 3.8rem; color:#222;}
header .this-text span::after {content:''; position: absolute; bottom:0; left:0; width:3.1rem; height:0.5rem; background:#594246;}
.header {position: relative; display: flex; align-items: center; max-width:160rem; width:100%; height:9rem; margin:0 auto; }

/* header - logo */
.head-logo {display: flex; align-items: center; margin-right:7rem;}
.head-logo img {display: none;}
.head-logo .logo {display: block;}
.head-logo img {margin-right: 1rem;}
.head-logo span {font-family: psb; font-size: 2.2rem; color:#fff; transition: color .35s;}
/* header - GNB */
.header .navi {flex:1;}
.header .navi .mobile-gnb {display: none;}
/* header - GNB - div_1 */
.header .ul_1 {display: flex; align-items: center;}
/* .header .li_1 {position: relative; max-width:19rem; width:100%;} */
.header .li_1 {position: relative; width:100%;}
.header .li_1:last-child {display: none;}
.header .li_1:hover {z-index: 1;}
.header .a_1 {display: flex; align-items: center; justify-content: center; height:9rem; font-family: psb; font-size: 2rem; color:#fff; text-align: center; transition:color .35s;}
.header .a_1.on {color:#60353C;}

/* header - GNB - div_2 */
.header .div_2 {position: absolute; top:100%; left:0; width:100%; padding:2rem 0; visibility:hidden; opacity:0;}
.header .div_2.on { visibility:visible; opacity:1; transition:opacity .35s;}
.header .div_2.active::before {content:''; position: absolute; left:0rem; top:0; z-index: 1; width:100%; height:100%; background:#594246;}
.header .div_2.active .a_2 {color:#fff;}
.header .ul_2 {position: relative; height:100%; padding:1rem 2rem 1.5rem 2rem;}
.header .ul_2::after {content:''; position: absolute; top:0; right:0; z-index: 0; width:0.1rem; height:100%; background:#E9E9E9;}
.header .ul_2::before {content:''; position: absolute; top:0; left:-0.1rem; z-index: 0; width:0.1rem; height:100%; background:#E9E9E9;}
/* .header .li_1:first-child .ul_2::before {content:''; position: absolute; top:0; left:0; z-index: 0; width:0.1rem; height:100%; background:#E9E9E9;} */

.header .li_2 {position: relative; z-index: 1; margin-bottom: 1.2rem;}
.header .li_2:last-child {margin-bottom: 0;}
.header .a_2 {font-family: pr; font-size: 1.6rem; color:#222; line-height: 2.5rem;}
.header .a_2 span {padding-bottom: 0.6rem; background-image: linear-gradient(#222222, #222222); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem; transition: background-size .5s;}
.header .a_2._active span,
.header .a_2:hover span {background-size:100% 0.1rem;}
.header .div_2.active .a_2 span{background-image: linear-gradient(#ffffff, #ffffff);}
.header .a_2[target="_blank"]::after {content:''; position: relative; top:0.2rem; display: inline-block; width: 1.4rem; height:1.4rem; margin-left: 0.5rem; background:url('../../images/common/ic-blank-a2.png') no-repeat center;}
.header .div_2.active .a_2[target="_blank"]::after {background:url('../../images/common/ic-blank-a2-on.png') no-repeat center;}
/* header - GNB - div_3 */
.header .div_3 {padding-top: 0.7rem;}
.header .a_3 {position: relative; display: block; padding-left: 2rem; font-family: pr; font-size: 1.5rem; color:#222;}
.header .div_2.active .a_3 { color:#E1E1E1;}
.header .a_3::before {content:''; position: absolute; left:0; top:0.6rem; width: 0.9rem; height:0.5rem; background:url('../../images/common/ic-a2-arrw.png') no-repeat center;}
.header .div_2.active .a_3::before {background:url('../../images/common/ic-a2-arrw-on.png') no-repeat center;}
.header .a_3 span {background-image: linear-gradient(#222222, #222222); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem; transition: background-size .5s;}
.header .a_3._active span,
.header .a_3:hover span {background-size:100% 0.1rem;}
.header .div_2.active .a_3 span{background-image: linear-gradient(#ffffff, #ffffff);}
.header .a_3[target="_blank"]::after {content:''; position: relative; display: inline-block; width: 1.2rem; height:1.2rem; margin-left: 0.5rem; background:url('../../images/common/ic-blank-a3.png') no-repeat center;}
.header .div_2.active .a_3[target="_blank"]::after {background:url('../../images/common/ic-blank-a3-on.png') no-repeat center;}
/* header - util */
.header .util {display: flex; align-items: center; height:100%;}

/* header - util - language */
.header .language {position: relative; z-index: 1;}
.header .language .btn-lang {position: relative; display: inline-block; width: 5rem; height:2rem; padding:0 0.6rem; font-family: pr; font-size: 1.2rem; text-align:left; color:#fff; background:#594246;}
.header .language .btn-lang::after {content:''; position: absolute; right:0.7rem; top:50%; width: 0.8rem; height:0.5rem; margin-top:-0.2rem; background:url('../../images/common/ic-lang-arrow.png') no-repeat center; transition: transform .3s;}
.header .language .btn-lang.on::after {transform: rotate(180deg);}
.header .language div {overflow:hidden; position: absolute; top:100%; left:0; z-index: 1; width:100%; max-height:0; padding-bottom: 0.9rem; background:#594246; visibility: hidden; transition:max-height .3s;}
.header .language div.on {max-height:10rem; visibility: visible;}
.header .language a {display: block; width: 100%; height: 2rem; padding:0 0.5rem; font-family: pr; font-size: 1.2rem; color:#90797D;}
.header .language a:hover {color:#fff;}
.header .language a span {padding:0.2rem 0.1rem; 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;}
.header .language a:hover span {background-size:100% 0.1rem;}

/* header - util - popup */
.header .btn-pop {position: relative; margin-left:2rem; background:url('../../images/common/ic-popup.png') no-repeat center;}
.header .btn-pop button {position: relative; display: inline-block; width: 2.5rem; height:2.5rem; text-indent: -9999rem;}
.header .btn-pop button .popup-count {position:absolute; right:-1rem; top:0.5rem; display:flex; align-items: center; justify-content: center; width:1.8rem; height:1.8rem; background:#F2778D; border-radius:50%; font-family: pb; font-size: 1.2rem; color:#fff; text-indent: 0;}

/* header - util - sitemap */
.header .btn-menu { margin-left: 3rem; background:url('../../images/common/ic-menu.png') no-repeat center;}
.header .btn-menu a,
.header .btn-menu button {display: inline-block; width:2.2rem; height:2.5rem; text-indent: -9999rem;}
.header .btn-menu .btn-gnb-open {display: none;}

/* header on */
header.on {background:#fff;}
header.on .logo-color {display: block;}
header.on .logo {display: none;}
header.on .head-logo span {color:#E75B74;}
header.on .a_1 {color:#000000}
header.on .btn-pop {background:url('../../images/common/ic-popup-on.png') no-repeat center;}
header.on .btn-menu {background:url('../../images/common/ic-menu-on.png') no-repeat center;}
header.scrolled {background:#fff;}
header.scrolled .logo-color {display: block;}
header.scrolled .logo {display: none;}
header.scrolled .head-logo span {color:#E75B74;}
header.scrolled .a_1 {color:#000000}
header.scrolled .btn-pop {background:url('../../images/common/ic-popup-on.png') no-repeat center;}
header.scrolled .btn-menu {background:url('../../images/common/ic-menu-on.png') no-repeat center;}
header.scrolled .a_1._active{color: #60353C;}

@media screen and (max-width:1680px) {
  .header {padding:0 4rem;}
  header .this-text {display: none;}

  .head-logo span {font-size: 1.8rem;}
}
@media screen and (max-width:1300px) {
  .header .head-logo {flex-direction: column;}
  .head-logo span {margin-left:4rem; font-size: 1.6rem;}
}
@media screen and (max-width:1200px) {
  header .gnbBg {position: fixed; left:0; top:0; z-index: 2; width:100%; height:100% !important; background:rgba(0,0,0,0.6);}
  header .gnbBg::before {display: none;}
  .header {justify-content: space-between;}
  .header-top {position: relative; z-index: 3;}
  .header-top .top-text {display: none;}

  .header .head-logo {flex-direction: unset;}
  .head-logo span {margin-left:unset; font-size: 2.2rem;}
  .header .mobile-gnb .language {display: none;}

  .header .btn-menu .sitemap {display: none;}
  .header .btn-menu .btn-gnb-open {display: block;}

  /* GNB */
  .header .navi .gnb {display: none;}
  .mobile-header {display: flex; align-items: center; justify-content: space-between; height:6rem; padding: 0 2rem; background:#F5F5F5;} 
  .mobile-gnb .header-top {display: none;}
  .header .navi .mobile-gnb {display: block; position: fixed; top:var(--headerTopHeight); right:-100%; z-index: 2; max-width:50rem; width: 100%; height:100%; background:#594246; transition:right 0.55s cubic-bezier(0.7, 0, 0.3, 1)}
  .header .navi .mobile-gnb.on {right:0;}
  .header .mobile-gnb .menuUItop {position: relative; height: 100%;}
  .header .mobile-gnb .logo {display: inline-flex !important; align-items: center;} 
  .header .mobile-gnb .logo span {margin-left:1rem;font-family: pm; font-size: 1.5rem; color:#F2778D;}
  .header .ul_1 {display:block;}
  .header .li_1 {position: static; max-width:unset;}
  .header .li_1:last-child {display: block;}
  .header .a_1 {width:18rem; height:6.5rem; color:#fff !important;box-shadow: 0 0 0 1px transparent; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
  .header .a_1.on {background:#482B30;}
  .header .div_2 {right:0; left:unset; top:0rem; width: calc(100% - 18rem); height:100% !important; padding:0; background:#fff;}
  .header .div_2.on {transition:none;}
  .header .ul_2 {padding:1rem 0;}
  .header .li_1:first-child .ul_2::before {display: none;}
  .header .ul_2::after {display: none;}
  .header .li_2 {margin:0;}
  .header .a_2 {position: relative; display: block; width:100%; padding:1.25rem 4rem 1.25rem 3rem; font-family: pm; font-size:1.8rem; color:#222 !important;}
  .header .a_2:hover,
  .header .a_2._active {color:#f2778d !important; font-family: psb; }
  .header .a_2.plus::before {content:''; position: absolute; right:4rem; top:50%; width:1.5rem; height:1.5rem; margin-top:-0.7rem; background:url('../../images/common/ic-a2-more.png') no-repeat center;}
  .header .a_2.plus.on::before {background:url('../../images/common/ic-a2-minus.png') no-repeat center;}
  .header .a_2 span {background:unset;}
  .header .div_3 {overflow:hidden; padding:0 4rem 0 3rem; max-height:0; transition:max-height .35s;}
  .header .div_3.on {max-height:50rem;}
  .header .ul_3 {padding:1rem; background:#F5F5F5;}
  .header .li_3 {margin-bottom: 1rem;}
  .header .li_3:last-child{ margin-bottom: 0;}
  .header .a_3 {font-family: pr;font-size: 1.8rem;}
  .header .a_3:hover,
  .header .a_3._active {font-family: pb;}
  .header .a_3::before {top:1rem;}
  .header .a_3 span {background:unset;}
  .mobile-gnb .btn-gnb-close {position: absolute; right:2rem; top:0; background:url('../../images/common/btn-menu-close.png') no-repeat center; transition:transform .3s;}
  .mobile-gnb .btn-gnb-close:hover {transform:rotate(180deg);}
  .mobile-gnb .btn-gnb-close button {width:6.5rem; height:6rem; text-indent: -9999rem;}
}
@media screen and (max-width:950px) {
  .header-top ul {flex-wrap:wrap;}
  .header-top ul li {}
}
@media screen and (max-width:768px) {
  .header {height:7rem; padding:0 2rem;}
  .header-top {display: none;}
  .mobile-gnb .header-top {display: block;}
  .header .navi .mobile-gnb {top:0 !important;}
  .head-logo img {width:13.4rem;}
  .head-logo span {font-size: 2rem;}
  .header .div_3 {padding:0 2rem 0 3rem;}
  .header .a_3 {font-size: 1.6rem;}
  .header .util .language {display: none;}
  .header .mobile-gnb .language {display: block;}
  .mobile-gnb .btn-gnb-close {right:0;}
  .mobile-header {position: relative; padding-right:7.5rem;}
}
@media screen and (max-width:650px) {
  .header .navi .mobile-gnb {max-width:100%;}
}
@media screen and (max-width:500px) {
  .header-top ul li:nth-child(4n)::after {display: none;}
}
/* [E] 헤더 */
.sub .area {max-width:154rem; width:100%; margin:0 auto; padding:0 2rem;}
@media screen and (max-width:1740px) {
  .sub .area {}
}
@media screen and (max-width:1100px) {
  .sub .area  {padding:0 4rem;}    
}
@media screen and (max-width:800px) {
  .sub .area  {padding:0 2rem;}    
}

/* [S] 서브 비주얼 */
.wrap-sub-visual {position: relative; display: flex; align-items: center; justify-content: center; width:100%; height:41rem;}
.wrap-sub-visual {background:url('../../images/common/bg-sub-visual1.jpg') no-repeat center / cover;}
.wrap-sub-visual .wrap-sub-title h1 {margin-top:13.3rem; font-size: 6rem; font-family: psb; color:#fff; line-height: 8.5rem; }
/* [E] 서브 비주얼 */

/* [S] 서브 네비 */
.wrap-sub-util {background:#F3F3F3;}
.wrap-sub-util .row {display: flex; justify-content: space-between; align-items: center; }
.wrap-sub-util .sub-navi .inner {padding: 0;}
.wrap-sub-util .sub-navi > ul {display: flex; align-items: center; font-size: 0; position: relative;}
.wrap-sub-util .sub-navi > ul > li {position: relative;}
.wrap-sub-util .sub-navi > ul > li.home {margin-right: 4rem;padding-right: 0;}
.wrap-sub-util .sub-navi > ul > li > .inner > button {position: relative; display: flex; align-items: center; height: 7rem; margin-right: 4rem; padding-right: 4.5rem; font-family: pm; font-size: 1.8rem; color: #000000; transition: color .3s;}
.wrap-sub-util .sub-navi > ul > li > .inner > button.on {font-family: pb;}
.wrap-sub-util .sub-navi > ul > li > .inner > button.on,
.wrap-sub-util .sub-navi > ul > li > .inner > button:hover {color:#F2778D;}
.wrap-sub-util .sub-navi > ul > li > .inner > button::before {content: ''; position: absolute; right: 0; width: .4rem; height: .4rem; background: #000; transition:transform .3s;}
.wrap-sub-util .sub-navi > ul > li > .inner > button::after {content: ''; position: absolute; right: -0.5rem;  top: 50%; width: 1.4rem; height:0.8rem; margin-top:-0.4rem; background: url('../../images/common/ic-sub-navi-arrw-on.png') no-repeat center; border-radius: 100%; transform: scale(0); transition: transform .35s;}
.wrap-sub-util .sub-navi > ul > li > .inner > button:hover::before,
.wrap-sub-util .sub-navi > ul > li > .inner > button.on::before {transform: scale(0);}
.wrap-sub-util .sub-navi > ul > li > .inner > button:hover::after {transform: scale(1);}
.wrap-sub-util .sub-navi > ul > li > .inner > button.on::after,
.wrap-sub-util .sub-navi > ul > li > .inner > button.on:hover::after {transform: scale(1) rotate(180deg);}
.wrap-sub-util .sub-navi > ul > li.last > .inner > button {padding-right: 5.5rem; color:#F2778D;}
.wrap-sub-util .sub-navi > ul > li.last > .inner > button::before {display: none;}
.wrap-sub-util .sub-navi > ul > li.last > .inner > button::after {right: -.1rem; top: 50%; width: 1.4rem; height:0.8rem; margin-top:-0.4rem; background:url('../../images/common/ic-sub-navi-arrw-on.png') no-repeat center; transform: scale(1); transition: .35s;}
.wrap-sub-util .sub-navi > ul > li.last > .inner > button:hover::after {background:url('../../images/common/ic-sub-navi-arrw-on.png') no-repeat center;}
.wrap-sub-util .sub-navi > ul > li.last > .inner > button.on::after {background:url('../../images/common/ic-sub-navi-arrw-on.png') no-repeat center; transform: rotate(180deg);}
.wrap-sub-util .sub-navi .home a {position: relative; display: flex; width: 18.5rem; height:7rem; background: url('../../images/common/ic-sub-navi-home.png') no-repeat left center; text-indent: -9999rem;}
.wrap-sub-util .sub-navi .home a::after {content: ''; position: absolute; right: 0; top: 50%; width: 12rem; height: 1px; background: #c4c4c4;}
.wrap-sub-util .sub-navi > strong {width: 15.5rem; flex-shrink: 0; font-family: 'Mont Bold'; font-size: 1.8rem; font-style: italic; color: #005128;}
.wrap-sub-util .sub-navi .navUl {visibility: hidden; overflow: hidden; position: absolute; top: calc(100% - 1rem); z-index: 50; width: 20rem; max-height: 0; opacity: 0;}
.wrap-sub-util .sub-navi .navUl.on {visibility: visible; overflow: hidden; max-height: 17.5rem; background: #fff; border-radius: 2rem; box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,.2); opacity: 1;}
.wrap-sub-util .sub-navi .navUl.on > div {padding:2rem 0; overflow-y: auto; max-height: 17.5rem;}
.wrap-sub-util .sub-navi .navUl > div::-webkit-scrollbar {width: 1rem; height: 1rem; border: .2rem solid #fff;}
.wrap-sub-util .sub-navi .navUl > div::-webkit-scrollbar-thumb {background: #c5c5c5; border: .2rem solid #fff; border-radius: 1rem;}
.wrap-sub-util .sub-navi .navUl a {position: relative; display: block; padding: .9rem 2rem .9rem 2.5rem; font-family: pm; font-size: 1.5rem; color: #555555; word-break: keep-all;}
.wrap-sub-util .sub-navi .navUl a:hover,
.wrap-sub-util .sub-navi .navUl a._active {background: #E8E7E7; font-family: pb; color: #000000;}
.wrap-sub-util .sub-navi .navUl a[target=_blank]::after {content: ''; display: inline-block; vertical-align: middle; width: 1.6rem; height: 1.6rem; margin-left: 1rem; background: url('../../images/common/ic-navi-blank-on.png') no-repeat center top;}
/* .wrap-sub-util .sub-navi .navUl a[target=_blank]:hover::after  {background-position: center bottom;} */

@media screen and (max-width: 1200px) {
  .wrap-sub-util .sub-navi .home a {width: 3.5rem;}
  .wrap-sub-util .sub-navi .home a::after {display: none;}
  .wrap-sub-visual {height:31rem;}
  .wrap-sub-visual .wrap-sub-title h1 {margin-top: 10.3rem;font-size: 4.5rem;}
}

@media screen and (max-width: 970px) {
  .wrap-sub-util .sub-navi > ul > li.home {margin-right: 1.5rem;}
  .wrap-sub-util .sub-navi > ul > li > .inner > button {margin-right: 2.5rem; padding-right: 2.5rem;}
  /* .wrap-sub-util .sub-navi > ul > li > .inner > button {width:100%;} */
  .wrap-sub-util .sub-navi > ul > li.last > .inner > button {padding-right: 2.5rem;}
  /* .wrap-sub-util .sub-navi > ul > li > .inner > button::after {right: -1.1rem; top: 2.8rem; width: 2.5rem; height: 2.5rem;} */
  /* .wrap-sub-util .sub-navi > ul > li.last > .inner > button::after {top: 2.8rem; width: 2.5rem; height: 2.5rem;} */
  .wrap-sub-util .sub-navi > ul > li.last > .inner > button::before {display: none;}
}

@media screen and (max-width: 810px) {
  .wrap-sub-util .sub-navi .home a {width: 2.6rem;height: 6rem;background-size: 2.6rem; }
  .wrap-sub-util .sub-navi > ul > li.home {margin-right: 1rem;}
  .wrap-sub-util .sub-navi > ul > li > .inner > button {height: 6rem; margin-right: 1rem; padding-right: 1rem; font-size: 1.6rem;}
  .wrap-sub-util .sub-navi > ul > li.last > .inner > button {padding-right: 0em; margin-right: 0;}
  .wrap-sub-util .sub-navi > ul > li > .inner > button::after {display: none;}

  .wrap-sub-util .sub-navi .navUl {min-width:19.8rem; max-width:19.8rem;}
  .wrap-sub-util .sub-util .sub-share {background-size: 2.6rem;}
}
@media screen and (max-width:768px) {
  .wrap-sub-visual .wrap-sub-title h1 {font-size: 4rem;}
}
@media screen and (max-width: 650px) {
  .wrap-sub-util .sub-navi .home a {width: 2.6rem;background-size: 2.6rem;}
  .wrap-sub-util .sub-navi > ul > li.last > .inner > button {display: block;max-width: 10.3rem;margin-right: 0; padding-right: 0;}
  .wrap-sub-util .sub-util > ul > li > button {width: 4rem !important;}
  .wrap-sub-util .sub-navi #pagetitle2 > .inner > button {display: block; max-width:12rem; white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
  .wrap-sub-util .sub-navi #pagetitle2.last > .inner > button {max-width:unset;}
  .wrap-sub-util .sub-navi #pagetitle2 > .inner > button::before {top: 2.8rem;}
  /* 서브네비 말줄임 */
  .wrap-sub-util .sub-navi > ul {display: grid; grid-auto-flow: column;}
  .wrap-sub-util .sub-navi > ul > li {white-space: nowrap; text-overflow: ellipsis; margin-right: 1rem;}
  .wrap-sub-util .sub-navi .inner {display: grid}
  .wrap-sub-util .sub-navi > ul > li > .inner > button {width: 100%; max-width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  /* 서브네비 말줄임 */

  /* .wrap-sub-util .sub-navi {flex:1;} */
  /* .wrap-sub-util .sub-navi > ul > li {margin-right: 1rem;} */
  /* .wrap-sub-util .sub-navi > ul > li.leng2 {width:auto;}
  .wrap-sub-util .sub-navi > ul > li.leng2 > .inner > button {width:50%}
  .wrap-sub-util .sub-navi > ul > li > .inner > button {margin-right: 0;} */
  .wrap-sub-util .sub-navi > ul > li > .inner > button {display: block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
  .wrap-sub-util .sub-navi > ul > li > .inner > button::before {transform: scale(1) !important; top:2.8rem;}
  .wrap-sub-util .sub-navi .navUl {min-width: 19.8rem;max-width: 19.8rem;}
  .wrap-sub-util .sub-navi #navUldep03.navUl {right:0;}
}

/* 서브 유틸 */
.wrap-sub-util .sub-util > ul {display: flex; justify-content: center; align-items: center; position: relative; vertical-align: middle;}
.wrap-sub-util .sub-util > ul > li {position: relative; display: flex; align-items: center; margin-right: .5rem;}
.wrap-sub-util .sub-util > ul > li::after {content: ''; position: absolute; right:-0.2rem; top:50%; width:0.4rem; height:0.4rem; margin-top:-0.2rem; background:#C6C6C6;}
.wrap-sub-util .sub-util > ul > li:last-child {padding-right: 0; margin-right: 0;}
.wrap-sub-util .sub-util > ul > li:last-child::after {display: none;}
.wrap-sub-util .sub-util > ul > li > button {width: 6rem; height: 6rem; border-radius: 100%; text-indent: -9999rem; transition: box-shadow .35s;}
.wrap-sub-util .sub-util > ul > li > button:hover {background-color: #f1f1f1;}

.wrap-sub-util .sub-util .sub-share {background: url('../../images/common/ic-share.png') no-repeat center center; transition:background .3s;}
.wrap-sub-util .sub-util .sub-share.active,
.wrap-sub-util .sub-util .sub-share:hover {background: url('../../images/common/ic-share-on.png') no-repeat center center;}
.wrap-sub-util .sub-util .sub-favo {background: url('../../images/common/ic-favorite.png') no-repeat center center; transition: background .3s;}
.wrap-sub-util .sub-util .sub-favo.memory,
.wrap-sub-util .sub-util .sub-favo.active,
.wrap-sub-util .sub-util .sub-favo:hover {background: url('../../images/common/ic-favorite-on.png') no-repeat center center;}
/* favo */
.wrap-sub-util .sub-util .box-sub-favo {display: none; opacity: 0; overflow: hidden; position: absolute; right: 0; top: calc(100%); z-index: 1; width: 25rem; max-height: 0; background: #fff; border-radius: 2rem; transition: .35s; box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,.2); z-index: 20;}
.wrap-sub-util .sub-util .box-sub-favo.active {display: block; opacity: 1; max-height: 50rem;}
.wrap-sub-util .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-util .sub-util .box-sub-favo ul {padding: 1.5rem 0;}
.wrap-sub-util .sub-util .box-sub-favo ul li {display: flex;  position: relative; padding: .2rem 2.5rem; transition: all .3s;}
.wrap-sub-util .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-util .sub-util .box-sub-favo ul li strong {position: relative; display: inline-block; transition: color .3s;}
.wrap-sub-util .sub-util .box-sub-favo ul li:hover strong {color:#0e3999;}
.wrap-sub-util .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-util .sub-util .box-sub-favo ul li:hover strong::after {width: 100%;}
.wrap-sub-util .sub-util .box-sub-favo ul li a span {display: none;}
.wrap-sub-util .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; border-radius: 100%; text-indent: -9999rem;}
.wrap-sub-util .sub-util .box-sub-favo .close:hover {transform: rotate( 180deg ); transition: all 0.75s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-util .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; text-indent: -9999rem; vertical-align: middle;}
.wrap-sub-util .sub-util .box-sub-favo .control {display: flex; overflow: hidden; font-size: 0; text-align: center;}
.wrap-sub-util .sub-util .box-sub-favo .control::after {content: ''; display: block; clear: both;}
.wrap-sub-util .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-util .sub-util .box-sub-favo .control button.add {background: #F2778D;}
.wrap-sub-util .sub-util .box-sub-favo .control button.reset {background: #594246;}
/* share */
.wrap-sub-util .sub-util .box-sub-share {display: none; opacity: 0; overflow: hidden; position: absolute; right: 0; top:100%; z-index: 20; max-height: 0; box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,.2); background: #fff; border-radius: 2rem; transition: .35s;}
.wrap-sub-util .sub-util .box-sub-share.active {display: block; opacity: 1; max-height: 30rem;}
.wrap-sub-util .sub-util .box-sub-share ul {display: flex; align-items: center; padding: 0 6rem 0 1.5rem;}
.wrap-sub-util .sub-util .box-sub-share ul button,
.wrap-sub-util .sub-util .box-sub-share ul a {position: relative; display: block; width: 4.5rem; height: 6rem; text-indent:-9999rem;}
.wrap-sub-util .sub-util .box-sub-share .fb {background: url('../../images/common/ic-fb.png') no-repeat center center;}
.wrap-sub-util .sub-util .box-sub-share .tw {background: url('../../images/common/ic-tw.png') no-repeat center center;}
.wrap-sub-util .sub-util .box-sub-share .addr {background: url('../../images/common/ic-copy.png') no-repeat center;}
.wrap-sub-util .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; border-radius: 100%;}
.wrap-sub-util .sub-util .box-sub-share .close:hover {transform: rotate( 180deg ); transition: all 0.75s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-util .sub-util .sub-print {background: url('../../images/common/ic-print.png') no-repeat center center; transition: background .3s;}
.wrap-sub-util .sub-util .sub-print:hover {background: url('../../images/common/ic-print-on.png') no-repeat center center; }
.wrap-sub-util .sub-util .copy {text-align: center;}
.wrap-sub-util .sub-util .copy button {display: inline-block; width: 3.8rem; height: 3.8rem; margin: 0 auto 0px auto;  text-indent: -9999rem;}

@media screen and (max-width: 1100px) {
  .wrap-sub-util .sub-util > ul > li {margin-right: 0;}
  .wrap-sub-util .sub-util > ul > li > button {width:3rem;}
  .wrap-sub-util .sub-util > ul > li.util2::after {display: none;}
  .wrap-sub-util .sub-util > ul > li.util1,
  .wrap-sub-util .sub-util > ul > li.util3 {display: none;}
}
/* [E] 서브 네비 */


/* [S] 컨텐츠 */
.page-title {display: block; margin-top: 8rem; font-family: pbl; font-size: 4.8rem; line-height: 1; color: #000000;}
.wrap-sub-contents #contentsEditHtml {margin-top: 6rem; font-size: 1.7rem;}
.tab_div.div_4 {margin-top: 8rem;}
@media screen and (max-width: 810px) {
  .tab_div.div_4 {margin-top: 6rem;}
  .page-title {margin-top: 5rem; font-size: 3.3rem;}
  .wrap-sub-contents #contentsEditHtml {margin-top: 4rem;}
}

/* [E] 컨텐츠 */

/* [S] 탑버튼 */
.top-btn {position: fixed; right:4rem; bottom:-10rem; z-index: 6; transition:bottom .5s;}
.top-btn.on {bottom:10rem;}
.top-btn button {display: inline-block; width: 5rem; height:5rem; background:#734C4C url('../../images/common/ic-top.png') no-repeat center; border-radius:50%; text-indent: -9999rem;}
/* [E] 탑버튼 */


/* [S] 푸터 */

.footer { background: #333; padding:6rem 0 4rem 0;}
.sub footer {margin-top: 8rem;}
.sub footer.non-margin {margin-top: 0;}
/* footer - footer-top */
.footer-top {display: flex; justify-content: space-between; align-items: center; margin-bottom:4rem; padding:2.5rem 0; border-bottom:0.1rem solid #909090;}
/* footer - footer-top - footer-link */
.footer-top .footer-link {width:100%; overflow:hidden; display: flex;}
.footer-top .footer-link li {overflow:hidden; position: relative; margin-right:1.7rem; padding-right:1.8rem; }
.footer-top .footer-link li::after {content:''; position: absolute; right:0; top:50%; width: 0.1rem; height:1rem; margin-top:-0.5rem; background:#909090;}
.footer-top .footer-link li:last-child {margin-right:0; padding-right: 0;}
.footer-top .footer-link li:last-child::after {display: none;}
.footer-top .footer-link .privacy a {color:#FFC440; background-image: linear-gradient(#FFC440, #FFC440); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 1px; transition: background-size .5s;}
.footer-top .footer-link .privacy a:hover {background-size:100% 1px}
.footer-top .footer-link a {font-family: pr; font-size: 1.6rem; color:#fff; line-height: 2.5rem; letter-spacing:-.03em; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 1px; transition: background-size .5s;}
.footer-top .footer-link a:hover {background-size:100% 1px;}
/* footer - footer-top - family-site */
.family-site {position: relative; z-index: 1; height: 100%;}
.family-site .fam-btn {display: inline-block; width:23rem; height:4rem; padding:0 2rem; border:1px solid #909090; font-family: pl; font-size: 1.5rem; text-align:left; color:#fff; line-height: 2rem;}
.family-site .fam-btn:hover {border:1px solid #fff;}
.family-site .fam-btn::after {content:''; position: absolute; right:2rem; top:50%; width: 0.9rem; height:0.6rem; margin-top:-0.3rem; background:url('../../images/common/ic-footer-sitemap.png') no-repeat center; transition:transform .3s;}
.family-site .fam-btn.on::after {transform:rotate(180deg)}
.family-site .list {overflow:hidden; position: absolute; left:0; bottom:100%; width:100%; max-height:0rem; background: #333; transition:max-height .5s;}
.family-site .list.on {max-height:20rem;}
.family-site .list-inner {padding:1.5rem 1.5rem 1.5rem 2rem;}
.family-site .list .scrollbox {max-height:calc(20rem - 3rem); }
.family-site .list a {display: block; margin-bottom:1.2rem; font-family: pl; font-size: 1.5rem; color:#fff;}
.family-site .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;}
.family-site .list a:hover span {background-size:100% 0.1rem;}
.family-site .list li:last-child a {margin-bottom: 0;}
/* footer - footer-btm */
.footer-btm {position: relative; display: flex;}
.footer-btm .logo {margin-right: 5rem;}
.footer-btm .logo img {mix-blend-mode: luminosity;}
.footer-btm .address {flex:1;}
.footer-btm .address > ul > li {position: relative; display: flex; margin-bottom: 2rem;}
.footer-btm .address > ul > li:last-child {margin-bottom: 0;}
.footer-btm .address strong { display: block; font-family: pm; font-size: 1.6rem; color:#fff;}
.footer-btm .address span {font-family: pl; font-size: 1.6rem; color:#ccc;}
.footer-btm .adr > ul {display: flex;}
.footer-btm .adr > ul > li:first-child {margin-right: 6.5rem;}
.footer-btm .adr > ul > li:nth-child(2) {margin-right:10.5rem;}
/* .footer-btm .adr-btm {position: absolute; right:0; top:0; height: 100%;} */
.footer-btm .adr-btm .open-img {text-align:right;}
.footer-btm .adr-btm .copyright { margin-top: 2rem; white-space: nowrap; font-family: pl; font-size: 1.4rem; color:#777; letter-spacing: -.03em;}
.footer-btm .adr-btm .copyright br {display: none; }

@media screen and (max-width:1600px) {
  .footer-btm .adr > ul {flex-wrap:wrap; gap:0; width: 100%;}
  .footer-btm .adr > ul > li {width: auto; margin-right:2rem; margin-bottom:2rem;}
  .footer-btm .adr > ul > li:first-child {width:100%;}
  .footer-btm .adr-btm .copyright {margin-top: 0;}
}
@media screen and (max-width:1200px) {
  .footer-btm {padding-right: 0;}
  .footer-btm .logo {flex-shrink:0; margin-right: 4.5rem;}
  .footer-btm .address > ul {display: flex;}
  .footer-btm .address > ul > li {flex-direction: column; margin-bottom: 0;}
  .footer-btm .adr > ul > li:nth-child(-n+3) {margin-bottom: 2rem;}
  .footer-btm .adr:last-child > ul > li {width:100%;}
  .footer-btm .adr:last-child .adr-cam {width: 30rem;}
  .footer-btm .adr-cam {width:auto; margin-bottom: 2rem;}

  .footer-btm .adr-btm {bottom:0; top:unset; width:100%; height:unset;}
  .footer-btm .adr-btm .open-img {text-align:left;}
}
@media screen and (max-width:950px) {
  .footer-btm .logo {margin-right:2.5rem;}
  .footer-btm .adr > ul > li:first-child {margin-right: 3rem;}
  .footer-btm .adr > ul > li {width:50%;}
  .footer-btm .adr:last-child > ul > li {width:auto;}

}
@media screen and (max-width:900px) {
  .sub footer.non-margin {margin-top:8rem;}
  .footer-top {flex-direction: column-reverse; margin-bottom: 5.5rem; padding:4rem 0 1.5rem 0;}
  .footer-top .footer-link {margin-top: 1.5rem;}
  .footer-top .family-site { width:100%;}
  .footer-top .family-site .fam-btn { width:100%; display: block;}
  .family-site {order:1; width:auto; margin: 0 auto; margin-bottom:2rem;}
  .footer-btm {flex-direction: column; width:100%;}
  .footer-btm .logo {overflow:hidden; text-align: center; margin-right: 0; margin-bottom:0rem; order:3;}
  .footer-btm .address {overflow:hidden; order:2; margin-bottom:2rem;}
  .footer-btm .address > ul {overflow:hidden; flex-direction: column; margin-bottom: 1.5rem;}
  .footer-btm .adr-cam {text-align: center;}
  .footer-btm .adr:last-child .adr-cam {width:unset;}
  .footer-btm .adr > ul {justify-content: center;}
  .footer-btm .adr > ul > li {width:33.3333%; margin-right:0; text-align: center; }
  .footer-btm .adr > ul > li:first-child {margin-right: 0;}
  .footer-btm .adr > ul > li:nth-child(2) {margin-right:2rem; margin-bottom: 0;}
  .footer-btm .adr > ul > li:last-child {margin-bottom: 0;}
  .footer-btm .adr-btm {position: relative;}
  .footer-btm .adr-btm .open-img {text-align: center; margin-bottom: 1.7rem;}
  .footer-btm .adr-btm .copyright {position: relative; text-align: center;}
  .footer-btm .adr-btm .copyright br {display: none;}
}
@media screen and (max-width:500px) {
  .footer {padding:4rem 0 3rem 0;}
}
/* [E] 푸터 */







/* [S] Tween 애니메이션 */
.wrap-header {top: -15rem;}
.wrap-visual .text-box strong {position: relative; left:-5rem; filter: blur(1rem); opacity:0;}
.wrap-visual .controls {left:-5rem; opacity:0;}
.wrap-base-link ul li {position: relative; top:10rem; opacity:0;}
.wrap-notice .title {position: relative; top:-5rem; opacity:0;}
.wrap-notice .row {opacity:0;}
.wrap-notice .list-info {left:-5rem; opacity:0;}
.wrap-notice .row > ul {opacity:0;}
.wrap-pko .text strong {position: relative; top:3rem; opacity:0;}
.wrap-pko .text p {position: relative; top:3rem; opacity:0;}
.wrap-pko .num-box {position: relative; top:3rem; opacity:0;}
.wrap-pko .right {filter: blur(1rem); opacity:0;}
.wrap-curi .title {position: relative; top:3rem; opacity:0;}
.wrap-curi .slider {position: relative; top:5rem; opacity:0;}
.wrap-activity {left:-5rem; opacity:0;}
.wrap-magazine .frame {position: relative; right:-5rem; opacity:0;}
.wrap-gallery {left:-5rem; opacity:0;}
.wrap-service {right:-5rem; opacity:0;}
.wrap-link li {top:3rem; opacity:0;}

/* .wrap-activity .title {position: relative; left:-3rem; opacity:0;}
.wrap-activity .slider > ul {position: relative; left:-3rem; opacity:0;} 
.wrap-activity .more-box {position: relative; left:-3rem;}  */

/* [E] Tween 애니메이션 */