@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 
body {overflow-x: hidden;}
#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}

.opensans {font-family: 'opensans';}
.playfair {font-family: 'playfair';}
.montserrat {font-family: 'montserrat';}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}
.flex {display:flex;}
.flex-center {display:flex; align-items:center; justify-content:center;}
.flex-start {display:flex; align-items:center; justify-content:flex-start;}
.flex-end {display:flex; align-items:center; justify-content:flex-end;}
.flex-top {display: flex; align-items:flex-start;}
.flex-between {display:flex; align-items:center; justify-content:space-between;}
.flex-col {display:flex; flex-direction:column;}
.flex-col-center {display:flex; flex-direction:column; align-items:center; justify-content: center;}
.flex-col-start {display:flex; flex-direction:column; align-items:flex-start;}
.flex-col-end {display:flex; flex-direction:column; align-items:flex-end;}

#wrapper {position:relative; background: #222;}

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

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:var(--header-height); background:#1A1A1A; transition:.2s; z-index:100;}
#header .contain {display: flex; align-items: center; justify-content: space-between; position:relative; max-width:1780px; height:100%; z-index:10; }
#header .home-wrap {overflow: hidden;}
#header .home {display: block; position: relative; font-size: var(--font-size-20); font-weight: 500; color: #EDEDED;}
#header .home:hover {transform: translateY(-100%); transition: transform 0.3s ease;}
#header .contain .home:after {content: "HOME"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-weight: 500; color: #EDEDED;}

#sub #header {position:sticky;}

