@charset "utf-8";
/* CSS Document */
#banner{display: none}
#main{ width: 100%; height: auto; float: left;}

.boxarow{  width: 100%;height: auto;float: left;position: relative;overflow: hidden}
.boxarow img:nth-of-type(2){position: absolute;left: -66px;
    top:0;height: 66px;   }
.boxarow img:nth-of-type(1){
    position: relative;

}


.boxarowleft{  width: 100%;height: auto;float: left;position: relative;overflow: hidden}
.boxarowleft img:nth-of-type(2){position: absolute;left: 67px;
    top:0;height: 66px;   }
.boxarowleft img:nth-of-type(1){
    position: relative;

}



.boxarowtop{width: 100%;height: auto;float: left;position: relative;overflow: hidden}

.boxarowtop .box:nth-of-type(2){opacity: 0 }
.boxarowtop img:nth-of-type(1){

    position: relative;

}

.boxarowbottom{width: 100%;height: auto;float: left;position: relative;overflow: hidden}


.boxarowbottom .box:nth-of-type(1){opacity: 0; position: relative;
    top: 18px;}
.boxarowbottom .box:nth-of-type(2){

    position: relative;

}


#swiperbuttonprev .boxarowtop .box:nth-of-type(2) {
    position: relative;
    top: -18px;
}

@keyframes mainN2TspanArrow {
    0% {

        transform: translateZ(0)
    }

    100%{
        transform: translateY(-40px)
    }
}

@keyframes mainN2TspanArrow1 {
    0% {
        transform: translateZ(0);

    }
    100%{


        transform: translateY(-20px);
        opacity: 1;

    }
}


@keyframes mainN2BspanArrow {
    0% {

        transform: translateZ(0)
    }

    100%{
        transform: translateY(40px)
    }
}

@keyframes mainN2BspanArrow1 {
    0% {
        transform: translateZ(0);

    }
    100%{


        transform: translateY(20px);
        opacity: 1;

    }
}

@keyframes mainN2MMLArrow {
    0% {
        left: 67px;
    }

    100%{
        left: 0;
    }
}

@keyframes mainN2MMLmoveArrow1 {
    0% {
        left: 0;
    }
    100%{
        left: -67px;
    }
}


@keyframes rightmoveArrow {
    0% {
        left: -66px;
    }

    100%{
        left: 0;
    }
}

@keyframes rightmoveArrow1 {
    0% {
        left: 0;
    }
    100%{
        left: 66px;
    }
}
.mainN5MMRbuttom .boxarow img:nth-of-type(2){left: -50px;}

.mainN5MMRbuttom:not(.cur):hover .boxarow img:nth-of-type(2){
    animation: rightmoveArrow .5s ease forwards
}

.mainN5MMRbuttom:not(.cur):hover .boxarow img:nth-of-type(1){
    animation: rightmoveArrow1 .5s ease forwards
}


.mainN5MMLbuttom .boxarowleft img:nth-of-type(2){left: 50px;}


.mainN5MMLbuttom:not(.cur):hover .boxarowleft img:nth-of-type(2){
    animation: mainN2MMLArrow .5s ease forwards
}

.mainN5MMLbuttom:not(.cur):hover .boxarowleft img:nth-of-type(1){
    animation: mainN2MMLmoveArrow1 .5s ease forwards
}


#mainN4Mswiperbuttonnext:hover .boxarow img:nth-of-type(2){
    animation: rightmoveArrow .5s ease forwards
}

#mainN4Mswiperbuttonnext:hover .boxarow img:nth-of-type(1){
    animation: rightmoveArrow1 .5s ease forwards
}



.mainN4Mswiperbuttonprev:hover .boxarowleft img:nth-of-type(2){
    animation: mainN2MMLArrow .5s ease forwards
}

.mainN4Mswiperbuttonprev:hover .boxarowleft img:nth-of-type(1){
    animation: mainN2MMLmoveArrow1 .5s ease forwards
}



#swiperbuttonnext:hover .boxarowbottom .box:nth-of-type(1) {
    animation: mainN2BspanArrow1 .5s ease forwards
}
#swiperbuttonnext:hover .boxarowbottom .box:nth-of-type(2) {
    animation: mainN2BspanArrow .5s ease forwards
}


