@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;}

.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-title em{margin-bottom: 9rem; display: block;}
.main-title h2{}
.main-title p{ margin-top: 17rem;}

/* main visual */
.main-visual{/* height:var(--height-full); */ height: 1023rem; position: relative; overflow: hidden;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important; position: relative; z-index: 3; background-color: transparent;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap-wide{width:100%;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__video{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 14rem;}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;bottom: 60rem;left:0;z-index:999;width:100%;}
.main-visual__controls > div{display:flex;align-items:center;justify-content: center;}
.main-visual__count{display:flex; align-items:center; margin:0 50rem; font-size:17rem; color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}
.main-visual__btn.button-next::after{transform:rotate(-90deg);}
.main-visual__btn.button-prev::after{transform: rotate(90deg);}

.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--f-01);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:14rem; height:14rem; background:#fff;}
.main-visual .swiper-pagination-bullet-active{opacity:1;}

.main-visual .bg-video{position: absolute; width: 100%; height: 100%; left:0; top: 0; z-index: 0;}
.main-visual .bg-video img{width: 100%; height: 100%; object-fit: cover;}

.main-visual__text{position:absolute; top:398rem; width:100%;  color:#fff;}
.main-visual__text h1{overflow:hidden;}

.main-visual__text p{margin-bottom:26rem; font-weight:700; font-size:20rem;}


.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

@media (max-width:1480px){

}

@media (max-width:1023px){
	.main-visual{min-height: 600rem; height: var(--height-full);}
}

@media (max-width:860px){
	
}

@media (max-width:540px){
	.main-visual__text{top:280rem;}
	/* .main-visual__text h2{line-height:1.2; font-size:31rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;} */
	.main-visual__text p{margin-bottom: 15rem; font-size: 15rem;}
	.main-visual__count{margin:0 10rem; font-size:15rem;}
	.main-visual__btn{font-size:14rem;}

	.main-title em{margin-bottom: 5rem;}
}


.main-tech{padding-top: 55rem;}
.main-tech__title {justify-content: space-between; margin-bottom: 55rem;}
.main-tech__title p{color: var(--b-02);}

.main-tech__conts{gap: 20rem;}
.main-tech__item{border-radius: var(--bdr-20); overflow: hidden; position: relative; height: 798rem; cursor: pointer;}
.main-tech__item.v1{background: url(../img/main/main-tech01.jpg) no-repeat; background-position: 50% 50%; background-size:cover}
.main-tech__item.v2{background: url(../img/main/main-tech02.jpg) no-repeat; background-position: 50% 50%; background-size: cover;}
.main-tech__item.v3{background: url(../img/main/main-tech03.jpg) no-repeat; background-position: 50% 50%; background-size: cover;}
.main-tech__hover{width: 100%; border-radius: var(--bdr-20); transition: all .3s; padding: 44rem; box-sizing: border-box; position: absolute; left: 0; bottom: 0;}
.main-tech__hover p{/* margin-top: 13rem;  */font-weight: 200;  max-height: 0px; overflow: auto; opacity: 0; transition: all .4s;}
.main-tech__hover p::-webkit-scrollbar{display:none;}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
	.main-tech__item:hover .main-tech__hover{background: rgba(51, 51, 51, 0.27); backdrop-filter: blur(5px); }
	.main-tech__item:hover .main-tech__hover p{margin-top: 13rem; height: auto;  opacity: 1; max-height: 100rem;}
}

@media (max-width:1480px){
	.main-tech__item{height: 620rem;}
	.main-tech__hover{padding: 30rem;}
}
@media all and (max-width:1200px){
	.main-tech__item{height: 480rem;}
}
@media all and (max-width:1023px){
	
	.main-tech__hover{padding: 0 22rem 32rem; background: linear-gradient(180deg, rgba(51, 51, 51, 0.00) 0%, rgba(51, 51, 51, 0.80) 100%); border-radius: 0;	}
	.main-tech__hover p{max-height: inherit; opacity: 1; margin-top: 13rem; }
	.main-tech__hover p br{display: none;}
	.main-tech__title{flex-direction: column; gap: 26rem;}
	

}
@media (max-width:860px){
	.main-tech__conts{grid-template-columns: 1fr;}

}
@media (max-width: 540px){
	.main-tech{padding-top: 0;}
	.main-tech__hover{padding: 22rem;}
	.main-tech__item{height: 350rem;}
	/* .main-tech__conts{height: 14rem;} */
	.main-tech__title p br{display: none;}
}

