h2.title{ text-align: center; font-weight: bold; margin-bottom: 80px; color:#fff; }
h2.title.aos-animate .split span{ position: relative; display:inline-block; transform:translateY(0); animation: bounce .7s ease alternate;}

.logoList,
.logoList .logoBox{ display:flex; align-items:center; }
.logoList .logoBox.origin{ animation: 60s linear 0s infinite normal forwards running rollingleft;}
.logoList .logoBox.clone{ animation: 60s linear 0s infinite normal forwards running rollingleft2; }
.logoList .logoBox figure{ width: 300px; height: 160px; display:flex; justify-content:center; align-items:center; }
.logoList .logoBox figure img{ transform:scale(0) translateX(-100px); transition:all 0.7s; }
.logoList.aos-animate .logoBox figure img{ transform:scale(1) translateX(0); }

@keyframes rollingleft {
    0% { transform: translateX(0); }
    50% { transform: translateX(-100%); }
    50.01% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}
@keyframes rollingleft2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}

@keyframes bounce {
	0%{ transform:translateY(0); }
	50% { transform:translateY(-30px);}
	100% { transform:translateY(0); }
}


.main{ background: #111; }

.main .fixbg{ position: relative; padding-bottom: calc(200vh); }
.main .fixbg .content{ position: relative; z-index: 2; background: var(--bgC);}
.main .fixbg .bg-wrap{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.main .fixbg .bg-wrap .bg{ position: sticky; top: 0; left: 0; height: 100vh;}
.main section.mb100{ margin-top: -100vh; }

.main .subscriber{ position: relative; text-align: center; color:#fff; }
.main .subscriber .content{ position: relative; z-index: 2; background: var(--bgC);}
.main .subscriber:before{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(119.27% 100% at 50% 0%, #252525 0%, var(--bgC) 65.08%); 
z-index: 1;}
.main .subscriber .img-box{ margin: 0 108px; height: 515px; }
.main .subscriber .img-box .inner-box{ position: relative; display:flex; height: 100%; opacity: 1;}
.main .subscriber .img-box .item-box{ position: relative; }
.main .subscriber .img-box .item-box:not(:last-child){ margin-right: 30px; }
.main .subscriber .img-box .item-box .circle{ position: relative; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0.30); border-radius:50%; width: 0; height: 0; transform-origin:center center; transition:all 0.7s 0.3s; }
.main .subscriber .img-box .item-box:after{ content:''; display:block; width: 10px; height: 10px; background: #fff; border-radius:50%; position: absolute; transform:translate(-50%,-50%);
 top: 50%; left: 50%; }
.main .subscriber .img-box .item-box.aos-animate .circle{ width: 100%; height: 100%; }

.main .subscriber .img-box .item-box.item1{ width: 300px; height: 300px; }
.main .subscriber .img-box .item-box.item2{ width: 240px; height: 240px; align-self: end; }
.main .subscriber .img-box .item-box.item2 .circle{ transition-delay: 0.7s;}
.main .subscriber .img-box .item-box.item3{ width: 210px; height: 210px; margin-top: 105px; }
.main .subscriber .img-box .item-box.item3 .circle{ transition-delay: 1.1s;}
.main .subscriber .img-box .item-box.item4{ width: 150px; height: 150px; align-self: end; margin-bottom: 145px; }
.main .subscriber .img-box .item-box.item4 .circle{ transition-delay: 1.5s;}
.main .subscriber .img-box .item-box.item5{ width: 102px; height: 102px; align-self: end; margin-bottom: 105px; margin-right: 37px; }
.main .subscriber .img-box .item-box.item5 .circle{ transition-delay: 1.9s;}
.main .subscriber .img-box .item-box.item5:after{ width: 8px; height: 8px;}
.main .subscriber .img-box .item-box.item6{ width: 80px; height: 80px; align-self: end; margin-bottom: 195px; margin-right: 20px; }
.main .subscriber .img-box .item-box.item6 .circle{ transition-delay: 2.1s;}
.main .subscriber .img-box .item-box.item6:after{ width: 6px; height: 6px; }
.main .subscriber .img-box .item-box.item7{ width: 44px; height: 44px; margin-top: 195px; }
.main .subscriber .img-box .item-box.item7 .circle{ transition-delay: 2.5s;}
.main .subscriber .img-box .item-box.item7:after{ width: 4px; height: 4px; }

.main .subscriber .img-box .item-box .txt{ font-weight: 300; margin-bottom: 10px; }
.main .subscriber .img-box .item-box .num{ letter-spacing: -1.2px; font-weight: 700; font-family: var(--man); }
.main .subscriber .img-box .item-box .txt-box{ position: absolute; transform:translateX(-50%); left: 50%; margin: 30px 0; top: -135px; height: 75px;}
.main .subscriber .img-box .item-box.type2 .txt-box{ top: 100%; }

.main .result{ position:relative; z-index: 2; }
.main .result .content{ position: relative; background: #111; }
.main .result .content .flex-box{ display:flex; align-items:center; gap:20px; }
.main .result .content .item-box{ position: relative; width: calc((100% - 20px) / 2); height: 265px; text-align: center; border-radius: 20px; border: 1px solid #252525; background: rgba(255, 255, 255, 0.05); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.main .result .content .item-box figure{ position: absolute; }
.main .result .content .item-box .num{ font-family: var(--man); font-weight: 500; letter-spacing: -0.32px; margin-bottom: 40px; color:#fff; }
.main .result .content .item-box .txt{ color: rgba(255, 255, 255, 0.80); font-weight: 500; }
.main .result .content .item-box.box1 figure{ left: 0; bottom: -65px; animation: bounce 2s ease infinite;}
.main .result .content .item-box.box2 figure{ right: 60px; top: -135px; animation: bounce 2s 0.2s ease infinite;}
.main .result .bg-wrap{ opacity: 1; transition:none; } 
.main .result .bg-wrap .fit-box img{ transition:all 2s 1s; transform: translate(-50%,-50%) scale(1); }
.main .result .bg-wrap.aos-animate .fit-box img{ transform: translate(-50%,-50%) scale(1.2); }

.main .platform{ z-index: 3; opacity: 1; }
.main .platform .content{ overflow: hidden;}
.main .platform .bg-wrap{ background: linear-gradient(180deg, #EEF9FF 0%, #DEF3FF 36.91%); }
.main .platform .bg-wrap .w1580 > .flex-box{ margin-top: 50px;}
.main .platform .bg-wrap .bg{ width: 100%; display:flex; justify-content:center; align-items:center; flex-direction: column; overflow: hidden;}
.main .platform .bg-wrap .bg .bubble{ position: relative; text-align: center; color:#252525; font-weight: 600; height: 90px; background: #fff; border-radius:50px; flex-shrink:0; 
 display:flex; align-items:center; justify-content:center; margin-top: 70px; animation: bounce2-2 1.3s .5s ease-in-out infinite;}
.main .platform .bg-wrap .bg .bubble p{ position: relative; padding: 15px 30px; }
.main .platform .bg-wrap .bg .bubble p span{ display:block; }
.main .platform .bg-wrap .bg .bubble p em{ font-weight: bold; }
.main .platform .bg-wrap .bg .bubble p em.txt1{ color:#FF0074; }
.main .platform .bg-wrap .bg .bubble p em.txt2{ color:#0075DF; }
.main .platform .bg-wrap .bg .bubble p img{ margin-left: 10px;}
.main .platform .bg-wrap .bg .bubble > img{ position: absolute; top: 90%; right: 12px;}
.main .platform .bg-wrap .bg .img-wrap{ position: relative; margin-left: -8px; align-items: flex-start; justify-content:space-between; width: 100%; }
.main .platform .bg-wrap .bg .img-wrap .img2{ position: absolute; transform:translate(-50%,-50%); top: 39%; left: 33%; animation: imgMove 1.3s ease-in-out infinite; z-index: 2;}
.main .platform .bg-wrap .bg .img-wrap .img3{ margin-top: 5px;}
.main .platform .bg-wrap .bg .img-wrap .img1{ animation: bounce2-1 1.3s ease-in-out infinite; }
.main .platform .bg-wrap .bg .img-wrap .img3{ animation: bounce2-2 1.3s ease-in-out infinite; }
.main .platform .bg-wrap .bg .cloud{ position: absolute; z-index: -1; animation: bounce3 1.5s ease-in-out infinite; }
.main .platform .bg-wrap .bg .cloud.cloud-top{ top: 80px; right: 0; }
.main .platform .bg-wrap .bg .cloud.cloud-btm{ bottom: 0; left: 0; }
.main .platform .bg-wrap .bg .cloud{ position: absolute; z-index: -1; animation: bounce3 1.5s ease-in-out infinite; }
.main .platform .bg-wrap .bg .cloud.cloud-top{ top: 80px; right: 0; }
.main .platform .bg-wrap .bg .cloud.cloud-btm{ bottom: 0; left: 0; }
.main .platform .bg-wrap .bg .logoList{ position: relative; left: 0; margin:80px 0 0px; }
.main .platform .bg-wrap .bg .logoList .logoBox{ opacity: 0.3; mix-blend-mode: luminosity;}
.main .platform .bg-wrap .bg .logoList .logoBox figure{ width: auto;	height: auto; margin-right: 60px; }
.main .platform .bg-wrap .bg .logoList .logoBox figure img{ max-width:none; filter: grayscale(1); }

@keyframes imgMove {
	0%{ top:38%; }
	50% { top:41%;}
	100% { top:38%; }
}

@keyframes bounce2-1 {
	0%{ transform:translateY(0); }
	50% { transform:translateY(-12px);}
	100% { transform:translateY(0); }
}

@keyframes bounce2-2 {
	0%{ transform:translateY(0); }
	50% { transform:translateY(-17px);}
	100% { transform:translateY(0); }
}

@keyframes bounce3 {
	0%{ transform:translateY(0); }
	50% { transform:translateY(-15px);}
	100% { transform:translateY(0); }
}

.main .view .content{ position: relative; background: var(--bgC); z-index: 4; margin-top: -600px;}
.main .view .content .title{ font-weight: 300;}
.main .view .content .flex-box{ gap: 30px; }
.main .view .content .flex-box .item-box{ width: calc((100% - 60px) / 3); border-radius: 20px; border: 1px solid #252525; background: rgba(255, 255, 255, 0.03); padding: 40px 20px; text-align: center; 
color:rgba(255,255,255,0.8); font-weight: 500;  display:flex; justify-content: center; align-items: center;}
.main .view .content .flex-box .item-box span{ display: inline-block; font-weight: 800; transform:scale(0); transition:all 0.4s 0.2s; }
.main .view .content .flex-box .item1 span{ color: #4FE500; } 
.main .view .content .flex-box .item2 span{ color: #FF0558; } 
.main .view .content .flex-box .item3 span{ color: #14BFF3; } 
.main .view .content .flex-box.aos-animate .item-box span{ transform:scale(1);	}

.main .gallery{ display:flex; overflow: hidden; margin-top: -2px; }
.main .gallery .item-box.item1,
.main .gallery .item-box.item2{ width: 25%;}
.main .gallery .item-box.item3{ width: 50%;}
.main .gallery .item-box > div figure{ padding: 2px; }
.main .gallery .item-box > div figure,
.main .gallery .item-box > div figure img{ width: 100%; }