#swiperbuttonprev:hover .boxarowtop .box:nth-of-type(1) {
    animation: mainN2TspanArrow .5s ease forwards
}
#swiperbuttonprev:hover .boxarowtop .box:nth-of-type(2) {
    animation: mainN2TspanArrow1 .5s ease forwards
}


#mainN1{width: 100%; height: auto; float: left;margin-top: 60px;margin-bottom: 84px;}
#mainN1 .appIn{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: flex-start}
#mainN1 .mainN1L{width:200px; height:580px; float: left;  position: relative;text-align: center}

#mainN1 .mainN1L .swiper-container{width: 100%;height: 100%;padding: 50px 10px 0 10px;}

#mainN1 .mainN1L .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    border: 1px solid #fff;
    border-bottom: none;


}

#mainN1 .mainN1L .swiper-slide.cur{
    height: auto !important;

}


/*#mainN1 .mainN1L .swiper-slide .box{background: #eee}*/

#mainN1 .mainN1L .swiper-slide img {

    width: 100%;
    height:100%;
    object-fit: contain;
    /*mix-blend-mode: multiply;*/
}



#mainN1 .mainN1L .swiper-slide .box:hover   {
    transition: all 0.5s;
    transform: scale(1.2);
    transform-origin:center center;
    position: relative;z-index: 99999999999

}

#mainN1 .mainN1L  .mainN1LM{width: 100%;height: 500px;float: left;}

#mainN1 .mainN1M{width:auto;height: auto;float: left;flex: 1;padding-bottom: 60px;}



#mainN1 .mainN1M img{width: 100%;height: auto}
#mainN1 .mainN1B{width: auto;height: auto;float: left;flex: 1;    margin-left: 10px;  }
#mainN1 .mainN1BT{width: 100%;height: auto;float: left;font-size: 50px;margin:0 0 15px 23px;font-family: BarlowSemiBold}
#mainN1 .mainN1BT b{font-weight: normal}
#mainN1 .mainN1BM{width: 100%;height: auto;float: left}
#mainN1 .mainN1BMT{width: 100%;height: auto;float: left;margin:0 0 40px 20px;}
#mainN1 .mainN1BMT p{font-size: 17px;margin-bottom: 7px;}
#mainN1 .mainN1BMT span{width: 34px;height: 34px;display: inline-block;border-radius: 50%;margin-right: 10px;cursor: pointer}
#mainN1 .mainN1BMT span:last-child{margin-right: 0}
#mainN1 .mainN1BMM{width: 100%;height: auto;float: left;margin: 0 0 50px 20px}
#mainN1 .mainN1BMM span{border: 1px solid #000;font-size: 18px;padding: 5px;display: inline-block;margin-right: 15px;cursor: pointer;font-family: 'BarlowRegular';}
#mainN1 .mainN1BMM span.cur{background: #000;color: #fff}
#mainN1 .mainN1BMM span:last-child{margin-right: 0}
#mainN1 .mainN1BMB{width: 100%;height: auto;float: left;margin-bottom: 24px;}
#mainN1 .mainN1BMB ul{ width: auto;height: auto;float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-content: flex-start;flex-wrap: wrap}
#mainN1 .mainN1BMB ul li{width: 33.33333%;height: auto;float: left;text-align: center;margin-bottom: 20px;}
#mainN1 .mainN1BMB ul li img{width: 57px;height: 57px;}
#mainN1 .mainN1BMB ul li i{font-size: 18px;margin-top: 10px;display: block;font-family: MyriadProRegular}

