.content{

    margin: 0 auto;
    box-sizing: border-box;
    /* background: url(../image/joy-bg.png) no-repeat center 0; */
    background: url(https://c-sgba.oss-cn-shenzhen.aliyuncs.com/uploads/a6547213-c962-4a6c-a39a-014e48272047.png?x-oss-process=image/format,webp/sharpen,100) no-repeat center 0;


    
    background-size:38.42rem 8.38rem;
    overflow: hidden;
}


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

/* 广告 */
.advertisement a{
    display: block;
    width: 100%;
    height: 2.4rem;
}



.joy-swiper{
    margin-top: 9.4rem;
    box-sizing: border-box;
    overflow: hidden;
}



.joy-swiper-left{
    width: 15.2rem;
    /* height: 12rem; ; */
    box-sizing: border-box;
    overflow: hidden;
}


.leftSwiper{
    width: 15.2rem;
    height: 8.54rem;
}
.leftSwiper a{
    display: block;
    width: 15.2rem;
    height: 8.54rem;
    position: relative;
}
.leftSwiper a .title{
    position: absolute;
    bottom: 0%;
    box-sizing: border-box;
    background: rgba(41, 47, 54, 0.34);
    padding: .36rem .36rem;
    width: 100%;
}
.leftSwiper .title p {
    box-sizing: border-box;
    overflow: hidden;
    width: 80%;
    color: #ffffff;
    font-size: .38rem;
    font-weight: 100;
}
.leftSwiper .swiper-pagination{
    display: none;
} 
.leftSwiper .swiper-button-next,.leftSwiper .swiper-button-prev{
    width: .6rem;
    height: .8rem;
    background-size: 100% 100%;
}
.leftSwiper .swiper-button-next::after,.leftSwiper .swiper-button-prev::after{
    content:""
}
.leftSwiper .swiper-button-next{
    background: url(../image/youth-establish-next.png) no-repeat 0  0 ;
    background-size: 100% 100%;
    opacity: .8;
    right: 0%;
}
.leftSwiper .swiper-button-next:hover{
 
}
.leftSwiper .swiper-button-prev{
    background: url(../image/youth-establish-prev.png) no-repeat 0  0 ;
    /* right: 1.77rem; */
    background-size: 100% 100%;
    opacity: .8;
    left: auto;
    
}
.mySwiper .swiper-button-prev:hover{
    
}

/* 下边的轮播 */

.joy-swiper-bottom{
    margin-top: 1rem;
    box-sizing: border-box;
}


.bottomSwiper1{
    width: 8rem;
    height: 3.64rem;
}







.bottomSwiper1-box .bottomSwiper1 .swiper-slide{
    width: 2.6rem;
    height: 3.64rem;
    transition: 300ms;
    transform: scale(0.8);
}


.bottomSwiper1-box .bottomSwiper1 .swiper-item a{
    display: block;
    width: 100%;
    height: 3.64rem;
    box-sizing: border-box;
    overflow: hidden;

}



.bottomSwiper1-box .bottomSwiper1 .swiper-slide-active,.bottomSwiper1-box .bottomSwiper1 .swiper-slide-duplicate-active{
transform: scale(1);
}

.bottomSwiper1 .swiper-button-next,.bottomSwiper1 .swiper-button-prev{
    width: .6rem;
    height: .8rem;
    background-size: 100% 100%;
}
.bottomSwiper1 .swiper-button-next::after,.bottomSwiper1 .swiper-button-prev::after{
    content:""
}
.bottomSwiper1 .swiper-button-next{
    background: url(../image/youth-establish-next.png) no-repeat 0  0 ;
    background-size: 100% 100%;
    opacity: .8;
    right: 0%;
}
.bottomSwiper1 .swiper-button-next:hover{
 
}
.bottomSwiper1 .swiper-button-prev{
    background: url(../image/youth-establish-prev.png) no-repeat 0  0 ;
    /* right: 1.77rem; */
    background-size: 100% 100%;
    opacity: .8;
    left: auto;
    
}

.bottomSwiper2-box{
    width: 7rem;
    height: 3.64rem;
    box-sizing: border-box;
    overflow: hidden;

}


.bottomSwiper2 .title{
    font-weight: bold;
    font-size: .4rem;
    color: #1D2125;
    line-height: .56rem;
    margin-top: .14rem;
}
.bottomSwiper2 .authors{
    font-weight: 400;
    font-size: .32rem;
    color: #4F4F4F;
    margin-top: .1rem;
}

.bottomSwiper2 .subtitle{
    font-weight: 400;
    font-size: .28rem;
    color: #4F4F4F;
    margin-top: .2rem;
    line-height: .42rem;
}

.bottomSwiper2 .btn{
    width: 2.2rem;
    height: .64rem;
    border-radius: .04rem;
    background: #2176D3;
    font-weight: 400;
    font-size: .28rem;
    color: #FFFFFF;
    line-height: .64rem;
    text-align: center;
    margin-top: .26rem;
}



/* 右边 */


.joy-swiper-right{
    width: 7.9rem;
    box-sizing: border-box;
    overflow: hidden;
}



.joy-right-news-top a{
    margin-top:.42rem ;
}
.joy-right-news-top img{
    width: 2.7rem;
    height: 1.52rem;
    margin-right: .32rem;
    flex-shrink: 0;
}
.joy-right-news-top a div p:nth-child(1){
    font-weight: 400;
    font-size: .32rem;
    color: #1D2125;
}

.joy-right-news-top a div .authors{
    font-size: .28rem;
    margin-top: .24rem;
}

.joy-right-news-top .authors span:nth-child(1){
    width: .4rem;
    height: .4rem;
    margin-right: .12rem;
    background: url(../image/joy-per-icon.png) no-repeat 0  0 ;
    background-size: 100% 100%;
}



.joy-title{
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.joy-title a{
   
    margin-bottom: .04rem;
}
.joy-title a .cul-title-nav-icon{
    width: 3.2rem;
    height: .72rem;
    background: url(../image/joy-title-icon1.png) no-repeat 0  0 ;
    background-size: 100% 100%;
}
.joy-title a span:nth-child(2){
    flex-grow: 1;
    flex-basis:0; 
}

.joy-title a .cul-title-nav-icon2{
    background: url(../image/culturelist-title-more.png) no-repeat center 0;
    background-size: 100% 100%;
    width: .4rem;
    height: .4rem;
    margin-right: .06rem;
}




.joy-news-bottom .joy-title a{
    margin-top: .56rem;
}
.joy-news-bottom .joy-title a .cul-title-nav-icon{
    background: url(../image/joy-title-icon2.png) no-repeat 0  0 ;
    background-size: 100% 100%;
}


.joy-right-news-bottom a{
    font-weight: bold;
    color: #1658A0;
    margin-top: .44rem;
}
.joy-right-news-bottom div{
    font-weight: bold;
    color: #1658A0;
    flex-shrink: 0;
}

.joy-right-news-bottom p{
    font-weight: bold;
    color: #1D2125;
}


/* 中间推荐 */

.floor3{
    margin-top: 1rem;
}
.floor3>div{
    width: 5.4rem;
}
.floor3 img{
    width: 2.48rem;
    margin-right: .36rem;
    height: 3.3rem;
}
.floor3 .title{
    font-weight: bold;
    font-size: .32rem;
    color: #1D2125;
    line-height: .52rem;
}
.floor3 .subtitle{
    font-size: .28rem;
    color: #4F4F4F;
    line-height: .42rem;
    text-align: left;
    margin-top: .2rem;
}

.floor3 .authors{
    margin-top: 1.44rem;
}
.floor3 .authors span:nth-child(1){
    width: .4rem;
    height: .4rem;
    margin-right: .12rem;
    background: url(../image/joy-per-icon.png) no-repeat 0  0 ;
    background-size: 100% 100%;
}


/*  */
.floor4{
    margin-top: .8rem;
    margin-bottom: 2.4rem;
}

.floor4-left{
    width: 15.16rem;
}
.floor4-left-title{
    border-bottom: 1px solid rgba(0,0,0,0.07);
    margin-bottom: .6rem;
}
.floor4-left-title span{
    width: 1.8rem;
    text-align: left;
    margin-right: .76rem;
    padding-bottom: .24rem;
    font-size: .4rem;
    color: #4F4F4F;
    line-height: .48rem;
    cursor: pointer;
}

.floor4-left  .floor4-left-title .activity{
    border-bottom: .06rem solid #2176D3;
    color: #2176D3;
    font-weight: bold;
}

.news-item {
    margin-bottom: .92rem;
}
.news-item  img{
    width: 4.4rem;
    height: 2.48rem;
    margin-right: .6rem;
    flex-shrink: 0;
}
.news-item  .title{
    font-weight: 400;
    font-size: .36rem;
    color: #1D2125;
    line-height: .48rem;
    margin-bottom: .24rem;
    margin-top: .24rem;
}
.news-item  .subtitle{
    font-weight: 400;
    font-size: .26rem;
    color: #4F4F4F;
    line-height: .52rem;
    height: 1rem;
}

.news-item  .time{
    font-weight: 400;
    font-size: .26rem;
    color: #999999;
    line-height: .36rem;
    margin-top: .2rem;
}


.news-list{
    display: none;
}

.floor4-left>.activity{
    display: block;
}


.more{
    text-align: center;
    margin-top: 1.4rem;
    font-weight: 400;
    font-size: .28rem;
    color: #9B9B9B;
    line-height: .42rem;
}
/*  */


.floor4-right
{
    width: 8rem;
}

.floor4-right .joy-title a .cul-title-nav-icon{
    background: url(../image/joy-title-icon3.png) no-repeat 0  0 ;
    background-size: 100% 100%;
}


.floor4-right-news a{
    margin-top:.42rem ;
}
.floor4-right-news img{
    width: 2.7rem;
    height: 1.52rem;
    margin-right: .32rem;
    flex-shrink: 0;
}
.floor4-right-news a div p:nth-child(1){
    font-weight: 400;
    font-size: .32rem;
    color: #1D2125;
    line-height: .48rem;
}

.floor4-right-news a div .authors {
    font-size: .28rem;
    margin-top: .18rem;
}


.floor4-right-news a .li-icon{
   width:  .6rem;
   text-align: left;
   font-weight: 400;
    font-size: .4rem;
    color: #999999;
    flex-shrink: 0;
}


.floor4-right-news .authors span:nth-child(1){
    width: .4rem;
    height: .4rem;
    margin-right: .12rem;
    background: url(../image/joy-per-icon.png) no-repeat 0  0 ;
    background-size: 100% 100%;
}








@media (max-width: 651px) {


    .content {
        margin: 0 auto;
        box-sizing: border-box;
        background: url(../image/m-joy-bg.png) no-repeat center 0;
       
        background-size: 100% 3.6rem;
        margin-top: 1.2rem;
        overflow: hidden;
    }

    .joy-swiper {
        margin-top: 4rem;
        flex-wrap: wrap;
    }

    .joy-swiper-left{
        width: 100%;
        padding: 0 .32rem;
    }

    .leftSwiper{
        width: 100%;
        height: auto;
     
    }
    .leftSwiper .swiper-pagination{
        display: block;
    }

    .leftSwiper .swiper-pagination-bullet-active::after{
        display: none;
    }
    .leftSwiper {
        padding-bottom: .8rem;
    }
    .leftSwiper .swiper-pagination-fraction, .swiper-pagination-custom, .floor1 .swiper-horizontal > .swiper-pagination-bullets, .floor1 .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: .0;
        left: 0;
    }
    .leftSwiper .swiper-pagination {
        text-align: center;
    }
    .leftSwiper  .swiper-pagination-bullet {
        width: .12rem;
        height: .12rem;
        background:#BEBEBE;
        opacity:.7;
    }
    .leftSwiper .swiper-pagination-bullet-active {
        opacity: 1;
        background: #1658A0;
        width: .24rem;
        height: .12rem;
        border-radius: .12rem;
    }
 
    .leftSwiper .swiper-button-next, .leftSwiper .swiper-button-prev{
        display: none;
    }
    .leftSwiper a{
        width: 100%;
        height: 4.14rem;
        border-radius: .2rem;
    }
    .leftSwiper a img{
        border-radius: .2rem;
    }
    .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;
    }

    .joy-swiper-bottom{
        margin-top: .3rem;
        flex-wrap: wrap;
    }
    .bottomSwiper1-box{
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .bottomSwiper1{
        
    }
    .bottomSwiper1 .swiper-button-next, .bottomSwiper1 .swiper-button-prev{
        display: none;
    }
    .joy-swiper-right{  
        width: 100%;
        padding: 0 .32rem;

    }
    .joy-news-top{
        padding: .32rem 0;
    }


    .floor4{
        flex-wrap: wrap;
    }


    .floor4-left{
        width: 100%;
        padding: 0 .32rem;
    }

    .more{
        margin-top: .32rem;
        margin-bottom: .32rem;
    }

    .floor4-right{
        width: 100%;
        padding:  .32rem;
    }

    .floor4-left-title span{
        width: auto;
    }
    .news-item{
        padding-bottom: .38rem;
        border-bottom: .02rem solid #F6F6F6;
        margin-bottom: .22rem;
    }
    .news-item img {
        width: 3rem;
        height: 1.64rem;
        margin-right: .2rem;
        border-radius: .08rem;
    }
    .news-item .time{
        display: none;
    }
    .news-item .title {
        font-weight: 400;
        font-size: .28rem;
        color: #1D2125;
        line-height: .32rem;
    }
    .news-item .flex-fs-c-no{
        margin-top: 0;
    }
    .bottomSwiper1{
        width: 100%;
        height: auto;
    }
    .bottomSwiper1-box .bottomSwiper1 .swiper-item a,.bottomSwiper1-box .bottomSwiper1 .swiper-slide{
        height: auto;
    }

/*  */
}

@media (max-width: 345px) {
    .leftSwiper a{
        height: 3.2rem;
    }
}