/* global
-------------------------------------------------- */

html,
body {
    min-width: 375px;
    overflow-x: hidden;
}

body {
    font-family: "PingFangSC-Light", "微软雅黑", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-family: "Open Sans", "PingFangSC-Light", "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif;
    font-size: 16px;
    background-color: #fff;
    overflow-y: hidden;
}

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

a>img {
    border: 0 none;
}

button {
    outline: none;
}

ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 100;
    margin: 10px 0;
}

.center {
    text-align: center;
}

.hide,
.hidden {
    display: none;
}

input,
textarea,
select {
    outline: none;
}

.arrow-black,
.arrow-black:before,
.arrow-black:after {
    color: #000;
    border-color: #000;
}

.arrow-blue,
.arrow-blue:before,
.arrow-blue:after {
    color: #2e6fec;
    border-color: #2e6fec;
}

.arrow-333,
.arrow-333:before,
.arrow-333:after {
    color: #333;
    border-color: #333;
}

img.w100p {
    width: 100%;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.clearfix {
    clear: both;
}

ul.clearfix::after {
    content: '';
    clear: both;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px;
    z-index: 999;
    opacity: .05;
    display: none;
    transition: all .3s ease-in-out;
}

a.pos-relative:hover .mask {
    display: block;
}

.bg-white {
    background-color: #fff;
}

span.p {
    display: block;
}

.center-middle {
    font-size: 0;
}

.center-middle::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 1px;
    margin: 0;
}

.center-middle-container {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: 99%;
    text-align: center;
}

.-center-middle-container- {
    text-align: center;
}

.ico-xs,
.ico-md {
    background: url(/upload/Image/icon.png) no-repeat;
    background-size: 250px 250px;
    width: 22px;
    height: 22px;
    display: inline-block;
}

.ico-md {
    width: 32px;
    height: 32px;
}

.i-email {
    background-position: -51px -1px;
}

.i-phone {
    background-position: -1px -1px;
}

.i-fax {
    background-position: -26px -1px;
}

.i-chat {
    background-position: -76px -1px;
}

.ico-locat {
    background-position: -1px -51px;
}

.ico-phone {
    background-position: -1px -26px;
}

.ico-fax {
    background-position: -26px -26px;
}

.ico-email {
    background-position: -51px -26px;
}

@font-face {
    font-family: DINPro;
    src: url('/css/fonts/DINPro-Regular.otf');
}


/* topper
-------------------------------------------------- */

.topper {
    position: absolute;
    z-index: 998;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #304058;
    color: #fff;
    padding: 3px 0;
}

.top-wrapper {
    width: 100%;
    max-width: 1280px;
    height: 29px;
    overflow: hidden;
    margin: 0 auto;
}

ul.top-info {
    margin-right: 10px;
}

ul.top-info li {
    list-style: none;
    float: left;
    padding: 4px 10px 3px 0;
}

ul.top-info a {
    float: left;
    line-height: 22px;
    display: inline-block;
}

ul.top-info a .ico-xs {
    float: left;
}

ul.top-info a .ico-text {
    float: left;
    color: #fff;
    font-size: .75em;
    line-height: 22px;
    display: inline-block;
    padding: 0 2px;
}

ul.top-info a .ico-text-val {
    float: left;
    color: #fff;
    font-size: .75em;
    opacity: .5;
    line-height: 14px;
    display: inline-block;
    margin: 4px 0;
    padding: 0 14px 0 5px;
    border-right: solid 1px rgba(255, 255, 255, .5);
}


/* header
-------------------------------------------------- */

.header {
    position: absolute;
    z-index: 997;
    top: 35px;
    left: 0;
    width: 100%;
    background-color: #fff;
    /*background: url(/temp/00-Header.png) no-repeat center -35px;
    background-size: 1440px 110px;
    min-height: 110px;*/
}

.page-home .header {
    background-color: transparent;
}

.head-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
    height: 75px;
    overflow: hidden;
}

.head-wrapper2 {
    border-bottom: solid 1px rgba(151, 151, 151, .1);
    padding: 14px 0 15px;
}

.logo-b {
    margin-left: 0;
}

.a-logo img {
    width: 180px;
    border: 0 none;
}

.header2 {
  transition: all .3s ease-in-out;
}
.header2-fixed {
  position: fixed;
  top: 0;
  background: rgba(255,255,255,.9)!important;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.header2-fixed .head-wrapper2{
  border-bottom-color: transparent;
}
ul.nav-main {
    float: left;
    margin: 5px 0;
    padding: 4px 0 0;
    width: 100%;
    min-width: 720px;
}

ul.nav-main>li {
    position: relative;
    list-style: none;
    float: left;
    margin: 0 50px 0 0;
}

ul.nav-main>li>a {
    color: #000;
    font-size: .875em;
    font-weight: 400;
    line-height: 28px;
    display: inline-block;
    transition: all .3s;
}

ul.nav-main>li>a.a-active {
    font-weight: 600;
}

.arrow-down-10 {
    position: absolute;
    right: -20px;
    top: 9px;
    width: 12px;
    height: 9px;
}

.arrow-down-10:after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-right-width: 1.25px;
    border-right-style: solid;
    border-top-width: 1.25px;
    border-top-style: solid;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

ul.nav-main>li>a::after {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 9999;
    top: 48px;
    left: 2px;
    right: 2px;
    height: 0;
    border-top: solid 2px #fd4f0b;
    transition: all .3s ease-in-out;
    transform: scale3d(0, 1, 1);
    transform-origin: center;
}

ul.nav-main>li:hover>a::after,
ul.nav-main>li>a.current::after {
    transform: scale3d(1, 1, 1);
}

.lang-select {
    float: left;
    border: solid 1px rgba(28, 44, 69, .1);
    border-radius: 5px;
    margin-top: 1px;
}

.lang-select a {
    float: left;
    width: 37.5px;
    height: 24px;
    line-height: 18px;
    padding: 3px;
    display: inline-block;
    text-align: center;
    color: #000;
    font-size: .75em;
    opacity: .3;
    border-left: solid 1px rgba(28, 44, 69, .1);
}

.lang-select a:first-child {
    border-left: solid 1px transparent;
}

.lang-select a:hover {
    opacity: .7;
}

.lang-select a.lang-active {
    opacity: 1;
}


/* search
-------------------------------------------------- */

.search-container.shrinkage {
    margin: 0;
}

li.nav-right {
    float: right !important;
    margin-right: 5px !important;
}

.search-container {
    float: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 150px;
    height: 30px;
    margin-right: 17px;
    transition: all .3s ease;
}

.search-container.shrinkage {
    width: 30px;
}

.search-container.open {
    width: 150px;
}

.search-container .search-wrap {
    box-sizing: border-box;
    position: relative;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 100%;
    height: 30px;
    overflow: hidden;
    will-change: width;
    border: 1px solid #fff;
    border-radius: 15px;
    transition: all .3s;
}

.search-container.open .search-wrap {
    border-color: #eaeaea;
}

.search-container .search-wrap .search-button {
    position: absolute;
    z-index: 100;
    right: 5px;
    top: 2px;
    text-align: center;
    cursor: pointer;
    background-position: -101px -1px;
}

.search-container .search-wrap .search-input {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px 0 8px;
    text-indent: 8px;
    border: none;
    line-height: 28px;
    height: 28px;
    font-size: 1.333rem;
}


/* footer
-------------------------------------------------- */

.footer {
    background-color: #272e39;
    color: #fff;
    min-height: 350px;
    /*background-image: url(/temp/00-Footer.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 1440px 350px;*/
}

.foot-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 15px;
}