#mainN1 .mainN1BB{width: 100%;height: auto;float: left}
#mainN1 .mainN1BB .mainN1BBT{width: 100%;height: auto;float: left;font-family: MyriadProRegular;}
#mainN1 .mainN1BB .mainN1BBT ul{width: 100%;height: auto;float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center;}
#mainN1 .mainN1BB .mainN1BBT ul li{cursor:pointer;width: auto;height: auto;float: left;font-size: 18px;text-align: center;border-bottom: 1px solid #000;padding:5px 15px;}
@media screen and (max-width: 1300px) {
    /* 在这里写入当屏幕宽度小于或等于1920像素时需要应用的CSS样式 */
    #mainN1 .mainN1BB .mainN1BBT ul li{font-size: 16px;}
}
@media screen and (max-width: 1200px) {
    /* 在这里写入当屏幕宽度小于或等于1920像素时需要应用的CSS样式 */
    #mainN1 .mainN1BB .mainN1BBT ul li{font-size: 14px;}
}
@media screen and (max-width: 1100px) {
    /* 在这里写入当屏幕宽度小于或等于1920像素时需要应用的CSS样式 */
    #mainN1 .mainN1BB .mainN1BBT ul li{font-size: 12px;padding: 0.5rem;}




}
#mainN1 .mainN1BB .mainN1BBT ul li.cur{border-right: 1px solid #000;border-left: 1px solid #000;border-top: 1px solid #000;border-bottom: none }
#mainN1 .mainN1BBM{margin-top: 10px;font-family: MyriadProRegular;width: 100%;height: auto;float: left;line-height: 30px;font-size: 18px;margin-bottom: 60px;}
#mainN1 .mainN1BBB{font-family: MyriadProRegular;width: 80%;height: auto;float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: flex-start;flex-wrap: wrap}
#mainN1 .mainN1BBBL{width:100%;height: auto;float: left;padding: 0 0 10px 0;font-size: 18px;border-bottom: 1px solid #000;cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* Standard */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center }
#mainN1 .mainN1BBBL span{flex: 1}
#mainN1 .mainN1BBBL i{width: 2.5rem;height: 2.5rem;display: inline-block}
#mainN1 .mainN1BBBL i img{width: 100%;height: 100%;}

#mainN1 .mainN1BBBR{width:100%;height: auto;float: left;display: none}
#mainN1 .mainN1BBBRbox{width:100%;height: auto;float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: flex-start;flex-wrap: wrap;flex: 1;    margin-top: 19px;}
#mainN1 .mainN1BBBR a{width:100%;display: block;padding:0 0 5px 0;margin-bottom: 19px;font-size: 18px;border-bottom: 1px solid #000;position: relative;cursor: pointer}
#mainN1 .mainN1BBBR a:before{content: '';background: url("../images/domde.png") no-repeat center center;background-size: 100%;width: 25px;height: 25px;text-align: right;display: inline-block;    position: absolute;
    right: 0;
    top: calc(50% - 10px);;
    transform: translateY(-50%);}
#mainN1 .mainN1BBBR a:last-child{margin-right: 0;margin-bottom: 0 }
#mainN1 .mainN1BBBR a.cur{pointer-events:none;}

#mainN1 .mainN1BBBR a:hover:before{content: '';background: url("../images/domdecur.png") no-repeat center center;background-size: 100%;width: 25px;height: 25px;text-align: right;display: inline-block;    position: absolute;
    right: 0;
    top: calc(50% - 10px);;
    transform: translateY(-50%);}


@media screen and (min-width: 1920px) {
    /* 在这里写入当屏幕宽度小于或等于1920像素时需要应用的CSS样式 */
    #mainN1 .mainN1BB .mainN1BBT{width: 80%;height: auto;float: left}
}




#swiperbuttonprev{
    width: 100%;
    height: auto;
    float: left;

    opacity: 1;
    cursor: pointer;
  }

#swiperbuttonnext img{width: 40px;height: auto}

#swiperbuttonnext{
    width: 100%;
    height:auto;
    float: left;
    opacity: 1;
    cursor: pointer;
   }

#swiperbuttonprev img{width: 40px;height: auto}


/*---------------*/

#mainN4Mswiperbuttonprev{
    width:auto;
    height: auto;
    float: left;
    position: absolute;
   left: 100px;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);}

#mainN4Mswiperbuttonprev img{width: auto;height: 100%;cursor: pointer}

#mainN4Mswiperbuttonnext{
    width: auto;
    height: auto;
    float: left;
    position: absolute;
    right: 100px;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);}

#mainN4Mswiperbuttonnext img{width: auto;height: 100%;cursor: pointer}


