/* rem移动适配的完整流程
1.要求设计师按10rem的宽来设计设计稿（14.4rem）
2.我们按照设计稿1:1还原即可（px单位来书写）
3.将px单位转换成对应rem单位，来实现不同移动端屏幕的适配
我们就需要知道，对应的屏幕尺寸下的75px的大小
10rem，75px的大小，我们想要将当前页面分成多少份
分成10份，每一份就75px大小，10rem/10=1rem，75px=1rem

px/75px =得到px对应的rem值
比如：0.6667rem/1rem=50px

用插件：px to rem,
alt+z

4.利用js来自动计算不同屏幕尺寸下的1rem大小
*/


/* header css start */
.header {
    height: 0.6667rem;
    /* background-color: khaki; */
    display: flex;
    align-items: center;
    margin: 0.24rem auto 0;
    width: 10rem;
}

.header .logo-wrap {
    /* border: 0.0133rem solid blue; */
    flex-grow: 1;
    margin-left: 0.3867rem;
}

.header .logo-wrap .logo-img {
    width: 1.9467rem;
}

.header .search {
    /* border: 0.0133rem solid blue; */
    margin-right: 0.6533rem;
}

.header .search .search-img {
    width: 0.5067rem;
}

.header .login-wrap {
    /* border: 0.0133rem solid blue; */
    margin-right: 0.56rem;
}

.header .login-wrap .login-img {
    width: 0.6133rem;
}

.header .download {
    /* border: 0.0133rem solid blue; */
    width: 1.92rem;
    height: 0.64rem;
    color: #fff;
    background-color: #ff9f00;
    border-radius: 0.1067rem;
    text-align: center;
    line-height: 0.64rem;
    margin-right: 0.2533rem;
}

/* header css end */



/* nav css start */
.nav {
    /* min-height: 1.3333rem; */
    /* background-color: khaki; */
    border-bottom: var(--border-width) solid #f3f3f3;
    margin: 0.6rem auto 0;
    padding-left: 0.4rem;
    width: 10rem;
}

.nav .swiper {
    width: 100%;
    /* height: 1.3333rem; */
}

.nav .swiper .swiper-slide {
    /* border: 0.0133rem solid red; */
}

.nav .swiper-slide a {
    display: inline-block;
    color: #6b6b6b;
    font-size: 0.3733rem;
    padding-bottom: 0.28rem;
    border-bottom: 0.0267rem solid transparent;
}

.nav .swiper-slide a.active {
    color: #ff9f00;
    border-color: #ff9f00;
}

/* nav css end */

/* banner css start */
.banner {
    width: 9.4933rem;
    height: 3.1467rem;
    margin: 0.2533rem auto 0.24rem;
    background-color: khaki;
}

.banner .swiper {
    /* width: 100%; */
    height: 3.1467rem;
}

.banner .swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .swiper-pagination-bullet {
    width: 0.2rem;
    height: 0.08rem;
    border-radius: 0rem;
    background-color: #fff;
}

/* banner css end */



/* menu css start */
.menu {
    width: 9.4933rem;
    min-height: 4.1867rem;
    background-color: #f7f7f7;
    margin: 0 auto;
    padding-bottom: 0.4133rem;
    border-radius: 0.1067rem;
    margin-bottom: 0.24rem;
}

.menu ul {
    display: flex;
    flex-wrap: wrap;
    /*放不下时换行*/
}

.menu ul li {
    width: 20%;
    min-height: 1.3333rem;
    /* border: 0.0133rem solid red; */
    padding-top: 0.4rem
}

.menu ul li a {
    /* border: 0.0133rem solid blue; */
    display: block;
    text-align: center;
    color: #6b6b6b;
}

.menu ul li img {
    width: 1.0133rem;
    height: 1.0133rem;
}

.menu ul li a p {
    margin-top: 0.1733rem;
}

/* menu css end */



/*  main-tabs css start  */
.main {
    box-sizing: border-box;
    /* background-color: khaki; */
    /* min-height: 10.6667rem; */
    /* border: 0.0133rem solid red; */
}

.tabs {
    background-color: #f7f7f7;
    border-radius: 0.1067rem;
    margin-bottom: 0.24rem;
}

.tabs .tab-header {
    height: 1.3867rem;
    /* background-color: #f7f7f7; */
    /* border: 0.0133rem solid red; */
    display: flex;
    align-items: center;
    padding-left: 0.16rem;
}

.tabs .tab-header .tab-header-item {
    border: 0.0267rem solid #6b6b6b;
    width: 1.5733rem;
    height: 0.5867rem;
    line-height: 0.5867rem;
    font-size: 0.2933rem;
    text-align: center;
    color: #6c6c6c;
    border-radius: 0.2933rem;
    margin-right: 0.3867rem;
}

.tabs .tab-header .tab-header-item.active {
    border: 0.0267rem solid #ff9f00;
    color: #ff9f00;
}

.tabs .tab-content {
    /* min-height: 4rem; */
    /* background-color: red; */
}

.tabs .tab-content .tab-content-item {
    /* min-height: 4rem; */
    /* border: 0.0133rem solid blue; */
    display: none;
}

.tabs .tab-content .tab-content-item .swiper {
    height: 4rem;
    /*后面要去掉*/
}

.tabs .tab-content .tab-content-item .swiper .swiper-slide {
    height: 4rem;
    /* background-color: #fff; */
    /* border: 0.0133rem solid red; */
}

/* 公共卡片样式 */
.common-card {}

.common-card .img {
    width: 100%;
    height: 2.5867rem;
    background-color: khaki;
    position: relative;
}

