@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-tablet { display:block; } 
.only-desktop { display:block; } 
.only-tablet { display:none; } 
.only-mobile { display:none; } 

#wrapper { overflow:hidden; } 

/* header */
#header { position: fixed; width: 100%; top: 0; left: 0; right: 0; z-index:90; background-color: #000; } 
#header .contain { display: flex; justify-content: space-between; align-items: center; height:var(--header-height); } 
#header .sitelogo a { display:block; text-transform: uppercase; color: #fff; font-family: "Montserrat", serif; font-size: var(--font-size-17); font-weight:500; } 
#header .sitelogo a img {vertical-align: middle;}

#header #gnb { display:none; } 
#header .gnb2 > ul > li { display:flex; color: #fff; text-transform: uppercase; } 
#header .gnb2 > ul > li > a { position:relative; margin-left:var(--space-40); padding-left:var(--space-40); } 
#header .gnb2 > ul > li > a::before { content: ""; position: absolute; top:50%; left:0; transform: translateY(-50%); width:1px; height:11px; background-color: #fff; } 
#header .gnb2 .submenu > ul { display:flex; gap: 0 var(--space-35); } 
#header .montserrat { font-size: var(--font-size-17); } 

/* main */
[data-aos=fade-up] { transform: translate3d(0,100px,0); } 
.main-visual { position:relative; height:100vh; overflow:hidden; color:#fff; } 
.main-visual .item { position:relative; height:100vh; overflow:hidden; } 
.main-visual .image { position:relative; height:100vh; overflow:hidden; transition:5s; transform:scale(1.1); } 
.main-visual .image img { position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; } 
.main-visual .main-video { position:absolute; bottom:0; left:0; width:100%; height:100%; overflow:hidden; background-color: #000; } 
.main-video video { position: absolute; bottom: 0; left: 0; width: 100%; height: 116.6%; object-fit: cover; } 
.main-visual .caption { position:absolute; top:var(--space-120); width:100%; z-index:40; } 
.main-visual .caption p { opacity:0; transform:translateY(50px); transition:1.4s; text-align: center; filter: drop-shadow(0px 0px 100px 42px #fff); color: #000; font-weight:500; } 
.main-visual .caption .t1 { font-size: var(--font-size-44); line-height: 1em; } 
.main-visual .caption .t2 { font-size: var(--font-size-48); font-family: "Montserrat"; text-transform: uppercase; font-weight:500; line-height: 2em; letter-spacing: 0; } 
.main-visual .slick-arrow { position:absolute; top:50%; transform:translateY(-50%); width:clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px ); height:clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px ); border: 0; border-radius:100%; overflow:hidden; text-indent:-9999em; line-height:0; font-size:0; z-index:50; transition: .3s; } 
.main-visual .slick-prev { left:var(--space-100); transform:translateY(-50%); background:url("../images/main/slide-prev.png") no-repeat center/contain; } 
.main-visual .slick-prev:hover { background-image: url(/images/main/slide-prev-on.png); } 
.main-visual .slick-next { right:var(--space-100); background:url("../images/main/slide-next.png") no-repeat center/contain; } 
.main-visual .slick-next:hover { background-image: url(/images/main/slide-next-on.png); } 
.main-visual .slick-dots { position: absolute; bottom:var(--space-60); left:50%; transform: translateX(-50%); display: flex; justify-content: center; margin: 0; list-style-type: none; gap: 0 15px; } 
.main-visual .slick-dots li button { display: block; width: 15px; height: 15px; padding: 0; border: none; border-radius: 100%; background-color: #fff; opacity:.4; text-indent: -9999px; } 
.main-visual .slick-dots li.slick-active button { opacity:1; } 
.main-visual .active .image { transform:scale(1); } 
.main-visual .active .caption p { opacity:1; transform:translateY(0); } 
.main-visual .active .caption .t1 { transition-delay:.4s; } 
.main-visual .active .caption .t2 { transition-delay:.6s; } 

#main .section { padding:var(--space-120) 0; } 

.sec-tit { padding-bottom:var(--space-80); font-weight:500; font-family: "Montserrat", serif; letter-spacing: 0; text-transform: uppercase; text-align:center; font-size: var(--font-size-44); line-height:1em; } 

.main-product .img-list ul { display:flex; justify-content: center; gap: 0 var(--border-radius-24); } 
.main-product .img-list ul li { width:100%; max-width: 385px; padding: var(--space-70) 0; text-align:center; background-color: #f6f6f6; } 
.main-product .img-list ul li .img { display: flex; justify-content: center; align-items: end;} 
.main-product .img-list ul li:nth-child(3) .img { justify-content: end; } 
.main-product .img-list ul li .tit { margin-top:var(--space-70); font-size: var(--font-size-28); line-height:1.36em; } 
.main-product .img-list ul li .desc { margin-top:var(--space-20); font-weight:500; font-size: var(--font-size-18); line-height:1.56em; } 

.main-scroll { background-color: #f6f6f6; padding-bottom:0 !important; } 
.scrollSwiper { width:100%;} 
.scrollSwiper  .swiper-wrapper { height:516px;  }
.scrollSwiper .swiper-slide .img { width:42.5%; padding-right:var(--space-70); text-align: right; } 
.scrollSwiper .swiper-slide .txt { flex: 1 1 auto; min-width:0; width:1%;  padding-top:var(--space-70); } 
.scrollSwiper .swiper-slide .txt h2 { font-size: var(--font-size-35); line-height:1.09em;; } 
.scrollSwiper .swiper-slide .txt p { padding-top:var(--space-30); font-size: var(--font-size-18); line-height:1.61em;; } 
.scrollSwiper .swiper-pagination-bullet { width: clamp(27px, calc( 47 / var(--inner) * 100vw ), 47px ); height: clamp(27px, calc( 47 / var(--inner) * 100vw ), 47px ); border: 1px solid #a1a1a1; text-align: center; line-height:  clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px );; font-size: var(--font-size-14); color: #a1a1a1; background-color: #dfdfdf; border-radius: 0; font-family: "Montserrat", serif; font-weight:500; letter-spacing: 0; } 
.scrollSwiper .swiper-pagination-bullet-active { color: #fff; background: #000; } 
.scrollSwiper .swiper-pagination-vertical.swiper-pagination-bullets, 
.scrollSwiper .swiper-vertical>.swiper-pagination-bullets { right:0; top:50%; transform: translateY(-50%); } 

/* sub page */
.contain { max-width:1260px; margin:0 auto; padding-left:var(--container-space); padding-right:var(--container-space); } 
#contArea { max-width:1260px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto; } 
#contArea.wide { max-width:100% !important; padding-left:0; padding-right:0; } 

#sub #contArea,
#sub .contain { max-width: 1260px; } 

#sub .contain.type2 { max-width: 1080px; } 

.sub-title { padding: var(--space-80) 0; text-align:center; } 
.sub-title h1 { font-size:var(--font-size-36); line-height:1em; color:var(--color-dark); letter-spacing: 0; } 

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

.sub-visual { position:relative;  height:560px; margin-top:  var(--header-height);
/* height:calc(560px - var(--header-height); */


 z-index:10; overflow:hidden; } 

.sub-visual.type2  {height:800px;}
.sub-visual .background { position:absolute; top:0; left:0; width:100%; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; transform:scale(1.09); -ms-transform:scale(1.09); /* IE 9 */
 -moz-transform:scale(1.09); /* Firefox */
 -webkit-transform:scale(1.09); /* Safari and Chrome */
 -o-transform:scale(1.09); /* Opera */
transition: all 2s ease-out 0s; transition-delay: 0.1s; z-index:0; } 
.sub-visual.load .background { transform:scale(1); -ms-transform:scale(1); /* IE 9 */
 -moz-transform:scale(1); /* Firefox */
 -webkit-transform:scale(1); /* Safari and Chrome */
 -o-transform:scale(1); /* Opera */ } 
 .sub-visual .tt-wrap { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; color: #fff; text-align: center; margin-top: -30px; } 
.sub-visual .tt-wrap .en { font-size: var(--font-size-23); line-height: 1em; font-weight: 600; } 
.sub-visual .tt-wrap .tit { padding-top:var(--space-30); font-weight:500; font-size: var(--font-size-55); line-height:1em; } 

.lnb-wrap { position:relative; padding-top:var(--space-80); } 
.lnb { margin:0 auto; max-width:1200px; width:100%; border: 1px solid #a1a1a1; } 
.lnb ul { display:flex; } 
.lnb ul li { position:relative; flex:1; text-align:center; } 
.lnb ul li::after { content: ""; position: absolute; top:50%; right:0; transform: translateY(-50%); width:1px; height:var(--space-30); background-color: #a1a1a1; } 
.lnb ul li:last-child::after { display:none; } 
.lnb ul li a { position: relative; display:flex; justify-content:center; align-items:center; width:100%; height:var(--lnb-height); background: #fff; font-weight:500 !important; letter-spacing: 0; color: #a1a1a1; text-transform: uppercase; } 
.lnb ul li.active a { color: #000; } 


/* footer */
#footer { background-color: #000; padding: var(--space-40) 0; } 
#footer .foot-info { min-width: 0; width: 1%; flex: 1 1 auto; } 
#footer .foot-info address { font-style: normal; display: flex; flex-wrap: wrap; max-width: 650px; } 
#footer .foot-info address > div { line-height: 0; } 
#footer .foot-info address p { position:relative; display: inline-block; font-weight: 300; font-size: 12px; color: #fff; line-height: 1.67em; } 
#footer .foot-info address p::after { content: "|"; display:inline-block; margin:0 7px; font-size: 11px; } 
#footer .foot-info address p:last-child::after { display:none; } 
#footer .foot-logo { width:12%; } 
#footer .foot-menu { display: none; padding: var(--space-30) 0; border-bottom: 1px solid rgba(255,255,255,0.3); } 
#footer .foot-menu .contain { display: flex; gap: var(--space-30); } 
#footer .foot-menu li a { color: #ababab; font-size: var(--font-size-14); font-weight: 500; } 
#footer .foot-info .copy { display: none; font-weight: 500; font-size: var(--font-size-13); line-height: 2em; color: #666666; margin-top: 10px; } 

/* for mobile */
.only-mobile { display:none; } 
.btn-m-menu {display:block;}
.btn-m-menu img {vertical-align: middle;}

.mobile-navigation { position:fixed; top:var(--header-height); right:0; width:220px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#000; z-index:202; color: #fff; } 
.mobile-navigation.active { top: 0; }
.mobile-navigation .home { display:block; margin-bottom:20px; padding-left:15px; } 
.mobile-navigation .home a { display:block; } 
.mobile-navigation .home img { height:30px; } 
.mobile-navigation .nav-menu>ul>li { padding:var(--space-20) 0; border-bottom:1px solid #373737; } 
.mobile-navigation .nav-menu>ul>li:last-child { border-bottom: 0; } 
.mobile-navigation .nav-menu>ul>li>a { position:relative; display:block; margin-bottom: var(--space-15); color:#fff; font-size:var(--font-size-14); font-weight:500; line-height:1em; text-transform: uppercase; letter-spacing: 0; font-family: "Montserrat", serif; } 
.mobile-navigation .nav-menu>ul>li.active>a { color:var(--color-primary) } 
.mobile-navigation .nav-menu .submenu>ul:after { content:""; display:block; clear:both; } 
.mobile-navigation .nav-menu .submenu>ul>li>a { display:block; position:relative; color:#a1a1a1; font-size:var(--font-size-16); font-weight:400; line-height:1.75em; text-transform: uppercase; } 
.mobile-navigation .nav-menu .submenu>ul>li>a:hover { color:#fff } 
.mobile-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:201; } 

html.menu-opened { overflow:hidden; } 
html.menu-opened .mobile-navigation { -ms-transform:translateX(0); transform:translateX(0); margin-right: calc(50% - 600px); } 
html.menu-opened .mobile-overlay { display:block; }