.foot-row {
    padding: 10px 0;
}

.bottom-line {
    padding-bottom: 22px;
    margin-bottom: 15px;
    border-bottom: solid 1px rgba(151, 151, 151, .3);
}

ul.nav-foot {
    float: left;
    margin: 5px 0;
    padding: 0;
}

ul.nav-foot li {
    list-style: none;
    float: left;
    margin: 0 160px 0 0;
}

ul.nav-foot li a {
    color: #fff;
    font-weight: 600;
    font-size: .8em;
    line-height: 28px;
    display: inline-block;
    transition: all .3s;
}

ul.nav-foot li a:hover {
    opacity: .7;
}

.btn-danger {
    color: #fff;
    font-size: .75em;
    width: 140px;
    line-height: 24px;
    padding: 6px 0;
    display: inline-block;
    text-align: center;
    border: 0 none;
    border-radius: 10px;
    outline: none;
    background-color: #fa6400;
    transition: all .3s;
}

img.qrcode {
    border: 0 none;
    border-radius: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.tiny-text {
    font-size: .75em;
    opacity: .3;
}

.foot-row h3 {
    font-weight: 600;
    font-size: 1em;
    line-height: 28px;
    margin: 1px 0 16px;
}

ul.foot-info {
    margin: 1px 0 15px -2px;
    padding: 0;
}

ul.foot-info li {
    margin-top: 1px;
    float: left;
    line-height: 22px;
    width: 100%;
}

ul.foot-info li .ico-xs {
    float: left;
    margin-right: 5px;
}

.foot-info-text {
    float: left;
    font-size: .75em;
    opacity: .6;
    line-height: 22px;
}

.copyright {
    font-size: .75em;
    font-weight: 300;
    opacity: .3;
}

.beian a {
    margin-left: 10px;
    color: #fff;
    font-size: .8em;
    font-weight: 300;
    opacity: .3;
    transition: all .3s;
}

.beian a:hover {
    opacity: .7;
}

.foot-copyright {
    padding: 5px 0;
}

.subnav-foot a:hover {
    color: #fd4f0b;
}

.dot-12 {
    width: 15px;
    height: 15px;
    line-height: 14px;
    display: inline-block;
    vertical-align: bottom;
    border-radius: 8px;
    margin-left: 5px;
    background-color: #93969c;
    position: relative;
}

.arrow-right-6 {
    position: absolute;
    right: 2.5px;
    top: 5px;
    width: 8px;
    height: 12px;
}

.arrow-right-6:after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-color: #272e39;
    border-right-width: 1.25px;
    border-right-style: solid;
    border-top-width: 1.25px;
    border-top-style: solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-subgroup {
    padding-top: 5px;
    padding-left: 4px;
    padding-bottom: 20px;
}

.nav-subgroup .brand,
.nav-subgroup .apply {
    float: left;
    width: 50%;
    display: inline;
    position: relative;
}

.nav-subgroup .apply::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -30px;
    bottom: 18px;
    width: 1px;
    background-color: rgba(151, 151, 151, .3);
}

.nav-subgroup h4 {
    color: #fff;
    font-size: .8em;
    line-height: 16px;
}

ul.brand-gp,
ul.apply-gp {
    list-style: none;
    margin: 15px 100px 15px 0;
    padding: 0;
}

ul.brand-gp li a,
ul.apply-gp li a {
    padding: 5px 0;
    font-size: .75em;
    color: #fff;
    opacity: .6;
    display: inline-block;
    transition: all .3s;
    position: relative;
}

ul.brand-gp li a:hover,
ul.apply-gp li a:hover {
    color: #fd4f0b;
    opacity: 1;
}

ul.brand-gp li a::after,
ul.apply-gp li a::after {
    content: ' ';
    display: block;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 0;
    border-top: solid 1px #fd4f0b;
    transition: all .3s ease-in-out;
    transform: scale3d(0, 1, 1);
    transform-origin: center;
}

ul.brand-gp li:hover a::after,
ul.apply-gp li:hover a::after {
    transform: scale3d(1, 1, 1);
}

.foot-nav-table {
    border-collapse: collapse;
}

.foot-nav-table td {
    vertical-align: top;
}


/* body
-------------------------------------------------- */

.body {
    background-color: #fff;
    color: #000;
}

.page-home .body {
    margin-top: 35px;
}

.body-wrapper {
    width: 100%;
}

.card-bottom-line {
    border-bottom: solid 1px rgba(235, 235, 235, 1);
}

.card-bottom-line2 {
    border-bottom: solid 1px rgba(255, 255, 255, .1);
}

.card-header {
    padding: 32px 0 16px;
}

.card-title h2 {
    font-size: 2em;
    letter-spacing: 0;
    margin: 10px 0;
    font-weight: 600;
}

.card-title h3 {
    font-size: 1.5em;
    letter-spacing: 0;
    margin: 5px 0;
    font-weight: 600;
}

.card-subtitle h4 {
    font-size: 1.5em;
    letter-spacing: 3px;
    margin: 10px 0;
    font-weight: 400;
    padding: 20px 0 16px;
}

.card-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 15px;
}

.card-body {
    padding: 20px 0;
}

.page-about .body {
    /*background: url(/temp/07关于我们.jpg) no-repeat center top;
    background-size: 1440px 1242px;
    min-height: 1242px;*/
}

.page-home .body {
    /*background: url(/temp/01首页.png) no-repeat center -35px;
    background-size: 1440px 3874px;
    min-height: 3874px;*/
}

.page-news .body {
    /*background: url(/temp/04æ–°é—».jpg) no-repeat center -225px;
    background-size: 1440px 1300px;
    min-height: 1075px;*/
}

.page-sln .body {
    /*background: url(/upload/Image/wait.jpg) no-repeat center center;
    background-size: 640px 480px;
    min-height: 640px;*/
}

.page-pro .body {
    /*background: url(/temp/02产品列表.jpg) no-repeat center -225px;
    background-size: 1440px 1506px;
    min-height: 1280px;*/
}

.page-support .body {
    /*background: url(/temp/06服务与支持.jpg) no-repeat center -225px;
    background-size: 1440px 922px;
    min-height: 700px;*/
}

.card-summary {
    background-image: linear-gradient(95deg, #FFFFFF 43%, #EFF4F9 98%);
    position: relative;
}

.card-summary .card-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    background: url(/upload/Image/cg-3d.png) no-repeat right bottom;
    background-size: 556px 556px;
}

.card-summary .card-wrapper2 {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 15px;
}

.card-body-summary {
    max-width: 610px;
    width: 100%;
    padding: 0;
}

.card-body-summary-caption {
    position: relative;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    font-size: 1.25em;
    padding: 0 0 48px 24px;
    margin-left: 2px!important;
    margin-bottom: 24px!important;
}

.card-body-summary-caption:before {
    content: '';
    position: absolute;
    top: 4px;
    left: 1px;
    bottom: 52px;
    border-radius: 2px;
    width: 0;
    border-left: solid 5px #0165C9;
}

.card-body-summary p {
    margin: 15px 0;
    text-align: justify;
}

.coop-link {
    padding-top: 1.5px;
    position: relative;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    float: left;
    border-radius: 1px;
    box-shadow: inset -1px 0 1px #f9fbfd;
}

.coop-link>img {
    width: 100%;
}

.coop-image {
    float: left;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 14;
    display: inline-block;
    background-color: #f9fbfd;
    transition: all .5s;
}

