@charset "utf-8";

/* Header */
#header {
    background: #000;

	.logo-image { filter: invert(1); }
	.main-nav .portfolio-btn a { border: 1rem solid #fff; color: #fff; }
	.main-nav .portfolio-btn a svg path { fill: #fff; }
	.main-nav .nav-link-level-1 {background: transparent;color: #fff;}
	.main-nav .nav-link-level-1:hover { color: #3771fc; background: transparent; }
    
    & .site-menu-toggle {
        .bar {
            background: #fff;
        }
    }

}


.hero { position:relative; width:100%; height: 100dvh; min-height: 600rem; background: radial-gradient(circle at 20% 0, #648de3 10%, #6768e3)  0 / cover no-repeat; color: #fff;
	&::before { content: '히어로 영역'; position: absolute; inset: 0; margin: auto; align-content: center; text-align: center; font: 200 var(--font-size-32) var(--font-sans); }
}

.main-hero {

	.hero-side {display: grid;grid-template-columns: repeat(2, 1fr);width: 100%;}
	.hero-side .hero-video {display: flex;aspect-ratio: 1280/634;}
	.hero-side .ctaSlide { width: 100%; }
	.hero-side .hero-video video {width: 100%;height: 100%;object-fit: cover;}
	.hero-side .slider-cta {display: flex;width: 100%;max-height: 550rem;}
	.hero-side .slider-cta .swiper-slide {width: 100% !important;overflow: hidden;}
	.hero-side .hero-cta {background: #c1fb2f;display: flex;flex-direction: column;padding: 80rem;height: 100%;transform: scale(1.6);transition: all .6s;justify-content: center;}
	.hero-side .swiper-slide-active .hero-cta {transform: scale(1);transition: all .6s;}
	.hero-side .slide02 .hero-cta { background: #bababa; }
	.hero-side .slide03 .hero-cta { background: #fc8a20; }
	.hero-side .slide04 .hero-cta { background: #0082ff; }
	.hero-side .hero-cta h4 { font-size: var(--font-size-25); font-family: Montserrat; margin-bottom: 20rem; }
	.hero-side .hero-cta .exh-txt {position: relative;width: 100%;}
	.hero-side .hero-cta .s-txt {position: relative;font-size: var(--font-size-25);font-weight: 300;display: flex;flex-direction: column;gap: 20rem;opacity: 1;transition: opacity 0.8s ease, transform 0.8s ease;}
	.hero-side .hero-cta .s-txt.active{opacity: 1; transform: translateY(0); pointer-events: auto;}
	.hero-side .hero-cta .s-txt h1 {font-size: 85rem;font-family: var(--font-mont);line-height: 0.9;letter-spacing: -5rem;font-weight: 800;}
	.hero-side .hero-cta .btn {position: relative;width: fit-content;display: flex;padding: 20rem 40rem;font-size: 20rem;font-family: var(--font-mont);font-weight: 600;border: 1rem solid #222;border-radius: 50rem;margin-top: 40rem;align-items: center;background: transparent;transition: all .4s;}
	.hero-side .hero-cta .btn:hover { background: #fff; transition: all .4s; }
	.hero-side .hero-cta .btn svg {margin-right: 20rem;transition: all .3s;}
	.hero-side .hero-cta .btn:hover svg { rotate: -45deg; }
	
	.animate-text { display: flex; flex-direction: column; }
	.animate-text > span { display: block; }
	.animate-text > span > span { display: inline-block; opacity: 0; transform: translateY(30px); transition: transform 0.5s ease, opacity 0.5s ease; }
	.swiper-slide-active .animate-text > span > span { opacity: 1; transform: translateY(0); }


	@media(max-width: 1600px){
		.hero-side .slider-cta { max-height: 400rem; }
		.hero-side .hero-cta .exh-txt {}
		.hero-side .hero-cta .s-txt { font-size: 18rem; }
		.hero-side .hero-cta .s-txt h1 { font-size: 70rem; }
	}
	@media(max-width: 1024px){
		.hero-side {display: flex;flex-direction: column;width: 92%;margin: 0 auto;gap: 10rem;}	
		.hero-side .hero-cta .exh-txt {}
		.hero-side .hero-cta {padding: 50rem;}
		.hero-side .hero-cta .btn { margin-top: 20rem; padding: 15rem 30rem; }
	}
	@media(max-width: 767px){
		.hero-side .slider-cta { max-height: 300rem; }
		.hero-side .hero-cta {padding: 30rem 20rem;gap: 10rem;}
		.hero-side .hero-cta h4 {font-size: 14rem;margin-bottom: 10rem;}
		.hero-side .hero-cta .exh-txt {height: 90rem;}
		.hero-side .hero-cta .s-txt { font-size: 14rem ; gap: 10rem ; }
		.hero-side .hero-cta .s-txt h1 {font-size: 32rem; letter-spacing: normal;}
		.hero-side .hero-cta .btn { padding: 10rem 20rem ; font-size: 16rem ; }
		.hero-side .hero-cta .btn svg { width: 15rem; margin-right: 10rem; }
	}

}

.main-video {

	.txt-vid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 800 80rem var(--font-mont); width: 100%; }
	.about-video {position: relative;width: 100%;height: calc(100vh - var(--header-height));background: #000;}
	.about-video video {display: block;width: 100%;height: 100%;object-fit: contain;pointer-events: none;}
	.scroll-anim { position: absolute; color: #fff; font-size: 14rem; display: flex; justify-content: center; flex-direction: column;align-items: center; gap: 10rem; bottom: 20rem; left: 50%; transform: translateX(-50%); }

	.about-video.sec02 {height: 100%;}
	.about-video.sec02 video{object-fit: cover;}

	@media(max-width: 1600px){
		.about-video { height: auto !important; }
	}
	@media(max-width: 1024px){
		.txt-vid {font-size: 24rem;}
		.about-video { width:100%; margin: 0 auto; margin-top:0; }
		.scroll-anim { align-items: center; gap:0; font-size:0; bottom:10rem;}
		.scroll-anim svg { width: 16rem; height: 100%; }
	}
}


.main-works {
    position: relative;
    padding-block: 75rem clamp( 50rem, calc(150 / var(--container) * 100vw), 150rem );
    
	.title { display: flex; justify-content: space-between; align-items: center; }
	.title h1 { font: 700 100rem var(--font-mont); text-transform: uppercase; }
	.title a { display: flex; align-items: center; gap: 20rem; font-size: var(--font-size-20); font-weight: 600; text-transform: uppercase; }
	.title a svg { rotate: 0deg; transition: all .3s; }
	.title a:hover svg { rotate: -45deg; transition: all .3s; }
	.board-gallery { }
	.board-gallery .board-gallery-list {display:flex;flex-wrap:wrap;gap: 30rem 10rem;padding-bottom: clamp(30rem, calc(75 / var(--container) * 100vw), 50rem);}
    .board-gallery .board-gallery-list li{width: calc((100% - 30rem) / 4);}
	.board-gallery .board-gallery-list a {display: flex;flex-direction: column;gap: 15rem;}
	.board-gallery .board-gallery-list a figure {position: relative;display: flex;aspect-ratio: 4/3; overflow: hidden;}
	.board-gallery .board-gallery-list a figure img { width: 100%; height: 100%; object-fit: cover; }
	.board-gallery .board-gallery-list a figure .hover-img { position: absolute; display: flex; width: 100%; height: 100%; background: rgb(34 34 34 / 70%); align-items: center; justify-content: center; opacity: 0; transition: all .3s; }
	.board-gallery .board-gallery-list a figure .hover-img:hover { opacity: 1; transition: all .3s; }
	.board-gallery .board-gallery-list a figure .hover-img img { max-width: 250rem; height: fit-content; object-fit: contain; }
	.board-gallery .board-gallery-list a hgroup { display: flex; flex-direction: column; font-size: var(--font-size-18); }
	.board-gallery .board-gallery-list a hgroup > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
	.board-gallery .board-gallery-list a hgroup p { font-weight: 200; font-size: var(--font-size-17); }
	.board-gallery .common-pagination { margin: 0; }
	.board-gallery .common-pagination .number { border-color: transparent; }
	.board-gallery .common-pagination .number[aria-current="page"] { border-color: #222; }
  	.board-list-empty { margin-block: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); }

	@media(max-width: 1024px){
		.title h1 { font-size: 50rem; }
		.board-gallery .board-gallery-list li{width:calc((100% - 25rem) / 2);}
	}
	@media(max-width: 767px){
		padding-top: 40rem;

		.title { align-items: flex-start; flex-direction: column; gap: 10rem; }
		.title h1 { font-size: 40rem; }
		.title a { gap: 10rem; }
		.board-gallery .board-gallery-list { gap: 30rem 10rem !important; }
        .board-gallery .board-gallery-list li{width:calc((100% - 10rem) / 2);}
		.board-gallery .board-gallery-list a figure .hover-img img { max-width: unset; padding: 10rem; }
	}

}