@charset "utf-8";
/* CSS Document */
html.body{height: 100%}
#main{ width: 100%; height: 100%; float: left;position: fixed;top: 0;left: 0  }
.show {
    top: 0;
}
.hide {
    top: -50px;
}

.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: 66px;
    top:0;height: 66px;   }
.boxarowleft img:nth-of-type(1){
    position: relative;

}


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

.boxarowtop img: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 img:nth-of-type(1){opacity: 0 }
.boxarowbottom img:nth-of-type(2){

    position: relative;

}

#mainN1 .mainN1bottoman>span .boxarowbottom img:nth-of-type(1){position: relative;top: 24px;}

#mainN1 .mainN1bottoman>span:hover .boxarowbottom img:nth-of-type(1) {
    animation: mainN2BspanArrow1 .5s ease forwards
}
#mainN1 .mainN1bottoman>span:hover .boxarowbottom img:nth-of-type(2) {
    animation: mainN2BspanArrow .5s ease forwards
}


#mainN1 .mainN1topan .boxarowtop img:nth-of-type(2) {
    position: relative;
    top: -18px;
}
#mainN1 .mainN1topan>span:hover .boxarowtop img:nth-of-type(1) {
    animation: mainN2TspanArrow .5s ease forwards
}
#mainN1 .mainN1topan>span:hover .boxarowtop img:nth-of-type(2) {
    animation: mainN2TspanArrow1 .5s ease forwards
}




#mainN3 .mainN3M>span .boxarowbottom img:nth-of-type(1){position: relative;top: 24px;}


#mainN3 .mainN3M>span:hover .boxarowbottom img:nth-of-type(1) {
    animation: mainN2BspanArrow1 .5s ease forwards
}
#mainN3 .mainN3M>span:hover .boxarowbottom img:nth-of-type(2) {
    animation: mainN2BspanArrow .5s ease forwards
}





#mainN3 .mainN3T .boxarowtop img:nth-of-type(2) {
    position: relative;
    top: -18px;
}
#mainN4 .mainN4T .boxarowtop img:nth-of-type(2) {
    position: relative;
    top: -18px;
}
#mainN4 .mainN4T>span:hover .boxarowtop img:nth-of-type(1) {
    animation: mainN2TspanArrow .5s ease forwards
}
#mainN4 .mainN4T>span:hover .boxarowtop img:nth-of-type(2) {
    animation: mainN2TspanArrow1 .5s ease forwards
}



#mainN3 .mainN3T>span:hover .boxarowtop img:nth-of-type(1) {
    animation: mainN2TspanArrow .5s ease forwards
}
#mainN3 .mainN3T>span:hover .boxarowtop img:nth-of-type(2) {
    animation: mainN2TspanArrow1 .5s ease forwards
}



#mainN2 .mainN2T>span:hover .boxarowtop img:nth-of-type(1) {
    animation: mainN2TspanArrow .5s ease forwards
}
#mainN2 .mainN2T>span:hover .boxarowtop img:nth-of-type(2) {
    animation: mainN2TspanArrow1 .5s ease forwards
}


#mainN2 .mainN2B>b:hover .boxarowbottom img:nth-of-type(1) {
    animation: mainN2BspanArrow1 .5s ease forwards
}
#mainN2 .mainN2B>b:hover .boxarowbottom img:nth-of-type(2) {
    animation: mainN2BspanArrow .5s ease forwards
}



#mainN2 .mainN2MMLbuttom .boxarowleft img:nth-of-type(2){left: 50px;}
#mainN2 .mainN2MMLbuttom:not(.cur):hover .boxarowleft img:nth-of-type(2){
    animation: mainN2MMLArrow .5s ease forwards
}

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

#mainN2 .mainN2MMRbuttom:not(.cur):hover .boxarowleft img:nth-of-type(1){
    animation: mainN2MMRArrow1 .5s ease forwards
}

#mainN2 .mainN2MMRbuttom:not(.cur):hover .boxarowleft img:nth-of-type(2){
    animation: mainN2MMRArrow .5s ease forwards
}


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

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


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

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



