@charset 'utf-8';
/* common */
main #titleBox{ text-align: center; padding-top: 150px;}
main #titleBox .sTxt{ color:var(--mainC); font-weight: 500; }
main #titleBox .title{ color:#fff; font-weight: bold; margin-bottom: 20px;}
main #titleBox .txt{ color:#fff; line-height: 1.5;}

main section{ position: relative;  clip-path: inset(90px 60px 60px round 30px); transition:all 0.7s 0.5s; }
main section.active,main section.last{ clip-path: inset(0 0 0); }
main .visual .slideBox .slick-slide{ position: relative; height: 100vh; }
main .visual .slideBox .slick-slide:before{ content:''; display:block; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.3); width: 100%; height: 100%; z-index: 4; opacity: 0; 
animation: fadeIn 0.5s 0.7s forwards;}
main .visual .slideBox .slick-slide video{ position: absolute;  top: 50%; left: 50%;  transform: translate(-50%,-50%); min-width: 100%; min-height: 100%;}
main .visual .slideBox .slick-slide .txtBox{ width: 100%;  position: absolute;  bottom: 120px; left: 0; z-index: 1; color:#fff; z-index: 5; overflow: hidden;}
main .visual .slideBox .slick-slide .txtBox > div{ position: relative;  opacity: 0; animation:fadeUp 1.5s 0.7s forwards; }
main .visual .slideBox .slick-slide .txtBox .title{ font-weight: bold; margin-bottom: 30px;}
main .visual .slideBox .slick-slide .txtBox .txt{ line-height: 32px;}
main .visual .slideBox .slick-slide .circleBox{ position: relative; position: absolute; right: 160px; bottom: 120px; width: 100px; height: 100px; cursor:pointer; z-index: 5;  }
main .visual .slideBox .slick-slide .circleBox figure{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
main .visual .slideBox .slick-slide .circleBox svg{ fill: rgba(0, 0, 0, 0); stroke: #fff; stroke-dasharray: 310; stroke-width:3px; width: 100%; height: 100%;}
main .visual .slideBox .slick-slide .circleBox svg.off{ stroke-dashoffset: 0; opacity: 0.2;}
main .visual .slideBox .slick-slide .circleBox svg.on{ position: absolute; transform: translate(-50%, -50%) rotate(-90deg); top: 50%; left: 50%; stroke:var(--mainC);  stroke-dashoffset: 310; }
main .visual .slideBox .slick-slide.slick-active .circleBox{ opacity: 1;}
main .visual .slideBox .slick-slide.slick-active .circleBox svg.on{ animation: spinCircle 6.2s 0.2s ease;}
main .visual .slideBox .slick-slide.slick-active .circleBox.active svg.on{ animation-play-state: paused;}

@keyframes fadeUp{
	  from {
		-webkit-transform:translate3d(0, 250%, 0);
		transform:translate3d(0, 250%, 0);
		opacity:0;
	  }
	  to {
		-webkit-transform:translate3d(0, 0, 0);
		transform:translate3d(0, 0, 0);
		opacity:1;
	  }
}

@keyframes spinCircle{
	5%{
		stroke-dashoffset: 310;
	}
	100%{
		stroke-dashoffset: 0;
	}
}

main .research{ background: url(/img/main/researchBg.png) no-repeat 50% 50%; background-size:cover; display:none; }
main .research .ctnBox{ position: relative; display:flex; height: 100%; z-index: 5; cursor:none; }
main .research .ctnBox .txtBox{ position: relative; display:flex; align-items: flex-end; padding: 70px 50px; color:#fff; width: calc(100% / 3); flex-shrink:0; transition: all 0.8s }
main .research .ctnBox .txtBox .bg{ position: absolute; bottom: 0; right: 0; opacity: 0; transition:all 0.5s; }
main .research .ctnBox .txtBox:before{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); opacity: 0; z-index: -1; transition: all 0.5s }
main .research .ctnBox .txtBox .innerBox{ overflow: hidden; }
main .research .ctnBox .txtBox .innerBox .title{ font-weight: bold; }
main .research .ctnBox .txtBox .innerBox .txt{ margin: 20px 0 0; font-weight: 500; line-height: 1.5;}
main .research .ctnBox .txtBox .innerBox .txt2{ line-height: 1.5; margin-top: 30px; height: 0; overflow: hidden; transition:all 0.7s 0.25s; }
main .research .ctnBox .txtBox a{ position: absolute; display:block; width: 100%; height: 100%; top: 0; left: 0; cursor:none; }
main .research .ctnBox .txtBox.invert{ backdrop-filter: blur(10px);}
main .research .ctnBox .txtBox2{ z-index: 5;}
main .research .ctnBox .txtBox2:after{ content:''; display:block; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; top: 0; left: 0; border-right:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.1); z-index: -2;}
main .research.active .ctnBox .txtBox:before{ animation: fadeIn 0.7s 1.2s forwards;}
main .research.active .ctnBox .txtBox .circle{ animation: fadeIn 0.5s 0.7s forwards; }
main .research.active .ctnBox .txtBox{ transition:all 0.8s; }
main .research.active .ctnBox .txtBox.invert:before{ background: rgba(0,0,0,0.4); z-index: 5;}
main .research.active .ctnBox .txtBox:hover:before{ background: rgba(0,0,0,0);}
main .research.active .ctnBox .txtBox:hover .innerBox .txt2{ height: 160px;}
main .research.active .ctnBox .txtBox2:hover .innerBox .txt2{ height: 210px;}
main .research.active .ctnBox .txtBox:hover .bg{ opacity: 1;}

main .pipe{ background: url(/img/main/pipelineBg.png) no-repeat 50% 50%; background-size:cover; }
main .pipe .w1600{ height: 100%; }
main .pipe .ctnBox{ display:flex; justify-content:space-between; gap:40px; margin: 60px 0;}
main .pipe .ctnBox .itemBox{ position: relative; width: calc((100% - 120px) / 4); height: 360px; overflow: hidden; border-radius:30px; background: rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.30);}
main .pipe .ctnBox .itemBox .imgBox{ position: relative; opacity: 0; transition: all 0.5s; z-index: 5;}
main .pipe .ctnBox .itemBox .imgBox span{ display:block; position: absolute; width: 30%; height: 30%; top: 0; left: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 999vw rgba(255, 255, 255, .5); border-radius: 50%; z-index: 1; transition: width 0.5s linear, height 0.5s linear;}
main .pipe .ctnBox .itemBox a{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 100%; height: 100%; display:flex; flex-direction:column;align-items:center; justify-content:center; color:#fff; z-index: 5; border-radius: 30px;transition:all 0.5s; }
main .pipe .ctnBox .itemBox figure.icon{ margin-bottom: 40px;}
main .pipe .ctnBox .itemBox .title{ font-weight: 500; transition:all 0.5s; }
main .pipe .ctnBox .itemBox .txt{ font-weight: 500; margin: 20px 0 10px;}
main .pipe .ctnBox .itemBox figure.icon svg path{ transition:stroke 0.5s;  }
main .pipe .ctnBox .itemBox:hover{ border:none; }
main .pipe .ctnBox .itemBox:hover a{ box-shadow: 0 0 0 10px var(--mainC) inset;  }
main .pipe .ctnBox .itemBox:hover .imgBox{ opacity: 1;}
main .pipe .ctnBox .itemBox:hover figure.icon svg path{ stroke:var(--mainC); }
main .pipe .ctnBox .itemBox:hover .title{ color:var(--mainC); }
main .pipe .ctnBox .itemBox:last-child:hover figure.icon svg path{ fill:var(--mainC); }
main .pipe .ctnBox .itemBox:hover .imgBox span{ width: 300%; height: 300%; }

main .news{ background: #f5f5f5;}
main .news .bgTxt{ position: absolute; bottom: 0; left: 0;}
main .news .ctnBox{ height: 100%; }
main .news #titleBox{ padding-top: 120px;}
main .news #titleBox .title{ color:#111; margin-bottom: 30px; }
main .news .slideBox{ margin-bottom: 30px;}
main .news .slideBox .slick-track{ margin-left: 160px;}
main .news .slideBox .swiper-slide{ margin-right: 30px; width: 570px;}
main .news .slideBox .swiper-slide a > div{ width: 100%;}
main .news .slideBox .swiper-slide .imgBox{ position: relative; height: 380px; }
main .news .slideBox .swiper-slide .imgBox figure{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; border-radius: 20px; transition:all 0.5s; will-change:clip-path; clip-path: inset(0 0 0 round 20px); }
main .news .slideBox .swiper-slide .txtBox{ margin-top:  30px; width: 100%; }
main .news .slideBox .swiper-slide .txtBox .day{ color:#777; line-height: 1.5; display:flex; align-items:center; margin-bottom: 10px;}
main .news .slideBox .swiper-slide .txtBox .day:before{ content:''; display:inline-block; width: 50px; height: 1px; background: #777; margin-right: 20px;}
main .news .slideBox .swiper-slide .txtBox .txt{ color:#222; font-weight: 500; line-height: 30px; text-overflow: ellipsis; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  width: 100%;}
main .news .slideBox .swiper-slide:hover .imgBox figure{ clip-path: inset(10px 10px 10px round 20px);}
main .news .optionBox{ justify-content:space-between; align-items:center; }
main .news .optionBox .pagiBox{ display:flex; align-items:center; }
main .news .optionBox .pagiBox .arrowBox{ margin-right: 30px;}
main .news .optionBox .pagiBox .arrowBox button{ position: relative; width: 70px; height: 70px;}
main .news .optionBox .pagiBox .arrowBox button:before{ content:''; display:block; width: 50px; height: 50px; background: #000; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; border-radius:50%; z-index: -1; transition:all 0.5s; }
main .news .optionBox .pagiBox .arrowBox button:hover:before{ width: 60px; height: 60px;}
main .news .optionBox .pagiBox .barBox{ display:flex; align-items:center; }
main .news .optionBox .pagiBox .barBox .current{ color:#333; }
main .news .optionBox .pagiBox .barBox .bar{ position: relative; width: 100px; height: 1px; background: rgba(0,0,0,0.1);  margin: 0 20px; }
main .news .optionBox .pagiBox .barBox .bar span{ position: absolute; top: 0; left: 0; display:inline-block; width: 0; height: 1px; background: #000; }
main .news .optionBox .pagiBox .barBox .total{ color:#999; }
main .news .optionBox #viewBtn a{ color:#000; }
main .news .optionBox #viewBtn a .txt:after{ background: #000;}

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

main .join{ background: #000;}
main .join .logo{ position: absolute; transform:translate(-50%,-50%) !important; top: 50%; left: 50%; z-index: -1; transition:all 1s; filter: blur(0px); opacity: 1;}
main .join .logo.aos-animate{ filter: blur(30px); }
main .join .titleBox{ position: relative; margin-top: 20px;}
main .join .titleBox p{ font-size:160px; font-weight: bold; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; transition:all 1s 1.7s; }
main .join .titleBox .imgBox{ position: relative; position: absolute; right: 5%; bottom: 55px; animation: rotate_img 6s linear infinite; mix-blend-mode: exclusion;}
main .join .txtP{ line-height: 1.5; font-weight: 500; text-align: right; color:#fff; margin: 30px 0 60px;}
main .join #viewBtn{ text-align: right; }
main .join .titleBox.aos-animate p{ color:#fff; }