/** {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}*/

.main img {
    width: 100%;
}

.main .fadeUpAn {
    opacity: 0;
}

.swiper-pagination-outer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.sec .content {
    top: 0;
    left: 0;
    width: 100%;
}

.sec .content .titleBox {
    left: 1.8rem;
    z-index: 2;
}

.sec .content .titleBox .titleicon {
    width: 3rem;
}

.sec .content .titleBox .title {
    width: 12.4rem;
    margin-top: 1.65rem;
    margin-left: 1.25rem;
}

.sec1 {
    padding: 12% 0 24%;
    background: #f1f1f1;
}

.sec1 .box-title {
    width: 32.8%;
}

.sec1 .level1 {
    top: 11.3%;
    left: 0%;
    width: 100%;
}

.sec1 .box-swiper {
    margin-top: -0.3%;
}

.sec1 .box-swiper .swiper1 {
    padding-bottom: 8.8%;
}

.sec1 .box-swiper .swiper-slide img {
    width: 36%;
}

.sec1 .swiper1 .swiper-pagination {
    bottom: 3%;
    z-index: 1;
}

.sec1 .swiper1 .swiper-pagination-bullet {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0 0.3rem;
    padding: 0.2rem;
    background: transparent;
    border: 0.01rem solid transparent;
    border-radius: 0;
    opacity: 1;
}

.sec1 .swiper1 .swiper-pagination-bullet-active {
    border: 0.01rem solid #848484;
}

.sec1 .swiper1 .swiper-pagination-bullet div {
    width: 1.3rem;
    height: 1.3rem;
}

.sec1 .swiper1 .swiper-pagination-bullet div.color1 {
    background: #fff;
}

.sec1 .swiper1 .swiper-pagination-bullet div.color2 {
    background: #631c2e;
}

.sec1 .btn-360 img, .sec1 .btn-180 {
    width: 11.334%;
    z-index: 1;
}

.sec1 .btn-360 img {
    right: 23.2%;
}

.sec1 .btn-180 {
    right: 8%;
}

.sec1 .box-tag {
    display: flex;
    justify-content: center;
    margin-top: 9.8%;
}

.sec1 .box-tag div {
    width: 15.4%;
    margin: 0 1%;
}

.sec1 .box-download {
    width: 83.6%;
    margin-top: 12.2%;
}

.sec3 {
    margin-top: -14%;
    z-index: 4;
}

.sec3 .titleicon {
    top: 5.5rem;
    left: 1.8rem;
    width: 3rem;
    z-index: 2;
}

.sec3 .title {
    top: 9.5rem;
    left: 3.25rem;
    width: 12.3rem;
    z-index: 2;
}

.sec3 .content {
    top: 0;
    left: 0;
    z-index: 2;
}

.sec3 .text1 {
    top: 16.2rem;
    left: 50%;
    margin-left: -41.8%;
    width: 83.6%;
}

.sec3 .text2 {
    top: 64%;
    left: 46.66667%;
    width: 46.53333%;
}

.sec3 .text3 {
    top: 65rem;
    left: 15rem;
    top: 74%;
    left: 50%;
    margin-left: -10.26667%;
    width: 20.53333%;
}

.sec3 .select {
    top: 84%;
    left: 50%;
    margin-left: -30%;
    width: 60%;
}

.sec5 {
    margin-top: -15%;
    z-index: 3;
}

.sec5 .titleicon {
    top: 5.5rem;
    left: 1.8rem;
    width: 3rem;
    z-index: 2;
}

.sec5 .title {
    top: 9.5rem;
    left: 3.25rem;
    width: 7.2rem;
    z-index: 2;
}

.sec5 .img1 {
    left: 15.5rem;
    width: 17.8rem;
    top: 55.4%;
    left: 40%;
    width: 47.33333%;
}

.sec5 .text1 {
    top: 73.2%;
    left: 14.26667%;
    width: 72.53333%;
}

.sec5-2 {
    margin-top: -15%;
    z-index: 2;
}

.sec5-2 .titleicon {
    top: 5.5rem;
    left: 1.8rem;
    width: 3rem;
    z-index: 2;
}

.sec5-2 .title {
    top: 9.5rem;
    left: 3.25rem;
    width: 17.9rem;
    z-index: 2;
}