.common-card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.common-card .img .card-info {
    width: 100%;
    height: 0.7467rem;
    /* background-color: blue; */
    padding: 0.2rem 0 0 0.1867rem;
    position: absolute;
    left: 0;
    bottom: 0;
    /* border: 0.0133rem solid red; */
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: space-between;
}

.common-card .img .card-info span {
    /* border: 0.0133rem solid red; */
    color: #fff;
    padding-left: 0.5733rem;
}

.common-card .img .card-info .play-count {
    background-image: url(../images/icon-play@2x.png);
    background-repeat: no-repeat;
    background-size: 0.4133rem 0.36rem;
    margin-left: 0.1867rem;
}

.common-card .img .card-info .number {
    background-image: url(../images/icon-nav@2x.png);
    background-repeat: no-repeat;
    background-size: 0.4133rem 0.36rem;
    margin-right: 0.16rem;
}

.common-card p.title {
    color: #000;
    line-height: 0.48rem;
    height: 0.96rem;
    margin-top: 0.1067rem;
    margin-bottom: 0.2533rem;
}

/*  main-tabs css end  */




/* recommend-list css start */
.recommend-list {
    /* min-height: 2.6667rem; */
    background-color: #f7f7f7;
    border-radius: 0.1067rem;
    margin-bottom: 0.24rem;
}

.recommend-list ul li {
    /* border: 0.0133rem solid red; */
    padding: 0.2667rem 0rem 0.2667rem 0rem;
    margin: 0rem 0.2667rem;
    border-bottom: var(--border-width) solid #e6e6e6;
}

.recommend-list ul li a {
    display: flex;
    align-items: center;
}

.recommend-list ul li:last-child {
    border-bottom: none;
}

.recommend-list ul li .img-wrap {
    width: 1.0133rem;
    height: 1.0133rem;
    background-color: khaki;
    margin-right: 0.24rem;
    flex-shrink: 0;
    /*不压缩*/
}

.recommend-list ul li .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommend-list ul li .info {
    /* min-height: 1.0133rem; */
    /* background-color: aqua; */
    flex-grow: 1;
    min-width: 0;
}

.recommend-list ul li .info .title {
    font-size: 0.3467rem;
    color: #FF9F00;
    font-weight: 400;
}

.recommend-list ul li .info .desc {
    color: #000;
    margin-top: 0.1333rem;
}

.recommend-list ul li .play-button {
    width: 0.5867rem;
    height: 0.5867rem;
    /* background-color: blueviolet; */
    background-image: url(../images/icon-play-@2x.png);
    background-size: cover;
    margin-right: 0.2rem;
    margin-left: 0.3467rem;
    flex-shrink: 0;
    /*不压缩*/
}

/* recommend-list css end */


/* history css start */
.history {
    min-height: 2.6667rem;
    /* background-color: #f7f7f7; */
    border-radius: 0.1067rem;
    margin-bottom: 0.24rem;
}

.history .history-header {
    height: 1.0933rem;
    /* background-color: khaki; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history .history-header .title {
    margin-left: 0.1467rem;
    font-size: 0.4267rem;
    color: #000;
}

.history .history-header .more {
    margin-right: 0.2667rem;
    font-size: 0.32rem;
    color: #b9b9bd;
    /* border: 0.0133rem solid red; */
    padding-right: 0.4rem;
    background-image: url(../images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 0.1467rem;
}

.history .history-list .swiper {
    /* height: 4rem; */
}

.history .history-list .swiper .swiper-slide {
    width: 2.2667rem;
    /* min-height: 1.3333rem; */
    /* background-color: #fff; */
    /* border: 0.0133rem solid red; */
    border-radius: 0.1067rem;

}

.history .swiper-slide .img-wrap {
    width: 2.2667rem;
    height: 3.04rem;
    /* background-color: blue; */
}

.history .swiper-slide .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history .swiper-slide .title {
    color: #000;
    line-height: 0.48rem;
    height: 0.96rem;
    margin-top: 0.1333rem;
    margin-bottom: 0.1467rem;
}

/* history css end */


/* information-list css start */
.information-list {
    /* min-height: 1.3333rem; */
    /* background-color: khaki; */
}

.information-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.information-list ul li {
    width: 4.6133rem;
    /* min-height: 1.3333rem; */
    /* border: 0.0133rem solid red; */
}

.information-list .common-card p.title {
    margin-bottom: 0.2267rem;
}

/* information-list css end */

/* tabbar css start */
.tabbar {
    width: 10rem;
    height: 1.32rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    box-shadow: 0 0 0.0267rem #ddd;
    left: 50%;
    transform: translateX(-50%);
}

.tabbar ul {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.52rem 0rem;
}

.tabbar ul li a {
    display: flex;
    flex-direction: column;
    color: #000;
}

.tabbar ul li.active a {
    color: #ff9f00;
}

.tabbar ul li .icon {
    height: 0.4933rem;
    /* border: 0.0133rem solid red; */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 0.4933rem;
    margin-bottom: 0.1467rem;
}

.tabbar ul li .icon1 {
    background-image: url(../images/f-icon1-active@2x.png);
}

.tabbar ul li .icon2 {
    background-image: url(../images/f-icon2@2x.png);
}

.tabbar ul li .icon3 {
    background-image: url(../images/f-icon3@2x.png);
}

.tabbar ul li .icon4 {
    background-image: url(../images/f-icon4@2x.png);
}

.tabbar ul li.add a {
    display: block;
    width: 1.04rem;
    height: 1.0133rem;
    background-color: #ff9f00;
    border-radius: 28%;
    background-image: url(../images/f-icon-add.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.4rem 0.4rem;
}

/* tabbar css end */