@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 
 
#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {max-width:1460px; margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

/* header */
#header {position:absolute; top:0; left:0; z-index:100; width:100%;}
#header .contain {position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding:25px 40px 25px 0; width:100%; max-width:1400px; height:100%; z-index:2;}

.sub-home-button {display:none; color:var(--color-primary);}
.sub-home-button a {display:flex; width:28px; aspect-ratio:1/1;}
.sub-home-button svg {display:block; width:100%; height:100%; object-fit:contain;}

.sitelogo {flex-shrink:0;}
.sitelogo a {display:block;}
.sitelogo img {display:block; height:24px;}

#gnb {flex:1; min-width:0; position:relative; padding-left:60px; padding-right:30px; margin-bottom:9px;}
#gnb:before {content:""; position:absolute; bottom:3px; left:0; width:100%; height:1px; background:rgba(255, 255, 255, 0.10);}
#gnb>ul {flex-shrink:0; display:flex; justify-content:space-between; position:relative;} 
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:9px; color:#fff; font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.62em; text-align:center; opacity:.6;}
#gnb>ul>li>a:after {content:""; display:block; width:6px; height:6px; background:#fff;}
#gnb>ul>li>a:hover {opacity:1;}

#sub #header .contain {padding-left:40px; gap:30px;}
#sub #gnb {padding-right:60px;}
#sub .sub-home-button {display:block;}
#sub .sitelogo {display:none;}

html:has(.order-wrap) #gnb:before {background:rgba(0, 0, 0, 0.10);}
html:has(.order-wrap) #gnb>ul>li>a {color:#2c2c2c;}
html:has(.order-wrap) #gnb>ul>li>a:after {background:#2c2c2c;}
html:has(.member-wrap) #gnb:before {background:rgba(0, 0, 0, 0.10);}
html:has(.member-wrap) #gnb>ul>li>a {color:#2c2c2c;}
html:has(.member-wrap) #gnb>ul>li>a:after {background:#2c2c2c;}

/* for mobile */ 
.btn-m-menu {display:none; position:relative; width:24px; height:24px;}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#fff;}

#sub .btn-m-menu span {background:#CDA079;}