.coop-image img {
    width: 100%;
}

.coop-title {
    float: left;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    display: inline-block;
    color: #fff;
    text-align: center;
    transition: all .5s;
}

.coop-link:hover .coop-image {
    top: 100%;
}

.coop-link:hover .coop-title {
    top: 0;
}

.card-wefocus .card-wrapper,
.card-coop .card-wrapper,
.card-client .card-wrapper {
    max-width: 1280px;
    padding: 0 15px;
    margin: 20px auto;
}

.card-wefocus {
    margin: 0 auto;
    padding: 140px 0 20px;
    background-image: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}

.page-home .card-wefocus {
    background: url(/upload/Image/bg-1013.jpg) no-repeat center top;
    background-size: cover;
    padding: 30px 0!important;
}

.page-home .card-foot {
    position: unset;
    bottom: 0;
    padding-bottom: 30px;
}

.card-digital {
    padding: 50px 0 20px;
}

.card-summary {
    min-height: 440px;
}

.coop-en,
.coop-cn {
    width: 90%;
    margin: 5px auto;
    display: block;
    font-size: 14px;
    line-height: 20px;
}

.coop-en {
    text-transform: uppercase;
}

.card-client {
    padding-bottom: 40px;
}

.card-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
}

.card-foot-summary {
    bottom: -80px;
}

.card-foot-summary .card-foot-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 15px;
}

.red-block {
    width: 92px;
    height: 4px;
    border-radius: 3px;
    display: block;
    background: #FD4F0B;
    margin: 20px auto 10px;
}

.digital-block {
    background: #fff;
    box-shadow: 0 2px 32px 0 #e5ebee;
    border-radius: 2px;
    padding: 25px;
}

.page-home .digital-block {
    box-shadow: none;
}

.digital-block .p {
    width: 100%;
    text-align: center;
}

.digital-block .p .num {
    font-family: DINPro;
    font-size: 2.75em;
    color: #1c2c45;
    letter-spacing: -2px;
    display: inline-block;
    line-height: 50px;
}

.digital-block .p .sub {
    display: inline-block;
    font-weight: 400;
    font-size: 1.25em;
    color: #fd4f0b;
    letter-spacing: 0;
    line-height: 50px;
}

.digital-tip {
    font-size: .85em;
}

@media screen and (max-width: 767px) {
    .card-foot-summary {
        bottom: -236px;
    }
    .card-wefocus {
        padding-top: 300px;
    }
}

@media screen and (max-width: 400px) {
    .digital-block .p .num {
        font-size: 2em;
    }
    .digital-tip {
        font-size: .75em;
    }
}

.wefocus-block {
    padding: 20px 0;
    background: #F9FBFD;
    box-shadow: 0 2px 15px 0 rgba(50, 79, 112, 0.20);
    border-radius: 9px;
}


/* row-col
-------------------------------------------------- */

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col {
    padding-right: 15px;
    padding-left: 15px;
}

.row-space-20 .col {
    padding-top: 10px;
    padding-bottom: 10px;
}

.row-space-30 .col {
    padding-top: 15px;
    padding-bottom: 15px;
}

.row-space-36 .col {
    padding-top: 18px;
    padding-bottom: 18px;
}

.row-space-40 .col {
    padding-top: 20px;
    padding-bottom: 20px;
}

.row-space-44 .col {
    padding-top: 22px;
    padding-bottom: 22px;
}

.row-space-48 .col {
    padding-top: 24px;
    padding-bottom: 24px;
}


/* banner
-------------------------------------------------- */

.banner-wrapper {
    width: 100%;
    background-color: #f7fbff;
    overflow: hidden;
    padding-top: 110px;
}

.banner-with-navbar {
    position: relative;
    padding-bottom: 56.7px;
}

.banner-with-navbar .banner-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.banner {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    text-align: center;
    position: relative;
    min-height: 240px;
    max-height: 320px;
}

.banner-image {
    width: 100%;
    max-width: 1440px;
}

.banner-image-small {
    width: 100%;
    max-width: 1440px;
}

.banner-image-mini {
    width: 100%;
    max-width: 1440px;
}

.banner-left {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    display: -webkit-flex; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
}
.banner-left-left {
    flex-grow: 1;
    background-color: #DCE8F3;
}
.banner-center {
    margin: 0 0 0 auto;
    height: 100%;
    width: 100%;
    max-width: 640px;
    min-width: 300px;
}

.banner-container {
    background-color: #DCE8F3;
    margin: 0 auto 0 0;
    height: 100%;
    width: 100%;
    max-width: 280px;
    border-right: solid 4px #fff;
}

.banner-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 1px;
    margin-left: -2px;
}

.banner-text {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 98%;
    padding-left: 15px;
    padding-bottom: 10px;
    max-width: 1254px;
}

.banner-text h1,
.banner-text h2 {
    margin: 12px 0 !important;
    font-size: 2.5em !important;
    letter-spacing: 3px;
    color: #000;
    font-weight: 600;
    opacity: .9;
}

.banner-text h2 {
    font-size: 36px !important;
    font-weight: 400;
}

.banner-text h3,
.banner-text h4,
.banner-text h5 {
    margin: 12px 0 !important;
    font-size: 12px !important;
    letter-spacing: 0;
    line-height: 1.4em;
    padding-left: 2px;
    color: #2d2d2d;
    font-weight: 300;
    text-align: justify;
}

.banner-text h4,
.banner-text h5 {
    max-width: 456px;
}

.banner-text h3 {
    font-size: 30px !important;
}

.banner-text h5 {
    font-size: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

@media (max-width:1080px) {
    .banner-text h1,
    .banner-text h2 {
        font-size: 28px !important;
    }
    .banner-text h3 {
        font-size: 26px !important;
    }
}

@media (max-width:768px) {
    .banner-text {
        vertical-align: bottom;
        width: 94%;
    }
    .banner-text h1,
    .banner-text h2 {
        font-size: 26px !important;
    }
    .banner-text h3 {
        font-size: 18px !important;
    }
}

.banner-about {
    background-color: #1c2c45;
}

.banner-news {
    background-color: #DCE8F3;
}

.banner-about .banner-text h1,
.banner-about .banner-text h5 {
    color: #fff;
}

.banner-news .banner-text h1,
.banner-news .banner-text h5 {
    color: #1c2c45;
}

.banner-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 27.5%;
    width: 4px;
    height: 100%;
    background-color: #fff;
}


/* home
-------------------------------------------------- */

.home-banner {
    /*min-height: 640px;*/
    display: block;
}

.index-ppt {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    min-height: 522px;
}

.index-ppt-image {
    width: 100%;
}

.index-ppt .swiper-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.index-ppt .swiper-slide {
    background-size: cover;
    background-position: center center;
}

.index-ppt .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: #000;
    opacity: .1;
}

.index-ppt .swiper-pagination-bullet-active {
    background-color: #fd4f0b;
    opacity: 1;
}

.index-ppt .swiper-pagination {
    text-align: left!important;
    left: 88px!important;
    bottom: 75px!important;
}

.label_skitter {
    left: 88px;
    bottom: 30%;
    position: absolute;
}

.label_skitter h2 {
    font-weight: 600;
    font-size: 2.25em;
    color: #000;
    letter-spacing: 0;
}

.label_skitter h3 {
    font-weight: 600;
    font-size: 2.25em;
    color: #000;
    letter-spacing: 0;
    opacity: .9;
}

.label_skitter h5 {
    margin-top: 0;
}

