.page-mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .page-pc {
        display: none;
    }

    .page-mobile {
        display: block;
        overflow: hidden;
    }

    /*base*/
    html {
        font-size: 12px;
        overflow: auto;
    }

    body {
        font-size: 1rem;
        min-width: auto;
        overflow: auto;
    }

    * {
        box-sizing: border-box;
    }

    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    [type=email], [type=number], [type=password], [type=search], [type=text], button, select, textarea {
        font-family: inherit;
        font-size: 100%;
        margin: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* 7行代码实现手机端栅格布局（2~6列） */
    [data-row]:after, [data-row]:before {
        content: " ";
        display: table;
        clear: both;
    }

    [data-row] > * {
        float: left;
    }

    [data-row="2"] > * {
        width: 50%;
    }

    [data-row="3"] > * {
        width: 33.3333%;
    }

    [data-row="4"] > * {
        width: 25%;
    }

    [data-row="5"] > * {
        width: 20%;
    }

    [data-row="6"] > * {
        width: 16.6666%;
    }

    .flex {
        display: flex;
    }

    .flex-item {
        flex: 1;
    }

    /*common*/
    body {
        background: #F4F5F5;
    }

    .container {
        width: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .swiper-container img,
    .img img {
        width: 100%;
        vertical-align: top;
        height: 200px;
    }

    .about_img .img img {
        height: auto !important;
    }

    .margin-tb {
        margin: 1rem 0;
    }

    .ov-h {
        overflow: hidden;
    }

    /*mod*/
    .mob-article-title {
        background: #fff;
        overflow: hidden;
        padding: 1.3rem 1rem 0;
    }

    .mob-article-title .more {
        float: right;
        color: #777;
        line-height: 1.9rem;
    }

    .mob-article-title .more i {
        background: url(../images/icon.png) no-repeat -6.5rem -0.9rem;
        background-size: 23.9rem;
        height: 1.5rem;
        width: 1.1rem;
        display: inline-block;
        vertical-align: -.4rem;
    }

    .mob-article-title h3 {
        font-size: 1.3rem;
        font-weight: 700;
    }

    .mob-article-title h3 i {
        background: url(../images/icon.png) no-repeat -5rem -0.9rem;
        background-size: 23.9rem;
        height: 1.5rem;
        width: 1.6rem;
        display: inline-block;
        vertical-align: -0.35rem;
        margin-right: 0.2rem;
    }

    .mob-article-list {
        background: #fff;
        overflow: hidden;
    }

    .mob-article-list .item {
        margin: 1.5rem 1rem;
        overflow: hidden;
        position: relative;
    }

    .mob-article-list .item a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .mob-article-list .item .img {
        float: left;
        width: 11rem;
        height: 5.9774rem;
        position: relative;
        border-radius: .4rem;
        overflow: hidden;
    }

    .mob-article-list .item .img img {
        height: 100%;
    }

    .mob-article-list .item .text {
        margin-left: 12rem;
        padding-top: .5rem;
    }

    .mob-article-list .item .text .title {
        height: 3rem;
        line-height: 1.5rem;
        font-size: 1.2rem;
        color: #000;
        font-weight: 700;
        overflow: hidden;
        margin-bottom: .7rem;
    }

    .mob-article-list .item .text .title i {
        background: url(../images/icon.png) no-repeat;
        background-size: 23.9rem;
        height: 1.5rem;
        width: 2.4rem;
        display: inline-block;
        vertical-align: top;
    }

    .mob-article-list .item .text .title i.i-rec {
        background-position: -8.2rem -0.8rem;
    }

    .mob-article-list .item .text .title i.i-new {
        background-position: -11.2rem -0.8rem;
    }

    .mob-article-list .item .text .info {
        color: #b3b3b3;
    }

    .mob-article-list .item .text .info .view {
        float: right;
    }

    .mob-article-list .item .text .info .view i {
        background: url(../images/icon.png) no-repeat -14.2rem -0.9rem;
        background-size: 23.9rem;
        height: 1.5rem;
        width: 1.6rem;
        display: inline-block;
        vertical-align: top;
    }

    .mob-article-list .empty {
        text-align: center;
        color: #999;
        padding: 3rem 0;
    }

    .mob-article-text {
        overflow: hidden;
        background: #fff;
    }

    .mob-article-text .item {
        margin: 1.5rem 1rem;
        overflow: hidden;
        position: relative;
        line-height: 1.5rem;
    }

    .mob-article-text .item .time {
        float: left;
        width: 5rem;
        color: #999;
    }

    .mob-article-text .item .title {
        margin-left: 6rem;
    }

    .mob-article-text .item .title a {
        display: block;
        font-size: 1.2rem;
    }

    .mob-article-text .item .title a i {
        background: url(../images/icon.png) no-repeat -16rem -1rem;
        margin-right: .3rem;
        background-size: 23.9rem;
        height: 1.5rem;
        width: 1.1rem;
        display: inline-block;
        vertical-align: -.4rem;
    }

    .mob-article-top {
        overflow: hidden;
        background: #fff;
    }

    .mob-article-top .item {
        margin: 1.5rem 1rem;
        overflow: hidden;
        position: relative;
        line-height: 1.5rem;
    }

    .mob-article-top .item .link {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .mob-article-top .item .flag {
        background: url(../images/icon.png) no-repeat -31.3rem -1.3rem;
        margin-right: .3rem;
        background-size: 43rem;
        height: 3rem;
        width: 3rem;
        float: left;
        vertical-align: -.4rem;
        color: #fff;
        text-align: center;
        line-height: 3.2rem;
        font-size: 1.6rem;
    }

    .mob-article-top .item .flag-1 {
        background-position: -31.2rem -1.3rem;
    }

    .mob-article-top .item .flag-2 {
        background-position: -35rem -1.3rem;
    }

    .mob-article-top .item .flag-3 {
        background-position: -38.8rem -1.3rem;
    }

    .mob-article-top .item .img {
        float: left;
        width: 11rem;
        height: 5.9774rem;
        position: relative;
        border-radius: .4rem;
        overflow: hidden;
    }

    .mob-article-top .item .img img {
        height: 100%;
    }

    .mob-article-top .item .title {
        margin-left: 15rem;
        margin-top: 1.1rem;
        font-size: 1.2rem;
        line-height: 1.8rem;
        height: 3.6rem;
        overflow: hidden;
    }

    .mob-slide-video {
        padding: 1.5rem 1rem .5rem;
        background: #fff;
    }

    .mob-slide-video .swiper-slide {
        position: relative;
    }

    .mob-slide-video .swiper-slide .link {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .mob-slide-video .swiper-slide .img {
        overflow: hidden;
        position: relative;
        width: 100%;
        padding-top: 54.34%;
        border-radius: 1rem;
    }

    .mob-slide-video .swiper-slide .img img {
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
    }

    .mob-slide-video .swiper-slide .title {
        text-align: center;
        padding: 1rem;
        font-size: 1.2rem;
    }

    .mob-recommend {
        padding: .5rem 1rem;
        background: #fff;
    }

    .mob-recommend .item {
        border-bottom: 1px solid #f0f0f0;
        overflow: hidden;
        padding: 1.5rem 0;
        position: relative;
    }

    .mob-recommend .item .link {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .mob-recommend .item .img {
        width: 7rem;
        height: 7rem;
        float: left;
        overflow: hidden;
    }

    .mob-recommend .item .text {
        margin-left: 8rem;
    }

    .mob-recommend .item .text h3 {
        font-size: 1.4rem;
        padding-top: 1.4rem;
    }

    .mob-recommend .item .text p {
        font-size: 1.3rem;
        color: #999;
    }

    .mob-recommend .item:last-child {
        border-bottom: 0 none;
    }

    .mob-article-cate {
    }

    .mob-cate {
        background: #fff;
        padding: 1rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .mob-cate .title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .mob-cate .list {
        margin: 0 -.5rem;
    }

    .mob-cate .list:after {
        content: '';
        display: block;
        clear: both;
    }

    .mob-cate .list li {
        width: 25%;
        float: left;
    }

    .mob-cate .list li a {
        display: block;
        margin: 0 .5rem;
        line-height: 3rem;
        font-size: 1.2rem;
        overflow: hidden;
        height: 3rem;
        color: #999;
    }

    .mob-cate .list li.current a {
        background: linear-gradient(to right, #f51622 0%, #f3430c 100%);
        color: #fff;
        box-shadow: 0 .5rem 1rem rgba(246, 60, 45, .3);
        border-radius: .2rem;
    }

    .mob-article-detail {
        background: #fff;
    }

    .mob-detail-title {
        padding: 1.5rem 1rem 0;
    }

    .mob-detail-title h2 {
        font-size: 1.5rem;
        color: #333;
        font-weight: 700;
        margin-bottom: .5rem;
    }

    .mob-detail-title .info {
        color: #999;
    }

    .mob-detail-content {
        margin: 1rem;
        overflow: hidden;
    }

    .mob-detail-content img {
        max-width: 100%;
    }

    .mob-detail-content p {
        margin: 1.4em 0;
    }

    /*header*/
    .mob-header {
        -webkit-transform: translateZ(0);
        height: 4.2rem;
        padding: 1rem 0;
        background: #fff;
        border-bottom: 1px solid #efefef;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 999;
        width: 100%;
    }

    .mob-header .hd-logo {
        width: 14.7rem;
        height: 2.2rem;
        background: url(../images/common/logo.png) no-repeat top left;
        background-size: 14rem;
        float: left;
    }

    .mob-header .hd-extra {
        float: right;
        margin-right: -0.7rem;
    }

    .mob-header .hd-extra .e-btn {
        float: left;
        width: 7.15rem;
        height: 2.2rem;
        line-height: 2.2rem;
        background-size: 14.3rem;
        margin-right: 1rem;
    }

    .mob-header .hd-extra .menu-handler {
        float: left;
        height: 2.2rem;
        width: 3rem;
        text-align: center;
        border-radius: .3rem;
    }

    .mob-header .hd-extra .menu-handler i {
        height: 2.1rem;
        width: 2.4rem;
        background: url(../images/icon.png) no-repeat -2.9rem -0.6rem;
        background-size: 25rem;
        display: inline-block;
        vertical-align: top;
    }

    .mob-header .hd-extra .menu-search {
        float: left;
        height: 2.2rem;
        width: 3rem;
        text-align: center;
        border-radius: .3rem;
    }

    .mob-header .hd-extra .menu-search i {
        height: 2.1rem;
        width: 2.4rem;
        background: url(../images/icon.png) no-repeat -0.4rem -0.6rem;
        background-size: 25rem;
        display: inline-block;
        vertical-align: top;
    }

    .mob-header-padding {
        height: 4.2rem;
    }

    .mob-header-search {
        -webkit-transform: translateZ(0);
        position: fixed;
        top: 4.2rem;
        bottom: 0;
        background: #fff;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        -webkit-transform: rotateX(90deg);
        -moz-transform: rotateX(90deg);
        transform: rotateX(90deg);
        transform-origin: top;
        transform-style: preserve-3d;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        transition: all .2s;
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 0;
        font-size: 1rem;
    }

    .mob-header-search.active {
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }

    .search-form {
        padding-top: 1rem;
    }

    .search-form input[type=text] {
        width: 80%;
        float: left;
        border: 1px solid #e0e0e0;
        height: 3rem;
        padding-left: 1rem;
    }

    .search-form button {
        -webkit-appearance: none;
        background: linear-gradient(to right, #f51622 0%, #f3430c 100%);
        border: 0 none;
        height: 3rem;
        width: 20%;
        color: #fff;
    }

    .hot-search {
        margin-top: 2rem;
    }

    .hot-search .title {
        color: #999;
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .hot-search .list {
        margin: 0 -.5rem
    }

    .hot-search .list li {
        float: left;
        text-align: center;
        width: 25%;
        margin-bottom: 1rem;
    }

    .hot-search .list li a {
        display: block;
        line-height: 2rem;
        height: 2rem;
        background: #eaeaea;
        overflow: hidden;
        margin: 0 .5rem;
    }

    /*footer*/
    .mob-fixed-footer-padding {
        height: 4.1rem;
        display: block;
    }

    .mob-fixed-footer {
        -webkit-transform: translateZ(0);
        position: fixed;
        bottom: 0;
        background: #fff;
        left: 0;
        right: 0;
        z-index: 999;
        font-size: 1.2rem;
        height: 4.2rem;
    }

    .mob-fixed-footer .f-btn {
        display: block;
        width: 50%;
        transition: all .2s;
        text-align: center;
        height: 4.2rem;
        line-height: 4.2rem;
        color: #fff;
        font-size: 1.4rem;
    }

    .mob-fixed-footer .flex-item {
        text-align: center;
        color: #666;
        transition: all .2s;
        overflow: hidden;
        border-top: 1px solid #efefef;
    }

    .mob-fixed-footer .flex-item.j-top {
        color: #999;
        margin-left: -25%;
    }

    .mob-fixed-footer .flex-item i {
        display: block;
        margin: .3rem auto .1rem;
        width: 2rem;
        height: 2rem;
        background: url(../../site/images/mobile/common/icon.png) no-repeat;
        background-size: 290%;
    }

    .mob-fixed-footer .flex-item i.i-top {
        background-position: 0 103%;
    }

    .mob-fixed-footer .flex-item i.i-tel {
        background-position: 49% 0;
    }

    .mob-fixed-footer .flex-item i.i-see {
        background-position: 102% 0;
    }

    .mob-fixed-footer .flex-item p {
        font-size: 1rem;
    }

    .mob-fixed-footer.on .f-btn {
        width: 40%;
    }

    .mob-fixed-footer.on .flex-item.j-top {
        color: #666;
        margin-left: 0;
    }

    .mob-fixed-footer.on .flex-item i.i-top {
        background-position: 0 0;
    }

    .mob-footer {
        color: #999;
    }

    .mob-footer a {
        color: #999;
    }

    .mob-footer .footer_service {
        background: #272727;
        padding: 2rem 0;
    }

    .mob-footer .footer_service li {
    }

    .mob-footer .footer_service li i {
        display: block;
        width: 3rem;
        height: 3rem;
        margin: 0 auto .5rem;
        background: url(../../site/images/common/bottom-icon.png) no-repeat;
        background-size: 440%;
    }

    .mob-footer .footer_service li.item-1 i {
        background-position: 0 0;
    }

    .mob-footer .footer_service li.item-2 i {
        background-position: 33.33% 0;
    }

    .mob-footer .footer_service li.item-3 i {
        background-position: 66.66% 0;
    }

    .mob-footer .footer_service li.item-4 i {
        background-position: 100% 0;
    }

    .mob-footer .footer_service li .text {
        text-align: center;
    }

    .mob-footer .footer_service li .text .h3 {
        font-size: 1rem;
        color: #fff;
        color: #999;
    }

    .mob-footer .footer_main {
        background: #222;
        padding: 2rem 0;
    }

    .mob-footer .footer_main .qr {
        overflow: hidden;
    }

    .mob-footer .footer_main .qr .img {
        float: left;
        width: 8rem;
        height: 8rem;
        margin-left: 4rem;
    }

    .mob-footer .footer_main .qr .img img {
        width: 7rem;
        height: 7rem;
        vertical-align: top;
    }

    .mob-footer .footer_main .qr .text {
        margin-left: 12.4rem;
        font-size: 1.2rem;
        padding-top: 1.8rem;
    }

    .mob-footer .footer_main .qr .text h3 {
        color: #fff;
    }

    .mob-footer .footer_main .tel {
        color: #fff;
        font-size: 1.6rem;
        text-align: center;
        margin: 2rem 0 1.5rem;
        position: relative;
    }

    .mob-footer .footer_main .tel span {
        background: #222;
        position: relative;
        z-index: 2;
        padding: 0 1rem;
    }

    .mob-footer .footer_main .tel:before {
        content: "";
        left: 1rem;
        right: 1rem;
        border-top: 1px solid #333;
        position: absolute;
        top: 1rem;
    }

    .mob-footer .footer_main .copy {
        text-align: center;
    }

    /* fixed-form */
    .mob-fixed-form {
        position: fixed;
        width: 100%;
        height: 490px;
        bottom: 0;
        transform: translate(0, 100%);
        z-index: 1001;
        background-color: #fff;
        -webkit-transition: transform .5s ease;
        -moz-transition: transform .5s ease;
        transition: transform .5s ease;
    }

    .mob-fixed-form.open {
        transform: translate(0, 0);
    }

    .mob-fixed-form .ff-top {
        border-bottom: 1px solid #e8e8e8;
    }

    .mob-fixed-form .ff-top p {
        padding: 17px 0;
        font-size: 14px;
        line-height: 14px;
        color: #999;
        position: relative;
        text-align: center;
    }

    .mob-fixed-form .ff-top .close {
        display: inline-block;
        position: absolute;
        right: 20px;
        font-size: 24px;
        color: #b2b2b2;
    }

    .mob-fixed-form .ff-submit {
        width: 300px;
        margin: 0 auto;
    }

    .mob-fixed-form .ff-submit .s-tel {
        text-align: center;
        margin: 18px auto;
    }

    .mob-fixed-form .ff-submit .s-tel .text {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333;
        line-height: 27px;
    }

    .mob-fixed-form .ff-submit .s-tel .number {
        display: inline-block;
        height: 36px;
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 20px;
        color: #38f;
        letter-spacing: 0;
        line-height: 36px;
    }

    .mob-fixed-form .ff-submit .s-form {
        border-top: 1px solid #e8e8e8;
        width: 300px;
    }

    .mob-fixed-form .ff-submit .s-form .intro {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333;
        letter-spacing: 0;
        line-height: 27px;
        margin-top: 20px;
    }

    .mob-fixed-form .ff-submit .s-form input[type=text] {
        border: 1px solid #bbb;
        border-radius: 2px;
        margin-top: 15px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 20px;
        color: #999;
        padding: 10px;
        outline: none;
    }

    .mob-fixed-form .ff-submit .s-form button {
        background: #38f;
        border-radius: 2px;
        width: 100%;
        height: 40px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #fff;
        text-align: center;
        outline: none;
        border: none;
        margin-top: 35px;
    }

    .mob-fixed-form-skin-orange .ff-submit .s-tel .number {
        color: #F82728;
    }

    .mask-bg {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(45, 45, 45, .6);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
    }

    .mod-line-bg {
        background: url(../../site/images/common/line-bg.jpg) repeat-y left top;
        background-size: 100%;
        color: #fff;
    }


    /*page rewrite*/
    .page-mobile .list-page {
        margin-top: 0;
        padding: 1rem 0;
        background: #fff;
    }

    .page-mobile .list-page .page-s-1,
    .page-mobile .list-page .page-s-2 {
        display: block;
    }

    .page-mobile .list-page .page-s-1 {
        margin-bottom: 1.5rem;
    }

    .page-mobile .list-page .page_2 {
        padding-left: 0;
    }

    #buttomDiv {
        text-align: center;
        margin: 1em;
    }

    .share-table {
        width: 100%;
        color: #b9a5ad;
    }

    .share-div {
        width: 2.5rem;
        height: 2rem;
        display: inline-block;
        vertical-align: top;
        background-size: 19rem !important;
        margin-top: 1rem;
    }

    .share-table .wx {
        background: url(../images/icon.png) no-repeat -0.6rem -2.3rem;
    }

    .share-table .friend {
        background: url(../images/icon.png) no-repeat -3.1rem -2.3rem;
    }

    .share-table .qq {
        background: url(../images/icon.png) no-repeat -5.4rem -2.3rem;
    }

    .share-table .wb {
        background: url(../images/icon.png) no-repeat -7.8rem -2.3rem;
    }
}