#mainN2{width: 100%;height: auto;float: left;position: relative}
#mainN2 .box{background: #000}
/*#mainN2 video{width: 100%;height: 770px;  object-fit: contain;}*/
/*#mainN2 .plyr{display: none}*/
#mainN2 img{width: 100%}
#mainN2 .bf{width: 64px;height: 64px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor:pointer;z-index: 999 }
#mainN2 .prism-player .prism-big-play-btn{background: url(../images/bf.jpg) no-repeat;background-size: 100%;    position: absolute;
    left:50% !important;
    top: 50%;
    bottom: auto !important;
    display: block;
    transform: translate(-50%, -50%);}

#mainN3{width: 100%; height: auto; float: left;margin-bottom: 90px}
#mainN3 ul{width: 100%; height: auto; float: left;}
#mainN3 ul li{width: 100%; height: auto; float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: inherit}
#mainN3 ul li.cur{height: 600px;}
#mainN3 ul li .liL{width: 50%; height: auto; float: left;}


#mainN3 ul li .liL img{width: 100%;height: auto}
#mainN3 ul li .liR{width: 50%; height: auto; float: left;background: #fff;position: relative;font-size: 18px;}

#mainN3 ul li .liRIn{width: 80%;height: auto;float: left;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding:0 100px;font-family: BarlowSemiBold}
#mainN3 ul li .liRIn h3{font-size: 50px;margin-bottom: 15px;font-weight: normal;font-family: BarlowSemiBold}
#mainN3 ul li .liRIn p{line-height: 25px;font-family: BarlowRegular}
#mainN3 ul li:nth-of-type(even){flex-direction: row-reverse}


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

    #mainN1 .mainN1BBBR a:before{top: auto}

    #mainN3{margin-bottom: 0}
    #mainN3 ul li{flex-wrap: wrap;margin-bottom: 3rem}
    #mainN3 ul li .liRIn{  padding: 0;  top: 0;  left: 50%;  transform: translateX(-50%);  width: 80%;  margin-bottom: 2rem;position: relative}

    #mainN3 ul li .liL{width: 100%;margin-bottom: 0}

    #mainN3 ul li .liRIn h3{font-size: 2rem;margin-bottom: 0}
    #mainN3 ul li .liRIn p{line-height: 1.3rem;font-size: 1rem}
    #mainN3 ul li .liR{width: 100%;text-align: center}



    #mainN3 ul li{

        flex-direction: column-reverse !important;

    }

    #mainN3 ul li:nth-of-type(even){margin-bottom: 0}

}


#mainN4{width: 100%;height: auto;float: left;margin-bottom: 98px;}
#mainN4 .mainN4T{width: 100%;height: auto;float: left;text-align: center;margin-bottom: 50px;}
#mainN4 .mainN4T h3{font-size: 50px;font-family: BarlowSemiBold;font-weight: normal}
#mainN4 .mainN4T p{font-size: 18px;font-family: BarlowRegular}
#mainN4 .mainN4M{width: 100%;height: auto;float: left;position: relative}


#mainN4 .mainN4M .swiper-container {
    width: 100%;
    height: 100%;
    overflow: inherit;
}
#mainN4 .mainN4M .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: red;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    height: 600px;
    transform: scale(0.8);
    position: relative;
}

#mainN4 .mainN4M .swiper-slide:before{content:'' ;width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(255,255,255,0.7)}


#mainN4 .mainN4M .swiper-slide-active,.swiper-slide-duplicate-active{
    transform: scale(1);
    z-index: 999;
}
#mainN4 .mainN4M .swiper-slide img{width: 100%;height: 100%;object-fit: cover}


#mainN4 .mainN4M .swiper-pagination{bottom: -50px;    display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center;justify-content: center}

#mainN4 .mainN4M .swiper-pagination-bullet{width: 16px;height: 16px;background: #000;opacity: 1}
#mainN4 .mainN4M .swiper-pagination-bullet-active{width: 26px;height: 26px;background: #000}
#mainN4 .mainN4M .swiper-slide-active:before{display: none}

#mainN4 .mainN4M .swiper-button-next, .swiper-button-prev{color: #000}
#mainN4 .mainN4M .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 30px;}
#mainN4 .mainN4M .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 30px;}

