@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"] {overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.is_moved [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1s ease 0.1s forwards;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

 /* main common */
 .main-container {position: relative;}
 .main-title > *:has(.font-tp--00) {display: block; margin-bottom: 10rem;}
.font-tp--00{color: var(--g-01);}

 
/* main visual */
section[class^="main-"] {position: relative;}
.main-visual {padding-bottom: 200rem;}
.main-visual__symbol {position: absolute;left:0;bottom: 0;display: block;width: 100%;height:calc(89% - 25rem);z-index: -2;}
.main-visual__symbol span {position: sticky; top: 50%; display: block; width: 990rem; height: 990rem; margin: 0 auto;}
.main-visual__symbol img {position: absolute; left: 50%; top: 0%; height: 100%; aspect-ratio: 1/1; transform:translateX(-50%) rotate(0);}
.main-visual > h1 {position: absolute; left:50%; top:100rem; width: 78%; 
/* font-size: 22.5vw; font-weight: 700; */ color: transparent; 
background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
background-image:linear-gradient(90deg, #F7F7F7 0%, #FAFAFA 100%);
transform: translateX(-50%);
}
.main-visual > h1 img{width: 100%; opacity: .03;}
/* .main-visual > h1 {background: url(../img/layout/logo-big.png); width: 1904rem; height: 518rem; opacity: 0.3} */
.main-visual__text {z-index: 1; position: relative; padding-top: 420rem;}
.main-visual__text em {display: block; margin-bottom: 15rem;}
.main-visual__text em > span {letter-spacing: 10rem; color: var(--c-02); font-size: 25rem; font-weight: 800;}
.main-visual__text h2 {margin-left: -7rem;}
.main-visual__text .btn-circle {position: absolute; right: 0; top: 27%; z-index: 10;}
.main-visual__text .scroll-down {margin-top: 150rem;}

.main-visual .colum-slider{margin: 80rem auto 140rem;  }

.main-visual .colum-slider .swiper-slide{border:1px solid var(--br-01);}

.main-visual .colum-slider img{width: 70%; margin: 0 auto;}
.main-visual .colum-slider .swiper-slide{ background: #fff; padding: 30rem; }

.main-visual .colum-slider .swiper-controls{margin-top: 30px}
.main-visual .colum-slider .swiper-pagination{position: relative}

.main-visual .colum-slider .swiper-pagination-bullet {
    width: 10rem;
    height: 10rem;
    background-color: #111;
}

.main-visual .colum-slider .swiper-pagination-bullet-active {
    background: var(--c-01);
}


/* 웹지엘 */
.main-visual__img {overflow: hidden; position: absolute; left:0; top:0; width: 100%; height: 100%;}
.main-visual__img [data-item] {position: absolute;}
.main-visual__img [data-item="01"] {right: -134rem; top: 47vh; width: 75%;}
.main-visual__img [data-item="02"] {left: 0; top: 170vh; width: 56%; transform: translateX(-20%);}
.canvas-group{position: relative;margin-top: -240rem;height: calc(var(--height-full) * 12);z-index:-1;}
#canvas {position: sticky;top: 0;width: 100% !important;height: 100vh;object-fit: cover;   mix-blend-mode: multiply;
  background: transparent;}

@media (max-width:1200px){
	.main-visual{padding-bottom: 180rem;}
	.main-visual > h1  {top: 83rem;}
	.main-visual__text {display: flex; height: var(--height-full); align-items: center; padding-top: 0;}
	.main-visual__text .wrap {width: 100%;}
	.main-visual__text .btn-circle {top: 100%;}
	.main-visual__text .scroll-down {position: absolute; bottom: -20vw; margin-top: 0; }

	#canvas{height: 70vh;}
}

@media (max-width:1023px){
	.main-visual > h1 {top: 60rem;}
	.main-visual__text {display: block; height: auto; padding-top: 247rem;}
	.main-visual__text .wrap {width: auto;}
	.main-visual__text em > span {font-size: 23rem;}
	.main-visual__text .scroll-down {position: relative; bottom: auto; margin-top: 11vh;}
	.main-visual__text .btn-circle {top: 78%;}
	.main-visual__img {position: relative; width: 100%;}
	.main-visual__img [data-item="01"] {position: relative; right: auto; top: auto; margin: 0 auto;}
	.main-visual__img [data-item="02"] {display: none;}

	.canvas-group{margin-top:-120rem;}
	#canvas{top:32vh; height:40vh;}
   .main-visual .colum-slider img{width: 80%;}
}

@media (max-width:540px){
	.main-visual > h1 {top: 77rem;}
	.main-visual__text {padding-top: 158rem;}
	.main-visual__text em {margin-bottom: 9rem;}
	.main-visual__text em > span {font-size: 15rem; letter-spacing: 4rem;}
	.main-visual__text h2 {margin-left: -3rem;}
	.main-visual__text .scroll-down {display: none;}
	.main-visual__text .btn-circle {top: 180rem;display: none;}
	.main-visual__img {margin-top: 73rem;}
	.main-visual__img [data-item="01"] {width: 85%;}

      .main-visual .colum-slider {margin: 50rem auto 100rem; }
    .main-visual .colum-slider img{width: 100%;}
	.canvas-group{margin-top:4vh;}
	#canvas{top:32vh; height:35vh;}
}

/* main product */
.main-product {height: var(--height-full);align-items: center;justify-content: center;/* margin-top: 45vh; */}
.main-product .main-title {filter: blur(1em);transition: var(--trans-02);transition-delay: .3s;}
.main-product .main-title.is_moved {filter: blur(0);}
.main-product__list {margin-top: 95rem;}
.main-product__list ul {padding-left: 34.67%;}
.main-product__list li {flex-shrink: 0; width: 550rem; margin: 0 16rem;}
.main-product__list li a {position: relative; display: block; width: 100%; height: 356rem; text-align: center; background: var(--gr-03);}
.main-product__list li a::before {opacity: 0; visibility: hidden; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--c-02); transition: var(--trans-01);}
.main-product__list li a:hover::before {opacity: 1; visibility: visible;}
.main-product__list li a p {position: absolute; left:0; bottom:0; width: 100%; padding: 20rem; color: var(--f-01); font-size: 17rem; font-weight: 600;}
.main-product__list li a img {position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; transform: translate(-50%, -50%);}
.main-product .btn-wrap {margin-top: 85rem;}

