@charset "utf-8"; 

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

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

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:var(--header-height); background:#fff; z-index:100;} 
#header .contain {position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:100%; z-index:2;} 

/* 전체메뉴 */
.btn-menu {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(7px, calc(12 / var(--inner) * 100vw ), 12px); position:absolute; top:50%; right:var(--container-space); -webkit-transform:translateY(-50%); transform:translateY(-50%); width:clamp(24px, calc(36 / var(--inner) * 100vw ), 36px); height:clamp(24px, calc(36 / var(--inner) * 100vw ), 36px); z-index:95;} 
.btn-menu span {width:100%; height:1px; background:#000; transition:.3s;} 

.mobile-navigation {position:fixed; top:0; right:0; padding:clamp(75px, calc(120 / var(--inner) * 100vw ), 120px) clamp(16px, calc(100 / var(--inner) * 100vw ), 100px); width:48%; max-width:707px; height:100%; overflow:auto; transition:.4s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; opacity:0; z-index:201; font-size:clamp(18px, calc(28 / var(--inner) * 100vw ), 28px); line-height:1.3em; pointer-events:none;} 
.mobile-navigation .nav-menu>ul {border-top: 1px solid #888888;} 
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #888888;} 
.mobile-navigation .nav-menu>ul>li>a {display:block; padding:clamp(16px, calc(30 / var(--inner) * 100vw ), 30px) clamp(10px, calc(22 / var(--inner) * 100vw ), 22px);} 
.mobile-navigation .select-language {display:flex; align-items:center; gap:var(--space-20); margin-top:var(--space-30);}
.mobile-navigation .select-language a {display:block; padding:clamp(5px, calc(10 / var(--inner) * 100vw ), 10px) clamp(10px, calc(22 / var(--inner) * 100vw ), 22px);}
.mobile-navigation .close {position:absolute; top:clamp(16px, calc(24 / var(--inner) * 100vw ), 24px); right:clamp(16px, calc(100 / var(--inner) * 100vw ), 100px); width:clamp(24px, calc(36 / var(--inner) * 100vw ), 36px); height:clamp(24px, calc(36 / var(--inner) * 100vw ), 36px); overflow:hidden;} 
.mobile-navigation .close span {content:" "; position:absolute; top:50%; left:0; width:100%; height:1px; background:#000;} 
.mobile-navigation .close span:nth-child(1) {transform:rotate(45deg);} 
.mobile-navigation .close span:nth-child(2) {transform:rotate(-45deg);} 
.mobile-navigation a:hover {opacity:0.4;}

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

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

/* main */
.main-hero {position:relative; height:100vh; overflow:hidden; color:#fff; text-align:center;} 
.main-hero .image {position:relative; height:100vh; overflow:hidden;} 
.main-hero .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} 
.main-hero .content {position:absolute; top:40%; left:0; width:100%; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:10;} 
.main-hero .mark {margin-bottom:30px;}
.main-hero .text {font-family:var(--font-serif); font-size:clamp(30px, calc(72 / var(--inner) * 100vw ), 72px); line-height:1.35em; font-weight:800;} 

.main-links {position:relative; margin-top:-15%; margin-bottom:var(--space-130);}
.main-links .swiper {margin:-20px; padding:20px;}
.main-links .link-item {display:block; position:relative; border-radius:var(--border-radius-24); box-shadow:0px 0px 20px 0px rgba(12, 13, 13, 0.5);}
.main-links .link-item .image {position:relative; aspect-ratio:395 / 458; background:#000; border-radius:var(--border-radius-24); overflow:hidden;}
.main-links .link-item .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.7; transition:.4s;}
.main-links .link-item .content {position:absolute; inset:0; width:100%; height:100%; padding:clamp(35px, calc(45 / var(--inner) * 100vw ), 45px) clamp(30px, calc(35 / var(--inner) * 100vw ), 35px); color:#fff;}
.main-links .link-item .content .title {font-size:var(--font-size-30); line-height:1.35em; font-weight:700;}
.main-links .link-item .content .more {margin-top:var(--space-15); font-size:var(--font-size-18); line-height:1.35em;}
.main-links .link-item .content .more svg {vertical-align:middle; width:14px; height:14px;}
.main-links .link-item:hover .image img {transform:scale(1.1);}

.main-about {display:flex; background:#efefef; font-family:var(--font-serif); font-size:clamp(18px, calc(24 / var(--inner) * 100vw ), 24px); font-weight:600; line-height:1.67em; overflow:hidden;}
.main-about .image {width:50%; overflow:hidden;}
.main-about .image img {display:block; width:100%; height:100%; object-fit:cover;}
.main-about .content {display:flex; flex-direction:column; justify-content:center; width:50%; padding:clamp(25px, calc(70 / var(--inner) * 100vw ), 70px);}

.main-works {padding:var(--space-100) 0 var(--space-120); overflow:hidden;}
.main-works h2 {margin-bottom:clamp(30px, calc(70 / var(--inner) * 100vw ), 70px); font-size:var(--font-size-42); line-height:1.3em; text-align:center;}
.main-works .slick-list {margin:-20px; padding:20px !important;}
.main-works .slick-track {display:flex;}
.main-works .slick-track:before,
.main-works .slick-track:after {display:none;}
.main-works .slick-slide {flex-shrink:0; display:flex; align-items:center; width:420px; padding:0 22px; aspect-ratio:1 / 1.3;}
.main-works .slick-slide > div {width:100%;}

.main-works .link-item {display:block; position:relative; width:100%; border-radius:var(--border-radius-24); box-shadow:0px 0px 20px 0px rgba(12, 13, 13, 0.5); transition:.4s; filter:grayscale(100%);}
.main-works .link-item .image {position:relative; aspect-ratio:1/1; background:#f8f8f8; border-radius:var(--border-radius-24); overflow:hidden;}
.main-works .link-item .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.4s;}
.main-works .link-item .image:after {content:""; position:absolute; left:0; bottom:0; width:100%; height:35%; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); transition:.4s; opacity:0;}
.main-works .link-item .content {position:absolute; left:0; bottom:0; width:100%; padding:clamp(20px, calc(30 / var(--inner) * 100vw ), 30px); color:#fff;  font-size:var(--font-size-20); line-height:1.3em; font-weight:700;  transition:.4s; opacity:0;}
.main-works .slick-current {position:relative; z-index:2;}
.main-works .slick-current .link-item {transform:scale(1.4); filter:grayscale(0%);}
.main-works .slick-current .link-item .image:after {opacity:1;}
.main-works .slick-current .link-item .content {opacity:1;}
.main-works .slick-current .link-item:hover .image img {transform:scale(1.1);}

.main-news {padding:var(--space-100) 0 var(--space-120); overflow:hidden; background:#f8f8f8;}
.main-news h2 {margin-bottom:clamp(30px, calc(70 / var(--inner) * 100vw ), 70px); font-size:var(--font-size-42); line-height:1.3em; text-align:center;}
.main-news .items {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-30);}
.main-news .link-item {display:block;}
.main-news .link-item .image {margin-bottom:var(--space-20); aspect-ratio:327/190; background:#f8f8f8; border-radius:var(--border-radius-24); overflow:hidden;}
.main-news .link-item .image img {width:100%; height:100%; object-fit:cover; transition:.4s;}
.main-news .link-item .title {max-height:2.7em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:clamp(16px, calc(24 / var(--inner) * 100vw ), 24px); line-height:1.35em; font-weight:700;}
.main-news .link-item .text {margin-top:var(--space-10); color:#888888; font-size:clamp(12px, calc(18 / var(--inner) * 100vw ), 18px); line-height:1.35em;}
.main-news .link-item:hover .image img {transform:scale(1.1);}

/* footer */
#footer {padding:clamp(30px, calc(50 / var(--inner) * 100vw ), 50px) 0; border-top:1px solid #e1e1e1;} 
#footer .contain {max-width:1520px;} 
.footer {display:flex; justify-content:space-between; align-items:center; gap:var(--space-60);}
.footer-info {display:flex; align-items:center; gap:18px;}
.footer-logo {font-size:18px; font-weight: 700; line-height:1.3em;}
.footer-copyright {font-size:14px; line-height:1.3em;}

.footer-links .link-item {display:inline-block; border:1px solid #e1e1e1; border-radius:50px; padding:8px 24px; font-size:clamp(13px, calc(18 / var(--inner) * 100vw ), 18px); font-weight:700; line-height:1.3em;}
.footer-links .link-item:hover {color:#fff; background:#000; border-color:#000;}