.label_skitter ul.slide-feature {
    margin: 25px 0 10px;
    padding: 0;
    list-style: none;
}

.label_skitter ul.slide-feature li {
    padding: 0;
    line-height: 24px;
    height: 24px;
}

.arrow-right-12 {}

.card-wtd {
    padding-top: 55px;
    padding-bottom: 26px;
    background-color: #fff;
}

.card-wtd .card-wrapper {
    max-width: 884px;
}

.card-wtd .card-title h2 {
    font-weight: 600;
    font-size: 1.95em;
    letter-spacing: 0;
}

.card-wtd .card-desc {
    font-size: .85em;
    opacity: .75;
}

.card-wtd .card-body {
    max-width: 780px;
    margin: 0 auto;
}

.p-img {
    width: 100%;
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.p-img .p-image {
    width: 100%;
    border: 0 none;
}

.p-txt {
    text-align: center;
    font-size: .85em;
    margin: 5px 0;
}

.home-gp01-p1 {
    max-width: 60px;
}

.home-gp01-t1 {
    opacity: .5;
}

.btn-orange {
    margin-top: 27px;
    color: #fff;
    font-size: .75em;
    width: 140px;
    line-height: 24px;
    padding: 6px 0;
    display: inline-block;
    text-align: center;
    border: 0 none;
    border-radius: 14px;
    outline: none;
    background-color: #fd4f0b;
    transition: all .3s;
}

.btn-orange:hover {
    color: #fff;
    opacity: .7;
}

.card-wtu {
    padding-top: 45px;
    padding-bottom: 55px;
    background-color: #f9fbfd;
}

.card-wtu .card-body {
    padding: 33px 0;
}

.card-wtu .card-wrapper {
    max-width: 1280px;
}

.card-wtu .card-title h2 {
    font-weight: 600;
    font-size: 1.95em;
    letter-spacing: 0;
}

.card-wtu-block {
    position: relative;
    min-height: 140px;
    padding: 20px 52px 17px 125px;
    margin: 16px auto 0;
    border-radius: 4px;
    background-color: #fff;
}

.card-wtu-icon {
    position: absolute;
    top: 30px;
    left: 30px;
}

.home-gp02-p1 {
    width: 60px;
    height: 60px;
}

.card-wtu-text {
    text-align: justify;
}

.card-wtu-text h4 {
    font-weight: 600;
    font-size: 1.25em;
    color: #1C2C45;
}

.card-wtu-text p {
    opacity: 0.7;
    font-size: .75em;
    color: #000;
}

.card-coop2 {
    max-width: 1308px;
    padding-top: 25px;
    padding-bottom: 35px;
    background-color: #fff;
}

.card-coop2 .card-title h2 {
    font-weight: 600;
    font-size: 1.95em;
    letter-spacing: 0;
}

.card-news {
    padding-top: 40px;
    padding-bottom: 0;
    background-color: #f9fbfd;
}

.card-news .card-wrapper {
    max-width: 1280px;
}

.card-news .card-title h2 {
    font-weight: 600;
    font-size: 1.95em;
    letter-spacing: 0;
}

.card-news .card-header {
    position: relative;
}

.card-news .card-action {
    position: absolute;
    top: 30px;
    right: 0;
}

.a-more {
    font-size: .75em;
    padding: 10px 0;
    display: inline-block;
    color: #fd4f0b;
    transition: all .3s;
}

.a-more:hover {
    color: #fd4f0b;
    opacity: .7;
}

.card-news .card-header {
    padding-bottom: 20px;
}

.card-news .card-body {
    padding: 50px 0;
}

.news-item {
    display: block;
}

.news-item-img {
    border-radius: 4px;
    overflow: hidden;
}

.news-item-img2 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

a.link-img:hover,
a .link-img:hover {
    transform: scale(1.05) translateZ(0);
}

a.link-img,
a .link-img {
    box-shadow: inset 0 0 1px rgba(100, 100, 100, .3);
    transition: transform .3s ease-in-out;
}

.news-title {
    font-weight: 600;
    font-size: 1.15em;
    color: #000;
    line-height: 1.5em;
}

.news-summary {
    font-size: .85em;
    color: #636363;
    line-height: 1.5em;
}

.news-tip {
    font-size: .85em;
    color: #bebebe;
}

.home-p6-body {
    padding: 0;
}

.home-p6-caption {
    padding-top: 15px;
}

.home-p6-summary {
    padding-top: 6px;
}

.home-p6-tips {
    padding: 15px 0;
}

a.news-item:hover .news-title {
    color: #fd4f0b;
}

.card-other {
    padding: 3px 0;
    background-color: #fff;
}

.card-other .card-wrapper {
    max-width: 1308px;
}

.home-gp03-p1 {
    width: 50px;
    height: 50px;
    display: block;
}

.card-other-block {
    padding: 42px 0 32px;
}

.card-other-text {
    max-width: 330px;
    margin: 9px auto;
    text-align: center;
}

.card-other-text .h4 {
    font-size: 1.375em;
    color: #000;
    padding-bottom: 5px;
    display: block;
    text-align: center;
}

.card-other-text p {
    opacity: 0.5;
    font-size: .85em;
    color: #000;
    text-align: center;
}

.card-other .card-body {
    padding: 0;
}

.card-left-line {
    border-left: solid 1px rgba(151, 151, 151, .3);
}

.card-wwcd {
    background: #1c2c45 url(/upload/Image/clover.png) no-repeat left bottom;
    background-size: 700px 700px;
    min-height: 800px;
}

.card-wwcd .card-wrapper {
    max-width: 1280px;
    padding: 50px 15px;
}

.card-wwcd-caption {
    font-weight: 600;
    font-size: 1.5em;
    color: #fff;
    letter-spacing: 0;
    line-height: 36px;
    vertical-align: middle;
}

.card-wwcd-caption .red {
    color: #fff;
}

.ico-dot {
    background-position: -212px -10px;
    vertical-align: middle;
    margin-right: 12px;
}

.ico-dot- {
    background-position: -208px -59px;
    vertical-align: middle;
    margin-right: 8px;
    width: 36px;
}

.tab-head {
    width: 100%;
    display: block;
}

.tab-head ul {
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
}

.tab-head ul::after {
    clear: both;
    content: '';
}

li.tab-option {
    padding: 10px 5px 10px 25px;
    font-size: 1em;
    font-weight: 600;
    display: inline-block;
}

li.tab-option a {
    position: relative;
    color: #000;
    display: block;
}

.card-wwcd li.tab-option a {
    color: #fff;
}

.card-client li.tab-option {
    padding: 10px 25px 10px 0;
    font-size: 1.15em;
}

li.tab-active a,
.card-wwcd li.tab-active a {
    color: #FD4F0B;
}

li.tab-option a::after {
    content: ' ';
    display: block;
    position: absolute;
    top: 25px;
    left: 1px;
    right: 1px;
    height: 0;
    border-top: solid 2px #FD4F0B;
    transition: all .3s ease-in-out;
    transform: scale3d(0, 1, 1);
    transform-origin: center;
}

.card-client li.tab-option a::after {
    top: 34px;
    left: 0;
}

li.tab-option a:hover::after,
li.tab-active a::after {
    transform: scale3d(1, 1, 1);
}

.tab-body {
    padding-bottom: 20px;
    width: 100%;
    display: block;
}

.tab-page {
    display: none;
}

.tab-page-active {
    display: block;
}

.wwcd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wwcd-list li {
    margin: 0;
    padding: 4px 0 4px 20px;
    line-height: 20px;
    position: relative;
    font-size: .9em;
    color: #fff;
}

.wwcd-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    display: inline-block;
    position: absolute;
    top: 11px;
    left: -1px;
    border-radius: 4px;
    background-color: #FD4F0B;
}

