@charset "utf-8";
/* CSS Document */

#main{ width: 100%; height: auto; float: left;margin-top: 65px;}
#banner{display: none}

#mainN1{width:calc(100% - 219px); height: auto; float: left;margin:0 115px 0 104px;margin-bottom: 93px;position: relative}
#mainN1 .mainN1L{width: 310px;height: auto;float: left;background: #fff;margin-top: 80px;position: absolute;z-index: 999999}

#mainN1 ul{width: 100%;height: auto;float: left}
#mainN1 ul li{width: 100%;height: auto;float: left;margin-bottom: 30px;}
#mainN1 ul li:nth-of-type(3){margin-bottom: 59px;}
#mainN1 ul li .liT{ font-family: BarlowSemiBold;width: 100%;height: auto;float: left;border-bottom: 1px solid #000;color: #000;padding-bottom: 15px;margin-bottom: 14px;    line-height: 17px;}

#mainN1 ul li .liT b{color:#000;
    font-weight: normal;
    font-size: 24px;}
input::-webkit-input-placeholder{
/*// WebKit, Blink, Edge浏览器，带input，双冒号*/
color:#000;
    font-weight: 700;
    font-size: 24px;

}
input::-moz-placeholder{
/*// 火狐浏览器高版本（19+），不用带input，双冒号*/
color:#000;
    font-weight: 700;
    font-size: 24px;
}
input:-moz-placeholder{
/*//火狐浏览器底版本（4 to 18），不用带input，单冒号*/
color:#000;
    font-weight: 700;
    font-size: 24px;
}
input:-ms-input-placeholder{
/*// IE浏览器底版本（10-11），带input，单冒号*/
color:#000;
    font-weight: 700;
    font-size: 24px;
}

#mainN1 ul li .liM{width: 100%;height: auto;float: left;font-family: BarlowRegular}
#mainN1 ul li .liM{display: flex;align-items: center;flex-wrap: wrap;    text-align: center;}
#mainN1 ul li:nth-of-type(4) .liM{text-align: left;display: block}
#mainN1 ul li:nth-of-type(4) .liM span:nth-of-type(2n){margin-right: 0}
#mainN1 ul li:nth-of-type(3) .liM{display: block}
#mainN1 ul li .liM span{cursor:pointer;font-family: MyriadProRegular;display: inline-block;width:auto;margin-right: 14px;padding:5px 10px 2px;margin-bottom: 14px; border: 1px solid #000;color: #000;background: transparent;font-size: 18px;}
#mainN1 ul li .liM span.cur{background: #000;color: #fff;}
#mainN1 ul li .liM span:last-child{margin-right: 0;}

#mainN1 ul li:nth-of-type(2) .liM span{width: auto;padding: 5px 10px 2px}
#mainN1 ul li .liM b{width:100%;height:auto;display: inline-block;position: relative }
/*#mainN1 ul li .liM b:after{content:'';background: url("../images/SIZE.jpg") no-repeat center center;background-size: 100%;width: 74px;height: 16px;display: inline-block;    position: absolute;*/
    /*left: 25px;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);display: none}*/
#mainN1 ul li:nth-of-type(4) .liM{text-align: left;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center;}
#mainN1 ul li:nth-of-type(4) .liM .item{width:auto;height: auto;float: left; border: 1px solid #000;padding:5px 10px 2px;margin-right: 14px;margin-bottom: 14px;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center}
#mainN1 ul li:nth-of-type(4) .liM .item:nth-of-type(2n){margin-right: 0}
/*#mainN1 ul li:nth-of-type(4) .liM .item i{margin-top:-5px }*/
#mainN1 ul li:nth-of-type(4) .liM .item:nth-of-type(3) i{margin-top: 0}
#mainN1 ul li:nth-of-type(4) .liM .item img{margin-right: 10px;border-radius: 50%}
#mainN1 ul li:nth-of-type(4) .liM span{border: none;padding: 0;margin: 0;}
#mainN1 ul li:nth-of-type(4) .liM .item.cur{background: #000;color: #fff;}
#mainN1 ul li:nth-of-type(4) .liM .item.cur span{color: #fff}
.LeftButton {
    width: 26px;
    height: 26px;
    position: relative;
    margin-top: 12px;

}

