section {
    min-height: 600px;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.banner .scroll-hint {
    z-index: 400;
}

.swiper-banner {
    width: 100%;
    height: 100%;
    background-color: #333;
    color: #fff;
}

.swiper-banner .swiper-slide {}

.swiper-slide .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    z-index: 210;
    padding-top: 2.5%;
}

.banner-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 205;
}

.banner-back.mobile {
    display: none;
}

.banner .title {
    font-size: calc(38 * var(--rpx));
    line-height: calc(54em / 38);
    font-weight: bold;
}

.banner .desc {
    /*
    *530px at 1920
    *360px at 960
    */
    width: clamp(360px, calc(17.708vw + 190px), 530px);
    font-size: calc(16rem / 16);
    line-height: calc(34em / 20);
    margin-top: 1rem;
}

.banner .btn-ctn {
    margin-top: calc(50 * var(--rpx));
}

.section-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 205;
}

.section-back.fixed {
    z-index: 50;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.5);
    transition: cubic-bezier(0.15, 1, 0.336, 1) 2s;
}

.section-back.fixed.show {
    visibility: visible;
    transform: none;
    opacity: 1;
}

.section-back[data-index="1"] {
    mix-blend-mode: multiply;
}

section {
    position: relative;
}

section .wrapper {
    z-index: 210;
    height: 100%;
    position: relative;
}

.section-title {
    color: #000;
}

.features .section-back {
    display: none;
}

.section-back[data-index="2"] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section-back[data-index="2"] img {
    position: absolute;
    width: 100vw;
    /* height: 56.25vw; */
    height: 100%;
    object-fit: cover;
    left: calc((100% - 100vw) / 2);
    bottom: min(0px, calc((100% - 56.25vw) / 2));
}