.wwcd-list li .wwcd-li-left {
    width: 240px;
    display: inline-block;
}


/* news
-------------------------------------------------- */

.bg-white {
    background-color: #fff;
}

.back-news {
    position: relative;
    float: left;
    padding: 10px 0 15px 15px;
    color: #343D48;
}

.arrow-back {
    position: absolute;
    left: 2px;
    top: 15px;
    width: 18px;
    height: 22px;
}

.arrow-back:after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-right-width: 2px;
    border-right-style: solid;
    border-top-width: 2px;
    border-top-style: solid;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.arrow-333,
.arrow-333:before,
.arrow-333:after {
    color: #343D48;
    border-color: #343D48;
}

.max-w920 {
    max-width: 920px;
    margin: 0 auto;
}

.news-gp-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 150%;
}

.bd-news-caption {
    padding: 30px 15px 0;
}

.bd-news-title {
    padding: 15px 0 5px;
    width: 100%;
    font-size: 28px;
}

.bd-news-tips {
    padding: 5px 0 15px;
    width: 100%;
    color: rgba(0, 0, 0, .6);
    font-size: 12px;
    line-height: 150%;
}

.bd-news-tip {
    float: left;
    margin: 0 15px 0 0;
    background: #f1f1f1;
    border-radius: 4px;
    padding: 4px 6px;
    line-height: 18px;
}

.bd-news-buttons {
    padding: 0;
    width: 100%;
    line-height: 150%;
}

.bd-news-content {
    padding: 0 15px;
}

a.news-item {
    position: relative;
    display: block;
    transition: all .3s ease-in-out;
}

a.news-item:hover {
    transform: translate(0, -3px);
}

.news-image {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, .1);
}

.p-image-wrapper,
.news-item-img {
    display: block;
    overflow: hidden;
}

.news-tip {
    padding: 2px 2px 2px 0;
    line-height: 100%;
    border-radius: 4px;
    margin-right: 8px;
    opacity: 0.6;
    font-size: 12px;
    color: #282828;
    letter-spacing: 0;
}

.news-p2-body {
    width: 100%;
    height: 130px;
    position: relative;
}

.news-p2-caption {
    padding: 15px 0 5px;
    height: 40px;
    text-align: justify;
    overflow: hidden;
    box-sizing: content-box;
}

.news-p2-title {
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    letter-spacing: 0;
    line-height: 1.35em;
    text-align: justify;
    height: 37px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-p2-tips {
    margin: 2px 0;
}

.news-p2-tips .news-tip {
    color: #bebebe;
}

.news-detail .news-image {
    padding: 27px 0;
}

.news-detail .news-summary {
    color: #666;
    line-height: 1.5em;
    font-size: 16px;
    text-align: justify;
    padding: 34px 0 20px;
}

.news-detail .news-body {
    color: #000;
    line-height: 1.5em;
    font-size: 16px;
    text-align: justify;
    padding: 20px 0;
}

.news-detail .news-body p {
    margin: 12px 0;
}

.news-detail .news-body p>img,
.news-detail .news-body p>span>img,
.news-detail .news-body div>img,
.news-detail .news-body section>img {
    border: 0 none;
}
.news-detail .news-body ul>li{
    list-style: disc;
}

.news-p1 {
    width: 100%;
    height: 268px;
    display: block;
    background-position: center center;
}

.news-p1-body {
    position: relative;
    float: left;
    width: 100%;
    height: 268px;
    padding: 3px 0 25px;
}

@media screen and (max-width: 752px) {
    .news-p1-body {
        padding: 25px 0 50px;
        height: auto;
    }
}

.news-p1-caption {
    text-align: justify;
}

.news-p1-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25em;
    color: #000000;
    letter-spacing: 0;
}

a.news-p1-title:hover,
a.news-p1-title:focus,
a.news-p1-title:active {
    color: #fd4f0b;
}

.news-p1-remark {
    margin-top: 15px;
    font-size: 14px;
    color: #636363;
    letter-spacing: 0;
    line-height: 1.5em;
}

.news-p1-tips {
    margin-top: 30px;
}

.news-p1-tip {
    font-size: 14px;
    color: #BEBEBE;
    letter-spacing: 0;
}

.news-p2-body {
    width: 100%;
    height: 145px;
    position: relative;
}