.sitelogo a {display:block;}
.menu {display: flex; position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; z-index:100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
.menu.active {opacity: 1; visibility: visible;}
.menu .menu-bg {width: 67%; height: 100%; background: url("../images/common/menu-bg.jpg") no-repeat center center / cover;}
.menu .close {position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; background: url("../images/common/close.svg") no-repeat center center / cover; border: none; cursor: pointer;}
.menu .menu-list {flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-80);}
.menu .menu-list > li {margin-bottom: var(--space-50);}
.menu .menu-list > li > a {color: #454545; font-size: var(--font-size-36); font-weight: 600; line-height: 1.25em;}
.menu .menu-list .submenu {display: none; margin-top: var(--space-28); padding: 0 var(--space-20);}
.menu .menu-list .submenu ul {display: flex; flex-direction: column; gap: var(--space-10);}
.menu .menu-list .submenu ul li a {position: relative; font-size: var(--font-size-20); font-weight: 400; line-height: 1.4em; color: #7d7d7d; white-space: nowrap;}
.menu .menu-list .submenu ul li a:before {content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: #7d7d7d; transition: width .3s;}
.menu .menu-list .submenu ul li a:hover:before {width: 100%;}


/* for mobile */


/* main-visual */

.main-visual {position:relative; overflow: hidden; width: 100%; }
.main-visual .item {position:relative; height: 100vh; overflow:hidden;}
.main-visual .img {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transform: scale(1); transition: 4s;}
.main-visual .img img {position:absolute; top:var(--header-height); left:0; width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.main-visual .caption { position: absolute; top: 50%; transform: translateY(-50%); left:0; width: 100%;}
.main-visual .caption .contain {max-width: 1640px; padding-left: var(--space-container); padding-right: var(--space-container);}
.main-visual .caption .txt { width: 100%; transform:translateY(50px); opacity: 0; transition:opacity 0s 2s, transform 0s 2s; color: #fff; text-align: center;}
.main-visual .caption h2 { font-size: var(--font-size-64); font-weight: 500; line-height: 1.25em; margin-bottom: 25px;	font-family: 'opensans';}
.main-visual .caption p {line-height: 1.5em; font-size: var(--font-size-20); font-weight: 500;}
.main-visual .items .slick-active:not(.animate) .caption .txt { transform:translateY(50px); opacity:0; transition:all 0s;}
.main-visual .items .slick-active.animate .caption .txt { transform:translateY(0); opacity:1; transition:opacity 0.8s, transform 0.5s; transition-delay:0.2s;}
.main-visual .items .reset-animation .caption .txt { transform:translateY(50px); opacity:0; transition:all 0s}

.main-visual .slick-dots {position:absolute; bottom:var(--space-60); left:0; width:100%; text-align:center; line-height:0; z-index:50;}
.main-visual .slick-dots li {display:inline-flex; justify-content:center; align-items:center; width:30px; margin:0 8px;}
.main-visual .slick-dots li button {width: 8px; height: 8px; background: #ffffff40; border: none; border-radius:100%; overflow:hidden; text-indent:-9999em; transition:.2s;}
.main-visual .slick-dots .slick-active button {width: 30px; background: #fff; border-radius: 64px;}
.main-visual .slick-arrow {display: none !important;}

.main-visual .animate .img { animation-name: scale; animation-duration:4s; animation-fill-mode: forwards;}
@keyframes scale {
    0% {transform: scale(1);}
	100% {transform: scale(1.05);}
}

/* main-cont */

.main-section {height:100vh;}
.main-section .contain {max-width: 1660px;}
.main-section .cell {color: #fff;}
.main-section .cap {font-size: var(--font-size-26); font-weight: 500; margin-bottom: var(--space-20); line-height: 1.5em; }
.main-section .tit {font-size: var(--font-size-50); font-weight: 500; line-height: 1.2em; margin-bottom: var(--space-30);}
.main-section .cont {margin-bottom: var(--space-50);}
.main-section .cont p {font-size: var(--font-size-20); font-weight: 500; line-height: 1.4em;}
.main-com-btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12); width: 205px; height: 60px; padding: var(--space-16); border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-size: var(--font-size-16); font-weight: 600; transition: background .2s, color .2s;}
.main-com-btn.white {color: #fff; border-color: #fff;}
.main-com-btn:after {content: ""; display: inline-block; width: 16px; height: 16px; background: url("../images/main/more-arrow.png") no-repeat center center / cover;}
.main-com-btn.white:after {background-image: url("../images/main/more-arrow-white.png");}
.main-com-btn:hover {background: var(--color-primary); border-color: var(--color-primary); color:#454545;}
.main-com-btn:hover:after {background-image: url("../images/main/more-arrow-active.png");}

.main-section.on .cap {opacity: 1; transform: translateY(0px); transition: 1.2s 0.5s;}
.main-section.on .tit {opacity: 1; transform: translateY(0px); transition: 1.2s 0.6s;}
.main-section.on .cont p {opacity: 1; transform: translateY(0px); transition: 1.2s 0.7s;}
.main-section.on .main-com-btn {opacity: 1; transform: translateY(0px); transition: opacity 1.2s 0.8s, transform 1.2s 0.8s, background .2s, color .2s;}
.main-section.on .cap.translate-x {opacity: 1; transform: translateX(0px);}
.main-section.on .tit.translate-x {opacity: 1; transform: translateX(0px);}
.main-section.on .cont p.translate-x {opacity: 1; transform: translateX(0px);}
.main-section.on .main-com-btn.translate-x {opacity: 1; transform: translateX(0px);}

/* values */
.values {background: #282828; color: #fff;}
.values .contain {height: 100%; display: flex; align-items: center;}
.values .inner {display: flex; align-items: center; justify-content: space-between; gap: var(--space-40); width: 100%;}
.values .cell {width: clamp(400px, calc(560 / var(--inner) * 100vw), 560px);}
.values .cap {opacity: 0; transform: translateX(-40px);}
.values .tit {opacity: 0; transform: translateX(-40px);}
.values .cont p {opacity: 0; transform: translateX(-40px);}
.values .main-com-btn {opacity: 0; transform: translateX(-40px);}

.values .img-wrap {position: relative; flex: 1; min-width: 0; padding-left: var(--space-40); opacity: 0; transform: translateX(40px);}
.values .img-wrap:before {content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 0; background: #ffffff40;}
.values.on .img-wrap:before {height: 100%; transition: height 2s ease 0.5s;}

.values.on .img-wrap {opacity: 1; transform: translateX(0px); transition: 1.2s 0.4s;}


/* brands */
.brands {background:#222;}
.brands .contain {height: 100%; display: flex; align-items: center; justify-content: center;}
.brands .cell {text-align: center;}
.brands .cap {opacity: 0; transform: translateY(40px);}
.brands .tit {opacity: 0; transform: translateY(40px);}
.brands .cont p {opacity: 0; transform: translateY(40px);}
.brands .main-com-btn {opacity: 0; transform: translateY(40px);}

/* works */
.works {height: auto; padding: var(--space-150) 0 var(--space-130) ; background: #1a1a1a;}
.works .cap {opacity: 0; transform: translateY(40px);}
.works .tit {opacity: 0; transform: translateY(40px);}
.works .cont p {opacity: 0; transform: translateY(40px);}
.works .main-com-btn {opacity: 0; transform: translateY(40px);}
.main-slide-wrap {display: flex; gap: 40px; align-items: stretch; position: relative; height: 50vw; max-height: 950px; z-index: 1;}
[class*="work-slide"] {width: calc(100% / 2 - 20px); height: 100%; overflow: hidden;}
[class*="work-slide"] .swiper-slide {height: 100%; overflow: hidden;}
[class*="work-slide"] .swiper-slide .img {position: relative; width: 100%; height: 100%; overflow: hidden;}
[class*="work-slide"] .swiper-slide .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.works .work-slide3 {display: none;}

.work_nav {gap: 12px; position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: var(--space-30); background: #00000080;}
.work_nav .flex-center {gap: var(--space-30);}
.work_nav .view {position: relative; width: 54px; height: 54px; border: 1px solid #ffffff60; border-radius: 100%;}
.work_nav .view:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #fff no-repeat center center / cover; border-radius: 100%;}
.work_nav .swiper-button-next, 
.work_nav .swiper-button-prev {position: static !important; width: 34px; height: 34px; margin-top: 0; background: no-repeat center center / contain;}
.work_nav .swiper-button-next:after, 
.work_nav .swiper-button-prev:after {display: none !important;}
.work_nav .swiper-button-prev.prev1 {background: url("../images/main/prev-arrow.png") no-repeat center center / contain;}
.work_nav .swiper-button-next.next1 {background: url("../images/main/next-arrow.png") no-repeat center center / contain;}
.work_nav span {font-size: var(--font-size-14); font-weight: 500; color: #ddd;}
.m-work-nav {display: none;}

/* our center */
.center {height: auto; padding: var(--space-150) 0; }
.center .contain {position: relative;}
.center .cell {position: absolute; bottom: var(--space-120); left: var(--space-80);}
.center .cap {opacity: 0; transform: translateY(40px);}
.center .tit {opacity: 0; transform: translateY(40px);}
.center .cont p {opacity: 0; transform: translateY(40px);}
.center .main-com-btn {opacity: 0; transform: translateY(40px);}

/* contact */
.contact {height: auto; padding: var(--space-300) 0; background: #1a1a1a;}
.contact .contain {display: flex; align-items: center; justify-content: center; height: 100%;}
.contact .cell {position: relative; max-width: 1920px; margin: 0 auto; text-align: center; z-index: 2; background: url("../images/main/connect-bg.png") no-repeat center center / contain;}
.contact .cap {opacity: 0; transform: translateY(40px);}
.contact .tit {opacity: 0; transform: translateY(40px);}
.contact .cont p {opacity: 0; transform: translateY(40px); margin-bottom: var(--space-50);}
.contact .cont p:last-child {margin-bottom: 0;}
.contact .main-com-btn {opacity: 0; transform: translateY(40px);}


/* sub */
.sub-visual {position:relative; width:100%; height:clamp(170px, calc(500 / var(--inner) * 100vw), 500px); overflow:hidden; color:#fff; background-color:#eee; }
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; background-position:50% 50%; background-size:cover; animation:sv-zoomIn 5s forwards linear;}
.sub-visual .cell {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%;}
.sub-visual h2 {font-size:var(--font-size-68); text-align: center; line-height:1em;}
.sub-visual .bg1 {background-image:url("../images/common/sv1.jpg")}
.sub-visual .bg2 {background-image:url("../images/common/sv2.jpg")}
.sub-visual .bg3 {background-image:url("../images/common/sv3.jpg")}
.sub-visual .bg4 {background-image:url("../images/common/sv4.jpg")}
.sub-visual .bg5 {background-image:url("../images/common/sv5.jpg")}
.sub-visual .bg6 {background-image:url("../images/common/sv6.jpg")}

@keyframes sv-zoomIn {
    0% {transform:scale(1.1);}
    100% {transform:scale(1);}
}

.lnb-wrap {position:absolute; bottom:0; width:100%; text-align:center; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(5px); z-index:10; border-top: 1px solid #555;}
.lnb {max-width: 1400px; margin: 0 auto;}
.lnb .swiper {width:100%;}
.lnb ul {display:flex; justify-content: flex-start;}
.lnb ul li {position:relative; flex: 1; text-align:center; height:var(--lnb-height);}
.lnb ul li:last-child {border-right:none;}
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; color:#fff; font-size:var(--font-size-20); font-weight: 400; line-height:1.3em; text-align:center; padding: 0 10px; white-space:nowrap; transition:all .3s;}
.lnb ul li.active {border-top: 2px solid #fff;}
.lnb ul li.active a {color:#fff; font-weight:700;}

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

.sub-title {margin-bottom:var(--space-35); text-align: center;}
.sub-title h2 {position: relative; font-family: 'montserrat'; font-size:var(--font-size-50); font-weight:400; color:#fff; line-height:1.2em; letter-spacing:-.0em;}

.real-cont {min-height:300px;}

/* footer */
#footer {position:relative; background:#1a1a1a; padding:var(--space-60) 0 var(--space-50); color:#fff; font-weight:400; line-height:normal; border-top: 1px solid #ffffff30;}
#footer .f-content {max-width:1640px; margin:0 auto; padding:0 var(--space-container); text-align: center;}
#footer .ft-privacy {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 15px; font-size:var(--font-size-18); line-height: 1.25em; opacity: .6;}
#footer .ft-privacy a {display: inline-flex; align-items: center; font-family: 'opensans';}
#footer .ft-privacy a:after {content: ""; display: inline-block; width: 1px; height: 14px; background: #fff; margin: 0 12px}
#footer .ft-privacy a:last-child:after {display: none;}

#footer .copyright {font-family: 'opensans'; opacity: .3;}
#footer .copyright > span {font-size: var(--font-size-16); letter-spacing: 0;}