@import url("common.css");


/*** css 공통 ***/
.tbox{text-align:center; padding: 0 5% 30px; box-sizing:border-box;}
.tbox .fs18{padding: 8px 0 0; line-height: 150%;}


/* 화살표 */
.slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999;}
.slick-prev{background:url('/img/arrow_p.png') no-repeat center/100% auto;}
.slick-next{background:url('/img/arrow_n.png') no-repeat center/100% auto;}





/*** Visual ***/
#visual {width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual::after {content:''; width:100%; height:100px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.00) 100%); position:absolute; top:0; left:0; z-index:99;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; bottom:23%; transform:translate(-50%,0); z-index: 9999;}
#visual .visual_in .roll .v_txt .fs26 {display:block; color:var(--white); transition:all .6s 0.4s linear; transform:translateY(60px); opacity:0; margin:0 0 5px;}
#visual .visual_in .roll .v_txt .fs110 {color:var(--white); transition:all .6s 0.4s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs18 {color:var(--white); transition:all .6s 0.2s linear; transform:translateY(60px); opacity:0; margin: 40px 0 0;}

#visual .visual_in .roll .v_txt .btn-wrap {transform:translateY(60px); opacity:0; transition:all .6s 0.6s linear; }
#visual .visual_in .roll .v_txt .moreBtn {letter-spacing:0; font-family:var(--eng); color:var(--white); border-color:var(--white); font-weight: 700; font-size:0.888rem; margin:80px 0 0;transition:all 0.5s;}
#visual .visual_in .roll .v_txt .moreBtn::after {background:var(--white);transition:all 0.5s;}
#visual .visual_in .roll .v_txt .moreBtn:hover {background:var(--white); color:var(--black);transition:all 0.5s;}
#visual .visual_in .roll .v_txt .moreBtn:hover::after {background:var(--black); transition:all 0.5s;}
#visual .visual_in .roll .v_bg {position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg::after {content:''; width:100%; height:100%; background:var(--black); opacity:0.2; position:absolute; top:0; left:0;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual .visual_in .roll .v_bg .bg.mo {display:none;}
#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}


/* 스크롤 */
/* 스크롤 다운 */
.no-scroll-view {position:absolute; bottom:50px; right:calc((100% - 1560px) / 2); z-index:999;}
.no-scroll-view .no-scroll-inner{display: flex; align-items:center; flex-direction: row-reverse; }
.no-scroll-view .no-en{font-size:12px; padding: 0 13px 0 0; display: inline-block; font-weight:700; font-family:var(--eng); color:var(--white); line-height: 120%;}
.no-scroll-view .mouse_wrap {position:relative}
.no-scroll-view .mouse {background: var(--white) linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%); position: relative; width: 28px; height: 48px; box-sizing:border-box; border-radius: 100px; background-size: 100% 200%; animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite; mask: url(/eng/img/mouse_src.svg) no-repeat 50% 50%; mask-size:cover}
.no-scroll-view .mouse span{display: block; box-sizing:border-box; position: absolute; left:0; top:0; width: 100%; height: 100%; border-radius:100px;}

@keyframes colorSlide {
	0% {
		background-position: 0% 100%;
	}
	20% {
		background-position: 0% 0%;
	}
	21% {
		background-color: var(--white20);
	}
	29.99% {
		background-color: #fff;
		background-position: 0% 0%;
	}
	30% {
		background-color: var(--white20);
		background-position: 0% 100%;
	}
	50% {
		background-position: 0% 0%;
	}
	51% {
		background-color: var(--white20);
	}
	59% {
		background-color: #fff;
		background-position: 0% 0%;
	}
	60% {
		background-color: var(--white20);
		background-position: 0% 100%;
	}
	80% {
		background-position: 0% 0%;
	}
	81% {
		background-color: var(--white20);
	}
	90%, 100% {
		background-color: #fff;
	}
}


@keyframes nudgeMouse {
	0% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(8px);
	}
	30% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(8px);
	}
	60% {
		transform: translateY(0);
	}
	80% {
		transform: translateY(8px);
	}
	90% {
		transform: translateY(0);
	}
}

