@charset "utf-8";

#visual { position:relative; width:100%; height:100vh; overflow:hidden; }
#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; align-items:flex-end; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; opacity:0.7; }
#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 .mvisualImage { position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#visual .swiper-container .swiper-slide .imgbox { opacity:0; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; bottom:150px; left:0; width:100%; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { position:relative; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { opacity:0; font-size:24px; font-weight:600; color:#fff; line-height:1.3; display:block }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { position:relative; margin-top:20px; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { opacity:0; overflow:hidden; display:block; font-size:80px; font-weight:600; color:#fff; line-height:1.3;}
#visual .swiper-container .swiper-slide .txtbox .txt-3 { position:relative; margin-top:20px; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { opacity:0; overflow:hidden; display:block; font-size:20px; font-weight:400; color:#fff; line-height:1.6;}
#visual .swiper-container .swiper-slide.swiper-slide-active .mov { opacity:1; animation:ani_51 1.2s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_3 0.8s 1.0s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-3 > span { animation:ani_3 0.8s 1.3s; animation-fill-mode:both; }
#visual .control_box { position:absolute; bottom:40px; left:0; width:100%; z-index:10; }
#visual .control_box .box { display:flex; align-items:center; }
#visual .swiper-pagination { position:relative; display:flex; margin-left:40px; }
#visual .swiper-pagination-bullet { position:relative; text-align:left; border-radius:10px; background:rgba(255,255,255,0.3); width:10px; height:10px; }
#visual .swiper-pagination-bullet:not(:last-child) { margin-right:20px; }
#visual .swiper-pagination-bullet-active { background:rgba(255,255,255,1); }
#visual .swiper-btn,
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

#visual .playstop { width:50px; display:inline-block; }
#visual .playstop .stop a,
#visual .playstop .play a { position:relative; width:100%; height:50px; border:none; background:none; border-radius:50%; display:flex; justify-content:center; align-items:center; border:3px solid rgba(255,255,255,0.3); }
#visual .playstop .stop a:after {content:""; display:block; width:100%; height:100%; background:url(/img/main/stop.png) no-repeat center; position:absolute; left:0; top:0;}
#visual .playstop .play a:after {content:""; display:block; width:100%; height:100%; background:url(/img/main/play.png) no-repeat center; }

#visual .circular-chart { display:block; width:123%; height:123%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
#visual .circle { stroke:#fff; fill:none; stroke-width:1.5; stroke-dasharray:100; stroke-dashoffset:100; }


#visual .scrolldown { opacity:0; position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3; text-align:center; animation:ani_5 0.8s 0.5s; animation-fill-mode:both; }
#visual .scrolldown .txt { position:absolute; left:50%; top:0; transform:translateX(-50%); animation:scrollDown 1s infinite; }
@media screen and (max-height:420px){
	#visual { min-height:480px; }
}
@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:22px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:65px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { font-size:18px; }
}
@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:20px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:15px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:54px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:15px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { font-size:17px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:18px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:13px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:40px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:13px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { font-size:16px; }
}
@media screen and (max-width:640px){
	#visual { height:calc(var(--vh) * 100); }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:17px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:12px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:30px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:12px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { font-size:15px; }
	#visual .swiper-container .swiper-slide .txtbox { bottom:180px; }
	#visual .control_box { bottom:80px; }
	#visual .swiper-pagination { margin-left:20px; }
	#visual .swiper-pagination-bullet { width:8px; height:8px; }
	#visual .swiper-pagination-bullet:not(:last-child) { margin-right:15px; }
	#visual .playstop { width:40px; }
	#visual .playstop .stop a,
	#visual .playstop .play a { height:40px; border:2px solid rgba(255,255,255,0.3); }
	#visual .playstop .stop a:after,
	#visual .playstop .play a:after { background-size:auto 10px; }

	#visual .circular-chart { width:120%; height:120%; }
	#visual .circle { stroke-width:0.8; }
	#visual .scrolldown { bottom:30px; }
	#visual .scrolldown .txt img { height:10px; }
}