/* main video */
/* .main-video{height:var(--height-full); margin-top:-50rem;} */
.main-video{padding-top: 140rem;}
.main-video .colum-slider{padding-bottom: 50rem; position: relative;}
.main-video .colum-slider .swiper-controls{position: absolute; bottom: 10rem; left: 50%; transform: translateX(-50%);}
.main-video .colum-slider .swiper-pagination-bullet{width: 10rem; height: 10rem; background-color: #fff;}
.main-video .colum-slider .swiper-pagination-bullet-active{background: var(--c-01);}
.main-video__inr{position:relative; overflow:hidden; width:100%; height:100%; transform:scale(0.7);}
.main-video__item{width:100%; height:100%;}
.main-video__item > *{width:100%; height:100%; object-fit:cover;}
.main-video__text{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-video__text .wrap{height:100%;}
.main-video__text .main-title{display:flex !important; justify-content:center; width:50%; height:100%; margin-left:auto;}
.main-video__text .main-title::before{content:''; position:absolute; opacity:.74; top:50%; left:0; width:100%; height:50%; background:#000; transform:translateY(-50%); filter:blur(50rem);}
.main-video__text .main-title > *:has(.font-tp--00){margin-bottom:38rem;}
.main-video .btn-circle{position:absolute; top:50%; left:0; transform:translateY(-50%);}
.main-video__item.active + .main-video__text *.btn-circle.play span{background-image: url(../img/layout/ic-stop.svg);background-size: 20rem;}

@media (hover: hover) and (pointer: fine){
	.main-video__item.active + .main-video__text *.btn-circle.play:hover span {background-image: url(../img/layout/ic-stop_w.svg);}
}

@media all and (max-width:1023px){
	.main-product__list ul{padding-left:0; flex-wrap:wrap;}
	.main-visual__symbol span{width:500rem; height:500rem;}
	.main-product{height:auto;}
	.main-product__list ul{display:grid; margin:0 40rem; grid-template-columns:1fr 1fr; gap:20rem;}
	.main-product__list li{width:100%; margin:0;}
	.main-product__list{width:100%; margin-top:55rem;}
	.main-product__list li a img{transform:translate(-50%, -65%); max-width:80%;}
	.main-product__list li a{height:305rem;}
}

@media (max-width: 1023px){
	/* .main-video{height:710rem;} */
         .main-video {padding-top: 84rem;}

	.main-video__inr{transform:scale(1);}
	.main-video__text .main-title{width:100%; height:auto; padding-top:140rem; text-align:center;}
	.main-video__text .main-title > *:has(.font-tp--00){line-height:1.6; margin-bottom:20rem; padding:0rem 5rem;}
	.main-video .btn-circle{position:relative; top:0; top:-30rem; left:0; left:50%; transform:none; transform:translateX(-50%) scale(0.5);}
}

@media (max-width: 540px){
	.main-product__list{margin-top:45rem;}
	.main-product__list ul{margin:0 20rem; gap:10rem;}
	.main-product__list li a p{padding:20rem 10rem; font-size:15rem;}
	.main-product__list li a{height:195rem;}
	.main-product__list li a img{transform:translate(-50%, -79%);}
	.main-product .btn-wrap{margin-top:45rem;}
	.main-visual{padding-bottom:140rem;}
	.main-visual__symbol span{width:250rem; height:250rem;}
}

@media (max-width: 540px){
	/* .main-video{height:420rem;} */
    .main-video {padding-top: 54rem;}
	.main-video__text .main-title em > span{padding:0rem 20rem; font-size:11rem;}
	.main-video__text .main-title > *:has(.font-tp--00){margin-bottom:15rem;}
	.main-video .btn-circle{top:-100rem; transform:translateX(-50%) scale(0.3);}
	.main-video__text .main-title{padding-top:100rem;}

    .main-video .colum-slider .swiper-pagination,
    .main-visual .colum-slider .swiper-pagination{gap: 10rem;}
    .main-video .colum-slider .swiper-pagination-bullet{width: 6rem; height: 6rem; background-color: #fff;}
    .main-visual .colum-slider .swiper-pagination-bullet{width: 6rem; height: 6rem; }
}

/* main board */
.main-board {padding: 230rem 0 200rem;}
.main-board .main-title {margin-bottom: 53rem;}
.main-board__desc {position: absolute; right: 160rem; top: 80rem;}
.main-board__desc span {position: relative; display: block; width: 183rem; height: 183rem; background: url(../img/layout/symbol-red.svg) no-repeat center / contain; animation: rotate360 3s linear infinite;}
.main-board__desc span::before {opacity: .12; filter: blur(50rem); position: absolute; left: 50%; top: 50%; content:''; width: 300rem; height: 300rem; border-radius: 100%; background: var(--c-01); transform: translate(-50%, -50%);}
.main-board .btn-wrap {margin-top: 60rem;}
#bo_gall .gall_img .no_image,
.gallery-list__img:not(:has(img)),
.gallery-slide figure:not(:has(img)) {/*background: url(../img/main/temp.jpg) no-repeat center / cover !important;*/}


@media (max-width: 1023px){
	.main-board__desc{top:70rem; right:70rem;}
	.gallery-list li a{padding:35rem 35rem;}
	.main-board{padding:160rem 0 150rem;}
	.main-board__desc span{width:143rem; height:143rem;}
}

@media (max-width: 540px){
	.main-board{padding:80rem 0 100rem;}
	.main-board .main-title{margin-bottom:43rem;}
	.main-board__desc span{width:83rem; height:83rem;}
	.main-board__desc span::before{opacity:.3; width:120%; height:120%;}
	.main-board__desc{top:-40rem; right:30rem;}
	.main-board .btn-wrap{margin-top:40rem;}

	.gallery-list li a{display:flex; justify-content:space-between; align-items:flex-start; padding:25rem 20rem; flex-direction:column;}
	.gallery-list__img{width:100%; height:207rem; margin-top:30rem; min-width:auto;}
	.gallery-list__link,
	.gallery-list__title i{position:relative; bottom:0; margin-top:20rem;}
	.gallery-list__title p{margin-top:6rem; font-weight:300;}
}

/* main about */
.main-about {padding-top: 290rem;}
.main-about figure {position: relative; width:100%; height:1000rem; background-image:url(../img/main/main-global-bg.jpg);}
.main-about__inr {position: relative;}
.main-about__title {z-index: 1; position: absolute; left:0; top: 180rem; width: 100%;}
.main-about__title h3 {position: absolute; display: inline-block; color: var(--b-01); font-size: var(--font-size-138); font-weight: 700;text-transform: uppercase; white-space: nowrap;}
.main-about__title h3:nth-child(1) {left: -150rem;}
.main-about__title h3:nth-child(2) {right: 0; top: 150rem;}
.main-about__text {opacity: 0;position: absolute;right: 0;bottom: 125rem;padding-left: 130rem;width: 60%;}
.main-about__text p {margin-top: 18rem; color: #646464;}
.main-about .btn-wrap {margin-top: 115rem;}

@media (max-width:1680px){
	.main-about__title h3:nth-child(1) {left: -30rem;}
}

@media (max-width:1600px){
	.main-about__title h3 {font-size: var(--font-size-120);}
	.main-about__title h3:nth-child(2) {top: 130rem;}
	.main-about__text {padding-right: 60rem;}
	.main-about__text br {/* display: none; */}
}

@media (max-width:1023px){
	.main-about figure{height:370rem;}
	.main-about__title h3:nth-child(2){top:90rem;}
	.main-about__title{top:150rem; left:20rem;}
	.main-about__text{position:relative; opacity:1; bottom:0; width:100%; margin-top:40rem; padding-left:0; padding-left:40rem;}
	.main-about .btn-wrap{margin-top:55rem;}
}

@media (max-width:540px){
	.main-about__text{padding-right:20rem; padding-left:20rem;}
	.main-about__text br{display:none;}
	.main-about .btn-wrap{margin-top:35rem;}
	.main-about__text h4{max-width:290rem;}
	.main-about__title{position:relative; top:-64rem; left:0; text-align:center;}
	.main-about{padding-top:140rem;}
	.main-about__title h3:nth-child(1){left:0;}
	.main-about__title h3:nth-child(2){top:42rem; right:auto; left:0;}
	.main-about__title h3{width:100%; font-size:37rem; text-align:center; white-space:normal;}
}

/* main bottom */
.main-bottom {padding-top: 455rem;}
.main-bottom__symbol {position: absolute; left: 50%; top: 180rem; width: 547rem; width: 547rem; transform: translateX(-50%);}
.main-bottom__symbol img {width: 100%;}
.main-bottom__inr {padding-top: 100rem;padding-bottom: 350rem;-webkit-backdrop-filter: blur(32rem);backdrop-filter: blur(32rem);border-top: 1px solid var(--br-01);background: rgba(254, 254, 254, .39);}
.main-bottom__inr h3 span {letter-spacing: 30rem; font-size: var(--font-size-60); font-weight: 700; color:var(--b-01); text-transform: uppercase;}
.main-bottom__inr p {margin-top: 30rem;}
.main-bottom__inr p span {color: var(--b-01);}
.main-bottom__inr > img {position: absolute;left: 50%;bottom: 100rem;width: 400rem;transform: translateX(-50%);opacity: 0.5;}
.main-bottom .btn-wrap {margin-top: 30rem;}

@media (max-width:540px){

    [lang="en-US"] .main-bottom__inr p span{padding: 0 20rem;}
	.main-bottom{padding-top:95rem;}
	.main-bottom__symbol{display:block; position:sticky; left:auto; width:50%; margin:0 auto; letter-spacing:0 !important; transform:none;}
	.main-bottom__inr{margin-top:-90rem; padding-top:80rem; padding-bottom:320rem;}
	.main-bottom__inr h3 span{letter-spacing:13rem;}
	.main-bottom__inr p{margin-top:17rem;}
	.main-bottom *.btn-basic{display:inline-flex;}
	.main-bottom .btn-wrap{margin-top:30rem;}
	.main-bottom__inr > img{bottom:70rem; width:278rem;}
}