.main .index-banner {
    width: 100%;
    height: 56.25rem;
    background-image: url(../image/index/banner.png);
    background-position: center;
    background-size: cover;
    background-color: #fff8f7
}

.main .index-banner img {
    height: 100%;
    object-fit: cover
}

.main .index-about {
    width: 100%;
    background-color: #fff8f7;
    overflow: hidden
}

.main .index-about .about-content {
    position: relative
}

.main .index-about .about-content .about-content-left {
    overflow: hidden
}

.main .index-about .about-content .about-content-left .left-content .left-content-item {
    display: none;
    transition: all .3s
}

.main .index-about .about-content .about-content-left .left-content .left-content-item .title-group {
    font-size: 2.75rem;
    color: #333333;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL);
    margin-bottom: 4.13rem;
    margin-top: 15.31rem
}

.main .index-about .about-content .about-content-left .left-content .left-content-item .title-group span {
    color: #ff5861
}

.main .index-about .about-content .about-content-left .left-content .left-content-item .left-dec {
    font-size: 1rem;
    color: #777777;
    line-height: 2rem;
    --wght: 500;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL);
    margin-bottom: 5rem
}

.main .index-about .about-content .about-content-left .left-content .active-item {
    display: block
}

.main .index-about .about-content .about-content-left .change-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20.38rem
}

.main .index-about .about-content .about-content-left .change-button .button-item {
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    border-radius: 50%;
    border: 1px solid #d0cdcc;
    color: #d0cdcc;
    font-size: 1.56rem;
    margin-right: 1.25rem;
    cursor: pointer;
    transition: all .3s
}

.main .index-about .about-content .about-content-left .change-button .button-item:hover {
    background-color: #ff5861;
    color: #fff;
    border-color: #ff5861
}

.main .index-about .about-content .about-content-right {
    position: relative
}

.main .index-about .about-content .about-content-right .swiper-slide {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.main .index-about .about-content .about-content-right .img-box {
    width: 30rem;
    height: 30rem;
    overflow: hidden;
    border-radius: 50%;
    position: absolute;
    left: -2.5rem;
    transition: transform .5s ease-out 0s;
    transform: translate3d(10rem, 0, 0);
    backface-visibility: hidden
}

.main .index-about .about-content .about-content-right .img-box .img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    border-radius: 50%;
    transition: transform 1s ease-in-out 0s, opacity .5s ease-in-out 0s;
    background-size: cover;
    background-position: center
}

.main .index-about .about-content .about-content-right .swiper-slide-active .img-box {
    transform: translate3d(3rem, 0, 0)
}

.main .index-about .about-content::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    right: -69%;
    top: 0;
    border-left: 1px solid rgba(235, 97, 104, 0.22);
    border-radius: 50%
}

.main .index-video {
    width: 100%;
    position: relative
}

.main .index-video .video-group {
    height: 41.25rem;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.main .index-video .video-group .play-btn {
    width: 6.88rem;
    height: 6.88rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 3
}

.main .index-video .video-group video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem
}

.main .index-video .index-video-bg {
    width: 100%;
    height: 37.5rem;
    background-image: url(../image/index/bg.jpg);
    background-position: center;
    background-size: cover
}

.main .index-video .index-video-bg .video-banner-title {
    font-size: 2.5rem;
    color: #fff;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL);
    padding-top: 7.63rem
}

.main .index-video .index-video-bg-btm {
    width: 100%;
    height: 37.5rem;
    background-color: #f8f8f9
}

.main .index-icons {
    background-color: #fff8f7;
    padding: 8.13rem 0
}

.main .index-icons .index-icons-title {
    margin-bottom: 4.38rem
}

.main .index-icons .index-icons-title .icons-title {
    font-size: 2.75rem;
    margin-bottom: .63rem;
    color: #333333;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-icons .index-icons-title .icons-title span {
    color: #ff5861
}

.main .index-icons .index-icons-title .icons-sub-title {
    font-size: 1rem;
    color: #999999;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-icons .icon-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start
}

