@charset "utf-8";

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

/* **************************************** *
 * 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
 * **************************************** */

/* common */
.main h3{margin-top:11rem; font-size: 80rem; font-family: var(--lang-en);}

/* main visual */
.main-visual{height:var(--height-full);position: relative;overflow: hidden;width: 100%;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important; background-color: transparent !important;}
.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{width:100%;}
.main-visual .swiper-pagination{display:flex; flex-direction: column; gap:27rem; position: relative; margin-top: 27rem;}
.main-visual .swiper-pagination-bullet{background: var(--f-01); width: 10rem; height: 10rem; border-radius: 40rem;}
.main-visual .scrolldown{position: absolute;left: 50%;bottom: 52rem;z-index: 100;display: flex;transform: translate(-50%, -50%);}
.main-visual .scrolldown span{color: #fff;font-size: 16rem;font-family: var(--lang-en);font-weight: 800;}
.main-visual .scrolldown i{display: block;width: 20rem;height: 20rem;margin-left: 11rem;background: url(../img/main/scorll-down.svg) no-repeat;background-size: contain;}

.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__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;top: 44%;left:100rem;z-index:999;width:auto;display: flex;align-items: center;flex-direction: column;justify-content: center;}
/* .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__text{position:absolute;top: 41vh;width:100%;text-align:center;color:#fff;}
.main-visual__text h2{overflow:hidden;line-height: 1.3;font-weight: 700;font-size: 82rem;letter-spacing:-0.5rem;}
.main-visual__text p{margin-top:-5rem; font-weight:700; font-size:45rem; font-family: var(--lang-en);}
.main-visual__text p i{color: var(--c-01);}

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{width:100%; transition:all 5s ease;}

.main-visual__play-wrap{width: 55rem; height: 55rem; position: relative;}
.main-visual__play{position:absolute; top:0; left:0;  z-index:99999; background:#fff; width: 55rem; height: 55rem; border-radius: 100%; background-color: transparent; border:1px solid #fff; display: flex; align-items: center; justify-content: center; cursor:pointer;}
.main-visual__play i{display: block;}
.main-visual__play.pause i{width: 11rem; height: 12rem; background: url(../img/main/pause.svg) no-repeat; background-size: contain;}
.main-visual__play.play i{width: 15rem; height: 16rem; background: url(../img/main/play.svg) no-repeat; background-size: contain; }
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

.main-visual__video{position: absolute;width: 100%;display: block;top: 0;left: 0;height: 100%;}
.main-visual__video iframe{object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}

@media (min-aspect-ratio: 16/9) {
  .main-visual__video iframe{height: 56.25vw;  }
}
@media (max-aspect-ratio: 16/9) {
	.main-visual__video iframe{width: 177.78vh;  }
}

@media all and (max-width:1023px){
	.main-visual{min-height: 600rem;}
	.main-visual__text h2 {
		font-size: 50rem;
	}
.main-visual__controls {
    left: 50rem;
    top: 39vh;
}

.main-visual__play {
    width: 100%;
    height: 100%;
}
.main-visual__play-wrap {
    width: 45rem;
    height: 45rem;
}
.main-visual .swiper-pagination-bullet {
    width: 8rem;
    height: 8rem;
}
.main-visual .scrolldown span {
    font-size: 14rem;
}
.main-visual .scrolldown i {
    width: 18rem;
    height: 18rem;
}










}

@media all and (max-width:540px){
	.main-visual__text{top: 46vh;}
	.main-visual__text h2{line-height: 1.3;font-size: 33rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
	.main-visual__count{margin:0 10rem; font-size:15rem;}
	.main-visual__btn{font-size:14rem;}

.main-visual__controls {
    display: none;
}
.main-visual .scrolldown {
    bottom: 22rem;
}


}

.main-grobal{background-color: #fff; position: relative; padding-top: 256rem; box-sizing: border-box; padding-bottom: 146rem;}

.main-grobal__text{position: absolute;  width: 100%; text-align: center; z-index: 3; }
.main-grobal__text .wrap{padding-top: 373rem;}
.main-grobal__text--wrap{display: flex; justify-content: space-between;}
.main-grobal__text--wrap *{font-family: var(--lang-ko);}
.main-grobal__text--wrap span{display: inline-flex; font-size: 90rem; gap: 52rem;}
.main-grobal__text--wrap i{color: var(--c-01); font-weight: 600; position: relative; top: -6rem;}
.main-grobal__text--wrap strong{}
.main-grobal__text--wrap span:nth-child(2){padding-top: 170rem;}
.main-grobal__image{border-radius: 900rem; overflow: hidden; position: absolute; width: 550rem; height: 880rem; top: 400rem; left: 50%;transform: translateX(-50%); border:25rem solid rgba(182,177,177,0.2) }
.main-grobal__image > img{width: 100%; height: 100%; object-fit: cover; left: 0; top: 0; position: absolute;}

.main-business{position: relative;margin-top: 130rem;}
.main-business .wrap{z-index: 1;}
.main-business .main-business__bg{position: absolute; z-index: 0; top:36%;}
.main-business__title{width:calc(35% - 100rem);/* margin-top: 140rem; */margin-left: 265rem;margin-right:100rem;}
.main-business__title span{color:#ccc; font-size:20rem; font-weight:bold;}
.main-business__title p{color: #464646; font-size:20rem; margin-top: 32rem;margin-bottom: 85rem; }
.main-business__title a{font-family: var(--lang-en); font-weight: bold; color: #c3c3c3;}
.main-business__title .swiper-controls{display:flex;}

.main-business .swiper-slide{background:none; overflow: visible; transition:0.5s }
.main-business__slider{padding-top: 60rem;}

.main-business .swiper-slide-active{}
.main-business .swiper-slide-active .main-business__item{transition:0.5s;  transform: translateY(-60rem);}
.main-business .swiper-slide-active .main-business__image{margin-top: 0;box-shadow: 15rem 28rem 31rem rgba(0,0,0,0.15);}
.main-business .swiper-slide-active .main-business__image:after{content:''; position:absolute;box-shadow:30rem 30rem 30rem rgba(0,0,0,0.2)}
/*.main-business .swiper-slide-active .main-business__image:before{z-index:1;content:'';position:absolute;left:0;bottom:0;width:100%;height: 100%;display:block;background: linear-gradient(rgb(255 255 255 / 0%),rgb(255 255 255 / 0%), rgb(245 62 62 / 60%));}*/
.main-business .swiper-slide-active span{opacity:1;}

.main-business .swiper-slide .main-business__item{transition:0.5s}
.main-business .swiper-controls > div{display:block; position:relative; top:unset; margin-top:0; box-sizing:border-box; font-size:0}
.main-business .swiper-controls > div i{display:block; width:60rem; height:60rem;border-radius:50%; }
.main-business .swiper-controls .button-prev i{margin-right:10rem; left:0; right:0;  border:4rem solid #ddd; background: #fff url(../img/main/slide-btn.png)no-repeat center; opacity:1; transform:rotate(0);}
.main-business .swiper-controls .button-next i{margin-right:10rem; left:0; right:0;  border:4rem solid #282828; background: #282828 url(../img/main/slide-btn-w.png)no-repeat center; opacity:1; transform:rotate(0);}

.main-business__inr{overflow: hidden;display: flex;width: 100%;padding-top: 90rem;padding-bottom:100rem;position: relative;align-items: center;}
.main-business__list {width: 100%;}
.main-business__inr:after{z-index:-1; content:'';position:absolute;right: 0;top:0;width: 57%;height: 100%;background:#f8f8f8;border-radius:30rem 0 0 30rem;}
.main-business__list li:nth-child(even){/* display: flex; *//* justify-content: right; */}
.main-business__list li a{display: block; width: 100%; position: relative;}
.main-business__list li a .link-button{opacity: 0; position: absolute; bottom: 0; z-index: 10; right: 0; background-color: var(--c-01); border-color: var(--c-01); }
.main-business__list li a .link-button path{ stroke: #fff !important;}
.main-business__list p{line-height: 1.3; margin-bottom:17rem; font-size: 27rem; font-family: var(--lang-en); font-weight: bold; margin-top:48rem; text-transform: uppercase; letter-spacing: -1rem;}
.main-business__list span{opacity:0.3; color:#282828; font-weight:bold;}
.main-business__image{overflow: hidden; border-radius: 20rem; width: 100%; position: relative;}
.main-business__image img{} 
.main-business__itemBox{width:65%;}
.main-business__dot{position: absolute; z-index: 2;}
.main-business__dot.dot01{top: 0; left: 25%;}
.main-business__dot.dot02{top: 247rem; right: 130rem;}
.main-business__dot.dot03{left: 90rem; top: 44%;}
.main-business__dot.dot04{bottom: 240rem; left: 53%;}

@media (hover: hover) {
    .main-business__list li a:hover .link-button{
     opacity: 1;
    }
  }

@media all and (max-width:1680px){
	.main-business__title{margin-left:155rem;}
}

@media all and (max-width:1480px){
	.main-business__inr:after{width:50%; height:90%}
}

@media all and (max-width:1023px){
	.main-business__title{padding:0 40rem; width:100%; margin:0}
	.main-business__title span{font-size:16rem}
	.main-business__title p{margin:10rem 0 25rem; font-size:16rem}
	.main-business__title p br{display:none;}
	.main-business__inr{display:block; padding-bottom:0}
	.main-business__inr:after{display:none;}
	.main-business__itemBox{width:100%;margin-top: 40rem;/* background: #f6f6f6; */padding: 0 40rem;}
	.main-business .swiper-controls > div i{width:50rem; height:50rem;}
	.main-business__slider{padding-top:0}
	.main-business .swiper-slide-active .main-business__item{    transform: translateY(0);}
	.main-business .swiper-container{overflow: visible;}
	.main-business__list p{margin-top:20rem; margin-bottom:10rem; font-size:20rem}
	.main h3{font-size:60rem}
	.main-business {
		margin-top: 30rem;
	}

	.main-business__image{border:1px solid #f9f9f9}
}

@media all and (max-width:860px){
	.main h3{font-size:42rem}
}

@media all and (max-width:540px){
	.main-business__title{padding:0 20rem;}
	.main-business__title span{font-size:13rem}
	.main h3{margin-top:6rem; font-size:29rem}
	
	.main-business .swiper-controls .button-prev i{border:3rem solid #ddd;}
	.main-business .swiper-controls .button-next i{border:3rem solid #282828}
	.main-business .swiper-slide-active .main-business__image{box-shadow: 8rem 11rem 23rem rgba(0, 0, 0, 0.13)}

	.main-business__inr {
		padding-top: 30rem;
	}
}

.main-bottom{background-color: #292929; padding-top:0;}
.main-customer__title {position: absolute; left:265rem; top: 140rem; z-index: 1;}
.main-customer__title span{font-size: 24rem; color: #646464; text-transform: uppercase; margin-bottom:26rem; }
.main-customer__title h3{color: #fff; font-size:64rem;text-transform: uppercase;}
.main-customer__title h3 b{color: var(--c-01);}
.main-customer__title h3 em{color:#808080}

@media all and (max-width:1680px){
	.main-customer__title{left:165rem;}
}

@media all and (max-width:1023px){
	.main-customer{padding-top:100rem;}
	.main-customer__title{position:static; padding:0 40rem;}
	.main-customer__title h3{font-size:60rem}
	.main-customer__title > span{font-size:16rem}
}

@media all and (max-width:860px){
	.main-customer__title h3{font-size:42rem}
}

@media all and (max-width:540px){
	.main-customer__title{padding:0 20rem;}
	.main-customer__title > span{margin-bottom:10rem;font-size:13rem}
	.main-customer{padding-top:60rem;}
	.main-customer__title h3{font-size:29rem;}
}

.main-question__box{background: url(../img/main/main-question-bg.jpg) no-repeat; background-size:cover; padding-top:70rem; padding-bottom:70rem; box-sizing: border-box;}
.main-question__box h3{color: #fff;margin-bottom: 8rem;opacity: 1;font-size:48rem}
.main-question__box h3 > span{opacity: 0.5;}
.main-question__box p{color: #fff; line-height: 1.777; margin-bottom: 23rem; font-size: 18rem;}
.main-question__box .link-button{position:absolute;right:0;top: 50%;width: 133rem;height: 133rem;border-color: #7b7b7a;margin-left: auto;transform: translateY(-50%);}
.main-question__box .link-button i:before,
.main-question__box .link-button i:after{display:block; background: url(../img/main/arrow-more-w.svg) no-repeat; background-size: 100%; content: ""; position: absolute; right: calc(50% - 10.5rem); top: 50%; transform: translateY(-50%); transition: opacity 0.2s, margin 0.2s; width: 21rem; height: 17rem; }
.main-question__box .link-button *{stroke: #9c9c9c;}
.main-question__box .link-button:hover{border-color: #e12424; }
.main-question__box .link-button:hover{background:#e12424; transition: background 0.4s 0.3s, border 0.4s 0.3s;}
.main-question__box .link-button:hover i:before{-webkit-animation: arrowAnimationBefore 0.3s forwards 0.3s; animation: arrowAnimationBefore 0.3s forwards 0.3s;}
.main-question__box .link-button:hover i:after{-webkit-animation: arrowAnimationAfter 0.3s forwards; animation: arrowAnimationAfter 0.3s forwards;}
.main-question__box .wrap{position: relative; z-index: 2;}
.main-question__box i{display:block; width:21rem; height:17rem; position: absolute; left: 50%; transform: translateX(-50%);}
.main-question__box i.bg01{top: 0;}
.main-question__box i.bg02{bottom: 0;}

@-webkit-keyframes arrowAnimationAfter {
  from {
    margin-right: 0;
    opacity: 1;
  }
  to {
    margin-right: -58rem;
    opacity: 0;
  }
}
@keyframes arrowAnimationAfter {
  from {
    margin-right: 0;
    opacity: 1;
  }
  to {
    margin-right: -58rem;
    opacity: 0;
  }
}

@-webkit-keyframes arrowAnimationBefore {
  from {
    margin-right:58rem;
    opacity: 0;
  }
  to {
    margin-right: 0;
    opacity: 1;
  }
}
@keyframes arrowAnimationBefore {
  from {
    margin-right: 58rem;
    opacity: 0;
  }
  to {
    margin-right: 0;
    opacity: 1;
  }
}

@media all and (max-width:1023px){
	.main-question__box p{font-size:16rem}
}

@media all and (max-width:860px){
	.main-question__box h3{font-size:42rem;}
	.main-question__box .link-button:hover{transition: all 0.3s 0s, border 0.4s 0.3s;}
	.main-question__box .link-button{width:80rem; height:80rem;}
	.main-question__box .link-button i:after{display:none;}
	.main-question__box .link-button:hover i:before{animation: none;}

	@-webkit-keyframes arrowAnimationAfter {
	  from {
		margin-right: 0;
		opacity: 1;
	  }
	  to {
		margin-right: 0;
		opacity: 0;
	  }
	}
	@keyframes arrowAnimationAfter {
	  from {
		margin-right: 0;
		opacity: 1;
	  }
	  to {
		margin-right: 0;
		opacity: 0;
	  }
	}

	@-webkit-keyframes arrowAnimationBefore {
	  from {
		margin-right:0;
		opacity: 0;
	  }
	  to {
		margin-right: 0;
		opacity: 1;
	  }
	}
	@keyframes arrowAnimationBefore {
	  from {
		margin-right: 0;
		opacity: 0;
	  }
	  to {
		margin-right: 0;
		opacity: 1;
	  }
	}
}

@media all and (max-width:540px){
	.main-question__box{padding:60rem 0}
	.main-question__box h3{font-size:29rem;}
	.main-question__box .link-button{position:static; width:55rem; height:55rem; margin-left:0; transform: translateY(0);}
	.main-question__box .link-button i:before{right:auto; left:50%; width: 16rem; height: 14rem; transform: translate(-50%, -50%); }
	.main-question__box p {
		font-size: 15rem;
	}
}