@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 
.only-desktop {display:block !important;}
.only-mobile {display:none !important;}

#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}

.contain {width:100%; max-width:1460px; margin:0 auto; padding-left:var(--contain-padding); padding-right:var(--contain-padding);}
.contain:after {content:""; display:block; clear:both;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:var(--header-height); background:rgba(255, 255, 255, 0); color:#fff; transition:.2s; z-index:100;}
#header .contain {display:flex; justify-content:space-between; align-items:center; position:relative; width:100%; height:100%; max-width:100%; padding:0 var(--contain-padding-x3); z-index:10;}

.sitelogo a {display:block;}
.sitelogo img {height:clamp(35px, calc( 62 / var(--inner) * 100vw ), 62px);}

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:none; justify-content:center; align-items:center; gap:var(--gnb-gutter);}
#gnb>ul>li {position:relative;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); color:#fff; font-size:var(--font-size-18); font-weight:600; line-height:1.2em;}
#gnb .submenu {display:none; position:absolute; top:calc(100% - var(--space-10)); left:50%; min-width:200px; transform:translateX(-50%); background:#fff; border:1px solid #242424; border-radius:var(--radius-12); text-align:center;}
#gnb .submenu>ul {padding:var(--space-30) var(--space-15);}
#gnb .submenu>ul>li>a {display:block; padding:8px 0; color:#242424; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; text-align:center; text-decoration:none;}
#gnb .submenu>ul>li>a:hover,
#gnb .submenu>ul>li.active>a {color:var(--color-primary); text-decoration:underline;}

.submenu-bg {display:none; position:absolute; width:100%; left:0; background-color:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}

#header:hover,
html.header-fixed #header {background:rgba(0, 0, 0, 0.4); transition:all 0.3s 0s ease;}

/* html.header-hover #header {background:#fff; color:#242424;}
html.header-hover #gnb>ul>li>a {color:#242424;}
html.header-hover .sitelogo a {background-image:url('/images/common/logo-bk.png');}

html.header-fixed #header {background:#fff; color:#242424; box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.05);}
html.header-fixed #gnb>ul>li>a {color:#242424;}
html.header-fixed .sitelogo a {background-image:url('/images/common/logo-bk.png');} */

/* for mobile */
.btn-m-menu {display:block; width:clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px); height:clamp(16px, calc( 25 / var(--inner) * 100vw ), 25px);}
.btn-m-menu img {display:block; width:100%; height:100%; object-fit:contain;}