.feature-curve {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.feature-curve-ctn {
    background: url("../images/screen2.jpg") center/cover no-repeat;
}

.particle-ctn {
    position: absolute;
    bottom: 0;
    margin: auto;
    width: 150vw;
    height: 30vw;
    left: -25vw;
}

.particle-ctn canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body {
    background: linear-gradient(to bottom, #dde0e8, #fff 600px, #fff);
}

.business .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5%;
    padding-top: 7.5%;
}

.business .section-title {
    margin-bottom: calc(16 * var(--rpx));
    ;
}

.business .section-desc {
    font-size: calc(16rem / 16);
    margin-bottom: calc(36 * var(--rpx));
    ;
}

.business-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.business-list .business {
    width: calc(360 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.business .icon {
    width: calc(72 * var(--rpx));
    height: calc(72 * var(--rpx));
    object-fit: contain;
    margin-bottom: calc(18 * var(--rpx));
    ;
}

.business .title {
    font-size: calc(28rem / 16);
    font-weight: bold;
    margin-bottom: calc(12 * var(--rpx));
    ;
}

.business .desc {
    font-size: calc(16rem / 16);
    line-height: calc(36em / 20);
    text-align: center;
    white-space: nowrap;
}

section.products {
    background: linear-gradient(to bottom, #d9dde5, #fff);
}

.products .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 2.5%;
}

.product-list {
    /*
    *30px at 1920
    *20px at 960
    */
    --gap: calc(1.042vw + 10px);
    /*
    *10px at 1920
    *0px at 960
    */
    --line-gap: calc(1.042vw - 10px);
    display: flex;
    margin-top: calc(-7.62%);
}

.product .cover {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}

.product {
    width: calc(((var(--wrapper-width) - 1px) - 4 * var(--gap) - 2 * var(--line-gap)) / 4);
    flex: 0 0 auto;
    margin-right: var(--gap);
    position: relative;
}

.product-list .split-line {
    width: 1px;
    height: auto;
    align-self: stretch;
    background-color: #b6b9be;
    margin-left: var(--line-gap);
    margin-right: calc(var(--line-gap) + var(--gap));
}

.product:last-of-type {
    margin-right: 0;
}

.product .cover img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: .4s;
}

.product .info {
    /*
    *260px at 960
    *180px at 600
    */

    height: calc(22.222vh + 46.667px);
    padding-left: calc(15 * var(--rpx));
    padding-right: calc(15 * var(--rpx));
    padding-top: calc(45 * var(--rpx));
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    text-align: center;
    /* justify-content: center; */
    transition: .4s;
}

@media (min-width: 750px) {
    .action--site-index .feature-list .feature {
        width: calc(265 * var(--rpx));
    }
}

.product .title {
    font-weight: bold;
    /*
    *30px at 1920
    *18px at 960
    */
    font-size: clamp(18px, calc(1.250vw + 6px), 30px);
    margin-bottom: calc(15 * var(--rpx));
}

.product .line {
    width: calc(40 * var(--rpx));
    background: linear-gradient(to right, #509bdf 0%, #48c0ce 50%, #ddbbc1 100%);
    margin-top: calc(12 * var(--rpx));
    margin-bottom: calc(18 * var(--rpx));
}

.product .desc {
    font-size: calc(20rem / 16);
    line-height: calc(30em / 20);
    text-align: center;
}

.product .link-ctn {
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: .4s;
}

.product .link-ctn .link {
    background-color: #e70012;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(14rem / 16);
    height: 100%;
}

.product .link-ctn .link::after {
    content: "";
    filter: url(#white-overlay);
    height: calc(12em / 14);
    width: calc(7em / 14);
    background: url("../images/icon_arr_right.svg") center/contain no-repeat;
    flex: 0 0 auto;
    margin-left: calc(18em / 14);
}

@media (min-width: 751px) {
    .product:hover {
        color: inherit;
    }

    .product:hover .info {
        padding-bottom: calc(50 * var(--rpx));
    }

    .product:hover .link-ctn {
        height: calc(50 * var(--rpx));
        flex: 0 0 auto;
    }

    .product:hover .cover img {
        transform: scale(1.08);
    }
}

section.news {
    background: linear-gradient(to bottom, #dde0e8, #fff);
}

section.news .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.news .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(40 * var(--rpx));
}

.swiper-news {
    /*
    *540px at 960
    *270px at 600
    */
    height: clamp(270px, calc(75vh - 180px), 540px);
    width: 100%;
    overflow: visible;
}

.news.swiper-slide {
    /*
    *60px at 1920
    *30px at 960
    */
    margin-right: 3.125vw;
    /*
    *480px at 960
    *280px at 600
    */
    width: clamp(280px, calc(55.556vh - 53.333px), 480px)
}

.news.swiper-slide:last-of-type {
    margin-right: 0;
}

/*.news .info{
    position: relative;
}*/

.news.first {
    /*
    *640px at 960
    *480px at 600
    */
    width: clamp(480px, calc(44.444vh + 213.333px), 640px);
}

.news.first .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 210;
}


.news .title {
    /*
    *20px at 960
    *0px at 600
    */
    margin-top: clamp(0px, calc(5.556vh - 33.333px), 20px);
}

.news.first .info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 220;
    color: #fff;
    padding-right: calc(36 * var(--rpx));
    padding-left: calc(36 * var(--rpx));
}

.news.first .date .day,
.news.first .date .month {
    color: #fff;
}

.news.first .btn-ctn {
    position: absolute;
    right: calc(30 * var(--rpx));
    bottom: calc(30 * var(--rpx));
}

.news.first .title {
    justify-content: flex-end;
    margin-top: auto;
    margin-bottom: 0;
    font-size: calc(38 * var(--rpx));
    line-height: calc(54em / 38);
    font-weight: normal;
    width: 67%;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    height: calc(108em / 38);
}

.news.first .btn-plus * {
    color: #fff;
}

.news.first .btn-plus .more-text {
    transform: translateX(-80%);
}

.news.first:hover .btn-plus .more-text {
    transform: translateX(-120%);
}

.news .nav-ctn {
    margin-top: calc(30 * var(--rpx));
    display: flex;
}

.news .btn-prev,
.news .btn-next {
    width: calc(50 * var(--rpx));
    height: calc(50 * var(--rpx));
    position: relative;
    border-radius: 50%;
    background-color: #cccdcf;
    transition: .3s;
    cursor: pointer;
}

.news .btn-prev:hover,
.news .btn-next:hover {
    background-color: #e70012;
}

.news .btn-prev::after,
.news .btn-next::after {
    content: "";
    filter: url(#white-overlay);
    width: calc(9 * var(--rpx));
    height: calc(15 * var(--rpx));
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: url("../images/icon_arr_right.svg") center/contain no-repeat;
}

.news .btn-prev {
    margin-right: calc(18 * var(--rpx));
}

.news .btn-prev::after {
    background-image: url("../images/icon_arr_left.svg")
}

.news .swiper-button-disabled {
    opacity: .5;
    pointer-events: none;
}

.news.swiper-slide {}

@media (max-height: 800px) {
    .news:not(.first) .btn-ctn {
        display: none;
    }

    .news .title {
        margin-bottom: 0;
    }
}

#fp-nav.fp-right {
    right: unset !important;
    left: 20px !important;
    z-index: 820;
}

#fp-nav.light ul li a span {
    background-color: #fff;
}

body>canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 100;
    opacity: .5;
    transition: 1.8s
}