@keyframes mainN2BspanArrow {
    0% {

        transform: translateZ(0)
    }

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

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

    }
    100%{


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

    }
}


@keyframes mainN2TspanArrow {
    0% {

        transform: translateZ(0)
    }

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

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

    }
    100%{


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

    }
}

@keyframes mainN2MMRArrow {
    0% {
        left: -50px;
    }

    100%{
        left: 0;
    }
}

@keyframes mainN2MMRArrow1 {
    0% {
        left: 0;
    }
    100%{
        left: 50px;
    }
}

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

    100%{
        left: 0;
    }
}

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


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

    100%{
        left: 0;
    }
}

@keyframes rightmoveArrow1 {
    0% {
        left: 0;
    }
    100%{
        left: 66px;
    }
}

@keyframes leftmoveArrow {
    0% {
        left: 66px;
    }

    100%{
        left: 0;
    }
}

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




#mainbox2{display: none}


#mainN1{width: 100%; height:100%; float: left;position: relative}
#mainN1 .mainN1topan{z-index:999;    text-align: center;width: 100%; height:auto; float: left;position: absolute;top: 0;left: 0}
#mainN1 .mainN1bottoman{z-index:999;    text-align: center;width: 100%; height:auto; float: left;position: absolute;bottom: 0;left: 0}

.mainN1 ul{width: 100%; height: 100%; float: left;}
.mainN1  ul li{position:relative;width: 100%; height: auto; float: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: inherit;background: url('../images/honeofficeN1.jpg')no-repeat center top;background-size:cover}
.mainN1  ul li .liR{width:auto;height: 100%;float: left;position: absolute;left: 60%;top: 60%;transform: translate(-50%, -50%)}
.mainN1  ul.mainN1list1 li:nth-of-type(2){background: url('../images/honeofficeN2.jpg')no-repeat center top;background-size:cover}
.mainN1  ul.mainN1list1 li:nth-of-type(2) .liR{left: 40%}

.mainN1  ul.mainN1list2 li:nth-of-type(1){background: url('../images/honeofficeN3.jpg')no-repeat center top;background-size:cover}
.mainN1  ul.mainN1list2 li:nth-of-type(2){background: url('../images/honeofficeN4.jpg')no-repeat center top;background-size:cover}
.mainN1  ul.mainN1list2 li:nth-of-type(2) .liR{left: 40%}
.mainN1  ul li .liR p{margin: 85px 0 0 48px;opacity: 0}
.mainN1  ul li .liR b{font-weight:normal;font-size: 48px;display: block;color: #fff;margin-bottom: 10px;font-family: BarlowSemiBold}
.mainN1  ul li .liR  span{color: chocolate;font-size: 20px;    font-family: 'BarlowSemiBold';}
.mainN1  ul li img{width: 100%; height:100%;}

.mainN1  ul li .liR.rightan p.cur{animation: slideInFromRight 0.3s ease forwards;}
.mainN1  ul li .liR.leftan p.cur{animation: slideInFromleft 0.3s ease forwards;}
#mainN1 ul li.special{text-align: right}
#mainN1 ul li.special p{    margin: 85px 48px 0 0;}
#mainN1 ul li.special b{font-size: 48px;display: block;color: #fff;margin-bottom: 20px}
#mainN1 ul li.special  span{color: chocolate;font-size: 20px}

#mainN1 ul li:nth-of-type(4).special p{    margin: 152px 48px 0 0;}

#mainN2{width: 100%;height: 100%;float: left;position: relative;}

#mainN2 .mainN2box{width: 100%;height: auto;float: left;    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

#mainN2 .mainN2box .appIn{width: 1193px;}

#mainN2 .mainN2T{width: 100%;height: auto;float: left;margin-bottom: 25px;text-align: center;cursor: pointer;    margin-top: 46px;}
#mainN2 .mainN2M{width: 100%;height: auto;float: left;    margin-bottom: 70px;}
#mainN2 .mainN2MT{width: 100%;height: auto;float: left;text-align: center;opacity: 0;transform:translate3d(0, 30px, 0)}
#mainN2 .mainN2MT.cur{animation: myfadeup 0.3s ease forwards;}

#mainN2 .mainN2MT b{font-size: 56px;font-family: BarlowSemiBold;font-weight: normal}
#mainN2 .mainN2MT p{font-size: 20px;font-family: BarlowSemiBold}
#mainN2 .mainN2MM{width: 100%;height: auto;float: left;position: relative}

#mainN2 .mainN2MMLbuttom{width: 50px;height: 50px;position: absolute;top: 50%;left: -98px;z-index: 999;    transform: translateY(-50%);cursor: pointer}
#mainN2 .mainN2MMLbuttom img{width: 100%;height: auto;}
#mainN2 .mainN2MMLbuttom.cur img{opacity: 0.5}
#mainN2 .mainN2MMRbuttom{width: 50px;height: 50px;position: absolute;top: 50%;right: -98px;z-index: 999;    transform: translateY(-50%);cursor: pointer}
#mainN2 .mainN2MMRbuttom img{width: 100%;height: auto;}
#mainN2 .mainN2MMRbuttom.cur img{opacity: 0.5}
.swiper-button-next, .swiper-button-prev{width: auto}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{content: '';background: url("../images/mainN2MMLbuttom.png") no-repeat center center;background-size:cover;width: 50px;height: 50px;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{content: '';background: url("../images/mainN2MMRbuttom.png") no-repeat center center;background-size:cover;width: 50px;height: 50px;}


#mainN2 .mainN2MM .swiper-container {
    width: 100%;
    height: 100%;
}

#mainN2 .mainN2MM .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;
}
#mainN2 .mainN2MM  .swiper-pagination{display: none}