.wapmainN4M{display: none}
@media screen and (max-width: 768px) {

    #mainN4{margin: 0 1.5rem;width: calc(100% - 3rem)}
    #mainN4 .mainN4T{margin: 3rem 0 2rem 0}
    #mainN4 .mainN4T h3{font-size: 2rem}
    #mainN4 .mainN4T p{font-size: 1rem;line-height: 1.3rem}
    #mainN4 .mainN4M{display: none}
.wapmainN4M{width: 100%;height: auto;float: left;display: block;position: relative}



    .wapmainN4M .swiper-pagination{bottom:-28px !important;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  align-items: center;  justify-content: center;}

    .wapmainN4M .swiper-pagination-bullet{width: 0.5rem;height: 0.5rem;background: #000;opacity: 1 !important}
    .wapmainN4M .swiper-pagination-bullet-active{width: 1rem;height: 1rem;background: #000;opacity: 1 !important}

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



}



#mainN5{width: 100%;height: auto;float: left;margin-bottom: 98px;opacity: 0;transition: all .5s;}
#mainN5.cur{opacity: 1}
#mainN5 .mainN5T{width: 100%;height: auto;float: left;font-size: 50px;text-align: center;font-family: BarlowSemiBold;margin-bottom: 100px;}
#mainN5 .mainN5M{width: 100%;height: auto;float: left;}
#mainN5 .mainN5M .appIn{position: relative;width: 1193px;}
#mainN5 .mainN5M .swiper-container {
    width: 100%;
    height: 100%;
}

#mainN5 .mainN5M .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#mainN5 .mainN5M  .swiper-pagination{display: none}


#mainN5 .mainN5M .swiper-slide .info{width: 100%;height: auto;float: left}

#mainN5 .mainN5M .swiper-slide .info img{width: 100%;}
#mainN5 .mainN5M .swiper-slide .colorlist{justify-content: center;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center;flex-wrap:wrap;width: 100%;height: auto;float: left;margin-bottom: 15px;position: relative;
    z-index: 11111;margin-top: 20px;}
#mainN5 .mainN5M .swiper-slide .colorlist .infobox{    width: auto;
    height: auto;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;}

#mainN5 .mainN5M .swiper-slide .colorlist span{cursor:pointer;width: 24px;height: 24px;display: inline-block;border-radius: 50%;margin-right: 10px;}
#mainN5 .mainN5M .swiper-slide .colorlist span:last-child{margin-right: 0}
#mainN5 .mainN5M .swiper-slide .colorlist span.cur{border: 1px solid #000}


#mainN5 .mainN5M .swiper-slide .title{width: 100%;height: auto;float: left;font-size: 16px;margin-bottom: 9px;font-family: BarlowSemiBold}
#mainN5 .mainN5M .swiper-slide .title b{font-weight: normal}
#mainN5 .mainN5M .swiper-slide .body{width: 100%;height: auto;float: left;font-size: 11px;line-height: 17px;font-family: MyriadProRegular}
#mainN5 .mainN5M .swiper-button-next, .swiper-button-prev{color: #999}
#mainN5 .mainN5M  .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 0;    pointer-events: auto;}
#mainN5 .mainN5M  .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 0;    pointer-events: auto;}

#mainN5 .mainN5M .swiper-slide .info img.cur{transition:all .5s;opacity: 1 !important}
#mainN5 .mainN5M .mainN5MMLbuttom{width: 50px;height: 50px;position: absolute;top: 50%;left: -98px;z-index: 999;    transform: translateY(-50%);cursor: pointer}
#mainN5 .mainN5M .mainN5MMLbuttom img{width: 100%;height: auto;}
#mainN5 .mainN5M .mainN5MMLbuttom.cur img{opacity: 0.5}
#mainN5 .mainN5M .mainN5MMRbuttom{width: 50px;height: 50px;position: absolute;top: 50%;right: -98px;z-index: 999;    transform: translateY(-50%);cursor: pointer}
#mainN5 .mainN5M .mainN5MMRbuttom img{width: 100%;height: auto;}
#mainN5 .mainN5M .mainN5MMRbuttom.cur img{opacity: 0.5}

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

    #mainN5{display: none}

}