body>canvas[data-index="2"] {
    opacity: 1;
    mix-blend-mode: hard-light;
}

.banner-car {
    width: calc(960vw / 19.2);
    height: auto;
    left: 47.5vw;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 208;
}

.banner-back.car-ring {
    background: linear-gradient(135deg, rgba(255, 186, 191, .75) 0%, rgba(255, 186, 191, 0) 67%, rgba(255, 186, 191, 0) 100%),
        radial-gradient(33vw at 67% 50%, rgba(64, 187, 202, .75) 50%, rgba(64, 187, 202, 0) 100%) #4186c4;
    z-index: 207;
    mix-blend-mode: hard-light;
    opacity: 0;
    will-change: -webkit-mask-image, opacity;
    transition: 1s;
}

.banner-back.car-ring.show {
    opacity: .6;
}

.banner-pagination {
    position: absolute;
    /* bottom: calc(150vh / 10.8); */
    bottom: calc(40vh / 10.8 + 110 * var(--rpx));
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 280;
}


.banner .scroll-hint {
    bottom: calc(20vh / 10.8);
}

.banner-pagination .swiper-pagination-bullet {
    margin-left: calc(10 * var(--rpx));
    margin-right: calc(10 * var(--rpx));
    position: relative;
    opacity: .75;
    background-color: #ffffff;
}

.banner-pagination .swiper-pagination-bullet::before {
    content: "";
    width: 400%;
    height: 400%;
    position: absolute;
    left: -150%;
    top: -150%;
    background: rgba(255, 255, 255, .4);
    opacity: 0;
    border-radius: 50%;
    transition: .2s;
}

.banner-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

.banner-pagination .swiper-pagination-bullet:hover::before {
    opacity: .5;
}

.banner-pagination .swiper-pagination-bullet:active::before {
    opacity: 1;
}


.section-back[data-index="1"] {
    /* mix-blend-mode: lighten; */
    mix-blend-mode: multiply;
}

.section-back[data-index="1"].show {
    opacity: .5;
}

@media (max-width: 1380px) {
    .banner .title {
        font-size: calc(33 * var(--rpx));
    }

    .product .info {
        padding-top: calc(40 * var(--rpx));
    }

    .product .desc {
        font-size: calc(16rem / 16);
    }
}