.LeftButton i{width: 1px;height: 60%;position: absolute;top: 50%;left: 50%;background: #000;transform: translate(-50%, -50%);}
.RightButton {
    width: 26px;
    height: 26px;
    position: relative;
    margin-top: 12px;


}

.RightButton i{width: 1px;height: 60%;position: absolute;top: 50%;left: 50%;background: #000;transform: translate(-50%, -50%);}


#mainN1 .mainN1R{justify-content: center;width: 100%;height: auto;min-height:1000px;float: left;flex: 1;margin:0 0 0 0;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: flex-start;flex-wrap: wrap}

#mainN1 .mainN1Rbox{margin-top:80px;width: 100%;height: auto;float: left;font-size: 56px;font-family: BarlowSemiBold;text-align: center;margin-bottom: 100px;}
#mainN1 .mainN1R .swiperslide{width: 25%;height: auto;float: left;text-align: center;margin-bottom: 100px;}
#mainN1 .mainN1R .swiperslide .info{width: 100%;height: auto;float: left}

#mainN1 .mainN1R .swiperslide .info img{width: 100%;height: 100%}
#mainN1 .mainN1R .swiperslide .info img.cur{    transition: all .7s;
    opacity: 1 !important;}

#mainN1 .mainN1R .swiperslide .colorlist{width: 100%;height: auto;float: left;margin-bottom: 15px;margin-top: 10px;position: relative;
    z-index: 11111;}