.main-product{padding-top: var(--padding);}
.main-product__wrap{justify-content: space-between;}
.main-product__grid{gap:20rem; width: 560rem; margin-top: 106rem;}
.main-product__item{border-radius: var(--bdr-20); width: 270rem; height: 270rem;}
a.main-product__item{border: 1px solid var(--br-01); box-sizing: border-box; padding: 23rem; position: relative;;}
a.main-product__item .btn-text{position: absolute; bottom: 27rem; right: 23rem;}
a.main-product__item > em{font-weight: bold !important;}
.main-product__item.v1{background: url(../img/main/main-product01.jpg) no-repeat; background-size: cover;}
.main-product__item.v2{background: url(../img/main/main-product02.jpg) no-repeat; background-size: cover;}
.main-product__item.v3{background: url(../img/main/main-product03.jpg) no-repeat; background-size: cover;}
.main-product__video{max-width: 705rem;}
.main-product__video *{max-width: 100%;}
.main-product__video > div{position: sticky; top: 30rem; overflow: hidden; border-radius: var(--bdr-20)  ;}

@media (max-width:1480px){
	.main-product__video{max-width: 450rem;}
}
@media all and (max-width:1200px){
	.main-product__video{max-width: 330rem;}
	.main-product__grid{margin-top: 46rem;}
	
}
@media all and (max-width:1023px){
	.main-product__wrap{flex-direction: column; gap: 40rem;}
	.main-product__grid{grid-template-columns: 1fr 1fr 1fr 1fr; width: 100%;}
	.main-product__item{width: auto; height: 0; padding-bottom: 100%;}
	a.main-product__item{ padding: 0; padding-bottom: 100%;}
	a.main-product__item > em{display: block; margin: 22rem; font-size: 26rem;}
	.main-product__video,.main-product__video *{width: 100%; max-width: 100%;}
	

}
@media (max-width:860px){
	.main-product__grid{grid-template-columns: 1fr 1fr;}
	a.main-product__item > em{margin: 32rem; font-size: 34rem;}
}
@media (max-width: 540px){
	.main-product__grid{grid-template-columns: 1fr; position: relative; padding-bottom: 90rem;}
	a.main-product__item{padding-bottom: 0; height: auto; padding: 0 22rem; height: 70rem; width: 100%; position: absolute; bottom: 0; left:0; display: flex; align-items: center; justify-content: space-between;}
	a.main-product__item > em{margin: 0; font-size: 22rem; }
	a.main-product__item .btn-text{position: relative; bottom: 0; right: 0;}

	
}

.main-flex{padding: var(--padding) 0;}
.main-flex__list{border-radius: var(--bdr-20); overflow: hidden; justify-content: space-evenly; }
.main-flex__list li { height: 750rem; flex: 1; min-width: 0; transition: all .5s; cursor: pointer; }