#mainN2 .mainN2MM .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;}
#mainN2 .mainN2MM .swiper-slide .colorlist .infobox{    width: auto;
    height: auto;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;}
#mainN2 .mainN2MM .swiper-slide .info{width: 100%;height: 100%;float: left}
#mainN2 .mainN2MM .swiper-slide .info img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

#mainN2 .mainN2MM .swiper-slide .info img.cur{transition:all .7s;opacity: 1 !important}



#mainN2 .mainN2MM .swiper-slide .colorlist{width: 100%;height: auto;float: left;margin-bottom: 15px;}
#mainN2 .mainN2MM .swiper-slide .colorlist span{cursor:pointer;width: 24px;height: 24px;display: inline-block;border-radius: 50%;margin-right: 10px;}
#mainN2 .mainN2MM .swiper-slide .colorlist span:last-child{margin-right: 0}
#mainN2 .mainN2MM .swiper-slide .colorlist span.cur{border: 1px solid #000}


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

#mainN2 .mainN2B{width: 100%;height: auto;float: left;text-align: center}
#mainN2 .mainN2B b{cursor: pointer}

#mainN2 .mainN2B p{margin-bottom: 20px;}
#mainN2 .mainN2B p span{border: 1px solid chocolate;padding: 5px 11px;display: inline-block;color: chocolate;cursor: pointer;transition: all .3s;}

#mainN2 .mainN2B p span:hover{background: chocolate;color: #fff}

#mainN3{position:relative;width: 100%; height: 100%; float: left;background: url("../images/mainN3_bg.jpg")no-repeat top center;background-size: cover; box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.5);padding-top: 50px;}

#mainN3 .iinfo{width: 100%;height: auto;float: left;margin: 106px 0 205px 127px;color: #fff;opacity: 0}

#mainN3 .iinfo b{font-size: 48px;margin-bottom: 50px;display: block;font-family: BarlowSemiBold;font-weight: normal}
#mainN3 .iinfo p{font-size: 18px;font-family: BarlowRegular}
#mainN3 .iinfo.cur{animation: myfadeup 0.3s ease forwards;}

#mainN3 .mainN3T{width: 100%;height: auto;float: left;text-align: center;margin-top: 34px;position: absolute;
    top: 0;cursor: pointer}
#mainN3 .mainN3M{width: 100%;height: auto;float: left;text-align: center;    margin-bottom: 25px;position: absolute;
    bottom: 0;}