@media (max-width: 750px) {


    #fullpage section .wrapper {
        height: calc(100% - var(--header-height));
        margin-top: var(--header-height);
        padding-top: calc(120vh / 13.34);
        padding-bottom: calc(60 * var(--rpx));
    }


    #fullpage .swiper-slide[data-id="75"] .wrapper {
        padding-top: calc(80vh / 13.34);
    }

    #fp-nav.fp-right {
        display: none;
    }

    .banner .desc {
        width: 100%;
    }

    .banner .swiper-slide::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 50%);
        z-index: 208;
    }

    .section-back[data-index="2"] img {
        height: 100%;
        object-fit: cover;
    }

    .section-back[data-index="1"] {
        height: 100vh;
        width: 178vh;
        left: calc(50% - 89vh);
    }

    .swiper-slide .wrapper {
        padding-top: calc(60 * var(--rpx) + var(--header-height));
        justify-content: flex-start;
    }

    .swiper-slide[data-id="75"] .banner-back {
        object-position: left;
    }

    .swiper-slide[data-id="1"] .banner-back {
        object-position: 70%;
    }

    .banner-car {
        width: 90%;
        left: 5%;
        top: unset;
        bottom: calc(28vh - 28vw);
    }

    .business-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .business .title {
        font-size: calc(24rem / 16);
    }

    .business-list .business {
        width: calc((100% - 12 * var(--rpx)) / 2);
        margin-bottom: calc(20 * var(--rpx));

        background-color: rgba(255, 255, 255, .8);
        backdrop-filter: blur(12px) brightness(1.2) saturate(1.5);
        padding: calc(28 * var(--rpx)) calc(16 * var(--rpx)) calc(24 * var(--rpx));
        filter: drop-shadow(0px calc(6 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 0, 0, .08));
        border-radius: calc(18 * var(--rpx));
    }

    .particle-ctn {
        width: 150vw;
        height: 100vw;
    }

    .product {
        width: 60vw;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .product-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }

    .product {
        width: calc((100% - 12 * var(--rpx)) / 2);
        margin-right: 0;
        margin-bottom: calc(12 * var(--rpx));
    }

    .product .info {
        height: auto;
        flex: 1 1 auto;
        padding-top: calc(24 * var(--rpx));
        padding-bottom: calc(24 * var(--rpx));
    }

    .product .cover {
        padding-bottom: 80%;
    }

    .product-list .split-line {
        display: none;
    }

    .product .title {
        font-size: calc(22rem / 16);
    }

    .swiper-products.swiper-container {
        overflow: visible;
    }

    .news.first,
    .news.swiper-slide {
        width: 60vw;
    }

    .swiper-news {
        height: calc(50vh);
    }

    .swiper-news .news {
        margin-right: 0;
        width: auto;
        height: auto;
    }

    .news-list {
        height: calc(100% - 120 * var(--rpx));
    }

    .news.first .btn-ctn {
        display: none;
    }

    .news .section-header {
        margin-bottom: calc(20 * var(--rpx));
    }

    .business-list {
        margin-top: 0;
    }

    .news.first .title {
        font-size: calc(24rem / 16);
        width: 100%;
    }

    .news.first .info {
        padding: calc(24 * var(--rpx)) calc(24 * var(--rpx));
    }

    #fullpage .news .wrapper {
        padding-top: calc(20 * var(--rpx));
        padding-bottom: calc(20 * var(--rpx));
    }

    .news-list {
        filter: drop-shadow(0px calc(6 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 0, 0, .08));
    }

    .news .nav-ctn {
        display: none;
    }

    .banner .title {
        font-size: calc(20 * var(--rpx));
    }

    .banner-pagination {
        bottom: calc(60vh / 10.8);
    }

    .banner-back.pc {
        display: none;
    }

    .banner-back.mobile {
        display: block;
    }

}

@media (max-width: 600px) {
    #fullpage .features .wrapper,#fullpage .products .wrapper {
        padding: calc(60vh / 13.34) 0;
    }

    .feature .title,.business .title,.product .title {
        font-size: calc(20rem / 16);
    }

    .feature .desc,.product .desc {
        font-size: calc(15rem / 16);
        line-height: calc(28em / 20);
    }
    .product .line{
        display: none;
    }
}