/*index*/

body {
    margin-bottom: 70px;
}

.bgwhite {
    background-color: #fff;
}

.header {
    width: 100%;
    text-align: center;
    height: 44px;
    padding: 8px 0;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    border-bottom: 1px solid #f9f9f9;
    box-sizing: border-box;
}

.header h1 {
    font-size: 18px;
}

.header img {
    width: 114px;
    height: 27px;
}

.header .back-btn {
    width: 40px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.header .back-btn:after {
    content: "";
    display: block;
    height: 100%;
    background: url(../images/back.png) center no-repeat;
    background-size: 11px 17px;
}

.search-box {
    padding-top: 0.933vw;
    margin: 0 4.000vw 0 4.000vw;
    box-sizing: border-box;
    position: relative;
}

.search-box>a {
    display: block;
    position: relative;
}
.search-box a img{
    width: 3vw;
    height: 3vw;
    position: absolute;
    top: 35%;
    right: 20px;
    z-index: 999;
}

.search-box input {
    width: 100%;
    font-size: 2.667vw;
    padding: 2vw 2.667vw 1.733vw 2.667vw;
    box-sizing: border-box;
    border-radius: 4vw;
    background-color: #fff;
    color: #fff;
    border: 1px solid #FF7E2B;
}
.lunbo{
    background: #fff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.banner {
    padding-bottom: 10vw;
    margin: 4.800vw 4vw 0 4vw;
    position: relative;
    display: flex;
    justify-content: space-around;

}

.swiper-container {
    width: 100%;
    height: 100%;
    /* height: 46.000vw; */
    height: 51.778vw;
    border-radius: 4vw;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
}
.swiper-pagination{
    width: 30%;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0;
    padding: 3.600vw 0;
}

.navbar {
    padding: 15px 0;
    display: flex;
    display: -webkit-flex;
    background-color: #fff;
    border-bottom: 2px solid #f5f5f5;
}

.navbar .nav-item {
    flex: 1;
    text-align: center;
    float: left;
    width: 25%;
}

.navbar .nav-item>a {
    display: block;
}

.navbar .nav-item img {
    width: 60px;
    height: 60px;
}

.navbar .nav-item p {
    font-size: 12px;
    color: #9B9B9B;
    margin-top: 5px;
}

.title-box {
    background: #fff;
    padding: 5.333vw 5.333vw 5.333vw 0;
    /* margin: 10px 0 10px 15px; */
    margin: 0 4vw;
    
    height: 18px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    z-index: 1;

/* border-radius: 5px; */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.line_s{
    width: 2px;
    height: 20px;
    background: #E13430;
    /* border-left: 4px solid #E13430; */
}

.title-box h2 {
    font-size: 16px;
    color: #3B424C;
    line-height: 18px;
    padding-left: 4px;
}

.recommend-courses {
    padding: 0 5px 5px;
    /* background-color: #fff; */
}

.courses-list {
    /* margin-right: -6px; */
    margin-left: 6px;
}
.courses-list li {
    width: 46%;
    float: left;
    box-sizing: border-box;
    margin: 0 1.5%;
    /* margin-top: 2.133vw; */
    margin-bottom: 8px;
    background: #fff;
    height: 54.267vw;
    position: relative;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 1;
}
.courses-list li .orange_img{
    width: 90%;
    height: 50px;
    margin-left: 5%;
    background: #ff7e2b;
    position: absolute;
    top: -1.333vw;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 0;
}
.courses-list li .dd1{
    position: absolute;
    top: 3vw;
    left: 3vw;
    width: 5px;
    height: 5px;
    border-radius: 10px;
    background-color: #fff;
    z-index: 9;
}
.courses-list li .dd2{
    position: absolute;
    top: 3vw;
    right: 3vw;
    width: 5px;
    height: 5px;
    border-radius: 10px;
    background-color: #fff;
    z-index: 9;
}
.courses-list li .pic {
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* border: #ff2b41 1px solid; */
    overflow: hidden;
    height: 30vw;
}

.courses-list li .pic::before {
    content: "";
    display: block;
    padding-top: 62%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    height: 30vw;
}

.courses-list li .pic img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 2;
    height: 100%;
    object-fit:cover;
}

.courses-list li .courses-info {
    padding: 0 2.133vw;
}

.courses-list li .courses-info h2 {
    font-size: 3.5vwvw;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #2B2B2B;
    margin-top: 1.133vw;
    width: 100%;
    /* 超出隐藏显示省略号 单行 */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.courses-list li .courses-info .jianjie{
    display: flex;
    font-size: 2.400vw;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #7F7F7F;
    margin-top: 1.133vw;
}
.courses-list li .courses-info .jianjie span{
    width: 25%;
}
.courses-list li .courses-info .jianjie p{
    width: 75%;
    /* 超出隐藏显示省略号 两行 */
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.courses-list li .courses-info .sjrq{
    font-size: 2.133vw;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #9D9D9D;
    position: absolute;
    right: 2.133vw;
    bottom: 1.5vw;
}

/* .courses-list li .courses-info p {
    font-size: 10px;
    color: #4a4a4a;
} 

.courses-list li .courses-info p span {
    display: inline-block;
    vertical-align: middle;
}

.courses-list li .courses-info p i.people-icon {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 12px;
    background: url(../images/people-icon.png) center no-repeat;
    background-size: cover;
    margin-right: 5px;
}*/


/*热点资讯*/

.hotspot-info-box {
    background-color: #fff;
    margin-bottom: 20px;
}

.title-box>a {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 12px;
    color: #9B9B9B;
}


/*hotspot-list*/

.hotspot-list {
    margin: 0 10px 10px;
    border: 1px solid #EBE7E7;
    box-shadow: 0 0 4px 0 #D2CFCF;
    border-radius: 4px;
}

.hotspot-item {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #e0e0e0;
}

.hotspot-item .pic {
    width: 168px;
    height: 110px;
    padding-right: 12px;
}

.hotspot-item .pic img {
    width: 100%;
    height: 100%;
}

.hotspot-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 20px;
    height: 110px;
    overflow: hidden;
    font-size: 12px;
    position: relative;
}

.hotspot-info .title {
    font-size: 14px;
    margin-bottom: 4px;
}

.hotspot-info .desc {
    font-size: 12px;
}

.hotspot-info .hotspot-con {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 10px;
    color: #9B9B9B;
    display: flex;
    justify-content: space-between;
}

.hotspot-info .hotspot-con .reading {
    padding-left: 22px;
    background: url(../images/eye-icon.png) left center no-repeat;
}

.hotspot-list .more-btn {
    display: block;
    font-size: 14px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #9B9B9B;
}


/*校区*/

.school-list {
    margin: 0 10px 10px;
    border: 1px solid #EBE7E7;
    box-shadow: 0 0 4px 0 #D2CFCF;
    border-radius: 4px;
}

.school-list .school-item {
    display: inline-block;
    width: 33.3%;
    height: 100px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.school-list .school-item .school-img {
    width: 75px;
    height: 60px;
    margin: 5px auto;
    background: url(../images/school.png) no-repeat;
    background-size: 225px 180px;
}

.school-list .school-item .school-img.shanghai {
    background-position: 0 0;
}

.school-list .school-item .school-img.beijin {
    background-position: -75px 0;
}

.school-list .school-item .school-img.hangzhou {
    background-position: -150px 0;
}

.school-list .school-item .school-img.wuxi {
    background-position: 0 -60px;
}

.school-list .school-item .school-img.nanjing {
    background-position: -75px -60px;
}

.school-list .school-item .school-img.shenzheng {
    background-position: -150px -60px;
}

.school-list .school-item .school-img.guangzhou {
    background-position: 0 -120px;
}

.school-list .school-item .school-img.suzhou {
    background-position: -75px -120px;
}

.school-list .school-item:nth-child(3n) {
    border-right: none;
}

.school-list .school-item .school-name {
    text-align: center;
}


/*底线插件*/

.underline {
    border-top: 1px solid #e0e0e0;
    text-align: center;
    margin: 20px 0 0;
    height: 20px;
}

.underline .desc {
    margin-top: -9px;
    background-color: #fff;
    display: inline-block;
    padding: 0 10px;
    font-size: 10px;
    color: #9B9B9B;
}

.footer {
    width: 100%;
    /* height: 50px; */
    height: 14vw;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: flex;
    justify-content: space-between;
}

.footer .footer-item {
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
}

.footer .footer-item>a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    /* padding: 5px 0 0; */
    padding: 0.8vw 0 0;
    font-size: 0;
}

.footer .footer-item .icon {
    display: inline-block;
    /* width: 27px;
    height: 25px; */
    width: 6vw;
    height: 5.5vw;
    /* width: 1.6875rem;
    height: 1.5625rem; */
}



.footer .footer-item .icon-home {
    background: url(../images/1sy.png) center no-repeat;
    background-size: cover;
}

.footer .footer-item .icon-allcourses {
    background: url(../images/1jpkc.png) center no-repeat;
    background-size: contain;
}

.footer .footer-item .icon-Measurement {
    background: url(../images/1xwzx.png) center no-repeat;
    background-size: contain;
}

.footer .footer-item .icon-center {
    background: url(../images/1wd.png) center no-repeat;
    background-size: contain;
}

.footer .footer-item .nav-home.active .icon-home {
    background: url(../images/1sy_gl.png) center no-repeat;
    background-size: cover;
}

.footer .footer-item .nav-tags.active .icon-allcourses {
    background: url(../images/1jpkc_gl.png) center no-repeat;
    background-size: cover;
}

.footer .footer-item .nav-courses.active .icon-Measurement {
    background: url(../images/1xwzx_gl.png) center no-repeat;
    background-size: contain;
}

.footer .footer-item .nav-center.active .icon-center {
    background: url(../images/1wd_gl.png) center no-repeat;
    background-size: contain;
}

.footer .footer-item .nav-home.active p {
    color: #ff2b41;
    font-weight: bold;
}

.footer .footer-item .nav-tags.active p {
    color: #ff2b41;
    font-weight: bold;
}

.footer .footer-item .nav-courses.active p {
    color: #ff2b41;
    font-weight: bold;
}

.footer .footer-item .nav-center.active p {
    color: #ff2b41;
    font-weight: bold;
}

.footer .footer-item p {
    /* font-size: 10px; */
    font-size: 3.5vw;
    color: #AEB1B5;
    /* margin-top: 2px; */
    margin-top: 0.5vw;
}

.yuyue {
    /* width: 35px; */
    width: 10vw;
    /* margin-bottom: 10px; */
    margin-bottom: 3.6vw;
    border-radius: 50px;
    /* line-height: 61px; */
    /* padding-top: 10px; */
    padding-top: 3.4vw;
    /* font-size: 12px; */
    font-size: 4vw;
    box-sizing: border-box;
    text-align: center;
    display: block;
    text-decoration: none;
}

.yuyue img {
    /* width: 50px; */
    width: 12vw;
}

.yuyue span {
    color: white;
    /* width: 35px; */
    display: block;
    /* font-size: 12px; */
    font-size: 4vw;
}

.zhezhao {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
}

.erweima {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* width: 240px;
    height: 240px; */
    width: 46vw;
    height: 47vw;
    padding: 10px;
    display: none;
    z-index: 99999;
    background-color: #fff;
    font-size: 4vw;
}

.erweima img {
    display: block;
    width: 80%;
    /* height: 100%; */
    margin: 0 auto;
}


/*全部课程*/

.nav-scroll {
    width: 100%;
    background-color: #fff;
    z-index: 9;
    border-bottom: 1px solid #ccc;
    padding: 2vw;
    margin-bottom: 5px;
    position: sticky;
    top: 0;
}

.nav-scroll.fixed {
    position: fixed;
    top: 0px;
    left: 0;
}

.nav-type {
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
    white-space: nowrap;
}

.nav-type li {
    /* display: inline-block;
    width: auto;
    text-align: center;
    margin: 0 12px;
    box-sizing: border-box;
    font-size: 14px;
    position: relative; */
    border: 1px solid #ff2b41;
    color: #ff2b41;
    border-radius: 20px;
    padding: 2px 10px;
    margin: 0 11px;
    margin-bottom: 15px;
    position: relative;
}

.nav-type li a {
    display: block;
    color: #ff2b41;
} 
/* .nav-type li.active:after {
    content: "";
    background-color: #E13430;
    width: 14px;
    height: 3px;
    border-radius: 3px;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
} */

.nav-type li.active {
    background: #ff7e28;
    color: #fff;
}
.nav-type li.active a {
    color: #fff;
}


.classify-box {
    margin: 0 10px;
    padding-bottom: 10px;
}

.classify-box.mart {
    margin-top: 41px;
}

.classify-box .no-class {
    display: none;
    margin: 50% auto 0;
    text-align: center;
    font-size: 14px;
    color: #A2A5AA;
}

.classify-box li {
    /* background: #FFFFFF; */
    /* box-shadow: 0 0 4px 0 #D5D9D8; */
    border-radius: 2px;
    margin-bottom: 8px;
}

.classify-box li>a {
    display: block;
    /* background: #f00; */
    /* height: 240px; */
    height: 270px;
    position: relative;
}

.classify-box li .pic {
    /* width: 170px;
    height: 105px;
    float: left; */
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.classify-box li .pic img {
    width: 100%;
    height: 53.33vw;
    border-radius: 5px;
    /* 图片不拉伸 等比缩放 */
    object-fit:cover;
}

.classify-box li .courses-info {
    position: absolute;
    padding-top: 10px;
    box-sizing: border-box;
    /* background: #fff; */
    background: #ffffffd7;
    width: 80%;
    height: 24.800vw;
    padding: 3vw 2vw 2vw;
    /* top: 71%; */
    bottom: -12.4vw;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.classify-box li .courses-info h2 {
    font-size: 3.200vw;
font-family: Adobe Heiti Std;
font-weight: normal;
color: #2B2B2B;
}

.classify-box li .courses-info>p {
    font-size: 2.4vw;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #7F7F7F;
    width: 100%;
    /* 超出隐藏显示省略号 单行 */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.classify-box li .courses-info .watch-people {
    font-size: 10px;
    color: #A2A5AA;
    margin-top: 5px;
}

.classify-box li .courses-info .watch-people i.icon-people {
    /* display: inline-block; */
    vertical-align: middle;
    width: 14px;
    height: 12px;
    background: url(../images/people-icon.png) center no-repeat;
    background-size: cover;
    margin-right: 5px;
}

.classify-box li .courses-info .watch-people{
    display: flex;
    justify-content: space-between;
}

.classify-box li .courses-info .watch-people span {
    display: inline-block;
    vertical-align: middle;
}

.classify-box li .courses-info .price {
    font-size: 10px;
    /* position: absolute; */
    right: 10px;
    bottom: 10px;
    color: #FF7E2B;
}

.classify-box li .courses-info .price.buyed {
    color: #B8E986;
}


/*我的课程*/

.mycourses-box {
    width: 100%;
    height: 36px;
    line-height: 36px;
    background-color: #fff;
    padding: 0 20%;
    box-sizing: border-box;
    z-index: 9;
}

.mycourses-box.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

.mycourses-box>.nav-item {
    float: left;
    width: 50%;
    text-align: center;
    position: relative;
}

.mycourses-box>.nav-item.active:after {
    content: "";
    display: block;
    width: 14px;
    height: 3px;
    border-radius: 3px;
    background-color: #E13430;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.mycourses-list {
    margin-top: 10px;
}


/*全部订单*/

.allorder-list {
    margin-top: 10px;
}

.allorder-list li .courses-info h2 {
    font-size: 10px;
}

.classify-box li .courses-info .order-num {
    font-size: 10px;
    color: #999;
}

.classify-box li .courses-info .pay-status {
    color: #D0011B;
}

.classify-box li .courses-info .payed {
    color: #7ED321;
}

.noorder {
    width: 208px;
    text-align: center;
    margin: 10% auto 0;
}

.noorder img {
    width: 208px;
    height: 172px;
}

.noorder p {
    font-size: 16px;
    color: #9B9B9B;
    margin-top: 20px;
    margin-bottom: 12px;
}

.noorder a {
    font-size: 16px;
    color: #E13430;
}


/*我的 个人中心*/

.my-info {
    padding: 30px 15px;
}

.my-info .avatar {
    width: 72px;
    height: 72px;
    float: left;
}

.my-info .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 2px #ccc;
}

.my-info .myinfo {
    margin-left: 85px;
    height: 72px;
    position: relative;
}

.my-info .myinfo .user-name {
    margin-bottom: 10px;
}

.my-info .myinfo .bind-btn {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #E13430;
    box-shadow: 0 0 4px 0 #C8C8C8;
    border-radius: 2px;
    color: #fff;
}

.myinfo .arrow-icon {
    display: block;
    width: 7px;
    height: 13px;
    background: url(../images/r-arrow.png) center no-repeat;
    background-size: 7px 13px;
    position: absolute;
    right: 10px;
    top: 30%;
}

.myinfo {
    position: relative;
    display: flex;
    padding-left: 21px;
}

.my-info1 {
    padding: 20px 0 0;
    text-align: center;
}

.my-info1 .myinfo .userImg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 0 0 2px #ccc;
}

.my-info1 .myinfo .user-name {
    margin-top: 5px;
}

.my-info1 .myinfo .phone-num {
    font-size: 12px;
    color: #9B9B9B;
}

.center-con {
    margin: 20px 0;
    margin-left: 15px;
}

.center-list li {
    padding: 18px 0 0;
    height: 36px;
}

.center-list li .icon {
    float: left;
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
}

.center-list li .icon1 {
    background: url(../images/1.png) center no-repeat;
    background-size: cover;
}

.center-list li .icon2 {
    background: url(../images/2.png) center no-repeat;
    background-size: cover;
}

.center-list li .icon3 {
    background: url(../images/3.png) center no-repeat;
    background-size: cover;
    position: relative;
}

.center-list li .icon3.msg:after {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #E13430;
    right: -3px;
    top: -3px;
}

.center-list li .icon4 {
    background: url(../images/4.png) center no-repeat;
    background-size: cover;
}

.center-list li .icon5 {
    background: url(../images/5.png) center no-repeat;
    background-size: cover;
}

.center-list li .icon6 {
    background: url(../images/6.png) center no-repeat;
    background-size: cover;
}

.center-list li>a {
    display: block;
}

.center-list li p {
    font-size: 16px;
    font-weight: bold;
    padding: 2px 0 12px;
    margin-left: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.center-con .signout {
    padding: 32px 0;
}

.center-con .signout a {
    display: block;
    width: 210px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #D8D8D8;
    border-radius: 2px;
    color: rgba(0, 0, 0, 0.87);
    font-size: 16px;
    margin: auto;
}


/*个人资料*/

.modular {
    background: #FFFFFF;
    border: 1px solid #ECE8E8;
    box-shadow: 0 0 4px 0 #D2CFCF;
    border-radius: 2px;
    margin: 18px 14px;
}

.button {
    width: 100%;
    height: 70px;
    padding: 11px 14px 14px;
    box-sizing: border-box;
    background-color: #fff;
}

.button-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
}

.button a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 45px;
    background: #E13430;
    box-shadow: 0 2px 4px 0 #C8C8C8;
    border-radius: 2px;
    text-align: center;
    font-size: 16px;
    border-radius: 9px;
    color: #fff;
}

.data-contaniner {
    margin-top: 15px;
}

.avatar-box {
    text-align: center;
    width: 80px;
    margin: auto;
    position: relative;
}

.avatar-box .avatar {
    width: 72px;
    height: 72px;
    margin: auto;
    border-radius: 50%;
    background: url(../images/avatar.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.avatar-box p {
    font-size: 12px;
    color: #9B9B9B;
    margin-top: 5px;
}

.avatar-box .modify {
    width: 72px;
    height: 36px;
    border-radius: 0 0 36px 36px;
    background: rgba(0, 0, 0, 0.54);
    color: #fff;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 4;
}

.data-box {
    padding-left: 15px;
}

.data-box .data-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.data-box .data-item:last-child {
    border-bottom: none;
}

.data-item .data-item-txt {
    width: 70px;
    float: left;
}

.data-item .data-item-info {
    margin-left: 70px;
}

.data-item .data-item-info input {
    width: 90%;
}

.data-item .data-item-info select {
    border: none;
}

.data-item .data-item-info .interest-tags {
    font-size: 0;
}

.data-item .data-item-info .tag {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    margin-bottom: 8px;
    text-align: center;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    background: #d8d8d8;
}

.data-item .data-item-info .tag:nth-child(even) {
    margin-right: 0;
}

.data-item .data-item-info .active.tag-orange {
    background: #F3AF70;
}

.data-item .data-item-info .active.tag-yellow {
    background: #F8D34E;
}

.data-item .data-item-info .active.tag-wathet {
    background: #6CD7D1;
}

.data-item .data-item-info .active.tag-pink {
    background: #EB5F99;
}

.data-item .data-item-info .active.tag-green {
    background: #A6EA52;
}

.data-item .data-item-info .active.tag-red {
    background: #EC6169;
}

.data-item .data-item-info .active.tag-purple {
    background: #E699EC;
}

.data-item .data-item-info .active.tag-blue {
    background: #57B5F3;
}


/*头像上传*/

.phone-clip {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #ccc;
    z-index: 10;
}


/* 高清显示屏(设备像素比例大于等于3)使用3倍图  iphone6 plus*/

@media only screen and (-webkit-min-device-pixel-ratio:3) {
    /*.header{background: url(../images/Group3x.png) left center no-repeat;background-size: cover;}*/
}


/*顶部栏*/

.header-top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f9f9f9;
    position: relative;
    background-color: #fff;
    /* display: none; */
}

.header-top img {
    margin: auto;
    display: block;
    height: 27px;
    padding-top: 8px;
}

.header-top h1 {
    font-size: 20px;
    color: #4a4a4a;
    text-align: center;
}

.header-top .back-btn {
    width: 40px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.header-top .back-btn:after {
    content: "";
    display: block;
    height: 100%;
    background: url(../images/back.png) center no-repeat;
    background-size: 11px 17px;
}

.recommend-box{
    /* background: #ff0; */
}
.top_tou{
    background: #FFFFFF;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin: 0 4vw;
}
.double_dht{
    position: relative;
    background: #fff;
    margin: 0 4vw; 
    padding-bottom: 4vw;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.dht{
    display:flex;
    
    padding-top:3.333vw;
    background: #fff;
}
.title_name{
    white-space: nowrap;
    color:#FF7E2B;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1vw 0 2vw;
    font-size: 2.133vw;
}
.tab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;/*文字不换行*/
    font-size: 2.133vw;
    box-sizing: border-box;
    background: #fff;
}
.tab::-webkit-scrollbar{
    display:none; 
    width:0; 
    height: 0;
}

.tab .tab-item {
    border: 1px solid #ff2b41;
    color: #ff2b41;
    border-radius: 20px; 
    padding: 2px 10px;
    margin: 0 11px;
    margin-bottom: 15px;
    position: relative;
}
.tab-link{
    width: auto;
}

.tab .active {
    background: #FF7E2B;
    color: white;
}

.kan-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    flex-wrap: wrap;
    padding: 0 30px;
    box-sizing: border-box;
}
.fk{
    position: absolute;
    /* top: 5.333vw; */
    top: 0;
    right: 2vw;
    width: 10vw;
    height: 100%;
    /* z-index: 999; */
    /* background: #000; */
    background-image: linear-gradient(left, rgba(255,255,255,0) 0%, #fff 100%, #fff 100%);
background-image: -o-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 100%, #fff 100%);
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 100%, #fff 100%);
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 100%, #fff 100%);
background-image: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 100%, #fff 100%);
}



.center{
    margin-top: 2vw;
}
.kan-list {
    padding: 0 15px;
}
.kan-list li {
    width: 48.6%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 8px;
    background: #fff;
    height: 77.067vw;
    position: relative;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 1;
    padding: 2.667vw;
    position: relative;
}
.kan-list li a{
    width: 100%;
    display: flex;
    flex-direction: column;
}


.li-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.li-bottom h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 3.500vw;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #2B2B2B;
    margin-top: 1.367vw;
}
.li-bottom p{
    width: 90%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 2.400vw;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    margin-top: 1vw;
    color: #7F7F7F;
}
.li-bottom .xwzx_nr{
    display: flex;
    justify-content: space-between;
    font-size: 2.4vw;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #9D9D9D;
    margin-top: 1vw;
}
.li-bottom .xwzx_nr .fbz{
    width: 50%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.li-bottom .xwzx_nr .shijian{
    width: 50%;
    display: flex;
    justify-content: right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.look_num{
    position: absolute;
    bottom: 2vw;
    right: 2.5vw;
    font-size: 2.400vw;
    display: flex;
    /* justify-content: right; */
    align-items: center;
    color: #FF7E2B;
}
.look_num img{
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.kan-list .li-top {
    width: 100%;
    height: 40vw;
    margin-right: 10px;
    border-radius: 20px;
}
.kan-list .li-top img {
    width: 100%;
    height: 100%;
    overflow: hidden;border-radius: 20px;
    object-fit:cover;
}

.kan-list a {
    text-decoration: none;
    display: block;
}
.kan-list a div {
    /* width: 100%; */
    background: #ccc;
}

/* .kan-list a p {
    font-size: 12px;
    margin: 10px 0;
} */

.gd {
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #ccc;
    display: none;
    font-size: 12px;
}

.mfyy_info {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 50%;
    display: none;
    z-index: 80000;
}