#mainN4{width: 100%;height: 100%;float: left;position: relative}
#mainN4 .mainN4T{width: 100%;height: auto;float: left;    position: absolute;
    top: 10%;
    left: 0;text-align: center;z-index: 999999;cursor: pointer}
#mainN4 .mainN4M{width: 100%;height: 100%;float: left;}

#mainN4 .mainN4MT{width: 100%;height: auto;float: left;display: none;position: relative;color: #fff}
#mainN4 .mainN4MT b{font-size: 2.2rem;font-family: BarlowSemiBold;margin-bottom: 1.5rem;display: block;line-height: 2.8rem}
#mainN4 .mainN4MT p{font-size: 1rem;font-family: BarlowRegular;    width: 70%;
    margin: 0 auto;color: rgba(255,255,255,0.7)}
#mainN4 .mainN4MT i {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    padding: 0.3rem 0.5rem 0.5rem;
    line-height: 1;
    font-size: 1rem;
    display: inline-block;
    margin-top: 1.3rem;
    font-family: BarlowRegular;
    color: rgba(255, 255, 255, 0.7)
}
#mainN4 .mainN4MM{width: 100%;height: 100%;float: left;position: relative}


#mainN4 .mainN4MTbody{width: calc(100% - 4rem); text-align:center;height: auto;float: left;position: absolute;bottom:1rem;left: 50%;transform: translate(-50%, 0);}

#mainN4 .mainN4MMbox{width: 100%;height: 100%;float: left;position: relative;}
#mainN4 video{width: 100%;height: 100%;object-fit: cover;}
/*#mainN2 .plyr{display: none}*/
#mainN4 img{width: 100%}
#mainN4 .bf{width: 64px;height: 64px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor:pointer;z-index: 999 }
#mainN4 .bf1{width: 64px;height: 64px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor:pointer;z-index: 999 }
#mainN4 .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%);}
.section.footerss .fp-tableCell{
display: block!important;
}


#mainN2 .wapmainN2T{display: none}
#mainN2 .wapmainN2MM{display: none}

