.content{
   
    margin: 0 auto;
   
    /* background: url(https://file.c-sgba.com/uploads/0732a183-0606-41cb-81f7-b50eec087d4f.jpg) no-repeat center 0 ; */
    background: url(https://file.c-sgba.com/uploads/79e3ae1a-d3dd-4336-bf1b-5200a16b0d37.jpg) no-repeat center 0px ;

    
    background-size:  38.4rem 8.16rem;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 15rem;
}


img{
    width: 100%;
    height: 100%;
    /* transition: transform 0.5s ease; */
}
/*  */


.hot {
    margin-top: 9.04rem;
    /* margin-top: 6.04rem; */
    margin-top: 7.04rem;
    background: #F5F5F5;
    border: 1px solid rgba(0,0,0,0.07);
    padding: .54rem;
    box-sizing: border-box;
}
.hot a{
    display: block;
}
.hot  .title{
   font-weight: bold;
    font-size: .64rem;
    color: #1658A0;
    line-height: .76rem;
}
.hot  .title div{
    max-width: 70%;
}
.hot  .title i{
    height: .4rem;
    padding:0 .1rem;
    background: url(../image/blessing-hot-bg.png) no-repeat 0 0;
    background-size: 100% 100%;
    line-height: .36rem;
    font-size: .24rem;
    color: #ffffff;
    flex-shrink: 0;
    font-weight: 100;
}
.hot  .subtitle{

    max-width: 85%;
    margin: 0 auto;
    margin-top: .28rem;
    font-size: .26rem;
    color: #4F4F4F;
    line-height: .36rem;
    text-align: center;
}




.brand-content{
    margin-top: 6.66rem;
    font-size: .32rem;
    line-height: .6rem;
  
    color: #ffffff;
    margin-bottom: 3rem;
  
}

.brand-content-left{
    width: 17.16rem;
    height: 10.84rem;
    flex-shrink: 0;
    /* padding: .2rem; */
    padding: .2rem;
   
    box-sizing: border-box;
    overflow: hidden;
    background: url(../image/img-bg.jpg) no-repeat center #000000 ;
    background-size:  16.76rem 10.44rem;
    
}
.brand-content-left img{
    width: 100%;
    height: 100%;
}
.brand-content-right{
    width: 6.84rem;
    height: 10.84rem;
    box-sizing: border-box;
    padding: .3rem;
    overflow: hidden;
    background: linear-gradient(270deg, #6A6A6A 0%, #7F7A7A 100%);
    
}
.brand-content-right div{
    height: 10.24rem;
   
    box-sizing: border-box;
    overflow-y: auto;
    background: linear-gradient(270deg, #6A6A6A 0%, #7F7A7A 100%);
    
}







.brand-top{
    /* height: 10rem; */
    font-size: .28rem;
    
    margin-top: 6.66rem;
    margin-top: .66rem;
}
.w200{
    width: 20rem;
    margin: 0 auto;
}


.brand-left {
    width: 17.16rem;
    box-sizing: border-box;
    overflow: hidden;
    height: 10.84rem;
    padding: .18rem;
    background: #000;
    height: 9.88rem;
}
.leftSwiper{
    width: 16.8rem;;
    box-sizing: border-box;
    overflow: hidden;
    height: 10.48rem;
    height: 9.48rem;
}


.leftSwiper  a{
    display: block;
    width: 16.8rem;
    /* height: 10.84rem; */
    height: 9.48rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;

}

.leftSwiper  a .brand-video-icon{
    display: block;
    width: 1.76rem;
    height: 1.76rem;
    position: absolute;
    left: 50%;
    z-index: 2000;
    top: 50%;
    transform: translate(-50%, -50%) ;
}
.leftSwiper  a .dis{
    display: none;
}


.brand-right{
    width: 6.84rem;
    box-sizing: border-box;
    overflow: hidden;
    height: 10.84rem;
    height: 9.88rem;
}
.brand-right .rightSwiper{
    width: 6.84rem;
    box-sizing: border-box;
    overflow: hidden;
    height: 10.84rem;
    height: 9.88rem;
    background: linear-gradient( 270deg, #6A6A6A 0%, #7F7A7A 100%);
}
 

.brand-right .rightSwiper .swiper-slide .swiper-item{
    width: 6.84rem;
    height: 2rem;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient( 270deg, #6A6A6A 0%, #7F7A7A 100%);
    box-sizing: border-box;
    color: #ffffff;
    padding: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #FFFFFF;
    line-height: .5rem;
    cursor: pointer;
    text-align: justify;


}


.brand-right .rightSwiper .swiper-slide-thumb-active .swiper-item{
    background: #923735;
}




.brand-title{
    font-weight: 400;
    font-size: .4rem;
    color: #4F4F4F;
    line-height: .52rem;
    text-align: center;
    /* margin: 1rem 0 .8rem 0; */
    margin-top: 1rem;
    margin-bottom: .8rem;
}

.brand-title div:nth-child(1),.brand-title div:nth-child(5){
    width: 1rem;
    height: 1px;
    background: #FFA8A8;

}

.brand-title div:nth-child(2n){
    width: 1rem;
    height: .08rem;
    background: #C73D35;

}

.brand-title div:nth-child(3){
    margin: 0 1rem;

}
.brand-title div:nth-child(3) p:nth-child(1){
    font-weight: bold;
    font-size: .8rem;
    color: #1D2125;
    line-height: 1rem;

}



.advertisement{
 
}
.advertisement a{
    display: block;
    width: 100%;
    height: 2.4rem;
}











/*  */



.brand-list ul {
}

.brand-list-item a{
    display: block;
    width: 7.6rem;
    box-sizing: border-box;
    margin-bottom: .44rem;
}
.brand-list-item a div{
    position: relative;
    width: 7.6rem;
    height: 4.28rem;
}
.brand-list-item a img{
    
}
.brand-list-item a .brand-video-icon{
    position: absolute;
    height: .8rem;
    width: .8rem;
    left: .24rem;
    bottom: .36rem;
}
.brand-list-item a p{
    padding: .1rem;
    font-weight: 400;
    font-size: .32rem;
    color: #1D2125;
    line-height: .48rem;
    margin-top: .2rem;
}

 .base{
    width: 7.6rem;
    box-sizing: border-box;
    height: 1px ;
}

.brand-list-item a:hover p{
    color: #176BC6;
}
.more{
    text-align: center;
    font-weight: 400;
    font-size: .28rem;
    color: #9B9B9B;
    line-height: .42rem;
    margin-top: .4rem;
    cursor: pointer;
    margin-bottom: 1rem;
}

.m-advertisement{
    display: none;
}
.m-swiper{
    display: none;
}

@media (max-width: 651px) {
    .content {
        /* background: url(../image/m-brand-bg.png) no-repeat center 0;  */
        /* background: url(https://file.c-sgba.com/uploads/0732a183-0606-41cb-81f7-b50eec087d4f.jpg) no-repeat center 0; */
        background: url(https://file.c-sgba.com/uploads/79e3ae1a-d3dd-4336-bf1b-5200a16b0d37.jpg) no-repeat center 0px ;

        
        background-size: 100% 3.6rem;
        background-size: auto 3.6rem;
        background-position-x: 74%;
        box-sizing: border-box;
        overflow: hidden;
        min-height: 15rem;
        margin-top: 1.2rem;
    }
  
    .brand-content{
        flex-wrap: wrap;
        margin-top: 1.6rem;
        padding: 0 .32rem;
    }
    .brand-content-left{
        margin-top: 1.6rem;
        width: 100%;
        height: 3.86rem;
        border-radius: .2rem;
        padding: 0;
        margin-bottom: .4rem;
    }
    .brand-content-right{
        width: 100%;
        height: auto;
        background: #ffffff;
        padding: 0;
    }
    .brand-content-right div{
        width: 100%;
        height: auto;
        background: #ffffff;
        color: #1D2125;
    }



    .hot{
        margin-top: 3.6rem;
        padding: .32rem;
        background: #ffffff;
        border: none;
    }
    .hot a{
        background: #F5F5F5;
        border-radius: .2rem ;
        border: 1px solid rgba(0,0,0,0.07);
        padding: .26rem .2rem;
    }
    .hot .title{
        font-size: .4rem;
        line-height: .56rem;

    }
    .hot .title div{
        max-width: 80%;
    }
    .hot .subtitle{
        font-size: .24rem;
        max-width: 100%;
    }
  

    .advertisement {
        margin-top: 0;
        display: none;
    }
    .m-advertisement{
        display: block;
        padding: .32rem;
        box-sizing: border-box;
        overflow: hidden;
    }
    .dis{
        display: none;
    }
    .m-advertisement a{
        display: block;
        width: 100%;
        height: 1.5rem;
        border-radius: .2rem;
        box-sizing: border-box;
        overflow: hidden;
    }
    .brand-top{
        flex-wrap:wrap ;
        margin-top: 0;
    }

    .brand-right{
        display: none;
    }

    .brand-left{
        display: none;
    }


    .m-swiper{
        display: block;
        width: 100%;
        height: 5rem;
        padding: 0 .32rem;
        box-sizing: border-box;
        overflow: hidden;
    
    }

    .m-leftSwiper{
        width: 100%;
        height: auto;
        padding-bottom: .5rem;
     
    }
    .m-leftSwiper .swiper-pagination{
        display: block;
    }

    .m-leftSwiper .swiper-pagination-bullet-active::after{
        display: none;
    }
    .m-leftSwiper {
        padding-bottom: .8rem;
    }
    .m-leftSwiper .swiper-pagination-fraction, .swiper-pagination-custom, .floor1 .swiper-horizontal > .swiper-pagination-bullets, .floor1 .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: .0;
        left: 0;
    }
    .m-leftSwiper .swiper-pagination {
        text-align: center;
    }
    .m-leftSwiper  .swiper-pagination-bullet {
        width: .12rem;
        height: .12rem;
        background:#BEBEBE;
        opacity:.7;
    }
    .m-leftSwiper .swiper-pagination-bullet-active {
        opacity: 1;
        background: #1658A0;
        width: .24rem;
        height: .12rem;
        border-radius: .12rem;
    }
 
    .m-leftSwiper a{
        width: 100%;
        height: 4.14rem;
        border-radius: .2rem;
        color: #ffffff;
        font-size: .28rem;
    }
    .m-leftSwiper a img{
        border-radius: .2rem;
    }
    .m-leftSwiper a .title {
        position: absolute;
        bottom: 0%;
        box-sizing: border-box;
        background: rgba(41, 47, 54, 0.34);
        padding: .12rem .12rem;
        width: 100%;
        font-size: .28rem;
        border-radius: 0 0 .2rem .2rem;
    }
     .brand-title{
         padding: 0 .32rem;
         margin-top: .3rem;
     }
     .brand-title div:nth-child(3){
         margin: 0 .5rem;
     }
     .brand-title div:nth-child(3) p:nth-child(1){
         font-size: .4rem;
     }
     .brand-title div:nth-child(3) p:nth-child(2){
        display: none;
    }
    .brand-list ul{
        width: 100%;
        padding: 0 .32rem;
        box-sizing: border-box;
        overflow: hidden;
    }
    .m-dis{
        display: none;
    }
    .brand-list-item{
        width: 100%;
    }
    .brand-list-item a{
        width: 100%;
    }
    .brand-list-item a div{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: .2rem;
    }
    .brand-list-item a p{
        width: 100%;
        box-sizing: border-box;
    }
/*  */
}
@media (max-width: 345px) {
    .m-swiper{
        height: auto;
    }
    .m-leftSwiper a{
        height: .32rem;
    }
    .brand-title div:nth-child(3) p:nth-child(1){
        font-size: .36rem;
    }
    .brand-title div:nth-child(3){
        width: 2rem;
    }


}