/* iphone5 */
/* top-block CSS */
.container{margin: 0 0.6rem;padding-bottom:6.5rem;}

/*navbar*/
.top-box{background-color:#FFFFFF;box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px -10px;}
.navbar-box{padding: 0.6rem;display:flex;justify-content: space-between;align-items: center}
.navbar-box .img{display:flex;}
.nav-avatar,.nav-search{display:flex;height:100%}
.nav-avatar img,.nav-search img{display:flex;width:2.3rem;border-radius:8px}
.nav-title h3{font-weight:100}

/*swiper*/
.banner-block{margin-top:1rem}
.banner-box{border-radius:1rem}
.banner-box img{width:100%;display: flex;border-radius:1rem;}

/*entrance*/
.entrance-box{margin-top:1rem;background:#FFFFFF;display:flex;align-items:center;justify-content:space-around;border-radius:1rem;padding:1rem 0;box-shadow:rgb(0 0 0 / 3%) 0 1px 20px}
.entrance-box .item{display:flex;flex-direction: column;justify-content:center;align-items:center}
.entrance-box .item img{width:100%;margin-bottom:0.5rem}

/*recommend*/
.recommend-block{margin-top:1.5rem}
.recommend{margin:1rem 0}
.recommend .swiper-slide img{display:flex;width: 100%}
.recommend .swiper-slide{position: relative;width:60%;text-align: center;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;transition: 300ms;transform: scale(0.8);}
.recommend .swiper-slide-active,.swiper-slide-duplicate-active{transform: scale(1);}
.recommend .swiper-slide .rec-play-icon{position: absolute;width:3rem}
.recommend .swiper-slide .rec-poster{border-radius:1rem}

/*block title*/
.block-title{display: flex;align-items:center;justify-content: space-between;}
.block-title .b-title{display:flex;align-items:center}
.block-title .b-title img{width:1.5rem;margin-left:0.3rem}
.block-title .b-title{font-size:1.2rem}
.block-title .b-more{display: flex;align-items: center;font-size:0.8rem;color:#c4c4c4}
.block-title .b-more img{width:0.5rem;margin-right:0.5rem}

/*movie block*/
.movie-block{margin-top:2rem}
.movie-block .block-item{background:white;border-radius:1rem;padding:0.6rem}
.movie-block .block-item .movie-box .movie-list{margin-top:0.5rem}
.movie-block .block-item .movie-box .movie-list ul{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between}
.movie-block .block-item .movie-box .movie-list .movie-poster-box img{border-radius:0.4rem;display:flex;width:100%;height:37.6vw;object-fit:cover;}
.movie-block .block-item .movie-box .movie-list .movie-poster-box{position:relative}
.movie-block .block-item .movie-box .movie-list .movie-poster-box p{position:absolute;left:0.3rem;top:0.2rem;background: #FD4953;color:white;padding:0.2rem 0.5rem;border-radius:0.3rem;font-size:0.5rem}
.movie-block .block-item .movie-box .movie-list ul li{flex-basis:calc(33.33% - 10px);margin:0.5rem 0}
.movie-block .block-item .movie-box .movie-list ul li a p{margin-top:0.3rem;font-size:0.888rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center}

/* extra code for screens in different size */
/* iphone6/7/8 */
@media screen and (min-device-width:360px) and (max-device-width:667px){
    .container{margin: 0 0.6rem;padding-bottom:7rem;}
}
/* iphone6/7/8 Plus */
@media screen and (min-device-width:414px) and (max-device-width:736px){
    .container{margin: 0 0.6rem;padding-bottom:7rem;}
}
/* ipad */
@media screen and (min-device-width:768px){
    .container{margin: 0 0.6rem;padding-bottom:7rem;}
}