@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; opacity:1; }
#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; }
#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 { transform:scale(1.25); 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; top:30%; left:0; padding:0 100px; width:100%; z-index:15; text-align:center }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { position:relative; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { display:block; overflow:hidden;font-size:70px; font-weight:600; line-height:1.3;  }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { opacity:0; font-size:70px; font-weight:600; color:#fff; line-height:1.3; display:inline-block; min-width:18px; }
#visual .swiper-container .swiper-slide .txtbox .txt-1n > span > span { font-size:60px; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { position:relative; margin-top:20px; overflow:hidden; display:block; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { opacity:0; font-size:20px; font-weight:400; color:#fff; line-height:1.3; display:inline-block;  }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > .aniTxt1 > span { animation:blur_txt 0.5s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > .aniTxt2 > span { animation:blur_txt 0.5s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_3 0.8s 0.8s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > .aniTxt1-1 { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > .aniTxt2-1 { animation:ani_3 0.8s 0.8s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { animation:bgs1 3.5s 0.1s; animation-fill-mode:both; }
.visual .swiper-btn { position:absolute; top:50%; transform:translateY(-50%); display:block; width:40px; height:40px; z-index:25; background:url(/img/main/swiper_btn.png) center no-repeat; opacity:0.5; }
.visual .swiper-btn.swiper-button-prev { left:80px; }
.visual .swiper-btn.swiper-button-next { right:80px; transform:translateY(-50%) rotate(-180deg); }
.visual .control_box { position:absolute; top:60%; left:0; width:100%; z-index:10; }
.visual .control_box .txt { position:absolute; top:0; left:0; color:#fff; font-size:16px; font-weight:700; line-height:1.3; }
.visual .control_box .txt span { color:#fff; font-weight:600; }
.visual .control_box .total { left:109px; }
.visual .control_box .box { position:relative; display:flex; justify-content:center; justify-content:center; width:100%; }

.visual .control_box .box .playstop { position:relative; margin:1px 0 0 20px; cursor:pointer; }
.visual .control_box .box .playstop .stop { position:absolute; right:0; width:20px; height:20px; background:url(/img/main/btn_stop.png) center no-repeat; text-indent:-9999em; overflow:hidden }
.visual .control_box .box .playstop .play { position:absolute; right:0; width:20px; height:20px; background:url(/img/main/btn_play.png) center no-repeat; }
.visual .control_box .box svg { position:absolute; left:34px; top:8px; }
.visual .timeBar { stroke:#fff; fill:none; stroke-dasharray:100; stroke-dashoffset:100; width:60px; }

.visual .swiper-pagination { display:flex; position:relative; height:4px; }
.visual .swiper-pagination-bullet { position:relative; text-align:left; border-radius:0; opacity:1; background-color:transparent; margin-right:10px; width:auto; height:auto; transition:all 0.3s; }
.visual .swiper-pagination-bullet em { display:none; font-size:16px; font-weight:700; color:rgba(255,255,255,0.2); line-height:1.3; transition:all 0.3s; }
.visual .swiper-pagination-bullet-active em { color:rgba(255,255,255,1); }
.visual .swiper-pagination-bullet span,
.visual .swiper-pagination-bullet i { position:relative; width:95px; height:4px; background-color:rgba(255,255,255,0.4); }
.visual .swiper-pagination-bullet.swiper-pagination-bullet-active { width:95px; }
.visual .swiper-pagination-bullet .line { position:absolute; top:0; left:0; z-index:2; height:4px; background:#fff }

#visual .scrolldown { position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:3; text-align:center }
#visual .scrolldown .line { position:relative; width:28px; height:46px; display:block; margin:12px auto 0; border-radius:22px; border:3px solid rgba(255,255,255,0.5);}
#visual .scrolldown .line:before { content:""; display:block; width:8px; height:8px; border-radius:10px; background:#fff; position:absolute; top:8px; left:50%; transform:translateX(-50%); animation:scrollDown 2s infinite;  }


.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 60px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { font-size:55px; min-width:16px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:15px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:19px; }
	.visual .swiper-btn.swiper-button-prev { left:40px; }
	.visual .swiper-btn.swiper-button-next { right:40px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { top:38%; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { font-size:36px; min-width:12px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:12px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:17px; }
	.visual .swiper-btn.swiper-button-prev { left:0; }
	.visual .swiper-btn.swiper-button-next { right:0; }
	.visual .swiper-pagination,
	.visual .swiper-pagination-bullet span,
	.visual .swiper-pagination-bullet i,
	.visual .swiper-pagination-bullet .line { height:2px; }
	.visual .swiper-pagination-bullet span,
	.visual .swiper-pagination-bullet i,
	.visual .swiper-pagination-bullet.swiper-pagination-bullet-active { width:80px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox { top:40%; padding:0 30px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { font-size:24px; min-width:8px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:10px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:16px; }
	.visual .swiper-pagination-bullet span,
	.visual .swiper-pagination-bullet i,
	.visual .swiper-pagination-bullet.swiper-pagination-bullet-active { width:50px; }
}

@keyframes scrollDown {
    0% { top:8px; }
    50% { top:calc(100% - 16px); }
    100% { top:8px; }
}
@keyframes scroll_txt {
    0% { opacity:0 }
    50% { opacity:1 }
    100% { opacity:1 }
}


.main2 .about-box { padding-top:200px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 60px; }
.main2 .about-box .l-box { width:calc(62% - 30px); }
.main2 .about-box .l-box .txtbox h3 { font-family:var(--subFont); font-size:116px; font-weight:700; color:#fff; line-height:1.3; }
.main2 .about-box .l-box .txtbox h3 span { font-family:var(--subFont); font-weight:700; display:block; background-image:url(/img/main/about_txt1.jpg); background-clip:text; -webkit-background-clip:text; color: transparent; animation:txtAni_bg 100s infinite alternate; }
.main2 .about-box .l-box .txtbox p.txt { overflow:hidden; margin-top:20px; font-size:20px; font-weight:300; color:#222; line-height:1.7; }
.main2 .about-box .l-box .txtbox p.txt > span { display:block; font-weight:300; }
.main2 .about-box .l-box .imgbox { position:relative; margin-top:50px; overflow:hidden; }
.main2 .about-box .l-box .imgbox img { width:100%; border-radius:15px; }
.main2 .about-box .r-box { width:calc(38% - 30px); position:relative; }
.main2 .about-box .r-box .imgbox { position:relative; overflow:hidden; }
.main2 .about-box .r-box .imgbox img { width:100%; border-radius:15px; }
.main2 .about-box .r-box .btn { position:absolute; left:0; top:0; z-index:2 }
.main2 .about-box .r-box .btn .txt_ani { position:absolute; top:-104px; left:-104px; transform-origin:center; animation:rotate 8s linear infinite; }
.main2 .about-box .r-box .btn .circle { cursor:pointer; position:relative; left:-70px; top:-70px;  width:140px; height:140px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff;  background:linear-gradient(90deg, #203453 0%, #4774B9 100%); filter:drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.10)); backdrop-filter:blur(10px); }
@media screen and (max-width:1780px){
	.main2 .about-box .l-box .txtbox h3 { font-size:96px; }
}
@media screen and (max-width:1500px){
	.main2 .about-box { gap:0 40px; }
	.main2 .about-box .l-box { width:calc(62% - 20px); }
	.main2 .about-box .l-box .txtbox h3 { font-size:78px; }
	.main2 .about-box .l-box .txtbox p.txt { padding-right:10% }
	.main2 .about-box .l-box .txtbox p.txt > span br { display:none }
	.main2 .about-box .r-box { width:calc(38% - 20px); }
	.main2 .about-box .r-box .btn .txt_ani { top:-80px; left:-80px; width:160px; height:160px; }
	.main2 .about-box .r-box .btn .circle { left:-55px; top:-55px;  width:110px; height:110px; font-size:14px; }
}
@media screen and (max-width:1280px){
	.main2 .about-box { gap:0 20px; }
	.main2 .about-box .l-box { width:calc(60% - 10px); }
	.main2 .about-box .l-box .txtbox h3 { font-size:62px; }
	.main2 .about-box .l-box .txtbox p.txt { margin-top:15px; font-size:18px; }
	.main2 .about-box .r-box { width:calc(40% - 10px); }
	.main2 .about-box .r-box .btn .txt_ani { top:-65px; left:-65px; width:130px; height:130px; }
	.main2 .about-box .r-box .btn .circle { left:-45px; top:-45px;  width:90px; height:90px; font-size:13px; }
}
@media screen and (max-width:1024px){
	.main2 .about-box { padding-top:120px; gap:0 20px; }
	.main2 .about-box .l-box .txtbox h3 { font-size:46px; }
	.main2 .about-box .l-box .txtbox p.txt { margin-top:12px; font-size:16px; }
	.main2 .about-box .r-box .btn .txt_ani { top:-65px; left:-65px; width:130px; height:130px; }
	.main2 .about-box .r-box .btn .circle { left:-45px; top:-45px;  width:90px; height:90px; font-size:13px; }
	.main2 .about-box .l-box .imgbox img,
	.main2 .about-box .r-box .imgbox img { border-radius:8px; }
}
@media screen and (max-width:760px){
	.main2 .about-box { position:relative; padding-top:100px; }
	.main2 .about-box .l-box { width:100%; }
	.main2 .about-box .l-box .txtbox p.txt { width:60%; }
	.main2 .about-box .l-box .imgbox { width:60%; margin-top:100px; }
	.main2 .about-box .r-box  { position:absolute; right:0; bottom:0;  }
}
@media screen and (max-width:640px){
	.main2 .about-box .l-box .txtbox h3 { font-size:40px; }
	.main2 .about-box .l-box .txtbox p.txt { width:100%; padding:0; }
	.main2 .about-box .l-box .imgbox { margin-top:100px; }
	.main2 .about-box .r-box .btn { top:50%; z-index:2 }
}


/* animation */
.main2 .about-box .l-box .txtbox .tit { overflow:hidden; }
.main2 .about-box .l-box .txtbox h3 { opacity:0; }
.main2 .about-box.subOn .l-box .txtbox h3 { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.main2 .about-box .l-box .txtbox p.txt span { opacity:0; }
.main2 .about-box.subOn .l-box .txtbox p.txt > span { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
.main2 .about-box .l-box .imgbox:after { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; left:0; top:0;  }
.main2 .about-box.subOn .l-box .imgbox:after { animation:ani_w100 1.0s 0.8s; animation-fill-mode:both; }
.main2 .about-box .r-box .imgbox:after { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; right:0; top:0;  }
.main2 .about-box.subOn .r-box .imgbox:after { animation:ani_w100 1.0s 0.8s; animation-fill-mode:both; }
.main2 .about-box .r-box .btn { opacity:0; }
.main2 .about-box.subOn .r-box .btn { animation:ani_5 1.0s 1.3s; animation-fill-mode:both; }

.main2 .business-box { padding:150px 0; background:url(/img/main/business_bg.png) no-repeat center / cover; }
.main2 .business-box h3 { overflow:hidden; }
.main2 .business-box h3 span { display:block; overflow:hidden; font-family:var(--subFont); font-size:24px; font-weight:600; color:var(--mainColor); line-height:1.3; }
.main2 .business-box dl { overflow:hidden; }
.main2 .business-box dd { margin-top:20px; font-size:54px; font-weight:200; color:#000; line-height:1.3; }
.main2 .business-box dd strong { font-weight:600 }
.main2 .business-box p.txt { margin-top:33px; font-size:24px; font-weight:300; color:#333; line-height:1.3; }
.main2 .business-box .btn { margin-top:60px; overflow:hidden; }
.main2 .business-box .btn a { display:inline-block }
.main2 .business-box .btn a span { font-family:var(--mainFont); font-size:20px; font-weight:600; color:#ccc; line-height:1.3; display:flex; align-items:center; transition:all 0.3s; }
.main2 .business-box .btn a svg { margin-left:15px; transition:all 0.3s; }
.main2 .business-box .btn a svg path { transition:all 0.3s; }
.main2 .business-box .btn a:hover span { color:var(--mainColor); }
.main2 .business-box .btn a:hover svg { margin-left:20px; }
.main2 .business-box .btn a:hover svg path { fill:var(--mainColor); }
@media screen and (max-width:1280px){
	.main2 .business-box h3 span { font-size:20px; }
	.main2 .business-box dd { margin-top:15px; font-size:45px; }
	.main2 .business-box p.txt { margin-top:30px; font-size:20px; }
	.main2 .business-box .btn { margin-top:50px; }
	.main2 .business-box .btn a span { font-size:18px; }
	.main2 .business-box .btn a svg { margin-left:12px; }
	.main2 .business-box .btn a:hover svg { margin-left:18px; }
}
@media screen and (max-width:1024px){
	.main2 .business-box { padding:100px 0; }
	.main2 .business-box h3 span { font-size:18px; }
	.main2 .business-box dd { margin-top:12px; font-size:32px; }
	.main2 .business-box p.txt { margin-top:20px; font-size:18px; }
	.main2 .business-box .btn { margin-top:40px; }
	.main2 .business-box .btn a span { font-size:16px; }
	.main2 .business-box .btn a svg { margin-left:10px; width:16px; }
	.main2 .business-box .btn a:hover svg { margin-left:15px; }
}
@media screen and (max-width:640px){
	.main2 .business-box { padding:80px 0; }
	.main2 .business-box dd { margin-top:10px; font-size:24px; }
	.main2 .business-box .btn { margin-top:30px; }
}


/* animation */
.main2 .business-box h3 span { opacity:0; }
.main2 .business-box.subOn h3 span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.main2 .business-box dd { opacity:0; }
.main2 .business-box.subOn dd { animation:ani_3 0.8s 0.7s; animation-fill-mode:both; }
.main2 .business-box .btn a { opacity:0; }
.main2 .business-box.subOn .btn a { animation:ani_3 0.8s 1.1s; animation-fill-mode:both; }



.main3 { height:100vh; position:relative; overflow:hidden }
.main3 .product-box .pdList { position:relative; height:100vh; }
.main3 .product-box .pdList .inner1720 { position:relative; height:100vh;}
.main3 .product-box .pdList .list { position:absolute; left:0; bottom:0; z-index:5; width:100%; }
.main3 .product-box .pdList .list ul { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; align-items:flex-end; }
.main3 .product-box .pdList .list li { position:relative; width:calc((100% - 10px) / 3); height:180px; overflow:hidden; padding:40px; border-radius:15px 15px 0px 0px; background:rgba(255, 255, 255, 0.01); backdrop-filter:blur(10px); cursor:pointer; transition:all 0.3s; }
.main3 .product-box .pdList .list li.on { height:220px; opacity:0.8; background:rgba(71, 116, 185, 0.8); }
.main3 .product-box .pdList .list li .tit { color:#fff; font-size:25px; font-weight:600; line-height:1.3; }
.main3 .product-box .pdList .list li .btn { position:absolute; left:40px; bottom:40px; opacity:0.5; transition:all 0.3s; }
.main3 .product-box .pdList .list li.on .btn { opacity:1; }
.main3 .product-box .pdList .list li .icon { position:absolute; right:-80px; bottom:45px; opacity:0.5; transition:all 0.4s; }
.main3 .product-box .pdList .list li.on .icon { right:50px; opacity:1; }
.main3 .product-box .pdList .list li a { position:relative; z-index:2; letter-spacing:0.02em; font-size:18px; font-weight:600; color:#000; display:block; transition:all 0.3s ease-in-out; text-transform:uppercase; }
.main3 .product-box .pdList .txtbox { position:relative; }
.main3 .product-box .pdList .txtbox dl { width:100%; position:absolute; left:0; top:0; padding-top:10% }
.main3 .product-box .pdList .txtbox dt { transition:all 1s; transform:translateX(30%); transition-delay:0.2s; opacity:0; }
.main3 .product-box .pdList .txtbox dt h3 span { font-family:var(--mainFont); color:#fff; font-size:24px; font-weight:600; line-height:1.3 }
.main3 .product-box .pdList .txtbox dd { position:relative; transition:all 1s; transform:translateX(30%); opacity:0; transition-delay:0.4s; }
.main3 .product-box .pdList .txtbox dd h4 { color:#fff; font-size:82px; font-weight:700; line-height:1.3; margin-top:15px; }
.main3 .product-box .pdList .txtbox dd p.txt { margin-top:40px; font-size:20px; font-weight:500; color:rgba(255,255,255,0.7); line-height:1.7; }
.main3 .product-box .pdList .txtbox dd .btn { margin-top:50px; overflow:hidden; }
.main3 .product-box .pdList .txtbox dd .btn a { display:inline-block }
.main3 .product-box .pdList .txtbox dd .btn a span { font-family:var(--mainFont); font-size:20px; font-weight:600; color:#ccc; line-height:1.3; display:flex; align-items:center; transition:all 0.3s; }
.main3 .product-box .pdList .txtbox dd .btn a svg { margin-left:15px; transition:all 0.3s; }
.main3 .product-box .pdList .txtbox dd .btn a svg path { transition:all 0.3s; }
.main3 .product-box .pdList .txtbox dd .btn a:hover span { color:var(--mainColor); }
.main3 .product-box .pdList .txtbox dd .btn a:hover svg { margin-left:20px; }
.main3 .product-box .pdList .txtbox dd .btn a:hover svg path { fill:var(--mainColor); } 
.main3 .product-box .pdList .slider { position:absolute; left:0; bottom:0; width:100%; height:100vh; } 
.main3 .product-box .pdList .slider img { width:100%; height:100vh; object-fit:cover; -o-object-fit:cover; }
.main3 .product-box .pdList .slick-next,
.main3 .product-box .pdList .slick-prev { border:1px solid #fff; width:100px; height:100px; }
.main3 .product-box.on .pdList .txtbox dl.on { z-index:2; }
.main3 .product-box.on .pdList .txtbox dl.on dt,
.main3 .product-box.on .pdList .txtbox dl.on dd { transform:translateX(0) !important; opacity:1 !important; }
.main3 .product-box.on .pdList .txtbox dl:nth-child(1) dt,
.main3 .product-box.on .pdList .txtbox dl:nth-child(1) dd { transform:translateX(0); opacity:1; }

.main3 .product-box.on .pdList .slider:after { width:0; }
.main3 .product-box .pdList .slick-slide .item { overflow:hidden; }
.main3 .product-box .pdList .slick-active .item { animation:ani_5 1.0s 0.1s; animation-fill-mode:both;}
@media screen and (max-width:1760px){
	.main3 .product-box .pdList .list { left:20px; width:calc(100% - 40px); }
}
@media screen and (max-width:1440px){
	.main3 .product-box .pdList .txtbox dd h4 { font-size:70px; }
}
@media screen and (max-width:1280px){
	.main3 .product-box .pdList .txtbox dt h3 span { font-size:20px; }
	.main3 .product-box .pdList .txtbox dd h4 { font-size:62px; margin-top:12px; }
	.main3 .product-box .pdList .txtbox dd p.txt { margin-top:30px; font-size:18px; }
	.main3 .product-box .pdList .txtbox dd .btn { margin-top:40px; }
	.main3 .product-box .pdList .txtbox dd .btn a span { font-size:18px; }
	.main3 .product-box .pdList .txtbox dd .btn a svg { margin-left:12px; }
	.main3 .product-box .pdList .txtbox dd .btn a:hover svg { margin-left:18px; }
}
@media screen and (max-width:1024px){
	.main3 .product-box .pdList .list li { height:120px; padding:20px; border-radius:8px 8px 0px 0px; }
	.main3 .product-box .pdList .list li.on { height:160px; }
	.main3 .product-box .pdList .list li .tit { font-size:18px; }
	.main3 .product-box .pdList .list li .btn { left:20px; bottom:20px; }
	.main3 .product-box .pdList .list li .btn svg { width:28px; }
	.main3 .product-box .pdList .list li .icon { bottom:35px; }
	.main3 .product-box .pdList .list li .icon svg { height:45px; }
	.main3 .product-box .pdList .list li.on .icon { right:15px; }
	.main3 .product-box .pdList .list li.on:nth-child(2) .icon { right:20px; }
	.main3 .product-box .pdList .list li a { font-size:16px; }
	.main3 .product-box .pdList .txtbox dl { top:70px; }
	.main3 .product-box .pdList .txtbox dt h3 span { font-size:18px; }
	.main3 .product-box .pdList .txtbox dd h4 { font-size:50px; margin-top:10px; }
	.main3 .product-box .pdList .txtbox dd p.txt { margin-top:25px; font-size:16px; }
	.main3 .product-box .pdList .txtbox dd .btn { margin-top:30px; }
	.main3 .product-box .pdList .txtbox dd .btn a span { font-size:16px; }
	.main3 .product-box .pdList .txtbox dd .btn a svg { margin-left:10px; width:16px; }
	.main3 .product-box .pdList .txtbox dd .btn a:hover svg { margin-left:15px; }
}
@media screen and (max-width:640px){
	.main3 .product-box .pdList .list { bottom:5px; }
	.main3 .product-box .pdList .list li { width:calc((100% - 5px) / 2); border-radius:8px; height:90px; padding:15px 10px; }
	.main3 .product-box .pdList .list li.full { width:100%; }
	.main3 .product-box .pdList .list li.full br { display:none }
	.main3 .product-box .pdList .list li.on { height:90px; }
	.main3 .product-box .pdList .list li .tit { font-size:16px; }
	.main3 .product-box .pdList .list li .btn { left:10px; bottom:0; }
	.main3 .product-box .pdList .list li .btn svg { width:22px; }
	.main3 .product-box .pdList .list li .icon { bottom:12px; }
	.main3 .product-box .pdList .list li .icon svg { height:30px; }
	.main3 .product-box .pdList .list li.on .icon { right:-8px; }
	.main3 .product-box .pdList .list li.on:nth-child(2) .icon { right:2px; }
	.main3 .product-box .pdList .txtbox dl { top:100px; }
	.main3 .product-box .pdList .txtbox dt h3 span { font-size:16px; }
	.main3 .product-box .pdList .txtbox dd h4 { font-size:38px; }
	.main3 .product-box .pdList .txtbox dd p.txt { margin-top:20px; font-size:15px; padding-right:5% }
	.main3 .product-box .pdList .txtbox dd p.txt br { display:none }
	.main3 .product-box .pdList .txtbox dd .btn { margin-top:30px; }
}

/* animation */
.main3 .product-box .pdList .list p.tit,
.main3 .product-box .pdList .list li  { opacity:0; }
.main3 .product-box.subOn .pdList .list p.tit{ animation:bgs4 0.5s 0.2s; animation-fill-mode:both; } 
.main3 .product-box.subOn .pdList .list li:nth-child(1) { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }
.main3 .product-box.subOn .pdList .list li:nth-child(2) { animation:ani_2 0.5s 0.4s; animation-fill-mode:both; }
.main3 .product-box.subOn .pdList .list li:nth-child(3) { animation:ani_2 0.5s 0.6s; animation-fill-mode:both; }
.main3 .product-box.subOn .pdList .list li:nth-child(4) { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; }
.main3 .product-box.subOn .pdList .list li:nth-child(5) { animation:ani_2 0.5s 1.0s; animation-fill-mode:both; }
.main3 .product-box.subOn .pdList .list li:nth-child(6) { animation:ani_2 0.5s 1.2s; animation-fill-mode:both; }


.main4 { overflow:hidden } 
.main4 .customer-box { position:relative; padding:200px 0 235px; overflow:hidden } 
.main4 .customer-box .title-box { text-align:center; }
.main4 .customer-box .title-box .stxt { overflow:hidden; font-family:var(--mainFont); color:var(--mainColor); font-size:24px; font-weight:600; line-height:1.3 }
.main4 .customer-box .title-box .stxt span { font-weight:600; display:block; }
.main4 .customer-box .title-box h3 { margin-top:15px; overflow:hidden }
.main4 .customer-box .title-box h3 span { display:block; font-family:var(--mainFont); color:#222; font-size:64px; font-weight:600; line-height:1.3 }
.main4 .customer-box .listCont { margin-top:50px; }
.main4 .customer-box .listCont .nav { position:relative; display:flex; align-items:center; justify-content:center; }
.main4 .customer-box .listCont .nav > li:not(:last-child) { margin-right:50px; }
.main4 .customer-box .listCont .nav > li a { width:250px; height:60px; display:flex; align-items:center; justify-content:center; text-align:center; color:#999; font-size:18px; font-weight:500; line-height:1.3; transition:all 0.3s; border-radius:10px; }
.main4 .customer-box .listCont .nav > li.active a { background:var(--gradient, linear-gradient(90deg, #203453 0%, #4774B9 100%)); color:#fff; }
.main4 .customer-box .listCont .listbox { position:relative; }
.main4 .customer-box .listCont .listbox:before { content:""; display:block; padding-bottom:26.5%; }
.main4 .customer-box .listCont .listbox .list { position:absolute; left:0; top:0; width:100%; height:100%; display:none; }
.main4 .customer-box .listCont .slider { margin-top:50px; overflow:hidden; height:100%; }
.main4 .customer-box .listCont .slider .inner { position:relative; width:126.627%; left:50%; transform:translateX(-50%); height:100%; }
.main4 .customer-box .listCont .listbox .swiper-slide { position:relative; transition:all 0.3s; width:calc((100% - 120px) / 3); }
.main4 .customer-box .listCont .listbox .swiper-slide a { display:block; width:66.6180%; position:absolute; top:0;}
.main4 .customer-box .listCont .listbox .swiper-slide .txtbox { padding-top:25px; }
.main4 .customer-box .listCont .listbox .swiper-slide .txtbox .txt { color:#666; font-size:17px; font-weight:300; line-height:1.6; transition:all 0.3s; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.main4 .customer-box .listCont .listbox .swiper-slide .txtbox .date { margin-top:20px; color:#aaa; font-size:17px; font-weight:300; line-height:1.3; transition:all 0.3s; }
.main4 .customer-box .listCont .listbox .swiper-slide .imgbox { position:relative; overflow:hidden; border-radius:15px; }
.main4 .customer-box .listCont .listbox .swiper-slide .imgbox:before { content:""; display:block; padding-bottom:60%; transition:all 0.3s; }
.main4 .customer-box .listCont .listbox .swiper-slide .imgbox img { transform:scale(1.00); transition:all 0.3s; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.main4 .customer-box .listCont .listbox .swiper-slide .imgbox:after { opacity:0; transition:all 0.3s;  content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); border-radius:15px; }
.main4 .customer-box .listCont .listbox .swiper-slide:hover .imgbox img { transform:scale(1.17); }
.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox { padding-top:0; }
.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox .txt { position:absolute; left:0; bottom:83px; width:100%; padding:0 40px; color:#fff; font-size:18px; font-weight:400; }
.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox .date { position:absolute; left:40px; bottom:40px; margin-top:20px; color:rgba(255,255,255,0.5); font-size:18px; font-weight:500; }
.main4 .customer-box .listCont .listbox .swiper-slide .imgbox .line { opacity:0; border-radius:15px; position:absolute; left:0; top:0; width:100%; height:100%; border:4px solid var(--mainColor); z-index:2; transition:all 0.3s; }
.main4 .customer-box .listCont .listbox .swiper-slide-active .imgbox:after,
.main4 .customer-box .listCont .listbox .swiper-slide-active:hover .imgbox .line { opacity:1; }
.main4 .customer-box .listCont .listbox .swiper-slide-active:hover .imgbox:after { opacity:0.3; }
.main4 .customer-box .listCont .listbox .swiper-slide-active a { width:100%; }
.main4 .customer-box .listCont .listbox .swiper-slide-next a { left:0; }
.main4 .customer-box .listCont .listbox .swiper-slide-prev a { right:0; }
.main4 .customer-box .listCont .listbox .list .btn_pn { position:absolute; top:50%; transform:translateY(-50%); z-index:10; text-indent:-9999em; overflow:hidden; width:70px; height:70px; border-radius:10px; box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.10); backdrop-filter:blur(10px); }
.main4 .customer-box .listCont .listbox .list .btn_prev,
.main4 .customer-box .listCont .listbox .list .btn_next { background:rgba(71, 116, 185, 0.30) url(/img/main/btn_arr3.svg) center center no-repeat; cursor:pointer; }
.main4 .customer-box .listCont .listbox .list .btn_next { transform:rotateY(180deg); }
.main4 .customer-box .listCont .listbox .list .btn_prev { left:30%; }
.main4 .customer-box .listCont .listbox .list .btn_next { right:30%; transform:translateY(-50%) rotateY(180deg);  }
.main4 .customer-box .listCont .listbox .list .swiper-pagination-c { position:absolute; left:50%; transform:translateX(-50%); top:unset; bottom:0; width:calc((100% - 120px) / 3); z-index:40; height:5px; background:rgba(238, 238, 238, 1); }
.main4 .customer-box .listCont .listbox .list .swiper-pagination-c .swiper-pagination-progressbar-fill { background:var(--mainColor); }
.main4 .customer-box .listCont .listbox .btn { position:absolute; right:0; top:-38px; overflow:hidden; }
.main4 .customer-box .listCont .listbox .btn a { display:inline-block }
.main4 .customer-box .listCont .listbox .btn a span { font-family:var(--mainFont); font-size:20px; font-weight:600; color:#ccc; line-height:1.3; display:flex; align-items:center; transition:all 0.3s; }
.main4 .customer-box .listCont .listbox .btn a svg { margin-left:15px; transition:all 0.3s; }
.main4 .customer-box .listCont .listbox .btn a svg path { transition:all 0.3s; }
.main4 .customer-box .listCont .listbox .btn a:hover span { color:var(--mainColor); }
.main4 .customer-box .listCont .listbox .btn a:hover svg { margin-left:20px; }
.main4 .customer-box .listCont .listbox .btn a:hover svg path { fill:var(--mainColor); } 
.main4 .customer-box .customer-btxt { position:absolute; left:0; bottom:-4px; white-space:nowrap; z-index:2; display:flex; overflow:hidden; }
.main4 .customer-box .customer-btxt span img { display:inline-block; margin-right:50px; }
@media screen and (max-width:1600px){
	.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox .txt { bottom:70px; padding:0 30px; }
	.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox .date { left:30px; bottom:30px; }
}
@media screen and (max-width:1280px){
	.main4 .customer-box { position:relative; padding:120px 0 200px; }
	.main4 .customer-box .title-box .stxt { font-size:20px; }
	.main4 .customer-box .title-box h3 { margin-top:12px; }
	.main4 .customer-box .title-box h3 span { font-size:45px; }
	.main4 .customer-box .listCont,
	.main4 .customer-box .listCont .slider { margin-top:40px; }
	.main4 .customer-box .listCont .listbox:before { padding-bottom:31%; }
	.main4 .customer-box .listCont .listbox .swiper-slide .imgbox:before { padding-bottom:72%; }
	.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox .txt { bottom:50px; padding:0 20px; }
	.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox .date { left:20px; bottom:24px; }
	.main4 .customer-box .listCont .listbox .swiper-slide { width:calc((100% - 60px) / 3); }
	.main4 .customer-box .listCont .listbox .list .swiper-pagination-c { width:calc((100% - 60px) / 3); }
	.main4 .customer-box .listCont .listbox .list .btn_prev,
	.main4 .customer-box .listCont .listbox .list .btn_next { background-size:15px auto; }
	.main4 .customer-box .listCont .listbox .list .btn_pn { width:60px; height:60px; }
	.main4 .customer-box .listCont .listbox .swiper-slide .txtbox { padding-top:12px; }
	.main4 .customer-box .listCont .listbox .swiper-slide .txtbox .txt { font-size:16px; }
	.main4 .customer-box .listCont .listbox .swiper-slide .txtbox .date { margin-top:10px; font-size:16px; }
	.main4 .customer-box .listCont .listbox .btn a span { font-size:18px; }
	.main4 .customer-box .listCont .listbox .btn a svg { margin-left:12px; }
	.main4 .customer-box .listCont .listbox .btn a:hover svg { margin-left:18px; }
	.main4 .customer-box .customer-btxt { bottom:-4px; }
	.main4 .customer-box .customer-btxt span img { height:90px; margin-right:40px; }
}
@media screen and (max-width:1024px){
	.main4 .customer-box .listCont .listbox .swiper-slide .imgbox { border-radius:8px; }
	.main4 .customer-box .listCont .listbox .swiper-slide .imgbox:after { border-radius:8px; }
	.main4 .customer-box .listCont .listbox .swiper-slide .imgbox .line { border-radius:8px; border:2px solid var(--mainColor); }
	.main4 .customer-box .listCont .listbox .list .swiper-pagination-c { height:3px; }
	.main4 .customer-box .listCont .listbox .btn { top:unset; margin-top:30px; right:unset; position:relative; display:flex; justify-content:center; }
	.main4 .customer-box .listCont .listbox .btn a span { font-size:16px; }
	.main4 .customer-box .listCont .listbox .btn a svg { margin-left:10px; width:16px; }
	.main4 .customer-box .listCont .listbox .btn a:hover svg { margin-left:15px; }
}
@media screen and (max-width:860px){
	.main4 .customer-box { position:relative; padding:80px 0 160px; }
	.main4 .customer-box .title-box .stxt { font-size:18px; }
	.main4 .customer-box .title-box h3 { margin-top:10px; }
	.main4 .customer-box .title-box h3 span { font-size:32px; }
	.main4 .customer-box .listCont .nav { gap:0 10px; }
	.main4 .customer-box .listCont .nav > li { width:calc((100% - 10px) / 2); }
	.main4 .customer-box .listCont .nav > li:not(:last-child) { margin-right:0; }
	.main4 .customer-box .listCont .nav > li a { width:100%; height:50px; font-size:16px; border-radius:5px; }
	.main4 .customer-box .listCont,
	.main4 .customer-box .listCont .slider { margin-top:30px; }
	.main4 .customer-box .listCont .slider .inner { width:100%; left:0; transform:translateX(0); }
	.main4 .customer-box .listCont .listbox:before { padding-bottom:68%; }
	.main4 .customer-box .listCont .listbox .swiper-slide .imgbox:before { padding-bottom:65%; }
	.main4 .customer-box .listCont .listbox .swiper-slide a { width:100%; position:absolute; top:0;}
	.main4 .customer-box .listCont .listbox .swiper-slide { width:100%; }
	.main4 .customer-box .listCont .listbox .list .swiper-pagination-c { width:100%; height:3px; }
	.main4 .customer-box .listCont .listbox .list .btn_prev { left:0; }
	.main4 .customer-box .listCont .listbox .list .btn_next { right:0; }
	.main4 .customer-box .listCont .listbox .list .btn_prev,
	.main4 .customer-box .listCont .listbox .list .btn_next { background-size:12px auto; border-radius:5px; }
	.main4 .customer-box .listCont .listbox .list .btn_pn { width:50px; height:50px; }
	.main4 .customer-box .customer-btxt span img { height:70px; margin-right:30px; }
}
@media screen and (max-width:640px){
	.main4 .customer-box .title-box h3 { margin-top:7px; }
	.main4 .customer-box .title-box h3 span { font-size:28px; }
}

/* animation */
.main4 .customer-box .title-box .stxt span { opacity:0; }
.main4 .customer-box.subOn .title-box .stxt span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
.main4 .customer-box .title-box h3 span { opacity:0; }
.main4 .customer-box.subOn .title-box h3 span { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }
.main4 .customer-box .listCont .nav li { opacity:0; }
.main4 .customer-box.subOn .listCont .nav li:nth-child(1) { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; }
.main4 .customer-box.subOn .listCont .nav li:nth-child(2) { animation:ani_1 0.5s 0.8s; animation-fill-mode:both; }
.main4 .customer-box .listCont .slider { opacity:0; }
.main4 .customer-box.subOn .listCont .slider { animation:ani_4 0.5s 0.5s; animation-fill-mode:both; }
.main4 .customer-box .listCont .listbox .swiper-slide-active .txtbox { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; } 
.main4 .customer-box.subOn .customer-btxt span { animation:marquee 18s 0.5s infinite linear; }

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