.mobile-navigation {text-align:center; color:#fff; position:fixed; top:0; left:0; width:100%; height:100%; overflow:auto; transition:opacity .2s linear, visibility .2s linear; opacity:0; visibility:hidden; background:#242424; z-index:102; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.mobile-navigation .home img {height:clamp(35px, calc(62 / var(--inner) * 100vw), 62px);}
.mobile-navigation .nav-menu {width:100%;}
.mobile-navigation .nav-menu>ul>li {margin-top:var(--space-60);}
.mobile-navigation .nav-menu>ul>li>a {display:inline-block; color:#fff; font-size:var(--font-size-28); font-weight:700; line-height:1.07em; text-align:center;}
.mobile-navigation .nav-menu>ul>li>a:after {display:none;}
.mobile-navigation .nav-menu .submenu > ul {margin-top:var(--space-30); display:grid; gap:var(--space-20);}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:inline-block; font-size:var(--font-size-20); font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu > ul > li > a span {padding-left:5px; color:#A1A1A1;}
.mobile-navigation .close {position:absolute; top:var(--space-40); right:var(--space-40); width:clamp(40px, calc(64 / var(--inner) * 100vw), 64px); height:clamp(40px, calc(64 / var(--inner) * 100vw), 64px); text-indent:-9999em; overflow:hidden; z-index:10;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(45deg); width:100%; height:3px; background:#fff; border-radius:3px;}
.mobile-navigation .close:after {transform:translate(-50%, -50%) rotate(-45deg);}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {opacity:1; visibility:visible;}
html.menu-opened .mobile-overlay {display:none;}

.lang {display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0.48; text-align:center; margin-right:var(--space-50);}
.lang svg {width:clamp(14px, calc(20 / var(--inner) * 100vw), 20px); height:clamp(14px, calc(20 / var(--inner) * 100vw), 20px); display:flex;}
.lang p {line-height:1em; margin-top:var(--space-10); font-size:var(--font-size-20); font-weight:500;}
.lang:hover {opacity:1;}

/* main */
.main-visual {position:fixed; top:0; left:0; width:100%; height:100dvh; overflow:hidden; z-index:-1; transition:filter 0.1s ease, background 0.1s ease;}
.main-visual .blur-overlay {position:absolute; top:0; left:0; right:0; bottom:0; background-color:#000; z-index:1; transition:opacity 0.1s ease; pointer-events:none;}
.main-visual .item {position:relative; height:100dvh; overflow:hidden; background:#000; z-index:10;}
.main-visual .item:after {position:absolute; content:''; bottom:0; left:0; right:0; top:0; background-color:#000; opacity:0.3; z-index:0;}
.main-visual .item img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:5s linear; transform:scale(1.15);}
.main-visual .item video {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.main-visual .caption {text-align:center; position:absolute; bottom:10%; left:50%; padding:0 var(--contain-padding); width:100%; max-width:1460px; color:#fff; -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0); z-index:2;}
.main-visual .caption p {transition:.8s; opacity:0; transform:translateY(20px);}
.main-visual .caption .t1 {font-family:Montserrat, sans-serif; font-size:clamp(25px, calc(92 / var(--inner) * 100vw), 92px); font-weight:700; line-height:1em; letter-spacing:-.03em;}

.main-visual .scroll {position:absolute; bottom:var(--space-65); right:var(--space-260);}

.main-visual .active .item img {transform:scale(1);}
.main-visual .active .caption p {opacity:1; transform:translateY(0);}
.main-visual .active .caption .t1 {transition-delay:0.4s;}

.main-visual .controls {position:absolute; bottom:var(--space-40); left:50%; display:none; align-items:center; justify-content:center; gap:16px; -webkit-transform:translateX(-50%); transform:translateX(-50%); z-index:30;}
.main-visual .slick-dots {display:flex; gap:10px;}
.main-visual .slick-dots li button {display:block; width:15px; height:15px; background:transparent; border:1px solid #fff; border-radius:50%; transition:.2s; overflow:hidden; font-size:0; line-height:0; text-indent:-9999em; opacity:0.5;}
.main-visual .slick-dots li.slick-active button {opacity:1; background:#fff;}

.pause-button {display:block; width:15px; height:15px; background:url('/images/main/pause.svg') 50% 50% no-repeat; border:0; border-radius:50%;}
.play-button {display:none; width:15px; height:15px; background:url('/images/main/play.svg') 50% 50% no-repeat; border:0; border-radius:50%;}

.m-sec {padding:var(--space-140) 0; color:#fff;}
.m-sec.main-sec2 {margin-top:100dvh; position:relative; z-index:2;}
.m-sec.main-sec5 {padding-bottom:var(--space-280);}

.intro-section {display:flex; gap:clamp(50px, calc(150 / var(--inner) * 100vw), 150px); align-items:center;}
.intro-img {flex-shrink:0; width:47%; text-align:right;}
.intro-text {font-size:var(--font-size-22); line-height:1.73; letter-spacing:-0.03em;}

.menu-section {display:flex; align-items:flex-start;}
.section-title {flex-shrink:0; flex:1; font-family:'Montserrat', sans-serif; font-size:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); font-weight:700; line-height:1.36; letter-spacing:-0.03em;}
.menu-list {width:640px; border-top:1px solid #fff; display:flex; flex-direction:column; align-items:center; flex-shrink:0;}
.menu-item {padding:var(--space-30) 0; border-bottom:1px solid #fff; width:100%; display:flex; align-items:center; justify-content:space-between;}
.menu-txt {display:flex; flex-direction:column;}
.menu-en {font-size:var(--font-size-24); line-height:1.25; letter-spacing:-0.03em;}
.menu-ko {font-size:var(--font-size-22); line-height:1.36; letter-spacing:-0.03em;}
.menu-arrow {transition:all 0.2s ease-in-out; flex-shrink:0; width:clamp(16px, calc(32 / var(--inner) * 100vw), 32px); height:clamp(16px, calc(32 / var(--inner) * 100vw), 32px);}
.menu-arrow img {width:100%; height:100%; object-fit:contain;}
.menu-item:hover .menu-arrow {transition:all 0.2s ease-in-out; transform:translateX(-10px);}

.promo-section {display:flex; gap:clamp(30px, calc(60 / var(--inner) * 100vw), 60px); align-items:center;}
.promo-section .video {width:50%;}

.promo-title {flex:1; order:2; flex-shrink:0; font-family:'Montserrat', sans-serif; font-size:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); font-weight:700; line-height:1.14; letter-spacing:-0.03em;}

/* sub */
.sub-visual {position:relative; height:clamp(300px, calc( 980 / var(--inner) * 100vw ), 980px); color:#fff; overflow:hidden; background:#000; text-align:center;}
.sub-visual .bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:2s; opacity:0; transform:scale(1.05); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.sub-visual .inner {position:absolute; top:50%; left:0; width:100%; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.sub-visual [data-aos=fade-up] {transform:translate3d(0,30px,0);}
.loaded .sub-visual .bg {transform:scale(1); opacity:1;}
.sub-visual .ico img {height:clamp(30px, calc( 64 / var(--inner) * 100vw ), 64px);}
.sub-visual p {padding:var(--space-40) 0; font-family:'Montserrat', sans-serif; font-size:clamp(25px, calc( 92 / var(--inner) * 100vw ), 92px); font-weight:700; line-height:1em; letter-spacing:-.03em;}
.sub-visual h1 {line-height:1.2em; letter-spacing:-0.03em; font-size:clamp(20px, calc( 62 / var(--inner) * 100vw ), 62px);}

.sub-title {padding-bottom:var(--space-90); text-align:center;}
.sub-title.white,
.sub-title.white h2 {color:#fff;}
.sub-title h2 {color:#242424; font-size:var(--font-size-40); font-weight:700; line-height:1.3; letter-spacing:-.03em;}
.sub-title p {margin-top:var(--space-40); font-size:var(--font-size-18); line-height:1.77em;}

#contArea {width:100%; max-width:1460px; margin:0 auto; padding:0 var(--contain-padding);}
#contArea.wide {max-width:none; padding:0;}

.real-cont {padding:var(--space-100) 0;}

/* footer */
#footer {position:relative; padding:var(--space-45) 0 var(--space-30); background:#337E9E; color:#fff; line-height:1.87em;}
#footer .contain {display:flex; flex-direction:column; max-width:100%; padding:0 var(--contain-padding-x3);}
#footer address {font-style:normal;}

.footer-top {display:flex; justify-content:space-between;}

.foot-logo {margin-bottom:var(--space-25);}
.foot-logo img {height:clamp(35px, calc(62 / var(--inner) * 100vw), 62px);}

.fnb > ul {display:flex; gap:var(--space-70);}
.fnb > ul span {display:none;}
.fnb > ul > li > a {font-size:var(--font-size-20); margin-bottom:20px; display:inline-block; font-weight:600; line-height:1.3em;}
.fnb > ul > li .submenu a {line-height:1.87em; display:inline-block;}

.foot-bottom {margin-top:var(--space-45); display:flex; justify-content:space-between; align-items:center;}
.foot-links {display:flex; gap:var(--space-14); align-items:center;}
.foot-links a:hover {opacity:0.7;}