@media only screen and (max-width: 768px) {
    html,body{overflow: inherit !important;  overflow-x: hidden !important;height: auto !important}
    #main{position: relative}
    #mainbox{display: none}

    #mainbox2{width: 100%;height: auto;float: left;display: block}

    #mainN2 .mainN2box .appIn{width: 92%}

    #mainN2 .mainN2T{display: none}
    #mainN2 .mainN2MT{margin: 2rem 0 0 0}
    #mainN2 .mainN2MT b{font-size: 2rem}
    #mainN2 .mainN2MT p{font-size: 1rem}
    #mainN2 .mainN2B{display: none}
    #mainN2 .wapmainN2T{width: 100%;height: auto;float: left;display: block}

    #mainN2 .wapmainN2T .swiper {
        width: 100%;
        height: 100%;
    }

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

    #mainN2 .wapmainN2T .swiper-slide a{position: relative}
    #mainN2 .wapmainN2T .swiper-slide span{position: absolute;bottom: 1rem;left: 2rem;color: #fff;font-size: 1.8rem;font-family:BarlowSemiBold }


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

    #mainN2 .mainN2box{position: relative;top: auto;left: auto;transform: translate(0, 0);padding-top: 2rem;}
    #mainN2 .mainN2MM{display: none}
    #mainN2 .wapmainN2MM{width: 100%;height: auto;float: left;display: block;margin-bottom: 1rem}

    /* styles to be applied when screen width is less than 768px */
    #mainN2 .wapmainN2MM .swiper-container {
        width: 100%;
        height: 100%;
    }

    #mainN2 .wapmainN2MM .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;
    }

    #mainN2 .wapmainN2MM  .swiper-pagination{display: none}

    #mainN2 .wapmainN2MM .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;;position: relative;
        z-index: 11111;}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist .infobox{    width: auto;
        height: auto;
        float: left;
        margin-right: 0.5rem;
        margin-bottom: 0.3rem;}

    #mainN2 .wapmainN2MM .swiper-slide .colorlist .infobox span{width: 1.3rem;height:  1.3rem}

    #mainN2 .wapmainN2MM .swiper-slide .info{width: 100%;height: 100%;float: left}
    #mainN2 .wapmainN2MM .swiper-slide .info img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    #mainN2 .wapmainN2MM .swiper-slide .info img.cur{transition:all .7s;opacity: 1 !important}

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

    #mainN2 .mainN2M{margin-bottom: 0}
    #mainN2 .wapmainN2MM .swiper-slide .title{width: 100%;height: auto;float: left;font-size:1.8rem;margin-bottom: 0.6rem;font-family:BarlowSemiBold;font-weight: normal }
    #mainN2 .wapmainN2MM .swiper-slide .title b{font-weight: normal}
    #mainN2 .wapmainN2MM .swiper-slide .body{       font-size: 1rem !important;
        padding: 0 1rem 1rem 1rem;  line-height: 1.5rem;font-family: MyriadProRegular}
    #mainN2 .wapmainN2MM .swiper-button-next, .swiper-button-prev{color: #999}
    #mainN2 .wapmainN2MM  .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 0;    pointer-events: auto;}
    #mainN2 .wapmainN2MM  .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right:0;    pointer-events: auto;}

    #mainN4 .mainN4T{display: none}
    #mainN4 .mainN4MT{display: block}
    #mainN4 .mainN4MM{height: auto}

    #mainN2 .mainN2MMLbuttom{display: none}

    #mainN2 .mainN2MMRbuttom{display: none}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    html,body{overflow: inherit !important;  overflow-x: hidden !important;height: auto !important}
    #main{position: relative}
    #mainbox{display: none}

    #mainbox2{width: 100%;height: auto;float: left;display: block}
    /* styles to be applied when screen width is between 768px and 1024px */
    #mainN2 .mainN2box .appIn{width: 92%}

    #mainN2 .mainN2T{display: none}
    #mainN2 .mainN2MT{margin: 1.5rem 0 1rem 0}
    #mainN2 .mainN2MT b{font-size: 2.4rem}
    #mainN2 .mainN2MT p{font-size: 1.2rem}
    #mainN2 .mainN2B{display: none}
    #mainN2 .mainN2MM{display: none}
    #mainN2 .mainN2MMLbuttom{display: none}
    #mainN2 .mainN2MMRbuttom{display: none}
    #mainN4 .mainN4MT{display: block}
    #mainN4 .mainN4MM{height: auto}
    #mainN2 .wapmainN2T{width: 100%;height: auto;float: left;display: block}

    #mainN2 .wapmainN2T .swiper {
        width: 100%;
        height: 100%;
    }

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

    #mainN2 .wapmainN2T .swiper-slide a{position: relative}
    #mainN2 .wapmainN2T .swiper-slide span{position: absolute;bottom: 1rem;left: 2rem;color: #fff;font-size: 2.4rem;font-family:BarlowSemiBold }


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

    #mainN2 .mainN2box{position: relative;top: auto;left: auto;transform: translate(0, 0);padding-top: 2rem;}
    #mainN2 .mainN2MM{display: none}
    #mainN2 .wapmainN2MM{width: 100%;height: auto;float: left;display: block}

    /* styles to be applied when screen width is less than 768px */
    #mainN2 .wapmainN2MM .swiper-container {
        width: 100%;
        height: 100%;
    }

    #mainN2 .wapmainN2MM .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;
    }

    #mainN2 .wapmainN2MM  .swiper-pagination{display: none}

    #mainN2 .wapmainN2MM .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;}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist .infobox{    width: auto;
        height: auto;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;}
    #mainN2 .wapmainN2MM .swiper-slide .info{width: 100%;height: 100%;float: left}
    #mainN2 .wapmainN2MM .swiper-slide .info img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    #mainN2 .wapmainN2MM .swiper-slide .info img.cur{transition:all .7s;opacity: 1 !important}

    #mainN2 .wapmainN2MM .swiper-slide .colorlist{width: 100%;height: auto;float: left;margin-bottom: 15px;}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist span{cursor:pointer;width: 24px;height: 24px;display: inline-block;border-radius: 50%;margin-right: 10px;}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist span:last-child{margin-right: 0}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist span.cur{border: 1px solid #000}


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

    #mainN4 .mainN4T{display: none}

}



