* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    font-family: '微软雅黑';
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

.pageBody {
    position: relative;
    height: 100%;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.header {
    position: relative;
    height: .8rem;
    background: url("../image/banner_2021.png") no-repeat center;
    background-size: 100%;
    cursor: pointer;
}

.header-logo {
    position: absolute;
    top: .2rem;
    display: block;
    width: .56rem;
    margin: 0 0 0 .12rem;
}

.main {
    width: 100%;
    font-size: 0;
    padding-top: 1.32rem;
    padding-bottom: .55rem;
}

.nav {
    display: flex;
    padding: 0 .1rem;
    border-bottom: .02rem solid #F0F0F0;
    background-color: #fff;
}

.nav>li {
    flex: 1;
    font-size: .16rem;
    color: #aaa;
    height: .4rem;
    line-height: .4rem;
    font-weight: bold;
}

.nav .nav-le {
    text-align: left;
}

.nav .nav-text {
    padding: .03rem .2rem;
    border-radius: .28rem;
}

.nav>li.active .nav-text {
    color: #fff;
    position: relative;
    background-color: rgb(243, 51, 129);
}

.nav>li a {
    display: block;
    text-align: center;
    color: #aaa;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.nearby {
    overflow: hidden;
    padding-right: .05rem;
    border-bottom: .1rem solid #f2f1f0;
}

.nearby-list {
    width: calc(50% - .05rem);
    /*height: 1.8rem;*/
    margin: .05rem 0 0 .05rem;
    float: left;
}

.nearby-top {
    position: relative;
}

.nearby-top:before {
    content: "";
    display: inline-block;
    padding-bottom: 100%;
}

.nearby-list .nearby-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .05rem;
}