.main .index-icons .icon-wrapper .icon-item {
    width: 25%;
    height: 15.06rem;
    padding: .63rem
}

.main .index-icons .icon-wrapper .icon-item .item {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 1.25rem;
    border: 3px solid #fff0ee
}

.main .index-icons .icon-wrapper .icon-item .item .item-icon {
    width: 4.63rem;
    margin-bottom: 1.88rem
}

.main .index-icons .icon-wrapper .icon-item .item .item-title {
    font-size: 1.38rem;
    color: #333333;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-product {
    background-color: #f4f4f7;
    padding-top: 7.5rem;
    padding-bottom: 8.75rem
}

.main .index-product .product-wrapper-title {
    margin-bottom: 4.63rem
}

.main .index-product .product-wrapper-title .title {
    font-size: 2.75rem;
    margin-bottom: .63rem;
    color: #333333;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-product .product-wrapper-title .title span {
    color: #ff5861
}

.main .index-product .product-wrapper-title .sub-title {
    font-size: 1rem;
    color: #999999;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-product .product-wrapper-title .show-more {
    width: 12.5rem;
    height: 3.38rem;
    margin-left: auto;
    padding: 0 1.88rem;
    border-radius: 1.69rem;
    border: 1px solid #000000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #333333;
    font-size: 1rem;
    --wght: 500;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL);
    transition: all .3s
}

.main .index-product .product-wrapper-title .show-more:hover {
    background-color: #ff5861;
    border-color: #ff5861;
    color: #fff
}

.main .index-product .product-wrapper .product-item {
    height: 36.25rem
}

.main .index-product .product-wrapper .product-item .item-content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 1.5rem;
    padding-top: 5.38rem;
    text-align: center;
    transition: all .3s
}

.main .index-product .product-wrapper .product-item .item-content .item-pic {
    margin-bottom: 3.13rem
}

.main .index-product .product-wrapper .product-item .item-content .item-name {
    font-size: 1.63rem;
    color: #333333;
    margin-bottom: .63rem;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-product .product-wrapper .product-item .item-content .item-sub-name {
    font-size: 1rem;
    color: #333333;
    --wght: 500;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-product .product-wrapper .product-item:hover .item-content {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1)
}

.main .index-image-text {
    padding: 12.5rem 0;
    background-color: #fff8f7
}

.main .index-image-text .image-text-content {
    margin-bottom: 9.38rem
}

.main .index-image-text .image-text-content .image-text-left .item-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1.25rem
}

.main .index-image-text .image-text-content .image-text-left .item-content img {
    transition: all .3s
}

.main .index-image-text .image-text-content .image-text-left .item-content img:hover {
    transform: scale(1.1)
}

.main .index-image-text .image-text-content .image-text-right {
    padding-left: 5.63rem
}

.main .index-image-text .image-text-content .image-text-right .item-content {
    padding-top: 6.56rem
}

.main .index-image-text .image-text-content .image-text-right .item-content .item-title {
    font-size: 2.38rem;
    color: #333333;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL);
    margin-bottom: 2.81rem
}

.main .index-image-text .image-text-content .image-text-right .item-content .item-dec {
    font-size: 1.13rem;
    color: #999999;
    --wght: 500;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL);
    line-height: 1.88rem
}

.main .index-image-text .image-text-content:nth-child(2n) {
    flex-direction: row-reverse
}

.main .index-image-text .image-text-content:nth-child(2n) .image-text-right {
    padding-right: 5.63rem;
    padding-left: 0
}

.main .index-mission {
    padding-top: 5.88rem;
    background-image: url(../image/index/bg3.jpg);
    background-size: cover;
    background-position: center
}