.sec5-2 .img1 {
    top: 78.5%;
    left: 27.33333%;
    width: 52.26667%;
}

.sec5-2 .text1 {
    top: 63.3%;
    left: 7.73333%;
    width: 72.53333%;
}

.sec4 {
    margin-top: -15%;
    z-index: 1;
}

.sec4 .titleicon {
    top: 5.5rem;
    left: 1.8rem;
    width: 3rem;
    z-index: 2;
}

.sec4 .title {
    top: 9.5rem;
    left: 3.25rem;
    width: 15.5rem;
    z-index: 2;
}

.sec4 .swiper4 .section4_f_nfxc_an {
    top: 0;
    right: 0;
    width: 100%;
    transform: scale(1);
    transform-origin: 91.86747% 11.23596%;
}

.sec4 .swiper4 .section4_f_zy_an {
    top: 0;
    right: 0;
    width: 100%;
    transform: scale(1);
    transform-origin: 91.86747% 11.23596%;
}

.sec4 .swiper4 .section4_f_sx_an {
    top: 0;
    right: 0;
    width: 100%;
    transform: scale(1);
    transform-origin: 88.03301% 50.97087%;
}

.sec4 .swiper4 .section4_f_12_bg_an {
    top: 0;
    right: 0;
    width: 100%;
    transform-origin: 100% 5.79151%;
}

.sec4 .swiper4-pagination .swiper-pagination-bullet {
    margin: 0 1rem;
    background: #fff;
    opacity: 1;
}

.sec4 .swiper4-pagination .swiper-pagination-bullet-active {
    background: #523e34;
}

.sec4 .swiper4_container .swiper4_info {
    top: 4rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 82.66667%;
}

.sec4 .swiper4_container .prev {
    top: 35%;
    left: 1rem;
    transform: translate(0, -50%);
    width: 1rem;
}

.sec4 .swiper4_container .next {
    top: 35%;
    right: 1rem;
    transform: translate(0, -50%);
    width: 1rem;
}

.sec6 {
    margin-top: -15%;
    padding-top: 11.5rem;
    padding-bottom: 16.5rem;
    z-index: 0;
}

.sec6 .bg {
    top: 0;
    width: 100%;
    z-index: -1;
}

.sec6 .titleicon {
    top: 5.5rem;
    left: 1.8rem;
    width: 3rem;
    z-index: 2;
}

.sec6 .swiper6 {
    width: 93.73333%;
    margin: 0 auto;
}

.sec6 .swiper6-pagination {
    margin-top: 4rem;
}

.sec6 .swiper6-pagination .swiper-pagination-bullet {
    margin: 0 1rem;
    background: #c8c8c8;
    opacity: 1;
}

.sec6 .swiper6-pagination .swiper-pagination-bullet-active {
    background: #4b372d;
}

.sectj {
    margin-top: 0;
}

.sectj .content .titleBox {
    left: 0;
    margin-left: 1.8rem;
}

.sectj .content .titleBox .title {
    width: 7.45rem;
}

.sectj .box-swiper {
    margin-top: 4rem;
}

.sectj .box-swiper .swiper-pagination {
    bottom: 0;
}

.sectj .box-swiper .swiper-pagination-bullet {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0 1rem;
    background: #d9d9d9;
    opacity: 1;
}

.sectj .box-swiper .swiper-pagination-bullet-active {
    background: #565656;
}

.sectj .box-swiper .prod-info {
    padding: 6% 0 30%;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.sectj .box-swiper .btn-checkprod {
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.3rem;
    margin-top: 9%;
    padding: 2.4% 16.4%;
    background: #000;
    display: inline-block;
}

.mo .modal-180 .content {
    padding: 20% 10% 0;
}

.box-preview {
    width: 32%;
}

@keyframes section4_2_qfw_an {
    0% {
        transform: scale(0.3);
    }
    70% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
    }
}

@keyframes section4_2_zy_bg_an {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(90deg);
    }
}

@keyframes section4_2_sx_bg_an {
    from {
        transform: rotateX(0);
    }
    to {
        transform: rotateX(90deg);
    }
}

@keyframes section4_2_12_bg_an {
    0% {
        transform: scale(0.5);
    }
    70% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}