.no-scroll-view .mouse:before,
.no-scroll-view .mouse_wrap:after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.no-scroll-view .mouse:before {width: 24px; height: 44px; background-color: var(--white20); border-radius: 100px;}
.no-scroll-view .mouse_wrap::after {background-color: #fff; width: 6px; height: 6px; border-radius: 100%; animation: trackBallSlide 10s linear infinite;}

@keyframes trackBallSlide {

	0% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	6% {
		opacity: 1;
		transform: scale(0.9) translateY(10px);
	}
	14% {
		opacity: 0;
		transform: scale(0.4) translateY(48px);
	}
	15%, 19% {
		opacity: 0;
		transform: scale(0.4) translateY(-10px);
	}
	28%, 29.99% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	30% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	36% {
		opacity: 1;
		transform: scale(0.9) translateY(10px);
	}
	44% {
		opacity: 0;
		transform: scale(0.4) translateY(48px);
	}
	45%, 49% {
		opacity: 0;
		transform: scale(0.4) translateY(-10px);
	}
	58%, 59.99% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	60% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
	66% {
		opacity: 1;
		transform: scale(0.9) translateY(10px);
	}
	74% {
		opacity: 0;
		transform: scale(0.4) translateY(48px);
	}
	75%, 79% {
		opacity: 0;
		transform: scale(0.4) translateY(-10px);
	}
	88%, 100% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
}





#visual .slick-dots {display: flex; gap:0 20px; position:absolute; bottom:54px; left:50%; z-index:99; max-width:1560px; width:90%; transform:translateX(-50%);}
#visual .dot_btn {position: relative; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;  display: flex; flex-wrap:wrap; align-items: center; justify-content: center; padding:0; margin:0;}
#visual .dot_border {width: 40px; height: 40px; transform: rotate(-90deg);}
#visual .dot_border circle {stroke-dasharray: 119.4; /* 2π*19 */ stroke-dashoffset: 119.4; stroke: #D9D9D9; stroke-width: 2; fill: none;}
#visual .dot_ctrl {position: absolute; inset:0; display: flex; flex-wrap:wrap; align-items: center; justify-content: center; pointer-events: auto; width:100%; height:100%;}
#visual .dot_ctrl::before {font-family:var(--icon); line-height:1; display:block; font-size:18px; font-variation-settings: 'FILL' 1; color:var(--white); opacity:0; display:none;}
#visual .dot_ctrl::after {content:''; width:8px; background:rgba(255,255,255,0.5); border-radius:100%; aspect-ratio: 3 / 3;}
#visual .dot_ctrl.play::before { content:"\e037";}
#visual .dot_ctrl.pause::before { content:"\e034";}

#visual .slick-dots li.slick-active .dot_ctrl::before {display:block; opacity:1;}
#visual .slick-dots li.slick-active .dot_ctrl::after {display:none;}
#visual .dot_ctrl.play {display:none;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt .fs110 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs18 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs26 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .btn-wrap {transform:translateY(0); opacity:1;}





.line-tit {display:inline-flex; color:var(--main); box-sizing:border-box; padding-left:15px; position:relative; margin:0 0 40px; font-weight: 700;}
.line-tit::before {content:''; width:3px; height:100%; background:var(--sub2); position:absolute; top:0; left:0;}
section .tBox {margin-bottom:80px;}
section .tBox .fs60 {margin:0 0 20px;}



.overflow_wrap {overflow:hidden;}
#about {position:relative; display:flex; flex-wrap:wrap;}
#about::before {content:''; width: 947px; aspect-ratio: 947 / 1016;  background:url("/eng/img/gra_ico01.svg")no-repeat center / 100% auto; position:absolute; top:45%; left:0; transform:translate(-40%,-50%); z-index:-1; opacity:0.4; filter: blur(100px);}
#about::after {content:''; width: 1153px; aspect-ratio: 1153 / 1237;  background:url("/eng/img/gra_ico02.svg")no-repeat center / 100% auto; position:absolute; bottom:0; right:0; transform:translate(40%,20%); z-index:-1; opacity:0.4; filter: blur(100px);}
#about .tBox {flex:1; padding-left:calc((100% - 1590px) / 2); box-sizing:border-box; position:relative; padding-right:5%; box-sizing:border-box;}
#about .tBox::before {content:''; max-width:842px; width:85%; position:absolute; left:0; top:0; transform:translateX(-90%); aspect-ratio: 842 / 530; background:url("/eng/img/about_img03.jpg")no-repeat center / cover;}
#about .tBox .fs18 {margin:0 0 60px;}
#about .imgbox {max-width:842px; width:48%; position:relative;}
#about .imgbox li img {max-width:100%;}
#about .imgbox li:first-of-type {position:relative; z-index:10;}
#about .imgbox li:last-of-type {margin-left:-235px; margin-top:-100px; width:64%; max-width:530px;}


.product_list { display: flex; width: 100%; counter-reset: list-num;}
.product_list dl { display: flex; position: relative; flex: 0 0 180px; transition: flex 0.3s ease; overflow: hidden; margin: 0; align-items: stretch; counter-increment: list-num; flex-direction: row; }
.product_list dl::before { content: ''; width: 1px; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, 0.2); z-index: 10; }
.product_list dl:first-of-type::before { display: none; }
.product_list dl:last-child { flex-direction: row-reverse;}
.product_list dl.active { flex: 1; }
.product_list dt { position: relative; width: 180px; background: #43964C; color: var(--white,); cursor: pointer; text-align: center; flex-shrink: 0; padding: 80px 20px; box-sizing: border-box; }
.product_list dt .fs24 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; color: var(--white); }
.product_list dt .num { color: var(--white); font-size: 40px; font-weight: 700; line-height: 125%; font-style: normal; }
.product_list dt .num::before {content: counter(list-num, decimal-leading-zero);}
.product_list dd { flex: 1; display: flex; flex-wrap: wrap; align-content: space-between; background: var(--grayBg, #f4f4f4); margin: 0; position: relative; min-width: 600px; }
.product_list dd .infoBox { width: 100%; padding: 80px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 0 50px; align-items: flex-start; }
.product_list dd .infoBox::before { content: counter(list-num, decimal-leading-zero); font-size: 24px; font-weight: 600; line-height: 141.667%; display: block; flex-shrink: 0; position: relative; top: 5px; color: var(--black); }
.product_list dd .infoBox .infoBox_in {flex: 1;}
.product_list dd .infoBox .infoBox_in .fs50, .product_list dd .infoBox .infoBox_in .fs18, .product_list dd .infoBox .infoBox_in .btn_wrap { display: block; position: absolute; opacity: 0; visibility: hidden; transform: translateY(-40px); transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;}

.product_list dd .infoBox .infoBox_in .fs18 { margin: 20px 0 0; }
.product_list dd .infoBox .infoBox_in .btn_wrap { margin: 60px 0 0; }
.product_list dl.active dd .infoBox .infoBox_in .fs50 {position:relative; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.2s; }
.product_list dl.active dd .infoBox .infoBox_in .fs18 {position:relative; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.4s; }
.product_list dl.active dd .infoBox .infoBox_in .btn_wrap {position:relative; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.6s; }
.product_list dd .imgBox {height: 400px; width: 100%; background: var(--black); flex-shrink: 0;}

/* .product_list dd .imgBox.bg01 { background: url("/eng/img/prd_bg01.jpg") no-repeat center / cover; }
.product_list dd .imgBox.bg02 { background: url("/eng/img/prd_bg02.jpg") no-repeat center / cover; }
.product_list dd .imgBox.bg03 { background: url("/eng/img/prd_bg03.jpg") no-repeat center / cover; } */




#platform .tBox {text-align:center;}
.platform_list {display:flex; flex-wrap:wrap; gap:30px;}
.platform_list dl {flex:1 0 0;}
.platform_list dl dt {position:relative; }
.platform_list dl dt .img {overflow:hidden;}
.platform_list dl dt::after {content:'\e145'; width:60px; aspect-ratio: 1 / 1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:10px; font-family:var(--icon); font-size:24px; line-height:1; color:var(--white); background:var(--sub2); position:absolute; bottom:0; left:50%; margin:0 0 -30px -30px; transition:all 0.5s ease; opacity:0;}
.platform_list dl dt img {width:100%; transition:all 1s ease;}
.platform_list dl dd {padding:30px 0 0; text-align:center;  transition:all 0.5s ease;}
.platform_list dl dd .fs16 {margin:10px 0 0;}

.platform_list dl:hover dt .img img {transform:scale(1.1); transition:all 1s ease;}
.platform_list dl:hover dt::after {transform:rotate(45deg); transition:all 0.5s ease; opacity:1;}
.platform_list dl:hover dd {padding-top:50px; transition:all 0.5s ease;}







/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1650px){


.no-scroll-view {right:5%;}

#about .tBox {padding-left:5%;}
#about .tBox::before {transform: translateX(-95%);}
#about .imgbox li:last-of-type {margin-left:-30%; margin-top:-10%;}




}
/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){


section .tBox br {display:none;}


}
/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){

.product_list dl {flex: 0 0 140px;}
.product_list dt {width:140px;}
.product_list dd .infoBox {padding:40px; gap:0 30px;}
.product_list dd .infoBox br {display:none;}

.platform_list dl dd br {display:none;}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


section .tBox {margin-bottom:50px;}

#about::before {width:90%; top:26%; opacity:1;}
#about::after {width:80%; opacity:1;}
#about .tBox {flex:none; width:100%;}
#about .tBox::before {display:none;}
#about .imgbox {max-width:100%; width:100%;}
#about .imgbox li:first-of-type {width:70%; margin:0 0 0 auto;}
#about .imgbox li:last-of-type {margin-left:0;}



.product_list {flex-direction: column;}
.product_list dl {display: grid; grid-template-rows: 80px 0fr;  transition: grid-template-rows 0.5s ease; flex: none;  width: 100%; overflow: hidden;}
.product_list dl.active {grid-template-rows: 80px 1fr;}
.product_list dt {width: 100%; height: 80px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; box-sizing: border-box;}
.product_list dt .fs24 {position: static; transform: none;}
.product_list dd {grid-row: 2;  min-height: 0; overflow: hidden; margin: 0; display: block; background: var(--grayBg); min-width: 100%;}
.product_list dd .infoBox {padding: 40px 30px; display:block;}
.product_list dt .num {font-size:28px;}
.product_list dd .imgBox {height: 300px; width: 100%;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


section .tBox {margin-bottom:30px;}
.line-tit {margin:0 0 15px;}
section .tBox .fs60 {margin:0 0 15px;}

#visual .visual_in .roll .v_txt {bottom:18%;}
#visual .visual_in .roll .v_txt .fs18 {margin:20px 0 0;}

#visual .slick-dots {gap:0 10px; bottom:30px;}

#visual .dot_btn {width:30px; height:30px;}
#visual .dot_border {width:30px; height:30px;}
#visual .dot_ctrl::before {font-size:14px;}
#visual .dot_ctrl::after {width:6px;}
#visual .visual_in .roll .v_bg .bg.mo {display:block;}
#visual .visual_in .roll .v_bg .bg.pc {display:none;}

.no-scroll-view {bottom:30px;}
.no-scroll-view .mouse {width:22px; height:38px;}
.no-scroll-view .no-en {font-size:11px; padding:0 10px 0 0;}
.no-scroll-view .mouse_wrap::after {width:4px; height:4px;}


#about .tBox .fs18 {margin:0 0 30px;}





.product_list dl {grid-template-rows: 66px 0fr;}
.product_list dl.active {grid-template-rows: 66px 1fr;}
.product_list dt {width: 100%; height: 66px; padding: 0 20px;}
.product_list dd .infoBox {padding: 40px 20px; display:block;}
.product_list dd .infoBox::before {font-size:14px; margin:0 0 10px; display:block;}
.product_list dt .num {font-size:22px;}
.product_list dd .infoBox .infoBox_in .fs18 {margin:10px 0 0;}
.product_list dd .infoBox .infoBox_in .btn_wrap {margin:30px 0 0;}
.product_list dd .imgBox {height: 240px; width: 100%;}



.platform_list {}
.platform_list dl {flex:none; width:100%;}
.platform_list dl dt::after {display:none;}
.platform_list dl dd {padding:15px 0 0 !important;}
.platform_list dl dd .fs16 {margin:5px 0 0;}

}