.main-flex__title{background-color: var(--c-01);height: 100%;width: 100%;display: flex;align-items: flex-end;transition: opacity .3s, visibility .3s;justify-content: center;}
.main-flex__title em{color: var(--f-01); font-weight: 500; position: relative; flex-shrink: 0;/* width: 100%; */text-align: left;transform: translate(43%, 100%) rotate(-90deg);transform-origin: left top;transition: opacity .3s;padding-left: 60rem;display: inline-block;/* height: 100%; */} 
.main-flex__title em::after{content: ""; transition: opacity .3s; width: 20rem;height: 20rem;background: url(../img/common/ic-arrow_w.svg) no-repeat;background-size: contain;margin-left: 20rem;display: inline-block;opacity: 0;}
.main-flex__conts{min-width: 0; width: 0; position: relative; box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;transition: all .4s;}
.main-flex__conts::before{content: ""; opacity: 0; position: absolute; width: 100%; height: 0; background: linear-gradient(180deg, rgba(51, 51, 51, 0.00) 0%, rgba(51, 51, 51, 0.80) 100%); left: 0; bottom: 0;}
.main-flex__conts *:not(div){color: var(--f-01); font-family: var(--lang-ko); display: block; opacity: 0; visibility: hidden; transform: translateY(30rem); transition: all 1s; }
.main-flex__conts div{overflow: hidden; position: relative; z-index: 1;}
.main-flex__conts strong{transition-delay: .5s; margin-bottom: 52rem;}
.main-flex__conts em{font-size: 28rem; font-weight: 700; font-family: var(--lang-ko);transition-delay: .6s; margin-bottom: 10rem;}
.main-flex__conts p{transition-delay: .7s;}


.main-flex__item.active .main-flex__title{display: none;}
.main-flex__item.active .main-flex__conts{ opacity: 1; visibility: visible;}
.main-flex__item.active .main-flex__conts::before{height: 200rem; opacity: 1;}
.main-flex__item.active .main-flex__conts *:not(div){ opacity: 1; visibility: visible; transform: translateY(0);}