.nearby-list .tab {
    position: absolute;
    top: .07rem;
    left: .09rem;
    padding: .03rem .08rem;
    font-size: .1rem;
    color: #fff;
    line-height: .1rem;
    background: -moz-linear-gradient(left, #FF9537, #FFBC2B);
    /*Mozilla*/
    background: -webkit-gradient(linear, 0 50%, 100% 50%, from(#FF9537), to(#FFBC2B));
    /*Old gradient for webkit*/
    background: -webkit-linear-gradient(left, #FF9537, #FFBC2B);
    /*new gradient for Webkit*/
    background: -o-linear-gradient(left, #FF9537, #FFBC2B);
    /*Opera11*/
    border-radius: .1rem;
    opacity: .9;
}

.onLine {
    position: absolute;
    right: .07rem;
    top: .07rem;
    width: .36rem;
    height: .15rem;
}

.nearby-bottom {
    padding: .12rem;
    font-size: .16rem;
    overflow: hidden;
    line-height: .16rem;
}

.nearby-bottom .nearby-bottom-lf {
    color: #222;
    float: left;
}

.nearby-bottom .nearby-bottom-ri {
    float: right;
    font-size: .12rem;
    color: #999;
}

.nearby-bottom .nearby-bottom-ri i {
    position: relative;
    top: .02rem;
    display: inline-block;
    width: .12rem;
    height: .12rem;
    margin-right: .08rem;
    background: url("../image/card_icon_location@2x.png")no-repeat center;
    background-size: 100%;
}

.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    /* height: 0.7rem; */
    background: rgba(26, 20, 38, .85);
    z-index: 1000;
    display: flex;
    align-items: center;
}

.footer-logo {
    display: block;
    background-image: url(../image/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
    width: .4rem;
    height: .4rem;
    margin: .08rem .1rem .08rem .12rem;
    border-radius: .066667rem;
}

.footer-text {
    /* margin-top: .12rem; */
    float: left;
}

.footer-text h4 {
    font-size: .14rem;
    line-height: .14rem;
    color: #fff;
    margin-bottom: .05rem;
}

.footer-text p {
    color: #fff;
    font-size: .12rem;
    line-height: .12rem;
}

.footer-btn {
    cursor: pointer;
    position: absolute;
    width: .85rem;
    height: .32rem;
    /* top: .13rem; */
    right: .05rem;
    background-image: url(../image/down_btn.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


/*附近动态*/

.dynamicRow dd {
    border-bottom: .06rem solid #f2f1f0;
    padding: .12rem .09rem;
}

.dynamicRow-top {
    overflow: hidden;
    padding: 0 .03rem;
    display: flex;
    align-items: center;
    position: relative;
}


/* .dynamicRow-hb{min-width: .5rem; min-height: .5rem; float: left;} */

.dynamicRow-hb {
    min-width: .6rem;
    min-height: .6rem;
    float: left;
}

.dynamicRow-hb img {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    object-fit: cover;
}

.dynamicRow-bd {
    float: left;
    margin-left: .12rem;
}

.dynamicRow-bd h4 {
    font-size: .16rem;
    line-height: .16rem;
    color: #222;
    font-weight: 500;
    margin-top: .06rem;
}

.dynamicRow-bd span {
    display: inline-block;
    font-size: .1rem;
    line-height: .1rem;
    padding: .04rem .09rem;
    border-radius: .03rem;
    margin-right: .03rem;
    margin-top: .08rem;
}

.color-567BA7 {
    color: #567BA7;
    background-color: #EFF7FF;
}

.color-D85A5A {
    color: #D85A5A;
    background-color: #FFEBEB;
}

.dynamicRow-fb {
    float: right;
    width: .57rem;
    height: .31rem;
    margin-top: .07rem;
    background: url("../image/sl_btn.png")no-repeat center;
    background-size: 100%;
}

.dynamicRow-fb {
    position: absolute;
    top: .07rem;
    right: 0;
    bottom: 0;
    margin: auto;
}

.dynamicRow-text {
    font-size: .16rem;
    line-height: .16rem;
    padding: 0 .03rem;
    margin: .17rem 0 .15rem;
}

.dynamicRow-pic {
    width: 100%;
    margin-bottom: .133333rem;
}

.dynamicRow-img {
    overflow: hidden;
}

.dynamicRow-img li {
    float: left;
    width: calc(33.3% - .06rem);
    margin: 0 .03rem .12rem;
}

.dynamicRow-img li img {
    width: 100%;
    height: 1.6rem;
    object-fit: cover;
}

.dynamicRow-footer {
    width: 1.6rem;
    height: .24rem;
    background-color: #F8F8F8;
    font-size: .12rem;
    color: #666666;
    line-height: .24rem;
}

.dynamicRow-footer span {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: .37rem;
    background: url("../image/map_icon.png")no-repeat left;
    background-size: .24rem;
}


/*ios弹出包*/

.mask {
    z-index: 999999;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#js_box {
    display: none;
}

.alert-box {
    position: absolute;
    width: 86%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #f9f9f9;
    height: auto;
    padding: 3%;
    border-radius: .02rem;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.now-download {
    width: 100%;
    color: #999;
    margin-bottom: .05rem;
    font-size: .14rem;
    line-height: .2rem;
}

.close-btn {
    width: .1998rem;
    height: .1998rem;
    position: absolute;
    right: 3%;
    top: 3%;
    z-index: 3;
    background: url(../image/c_lose.png) no-repeat center;
    background-size: 100% auto;
    display: block;
    cursor: pointer;
}

.alert-btn {
    z-index: 10;
    width: 100%;
    margin: .05rem auto;
    height: .07984rem;
    line-height: .07984rem;
    background: #0093ff;
    position: relative;
    border-radius: .04rem;
}

.color-bar {
    z-index: 12;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    border-radius: .133333rem;
}

.course_pic img {
    width: 100%;
}

.top-bar {
    z-index: 15;
    background: #0093ff;
    width: 1%;
}

.buttom-bar {
    background: #b8b8b8;
}

.change {
    width: 80%;
    margin: 2% 0 0 10%;
    background: #0093ff;
    text-align: center;
    height: .4rem;
    line-height: .4rem;
    color: #fff;
    border-radius: .02rem;
    display: block;
    font-size: .14rem;
}

.course_pic {
    line-height: 0;
}

.tipRow {
    padding-top: .266667rem;
}

.tipRowImg {
    width: .6rem;
    height: .6rem;
    margin: 0 auto;
}

.tipRowImg img {
    display: block;
    width: .6rem;
    height: .6rem;
    object-fit: cover;
    border-radius: 50%;
}

.tipRow-title {
    font-size: .14rem;
    color: #333;
    line-height: .20rem;
    text-align: center;
    margin: .1rem .1rem 0;
}

.tipRow-btn {
    display: block;
    color: #fff;
    width: 50%;
    height: .3rem;
    margin: .1rem auto;
    border: none;
    outline: none;
    background-color: #D85A5A;
    font-size: .14rem;
    cursor: pointer;
}

.locationIP {
    margin-right: .04rem;
    font-style: normal;
}

.nearby-nav {
    font-size: .16rem;
    height: .5rem;
    line-height: .5rem;
    font-weight: 700;
    padding-left: .42rem;
    border-bottom: 1px solid #f1f1f1;
    background: url("../image/line_icon.png")no-repeat .18rem;
    background-size: .05rem .18rem;
}

.keepMent .dynamicRow-fb {
    background-image: url(../image/fuyue_btn.png);
    width: .785rem;
    height: .385rem;
}

.keepMent-tab {
    font-size: .12rem;
    line-height: .12rem;
    color: #aaa;
    margin-top: .08rem;
}

.dynamicRow-text p {
    line-height: .24rem;
}

.video-btn.dynamicRow-fb {
    margin-right: .1rem;
    background-image: url(../image/video_btn.png);
}

.video-count {
    /*object-fit: cover;*/
    background: #000;
    margin-bottom: .12rem;
    height: 3rem;
}

.more-link {
    cursor: pointer;
    font-size: .14rem;
    text-align: center;
    padding: .1rem 0;
    border-bottom: .1rem solid #f2f1f0;
    border-top: .1rem solid #f2f1f0;
}

a[title="站长统计"] {
    display: none;
}


/* 解决闪现模板 */

[v-cloak] {
    display: none;
}


/* 遮罩层部分 */

.fixed_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20000;
    pointer-events: auto;
}

.fixed_top_guide {
    width: 100%;
    height: 1.69rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.444rem 0.222rem 0.222rem 0.222rem;
}

.guide_content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.guide_content>div {
    font-size: 0.2rem;
    color: #666666;
    font-weight: bold;
}

.guide_icon {
    display: flex;
    align-items: center;
}

.guide_icon img {
    width: 0.333rem;
    height: 0.333rem;
}

.guide_line {
    width: 1rem;
    height: 1rem;
    position: relative;
    bottom: 0.169rem;
}

.showMask {
    display: block!important;
}

.hideMask {
    display: none;
}


/* ios指引用户遮罩层 */

.ios_guide {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 10000;
    pointer-events: auto;
    font-size: 0!important;
}

.ios_guide img {
    width: 100%;
    height: auto;
}


/* 禁止遮罩层下方页面滚动 */

.body-no-scroll {
    position: relative;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.html-no-scroll {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.dynamicRow-hb {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cityWideImg {
    border: 3px solid rgb(151, 230, 248);
}

.dynamicRow-hb img.head_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.6rem !important;
    height: auto;
}

@keyframes down {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.1);
    }
}

@-webkit-keyframes down {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.footer-btn {
    animation: down 2s infinite forwards;
    -webkit-animation: down 2s infinite forwards;
}

.download_mask {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download_mask_board {
    width: 69vw;
    min-height: 64vw;
    height: auto;
    background-color: #FFFFFF;
    border-radius: 4vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.download_mask_board .close {
    position: absolute;
    top: 1vw;
    right: 1vw;
    width: 6vw;
    pointer-events: auto;
}

.download_mask_board .close:active {
    opacity: 0.9;
}

.download_mask_board .logo {
    width: 19vw;
    border-radius: 2vw;
    box-shadow: 0 1vw 2vw rgba(243, 51, 129, 0.6);
}

.download_mask_board .shuoming {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5.4vw 0;
}

.download_mask_board .shuoming p:nth-of-type(1) {
    color: #333333;
    font-weight: bold;
    font-size: 5.066vw;
}

.download_mask_board .shuoming p:nth-of-type(2) {
    color: #999999;
    font-size: 3.733vw;
    margin-top: 1vw;
}

@keyframes down2 {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.02);
    }
}

@-webkit-keyframes down2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.download_mask_board .download_btn {
    width: 88%;
    pointer-events: auto;
    animation: down2 2s infinite forwards;
    -webkit-animation: down2 2s infinite forwards;
}

.download_mask_board .download_btn:active {
    opacity: 0.9;
}