@charset "utf-8";

.body_intro { overflow:hidden; touch-action:none;}
.main_intro { position:fixed; top:0; left:0; z-index:-10; opacity:0; visibility:hidden; width:100%; height:100%;  }
.introBox { z-index:999999; visibility:visible; opacity:1; }
.introBox:before { content:""; display:block; width:50%; height:100%; background:#000; position:absolute; top:0; left:0; animation:introW_b 2.0s 2.5s; animation-fill-mode:both; }
.introBox:after { content:""; display:block; width:50%; height:100%; background:#fff; position:absolute; top:0; right:100%; animation:introW 1.8s 0.5s; animation-fill-mode:both; }
.introBox .box { position:absolute; z-index:5; width:100%; height:100%; animation:ani_6 1.4s 2.7s; animation-fill-mode:both; }
.introBox .intro-txt { position:absolute; left:50%; top:50%; transform:translate(-50%, calc(-50% + 0.5px)); text-align:center; display:flex; justify-content:center; align-items:flex-end; }
.introBox .intro-txt { overflow:hidden; }
.introBox .intro-txt span.s2 { margin-left:3.8rem; }
.introBox .intro-txt span.s3 { margin-left:1.257rem; }
.introBox .intro-txt span.s4 { margin-left:0.97rem; }
.introBox .intro-txt span.s5 { margin-left:0.742rem; }
.introBox .intro-txt span.s6 { margin-left:0; }
.introBox .intro-txt span.s7 { margin-left:1.064rem; }
.introBox .intro-txt span.s8 { margin-left:1.021rem; }
.introBox .intro-txt span.s9 { margin-left:0.948rem; }
.introBox .intro-txt span.s10 { margin-left:1.161rem; }
.introBox .intro-txt span.s11 { margin-left:0.74rem; }
.introBox .intro-txt span.s12 { margin-left:0.52rem; }
.introBox .intro-txt span.s13 { margin-left:1.071rem; }
.introBox .intro-txt span { animation:ani_3 0.8s 0.8s; animation-fill-mode:both;}
.introBox .intro-txt img { animation:txtColorOver 0.8s 0.5s forwards, txtColor 0.8s 1.2s forwards; }
@media screen and (max-width:1440px){
	.introBox .intro-txt img { height:100px; }
}
@media screen and (max-width:1024px){
	.introBox .intro-txt img { height:80px; }
}
@media screen and (max-width:640px){
	.introBox .intro-txt img { height:50px; }
	.introBox .intro-txt span.s2 { margin-left:1.5rem; }
	.introBox .intro-txt span.s3 { margin-left:0.7em; }
	.introBox .intro-txt span.s4 { margin-left:0.2rem; }
	.introBox .intro-txt span.s5 { margin-left:0.1rem; }
	.introBox .intro-txt span.s6 { margin-left:0; }
	.introBox .intro-txt span.s7 { margin-left:0.3rem; }
	.introBox .intro-txt span.s8 { margin-left:0.2rem; }
	.introBox .intro-txt span.s9 { margin-left:0.2rem; }
	.introBox .intro-txt span.s10 { margin-left:0.6rem; }
	.introBox .intro-txt span.s11 { margin-left:0.2rem; }
	.introBox .intro-txt span.s12 { margin-left:0.1rem; }
	.introBox .intro-txt span.s13 { margin-left:0.6rem; }
}

@keyframes txtColor {
	0% { filter:brightness(0) invert(0); }
	100% { filter:brightness(0) invert(1); }
}
@keyframes txtColorOver {
	0% { filter:brightness(0) invert(1); }
	100% { filter:brightness(0) invert(0); }
}
@keyframes introW {
	0% { width:120%; right:100%; }
	100% { width:0; right:0;}
}
@keyframes introW_b {
	0% { width:100%; right:100%; }
	100% { width:0; right:0; }
}

body { background:#000; }
.mainbody { animation:ani_5 0.8s 0.5s both; }
.main { background:#000; }

#visual { position:relative; width:100%; height:100vh; overflow:hidden;}
#visual .bg { position:absolute; top:0; left:0; z-index:5; width:100%; height:100%; overflow:hidden; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); }
#visual .swiper-container { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100%; overflow:hidden; display:flex; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; opacity: 0.4; background:rgba(0, 0, 0, 0.20); }
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide .ImgBg { width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover !important; }
#visual .swiper-container .swiper-slide .mov video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .txtbox { color:#fff; position:absolute; bottom:6.0rem; left:0; width:100%; padding:0 50px; z-index:15; }
#visual .txtbox .txt-1,
#visual .txtbox .txt-2 { position:relative; overflow:hidden; }
#visual .txtbox .txt-1 > span { opacity:0; font-family:var(--mainFont); font-size:12.2rem; font-weight:500; color:#fff; line-height:1.3; letter-spacing:-0.05em; display:block }
#visual .txtbox .txt-2 { margin-top:3.0rem; }
#visual .txtbox .txt-2 > span { opacity:0; font-family:var(--mainFont); font-size:2.8rem; font-weight:400; color:#fff; line-height:1.3; letter-spacing:-0.03em; display:block }
#visual .txtbox .txt-1 > span { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
#visual .txtbox .txt-2 > span { animation:ani_2 0.8s 0.8s; animation-fill-mode:both; }
#visual .swiper-pagination { display:none }

.swiper-button-next, 
.swiper-button-prev,
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }
@media screen and (max-width:1680px){
	#visual .txtbox .txt-1 > span { font-size:10.0rem; }
}
@media screen and (max-width:1440px){
	#visual .txtbox { padding:0 20px; }
	#visual .txtbox .txt-1 > span { font-size:9.0rem; }
	#visual .txtbox .txt-2 { margin-top:2.5rem; }
	#visual .txtbox .txt-2 > span { font-size:2.6rem; }
}
@media screen and (max-width:1280px){
	#visual .txtbox .txt-1 > span { font-size:7.0rem; }
	#visual .txtbox .txt-2 { margin-top:2.0rem; }
	#visual .txtbox .txt-2 > span { font-size:2.4rem; }
}
@media screen and (max-width:640px){
	#visual .txtbox { bottom:14.0rem; }
	#visual .txtbox .txt-1 > span { font-size:5.0rem; }
	#visual .txtbox .txt-2 { margin-top:1.5rem; }
	#visual .txtbox .txt-2 > span { font-size:2.2rem; }
}

.title-box {  }
.title-box h3 { overflow:hidden }
.title-box h3 span { display:block; font-family:var(--mainFont); color:#fff; font-size:1.7rem; font-weight:600; line-height:1.3; }

/* animation */
.title-box h3 span { opacity:1; width:fit-content; color:#222; background-size:200% 100%; -webkit-background-clip:text; background-position:100%; }
.title-box.subOn h3 span { background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1) 50%, rgba(255,255,255,0.2) 50%); -webkit-text-fill-color:transparent; }
.title-box.subOn h3 span { animation:gradientShift 0.8s 0.5s cubic-bezier(.11,.26,.19,.63); animation-fill-mode:both; }


/* story */
.story-box { margin-top:24.0rem; }
.story-box > div { display:flex; flex-wrap:wrap; }
.story-box .txtCont { width:44%; padding-right:2%; position:sticky; top:12.0rem; height:70.0rem; }
.story-box .imgbox { width:calc(100% - 44%); }
.story-box .txtCont .txtbox .txt-1 { margin-top:4.0rem; color:#fff; font-size:4.8rem; font-weight:600; line-height:1.4; letter-spacing:-0.05em; }
.story-box .txtCont .txtbox .txt-1 span { font-weight:600; }
.story-box .txtCont .txtbox .txt-2 { margin-top:8.0rem; color:rgba(255,255,255,0.8); font-size:1.9rem; font-weight:300; line-height:1.6; }
.story-box .txtCont .btn_more { margin-top:12.0rem; }
.story-box .txtCont .btn_more a { position:relative; max-width:58.0rem; height:7.0rem; display:flex; justify-content:center; align-items:center; background:#111; border-radius:1.0rem; overflow:hidden; }
.story-box .txtCont .btn_more a strong { color:#555 }
.story-box .txtCont .btn_more a:hover strong { color:#fff }
.story-box .txtCont .btn_more a:before{ content:""; display:block; transition:all 0.5s; position:absolute; left:0; bottom:0; width:100%; height:0; background:var(--Primary); }
.story-box .txtCont .btn_more a:hover:before { height:100%; }
.story-box .imgbox { position:relative; border-radius:1.0rem; overflow:hidden; }
.story-box .imgbox img { max-width:100%; border-radius:calc(1.0rem + 0.2rem); }
@media screen and (max-width:1440px){
	.story-box { margin-top:21.0rem; }
	.story-box .txtCont { padding-right:4%; height:60.0rem; }
	.story-box .txtCont .txtbox .txt-1 { font-size:4.2rem; }
	.story-box .txtCont .txtbox .txt-1 br { display:none }
	.story-box .txtCont .txtbox .txt-2 { margin-top:7.0rem; }
	.story-box .txtCont .txtbox .txt-2 br { display:none }
}
@media screen and (max-width:1280px){
	.story-box { margin-top:18.0rem; }
	.story-box .txtCont .txtbox .txt-1 { margin-top:3.0rem; font-size:4.0rem; }
	.story-box .txtCont .txtbox .txt-2 { margin-top:5.0rem; font-size:1.8rem; }
	.story-box .txtCont .btn_more { margin-top:8.0rem; }
}
@media screen and (max-width:960px){
	.story-box { margin-top:10.0rem; }
	.story-box > div { flex-direction:column-reverse; }
	.story-box .txtCont { width:100%; padding-right:0; margin-top:4.0rem; height:auto;}
	.story-box .imgbox { width:100%; }
	.story-box .txtCont .btn_more a { position:relative; max-width:100%; height:6.0rem; }
}
@media screen and (max-width:640px){
	.story-box .txtCont .txtbox .txt-1 { margin-top:2.0rem; font-size:2.8rem; }
	.story-box .txtCont .txtbox .txt-2 { margin-top:3.0rem; }
	.story-box .txtCont .btn_more { margin-top:6.0rem; }
}

/* animation */
.story-box .txtCont .txtbox .txt-1 span { width:fit-content; color:#222; background-size:200% 100%; -webkit-background-clip:text; background-position:100%; }
.story-box.subOn .txtCont .txtbox .txt-1 span { background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1) 50%, rgba(255,255,255,0.2) 50%); -webkit-text-fill-color:transparent; }
.story-box.subOn .txtCont .txtbox .txt-1 span { animation:gradientShift 1.0s 0.3s cubic-bezier(.33,.53,.52,.72); animation-fill-mode:both; }
.story-box .imgbox:before{ content:""; display:block; transition:all 0.8s 0.3s; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; border-radius:1.0rem; }
.story-box .imgbox:after{ content:""; display:block; transition:all 1.0s 0.3s; position:absolute; left:0; top:100%; width:100%; height:100%; background:var(--Primary); border-radius:1.0rem; }
.story-box.subOn .imgbox:before{ animation:ani_h100 0.8s 0.5s forwards; }
.story-box.subOn .imgbox:after{ top:0; animation:ani_h100 1.2s 1.0s forwards; }


/* products */
.products-box { margin:30.0rem 0 20.0rem; }
.products-box .txtCont .txtbox .txt-1 { margin-top:4.0rem; color:#fff; font-size:4.8rem; font-weight:600; line-height:1.4; letter-spacing:-0.05em; }
.products-box .listbox { margin-top:8.0rem; display:flex;flex-direction:column; justify-content:space-between; height:calc(40.0rem * 2); gap:2.0rem; }
.products-box .listbox .box { position:relative; flex-grow:1; transition:height 0.8s 0.1s ease; display:flex; justify-content:flex-end; text-align:right; border-radius:1.0rem; overflow:hidden; }
.products-box .listbox .box:before{ content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%); border-radius:1.0rem; }
.products-box .listbox .box:nth-child(2n) { justify-content:flex-start; text-align:left; }
.products-box .listbox .box .txtbox { position:relative; z-index:3; transform:translateY(16%); padding:5.0rem; transition:all 1.0s; }
.products-box .listbox .box h4 { color:#fff; font-family:var(--mainFont); font-size:8.4rem; font-weight:600; line-height:1.1; letter-spacing:-0.05em; display:inline-block }
.products-box .listbox .box h4 strong,
.products-box .listbox .box h4 span { font-weight:600; font-family:var(--mainFont); text-shadow:3px 3px 5px rgba(0, 0, 0, 0.5); }
.products-box .listbox .box .stxt { margin-top:1.0rem; color:#fff; font-size:2.3rem; font-weight:600; line-height:1.3; transition:all 1.0s; text-shadow:3px 3px 5px rgba(0, 0, 0, 0.5); }
.products-box .listbox .box .txt { margin-top:6.0rem; color:#fff; font-size:3.2rem; font-weight:600; line-height:1.6; opacity:0; transition:all 0.3s; text-shadow:3px 3px 5px rgba(0, 0, 0, 0.9); }
.products-box .listbox .box .btn { margin-top:6.0rem; opacity:0; transition:all 0.3s; }
.products-box .listbox .box .btn a { font-family:var(--mainFont); color:#fff; font-size:1.7rem; font-weight:600; line-height:1.3; }
.products-box .listbox .box .bg { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:1.0rem; }
.products-box .listbox .box .bg:before{ content:""; display:block; padding-bottom:64%; }
.products-box .listbox .box .bg img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:all 1.0s ease; border-radius:calc(1.0rem + 0.2rem); }
.products-box .listbox .box.active:hover { height:calc(100% - 25% - 2.0rem); }
.products-box .listbox .box.active:not(:hover) { height:25%; }
.products-box .listbox .box.on.active:hover .txtbox { transform:translateY(8%); }
.products-box .listbox .box.on.active:hover .txt,
.products-box .listbox .box.on.active:hover .btn { opacity:1; transition:all 1.0s; }
.products-box .listbox .box.on.active:hover .bg img { transform:scale(1.05); }
.products-box .listbox .box.off.active h4 { font-size:4.8rem; height:4.8rem; overflow:hidden  }
.products-box .listbox .box.off.active .stxt { font-size:1.9rem; }
.products-box .listbox .box.off.active .txtbox { transform:translateY(5%); }
@media screen and (max-width:1440px){
	.products-box { margin:26.0rem 0 17.0rem; }
	.products-box .txtCont .txtbox .txt-1 { font-size:4.2rem; }
	.products-box .listbox .box.active:hover { height:calc(100% - 30% - 2.0rem); }
	.products-box .listbox .box.active:not(:hover) { height:30%; }
	.products-box .listbox { height:calc(35.0rem * 2); }
	.products-box .listbox .box h4 { font-size:7.0rem; }
	.products-box .listbox .box .stxt { margin-top:1.0rem; font-size:2.1rem; }
	.products-box .listbox .box .txt { margin-top:4.0rem; font-size:2.8rem; }
	.products-box .listbox .box .btn { margin-top:4.0rem; }
	.products-box .listbox .box .btn a { font-size:1.6rem; }
	.products-box .listbox .box.off.active h4 { font-size:4.2rem; height:4.2rem; }
	.products-box .listbox .box.off.active .stxt { font-size:1.8rem; }
}
@media screen and (max-width:1280px){
	.products-box { margin:18.0rem 0 12.0rem; }
	.products-box .txtCont .txtbox .txt-1 { margin-top:3.0rem; font-size:4.0rem; }
}
@media screen and (max-width:1024px){
	.products-box .listbox { height:calc(30.0rem * 2); }
	.products-box .listbox .box h4 { font-size:5.5rem; }
	.products-box .listbox .box .txtbox { padding:3.0rem; transform:translateY(22%); }
	.products-box .listbox .box .stxt { font-size:1.8rem; }
	.products-box .listbox .box .txt { margin-top:3.0rem; font-size:2.2rem; }
	.products-box .listbox .box .btn { margin-top:3.0rem; }
	.products-box .listbox .box .btn a { font-size:1.6rem; }
	.products-box .listbox .box.on.active:hover .txtbox { transform:translateY(10%); }
	.products-box .listbox .box.off.active h4 { font-size:3.8rem; height:3.8rem; }
	.products-box .listbox .box.off.active .stxt { font-size:1.7rem; }
	.products-box .listbox .box.off.active .txtbox { transform:translateY(14%); }
}
@media screen and (max-width:640px){
	.products-box .txtCont .txtbox .txt-1 { margin-top:2.0rem; font-size:2.8rem; }
	.products-box .listbox { height:auto; }
	.products-box .listbox .box h4 { font-size:3.8rem; height:3.35rem !important; }
	.products-box .listbox .box { height:auto; display:flex; align-items:center;  }
	.products-box .listbox .box .txtbox { transform:translateY(0);}
	.products-box .listbox .box .stxt { font-size:1.6rem; }
	.products-box .listbox .box .stxt br { display:none }
	.products-box .listbox .box .txt { opacity:1; margin-top:2.0rem; font-size:1.9rem; }
	.products-box .listbox .box .txt br { display:none }
	.products-box .listbox .box .btn { opacity:1; margin-top:2.0rem; }
	.products-box .listbox .box .btn a { font-size:1.5rem; }
	.products-box .listbox .box.off.active h4 { font-size:3.8rem; }
	.products-box .listbox .box.off.active .stxt { font-size:1.6rem; }
	.products-box .listbox .box.off.active .txtbox { transform:translateY(0); }
	.products-box .listbox .box.active:hover,
	.products-box .listbox .box.active:not(:hover),
	.products-box .listbox .box.active.on { height:auto; }
	.products-box .listbox .box.active:not(.on) { height:auto; }
	.products-box .listbox .box.on.active:hover .txtbox,
	.products-box .listbox .box.on.active .txtbox { transform:translateY(0); }
	.products-box .listbox .box.on.active .txt,
	.products-box .listbox .box.on.active .btn { opacity:1; transition:all 1.0s; }
	.products-box .listbox .box.on.active .bg img { transform:scale(1); }
}

/* animation */
.products-box .txtCont .txtbox .txt-1 span { width:fit-content; color:#222; background-size:200% 100%; -webkit-background-clip:text; background-position:100%; }
.products-box.subOn .txtCont .txtbox .txt-1 span { background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,1) 50%, rgba(255,255,255,0.2) 50%); -webkit-text-fill-color:transparent; }
.products-box.subOn .txtCont .txtbox .txt-1 span { animation:gradientShift 1.0s 0.3s cubic-bezier(.33,.53,.52,.72); animation-fill-mode:both; }
.products-box .listbox .box:before{ content:""; display:block; transition:all 0.8s 0.3s; position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; background:#000; border-radius:1.0rem; }
.products-box .listbox .box:after{ content:""; display:block; transition:all 1.0s 0.3s; position:absolute; left:100%; top:0; width:100%; height:100%; z-index:5; background:var(--Primary); border-radius:1.0rem; }
.products-box .listbox .box:nth-child(2n):before{ left:unset; right:0; }
.products-box .listbox .box:nth-child(2n):after{ left:unset; right:100%; }
.products-box .listbox.subOn .box:before{ animation:ani_w100 1.2s 1.5s forwards; }
.products-box .listbox.subOn .box:after{ left:0; animation:ani_w100 1.2s 1.5s forwards; }
.products-box .listbox.subOn .box:nth-child(2n):after{ left:unset; right:0; animation:ani_w100 1.2s 1.5s forwards; }
.products-box .listbox .box.active .aniTxt strong,
.products-box .listbox .box.active .aniTxt span { transition:none;  } 
.products-box .listbox .box.on.active:hover .aniTxt strong { transform:translateY(-100%); transition:all 1.0s 0.3s; }
.products-box .listbox .box.on.active:hover .aniTxt span { transform:translateY(0); transition:all 1.0s 0.3s; } 
.products-box .listbox .box.off.active .aniTxt strong,
.products-box .listbox .box.off.active .aniTxt span { transition:all 1.0s; }
.products-box .listbox .box.on.active .aniTxt strong,
.products-box .listbox .box.on.active .aniTxt span,
.products-box .listbox .box.ov.active .aniTxt strong,
.products-box .listbox .box.ov.active .aniTxt span { transition:all 1.0s 0.1s; }
@media screen and (max-width:640px){
	.products-box .listbox .box.on.active .aniTxt strong { transform:translateY(-100%); transition:all 1.0s 0.3s; }
	.products-box .listbox .box.on.active .aniTxt span { transform:translateY(0); transition:all 1.0s 0.3s; } 
}

/* technology */
.technology-box { position:relative; width:100%; overflow:hidden; background:url(/img/main/technology_bg.jpg) no-repeat center / cover; background-attachment:fixed; }
.technology-box .motion-box { position:relative; overflow:hidden; }
.technology-box .motion-box .cont { position:relative; height:100vh; transition:all 0.5s ease }
.technology-box .motion-box .cont.off { position:fixed !important; top:0 !important; transform:translate(0px, 0px) !important;}
.technology-box .motion-box .txtM { position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:3; width:100%; text-align:center; font-family:var(--mainFont); color:#fff; font-size:8.4rem; font-weight:400; line-height:1.3; }
.technology-box .motion-box .txtM * { font-family:var(--mainFont); }
.technology-box .motion-box .txtM .stxt strong { font-weight:600; display:block; }
.technology-box .motion-box .txtM .stxt { position:relative; overflow:hidden;  }
.technology-box .motion-box .txtM span { display:block; }
.technology-box .motion-box .listbox { position:absolute; left:0; top:0; width:100%; height:100%; }
.technology-box .motion-box .listbox .title-box { margin-top:10vh; display:flex; justify-content:space-between; align-items:flex-end; }
.technology-box .motion-box .listbox .title-box h3 span { color:#fff }
.technology-box .motion-box .listbox .list { position:relative; margin-top:4.0rem; padding-bottom:6.2rem; }
.technology-box .motion-box .listbox .list .swiper-slide { width:42.0rem; height:70vh; }
.technology-box .motion-box .listbox .list .swiper-slide .box { position:relative; height:100%; }
.technology-box .motion-box .listbox .list .swiper-slide .box > div { transition:all 0.8s 0.1s; position:absolute; left:0; top:0; padding:0 4.0rem; width:100%; height:100%; text-align:center; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:1.0rem; }
.technology-box .motion-box .listbox .list .swiper-slide .box .before { opacity:1; transform:rotateY(0); border:0.2rem solid #222; background:linear-gradient(180deg, rgba(34, 34, 34, 0.90) 0%, #000 100%); }
.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox { margin-top:4.0rem; }
.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .tit { font-family:var(--mainFont); color:#fff; font-size:2.6rem; font-weight:500; line-height:1.3; }
.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .btn { margin-top:2.0rem; font-family:var(--mainFont); color:#555; font-size:1.7rem; font-weight:600; line-height:1.3; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after { opacity:0; transform:rotateY(180deg); background:linear-gradient(180deg, #004ea2 0%, #001d3c 100%); }
.technology-box .motion-box .listbox .list .swiper-slide .box .after dt { font-family:var(--mainFont); color:#fff; font-size:4.2rem; font-weight:500; line-height:1.3; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after dd {  margin-top:8.0rem; color:rgba(255,255,255, 0.8); font-size:1.9rem; font-weight:300; line-height:1.6; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn { margin-top:8.0rem; font-family:var(--mainFont); color:#fff; font-size:1.7rem; font-weight:600; line-height:1.3; }
.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn a { color:#fff; }
.technology-box .motion-box .listbox .list .swiper-pagination { position:absolute; left:50%; top:unset; bottom:0; transform:translate(-50%, 0); max-width:40.0rem; width:100%; height:0.2rem; background:#222; }
.technology-box .motion-box .listbox .list .swiper-pagination-progressbar-fill { background:#fff; }
.technology-box .motion-box .listbox .list .swiper-pn { display:block; position:absolute; top:50%; transform:translateY(-50%); width:2.0rem; height:4.0rem; background:url(/img/svg/swiper-pn-p.svg) no-repeat center / cover; }
.technology-box .motion-box .listbox .list .swiper-button-prev { left:4.8rem; }
.technology-box .motion-box .listbox .list .swiper-button-next { left:unset; right:4.8rem; transform:translateY(-50%) rotate(calc(180deg + 0.05deg)); }
.technology-box .motion-box .listbox .list .drag-box { position:absolute; left:50%; top:unset; bottom:10.0rem; transform:translate(-50%, 0); z-index:7; width:15.0rem; height:4.5rem; gap:0 3.0rem; display:flex; justify-content:center; align-items:center; border-radius:4.0rem; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); } 
.technology-box .motion-box .listbox .list .drag-box span { font-family:var(--mainFont); color:rgba(255,255,255, 0.5); font-size:1.7rem; font-weight:500; line-height:1.3;}
@media screen and (max-width:1440px){
	.technology-box .motion-box .txtM { font-size:7.0rem; }
	.technology-box .motion-box .listbox .list { margin-top:3.5rem; padding-bottom:5.5rem; }
	.technology-box .motion-box .listbox .list .swiper-slide { width:40.0rem; height:62vh; }
	.technology-box .motion-box .listbox .list .swiper-slide .box > div { padding:0 3.5rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox { margin-top:3.5rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .tit { font-size:2.4rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .btn { margin-top:2.0rem; font-size:1.7rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dt { font-size:3.8rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dd {  margin-top:6.0rem; font-size:1.8rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn { margin-top:6.0rem; font-size:1.6rem; }
	.technology-box .motion-box .listbox .list .swiper-button-prev { left:2.8rem; }
	.technology-box .motion-box .listbox .list .swiper-button-next { right:2.8rem; }
	.technology-box .motion-box .listbox .list .drag-box span { font-size:1.6rem; }
}
@media screen and (max-width:1280px){
	.technology-box .motion-box .txtM { font-size:5.5rem; }
}
@media screen and (max-width:1024px){
	.technology-box .motion-box .cont { margin:8.0rem 0; height:100%; }
	.technology-box .motion-box .txtM { margin-top:3.0rem; font-size:4.0rem; position:relative; top:0; transform:translateY(0); }
	.technology-box .motion-box .listbox { position:relative; }
	.technology-box .motion-box .listbox .title-box { margin-top:8.0rem; }
	.technology-box .motion-box .listbox .list { margin-top:3.0rem; padding-bottom:5.0rem; }
	.technology-box .motion-box .listbox .list .swiper-slide { width:35.0rem; height:55vh; }
	.technology-box .motion-box .listbox .list .swiper-slide .box > div { padding:0 2.0rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .imgbox img { width:120px; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox { margin-top:2.0rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .tit { font-size:2.2rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .txtbox .btn { margin-top:1.5rem; font-size:1.6rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dt { font-size:2.6rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after dd {  margin-top:4.0rem; font-size:1.7rem; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .after .btn { margin-top:4.0rem; font-size:1.5rem; }
	.technology-box .motion-box .listbox .list .drag-box { bottom:6.0rem; width:13.0rem; height:4.0rem; gap:0 2.5rem; } 
	.technology-box .motion-box .listbox .list .drag-box span { font-size:1.6rem; }
	.technology-box .motion-box .listbox .list .swiper-pn { width:1.5rem; background-size:1.5rem auto; }
}
@media screen and (max-width:640px){
	.technology-box .motion-box .txtM { font-size:3.0rem; }
	.technology-box .motion-box .listbox .list { margin-top:3.0rem; padding-bottom:4.0rem; }
	.technology-box .motion-box .listbox .list .swiper-slide { height:50vh; }
	.technology-box .motion-box .listbox .list .swiper-slide .box .before .imgbox img { width:100px; }
	.technology-box .motion-box .listbox .list .swiper-pagination {height:0.1rem; }
	.technology-box .motion-box .listbox .list .drag-box { width:11.5rem; gap:0 1.5rem; } 
	.technology-box .motion-box .listbox .list .swiper-pn { width:1.2rem; background-size:1.2rem auto; }
}

/* animation */
.technology-box .motion-box .stxt strong em { opacity:0; display:inline-block; }
.technology-box.on .motion-box .stxt strong em { animation:ani_1 0.8s 0.5s; animation-fill-mode:both; }
.technology-box.on .motion-box .stxt strong em:nth-child(2) { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.technology-box .motion-box .bg { position:absolute; left:50%; top:50%; transform:translate(calc(-50% - 0.5px), -50%) scale(1); width:3000px; height:3000px; z-index:5; background:#000; mask-image:radial-gradient(circle 77rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
.technology-box .motion-box .listbox .list .swiper-slide .box:hover .before { opacity:0; transform:rotateY(180deg); }
.technology-box .motion-box .listbox .list .swiper-slide .box:hover .after { opacity:1; transform:rotateY(0); }
@media screen and (max-width:1440px){
	.technology-box .motion-box .bg { mask-image:radial-gradient(circle 64rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}
@media screen and (max-width:1280px){
	.technology-box .motion-box .bg { mask-image:radial-gradient(circle 50rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}
@media screen and (max-width:1024px){
	.technology-box .motion-box .bg { display:none; mask-image:radial-gradient(circle 37rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}
@media screen and (max-width:1024px){
	.technology-box .motion-box .bg { mask-image:radial-gradient(circle 28rem at center, transparent 50%, rgba(0,0,0,1) 50.4%); }
}

/* news */
.news-box { position:relative; z-index:3; padding:15.0rem 0; background:#111; }
.news-box .title-box { display:flex; justify-content:space-between; align-items:flex-end; }
.news-box .listbox { padding-top:4.0rem; }
.news-box .listbox ul { display:flex; flex-wrap:wrap; gap:2.0rem; }
.news-box .listbox li { width:calc((100% - (2.0rem * 3)) / 4); }
.news-box .listbox li .imgbox { position:relative; overflow:hidden; border-radius:1.0rem; }
.news-box .listbox li .imgbox:before{ content:""; display:block; padding-bottom:64%; }
.news-box .listbox li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:all 0.6s; }
.news-box .listbox li:hover .imgbox img { transform:scale(1.10); }
.news-box .listbox li .txtbox { margin-top:4.0rem; }
.news-box .listbox li .txtbox .top { display:flex; align-items:center; gap:2.0rem; }
.news-box .listbox li .txtbox .top .type { font-family:var(--mainFont); color:#fff; font-size:1.5rem; font-weight:500; line-height:1.3; height:2.9rem; display:inline-flex; justify-content:center; align-items:center; padding:0 2.0rem; background:var(--Primary); border-radius:10.0rem;}
.news-box .listbox li .txtbox .top .date { font-family:var(--mainFont); color:#fff; font-size:1.5rem; font-weight:500; }
.news-box .listbox li .txtbox .txt { margin-top:2.5rem; color:#fff; font-size:2.3rem; font-weight:400; line-height:1.5; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
@media screen and (max-width:1440px){
	.news-box { padding:12.0rem 0; }
	.news-box .listbox li .txtbox .txt { font-size:2.1rem; }
}
@media screen and (max-width:1024px){
	.news-box { padding:10.0rem 0; }
	.news-box .listbox ul { gap:3.0rem 1.0rem ; }
	.news-box .listbox li { width:calc((100% - 1.0rem) / 2); }
	.news-box .listbox li .txtbox .txt { font-size:2.0rem; }
}
@media screen and (max-width:640px){
	.news-box { padding:8.0rem 0; }
	.news-box .listbox li .txtbox { margin-top:2.0rem; }
	.news-box .listbox li .txtbox .txt { margin-top:2.0rem;font-size:1.9rem; }
}

/* animation */
.news-box .listbox li { opacity:0; }
.news-box.subOn .listbox li:nth-child(1) { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.news-box.subOn .listbox li:nth-child(2) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.news-box.subOn .listbox li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
.news-box.subOn .listbox li:nth-child(4) { animation:ani_4 0.8s 1.2s; animation-fill-mode:both; }
.news-box.subOn .listbox li:nth-child(5) { animation:ani_4 0.8s 1.5s; animation-fill-mode:both; }

@keyframes bgColor {
	0% { background:#000; }
	100% { background:var(--Primary); }
}

@keyframes bgSize{
	0% { transform:translate(-50%, -50%) scale(1); }
	100% {  transform:translate(-50%, -50%) scale(10); }
}
@keyframes zindex {
	0% { z-index:5; }
	90% { z-index:5; }
	100% { z-index:1; }
}
@keyframes txt_on {
	0% { transform:translateY(100%); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}
@keyframes txt_off {
	0% { transform:translateY(0); opacity:1;}
	100% { transform:translateY(-100%); opacity:0; }
}
@keyframes listUp {
	0% { transform:translateY(50%); opacity:0;}
	100% { transform:translateY(0); opacity:1; }
}