.main .index-mission .title {
    font-size: 2.75rem;
    color: #333333;
    --wght: 700;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-mission .title span {
    color: #ff5861
}

.main .index-mission .sub-title {
    color: #999999;
    font-size: 1.25rem;
    margin-top: .63rem;
    --wght: 500;
    --BEVL: 80;
    font-variation-settings: "wght"var(--wght), "BEVL"var(--BEVL)
}

.main .index-mission .round-pic-group {
    width: 100%;
    height: 64.44rem;
    overflow: hidden;
    position: relative
}

.main .index-mission .round-pic-group .round-item {
    position: absolute;
    transform: translate3d(0, 0, 0);
    transition: transform .15s ease-out
}

.main .index-mission .round-pic-group .round-item:nth-child(1) {
    width: 30rem;
    height: 30rem;
    top: 5.94rem;
    left: calc(100% - 123rem)
}

.main .index-mission .round-pic-group .round-item:nth-child(2) {
    width: 18.75rem;
    height: 18.75rem;
    top: 37.25rem;
    left: calc(100% - 95rem)
}

.main .index-mission .round-pic-group .round-item:nth-child(3) {
    width: 35.75rem;
    height: 35.75rem;
    top: 9.75rem;
    left: calc(100% - 65rem)
}

.main .index-mission .round-pic-group .round-item:nth-child(4) {
    width: 18.75rem;
    height: 18.75rem;
    top: 43.44rem;
    left: calc(100% - 24rem)
}

.main .index-mission .round-pic-group .round-item:nth-child(5) {
    width: 26.13rem;
    height: 26.13rem;
    top: 0;
    left: calc(100% - 20rem)
}
@media (max-width:1600px){
    .main .index-banner {
      
        height: 41.25rem;
     
    }
}
@media (max-width:1200px) {
    .main .index-banner {
        height: 34.25rem
    }
}

@media (max-width:992px) {
    .main .index-banner {
        height: 22.25rem;
        background-image: url(../image/index/banner-m.jpg)
    }

    .main .index-about .about-content .about-content-left .left-content .left-content-item .title-group {
        font-size: 1.75rem;
        margin-bottom: 2.13rem;
        margin-top: 3.31rem
    }

    .main .index-about .about-content .about-content-left .left-content .left-content-item .left-dec {
        margin-bottom: 2rem
    }

    .main .index-about .about-content .about-content-left .change-button {
        margin-bottom: 3.38rem
    }

    .main .index-about .about-content::after {
        content: "";
        display: none
    }

    .main .index-video {
        width: 100%;
        position: relative
    }

    .main .index-video .video-group {
        height: 15.25rem
    }

    .main .index-video .video-group .play-btn {
        width: 2.88rem;
        height: 2.88rem
    }

    .main .index-video .video-group video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1rem
    }

    .main .index-video .index-video-bg {
        height: 18.5rem
    }

    .main .index-video .index-video-bg .video-banner-title {
        font-size: 1.5rem;
        padding-top: 4.63rem
    }

    .main .index-video .index-video-bg-btm {
        height: 18.5rem
    }

    .main .index-icons {
        padding: 2rem 0
    }

    .main .index-icons .index-icons-title {
        margin-bottom: 4.38rem
    }

    .main .index-icons .index-icons-title .icons-title {
        font-size: 1.75rem;
        margin-bottom: .5rem
    }

    .main .index-icons .index-icons-title .icons-sub-title {
        font-size: .88rem
    }

    .main .index-icons .icon-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start
    }

    .main .index-icons .icon-wrapper .icon-item {
        width: 50%;
        height: 11.06rem;
        padding: .63rem
    }

    .main .index-product {
        padding-top: 1.5rem;
        padding-bottom: 0rem
    }

    .main .index-product .product-wrapper-title {
        margin-bottom: 2.63rem
    }

    .main .index-product .product-wrapper-title .title {
        font-size: 1.75rem;
        margin-bottom: .5rem
    }

    .main .index-product .product-wrapper-title .title span {
        color: #ff5861
    }

    .main .index-product .product-wrapper-title .sub-title {
        font-size: .88rem
    }

    .main .index-product .product-wrapper-title .show-more {
        width: 50%;
        height: 2.38rem;
        padding: 0 1.88rem;
        margin-top: 1.88rem
    }

    .main .index-product .product-wrapper-title .show-more:hover {
        background-color: #ff5861;
        border-color: #ff5861;
        color: #fff
    }

    .main .index-product .product-wrapper .product-item {
        height: 27.25rem;
        margin-bottom: 1.88rem
    }

    .main .index-product .product-wrapper .product-item .item-content {
        padding-top: .38rem
    }

    .main .index-image-text {
        padding: 1.5rem 0
    }

    .main .index-image-text .image-text-content {
        margin-bottom: 2.38rem
    }

    .main .index-image-text .image-text-content .image-text-right {
        padding-left: .63rem
    }

    .main .index-image-text .image-text-content .image-text-right .item-content .item-title {
        font-size: 1.38rem;
        margin-top: .8rem;
        margin-bottom: .81rem
    }

    .main .index-image-text .image-text-content .image-text-right .item-content .item-dec {
        font-size: 1rem;
        line-height: 1.6rem
    }

    .main .index-image-text .image-text-content:nth-child(2n) .image-text-right {
        padding-right: .63rem;
        padding-left: .63rem
    }

    .main .index-mission {
        padding-bottom: 5.88rem
    }

    .main .index-mission .title {
        font-size: 1.75rem
    }

    .main .index-mission .sub-title {
        font-size: 1rem
    }
}