.news-p2-remark {
    font-size: 12px;
    color: #636363;
    letter-spacing: 0;
    line-height: 1.5em;
    height: 54px;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.max-w1280 {
    max-width: 1280px;
    margin: 0 auto;
}

.padding-0-5 {
    padding: 0 5px;
}
.padding-0-15 {
    padding: 0 15px;
}

.padding-10-x {
    padding-top: 10px;
    padding-bottom: 10px;
}

.home-p {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    display: block;
}



/* paginator
-------------------------------------------------- */

.page-wrap {
    clear: both;
    margin: 20px auto 0;
    width: 100%;
}

.paginator {
    margin: 2px auto;
    text-align: left;
}

.paginator,
.paginator>input,
.paginator>button {
    font-size: 12px;
}

.paginator>a,
.paginator>span {
    display: inline-block;
    font-size: 12px;
    height: 41px;
    min-width: 41px;
    border-radius: 2px;
    margin: 10px 3px 10px 1px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 22px;
    padding: 8px;
    background: #fff;
    border: solid 1px #ececec;
    color: #828282;
}

.paginator .page-start,
.paginator .page-end {
    color: #828282;
}

.paginator>a:hover,
.paginator .page-this {
    background-color: #FD4F0B;
    border-color: #FD4F0B;
    color: #fff;
}

.paginator .page-start,
.paginator .page-prev {
    padding: 8px 20px 8px 27px;
    position: relative;
}

.paginator .page-next,
.paginator .page-end {
    padding: 8px 27px 8px 20px;
    position: relative;
}

.paginator .page-prev .arrow,
.paginator .page-prev .arrow:after,
.paginator .page-prev .arrow:before,
.paginator .page-next .arrow,
.paginator .page-next .arrow:after,
.paginator .page-next .arrow:before {
    color: #828282;
    border-color: #828282;
}
.paginator .page-prev:hover .arrow:before,
.paginator .page-next:hover .arrow:before {
    background-color: #fff;
}

.paginator .page-prev:hover .arrow,
.paginator .page-prev:hover .arrow:after,
.paginator .page-prev:hover .arrow:before,
.paginator .page-next:hover .arrow,
.paginator .page-next:hover .arrow:after,
.paginator .page-next:hover .arrow:before {
    color: #fff;
    border-color: #fff;
}

.paginator .page-start .arrow,
.paginator .page-start .arrow:after,
.paginator .page-end .arrow,
.paginator .page-end .arrow:after {
    color: #828282;
    border-color: #828282;
}

.arrow-left-15 {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -5px;
    width: 15px;
    height: 15px;
}

.arrow-left-15:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-left-width: 2px;
    border-left-style: solid;
    border-top-width: 2px;
    border-top-style: solid;
    border-radius: 1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.arrow-left-15:before {
    position: absolute;
    top: 27.5%;
    left: 0;
    content: '';
    display: block;
    width: 11px;
    height: 0;
    border: solid 1px #828282;
    background: #828282;
    border-radius: 1px;
}

.arrow-right-15 {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -5px;
    width: 15px;
    height: 15px;
}

.arrow-right-15:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right-width: 2px;
    border-right-style: solid;
    border-top-width: 2px;
    border-top-style: solid;
    border-radius: 1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.arrow-right-15:before {
    position: absolute;
    top: 27.5%;
    right: 5px;
    content: '';
    display: block;
    width: 11px;
    height: 2px;
    height: 0;
    border: solid 1px #828282;
    background: #828282;
    border-radius: 1px;
}

.support-body {
    max-width: 916px;
    margin: 0 auto;
    padding: 0 15px 55px;
}
.support-tips {
    padding: 55px 0 25px;
}
.support-l1,
.support-l2 {
    font-size: 1.375em;
    margin: 8px 0;
    font-weight: 400;
}

.support-form {
    padding-top: 24px;
}

.row-space-50 {
    margin-left: -25px;
    margin-right: -25px;
}

.row-space-50>.col {
    padding-left: 25px;
    padding-right: 25px;
}

.row-space-30 {
    margin-left: -15px;
    margin-right: -15px;
}

.row-space-30>.col {
    padding-left: 15px;
    padding-right: 15px;
}

.row-space-26 {
    margin-left: -13px;
    margin-right: -13px;
}

.row-space-26>.col {
    padding-left: 13px;
    padding-right: 13px;
}

.row-space-24 {
    margin-left: -12px;
    margin-right: -12px;
}

.row-space-24>.col {
    padding-left: 12px;
    padding-right: 12px;
}

.row-space-20 {
    margin-left: -10px;
    margin-right: -10px;
}

.row-space-20>.col {
    padding-left: 10px;
    padding-right: 10px;
}

.row-space-16 {
    margin-left: -8px;
    margin-right: -8px;
}

.row-space-16>.col {
    padding-left: 8px;
    padding-right: 8px;
}

.row-space-12 {
    margin-left: -6px;
    margin-right: -6px;
}

.row-space-12>.col {
    padding-left: 6px;
    padding-right: 6px;
}

.row-space-10 {
    margin-left: -5px;
    margin-right: -5px;
}

.row-space-10>.col {
    padding-left: 5px;
    padding-right: 5px;
}

.row-space-8 {
    margin-left: -4px;
    margin-right: -4px;
}

.row-space-8>.col {
    padding-left: 4px;
    padding-right: 4px;
}

.row-space-6 {
    margin-left: -3px;
    margin-right: -3px;
}

.row-space-6>.col {
    padding-left: 3px;
    padding-right: 3px;
}

.row-space-4 {
    margin-left: -2px;
    margin-right: -2px;
}

.row-space-4>.col {
    padding-left: 2px;
    padding-right: 2px;
}

.row-space-0 {
    margin-left: 0;
    margin-right: 0;
}

.row-space-0>.col {
    padding-left: 0;
    padding-right: 0;
}

.row .col {
    min-height: 1px;
    box-sizing: border-box;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
}

.row:after {
    content: '';
    clear: both;
    display: block;
}

.co-1,
.co-2,
.co-3,
.co-4,
.co-5,
.co-6,
.co-7,
.co-8,
.co-9,
.co-10,
.co-11,
.co-12,

/*标准*/

.cx-1,
.cx-2,
.cx-3,
.cx-4,
.cx-5,
.cx-6,
.cx-7,
.cx-8,
.cx-9,
.cx-10,
.cx-11,
.cx-12,

/*è¿·ä½ */

.ct-1,
.ct-2,
.ct-3,
.ct-4,
.ct-5,
.ct-6,
.ct-7,
.ct-8,
.ct-9,
.ct-10,
.ct-11,
.ct-12,

/*小屏*/

.cs-1,
.cs-2,
.cs-3,
.cs-4,
.cs-5,
.cs-6,
.cs-7,
.cs-8,
.cs-9,
.cs-10,
.cs-11,
.cs-12,

/*平板*/

.cm-1,
.cm-2,
.cm-3,
.cm-4,
.cm-5,
.cm-6,
.cm-7,
.cm-8,
.cm-9,
.cm-10,
.cm-11,
.cm-12,

/*适中*/

.cl-1,
.cl-2,
.cl-3,
.cl-4,
.cl-5,
.cl-6,
.cl-7,
.cl-8,
.cl-9,
.cl-10,
.cl-11,
.cl-12,

/*宽屏*/

.colx {
    float: left;
}

.co-1 {
    width: 8.33333333%;
}

.co-2 {
    width: 16.66666667%;
}

.co-3 {
    width: 25%;
}

.co-4 {
    width: 33.33333333%;
}

.co-5 {
    width: 41.66666667%;
}

.co-6 {
    width: 50%;
}

.co-7 {
    width: 58.33333333%;
}

.co-8 {
    width: 66.66666667%;
}

.co-9 {
    width: 75%;
}

.co-10 {
    width: 83.33333333%;
}

.co-11 {
    width: 91.66666667%;
}

.co-12 {
    width: 100%;
}

.co-quintile {
    width: 20%;
}

@media (max-width: 370px) {
    .cx-hide {
        display: none;
    }
    .cx-show {
        display: block;
    }
    .cx-show-imp {
        display: block!important;
    }
    .col-100-400 {
        width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 371px) {
    .cx-half {
        width: 4.16666667%;
    }
    .cx-1 {
        width: 8.33333333%;
    }
    .cx-2 {
        width: 16.66666667%;
    }
    .cx-3 {
        width: 25%;
    }
    .cx-4 {
        width: 33.33333333%;
    }
    .cx-5 {
        width: 41.66666667%;
    }
    .cx-6 {
        width: 50%;
    }
    .cx-7 {
        width: 58.33333333%;
    }
    .cx-8 {
        width: 66.66666667%;
    }
    .cx-9 {
        width: 75%;
    }
    .cx-10 {
        width: 83.33333333%;
    }
    .cx-11 {
        width: 91.66666667%;
    }
    .cx-12 {
        width: 100%;
    }
}

@media (max-width: 565px) {
    .ct-hide {
        display: none;
    }
    .ct-show {
        display: block;
    }
    .ct-show-imp {
        display: block!important;
    }
    .col-100-720 {
        width: 100%;
        margin: 0 auto;
    }
    .row-space-24t {
        margin-left: -6px;
        margin-right: -6px;
    }
    .row-space-24t>.col {
        padding-left: 6px;
        padding-right: 6px;
    }
    .row-space-24t>.padding-12-x {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (min-width: 566px) {
    .co-1-5 {
        width: 20%;
    }
    .ct-1 {
        width: 8.33333333%;
    }
    .ct-2 {
        width: 16.66666667%;
    }
    .ct-3 {
        width: 25%;
    }
    .ct-4 {
        width: 33.33333333%;
    }
    .ct-5 {
        width: 41.66666667%;
    }
    .ct-6 {
        width: 50%;
    }
    .ct-7 {
        width: 58.33333333%;
    }
    .ct-8 {
        width: 66.66666667%;
    }
    .ct-9 {
        width: 75%;
    }
    .ct-10 {
        width: 83.33333333%;
    }
    .ct-11 {
        width: 91.66666667%;
    }
    .ct-12 {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .cs-hide {
        display: none;
    }
    .cs-show {
        display: block;
    }
    .cs-show-imp {
        display: block!important;
    }
    .col-100-720 {
        width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 721px) {
    .co-1-5 {
        width: 20%;
    }
    .cs-1 {
        width: 8.33333333%;
    }
    .cs-2 {
        width: 16.66666667%;
    }
    .cs-3 {
        width: 25%;
    }
    .cs-4 {
        width: 33.33333333%;
    }
    .cs-5 {
        width: 41.66666667%;
    }
    .cs-6 {
        width: 50%;
    }
    .cs-7 {
        width: 58.33333333%;
    }
    .cs-8 {
        width: 66.66666667%;
    }
    .cs-9 {
        width: 75%;
    }
    .cs-10 {
        width: 83.33333333%;
    }
    .cs-11 {
        width: 91.66666667%;
    }
    .cs-12 {
        width: 100%;
    }
}

@media (max-width: 1096px) {
    .cm-hide {
        display: none;
    }
    .cm-show {
        display: block;
    }
    .cm-show-imp {
        display: block!important;
    }
}

@media (min-width: 1097px) {
    .co-4-20 {
        width: 20%;
    }
    .co-1-5 {
        width: 20%;
    }
    .cm-1 {
        width: 8.33333333%;
    }
    .cm-2 {
        width: 16.66666667%;
    }
    .cm-3 {
        width: 25%;
    }
    .cm-4 {
        width: 33.33333333%;
    }
    .cm-5 {
        width: 41.66666667%;
    }
    .cm-6 {
        width: 50%;
    }
    .cm-7 {
        width: 58.33333333%;
    }
    .cm-8 {
        width: 66.66666667%;
    }
    .cm-9 {
        width: 75%;
    }
    .cm-10 {
        width: 83.33333333%;
    }
    .cm-11 {
        width: 91.66666667%;
    }
    .cm-12 {
        width: 100%;
    }
    .tech-p3-group,
    .tech_inst-p3-group {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    .tech-p3-group .col,
    .tech_inst-p3-group .col {
        padding: 10px !important;
    }
}

@media (max-width: 1350px) {
    .cl-hide {
        display: none;
    }
    .cl-show {
        display: block;
    }
    .cl-show-imp {
        display: block!important;
    }
}

@media (min-width: 1351px) {
    .co-4-20 {
        width: 20%;
    }
    .co-1-5 {
        width: 20%;
    }
    .cl-1 {
        width: 8.33333333%;
    }
    .cl-2 {
        width: 16.66666667%;
    }
    .cl-3 {
        width: 25%;
    }
    .cl-4 {
        width: 33.33333333%;
    }
    .cl-5 {
        width: 41.66666667%;
    }
    .cl-6 {
        width: 50%;
    }
    .cl-7 {
        width: 58.33333333%;
    }
    .cl-8 {
        width: 66.66666667%;
    }
    .cl-9 {
        width: 75%;
    }
    .cl-10 {
        width: 83.33333333%;
    }
    .cl-11 {
        width: 91.66666667%;
    }
    .cl-12 {
        width: 100%;
    }
}

@media (max-width:565px) and (min-width:370px) {
    .ct-4-only {
        float: left;
        width: 33.33333333%;
    }
}

.form-group {
    margin-top: 0;
    margin-bottom: 19px;
}

.form-group label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.form-group label span.valid {
    font-size: 14px;
}

.input-group {
    width: 100%;
}

.form-control {
    width: 100%;
    padding: 5px 10px;
    border-radius: 4px;
    border: solid 1px rgba(0, 0, 0, .1);
    background-color: #fbfbfb;
}

.form-input,
.form-text {
    font-size: 16px;
    line-height: 150%;
}

.form-input:focus,
.form-text:focus {
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .1);
}

.form-text {
    height: 160px;
    overflow: auto;
    overflow-x: hidden;
    resize: none;
}

.bPtMLA {
    border: none;
    margin: 0px;
    padding: 0px;
    overflow: visible;
    overflow-wrap: normal;
    box-shadow: rgb(0 0 0 / 16%) 0px 5px 40px;
    border-radius: 8px;
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
    right: 60px;
    display: block !important;
    width: 330px !important;
    height: 540px !important;
}

.wait-dev {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 100px 0;
    min-height: 380px;
    background: url(/upload/Image/wait.jpg) no-repeat center center;
    background-size: contain;
}


.pro-wrapper{max-width:1280px;margin:0 auto;padding:20px 15px;}
.pro-filter-group{margin:4px auto 20px 0;width:81%;min-width:225px;}
.pro-filter-group a{transition: all .3s ease-in-out;}
.pro-filter-group a:hover{background-color:#E9EEF4;}
.pro-filter-catpion{position:relative;margin:1px 0 2px;font-family:'PingFangSC-thin';font-size:.9em;font-weight:600;padding:10px 19px;line-height:1.5em;background-color:#F9FBFD;border-radius:6px;}
.ico-collapse{position: absolute;right: 18px;top: 11px;width: 18px;height: 18px;display: block;border: solid 1px rgba(28,44,69,.2);border-radius: 3px;cursor:pointer;}
.ico-collapse.ico-extend{-webkit-transform:rotateX(180deg);transform:rotateX(180deg);}
.ico-collapse:hover{background-color:#E9EEF4;}
.ico-collapse:after{content:' ';display: block;width: 6px;height: 6px;margin:3px 5px;border:#1c2c45;border-right-width: 1.25px;border-right-style: solid;border-top-width: 1.25px;border-top-style: solid;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.pro-filter-brand{}
.pro-filter-brand>ul{list-style: none;margin: 0;padding: 0;}
li.filter-brand{position:relative;margin:1px 0;border-radius:6px;}
li.filter-brand .filter-checked:before{position:absolute;left:18px;top:11px;content:'';width:8px;height:8px;border:solid 1px #FD4F0B;background:#FD4F0B;border-radius:4px;}
li.filter-brand a{font-size:.75em;color:#000;padding:6px 15px;text-indent:25px;width:100%;display:inline-block;line-height:1.6em;background-color:#F9FBFD;border-radius:6px;}
li.filter-brand a:after{}
.pro-filter-class{}
.pro-filter-class>ul{list-style: none;margin: 0;padding: 0;}
li.filter-class{position:relative;margin:1px 0;border-radius:6px;}
li.filter-class .filter-checked:before{position:absolute;left:18px;top:11px;content:'';width:8px;height:8px;border:solid 1px #FD4F0B;background:#FD4F0B;border-radius:4px;}
li.filter-class .filter-selected:before{background-color:#fff!important;}
li.filter-class>a{font-size:.75em;color:#000;padding:6px 15px;text-indent:25px;width:100%;display:inline-block;line-height:1.6em;background-color:#F9FBFD;border-radius:6px;}
.ico-collapse2{position: absolute;right:21px;top:8px;width:12px;height:12px;display: block;opacity:.3;transition:all .3s;}
.ico-collapse2:after{content:' ';display: block;width: 6px;height:6px;margin:3px;border:#1c2c45;border-right-width: 1.25px;border-right-style: solid;border-top-width: 1.25px;border-top-style: solid;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
li.filter-class.extend-sub .ico-collapse2{-webkit-transform:rotateX(180deg);transform:rotateX(180deg);top:12px;}
li.filter-class.extend-sub{background-color:#e9eef4;}
li.filter-class.extend-sub>a{background-color:#e9eef4;}
li.filter-class.extend-sub>a:hover{color:#fd4f0b;}
.ico-sub-0{display:none!important;}
.sub-class{display:none;transition:all .6s;}
li.filter-class.extend-sub .sub-class{display:block;}
.sub-class>ul{list-style: none;margin: 0;padding: 0;}
li.filter-sub-class{position:relative;margin:2px 0 1px;}
li.filter-sub-class .filter-checked:before{position:absolute;left:18px;top:11px;content:'';width:8px;height:8px;border:solid 1px #FD4F0B;background:#FD4F0B;border-radius:4px;}
li.filter-sub-class>a{font-size:.75em;color:#000;padding:6px 15px;text-indent:50px;width:100%;display:inline-block;line-height:1.6em;background-color:#F9FBFD;border-radius:6px;}
li.filter-sub-class>a:after{content:' ';position:absolute;top:-1px;left:40px;right:20px;height:0;border-top:solid 1px rgba(28,44,69,.05);}
li.filter-sub-class>a:hover{color:#fd4f0b;}
li.filter-class.extend-sub li.filter-sub-class>a{background-color:#e9eef4;}
li.filter-sub-class>a:after{}
.home-p .p-image{width:100%;}
.product-item{}
a.home-p-link{display:block;transition: all .3s;}
a.home-p-link:hover{transform: translate(0, -3px);}
a.home-p-link:hover .home-p {}
.pro_item-p1{box-shadow:inset 0 0 80px rgb(0 0 0 / 3%);background-position:-1px center;background-size: contain;}
.pro_item-text{padding:10px 0;}
.p-brand{color:#888;font-size:.75em;width:100%;height:20px;line-height:1.25em;padding:2px 0;text-align:justify;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.p-model{color:#888;font-size:.75em;width:100%;height:20px;line-height:1.25em;padding:2px 0;text-align:justify;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.p-title{color:#000;font-size:.9em;width:100%;height:52px;line-height:1.5em;padding:5px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

.wrapper-1{width:100%;margin:0 auto;padding:0;background:#fff url(/upload/Image/pro-topbg.png) repeat-y center top;}
.wrapper-2{min-height:800px;max-width:1068px;margin:0 auto;padding:50px 0;}
.card-pro-detail .card-wrapper{padding:0 15px;}
.card-pro-detail .card-header{padding:20px 0;}
.card-pro-detail .card-title h2{font-size:1.75em;font-family:'PingFangSC-Semibold';}
.card-pro-detail .card-body{padding:12px 0;}
.card-pro-detail .tab-btns .btn-strong{min-width:120px;width:77.5%;margin-top:0;margin-bottom:15px;font-size:0.9em;padding:8px 0;}
.card-pro-detail .tab-caption{font-size: 1.35em;padding-left:20px;font-weight:300;margin: 0 0 20px;font-family:'PingFangSC-Semibold';}
.card-pro-detail .tab-body div,
.card-pro-detail .tab-body {padding-left:24px;}
.card-pro-detail .tab-body div,
.card-pro-detail .tab-body p{text-align:justify;line-height:1.5em;}
.card-pro-detail .tab-body strong{color:#fd4f0b;padding:12px 0;font-size:1.2em;display:block;font-weight:400;}
.card-pro-detail .tab-body-0{font-size:0.9em;}
.card-pro-detail .tab-body-1{font-size:0.9em;}
.card-pro-detail .tab-body-2{font-size:0.75em;opacity:.8;padding-top:15px;}
.card-pro-detail .tab-body-2 p{margin:0 0 15px;line-height:1.35em;}
.card-pro-detail ul li {
    position: relative;
}
.card-pro-detail ul li:before {
    content: '';
    width: 8px;
    height: 8px;
    display: inline-block;
    position: absolute;
    top: 7px;
    left: -24px;
    border-radius: 4px;
    background-color: #FD4F0B;
}

.ico-pro-class {background-position:-101px -26px;}
.ico-download {background-position:-126px -26px;}
.product-wrapper {max-width:1442px;margin:0 auto;padding:0 15px;}
.product-wrapper .col-left {background-color:#fff;}
.product-wrapper .col-right {background-color:#1c2c45;}
.pro-top-left,
.pro-top-right {position:relative;min-height:450px;}
.pro-top-square {width:100%;}
.pro-top-left .page-crumbs {position:absolute;z-index:10;top:0;right:0;height:40px;line-height:22px;font-size:.8em;padding:10px 0;width:100%;max-width:608px;}
.pro-top-left .page-crumbs a{color:#000;}
.pro-top-left .page-crumbs a:hover{opacity:.8;}
.pro-top-left .pro-images {position:absolute;z-index:10;top:60px;right:0;bottom:0;width:100%;max-width:608px;min-height:390px;}
.pro-top-right .center-middle {position:absolute;z-index:10;top:0;left:0;right:0;bottom:0;}
.pro-top-right .center-middle .center-middle-container {padding-bottom:10px;}
.pro-top-right .section-1,
.pro-top-right .section-2,
.pro-top-right .section-3,
.pro-top-right .section-4,
.pro-top-right .section-5 {
  text-align: left;
  padding: 0 40px;
  color: #fff;
}
.pro-top-right .pro-class i.ico {float:left;}
.pro-top-right .pro-class span {float:left;line-height:22px;font-size:0.85em;opacity:.9;}
.pro-top-right .pro-class span.sepor {padding:0 6px;color:#FD4F0B;}
.pro-top-right .pro-class {padding-left:2px;}
.pro-top-right .pro-class-1 {padding-left:4px;}
.pro-top-right .section-2 h2 {font-weight:400;padding:5px 0;}
.pro-top-right .pro-attr {float:left;line-height:22px;font-size:0.85em;padding-right:30px;}
.pro-top-right .pro-attr label {padding: 0 4px 0 2px;font-weight:300;opacity:.5;}
.pro-top-right .section-4 {line-height:20px;font-size:0.85em;opacity:.7;max-width:532px;text-align:justify;padding-top:30px;}
.btn-download {width:auto;padding:6px 18px 6px 12px;margin-top:36px;}
.btn-download i.ico,
.btn-download span.btn-text {float:left;line-height:24px;}
.btn-download span.btn-text {padding-left:8px;}
.btn-download:focus{color:#fff;}


.pro-images .swiper-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.pro-images .swiper-container .swiper-wrapper {
    top: 0;
    bottom: 100px;
    height: auto;
}
.pro-images .swiper-slide {
    box-shadow:inset 1px 0 rgba(255,255,255,1);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.pro-images .swiper-container-horizontal>.swiper-pagination-bullets, 
.pro-images .swiper-pagination-custom, 
.pro-images .swiper-pagination-fraction {
  height: 100px;
  padding: 20px 90px;
  left: 0;
  right: 0;
  overflow: hidden;
  width: auto;
  text-align: left;
}
.pro-images .swiper-pagination-bullet {
  width: 60px;
  height: 60px;
  display: inline-block;
  border: solid 1px #ececed;
  border-radius: 3px;
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: .8;
}
.pro-images .swiper-pagination-bullet-active {
  border: solid 1px #1c2c45;
}
.pro-images .swiper-pagination-white {
  background-color: #fff;
}
.pro-images .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px 0 12px;
}



.scrolltop{
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    position: fixed;
    bottom: 100px;
    right: 32px;
    cursor: pointer;
    z-index: 100;
    padding: 12px 10px 5px;
    background-color: #fff;
    border: solid 1px rgba(28,44,69,.15); 
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgb(0 0 0 / 8%);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
    border-radius: 50%;
    opacity:0;
    display:none;
    animation:animation-scrolltop .4s ease-out 1;
}
body[data-scrolltop="on"] .scrolltop{
    opacity: 0.3;
    animation: animation-scrolltop .4s ease-out 1;
    display: flex;
}
.scrolltop:hover{
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
    opacity: 1!important;
    background-color: #fa6400;
    border-color: #fa6400;
}