.mobile-navigation {position:fixed; top:0; right:0; width:100%; height:100%; padding:30px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:40px; overflow:auto; transition:.4s ease; -ms-transform:translateY(-100%); transform:translateY(-100%);  z-index:102; text-align:center;}
.mobile-navigation .nav-menu>ul>li>a {display:block; padding:15px 0; color:#fff; font-size:18px; font-weight:600; line-height:1.5em;}
.mobile-navigation .close {display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:#000; border-radius:50%; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.10);}
.mobile-navigation .close svg {display:block;}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.8; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
#main #container {overflow:hidden;}
.main-visual-wrap {position:relative; max-width:1400px; margin:0 auto;}
.main-visual {position:relative; overflow:hidden; width:100%; height:400px; background:#333;}
.main-visual .item {position:relative; overflow:hidden; width:100%; height:400px;}
.main-visual .item img {position:absolute; width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:5s linear;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .active .item img {transform:scale(1);}

@media (min-aspect-ratio: 16/9) {
	.main-visual .item iframe {height:56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.main-visual .item iframe {width:177.78vh;}
}

.mv-outline-text {position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:2; -webkit-text-stroke-width:.5px; -webkit-text-stroke-color:#2C2C2C; font-family:'A2Z',sans-serif; font-size:64px; font-weight:800; line-height:1em; color:transparent;}

.mv-text {position:absolute; bottom:0; left:0; padding:40px 60px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; width:100%; color:#fff;}
.mv-text .text-area {display:flex; flex-direction:column; align-items:flex-start; gap:24px;}
.mv-text .text-area .box {background:rgba(0, 0, 0, 0.24); backdrop-filter:blur(8px); padding:8px 12px; }
.mv-text .text-area .box p {color:rgba(255, 255, 255, 0.80); font-family:'A2Z',sans-serif; font-size:12px; font-weight:600; line-height:1.67em; letter-spacing:0;}
.mv-text .text-area .articles {display:flex; flex-direction:column; gap:10px;}
.mv-text .text-area .articles .article h3 {margin-bottom:10px; font-size:10px; font-weight:600; line-height:1.6em; letter-spacing:-.02em;}
.mv-text .text-area .articles .article p {margin-top:8px; font-size:9px; font-weight:400; line-height:1.33em; letter-spacing:-.02em; color: rgba(255, 255, 255, 0.90);}
.mv-text .cs-area {text-align:right;}
.mv-text .cs-area h2 {display:flex; justify-content:flex-end; margin-bottom:12px; font-size:20px; font-weight:600; line-height:1.7em; letter-spacing:-.02em; color:rgba(255, 255, 255, 0.80);}
.mv-text .cs-area h2 span {border-bottom: 1px solid rgba(255, 255, 255, 0.10); padding-bottom:3px;}
.mv-text .cs-area .number {display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.mv-text .cs-area .number .num {font-size:28px; font-weight:500; line-height:1.2em; letter-spacing:-.01em;}
.mv-text .cs-area .number .vline {width:1px; height:12px; background:#fff;}

.main-content {padding:30px 0 50px;}
.main-content .inner-wrap {max-width:676px; margin:0 auto;}
.main-content .main-title {position:relative; padding-left:10px; margin-bottom:20px; font-size:16px; font-weight:500; line-height:1.5em; letter-spacing:-.02em; color:#2c2c2c;}
.main-content .main-title:before {content:""; position:absolute; top:4px; left:0; width:2px; height:16px; background:#414D5B;}
.main-content .items {display:grid; grid-template-columns:repeat(4, 1fr); gap:4px;}
.main-content .item {position:relative; display:flex; flex-direction:column; justify-content:flex-end; text-align:right; min-height:166px; border:8px solid #949CA7; padding:12px;}
.main-content .item:before {content:""; position:absolute; top:12px; left:12px; width:24px; height:24px; background:url('/images/main/line.svg') 50% 50%/contain no-repeat; z-index:1;}
.main-content .item .tit {font-size:16px; font-weight: 500; line-height:1.5em; color:#505050;}
.main-content .item .txt {margin-top:2px; font-size:12px; line-height:1.33em; color:#878787;}
.main-content .item:hover {border-color:#CDA079;}
.main-content .btn-area {margin-top:20px; text-align:center;}
.main-content .btn-area .btn {display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; background: #414D5B; font-size:14px; font-weight:600; line-height:1.2em; letter-spacing:-.02em; color:#fff;}
.main-content .btn-area .btn:hover {background: #CDA079;}
.main-content .text-notice {margin-top:14px; font-size:14px; font-weight:500; line-height:1.5em; letter-spacing:-.02em; color:#B31818; text-align:center;}

/* sub */
.sub-visual {position:relative; max-width:1400px; margin:0 auto; background:#000; height:clamp(320px, calc(400 / var(--inner) * 100vw), 400px); overflow:hidden; color:#fff; text-align:center;}
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:3s linear; transform:scale(1.1); opacity:0;}
.sub-visual .title {position:absolute; bottom:clamp(60px, calc(80 / var(--inner) * 100vw), 80px); left:0; width:100%;}
.sub-visual .title .contain {width:100%; display:flex; align-items:flex-end; gap:30px; padding:0 60px;}
.sub-visual .sg-en {position:relative; font-size:clamp(16px, calc(20 / var(--inner) * 100vw), 20px); line-height:1.35em; color:rgba(255, 255, 255, 0.80);
    ; font-weight:700;}
.sub-visual .sg-en:before,
.sub-visual .sg-en:after {content:""; position:absolute; left:0; width:100%; height:clamp(24px, calc(30 / var(--inner) * 100vw), 30px); background:url('/images/common/double-quotes.png') 50% 50%/contain no-repeat;}
.sub-visual .sg-en:before {top:calc(clamp(34px, calc(40 / var(--inner) * 100vw), 40px) * -1);}
.sub-visual .sg-en:after {bottom:calc(clamp(34px, calc(40 / var(--inner) * 100vw), 40px) * -1); -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.sub-visual .sg-ko {font-size:clamp(12px, calc(16 / var(--inner) * 100vw), 16px); line-height:1.6em; color:rgba(255, 255, 255, 0.80);
    ; font-weight:800; font-family: 'NanumMyeongjo', serif; text-align:left;}
.sub-visual.loaded .bg {transform:scale(1); opacity:1;}
.sub-visual.sv1 {height:clamp(320px, calc(400 / var(--inner) * 100vw), 400px);}
.sub-visual.sv2 {height:clamp(320px, calc(500 / var(--inner) * 100vw), 500px);}

.lnb-wrap {position:relative; margin-top:calc((var(--lnb-height) / 2) * -1); padding:0 var(--space-container);}
.lnb {max-width:1400px; margin:0 auto; position:relative; overflow:hidden; border-radius:8px; background:#fff; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);}
.lnb ul li {flex:1; text-align:center;}
.lnb ul li a {display:flex; align-items:center; justify-content:center; width:100%; height:var(--lnb-height); padding:0 15px; color:#8f8f8f; font-size:var(--font-size-18); font-weight:600; line-height:1.2em; letter-spacing:-.03em; white-space:nowrap;}
.lnb ul li.active a {background:var(--color-primary); color:#fff;}

#contArea {max-width:1460px; padding:0 var(--space-container); margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title {padding:var(--space-120) 0 var(--space-80);}
.sub-title h2 {font-size:var(--font-size-48); font-weight:600; line-height:1.3em; color:#2C2C2C; letter-spacing:-.03em;}
.sub-title.center {padding:var(--space-160) 0 var(--space-100); text-align:center;}

.real-cont {min-height:260px; padding-bottom:var(--space-140);}


/* footer */
#footer {width:100%; max-width:1400px; margin:0 auto; color:#878787; font-size:14px; line-height:1.5em; letter-spacing:-.02em;}
#footer a {color:inherit;}
#footer a:hover {text-decoration:underline;}
#footer address {font-style:normal;}

.footer {display:flex; flex-wrap:wrap; gap:10px 20px;}

#main #footer {padding:30px var(--space-container); border-top:1px solid #ddd;}
#main .footer {justify-content:center;}

#sub #footer {padding:18px var(--space-container); max-width:1460px; display:flex; align-items:center;}
#sub #footer:after {content:""; margin-left:20px; flex:1; height:1px; background:#eee;}