@import 'swiper.min.css';
@import 'fontawesome-all.css';
@import 'iconfont.css';
@import 'animate.css';
@import 'icheck.css';

.copyright:before {
    content: "Copyright@2018 互联先锋版权所有"
}

article,
aside,
dialog,
footer,
header,
section,
footer,
nav,
figure,
menu {
    display: block
}

.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0 10px
}

.overflow-h {
    overflow: hidden
}

.nowrap {
    white-space: nowrap
}

.wrap {
    word-break: break-all
}

.t-useless {
    text-decoration: line-through
}

.font12 {
    font-size: 12px !important
}

.font12-w {
    font-size: 12px;
    color: #fff
}

.font12-b3 {
    font-size: 12px;
    color: #333
}

.font12-b6 {
    font-size: 12px;
    color: #666
}

.font12-b9 {
    font-size: 12px;
    color: #999
}

.font14 {
    font-size: 14px !important
}

.font14-w {
    font-size: 14px;
    color: #fff
}

.font14-b3 {
    font-size: 14px;
    color: #333
}

.font14-b6 {
    font-size: 14px;
    color: #666
}

.font14-b9 {
    font-size: 14px;
    color: #999
}

.font16 {
    font-size: 16px !important
}

.font16-w {
    font-size: 16px;
    color: #fff
}

.font16-b3 {
    font-size: 16px;
    color: #333
}

.font16-b6 {
    font-size: 16px;
    color: #666
}

.font16-b9 {
    font-size: 16px;
    color: #999
}

.font18 {
    font-size: 18px !important
}

.font18-w {
    font-size: 18px;
    color: #fff
}

.font18-b3 {
    font-size: 18px;
    color: #333
}

.font18-b6 {
    font-size: 18px;
    color: #666
}

.font18-b9 {
    font-size: 18px;
    color: #999
}

.font20 {
    font-size: 20px !important
}

.font20-w {
    font-size: 20px;
    color: #fff
}

.font20-b3 {
    font-size: 20px;
    color: #333
}

.font20-b6 {
    font-size: 20px;
    color: #666
}

.font20-b9 {
    font-size: 20px;
    color: #999
}

.font24 {
    font-size: 24px !important
}

.font24-w {
    font-size: 24px;
    color: #fff
}

.font24-b3 {
    font-size: 24px;
    color: #333
}

.font24-b6 {
    font-size: 24px;
    color: #666
}

.font24-b9 {
    font-size: 24px;
    color: #999
}

.font30 {
    font-size: 30px !important
}

.font30-w {
    font-size: 30px;
    color: #fff
}

.font30-b3 {
    font-size: 30px;
    color: #333
}

.font30-b6 {
    font-size: 30px;
    color: #666
}

.font30-b9 {
    font-size: 30px;
    color: #999
}

.font48 {
    font-size: 48px !important
}

.font48-w {
    font-size: 48px;
    color: #fff
}

.font48-b3 {
    font-size: 48px;
    color: #333
}

.font48-b6 {
    font-size: 48px;
    color: #666
}

.font48-b9 {
    font-size: 48px;
    color: #999
}

.font-dark {
    color: #333
}

.font-color {
    color: #666
}

.font-light {
    color: #999
}

.font-red {
    color: #ef2a3a
}

.font-blue {
    color: #66afe9
}

.font-white {
    color: #fff !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal
}

.bold {
    font-weight: bold
}

.float-right {
    float: right
}

.float-left {
    float: left
}

.center,
center {
    text-align: center
}

.left,
left {
    text-align: left
}

.right,
right {
    text-align: right
}

.justify {
    text-align: justify
}

.vert-align-t {
    vertical-align: middle
}

* {
    box-sizing: border-box
}

.h-100per {
    height: 100%
}

.hi-100per {
    height: 100% !important
}

.w-100per {
    width: 100%
}

.wi-100per {
    width: 100% !important
}

.w-80per {
    width: 80%
}

.w-60per {
    width: 60%
}

.w-50per {
    width: 50%
}

.w-40per {
    width: 40%
}

.w-33per {
    width: 33.3%
}

.w-25per {
    width: 25%
}

.w-20per {
    width: 20%
}

.wc-50per>* {
    width: 50%
}

.wc-33per>* {
    width: 33.3%
}

.wc-25per>* {
    width: 25%
}

.wc-20per>* {
    width: 20%
}

.no-margin {
    margin: 0
}

.no-padding {
    padding: 0
}

.p-25 {
    padding: 25px
}

.p-20 {
    padding: 20px
}

.p-10 {
    padding: 10px
}

.p-t-10 {
    padding-top: 10px
}

.p-r-10 {
    padding-right: 10px
}

.p-l-10 {
    padding-left: 10px
}

.p-b-10 {
    padding-bottom: 10px
}

.p-w-10 {
    padding: 0 20px
}

.p-h-20 {
    padding: 20px 0
}

.p-t-20 {
    padding-top: 20px
}

.p-r-20 {
    padding-right: 20px
}

.p-l-20 {
    padding-left: 20px
}

.p-b-20 {
    padding-bottom: 20px
}

.p-w-20 {
    padding: 0 20px
}

.p-h-30 {
    padding: 30px 0
}

.p-t-30 {
    padding-top: 30px
}

.p-r-30 {
    padding-right: 30px
}

.p-l-30 {
    padding-left: 30px
}

.p-b-30 {
    padding-bottom: 30px
}

.p-w-30 {
    padding: 0 30px
}

.p-h-50 {
    padding: 50px 0
}

.p-t-50 {
    padding-top: 50px
}

.p-r-50 {
    padding-right: 50px
}

.p-l-50 {
    padding-left: 50px
}

.p-b-50 {
    padding-bottom: 50px
}

.p-w-50 {
    padding: 0 50px
}

.p-t-60 {
    padding-top: 60px
}

.p-r-60 {
    padding-right: 60px
}

.p-l-60 {
    padding-left: 60px
}

.p-b-60 {
    padding-bottom: 60px
}

.p-w-60 {
    padding: 0 60px
}

.p-h-60 {
    padding: 60px 0
}

.p-h-100 {
    padding: 100px 0
}

.p-t-100 {
    padding-top: 100px
}

.p-r-100 {
    padding-right: 100px
}

.p-l-100 {
    padding-left: 100px
}

.p-b-100 {
    padding-bottom: 100px
}

.p-w-100 {
    padding: 0 100px
}

.m-25 {
    margin: 20px
}

.m-20 {
    margin: 20px
}

.m-10 {
    margin: 10px
}

.m-t-10 {
    margin-top: 10px
}

.m-r-10 {
    margin-right: 10px
}

.m-l-10 {
    margin-left: 10px
}

.m-b-10 {
    margin-bottom: 10px
}

.m-t-20 {
    margin-top: 20px
}

.m-r-20 {
    margin-right: 20px
}

.m-l-20 {
    margin-left: 20px
}

.m-b-20 {
    margin-bottom: 20px
}

.m-t-50 {
    margin-top: 50px
}

.m-r-50 {
    margin-right: 50px
}

.m-l-50 {
    margin-left: 50px
}

.m-b-50 {
    margin-bottom: 50px
}

.m-w-10 {
    margin: 0 10px
}

.m-h-10 {
    margin: 10px 0
}

.m-w-20 {
    margin: 0 20px
}

.m-h-20 {
    margin: 20px 0
}

.mm-w-10 {
    margin: 0 -10px
}

.mm-h-10 {
    margin: -10px 0
}

.mm-w-20 {
    margin: 0 -20px
}

.mm-h-20 {
    margin: -20px 0
}

.mm-w-25 {
    margin: 0 -25px
}

.mm-h-25 {
    margin: -25px 0
}

.mm-w-30 {
    margin: 0 -30px
}

.mm-h-30 {
    margin: -30px 0
}

.mm-10 {
    margin: -10px
}

.mm-20 {
    margin: -20px
}

.mm-25 {
    margin: -25px
}

.topic-box {
    padding: 50px 0
}

.block {
    display: block !important
}

.inline {
    display: inline !important
}

.inline-block {
    display: inline-block
}

.none {
    display: none 
}

.d-none {
    display: none
}

.table {
    display: table
}

.table>* {
    display: table-row
}

.table>*>* {
    display: table-cell;
    vertical-align: top
}

@media screen and (max-width:1600px) {
    .hide-lg {
        display: none !important
    }
}

@media screen and (max-width:1200px) {
    .hide-md {
        display: none !important
    }
}

@media screen and (max-width:992px) {
    .hide-sm {
        display: none !important
    }
}

@media screen and (max-width:768px) {
    .hide-xs {
        display: none !important
    }
}

@media screen and (max-width:480px) {
    .hide-xxs {
        display: none !important
    }
}

@media screen and (min-width:1601px) {
    .show-lg {
        display: none !important
    }
}

@media screen and (min-width:1201px) {
    .show-md {
        display: none !important
    }
}

@media screen and (min-width:993px) {
    .show-sm {
        display: none !important
    }
}

@media screen and (min-width:769px) {
    .show-xs {
        display: none !important
    }
}

@media screen and (min-width:481px) {
    .show-xxs {
        display: none !important
    }
}

ul,
ol {
    padding-left: 0
}

li {
    list-style: none
}

::selection {
    background: #fae7e9
}

.one-row {
    display: table;
    width: 100%
}

.one-row>* {
    display: table-cell;
    vertical-align: middle
}

.one-row>gap {
    width: 6px
}

.some-line {
    text-align: center
}

.some-line>* {
    text-align: center;
    margin: auto
}

.some-row {
    display: table;
    width: 100%
}

.some-row>* {
    display: table-row
}

.some-row>*>* {
    display: table-cell;
    vertical-align: top
}

.some-row>*>gap {
    width: 6px
}

.two-cols {
    margin: -12px
}

.two-cols>div {
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 12px
}

.two-cols>div>div {
    display: table-cell;
    vertical-align: middle
}

@media screen and (max-width:768px) {
    .two-cols>div>div {
        display: block
    }
}

.float-row {
    display: flex;
    flex-wrap: wrap
}

.float-row[data-cols="2"]>div {
    width: 50%
}

.float-row[data-cols="3"]>div {
    width: 33.3%
}

.float-row[data-cols="4"]>div {
    width: 25%
}

.float-row[data-cols="5"]>div {
    width: 20%
}

.float-row[data-cols="6"]>div {
    width: 16.6%
}

.float-row[data-cols="7"]>div {
    width: 14.2%
}

.float-row[data-cols="8"]>div {
    width: 12.5%
}

.float-row[data-cols="9"]>div {
    width: 11.1%
}

.float-row[data-cols="2"] .float-item {
    width: 50%
}

.float-row[data-cols="3"] .float-item {
    width: 33.3%
}

.float-row[data-cols="4"] .float-item {
    width: 25%
}

.float-row[data-cols="5"] .float-item {
    width: 20%
}

.float-row[data-cols="6"] .float-item {
    width: 16.6%
}

.float-row[data-cols="7"] .float-item {
    width: 14.2%
}

.float-row[data-cols="8"] .float-item {
    width: 12.5%
}

.float-row[data-cols="9"] .float-item {
    width: 11.1%
}

.b-l-none {
    border-left: none !important
}

.b-r-none {
    border-right: none !important
}

.b-t-none {
    border-top: none !important
}

.b-b-none {
    border-bottom: none !important
}

.border-none {
    border: none !important
}

.row-m10 {
    margin: 0 -10px
}

.row-m-10 {
    margin: 0 -10px
}

.row-m-10>div {
    padding-right: 10px;
    padding-left: 10px
}

.row-m-15 {
    margin: 0 -15px
}

.row-m-15>div {
    padding-right: 15px;
    padding-left: 15px
}

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

.col-p10 {
    padding-right: 10px;
    padding-left: 10px
}

.col-1 {
    width: 16.66%;
    float: left
}

.col-2 {
    width: 33.33%;
    float: left
}

.col-3 {
    width: 50%;
    float: left
}

.col-4 {
    width: 66.664%;
    float: left
}

.col-5 {
    width: 83.33%;
    float: left
}

.col-6 {
    width: 100%;
    float: left
}

.col-7 {
    width: 20%;
    float: left
}

.col-8 {
    width: 25%;
    float: left
}

.col-9 {
    width: 33.3%;
    float: left
}

.col-10 {
    width: 12.5%;
    float: left
}

.col-11 {
    width: 14.285%;
    float: left
}

.grid-container * {
    box-sizing: border-box;
    max-width: 1200px
}

.row:before,
.row:after,
.row-m10:before,
.row-m10:after {
    content: "";
    display: table;
    clear: both
}

@media all and (max-width:1200px) {
    .col-8 {
        width: 50%
    }

    .col-10 {
        width: 16.6%
    }

    .col-11 {
        width: 16.6%;
        float: left
    }
}

@media all and (max-width:1024px) {

    .col-10,
    .col-11 {
        width: 20%
    }
}

@media all and (max-width:800px) {
    .col-1 {
        width: 33.33%
    }

    .col-2 {
        width: 50%
    }

    .col-3 {
        width: 83.33%
    }

    .col-4 {
        width: 100%
    }

    .col-5 {
        width: 100%
    }

    .col-6 {
        width: 100%
    }

    .col-7 {
        width: 50%
    }

    .col-8 {
        width: 50%
    }

    .col-9 {
        width: 50%
    }

    .col-10 {
        width: 25%
    }

    .row .col-9:last-of-type {
        width: 100%
    }

    .row .col-5~.col-1 {
        width: 100%
    }
}

@media all and (max-width:650px) {
    .col-1 {
        width: 50%
    }

    .col-2 {
        width: 100%
    }

    .col-3 {
        width: 100%
    }

    .col-4 {
        width: 100%
    }

    .col-5 {
        width: 100%
    }

    .col-6 {
        width: 100%
    }

    .col-7 {
        width: 100%
    }

    .col-8 {
        width: 100%
    }

    .col-9 {
        width: 100%
    }
}

.flex-row {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-row[data-cols="2"]>div {
    width: 50%
}

.flex-row[data-cols="3"]>div {
    width: 33.3%
}

.flex-row[data-cols="4"]>div {
    width: 25%
}

.flex-row[data-cols="5"]>div {
    width: 20%
}

.flex-row[data-cols="6"]>div {
    width: 16.6%
}

.flex-row[data-cols="7"]>div {
    width: 14.2%
}

.flex-row[data-cols="8"]>div {
    width: 12.5%
}

.flex-row[data-cols="9"]>div {
    width: 11.1%
}

.flex-row[data-cols="2"] .flex-item {
    width: 50%
}

.flex-row[data-cols="3"] .flex-item {
    width: 33.3%
}

.flex-row[data-cols="4"] .flex-item {
    width: 25%
}

.flex-row[data-cols="5"] .flex-item {
    width: 20%
}

.flex-row[data-cols="6"] .flex-item {
    width: 16.6%
}

.flex-row[data-cols="7"] .flex-item {
    width: 14.2%
}

.flex-row[data-cols="8"] .flex-item {
    width: 12.5%
}

.flex-row[data-cols="9"] .flex-item {
    width: 11.1%
}

.red {
    color: #ef2a3a
}

.green {
    color: #008000
}

.blue {
    color: #66afe9
}

.orange {
    color: #fa8f04
}

.yellow {
    color: #ffd46c
}

.done {
    color: #008000
}

.fail {
    color: #ef2a3a
}

.ing {
    color: #fa8f04
}

red {
    color: #ef2a3a
}

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

.grey-bg {
    background-color: #f7f8fa
}

.status-dot::before {
    content: "●";
    padding-right: 4px
}

.done-dot::before {
    content: "●";
    padding-right: 4px
}

.done-dot::before {
    color: #008000
}

.fail-dot::before {
    content: "●";
    padding-right: 4px
}

.fail-dot::before {
    color: #ef2a3a
}

.ing-dot::before {
    content: "●";
    padding-right: 4px
}

.ing-dot::before {
    color: #fa8f04
}

.clear {
    clear: both !important;
    display: block
}

.window-height {
    min-height: 300px
}

img {
    border: none;
    max-width: 100%
}

@media screen and (max-width:1200px) {
    .w-lg-100 {
        width: 100%
    }

    .w-lg-80 {
        width: 80%
    }

    .w-lg-60 {
        width: 60%
    }

    .w-lg-50 {
        width: 50%
    }
}

@media screen and (max-width:992px) {
    .w-md-100 {
        width: 100%
    }

    .w-md-80 {
        width: 80%
    }

    .w-md-60 {
        width: 60%
    }
}

@media screen and (max-width:768px) {
    .w-sm-100 {
        width: 100%
    }

    .w-sm-80 {
        width: 80%
    }

    .w-sm-60 {
        width: 60%
    }
}

@media screen and (max-width:576px) {
    .w-xs-100 {
        width: 100%
    }

    .w-xs-80 {
        width: 80%
    }

    .w-xs-60 {
        width: 60%
    }
}

.unclick {
    pointer-events: none
}

.middle {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.box-shadow {
    -moz-box-shadow: 0 0 20px #ddd;
    -webkit-box-shadow: 0 0 20px #ddd;
    box-shadow: 0 0 20px #ddd
}

.icon001 {
    position: relative;
    margin: auto;
    width: 78px;
    height: 72px
}

.icon001 .temp {
    position: absolute;
    margin: auto;
    z-index: 3
}

.icon001 img {
    position: absolute;
    margin: auto;
    z-index: 3;
    top: 13px;
    right: 26px
}

.icon001 i {
    position: absolute;
    margin: auto;
    z-index: 3;
    color: #fff;
    font-size: 20px;
    top: 10px;
    right: 24px;
    transform: matrix3d(1, -0.4, 0, .005, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
}

.icon001::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 35px;
    height: 51px;
    background: url(../image/bg-gray.png);
    z-index: 2
}

.icon001::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 78px;
    height: 54px;
    background: url(../image/shadow.png);
    z-index: 1
}

.card-topline1 {
    z-index: 10;
    position: absolute;
    width: 0;
    height: 5px;
    left: 50%;
    transition: width .1s;
    -webkit-transition: all .5s ease-out
}

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

.tit1 h1 {
    font-size: 36px;
    color: #333;
    text-align: center;
    margin-bottom: 0
}

.tit1 h2 {
    font-size: 36px;
    color: #333;
    text-align: center;
    margin-bottom: 0
}

.tit1 p {
    font-size: 16px;
    color: #999;
    text-align: center;
    margin-top: 10px
}

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

    .tit1 h1,
    .tit1 h2 {
        font-size: 24px
    }
}

.tit2 {
    position: relative;
    height: 44px;
    padding-left: 20px
}

.tit2::before {
    content: "";
    height: 30px;
    width: 5px;
    background: #ef2a3a;
    display: block;
    position: absolute;
    top: 7px;
    left: 0
}

.tit2 b {
    color: #333;
    font-size: 30px;
    font-weight: normal;
    line-height: 44px
}

.tit2 small {
    color: #999;
    font-size: 16px;
    margin-left: 10px
}

@media screen and (max-width:480px) {
    .tit2 small {
        display: none
    }
}

.tit3 {
    position: relative;
    padding: 0 266px;
    display: inline-block;
    color: #050c15;
    font-size: 30px;
    margin: auto;
    white-space: nowrap
}

.tit3 .temp {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px
}

.tit3::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px;
    left: 0;
    background: url(../image/tit3-01.png) no-repeat center
}

.tit3::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px;
    right: 0;
    background: url(../image/tit3-02.png) no-repeat center
}

@media screen and (max-width:992px) {
    .tit3 {
        padding: 0 256px;
        font-size: 26px
    }
}

@media screen and (max-width:768px) {
    .tit3 {
        padding: 0 100px
    }

    .tit3 .temp {
        content: "";
        width: 84px;
        height: 16px
    }

    .tit3::before {
        content: "";
        width: 84px;
        height: 16px;
        left: 0;
        background: url(../image/tit3-03.png) no-repeat center
    }

    .tit3::after {
        content: "";
        width: 84px;
        height: 16px;
        right: 0;
        background: url(../image/tit3-04.png) no-repeat center
    }
}

@media screen and (max-width:480px) {
    .tit3 {
        padding: 0 86px;
        font-size: 22px
    }

    .tit3 .temp {
        width: 68px
    }

    .tit3::before {
        width: 68px;
        left: 0;
        background: url(../image/tit3-03.png) no-repeat center;
        background-size: 100%
    }

    .tit3::after {
        width: 68px;
        right: 0;
        background: url(../image/tit3-04.png) no-repeat center;
        background-size: 100%
    }
}

@media screen and (max-width:404px) {
    .tit3 {
        padding: 0 32px
    }

    .tit3 .temp {
        width: 20px;
        height: 18px
    }

    .tit3::before {
        width: 20px;
        height: 18px;
        left: 0;
        background: url(../image/tit3-05.png) no-repeat center
    }

    .tit3::after {
        width: 20px;
        height: 18px;
        right: 0;
        background: url(../image/tit3-06.png) no-repeat center
    }
}

.tit4 {
    position: relative;
    padding: 0 266px;
    display: inline-block;
    color: #fff;
    font-size: 72px;
    margin: auto;
    white-space: nowrap
}

.tit4 .temp {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px
}

.tit4::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px;
    left: 0;
    background: url(../image/tit4-01.png) no-repeat center
}

.tit4::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px;
    right: 0;
    background: url(../image/tit4-02.png) no-repeat center
}

@media screen and (max-width:992px) {
    .tit4 {
        padding: 0 256px;
        font-size: 50px
    }
}

@media screen and (max-width:860px) {
    .tit4 {
        padding: 0 100px
    }

    .tit4 .temp {
        content: "";
        width: 84px;
        height: 16px
    }

    .tit4::before {
        content: "";
        width: 84px;
        height: 16px;
        left: 0;
        background: url(../image/tit4-03.png) no-repeat center
    }

    .tit4::after {
        content: "";
        width: 84px;
        height: 16px;
        right: 0;
        background: url(../image/tit4-04.png) no-repeat center
    }
}

@media screen and (max-width:560px) {
    .tit4 {
        padding: 0 86px;
        font-size: 30px
    }

    .tit4 .temp {
        width: 68px
    }

    .tit4::before {
        width: 68px;
        left: 0;
        background: url(../image/tit4-03.png) no-repeat center;
        background-size: 100%
    }

    .tit4::after {
        width: 68px;
        right: 0;
        background: url(../image/tit4-04.png) no-repeat center;
        background-size: 100%
    }
}

@media screen and (max-width:404px) {
    .tit4 {
        padding: 0 32px
    }

    .tit4 .temp {
        width: 20px;
        height: 18px
    }

    .tit4::before {
        width: 20px;
        height: 18px;
        left: 0;
        background: url(../image/tit4-05.png) no-repeat center
    }

    .tit4::after {
        width: 20px;
        height: 18px;
        right: 0;
        background: url(../image/tit4-06.png) no-repeat center
    }
}

.topic-title {
    text-align: center;
    font-weight: bold;
    font-size: 36px
}

.tab,
.tab-nav {
    display: table;
    margin: auto;
    position: relative
}

.tab>*,
.tab-nav>* {
    display: table-cell;
    float: left;
    vertical-align: bottom
}

.tab>*:not(last-child),
.tab-nav>*:not(last-child) {
    margin-right: 50px
}

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

    .tab>*:not(last-child),
    .tab-nav>*:not(last-child) {
        margin-right: 20px
    }
}

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

    .tab>*:not(last-child),
    .tab-nav>*:not(last-child) {
        margin-right: 10px
    }
}

.tab gap,
.tab-nav gap {
    width: 60px
}

.tab gap:last-child,
.tab-nav gap:last-child {
    width: 0;
    max-width: 0
}

.tab>*,
.tab-nav>* {
    border-bottom: transparent solid 3px
}

.tab>*.nav-current .item,
.tab-nav>*.nav-current .item {
    border-bottom-color: #ef2a3a
}

.tab .item,
.tab-nav .item {
    display: block;
    width: max-content;
    margin: auto;
    white-space: nowrap;
    line-height: 40px;
    font-size: 18px;
    color: #333;
    border-bottom: transparent solid 3px
}

.tab .item:hover,
.tab-nav .item:hover {
    cursor: pointer;
    color: #ef2a3a
}

.tab-wrap {
    background: #fff;
    border-bottom: 1px solid #ddd
}

.tab-wrap .item {
    line-height: 60px
}

.tab2 {
    width: 100%;
    display: table
}

.tab2 li {
    display: table-cell !important
}

.tab2 li:hover {
    cursor: pointer
}

.tab-wrap2 {
    border-bottom: #bdc5d2 solid 1px;
    background: #f1f4f9
}

.tab-wrap2 .item {
    line-height: 60px
}

.advantage-wrap {
    padding: 45px 10px;
    background: #fff;
    -webkit-box-shadow: 0 0 40px #d2dce5;
    box-shadow: 0 0 40px #d2dce5
}

@media screen and (max-width:768px) {
    .advantage-wrap {
        padding: 0
    }
}

.advantage-wrap .advantage-table .item {
    width: 200px;
    margin: auto;
    text-align: center
}

.advantage-wrap .advantage-table .item p {
    text-align: center;
    color: #999;
    line-height: 24px
}

.advantage-wrap .advantage-table>* {
    vertical-align: top
}

@media screen and (max-width:768px) {
    .advantage-wrap .advantage-table>* p {
        display: none
    }

    .advantage-wrap .advantage-table>* .item {
        display: block;
        width: 100%;
        padding: 20px 0 10px
    }

    .advantage-wrap .advantage-table>* .item img {
        max-width: 60px
    }
}

.advantage-wrap .advantage-table gap {
    width: 1px;
    min-width: 1px;
    background: #dee6ee
}

.c2-advantage-wrap .advantage-table {
    position: relative;
    padding: 20px 20px 20px 80px
}

.c2-advantage-wrap .advantage-table:hover {
    cursor: pointer;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-box-shadow: 0 0 40px rgba(51, 51, 51, 0.1);
    box-shadow: 0 0 40px rgba(51, 51, 51, 0.1);
    transition: all linear 1s
}

.c2-advantage-wrap .advantage-table:hover .svg-001_001 .st3 {
    animation: svg_circle_r64 4.5s
}

.c2-advantage-wrap .advantage-table:hover .svg-001_001 .st2 {
    animation: svg_001_001_2 7s
}

.c2-advantage-wrap .advantage-table:hover .svg-001_003 .st2,
.c2-advantage-wrap .advantage-table:hover .svg-001_002 .st2 {
    animation: svg_001_001_2 2s
}

.c2-advantage-wrap .advantage-table:hover .svg-001_004 .st2,
.c2-advantage-wrap .advantage-table:hover .svg-001_005 .st2 {
    animation: svg_001_001_4 2s
}

.c2-advantage-wrap .advantage-table:hover .svg-001_006 .st1,
.c2-advantage-wrap .advantage-table:hover .svg-001_006 .st2 {
    animation: svg_001_001_6 3s
}

.c2-advantage-wrap .advantage-icon {
    position: absolute;
    left: 10px
}

.c2-advantage-wrap .advantage-icon img {
    width: 64px
}

.c2-advantage-wrap .advantage-text {
    padding-left: 15px;
    text-align: left
}

.c2-advantage-wrap .advantage-text label {
    font-size: 24px;
    margin-bottom: 10px
}

.c2-advantage-wrap .advantage-text p {
    font-size: 14px;
    line-height: 24px;
    max-width: 280px
}

@media screen and (max-width:768px) {
    .c2-advantage-wrap .advantage-text {
        padding-left: 15px;
        text-align: left
    }

    .c2-advantage-wrap .advantage-text label {
        font-size: 18px;
        margin-bottom: 10px
    }

    .c2-advantage-wrap .advantage-text p {
        font-size: 12px;
        line-height: 22px
    }

    .c2-advantage-wrap .advantage-table {
        padding: 10px;
        padding-left: 80px
    }
}

.steps {
    position: relative;
    width: 100%;
    height: 65px
}

.steps::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 20px;
    border-bottom: dotted 1px #ef2a3a;
    height: 0;
    width: 100%
}

.steps .steps-table {
    position: absolute;
    z-index: 2;
    display: table;
    width: 100%;
    max-width: 460px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0
}

.steps .steps-table>* {
    display: table-cell;
    vertical-align: top;
    text-align: center
}

.steps .steps-table>* i {
    display: inline-block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: solid 1px #ef2a3a;
    line-height: 38px;
    font-style: normal;
    background: #fff;
    color: #ef2a3a
}

.steps .steps-table>* p {
    text-align: center;
    margin-bottom: 0
}

.tech-bg01 {
    background: url(../image/tech-01.png) right no-repeat, #f4f6f8 !important
}

.tech-bg02 {
    background: url(../image/tech-02.png) right no-repeat, #f4f6f8 !important
}

.tech-bg03 {
    background: url(../image/tech-03.png) right no-repeat, #f4f6f8 !important
}

.tech-bg04 {
    background: url(../image/tech-04.png) top right no-repeat, #fff !important;
    padding-right: 120px !important
}

@media screen and (max-width:768px) {
    .tech-bg04 {
        padding-right: 26px !important
    }
}

.tech-bg05 {
    background: url(../image/tech-05.png) top right no-repeat, #fff !important
}

.tech-bg06 {
    background: url(../image/tech-06.png) center no-repeat;
    background-size: 100% 100%
}

.tech-bg07 {
    background: url(../image/tech-07.png) center no-repeat;
    background-size: 100% 100%
}

.tech-bg08 {
    background: url(../image/tech-08.png) center no-repeat;
    background-size: 100% 100%
}

.tech-bg09 {
    background: url(../image/tech-09.jpg) center no-repeat;
    background-size: 100% 100%
}

.table-style {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    color: #333
}

.table-style th {
    background: #e1e4e5;
    padding: 10px 0;
    border: 1px solid #ddd
}

.table-style tr:hover td {
    background: #f8f8f8
}

.table-style tr td {
    border: 1px solid #ddd;
    padding: 10px 0
}

.user-only {
    display: none !important
}

.non-user-only {
    display: none !important
}

.admin-only {
    display: none !important
}

.non-admin-only {
    display: none !important
}

.irs {
    height: 50px
}

.irs .irs-line {
    height: 8px
}

.irs .irs-line:hover {
    cursor: pointer
}

.irs .irs-line::before {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: #dcdcdc;
    margin-top: 2px
}

.irs .irs-line>* {
    display: none !important
}

.irs .irs-grid {
    bottom: auto;
    top: 27px;
    height: 28px
}

.irs .irs-grid .irs-grid-pol {
    height: 4px;
    width: 2px;
    background: #bfbfbf
}

.irs .irs-grid .irs-grid-text {
    color: #333;
    font-size: 14px
}

.irs .irs-bar {
    height: 8px;
    background: #ef2a3a
}

.irs .irs-bar-edge {
    height: 8px;
    background: #ef2a3a;
    width: 11px
}

.irs .irs-slider {
    height: 22px;
    width: 22px;
    top: 18px;
    background: url(../image/irs-dot.png) no-repeat center
}

.irs .irs-slider:hover {
    background-position-y: 0
}

.irs .irs-slider.state_hover {
    background-position-y: 0
}

.irs .irs-from,
.irs .irs-to,
.irs .irs-single {
    background: #666;
    top: -10px;
    line-height: 20px
}

.irs .irs-from::after,
.irs .irs-to::after,
.irs .irs-single::after {
    border-top-color: #666
}

.help-block {
    display: none;
    background: url(../image/003.png) center no-repeat, #dde3eb !important;
    margin-bottom: 0 !important;
    padding-bottom: 20px
}

.help-block .tit1 {
    padding-top: 1px
}

.help-block .help-table {
    margin: 0 -20px
}

.help-block .help-table .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.help-block .help-table .one-row>div {
    background: #fff;
    padding: 20px;
    width: 25%;
    max-width: 25%
}

@media screen and (max-width:768px) {
    .help-block .help-table {
        margin: 0
    }

    .help-block .help-table .one-row {
        display: block
    }

    .help-block .help-table .one-row>div {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px
    }
}

.c1-service-wrap .service-table {
    background-color: #fff;
    padding: 30px 30px 30px 100px
}

.c1-service-wrap .service-table:hover {
    cursor: pointer;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
    transition: all .5s
}

.c1-service-wrap label {
    font-size: 20px
}

@media screen and (min-width:1600px) {
    .c1-service-wrap label {
        font-size: 24px
    }
}

@media screen and (max-width:768px) {
    .c1-service-wrap>div {
        margin: 0
    }

    .c1-service-wrap>div>div {
        padding: 0 10px
    }

    .c1-service-wrap .service-table {
        padding: 15px
    }

    .c1-service-wrap .service-table img {
        max-width: 30px
    }

    .c1-service-wrap .float-row>div {
        width: 100%
    }

    .c1-service-wrap label {
        font-size: 16px
    }
}

.c1-customer-wrap .customer-item {
    width: 20%;
    padding: 10px
}

.c1-customer-wrap .customer-img img {
    width: 100%
}

@media screen and (max-width:1200px) {
    .c1-customer-wrap#stack-pic {
        width: 100%
    }
}

@media screen and (max-width:768px) {
    .c1-customer-wrap#stack-pic .swiper-slide img {
        width: 100%
    }

    .c1-customer-wrap .customer-item {
        width: 30%;
        padding: 0;
        margin-right: 20px
    }
}

.recommend-block {
    background: url(../image/012.png) center no-repeat, #dde3eb !important;
    margin-bottom: 0 !important;
    padding: 50px
}

.recommend-block .item {
    position: relative;
    line-height: 50px;
    padding: 0 20px;
    display: inline-block
}

.recommend-block .item:hover {
    -webkit-box-shadow: 0 0 10px #c1c8cf;
    box-shadow: 0 0 10px #c1c8cf
}

.recommend-block .item:hover .bg {
    opacity: 1
}

.recommend-block .item .txt {
    position: relative;
    margin: auto;
    z-index: 2;
    font-size: 16px;
    color: #333
}

.recommend-block .item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .7;
    z-index: 1
}

section.topology {
    text-align: center
}

section.topology img {
    margin: auto;
    width: 100%;
    max-width: 650px;
    scale: 1;
    transition: scale .5s
}

section.topology img:hover {
    scale: 1.05;
    transition: all .5s
}

section.topology .topo-wrap {
    background: #fff
}

section.topology .topo-wrap .topo-nav {
    margin: -10px -10px 10px
}

section.topology .topo-wrap .topo-nav .topo-nav-table {
    display: table;
    border-collapse: separate;
    border-spacing: 10px
}

section.topology .topo-wrap .topo-nav .topo-nav-table>div {
    display: table-cell
}

section.topology .topo-wrap .topo-nav .topo-nav-table>div .item {
    position: relative;
    background: #f1f1f1;
    padding: 10px 16px;
    font-size: 16px
}

section.topology .topo-wrap .topo-nav .topo-nav-table>div .item:hover {
    cursor: pointer
}

section.topology .topo-wrap .topo-nav .topo-nav-table>div .item.current {
    background: #ef2a3a;
    color: #fff
}

section.topology .topo-wrap .topo-nav .topo-nav-table>div .item.current::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    bottom: -16px;
    left: 0;
    right: 0;
    margin: auto;
    border: transparent solid 8px;
    border-top-color: #ef2a3a
}

section.topology .topo-wrap .topo-display {
    border: 1px solid #ddd;
    padding: 20px 0
}

section.topology .topo-wrap .topo-display table {
    width: 100%
}

section.topology .topo-wrap .topo-display table td {
    text-align: left;
    vertical-align: top
}

section.topology .topo-wrap .topo-display table td h2 {
    margin-top: 0;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ddd
}

section.topology .topo-wrap .topo-display table td h3 {
    margin: 24px 0 10px;
    font-size: 18px
}

section.topology .topo-wrap .topo-display table td h4 {
    font-weight: bold;
    margin-bottom: 0
}

section.topology .topo-wrap .topo-display table td ul,
section.topology .topo-wrap .topo-display table td p {
    margin: 0;
    color: #666
}

section.topology .topo-wrap .topo-display table td figure {
    text-align: center
}

section.topology .topo-wrap .topo-display table td:first-child {
    width: 68%
}

section.topology .topo-wrap .topo-display table td:last-child {
    border-left: 1px #ddd dashed;
    padding: 0 40px
}

@media screen and (max-width:992px) {
    section.topology .topo-wrap .topo-display {
        padding: 20px
    }

    section.topology .topo-wrap .topo-display table td {
        display: block
    }

    section.topology .topo-wrap .topo-display table td figure {
        margin-left: 0;
        margin-right: 0
    }

    section.topology .topo-wrap .topo-display table td figure img {
        max-height: unset
    }

    section.topology .topo-wrap .topo-display table td:first-child {
        width: 100%
    }

    section.topology .topo-wrap .topo-display table td:last-child {
        border-left: none;
        border-top: 1px #ddd dashed;
        padding: 0
    }
}

@media screen and (max-width:768px) {
    section.topology .topo-wrap .topo-nav .topo-nav-table>div .item {
        font-size: 14px;
        padding: 6px 12px
    }
}

section.server-info .part1 .tab {
    margin: 0;
    border-collapse: collapse
}

section.server-info .part1 .tab>div {
    border: 1px solid #ddd;
    margin-right: 0 !important
}

section.server-info .part1 .tab>div .item {
    padding: 4px 30px;
    border-bottom: none;
    font-size: 16px;
    background: #f4f6f8;
    position: relative
}

section.server-info .part1 .tab>div .item.current {
    background: #fff
}

section.server-info .part1 .tab>div .item.current::before {
    content: "";
    width: 100%;
    height: 2px;
    background: #ef2a3a;
    display: block;
    position: absolute;
    top: -1px;
    left: 0
}

section.server-info .part1 .tab>*:not(:last-child) {
    border-right: none
}

@media screen and (max-width:800px) {
    section.server-info .part1 .tab>div .item {
        font-size: 12px;
        padding: 5px
    }
}

section.server-info .part2 {
    padding-top: 20px;
    padding-bottom: 40px
}

section.server-info .part2 .temp {
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 25px 35px
}

section.server-info .part2 .temp b {
    font-size: 24px;
    color: #333
}

section.server-info .part2 .temp p {
    margin: 10px 0
}

section.server-info .part2 .temp red {
    color: #ef2a3a
}

section.server-info .part2 .info-header {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 25px 35px;
    border: none;
    box-shadow: 0 0 10px #dcdcdc;
    padding-right: 383px;
    overflow: hidden
}

section.server-info .part2 .info-header b {
    font-size: 24px;
    color: #333
}

section.server-info .part2 .info-header p {
    margin: 10px 0
}

section.server-info .part2 .info-header red {
    color: #ef2a3a
}

section.server-info .part2 .info-header img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 383px;
    min-height: 100%
}

section.server-info .part2 .info-header red {
    font-size: 24px
}

section.server-info .part2 .info-header .price-info {
    font-size: 16px;
    border-top: 1px dashed #ddd;
    letter-spacing: 1px;
    line-height: 40px;
    color: #666;
    margin-bottom: 0;
    padding-top: 10px
}

section.server-info .part2 .info-header .one-row>div:first-child {
    padding-right: 20px
}

@media screen and (max-width:768px) {
    section.server-info .part2 .info-header .one-row {
        display: block
    }

    section.server-info .part2 .info-header .one-row>div {
        display: block;
        padding-bottom: 20px
    }

    section.server-info .part2 .info-header .one-row>div:first-child {
        padding-right: 0
    }

    section.server-info .part2 .info-header .one-row>div img {
        max-width: 100%
    }
}

@media screen and (max-width:800px) {
    section.server-info .part2 .info-header {
        padding: 15px 20px 0
    }

    section.server-info .part2 .info-header img {
        display: none
    }

    section.server-info .part2 .info-header red {
        font-size: 18px
    }
}

section.server-info .info-item {
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 25px 35px;
    position: relative;
    padding-top: 60px
}

section.server-info .info-item b {
    font-size: 24px;
    color: #333
}

section.server-info .info-item p {
    margin: 10px 0
}

section.server-info .info-item red {
    color: #ef2a3a
}

section.server-info .info-item red {
    font-size: 20px
}

section.server-info .info-item b {
    display: block;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px
}

section.server-info .info-item .tit {
    position: absolute;
    background: #f9f9f9;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 15px 40px;
    font-weight: bold;
    color: #333;
    font-size: 18px
}

section.server-info .info-item .tit.hot::after {
    position: absolute;
    content: "";
    height: 43px;
    width: 54px;
    background: url(../image/hotlabel.png) no-repeat center;
    left: 0;
    top: 0
}

section.server-info .info-item .server-info-table {
    margin: 10px 0;
    color: #999;
    line-height: 30px
}

section.server-info .info-item .server-info-table span {
    color: #333
}

section.server-info .info-item .server-info-table>div>div {
    width: 25%;
    white-space: nowrap
}

@media screen and (max-width:768px) {
    section.server-info .info-item .server-info-table>div>div {
        display: block
    }
}

section.server-info .info-item .price-info {
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    min-height: 36px
}

section.server-info .info-item .price-info span {
    margin-right: 50px
}

section.document {
    padding-bottom: 45px;
    padding-top: 10px;
    width: 100%
}

section.document .tit1 {
    padding-top: 0
}

section.document .tit1 h1 {
    color: #333
}

section.document .tit1 h1 {
    text-align: left;
    font-size: 24px
}

section.document .document-table-wrap {
    border-collapse: separate;
    border-spacing: 10px
}

section.document .document-table-wrap .item {
    position: relative;
    border: #ddd 1px solid;
    overflow: hidden;
    background-color: #fff
}

section.document .document-table-wrap .item:hover {
    box-shadow: 0 0 20px #dedede
}

section.document .document-table-wrap .help-text {
    z-index: 2
}

section.document .document-table-wrap .help-text a {
    z-index: 2
}

section.document .document-table-wrap .item::before {
    content: "";
    position: absolute;
    background: url(../image/help-cloud.png) center no-repeat;
    right: -3px;
    bottom: -3px;
    width: 95px;
    height: 71px
}

@media screen and (min-width:1200px) {
    section.document .document-table-wrap {
        border-spacing: 0
    }

    section.document .document-table-wrap .one-row {
        display: table-cell;
        width: 50%
    }

    section.document .document-table-wrap .item {
        display: inline-block;
        width: 48%;
        margin-right: 2%;
        float: left;
        padding: 16px 20px;
        overflow: hidden
    }

    section.document .document-table-wrap .item .help-text {
        height: 45px;
        align-items: center;
        display: -webkit-flex;
        justify-content: center
    }
}

@media screen and (max-width:1200px) {
    section.document .document-table-wrap .some-row>* {
        display: table-row
    }

    section.document .document-table-wrap .item {
        display: table-cell;
        padding: 10px 15px;
        width: 50%
    }

    section.document .document-table-wrap .item .help-text {
        height: 45px;
        align-items: center;
        display: -webkit-flex;
        justify-content: center
    }
}

@media screen and (max-width:650px) {
    section.document .document-table-wrap {
        border-spacing: 0
    }

    section.document .document-table-wrap .item {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 20px 20px
    }
}

section.document .document-table-wrap .help-text::after {
    position: relative;
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    right: -2px;
    background: url("../image/arrow2.png") no-repeat center
}

section.document .document-table-wrap .help-text:hover::after {
    position: relative;
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    right: -2px;
    background: url("../image/arrow.png") no-repeat center
}

.list li {
    display: inline-block
}

.list li a {
    display: inline-block
}

.list li:not(:last-child)::after {
    content: "|";
    display: inline-block;
    width: 24px;
    text-align: center
}

@media screen and (max-width:768px) {
    .list li:not(:last-child)::after {
        width: 16px
    }
}

@media screen and (max-width:768px) {
    .list li::after {
        width: 16px
    }
}

.circle-list li {
    color: #666;
    font-size: 16px;
    position: relative;
    padding-left: 10px
}

.circle-list li::before {
    position: absolute;
    margin: auto;
    left: 0;
    top: 8px;
    display: block;
    content: "";
    height: 6px;
    width: 6px;
    background: url(../image/dot.png) center no-repeat
}

.partner-style {
    padding: 50px 0
}

.partner-style .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.partner-style .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .partner-style .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .partner-style .partner-table img {
        width: 60px
    }
}

.hl-catalog-nav,
.catalog-nav {
    padding-bottom: 40px
}

.hl-catalog-nav .hl-catalog,
.catalog-nav .hl-catalog,
.hl-catalog-nav .catalog,
.catalog-nav .catalog {
    border-bottom: 1px solid #ddd
}

.hl-catalog-nav .hl-catalog>div:first-child,
.catalog-nav .hl-catalog>div:first-child,
.hl-catalog-nav .catalog>div:first-child,
.catalog-nav .catalog>div:first-child {
    width: 50px;
    white-space: nowrap
}

.hl-catalog-nav .hl-catalog h3,
.catalog-nav .hl-catalog h3,
.hl-catalog-nav .catalog h3,
.catalog-nav .catalog h3 {
    color: #999
}

.hl-catalog-nav .hl-catalog ul,
.catalog-nav .hl-catalog ul,
.hl-catalog-nav .catalog ul,
.catalog-nav .catalog ul {
    width: 100%;
    padding: 10px 20px
}

.hl-catalog-nav .hl-catalog ul li,
.catalog-nav .hl-catalog ul li,
.hl-catalog-nav .catalog ul li,
.catalog-nav .catalog ul li {
    display: inline-block
}

.hl-catalog-nav .hl-catalog ul li a,
.catalog-nav .hl-catalog ul li a,
.hl-catalog-nav .catalog ul li a,
.catalog-nav .catalog ul li a {
    display: inline-block
}

.hl-catalog-nav .hl-catalog ul li:not(:last-child)::after,
.catalog-nav .hl-catalog ul li:not(:last-child)::after,
.hl-catalog-nav .catalog ul li:not(:last-child)::after,
.catalog-nav .catalog ul li:not(:last-child)::after {
    content: "|";
    display: inline-block;
    width: 24px;
    text-align: center
}

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

    .hl-catalog-nav .hl-catalog ul li:not(:last-child)::after,
    .catalog-nav .hl-catalog ul li:not(:last-child)::after,
    .hl-catalog-nav .catalog ul li:not(:last-child)::after,
    .catalog-nav .catalog ul li:not(:last-child)::after {
        width: 16px
    }
}

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

    .hl-catalog-nav .hl-catalog ul li::after,
    .catalog-nav .hl-catalog ul li::after,
    .hl-catalog-nav .catalog ul li::after,
    .catalog-nav .catalog ul li::after {
        width: 16px
    }
}

.hl-catalog-nav .hl-catalog ul li a:hover,
.catalog-nav .hl-catalog ul li a:hover,
.hl-catalog-nav .catalog ul li a:hover,
.catalog-nav .catalog ul li a:hover {
    color: #ef2a3a
}

.hl-catalog-nav .hl-catalog ol li,
.catalog-nav .hl-catalog ol li,
.hl-catalog-nav .catalog ol li,
.catalog-nav .catalog ol li {
    display: inline-block
}

.hl-catalog-nav .hl-catalog ol li:not(:last-child),
.catalog-nav .hl-catalog ol li:not(:last-child),
.hl-catalog-nav .catalog ol li:not(:last-child),
.catalog-nav .catalog ol li:not(:last-child) {
    margin-right: 20px
}

.hl-catalog-nav .hl-catalog ol li a,
.catalog-nav .hl-catalog ol li a,
.hl-catalog-nav .catalog ol li a,
.catalog-nav .catalog ol li a {
    position: relative;
    display: inline-block;
    height: 25px;
    color: #666;
    padding-left: 30px
}

.hl-catalog-nav .hl-catalog ol li a img,
.catalog-nav .hl-catalog ol li a img,
.hl-catalog-nav .catalog ol li a img,
.catalog-nav .catalog ol li a img {
    position: absolute;
    left: 0;
    top: -2px
}

.hl-catalog-nav .hl-catalog ol li a span,
.catalog-nav .hl-catalog ol li a span,
.hl-catalog-nav .catalog ol li a span,
.catalog-nav .catalog ol li a span {
    display: inline-block;
    line-height: 25px;
    height: 25px
}

.hl-catalog-nav .hl-catalog ol li a:hover,
.catalog-nav .hl-catalog ol li a:hover,
.hl-catalog-nav .catalog ol li a:hover,
.catalog-nav .catalog ol li a:hover {
    color: #ef2a3a
}

.hl-catalog-nav.sm,
.catalog-nav.sm {
    padding-bottom: 10px
}

.hl-catalog-nav.sm .hl-catalog ul,
.catalog-nav.sm .hl-catalog ul,
.hl-catalog-nav.sm catalog ul,
.catalog-nav.sm catalog ul {
    padding: 0 20px
}

.hl-catalog-nav.sm .hl-catalog ul li a,
.catalog-nav.sm .hl-catalog ul li a,
.hl-catalog-nav.sm catalog ul li a,
.catalog-nav.sm catalog ul li a {
    color: #333
}

.hl-catalog-nav.sm .hl-catalog ul li a:hover,
.catalog-nav.sm .hl-catalog ul li a:hover,
.hl-catalog-nav.sm catalog ul li a:hover,
.catalog-nav.sm catalog ul li a:hover {
    color: #ef2a3a
}

.hl-catalog-nav.sm .hl-catalog ul li::after,
.catalog-nav.sm .hl-catalog ul li::after,
.hl-catalog-nav.sm catalog ul li::after,
.catalog-nav.sm catalog ul li::after {
    content: "" !important
}

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

    .hl-catalog-nav.sm .hl-catalog ul,
    .catalog-nav.sm .hl-catalog ul,
    .hl-catalog-nav.sm catalog ul,
    .catalog-nav.sm catalog ul {
        padding: 0
    }
}

section.tips {
    padding-bottom: 60px;
    padding-top: 40px;
    background: #f4f6f8
}

section.tips .tips-wrap {
    line-height: 30px
}

section.tips .tips-wrap strong {
    color: #333 !important;
    font-size: 24px;
    font-weight: normal !important
}

section.tips .tips-wrap strong span {
    color: #333 !important;
    font-weight: normal !important
}

.search-bar {
    position: relative;
    height: 87px;
    width: 100%;
    z-index: 99
}

.search-bar>* {
    position: absolute;
    margin: auto
}

.search-bar .one-row {
    z-index: 2;
    height: 50px;
    top: 0;
    bottom: 0;
    border-collapse: collapse
}

.search-bar .one-row .search {
    position: relative
}

.search-bar .one-row .search .forms {
    width: 100%
}

.search-bar .one-row .search .forms gap {
    width: 8px
}

.search-bar .one-row .search .forms input[type=text] {
    height: 50px;
    border: none;
    padding-left: 20px
}

.search-bar .one-row .search .forms input[type=text]:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.search-bar .one-row .search .forms .more {
    width: 120px;
    background: #edf1f7;
    text-align: center
}

.search-bar .one-row .search .forms .more:hover {
    cursor: pointer
}

@media screen and (max-width:768px) {
    .search-bar .one-row .search .forms .more {
        width: 80px
    }
}

.search-bar .one-row .search .forms .go {
    width: 120px
}

.search-bar .one-row .search .forms .go .btn {
    width: 100%;
    height: 100%;
    line-height: 48px;
    padding: 0
}

@media screen and (max-width:768px) {
    .search-bar .one-row .search .forms .go {
        width: 80px
    }
}

.search-bar .one-row .search .more-info-wrap {
    width: 100%;
    padding-right: 120px;
    position: absolute;
    top: 54px
}

.search-bar .one-row .search .more-info-wrap .more-info {
    background: #edf1f7;
    padding: 20px 20px 10px
}

.search-bar .one-row .search .more-info-wrap .more-info ul {
    margin: 0
}

.search-bar .one-row .search .more-info-wrap .more-info ul li {
    display: inline-block;
    float: left;
    white-space: nowrap;
    width: 80px;
    margin-bottom: 10px;
    font-size: 16px
}

.search-bar .one-row .search .more-info-wrap .more-info ul li input[type=checkbox] {
    margin: 0
}

.search-bar .one-row .search .more-info-wrap .more-info ul li span {
    line-height: 16px;
    font-size: 14px;
    padding-left: 2px;
    display: inline-block
}

.search-bar .one-row .search .more-info-wrap .more-info .link {
    float: right
}

@media screen and (max-width:768px) {
    .search-bar .one-row .search .more-info-wrap {
        padding-right: 0
    }

    .search-bar .one-row .search .more-info-wrap .more-info ul li {
        font-size: 14px;
        width: 60px
    }

    .search-bar .one-row .search .more-info-wrap .more-info .link {
        float: right
    }
}

.search-bar .one-row .tips {
    width: 100px;
    white-space: nowrap
}

.search-bar .one-row .tips h3 {
    font-size: 20px;
    margin: 0
}

.search-bar .one-row .tips p {
    margin: 0
}

@media screen and (max-width:768px) {
    .search-bar .one-row .tips {
        display: none
    }
}

.search-bar .one-row .tips+.search {
    padding-left: 0
}

.search-bar>.one-row {
    border-collapse: separate;
    border-spacing: 18px
}

.search-bar .bg {
    width: 100%;
    height: 100%;
    background: #d1d5da;
    z-index: 0
}

@media screen and (max-width:768px) {
    .search-bar.tm-search {
        height: 280px
    }

    .search-bar.tm-search>.one-row .forms {
        height: auto
    }

    .search-bar.tm-search>.one-row .forms>* {
        display: block;
        margin-bottom: 10px;
        height: 50px
    }

    .search-bar.tm-search>.one-row .forms>*.go {
        width: 100% !important
    }

    .search-bar.tm-search>.one-row .forms gap {
        display: none
    }
}

.common-card4_a1 {
    margin: -10px 0
}

.common-card4_a1 .img {
    height: 190px;
    position: relative;
    text-align: center
}

.common-card4_a1 .img img {
    width: 200px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -100px
}

.common-card4_a1 .float-item {
    padding: 0 10px
}

.common-card4_a1 .float-content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    background: #fff;
    padding: 0 10px 40px;
    text-align: center
}

.common-card4_a1 .float-content span {
    font-size: 24px;
    margin: 15px 0;
    display: block;
    color: #333
}

.common-card4_a1 .float-content p {
    color: #333;
    line-height: 30px;
    text-align: center
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.alert {
    color: #b39b8c;
    background: #fff2eb;
    border: 1px dashed #ffb58c;
    padding: 10px 15px;
    font-size: 12px
}

.img-txt {
    border-bottom: 1px solid #ddd;
    border-collapse: collapse;
    margin: 20px 0
}

.img-txt>div {
    vertical-align: bottom
}

.img-txt .img {
    width: 40%
}

.img-txt .img img {
    width: 100%;
    padding-right: 10px;
    display: block
}

.img-txt .img:last-child img {
    padding-right: 0;
    padding-left: 10px
}

.img-txt .txt {
    margin: 0
}

.img-txt .txt p {
    margin: 0
}

@media screen and (max-width:1200px) {
    .img-txt .txt p {
        line-height: 26px
    }
}

@media screen and (max-width:768px) {
    .img-txt>div {
        display: block
    }

    .img-txt .img {
        display: none
    }
}

.breadcrumb li {
    display: inline-block;
    color: #999
}

.breadcrumb li:not(:last-child)::after {
    content: ">";
    color: #ccc;
    margin-left: 6px;
    margin-right: 2px
}

.breadcrumb li a {
    color: #999
}

.dot-list li {
    color: #666;
    position: relative;
    padding-left: 10px
}

.dot-list li::before {
    position: absolute;
    margin: auto;
    left: 0;
    top: 7px;
    display: block;
    content: "";
    height: 6px;
    width: 6px;
    background: url(../image/dot.png) center no-repeat
}

.screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    background: #bfbfbf
}

.pagination {
    margin: -10px
}

.pagination>* {
    display: table;
    border-collapse: separate;
    border-spacing: 10px
}

.pagination>*>* {
    display: table-cell;
    border: 1px solid #ddd;
    line-height: calc(29px);
    text-align: center;
    vertical-align: middle;
    padding: 0 10px;
    color: #666
}

.pagination>*>*.current {
    color: #fff;
    background: #ef2a3a
}

.pagination>*>* .temp {
    color: #bbb;
    width: 32px;
    padding: 0 !important
}

.pagination>*>* .temp.disabled {
    color: #eee;
    border-color: #eee
}

.pagination>*>*:first-child {
    color: #bbb;
    width: 32px;
    padding: 0 !important
}

.pagination>*>*:first-child.disabled {
    color: #eee;
    border-color: #eee
}

.pagination>*>*:last-child {
    color: #bbb;
    width: 32px;
    padding: 0 !important
}

.pagination>*>*:last-child.disabled {
    color: #eee;
    border-color: #eee
}

.turning-icon {
    position: relative;
    height: 70px;
    width: 70px;
    margin: auto
}

.turning-icon img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.turning-icon:after {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    width: 70px;
    background: url(../image/turning-icon.png) no-repeat center
}

.turning-icon:hover {
    cursor: pointer
}

.turning-icon:hover:after {
    content: "";
    animation: rotate-r 2s infinite linear
}

.hot {
    position: relative
}

.hot::after {
    position: relative;
    display: inline-block;
    content: "";
    width: 6px;
    height: 9px;
    top: -4px;
    right: -2px;
    background: url(../image/hot.png) no-repeat center
}

.hot-word {
    position: relative
}

.hot-word::after {
    position: relative;
    display: inline-block;
    content: "";
    width: 25px;
    height: 9px;
    top: -4px;
    right: -2px;
    background: url(../image/hot-word.png) no-repeat center
}


.img-table {
    margin: -20px
}

.img-table table {
    border-collapse: separate;
    border-spacing: 20px;
    width: 100%
}

.img-table table img {
    max-width: 100%;
    width: 100%
}

@media screen and (max-width:768px) {
    .img-table {
        margin: -10px
    }

    .img-table table {
        border-spacing: 10px
    }
}

@media screen and (max-width:480px) {
    .img-table table td {
        display: block;
        padding-bottom: 6px
    }
}

.quote {
    position: relative;
    line-height: 30px;
    padding: 20px 55px
}

.quote::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 40px;
    height: 42px;
    background: url(../image/“.png) no-repeat center
}

.quote::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 40px;
    height: 43px;
    background: url(../image/”.png) no-repeat center
}

@media screen and (max-width:480px) {
    .quote {
        padding: 4px 24px;
        line-height: 24px
    }

    .quote .temp {
        width: 20px;
        height: 21px;
        background-size: 20px 21px
    }

    .quote::before {
        width: 20px;
        height: 21px;
        background-size: 20px 21px
    }

    .quote::after {
        width: 20px;
        height: 21px;
        background-size: 20px 21px
    }
}

.gradient-bg {
    background: url(../image/001.png) bottom repeat-x;
    background-size: 1px 100%
}

.vertical-nav {
    width: 210px;
    margin-bottom: 60px
}

.vertical-nav div {
    position: relative;
    font-size: 16px;
    color: #333;
    line-height: 30px;
    border-bottom: 1px solid #ddd
}

.vertical-nav div b {
    display: block;
    font-size: 24px;
    font-weight: normal;
    padding: 0 20px 20px
}

.vertical-nav div a {
    font-size: 14px;
    color: #333;
    display: block;
    padding: 5px 30px
}

.vertical-nav div>a {
    padding: 5px 20px;
    font-size: 16px
}

.vertical-nav div li>a:hover {
    color: #ef2a3a;
    background-color: #f3f5f9
}

.vertical-nav div i {
    position: absolute;
    padding-left: 5px;
    right: 6px;
    top: 5px;
    transition: all .5s
}

.vertical-nav div ul {
    height: 0;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    transition: all .5s
}

.vertical-nav div ul li {
    position: relative
}

.vertical-nav div ul li.current {
    font-weight: bold
}

.vertical-nav div.current {
    background: #fff;
    border-left-color: #ef2a3a;
    border-right-color: #fff
}

.vertical-nav div.current>a {
    font-weight: bold;
    border-bottom: 1px solid #ddd
}

.vertical-nav div.open ul {
    height: auto
}

.vertical-nav div.open i {
    transform: rotate(180deg)
}

.col-layout {
    padding-top: 20px
}

.col-layout>div {
    vertical-align: top
}

.col-layout>div:first-child {
    width: 240px
}

.col-layout>gap {
    width: 38px
}

@media screen and (max-width:1080px) {
    .col-layout>div:first-child {
        display: none !important
    }

    .col-layout>gap {
        display: none !important
    }
}

[tab] {
    display: none
}

[tab='0'] {
    display: block
}

.jump {
    width: 100%;
    max-width: 500px;
    margin: 20px auto
}

.jump .one-row>div {
    vertical-align: bottom
}

.jump .mapnail {
    position: relative;
    width: 46px;
    height: 72px;
    margin: auto
}

.jump .mapnail .temp {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto
}

.jump .mapnail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    height: 55px;
    width: 46px;
    background: url(../image/mapnail.png) no-repeat center
}

.jump .mapnail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    height: 13px;
    width: 36px;
    background: url(../image/mapnail-shadow.png) no-repeat center
}

.jump+h1 {
    font-size: 24px
}

@media screen and (max-width:500px) {
    .jump .jumpgif {
        padding: 0 10px
    }

    .jump .jumpgif img {
        max-width: 100%
    }

    .jump .mapnail {
        display: none
    }

    .jump+h1 {
        font-size: 18px
    }
}

.getsolution-top {
    width: 300px
}

.article-nav {
    border-top: #ddd dashed 1px;
    margin-bottom: 60px;
    padding: 10px 0
}

.article-nav a {
    display: block
}

*[promotion] {
    position: relative
}

*[promotion]::after {
    position: absolute;
    display: block;
    content: attr(promotion);
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    background: #ff721e;
    padding: 3px;
    top: 2px;
    right: -28px;
    margin: auto;
    border-radius: 2px
}

*[promotion]::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: 0;
    bottom: 0;
    right: -4px;
    margin: auto;
    display: block;
    border: transparent solid 4px;
    border-top-width: 3px;
    border-bottom-width: 3px;
    border-right-color: #ff721e
}

.iot-ani {
    position: absolute;
    width: 639px;
    height: 442px
}

.iot-ani .temp {
    position: absolute;
    content: "";
    display: block;
    width: 639px;
    height: 442px
}

.iot-ani::before {
    position: absolute;
    content: "";
    display: block;
    width: 639px;
    height: 442px;
    background: url(../image/0011.png) center no-repeat;
    z-index: 1
}

.iot-ani::after {
    position: absolute;
    content: "";
    display: block;
    width: 639px;
    height: 442px;
    background: url(../image/002.png) center no-repeat;
    animation: fadeIn linear 1s;
    z-index: 2
}

.iot-ani>* {
    position: absolute
}

.iot-ani cube {
    height: 14px;
    width: 25px;
    background: url(../image/0031.png) center no-repeat;
    animation: bounce infinite 6s;
    z-index: 3
}

.iot-ani cube:nth-of-type(1) {
    left: 60px;
    top: 211px
}

.iot-ani cube:nth-of-type(2) {
    left: 167px;
    top: 284px
}

.iot-ani cube:nth-of-type(3) {
    left: 457px;
    top: 50px
}

.iot-ani ball {
    left: 265px;
    top: 113px;
    height: 96px;
    width: 130px;
    background: url(../image/004.png) center no-repeat;
    animation: bounce infinite 6s;
    z-index: 3
}

.iot-ani ballshadow {
    left: 276px;
    top: 176px;
    width: 108px;
    height: 80px;
    background: url(../image/005.png) center no-repeat;
    animation: fadeIn linear 1s;
    z-index: 3
}

.iot-ani dots {
    left: 266px;
    top: 90px;
    height: 150px;
    width: 130px;
    z-index: 4;
    overflow: hidden
}

.iot-ani dots dot {
    position: absolute;
    bottom: -24px;
    height: 4px;
    width: 4px;
    background: url(../image/006.png) center no-repeat;
    animation: float-up infinite 10s linear;
    opacity: .8
}

.iot-ani dots .dot {
    bottom: -120px;
    position: absolute;
    animation: float-up infinite 10s linear;
    opacity: .8
}

.iot-ani dots div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%
}

.float-dot {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 460px;
    overflow: hidden
}

.float-dot div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%
}

.float-dot img {
    position: absolute;
    bottom: -24px;
    animation: float-up infinite 10s linear
}

*[vm-type="1"] {
    visibility: hidden
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

.level0 {
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0s
}

#stack-pic {
    position: relative;
    width: 1200px;
    margin: 0 auto
}

#stack-pic .swiper-container {
    padding-bottom: 60px
}

#stack-pic .swiper-slide {
    width: 520px;
    height: 408px
}

#stack-pic .swiper-slide img {
    display: block
}

#stack-pic .swiper-slide p {
    line-height: 98px;
    padding-top: 0;
    text-align: center;
    color: #636363;
    font-size: 1.1em;
    margin: 0
}

#stack-pic .swiper-pagination {
    width: 100%;
    bottom: 20px
}

#stack-pic .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    background-color: #d5d5d5;
    width: 30px;
    height: 4px;
    opacity: 1;
    border-radius: 2px
}

#stack-pic .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #ef2a3a
}

#stack-pic .swiper-button-prev {
    background-size: 100%
}

#stack-pic .swiper-button-prev:hover {
    background-position: 0 -46px;
    background-size: 100%
}

#stack-pic .swiper-button-next {
    background-size: 100%
}

#stack-pic .swiper-button-next:hover {
    background-position: 0 -139px;
    background-size: 100%
}

.map-spot1 {
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #0056c9
}

.map-spot1::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: rgba(38, 163, 254, 0.1);
    animation: flash infinite linear 1s
}

.map-spot1::after {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: rgba(38, 163, 254, 0.1);
    animation: pulse2 infinite linear 1s
}

.c-sec1-flow {
    position: relative
}

.c-sec1-flow-item {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    padding: 30px 20px 40px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    background-color: #fff;
    z-index: 5
}

.c-sec1-flow-item .c-section-tit {
    font-size: 24px;
    font-weight: bold
}

.c-sec1-flow-item .c-section-text {
    font-size: 14px;
    line-height: 24px;
    margin: 10px 0;
    text-align: center
}

.c-sec1-flow-item:hover {
    cursor: pointer
}

.c-sec1-flow .flow-img {
    margin-bottom: 10px
}

@media screen and (max-width:768px) {
    .c-sec1-flow .row {
        margin: 0
    }
}

.c-data-list .data-content {
    margin: 0 -5px
}

.c-data-list .data-item {
    padding: 5px
}

.c-data-list .data-txt {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #c6d1dd
}

.c-data-list .data-txt:hover {
    background-color: #ef2a3a;
    border: 1px solid #ef2a3a;
    color: #fff;
    transition: background-color .5s
}

.c-data-list .data-txt.data-hot::after {
    content: url(../image/hot-sale.png);
    position: absolute;
    top: 0;
    right: 0
}

a {
    text-decoration: none;
    color: #666
}

a:hover {
    text-decoration: none;
    color: #ef2a3a;
    cursor: pointer
}

.form-style {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 8px;
    font: 14px/1.5 "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif;
    line-height: 32px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 0
}

.form-style:focus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1)
}

.form-style.lg {
    padding: 0 20px;
    height: calc(38px);
    line-height: calc(36px)
}

.form-style.sm {
    font-size: 12px;
    padding: 0 8px;
    height: calc(24px);
    line-height: calc(20px)
}

input[type=text],
input[type=password] {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 8px;
    font: 14px/1.5 "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif;
    line-height: 32px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 0
}

input[type=text]:focus,
input[type=password]:focus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1)
}

input[type=text].lg,
input[type=password].lg {
    padding: 0 20px;
    height: calc(38px);
    line-height: calc(36px)
}

input[type=text].sm,
input[type=password].sm {
    font-size: 12px;
    padding: 0 8px;
    height: calc(24px);
    line-height: calc(20px)
}

textarea {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 8px;
    font: 14px/1.5 "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif;
    line-height: 32px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 0;
    height: 80px;
    line-height: 18px
}

textarea:focus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1)
}

textarea.lg {
    padding: 0 20px;
    height: calc(38px);
    line-height: calc(36px)
}

textarea.sm {
    font-size: 12px;
    padding: 0 8px;
    height: calc(24px);
    line-height: calc(20px)
}

select {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 8px;
    font: 14px/1.5 "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif;
    line-height: 32px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 0
}

select:focus {
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.1)
}

select.lg {
    padding: 0 20px;
    height: calc(38px);
    line-height: calc(36px)
}

select.sm {
    font-size: 12px;
    padding: 0 8px;
    height: calc(24px);
    line-height: calc(20px)
}

.form-wrap {
    display: table;
    width: 100%
}

.form-wrap>* {
    display: table-cell
}

.form-wrap gap {
    width: 4px;
    min-width: 4px
}

.multi-form {
    position: relative
}

.multi-form input[type=text],
.multi-form input[type=password] {
    height: 32px
}

.multi-form i+input[type=text],
.multi-form i+input[type=password] {
    padding-right: 32px
}

.multi-form label+input[type=text],
.multi-form label+input[type=password] {
    padding-left: 50px
}

.multi-form label+textarea {
    padding-left: 50px;
    height: 80px;
    line-height: 18px
}

.multi-form label {
    line-height: 30px;
    position: absolute;
    top: 0;
    left: 10px
}

.multi-form i {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 32px;
    line-height: calc(30px);
    width: 32px;
    text-align: center;
    color: #ccc;
    font-size: 18px
}

.multi-form .embed {
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    height: 32px;
    line-height: calc(30px);
    width: 32px;
    text-align: center;
    color: #ccc;
    font-size: 18px
}

.multi-form.lg input[type=text],
.multi-form.lg input[type=password] {
    height: 38px
}

.multi-form.lg i+input[type=text],
.multi-form.lg i+input[type=password] {
    padding-right: 38px
}

.multi-form.lg i {
    height: 38px;
    line-height: calc(36px);
    width: 38px
}

.multi-form.lg label {
    line-height: 38px
}

.multi-form.lg img {
    position: absolute;
    top: calc(8px);
    right: 10px
}

.multi-form.sm {
    font-size: 12px
}

.multi-form.sm input[type=text],
.multi-form.sm input[type=password] {
    height: 24px
}

.multi-form.sm i+input[type=text],
.multi-form.sm i+input[type=password] {
    padding-right: 24px
}

.multi-form.sm i {
    height: 24px;
    line-height: 24px
}

.multi-form.sm label {
    line-height: 22px
}

.multi-form.sm img {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 60px;
    height: 20px
}

.multi-form img+input[type=text],
.multi-form img+input[type=password] {
    padding-right: 88px
}

.multi-form img {
    position: absolute;
    top: calc(5px);
    right: 10px
}

.multi-form img:hover {
    cursor: pointer
}

.check-form {
    position: relative;
    margin-bottom: 18px
}

.check-form.wrong:before {
    position: absolute;
    bottom: -18px;
    display: block;
    font-size: 12px;
    height: 18px;
    color: #ef2a3a;
    content: attr(data-beforeData)
}

.check-form.wrong i {
    color: #ef2a3a
}

.check-form.wrong input,
.check-form.wrong select {
    border-color: #ef2a3a;
    -webkit-box-shadow: inset 0 1px 1px rgba(240, 65, 52, 0.2), 0 0 8px rgba(240, 65, 52, 0.2);
    box-shadow: inset 0 1px 1px rgba(240, 65, 52, 0.2), 0 0 8px rgba(240, 65, 52, 0.2)
}

.form-wrap {
    display: table;
    width: 100%
}

.form-wrap gap {
    width: 4px
}

.form-wrap>div {
    display: table-cell;
    vertical-align: top
}

.btn {
    height: 32px;
    line-height: calc(30px);
    padding: 0 16px;
    border: 1px solid #ef2a3a;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: middle;
    transition: background .3s, color .3s;
    color: #fff;
    background-color: #ef2a3a;
    text-align: center;
    white-space: nowrap;
    outline: none
}

.btn[disabled] {
    background-color: #f0979e;
    border-color: #f0979e
}

.btn[disabled]:hover {
    background-color: #f0979e;
    border-color: #f0979e;
    cursor: no-drop
}

.btn:hover {
    cursor: pointer;
    color: #fff;
    background-color: #F24651;
    border-color: #F24651
}

.btn.line {
    color: #ef2a3a;
    border-color: #ef2a3a;
    background: transparent
}

.btn.line:hover {
    color: #fff;
    background: #ef2a3a
}

.btn.line[disabled] {
    color: #f0979e;
    border-color: #f0979e
}

.btn.line[disabled]:hover {
    color: #fff;
    background: #f0979e
}

.btn.white {
    color: #ef2a3a;
    border-color: #ef2a3a;
    background: transparent;
    color: #fff;
    border-color: #fff
}

.btn.white:hover {
    color: #fff;
    background: #ef2a3a
}

.btn.white[disabled] {
    color: #f0979e;
    border-color: #f0979e
}

.btn.white[disabled]:hover {
    color: #fff;
    background: #f0979e
}

.btn.white:hover {
    background: transparent
}

.btn.round {
    border-radius: 16px
}

.btn.glow {
    box-shadow: 0 0 20px 0 rgba(239, 35, 54, 0.2)
}

.btn.lg {
    font-size: 16px;
    padding: 0 20px;
    height: calc(38px);
    line-height: calc(36px)
}

.btn.lg.glow {
    box-shadow: 0 10px 20px 0 rgba(239, 35, 54, 0.2)
}

.btn.lg.round {
    border-radius: calc(19px)
}

.btn.sm {
    font-size: 12px;
    padding: 0 8px;
    height: calc(24px);
    line-height: calc(20px)
}

.btn.sm.round {
    border-radius: calc(12px)
}

.btn.b01 {
    position: relative
}

.btn.b01 .temp {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 120px;
    width: 129px;
    display: block;
    background-size: 100%;
    transition: .5s all
}

.btn.b01::before {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 120px;
    width: 129px;
    display: block;
    background-size: 100%;
    transition: .5s all;
    right: 50%;
    background: url(../image/034.png) no-repeat center right
}

.btn.b01::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 120px;
    width: 129px;
    display: block;
    background-size: 100%;
    transition: .5s all;
    left: 50%;
    background: url(../image/035.png) no-repeat center left
}

.btn.b01:hover .temp {
    content: "";
    animation: zoom-bg .2s 0s ease-out forwards
}

.btn.b01:hover::before {
    content: "";
    animation: zoom-bg .2s 0s ease-out forwards
}

.btn.b01:hover::after {
    content: "";
    animation: zoom-bg .2s 0s ease-out forwards
}

.btn.b02 {
    font-size: 16px;
    padding: 0 20px;
    height: calc(38px);
    line-height: calc(36px);
    color: #ef2a3a;
    border-color: #ef2a3a;
    background: transparent;
    position: relative;
    padding-right: 60px;
    overflow: hidden;
    background: #fff
}

.btn.b02.glow {
    box-shadow: 0 10px 20px 0 rgba(239, 35, 54, 0.2)
}

.btn.b02.round {
    border-radius: calc(19px)
}

.btn.b02:hover {
    color: #fff;
    background: #ef2a3a
}

.btn.b02[disabled] {
    color: #f0979e;
    border-color: #f0979e
}

.btn.b02[disabled]:hover {
    color: #fff;
    background: #f0979e
}

.btn.b02 span {
    position: relative;
    color: #fff
}

.btn.b02::before {
    content: "";
    display: block;
    background: #ef2a3a;
    position: absolute;
    left: -15px;
    right: 40px;
    top: -50px;
    bottom: -50px;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg)
}

.btn.b02::after {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 15px;
    top: 11px;
    right: 16px;
    background: url(../image/b02.png) no-repeat center
}

.btn.b02:hover {
    background: #fff
}

.btn.b02:hover::before {
    right: -10px
}

.btn.b02:hover::after {
    background-image: url(../image/b02-hover.png)
}

.btn.b03 {
    position: relative;
    display: inline-block;
    height: 34px;
    width: 158px;
    border: none !important;
    background: url(../image/0012.png) center no-repeat
}

.btn.b03 span {
    display: inline-block;
    position: absolute;
    font-size: 16px;
    line-height: 16px;
    top: 8px;
    left: 24px;
    z-index: 3
}

.btn.b03::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 118px;
    height: 34px;
    background: url(../image/0021.png) center no-repeat;
    -webkit-transition: .3s all;
    transition: .3s all;
    z-index: 1
}

.btn.b03::after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 7px;
    width: 11px;
    height: 20px;
    background: url(../image/0032.png) center no-repeat;
    z-index: 2
}

.btn.b03:hover::before {
    left: 40px
}

.btn.b03:hover::after {
    background: url(../image/0041.png) center no-repeat
}

.banner {
    position: relative;
    height: 360px
}

.banner .wrapper {
    position: relative;
    height: 100%
}

.banner .banner-txt {
    margin: auto;
    height: 340px;
    display: table-cell;
    vertical-align: middle;
    max-width: 550px;
    align-items: center
}

.banner .banner-txt h1 {
    font-size: 30px;
    margin: 0;
    white-space: nowrap
}

.banner .banner-txt h3 {
    margin-top: 0;
    margin-bottom: 0
}

.banner .banner-txt h4 {
    color: #999;
    margin: 6px 0
}

.banner .banner-txt .btn {
    margin-top: 20px
}

.banner .banner-txt ul li {
    color: #666;
    font-size: 16px;
    position: relative;
    padding-left: 10px
}

.banner .banner-txt ul li::before {
    position: absolute;
    margin: auto;
    left: 0;
    top: 8px;
    display: block;
    content: "";
    height: 6px;
    width: 6px;
    background: url(../image/dot.png) center no-repeat
}

.banner .banner-txt.center {
    height: 50px;
    display: block;
    position: absolute;
    margin: auto !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    letter-spacing: 2px
}

.banner .banner-txt-center {
    padding-top: 150px
}

@media screen and (max-width:1200px) {
    .banner .banner-txt-center img {
        width: 90%
    }

    .banner .banner-txt-center p {
        font-size: 16px
    }
    
    .banner .banner-txt h1 {
        white-space: unset
    }

}

@media screen and (max-width:1200px) {
    .banner .banner-txt-center {
        padding-top: 100px
    }
}

.banner .banner-txt_white h1,
.banner .banner-txt_white h3,
.banner .banner-txt_white h4 {
    color: #fff
}

.banner .tab-wrap {
    position: absolute;
    bottom: 0;
    height: 51px;
    min-height: 51px;
    width: 100%;
    border-bottom: none;
    background: transparent
}

.banner .tab-wrap .wrapper {
    z-index: 2
}

.banner .tab-wrap .wrapper .item {
    line-height: 48px;
    color: #fff;
    font-size: 16px
}

.banner .tab-wrap .bg {
    position: absolute;
    top: 0;
    height: 51px;
    width: 100%;
    background: #111b2c;
    z-index: 1;
    opacity: .6;
    border-bottom: 1px solid #ddd
}

.server-banner {
    height: 500px
}

.server-banner .server-banner-txt {
    margin: auto;
    height: 400px;
    max-width: 500px;
    color: #fff;
    display: table-cell;
    vertical-align: middle
}

.server-banner .banner-txt_title {
    font-size: 60px;
    color: #fff;
    margin: 0
}

.server-banner .banner-txt_adv {
    margin-bottom: 10px
}

.server-banner .banner-txt_adv .item {
    line-height: 30px
}

.server-banner .banner-txt_adv .item::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 5px;
    height: 5px;
    border: 2px solid #ef2a3a;
    border-radius: 5px
}

@media screen and (max-width:1200px) {
    .server-banner .banner-txt_title {
        font-size: 30px
    }

    .server-banner .server-banner-txt .item {
        font-size: 16px
    }
}

@media screen and (max-width:768px) {
    .server-banner .server-banner-txt {
        height: 300px
    }
}

.idc-homepage-marketing {
    cursor: pointer;
    background: url(../image/idc-homepage-marketing.jpg) no-repeat center #e9f1ff
}

.solution-banner {
    height: 100%
}

.solutions .banner {
    background: linear-gradient(#eff7fc, #fff)
}

.products .banner {
    background: url(../image/products.jpg) center no-repeat
}

.idcicp-products .banner {
    background: url(../image/products.jpg) center no-repeat
}

.server-index .server-banner {
    background: url(../image/server-index_2020.jpg) center no-repeat
}

.server-index .hk-banner {
    background: url(../image/014.jpg) center no-repeat;
    height: 500px
}

.server-index .hk-banner .wrapper {
    position: relative
}

.server-index .hk-banner .content {
    height: 430px;
    max-width: 650px;
    display: table-cell;
    vertical-align: middle
}

@media screen and (max-width:992px) {
    .server-index .hk-banner .hkbanner-txt {
        width: 80%
    }
}

@media screen and (max-width:768px) {
    .server-index .hk-banner {
        height: 400px;
        transition: height .5s
    }
}

.server-gpu .banner {
    background: url(../image/banner-GPU_01.jpg) center no-repeat
}

.idc .banner {
    background: url(../image/idc.jpg) center no-repeat #0d1635
}

.topic-idc-jx .banner {
    background: url(../image/idc-jx.jpg) center no-repeat
}

.domain-index .banner {
    background: url(../image/domain-index.jpg) center no-repeat
}

.domain-result .banner {
    background: url(../image/domain-index.jpg) center no-repeat
}

.email-business .banner {
    background: url(../image/email-business.jpg) center no-repeat
}

.email-fob .banner {
    background: url(../image/email-fob.jpg) center no-repeat
}

.email-customize .banner {
    background: url(../image/email-customize.jpg) center no-repeat
}

.email-ali .banner {
    background: url(../image/email-ali.jpg) center no-repeat
}

.cloud-index .banner {
    background: url(../image/cloud-index.jpg) center no-repeat
}

.topic-pioneer .banner {
    height: 360px;
    background: url(../image/topic-poineer.png) center no-repeat
}

.topic-pioneer .banner-txt {
    height: 350px !important
}

.cloud-private .banner {
    height: 360px;
    background: url(../image/cloud-private.jpg) center no-repeat
}

.cloud-private .banner-txt {
    height: 350px !important
}

.cloud-HCI .banner {
    background: url(../image/cloud-HCI.jpg) center no-repeat
}

.cloud-waf .banner {
    background: url(../image/cloud-waf.jpg) center no-repeat
}

.cloud-agent .banner {
    background: url(../image/cloud-agent.jpg) center no-repeat
}

.cloud-ddos .banner {
    background: url(../image/cloud-ddos.jpg) center no-repeat
}

.cloud-cdn .banner {
    background: url(../image/cloud-cdn.jpg) center no-repeat
}

.cloud-oos .banner {
    background: url(../image/cloud-oos.jpg) center no-repeat
}

.cloud-datavault .banner {
    background: url(../image/clous-DataVault.jpg) center no-repeat
}

.cloud-database .banner {
    background: url(../image/cloud-database.jpg) center no-repeat
}

.cloud-sup .banner {
    background: url(../image/clous-sup.jpg) center no-repeat
}

.cloud-chia .banner {
    background: url(../image/clous-chia.jpg) center no-repeat
}

.host-index .banner {
    background: url(../image/host-index.jpg) center no-repeat
}

.datacenter-index .banner {
    background: url(../image/products.jpg) center no-repeat
}

.datacenter-details .banner {
    background: url(../image/datacenter-details.jpg) center no-repeat
}

.solution-index .banner {
    background: url(../image/solution-index.jpg) center no-repeat
}

.about .banner {
    background: url(../image/about.jpg) center no-repeat
}

.solution-DS .need {
    background: url(../image/solution-DS.jpg) center no-repeat
}

.solution-FCP .banner {
    height: 500px;
    background: url(../image/solution-FCP.jpg) center no-repeat;
    background-size: cover
}

.solution-FCP .banner h1 {
    font-size: 36px
}

.solution-FCP .banner .subtit {
    line-height: 30px;
    margin: 30px 0 40px;
    font-weight: 200
}

.solution-FCP .banner-txt {
    height: 450px
}

.solution-HI .need {
    background: url(../image/solution-HI.jpg) center no-repeat
}

.solution-FN .banner {
    background: url(../image/solution-FN-banner.jpg) center no-repeat
}

.solution-FN .banner::before {
    content: "";
    opacity: 0
}

.solution-FNdata .banner {
    background: url(../image/solution-FNdata-banner.jpg) center no-repeat
}

.solution-FNdata .banner::before {
    content: "";
    opacity: 0
}

.solution-SM .need {
    background: url(../image/solution-SM.jpg) center no-repeat
}

.solution-GM .need {
    background: url(../image/solution-GM.jpg) center no-repeat
}

.solution-EC .need {
    background: url(../image/solution-EC.jpg) center no-repeat
}

.solution-IM .need {
    background: url(../image/015.png) center no-repeat
}

.solution-NE .need {
    background: url(../image/solution-NE.jpg) center no-repeat
}

.solution-DA .need {
    background: url(../image/solution-DA.jpg) center no-repeat
}

.solution-BD .need {
    background: url(../image/solution-BD.jpg) center no-repeat
}

.solution-IO .need {
    background: url(../image/solution-IO.jpg) center no-repeat
}

.solution-CS .need {
    background: url(../image/solution-CS.png) center no-repeat
}

.solution-LB .need {
    background: url(../image/solution-LB.jpg) center no-repeat
}

.solution-SP .need {
    background: url(../image/solution-SP.jpg) center no-repeat
}

.solution-HA .need {
    background: url(../image/solution-HA.jpg) center no-repeat
}

.solution-DC .need {
    background: url(../image/solution-DC.jpg) center no-repeat
}

.solution-DR .need {
    background: url(../image/015.png) center no-repeat
}

.solution-BC .need {
    background: url(../image/solution-BC.jpg) center no-repeat
}

.solution-PS .need {
    background: url(../image/solution-PS.jpg) center no-repeat
}

.solution-CFN .need {
    background: url(../image/solution-CFN.jpg) center no-repeat
}

.solution-CIM .need {
    background: url(../image/solution-CIM.jpg) center no-repeat
}

.solution-CEC .need {
    background: url(../image/solution-CEC.jpg) center no-repeat
}

.solution-CSM .need {
    background: url(../image/solution-CSM.jpg) center no-repeat
}

.solution-CFT .need {
    background: url(../image/solution-CFT.jpg) center no-repeat
}

.solution-HC .need {
    background: url(../image/solution-HC.jpg) center no-repeat
}

.solution-IOT .need {
    background: url(../image/solution-IOT.jpg) center no-repeat
}

.solution-OLB .need {
    background: url(../image/solution-IOT.jpg) center no-repeat
}

.help .banner {
    background: url(../image/help.jpg) center no-repeat
}

.service .banner {
    background: url(../image/about.jpg) center no-repeat
}

.mall-index .banner {
    background: url(../image/banner-mall.jpg) center no-repeat
}

.topic-gragonboat .banner {
    background: url(../image/topic-gragonboat1.jpg) center no-repeat
}

.topic-national .banner {
    background: url(../image/topic-national.jpg) top no-repeat
}

.topic-midyear .banner {
    background: url(../image/topic-midyear.jpg) top no-repeat
}

.topic-endyear .banner {
    background: url(../image/topic-endyear.jpg) top no-repeat #0e0256
}

.topic-endyear {
    background-color: #0e0256
}

.topic-serverfree .banner {
    background: url(../image/topic-serverfree.jpg) top no-repeat
}

.topic-double11 .banner {
    background: url(../image/topic-pro-double11.jpg) center no-repeat
}

.topic-largebd .banner {
    background: url(../image/topic-largebd.jpg) center no-repeat
}

.topic-ddos .banner {
    background: url(../image/topic-ddos.png) center no-repeat
}

.topic-extra .banner {
    background: url(../image/topic-extra.jpg) center no-repeat
}

.topic-SSL .banner {
    background: url(../image/topic-SSL.jpg) center no-repeat
}

.topic-hkcloud .banner {
    background: url(../image/topic-hkcloud.jpg) center no-repeat
}

.topic-szcloud .banner {
    background: url(../image/topic-szcloud.jpg) center no-repeat
}

.topic-uscloud .banner {
    background: url(../image/topic-uscloud.jpg) center no-repeat
}

.topic-sp-eccloud .banner {
    background: url(../image/topic-sp-eccloud.jpg) center no-repeat
}

.topic-sdwan .banner {
    background: url(../image/banner-sd-wan.jpg) center no-repeat
}

.topic-spcloud-index .banner {
    background: url(../image/topic-spcloud-index.jpg) center no-repeat
}

.topic-cloudpublic .banner {
    background: url(../image/topic-cloudpublic.jpg) center no-repeat
}

.topic-overseas .banner {
    background: url(../image/topic-overseas.jpg) center no-repeat
}

.topic-idc-hn .banner {
    background: url(../image/topic-idc-hn.jpg) center no-repeat
}

.topic-idc-kr .banner {
    background: url(../image/017.jpg) center no-repeat
}

.topic-idc-korea .banner {
    background: url(../image/topic-idc-korea.jpg) center no-repeat
}

.topic-idc-us .banner {
    background: url(../image/topic-idc-us.jpg) center no-repeat
}

.topic-cloud-us .banner {
    background: url(https://www.idcicp.cn/img/banner/topic-cloud-us.jpg) center no-repeat
}

.topic-cloud-offerdoc .banner {
    background: url(../image/topic-cloud-offerdoc.jpg) center no-repeat
}

.topic-idc-tw .banner {
    background: url(../image/topic-idc-tw.jpg) center no-repeat
}

.topic-idc-de .banner {
    background: url(../image/topic-idc-de.jpg) center no-repeat
}

.topic-idc-ru .banner {
    background: url(../image/topic-idc-ru.jpg) center no-repeat
}

.topic-idc-sg .banner {
    background: url(../image/topic-idc-sg.jpg) center no-repeat
}

.topic-idc-ph .banner {
    background: url(../image/topic-idc-ph.jpg) center no-repeat
}

.topic-idc-my .banner {
    background: url(../image/topic-idc-my.jpg) center no-repeat
}

.topic-idc-za .banner {
    background: url(../image/topic-idc-za.jpg) center no-repeat
}

.topic-idc-jp .banner {
    background: url(../image/topic-idc-jp.jpg) center no-repeat
}

.topic-idc-th .banner {
    background: url(../image/topic-idc-th.jpg) center no-repeat
}

.topic-idc-id .banner {
    background: url(../image/topic-idc-id.jpg) center no-repeat
}

.topic-idc-uk .banner {
    background: url(../image/topic-idc-uk.jpg) center no-repeat
}

.topic-idc-in .banner {
    background: url(../image/topic-idc-in.jpg) center no-repeat
}

.topic-idc-nll .banner {
    background: url(../image/topic-idc-nll.jpg) center no-repeat
}

.topic-idc-vn .banner {
    background: url(../image/topic-idc-vn.jpg) center no-repeat
}

.topic-idc-cbd .banner {
    background: url(../image/topic-idc-cbd.jpg) center no-repeat
}

.topic-idc-ar .banner {
    background: url(../image/topic-idc-ar.jpg) center no-repeat
}

.topic-idc-au .banner {
    background: url(../image/topic-idc-au.jpg) center no-repeat
}

.topic-idc-br .banner {
    background: url(../image/topic-idc-br.jpg) center no-repeat
}

.topic-idc-fr .banner {
    background: url(../image/topic-idc-fr.jpg) center no-repeat
}

.topic-idc-ca .banner {
    background: url(../image/topic-idc-ca.jpg) center no-repeat
}

.topic-idc-cz .banner {
    background: url(../image/topic-idc-cz.jpg) center no-repeat
}

.topic-idc-tr .banner {
    background: url(../image/topic-idc-tr.jpg) center no-repeat
}

.topic-idc-es .banner {
    background: url(../image/topic-idc-es.jpg) center no-repeat
}

.topic-idc-it .banner {
    background: url(../image/topic-idc-it.jpg) center no-repeat
}

.topic-idc-hk .topic-banner {
    background: url(../image/topic-idc-hk2.jpg) center no-repeat
}

.server-topic .section {
    background: url("../image/topic-server-bg.jpg") center no-repeat;
    background-size: 1920px 100%
}

.hktopic .home-page {
    background: url("../image/topic-hkserver.jpg") center no-repeat;
    background-size: 1920px 100%
}

.hkcloud .home-page {
    background: url("../image/topic-hkserver.jpg") center no-repeat;
    background-size: 1920px 100%
}

.section {
    background: url("../image/topic-server-bg.jpg") center no-repeat;
    background-size: 1920px 100%
}

.menu-page {
    background: url("../image/topic-hkserver.jpg") center no-repeat;
    background-size: 1920px 100%
}

.topic-serv-global .banner {
    background: url(../image/topic-serv-global.jpg) center no-repeat
}

.topic-idc-southeast .banner {
    background: url(../image/topic-idc-southeast.jpg) center no-repeat
}

.topic-idc-global .banner {
    background: url(../image/topic-idc-global.jpg) center no-repeat
}

.topic-dc-sg .banner {
    background: url(../image/topic-dc-sg.jpg) center no-repeat
}

.topic-dc-szdg .banner {
    background: url(../image/topic-dc-szdg.jpg) center no-repeat
}

.topic-dc-hk .banner {
    background: url(../image/topic-dc-hk.jpg) center no-repeat
}

.topic-dc-hk .banner-txt {
    max-width: 700px;
    height: 480px;
    width: auto;
    color: #fff
}

.topic-dc-hk .banner-txt h2 {
    font-size: 60px;
    font-weight: bold
}

.topic-dc-hk .banner-txt span {
    font-size: 36px
}

.topic-dc-hk .banner-adv {
    margin: 30px 0
}

.topic-dc-hk .banner-adv .item {
    padding: 5px 10px;
    background: #fff;
    color: #333;
    min-width: 140px;
    text-align: center
}

.topic-dc-hk .banner-adv .item:nth-child(odd) {
    background: linear-gradient(to right, #f1d995, #f0623c);
    color: #fff
}

.topic-dc-hk .banner-adv img {
    vertical-align: middle
}

.topic-dc-hk .content {
    position: relative
}

.topic-dc-hk .content a {
    color: #fff
}

.topic-dc-szdg .banner-txt {
    max-width: 700px;
    height: 480px;
    width: auto;
    color: #fff
}

.topic-dc-szdg .banner-txt h2 {
    font-size: 60px;
    font-weight: bold
}

.topic-dc-szdg .banner-txt span {
    font-size: 36px
}

.topic-dc-szdg .banner-adv {
    margin: 30px 0
}

.topic-dc-szdg .banner-adv .item>div {
    padding: 0 20px;
    background: #fff;
    color: #333;
    min-width: 140px;
    text-align: center;
    height: 46px;
    line-height: 46px;
    margin-right: 10px
}

.topic-dc-szdg .banner-adv .item.bg>div {
    background: #ef2a3a;
    color: #fff
}

.topic-dc-szdg .banner-adv img {
    vertical-align: middle;
    margin-right: 5px
}

.topic-dc-szdg .content {
    position: relative
}

.topic-dc-szdg .content a {
    color: #fff
}

.home-banner-national {
    margin-top: 20px
}

.home-banner-southeast {
    margin-top: 50px
}

.home-banner-southeast .text {
    font-weight: 100;
    font-size: 26px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    margin: auto;
    max-width: 1060px
}

.home-banner-southeast b {
    color: #ff6c00;
    font-size: 30px
}

.home-banner-southeast .btn {
    background: #ff6c00;
    border: transparent;
    padding: 0 30px;
    margin-top: 30px;
    border-radius: 5px
}

@media screen and (max-width:1200px) {
    .topic-idc-hk .topic-banner {
        background: url(../image/topic-idc-hk2.jpg) center no-repeat
    }

    .home-banner-southeast .text {
        font-size: 20px
    }
}

@media screen and (max-width:768px) {
    .home-banner-national {
        margin-top: 15%
    }
}

@media screen and (max-width:576px) {
    .home-banner-southeast {
        margin-top: 70px
    }

    .home-banner-southeast .text,
    .home-banner-southeast b {
        font-size: 16px
    }
}

.home-banner-double11 .banner-content {
    padding-top: 100px
}

.home-banner-double11 .title2 {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0
}

.topic-quarter-q2 .tit {
    display: inline-block;
    margin-bottom: -50px
}

.topic-quarter-q2 .subtit {
    text-align: center;
    color: #ffecc0;
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px
}

@media screen and (max-width:575px) {
    .topic-quarter-q2 .subtit {
        font-size: 18px
    }

    .topic-quarter-q2 .tit {
        margin-bottom: 0
    }
}

.topic-quarter-q3 {
    background: url(../image/topic-q2.jpg) no-repeat center
}

.topic-quarter-q3 .banner-title {
    padding-top: 50px
}

.topic-quarter-q3 .subtit {
    text-align: center;
    color: #ffecc0;
    font-size: 36px;
    font-weight: bold;
    margin-top: -50px
}

.topic-quarter-q3 .subtit p {
    text-align: center
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes rotate-r {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

@keyframes rotate-l {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes float-up {
    0% {
        top: 100%;
        opacity: 0
    }

    40% {
        opacity: 1
    }

    70% {
        opacity: 1
    }

    100% {
        top: 0;
        opacity: 0
    }
}

@keyframes zoom-bg {
    0% {
        background-size: 80% 80%
    }

    100% {
        background-size: 100% 100%
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes rerotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-360deg)
    }
}

@keyframes svgCircle {
    0% {
        stroke-dashoffset: 201
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes Float-ab-Y {
    0% {
        opacity: 1;
        transform: translate(0, 0)
    }

    50% {
        opacity: .8;
        transform: translate(0, 6px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        transform: scale(.5)
    }

    100% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: scale(1)
    }
}

@keyframes scaleOut {
    0% {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        transform: scale(1)
    }

    100% {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        transform: scale(.5)
    }
}

@keyframes loop1 {
    0% {
        background-position-y: 0
    }

    100% {
        background-position-y: -696px
    }
}

@keyframes circle-wave {
    0% {
        opacity: 1;
        transform: scale(0)
    }

    100% {
        opacity: 0;
        transform: scale(1)
    }
}

@-webkit-keyframes headarrow {
    25% {
        -webkit-transform: translateY(-4px)
    }

    50%,
    100% {
        -webkit-transform: translateY(0)
    }

    75% {
        -webkit-transform: translateY(4px)
    }
}

@keyframes headarrow {
    25% {
        transform: translateY(-4px)
    }

    50%,
    100% {
        transform: translateY(0)
    }

    75% {
        transform: translateY(4px)
    }
}

.ani-tit1 {
    cursor: pointer;
    color: white;
    transform: translate3d(-50%, -50%, 0);
    padding: .7em calc(.84em);
    display: inline-block;
    border: 3px solid transparent;
    position: relative;
    font-size: 1.5em;
    letter-spacing: .07em
}

.ani-tit1 .ani-line {
    position: absolute;
    background: #fff
}

.ani-tit1 .ani-line.-right,
.ani-tit1 .ani-line.-left {
    width: 1px;
    bottom: -1px;
    top: -1px;
    transform: scale3d(1, 0, 1)
}

.ani-tit1 .ani-line.-top,
.ani-tit1 .ani-line.-bottom {
    height: 1px;
    left: -1px;
    right: -1px;
    transform: scale3d(0, 1, 1)
}

.ani-tit1 .ani-line.-right {
    right: -1px;
    transition: transform .1s cubic-bezier(1, 0, .65, 1.01) .23s;
    transform-origin: top
}

.ani-tit1 .ani-line.-top {
    top: -1px;
    transition: transform .08s linear .43s;
    transform-origin: left
}

.ani-tit1 .ani-line.-left {
    left: -1px;
    transition: transform .08s linear .51s;
    transform-origin: bottom
}

.ani-tit1 .ani-line.-bottom {
    bottom: -1px;
    transition: transform .3s cubic-bezier(1, 0, .65, 1.01);
    transform-origin: right
}

.ani-tit1 .text {
    font-family: proxima-nova;
    transform: translate3d(0, .7em, 0);
    display: block;
    transition: transform .4s cubic-bezier(.2, 0, 0, 1) .4s
}

.ani-tit1:after {
    position: absolute;
    content: '';
    bottom: -1px;
    left: calc(.84em);
    right: calc(.84em);
    height: 1px;
    background: #fff;
    z-index: -1;
    transition: transform .8s cubic-bezier(1, 0, .37, 1) .2s, right .2s cubic-bezier(.04, .48, 0, 1) .6s, left .4s cubic-bezier(.04, .48, 0, 1) .6s;
    transform-origin: left
}

.ani-tit1:hover .text,
.ani-tit1:active .text {
    transform: translate3d(0, 0, 0);
    transition: transform .6s cubic-bezier(.2, 0, 0, 1) .4s
}

.ani-tit1:hover:after,
.ani-tit1:active:after {
    transform: scale3d(0, 1, 1);
    right: -1px;
    left: -1px;
    transform-origin: right;
    transition: transform .2s cubic-bezier(1, 0, .65, 1.01) .17s, right .2s cubic-bezier(1, 0, .65, 1.01), left 0s .3s
}

.ani-tit1:hover .ani-line,
.ani-tit1:active .ani-line {
    transform: scale3d(1, 1, 1)
}

.ani-tit1:hover .ani-line.-right,
.ani-tit1:active .ani-line.-right {
    transition: transform .1s cubic-bezier(1, 0, .65, 1.01) .2s;
    transform-origin: bottom
}

.ani-tit1:hover .ani-line.-top,
.ani-tit1:active .ani-line.-top {
    transition: transform .08s linear .4s;
    transform-origin: right
}

.ani-tit1:hover .ani-line.-left,
.ani-tit1:active .ani-line.-left {
    transition: transform .08s linear .48s;
    transform-origin: top
}

.ani-tit1:hover .ani-line.-bottom,
.ani-tit1:active .ani-line.-bottom {
    transition: transform .5s cubic-bezier(0, .53, .29, 1) .56s;
    transform-origin: left
}

@keyframes svg_circle_r64 {
    0% {
        stroke-dashoffset: 200
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes svg_001_001_2 {
    0% {
        stroke-dashoffset: 10
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes svg_001_001_4 {
    0% {
        stroke-dashoffset: 20
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes svg_001_001_6 {
    0% {
        stroke-dashoffset: 60
    }

    100% {
        stroke-dashoffset: 0
    }
}

.svg-001_001 .st0 {
    fill: none
}

.svg-001_001 .st3 {
    transition: all 3s;
    stroke-dasharray: 200, 200;
    stroke-dashoffset: 0
}

.svg-001_001:hover .st3 {
    animation: svg_circle_r64 6s
}

.svg-001_001 .st2 {
    transition: all 3s;
    stroke-dasharray: 10, 10;
    stroke-dashoffset: 0
}

.svg-001_001:hover .st2 {
    animation: svg_001_001_2 7s
}

.svg-001_001 .st1 {
    fill: none;
    stroke: #000000;
    stroke-width: .5;
    stroke-miterlimit: 10
}

.svg-001_001 .st2 {
    fill: none;
    stroke: #E02F3A;
    stroke-width: .5;
    stroke-linecap: round;
    stroke-miterlimit: 10
}

#svg-001_002 .st0 {
    fill: none;
    stroke: #000000;
    stroke-width: .5;
    stroke-miterlimit: 10
}

#svg-001_002 .st1 {
    fill: none;
    stroke: #E02F3A;
    stroke-width: .5;
    stroke-miterlimit: 10
}

#svg-001_002 .st2 {
    fill: none;
    stroke: #E02F3A;
    stroke-width: .5;
    stroke-linecap: round;
    stroke-miterlimit: 10
}

#svg-001_002 .st3 {
    fill: none;
    transition: all 3s;
    stroke: #000000;
    stroke-dasharray: 200, 200;
    stroke-dashoffset: 0;
    stroke-width: .5;
    stroke-linecap: round;
    stroke-miterlimit: 10
}

#svg-001_002:hover .st3 {
    animation: svg_circle_r64 6s
}

.svg-001_004 .st2 {
    stroke-dasharray: 20, 20
}

.svg-001_006 .st1,
.svg-001_006 .st2 {
    stroke-dasharray: 60, 60
}

@keyframes myCircle {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

@keyframes myDot {
    from {
        top: 300px
    }

    to {
        top: 60px;
        opacity: .1
    }
}

section .t-title {
    text-align: center
}

section .t-title h1 {
    font-size: 30px;
    color: #333;
    margin-bottom: 0;
    margin: 0;
    padding-top: 25px
}

section .t-title h3 {
    font-size: 16px;
    color: #999;
    margin-top: 0
}

section p {
    word-wrap: break-word
}

section .t-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px
}

section .t-btn {
    margin-top: 20px;
    display: table;
    background-color: #ef2a3a;
    color: white;
    padding: 5px 5px
}

section .t-card {
    display: table-cell;
    text-align: center
}

.t-banner {
    position: relative
}

.t-banner .t-wrapper {
    position: relative;
    max-width: 1200px;
    height: 100%;
    padding: 0 10px;
    margin: 0 auto;
    -webkit-box-sizing: border-box
}

.t-banner .t-wrapper .t-banner-txt {
    display: table-cell;
    max-width: 500px;
    height: 500px;
    vertical-align: middle
}

.t-banner .t-wrapper .t-banner-txt h1 {
    margin: 0;
    font-size: 30px
}

.t-banner .bg-1 {
    background: url(../image/0042.png) center no-repeat
}

.t-banner .bg-2 {
    background: url(../image/0061.png) center no-repeat
}

.t-banner .bg-3 {
    background: url(../image/007.png) center no-repeat
}

.t-banner .bg-4 {
    background: url(../image/008.png) center no-repeat
}

.t-banner .swiper-pagination {
    bottom: 70px !important
}

.t-banner .swiper-pagination-bullet {
    margin: 0 8px !important;
    width: 12px;
    height: 12px
}

.t-banner .swiper-pagination-bullet-active {
    width: 12px;
    height: 12px;
    background: #ef2a3a !important
}

.t-search {
    position: relative;
    background-color: #f5f7fa;
    padding-top: 50px;
    height: 160px
}

.t-search .t-introduction {
    position: relative;
    z-index: 99
}

.t-search .t-introduction ul {
    position: absolute;
    top: -130px;
    width: 100%;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    border-collapse: collapse;
    height: 120px
}

.t-search .t-introduction ul li {
    position: relative;
    background-color: white;
    line-height: 30px;
    padding-left: 110px;
    padding-top: 30px;
    padding-bottom: 30px;
    float: left;
    width: 25%
}

.t-search .t-introduction ul li .hover {
    display: none
}

.t-search .t-introduction ul li img {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 70px;
    height: 70px
}

.t-search .t-introduction ul li h3 {
    margin: 0;
    text-align: left
}

.t-search .t-introduction ul li p {
    margin: 0;
    text-align: left;
    color: #999
}

@media screen and (max-width:990px) {
    .t-search .t-introduction ul li {
        height: 120px;
        text-align: center;
        padding-left: 0
    }

    .t-search .t-introduction ul li img {
        position: relative;
        top: -10px;
        left: 0
    }

    .t-search .t-introduction ul li h3 {
        text-align: center;
        margin-top: -25px
    }

    .t-search .t-introduction ul li p {
        display: none
    }

    .t-search .t-introduction ul li:hover img {
        position: relative;
        top: -10px;
        left: 0;
        margin: auto
    }

    .t-search .t-introduction ul li:hover h3 {
        margin-top: -15px !important
    }
}

@media screen and (max-width:650px) {
    .t-search .t-introduction ul h3 {
        font-size: 12px
    }

    .t-search .t-introduction ul img {
        left: 0;
        top: -5px !important;
        width: 55px !important;
        height: 50px !important
    }
}

.t-search .t-introduction ul li:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    height: 130px;
    top: -6px;
    left: 0;
    z-index: 99
}

.t-search .t-introduction ul li:hover .unhover {
    display: none
}

.t-search .t-introduction ul li:hover .hover {
    display: block
}

.t-search .t_search-bottom {
    position: relative;
    display: table;
    float: left;
    width: 100%
}

.t-search .t_search-bottom .search-main>* {
    *display: table-cell;
    float: left
}

.t-search .t_search-bottom .search-main h2 {
    padding: 20px 5px 0 5px;
    margin-top: 5px;
    margin-bottom: 0
}

.t-search .t_search-bottom .search-main h3 {
    padding: 5px 5px 0 5px;
    margin-bottom: 20px;
    margin-top: 0
}

.t-search .t_search-bottom .search-left {
    display: table-cell;
    width: 10%
}

.t-search .t_search-bottom .search-right {
    display: table-cell;
    float: left;
    width: 100%;
    height: 105px
}

.t-search .t_search-bottom .search-right .search-main {
    margin-top: 35px
}

.t-search .t_search-bottom .search-right .search-main .search-input {
    width: 74%;
    height: 50px;
    border-collapse: collapse
}

.t-search .t_search-bottom .search-right .search-main .search-input input {
    width: 100%;
    height: 100%
}

.t-search .t_search-bottom .search-right .search-main .search-more {
    width: 13%;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
    border: 1px solid #ddd;
    background: #fff;
    height: 50px;
    border-collapse: collapse
}

.t-search .t_search-bottom .search-right .search-main .search-more>* {
    line-height: 50px
}

.t-search .t_search-bottom .search-right .search-main .search-btn {
    width: 13%;
    min-width: 80px;
    height: 50px
}

.t-search .t_search-bottom .search-right .search-main .search-btn button {
    color: white;
    font-size: 16px;
    width: 100%;
    height: 100%;
    background-color: #ef2a3a;
    border: 1px solid #ef2a3a;
    box-shadow: 0 10px 20px 0 rgba(239, 35, 54, 0.2)
}

.t-search .t_search-bottom .search-right .t-more {
    position: relative;
    display: none;
    width: 87%;
    z-index: 99
}

.t-search .t_search-bottom .search-right .t-more .t-more-info {
    margin-top: 87px;
    background: #edf1f7
}

@media screen and (max-width:770px) {
    .t-search .t_search-bottom .search-left {
        display: none
    }

    .t-search .t_search-bottom .search-main {
        display: flex
    }

    .t-search .t_search-bottom .t-more-info {
        margin-top: -13px !important
    }

    .t-search .t_search-bottom .t-more {
        width: 100% !important
    }
}

.t-product {
    position: relative
}

.t-product .t-product-content {
    display: table;
    width: 100%;
    margin-bottom: 40px
}

.t-product .t-product-content gap {
    width: 35px;
    display: table-cell;
    vertical-align: middle
}

.t-product .t-product-content .t-product-table {
    display: table-cell;
    text-align: center
}

.t-product .t-product-content .t-product-table .t-item {
    border: 1px solid #eee
}

.t-product .t-product-content .t-product-table .t-item .t-tit {
    height: 80px;
    background: chocolate;
    padding-top: 10px
}

.t-product .t-product-content .t-product-table .t-item .tit-bg1 {
    background: url(../image/tech-06.png) right no-repeat, #f5f7fa
}

.t-product .t-product-content .t-product-table .t-item .tit-bg2 {
    background: url(../image/tech-07.png) right no-repeat, #f5f7fa
}

.t-product .t-product-content .t-product-table .t-item .tit-bg3 {
    background: url(../image/tech-08.png) right no-repeat, #f5f7fa
}

.t-product .t-product-content .t-product-table .t-item .t-product-tr>* {
    display: table;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
    height: 100px
}

.t-product .t-product-content .t-product-table .t-item .t-product-tr>* .pro-item {
    vertical-align: middle;
    width: 33.33%;
    display: table-cell;
    border-spacing: 10px
}

.t-product .t-product-content .t-product-table .t-item .t-product-tr>* .pro-item .pro-img {
    position: relative;
    height: 70px;
    width: 70px;
    margin: auto
}

.t-product .t-product-content .t-product-table .t-item .t-product-tr>* .pro-item .pro-img>img {
    position: absolute;
    vertical-align: middle;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.t-product .t-product-content .t-product-table .t-item .t-product-tr>* .pro-item:hover .pro-img::after {
    position: absolute;
    margin: auto;
    height: 70px;
    width: 70px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../image/turning-icon.png) no-repeat center;
    content: "";
    animation: myCircle 2s infinite ease
}

@media screen and (max-width:990px) {
    .t-product .t-product-content gap {
        display: none
    }

    .t-product .t-product-content .t-product-table {
        display: block;
        margin-top: 20px
    }
}

.t-solution {
    position: relative;
    background-color: #121631;
    height: 550px
}

.t-solution h1 {
    padding-top: 25px;
    color: #fff !important
}

.t-solution .t-title {
    margin-bottom: 20px
}

.t-solution .t-solution-content .t-solution-table {
    display: table;
    width: 100%
}

.t-solution .t-solution-content .t-solution-table .t-card {
    z-index: 99;
    cursor: pointer;
    position: relative;
    width: 20%;
    height: 0;
    transition: height 1s linear
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item {
    position: relative;
    text-align: center;
    width: 100%
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .outer {
    margin-top: 70px;
    margin-bottom: 50px
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .outer img {
    padding-top: 20px
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .outer hr {
    margin-top: 30px;
    width: 20px;
    border-color: #ef2a3a
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .outer h2 {
    color: #FFF
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .inner {
    display: none;
    max-width: 240px;
    text-align: center
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .inner p {
    max-width: 160px;
    word-wrap: break-word
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .inner .t-btn {
    padding: 5px 10px;
    margin: auto
}

.t-solution .t-solution-content .t-solution-table .t-card .t-item .inner .t-btn+a {
    line-height: 50px
}

.t-solution .t-solution-content .t-solution-table .t-card:hover {
    background: linear-gradient(#1f2846, #131733);
    opacity: .8;
    height: 400px
}

.t-solution .t-solution-content .t-solution-table .t-card:hover .outer {
    position: absolute;
    top: -20px;
    width: 100%;
    margin-top: 70px;
    margin-bottom: 10px
}

.t-solution .t-solution-content .t-solution-table .t-card:hover .outer hr {
    display: none
}

.t-solution .t-solution-content .t-solution-table .t-card:hover .inner {
    position: absolute;
    top: 180px;
    width: 100%;
    display: block
}

@media screen and (max-width:770px) {
    .t-solution .t-solution-content .outer img {
        height: 60px
    }
}

.t-solution .t-product-bg {
    z-index: 1;
    position: absolute;
    height: 550px;
    width: 100%;
    top: 0;
    background: url(../image/030.png) no-repeat center bottom;
    overflow: hidden
}

.t-solution .t-product-bg .pro-bg {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 400px;
    overflow: hidden
}

.t-solution .t-product-bg .pro-bg img {
    bottom: -20px;
    position: absolute;
    animation: myDot infinite 10s linear
}

.t-advantage {
    background: #dee6ee;
    height: 460px
}

.t-advantage .t-advantage-content .t-advantage-table {
    display: table;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08)
}

.t-advantage .t-advantage-content .t-advantage-table .t-card {
    padding: 50px 0;
    width: 25%
}

.t-advantage .t-advantage-content .t-advantage-table .t-card .t-item p {
    max-width: 180px
}

@media screen and (max-width:770px) {
    .t-advantage .t-advantage-content .t-advantage-table p {
        display: none
    }
}

.t-partner .t-cards {
    display: table;
    width: 100%;
    margin: 40px 0
}

.t-partner .t-cards .t-item {
    display: table-cell;
    width: 20%;
    text-align: center
}

.t-partner .t-cards .t-item img {
    width: 120px
}

@media screen and (max-width:770px) {
    .t-partner .t-cards .t-item img {
        width: 80px
    }
}

@media screen and (max-width:500px) {
    .t-partner .t-cards .t-item img {
        width: 60px
    }
}

.t-active {
    background: #f6f6f7;
    height: 460px
}

.t-active .t-active-content {
    margin-top: 30px
}

.t-active .t-active-content .t-active-table {
    margin-left: -10px;
    margin-right: -10px
}

.t-active .t-active-content .t-active-table .t-card {
    float: left;
    width: 33.33333333%;
    padding-left: 10px;
    padding-right: 10px
}

.t-active .t-active-content .t-active-table .t-card .t-item>div>div {
    text-align: left
}

.t-active .t-active-content .t-active-table .t-card .t-item>div>div .i-left {
    background: #e3e9f2;
    padding: 4px 15px;
    border-radius: 5px
}

.t-active .t-active-content .t-active-table .t-card .t-item>div>div .i-right {
    float: right
}

.t-active .t-active-content .t-active-table .t-card .t-item img {
    width: 100%;
    margin-top: 10px
}

.t-active .t-active-content .t-active-table .t-card .t-item .t-act-text {
    width: 100%
}

.t-active .t-active-content .t-active-table .t-card .t-item .t-act-text a {
    padding: 0 !important;
    background: none !important
}

@media screen and (max-width:770px) {
    .t-active {
        height: 350px
    }
}

@media screen and (max-width:650px) {
    .t-active {
        height: 320px
    }
}

.t-register {
    background: url(../image/031.png) no-repeat center;
    height: 180px
}

.t-register .t-register-buttom {
    text-align: center;
    margin-top: 30px
}

.t-register .t-register-buttom a {
    color: #FFF;
    padding: 10px 20px;
    background-color: #ef2a3a;
    border-radius: 20px
}

.header .bar {
    background: #222121
}

.header .bar>.wrapper {
    position: relative
}

.header .bar .inner {
    height: 62px;
    display: table;
    width: 100%
}

.header .bar .inner>* {
    display: table-cell;
    vertical-align: middle
}

.header .bar .inner>gap {
    width: 6px
}

.header .bar .inner>* {
    white-space: nowrap
}

.header .bar .inner img {
    display: block;
    padding: 3px 0
}

.header .bar .inner .burger-menu {
    width: 40px;
    display: none
}

@media (max-width:768px) {
    .header .bar .inner .burger-menu {
        display: table-cell
    }
}

.header .bar .inner .burger-menu:hover {
    cursor: pointer
}

.header .bar .inner .burger-menu .burger-btn {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 0 0;
    float: right
}

.header .bar .inner .burger-menu .burger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
    -webkit-transform-origin: 20px;
    transform-origin: 20px;
    transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s
}

.header .bar .inner .burger-menu .burger-btn.open span:nth-child(1) {
    opacity: 1;
    transform: rotate(-45deg)
}

.header .bar .inner .burger-menu .burger-btn.open span:nth-child(2) {
    width: 0;
    max-width: 0;
    opacity: 0;
    transform: rotate(0);
    transition: width .5s
}

.header .bar .inner .burger-menu .burger-btn.open span:nth-child(3) {
    opacity: 1;
    transform: rotate(45deg)
}

.header .bar .inner .logo>div:last-child img {
    fill: #fff
}

.header .bar .inner .logged {
    position: relative
}

.header .bar .inner .logged .name {
    text-align: right
}

.header .bar .inner .logged .drop {
    display: none;
    position: absolute;
    right: 0;
    top: 45px;
    padding-bottom: 4px
}

.header .bar .inner .logged .drop ul {
    position: relative;
    margin: 0;
    width: 100%;
    z-index: 2
}

.header .bar .inner .logged .drop ul li {
    text-align: right;
    padding: 4px 18px;
    font-size: 13px
}

.header .bar .inner .logged .drop .bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: #222121;
    opacity: .95
}

.header .bar .inner .logged:hover {
    cursor: pointer
}

.header .bar .inner .logged:hover .drop {
    display: block
}

.header .bar .inner .menu table {
    margin: auto;
    height: 100%
}

.header .bar .inner .menu table td {
    padding: 0 12px;
    position: relative
}

.header .bar .inner .menu table td::after {
    content: "";
    height: 3px;
    position: absolute;
    width: 0;
    background-color: #ef2a3a;
    bottom: -2px;
    left: 0;
    -webkit-transition: width ease .6s;
    -moz-transition: width ease .6s;
    -ms-transition: width ease .6s;
    -o-transition: width ease .6s;
    transition: width ease .6s
}

.header .bar .inner .menu table td:hover::after {
    width: 100%
}

.header .bar .inner .menu table td:hover a {
    color: #ef2a3a
}

.header .bar .inner .hotline {
    width: 220px
}

.header .bar .inner .hotline span {
    position: relative;
    width: 210px;
    display: block
}

.header .bar .inner .hotline span:after {
    position: absolute;
    top: -12px;
    right: -2px;
    content: "";
    font-size: 12px;
    display: block;
    width: 53px;
    height: 16px;
    background: url(../image/hotline-badge.png)
}

.header .bar .inner .cart {
    text-align: center;
    width: 52px
}

.header .bar .inner .log {
    text-align: center;
    width: 48px
}

.header .bar .inner .reg {
    background: #ef2a3a;
    color: #fff;
    text-align: center;
    width: 60px
}

.header .bar .inner .log2,
.header .bar .inner .reg2,
.header .bar .inner .slogan {
    display: none
}

.header.open .burger-menu .burger-btn span:nth-child(1) {
    opacity: 1;
    transform: rotate(-45deg)
}

.header.open .burger-menu .burger-btn span:nth-child(2) {
    width: 0
}

.header.open .burger-menu .burger-btn span:nth-child(3) {
    opacity: 1;
    transform: rotate(45deg)
}

.header-gap {
    height: 61px
}

.browser-top {
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20001
}

@media screen and (max-width:1350px) {
    .browser-top .sidetools-wrap {
        right: 75px
    }
}

@media screen and (max-width:768px) {
    .browser-top .sidetools-wrap {
        margin: -10px
    }
}

.browser-top .sidetools-wrap .sidetools {
    position: fixed;
    width: 70px;
    border-collapse: separate;
    border-spacing: 10px;
    color: #666;
    z-index: 9999;
    transition: opacity 5s
}

.browser-top .sidetools-wrap .sidetools img {
    display: block;
    margin: auto
}

.browser-top .sidetools-wrap .sidetools .item {
    position: relative;
    background: #8e8e8e;
    text-align: center;
    width: 100%;
    min-height: 44px;
    margin-bottom: 6px;
    padding: 10px 0
}

.browser-top .sidetools-wrap .sidetools .item img:only-child {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.browser-top .sidetools-wrap .sidetools .item p {
    display: inline-block;
    color: #fff;
    text-align: justify;
    margin: 0
}

.browser-top .sidetools-wrap .sidetools .item:hover {
    cursor: pointer
}

@media screen and (max-width:768px) {
    .browser-top .sidetools-wrap .sidetools .item.QQ-btn {
        display: none !important
    }
}

@media screen and (min-width:769px) {
    .browser-top .sidetools-wrap .sidetools .item.QQ-btn {
        background: #ef2a3a;
        padding: 8px 0 4px;
        height: auto !important;
        box-shadow: 0 1px 5px #ef2a3a;
        border-radius: 5px;
        top: -96px
    }

    .browser-top .sidetools-wrap .sidetools .item.QQ-btn p {
        font-size: 14px;
        margin-top: 6px
    }
}

.browser-top .sidetools-wrap .sidetools .item.WX-btn {
    top: -95px;
    background: #fff;
    box-shadow: 0 0 10px #facace
}

.browser-top .sidetools-wrap .sidetools .item.WX-btn p {
    color: #333
}

.browser-top .sidetools-wrap .sidetools .item.top-btn {
    top: 30px;
    background-color: #434343;
    opacity: .5
}

.browser-top .sidetools-wrap .sidetools .item.top-btn:hover {
    opacity: .8
}

.browser-top .sidetools-wrap .sidetools .item.getsolution-btn {
    background: #fff;
    box-shadow: 0 0 10px #facace;
    line-height: 16px;
    border-radius: 5px;
    top: 160px
}

.browser-top .sidetools-wrap .sidetools .item.getsolution-btn img {
    position: relative;
    z-index: 10
}

.browser-top .sidetools-wrap .sidetools .item.getsolution-btn p {
    color: #333;
    margin-top: 5px
}

@media screen and (max-width:768px) {
    .browser-top .sidetools-wrap .sidetools .item.getsolution-btn {
        display: none !important
    }
}

.browser-top .sidetools-wrap .sidetools .item.QRcode-btn {
    display: none
}

.browser-top .sidetools-wrap .sidetools .item.hotline-btn {
    display: none
}

.browser-top .sidetools-wrap .sidetools .pop-wx {
    position: absolute;
    right: 80px;
    bottom: 135px;
    background: #fff;
    -webkit-box-shadow: 0 0 14px #bbb;
    box-shadow: 0 0 14px #bbb;
    padding: 10px;
    width: 150px;
    height: 150px
}

.browser-top .sidetools-wrap .sidetools .pop-wx img {
    width: 100%;
    height: 100%
}

@media screen and (max-width:768px) {
    .browser-top .sidetools-wrap .sidetools .pop-wx {
        width: 100%;
        margin: auto;
        bottom: 50px;
        left: 0;
        right: 0
    }

    .browser-top .sidetools-wrap .sidetools .pop-wx img {
        width: auto
    }
}

.browser-top .sidetools-wrap .sidetools .pop-wxcode {
    position: absolute;
    right: 80px;
    bottom: 40px;
    background: #fff;
    -webkit-box-shadow: 0 0 14px #bbb;
    box-shadow: 0 0 14px #bbb;
    padding: 5px 10px 10px;
    width: 150px;
    height: 175px;
    text-align: center
}

.browser-top .sidetools-wrap .sidetools .pop-wxcode img {
    width: 100%
}

.browser-top .sidetools-wrap .sidetools .pop-wxcode span {
    font-size: 13px
}

.browser-top .sidetools-wrap .sidetools .pop-out {
    position: absolute;
    right: 80px;
    background: #fff;
    -webkit-box-shadow: 0 0 14px #bbb;
    box-shadow: 0 0 14px #bbb;
    display: none
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list {
    padding: 20px 30px 30px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list>h3 {
    font-weight: bold;
    margin: 24px 0 10px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .head {
    white-space: nowrap;
    border-bottom: 1px solid #ddd;
    margin: -10px -30px;
    padding: 10px 30px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .head .one-row {
    border-collapse: collapse
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .head .one-row i {
    font-size: 50px;
    display: block;
    line-height: 50px;
    width: 50px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .head .one-row h3 {
    margin: 0;
    font-size: 16px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .head .one-row b {
    color: #ef2a3a;
    font-size: 18px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .pro {
    margin-bottom: 8px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .pro .intro {
    white-space: nowrap;
    background: #f3f3f3;
    margin-bottom: 6px;
    padding: 2px 6px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .pro .intro::before {
    content: "●";
    color: #ef2a3a;
    padding-right: 5px;
    font-size: 14px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .pro .QQ-table {
    white-space: nowrap
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .pro .QQ-table a {
    display: inline-block;
    height: 23px;
    width: 20px;
    background: url(../image/qq.png) center no-repeat
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .pro .QQ-table a:not(:last-child) {
    margin-right: 20px
}

@media screen and (max-height:915px) {
    .browser-top .sidetools-wrap .sidetools .pop-out.QQ-list .pro {
        margin-bottom: 0
    }
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short {
    padding: 16px 24px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short .head {
    display: none !important
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short .head+h3 {
    margin-top: 0
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short .pro {
    margin-bottom: 8px;
    margin-bottom: 0
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short .pro .intro {
    font-size: 13px;
    margin-bottom: 6px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short .pro .intro::before {
    font-size: 12px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short .pro .QQ-table a {
    height: 18px;
    width: 16px;
    background-size: 16px 18px
}

.browser-top .sidetools-wrap .sidetools .pop-out.QQ-list.short .pro .QQ-table a:not(:last-child) {
    margin-right: 16px
}

.browser-top .sidetools-wrap .sidetools .pop-out.getsolution {
    width: 360px;
    top: -50px;
    padding: 30px
}

.browser-top .sidetools-wrap .sidetools .pop-out.getsolution h3 {
    font-size: 24px;
    color: #333;
    text-align: center;
    border-bottom: 1px #ddd dashed;
    margin-top: 0;
    padding-bottom: 16px;
    margin-bottom: 16px
}

.browser-top .sidetools-wrap .sidetools .pop-out.getsolution h3 small {
    display: block;
    font-size: 60%;
    color: #999;
    margin-top: 10px
}

.browser-top .sidetools-wrap .sidetools .pop-out.getsolution .btn {
    width: 100%
}

@media screen and (max-width:768px) {
    .browser-top .sidetools-wrap .sidetools .pop-out.getsolution {
        display: none !important
    }
}

.browser-top .sidetools-wrap .sidetools .pop-out.QR-code {
    padding: 2px;
    top: -24px
}

@media screen and (max-width:768px) {
    .browser-top .sidetools-wrap .sidetools .pop-out.QR-code {
        display: none !important
    }
}

@media screen and (min-width:cal(768px+1)) {
    .browser-top .sidetools-wrap .sidetools {
        top: 42%
    }
}

@media screen and (max-width:768px) {
    .browser-top .sidetools-wrap .sidetools {
        bottom: 0 !important;
        left: 0;
        display: table;
        width: 100%;
        background: #eee;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd
    }

    .browser-top .sidetools-wrap .sidetools .item {
        display: table-cell !important;
        width: 50% !important;
        min-width: 50% !important;
        padding: 4px 0
    }

    .browser-top .sidetools-wrap .sidetools .item.hotline-btn {
        background: transparent !important;
        border: 1px solid #ef2a3a
    }

    .browser-top .sidetools-wrap .sidetools .item.hotline-btn p {
        color: #ef2a3a
    }

    .browser-top .sidetools-wrap .sidetools .item.QQ-btn,
    .browser-top .sidetools-wrap .sidetools .item.WX-btn {
        background: #ef2a3a !important;
        top: 0
    }

    .browser-top .sidetools-wrap .sidetools .item.QQ-btn p,
    .browser-top .sidetools-wrap .sidetools .item.WX-btn p {
        color: #fff
    }

    .browser-top .sidetools-wrap .sidetools .item img {
        display: none
    }

    .browser-top .sidetools-wrap .sidetools .QQ-list {
        top: auto;
        right: 0;
        left: 0;
        width: 100%;
        bottom: 51px !important;
        top: auto !important;
        padding: 20px 10px 4px;
        box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd
    }

    .browser-top .sidetools-wrap .sidetools .QQ-list .head {
        display: none
    }

    .browser-top .sidetools-wrap .sidetools .QQ-list .head+h3 {
        display: none
    }

    .browser-top .sidetools-wrap .sidetools .QRcode-btn,
    .browser-top .sidetools-wrap .sidetools .top-btn {
        display: none !important
    }
}

.lxb-container {
    left: auto !important;
    right: 100px !important;
    box-sizing: border-box !important;
    height: 120px !important;
    width: 0 !important;
    overflow: hidden !important;
    background: url(../image/sidetools05.png) no-repeat center !important;
    background-size: cover !important;
    padding-top: 10px !important
}

.lxb-container .temp {
    box-sizing: border-box !important;
    position: absolute !important
}

.lxb-container .custom-text {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 10px !important;
    height: 40px !important;
    width: 100% !important;
    background: url(../image/sidetools04.png) center no-repeat !important
}

.lxb-container .lxb-hide-btn {
    top: 12px !important;
    left: 12px !important;
    display: none !important
}

.lxb-container .lxb-cb-input {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 62px !important;
    left: 12px !important;
    display: inline-block !important;
    padding: 0 16px !important;
    width: 180px !important;
    height: 38px !important;
    line-height: 36px !important;
    color: #666 !important;
    outline: none !important
}

.lxb-container .lxb-cb-input-btn {
    box-sizing: border-box !important;
    position: absolute !important;
    font-family: "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif !important;
    top: 62px !important;
    left: 196px !important;
    display: inline-block !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
    border: 1px solid #ef2a3a !important;
    background-color: #ef2a3a !important;
    height: 38px !important;
    line-height: 36px !important;
    width: 120px !important;
    transition: background .3s, color .3s !important;
    color: #fff !important
}

.lxb-container .lxb-cb-input-btn:hover {
    color: #fff !important;
    background-color: #f24651 !important;
    border-color: #f24651 !important
}

.lxb-container .lxb-cb-tip {
    box-sizing: border-box !important;
    position: absolute !important;
    left: 0 !important;
    top: 124px !important;
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    background: #f5f5f5 !important
}

.lxb-container .lxb-cb-tip .lxb-cb-tip-con {
    width: 100% !important;
    font-family: "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif !important
}

.lxb-container .lxb-cb-tip .lxb-cb-tip-con .error-tip {
    font-family: "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif !important;
    margin: 0 !important
}

.lxb-container .lxb-cb-tip .lxb-cb-tip-con .success-tip-img {
    background-size: 80px 62px !important;
    width: 80px !important;
    height: 62px !important
}

.lxb-container .lxb-cb-tip .lxb-cb-tip-con .success-tip-txt {
    font-family: "roboto", "PingFang SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", Helvetica, Arial, sans-serif !important
}

.lxb-container .lxb-cb-tip .lxb-cb-tip-close {
    display: none !important
}

@media screen and (max-width:768px) {
    .lxb-container {
        display: none !important
    }
}

.lxb-close-btn {
    display: block !important;
    background-image: none !important;
    box-sizing: border-box !important;
    height: 105px !important;
    width: 70px !important;
    content: "免费通话" !important;
    border-radius: 5px;
    color: #333 !important;
    border: 1px solid #fff !important;
    box-shadow: 0 0 10px #facace;
    background: url(../image/sidetools12.png) center no-repeat, #fff !important;
    left: auto !important
}

@media screen and (max-width:768px) {
    .lxb-close-btn {
        display: none !important
    }
}

#side-consult-form .modal-body,
.common-consult-form .modal-body {
    padding: 0
}

#side-consult-form .modal-title,
.common-consult-form .modal-title {
    width: 100%;
    padding: 20px;
    background: url(../image/side-consult-bg.jpg) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 30px
}

#side-consult-form .submit-table,
.common-consult-form .submit-table {
    padding: 25px 40px 40px
}

#side-consult-form .sub-item,
.common-consult-form .sub-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px
}

#side-consult-form .sub-item .form-control,
.common-consult-form .sub-item .form-control {
    border-color: #d4d8de;
    height: 36px;
    border-radius: 3px;
    box-shadow: none
}

#side-consult-form .sub-item select,
.common-consult-form .sub-item select {
    border-color: #d4d8de;
    height: 36px;
    border-radius: 3px;
    background-color: #f6f9fc
}

#side-consult-form .sub-item p,
.common-consult-form .sub-item p {
    text-align: left;
    padding-right: 10px;
    flex: 0 0 90px
}

#side-consult-form .btn-submit,
.common-consult-form .btn-submit {
    width: auto;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    margin: auto;
    min-width: 110px;
    box-shadow: 0 10px 20px #fac3c7
}

@media (min-width:768px) {

    #side-consult-form .modal-dialog,
    .common-consult-form .modal-dialog {
        width: 530px
    }
}

.dropmenu {
    display: none;
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 20000
}

.dropmenu ::-webkit-scrollbar {
    width: 5px;
    background-color: #626262
}

.dropmenu .one-row {
    vertical-align: top
}

.dropmenu .one-row>div {
    vertical-align: top
}

.dropmenu .menu-wrap {
    position: relative;
    padding: 0 20px 0 40px;
    overflow: hidden;
    max-height: 400px;
    overflow: auto;
    background: rgba(34, 33, 33, 0.95)
}

.dropmenu .menu-wrap h1 {
    color: #fefefe;
    font-size: 16px;
    margin: 0 0 10px;
    white-space: nowrap;
    padding: 10px 0 10px 20px
}

.dropmenu .menu-wrap h1:hover {
    cursor: pointer
}

.dropmenu .menu-wrap span {
    color: #fefefe;
    font-size: 16px;
    margin: 0 0 10px;
    display: block;
    white-space: nowrap;
    padding: 10px 0 10px 20px
}

.dropmenu .menu-wrap span:hover {
    cursor: pointer
}

.dropmenu .menu-wrap .current {
    background: #ef2a3a
}

.dropmenu .menu-wrap .current2 {
    background: #ef2a3a
}

.dropmenu .menu-wrap h2 {
    color: #dddddd;
    font-size: 14px;
    margin: 0;
    padding: 4px 0;
    white-space: nowrap
}

.dropmenu .menu-wrap a {
    color: #888888;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap
}

.dropmenu .menu-wrap a:hover {
    color: #ef2a3a
}

.dropmenu .menu-wrap .partner .img-gray {
    display: block
}

.dropmenu .menu-wrap .partner .img-colour {
    display: none
}

.dropmenu .menu-wrap .partner img {
    background-color: #3E3E3E;
    border: 1px #2D2C2C solid;
    width: 100%
}

.dropmenu .menu-wrap .partner .col-11:hover .img-gray {
    display: none
}

.dropmenu .menu-wrap .partner .col-11:hover .img-colour {
    display: block
}

.dropmenu .menu-wrap .head-nav-ul {
    width: 15%;
    border-right: 1px rgba(226, 243, 251, 0.2) solid;
    vertical-align: top
}

.dropmenu .menu-wrap .head-qq {
    color: #999;
    width: 480px;
    background-color: #313131;
    border: 1px #434343 solid;
    padding: 5px 20px;
    margin: 20px 0
}

.dropmenu .menu-wrap .menu {
    position: relative;
    z-index: 2;
    padding: 20px 0
}

.dropmenu .menu-wrap .menu .head-li {
    margin-bottom: 20px
}

.dropmenu .menu-wrap .menu .head-li>div {
    display: table;
    width: 100%
}

.dropmenu .menu-wrap .menu .mini-btn {
    border: #888 1px solid;
    padding: 1px 2px;
    font-size: 12px;
    border-radius: 2px
}

.dropmenu .menu-wrap .menu .mini-btn:hover {
    border-color: #ef2a3a;
    color: #ef2a3a
}

.dropmenu .menu-wrap .menu .service520 {
    border: solid 1px #434343;
    background-color: #313131;
    padding: 5px 20px;
    font-size: 12px;
    padding: 6px
}

.dropmenu .menu-wrap .menu .service520 h2 {
    margin: 0;
    line-height: 20px;
    padding: 0;
    max-width: 140px
}

.dropmenu .menu-wrap .menu .service520 p {
    max-width: 260px;
    margin: 0
}

.dropmenu .menu-wrap .menu block {
    display: block;
    height: 80px
}

.dropmenu .menu-wrap .menu .img {
    position: relative;
    width: 80px;
    height: 36px;
    background: #fff;
    text-align: center;
    margin-bottom: 8px
}

.dropmenu .menu-wrap .menu .img img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 68px;
    max-height: 32px
}

.dropmenu .menu-wrap .menu .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1
}

.dropmenu .menu-wrap .menu .private {
    background: url(../image/029.png) no-repeat center;
    background-size: cover;
    padding: 30px 35px;
    margin-top: 10px;
    max-width: 890px
}

.dropmenu .menu-wrap .menu .private h3 {
    font-size: 24px;
    color: #fff;
    margin: 0
}

.dropmenu .menu-wrap .menu .private p {
    color: #b9d1ec;
    max-width: 400px;
    margin-left: 0;
    line-height: 30px;
    padding: 10px 0
}

.dropmenu .menu-wrap .menu .private a {
    color: #ef2a3a;
    padding: 5px 20px;
    border: 1px #ef2a3a solid;
    border-radius: 20px
}

.dropmenu .menu-wrap .menu .private a:hover {
    background: #ef2a3a;
    color: #fff;
    transition: all ease .5s
}

@media screen and (max-width:768px) {
    .dropmenu .menu-wrap .menu .private {
        padding: 40px 20px
    }
}

.dropmenu .menu-wrap .menu .domain-nav {
    margin-top: 20px
}

.dropmenu .menu-wrap .menu .domain-nav gap {
    width: 20px
}

.dropmenu .menu-wrap .menu .domain-nav .item {
    position: relative;
    text-align: center;
    transition: all .2s
}

.dropmenu .menu-wrap .menu .domain-nav .item h3 {
    font-size: 16px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 6px
}

.dropmenu .menu-wrap .menu .domain .item {
    background-color: #3E3E3E;
    padding: 20px 0
}

.dropmenu .menu-wrap .menu .domain .item:hover {
    background-color: #535353;
    transition: background-color .5s
}

.dropmenu .menu-wrap .menu .email p {
    color: #fff;
    text-align: center
}

.dropmenu .menu-wrap .menu .email .email-fob {
    width: 50%;
    background: url(../image/060.png) center no-repeat;
    background-size: 100% 100%
}

.dropmenu .menu-wrap .menu .email .email-business {
    background: url(../image/061.png) center no-repeat;
    background-size: 100% 100%
}

.dropmenu .menu-wrap .menu .email .email-customize {
    background: url(../image/062.png) center no-repeat;
    background-size: 100% 100%
}

.dropmenu .menu-wrap .menu .email .item {
    padding: 30px 0
}

.dropmenu .menu-wrap .menu .email a {
    z-index: 2;
    position: relative;
    display: block
}

.dropmenu .menu-wrap .menu .email .bg {
    background: #292f4c;
    opacity: .6
}

.dropmenu .menu-wrap .menu .email .item:hover .bg {
    opacity: .8
}

.dropmenu.product .email a {
    white-space: unset
}

.dropmenu.product .menu>div {
    padding-left: 40px
}

.dropmenu.solution .head-nav-ul {
    width: 18%
}

.dropmenu.solution .head-li {
    min-height: 100px
}

.dropmenu.solution .head-qq>div {
    vertical-align: middle
}

.dropmenu.solution .menu>div {
    padding-left: 40px
}

.dropmenu.about h2:hover {
    cursor: pointer
}

.dropmenu.about .menu-wrap .menu {
    padding: 20px 0 30px 0
}

.dropmenu.about .menu-wrap .menu .service520 {
    margin-top: 8px;
    padding: 10px 15px
}

.dropmenu.about .menu-wrap .menu .service520 h2 {
    line-height: 30px
}

.dropmenu.about .menu-wrap .menu .service520 p {
    line-height: 25px
}

.dropmenu.about .head-about {
    float: left
}

.dropmenu.about .head-about p {
    color: #666
}

.dropmenu.about .head-about h2 {
    border-bottom: 1px #434343 solid;
    margin: 0 0 10px;
    padding: 10px 0
}

.dropmenu.about .head-about:not(:last-child) {
    padding-right: 35px
}

.dropmenu.about .one-row>div>div {
    width: 95px
}

@media screen and (max-width:1200px) {
    .dropmenu.about .menu-wrap .menu>div {
        padding-left: 0
    }

    .dropmenu.about .head-about:not(:last-child) {
        padding-right: 20px
    }
}

@media screen and (max-width:900px) {
    .dropmenu.about .head-about:not(:last-child) {
        padding-right: 0
    }
}

.home-dropmenu .menu-wrap {
    padding: 0 20px 20px 0
}

.home-dropmenu .menu-wrap h1 {
    padding: 10px 0 10px;
    border-bottom: 1px #434343 solid
}

.home-dropmenu .menu-wrap .hot-word:hover {
    position: relative
}

.home-dropmenu .menu-wrap .hot-word:hover::after {
    -webkit-animation: headarrow 1.5s linear infinite;
    animation: headarrow 1.5s linear infinite
}

.home-dropmenu .head-arrow {
    position: relative
}

.home-dropmenu .head-arrow::after {
    position: absolute;
    display: inline-block;
    content: "";
    width: 15px;
    height: 12px;
    top: 15px;
    right: 0;
    background: url(../image/arrow3.png) no-repeat center
}

.home-dropmenu .row .domain-reg {
    padding-left: 40px
}

@media screen and (max-width:1200px) {
    .home-dropmenu .row .col-3 {
        width: 100%
    }

    .home-dropmenu .row .domain-reg {
        padding-left: 0
    }
}

.home-dropmenu .customized {
    width: 20%
}

.home-dropmenu .customized>div {
    padding: 15px;
    background-color: #313131;
    border: 1px #434343 solid
}

.home-dropmenu .customized>div h1 {
    border-bottom: none;
    padding: 0
}

.home-dropmenu .customized>div a {
    white-space: normal
}

.home-dropmenu .customized>div .btn {
    margin-top: 10px
}

@media screen and (max-width:1200px) {
    .home-dropmenu.product .one-row>div {
        width: 20%
    }
}

.home-dropmenu.datacenter.menu-wrap {
    width: 150px
}

.home-dropmenu.datacenter .one-row {
    width: 90%;
    margin: auto;
    text-align: center
}

@media screen and (max-width:992px) {
    .home-dropmenu .menu-wrap .menu>div {
        padding-left: 20px
    }
}

.burgermenu {
    display: none
}

@media screen and (max-width:768px) {
    .burgermenu {
        position: fixed;
        width: 100%;
        margin: auto;
        z-index: 20000
    }

    .burgermenu.show {
        display: block
    }

    .burgermenu .menu-wrap {
        position: relative;
        padding: 10px 0 0
    }

    .burgermenu .menu-wrap .menu {
        position: relative;
        z-index: 2;
        color: #888;
        max-height: calc(70vh);
        overflow: auto
    }

    .burgermenu .menu-wrap .menu .user-bar {
        background: #343434;
        color: #fff;
        padding: 6px 12px;
        margin: 0 10px 20px;
        color: #999;
        font-size: 16px
    }

    .burgermenu .menu-wrap .menu .user-bar a {
        color: #999;
        border-color: #fff
    }

    .burgermenu .menu-wrap .menu .user-bar a:not(:last-child) {
        margin-right: 12px
    }

    .burgermenu .menu-wrap .menu .menu-tree {
        margin: 0;
        border-top: 1px solid #444
    }

    .burgermenu .menu-wrap .menu .menu-tree>li>ul>a {
        padding-left: 30px
    }

    .burgermenu .menu-wrap .menu .menu-tree>li>ul>li>a {
        padding-left: 30px
    }

    .burgermenu .menu-wrap .menu .menu-tree>li>ul>li>ul>a {
        padding-left: 50px
    }

    .burgermenu .menu-wrap .menu .menu-tree>li>ul>li>ul>li>a {
        padding-left: 50px
    }

    .burgermenu .menu-wrap .menu .menu-tree>li>ul>li>ul>li>ul>a {
        padding-left: 70px
    }

    .burgermenu .menu-wrap .menu .menu-tree>li>ul>li>ul>li>ul>li>a {
        padding-left: 70px
    }

    .burgermenu .menu-wrap .menu .menu-tree a {
        display: block;
        line-height: 46px;
        border-bottom: 1px solid #444;
        padding: 0 10px;
        color: #fff
    }

    .burgermenu .menu-wrap .menu .menu-tree ul {
        height: 0;
        max-height: 0;
        overflow: hidden;
        transition: height .5s
    }

    .burgermenu .menu-wrap .menu .menu-tree li {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: relative
    }

    .burgermenu .menu-wrap .menu .menu-tree li::after {
        position: absolute;
        content: "\e6c4";
        right: 10px;
        top: 8px;
        font-size: 22px;
        color: #666;
        transition: all .5s
    }

    .burgermenu .menu-wrap .menu .menu-tree li.single::after {
        display: none
    }

    .burgermenu .menu-wrap .menu .menu-tree li.open::after {
        transform: rotate(180deg)
    }

    .burgermenu .menu-wrap .menu .menu-tree li.open>ul {
        height: auto;
        max-height: none
    }

    .burgermenu .menu-wrap .menu .menu-tree li a.current {
        background: #333
    }

    .burgermenu .menu-wrap .menu .hotline-wrap {
        padding: 10px
    }

    .burgermenu .menu-wrap .bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #222121;
        opacity: .95;
        z-index: 1
    }
}

.external {
    background: url(../image/popup-bg.png) center no-repeat;
    height: 445px;
    background-size: 101%
}

.external .timers span {
    font-size: 20px;
    color: aliceblue
}

.external .timers .timer {
    padding: 15px 10px;
    background: url(../image/number-bg.png) center no-repeat
}

.external .timers .tips {
    opacity: .7
}

.external>div {
    text-align: center;
    position: relative
}

.external .title-1 {
    padding-top: 30px
}

.external .title-2 {
    top: -10px
}

.external .title-3 {
    top: -60px;
    height: 150px
}

.external .title-3 .consult {
    margin: auto;
    cursor: pointer;
    display: table;
    position: relative;
    top: -75px
}

.external .title-4 {
    top: -20px
}

.external .title-4 span {
    padding: 0 10px;
    color: aliceblue;
    opacity: .7;
    font-size: 16px
}

.external .title-4::after {
    content: url(../image/right.png);
    top: -5px;
    position: relative
}

.external .title-4::before {
    content: url(../image/left.png);
    top: -5px;
    position: relative
}

.inside>div {
    padding: 0 65px
}

.inside .timers span {
    font-size: 20px;
    color: aliceblue
}

.inside .timers .timer {
    padding: 15px 10px;
    background: url(../image/number-bg.png) center no-repeat
}

.inside .timers .tips {
    opacity: .7
}

.inside .title {
    width: 100%;
    height: 103px;
    background: url(../image/popup-bg-min.png) center;
    display: table
}

.inside .title>div {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.inside .title>div .timers span {
    font-size: 14px
}

.inside .title>div .timers .timer {
    padding: 6px 4px;
    background-size: 25px;
    font-size: 16px
}

.inside .title>div .timers .tips {
    font-size: 16px
}

.inside .title .title-1 {
    width: 183px;
    padding-top: 10px
}

.inside .title .title-2 {
    width: 243px
}

.inside .qqlist {
    display: table;
    width: 100%;
    margin-top: 10px
}

.inside .qqlist>div {
    display: table-cell
}

.inside .qqlist .intro {
    white-space: nowrap;
    background: #f3f3f3;
    margin-bottom: 6px;
    padding: 2px 6px;
    font-size: 13px
}

.inside .qqlist .intro::before {
    content: "●";
    color: #ef2a3a;
    padding-right: 5px;
    font-size: 14px
}

.inside .qqlist a {
    display: inline-block;
    background: url(../image/qq.png) center no-repeat;
    height: 25px;
    width: 20px;
    background-size: 20px 23px;
    margin-right: 15px
}

.inside .qqlist .a>div {
    margin-right: 20px
}

.inside .qqlist .b>div {
    margin-left: 20px
}

.inside .qqBtn {
    padding: 15px 65px
}

.inside .qqBtn>div {
    width: 100%;
    height: 33px;
    background: #c92828;
    text-align: center
}

.inside .qqBtn>div>* {
    vertical-align: middle
}

.inside .qqBtn>div span {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 4px;
    font-family: -webkit-body;
    line-height: 33px
}

@keyframes mymove {
    from {
        top: -2px;
        opacity: .4
    }

    to {
        top: 4px;
        oopacity: 1
    }
}

.inside .qqBtn>div .arrow {
    position: relative;
    -webkit-animation: mymove 1.5s linear infinite;
    animation: mymove 1.5s linear infinite
}

.user {
    background: url(../image/001.png) bottom repeat-x;
    background-size: 1px 100%
}

.user .header .burger-menu,
.user .header .menu,
.user .header .hotline,
.user .header .reg,
.user .header .log,
.user .header .cart {
    display: none !important
}

.user .header .sidetools-wrap {
    display: none
}

.user .btn-default {
    color: #666;
    background: #eef0f4;
    border: 1px solid #eef0f4;
    margin-left: 20px
}

.user .remind-text {
    margin: 40px 0;
    text-align: center
}

.user .remind-text img {
    vertical-align: middle
}

.user .remind-text p {
    font-size: 16px;
    padding-left: 5px;
    display: inline-block
}

.user .reg-wrap,
.user .contract-wrap {
    width: 100%;
    max-width: 1000px;
    background: white;
    border: 1px solid #ddd;
    padding: 15px 80px;
    margin: 30px auto 10px
}

.user .reg-wrap h1,
.user .contract-wrap h1 {
    text-align: center
}

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

    .user .reg-wrap,
    .user .contract-wrap {
        padding: 15px
    }
}

.user .reg-wrap>div,
.user .contract>div {
    width: 100%;
    max-width: 400px;
    margin: 25px auto
}

.user .reg-wrap .form-wrap>div,
.user .contract .form-wrap>div {
    width: 33.34%
}

.user .log-wrap {
    position: relative;
    background: url(../image/0022.png) left bottom no-repeat;
    padding: 20px 10px
}

.user .log-wrap .log-form {
    position: absolute;
    top: 138px;
    right: 10px;
    width: 450px;
    background: #fff;
    padding: 10px 45px 30px;
    border: 1px solid #ddd
}

.user .log-wrap .log-form h2 {
    font-size: 24px
}

.user .log-wrap .log-form .check-form {
    margin: 25px 0
}

@media screen and (max-width:768px) {
    .user .log-wrap .log-form {
        position: static;
        width: 100%
    }
}

.user .log-wrap .log-form-remind {
    position: relative;
    top: 100px;
    min-height: 320px;
    background: #fff;
    padding: 30px 45px;
    border: 1px solid #ddd
}

.contract .header .slogan {
    display: table-cell !important
}

.register .header .log2 {
    display: table-cell !important
}

.register .float-item {
    position: relative
}

.register .s_btn .btn {
    padding: 0 40px;
    height: 40px;
    margin: 0 10px;
    line-height: 40px;
    border-radius: 3px
}

.register .discount {
    background: linear-gradient(#3364ff, #3332cc)
}

.register .discount .wrapper {
    position: relative
}

.register .discount .one-row {
    padding: 0 90px;
    min-height: 200px
}

.register .discount .one-row p {
    color: #fff;
    font-size: 18px
}

.register .discount .ticket {
    text-align: right
}

.register .discount .close {
    position: absolute;
    top: 18px;
    right: 0
}

@media screen and (max-width:1200px) {
    .register .discount .one-row {
        display: block;
        padding: 20px 10px
    }

    .register .discount .one-row>div {
        display: block;
        text-align: center
    }

    .register .discount .one-row p {
        text-align: center
    }

    .register .discount .ticket {
        text-align: left
    }
}

@media screen and (max-width:992px) {
    .register .discount .title-img {
        width: 80%
    }
}

@media screen and (max-width:480px) {
    .register .discount .ticket-img {
        width: 60%
    }
}

.SMSverification .reg-wrap {
    padding: 60px 80px;
    margin: 100px auto 100px
}

.login .header .reg2 {
    display: table-cell !important
}

.login .copyright {
    color: #aaa;
    line-height: 40px
}

.login h2 {
    text-align: center
}

.reg-success img {
    vertical-align: middle;
    padding-right: 10px
}

.reg-success .success-title h2 {
    display: inline-block;
    vertical-align: middle
}

.reg-success .success-info {
    padding: 20px 0;
    max-width: 100% !important;
    border-bottom: 1px dashed #dcdcdc
}

.reg-success .success-info .one-row>* {
    text-align: center
}

.reg-success .success-info a {
    color: #1ba0ec
}

.reg-success .success-more {
    text-align: center
}

.reg-success .success-more>div {
    text-align: center;
    margin: 40px 0 20px
}

.reg-success .success-more .btn {
    margin-bottom: 50px
}

.authentication>div {
    text-align: center
}

.authentication .authentication-form {
    height: 100%
}

.authentication p {
    text-align: center;
    color: #999
}

.authentication h1 {
    font-size: 48px
}

.authentication h2 {
    font-size: 36px;
    color: #fff;
    margin: 0;
    padding: 15px
}

.authentication h3 {
    font-size: 30px
}

.authentication p {
    font-size: 24px
}

.authentication span {
    font-size: 24px;
    margin: 0 4%
}

.authentication [type="button"] {
    -webkit-appearance: none
}

.authentication .authentication-btn {
    width: 80%;
    height: 80px;
    border-radius: 10px;
    background: #ef2a3a;
    color: #fff;
    font-size: 28px;
    border: 1px solid #ef2a3a;
    margin: 20px 0
}

.authentication .authentication-title {
    text-align: center;
    background: #333
}

.authentication .authentication-step {
    padding: 20px
}

.authentication .authentication-step img {
    width: auto
}

@media screen and (max-width:480px) {
    .authentication h1 {
        font-size: 32px
    }

    .authentication h2 {
        font-size: 24px
    }

    .authentication h3 {
        font-size: 18px
    }

    .authentication p {
        font-size: 14px
    }

    .authentication span {
        font-size: 16px
    }

    .authentication .authentication-btn {
        width: 90%;
        height: 40px;
        font-size: 18px;
        border-radius: 5px
    }
}

@media screen and (max-width:400px) {
    .authentication span {
        font-size: 14px;
        margin: 0 2%
    }
}

.authentication-start p {
    display: inline-block
}

.authentication-start img {
    width: 80%;
    margin: auto
}

.authentication-start .authentication-start-img {
    background: url(../image/authentication-start-bg.jpg) center no-repeat;
    background-size: 100% 100%;
    height: 60%;
    padding: 15% 0;
    text-align: center
}

.authentication-start .authentication-start-submit {
    text-align: center;
    padding: 0 10%
}

@media screen and (max-width:480px) {
    .authentication-start .authentication-start-img {
        padding: 20% 0
    }
}

.authentication-id {
    background: #f6f6f6
}

.authentication-id .authentication-id-upload {
    text-align: center
}

.authentication-id .authentication-id-upload .content {
    position: relative;
    width: 90%;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    background: #fff;
    margin: 0 auto 20px;
    padding: 30px 0
}

.authentication-id .authentication-id-upload .content>img:first-child {
    width: 35%;
    vertical-align: middle
}

.authentication-id .authentication-id-upload .content>img:last-child {
    width: 8%;
    vertical-align: middle
}

.authentication-id .authentication-id-upload .image-file {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.authentication-id .input {
    position: relative
}

.authentication-id .input .input-box {
    height: 60px;
    padding-left: 25%;
    border-left: none;
    border-right: none
}

.authentication-id .input .input-box-id {
    border-top: none
}

.authentication-id label:not(.next-step) {
    position: absolute;
    left: 5%;
    top: 30%;
    font-size: 18px;
    color: #333
}

.authentication-id .id-label:not(.next-step) {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.authentication-id .next-step {
    display: inline-block;
    line-height: 40px;
    height: 40px;
    pointer-events: none;
    cursor: default;
    opacity: .6
}

.authentication-id .next-step.able {
    pointer-events: inherit;
    cursor: pointer;
    opacity: 1
}

.authentication-video {
    background: #f6f6f6
}

.authentication-video .authentication-face-scan {
    background-color: #fff;
    padding: 20px 0
}

.authentication-video .authentication-face-scan img {
    width: 60%
}

@media screen and (min-width:768px) {
    .authentication-video .authentication-btn {
        margin: 50px 0
    }
}

.authentication-result .authentication-step {
    background: #f6f6f6
}

.authentication-result .authentication-result-info {
    padding-top: 10%
}

.authentication-result .authentication-result-info h2 {
    color: #333
}

.authentication-result .authentication-result-info img {
    width: 15%
}

.authentication-result .corporate-result-info {
    padding-top: 15%
}

.authentication-result .corporate-result-info img {
    width: 25%
}

.authentication-result .corporate-result-info h2 {
    color: #333
}

.order {
    background: #f1f1f1
}

.order .tit1 h1 {
    margin-top: 0
}

.order .order-wrap {
    background: #fff;
    border: 1px solid #ddd;
    padding: 0 80px;
    margin-bottom: 60px
}

.order .order-wrap .order-table {
    width: 100%
}

.order .order-wrap .order-table td {
    border-bottom: 1px solid #eee;
    padding: 20px 0
}

.order .order-wrap .order-table td:first-child {
    max-width: 100px;
    width: 100px;
    white-space: nowrap
}

.order .order-wrap .order-table td:nth-child(2) {
    width: 60%
}

.order .order-wrap .order-table td:last-child {
    padding-left: 20px
}

.order .order-wrap .alert {
    margin-top: 20px
}

.order .order-wrap .btn {
    display: block;
    width: 200px;
    margin: 20px auto 40px
}

@media screen and (max-width:768px) {
    .order .order-wrap {
        padding: 10px 20px
    }
}

@media screen and (max-width:500px) {
    .order .order-wrap .order-table td:first-child {
        max-width: 100px;
        width: 100px
    }

    .order .order-wrap .order-table td:last-child {
        display: none
    }
}

.cart {
    background: #f1f1f1
}

.cart .log-tip {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 4px 10px
}

.cart .fa {
    color: #ef2a3a
}

.cart .cart-body {
    margin-bottom: 60px;
    text-align: left
}

.cart .cart-body .table-style {
    background: #fff;
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd
}

.cart .cart-body .table-style td,
.cart .cart-body .table-style th {
    border-bottom: 1px solid #ddd;
    padding: 8px 20px
}

.cart .cart-body .table-style th {
    font-weight: normal;
    color: #999
}

.cart .cart-body .table-style b {
    font-weight: normal;
    padding-right: 4px;
    color: #333
}

.cart .cart-body .lister {
    background: #fff;
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin-bottom: 10px
}

.cart .cart-body .lister td,
.cart .cart-body .lister th {
    border-bottom: 1px solid #ddd;
    padding: 8px 20px
}

.cart .cart-body .lister th {
    font-weight: normal;
    color: #999
}

.cart .cart-body .lister b {
    font-weight: normal;
    padding-right: 4px;
    color: #333
}

.cart .cart-body .lister tbody th {
    background: #eee
}

.cart .cart-body td.check {
    width: 50px;
    text-align: center
}

.cart .cart-body .casher {
    background: #fff;
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd
}

.cart .cart-body .casher td,
.cart .cart-body .casher th {
    border-bottom: 1px solid #ddd;
    padding: 8px 20px
}

.cart .cart-body .casher th {
    font-weight: normal;
    color: #999
}

.cart .cart-body .casher b {
    font-weight: normal;
    padding-right: 4px;
    color: #333
}

.cart .cart-body .casher p {
    width: auto;
    margin: 0
}

.cart .cart-body .casher .paper {
    font-size: 12px
}

.cart .cart-body .casher .paper a {
    color: #999
}

.cart .cart-body .casher .count {
    padding-right: 0;
    padding-left: 0;
    width: 80px;
    white-space: nowrap
}

.cart .cart-body .casher .count .red {
    font-weight: bold;
    font-size: 16px
}

.cart .cart-body .casher .count p:last-child {
    color: #999
}

.cart .cart-body .casher .cash {
    width: 134px
}

.cart .cart-body .invoice {
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 8px 20px
}

.cart .cart-body .invoice>table {
    width: 100%
}

.cart .cart-body .invoice>table td {
    vertical-align: top;
    padding: 4px 0
}

.cart .cart-body .invoice>table td:first-child {
    width: 73px;
    line-height: 31px
}

.cart .cart-body .invoice .invoice-type {
    display: table;
    margin: 0;
    border-collapse: collapse
}

.cart .cart-body .invoice .invoice-type gap {
    display: table-cell;
    width: 10px
}

.cart .cart-body .invoice .invoice-type li {
    display: table-cell
}

.cart .cart-body .invoice .invoice-type li .item {
    background: #fff;
    border: 1px solid #ddd;
    padding: 4px 16px
}

.cart .cart-body .invoice .invoice-type li .item.selected {
    border-color: #ef2a3a;
    background: url(../image/checked.png) right bottom no-repeat
}

.cart .cart-body .invoice .invoice-info {
    background: #f9f9f9;
    margin-bottom: 10px;
    padding: 10px 20px
}

.cart .cart-body .invoice .invoice-info table td {
    vertical-align: middle;
    padding: 2px
}

.cart .cart-body .invoice .invoice-info table td .temp {
    text-align: right;
    width: 20px;
    white-space: nowrap
}

.cart .cart-body .invoice .invoice-info table td:first-child {
    text-align: right;
    width: 20px;
    white-space: nowrap
}

.cart .cart-body .invoice .invoice-info table td:nth-child(3) {
    text-align: right;
    width: 20px;
    white-space: nowrap;
    padding-left: 10px
}

@media screen and (max-width:768px) {
    .cart .cart-body .lister tr {
        display: block;
        position: relative;
        border-bottom: 1px solid #ddd;
        width: 100%
    }

    .cart .cart-body .lister tr th {
        display: block;
        width: 100%;
        border-bottom: none
    }

    .cart .cart-body .lister tr td {
        position: absolute;
        display: block;
        padding: 8px;
        border-bottom: none
    }

    .cart .cart-body .lister tr td .temp {
        padding-top: 50px
    }

    .cart .cart-body .lister tr td.check {
        position: relative;
        width: 40px;
        max-width: 40px;
        height: 110px;
        padding-top: 50px
    }

    .cart .cart-body .lister tr td.type {
        left: 40px;
        top: 0;
        font-weight: bold
    }

    .cart .cart-body .lister tr td.name {
        left: 40px;
        top: 30px
    }

    .cart .cart-body .lister tr td.unit {
        left: 40px;
        top: 60px
    }

    .cart .cart-body .lister tr td.unit select {
        height: 26px;
        line-height: 24px;
        padding: 0 8px
    }

    .cart .cart-body .lister tr td.price {
        right: 36px;
        top: 0;
        font-weight: bold;
        padding-top: 50px
    }

    .cart .cart-body .lister tr td.delete {
        right: 0;
        top: 0;
        padding: 8px;
        width: 36px;
        max-width: 36px;
        padding-top: 50px
    }

    .cart .cart-body .casher-wrap {
        position: fixed;
        bottom: 52px;
        left: 0;
        padding: 0 10px;
        width: 100%;
        background: #fff;
        border-top: 1px solid #ddd
    }

    .cart .cart-body .casher-wrap .casher {
        border: none
    }

    .cart .cart-body .casher-wrap .casher .cash {
        padding: 6px 0
    }

    .cart .cart-body .casher-wrap .casher .cash .btn {
        float: right
    }

    .cart .cart-body .casher-wrap .casher td {
        border-bottom: none
    }

    .cart .cart-body .casher-wrap .casher td.check {
        width: 40px;
        max-width: 40px;
        padding: 6px 8px
    }

    .cart .cart-body .casher-wrap .casher td.count {
        font-weight: bold
    }
}

.cart .order-body h1 img {
    padding-right: 10px
}

.cart .order-body h4 {
    font-weight: bold;
    margin: 0;
    letter-spacing: 1px;
    padding-left: 1px
}

.cart .order-body .lister {
    margin-bottom: 30px
}

.cart .order-body .lister thead th {
    background: #f9f9f9;
    color: #333
}

.cart .cart-empty {
    background: #fff;
    border: 1px solid #ddd;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
    margin-bottom: 60px
}

.cart .cart-empty p {
    text-align: center
}

.index section.banner {
    position: relative;
    height: 500px
}

.index section.banner .swiper-container {
    position: absolute;
    width: 100%;
    height: 500px
}

.index section.banner .swiper-container .wrapper {
    height: 500px
}

.index section.banner .swiper-container .wrapper .banner-txt {
    height: 430px;
    max-width: 650px;
    text-align: left
}

.index section.banner .swiper-container .wrapper .banner-txt h1 {
    font-size: 48px;
    margin: 0 0 10px 0
}

@media screen and (max-width:480px) {
    .index section.banner .swiper-container .wrapper .banner-txt h1 {
        font-size: 38px
    }
}

.index section.banner .swiper-container .wrapper .banner-txt h2 {
    font-size: 38px;
    margin: 0 0 10px 0
}

@media screen and (max-width:480px) {
    .index section.banner .swiper-container .wrapper .banner-txt h2 {
        font-size: 28px
    }
}

.index section.banner .swiper-container .wrapper .banner-txt h3 {
    font-size: 30px;
    margin: 0
}

@media screen and (max-width:480px) {
    .index section.banner .swiper-container .wrapper .banner-txt h3 {
        font-size: 22px
    }
}

.index section.banner .swiper-container .wrapper .banner-txt p {
    font-size: 18px
}

.index section.banner .swiper-container .wrapper .banner-txt .btn-jx {
    background: #00cfc8;
    border-radius: 30px;
    border: none
}

.index section.banner .swiper-container .wrapper .banner-txt .btn-GB {
    color: #973f1d;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #973f1d
}

.index section.banner .swiper-container .wrapper .banner-txt .btn-hk {
    color: #0246c1;
    background: #fff;
    border-radius: 10px;
    border: none
}

.index section.banner .swiper-container .wrapper .banner-txt .btn-hk:hover {
    color: #205dce;
    box-shadow: 0 0 5px #c0cedf;
    transition: all .5s
}

@media screen and (max-width:480px) {
    .index section.banner .swiper-container .wrapper .banner-txt {
        height: 300px
    }
}

.index section.banner .swiper-container .wrapper .banner-GB {
    padding-top: 20px;
    vertical-align: top;
    max-width: unset;
    width: 1200px;
    text-align: center
}

@media screen and (max-width:992px) {
    .index section.banner .swiper-container .wrapper .banner-GB {
        padding-top: 70px
    }

    .index section.banner .swiper-container .wrapper .banner-GB img {
        width: 100%
    }
}

.index section.banner .swiper-container .wrapper .overseas {
    position: relative
}

.index section.banner .swiper-container .wrapper .overseas .overseas-t {
    position: relative;
    top: 10px
}

.index section.banner .swiper-container .wrapper .overseas p {
    font-size: 16.3px;
    color: #081e87;
    line-height: 43px
}

.index section.banner .swiper-container .wrapper .overseas span {
    font-size: 21.74px
}

@media screen and (max-width:992px) {
    .index section.banner .swiper-container .wrapper .overseas img {
        width: 80%
    }

    .index section.banner .swiper-container .wrapper .overseas p {
        line-height: 30px
    }
}

.index section.banner .swiper-container .wrapper .banner-sg-content {
    position: relative
}

.index section.banner .swiper-container .wrapper .banner-sg-content .sale {
    position: absolute;
    top: -20px
}

.index section.banner .swiper-container .wrapper .banner-sg-content h1 {
    color: #fff;
    text-shadow: 3px 0 3px #4680fe;
    font-size: 50px
}

.index section.banner .swiper-container .wrapper .banner-sg-content p {
    color: #344ac2;
    background: #fff;
    padding: 5px 30px;
    margin: 30px 0 10px;
    border-radius: 20px
}

.index section.banner .swiper-container .wrapper .banner-sg-content .btn-sg {
    background: linear-gradient(to right, #f21f28, #ff6f78);
    border: none;
    border-radius: 5px
}

@media screen and (max-width:992px) {
    .index section.banner .swiper-container .wrapper .hk-idc-banner {
        padding-top: 50px
    }

    .index section.banner .swiper-container .wrapper .hk-idc-banner img {
        width: 90%
    }

    .index section.banner .swiper-container .wrapper .hk-idc-banner a {
        font-size: 16px;
        height: 30px;
        line-height: 30px
    }
}

.index section.banner .swiper-container .wrapper .sp-banner-right {
    position: absolute;
    right: 20px;
    top: 0
}

@media screen and (max-width:992px) {
    .index section.banner .swiper-container .wrapper .sp-banner-right {
        right: -20%;
        scale: .85
    }
}

.index section.banner .swiper-container .wrapper .sp-banner-right_out {
    position: relative;
    width: 576px;
    height: 576px
}

.index section.banner .swiper-container .wrapper .sp-banner-right_out .sp-banner-earth {
    position: absolute;
    margin: 0 auto;
    top: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    animation: Float-ab-Y 4s infinite linear
}

.index section.banner .swiper-container .wrapper .sp-banner-right_out::after {
    content: '';
    position: absolute;
    margin: auto;
    top: -45px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 576px;
    width: 576px;
    animation: rotate-l 7s infinite linear;
    background: url(../image/banner-earth-out.png) no-repeat center
}

.index section.banner .swiper-container .wrapper .sp-banner-right_in {
    position: absolute;
    margin: 0 auto;
    top: 5px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 521px;
    width: 521px;
    animation: rotate-r 5s infinite linear
}

.index section.banner .swiper-container .wrapper .sp-banner-right_in>div {
    border-radius: 520px;
    height: 521px;
    width: 521px;
    border: 1px dashed #faa58c
}

.index section.banner .swiper-container .wrapper .sp-banner-right_in img {
    position: absolute;
    height: 500px;
    width: 510px;
    scale: 1.05;
    top: 10px;
    bottom: 0;
    left: 0;
    right: 5px
}

.index section.banner .swiper-container .wrapper .cloud-banner,
.index section.banner .swiper-container .wrapper .sp-idc-banner {
    position: relative;
    z-index: 9
}

@media screen and (min-width:768px) {

    .index section.banner .swiper-container .wrapper .cloud-banner h2,
    .index section.banner .swiper-container .wrapper .sp-idc-banner h2 {
        font-size: 60px;
        margin: 0
    }

    .index section.banner .swiper-container .wrapper .cloud-banner h3,
    .index section.banner .swiper-container .wrapper .sp-idc-banner h3 {
        font-size: 48px
    }

    .index section.banner .swiper-container .wrapper .cloud-banner .img-tit,
    .index section.banner .swiper-container .wrapper .sp-idc-banner .img-tit {
        margin: 20px 0 10px
    }
}

.index section.banner .swiper-container .wrapper .cloud-banner-right .iot-ani {
    animation: Float-ab-Y 4s infinite linear;
    width: 425px
}

.index section.banner .swiper-container .wrapper .cloud-banner-right .iot-ani dots {
    width: 100%;
    left: 0;
    top: 30px;
    height: 250px
}

.index section.banner .swiper-container .wrapper .cloud-banner-right .iot-ani dots div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%
}

.index section.banner .swiper-container .wrapper .cloud-banner-right .iot-ani::after {
    background: url(../image/banner-cloud1.png) bottom no-repeat;
    width: 425px;
    height: 480px
}

.index section.banner .swiper-container .wrapper .cloud-banner-right .iot-ani::before {
    display: none
}

.index section.banner .swiper-container .wrapper .kr-ser-banner {
    display: block;
    width: 100%;
    height: 100%
}

@media screen and (max-width:1200px) {
    .index section.banner .swiper-container .wrapper .kr-ser-banner .banner-tit1 {
        width: 100%
    }

    .index section.banner .swiper-container .wrapper .kr-ser-banner .banner-tit2 {
        width: 50%
    }
}

@media screen and (max-width:768px) {
    .index section.banner .swiper-container .wrapper .kr-ser-banner {
        padding-top: 70px
    }

    .index section.banner .swiper-container .wrapper .kr-ser-banner .banner-tit1 {
        scale: 1.5;
        width: 100%;
        transition: all .5s
    }

    .index section.banner .swiper-container .wrapper .kr-ser-banner .banner-tit2 {
        width: 80%
    }
}

.index section.banner .swiper-container .wrapper .kr-idc-banner h3,
.index section.banner .swiper-container .wrapper .kr-idc-banner h2 {
    color: #1d2b95
}

.index section.banner .swiper-container .wrapper .kr-idc-banner h2 {
    font-size: 50px;
    margin: 0 0 20px 0
}

.index section.banner .swiper-container .wrapper .kr-idc-banner p {
    font-size: 18px;
    color: #5d6f8f;
    line-height: 30px
}

.index section.banner .swiper-container .wrapper .kr-idc-banner red {
    font-weight: bold
}

@media screen and (max-width:768px) {
    .index section.banner .swiper-container .wrapper .kr-idc-banner h2 {
        font-size: 30px;
        margin: 0 0 20px 0
    }

    .index section.banner .swiper-container .wrapper .kr-idc-banner p {
        font-size: 16px;
        line-height: 24px
    }

    .index section.banner .swiper-container .wrapper .kr-idc-banner h3 {
        font-size: 20px
    }
}

.index section.banner .swiper-container .swiper-pagination {
    bottom: 60px
}

.index section.banner .swiper-container .swiper-pagination .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
    background: transparent;
    opacity: 1;
    text-align: CENTER
}

.index section.banner .swiper-container .swiper-pagination .swiper-pagination-bullet::before {
    display: block;
    width: 13px;
    height: 13px;
    content: "";
    background: url(../image/swiper-dot.png) center no-repeat
}

.index section.banner .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    background: url(../image/swiper-dot-red.png) center no-repeat
}

.index section.banner .swiper-container .banner-sg {
    background: url(../image/015.jpg) center no-repeat
}

.index section.banner .swiper-container .banner-sg .banner-sg-content h1 {
    font-size: 44px
}

.index section.banner .swiper-container .banner-sg .banner-sg-content .reduce {
    width: 80%
}

.index section.banner .swiper-container .banner-sg .banner-sg-content p {
    margin: 20px 0 0
}

@media screen and (max-width:480px) {
    .index section.banner .swiper-container .banner-sg {
        background: url(../image/015-xs.jpg) center no-repeat
    }

    .index section.banner .swiper-container .banner-sg .banner-txt {
        vertical-align: top;
        padding-top: 50px
    }
}

.index section.banner .iot-ani {
    top: 0;
    right: 49px
}

@media screen and (max-width:650px) {
    .index section.banner .iot-ani {
        right: -20px;
        height: 530px;
        background: url(../image/banner-cloud1.png) center bottom no-repeat
    }

    .index section.banner .iot-ani::before {
        display: none
    }

    .index section.banner .iot-ani::after {
        display: none
    }

    .index section.banner .iot-ani cube,
    .index section.banner .iot-ani ball,
    .index section.banner .iot-ani ballshadow {
        display: none
    }
}

@media screen and (max-width:768px) {
    .index section.banner {
        height: 420px
    }

    .index section.banner .swiper-container {
        height: 420px
    }

    .index section.banner .swiper-container .wrapper {
        height: 420px
    }
}

@media screen and (max-width:576px) {
    .index section.banner {
        height: 350px
    }

    .index section.banner .swiper-container {
        height: 350px
    }

    .index section.banner .swiper-container .wrapper {
        height: 350px
    }
}

.index section.search {
    background: #f5f7fa;
    padding-top: 80px;
    padding-bottom: 30px
}

.index section.search .wrapper .recommend-wrap {
    position: relative
}

.index section.search .wrapper section.recommend {
    position: absolute;
    width: 100%;
    top: -130px;
    z-index: 99
}

.index section.search .wrapper section.recommend .recommend-table {
    width: 100%
}

.index section.search .wrapper section.recommend .recommend-table .one-row {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    border-collapse: collapse
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div {
    position: relative;
    width: 25%
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item {
    position: relative;
    background: #fff;
    line-height: 24px;
    padding: 30px 20px 30px 110px;
    height: 120px;
    width: 100%
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item img {
    position: absolute;
    top: 36px;
    left: 20px
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item img.hover {
    display: none
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item img.unhover {
    display: block
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item h3 {
    margin: 0;
    text-align: left;
    font-weight: bold
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item p {
    margin: 0;
    text-align: left;
    color: #999
}

@media screen and (max-width:1200px) {
    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item {
        padding-left: 80px
    }

    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item img {
        top: 42px;
        left: 15px;
        width: 50px
    }
}

@media screen and (max-width:992px) {
    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item {
        padding-left: 0;
        padding-top: 76px
    }

    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item img {
        top: 20px;
        left: 0;
        right: 0;
        margin: auto;
        width: 60px
    }

    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item h3 {
        text-align: center
    }

    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item p {
        display: none
    }
}

@media screen and (max-width:768px) {
    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item {
        padding-top: 82px
    }

    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item img {
        top: 26px
    }

    .index section.search .wrapper section.recommend .recommend-table .one-row>div .item h3 {
        font-size: 14px;
        line-height: 20px
    }
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item:hover {
    position: absolute;
    top: -3px;
    left: 0;
    height: 126px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    z-index: 99
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item:hover img.hover {
    display: block
}

.index section.search .wrapper section.recommend .recommend-table .one-row>div .item:hover img.unhover {
    display: none
}

.index section.search .search-bar {
    margin: -18px;
    width: auto
}

.index section.search .search-bar .one-row {
    position: static
}

.index section.search .search-bar .tips h3 {
    color: #333
}

.index section.search .search-bar .tips p {
    color: #333
}

.index section.search .search-bar .text {
    border: 1px solid #ddd
}

.index section.search .search-bar .more {
    border: 1px solid #ddd;
    background: #fff !important
}

.index section.search .search-bar .go {
    border: #ef2a3a 1px solid
}

.index section.search .search-bar .bg {
    display: none
}

@media screen and (max-width:480px) {
    .index section.search .search-bar {
        margin: -18px 0
    }

    .index section.search .search-bar>.one-row {
        border-spacing: 0 18px
    }
}

.index section.product .product-table {
    margin-bottom: 50px
}

.index section.product .product-table gap {
    width: 38px
}

.index section.product .product-table .item {
    border: 1px solid #eee;
    text-align: center
}

.index section.product .product-table .item h3 {
    margin-top: 10px;
    font-size: 20px;
    color: #fff
}

.index section.product .product-table .item p {
    text-align: center;
    max-width: 260px;
    width: 260px;
    margin-bottom: 50px
}

.index section.product .product-table .item p a {
    color: #666
}

.index section.product .product-table .item img {
    vertical-align: middle
}

.index section.product .product-table .item .tit {
    height: 93px;
    padding-top: 20px
}

@media screen and (max-width:768px) {
    .index section.product .product-table .item .tit {
        height: 60px;
        padding-top: 10px
    }
}

.index section.product .product-table .item .pro-row {
    width: 100%;
    margin-bottom: 20px
}

.index section.product .product-table .item .pro-row>div {
    border-collapse: separate;
    border-spacing: 10px
}

.index section.product .product-table .item .pro-row>div>div {
    width: 33.33%
}

.index section.product .product-table .item .pro-row>div>div:hover .turning-icon::after {
    content: "";
    animation: rotate-r 2s infinite linear
}

@media screen and (max-width:992px) {
    .index section.product .product-table>* {
        display: table-row
    }

    .index section.product .product-table>*.gap {
        height: 20px
    }

    .index section.product .product-table>* .item {
        margin-bottom: 20px
    }

    .index section.product .product-table>* .item h3 {
        margin: 10px 0
    }

    .index section.product .product-table>* .item p {
        margin-bottom: 20px
    }
}

.index section.hkserver {
    background: url(../image/084.png) bottom no-repeat #f6f7fa
}

.index section.hkserver .wrapper {
    overflow: hidden
}

.index section.hkserver .bg {
    padding: 25px 0 20px;
    background: url(../image/023.jpg) no-repeat center;
    background-size: 100% 100%
}

.index section.hkserver .bg h3 {
    margin: 10px 0 0;
    font-weight: bold;
    font-size: 18px
}

.index section.hkserver .bg img {
    height: 59px
}

.index section.hkserver .main-server {
    margin: 0 -18px
}

.index section.hkserver .main-server .col-2 {
    padding: 0 18px
}

.index section.hkserver .main-server .col-2>div {
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-top: 2px solid #465fa1
}

.index section.hkserver .text {
    padding: 10px 30px;
    min-height: 128px
}

.index section.hkserver .text p {
    color: #666;
    text-align: center;
    line-height: 24px
}

.index section.hkserver .others {
    background: #fff;
    margin-top: 20px;
    padding: 21px 10px
}

.index section.hkserver .others .tit {
    padding: 0 30px;
    width: 285px
}

.index section.hkserver .others .tit p {
    line-height: 30px
}

.index section.hkserver .others .label .col-2 {
    padding-right: 30px
}

.index section.hkserver .others .label span {
    font-size: 18px;
    color: #465fa1;
    border: 1px solid #465fa1;
    display: block;
    padding: 15px 0;
    width: 100%;
    text-align: center
}

.index section.hkserver .more-server {
    padding: 20px 0 60px
}

.index section.hkserver .more-server p {
    color: #465fa1;
    font-size: 18px;
    font-weight: bold
}

.index section.hkserver .more-server .center {
    margin: 20px 0
}

.index section.hkserver .more-server .btn {
    height: 40px;
    line-height: 40px;
    min-width: 248px
}

.index section.hkserver .more-server .line {
    background: #fff
}

.index section.hkserver .more-server .line:hover {
    background: #ef2a3a
}

@media screen and (max-width:1200px) {
    .index section.hkserver .text {
        padding: 10px 10px
    }

    .index section.hkserver .others .one-row {
        display: block
    }

    .index section.hkserver .others .one-row .tit {
        width: 100%
    }

    .index section.hkserver .others .one-row>div {
        display: block
    }

    .index section.hkserver .others .one-row>div .col-2 {
        padding: 0 10px 0 10px
    }
}

@media screen and (max-width:480px) {
    .index section.hkserver .others .tit {
        padding: 0 10px
    }

    .index section.hkserver .others .col-2 {
        width: 33%
    }

    .index section.hkserver .others .col-2 span {
        font-size: 12px
    }

    .index section.hkserver .more-server p {
        font-size: 16px
    }
}

.index section.solution {
    background: #121631;
    overflow: hidden;
    padding: 50px 0
}

.index section.solution .tit1 h1 {
    color: #fff
}

.index section.solution .tit1 p {
    color: #999
}

.index section.solution .wrapper {
    position: relative;
    padding-bottom: 80px
}

.index section.solution .solution-table {
    position: relative;
    z-index: 2
}

.index section.solution .solution-table .one-row {
    height: 400px
}

.index section.solution .solution-table .one-row>div {
    position: relative;
    width: 20%
}

.index section.solution .solution-table .one-row .item {
    position: relative;
    height: 100%;
    text-align: center;
    overflow: hidden !important
}

.index section.solution .solution-table .one-row .item>* {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: all ease .5s
}

.index section.solution .solution-table .one-row .item .cover {
    top: 80px;
    transition: all ease .5s
}

.index section.solution .solution-table .one-row .item .cover hr {
    width: 30px;
    height: 2px;
    margin: 30px auto;
    border-color: #ef2a3a
}

.index section.solution .solution-table .one-row .item .cover h2 {
    font-size: 20px;
    color: #fff
}

.index section.solution .solution-table .one-row .item .detail {
    top: 430px;
    height: 0;
    padding-left: 10px;
    padding-right: 10px
}

.index section.solution .solution-table .one-row .item .detail p {
    color: #ccc;
    margin: 0 auto 20px;
    max-width: 180px;
    text-align: center;
    line-height: 24px
}

.index section.solution .solution-table .one-row .item .detail .more {
    display: block;
    margin-top: 10px;
    color: #666
}

.index section.solution .solution-table .one-row .item:hover {
    cursor: pointer
}

.index section.solution .solution-table .one-row .item:hover .cover {
    top: 40px;
    z-index: 2
}

.index section.solution .solution-table .one-row .item:hover .cover hr {
    display: none
}

.index section.solution .solution-table .one-row .item:hover .cover h2 {
    color: #fff
}

.index section.solution .solution-table .one-row .item:hover .detail {
    height: auto;
    top: 160px;
    z-index: 2
}

.index section.solution .solution-table .one-row .item:hover .bg {
    height: 100%;
    width: 100%;
    opacity: .6;
    z-index: 1;
    background: -webkit-linear-gradient(#1f2846, #131733);
    background: -o-linear-gradient(#1f2846, #131733);
    background: -moz-linear-gradient(#1f2846, #131733);
    background: linear-gradient(#1f2846, #131733)
}

@media screen and (max-width:768px) {
    .index section.solution .solution-table .one-row .item .cover img {
        height: 40px
    }

    .index section.solution .solution-table .one-row .item .cover h2 {
        font-size: 16px
    }

    .index section.solution .solution-table .one-row .item:hover .cover {
        top: 80px
    }

    .index section.solution .solution-table .one-row .item:hover .cover hr {
        display: block
    }

    .index section.solution .solution-table .one-row .item:hover .detail {
        display: none
    }

    .index section.solution .solution-table .one-row .item:hover .bg {
        display: none
    }
}

.index section.solution .solution-bg {
    position: absolute;
    background: url(../image/030.png) no-repeat center bottom;
    height: 600px;
    width: 100%;
    bottom: 0;
    z-index: 1
}

.index section.advantage {
    background: #dee6ee;
    padding: 60px 0
}

.index section.advantage h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px
}

.index section.partner {
    padding: 40px 0;
    padding: 50px 0
}

.index section.partner .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.index section.partner .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .index section.partner .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .index section.partner .partner-table img {
        width: 60px
    }
}

.index section.news {
    background: #f6f6f7;
    padding: 60px 0
}

@media screen and (min-width:1040px) {
    .index section.news .news-table>div:hover {
        position: relative;
        overflow: hidden;
        background: rgba(209, 211, 211, 0.1);
        box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        transition: all .5s
    }

    .index section.news .news-table>div:hover li {
        margin: auto;
        transition: all .5s
    }

    .index section.news .news-table>div:hover .iconfont {
        color: #ef2a3a;
        transition: all .5s
    }
}

.index section.news .news-table>* {
    padding: 10px 15px 0 15px
}

.index section.news .news-table>* .item {
    width: 100%
}

@media screen and (max-width:1039px) {
    .index section.news .news-table>* {
        display: table-row
    }

    .index section.news .news-table>* .item {
        width: 100%;
        padding-bottom: 30px
    }

    .index section.news .news-table>* .item .tit {
        padding-bottom: 0 !important
    }

    .index section.news .news-table>* .item img {
        display: none
    }
}

.index section.news .news-table gap {
    width: 24px
}

.index section.news .news-table .item .tit {
    padding-bottom: 10px;
    position: relative
}

.index section.news .news-table .item .tit .tit-style {
    position: relative;
    width: 100px;
    height: 24px;
    background: #e3e9f2;
    border-radius: 4px;
    padding-left: 34px;
    color: #333
}

.index section.news .news-table .item .tit .tit-style i {
    position: absolute;
    margin: auto;
    left: 10px;
    bottom: 0;
    top: 0;
    line-height: 24px
}

.index section.news .news-table .item .tit .tit-style span {
    line-height: 24px
}

.index section.news .news-table .item .tit .tit-style:hover {
    cursor: pointer
}

.index section.news .news-table .item .tit a {
    position: absolute;
    top: 0;
    right: 0;
    height: 24px;
    color: #999
}

.index section.news .news-table .item .tit a:hover {
    color: #ef2a3a
}

.index section.news .news-table .item img {
    width: 100%
}

.index section.news .news-table .item ul {
    margin-top: 10px;
    border-top: #ddd solid 1px
}

.index section.news .news-table .item ul li {
    margin-top: 10px
}

.index section.news .news-table .item ul li a {
    color: #333
}

.index section.news .news-table .item ul li span {
    color: #999;
    float: right
}

.index section.news .news-table .item ul li:hover>* {
    color: #ef2a3a
}

.index section.index-footer {
    background: url(../image/031.png) no-repeat center;
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 40px
}

.index section.index-footer .wrapper {
    text-align: center
}

.index section.index-footer .wrapper h1 {
    font-size: 30px;
    text-align: center
}

@media screen and (max-width:480px) {
    .index section.index-footer .wrapper h1 {
        font-size: 22px
    }
}

.home-column-active {
    height: 100px
}

.home-column-active .column-active-content {
    position: relative
}

.home-column-active .column-active-card {
    position: absolute;
    width: 100%;
    top: -60px;
    z-index: 99;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15)
}

.home-column-active .column-active-card h5 {
    font-weight: bold;
    font-size: 20px;
    margin: 0;
    padding-bottom: 10px
}

.home-column-active .column-active-card p {
    font-size: 14px;
    margin: 0;
    line-height: 24px
}

.home-column-active .column-active-card .item {
    position: relative;
    overflow: hidden;
    width: 33.3%;
    scale: 1;
    padding: 25px 100px 25px 25px;
    transition: scale .4s
}

.home-column-active .column-active-card .item:hover {
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    scale: 1.05;
    z-index: 10;
    transition: scale .4s
}

.home-column-active .column-active-card .item1 {
    background: #fff
}

.home-column-active .column-active-card .item1 p {
    color: #738ba5
}

.home-column-active .column-active-card .item2 {
    background: linear-gradient(to right, #e05851, #ffb797)
}

.home-column-active .column-active-card .item2 h5,
.home-column-active .column-active-card .item2 p {
    color: #fff
}

.home-column-active .column-active-card .item3 {
    background: linear-gradient(to right, #6e86ab, #314578)
}

.home-column-active .column-active-card .item3 h5,
.home-column-active .column-active-card .item3 p {
    color: #fff
}

.home-column-active .fixd-img {
    position: absolute;
    right: -50px;
    bottom: -20px
}

@media screen and (max-width:992px) {
    .home-column-active .column-active-card .item {
        padding: 20px
    }

    .home-column-active .column-active-card .item>div {
        position: relative
    }
}

@media screen and (max-width:768px) {
    .home-column-active .column-active-card {
        top: -20px
    }

    .home-column-active .column-active-card .item {
        padding: 20px 10px
    }

    .home-column-active .column-active-card p {
        display: none
    }

    .home-column-active .column-active-card h5 {
        font-size: 14px
    }

    .home-column-active .fixd-img {
        width: 70px;
        right: -20px;
        bottom: -10px
    }
}

.home-column-global .global-wrap {
    background: url(../image/home-searchbar.jpg) no-repeat;
    padding: 30px;
    margin: 20px 0
}

.home-column-global .global-tit h2 {
    color: #fff
}

.home-column-global section.search {
    padding-left: 20px;
    padding-right: 20px;
    background-color: transparent;
    padding-top: 30px
}

.home-column-global .search-bar {
    background-color: #9cabc2
}

.home-column-global .search-result {
    margin-top: 30px
}

.home-column-global .search-result-ip {
    margin: 10px -18px;
    background: #fff
}

.home-column-global .search-result-table {
    width: 100%;
    border: 1px solid #dcdcdc
}

.home-column-global .search-result-table tr {
    text-align: left
}

.home-column-global .search-result-table tr td {
    padding: 15px;
    border: 1px solid #dcdcdc
}

.home-column-global .search-result-table tr>td:nth-child(odd) {
    width: 160px;
    text-align: right;
    color: #66788c
}

.home-column-global .search-result-table tr:nth-child(even) {
    background-color: #eeeeee
}

.home-column-global .column-global-content {
    transform: translateY(40px);
    margin-top: -20px
}

.home-column-global .column-global-card {
    text-align: center;
    z-index: 99
}

.home-column-global .column-global-card .top-img {
    width: 100%
}

.home-column-global .column-global-card .flex-item {
    padding: 0 10px
}

.home-column-global .column-global-text {
    padding: 30px 45px
}

.home-column-global .column-global-text h5 {
    font-size: 24px;
    margin: 0;
    padding-bottom: 20px
}

.home-column-global .column-global-text p {
    display: none;
    text-align: center;
    font-size: 16px;
    margin: 0;
    line-height: 30px;
    padding-bottom: 20px
}

.home-column-global .column-global-text .btn.line {
    color: #ffa0a8;
    border-color: #ffa0a8
}

.home-column-global .column-global-text .splitters {
    display: none;
    margin: 10px auto 20px;
    width: 50px;
    height: 3px;
    background-color: #ff0000
}

.home-column-global .column-global-item {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    height: 100%;
    background-color: #fff
}

@media screen and (min-width:1200px) {
    .home-column-global .column-global-item:hover {
        cursor: pointer
    }

    .home-column-global .column-global-item:hover .top-img {
        display: none
    }

    .home-column-global .column-global-item:hover .splitters,
    .home-column-global .column-global-item:hover p {
        display: block
    }

    .home-column-global .column-global-item:hover .column-global-text {
        padding-top: 50px;
        transition: all .5s
    }

    .home-column-global .column-global-item:hover .column-global-text .btn.line {
        color: #fff;
        border-color: #ef2a3a;
        background: #ef2a3a
    }
}

@media screen and (max-width:768px) {
    .home-column-global .column-global-text {
        padding: 15px
    }

    .home-column-global .column-global-text h5 {
        font-size: 16px
    }

    .home-column-global .column-global-text p {
        font-size: 12px;
        line-height: 20px
    }
}

.home-data {
    height: 175px;
    padding-top: 30px;
    background: #eef1f8
}

.home-data-text {
    padding-top: 30px
}

.home-data-item {
    height: 100%;
    color: #002249
}

.home-data-item .item-count {
    font-size: 36px
}

.home-data-item p {
    font-size: 14px;
    text-align: center
}

@media screen and (max-width:768px) {
    .home-data {
        height: 125px
    }

    .home-data-text {
        padding-top: 10px
    }

    .home-data-item .item-count {
        font-size: 18px
    }

    .home-data-item p {
        font-size: 12px
    }
}

.home-column-product {
    padding: 40px 0 60px
}

.home-column-product .btn {
    border-radius: 0
}

.home-column-product .c-sec1-flow-item {
    margin-bottom: 30px
}

.home-node {
    height: 760px
}

.home-node .box {
    position: relative
}

.home-node .tit1 {
    padding-top: 50px
}

.home-node .nodemap {
    position: relative;
    width: 100%;
    height: 570px;
    background: url(../image/map3.png) center no-repeat
}

.home-node .nodemap .map-site {
    opacity: 1
}

.home-node .site-circle-hover {
    display: none
}

.home-node .map-site a {
    z-index: 2;
    color: #333;
    padding: 5px 10px;
    box-shadow: 0 0 5px #cad7e6;
    border-radius: 5px;
    background-color: #fff
}

.home-node .map-site:hover .site-circle-hover {
    display: inline-block
}

.home-node .map-site:hover .site-circle {
    display: none
}

.home-node .map-site:hover a {
    color: #fff;
    background-color: #ef2a3a;
    box-shadow: 0 0 5px #ef2a3a
}

.home-node .site-right a {
    position: absolute;
    right: -40px;
    top: 5px
}

.home-node .site-left a {
    position: absolute;
    left: -40px;
    top: 5px
}

.home-node .site-bottom a {
    position: absolute;
    left: -30px;
    top: 30px
}

.home-node .cloudpublic-btn {
    position: relative;
    top: -50px
}

.home-node .cloudpublic-btn .btn {
    padding: 0 25px;
    background: linear-gradient(to right, #2787e0, #2bdeee);
    border: none
}

.home-node .cloudpublic-btn .btn:hover {
    background: linear-gradient(to left, #2787e0, #2bdeee)
}

@media screen and (max-width:1200px) {
    .home-node {
        height: 700px
    }

    .home-node .nodemap {
        background: url(../image/map3-phone.png) center no-repeat;
        background-size: 100%
    }

    .home-node .nodemap .map {
        display: none
    }
}

@media screen and (max-width:992px) {
    .home-node {
        height: 660px
    }
}

@media screen and (max-width:768px) {
    .home-node {
        height: 500px
    }

    .home-node .tit1 {
        font-size: 25px
    }

    .home-node .nodemap {
        height: 360px
    }
}

.home-node .map {
    background: url(../image/050.jpg) center no-repeat;
    background-size: 100% 100%
}

.home-node .map span {
    color: #ffffff
}

.home-node .map h2 {
    color: #ffffff
}

.home-node .map i {
    z-index: 10
}

.home-node .map .content {
    margin-top: 50px
}

.home-node .map .map-img {
    background-image: url(../image/map.png);
    min-height: 331px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px
}

.home-node .map .map-img img {
    position: absolute;
    bottom: 25px;
    z-index: 1
}

.home-node .map .site-right img {
    right: -38px;
    bottom: 10px
}

.home-node .map .map-pic {
    display: none
}

.home-node .map .map-line {
    background: url(../image/map-line2.png) no-repeat right top;
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transition: all 4s ease-in 0s;
    -moz-transition: all 4s ease 0s;
    -o-transition: all 4s ease 0s
}

.home-node .map .wave {
    background: #ffffff;
    animation: circle-wave 2s infinite;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    top: -26px;
    right: -13px;
    opacity: 0
}

.home-node .map span {
    position: relative
}

.home-node .map .map-site-center {
    position: absolute;
    left: 930px;
    top: 120px
}

.home-node .map .map-site-center img {
    z-index: 3
}

.home-node .map .map-site {
    position: absolute
}

.home-node .map .active {
    opacity: 1;
    transition: all 1s linear 0s
}

.home-node .map .active .map-line {
    width: 820px;
    height: 250px
}

.home-node .map .site-my .wave {
    right: 20px
}

.home-node .map .site-left img {
    bottom: 10px;
    left: -30px
}

.home-node .map .site-left .wave {
    right: 18px;
    top: -12px
}

.home-node .map .map-table {
    margin-top: 20px
}

.home-node .map .row>div>p {
    background-color: #0c307c;
    padding: 15px 0;
    margin: 0;
    text-align: center;
    color: #abc1de
}

.home-node .map .row>div {
    float: left;
    min-height: 1px;
    padding: 1px;
    background-color: #345597
}

@media screen and (max-width:1200px) {
    .home-node .map .map-img {
        display: none
    }

    .home-node .map .map-pic {
        display: block;
        width: 100%
    }

    .home-node .map .map-pic .pic {
        width: 100%
    }
}

.products .banner h2 {
    margin: 0;
    text-align: center;
    font-size: 36px;
    color: #fff;
    padding-top: 120px
}

.products .banner p {
    margin: 0;
    text-align: center;
    font-size: 18px;
    color: #fff
}

.products .products-wrap {
    background: url(../image/0081.png) no-repeat center bottom, #eeeeee;
    padding: 20px 0
}

.products .products-wrap .shadow {
    background: #fff;
    -webkit-box-shadow: 0 0 10px #e9e9e9;
    box-shadow: 0 0 10px #e9e9e9
}

.products .products-wrap .hover:hover {
    cursor: pointer;
    box-shadow: 0 0 20px #ddd
}

.products .products-wrap .hover:hover h3 {
    color: #ef2a3a
}

.products .products-wrap .advantage-wrap {
    background: #fff;
    -webkit-box-shadow: 0 0 10px #e9e9e9;
    box-shadow: 0 0 10px #e9e9e9
}

.products .products-wrap .advantage-wrap .advantage-table .item p {
    text-align: justify
}

.products .products-wrap .advantage-wrap .advantage-table .item p span {
    color: #ef2a3a;
    padding-right: 3px
}

.products .products-wrap .tit1 h1 {
    margin-top: 0;
    font-size: 24px
}

.products .products-wrap .tit2 {
    margin-bottom: 10px
}

.products .products-wrap .hl-catalog-table {
    margin: -20px
}

.products .products-wrap .hl-catalog-table .server-nav {
    border-collapse: separate;
    border-spacing: 20px;
    width: 100%;
    padding-bottom: 0;
    background: #fff;
    -webkit-box-shadow: 0 0 10px #e9e9e9;
    box-shadow: 0 0 10px #e9e9e9;
    background: transparent
}

.products .products-wrap .hl-catalog-table .server-nav td {
    border: #e9e9e9 solid 1px;
    padding: 10px 20px;
    vertical-align: top;
    background: #fff
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog {
    border: none
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog:not(:only-child):first-child {
    width: 50%
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog h3 {
    font-weight: normal;
    margin-bottom: 0;
    padding-left: 0
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog h3::before {
    display: none
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog ul {
    display: inline-block;
    width: auto;
    border: none;
    padding: 0
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog ul li:not(:last-child)::after {
    width: 24px
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog ol li {
    height: 40px;
    width: 142px;
    margin-right: 60px
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog:hover:hover {
    cursor: pointer;
    box-shadow: 0 0 20px #ddd
}

.products .products-wrap .hl-catalog-table .server-nav .hl-catalog:hover:hover h3 {
    color: #ef2a3a
}

@media screen and (max-width:768px) {
    .products .products-wrap .hl-catalog-table {
        margin: 0
    }

    .products .products-wrap .hl-catalog-table .server-nav {
        display: block
    }

    .products .products-wrap .hl-catalog-table .server-nav tbody,
    .products .products-wrap .hl-catalog-table .server-nav tr {
        display: block
    }

    .products .products-wrap .hl-catalog-table .server-nav .hl-catalog {
        display: block;
        width: 100% !important;
        margin-bottom: 10px
    }

    .products .products-wrap .hl-catalog-table .server-nav .hl-catalog h3 {
        margin-top: 0
    }

    .products .products-wrap .hl-catalog-table .server-nav .hl-catalog ul {
        margin: 8px 0 0
    }

    .products .products-wrap .hl-catalog-table .server-nav .hl-catalog ul li::after {
        width: 16px !important
    }

    .products .products-wrap .hl-catalog-table .server-nav .hl-catalog ol li {
        margin-right: 10px
    }
}

.products .products-wrap section:not(.server) {
    margin-top: 20px
}

.products .products-wrap section.idc .idc-nav {
    margin: -20px
}

.products .products-wrap section.idc .idc-nav .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.products .products-wrap section.idc .idc-nav .one-row .item {
    background: #fff;
    vertical-align: top;
    width: 50%
}

.products .products-wrap section.idc .idc-nav .one-row .item .tit {
    font-size: 24px;
    color: #fff;
    line-height: 68px;
    text-align: center
}

.products .products-wrap section.idc .idc-nav .one-row .item .tit.tit01 {
    background: url(../image/027.png) no-repeat center;
    background-size: cover
}

.products .products-wrap section.idc .idc-nav .one-row .item .tit.tit02 {
    background: url(../image/028.png) no-repeat center;
    background-size: cover
}

.products .products-wrap section.idc .idc-nav .one-row .item .links {
    text-align: center;
    padding: 20px
}

.products .products-wrap section.idc .idc-nav .one-row .item .links ul {
    margin: 0
}

.products .products-wrap section.idc .idc-nav .one-row .item .links ul a {
    font-size: 16px
}

.products .products-wrap section.idc .idc-nav .one-row .item .links .more {
    display: inline-block;
    margin-top: 10px;
    color: #999
}

.products .products-wrap section.idc .idc-nav .one-row .item .links .more:hover {
    color: #ef2a3a
}

@media screen and (max-width:768px) {
    .products .products-wrap section.idc .idc-nav {
        margin: 0
    }

    .products .products-wrap section.idc .idc-nav .one-row {
        display: block
    }

    .products .products-wrap section.idc .idc-nav .one-row .item {
        display: block;
        width: 100%;
        margin-bottom: 10px
    }
}

.products .products-wrap section.cloud .cloud-nav {
    margin: 0 -20px -20px
}

.products .products-wrap section.cloud .cloud-nav .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.products .products-wrap section.cloud .cloud-nav .one-row>div {
    width: 33.3333%;
    background: #fff;
    text-align: center;
    padding: 40px 0
}

.products .products-wrap section.cloud .cloud-nav .one-row>div h3 {
    margin-bottom: 0;
    margin-top: 10px;
    font-size: 18px
}

.products .products-wrap section.cloud .cloud-nav .one-row>div:hover {
    cursor: pointer;
    box-shadow: 0 0 20px #ddd
}

.products .products-wrap section.cloud .cloud-nav .one-row>div:hover h3 {
    color: #ef2a3a
}

.products .products-wrap section.cloud .private {
    background: url(../image/029.png) no-repeat center;
    background-size: cover;
    padding: 40px 100px
}

.products .products-wrap section.cloud .private h3 {
    font-size: 24px;
    color: #fff;
    margin: 0
}

.products .products-wrap section.cloud .private p {
    color: #ccc;
    max-width: 520px;
    margin-left: 0
}

.products .products-wrap section.cloud .private a {
    color: #ef2a3a
}

.products .products-wrap section.cloud .private:hover {
    cursor: pointer
}

@media screen and (max-width:768px) {
    .products .products-wrap section.cloud .private {
        padding: 40px 20px
    }
}

.products .products-wrap section.domain .domain-nav {
    margin-top: 20px
}

.products .products-wrap section.domain .domain-nav gap {
    width: 20px
}

.products .products-wrap section.domain .domain-nav .item {
    background: #fff;
    -webkit-box-shadow: 0 0 10px #e9e9e9;
    box-shadow: 0 0 10px #e9e9e9;
    text-align: center;
    padding: 20px 0
}

.products .products-wrap section.domain .domain-nav .item:hover {
    cursor: pointer;
    box-shadow: 0 0 20px #ddd
}

.products .products-wrap section.domain .domain-nav .item:hover h3 {
    color: #ef2a3a
}

.products .products-wrap section.domain .domain-nav .item h3 {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 6px
}

.products .products-wrap section.domain .search-bar {
    margin-top: 20px
}

@media screen and (max-width:768px) {
    .products .products-wrap section.domain .domain-nav gap {
        width: 10px
    }

    .products .products-wrap section.domain .search-bar {
        margin-top: 10px
    }
}

.products .products-wrap section.trademark .trademark-nav {
    margin-top: 20px
}

.products .products-wrap section.trademark .trademark-nav .item {
    background: #fff;
    -webkit-box-shadow: 0 0 10px #e9e9e9;
    box-shadow: 0 0 10px #e9e9e9;
    margin-bottom: 20px;
    position: relative
}

.products .products-wrap section.trademark .trademark-nav .item>div {
    padding: 20px 0
}

.products .products-wrap section.trademark .trademark-nav .item>div:first-child {
    text-align: center;
    width: 128px
}

.products .products-wrap section.trademark .trademark-nav .item>div:last-child {
    padding-right: 60px
}

.products .products-wrap section.trademark .trademark-nav .item h3 {
    margin: 0;
    font-size: 18px
}

.products .products-wrap section.trademark .trademark-nav .item ul {
    margin-top: 10px;
    margin-bottom: 0
}

.products .products-wrap section.trademark .trademark-nav .item ul a:hover {
    color: #ef2a3a
}

.products .products-wrap section.trademark .trademark-nav .item .link::before {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e66a";
    font-size: 30px;
    display: block;
    position: absolute;
    top: 30%;
    right: 20px;
    color: #999
}

@media screen and (max-width:768px) {
    .products .products-wrap section.trademark .trademark-nav .item {
        margin-bottom: 10px
    }
}

@media screen and (max-width:480px) {
    .products .products-wrap section.trademark .trademark-nav .item>div:first-child {
        width: 90px
    }

    .products .products-wrap section.trademark .trademark-nav .item>div:last-child {
        padding-right: 0
    }

    .products .products-wrap section.trademark .trademark-nav .item>div:last-child .link {
        display: none
    }
}

.products .products-wrap section.email {
    padding-bottom: 50px
}

.products .products-wrap section.email .email-nav {
    margin-top: 20px
}

.products .products-wrap section.email .email-nav gap {
    width: 20px
}

.products .products-wrap section.email .email-nav .item {
    position: relative;
    text-align: center;
    padding: 50px 10px
}

.products .products-wrap section.email .email-nav .item h3 {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin: 10px
}

.products .products-wrap section.email .email-nav .item p {
    color: #fff;
    text-align: center;
    font-size: 16px
}

.products .products-wrap section.email .email-nav .item.item1 {
    background: url(../image/009.png) no-repeat center;
    background-size: cover
}

.products .products-wrap section.email .email-nav .item.item2 {
    background: url(../image/010.png) no-repeat center;
    background-size: cover
}

.products .products-wrap section.email .email-nav .item.item3 {
    background: url(../image/036.png) no-repeat center;
    background-size: cover
}

@media screen and (max-width:768px) {
    .products .products-wrap section.email .email-nav {
        display: block
    }

    .products .products-wrap section.email .email-nav>* {
        display: block;
        margin-bottom: 10px
    }
}

.idcicp-products .banner h2 {
    margin: 0;
    text-align: center;
    font-size: 36px;
    color: #fff;
    padding-top: 120px
}

.idcicp-products .banner p {
    margin: 0;
    text-align: center;
    font-size: 18px;
    color: #fff
}

.idcicp-products .products-wrap p {
    color: #73889e;
    font-size: 14px
}

.idcicp-products .products-wrap .tit1 {
    text-align: center
}

.idcicp-products .products-wrap .tit1 p {
    font-size: 16px
}

.idcicp-products .products-wrap .shadow {
    background: #fff;
    -webkit-box-shadow: 0 0 10px #e9e9e9;
    box-shadow: 0 0 10px #e9e9e9
}

.idcicp-products .products-wrap .hover:hover {
    cursor: pointer;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1)
}

.idcicp-products .products-wrap .hover:hover h3 {
    color: #ef2a3a
}

.idcicp-products .products-wrap .pro-link {
    display: table
}

.idcicp-products .products-wrap .pro-link a {
    color: #2d94ff
}

.idcicp-products .products-wrap .pro-arrow {
    width: 30px;
    margin-left: 5px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    position: relative
}

.idcicp-products .products-wrap .pro-arrow img {
    position: relative;
    right: 12px;
    transition: all ease .5s
}

.idcicp-products .products-wrap .pro-link:hover {
    cursor: pointer
}

.idcicp-products .products-wrap .pro-link:hover .pro-arrow img {
    right: 0;
    transition: all ease .5s
}

.idcicp-products .products-wrap .product-line {
    width: 40px;
    height: 5px;
    border-radius: 5px;
    margin: 10px auto;
    background: linear-gradient(to right, #ffcbaf, #ff6a76)
}

.idcicp-products .products-wrap .product-item {
    padding: 0 0 0 10%
}

.idcicp-products .products-wrap .product-item .sign {
    height: 44px;
    margin: 30px 0 10px;
    position: relative
}

.idcicp-products .products-wrap .product-item .sign img {
    position: relative;
    bottom: 0
}

.idcicp-products .products-wrap .product-item .title {
    line-height: 36px;
    margin: 0;
    font-size: 20px
}

.idcicp-products .products-wrap .product-server {
    background-color: #f2f4f9;
    padding: 10px 0 60px
}

.idcicp-products .products-wrap .product-server .part2 {
    margin-top: 50px
}

.idcicp-products .products-wrap .product-server .card {
    margin: 10px -10px 0
}

.idcicp-products .products-wrap .product-server .card>div {
    padding: 0 10px
}

.idcicp-products .products-wrap .product-server .card>div .item {
    text-align: center;
    background: #fff;
    padding: 20px 0
}

.idcicp-products .products-wrap .product-server .card>div .item:hover:hover {
    cursor: pointer;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1)
}

.idcicp-products .products-wrap .product-server .card>div .item:hover:hover h3 {
    color: #ef2a3a
}

.idcicp-products .products-wrap .product-server .card>div img {
    vertical-align: middle
}

.idcicp-products .products-wrap .white-bg {
    background-color: #fff
}

.idcicp-products .products-wrap .product-cloud {
    background: url(../image/079.jpg) center no-repeat;
    background-size: 100% 100%;
    padding: 20px 0 70px
}

.idcicp-products .products-wrap .product-cloud .tit1 h1 {
    color: #fff
}

.idcicp-products .products-wrap .product-cloud .product-line {
    margin: 20px auto
}

.idcicp-products .products-wrap .product-cloud .title {
    color: #fff
}

.idcicp-products .products-wrap .product-cloud .row {
    padding: 0 15% 0 15%
}

.idcicp-products .products-wrap .product-cloud .product-item .sign {
    margin: 0 0 10px
}

@media screen and (max-width:992px) {
    .idcicp-products .products-wrap .product-cloud .row {
        padding: 0 20px 0
    }

    .idcicp-products .products-wrap .product-cloud .product-item {
        padding: 0;
        width: 50%
    }

    .idcicp-products .products-wrap .product-cloud .title {
        font-size: 16px
    }
}

.idcicp-products .products-wrap .private-cloud .content {
    min-height: 485px;
    background: url(../image/bg01.png) right no-repeat
}

.idcicp-products .products-wrap .private-cloud .item {
    max-width: 500px;
    top: 100px;
    position: relative
}

.idcicp-products .products-wrap .private-cloud .item h1 {
    font-size: 30px;
    margin: 0
}

.idcicp-products .products-wrap .private-cloud .item .product-line {
    margin: 15px 0 20px
}

.idcicp-products .products-wrap .private-cloud .item p {
    line-height: 36px
}

.idcicp-products .products-wrap .private-cloud .title {
    font-size: 18px;
    line-height: 36px;
    color: #429eff
}

.idcicp-products .products-wrap .private-cloud .pro-link {
    margin: 20px 0
}

@media screen and (max-width:768px) {
    .idcicp-products .products-wrap .private-cloud .content {
        background-size: 100%
    }
}

.idcicp-products .products-wrap .product-domain {
    background: url(../image/080.jpg) center no-repeat;
    padding: 0 0 60px
}

.idcicp-products .products-wrap .product-domain .tit1 h1 {
    color: #fff
}

.idcicp-products .products-wrap .product-domain .domain-card {
    padding: 20px 120px
}

.idcicp-products .products-wrap .product-domain .item {
    text-align: center
}

.idcicp-products .products-wrap .product-domain .item span {
    display: block;
    color: #fff;
    font-size: 20px;
    margin: 10px 0
}

.idcicp-products .products-wrap .product-domain .search-bar {
    margin: 40px 0 15px
}

.idcicp-products .products-wrap .product-domain .pro-link {
    margin: auto
}

@media screen and (max-width:768px) {
    .idcicp-products .products-wrap .product-domain .domain-card {
        padding: 20px 20px
    }
}

.idcicp-products .products-wrap .product-email {
    padding: 10px 0 55px
}

.idcicp-products .products-wrap .product-email .pro-link a {
    display: inline-block;
    margin: 40px 0
}

.product-index-content {
    padding: 40px 0 50px
}

.product-index-content.gray {
    background-color: #f2f4f9
}

.product-index-content .tit1 {
    padding: 0
}

@media screen and (max-width:1200px) {
    .product-index-content .data-content .data-item {
        width: 25%
    }
}

@media screen and (max-width:992px) {
    .product-index-content .data-content .data-item {
        width: 33.3%
    }
}

@media screen and (max-width:480px) {
    .product-index-content {
        padding: 30px 0 40px
    }

    .product-index-content .tit1 h2 {
        margin-top: 0;
        font-size: 20px
    }

    .product-index-content .data-content .data-item {
        width: 50%
    }

    .product-index-content .product-index-tit h3 {
        font-size: 16px;
        margin: 10px 0
    }

    .product-index-content .c-data-list .data-txt {
        white-space: nowrap;
        font-size: 12px;
        height: 40px;
        line-height: 40px
    }
}

.product-index-tit h3 {
    font-size: 24px;
    font-weight: bold;
    display: block;
    border-left: 3px solid #ef2a3a;
    padding-left: 15px
}

.product-index-btn .btn {
    margin-top: 20px;
    background-color: #738ba5;
    border-color: #738ba5;
    height: 48px;
    line-height: 48px
}

.server-index section.addvatage {
    padding-top: 30px;
    padding-bottom: 60px
}

.server-index section.addvatage .advantage-wrap {
    box-shadow: 0 0 20px #dcdcdc
}

.server-index .banner-txt {
    max-width: 500px;
    padding-top: 60px
}

.server-index .tit1 h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 10px
}

.server-index .btn-hk {
    color: #0246c1;
    background: #fff;
    border-radius: 10px;
    border: none;
    margin-top: 20px
}

.server-index .part2 {
    background-color: #f4f4f4;
    padding-top: 40px
}

.server-index .part2 .info-header {
    margin-bottom: 40px
}

.server-index .c2-advantage-wrap {
    margin-top: 20px
}

.server-index .c2-advantage-wrap .advantage-table {
    margin-bottom: 40px
}

.server-index .server-service {
    background-color: #f4f4f4;
    padding: 10px 0 60px
}

.server-index .server-cust {
    padding-bottom: 60px
}

.server-index #stack-pic .swiper-slide {
    height: auto
}

@media screen and (min-width:1600px) {
    .server-index h2 {
        font-size: 36px;
        margin-top: 20px;
        margin-bottom: 10px
    }

    .server-index .part2 {
        padding-top: 70px
    }

    .server-index .part2 .info-header {
        margin-bottom: 60px
    }
}

@media screen and (max-width:768px) {
    .server-index .c2-advantage-wrap .advantage-table {
        margin-bottom: 0;
        width: 100%
    }

    .server-index .tit1 h2 {
        font-size: 24px;
        margin: 0
    }

    .server-index .part2 {
        padding-top: 20px
    }

    .server-index .part2 .info-header {
        margin-bottom: 20px
    }

    .server-index .part2 .info-header b {
        font-size: 20px
    }

    .server-index .server-cust {
        padding-bottom: 20px
    }
}

.server-index #circle {
    transition: all 2s;
    stroke-dasharray: 10, 10;
    stroke-dashoffset: 10
}

.server-index svg:hover #circle {
    animation: svgCircle 2s
}

.server-details section.config {
    background: #f1f1f1;
    padding: 20px
}

.server-details section.config .config-table-wrap {
    margin: -24px
}

.server-details section.config .config-table-wrap>* {
    border-collapse: separate;
    border-spacing: 24px
}

.server-details section.config .config-table-wrap .config-table {
    margin-top: 20px
}

.server-details section.config .config-table-wrap .config-table>* {
    vertical-align: top
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info {
    padding: 20px 30px;
    background: #fff;
    border: 1px solid #ddd
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info .tit {
    font-size: 24px;
    border-bottom: 1px solid #ddd;
    padding: 0 30px 20px;
    margin-left: -30px;
    margin-right: -30px;
    position: relative
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info .tit .btn {
    position: absolute;
    right: 30px;
    top: 2px;
    display: none;
    padding: 0 6px
}

@media screen and (max-width:992px) {
    .server-details section.config .config-table-wrap .config-table .select-wrap .select-info .tit .btn {
        display: block
    }
}

@media screen and (max-width:768px) {
    .server-details section.config .config-table-wrap .config-table .select-wrap .select-info .tit {
        margin-left: -20px;
        margin-right: -20px
    }

    .server-details section.config .config-table-wrap .config-table .select-wrap .select-info .tit .btn {
        right: 20px
    }
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table {
    width: 100%
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td {
    padding: 15px 0;
    border-bottom: #e9e9e9 dotted 1px
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul {
    margin: 0
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td .temp1 {
    border: 1px solid #ddd;
    text-align: center;
    line-height: 36px
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td .temp1:hover {
    cursor: pointer
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td .temp2 {
    border-color: #ef2a3a;
    color: #ef2a3a;
    background: #fff8f9
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list {
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list>li {
    border: 1px solid #ddd;
    text-align: center;
    line-height: 36px;
    display: table-cell;
    white-space: nowrap
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list>li:hover {
    cursor: pointer
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list>li:not(:last-child) {
    border-right-color: transparent
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list>li.selected {
    border-color: #ef2a3a;
    color: #ef2a3a;
    background: #fff8f9
}

@media screen and (max-width:600px) {
    .server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list>li {
        display: block;
        margin-bottom: 10px
    }

    .server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list>li:not(:last-child) {
        border-right-color: #ddd
    }

    .server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.h-list>li:not(:last-child).selected {
        border-right-color: #ef2a3a
    }
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list {
    width: 100%
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li {
    position: relative;
    display: block;
    margin-bottom: 6px
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li:last-child {
    margin-bottom: 0 !important
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li b {
    border: 1px solid #ddd;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    font-weight: normal;
    padding: 0 20px
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li b:hover {
    cursor: pointer
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li span {
    position: absolute;
    line-height: 40px;
    right: 0
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li.selected b {
    border-color: #ef2a3a;
    color: #ef2a3a;
    background: #fff8f9
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li.selected span {
    color: #ef2a3a
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td ul.v-list>li:hover span {
    font-weight: bold
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td.quantity .check-form {
    display: inline-block;
    width: 80px;
    margin-right: 6px
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table td.quantity small {
    padding-left: 10px;
    color: #999;
    line-height: 40px
}

.server-details section.config .config-table-wrap .config-table .select-wrap .select-info table .no-border-bottom td {
    border-bottom: none
}

@media screen and (max-width:768px) {
    .server-details section.config .config-table-wrap .config-table .select-wrap .select-info {
        padding: 10px 20px
    }
}

.server-details section.config .config-table-wrap .config-table .check-wrap {
    position: relative;
    width: 280px
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info {
    width: 280px;
    background: #fff;
    border: 1px solid #ddd;
    line-height: 30px
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info .wrap {
    padding: 10px 10px 10px 20px
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info .tit {
    background: #f5f5f5;
    line-height: 40px;
    text-align: center;
    font-weight: bold
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info table {
    width: 100%
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info table td:first-child {
    white-space: nowrap
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info .total {
    border-top: #ddd dashed 1px;
    padding-bottom: 20px;
    text-align: center
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info .total h3 {
    font-size: 18px;
    text-align: left;
    margin: 10px 0
}

.server-details section.config .config-table-wrap .config-table .check-wrap .check-info .total .btn {
    width: 100%
}

@media screen and (max-width:992px) {
    .server-details section.config .config-table-wrap .config-table .check-wrap {
        display: none
    }
}

@media screen and (max-width:992px) {
    .server-details section.config {
        padding: 20px 10px
    }
}

.server-index-hot {
    width: 300px;
    vertical-align: top
}

.server-index-hot .server-hot_wrap {
    width: 260px;
    border: 1px solid #d2d2d2;
    margin-bottom: 20px
}

.server-index-hot .server-hot_tit {
    background: url(../image/server-hot-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 20px 30px
}

.server-index-hot .server-hot_tit .h2 {
    margin: 0;
    font-size: 24px;
    color: #fff
}

.server-index-hot .server-hot_nav {
    background: #fff;
    padding: 20px 30px;
    font-size: 16px
}

.server-index-hot .server-hot_nav>div {
    margin-bottom: 10px
}

.server-index-hot .server-hot_nav h3 {
    font-weight: bold;
    font-size: 16px;
    line-height: 32px;
    margin: 0
}

.server-index-hot .hot_nav-qq {
    position: relative
}

.server-index-hot .hot_nav-qq:hover {
    right: -5px;
    transition: right .5s
}

.server-index-hot .server-hot_more {
    display: block;
    margin-bottom: 20px
}

.server-index-hot .server-hot_ul {
    margin: 0
}

.server-index-hot .server-hot_ul a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    line-height: 32px;
    color: #999
}

.server-index-hot .server-hot_ul a:hover {
    color: #ee675b;
    text-decoration: underline
}

@media screen and (max-width:992px) {
    .server-index-hot {
        display: none
    }
}

.server-index-config {
    vertical-align: top
}

.server-index-config .server-config-title {
    min-height: 80px
}

.server-index-config .server-config-tap {
    position: relative;
    display: inline-block;
    padding-bottom: 30px;
    text-align: center
}

.server-index-config .server-config-tap.server-current>div {
    color: #fff;
    border: transparent
}

.server-index-config .server-config-tap.server-current .item-ab {
    opacity: 1;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0)
}

.server-index-config .server-config-tap.server-current .item-re {
    opacity: 0;
    -webkit-transform: translateY(-23px) rotateX(90deg);
    -moz-transform: translateY(-23px) rotateX(90deg);
    -ms-transform: translateY(-23px) rotateX(90deg);
    -o-transform: translateY(-23px) rotateX(90deg);
    transform: translateY(-23px) rotateX(90deg)
}

.server-index-config .server-config-tap .item {
    cursor: pointer;
    position: relative;
    display: inline-block;
    font-size: 18px;
    padding: 15px 10px;
    opacity: 1;
    text-align: center;
    margin: 0 10px;
    background: #fff;
    border: 1px solid #d2d2d2
}

.server-index-config .server-config-tap .item-re {
    transform-style: preserve-3d;
    transition: all .5s ease
}

.server-index-config .server-config-tap .item-ab {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform: translateY(23px) rotateX(-90deg);
    -moz-transform: translateY(23px) rotateX(-90deg);
    -ms-transform: translateY(23px) rotateX(-90deg);
    -o-transform: translateY(23px) rotateX(-90deg);
    transform: translateY(23px) rotateX(-90deg);
    transition: all .5s ease;
    background: linear-gradient(to right, #f04741, #f48f78)
}

@media screen and (max-width:768px) {
    .server-index-config .server-config-tap {
        padding-bottom: 10px;
        text-align: left
    }

    .server-index-config .server-config-tap .item {
        margin: 0;
        margin-right: 10px
    }
}

.server-index-config .server-config-info {
    border-top: 3px solid #f26b5d
}

.server-index-config .server-config-info .info-item {
    transition: scale ease .5s;
    border: none;
    padding: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16)
}

.server-index-config .server-config-info .info-item:hover {
    scale: 1.02;
    transition: scale ease .5s
}

.server-index-config .server-config-info .info-item .tit {
    background: none;
    border-bottom: none;
    position: relative;
    padding: 15px 30px
}

@media screen and (min-width:1600px) {
    .server-index-config .server-config-info .info-item .tit {
        font-size: 24px
    }
}

.server-index-config .server-config-info .info-item .tit .text {
    position: relative;
    display: inline-block
}

.server-index-config .server-config-info .info-item .server-info-table {
    padding: 0 30px
}

@media screen and (min-width:1600px) {
    .server-index-config .server-config-info .info-item .server-info-table {
        font-size: 16px
    }
}

.server-index-config .server-config-info .info-item .price-info {
    padding: 5px 30px 0
}

.server-index-config .server-config-info .info-item .price-info span {
    margin-right: 20px
}

.server-index-config .server-config-info .info-item .price-info red {
    font-size: 14px
}

@keyframes identifier {
    0% {
        top: -60%
    }

    50% {
        top: -80%
    }

    70% {
        top: -70%
    }

    100% {
        top: -60%
    }
}

.server-index-config .server-config-info.march-hot .tit .text::after {
    content: "";
    width: 50px;
    height: 70px;
    background: url(../image/server-hot-march.png) no-repeat;
    position: absolute;
    background-size: 100%;
    right: -60px;
    top: -70%;
    transition: all .5s;
    animation: identifier linear 1s infinite
}

.server-index-config .config-info_data {
    padding: 10px 0 20px
}

.server-index-config .config-info_btn {
    background-color: #f4f6f8;
    width: 170px;
    text-align: center
}

@media screen and (max-width:1600px) {
    .server-index-config .server-config-tap .item {
        font-size: 16px;
        padding: 10px
    }
}

@media screen and (max-width:992px) {
    .server-index-config .server-config-tap .item {
        font-size: 12px;
        padding: 5px
    }

    .server-index-config .config-info_btn,
    .server-index-config .config-info_data {
        display: block;
        width: 100%
    }

    .server-index-config .config-info_btn {
        text-align: left;
        padding: 10px 30px
    }

    .server-index-config .config-info_data {
        padding-bottom: 0
    }

    .server-index-config .server-config-info .info-item .tit {
        padding: 10px 30px
    }

    .server-index-config .server-config-info .info-item .tit .text {
        font-size: 14px
    }

    .server-index-config .server-config-info .info-item .tit img {
        max-width: 30px
    }
}

.server-index-adv {
    background: url(../image/banner-server-index-adv.jpg) no-repeat center;
    background-size: cover;
    padding: 30px 0
}

.server-index-adv p {
    color: #fff;
    font-size: 26px;
    margin-top: 20px;
    margin-bottom: 10px
}

.server-index-adv img {
    max-width: 80%
}

.server-index-adv .btn {
    background: linear-gradient(#f9ffcc, #ff9611);
    color: #701b00;
    padding: 0 50px;
    border-color: transparent;
    border-radius: 30px
}

@media screen and (max-width:768px) {
    .server-index-adv img {
        max-width: 40%
    }

    .server-index-adv p {
        margin-top: 10px;
        font-size: 16px
    }
}

.server-gpu .banner {
    height: 500px;
    background-size: 100% 100%
}

.server-gpu .banner .main-tit {
    font-size: 48px
}

.server-gpu .banner .banner-txt {
    height: 480px;
    max-width: 450px
}

.server-gpu .banner .subtit {
    margin: 20px 0 25px;
    line-height: 30px;
    font-size: 16px
}

@media screen and (max-width:768px) {
    .server-gpu .banner .main-tit {
        font-size: 32px
    }

    .server-gpu .banner .subtit {
        font-size: 14px;
        line-height: 26px
    }
}

@media screen and (max-width:768px) {
    .server-gpu .flex-row[data-cols="4"] .flex-item {
        width: 100%
    }

    .server-gpu .tit1 {
        padding-top: 0
    }

    .server-gpu .tit1 h2 {
        margin-top: 0
    }
}

.server-scene {
    padding: 20px 0 30px
}

.server-scene .c1 {
    background: url(../image/adv_04.jpg) #f0f7ff
}

.server-scene .c2 {
    background: url(../image/adv_05.jpg) #e7fafe
}

.server-scene .c3 {
    background: url(../image/adv_06.jpg) #f3fff1
}

.server-scene .c4 {
    background: url(../image/adv_07.jpg) #f4f3ff
}

.server-scene .scene-desc {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    padding: 30px 30px 230px
}

.server-scene .scene-desc h5 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #c6d6e9
}

.server-scene .scene-content {
    margin-top: 20px;
    position: relative;
    padding-bottom: 50px;
    height: 100%;
    transition: all .5s;
    transform: scale(1) translateY(0)
}

.server-scene .scene-act {
    position: absolute;
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: 0 30px;
    color: #ef2a3a;
    fill: #ef2a3a;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 20px rgba(159, 169, 182, 0.4)
}

@media screen and (min-width:768px) {
    .server-scene .active .scene-content {
        transition: all .5s;
        transform: scale(1.05) translateY(-11px);
        z-index: 1;
        border-radius: 10px;
        overflow: hidden
    }

    .server-scene .active .scene-act {
        color: #fff;
        background-color: #ef2a3a;
        transition: background-color .9s;
        fill: #fff
    }
}

.server-gpu-plan {
    padding: 0 0 60px
}

.server-gpu-plan .flex-row {
    margin: 20px -20px
}

.server-gpu-plan .flex-item {
    padding: 0 20px;
    margin-bottom: 10px
}

.server-gpu-plan .plan-item {
    border: 1px solid #c6d6e9;
    padding: 20px 30px;
    height: 100%
}

.server-gpu-plan .plan-item h5 {
    font-size: 24px;
    margin-top: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #c6d6e9
}

.server-gpu-plan .plan-item:hover {
    cursor: pointer;
    color: #fff;
    background: url(../image/plan-bg.jpg) no-repeat;
    background-size: 100% 100%
}

@media screen and (max-width:768px) {
    .server-gpu-plan .flex-row {
        margin: 20px -10px
    }

    .server-gpu-plan .flex-row[data-cols="3"] .flex-item {
        width: 100%
    }
}

.server-gpu-pro {
    padding: 10px 0 30px;
    background: url(../image/bg7.jpg) no-repeat;
    background-size: 100% 100%
}

.server-gpu-pro .tit1 {
    padding-bottom: 10px
}

.server-gpu-pro h2 {
    margin-top: 0
}

.server-gpu-pro a {
    color: #ef2a3a
}

.server-gpu-config {
    background: linear-gradient(#d6e8ff, #e9f0ff);
    padding: 70px 0
}

.server-gpu-config .config-item {
    padding: 2px;
    background-color: #fff;
    margin-bottom: 20px;
    transition: all .5s
}

.server-gpu-config .config-item:hover {
    transition: all .5s;
    box-shadow: 0 0 25px rgba(41, 70, 167, 0.3)
}

.server-gpu-config .config-item-wrap {
    flex-flow: nowrap;
    width: 100%;
    justify-content: space-between
}

.server-gpu-config .config-tit {
    width: 200px
}

.server-gpu-config .config-tit>div {
    position: relative;
    height: 100%;
    align-items: center;
    font-size: 18px;
    background: linear-gradient(#e1eaff, #fefdfd)
}

.server-gpu-config .config-tit p {
    margin: 0;
    white-space: nowrap;
    text-align: center
}

.server-gpu-config .config-data {
    padding: 25px 20px
}

.server-gpu-config .config-data .data-item {
    padding: 0 5px
}

.server-gpu-config .config-data .data-item span {
    display: block;
    margin-bottom: 10px
}

.server-gpu-config .config-data .data-item .data-value {
    padding: 0 15px;
    min-width: 95px;
    background-color: #f0f7ff;
    height: 40px;
    white-space: nowrap;
    line-height: 40px
}

.server-gpu-config .config-data .data-item .data-select select {
    height: 40px;
    width: 160px
}

.server-gpu-config .config-btn {
    width: 170px;
    padding: 25px 10px;
    text-align: center
}

.server-gpu-config .config-btn>div {
    height: 100%;
    position: relative;
    border-left: 1px solid #c6d6e9
}

.server-gpu-config .config-btn .btn {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (min-width:768px) {
    .server-gpu-config .config-tit-wrap {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}

@media screen and (max-width:768px) {
    .server-gpu-config {
        padding: 30px 0 30px
    }

    .server-gpu-config .config-tit {
        min-width: 170px
    }
}

@media screen and (max-width:480px) {
    .server-gpu-config .config-tit {
        width: 100%
    }

    .server-gpu-config .config-btn {
        width: 100%;
        text-align: left
    }

    .server-gpu-config .config-item-wrap {
        flex-flow: wrap
    }
}

.server-gpu-adv {
    padding: 10px 0 60px
}

.server-gpu-adv h5 {
    font-size: 18px
}

.server-gpu-adv .flex-row {
    margin: 30px -20px
}

.server-gpu-adv .adv-item {
    padding: 0 20px
}

@media screen and (max-width:768px) {
    .server-gpu-adv {
        padding: 20px 0
    }

    .server-gpu-adv .flex-row {
        margin: 20px 0
    }

    .server-gpu-adv .adv-item {
        border: 1px solid #c6d6e9;
        margin-bottom: 20px;
        padding: 10px 20px
    }

    .server-gpu-adv h5 {
        margin: 10px 0
    }
}

.server-gpu-adv p {
    font-size: 14px;
    line-height: 28px
}

.server-gpu-par {
    padding: 30px 0 80px;
    background: url(../image/partner-bg.jpg) no-repeat center;
    background-size: cover
}

.server-gpu-par .tit1 {
    margin-bottom: 30px
}

.server-gpu-par .tit1 h2 {
    color: #fff
}

.server-gpu-par .partner-item {
    cursor: pointer;
    margin-top: 0;
    transition: all .5s
}

.server-gpu-par .partner-item:hover {
    margin-top: -10px;
    transition: all .5s
}

.idc .banner {
    height: 500px
}

.idc .banner-txt {
    height: 500px
}

.idc .banner-txt h3 {
    margin: 10px 0;
    font-size: 16px;
    line-height: 30px
}

.idc .tab-wrap {
    padding: 30px 0
}

.idc .tab-wrap .tab {
    margin: 0 0
}

.idc .tab-wrap .item {
    font-size: 18px;
    border: 1px solid #a2c9ff;
    line-height: 45px;
    padding: 0 20px
}

.idc .tab-wrap .item.current {
    background-color: #ef2a3a;
    border-color: #ef2a3a;
    color: #fff
}

.idc .tit {
    text-align: center;
    font-size: 30px
}

.idc .tit img {
    vertical-align: middle;
    margin-right: 10px
}

.idc section h2 {
    margin-top: 0;
    margin-bottom: 6px
}

.idc section.intro {
    text-indent: 30px;
    text-align: justify;
    padding: 60px 0
}

.idc section.intro .text {
    padding: 20px 40px;
    line-height: 30px
}

.idc section.info {
    padding: 60px 0
}

.idc section.info .btn {
    margin: auto
}

.idc section.info .info-table {
    margin-top: 20px
}

.idc section.info .visitor-only {
    margin: auto
}

.idc section.info table+.btn {
    display: none;
    margin-top: 10px;
    margin-bottom: 10px
}

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

    .idc section.info .info-table td:last-child,
    .idc section.info .info-table th:last-child {
        display: none
    }

    .idc section.info table+.btn {
        display: block
    }
}

.idc .pro-related .related-box {
    margin: 0 -15px
}

.idc .pro-related .related-box>div {
    padding: 0 15px;
    height: 55px;
    line-height: 55px;
    text-align: center
}

.idc .pro-related .link {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 16px
}

.idc .pro-related .link1 {
    background: url(../image/001.jpg) no-repeat
}

.idc .pro-related .link2 {
    background: url(../image/002.jpg) no-repeat
}

.idc .pro-related .link3 {
    background: url(../image/003.jpg) no-repeat
}

.idc .pro-related .link4 {
    background: url(../image/004.jpg) no-repeat
}

.idc .pro-related .link:hover {
    scale: 1.05;
    transition: scale .5s
}

.idc .idc-engineroom {
    background-color: #f5f9ff;
    padding: 85px 0
}

.idc .idc-engineroom .tit {
    text-align: left;
    font-weight: bold
}

.idc .idc-engineroom .text-table {
    padding-left: 40px
}

.idc .idc-engineroom .text-table .info {
    font-size: 14px;
    line-height: 28px
}

.idc .idc-engineroom .engineroom-row {
    flex-direction: row
}

.idc .idc-engineroom .engineroom-row>div {
    width: 50%
}

.idc .idc-engineroom .gallery-top {
    padding: 20px 0;
    height: 400px;
    text-align: center
}

.idc .idc-engineroom .gallery-top img {
    max-height: 100%
}

.idc .idc-engineroom .gallery {
    height: 130px
}

.idc .idc-engineroom .gallery .swiper-slide {
    opacity: .4
}

.idc .idc-engineroom .gallery .swiper-slide-thumb-active {
    opacity: 1
}

@media screen and (max-width:1200px) {
    .idc .idc-engineroom .text-table {
        width: 100%
    }

    .idc .idc-engineroom .one-row {
        display: block
    }

    .idc .idc-engineroom .one-row>div {
        display: block;
        margin: auto
    }
}

.idc .idc-config {
    padding: 60px 0 120px
}

.idc .idc-config .tit {
    text-align: left;
    font-weight: bold
}

.idc .idc-config-content {
    position: relative
}

.idc .idc-config-info {
    padding: 30px 40px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1)
}

.idc .idc-config .info {
    font-size: 14px;
    line-height: 28px
}

.idc .idc-tips {
    padding: 80px 0;
    background: url(../image/0011.jpg) center no-repeat
}

.idc .idc-tips .tit {
    color: #fff
}

.idc .idc-tips .info {
    margin: 30px 0;
    color: #fff;
    line-height: 30px
}

@media screen and (max-width:1200px) {
    .idc .idc-tips {
        background-size: 100% 100%
    }
}

.idc .idc-sevice {
    padding: 120px 0
}

.idc .idc-sevice-tit {
    width: 250px;
    padding-right: 30px
}

.idc .idc-sevice-tit p {
    text-align: initial;
    font-size: 24px;
    margin: 20px 0;
    color: #333
}

.idc .idc-sevice .tit {
    text-align: left;
    font-weight: bold
}

.idc .idc-sevice-table .table-wrap {
    border-collapse: collapse
}

.idc .idc-sevice-table .icon-h {
    display: none
}

.idc .idc-sevice-table .item {
    width: 20%;
    padding: 80px 10px 70px;
    text-align: center;
    border: 1px solid #a2c9ff;
    vertical-align: top
}

.idc .idc-sevice-table .item span {
    display: block;
    font-weight: bold;
    font-size: 24px;
    margin: 24px 0
}

.idc .idc-sevice-table .item p {
    text-align: center;
    font-size: 18px
}

.idc .idc-sevice-table .item:hover {
    background: linear-gradient(#4693ff, #0063ed);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 59, 142, 0.3);
    transition: all .5s
}

.idc .idc-sevice-table .item:hover .icon {
    display: none
}

.idc .idc-sevice-table .item:hover .icon-h {
    display: inline-block
}

.idc .idc-sevice-table .item:hover span,
.idc .idc-sevice-table .item:hover p {
    color: #fff
}

.idc .document {
    background-color: #f4f6f8
}

.topic-server-net .th {
    background: url(../image/th-l.png) center no-repeat
}

.topic-server-net .jp {
    background: url(../image/jp-l.png) center no-repeat
}

.topic-server-net .za {
    background: url(../image/za-l.png) center no-repeat
}

.topic-server-net .uk {
    background: url(../image/uk-l.png) center no-repeat
}

.topic-server-net .id {
    background: url(../image/id-l.png) center no-repeat
}

.topic-server-net .my {
    background: url(../image/sg-l.png) center no-repeat
}

.topic-server-net .sg {
    background: url(../image/sg-l.png) center no-repeat
}

.topic-server-net .de {
    background: url(../image/de-l.png) center no-repeat
}

.topic-server-net .us {
    background: url(../image/us-l.png) center no-repeat
}

.topic-server-net .in {
    background: url(../image/in-l.png) center no-repeat
}

.topic-server-net .nll {
    background: url(../image/nll-l.png) center no-repeat
}

.topic-server-net .vn {
    background: url(../image/vn-l.png) center no-repeat
}

.topic-server-net .cbd {
    background: url(../image/cbd-l.png) center no-repeat
}

.topic-server-net .ar {
    background: url(../image/ar-l.png) center no-repeat
}

.topic-server-net .au {
    background: url(../image/au-l.png) center no-repeat
}

.topic-server-net .br {
    background: url(../image/br-l.png) center no-repeat
}

.topic-server-net .fr {
    background: url(../image/fr-l.png) center no-repeat
}

.topic-server-net .ca {
    background: url(../image/ca-l.png) center no-repeat
}

.topic-server-net .cz {
    background: url(../image/cz-l.png) center no-repeat
}

.topic-server-net .hk {
    background: url(../image/hk-l.png) top no-repeat
}

.topic-server-net .es {
    background: url(../image/es-l.png) center no-repeat
}

.topic-server-net .tr {
    background: url(../image/tr-l.png) center no-repeat
}

.topic-server-net .it {
    background: url(../image/it-l.png) top no-repeat
}

.topic-server-net .map-node {
    height: 650px;
    background-size: 100%
}

@media screen and (max-width:992px) {
    .topic-server-net .map-node {
        height: 600px
    }
}

.topic-idc-kr section {
    padding-bottom: 60px
}

.topic-idc-kr .tit1 {
    padding: 40px 0 20px
}

.topic-idc-kr .tit1 p {
    color: #666
}

.topic-idc-kr .banner {
    height: 400px
}

.topic-idc-kr .banner .kr-idc-banner {
    display: table-cell;
    vertical-align: middle;
    height: 400px
}

.topic-idc-kr .banner .kr-idc-banner h3,
.topic-idc-kr .banner .kr-idc-banner h2 {
    color: #1d2b95
}

.topic-idc-kr .banner .kr-idc-banner h2 {
    font-size: 50px;
    margin: 0 0 20px 0
}

.topic-idc-kr .banner .kr-idc-banner h3 {
    font-size: 30px;
    margin: 0
}

.topic-idc-kr .banner .kr-idc-banner p {
    font-size: 18px;
    color: #5d6f8f;
    line-height: 30px
}

.topic-idc-kr .banner .kr-idc-banner red {
    font-weight: bold
}

@media screen and (max-width:768px) {
    .topic-idc-kr .banner .kr-idc-banner h2 {
        font-size: 30px;
        margin: 0 0 20px 0
    }

    .topic-idc-kr .banner .kr-idc-banner p {
        font-size: 16px;
        line-height: 24px
    }

    .topic-idc-kr .banner .kr-idc-banner h3 {
        font-size: 20px
    }
}

.topic-idc-kr .part2 {
    background: url(../image/076.jpg) center no-repeat;
    min-height: 500px
}

.topic-idc-kr .part2 h1 {
    font-size: 30px;
    text-align: center;
    color: #fff;
    padding: 95px 0;
    margin: 0
}

.topic-idc-kr .part2 .container p {
    text-align: center;
    color: #a5b1d5;
    padding: 0 50px;
    font-size: 18px;
    line-height: 48px
}

.topic-idc-kr .part3 .topic-gridtable {
    border-color: #626989
}

.topic-idc-kr .part3 .topic-gridtable th {
    width: 11%;
    background-color: #26136e;
    border-color: #626989;
    color: #b3b6cc
}

.topic-idc-kr .part3 .topic-gridtable td {
    border-color: #626989;
    color: #626989
}

.topic-idc-kr .part3 .map {
    margin-top: 20px
}

.topic-idc-kr .part3 .map .one-row>div:last-child {
    text-align: right
}

@media screen and (max-width:1200px) {
    .topic-idc-kr .part3 .one-row>div {
        display: block;
        text-align: center !important
    }

    .topic-idc-kr .part3 img {
        width: 80%
    }
}

.topic-idc-kr .topic-service {
    background-color: #f2f6ff
}

.topic-idc-kr .topic-truststep .tit1 p {
    color: #fff
}

.topic-idc-kr .topic-customer {
    background-color: #fff
}

.topic-idc-kr .topic-customer .partner-table img {
    width: 226px
}

@media screen and (max-width:1200px) {
    .topic-idc-kr .topic-customer .partner-table img {
        width: 160px
    }
}

@media screen and (max-width:768px) {
    .topic-idc-kr .topic-customer .partner-table img {
        width: 100px
    }
}

.topic-idc-korea .tit1 h2 {
    font-size: 48px
}

.topic-idc-korea .banner .kr-idc-banner {
    padding-top: 60px
}

.topic-idc-korea .banner .banner-tit2 {
    margin-top: -20px
}

.topic-idc-korea .topic-service {
    background: url(../image/bg5.jpg) no-repeat
}

.topic-idc-korea .topic-service span,
.topic-idc-korea .topic-service p {
    display: block;
    text-align: center
}

.topic-idc-korea .topic-service span {
    font-size: 24px;
    margin: 10px 0
}

.topic-idc-korea .topic-service img {
    margin: 10px 0
}

.topic-idc-korea .topic-service .float-box {
    border: 1px solid #a0a0a0;
    padding: 30px;
    text-align: center
}

.topic-idc-korea .topic-cust {
    background: url(../image/bg6.jpg) no-repeat
}

.topic-idc-korea .topic-cust h2 {
    color: #fff
}

.topic-idc-uk section.banner .title1 {
    padding: 170px 0 0 0
}

.topic-idc-uk section.banner .title3 {
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    line-height: 60px
}

.topic-idc-uk .topic-sever-configure .red {
    line-height: 36px
}

.topic-idc-uk .topic-datacenter {
    background-color: #fff
}

.topic-idc-uk .topic-server-net .text {
    padding: 0 90px
}

@media screen and (max-width:768px) {
    .topic-idc-uk section.banner .title1 {
        padding: 120px 0 0 0
    }

    .topic-idc-uk section.banner .title3 {
        font-size: 16px;
        line-height: 30px
    }

    .topic-idc-uk .topic-server-net .text {
        padding: 0 5%
    }
}

.topic-idc-nll section.banner .title1 {
    padding: 230px 0 0 0
}

.topic-idc-nll section.banner .title3 {
    color: #fff;
    font-weight: normal;
    font-size: 24px;
    line-height: 48px;
    text-align: center
}

@media screen and (max-width:992px) {
    .topic-idc-nll section.banner .title1 {
        padding: 160px 0 20px 0
    }

    .topic-idc-nll section.banner .title3 {
        font-size: 16px;
        line-height: 36px
    }
}

.topic-idc-vn section.banner .title1 {
    padding: 200px 0 30px 0
}

.topic-idc-cbd section.banner .title1 {
    padding: 145px 0 10px 0
}

.topic-idc-cbd section.banner .title3 {
    color: #fff;
    font-weight: normal;
    font-size: 24px;
    line-height: 48px;
    text-align: center
}

@media screen and (max-width:992px) {
    .topic-idc-cbd section.banner .title3 {
        font-size: 16px;
        line-height: 36px
    }
}

.topic-idc-in section.banner .title1 {
    padding: 240px 0 20px 0
}

.topic-idc-in section.banner .title3 {
    color: #fff;
    font-weight: normal;
    font-size: 24px;
    line-height: 48px;
    text-align: center
}

@media screen and (max-width:992px) {
    .topic-idc-in section.banner .title1 {
        padding: 160px 0 20px 0
    }

    .topic-idc-in section.banner .title3 {
        font-size: 16px;
        line-height: 36px
    }
}

.topic-idc-id section.banner .title1 {
    padding: 170px 0 50px 10%
}

.topic-idc-br section.banner .title1,
.topic-idc-au section.banner .title1,
.topic-idc-ar section.banner .title1,
.topic-idc-fr section.banner .title1,
.topic-idc-ca section.banner .title1,
.topic-idc-cz section.banner .title1,
.topic-idc-es section.banner .title1,
.topic-idc-tr section.banner .title1,
.topic-idc-it section.banner .title1 {
    padding: 210px 0 15px
}

.topic-idc-br section.banner .title3,
.topic-idc-au section.banner .title3,
.topic-idc-ar section.banner .title3,
.topic-idc-fr section.banner .title3,
.topic-idc-ca section.banner .title3,
.topic-idc-cz section.banner .title3,
.topic-idc-es section.banner .title3,
.topic-idc-tr section.banner .title3,
.topic-idc-it section.banner .title3 {
    color: #fff;
    font-size: 24px;
    line-height: 48px;
    font-weight: normal
}

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

    .topic-idc-br section.banner .title1,
    .topic-idc-au section.banner .title1,
    .topic-idc-ar section.banner .title1,
    .topic-idc-fr section.banner .title1,
    .topic-idc-ca section.banner .title1,
    .topic-idc-cz section.banner .title1,
    .topic-idc-es section.banner .title1,
    .topic-idc-tr section.banner .title1,
    .topic-idc-it section.banner .title1 {
        padding: 150px 0 15px 0
    }

    .topic-idc-br section.banner .title3,
    .topic-idc-au section.banner .title3,
    .topic-idc-ar section.banner .title3,
    .topic-idc-fr section.banner .title3,
    .topic-idc-ca section.banner .title3,
    .topic-idc-cz section.banner .title3,
    .topic-idc-es section.banner .title3,
    .topic-idc-tr section.banner .title3,
    .topic-idc-it section.banner .title3 {
        font-size: 16px;
        line-height: 36px
    }
}

.topic-idc-br .topic-datacenter,
.topic-idc-au .topic-datacenter,
.topic-idc-ar .topic-datacenter,
.topic-idc-fr .topic-datacenter,
.topic-idc-ca .topic-datacenter,
.topic-idc-cz .topic-datacenter,
.topic-idc-es .topic-datacenter,
.topic-idc-tr .topic-datacenter,
.topic-idc-it .topic-datacenter {
    background-color: #fff
}

.topic-idc-ar .topic-sever-configure .red {
    line-height: 36px;
    margin-top: 30px
}

.topic-idc-ph section.banner .text1 {
    font-size: 18px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: normal
}

.topic-idc-ph section.banner .text2 {
    background: #ff8f44;
    width: 389px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 48px;
    font-size: 24px;
    color: #fff;
    margin: auto
}

@media screen and (max-width:1200px) {
    .topic-idc-ph section.banner .text1 {
        font-size: 16px;
        line-height: 30px
    }

    .topic-idc-ph section.banner .text2 {
        font-size: 20px;
        width: 300px
    }
}

@media screen and (max-width:768px) {
    .topic-idc-ph section.banner .title1 {
        padding: 120px 0 10px
    }

    .topic-idc-ph section.banner .text2 {
        font-size: 16px;
        width: 250px;
        height: 40px;
        line-height: 40px
    }
}

.topic-idc-ph .topic-server-net .ph {
    background: url(../image/ph-l.png) center no-repeat;
    background-size: 100%;
    height: 650px
}

.topic-idc-ru .topic-server-net .ru {
    background: url(../image/ru-l.png) center no-repeat;
    background-size: 100%;
    height: 650px
}

.topic-idc-de .topic-solution .card-nav {
    width: 220px
}

.topic-idc-tw section.banner {
    height: 520px
}

.topic-idc-tw section.banner .title2 {
    padding: 150px 0 40px
}

.topic-idc-tw section.banner .title1 {
    padding: 0
}

.topic-idc-tw .topic-server-net .tw {
    background: url(../image/tw-l.png) center no-repeat;
    background-size: 100%;
    height: 650px
}

.topic-idc-tw .topic-solution .card-nav {
    width: 220px
}

@media screen and (max-width:1200px) {
    .topic-idc-tw section.banner .title1 {
        width: 50%
    }

    .topic-idc-tw section.banner .title2 {
        width: 80%
    }
}

@media screen and (max-width:768px) {
    .topic-idc-tw section.banner {
        height: 400px
    }

    .topic-idc-tw section.banner .title2 {
        padding: 120px 0 40px
    }
}

.topic-idc-us section.banner {
    height: 547px
}

.topic-idc-us section.banner .title1 {
    padding: 170px 0 50px 10%
}

.topic-idc-us .part1 .tit1 {
    padding: 45px 0 20px
}

.topic-idc-us .part1 .card {
    margin: 30px 0
}

.topic-idc-us .part1 .row {
    margin: 0 -25px
}

.topic-idc-us .part1 .col-8 {
    padding: 0 25px
}

.topic-idc-us .part1 .item {
    text-align: center;
    min-height: 255px;
    border: 1px solid #eee;
    padding: 30px 10px
}

.topic-idc-us .part1 .item p {
    text-align: center
}

.topic-idc-us .topic-solution .card-nav {
    width: 220px
}

.topic-idc-us .topic-protect .topic-button {
    margin-top: 35px
}

@media screen and (max-width:1200px) {
    .topic-idc-us section.banner .title1 {
        width: 60%;
        padding: 170px 0 50px 5%
    }

    .topic-idc-us section.banner .title2 {
        width: 40%
    }
}

@media screen and (max-width:768px) {
    .topic-idc-us section.banner {
        height: 350px
    }

    .topic-idc-us section.banner .title1 {
        width: 90%;
        padding: 100px 0 30px 8%
    }

    .topic-idc-us section.banner .title2 {
        width: 60%
    }
}

.topic-idc-hn section:not(.topic-titlebox) {
    padding-bottom: 50px
}

.topic-idc-hn section.banner {
    height: 500px
}

.topic-idc-hn section.banner h1 {
    font-weight: bold;
    font-size: 48px !important
}

.topic-idc-hn section.banner img {
    margin-bottom: 20px
}

.topic-idc-hn section.banner h3 {
    padding: 15px 0;
    width: 95%
}

.topic-idc-hn section.banner .banner-txt {
    height: 520px
}

.topic-idc-hn section.banner .banner-txt h3 {
    line-height: 36px
}

@media screen and (max-width:768px) {
    .topic-idc-hn section.banner .banner-txt img {
        width: 100%
    }
}

.topic-idc-hn .map-jx-img {
    position: relative;
    height: 530px;
    background: url(../image/map-hn.jpg) center no-repeat
}

.topic-idc-hn .bandwidth {
    background-color: #f0f5fd
}

.topic-idc-hn .bandwidth .tit1 p {
    color: #566b89
}

.topic-idc-hn .bandwidth .content img {
    width: 100%
}

.topic-idc-hn .topic-service p {
    color: #566b89
}

.topic-idc-hn .topic-service .item-img1 {
    background: url(../image/007.jpg) center no-repeat
}

.topic-idc-hn .topic-service .item-img2 {
    background: url(../image/008.jpg) center no-repeat
}

.topic-idc-hn .topic-service .item-img3 {
    background: url(../image/009.jpg) center no-repeat
}

.topic-idc-hn .topic-service .item-img4 {
    background: url(../image/010.jpg) center no-repeat
}

.topic-idc-hn .topic-service .item-img5 {
    background: url(../image/011.png) center no-repeat
}

.topic-idc-hn .topic-service .item-img6 {
    background: url(../image/012.jpg) center no-repeat
}

.topic-idc-hn .topic-province-map .tit1 p {
    color: #566b89
}

.topic-idc-hn .topic-province-map .datacenter {
    right: 250px;
    bottom: 50px
}

.topic-idc-hn .topic-province-map .datacenter span {
    top: -10px;
    line-height: 36px
}

.topic-idc-hn .topic-speed .map-img {
    background: url(../image/map4.png) center no-repeat;
    min-height: 331px
}

.topic-idc-hn .topic-speed .map-line {
    background: url(../image/map-line4.png) no-repeat right bottom
}

.topic-idc-hn .topic-speed .map-line {
    right: -90px;
    bottom: -55px
}

.topic-idc-hn .topic-configure {
    background-color: #f0f5fd
}

.topic-idc-hn .topic-configure .tit1 p {
    color: #566b89;
    line-height: 44px;
    padding: 15px 20px
}

.topic-idc-hn .topic-configure a {
    color: #1e6ad9
}

.topic-idc-hn .topic-configure img {
    margin-bottom: 10px;
    width: 100%
}

.topic-idc-hn section.partner {
    background-color: #f0f5fd;
    padding: 50px 0
}

.topic-idc-hn section.partner .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.topic-idc-hn section.partner .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .topic-idc-hn section.partner .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .topic-idc-hn section.partner .partner-table img {
        width: 60px
    }
}

@media screen and (min-width:769px) {
    .topic-idc-hn section.partner .partner-table img {
        width: 228px
    }
}

.topic-idc-jx section.banner {
    height: 700px
}

.topic-idc-jx section.banner .title-color {
    color: #0d5fd9;
    font-weight: normal
}

.topic-idc-jx section.banner h1 {
    font-weight: bold;
    font-size: 48px !important
}

.topic-idc-jx section.banner h3 {
    padding: 15px 0;
    color: #566b89;
    width: 80%
}

.topic-idc-jx section.banner .btn {
    background: #00cfc8;
    border-radius: 30px;
    border: none
}

.topic-idc-jx section.banner .btn:hover {
    background: #61d4d1
}

.topic-idc-jx section.banner .banner-txt {
    height: 420px
}

@media screen and (max-width:768px) {
    .topic-idc-jx section.banner {
        height: 600px
    }

    .topic-idc-jx section.banner h1 {
        font-size: 25px !important
    }
}

.topic-idc-jx section:not(.topic-titlebox) {
    padding-bottom: 50px
}

.topic-idc-jx .topic-titlebox .recommend {
    position: absolute;
    width: 100%;
    top: -150px;
    z-index: 99
}

.topic-idc-jx .topic-province-map p {
    color: #566b89
}

.topic-idc-jx .topic-province-map .map-jx-img {
    position: relative;
    height: 530px;
    background: url(../image/map-jx.jpg) center no-repeat
}

.topic-idc-jx .topic-province-map .map-line {
    background: url(../image/map-line3.png) no-repeat right bottom
}

.topic-idc-jx .bandwidth {
    background-color: #f0f5fd
}

.topic-idc-jx .bandwidth .content img {
    width: 100%
}

.topic-idc-jx .topic-speed .map-img {
    background: url(../image/map4.png) center no-repeat;
    min-height: 331px
}

.topic-idc-jx .topic-speed .map-line {
    background: url(../image/map-line3.png) no-repeat right bottom
}

.topic-idc-jx .scheme {
    background: url(../image/071.jpg) center
}

.topic-idc-jx .scheme .content {
    width: 80%;
    margin: auto
}

.topic-idc-jx .scheme .col-8 {
    text-align: center;
    padding: 15px
}

.topic-idc-jx .scheme .col-8 img {
    width: 100%
}

.topic-idc-jx .scheme .col-8>div {
    background: #fff;
    box-shadow: 0 0 16px rgba(37, 113, 220, 0.12);
    padding: 30px 0 20px 0
}

.topic-idc-jx .scheme .col-8>div>div {
    width: 60px;
    height: 60px;
    margin: auto
}

.topic-idc-jx .scheme .col-8 h3 {
    font-weight: bold
}

.topic-idc-jx .scheme .scheme-nav {
    cursor: pointer
}

.topic-idc-jx .scheme .scheme-nav .hover {
    display: block
}

.topic-idc-jx .scheme .scheme-nav .unhover {
    display: none
}

.topic-idc-jx .scheme .scheme-nav h3 {
    color: #1e6ad9
}

.topic-idc-jx .scheme .scheme-nav>div {
    border: 1px solid #1e6ad9
}

.topic-idc-jx .scheme .hover {
    display: none
}

.topic-idc-jx .scheme .pointer {
    display: none;
    border: 1px solid #acc8f0;
    padding: 10px;
    margin-top: 20px;
    min-height: 76px
}

.topic-idc-jx .scheme .pointer p {
    text-align: center;
    width: 50%
}

.topic-idc-jx .topic-configure .tit1 p {
    color: #566b89;
    padding: 15px 20px
}

.topic-idc-jx .topic-configure a {
    color: #1e6ad9
}

.topic-idc-jx .topic-configure img {
    margin-bottom: 10px;
    width: 100%
}

.topic-idc-jx section.partner {
    padding: 50px 0
}

.topic-idc-jx section.partner .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.topic-idc-jx section.partner .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .topic-idc-jx section.partner .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .topic-idc-jx section.partner .partner-table img {
        width: 60px
    }
}

@media screen and (max-width:480px) {
    .topic-idc-jx .tit1 h1 {
        font-size: 22px
    }

    .topic-idc-jx .tit1 p {
        font-size: 14px
    }
}

.topic-idc-hk .common-title .tit {
    text-align: center
}

.topic-idc-hk .common-title>div {
    font-size: 30px;
    font-weight: bold
}

.topic-idc-hk .common-title .t-line {
    position: relative;
    display: inline-block;
    margin: auto;
    white-space: nowrap;
    padding: 0 180px;
    color: #333
}

.topic-idc-hk .common-title .t-line::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 163px;
    height: 21px;
    left: 0;
    background: url(../image/tit1-l.png ) no-repeat center
}

.topic-idc-hk .common-title .t-line::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 163px;
    height: 21px;
    right: 0;
    background: url(../image/tit1-r.png ) no-repeat center
}

.topic-idc-hk .common-title p {
    font-size: 16px;
    line-height: 36px;
    color: #666
}

.topic-idc-hk .btn-hk {
    background: linear-gradient(to right, #2397f7, #3674e4);
    border-radius: 5px;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    border: none;
    width: 140px;
    margin: 0 60px
}

.topic-idc-hk .topic-banner {
    height: 930px
}

.topic-idc-hk .topic-banner .content {
    height: 500px
}

.topic-idc-hk .topic-banner .wrapper {
    position: relative
}

.topic-idc-hk .topic-banner .gif1 {
    position: absolute;
    right: 27px;
    top: 27px
}

.topic-idc-hk .topic-banner .title {
    height: 500px;
    display: table-cell;
    vertical-align: middle
}

.topic-idc-hk .topic-banner .title a {
    color: #0246c1;
    background: #fff;
    border-radius: 10px;
    border: none;
    margin-top: 55px
}

@media screen and (max-width:1200px) {
    .topic-idc-hk .topic-banner .gif1 {
        display: none
    }
}

@media screen and (max-width:480px) {
    .topic-idc-hk .topic-banner {
        height: 650px
    }

    .topic-idc-hk .topic-banner .content,
    .topic-idc-hk .topic-banner .title {
        height: 350px
    }
}

.topic-idc-hk .topic-hk-brand {
    margin-top: -450px
}

.topic-idc-hk section.card {
    padding-bottom: 30px
}

.topic-idc-hk section.card .row {
    margin: 20px -56px 0
}

.topic-idc-hk section.card .item {
    padding: 20px 56px;
    text-align: center
}

.topic-idc-hk section.card .item span {
    font-size: 18px;
    color: #2397f7
}

.topic-idc-hk section.card .item p {
    color: #333
}

.topic-idc-hk .exclusive {
    padding: 50px 0
}

.topic-idc-hk .exclusive .content {
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.2);
    padding: 30px 55px 20px;
    margin-bottom: 20px
}

.topic-idc-hk .exclusive .col-2 {
    padding: 20px
}

.topic-idc-hk .exclusive .col-2>div {
    border: 1px solid #e5e5e5;
    position: relative
}

.topic-idc-hk .exclusive .top-line {
    position: absolute;
    top: 0;
    height: 3px;
    width: 100%
}

.topic-idc-hk .exclusive ul {
    padding: 10px 20px 0
}

.topic-idc-hk .exclusive li {
    list-style: inside;
    font-size: 16px;
    line-height: 42px
}

.topic-idc-hk .exclusive li span {
    color: #333;
    margin-left: -8px
}

.topic-idc-hk .exclusive li .BW {
    display: inline-block;
    width: 116px;
    height: 36px;
    color: #fff;
    border-radius: 5px;
    line-height: 36px;
    text-align: center;
    background: linear-gradient(to right, #ff977c, #ff694e)
}

.topic-idc-hk .exclusive .more {
    padding: 0 30px 30px;
    font-size: 24px;
    line-height: 36px;
    display: block
}

.topic-idc-hk .exclusive .item1 .top-line {
    background: linear-gradient(to right, #2397f7, #3674e4)
}

.topic-idc-hk .exclusive .item1 li {
    color: #2497f7
}

.topic-idc-hk .exclusive .item1 .more {
    color: #2497f7
}

.topic-idc-hk .exclusive .item2 .top-line {
    background: linear-gradient(to right, #2dd67f, #06b07e)
}

.topic-idc-hk .exclusive .item2 li {
    color: #2dd67f
}

.topic-idc-hk .exclusive .item2 .more {
    color: #2dd67f
}

.topic-idc-hk .exclusive .item3 .top-line {
    background: linear-gradient(to right, #ecc333, #f29720)
}

.topic-idc-hk .exclusive .item3 li {
    color: #ecc333
}

.topic-idc-hk .exclusive .item3 .more {
    color: #ecc333
}

.topic-idc-hk .business {
    padding: 30px 0 0
}

.topic-idc-hk .business .content {
    min-height: 568px;
    background: url(../image/081.jpg) center no-repeat;
    background-size: 100% 100%
}

.topic-idc-hk .business .content p {
    font-size: 16px;
    color: #333;
    padding: 40px 168px 10px;
    line-height: 30px
}

.topic-idc-hk .business .content .chart {
    margin-bottom: 25px
}

.topic-idc-hk .business .content span {
    font-weight: bold;
    color: #333;
    display: block;
    font-size: 24px;
    line-height: 60px
}

.topic-idc-hk .topic-server-net {
    padding: 60px 0;
    background: linear-gradient(to right, #3674e4, #2397f7)
}

.topic-idc-hk .topic-server-net .common-title .t-line,
.topic-idc-hk .topic-server-net .common-title p {
    color: #fff
}

.topic-idc-hk .topic-server-net .node-table {
    bottom: 60px
}

.topic-idc-hk .topic-server-net .topic-gridtable td {
    min-width: 55px;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff
}

.topic-idc-hk .topic-server-net .node-btn {
    margin-top: -20px
}

.topic-idc-hk .topic-server-net .node-btn a {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: border .5s
}

.topic-idc-hk .topic-server-net .node-btn a:hover {
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: border .5s
}

.topic-idc-hk .technology .common-title>div {
    color: #333
}

.topic-idc-hk .technology .text {
    font-size: 16px;
    color: #333
}

.topic-idc-hk .technology .btn-hk {
    margin-left: 0
}

.topic-idc-hk .technology .green-line {
    height: 3px;
    width: 50px;
    background: #2dd67f;
    margin: 10px 0
}

.topic-idc-hk .autonomy .text {
    line-height: 36px;
    padding: 0 50px 30px 0
}

.topic-idc-hk .raid {
    background: #f2f9ff;
    padding: 80px 0 60px
}

.topic-idc-hk .raid .one-row>div {
    width: 50%
}

.topic-idc-hk .raid .text {
    line-height: 30px
}

.topic-idc-hk .raid .raid-table {
    border-collapse: collapse;
    min-height: 90px;
    margin-bottom: 20px
}

.topic-idc-hk .raid .raid-table td {
    background: #fff;
    border: 1px solid #e5e5e5;
    width: 33.3%;
    vertical-align: top;
    color: #999;
    padding: 5px 10px
}

.topic-idc-hk .raid .raid-table b {
    font-size: 18px;
    display: block;
    text-align: center;
    color: #333
}

.topic-idc-hk .topic-solution {
    padding: 65px 0 30px
}

.topic-idc-hk .topic-solution .content {
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
}

.topic-idc-hk .topic-solution .topo-wrap .topo-display {
    border: none
}

.topic-idc-hk .topic-solution .topo-wrap .topo-display h3 {
    color: #fff;
    width: 106px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background: linear-gradient(to right, #ff977c, #ff694e)
}

.topic-idc-hk .topic-solution .topo-wrap .topo-display ul {
    margin: 10px 0 20px
}

.topic-idc-hk .topic-solution .topo-wrap .topo-display li {
    padding-left: 0;
    list-style: inside;
    font-size: 16px;
    line-height: 36px;
    color: #2dd67f
}

.topic-idc-hk .topic-solution .topo-wrap .topo-display li span {
    color: #333;
    margin-left: -10px
}

.topic-idc-hk .topic-solution .topo-wrap .topo-display li::before {
    display: none
}

.topic-idc-hk .topic-solution .title {
    min-height: 109px;
    background: url(../image/hk20.png);
    background-size: 100% 100%
}

.topic-idc-hk .topic-solution .title p {
    padding: 30px 115px 0;
    color: #fff;
    font-size: 16px;
    line-height: 30px
}

.topic-idc-hk .topic-solution .autonomy-btn .btn-hk {
    margin: 0 60px 20px 0
}

.topic-idc-hk .topic-customer {
    padding-top: 30px;
    background: #fff
}

@media screen and (max-width:1200px) {
    .topic-idc-hk .topic-banner .tit {
        width: 80%
    }

    .topic-idc-hk .topic-hk-brand {
        margin-top: -300px
    }

    .topic-idc-hk .topic-hk-brand .common-title {
        display: block
    }

    .topic-idc-hk .topic-hk-brand .brand-img {
        display: none
    }

    .topic-idc-hk .topic-hk-brand .wrapper>.one-row {
        margin-left: 0
    }

    .topic-idc-hk .exclusive .content {
        padding: 30px 0 20px
    }

    .topic-idc-hk .business .content p {
        padding: 40px 10px 10px
    }

    .topic-idc-hk .business .content .chart {
        width: 80%
    }

    .topic-idc-hk .technology {
        padding: 50px 0
    }

    .topic-idc-hk .technology .pic {
        display: none
    }

    .topic-idc-hk .solution .title p {
        padding: 30px 10px
    }
}

@media screen and (max-width:768px) {
    .topic-idc-hk .btn-hk {
        margin: 0
    }

    .topic-idc-hk .common-title .t-line {
        padding: 0 0
    }

    .topic-idc-hk .common-title .t-line::before,
    .topic-idc-hk .common-title .t-line::after {
        display: none
    }

    .topic-idc-hk .topic-server-net .map-node {
        height: 400px
    }

    .topic-idc-hk .topic-hk-brand .card>div {
        height: auto
    }

    .topic-idc-hk .topic-hk-brand .card .item {
        display: block;
        border-bottom: 1px solid #e5e5e5
    }

    .topic-idc-hk .topic-solution {
        padding: 30px 0
    }

    .topic-idc-hk .topic-solution .title p {
        padding: 10px
    }

    .topic-idc-hk .topic-solution .autonomy-btn .btn-hk {
        margin: 0 20px 20px 0
    }
}

.domain-index section.banner {
    height: 360px;
    padding-top: 10px;
    padding-bottom: 20px
}

.domain-index section.banner .wrapper>h1 {
    text-align: center;
    font-size: 36px;
    color: #fff;
    margin-top: 60px;
    margin-bottom: 0;
    white-space: nowrap
}

.domain-index section.banner .wrapper>p {
    text-align: center;
    color: #999;
    font-size: 18px;
    margin-bottom: 38px
}

.domain-index section.banner .search-bar-wrap .search-bar .tips h3,
.domain-index section.banner .search-bar-wrap .search-bar .tips p {
    color: #ffffff
}

.domain-index section.banner .search-bar-list {
    position: relative;
    padding-left: 130px;
    height: 21px;
    overflow: hidden;
    padding-right: 36PX
}

.domain-index section.banner .search-bar-list li {
    display: inline-block;
    width: 80px;
    color: #fff;
    font-size: 14px
}

.domain-index section.banner .search-bar-list a {
    position: absolute;
    top: 0;
    right: 0;
    color: #999
}

.domain-index section.banner .search-bar-list .icheckbox_minimal {
    margin-right: 4px;
    background-image: url(../image/icheck-sm.png)
}

@media screen and (max-width:1200px) {
    .domain-index section.banner .search-bar-list li {
        width: 60px
    }
}

@media screen and (max-width:768px) {
    .domain-index section.banner .search-bar-list {
        padding-left: 0
    }
}

.domain-index section.why {
    background: #f5f5f5;
    padding: 20px 0 60px
}

.domain-index section.why .why-table {
    margin: 0 -20px
}

.domain-index section.why .why-table .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.domain-index section.why .why-table .one-row>div {
    background: #fff;
    padding: 20px 40px;
    text-align: center;
    width: 25%;
    vertical-align: top
}

.domain-index section.why .why-table .one-row>div p {
    color: #333;
    text-align: center;
    line-height: 24px
}

@media screen and (max-width:768px) {
    .domain-index section.why .why-table {
        margin: 0
    }

    .domain-index section.why .why-table .one-row {
        display: block
    }

    .domain-index section.why .why-table .one-row>div {
        display: block;
        width: 100%;
        margin-bottom: 20px
    }
}

.domain-index section.brand .brand-table {
    margin: -20px
}

.domain-index section.brand .brand-table .one-row {
    position: relative;
    border-collapse: separate;
    border-spacing: 20px
}

.domain-index section.brand .brand-table .one-row>div {
    vertical-align: top
}

.domain-index section.brand .brand-table .one-row .texts {
    position: relative;
    z-index: 2;
    width: 50%
}

.domain-index section.brand .brand-table .one-row .texts h2 {
    font-size: 20px;
    font-weight: bold
}

.domain-index section.brand .brand-table .one-row .texts h3 {
    font-size: 16px
}

.domain-index section.brand .brand-table .one-row .texts ul li h4 {
    position: relative;
    font-size: 14px;
    padding-left: 24px;
    margin: 6px 0
}

.domain-index section.brand .brand-table .one-row .texts ul li h4::before {
    content: "";
    background: url(../image/dot-18.png) no-repeat center;
    display: block;
    height: 17px;
    width: 18px;
    position: absolute;
    left: 0;
    top: 2px
}

.domain-index section.brand .brand-table .one-row .texts ul li p {
    line-height: 24px;
    color: #999
}

.domain-index section.brand .brand-table .one-row .imgs {
    text-align: center;
    max-width: 50%
}

.domain-index section.brand .brand-table .one-row .imgs img {
    max-width: 100%
}

@media screen and (max-width:992px) {
    .domain-index section.brand .brand-table {
        margin: 0
    }

    .domain-index section.brand .brand-table .one-row {
        display: block
    }

    .domain-index section.brand .brand-table .one-row>div {
        display: block;
        margin-bottom: 40px
    }

    .domain-index section.brand .brand-table .one-row .texts {
        width: 100%
    }

    .domain-index section.brand .brand-table .one-row .imgs img {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        opacity: .2
    }
}

.domain-index section.report .report-table {
    background: url(../image/041.png) center no-repeat;
    background-size: cover;
    padding: 20px
}

.domain-index section.report .report-table>h2 {
    font-size: 24px;
    padding-left: 10px;
    margin-top: 12px;
    margin-bottom: 4px
}

.domain-index section.report .report-table .one-row {
    border-collapse: separate;
    border-spacing: 10px
}

.domain-index section.report .report-table .one-row>div {
    position: relative
}

.domain-index section.report .report-table .one-row>div:nth-child(1) {
    width: 20%
}

.domain-index section.report .report-table .one-row>div:nth-child(2) {
    width: 20%
}

.domain-index section.report .report-table .one-row>div:last-child {
    width: 15%
}

.domain-index section.report .report-table .one-row>div .b02 {
    width: 100%
}

.domain-index section.report .report-table .one-row>div label {
    position: absolute;
    top: 0;
    left: 10px;
    line-height: 38px
}

.domain-index section.report .report-table .one-row>div input {
    padding-left: 50px
}

.domain-index section.report .report-table .one-row>div input::-webkit-input-placeholder {
    color: #999
}

.domain-index section.report .report-table .one-row>div input::-moz-placeholder {
    color: #999
}

.domain-index section.report .report-table .one-row>div input:-moz-placeholder {
    color: #999
}

.domain-index section.report .report-table .one-row>div input:-ms-input-placeholder {
    color: #999
}

@media screen and (max-width:768px) {
    .domain-index section.report .report-table {
        margin: 0
    }

    .domain-index section.report .report-table h2 {
        text-align: center
    }

    .domain-index section.report .report-table .one-row {
        display: block
    }

    .domain-index section.report .report-table .one-row>div {
        display: block;
        width: 100% !important;
        margin-bottom: 10px
    }
}

.domain-index section.partner {
    padding: 50px 0
}

.domain-index section.partner .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.domain-index section.partner .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .domain-index section.partner .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .domain-index section.partner .partner-table img {
        width: 60px
    }
}

.domain-result section.banner {
    height: 195px;
    padding-top: 10px;
    padding-bottom: 20px
}

.domain-result section.banner .wrapper>h1 {
    text-align: center;
    font-size: 36px;
    color: #fff;
    margin-top: 60px;
    margin-bottom: 0;
    white-space: nowrap
}

.domain-result section.banner .wrapper>p {
    text-align: center;
    color: #999;
    font-size: 18px;
    margin-bottom: 38px
}

.domain-result section.banner .search-bar-wrap {
    padding: 30px 50px 0
}

.domain-result section.banner .search-bar-wrap .search-bar .tips h3,
.domain-result section.banner .search-bar-wrap .search-bar .tips p {
    color: #ffffff
}

.domain-result section.banner .search-bar-list {
    position: relative;
    padding-left: 70px;
    margin: 0;
    height: 21px;
    overflow: hidden;
    padding-right: 36PX
}

.domain-result section.banner .search-bar-list li {
    display: inline-block;
    width: 80px;
    color: #fff;
    font-size: 14px
}

.domain-result section.banner .search-bar-list a {
    position: absolute;
    top: 0;
    right: 60px;
    color: #999
}

.domain-result section.banner .search-bar-list .icheckbox_minimal {
    margin-right: 4px;
    background-image: url(../image/icheck-sm.png)
}

@media screen and (max-width:1200px) {
    .domain-result section.banner .search-bar-list li {
        width: 60px
    }
}

@media screen and (max-width:768px) {
    .domain-result section.banner .search-bar-list {
        padding-left: 0
    }
}

.domain-result section.result {
    padding-top: 20px;
    padding-bottom: 120px
}

.domain-result section.result .result-table {
    color: #333;
    border: 1px solid #dcdcdc;
    padding: 0 0 50px
}

.domain-result section.result .result-table .some-row>div>div {
    font-size: 14px;
    padding: 10px 20px;
    border-bottom: #dde4ee solid 1px;
    text-align: right;
    vertical-align: middle
}

.domain-result section.result .result-table .some-row>div>div .btn {
    border: none;
    color: #2d94ff
}

.domain-result section.result .result-table .some-row>div>div .btn:hover {
    text-decoration: underline;
    background: none
}

.domain-result section.result .result-table .some-row>div>div>span {
    color: #ff9037;
    font-weight: bold;
    white-space: nowrap
}

.domain-result section.result .result-table .some-row>div>div>span.available {
    color: #008000
}

.domain-result section.result .result-table .some-row>div>div small {
    white-space: nowrap
}

.domain-result section.result .result-table .some-row>div>div:first-child {
    text-align: left;
    font-weight: bold
}

.domain-result section.result .result-table .some-row>div:nth-of-type(odd)>div {
    background: #f5f7fa
}

.domain-result section.result .result-table .some-row>div:nth-of-type(even)>div {
    background: #fff
}

.domain-result section.result .result-table .some-row .result-head>div {
    font-size: 16px;
    background: #f5f5f5 !important;
    font-weight: normal !important
}

.domain-info section {
    padding: 30px 0 30px 0
}

.domain-info .detail {
    background: url(../image/070.png) no-repeat right
}

.domain-info .detail .title {
    font: 36px bold;
    color: #333;
    padding: 20px 0
}

.domain-info .detail .crumbs .crumbs-link {
    color: #c6c6c6
}

.domain-info .detail .crumbs .crumbs-link:hover {
    color: #999
}

.domain-info .detail .ad {
    padding-bottom: 20px;
    font-size: 16px;
    line-height: 30px;
    word-break: break-all;
    max-height: 90px
}

.domain-info .detail .price {
    padding-left: 0;
    font-size: 22PX;
    font-weight: bold
}

.domain-info .detail .price h4 {
    color: #333;
    font-size: 16px
}

.domain-info .detail .price span {
    color: #f63d57
}

.domain-info .detail .price td {
    border: 1px #eee solid;
    padding: 6px 20px;
    text-align: center;
    white-space: nowrap
}

.domain-info .detail .price small {
    color: #888;
    font-size: 70%;
    font-weight: normal
}

.domain-info section.function .fun-group h2 {
    font-size: 16px;
    font-weight: bold;
    margin: 0
}

.domain-info section.function .fun-group h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0
}

@media screen and (max-width:768px) {
    .domain-info section.function .fun-group h3 {
        margin-top: 6px
    }
}

.domain-info section.function .fun-group p {
    margin-top: 0;
    max-width: 200px;
    margin-left: 0;
    margin-right: 0
}

.domain-info section.function .fun-group .title {
    position: relative;
    border: 1px solid #ddd;
    background: #eee;
    padding: 0 40px
}

.domain-info section.function .fun-group .title .one-row>div {
    width: 55px;
    height: 58px
}

.domain-info section.function .fun-group .title .click {
    display: block;
    height: 28px;
    width: 28px;
    position: absolute;
    top: 24px;
    right: 40px
}

.domain-info section.function .fun-group .title .click i {
    display: block;
    font-size: 26px;
    height: 10px;
    width: 26px;
    line-height: 10px;
    text-align: center;
    color: #686868;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg)
}

.domain-info section.function .fun-group .content {
    display: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
    padding: 20px 40px
}

@media screen and (max-width:768px) {
    .domain-info section.function .fun-group .content {
        padding: 10px
    }
}

.domain-info section.function .fun-group .content .some-row gap {
    width: 40px
}

@media screen and (max-width:768px) {
    .domain-info section.function .fun-group .content .some-row gap {
        width: 10px
    }
}

@media screen and (max-width:768px) {
    .domain-info section.function .fun-group .content .some-row>*>* {
        display: block
    }
}

.domain-info section.function .fun-group .content .item {
    position: relative;
    padding-left: 16px
}

.domain-info section.function .fun-group .content .item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    height: 8px;
    width: 8px;
    background: url(../image/dot-8.png) no-repeat center
}

.domain-info section.function .fun-group.open .title::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    height: 100%;
    width: 3px
}

.domain-info section.function .fun-group.open .title .click i {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg)
}

.domain-info .search {
    background: #f5f6f8
}

.domain-info .domain-info-search {
    width: 100%;
    display: table;
    margin: 20px 0 50px
}

.domain-info .domain-info-search>div {
    display: table-cell;
    vertical-align: middle
}

.domain-info .domain-info-search .iconfont {
    font-size: 22px
}

.domain-info .domain-info-search>div:first-child {
    padding-left: 20px;
    width: 140px
}

.domain-info .domain-info-search>div:last-child {
    padding-right: 20px
}

.domain-info .domain-info-search h3 {
    text-align: center;
    font-size: 30px;
    margin: 0
}

.domain-info .domain-info-search h3 span {
    color: #d50000
}

.domain-info .domain-info-search img {
    height: 100px
}

.domain-info .domain-info-search .other-zone {
    margin-top: 10px
}

.domain-info .domain-info-search .other-zone span:nth-of-type(1) a {
    color: #d50000
}

.domain-info .domain-info-search .other-zone span:nth-of-type(2) a {
    color: #0d4883
}

.domain-info .domain-info-search .other-zone span:nth-of-type(3) a {
    color: #ef8127
}

.domain-info .domain-info-search .other-zone b,
.domain-info .domain-info-search .other-zone span {
    margin-right: 15px
}

.domain-info .domain-info-search .other-zone span a {
    color: #888;
    font-size: 18px;
    font-weight: bold
}

.domain-info .domain-info-search .input-search {
    margin: 30px 0;
    position: relative
}

.domain-info .domain-info-search .input-search .btn {
    width: 140px;
    font-size: 18px
}

.domain-info .domain-info-search .input-search .form-control {
    padding-right: 150px
}

.domain-info .domain-info-search .input-search input {
    width: 100%;
    height: 50px !important;
    padding-right: 56px;
    font-size: 14px
}

.domain-info .domain-info-search .input-search .btn {
    display: inline-block;
    color: #fff;
    letter-spacing: 1px;
    font-size: 16px;
    padding: 0 30px
}

.domain-info .domain-info-search .input-search .btn-search {
    position: absolute;
    top: 1px;
    right: 1px;
    height: 48px;
    width: 90px;
    line-height: 48px
}

.domain-info .domain-info-search .other-zone a:hover,
.domain-info .domain-info-search .other-zone a:focus,
.domain-info .domain-info-search .other-zone a:active {
    color: #50a2de
}

.domain-info .partner {
    padding: 50px 0
}

.domain-info .partner .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.domain-info .partner .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .domain-info .partner .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .domain-info .partner .partner-table img {
        width: 60px
    }
}

.domain-info .honor {
    background: #f5f6f8;
    padding: 50px 0
}

.domain-info .honor .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.domain-info .honor .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .domain-info .honor .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .domain-info .honor .partner-table img {
        width: 60px
    }
}

.domain-info .service h3 {
    font-size: 20px
}

.email {
    background: #f4f6f8
}

.email .tit1 h1 {
    font-size: 30px
}

.email section.banner {
    position: relative
}

.email section.banner>.wrapper .banner-txt {
    height: 300px
}

.email section.banner>.wrapper .banner-txt>* {
    color: #fff
}

.email section.info .config {
    padding: 40px 120px;
    background: #fff;
    border: 1px solid #ddd
}

@media screen and (max-width:768px) {
    .email section.info .config {
        padding: 20px
    }
}

.email section.info .config table {
    margin: auto;
    width: 100%;
    color: #999
}

.email section.info .config table th {
    border-bottom: 1px solid #ddd;
    font-weight: normal;
    text-align: left;
    padding-bottom: 20px
}

.email section.info .config table th:first-child {
    color: #333;
    white-space: nowrap
}

@media screen and (max-width:768px) {
    .email section.info .config table th:first-child {
        display: none
    }
}

.email section.info .config table td {
    padding: 20px 0;
    line-height: 34px
}

.email section.info .config table td:first-child {
    color: #333;
    white-space: nowrap
}

.email section.info .config table td .operate {
    float: right
}

.email section.info .config table td .operate span {
    padding-right: 20px
}

.email section.info .config table td .operate span b {
    font-size: 24px;
    color: #ef2a3a
}

@media screen and (max-width:768px) {
    .email section.info .config table td .operate {
        display: block;
        text-align: right;
        float: none
    }
}

@media screen and (max-width:768px) {
    .email section.info .config table td:first-child {
        display: none
    }
}

.email section.function .fun-group {
    margin-bottom: 12px
}

.email section.function .fun-group h2 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0
}

.email section.function .fun-group h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0
}

@media screen and (max-width:768px) {
    .email section.function .fun-group h3 {
        margin-top: 6px
    }
}

.email section.function .fun-group p {
    margin-top: 0;
    max-width: 200px;
    margin-left: 0;
    margin-right: 0
}

.email section.function .fun-group .title {
    position: relative;
    border: 1px solid #ddd;
    background: #fff;
    padding: 0 40px
}

.email section.function .fun-group .title .one-row>div:first-child {
    width: 55px;
    height: 88px
}

.email section.function .fun-group .title .click {
    display: block;
    height: 28px;
    width: 28px;
    position: absolute;
    top: 30px;
    right: 40px
}

.email section.function .fun-group .title .click i {
    display: block;
    font-size: 28px;
    height: 28px;
    width: 28px;
    line-height: 28px;
    text-align: center;
    color: #333;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg)
}

.email section.function .fun-group .content {
    display: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
    padding: 20px 40px
}

@media screen and (max-width:768px) {
    .email section.function .fun-group .content {
        padding: 10px
    }
}

.email section.function .fun-group .content .some-row gap {
    width: 40px
}

@media screen and (max-width:768px) {
    .email section.function .fun-group .content .some-row gap {
        width: 10px
    }
}

@media screen and (max-width:768px) {
    .email section.function .fun-group .content .some-row>*>* {
        display: block
    }
}

.email section.function .fun-group .content .item {
    position: relative;
    padding-left: 16px
}

.email section.function .fun-group .content .item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    height: 8px;
    width: 8px;
    background: url(../image/dot-8.png) no-repeat center
}

.email section.function .fun-group.open .title::before {
    position: absolute;
    top: 0;
    left: 0;
    background: #ef2a3a;
    content: "";
    height: 100%;
    width: 3px
}

.email section.function .fun-group.open .title .click i {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg)
}

.email section.advantage .some-row {
    margin-top: 10px;
    margin-bottom: 40px
}

.email section.advantage .some-row>div>gap {
    width: 50px
}

.email section.advantage .some-row>div>div {
    padding-bottom: 40px
}

.email section.advantage .some-row .item>* {
    vertical-align: top
}

.email section.advantage .some-row .item gap {
    width: 0
}

.email section.advantage .some-row .item h3 {
    font-weight: bold;
    margin: 0;
    color: #333
}

.email section.advantage .some-row .item img {
    padding-top: 4px;
    padding-right: 20px
}

@media screen and (max-width:768px) {
    .email section.advantage .some-row>*>* {
        display: block
    }

    .email section.advantage .some-row>*>div {
        padding-bottom: 20px !important
    }

    .email section.advantage .some-row>*>gap {
        height: 0 !important
    }

    .email section.advantage .some-row .item img {
        width: 40px;
        padding-right: 10px
    }
}

.email section.map {
    background: url(../image/0051.png) no-repeat center;
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 40px
}

.email section.map h1,
.email section.map p {
    color: #fff
}

.email section.map p {
    text-align: center
}

.email section.map .map-img {
    margin-bottom: 30px;
    text-align: center
}

@media screen and (max-width:880px) {
    .email section.map .map-img img {
        width: 100%
    }
}

.email section.partner {
    background: #fff;
    padding-bottom: 40px;
    overflow: hidden
}

.email section.partner .partner-table {
    border-collapse: separate;
    border-spacing: 18px
}

.email section.partner .partner-table>div>div {
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    width: 16.66%
}

@media screen and (max-width:1060px) {
    .email section.partner .partner-table {
        padding: 6px 0
    }

    .email section.partner .partner-table img {
        max-height: 40px;
        max-width: 80px
    }
}

@media screen and (max-width:768px) {
    .email section.partner .partner-table {
        border-spacing: 6px
    }

    .email section.partner .partner-table>div>div {
        border: none
    }

    .email section.partner .partner-table img {
        max-height: 30px;
        max-width: 60px
    }
}

@media screen and (max-width:480px) {
    .email section.partner .partner-table {
        border-spacing: 2px
    }

    .email section.partner .partner-table img {
        max-height: 25px;
        max-width: 50px
    }

    .email section.partner .partner-table>div>div:first-child {
        display: none
    }

    .email section.partner .partner-table>div>div:nth-child(2) {
        display: none
    }
}

.email section.function2 {
    background: #fff;
    margin-top: 40px;
    padding-bottom: 40px;
    overflow: hidden
}

.email section.function2 .function2-table-wrap {
    margin: -20px
}

.email section.function2 .function2-table-wrap .function2-table {
    border-collapse: separate;
    border-spacing: 20px;
    width: 100%
}

.email section.function2 .function2-table-wrap .function2-table .item {
    border: 1px solid #ddd;
    height: 100%
}

.email section.function2 .function2-table-wrap .function2-table .item>div {
    padding: 18px 0
}

.email section.function2 .function2-table-wrap .function2-table .item>div:first-child {
    width: 140px;
    text-align: center
}

.email section.function2 .function2-table-wrap .function2-table .item>div:last-child {
    padding-right: 30px
}

.email section.function2 .function2-table-wrap .function2-table .item h3 {
    font-size: 18px;
    color: #ef2a3a;
    margin: 0
}

.email section.function2 .function2-table-wrap .function2-table .item p {
    margin-top: 0
}

@media screen and (max-width:992px) {
    .email section.function2 .function2-table-wrap .function2-table .item {
        border-spacing: 10px
    }

    .email section.function2 .function2-table-wrap .function2-table .item>div:first-child {
        width: 100px
    }

    .email section.function2 .function2-table-wrap .function2-table .item>div:first-child img {
        width: 80px
    }

    .email section.function2 .function2-table-wrap .function2-table .item>div:last-child {
        padding-right: 10px
    }
}

@media screen and (max-width:768px) {
    .email section.function2 .function2-table-wrap .function2-table {
        border-collapse: collapse
    }

    .email section.function2 .function2-table-wrap .function2-table td {
        display: block !important;
        margin-bottom: 20px;
        padding: 0 20px
    }

    .email section.function2 .function2-table-wrap .function2-table .item {
        margin: 0
    }
}

.email-ali .header-fixed {
    width: 100%
}

.email-ali .tit1 p {
    font-size: 16px;
    color: #333
}

.email-ali .email-config .tit {
    width: 8%
}

.email-ali .email-config .cfg-num {
    width: 80px;
    padding-left: 10px
}

.email-ali .email-config .cfg-num .num-input {
    width: 100%
}

.email-ali .email-discount {
    background-color: #f4f6f8;
    padding: 20px 0 60px
}

.email-ali .email-discount .free-btn {
    margin: auto;
    border-radius: 30px;
    padding: 0 50px;
    line-height: 30px
}

.email-ali .email-discount-desk {
    margin-top: 30px
}

.email-ali .email-discount-desk>div {
    padding: 10px;
    margin-bottom: 30px
}

.email-ali .email-discount-item {
    position: relative;
    text-align: center;
    height: 100%;
    background-color: #fff
}

.email-ali .email-discount-item h3 {
    margin: 0;
    font-size: 24px;
    font-weight: bold
}

.email-ali .email-discount-item span {
    display: block;
    font-size: 14px;
    color: #333;
    line-height: 30px
}

.email-ali .email-discount-item .icon {
    position: absolute;
    top: -15px;
    right: 0;
    left: 0;
    margin: auto
}

.email-ali .email-discount-item .price {
    text-align: center;
    font-weight: bold;
    color: #6a0f0f;
    font-size: 16px
}

.email-ali .email-discount-item .price b {
    font-size: 36px;
    display: inline-block
}

.email-ali .email-discount-item .dis-top {
    padding: 30px
}

.email-ali .email-discount-item .dis-main {
    padding: 20px;
    background-color: #fff
}

.email-ali .email-discount-item .dis-main-list {
    min-height: 180px
}

.email-ali .email-discount-item .dis-main span {
    font-size: 16px;
    line-height: 36px
}

.email-ali .email-discount-item .dis-tips {
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px dashed #dcdcdc
}

.email-ali .email-discount-item .dis-tips span {
    text-align: left;
    font-weight: bold;
    padding-left: 5px
}

.email-ali .email-discount-item .dis-tips span::before {
    content: url(../image/0043.png);
    position: relative;
    margin-right: 5px
}

.email-ali .email-discount-item.item1 .dis-top {
    background: linear-gradient(to right, #e7f4ff, #cbe1ff)
}

.email-ali .email-discount-item.item2 .dis-top {
    background: linear-gradient(to right, #fff5e3, #ffe1b3)
}

.email-ali .email-discount-item.item3 .dis-top {
    background: linear-gradient(to right, #e2f6f5, #c1edec)
}

.email-ali .email-discount-item:hover {
    cursor: pointer;
    box-shadow: 0 0 15px rgba(21, 16, 38, 0.17)
}

.email-ali .email-fuction .fuc-desk {
    margin: 0 -30px
}

.email-ali .email-fuction .fuc-desk .fuc-item {
    text-align: center;
    padding: 10px 30px
}

.email-ali .email-fuction .fuc-desk .fuc-item img {
    transform: rotateY(0deg);
    transition: .6s;
    transform-style: preserve-3d
}

.email-ali .email-fuction .fuc-desk .fuc-item .tit {
    display: block;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    margin-top: 10px
}

.email-ali .email-fuction .fuc-desk .fuc-item p {
    font-size: 16px;
    color: #666;
    text-align: center;
    line-height: 30px
}

.email-ali .email-fuction .fuc-desk .fuc-item:hover {
    cursor: pointer
}

.email-ali .email-fuction .fuc-desk .fuc-item:hover .tit {
    color: #0b52c9
}

.email-ali .email-fuction .fuc-desk .fuc-item:hover img {
    transform: rotateY(360deg)
}

.email-ali .email-fuction .fuc-table {
    padding: 10px 20px
}

.email-ali .email-fuction .fuc-table .fuc-row:not(:last-child) {
    border-bottom: 1px dashed #dcdcdc
}

.email-ali .email-fuction .fuc-table .fuc-item {
    position: relative;
    padding: 20px 25px
}

.email-ali .email-fuction .fuc-table .fuc-item .tit {
    display: block;
    font-weight: bold;
    font-size: 16px;
    color: #333
}

.email-ali .email-fuction .fuc-table .fuc-item p {
    font-size: 14px;
    color: #666;
    line-height: 28px
}

.email-ali .email-fuction .fuc-table .fuc-item::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 25px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    border: 1px solid red
}

.email-ali .email-special {
    background-color: #fff;
    padding: 20px 0 50px
}

.email-ali .email-manage {
    background: #f4f6f8;
    padding: 30px 0 60px
}

.email-ali .email-manage .manage-content {
    background-color: #fff
}

.email-ali .email-manage .fuc-desk {
    padding: 40px 10px;
    margin: 0;
    box-shadow: 0 0 15px rgba(21, 16, 38, 0.17)
}

.email-ali .email-manage .fuc-desk .fuc-item {
    padding: 10px
}

.email-ali .email-agent {
    padding-top: 140px;
    height: 480px;
    background: url(../image/093.jpg) center no-repeat
}

.email-ali .email-agent .agent-desk {
    max-width: 530px;
    display: table
}

.email-ali .email-agent h2 {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    margin: 0
}

.email-ali .email-agent p {
    color: #fff;
    font-size: 16px;
    line-height: 36px
}

.email-ali .email-core {
    background-color: #fff;
    padding: 50px 0 80px
}

.email-ali .email-core .flow-step-item {
    position: relative
}

.email-ali .email-core .flow-step-item .tit {
    font-size: 18px;
    color: #333;
    display: block;
    margin-top: 10px
}

.email-ali .email-core .flow-step-item p {
    font-size: 16px;
    color: #666;
    line-height: 36px
}

.email-ali .email-core .one-row {
    border-collapse: collapse;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1)
}

.email-ali .email-core .table-item {
    position: relative;
    padding: 20px;
    border: 1px solid #dcdcdc;
    box-shadow: 12px 0 12px rgba(21, 16, 38, 0.1);
    width: 20%;
    vertical-align: top
}

.email-ali .email-core .table-item::after {
    content: "";
    display: inline-block;
    position: absolute;
    margin: auto;
    right: -15px;
    top: 0;
    bottom: 0;
    height: 0;
    width: 0;
    border-top: 12px solid transparent;
    border-left: 15px solid #fff;
    border-bottom: 12px solid transparent
}

.email-ali .email-core .table-item::before {
    content: "";
    display: inline-block;
    position: absolute;
    margin: auto;
    right: -16px;
    top: 0;
    bottom: 0;
    height: 0;
    width: 0;
    border-top: 13px solid transparent;
    border-left: 16px solid #dcdcdc;
    border-bottom: 13px solid transparent
}

.email-ali .email-core .table-item:hover {
    cursor: pointer;
    box-shadow: 12px 0 12px rgba(7, 53, 159, 0.15);
    transition: box-shadow .5s
}

.email-ali .email-core .table-item:hover .flow-step-item img {
    margin-left: 10px;
    transition: all .5s
}

.email-ali .email-core .table-item:hover .flow-step-item .tit {
    color: #01389d;
    transition: all .5s
}

.email-ali section.partner .partner-table>div>div {
    border: none !important
}

.modal-email-form p {
    margin: 0 0 5px
}

.modal-email-form .modal-body {
    border-top: 6px solid #f23414;
    border-bottom: 6px solid #f23414;
    padding: 20px 30px;
    background: #fff
}

.modal-email-form .subtit {
    height: 35px;
    line-height: 35px;
    border-radius: 35px;
    color: #fff;
    font-size: 16px;
    padding: 0 20px;
    text-align: center;
    background: linear-gradient(to right, #ff543c, #ff2b61);
    margin: 10px 0
}

.modal-email-form h4 {
    width: 100%;
    height: 20px;
    margin-top: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.modal-email-form h4 p {
    float: left;
    font-size: 18px;
    font-weight: normal
}

.modal-email-form h4 span {
    float: right;
    font-size: 14px;
    font-weight: normal
}

.cloud-index .banner {
    height: 500px
}

.cloud-index .banner-txt {
    height: 500px
}

.cloud-index .banner-txt h3 {
    margin: 10px 0;
    font-size: 16px;
    line-height: 30px
}

.cloud-index .tit1 {
    padding-top: 0
}

.cloud-index .tit1 h1 {
    text-align: left;
    font-size: 24px
}

.cloud-index .tit1 h2 {
    font-size: 36px;
    margin: 10px 0
}

.cloud-index .btn-buy {
    color: #ff701a;
    line-height: 32px;
    padding: 0 20px
}

.cloud-index .more-configuration {
    margin-bottom: 20px
}

.cloud-index .server-info {
    background-color: #f4f6f8
}

.cloud-index .server-info .part2 .info-item .tit {
    background: none
}

.cloud-index .server-info .sellout {
    pointer-events: none;
    background: #eee;
    border: 1px solid #dcdcdc;
    color: #666
}

.cloud-index .info-nav {
    margin: 0 0 20px
}

.cloud-index .info-nav>div {
    padding: 15px 70px;
    background: #fff;
    margin-right: 20px;
    margin-bottom: 10px
}

.cloud-index .info-nav h3 {
    font-size: 18px;
    color: #434343;
    margin: .5em 0
}

.cloud-index .info-nav p {
    color: #999
}

.cloud-index .info-nav>div:hover,
.cloud-index .info-nav .nav-act {
    cursor: pointer;
    box-shadow: 0 0 20px rgba(76, 82, 92, 0.2)
}

.cloud-index .info-nav .nav-act {
    background: linear-gradient(to right, #0063ed, #4693ff);
    border-bottom: 3px solid #ef2a3a
}

.cloud-index .info-nav .nav-act h3,
.cloud-index .info-nav .nav-act p {
    color: #fff
}

@media screen and (max-width:768px) {
    .cloud-index .info-nav>div {
        padding: 5px 15px
    }

    .cloud-index .info-nav h3 {
        font-size: 16px
    }
}

.cloud-index section.hl-catalog-nav,
.cloud-index section.catalog-nav {
    padding: 20px 0 40px
}

.cloud-index section.hl-catalog-nav .hl-catalog h3,
.cloud-index section.catalog-nav .hl-catalog h3,
.cloud-index section.hl-catalog-nav .catalog h3,
.cloud-index section.catalog-nav .catalog h3 {
    margin: 15px 0
}

.cloud-index section.hl-catalog-nav .hl-catalog>div:first-child,
.cloud-index section.catalog-nav .hl-catalog>div:first-child,
.cloud-index section.hl-catalog-nav .catalog>div:first-child,
.cloud-index section.catalog-nav .catalog>div:first-child {
    width: 60px
}

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

    .cloud-index section.hl-catalog-nav .hl-catalog>div:first-child,
    .cloud-index section.catalog-nav .hl-catalog>div:first-child,
    .cloud-index section.hl-catalog-nav .catalog>div:first-child,
    .cloud-index section.catalog-nav .catalog>div:first-child {
        padding-left: 6px
    }
}

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

    .cloud-index section.hl-catalog-nav .hl-catalog>div h3,
    .cloud-index section.catalog-nav .hl-catalog>div h3,
    .cloud-index section.hl-catalog-nav .catalog>div h3,
    .cloud-index section.catalog-nav .catalog>div h3 {
        margin-bottom: 0
    }
}

.cloud-index .topic-nav .tab-wrap {
    width: 100%;
    height: 51px
}

.cloud-index .topic-nav .tab-wrap .tab>div .item,
.cloud-index .topic-nav .tab-wrap .tab-nav>div .item {
    font-size: 16px;
    line-height: 48px
}

.cloud-index .document {
    padding-top: 30px
}

.cloud-index .document .btn {
    margin-top: 30px
}

.cloud-index section.intro {
    background: url(../image/094.jpg) no-repeat center;
    background-size: cover;
    padding-bottom: 60px;
    padding-top: 30px
}

.cloud-index section.intro .tit1 h2 {
    color: #fff
}

.cloud-index section.intro gap {
    width: 20px
}

.cloud-index section.intro .intro-table-wrap-wrap {
    margin: -20px
}

.cloud-index section.intro .intro-table-wrap-wrap>table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap {
    margin: -20px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item {
    position: relative;
    height: 220px;
    padding: 20px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item .one-row {
    border-collapse: collapse
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item p {
    line-height: 24px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item .text {
    margin: auto;
    width: 240px;
    position: relative;
    z-index: 2;
    color: #fff
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item .text h3 {
    color: #fff;
    margin: 0;
    font-size: 20px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item .text h3 img {
    padding-right: 6px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item .text ul li {
    position: relative;
    padding-left: 10px;
    line-height: 24px
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item .text ul li::before {
    content: "•";
    position: absolute;
    top: 0;
    left: 0;
    color: #ef2a3a
}

.cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 54, 164, 0.7);
    border: 1px solid #4693ff;
    opacity: .7;
    z-index: 1
}

@media screen and (max-width:1270px) {
    .cloud-index section.intro .intro-table-wrap-wrap {
        margin: -10px
    }

    .cloud-index section.intro .intro-table-wrap-wrap>table {
        border-collapse: separate;
        border-spacing: 10px
    }

    .cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap {
        margin: -10px
    }

    .cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table {
        border-spacing: 10px
    }
}

@media screen and (max-width:1200px) {
    .cloud-index section.intro .intro-table-wrap-wrap>table>tbody>tr>td {
        display: block;
        padding-bottom: 10px
    }
}

@media screen and (max-width:650px) {
    .cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table>tbody>tr>td {
        display: block
    }

    .cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table>tbody>tr>td:not(:last-child) {
        padding-bottom: 10px
    }

    .cloud-index section.intro .intro-table-wrap-wrap .intro-table-wrap .intro-table .item {
        height: auto
    }
}

.cloud-private section.function {
    padding-bottom: 40px
}

.cloud-private section.function .function-table {
    margin: 0 -26px
}

.cloud-private section.function .function-table .some-row {
    border-collapse: separate;
    border-spacing: 26px
}

.cloud-private section.function .function-table .some-row>div>div {
    position: relative;
    box-shadow: 0 0 20px #dedede;
    width: 33.3333%;
    padding: 30px 40px;
    vertical-align: top
}

.cloud-private section.function .function-table .some-row>div>div h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 12px auto;
    color: #333
}

.cloud-private section.function .function-table .some-row>div>div.item01 {
    background: url(../image/061-bg.png) top right no-repeat
}

.cloud-private section.function .function-table .some-row>div>div.item02 {
    background: url(../image/062-bg.png) top right no-repeat
}

.cloud-private section.function .function-table .some-row>div>div.item03 {
    background: url(../image/063-bg.png) top right no-repeat
}

.cloud-private section.function .function-table .some-row>div>div.item04 {
    background: url(../image/064-bg.png) top right no-repeat
}

.cloud-private section.function .function-table .some-row>div>div.item05 {
    background: url(../image/065-bg.png) top right no-repeat
}

.cloud-private section.function .function-table .some-row>div>div.item06 {
    background: url(../image/066-bg.png) top right no-repeat
}

@media screen and (max-width:768px) {
    .cloud-private section.function .function-table {
        margin: 0
    }

    .cloud-private section.function .function-table .some-row {
        display: block
    }

    .cloud-private section.function .function-table .some-row>div {
        display: block
    }

    .cloud-private section.function .function-table .some-row>div>div {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 10px 20px;
        box-shadow: 0 0 10px #dedede
    }

    .cloud-private section.function .function-table .some-row>div>div img {
        position: absolute;
        height: 30px;
        max-width: 40px;
        top: 20px;
        left: 20px
    }

    .cloud-private section.function .function-table .some-row>div>div h3 {
        padding-left: 46px
    }
}

.cloud-private section.soluion {
    background: url(../image/023.png), #f3f6f9;
    padding-bottom: 60px;
    padding-top: 20px
}

.cloud-private section.soluion .nav {
    margin: -30px -20px 0
}

.cloud-private section.soluion .nav .one-row {
    width: auto;
    margin: 10px auto;
    border-collapse: separate;
    border-spacing: 20px
}

.cloud-private section.soluion .nav .one-row>div {
    position: relative;
    line-height: 38px;
    width: 156px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd
}

.cloud-private section.soluion .nav .one-row>div:hover {
    cursor: pointer;
    color: #ef2a3a
}

.cloud-private section.soluion .nav .one-row>div.page-current {
    background: #ef2a3a;
    color: #fff
}

.cloud-private section.soluion .nav .one-row>div.page-current:hover {
    color: #fff
}

.cloud-private section.soluion .nav .one-row>div.page-current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    margin: auto;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-top-color: #ef2a3a;
    border-left-width: 5px;
    border-right-width: 5px
}

@media screen and (max-width:580px) {
    .cloud-private section.soluion .nav {
        margin: -20px -10px 0
    }

    .cloud-private section.soluion .nav .one-row {
        border-spacing: 10px
    }
}

.cloud-private section.soluion .soluion-table {
    background: #fff;
    box-shadow: 0 0 20px #dedede
}

.cloud-private section.soluion .soluion-table .one-row {
    border-collapse: collapse
}

.cloud-private section.soluion .soluion-table .one-row>div {
    padding: 26px;
    border: 1px solid #ddd;
    vertical-align: top
}

.cloud-private section.soluion .soluion-table .one-row>div h3 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    margin-top: 0;
    margin-bottom: 10px
}

.cloud-private section.soluion .soluion-table .one-row>div>p {
    margin-bottom: 20px
}

.cloud-private section.soluion .soluion-table .one-row>div ul h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold
}

.cloud-private section.soluion .soluion-table .one-row>div ul p {
    font-size: 14px;
    margin-top: 0
}

@media screen and (max-width:1200px) {
    .cloud-private section.soluion .soluion-table .one-row {
        display: block
    }

    .cloud-private section.soluion .soluion-table .one-row>div {
        display: block
    }

    .cloud-private section.soluion .soluion-table .one-row>div.topo {
        text-align: center;
        border-bottom: none
    }

    .cloud-private section.soluion .soluion-table .one-row>div.topo img {
        max-width: 100%
    }
}

.cloud-private section.service {
    padding: 60px 0;
    background: url(../image/024.png) no-repeat center;
    background-size: cover
}

.cloud-private section.service .service-table {
    position: relative;
    margin: -60px 0
}

.cloud-private section.service .service-table .one-row {
    border-collapse: separate;
    border-spacing: 60px
}

.cloud-private section.service .service-table .one-row>div.txt h1 {
    font-size: 30px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0
}

.cloud-private section.service .service-table .one-row>div.txt>p {
    font-size: 16px;
    color: #c6d1dc;
    margin-bottom: 30px
}

.cloud-private section.service .service-table .one-row>div.txt ul li {
    position: relative;
    padding-left: 24px;
    color: #fff
}

.cloud-private section.service .service-table .one-row>div.txt ul li::before {
    position: absolute;
    margin: auto;
    left: 0;
    top: 2px;
    display: block;
    content: "";
    height: 21px;
    width: 18px;
    background: url(../image/red-cube.png) center no-repeat
}

.cloud-private section.service .service-table .one-row>div.txt ul li h4 {
    color: #fff;
    font-size: 16px;
    margin: 0
}

.cloud-private section.service .service-table .one-row>div.txt ul li p {
    margin-top: 0;
    margin-bottom: 20px
}

@media screen and (max-width:1200px) {
    .cloud-private section.service .service-table .one-row>div.img img {
        width: 300px
    }
}

@media screen and (max-width:992px) {
    .cloud-private section.service .service-table {
        margin: 0
    }

    .cloud-private section.service .service-table .one-row {
        border-collapse: collapse
    }

    .cloud-private section.service .service-table .one-row>div.img img {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
        text-align: center;
        width: auto;
        opacity: .2;
        max-width: 100%
    }

    .cloud-private section.service .service-table .one-row>div.txt {
        position: relative;
        z-index: 2
    }
}

.cloud-private section.advantage {
    padding: 20px 0 100px
}

.cloud-private section.advantage .advantage-table>div .item {
    width: 260px
}

@media screen and (max-width:992px) {
    .cloud-private section.advantage .advantage-table>div .item {
        width: 200px
    }
}

@media screen and (max-width:768px) {
    .cloud-private section.advantage .advantage-table>div .item {
        width: auto
    }
}

.cloud-private section.partner {
    padding: 50px 0
}

.cloud-private section.partner .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.cloud-private section.partner .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .cloud-private section.partner .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .cloud-private section.partner .partner-table img {
        width: 60px
    }
}

.cloud-private section {
    padding: 40px 0 50px
}

.cloud-private #stack-pic .swiper-slide {
    height: auto
}

.cloud-host-configuration .common-title {
    background-color: #fff
}

.cloud-host-configuration .common-title h1 {
    font-size: 24px;
    height: 70px;
    line-height: 70px;
    margin: 0
}

.cloud-host-configuration .common-footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #fff;
    z-index: 9999;
    box-shadow: 0 0 20px rgba(36, 37, 41, 0.15)
}

.cloud-host-configuration .common-footer .total-cost {
    position: relative;
    line-height: 100px
}

.cloud-host-configuration .common-footer .total-cost span {
    font-size: 16px;
    color: #333
}

.cloud-host-configuration .common-footer .total-cost .price {
    font-size: 30px;
    vertical-align: middle;
    font-weight: normal
}

.cloud-host-configuration .common-footer .total-cost .btn {
    position: absolute;
    right: 0;
    top: 35%;
    height: 40px;
    line-height: 40px
}

.cloud-host-configuration .content {
    background-color: #f1f1f1
}

.cloud-host-configuration .content .step {
    padding: 38px 0 20px
}

.cloud-host-configuration .content .step .line {
    position: relative;
    border-top: 1px dotted #ef2a3a;
    height: 60px
}

.cloud-host-configuration .content .step .line .one-row {
    width: 60%;
    margin: auto
}

.cloud-host-configuration .content .step .line .step-item {
    text-align: center;
    position: relative;
    top: -18px
}

.cloud-host-configuration .content .step .line .step-item span {
    color: #ef2a3a;
    border: 1px solid #ef2a3a;
    border-radius: 36px;
    width: 36px;
    height: 36px;
    display: block;
    text-align: center;
    line-height: 36px;
    background-color: #f1f1f1;
    margin: auto
}

.cloud-host-configuration .content .step .line .step-item p {
    text-align: center
}

.cloud-host-configuration .content .step .tips {
    background-color: #f6f6f6;
    border: 1px dashed #dcdcdc
}

.cloud-host-configuration .content .step .tips p {
    font-size: 14px;
    color: #999;
    text-align: center
}

.cloud-host-configuration .data-info {
    background-color: #fff
}

.cloud-host-configuration .info-title {
    padding: 30px;
    border-bottom: 1px solid #dcdcdc
}

.cloud-host-configuration .info-title h1 {
    margin: 0;
    font-size: 24px;
    display: inline-block;
    vertical-align: middle
}

.cloud-host-configuration .info-title a {
    color: #ff701a;
    margin-left: 10px
}

.cloud-host-configuration .data-info-default .data-list li {
    pointer-events: none
}

.cloud-host-configuration .data-info-options .data-list li {
    display: none
}

.cloud-host-configuration .data-info-options .data-list .show {
    display: block
}

.cloud-host-configuration .data-info-card {
    padding: 30px 20px 30px 0;
    border-bottom: 1px solid #eee
}

.cloud-host-configuration .data-info-card .dataDiskLabel {
    line-height: 50px;
    width: auto
}

.cloud-host-configuration .item-info .discount {
    color: #ff701a;
    font-size: 10px;
    position: relative;
    top: -6px;
    left: -2px
}

.cloud-host-configuration .item-title {
    width: 10%;
    position: relative
}

.cloud-host-configuration .item-title .hover-tips {
    display: none;
    opacity: 0;
    position: absolute;
    background: #fff;
    padding: 10px;
    min-width: 200px;
    color: #666;
    font-size: 14px;
    z-index: 10;
    border: 1px solid #dfe9f2
}

.cloud-host-configuration .item-title .layui-icon {
    color: #ef2a3a
}

.cloud-host-configuration .item-title .layui-icon:hover {
    cursor: pointer
}

.cloud-host-configuration .item-title .layui-icon:hover .hover-tips {
    display: block;
    opacity: 1;
    transition: opacity .5s
}

.cloud-host-configuration .item-content {
    padding: 0 30px
}

.cloud-host-configuration .item-configuration .item {
    float: left;
    margin: 0 20px 10px 0;
    border: 1px solid #dcdcdc;
    min-width: 215px;
    position: relative;
    cursor: pointer
}

.cloud-host-configuration .item-configuration .item h2 {
    background-color: #eaedf2;
    font-size: 16px;
    line-height: 48px;
    font-weight: bold;
    margin: 0;
    padding: 0 30px
}

.cloud-host-configuration .item-configuration .item .option {
    padding: 10px 30px;
    line-height: 30px
}

.cloud-host-configuration .item-configuration .item .option p {
    margin: 0
}

.cloud-host-configuration .item-configuration .cf-action {
    border: 1px solid #ef2a3a
}

.cloud-host-configuration .item-configuration .cf-action::after {
    content: "";
    width: 17px;
    height: 14px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../image/0013.png)
}

.cloud-host-configuration .item-system .active {
    border: 1px solid #ef2a3a !important;
    background-color: #fff8f9 !important;
    color: #ef2a3a
}

.cloud-host-configuration .item-system .active .select-ul {
    top: 38px
}

.cloud-host-configuration .item-system .select {
    height: 40px;
    width: 240px;
    margin-right: 10px;
    font-family: "Microsoft Yahei";
    font-size: 14px;
    background-color: #fff;
    position: relative;
    border: #dcdcdc 1px solid
}

.cloud-host-configuration .item-system .select:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-left: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    position: absolute;
    top: 11px;
    right: 12px;
    transform: rotate(-45deg);
    transition: transfrom .3s ease-in, top .3s ease-out
}

.cloud-host-configuration .item-system .select p {
    padding: 0 15px;
    width: 100%;
    line-height: 40px;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    float: right;
    margin: 0;
    height: 100%
}

.cloud-host-configuration .item-system .select .select-ul {
    list-style-type: none;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    top: 39px;
    right: 0;
    margin: 0;
    z-index: 5;
    max-height: 0;
    border: #dcdcdc 1px solid;
    border-top: none
}

.cloud-host-configuration .item-system .select-ul::-webkit-scrollbar {
    width: 7px;
    background-color: #cad7e6
}

.cloud-host-configuration .item-system .select-ul::-webkit-scrollbar-thumb {
    background-color: #e5e5e5
}

.cloud-host-configuration .item-system .select .select-ul li {
    padding: 0 15px;
    line-height: 40px;
    cursor: pointer;
    color: #333;
    font-size: 12px
}

.cloud-host-configuration .item-system .select li:hover {
    background-color: #fffbfb
}

.cloud-host-configuration .item-system .select li.selected {
    background-color: #fff8f9;
    border: 1px solid #ef2a3a
}

.cloud-host-configuration .item-system .select-title {
    width: 28%;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background-color: #e7eff8;
    border-right: #bdc9d6 1px solid;
    height: 100%
}

.cloud-host-configuration .item-system .select-title span {
    color: #183a98
}

.cloud-host-configuration .item-system .select.open .select-ul {
    max-height: 250px;
    transform-origin: 50% 0;
    transition: max-height .2s ease-out
}

.cloud-host-configuration .item-system .open {
    box-shadow: 0 0 5px #cad7e6
}

.cloud-host-configuration .item-system .select.open:after {
    transform: rotate(-225deg);
    top: 18px;
    transition: all .3s ease-in
}

.cloud-host-configuration .item-quantity .data-list li {
    width: 40px;
    padding: 0;
    min-width: unset
}

.cloud-host-configuration .item-quantity .data-list .number {
    width: 65px;
    border-left: none;
    border-right: none
}

.cloud-host-configuration .item-quantity .data-list .num-add {
    font-size: 18px;
    color: #ef2a3a;
    background-color: #eaedf2
}

.cloud-host-configuration .item-quantity .data-list .num-reduce {
    color: #ef2a3a;
    background-color: #eaedf2
}

.cloud-host-configuration .item-quantity .data-list .input-num {
    text-align: center;
    border: none;
    height: 40px;
    line-height: 40px
}

.cloud-host-configuration .data-list {
    display: table
}

.cloud-host-configuration .data-list li {
    float: left;
    margin-bottom: 10px;
    border: 1px solid #dcdcdc;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    height: 40px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    min-width: 80px;
    cursor: pointer;
    padding: 0 15px
}

.cloud-host-configuration .data-list .sellout {
    background: #eee
}

.cloud-host-configuration .data-list .active {
    border: 1px solid #ef2a3a !important;
    background-color: #fff8f9 !important;
    color: #ef2a3a
}

.cloud-host-configuration .data-list1 li:not(:first-child) {
    border-left: none
}

.cloud-host-configuration .data-list2 li {
    position: relative;
    margin: 0 5px 10px 0
}

.cloud-host-configuration .data-list3 li {
    color: #333;
    position: relative;
    margin: 0 5px 10px 0
}

.cloud-host-configuration .data-list3 .active {
    border: 1px solid #3555f6 !important;
    background-color: #fff !important;
    color: #3555f6
}

.cloud-host-configuration .data-list3 .active::after {
    content: url(../image/0023.png);
    position: absolute;
    bottom: -18px;
    right: -1px
}

@media screen and (max-width:1200px) {
    .cloud-host-configuration .data-info-card:not(.bandwidth) {
        padding: 20px 10px 20px 0
    }

    .cloud-host-configuration .item-title {
        width: 65px;
        font-size: 12px
    }

    .cloud-host-configuration .data-list li {
        min-width: 50px
    }
}

.cloud-HCI .tit1 h2 {
    text-align: center;
    font-size: 36px;
    margin: 0
}

.cloud-HCI .challenge {
    padding: 40px 0 60px
}

@keyframes bg-animation {
    0% {
        width: 0;
        opacity: 1
    }

    75% {
        opacity: 1
    }

    90% {
        width: 100%
    }

    100% {
        opacity: .2
    }
}

.cloud-HCI .challenge .cover-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: url(../image/088.png) no-repeat left bottom;
    animation: bg-animation 4s infinite
}

.cloud-HCI .challenge .bg {
    position: relative;
    background: url(../image/086.png) no-repeat left bottom;
    background-size: 100%;
    min-height: 400px
}

.cloud-HCI .challenge .item {
    vertical-align: bottom;
    text-align: center;
    font-size: 16px
}

.cloud-HCI .challenge .item1 {
    padding-bottom: 8%
}

.cloud-HCI .challenge .item2 {
    padding-bottom: 16%
}

.cloud-HCI .challenge .item3 {
    padding-bottom: 24%
}

.cloud-HCI .architecture-shift {
    padding: 50px 0 65px;
    background-color: #f7f7f7
}

.cloud-HCI .architecture-shift h3 {
    background-color: #4895e9;
    margin: 0;
    color: #fff;
    font-size: 24px;
    text-align: center
}

.cloud-HCI .architecture-shift .flex-col {
    width: 50%;
    text-align: center
}

.cloud-HCI .architecture-shift .flex-col .topo {
    padding-top: 20px
}

.cloud-HCI .architecture-shift .flex-item {
    position: relative;
    overflow: hidden;
    display: inline-block
}

.cloud-HCI .architecture-shift .flex-item>div {
    position: relative;
    background-color: #eee;
    min-width: 290px;
    min-height: 385px;
    text-align: center;
    border-radius: 5px;
    transition: .5s ease
}

.cloud-HCI .architecture-shift .flex-item .left {
    left: -290px
}

.cloud-HCI .architecture-shift .flex-item .right {
    right: -290px
}

.cloud-HCI .architecture-shift .CHI-arch {
    position: relative;
    overflow: hidden
}

.cloud-HCI .architecture-shift .CHI {
    position: relative;
    opacity: 0;
    bottom: -350px;
    transition: 1s ease;
    background-color: #eee
}

.cloud-HCI .architecture-shift .CHI h3 {
    background-color: #014b9a
}

.cloud-HCI .architecture-shift .CHI-card {
    padding: 30px
}

.cloud-HCI .architecture-shift .CHI-card>div {
    width: 50%
}

.cloud-HCI .architecture-shift .CHI-topo {
    width: 50%;
    text-align: right
}

.cloud-HCI .architecture-shift .CHI-text {
    width: 50%;
    padding-left: 60px;
    font-size: 16px;
    color: #333
}

.cloud-HCI .architecture-shift .CHI-text p {
    text-align: left !important
}

.cloud-HCI .architecture-shift .CHI-text span {
    font-weight: bold
}

.cloud-HCI .architecture-shift .CHI-text .item {
    position: relative;
    margin-bottom: 25px
}

.cloud-HCI .architecture-shift .CHI-text .item::before {
    content: "";
    position: absolute;
    left: -35px;
    top: 0;
    width: 22px;
    height: 24px
}

.cloud-HCI .architecture-shift .CHI-text .item1::before {
    background: url(../image/0014.png) no-repeat
}

.cloud-HCI .architecture-shift .CHI-text .item2::before {
    background: url(../image/0024.png) no-repeat
}

.cloud-HCI .architecture-shift .CHI-text .item3::before {
    background: url(../image/0033.png) no-repeat
}

.cloud-HCI .overview {
    padding: 70px 0 95px;
    background-color: #dfe9f2
}

@keyframes circleRoate {
    from {
        transform: rotate(0deg) infinite
    }

    to {
        transform: rotate(360deg)
    }
}

.cloud-HCI .overview .content {
    background-color: #fff;
    border: 1px solid #dcdcdc
}

.cloud-HCI .overview .topo {
    width: 60%;
    padding: 80px 20px;
    text-align: center
}

.cloud-HCI .overview .topo .bg {
    position: relative;
    height: 291px;
    width: 291px;
    background: url(../image/0091.png);
    margin: auto;
    text-align: center;
    animation: circleRoate 10s linear infinite;
    animation-timing-function: linear
}

.cloud-HCI .overview .topo .circle {
    position: absolute;
    text-align: center;
    animation: inherit;
    animation-direction: reverse
}

.cloud-HCI .overview .topo .circle::after {
    content: attr(data-text);
    position: absolute;
    display: block;
    bottom: -20px;
    left: -20px;
    font-size: 16px;
    color: #333;
    white-space: nowrap
}

.cloud-HCI .overview .text {
    width: 40%;
    padding: 25px;
    padding-right: 70px;
    border-left: 1px solid #dcdcdc
}

.cloud-HCI .overview .text h3 {
    font-size: 18px;
    position: relative
}

.cloud-HCI .overview .text h3::after {
    content: "";
    width: 40px;
    height: 1px;
    background-color: #333;
    position: absolute;
    left: 0;
    bottom: 0
}

.cloud-HCI .overview .text p {
    line-height: 34px;
    color: #666;
    text-align: left !important
}

.cloud-HCI section.frame {
    background-color: #fff !important;
    padding: 80px 0
}

.cloud-HCI .swiper-scene {
    background-color: #f7f7f7;
    padding: 50px 0
}

.cloud-HCI .swiper-scene .content {
    margin-top: 40px
}

.cloud-HCI .swiper-item {
    text-align: center
}

.cloud-HCI .swiper-item h3 {
    font-size: 26px;
    margin: 15px 0
}

.cloud-HCI .swiper-item>div {
    display: inline-block;
    width: 210px
}

.cloud-HCI .industry {
    padding: 60px 0 80px;
    background-color: #dfe9f2
}

.cloud-HCI .industry .item1 {
    background: url(../image/0311.png) no-repeat
}

.cloud-HCI .industry .item2 {
    background: url(../image/032.png) no-repeat
}

.cloud-HCI .industry .item3 {
    background: url(../image/033.png) no-repeat
}

.cloud-HCI .industry .item4 {
    background: url(../image/0341.png) no-repeat
}

.cloud-HCI .industry .item5 {
    background: url(../image/0351.png) no-repeat
}

.cloud-HCI .industry .item6 {
    background: url(../image/0361.png) no-repeat
}

.cloud-HCI .industry .content {
    margin: 0 -10px
}

.cloud-HCI .industry .item {
    width: 33.3%;
    height: 250px;
    text-align: center;
    border: 10px solid #dfe9f2;
    background-size: 100% 100%;
    position: relative;
    transition: all .5s
}

.cloud-HCI .industry .item .ani-tit1 {
    color: #fff;
    font-size: 24px;
    display: inline-block;
    position: absolute;
    top: 45%
}

.cloud-HCI .industry .item:hover {
    cursor: pointer;
    background-size: 100% 108%;
    transition: all .5s
}

.cloud-waf h2,
.cloud-ddos h2,
.cloud-datavault h2,
.cloud-database h2,
.cloud-sup h2,
.cloud-agent h2,
.cloud-cdn h2,
.cloud-oos h2,
.cloud-chia h2 {
    margin: 0
}

.cloud-waf .banner,
.cloud-ddos .banner,
.cloud-datavault .banner,
.cloud-database .banner,
.cloud-sup .banner,
.cloud-agent .banner,
.cloud-cdn .banner,
.cloud-oos .banner,
.cloud-chia .banner {
    height: 597px
}

.cloud-waf .banner .wrapper .banner-txt,
.cloud-ddos .banner .wrapper .banner-txt,
.cloud-datavault .banner .wrapper .banner-txt,
.cloud-database .banner .wrapper .banner-txt,
.cloud-sup .banner .wrapper .banner-txt,
.cloud-agent .banner .wrapper .banner-txt,
.cloud-cdn .banner .wrapper .banner-txt,
.cloud-oos .banner .wrapper .banner-txt,
.cloud-chia .banner .wrapper .banner-txt {
    height: 597px
}

.cloud-waf .banner .wrapper .banner-txt h1,
.cloud-ddos .banner .wrapper .banner-txt h1,
.cloud-datavault .banner .wrapper .banner-txt h1,
.cloud-database .banner .wrapper .banner-txt h1,
.cloud-sup .banner .wrapper .banner-txt h1,
.cloud-agent .banner .wrapper .banner-txt h1,
.cloud-cdn .banner .wrapper .banner-txt h1,
.cloud-oos .banner .wrapper .banner-txt h1,
.cloud-chia .banner .wrapper .banner-txt h1 {
    color: #fff;
    font-size: 36px
}

.cloud-waf .banner .wrapper .banner-txt h4,
.cloud-ddos .banner .wrapper .banner-txt h4,
.cloud-datavault .banner .wrapper .banner-txt h4,
.cloud-database .banner .wrapper .banner-txt h4,
.cloud-sup .banner .wrapper .banner-txt h4,
.cloud-agent .banner .wrapper .banner-txt h4,
.cloud-cdn .banner .wrapper .banner-txt h4,
.cloud-oos .banner .wrapper .banner-txt h4,
.cloud-chia .banner .wrapper .banner-txt h4 {
    color: #fff;
    margin: 70px 0;
    line-height: 30px
}

.cloud .product-function {
    background-color: #f7f8fa;
    padding: 100px 0 140px;
    text-align: center
}

.cloud .product-function .float-row {
    margin: 0 -10px
}

.cloud .product-function .float-item {
    padding: 10px
}

.cloud .product-function .float-item span {
    font-size: 18px;
    display: block;
    font-weight: bold;
    line-height: 36px
}

.cloud .product-function .float-content {
    height: 100%;
    padding: 20px;
    background-color: #fff
}

.cloud .product-function .float-content:hover {
    box-shadow: 0 0 20px rgba(36, 37, 41, 0.1);
    transition: .5s
}

.cloud .product-ability {
    padding: 40px 0 60px
}

.cloud .product-ability .ability-table {
    width: 100%;
    border-collapse: collapse
}

.cloud .product-ability .ability-th th {
    padding: 0 30px;
    background-color: #316ed4;
    color: #fff;
    height: 55px;
    font-size: 18px;
    font-weight: normal;
    line-height: 55px;
    text-align: left;
    border: 1px solid #c4cbd6
}

.cloud .product-ability .ability-tr td {
    font-size: 16px;
    color: #333;
    padding: 10px 30px;
    border: 1px solid #c4cbd6
}

.cloud .product-advantage {
    padding: 100px 0
}

.cloud .product-advantage .float-item {
    padding: 10px;
    margin-top: 30px
}

.cloud .product-advantage .a_img {
    width: 80px;
    text-align: center
}

.cloud .product-advantage .content span {
    font-size: 18px;
    font-weight: bold;
    line-height: 36px
}

.cloud .product-config {
    background-color: #f7f8fa;
    padding: 100px 0
}

.cloud .product-config .tips {
    position: relative;
    display: inline-block;
    height: 40px
}

.cloud .product-config .tips span {
    vertical-align: bottom;
    position: absolute;
    bottom: 0;
    white-space: nowrap
}

.cloud .product-config .tips span::before {
    content: url(../image/ques-mark2.png);
    margin-right: 5px
}

.cloud .product-config .data-info-card {
    padding: 10px 20px 10px 0;
    border: none
}

.cloud .product-config .data-site-tit {
    position: relative;
    display: table-cell;
    vertical-align: top
}

.cloud .product-config .item-title {
    vertical-align: top;
    padding-top: 20px
}

.cloud .product-config .item-title span {
    font-weight: bold;
    color: #333;
    font-size: 18px
}

.cloud .product-config .data-list ul {
    display: table
}

.cloud .product-config .data-list li {
    color: #333;
    position: relative
}

.cloud .product-config .data-list .active {
    border: 1px solid #3555f6 !important;
    background-color: #fff !important;
    color: #3555f6
}

.cloud .product-config .data-list .active::after {
    content: url(../image/0023.png);
    position: absolute;
    bottom: -18px;
    right: -1px
}

.cloud .product-scene {
    padding: 70px 0;
    background-color: #f7f8fa
}

.cloud .product-scene .scene-content {
    background-color: #fff;
    border: 1px solid #e5e5e5
}

.cloud .product-scene .scene-tr {
    padding: 20px 40px
}

.cloud .product-scene .scene-tr span {
    font-weight: bold;
    font-size: 24px;
    color: #333
}

.cloud .product-scene .scene-tr p {
    font-size: 16px
}

.cloud .product-scene .scene-tr>div:first-child {
    padding: 0 60px
}

.cloud .product-scene .scene-tr:not(:last-child) {
    border-bottom: 1px solid #e5e5e5
}

.cloud .product-backup {
    padding: 90px 0;
    background-color: #f7f8fa
}

.cloud .product-backup .backup-chart {
    margin: 40px 0
}

.cloud-datavault .product-function .float-item p {
    text-align: center
}

.cloud-datavault .product-function .float-content {
    padding: 20px 10px
}

.cloud-chia .product-ribbon {
    margin-top: 30px;
    background: url(../image/b0011.jpg) center no-repeat;
    color: #fff;
    font-size: 36px;
    text-align: center;
    padding: 30px 0
}

.cloud-chia .product-ribbon .count {
    font-weight: normal;
    font-size: 48px
}

.cloud-chia .product-advantage {
    padding-top: 60px
}

.cloud-chia .product-framework {
    background-color: #f7f8fa;
    padding: 30px 0 50px
}

.cloud-chia .product-framework .float-box {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
    background-color: #fff
}

.cloud-chia .product-framework .float-box>div:first-child {
    border-bottom: 1px solid #cdd4d8
}

.cloud-chia .product-framework .float-box>div:last-child {
    padding: 50px 0
}

.cloud-chia .product-framework .float-row span {
    display: block;
    font-weight: bold;
    font-size: 18px;
    color: #2a67ff
}

.cloud-chia .product-framework .float-item {
    padding: 20px 0;
    margin-top: 0
}

.cloud-chia .product-framework .float-item>div {
    padding: 30px 60px
}

.cloud-chia .product-framework .float-item-m>div {
    height: 100%;
    border-left: 1px solid #cdd4d8;
    border-right: 1px solid #cdd4d8
}

.cloud-chia .product-scene {
    background-color: #fff;
    padding-bottom: 90px
}

.cloud-chia .product-scene .scene-content {
    background-color: #f7f8fa
}

.cloud-chia .product-scene .scene-tr {
    padding: 10px 0
}

.cloud-chia .product-scene .scene-tr>div:first-child {
    width: 90px
}

.cloud-chia .product-scene .scene-tr .num {
    font-weight: bold;
    font-size: 60px;
    color: #d2dae6
}

.cloud-chia .product-scene .scene-tr span {
    font-size: 20px
}

.cloud-sup .product-function h3 {
    text-align: left;
    font-size: 24px
}

.cloud-sup .product-function p {
    font-size: 16px
}

.cloud-sup .product-function .float-content {
    padding: 20px 38px;
    box-shadow: 0 0 20px rgba(56, 57, 63, 0.1)
}

.cloud-sup .product-advantage .float-box {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1)
}

.cloud-sup .product-advantage .float-box>div:first-child {
    border-bottom: 1px solid #cdd4d8
}

.cloud-sup .product-advantage .float-row span {
    display: block;
    font-weight: bold;
    font-size: 18px
}

.cloud-sup .product-advantage .float-row p {
    text-align: center
}

.cloud-sup .product-advantage .float-item {
    padding: 20px 0;
    margin-top: 0
}

.cloud-sup .product-advantage .float-item>div {
    padding: 30px 60px
}

.cloud-sup .product-advantage .float-item-m>div {
    height: 100%;
    border-left: 1px solid #cdd4d8;
    border-right: 1px solid #cdd4d8
}

.cloud-sup .product-scene {
    padding: 110px 0
}

.cloud-sup .product-scene .text {
    padding: 100px 70px
}

.cloud-agent .ag-banner {
    margin-top: 70px
}

.cloud-agent .ag-tit {
    font-size: 30px;
    color: #fff;
    margin-bottom: 100px
}

.cloud-agent .tit1 h2 {
    font-weight: normal
}

.cloud-agent section {
    padding: 60px 0 80px
}

.cloud-agent .advance,
.cloud-agent .support {
    padding: 80px 0 150px
}

.cloud-agent .advance .tit1,
.cloud-agent .support .tit1 {
    margin: 30px 0
}

.cloud-agent .node {
    height: 1030px !important
}

.cloud-agent .node .tit h2 {
    text-align: center;
    font-weight: normal;
    font-size: 30px
}

.cloud-agent .node .tit span {
    font-size: 36px;
    color: #333
}

.bottom-product-service {
    padding-bottom: 80px;
    background: url(../image/089.jpg) center no-repeat
}

.bottom-product-service h3,
.bottom-product-service .tit {
    color: #fff;
    font-size: 34px;
    padding: 50px 0;
    margin: 0
}

.bottom-product-service .content-wrap {
    margin-bottom: 60px
}

.bottom-product-service .s_content {
    text-align: center;
    color: #fff;
    font-size: 24px;
    line-height: 60px
}

.cloud-oos .product-scene {
    background: url(../image/091.png) top no-repeat
}

.cloud-cdn .product-function .float-content {
    padding: 40px 30px
}

.cloud-cdn .product-function .float-content>div {
    height: 60px;
    line-height: 60px
}

.cloud-cdn .product-function .float-content p {
    text-align: center;
    line-height: 24px
}

.cloud-cdn .product-scene {
    position: relative;
    overflow: hidden
}

.cloud-cdn .product-scene .scene-mask {
    position: absolute;
    top: 100px;
    width: 100%;
    height: 85%;
    pointer-events: none
}

@media screen and (max-width:968px) {
    .cloud-cdn .product-function .float-item {
        width: 50%
    }

    .cloud-cdn .product-scene .scene-tr {
        padding: 15px
    }

    .cloud-cdn .product-scene .scene-tr img {
        width: 50px
    }

    .cloud-cdn .product-scene .scene-tr span {
        font-size: 18px
    }

    .cloud-cdn .product-scene .scene-tr>div:first-child {
        padding: 0 10px
    }
}

.info-customize .data-info {
    background-color: transparent
}

.info-customize .total-info {
    padding: 3px
}

.info-customize .total-info-data {
    margin: 0;
    padding: 17px;
    border-bottom: 1px dashed #d2d2d2
}

.info-customize .total-info-item {
    color: #999;
    font-size: 12px
}

.info-customize .total-info-item b {
    font-size: 16px;
    color: #333
}

.info-customize .total-info-item .one-row {
    color: #333;
    line-height: 30px;
    margin-top: 10px
}

.info-customize .total-info-item .price {
    text-align: right
}

.info-customize .total-title h3 {
    margin: 0;
    line-height: 46px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-color: #dde0e4
}

.info-customize .customize-l {
    padding-left: 40px;
    background: #fff
}

.info-customize .customize-r {
    vertical-align: text-top;
    padding-left: 10px
}

.info-customize .customize-r .price b {
    color: #ef2a3a
}

.info-customize .customize-r-info {
    background: #fff;
    height: 100%
}

@media screen and (max-width:1200px) {
    .info-customize .customize-r {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10
    }

    .info-customize .total-info-data,
    .info-customize .total-title {
        display: none
    }

    .info-customize .customize-r-info,
    .info-customize .customize-r {
        width: 100% !important
    }

    .info-customize .customize-r {
        box-shadow: 0 0 20px rgba(36, 37, 41, 0.15);
        background-color: #fff
    }

    .info-customize .total-info-item.totalPrice>div:first-child {
        width: auto;
        float: left
    }

    .info-customize .total-info-item.totalPrice>div:last-child {
        width: auto;
        float: right
    }

    .info-customize .totalPrice {
        font-size: 24px
    }

    .info-customize .totalPrice .submit {
        padding-top: 10px
    }

    .info-customize .totalPrice .price b {
        font-size: 24px
    }
}

@media screen and (max-width:768px) {
    .info-customize .customize-r {
        bottom: 50px
    }

    .info-customize .customize-l {
        padding-left: 10px
    }

    .info-customize .totalPrice {
        font-size: 18px
    }

    .info-customize .totalPrice .submit {
        padding-bottom: 10px
    }

    .info-customize .totalPrice .price b {
        font-size: 18px
    }
}

.info-regular {
    display: none
}

.IOT-index {
    background: #f3f6f9
}

.IOT-index section {
    padding: 40px 0
}

@media screen and (max-width:768px) {
    .IOT-index section {
        padding: 20px 0
    }
}

.IOT-index section .wrapper {
    text-align: center
}

.IOT-index section .wrapper .tit3 {
    margin-bottom: 48px
}

@media screen and (max-width:768px) {
    .IOT-index section .wrapper .tit3 {
        margin-bottom: 20px
    }
}

.IOT-index section.banner {
    height: 937px;
    background: url(../image/043.png) top center no-repeat
}

.IOT-index section.banner .wrapper {
    overflow: hidden
}

.IOT-index section.banner .wrapper>.tit4 {
    margin-top: 20px
}

.IOT-index section.banner .wrapper>p {
    color: #ff7575;
    font-size: 18px;
    text-align: center
}

@media screen and (max-width:500px) {
    .IOT-index section.banner .wrapper>p {
        font-size: 14px
    }
}

.IOT-index section.banner .wrapper .b03 {
    margin: 20px auto 30px
}

.IOT-index section.banner .wrapper .iot-ani {
    margin: auto;
    left: 0;
    right: 0
}

.IOT-index section.banner .wrapper .phone {
    position: relative;
    top: 8px;
    left: -8px
}

.IOT-index section.status {
    margin-top: -200px
}

.IOT-index section.status .wrapper .status-wrap {
    position: relative;
    padding: 110px 130px 0;
    height: 315px;
    background: url(../image/044.png) no-repeat center
}

.IOT-index section.status .wrapper .status-wrap h2 {
    position: relative;
    padding: 0 266px;
    display: inline-block;
    color: #050c15;
    font-size: 30px;
    margin: auto;
    white-space: nowrap
}

.IOT-index section.status .wrapper .status-wrap h2 .temp {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px
}

.IOT-index section.status .wrapper .status-wrap h2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px;
    left: 0;
    background: url(../image/tit3-01.png) no-repeat center
}

.IOT-index section.status .wrapper .status-wrap h2::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 236px;
    height: 21px;
    right: 0;
    background: url(../image/tit3-02.png) no-repeat center
}

@media screen and (max-width:992px) {
    .IOT-index section.status .wrapper .status-wrap h2 {
        padding: 0 256px;
        font-size: 26px
    }
}

@media screen and (max-width:768px) {
    .IOT-index section.status .wrapper .status-wrap h2 {
        padding: 0 100px
    }

    .IOT-index section.status .wrapper .status-wrap h2 .temp {
        content: "";
        width: 84px;
        height: 16px
    }

    .IOT-index section.status .wrapper .status-wrap h2::before {
        content: "";
        width: 84px;
        height: 16px;
        left: 0;
        background: url(../image/tit3-03.png) no-repeat center
    }

    .IOT-index section.status .wrapper .status-wrap h2::after {
        content: "";
        width: 84px;
        height: 16px;
        right: 0;
        background: url(../image/tit3-04.png) no-repeat center
    }
}

@media screen and (max-width:480px) {
    .IOT-index section.status .wrapper .status-wrap h2 {
        padding: 0 86px;
        font-size: 22px
    }

    .IOT-index section.status .wrapper .status-wrap h2 .temp {
        width: 68px
    }

    .IOT-index section.status .wrapper .status-wrap h2::before {
        width: 68px;
        left: 0;
        background: url(../image/tit3-03.png) no-repeat center;
        background-size: 100%
    }

    .IOT-index section.status .wrapper .status-wrap h2::after {
        width: 68px;
        right: 0;
        background: url(../image/tit3-04.png) no-repeat center;
        background-size: 100%
    }
}

@media screen and (max-width:404px) {
    .IOT-index section.status .wrapper .status-wrap h2 {
        padding: 0 32px
    }

    .IOT-index section.status .wrapper .status-wrap h2 .temp {
        width: 20px;
        height: 18px
    }

    .IOT-index section.status .wrapper .status-wrap h2::before {
        width: 20px;
        height: 18px;
        left: 0;
        background: url(../image/tit3-05.png) no-repeat center
    }

    .IOT-index section.status .wrapper .status-wrap h2::after {
        width: 20px;
        height: 18px;
        right: 0;
        background: url(../image/tit3-06.png) no-repeat center
    }
}

@media screen and (min-width:1301px) {
    .IOT-index section.status .wrapper .status-wrap h2 {
        position: absolute;
        top: 26px;
        left: 0;
        right: 0;
        margin: auto;
        font-size: 30px;
        color: #fff
    }

    .IOT-index section.status .wrapper .status-wrap h2::before {
        display: none
    }

    .IOT-index section.status .wrapper .status-wrap h2::after {
        display: none
    }
}

.IOT-index section.status .wrapper .status-wrap p {
    color: #333
}

.IOT-index section.status .wrapper .status-wrap ul li {
    position: relative;
    text-align: left;
    color: #1955a0;
    padding-left: 15px
}

.IOT-index section.status .wrapper .status-wrap ul li::before {
    position: absolute;
    left: 0;
    top: 6px;
    content: "";
    display: block;
    height: 9px;
    width: 9px;
    background: #ff7582
}

@media screen and (max-width:1300px) {
    .IOT-index section.status .wrapper .status-wrap {
        background: none;
        border: #a0d9fe solid 1px;
        padding: 6px;
        height: auto
    }

    .IOT-index section.status .wrapper .status-wrap h2 {
        top: unset;
        margin-bottom: 10px
    }

    .IOT-index section.status .wrapper .status-wrap>div {
        background: #e3f4ff;
        padding: 20px 40px
    }
}

.IOT-index section.need .need-table {
    margin: -16px
}

.IOT-index section.need .need-table .one-row {
    border-collapse: separate;
    border-spacing: 16px
}

.IOT-index section.need .need-table .one-row>div {
    background: #fff;
    width: 25%;
    padding: 40px 20px;
    vertical-align: top;
    border-bottom: 2px solid transparent
}

.IOT-index section.need .need-table .one-row>div h3 {
    font-size: 20px;
    margin: 10px 0
}

.IOT-index section.need .need-table .one-row>div p {
    text-align: center
}

.IOT-index section.need .need-table .one-row>div:hover:nth-child(odd) {
    border-bottom-color: #ed5b59
}

.IOT-index section.need .need-table .one-row>div:hover:nth-child(even) {
    border-bottom-color: #3a7fdc
}

@media screen and (max-width:768px) {
    .IOT-index section.need .need-table {
        margin: 0
    }

    .IOT-index section.need .need-table .one-row {
        display: block
    }

    .IOT-index section.need .need-table .one-row>div {
        display: block;
        width: 100%;
        margin-bottom: 16px
    }

    .IOT-index section.need .need-table .one-row>div img {
        width: 60px
    }
}

.IOT-index section.product .product-table {
    position: relative;
    background: -webkit-linear-gradient(90deg, #1957a1, #121f73);
    background: -o-linear-gradient(90deg, #1957a1, #121f73);
    background: -moz-linear-gradient(90deg, #1957a1, #121f73);
    background: linear-gradient(90deg, #1957a1, #121f73);
    padding: 20px;
    margin-bottom: 30px;
    overflow: hidden
}

.IOT-index section.product .product-table::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 371px;
    height: 148px;
    background: url(../image/042.png) no-repeat center;
    z-index: 1
}

.IOT-index section.product .product-table>h4 {
    font-size: 24px;
    color: #fff;
    position: relative;
    z-index: 2
}

.IOT-index section.product .product-table .one-row {
    position: relative;
    z-index: 2;
    border-collapse: separate;
    border-spacing: 2px
}

.IOT-index section.product .product-table .one-row>div {
    background: #fff;
    border-radius: 3px;
    vertical-align: top;
    width: 50%
}

.IOT-index section.product .product-table .one-row>div .tit {
    font-size: 20px;
    border-bottom: 1px solid #8dafd8;
    padding: 12px 0
}

.IOT-index section.product .product-table .one-row>div ul {
    padding: 10px 30px
}

.IOT-index section.product .product-table .one-row>div ul li {
    position: relative;
    text-align: left;
    font-size: 16px;
    padding-left: 28px;
    line-height: 28px;
    margin-bottom: 6px
}

.IOT-index section.product .product-table .one-row>div ul li::before {
    position: absolute;
    top: 6px;
    left: 0;
    content: "";
    display: block;
    width: 20px;
    height: 15px;
    background: url(../image/iot-check.png) no-repeat center
}

@media screen and (max-width:768px) {
    .IOT-index section.product .product-table .one-row {
        display: block
    }

    .IOT-index section.product .product-table .one-row>div {
        display: block;
        width: 100%;
        margin-bottom: 10px
    }
}

.IOT-index section.advantage .advantage-table {
    position: relative;
    background: #fff;
    padding: 30px
}

@media screen and (max-width:768px) {
    .IOT-index section.advantage .advantage-table {
        padding-top: 260px
    }
}

.IOT-index section.advantage .advantage-table table {
    margin: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px
}

.IOT-index section.advantage .advantage-table table .rotate-cloud {
    position: relative;
    height: 277px;
    width: 277px
}

.IOT-index section.advantage .advantage-table table .rotate-cloud img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.IOT-index section.advantage .advantage-table table .rotate-cloud img:nth-child(2) {
    animation: rotate infinite 120s
}

.IOT-index section.advantage .advantage-table table .rotate-cloud img:nth-child(3) {
    animation: rerotate infinite linear 90s
}

.IOT-index section.advantage .advantage-table table .rotate-cloud img:nth-child(4) {
    animation: rotate infinite linear 60s
}

@media screen and (max-width:992px) {
    .IOT-index section.advantage .advantage-table table .rotate-cloud {
        height: 200px;
        width: 200px
    }

    .IOT-index section.advantage .advantage-table table .rotate-cloud img:nth-child(1) {
        width: 100px
    }

    .IOT-index section.advantage .advantage-table table .rotate-cloud img:nth-child(2) {
        width: 153px
    }

    .IOT-index section.advantage .advantage-table table .rotate-cloud img:nth-child(3) {
        width: 165px
    }

    .IOT-index section.advantage .advantage-table table .rotate-cloud img:nth-child(4) {
        width: 200px
    }
}

@media screen and (max-width:768px) {
    .IOT-index section.advantage .advantage-table table .rotate-cloud {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        margin: auto
    }
}

.IOT-index section.advantage .advantage-table table .item {
    width: 50%
}

.IOT-index section.advantage .advantage-table table .item h3 {
    position: relative;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 6px
}

.IOT-index section.advantage .advantage-table table .item h3::before {
    content: "";
    width: 116px;
    height: 34px;
    position: absolute
}

.IOT-index section.advantage .advantage-table table .item .temp1 {
    padding-right: 126px
}

.IOT-index section.advantage .advantage-table table .item .temp1 * {
    text-align: right
}

.IOT-index section.advantage .advantage-table table .item .temp1 h3::before {
    right: -126px
}

.IOT-index section.advantage .advantage-table table .item .temp2 {
    padding-left: 126px
}

.IOT-index section.advantage .advantage-table table .item .temp2 * {
    text-align: left
}

.IOT-index section.advantage .advantage-table table .item .temp2 h3::before {
    left: -126px
}

.IOT-index section.advantage .advantage-table table .item .temp3 {
    vertical-align: bottom
}

.IOT-index section.advantage .advantage-table table .item .temp3 h3::before {
    top: 4px
}

.IOT-index section.advantage .advantage-table table .item .temp4 {
    vertical-align: top
}

.IOT-index section.advantage .advantage-table table .item .temp4 h3::before {
    top: 0
}

.IOT-index section.advantage .advantage-table table .item.item1 {
    padding-right: 126px;
    vertical-align: bottom
}

.IOT-index section.advantage .advantage-table table .item.item1 * {
    text-align: right
}

.IOT-index section.advantage .advantage-table table .item.item1 h3::before {
    right: -126px
}

.IOT-index section.advantage .advantage-table table .item.item1 h3::before {
    top: 4px
}

.IOT-index section.advantage .advantage-table table .item.item1 h3::before {
    background: url(../image/0052.png) center no-repeat
}

.IOT-index section.advantage .advantage-table table .item.item2 {
    padding-left: 126px;
    vertical-align: bottom
}

.IOT-index section.advantage .advantage-table table .item.item2 * {
    text-align: left
}

.IOT-index section.advantage .advantage-table table .item.item2 h3::before {
    left: -126px
}

.IOT-index section.advantage .advantage-table table .item.item2 h3::before {
    top: 4px
}

.IOT-index section.advantage .advantage-table table .item.item2 h3::before {
    background: url(../image/0062.png) center no-repeat
}

.IOT-index section.advantage .advantage-table table .item.item3 {
    padding-right: 126px;
    vertical-align: top
}

.IOT-index section.advantage .advantage-table table .item.item3 * {
    text-align: right
}

.IOT-index section.advantage .advantage-table table .item.item3 h3::before {
    right: -126px
}

.IOT-index section.advantage .advantage-table table .item.item3 h3::before {
    top: 0
}

.IOT-index section.advantage .advantage-table table .item.item3 h3::before {
    background: url(../image/0071.png) center no-repeat
}

.IOT-index section.advantage .advantage-table table .item.item4 {
    padding-left: 126px;
    vertical-align: top
}

.IOT-index section.advantage .advantage-table table .item.item4 * {
    text-align: left
}

.IOT-index section.advantage .advantage-table table .item.item4 h3::before {
    left: -126px
}

.IOT-index section.advantage .advantage-table table .item.item4 h3::before {
    top: 0
}

.IOT-index section.advantage .advantage-table table .item.item4 h3::before {
    background: url(../image/0082.png) center no-repeat
}

@media screen and (max-width:1200px) {
    .IOT-index section.advantage .advantage-table table .item h3::before {
        width: 30px;
        height: 30px;
        background: url(../image/0093.png) center no-repeat !important
    }

    .IOT-index section.advantage .advantage-table table .item.item1 {
        padding-right: 42px
    }

    .IOT-index section.advantage .advantage-table table .item.item1 h3::before {
        right: -42px
    }

    .IOT-index section.advantage .advantage-table table .item.item2 {
        padding-left: 42px
    }

    .IOT-index section.advantage .advantage-table table .item.item2 h3::before {
        left: -42px
    }

    .IOT-index section.advantage .advantage-table table .item.item3 {
        padding-right: 42px
    }

    .IOT-index section.advantage .advantage-table table .item.item3 h3::before {
        right: -42px
    }

    .IOT-index section.advantage .advantage-table table .item.item4 {
        padding-left: 42px
    }

    .IOT-index section.advantage .advantage-table table .item.item4 h3::before {
        left: -42px
    }
}

@media screen and (max-width:768px) {
    .IOT-index section.advantage .advantage-table table .item {
        vertical-align: top !important
    }
}

@media screen and (max-width:580px) {
    .IOT-index section.advantage .advantage-table table .item {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding-right: 0 !important;
        padding-left: 42px !important
    }

    .IOT-index section.advantage .advantage-table table .item>* {
        text-align: left !important
    }

    .IOT-index section.advantage .advantage-table table .item h3::before {
        left: -42px !important
    }
}

@media screen and (max-width:580px) {
    .IOT-index section.advantage .advantage-table table {
        display: block
    }

    .IOT-index section.advantage .advantage-table table tr {
        display: block
    }

    .IOT-index section.advantage .advantage-table table .item5 {
        display: block;
        height: 0;
        max-height: 0;
        padding: 0;
        overflow: hidden
    }
}

.IOT-index section.partner .partner-table {
    margin: 0 -40px
}

.IOT-index section.partner .partner-table .one-row {
    width: auto;
    border-collapse: separate;
    border-spacing: 40px;
    width: 100%
}

.IOT-index section.partner .partner-table .one-row img {
    max-height: 48px;
    max-width: 120PX
}

@media screen and (max-width:768px) {
    .IOT-index section.partner .partner-table .one-row img {
        max-width: 100%
    }
}

@media screen and (max-width:992px) {
    .IOT-index section.partner .partner-table {
        margin: 0 -20px
    }

    .IOT-index section.partner .partner-table .one-row {
        border-spacing: 20px
    }
}

@media screen and (max-width:768px) {
    .IOT-index section.partner .partner-table {
        margin: 0
    }

    .IOT-index section.partner .partner-table .one-row {
        display: block
    }

    .IOT-index section.partner .partner-table .one-row>div {
        display: inline-block;
        margin: 5px 10px
    }

    .IOT-index section.partner .partner-table .one-row>div img {
        max-width: 100PX
    }
}

@media screen and (max-width:768px) and screen and (max-width:768px) {
    .IOT-index section.partner .partner-table .one-row>div img {
        max-width: 100%
    }
}

.host-index section.hl-catalog-nav .hl-catalog>div:first-child {
    width: 125px
}

@media screen and (max-width:768px) {
    .host-index section.hl-catalog-nav .hl-catalog>div:first-child {
        padding-left: 6px
    }
}

@media screen and (max-width:768px) {
    .host-index section.hl-catalog-nav .hl-catalog>div {
        display: block
    }

    .host-index section.hl-catalog-nav .hl-catalog>div h3 {
        margin-bottom: 0
    }
}

.host-index .tit1 {
    padding-top: 0
}

.host-index .tit1 h1 {
    text-align: left;
    font-size: 24px
}

.datacenter-index .banner h2 {
    margin: 0;
    text-align: center;
    font-size: 32px;
    color: #fff;
    padding-top: 80px
}

.datacenter-index .banner p {
    margin: 0;
    text-align: center;
    font-size: 18px;
    color: #fff
}

.datacenter-index section.app-nav {
    display: none
}

@media screen and (max-width:768px) {
    .datacenter-index section.app-nav {
        display: block;
        background: #f1f4f9
    }

    .datacenter-index section.app-nav .app-nav-table {
        margin: -12px
    }

    .datacenter-index section.app-nav .app-nav-table table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 12px
    }

    .datacenter-index section.app-nav .app-nav-table table td {
        background: #fff;
        border: 1px solid #ddd;
        text-align: center;
        padding-top: 20px
    }

    .datacenter-index section.app-nav .app-nav-table table td h1 {
        margin-top: 0;
        font-size: 22px
    }

    .datacenter-index section.app-nav .app-nav-table table td:hover {
        cursor: pointer
    }
}

.datacenter-index section.map {
    background: #fff;
    background-size: cover;
    padding-bottom: 60px
}

.datacenter-index section.map .tit1 {
    margin-bottom: 20px
}

.datacenter-index section.map .map-nav {
    position: relative;
    height: 580px;
    width: 1180px
}

.datacenter-index section.map .map-nav .temp {
    position: absolute
}

.datacenter-index section.map .map-nav .temp>img {
    position: absolute
}

.datacenter-index section.map .map-nav .temp .map,
.datacenter-index section.map .map-nav .temp .hover {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.datacenter-index section.map .map-nav .temp .name {
    z-index: 3
}

.datacenter-index section.map .map-nav .temp .hover {
    display: none;
    z-index: 2
}

.datacenter-index section.map .map-nav .temp .map {
    z-index: 1
}

.datacenter-index section.map .map-nav .temp:hover {
    cursor: pointer
}

.datacenter-index section.map .map-nav .temp:hover .hover {
    display: inline
}

.datacenter-index section.map .map-nav .northamerica {
    position: absolute;
    height: 355px;
    width: 522px;
    top: 0;
    left: 0
}

.datacenter-index section.map .map-nav .northamerica>img {
    position: absolute
}

.datacenter-index section.map .map-nav .northamerica .map,
.datacenter-index section.map .map-nav .northamerica .hover {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.datacenter-index section.map .map-nav .northamerica .name {
    z-index: 3
}

.datacenter-index section.map .map-nav .northamerica .hover {
    display: none;
    z-index: 2
}

.datacenter-index section.map .map-nav .northamerica .map {
    z-index: 1
}

.datacenter-index section.map .map-nav .northamerica:hover {
    cursor: pointer
}

.datacenter-index section.map .map-nav .northamerica:hover .hover {
    display: inline
}

.datacenter-index section.map .map-nav .northamerica .name {
    top: 150px;
    left: 170px
}

.datacenter-index section.map .map-nav .southamerica {
    position: absolute;
    height: 251px;
    width: 156px;
    top: 331px;
    left: 282px
}

.datacenter-index section.map .map-nav .southamerica>img {
    position: absolute
}

.datacenter-index section.map .map-nav .southamerica .map,
.datacenter-index section.map .map-nav .southamerica .hover {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.datacenter-index section.map .map-nav .southamerica .name {
    z-index: 3
}

.datacenter-index section.map .map-nav .southamerica .hover {
    display: none;
    z-index: 2
}

.datacenter-index section.map .map-nav .southamerica .map {
    z-index: 1
}

.datacenter-index section.map .map-nav .southamerica:hover {
    cursor: pointer
}

.datacenter-index section.map .map-nav .southamerica:hover .hover {
    display: inline
}

.datacenter-index section.map .map-nav .southamerica .name {
    top: 40px;
    left: 30px
}

.datacenter-index section.map .map-nav .europe {
    position: absolute;
    height: 238px;
    width: 319px;
    top: 14px;
    right: 396px
}

.datacenter-index section.map .map-nav .europe>img {
    position: absolute
}

.datacenter-index section.map .map-nav .europe .map,
.datacenter-index section.map .map-nav .europe .hover {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.datacenter-index section.map .map-nav .europe .name {
    z-index: 3
}

.datacenter-index section.map .map-nav .europe .hover {
    display: none;
    z-index: 2
}

.datacenter-index section.map .map-nav .europe .map {
    z-index: 1
}

.datacenter-index section.map .map-nav .europe:hover {
    cursor: pointer
}

.datacenter-index section.map .map-nav .europe:hover .hover {
    display: inline
}

.datacenter-index section.map .map-nav .europe .name {
    top: 110px;
    left: 150px
}

.datacenter-index section.map .map-nav .africa {
    position: absolute;
    height: 252px;
    width: 229px;
    top: 250px;
    right: 453px
}

.datacenter-index section.map .map-nav .africa>img {
    position: absolute
}

.datacenter-index section.map .map-nav .africa .map,
.datacenter-index section.map .map-nav .africa .hover {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.datacenter-index section.map .map-nav .africa .name {
    z-index: 3
}

.datacenter-index section.map .map-nav .africa .hover {
    display: none;
    z-index: 2
}

.datacenter-index section.map .map-nav .africa .map {
    z-index: 1
}

.datacenter-index section.map .map-nav .africa:hover {
    cursor: pointer
}

.datacenter-index section.map .map-nav .africa:hover .hover {
    display: inline
}

.datacenter-index section.map .map-nav .africa .name {
    top: 60px;
    left: 80px
}

.datacenter-index section.map .map-nav .asia {
    position: absolute;
    height: 398px;
    width: 544px;
    top: 15px;
    right: 0
}

.datacenter-index section.map .map-nav .asia>img {
    position: absolute
}

.datacenter-index section.map .map-nav .asia .map,
.datacenter-index section.map .map-nav .asia .hover {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.datacenter-index section.map .map-nav .asia .name {
    z-index: 3
}

.datacenter-index section.map .map-nav .asia .hover {
    display: none;
    z-index: 2
}

.datacenter-index section.map .map-nav .asia .map {
    z-index: 1
}

.datacenter-index section.map .map-nav .asia:hover {
    cursor: pointer
}

.datacenter-index section.map .map-nav .asia:hover .hover {
    display: inline
}

.datacenter-index section.map .map-nav .asia .name {
    top: 130px;
    left: 150px
}

.datacenter-index section.map .map-nav .oceania {
    position: absolute;
    height: 178px;
    width: 230px;
    top: 365px;
    right: 34px
}

.datacenter-index section.map .map-nav .oceania>img {
    position: absolute
}

.datacenter-index section.map .map-nav .oceania .map,
.datacenter-index section.map .map-nav .oceania .hover {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.datacenter-index section.map .map-nav .oceania .name {
    z-index: 3
}

.datacenter-index section.map .map-nav .oceania .hover {
    display: none;
    z-index: 2
}

.datacenter-index section.map .map-nav .oceania .map {
    z-index: 1
}

.datacenter-index section.map .map-nav .oceania:hover {
    cursor: pointer
}

.datacenter-index section.map .map-nav .oceania:hover .hover {
    display: inline
}

.datacenter-index section.map .map-nav .oceania .name {
    top: 40px;
    left: 20px
}

@media screen and (max-width:1225px) {
    .datacenter-index section.map .map-nav.lg {
        display: none
    }
}

.datacenter-index section.map .map-nav.md {
    width: 730px;
    height: 360px;
    margin: auto
}

.datacenter-index section.map .map-nav.md .northamerica {
    height: 220px;
    width: 323px
}

.datacenter-index section.map .map-nav.md .northamerica .name {
    top: 70px;
    left: 98px
}

.datacenter-index section.map .map-nav.md .southamerica {
    height: 156px;
    width: 96px;
    top: 206px;
    left: 178px
}

.datacenter-index section.map .map-nav.md .southamerica .name {
    top: 10px;
    left: 0
}

.datacenter-index section.map .map-nav.md .asia {
    height: 246px;
    width: 337px;
    top: 8px;
    right: 0
}

.datacenter-index section.map .map-nav.md .asia .name {
    top: 80px;
    left: 80px
}

.datacenter-index section.map .map-nav.md .europe {
    height: 147px;
    width: 198px;
    top: 9px;
    right: 246px
}

.datacenter-index section.map .map-nav.md .europe .name {
    top: 40px;
    left: 50px
}

.datacenter-index section.map .map-nav.md .africa {
    height: 156px;
    width: 142px;
    top: 154px;
    right: 280px
}

.datacenter-index section.map .map-nav.md .africa .name {
    top: 20px;
    left: 40px
}

.datacenter-index section.map .map-nav.md .oceania {
    height: 110px;
    width: 142px;
    top: 227px;
    right: 28px
}

.datacenter-index section.map .map-nav.md .oceania .name {
    top: 6px;
    left: 4px
}

@media screen and (min-width:1225px) {
    .datacenter-index section.map .map-nav.md {
        display: none
    }
}

.datacenter-index section.map .text {
    text-align: center;
    font-size: 16px;
    margin-top: 30px
}

.datacenter-index section.map .text a {
    color: #ef2a3a
}

@media screen and (max-width:768px) {
    .datacenter-index section.map {
        display: none
    }
}

.datacenter-index section.standard {
    background: #f1f4f9;
    padding-bottom: 60px
}

@media screen and (max-width:768px) {
    .datacenter-index section.standard {
        padding-bottom: 20px
    }

    .datacenter-index section.standard .tit1 h1 {
        font-size: 26px
    }
}

.datacenter-index section.standard .some-row>div>div {
    width: 50%;
    background: #fff;
    vertical-align: middle
}

.datacenter-index section.standard .some-row>div>div h3 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center
}

.datacenter-index section.standard .some-row>div>div p {
    font-size: 14px;
    max-width: 85%;
    text-align: center
}

.datacenter-index section.standard .some-row>div>div img {
    display: block;
    width: 100%
}

.datacenter-index section.standard .some-row>div>div:hover h3 {
    color: #ef2a3a
}

@media screen and (max-width:850px) {
    .datacenter-index section.standard .some-row {
        display: block
    }

    .datacenter-index section.standard .some-row>div {
        position: relative;
        display: block;
        margin-bottom: 20px;
        padding-top: 120px
    }

    .datacenter-index section.standard .some-row>div>div {
        display: block;
        width: 100%
    }

    .datacenter-index section.standard .some-row>div>div.has-txt {
        padding-top: 30px;
        padding-bottom: 40px
    }

    .datacenter-index section.standard .some-row>div>div.has-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 120px;
        overflow: hidden
    }

    .datacenter-index section.standard .some-row>div>div.has-img img {
        display: block;
        width: 100%
    }
}

.datacenter-details section.banner .banner-txt h1 {
    color: #fff !important
}

.datacenter-details .tab-wrap {
    background: #f1f4f9
}

.datacenter-details .tab-wrap .tab .item,
.datacenter-details .tab-wrap .tab-nav .item {
    display: table-cell;
    position: relative;
    line-height: 50px;
    padding: 0 20px;
    font-size: 16px
}

.datacenter-details .tab-wrap .tab .item::before,
.datacenter-details .tab-wrap .tab-nav .item::before {
    content: "|";
    color: #ccc;
    position: absolute;
    left: 0
}

.datacenter-details .tab-wrap .tab .item:first-child::before,
.datacenter-details .tab-wrap .tab-nav .item:first-child::before {
    content: ""
}

.datacenter-details .tab-wrap .tab .item.current,
.datacenter-details .tab-wrap .tab-nav .item.current {
    border-top: 3px #ef2a3a solid;
    border-bottom: 0;
    background: #fff
}

.datacenter-details .tab-wrap .tab .item.current::before,
.datacenter-details .tab-wrap .tab-nav .item.current::before {
    content: ""
}

.datacenter-details .tab-wrap .tab .item.current::after,
.datacenter-details .tab-wrap .tab-nav .item.current::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background: #fff
}

.datacenter-details .tab-wrap .tab .item.current+.item::before,
.datacenter-details .tab-wrap .tab-nav .item.current+.item::before {
    content: ""
}

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

    .datacenter-details .tab-wrap .tab .item,
    .datacenter-details .tab-wrap .tab-nav .item {
        padding: 0 5px;
        line-height: 40px
    }
}

.datacenter-details .recomand {
    background: #f1f4f9;
    padding: 80px 0
}

.datacenter-details .recomand .rec-tit {
    width: 180px;
    font-size: 26px;
    line-height: 90px;
    color: #333
}

.datacenter-details .recomand .rec-row p {
    font-size: 18px;
    font-weight: bold;
    color: #333
}

.datacenter-details .recomand .rec-item {
    padding: 0 10px
}

.datacenter-details .recomand .rec-item-wrap {
    height: 100%;
    padding: 10px 30px;
    background-color: #fff;
    display: block;
    box-shadow: 0 0 10px rgba(101, 130, 169, 0.15)
}

.datacenter-details .recomand .rec-item-wrap .arrow-box {
    overflow: hidden
}

.datacenter-details .recomand .rec-item-wrap .arrow {
    position: relative;
    left: -15px;
    transition: all .5s
}

.datacenter-details .recomand .rec-item-wrap:hover .arrow {
    left: 0;
    transition: all .5s
}

@media screen and (max-width:1200px) {
    .datacenter-details .recomand {
        padding: 60px 0
    }

    .datacenter-details .recomand .rec-item-wrap {
        padding: 20px
    }

    .datacenter-details .recomand .flow-img {
        display: none
    }
}

@media screen and (max-width:992px) {
    .datacenter-details .recomand .rec-wrap {
        display: block
    }

    .datacenter-details .recomand .rec-wrap>div {
        display: block
    }
}

@media screen and (max-width:992px) {
    .datacenter-details .recomand {
        padding: 30px 0
    }

    .datacenter-details .recomand .rec-row p {
        font-size: 14px
    }

    .datacenter-details .recomand .rec-item-wrap {
        padding: 10px
    }

    .datacenter-details .recomand .rec-item-wrap .arrow {
        width: 25px;
        left: -10px
    }
}

@media screen and (max-width:480px) {
    .datacenter-details .recomand {
        padding: 20px 0
    }

    .datacenter-details .recomand .rec-row .rec-item {
        width: 100%
    }
}

.datacenter-details section.intro {
    overflow: hidden
}

.datacenter-details section.intro .intro-txt {
    position: relative;
    width: 100%;
    height: 460px;
    display: table-cell;
    padding-right: 460px;
    vertical-align: middle
}

.datacenter-details section.intro .intro-txt .txt {
    position: relative;
    margin: -30px auto 0;
    line-height: 30px;
    top: 0;
    bottom: 0;
    z-index: 2
}

.datacenter-details section.intro .intro-txt .txt h1 {
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 16px
}

.datacenter-details section.intro .intro-txt .txt .advs {
    margin: -10px -20px -20px -20px
}

.datacenter-details section.intro .intro-txt .txt .advs .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.datacenter-details section.intro .intro-txt .txt .advs .one-row>div {
    background: rgba(226, 236, 249, 0.5);
    padding: 10px 20px
}

.datacenter-details section.intro .intro-txt .txt .advs .one-row>div h3 {
    margin: 0;
    line-height: 30px
}

.datacenter-details section.intro .intro-txt .txt .advs .one-row>div h3::before {
    content: "●";
    color: #ef2a3a;
    font-size: 12px;
    padding-right: 6px
}

.datacenter-details section.intro .intro-txt .txt .advs .one-row>div p {
    margin: 0;
    line-height: 20px;
    color: #999;
    font-size: 12px
}

.datacenter-details section.intro .intro-txt img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

@media screen and (max-width:1200px) {
    .datacenter-details section.intro .intro-txt {
        padding-right: 0
    }

    .datacenter-details section.intro .intro-txt .txt .advs .one-row>div {
        border: 1px solid #ddd
    }

    .datacenter-details section.intro .intro-txt img {
        opacity: .2
    }
}

@media screen and (max-width:768px) {
    .datacenter-details section.intro .intro-txt {
        height: auto !important;
        padding: 60px 0 30px
    }

    .datacenter-details section.intro .intro-txt .txt .advs .one-row>div {
        display: block;
        margin-bottom: 20px
    }
}

.datacenter-details section.parameter {
    padding-bottom: 60px
}

.datacenter-details section.parameter gap {
    width: 36px
}

.datacenter-details section.parameter .parameter-wrap {
    margin: -30px
}

.datacenter-details section.parameter .parameter-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 30px
}

.datacenter-details section.parameter .parameter-wrap table tr td {
    border: 1px solid #ccddf0;
    background: #fff;
    padding: 24px;
    vertical-align: top;
    width: 33.3%
}

.datacenter-details section.parameter .parameter-wrap table tr td img {
    max-width: 100%
}

.datacenter-details section.parameter .parameter-wrap table tr td h3 {
    font-size: 18px;
    margin: 10px 0 0 0
}

.datacenter-details section.parameter .parameter-wrap table tr td p {
    color: #999
}

.datacenter-details section.parameter .parameter-wrap table tr td ul {
    margin: 0
}

.datacenter-details section.parameter .parameter-wrap table tr td ul li::before {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e6cd";
    color: #ef2a3a;
    margin-right: 6px;
    font-size: 12px
}

@media screen and (max-width:992px) {
    .datacenter-details section.parameter .parameter-wrap {
        margin: -10px
    }

    .datacenter-details section.parameter .parameter-wrap table {
        border-spacing: 10px
    }
}

@media screen and (max-width:768px) {
    .datacenter-details section.parameter .parameter-wrap table tr td {
        display: block;
        margin-bottom: 20px;
        width: 100%
    }

    .datacenter-details section.parameter .parameter-wrap table tr td img {
        width: 100%
    }
}

.datacenter-details section.show {
    padding-bottom: 60px
}

.datacenter-details section.show .show-table {
    margin: -30px
}

.datacenter-details section.show .show-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 30px
}

.datacenter-details section.show .show-table table td {
    text-align: center
}

.datacenter-details section.show .show-table table td img {
    width: 100%
}

@media screen and (max-width:992px) {
    .datacenter-details section.show .show-table {
        margin: -10px
    }

    .datacenter-details section.show .show-table table {
        border-spacing: 10px
    }
}

@media screen and (max-width:768px) {
    .datacenter-details section.show .show-table table td {
        display: block;
        margin-bottom: 20px
    }
}

.solution-index {
    background: url(../image/013.png) center bottom no-repeat, #eee
}

.solution-index .banner-txt {
    height: 200px !important
}

.solution-index .banner-txt h1 {
    margin-bottom: 10px !important;
    color: #fff
}

.solution-index .banner-txt h3 {
    margin-bottom: 0;
    color: #fff
}

.solution-index .banner .tab-wrap .bg {
    background: #111b2c;
    opacity: .6
}

.solution-index .some-row {
    border-collapse: collapse
}

.solution-index .some-row>div>div {
    border: 1px solid #ddd;
    text-align: center;
    width: 33.33%;
    background: #fff
}

.solution-index .some-row>div>div .item {
    position: relative;
    width: 100%;
    height: 220px;
    padding: 30px
}

.solution-index .some-row>div>div .item h4 {
    font-size: 16px;
    margin: 10px auto
}

.solution-index .some-row>div>div .item p {
    color: #999;
    text-align: center;
    font-size: 12px
}

@media screen and (max-width:992px) {
    .solution-index .some-row>div>div .item {
        height: 260px
    }
}

@media screen and (max-width:768px) {
    .solution-index .some-row>div>div .item {
        height: 300px
    }
}

.solution-index .some-row>div>div .item:hover {
    cursor: pointer;
    box-shadow: 0 0 20px #ccc
}

.solution-index .some-row>div>div .item:hover h4 {
    color: #ef2a3a
}

@media screen and (max-width:720px) {
    .solution-index .some-row>div>div {
        display: block;
        width: 100%;
        border: none;
        margin-bottom: 20px
    }

    .solution-index .some-row>div>div .item {
        height: auto;
        border: 1px solid #ddd
    }
}

.solution-index section.honor {
    background: #fff;
    padding-top: 20px;
    padding-bottom: 20px
}

.solution-index section.honor .honor-table>div {
    text-align: center
}

.solution-index section.honor .honor-table>div h3 {
    width: 200px;
    margin: 8px auto 0
}

@media screen and (max-width:992px) {
    .solution-index section.honor .honor-table>div h3 {
        display: none
    }
}

.solution-index section.custom {
    padding-bottom: 40px
}

.solution-index section.custom .custom-wrap {
    background: #fff;
    padding: 30px
}

.solution-index section.custom .custom-wrap h3 {
    font-weight: bold
}

.solution-index section.custom .btn {
    display: block;
    width: 260px;
    margin: 30px auto
}

.solutions .banner .tab-wrap {
    display: none
}

.solutions .banner-max {
    margin-bottom: 0
}

.solutions section:not(.situation) {
    padding-bottom: 60px;
    position: relative
}

@media screen and (max-width:768px) {
    .solutions section:not(.situation) {
        padding-bottom: 40px
    }
}

.solutions .banner {
    overflow: hidden
}

.solutions .banner .banner-txt {
    position: relative;
    z-index: 5;
    height: 320px;
    transition: all .5s
}

.solutions .banner::before {
    content: "";
    background: url(../image/solution-banner.png) center no-repeat;
    height: 100%;
    width: 100%;
    min-height: 700px;
    position: absolute;
    top: 0
}

.solutions .banner .banner-icon {
    position: absolute;
    float: right;
    top: 5px;
    right: 8%;
    width: 430px;
    height: 305px;
    transition: all .5s
}

.solutions .banner .banner-icon img {
    position: relative;
    margin: auto;
    width: 100%
}

.solutions .banner .situation {
    margin-top: -15px;
    margin-bottom: 20px
}

.solutions .banner .situation .tit1 {
    display: none
}

.solutions .banner .situation .wrapper {
    z-index: 3;
    padding: 0;
    position: relative
}

.solutions .banner .situation .wrapper .content {
    background: #fff;
    padding: 10px 26px 20px 26px
}

.solutions .banner .situation .wrapper .content h3 {
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0 0 0
}

.solutions .banner .situation .wrapper .content p {
    color: #999;
    line-height: 30px;
    margin: 10px 0 0 0
}

.solutions .banner .situation .wrapper .content ul {
    margin: 0
}

.solutions .banner .situation .wrapper .content ul li {
    margin: 5px 0
}

.solutions .banner .situation .wrapper .content::before {
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 20px #ddd;
    z-index: 1
}

.solutions .banner .situation .wrapper .content-max {
    bottom: 70px
}

@media screen and (max-width:768px) {
    .solutions .banner .wrapper .banner-icon {
        background-size: 90%;
        right: 1%;
        transition: all .5s
    }

    .solutions .banner .wrapper .situation .wrapper .content {
        padding-right: 28px
    }
}

@media screen and (max-width:576px) {
    .solutions .banner .wrapper .banner-icon {
        background-size: 90%;
        right: -15%;
        transition: all .5s
    }
}

@media screen and (max-width:480px) {
    .solutions .banner .wrapper .banner-txt {
        z-index: 2;
        height: 280px;
        transition: all .5s
    }

    .solutions .banner .wrapper .banner-icon {
        background-size: 70%;
        right: -35%;
        top: -80px;
        transition: all .5s
    }
}

.solutions section.apply {
    background: url(../image/025.png);
    padding-bottom: 100px
}

.solutions section.apply .apply-table {
    margin: -60px
}

.solutions section.apply .apply-table table {
    margin: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 60px
}

.solutions section.apply .apply-table table td {
    position: relative
}

.solutions section.apply .apply-table table td img {
    display: block;
    max-width: 100%
}

.solutions section.apply .apply-table table td span {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    bottom: -28px;
    height: 56px;
    line-height: 56px;
    width: 70%;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-size: 20px;
    z-index: 2
}

.solutions section.apply .apply-table table td small {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    padding: 40px 30px;
    background: rgba(30, 48, 82, 0.7);
    z-index: 1
}

.solutions section.apply .apply-table table td:hover small {
    display: block
}

.solutions section.apply .apply-table table.w75per {
    width: 75%
}

@media screen and (max-width:768px) {
    .solutions section.apply .apply-table {
        margin: -20px
    }

    .solutions section.apply .apply-table table {
        border-spacing: 20px
    }

    .solutions section.apply .apply-table table td span {
        bottom: -15px;
        height: 30px;
        line-height: 30px;
        font-size: 16px
    }
}

@media screen and (max-width:500px) {
    .solutions section.apply .apply-table {
        margin: 0
    }

    .solutions section.apply .apply-table table {
        display: block;
        border-collapse: collapse
    }

    .solutions section.apply .apply-table table.w75per {
        width: 100%
    }

    .solutions section.apply .apply-table table tbody,
    .solutions section.apply .apply-table table tr {
        display: block
    }

    .solutions section.apply .apply-table table td {
        position: relative;
        display: block;
        margin-bottom: 40px
    }

    .solutions section.apply .apply-table table td img {
        width: 100%
    }

    .solutions section.apply .apply-table table td span {
        bottom: -20px;
        height: 40px;
        line-height: 40px;
        font-size: 18px
    }
}

.solutions section.need {
    background-size: cover;
    overflow: hidden
}

.solutions section.need .tit1 h1 {
    color: #fff
}

.solutions section.need .black-tit1 h1 {
    color: #333
}

.solutions section.need .card {
    margin: 0 -20px
}

.solutions section.need .card .some-row {
    border-spacing: 20px
}

.solutions section.need .card .some-row>div>div {
    border: 1px solid #ddd;
    text-align: center;
    width: 25%;
    background: #fff;
    opacity: .9;
    transition: all .8s
}

@keyframes identifier {
    0% {
        opacity: .5;
        scale: .9
    }

    100% {
        opacity: 1;
        scale: 1.05
    }
}

.solutions section.need .card .some-row>div>div:hover {
    cursor: pointer;
    scale: 1.05;
    transition: all .8s;
    animation: identifier 1s
}

.solutions section.need .card .some-row>div>div .item {
    position: relative;
    width: 100%;
    padding: 25px 30px
}

.solutions section.need .card .some-row>div>div .item>:first-child {
    height: 60px;
    line-height: 60px
}

.solutions section.need .card .some-row>div>div .item>:first-child img {
    max-height: 55px;
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.solutions section.need .card .some-row>div>div .item h3 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0
}

.solutions section.need .card .some-row>div>div .item h4 {
    margin-top: 10px
}

.solutions section.need .card3 {
    margin: 0 100px
}

.solutions section.need .card5 .some-row>div>div {
    display: block;
    width: 100%;
    margin-bottom: 10px
}

.solutions section.need .card5 .some-row>div>div .item {
    text-align: left;
    display: table;
    padding: 0 0 0 10px;
    height: 106px
}

.solutions section.need .card5 .some-row>div>div .item>div {
    display: table-cell;
    vertical-align: middle
}

.solutions section.need .card5 .some-row>div>div .item>:first-child {
    width: 60px
}

.solutions section.need .card5 .some-row>div>div .item>:last-child {
    text-align: left
}

.solutions section.need .card5 .some-row>div>div .item>:last-child h3,
.solutions section.need .card5 .some-row>div>div .item>:last-child h4 {
    margin: 0
}

@media screen and (max-width:1220px) {
    .solutions section.need .card5 .some-row>div>div .item {
        height: 106px
    }
}

@media screen and (max-width:992px) {
    .solutions section.need .card .some-row>div>div {
        display: block;
        width: 100%;
        margin-bottom: 10px
    }

    .solutions section.need .card .some-row>div>div .item {
        text-align: left;
        display: table;
        padding: 0;
        height: 106px
    }

    .solutions section.need .card .some-row>div>div .item>div {
        display: table-cell;
        vertical-align: middle
    }

    .solutions section.need .card .some-row>div>div .item>:first-child {
        width: 60px
    }

    .solutions section.need .card .some-row>div>div .item>:last-child {
        text-align: left
    }

    .solutions section.need .card .some-row>div>div .item>:last-child h3,
    .solutions section.need .card .some-row>div>div .item>:last-child h4 {
        margin: 0
    }

    .solutions section.need .card3 {
        margin: 0 -20px
    }
}

.solutions section.advantage {
    background: #f3f8fc;
    overflow: hidden
}

.solutions section.advantage .advantage-wrap {
    box-shadow: none;
    background: transparent
}

.solutions section.advantage .advantage-wrap h3 {
    white-space: nowrap;
    margin: 10px 0 5px;
}

.solutions section.advantage .advantage-wrap .advantage-table gap {
    display: none
}

.solutions section.advantage .advantage-wrap .advantage-table .item {
    position: relative;
    padding-top: 80px
}

.solutions section.advantage .advantage-wrap .advantage-table .item .img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    -moz-box-shadow: 0 0 20px #ddd;
    -webkit-box-shadow: 0 0 20px #ddd;
    box-shadow: 0 0 20px #ddd
}

.solutions section.advantage .advantage-wrap .advantage-table .item .img img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.solutions section.advantage .advantage-wrap .advantage-table .item p.w140 {
    max-width: 140px
}

@media screen and (max-width:768px) {
    .solutions section.advantage .advantage-wrap .advantage-table .item {
        padding-top: 60px
    }

    .solutions section.advantage .advantage-wrap .advantage-table .item .img {
        height: 60px;
        width: 60px
    }

    .solutions section.advantage .advantage-wrap .advantage-table .item .img img {
        max-width: 66%;
        max-height: 66%
    }
}

.solutions section.partner .one-row {
    width: auto;
    border-collapse: separate;
    border-spacing: 40px;
    margin: -20px auto
}

@media screen and (max-width:992px) {
    .solutions section.partner .one-row {
        border-spacing: 20px
    }
}

@media screen and (max-width:768px) {
    .solutions section.partner .one-row {
        border-spacing: 10px
    }
}

.solutions section.partner .partner-table {
    margin: 30px -20px 10px
}

.solutions section.partner .partner-table .one-row {
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px
}

.solutions section.partner .partner-table .one-row .item {
    width: 20%;
    box-shadow: 0 0 10px #ddd;
    padding: 20px 6px 10px 6px
}

.solutions section.partner .partner-table .one-row .item table {
    width: 100%
}

.solutions section.partner .partner-table .one-row .item table td {
    height: 56px;
    vertical-align: middle
}

.solutions section.partner .partner-table .one-row .item table td img {
    max-width: 100% !important
}

.solutions section.partner .partner-table .one-row .item p {
    margin: 0
}

@media screen and (max-width:1350px) {
    .solutions section.partner .partner-table .one-row .item {
        margin-bottom: 20px
    }

    .solutions section.partner .partner-table .one-row .item table {
        width: auto;
        margin: auto
    }

    .solutions section.partner .partner-table .one-row .item table td {
        display: block;
        height: 44px;
        padding: 0 10px
    }
}

@media screen and (max-width:768px) {
    .solutions section.partner .partner-table {
        margin-left: -10px;
        margin-right: -10px
    }

    .solutions section.partner .partner-table .one-row {
        border-spacing: 10px
    }
}

@media screen and (max-width:480px) {
    .solutions section.partner .partner-table {
        margin-left: 0;
        margin-right: 0
    }

    .solutions section.partner .partner-table .one-row {
        border-spacing: 10px
    }

    .solutions section.partner .partner-table .one-row .item {
        display: block;
        width: 100%
    }

    .solutions section.partner .partner-table .one-row .item table td {
        display: table-cell
    }
}

.solutions section.partner img {
    max-height: 48px;
    max-width: 200px
}

@media screen and (max-width:768px) {
    .solutions section.partner img {
        max-width: 100%
    }
}

.solutions section.recommend {
    display: none;
    background: #f1f4f9
}

.solutions section.recommend .server-item-wrap {
    display: block;
    margin: -20px
}

.solutions section.recommend .server-item-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 40px
}

.solutions section.recommend .server-item-wrap table .server-item {
    background: #fff;
    height: 120px;
    white-space: nowrap;
    width: 100%;
    -webkit-box-shadow: 0 0 8px #ccc;
    box-shadow: 0 0 8px #ccc;
    border-collapse: collapse
}

.solutions section.recommend .server-item-wrap table .server-item>div {
    text-align: center
}

.solutions section.recommend .server-item-wrap table .server-item .btn {
    display: table-cell;
    color: #666;
    background: #eee;
    border: none;
    border-radius: 0;
    font-size: 16px;
    letter-spacing: 0;
    width: 100px
}

.solutions section.recommend .server-item-wrap table .server-item .btn:hover {
    color: #fff;
    background: #ef2a3a
}

.solutions section.recommend .server-item-wrap table .server-item p:first-child {
    font-size: 16px;
    color: #333;
    font-weight: bold
}

@media screen and (max-width:992px) {
    .solutions section.recommend .server-item-wrap table td {
        display: block
    }

    .solutions section.recommend .server-item-wrap table .server-item {
        margin-bottom: 20px
    }
}

.solutions section.recommend center .btn {
    margin-top: 30px
}

.solutions .solution-free {
    padding-bottom: 0 !important;
    background: url(../image/b0012.jpg) no-repeat center
}

.solutions .solution-free .free-wrap {
    height: 100%;
    padding: 50px 0 70px;
    background: url(../image/c003.png) no-repeat right bottom
}

.solutions .solution-free .btn {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    padding: 0 30px;
    background: linear-gradient(to right, #ffbd54, #ff6a3c)
}

.solutions.solution-SM section.partner img {
    max-height: none !important;
    max-width: none !important
}

.solutions.solution-BC section.feature {
    background: url(../image/037.png) no-repeat center;
    background-size: cover
}

.solutions.solution-BC section.feature .tit1 h1 {
    color: #fff
}

.solutions.solution-BC section.feature .feature-table {
    margin: 0 -12px
}

.solutions.solution-BC section.feature .feature-table .one-row {
    border-collapse: separate;
    border-spacing: 12px
}

.solutions.solution-BC section.feature .feature-table .one-row>div {
    background: rgba(255, 255, 255, 0.8);
    width: 20%;
    padding: 24px;
    vertical-align: top
}

.solutions.solution-BC section.feature .feature-table .one-row>div h3 {
    font-weight: bold;
    margin: 10px auto
}

@media screen and (max-width:992px) {
    .solutions.solution-BC section.feature .feature-table {
        margin: 12px 0
    }

    .solutions.solution-BC section.feature .feature-table .one-row {
        display: block
    }

    .solutions.solution-BC section.feature .feature-table .one-row>div {
        display: block;
        width: 100%;
        margin-bottom: 12px
    }
}

.solutions.solution-PS section.situation .content {
    background: url(../image/047.png) no-repeat right center
}

.solutions.solution-PS section.advantage {
    padding-bottom: 0
}

.solutions.solution-PS section.advantage .advantage-table>* {
    width: 33.3%
}

@media screen and (max-width:992px) {
    .solutions.solution-PS section.advantage .advantage-table h3 {
        font-size: 14px
    }
}

.solutions.solution-PS section.advantage .advantage-table2 {
    margin-top: 45px
}

.solutions.solution-PS .ps-tit {
    padding-top: 40px;
    padding-bottom: 0
}

.solutions.solution-DR section.topology img {
    margin-top: 20px;
    max-width: 70%
}

@media screen and (max-width:768px) {
    .solutions.solution-DR section.topology img {
        margin-top: 10px;
        max-width: 100%
    }
}

.solutions.solutions-EP .apply {
    padding-bottom: 20px
}

.solutions.solutions-EP .apply-box {
    position: relative
}

.solutions.solutions-EP .apply-item {
    position: relative;
    padding: 10px 0;
    margin: auto;
    display: table;
    vertical-align: middle;
    bottom: 50px;
    width: 70%;
    min-height: 70px;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    z-index: 2
}

.solutions.solutions-EP .apply-item>span {
    display: table-cell;
    vertical-align: middle
}

.solutions.solution-CFT .topology .topo-btn .btn {
    padding: 0;
    color: #4b8ef4;
    border: transparent;
    background-color: #fff;
    font-size: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    width: 120px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 10px
}

.solutions.solution-CFT .topology .topo-btn .btn:hover {
    background-color: #4b8ef4;
    color: #fff
}

.solutions.solution-HC .topology li {
    margin-top: 20px
}

.solutions.solution-ECS .banner {
    background: url(../image/solution-ECS.jpg) no-repeat top
}

.solutions.solution-ECS .need {
    background: url(../image/b0013.jpg) no-repeat center
}

.solutions.solution-IOT .topo-btn {
    margin-bottom: 20px
}

.solutions.solution-IOT .topo-btn .btn {
    padding: 0;
    color: #4b8ef4;
    border: transparent;
    background-color: #fff;
    font-size: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    text-align: left;
    margin-bottom: 10px;
    padding-left: 10px
}

.solutions.solution-IOT .topo-btn .btn:hover {
    background-color: #4b8ef4;
    color: #fff
}

.solutions.solution-IOT .banner {
    background: url(../image/solution-IOT1.jpg) no-repeat top
}

.solutions.solution-OLB .banner {
    background: url(../image/banner1.jpg) no-repeat top
}

.solutions.solution-OLB .need .tit1 h2 {
    color: #fff
}

.solutions.solution-OLB .need .item>:first-child {
    height: 0 !important
}

.solutions.solution-OLB .advantage_v2 {
    background-color: #f3f8fc
}

.solutions.solution-OLB .advantage_v2-table {
    margin: 0 -10px
}

.solutions.solution-OLB .advantage_v2-table>div {
    padding: 0 10px
}

.solutions.solution-OLB .advantage_v2-table .item {
    background: #fff;
    padding: 15px
}

.solutions.solution-OLB .advantage_v2-table .item h3 {
    margin-top: 0;
    margin-bottom: 5px
}

@media screen and (max-width:992px) {
    .solutions.solution-OLB .advantage_v2-table {
        margin: 0
    }

    .solutions.solution-OLB .advantage_v2-table>div {
        padding: 0;
        width: 100%
    }
}

.solutions.solution-OLB .solution-user .free-content {
    margin: 0 -20
}

.solutions.solution-OLB .solution-user .free-content>div {
    padding: 20px;
    width: 33.3%
}

.solutions.solution-OLB .solution-user .item {
    position: relative;
    border-radius: 100px;
    background: linear-gradient(to right, #4d6498, #a2b4cf);
    color: #fff;
    padding: 20px 20px 20px 100px;
    height: 100%
}

.solutions.solution-OLB .solution-user .item::after {
    content: url(../image/i001.png);
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    height: 65px;
    width: 65px;
    margin: auto
}

.solutions.solution-BDS .banner {
    padding-bottom: 0;
    background: url(../image/banner3.jpg) no-repeat center
}

.solutions.solution-BDS .banner::before {
    background: none;
    min-height: unset
}

.solutions.solution-BDS .banner h1 {
    font-size: 48px;
    text-align: center;
    line-height: 500px;
    color: #fff;
    margin: auto
}

.solutions.solution-BDS section.need .tit1 h1 {
    color: #333
}

.solutions.solution-BDS .scene {
    background: url(../image/b0014.jpg);
    padding: 20px 0 60px
}

.solutions.solution-BDS .scene .scene-wrap {
    background-color: #fff;
    width: 100%
}

.solutions.solution-BDS .scene .scene-nav {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #dcdcdc;
    background-color: #fafafa
}

.solutions.solution-BDS .scene .scene-nav span {
    display: inline-block;
    height: 75px;
    line-height: 75px;
    font-size: 18px;
    margin: 0 20px
}

.solutions.solution-BDS .scene .scene-nav span:hover {
    cursor: pointer
}

.solutions.solution-BDS .scene .scene-nav span.act {
    border-bottom: 2px solid #ef2a3a
}

.solutions.solution-BDS .scene .scene-desc {
    display: none;
    padding: 60px
}

.solutions.solution-BDS .scene .scene-desc.show {
    display: block
}

.solutions.solution-BDS .scene .scene-row>div {
    width: 50%
}

.solutions.solution-BDS .scene .scene-info {
    vertical-align: top
}

.solutions.solution-BDS .scene .scene-info h3 {
    font-size: 24px;
    margin: 0
}

.solutions.solution-BDS .scene .scene-info p {
    font-size: 16px;
    line-height: 30px;
    margin: 20px 0
}

.solutions.solution-BDS .scene .scene-img {
    text-align: right
}

.solutions.solution-BDS .scene .btn.line {
    padding: 0;
    color: #4b8ef4;
    border: transparent;
    background-color: #fff;
    font-size: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 10px
}

.solutions.solution-BDS .scene .right {
    float: right;
    margin-top: 5px
}

.solutions.solution-BDS .advantage {
    padding: 20px 0 50px;
    background: url(../image/solution-BDS.png.jpg) no-repeat center
}

.solutions.solution-BDS .advantage .tit1 h2 {
    color: #fff
}

.solutions.solution-BDS .advantage .adv-item {
    position: relative;
    background: #fff;
    height: 100%;
    padding: 20px 20px 60px
}

.solutions.solution-BDS .advantage .adv-item h3 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 10px
}

.solutions.solution-BDS .advantage .adv-item .btn {
    margin-top: 10px;
    position: absolute;
    bottom: 20px
}

.solutions.solution-BDS .advantage .adv-item .icon::before {
    content: url(../image/i0011.png);
    margin-right: 5px
}

.solutions.solution-BDS .advantage .adv-item.item1 {
    background: url(../image/i002.png) no-repeat right -20px bottom 20px #fff
}

.solutions.solution-BDS .advantage .adv-item.item2 {
    background: url(../image/i003.png) no-repeat right bottom -20px #fff
}

.solutions.solution-BDS .advantage .advantage-wrap {
    padding: 0
}

.solutions.solution-BDS .advantage .advantage-table {
    margin: 0 10px
}

.solutions.solution-BDS .advantage .advantage-table>div {
    padding: 10px;
    width: 50%
}

.solutions_v2 .banner {
    padding-bottom: 0
}

.solutions_v2 .banner::before {
    background: none;
    min-height: unset
}

.solutions_v2 .banner h3 {
    margin: 20px 0;
    line-height: 30px
}

.solutions_v2 .banner .banner-txt {
    height: 420px;
    color: #fff
}

.solutions_v2 .banner .situation {
    margin-top: 40px
}

.solution-FN section.need .card .some-row>div>div .item {
    padding: 25px 15px
}

.solution-FN .wrapper .banner-txt {
    max-width: 600px
}

.solution-FN .wrapper .banner-txt h1,
.solution-FN .wrapper .banner-txt h3 {
    color: #fff;
    line-height: 32px;
    margin-bottom: 10px
}

.solution-FN section.need {
    padding-bottom: 10px
}

.solution-FN section.need .tit1 h1 {
    color: #333
}

.solution-FN section.need .some-row {
    width: 80%;
    margin: auto
}

.solution-FN .topology .topo-wrap .topo-display table td:last-child {
    padding: 0 30px
}

.solution-FN .topology .icon {
    width: 13px
}

.solution-FN .topology .topo-btn .btn {
    padding: 0;
    color: #4b8ef4;
    border: transparent;
    background-color: #fff;
    font-size: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    width: 46%;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 20px
}

.solution-FN .topology .topo-btn .btn:hover {
    background-color: #4b8ef4;
    color: #fff
}

.solution-FN .topology .topo-adv {
    margin-top: 30px;
    font-weight: bold
}

.solution-FN .topology .topo-adv>div {
    margin-bottom: 10px
}

.solution-FN .so-recommend {
    background: url(../image/090.jpg) center no-repeat
}

.solution-FN .so-recommend .nav-bar {
    margin-bottom: 20px
}

.solution-FN .so-recommend .nav-item {
    display: inline-block;
    background-color: #fff;
    padding: 0 60px;
    height: 42px;
    line-height: 42px;
    font-size: 18px;
    cursor: pointer
}

.solution-FN .so-recommend .nav-item.act {
    background-color: #ef2a3a;
    color: #fff
}

@keyframes box {
    0% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

.solution-FN .so-recommend-table .so-recommend-content {
    display: none;
    opacity: 0;
    animation: box 1s
}

.solution-FN .so-recommend-table .so-recommend-content.open {
    display: block;
    opacity: 1;
    animation: box 1s
}

.solution-FN .so-recommend-table .recommend-table-wrap {
    margin: 0 -18px
}

.solution-FN .so-recommend-table .float-item {
    padding: 0 18px
}

.solution-FN .so-recommend-table .recommend-tit {
    background: url(../image/0012.jpg) center no-repeat;
    background-size: cover;
    height: 68px;
    line-height: 68px;
    padding-left: 40px
}

.solution-FN .so-recommend-table .recommend-tit h3 {
    color: #fff;
    font-size: 24px;
    font-weight: bold
}

.solution-FN .so-recommend-table .recommend-info {
    background-color: #fff;
    padding: 20px 40px 40px
}

.solution-FN .so-recommend-table .recommend-info b {
    font-size: 18px;
    color: #333
}

.solution-FN .so-recommend-table .recommend-info .info-item {
    max-width: 105px
}

.solution-FN .so-recommend-table .recommend-info .info-item:last-child {
    margin: 0 0 0 auto
}

.solution-FN .so-recommend-table .recommend-data {
    border-bottom: 1px solid #a0a0a0;
    padding: 10px 0 0
}

.solution-FN .so-recommend-table .recommend-data label {
    display: block;
    margin-bottom: 5px;
    color: #999
}

.solution-FN .so-recommend-table .recommend-data span {
    color: #333
}

@media screen and (max-width:992px) {
    .solution-FN .so-recommend-table .recommend-table-wrap .float-item {
        width: 100%
    }
}

.solution-FN .so-recommend-btn {
    width: 100%;
    background-color: #fff;
    color: #ef2a3a;
    height: 40px;
    line-height: 40px;
    margin-top: 20px
}

.solution-FN .so-recommend-btn:hover {
    background-color: #ef2a3a;
    color: #fff;
    transition: all .4s
}

.topic-sdwan {
    background-color: #f9faff
}

.topic-sdwan .banner {
    height: 400px;
    padding-top: 100px
}

.topic-sdwan .banner h1>b {
    font-weight: bold;
    font-size: 50px;
    color: #fff;
    text-shadow: 5px 5px #2338e1
}

.topic-sdwan .banner .special {
    color: #ffd182
}

@media screen and (max-width:768px) {
    .topic-sdwan .banner {
        height: 260px;
        padding-top: 60px
    }

    .topic-sdwan .banner h1>b {
        font-size: 30px
    }
}

.topic-sdwan .topic-btn1 {
    background-color: #4e76f7
}

.topic-sdwan .title {
    text-align: center
}

.topic-sdwan .title p {
    text-align: center;
    color: #333;
    font-size: 16px
}

.topic-sdwan .title h2 {
    padding: 20px 0;
    margin: 50px 0 40px;
    font-size: 36px;
    position: relative
}

.topic-sdwan .title h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 48%;
    width: 50px;
    display: block;
    height: 1px;
    border: 1px solid #4e76f7;
    background-color: #4e76f7;
    border-radius: 1px
}

@media screen and (max-width:768px) {
    .topic-sdwan .title h2 {
        margin: 10px 0;
        font-size: 24px
    }
}

.topic-sdwan .solution .content {
    padding: 40px 50px;
    background: #fff;
    border: 1px solid #e1e6f0
}

.topic-sdwan .solution p {
    font-size: 16px;
    line-height: 36px
}

.topic-sdwan .solution .tit {
    color: #4c73f6
}

.topic-sdwan .qna-content p {
    font-size: 16px
}

.topic-sdwan .qna-content .ques p,
.topic-sdwan .qna-content .ques h3 {
    color: #4c73f6
}

.topic-sdwan .qna-content .tit img {
    vertical-align: middle;
    margin-right: 10px
}

.topic-sdwan .qna-content .qna-list>div {
    position: relative;
    padding: 50px;
    width: 50%
}

.topic-sdwan .qna-content .qna-list .ques::before {
    content: "Q.";
    left: 0;
    color: #4c73f6;
    font-size: 40px;
    position: absolute;
    font-family: initial;
    display: inline-block;
    vertical-align: middle
}

.topic-sdwan .qna-content .qna-list .ask::before {
    content: "A.";
    left: 0;
    font-size: 40px;
    position: absolute;
    font-family: initial;
    display: inline-block;
    vertical-align: middle
}

.topic-sdwan .qna-content .btn {
    display: inline-block;
    margin: auto;
    background-color: #4e76f7;
    border-radius: 3px;
    color: #fff;
    border-color: transparent
}

@media screen and (max-width:768px) {
    .topic-sdwan .qna-content .tit img {
        max-width: 35px
    }

    .topic-sdwan .qna-content p {
        font-size: 12px
    }

    .topic-sdwan .qna-content .qna-list>div {
        padding: 20px 30px
    }

    .topic-sdwan .qna-content .qna-list .ques::before {
        font-size: 25px
    }

    .topic-sdwan .qna-content .qna-list .ask::before {
        font-size: 25px
    }
}

.topic-sdwan .advantage .row {
    margin: 0 -25px
}

.topic-sdwan .advantage .col-2,
.topic-sdwan .advantage .col-3 {
    padding: 0 25px 25px
}

.topic-sdwan .advantage .one-row {
    position: relative;
    padding: 25px 25px 10px;
    background-color: #fff;
    border: 1px solid #e1e6f0;
    min-height: 140px
}

.topic-sdwan .advantage .one-row>div {
    vertical-align: top
}

.topic-sdwan .advantage .one-row::after {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    width: 35px;
    display: block;
    height: 1px;
    border: 1px solid #4e76f7;
    background-color: #4e76f7;
    border-radius: 1px
}

.topic-sdwan .advantage span {
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    color: #333
}

.topic-sdwan .advantage p {
    font-size: 14px;
    line-height: 30px;
    color: #333
}

.topic-sdwan .one-test {
    margin-top: 30px
}

.topic-sdwan .one-test .bg {
    background: url(../image/one-test-bg.jpg) no-repeat center;
    padding: 35px 190px;
    font-size: 36px;
    font-weight: bold;
    color: #fff
}

.topic-sdwan .one-test .bg .btn {
    margin-left: 25px;
    background-color: #fff;
    color: #1b66e6;
    border-color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 40px;
    font-weight: normal
}

@media screen and (max-width:768px) {
    .topic-sdwan .one-test {
        margin-top: 20px;
        margin-bottom: -20px
    }

    .topic-sdwan .one-test .bg {
        padding: 15px 30px;
        font-size: 16px;
        background-size: cover
    }

    .topic-sdwan .one-test .bg .btn {
        padding: 0 15px;
        height: 30px;
        line-height: 30px;
        font-size: 12px
    }
}

.topic-sdwan .topology h3 {
    font-size: 16px !important
}

.topic-sdwan .topology p {
    font-size: 14px !important
}

.topic-sdwan .topology .topo-tit {
    margin-bottom: 30px;
    text-align: left
}

.topic-sdwan .topology .topo-tit a {
    padding: 8px 35px;
    border: 1px solid #d2d2d2
}

.topic-sdwan .topology .topo-tit .cur {
    background-color: #4e76f7;
    color: #fff
}

.topic-sdwan .topology .topo-display {
    display: none
}

.topic-sdwan .topology .topo-display.open {
    display: block
}

.topic-sdwan .partner-table {
    margin: -12px
}

.topic-sdwan .partner-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px
}

.topic-sdwan .partner-table td {
    width: 33.33%;
    border: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    height: 60px;
    overflow: hidden
}

.topic-sdwan .partner-table img {
    max-width: 110px;
    max-height: 40px
}

.solution-FCP section {
    padding-bottom: 70px
}

.solution-FCP .solution-scene {
    padding-bottom: 120px
}

@media screen and (max-width:480px) {
    .solution-FCP .flex-row>div {
        width: 100% !important
    }

    .solution-FCP .banner .banner-txt h1 {
        white-space: wrap
    }
}

.solution-FCP .solution-fCP-adv {
    background-color: #f4f7fd
}

.solution-FCP .solution-fCP-adv .adv-item {
    padding: 10px;
    width: 33.3%
}

.solution-FCP .solution-fCP-adv .card-info {
    background-color: #fff;
    padding: 30px;
    transform: translateY(0);
    transition: all .5s
}

.solution-FCP .solution-fCP-adv .card-info:hover {
    cursor: pointer;
    background-color: #f7faff;
    transform: translateY(-10px);
    transition: all .5s
}

.solution-FCP .solution-fCP-adv .card-info:hover h5 {
    color: #2338e1
}

.solution-FCP .solution-fCP-adv .card-info h5 {
    font-size: 20px;
    margin: 10px 0;
    font-weight: bold
}

.solution-FCP .solution-fCP-adv .card-info .card-text {
    font-size: 16px;
    line-height: 30px
}

.solution-FCP .solution-FCP-pro .pro-item {
    padding: 10px
}

.solution-FCP .solution-FCP-pro .pro-desc {
    border-radius: 10px;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: #fff
}

.solution-FCP .solution-FCP-pro .pro-desc h5 {
    font-size: 24px;
    margin: 0 0 15px;
    font-weight: bold
}

.solution-FCP .solution-FCP-pro .pro-desc p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 15px
}

.solution-FCP .solution-FCP-pro .pro-desc:hover img {
    filter: blur(3px);
    transition: all .5s
}

.solution-FCP .solution-FCP-pro .pro-desc:hover .pro-t {
    cursor: pointer;
    top: 0;
    transition: all .5s
}

.solution-FCP .solution-FCP-pro img {
    width: 100%;
    height: 100%
}

.solution-FCP .solution-FCP-pro .pro-t {
    position: absolute;
    width: 100%;
    top: 210px;
    padding: 30px 20px 50px;
    left: 0;
    height: 100%;
    transition: top .5s
}

@media screen and (max-width:480px) {
    .solution-FCP .solution-FCP-pro .pro-i {
        max-height: 240px
    }

    .solution-FCP .solution-FCP-pro .pro-t {
        top: 0
    }
}

.solution-c-card .card-info {
    box-shadow: 0 0 30px rgba(181, 189, 206, 0.24);
    height: 100%
}

.solution-c-card .card-info .card-text {
    line-height: 24px;
    font-size: 14px
}

.solution-scene {
    background-color: #fff
}

.solution-scene .swiper-container {
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(180, 186, 198, 0.5)
}

.solution-scene .scene-wrap {
    position: relative
}

.solution-scene .scene-info {
    display: flex;
    justify-content: center
}

.solution-scene .scene-desc {
    width: 57%;
    padding: 40px
}

.solution-scene .scene-desc h5 {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 20px
}

.solution-scene .scene-desc .subtit {
    max-width: 390px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 20px 0;
    font-size: 16px
}

.solution-scene .scene-desc .info {
    max-height: 320px;
    overflow-y: scroll;
    padding-right: 10px
}

.solution-scene .scene-desc .info::-webkit-scrollbar {
    width: 6px
}

.solution-scene .scene-desc .info::-webkit-scrollbar-track {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

.solution-scene .scene-desc .info::-webkit-scrollbar-thumb {
    background-color: #a6a6a6;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

.solution-scene .scene-desc .info label {
    font-size: 16px;
    background-color: #eee;
    padding: 0 20px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    font-weight: normal
}

.solution-scene .scene-desc .info h6 {
    margin-bottom: 0;
    font-size: 16px;
    margin-top: 10px
}

.solution-scene .scene-desc .info p {
    font-size: 14px;
    line-height: 30px
}

.solution-scene .scene-desc ul {
    margin: 0
}

.solution-scene .scene-desc ul li {
    line-height: 30px
}

.solution-scene .scene-desc ul li::before {
    content: "·";
    font-size: 30px;
    margin-right: 5px;
    vertical-align: bottom
}

.solution-scene .scene-desc .btn.line {
    border-radius: 0;
    margin-top: 30px
}

.solution-scene .scene-desc2 {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.solution-scene .scene-desc {
    padding: 20px 30px 20px
}

.solution-scene .scene-img {
    position: relative;
    width: 43%;
    background-color: #eaeef6;
    padding: 80px 20px;
    text-align: center
}

.solution-scene .scene-img-wrap {
    width: 300px;
    height: 300px;
    background-color: #fff;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.solution-scene .scene-img img {
    width: auto
}

.solution-scene .scene-img2 {
    padding: 0
}

.solution-scene .scene-img2 .scene-img-wrap {
    width: auto;
    height: auto
}

@media screen and (max-width:1200px) {
    .solution-scene .scene-info {
        flex-direction: column;
        justify-content: flex-start
    }

    .solution-scene .scene-desc,
    .solution-scene .scene-img {
        width: 100%
    }

    .solution-scene .scene-img {
        padding: 40px 20px
    }

    .solution-scene .scene-img-wrap {
        width: 200px;
        height: 200px
    }
}

@media screen and (min-width:600px) {
    .solution-scene {
        padding: 20px 0 80px
    }

    .solution-scene .swiper-button-prev {
        background-image: url(../image/l.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 40px;
        height: 40px;
        left: -45px;
        border: none
    }

    .solution-scene .swiper-button-next {
        background-image: url(../image/r.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 40px;
        height: 40px;
        right: -45px;
        border: none
    }

    .solution-scene .swiper-button-prev:hover,
    .solution-scene .swiper-button-next:hover {
        background-color: transparent;
        cursor: pointer
    }
}

.solution-painspot .painspot-item {
    padding: 10px;
    width: 25%
}

.solution-painspot .btn {
    margin-top: 35px
}

.solution-painspot .card-info {
    padding: 30px 10px
}

.solution-painspot .card-info h5 {
    font-size: 24px;
    font-weight: 600;
    margin: 15px 0
}

.solution-painspot .card-info .card-text {
    text-align: center
}

.solution-c-flow {
    padding: 10px 0 70px;
    background: url(../image/flow-bg.jpg) no-repeat top;
    background-size: 100% 100%
}

.solution-c-flow .btn {
    margin-top: 50px
}

@media screen and (max-width:480px) {
    .solution-c-flow {
        padding: 10px 0 50px
    }

    .solution-c-flow .btn {
        margin-top: 20px
    }
}

.solution-c-topo {
    background: url(../image/topo-bg.jpg) no-repeat top;
    background-size: 100%
}

.solution-c-topo .link {
    color: #ef2a3a;
    font-size: 16px
}

@media screen and (max-width:480px) {
    .solution-c-topo {
        padding: 10px 0 20px
    }
}

.about .banner .banner-txt {
    max-width: 600px !important;
    height: 120px !important
}

.about .banner .banner-txt h1 {
    color: #fff;
    font-size: 36px !important;
    margin-bottom: 10px !important
}

.about .banner .banner-txt h3 {
    color: #fff
}

@media screen and (min-width:1081px) {
    .about .banner .tab-wrap {
        display: none !important
    }
}

.about .banner .tab-wrap .tab {
    margin: auto !important
}

.about .banner .tab-wrap .tab .item {
    line-height: 48px !important;
    font-size: 16px !important
}

@media screen and (max-width:992px) {
    .about .banner .tab-wrap gap {
        display: none
    }
}

@media screen and (max-width:480px) {
    .about .banner .tab-wrap {
        min-height: 100px
    }
}

.about .vertical-nav ul {
    height: auto !important
}

.about .article-nav {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin: 20px 0 60px
}

.about .article-nav a {
    display: block;
    color: #999
}

.about .tab-wrap {
    margin-top: 16px
}

.about .tab-wrap .tab,
.about .tab-wrap .tab-nav {
    margin: 0
}

.about .tab-wrap .tab .item,
.about .tab-wrap .tab-nav .item {
    line-height: 36px;
    font-size: 16px
}

.about .tab-wrap .tab gap,
.about .tab-wrap .tab-nav gap {
    width: 30px
}

.about .content-temp {
    padding-bottom: 40px
}

.about .content-temp h2 {
    font-weight: bold
}

.about .content-temp h2:first-child {
    margin-top: 0
}

.about .content-temp p {
    line-height: 30px;
    text-indent: 30px
}

.about .about-content {
    padding-bottom: 40px
}

.about .about-content h2 {
    font-weight: bold
}

.about .about-content h2:first-child {
    margin-top: 0
}

.about .about-content p {
    line-height: 30px;
    text-indent: 30px
}

.about .about-content .about-data {
    margin: -20px
}

.about .about-content .about-data table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px
}

.about .about-content .about-data img {
    width: 100%
}

@media screen and (max-width:768px) {
    .about .about-content .about-data {
        margin: -6px
    }

    .about .about-content .about-data table {
        border: spacing 6px
    }
}

.about .about-content img {
    max-width: 100%
}

.about .about-content .img-txt {
    color: #999
}

@media screen and (max-width:1200px) {
    .about .about-content .img-txt .txt p {
        line-height: 26px
    }
}

.about .about-content .partner-table {
    margin: -12px
}

.about .about-content .partner-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px
}

.about .about-content .partner-table table td {
    width: 33.33%;
    border: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    height: 60px;
    overflow: hidden
}

.about .about-content .partner-table table img {
    max-width: 110px;
    max-height: 40px
}

@media screen and (max-width:768px) {
    .about .about-content .partner-table table img {
        max-width: 90%
    }
}

.about .about-content .almanac .years {
    position: relative
}

.about .about-content .almanac .years .years-table {
    position: relative;
    z-index: 2;
    width: 90%;
    margin: auto;
    left: 0;
    right: 0
}

.about .about-content .almanac .years .years-table>div {
    text-align: center
}

.about .about-content .almanac .years .years-table>div h2 {
    margin: 0;
    font-size: 20px;
    line-height: 30px
}

.about .about-content .almanac .years .years-table>div .dot {
    width: 35px;
    height: 41px;
    margin: auto;
    background: url(../image/almanac-dot.png) top center no-repeat
}

.about .about-content .almanac .years .years-table>div .temp h2 {
    color: #ef2a3a
}

.about .about-content .almanac .years .years-table>div .temp .dot {
    background-image: url(../image/almanac-dot-current.png)
}

.about .about-content .almanac .years .years-table>div.current h2 {
    color: #ef2a3a
}

.about .about-content .almanac .years .years-table>div.current .dot {
    background-image: url(../image/almanac-dot-current.png)
}

.about .about-content .almanac .years .years-table>div:hover {
    cursor: pointer
}

.about .about-content .almanac .years .years-table>div:hover h2 {
    color: #ef2a3a
}

.about .about-content .almanac .years .years-table>div:hover .dot {
    background-image: url(../image/almanac-dot-current.png)
}

.about .about-content .almanac .years .slash {
    position: absolute;
    top: 45px;
    height: 5px;
    width: 100%;
    background: #ddd;
    z-index: 1
}

.about .about-content .almanac .events {
    display: none;
    background: #f1f4f9;
    color: #636d7d;
    padding: 10px 30px;
    margin-top: 10px
}

.about .about-content .almanac .events.current {
    display: block
}

.about .about-content .almanac .events ul {
    padding-left: 20px
}

.about .about-content .almanac .events ul li {
    position: relative;
    padding: 5px 0 5px 50px
}

.about .about-content .almanac .events ul li span {
    position: absolute;
    left: 0
}

@media screen and (max-width:768px) {
    .about .about-content .almanac .years .years-table {
        width: 100%
    }

    .about .about-content .almanac .years .years-table>div {
        text-align: center
    }

    .about .about-content .almanac .years .years-table>div h2 {
        font-size: 14px;
        padding-top: 16px;
        line-height: 14px
    }
}

.about .about-content .story-table {
    margin: -6px
}

.about .about-content .story-table table {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    margin-top: 10px
}

.about .about-content .story-table table td:only-child {
    padding-bottom: 10px
}

.about .about-content .story-table table h3,
.about .about-content .story-table table h4 {
    color: #666;
    margin: 0;
    text-align: center
}

.about .about-content .feedback-table>div {
    color: #666;
    background: #fafcff;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    vertical-align: top
}

.about .about-content .feedback-table>div .img {
    position: relative;
    height: 80px
}

.about .about-content .feedback-table>div .img img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 180px
}

.about .about-content .feedback-table>div p {
    width: 245px
}

.about .about-content .feedback-table>gap {
    width: 20px;
    min-width: 20px
}

@media screen and (max-width:992px) {
    .about .about-content .feedback-table {
        display: block
    }

    .about .about-content .feedback-table>div {
        display: block;
        margin-bottom: 20px
    }

    .about .about-content .feedback-table>div p {
        width: 80%;
        margin-bottom: 20px
    }
}

.about .about-content .qualifications-table {
    border-bottom: #ddd dashed 1px
}

.about .about-content .qualifications-table img {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 20px
}

.about .about-content .qualifications-table h4 {
    color: #999;
    margin: 0;
    text-align: center
}

.about .about-content .qualifications-table>div {
    padding-bottom: 10px
}

.about .about-content .honor-table {
    border-collapse: collapse;
    margin-bottom: 20px
}

.about .about-content .honor-table>div {
    border: 1px solid #ddd
}

.about .about-content .honor-table>div.img {
    background: #f8f8f8;
    width: 240px;
    text-align: center;
    padding: 20px 0
}

.about .about-content .honor-table>div.txt {
    padding: 20px
}

.about .about-content .honor-table>div.txt h3 {
    font-weight: bold;
    margin: 0
}

.about .about-content .honor-table>div.txt h4 {
    margin: 6px 0
}

.about .about-content .honor-table>div.txt P {
    text-indent: 0;
    color: #999
}

@media screen and (max-width:768px) {
    .about .about-content .honor-table {
        display: block
    }

    .about .about-content .honor-table>div {
        display: block
    }

    .about .about-content .honor-table>div.img {
        width: 100%;
        border-bottom: none;
        padding: 10px 0
    }

    .about .about-content .honor-table>div.img img {
        zoom: .5
    }

    .about .about-content .honor-table>div.txt {
        border-top: none;
        padding: 10px
    }

    .about .about-content .honor-table>div.txt P {
        line-height: 20px
    }
}

.about .about-content .job-intro h3 {
    font-size: 18px;
    margin: 5px 0
}

.about .about-content .job-intro p {
    line-height: 20px;
    text-indent: 0
}

.about .about-content .job-intro .mail {
    color: #333;
    background: #f1f4f9;
    padding: 20px
}

.about .about-content .job-intro .mail a {
    color: #ef2a3a;
    font-size: 16px
}

.about .about-content .job-intro .mail a.btn {
    font-size: 12px
}

.about .about-content .job-intro .mail a.btn:hover {
    color: #fff
}

.about .about-content .job-list {
    margin-top: 30px
}

.about .about-content .job-list .item {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 14px 20px
}

.about .about-content .job-list .item:not(.head) {
    background: #f1f4f9
}

.about .about-content .job-list .item .title {
    position: relative
}

.about .about-content .job-list .item .title h3 {
    margin: 0
}

.about .about-content .job-list .item .title>* {
    color: #333;
    display: inline-block;
    font-size: 16px
}

.about .about-content .job-list .item .title>*:nth-child(1) {
    width: 40%
}

.about .about-content .job-list .item .title>*:nth-child(2) {
    width: 30%
}

.about .about-content .job-list .item .title>*:nth-child(3) {
    width: 24%
}

.about .about-content .job-list .item .title::after {
    content: "+";
    position: absolute;
    height: 24px;
    width: 24px;
    margin: auto;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center
}

.about .about-content .job-list .item:not(.head) .title:hover {
    cursor: pointer
}

.about .about-content .job-list .item.head {
    font-weight: bold
}

.about .about-content .job-list .item.head h3 {
    font-weight: bold
}

.about .about-content .job-list .item.head .title::after {
    content: ""
}

.about .about-content .job-list .item .details {
    color: #999;
    height: 0;
    transition: height 1s;
    overflow: hidden
}

.about .about-content .job-list .item .details h4 {
    margin: 0
}

.about .about-content .job-list .item.open {
    background: #fff
}

.about .about-content .job-list .item.open .title::after {
    content: "-";
    font-size: 20px
}

.about .about-content .job-list .item.open .details {
    height: auto;
    margin-top: 14px;
    padding-top: 10px;
    border-top: #ddd dashed 1px;
    transition: height 1s
}

.about .about-content .job-list .item:last-child {
    border-bottom: 1px solid #ddd
}

.about .about-content .hotline-table {
    color: #999
}

.about .about-content .hotline-table>div {
    padding: 5px 16px
}

.about .about-content .hotline-table .hotline {
    color: #333;
    background: #f1f4f9;
    position: relative;
    white-space: nowrap;
    width: 320px;
    line-height: 40px;
    padding-left: 52px
}

.about .about-content .hotline-table .hotline b {
    font-size: 24px;
    color: #ef2a3a;
    font-weight: normal
}

.about .about-content .hotline-table .hotline img {
    position: absolute;
    top: 10px;
    left: 16px
}

@media screen and (max-width:768px) {
    .about .about-content .hotline-table {
        display: block
    }

    .about .about-content .hotline-table>div {
        display: block;
        width: 100% !important
    }
}

.about .about-content .business-table {
    display: table
}

.about .about-content .business-table>div {
    display: table-cell
}

.about .about-content .business-table>div .item {
    border: 1px solid #ddd;
    padding: 10px;
    margin-right: 20px;
    width: 300px
}

.about .about-content .business-table>div .item h3 {
    font-weight: bold;
    margin: 10px 0
}

.about .about-content .business-table>div .item h3 img {
    padding-right: 10px
}

.about .about-content .business-table>div .item h4 {
    margin-top: 0;
    margin-bottom: 10px
}

@media screen and (max-width:768px) {
    .about .about-content .business-table {
        display: block
    }

    .about .about-content .business-table>div {
        display: block;
        padding-bottom: 20px
    }
}

@media screen and (max-width:480px) {
    .about .about-content .business-table .item {
        width: 100% !important
    }
}

.about .about-content .address-table {
    margin: -20px
}

.about .about-content .address-table .some-row {
    border-collapse: separate;
    border-spacing: 20px
}

.about .about-content .address-table .some-row>div>div {
    border: 1px solid #ddd;
    padding: 5px 16px
}

.about .about-content .address-table .some-row>div>div:first-child {
    width: 50%
}

.about .about-content .address-table .some-row>div>div .title {
    color: #fc3e47;
    font-size: 24px;
    line-height: 50px;
    border-bottom: #ddd 1px solid;
    margin-bottom: 10px
}

.about .about-content .address-table .some-row>div>div p {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    color: #333;
    margin-top: 5px;
    text-indent: 0
}

.about .about-content .address-table .some-row>div>div p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    height: 20px;
    width: 20px
}

.about .about-content .address-table .some-row>div>div p.add::before {
    background: url(../image/contact-add.png) left no-repeat
}

.about .about-content .address-table .some-row>div>div p.tel::before {
    background: url(../image/contact-tel.png) left no-repeat
}

@media screen and (max-width:768px) {
    .about .about-content .address-table .some-row {
        display: block;
        margin: 0;
        padding: 20px
    }

    .about .about-content .address-table .some-row>div {
        display: block
    }

    .about .about-content .address-table .some-row>div>div {
        display: block;
        width: 100% !important;
        margin-bottom: 20px
    }
}

@media screen and (max-width:480px) {
    .about .about-content .address-table {
        margin: 0
    }

    .about .about-content .address-table .some-row {
        padding: 0
    }
}

.about .service-content {
    padding-bottom: 40px
}

.about .service-content h2 {
    font-weight: bold
}

.about .service-content h2:first-child {
    margin-top: 0
}

.about .service-content p {
    line-height: 30px;
    text-indent: 30px
}

.about .service-content .service-table {
    margin: -20px
}

.about .service-content .service-table .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.about .service-content .service-table .one-row>div {
    border: 1px solid #ddd;
    text-align: center;
    width: 20%;
    padding: 20px 0;
    vertical-align: top
}

.about .service-content .service-table .one-row>div img {
    margin-bottom: 10px
}

.about .service-content .service-table .one-row>div h4 {
    margin: 0
}

@media screen and (max-width:768px) {
    .about .service-content .service-table {
        margin: -6px
    }

    .about .service-content .service-table .one-row {
        border-spacing: 6px
    }

    .about .service-content .service-table .one-row>div {
        padding: 10px 0
    }

    .about .service-content .service-table .one-row>div img {
        width: 40px
    }
}

.about .service-content .service-item h3 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    padding-left: 16px;
    position: relative;
    font-size: 18px;
    line-height: 38px
}

.about .service-content .service-item h3::before {
    position: absolute;
    left: 0;
    content: "●";
    color: #ef2a3a
}

.about .service-content .service-item p {
    text-indent: 0;
    padding-left: 16px;
    line-height: 20px
}

.about .service-content .service-item ul {
    padding-left: 16px;
    margin-top: 4px
}

.about .service-content .service-item .btn {
    margin-left: 16px
}

.about .news-page {
    padding-top: 20px
}

.about .news-page>div {
    vertical-align: top
}

.about .news-page>div:last-child {
    width: 340px;
    min-width: 340px
}

@media screen and (max-width:992px) {
    .about .news-page>div:last-child {
        width: 240px;
        min-width: 240px
    }
}

@media screen and (max-width:768px) {
    .about .news-page>div:last-child {
        display: none !important
    }
}

.about .news-page>gap {
    width: 38px
}

@media screen and (max-width:992px) {
    .about .news-page>gap {
        display: none !important
    }
}

.about .news-page .news-content {
    padding-bottom: 60px
}

.about .news-page .news-content .tab-wrap {
    margin-top: 0
}

.about .news-page .news-content .tit {
    font-size: 36px;
    color: #333
}

.about .news-page .news-content .title {
    display: block;
    font-size: 24px;
    color: #333
}

.about .news-page .news-content .temp {
    color: #999
}

.about .news-page .news-content .temp i {
    margin-right: 4px
}

.about .news-page .news-content .temp span:not(:last-child) {
    margin-right: 60px
}

.about .news-page .news-content .news-list li {
    padding: 20px 0 30px;
    border-bottom: 1px solid #ddd
}

.about .news-page .news-content .news-list li p {
    color: #999
}

.about .news-page .news-content .news-list li p i {
    margin-right: 4px
}

.about .news-page .news-content .news-list li p span:not(:last-child) {
    margin-right: 60px
}

.about .news-page .news-content .news-list li h4 {
    margin: 0
}

.about .news-page .news-content .news-list li a:hover {
    color: #ef2a3a
}

.about .news-page .news-content .news-info .news-head {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px
}

.about .news-page .news-content .news-info .news-head p {
    color: #999
}

.about .news-page .news-content .news-info .news-head p i {
    margin-right: 4px
}

.about .news-page .news-content .news-info .news-head p span:not(:last-child) {
    margin-right: 60px
}

.about .news-page .hotnews {
    background: #f6f6f6;
    padding: 20px;
    margin-bottom: 60px
}

.about .news-page .hotnews h3 {
    margin: 0 -20px 10px;
    padding-left: 20px;
    border-left: #ef2a3a 3px solid
}

.about .news-page .hotnews img {
    max-width: 100%
}

.about .news-page .hotnews ul li {
    line-height: 40px
}

.about .news-page .hotnews ul li:not(:last-child) {
    border-bottom: 1px solid #ddd
}

.about .news-page .hotnews ul li a {
    color: #666;
    display: inline-block;
    max-width: 220px
}

.about .news-page .hotnews ul li a:hover {
    color: #ef2a3a
}

.about .news-page .hotnews ul li span {
    float: right
}

@media screen and (max-width:992px) {
    .about .news-page .hotnews ul li span {
        display: none
    }
}

.help .search-bar {
    height: 108px
}

.help .search-bar .one-row {
    height: 40px
}

.help .search-bar .tips {
    width: 240px;
    text-align: center;
    padding-left: 0
}

.help .search-bar .tips h3 {
    font-size: 30px
}

.help .search-bar .search input {
    height: 40px;
    border: 1px solid #ddd
}

.help .search-bar .search .go .btn {
    line-height: 38px
}

.help .search-bar .search ul {
    margin: 6px 0 0 0;
    line-height: 14px
}

.help .search-bar .search ul li {
    display: inline-block;
    margin-right: 8px;
    line-height: 20px
}

.help .search-bar .search ul li a {
    color: #999
}

.help .search-bar .search ul li a:hover {
    color: #ef2a3a
}

.help .banner {
    height: 280px
}

.help .banner h1 {
    font-size: 30px;
    text-align: center;
    margin-top: 0
}

.help .banner .help-banner-wrapper {
    display: table;
    width: 800px;
    margin: auto
}

.help .banner .help-banner-wrapper>div {
    vertical-align: middle;
    display: table-cell;
    height: 280px;
    width: 800px
}

@media screen and (max-width:850px) {
    .help .banner .help-banner-wrapper {
        width: 100%
    }

    .help .banner .help-banner-wrapper>div {
        width: 100%
    }
}

.help .banner .tab-wrap {
    display: none;
    height: 31px
}

.help .banner .tab-wrap .wrapper .item {
    line-height: 28px;
    font-size: 14px
}

.help .banner .tab-wrap .bg {
    height: 31px
}

@media screen and (max-width:1080px) {
    .help .banner .tab-wrap {
        display: block
    }
}

.help section.line {
    border-bottom: 1px solid #ddd
}

.help .hl-catalog-table {
    width: 100%;
    text-align: center;
    margin: 40px auto
}

.help .hl-catalog-table td {
    padding: 20px
}

.help .hl-catalog-table td h3 {
    margin: 4px 0;
    white-space: nowrap
}

.help .hl-catalog-table td p {
    text-align: center;
    color: #999;
    width: 200px;
    max-width: 100%
}

@media screen and (max-width:1000px) {
    .help .hl-catalog-table td p {
        display: none
    }
}

.help .hl-catalog-table td:hover {
    box-shadow: 0 0 10px #ddd
}

@media screen and (max-width:500px) {
    .help .hl-catalog-table td {
        padding: 10px 0
    }
}

.help .help-tit {
    color: #ef2a3a;
    font-size: 18px;
    margin: 0;
    border-bottom: 1px solid #ddd;
    line-height: 50px
}

.help .article-list {
    margin: 0 0 20px 0
}

.help .article-list li {
    border-bottom: 1px dashed #d2d2d2;
    padding: 12px 0
}

.help .article-list li::before {
    content: "●";
    color: #d2d2d2;
    padding-right: 4px
}

.help .article-list a {
    font-size: 16px;
    color: #333
}

.help .article-list a:hover {
    color: #ef2a3a
}

.help .article-list p {
    color: #999
}

.help .article-nav {
    margin-top: 50px
}

.help .article-info .title {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center
}

.help .article-info img {
    max-width: 100% !important;
    height: auto !important
}

.help .article-info .tit-bar {
    text-align: center;
    color: #999;
    border-bottom: #ddd dashed 1px;
    padding-bottom: 10px;
    margin-bottom: 30px
}

.help .article-info .tit-bar span {
    margin-right: 8px;
    margin-left: 3px;
    display: inline-block
}

.help .tab-wrap {
    min-height: unset
}

.help .tab-wrap .one-row>div {
    width: 16.6%;
    text-align: center
}

@media screen and (max-width:480px) {
    .help .tab-wrap .tab gap {
        width: 0
    }
}

.help-index .banner .tab-wrap {
    display: none !important
}

.VI h2 {
    color: #333;
    margin: 0
}

.VI hr {
    border-top: dashed #999 1px;
    border-bottom: none;
    margin-top: 20px
}

.VI a:not(.btn) {
    color: #13539b
}

.VI .header a {
    color: #fff
}

.VI .txt-wrap {
    background: #f5f5f5;
    padding: 10px;
    border: 1px solid #ddd
}

.VI .darkbg {
    background: #bbb;
    padding: 3px;
    display: inline-block
}

.VI .table-wrap {
    margin: -10px
}

.VI .table-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px
}

.VI .table-wrap table td,
.VI .table-wrap table th {
    text-align: left;
    vertical-align: bottom
}

.VI .tips div {
    color: #333;
    font-size: 16px
}

.VI .tips li {
    position: relative;
    padding-left: 12px;
    line-height: 26px
}

.VI .tips li::before {
    position: absolute;
    margin: auto;
    left: 0;
    top: 10px;
    display: block;
    content: "";
    height: 6px;
    width: 6px;
    background: url(../image/dot.png) center no-repeat
}

.VI .intro {
    display: inline;
    color: #999;
    padding-left: 10px
}

.VI .intro::before {
    content: "------";
    padding-right: 4px
}

.VI intro {
    display: inline;
    color: #999;
    padding-left: 10px
}

.VI intro::before {
    content: "------";
    padding-right: 4px
}

.VI .explorer ul {
    padding-left: 20px
}

.VI .explorer li {
    color: #333
}

.VI .explorer li::before {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e6d6";
    padding-right: 5px
}

.VI .explorer span {
    display: inline;
    color: #999;
    padding-left: 10px
}

.VI .explorer span::before {
    content: "------";
    padding-right: 4px
}

.VI .partner-table {
    border-collapse: separate;
    border-spacing: 12px
}

.VI .partner-table>div>div {
    border: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    height: 60px;
    background: #fff
}

.VI .partner-table img {
    max-width: 110px;
    max-height: 40px
}

.VI .footer .other .list a {
    color: #666
}

.VI.index h1 {
    text-align: center
}

.VI.index .VI-nav {
    margin: 0 -20px
}

.VI.index .VI-nav .table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px
}

.VI.index .VI-nav .table>div {
    display: table-cell;
    background: #f5f5f5;
    padding: 20px
}

.VI.index .VI-nav .table>div:hover {
    cursor: pointer;
    box-shadow: 0 0 20px #eee
}

.VI.index .VI-nav .table>div h2 {
    display: block;
    text-align: center
}

@media screen and (max-width:768px) {
    .VI.index .VI-nav {
        display: block;
        margin: 0
    }

    .VI.index .VI-nav .table {
        display: block
    }

    .VI.index .VI-nav .table>div {
        display: block;
        margin-bottom: 20px
    }
}

.VI.markdown h1,
.VI.markdown h2,
.VI.markdown h3,
.VI.markdown h4,
.VI.markdown h5,
.VI.markdown h6 {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    font-style: normal;
    font-weight: 600 !important;
    margin-top: 0
}

.VI.markdown h1 {
    font-size: 28px
}

.VI.markdown p {
    line-height: 28px
}

.VI.markdown pre {
    display: block;
    margin: 0 0 10px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    padding: .66001rem 9.5px 9.5px;
    line-height: 2rem;
    background: -webkit-linear-gradient(top, #fff 0, #fff .75rem, #f5f7fa .75rem, #f5f7fa 2.75rem, #fff 2.75rem, #fff 4rem);
    background: linear-gradient(to bottom, #fff 0, #fff .75rem, #f5f7fa .75rem, #f5f7fa 2.75rem, #fff 2.75rem, #fff 4rem);
    background-size: 100% 4rem;
    border-color: #D3DAEA;
    text-size-adjust: 100%
}

.VI.markdown pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: 0;
    box-sizing: border-box;
    display: inline;
    font-family: monospace, monospace;
    font-weight: 400;
    text-size-adjust: 100%;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word
}

.mall-index .tit1 h2 {
    font-size: 36px
}

.mall-index .banner {
    height: 450px
}

.mall-index .banner .price {
    color: #fac1b0;
    font-size: 18px;
    margin-right: 20px
}

.mall-index .banner .tips {
    color: #0056dc;
    font-size: 18px
}

.mall-index .banner-txt {
    height: 450px
}

.mall-prolist {
    padding: 60px 0
}

.mall-prolist-item {
    float: left;
    margin-right: 80px;
    margin-bottom: 50px;
    width: 340px;
    height: 460px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #b9cbd7;
    position: relative;
    box-shadow: 0 0 7px #aaa;
    transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out
}

.mall-prolist-item:nth-child(3n) {
    margin-right: 0
}

.mall-prolist-item:hover .info {
    opacity: 1
}

.mall-prolist-item:hover .pro-img {
    scale: 1.05;
    transition: all .5s
}

.mall-prolist-item .pro-img {
    width: 100%;
    max-height: unset;
    position: absolute;
    top: 0;
    left: 0;
    scale: 1;
    transition: scale .5s
}

.mall-prolist-item .content {
    width: 100%;
    height: 460px;
    position: relative;
    overflow: hidden
}

.mall-prolist-item .info {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    font-size: 0;
    transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out
}

.mall-prolist-item .btn {
    display: inline-block;
    font-size: 18px;
    margin: 0 10px;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
    border-radius: 10px;
    color: #216ef4;
    border-color: #216ef4;
    font-weight: bold
}

.mall-prolist-item .select {
    color: #fff
}

.mall-prolist-item .select:hover {
    background-color: rgba(255, 255, 255, 0.4)
}

.mall-prolist-item .show {
    background-color: #eaf3ff
}

.mall-price {
    padding: 20px 0
}

.mall-price-wrap {
    background: url(../image/price-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 25px 70px;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(16, 98, 167, 0.3)
}

.mall-price-content {
    max-width: 500px
}

.mall-price-content h2 {
    color: #fff;
    font-size: 24px;
    margin: 10px 0
}

.mall-price-content p {
    color: #b7d3ff;
    font-size: 18px
}

.mall-price-content .btn {
    font-size: 18px;
    border-color: #fff;
    color: #fff;
    padding: 0 40px;
    height: 45px;
    line-height: 45px;
    background-color: unset;
    border-radius: 45px
}

.mall-show-adv {
    padding-bottom: 80px
}

.mall-index-panel {
    display: none;
    transition: all .5s
}

.mall-index-panel.show {
    display: block;
    transition: all .5s
}

.topic-tit {
    text-align: center;
    padding-top: 80px
}

.topic-tit p {
    text-align: center;
    color: #fff
}

.topic-public section {
    padding-bottom: 50px
}

.topic-public .banner {
    height: 520px;
    transition: all ease .5s
}

.topic-public .banner.h500 {
    height: 500px;
    transition: all ease .5s
}

.topic-public .title1 {
    padding: 145px 0 55px
}

.topic-public .tit1 p {
    padding: 15px 120px;
    margin: 0;
    font-size: 18px;
    line-height: 36px
}

@media screen and (max-width:1200px) {
    .topic-public .tit1 p {
        padding: 15px 20px
    }
}

@media screen and (max-width:1200px) {
    .topic-public section.banner .title1 {
        width: 80%;
        transition: all ease .5s
    }

    .topic-public section.banner .title2 {
        width: 60%;
        transition: all ease .5s
    }
}

@media screen and (max-width:768px) {
    .topic-public section.banner {
        height: 400px;
        transition: all ease .5s
    }
}

@media screen and (max-width:480px) {
    .topic-public section.banner {
        height: 360px;
        transition: all ease .5s
    }
}

.topic-btn1 {
    height: 42px;
    line-height: calc(42px);
    width: 260px;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    background: linear-gradient(to left, #8a9dd8, #87bdf0);
    text-align: center;
    white-space: nowrap;
    border-radius: 5px;
    outline: none;
    margin: 0 60px
}

@media screen and (max-width:992px) {
    .topic-btn1 {
        width: 150px;
        margin: 0 10px
    }
}

.topic-btn1:hover {
    color: #fff;
    background: linear-gradient(to left, #2647bb, #1f89eb)
}

.topic-btn2 {
    height: 42px;
    line-height: calc(42px);
    font-size: 16px;
    padding: 0 20px;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    background: #ef2a3a;
    text-align: center;
    white-space: nowrap;
    border-radius: 5px;
    outline: none
}

.topic-btn2:hover {
    color: #fff
}

.topic-gridtable {
    font-size: 14px;
    width: 100%;
    border-width: 1px;
    border-collapse: collapse
}

.topic-gridtable th {
    border-width: 1px;
    height: 38px;
    border-style: solid
}

.topic-gridtable td {
    border-width: 1px;
    height: 38px;
    text-align: center;
    border-style: solid
}

.act-nav01 .nav-currency {
    float: left;
    text-align: center;
    background-color: #46a1ff;
    cursor: pointer;
    padding: 10px 0;
    display: inline-table
}

.act-nav01 .nav-currency:hover {
    background-color: #007dff
}

.act-nav01 .active {
    background-color: #fe735f !important
}

.act-nav01 .item {
    border-left: 1px solid #fff;
    padding: 0 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    color: #fff
}

.act-nav01 .nav-item:first-child .item {
    border-left: none
}

@media screen and (max-width:768px) {
    .act-nav01 .item {
        font-size: 14px;
        padding: 0 5px
    }
}

.act-nav01[data-cols='4'] .nav-item {
    width: 25%
}

.act-nav01[data-cols='5'] .nav-item {
    width: 20%
}

.extra-link1 a {
    border: 1px solid #1670fc;
    background: #090854;
    display: block;
    position: relative;
    margin: 30px 0 0;
    color: #fff;
    padding: 25px 20px
}

.extra-link1 a span {
    font-size: 24px;
    line-height: 36px
}

.extra-link1 a p {
    font-size: 14px
}

.extra-link1 a::after {
    content: url(../image/arrow6.png);
    position: absolute;
    right: 20px;
    top: 30px
}

.configure-box01 .blue {
    color: #007dff
}

.configure-box01 .orange {
    color: #fe735f;
    font-size: 16px
}

.configure-box01 num {
    font-size: 24px
}

.configure-box01 .item {
    background: #0f208d;
    margin-top: 15px
}

.configure-box01 .item:hover {
    cursor: pointer;
    background: #2233a3;
    transition: .5s
}

.configure-box01 .cfg {
    padding-bottom: 12px
}

.configure-box01 .cfg2 {
    border-bottom: 1px solid #1242ff
}

.configure-box01 .tit {
    font-size: 24px;
    color: #fff;
    line-height: 65px;
    margin: 0;
    padding: 0 20px;
    background: linear-gradient(to right, #1671fc, #1242ff)
}

.configure-box01 .datacount {
    color: #fff;
    padding: 20px
}

.configure-box01 .btn {
    width: 100%;
    background-color: #fe735f;
    border: 1px solid #fe735f;
    height: 38px;
    line-height: 38px
}

.configure-box01 .btn:hover {
    background-color: #ea5021;
    border: 1px solid #ea5021
}

.topic-titlebox {
    padding-bottom: 10px
}

.topic-titlebox .recommend-wrap {
    position: relative
}

.topic-titlebox .recommend .recommend-table {
    width: 100%
}

.topic-titlebox .recommend .recommend-table .one-row {
    box-shadow: 0 0 16px rgba(37, 113, 220, 0.12);
    border-collapse: collapse;
    border-radius: 10px
}

.topic-titlebox .recommend .recommend-table .one-row>div:first-child .item {
    border-radius: 10px 0 0 10px
}

.topic-titlebox .recommend .recommend-table .one-row>div:last-child .item {
    border-radius: 0 10px 10px 0
}

.topic-titlebox .recommend .recommend-table .one-row>div {
    position: relative;
    width: 25%
}

.topic-titlebox .recommend .recommend-table .one-row>div .item {
    position: relative;
    background: #fff;
    line-height: 30px;
    padding-left: 110px;
    padding-top: 30px;
    padding-bottom: 30px;
    height: 150px;
    width: 100%
}

.topic-titlebox .recommend .recommend-table .one-row>div .item img {
    position: absolute;
    top: 36px;
    left: 20px
}

.topic-titlebox .recommend .recommend-table .one-row>div .item img.hover {
    display: none
}

.topic-titlebox .recommend .recommend-table .one-row>div .item img.unhover {
    display: block
}

.topic-titlebox .recommend .recommend-table .one-row>div .item h3 {
    margin: 0;
    text-align: left;
    font-weight: bold
}

.topic-titlebox .recommend .recommend-table .one-row>div .item p {
    margin: 0;
    text-align: left;
    color: #333
}

@media screen and (max-width:1200px) {
    .topic-titlebox .recommend .recommend-table .one-row>div .item {
        padding-left: 80px
    }

    .topic-titlebox .recommend .recommend-table .one-row>div .item img {
        top: 42px;
        left: 15px;
        width: 50px
    }
}

@media screen and (max-width:992px) {
    .topic-titlebox .recommend .recommend-table .one-row>div .item {
        padding-left: 0;
        padding-top: 76px
    }

    .topic-titlebox .recommend .recommend-table .one-row>div .item img {
        top: 20px;
        left: 0;
        right: 0;
        margin: auto;
        width: 60px
    }

    .topic-titlebox .recommend .recommend-table .one-row>div .item h3 {
        text-align: center;
        padding-top: 20px
    }

    .topic-titlebox .recommend .recommend-table .one-row>div .item p {
        display: none
    }
}

@media screen and (max-width:768px) {
    .topic-titlebox .recommend .recommend-table .one-row>div .item {
        padding-top: 82px
    }

    .topic-titlebox .recommend .recommend-table .one-row>div .item img {
        top: 26px
    }

    .topic-titlebox .recommend .recommend-table .one-row>div .item h3 {
        font-size: 14px;
        line-height: 20px
    }
}

.topic-titlebox .recommend .recommend-table .one-row>div .item:hover {
    position: absolute;
    top: -3px;
    left: 0;
    height: 155px;
    box-shadow: 0 0 16px rgba(37, 113, 220, 0.12);
    cursor: pointer;
    z-index: 99
}

.topic-titlebox .recommend .recommend-table .one-row>div .item:hover img.hover {
    display: block
}

.topic-titlebox .recommend .recommend-table .one-row>div .item:hover img.unhover {
    display: none
}

.topic-configure01 {
    background: #110768;
    padding-bottom: 50px
}

.topic-configure01 h1 {
    color: #fff
}

.topic-sever-configure {
    background-color: #f2f8ff
}

.topic-sever-configure .tit1 p {
    line-height: 36px;
    color: #666;
    padding: 15px 60px
}

.topic-sever-configure .red {
    font-size: 24px;
    line-height: 60px
}

.topic-sever-configure .btn {
    margin: 0 20px 10px;
    width: 216px;
    height: 40px;
    line-height: 40px;
    background: #464eba;
    border-radius: 5px;
    border: 1px solid #464eba
}

.topic-sever-configure .more {
    font-size: 24px;
    margin-bottom: 20px
}

@media screen and (max-width:1200px) {
    .topic-sever-configure img {
        width: 100%
    }

    .topic-sever-configure .tit1 p {
        line-height: 30px;
        padding: 15px 3%;
        font-size: 16px
    }
}

.topic-sever-config_2 {
    padding: 50px 0
}

.topic-sever-config_2 .content {
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.2);
    padding: 30px 55px 20px;
    margin-bottom: 20px
}

.topic-sever-config_2 .box {
    padding: 20px
}

.topic-sever-config_2 .box>.card {
    border: 1px solid #e5e5e5;
    position: relative;
    height: 80%
}

.topic-sever-config_2 .box>.card>div {
    padding-bottom: 70px
}

.topic-sever-config_2 .top-line {
    position: absolute;
    top: 0;
    height: 3px;
    width: 100%
}

.topic-sever-config_2 ul {
    padding: 10px 20px 0
}

.topic-sever-config_2 li {
    list-style: inside;
    font-size: 16px;
    line-height: 42px
}

.topic-sever-config_2 li span {
    color: #333;
    margin-left: -8px
}

.topic-sever-config_2 li .BW {
    display: inline-block;
    width: 116px;
    height: 36px;
    color: #fff;
    border-radius: 5px;
    line-height: 36px;
    text-align: center;
    background: linear-gradient(to right, #ff977c, #ff694e)
}

.topic-sever-config_2 .more {
    padding: 0 30px 30px;
    font-size: 24px;
    line-height: 36px;
    display: block
}

.topic-sever-config_2 .item1 .top-line {
    background: linear-gradient(to right, #2397f7, #3674e4)
}

.topic-sever-config_2 .item1 li {
    color: #2497f7
}

.topic-sever-config_2 .item1 .more {
    color: #2497f7
}

.topic-sever-config_2 .item2 .top-line {
    background: linear-gradient(to right, #2dd67f, #06b07e)
}

.topic-sever-config_2 .item2 li {
    color: #2dd67f
}

.topic-sever-config_2 .item2 .more {
    color: #2dd67f
}

.topic-sever-config_2 .item3 .top-line {
    background: linear-gradient(to right, #ecc333, #f29720)
}

.topic-sever-config_2 .item3 li {
    color: #ecc333
}

.topic-sever-config_2 .item3 .more {
    color: #ecc333
}

.topic-sever-config_2 .bottom-btn {
    text-align: center;
    bottom: 0;
    position: absolute;
    width: 100%
}

.topic-sever-config_2 .bottom-btn .btn {
    margin: 0 15px;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    font-size: 16px
}

.topic-sever-config_2 .bottom-btn .btn1 {
    background: linear-gradient(to right, #2397f7, #3674e4);
    background: -o-linear-gradient(to right, #2397f7, #3674e4);
    background: -webkit-linear-gradient(to right, #2397f7, #3674e4);
    border: none
}

.topic-sever-config_2 .bottom-btn .btn2 {
    border-color: #068ef4;
    color: #068ef4
}

.topic-sever-config_2 .bottom-btn .btn2:hover {
    background: linear-gradient(to right, #2397f7, #3674e4);
    color: #fff
}

@media screen and (max-width:1200px) {
    .topic-sever-config_2 .content {
        padding: 30px 0 20px
    }
}

.topic-province-map .spot {
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #26a3fe
}

.topic-province-map .spot1 {
    background: #0056c9
}

.topic-province-map .spot2 {
    background: #4ec133
}

.topic-province-map .spot3 {
    background: #ef702a
}

.topic-province-map .landmark .spot::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: rgba(38, 163, 254, 0.1);
    animation: flash infinite linear 1s
}

.topic-province-map .landmark .spot::after {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: rgba(38, 163, 254, 0.1);
    animation: pulse2 infinite linear 1s
}

.topic-province-map .landmark .spot2::before {
    background: rgba(78, 193, 51, 0.1)
}

.topic-province-map .landmark .spot3::before {
    background: rgba(239, 112, 42, 0.1)
}

.topic-province-map .landmark .spot2::after {
    background: rgba(78, 193, 51, 0.1)
}

.topic-province-map .landmark .spot3::after {
    background: rgba(239, 112, 42, 0.1)
}

.topic-province-map .spot:hover {
    cursor: pointer
}

.topic-province-map .spot:hover .content {
    display: block
}

.topic-province-map .content {
    position: relative;
    width: 230px;
    background: linear-gradient(to right, #3e88e3, #46cfe3);
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    display: none;
    z-index: 2
}

.topic-province-map .spotright {
    position: relative;
    left: 190px;
    top: -50px
}

.topic-province-map .spotright::before {
    content: url(../image/pointer2.png);
    position: absolute;
    top: 20px;
    left: -182px;
    width: 30px;
    height: 10px
}

.topic-province-map .spotleft {
    right: 380px;
    top: -50px
}

.topic-province-map .spotleft::after {
    content: url(../image/pointer1.png);
    position: absolute;
    top: 20px;
    right: 0;
    width: 30px;
    height: 10px
}

.topic-province-map .datacenter {
    position: absolute;
    right: 350px;
    bottom: 0
}

.topic-province-map .datacenter span {
    position: relative;
    left: 15px;
    top: -5px
}

.topic-province-map .map-pic {
    display: none
}

.topic-province-map .map-pic img {
    width: 50%
}

@media screen and (max-width:1200px) {
    .topic-province-map .map-jx-img {
        display: none
    }

    .topic-province-map .map-pic {
        text-align: center;
        display: block
    }
}

.topic-server-node {
    background: linear-gradient(to left, #2647bb, #1f89eb)
}

.topic-server-node h1 {
    color: #fff
}

.topic-server-node .content {
    background: #fff;
    box-shadow: 0 0 15px rgba(151, 148, 148, 0.2)
}

.topic-server-node .topic-btn1 {
    background: none;
    border: 1px solid #6fa0ea
}

.topic-server-node .topic-btn1:hover {
    box-shadow: 0 0 10px #6598e4;
    transition: all ease .5s
}

.topic-server-node .node-nav {
    width: 170px;
    box-shadow: 0 0 15px rgba(126, 122, 122, 0.2)
}

.topic-server-node .node-nav li {
    text-align: center;
    padding: 8px 0;
    border-right: 2px solid #fff
}

.topic-server-node .node-nav li:hover {
    cursor: pointer;
    background: linear-gradient(to right, #fff, #bad7f6)
}

.topic-server-node .node-nav .node-cur {
    background: linear-gradient(to right, #fff, #bad7f6);
    border-right: 3px solid #2649bc
}

.topic-server-node .node-map {
    padding: 0 30px
}

.topic-server-node .node-map>div {
    display: none
}

.topic-server-node .node-map .node-active {
    display: block
}

.topic-server-node .node-table {
    padding: 0 30px
}

.topic-server-node .gridtable {
    font-size: 14px;
    width: 255px;
    border-width: 1px;
    border-color: #aab6ce;
    border-collapse: collapse
}

.topic-server-node .gridtable th {
    border-width: 1px;
    height: 38px;
    color: #245dcb;
    border-style: solid;
    border-color: #aab6ce;
    background-color: #eef0f4
}

.topic-server-node .gridtable td {
    border-width: 1px;
    height: 38px;
    text-align: center;
    border-style: solid;
    border-color: #aab6ce
}

.topic-server-node2 .box {
    position: relative
}

.topic-server-node2 .nodemap {
    width: 100%;
    height: 570px;
    background: url(../image/map3.png) center no-repeat
}

.topic-server-node2 .nodemap .map-site {
    opacity: 1
}

.topic-server-node2 .site-circle-hover {
    display: none
}

.topic-server-node2 .map-site a {
    z-index: 2;
    padding: 5px 10px;
    box-shadow: 0 0 5px #cad7e6;
    border-radius: 5px;
    background-color: #fff
}

.topic-server-node2 .map-site:hover .site-circle-hover {
    display: inline-block
}

.topic-server-node2 .map-site:hover .site-circle {
    display: none
}

.topic-server-node2 .map-site:hover a {
    color: #fff;
    background-color: #009CFF;
    box-shadow: 0 0 5px #009CFF
}

.topic-server-node2 .site-right a {
    position: absolute;
    right: -40px;
    top: 5px
}

.topic-server-node2 .site-left a {
    position: absolute;
    left: -40px;
    top: 5px
}

.topic-server-node2 .site-bottom a {
    position: absolute;
    left: -30px;
    top: 30px
}

.topic-server-node2 .cloudpublic-btn {
    position: relative;
    top: -50px
}

.topic-server-node2 .cloudpublic-btn .btn {
    padding: 0 25px;
    background: linear-gradient(to right, #2787e0, #2bdeee);
    border: none
}

.topic-server-node2 .cloudpublic-btn .btn:hover {
    background: linear-gradient(to left, #2787e0, #2bdeee)
}

@media screen and (max-width:1200px) {
    .topic-server-node2 {
        height: 700px
    }

    .topic-server-node2 .nodemap {
        background: url(../image/map3-phone.png) center no-repeat;
        background-size: 100%
    }

    .topic-server-node2 .nodemap .map {
        display: none
    }
}

@media screen and (max-width:992px) {
    .topic-server-node2 {
        height: 660px
    }
}

@media screen and (max-width:768px) {
    .topic-server-node2 {
        height: 500px
    }

    .topic-server-node2 .tit1 {
        font-size: 25px
    }

    .topic-server-node2 .nodemap {
        height: 360px
    }
}

.topic-server-node2 .map {
    background: url(../image/050.jpg) center no-repeat;
    background-size: 100% 100%
}

.topic-server-node2 .map span {
    color: #ffffff
}

.topic-server-node2 .map h2 {
    color: #ffffff
}

.topic-server-node2 .map i {
    z-index: 10
}

.topic-server-node2 .map .content {
    margin-top: 50px
}

.topic-server-node2 .map .map-img {
    background-image: url(../image/map.png);
    min-height: 331px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px
}

.topic-server-node2 .map .map-img img {
    position: absolute;
    bottom: 25px;
    z-index: 1
}

.topic-server-node2 .map .site-right img {
    right: -38px;
    bottom: 10px
}

.topic-server-node2 .map .map-pic {
    display: none
}

.topic-server-node2 .map .map-line {
    background: url(../image/map-line2.png) no-repeat right top;
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transition: all 4s ease-in 0s;
    -moz-transition: all 4s ease 0s;
    -o-transition: all 4s ease 0s
}

.topic-server-node2 .map .wave {
    background: #ffffff;
    animation: circle-wave 2s infinite;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    top: -26px;
    right: -13px;
    opacity: 0
}

.topic-server-node2 .map span {
    position: relative
}

.topic-server-node2 .map .map-site-center {
    position: absolute;
    left: 930px;
    top: 120px
}

.topic-server-node2 .map .map-site-center img {
    z-index: 3
}

.topic-server-node2 .map .map-site {
    position: absolute;
    opacity: 0
}

.topic-server-node2 .map .active {
    opacity: 1;
    transition: all 1s linear 0s
}

.topic-server-node2 .map .active .map-line {
    width: 820px;
    height: 250px
}

.topic-server-node2 .map .site-my .wave {
    right: 20px
}

.topic-server-node2 .map .site-left img {
    bottom: 10px;
    left: -30px
}

.topic-server-node2 .map .site-left .wave {
    right: 18px;
    top: -12px
}

.topic-server-node2 .map .map-table {
    margin-top: 20px
}

.topic-server-node2 .map .row>div>p {
    background-color: #0c307c;
    padding: 15px 0;
    margin: 0;
    text-align: center;
    color: #abc1de
}

.topic-server-node2 .map .row>div {
    float: left;
    min-height: 1px;
    padding: 1px;
    background-color: #345597
}

@media screen and (max-width:1200px) {
    .topic-server-node2 .map .map-img {
        display: none
    }

    .topic-server-node2 .map .map-pic {
        display: block;
        width: 100%
    }

    .topic-server-node2 .map .map-pic .pic {
        width: 100%
    }
}

.topic-server-net {
    background-color: #032b5c
}

.topic-server-net .tit1 h1 {
    color: #fff
}

.topic-server-net .map-node {
    position: relative
}

.topic-server-net .text {
    color: #a5b1d5;
    text-align: center;
    padding: 0 90px;
    line-height: 30px;
    font-size: 16px
}

.topic-server-net .node-table {
    padding: 0 200px;
    position: absolute;
    bottom: 0;
    width: 100%
}

.topic-server-net .tbody2 {
    display: none
}

.topic-server-net .topic-gridtable {
    border-color: #2d5389
}

.topic-server-net .topic-gridtable th {
    border-color: #2d5389;
    color: #9cb3d1
}

.topic-server-net .topic-gridtable td {
    background-color: #0c3669;
    border-color: #2d5389;
    color: #9cb3d1
}

@media screen and (max-width:1200px) {
    .topic-server-net .node-table {
        padding: 0
    }

    .topic-server-net .text {
        padding: 0 5%
    }
}

@media screen and (max-width:768px) {
    .topic-server-net .tbody2 {
        display: block;
        margin: auto
    }

    .topic-server-net .tbody1 {
        display: none
    }
}

.topic-bandwith .tit1 {
    padding: 40px 0 0
}

.topic-bandwith .row {
    margin: 0 -30px
}

.topic-bandwith .col-2 {
    text-align: center;
    padding: 0 30px
}

.topic-bandwith .card {
    padding: 25px;
    border: 1px solid #d2d7e0;
    min-height: 280px;
    margin-top: 40px
}

.topic-bandwith .card:hover {
    cursor: pointer;
    border: none;
    box-shadow: 0 0 30px #f2f2f2
}

.topic-bandwith .topic-button {
    padding: 50px 0 60px;
    text-align: center
}

.topic-customer {
    background-color: #eff2f6;
    padding: 50px 0
}

.topic-customer .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.topic-customer .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .topic-customer .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .topic-customer .partner-table img {
        width: 60px
    }
}

.topic-truststep {
    background: url(../image/077.jpg) center no-repeat
}

.topic-truststep .tit1 h1 {
    color: #fff
}

.topic-truststep .tit1 p {
    padding: 15px 220px;
    color: #fff;
    font-size: 16px
}

.topic-truststep .ts-process img {
    width: 100%
}

.topic-truststep .ts-process p {
    font-size: 24px;
    line-height: 48px;
    text-align: center;
    color: #fff
}

@media screen and (max-width:1200px) {
    .topic-truststep .tit1 p {
        padding: 15px 20px
    }
}

.topic-protect {
    background-color: #eff2f6
}

.topic-protect .public-card1 {
    margin: 0 -25px
}

.topic-protect .col-8 {
    padding: 0 25px
}

.topic-protect .item {
    background: #fff;
    padding: 25px 30px;
    text-align: center
}

.topic-protect .item h3 {
    margin: 0;
    line-height: 48px
}

.topic-protect .item .line {
    width: 40px;
    background: #17cea3;
    height: 3px;
    border-radius: 3px;
    margin: 0 auto 15px
}

.topic-protect .item p {
    color: #333;
    text-align: center
}

.topic-protect .topic-button {
    margin-top: 30px
}

@media screen and (max-width:768px) {
    .topic-protect .public-card1 {
        margin: 0 -10px
    }

    .topic-protect .col-8 {
        padding: 0 10px
    }
}

.topic-dell-machine {
    background-color: #f2f6ff
}

.topic-dell-machine .tit1 p {
    color: #666;
    font-size: 18px
}

.topic-dell-machine .server-dell {
    width: 500px;
    margin: auto;
    height: 230px;
    overflow: hidden
}

.topic-dell-machine .server-dell img {
    box-shadow: 0 20px 50px #c3c7ce
}

@media screen and (max-width:768px) {
    .topic-dell-machine .server-dell {
        width: 100%;
        height: 180px
    }

    .topic-dell-machine .server-dell img {
        width: 70%;
        box-shadow: none
    }
}

@media screen and (max-width:480px) {
    .topic-dell-machine .server-dell {
        height: 150px
    }
}

.topic-dell-machine .histogram p {
    text-align: center;
    font-size: 18px;
    color: #333
}

@media screen and (max-width:480px) {
    .topic-dell-machine .histogram .col-8 {
        width: 50%
    }

    .topic-dell-machine .histogram .col-8 img {
        width: 80%
    }
}

.topic-solution .tit1 p {
    color: #666;
    padding: 15px 120px 0
}

.topic-solution .card {
    border-top: 3px solid #ddd;
    border-image: linear-gradient(to right, #1f89eb, #2647bb) 20 20;
    box-shadow: 0 0 10px rgba(2, 45, 134, 0.13);
    margin: 25px 0 20px
}

.topic-solution .card-title {
    padding: 0 30px
}

.topic-solution .card-title h2 {
    display: inline-block;
    font-size: 24px;
    margin: 7px 0
}

.topic-solution .card-title a {
    float: right;
    line-height: 50px;
    color: #999
}

.topic-solution .card-nav {
    width: 200px;
    background-image: -webkit-linear-gradient(to right, rgba(38, 71, 187, 0), rgba(31, 137, 235, 0.2));
    background-image: -o-linear-gradient(to right, rgba(38, 71, 187, 0), rgba(31, 137, 235, 0.2));
    background-image: -moz-linear-gradient(to right, rgba(38, 71, 187, 0), rgba(31, 137, 235, 0.2));
    background-image: linear-gradient(to right, rgba(38, 71, 187, 0), rgba(31, 137, 235, 0.3));
    padding: 10px 0
}

.topic-solution .card-nav li {
    font-size: 16px;
    margin-bottom: 10px;
    padding: 14px 0 14px 30px;
    color: #fff
}

.topic-solution .card-nav li:hover {
    cursor: pointer;
    background-image: -webkit-linear-gradient(to left, rgba(38, 71, 187, 0.2), rgba(31, 137, 235, 0.6));
    background-image: -o-linear-gradient(to left, rgba(38, 71, 187, 0.2), rgba(31, 137, 235, 0.6));
    background-image: -moz-linear-gradient(to left, rgba(38, 71, 187, 0.2), rgba(31, 137, 235, 0.6));
    background-image: linear-gradient(to left, rgba(38, 71, 187, 0.6), rgba(31, 137, 235, 0.6))
}

.topic-solution .card-nav .current {
    background-image: -webkit-linear-gradient(to left, rgba(38, 71, 187, 0.2), rgba(31, 137, 235, 0.6));
    background-image: -o-linear-gradient(to left, rgba(38, 71, 187, 0.2), rgba(31, 137, 235, 0.6));
    background-image: -moz-linear-gradient(to left, rgba(38, 71, 187, 0.2), rgba(31, 137, 235, 0.6));
    background-image: linear-gradient(to left, rgba(38, 71, 187, 0.6), rgba(31, 137, 235, 0.6));
    border-right: 3px solid #17cea3
}

.topic-solution .st-industry {
    background: url(../image/074.jpg) center no-repeat;
    background-size: 100% 100%
}

.topic-solution .st-technical {
    background: url(../image/075.jpg) center no-repeat;
    background-size: 100% 100%
}

.topic-solution .card-info {
    vertical-align: top
}

.topic-solution .card-info>div {
    display: none;
    padding: 25px 200px 0 78px
}

.topic-solution .card-info h2 {
    color: #fff;
    line-height: 80px;
    margin: 0
}

.topic-solution .card-info p {
    color: #fff;
    line-height: 30px
}

.topic-solution .card-info .btn {
    line-height: calc(32px);
    color: #fff;
    border: 1px solid rgba(238, 240, 244, 0.3);
    height: 32px;
    width: 132px;
    text-align: center;
    margin-top: 30px;
    background-color: unset;
    transition: border ease .5s
}

.topic-solution .card-info .btn:hover {
    border: 1px solid rgba(238, 240, 244, 0.8)
}

.topic-solution .card-info .active {
    display: block
}

@media screen and (max-width:1200px) {
    .topic-solution .tit1 p {
        line-height: 30px;
        padding: 15px 3%;
        font-size: 16px
    }

    .topic-solution .card-info>div {
        padding: 25px 20px 0 20px
    }
}

@media screen and (max-width:768px) {
    .topic-solution .card-info>div {
        padding: 10px 5px 0 5px
    }
}

@media screen and (max-width:768px) {
    .topic-solution .card-nav {
        width: 130px
    }

    .topic-solution .card-nav li {
        padding: 10px 0 10px 5px;
        font-size: 14px
    }

    .topic-solution .card-info h2 {
        line-height: 60px
    }

    .topic-solution .card-info .btn {
        margin-top: 10px;
        margin-bottom: 20px
    }
}

.topic-service .content {
    margin: 0 -20px
}

.topic-service .one-row {
    border-spacing: 20px 0;
    margin-bottom: 20px
}

.topic-service .card {
    position: relative;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    height: 210px;
    width: 380px
}

.topic-service .item-img1 {
    background: url(../image/0013.jpg) center no-repeat
}

.topic-service .item-img2 {
    background: url(../image/0021.jpg) center no-repeat
}

.topic-service .item-img3 {
    background: url(../image/0031.jpg) center no-repeat
}

.topic-service .item-img4 {
    background: url(../image/0041.jpg) center no-repeat
}

.topic-service .item-img5 {
    background: url(../image/005.jpg) center no-repeat
}

.topic-service .item-img6 {
    background: url(../image/006.jpg) center no-repeat
}

.topic-service .item-img {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    transition: .2s
}

.topic-service .center {
    position: relative;
    color: #fff;
    font-size: 18px;
    line-height: 36px
}

.topic-service .card:hover .item-img {
    transform: scale(1.1)
}

@media screen and (max-width:480px) {
    .topic-service .center {
        font-size: 12px
    }

    .topic-service .card {
        width: 30%;
        height: 150px
    }

    .topic-service .content {
        margin: 0 -10px
    }

    .topic-service .one-row {
        border-spacing: 10px 0
    }
}

.topic-operation {
    background: url(../image/072.jpg) center
}

.topic-operation .tit1 h1 {
    color: #fff
}

.topic-operation .tit1 p {
    color: #fff
}

.topic-operation .card-topline1 {
    background: #00cfc8
}

.topic-operation .row {
    margin: -10px
}

.topic-operation .col-7 {
    padding: 10px
}

.topic-operation .col-7:hover .card-topline1 {
    width: 100%;
    left: 0
}

.topic-operation .col-7:hover .inner-card {
    background-color: #fff
}

.topic-operation .inner-card {
    position: relative;
    background-color: #d5e8ff;
    border-radius: 5px;
    text-align: center;
    min-height: 170px
}

.topic-operation .inner-card img {
    margin: 20px 0 5px 0
}

.topic-operation .inner-card p {
    padding: 0 30px;
    line-height: 25px;
    text-align: center;
    color: #0b1734
}

@media screen and (max-width:768px) {
    .topic-operation .inner-card {
        min-height: 130px
    }
}

.topic-datacenter {
    background-color: #eff2f6
}

.topic-datacenter .tit1 p {
    font-size: 16px;
    color: #666
}

@media screen and (max-width:1200px) {
    .topic-datacenter img {
        width: 100%
    }
}

.topic-speed {
    background: url(../image/050.jpg) center no-repeat;
    background-size: 100% 100%
}

.topic-speed h1 {
    color: #fff
}

.topic-speed p {
    color: #fff
}

.topic-speed .page-anchor {
    display: none
}

.topic-speed .map-table {
    background-color: #1e4392
}

.topic-speed .one-row {
    width: 850px;
    margin: auto;
    padding: 20px 0
}

.topic-speed .map-img {
    position: relative;
    overflow: hidden;
    margin-bottom: 50px
}

.topic-speed .map-img img {
    position: absolute;
    bottom: 25px;
    z-index: 1
}

.topic-speed .map-pic {
    display: none
}

.topic-speed .map-line {
    position: absolute;
    width: 0;
    height: 0;
    right: -30px;
    bottom: -68px;
    -webkit-transition: all 4s ease-in 0s;
    -moz-transition: all 4s ease 0s;
    -o-transition: all 4s ease 0s
}

.topic-speed .wave {
    background: #ffffff;
    animation: circle-wave 2s infinite;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    top: -30px;
    right: -16px;
    opacity: 0
}

.topic-speed span {
    position: relative
}

.topic-speed .map-site-center {
    position: absolute
}

.topic-speed .map-site-center span {
    color: #fff
}

.topic-speed .map-site-center img {
    z-index: 3
}

.topic-speed .map-site {
    position: absolute;
    opacity: 0
}

.topic-speed .map-site span {
    color: #fff
}

.topic-speed .active {
    opacity: 1;
    transition: all 1s linear 0s
}

.topic-speed .active .map-line {
    width: 820px;
    height: 250px
}

.topic-speed .site-my .wave {
    right: 20px
}

.topic-speed .site-left img {
    bottom: 10px;
    left: -30px
}

.topic-speed .site-left .wave {
    right: 12px;
    top: -14px
}

.topic-speed .map-pic {
    display: none
}

.topic-speed .band-nav {
    width: 120px
}

.topic-speed .band-nav h1 {
    font-size: 16px;
    background-color: #072667;
    padding: 10px 25px
}

.topic-speed .band-nav h1:hover {
    cursor: pointer
}

.topic-speed .speed-nav {
    position: relative;
    background: #333;
    border: 1px solid #1e6dd9;
    color: #00cfc8
}

.topic-speed .band-table {
    padding-left: 50px
}

.topic-speed table.gridtable {
    font-size: 14px;
    color: #abc1de;
    width: 100%;
    border-width: 1px;
    border-color: #2d5389;
    border-collapse: collapse
}

.topic-speed table.gridtable th {
    border-width: 1px;
    height: 30px;
    border-style: solid;
    border-color: #2d5389;
    background-color: #0e3077
}

.topic-speed table.gridtable td {
    border-width: 1px;
    height: 30px;
    text-align: center;
    border-style: solid;
    border-color: #2d5389
}

.topic-speed .band-nav {
    position: relative
}

.topic-speed .band-nav .speed-nav {
    border: 1px solid #1e6dd9
}

.topic-speed .band-nav .speed-nav span {
    display: block;
    width: 0;
    height: 0;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent #1e6dd9;
    position: absolute;
    top: 35%;
    left: 105%;
    margin-left: -10px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg)
}

.topic-speed .band-nav .speed-nav em {
    display: block;
    width: 0;
    height: 0;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent #072667;
    position: absolute;
    top: 2px;
    left: -10px
}

@media screen and (max-width:1200px) {
    .topic-speed .map-img {
        display: none
    }

    .topic-speed .map-pic {
        display: block
    }

    .topic-speed .map-pic img {
        width: 100%
    }

    .topic-speed .map-pic .pic {
        width: 100%
    }

    .topic-speed .map-table .one-row {
        width: 100%
    }

    .topic-speed .map-table .one-row>* {
        display: table;
        width: 100%
    }

    .topic-speed .map-table .band-nav {
        width: 100%
    }

    .topic-speed .map-table .band-nav h1 {
        display: table-cell
    }

    .topic-speed .band-table {
        padding-left: 0
    }

    .topic-speed .band-nav .speed-nav span {
        display: block;
        width: 0;
        height: 0;
        border-width: 0 10px 10px;
        border-style: solid;
        border-color: transparent transparent #1e6dd9;
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -10px;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg)
    }
}

section.topic-stack .swiper-slide img {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15)
}

section.topic-stack .stack-nav .one-row {
    position: relative;
    width: 84%;
    margin-left: 105px;
    text-align: center
}

section.topic-stack .stack-nav .one-row>div {
    position: absolute
}

section.topic-stack #stack-pic {
    margin-top: 60px
}

section.topic-stack #stack-pic .swiper-pagination {
    width: 100%;
    top: -60px
}

section.topic-stack #stack-pic .swiper-container {
    z-index: 12
}

section.topic-stack #stack-pic .swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: rgba(1, 1, 1, 0);
    height: 30px;
    width: 100px
}

section.topic-stack #stack-pic .swiper-pagination-bullets .swiper-pagination-bullet-active {
    border-bottom: 3px solid #ef2a3a
}

section.topic-stack .detail {
    background: #e7edf5;
    padding: 20px 0;
    margin-bottom: 40px
}

@media screen and (max-width:1300px) {
    section.topic-stack #stack-pic {
        width: 100%
    }

    section.topic-stack #stack-pic .swiper-slide {
        width: 100%
    }

    section.topic-stack #stack-pic .swiper-slide img {
        margin: auto
    }
}

@media screen and (max-width:992px) {
    section.topic-stack #stack-pic .swiper-slide {
        height: 100%
    }

    section.topic-stack #stack-pic .swiper-slide img {
        width: 80%
    }
}

@media screen and (max-width:480px) {
    section.topic-stack #stack-pic .swiper-slide img {
        width: 100%
    }
}

section.topic-hk-brand .common-title {
    display: none
}

section.topic-hk-brand .wrapper>.one-row {
    margin-left: -25px
}

section.topic-hk-brand .card {
    border-radius: 8px
}

section.topic-hk-brand .card .brand-title {
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #e5e5e5
}

section.topic-hk-brand .card>div {
    height: 325px;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background-color: #fff
}

section.topic-hk-brand .card .item {
    overflow: hidden
}

section.topic-hk-brand .card .item>div {
    padding: 30px 20px 0;
    min-height: 270px
}

section.topic-hk-brand .card .item .model {
    display: block;
    color: #fff;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center
}

section.topic-hk-brand .card .item p {
    font-size: 16px;
    text-align: center
}

section.topic-hk-brand .card .item .title {
    color: #999;
    margin-top: 20px
}

section.topic-hk-brand .card .item .line {
    height: 1px;
    border-bottom: 1px dashed #e5e5e5;
    margin: 15px 0
}

section.topic-hk-brand .card .item:not(:last-child) {
    border-right: 1px solid #e5e5e5
}

section.topic-hk-brand .card .model1 {
    background: linear-gradient(to right, #ff977c, #ff694e)
}

section.topic-hk-brand .card .model2 {
    background: linear-gradient(to right, #2397f7, #3674e4)
}

section.topic-hk-brand .card .model3 {
    background: linear-gradient(to right, #ecc333, #f29720)
}

section.topic-hk-brand .card .model4 {
    background: linear-gradient(to right, #2dd67f, #06b07e)
}

.topic-contrast_1 {
    padding: 30px 0
}

.topic-contrast_1 .topic-title2 h2 {
    margin: 40px 0
}

.topic-contrast_1 .content {
    position: relative;
    padding: 67px 0 53px
}

.topic-contrast_1 h5 {
    color: #fff;
    margin: 0;
    font-size: 16px;
    border-bottom: 1px solid #4a70d5;
    padding: 10px 10px 0
}

.topic-contrast_1 red {
    font-size: 16px;
    font-weight: bold
}

.topic-contrast_1 p {
    margin: 0
}

.topic-contrast_1 .scene {
    height: 70px
}

.topic-contrast_1 .number {
    height: 42px
}

.topic-contrast_1 .effect {
    height: 116px
}

.topic-contrast_1 .cost {
    height: 42px
}

.topic-contrast_1 .advise {
    height: 47px
}

.topic-contrast_1 .t-advise {
    height: 100px
}

.topic-contrast_1 .floor-tit {
    border-radius: 10px;
    background: linear-gradient(to right, #1846cf, #1cafe5);
    padding: 0 20px
}

.topic-contrast_1 .f-card {
    width: 150px
}

.topic-contrast_1 .top-info {
    position: absolute;
    width: 1012px;
    top: 0;
    left: 148px
}

.topic-contrast_1 .row {
    margin: 0 -8px
}

.topic-contrast_1 .col-8 {
    padding: 0 8px
}

.topic-contrast_1 .top-card {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    border-top: 3px solid #1cafe5;
    background: #fff;
    padding: 0 20px 0 15px
}

.topic-contrast_1 .top-card b {
    color: #1cafe5
}

.topic-contrast_1 .top-card>div:not(:first-child) {
    padding-top: 10px;
    border-top: 1px solid #dbdfe8
}

.topic-contrast_1 .cloud-card {
    position: relative;
    border-top: 3px solid #2056f6
}

.topic-contrast_1 .cloud-card b {
    color: #2056f6
}

.topic-contrast_1 .cloud-card::after {
    content: url(../image/recommend.png);
    position: absolute;
    top: 0;
    right: 20px
}

.topic-contrast_1 .top-tit {
    height: 64px;
    line-height: 64px
}

.topic-contrast_1 .topic-btn2 {
    margin-top: 30px
}

@media screen and (max-width:1200px) {
    .topic-contrast_1 .content {
        padding: 0
    }

    .topic-contrast_1 .top-info {
        position: relative;
        width: auto;
        left: 0
    }
}

.topic-discount {
    padding-bottom: 60px
}

.topic-discount .row {
    margin: 0 -16px
}

.topic-discount .qq .topic-btn1 {
    background-color: #f49138;
    font-size: 14px;
    width: unset;
    margin: 0
}

.topic-discount .col-8,
.topic-discount .col-2 {
    padding: 0 16px 20px
}

.topic-discount .col-8>div,
.topic-discount .col-2>div {
    background: #fff;
    border: 1px solid #e1e6f0
}

.topic-discount .tit {
    background: url(../image/082.jpg) center no-repeat;
    background-size: 100%;
    padding: 15px 25px
}

.topic-discount h5,
.topic-discount span {
    color: #fff;
    line-height: 30px
}

.topic-discount h5 {
    font-weight: bold;
    font-size: 18px;
    margin: 0
}

.topic-discount h4 {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    line-height: 50px
}

.topic-discount span {
    font-size: 16px
}

.topic-discount .data {
    padding: 15px 25px
}

.topic-discount .data p {
    color: #333;
    font-size: 14px;
    line-height: 30px;
    margin: 0
}

.topic-discount .data p::before {
    content: "·";
    display: inline-block;
    color: #f49138;
    vertical-align: middle;
    font-size: 36px;
    width: 15px
}

.topic-discount .one-row {
    background: #fff;
    border: 1px solid #e1e6f0;
    padding: 15px 25px
}

.topic-discount .one-row b {
    color: #2e37e1
}

.topic-discount .one-row .qq {
    padding: 0;
    text-align: right
}

@media screen and (max-width:768px) {
    .topic-discount .row {
        margin: 0
    }

    .topic-discount .col-8 {
        padding: 0 0 20px
    }

    .topic-discount .one-row>* {
        display: block
    }
}

.topic-free-exp .data-tit {
    color: #18458f;
    font-weight: bold;
    font-size: 18px
}

.topic-free-exp .text {
    width: 100%
}

.topic-free-exp .exp-box {
    box-shadow: 0 20px 20px #e7eff8
}

.topic-free-exp .exp-box img {
    margin-right: 20px
}

.topic-free-exp .active-content {
    background: #5f90ff;
    padding: 20px;
    border: 1px solid #5f90ff
}

.topic-free-exp .active-content .item {
    border-left: 1px solid #78a2ff
}

.topic-free-exp .active-content .tit {
    color: #fff;
    font-weight: bold;
    font-size: 18px
}

.topic-free-exp .active-content .item>p {
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin: 0;
    line-height: 30px
}

.topic-free-exp .active-content .item>:first-child {
    color: #5deeff
}

.topic-free-exp .active-content .one-row {
    margin-top: 10px
}

.topic-free-exp .active-object {
    background: #e5f1ff;
    padding: 20px;
    border: 1px solid #5f90ff
}

.topic-free-exp .active-object .info {
    width: 100%
}

.topic-free-exp .active-object .topic-btn1 {
    margin: 0;
    width: auto
}

.topic-free-exp .active-object .one-row {
    margin-top: 10px
}

.topic-free-exp .active-object .info>p {
    font-size: 16px;
    margin: 0;
    line-height: 30px
}

.topic-free-exp .active-object .info>:last-child {
    color: #5f90ff
}

.topic-free-exp .item-configure {
    position: relative;
    border: 1px solid #5f90ff;
    margin-top: 45px;
    padding: 0 15px
}

.topic-free-exp .item-configure .title {
    border: 1px solid #5f90ff;
    padding: 10px 20px;
    display: table;
    margin: -25px auto 20px;
    background: #fff;
    text-align: center;
    min-width: 470px
}

.topic-free-exp .item-configure .title span {
    position: relative;
    color: #333;
    font-weight: bold;
    font-size: 18px
}

.topic-free-exp .item-configure .title span::after {
    content: "";
    height: 1px;
    width: 150px;
    background: #dcdcdc;
    position: absolute;
    display: block;
    top: 50%;
    left: 110%
}

.topic-free-exp .item-configure .title span::before {
    content: "";
    height: 1px;
    width: 150px;
    background: #dcdcdc;
    position: absolute;
    display: block;
    top: 50%;
    right: 110%
}

.topic-free-exp .item-configure .title p {
    text-align: center;
    margin: 0
}

.topic-free-exp .item-configure .col-3 {
    padding: 0 10px
}

.topic-free-exp .cfg-item {
    border: 1px solid #cddaea;
    border-top: 3px solid #cddaea
}

.topic-free-exp .cfg-item p {
    margin: 0
}

.topic-free-exp .cfg-item .tit {
    background: #f1f7ff;
    width: 200px;
    padding: 10px 20px
}

.topic-free-exp .cfg-item .item {
    text-align: center
}

.topic-free-exp .cfg-item .item p {
    text-align: center;
    color: #999
}

.topic-free-exp .cfg-item .item:not(:last-child) {
    border-right: 1px solid #cddaea
}

@media screen and (max-width:1200px) {
    .topic-free-exp .col-3 {
        width: 100%
    }
}

@media screen and (max-width:768px) {
    .topic-free-exp .item-configure>.title {
        min-width: auto
    }

    .topic-free-exp .item-configure>.title::after,
    .topic-free-exp .item-configure>.title::before {
        display: none
    }
}

@media screen and (max-width:480px) {
    .topic-free-exp .item-configure {
        padding: 0
    }

    .topic-free-exp .exp-item>.col-2 {
        width: 33.3%
    }
}

.topic-flag-cn {
    background: url(../image/red-bg.jpg)
}

.topic-flag-cn .tit1 h1 {
    color: #fff
}

.topic-active-gift .item {
    text-align: center;
    background-color: #fff4de
}

.topic-active-gift .tit {
    height: 50px;
    margin-top: 15px
}

.topic-active-gift span {
    background: #fff;
    padding: 5px 15px;
    min-width: 190px;
    text-align: center;
    border-radius: 15px;
    font-weight: bold;
    color: #fa3d33;
    font-size: 16px;
    line-height: 20px;
    display: inline-block
}

.topic-active-gift span:nth-child(5) {
    padding: 0 15px
}

.topic-active-gift .row {
    margin: 0 -3px
}

.topic-active-gift .col-7,
.topic-active-gift .col-1 {
    padding: 3px
}

.topic-active-gift .title {
    position: relative;
    background: url(../image/n001.png) center no-repeat;
    font-size: 22px;
    color: #ffebb2;
    text-align: center;
    top: -5px
}

.topic-active-gift .goods {
    height: 170px;
    position: relative
}

.topic-active-gift .goods::after {
    content: url(../image/song.png);
    position: absolute;
    right: 0;
    top: 0
}

.topic-active-gift .info {
    height: 110px;
    color: #4d0c0e;
    font-size: 14px
}

.topic-active-gift .info b {
    font-size: 16px
}

.topic-active-gift .info p {
    text-align: center
}

.topic-show-adv .some-row {
    border-collapse: collapse
}

.topic-show-adv .some-row>div>div {
    border: 1px solid #e5e5e5;
    text-align: center;
    width: 33.33%;
    background: #f7f7f7
}

.topic-show-adv h4 {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    margin: 15px 0 10px
}

.topic-show-adv p {
    text-align: center
}

.topic-show-adv .item {
    padding: 25px 0
}

.topic-show-adv .item:hover {
    background: #fff;
    cursor: pointer
}

.topic-show-adv .icon {
    height: 50px;
    line-height: 50px
}

.topic-show-adv .icon img {
    vertical-align: middle
}

@media screen and (max-width:768px) {
    .topic-show-adv img {
        width: 20%
    }

    .topic-show-adv .item {
        padding: 10px 0
    }
}

.topic-atc-illustration {
    padding-bottom: 55px;
    background: #121976
}

.topic-atc-illustration .content {
    border: 1px solid #2d4480;
    padding: 30px 100px;
    color: #fff;
    background: url(../image/0015.png) 90% no-repeat
}

.topic-showadv {
    min-height: 400px
}

.topic-showadv h3 {
    font-size: 48px;
    margin: 20px 0
}

.topic-showadv h4 {
    font-size: 24px;
    margin: 10px 0
}

.topic-showadv p {
    font-size: 18px;
    line-height: 36px;
    color: #333
}

.topic-showadv .one-row {
    height: 100%
}

.topic-showadv .one-row>div {
    width: 50%
}

.topic-showadv .wrapper {
    height: 100%
}

.topic-showadv.part1 {
    padding: 0;
    background-color: #f6f7fb;
    height: 560px
}

.topic-showadv.part1 .wrapper {
    background: url(../image/bg12.jpg) bottom right no-repeat
}

.topic-showadv.part2 {
    height: 710px;
    padding: 0;
    background: url(../image/bg21.jpg) center no-repeat
}

.topic-showadv.part2 .wrapper {
    background: url(../image/bg2-2.png) left no-repeat
}

.topic-showadv.part3 {
    height: 640px;
    background: url(../image/bg31.jpg) center no-repeat
}

.topic-showadv.part3 p,
.topic-showadv.part3 h3 {
    color: #fff
}

.topic-showadv.part4 {
    height: 820px;
    background: url(../image/bg4.jpg) center no-repeat
}

.topic-showadv.part4 .one-row>div:first-child {
    width: 60%
}

.topic-server-entry {
    background: #f5f5f5;
    padding: 20px 0 30px
}

.topic-server-entry .float-row {
    margin: 0 -25px
}

.topic-server-entry .float-item {
    cursor: pointer;
    width: 25%;
    padding: 20px 25px
}

.topic-server-entry .float-content {
    text-align: center;
    padding: 30px;
    background: #fff
}

.topic-server-entry .float-content:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: ease .5s
}

.topic-server-entry .float-content:hover b {
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: text 1.5s infinite
}

.topic-server-entry b {
    color: #3b424d;
    display: block;
    text-align: center;
    font-size: 20px;
    margin: 20px 0
}

.topic-server-entry p {
    text-align: center;
    color: #3b424d;
    font-size: 18px
}

.topic-server-entry .btn {
    background: linear-gradient(to right, #2397f7, #3674e4);
    border: transparent;
    margin-top: 20px
}

.topic-map-overseas .map-overseas-img {
    position: relative;
    height: 600px;
    background: url(../image/map5.png) center no-repeat
}

.topic-map-overseas .point {
    position: absolute
}

.topic-map-overseas .point span {
    color: #333
}

.topic-map-overseas .content {
    position: relative;
    z-index: 2;
    bottom: -15px;
    right: 10px
}

.topic-map-overseas .spotright {
    bottom: 5px;
    right: -15px
}

.topic-map-overseas .spotleft {
    bottom: 5px;
    right: 35px
}

.topic-map-overseas .point:hover .map-spot1 {
    background: #17cea3
}

.topic-map-overseas .point:hover span {
    color: #333
}

.topic-map-overseas .point:hover .map-spot1::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: rgba(77, 224, 190, 0.2);
    animation: flash infinite linear 1s
}

.topic-map-overseas .point:hover .map-spot1::after {
    background: rgba(71, 219, 185, 0.2)
}

.topic-idc-flow_1 {
    padding: 0 0 50px
}

.topic-idc-flow_1 .title01 {
    margin-bottom: 90px
}

.topic-idc-flow_1 .item {
    position: relative;
    width: 25%;
    padding: 60px 20px;
    border: 1px dashed #00a0e9;
    margin-right: -1px;
    margin-top: -1px
}

.topic-idc-flow_1 .item>div {
    line-height: 69px;
    vertical-align: middle;
    text-align: center
}

.topic-idc-flow_1 .item img {
    vertical-align: middle
}

.topic-idc-flow_1 span {
    display: block;
    text-align: center
}

.topic-idc-flow_1 .btn {
    background: #3f61fe;
    border: transparent;
    margin-top: 60px
}

@keyframes arrow-r {
    0% {
        right: 20px
    }

    100% {
        right: 10px
    }
}

@keyframes arrow-l {
    0% {
        left: 20px
    }

    100% {
        left: 10px
    }
}

@keyframes arrow-r {
    0% {
        right: 20px
    }

    100% {
        right: 10px
    }
}

@keyframes arrow-b {
    0% {
        bottom: 20px
    }

    100% {
        bottom: 10px
    }
}

.topic-idc-flow_1 .right::after {
    content: url(../image/0025.png);
    position: absolute;
    right: 20px;
    top: 46%;
    animation: arrow-r ease 1s infinite
}

.topic-idc-flow_1 .bottom::after {
    content: url(../image/0025.png);
    transform: rotate(90deg);
    position: absolute;
    bottom: 20px;
    left: 46%;
    animation: arrow-b ease 1s infinite
}

.topic-idc-flow_1 .left::after {
    content: url(../image/0025.png);
    transform: rotate(180deg);
    position: absolute;
    left: 20px;
    top: 46%;
    animation: arrow-l ease 1s infinite
}

.topic-ddos section.industry .part1 {
    background: #f6f8fb;
    border-bottom: 1px solid #ddd
}

.topic-ddos section.industry .part2 {
    background: #ebeff4;
    padding: 70px 0
}

.topic-ddos section.industry .part2 .item {
    display: none;
    background: #fff;
    margin: auto;
    width: 880px;
    border-radius: 8px;
    box-shadow: 0 0 20px #ccc;
    overflow: hidden
}

.topic-ddos section.industry .part2 .item.current {
    display: block
}

.topic-ddos section.industry .part2 .item .txt {
    padding-left: 40px;
    padding-right: 20px
}

.topic-ddos section.industry .part2 .item .txt h3 {
    font-weight: bold;
    font-size: 18px;
    padding-left: 40px;
    position: relative;
    margin-top: 0
}

.topic-ddos section.industry .part2 .item .txt h3 img {
    position: absolute;
    left: 0
}

.topic-ddos section.industry .part2 .item .bg {
    position: relative;
    overflow: hidden !important
}

.topic-ddos section.industry .part2 .item .bg .mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 160px;
    background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff)
}

.topic-ddos section.industry .part2 .item .bg img {
    display: block
}

@media screen and (max-width:992px) {
    .topic-ddos section.industry .part2 {
        padding: 40px 0
    }

    .topic-ddos section.industry .part2 .item {
        width: 100%
    }
}

@media screen and (max-width:768px) {
    .topic-ddos section.industry .part2 {
        padding-top: 20px
    }

    .topic-ddos section.industry .part2 .item {
        position: relative;
        width: 100%
    }

    .topic-ddos section.industry .part2 .item .txt {
        display: block;
        margin-top: 200px;
        padding-right: 30px;
        padding-left: 30px;
        padding-bottom: 40px;
        background: #fff
    }

    .topic-ddos section.industry .part2 .item .bg {
        outline: none;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 200px;
        border-bottom: #fff 2px solid
    }

    .topic-ddos section.industry .part2 .item .bg img {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1
    }

    .topic-ddos section.industry .part2 .item .bg .mask {
        width: 101%;
        height: 160px;
        top: auto;
        right: 0;
        bottom: 0;
        z-index: 2;
        background: -webkit-linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
        background: -o-linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
        background: -moz-linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
        background: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff)
    }
}

.topic-ddos section.features {
    background: url(../image/022.png) no-repeat center;
    background-size: cover;
    color: #fff;
    padding-bottom: 220px
}

.topic-ddos section.features .tit1 h1 {
    color: #fff
}

.topic-ddos section.features .table-wrap-wrap {
    margin: -20px
}

.topic-ddos section.features .table-wrap-wrap>table {
    border-collapse: separate;
    border-spacing: 20px;
    width: 100%
}

.topic-ddos section.features .table-wrap-wrap .table-wrap {
    margin: -20px
}

.topic-ddos section.features .table-wrap-wrap .table-wrap .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.topic-ddos section.features .table-wrap-wrap .table-wrap .one-row>div {
    background: -webkit-linear-gradient(-20deg, rgba(31, 41, 65, 0.4), rgba(52, 106, 187, 0.4));
    background: -o-linear-gradient(-20deg, rgba(31, 41, 65, 0.4), rgba(52, 106, 187, 0.4));
    background: -moz-linear-gradient(-20deg, rgba(31, 41, 65, 0.4), rgba(52, 106, 187, 0.4));
    background: linear-gradient(-20deg, rgba(31, 41, 65, 0.4), rgba(52, 106, 187, 0.4));
    height: 115px
}

.topic-ddos section.features .table-wrap-wrap .table-wrap .one-row>div .item {
    width: 133px;
    margin: auto;
    text-align: center
}

@media screen and (max-width:992px) {
    .topic-ddos section.features .table-wrap-wrap>table td {
        display: block
    }

    .topic-ddos section.features .table-wrap-wrap>table td:first-child {
        padding-bottom: 20px
    }
}

@media screen and (max-width:480px) {
    .topic-ddos section.features .table-wrap-wrap>table td:first-child {
        padding-bottom: 0
    }

    .topic-ddos section.features .table-wrap-wrap .table-wrap .one-row>div {
        display: block;
        height: auto;
        padding: 20px 0;
        margin-bottom: 20px
    }

    .topic-ddos section.features .table-wrap-wrap .table-wrap .one-row>div .item {
        width: 133px;
        margin: auto;
        text-align: center;
        white-space: nowrap
    }
}

.topic-ddos section.advantage {
    background: url(../image/020.png) no-repeat bottom, #f5f7f9;
    background-size: cover;
    position: relative;
    padding-bottom: 60px;
    padding-top: 60px
}

@media screen and (max-width:705px) {
    .topic-ddos section.advantage {
        padding-top: 80px
    }
}

@media screen and (max-width:489px) {
    .topic-ddos section.advantage {
        padding-top: 100px
    }
}

.topic-ddos section.advantage .method {
    position: absolute;
    top: -200px;
    width: 100%
}

.topic-ddos section.advantage .method .tit1 p {
    width: 80%
}

@media screen and (max-width:1080px) {
    .topic-ddos section.advantage .method .tit1 p {
        width: 100%;
        font-size: 14px
    }
}

.topic-ddos section.advantage .method .wrapper .method-wrap {
    position: relative;
    background: #f5f7f9;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 0 60px;
    height: 280px
}

@media screen and (max-width:1080px) {
    .topic-ddos section.advantage .method .wrapper .method-wrap {
        padding: 0 10px
    }
}

.topic-ddos section.advantage .method .wrapper .method-wrap .mask {
    padding: 0 20px;
    box-sizing: content-box;
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: -20px;
    left: -20px;
    background: #f5f7f9
}

.topic-ddos section.advantage .method .wrapper .method-wrap .mask1 {
    padding: 0 20px;
    box-sizing: content-box;
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: -20px;
    left: -20px;
    background: #f5f7f9;
    height: 100px;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), #f5f7f9);
    background: -o-linear-gradient(rgba(255, 255, 255, 0), #f5f7f9);
    background: -moz-linear-gradient(rgba(255, 255, 255, 0), #f5f7f9);
    background: linear-gradient(rgba(255, 255, 255, 0), #f5f7f9)
}

.topic-ddos section.advantage .method .wrapper .method-wrap .mask2 {
    padding: 0 20px;
    box-sizing: content-box;
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: -20px;
    left: -20px;
    background: #f5f7f9
}

.topic-ddos section.advantage .table-wrap {
    margin: -125px 0 -20px 0
}

.topic-ddos section.advantage .table-wrap .one-row {
    border-collapse: separate;
    border-spacing: 20px
}

.topic-ddos section.advantage .table-wrap .one-row>div {
    z-index: 2;
    border: 1px solid #ddd;
    background: #fff;
    text-align: center;
    vertical-align: top;
    padding: 20px;
    width: 33.33%;
    position: relative;
    padding-bottom: 66px
}

.topic-ddos section.advantage .table-wrap .one-row>div h3 {
    font-weight: bold;
    font-size: 18px
}

.topic-ddos section.advantage .table-wrap .one-row>div p {
    color: #999
}

.topic-ddos section.advantage .table-wrap .one-row>div ul li {
    line-height: 28px;
    border-bottom: #ddd dashed 1px;
    text-align: left
}

.topic-ddos section.advantage .table-wrap .one-row>div ul li img {
    margin-right: 2px
}

.topic-ddos section.advantage .table-wrap .one-row>div ul li span {
    float: right;
    color: #ef2a3a
}

.topic-ddos section.advantage .table-wrap .one-row>div .btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
    width: 120px
}

@media screen and (max-width:1080px) {
    .topic-ddos section.advantage .table-wrap .one-row {
        border-spacing: 10px
    }

    .topic-ddos section.advantage .table-wrap .one-row>div {
        padding: 10px 10px 66px 10px
    }

    .topic-ddos section.advantage .table-wrap .one-row>div ul li span {
        float: none;
        display: block;
        line-height: 20px
    }

    .topic-ddos section.advantage .table-wrap .one-row>div h3 {
        margin: 10px 0
    }
}

@media screen and (max-width:768px) {
    .topic-ddos section.advantage .table-wrap .one-row>div {
        display: block;
        width: 100%;
        margin-bottom: 20px
    }

    .topic-ddos section.advantage .table-wrap .one-row>div ul li span {
        float: right;
        line-height: 28px
    }
}

.topic-ddos-server {
    padding: 40px 0
}

.topic-ddos-server .server-tit {
    background: url(../image/c001.jpg) no-repeat;
    background-size: 100% 100%;
    max-width: 220px;
    width: 220px
}

.topic-ddos-server .server-tit h5 {
    color: #fff;
    font: 24px bold;
    text-align: center
}

.topic-ddos-server .server-tit-md {
    display: none;
    background-color: #f2f4f9
}

.topic-ddos-server .server-card {
    margin-bottom: 30px
}

.topic-ddos-server .server-btn {
    width: 270px;
    padding-top: 20px
}

.topic-ddos-server .server-table {
    text-align: center;
    border: 1px solid #c6d1dd
}

.topic-ddos-server .server-table span {
    display: block;
    margin: 10px 0
}

.topic-ddos-server .server-table p {
    text-align: center;
    font-weight: bold;
    color: #333
}

.topic-ddos-server .server-tr {
    padding: 10px 0
}

.topic-ddos-server .server-tr h4 {
    font-size: 18px;
    text-align: center;
    width: 100%;
    margin: 0
}

.topic-ddos-server .server-tr:hover {
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2)
}

.topic-ddos-server .server-data {
    border-right: 1px solid #c6d1dd;
    padding: 10px
}

.topic-ddos-server .server-more {
    width: 100%;
    padding: 12px 0;
    background-color: #f2f4f9;
    text-align: center
}

.topic-ddos-server .server-more .link {
    color: #ef2a3a;
    font-weight: bold
}

.topic-ddos-server .server-table .server-tr:not(:last-child) {
    border-bottom: 1px solid #c6d1dd
}

@media screen and (max-width:992px) {
    .topic-ddos-server .server-tit {
        display: none
    }

    .topic-ddos-server .server-tit-md {
        display: block
    }
}

@media screen and (max-width:768px) {
    .topic-ddos-server .server-btn {
        width: 150px
    }
}

@media screen and (max-width:576px) {
    .topic-ddos-server .server-tr {
        display: block
    }

    .topic-ddos-server .server-tr>div {
        display: block;
        width: 100%
    }

    .topic-ddos-server .server-data {
        border-right: none;
        border-bottom: 1px solid #c6d1dd
    }

    .topic-ddos-server .server-btn {
        width: 100%
    }
}

.topic-largebd section.intro {
    background-size: cover;
    padding: 60px 0
}

.topic-largebd section.intro .intro-table {
    margin: -6px
}

.topic-largebd section.intro .intro-table .one-row {
    position: relative;
    border-collapse: separate;
    border-spacing: 6px
}

.topic-largebd section.intro .intro-table .one-row h1 {
    padding: 0 53px;
    font-size: 30px;
    margin: 0
}

@media screen and (max-width:768px) {
    .topic-largebd section.intro .intro-table .one-row h1 {
        font-size: 28px
    }
}

@media screen and (max-width:522px) {
    .topic-largebd section.intro .intro-table .one-row h1 {
        font-size: 26px
    }

    .topic-largebd section.intro .intro-table .one-row h1 span {
        display: block;
        font-size: 18px;
        color: #999
    }
}

@media screen and (max-width:480px) {
    .topic-largebd section.intro .intro-table .one-row h1 {
        padding: 0 24px
    }
}

@media screen and (max-width:1200px) {
    .topic-largebd section.intro .intro-table img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        opacity: .2
    }
}

.topic-largebd section.server {
    background: url(../image/019.png) repeat, #f3f5f9;
    padding-bottom: 60px;
    padding-top: 60px
}

.topic-largebd section.server gap {
    width: 20px
}

.topic-largebd section.server .server-table {
    margin: -70px
}

.topic-largebd section.server .server-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 70px
}

.topic-largebd section.server .server-table table td .item {
    background: #fff;
    border-radius: 6px;
    text-align: center;
    padding: 20px;
    margin-bottom: -20px
}

.topic-largebd section.server .server-table table td .item:hover {
    box-shadow: 0 0 16px #dcdcdc
}

.topic-largebd section.server .server-table table td .item h3 {
    text-align: center;
    font-size: 18px;
    font-weight: bold
}

.topic-largebd section.server .server-table table td .item p {
    width: 220px;
    height: 110px
}

.topic-largebd section.server .server-table table td .item .btn {
    margin-bottom: 30px
}

@media screen and (max-width:1200px) {
    .topic-largebd section.server .server-table {
        margin: -40px
    }

    .topic-largebd section.server .server-table table {
        border-spacing: 40px
    }

    .topic-largebd section.server .server-table table td .item {
        margin-bottom: -10px
    }
}

@media screen and (max-width:992px) {
    .topic-largebd section.server .server-table {
        margin: -20px
    }

    .topic-largebd section.server .server-table table {
        border-spacing: 20px
    }

    .topic-largebd section.server .server-table table td .item {
        margin-bottom: 0
    }

    .topic-largebd section.server .server-table table td .item p {
        width: 180px;
        height: 140px
    }
}

@media screen and (max-width:768px) {
    .topic-largebd section.server .server-table {
        margin: -20px
    }

    .topic-largebd section.server .server-table table {
        border-spacing: 20px
    }

    .topic-largebd section.server .server-table table td {
        display: block;
        margin-bottom: 20px
    }

    .topic-largebd section.server .server-table table td .item p {
        width: 100%;
        max-width: 320px;
        height: auto;
        margin-bottom: 10px
    }
}

.topic-largebd section.advantage {
    background: url(../image/020.png) no-repeat center;
    background-size: cover;
    padding-bottom: 60px
}

.topic-largebd-server {
    padding: 40px 0
}

.topic-largebd-server .server-tit {
    background: url(../image/c0011.jpg) no-repeat;
    background-size: 100% 100%;
    max-width: 220px;
    width: 220px
}

.topic-largebd-server .server-tit h5 {
    color: #fff;
    font: 24px bold;
    text-align: center
}

.topic-largebd-server .server-tit-md {
    display: none;
    background-color: #f2f4f9
}

.topic-largebd-server .server-card {
    margin-bottom: 30px
}

.topic-largebd-server .server-btn {
    width: 270px;
    padding-top: 20px
}

.topic-largebd-server .server-table {
    text-align: center;
    border: 1px solid #c6d1dd
}

.topic-largebd-server .server-table span {
    display: block;
    margin: 10px 0
}

.topic-largebd-server .server-table p {
    text-align: center;
    font-weight: bold;
    color: #333
}

.topic-largebd-server .server-tr {
    padding: 10px 0
}

.topic-largebd-server .server-tr h4 {
    font-size: 18px;
    text-align: center;
    width: 100%;
    margin: 0
}

.topic-largebd-server .server-tr:hover {
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2)
}

.topic-largebd-server .server-data {
    border-right: 1px solid #c6d1dd;
    padding: 10px
}

.topic-largebd-server .server-more {
    width: 100%;
    padding: 12px 0;
    margin-bottom: 45px;
    background-color: #f2f4f9;
    text-align: center
}

.topic-largebd-server .server-more .link {
    color: #ef2a3a;
    font-weight: bold
}

.topic-largebd-server .server-table .server-tr:not(:last-child) {
    border-bottom: 1px solid #c6d1dd
}

@media screen and (max-width:992px) {
    .topic-largebd-server .server-tit {
        display: none
    }

    .topic-largebd-server .server-tit-md {
        display: block
    }
}

@media screen and (max-width:768px) {
    .topic-largebd-server .server-btn {
        width: 150px
    }
}

@media screen and (max-width:576px) {
    .topic-largebd-server .server-tr {
        display: block
    }

    .topic-largebd-server .server-tr>div {
        display: block;
        width: 100%
    }

    .topic-largebd-server .server-data {
        border-right: none;
        border-bottom: 1px solid #c6d1dd
    }

    .topic-largebd-server .server-btn {
        width: 100%
    }
}

.topic-largebd-recomand {
    background: url(../image/b0015.jpg) repeat, #4f86d3;
    padding-bottom: 60px;
    padding-top: 60px
}

.topic-largebd-recomand h2 {
    color: #fff
}

.topic-largebd-recomand .recomand-item {
    cursor: pointer;
    position: relative;
    border: 1px solid #b3d1fe;
    padding: 40px 10px 40px 140px
}

.topic-largebd-recomand .recomand-item img {
    position: absolute;
    display: block;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 15px
}

.topic-largebd-recomand .recomand-item p {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px
}

.topic-largebd-recomand .recomand-item .btn {
    border-color: #fff;
    color: #fff
}

.topic-largebd-recomand .recomand-item:hover {
    background-color: #fff;
    transition: all .5s
}

.topic-largebd-recomand .recomand-item:hover p {
    color: #333
}

.topic-largebd-recomand .recomand-item:hover .btn {
    border: none;
    background-color: #ef2a3a
}

.topic-largebd-recomand .recomand-table {
    margin: 0 -10px
}

.topic-largebd-recomand .flex-item {
    padding: 20px 10px
}

@media screen and (min-width:1200px) {
    .topic-largebd-recomand {
        padding: 40px 20px 40px 160px
    }

    .topic-largebd-recomand .recomand-table {
        margin: 0 -35px
    }

    .topic-largebd-recomand .flex-item {
        padding: 20px 35px
    }

    .topic-largebd-recomand img {
        left: 30px
    }
}

@media screen and (max-width:992px) {
    .topic-largebd-recomand .recomand-row .flex-item {
        width: 50%
    }
}

@media screen and (max-width:768px) {
    .topic-largebd-recomand .recomand-row .flex-item {
        width: 100%
    }
}

.topic-largebd-node .map .map-site {
    opacity: 1
}

.topic-largebd-service {
    background-color: #f4f4f4;
    padding-bottom: 30px
}

.topic-largebd-cust {
    padding-bottom: 60px
}

.topic-largebd-cust #stack-pic .swiper-slide {
    height: auto
}

.topic-extra .banner-txt h1 {
    color: #fff
}

.topic-extra .banner-txt h2 {
    color: #fff
}

.topic-extra section.intro {
    background: url(../image/018.png) no-repeat center;
    background-size: cover;
    padding-bottom: 100px
}

.topic-extra section.intro .intro-txt {
    max-width: 660px;
    margin: auto;
    text-align: center
}

.topic-extra section.service {
    padding-bottom: 60px
}

.topic-extra section.service gap {
    width: 20px
}

@media screen and (max-width:768px) {
    .topic-extra section.service gap {
        width: 10px
    }
}

.topic-extra section.service .item {
    text-align: center;
    padding: 30px 0;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: initial
}

.topic-extra section.service .item h3 {
    text-align: center;
    color: #fff
}

.topic-extra section.service .item.item01 {
    background-image: url(../image/bg001.png)
}

.topic-extra section.service .item.item02 {
    background-image: url(../image/bg002.png)
}

.topic-extra section.service .item.item03 {
    background-image: url(../image/bg003.png)
}

.topic-extra section.service .item.item04 {
    background-image: url(../image/bg004.png)
}

.topic-extra section.service .item.item05 {
    background-image: url(../image/bg005.png)
}

.topic-extra section.service .item.item06 {
    background-image: url(../image/bg006.png)
}

@media screen and (max-width:768px) {
    .topic-extra section.service .item {
        margin-bottom: 10px
    }
}

.topic-SSL section.intro {
    padding-top: 10px
}

.topic-SSL section.intro .intro-txt {
    box-shadow: 0 0 16px #ddd;
    padding: 70px 420px 70px 75px;
    position: relative
}

.topic-SSL section.intro .intro-txt p {
    position: relative;
    z-index: 2;
    text-align: justify;
    line-height: 28px;
    margin: 0
}

.topic-SSL section.intro .intro-txt img {
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1
}

@media screen and (max-width:992px) {
    .topic-SSL section.intro .intro-txt {
        padding: 40px 380px 40px 40px
    }

    .topic-SSL section.intro .intro-txt img {
        right: 10px
    }
}

@media screen and (max-width:850px) {
    .topic-SSL section.intro .intro-txt {
        padding: 40px
    }

    .topic-SSL section.intro .intro-txt img {
        right: 0;
        left: 0;
        opacity: .3
    }
}

@media screen and (max-width:480px) {
    .topic-SSL section.intro .intro-txt {
        padding: 20px 30px
    }
}

.topic-SSL section.function {
    padding-top: 20px;
    padding-bottom: 80px
}

.topic-SSL section.function .some-row {
    border-collapse: collapse
}

.topic-SSL section.function .some-row>div>div {
    border: 1px solid #ddd;
    padding: 30px 40px;
    text-align: center
}

.topic-SSL section.function .some-row>div>div h3 {
    width: 196px;
    line-height: 46px;
    margin: 20px auto;
    background: -webkit-linear-gradient(90deg, #eef2f4, transparent);
    background: -o-linear-gradient(90deg, #eef2f4, transparent);
    background: -moz-linear-gradient(90deg, #eef2f4, transparent);
    background: linear-gradient(90deg, #eef2f4, transparent)
}

.topic-SSL section.function .some-row>div>div p {
    color: #999;
    max-width: 268px
}

@media screen and (max-width:992px) {
    .topic-SSL section.function .some-row>div>div {
        padding: 20px
    }

    .topic-SSL section.function .some-row>div>div h3 {
        width: 100%
    }
}

@media screen and (max-width:480px) {
    .topic-SSL section.function .some-row {
        display: block
    }

    .topic-SSL section.function .some-row>div {
        display: block
    }

    .topic-SSL section.function .some-row>div>div {
        display: block;
        margin-bottom: 10px
    }
}

.topic-SSL section.package {
    overflow: hidden;
    background: url(../image/0321.png) top center no-repeat, #f1f6fa;
    padding-top: 40px;
    padding-bottom: 60px
}

.topic-SSL section.package .tit1 {
    margin-bottom: 40px
}

.topic-SSL section.package .tit1 h1 {
    color: #fff
}

.topic-SSL section.package .package-table {
    margin: -40px
}

.topic-SSL section.package .package-table .one-row {
    border-collapse: separate;
    border-spacing: 40px
}

.topic-SSL section.package .package-table .one-row>div {
    border-radius: 8px;
    background: #fff;
    width: 33.33%;
    padding: 30px;
    vertical-align: top;
    text-align: center;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1)
}

.topic-SSL section.package .package-table .one-row>div .tit {
    text-align: center
}

.topic-SSL section.package .package-table .one-row>div .tit h3 {
    font-size: 20px;
    margin: 0
}

.topic-SSL section.package .package-table .one-row>div .tit p {
    text-align: center;
    color: #4976a9
}

.topic-SSL section.package .package-table .one-row>div hr {
    border-top: #dcdcdc solid 1px;
    border-bottom: none;
    margin: 20px 0
}

.topic-SSL section.package .package-table .one-row>div ul li {
    position: relative;
    text-align: left;
    padding: 4px 4px 4px 24px
}

.topic-SSL section.package .package-table .one-row>div ul li::before {
    content: "";
    height: 12px;
    width: 17px;
    background: url(../image/SSL-check.png) no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block
}

.topic-SSL section.package .package-table .one-row>div .price {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px
}

.topic-SSL section.package .package-table .one-row>div .price>div {
    width: 50%;
    float: left
}

.topic-SSL section.package .package-table .one-row>div .price h3 {
    color: #fff;
    background: -webkit-linear-gradient(left, #6e8196, #889cb3);
    background: -o-linear-gradient(right, #6e8196, #889cb3);
    background: -moz-linear-gradient(right, #6e8196, #889cb3);
    background: linear-gradient(to right, #6e8196, #889cb3);
    font-weight: bold;
    height: 44px;
    line-height: 44px;
    margin: 0
}

.topic-SSL section.package .package-table .one-row>div .price>div:first-child {
    border-right: 1px solid white
}

.topic-SSL section.package .package-table .one-row>div .price>div:first-child h3 {
    background: -webkit-linear-gradient(left, #536679, #6e8196);
    background: -o-linear-gradient(right, #536679, #6e8196);
    background: -moz-linear-gradient(right, #536679, #6e8196);
    background: linear-gradient(to right, #536679, #6e8196)
}

.topic-SSL section.package .package-table .one-row>div .price p {
    background: #f1f6fa;
    margin: 0;
    text-align: center;
    padding: 10px
}

.topic-SSL section.package .package-table .one-row>div .price p span {
    font-size: 18px;
    color: #333;
    margin: 0 10px;
    white-space: nowrap;
    display: inline-block;
    min-width: 80px
}

.topic-SSL section.package .package-table .one-row>div .price p span small {
    font-size: 14px
}

.topic-SSL section.package .package-table .one-row>div .price p>span:last-child {
    position: relative;
    left: -10px
}

@media screen and (max-width:1200px) {
    .topic-SSL section.package .package-table {
        margin: -20px
    }

    .topic-SSL section.package .package-table .one-row {
        border-collapse: separate;
        border-spacing: 20px
    }

    .topic-SSL section.package .package-table .one-row>div .price>div {
        width: 100%;
        float: none
    }

    .topic-SSL section.package .package-table .one-row>div .price>div h3 {
        background: -webkit-linear-gradient(left, #536679, #889cb3);
        background: -o-linear-gradient(right, #536679, #889cb3);
        background: -moz-linear-gradient(right, #536679, #889cb3);
        background: linear-gradient(to right, #536679, #889cb3)
    }
}

@media screen and (max-width:768px) {
    .topic-SSL section.package .package-table {
        margin: 0
    }

    .topic-SSL section.package .package-table .one-row {
        display: block
    }

    .topic-SSL section.package .package-table .one-row>div {
        display: block;
        width: 100%;
        margin-bottom: 40px
    }
}

.topic-SSL section.apply {
    padding-bottom: 60px
}

.topic-SSL section.apply .apply-table {
    margin: -20px -34px
}

.topic-SSL section.apply .apply-table .one-row {
    border-collapse: separate;
    border-spacing: 34px
}

.topic-SSL section.apply .apply-table .one-row>div {
    background: url(../image/0331.png) right bottom no-repeat;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 30px;
    width: 25%;
    vertical-align: top
}

.topic-SSL section.apply .apply-table .one-row>div h3 {
    font-size: 18px;
    margin: 12px auto
}

@media screen and (max-width:992px) {
    .topic-SSL section.apply .apply-table {
        margin: -20px
    }

    .topic-SSL section.apply .apply-table .one-row {
        border-spacing: 20px
    }

    .topic-SSL section.apply .apply-table .one-row>div {
        padding: 20px
    }
}

@media screen and (max-width:768px) {
    .topic-SSL section.apply .apply-table {
        display: block;
        margin: 0
    }

    .topic-SSL section.apply .apply-table .one-row {
        display: block
    }

    .topic-SSL section.apply .apply-table .one-row>div {
        display: block;
        width: 100%;
        margin-bottom: 20px
    }
}

.topic-SSL section.help-block {
    display: block
}

.servertopic {
    margin-top: -50px
}

.servertopic section {
    min-height: 860px
}

.servertopic span,
.servertopic a,
.servertopic h3,
.servertopic h2,
.servertopic h1 {
    color: aliceblue
}

.servertopic span {
    font-size: 18px
}

.servertopic h2 {
    color: #fff;
    font-size: 48px;
    text-align: center;
    padding: 0 10px
}

.servertopic p {
    display: inline-block;
    text-align: center
}

.servertopic h4 {
    color: #acd4ef;
    font-size: 18px
}

.servertopic h3 {
    font-size: 24px
}

.servertopic .yellow {
    color: #ffd57c
}

.servertopic .topic-more {
    padding: 5px 40px;
    background: #00a3e0;
    border: 1px solid #00a3e0;
    border-radius: 15px;
    font-size: 18px
}

.servertopic .more {
    text-align: center;
    margin: 50px 0 0 0;
    font-size: 18px
}

.servertopic .card-4 .more {
    margin: 80px 0 60px 0 !important
}

.servertopic .main {
    padding-top: 5px
}

.servertopic .topic-tit {
    text-align: center;
    padding: 10px 0;
    margin-top: -40px
}

.servertopic .topic-tit>div>* {
    display: inline-block
}

.servertopic .topic-content {
    text-align: center;
    position: relative
}

.servertopic .topic-nav {
    height: 90px;
    background: url("../image/nav.png") no-repeat;
    width: 180px;
    text-align: center;
    line-height: 90px;
    background-size: 180px
}

.servertopic .topic-nav h3 {
    letter-spacing: 5px;
    padding-left: 5px
}

.servertopic .next {
    width: 100%;
    height: 50px;
    margin-top: 60px;
    position: relative;
    text-align: center
}

.servertopic .next a {
    display: table;
    height: 40px;
    margin: auto
}

.servertopic .card-4 .topic-content {
    margin: -20px -20px
}

.servertopic .card-4 .topic-content .some-row {
    border-spacing: 20px
}

.servertopic .card-4 .topic-content .some-row>div>div {
    width: 25%
}

.servertopic>section:not(.home-page)>div {
    vertical-align: top
}

.hktopic .topic-tit {
    margin-top: 20px !important
}

.hktopic .topic-tit h2 {
    margin-bottom: 0 !important
}

.hktopic .topic-tit h3 {
    margin-top: 0;
    margin-bottom: 50px
}

@media screen and (max-width:480px) {
    .hktopic .topic-tit h3 {
        margin-bottom: 20px
    }
}

section.menu-page .home-tit {
    position: relative;
    padding-top: 200px;
    text-align: center
}

section.menu-page .home-tit>div {
    position: relative;
    margin: auto
}

section.menu-page .home-tit>div span {
    font-size: 24px;
    background: url(../image/title.png) center no-repeat;
    background-size: 100% 50px;
    line-height: 60px;
    padding: 10px 15px
}

section.menu-page .home-tit .details {
    padding: 30px
}

section.menu-page .home-tit .details .info-btn::after {
    position: relative;
    left: 10px;
    content: ">"
}

section.menu-page .home-nav {
    margin: 0 -10px
}

section.menu-page .home-nav>div {
    display: table;
    border-spacing: 10px 0
}

section.menu-page .home-nav>div .item {
    display: table-cell;
    background: url(../image/hk-menu-1.png) center no-repeat;
    background-size: 100% 100%;
    width: 20%;
    padding: 5px 10px;
    vertical-align: middle;
    height: 80px
}

section.menu-page .home-nav>div .item h3 {
    margin: 0;
    font-size: 18px
}

section.menu-page .home-nav>div .item h4 {
    margin: 0;
    font-size: 14px
}

section.menu-page .home-nav>div .item img {
    height: 35px;
    width: 35px
}

section.menu-page .home-nav>div .item>* {
    display: table
}

section.menu-page .home-nav>div .item>*>* {
    display: table-cell;
    vertical-align: middle
}

section.menu-page .home-nav>div:last-child {
    width: 80%;
    margin: auto;
    margin-top: 20px
}

section.menu-page .home-nav>div:last-child .item {
    width: 25%
}

@media screen and (max-width:1200px) {
    section.menu-page .home-tit>div span {
        font-size: 20px
    }
}

@media screen and (max-width:992px) {
    section.menu-page .home-tit>div span {
        font-size: 16px
    }

    section.menu-page .home-nav {
        display: none
    }
}

@media screen and (max-width:768px) {
    section.menu-page .home-tit>img {
        width: 100%
    }

    section.menu-page .home-tit>div span {
        line-height: 10px;
        background: none;
        font-size: 15px;
        padding: 0
    }
}

.topic-overseas section .wrapper {
    width: 1200px
}

.topic-overseas .banner {
    height: 1000px
}

.topic-overseas .banner .red,
.topic-overseas .banner .yellow {
    font-size: 21px
}

.topic-overseas section:not(.topic-bandwith) .topic-button {
    padding: 30px 0 60px;
    text-align: center
}

.topic-overseas .topic-nav {
    position: relative;
    box-shadow: 0 0 10px rgba(2, 45, 134, 0.13);
    padding: 30px
}

.topic-overseas .topic-nav a {
    font-weight: bold;
    color: #333;
    font-size: 18px
}

.topic-overseas .topic-nav .col-1 {
    text-align: center;
    border-right: 1px solid #dcdcdc;
    height: 30px
}

.topic-overseas .topic-nav .col-1 .footer-line {
    width: 25%;
    background: #17cea3;
    height: 3px;
    margin: auto;
    display: none
}

.topic-overseas .topic-nav .col-1:hover .footer-line {
    display: block
}

.topic-overseas .topic-nav .col-1:last-child {
    border-right: none
}

.topic-overseas .topic-nav::before {
    content: "";
    width: 95%;
    height: 10px;
    box-shadow: 0 0 10px rgba(2, 45, 134, 0.13);
    display: block;
    position: absolute;
    bottom: -10px
}

.topic-overseas .topic-stack {
    background-color: #eff2f6
}

.topic-overseas .map-overseas .map-overseas-img {
    position: relative;
    height: 600px;
    background: url(../image/map5.png) center no-repeat
}

.topic-overseas .map-overseas .point {
    position: absolute
}

.topic-overseas .map-overseas .point span {
    color: #333
}

.topic-overseas .map-overseas .content {
    position: relative;
    z-index: 2;
    bottom: -15px;
    right: 10px
}

.topic-overseas .map-overseas .spotright {
    bottom: 5px;
    right: -15px
}

.topic-overseas .map-overseas .spotleft {
    bottom: 5px;
    right: 35px
}

.topic-overseas .map-overseas .point:hover .map-spot1 {
    background: #17cea3
}

.topic-overseas .map-overseas .point:hover span {
    color: #333
}

.topic-overseas .map-overseas .point:hover .map-spot1::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: rgba(77, 224, 190, 0.2);
    animation: flash infinite linear 1s
}

.topic-overseas .map-overseas .point:hover .map-spot1::after {
    background: rgba(71, 219, 185, 0.2)
}

.topic-overseas .datacenter {
    background-color: #eff2f6
}

.topic-overseas .datacenter .col-1 {
    margin-top: 20px
}

.topic-overseas .datacenter .col-1 a {
    display: inherit;
    width: 170px;
    margin: auto;
    height: 40px;
    background: url(../image/0016.png) center no-repeat;
    text-align: center;
    color: #2649bd;
    line-height: 40px
}

.topic-overseas .topic-hardware {
    background-color: #eff2f6
}

.topic-overseas .topic-hardware .series {
    background: #fff;
    box-shadow: 0 0 15px rgba(2, 45, 134, 0.15);
    border-radius: 10px
}

.topic-overseas .topic-hardware .series-title {
    background: url(../image/overseas2.jpg) center no-repeat;
    padding: 18px 40px;
    border-radius: 10px 10px 0 0
}

.topic-overseas .topic-hardware h3 {
    margin: 0;
    color: #fff;
    font-size: 24px
}

.topic-overseas .topic-hardware p {
    color: #fff
}

.topic-overseas .topic-hardware .series-list {
    padding: 18px 40px
}

.topic-overseas .topic-hardware .btn {
    background-color: #eef0f4;
    border: 1px solid #eef0f4;
    color: #333;
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    width: 134px
}

.topic-overseas .topic-hardware .col-11 {
    text-align: center
}

.topic-overseas .topic-hardware .btn:hover {
    color: #fff;
    background-color: #17cea3;
    border: 1px solid #17cea3
}

.topic-overseas .topic-hardware .frontiers {
    box-shadow: 0 0 15px rgba(2, 45, 134, 0.15);
    border-radius: 10px;
    background: #fff;
    margin-top: 20px
}

.topic-overseas .topic-hardware .frontiers img {
    border-radius: 10px
}

@media all and (max-width:1024px) {
    .topic-overseas .topic-hardware .col-11 {
        margin-top: 10px;
        width: 25%
    }
}

@media all and (max-width:650px) {
    .topic-overseas .topic-hardware .col-11 {
        width: 50%
    }
}

.topic-serv-global .tit1 h2,
.topic-idc-global .tit1 h2 {
    font-size: 36px;
    font-weight: bold
}

.topic-serv-global .title01,
.topic-idc-global .title01 {
    text-align: center
}

.topic-serv-global .title01 h2,
.topic-idc-global .title01 h2 {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 0 40px;
    font-size: 36px;
    font-weight: bold
}

.topic-serv-global .banner,
.topic-idc-global .banner {
    height: 500px;
    padding-top: 130px
}

.topic-serv-global .banner .btn,
.topic-idc-global .banner .btn {
    background: linear-gradient(to left, #00c8b7, #007eff);
    border-color: transparent;
    border-radius: 32px;
    padding: 0 25px;
    margin-top: 60px
}

.topic-serv-global .topic-server-entry,
.topic-idc-global .topic-server-entry {
    padding: 90px 0 50px
}

.topic-serv-global .topic-server-entry .wrapper,
.topic-idc-global .topic-server-entry .wrapper {
    border: 3px solid #2395f6;
    position: relative;
    padding: 30px 90px;
    border-radius: 10px
}

.topic-serv-global .topic-server-entry .btn,
.topic-idc-global .topic-server-entry .btn {
    border-radius: 5px;
    padding: 0 25px;
    height: 40px;
    line-height: 40px
}

.topic-serv-global .topic-server-entry .title01,
.topic-idc-global .topic-server-entry .title01 {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -60px
}

.topic-serv-global .topic-server-entry .float-content,
.topic-idc-global .topic-server-entry .float-content {
    height: 100%
}

.topic-serv-global .topic-server-entry .float-content img,
.topic-idc-global .topic-server-entry .float-content img {
    max-width: 137px;
    max-height: 137px
}

.topic-serv-global .topic-server-entry_1,
.topic-idc-global .topic-server-entry_1 {
    background-color: #fff
}

.topic-serv-global .topic-server-entry_1 .title01 h2,
.topic-idc-global .topic-server-entry_1 .title01 h2 {
    background-color: #fff
}

.topic-serv-global .topic-server-entry_1 .float-item,
.topic-idc-global .topic-server-entry_1 .float-item {
    width: 33.3%
}

.topic-serv-global .topic-server-entry_1 .float-content,
.topic-idc-global .topic-server-entry_1 .float-content {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)
}

.topic-serv-global .topic-server-entry_2 .float-item,
.topic-idc-global .topic-server-entry_2 .float-item {
    padding: 20px 10px
}

.topic-serv-global .topic-solution,
.topic-idc-global .topic-solution,
.topic-serv-global .topic-service,
.topic-idc-global .topic-service {
    background-color: #eff2f6
}

.topic-serv-global .topic-protect,
.topic-idc-global .topic-protect,
.topic-serv-global .topic-customer,
.topic-idc-global .topic-customer {
    background-color: #fff
}

.topic-serv-global .topic-protect .item,
.topic-idc-global .topic-protect .item {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)
}

.topic-serv-global .topic-customer .partner-table>div>div,
.topic-idc-global .topic-customer .partner-table>div>div {
    padding: 15px 0
}

.topic-serv-global .topic-customer img,
.topic-idc-global .topic-customer img {
    width: 90%
}

@media screen and (max-width:1200px) {
    .hktopic>section:not(.home-page)>div {
        vertical-align: middle
    }

    .hktopic>section:not(.home-page) .wrapper {
        margin-top: 0
    }

    .hktopic .server-nav .main {
        padding-top: 0
    }
}

@media screen and (max-width:1024px) {
    #fp-nav.left {
        display: none
    }

    .hktopic .home-page .home-tit img {
        width: 100%
    }

    .topic-copyright {
        display: none
    }

    .topic-copyright-min {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        border-top: 1px solid #737b8d;
        padding: 5px 0
    }

    .topic-copyright-min span {
        color: #737b8d
    }
}

@media screen and (max-width:768px) {
    .servertopic section {
        min-height: 660px
    }

    br {
        display: none
    }

    .hktopic {
        margin-top: -10px
    }

    .hktopic h2 {
        font-size: 30px
    }

    .hktopic .topic-tit {
        margin-top: 0 !important
    }

    .hktopic .topic-nav {
        margin: auto;
        background-size: 100%;
        width: 150px;
        line-height: 80px;
        height: 80px
    }

    .hktopic .topic-nav h3 {
        font-size: 18px;
        letter-spacing: 5px
    }

    .hktopic .card-4 .topic-content {
        margin: -20px -10px
    }

    .hktopic .card-4 .topic-content .some-row {
        border-spacing: 10px
    }

    .hktopic .card-4 .topic-content .some-row>div>div {
        margin-bottom: 10px;
        display: block;
        width: 100%;
        position: relative
    }

    .hktopic .card-4 .topic-content .some-row>div>div .item {
        font-size: 15px;
        text-align: left;
        padding-top: 0
    }

    .hktopic .card-4 .topic-content .some-row>div>div .item>* {
        display: table-cell;
        position: relative;
        vertical-align: middle
    }

    .hktopic .card-4 .topic-content .some-row>div>div .item>:last-child {
        padding: 0
    }

    .hktopic .card-4 .topic-content .some-row>div>div .item>:last-child h4 {
        margin-bottom: 0
    }

    .hktopic .card-4 .topic-content .some-row>div>div .item h4 {
        margin: 0 !important
    }

    .hktopic .card-4 .topic-content .some-row>div>div .item h3 {
        margin: 0 !important
    }

    .hkcloud .topic-tit img {
        display: none !important
    }
}

@media screen and (max-width:480px) {
    .servertopic section {
        min-height: 500px
    }

    .hktopic h4 {
        font-size: 16px !important
    }

    .hktopic h3 {
        font-size: 18px !important
    }

    .hktopic .topic-tit h2 {
        font-size: 25px
    }

    .hktopic .topic-tit img {
        width: 16%
    }

    .topic-copyright-min span {
        font-size: 14px
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes pulse2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(2);
        transform: scale(2)
    }

    100% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes pulse2 {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2)
    }

    100% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2)
    }
}

.pulse2 {
    -webkit-animation-name: pulse2;
    animation-name: pulse2
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes arrow {
    25% {
        -webkit-transform: translateY(-10px)
    }

    50%,
    100% {
        -webkit-transform: translateY(0)
    }

    75% {
        -webkit-transform: translateY(10px)
    }
}

@keyframes arrow {
    25% {
        transform: translateY(-10px)
    }

    50%,
    100% {
        transform: translateY(0)
    }

    75% {
        transform: translateY(10px)
    }
}

.animate-arrow {
    -webkit-animation: arrow 1.5s linear infinite;
    animation: arrow 1.5s linear infinite
}

.server-topic {
    margin-top: -50px
}

.server-topic span,
.server-topic a,
.server-topic h3,
.server-topic h2,
.server-topic h1 {
    color: aliceblue
}

.server-topic span {
    font-size: 18px
}

.server-topic h2 {
    color: #fff;
    font-size: 48px;
    text-align: center;
    padding: 0 10px
}

.server-topic p {
    display: inline-block;
    text-align: center
}

.server-topic h4 {
    color: #acd4ef;
    font-size: 18px
}

.server-topic h3 {
    font-size: 24px
}

.server-topic .yellow {
    color: #ffd57c
}

.server-topic .topic-more {
    padding: 5px 40px;
    background: #00a3e0;
    border: 1px solid #00a3e0;
    border-radius: 15px;
    font-size: 18px
}

.server-topic .more {
    text-align: center;
    margin: 50px 0 60px 0;
    font-size: 18px
}

.server-topic .card-4 .more {
    margin: 80px 0 60px 0 !important
}

.server-topic .main {
    padding-top: 5px
}

.server-topic .topic-tit {
    text-align: center;
    padding: 10px 0;
    margin-top: -40px
}

.server-topic .topic-tit>div>* {
    display: inline-block
}

.server-topic .topic-content {
    text-align: center;
    position: relative
}

.server-topic .topic-nav {
    height: 90px;
    background: url("../image/nav.png") no-repeat;
    width: 180px;
    text-align: center;
    line-height: 90px;
    background-size: 180px
}

.server-topic .topic-nav h3 {
    letter-spacing: 5px;
    padding-left: 5px
}

.server-topic .next {
    width: 100%;
    height: 50px;
    position: relative;
    text-align: center
}

.server-topic .next a {
    display: table;
    height: 40px;
    margin: auto
}

.server-topic .card-4 .topic-content {
    margin: -20px -20px
}

.server-topic .card-4 .topic-content .some-row {
    border-spacing: 20px
}

.server-topic .card-4 .topic-content .some-row>div>div {
    width: 25%
}

.server-topic>section:not(.home-page)>div {
    vertical-align: top
}

.server-topic>section:not(.home-page) .wrapper {
    margin-top: 60px
}

.hktopic .topic-tit {
    margin-top: 20px !important
}

.hktopic .topic-tit h2 {
    margin-bottom: 0 !important
}

.hktopic .topic-tit h3 {
    margin-top: 0;
    margin-bottom: 50px
}

@media screen and (max-width:480px) {
    .hktopic .topic-tit h3 {
        margin-bottom: 20px
    }
}

.topic-copyright {
    position: absolute;
    bottom: 5px
}

.topic-copyright img {
    width: 100%;
    min-width: 1100px
}

.topic-copyright-min {
    display: none
}

section.home-page .home-tit {
    position: relative;
    margin-top: -120px;
    text-align: center
}

section.home-page .home-tit>div {
    position: relative;
    margin: auto
}

section.home-page .home-tit>div span {
    font-size: 24px;
    background: url(../image/title.png) center no-repeat;
    background-size: 100% 50px;
    line-height: 60px;
    padding: 10px 15px
}

section.home-page .home-tit .info-btn {
    position: relative;
    top: 30px
}

section.home-page .home-tit .info-btn::after {
    position: relative;
    left: 10px;
    content: ">"
}

section.home-page .home-nav {
    position: relative;
    top: 120px;
    margin: 0 -10px
}

section.home-page .home-nav>div {
    display: table;
    border-spacing: 10px 0
}

section.home-page .home-nav>div .item {
    display: table-cell;
    background: url(../image/hk-menu-1.png) center no-repeat;
    background-size: 100% 100%;
    width: 20%;
    padding: 5px 10px;
    vertical-align: middle;
    height: 80px
}

section.home-page .home-nav>div .item h3 {
    margin: 0;
    font-size: 18px
}

section.home-page .home-nav>div .item h4 {
    margin: 0;
    font-size: 14px
}

section.home-page .home-nav>div .item img {
    height: 35px;
    width: 35px
}

section.home-page .home-nav>div .item>* {
    display: table
}

section.home-page .home-nav>div .item>*>* {
    display: table-cell;
    vertical-align: middle
}

section.home-page .home-nav>div:last-child {
    width: 80%;
    margin: auto;
    margin-top: 20px
}

section.home-page .home-nav>div:last-child .item {
    width: 25%
}

@media screen and (max-width:1200px) {
    section.home-page .home-tit>div span {
        font-size: 20px
    }
}

@media screen and (max-width:992px) {
    section.home-page .home-tit>div span {
        font-size: 16px
    }
}

@media screen and (max-width:768px) {
    section.home-page .home-tit>img {
        width: 100%
    }

    section.home-page .home-tit>div span {
        line-height: 10px;
        background: none;
        font-size: 15px;
        padding: 0
    }

    section.home-page .home-nav {
        display: none
    }
}

.server-nav .main {
    padding-top: 100px
}

.server-nav .topic-tit {
    background: url("../image/tit-line.png") center no-repeat
}

.server-nav .topic-content {
    display: none;
    padding: 0 80px
}

.server-nav .topic-content .Hexagon {
    position: relative
}

.server-nav .topic-content .Hexagon img {
    width: 45px;
    height: 45px
}

.server-nav .topic-content .Hexagon h3 {
    color: #19acec;
    font-size: 24px;
    margin-top: 5px
}

.server-nav .topic-content .Hexagon .figure {
    text-align: center;
    height: 160px;
    width: 100%;
    background: url("../image/nav-bg.png") center no-repeat;
    background-size: 200px
}

.server-nav .topic-content .Hexagon .figure .item {
    padding-top: 40px
}

.server-nav .topic-content .Hexagon .figure:hover {
    cursor: pointer;
    background: url("../image/nav-hover.png") center no-repeat;
    background-size: 200px;
    transition: all 1s
}

@media screen and (min-width:1200px) {
    .server-nav .topic-content {
        padding: 0 50px
    }

    .server-nav .topic-content .figure {
        width: 180px !important
    }

    .server-nav .topic-content .Hexagon-1>div:first-child {
        position: relative;
        left: 0;
        bottom: 80px
    }

    .server-nav .topic-content .Hexagon-1>div:last-child {
        position: absolute;
        right: 10%;
        top: 0
    }

    .server-nav .topic-content .Hexagon-2>div:last-child {
        position: relative;
        left: 70%;
        bottom: 240px
    }

    .server-nav .topic-content .Hexagon-2 .safe-nav {
        position: relative;
        top: -160px;
        left: 25%
    }

    .server-nav .topic-content .Hexagon-2>div:first-child {
        position: relative;
        top: 80px;
        left: -20%
    }

    .server-nav .topic-content .Hexagon-3>div:last-child {
        position: relative;
        right: 0;
        bottom: 80px;
        float: right
    }

    .server-nav .topic-content .Hexagon-3>div:first-child {
        position: absolute;
        left: 10%;
        top: 0
    }
}

@media screen and (max-width:768px) {
    .server-nav .topic-content {
        padding: 0
    }

    .server-nav .topic-content .Hexagon .figure {
        background-size: 180px
    }

    .server-nav .topic-content .Hexagon .figure:hover {
        background-size: 180px
    }
}

@media screen and (max-width:480px) {
    .server-nav .topic-content .Hexagon img {
        width: 30px;
        height: 30px
    }

    .server-nav .topic-content .Hexagon .figure {
        background-size: 130px;
        height: 140px
    }

    .server-nav .topic-content .Hexagon .figure:hover {
        background-size: 130px;
        height: 140px
    }
}

section.record .topic-content {
    display: table;
    width: 100%;
    padding-top: 40px
}

section.record .topic-content .left {
    background: url("../image/hk-p1-1.png") center no-repeat;
    background-size: 97% 100%
}

section.record .topic-content .right {
    background: url("../image/hk-p1-2.png") center no-repeat;
    background-size: 97% 100%
}

section.record .topic-content>* {
    padding: 30px 40px;
    width: 50%;
    display: table-cell;
    min-height: 120px;
    text-align: center
}

section.record .topic-content>* span {
    font-size: 22px
}

section.record .more {
    margin: 120px 0 70px 0
}

@media screen and (max-width:768px) {
    section.record .topic-content>* {
        display: block;
        float: left;
        padding: 30px 40px;
        width: 100%;
        margin-top: 20px
    }

    section.record .topic-content>* span {
        font-size: 20px
    }
}

section.net .main .topic-content .dashboard img {
    width: 80%;
    margin-top: -20px;
    padding-right: 5%
}

section.net .main .topic-content .some-row>div>div {
    background: rgba(9, 37, 84, 0.4) none repeat scroll !important
}

section.net .main .topic-content .some-row>div>div .item {
    padding: 40px 20px
}

section.net .main .topic-content .some-row>div>div .item h3 {
    margin: 10px 0
}

section.net .main .topic-content .some-row>div>div .item h4 {
    margin: 10px 0
}

section.net .main .topic-content .some-row>div>div .item>div:first-child {
    height: 60px;
    min-width: 80px;
    text-align: center
}

section.net .main .topic-content p {
    color: #ffad42;
    font-size: 18px
}

section.net .main .topic-content p::before {
    content: url(../image/label2.png);
    margin-right: 10px
}

section.net .main .topic-content p::after {
    content: url(../image/label1.png);
    margin-left: 10px
}

section.net .main .topic-content .info {
    background: url(../image/hk-p2.png) center no-repeat;
    background-size: 100% 100%;
    padding: 15px 20px;
    text-align: left
}

section.net .main .more {
    margin: 20px 0 40px 0
}

@media screen and (max-width:768px) {
    section.net .main .topic-tit {
        margin-top: 0
    }

    section.net .main .topic-content .dashboard img {
        width: 100%
    }

    section.net .main .topic-content .some-row>div>div .item {
        padding: 10px 0
    }

    section.net .main .topic-content p {
        font-size: 19px
    }

    section.net .main .topic-content p::before {
        content: ""
    }

    section.net .main .topic-content p::after {
        content: ""
    }
}

section.performance .main .topic-tit {
    padding: 0
}

section.performance .main .topic-content .some-row>div>div {
    border: 1px solid #acd4ef
}

section.performance .main .topic-content .some-row>div>div .item {
    padding-top: 10px
}

section.performance .main .topic-content .some-row>div>div .item>:last-child {
    padding: 0 15px
}

section.performance .main .topic-content .some-row>div>div .item>:last-child h3 {
    margin: 0
}

section.performance .main .topic-content .some-row>div>div .item>:last-child h4 {
    margin-top: 0
}

section.extend .topic-content>div {
    background: rgba(153, 226, 255, 0.2) none repeat scroll !important;
    filter: alpha(opacity=20);
    width: 100%;
    height: 100%
}

section.extend .topic-content>div>div {
    padding: 35px 100px
}

section.extend .topic-content>div>div .item {
    position: relative;
    opacity: 1;
    text-align: left;
    border-bottom: 1px dashed #3fa4d5;
    padding: 10px 0 10px 30px;
    vertical-align: middle
}

section.extend .topic-content>div>div .item div {
    width: 20px;
    display: inline-block
}

section.extend .topic-content>div>div .item div img {
    height: 22px
}

section.extend .topic-content>div>div .item span {
    margin-left: 5px
}

@media screen and (max-width:768px) {
    section.extend .topic-content>div>div {
        padding: 10px 20px
    }

    section.extend .topic-content>div>div .item {
        padding: 10px 10px
    }

    section.extend .topic-content>div>div .item span {
        font-size: 14px
    }
}

section.safe .topic-tit {
    margin-top: -40px
}

section.safe .topic-content .some-row {
    background: url(../image/hk-p4-2.png) center no-repeat;
    background-size: 100% 100%;
    padding: 20px 10px 10px 10px
}

section.safe .topic-content .some-row>div>div:first-child {
    vertical-align: middle;
    width: 40%
}

section.safe .topic-content .some-row>div>div:first-child img {
    width: 100%
}

section.safe .topic-content .some-row>div>div:last-child {
    width: 60%
}

section.safe .topic-content .some-row>div>div:last-child h3 {
    font-weight: bold;
    margin-bottom: 5px
}

section.safe .topic-content .some-row>div>div:last-child h4 {
    text-align: left;
    font-size: 20px;
    margin: 0 30px;
    padding: 30px 20px;
    background: url(../image/hk-p4-3.png) center no-repeat;
    background-size: 100% 80%;
    letter-spacing: 1px
}

@media screen and (max-width:992px) {
    section.safe .topic-content .some-row {
        background: none;
        padding: 0
    }

    section.safe .topic-content .some-row>div>div {
        display: block;
        margin: auto
    }

    section.safe .topic-content .some-row>div>div:first-child {
        width: 60%
    }

    section.safe .topic-content .some-row>div>div:last-child {
        width: 90%;
        padding-top: 0
    }

    section.safe .topic-content .some-row>div>div:last-child h4 {
        margin: 0;
        text-align: center;
        background: none;
        padding: 0
    }
}

@media screen and (max-width:480px) {
    section.safe .topic-content .some-row>div>div:first-child {
        width: 80%
    }
}

section.stable .topic-tit {
    margin-top: -40px
}

section.stable .topic-content {
    margin: 0 -20px
}

section.stable .topic-content .some-row {
    border-spacing: 20px
}

section.stable .topic-content .some-row>div:last-child {
    margin-top: 20px
}

section.stable .topic-content .item {
    width: 33%;
    background: rgba(38, 72, 127, 0.5) none repeat scroll !important;
    filter: alpha(opacity=20);
    box-shadow: 0 0 .1px #fff
}

section.stable .topic-content .item>div {
    vertical-align: middle;
    display: table-cell;
    text-align: left
}

section.stable .topic-content .item>div h3,
section.stable .topic-content .item>div h4 {
    margin: 0
}

@media screen and (max-width:992px) {
    section.stable .topic-content {
        margin: 0
    }

    section.stable .topic-content .some-row {
        border-spacing: 0
    }

    section.stable .topic-content .some-row .item {
        padding: 10px;
        display: block;
        width: 100%
    }

    section.stable .topic-content .some-row .item>div:last-child {
        padding-left: 20px
    }

    section.stable .topic-content .some-row .item h4 {
        display: inline-block
    }
}

section.service .topic-content {
    margin-top: 40px
}

section.service .topic-content .some-row>div>div {
    width: 25%;
    border-right: 1px solid rgba(172, 212, 239, 0.2)
}

section.service .topic-content .some-row>div>div h4 {
    padding: 0 10px
}

section.service .topic-content .some-row>div>div:last-child {
    border: none
}

section.service .more {
    margin-top: 40px
}

@media screen and (max-width:992px) {
    section.service .topic-tit h2 {
        font-size: 30px
    }
}

@media screen and (max-width:768px) {
    section.service .topic-tit {
        margin-top: 0
    }

    section.service .topic-tit h2 {
        font-size: 24px
    }

    section.service .topic-content .some-row>div>div h4 {
        padding: 0 20px
    }
}

@media screen and (max-width:480px) {
    section.service .topic-content .some-row>div>div {
        padding: 5px 0;
        width: 100%;
        display: block;
        border: 1px solid rgba(172, 212, 239, 0.2)
    }

    section.service .topic-content .some-row>div>div h3,
    section.service .topic-content .some-row>div>div h4 {
        margin: 0
    }

    section.service .topic-content .some-row>div>div:last-child {
        border: 1px solid rgba(172, 212, 239, 0.2)
    }
}

section.dominate .topic-tit {
    margin-top: -40px
}

section.dominate .topic-content img {
    width: 70%
}

@media screen and (max-width:768px) {
    section.dominate .topic-tit {
        margin-top: 0
    }

    section.dominate .topic-content img {
        width: 100%
    }
}

section.cost .topic-tit {
    margin-top: -40px
}

section.cost .topic-content img {
    width: 90%
}

@media screen and (max-width:768px) {
    section.cost .topic-tit {
        margin-top: 0
    }

    section.cost .topic-content img {
        width: 100%
    }
}

@media screen and (max-width:1200px) {
    .server-topic>section:not(.home-page)>div {
        vertical-align: middle
    }

    .server-topic>section:not(.home-page) .wrapper {
        margin-top: 0
    }

    .server-topic .server-nav .main {
        padding-top: 0
    }
}

@media screen and (max-width:1024px) {
    #fp-nav.left {
        display: none
    }

    .server-topic>section:not(.home-page) .wrapper {
        margin-bottom: 100px
    }

    .server-topic .home-page .home-tit img {
        width: 100%
    }

    .topic-copyright {
        display: none
    }

    .topic-copyright-min {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        border-top: 1px solid #737b8d;
        padding: 5px 0
    }

    .topic-copyright-min span {
        color: #737b8d
    }
}

@media screen and (max-width:768px) {
    br {
        display: none
    }

    .server-topic {
        margin-top: -10px
    }

    .server-topic h2 {
        font-size: 30px
    }

    .server-topic .topic-tit {
        margin-top: 0 !important
    }

    .server-topic .topic-nav {
        margin: auto;
        background-size: 100%;
        width: 150px;
        line-height: 80px;
        height: 80px
    }

    .server-topic .topic-nav h3 {
        font-size: 18px;
        letter-spacing: 5px
    }

    .server-topic .card-4 .topic-content {
        margin: -20px -10px
    }

    .server-topic .card-4 .topic-content .some-row {
        border-spacing: 10px
    }

    .server-topic .card-4 .topic-content .some-row>div>div {
        margin-bottom: 10px;
        display: block;
        width: 100%;
        position: relative
    }

    .server-topic .card-4 .topic-content .some-row>div>div .item {
        font-size: 15px;
        text-align: left;
        padding-top: 0
    }

    .server-topic .card-4 .topic-content .some-row>div>div .item>* {
        display: table-cell;
        position: relative;
        vertical-align: middle
    }

    .server-topic .card-4 .topic-content .some-row>div>div .item>:last-child {
        padding: 0
    }

    .server-topic .card-4 .topic-content .some-row>div>div .item>:last-child h4 {
        margin-bottom: 0
    }

    .server-topic .card-4 .topic-content .some-row>div>div .item h4 {
        margin: 0 !important
    }

    .server-topic .card-4 .topic-content .some-row>div>div .item h3 {
        margin: 0 !important
    }

    .hkcloud .topic-tit img {
        display: none !important
    }
}

@media screen and (max-width:480px) {
    .server-topic h4 {
        font-size: 16px !important
    }

    .server-topic h3 {
        font-size: 18px !important
    }

    .server-topic .topic-tit h2 {
        font-size: 25px
    }

    .server-topic .topic-tit img {
        width: 16%
    }

    .topic-copyright-min span {
        font-size: 14px
    }
}

.topic-pioneer section:not(.soluion):not(.frame) p {
    text-align: center
}

.topic-pioneer .line {
    margin: 15px 0;
    padding: 0 40px
}

.topic-pioneer .more {
    width: 100%;
    text-align: center;
    padding-bottom: 20px
}

.topic-pioneer section:not(.serve):not(.frame) .wrapper {
    position: relative;
    overflow: hidden
}

.topic-pioneer section.topic-nav .tab-wrap {
    width: 100%;
    height: 51px
}

.topic-pioneer section.topic-nav .tab-wrap .tab>div .item,
.topic-pioneer section.topic-nav .tab-wrap .tab-nav>div .item {
    font-size: 16px;
    line-height: 48px
}

.topic-pioneer section.stack .swiper-button-prev {
    left: 40px;
    display: none
}

.topic-pioneer section.stack .swiper-button-next {
    right: 40px;
    display: none
}

.topic-pioneer section.stack .swiper-slide img {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15)
}

.topic-pioneer section.stack .detail {
    background: #e7edf5;
    padding: 20px 0;
    margin-bottom: 40px
}

.topic-pioneer section.stack .detail .some-line>div {
    position: relative;
    width: 90%
}

.topic-pioneer section.stack .detail .some-line>div h3 {
    font-weight: bold
}

.topic-pioneer section.stack .detail .some-line>div p {
    font-size: 16px;
    padding: 0 15px
}

.topic-pioneer section.stack .detail .some-line>div::before {
    content: "";
    position: absolute;
    background: url(../image/ribbon01.png) no-repeat;
    width: 20px;
    left: 0;
    top: 0;
    height: 100%;
    background-size: 100% 100%
}

.topic-pioneer section.stack .detail .some-line>div::after {
    content: "";
    position: absolute;
    background: url(../image/ribbon02.png) no-repeat;
    width: 20px;
    height: 100%;
    right: 0;
    top: 0;
    background-size: 100% 100%
}

@media screen and (max-width:1300px) {
    .topic-pioneer section.stack .swiper-button-prev {
        display: block
    }

    .topic-pioneer section.stack .swiper-button-next {
        display: block
    }

    .topic-pioneer section.stack #stack-pic {
        width: 100%
    }

    .topic-pioneer section.stack #stack-pic .swiper-slide {
        width: 100%
    }

    .topic-pioneer section.stack #stack-pic .swiper-slide img {
        margin: auto
    }
}

@media screen and (max-width:992px) {
    .topic-pioneer section.stack .swiper-button-prev {
        left: 20px;
        top: 40%
    }

    .topic-pioneer section.stack .swiper-button-next {
        right: 20px;
        top: 40%
    }

    .topic-pioneer section.stack #stack-pic .swiper-slide {
        height: 100%
    }

    .topic-pioneer section.stack #stack-pic .swiper-slide img {
        width: 80%
    }
}

@media screen and (max-width:480px) {
    .topic-pioneer section.stack .swiper-button-prev {
        left: 0
    }

    .topic-pioneer section.stack .swiper-button-next {
        right: 0
    }

    .topic-pioneer section.stack #stack-pic .swiper-slide img {
        width: 100%
    }
}

.topic-pioneer section.product {
    background: url(../image/048.png) center
}

.topic-pioneer section.product .tit1 h1 {
    color: #fff
}

.topic-pioneer section.product p {
    color: #e7edf5;
    padding: 10px 20px;
    line-height: 25px
}

.topic-pioneer section.product h2 {
    color: #e7edf5
}

.topic-pioneer section.product .item .some-line {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    transition: all .3s ease-out
}

.topic-pioneer section.product .item .some-line>div {
    padding: 15px 0;
    background: linear-gradient(to right, rgba(64, 111, 213, 0.8), rgba(44, 157, 210, 0.8))
}

.topic-pioneer section.product .item .some-line>div h2 {
    width: 70%;
    text-align: left
}

@media screen and (min-width:1201px) {
    .topic-pioneer section.product .item .some-line {
        padding-top: 210px;
        height: 284px;
        padding-left: 30px;
        padding-right: 30px
    }

    .topic-pioneer section.product .item .some-line>div {
        min-height: 250px
    }

    .topic-pioneer section.product .item .some-line:hover {
        padding-top: 40px;
        transition: all .3s ease-out
    }

    .topic-pioneer section.product .item .some-line:hover>div {
        padding: 30px 0
    }

    .topic-pioneer section.product .item .some-line:hover>div .one-row>* {
        display: block
    }

    .topic-pioneer section.product .item .some-line:hover h2 {
        width: 100%;
        text-align: center;
        padding-left: none;
        padding-left: 0;
        margin: 20px 0 10px 0
    }

    .topic-pioneer section.product .item .some-line:hover p {
        padding: 0 20px
    }
}

.topic-pioneer section.product .some-row>*>* {
    width: 33%;
    min-height: 284px
}

.topic-pioneer section.product gap {
    width: 6px !important;
    padding: 0 15px
}

.topic-pioneer section.product .card1 {
    background: url(../image/pioneer1.png) no-repeat
}

.topic-pioneer section.product .card2 {
    background: url(../image/pioneer2.png) no-repeat
}

.topic-pioneer section.product .card3 {
    background: url(../image/pioneer3.png) no-repeat
}

.topic-pioneer section.product .card4 {
    background: url(../image/pioneer4.png) no-repeat
}

.topic-pioneer section.product .card5 {
    background: url(../image/pioneer5.png) no-repeat
}

.topic-pioneer section.product .card6 {
    background: url(../image/pioneer6.png) no-repeat
}

@media screen and (max-width:1200px) {
    .topic-pioneer section.product .some-row>* div {
        width: 100%;
        display: block;
        min-height: 0
    }

    .topic-pioneer section.product .some-row>* div h2 {
        width: 100% !important;
        text-align: center !important;
        display: block;
        margin-bottom: 0
    }

    .topic-pioneer section.product .some-row>* gap {
        display: none !important
    }

    .topic-pioneer section.product .item {
        background: none
    }
}

.topic-pioneer section.soluion .nav .one-row>div:hover {
    background: linear-gradient(to left, rgba(64, 111, 213, 0.6), rgba(44, 157, 210, 0.6)) !important;
    transition: all .5s ease-out;
    color: #fff !important
}

.topic-pioneer section.soluion .nav .one-row>div.page-current {
    background: linear-gradient(to right, #406fd5, #2c9dd2) !important
}

.topic-pioneer section.soluion .nav .one-row>div.page-current::after {
    border-top-color: #3785d4 !important
}

.topic-pioneer section.frame {
    background: #dfe9f2;
    overflow: hidden
}

.topic-pioneer section.frame .card-topline1 {
    background: #7da5db
}

.topic-pioneer section.frame .content {
    margin: 0 -26px
}

.topic-pioneer section.frame .content .one-row {
    border-collapse: separate;
    border-spacing: 26px
}

.topic-pioneer section.frame .item {
    position: relative;
    overflow: hidden;
    width: 33.3%;
    border-radius: 5px;
    height: 160px;
    box-shadow: 0 10px 30px rgba(32, 31, 46, 0.2)
}

.topic-pioneer section.frame .item .inner-card {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 10px;
    height: 100%
}

.topic-pioneer section.frame .item .inner-card .inner-text {
    padding-left: 20px;
    position: relative;
    z-index: 2
}

.topic-pioneer section.frame .item .inner-card img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.topic-pioneer section.frame .item .outer-card {
    position: absolute;
    top: 0;
    left: 0;
    bottom: -100px;
    width: 100%;
    background: #ffffff;
    height: 100%;
    display: block;
    opacity: 0
}

.topic-pioneer section.frame .item .outer-card .outer-text {
    padding: 10px 30px
}

.topic-pioneer section.frame .item .outer-card .outer-text h2 {
    margin-bottom: 10px
}

.topic-pioneer section.frame .item .outer-card .outer-text .line {
    margin: 10px 0
}

.topic-pioneer section.frame .item .outer-card a:hover {
    color: #333
}

.topic-pioneer section.frame .item h2 {
    font-size: 18px;
    color: #fff
}

.topic-pioneer section.frame .item .line {
    height: 4px;
    width: 10px;
    background: #f56f69;
    border-radius: 4px
}

@media screen and (min-width:1025px) {
    .topic-pioneer section.frame .item:hover .card-topline1 {
        width: 100%;
        left: 0
    }

    .topic-pioneer section.frame .item:hover .outer-card {
        -webkit-animation: scaleIn .5s 0s ease both;
        animation: scaleIn .5s 0s ease both;
        will-change: transform;
        z-index: 2;
        margin-top: 0;
        opacity: 1
    }

    .topic-pioneer section.frame .item:hover .outer-card h2 {
        color: #333
    }
}

@media screen and (max-width:1024px) {
    .topic-pioneer section.frame .item {
        height: 190px
    }

    .topic-pioneer section.frame .item .card-topline1 {
        width: 100%;
        left: 0
    }

    .topic-pioneer section.frame .item .outer-card {
        opacity: 1;
        z-index: 2
    }

    .topic-pioneer section.frame .item .outer-card h2 {
        color: #333
    }
}

@media screen and (max-width:768px) {
    .topic-pioneer section.frame .item {
        height: 160px;
        width: 100%;
        display: block;
        margin-bottom: 20px
    }
}

.topic-pioneer section.serve {
    height: 480px
}

.topic-pioneer section.serve .content {
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    background: #fff;
    position: relative;
    z-index: 10
}

.topic-pioneer section.serve .content .one-row .item {
    width: 50%
}

.topic-pioneer section.serve .content .one-row .item .title {
    position: relative;
    height: 60px;
    width: 100%
}

.topic-pioneer section.serve .content .one-row .item .title h2 {
    position: relative;
    display: table;
    margin: auto;
    line-height: 60px;
    color: #fff
}

.topic-pioneer section.serve .content .one-row .item .service-list {
    padding: 10px 0 0 40px
}

.topic-pioneer section.serve .content .one-row .item .service-list li>* {
    display: inline-block
}

.topic-pioneer section.serve .content .one-row .item .service-list li h3 {
    color: #fff;
    padding: 3px 15px;
    border-radius: 3px;
    margin: 10px;
    min-width: 112px;
    text-align: center;
    font-size: 16px;
}

.topic-pioneer section.serve .content .one-row .item .service-list li p {
    text-align: left;
    padding-left: 5px;
    font-size: 14px;
}

.topic-pioneer section.serve .content .one-row .item1 .title {
    background: #7492be;
    border-radius: 5px 0 0 0
}

.topic-pioneer section.serve .content .one-row .item1 .title h2::before {
    content: "";
    background: url(../image/pioneer10.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    background-size: 100% 100%;
    left: -90px;
    bottom: 0
}

.topic-pioneer section.serve .content .one-row .item1 .service-list {
    border-right: 1px #cdd8e2 dashed
}

.topic-pioneer section.serve .content .one-row .item1 .service-list h3 {
    background: linear-gradient(to right, #555c6a, #757d8b)
}

.topic-pioneer section.serve .content .one-row .item2 .title {
    background: #1a284f;
    border-radius: 0 5px 0 0
}

.topic-pioneer section.serve .content .one-row .item2 .title h2::before {
    content: "";
    background: url(../image/pioneer11.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    background-size: 100% 100%;
    right: -90px;
    bottom: 0
}

.topic-pioneer section.serve .content .one-row .item2 .service-list h3 {
    background: linear-gradient(to right, #ef2a3a, #f56f69)
}

.topic-pioneer section.serve .more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    margin: auto;
    height: 0;
    width: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #fff
}

.topic-pioneer section.serve .basic {
    position: relative;
    bottom: -20px;
    width: 95%;
    height: 20px;
    border-radius: 0 0 5px 5px;
    background: #fff;
    opacity: .4;
    margin: auto
}

.topic-pioneer section.serve .basic::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    margin: auto;
    height: 0;
    width: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #fff
}

@media screen and (max-width:1200px) {
    .topic-pioneer section.serve {
        height: 700px
    }

    .topic-pioneer section.serve .content .one-row .item .service-list {
        padding: 10px 0 0 10px
    }

    .topic-pioneer section.serve .content .one-row .item .service-list ul li>* {
        display: block
    }

    .topic-pioneer section.serve .content .one-row .item .service-list ul li h3 {
        width: 112px
    }
}

@media screen and (max-width:992px) {
    .topic-pioneer section.serve {
        height: 100%
    }

    .topic-pioneer section.serve .content .one-row .item {
        display: block;
        width: 100%
    }

    .topic-pioneer section.serve .content .one-row .item .service-list {
        padding: 10px 0 0 20px
    }

    .topic-pioneer section.serve .content .one-row .item .service-list ul li>* {
        display: inline-block
    }

    .topic-pioneer section.serve .content .one-row .item1 .service-list {
        border-right: none
    }

    .topic-pioneer section.serve .content .one-row .item2 .title h2::before {
        left: -90px
    }
}

@media screen and (max-width:600px) {
    .topic-pioneer section.serve .content {
        box-shadow: none
    }

    .topic-pioneer section.serve .content .one-row .item {
        box-shadow: 0 0 10px #dcdcdc;
        margin: 20px 0
    }

    .topic-pioneer section.serve .content .one-row .item .service-list {
        padding: 10px 0
    }

    .topic-pioneer section.serve .content .one-row .item .service-list ul li>* {
        display: block
    }

    .topic-pioneer section.serve .content .one-row .item .service-list ul li p {
        margin-left: 5px
    }

    .topic-pioneer section.serve .basic {
        display: none
    }

    .topic-pioneer section.serve .more .btn {
        height: 42px;
        padding: 5px 40px;
        font-size: 16px
    }

    .topic-pioneer section.serve .more::after {
        display: none
    }
}

.topic-pioneer section.company {
    height: 570px;
    overflow: hidden
}

.topic-pioneer section.company .pic {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: url(../image/pioneer12.jpg);
    animation: loop1 50s linear 0s infinite;
    background-position: center top
}

.topic-pioneer section.company p {
    position: absolute;
    top: 320px;
    width: 100%;
    font-size: 40px;
    color: #FFFFFF;
    text-align: center
}

@media screen and (max-width:1200px) {
    .topic-pioneer section.company .pic {
        background-size: 130%
    }
}

@media screen and (max-width:992px) {
    .topic-pioneer section.company {
        height: 480px
    }

    .topic-pioneer section.company .pic {
        background-size: 130%
    }

    .topic-pioneer section.company p {
        top: 40%
    }
}

@media screen and (max-width:768px) {
    .topic-pioneer section.company {
        height: 300px
    }

    .topic-pioneer section.company .pic {
        background-size: 150%
    }

    .topic-pioneer section.company p {
        font-size: 35px
    }
}

@media screen and (max-width:480px) {
    .topic-pioneer section.company {
        height: 220px
    }

    .topic-pioneer section.company p {
        font-size: 25px
    }
}

@media screen and (max-width:375px) {
    .topic-pioneer section.company {
        height: 200px
    }
}

.topic-pioneer section.information .content {
    margin: 0 -15px 60px -15px
}

.topic-pioneer section.information .content .one-row {
    border-collapse: separate;
    border-spacing: 15px
}

.topic-pioneer section.information .content .item {
    width: 25%;
    overflow: hidden
}

.topic-pioneer section.information .content .item .pic {
    overflow: hidden;
    max-height: 160px
}

.topic-pioneer section.information .content .item .pic img {
    width: 100%
}

.topic-pioneer section.information .content .item .info {
    min-height: 50px
}

.topic-pioneer section.information .content .item .info h3 {
    font-size: 16px;
    padding: 0 5px;
    margin: 5px 0
}

.topic-pioneer section.information .content .item .line {
    width: 100%;
    height: 2px;
    margin: 0;
    background: #dcdcdc
}

.topic-pioneer section.information .content .item:hover img {
    transform: scale(1.1, 1.1);
    transition: .5s
}

.topic-pioneer section.information .content .item:hover h3 {
    color: #ef2a3a;
    transition: color .5s ease
}

.topic-pioneer section.information .content .item:hover .line {
    background: #ef2a3a;
    transition: all .5s ease
}

@media screen and (max-width:992px) {
    .topic-pioneer section.information .content .item .info {
        min-height: 100px
    }
}

@media screen and (max-width:480px) {
    .topic-pioneer section.information .content .item {
        width: 100%;
        display: block;
        margin-bottom: 30px
    }

    .topic-pioneer section.information .content .item .info {
        min-height: 40px
    }
}

.topic-cloud p,
.topic-cloud .example p {
    font-size: 14px
}

.topic-cloud span,
.topic-cloud .example span {
    font-size: 16px
}

.topic-cloud h3,
.topic-cloud .example h3 {
    font-size: 20px
}

.topic-cloud h4,
.topic-cloud .example h4 {
    font-size: 14px;
    color: #999;
    margin: 0
}

.topic-cloud h2,
.topic-cloud .example h2 {
    font-weight: bold;
    font-size: 36px;
    margin: 0
}

.topic-cloud b,
.topic-cloud .example b {
    font-size: 24px
}

.topic-cloud .topic-title2 h2 {
    font-weight: normal;
    text-align: center
}

.topic-cloud .qq {
    padding: 40px 0 0;
    text-align: center
}

.topic-cloud .topic-btn1 {
    border-radius: 5px;
    border: none;
    color: #ffffff;
    padding: 0 20px;
    height: 42px;
    line-height: 42px;
    width: 130px;
    font-size: 16px
}

.topic-cloud .discount-btn {
    margin-top: 30px
}

.topic-cloud .discount-btn .item {
    font-size: 18px;
    height: 38px;
    line-height: 38px;
    display: table-cell;
    padding: 0 10px;
    border: 1px solid #2787e0;
    font-weight: bold
}

.topic-cloud .discount-btn .item1 {
    color: #fff;
    background: #2787e0
}

.topic-cloud .discount-btn .item2 {
    color: #333
}

.topic-cloud .orange,
.topic-cloud orange {
    color: #fa8f04 !important
}

.topic-cloud .banner {
    overflow: hidden
}

.topic-cloud .banner .title,
.topic-cloud .banner .title2 {
    text-align: center;
    padding: 100px 0
}

.topic-cloud .banner .title .tit,
.topic-cloud .banner .title2 .tit {
    font-weight: 100;
    font-size: 60px;
    background: linear-gradient(rgba(255, 144, 45, 0.3), rgba(255, 144, 45, 0));
    -webkit-background-clip: text;
    color: transparent;
    font-family: auto;
    margin: 0;
    display: block
}

.topic-cloud .banner .title p,
.topic-cloud .banner .title2 p {
    margin-top: -30px;
    color: #ffffff;
    font-size: 18px;
    max-swidth: 650px;
    padding: 15px 0;
    text-align: center
}

@media screen and (max-width:1200px) {
    .topic-cloud .banner {
        height: 630px
    }

    .topic-cloud .banner img {
        width: 40%
    }

    .topic-cloud .banner .title .tit {
        font-size: 40px
    }

    .topic-cloud .banner .title p {
        padding: 5px 0;
        margin-top: -10px;
        font-size: 16px
    }
}

@media screen and (max-width:992px) {
    .topic-cloud .banner {
        height: 530px
    }

    .topic-cloud .banner img {
        width: 60%
    }
}

@media screen and (max-width:480px) {
    .topic-cloud .banner {
        height: 350px
    }
}

.topic-cloud .node {
    height: 760px
}

.topic-cloud .node .box {
    position: relative
}

.topic-cloud .node .tit1 {
    padding-top: 50px
}

.topic-cloud .node .icons {
    width: 90%;
    text-align: right;
    color: #333;
    margin-bottom: 10px
}

.topic-cloud .node .icons .item {
    margin: 10px
}

.topic-cloud .node .icons img {
    vertical-align: middle
}

.topic-cloud .node .nodemap {
    position: relative;
    width: 100%;
    height: 570px;
    background: url(../image/map3.png) center no-repeat
}

.topic-cloud .node .nodemap .map-site {
    opacity: 1
}

.topic-cloud .node .site-circle-hover {
    display: none
}

.topic-cloud .node .map-site a {
    z-index: 2;
    padding: 5px 10px;
    box-shadow: 0 0 5px #cad7e6;
    border-radius: 5px;
    background-color: #fff
}

.topic-cloud .node .map-site:hover .site-circle-hover {
    display: inline-block
}

.topic-cloud .node .map-site:hover .site-circle {
    display: none
}

.topic-cloud .node .map-site:hover a {
    color: #fff;
    background-color: #009cff;
    box-shadow: 0 0 5px #009cff
}

.topic-cloud .node .site-right a {
    position: absolute;
    right: -40px;
    top: 5px
}

.topic-cloud .node .site-left a {
    position: absolute;
    left: -40px;
    top: 5px
}

.topic-cloud .node .site-bottom a {
    position: absolute;
    left: -30px;
    top: 30px
}

.topic-cloud .node .cloudpublic-btn {
    position: relative;
    top: -50px
}

.topic-cloud .node .cloudpublic-btn .btn {
    padding: 0 25px;
    background: linear-gradient(to right, #2787e0, #2bdeee);
    border: none
}

.topic-cloud .node .cloudpublic-btn .btn:hover {
    background: linear-gradient(to left, #2787e0, #2bdeee)
}

@media screen and (max-width:1200px) {
    .topic-cloud .node {
        height: 700px
    }

    .topic-cloud .node .nodemap {
        background: url(../image/map3-phone.png) center no-repeat;
        background-size: 100%
    }

    .topic-cloud .node .nodemap .map {
        display: none
    }
}

@media screen and (max-width:992px) {
    .topic-cloud .node {
        height: 660px
    }
}

@media screen and (max-width:768px) {
    .topic-cloud .node {
        height: 500px
    }

    .topic-cloud .node .tit1 {
        font-size: 25px
    }

    .topic-cloud .node .nodemap {
        height: 360px
    }
}

.topic-cloud .example {
    background-color: #e7eff8
}

.topic-cloud .example h2 {
    font-size: 30px;
    display: table;
    padding-bottom: 50px
}

.topic-cloud .example span {
    font-size: 16px
}

.topic-cloud .example .title {
    vertical-align: top
}

.topic-cloud .example .title .btn {
    background-color: #f73d3d;
    border-radius: 3px;
    position: relative;
    margin-top: 40px
}

.topic-cloud .example .content {
    width: 85%
}

.topic-cloud .example .ten-month {
    position: relative
}

.topic-cloud .example .ten-month::before {
    content: "";
    background: url(../image/tit5-01.png) no-repeat center;
    top: -20px;
    left: 0;
    background-size: 100%;
    position: absolute;
    width: 170px;
    height: 10px
}

.topic-cloud .example .ten-month::after {
    content: "";
    background: url(../image/tit5-01.png) no-repeat center;
    bottom: -20px;
    left: 0;
    background-size: 100%;
    position: absolute;
    width: 170px;
    height: 10px
}

.topic-cloud .example .col-8 {
    position: relative;
    padding: 10px
}

.topic-cloud .example .exm-item {
    background-color: #ffffff;
    width: 100%;
    height: 280px
}

.topic-cloud .example .exm-item h3 {
    color: #183a98;
    font-size: 18px;
    margin: 0
}

.topic-cloud .example .exm-item-topnets {
    height: 330px
}

.topic-cloud .example del {
    display: block
}

.topic-cloud .example .exm-item:hover {
    cursor: pointer;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.03)
}

.topic-cloud .example .exm-item:hover .exm-item-title {
    background: linear-gradient(to right, #3463ea, #80b1f5);
    background-position: 100% 0
}

.topic-cloud .example .exm-item:hover .exm-item-title h3 {
    color: #ffffff
}

.topic-cloud .example .exm-item-title,
.topic-cloud .example .exm-link {
    height: 48px;
    width: 100%;
    background-size: 200%;
    line-height: 48px;
    padding: 0 20px
}

.topic-cloud .example .exm-item-title {
    border-bottom: #e5e5e5 1px solid
}

.topic-cloud .example .exm-content .bold {
    font-size: 14px
}

.topic-cloud .example .exm-content .one-row {
    border-spacing: initial
}

.topic-cloud .example .exm-content-top {
    margin: 0;
    height: 110px;
    padding: 20px 20px 0 20px;
    overflow: hidden
}

.topic-cloud .example .exm-content-data {
    text-align: center;
    width: 33.3%;
    border-right: #e5e5e5 1px solid
}

.topic-cloud .example .exm-content-data:last-child {
    border-right: none
}

.topic-cloud .example .exm-link {
    border-top: #e5e5e5 1px solid;
    font-size: 16px;
    margin-top: 20px
}

@media screen and (max-width:1200px) {
    .topic-cloud .example .wrapper>.one-row>* {
        display: block
    }

    .topic-cloud .example .wrapper>.one-row .title {
        text-align: center;
        margin-bottom: 20px
    }

    .topic-cloud .example .wrapper>.one-row .title br {
        display: none
    }

    .topic-cloud .example .wrapper>.one-row .title h2 {
        display: block;
        padding-bottom: 20px
    }

    .topic-cloud .example .content {
        width: 100%
    }
}

.topic-cloud .function .content {
    margin-top: 50px
}

.topic-cloud .function .col-1 {
    margin-top: 10px;
    text-align: center;
    min-height: 180px
}

.topic-cloud .function .col-1 hr,
.topic-cloud .function .col-1 p {
    display: none
}

.topic-cloud .function .col-1:hover {
    cursor: pointer
}

.topic-cloud .function .col-1:hover h3 {
    margin: 0 0 15px 0
}

.topic-cloud .function .col-1:hover hr,
.topic-cloud .function .col-1:hover p {
    display: block
}

.topic-cloud .function .col-1:hover p {
    margin-top: 15px
}

.topic-cloud .function .col-1:hover hr {
    width: 30px;
    background-color: #183a98;
    height: 2px;
    border: none
}

.topic-cloud .function .col-1:hover .fun-item-img,
.topic-cloud .function .col-1:hover h4 {
    display: none
}

.topic-cloud .function .fun-item-img {
    height: 60px
}

.topic-cloud .map {
    background: url(../image/050.jpg) center no-repeat;
    background-size: 100% 100%
}

.topic-cloud .map span {
    color: #ffffff
}

.topic-cloud .map h2 {
    color: #ffffff
}

.topic-cloud .map i {
    z-index: 10
}

.topic-cloud .map .content {
    margin-top: 50px
}

.topic-cloud .map .map-img {
    background-image: url(../image/map.png);
    min-height: 331px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px
}

.topic-cloud .map .map-img img {
    position: absolute;
    bottom: 25px;
    z-index: 1
}

.topic-cloud .map .site-right img {
    right: -38px;
    bottom: 10px
}

.topic-cloud .map .map-pic {
    display: none
}

.topic-cloud .map .map-line {
    background: url(../image/map-line2.png) no-repeat right top;
    position: absolute;
    width: 0;
    height: 0;
    -webkit-transition: all 4s ease-in 0s;
    -moz-transition: all 4s ease 0s;
    -o-transition: all 4s ease 0s
}

.topic-cloud .map .wave {
    background: #ffffff;
    animation: circle-wave 2s infinite;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    top: -26px;
    right: -13px;
    opacity: 0
}

.topic-cloud .map span {
    position: relative
}

.topic-cloud .map .map-site-center {
    position: absolute;
    left: 930px;
    top: 120px
}

.topic-cloud .map .map-site-center img {
    z-index: 3
}

.topic-cloud .map .map-site {
    position: absolute;
    opacity: 0
}

.topic-cloud .map .active {
    opacity: 1;
    transition: all 1s linear 0s
}

.topic-cloud .map .active .map-line {
    width: 820px;
    height: 250px
}

.topic-cloud .map .site-my .wave {
    right: 20px
}

.topic-cloud .map .site-left img {
    bottom: 10px;
    left: -30px
}

.topic-cloud .map .site-left .wave {
    right: 18px;
    top: -12px
}

.topic-cloud .map .map-table {
    margin-top: 20px
}

.topic-cloud .map .row>div>p {
    background-color: #0c307c;
    padding: 15px 0;
    margin: 0;
    text-align: center;
    color: #abc1de
}

.topic-cloud .map .row>div {
    float: left;
    min-height: 1px;
    padding: 1px;
    background-color: #345597
}

@media screen and (max-width:1200px) {
    .topic-cloud .map .map-img {
        display: none
    }

    .topic-cloud .map .map-pic {
        display: block;
        width: 100%
    }

    .topic-cloud .map .map-pic .pic {
        width: 100%
    }
}

.topic-cloud .visual {
    background: url(../image/051.jpg) no-repeat center;
    width: 100%
}

.topic-cloud .visual .topic-title {
    text-align: left
}

.topic-cloud .visual .vis-line {
    background: url(../image/054.png) no-repeat center;
    height: 429px;
    margin-top: -70px
}

@media screen and (max-width:1200px) {
    .topic-cloud .visual .vis-line {
        background: url(../image/055.png) no-repeat center;
        background-size: 100%
    }
}

@media screen and (max-width:992px) {
    .topic-cloud .visual .vis-line {
        height: 400px
    }
}

@media screen and (max-width:768px) {
    .topic-cloud .visual .vis-line {
        height: 350px;
        margin-top: -40px
    }
}

@media screen and (max-width:480px) {
    .topic-cloud .visual .vis-line {
        height: 150px;
        margin-top: -20px
    }
}

.topic-cloud .rent .topic-box {
    display: table
}

.topic-cloud .rent .topic-box>div {
    display: table-cell
}

.topic-cloud .rent .topic-box .topic-title {
    display: none
}

.topic-cloud .rent b {
    display: block
}

.topic-cloud .rent .rent-book {
    border: #e5e5e5 1px solid;
    border-right: none;
    padding: 40px
}

.topic-cloud .rent .rent-table {
    border: #e5e5e5 1px solid
}

.topic-cloud .rent .row::after,
.topic-cloud .rent .row::before {
    content: none
}

.topic-cloud .rent .row:first-child {
    border-bottom: #e5e5e5 1px solid
}

.topic-cloud .rent img {
    padding-top: 10px
}

.topic-cloud .rent .col-2:hover {
    cursor: pointer
}

.topic-cloud .rent .col-2:hover img {
    padding-top: 0;
    transition: all .5s ease
}

.topic-cloud .rent .col-2 {
    float: left;
    height: 230px;
    padding: 30px;
    border-right: #e5e5e5 1px solid
}

@media screen and (max-width:1200px) {
    .topic-cloud .rent .topic-box>div {
        display: block;
        margin-bottom: 20px
    }

    .topic-cloud .rent .topic-box .topic-title {
        display: block
    }

    .topic-cloud .rent .topic-box .rent-book {
        display: none
    }
}

@media all and (max-width:800px) {
    .topic-cloud .rent .col-2 {
        width: 100%;
        border-bottom: #e5e5e5 1px solid;
        border-right: none;
        padding: 10px 30px;
        height: 170px
    }
}

.topic-cloud .configure {
    background: url(../image/056.png) no-repeat center;
    min-height: 400px;
    background-size: 100% 100%
}

.topic-cloud .configure .col-8 {
    padding: 30px 20px 0 0
}

.topic-cloud .configure .col-9 {
    padding: 30px 20px 0 0
}

.topic-cloud .configure .row2 {
    padding: 0 90px
}

.topic-cloud .configure .cpu .select-ul {
    z-index: 5
}

.topic-cloud .configure .memory .select-ul {
    z-index: 4
}

.topic-cloud .configure .harddisk .select-ul {
    z-index: 3
}

.topic-cloud .configure .OS .select-ul {
    z-index: 2
}

.topic-cloud .configure .cpu .select,
.topic-cloud .configure .memory .select,
.topic-cloud .configure .harddisk .select,
.topic-cloud .configure .OS .select,
.topic-cloud .configure .flow .select,
.topic-cloud .configure .bandwidth .select,
.topic-cloud .configure .IP .select {
    height: 40px;
    margin: 0 auto;
    font-family: "Microsoft Yahei";
    font-size: 16px;
    background-color: #fff;
    position: relative;
    border: #bdc9d6 1px solid
}

.topic-cloud .configure .cpu .select:after,
.topic-cloud .configure .memory .select:after,
.topic-cloud .configure .harddisk .select:after,
.topic-cloud .configure .OS .select:after,
.topic-cloud .configure .flow .select:after,
.topic-cloud .configure .bandwidth .select:after,
.topic-cloud .configure .IP .select:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-left: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    position: absolute;
    top: 11px;
    right: 12px;
    transform: rotate(-45deg);
    transition: transfrom .3s ease-in, top .3s ease-out
}

.topic-cloud .configure .cpu .select p,
.topic-cloud .configure .memory .select p,
.topic-cloud .configure .harddisk .select p,
.topic-cloud .configure .OS .select p,
.topic-cloud .configure .flow .select p,
.topic-cloud .configure .bandwidth .select p,
.topic-cloud .configure .IP .select p {
    padding: 0 15px;
    width: 72%;
    line-height: 40px;
    cursor: pointer;
    font-size: 16px;
    float: right;
    margin: 0;
    height: 100%
}

.topic-cloud .configure .cpu .select .select-ul,
.topic-cloud .configure .memory .select .select-ul,
.topic-cloud .configure .harddisk .select .select-ul,
.topic-cloud .configure .OS .select .select-ul,
.topic-cloud .configure .flow .select .select-ul,
.topic-cloud .configure .bandwidth .select .select-ul,
.topic-cloud .configure .IP .select .select-ul {
    list-style-type: none;
    background-color: #fff;
    width: 72%;
    overflow-y: auto;
    position: absolute;
    top: 38.5px;
    right: 0;
    margin: 0;
    max-height: 0
}

.topic-cloud .configure .cpu .select-ul::-webkit-scrollbar,
.topic-cloud .configure .memory .select-ul::-webkit-scrollbar,
.topic-cloud .configure .harddisk .select-ul::-webkit-scrollbar,
.topic-cloud .configure .OS .select-ul::-webkit-scrollbar,
.topic-cloud .configure .flow .select-ul::-webkit-scrollbar,
.topic-cloud .configure .bandwidth .select-ul::-webkit-scrollbar,
.topic-cloud .configure .IP .select-ul::-webkit-scrollbar {
    width: 7px;
    background-color: #cad7e6
}

.topic-cloud .configure .cpu .select-ul::-webkit-scrollbar-thumb,
.topic-cloud .configure .memory .select-ul::-webkit-scrollbar-thumb,
.topic-cloud .configure .harddisk .select-ul::-webkit-scrollbar-thumb,
.topic-cloud .configure .OS .select-ul::-webkit-scrollbar-thumb,
.topic-cloud .configure .flow .select-ul::-webkit-scrollbar-thumb,
.topic-cloud .configure .bandwidth .select-ul::-webkit-scrollbar-thumb,
.topic-cloud .configure .IP .select-ul::-webkit-scrollbar-thumb {
    background-color: #e5e5e5
}

.topic-cloud .configure .cpu .select .select-ul li,
.topic-cloud .configure .memory .select .select-ul li,
.topic-cloud .configure .harddisk .select .select-ul li,
.topic-cloud .configure .OS .select .select-ul li,
.topic-cloud .configure .flow .select .select-ul li,
.topic-cloud .configure .bandwidth .select .select-ul li,
.topic-cloud .configure .IP .select .select-ul li {
    padding: 0 15px;
    line-height: 40px;
    cursor: pointer
}

.topic-cloud .configure .cpu .select li:hover,
.topic-cloud .configure .memory .select li:hover,
.topic-cloud .configure .harddisk .select li:hover,
.topic-cloud .configure .OS .select li:hover,
.topic-cloud .configure .flow .select li:hover,
.topic-cloud .configure .bandwidth .select li:hover,
.topic-cloud .configure .IP .select li:hover {
    background-color: #f7f5f5
}

.topic-cloud .configure .cpu .select li.selected,
.topic-cloud .configure .memory .select li.selected,
.topic-cloud .configure .harddisk .select li.selected,
.topic-cloud .configure .OS .select li.selected,
.topic-cloud .configure .flow .select li.selected,
.topic-cloud .configure .bandwidth .select li.selected,
.topic-cloud .configure .IP .select li.selected {
    background-color: #a3c6df;
    color: #fff
}

.topic-cloud .configure .cpu .select-title,
.topic-cloud .configure .memory .select-title,
.topic-cloud .configure .harddisk .select-title,
.topic-cloud .configure .OS .select-title,
.topic-cloud .configure .flow .select-title,
.topic-cloud .configure .bandwidth .select-title,
.topic-cloud .configure .IP .select-title {
    width: 28%;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background-color: #e7eff8;
    border-right: #bdc9d6 1px solid;
    height: 100%
}

.topic-cloud .configure .cpu .select-title span,
.topic-cloud .configure .memory .select-title span,
.topic-cloud .configure .harddisk .select-title span,
.topic-cloud .configure .OS .select-title span,
.topic-cloud .configure .flow .select-title span,
.topic-cloud .configure .bandwidth .select-title span,
.topic-cloud .configure .IP .select-title span {
    color: #183a98
}

@-webkit-keyframes slide-down {
    0% {
        transform: scale(1, 0)
    }

    25% {
        transform: scale(1, 1.01)
    }

    50% {
        transform: scale(1, .9)
    }

    75% {
        transform: scale(1, 1.01)
    }

    100% {
        transform: scale(1, 1)
    }
}

.topic-cloud .configure .cpu .select.open .select-ul,
.topic-cloud .configure .memory .select.open .select-ul,
.topic-cloud .configure .harddisk .select.open .select-ul,
.topic-cloud .configure .OS .select.open .select-ul,
.topic-cloud .configure .flow .select.open .select-ul,
.topic-cloud .configure .bandwidth .select.open .select-ul,
.topic-cloud .configure .IP .select.open .select-ul {
    max-height: 250px;
    transform-origin: 50% 0;
    -webkit-animation: slide-down .5s ease-in;
    transition: max-height .2s ease-out
}

.topic-cloud .configure .cpu .open,
.topic-cloud .configure .memory .open,
.topic-cloud .configure .harddisk .open,
.topic-cloud .configure .OS .open,
.topic-cloud .configure .flow .open,
.topic-cloud .configure .bandwidth .open,
.topic-cloud .configure .IP .open {
    box-shadow: 0 0 5px #cad7e6
}

.topic-cloud .configure .cpu .open p,
.topic-cloud .configure .memory .open p,
.topic-cloud .configure .harddisk .open p,
.topic-cloud .configure .OS .open p,
.topic-cloud .configure .flow .open p,
.topic-cloud .configure .bandwidth .open p,
.topic-cloud .configure .IP .open p {
    border: #183a98 1px solid
}

.topic-cloud .configure .cpu .select.open:after,
.topic-cloud .configure .memory .select.open:after,
.topic-cloud .configure .harddisk .select.open:after,
.topic-cloud .configure .OS .select.open:after,
.topic-cloud .configure .flow .select.open:after,
.topic-cloud .configure .bandwidth .select.open:after,
.topic-cloud .configure .IP .select.open:after {
    transform: rotate(-225deg);
    top: 18px;
    transition: all .3s ease-in
}

.topic-cloud .configure .flow p,
.topic-cloud .configure .bandwidth p,
.topic-cloud .configure .IP p {
    background-color: #e7eff8
}

@media screen and (max-width:1200px) {
    .topic-cloud .configure .row2 {
        padding: 0
    }
}

.topic-cloud .freetrial {
    background: url(../image/073.png) center no-repeat;
    height: 330px
}

.topic-cloud .freetrial.server {
    background: url(../image/095.jpg) center no-repeat
}

.topic-cloud .freetrial h1 {
    font-size: 48px;
    color: #fff;
    padding-top: 100px;
    margin: 0
}

.topic-cloud .freetrial .btn {
    padding: 0 30px;
    background: #fff;
    color: #300ad1;
    border: none;
    border-radius: 5px;
    margin-top: 20px
}

.topic-cloud .freetrial .btn:hover {
    border: none;
    color: #fff;
    background: #2e40e4;
    box-shadow: 0 0 5px #3345e2;
    margin-top: 10px;
    transition: all ease .5s
}

.topic-cloud .TL-promotion {
    background: #e7eff8
}

.topic-cloud .TL-promotion span {
    color: #18458f;
    font-size: 14px
}

.topic-cloud .TL-promotion .tips {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 30px
}

.topic-cloud .TL-promotion .tl-line {
    border-top: 1px solid #cddaea;
    border-bottom: 1px solid #cddaea;
    padding-left: 20px
}

.topic-cloud .TL-promotion .exm-item-title {
    background: linear-gradient(to left, #5bb8f7, #666aff)
}

.topic-cloud .TL-promotion .exm-item-title h3 {
    color: #fff
}

.topic-cloud .TL-promotion ul {
    margin: 0
}

.topic-cloud .TL-promotion li {
    font-size: 18px;
    line-height: 36px;
    color: #999
}

.topic-cloud .TL-promotion li span {
    font-size: 18px
}

.topic-cloud .TL-promotion .example {
    margin: 0 -10px
}

.topic-cloud .TL-promotion .example .exm-content ul {
    padding: 0 20px
}

.topic-cloud .TL-promotion .example .exm-item {
    height: auto
}

.topic-cloud .TL-promotion .example .exm-link {
    height: auto;
    margin-top: 0;
    padding: 10px 20px;
    line-height: 24px
}

.topic-cloud .TL-promotion .example .exm-link .data-price {
    text-align: right
}

.topic-cloud .TL-promotion .example .exm-link P {
    text-align: right;
    color: #999;
    margin: 0
}

.topic-cloud .TL-promotion .example .exm-link red {
    font-size: 24px
}

.topic-cloud .TL-promotion .example .exm-price {
    background-color: #f1f7ff
}

.topic-cloud .TL-promotion .example .exm-price .month {
    color: #333
}

.topic-cloud .TL-promotion .example .exm-price .year {
    color: #18458f
}

@media screen and (max-width:768px) {
    .topic-cloud .TL-promotion .example {
        margin: 0
    }
}

.topic-cloud .TL-promotion .renew-tab {
    margin-top: 20px;
    border-collapse: collapse;
    width: 100%
}

.topic-cloud .TL-promotion .renew-tab td {
    border: 1px solid #b7c1ce
}

.topic-cloud .TL-promotion .renew-tab .info {
    background-color: #fff
}

.topic-cloud .TL-promotion .renew-tab .tit {
    width: 140px;
    padding: 26px 35px;
    background-color: #f0f7ff;
    display: inline-block
}

.topic-cloud .TL-promotion .renew-tab p {
    margin: 0;
    padding: 26px 35px;
    display: inline-block
}

@media screen and (max-width:992px) {
    .topic-cloud .TL-promotion .renew-tab .tit {
        width: 100%;
        padding: 10px 20px;
        display: block
    }

    .topic-cloud .TL-promotion .renew-tab p {
        padding: 10px 20px
    }
}

.topic-cloud .partner {
    padding: 50px 0
}

.topic-cloud .partner .partner-table>div>div {
    text-align: center;
    padding: 25px 0;
    vertical-align: middle
}

.topic-cloud .partner .partner-table img {
    width: 120px
}

@media screen and (max-width:768px) {
    .topic-cloud .partner .partner-table img {
        width: 80px
    }
}

@media screen and (max-width:480px) {
    .topic-cloud .partner .partner-table img {
        width: 60px
    }
}

.topic-cloud .sidebar {
    position: fixed;
    top: -110px;
    left: 0;
    right: 0;
    z-index: 20001
}

.topic-cloud .sidebar .content {
    position: absolute;
    display: table;
    left: -120px
}

.topic-cloud .sidebar .title {
    background: url(../image/nav-bg1.png) center no-repeat;
    background-size: 100% 100%;
    display: table;
    padding: 16.5px;
    border-radius: 5px
}

.topic-cloud .sidebar .title b {
    display: block;
    color: #ffffff
}

.topic-cloud .sidebar .nav {
    display: table;
    padding: 17px;
    background-color: #cddaea;
    border-radius: 5px
}

.topic-cloud .sidebar .nav .nav-ul {
    margin: 0
}

.topic-cloud .sidebar .nav .nav-ul li {
    text-align: center;
    border-bottom: 1px #e5ebf2 solid;
    height: 35px;
    line-height: 35px;
    color: #18458f
}

.topic-cloud .sidebar .nav .nav-ul .nav-action {
    border-bottom: 1px #f73d3d solid !important
}

.topic-cloud .sidebar .nav .nav-ul li:hover {
    cursor: pointer;
    color: #f73d3d
}

.topic-cloud .sidebar .nav .TOP {
    text-align: center;
    margin-top: 10px
}

.topic-cloud .sidebar .nav .TOP:hover {
    cursor: pointer
}

@media screen and (max-width:1500px) {
    .topic-cloud .sidebar .content {
        position: absolute;
        display: table;
        left: -105px
    }
}

@media screen and (max-width:1200px) {
    .topic-cloud .sidebar .content {
        display: none
    }
}

@media screen and (max-width:768px) {
    .topic-cloud .freetrial {
        height: 200px
    }

    .topic-cloud .freetrial h1 {
        font-size: 32px;
        padding-top: 50px
    }
}

@media screen and (max-width:480px) {
    .topic-cloud h2 {
        font-size: 25px
    }
}

.topic-cloudFramework {
    padding: 20px 0;
    background: linear-gradient(to left, #04319e, #338ff7)
}

.topic-cloudFramework .tit1 {
    color: #fff
}

.topic-cloudFramework .title>div {
    position: relative;
    height: 70px;
    font-size: 24px;
    width: 255px;
    color: #fff;
    margin: 20px 0
}

.topic-cloudFramework .title>div::before {
    content: "";
    width: 43px;
    height: 48px;
    display: inline-block;
    background: url(../image/0271.png) center;
    vertical-align: middle;
    margin-right: 20px
}

.topic-cloudFramework .title>div::after {
    content: "";
    width: 255px;
    height: 27px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../image/026.png) center no-repeat
}

.topic-cloudFramework .diagram {
    text-align: right
}

@media screen and (max-width:992px) {
    .topic-cloudFramework .diagram {
        display: none
    }

    .topic-cloudFramework .title {
        width: 100%;
        background: url(../image/framework.png) right no-repeat;
        background-size: 70%
    }

    .topic-cloudFramework .title>div {
        height: 50px;
        font-size: 18px
    }
}

.topic-hkcloud .banner {
    height: 730px
}

.topic-hkcloud .map .map-line {
    background: url(../image/map-line2.png) no-repeat right top;
    right: -110px;
    top: -110px
}

.topic-hkcloud .map .site-right img {
    right: -68px;
    bottom: 0
}

.topic-hkcloud .map .site-right .wave {
    right: -70px;
    top: 0
}

.topic-hkcloud .configure .topic-btn1 {
    background: linear-gradient(to left, #3463ea, #80b1f5);
    border: none
}

.topic-hkcloud .configure .topic-btn1:hover {
    background: linear-gradient(to right, #3463ea, #80b1f5)
}

.topic-szcloud .data-tit {
    color: #18458f;
    font-weight: bold;
    font-size: 18px !important
}

.topic-szcloud .topic-btn1 {
    background: linear-gradient(to left, #5bb8f7, #666aff)
}

.topic-szcloud .topic-btn1:hover {
    background: linear-gradient(to right, #5bb8f7, #666aff)
}

.topic-szcloud .banner {
    height: 700px
}

.topic-szcloud .banner .title2 {
    padding: 58px 0 40px 0
}

.topic-szcloud .banner .try-btn {
    text-align: center
}

.topic-szcloud .banner .btn {
    font-size: 24px;
    font-weight: bold;
    width: 350px;
    height: 60px;
    line-height: 60px;
    border-radius: 60px
}

@media screen and (max-width:1200px) {
    .topic-szcloud .banner .title2 img {
        width: 60%
    }
}

@media screen and (max-width:992px) {
    .topic-szcloud .banner {
        height: 580px
    }
}

@media screen and (max-width:768px) {
    .topic-szcloud .banner {
        height: 430px
    }

    .topic-szcloud .banner .title2 {
        padding: 30px 0
    }

    .topic-szcloud .banner .btn {
        font-size: 18px;
        width: 300px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px
    }
}

@media screen and (max-width:480px) {
    .topic-szcloud .banner {
        height: 340px
    }

    .topic-szcloud .banner .title2 img {
        width: 80%
    }

    .topic-szcloud .banner .btn {
        font-size: 16px;
        width: 250px;
        height: 40px;
        line-height: 40px;
        border-radius: 40px
    }
}

.topic-szcloud .map {
    background: url(../image/058.jpg) center no-repeat;
    background-size: 100% 100%
}

.topic-szcloud .map .col-7>p {
    background-color: #181a85
}

.topic-szcloud .map .map-img {
    background: url(../image/map2.png) center no-repeat;
    min-height: 421px
}

.topic-szcloud .map .map-site-center {
    left: 930px;
    top: 350px
}

.topic-szcloud .map .map-line {
    background: url(../image/map-line.png) no-repeat bottom right;
    right: -48px;
    bottom: 2px
}

.topic-szcloud .map .site-right img {
    right: -38px;
    bottom: 0
}

.topic-szcloud .map .site-right .wave {
    right: -42px;
    top: 0
}

.topic-szcloud .topic-free-exp .topic-title>h2,
.topic-szcloud .TL-promotion .topic-title>h2 {
    font-weight: normal;
    margin-bottom: 30px
}

.topic-szcloud .topic-free-exp .topic-btn1,
.topic-szcloud .TL-promotion .topic-btn1 {
    width: auto;
    padding: 0 40px;
    margin: 20px 0 30px
}

.topic-szcloud .topic-free-exp .active-object .topic-btn1,
.topic-szcloud .TL-promotion .active-object .topic-btn1 {
    margin: 0
}

.topic-cloudpublic .tit1 {
    font-size: 36px;
    color: #333
}

.topic-cloudpublic .tit1.white {
    color: #fff
}

.topic-cloudpublic .banner {
    height: 700px
}

.topic-cloudpublic .banner .title h1 {
    color: #fff;
    font-size: 72px;
    font-weight: bold;
    margin: 60px 0 0 0
}

.topic-cloudpublic .banner .title h2 {
    color: #fff;
    font-size: 48px
}

.topic-cloudpublic .banner .title p {
    font-size: 14px
}

.topic-cloudpublic .banner .data {
    max-width: 600px;
    margin: auto
}

.topic-cloudpublic .banner .split-line {
    height: 90px;
    margin: 40px 0 0 0
}

@media screen and (max-width:992px) {
    .topic-cloudpublic .banner .title h1 {
        font-size: 48px;
        margin: 40px 0 0 0
    }

    .topic-cloudpublic .banner .title h2 {
        font-size: 30px
    }
}

@media screen and (max-width:768px) {
    .topic-cloudpublic .banner {
        height: 500px
    }

    .topic-cloudpublic .banner .title h1 {
        font-size: 36px;
        margin: 20px 0 0 0
    }

    .topic-cloudpublic .banner .title h2 {
        font-size: 24px
    }
}

.topic-cloudpublic .node {
    height: 740px
}

.topic-cloudpublic .node .box {
    box-shadow: 0 0 10px #cad7e6;
    border-radius: 10px;
    position: relative;
    top: -120px;
    background-color: #fff
}

.topic-cloudpublic .node .ps {
    font-size: 16px;
    padding-bottom: 40px
}

@media screen and (max-width:768px) {
    .topic-cloudpublic .node {
        height: 500px
    }
}

.topic-cloudpublic .example h2 {
    display: block;
    text-align: center;
    font-weight: normal;
    padding-bottom: 20px
}

.topic-cloudpublic .example .content {
    width: 100%
}

.topic-cloudpublic .example .exm-link {
    margin-top: 0
}

.topic-cloudpublic .example .exm-item {
    height: auto
}

.topic-cloudpublic .example .exm-item .tips-item {
    margin: 0;
    padding: 10px 20px
}

.topic-cloudpublic .example .exm-item .tips-item1 {
    background: #f0f7ff;
    margin-top: 10px
}

.topic-cloudpublic .example .exm-item:hover .exm-item-title {
    background: linear-gradient(to right, #666aff, #5bb9f7)
}

.topic-cloudpublic .example .discount-btn .item2 {
    color: #183a98
}

.topic-cloudpublic .cloudsolution {
    padding-top: 30px
}

.topic-cloudpublic .cloudsolution .content {
    margin: 70px 0 0
}

.topic-cloudpublic .cloudsolution .active .item {
    width: 350px;
    height: 492px;
    z-index: 10;
    top: -65px;
    left: -45px
}

.topic-cloudpublic .cloudsolution .active .item1 {
    background: url(../image/021.jpg) center
}

.topic-cloudpublic .cloudsolution .active .item2 {
    background: url(../image/022.jpg) center
}

.topic-cloudpublic .cloudsolution .active .item3 {
    background: url(../image/0231.jpg) center
}

.topic-cloudpublic .cloudsolution .active .item4 {
    background: url(../image/024.jpg) center
}

.topic-cloudpublic .cloudsolution .active .icon {
    padding-top: 45px;
    transition: all .5s
}

.topic-cloudpublic .cloudsolution .active p,
.topic-cloudpublic .cloudsolution .active .btn {
    opacity: 1;
    transition: opacity .5s
}

.topic-cloudpublic .cloudsolution .active h2 {
    padding-top: 20px;
    font-size: 24px;
    transition: all .5s
}

.topic-cloudpublic .cloudsolution .item1 {
    background: url(../image/021S.jpg) center
}

.topic-cloudpublic .cloudsolution .item2 {
    background: url(../image/022S.jpg) center
}

.topic-cloudpublic .cloudsolution .item3 {
    background: url(../image/023S.jpg) center
}

.topic-cloudpublic .cloudsolution .item4 {
    background: url(../image/024S.jpg) center
}

.topic-cloudpublic .cloudsolution .icon {
    padding-top: 90px;
    width: 100%;
    text-align: center
}

.topic-cloudpublic .cloudsolution .line {
    position: absolute;
    height: 3px;
    width: 50px;
    background: #2787e0;
    top: 180px;
    left: 50%;
    margin-left: -25px
}

.topic-cloudpublic .cloudsolution h2 {
    color: #fff;
    padding-top: 50px;
    font-size: 18px
}

.topic-cloudpublic .cloudsolution p {
    color: #fff;
    text-align: center;
    opacity: 0;
    font-size: 16px;
    line-height: 30px;
    padding-top: 30px
}

.topic-cloudpublic .cloudsolution .item {
    overflow: hidden;
    cursor: pointer;
    height: 360px;
    position: relative;
    background-size: 100%;
    padding: 0 50px
}

.topic-cloudpublic .cloudsolution .btn {
    background: linear-gradient(to right, #2787e0, #2bdeee);
    border: none;
    height: 42px;
    line-height: 42px;
    padding: 0 35px;
    font-size: 16px;
    margin: 20px 0;
    opacity: 0
}

.topic-cloudpublic .cloudsolution .card_wrap_xs .item {
    height: 200px
}

.topic-cloudpublic .cloudsolution .card_wrap_xs h2 {
    padding-top: 0
}

.topic-cloudpublic .cloudsolution .card_wrap_xs .icon {
    padding-top: 35px
}

.topic-cloudpublic .cloudsolution .card_wrap_xs .line {
    top: 150px
}

.topic-cloudpublic .cloudservice {
    background-size: 100% 100%
}

.topic-cloudpublic .cloudservice .row {
    padding: 0 0 60px 0
}

.topic-cloudpublic .cloudservice .col-8 {
    text-align: center
}

.topic-cloudpublic .cloudservice .col-8 img {
    width: 151px;
    height: 141px
}

.topic-cloudpublic .cloudservice .col-8 span {
    font-weight: bold;
    font-size: 20px;
    color: #052743
}

.topic-cloudpublic .cloudservice .col-8 p {
    padding: 10px 30px;
    color: #052743
}

.topic-cloudpublic .cloudservice .col-8>* {
    text-align: center;
    margin: 0
}

.topic-cloudpublic .cloudservice .tit1 {
    padding: 0 0 80px
}

@media screen and (max-width:768px) {
    .topic-cloudpublic .tit1 {
        font-size: 25px
    }
}

.topic-uscloud .topic-btn1 {
    background: linear-gradient(to left, #3463ea, #80b1f5);
    border: none
}

.topic-uscloud .topic-btn1:hover {
    background: linear-gradient(to right, #3463ea, #80b1f5);
    border: none
}

.topic-uscloud .banner {
    height: 548px
}

.topic-uscloud .banner .title2 {
    padding: 120px 0 0 0
}

.topic-uscloud .banner .title2 img {
    display: block;
    margin: auto
}

.topic-uscloud .banner .title2 .main-tit {
    margin: 50px 0 35px 25%
}

.topic-uscloud .example .topic-title h2 {
    display: block;
    padding-bottom: 40px
}

.topic-uscloud .example .content {
    width: 100%
}

.topic-uscloud .example .exm-item {
    height: 320px
}

.topic-uscloud .example .exm-content .exm-content-top {
    height: 100px
}

.topic-uscloud .example .exm-link {
    padding: 0 0;
    padding-top: 15px;
    margin-top: 30px;
    height: 80px;
    line-height: 20px
}

.topic-uscloud .example .exm-content-data {
    position: relative
}

.topic-uscloud .example .exm-content-data .ssd {
    position: absolute;
    text-align: center;
    width: 100%;
    margin: 0
}

.topic-uscloud .topic-server-node2 .nodemap {
    width: 100%;
    height: 500px;
    background: url(../image/map-us.png) center no-repeat
}

.topic-uscloud .topic-server-node2 .nodemap .map-site {
    opacity: 1
}

.topic-uscloud .topic-server-node2 .node-map-xs {
    text-align: center;
    display: none
}

.topic-uscloud .topic-server-node2 .node-map-xs img {
    width: 70%
}

@media screen and (max-width:1200px) {
    .topic-uscloud .topic-server-node2 .nodemap {
        display: none
    }

    .topic-uscloud .topic-server-node2 .node-map-xs {
        display: block;
        margin: auto
    }
}

@media screen and (max-width:480px) {
    .topic-uscloud .topic-server-node2 {
        height: 400px
    }

    .topic-uscloud .topic-server-node2 .node-map-xs img {
        width: 90%
    }
}

.topic-uscloud .map .map-site-center {
    left: 205px;
    top: 100px
}

.topic-uscloud .map .map-line {
    background: url(../image/map-line5.png) no-repeat top left;
    height: 250px
}

.topic-uscloud .map .active .map-line {
    width: 880px;
    height: 195px;
    top: -45px;
    left: 15px
}

.topic-uscloud .map .stie-cn-l .wave {
    right: 50px
}

.topic-uscloud .map .site-right .wave {
    right: -42px;
    top: -15px
}

.topic-uscloud .topic-Superiority-contrast .histogram {
    position: relative;
    overflow: hidden;
    width: 348px;
    height: 313px;
    margin: auto
}

.topic-uscloud .topic-Superiority-contrast .histogram img {
    padding: 320px 0 0 100px
}

.topic-uscloud .topic-Superiority-contrast .chart {
    margin: 30px 0
}

.topic-uscloud .topic-Superiority-contrast .chart-lg {
    display: none
}

.topic-uscloud .topic-Superiority-contrast .chart-lg img {
    width: 90%
}

.topic-uscloud .topic-Superiority-contrast .histogram1 {
    background: url(../image/histogram5-bg.png) center no-repeat
}

.topic-uscloud .topic-Superiority-contrast .histogram2 {
    background: url(../image/histogram6-bg.png) center no-repeat
}

.topic-uscloud .topic-Superiority-contrast .histogram3 {
    background: url(../image/histogram7-bg.png) center no-repeat
}

.topic-uscloud .topic-Superiority-contrast .histogram3 img {
    padding: 320px 0 0 115px
}

.topic-uscloud .topic-Superiority-contrast .col-2:hover {
    cursor: pointer
}

.topic-uscloud .topic-Superiority-contrast .col-2:hover .histogram1 img {
    padding: 55px 0 0 100px;
    transition: all ease 1s
}

.topic-uscloud .topic-Superiority-contrast .col-2:hover .histogram2 img {
    padding: 54px 0 0 100px;
    transition: all ease 1s
}

.topic-uscloud .topic-Superiority-contrast .col-2:hover .histogram3 img {
    padding: 66px 0 0 115px;
    transition: all ease 1s
}

.topic-uscloud .topic-Superiority-contrast .text {
    padding: 10px 0 0 86px
}

.topic-uscloud .topic-Superiority-contrast .text span {
    padding: 0 41px;
    color: #333
}

.topic-uscloud .topic-Superiority-contrast .contrast-table {
    text-align: center
}

.topic-uscloud .topic-Superiority-contrast .contrast-table img {
    width: 95%
}

@media screen and (max-width:1200px) {
    .topic-uscloud .topic-Superiority-contrast .chart {
        display: none
    }

    .topic-uscloud .topic-Superiority-contrast .chart-lg {
        display: block
    }
}

.topic-uscloud .configure .bandwidth .select p {
    font-size: 13px
}

.topic-sp-eccloud {
    background-color: #f9faff
}

.topic-sp-eccloud .banner {
    height: 500px
}

.topic-sp-eccloud .banner h1>b {
    font-weight: bold;
    font-size: 50px;
    color: #fff;
    text-shadow: 5px 5px #2338e1
}

.topic-sp-eccloud .banner .special {
    color: #ffd182
}

.topic-sp-eccloud .topic-btn1 {
    background-color: #4e76f7
}

.topic-sp-eccloud .title {
    text-align: center
}

.topic-sp-eccloud .title p {
    text-align: center;
    color: #333;
    font-size: 16px
}

.topic-sp-eccloud .title h2 {
    padding: 20px 0;
    margin: 50px 0 40px;
    font-size: 36px;
    position: relative
}

.topic-sp-eccloud .title h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 48%;
    width: 50px;
    display: block;
    height: 1px;
    border: 1px solid #4e76f7;
    background-color: #4e76f7;
    border-radius: 1px
}

.topic-sp-eccloud .solution .content {
    padding: 40px 50px;
    background: #fff;
    border: 1px solid #e1e6f0
}

.topic-sp-eccloud .solution p {
    font-size: 16px;
    line-height: 36px;
    color: #333
}

.topic-sp-eccloud .solution .tit {
    color: #4c73f6
}

.topic-sp-eccloud .qna-content p {
    font-size: 16px
}

.topic-sp-eccloud .qna-content .ques p,
.topic-sp-eccloud .qna-content .ques h3 {
    color: #4c73f6
}

.topic-sp-eccloud .qna-content .tit img {
    vertical-align: middle;
    margin-right: 10px
}

.topic-sp-eccloud .qna-content .qna-list>div {
    position: relative;
    padding: 50px;
    width: 50%
}

.topic-sp-eccloud .qna-content .qna-list .ques::before {
    content: "Q.";
    left: 0;
    color: #4c73f6;
    font-size: 40px;
    position: absolute;
    font-family: initial;
    display: inline-block;
    vertical-align: middle
}

.topic-sp-eccloud .qna-content .qna-list .ask::before {
    content: "A.";
    left: 0;
    font-size: 40px;
    position: absolute;
    font-family: initial;
    display: inline-block;
    vertical-align: middle
}

.topic-sp-eccloud .advantage .row {
    margin: 0 -25px
}

.topic-sp-eccloud .advantage .col-2,
.topic-sp-eccloud .advantage .col-3 {
    padding: 0 25px 25px
}

.topic-sp-eccloud .advantage .one-row {
    position: relative;
    padding: 25px 25px 10px;
    background-color: #fff;
    border: 1px solid #e1e6f0;
    min-height: 140px
}

.topic-sp-eccloud .advantage .one-row>div {
    vertical-align: top
}

.topic-sp-eccloud .advantage .one-row::after {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    width: 35px;
    display: block;
    height: 1px;
    border: 1px solid #4e76f7;
    background-color: #4e76f7;
    border-radius: 1px
}

.topic-sp-eccloud .advantage span {
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    color: #333
}

.topic-sp-eccloud .advantage p {
    font-size: 14px;
    line-height: 30px;
    color: #333
}

.topic-sp-eccloud .node {
    height: 720px
}

.topic-sp-eccloud .node .title h2 {
    margin-bottom: 20px
}

@media screen and (max-width:1200px) {
    .topic-sp-eccloud .node {
        height: 700px
    }

    .topic-sp-eccloud .node .nodemap {
        background: url(../image/map3-phone2.png) center no-repeat;
        background-size: 100%
    }

    .topic-sp-eccloud .node .nodemap .map {
        display: none
    }
}

.topic-sp-eccloud .MPC img {
    width: 90%
}

@media screen and (max-width:768px) {
    .topic-sp-eccloud .banner {
        height: 300px
    }

    .topic-sp-eccloud .banner .title {
        padding: 50px 0
    }

    .topic-sp-eccloud .banner .title h1 {
        font-size: 40px
    }

    .topic-sp-eccloud .title h2 {
        margin: 0 0 20px;
        font-size: 30px
    }

    .topic-sp-eccloud .title h2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 44%;
        width: 50px;
        display: block;
        height: 1px;
        border: 1px solid #4e76f7;
        background-color: #4e76f7;
        border-radius: 1px
    }

    .topic-sp-eccloud .solution .content {
        padding: 10px 20px
    }

    .topic-sp-eccloud .advantage .row {
        margin: 0
    }

    .topic-sp-eccloud .advantage .col-2 {
        padding: 0 0 15px
    }

    .topic-sp-eccloud .node {
        height: 450px
    }
}

.topic-spcloud h2 {
    font-weight: normal
}

.topic-spcloud yellow {
    color: #ffd182
}

.topic-spcloud .topic-btn2 {
    background: #ff8a44
}

.topic-spcloud .discount-btn {
    margin-top: 10px
}

.topic-spcloud .discount-btn .item {
    border: 1px solid #ff8a44
}

.topic-spcloud .discount-btn .item1 {
    background-color: #ff8a44
}

.topic-spcloud .banner {
    height: 430px
}

.topic-spcloud .banner .banner-txt {
    height: 430px
}

.topic-spcloud .banner .banner-txt h1 {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    text-shadow: 5px 5px 5px #244aeb
}

.topic-spcloud .banner .banner-txt img {
    margin: 35px 0 10px
}

.topic-spcloud .banner .banner-txt .btn {
    padding: 0 35px;
    border-radius: 34px;
    background-color: #3bb28d;
    border-color: #3bb28d
}

.topic-spcloud .topic-free-exp {
    padding-bottom: 50px
}

.topic-spcloud .topic-free-exp .topic-title2 {
    margin: 30px 0
}

.topic-spcloud .topic-free-exp .active-content {
    background: #22a87e;
    border: 1px solid #22a87e
}

.topic-spcloud .topic-free-exp .active-content .item {
    border-left: 1px solid #65c2a5
}

.topic-spcloud .topic-free-exp .active-content .item>:first-child {
    color: #1bffd7
}

.topic-spcloud .topic-free-exp .active-object {
    background: #f3fffb;
    border: 1px solid #22a87e
}

.topic-spcloud .topic-free-exp .active-object .data-tit,
.topic-spcloud .topic-free-exp .active-object .info>:last-child {
    color: #22a87e
}

.topic-spcloud .topic-free-exp .exp-box {
    box-shadow: 0 20px 20px #d5efe7
}

.topic-spcloud .topic-free-exp .item-configure,
.topic-spcloud .topic-free-exp .item-configure .title {
    border: 1px solid #cddaea
}

.topic-spcloud .topic-free-exp .cfg-btn {
    padding: 20px 0;
    text-align: center
}

.topic-spcloud .topic-free-exp .others-exp {
    margin: 0 -10px
}

.topic-spcloud .topic-free-exp .others-exp .col-3 {
    padding: 0 10px
}

.topic-spcloud .topic-free-exp .exp-item {
    margin: 0 -10px
}

.topic-spcloud .topic-free-exp .exp-item .col-2 {
    padding: 0 10px
}

.topic-spcloud .topic-free-exp .exp-item .item {
    padding: 20px 0 0;
    text-align: center;
    background-color: #f1f7ff;
    border: 1px solid #cddaea;
    height: 128px
}

.topic-spcloud .topic-free-exp .exp-item .item p {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: #18458f;
    margin: 0;
    font-weight: bold
}

.topic-spcloud .topic-free-exp .exp-item .item .text {
    font-weight: normal;
    font-size: 14px;
    color: #666
}

.topic-spcloud .topic-free-exp .exp-item .cloud-item {
    padding: 15px 0 0
}

.topic-spcloud .node {
    padding-bottom: 50px;
    background-color: #f1f7ff;
    height: auto
}

.topic-spcloud .node .ps {
    font-size: 16px;
    color: #666;
    margin-top: -20px
}

.topic-spcloud .example {
    background: #fff
}

.topic-spcloud .TL-promotion {
    background: #fff
}

.topic-spcloud .TL-promotion .exm-item {
    border: 1px solid #e5e5e5
}

.topic-spcloud .common-problem {
    padding: 40px 0 50px
}

.topic-spcloud .common-problem .row {
    margin: 0 -15px
}

.topic-spcloud .common-problem .col-2 {
    padding: 20px 15px 0
}

.topic-spcloud .common-problem .item {
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    cursor: pointer
}

.topic-spcloud .common-problem .item:hover {
    border: 1px solid #5cb1f7;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15)
}

.topic-spcloud .common-problem .arrow {
    padding-right: 10px
}

.topic-spcloud .common-problem .icon {
    width: 60px;
    border-radius: 3px 0 0 3px;
    text-align: center;
    background: linear-gradient(to right, #666aff, #5bb9f7)
}

.topic-spcloud .common-problem .icon img {
    vertical-align: middle
}

.topic-spcloud .common-problem .text {
    padding: 15px 20px
}

.topic-spcloud .common-problem span {
    color: #999;
    line-height: 24px
}

.topic-spcloud .common-problem p {
    color: #333;
    margin: 0
}

.topic-spcloud .free-tryout {
    background: url(../image/085.jpg) no-repeat center;
    height: 260px
}

.topic-spcloud .free-tryout a {
    display: block;
    font-size: 48px;
    color: #fff;
    line-height: 260px;
    text-align: center
}

@media screen and (max-width:768px) {
    .topic-spcloud .free-tryout {
        height: 160px
    }

    .topic-spcloud .free-tryout a {
        font-size: 24px;
        line-height: 160px
    }
}

@media screen and (max-width:768px) {
    .topic-spcloud .row {
        margin: 0 !important
    }

    .topic-spcloud .banner {
        height: 300px
    }

    .topic-spcloud .banner .banner-txt {
        height: 300px
    }

    .topic-spcloud .banner .banner-txt h1 {
        font-size: 36px
    }
}

.topic-cloud-public h2 {
    font-size: 36px;
    text-align: center
}

.topic-cloud-public .topic-banner {
    height: 500px;
    padding-top: 80px;
    background: url(../image/topic-cloud-public.jpg) no-repeat center
}

@keyframes ani {
    20% {
        transform: scale(.9, 1) rotatey(10deg)
    }

    40% {
        transform: scale(1.1, 1.1) translatey(-8px)
    }

    60% {
        transform: scale(.9, 1) rotatey(-5deg)
    }

    80% {
        transform: scale(1.1, 1.1) translatey(-7px)
    }
}

.topic-cloud-public .topic-banner .banner-tit {
    max-width: 600px
}

.topic-cloud-public .topic-banner .banner-tit p {
    color: #fff;
    font-size: 18px;
    line-height: 36px
}

.topic-cloud-public .topic-banner .banner-tit span {
    display: inline-block;
    background: url(../image/i007.png) center bottom no-repeat;
    background-size: 100%;
    padding: 0 8px;
    line-height: 24px
}

.topic-cloud-public .topic-banner .banner-tit b {
    font-size: 24px;
    font-style: italic;
    display: inline-block;
    transform: scale(.9, 1) rotatey(-10deg) translatey(0);
    animation: 2.2s ani cubic-bezier(.45, 0, .55, 1) infinite;
    transform-origin: 50% 100%;
    transform-style: preserve-3d
}

.topic-cloud-nav_1 {
    background-color: #f0f4fd;
    padding: 30px 0
}

.topic-cloud-nav_1 .float-item {
    padding: 10px
}

.topic-cloud-nav_1 .nav-item {
    border: 1px solid #d2d2d2;
    background-color: #fff;
    padding: 10px;
    height: 100%;
    text-align: center;
    font-size: 18px
}

.topic-cloud-nav_1 .nav-item img {
    vertical-align: middle;
    margin-right: 10px
}

.topic-cloud-flow {
    padding: 30px 0
}

.topic-cloud-flow .flow-tit {
    position: relative;
    margin-top: 30px;
    margin-bottom: 10px
}

.topic-cloud-flow .flow-tit .tit-left {
    float: left;
    font-size: 18px;
    font-weight: bold
}

.topic-cloud-flow .flow-tit .tit-right {
    float: right
}

.topic-cloud-flow .flow-tit .tit-right a {
    display: inline-block;
    color: #1c59dc;
    background-color: #f0f4fd;
    border: 1px solid #bcd1ff;
    padding: 0 25px;
    line-height: 34px;
    margin-left: 10px
}

.topic-cloud-flow .flow-tit .tit-right a:hover {
    cursor: pointer;
    background-color: #fff;
    transition: all .5s
}

.topic-cloud-flow .flow-tit::after {
    content: "";
    clear: both;
    display: block
}

.topic-cloud-flow .flow-tit::before {
    content: "";
    clear: both;
    display: block
}

.topic-cloud-flow .flow-step {
    background-color: #f0f4fd;
    border: 1px solid #bcd1ff;
    padding: 20px 40px
}

.topic-cloud-flow .flow-step .step-card {
    position: relative;
    border-left: 1px dotted #0c59db;
    padding-left: 35px;
    padding-right: 20px
}

.topic-cloud-flow .flow-step .step-item {
    margin-bottom: 20px
}

.topic-cloud-flow .flow-step .step-item::before {
    content: attr(data-value);
    position: absolute;
    display: inline-block;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 30px;
    background-color: #0c59db;
    left: -15px
}

.topic-cloud-flow .flow-step .step-item span {
    font-size: 18px;
    line-height: 32px;
    color: #1c59dc
}

.topic-cloud-flow .flow-step .step-item p {
    font-size: 16px;
    color: #333
}

.topic-cloud-scene .scene-nav {
    max-width: 600px;
    margin: auto
}

.topic-cloud-scene .scene-nav .nav-panel,
.topic-cloud-scene .scene-nav .nav-item {
    border: 1px solid #d2d2d2;
    border-collapse: collapse
}

.topic-cloud-scene .scene-nav .nav-item {
    text-align: center;
    width: 25%;
    padding: 8px 10px;
    font-size: 18px;
    color: #333
}

.topic-cloud-scene .scene-nav .nav-item:hover {
    cursor: pointer;
    color: #0c59db
}

.topic-cloud-scene .scene-nav .nav-item-act {
    border: 2px solid #0c59db;
    color: #0c59db
}

.topic-cloud-scene .scene-module {
    display: none;
    visibility: visible
}

.topic-cloud-scene .scene-module-open {
    display: block
}

.topic-cloud-scene .scene-module-open .scene-module-table {
    opacity: 1;
    transition: .5s
}

.topic-cloud-scene .scene-module .module-tit h5 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0
}

.topic-cloud-scene .scene-module .module-tit p {
    font-size: 16px;
    max-width: 950px;
    text-align: center;
    line-height: 32px
}

.topic-cloud-scene .scene-module-table {
    opacity: 0
}

.topic-cloud-scene .scene-module-table>div {
    padding: 10px
}

.topic-cloud-scene .scene-module-table .module-td {
    box-shadow: 0 0 15px rgba(21, 16, 38, 0.15);
    overflow: hidden
}

.topic-cloud-scene .scene-module-table .module-td img {
    width: 100%
}

.topic-cloud-scene .scene-module-table .module-td .td-panel {
    padding: 15px 30px
}

.topic-cloud-scene .scene-module-table .module-td .td-panel span {
    font-size: 20px;
    display: block
}

.topic-cloud-scene .scene-module-table .module-td .td-panel p {
    font-size: 16px
}

.topic-cloud-scene .scene-module-table .module-td .td-panel .line {
    display: inline-block;
    width: 60px;
    border-top: 3px solid #1c59dc
}

.topic-cloud-scene .scene-module-table .module-td:hover {
    cursor: pointer;
    box-shadow: 0 0 15px rgba(21, 16, 38, 0.3);
    transition: .6s
}

.topic-cloud-scene .scene-module-table .module-td:hover img {
    scale: 1.01;
    transition: .6s
}

.topic-cloud-scene .scene-module-table .module-td:hover .td-panel .line {
    width: 85px;
    transition: .6s
}

.topic-cloud-project .swiper-container {
    padding-top: 50px
}

.topic-cloud-project .project-slide-panel {
    min-height: 280px;
    padding: 45px 60px 20px
}

.topic-cloud-project .project-slide-panel span {
    color: #fff;
    font-size: 24px
}

.topic-cloud-project .project-slide-panel li {
    color: #fff;
    font-size: 16px;
    line-height: 36px
}

.topic-cloud-project .swiper-pagination {
    top: 0
}

.topic-cloud-project .swiper-pagination .swiper-pagination-bullet {
    width: auto;
    height: auto;
    padding: 10px 20px;
    border-radius: 0;
    color: #fff
}

.topic-cloud-offerdoc .banner {
    height: 340px;
    padding-top: 100px;
    color: #fff
}

.topic-cloud-offerdoc .banner h1 {
    font-size: 48px;
    font-weight: bold;
    margin: 0
}

.topic-cloud-offerdoc .banner p {
    text-align: center
}

.topic-cloud-offerdoc .banner b {
    color: #ffd801
}

.topic-cloud-offerdoc .offerdoc-table {
    padding: 60px 0 120px
}

.topic-cloud-offerdoc .offerdoc-table .title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px
}

.topic-cloud-offerdoc .offerdoc-table .table-nav {
    background-color: #5582ef;
    box-shadow: 0 0 20px rgba(44, 95, 226, 0.4)
}

.topic-cloud-offerdoc .offerdoc-table .table-nav-item {
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: center
}

.topic-cloud-offerdoc .offerdoc-table .table-nav-item.active {
    background: linear-gradient(#fee97b, #ffb01d);
    color: #333
}

.topic-cloud-offerdoc .offerdoc-table .table-nav-item:hover {
    cursor: pointer;
    background: #507ce2
}

.topic-cloud-offerdoc .offerdoc-table .table-content {
    display: none
}

.topic-cloud-offerdoc .offerdoc-table .table-content.open {
    display: block
}

.topic-cloud-offerdoc .offerdoc-table table,
.topic-cloud-offerdoc .offerdoc-table th,
.topic-cloud-offerdoc .offerdoc-table td {
    border: 1px solid #dcdcdc
}

.topic-cloud-offerdoc .offerdoc-table table {
    border-collapse: collapse;
    width: 100%
}

.topic-cloud-offerdoc .offerdoc-table .gray-bg {
    background: #e8edf7;
    text-align: center;
    padding: 0 10px
}

.topic-cloud-offerdoc .offerdoc-table .gray-bg.tit {
    width: 250px
}

.topic-cloud-offerdoc .offerdoc-table th {
    height: 55px
}

.topic-cloud-offerdoc .offerdoc-table td {
    height: 45px;
    padding-left: 50px
}

.topic-cloud-offerdoc .offerdoc-table .offer {
    color: #ea3a3a;
    font-weight: bold
}

.topic-cloud-offerdoc .btn {
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    border-color: transparent;
    color: #fff;
    padding: 0 20px;
    background: linear-gradient(to right, #1c4ac0, #4474ee);
    box-shadow: 0 10px 15px #cad8fa;
    margin-top: 40px
}

.topic-popup-voucher .content {
    height: 445px;
    width: 666px;
    background: url(../image/0014.jpg) center no-repeat, #3451eb
}

.topic-popup-voucher .content-xs {
    display: none;
    height: 240px;
    width: 350px
}

.topic-popup-voucher .ticket {
    text-align: center;
    padding: 140px 0 30px
}

.topic-popup-voucher .btn {
    background: linear-gradient(to right, #39abec, #42bde0);
    border: none;
    border-radius: 3px;
    width: 152px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    box-shadow: 0 5px 20px #122b98
}

@media screen and (max-width:500px) {
    .topic-popup-voucher {
        position: relative
    }

    .topic-popup-voucher .content {
        display: none
    }

    .topic-popup-voucher .content-xs {
        display: block;
        background: url(../image/0023.jpg) center no-repeat, #3451eb;
        background-size: 100%
    }
}

.topic-gragonboat {
    background: linear-gradient(to right, #aedac3, #83ccbb, #aedac3)
}

.topic-gragonboat .banner {
    height: 754px
}

.topic-gragonboat .special .title {
    text-align: center;
    margin: 80px 0 30px
}

.topic-gragonboat .special .item {
    position: relative;
    background: #fff;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 10px 10px 40px rgba(12, 95, 65, 0.4)
}

.topic-gragonboat .special .item p {
    text-align: center;
    color: #333;
    line-height: 30px;
    font-size: 16px
}

.topic-gragonboat .special .item .red {
    font-size: 30px;
    color: #f82828
}

.topic-gragonboat .special .item .data {
    padding: 15px 20px 25px
}

.topic-gragonboat .special .item .data .p1 {
    font-size: 14px;
    color: #666
}

.topic-gragonboat .special .item .data .p2 {
    font-size: 14px;
    color: #999;
    text-decoration: line-through
}

.topic-gragonboat .special .item .tit {
    background: linear-gradient(to right, #09a126, #bad258);
    border-radius: 10px 10px 0 0
}

.topic-gragonboat .special .item .tit h3 {
    font-size: 24px;
    margin: 0;
    text-align: center;
    color: #fff;
    padding: 20px 0
}

.topic-gragonboat .special .item .dash-line {
    height: 1px;
    width: 100%;
    border-bottom: 1px dashed #90d0bf
}

.topic-gragonboat .special .item .buy {
    border-radius: 3px;
    background: linear-gradient(to right, #f14e39, #f99f4e);
    border: none
}

.topic-gragonboat .special .item .line {
    border: 1px solid #f14e38;
    color: #f14e38;
    border-radius: 3px;
    margin-right: 10px
}

.topic-gragonboat .special .item .line:hover {
    background: #f14e38;
    color: #fff
}

.topic-gragonboat .special .item .button {
    display: table;
    margin: auto
}

.topic-gragonboat .special .flag {
    position: absolute;
    top: -30px;
    height: 45px;
    left: 43%
}

.topic-gragonboat .illustrate {
    padding: 60px 0
}

@media screen and (min-width:1200px) {
    .topic-gragonboat .col-8 {
        padding-top: 15px
    }

    .topic-gragonboat .col-8:hover {
        padding-top: 0;
        transition: all ease .5s
    }
}

.topic-national .tit1 {
    text-align: center
}

.topic-national .tit1 h1 {
    position: relative;
    display: inline-block
}

.topic-national .tit1 h1::before {
    content: url(../image/star.png);
    position: absolute;
    left: -60px
}

.topic-national .tit1 h1::after {
    content: url(../image/star.png);
    position: absolute;
    right: -60px
}

.topic-national .banner {
    min-height: 1005px;
    height: auto;
    padding: 50px 0;
    position: relative
}

.topic-national .topic-active-gift {
    margin-top: 130px
}

.topic-national .topic-active-gift img {
    max-height: 150px;
    max-width: 90%
}

@media screen and (max-width:1200px) {
    .topic-national .topic-active-gift img {
        max-width: 70%
    }
}

@media screen and (max-width:768px) {
    .topic-national .topic-active-gift {
        margin-top: 60px
    }

    .topic-national .topic-active-gift .info p {
        font-size: 14px
    }
}

.topic-national .stack {
    background-color: #fef7e0
}

@media screen and (max-width:768px) {
    .topic-national .stack #stack-pic {
        margin-top: 20px
    }
}

.topic-national .topic-discount {
    background-color: #fef7e0
}

.topic-national .topic-hotsale {
    padding-bottom: 40px
}

.topic-national .topic-hotsale .more {
    color: #fff;
    margin: 10px 0;
    display: block
}

.topic-national .topic-discount .wrapper {
    overflow: hidden
}

.topic-national .topic-discount red {
    font-weight: bold
}

.topic-national .topic-discount .data p {
    font-size: 16px
}

.topic-national .topic-discount .tit {
    background: -moz-linear-gradient(to right, #f22b2e, #ff5850);
    background: -webkit-linear-gradient(to right, #f22b2e, #ff5850);
    background: -o-linear-gradient(to right, #f22b2e, #ff5850);
    background: linear-gradient(to right, #f22b2e, #ff5850);
    position: relative
}

.topic-national .topic-discount .tit::after {
    content: attr(data-num);
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 60px;
    font-weight: bold;
    transform: skew(-10deg);
    color: #fe6d62
}

.topic-national .topic-discount .btn {
    width: 100%;
    background: #fff;
    border: 1px solid #fb4945;
    color: #fb4945;
    border-radius: 5px;
    height: 38px;
    line-height: 38px;
    margin: 10px 0
}

.topic-national .topic-discount .btn:hover {
    background: -moz-linear-gradient(to right, #f22b2e, #ff5850);
    background: -webkit-linear-gradient(to right, #f22b2e, #ff5850);
    background: -o-linear-gradient(to right, #f22b2e, #ff5850);
    background: linear-gradient(to right, #f22b2e, #ff5850);
    color: #fff;
    transition: all .5s
}

.topic-national .explain {
    padding-bottom: 60px
}

.topic-national .explain .content {
    background: #fef7e0;
    padding: 20px;
    color: #333
}

.topic-national .topic-free-exp {
    padding-bottom: 70px
}

.topic-national .topic-free-exp .cfg-btn {
    padding: 20px 0;
    text-align: center
}

.topic-national .topic-free-exp .topic-btn2 {
    background: -moz-linear-gradient(to right, #f22b2e, #ff5850);
    background: -webkit-linear-gradient(to right, #f22b2e, #ff5850);
    background: -o-linear-gradient(to right, #f22b2e, #ff5850);
    background: linear-gradient(to right, #f22b2e, #ff5850)
}

.topic-national .topic-free-exp .exp-box {
    box-shadow: 0 20px 20px #c83835
}

.topic-national .topic-free-exp .active-content {
    background: #ffc57c;
    border: 1px solid #ffc57c
}

.topic-national .topic-free-exp .active-content .item {
    border-left: 1px solid #ffefda;
    text-align: center
}

.topic-national .topic-free-exp red {
    color: #f63939 !important;
    line-height: 30px
}

.topic-national .topic-free-exp .tit,
.topic-national .topic-free-exp .data-tit,
.topic-national .topic-free-exp .eb-item p {
    color: #4d0c0e !important;
    font-weight: bold
}

.topic-national .topic-free-exp .active-object {
    background: #fef7e0;
    border: 1px solid #ffc57c
}

.topic-national .topic-free-exp .active-object .info>:last-child {
    color: #f63939
}

.topic-national .topic-free-exp .item-configure {
    background: #fff
}

.topic-national .topic-free-exp .item-configure,
.topic-national .topic-free-exp .item-configure .title,
.topic-national .topic-free-exp .cfg-item {
    border: 1px solid #ffc57c
}

.topic-national .topic-free-exp .cfg-item {
    border-top: 3px solid #ffc57c
}

.topic-national .topic-free-exp .cfg-item .item:not(:last-child) {
    border-right: 1px solid #ffc57c
}

.topic-national .topic-free-exp .cfg-item .tit {
    background-color: #fef7e0
}

.topic-national .topic-free-exp .cfg-item span {
    font-size: 18px;
    color: #4d0c0e !important
}

.topic-national .topic-free-exp .others-exp {
    margin: 0 -10px
}

.topic-national .topic-free-exp .others-exp .col-3 {
    padding: 0 10px
}

.topic-national .topic-free-exp .exp-item .col-2 {
    padding: 0 10px
}

.topic-national .topic-free-exp .exp-item .item {
    padding: 20px 0 0;
    text-align: center;
    background-color: #fef7e0;
    border: 1px solid #ffc57c;
    height: 128px
}

.topic-national .topic-free-exp .exp-item p {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: #4d0c0e;
    margin: 0;
    font-weight: bold
}

.topic-national .topic-free-exp .exp-item .text {
    font-weight: normal;
    font-size: 14px;
    color: #666
}

.topic-cloud1910 h1 {
    color: #fff
}

.topic-cloud1910 .topic-show-adv {
    padding-bottom: 50px;
    background: #75a1ea
}

.topic-cloud1910 .free-tryout {
    background: #110768;
    padding: 40px 0
}

.topic-cloud1910 .free-tryout .wrapper {
    background: url(../image/085.jpg) no-repeat center;
    height: 260px
}

.topic-cloud1910 .free-tryout .wrapper a {
    display: block;
    font-size: 48px;
    color: #fff;
    line-height: 260px;
    text-align: center
}

@media screen and (max-width:768px) {
    .topic-cloud1910 .free-tryout .wrapper {
        height: 160px
    }

    .topic-cloud1910 .free-tryout .wrapper a {
        font-size: 24px;
        line-height: 160px
    }
}

@media (max-width:1200px) {
    .topic-cloud1910 .configure-box01 .col-8 {
        width: 33%
    }
}

@media screen and (max-width:768px) {
    .topic-cloud1910 h1 {
        font-size: 20px;
        margin-top: 0
    }

    .topic-cloud1910 .configure-box01 .tit {
        font-size: 16px;
        line-height: 36px
    }

    .topic-cloud1910 .configure-box01 .col-8 {
        width: 50%
    }

    .topic-cloud1910 .topic-banner {
        text-align: center;
        width: 100%;
        overflow: hidden
    }

    .topic-cloud1910 .topic-banner img {
        transform: scale(1.2)
    }

    .topic-cloud1910 .extra-link1 a {
        padding: 10px 20px;
        margin: 15px 0 0
    }

    .topic-cloud1910 .extra-link1 a span {
        font-size: 18px;
        line-height: 30px
    }

    .topic-cloud1910 .extra-link1 a::after {
        top: 10px
    }

    .topic-cloud1910 .topic-atc-illustration .content {
        padding: 20px
    }
}

.topic-dc-sg .banner .banner-txt {
    max-width: 700px;
    width: auto
}

.topic-dc-sg .banner .content {
    position: relative
}

.topic-dc-sg .banner .content a {
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 9%;
    right: 0
}

.topic-dc-sg .topic-nav {
    position: relative;
    box-shadow: 0 0 10px rgba(2, 45, 134, 0.13);
    padding: 20px;
    background: #f7f6f9
}

.topic-dc-sg .topic-nav a {
    position: relative;
    color: #333;
    font-size: 18px
}

.topic-dc-sg .topic-nav .col-11 {
    position: relative;
    text-align: center;
    border-right: 1px solid #dcdcdc;
    height: 30px
}

.topic-dc-sg .topic-nav .col-11 .footer-line {
    width: 20%;
    background: #ff7207;
    height: 3px;
    margin: auto;
    display: none
}

.topic-dc-sg .topic-nav .col-11:hover .footer-line {
    display: block
}

.topic-dc-sg .topic-nav .col-11:hover a {
    top: -5px;
    font-weight: bold
}

.topic-dc-sg .topic-nav .col-11:last-child {
    border-right: none
}

.topic-dc-sg .typical {
    padding: 50px 0 70px
}

.topic-dc-sg .typical .tit1 p {
    color: #666;
    padding: 10px
}

@media screen and (min-width:992px) {
    .topic-dc-sg .typical .tit1 {
        padding: 0 150px 20px
    }
}

@media screen and (max-width:992px) {
    .topic-dc-sg .typical {
        padding: 0 0 50px
    }

    .topic-dc-sg .typical img {
        width: 90%
    }
}

.topic-dc-sg .operators {
    height: 540px;
    padding: 10px 0;
    background: url(../image/083.jpg) no-repeat
}

.topic-dc-sg .operators .item {
    position: relative;
    width: 142px;
    height: 142px;
    margin: auto
}

.topic-dc-sg .operators .operators-tp {
    display: none
}

.topic-dc-sg .operators .content {
    margin-top: 40px
}

.topic-dc-sg .operators .icon {
    transform: rotate(-45deg);
    position: relative;
    width: 142px;
    height: 142px;
    box-shadow: 0 20px 40px rgba(227, 170, 132, 0.4)
}

.topic-dc-sg .operators .icon:hover {
    cursor: pointer;
    width: 150px;
    height: 150px;
    transition: all .5s
}

.topic-dc-sg .operators .row {
    margin: auto
}

.topic-dc-sg .operators .row1 {
    width: 40%
}

.topic-dc-sg .operators .row2 {
    width: 80%
}

.topic-dc-sg .topic-delay {
    padding: 30px 0 70px
}

.topic-dc-sg .topic-delay .content-lg {
    display: none
}

.topic-dc-sg .topic-delay .content-lg img {
    width: 100%
}

.topic-dc-sg .topic-delay .item {
    text-align: center
}

.topic-dc-sg .topic-delay .item>div {
    width: 80px;
    margin: auto
}

.topic-dc-sg .topic-delay .title {
    color: #3f78f2;
    font-size: 18px;
    line-height: 42px;
    text-align: center
}

.topic-dc-sg .topic-delay .basic {
    margin: auto;
    display: block
}

.topic-dc-sg .topic-delay .line {
    height: 91px;
    margin: -10px 0 20px
}

@-webkit-keyframes dong {
    0% {
        height: 0
    }

    100% {
        height: 91px
    }
}

.topic-dc-sg .topic-delay .l {
    height: 91px;
    width: 1027px;
    margin: auto;
    background: url(../image/0072.png) no-repeat top center;
    animation: dong 3s ease-in infinite
}

.topic-dc-sg .topic-delay .active-line .l {
    height: 91px;
    width: 1027px
}

.topic-dc-sg .topic-delay .one-row {
    background: url(../image/0081.jpg) center;
    height: 200px
}

.topic-dc-sg .topic-delay .one-row>* {
    vertical-align: top
}

.topic-dc-sg .topic-delay .speed {
    font-size: 30px;
    line-height: 42px;
    color: #333
}

.topic-dc-sg .topic-delay .region {
    position: relative;
    display: block;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    font-size: 18px;
    color: #999;
    line-height: 48px
}

.topic-dc-sg .topic-delay .item:not(:last-child) .region::after {
    content: "·";
    font-size: 48px;
    color: #f7d98a;
    position: absolute;
    display: block;
    right: -40px;
    bottom: 0
}

.topic-dc-sg section.industry {
    background: #f7f6f9;
    min-height: 690px
}

.topic-dc-sg section.industry .tit1 {
    padding: 50px 0
}

.topic-dc-sg section.industry p {
    color: #e7edf5;
    padding: 10px 20px;
    line-height: 25px;
    text-align: center
}

.topic-dc-sg section.industry h2 {
    font-size: 20px;
    line-height: 48px;
    font-weight: bold;
    color: #fff;
    text-align: center
}

.topic-dc-sg section.industry .item .some-line {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    transition: all .3s ease-out
}

.topic-dc-sg section.industry .item .some-line>div {
    background: linear-gradient(to left, rgba(255, 86, 112, 0.9), rgba(253, 163, 107, 0.9))
}

@media screen and (min-width:1201px) {
    .topic-dc-sg section.industry .item .some-line {
        padding-top: 150px;
        height: 200px;
        padding-left: 20px;
        padding-right: 20px
    }

    .topic-dc-sg section.industry .item .some-line>div {
        min-height: 250px
    }

    .topic-dc-sg section.industry .item .some-line:hover {
        padding-top: 30px;
        transition: all .3s ease-out
    }

    .topic-dc-sg section.industry .item .some-line:hover>div {
        padding: 0
    }

    .topic-dc-sg section.industry .item .some-line:hover>div .one-row>* {
        display: block
    }

    .topic-dc-sg section.industry .item .some-line:hover h2 {
        width: 100%;
        padding-left: none;
        padding-left: 0;
        margin: 10px 0 0
    }

    .topic-dc-sg section.industry .item .some-line:hover p {
        padding: 0 20px
    }
}

.topic-dc-sg section.industry .some-row>*>* {
    width: 25%;
    min-height: 284px
}

.topic-dc-sg section.industry gap {
    width: 6px !important;
    padding: 0 15px
}

.topic-dc-sg section.industry .card1 {
    background: url(../image/013.jpg) no-repeat
}

.topic-dc-sg section.industry .card2 {
    background: url(../image/0141.jpg) no-repeat
}

.topic-dc-sg section.industry .card3 {
    background: url(../image/0151.jpg) no-repeat
}

.topic-dc-sg section.industry .card4 {
    background: url(../image/016.jpg) no-repeat
}

.topic-dc-sg section.industry .card5 {
    background: url(../image/0171.jpg) no-repeat
}

.topic-dc-sg section.industry .card6 {
    background: url(../image/018.jpg) no-repeat
}

.topic-dc-sg section.industry .card7 {
    background: url(../image/019.jpg) no-repeat
}

.topic-dc-sg section.industry .card8 {
    background: url(../image/020.jpg) no-repeat
}

@media screen and (max-width:1200px) {
    .topic-dc-sg section.industry .some-row>* div {
        width: 100%;
        display: block;
        min-height: 0
    }

    .topic-dc-sg section.industry .some-row>* div h2 {
        width: 100% !important;
        text-align: center !important;
        display: block;
        margin-bottom: 0
    }

    .topic-dc-sg section.industry .some-row>* gap {
        display: none !important
    }

    .topic-dc-sg section.industry .item {
        background: none
    }
}

.topic-dc-sg .topic-solution {
    padding: 0 0 50px
}

.topic-dc-sg .topic-solution .card {
    border-image: linear-gradient(to right, #fda36b, #ff5670) 20 20
}

.topic-dc-sg .topic-service {
    padding: 0 0 60px;
    background: #f7f6f9
}

.topic-dc-sg .topic-customer {
    background: #fff
}

@media screen and (max-width:1200px) {
    .topic-dc-sg .topic-nav {
        display: none
    }

    .topic-dc-sg .topic-delay .content {
        display: none
    }

    .topic-dc-sg .topic-delay .content-lg {
        display: block
    }
}

@media screen and (max-width:1024px) {
    .topic-dc-sg .banner img {
        width: 80%
    }

    .topic-dc-sg .operators {
        height: auto
    }

    .topic-dc-sg .operators .row {
        display: none
    }

    .topic-dc-sg .operators .content {
        margin-top: 0
    }

    .topic-dc-sg .operators .operators-tp {
        text-align: center;
        display: block
    }

    .topic-dc-sg .operators .operators-tp img {
        width: 90%
    }
}

.topic-dc-szdg .topic-tit,
.topic-dc-hk .topic-tit {
    text-align: left;
    color: #333;
    margin-bottom: 40px
}

.topic-dc-szdg .topic-tit img,
.topic-dc-hk .topic-tit img {
    vertical-align: middle
}

.topic-dc-szdg .topic-tit h2,
.topic-dc-hk .topic-tit h2 {
    font-size: 36px;
    font-weight: bold;
    margin: 0
}

.topic-dc-szdg .topic-tit p,
.topic-dc-hk .topic-tit p {
    color: #333;
    text-align: left
}

.topic-dc-szdg .tit1 p,
.topic-dc-hk .tit1 p {
    color: #333;
    font-size: 16px;
    margin: 20px 0
}

.topic-dc-szdg .tit1 h2,
.topic-dc-hk .tit1 h2 {
    font-size: 42px
}

.topic-dc-szdg .banner,
.topic-dc-hk .banner {
    height: 500px
}

.topic-dc-szdg .banner .banner-txt,
.topic-dc-hk .banner .banner-txt {
    max-width: 700px;
    height: 480px;
    width: auto;
    color: #fff
}

.topic-dc-szdg .banner .banner-txt h1,
.topic-dc-hk .banner .banner-txt h1 {
    font-size: 60px;
    font-weight: bold
}

.topic-dc-szdg .banner .banner-txt span,
.topic-dc-hk .banner .banner-txt span {
    font-size: 36px
}

.topic-dc-szdg .banner .banner-adv,
.topic-dc-hk .banner .banner-adv {
    margin: 30px 0
}

.topic-dc-szdg .banner .banner-adv .item,
.topic-dc-hk .banner .banner-adv .item {
    padding: 5px 10px;
    background: #fff;
    color: #333;
    min-width: 140px;
    text-align: center
}

.topic-dc-szdg .banner .banner-adv .item:nth-child(odd),
.topic-dc-hk .banner .banner-adv .item:nth-child(odd) {
    background: linear-gradient(to right, #f1d995, #f0623c);
    color: #fff
}

.topic-dc-szdg .banner .banner-adv img,
.topic-dc-hk .banner .banner-adv img {
    vertical-align: middle
}

.topic-dc-szdg .banner .content,
.topic-dc-hk .banner .content {
    position: relative
}

.topic-dc-szdg .banner .content a,
.topic-dc-hk .banner .content a {
    color: #fff
}

.topic-dc-szdg .dc-nav,
.topic-dc-hk .dc-nav {
    text-align: center;
    background: #eff3f8;
    padding: 0 20px
}

.topic-dc-szdg .dc-nav .nav-item,
.topic-dc-hk .dc-nav .nav-item {
    padding: 0 10px
}

.topic-dc-szdg .dc-nav .nav-item img,
.topic-dc-hk .dc-nav .nav-item img {
    height: 30px
}

.topic-dc-szdg .dc-nav .nav-item>div,
.topic-dc-hk .dc-nav .nav-item>div {
    padding: 13px 0 10px;
    font-weight: bold;
    border-bottom: 3px solid transparent
}

.topic-dc-szdg .dc-nav .nav-item.active,
.topic-dc-hk .dc-nav .nav-item.active {
    cursor: pointer;
    border-bottom: 3px solid #ef2a3a;
    color: #ef2a3a
}

.topic-dc-szdg .dc-nav span,
.topic-dc-hk .dc-nav span {
    display: block;
    text-align: center
}

.topic-dc-szdg .dc-intro,
.topic-dc-hk .dc-intro {
    padding-bottom: 60px
}

.topic-dc-szdg .dc-intro .intro-content,
.topic-dc-hk .dc-intro .intro-content {
    margin-top: 40px
}

.topic-dc-szdg .dc-intro .intro-info,
.topic-dc-hk .dc-intro .intro-info {
    display: none;
    padding-right: 20px;
    vertical-align: top
}

.topic-dc-szdg .dc-intro .intro-info.show,
.topic-dc-hk .dc-intro .intro-info.show {
    display: block
}

.topic-dc-szdg .dc-intro .intro-info .text::before,
.topic-dc-hk .dc-intro .intro-info .text::before {
    content: url(../image/i011.png);
    margin-right: 5px
}

.topic-dc-szdg .dc-intro .intro-info .text,
.topic-dc-hk .dc-intro .intro-info .text {
    margin-bottom: 20px;
    line-height: 32px
}

.topic-dc-szdg .dc-intro .intro-img,
.topic-dc-hk .dc-intro .intro-img {
    display: none
}

.topic-dc-szdg .dc-intro .intro-img.open,
.topic-dc-hk .dc-intro .intro-img.open {
    display: table-cell
}

.topic-dc-szdg .dc-intro .intro-descri,
.topic-dc-hk .dc-intro .intro-descri {
    border-bottom: 1px dashed #d2d2d2;
    padding: 20px 0;
    line-height: 32px;
    margin-bottom: 20px
}

.topic-dc-szdg .dc-intro-gray,
.topic-dc-hk .dc-intro-gray {
    background: #eff3f8
}

.topic-dc-szdg .dc-intro-gray .dc-nav,
.topic-dc-hk .dc-intro-gray .dc-nav {
    background: #fff
}

.topic-dc-szdg .dc-intro-gray .topic-tit,
.topic-dc-hk .dc-intro-gray .topic-tit,
.topic-dc-szdg .dc-intro-gray .topic-tit p,
.topic-dc-hk .dc-intro-gray .topic-tit p {
    text-align: right
}

.topic-dc-szdg .dc-intro-gray .intro-info,
.topic-dc-hk .dc-intro-gray .intro-info {
    padding-right: 0;
    padding-left: 20px
}

.topic-dc-szdg .dc-norms,
.topic-dc-hk .dc-norms {
    background-color: #eff3f8;
    padding: 30px 0 110px
}

.topic-dc-szdg .dc-norms .norms-content,
.topic-dc-hk .dc-norms .norms-content {
    display: flex;
    flex-wrap: nowrap
}

.topic-dc-szdg .dc-norms .norms-item,
.topic-dc-hk .dc-norms .norms-item {
    width: 25%;
    padding: 0 20px
}

.topic-dc-szdg .dc-norms .norms-item>div,
.topic-dc-hk .dc-norms .norms-item>div {
    border-top: 10px solid #2a6df4;
    background-color: #fff
}

.topic-dc-szdg .dc-norms .norms-item .norms-param,
.topic-dc-hk .dc-norms .norms-item .norms-param {
    padding: 20px 40px 0;
    border-bottom: 1px solid #c8cdd7
}

.topic-dc-szdg .dc-norms .norms-item .norms-data,
.topic-dc-hk .dc-norms .norms-item .norms-data {
    display: table;
    width: 100%;
    margin-bottom: 20px
}

.topic-dc-szdg .dc-norms .norms-item .norms-data>div,
.topic-dc-hk .dc-norms .norms-item .norms-data>div {
    display: table-cell;
    width: 50%
}

.topic-dc-szdg .dc-norms .norms-item .norms-data .data,
.topic-dc-hk .dc-norms .norms-item .norms-data .data {
    border: 1px solid #c8cdd7;
    background-color: #f5f4fa;
    padding: 0 10px
}

.topic-dc-szdg .dc-norms .norms-item .norms-price,
.topic-dc-hk .dc-norms .norms-item .norms-price {
    padding: 5px 40px
}

.topic-dc-szdg .dc-norms .norms-item .norms-price b,
.topic-dc-hk .dc-norms .norms-item .norms-price b {
    color: #ef2a3a;
    font-size: 30px
}

.topic-dc-szdg .dc-norms .norms-item a,
.topic-dc-hk .dc-norms .norms-item a {
    display: inline-block;
    width: 100%;
    color: #792500;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: linear-gradient(to right, #f1d995, #f0623c)
}

.topic-dc-szdg .dc-adv,
.topic-dc-hk .dc-adv {
    padding: 20px 0 130px;
    background: url(../image/b002.jpg) no-repeat center
}

.topic-dc-szdg .dc-adv .tit1 p,
.topic-dc-hk .dc-adv .tit1 p,
.topic-dc-szdg .dc-adv .tit1 h2,
.topic-dc-hk .dc-adv .tit1 h2 {
    color: #fff
}

.topic-dc-szdg .dc-adv .adv-item,
.topic-dc-hk .dc-adv .adv-item {
    padding: 0 10px
}

.topic-dc-szdg .dc-adv .adv-item>div,
.topic-dc-hk .dc-adv .adv-item>div {
    background: #fff;
    padding: 30px 18px;
    height: 100%
}

.topic-dc-szdg .dc-adv .adv-item span,
.topic-dc-hk .dc-adv .adv-item span {
    display: block;
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
    color: #333
}

.topic-dc-szdg .dc-adv .adv-item p,
.topic-dc-hk .dc-adv .adv-item p {
    line-height: 30px
}

.topic-dc-szdg .adv-extrapro,
.topic-dc-hk .adv-extrapro {
    background-color: #eff3f8;
    padding: 10px 0 110px
}

.topic-dc-szdg .adv-extrapro .extrapro-item,
.topic-dc-hk .adv-extrapro .extrapro-item {
    padding: 0 10px
}

.topic-dc-szdg .adv-extrapro .extrapro-info,
.topic-dc-hk .adv-extrapro .extrapro-info {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-size: 100% 100%
}

.topic-dc-szdg .adv-extrapro .extrapro-info span,
.topic-dc-hk .adv-extrapro .extrapro-info span {
    font-weight: bold;
    font-size: 24px;
    color: #fff
}

.topic-dc-szdg .adv-extrapro .extrapro-info p,
.topic-dc-hk .adv-extrapro .extrapro-info p {
    color: #fff;
    line-height: 30px
}

.topic-dc-szdg .adv-extrapro .extrapro-info:hover,
.topic-dc-hk .adv-extrapro .extrapro-info:hover {
    box-shadow: 0 5px 20px rgba(16, 114, 217, 0.4);
    transition: all .5s
}

.topic-dc-szdg .dc-sevice,
.topic-dc-hk .dc-sevice {
    padding: 120px 0
}

.topic-dc-szdg .dc-sevice-tit,
.topic-dc-hk .dc-sevice-tit {
    width: 250px;
    padding-right: 30px
}

.topic-dc-szdg .dc-sevice-tit p,
.topic-dc-hk .dc-sevice-tit p {
    text-align: initial;
    font-size: 24px;
    margin: 20px 0;
    color: #333
}

.topic-dc-szdg .dc-sevice .tit,
.topic-dc-hk .dc-sevice .tit {
    text-align: left;
    font-weight: bold;
    font-size: 36px
}

.topic-dc-szdg .dc-sevice-table .table-wrap,
.topic-dc-hk .dc-sevice-table .table-wrap {
    border-collapse: collapse
}

.topic-dc-szdg .dc-sevice-table .icon-h,
.topic-dc-hk .dc-sevice-table .icon-h {
    display: none
}

.topic-dc-szdg .dc-sevice-table .item,
.topic-dc-hk .dc-sevice-table .item {
    width: 20%;
    padding: 80px 10px 70px;
    text-align: center;
    border: 1px solid #a2c9ff
}

.topic-dc-szdg .dc-sevice-table .item span,
.topic-dc-hk .dc-sevice-table .item span {
    display: block;
    font-weight: bold;
    font-size: 24px;
    margin: 24px 0
}

.topic-dc-szdg .dc-sevice-table .item p,
.topic-dc-hk .dc-sevice-table .item p {
    text-align: center;
    font-size: 18px
}

.topic-dc-szdg .dc-sevice-table .item:hover,
.topic-dc-hk .dc-sevice-table .item:hover {
    background: linear-gradient(#4693ff, #0063ed);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 59, 142, 0.3);
    transition: all .5s
}

.topic-dc-szdg .dc-sevice-table .item:hover .icon,
.topic-dc-hk .dc-sevice-table .item:hover .icon {
    display: none
}

.topic-dc-szdg .dc-sevice-table .item:hover .icon-h,
.topic-dc-hk .dc-sevice-table .item:hover .icon-h {
    display: inline-block
}

.topic-dc-szdg .dc-sevice-table .item:hover span,
.topic-dc-hk .dc-sevice-table .item:hover span,
.topic-dc-szdg .dc-sevice-table .item:hover p,
.topic-dc-hk .dc-sevice-table .item:hover p {
    color: #fff
}

.topic-dc-szdg .dc-case,
.topic-dc-hk .dc-case {
    padding: 0 0 80px;
    background: url(../image/b006.jpg) no-repeat center
}

.topic-dc-szdg .dc-case .tit1 p,
.topic-dc-hk .dc-case .tit1 p,
.topic-dc-szdg .dc-case .tit1 h2,
.topic-dc-hk .dc-case .tit1 h2 {
    color: #fff
}

.topic-dc-szdg .dc-case .case-content,
.topic-dc-hk .dc-case .case-content {
    min-height: 340px
}

.topic-dc-szdg .dc-case .case-nav,
.topic-dc-hk .dc-case .case-nav {
    min-height: 340px;
    display: block;
    vertical-align: top;
    width: 170px;
    color: #fff;
    font-weight: bold;
    border-right: 1px solid #c8cdd7
}

.topic-dc-szdg .dc-case .case-nav .nav-item,
.topic-dc-hk .dc-case .case-nav .nav-item {
    cursor: pointer;
    padding-left: 45px;
    height: 50px;
    line-height: 50px
}

.topic-dc-szdg .dc-case .case-nav .nav-item.active,
.topic-dc-hk .dc-case .case-nav .nav-item.active {
    border-right: 3px solid #ef2a3a;
    background: linear-gradient(to right, transparent, #7abaf7)
}

.topic-dc-szdg .dc-case .case-table,
.topic-dc-hk .dc-case .case-table {
    vertical-align: top
}

.topic-dc-szdg .dc-case .case-item,
.topic-dc-hk .dc-case .case-item {
    margin-bottom: 20px
}

.topic-dc-szdg .dc-case .case-info,
.topic-dc-hk .dc-case .case-info {
    padding-left: 60px;
    display: none
}

.topic-dc-szdg .dc-case .case-info.open,
.topic-dc-hk .dc-case .case-info.open {
    display: block
}

.topic-dc-szdg .dc-case .case-info .case-img,
.topic-dc-hk .dc-case .case-info .case-img {
    width: 250px;
    height: 150px;
    text-align: center;
    background-color: #fff
}

.topic-dc-szdg .dc-case .case-info .case-img img,
.topic-dc-hk .dc-case .case-info .case-img img {
    max-width: 80%;
    max-height: 90%
}

.topic-dc-szdg .dc-case .case-info .case-text,
.topic-dc-hk .dc-case .case-info .case-text {
    border: 1px solid #fff;
    padding: 25px
}

.topic-dc-szdg .dc-case .case-info p,
.topic-dc-hk .dc-case .case-info p,
.topic-dc-szdg .dc-case .case-info span,
.topic-dc-hk .dc-case .case-info span {
    color: #fff
}

.topic-dc-szdg .dc-case .case-info span,
.topic-dc-hk .dc-case .case-info span {
    font-size: 24px;
    font-weight: bold
}

.topic-dc-szdg .dc-active,
.topic-dc-hk .dc-active {
    background: url(../image/b0016.jpg) no-repeat center;
    color: #fff;
    font-size: 30px;
    padding: 20px 0
}

.topic-dc-szdg .dc-active .btn,
.topic-dc-hk .dc-active .btn {
    background: #fff;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    padding: 0 40px;
    font-size: 16px;
    color: #ef2a3a
}

@keyframes routate {
    0% {
        -webkit-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
        transform: rotate(7deg)
    }

    50% {
        -webkit-transform: rotate(-7deg);
        -ms-transform: rotate(-7deg);
        transform: rotate(-7deg)
    }

    100% {
        -webkit-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
        transform: rotate(7deg)
    }
}

.topic-dc-szdg .routate-img,
.topic-dc-hk .routate-img {
    -webkit-animation-name: routate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-name: routate;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

.topic-idc .float-row {
    display: flex;
    flex-wrap: wrap
}

.topic-idc-southeast .pointcolor {
    color: #ff6c00
}

.topic-idc-southeast .btn {
    height: 40px;
    line-height: 40px;
    border-radius: 5px
}

@-webkit-keyframes text {
    from {
        background-position: -100px
    }

    to {
        background-position: 100px
    }
}

@keyframes text {
    from {
        background-position: -100px
    }

    to {
        background-position: 100px
    }
}

.topic-idc-southeast .title01 {
    text-align: center;
    padding: 15px 0
}

.topic-idc-southeast .title01 h2 {
    margin: auto;
    display: inline-block;
    font-weight: bold;
    color: #ff6c00;
    font-size: 36px;
    white-space: nowrap;
    padding: 0 280px;
    position: relative
}

.topic-idc-southeast .title01 h2::after {
    content: url(../image/0017.png);
    position: absolute;
    display: inline-block;
    margin: auto;
    top: 20%;
    left: 0
}

.topic-idc-southeast .title01 h2::before {
    content: url(../image/0026.png);
    position: absolute;
    display: inline-block;
    margin: auto;
    top: 20%;
    right: 0
}

.topic-idc-southeast .title02 {
    text-align: center;
    padding: 15px 0
}

.topic-idc-southeast .title02 h2 {
    margin: auto;
    display: inline-block;
    font-weight: bold;
    color: #ffffff;
    font-size: 36px;
    padding: 0 280px;
    position: relative
}

.topic-idc-southeast .title02 h2::after {
    content: url(../image/0034.png);
    position: absolute;
    display: inline-block;
    margin: auto;
    top: 20%;
    left: 0
}

.topic-idc-southeast .title02 h2::before {
    content: url(../image/0044.png);
    position: absolute;
    display: inline-block;
    margin: auto;
    top: 20%;
    right: 0
}

.topic-idc-southeast .band-nav {
    display: flex
}

.topic-idc-southeast .band-nav li {
    width: 14.4%;
    text-align: center
}

.topic-idc-southeast .band-nav .btn {
    width: 130px;
    background: #3f61fe;
    border: 1px solid #3f61fe
}

.topic-idc-southeast .band-nav .active .btn {
    background: #7ecef4;
    color: #333
}

.topic-idc-southeast .banner {
    text-align: center;
    height: 903px;
    padding-top: 160px
}

.topic-idc-southeast .banner .btn {
    background: #ff6c00;
    border: transparent;
    padding: 0 30px;
    margin-top: 90px
}

.topic-idc-southeast .banner .text {
    font-weight: 100;
    font-size: 26px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    margin: auto;
    max-width: 1060px
}

.topic-idc-southeast .banner b {
    color: #ff6c00;
    font-size: 30px
}

.topic-idc-southeast .box_01 {
    background: #f5f5f5;
    padding: 20px 0 30px
}

.topic-idc-southeast .box_01 .float-row {
    margin: 0 -25px
}

.topic-idc-southeast .box_01 .float-item {
    cursor: pointer;
    width: 25%;
    padding: 20px 25px
}

.topic-idc-southeast .box_01 .float-content {
    text-align: center;
    padding: 30px;
    background: #fff
}

.topic-idc-southeast .box_01 .float-content:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: ease .5s
}

.topic-idc-southeast .box_01 .float-content:hover b {
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: text 1.5s infinite
}

.topic-idc-southeast .box_01 b {
    color: #3b424d;
    display: block;
    text-align: center;
    font-size: 20px;
    margin: 20px 0
}

.topic-idc-southeast .box_01 p {
    text-align: center;
    color: #3b424d;
    font-size: 18px
}

.topic-idc-southeast .box_01 .btn {
    background: linear-gradient(to right, #2397f7, #3674e4);
    border: transparent;
    margin-top: 20px
}

.topic-idc-southeast .box_02 {
    background-image: linear-gradient(to bottom right, #345ff9, #0e1191);
    padding: 70px 0 10px
}

.topic-idc-southeast .box_02 .show {
    display: block
}

.topic-idc-southeast .box_02 .topic-gridtable {
    border: 1px solid #3359f3
}

.topic-idc-southeast .box_02 .topic-gridtable td {
    border: 1px solid #3359f3;
    color: #abc1de;
    font-size: 12px;
    height: 49px
}

.topic-idc-southeast .box_02 .panel-list {
    text-align: center
}

.topic-idc-southeast .box_02 .btn {
    background: #3f61fe;
    border: transparent;
    margin: 30px 0
}

.topic-idc-southeast .box_02 .btn:hover {
    background: #4f6ef7;
    transition: .5s
}

.topic-idc-southeast .box_03 {
    padding: 70px 0;
    background-color: #f5f9fa
}

.topic-idc-southeast .box_03 .title01 p {
    color: #3b424d;
    font-size: 24px;
    text-align: center;
    margin: 20px 0
}

.topic-idc-southeast .box_04 {
    padding: 20px 0 50px;
    background-image: linear-gradient(to bottom right, #345ff9, #0e1191)
}

.topic-idc-southeast .box_04 h3 {
    font-size: 24px
}

.topic-idc-southeast .box_04 .item p:first-child {
    color: #999
}

.topic-idc-southeast .box_04 .float-row .item {
    width: 33.3%;
    border: 1px solid #2643cb;
    background: #fff;
    text-align: center;
    padding: 40px 30px 20px
}

.topic-idc-southeast .box_05 {
    padding: 140px 0
}

.topic-idc-southeast .box_05 .title01 {
    margin-bottom: 90px
}

.topic-idc-southeast .box_05 .item {
    position: relative;
    width: 25%;
    padding: 60px 20px;
    border: 1px dashed #00a0e9;
    margin-right: -1px;
    margin-top: -1px
}

.topic-idc-southeast .box_05 .item>div {
    line-height: 69px;
    vertical-align: middle;
    text-align: center
}

.topic-idc-southeast .box_05 .item img {
    vertical-align: middle
}

.topic-idc-southeast .box_05 span {
    display: block;
    text-align: center
}

.topic-idc-southeast .box_05 .btn {
    background: #3f61fe;
    border: transparent;
    margin-top: 90px
}

@keyframes arrow-r {
    0% {
        right: 20px
    }

    100% {
        right: 10px
    }
}

@keyframes arrow-l {
    0% {
        left: 20px
    }

    100% {
        left: 10px
    }
}

@keyframes arrow-r {
    0% {
        right: 20px
    }

    100% {
        right: 10px
    }
}

@keyframes arrow-b {
    0% {
        bottom: 20px
    }

    100% {
        bottom: 10px
    }
}

.topic-idc-southeast .box_05 .right::after {
    content: url(../image/0025.png);
    position: absolute;
    right: 20px;
    top: 46%;
    animation: arrow-r ease 1s infinite
}

.topic-idc-southeast .box_05 .bottom::after {
    content: url(../image/0025.png);
    transform: rotate(90deg);
    position: absolute;
    bottom: 20px;
    left: 46%;
    animation: arrow-b ease 1s infinite
}

.topic-idc-southeast .box_05 .left::after {
    content: url(../image/0025.png);
    transform: rotate(180deg);
    position: absolute;
    left: 20px;
    top: 46%;
    animation: arrow-l ease 1s infinite
}

.topic-idc-southeast .box_06 {
    padding: 70px 0 150px;
    background-image: linear-gradient(to bottom right, #355ef9, #0e1191)
}

.topic-idc-southeast .box_06 .title02 {
    margin-bottom: 60px
}

.topic-idc-southeast .box_06 h3,
.topic-idc-southeast .box_06 p {
    color: #fff;
    text-align: center
}

.topic-idc-southeast .box_06 p {
    line-height: 30px
}

.topic-idc-southeast .box_06 h3 {
    font-size: 30px;
    margin: 20px 0
}

.topic-idc-southeast .box_06 .float-row .item {
    width: 33.3%;
    border: 1px dashed #5d9af1;
    padding: 20px 50px 30px;
    margin-right: -1px;
    margin-top: -1px
}

.topic-idc-southeast .topic-customer {
    padding: 100px 0
}

.topic-idc-southeast .topic-customer img {
    width: 226px
}

.topic-idc-global .topic-server-entry_1 .float-item {
    width: 25%;
    padding: 20px 10px
}

.topic-idc-global .topic-idc-flow_1 {
    background-color: #eff2f6
}

.topic-idc-global .topic-idc-flow_1 .btn {
    background: linear-gradient(to right, #2397f7, #3674e4);
    border: transparent;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    padding: 0 40px
}

.topic-idc-global .topic-protect .float-item {
    padding: 10px 8px
}

.topic-idc-global .topic-protect .item {
    height: 100%;
    text-align: left;
    padding: 25px 25px
}

.topic-idc-global .topic-protect .item h3 {
    font-size: 18px
}

.topic-idc-global .topic-protect .item .line {
    margin: 0 0 15px
}

.topic-idc-global .topic-protect .item p {
    text-align: left;
    line-height: 30px
}

.topic-promotion .banner {
    height: 500px
}

.topic-promotion.overseas .banner-text {
    padding-top: 160px
}

.topic-promotion.overseas .title {
    font-size: 48px;
    text-align: center;
    margin: 0;
    font-weight: bold;
    margin-bottom: 20px
}

.topic-promotion.overseas .subtitle {
    font-size: 18px;
    text-align: center
}

.topic-promotion.overseas .topic-pro-datatable .btn {
    font-size: 16px;
    padding: 0 60px;
    height: 50px;
    line-height: 50px;
    background-color: #007da1;
    border: 1px solid #007da1
}

.topic-promotion.overseas .topic-pro-datatable .btn:hover {
    transition: all .5s;
    background-color: #036985;
    border: 1px solid #036985
}

.topic-pro-datatable {
    padding: 60px 0 100px
}

.topic-pro-datatable .datatable-content {
    border-collapse: collapse;
    width: 100%;
    margin-top: 40px
}

.topic-pro-datatable .datatable-tit {
    height: 120px
}

.topic-pro-datatable .datatable-data tr:hover {
    background-color: #f0f4f6
}

.topic-pro-datatable .datatable-data td {
    border: 1px solid #dcdcdc
}

.topic-pro-datatable .datatable-data .data-cpu {
    width: 230px
}

.topic-pro-datatable .configs {
    border-right: 1px solid #dcdcdc
}

.topic-pro-datatable .configs label {
    font-size: 16px;
    color: #999
}

.topic-pro-datatable .configs p {
    text-align: center;
    font-size: 16px;
    color: #333
}

.topic-pro-datatable .price {
    text-align: left;
    padding-left: 30px;
    width: 355px;
    position: relative
}

.topic-pro-datatable .price .count {
    color: #ff6722;
    margin-right: 10px
}

.topic-pro-datatable .price orange {
    font-size: 30px;
    font-weight: bold
}

.topic-pro-datatable .price::before {
    content: url(../image/0018.png);
    position: relative;
    left: 0
}

.topic-pro-datatable2 {
    background-color: #dae7eb
}

.topic-pro-datatable2 .datatable-wrap {
    padding: 48px 0
}

.topic-pro-datatable2 .datatable-tit {
    width: 410px;
    padding: 70px 30px;
    background: url(../image/0015.jpg) center no-repeat
}

.topic-pro-datatable2 .datatable-tit p {
    line-height: 30px
}

.topic-pro-datatable2 .datatable-content {
    background-color: #fff
}

.topic-pro-datatable2 .datatable-data {
    padding: 40px 30px
}

.topic-pro-datatable2 .datatable-data table {
    border-collapse: collapse
}

.topic-pro-datatable2 .datatable-data .active {
    padding: 0 30px
}

.topic-pro-datatable2 .datatable-data .active p {
    line-height: 30px
}

.topic-pro-datatable2 .datatable-data td {
    border: 1px solid #dcdcdc;
    color: #333
}

.topic-pro-datatable2 .datatable-data tr:nth-child(odd) {
    background-color: #fff
}

.topic-pro-datatable2 .datatable-data tr:nth-child(even) {
    background-color: #f0f4f6
}

.topic-pro-datatable2 .datatable-data td:first-child {
    width: 220px;
    height: 55px;
    padding-left: 50px
}

.topic-pro-datatable2 .datatable-data td:nth-child(2) {
    text-align: center;
    width: 170px
}

.topic-pro-active {
    padding: 100px 0 120px
}

.topic-pro-active .active-content {
    margin: -15px -10px
}

.topic-pro-active .active-content>div {
    padding: 15px 10px
}

.topic-pro-active .item {
    height: 100%;
    padding: 15px 0 15px 30px;
    background-size: 100% 100%
}

.topic-pro-active .item h5 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #fff
}

.topic-pro-active .item p {
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    min-height: 60px
}

.topic-pro-active .item .btn {
    font-size: 16px;
    padding: 0 60px;
    height: 50px;
    line-height: 50px;
    background-color: transparent;
    border: 1px solid #fff
}

.topic-active .banner {
    height: 500px
}

.topic-active .topic-explain {
    padding-bottom: 60px
}

.topic-active .topic-explain .tit1 h2 {
    text-align: left
}

.topic-active .topic-explain .explain-content {
    border: 1px solid #d5d6dd;
    padding: 25px
}

.topic-active .topic-discount .tit1 {
    margin-bottom: 20px
}

.topic-active .topic-discount .tit1 p {
    margin-top: 10px;
    background: url(../image/0063.png) center no-repeat
}

.topic-active .topic-discount .tit1 span {
    color: #344583;
    font-size: 18px;
    margin-right: 10px
}

.topic-active .topic-discount .tit {
    position: relative;
    padding: 20px 35px
}

.topic-active .topic-discount .tit h5 {
    font-size: 24px
}

.topic-active .topic-discount .tit .tips {
    color: #fff;
    font-weight: normal;
    background-color: #ff5d32;
    display: inline-block;
    padding: 0 12px;
    line-height: 28px;
    border-radius: 30px;
    font-size: 18px;
    margin-left: 5px
}

@keyframes explosive {
    0% {
        transform: rotate(15deg);
        scale: 1
    }

    20% {
        transform: rotate(-10deg);
        scale: 1.03
    }

    40% {
        transform: rotate(5deg);
        scale: 1.02
    }

    60% {
        transform: rotate(-5deg);
        scale: .9
    }

    80% {
        transform: rotate(0deg);
        scale: 1.02
    }

    100% {
        transform: rotate(15deg);
        scale: 1
    }
}

.topic-active .topic-discount .tit .explosive-price {
    position: absolute;
    top: -50px;
    right: -20px;
    animation: explosive 2.5s .15s linear infinite
}

.topic-active .topic-discount .tit_1 {
    background: url(../image/0022.jpg) center no-repeat
}

.topic-active .topic-discount .tit_2 {
    background: url(../image/0032.jpg) center no-repeat
}

.topic-active .topic-discount .tit_3 {
    background: url(../image/0042.jpg) center no-repeat
}

.topic-active .topic-discount .data {
    padding: 15px 25px 25px
}

.topic-active .topic-discount .data p {
    font-size: 18px;
    line-height: 40px
}

.topic-active .topic-discount .data p::before {
    font-size: 48px
}

.topic-active .topic-discount .data .btn {
    width: 100%;
    margin-top: 15px;
    background: linear-gradient(to left, #f9b46c, #fac674);
    color: #482a11;
    height: 42px;
    line-height: 42px;
    border-color: transparent;
    transition: all .5s
}

.topic-active .topic-discount .data .btn:hover {
    letter-spacing: 10px;
    transition: letter-spacing .5s;
    border: 2px solid #f9b46c;
    background: #f5ebdb
}

.topic-active .topic-setmeal {
    padding: 20px 0 40px;
    background: url(../image/0051.jpg) center no-repeat
}

.topic-active .topic-setmeal .tit1 h2 {
    color: #fff;
    margin-bottom: 30px
}

.topic-active .topic-setmeal .setmeal-item {
    padding: 0 50px
}

.topic-active .topic-setmeal .setmeal-item-info {
    position: relative;
    display: inline-block;
    border: 1px solid #7d7d7d;
    height: 58px;
    line-height: 58px;
    border-radius: 58px;
    width: 100%;
    padding-left: 58px;
    text-align: center;
    margin-bottom: 45px
}

.topic-active .topic-setmeal .setmeal-item-info img {
    vertical-align: middle;
    position: absolute;
    top: -2.5px;
    left: -1px
}

.topic-active .topic-setmeal .setmeal-item-info span {
    color: #fff;
    font-size: 18px
}

.topic-active .topic-data-typebox {
    padding: 30px 0 60px
}

.topic-active .topic-data-typebox .tit1 {
    margin-bottom: 20px
}

.topic-active .topic-data-typebox .tit1 span {
    color: #344583;
    font-size: 18px;
    margin-right: 10px
}

.topic-active .topic-data-typebox .tit1 p {
    background: url(../image/0063.png) center no-repeat
}

.topic-active .topic-data-typebox .type-box-tit {
    padding: 10px 30px;
    width: 320px
}

.topic-active .topic-data-typebox .type-box-tit h3 {
    color: #fff;
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 22px;
    font-weight: bold
}

.topic-active .topic-data-typebox .type-box-tit p {
    color: #fff
}

.topic-active .topic-data-typebox .type-box-item {
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15)
}

.topic-active .topic-data-typebox .type-box-data {
    padding: 30px 0
}

.topic-active .topic-data-typebox .type-data-box {
    padding-left: 30px
}

.topic-active .topic-data-typebox .type-data-box .data-info {
    display: inline-block;
    min-width: 200px;
    margin-bottom: 15px
}

.topic-active .topic-data-typebox .type-data-box .data-info span {
    margin-top: 5px;
    display: inline-block;
    padding: 5px 20px;
    min-width: 170px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15)
}

.topic-active .topic-data-typebox .type-btn {
    width: 200px;
    text-align: center;
    border-left: 1px solid #dcdcdc
}

.topic-active .topic-data-typebox .type-btn .btn {
    background: linear-gradient(to right, #f9b46c, #fac674);
    border-color: transparent;
    color: #482a11
}

.topic-midyear .tit1 h2 {
    font-size: 36px
}

.topic-midyear .banner {
    overflow: hidden
}

@media screen and (max-width:1200px) {
    .topic-midyear .banner-title>img {
        width: 90%
    }
}

.topic-midyear .banner-wrapper {
    position: relative
}

.topic-midyear .banner-wrapper .banner-title {
    padding-top: 105px
}

@media screen and (max-width:768px) {
    .topic-midyear .banner-wrapper .banner-title {
        padding-top: 50px
    }
}

.topic-midyear .banner-wrapper .tit {
    margin-bottom: 15px
}

.topic-midyear .banner-wrapper .subtit {
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
    color: #fff
}

.topic-midyear .banner-bg1 {
    position: absolute;
    width: 100%;
    bottom: 0;
    animation: bg1 4s linear infinite
}

@keyframes bg1 {
    10% {
        bottom: -10px
    }

    30% {
        bottom: -30px
    }

    50% {
        bottom: -55px
    }

    55% {
        opacity: 0
    }

    70% {
        bottom: -30px
    }

    85% {
        bottom: -10px
    }

    100% {
        bottom: 0;
        opacity: 1
    }
}

.topic-midyear .banner-bg2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: bg2 4.5s .15s linear infinite
}

@keyframes bg2 {
    0% {
        scale: .7
    }

    100% {
        scale: 1.8;
        opacity: 0
    }
}

.topic-midyear .topic-standard {
    background-color: #f1f4f9;
    padding-bottom: 80px
}

.topic-midyear .topic-standard .has-txt {
    background-color: #fff;
    width: 50%;
    vertical-align: middle
}

.topic-midyear .topic-standard .standard-content {
    margin-top: 20px
}

.topic-midyear .topic-standard h3 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center
}

.topic-midyear .topic-standard p {
    font-size: 14px;
    max-width: 85%;
    text-align: center
}

.topic-serverfree .tit1 h2 {
    font-size: 36px
}

.topic-serverfree .banner {
    padding-top: 65px
}

@media screen and (max-width:1200px) {
    .topic-serverfree .banner img {
        width: 80%
    }
}

.topic-serverfree .banner-wrapper {
    position: relative;
    padding-top: 130px
}

@media screen and (max-width:768px) {
    .topic-serverfree .banner-wrapper {
        padding-top: 50px
    }

    .topic-serverfree .banner-wrapper .banner-coin_1 {
        right: 0;
        bottom: 100px;
        width: 80px
    }

    .topic-serverfree .banner-wrapper .banner-coin_2 {
        left: 30px
    }
}

.topic-serverfree .banner-coin {
    position: absolute
}

@keyframes coin1 {

    0%,
    20%,
    70%,
    100% {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    55% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -7px, 0);
        transform: translate3d(0, -7px, 0)
    }
}

.topic-serverfree .banner-coin_1 {
    right: 50px;
    bottom: 130px;
    animation: coin1 3s .15s linear infinite
}

.topic-serverfree .banner-coin_2 {
    left: 100px;
    bottom: 130px;
    animation: coin1 3s linear infinite
}

.topic-serverfree .banner-discount {
    margin-top: 30px;
    font-size: 18px;
    color: #fff
}

.topic-serverfree .banner-discount .point {
    background: url(../image/0019.png) center no-repeat;
    color: #3f2203;
    padding: 10px 20px
}

.topic-serverfree .banner-subtit {
    display: block;
    margin-bottom: 20px
}

.topic-serverfree .banner-subtit span {
    font-size: 24px;
    position: relative;
    color: #ffdba3;
    display: inline-block;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffdba3), color-stop(.4, #ffdba3), color-stop(.5, #666), color-stop(.6, #ffdba3), color-stop(1, #ffdba3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: text 2.5s infinite
}

.topic-serverfree .banner-subtit span::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 1px;
    background-color: #ffdba3;
    right: -160px;
    bottom: 0;
    top: 0;
    margin: auto
}

.topic-serverfree .banner-subtit span::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 1px;
    background-color: #ffdba3;
    left: -160px;
    bottom: 0;
    top: 0;
    margin: auto
}

.topic-serverfree .topic-intro .intro-content {
    padding: 15px;
    box-shadow: 0 0 16px rgba(0, 8, 29, 0.3);
    margin-top: -60px;
    background: #fff;
    position: relative;
    border-radius: 5px
}

.topic-serverfree .topic-intro .intro-details {
    border: 2px solid #c78943;
    padding: 20px 30px
}

.topic-serverfree .topic-intro .intro-details h3 {
    font-weight: bold;
    font-size: 24px;
    color: #333;
    margin: 0
}

.topic-serverfree .topic-intro .intro-details p {
    font-size: 18px;
    color: #666;
    line-height: 36px
}

.topic-serverfree .topic-datacenter {
    padding-bottom: 80px
}

.topic-serverfree .topic-datacenter .tit1 {
    width: 80%;
    margin: auto
}

.topic-serverfree .topic-protect {
    padding-bottom: 50px;
    background-color: #dbe1e8
}

.topic-double11 .banner .banner-content {
    padding-top: 100px
}

.topic-double11 .banner .title2 {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0
}

.topic-double11 .banner .double11-btn {
    display: block;
    margin: auto;
    width: 160px;
    height: 40px;
    line-height: 40px;
    border-color: transparent;
    border-radius: 40px;
    font-size: 16px;
    text-align: center;
    background: linear-gradient(#cf4c9c, #4693d0)
}

.topic-double11 .topic-gift .gift-content {
    padding: 20px 0;
    margin: 20px 0;
    background: url(../image/b001.png) left no-repeat
}

.topic-double11 .topic-gift .gift-item {
    padding: 20px 10px;
    text-align: center;
    color: #fff
}

.topic-double11 .topic-gift .gift-item .td-tit {
    font-size: 30px;
    border-right: 1px dashed #275dc1
}

.topic-double11 .topic-gift .gift-item .td-text {
    padding-left: 20px
}

.topic-double11 .topic-gift .gift-item p {
    font-size: 16px
}

.topic-double11 .topic-gift .gift-item .orange {
    color: #ff6f4b;
    font-weight: bold
}

.topic-double11 .topic-gift .gift-item-old {
    border: 1px solid #275dc1;
    box-shadow: 0 0 20px rgba(0, 10, 29, 0.2);
    background-color: #fff;
    color: #333;
    border-radius: 5px
}

.topic-double11 .topic-gift .gift-item-old .td-tit {
    color: #262a5a
}

.topic-double11 .topic-sale {
    background: url(../image/b0021.jpg) center no-repeat;
    padding: 10px 0 60px
}

.topic-double11 .topic-sale .tit1 h2 {
    color: #fff
}

.topic-double11 .topic-sale .tit1 p {
    margin-top: 10px;
    color: #fff;
    background: url(../image/0092.png) center no-repeat
}

.topic-double11 .topic-sale .tit1 p span {
    margin-left: 10px
}

.topic-double11 .topic-datacenter {
    padding: 10px 0 60px
}

.topic-endyear .tit1 h2 {
    text-align: center;
    font-size: 48px;
    color: #fff;
    font-weight: bold
}

.topic-endyear .tit1 h3 {
    text-align: left;
    color: #fff;
    font-size: 36px;
    margin: 0
}

.topic-endyear .banner .wrapper {
    padding-top: 150px
}

.topic-endyear .common-card {
    border-radius: 10px;
    background: linear-gradient(#0043e2, #25138d);
    padding: 25px
}

.topic-endyear .common-panel {
    background: #fff;
    border-radius: 9px;
    padding: 20px
}

.topic-endyear .end-rec-content .float-row>div {
    padding: 5px
}

.topic-endyear .end-rec-content .rec-item {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 9px;
    padding: 25px 40px
}

.topic-endyear .end-rec-content .rec-item .bg {
    position: absolute
}

.topic-endyear .end-rec-content .btn {
    background: linear-gradient(to right, #629dfe, #0042e1);
    border-radius: 30px;
    border-color: transparent;
    font-weight: bold;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px
}

.topic-endyear .end-rec-content span {
    font-weight: bold;
    font-size: 24px;
    color: #333
}

.topic-endyear .end-rec-content p {
    font-size: 24px;
    color: #333;
    margin: 0
}

.topic-endyear .end-rec-content .rec-item_1 {
    padding-right: 80px
}

.topic-endyear .end-rec-content .rec-item_1 .bg {
    right: -85px;
    bottom: -85px
}

.topic-endyear .end-rec-content .rec-item_2 {
    padding-left: 100px
}

.topic-endyear .end-rec-content .rec-item_2 .bg {
    left: -85px;
    bottom: -85px
}

.topic-endyear .end-rec-content .rec-item_3 {
    padding-right: 80px
}

.topic-endyear .end-rec-content .rec-item_3 .bg {
    right: -85px;
    top: -85px
}

.topic-endyear .end-rec-content .rec-item_4 {
    padding-left: 100px
}

.topic-endyear .end-rec-content .rec-item_4 .bg {
    left: -85px;
    top: -85px
}

.topic-endyear .product-config .item-title {
    width: 80px;
    text-align: right;
    padding-right: 20px;
    font-weight: bold
}

.topic-endyear .data-list li {
    float: left;
    margin: 0 5px 5px 0;
    border: 1px solid #dcdcdc;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    height: 30px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    min-width: 80px;
    cursor: pointer;
    padding: 0 15px
}

.topic-endyear .data-list li.active {
    border: 1px solid #3555f6 !important;
    background-color: #e1edf9 !important;
    color: #3555f6
}

.topic-endyear .item-quantity .data-list .number {
    width: 65px;
    height: 40px;
    line-height: 40px;
    border-left: none;
    border-right: none
}

.topic-endyear .item-quantity .data-list li {
    width: 40px;
    padding: 0;
    min-width: unset
}

.topic-endyear .item-quantity .data-list li {
    height: 40px;
    line-height: 40px;
    margin: 0
}

.topic-endyear .item-quantity .data-list .input-num {
    text-align: center;
    border: none;
    height: 40px;
    line-height: 40px
}

.topic-endyear .layui-form-item {
    margin: 0;
    max-width: 250px
}

.topic-endyear .layui-form-select dl {
    top: 20px
}

.topic-endyear .layui-form-select dl dd {
    margin: 0
}

.topic-endyear .layui-form-select dl dd.layui-this {
    background-color: #e1edf9;
    color: #3555f6
}

.topic-endyear .product-config .data-site>div {
    margin-bottom: 10px
}

.topic-endyear .product-config .common-panel {
    padding: 0
}

.topic-endyear .product-config .btn {
    background: linear-gradient(to right, #629dfe, #0042e1);
    border-radius: 30px;
    border-color: transparent;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px
}

.topic-endyear .product-config .data-panel {
    padding: 25px
}

.topic-endyear .product-config .price-panel {
    padding: 25px;
    background: #e1edf9;
    width: 330px
}

.topic-endyear .product-config .price-panel #price {
    color: #ed553d;
    font-size: 36px;
    font-weight: bold
}

.topic-endyear .topic-explain p {
    color: #fff;
    line-height: 32px
}

.topic-quarter {
    background: url(../image/topic-quarter.png) top no-repeat #2c5fe2
}

.topic-quarter .tit,
.topic-quarter .tit-w {
    text-align: center;
    margin-bottom: 40px
}

.topic-quarter .tit h2,
.topic-quarter .tit-w h2 {
    font-size: 36px;
    padding-top: 20px;
    margin-top: 0
}

.topic-quarter .tit p,
.topic-quarter .tit-w p {
    font-size: 16px;
    margin: 0 0 10px 0;
    text-align: center
}

.topic-quarter .tit-w p,
.topic-quarter .tit-w h2 {
    color: #fff
}

.topic-quarter .banner {
    padding-top: 150px
}

.topic-quarter-preferential {
    padding: 200px 0 70px
}

.topic-quarter-preferential .btn {
    background: transparent;
    color: #fff;
    border-color: #fff;
    padding: 0 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 40px
}

.topic-quarter-preferential .pre-nav {
    background-color: #5582ef;
    box-shadow: 0 0 20px rgba(44, 95, 226, 0.4)
}

.topic-quarter-preferential .pre-nav-item {
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: center
}

.topic-quarter-preferential .pre-nav-item.active {
    background: linear-gradient(#fee97b, #ffb01d);
    color: #333
}

.topic-quarter-preferential .pre-nav-item:hover {
    cursor: pointer;
    background: #507ce2
}

.topic-quarter-preferential .pre-table {
    margin-top: 30px
}

.topic-quarter-preferential .pre-table .flex-row {
    margin: 0 -10px
}

.topic-quarter-preferential .pre-table .flex-item {
    padding: 0 10px
}

.topic-quarter-preferential .pre-table-item {
    display: none
}

.topic-quarter-preferential .pre-table-item.open {
    display: block
}

.topic-quarter-preferential .pre-card {
    background: #fff;
    padding-top: 10px
}

.topic-quarter-preferential .pre-card .pre-data {
    border-bottom: 1px solid #dcdcdc
}

.topic-quarter-preferential .pre-card .pre-data .item {
    height: 45px;
    line-height: 45px;
    padding: 0 25px
}

.topic-quarter-preferential .pre-card .pre-data .item:nth-child(odd) {
    background: #f4f7ff
}

.topic-quarter-preferential .pre-card .pre-data label {
    color: #666;
    padding-right: 30px
}

.topic-quarter-preferential .pre-card .pre-data span {
    font-weight: bold
}

.topic-quarter-preferential .pre-card .pre-price {
    padding: 10px 25px;
    color: 16px
}

.topic-quarter-preferential .pre-card .pre-price span {
    background-color: #ea3a3a;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
    padding: 0 5px
}

.topic-quarter-preferential .pre-card .pre-price sub {
    color: #ff6a00
}

.topic-quarter-preferential .pre-card .pre-price label {
    color: #ff6a00;
    font-size: 36px
}

.topic-quarter-preferential .pre-card .pre-btn {
    display: block;
    text-align: center;
    color: #ea3a3a;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15)
}

.topic-quarter-preferential .pre-card .pre-btn:hover {
    background-color: #ea3a3a;
    color: #fff
}

.topic-quarter .topic-spzone {
    padding: 60px 0;
    background-color: #fff
}

.topic-quarter .topic-spzone .flex-row {
    margin: 0 -10px
}

.topic-quarter .topic-spzone .flex-item {
    padding: 0 10px;
    margin-bottom: 20px
}

.topic-quarter .topic-spzone-trait .spz-trait-card {
    border: 1px solid #4474ee;
    padding: 20px 20px 10px;
    height: 100%
}

.topic-quarter .topic-spzone-trait .spz-trait-card span {
    font-size: 24px
}

.topic-quarter .topic-spzone-trait .spz-trait-card img {
    vertical-align: middle;
    margin-right: 10px
}

.topic-quarter .topic-spzone .act-img {
    margin: 20px 0
}

.topic-quarter .topic-spzone-node .node-title {
    background-color: #e8edf7;
    border-bottom: 3px solid #ffb424;
    padding: 5px 0;
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #153ca0
}

.topic-quarter .topic-spzone-node .node-content {
    margin-top: 20px;
    padding-bottom: 50px;
    background: url(../image/map1.png) no-repeat center;
    background-size: 90%
}

.topic-quarter .topic-spzone-node .node-content .item-title {
    width: 80px
}

.topic-quarter .topic-spzone-node .node-content li {
    float: left;
    margin: 0 5px 5px 0;
    border: 1px solid #829fe7;
    line-height: 32px;
    font-size: 14px;
    color: #666;
    height: 32px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    min-width: 80px;
    cursor: pointer;
    padding: 0 5px;
    background-color: #fff
}

.topic-quarter .topic-spzone-node .node-content li:hover a {
    color: #0042e1
}

.topic-quarter .topic-spzone-rare {
    background-color: #2c5fe2
}

.topic-quarter .topic-spzone-rare .topic-spzone-node .node-title {
    background-color: #1c4ac0;
    color: #fff
}

.topic-quarter .topic-spzone-rare .topic-spzone-node .node-content {
    background: url(../image/map21.png) no-repeat center
}

.topic-quarter .topic-spzone-rare .topic-spzone-node .node-content .item-title {
    color: #fff
}

.topic-quarter .topic-spzone-rare .topic-spzone-node .node-content li {
    background-color: #4f80ff
}

.topic-quarter .topic-spzone-rare .topic-spzone-node .node-content li:hover a {
    color: #fff;
    background-color: #2c5fe2
}

.topic-quarter .topic-spzone-rare .topic-spzone-node .node-content a {
    color: #fff
}

.topic-quarter .topic-spzone-cdn {
    background-color: #1c4ac0;
    padding-bottom: 130px
}

.topic-quarter .topic-spzone-cdn .topic-spzone-trait .spz-trait-card {
    margin-bottom: 20px
}

.topic-quarter .topic-spzone-cdn .topic-spzone-trait span,
.topic-quarter .topic-spzone-cdn .topic-spzone-trait p {
    color: #fff
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card {
    padding-top: 0;
    background-color: #fff
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-title {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    padding: 10px 25px;
    font-weight: bold;
    z-index: 10
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-data .item {
    margin: 0;
    padding: 10px 25px
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-data .item:nth-child(even) {
    background: #f4f7ff;
    border-top: 1px solid #dcdcdc
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-price span {
    background-color: #ea3a3a;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
    padding: 0 5px
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-price sub {
    color: #ff6a00
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-price label {
    color: #ff6a00;
    font-size: 36px
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-btn {
    display: block;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15)
}

.topic-quarter .topic-spzone-cdn .spzone-table .pre-card .pre-price-default .count {
    height: 54px;
    line-height: 64px
}

.topic-quarter .topic-quarter-sence {
    background: url(../image/scene-bg.jpg) center no-repeat #002661;
    padding: 80px 0 100px
}

.topic-quarter .topic-quarter-sence .btn {
    background: transparent;
    color: #fff;
    border-color: #fff;
    padding: 0 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 20px
}

.topic-quarter .topic-quarter-sence .flex-row {
    margin: 0 -10px
}

.topic-quarter .topic-quarter-sence .flex-item {
    padding: 0 10px
}

.topic-quarter .topic-quarter-sence .sence-card {
    height: 100%;
    background: #1c4ac0
}

.topic-quarter .topic-quarter-sence .sence-card_1 .sence-title {
    background: url(../image/scene_03.jpg) center no-repeat;
    background-size: 100%
}

.topic-quarter .topic-quarter-sence .sence-card_2 .sence-title {
    background: url(../image/scene_05.jpg) center no-repeat;
    background-size: 100%
}

.topic-quarter .topic-quarter-sence .sence-card_3 .sence-title {
    background: url(../image/scene_07.jpg) center no-repeat;
    background-size: 100%
}

.topic-quarter .topic-quarter-sence .sence-card_4 .sence-title {
    background: url(../image/scene_09.jpg) center no-repeat;
    background-size: 100%
}

.topic-quarter .topic-quarter-sence .sence-card .sence-title {
    height: 165px;
    line-height: 160px;
    color: #fff;
    font-size: 24px;
    padding: 0 20px
}

.topic-quarter .topic-quarter-sence .sence-card .sence-txt {
    padding: 15px 20px
}

.topic-quarter .topic-quarter-sence .sence-card .sence-txt p {
    color: #fff;
    line-height: 30px
}

.topic-quarter .topic-quarter-sence .sence-card .sence-txt p::before {
    content: url(../image/0073.png);
    margin-right: 10px;
    vertical-align: middle
}

.topic-quarter .topic-quarter-gift {
    background-color: #fff;
    padding: 80px 0
}

.topic-quarter .topic-quarter-gift .flex-row {
    margin: 0 -10px
}

.topic-quarter .topic-quarter-gift .flex-item {
    padding: 0 10px
}

.topic-quarter .topic-quarter-gift .btn {
    background: transparent;
    color: #1c4ac0;
    border-color: #1c4ac0;
    padding: 0 40px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px
}

.topic-quarter .topic-quarter-gift .gift-card img {
    max-width: 100%
}

.topic-quarter .topic-quarter-gift .gift-intro {
    border: 1px solid #dcdcdc;
    padding: 15px 25px;
    margin-top: 20px
}

.topic-quarter .topic-quarter-gift .gift-intro p {
    line-height: 30px;
    font-size: 16px
}

.topic-quarter .topic-quarter-gift .gift-bottom img {
    position: relative;
    top: -20px;
    width: 100%
}

.topic-quarter-q2 .banner,
.topic-quarter-q3 .banner {
    background: url(../image/topic-q2.jpg) no-repeat center
}

.topic-quarter-q2 .banner .banner-title,
.topic-quarter-q3 .banner .banner-title {
    padding-top: 50px
}

.topic-quarter-q2 .banner .subtit,
.topic-quarter-q3 .banner .subtit {
    text-align: center;
    color: #ffecc0;
    font-size: 36px;
    font-weight: bold;
    margin-top: -50px
}

.topic-quarter-q2 .banner .subtit p,
.topic-quarter-q3 .banner .subtit p {
    text-align: center
}

.topic-quarter-q2 .topic-discount,
.topic-quarter-q3 .topic-discount {
    padding: 20px 0 80px;
    background: url(../image/b004.jpg) no-repeat center
}

.topic-quarter-q2 .topic-discount .tit1 p,
.topic-quarter-q3 .topic-discount .tit1 p {
    background: url(../image/0092.png) center no-repeat
}

.topic-quarter-q2 .topic-discount .tit1 h2,
.topic-quarter-q3 .topic-discount .tit1 h2,
.topic-quarter-q2 .topic-discount .tit1 span,
.topic-quarter-q3 .topic-discount .tit1 span {
    color: #fff
}

.topic-quarter-q2 .topic-discount .content,
.topic-quarter-q3 .topic-discount .content {
    margin: 0 -10px
}

.topic-quarter-q2 .topic-discount .flex-row>div,
.topic-quarter-q3 .topic-discount .flex-row>div {
    padding: 10px
}

.topic-quarter-q2 .topic-discount .flex-row>div .discount-item,
.topic-quarter-q3 .topic-discount .flex-row>div .discount-item {
    background-color: #fff
}

.topic-quarter-q2 .topic-standard,
.topic-quarter-q3 .topic-standard {
    background-color: #f1f4f9;
    padding-bottom: 80px
}

.topic-quarter-q2 .topic-standard .has-txt,
.topic-quarter-q3 .topic-standard .has-txt {
    background-color: #fff;
    width: 50%;
    vertical-align: middle
}

.topic-quarter-q2 .topic-standard .standard-content,
.topic-quarter-q3 .topic-standard .standard-content {
    margin-top: 20px
}

.topic-quarter-q2 .topic-standard h3,
.topic-quarter-q3 .topic-standard h3 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center
}

.topic-quarter-q2 .topic-standard p,
.topic-quarter-q3 .topic-standard p {
    font-size: 14px;
    max-width: 85%;
    text-align: center
}

.topic-quarter-q3 .banner {
    background: url(../image/topic-q3.jpg) no-repeat center
}

.topic-quarter-q3 .banner .banner-title {
    padding-top: 50px
}

.topic-quarter-q3 .topic-discount .data p::before {
    display: none
}

.topic-quarter-q3 .price-sign {
    width: 90px;
    height: 40px;
    background: url(../image/0053.png) no-repeat center;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    color: #482a11
}

.topic-quarter-q3 .price-text {
    margin-top: 6px;
    display: flex;
    justify-content: space-between
}

.topic-quarter-q3 .price-text span {
    color: #333
}

.topic-quarter-q3 .price-text b {
    font-size: 34px;
    color: #f64042
}

.topic-quarter-q3 .topic-discount .tit1 p {
    max-width: 750px;
    background-size: 100% 100%;
    padding: 5px 30px
}

.topic-quarter-q3 .topic-discount .tit_1 {
    position: relative
}

.topic-quarter-q3 .topic-discount .tit_1::after {
    content: url(../image/0064.png);
    position: absolute;
    right: -2px;
    top: -8px
}

.topic-quarter-q3 .topic-discount .tit {
    padding: 10px 25px;
    background-image: none;
    background-color: #3a4adb
}

.topic-quarter-q3 .topic-discount .tit h5 {
    font-weight: normal
}

.topic-quarter-q3 .topic-discount .discount-item b {
    color: #f64042
}

.topic-quarter-q3 .topic-discount .tips {
    font-size: 14px;
    color: #344583
}

.topic-quarter-q3 .topic-data-typebox .tit1 p {
    max-width: 750px;
    background-size: 100% 100%;
    padding: 5px 30px;
    color: #344583;
    line-height: 36px
}

@media screen and (max-width:1200px) {
    .topic-quarter-q3 .topic-data-typebox .tit1 p {
        font-size: 12px;
        line-height: 24px;
        max-width: unset
    }
}

.topic-quarter-q3 .topic-data-typebox .type-data-box .data-info {
    width: 48%;
    margin-bottom: 10px
}

.topic-quarter-q3 .topic-data-typebox .type-data-box .data-info span {
    margin-top: 0;
    padding: 5px
}

.topic-quarter-q3 .topic-data-typebox .type-box-item {
    position: relative
}

.topic-quarter-q3 .topic-data-typebox .type-box-item::after {
    content: url(../image/0074.png);
    position: absolute;
    right: -5px;
    top: -5px
}

.topic-quarter-q3 .topic-data-typebox .type-btn {
    width: 310px;
    padding: 0 30px;
    text-align: left
}

.topic-quarter-q3 .topic-data-typebox .type-btn .tips {
    color: #344583
}

.topic-quarter-q3 .topic-data-typebox .type-btn .exprice {
    color: #999999;
    font-size: 16px;
    margin-top: 8px;
    text-decoration: line-through
}

.topic-fourthquarter .banner {
    background: url(../image/banner4.jpg) no-repeat center #de3939
}

.topic-fourthquarter .red-bg {
    background-color: #de3939
}

.topic-fourthquarter .title {
    font-size: 36px;
    font-weight: bold;
    color: #fef8e1;
    margin: 70px 0 30px;
    text-align: center
}

.topic-fourthquarter .data {
    padding-bottom: 70px
}

.topic-fourthquarter .free {
    padding: 70px 0;
    text-align: center
}

.topic-fourthquarter .free .bg {
    background-color: #fef8e1
}

.topic-fourthquarter .free .title {
    color: #333;
    margin-top: 0
}

.topic-fourthquarter .free .info {
    display: inline-block;
    margin-bottom: 40px;
    color: #de3939
}

.topic-fourthquarter .give {
    background: url(../image/b0017.jpg) no-repeat center #de3939;
    padding: 70px 0
}

.topic-fourthquarter .give .title {
    margin-top: 0
}

.topic-fourthquarter .extra {
    background-color: #fef8e1;
    padding: 50px 0
}

.topic-fourthquarter .extra-wrap {
    padding: 40px;
    background-color: #f3dab0
}

.topic-fourthquarter .extra p {
    color: #792500;
    line-height: 30px
}

.deving {
    display: none !important
}