/* common */
main .txtBox .title .split{ font-weight: 600; opacity: 1; overflow: hidden; color:#222;}
main .txtBox .title .split span{ position: relative; top: 300px;}
main .txtBox .title .split.aos-animate span{ animation: txtUp 1s forwards;}

/* main */
main > section{ width: 100%; height: 100vh; overflow: hidden;}
main .visual{ width: 100%; height: 100vh; overflow: hidden; position: relative;}
main .visual .videoBox{ position: relative; width: 100%; height: 100%;}
main .visual .videoBox video{ position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; min-width: 100%; width: 100%; object-fit:cover; }
/*main .visual .videoBox:before{ content:''; display:block; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); }*/
main .visual .txtBox{ position: absolute; bottom: 230px; left: 8.59375%; opacity: 1; }
main .visual .txtBox .title .split{ color:#fff; font-weight: 500; filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; transition: all 2s;}
main .visual .txtBox .title br{ display:none; }
main .visual .txtBox .txt{ color:#fff; margin: 30px 0 50px; letter-spacing: 10px; filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; transition: all 2s;}
main .visual .pagiBox{ display:flex; align-items:center; filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; transition: all 2s;} 
main .visual .pagiBox .bar{ width: 300px; height: 1px; background: rgba(255,255,255,0.2); margin-right: 20px;}
main .visual .pagiBox .bar span{ display:block; width: 0; height: 1px; background: #fff; }
main .visual .pagiBox p{ display:flex; align-items:center; color:rgba(255,255,255,0.8) }
main .visual .pagiBox p span.current{ margin-right: 10px; color:#fff; }
main .visual .txtBox.aos-animate .title .split{ animation: Blur 1.3s 0.5s forwards;}
main .visual .txtBox.aos-animate .txt{ animation: Blur2 2s 1s forwards;}
/*main .visual .pagiBox { animation: Blur 1.3s 1s forwards;}*/
/*main .visual .pagiBox .bar span.active{ animation: bar 8s forwards; }*/

@keyframes Blur{
	0%{ filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; }
	100%{ filter: blur(0); -webkit-filter: blur(0); opacity: 1;}
}

@keyframes Blur2{
	0%{ letter-spacing: 10px; filter: blur(10px); -webkit-filter: blur(10px); opacity: 0; }
	100%{ letter-spacing: 0px; filter: blur(0); -webkit-filter: blur(0); opacity: 1;}
}

@keyframes bar{
	0%{ width: 0; }
	100%{ width: 100%;}
}

main .service{ position: relative; background: url(/img/main/serviceBg.png) no-repeat 50% 50%; background-size:cover; }
main .service .imgBox{ position:absolute;	transform:translateY(-50%); top: 50%; right: 0;}
main .service .txtBox{ margin-top: 250px; position: relative; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
main .service .txtBox .title{ margin-bottom: 40px;}
main .service .txtBox .title .flexBox .split:first-child{ margin-right: 20px; }
main .service .txtBox .txt{ color:#222; line-height: 1.6; overflow: hidden;}
main .service .txtBox .txt span{ display:block; }
main .service .txtBox #viewBtn{ color:#222; }

main .partner{ background: url(/img/main/partnerBg.png) no-repeat 50% 50%; background-size:cover;  }
main .partner .txtBox .txt{ margin-bottom: 100px;}

main .products{ background: url(/img/main/productBg.png) no-repeat 50% 50%; background-size:cover; }
main .products .w1590{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
main .products .w1590 > .txtBox{ display:flex; justify-content:space-between; align-items:center; color:#fff; padding-top: 115px;} 
main .products .txtBox .split{ color:#fff; }
main .products .ctnBox{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; }
main .products .ctnBox .itemBox{ position: relative; width: calc((100% - 90px) / 4); height: 640px;}
main .products .ctnBox .itemBox:after{ content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); backdrop-filter: blur(10px); opacity: 0;
transition:all 0.5s; }
main .products .ctnBox .itemBox figure{ position: relative; width: 100%; height: 100%; overflow: hidden; }
main .products .ctnBox .itemBox figure img{ position:absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
main .products .ctnBox .itemBox .txt{ position: absolute; top: 10px; right: 55px; transform: rotate(-90deg); transform-origin: right; color:#fff; font-weight: 300;}
main .products .ctnBox .itemBox #viewBtn{ position:absolute; transform:translateX(-50%); left: 50%; bottom: 50px; border:1px solid #fff; color:#fff; opacity: 0; pointer-events:none; z-index: 2;
transition:all 0.5s; }
main .products .ctnBox .itemBox:hover:after{ opacity: 1;}
main .products .ctnBox .itemBox:hover #viewBtn{ opacity: 1; pointer-events:auto; }
main .products .ctnBox .itemBox:hover #viewBtn:hover{ border:none; color:#222; }
main .products .ctnBox .itemBox:hover #viewBtn:hover:before{ background: rgba(255,255,255,0.5);}

main .technology{ position: relative; height: auto;}
main .technology .ctnBox{ background: #fff; width: 100%; height: 100vh; position: relative; }
main .technology .ctnBox .flexBox{ width: 100%; height: 100vh; display:flex; align-items:center; }
main .technology .ctnBox .flexBox > div{ width: 50%; height: 100%; overflow: hidden;}
main .technology .ctnBox .txtBox{ display:flex; flex-direction:column; justify-content:center; color:#222; }
main .technology .ctnBox .txtBox .title{ font-weight: 200; margin-bottom: 40px; }
main .technology .ctnBox .txtBox .title span{  font-weight: 600; line-height: 1.4; transition:all 2s 0.5s; }
main .technology .ctnBox .txtBox .txt{ line-height: 1.6; overflow: hidden;}
main .technology .ctnBox .txtBox .txt span{ display:block; }
main .technology .ctnBox .txtBox #viewBtn{ margin-top: 100px;}
main .technology .ctnBox .imgBox{ position:absolute; transform:translateY(-50%); top: 50%; right: 0; display:flex; justify-content:center; align-items:center; opacity: 1;}
main .technology .ctnBox .imgBox figure{ position: relative; width: 100%; height: 100%; clip-path: inset(40% 40.8% 41.8% round 10px); transition:all 1.5s; }
main .technology .ctnBox .imgBox figure img{ position: absolute;  transform: translate(-50%, -50%); top: 50%; left: 50%; min-width: 100%; min-height: 100%; object-fit: cover;}
main .technology .ctnBox .imgBox.aos-animate figure{ clip-path: inset(0% 0% 0%);}
main .technology .ctnBox02 .flexBox{ flex-direction: row-reverse;}
main .technology .ctnBox02 .imgBox{ left: 0; }
main .technology .ctnBox02 .txtBox{ padding-left: 100px;}

main .technology .ctnBox01 .imgBox figure{ background: url(/img/main/technologyImg01.png); background-size: cover;}
main .technology .ctnBox02 .imgBox figure{ background: url(/img/main/technologyImg02.png); background-size: cover;}

main .news{ position: relative; overflow: auto; z-index: 5; box-shadow: 4px 2px 20px 0px rgba(102, 102, 102, 0.20); background: #fff; }
main .news .w1590 > .txtBox{ display:flex; justify-content:space-between; align-items: center; margin-bottom: 100px; color:#fff; padding-top: 100px;}
main .news .w1590 > .txtBox .title{ margin-bottom: 20px; transition:all 0.5s; }
main .news .w1590 > .txtBox .txt{ color:#222; }
main .news .ctnBox{ display:flex; flex-wrap:wrap; gap:45px;}
main .news .ctnBox .itemBox{ width: calc((100% - 90px) / 3 ); border-top:2px solid #D9D9D9; transition:all 0.5s; }
main .news .ctnBox .itemBox .txtBox{ margin: 28px 0 35px;}
main .news .ctnBox .itemBox .txtBox .txt{ color:#888; font-weight: 600; transition:all 0.5s; }
main .news .ctnBox .itemBox .txtBox .title{ color:#666; font-weight: 500; line-height: 1.6; margin: 20px 0 10px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;}
main .news .ctnBox .itemBox .txtBox .day{ color:#666; }
main .news .ctnBox .itemBox .imgBox{ position: relative; width: 100%; height: 250px; overflow: hidden;}
main .news .ctnBox .itemBox .imgBox img{ position:absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; transition:all 0.5s; }
main .news .ctnBox .itemBox:hover{ border-top:2px solid var(--mainC); }
main .news .ctnBox .itemBox:hover .txtBox .txt{ color:var(--mainC); }
main .news .ctnBox .itemBox:hover .imgBox img{ transform:translate(-50%,-50%) scale(1.17); }