@media screen and (max-width: 960px) {

    :root,
    body {
        --ratio-size: 100vw / 1920;
        --header-height: 84px;
        --main-title-size: 28px;
        --sub-title-size: 22px;
        --main-text-size: 18px;
        --main-color: #DA2027;
        --type-area: 8%;
        font-size: calc(var(--ratio-size) * 16);
    }

    .common-serial {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        font-size: 14px;
    }

    .common-icon {
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }

    .common-part-text {
        width: 100%;
    }

    .first-screen .main-content {
        width: 100%;
    }

    .first-screen .video-bg video {
        display: none;
    }

    .first-screen .video-bg img {
        display: block;
    }

    .first-screen .main-content .play-btn {
        position: absolute;
        top: calc(50% - var(--header-height) / 2 + 100vw / 16 * 9 / 2);
        right: 10px;
        transform: translateY(calc(-100% - 10px));
        width: 70px;
        margin-top: 0;
    }

    .first-screen .main-content .text p:nth-child(odd) span::after,
    .first-screen .main-content .text p:nth-child(even) span::after {
        bottom: 5px;
        width: 100%;
        height: 6px;
    }

    .first-screen .learn-more .bottom .gray {
        width: 150px;
        height: 50px;
    }

    .first-screen .learn-more .bottom p {
        font-size: 14px;
    }

    .first-screen .learn-more .bottom .icon {
        width: 30px;
    }

    .first-screen .learn-more .top .pdf-pic {
        bottom: -30%;
        width: 90px;
    }

    .first-screen .learn-more .top .title img {
        width: 100px;
    }

    .first-screen .learn-more .top .title {
        margin-left: 130px;
        font-size: 20px;
    }

    .first-part .product-pic-content {
        margin-top: 20px;
    }

    .first-part .product-pic-content .product-pic {
        width: 60%;
    }

    .first-part .product-main {
        flex-direction: column;
        padding-bottom: 20px;
    }

    .first-part .product-main .common-serial {
        order: 1;
        top: auto;
        margin-top: 30px;
    }

    .first-part .common-part-text {
        order: 2;
        margin-top: 30px;
    }

    .common-part-text .title {
        margin-top: 20px;
        text-align: center;
    }

    .common-part-text .text {
        text-align: center;
    }

    .first-part .product-main .right {
        order: 3;
        width: 100%;
        margin-top: 30px;
    }

    .second-part {
        height: auto;
        padding-bottom: 150px;
    }

    .second-part .bg img {
        height: 100%;
        object-fit: cover;
    }

    .second-part .product-main {
        flex-direction: column;
    }

    .second-part .product-main .common-serial {
        order: 1;
        margin-top: 80px;
    }

    .second-part .common-part-text {
        order: 2;
        margin-top: 30px;
    }

    .second-part .product-main .right {
        order: 3;
        width: 100%;
        margin-top: 30px;
    }

    .third-part {
        margin-top: -90px;
    }

    .third-part .product-main {
        flex-direction: column;
    }

    .third-part .product-main .common-serial {
        order: 1;
        margin-top: 40px;
    }

    .third-part .common-part-text {
        order: 2;
        margin-top: 30px;
    }

    .third-part .product-main .right {
        order: 3;
        width: 100%;
    }

    .fourth-part {
        padding-top: 30px;
    }

    .fourth-part .bg img:nth-child(1) {
        height: 850px;
    }

    .fourth-part .common-title {
        text-align: center;
    }

    .fourth-part .experience .top {
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
    }

    .fourth-part .experience .right {
        width: 100%;
        margin-top: 50px;
    }

    .fourth-part .experience .top .common-icon {
        margin: 0;
    }

    .fourth-part .experience .data-list {
        flex-direction: column;
        gap: 0;
        margin-top: 30px;
    }

    .fourth-part .experience .left {
        gap: 10px;
    }

    .fourth-part .experience .left .item .num {
        font-size: 28px;
    }

    .fourth-part .experience .left .item .icon {
        max-width: 30px;
        max-height: 30px;
    }

    .fourth-part .experience .left .item.full .icon {
        max-width: 80px;
        max-height: 50px;
    }

    .fourth-part .experience .right {
        margin-top: 150px;
    }

    .fourth-part .experience .right .television {
        width: 50%;
        transform: translate(-50%, -90%);
    }

    .fourth-part .experience .right .television .play-btn {
        width: 50px;
    }

    .fourth-part .experience .right .description-list {
        margin-top: 25px;
    }

    .fourth-part .experience .right .description-item {
        padding: 10px 0;
    }

    .fourth-part .experience .right .description-item .text {
        font-size: 14px;
    }

    .fourth-part .experience .right .description-item img {
        max-width: 30px;
    }

    .fourth-part .experience .right .description-item .b-text {
        font-size: 18px;
    }

    .deduce {
        margin-top: 40px;
    }

    .deduce .common-icon {
        margin: 0;
    }

    .sixth-part {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .sixth-part .bg {
        height: 100%;
        background-color: #F1F2F4;
    }

    .sixth-part .design-list {
        flex-direction: column;
        gap: 30px;
        margin-top: 30px;
    }

    .sixth-part .design-item {
        width: 100%;
    }

    .sixth-part .design-item .name {
        margin-top: 10px;
        font-size: 18px;
    }

    .sixth-part .design-item .pic {
        margin-top: 20px;
    }

    .seventh-part {
        flex-direction: column;
    }

    .seventh-part .bg {
        height: 100%;
    }

    .seventh-part .bg img {
        height: 100%;
        object-fit: cover;
    }

    .seventh-part .common-title {
        text-align: center;
    }

    .seventh-part .text-content {
        margin-top: 30px;
    }

    .seventh-part .text-content .name {
        font-size: 20px;
    }

    .lineup-part .lineup-list {
        flex-direction: column;
        gap: 20px;
        margin-top: 100px;
    }

    .lineup-part .lineup-item {
        width: 100%;
    }

    .lineup-part .lineup-item .type {
        font-size: 14px;
    }

    .lineup-part .lineup-item .type-list {
        margin-top: 20px;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide {
        opacity: .5;
        transition: opacity .5s;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide.swiper-slide-active {
        opacity: 1;
    }

    .lineup-part .lineup-item:nth-child(1) .product-swiper .swiper-slide:nth-child(1) {
        margin-right: 0;
    }

    .lineup-part .lineup-item:nth-child(2) .product-swiper .swiper-slide:nth-child(1) {
        margin-left: 0;
        margin-right: 0;
    }

    .lineup-part .lineup-item:nth-child(2) .product-swiper .swiper-slide:nth-child(2) {
        margin-right: 0;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide .pic {
        width: 100%;
        height: 200px;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide .pic img {
        max-width: 100%;
        max-height: 100%;
    }

    .lineup-part .lineup-item:nth-child(1) .product-swiper .swiper-slide:nth-child(1) .pic,
    .lineup-part .lineup-item:nth-child(1) .product-swiper .swiper-slide:nth-child(2) .pic,
    .lineup-part .lineup-item:nth-child(2) .product-swiper .swiper-slide:nth-child(1) .pic,
    .lineup-part .lineup-item:nth-child(2) .product-swiper .swiper-slide:nth-child(2) .pic,
    .lineup-part .lineup-item:nth-child(2) .product-swiper .swiper-slide:nth-child(3) .pic {
        width: 100%;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide .text {
        margin-top: 15px;
        font-size: 18px;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide .new {
        font-size: 18px;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide ul a {
        font-size: 16px;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide ul .icon {
        width: auto;
        height: 100%;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide ul .icon img {
        width: auto;
        height: 100%;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide .new {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    .lineup-part .lineup-item .product-swiper .swiper-slide .text span {
        font-size: 16px;
    }

    .lineup-part .lineup-item .name {
        font-size: 22px;
    }

    .bottom-learn-more .bottom {
        align-items: stretch;
        padding-right: 0;
    }

    .bottom-learn-more .bottom .gray {
        width: 40%;
        height: auto;
    }

    .bottom-learn-more .bottom .title {
        padding: 10px 0;
        font-size: 18px;
    }

    .bottom-learn-more .bottom .learn-more {
        font-size: 14px;
    }

    .bottom-learn-more .bottom .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        margin-left: 30px;
    }

    .bottom-learn-more .bottom .title img {
        width: 100px;
    }

    .bottom-learn-more .top .pdf-pic {
        bottom: 0;
        left: 5%;
        width: 25%;
        transform: translateY(50%);
    }

    .form-part {
        padding: 30px 0;
    }

    .form-part .checkbox-item .checkbox-list {
        margin-top: 15px;
    }

    .form-part .checkbox-item:not(:last-child) {
        margin-bottom: 25px;
    }

    .form-part .input-content .input-wrap {
        width: 100%;
    }

    .form-part .agreement label {
        flex: 1;
    }

    .seventh-part .right {
        width: 100%;
        margin-left: 0;
        margin-top: 30px;
    }

    .pc-show-area {
        display: none !important;
    }

    .mobile-show-pic {
        display: block;
    }

    .second-part .bg svg {
        display: none;
    }

    .third-part .bg svg {
        display: none;
    }

    .form-part .checkbox-item .checkbox-list .checkbox {
        min-width: 140px;
    }

    .form-part .checkbox-item:nth-child(3) .checkbox-list .checkbox {
        min-width: 70px;
    }

    .bottom-learn-more a:hover .top .pdf-pic {
        animation: none;
    }

    .yisiCon,
    .siteCon {
        height: 60vh;
    }

    .queding {
        width: auto;
        padding: 5px 25px;
        font-size: 18px;
        border-radius: 100000px;
    }
}