@charset "utf-8";
/*=========== PC public CSS ===========*/
*, :before, :after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, form, fieldset, figure, figcaption, table, th, td img {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'DIN1451EF';
    src: url('../font/DIN1451EF-EngNeu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINNextLTPro';
    src: url('../font/DINNextLTPro-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PingFangSCBold';
    src: url('../font/pingfang\ sc\ bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Microsoft YaHei", "微软雅黑";
    color: #646464;
    font-size: 16px;
    line-height: 1.1;
    margin: 0 auto;
    background-color: #FFF;
}

ol, ul, li {
    list-style: none;
}

i, em {
    font-style: normal;
}

a {
    color: #333;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

a:hover, a:active, a:link, a:visited {
    text-decoration: none;
}

fieldset, img, video {
    max-width: 100%;
    border: none;
    vertical-align: middle;
}

input, select, textarea, button {
    color: #333;
    font-size: 16px;
    font-family: "Microsoft Yahei", sans-serif;
    outline: none;
    border: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

input, button {
    border-radius: 0;
    -webkit-appearance: none;
}

/*清除IOS默认圆角*/
textarea {
    resize: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
}

/*去除右下角拖动边框标识*/
input:-ms-clear {
    display: none;
}

.one-show .pc {
    display: block;
}

.one-show .mobile {
    display: none;
}

/*消除 IE10 里的叉号*/
input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
    outline: none;
}

::-webkit-input-placeholder {
    color: #666;
}

::-moz-placeholder {
    color: #666;
}

:-ms-input-placeholder {
    color: #666;
}

:-moz-placeholder {
    color: #666;
}

table {
    border-collapse: separate;
}

/*边线重叠*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

.transition {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.wrap {
    width: 90%;
    max-width: 1410px;
    margin: 0 auto;
}

.formError {
    max-width: 280px;
    pointer-events: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 10001;
    background-color: #f6f6f6;
    padding: 15px 30px;
    border-radius: 5px;
    opacity: 0;
    transition: .4s all;
    box-shadow: 0 5px 10px rgba(67, 65, 68, 0.9);
}

.formError.active {
    opacity: 1;
}

.formError h6 {
    font-size: 16px;
    color: #434144;
}

/* header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-width: 320px;
    line-height: 90px;
    transition: all .3s;
    z-index: 99999;
}

.header.on {
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.header .icon-black {
    display: none;
}

.header.on .icon-black {
    display: inline-block;
}

.header.on .icon-white {
    display: none;
}

.header.on .header-nav ul li a {
    color: #333;
}

.header.on .header-nav .nav-subpro .one:after {
    background-color: #333;
}
/*.nav-layer .wrap ol li a:after {*/
/*    background-color: #333;*/
/*}*/
.header.on .nav-btn i {
    background-color: #333;
}

.header.head-fixed {
    position: relative;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.header.head-fixed .icon-black {
    display: inline-block;
}

.header.head-fixed .icon-white {
    display: none;
}

.header.head-fixed .header-nav ul li a {
    color: #333;
}

.header.head-fixed .header-nav ul li a:after {
    background-color: #333;
}

.header.head-fixed .nav-btn i {
    background-color: #333;
}

.header .wrap {
    width: 100%;
    max-width: 100%;
    padding: 0 150px;
}

.header .logo {
    float: left;
    width: 226px;
}

.header .logo img {
    width: 100%;
}

.header-nav {
    float: left;
    margin-left: 280px;
}

.header-nav ul {
    display: inline-block;
    vertical-align: middle;
}

.header-nav ul li {
    float: left;
    margin-right: 54px;
}

.header-nav ul li a {
    display: block;
    color: #FFF;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.header-nav ul li a:after {
    content: "";
    position: absolute;
    left: 50%;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #FFF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.header-nav ul li a:hover:after, .header-nav ul li.on a:after {
    width: 100%;
}

.nav-btn {
    display: none;
}

.header-link {
    float: right;
    margin-left: 40px;
}

.header-link > a {
    float: left;
    margin-left: 40px;

}
.header-link a:first-child{margin-left: 0;}
.header-link a:last-child{margin-left: 20px;}
.header-link .header-search {
    float: left;
    padding: 0 20px;
    margin-left: 20px;
    position: relative;
}

.header-search > img {
    cursor: pointer;
}

.ser-form {
    position: absolute;
    right: 0;
    width: 300px;
    line-height: 40px;
    padding: 16px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    display: none;
}

.ser-form input {
    width: 100%;
    line-height: 40px;
    padding: 0 30px 0 10px;
    border-radius: 4px;
    background-color: #FFF;
    font-size: 14px;
    color: #333;
}

.ser-form button {
    position: absolute;
    right: 26px;
    top: 50%;
    margin-top: -12px;;
    cursor: pointer;
    z-index: 22;
    background: transparent;
}

.ser-form button img {
    width: 24px;
}

.header-search:hover .ser-form {
    display: block;
}

.header-link .header-tel {
    float: left;
    padding: 0 20px;
    margin-right: 20px;
    position: relative;
}

.header-tel > img {
    cursor: pointer;
}

.header-tel p {
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    border-radius: 4px;
    background-color: #FFF;
    font-size: 16px;
    color: #333;
    text-align: center;
}

.header-tel p strong {
    color: #20346f;
    font-size: 18px;
}

.header-tel:hover .ser-form {
    display: block;
}

/* footer */
.footer {
    background-color: #2a2a2a;
}

.footer .wrap {
    /*width: 100%;*/
    /*max-width: 100%;*/
    position: relative;
}

.foot-ft {
    padding: 120px 0 80px;
}

.foot-cont {
    float: left;
    width: 380px;
}

.foot-cont span {
    display: block;
    color: #FFF;
}

.foot-cont span img {
    width: 20px;
    margin-right: 10px;
}

.foot-cont strong {
    display: block;
    color: #FFF;
    font-size: 36px;
    font-family: 'DINNextLTPro';
    letter-spacing: 0.5px;
    margin: 25px 0 60px;
}

.foot-cont p {
    font-size: 14px;
    margin-top: 18px;
    color: #FFF;
}

.foot-cont .foot-code {
    margin-top: 60px;
}

.foot-cont .foot-code i {
    display: inline-block;
    vertical-align: middle;
    color: rgba(255, 255, 255, .4);
    font-size: 14px;
    line-height: 24px;
    margin-left: 16px;
}

.foot-nav {
    float: right;
    font-size: 0;
}

.foot-nav dl {
    display: inline-block;
    vertical-align: top;
    margin-left: 90px;
    font-size: 16px;
}

.foot-nav dl:nth-child(1) {
    margin-left: 0;
}

.foot-nav dt {
    margin-bottom: 20px;
}

.foot-nav dt a {
    color: #FFF;
}

.foot-nav dt a:hover {
    text-decoration: underline;
}

.foot-nav dd a {
    display: block;
    color: rgba(255, 255, 255, .4);
    line-height: 2.75;
}

.foot-nav dd a:hover {
    color: #FFF;
}

.foot-fb {
    padding: 30px 180px;
    line-height: 30px;
    color: #FFF;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
}

.foot-copyright {
    float: left;
    color: rgba(255, 255, 255, .4);
}

.foot-copyright a {
    display: inline-block;
    color: rgba(255, 255, 255, .4);
    margin-left: 5px;
}

.foot-copyright a:hover {
    color: #FFF;
}

.foot-name {
    float: right;
}

.foot-fm {
    position: relative;
    padding: 0 180px 30px;
}

.foot-link {
    margin-top: 0;
    font-size: 0;
    text-align: right;
}

.foot-link ul {
    display: inline-block;
}

.foot-link li {
    display: inline-block;
    margin-left: 12px;
    cursor: pointer;
    width: 42px;
    height: 42px;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.foot-link li img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.foot-link li:hover {
    background-color: #20346f;
}

.foot-link li:hover img {
    opacity: 1;
    filter: alpha(opacity=100);
}

.code-show .code-db {
    position: absolute;
    bottom: 62px;
    width: 110px;
    background-color: #fff;
    padding: 5px;
    text-align: center;
}

.code-show .code-db:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    width: 20px;
    height: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FFF;
    margin: 0 auto;
}

.code-show .code01 {
    right: 130px;
}

.code-show .code02 {
    right: 74px;
}

.code-show .code03 {
    right: 22px;
}

.code-show .code04 {
    right: -32px;
}

.code-show .code-db span {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.toTop {
    position: fixed;
    right: 16px;
    bottom: 180px;
    z-index: 999999;
    cursor: pointer;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
}

.toTop img {
    width: 12px;
    height: auto;
    vertical-align: middle;
}

.one-show {
    position: relative;
    overflow: hidden;
}

.one-show img {
    width: 100%;
}

.one-show .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 36px;
    left: 50%;
    margin-left: -705px;
    text-align: left;
}

.one-show .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}

.one-show .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .4);
    background: transparent;
    opacity: 1;
}

.one-show .swiper-pagination-bullet-active {
    background: #FFF;
    border-color: #FFF;
}

.oneban-mo {
    display: none;
}

.box-top {
    margin-top: 100px;
}

.index-name {
    margin-bottom: 32px;
    line-height: 48px;
}

.index-namefl {
    float: left;
}

.index-name h2 {
    display: inline-block;
    color: #222222;
    font-size: 36px;
    font-family: 'PingFangSCBold';
    font-weight: normal;
    margin-right: 24px;
}

.index-name i {
    display: inline-block;
    color: #666;
    font-family: Arial;
    font-size: 24px;
    text-transform: uppercase;
}

.index-namefr {
    float: right;
}

.more-arr {
    display: block;
    width: 190px;
    line-height: 46px;
    color: #111419;
    border: 1px solid #26292e;
    border-radius: 4px;
    padding: 0 26px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.more-arr img {
    position: absolute;
    right: 26px;
    top: 17px;
    width: 14px;
    height: auto;
}

.more-arr:hover img {
    -webkit-animation: fadeio .3s forwards;
    -moz-animation: fadeio .3s forwards;
    -ms-animation: fadeio .3s forwards;
    -o-animation: fadeio .3s forwards;
    animation: fadeio .3s forwards;
}

@-webkit-keyframes fadeio {
    0% {
        top: 17px;
    }
    33% {
        top: 2px;
        right: 16px;
    }
    66% {
        top: -22px;
        right: 6px;
        opacity: 1;
    }
    100% {
        top: -44px;
        right: -6px;
        opacity: 0;
    }
}

@keyframes fadeio {
    0% {
        top: 17px;
    }
    33% {
        top: 2px;
        right: 16px;
    }
    66% {
        top: -22px;
        right: 6px;
        opacity: 1;
    }
    100% {
        top: -44px;
        right: -6px;
        opacity: 0;
    }
}

.more-arr:hover {
    text-align: center;
    color: #FFF;
    border-color: #20346f;
}

.more-arr:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .5s;
    background-color: #20346f;
    z-index: -1;
}

.more-arr:hover:before {
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition-timing-function: ease;
    color: #FFF;
}


.index-pro ul {
    margin-left: -1%;
}

.index-pro ul li {
    float: left;
    width: 32.3%;
    margin-left: 1%;
    padding-top: 36px;
    height: 230px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.index-pro ul li > p {
    position: absolute;
    left: 25px;
    bottom: 25px;
}

.index-pro ul li > p a {
    color: #333333;
}

.idxpro-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 100%;
    top: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.index-pro ul li:hover .idxpro-cover {
    right: 0;
    opacity: 1;
}

.idxpro-cover img {
    width: 100%;
    height: 100%;
}

.idxpro-box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: left;
    color: #FFF;
    background: -moz-linear-gradient(left, #20346f, rgba(9, 80, 64, 0) 100%);
    background: -webkit-linear-gradient(left, #20346f, rgba(9, 80, 64, 0) 100%);
    background: linear-gradient(to right, #20346f, rgba(9, 80, 64, 0) 100%);
}

.idxpro-cover .idxpro-txt {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
}

.idxpro-cover .idxpro-txt p {
    font-size: 28px;
    font-family: 'PingFangSCBold';
}

.idxpro-cover .idxpro-txt span {
    display: block;
    font-size: 14px;
    margin-top: 26px;
}

.index-pro ul li:nth-child(1) {
    width: 48%;
    padding-top: 100px;
    height: 460px;
}

.index-pro ul li:nth-child(2) {
    width: 24.5%;
    padding-top: 100px;
    height: 460px;
    background-color: #f1f1f1;
}

.index-pro ul li:nth-child(3) {
    width: 24.5%;
    padding-top: 100px;
    height: 460px;
}

.index-pro ul li:nth-child(5) {
    background-color: #f3f3f3;
}


.index-about {
    position: relative;
    padding-bottom: 20px;
}

.index-about .pc {
    display: block;
}

.index-about .mo {
    display: none;
}

.idxabout-box {
    position: absolute;
    left: 50%;
    margin-left: -705px;
    top: 160px;
    color: #FFF;
}

.idxabout-name {
    font-family: 'PingFangSCBold';
    font-size: 36px;
    line-height: 1.3;
}

.idxabout-font {
    line-height: 1.5;
    margin-top: 55px;
}

.idxabout-box ul {
    margin-top: 50px;
}

.idxabout-box li {
    float: left;
    margin-right: 170px;
}

.scroNum-show .data-font {
    height: 58px;
    line-height: 58px;
}

.scroNum-show .data-font span {
    display: inline-block;
    font-family: 'DIN1451EF';
    font-size: 60px;
}

.scroNum-show .data-font i {
    display: inline-block;
    font-size: 14px;
}

.scroNum-show p {
    font-size: 14px;
}

.idxabout-swiper .swiper-button-prev {
    width: 40px;
    height: 40px;
    background: url(../img/arrow-icon01.png) no-repeat center;
    left: 50%;
    margin-left: -820px;
    margin-top: -20px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.idxabout-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    background: url(../img/arrow-icon02.png) no-repeat center;
    right: 50%;
    margin-right: -820px;
    margin-top: -20px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.idxabout-base .wrap {
    background-color: #f5f5f5;
    margin-top: -80px;
    position: relative;
    z-index: 99;
}

.idxabout-base ul {
    padding: 70px 0 70px 8%;
}

.idxabout-base li {
    float: left;
    width: 20%;
    color: #666;
}

.idxabout-base li .data-font span {
    color: #222222;
}

.idxabout-base li .data-font {
    color: #222;
    font-size: 30px;
}


.index-join {
    padding: 210px 0;
    position: relative;
}

.index-join .wrap {
    position: relative;
    z-index: 1;
}

.index-join .pc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.index-join .mo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.idxjoin-fl {
    float: left;
    color: #FFF;
}

.idxjoin-fl i {
    display: block;
    text-transform: uppercase;
    font-size: 24px;
    font-family: Arial;
}

.idxjoin-fl p {
    font-family: 'PingFangSCBold';
    font-size: 48px;
    line-height: 1.25;
    margin-top: 12px;
}

.idxjoin-fl .more-arr {
    border-color: #FFF;
    color: #FFF;
    margin-top: 84px;
}

.idxjoin-fl .more-arr:hover {
    border-color: #20346f;
}

.idxjoin-fr {
    float: right;
    width: 640px;
}

.idxjoin-fr ul {
    margin-top: -20px;
}

.idxjoin-fr li {
    float: left;
    width: 160px;
    margin-left: 50px;
    text-align: center;
}

.idxjoin-fr li a {
    display: block;
    padding: 36px 0;
    position: relative;
    z-index: 99;
}

.idxjoin-fr li a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(32, 52, 111, .5);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    z-index: -1;
}

.idxjoin-fr li a:hover:before {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}

.idxjoin-fr li span {
    display: block;
    color: #FFF;
    font-size: 18px;
    margin-top: 12px;
}

.index-news ul {
    margin-left: -1.3%;
}

.index-news li {
    float: left;
    width: 32%;
    margin-left: 1.3%;
    overflow: hidden;
    background-color: #f5f5f5;
}

.index-news li .idxnews-pic a {
    display: block;
    position: relative;
    padding-top: 68%;
    overflow: hidden;
}

.index-news li .idxnews-pic a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.index-news li .idxnews-pic a:hover img {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}

.index-news li .idxnews-info {
    padding: 40px 30px;
}

.index-news li .idxnews-info span {
    color: #999999;
    display: block;
}

.index-news li .idxnews-info a {
    color: #222;
    font-size: 18px;
    line-height: 30px;
    height: 60px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 16px;
}

.index-news li .idxnews-info a:hover {
    color: #20346f;
}

.index-msg {
    padding: 80px 0 50px;
    background: url(../img/index-msg.jpg) no-repeat left top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.index-msg .index-name .index-namefl {
    float: none;
    text-align: center;
}

.index-msg .index-name h2 {
    display: block;
    margin-right: 0;
}

.index-msg form {
    position: relative;
    margin-top: -40px;
}

.msg-info {
    margin-left: -1%;
}

.msg-info li {
    float: left;
    width: 27%;
    margin-left: 1%;
    background-color: #FFF;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 25px;
}

.msg-info li:nth-child(3) {
    width: 43%;
}

.msg-info li:nth-child(4) {
    width: 73%;
}

.msg-info li input, .msg-info li textarea {
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding: 0 24px;
    background-color: #FFF;
    color: #333;
    font-size: 14px;
    font-family: "Microsoft YaHei", "微软雅黑";
}

.msg-btn {
    position: absolute;
    right: 0;
    bottom: 25px;
    width: 25.3%;
    border-radius: 4px;
    overflow: hidden;
}

.msg-btn input {
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    background-color: #20346f;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.msg-btn input:hover {
    background-color: #26292e;
}

.msg-btn button {
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    background-color: #20346f;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.msg-btn button:hover {
    background-color: #26292e;
}

.ser-store .outer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.ser-store .outer select {
    flex: 0 0 calc(33.3% - 12px);
    display: block;
    height: 53px;
    padding-left: 18px;
    color: #333;
    font-size: 15px;
    border: 1px solid #d7d7d7;
    background: #fff url(../img/arr-b1.png) no-repeat right 21px center / 13px 7px;
}

/* product style */
.ban-top {
    position: relative;
}

.ban-top img {
    width: 100%;
}

.ban-box {
    position: absolute;
    bottom: 180px;
    left: 50%;
    margin-left: -705px;
    color: #FFF;
    line-height: 1.1;
}

.ban-box strong {
    display: block;
    font-size: 40px;
    font-family: 'PingFangSCBold';
}

.ban-box span {
    display: block;
    font-family: Arial;
    font-size: 24px;
    text-transform: uppercase;
    margin-top: 15px;
}

.box-link {
    background-color: #f5f5f5;
    text-align: center;
}

.box-link ul {
    display: inline-block;
    font-size: 0;
    height: 70px;
    line-height: 70px;
}

.box-link li {
    display: inline-block;
    width: 170px;
    text-align: center;
}

.box-link li a {
    display: block;
    color: #333;
    font-size: 16px;
}

.box-link li:hover a, .box-link li.on a {
    background-color: #20346f;
    color: #FFF;
}

.box-type {
    margin-top: 60px;
}

.box-type li {
    display: inline-block;
    margin-right: 80px;
}

.box-type li a {
    color: #666;
}

.box-type li .on {
    color: #20346f;
}

.box-type li:hover a {
    color: #20346f;
}

.box-list {
    padding: 100px 0 120px;
}

.list-pro {
    margin-left: -2%;
}

.list-pro li {
    float: left;
    width: 31.3%;
    margin-left: 2%;
    background-color: #f5f5f5;
    margin-bottom: 80px;
}

.list-pro li .list-pic a {
    display: block;
    position: relative;
    padding-top: 65%;
    overflow: hidden;
}

.list-pro li .list-pic a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.list-pro li .list-pic a:hover img {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}

.list-pro li .list-info {
    padding: 30px;
    position: relative;
    line-height: 1.2;
    z-index: 99;
}

.list-pro li .list-info:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #20346f;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    z-index: -1;
}

.list-pro li .list-info span {
    display: block;
    color: #999999;
    font-size: 14px;
    margin-top: 16px;
}

.list-pro li .list-info .list-txt {
    color: #333333;
    font-size: 18px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list-pro li .list-more {
    position: absolute;
    top: 30px;
    right: 40px;
}

.list-pro li .list-more .listm-hide {
    display: none;
}

.list-pro li:hover .list-info:before {
    width: 100%;
}

.list-pro li:hover .list-info .list-txt {
    color: #FFF;
}

.list-pro li:hover .list-info span {
    color: #FFF;
}

.list-pro li:hover .list-more .listm-hide {
    display: inline-block;
}

.list-pro li:hover .list-more .listm-show {
    display: none;
}

.page-show {
    text-align: center;
}

.page-show ul {
    display: inline-block;
    font-size: 0;
}

.page-show li {
    display: inline-block;
    text-align: center;
    margin: 0 5px;
}

.page-show li img {
    margin-top: -3px;
}

.page-show li span, .page-show li a {
    display: block;
    color: #0f0f0f;
    font-size: 14px;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #bfbfbf
}

.page-show li.pagebtn span, .page-show li.pagebtn a {
    padding: 0 16px;
}

.page-show li.pageactive span {
    background-color: #20346f;
    border-color: #20346f;
    color: #FFF;
}

.page-show li a:hover {
    background-color: #20346f;
    border-color: #20346f;
    color: #FFF;
}

/*分页*/
.m-pages {
    text-align: center;
}

.m-pages ul {
    display: inline-block;
    font-size: 0;
}

.m-pages li {
    display: inline-block;
    text-align: center;
    margin: 0 5px;
}

.m-pages li img {
    margin-top: -3px;
}

.m-pages li span, .m-pages li a {
    display: block;
    color: #0f0f0f;
    font-size: 14px;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #bfbfbf
}

.m-pages li.fengye span, .m-pages li.fengye a {
    padding: 0 16px;
}

.m-pages li.active a {
    background-color: #20346f;
    border-color: #20346f;
    color: #FFF;
}

.m-pages li a:hover {
    background-color: #20346f;
    border-color: #20346f;
    color: #FFF;
}

.m-pages select {
    width: 50px;
    height: 40px;
    line-height: 40px;
    color: #3f3837;
    padding-left: 10px;
    /*background: url(../img/qwy-i4.png) #fff center right 10px no-repeat;*/
    font-size: 14px;
    border: 1px solid #bfbfbf;
    vertical-align: bottom;
}

/*分页*/


.inner-box {
    background: url(../img/inner-bg.jpg) no-repeat left bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 40px 0 90px;
}

.inner-return {
    float: left;
}

.inner-return a {
    display: block;
    padding: 0 30px;
    line-height: 44px;
    color: #FFF;
    font-size: 14px;
    background-color: #20346f;
    border-radius: 44px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.inner-return a img {
    margin-right: 15px;
}

.inner-return a:hover {
    background-color: #333;
}

.inner-place {
    float: right;
    font-size: 0;
}

.inner-place img {
    display: inline-block;
    margin-top: -12px;
    margin-right: 24px;
}

.inner-place ol {
    display: inline-block;
}

.inner-place li {
    display: inline-block;
    color: #FFF;
    font-size: 16px;
    line-height: 44px;
}

.inner-place li i {
    margin: 0 8px;
}

.inner-place li a {
    color: #FFF;
}

.inner-place li a:hover {
    color: #20346f;
}

.inner-show {
    background-color: #FFF;
    padding: 60px 66px;
    margin-top: 40px;
}

.inner-fl {
    float: left;
    width: 50%;
    position: relative;
}

.inner-swiper .swiper-slide img {
    width: 100%;
}

.inner-swiper .swiper-button-prev {
    width: 26px;
    height: 26px;
    background: url(../img/inner-arrow01.png) no-repeat center;
    left: 7%;
    margin-top: -13px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.inner-swiper .swiper-button-next {
    width: 26px;
    height: 26px;
    background: url(../img/inner-arrow02.png) no-repeat center;
    right: 7%;
    margin-top: -13px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.inner-fr {
    float: right;
    width: 46%;
}

.inner-fr span {
    display: block;
    color: #999;
    font-size: 18px;
    margin-top: 20px;
}

.inner-fr h1 {
    color: #333;
    font-size: 40px;
    font-weight: normal;
    margin-top: 24px;
}

.inner-fr p {
    color: #333;
    font-size: 16px;
    margin-top: 18px;
    line-height: 1.3;
}

.inner-fr ul {
    border-top: 1px solid #d7d7d7;
    margin-top: 30px;
    padding-top: 30px;
}

.inner-fr li {
    color: #666;
    font-size: 14px;
    line-height: 2.57;
}

.inner-fr .summary {
    white-space: pre-wrap;
    color: #666;
    font-size: 14px;
    line-height: 2.57;
}

.inner-main {
    background-color: #f5f5f5;
    padding: 90px 0 120px;
}

.inner-mfl {
    float: left;
    width: 74%;
}

.inner-white {
    border: 1px solid #ececec;
    background-color: #FFF;
    padding: 60px;
}

.inner-name {
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 36px;
    color: #333;
    font-size: 30px;
}

.inner-word {
    margin-top: 66px;
    position: relative;
}

.inner-word p {
    color: #333;
    font-size: 14px;
    line-height: 2.1;
    margin-bottom: 36px;
}

.inner-word p a {
    color: #333;
}

.inner-word p a:hover {
    color: #20346f;
}

.inner-word p img, .inner-word p video {
    max-width: 100%;
    height: 750px;
}

.inner-word .tubiao {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.inner-word .tubiao img {
    display: block;
    margin: 0 auto;
}

.inner-mfr {
    float: right;
    width: 23%;
    margin-top: 30px;
}

.inner-mfr strong {
    display: block;
    color: #333;
    font-size: 20px;
    font-weight: normal;
    border-left: 2px solid #20346f;
    padding-left: 14px;
    margin-bottom: 24px;
}

.inner-mfr li {
    margin-bottom: 50px;
}

.inner-mfr li .inner-spic {
    display: block;
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}

.inner-mfr li .inner-spic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.inner-mfr li .inner-spic:hover img {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}

.inner-mfr li .inner-stxt {
    color: #333333;
    font-size: 16px;
    line-height: 1.6;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 20px;
}

.inner-mfr li .inner-stxt:hover {
    color: #20346f;
}

.inner-mfr span {
    display: block;
    color: #999;
    font-size: 14px;
    margin-top: 20px;
}

.inner-code {
    background-color: #FFF;
    padding: 25px;
    border: 1px solid #ececec;
}

.inner-codes {
    background-color: #f8f8f8;
    text-align: center;
    padding: 22px;
}

.inner-codes img {
    border: 10px solid #FFF
}

.inner-codes p {
    color: #000;
    font-size: 14px;
    margin-top: 15px;
}

/* about style */
.about-intro {
    margin-top: 120px;
}

.about-ifl {
    float: left;
}

.index-name.index-aname i {
    display: block;
}

.about-ifr {
    float: right;
    width: 64%;
}

.about-ifr p {
    color: #333;
    font-size: 14px;
    line-height: 2.1;
    margin-bottom: 30px;
}

.about-pic {
    margin-top: 50px;
}

.about-pic img {
    width: 100%;
}

.about-data ul {
    padding: 70px 0 70px 10%;
}

.about-data li {
    float: left;
    width: 25%;
    color: #666;
}

.about-data li .data-font span {
    color: #222222;
}

.about-data li .data-font {
    color: #222;
    font-size: 30px;
}

.about-pics ul {
    margin-left: -0.8%;
}

.about-pics li {
    float: left;
    width: 49.2%;
    margin-left: 0.8%;
    margin-bottom: 10px;
}

.about-pics li:nth-child(3) {
    width: 24.2%;
}

.about-pics li:nth-child(4) {
    width: 24.2%;
}

.about-story {
    background: url(../img/about-bg01.jpg) no-repeat left bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 100px 0;
}

.about-story .index-name {
    text-align: center;
}

.about-story .index-name h2 {
    margin-right: 0;
}

.about-sbox {
    background-color: #FFF;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
}

.about-sfl {
    padding: 100px 200px;
    position: relative;
}

.about-sfl:before {
    content: '';
    position: absolute;
    left: 96px;
    top: 90px;
    background: url(../img/about-icon01.png) no-repeat;
    width: 70px;
    height: 58px;
}

.about-tit strong {
    display: inline-block;
    color: #333;
    font-size: 36px;
    font-family: 'PingFangSCBold';
}

.about-tit i {
    display: inline-block;
    color: #666;
    margin-left: 10px;
}

.about-tit p {
    color: #333;
    font-size: 24px;
    font-family: 'PingFangSCBold';
    margin-top: 32px;
}

.about-sfl > p {
    color: #666;
    font-size: 14px;
    line-height: 2.1;
    margin-top: 40px;
}

.about-sfl img {
    position: absolute;
    right: 120px;
    bottom: 77px;
}

.about-sfr {
    width: 36.6%;
}

.about-sfr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-culture {
    background: url(../img/about-bg02.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 140px 0;
    color: #FFF;
}

.about-culture .index-name h2, .about-culture .index-name i {
    color: #FFF;
}

.about-culture strong {
    display: block;
    font-size: 36px;
    padding-top: 20px;
}

.about-culture span {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 60px;
}

.about-culture p {
    line-height: 1.8;
    margin-top: 30px;
}

.about-history {
    background: url(../img/about-bg03.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 120px 0;
    position: relative;
}

.about01-swiper:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 1px;
    background-color: #999999;
}

.about-history .index-name {
    text-align: center;
}

.about-history .index-name h2 {
    margin-right: 0;
}

.about01-swiper .swiper-slide {
    text-align: center;
    cursor: pointer;
}

.about01-swiper .swiper-slide span {
    display: block;
    position: relative;
    padding-top: 44px;
    color: #999999;
    font-size: 18px;
}

.about01-swiper .swiper-slide span:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid #999999;
    border-radius: 50%;
    background-color: #FFF;
    margin: 0 auto;
}

.about01-swiper .swiper-slide-thumb-active:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 3px;
    background-color: #20346f;
}

.about01-swiper .swiper-slide-thumb-active span:before {
    width: 24px;
    height: 24px;
    z-index: 2;
    border-color: #20346f;
    top: 0;
    background-color: #FFF;
}

.about01-swiper .swiper-slide-thumb-active span:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #20346f;
    margin: 0 auto;
    z-index: 2;
}

.about01-swiper .swiper-slide-thumb-active span {
    color: #20346f;
    font-size: 24px;
}

.about02-swiper {
    background-color: #FFF;
    margin-top: 66px !important;
    -moz-box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    -webkit-box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    position: relative;
}

.about-hfl {
    width: 60%;
    padding: 70px 100px;
}

.about-hfl p {
    color: #333333;
    font-size: 18px;
    line-height: 1.67;
}

.about-hfr {
    width: 40%;
}

.about-hfr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-item {
    padding: 40px;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
}

.about-htit {
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.about-htit strong {
    display: inline-block;
    color: #20346f;
    font-size: 48px;
    font-family: Arial;
    font-weight: normal;
}

.about-htit span {
    display: inline-block;
    color: #222;
    font-size: 30px;
    margin-left: 36px;
}

.about02-swiper .swiper-button-prev {
    width: 32px;
    height: 32px;
    background: url(../img/about-arrow01.png) no-repeat center;
    left: 50%;
    margin-left: -50px;
    top: auto;
    bottom: 60px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.about02-swiper .swiper-button-next {
    width: 32px;
    height: 32px;
    background: url(../img/about-arrow02.png) no-repeat center;
    left: 50%;
    top: auto;
    bottom: 60px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.about02-swiper .swiper-button-prev:hover {
    background-image: url(../img/about-arrow03.png);
}

.about02-swiper .swiper-button-next:hover {
    background-image: url(../img/about-arrow04.png);
}

.about-honor {
    background: url(../img/about-bg04.jpg) no-repeat right top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 100px 0 160px;
    position: relative;
    overflow: hidden;
}

.about-htab {
    margin-left: 13%;
}

.about03-swiper .swiper-slide {
    background-color: #FFF;
    text-align: center;
    padding: 40px 40px 20px;
}

.about03-swiper .swiper-slide p {
    color: #222;
    margin-top: 15px;
    font-size: 16px;
    line-height: 22px;
    height: 44px;
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.about03-swiper .img {
    height: 297px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.about03-swiper .img img {
    max-width: 100%;
    max-height: 100%;
}

.pop-img {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    z-index: 999999;
}

.pop-img.open {
    display: -webkit-flex;
    display: flex;
}

.pop-img .con {
    width: 700px;
    max-width: 90%;
    display: -webkit-flex;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    align-content: center;
    height: 80vh;
}

.pop-img .con .img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.pop-img .con .close {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.about-honor .swiper-button-prev {
    width: 32px;
    height: 32px;
    background: url(../img/about-arrow01.png) no-repeat center;
    left: auto;
    top: auto;
    bottom: 90px;
    left: 50%;
    margin-left: -40px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.about-honor .swiper-button-next {
    width: 32px;
    height: 32px;
    background: url(../img/about-arrow02.png) no-repeat center;
    left: auto;
    top: auto;
    bottom: 90px;
    right: 50%;
    margin-right: -40px;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.about-honor .swiper-button-prev:hover {
    background-image: url(../img/about-arrow03.png);
}

.about-honor .swiper-button-next:hover {
    background-image: url(../img/about-arrow04.png);
}

.about-case {
    padding: 100px 0;
}

.about-case .index-name {
    text-align: center;
}

.about-case .index-name h2 {
    margin-right: 0;
}

.about-cbtn {
    text-align: center;
}

.about-cbtn a {
    display: inline-block;
    text-align: left;
}

.box-place {
    margin-top: 40px;
    margin-bottom: -40px;
}

.box-place .inner-place {
    float: none;
}

.inner-place.place-grey li {
    color: #666;
}

.inner-place.place-grey li a {
    color: #666;
}

.inner-place.place-grey li a:hover {
    color: #20346f;
}

.case-box {
    padding: 60px 0 100px;
}

.case-show {
    margin-top: 50px;
}

.case-show h1 {
    color: #333333;
    font-size: 32px;
    text-align: center;
    margin-bottom: 50px;
}

.case-show img {
    width: 100%;
}

.box-page {
    margin-top: 50px;
}

.box-page a {
    display: inline-block;
    padding: 0 40px;
    border: 1px solid #999;
    line-height: 48px;
    text-align: center;
    margin-right: 20px;
    color: #333;
    font-size: 14px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.box-page a.on, .box-page a:hover {
    background-color: #20346f;
    border-color: #20346f;
    color: #FFF;
}

.box-page a.on:hover {
    background-color: #222;
    border-color: #222;
}

.video-pic {
    display: block;
    position: relative;
    padding-top: 65%;
    overflow: hidden;
    cursor: pointer;
}

.video-pic:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: url(../img/video-play.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
}

.video-pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.video-pic:hover img {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}

.video-txt {
    cursor: pointer;
}


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

.video-mask-view {
    background: #FFFFFF;
    padding: 20px;
    width: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-mp4 video, .video-mask-view video {
    width: 100%;
}

.video-mask-view .video-mtxt {
    font-size: 18px;
    color: #333;
    margin-top: 15px;
}

.video-mask-view .close {
    position: absolute;
    right: -50px;
    top: 0;
    width: 40px;
    height: 40px;
    background-color: #20346f;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

.video-mask-view .close img {
    width: 16px;
}


/* join style */
.join-base {
    background: url(../img/join-bg01.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 100px 0;
}

.join-bfl {
    float: left;
    width: 63%;
    padding-right: 9%;
    margin-top: 70px;
}

.join-bfl p {
    color: #333333;
    line-height: 2.25;
    margin-bottom: 44px;
    margin-top: -20px;
}

.join-bfr {
    float: right;
    width: 37%;
}

.join-bfr img {
    width: 100%;
}

.index-name p {
    color: #333;
    font-size: 18px;
    line-height: 1.67;
}

.join-good .index-name {
    text-align: center;
}

.join-good .index-name h2 {
    margin-right: 0;
}

.join-good ul {
    margin-left: -2%;
}

.join-good li {
    float: left;
    width: 31.3%;
    margin-left: 2%;
    position: relative;
    text-align: center;
    color: #FFF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.join-good li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}

.join-good li > img {
    width: 100%;
}

.join-ginfo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.join-ginfo img {
    display: block;
    margin: 0 auto
}

.join-ginfo strong {
    display: block;
    font-size: 30px;
    font-family: 'PingFangSCBold';
    line-height: 1.2;
    position: relative;
    padding-bottom: 28px;
    margin-top: 24px;
}

.join-ginfo strong:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #FFF;
    margin: 0 auto;
}

.join-ginfo p {
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    margin-top: 36px;
    display: none;
}

.join-data {
    position: absolute;
    top: 36px;
    right: 26px;
}

.join-good .joinz-item {
    position: relative;
    text-align: center;
    color: #FFF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.join-good .joinz-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}

.join-good .joinz-item > img {
    width: 100%;
}

.join-good .joinz-item:hover:before {
    background-color: rgba(32, 52, 111, .8);
}

.join-good .joinz-item:hover .join-ginfo p {
    display: block;
}

.joinz-swiper.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0;
    display: none;
}

.joinz-swiper.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}

.joinz-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 2px solid #CCC;
    background: transparent;
    opacity: 1;
}

.joinz-swiper .swiper-pagination-bullet-active {
    background: #20346f;
    border-color: #20346f;
}

.join-good li:hover:before {
    background-color: rgba(9, 80, 64, .8);
}

.join-good li:hover .join-ginfo p {
    display: block;
}

.join-step {
    margin-top: 140px;
}

.join-step .index-name {
    text-align: center;
}

.join-step .index-name h2 {
    margin-right: 0;
}

.join-step ul {
    position: relative;
}

.join-step ul:before {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: 216px;
    height: 52px;
    background: url(../img/join-step.png) no-repeat;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

.join-step li {
    float: left;
    width: 12.6%;
    height: 206px;
    padding: 40px 0 20px;
    background-color: #20346f;
    text-align: center;
    color: #FFF;
    position: relative;
}

.join-step li p {
    font-size: 18px;
    line-height: 1.33;
    margin-top: 16px;
}

.join-step li span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: 0 auto;
    font-size: 18px;
    text-decoration: underline;
}

.join-step li:nth-child(2), .join-step li:nth-child(4), .join-step li:nth-child(6), .join-step li:nth-child(8) {
    margin-top: 280px;
    margin-left: -24px;
}

.join-step li:nth-child(3), .join-step li:nth-child(5), .join-step li:nth-child(7), .join-step li:nth-child(9) {
    margin-left: -24px;
}

.join-step li:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 1px solid #20346f;
    border-radius: 50%;
    margin: 0 auto;
}

.join-step li:nth-child(even):before {
    top: -16px;
    bottom: auto;
}

.join-step li img {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.join-step li:hover img {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.join-help {
    background: url(../img/join-bg02.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 100px 0;
}

.join-help .index-name {
    text-align: center;
}

.join-help .index-name h2 {
    margin-right: 0;
}

.join-help .index-name h2, .join-help .index-name p {
    color: #FFF;
}

.join-htab, .join-ttab {
    text-align: center;
}

.join-tab {
    display: inline-block;
    text-align: center;
    font-size: 0;
}

.join-tab li {
    display: inline-block;
    color: #FFF;
    font-size: 16px;
    margin: 0 40px;
    position: relative;
    padding-bottom: 16px;
    cursor: pointer;
}

.join-tab li:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 27px;
    height: 2px;
    background-color: #FFF;
    margin: 0 auto;
    display: none;
}

.join-tab li.on:before, .join-tab li:hover:before {
    display: block;
}

.join-hbox {
    margin-top: 24px;
}

.join-hno {
    display: none;
}

.join-hshow ul {
    margin-left: -0.5%;
}

.join-hshow li {
    float: left;
    margin-left: 0.5%;
}

.join-hshow li img {
    width: 100%;
}

.join-hshow li:nth-child(1) {
    width: 50%;
}

.join-hshow li:nth-child(2) {
    width: 23%;
}

.join-hshow li:nth-child(2) img {
    margin-bottom: 10px;
}

.join-hshow li:nth-child(3) {
    width: 25%;
}

.join-help .join-hbox img, .join-train .join-hbox img {
    width: 100%;
}

.join-photo .index-name {
    text-align: center;
}

.join-photo .index-name h2 {
    margin-right: 0;
}

.join-ptab {
    margin-left: -1%;
    margin-top: 16px;
}

.join-ptab li {
    float: left;
    margin-left: 1%;
    width: 24%;
    position: relative;
    cursor: pointer;
}

.join-ptab li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 6px solid #20346f;
    display: none;
}

.join-ptab li img {
    width: 100%;
}

.join-ptab li.on:before {
    display: block;
}

.join-train .index-name {
    text-align: center;
}

.join-train .index-name h2 {
    margin-right: 0;
}

.join-train .join-tab li {
    color: #333;
}

.join-train .join-tab li:before {
    background-color: #20346f;
}

.join-tshow ul {
    margin-left: -0.5%;
}

.join-tshow li {
    float: left;
    margin-left: 0.5%;
    width: 32.8%;
    margin-bottom: 12px;
}

.join-tshow li img {
    width: 100%;
}

.join-tshow li:nth-child(1) {
    width: 59.5%;
}

.join-tshow li:nth-child(2) {
    width: 39.5%;
}

.join-spot {
    background: url(../img/join-bg03.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 140px 0 120px;
}

.join-spot .index-name {
    text-align: center;
}

.join-spot .index-name h2 {
    margin-right: 0;
}

.join-spot .index-name h2, .join-spot .index-name i {
    color: #FFF;
}

.join-spot ul {
    margin-left: -1%;
}

.join-spot li {
    float: left;
    width: 24%;
    margin-left: 1%;
    position: relative;
    text-align: center;
    color: #333;
    background-color: #FFF;
    padding: 40px;
}

.join-spot li img {
    display: block;
    margin: 0 auto
}

.join-spot li strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 20px;
    margin-top: 16px;
}

.join-spot li strong:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 1px;
    background-color: #20346f;
    margin: 0 auto;
}

.join-spot li p {
    line-height: 24px;
    margin-top: 16px;
}

.join-elite {
    background: url(../img/join-bg04.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 120px 0 70px;
}

.join-elite .index-name {
    text-align: center;
}

.join-elite .index-name h2 {
    margin-right: 0;
}

.elite-swiper .about-sfr {
    float: left;
    width: 47%;
}

.elite-swiper .about-sfl {
    float: left;
    width: 53%;
    padding: 140px;
}

.elite-swiper .about-sfl:before {
    left: 60px;
    top: 80px;
}

.elite-swiper .about-tit p {
    color: #000;
    font-size: 18px;
    line-height: 2;
}

.elite-swiper .about-sfl > p {
    font-size: 16px;
    line-height: 1.5;
}

.elite-swiper .about-sfl span {
    position: absolute;
    top: 50px;
    right: 66px;
    color: #1b1b1b;
    font-size: 20px;
    font-weight: bold;
}

.elite-swiper .about-sfl span img {
    position: static;
    margin-right: 15px;
    margin-top: -3px;
}

.elite-swiper {
    padding-bottom: 60px !important;
}

.elite-swiper.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0;
}

.elite-swiper.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}

.elite-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 1px solid #9c9c9c;
    background: transparent;
    opacity: 1;
}

.elite-swiper .swiper-pagination-bullet-active {
    background: #20346f;
    border-color: #20346f;
}

.join-process .index-name {
    text-align: center;
}

.join-process .index-name h2 {
    margin-right: 0;
}

.join-process ul {
    margin-left: -3.3%;
    position: relative;
}

.join-process ul:before {
    content: '';
    position: absolute;
    left: 51.5%;
    top: 0;
    bottom: 25px;
    border-left: 2px dashed #999999;
}

.join-process li {
    float: left;
    width: 46.7%;
    margin-left: 3.3%;
    background-color: #f5f5f5;
    margin-bottom: 25px;
    padding: 24px 40px;
    position: relative;
    text-align: right;
}

.join-process li:before {
    content: '';
    position: absolute;
    right: -4.6%;
    top: 25px;
    width: 12px;
    height: 12px;
    background-color: #FFF;
    border: 2px solid #20346f;
    border-radius: 50%;
}

.join-process li:nth-child(even) {
    text-align: left;
}

.join-process li:nth-child(even):before {
    right: auto;
    left: -4.6%;
    top: auto;
    bottom: 25px;
}

.join-process li span {
    display: block;
    color: #333;
    font-size: 24px;
    font-family: 'PingFangSCBold';
    line-height: 1.6;
}

.join-process li p {
    color: #333;
    line-height: 24px;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 10px;
}


/* news stylw */
.list-news {
    margin-bottom: 70px;
}

.list-news li {
    clear: both;
    overflow: hidden;
    padding: 50px 0;
    position: relative;
    border-bottom: 1px solid #EEE;
}

.list-news li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #f5f5f5;
    z-index: -1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.list-npic {
    float: left;
    width: 410px;
    margin-right: 7%;
}

.list-npic a {
    display: block;
    position: relative;
    padding-top: 63.4%;
    overflow: hidden;
}

.list-npic a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.list-npic a:hover img {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}

.list-ninfo {
    display: block;
    overflow: hidden;
}

.list-ninfo .list-ntxt {
    display: block;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 40px;
}

.list-ninfo span {
    display: block;
    color: #999;
    font-size: 14px;
    margin-top: 16px;
}

.list-ninfo p {
    color: #666;
    font-size: 14px;
    line-height: 24px;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 24px;
}

.list-ninfo .list-nmore {
    display: inline-block;
    padding: 0 40px;
    line-height: 44px;
    font-size: 14px;
    color: #FFF;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    background-color: #20346f;
    border-radius: 44px;
    margin-top: 30px;
}

.list-ninfo .list-nmore:hover {
    background-color: #222;
}

.list-news li:hover:before {
    width: 100%;
}

.list-news li:hover .list-ntxt {
    color: #20346f;
}

.box-lwhite {
    background-color: #FFF;
}

.inner-main .inner-place {
    float: none;
    margin-top: -40px;
    margin-bottom: 40px;
}

.inner-intro {
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 26px;
}

.inner-intro h1 {
    color: #333;
    font-size: 24px;
    line-height: 1.3;
}

.inner-ibase {
    margin-top: 46px;
    line-height: 36px;
}

.inner-ibase span {
    float: left;
    color: #999;
}

.inner-ibase span img {
    margin-top: -3px;
    margin-right: 10px;
}

.inner-ibase p {
    float: right;
}

.inner-ibase p a {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #999;
    line-height: 36px;
    text-align: center;
    margin-left: 20px;
}

.inner-ibase p a img {
    margin-top: -3px;
}

.inner-ibase p a:hover {
    background-color: #20346f;
    border-color: #20346f;
}

.inner-chapter {
    margin-top: 60px;
}

.inner-chapter ul {
    margin-left: -1%;
}

.inner-chapter li {
    float: left;
    width: 49%;
    margin-left: 1%;
    background-color: #FFF;
    border: 1px solid #ececec;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.inner-chapter li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 14px;
    position: relative;
    padding: 0 130px 0 50px;
    line-height: 100px;
}

.inner-chapter li span {
    position: absolute;
    right: 50px;
}

.inner-chapter li span:before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    height: 14px;
    background-color: #666;
}

.inner-chapter li a:hover {
    background-color: #20346f;
    border-color: #20346f;
    color: #FFF;
}

.inner-chapter li a:hover span:before {
    background-color: #FFF;
}

.inner-chapter li:first-child {
    background-color: #20346f;
    border-color: #20346f;
}

.inner-chapter li:first-child a {
    color: #FFF;
    padding: 0 50px 0 130px;
}

.inner-chapter li:first-child span {
    right: auto;
    left: 50px;
}

.inner-chapter li:first-child span:before {
    left: auto;
    right: -26px;
    background-color: #FFF;
}

.inner-chapter li:first-child a:hover {
    background-color: #222;
}

/* contact style */
.cont-show .index-name {
    text-align: center;
}

.cont-show .index-name h2 {
    margin-right: 0;
}

.cont-show ul {
    margin-left: -1%;
}

.cont-show li {
    float: left;
    width: 32.3%;
    margin-left: 1%;
    background-color: #f5f5f5;
    height: 300px;
    text-align: center;
    padding: 66px 10px 0;
    position: relative;
    z-index: 99;
}

.cont-show li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #20346f;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    z-index: -1;
}

.cont-show li .cont-ihide {
    display: none;
}

.cont-show li strong {
    display: block;
    color: #000;
    /*font-family: 'DINNextLTPro';*/
    font-size: 26px;
    margin-top: 36px;
    margin-bottom: 6px;
}

.cont-show li span {
    display: block;
    color: #666;
    font-size: 14px;
}

.cont-show li p {
    color: #0d0d0c;
    margin-top: 38px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.cont-show li:nth-child(3) img {
    padding: 10px;
    background-color: #FFF;
}

.cont-show li:nth-child(3) .cont-scode {
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
}

.cont-show li .cont-scode i {
    display: block;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.cont-show li:hover:before {
    width: 100%;
}

.cont-show li:hover .cont-ihide {
    display: inline-block;
}

.cont-show li:hover .cont-ishow {
    display: none;
}

.cont-show li:hover p, .cont-show li:hover span, .cont-show li:hover strong, .cont-show li:hover i {
    color: #FFF;
}

.map {
    height: 770px;
    margin-top: 80px;
    overflow: hidden;
    margin-bottom: 80px;
}

#bdMap {
    height: 120%;
}

.map * {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    max-width: none;
}

.map .BMapLib_sendToPhone {
    display: none;
}

/* service style */
.ser-flow {
    background: url(../img/ser-bg01.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 140px 0 250px;
}

.ser-flow .index-name {
    text-align: center;
}

.ser-flow .index-name h2 {
    margin-right: 0;
}

.ser-flow .index-name h2, .ser-flow .index-name p {
    color: #FFF;
}

.ser-flow ul {
    margin-left: -6.2%;
}

.ser-flow li {
    float: left;
    width: 8%;
    margin-left: 6.2%;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    position: relative;
}

.ser-flow li:before {
    content: '';
    position: absolute;
    left: -46%;
    top: 45px;
    width: 30px;
    height: 18px;
    background: url(../img/ser-arrow.png) no-repeat;
}

.ser-flow li:first-child:before {
    display: none;
}

.ser-flow li span {
    display: inline-block;
    width: 108px;
    height: 108px;
    text-align: center;
    line-height: 108px;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50%;
}

.ser-flow li span img {
    width: 42px;
}

.ser-flow li p {
    margin-top: 20px;
}

.ser-flow li:hover span {
    background-color: #20346f;
}

.ser-case li .list-info span {
    margin-top: 0;
    margin-bottom: 16px;
}

.ser-order {
    background: url(../img/ser-bg02.jpg) no-repeat top right;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 140px 0 120px;
}

.ser-order .index-name {
    text-align: center;
}

.ser-order .index-name h2 {
    margin-right: 0;
}

.ser-ofl {
    float: left;
    width: 68%;
    height: 530px;
    background-color: #FFF;
    border: 1px solid #dedede;
    padding: 60px 40px;
}

.ser-ofl strong {
    display: block;
    color: #333;
    font-size: 30px;
    font-family: 'PingFangSCBold';
    text-align: center;
    line-height: 1.33;
}

.ser-ofl strong i {
    display: block;
    color: #20346f;
}

.ser-msg {
    margin-top: 46px;
}

.ser-msgfl {
    float: left;
    width: 380px;
    margin-right: 40px;
}

.ser-msgfr {
    display: block;
    overflow: hidden;
}

.ser-msgfr .msg-info {
    margin-left: -1%;
}

.ser-msgfr .msg-info li {
    width: 49%;
    margin-left: 1%;
    border: 1px solid #dedede;
    border-radius: 0;
    margin-bottom: 16px;
}

.ser-msgfr .msg-info li input, .ser-msgfr .msg-info li select {
    height: 38px;
    line-height: 38px;
    padding: 0 10px;
    width: 100%;
    font-family: "Microsoft YaHei", "微软雅黑";
    font-size: 14px;
    background-color: #FFF;
    border-radius: 0;
}

.ser-msgfr .msg-info li:nth-child(3) {
    width: 99%;
}

.ser-msgfr .msg-btn {
    position: static;
    width: 100%;
    border-radius: 0;
}

.ser-msgfr .msg-btn input {
    height: 38px;
    line-height: 38px;
}

.ser-ofr {
    float: right;
    width: 29%;
    height: 530px;
    background-color: #FFF;
    border: 1px solid #dedede;
    padding: 60px 30px;
    overflow: hidden;
}

.ser-ofr strong {
    display: block;
    color: #333;
    font-size: 24px;
    text-align: center;
    line-height: 1.33;
    font-weight: normal;
}

.ser-ofr strong i {
    display: inline-block;
    color: #20346f;
    font-family: 'DINNextLTPro';
    font-size: 30px;
    font-weight: bold;
    margin: 0 15px;
}

.ser-roll {
    margin-top: 30px;
}

.ser-roll ul {
    height: 390px;
}

.ser-roll li {
    border-top: 1px dashed #dedede;
    line-height: 55px;
    position: relative;
    font-size: 14px;
    padding-left: 110px;
}

.ser-roll li span {
    position: absolute;
    left: 10px;
    width: 66px;
    color: #20346f;
}

.ser-roll li p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #333;
}

.str_wrap {
    overflow: hidden;
    zoom: 1;
    font-size: 12px;
    line-height: 16px;
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    background: none;
    white-space: nowrap;
}

.str_wrap.str_active {
    background: none;
}

.str_move {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
}

.str_move_clone {
    display: inline-block;
    display: inline;
    zoom: 1;
    vertical-align: top;
    position: absolute;
    left: 100%;
    top: 0;
}

.str_vertical .str_move_clone {
    left: 0;
    top: 100%;
}

.str_down .str_move_clone {
    left: 0;
    bottom: 100%;
}

.str_vertical .str_move, .str_down .str_move {
    white-space: normal;
    width: 100%;
}

.str_static .str_move, .no_drag .str_move, .noStop .str_move {
    cursor: inherit;
}


.store-choose {
    line-height: 58px;
    margin-top: -30px;
    position: relative;
    z-index: 99;
}

.store-choose .store-city {
    float: left;
    width: 83%;
    position: relative;
}

.store-choose .store-search {
    float: right;
    width: 16.6%;
    margin-top: -1px;
}

.store-search button {
    width: 100%;
    background-color: #20346f;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    line-height: 58px;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.store-search button:hover {
    background-color: #222;
}

.store-choose input {
    background-color: #FFF;
    border: 1px solid #d7d7d7;
    width: 100%;
    color: #333333;
    font-size: 14px;
    line-height: 30px;
    padding: 13px 16px;
}

.store-city .iPicker-container {
    width: 32.3%;
    margin: 0;
    margin-right: 1%;

}

.store-city .iPicker-result {
    border: none !important;
    border-radius: 0 !important;
    display: block;
    height: auto !important;
    width: 100% !important;
}

.store-city .iPicker-input {
    height: auto !important;
}

.store-city .iPicker-target {
    height: auto;
}

.store-city .iPicker-container {
    height: auto;
}

.store-city .iPicker-result i {
    top: 50%;
    margin-top: -5px;
    right: 20px;
}

.store-city .iPicker-result i.arrow-icon::before {
    background-image: url(../img/ser-arrows.png);
    width: 12px;
    height: 12px;
    transform: scale(1);
    opacity: 1;
}

.store-city .iPicker-result.iPicker-result-active i::before {
    transform: scale(1) rotate(180deg);
}

.store-city .iPicker-list.iPicker-list-show {
    width: 100% !important;
    position: absolute;
}

.store-city .iPicker-select li {
    line-height: 26px;
}

.store-map {
    margin-top: 70px;
    background-color: #f5f5f5;
    height: 640px;
    overflow: hidden;
}

.store-map .store-fl {
    float: left;
    width: 63%;
    height: 100%;
}

.store-map .store-fr {
    float: right;
    width: 36%;
    padding: 0;
    height: 100%;
    padding-top: 88px;
    position: relative;
}

.store-map .store-tit {
    position: absolute;
    left: 0;
    top: 40px;
    color: #333;
    font-size: 14px;
}

.store-map .store-tit i {
    display: inline-block;
    color: #20346f;
    font-size: 18px;
    font-weight: bold;
    margin: 0 5px;
}

.store-map ul {
    overflow-y: auto;
    height: 100%;
}

.store-map ul::-webkit-scrollbar {
    width: 6px;
}

.store-map ul::-webkit-scrollbar-thumb {
    background-color: #20346f;
    border-radius: 3px;
}

.store-map ul::-webkit-scrollbar-track {
    background: #e2e2e2;
}

.store-map li {
    background-color: #FFF;
    padding: 26px;
    cursor: pointer;
    margin-bottom: 10px;
}

.store-map li strong {
    display: block;
    color: #333333;
    font-size: 18px;
    margin-bottom: 16px;
}

.store-map li p {
    position: relative;
    padding-left: 25px;
    color: #999999;
    font-size: 14px;
    line-height: 1.3;
    margin-top: 10px;
}

.store-map li span {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
}

.store-map li span img {
    margin-top: -2px;
}

.store-map li.on {
    border-color: #20346f;
}

.store-map li.on strong {
    color: #20346f;
}

.store-map .store-fl .maps-show {
    height: 100%;
}

.maps {
    height: 120%;
}

.maps * {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    max-width: none;
}

.maps-no {
    display: none;
}

.cont-msg.join-msg {
    background-color: #FFF;
    margin-top: 0;
}

.cont-msg.join-msg .join-msgtxt {
    text-align: center;
    color: #292929;
    font-size: 18px;
    margin-bottom: 50px;
}

.cont-msg.join-msg ul li input, .cont-msg.join-msg ul li textarea {
    background-color: #f5f5f5;
}

.oddz-item {
    background-color: #f5f5f5;
    margin-bottom: 80px;
}

.oddz-item .list-pic a {
    display: block;
    position: relative;
    padding-top: 65%;
    overflow: hidden;
}

.oddz-item .list-pic a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.oddz-item .list-pic a:hover img {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}

.oddz-item .list-info {
    padding: 30px;
    position: relative;
    line-height: 1.2;
    z-index: 99;
}

.oddz-item .list-info:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #20346f;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    z-index: -1;
}

.oddz-item .list-info span {
    display: block;
    color: #999999;
    font-size: 14px;
    margin-top: 16px;
}

.oddz-item .list-info .list-txt {
    color: #333333;
    font-size: 18px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.oddz-item:hover .list-info:before {
    width: 100%;
}

.oddz-item:hover .list-info .list-txt {
    color: #FFF;
}

.oddz-item:hover .list-info span {
    color: #FFF;
}

.ser-case .oddz-item .list-info span {
    margin-top: 0;
    margin-bottom: 16px;
}

.oddz-swiper.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 20px;
    display: none;
}

.oddz-swiper.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}

.oddz-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 2px solid #CCC;
    background: transparent;
    opacity: 1;
}

.oddz-swiper .swiper-pagination-bullet-active {
    background: #20346f;
    border-color: #20346f;
}

/* side */
.zside-box{position: fixed; bottom:240px;right: 16px; z-index: 99999;}
.zside-box li{width: 48px;height: 48px;line-height: 48px;text-align: center; background-color: #FFF;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 50%;margin-bottom: 10px; cursor: pointer;position: relative;}
.zside-box li > img{width: 24px;margin-top: -3px;}
.zside-box li > a{display: block;}
.zside-box li .side-have{position: absolute;top: -6px;right: 60px; width: 130px;min-height: 48px;border:1px solid #e3eaf2;border-radius: 10px; background-color: #FFF;color: #666;font-size: 12px;padding: 8px 10px;line-height: 20px;text-align: left;display: none;}
.zside-box li .side-have:before{content: '';position: absolute;right: -9px;top: 24px; width: 9px;height: 12px;background: url(../img/side-arrow.png) no-repeat;}
.zside-box li .side-have strong{display: block;color: #20346f;font-size: 14px;}
.zside-box li .side-have img{width: 100%;display: block; margin: 0 auto;}
.zside-box li:hover .side-have{display: block;}

.znav-box{position: fixed; left: 0;bottom: 0; overflow: hidden;width: 100%; min-width: 320px;height: 66px; background: #1e1e1e;z-index: 99999;display: none;}
.znav-box li{float: left;width: 25%;text-align: center;position: relative;height: 66px;padding: 8px;}
.znav-box li:before{content: "";position: absolute;top: 0;left: 0;width: 1px;height: 100%;background: #424242;}
.znav-box li:first-child:before{display: none;}
.znav-box li a{display: block;color: #FFF;font-size: 14px;}
.znav-box li img{width: 26px;}
.znav-box li span{display: block;margin-top: 6px;}

.about-pic{position: relative;cursor: pointer;}
.about-pic:before { content: ''; position: absolute;left: 0;right: 0;top: 0;bottom: 0; background-color: rgba(66,66,66,.2); z-index: 2;}
.about-pic:after { content: ''; position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);width: 64px;height: 64px;background: url(../img/video-play.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover;background-size: cover; z-index: 2;}

.zpopu-show.open{top: 0;opacity: 1;filter: alpha(opacity=100);}
.zpopu-show{position: fixed;width: 100%;height: 100%;left: 0;top: -100%;-webkit-transition: .3s;-ms-transition: .3s;-moz-transition: .3s;-o-transition: .3s;transition: .3s;opacity: 0;filter: alpha(opacity=0);z-index: 999999;}
.zpopu-show .zpopu-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, .5);}
.zpopu-show .zpopu-close{position: absolute;right: 0;top:-36px;}
.zpopu-show .zpopu-close img{cursor: pointer;}
.zpopu-show .zpopu-box{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);z-index: 1; width: 94%; max-width: 700px;background-color: #FFF;text-align: left;font-size: 14px;}
.zpopu-show .zpopu-box video{width: 100%;}

.zpic-m{display: none;}
.nav-layer{position: absolute; left: 0;right: 0; top: 100%;text-align: center;background-color: #FFF;padding: 50px 0;display: none;}
.nav-layer.nav-lyon{display: block;}
.tpro-swiper{margin: 0 100px!important;}
.nav-layer .swiper-button-prev {width: 26px;height: 26px;background: url(../img/nav-arrow01.png) no-repeat center;left: 180px;margin-top: -40px;-webkit-background-size: 100% auto;-moz-background-size: 100% auto;-o-background-size: 100% auto; background-size: 100% auto;}
.nav-layer .swiper-button-next { width: 26px;height: 26px;background: url(../img/nav-arrow02.png) no-repeat center;right: 180px;margin-top: -40px;-webkit-background-size: 100% auto; -moz-background-size: 100% auto;-o-background-size: 100% auto;background-size: 100% auto;}
.nav-layer .swiper-slide a{ display: block;padding-bottom: 20px;border-bottom: 1px solid #d7d7d7;overflow: hidden;}
.nav-layer .swiper-slide a .nav-lypic{position: relative;padding-top: 65%;overflow: hidden;}
.nav-layer .swiper-slide a .nav-lypic img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
.nav-layer .swiper-slide a:hover .nav-lypic img {
    -webkit-transform: scale(1.08, 1.08);
    -moz-transform: scale(1.08, 1.08);
    -ms-transform: scale(1.08, 1.08);
    -o-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
}
.nav-layer .swiper-slide a .nav-lytxt{color: #333333;font-size: 16px;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: left;line-height: 50px;}
.nav-layer .swiper-slide a:hover .nav-lytxt{color: #20346f;}
.nav-layer .swiper-slide a:hover{border-color: #20346f;}
.nav-layer ol{display: -webkit-flex;display: flex;justify-content: center;/* 水平居中 */align-items:center;/* 垂直居中 */align-content:center;/* 多行一起垂直居中 */}
.nav-layer ol li{margin: 0 50px;}
.nav-layer ol li .item{text-align: center;display: block;}
.nav-layer ol li .item img{width:38px;height:100%;display: block;margin: 0 auto 10px;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;}
/*.nav-layer ol li .item:hover img{*/
/*    -ms-transform:scale(1.08);*/
/*    -moz-transform:scale(1.08);*/
/*    -webkit-transform:scale(1.08);*/
/*    -o-transform:scale(1.08);*/
/*    transform:scale(1.08);*/
/*}*/
.nav-layer ol li .item .img1{
    display: block;
}
.nav-layer ol li .item .img2{
    display: none;
}
.nav-layer ol li .item:hover .img1{
    display: none;
}
.nav-layer ol li .item:hover .img2{
    display: block;
}
.nav-layer ol li .item:hover span{
    color:#20346f;
}
.nav-layer ol li .item span{color: #666;display: block;font-size: 14px;line-height: 24px;}
@media screen and (max-width: 1912px) {
    .header-nav {
        margin-left: 160px;
    }
}

@media screen and (max-width: 1800px) {
    .header-nav ul li {
        margin-right: 34px;
    }

    .foot-nav dl {
        margin-left: 80px;
    }
}

@media screen and (max-width: 1660px) {
    .header .wrap {
        width: 90%;
        max-width: 1410px;
        padding: 0;
    }

    .idxabout-swiper .swiper-button-prev {
        left: 5%;
        margin-left: 0;
    }

    .idxabout-swiper .swiper-button-next {
        right: 5%;
        margin-right: 0;
    }

    .idxabout-box {
        margin-left: -640px;
    }

    .foot-ft {
        padding: 100px 0 50px;
    }

    .footer .wrap {
        width: 90%;
        max-width: 1410px;
    }

    .foot-fm, .foot-fb {
        padding-left: 0;
        padding-right: 0;
    }

    .about-htab {
        margin-left: 7%;
    }
    .nav-layer .swiper-button-prev{left: 120px;}
    .nav-layer .swiper-button-next{right: 120px;}
}

@media screen and (max-width: 1500px) {
    .tpro-swiper{margin: 0 60px!important;}
    .nav-layer .swiper-button-prev{left: 60px;}
    .nav-layer .swiper-button-next{right: 60px;}
    .header .logo {
        width: 170px;
    }

    .header-nav {
        margin-left: 100px;
    }

    .header-nav ul li {
        margin-right: 26px;
    }

    .header-link {
        margin-left: 30px;
    }

    .one-show .swiper-container-horizontal > .swiper-pagination-bullets {
        left: 5%;
        margin-left: 0;
    }

    .idxabout-box {
        top: 80px;
    }

    .idxabout-box {
        margin-left: 0;
        left: 8%;
    }

    .idxabout-name {
        font-size: 32px;
    }

    .idxjoin-fl p {
        font-size: 40px;
    }

    .idxabout-swiper img {
        min-height: 460px;
        object-fit: cover;
    }

    .idxabout-font {
        margin-top: 40px;
    }

    .idxabout-box {
        top: 60px;
    }

    .ban-box {
        left: 5%;
        margin-left: 0;
    }

    .box-link li {
        width: 160px;
    }

    .about-culture {
        padding: 120px 0;
    }

    .about-htab {
        margin-left: 5%;
    }

    .about-honor .swiper-button-prev {
        bottom: 50px;
    }

    .about-honor .swiper-button-next {
        bottom: 50px;
    }

    .about03-swiper .swiper-slide {
        padding: 20px;
    }

    .join-spot, .ser-flow, .ser-order, .join-elite {
        padding: 100px 0;
    }

    .ser-flow {
        padding: 100px 0 150px;
    }

    .join-spot li p {
        height: 72px;
    }

    .foot-nav dl{
        margin-left: 60px;
    }
}

@media screen and (max-width: 1280px) {
    .header-link > a{
        margin-left: 20px;
    }
    .header {
        line-height: 70px;
    }

    .header-link {
        margin-left: 10px;
    }

    .header-link .header-search {
        padding: 0 10px;
        margin-left: 5px;
    }

    .header-link .header-tel {
        padding: 0 10px;
        margin-right: 5px;
    }

    .header-nav {
        margin-left: 50px;
    }

    .header-nav ul li {
        margin-right: 18px;
    }

    .box-top {
        margin-top: 80px;
    }

    .index-name {
        margin-bottom: 50px;
    }

    .index-pro ul li {
        padding-left: 20px;
        padding-right: 20px;
    }

    .idxpro-cover .idxpro-txt {
        left: 20px;
    }

    .idxpro-cover .idxpro-txt p {
        font-size: 24px;
    }

    .idxabout-name {
        font-size: 28px;
    }

    .idxjoin-fl p {
        font-size: 32px;
    }

    .idxabout-box li {
        margin-right: 120px;
    }

    .idxabout-base ul {
        padding: 50px 0 50px 6%;
    }

    .scroNum-show .data-font span {
        font-size: 50px;
    }

    .index-join {
        padding: 120px 0;
    }

    .idxjoin-fr ul {
        margin-top: -40px;
    }

    .index-news li .idxnews-info {
        padding: 24px;
    }

    .index-msg form {
        margin-top: -20px;
    }

    .foot-nav dl {
        margin-left: 32px;
    }

    .ban-box {
        bottom: 100px;
    }

    .ban-box strong {
        font-size: 36px;
    }

    .ban-box span {
        font-size: 20px;
    }

    .box-link li {
        width: 124px;
    }

    .inner-fr span {
        margin-top: 0;
    }

    .inner-fr h1 {
        font-size: 36px;
    }

    .about-ifr {
        width: 72%;
    }

    .about-intro {
        margin-top: 100px;
    }

    .about-story, .about-culture, .about-history, .about-case, .join-base, .join-help, .join-spot, .ser-flow, .ser-order, .join-elite {
        padding: 80px 0;
    }

    .ser-flow {
        padding: 80px 0 120px;
    }

    .about-honor {
        padding: 80px 0 120px;
    }

    .join-bfl {
        margin-top: 20px;
        padding-right: 4%;
    }

    .join-ginfo strong {
        font-size: 24px;
        padding-bottom: 12px;
        margin-top: 12px;
    }

    .join-ginfo img {
        width: 40px;
    }

    .join-ginfo p {
        margin-top: 20px;
    }

    .join-step ul:before {
        right: 9%;
    }

    .join-step li:nth-child(even):before {
        top: -29px;
    }

    .join-step {
        margin-top: 100px;
    }

    .about-tit strong {
        font-size: 32px;
    }

    .elite-swiper .about-sfl {
        padding: 140px 60px;
    }

    .ser-ofl, .ser-ofr {
        height: 480px;
    }

    .ser-msgfl {
        width: 240px;
    }

    .cont-show li > img {
        width: 40px;
    }

    .cont-show li:nth-child(3) img {
        width: 100px;
        padding: 6px;
    }

    .cont-show li {
        padding: 30px 6px 0;
        height: 200px;
    }

    .cont-show li:nth-child(3) .cont-scode {
        margin-left: 12px;
    }

    .cont-show li .cont-scode i {
        font-size: 18px;
    }
    .nav-layer{padding: 30px 0;}
    .nav-layer .swiper-slide a{padding-bottom: 10px;}
    .nav-layer .swiper-slide a .nav-lytxt{font-size: 14px;line-height: 36px;}
    .nav-layer .swiper-button-prev,.nav-layer .swiper-button-next{width: 16px;height:16px;margin-top: -26px;}
}

@media screen and (max-width: 1060px) {

    .header .logo {
        width: 160px;
    }

    .header-nav {
        margin-left: 30px;
    }

    .header-nav ul li {
        margin-right: 12px;
    }

    .idxjoin-fr {
        width: 540px;
    }

    .idxjoin-fr li {
        margin-left: 20px;
    }

    .foot-nav {
        display: none;
    }

    .foot-cont .foot-code{
        display: none;
    }

    .foot-cont {
        width: 100%;
    }

    .foot-ft {
        padding: 60px 0;
    }

    .foot-cont strong {
        margin: 20px 0 30px;
    }

    .foot-cont .foot-code {
        margin-top: 50px;
    }

    .foot-link {
        text-align: left;
        margin-top: 0;
    }

    .foot-link li {
        margin-left: 0;
        margin-right: 12px;
    }

    .code-show .code01 {
        right: auto;
        left: -35px;
    }

    .code-show .code02 {
        right: auto;
        left: 20px;
    }

    .code-show .code03 {
        right: auto;
        left: 74px;
    }

    .code-show .code04 {
        right: auto;
        left: 127px;
    }

    .join-step li p {
        font-size: 16px;
    }

    .join-step ul:before {
        right: 13%;
    }

    .join-spot li {
        padding: 40px 20px;
    }

    .ser-flow li span {
        width: 80px;
        height: 80px;
        line-height: 80px;
    }

    .ser-flow li span img {
        width: 30px;
    }

    .ser-flow li:before {
        top: 32px;
        left: -53%;
    }

    .ser-flow li p {
        font-size: 14px;
        margin-top: 12px;
    }

    .list-news li {
        padding: 20px 0;
    }

    .list-npic {
        width: 360px;
        margin-right: 40px;
    }

    .list-ninfo .list-ntxt {
        margin-top: 20px;
    }
}

@media screen and (max-width: 960px) {
    .header-link > a.other{display: block;padding: 0 10px;}

    .nav-layer.nav-lyon{display: none;}

    .header-link > a, .header-link .header-tel {
        display: none;
    }

    .header-link {
        margin-left: 10px;
    }

    .header-link .header-search {
        margin: 0;
    }

    .header {
        line-height: 50px;
    }

    .header .logo {
        width: 120px;
        position: relative;
        z-index: 99;
    }

    .nav-btn {
        display: block;
        float: right;
        margin-left: 10px;
        position: relative;
        z-index: 99;
        width: 24px;
        height: 24px;
        margin-top: 16px;
        cursor: pointer;
        transition: .3s;
        -ms-transition: .3s;
        -moz-transition: .3s;
        -webkit-transition: .3s;
        -o-transition: .3s;
    }

    .nav-btn i {
        display: block;
        height: 2px;
        background-color: #FFF;
        margin: 3px 0 5px;
        border-radius: 5px;
        transition: .3s;
        -ms-transition: .3s;
        -moz-transition: .3s;
        -webkit-transition: .3s;
        -o-transition: .3s
    }

    .nav-btn.nav-open i {
        display: none;
        margin: 0;
        position: absolute;
        left: 3px;
        top: 10px;
        width: 24px
    }

    .nav-btn.nav-open i:first-child {
        display: block;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg)
    }

    .nav-btn.nav-open i:last-child {
        display: block;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg)
    }

    .header-nav {
        position: absolute;
        top: 0;
        right: -100%;
        width: 100%;
        height: auto;
        overflow-y: auto;
        height: 100vh;
        padding: 60px 20px 10px;
        background-color: #333;
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        margin-left: 0;
    }

    .header-nav.header-on {
        right: 0;
    }

    .header.on .header-nav.header-on ul li a {
        color: #FFF;
    }

    .header-nav ul {
        display: block;
    }

    .header-nav ul li {
        width: 100%;
        margin: 0;
    }

    .header-nav ul li a {
        color: #FFF;
        line-height: 50px;
        border-bottom: 1px solid #666;
        padding: 0;
        text-align: left;
        font-size: 14px;
    }

    .header-nav ul li a:after {
        display: none;
    }

    .header.on {
        background-color: #333;
    }

    .header.on .icon-black {
        display: none;
    }

    .header.on .icon-white {
        display: inline-block;
    }

    .header.on .nav-btn i {
        background-color: #FFF;
    }

    .header.head-fixed {
        position: fixed;
        background-color: #333;
    }

    .header.head-fixed .icon-black {
        display: none;
    }

    .header.head-fixed .icon-white {
        display: inline-block;
    }

    .header.head-fixed .header-nav ul li a {
        color: #FFF;
    }

    .header.head-fixed .header-nav ul li a:after {
        display: none;
    }

    .header.head-fixed .nav-btn i {
        background-color: #FFF;
    }

    .box-top {
        margin-top: 60px;
    }

    .index-name {
        margin-bottom: 40px;
        line-height: 38px;
    }

    .index-name i {
        font-size: 18px;
    }

    .index-name h2 {
        font-size: 26px;
        margin-right: 10px;
    }

    .more-arr {
        width: 120px;
        line-height: 36px;
        padding: 0 12px;
        font-size: 14px;
    }

    .more-arr img {
        top: 12px;
        right: 12px;
    }

    .index-pro ul li {
        width: 49% !important;
        height: 220px !important;
        padding-top: 36px !important;
    }

    .index-pro ul li:nth-child(1) .idxpro-pic img, .index-pro ul li:nth-child(2) .idxpro-pic img {
        width: 70%;
    }

    .index-pro ul li:nth-child(3) .idxpro-pic img {
        width: 90px;
    }

    .idxpro-cover .idxpro-txt span {
        margin-top: 12px;
    }

    .idxabout-name {
        font-size: 26px;
    }

    .scroNum-show p, .idxabout-font {
        font-size: 14px;
    }

    .scroNum-show .data-font span {
        font-size: 40px;
    }

    .idxabout-base li .data-font {
        font-size: 24px;
    }

    .idxabout-base li .data-font img {
        width: 100px;
    }

    .about-data li .data-font img {
        width: 100px;
    }

    .idxabout-base ul {
        padding: 24px 0 24px 5%;
    }

    .idxjoin-fl p {
        font-size: 24px;
    }

    .idxjoin-fl .more-arr {
        margin-top: 50px;
    }

    .idxjoin-fr li span {
        font-size: 16px;
    }

    .idxjoin-fr li {
        width: 140px;
        margin-left: 12px;
    }

    .idxjoin-fr {
        width: 460px;
    }

    .index-news li .idxnews-info {
        padding: 16px;
    }

    .index-news li .idxnews-info span {
        font-size: 14px;
    }

    .index-news li .idxnews-info a {
        font-size: 16px;
        margin-top: 10px;
        line-height: 24px;
        height: 48px;
    }

    .index-msg {
        padding: 40px 0;
    }

    .ban-box {
        bottom: 80px;
    }

    .ban-box strong {
        font-size: 30px;
    }

    .ban-box span {
        font-size: 16px;
        margin-top: 10px;
    }

    .box-link ul {
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
    }

    .box-link li {
        width: auto;
    }

    .box-link li a {
        padding: 0 20px;
    }

    .box-type li {
        margin-right: 20px;
    }

    .box-type {
        margin-top: 40px;
    }

    .box-list {
        padding: 80px 0;
    }

    .list-pro li .list-info {
        padding: 16px;
    }

    .list-pro li .list-more {
        display: none;
    }

    .list-pro li {
        margin-bottom: 40px;
    }

    .page-show {
        margin-top: 40px;
    }

    .m-pages {
        margin-top: 40px;
    }

    .inner-box {
        padding: 80px 0 40px;
    }

    .inner-show {
        margin-top: 30px;
        padding: 30px;
    }

    .inner-fr h1 {
        font-size: 30px;
        margin-top: 12px;
    }

    .inner-fr p {
        font-size: 14px;
    }

    .inner-fr ul {
        padding-top: 20px;
        margin-top: 20px;
    }

    .inner-fr li {
        line-height: 1.8;
    }

    .inner-swiper .swiper-button-prev {
        left: 3%;
    }

    .inner-swiper .swiper-button-next {
        right: 3%;
    }

    .inner-main {
        padding: 80px 0;
    }

    .inner-white {
        padding: 40px;
    }

    .inner-name {
        font-size: 24px;
        padding-bottom: 16px;
    }

    .inner-word {
        margin-top: 40px;
    }

    .about-intro {
        margin-top: 60px;
    }

    .about-ifl {
        width: 100%;
        text-align: center;
    }

    .about-ifl .index-name h2 {
        margin-right: 0;
    }

    .about-ifr {
        width: 100%;
    }

    .about-pic {
        margin-top: 20px;
    }

    .about-data ul {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .about-story, .about-culture, .about-history, .about-case, .join-base, .join-help, .join-spot, .ser-flow, .ser-order, .join-elite {
        padding: 60px 0;
    }

    .about-sfl {
        padding: 80px 150px 80px 80px;
    }

    .about-sfl:before {
        left: 30px;
        top: 50px;
        -webkit-background-size: 60% auto;
        -moz-background-size: 60% auto;
        -o-background-size: 60% auto;
        background-size: 60% auto;
    }

    .about-tit strong {
        font-size: 30px;
    }

    .about-tit p {
        font-size: 18px;
    }

    .about-sfl img {
        right: 40px;
        width: 60px;
    }

    .about-culture strong {
        font-size: 24px;
        padding-top: 0;
    }

    .about-culture span {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .about-culture p {
        font-size: 14px;
    }

    .about01-swiper .swiper-slide span {
        font-size: 16px;
    }

    .about01-swiper .swiper-slide-active span {
        font-size: 18px;
    }

    .about-item {
        padding: 30px;
    }

    .about-hfl {
        padding: 30px 50px 90px;
    }

    .about-htit {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .about-htit strong {
        font-size: 40px;
    }

    .about-htit span {
        font-size: 24px;
    }

    .about-hfl p {
        font-size: 16px;
    }

    .about-honor {
        padding-top: 60px;
    }

    .about03-swiper .swiper-slide p {
        font-size: 14px;
    }

    .case-box {
        padding: 40px 0 60px;
    }

    .case-show h1 {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .video-pic:before {
        width: 36px;
        height: 36px;
    }

    .list-pro li .list-info .list-txt, .video-mask-view .video-mtxt {
        font-size: 16px;
    }

    .video-mask-view {
        max-width: 90%;
        padding: 10px;
    }

    .video-mask-view .close {
        right: 0;
        top: -40px;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .video-mask-view .close img {
        width: 12px;
    }

    .join-bfl p {
        margin-bottom: 30px;
        line-height: 1.8;
        font-size: 14px;
    }

    .join-ginfo strong {
        font-size: 20px;
    }

    .join-data {
        top: 16px;
        right: 16px;
        width: 36px;
    }

    .join-ginfo {
        width: 90%;
    }

    .index-name p {
        font-size: 16px;
    }

    .join-step {
        margin-top: 80px;
    }

    .join-sbox {
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
    }

    .join-step ul {
        width: 880px;
    }

    .join-step li {
        width: 150px;
        padding: 40px 5px 15px 5px;
        height: 180px;
    }

    .join-step ul:before {
        top: 188px;
        left: 8%;
        right: 10%;
    }

    .join-step li:nth-child(2), .join-step li:nth-child(4), .join-step li:nth-child(6), .join-step li:nth-child(8) {
        margin-top: 230px;
        margin-left: -60px;
    }

    .join-step li:nth-child(3), .join-step li:nth-child(5), .join-step li:nth-child(7), .join-step li:nth-child(9) {
        margin-left: -60px;
    }

    .join-step li:nth-child(even):before {
        top: -17px;
    }

    .join-step li img {
        width: 34px;
    }

    .join-step li p, .join-step li span {
        font-size: 16px;
    }

    .join-hshow li:nth-child(2) img {
        margin-bottom: 4px;
    }

    .join-ptab li:before {
        border-width: 4px;
    }

    .join-spot li img {
        width: 30px;
    }

    .join-spot li strong {
        font-size: 20px;
    }

    .join-spot li p {
        font-size: 14px;
        line-height: 24px;
        height: 72px;
    }

    .elite-swiper .about-sfl span img {
        width: 20px;
        margin-right: 8px;
    }

    .elite-swiper .about-sfl span {
        font-size: 18px;
        top: 30px;
        right: 20px;
    }

    .join-process li {
        padding: 20px;
    }

    .join-process li span {
        font-size: 20px;
    }

    .join-process li p {
        font-size: 14px;
    }

    .join-process li:before {
        right: -4.9%;
    }

    .join-process li:nth-child(even):before {
        left: -4.9%;
    }

    .store-choose {
        margin-top: -10px;
    }

    .ser-ofl strong {
        font-size: 24px;
    }

    .ser-ofr strong {
        font-size: 20px;
    }

    .ser-ofl {
        width: 52%;
        padding: 20px;
    }

    .ser-msgfl {
        display: none;
    }

    .ser-ofl, .ser-ofr {
        height: 400px;
    }

    .ser-ofr {
        width: 46%;
        padding: 20px;
    }

    .list-npic {
        width: 320px;
        margin-right: 30px;
    }

    .list-ninfo .list-ntxt {
        margin-top: 6px;
        font-size: 18px;
    }

    .list-ninfo p {
        margin-top: 16px;
    }

    .list-ninfo .list-nmore {
        line-height: 36px;
        padding: 0 20px;
    }

    .inner-intro h1 {
        font-size: 20px;
    }

    .cont-show li strong {
        font-size: 24px;
    }

    .cont-show li p {
        font-size: 14px;
    }

    .cont-show li:nth-child(3) img {
        width: 80px;
    }

    .store-map {
        margin-top: 36px;
    }

    .map {
        margin-bottom: 40px;
    }

    .oddz-item .list-info {
        padding: 16px;
    }

    .oddz-item .list-info .list-txt {
        font-size: 16px;
    }

    .oddz-item .list-info span {
        margin-top: 12px;
    }

    .ser-case .oddz-item .list-info span {
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 768px) {
    .ser-store .outer select{
        padding-left: 1px;
        height: 43px;
        width: 33%;
        flex: 0 0 calc(33.3% - 0px);
    }
    .online .main form figure {
        display: none;
    }

    .online .main form ul {
        width: 100%;
    }

    .online .main {
        padding: 15px;
    }

    .online .main .tit h3 {
        font-size: 20px;
    }
    .one-show .pc {
        display: none;
    }

    .one-show .mobile {
        display: block;
    }

    .zpic-m{
        display: block;
    }
    .zpic-pc{
        display: none;
    }

    .join-sbox{
        white-space:initial;
        overflow-x:hidden;
    }
    .join-step ul{
        width: auto;
        margin-left: -1.3%;
    }
    .join-step li:before,.join-step li:nth-child(even):before{
        display: none;
    }
    .join-step li{
        float: left;
        width: 32%;
        margin-left: 1.3%!important;
        margin-top: 0!important;
        margin-bottom: 12px;
    }
    .about-hfr {
        height: 167px;
    }

    .about-hfr img {
        height: 167px;
    }

    .inner-word p img, .inner-word p video {
        max-width: 100%;
        height: auto;
    }

    .box-top, .about-intro {
        margin-top: 50px;
    }

    .one-show .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: 20px;
    }

    .one-show .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .index-pro ul li {
        padding: 30px 20px !important;
    }

    .index-pro ul li > p {
        left: 16px;
        bottom: 16px;
    }

    .index-pro ul li .idxpro-pic img {
        margin-top: -12px;
    }

    .index-pro ul li:nth-child(1) .idxpro-pic img, .index-pro ul li:nth-child(2) .idxpro-pic img {
        width: 80%;
        margin-top: 0;
    }

    .idxabout-swiper .swiper-button-prev {
        top: auto;
        margin-top: 0;
        bottom: 110px;
        border: 1px solid rgba(255, 255, 255, .5);
        -webkit-background-size: 12px 12px;
        -moz-background-size: 12px 12px;
        -o-background-size: 12px 12px;
        background-size: 12px 12px;
        width: 30px;
        height: 30px;
    }

    .idxabout-swiper .swiper-button-next {
        top: auto;
        margin-top: 0;
        bottom: 110px;
        right: auto;
        left: 3%;
        margin-left: 40px;
        border: 1px solid rgba(255, 255, 255, .5);
        -webkit-background-size: 12px 12px;
        -moz-background-size: 12px 12px;
        -o-background-size: 12px 12px;
        background-size: 12px 12px;
        width: 30px;
        height: 30px;
    }

    .idxabout-box li {
        margin-right: 36px;
    }

    .idxabout-swiper img {
        min-height: 420px;
    }

    .idxabout-box {
        left: 3%;
        right: 3%;
        top: 36px;
    }

    .idxabout-name {
        font-size: 22px;
    }

    .idxabout-box ul {
        margin-top: 30px;
    }

    .scroNum-show .data-font span {
        font-size: 30px;
    }

    .idxabout-font {
        margin-top: 24px;
    }

    .idxabout-base li {
        width: 33.3%;
        margin-bottom: 12px;
    }

    .scroNum-show .data-font {
        height: 48px;
        line-height: 48px;
    }

    .idxabout-base ul {
        padding: 20px 0 12px 5%;
    }

    .idxabout-base li:nth-child(2) {
        width: 38%;
    }

    .idxabout-base li:nth-child(3) {
        width: 28%;
    }

    .idxabout-base li .data-font {
        font-size: 18px;
    }

    .idxabout-base li .data-font img {
        width: 70px;
    }

    .about-data li .data-font img {
        width: 70px;
    }

    .index-join {
        padding: 60px 0;
    }

    .idxjoin-fl {
        float: none;
        width: 100%;
    }

    .idxjoin-fr {
        float: none;
        width: 100%;
        margin-top: 20px;
    }

    .idxjoin-fr ul {
        margin-top: 0;
    }

    .idxjoin-fl .more-arr {
        margin-top: 20px;
    }

    .idxjoin-fl p {
        font-size: 20px;
    }

    .idxjoin-fl i {
        font-size: 18px;
    }

    .idxjoin-fr ul {
        margin-left: -1.3%;
    }

    .idxjoin-fr li {
        width: 32%;
        margin-left: 1.3%;
    }

    .idxjoin-fr li a img {
        width: 32px;
    }

    .index-news li {
        width: 48.7%;
        margin-bottom: 12px;
    }

    .msg-info li input, .msg-info li textarea {
        padding: 0 10px;
        height: 42px;
        line-height: 42px;
    }

    .msg-info {
        margin-left: 0;
    }

    .msg-info li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }

    .msg-info li:nth-child(3), .msg-info li:nth-child(4) {
        width: 100%;
    }

    .msg-btn input {
        height: 42px;
        line-height: 42px;
    }

    .msg-btn button {
        height: 42px;
        line-height: 42px;
    }

    .msg-btn {
        position: static;
        width: 130px;
        margin: 10px auto 0;
    }

    .foot-fb {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .foot-copyright {
        width: 100%;
    }

    .foot-name {
        float: left;
        margin-top: 5px;
    }

    .ban-box {
        bottom: 40px;
    }

    .ban-box strong {
        font-size: 24px;
    }

    .ban-box span {
        font-size: 14px;
        margin-top: 6px;
    }

    .box-link ul {
        height: 60px;
        line-height: 60px;
    }

    .box-type {
        margin-top: 30px;
    }

    .box-type li {
        margin-right: 10px;
    }

    .box-list {
        padding: 50px 0 60px;
    }

    .list-pro li {
        width: 48%;
        margin-bottom: 20px;
    }

    .page-show li {
        margin: 0 3px;
    }

    .page-show li span, .page-show li a {
        min-width: 30px;
        line-height: 30px;
        height: 30px;
    }


    .page-show li.pagebtn span, .page-show li.pagebtn a {
        padding: 0 8px;
    }

    .m-pages li {
        margin: 0 3px;
    }

    .m-pages li span, .m-pages li a {
        min-width: 30px;
        line-height: 30px;
        height: 30px;
    }

    .m-pages li.fengye span, .m-pages li.fengye a {
        padding: 0 8px;
    }

    .m-pages select {
        width: 40px;
        line-height: 30px;
        height: 30px;
        color: #3f3837;
        padding-left: 3px;
        /*background: url(../img/qwy-i4.png) #fff center right 10px no-repeat;*/
        font-size: 14px;
        border: 1px solid #bfbfbf;
        vertical-align: bottom;
    }

    .m-pages select option {


    }

    .inner-return a {
        padding: 0 16px;
        line-height: 36px;
    }

    .inner-place img {
        width: 18px;
        margin-right: 6px;
    }

    .inner-place li {
        font-size: 14px;
        line-height: 36px;
    }

    .inner-place li i {
        margin: 0 5px;
    }

    .inner-box {
        padding: 70px 0 20px;
    }

    .inner-show {
        margin-top: 20px;
        padding: 16px;
    }

    .inner-fr span {
        font-size: 14px;
    }

    .inner-fr h1 {
        font-size: 26px;
    }

    .inner-fr p {
        margin-top: 10px;
    }

    .inner-fr ul {
        margin-top: 10px;
        padding-top: 10px;
    }

    .inner-main {
        padding: 40px 0;
    }

    .inner-white {
        padding: 20px;
    }

    .inner-name {
        font-size: 20px;
    }

    .inner-word {
        margin-top: 20px;
    }

    .inner-mfr li {
        margin-bottom: 20px;
    }

    .inner-mfr li .inner-stxt {
        margin-top: 10px;
    }

    .inner-mfl {
        width: 100%;
    }

    .inner-mfr {
        width: 100%;
    }

    .index-name {
        line-height: 30px;
        margin-bottom: 30px;
    }

    .about-ifr p {
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .about-pics li {
        margin-bottom: 6px;
    }

    .about-story, .about-culture, .about-history, .about-case, .join-base, .join-help, .join-spot, .ser-flow, .ser-order, .join-elite {
        padding: 40px 0;
    }

    .about-sfl {
        padding: 40px 15px 40px 40px;
    }

    .about-sfl:before {
        left: 20px;
        top: 20px;
        -webkit-background-size: 20px auto;
        -moz-background-size: 20px auto;
        -o-background-size: 20px auto;
        background-size: 20px auto;
    }

    .about-tit strong {
        font-size: 24px;
    }

    .about-tit p {
        font-size: 16px;
        margin-top: 12px;
    }

    .about-sfl > p {
        margin-top: 20px;
        line-height: 1.8;
    }

    .about-sfl img {
        right: -20px;
        bottom: 48px;
    }

    .about01-swiper .swiper-slide span {
        font-size: 14px;
        padding-top: 24px;
    }

    .about01-swiper .swiper-slide-active span {
        font-size: 16px;
    }

    .about01-swiper .swiper-slide span:before {
        width: 12px;
        height: 12px;
        top: 5px;
    }

    .about01-swiper .swiper-slide-active span:after {
        width: 6px;
        height: 6px;
        top: 8px;
    }

    .about02-swiper {
        margin-top: 30px !important;
    }

    .about-item {
        padding: 16px;
    }

    .about-hfl {
        padding: 25px 10px 40px;
    }

    .about-htit strong {
        font-size: 32px;
    }

    .about-htit span {
        font-size: 20px;
        margin-left: 12px;
    }

    .about-hfl p {
        font-size: 14px;
    }

    .about02-swiper .swiper-button-prev, .about02-swiper .swiper-button-next {
        bottom: 20px;
    }

    .about-honor {
        padding-top: 40px;
    }

    .about-cbtn {
        margin-top: 20px;
    }

    .box-place {
        margin-bottom: -20px;
    }

    .box-place {
        margin-top: 30px;
    }

    .case-box {
        padding: 30px 0 50px;
    }

    .case-show h1 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .join-bfl {
        margin-top: 0;
        width: 100%;
        padding-right: 0;
    }

    .join-bfr {
        width: 100%;
    }

    .join-bfl p {
        margin-top: 0;
        margin-bottom: 16px;
    }


    .join-ginfo img {
        width: 30px;
    }

    .join-good li:hover .join-ginfo p {
        font-size: 12px;
        line-height: 1.6;
        margin-top: 12px;
    }

    .join-step {
        margin-top: 60px;
    }

    .join-tab li {
        margin: 0 20px;
        font-size: 14px;
    }

    .join-spot li {
        width: 49%;
        margin-bottom: 10px;
        padding: 20px 10px;
    }

    .join-spot li strong {
        font-size: 18px;
    }

    .elite-swiper .about-sfl {
        padding: 70px 40px 50px;
    }

    .elite-swiper .about-sfl:before {
        left: 20px;
        top: 20px;
    }

    .elite-swiper .about-tit p {
        font-size: 16px;
        line-height: 1.8;
    }

    .elite-swiper .about-sfl > p {
        font-size: 14px;
    }

    .store-choose {
        line-height: 44px;
    }

    .store-choose input {
        padding: 6px;
    }

    .store-search button {
        line-height: 44px;
    }

    .ser-flow ul {
        margin-left: -6%;
    }

    .ser-flow li {
        width: 19%;
        margin-left: 6%;
        margin-bottom: 12px;
    }

    .ser-flow li:before {
        display: none;
    }

    .ser-flow li span {
        width: 70px;
        height: 70px;
        line-height: 70px;
    }

    .ser-flow li span img {
        width: 24px;
    }

    .ser-msgfr .msg-info li:nth-child(4) {
        width: 49%;
    }

    .list-news {
        margin-bottom: 60px;
    }

    .inner-main .inner-place {
        margin-top: -10px;
        margin-bottom: 30px;
    }

    .inner-ibase {
        margin-top: 20px;
    }

    .inner-word p {
        line-height: 2;
        margin-bottom: 20px;
    }

    .inner-ibase p a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin-left: 12px;
    }

    .inner-ibase p a img {
        width: 16px;
    }

    .inner-intro {
        padding-bottom: 12px;
    }

    .inner-chapter {
        margin-top: 40px;
    }

    .inner-chapter li a {
        line-height: 60px;
        padding: 0 80px 0 20px;
    }

    .inner-chapter li:first-child a {
        padding: 0 20px 0 80px;
    }

    .inner-chapter li:first-child span {
        left: 20px;
    }

    .inner-chapter li span {
        right: 20px;
    }

    .cont-show li:nth-child(3) .cont-scode {
        display: block;
        margin-left: 0;
        margin-top: 10px;
    }

    .cont-show li .cont-scode i {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .cont-show li strong {
        font-size: 20px;
    }

    .map {
        height: 500px;
        margin-top: 50px;
    }

    .oddz-swiper.swiper-container-horizontal > .swiper-pagination-bullets {
        display: block;
    }

    .joinz-swiper.swiper-container-horizontal > .swiper-pagination-bullets {
        display: block;
    }

    .joinz-swiper.swiper-container {
        padding-bottom: 36px;
    }

    .about03-swiper .img {
        height: 150px;
    }

    .zside-box{
        display: none;
    }

    .znav-box{
        display: block;
    }
    body{
        padding-bottom: 66px;
    }

}

@media screen and (max-width: 660px) {
    .index-join .pc {
        display: none;
    }

    .index-join .mo {
        display: block;
    }

    .index-about .pc {
        display: none;
    }

    .index-about .mo {
        display: block;
    }

    .inner-show {
        padding: 10px;
    }

    .inner-fl {
        width: 100%;
    }

    .inner-fr {
        width: 100%;
        margin-top: 10px;
        padding: 25px;
    }

    .inner-fr h1 {
        font-size: 24px;
    }

    .index-name i {
        font-size: 16px;
    }

    .about-data ul {
        padding: 20px 0 20px 4%;
    }

    .about-data li {
        width: 50%;
        margin-bottom: 10px;
    }

    .about-sbox {
        display: block;
    }

    .about-sfr {
        width: 100%;
    }

    .about-sfl img {
        right: 20px;
    }

    /*.about-sfl {*/
    /*    padding: 26px;*/
    /*}*/
    .about-sfl:before {
        display: none;
    }

    .about-tit strong {
        font-size: 20px;
    }

    .about-sfl img {
        width: 48px;
        bottom: 20px;
    }

    .about-culture strong {
        font-size: 20px;
    }

    .box-page {
        margin-top: 20px;
    }

    .box-page a {
        padding: 0 20px;
        line-height: 36px;
        margin-right: 12px;
    }

    .join-good li:hover {
        display: none;
    }

    .join-data {
        top: 10px;
        right: 10px;
        width: 20px;
    }

    .join-ginfo img {
        width: 24px;
    }


    /*.join-step li img {*/
    /*    width: 30px;*/
    /*}*/
    .join-tshow li {
        margin-bottom: 6px;
    }

    .elite-swiper .about-sfr {
        width: 100%;
    }

    .elite-swiper .about-sfl {
        width: 100%;
        padding: 60px 20px 40px;
    }

    .elite-swiper {
        padding-bottom: 40px !important;
    }

    .elite-swiper .about-sfl span {
        top: 20px;
    }

    .join-process li {
        padding: 12px;
    }

    .join-process li span {
        font-size: 18px;
    }

    .join-process li p {
        margin-top: 2px;
        height: 72px;
        -webkit-line-clamp: 3;
    }

    .join-process li:before {
        right: -5%;
        width: 10px;
        height: 10px;
    }

    .join-process li:nth-child(even):before {
        left: -4.8%;
    }

    .ser-ofl {
        width: 100%;
        height: auto;
    }

    .ser-ofl strong {
        font-size: 20px;
    }

    .ser-msg {
        margin-top: 20px;
    }

    .ser-ofr {
        width: 100%;
        height: auto;
        margin-top: 12px;
    }

    .ser-ofr strong {
        font-size: 18px;
    }

    .ser-ofr strong i {
        font-size: 24px;
        margin: 0 10px;
    }

    .list-npic {
        width: 200px;
        margin-right: 16px;
    }

    .list-ninfo span {
        display: none;
    }

    .list-ninfo .list-nmore {
        margin-top: 16px;
    }

    .list-news {
        margin-bottom: 50px;
    }

    .about-pic:after{
        width: 36px;
        height: 36px;
    }
}

@media screen and (max-width: 480px) {
    .box-top, .about-intro {
        margin-top: 40px;
    }
    .znav-box li img{
        width: 22px;
    }

    .one-show img {
        /* height: 375px; */
        object-fit: cover;
    }

    .join-step li p, .join-step li span{
        font-size: 14px;
    }

    .index-name {
        line-height: 28px;
        margin-bottom: 20px;
    }

    .index-name i {
        display: none;
    }

    .index-name h2 {
        font-size: 24px;
        margin-right: 0;
    }

    .more-arr img {
        display: none;
    }

    .more-arr {
        width: auto;
        line-height: 30px;
    }

    .index-pro ul li {
        height: 200px !important;
    }

    .index-pro ul li > p {
        margin: 0 auto;
        right: 10px;
        left: 10px;
    }

    .index-pro ul li:nth-child(1) .idxpro-pic img {
        width: 130px;
        margin-top: 20px;
    }

    .index-pro ul li:nth-child(2) .idxpro-pic img {
        width: 130px;
    }

    .index-pro ul li:nth-child(3) .idxpro-pic img {
        width: 77px;
    }

    .index-pro ul li:nth-child(4) .idxpro-pic img {
        width: 60px;
    }

    .index-pro ul li:nth-child(5) .idxpro-pic img {
        width: 50px;
    }

    .index-pro ul li:nth-child(6) .idxpro-pic img {
        width: 70px;
    }

    .idxpro-cover .idxpro-txt p {
        font-size: 20px;
    }

    .idxabout-box li {
        margin-right: 20px;
    }

    .idxjoin-fl .more-arr {
        width: 120px;
        text-align: center;
    }

    .idxjoin-fr li span {
        font-size: 14px;
    }

    .idxjoin-fr li a {
        padding: 24px 0;
    }

    .index-news ul {
        margin-left: 0;
    }

    .index-news li {
        margin-left: 0;
        width: 100%;
    }

    .index-news li .idxnews-info a {
        height: auto;
    }

    .index-news li .idxnews-info {
        padding: 12px;
    }

    .index-msg form {
        margin-top: 0;
    }

    .foot-ft {
        padding: 50px 20px 40px;
    }

    .foot-fm {
        padding-left: 20px;
        padding-right: 20px;
    }

    .code-show .code-db{
        width: 96px;
    }
    .code-show .code01 {
        left: -28px;
    }

    .code-show .code02 {
        left: 27px;
    }

    .code-show .code03 {
        left: 83px;
    }

    .code-show .code04 {
        left: 136px;
    }

    .foot-cont span {
        font-size: 14px;
    }

    .foot-cont span img {
        width: 18px;
        margin-right: 8px;
    }

    .foot-cont strong {
        font-size: 26px;
        margin: 20px 0 40px;
    }

    .foot-link {
        margin-top: 15px;
    }
    

    .foot-cont .foot-code img {
        width: 80px;
    }

    .foot-copyright a {
        display: block;
        margin-left: 0;
    }

    .toTop {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

    .toTop img {
        width: 10px;
    }

    .ban-top img {
        min-height: 250px;
        object-fit: cover;
    }

    .ban-box {
        bottom: 26px;
    }

    .ban-box strong {
        font-size: 20px;
    }

    .box-link ul {
        height: 48px;
        line-height: 48px;
    }

    .box-link li a {
        font-size: 14px;
        padding: 0 12px;
    }

    .box-type li a {
        font-size: 14px;
    }

    .list-pro li {
        margin-bottom: 10px;
    }

    .list-pro li .list-info {
        padding: 10px;
    }

    .list-pro li .list-info .list-txt {
        font-size: 16px;
    }

    .list-pro li .list-info span {
        font-size: 12px;
        margin-top: 8px;
    }

    .page-show {
        margin-top: 20px;
    }

    .m-pages {
        margin-top: 20px;
    }

    .box-list {
        padding: 30px 0;
    }

    .inner-return a {
        padding: 0 12px;
    }

    .inner-return a img {
        width: 15px;
        margin-right: 5px;
    }

    .inner-show {
        margin-top: 10px;
    }

    .inner-fr h1 {
        font-size: 22px;
    }

    .inner-mfr strong {
        font-size: 18px;
        padding-left: 6px;
    }

    .inner-main {
        padding: 30px 0;
    }

    .inner-name {
        font-size: 18px;
    }

    .inner-white {
        padding: 16px;
    }

    .about-story, .about-culture, .about-history, .about-case, .join-base, .join-help, .join-spot, .ser-flow, .ser-order, .join-elite {
        padding: 30px 0;
    }

    .about01-swiper .swiper-slide span {
        font-size: 12px;
    }

    .about01-swiper .swiper-slide span {
        font-size: 14px;
    }

    .about-item {
        display: block;
    }

    .about-hfl {
        width: 100%;
        /*padding: 0;*/
    }

    .about-hfr {
        width: 100%;
        margin-top: 10px;
    }

    .about-htit {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .about-item {
        padding-bottom: 60px;
    }

    .about-htit strong {
        font-size: 24px;
    }

    .about-htit span {
        font-size: 18px;
    }

    .about-honor {
        padding-top: 30px;
    }

    .about03-swiper .swiper-slide {
        padding: 10px;
    }

    .about03-swiper .swiper-slide p {
        margin-top: 10px;
        line-height: 1.6;
    }

    .case-box {
        padding: 24px 0 40px;
    }

    .case-show h1 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .index-name p {
        font-size: 14px;
    }

    .join-step {
        margin-top: 30px;
    }

    .join-tab li {
        margin: 0 6px;
    }

    .join-spot li {
        margin-bottom: 6px;
    }

    .join-spot li strong {
        font-size: 16px;
        margin-top: 10px;
        padding-bottom: 12px;
    }

    .join-spot li p {
        margin-top: 10px;
    }

    .join-process ul {
        margin-left: 0;
        padding-left: 12px;
    }

    .join-process li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
        text-align: left;
    }

    .join-process ul:before {
        left: 0;
    }

    .join-process li:before {
        right: auto;
        left: -16px;
        top: 20px;
    }

    .join-process li:nth-child(even):before {
        left: -16px;
        top: 20px;
    }

    .join-process li p {
        height: auto;
    }

    .join-process li span {
        font-size: 16px;
    }

    .store-choose .store-city {
        width: 100%;
    }

    .store-choose .store-search {
        float: left;
        margin-top: 10px;
        width: 120px;
    }

    .store-map {
        height: auto;
    }

    .store-map .store-fl {
        width: 100%;
        height: 320px;
        overflow: hidden;
    }

    .store-map .store-fr {
        width: 100%;
        padding: 60px 10px 10px;
        height: 360px;
    }

    .store-map .store-tit {
        left: 10px;
        top: 20px;
    }

    .store-map li {
        padding: 16px;
    }

    .store-map li strong {
        font-size: 16px;
    }

    .ser-roll li {
        line-height: 48px;
        padding-left: 100px;
    }

    .list-npic {
        width: 100%;
        margin-right: 0;
        float: none;
    }

    .list-ninfo {
        margin-top: 16px;
    }

    .list-ninfo .list-ntxt {
        margin-top: 0;
        font-size: 16px;
    }

    .list-news {
        margin-bottom: 40px;
    }

    .inner-chapter {
        margin-top: 24px;
    }

    .inner-chapter ul {
        margin-left: 0;
    }

    .inner-chapter li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }

    .cont-show ul {
        margin-left: 0;
    }

    .cont-show li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
        padding: 20px 6px !important;
        height: auto;
    }

    .cont-show li > img {
        width: 32px;
    }

    .cont-show li strong, .cont-show li p {
        margin-top: 15px;
    }

    .cont-show li:nth-child(3) img {
        width: 120px;
    }

    .map {
        height: 400px;
        margin-top: 30px;
    }

    /* 所有标题更改 */
    .box-top, .about-intro, .join-step {
        margin-top: 50px;
    }

    .about-story, .about-culture, .about-history, .about-case, .join-base, .join-help, .join-spot, .ser-flow, .ser-order, .join-elite, .index-msg {
        padding: 50px 0;
    }

    .about-honor {
        padding-top: 50px;
    }

    .idxabout-box {
        top: 50px;
        left: 5%;
        right: 5%;
    }

    .idxabout-swiper .swiper-button-prev, .idxabout-swiper .swiper-button-next {
        left: 5%;
    }

    .idxabout-box ul {
        margin-top: 20px;
    }

    .join-ginfo img {
        width: 36px;
    }

    .join-data {
        width: 32px;
        top: 16px;
        right: 16px;
    }
}

@media screen and (max-width: 375px) {
    .index-name {
        margin-bottom: 16px;
    }

    .index-name h2 {
        font-size: 22px;
    }

    .idxabout-name {
        font-size: 20px;
    }

    .box-type li {
        margin-bottom: 10px;
    }

    .index-name i {
        font-size: 14px;
    }

    .about-pics li {
        margin-bottom: 4px;
    }
}

@media screen and (max-width: 360px) {
    .idxabout-box li {
        margin-right: 10px;
    }

    .page-show li {
        margin: 0 2px;
    }

    .m-pages li {
        margin: 0 2px;
    }

    .page-show li.pagebtn span, .page-show li.pagebtn a {
        padding: 0 5px;
    }

    .m-pages li.fengye span, .m-pages li.fengye a {
        padding: 0 5px;
    }

    .join-tab li {
        margin: 0 4px;
    }
}


.online {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.online .main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 850px;
    width: 96%;
    padding: 30px;
    background-color: #fff;
}

.online .main .tit {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.online .main .tit h3 {
    text-align: center;
    font-size: 24px;
    color: #434144;
    font-weight: bold;
}

.online .main .tit span {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    margin-top: 5px;
    text-align: center;
    font-family: "Arial";
    color: #787878;
    font-weight: bold;
}

.online .main .tit span b {
    color: #173782;
}

.online .main .tit span:before {
    content: '';
    opacity: 1;
    display: block;
    top: 50%;
    left: 0;
    position: absolute;
    transform: translateY(-50%);
    width: 65px;
    height: 1px;
    background-color: #434144;
}

.online .main .tit span:after {
    content: '';
    opacity: 1;
    display: block;
    top: 50%;
    right: 0;
    position: absolute;
    transform: translateY(-50%);
    width: 65px;
    height: 1px;
    background-color: #434144;
}

.online .main form {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    justify-content: space-between;
    align-items: unset;
}

.online .main form figure {
    display: block;
    width: 45%;
    position: relative;
    padding: 20% 0;
}

.online .main form figure img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}

.online .main form ul {
    width: 52%;
}

.online .main form ul li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    justify-content: space-between;
    height: 40px;
}

.online .main form ul li + li {
    margin-top: 15px;
}

.online .main form ul li .ind {
    width: 48%;
    height: 100%;
    border: 1px solid #bebebe;
    padding: 0 10px;
    background-color: transparent;
    color: #979797;
    font-size: 14px;
    transition: .2s all;
}

.online .main form ul li .ind.active {
    box-shadow: 0 5px 10px rgba(43, 59, 120, 0.6);
}

.online .main form ul li .ind:hover {
    box-shadow: 0 5px 10px rgba(43, 59, 120, 0.6);
}

.online .main form ul li .ind::-webkit-input-placeholder {
    color: #979797;
    font-size: 14px;
}

.online .main form ul li select {
    background: url(../img/ico-002.png) #fff 95% center no-repeat;
}

.online .main form ul li.phone input {
    width: 100%;
}

.online .main form ul li.textarea {
    height: 180px;
}

.online .main form ul li.textarea textarea {
    width: 100%;
    padding: 10px;
}

.online .main form ul li button {
    width: 100%;
    height: 100%;
    line-height: 40px;
    text-align: center;
    background-color: #173782;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: .4s all;
    border: 1px solid transparent;
}

.online .main form ul li button:hover {
    background-color: transparent;
    border-color: #999;
    border-radius: 5px;
    color: #666;
}

.online .close {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/close.png) no-repeat center center #173782;
    background-size: 60%;
    cursor: pointer;
}


/* 底部新增 */
.iPicker-target{width: 100%;margin-top: 10px;display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    justify-content: space-between;}
.iPicker-container{
    width: 32%;
    border: 1px solid #fff;
    padding: 0 10px;
    background-color: #fff;
    color: #434144;
    font-size: 14px;
    border-radius: 3px;
    transition: .2s all;
}
.iPicker-result input::-webkit-input-placeholder {
    color: #434144; }
.iPicker-container:not(:first-of-type){margin-left: 0;}
.iPicker-result{    border: 1px solid #fff;
    padding: 0 10px;
    background-color: #fff;
    color: #434144;
    font-size: 14px;
    border-radius: 3px;
    transition: .2s all;}
.bottom_yuyue {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 999999;
    padding: 40px 0;
    transition: .8s all; }
.bottom_yuyue.active {
    bottom: -225px; }
.bottom_yuyue.active .close {
    background: url("../img/open_yuyue.png") center no-repeat;
    background-size: 50%; }
.bottom_yuyue figure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; }
.bottom_yuyue figure img {
    width: 183px;
    height: 58.2px;
    object-fit: contain; }
.bottom_yuyue .index_title {
    width: auto;
    margin-left: 40px;
    padding-left: 40px;
    border-left: 1px solid #fff; }
.bottom_yuyue .index_title p {
    width: 260px;
    font-size: 16px ;
    color: #bdbdbd ;
    text-transform: uppercase;
    font-weight: bold ;
    line-height: 30px ; }
.bottom_yuyue .index_title span {
    font-size: 24px ;
    text-align: left; }
.bottom_yuyue .index_title span b {
    color:#fff;
    font-size: 24px ; }
.bottom_yuyue > div {
    width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative; }
.bottom_yuyue > div .close {
    position: absolute;
    right: -40px;
    top: -30px;
    display: block;
    width: 30px;
    height: 30px;
    border: 2px solid #1e2b69;
    border-radius: 50%;
    background: url("../img/onlineClose.png") center no-repeat;
    background-size: 50%;
    cursor: pointer; }
.bottom_yuyue > div form {
    width: 40%; }
.bottom_yuyue > div form dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    justify-content: space-between; }
.bottom_yuyue > div form dl dd {
    width: 32%;
    height: 35px; }
.bottom_yuyue > div form dl dd:nth-of-type(4) {
    width: 100%; }
.bottom_yuyue > div form dl dd select {
    background: url(../img/drop-down.png) #fff 95% center no-repeat; }
.bottom_yuyue > div form dl dd .ind {
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    padding: 0 10px;
    background-color: #fff;
    color: #434144;
    font-size: 14px;
    border-radius: 3px;
    transition: .2s all; }
.bottom_yuyue > div form dl dd .ind::-webkit-input-placeholder {
    color: #434144; }
.bottom_yuyue > div form dl dd .yuyue_btn {
    width: 100%;
    height: 100%;
    border: 1px solid #20346f;
    background-color: #20346f;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: .4s all; }
/* .bottom_yuyue > div form dl dd .yuyue_btn:hover {
  border-color: #1e2b69;
  color: #1e2b69;
  background-color: transparent;
  border-radius: 3px; } */
.bottom_yuyue > div form dl dd#distpicker-yuyue {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    justify-content: space-between; }
.bottom_yuyue > div form dl dd#distpicker-yuyue .ind {
    display:block;
    width: 32%; }
.bottom_yuyue > div form dl dd:nth-of-type(n+4) {
    margin-top: 20px; }
@media screen and (max-width: 1500px) {
    .bottom_yuyue > div .close {
        right: 0; }
    .bottom_yuyue > div {
        width: 100%;
        padding: 0 40px; }
    .bottom_yuyue > div .close {
        right: 40px; }
}
@media screen and (max-width: 1024px) {
    .bottom_yuyue > div form {
        width: 100%; }

    .bottom_yuyue.active {
        bottom: -362.36px; }

    .bottom_yuyue > div {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center; }

    .bottom_yuyue figure {
        margin-bottom: 4%; }

    .bottom_yuyue > div {
        padding: 0 20px; }
    .bottom_yuyue > div .close {
        right: 20px; }
}
@media screen and (max-width: 768px){
    .bottom_yuyue{
        display: none;
        bottom: 65px
    };

    .bottom_yuyue > div .close {
        top: -5px; }
    .bottom_yuyue .index_title span {
        margin-top: 0; }

    .bottom_yuyue.active {
        bottom: -302.8px; }

    .bottom_yuyue {
        padding: 15px 0; }

    .bottom_yuyue figure {
        width:100%;
        margin-bottom: 20px; }

    .bottom_yuyue .index_title p {
        width: 114px; }

    .bottom_yuyue .index_title {
        width:50%;
        margin-left: 0px;
        padding-left: 0px;
        border-left: none;
    }


    .bottom_yuyue figure img {
        width: 109.8px;
        height: 34.91px;
        display: none;
    }

    .bottom_yuyue .index_title p {
        display:none;
        font-size: 16px !important;
        line-height: 25px !important; }

    .bottom_yuyue .index_title span {
        font-size: 16px !important; }
    .bottom_yuyue .index_title span b {
        font-size: 16px !important; }
    .iPicker-result{padding-left: 0;}
    .iPicker-input{padding-right: 0;}
    .bottom_yuyue > div .close{top: -5px;}
}

.friendLink{
    color: #c7c7c7;
    font-size: 16px;
    line-height: 1.5;
 
}

.friendLink a {
    color: #c7c7c7;
    margin-right: 10px;

    
}
.friendLink a:hover{
    color: #fff;    

}


/* 加盟流程修改 */
.join-process{
    background: url(../img/join-y-bg.png) center no-repeat;
    -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;margin-top: 0;padding: 100px 0;
}
.swiper-join-y-box{position: relative;}
.swiper-join-y{overflow: hidden;position: relative;padding-bottom: 60px;}
.swiper-join-y-box .swiper-button-prev,.swiper-join-y-box .swiper-button-next{
    position: absolute;
    top: 195px;
    width: 32px;height: 32px;
    border: 1px solid #666666;background-repeat: no-repeat;
    background-position: center;-webkit-background-size: 6px;-moz-background-size: 6px;-o-background-size: 6px;background-size: 6px;
}

.swiper-join-y-box .swiper-button-prev{left: -90px;background-image: url(../img/join-prev1.png);}
.swiper-join-y-box .swiper-button-prev:hover{background-image: url(../img/join-prev2.png);background-color: #20346f;border-color: #20346f;}
.swiper-join-y-box .swiper-button-next:hover{background-image: url(../img/join-next2.png);background-color: #20346f;border-color: #20346f;}
.swiper-join-y-box .swiper-button-next{right: -90px;background-image: url(../img/join-next1.png);}
.swiper-join-y .swiper-slide-active.swiper-slide{
    position: relative;
    z-index:5;padding: 230px 0;
    left: 0;
    -ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);
}
.swiper-join-y .swiper-slide{
    position: relative;
    left: -100px;-ms-transform:scale(.5);-moz-transform:scale(.5);-webkit-transform:scale(.5);-o-transform:scale(.5);transform:scale(.5);
}
.swiper-join-y .swiper-slide-active .icon{display: none;}
.swiper-join-y .swiper-slide-active .big{display: block;position: absolute;left: 50%;top: 50%;-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.swiper-join-y .item{padding-bottom: 80px;}
.swiper-join-y .icon{width: 264px;height: 264px;text-align: center;border-radius: 50%;
    display: -webkit-flex;display: flex;justify-content: center;/* 水平居中 */align-items:center;/* 垂直居中 */align-content:center;margin: 300px auto 0 380px;position: absolute;left: 50%;top: 50%;-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.swiper-join-y .icon img{border-radius: 50%;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.swiper-join-y .icon span{font-size: 34px;color: #fff;line-height: 38px;position: relative;z-index: 1;}
.swiper-join-y .big{display: none;}
.swiper-join-y .big .img{
    display: block;border-radius: 50%;border: 1px dashed #87a9a2;padding: 50px;margin-bottom: 40px;
    width: 400px;height: 400px;background-color: #fff;
}
.swiper-join-y .big .img img{
    display: block;margin: 0 auto;
    width: 300px;height: 300px;border-radius: 50%;
}
.swiper-join-y .big .txt{text-align: center;}
.swiper-join-y .big .txt h3{font-family: 'PingFangSCBold';font-size: 22px;color: #0c1d12;line-height: 32px;}
.swiper-join-y .big .txt p{font-size: 14px;color: #333;line-height: 24px;}
@media screen and (max-width: 767px){
    .swiper-join-y .swiper-slide-active.swiper-slide{padding: 0;}
    .swiper-join-y .item{padding-bottom: 0;}
    .swiper-join-y .swiper-slide-active .big{position: static;transform:none;}
    .swiper-join-y .big .img{width: 260px;height: 260px;margin: 20px auto;padding: 30px;}
    .swiper-join-y .big .img img{width: 200px;height: 200px;}
    .swiper-join-y .big .img{background-color: transparent;}
    .swiper-join-y .big .txt h3{font-size: 18px;line-height: 28px;margin-bottom: 8px;}
    .swiper-join-y .big .txt p{
        font-size: 12px;line-height: 22px;
    }
    .join-process{padding: 50px 0;}
    .swiper-join-y .swiper-slide .icon{display: none;}
    .swiper-join-y .big{display: block;}
    .swiper-join-y-box{padding: 0 30px;}
    .swiper-join-y-box .swiper-button-prev,.swiper-join-y-box .swiper-button-next{top: 135px;}
    .swiper-join-y-box .swiper-button-prev{left: 0;}
    .swiper-join-y-box .swiper-button-next{right: 0;}
    .swiper-join-y .swiper-slide{left: 0;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
    .friendLink {
  
        font-size: 14px;
      
      }
}
@media screen and (max-width: 500px){
    .swiper-join-y .big .img{margin: 0 auto;}
    .swiper-join-y .big .img img{width: auth;height: auto;}
}