@media (max-width:768px) {
    .main .index-banner {
        height: 20.25rem
    }

    .main .index-product {
        padding-top: 1.5rem;
        padding-bottom: 0rem
    }

    .main .index-product .product-wrapper-title {
        margin-bottom: 2.63rem
    }

    .main .index-product .product-wrapper-title .title {
        font-size: 1.75rem;
        margin-bottom: .5rem
    }

    .main .index-product .product-wrapper-title .title span {
        color: #ff5861
    }

    .main .index-product .product-wrapper-title .sub-title {
        font-size: .88rem
    }

    .main .index-product .product-wrapper-title .show-more {
        width: 10.5rem;
        height: 2.38rem;
        padding: 0 1.88rem;
        margin-top: 1.88rem
    }

    .main .index-product .product-wrapper-title .show-more:hover {
        background-color: #ff5861;
        border-color: #ff5861;
        color: #fff
    }

    .main .index-product .product-wrapper .product-item {
        height: 32.25rem;
        margin-bottom: 1.88rem
    }

    .main .index-product .product-wrapper .product-item .item-content {
        padding-top: .38rem
    }

    .main .index-image-text {
        padding: 1.5rem 0
    }

    .main .index-image-text .image-text-content {
        margin-bottom: 2.38rem
    }

    .main .index-image-text .image-text-content .image-text-right {
        padding-left: .63rem
    }

    .main .index-image-text .image-text-content .image-text-right .item-content {
        padding-top: .56rem
    }

    .main .index-image-text .image-text-content .image-text-right .item-content .item-title {
        font-size: 1.38rem;
        margin-top: .8rem;
        margin-bottom: .81rem
    }

    .main .index-image-text .image-text-content .image-text-right .item-content .item-dec {
        font-size: 1rem;
        line-height: 1.6rem
    }

    .main .index-image-text .image-text-content:nth-child(2n) .image-text-right {
        padding-right: .63rem;
        padding-left: .63rem
    }

    .main .index-icons .index-icons-title {
        margin-bottom: 4.38rem
    }

    .main .index-icons .index-icons-title .icons-title {
        font-size: 1.75rem;
        margin-bottom: .5rem
    }

    .main .index-icons .index-icons-title .icons-sub-title {
        font-size: .88rem
    }
}

@media (max-width:576px) {
    .main .index-banner {
        height: 12.25rem
    }

    .main .index-product .product-wrapper .product-item {
        height: 26.25rem;
        margin-bottom: 1.88rem
    }

    .main .index-icons .index-icons-title {
        margin-bottom: 4.38rem
    }

    .main .index-icons .index-icons-title .icons-title {
        font-size: 1.75rem;
        margin-bottom: .5rem
    }

    .main .index-icons .index-icons-title .icons-sub-title {
        font-size: .88rem
    }
}