@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    /* styles to be applied when screen width is between 1024px and 1200px */
    html,body{overflow: inherit !important;  overflow-x: hidden !important;height: auto !important}
    #main{position: relative}
    #mainbox{display: none}

    #mainbox2{width: 100%;height: auto;float: left;display: block}
    /* styles to be applied when screen width is between 768px and 1024px */
    #mainN2 .mainN2box .appIn{width: 92%}

    #mainN2 .mainN2T{display: none}
    #mainN2 .mainN2MT{margin: 1.5rem 0 1rem 0}
    #mainN2 .mainN2MT b{font-size: 2.4rem}
    #mainN2 .mainN2MT p{font-size: 1.2rem}
    #mainN2 .mainN2B{display: none}
    #mainN2 .mainN2MM{display: none}
    #mainN2 .mainN2MMLbuttom{display: none}
    #mainN2 .mainN2MMRbuttom{display: none}
    #mainN4 .mainN4MT{display: block}
    #mainN4 .mainN4MM{height: auto}
    #mainN2 .wapmainN2T{width: 100%;height: auto;float: left;display: block}

    #mainN2 .wapmainN2T .swiper {
        width: 100%;
        height: 100%;
    }

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

    #mainN2 .wapmainN2T .swiper-slide a{position: relative}
    #mainN2 .wapmainN2T .swiper-slide span{position: absolute;bottom: 1rem;left: 2rem;color: #fff;font-size: 2.4rem;font-family:BarlowSemiBold }


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

    #mainN2 .mainN2box{position: relative;top: auto;left: auto;transform: translate(0, 0);padding-top: 2rem;}
    #mainN2 .mainN2MM{display: none}
    #mainN2 .wapmainN2MM{width: 100%;height: auto;float: left;display: block;}

    /* styles to be applied when screen width is less than 768px */
    #mainN2 .wapmainN2MM .swiper-container {
        width: 100%;
        height: 100%;
    }

    #mainN2 .wapmainN2MM .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;
    }

    #mainN2 .wapmainN2MM  .swiper-pagination{display: none}

    #mainN2 .wapmainN2MM .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;}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist .infobox{    width: auto;
        height: auto;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;}
    #mainN2 .wapmainN2MM .swiper-slide .info{width: 100%;height: 100%;float: left}
    #mainN2 .wapmainN2MM .swiper-slide .info img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    #mainN2 .wapmainN2MM .swiper-slide .info img.cur{transition:all .7s;opacity: 1 !important}

    #mainN2 .wapmainN2MM .swiper-slide .colorlist{width: 100%;height: auto;float: left;margin-bottom: 15px;}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist span{cursor:pointer;width: 24px;height: 24px;display: inline-block;border-radius: 50%;margin-right: 10px;}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist span:last-child{margin-right: 0}
    #mainN2 .wapmainN2MM .swiper-slide .colorlist span.cur{border: 1px solid #000}


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

    #mainN4 .mainN4T{display: none}

}
@media only screen and (min-width: 1200px) {
    /* styles to be applied when screen width is greater than 1200px */


}
@media only screen and (max-width: 1300px) {
    #mainN2 .mainN2box .appIn{width: 92%}

    #mainN2 .mainN2MMLbuttom{left: 0}
    #mainN2 .mainN2MMRbuttom{right: 0}
}
.box12{display: none}
/*@media only screen and (max-height: 800px) {*/

/*.box12 {*/
/*height: 50px !important;*/
/*display: block;*/
/*}*/

/*}*/

/*@media only screen and (max-height: 700px) {*/

/*.box12 {*/
/*height: 100px !important;*/
/*display: block;*/
/*}*/

/*}*/
/*@media only screen and (max-height: 500px) {*/

/*.box12 {*/
/*height: 200px !important;*/
/*display: block;*/
/*}*/

/*}*/
/*#nextS{height: auto !important}*/
/*#nextS .fp-tableCell{height: auto !important}*/