@charset "UTF-8";
.home-banner { position: relative; width: 100%; overflow: hidden; }
.home-banner .banner1 { width: 100%; height: 177.8667vw; background: linear-gradient(#090945, #132372); }
.home-banner .banner1 .container { height: 100%; }
.home-banner .banner1 .banner-title { margin-top: 22.14vw; }
.home-banner .banner1 h2 { font-family: 'SourceHanSansCN-Bold'; font-size: calc(30px + (60 - 30) * ((100vw - 375px) / (750 - 375))); font-weight: bold; line-height: 1.2; color: #fff; text-align: center; }
.home-banner .banner1 .banner-img-box { position: relative; margin-top: 19.47vw; }
.home-banner .banner1 .banner-img-box .banner1-bg { position: relative; width: 67.2vw; height: 67.2vw; margin: 0 auto; background: url('../images/banner_bg.png') center/contain no-repeat; }
.home-banner .banner1 .banner-img-box .banner-icon01 {
	position: absolute; top: 38.09%; right: 0; width: 11.51%; height: 11.51%; max-width: 70px; max-height: 70px;
    -webkit-transform: translate(35%,-50%);
       -moz-transform: translate(35%,-50%);
        -ms-transform: translate(35%,-50%);
         -o-transform: translate(35%,-50%);
            transform: translate(35%,-50%);
}
.home-banner .banner1 .banner-img-box .banner-icon02 { position: absolute; left: 26.2%; top: 70.63%; width: 20.63%; height: 20.63%; max-width: 126px; max-height: 126px; }
.home-banner .banner1 .banner-img-box .banner-icon03 { position: absolute; left: 18.25%; top: 2%; width: 11.51%; height: 11.51%; max-width: 72px; max-height: 72px; }
.home-banner .banner1 .banner-img-box .banner-icon04 { position: absolute; right: 3.17%; bottom: 10.31%; width: 16.27%; height: 16.27%; max-width: 100px; max-height: 100px; }
.home-banner .banner1 .banner-img-box .banner-icon05 { position: absolute; left: 55.16%; top: 10.71%; width: 16.27%; height: 16.27%; max-width: 100px; max-height: 100px; }
.home-banner .banner1 .banner-img-box .banner-icon06 { position: absolute; left: -7.94%; top: 42.86%; width: 16.27%; height: 16.27%; max-width: 100px; max-height: 100px; }
.home-banner .banner1 .banner-img-box .banner-icon07 { position: absolute; left: 21.43%; top: 28.57%; width: 3.97%; height: 3.97%; max-width: 24px; max-height: 24px; }
.home-banner .banner1 .banner-img-box .banner-icon07 img { position: absolute; }
.home-banner .banner1 .banner-wave-Wrap { position: absolute; left: 0; bottom: 0; right: 0;  width: 100%; height: calc(65px + (150 - 65) * ((100vw - 375px) / (1920 - 375))); max-height: 204px; margin: auto; overflow: hidden; }
.home-banner .banner1 .banner-wave-Inner { position: absolute; bottom: 0; width: 100%; height: 100%;}
.home-banner .banner1 .banner-wave-Inner .wave-quick { background-image: url('../images/banner_wave_1.png'); background-size: 50% 100%; animation: move_wave 10s linear infinite; }
.home-banner .banner1 .banner-wave-Inner .wave-slow { background-image: url('../images/banner_wave_2.png'); background-size: 50% 100%; animation: move_wave 15s linear infinite; }
.home-banner .banner1 .banner-wave-Inner .wave {
    position: absolute; left: 0; width: 400%; height: 100%; background-repeat: repeat-x; background-position: left bottom;
    transform-origin: center bottom;
}
@keyframes move_wave {
    0% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(-25%) scaleY(0.9); }
    100% { transform: translateX(-50%) scaleY(1); }
}
.rains {
    position: absolute; top: -50%; right: 0; z-index: 10; width: 1px; height: 50vh;
    transform: rotate(-45deg);
}
.rain {
    position: absolute; top: var(--top-offset); left: 0; width: var(--rain-width); height: var(--rain-height);
    transform: translate3d(10em, 0, 0);
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
}
.rain:nth-child(1) { --rain-width: 33.3333vw; --rain-height: 21.6vw; --top-offset: -35%; --fall-duration: 6.295s; --fall-delay: 1.613s; }
.rain:nth-child(2) { --rain-width: 42.9333vw; --rain-height: 27.6vw; --top-offset: 0%; --fall-duration: 6.744s; --fall-delay: 3.299s; }
.rain:nth-child(3) { --rain-width: 35.7333vw; --rain-height: 23.0667vw; --top-offset: 50%; --fall-duration: 7.356s; --fall-delay: 5.793s; }
.rain:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(45deg); }
.rain:nth-child(1):before { background: url('../images/home_banner_rain1.png') center/contain no-repeat; }
.rain:nth-child(2):before { background: url('../images/home_banner_rain2.png') center/contain no-repeat; }
.rain:nth-child(3):before { background: url('../images/home_banner_rain3.png') center/contain no-repeat; }
@keyframes fall {
    to { transform: translate3d(-62em, 0, 0); }
}
.home-main-wrap { background: linear-gradient(#132372, #0f1961); }
.home-main-wrap .home-section h2 { font-family: 'SourceHanSansCN-Bold'; font-size: calc(24px + (48 - 24) * ((100vw - 375px) / (750 - 375))); font-weight: bold; line-height: 1.1; color: #fff; text-align: center; }
.home-main-wrap .home-section p { margin-top: .625em; font-family: 'SourceHanSansCN-Bold'; font-size: calc(24px + (48 - 24) * ((100vw - 375px) / (750 - 375))); font-weight: bold; line-height: 1.1; text-align: center; background: linear-gradient(90deg, rgba(3,255,221,1) 0.87890625%, rgba(51,153,255,1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-main-wrap .home-s1 { padding-top: calc(34px + 64 * ((100vw - 375px) / (1920 - 375))); padding-bottom: calc(85px + 23 * ((100vw - 375px) / (1920 - 375))); }
.home-main-wrap .home-s1-content { width: 90.67%; margin: 0 auto; padding-top: calc(34px + 64 * ((100vw - 375px) / 1545)); text-align: center; }
.home-main-wrap .home-s2 { padding-top: calc(85px + (108 - 85) * ((100vw - 375px) / (1920 - 375))); padding-bottom: calc(85px + (108 - 85) * ((100vw - 375px) / (1920 - 375))); }
.home-s2 .home-s2-content { padding-top: calc(85px + (108 - 85) * ((100vw - 375px) / (1920 - 375))); text-align: center; }
/*
.home-main-wrap .home-s3 { padding-top: calc(85px + 23 * ((100vw - 375px) / 1545)); padding-bottom: calc(85px + 23 * ((100vw - 375px) / 1545)); }
.home-s3 .home-s3-content { padding-top: calc(134px + 30 * ((100vw - 375px) / 1545)); }
.home-s3 .viewer-bg {width: 76.53vw; max-width: 574px; max-height: 606px; height: 80.8vw; margin: 0 auto; background: url('../images/viewer_bg.png') 50% 0/100% 100% no-repeat; }
.home-s3 .viewer { width: 100%; height: 100%; margin-left: auto; margin-right: auto; background: url('../images/viewer.png') 50% 0/100% 300% no-repeat; }
.home-s3 .viewer.frame1 { background-position: 50% 0; }
.home-s3 .viewer.frame2 { background-position: 50% 50%; }
.home-s3 .viewer.frame3 { background-position: 50% 100%; }
*/
@media (min-width: 768px) {
    .home-banner .banner1 { height: 133.3333vw; }
    .home-banner .banner1 .banner-title { margin-top: 20.4427vw; }
    .home-banner .banner1 .banner-wave-Inner .wave { width: 300%; }
    .home-banner .banner1 .banner-img-box .banner1-bg { width: 50.2604vw; height: 50.2604vw; }
    .rain:nth-child(1) { --rain-width: calc(160px + (250 - 160) * ((100vw - 768px) / (1920 - 768))); --rain-height: calc(104px + (162 - 104) * ((100vw - 768px) / (1920 - 768))); }
    .rain:nth-child(2) { --rain-width: calc(207px + (322 - 207) * ((100vw - 768px) / (1920 - 768))); --rain-height: calc(133px + (207 - 133) * ((100vw - 768px) / (1920 - 768))); }
    .rain:nth-child(3) { --rain-width: calc(172px + (298 - 172) * ((100vw - 768px) / (1920 - 768))); --rain-height: calc(111px + (192 - 111) * ((100vw - 768px) / (1920 - 768))); }
    @keyframes fall {
        to { transform: translate3d(-124em, 0, 0); }
    }
}
@media (max-width: 991.98px) {
    
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-banner .banner1 h2 { font-size: calc(54px + (60 - 54) * ((100vw - 768px) / (991.98 - 768))); }
    .home-banner .banner1 .banner-img-box { margin-top: 12.2396vw; }
}
@media (min-width: 992px) {
    .home-banner .banner1 .banner-wave-Inner .wave { width: 200%; }
    .home-banner .banner1 h2 { font-size: 3.75rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    .home-main-wrap .home-section h2, .home-main-wrap .home-section p { font-size: calc(36px + 4 * ((100vw - 1024px) / (1023.98 - 768))); }
}
@media (min-width: 1024px) {
	.home-banner { height: 768px; }
    .home-banner .banner1 { height: 768px; }
    .home-banner .banner1 .banner-title {
        position: absolute; top: 50%; margin-top: 0;
        -webkit-transform: translateY(-65%);
           -moz-transform: translateY(-65%);
            -ms-transform: translateY(-65%);
             -o-transform: translateY(-65%);
                transform: translateY(-65%);
    }
    .home-banner .banner1 h2 { margin-left: calc(45px + (55 - 45) * ((100vw - 1024px) / (1920 - 1024))); line-height: 1.3; }
    .home-banner .banner1 .banner-img-box {
        position: absolute; top: 50%; left: 50%; margin-top: 0;
        -webkit-transform: translateY(-55%);
           -moz-transform: translateY(-55%);
            -ms-transform: translateY(-55%);
             -o-transform: translateY(-55%);
                transform: translateY(-55%);
    }
    .home-banner .banner1 .banner-img-box .banner1-bg { width: calc(386px + (510 - 386) * ((100vw - 1024px) / (1920 - 1024))); height: calc(386px + (510 - 386) * ((100vw - 1024px) / (1920 - 1024))); margin: 0 auto; }
    .rain:nth-child(1) { --top-offset: -10%; }
    .rain:nth-child(2) { --top-offset: 50%; }
    .rain:nth-child(3) { --top-offset: 80%; }
    .home-main-wrap .home-section h2, .home-main-wrap .home-section p { font-size: calc(40px + 14 * ((100vw - 1024px) / (1920 - 1024))); }
    .home-main-wrap .home-s1 .home-s1-title { margin-right: 4.665%; }
    .home-main-wrap .home-s1 h2, .home-main-wrap .home-s1 p { text-align: right; }
    /*
    .home-main-wrap .home-s3 .home-s3-title { margin-left: 4.665%; }
    .home-main-wrap .home-s3 h2, .home-main-wrap .home-s3 p { text-align: left; }
    */
}
@media (min-width: 1200px) {
	.home-banner { height: 100vh; max-height: 1080px; }
    .home-banner .banner1 { height: 100vh; max-height: 1080px; }
    .home-banner .banner1 h2 {line-height: 1.5; }
}
@media (min-width: 1336px) {
    
}
@media (min-width: 1440px) {
    
}
@media (min-width: 1680px) {
    
}
@media (min-width: 1920px) {
	.home-main-wrap .home-section h2, .home-main-wrap .home-section p { font-size: 3.375rem; }
}