/* PC css start */
@media screen and (min-width:769px){
    /* PC start content */
    #content .left-navList{
        width: 270px;
        position: absolute;
    }   
    /* PC Category list */
    #content .left-navList .navList .navList-list>li a{
        display: flex; 
        justify-content: space-between;
        padding: 12px 20px;
        font-size: 14px;
    }
    #content .left-navList .navList .navList-features h2 a{
        display: flex;
        align-items: center;
        font-weight: normal;
    }
    #content .left-navList .navList .navList-features h2 a i{
        margin-right: 18px;
    }
    
    /* PC Recommended products */
    #content .right-shopList .shopList-advs{
        background: #ED1C1C;
        color: #fff;
        font-size: 14px;
        line-height: 19px;
        padding: 14px 11px;
    }
    #content .right-shopList .shopList-list li a{
        display: block;
    }
    #content .right-shopList .shopList-list li div{
        overflow: hidden;
        width: 100%;
        height: 100%; 
        display: inline-block;
        background: #fff;
    }
    #content .right-shopList .shopList-list li div img{
        transition:1s;
    }
    #content .right-shopList .shopList-list li div img:hover{
        transform: scale(1.2);
    }
    #content .right-shopList .shopList-list li:nth-child(3n){
        margin-right: 0;
    }
    #content .right-shopList .shopList-list li h4,span{
        /* margin-top: 9px;*/
    }
    /* PC end content */
    
    /* PC start news */
    #news i{
        font-size: 16px;
    }
    #news h1>span{
        font-size: 14px;
    }
    #news .shopList-news li div div i{
        display: block;
    }
    #news .shopList-news li div div{
        margin-left: 40px;
        display: flex;
        justify-content: space-between;
        width: 80%;
    }
    #news .shopList-news li span{
        margin: 0;
    }
    /* PC end news */
}

/* SP */
@media screen and (max-width:768px){
    img{
        width: 100%;
        display: block;
    }
    /* sp box */
    #modals-box{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        display: none;
    }
    .space-box{
        width: 20%;
        position: absolute;
        right: 0;
        top: 0;
        height: 170%;
        background:rgba(0, 0, 0, 0.4);
        z-index: 999;
    }
    #sp-box{
        width: 80%;
        background: #EBEBEB; 
        padding-top: 10px;
        position: absolute;
        left: 0;
        top: 0;
    }
    #sp-box .research{
        font-size: 16px;
    }
    #sp-box  .research select>option{
        background: #fff;
        color: #3E3E3E;
    }
    #sp-box  .research .select i{
        margin-left: 35px;
        font-size: 24px;
        display: block;
        position: absolute;
        right: 20px;
    }
    #sp-box .navList .navList-list li:nth-of-type(n+1){
        padding-left: 15px;
    }
    #sp-box .navList .navList-list {
        padding-bottom: 9px;
    }
    #sp-box .navList .header-nav{
        background: #000;
        padding-bottom: 90px;
    }
    /* SP common header */
    
    /* SP content */
    h1{
        line-height: 21px;
        border: 1px solid #B1B1B1;
        border-left: none;
        border-right: none;
        padding: 22px 0;
        margin: 26px 0 10px;
        font-size: 16px;
        text-align: center;
    }
    #content{
        display: flex;
        flex-direction: column-reverse;
        margin: 12px 4%;
    }
    
    /* SP Recommended products */
    #content .right-shopList .shopList-advs{
        background: #ED1C1C;
        color: #fff;
        font-size: 12px;
        line-height: 16px;
        padding: 14px 11px;
        margin-bottom: -13px;
    }
    /* SP research*/
    #content .left-navList .research .re-input{
        font-size: 12px;
        width: 55%;
        display: flex;
    }
    #content .left-navList .research .re-input i{
        font-size: 12px;
        margin-right: 10px;
        display: inline-block;
    }
    #content .left-navList .research input{
        width: 88%;
        margin-left: 6px;
        font-size: 12px;
    }
    
    /* SP Category list*/
    #content .left-navList .navList>h3{
        line-height: 19px;
        background: #F0F0F0;
        font-size: 14px;
        text-align: justify;
        font-weight: normal;
        padding: 12px 20px;
    }
    #content .left-navList .navList .navList-list>li a{
        display: flex; 
        justify-content: space-between;
        align-items: center;
        margin-top: 28px;
        padding: 0 29px;
        font-size: 14px;
        line-height: 19px;
    }
    #content .left-navList .navList .navList-features{
        margin-bottom: 47px;
    }
    #content .left-navList .navList .navList-features>h2{
        margin-top: 28px;
        padding: 0 29px;
        font-size: 14px;
    }
    #content .left-navList .navList .navList-features h2 a{
        display: flex;
        align-items: center;
        font-weight: normal;
    }
    #content .left-navList .navList .navList-features h2 a i{
        margin-right: 18px;
    }
    /* SP css content */
}

/* 1440 show sliderBar */
@media screen and (max-width:2000px) and (min-width:1440px){
    img{
        width: 100%;
        display: block;
    }
    #content .main-content{
        margin-left: 290px;
    }
    .sliderBar{
        background: #F8F8F8;
        padding: 16px;
    }
    #content{
        padding: 30px 20% 73px 20%;
    }
    .sliderBar a button{
        color: #fff;
        padding: 14px;
        font-weight: bold;
        background: #DE5D50;
        margin: 16px 0;
        width: 184px;
    }
    .sliderBar .count{
        text-align: center;
    }
    .sliderBar .count a span{
        font-size: 18px;
        line-height: 30px;
        color: #DE5D50;
        margin-left: 10px;
    }
    .sliderBar ul li .slider-img {
        width:88px;
    }
    .sliderBar ul li a{
        display: flex;
        margin-top: 8px;   
    }
    .sliderBar ul li .intrd{
        margin-left: 8px; 
    }
    .sliderBar ul li .intrd p{
        font-size: 14px;
        line-height: 19px;
    }
    .sliderBar ul li .intrd .price{
        font-size: 12px;
        line-height: 16px;
    }
    .sliderBar ul li .intrd .num{
        font-size: 12px;
        line-height: 16px;
    }
    .sliderBar .slider-turn{
        text-align: right;
        margin: 16px 22px 0 0;
        font-size: 14px;
        line-height: 19px;
        padding-bottom: 18px;
    }
}

#banner2{
    overflow: hidden;
    height: 1000px;
    width: 1000px;
    background-color: red;
    
}