.swiper-button-next, .swiper-button-prev{width: auto}
.wapmainN1L{display: none}
@media screen and (max-width: 768px) {
    /* styles to be applied when screen width is between 768px and 1024px */
.mainN1L{display: none}
    #mainN1 .mainN1M{display: none}
    .wapmainN1L{width: 100%;height: auto;float: left;display: block}
    #mainN1 .appIn{flex-wrap: wrap}
    #mainN1 .mainN1B{width: 100%;margin: 4rem 0 0 0}
    #mainN1 .mainN1BMT p{font-size: 1rem;}
    #mainN1 .mainN1BMM{margin: 0 0 4rem 0}
    #mainN1 .mainN1BMM i{font-size: 1rem !important}
    #mainN1 .mainN1BMM span{padding: 0.2rem 0.4rem;font-size: 1rem}
    .wapmainN1L .swiper {
        width: 100%;
        height: 100%;
        overflow: inherit;
    }

    .wapmainN1L .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wapmainN1L .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wapmainN1L .swiper-pagination{bottom:-31px !important;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  align-items: center;  justify-content: center;}

    .wapmainN1L .swiper-pagination-bullet{width: 0.5rem;height: 0.5rem;background: #000;opacity: 1 !important}
    .wapmainN1L .swiper-pagination-bullet-active{width: 1rem;height: 1rem;background: #000;opacity: 1 !important}
    #mainN1{margin-bottom: 4rem}
    #mainN1 .mainN1BT{margin: 0 0 1rem 0;font-size: 4rem}
    #mainN1 .mainN1BMT{margin: 0 0 4rem 0}
    #mainN1 .mainN1BMT span{width:2.3rem;height: 2.3rem;}
    #mainN1 .mainN1BBM{margin-bottom: 2rem;font-size: 1.2rem;line-height: 2rem}
    #mainN1 .mainN1BMB{width: 90%}

    #mainN1 .mainN1BMB ul li img{width: 3.5rem;height: 3.5rem}
    #mainN1 .mainN1BMB ul li i{font-size: 1.2rem;margin-top: 0.5rem}
    #mainN1 .mainN1BMB ul li{margin-bottom: 1.5rem}
    #mainN1 .mainN1BBB{align-items: center;width: 100%}
    #mainN1 .mainN1BBBL{font-size: 1rem;}


    #mainN1 .mainN1BBBRbox{margin-top: 1.3rem}
    #mainN1 .mainN1BBBR a{font-size: 1rem;padding: 0.2rem 0.4rem;margin-bottom: 1rem}
    #footer{margin-top: 5rem;  border-top: 1px solid #c1c1c1;  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* styles to be applied when screen width is between 768px and 1024px */
    .mainN1L{display: none}
    #mainN1 .mainN1M{display: none}
    .wapmainN1L{width: 100%;height: auto;float: left;display: block}
    #mainN1 .appIn{flex-wrap: wrap}
    #mainN1 .mainN1B{width: 100%;margin: 4rem 0 0 0}


    .wapmainN1L .swiper {
        width: 100%;
        height: 100%;
        overflow: inherit;
    }

    .wapmainN1L .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wapmainN1L .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wapmainN1L .swiper-pagination{bottom:-31px !important;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  align-items: center;  justify-content: center;}

    .wapmainN1L .swiper-pagination-bullet{width: 0.5rem;height: 0.5rem;background: #000;opacity: 1 !important}
    .wapmainN1L .swiper-pagination-bullet-active{width: 1rem;height: 1rem;background: #000;opacity: 1 !important}

    #mainN1 .mainN1BT{margin: 0;font-size: 4.5rem}
    #mainN1 .mainN1BMT{margin: 0 0 4rem 0}
    #mainN1 .mainN1BMT span{width: 30px;height: 30px;}

    #mainN1 .mainN1BBM{margin-bottom: 0}


}

@media screen and (max-width: 1400px) {
    /* 在这里写入当屏幕宽度小于或等于1400像素时需要应用的CSS规则 */

    #mainN4Mswiperbuttonprev{left: 20px;}
    #mainN4Mswiperbuttonnext{right: 20px;}
    #mainN5 .mainN5M .mainN5MMLbuttom{left: -60px;}
    #mainN5 .mainN5M .mainN5MMRbuttom{right: -60px;}
}

#overlayN1>span{color: #f78200}
#overlayN1 .buttom{background: #f78200}

.van-toast{    z-index: 999999999999 !important;}