@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
    .main-flex__item:hover .main-flex__title em::after{opacity: 1;}
}
@media (min-width:1024px){
    .main-flex__conts{height: 100%; padding: 60rem;}
    .main-flex__item.active{ min-width: 850rem;}
    .main-flex__item.active .main-flex__conts{max-width: 850rem; width: 100%;}
    .main-flex__list li + li{border-left: 1px solid var(--br-01);}
    .main-flex__item.active.v1{background-image: url(../img/main/main-flex02.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__item.active.v2{background-image: url(../img/main/main-flex03.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__item.active.v3{background-image: url(../img/main/main-flex04.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__item.active.v4{background-image: url(../img/main/main-flex01.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__item.active.v5{background-image: url(../img/main/main-flex05.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__item.active.v6{background-image: url(../img/main/main-flex06.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__item.active.v7{background-image: url(../img/main/main-flex07.jpg); background-size: cover; background-position: 50% 50%;}

}
@media (max-width:1480px){
    .main-flex__item.active{min-width: 700rem;}
    .main-flex__item.active .main-flex__conts{max-width: 700rem;}
    .main-flex__conts em{font-size: 26rem;}
}
@media all and (max-width:1230px){
    .main-flex__conts p br{display: none;}
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
	.main-flex__list{flex-direction: column;}
    .main-flex__list li{height: auto; flex: none;}
	.main-flex__title em{transform: none;}
	.main-flex__title{display: block; padding: 24rem 0;}
    .main-flex__conts{min-width: 100%; width: 100%; padding: 0; /* padding:290rem 40rem 40rem 40rem;  */height: 0}

    .main-flex__item.active{min-width: 100%}
    .main-flex__item.active .main-flex__conts{max-width: 100%; height: auto; padding: 290rem 40rem 40rem 40rem;}
	.main-flex__list li + li{border-top: 1px solid var(--br-01);}
    .main-flex__title em{padding-left: 40rem;}
    .main-flex__conts.v1{background-image: url(../img/main/main-flex01.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__conts.v2{background-image: url(../img/main/main-flex02.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__conts.v3{background-image: url(../img/main/main-flex03.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__conts.v4{background-image: url(../img/main/main-flex04.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__conts.v5{background-image: url(../img/main/main-flex05.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__conts.v6{background-image: url(../img/main/main-flex06.jpg); background-size: cover; background-position: 50% 50%;}
    .main-flex__conts.v7{background-image: url(../img/main/main-flex07.jpg); background-size: cover; background-position: 50% 50%;}

}
@media (max-width:860px){

    .main-flex__conts strong{margin-bottom: 32rem;}
    .main-flex__conts em{margin-bottom: 8rem;}

}
@media (max-width: 540px){
    .main-flex__title{padding: 16rem 0;}
    .main-flex__title em{padding-left: 20rem;}
    .main-flex__conts em{font-size: 17rem;}
    .main-flex__item.active .main-flex__conts{padding: 140rem 20rem 20rem 20rem;}
    .main-flex__conts strong{font-size: 24rem; margin-bottom: 26rem;}
}

.main-business{position: relative; padding-bottom: var(--padding);}
.main-business .main-business__title{position: absolute; left: 0; top: 0; height: 100%;}
.main-business .main-title{position: sticky; top: 40rem;}
.main-business .main-title .btn-basic{margin-top: 44rem;}
.main-busiess__grid{gap: 20rem; width: 1285rem; margin-left: auto;}
.main-busiess__grid li{border-radius: var(--bdr-20); position: relative; /* width: 415rem; height: 415rem; */ transition: .5s; }
.main-busiess__grid li::before{content: ""; padding-bottom: 100%; display: block;}
.main-busiess__grid li[data-busi]{background-color: var(--bg-01); /* cursor: pointer; */}
.main-busiess__grid li strong{font-weight: 600;transition: all .7s;}
.main-busiess__grid li p{margin-top: 8rem;color: var(--f-01);transition: all 1s;max-height: 0px;-ms-overflow-style: none; overflow: auto;opacity: 0}
.main-busiess__grid li p::-webkit-scrollbar{display:none;}
.main-busiess__grid li i{position: absolute; top: 40rem; right: 40rem; height: 65rem;}
.main-busiess__grid li i img{height: 100%; transition: .4s; position: absolute; right: 0; top: 0;}
.main-busiess__grid li i .hover{opacity: 0;}

.hoverable{transition: .5s linear;height: 100%;  position: absolute; left: 0; top: 0;  padding: 40rem; display: flex;flex-direction: column;justify-content: flex-end; }
.accordion {transform: transalte3d(0,0,0);}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
	.main-busiess__grid li[data-busi]:hover{background-color: var(--c-02); box-shadow: 24px 24px 30px 0px rgba(0, 0, 0, 0.20); z-index: 1;}
	.main-busiess__grid li:hover strong{color: var(--f-01);}
	.main-busiess__grid li:hover i .hover{opacity: 1;}
	.main-busiess__grid li:hover i .original{opacity: 0;}
	.hoverable.clicked p, .hoverable:hover p, .hoverable p:hover {max-height: 200rem;height: auto;opacity: 1;	}  

}


@media (max-width:1800px){
	.main-busiess__grid{width: 76%;}
}
@media (max-width:1480px){
	.main-busiess__grid{width: 82%;}
	.main-busiess__grid li i{height: 50rem;}
	.hoverable{padding: 28rem;}
	.main-busiess__grid li i{top: 30rem; right: 30rem;}
}
@media all and (max-width:1200px){
	.hoverable{padding: 24rem;}
	.main-busiess__grid li i{top: 24rem; right: 24rem;}
	.main-busiess__grid{width: 100%;}
	.main-business .main-business__title{position: relative;}
	.main-busiess__grid li:not(.accordion){display: none;}
	.main-business .main-business__title{margin-bottom: 42rem;}
	.main-business .main-title .btn-basic{position: absolute; bottom: 0; margin-top: 0; right: 0;}
	
}
@media all and (max-width:1023px){
	.main-busiess__grid{grid-template-columns: 1fr 1fr;}
	.main-busiess__grid li p{max-height: fit-content; opacity: 1; color: var(--b-02);}
	.main-busiess__grid li::before{padding-bottom: 0;}
	.hoverable{position: relative; padding-top: 100rem;}

}

@media (max-width:860px){
	.main-busiess__grid li i{height: 42rem;}
}
@media (max-width: 540px){
	.main-busiess__grid{grid-template-columns: 1fr; gap: 14rem;}
	.main-busiess__grid li strong br{display: none;}
	.hoverable{padding: 20rem; padding-top: 80rem;}
	.main-busiess__grid li i{height: 36rem; top: 22rem; right: 22rem;}
	.main-business .main-title .btn-basic{position: relative; margin-top: 20rem; display: inline-flex;}
	

}

.main-board{border-radius: var(--bdr-40); padding: 153rem 0 123rem;}
.main-board__title{justify-content: space-between; margin-bottom: 42rem;}

.main-board .gallery-slide{ background-color:transparent;}
.main-board .gallery-slide p{color: var(--b-02); margin-top: 6rem; white-space: nowrap; text-overflow: ellipsis;  overflow: hidden; font-family: var(--lang-ko);}
.gallery-slide figure{height: 212rem;}
.main-board .swiper-slide a{padding: 20rem 20rem 72rem 20rem; position: relative; border-radius: var(--bdr-20); background-color: var(--f-01);}
.gallery-slide .round-btn{ position: absolute; right: 30rem; bottom: 30rem; width: 54rem; height: 54rem; border-radius: 100%; border:1px solid #ddd; display: flex; align-items: center; justify-content: center;} 

@media (max-width:1480px){
    .main-board{padding: var(--padding) 0;}
}
@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
}
@media (max-width:860px){

}
@media (max-width: 540px){
    .gallery-slide figure{height: 160rem;}
    .main-board .wrap-wide{margin: 0 0 0 20rem;}
    .main-board__title{flex-direction: column; margin-bottom: 22rem;}
    .main-board__title *.btn-basic{display: inline-flex; margin: 0 auto;}
    .gallery-container{padding-bottom: 100rem;}
    .main-board__title  > div{position: absolute;bottom: 0;display: flex;justify-content: center;width: 100%;}
}

.main-bottom{padding: 100rem 0 117rem}
.main-bottom__wrap{gap: 20rem}
.main-bottom__link{display: flex; flex: 1; background-color: var(--bg-01); border-radius: var(--bdr-20); padding: 40rem; box-sizing: border-box;}
.main-bottom__image{min-width: 340rem; height: 237rem; border-radius: var(--bdr-20); overflow: hidden;}
.main-bottom__image img{width: 100%; height: 100%; object-fit:cover; object-position: 50% 50%;}
.main-bottom__conts{padding-left: 55rem; display: flex; flex: 1; flex-direction: column; justify-content: space-between;}
.main-bottom__conts .btn-text{margin-left: auto;}

@media (max-width:1480px){
	.main-bottom__image{min-width: 200rem; height: 180rem;}
	.main-bottom__conts{padding-left: 40rem;}
	.main-bottom__link{padding: 30rem;}
}
@media all and (max-width:1200px){
	.main-bottom{padding: 100rem 0;}
	.main-bottom__link{flex-direction: column;}
	.main-bottom__conts{padding-left: 0; padding-top: 24rem;}
	.main-bottom__conts .btn-text{margin-top: 42rem;}
}
@media all and (max-width:1023px){
	/*화면 768에 맞춰놓고 작업*/
}
@media (max-width:860px){
	.main-bottom{padding: 80rem 0;}
}
@media (max-width: 540px){
	.main-bottom{padding: 54rem 0;}
	.main-bottom__wrap{grid-template-columns: 1fr;}
	.main-bottom__link{padding: 22rem;}
	.main-bottom__conts .btn-text{margin-top: 26rem;}
	.main-bottom__conts{padding-top: 17rem;}
}


.btn-text{display: inline-flex; align-items: center; gap: 12rem; font-weight: 500; transition: all .4s;}
@media (hover: hover) and (pointer: fine){
	.btn-text:hover{ color: var(--c-01);}
	.btn-text:hover .link-round{background-color: var(--c-01);}
}

@media (max-width: 540px){
	.btn-text{font-size: 14rem; gap: 8rem;}
	
}