@keyframes scrollDown {
    0% { top:-12px; }
    50% { top:0; }
    100% { top:-12px; }
}



/* common */
.mainTxt span.txt { font-size:80px; color:#eee; font-weight:600; line-height:1.5; }
.mainTxt span.txt { background-size:200% 100%; -webkit-background-clip:text; background-position:100%; }
.mainTxt span.icon img { margin-top:15px; vertical-align:top; }
.mainTxt span.icon1 img { margin-top:20px; }
.mainTxt.subOn span.txt { animation:ani_mov 0.8s 0.4s; animation-fill-mode:both; background-image:linear-gradient(to right, #111, #111, #111, #111 50%, #eee 50%); -webkit-text-fill-color: transparent; }
@media screen and (max-width:1600px){
	.mainTxt span.txt { font-size:65px; }
	.mainTxt span.icon img { height:72px; }
	.mainTxt span.icon1 img { height:62px; }
}
@media screen and (max-width:1440px){
	.mainTxt span.txt { font-size:55px; }
	.mainTxt span.icon img { margin-top:13px; height:60px; }
	.mainTxt span.icon1 img { margin-top:18px; height:50px; }
}
@media screen and (max-width:1280px){
	.mainTxt span.txt { font-size:40px; }
	.mainTxt span.icon img { margin-top:10px; height:40px; }
	.mainTxt span.icon1 img { margin-top:13px; height:34px; }
}
@media screen and (max-width:1024px){
	.mainTxt span.txt { font-size:35px; }
	.mainTxt span.icon img { margin-top:8px; height:32px; }
	.mainTxt span.icon1 img { margin-top:11px; height:28px; }
}
@media screen and (max-width:640px){
	.mainTxt span.txt { font-size:26px; }
	.mainTxt span.icon img { margin-top:6px; height:26px; }
	.mainTxt span.icon1 img { margin-top:8px; height:22px; }
}

@keyframes ani_mov {
	0%{ background-position:100%; }
	50%{ opacity:1; }
	100%{ opacity:1; background-position:0; }
}

.mainTextBox > dl > dt { font-family:var(--mainFont); font-size:24px; color:var(--mainColor); font-weight:500; line-height:1.3; letter-spacing:1.44px; }
.mainTextBox > dl > dt .tit { font-family:var(--mainFont); letter-spacing:1.44px; }
.mainTextBox > dl > dd p { font-size:18px; color:#333; font-weight:400; line-height:1.6; }
@media screen and (max-width:1280px){
	.mainTextBox > dl > dd p br { display:none }
	.mainTextBox > dl > dd p span.m_br { display:block }
}
@media screen and (max-width:1024px){
	.mainTextBox > dl > dt { font-size:22px; }
	.mainTextBox > dl > dd p { font-size:17px; }
}
@media screen and (max-width:640px){
	.mainTextBox > dl > dt { font-size:20px; }
	.mainTextBox > dl > dd p { font-size:16px; }
}

.btn-view a { position:relative; width:191px; height:60px; display:flex; align-items:center; border-radius:60px; padding:0 30px; overflow:hidden }
.btn-view a:before { content:""; display:block; position:absolute; left:0; top:0; width:calc(100% - 2px); height:calc(100% - 2px); border:1px solid #000; border-radius:60px; }
.btn-view a span.txt { position:relative; z-index:2; font-family:var(--mainFont); font-size:18px; color:#000; font-weight:400; line-height:1.3; letter-spacing:1.08px; display:inline-block; transition:all 0.3s; }
.btn-view a span.circle { display:block; position:absolute; top:50%; left:50%; margin-left:calc(50% - 30px); transform:translate(-50%, -50%); border-radius:100%; width:6px; height:6px; background:rgba(0,0,0,1); transition:all 0.6s; }
.btn-view a span.arr { opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); margin-left:calc(50% - 30px); width:8px; height:14px; background:url(/img/main/info_arr.png) no-repeat center; transition:all 0.4s; }
.btn-view a:hover span.circle { width:500px; height:500px; transition:all 0.8s; background:var(--mainColor);  }
.btn-view a:hover span.txt { color:#fff }
.btn-view a:hover span.arr { opacity:1; }
@media screen and (max-width:1280px){
	.btn-view a { width:180px; }
	.btn-view a span.txt { font-size:16px; }
}
@media screen and (max-width:1024px){
	.btn-view a { width:160px; height:52px; padding:0 25px; }
	.btn-view a span.txt { font-size:15px; }
	.btn-view a span.arr,
	.btn-view a span.circle { margin-left:calc(50% - 25px); }
	.btn-view a span.circle { width:500px; height:500px; transition:all 0.8s; background:var(--mainColor);  }
	.btn-view a span.txt { color:#fff }
	.btn-view a span.arr { opacity:1; background-size:auto 12px; }
}
@media screen and (max-width:640px){
	.btn-view a span.arr,
	.btn-view a span.circle { margin-left:calc(50% - 20px); }
	.btn-view a { width:150px; height:45px; padding:0 20px; }
}

/* products */
.products-box { position:relative; background:url(/img/main/main_bg.png) center bottom no-repeat; background-attachment:fixed; overflow:hidden; }
.products-box .pdList { position:relative; }
.products-box .pdList .nav { position:absolute; top:0; left:0; height:100vh; width:30%; z-index:5 }
.products-box .pdList .nav ul { position:absolute; top:50%; left:0; transform:translate(0, -50%); height:328px; overflow:hidden; }
.products-box .pdList .nav li { transition:all 0.4s }
.products-box .pdList .nav li:not(:last-child) { margin-bottom:30px }
.products-box .pdList .nav li a { color:#ccc; font-size:30px; line-height:1.3; font-weight:700; background-size:200% 100%; -webkit-background-clip:text; background-position:100%; }
.products-box .pdList .nav li.on { margin-left:20px; }
.products-box .pdList .nav li.on a { font-size:40px; animation:ani_mov 0.7s 0.1s; animation-fill-mode:both; background-image:linear-gradient(to right, var(--mainColor), var(--mainColor), var(--mainColor), var(--mainColor) 50%, #ccc 50%); -webkit-text-fill-color: transparent; }
.products-box .pdList .imgbox { position:absolute; top:0; left:0; width:100%; height:100vh; }
.products-box .pdList .imgbox:before { content:""; display:block; position:absolute; top:50%; left:-110px; transform:translateY(calc(-50% - 0.5px)); width:calc(100vw + 110px); height:1px; background:rgba(0,0,0,0.1); }
.products-box .pdList .imgbox li { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);  }
.products-box .pdList .imgbox li img { opacity:0; animation:bgs4_b 0.5s 0.1s; max-width:600px; border-radius:600px; }
.products-box .pdList .imgbox li:first-child { opacity:1; }
.products-box .pdList .imgbox li.on { opacity:1; z-index:2; }
.products-box .pdList .imgbox li.on img { opacity:1; animation:bgs3 0.5s 0.5s; animation-fill-mode:both;}
.products-box .pdList .infobox { width:100%; padding-left:50%; }
.products-box .pdList .item { position:relative; width:100%; padding-left:360px; height:100vh; display:flex; align-items:center; z-index:6 }
.products-box .pdList .item .txtbox { width:100%; }
.products-box .pdList .item .txtbox dt { color:var(--mainColor); font-size:60px; line-height:1.3; font-weight:700; }
.products-box .pdList .item .txtbox dd { margin-top:20px; color:#333; font-size:18px; line-height:1.66; font-weight:400; }
.products-box .pdList .item .txtbox .btn-view { margin-top:50px; }
.products-box .btn_pn { display:none !important }
.products-box .pdList .slick-dots,
.products-box .pdList .slick-dots li { display:none }
@media screen and (max-width:1740px){
	.products-box .pdList .imgbox li img { width:520px; }
	.products-box .pdList .item { padding-left:300px; }
	.products-box .pdList .item .txtbox dd br { display:none }
	.products-box .pdList .item .txtbox dt { font-size:50px; }
}
@media screen and (max-width:1440px){
	.products-box .pdList .imgbox li img { width:420px; }
	.products-box .pdList .item { padding-left:260px; }
	.products-box .pdList .item .txtbox dt { font-size:40px; }
	.products-box .pdList .item .txtbox .btn-view { margin-top:40px; }
}
@media screen and (max-width:1280px){
	.products-box .pdList .nav ul { height:226px; }
	.products-box .pdList .nav li:not(:last-child) { margin-bottom:18px }
	.products-box .pdList .nav li a { font-size:22px; }
	.products-box .pdList .nav li.on { margin-left:15px; }
	.products-box .pdList .nav li.on a { font-size:28px; }
	.products-box .pdList .imgbox li img { width:360px; }
	.products-box .pdList .item { padding-left:220px; }
	.products-box .pdList .item .txtbox dt { font-size:32px; }
	.products-box .pdList .item .txtbox dd { margin-top:15px; font-size:17px; }
	.products-box .pdList .item .txtbox .btn-view { margin-top:30px; }
}
@media screen and (max-width:1024px){
	.products-box .pdList { height:auto; padding:50px 0; }
	.products-box .pdList .nav ul { display:none }
	.products-box .pdList .imgbox { position:relative; height:360px; }
	.products-box .pdList .imgbox:before { top:220px; transform:translateY(0); }
	.products-box .pdList .imgbox li { top:40px; transform:translate(-50%, 0); }
	.products-box .pdList .imgbox li img { width:360px; height:360px; }
	.products-box .pdList .infobox { padding-left:0; position:relative; top:0; left:0; z-index:10;  }
	.products-box .pdList .item { padding-left:0; height:auto; position:relative; left:0; bottom:unset; width:100%; z-index:10; margin-top:100px; }
	.products-box .pdList .slider { display:flex; flex-direction:column; gap:40px 0; }
	.products-box .pdList .slider,
	.products-box .pdList .slick-list,
	.products-box .pdList .slick-track { height:auto }
	.products-box .pdList .slick-slide { z-index:-1; opacity:0; visibility:hidden; }
	.products-box .pdList .slick-current { z-index:1;  opacity:1; visibility:visible; }
	.products-box .pdList .item .txtbox dt { font-size:28px; }
	.products-box .pdList .item .txtbox dd { margin-top:13px; font-size:16px; }
	.products-box .pdList .item .txtbox .btn-view { margin-top:30px; }
	.products-box .pdList .slick-dots { position:relative; bottom:unset; left:unset; width:100%; z-index:5; display:flex; align-items:center; justify-content:center;}
	.products-box .pdList .slick-dots li { display:block }
	.products-box .pdList .slick-dots li:not(:last-child) { margin-right:5px; }
	.products-box .pdList .slick-dots li button { border:none; background:#eee; width:12px; height:12px; overflow:hidden; text-indent:-9999em; border-radius:12px; }
	.products-box .pdList .slick-dots li.slick-active button { background:var(--mainColor); }
	.products-box .btn_pn { cursor:pointer; display:flex !important; align-items:center; justify-content:center; width:40px !important; height:40px; position:absolute; top:-160px; background:var(--mainColor); border-radius:40px; z-index:15 }
	.products-box .btn_pn i { color:#fff }
	.products-box .btn_prev { left:0; }
	.products-box .btn_next { right:0; }
}
@media screen and (max-width:640px){
	.products-box .pdList .imgbox { height:300px; }
	.products-box .pdList .imgbox:before { top:200px; }
	.products-box .pdList .imgbox li img { width:300px; height:300px; }
	.products-box .pdList .infobox { padding-top:0 }
	.products-box .pdList .slider { gap:30px 0; }
	.products-box .pdList .item { margin-top:80px; }
	.products-box .pdList .item .txtbox dt { font-size:24px; }
	.products-box .pdList .item .txtbox dd { margin-top:10px; font-size:15px; }
	.products-box .pdList .item .txtbox .btn-view { margin-top:20px; }
	.products-box .pdList .item .txtbox .btn-view a { margin:0 auto }
	.products-box .btn_pn { top:-120px; }
	.products-box .btn_prev { left:-20px; }
	.products-box .btn_next { right:-20px; }
}

/* solution */
.solution-box { padding:200px 0 188px; background:url(/img/main/main_bg.png) center bottom no-repeat; background-attachment:fixed; }
.solution-box .mainTextBox { margin-top:120px; }
.solution-box .mainTextBox > dl { display:flex; flex-wrap:wrap; }
.solution-box .mainTextBox > dl > dt .tit { position:sticky; top:120px; }
.solution-box .mainTextBox > dl > dd { width:calc(100% - 185px); padding-left:185px; }
.solution-box .mainTextBox > dl > dd .listbox li:not(:last-child) { margin-bottom:170px; }
.solution-box .mainTextBox > dl > dd .listbox li .imgbox { position:relative; overflow:hidden; border-radius:30px; }
.solution-box .mainTextBox > dl > dd .listbox li .imgbox:before { content:""; display:block; padding-bottom:39.6%; }
.solution-box .mainTextBox > dl > dd .listbox li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.solution-box .mainTextBox > dl > dd .listbox li dl { position:relative; padding-right:200px; margin-top:40px; }
.solution-box .mainTextBox > dl > dd .listbox li dt { color:#111; font-size:40px; line-height:1.3; font-weight:600; letter-spacing:-0.06em }
.solution-box .mainTextBox > dl > dd .listbox li dd { margin-top:20px; color:#333; font-size:18px; line-height:1.3; font-weight:400; }
.solution-box .mainTextBox > dl > dd .listbox li dl .btn-view { position:absolute; right:0; top:54px; }
@media screen and (max-width:1440px){
	.solution-box { padding:160px 0 150px; }
	.solution-box .mainTextBox { margin-top:110px; }
	.solution-box .mainTextBox > dl > dt .tit { top:110px; }
	.solution-box .mainTextBox > dl > dd { width:calc(100% - 160px); padding-left:160px; }
	.solution-box .mainTextBox > dl > dd .listbox li:not(:last-child) { margin-bottom:150px; }
	.solution-box .mainTextBox > dl > dd .listbox li dl { padding-right:200px; margin-top:40px; }
	.solution-box .mainTextBox > dl > dd .listbox li dt { font-size:38px; }
	.solution-box .mainTextBox > dl > dd .listbox li dd { font-size:17px; }
	.solution-box .mainTextBox > dl > dd .listbox li dl .btn-view { top:54px;}
}
@media screen and (max-width:1280px){
	.solution-box { padding:140px 0 130px; }
	.solution-box .mainTextBox { margin-top:100px; }
	.solution-box .mainTextBox > dl > dt .tit { top:100px; }
	.solution-box .mainTextBox > dl > dd { width:calc(100% - 140px); padding-left:140px; }
	.solution-box .mainTextBox > dl > dd .listbox li:not(:last-child) { margin-bottom:120px; }
	.solution-box .mainTextBox > dl > dd .listbox li dl { padding-right:200px; margin-top:40px; }
	.solution-box .mainTextBox > dl > dd .listbox li dt { font-size:34px; }
	.solution-box .mainTextBox > dl > dd .listbox li dd { margin-top:18px; font-size:16px; }
	.solution-box .mainTextBox > dl > dd .listbox li dl .btn-view { top:50px;}
}
@media screen and (max-width:1024px){
	.solution-box { padding:60px 0 100px; }
	.solution-box .mainTextBox { margin-top:80px; }	
	.solution-box .mainTextBox > dl > dt { width:100%; }
	.solution-box .mainTextBox > dl > dt .tit { top:0; position:relative; }
	.solution-box .mainTextBox > dl > dt .tit br { display:none }
	.solution-box .mainTextBox > dl > dd { width:100%; padding-left:0; margin-top:40px; }
	.solution-box .mainTextBox > dl > dd .listbox li:not(:last-child) { margin-bottom:80px; }
	.solution-box .mainTextBox > dl > dd .listbox li .imgbox { border-radius:15px; }
	.solution-box .mainTextBox > dl > dd .listbox li dl { padding-right:180px; margin-top:30px; }
	.solution-box .mainTextBox > dl > dd .listbox li dt { font-size:28px; }
	.solution-box .mainTextBox > dl > dd .listbox li dd { margin-top:15px; font-size:16px; }
	.solution-box .mainTextBox > dl > dd .listbox li dl .btn-view { top:35px;}
}
@media screen and (max-width:640px){
	.solution-box { padding:60px 0; }
	.solution-box .mainTextBox { margin-top:40px; }
	.solution-box .mainTextBox > dl > dd { margin-top:20px; }
	.solution-box .mainTextBox > dl > dd .listbox li:not(:last-child) { margin-bottom:60px; }
	.solution-box .mainTextBox > dl > dd .listbox li .imgbox:before { padding-bottom:55%; }
	.solution-box .mainTextBox > dl > dd .listbox li dl { padding-right:0; margin-top:20px; }
	.solution-box .mainTextBox > dl > dd .listbox li dt { font-size:22px; }
	.solution-box .mainTextBox > dl > dd .listbox li dd { margin-top:12px; font-size:15px; }
	.solution-box .mainTextBox > dl > dd .listbox li dl .btn-view { top:unset; right:unset; position:relative; margin:20px auto 0; }
	.solution-box .mainTextBox > dl > dd .listbox li dl .btn-view a { margin:0 auto }
}

/* animation */
.solution-box .mainTextBox > dl > dd .listbox li .imgbox { opacity:0; }
.solution-box .mainTextBox > dl > dd .listbox li.subOn .imgbox { animation:ani_4 0.5s 0.2s; animation-fill-mode:both; }
.solution-box .mainTextBox > dl > dd .listbox li dl { opacity:0; }
.solution-box .mainTextBox > dl > dd .listbox li.subOn dl { animation:ani_4 0.7s 0.5s; animation-fill-mode:both; }

/* material */
.material-box .top { padding:130px 0 150px; background:url(/img/main/main_bg.png) center bottom no-repeat; }
.material-box .mainTextBox { margin-top:100px; }
.material-box .mainTextBox > dl { display:flex; flex-wrap:wrap; }
.material-box .mainTextBox > dl > dt { color:#111; }
.material-box .mainTextBox > dl > dt,
.material-box .mainTextBox > dl > dd { width:50%; }
.material-box .mainTextBox > dl > dd .btn-view { margin-top:50px;  }
.material-box .mov-box { position:relative; padding:193px 0; background:url(/img/main/education_video_bg.jpg) no-repeat center / cover; overflow:hidden }
.material-box .mov-box .video-box { position:relative; margin:0 auto; padding:14px; background:#fff; max-width:1000px; border-radius:30px; }
.material-box .mov-box .video-box:before { content:""; display:block; padding-bottom:56.5%; }
.material-box .mov-box .video-box video,
.material-box .mov-box .video-box iframe { position:absolute; left:14px; top:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:cover; -o-object-fit:cover; border-radius:20px;}
.material-box .mov-box .education-btxt { position:absolute; left:0; bottom:0; white-space:nowrap; z-index:2; }
.material-box .mov-box .education-btxt span { font-family:var(--mainFont); color:#fff; font-size:120px; line-height:1.3; font-weight:500; letter-spacing:7.2px; display:inline-block; margin-right:20px; }
.material-box .mov-box .ani-box { position:absolute; left:0; top:0; height:100%; width:100%; }
.material-box .mov-box .bg { position:absolute; left:0; top:0; height:100%; width:100%; }
@media screen and (max-width:1440px){
	.material-box .top { padding:110px 0 140px; }
	.material-box .mainTextBox { margin-top:80px; }
	.material-box .mov-box { padding:170px 0; }
	.material-box .mov-box .education-btxt span { font-size:100px; }
}
@media screen and (max-width:1024px){
	.material-box .top { padding:90px 0 100px; }
	.material-box .mainTextBox { margin-top:60px; }
	.material-box .mainTextBox > dl > dt br { display:none }
	.material-box .mainTextBox > dl > dt,
	.material-box .mainTextBox > dl > dd { width:100%; }
	.material-box .mainTextBox > dl > dd { margin-top:20px; }
	.material-box .mainTextBox > dl > dd .btn-view { margin-top:35px; }
	.material-box .mov-box { padding:80px 20px 120px; }
	.material-box .mov-box .video-box { padding:4px; border-radius:20px; }
	.material-box .mov-box .video-box video,
	.material-box .mov-box .video-box iframe { left:4px; top:4px; width:calc(100% - 8px); height:calc(100% - 8px); border-radius:15px; }
	.material-box .mov-box .education-btxt span { font-size:70px; margin-right:18px; letter-spacing:6px; }
}
@media screen and (max-width:640px){
	.material-box .top { padding:60px 0 80px; }
	.material-box .mainTextBox { margin-top:40px; }
	.material-box .mainTextBox > dl > dd .btn-view { margin-top:20px; }
	.material-box .mainTextBox > dl > dd .btn-view a { margin:0 auto }
	.material-box .mov-box { padding:60px 20px 80px; }
	.material-box .mov-box .education-btxt span { font-size:40px; margin-right:15px; letter-spacing:4px; }
}

@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }			
}


/* animation */
.material-box .mov-box .ani-box .left:after { content:""; display:block; width:100%; height:36%; background:#fff; position:absolute; margin-left:15%; left:49%; top:0; }
.material-box .mov-box .ani-box .left:before { content:""; display:block; width:100%; height:70%; background:#fff; position:absolute; left:49%; top:35%; }
.material-box .mov-box .ani-box .right:after { content:""; display:block; width:100%; height:36%; background:#fff; position:absolute; margin-right:15%; right:49%; top:0; }
.material-box .mov-box .ani-box .right:before { content:""; display:block; width:100%; height:70%; background:#fff; position:absolute; right:49%; top:35%; }
.material-box .mov-box.subOn .bg { animation:over_blur 4s 0.5s; animation-fill-mode:both; }
.material-box .mov-box.subOn .ani-box { animation:over_bg 4s 0.3s; animation-fill-mode:both; }
.material-box .mov-box.subOn .education-btxt span { animation:marquee 18s 1.3s infinite linear; }
.material-box .mov-box .video-box { opacity:0; }
.material-box .mov-box.subOn .video-box { animation:ani_5 0.5s 1.4s; animation-fill-mode:both; }

@keyframes over_blur {
	0%  { background:rgba(0, 0, 0, 0); backdrop-filter:blur(0);}
	100% { background:rgba(0, 0, 0, 0.10); backdrop-filter:blur(10px); }
}
@keyframes over_bg {
	0% { transform: scale(1); top:0 }
	90% { opacity:1;}
	100% { transform: scale(12); opacity:0; top:500% }
}

/* company */
.company-box { background:url(/img/main/main_bg.png) center bottom no-repeat; background-attachment:fixed; }
.company-box .top { padding:200px 0 80px; }
.company-box .mainTextBox { margin-top:100px; }
.company-box .mainTextBox > dl { display:flex; flex-wrap:wrap; }
.company-box .mainTextBox > dl > dt,
.company-box .mainTextBox > dl > dd { width:50%; }
.company-box .mainTextBox > dl > dd .btn-view { margin-top:50px; }
@media screen and (max-width:1440px){
	.company-box .top { padding:160px 0 60px; }
}
@media screen and (max-width:1280px){
	.company-box .top { padding:130px 0 60px; }
}
@media screen and (max-width:1024px){
	.company-box .top { padding:100px 0 50px; }
	.company-box .mainTextBox > dl > dt,
	.company-box .mainTextBox > dl > dd { width:100%; }
	.company-box .mainTextBox > dl > dt br { display:none }
	.company-box .mainTextBox > dl > dd { margin-top:20px; }
	.company-box .mainTextBox > dl > dd .btn-view { margin-top:35px; }
}
@media screen and (max-width:640px){
	.company-box .top { padding:60px 0 50px; }
	.company-box .mainTextBox { margin-top:40px; }
	.company-box .mainTextBox > dl > dd .btn-view { margin-top:20px; }
	.company-box .mainTextBox > dl > dd .btn-view a { margin:0 auto }
}

.company-info { padding:70px 0; }
.company-info ul { display:flex; flex-wrap:wrap; gap:40px; }
.company-info ul li { position:relative; width:calc((100% - 80px) / 3); }
.company-info ul li .imgbox { position:relative; overflow:hidden; border-radius:30px; }
.company-info ul li .imgbox:before { content:""; display:block; padding-bottom:74.1%; }
.company-info ul li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; transition:all 0.4s; transform:scale(1); }
.company-info ul li > a:hover .imgbox img { transform:scale(1.1); }
.company-info ul li strong { margin-top:30px; display:block; font-size:24px; color:#111; font-weight:600; line-height:1.3; }
.company-info ul li .imgbox > span { position:absolute; right:30px; bottom:30px; display:flex; justify-content:center; align-items:center; width:60px; height:60px; border-radius:60px; background:#fff; }
.company-info ul li .imgbox > span span.arr { opacity:0; display:block; z-index:2; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:14px; height:14px; background:url(/img/main/info_arr.png) no-repeat center; transition:all 0.2s; }
.company-info ul li .imgbox > span:before { content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:6px; height:6px; border-radius:6px; background:rgba(0,0,0,1); }
.company-info ul li .imgbox > span:after { content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:0; height:0; border-radius:100%; background:var(--mainColor); transition:all 0.25s ease-in-out; }
.company-info ul li > a:hover .imgbox > span:after { width:62px; height:62px; }
.company-info ul li > a:hover .imgbox span.arr { opacity:1; }
@media screen and (max-width:1440px){
	.company-info ul { gap:30px; }
	.company-info ul li { width:calc((100% - 60px) / 3); }
	.company-info ul li strong { margin-top:20px; font-size:22px; }
	.company-info ul li .imgbox > span { right:20px; bottom:20px; width:50px; height:50px; }
	.company-info ul li > a:hover .imgbox > span:after { width:52px; height:52px; }
}
@media screen and (max-width:1280px){
	.company-info ul { gap:20px; }
	.company-info ul li { width:calc((100% - 40px) / 3); }
	.company-info ul li strong { margin-top:18px; font-size:20px; }
	.company-info ul li .imgbox > span { right:15px; bottom:15px; width:45px; height:45px; }
	.company-info ul li > a:hover .imgbox > span:after { width:47px; height:47px; }
}
@media screen and (max-width:1024px){
	.company-info { padding:50px 0; }
	.company-info ul { gap:10px; }
	.company-info ul li { width:calc((100% - 20px) / 3); }
	.company-info ul li strong { margin-top:15px; font-size:18px; }
	.company-info ul li .imgbox { border-radius:15px; }
	.company-info ul li .imgbox > span { right:10px; bottom:10px; width:40px; height:40px; background:var(--mainColor)}
	.company-info ul li .imgbox > span span.arr { width:12px; height:12px; background-size:auto 12px; }
	.company-info ul li .imgbox > span:before,
	.company-info ul li > a .imgbox > span:after { display:none }
	.company-info ul li > a .imgbox span.arr { opacity:1; }
}
@media screen and (max-width:860px){
	.company-info ul li .imgbox > span { width:35px; height:35px; }
	.company-info ul li .imgbox > span span.arr { width:12px; height:12px; background-size:auto 12px; }
}
@media screen and (max-width:640px){
	.company-info { padding:30px 0; }
	.company-info ul { gap:20px; }
	.company-info ul li { width:100%; }
	.company-info ul li .imgbox:before { padding-bottom:40%; }
	.company-info ul li strong { margin-top:0; font-size:20px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; color:#fff }
}

/* animation */
.company-info ul li { opacity:0; }
.company-info ul li.subOn:nth-child(1) { animation:ani_4 0.5s 0.2s; animation-fill-mode:both; }
.company-info ul li.subOn:nth-child(2) { animation:ani_4 0.5s 0.4s; animation-fill-mode:both; }
.company-info ul li.subOn:nth-child(3) { animation:ani_4 0.5s 0.6s; animation-fill-mode:both; }