@charset "UTF-8";
@import url(./fonts.css);


* {margin: 0; padding: 0; letter-spacing: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact; word-break: keep-all;}
html {width: 100%; height: 100%; font-size: 0.052vw;}
body {position: relative; font-family: "InterTight-Regular", sans-serif; font-weight:normal; font-size: 16rem; letter-spacing: 0; color: #000; line-height: 130%; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; overflow-x: hidden;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td {margin: 0; padding: 0; font-weight: normal;}
ul, ol, li {list-style: none;}
img, fieldset {border: none; vertical-align: top;}
legend, caption {overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
textarea, button {vertical-align: middle;}
option {padding: 10px;}
input[type="radio"], input[type="checkbox"] {border: 0; padding: 0;  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
select {padding: 5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
textarea {padding: 20rem; vertical-align: middle; background: #fff; border: 1px solid #E0E0E0; font-family: "InterTight-Regular", sans-serif; color: #000; letter-spacing: -.04rem; font-size: max(16rem, 12px); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; resize: vertical;}
a {text-decoration: none; color: #000;}
a:hover, a:focus, a:active {text-decoration: none;}
table {border-collapse: collapse; width: 100%;}
button {background: none; border: none; padding: 0; margin: 0; cursor: pointer; overflow: visible; white-space: nowrap; font-size: max(16rem, 12px); font-family: "InterTight-Regular", sans-serif; color:#000;}
button:active {outline: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
strong, b {font-family: "InterTight-Regular", sans-serif;}
th {font-family: "InterTight-Regular", sans-serif;}
:root {--opacity: 0; --top: 70rem;}
input:focus, select:focus, option:focus, button:focus{
	outline: none;
}
textarea:focus {outline: 1px solid #00AD1D;}
textarea::placeholder {color: #919593;}
textarea:disabled {border: 1px dashed #E0E0E0;}

.swiper-button-prev:after, .swiper-button-next:after{display:none;}

html.scl-lock, body.scl-lock {overflow: hidden;}

.stop-scroll{overflow:hidden; height:100%;}

#skipNavi {position: fixed; top: -9999px; z-index: 999999; background: #002554; text-align: center; width: 100%; padding: 10px 0;}
#skipNavi a {color: #fff;}

.inner {width: calc(100% - 480rem); margin: 0 auto;}

.only-mo {display: none !important;}
.only-pc {display: block !important;}

@media screen and (max-width: 1024px) {
  html {font-size: .130vw;}
  body {font-size: 12rem;}
  .inner {width: calc(100% - 60rem);}
  .only-pc {display: none !important;}
  .only-mo {display: block !important;}
}
@media screen and (max-width: 600px) {
  html {font-size: .256vw;}
  .inner {width: calc(100% - 48rem);}
}


/* header */
header {position: fixed; top: 0; left: 0; z-index: 99999; padding: 0 130rem; width: 100%; height: 100rem; background: #fff; transition: top .3s ease, background-color .3s ease;}
header.hide {top: -100rem;}
header .header-wrap {position: relative; display: flex; justify-content: center; width: 100%; height: 100%;}
header .logo {position: absolute; top: 48rem; left: 0; transition: top .3s ease;}
header .logo a {display: block; width: 186rem; height: 28rem; background: url(/common/en/images/icon-logo.png) no-repeat 0 / 100% auto; transition: background-image .3s ease;}
header nav .menu-wrap {display: flex; justify-content: center; position:relative; height:100%;}
header nav .menu-wrap .menu-list .one-dept {padding: 48rem 25rem 24rem; display: inline-block; max-height: 100rem; font-family: "InterTight-SemiBold"; font-size: 20rem; line-height: 110%; transition: all .3s ease;}
header.active:not(.on) nav .menu-wrap .menu-list.on .one-dept{color:#008233}

header .two-menu-list {position: absolute; top: 100rem; left:50%; transform:translateX(-50%); display: none; border-top: 0;}
header .menu-list:first-child .two-menu-list{left:39%}
header .two-menu-list .list-wrap {display: flex; width: 100%;}
header .two-dept {display: flex; flex: 1; padding: 50rem 60rem; border: 1px solid #E4E4E4; border-top: 0; border-radius: 0 0 12rem 12rem; overflow: hidden; background: #fff;}
header .two-dept .detail-list + .detail-list {margin-left: 40rem;}
header .two-dept .detail-list .two-txt {display: inline-block; font-family: "InterTight-SemiBold"; font-size: 20rem; line-height: 110%; white-space: nowrap; transition: color .3s ease;}
header .two-dept .detail-list .two-txt.icon{padding-right:19rem; background:url("/common/en/images/icon-header-dividend-inquiry.svg") no-repeat right center/18rem auto;}
header .two-dept .detail-list.on .two-txt{color: #008233;}
header .two-dept .detail-list .thr-dept {margin-top: 25rem;}
header .two-dept .detail-list .thr-dept .thr-list + .thr-list {margin-top: 15rem; line-height: 110%;}
header .two-dept .detail-list .thr-dept .thr-list a {font-family: "InterTight-Medium"; font-size: 14rem; line-height: 110%; color: #707070; white-space: nowrap; transition: color .3s ease;}
header .two-dept .detail-list .thr-dept .thr-list.on a {color: #008233;}

header .img-box {width: 250rem; height: 250rem; border-radius: 0 0 12rem 0; overflow: hidden;}
header .two-menu-list.large .img-box {width: 342rem; height: 342rem;}
header .img-box img {width: 100%; height: 100%; object-fit: cover;}

header.white:not(.on) .lang-wrap .lang-btn {color: #fff;}
header.white:not(.on) .utils .lang-wrap .lang-btn::after {background-image: url("/common/en/images/icon-lang-arrow-wht.svg");}
header.active:not(.on) .lang-wrap .lang-btn {color: #000;}
header.active:not(.on) .utils .lang-wrap .lang-btn::after {background-image: url("/common/en/images/icon-lang-arrow.svg");}
header.show .lang-wrap .lang-btn {color: #000;}
header.show .utils .lang-wrap .lang-btn::after {background-image: url("/common/en/images/icon-lang-arrow.svg");}

.utils .allmenu-wrap {display: none;}
.utils {position: absolute; top: 48rem; right: 0; transition: top .3s ease;}
.utils .utils-wrap {display: flex; gap: 30rem;}
.utils .lang-wrap {position: relative;}
.utils .lang-wrap .lang-btn {position: relative; padding-right: 25rem; font-family: "InterTight-SemiBold"; font-size: 16rem; line-height: 110%;}
.utils .lang-wrap .lang-btn::after {display:block; content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20rem; height: 20rem; background: url(/common/en/images/icon-lang-arrow.svg) no-repeat center center / 100% auto; transition: all .3s ease;}
.utils .lang-wrap .lang-box {display: none; position: absolute; left: 50%; top: calc(100% + 11rem); transform: translateX(-50%); padding: 15rem 20rem; width: 90rem; border: 1px solid #E4E4E4; border-radius: 12rem; background-color: #fff;}
.utils .lang-wrap .lang-box::before {content: ""; position: absolute; top: -12rem; left: 0; width: 100%; height: 20rem;}
.utils .lang-wrap .lang-box .lang {display: inline-block; min-width:30rem;}
.utils .lang-wrap .lang-box .lang ~ .lang {margin-top: 8rem;}
.utils .lang-wrap .lang-box .lang.on {font-family: "InterTight-SemiBold";}
.utils .lang-wrap .lang-box .lang.on span{font-family: "InterTight-SemiBold";}
.utils .family-wrap .family-btn {position: relative; padding-right: 28rem; font-family: "InterTight-SemiBold"; font-size: 16rem; line-height: 110%;}
.utils .family-wrap .family-btn::after {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20rem; height: 20rem; background: url(/common/en/images/icon-plus.png) no-repeat center center / 100% auto; transition: all .3s ease;}
.utils .family-wrap .family-btn:hover::after {transform: translateY(-50%) rotate(360deg);}

header.white:not(.on) .logo a {background-image: url(/common/en/images/icon-logo-white.png);}
header.white:not(.on) {border-bottom: 0; background: transparent;}
header.white:not(.on) nav .menu-wrap .menu-list .one-dept {color: #fff;}
header.white:not(.on) .family-wrap .family-btn {color: #fff;}
header.white:not(.on) .family-wrap .family-btn::after {background: url(/common/en/images/icon-plus-white.png) no-repeat 0 / cover;}

header.active:not(.on) {border-bottom: 1px solid #E4E4E4; background: #fff;}
header.active:not(.on) .logo {top: 36rem;}
header.active:not(.on) .logo a {background-image: url(/common/en/images/icon-logo.png);}
header.active:not(.on) nav .menu-wrap .menu-list .one-dept {padding: 38rem 25rem 38rem; color: #000;}
header.active:not(.on) nav .menu-wrap .menu-list.active .one-dept {color: #008233;}
header.active:not(.on) .utils {top: 39rem;}
header.active:not(.on) .lang-wrap .lang {color: #000;}
header.active:not(.on) .lang-wrap .lang::after {background: url(/common/en/images/icon-lang-arrow.png) no-repeat 0 / cover;}
header.active:not(.on) .family-wrap {top: 39rem;}
header.active:not(.on) .family-wrap .family-btn {color: #000;}
header.active:not(.on) .family-wrap .family-btn::after {background: url(/common/en/images/icon-plus.png) no-repeat 0 / cover;}


header.show {border-bottom: 1px solid #E4E4E4; background: #fff;}
header.show .logo a {background-image: url(/common/en/images/icon-logo.png);}
header.show nav .menu-wrap .menu-list .one-dept {color: #000;}
header.show nav .menu-wrap .menu-list.active .one-dept {color: #008233;}
header.show .lang-wrap .lang {color: #000;}
header.show .lang-wrap .lang::after {background: url(/common/en/images/icon-lang-arrow.png) no-repeat 0 / cover;}
header.show .family-wrap .family-btn {color: #000;}
header.show .family-wrap .family-btn::after {background: url(/common/en/images/icon-plus.png) no-repeat 0 / cover;}
header button.btn-close {display: none;}

header nav .menu-wrap .menu-list .depth-btn {display: none;}

@media screen and (max-width: 1024px) {
  header {padding: 0; height: 70rem; border: 0;}
  header .logo {top: 23rem; left: 20rem;}
  header .logo a {width: 153rem; height: 23rem;}
  nav {position: absolute; top:70rem; right:0; width:100%; height:calc(100vh - 70rem); padding-bottom: 70rem; display: none; background:#fff;}
  header nav .menu-wrap {display: block; overflow: auto; padding-top: 50rem;}
  header nav .menu-wrap::-webkit-scrollbar {width: 4px;} 
  header nav .menu-wrap::-webkit-scrollbar-track {background: 0; border-radius: 50px;}
  header nav .menu-wrap::-webkit-scrollbar-thumb {background: #C9C6C2; border-radius: 50px;}
  header nav .menu-wrap .menu-list {position: relative;}
  header nav .menu-wrap .menu-list .depth-btn {display: block; position:absolute; right:15rem; top:8rem; width:40rem; height:40rem;}
  header nav .menu-wrap .menu-list .depth-btn::before {content: ""; display: block; transform:rotate(0deg); width:100%; height:100%; background:url("/common/en/images/icon-header-one-depth-arrow.svg") no-repeat center center/20rem auto; transition:transform 0.4s ease;}
  header nav .menu-wrap .menu-list.on .depth-btn::before{transform:rotate(180deg)}
  header nav .menu-wrap .menu-list .one-dept{position:relative; padding:16rem 20rem;}
  header nav .menu-wrap .menu-list:not(:nth-child(2)) .one-dept {pointer-events: none;}
  header nav .menu-wrap .menu-list .two-dept {display: block; padding: 24rem 20rem; background: #f9f9f9; transition: margin-bottom .3s ease;}
  header nav .menu-wrap .menu-list.active .two-dept {margin-bottom: 20rem; border-radius: 0;}
  header .two-dept {padding: 0; height: auto; border: 0;}
  header .two-dept .detail-list + .detail-list {margin: 12rem 0 0 0;}
  header .two-dept .detail-list .thr-dept {display: none;}
  header .img-box {display: none;}
  header .two-menu-list {position: unset; transform: translate(0);}
  header .two-menu-list.large .two-dept {height: auto;}
  header .two-dept .detail-list .two-txt {font-size: 14rem;}

  .utils {position: unset;}
  .utils .lang-wrap {display: none;}
  .utils .family-wrap {display: none;}
  .utils .allmenu-wrap {display: block; position: absolute; top: 20rem; right: 20rem;}
  .utils .allmenu-wrap .allmenu-btn {width: 30rem; height: 30rem; background: url("/common/en/images/icon-mobile-btn-open.svg") no-repeat center center / 100% auto;}
  .utils .allmenu-wrap .allmenu-btn span {font-size: 0;}

  header.white:not(.on) .utils .allmenu-wrap .allmenu-btn {background-image: url("/common/en/images/icon-mobile-btn-open-wht.svg");}
  header.show .utils .allmenu-wrap .allmenu-btn {background-image: url("/common/en/images/icon-mobile-btn-open.svg");}

  header.on .utils .lang-wrap {display: block;}
  header.on .utils .family-wrap {display: block;}
  header.on .utils .allmenu-wrap .allmenu-btn {display: none;}
  header.on .utils .utils-wrap{display: flex; justify-content: space-between; align-items: center; position: absolute; top:unset; bottom:0; right:0; padding:21rem 20rem; width:100%; height: 70rem; z-index:1; border-top:1px solid #e4e4e4; background-color: #fff;}
  header.on .utils .lang-wrap .lang-box{top:auto; bottom:30rem; left:0; transform:translateX(0); padding:13rem 20rem 12rem; width:85rem;}
  header.on .utils .lang-wrap .lang-box .lang{display:block;}
  header.on .utils .lang-wrap .lang-btn:after{top:0; transform:rotate(0deg) translateY(0); transform-origin: center; transition: transform 0.4s ease;}
  header.on .utils .lang-wrap .lang-btn.on:after{transform:rotate(180deg) translateY(0);}

  header.on button.allmenu-btn {display: none;}
  header.on button.btn-close {display: block;}
  header button.btn-close {width: 30rem; height: 30rem;}
  header button.btn-close img {width: 100%; height: 100%; object-fit: cover;}
  
  header.white:not(.on) .logo a {background-image: url(/common/en/images/icon-logo-white.png);}
  header.show .logo a {background-image: url(/common/en/images/icon-logo.png);}
  header.on {height: 100%; border: 0;}
  header.on .logo {top: 23rem;}
  header.on .logo a {background-image: url(/common/en/images/icon-logo.png);}
  header.on nav .menu-wrap .menu-list .one-dept {position: relative; padding:16rem 20rem;}
  header.on nav .menu-wrap .menu-list.on .one-dept{color:#000;}
}


/* family Site */
.family-site {display: none; z-index: 123456789; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);}
.family-site .pop-wrap {position: absolute; top: 0; right: -800rem; width: 1060rem; height: 100%; background-color: #fff; transition: right .6s ease;}
.family-site.on .pop-wrap {right: 0;}

.family-site .pop-wrap {display: flex; flex-direction: column;}
.family-site .pop-wrap .pop-head {display: flex; justify-content: space-between; align-items: center; padding: 50rem; padding-right: 90rem; padding-bottom: 0; margin-bottom: 40rem;}
.family-site .pop-wrap .btn-pop-close {position: absolute; top: 53rem; right: 50rem; width: 30rem; height: 30rem; background: url(/common/en/images/icon-close.svg) no-repeat center center / 100% auto;}

.family-site .pop-wrap .pop-cont {height: calc(100% - 126rem); padding: 0 40rem 0 50rem;}
.family-site .pop-wrap .pop-cont .scroll-area {height: 100%; padding-bottom: 50rem; padding-right: 10rem; overflow: auto;}
.family-site .pop-wrap .pop-cont .scroll-area::-webkit-scrollbar {width: 3px; background: transparent;}
.family-site .pop-wrap .pop-cont .scroll-area::-webkit-scrollbar-thumb {width: 4px; background: #d9d9d9; border-radius: 2px;}

.family-site .family-menu {display: flex; flex-direction: column; gap: 10rem;}
.family-site .family-menu > li {border: 1px solid #d9d9d9; border-radius: 12rem;}
.family-site .family-menu > li .one-dept {position: relative; display: block; padding: 30rem 80rem 30rem 40rem; font-size: 20rem; font-family: "InterTight-SemiBold"; line-height: 110%; letter-spacing: 0;}
.family-site .family-menu > li .one-dept::after {content: ""; position: absolute; right: 40rem; top: 50%; transform: translateY(-50%); width: 19rem; height: 20rem; background: url("/common/en/images/icon-drop-arrow.svg") no-repeat center center / 100% auto; transition: transform .4s ease;}
.family-site .family-menu > li.on .one-dept::after {transform: translateY(-50%) rotate(180deg);}
.family-site .family-menu > li:first-child .list-wrap {display: block;}
.family-site .family-menu > li .list-wrap {display: none; padding: 40rem 40rem 54rem; border-top: 1px solid #d9d9d9;}
.family-site .family-menu > li .list-wrap .two-wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem;}
.family-site .family-menu > li .list-wrap .two-wrap > li .two-link {display: flex; justify-content: space-between; padding: 3rem 0; font-size: 18rem; font-family: "InterTight-SemiBold"; line-height: 160%; letter-spacing: 0;}
.family-site .family-menu > li .list-wrap .two-wrap > li .two-link:after {content: ""; flex-shrink: 0; display: inline-block; width: 28rem; height: 28rem; margin-left: 10rem; background: url("/common/en/images/icon-circle-arrow.svg") no-repeat center center / 100% auto;}
/* 인재 */
.family-site .family-menu > li.link {background-color: #002554;}
.family-site .family-menu > li.link .one-dept {padding-right: 90rem;}
.family-site .family-menu > li.link .one-dept::after {width: 28rem; height: 28rem; background-image: url("/common/en/images/icon-circle-arrow-wht.svg");}
.family-site .family-menu > li.link .one-dept {color: #fff;}

@media screen and (max-width: 1024px) {
  .family-site .pop-wrap {right: -100%; width: 100%;}
  .family-site .pop-wrap .pop-head {padding: 20rem; margin-bottom: 9rem;}
  .family-site .pop-wrap .btn-pop-close {top: 20rem; right: 20rem; background-image: url("/common/en/images/ico-close-mob.svg");}
  .family-site .pop-wrap .pop-cont {height: calc(100% - 79rem); padding: 0 10rem 0 20rem;}
  .family-site .pop-wrap .pop-cont .scroll-area {padding: 0 10rem 20rem 0;}
  
  .family-site .family-menu {gap: 5rem;}
  .family-site .family-menu > li {border-radius: 6rem;}
  .family-site .family-menu > li .one-dept {padding: 20rem 50rem 20rem 20rem; font-size: 16rem;}
  .family-site .family-menu > li .one-dept::after {right: 20rem;}
  .family-site .family-menu > li .list-wrap {padding: 20rem;}
  .family-site .family-menu > li .list-wrap .two-wrap {grid-template-columns: repeat(1, 1fr); gap: 10rem;}
  .family-site .family-menu > li .list-wrap .two-wrap > li .two-link {padding: 1rem 0; font-size: 14rem;}
  .family-site .family-menu > li .list-wrap .two-wrap > li .two-link:after {content: ""; flex-shrink: 0; display: inline-block; width: 24rem; height: 24rem; background-image: url("/common/en/images/icon-circle-arrow-s.svg");}
    /* 인재 */
  .family-site .family-menu > li.link {background-color: #003087;}
  .family-site .family-menu > li.link .one-dept {padding-right: 60rem;}
  .family-site .family-menu > li.link .one-dept::after {width: 24rem; height: 24rem; background-image: url("/common/en/images/icon-circle-arrow-wht-s.svg");}
}


/* footer */
footer {display: flex; position:relative; width: 100%; height: 304rem; background: #fff; border-top: 1px solid #E4E4E4; z-index:1;}
footer .inner {display: flex; justify-content: space-between; align-items: center; margin: 0 auto; width: calc(100% - 260rem);}
footer .inner .link-wrap {}
footer .inner .link-wrap .link {font-family: "InterTight-SemiBold"; font-size: 16rem; color: #707070;}
footer .inner .link-wrap .link + .link {margin-left: 30rem;}
footer .inner .link-wrap .link:first-child {font-family: "InterTight-SemiBold"; font-size: 16rem; color: #000;}
footer .inner .info {margin-top: 40rem;}

footer .family-wrap {text-align: right;}
footer .family-wrap .family-btn {position: relative; padding-right: 28rem; font-family: "InterTight-SemiBold"; font-size: 16rem; line-height: 110%; color: #000; transition: rotate .3s ease;}
footer .family-wrap .family-btn::after {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20rem; height: 20rem; background: url(/common/en/images/icon-plus.png) no-repeat 0 / cover; transition: all .3s ease;}
footer .family-wrap .family-btn:hover::after {transform: translateY(-50%) rotate(360deg);}
footer .sns-box {margin-top: 33rem; display: inline-block; width: 40rem; height: 40rem;}
footer .sns-box + .sns-box {margin-left: 10rem;}
footer .sns-box.youtube {background: url(/common/en/images/icon-youtube.png) no-repeat 0 / cover;}
footer .sns-box.insta {background: url(/common/en/images/icon-insta.png) no-repeat 0 / cover;}
footer .sns-box.insta2 {background: url(/common/en/images/icon-insta2.png) no-repeat 0 / cover;}

@media screen and (max-width: 1024px) {
  footer {display: block; padding: 50rem 0; width: 100%; height: auto;}
  footer .inner {display: block; width: calc(100% - 64rem);}
  footer .inner .link-wrap .link {display: block; font-size: 12rem;}
  footer .inner .link-wrap .link + .link {margin: 16rem 0 0 0;}
  footer .inner .info {margin-top: 30rem;}
  footer .family-wrap {display: none;}
  footer .sns-box {margin-top: 30rem;}
  footer .sns-box.youtube {background: url(/common/en/images/icon-youtube.png) no-repeat 0 / cover;}
  footer .sns-box.insta {background: url(/common/en/images/icon-insta.png) no-repeat 0 / cover;}
  footer .sns-box.insta2 {background: url(/common/en/images/icon-insta2.png) no-repeat 0 / cover;}
}


/* typo */
.f-hd {font-family: "HDfont-Bold" !important;}/* 현대서체 사용 시 해당 클래스 추가 */
.f72 {font-size: 72rem; font-family: "HDfont-Bold"; line-height: 130%; letter-spacing: 0;}
.f64 {font-size: 64rem; font-family: "InterTight-Bold"; line-height: 130%; letter-spacing: 0;}
.f56 {font-size: 56rem; font-family: "HDfont-Bold"; line-height: 130%; letter-spacing: 0;}
.f44 {font-size: 44rem; font-family: "InterTight-Bold"; line-height: 140%; letter-spacing: 0;}
.f36 {font-size: 36rem; font-family: "InterTight-SemiBold"; line-height: 140%; letter-spacing: 0;}
.f32 {font-size: 32rem; font-family: "InterTight-Bold"; line-height: 150%; letter-spacing: 0;}
.f28 {font-size: 28rem; font-family: "InterTight-SemiBold"; line-height: 150%; letter-spacing: 0;}
.f24 {font-size: 24rem; font-family: "InterTight-Bold"; line-height: 150%; letter-spacing: 0;}
.f20 {font-size: 20rem; font-family: "InterTight-Regular"; line-height: 160%; letter-spacing: 0;}
.f18 {font-size: 18rem; font-family: "InterTight-Regular"; line-height: 160%; letter-spacing: 0;}
.f16 {font-size: 16rem; font-family: "InterTight-Regular"; line-height: 160%; letter-spacing: 0;}
.f14 {font-size: 14rem; font-family: "InterTight-Regular"; line-height: 160%; letter-spacing: 0;}
.f12 {font-size: 12rem; font-family: "InterTight-Regular"; line-height: 160%; letter-spacing: 0;}
.fw-bold {font-family: "InterTight-SemiBold" !important;}
.fw-exbold {font-family: "InterTight-Bold" !important;}
.fw-medium {font-family: "InterTight-Medium" !important;}
.fw-regular {font-family: "InterTight-Regular" !important;}
.t-align-c{text-align: center !important;}
.t-align-l{text-align: left !important;}
.color-red {color: #FF0000 !important;}
.blue-txt{color:#003087 !important}

.blue-txt-w > *:not(:first-child){margin-top:5rem;}

@media (max-width: 1024px){
  .f72 {font-size: 36rem;}
  .f64 {font-size: 30rem;}
  .f56 {font-size: 28rem;}
  .f44 {font-size: 24rem;}
  .f36 {font-size: 24rem;}
  .f32 {font-size: 18rem;}
  .f28 {font-size: 20rem;}
  .f24 {font-size: 18rem;}
  .f20 {font-size: 14rem;}
  .f18 {font-size: 14rem;}
  .f16 {font-size: 14rem;}
  .f14 {font-size: 12rem;}
  .f12 {font-size: 12rem;}
}


/* 서브페이지 타이틀 영역 */ 
#cBody {width: 100%; overflow: hidden;}
#subBody {position: relative; padding: 300rem 0 200rem;}
#subBody > h2.f64 {position:relative; top:var(--top); width: 1164rem; margin: 0 auto 60rem; font-family: "InterTight-Bold"; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
#subBody > h2.f64.active {opacity: 1; top:0;}
#subBody h3.f24 {position:relative; top:var(--top); width: 1164rem; margin: 60rem auto 0; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
#subBody h3.f24.active {opacity: 1; top:0; transition-delay:0.15s}
#subBody.short-type {padding: 240rem 0 88rem;}
#subBody.pdt-300 {padding: 300rem 0 200rem;}
#subBody.none-pd {padding: 0;}
.inner {margin: 0 auto; width: 1164rem;}
.inner.none-pd {padding-bottom: 0;}
.inner.business {width: 1400rem;}
.inner.business.scroll-motion {opacity: var(--opacity); position:relative; top: var(--top); transition-duration: .7s;}
.inner.business.active {opacity: 1; top:0;}
.sticky-title {z-index: 999; position: fixed; top: 100rem; width: 100%; border-bottom: 1px solid #E4E4E4; background-color: #fff; transition: top .3s ease;}
.sticky-title.active {top: 0;}
.sticky-title .sticky-wrap {position: relative; margin: 0 auto; width: 1164rem;}
.sticky-title .title-wrap {margin: 0 auto; padding: 30rem 0; width: 932rem;}
.sticky-title .title-wrap .title {text-align: center; line-height: 150%;}
.sticky-title .title-wrap .date {margin-top: 10rem; line-height: 160%; text-align: center; color: #707070;}
.sticky-title .btn-wrap{display:flex; align-items: center; column-gap: 10rem; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.sticky-title .btn-wrap > *{width:40rem; height:40rem; border-radius:50%; border:none;}
.sticky-title .btn-wrap .share-btn{background:url("/common/en/images/icon-detail-view-share.svg") no-repeat center center #F4F4F4}
.sticky-title .btn-wrap .print-btn{background:url("/common/en/images/icon-detail-view-print.svg") no-repeat center center #F4F4F4}

.sticky-title.active .title-wrap .title{font-size:18rem;}

.sticky-title.fixed{top: 0;}/* 2024-11-28 */

@media (max-width: 1024px){
  #subBody {padding: 140rem 0 100rem;}
  #subBody > h2.f64 {width: calc(100% - 40rem); margin: 0 auto 30rem;}
  #subBody h3.f24 {width: calc(100% - 40rem); margin: 0 auto;}
  #subBody.short-type {padding: 140rem 0 50rem;}
  #subBody.detail {padding: 336rem 0 100rem;}
  #subBody.pdt-300 {padding: 140rem 0 0;}
  .inner {width: calc(100% - 40rem);}
  .inner:has(.tab-area.swiper) {width:100%;}
  .inner .tab-area.swiper {padding:0 20rem;}
  .inner.business {width: calc(100% - 40rem);}
  .sticky-title {top: 70rem; width: 100%;}
  .sticky-title .sticky-wrap {width: 100%;}
  .sticky-title .title-wrap {padding: 20rem 35rem 20rem 45rem; width: 100%;}
  .sticky-title .title-wrap .date{margin:17rem 0 8rem;}
  .sticky-title .btn-wrap{column-gap: 0; right:20rem; top:auto; bottom:20rem; transform:translateY(0);}
  .sticky-title .btn-wrap > *{width:34rem; height:34rem; border-radius:50%; border:none;}
  .sticky-title .btn-wrap .print-btn{display:none;}
}


/* 스크롤  */
.scrl::-webkit-scrollbar {width: 4px;} 
.scrl::-webkit-scrollbar-track {background: 0; border-radius: 50px;}
.scrl::-webkit-scrollbar-thumb {background: #C9C6C2; border-radius: 50px;}


/* 검색결과 없음 */
.no-list {text-align: center; margin-top: 160rem; opacity: var(--opacity); transform: translateY(100rem); transition-duration: 1s;}
.no-list.active {opacity: 1; top:0;}
.no-list .txt-mb {background: url("/common/en/images/ico-no-list.svg") no-repeat top center; padding-top: 120rem; background-size: 80rem;}
@media screen and (max-width: 1024px) {
  .no-list {margin-top: 120rem;}
  .no-list .txt-mb {padding-top: 76rem; background-size: 60rem;}
}


/* 첨부파일 */
.file-area {margin-bottom: 60rem; display: flex;}
.file-area p {font-weight: 700; margin-right: 20rem; color: #63666a;}
.file-area div a {display: block;}
.file-area div a span {color: #63666a; border-bottom: 1px solid #fff;}
.file-area div a:hover span {border-bottom: 1px solid #63666A;}
.file-area div a + a {margin-top: 16rem;}
@media screen and (max-width: 1024px) {
  .file-area {display: block; margin-bottom: 32rem;}
  .file-area p {margin-bottom: 16rem; margin-right: 0;}
}

/* form - input 라디오 */
.inp-wrap {position: relative;}
.inp-wrap label {display: flex; align-items: center; justify-content: center; width: 100%; height: 60rem; border-radius: 4rem; text-align: center; cursor: pointer;}
.custom-radio-area .form-radio input[type=radio]:checked + label {color: #fff; background: hsl(202, 16%, 27%);}
.inp-group {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 10rem; row-gap: 10rem;}
.reservation-box input[type="radio"] {z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.011;}
.reservation-box input[type="radio"] + label {position: relative; display: flex; justify-content: center; align-items: center; padding: 24rem 0; border: 1px solid #000; border-radius: 4px; font-size: 16rem; font-family: "InterTight-SemiBold"; line-height: 160%; color: #000; background: #fff; cursor: pointer;}
.reservation-box input[type="radio"]:checked + label {background: #003087; color: #fff;}
.reservation-box input[type="radio"] + label::before {content: ""; position: absolute; top: 50%; left: 54rem; transform: translateY(-50%); display: none; width: 16rem; height: 16rem; background: url(/common/en/images/icon-check3.png) no-repeat 0 / cover;}
.reservation-box input[type="radio"]:checked + label::before {display: block;}
.reservation-box input[type="radio"]:disabled + label {background: #f4f4f4; border: 0; color: #707070;}
.reservation-box input[type="radio"]:focus-within + label {border: 2px solid #000;}
.check-area .check-wrap input[type=checkbox] {flex-shrink: 0; margin-top: 4rem; width: 20rem; height: 20rem; border-radius: 50%; border: 1px solid hsl(202, 16%, 27%); transition: border 0.2s ease-in; position: absolute; top: 0; left: 0; width: max(24rem, 15px); height: max(24rem, 15px); opacity: .001;}
.check-wrap label {position: relative; padding-left: 30rem; cursor: pointer; color: #707070;}
.check-wrap label:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20rem; height: 20rem; background: url(/common/en/images/icon-check4-off.png) no-repeat center / cover;}
.check-wrap input[type="checkbox"]:checked + label {color: #000;}
.check-wrap input[type="checkbox"]:checked + label:before {background: url(/common/en/images/icon-check4.png)no-repeat center / cover;}

@media (max-width: 1024px){
  .check-wrap label {padding-left: 21rem;}
  .check-wrap label:before {width: 16rem; height: 16rem;}
}

label {position: relative;}
label .essential {position: absolute; top: 0; right: -9rem; display: inline-block; width: 4rem; height: 26rem; background: url(/common/en/images/icon-dot.png) no-repeat center / cover;}
.form-input {display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 auto; position: relative;}
.form-label {display: flex; align-items: center; flex-shrink: 0; font-family: "InterTight-Regular"; font-size: 16rem; line-height: 160%; color: #000;}
.form-input input {position: relative; width: 100%; height: 54rem; border-radius: 4px; border: 1px solid #d0d3d4; font-family: "InterTight-Regular", sans-serif; font-size: 16rem; line-height: 160%; overflow: hidden;}
.form-input input::placeholder {font-family: "InterTight-Regular", sans-serif; font-size: 16rem; line-height: 160%; color:#}
.form-input input.focus {border: 2px solid #000;}

.form-group.wrap {flex-wrap: wrap;}
.form-group:not(.file-form) {position: relative; display: flex;}
.form-group .form-input input {margin-top: 10rem; padding: 0 16rem;}
.form-group .form-input + .form-input {margin-left: 10rem;}
.form-group + .form-group {margin-top: 50rem;}
.form-group .form-file {margin-top: 10rem;}
.form-group .form-file input {margin-top: 0;}
.form-group .form-file .btn-wrap {margin-left: 10rem;}
.form-input .form-file .file-name {z-index: -1;}
.form-group .form-file + .input-btn-wrap {top: unset; bottom: 6rem; right: 110rem; display: none;}
.form-group .form-file + .input-btn-wrap .btn-erase {display: block;}
.form-file input[type="file"] {opacity: 0.011;}
.form-group .bullet-list-wrap {margin-top: 10rem;}

@media (max-width: 1400px){
  .form-input span.error-msg {bottom: -36rem;}
}

@media (max-width: 1024px){
  .form-label {font-size: 14rem;}
  .form-input input {padding: 0 14rem; height: 50rem; font-size: 12rem;}
  .form-input input::placeholder {font-size: 12rem;}
  .form-input.wth-btn input {width: 100%;}
  .form-input.wth-btn a {height: max(40rem, 36px);}
  .form-input.srch {max-width: 100%; width: 100%;}
  .form-input span.error-msg {bottom: -24rem;}
  .form-group .form-input + .form-input {margin: 10rem 0 0 0;}
  .form-group .form-input input::placeholder {font-size: 14rem;}
  .form-group + .form-group {margin-top: 30rem;}
  .form-group:not(.file-form) {display: block;}
}


/* form - file */
.form-file {position: relative; display: flex; align-items: center;}
.form-file input[type="file"] {position: absolute; top: 0; left: 0; width: 0; height: 0;}
.form-file label {width: 134rem; height: max(50rem, 40px); border: 1px solid #ADAAA5; border-radius: 4rem; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.form-file label span {padding-left: 28rem; background: url("/common/en/images/ico-down.svg") no-repeat 0 center; background-size: max(20rem, 13px); font-family: "InterTight-Medium";}
.form-file label span.on {background: url("/common/en/images/ico-reload.svg") no-repeat 0 center; background-size: max(20rem, 13px);}
.form-file .list {display: inline-flex; align-items: center; margin-left: 16rem;}
.form-file .list .file-name {color: #B4AB9E;}
.form-file .list .del {display: block; width: 14rem; height: 14rem; background: url("/common/en/images/ico-del.svg") no-repeat; background-size: cover; margin-left: 5rem; cursor: pointer;}

@media (max-width: 600px){
  .form-file label {height: max(40rem, 36px); width: 120rem;}
  .form-file label span {background-size: 16rem; padding-left: 24rem;}
}

/* form-terms */
.terms-area {padding: 20rem 10rem 20rem 20rem; margin: 16rem 0 0; width: 100%; font-size: 16rem; color: #858e93; font-weight: 700; line-height: 160%; border-radius: 4px; border: 1px solid #e3e4e5; background: rgba(227, 228, 229, 0.2);}
.terms-area .scroll-area {overflow-y: auto; max-height: 206rem;}
.terms-area .scroll-area::-webkit-scrollbar {width: 4rem;}
.terms-area .scroll-area::-webkit-scrollbar-thumb {height: 140rem; background: #c4c4c4; border-radius: 100rem;}
.terms-area .bullet-list-wrap {margin-top: 0;}
.terms-area .bullet-list-wrap + .bullet-list-wrap {margin-top: 30rem;}

@media screen and (max-width: 1024px) {
  .terms-area {margin-top: 0;}
  .terms-area .bullet-list {font-size: 14rem;}
  .terms-area .bullet-title {font-size: 14rem;}
}

/* form - select */
.form-select {position: relative; display: inline-block; width: 100%; vertical-align: top;}
.form-select .form-select-arr {position: relative; background: #fff;}
.form-select .form-select-arr select {overflow:hidden; position: relative; padding: 0 40rem 0 14rem; width: 100%; height: 50rem; color: #000; font-family: "InterTight-Regular", sans-serif; font-size: 14rem; text-overflow: ellipsis; white-space: nowrap; background-color: transparent; border: 1px solid #D9D9D9; border-radius: 4px; z-index: 1; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-size: 14rem;}
.form-select .form-select-arr select option {width: 100%; color: #000;}
.form-select .form-select-arr:after {content: ""; display: block; position: absolute; right: 16rem; top: 50%; margin-top: -10rem; transform: rotate(0); width: 20rem; height: 20rem; background: url("/common/en/images/ico-select.svg") no-repeat center center / 20rem auto; transition: transform .3s ease;}
.form-select .form-select-arr.disabled {background-color: #f5f5f5;}
.form-select-text .form-select-arr {position: relative; display: inline-block;}
.form-select-text .form-select-arr select {overflow:hidden; width: 300rem; padding: 0 40rem 0 14rem; font-family: "InterTight-Regular"; font-size: max(16rem, 14px); line-height: 160%; color: #2F3633; text-overflow: ellipsis; white-space: nowrap; background: rgba(0, 0, 0, 0); border: 0; border-bottom: 1px solid #E0E0E0;} /* 텍스트형 */
.form-select-text .form-select-arr:after {content: ''; display: block; position: absolute; right: 0; top: 50%; margin-top: -10rem; width: 20rem; height: 20rem; background: url("/common/en/images/ico-arrow-down.svg") center center/max(20rem, 20px) no-repeat;}
.form-select.active .form-select-arr:after {transform: rotate(180deg);}
.form-select.selected select {color: #1f1b1c;}
.form-select select:disabled {border: 1px solid #E0E0E0;}
.form-select.selected .form-select-arr select{border:1px solid #252525;}

@media screen and (max-width: 1024px) {
  .form-select .form-select-arr select {padding: 0 24rem 0 12rem; height: 40rem; width:100%; font-size: 12rem;}
  .form-select .form-select-arr:after {right: 10rem; margin-top: -8rem; width: 16rem; height: 16rem; background-size: 16rem auto;}
}


/* form - textarea */
.form-textarea {width: 100%;}
.form-textarea textarea {width: 100%; min-height: 200rem; padding: 16rem; border-radius: 4rem; color: #000; border: 1px solid #ddd; font-size: max(16rem, 14px); resize: none; background: 0; border-radius: 4rem; font-family: "InterTight-Medium"; background:#fff;}
.form-textarea textarea:focus {color: #222; outline: 2px solid #000;}
.form-textarea textarea:disabled {color: #999999; background-color: #F6F6F6; border: 1px solid #C9C6C2;}
.form-textarea textarea::placeholder {font-size: max(16rem, 14px); color: #707070; font-family: "InterTight-Regular";}
.form-textarea textarea::-webkit-scrollbar {width: 6rem;}
.form-textarea textarea::-webkit-scrollbar-thumb {background: #999;}
.form-textarea textarea::-webkit-scrollbar-track {background: #CCCCCC;}
.form-textarea.error textarea {border: 1px solid #961E1E;}
.form-textarea.error .msg {color: #961E1E;}
.form-textarea .txt-ssr {color: #7B7B7B; padding-left: 8rem; position: relative; margin-top: 16rem;}
.form-textarea .txt-ssr::before {content: ""; width: 2px; height: 2px; background: #7B7B7B; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.textarea {margin-top: 5rem;}

@media screen and (max-width: 1024px) {
  .form-textarea textarea::placeholder {font-size: 14rem;}
}

@media (max-width: 600px){
  .form-textarea textarea {padding: 12rem;}
  .form-textarea textarea::placeholder {font-size: 12rem;}
  .form-textarea .txt-ssr {margin-top: 10rem;}
}


/* form - radio/check */
.form-checkbox {position: relative;}
.form-checkbox + .form-checkbox {margin-top: 16rem;}
.form-checkbox input {position: absolute; top: 0; left: 0; width: max(24rem, 15px); height: max(24rem, 15px); opacity: .001;}
.form-checkbox input + label {position: relative; display: inline-block; padding-left: max(40rem, 30px); min-height: max(24rem, 15px); width:auto; color: #333; font-size: max(16rem, 14px); line-height: 24rem; background: url("/common/en/images/icon-check4-off.png") left top/max(24rem, 15px) no-repeat; z-index: 1; font-family: "InterTight-Medium"; cursor: pointer;}
.form-checkbox input + label .red {color: #EE3B22;}
.form-checkbox input + label .grey {color: #7B7B7B;}
.form-checkbox input:focus + label {outline: 2px solid #000;}
.form-checkbox input:checked + label {background: url("/common/en/images/icon-check4.png") left top/max(24rem, 15px)  no-repeat;}
.form-checkbox input:disabled + label {background: url("/common/en/images/ico-chk.svg") left top/max(24rem, 15px)  no-repeat;}
.form-checkbox input:disabled:checked + label {background: url("/common/en/images/ico-chk-on.svg") left top/max(24rem, 15px)  no-repeat;}
.form-checkbox .tool-icon{padding:0; width:max(20rem, 20px); height:max(20rem, 15px); vertical-align: middle;}
.form-checkbox.white-ver input + label {background: url("/common/en/images/ico-chk-white.svg") left top/max(24rem, 15px)  no-repeat;}
.form-checkbox.white-ver input:checked + label {background: url("/common/en/images/ico-chk-on.svg") left top/max(24rem, 15px)  no-repeat;}

.form-checkbox.no-txt {height: max(20rem, 20px);}
.form-checkbox.no-txt input + label {padding-left: max(20rem, 20px); background-position: left top;}


/* form - table */
.form-table + .form-table {margin-top: 120rem !important;}
.form-table .table-tit {font-size: max(30rem, 28px); font-family: "InterTight-SemiBold"; margin-bottom: 40rem;}
.form-table .table-stit {font-size: max(20rem, 18px); margin-bottom: 20rem; font-family: "InterTight-Medium";}
.form-table .table-desc {color: #919593; margin-bottom: 20rem;}
.form-table table {border-top: 2px solid rgba(21, 21, 21, 0.80);}
.form-table table.active {top: 0; opacity: 1;}
.form-table table tr {color: #63666A; border-bottom: 1px solid #F0F0F0;}
.form-table table tr td a {text-decoration: underline; color: inherit;}
.form-table table tr td a.download {display: block; width: max(28rem, 24px); height: max(28rem, 24px); background: url("/common/en/images/ico-download-28.svg") no-repeat; margin: 0 auto; background-size: max(28rem, 24px); text-decoration: none;}

.form-table table tr th {padding: 32rem 20rem; font-size: max(18rem, 17px); font-family: "InterTight-SemiBold"; text-align: right; color: #000;}
.form-table table tr th:first-of-type {text-align: center;}
.form-table table thead tr th {color: #000;}
.form-table table tbody tr td {padding: 32rem 20rem; text-align: right; word-break: break-all;}
.form-table table tbody th + td {color: #63666a;}
.form-table table tbody tr td.bold {font-family: "InterTight-SemiBold"; color: #000; font-size: max(18rem, 17px);}
.form-table.bg table tr:nth-last-of-type(3n) {background: #F5F5F5;}
.form-table.bg table tr:nth-last-of-type(3n) td {font-family: "InterTight-SemiBold"; font-size: max(18rem, 17px);}
.form-table.center table tr th {text-align: center;}
.form-table.center table tbody tr td {text-align: center;}
.form-table .noti {text-align: right; color: #919593; margin-top: 24rem;}
.form-table.left table tr th {text-align: center;}
.form-table.left table tbody tr td {text-align: center;}
.form-table.left table tbody tr td:nth-last-of-type(2) {text-align: left;}
.form-table.left table tbody tr td:nth-last-of-type(1) {text-align: left;}
.form-table + .paging {margin-top: 56rem;}


@media screen and (max-width: 1024px) {
  .form-table .table-wrap {overflow-x: auto; overflow-y: hidden;}
  .form-table table {width: 954rem;}
  .form-table table tr th {width: 150rem; padding: 24rem 10rem; font-size: max(17rem, 14px);}
  .form-table table tbody tr td {padding: 24rem 10rem;}
  .form-table .table-tit {margin-bottom: 32rem;}
  .form-table .table-stit {margin-bottom: 16rem;}
  .form-table .table-desc {margin-bottom: 16rem;}
  .form-table + .form-table {margin-top: 80rem !important;}
  .form-table .noti {text-align: left; margin-top: 16rem;}
  .form-table + .paging {margin-top: 40rem;}
  .form-table .table-wrap::-webkit-scrollbar {height: 4rem; background: #E0E0E0;}
  .form-table .table-wrap::-webkit-scrollbar-thumb {background: #00AD1D; background-clip: padding-box;}
}


/* form - search */
.form-srch {position: relative; max-width: 712rem; margin: 0 auto;}
.form-srch .form-input {width: 100%; border: 1px solid #D9D9D9; border-radius: 4rem; padding: 0 14rem; height: 50rem; position: relative; display: flex;}
.form-srch .form-input input {border: 0; width: calc(100% - 60rem); height: 100%;}
.form-srch .form-input input::placeholder {color: #707070;}
.form-srch .srch-bt {right: 14rem; width: 20rem; height: 20rem; background: url("/common/en/images/ico-srch.svg") no-repeat; background-size: contain; position: absolute; top: 15rem;}
.form-input .input-btn-wrap {position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; right: 44rem; transform: translateY(-50%);}
.form-input .input-btn-wrap button {display: none; width: 20rem; height: 20rem; background: url(/common/en/images/ico-close.svg) no-repeat center center / 100% 100%;}

@media screen and (max-width: 1024px) {
  .form-srch .form-input {padding:0 12rem; height: 40rem;}
  .form-srch .form-input input{padding:0; width:calc(100% - 47rem)}
  .form-srch .srch-bt {top: 12rem; right: 12rem; width: 16rem; height: 16rem; background-image: url("/common/en/images/ico-srch-mob.svg");}
  .form-input .input-btn-wrap {right: 34rem;}
  .form-input .input-btn-wrap button {width: 16rem; height: 16rem;}

}


/* btn */
button {box-sizing: border-box;}
button:focus-visible {outline: 2px solid #000;}
button.primary{position: relative; font-family: "InterTight-SemiBold"; font-size: 16rem; line-height: 110%}
button.round-border {padding: 0 63rem 0 30rem; height: 60rem; border: 1px solid #fff; border-radius: 100rem; color: #fff;}
button.round-border::after {content: ""; position: absolute; top: 50%; right: 30rem; transform: translateY(-50%); display: block; width: 12rem; height: 12rem; background: url(/common/en/images/icon-btn-arrow.png) no-repeat 0 / cover;} 
a.round-border-type {position: relative; padding: 20rem 63rem 20rem 30rem; display: inline-block; height: 60rem; border: 1px solid #fff; font-family: "InterTight-SemiBold"; border-radius: 100rem; color: #fff;}
a.round-border-type::after {content: ""; position: absolute; top: 50%; right: 30rem; transform: translateY(-50%); display: block; width: 12rem; height: 12rem; background: url(/common/en/images/icon-btn-arrow.png) no-repeat 0 / cover;} 
a.round-arrow-type {position: absolute; bottom: 60rem; display: inline-block; width: 58rem; height: 58rem; background: url(/common/en/images/icon-arrow-white-large.png) no-repeat 0 / cover;}
button.btn-arrow {flex-shrink: 0; width: 28rem; height: 28rem;}
button.btn-arrow.disable {display: none;}
button.btn-arrow img {width: 100%; height: 100%; object-fit: cover;}
button.btn-arrow.prev-btn {transform: rotate(180deg);}
.download-btn {display: flex; align-items: center; text-align: left; color: #707070;}
.download-btn .img-box {flex-shrink: 0; margin-right: 10rem; width: 40rem; height: 40rem; display: block; background: url("/common/en/images/ico-down.svg") no-repeat; background-size: contain; transition-duration: .4s;}
.download-btn .img-box + span {white-space: wrap;}
.download-btn:hover .img-box {background: url("/common/en/images/ico-down-on.svg") no-repeat; background-size: contain;}
button.btn-top {z-index: 9999; position: fixed; bottom: 40rem; right: 40rem; width: 64rem; height: 64rem; background: url(/common/en/images/icon-btn-top.png) no-repeat center / cover;}
button.btn-prev-page {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 30rem; height: 20rem; background: url(/common/en/images/icon-arrow-prev.png) no-repeat center / cover;}
a.attached {overflow:hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14rem; line-height: 160%; color: #707070; word-break: break-all;}
button.attached {overflow:hidden; width:100%; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 14rem; line-height: 160%; color: #707070; word-break: break-all;}
button.btn-prev {position: relative; display: inline-block; padding-left: 40rem;}
button.btn-prev::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(180deg); width: 20rem; height: 20rem; background: url(/common/en/images/icon-lang-arrow.png) no-repeat center / cover;}
button.btn-next {position: relative; display: inline-block; padding-left: 40rem;}
button.btn-next::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20rem; height: 20rem; background: url(/common/en/images/icon-lang-arrow.png) no-repeat center / cover;}
button.btn-list {margin-top: 60rem; width: 150rem; height: 60rem; text-align: center; font-size: 16rem; font-family: "InterTight-SemiBold"; border-radius: 4rem; background: #000; color: #fff;} 
a.btn-down {position: relative; display: flex; align-items: center; height: 40rem; padding-left: 50rem; color: #fff;}
a.btn-down::before {content: ""; z-index: 1; position: absolute; left: 0; top: 50%; width: 40rem; height: 40rem; background: url(/common/en/images/ico-circle-download.svg) no-repeat center center / contain; transform: translateY(-50%);}
a.btn-share {position: relative; display: flex; align-items: center; height: 40rem; padding-left: 50rem; color: #fff;}
a.btn-share::before {content: ""; z-index: 1; position: absolute; left: 0; top: 50%; width: 40rem; height: 40rem; background: url(/common/en/images/ico-circle-share.svg) no-repeat center center / contain; transform: translateY(-50%);}
a.btn-bg-bk {display: block; min-width: 80rem; padding: 16rem; font-family: "InterTight-SemiBold"; color: #fff; line-height: 110%; text-align: center; border-radius: 4rem; background-color: #000;}
.btn-wrap .file-add {margin-top: 0; padding: 0 16rem; display: flex; align-items: center; justify-content: center; min-width: 82rem; width: auto; height: 54rem; text-align: center; font-size: 16rem; border-radius: 4rem; background: #000; color: #fff;}

@media screen and (max-width: 1024px) {
  a.btn-down {padding-left: 40rem;}
  a.btn-down::before {width: 30rem; height: 30rem;}
  a.btn-share {padding-left: 40rem;}
  a.btn-share::before {width: 30rem; height: 30rem;}
  .btn-wrap .file-add {min-width:74rem; height: 50rem; font-size: 12rem;}
}

.btn-wrap.primary {display: flex; justify-content: center;}
.btn-wrap.primary.small .btn-list {margin-top: 0; padding: 0 16rem; min-width: 82rem; width: auto; height: 50rem;}
.btn-wrap.pdf-down button {position: relative; display: flex; justify-content: flex-start; padding: 20rem; width: 180rem; height: 100rem; border-radius: 4rem; background: #002554; color: #fff; overflow: hidden;}
.btn-wrap.pdf-down button::before {content: ""; position: absolute; top: 0; right: 0; display: block; width: 58rem; height: 100%; background: url(/common/en/images/icon-pdf-btn01.png) no-repeat 0 / cover;}
.btn-wrap.pdf-down.type-two button::before {background: url(/common/en/images/icon-pdf-btn02.png) no-repeat 0 / cover;}
.btn-wrap.pdf-down button::after {content: ""; position: absolute; bottom: 20rem; left: 20rem; width: 14rem; height: 14rem; background: url(/common/en/images/icon-download.png) no-repeat 0 / cover;}
.btn-wrap.dual button{margin-top:100rem;}
.btn-wrap.dual button:nth-child(1) {background: #F4F4F4; color: #000;}
.btn-wrap.dual button + button {margin-left: 10rem;}

@media (max-width: 1024px){
  .btn-wrap .round-border-type {padding: 13rem 44rem 14rem 20rem; height: 40rem;}
  .btn-wrap a.round-border-type::after {right: 20rem;}
  a.round-arrow-type {bottom: 30rem; width: 40rem; height: 40rem;}
  button.btn-prev-page {left: 20rem; width: 20rem; height: 13rem;}
  button.btn-prev {padding-left: 30rem;}
  button.btn-next {padding-left: 30rem;}
  button.btn-list {margin-top: 30rem; width: 100rem; height: 40rem; font-size: 12rem;}
  button.btn-top {right: 16rem; bottom: 50rem; width: 40rem; height: 40rem; background: url(/common/en/images/icon-btn-top-mob.png) no-repeat center / cover;}
  .btn-wrap.primary.small .btn-list {min-width: 62rem; height: 40rem;}
  
  .btn-wrap.pdf-down button {padding: 20rem 20rem 20rem 44rem; align-items: center; width: 142rem; height: 70rem;}
  .btn-wrap.pdf-down button::before {width: 42rem;}
  .btn-wrap.pdf-down button::after {bottom: unset; top: 50%; left: 20rem; transform: translateY(-50%);}
  .btn-wrap.dual button {margin-top: 50rem;}
}


/* tab */
.tab-area {overflow: hidden; opacity: var(--opacity); position:relative; top: var(--top); transition-duration: .7s; position: relative;}
.tab-area.active {opacity: 1; top:0; transition-delay:0.15s;}
.tab-area .swiper-slide {width: auto; font-family: "InterTight-SemiBold"; display: flex; justify-content: center; min-width: 114rem; padding: 19rem 27rem; border-radius: 2rem; color: #000; position: relative; border-right: 1px solid #e4e4e4;}
.tab-area .swiper-slide:first-child {border-left: 1px solid #e4e4e4;}
.tab-area .swiper-slide.on {background: #000; color: #fff;}

.tab-area2 {margin-top: 40rem; overflow: hidden; opacity: var(--opacity); position:relative; top: var(--top); transition-duration: .7s; position: relative;}
.tab-area2.active {opacity: 1; top:0; transition-delay:0.15s}
.tab-area2 .swiper-slide {width: auto; font-family: "InterTight-SemiBold"; display: flex; padding: 20rem 40rem; border-radius: 2rem; color: #000; position: relative; background: #F9F9F9; border: 1px solid transparent;}
.tab-area2 .swiper-slide.on {border: 1px solid #000; color: #000; background: #fff;}

.busi-tab {overflow: hidden; position: absolute; top: 50%; right: 220rem; transform: translateY(-50%); width: 430rem;}
.busi-tab .swiper-wrapper {display: block; width: 100%;}
.busi-tab .swiper-slide {position: relative; padding: 28rem 25rem; width: 430rem; height: 78rem; text-align: left; font-family: "InterTight-SemiBold"; font-size: 20rem; line-height: 110%; background: rgba(0, 0, 0, 0.40); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.50); border-top: 0; transition: all .6s ease;}
.busi-tab .swiper-slide:first-child {border-top: 1px solid rgba(255, 255, 255, 0.5);}
.busi-tab .swiper-slide.on {background: #008233;}
.busi-tab .swiper-slide::after {content: ""; position: absolute; right: 22rem; top: 50%; transform: translateY(-50%); width: 18rem; height: 18rem; background: url(/common/en/images/icon-busi-plus.png) no-repeat 0 / cover; opacity: 0; visibility: hidden; transition: all .6s ease;}
.busi-tab .swiper-slide.on::after {opacity: 1; visibility: visible;}

.line-swiper{position:relative; top:var(--top); opacity:var(--opacity); transition:all 0.7s ease;}
.line-swiper.active{top:0; opacity:1;}
.line-swiper .swiper-slide{display:flex; margin-right:30rem; width:auto;}
.line-swiper .swiper-slide .txt{position:relative; margin-right:5rem; font-family: "InterTight-SemiBold"; color:#707070; transition:color 0.4s ease;}
.line-swiper .swiper-slide .txt:after{display:block; content:""; position:absolute; bottom:-3rem; left:0; width:100%; height:2px; background:#000; opacity:0; transition:opacity 0.4s ease;}
.line-swiper .swiper-slide .num{font-family: "InterTight-SemiBold"; font-size:12rem; line-height:160%; color:#707070; transition:color 0.4s ease;}
.line-swiper .swiper-slide:last-child{margin-right:0;}
.line-swiper .swiper-slide.on .txt{color:#000;}
.line-swiper .swiper-slide.on .txt:after{opacity:1;}
.line-swiper .swiper-slide.on .num{color:#000}

@media (max-width: 1024px){
  .tab-area .swiper-slide {padding: 13rem 16rem; min-width: 82rem;}
  
  .tab-area2 {margin-top: 20rem; padding:0 20rem;}
  .tab-area2 .swiper-slide {padding: 14rem 20rem 12rem;}

  .busi-tab {width: 100%;}
  .busi-tab .swiper-slide {height: auto; font-size: 12rem;}
  .busi-tab .swiper-slide + .swiper-slide{border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.5);}
  .busi-tab .swiper-slide::after{right:16rem;}

  .line-swiper .swiper-slide{margin-right:20rem;}
}


/* content-wrap */
.content-wrap {position: relative; margin: 100rem auto 0; width: calc(100% - 756rem);}
.content-wrap.long-type {margin: 175rem auto 0;}
@media (max-width: 1024px){
  .content-wrap {margin-top: 30rem; width: calc(100% - 40rem);}
  .content-wrap.long-type {margin: 100rem auto 0;}
}


/* accordion */
.accordion {border-top: 2px solid #000; opacity: var(--opacity); transform: translateY(100rem); transition-duration: .7s;}
.accordion.active {opacity: 1; top:0;}
.accordion li {background: lavender; border-bottom: 1px solid #F0F0F0;}
.accordion li .question {width: 100%; min-height: 94rem; display: flex; align-items: center; background: #fff; position: relative; padding: 24rem 72rem 24rem 24rem; color: #919593; transition: all .7s; position: relative;}
.accordion li.on .question {font-family: "InterTight-SemiBold"; color: #000;}
.accordion li .question::after {content: ""; display: block; width: max(32rem, 30px); height: max(32rem, 30px); background: url("/common/en/images/ico-acco-bk.svg") no-repeat; position: absolute; right: 24rem; transition: all .4s; opacity: .5; background-size: cover;}
.accordion li.on .question::after {transform: rotate(-180deg); opacity: 1;}
.accordion li .answer {padding: 32rem; background: #F5F5F5; display: none;}

@media screen and (max-width: 1024px) {
  .accordion li .question {min-height: 74rem; padding: 24rem 36rem 24rem 0;}
  .accordion li .question::after {right: 0;}
  .accordion li .answer {padding: 24rem;}
}


/* 팝업 */
.layer-popup.first-show {display: block;}

.layer-popup {display: none;}
.layer-popup {z-index: 999999; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);}
.layer-popup .pop-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; overflow: hidden;}
.layer-popup .pop-bottom {position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 50rem; background-color: rgba(0, 0, 0, 0.4);}
.layer-popup .pop-bottom p.f20 {font-family: "InterTight-SemiBold"; max-width: 1532rem; color: #fff;}
.layer-popup .pop-bottom .r-btn-wrap {display: flex; gap: 40rem;}
.layer-popup .btn-pop-close {width: 30rem; height: 30rem; background: url("/common/en/images/ico-close-wh.svg") no-repeat center center / 100% auto;}

/* popup type1 - full */
.layer-popup.full-pop .pop-wrap{overflow-y:auto; position:relative; width:100%; height:100%; background:transparent;}
.layer-popup.full-pop .pop-wrap::-webkit-scrollbar {width: 4px;} 
.layer-popup.full-pop .pop-wrap::-webkit-scrollbar-track {background: 0; border-radius: 50px;}
.layer-popup.full-pop .pop-wrap::-webkit-scrollbar-thumb {background: #C9C6C2; border-radius: 50px;}
.layer-popup.full-pop .pop-wrap .pop-cont{display: flex; align-items: center; justify-content: center; min-height: 100%;}
.layer-popup.full-pop .btn-pop-close {position: absolute; right:30rem; top: 30rem;}

/* popup type2 - center  */
.layer-popup.center-pop .pop-wrap {display: flex; flex-direction: column; max-width: 80%; max-height: 90%; border-radius: 12rem; overflow: hidden;}
.layer-popup.center-pop .pop-wrap .pop-cont {overflow: auto;}
.layer-popup.center-pop .pop-wrap .pop-head {flex-shrink: 0;}
.layer-popup.center-pop .pop-wrap .pop-cont::-webkit-scrollbar {width: 4px;}
.layer-popup.center-pop .pop-wrap .pop-cont::-webkit-scrollbar-track {background: 0; border-radius: 50px;}
.layer-popup.center-pop .pop-wrap .pop-cont::-webkit-scrollbar-thumb {background: #C9C6C2; border-radius: 50px;}
.layer-popup.center-pop .btn-pop-close {position: absolute; right:30rem; top: 30rem;}

/* popup type3 - fixed */
.layer-popup.fixed-pop .pop-wrap {display: flex; flex-direction: column-reverse; max-width: 80%; max-height: 80%; border-radius: 12rem; overflow: hidden;}
.layer-popup.fixed-pop .pop-wrap .pop-cont {overflow: auto;}
.layer-popup.fixed-pop .pop-wrap .pop-cont::-webkit-scrollbar {width: 4px;}
.layer-popup.fixed-pop .pop-wrap .pop-cont::-webkit-scrollbar-track {background: 0; border-radius: 50px;}
.layer-popup.fixed-pop .pop-wrap .pop-cont::-webkit-scrollbar-thumb {background: #C9C6C2; border-radius: 50px;}
.layer-popup.fixed-pop .pop-wrap .pop-fix {display: flex; justify-content: flex-end; align-items: center; gap: 30rem; flex-shrink: 0; height: 70rem; padding: 0 20rem; border-bottom: 1px solid #d9d9d9; background-color: #f4f4f4;}
.layer-popup.fixed-pop .pop-wrap .pop-fix .form-checkbox label {padding-left: 21rem; color: #707070; background: url(/common/en/images/ico-checkbox.svg) no-repeat left center / 16rem 16rem;}
.layer-popup.fixed-pop .pop-wrap .pop-fix .form-checkbox label {min-height: 16rem;  font-family: "InterTight-Regular"; font-size: 14rem;}
.layer-popup.fixed-pop .pop-wrap .pop-fix .form-checkbox input:checked + label {background-image: url(/common/en/images/ico-checkbox-ck.svg);}
.layer-popup.fixed-pop .btn-pop-close {background-image: url("/common/en/images/ico-close-bk.svg");}

@media screen and (max-width: 1024px) {
  .layer-popup .btn-pop-close{background-image: url("/common/en/images/ico-close-wh-mob.svg");}

  /* popup type1 - full */
  .layer-popup.full-pop .btn-pop-close {right: 20rem; top: 20rem;}
  
  /* popup type2 - center  */
  .layer-popup.center-pop .pop-wrap {width: 100%; max-width: unset; max-height: 100%;} 
  .layer-popup.center-pop .pop-wrap .pop-head {height: 70rem;}
  .layer-popup.center-pop .btn-pop-close{right:20rem; top:20rem; background-image: url("/common/en/images/ico-close-mob.svg");}
  
  /* popup type3 - fixed */
  .layer-popup.fixed-pop .pop-wrap {width: calc(100% - 40rem) !important; max-width: unset;} 
  .layer-popup.fixed-pop .pop-wrap .pop-fix {justify-content: space-between;}
  .layer-popup.fixed-pop .btn-pop-close{right:20rem; top:20rem; background-image: url("/common/en/images/ico-close-mob.svg");}

}

@media screen and (max-width: 600px) {
  .layer-popup .pop-bottom {display: block; padding: 20rem;}
	.layer-popup .pop-bottom .r-btn-wrap {gap: 20rem; margin-top: 20rem;}
}


/* 유튜브 */
.youtube-cont {height: 100%;}
.youtube-cont {display:flex; align-items: center; justify-content: center; flex-direction: column; padding:100rem 0; margin:0 auto; width:928rem;}
.youtube-cont .youtube-area{position:relative; padding-top:56.25%; width:100%;}
.youtube-cont .youtube-area iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.youtube-cont .youtube-txt{margin-top:30rem; padding:30rem; width:100%; min-height:250rem; background:#fff; border-radius:12rem;}
.youtube-cont .youtube-txt .txt-box{padding:20rem 10rem 20rem 20rem; margin-top:20rem; height:150rem; border:1px solid #e4e4e4; border-radius:4rem;}
.youtube-cont .youtube-txt .txt-box .scroll-area{padding:0 10rem 0 0; height:100%; overflow-y: auto;}
.youtube-cont .youtube-txt .txt-box .scroll-area::-webkit-scrollbar {display:block; width: 4px;} 
.youtube-cont .youtube-txt .txt-box .scroll-area::-webkit-scrollbar-track {background: 0; border-radius: 50px;}
.youtube-cont .youtube-txt .txt-box .scroll-area::-webkit-scrollbar-thumb {background: #C9C6C2; border-radius: 50px;}

/* 갤러리 */
.gallery-cont img {max-width: 1400rem;}

/* 그룹50년사 */
.layer-popup:has(.history-pop) .pop-wrap {width: 1400rem; border-radius: 0;}
.layer-popup:has(.history-pop) .pop-wrap .pop-cont {padding: 120rem;}
.history-pop .tit {margin-bottom: 30rem;}
.history-pop .file-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 13rem; margin-top: 98rem;}
.history-pop .file-list .item .cover-box {position: relative; height: 266rem;}
.history-pop .file-list .item .cover-box::before {content: ""; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 180rem; border-radius: 12rem; background-color: #E6EAF3;}
.history-pop .file-list .item .cover-box p {position: absolute; top: 0; left: 0;} 
.history-pop .file-list .item .cover-box .img {width: 120rem; height: 100%; margin: 0 auto; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.10);}
.history-pop .file-list .item .cover-box .img img {width: 100%; height: 100%; object-fit: cover;}
.history-pop .file-list .item .file-box {display: flex; gap: 10rem; justify-content: center; margin-top: 30rem;}
.history-pop .file-list .item .file-box a {position: relative; display: inline-flex; align-items: center; margin-top: .5px; padding: 20rem 30rem; line-height: 110%; border: 1.5px solid #000; border-radius: 100rem;}
.history-pop .file-list .item .file-box a::after {content: ""; display: block; width: 18rem; height: 18rem; margin-left: 15rem; background: url("") no-repeat center center / 100% auto;}
.history-pop .file-list .item .file-box a:first-child::after {background-image: url("/common/en/images/icon-plus.svg");}
.history-pop .file-list .item .file-box a:last-child::after {background-image: url("/common/en/images/icon-download.svg");}

/* 브라우저 업데이트 */
.layer-popup:has(.broswer-list) .pop-wrap {width: 928rem;}
.layer-popup:has(.broswer-list) .pop-tit {margin-bottom: 20rem;}
.layer-popup:has(.broswer-list) .pop-tit h2 {font-family: "InterTight-SemiBold"; text-align: left;}
.layer-popup:has(.broswer-list) .pop-cont {padding: 40rem; text-align: center;}
.layer-popup:has(.broswer-list) .pop-cont .broswer-list {display: flex; align-items: center; justify-content: center; gap: 10rem; margin-bottom: 40rem;}
.layer-popup:has(.broswer-list) .pop-cont .broswer-link {flex: 1; padding: 50rem 0; font-family: "InterTight-SemiBold"; border-radius: 12rem; background-color: #f8fafb;}
.layer-popup:has(.broswer-list) .pop-cont .broswer-link::before {content: ""; display: block; width: 60rem; height: 60rem; margin: 0 auto 10rem; background: url("")  no-repeat center center / 100% auto;}
.layer-popup:has(.broswer-list) .pop-cont .broswer-link.chrome::before {background-image: url(/common/en/images/ico-chrome.png);}
.layer-popup:has(.broswer-list) .pop-cont .broswer-link.edge::before {background-image: url(/common/en/images/ico-edge.png);}
.layer-popup:has(.broswer-list) .pop-cont .broswer-link.firefox::before {background-image: url(/common/en/images/ico-firefox.svg);}
.layer-popup:has(.broswer-list) .pop-cont .broswer-list a span::after {content:""; display: inline-block; width: 10rem; height: 10rem; margin-left: 5rem; background: url(/common/en/images/ico-link-bk.svg) no-repeat center center / 100% auto;}
.layer-popup:has(.broswer-list) .pop-cont p.f16 {color: #707070;}
.layer-popup:has(.broswer-list) .pop-cont p.f18 {margin-top: 20rem; color: #707070;}
.layer-popup:has(.broswer-list) .pop-cont p.f18 b {color: #000;}

@media screen and (max-width: 1024px) {
  /* 유튜브 */
	.layer-popup.full-pop .pop-wrap .youtube-cont{align-items: flex-start; padding:70rem 0; width:100%; min-height:100%;}
	.layer-popup.full-pop .pop-wrap .youtube-txt{display:flex; flex-direction: column; padding:20rem; margin:20rem auto 0; height:auto; width:calc(100% - 40rem); border-radius:4rem;}
	.layer-popup.full-pop .pop-wrap .youtube-txt .txt-box{flex-grow: 1;}

  /* 갤러리 */
	.gallery-cont {padding:70rem 0; max-width: unset; width: 100%; height: 100%;}
  .gallery-cont img {max-width: unset; width: 100%;}

  /* 그룹50년사 */
  .layer-popup:has(.history-pop) .pop-wrap {width: 100%;}
  .layer-popup:has(.history-pop) .pop-wrap .pop-cont {padding: 30rem 20rem 100rem; overflow: auto;}
  .history-pop .file-list {display: flex; flex-direction: column; gap: 50rem; margin-top: 50rem;}
  .history-pop .file-list .item .cover-box {height: 200rem;}
  .history-pop .file-list .item .cover-box::before {height: 114rem; border-radius: 4rem;}
  .history-pop .file-list .item .cover-box .img {width: 90rem;}
  .history-pop .file-list .item .file-box a {margin-top: 0; padding: 14rem 20rem; border: 1px solid #000;}
  .history-pop .file-list .item .file-box a::after {width: 14rem; height: 14rem; margin-left: 10rem;}
}

@media screen and (max-width: 600px) {
   /* 브라우저 업데이트 */
  .layer-popup:has(.broswer-list) .pop-cont {padding: 20rem;}
  .layer-popup:has(.broswer-list) .pop-cont .broswer-list {flex-direction: column; gap: 5rem; margin-bottom: 20rem;}
  .layer-popup:has(.broswer-list) .pop-cont .broswer-link {width: 100%; padding: 19rem;}
  .layer-popup:has(.broswer-list) .pop-cont .broswer-link::before {width: 30rem; height: 30rem;}
  .layer-popup:has(.broswer-list) .pop-cont p.f18 {margin-top: 10rem;}
  .layer-popup:has(.broswer-list) .pop-cont p.f16 br {display: none;}
}


/* 메인팝업 */
.layer-popup.main-pop .pop-wrap {width: 720rem; overflow: visible; border-radius: 0; background-color: transparent;}
.layer-popup.main-pop .pop-cont {overflow: visible;}
.layer-popup.main-pop .pop-fix {border-radius: 12rem 12rem 0 0; overflow: hidden;}
.layer-popup.main-pop .swiper-slide {overflow-y: auto; width: 100%; height: 100%;}
.layer-popup.main-pop .swiper-slide::-webkit-scrollbar {display:block; width: 4px;} 
.layer-popup.main-pop .swiper-slide::-webkit-scrollbar-track {background: 0; border-radius: 50px;}
.layer-popup.main-pop .swiper-slide::-webkit-scrollbar-thumb {background: #C9C6C2; border-radius: 50px;}

.layer-popup.main-pop .swiper-container {height: 430rem; border-radius: 0 0 12rem 12rem; overflow: hidden;} 
.layer-popup.main-pop .swiper-slide.link a {display: block; width: 100%; height: 100%;}
.layer-popup.main-pop .swiper-slide img {width: 100%; min-height: 100%; object-fit: cover;} 
.layer-popup.main-pop .swiper-slide.custom {padding: 80rem; width: 100%; height: 100%; background-color: #fff;} 
.layer-popup.main-pop .swiper-slide.custom .custom-wrap{word-wrap: break-word;}
.layer-popup.main-pop .swiper-slide.custom .custom-wrap .title {margin-bottom: 20rem;}
.layer-popup.main-pop .swiper-slide.custom .custom-wrap .round-border-type {color: #000; border: 1px solid #000;}
.layer-popup.main-pop .swiper-slide.custom .custom-wrap .round-border-type {margin-top: 50rem; padding: 12rem 22rem; height: 45rem;}
.layer-popup.main-pop .swiper-slide.custom .custom-wrap .round-border-type::after {display: none;}
.layer-popup.main-pop .swiper-control {position: absolute; left: 50%; transform: translateX(-50%); bottom: -80rem; display: flex; align-items: center; gap: 10rem;}
.layer-popup.main-pop .swiper-arrow {flex-shrink: 0; position: unset; width: 50rem; height: 50rem; margin: 0; background: url(/common/en/images/icon-swiper-arrow.png) no-repeat center center / 20rem auto;}
.layer-popup.main-pop .swiper-arrow::after {display: none;}
.layer-popup.main-pop .swiper-button-prev {order: 1;}
.layer-popup.main-pop .swiper-button-next {order: 3; transform: rotate(180deg);}
.layer-popup.main-pop .swiper-pagination {order: 2; position: unset; display: inline-block; color: #fff;}
.layer-popup.main-pop .swiper-pagination .swiper-pagination-current {margin-right: 7rem;}
.layer-popup.main-pop .swiper-pagination .swiper-pagination-total {margin-left: 7rem;}

@media screen and (max-width: 1024px) {
	.layer-popup.main-pop .swiper-pagination.f16 {font-size: 16rem;}
  .layer-popup.main-pop .swiper-slide.custom {padding: 40rem;}
	.layer-popup.main-pop .swiper-slide.custom .custom-wrap .title {margin-bottom: 30rem; font-size: 32rem;}
	.layer-popup.main-pop .swiper-slide.custom .custom-wrap .txt {font-size: 13rem;}
	.layer-popup.main-pop .swiper-slide.custom .custom-wrap .round-border-type {margin-top: 60rem; font-size: 13rem;}
  .layer-popup.main-pop .swiper-control {bottom: -60rem;}
}


/* table */
table {margin-top: 20rem;}
table thead tr th{padding: 20rem 0; font-family: "InterTight-SemiBold"; font-size: 16rem; line-height: 160%; background: #F8FAFB; border-top: 1px solid #000; border-left: 1px solid #E4E4E4;}
table thead tr th:first-child {border-left: 0;}
table thead tr th .reference-txt {font-size: 14rem; line-height: 160%; color: #707070;}
table thead tr.row-border th {border-top: 1px solid #E4E4E4; border-left: 1px solid #E4E4E4;}
table tbody tr td {padding: 20rem 15rem; text-align: center; font-family: "InterTight-Regular"; font-size: 16rem; line-height: 160%; color: #707070; border: 1px solid #E4E4E4;}
table tbody tr th {padding:0 5rem; line-height: 160%; border: 1px solid #E4E4E4; color: #000;}
table tbody tr th:first-child {border-left: 0;}
table tbody tr.row-border th {border-top: 1px solid #E4E4E4; border-left: 1px solid #E4E4E4;}
table tbody tr td:first-child {border-left: 0;}
table tbody tr td:last-child {border-right: 0;}
table tbody tr.darken td {color: #000;}
table .link {text-decoration: underline;}
.table-wrap {opacity: var(--opacity); position:relative; top: var(--top); transition-duration: .7s;}
.table-wrap.active {opacity: 1; top:0;}
@media (max-width: 1024px) {
  table {width: 200%;}
  table thead tr th {font-size: 14rem;}
  table tbody tr td {font-size: 14rem;}
  .content > .table-wrap{margin-top:50rem;}
  .table-wrap .scroll-area{overflow-x: scroll;}
}


/* iframe */
/* 2025-02-10 */
.viewport {width: 100%; height: 100%; border: none; overflow: hidden;}
.viewport-wrap {width: 100%;}
/* #viewp-wrap1 {height: 100vh;}
#viewp-wrap2 {height: 100vh;}
#viewp-wrap3 {height: 100vh;}
#viewp-wrap4 {height: 100vh;}
#viewp-wrap5 {height: 100vh;}
#viewp-wrap6 {height: 100vh;} */

@media screen and (max-width: 1024px) {
  /* #viewp-wrap1 {margin-top:50rem;}
  #viewp-wrap2 {margin-top:50rem;}
  #viewp-wrap3 {margin-top:50rem;}
  #viewp-wrap4 {margin-top:50rem;}
  #viewp-wrap5 {margin-top:50rem;}
  #viewp-wrap6 {margin-top:50rem;} */
}
/* // 2025-02-10 */

/* 가로 모드일 때 */
.only-vertical-view {display: none;}
.only-vertical-view {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 999999; background: #fff;}
.only-vertical-view .cont-area {height: 100%; display: flex; align-items: center; justify-content: center;}
.only-vertical-view .cont-area .tit {position: relative; padding-top: 160rem; font-size: 14rem; font-family: "Pretendard-Regular"; line-height: 160%; color:#003087; text-align: center;}
.only-vertical-view .cont-area .tit::before {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 180rem; height: 140rem; border-radius: 24rem; background: url("/common/en/images/icon-vertical-phone.svg") no-repeat center / 81rem auto #F8FAFB ;}
.only-vertical-view .cont-area .tit span{font-family: "Pretendard-Bold";}

@media (orientation: landscape) and (pointer: coarse) {
  @media (max-height: 414px) and (max-width: 1023px) {
    .only-vertical-view.on {display: block;}
    body.vertical {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
  }
}


/* button */
a.btn-down {position: relative; display: flex; align-items: center; height: 40rem; padding-left: 50rem; color: #fff;}
a.btn-down::before {content: ""; z-index: 1; position: absolute; left: 0; top: 50%; width: 40rem; height: 40rem; background: url(/common/en/images/ico-circle-download.svg) no-repeat center center / contain; transform: translateY(-50%);}
a.btn-share {position: relative; display: flex; align-items: center; height: 40rem; padding-left: 50rem; color: #fff;}
a.btn-share::before {content: ""; z-index: 1; position: absolute; left: 0; top: 50%; width: 40rem; height: 40rem; background: url(/common/en/images/ico-circle-share.svg) no-repeat center center / contain; transform: translateY(-50%);}

/* sns */
.sns-wrap{display:flex;}
.sns-btn{width:40rem; height:40rem; border-radius: 50%;}
.sns-btn.insta{background:url("/common/en/images/icon-instagram-white.svg") no-repeat center center/14rem 14rem #002554}
.sns-btn.youtube{background:url("/common/en/images/icon-youtube-white.svg") no-repeat center center/16rem 12rem #002554}
.sns-btn.linkedin{background:url("/common/en/images/icon-linkedin-white.svg") no-repeat center center/12rem 12rem #002554}


/* 해시태그 */
.keyword-list {display: flex; flex-wrap: wrap; justify-content: center;}
.keyword-list a {padding: 5rem 15rem; margin-top: 2rem; color: #707070; border: 1px solid #E4E4E4; border-radius: 20rem;}
.keyword-list a + a {margin-left: 2rem;}

@media screen and (max-width: 1024px) {
  .sns-btn{width:34rem; height:34rem;}

  a.btn-down {padding-left: 40rem;}
  a.btn-down::before {width: 30rem; height: 30rem;}
  a.btn-share {padding-left: 40rem;}
  a.btn-share::before {width: 30rem; height: 30rem;}
}

/* calender */
.content-wrap:has(.calende-tit-wrap){margin:60rem auto 0;}
.calende-tit-wrap .title br {display: none;}
.calende-tit-wrap .info-wrap {display: flex; align-items: center; margin-top: 10rem;}
.calende-tit-wrap .info-wrap .info-list.dot::before {content: "・"; color: #707070;}
.calende-tit-wrap .info-wrap .info-list .txt {color: #707070;}
.calende-tit-wrap .info-wrap .info-list .txt + a {margin-left: 10rem;}
.calende-tit-wrap .info-wrap .empty {margin: 0 10rem; display: inline-block;}

.calender-wrap {margin-top: 20rem; display: flex; justify-content: space-between;}
.calender {padding: 50rem; width: 603rem; border-radius: 12rem; border: 1px solid #E4E4E4;}
.calender .top-box {position: relative;}
.calender .top-box .month-wrap {display: flex; justify-content: center; align-items: center;}
.calender .top-box .month-wrap .month-btn {display: inline-block; width: 20rem; height: 20rem; background: url(/common/en/images/icon-calender-arrow.png) no-repeat center / cover;}
.calender .top-box .month-wrap .month-btn.next {margin-left: 10rem;}
.calender .top-box .month-wrap .month-btn.prev {transform: rotate(180deg); margin-right: 10rem;}
.calender .top-box .month-wrap .month-btn.disabled {cursor: auto; transform: rotate(180deg); background: url(/common/en/images/icon-calender-arrow-disabled.png) no-repeat center / cover;}
.calender .top-box .month-wrap .month-btn.prev.disabled {transform: rotate(0); margin-right: 10rem;}
.calender .top-box .today-btn {position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 0 16rem; height: 40rem; display: block; font-size: 14rem;font-family: "InterTight-SemiBold"; line-height: 110%; border-radius: 4rem; border: 1px solid #000;}
.calender .top-box .today-btn.disabled {display: none;}
.calender .days-wrap {position: relative; width: 100%;}
.calender .week-box {display: flex; margin-top: 20rem;}
.calender .week-box .week {padding: 10rem 0; width: calc(100%/7); text-align: center;}
.calender .days {display: none; grid-template-columns: repeat(7, 1fr); column-gap: 4rem; width: 100%; height: auto;}
.calender .days.active {display: grid;}
.calender .days-list {position: relative; padding: 10rem 0 40rem; height: 72rem; color: #707070; border-radius: 4rem;}
.calender .days-list .label {position: absolute; bottom: 0; left: 0; display: none; width: 100%;}
.calender .days-list .today {background: #F4F4F4; color: #707070;}
.calender .days-list .reservation {background: #F8FAFB; color: #003087;}
.calender .days-list.reserve-on {color: #000;}
.calender .days-list.color-red.reserve-on .reservation {display: none !important;}
.calender .days-list.today-on .today {display: block;}
.calender .days-list.reserve-on .reservation {display: block;}
.calender .days-list.checked {background: #003087 url(/common/en/images/icon-check2.png) no-repeat 50% 37rem / 20rem; color: #fff;}
.calender .days-list.checked .today {z-index: -1;}
.calender .days-list.checked .reservation {z-index: -1;}
.calender-btn .btn-list{width: 200rem;}

.reservation-box {padding: 0 70rem; display: flex; align-items: center; width: calc(100% - 620rem); border-radius: 12rem; border: 1px solid #E4E4E4;}
.reservation-box .none-reserve-title {display: none; padding-top: 200rem; width: 100%; text-align: center;}
.reservation-box .none-reserve-title .txt {margin-top: 10rem; color:#707070}
.reservation-box .meeting-box {width: 100%;}
.reservation-box .meeting-box .date-box {margin-top: 10rem;}
.reservation-box .meeting-box .check-box {margin-top: 40rem; width: 100%;}
.reservation-box .meeting-box .check-box .inp-group {margin-top: 10rem;}
.reservation-box.none-reserve {background: url(/common/en/images/img-none-reservation.png) no-repeat 50% 108rem / 200rem;}
.reservation-box.none-reserve .none-reserve-title {display: block;}
.reservation-box.none-reserve .meeting-box {display: none;}

@media screen and (max-width: 1024px) {
  .content-wrap:has(.calende-tit-wrap){margin:30rem auto 0;}
  .calende-tit-wrap {display: block;}
  .calende-tit-wrap .info-wrap {display: block; margin-top: 20rem;}
  .calende-tit-wrap .info-wrap:has(.info-list.dot) .info-list:not(.dot) {padding-left: 14rem;}
  .calende-tit-wrap .info-wrap .empty {display: none;}
  .calende-tit-wrap .info-wrap .info-list + .info-list {margin-top: 5rem;}
  .calender-wrap {display: block;}
  .calender {padding: 40rem 10rem; width: 100%;}
  .reservation-box {padding: 50rem 20rem; margin-top: 10rem; align-items: flex-start; width: 100%;}
  .reservation-box .none-reserve-title {padding-top: 150rem;}
  .reservation-box.none-reserve {background: url(/common/en/images/img-none-reservation.png) no-repeat 50% 50rem / 130rem;}
  .reservation-box .meeting-box .date-box .data {margin-top: 10rem;}
  .reservation-box .meeting-box .check-box .inp-group {grid-template-columns: repeat(1, 1fr);}

  .calender .days-list {height: 60rem;}
  .calender .days-list .today {font-size: 10rem;}
  .calender .days-list .reservation {font-size: 10rem;}
  .calender .top-box .today-btn {padding: 0 10rem; height: 30rem; font-size: 12rem;}
  .calender-btn .btn-list{width: 150rem;}
}
@media screen and (max-width: 600px) {
  .calende-tit-wrap .title br {display: block;}
}

/* 불릿리스트 */
.bullet-list-wrap {margin: 0; width: 100%;}
.bullet-list {position: relative; padding-left: 11rem; margin: 0; color: #707070;}
.bullet-list::before {content: ""; position: absolute; top: 10rem; left: 0; display: block; width: 2rem; height: 2rem; background: #707070; border-radius: 50%;}
.bullet-list-wrap.dashed .bullet-list::before {content: ""; position: absolute; top: 12rem; left: 0; width: 6rem; height: 1rem; border-radius: 0;}
.bullet-list-wrap.none-effect .bullet-list {padding-left: 0;}
.bullet-list-wrap.none-effect .bullet-list::before {display: none;}

@media screen and (max-width: 1024px) {
  .bullet-list {padding-left: 10rem; font-size: 12rem;}
  .bullet-list .bullet-title {font-size: 14rem;}
  .bullet-list::before {top: 8rem;}
}

/* flow txt 모션 공통 */
.rolling-wrap{z-index: 0; position: absolute; left: 50%; transform:translateX(-50%); display: flex; width: 100vw; height:200rem; overflow: hidden;}
.rolling-con {position:absolute; left:0; display:flex; column-gap: 100rem;}
.rolling-text {font-family: "InterTight-ExtraBold"; font-size: 200rem; line-height: 100%; text-transform: uppercase; color: #00AD1D; white-space: nowrap;}

@media screen and (max-width: 1024px) {
  .rolling-wrap{height:100rem;}
  .rolling-con {opacity: .8; column-gap: 50rem;}
  .rolling-text {font-size: 100rem;}
}

/* fold 모션 공통 */
.unfold-area {margin: 0 auto; width: calc(100% - 80rem); height:400vh;}
.unfold-area .unfold-wrap{padding-top: 70rem; height: 100vh;}
.unfold-area .unfold-list {position: relative; width: 100%; height: 80rem; border-radius: 24rem; overflow: hidden; transition: height .6s ease;}
.unfold-area .unfold-list + .unfold-list {margin-top: 5rem;}
.unfold-area .unfold-list .unfold-bg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.unfold-area .unfold-list .unfold-bg img {width: 100%; height: 100%; object-fit: cover;}
.unfold-area .unfold-list .txt-wrap {position: absolute; top: 240rem; left: 225rem; opacity: 0;}
.unfold-area .unfold-list .sub-tit {font-family: "InterTight-Bold"; font-size: 24rem; line-height: 150%; color: #fff;}
.unfold-area .unfold-list .title {margin-top: 30rem; font-family: "HDfont-Bold"; font-size: 56rem; line-height: 130%; color: #fff;}
.unfold-area .unfold-list .btn-wrap {margin-top: 90rem;}
.unfold-area .unfold-list.active {height: calc(100% - 230rem);}
.unfold-area .unfold-list.active .txt-wrap {top: 180rem; opacity: 1; transition: opacity .6s ease, top .6s ease;}

.unfold-area.small-ver{width:100%;}
.unfold-area.small-ver .unfold-wrap{padding-top: 60rem;}
.unfold-area.small-ver .unfold-list .txt-wrap{left:220rem; top:60%; transform:translateY(-50%);}
.unfold-area.small-ver .unfold-list .title{margin-top:0; font-family: "InterTight-Bold";}
.unfold-area.small-ver .unfold-list .f18{margin-top:30rem; font-family: "InterTight-SemiBold"; color:#fff;}
.unfold-area.small-ver .unfold-list.active .txt-wrap {top:50%;}
.unfold-area .unfold-list.active {height: calc(100% - 220rem);}

@media screen and (max-width: 1024px) {
  .our-business {padding-top: 115rem;}
  .our-business .unfold-area {padding-top: 30rem; width: calc(100% - 32rem)}
  .unfold-area{height:auto;}
  .unfold-area .unfold-wrap{height: auto;}
  .unfold-area .unfold-list {top:var(--top); height: 300rem; border-radius: 20rem; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
  .unfold-area .unfold-list.active{top:0; opacity:1;}
  .unfold-area .unfold-list .txt-wrap {top:50%; transform:translateY(-50%); padding:0 50rem; width: 100%; opacity:1;}
  .unfold-area .unfold-list.active .txt-wrap{top:50%;}
  .unfold-area.small-ver .unfold-list .txt-wrap{left:0; transform:translateY(-50%)}
  .unfold-area.small-ver .unfold-list.active .txt-wrap{top:50%;}
  .unfold-area .unfold-list .sub-tit {font-size: 18rem;}
  .unfold-area .unfold-list .title {font-size: 28rem;}
  .unfold-area .unfold-list .btn-wrap {margin-top: 60rem; font-size: 12rem;}
  .unfold-area .unfold-list .unfold-bg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
  .unfold-area .unfold-list.active {height: 400rem;}

  .unfold-area.small-ver .unfold-wrap{padding-top: 30rem;}
  .unfold-area.small-ver .unfold-list .title {font-size: 24rem;}
  .unfold-area.small-ver .unfold-list .f18 {margin-top: 20rem;}
}

/* 커지는 이미지 내 텍스트 생기는 공통 모션 */
#subBody:has(.in-txt-visual){padding-bottom:0;}
#subBody:has(.in-txt-visual) .bottom-fixed{position:relative; width:100%; height:100vh;}
#subBody:has(.in-txt-visual) .bottom-fixed:before{display:none; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.in-txt-visual .bottom-fixed .txt-wrap{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1164rem; z-index:1;}
.in-txt-visual .bottom-fixed > .img{display:none; overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%;}
.in-txt-visual .bottom-fixed > .img-dimd{display:none; overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; background:rgba(0,0,0,0.5)}
.in-txt-visual .bottom-fixed > .img img{width:100%; height:100%; object-fit: cover;}
.in-txt-visual .bottom-fixed > .img video{width:100%; height:100%; object-fit: cover;}
.in-txt-visual .bottom-fixed .txt-wrap > *{color:#fff;}
.in-txt-visual .bottom-fixed .txt-wrap .f24{position:relative; top:80px; opacity:0; transition:top 1s ease, opacity 1s ease;}
.in-txt-visual .bottom-fixed .txt-wrap .f56{margin-top:60rem; position:relative; top:80px; opacity:0; transition:top 1s ease, opacity 1s ease;}
.in-txt-visual .bottom-fixed .txt-wrap .f20{margin-top:20rem; font-family: "Pretendard-Bold"; position:relative; top:80px; opacity:0; transition:top 1s ease, opacity 1s ease;}
.in-txt-visual .bottom-fixed .motion-visual .txt-div{display:none;}
.in-txt-visual .bottom-fixed.active > .img{display:block; z-index:-1}
.in-txt-visual .bottom-fixed.active > .img-dimd{display:block; z-index:-1}
.in-txt-visual .bottom-fixed.active .txt-wrap .f24{top:0; opacity:1;}
.in-txt-visual .bottom-fixed.active .txt-wrap .f56{top:0; opacity:1; transition-delay:0.15s}
.in-txt-visual .bottom-fixed.active .txt-wrap .f20{top:0; opacity:1; transition-delay:0.3s}
.in-txt-visual .bottom-fixed.high-index > .img{z-index:1}
.in-txt-visual .bottom-fixed.high-index > .img-dimd{z-index:1}
.in-txt-visual .bottom-fixed.high-index > .txt-wrap{z-index:2}
#subBody:has(.in-txt-visual) .bottom-fixed.active:before{display:block;}
.in-txt-visual{height:300vh;}
.in-txt-visual .fixed-visual{position:relative; width:100%; height:100vh;}
.in-txt-visual .fixed-visual.fixed{transform:translate(0,0) !important}
.in-txt-visual .fixed-visual.fixed .motion-visual{position:fixed; top:0; left:0; transform:translate(0,0)}
.in-txt-visual .motion-visual{overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 520rem); height:58vh; border-radius:12rem;}
.in-txt-visual .motion-visual .img{width:100%; height:100%;}
.in-txt-visual .motion-visual .img img,
.in-txt-visual .motion-visual .img video{width:100%; height:100%; object-fit: cover;}
.in-txt-visual .motion-visual .img-dimd{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.2;}
.in-txt-visual .motion-visual .txt-div{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1164rem;}
.in-txt-visual .motion-visual .txt-div > *{color:#fff;}
.in-txt-visual .motion-visual .txt-div .f24{position:relative; top:var(--top); opacity:var(--opacity); transition:all 0.7s ease;}
.in-txt-visual .motion-visual .txt-div .f56{position:relative; top:var(--top); margin-top:60rem; opacity:var(--opacity); transition:all 0.7s ease;}
.in-txt-visual .motion-visual .txt-div .f20{position:relative; top:var(--top); margin-top:20rem; font-family: "Pretendard-Bold"; opacity:var(--opacity); transition:all 0.7s ease;}
.in-txt-visual .motion-visual .txt-div .more-btn{display:inline-block; position:relative; top:var(--top); padding:17rem 30rem; margin-top:60rem; border-radius:30rem; border:1px solid #fff; opacity:var(--opacity); transition:all 0.7s ease;}
.in-txt-visual .motion-visual .txt-div .more-btn span{padding-right:23rem; font-family: "Pretendard-Bold"; background:url("/common/en/images/icon-plus-white.svg") no-repeat right center;}
.in-txt-visual .motion-visual .txt-div.active > *{top:0; opacity:1;}
.in-txt-visual .motion-visual .txt-div.active > *:nth-child(2){transition-delay:0.1s}
.in-txt-visual .motion-visual .txt-div.active > *:nth-child(3){transition-delay:0.2s}
.in-txt-visual .motion-visual .txt-div.active > *:nth-child(4){transition-delay:0.3s}
.in-txt-visual .motion-visual .txt-div.active.hide > *{top:-70rem; opacity:0;}

@media screen and (max-width: 1024px) {
  .in-txt-visual .bottom-fixed .txt-wrap{display:none;}
  .in-txt-visual .bottom-fixed .motion-visual .txt-div{display:block;}
  .in-txt-visual .bottom-fixed .txt-wrap{width:calc(100% - 80rem);}
  .in-txt-visual .bottom-fixed .txt-wrap .f56{margin-top:50rem;}
  .in-txt-visual .bottom-fixed .txt-wrap .f20{margin-top:30rem;}
  .in-txt-visual .motion-visual{width:calc(100% - 40rem); height:80vh}
  .in-txt-visual .motion-visual .txt-div{width:calc(100% - 80rem);}
  .in-txt-visual .motion-visual .txt-div .f56{margin-top:50rem;}
  .in-txt-visual .motion-visual .txt-div .f20{margin-top:30rem;}
  .in-txt-visual .motion-visual .txt-div .more-btn{margin-top:50rem; padding:14rem 25rem;}
}


/* sustainability 상단 비주얼 모션 */
.fill-txt-visual.short{height:400vh;}
.fill-txt-visual.middle{height:800vh;}
.fill-txt-visual.long{height:1100vh;}
.fill-txt-visual .bottom-fixed{position:relative; width:100%; height:100vh;}
.fill-txt-visual .bottom-fixed > .img{display:none; position:absolute; bottom:0; left:-1px; width:100%; height:100%;}
.fill-txt-visual .bottom-fixed > .img img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.fill-txt-visual .bottom-fixed > .img .txt-wrap{position:absolute; top:50%; left:calc(50% - 1px); transform:translate(-50%, -50%); width:calc(100% - 60rem); text-align:  center; color:#fff !important;}
.fill-txt-visual .bottom-fixed > .img .txt-wrap .f44{margin-top:20rem; text-transform: uppercase;}
.fill-txt-visual .bottom-fixed > .img:has(.floor-txt-div):after{display:block; content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.fill-txt-visual .bottom-fixed > .img .floor-txt-div{position:absolute; bottom:260rem; width:1383rem; color: #fff !important; z-index:1;}
.fill-txt-visual .bottom-fixed.active > .img{display:flex; align-items: flex-end; padding-bottom:260rem; z-index:-1}
.fill-txt-visual .bottom-fixed.high-index > .img{z-index:1;}
.fill-txt-visual .fixed-visual{position:relative; width:100%; height:100vh;}
.fill-txt-visual .motion-visual{overflow:hidden; position:absolute; top:50%; left:calc(50% - 1px); transform:translate(-50%, -50%); width:calc(100% - 520rem); height:58vh; border-radius:12rem;}
.fill-txt-visual .motion-visual .img-wrap{position:relative; width:100%; height:100vh;}
.fill-txt-visual .motion-visual .img-wrap .img-div{overflow:hidden; position:absolute; left:0; bottom:0; width:100%; height:0; z-index:1; }
.fill-txt-visual .motion-visual .img-wrap .img-div:nth-child(1){height:100vh;}
.fill-txt-visual .motion-visual .img{position:absolute; left:0; top:0; width:100%; height:100%;}
.fill-txt-visual .motion-visual .img img,
.fill-txt-visual .motion-visual .img video{width:100%; height:100%; object-fit: cover;}
.fill-txt-visual .motion-visual .img-wrap .img-div.rollup .img{top:auto; bottom:0; left: -1px; height:100vh;}
.fill-txt-visual .motion-visual .img-wrap .img-div.rollup .img img{width:calc(100% + 1px);}
.fill-txt-visual .motion-visual .img-dimd{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.2;}
.fill-txt-visual .motion-visual .txt-div{position:absolute; top:50%; left:50%; z-index: 2; transform:translate(-50%, -50%); width:1164rem;}
.fill-txt-visual .motion-visual .txt-div > *{color:#fff;}
.fill-txt-visual .motion-visual .txt-div .f24{position:relative; top:var(--top); opacity:var(--opacity); transition:all 0.7s ease;}
.fill-txt-visual .motion-visual .txt-div .f56{position:relative; top:var(--top); margin-top:60rem; opacity:var(--opacity); transition:all 0.7s ease;}
.fill-txt-visual .motion-visual .txt-div .f20{position:relative; top:var(--top); margin-top:20rem; font-family: "InterTight-SemiBold"; opacity:var(--opacity); transition:all 0.7s ease;}
.fill-txt-visual .motion-visual .txt-div .more-btn{display:inline-block; position:relative; top:var(--top); padding:17rem 30rem; margin-top:60rem; border-radius:30rem; border:1px solid #fff; opacity:var(--opacity); transition:all 0.7s ease;}
.fill-txt-visual .motion-visual .txt-div .more-btn span{padding-right:33rem; font-family: "InterTight-SemiBold"; background:url("/common/en/images/icon-plus-white.svg") no-repeat right center / 18rem auto;}
.fill-txt-visual .motion-visual .txt-wrap{position:absolute; top:55%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 40rem); text-align: center; color:#fff; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.fill-txt-visual .motion-visual .txt-wrap .f44{margin-top:20rem; text-transform: uppercase;}
.fill-txt-visual .motion-visual .txt-wrap.active{top:50%; opacity:1;}
.fill-txt-visual .motion-visual .fill-txt-wrap{display:flex; align-items: flex-end; position:relative; padding-bottom:260rem; margin:100vh auto 0; width:1400rem; height:100vh; z-index:1;}
.fill-txt-visual .motion-visual .fill-txt-wrap:has(.fill-txt-box.active){z-index:5;}
.fill-txt-visual .motion-visual .fill-txt-wrap .fill-txt-box{position:relative; top:var(--top); opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.fill-txt-visual .motion-visual .fill-txt-wrap .fill-txt-box.active{top:0; opacity:1;}
.fill-txt-visual .motion-visual .fill-txt-wrap .fill-txt-box.active.hide{top:-70rem; opacity:0;}
.fill-txt-visual .motion-visual .fill-txt-wrap .floor-txt-div{color:#fff;}
.fill-txt-visual .motion-visual .fill-txt-wrap .floor-txt-div .f24{position:relative; width:100%;}
.fill-txt-visual .motion-visual .fill-txt-wrap .floor-txt-div .f24 > *{width:100%;}
.fill-txt-visual .motion-visual .fill-txt-wrap .floor-txt-div .f24 .fill{overflow:hidden; position:absolute; top:0; left:0; width:0%; height:100%;}
.fill-txt-visual .motion-visual .fill-txt-wrap .floor-txt-div .f24 .fill span{position:absolute; top:0; left:0; width:1400rem; color:#fff;}

.fill-txt-visual .motion-visual .txt-div.active > *{top:0; opacity:1;}
.fill-txt-visual .motion-visual .txt-div.active > *:nth-child(2){transition-delay:0.1s}
.fill-txt-visual .motion-visual .txt-div.active > *:nth-child(3){transition-delay:0.2s}
.fill-txt-visual .motion-visual .txt-div.active > *:nth-child(4){transition-delay:0.3s}
.fill-txt-visual .motion-visual .txt-div.active.hide > *{top:-70rem; opacity:0;}

.fill-txt-visual .motion-visual .txt-div.active.hide{z-index:0;}

@media screen and (max-width: 1024px) {
  .fill-txt-visual.short{height:500vh;}
  .fill-txt-visual .bottom-fixed > .img .floor-txt-div{bottom:50rem; width:calc(100% - 40rem);}
  .fill-txt-visual .bottom-fixed > .img .floor-txt-div .f24{display:inline;}
  .fill-txt-visual .motion-visual{width:calc(100% - 40rem); height:80vh;}
  .fill-txt-visual .motion-visual .txt-div{top:165rem; width:calc(100% - 80rem); transform:translate(-50%, 0)}
  .fill-txt-visual .motion-visual .txt-div .f56{margin-top:50rem;}
  .fill-txt-visual .motion-visual .txt-div .f20{margin-top:30rem;}
  .fill-txt-visual .motion-visual .txt-div .more-btn{margin-top:50rem; padding:14rem 25rem;}
  .fill-txt-visual .motion-visual .txt-div .more-btn span{display:block; padding-right: 24rem; background-size: 15rem auto;}
  .fill-txt-visual .motion-visual .fill-txt-wrap{margin-top:0; padding:0 20rem 50rem; width:100%}
  .fill-txt-visual .motion-visual .fill-txt-wrap .fill-txt-box.active .floor-txt-div .f24 .fill{width:100% !important}
  .fill-txt-visual .motion-visual .fill-txt-wrap .floor-txt-div .f24{display:inline; color:#fff;}
  .fill-txt-visual .motion-visual .fill-txt-wrap  .f24 .fill{display:none;}

  .fill-txt-visual .motion-visual .txt-div.active.hide > *{top:-70rem; opacity:0;}
}


/* half reverse 공통 */
.half-reverse-wrap{margin-top:60rem;}
.half-reverse-wrap .half-reverse-div{display:flex; align-items: center; margin-top:100rem;}
.half-reverse-wrap .half-reverse-div:first-child{margin-top:0;}
.half-reverse-wrap .half-reverse-div:nth-child(2n){flex-direction: row-reverse;}
.half-reverse-wrap .half-reverse-div .img{overflow:hidden; position:relative; top:var(--top); width:600rem; height:360rem; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease; border-radius:12rem;}
.half-reverse-wrap .half-reverse-div .img img{width:100%; height:100%; object-fit: cover;}
.half-reverse-wrap .half-reverse-div .txt-div{position:relative; top:var(--top); padding-left:200rem; width:calc(100% - 600rem); opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.half-reverse-wrap .half-reverse-div:nth-child(2n) .txt-div{padding-left:100rem;}
.half-reverse-wrap .half-reverse-div .txt-div .f18{margin-top:30rem;}
.half-reverse-wrap .half-reverse-div .txt-div:has(.txt-w) .f18{margin-top:10rem;}
.half-reverse-wrap .half-reverse-div .txt-div .txt-w{margin-top:20rem;}
.half-reverse-wrap .half-reverse-div .txt-div .txt-w .f16{margin-top:5rem; color:#707070}
.half-reverse-wrap .half-reverse-div .txt-div .txt-w .f16:first-child{margin-top:0;}
.half-reverse-wrap .half-reverse-div.active .img{top:0; opacity:1;}
.half-reverse-wrap .half-reverse-div.active .txt-div{top:0; opacity:1;}
.half-reverse-wrap .half-reverse-div.active:nth-child(2n-1) .txt-div{transition-delay:0.15s}
.half-reverse-wrap .half-reverse-div.active:nth-child(2n) .img{transition-delay:0.15s}

@media screen and (max-width: 1024px) {
	.half-reverse-wrap{margin-top:30rem;}
	.half-reverse-wrap .half-reverse-div{flex-wrap:wrap; margin-top:50rem;}
	.half-reverse-wrap .half-reverse-div .img{overflow:hidden; width:100%; border-radius: 12rem;}
	.half-reverse-wrap .half-reverse-div .txt-div{padding:30rem 0 0 0; width:100%;}
	.half-reverse-wrap .half-reverse-div:nth-child(2n) .txt-div{padding-left:0;}
	.half-reverse-wrap .half-reverse-div .txt-div .f18{margin-top:20rem;}
  .half-reverse-wrap .half-reverse-div .txt-div:has(.txt-w) .f18{margin-top:20rem;}
  .half-reverse-wrap .half-reverse-div .txt-div .txt-w{margin-top:10rem;}
  .half-reverse-wrap .half-reverse-div.active:nth-child(2n-1) .txt-div{transition-delay:0s}
  .half-reverse-wrap .half-reverse-div.active:nth-child(2n) .img{transition-delay:0s}
  .half-reverse-wrap .half-reverse-div.active .txt-div{transition-delay:0.15s}
}

@media screen and (max-width: 600px) {
	.half-reverse-wrap .half-reverse-div .img{height:192rem;}
}


/* 로딩 프로그레스 */
.loading-area {display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); z-index: 123456789;}
.loading-area .txt-area {text-align: center;}
.loading-area .txt-area .tit {font-family: "InterTight-SemiBold"; color: #fff; font-size: 18rem; line-height: 160%;}