#mainN1 .mainN1R .swiperslide .colorlist ul{justify-content:center;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items: center}
#mainN1 .mainN1R .swiperslide .colorlist ul li{width: auto;margin-bottom: 0;margin-right: 10px;}
#mainN1 .mainN1R .swiperslide .colorlist ul li:last-child{margin-right: 0}
#mainN1 .mainN1R .swiperslide .colorlist span{width: 24px;height: 24px;display: inline-block;border-radius: 50%;margin-right: 10px;cursor: pointer}
#mainN1 .mainN1R .swiperslide .colorlist span:last-child{margin-right: 0}
#mainN1 .mainN1R .swiperslide .colorlist span.cur{border: 1px solid #000}
#mainN1 .mainN1R .swiperslide .title{width: 100%;height: auto;float: left;font-size:24px;    margin-bottom: 20px;font-family: BarlowSemiBold}
#mainN1 .mainN1R .swiperslide .title b{font-weight: normal}
#mainN1 .mainN1R .swiperslide .body{width: 100%;height: auto;float: left;font-size: 18px;line-height: 20px;font-family:MyriadProRegular }

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



    #mainN1 .mainN1R{align-items: inherit;justify-content: left;min-height: auto;}
    #mainN1 .mainN1Rbox{font-size: 1.8rem;border-bottom: 1px solid #c1c1c1;border-top:1px solid #c1c1c1;margin: 0 0 0 0;padding: 1rem 0;  line-height: 1; }
    #mainN1{width:calc(100% - 3rem);margin: 0 1.5rem;}
    #mainN1 .mainN1R .swiperslide{border-bottom: 1px solid #c1c1c1;border-right: 1px solid #c1c1c1;margin-bottom: 0;width: calc(56% - 40px) !important;padding:0 20px 20px 20px}
    #mainN1 .mainN1R .swiperslide:nth-of-type(2n){border-right: none;margin-right: 0;}
    #mainN1 .mainN1R .swiperslide .colorlist{width: 90%;margin-left: 5%;margin-bottom: 0;}
    #mainN1 .mainN1R .swiperslide .colorlist ul{flex-wrap: wrap}

    #mainN1 .mainN1R .swiperslide .colorlist ul li{width: 20%;margin-right: 0;}

    #mainN1 .mainN1R .swiperslide .title{font-size: 1.8rem;margin-bottom: 0.6rem}
    #mainN1 .mainN1R .swiperslide .body{font-size: 1rem !important;padding: 0 1rem 1rem 1rem ;line-height: 1.5rem}
    #mainN1 .mainN1R .swiperslide .body p{width: 100% !important}



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

    #footer .appIn{width: 92%;margin: 0}


    #mainN1 {
        width: 100%;
        height: auto;
        float: left;
        position: relative;
        margin: 0;
    }
    #mainN1 .mainN1R .swiperslide{width: 33%}
    #mainN1 .mainN1R .swiperslide .colorlist ul{flex-wrap: wrap;justify-content: center}
    #mainN1 .mainN1R .swiperslide .colorlist ul li{width: auto;margin-bottom: 3px;margin-right:0;}
    #mainN1 .mainN1R .swiperslide .colorlist span{width: 1.3rem;height: 1.3rem}
    #mainN1 .mainN1R .swiperslide .colorlist span:last-child{margin-right: 5px}
    #mainN1 .mainN1R .swiperslide .body p{width: 100% !important}


    .bigge:hover img{    transform: translateZ(0);}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #mainN1 {
        width: calc(100% - 3rem);
        height: auto;
        float: left;
        position: relative;
        margin: 0 1.5rem;
    }
    #mainN1 .mainN1R .swiperslide{width: 33%}
    #mainN1 .mainN1R .swiperslide .colorlist ul{flex-wrap: wrap;justify-content: center}
    #mainN1 .mainN1R .swiperslide .colorlist ul li{width: auto;margin-bottom: 5px;margin-right:0;}

    #mainN1 .mainN1R .swiperslide .colorlist span:last-child{margin-right: 10px}
    #mainN1 .mainN1R .swiperslide .body p{width: 100% !important;}
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    #mainN1 {
        width: calc(100% - 3rem);
        height: auto;
        float: left;
        position: relative;
        margin: 0 1.5rem;
    }
    #mainN1 .mainN1R .swiperslide .body p{width: 80% !important}
    #mainN1 .mainN1R .swiperslide{width: 33%}

    #mainN1 .mainN1R .swiperslide .colorlist ul{flex-wrap: wrap;justify-content: center}
    #mainN1 .mainN1R .swiperslide .colorlist ul li{width: auto;margin-bottom: 5px;margin-right: 0}
    #mainN1 .mainN1R .swiperslide .colorlist ul li:nth-of-type(4n){margin-right: 0}
    #mainN1 .mainN1R .swiperslide .colorlist span:last-child{margin-right: 10px}
}


@media only screen and (max-width: 500px) {
    #mainN1 .mainN1R .swiperslide{border-bottom: 1px solid #c1c1c1;margin-bottom: 0;width: 50% !important;
        padding: 0;
    }
    /*#mainN1 .mainN1R .swiperslide{border-bottom: 1px solid #000;border-right: none;margin-bottom: 0;padding:0 0 2rem 0;width: 100% !important;}*/

    #mainN1 .mainN1R .swiperslide:last-child{padding: 0}
}





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

#mainN3{width: 100%; height: auto; float: left;}


.van-slider{    user-select: none;background: url(../images/pnghx.jpg) no-repeat center center;background-size: 100% 100%;  height: 14px;  padding: 0 14px;}
.van-slider__bar{border-radius: 0}

#footer .appIn{width:calc(100% - 399px); height: auto; float: left;margin:0 186px 0 213px;}


@media only screen and (max-width: 768px) {
    #footer{padding-top: 0;margin-top: 0}
    #footer .appIn {
        width: 92%;
        margin: 0 auto;
        float: initial;
    }





}