@import url(//i.gtimg.cn/qzone/biz/gdt/lib/Swiper-3.4.1/css/swiper.css?max_age=31536000);

a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}


body {
    line-height: 1
}

ol, ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0;
    vertical-align: middle
}

caption, td, th {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}

a img {
    border: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

[hidden], audio:not([controls]) {
    display: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

[hidden], audio:not([controls]) {
    display: none
}

a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0;
    vertical-align: middle
}

caption, td, th {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}

a img {
    border: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

[hidden], audio:not([controls]) {
    display: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

[hidden], audio:not([controls]) {
    display: none
}

* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased
}

body {
    -webkit-font-smoothing: auto;
    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    background-color: #fff;
    padding-top: 72px;
    min-height: 100%;
    position: relative
}

@media (max-width: 1279px) {
    body {
        padding-top: 58px
    }
}

@media (max-width: 1023px) {
    body {
        padding-top: 64px
    }
}

a {
    color: #008de8;
    text-decoration: none;
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

a:hover {
    color: #006eb5
}

.fr, .pull-right {
    float: right
}

.fl, .pull-left {
    float: left
}

.wrapper {
    background-color: #f5f9ff
}

html {
    width: 100%;
    height: 100%
}

select option {
    background-color: #276bef
}

.container {
    *zoom: 1;
    width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.container:after, .container:before {
    display: table;
    content: ""
}

.container:after {
    clear: both
}

.container:after, .container:before {
    display: table;
    content: ""
}

.container:after {
    clear: both
}

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

.row:after, .row:before {
    display: table;
    content: ""
}

.row:after {
    clear: both
}

.row:after, .row:before {
    display: table;
    content: ""
}

.row:after {
    clear: both
}

.row .col-1, .row .col-10, .row .col-11, .row .col-12, .row .col-2, .row .col-3, .row .col-4, .row .col-5, .row .col-6, .row .col-7, .row .col-8, .row .col-9 {
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    *padding-right: 0;
    *padding-left: 0
}

.row .col-10 > div, .row .col-11 > div, .row .col-12 > div, .row .col-1 > div, .row .col-2 > div, .row .col-3 > div, .row .col-4 > div, .row .col-5 > div, .row .col-6 > div, .row .col-7 > div, .row .col-8 > div, .row .col-9 > div {
    *margin-right: 15px;
    *margin-left: 15px
}

.row .col-12 {
    width: 100%
}

.row .col-11 {
    width: 91.66666667%
}

.row .col-10 {
    width: 83.33333333%
}

.row .col-9 {
    width: 75%
}

.row .col-8 {
    width: 66.66666667%
}

.row .col-7 {
    width: 58.33333333%
}

.row .col-6 {
    width: 50%
}

.row .col-5 {
    width: 41.66666667%
}

.row .col-4 {
    width: 33.33333333%
}

.row .col-3 {
    width: 25%
}

.row .col-2 {
    width: 16.66666667%
}

.row .col-1 {
    width: 8.33333333%
}

.btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    border: 1px solid #3da8ee;
    border-radius: 2px;
    cursor: pointer;
    color: #008de8;
    font-size: 14px;
    padding: 3px 20px;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    outline: 0;
    transition: all .4s ease
}

.btn-default {
    color: #008de8;
    border-color: #3da8ee;
    background-color: transparent
}

.btn-default:hover {
    color: #fff;
    border-color: #008de8;
    background-color: #008de8
}

.btn-default.btn-disabled, .btn-default.btn-disabled:hover, .btn-default[disabled], .btn-default[disabled]:hover {
    cursor: not-allowed;
    color: #888;
    border-color: #ddd;
    background-color: transparent
}

.btn-primary {
    color: #fff;
    border-color: #008de8;
    background-color: #008de8
}

.btn-primary:hover {
    color: #fff;
    border-color: #006eb5;
    background-color: #006eb5
}

.btn-primary.btn-disabled, .btn-primary.btn-disabled:hover, .btn-primary[disabled], .btn-primary[disabled]:hover {
    cursor: not-allowed;
    color: #fff;
    border-color: #bdcccf;
    background-color: #bdcccf
}

.btn-link {
    color: #008de8;
    border-color: transparent;
    background-color: transparent
}

.btn-link:hover {
    color: #006eb5;
    text-decoration: underline
}

.btn-link.btn-disabled, .btn-link.btn-disabled:hover, .btn-link[disabled], .btn-link[disabled]:hover {
    cursor: not-allowed;
    color: #888;
    text-decoration: none;
    border-color: transparent;
    background-color: transparent
}

.btn-xlg {
    padding: 12px 40px;
    font-size: 18px
}

.btn-lg {
    padding: 6px 30px;
    font-size: 16px
}

.btn-md {
    padding: 3px 20px;
    font-size: 14px
}

.btn-sm {
    padding: 0 10px;
    font-size: 12px
}

.btn-block {
    display: block
}

.btn-disabled:hover, button.btn[disabled]:hover, input.btn[disabled]:hover {
    color: #fff;
    border-color: #bdcccf;
    background-color: #bdcccf
}

.new-btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    box-sizing: border-box;
    border-radius: 29px;
    background-color: #296bef;
    box-shadow: 0 1px 0 rgba(44, 114, 255, .08), 0 6px 12px rgba(44, 114, 255, .18);
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    outline: 0;
    transition: all .4s ease
}

.new-btn:hover {
    color: #fff;
    background-color: #165be0;
    box-shadow: none
}

.new-btn.btn-lg {
    height: 58px !important;
    line-height: 58px !important;
    font-size: 18px
}

.new-btn.disabled {
    background-color: #ebf1fa;
    color: #c2c7d3;
    box-shadow: none
}

.btn-white {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    box-sizing: border-box;
    border-radius: 29px;
    background-color: #296bef;
    box-shadow: 0 1px 0 rgba(44, 114, 255, .08), 0 6px 12px rgba(44, 114, 255, .18);
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    outline: 0;
    transition: all .4s ease;
    color: #296bef;
    background-color: rgba(255, 255, 255, .8)
}

.btn-white:hover {
    color: #fff;
    background-color: #165be0;
    box-shadow: none
}

.btn-white.btn-lg {
    height: 58px !important;
    line-height: 58px !important;
    font-size: 18px
}

.btn-white.disabled {
    background-color: #ebf1fa;
    color: #c2c7d3;
    box-shadow: none
}

.btn-white:hover {
    color: #296bef;
    background-color: #fff
}

.btn-white.btn-lg {
    height: 56px;
    line-height: 56px;
    border-radius: 29px
}

.btn-whiteborder {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    box-sizing: border-box;
    border-radius: 29px;
    background-color: #296bef;
    box-shadow: 0 1px 0 rgba(44, 114, 255, .08), 0 6px 12px rgba(44, 114, 255, .18);
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    outline: 0;
    transition: all .4s ease;
    color: #6b7799;
    background-color: transparent;
    border: 2px solid #e0eaff;
    box-shadow: none;
    line-height: 46px
}

.btn-whiteborder:hover {
    color: #fff;
    background-color: #165be0;
    box-shadow: none
}

.btn-whiteborder.btn-lg {
    height: 58px !important;
    line-height: 58px !important;
    font-size: 18px
}

.btn-whiteborder.disabled {
    background-color: #ebf1fa;
    color: #c2c7d3;
    box-shadow: none
}

.btn-whiteborder:hover {
    color: #296bef;
    border: 2px solid #296bef;
    background-color: transparent
}

.btn-whiteborder.btn-lg {
    height: 56px;
    line-height: 56px;
    border-radius: 29px
}

.btn-border {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    box-sizing: border-box;
    border-radius: 29px;
    background-color: #296bef;
    box-shadow: 0 1px 0 rgba(44, 114, 255, .08), 0 6px 12px rgba(44, 114, 255, .18);
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    outline: 0;
    transition: all .4s ease;
    box-shadow: none;
    border: 2px solid #296bef;
    color: #296bef;
    background-color: transparent
}

.btn-border:hover {
    color: #fff;
    background-color: #165be0;
    box-shadow: none
}

.btn-border.btn-lg {
    height: 58px !important;
    line-height: 58px !important;
    font-size: 18px
}

.btn-border.disabled {
    background-color: #ebf1fa;
    color: #c2c7d3;
    box-shadow: none
}

.btn-border:hover {
    color: #fff;
    background-color: #296bef
}

.btn-border.btn-lg {
    height: 56px;
    line-height: 56px;
    border-radius: 29px
}

.nav {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none
}

.nav > li {
    position: relative;
    display: block
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 12px 15px;
    min-width: 52px;
    text-align: center;
    font-size: 18px
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: #eee
}

.nav > li.disabled > a {
    color: #777
}

.nav > li.disabled > a:focus, .nav > li.disabled > a:hover {
    color: #777;
    text-decoration: none;
    background-color: transparent;
    cursor: not-allowed
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: #eee;
    border-color: #337ab7
}

.nav .nav-divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5
}

.nav > li > a > img {
    max-width: none
}

.nav-tabs {
    border-bottom: 1px solid #ddd
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px
}

.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0
}

.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default
}

.tab-content > .tab-pane {
    display: none
}

.tab-content > .active {
    display: block
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.nav-stacked.slider, .nav-tabs.scale, .nav-tabs.scale-top, .nav-tabs.slider {
    position: relative;
    border-bottom: none
}

.nav-stacked.slider > li, .nav-tabs.scale-top > li, .nav-tabs.scale > li, .nav-tabs.slider > li {
    float: left
}

.nav-stacked.slider > li.slider, .nav-tabs.scale-top > li.slider, .nav-tabs.scale > li.slider, .nav-tabs.slider > li.slider {
    position: absolute;
    height: 2px;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #008de8;
    font-size: 0;
    line-height: 0
}

.nav-stacked.slider > li > a, .nav-tabs.scale-top > li > a, .nav-tabs.scale > li > a, .nav-tabs.slider > li > a {
    margin-right: 0;
    line-height: 1.4;
    border: none;
    border-radius: 0;
    outline: 0;
    outline: 0;
    color: #555
}

.nav-stacked.slider > li > a:hover, .nav-tabs.scale-top > li > a:hover, .nav-tabs.scale > li > a:hover, .nav-tabs.slider > li > a:hover {
    background-color: #008de8;
    color: #fff
}

.nav-stacked.slider > li:hover, .nav-tabs.scale-top > li:hover, .nav-tabs.scale > li:hover, .nav-tabs.slider > li:hover {
    border-top-color: #008de8 !important;
    border-bottom-color: #008de8 !important;
    border-right-color: #008de8 !important
}

.nav-stacked.slider > li.active, .nav-tabs.scale-top > li.active, .nav-tabs.scale > li.active, .nav-tabs.slider > li.active {
    border-top-color: #008de8 !important;
    border-bottom-color: #008de8 !important;
    border-right-color: #008de8 !important
}

.nav-stacked.slider > li.active > a, .nav-stacked.slider > li.active > a:focus, .nav-stacked.slider > li.active > a:hover, .nav-tabs.scale-top > li.active > a, .nav-tabs.scale-top > li.active > a:focus, .nav-tabs.scale-top > li.active > a:hover, .nav-tabs.scale > li.active > a, .nav-tabs.scale > li.active > a:focus, .nav-tabs.scale > li.active > a:hover, .nav-tabs.slider > li.active > a, .nav-tabs.slider > li.active > a:focus, .nav-tabs.slider > li.active > a:hover {
    border: none;
    background-color: #008de8;
    cursor: default;
    color: #fff
}

.nav-tabs.scale-top > li:after, .nav-tabs.scale > li:after, .scale-top-tab > li:after {
    display: none;
    display: none \9;
    position: absolute;
    content: '';
    right: 2px;
    height: 2px;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #008de8;
    font-size: 0;
    line-height: 0;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s
}

.nav-tabs.scale-top > li.active:after, .nav-tabs.scale > li.active:after, .scale-top-tab > li.active:after {
    display: block;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
}

.nav-tabs.scale-top-tab > li:after, .nav-tabs.scale-top > li:after {
    top: 0;
    bottom: auto
}

.nav-tabs.scale-top-tab > li > a {
    outline: 0;
    outline: 0;
    border-radius: 0
}

.nav-stacked.slider {
    position: relative
}

.nav-stacked.slider > li {
    float: none
}

.nav-stacked.slider > li.slider {
    position: absolute;
    width: 2px;
    height: auto;
    top: 0;
    bottom: auto;
    border-bottom: none;
    border-left: 2px solid #008de8;
    font-size: 0
}

.nav-stacked.slider > li > a {
    margin-right: 0
}

.modal-open {
    overflow: hidden
}

.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-open .modal {
    display: block;
    overflow-x: hidden;
    overflow-y: auto
}

.modal-open .modal-backdrop {
    display: block
}

.modal-dialog {
    position: absolute;
    width: 430px;
    top: 50%;
    left: 50%;
    margin: -158px 0 0 -215px;
    box-shadow: 0 1px 6px rgba(73, 75, 82, .2)
}

.modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0)
}

.modal-backdrop.in {
    opacity: .5;
    filter: alpha(opacity=50)
}

.modal-header {
    position: relative;
    padding: 15px;
    text-align: center
}

.modal-title {
    margin: 0;
    line-height: 1;
    font-size: 16px
}

.modal-body {
    position: relative;
    padding: 0 15px 15px
}

.reg-sp .modal-body {
    position: relative;
    padding: 30px 0;
    line-height: 1.5
}

.reg-sp .modal-body .pop-summ-info {
    text-align: center
}

.reg-sp .modal-body .pop-summ-info .txt {
    line-height: 1;
    font-size: 16px;
    margin-top: 15px
}

.reg-sp .modal-body .pop-desc, .reg-sp .modal-body .pop-desc-sub {
    text-align: center;
    font-size: 14px;
    margin-top: 30px
}

.reg-sp .modal-body .pop-desc-sub {
    margin-top: 10px;
    font-size: 12px;
    color: #999
}

.join-us {
    width: 724px;
    margin: -245px 0 0 -362px
}

.join-us .modal-header {
    box-sizing: border-box;
    height: 50px;
    padding: 20px 20px 0 20px;
    background: #fff;
    border-bottom: none
}

.join-us .modal-header .close {
    float: right;
    width: 19px;
    height: 19px;
    padding: 0;
    border: none;
    background: 0 0;
    box-shadow: none;
    outline: 0;
    cursor: pointer
}

.join-us .modal-header .close:before {
    left: 0
}

.join-us .modal-body {
    line-height: 1;
    padding: 0 65px
}

.join-us .modal-body .pop-tit {
    font-size: 20px
}

.join-us .modal-body .pop-desc {
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666
}

.join-us .modal-body .pop-desc > li {
    position: relative;
    padding-left: 80px;
    line-height: 25px;
    margin-top: 5px
}

.join-us .modal-body .pop-desc > li > span {
    position: absolute;
    width: 80px;
    left: 0;
    top: 0;
    bottom: 0;
    color: #333
}

.join-us .modal-footer {
    padding: 25px 0 50px
}

.join-us .modal-footer .btn {
    box-sizing: border-box;
    width: 400px;
    height: 60px;
    line-height: 36px
}

.modal-footer {
    padding: 0 0 30px;
    text-align: center
}

.breadcrumn {
    list-style: none
}

.breadcrumn li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    padding-right: 25px
}

.breadcrumn li:after {
    position: absolute;
    color: #666;
    content: '>';
    right: 8px
}

.breadcrumn li.active, .breadcrumn li:last-child {
    color: #666
}

.breadcrumn li.active:after, .breadcrumn li:last-child:after {
    display: none
}

.breadcrumn li.active a, .breadcrumn li:last-child a {
    color: #666
}

.breadcrumn li a {
    text-decoration: none
}

.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: top .4s cubic-bezier(.19, 1, .22, 1);
    z-index: 98
}

.navbar .navbar-hd {
    width: 100%;
    height: 80px;
    background-color: #fff;
    border-bottom: 1px solid #f1f1f1
}

.navbar .navbar-brand {
    float: left;
    line-height: 98px;
    font-size: 18px;
    opacity: 1;
    padding: 0;
    height: 81px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all .4s cubic-bezier(.19, 1, .22, 1)
}

.navbar .navbar-brand .navbar-brand-logo {
    display: inline-block;
    width: 155px;
    height: 28px;
    background-image: url(../images/logo.png);
    background-image: -webkit-image-set(url(../images/logo.png) 1x, url(../images/logo@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 155px 28px
}

.navbar .navbar-bd {
    width: 100%;
    height: 64px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .98);
    border-bottom: 1px solid #f1f1f1
}

.navbar .navbar-bd .container {
    position: relative
}

.navbar .navbar-brand-minimal {
    display: none;
    float: left;
    width: 41px;
    height: 40px;
    margin: 12px 40px 12px 0;
    background-image: url(../images/logo-minimal.png);
    background-image: -webkit-image-set(url(../images/logo-minimal.png) 1x, url(../images/logo-minimal@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center
}

.navbar .navbar-navigation {
    *zoom: 1;
    float: left;
    list-style: none
}

.navbar .navbar-navigation:after, .navbar .navbar-navigation:before {
    display: table;
    content: ""
}

.navbar .navbar-navigation:after {
    clear: both
}

.navbar .navbar-navigation:after, .navbar .navbar-navigation:before {
    display: table;
    content: ""
}

.navbar .navbar-navigation:after {
    clear: both
}

.navbar .navbar-navigation li {
    float: left;
    margin-right: 34px;
    line-height: 64px;
    text-align: center;
    position: relative
}

.navbar .navbar-navigation li:after {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 4px;
    width: 100%;
    content: ' ';
    background-color: #008de8;
    background-color: transparent \9;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.navbar .navbar-navigation li.active > a, .navbar .navbar-navigation li:hover > a {
    color: #008de8
}

.navbar .navbar-navigation li.active:after, .navbar .navbar-navigation li:hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #008de8
}

.navbar .navbar-navigation li a {
    display: block;
    color: #333;
    text-decoration: none
}

.navbar .navbar-navigation li .navbar-pop {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -57px;
    top: 70px;
    width: 114px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    line-height: 35px;
    padding: 18px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .08);
    border-radius: 2px
}

.navbar .navbar-navigation li .navbar-pop > a {
    color: #666
}

.navbar .navbar-navigation li .navbar-pop > a:hover {
    color: #008de8
}

.navbar .navbar-navigation li .resources {
    width: 150px;
    margin-left: -75px
}

.navbar .navbar-panel {
    *zoom: 1;
    list-style: none;
    float: right;
    line-height: 32px;
    margin-top: 16px
}

.navbar .navbar-panel:after, .navbar .navbar-panel:before {
    display: table;
    content: ""
}

.navbar .navbar-panel:after {
    clear: both
}

.navbar .navbar-panel:after, .navbar .navbar-panel:before {
    display: table;
    content: ""
}

.navbar .navbar-panel:after {
    clear: both
}

.navbar .navbar-panel li {
    float: left
}

.navbar .navbar-panel li .btn {
    padding: 7px 20px
}

.navbar .navbar-panel li .btn-register {
    margin-left: 15px
}

.navbar .navbar-panel .panel-contact {
    font-size: 16px;
    padding-left: 25px;
    background-image: url(../images/icon-tel.png);
    background-image: -webkit-image-set(url(../images/icon-tel.png) 1x, url(../images/icon-tel@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 center
}

.navbar .navbar-panel .panel-action {
    margin: 0;
    position: absolute;
    top: -61px;
    right: 0
}

.navbar-minimal {
    top: -81px
}

.navbar-minimal .navbar-brand {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0
}

.navbar-minimal .navbar-brand-minimal {
    display: block
}

.navbar-minimal .panel-contact {
    margin-top: 5px
}

.navbar-minimal .navbar-panel {
    margin-top: 12px
}

.navbar-minimal .navbar-panel .panel-action {
    position: static
}

.navbar-minimal .btn-login > span {
    display: none
}

.navbar .userpanel {
    position: relative
}

.navbar .userpanel.active .user-exit, .navbar .userpanel:hover .user-exit {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

.navbar .userpanel .user-infor {
    padding-left: 16px;
    padding-right: 14px;
    cursor: pointer
}

.navbar .userpanel .user-avater {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border-radius: 100%
}

.navbar .userpanel .user-name {
    font-size: 14px;
    color: #000;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    max-width: 5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.navbar .userpanel .user-icon {
    width: 0;
    height: 0;
    border-color: #000 transparent transparent transparent;
    border-style: solid;
    border-width: 4px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2px
}

.navbar .userpanel .user-exit {
    visibility: hidden;
    opacity: 0;
    padding-top: 12px;
    position: absolute;
    top: 36px;
    left: 0;
    width: 100%;
    -webkit-transform: translate(0, 4px);
    -ms-transform: translate(0, 4px);
    transform: translate(0, 4px);
    transition: opacity .2s, visibility .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s, visibility .2s;
    transition: opacity .2s, transform .2s, visibility .2s, -webkit-transform .2s
}

.navbar .userpanel .user-exit > a {
    display: block;
    transition: color .6s;
    height: 48px;
    border: 1px solid #d4d4d4;
    line-height: 48px;
    font-size: 14px;
    background-color: #fff;
    text-align: center;
    box-shadow: 2px 1px 4px rgba(0, 0, 0, .1);
    border-radius: 2px
}

.navbar .login {
    margin-left: 15px;
    position: relative
}

.navbar .login.active .login-account, .navbar .login:hover .login-account {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

.navbar .login .btn-login {
    margin-left: 0
}

.navbar .login .login-account {
    opacity: 0;
    visibility: hidden;
    padding-top: 10px;
    position: absolute;
    left: 0;
    top: 40px;
    -webkit-transform: translate(0, 4px);
    -ms-transform: translate(0, 4px);
    transform: translate(0, 4px);
    transition: opacity .2s, visibility .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s, visibility .2s;
    transition: opacity .2s, transform .2s, visibility .2s, -webkit-transform .2s
}

.navbar .login .login-account .login-btn {
    width: 120px;
    padding: 12px 25px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 2px 1px 4px rgba(0, 0, 0, .1);
    border-radius: 2px
}

.navbar .login .login-account .login-btn > a {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 36px;
    color: #666;
    transition: color .4s
}

.navbar .login .login-account .login-btn > a:hover {
    color: #008de8
}

.navbar .login .login-account .account-attention {
    display: block;
    width: 150px;
    padding: 9px 30px;
    background-color: #008de8;
    color: #fff;
    border-radius: 2px
}

.navbar .login .login-account .account-attention > span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    position: relative;
    line-height: 1.3
}

.navbar .login .login-account .account-attention > span:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0
}

.source_sprite {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.tech_sprite {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/tech_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.know_sprite {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.uni_sprite {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/uni_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.flow_sprite {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/flow_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.search_sprite {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/search/sprite_search.png);
    background-size: 24px auto;
    background-repeat: no-repeat
}

a {
    color: #296bef
}

a:hover {
    color: #0045cc
}

.new-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: top .4s cubic-bezier(.19, 1, .22, 1);
    z-index: 98;
    text-align: center;
    font-size: 0;
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(44, 114, 255, .05)
}

@media (max-width: 1023px) {
    .new-navbar {
        display: none
    }
}

.new-navbar .navbar-body {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 40px;
    width: 100%;
    min-width: 1024px;
    font-size: 0;
    border-bottom: 1px solid #e0eaff
}

@media (max-width: 1279px) {
    .new-navbar .navbar-body {
        padding: 0 20px
    }
}

.new-navbar .navbar-hd {
    float: left;
    height: 72px;
    background-color: #fff
}

@media (max-width: 1279px) {
    .new-navbar .navbar-hd {
        height: 52px
    }
}

.new-navbar .navbar-brand {
    float: left;
    display: flex;
    align-items: center;
    font-size: 18px;
    opacity: 1;
    padding: 0;
    height: 72px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all .4s cubic-bezier(.19, 1, .22, 1)
}

@media (max-width: 1279px) {
    .new-navbar .navbar-brand {
        height: 58px
    }
}

.new-navbar .navbar-brand .navbar-brand-logo {
    display: inline-block;
    width: 155px;
    height: 28px;
    background-image: url(../images/x2.png);
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 135px 35px
}

@media (max-width: 1279px) {
    .new-navbar .navbar-brand .navbar-brand-logo {
        width: 133px;
        height: 24px;
        background-image: url(../images/logo_xs.png);
        background-size: 133px 24px
    }
}

.new-navbar .navbar-bd {
    float: right;
    position: relative;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .98)
}

.new-navbar .navbar-bd .container {
    position: relative
}

.new-navbar .navbar-navigation {
    *zoom: 1;
    display: inline-block;
    list-style: none;
    overflow: hidden;
    padding: 0 10px
}

.new-navbar .navbar-navigation:after, .new-navbar .navbar-navigation:before {
    display: table;
    content: ""
}

.new-navbar .navbar-navigation:after {
    clear: both
}

.new-navbar .navbar-navigation:after, .new-navbar .navbar-navigation:before {
    display: table;
    content: ""
}

.new-navbar .navbar-navigation:after {
    clear: both
}

.new-navbar .navbar-navigation li {
    float: left;
    margin-right: 32px;
    height: 72px;
    line-height: 72px;
    text-align: center;
    position: relative;
    font-size: 16px;
    cursor: pointer
}

.new-navbar .navbar-navigation li:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 6px;
    width: 0;
    z-index: 10;
    border-radius: 3px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.new-navbar .navbar-navigation li.active a {
    color: #296bef;
    font-weight: 500
}

.new-navbar .navbar-navigation li:hover a {
    color: #296bef
}

.new-navbar .navbar-navigation li.active:after {
    width: 32px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #296bef
}

@media (max-width: 1279px) {
    .new-navbar .navbar-navigation li.active:after {
        height: 4px;
        width: 28px
    }
}

.new-navbar .navbar-navigation li:last-child {
    margin-right: 0
}

@media (max-width: 1279px) {
    .new-navbar .navbar-navigation li {
        margin-right: 20px;
        height: 58px;
        line-height: 58px;
        font-size: 14px
    }
}

.new-navbar .navbar-navigation li a {
    display: block;
    color: #68779c;
    text-decoration: none
}

.new-navbar .navbar-navigation li a .nav-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: 16px;
    height: 8px;
    background: url(../images/new/arrow-down.png) no-repeat center center;
    background-size: 12px auto;
    transition: .3s
}

.new-navbar .navbar-navigation li a.open .nav-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: 16px;
    height: 8px;
    background: url(../images/new/arrow-down-on.png) no-repeat center center;
    background-size: 12px auto;
    transition: .3s;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.new-navbar .navbar-navigation li .navbar-pop {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -57px;
    top: 70px;
    width: 114px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    line-height: 35px;
    padding: 18px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .08);
    border-radius: 2px
}

.new-navbar .navbar-navigation li .navbar-pop > a {
    color: #666
}

.new-navbar .navbar-navigation li .navbar-pop > a:hover {
    color: #296bef
}

.new-navbar .navbar-navigation li .resources {
    width: 150px;
    margin-left: -75px
}

.new-navbar .navbar-panel {
    *zoom: 1;
    list-style: none
}

.new-navbar .navbar-panel:after, .new-navbar .navbar-panel:before {
    display: table;
    content: ""
}

.new-navbar .navbar-panel:after {
    clear: both
}

.new-navbar .navbar-panel:after, .new-navbar .navbar-panel:before {
    display: table;
    content: ""
}

.new-navbar .navbar-panel:after {
    clear: both
}

.new-navbar .navbar-panel li {
    display: inline-block
}

.new-navbar .navbar-panel li .btn {
    padding: 7px 20px
}

.new-navbar .navbar-panel li .btn-register {
    width: 80px;
    height: 40px;
    line-height: 40px;
    margin: 16px 0 0 15px;
    padding: 0 20px
}

@media (max-width: 1279px) {
    .new-navbar .navbar-panel li .btn-register {
        width: 68px;
        height: 34px;
        line-height: 34px;
        margin: 12px 0 0 8px;
        padding: 0 10px;
        font-size: 14px
    }
}

.new-navbar .navbar-panel .panel-contact {
    font-size: 16px;
    padding-left: 25px;
    background-image: url(../images/icon-tel.png);
    background-image: -webkit-image-set(url(../images/icon-tel.png) 1x, url(../images/icon-tel@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 center
}

.new-navbar .navbar-panel .panel-action {
    margin-top: 0;
    height: 72px;
    line-height: 72px
}

@media (max-width: 1279px) {
    .new-navbar .navbar-panel {
        height: 58px;
        line-height: 58px
    }

    .new-navbar .navbar-panel .panel-action {
        margin-top: 1px;
        height: 58px;
        line-height: 58px
    }
}

.userarea {
    position: relative;
    right: 16px
}

@media (max-width: 1279px) {
    .userarea {
        margin-top: 0
    }
}

.new-navbar .userpanel {
    position: relative
}

.new-navbar .userpanel .user-infor {
    height: 72px;
    padding-left: 16px;
    padding-right: 14px
}

.new-navbar .userpanel .user-infor .user-block:after {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: rgba(11, 21, 49, .2);
    z-index: 1;
    transition: all .4s;
    opacity: 0
}

.new-navbar .userpanel.active .user-exit, .new-navbar .userpanel:hover .user-exit {
    opacity: 1;
    visibility: visible
}

.new-navbar .userpanel:hover .user-infor .user-block:after {
    opacity: 1
}

.new-navbar .userpanel .user-block {
    position: relative;
    line-height: normal
}

.new-navbar .userpanel .red-pot i {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    background-color: #ff5601;
    border: 2px solid #fff;
    border-radius: 100%;
    z-index: 2
}

.new-navbar .userpanel .user-avater {
    position: relative;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 100%;
    border: 1px solid #d6e1fa
}

@media (max-width: 1279px) {
    .new-navbar .userpanel .user-avater {
        width: 36px;
        height: 36px
    }
}

.new-navbar .userpanel .user-name {
    font-size: 14px;
    color: #000;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%
}

.new-navbar .userpanel .user-icon {
    width: 0;
    height: 0;
    border-color: #000 transparent transparent transparent;
    border-style: solid;
    border-width: 4px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2px
}

.new-navbar .userpanel .user-exit {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 53px;
    left: -26px;
    width: 190px;
    line-height: normal;
    -webkit-transform: translate(-30%, 4px);
    -ms-transform: translate(-30%, 4px);
    transform: translate(-30%, 4px);
    transition: opacity .2s, visibility .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s, visibility .2s;
    transition: opacity .2s, transform .2s, visibility .2s, -webkit-transform .2s;
    z-index: 100
}

@media (max-width: 1279px) {
    .new-navbar .userpanel .user-exit {
        top: 43px;
        -webkit-transform: translate(-50%, 4px);
        -ms-transform: translate(-50%, 4px);
        transform: translate(-50%, 4px)
    }
}

.new-navbar .userpanel .user-exit .user-block {
    display: block;
    padding-bottom: 12px;
    transition: color .6s;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid rgba(44, 114, 255, .1);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: left;
    color: #296bef;
    box-shadow: 0 4px 20px rgba(44, 114, 255, .05);
    overflow: hidden
}

.new-navbar .userpanel .user-exit .user-block .user-info {
    padding: 0 24px;
    border-bottom: 1px solid #e0eaff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.new-navbar .userpanel .user-exit .user-block .user-name {
    margin: 20px 0;
    font-size: 16px;
    color: #0b1531
}

.new-navbar .userpanel .user-exit .user-block .user-qq {
    margin-bottom: 12px;
    font-size: 12px;
    color: #6b7799
}

.new-navbar .userpanel .user-exit .user-block .user-infobutton, .new-navbar .userpanel .user-exit .user-block .user-infocontent {
    display: block;
    margin-bottom: 16px;
    height: 34px;
    line-height: 34px;
    background-color: #f2f5fa;
    border-radius: 8px;
    text-align: center;
    cursor: pointer
}

.new-navbar .userpanel .user-exit .user-block .user-infobutton i, .new-navbar .userpanel .user-exit .user-block .user-infocontent i {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: 4px;
    height: 8px;
    width: 8px;
    background-color: #ff5601;
    border-radius: 100%
}

.new-navbar .userpanel .user-exit .user-block .user-infocontent {
    color: #6b7799
}

.new-navbar .userpanel .user-exit .user-block .user-control {
    padding: 10px 0;
    line-height: 1
}

.new-navbar .userpanel .user-exit .user-block .user-control a {
    display: block;
    padding: 10px 24px
}

.new-navbar .userpanel .user-exit .user-block .user-control a:hover {
    background-color: #f5f8fc;
    color: #296bef
}

.new-navbar .userpanel .user-exit .user-block .link-out {
    width: 100%;
    display: inline-block;
    padding: 10px 24px;
    border-top: 1px solid #e0eaff
}

.new-navbar .userpanel .user-exit .user-block .link-out:hover {
    background-color: #f5f8fc;
    color: #296bef
}

.new-navbar li.login {
    position: relative;
    height: 72px;
    vertical-align: middle
}

@media (max-width: 1279px) {
    .new-navbar li.login {
        height: 58px
    }
}

.new-navbar li.login.active .login-account, .new-navbar li.login:hover .login-account {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

.new-navbar li.login .btn-login {
    display: inline-block;
    box-sizing: border-box;
    border-radius: 29px;
    cursor: pointer;
    color: #006df8;
    font-size: 16px;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    outline: 0;
    transition: all .4s ease;
    width: 80px;
    height: 40px;
    line-height: 40px;
    margin: 16px 0 0 0;
    padding: 0 20px
}

.new-navbar li.login .btn-login:active, .new-navbar li.login .btn-login:focus {
    box-shadow: 0 0 0 1px #d2e6ff
}

.new-navbar li.login .btn-login:hover {
    background-color: #f5f9ff
}

@media (max-width: 1279px) {
    .new-navbar li.login .btn-login {
        width: 68px;
        height: 34px;
        line-height: 34px;
        margin: 12px 0 0 0;
        padding: 0 10px;
        font-size: 14px
    }
}

.new-navbar li.login .hover-tip {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform: translateX(-10%) translateY(73%);
    -ms-transform: translateX(-10%) translateY(73%);
    transform: translateX(-10%) translateY(73%);
    z-index: 50
}

@media (max-width: 1279px) {
    .new-navbar li.login .hover-tip {
        -webkit-transform: translateX(-16%) translateY(84%);
        -ms-transform: translateX(-16%) translateY(84%);
        transform: translateX(-16%) translateY(84%)
    }
}

.new-navbar li.login .hover-tip .tip-block {
    position: relative;
    padding: 8px 20px;
    background-color: #0b1531;
    font-size: 14px;
    white-space: nowrap;
    color: #e1e5eb;
    border-radius: 8px;
    line-height: normal
}

.new-navbar li.login .hover-tip .tip-block:after {
    content: '';
    position: absolute;
    right: 50%;
    top: 0;
    -webkit-transform: translate3d(50%, -40%, 0) rotate(135deg);
    transform: translate3d(50%, -40%, 0) rotate(135deg);
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-radius: 3px;
    border-color: transparent transparent #0b1531 #0b1531
}

.new-navbar li.login .login-account {
    opacity: 0;
    visibility: hidden;
    padding-top: 10px;
    position: absolute;
    left: 0;
    top: 40px;
    -webkit-transform: translate(0, 4px);
    -ms-transform: translate(0, 4px);
    transform: translate(0, 4px);
    transition: opacity .2s, visibility .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s, visibility .2s;
    transition: opacity .2s, transform .2s, visibility .2s, -webkit-transform .2s
}

.new-navbar li.login .login-account .login-btn {
    width: 120px;
    padding: 12px 25px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 2px 1px 4px rgba(0, 0, 0, .1);
    border-radius: 2px
}

.new-navbar li.login .login-account .login-btn > a {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 36px;
    color: #666;
    transition: color .4s
}

.new-navbar li.login .login-account .login-btn > a:hover {
    color: #296bef
}

.new-navbar li.login .login-account .account-attention {
    display: block;
    width: 150px;
    padding: 9px 30px;
    background-color: #296bef;
    color: #fff;
    border-radius: 2px
}

.new-navbar li.login .login-account .account-attention > span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    position: relative;
    line-height: 1.3
}

.new-navbar li.login .login-account .account-attention > span:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0
}

.new-navbar .flow-pop, .new-navbar .navkonw-pop, .new-navbar .orientation-pop, .new-navbar .source-pop, .new-navbar .uni-pop {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 72px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    border-top: 1px solid rgba(44, 114, 255, .1);
    box-shadow: 0 1px 0 0 rgba(44, 114, 255, .1), 0 4px 20px 0 rgba(44, 114, 255, .05);
    transition: all .6s
}

@media (max-width: 1279px) {
    .new-navbar .flow-pop, .new-navbar .navkonw-pop, .new-navbar .orientation-pop, .new-navbar .source-pop, .new-navbar .uni-pop {
        top: 58px
    }
}

.new-navbar .flow-pop .source-body, .new-navbar .navkonw-pop .source-body, .new-navbar .orientation-pop .source-body, .new-navbar .source-pop .source-body, .new-navbar .uni-pop .source-body {
    display: inline-block
}

.new-navbar .flow-pop .pop-body, .new-navbar .navkonw-pop .pop-body, .new-navbar .orientation-pop .pop-body, .new-navbar .source-pop .pop-body, .new-navbar .uni-pop .pop-body {
    width: 1050px
}

@media (max-width: 1279px) {
    .new-navbar .flow-pop .pop-body, .new-navbar .navkonw-pop .pop-body, .new-navbar .orientation-pop .pop-body, .new-navbar .source-pop .pop-body, .new-navbar .uni-pop .pop-body {
        font-size: 14px
    }
}

.new-navbar .flow-pop .pop-body .source-wechat, .new-navbar .navkonw-pop .pop-body .source-wechat, .new-navbar .orientation-pop .pop-body .source-wechat, .new-navbar .source-pop .pop-body .source-wechat, .new-navbar .uni-pop .pop-body .source-wechat {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.new-navbar .flow-pop .pop-body .source-qq, .new-navbar .navkonw-pop .pop-body .source-qq, .new-navbar .orientation-pop .pop-body .source-qq, .new-navbar .source-pop .pop-body .source-qq, .new-navbar .uni-pop .pop-body .source-qq {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -40px
}

.new-navbar .flow-pop .pop-body .source-video, .new-navbar .navkonw-pop .pop-body .source-video, .new-navbar .orientation-pop .pop-body .source-video, .new-navbar .source-pop .pop-body .source-video, .new-navbar .uni-pop .pop-body .source-video {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -80px
}

.new-navbar .flow-pop .pop-body .source-news, .new-navbar .navkonw-pop .pop-body .source-news, .new-navbar .orientation-pop .pop-body .source-news, .new-navbar .source-pop .pop-body .source-news, .new-navbar .uni-pop .pop-body .source-news {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -120px
}

.new-navbar .flow-pop .pop-body .source-feed, .new-navbar .navkonw-pop .pop-body .source-feed, .new-navbar .orientation-pop .pop-body .source-feed, .new-navbar .source-pop .pop-body .source-feed, .new-navbar .uni-pop .pop-body .source-feed {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -360px
}

.new-navbar .flow-pop .pop-body .source-youliang, .new-navbar .navkonw-pop .pop-body .source-youliang, .new-navbar .orientation-pop .pop-body .source-youliang, .new-navbar .source-pop .pop-body .source-youliang, .new-navbar .uni-pop .pop-body .source-youliang {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -200px
}

.new-navbar .flow-pop .pop-body .source-music, .new-navbar .navkonw-pop .pop-body .source-music, .new-navbar .orientation-pop .pop-body .source-music, .new-navbar .source-pop .pop-body .source-music, .new-navbar .uni-pop .pop-body .source-music {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -240px
}

.new-navbar .flow-pop .pop-body .source-all, .new-navbar .navkonw-pop .pop-body .source-all, .new-navbar .orientation-pop .pop-body .source-all, .new-navbar .source-pop .pop-body .source-all, .new-navbar .uni-pop .pop-body .source-all {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -280px
}

.new-navbar .flow-pop .pop-body .tech-dmp, .new-navbar .navkonw-pop .pop-body .tech-dmp, .new-navbar .orientation-pop .pop-body .tech-dmp, .new-navbar .source-pop .pop-body .tech-dmp, .new-navbar .uni-pop .pop-body .tech-dmp {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/tech_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.new-navbar .flow-pop .pop-body .tech-ocpa, .new-navbar .navkonw-pop .pop-body .tech-ocpa, .new-navbar .orientation-pop .pop-body .tech-ocpa, .new-navbar .source-pop .pop-body .tech-ocpa, .new-navbar .uni-pop .pop-body .tech-ocpa {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/tech_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -40px
}

.new-navbar .flow-pop .pop-body .tech-pro, .new-navbar .navkonw-pop .pop-body .tech-pro, .new-navbar .orientation-pop .pop-body .tech-pro, .new-navbar .source-pop .pop-body .tech-pro, .new-navbar .uni-pop .pop-body .tech-pro {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/tech_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -80px
}

.new-navbar .flow-pop .pop-body .tech-tag, .new-navbar .navkonw-pop .pop-body .tech-tag, .new-navbar .orientation-pop .pop-body .tech-tag, .new-navbar .source-pop .pop-body .tech-tag, .new-navbar .uni-pop .pop-body .tech-tag {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/tech_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -120px
}

.new-navbar .flow-pop .pop-body .tech-all, .new-navbar .navkonw-pop .pop-body .tech-all, .new-navbar .orientation-pop .pop-body .tech-all, .new-navbar .source-pop .pop-body .tech-all, .new-navbar .uni-pop .pop-body .tech-all {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/tech_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -160px
}

.new-navbar .flow-pop .pop-body .know-registed, .new-navbar .navkonw-pop .pop-body .know-registed, .new-navbar .orientation-pop .pop-body .know-registed, .new-navbar .source-pop .pop-body .know-registed, .new-navbar .uni-pop .pop-body .know-registed {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.new-navbar .flow-pop .pop-body .know-qa, .new-navbar .navkonw-pop .pop-body .know-qa, .new-navbar .orientation-pop .pop-body .know-qa, .new-navbar .source-pop .pop-body .know-qa, .new-navbar .uni-pop .pop-body .know-qa {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -40px
}

.new-navbar .flow-pop .pop-body .know-open, .new-navbar .navkonw-pop .pop-body .know-open, .new-navbar .orientation-pop .pop-body .know-open, .new-navbar .source-pop .pop-body .know-open, .new-navbar .uni-pop .pop-body .know-open {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -80px
}

.new-navbar .flow-pop .pop-body .know-teg, .new-navbar .navkonw-pop .pop-body .know-teg, .new-navbar .orientation-pop .pop-body .know-teg, .new-navbar .source-pop .pop-body .know-teg, .new-navbar .uni-pop .pop-body .know-teg {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -120px
}

.new-navbar .flow-pop .pop-body .know-aco, .new-navbar .navkonw-pop .pop-body .know-aco, .new-navbar .orientation-pop .pop-body .know-aco, .new-navbar .source-pop .pop-body .know-aco, .new-navbar .uni-pop .pop-body .know-aco {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.new-navbar .flow-pop .pop-body .know-test, .new-navbar .navkonw-pop .pop-body .know-test, .new-navbar .orientation-pop .pop-body .know-test, .new-navbar .source-pop .pop-body .know-test, .new-navbar .uni-pop .pop-body .know-test {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -40px
}

.new-navbar .flow-pop .pop-body .know-grow, .new-navbar .navkonw-pop .pop-body .know-grow, .new-navbar .orientation-pop .pop-body .know-grow, .new-navbar .source-pop .pop-body .know-grow, .new-navbar .uni-pop .pop-body .know-grow {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/know_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -80px
}

.new-navbar .flow-pop .pop-body .flow_ylh, .new-navbar .navkonw-pop .pop-body .flow_ylh, .new-navbar .orientation-pop .pop-body .flow_ylh, .new-navbar .source-pop .pop-body .flow_ylh, .new-navbar .uni-pop .pop-body .flow_ylh {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/flow_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.new-navbar .flow-pop .pop-body .flow_owner, .new-navbar .navkonw-pop .pop-body .flow_owner, .new-navbar .orientation-pop .pop-body .flow_owner, .new-navbar .source-pop .pop-body .flow_owner, .new-navbar .uni-pop .pop-body .flow_owner {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new/flow_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -40px
}

.new-navbar .flow-pop .pop-body a, .new-navbar .navkonw-pop .pop-body a, .new-navbar .orientation-pop .pop-body a, .new-navbar .source-pop .pop-body a, .new-navbar .uni-pop .pop-body a {
    display: inline-block;
    box-sizing: border-box;
    padding: 40px 0;
    width: 122px;
    height: 160px;
    font-size: 14px;
    line-height: normal
}

.new-navbar .flow-pop .pop-body a p, .new-navbar .navkonw-pop .pop-body a p, .new-navbar .orientation-pop .pop-body a p, .new-navbar .source-pop .pop-body a p, .new-navbar .uni-pop .pop-body a p {
    margin-top: 20px;
    color: #6b7799;
    font-weight: 400;
    line-height: 1
}

.new-navbar .flow-pop .pop-body a:hover, .new-navbar .navkonw-pop .pop-body a:hover, .new-navbar .orientation-pop .pop-body a:hover, .new-navbar .source-pop .pop-body a:hover, .new-navbar .uni-pop .pop-body a:hover {
    background-color: #f5f8fc
}

.new-navbar .flow-pop a, .new-navbar .navkonw-pop a, .new-navbar .orientation-pop a, .new-navbar .source-pop a, .new-navbar .uni-pop a {
    display: inline-block
}

.new-navbar .open {
    position: relative
}

.new-navbar .open + .flow-pop, .new-navbar .open + .navkonw-pop, .new-navbar .open + .orientation-pop, .new-navbar .open + .source-pop, .new-navbar .open + .uni-pop {
    visibility: initial;
    opacity: 1
}

.g-header {
    display: none;
    position: absolute;
    z-index: 100
}

@media (max-width: 1023px) {
    .g-header {
        display: block
    }
}

.g-header .header-section {
    width: 100%;
    height: 64px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000
}

.g-header .header-section:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #d1d1d1;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5)
}

.g-header .header-section:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #d1d1d1;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5)
}

.g-header .registered-navbar {
    position: relative
}

.g-header .logo {
    float: left
}

.g-header .logo > a:nth-child(1) {
    display: block;
    width: 122px;
    height: 33px;
    background: url(../images/x2.png) no-repeat center;
    background-size: contain
}

.g-header .nav-icon {
    float: right;
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1000;
    font-size: 0;
    text-align: right;
    cursor: pointer
}

.g-header .nav-icon i {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.g-header .nav-icon i span {
    display: inline-block;
    width: 70%;
    height: 2px;
    background-color: #9babcc;
    position: relative;
    border-radius: 2px
}

.g-header .nav-icon i:nth-of-type(1) span {
    top: 20%
}

.g-header .nav-icon i:nth-of-type(2) span {
    top: 45%;
    width: 55%
}

.g-header .nav-icon i:nth-of-type(3) span {
    top: 70%
}

.g-header .m-navbar {
    background-color: #f5f9ff;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    right: -100%;
    top: 0;
    padding-bottom: .6rem;
    box-sizing: border-box;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    transition: all .4s cubic-bezier(.4, 0, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.g-header .m-navbar .logo {
    background-color: #fff;
    float: inherit;
    padding: 20px;
    border-bottom: 1px solid rgba(44, 114, 255, .1)
}

.g-header .m-navbar .logo a {
    display: inline-block;
    height: 22px
}

.g-header .m-navbar ul {
    background-color: #fff;
    padding: 0 20px
}

.g-header .m-navbar li {
    position: relative;
    border-bottom: 1px solid rgba(44, 114, 255, .1)
}

.g-header .m-navbar li:last-child {
    border-bottom: none
}

.g-header .m-navbar li:first-child:after {
    display: none
}

.g-header .m-navbar li:last-of-type:after {
    display: none
}

.g-header .m-navbar li a {
    display: block;
    overflow: hidden;
    color: #6b7799
}

.g-header .m-navbar li > a {
    position: relative;
    font-size: 14px;
    line-height: 54px;
    height: 54px
}

.g-header .m-navbar li.active > a {
    background-color: #f6f6f6
}

.g-header .m-navbar li.active > a:before {
    display: block;
    content: '';
    width: .06rem;
    height: 1.2rem;
    background-color: #008de8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.g-header .m-navbar li .nav-drop i {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/source_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    margin-right: 12px;
    background-size: 28px;
    width: 28px;
    height: 28px;
    vertical-align: middle
}

.g-header .m-navbar li .nav-drop .source-wechat {
    background-position: 0 0
}

.g-header .m-navbar li .nav-drop .source-qq {
    background-position: 0 -28px
}

.g-header .m-navbar li .nav-drop .source-video {
    background-position: 0 -56px
}

.g-header .m-navbar li .nav-drop .source-news {
    background-position: 0 -84px
}

.g-header .m-navbar li .nav-drop .source-feed {
    background-position: 0 -224px
}

.g-header .m-navbar li .nav-drop .source-youliang {
    background-position: 0 -140px
}

.g-header .m-navbar li .nav-drop .source-music {
    background-position: 0 -168px
}

.g-header .m-navbar li .nav-drop .source-info {
    background-position: 0 -196px
}

.g-header .m-navbar li .nav-drop > a {
    padding: 13px 12px;
    color: #6b7799;
    font-size: 14px
}

.g-header .m-navbar li .nav-drop > a:active {
    background-color: #f5f8fc;
    border-radius: 16px;
    font-size: 14px;
    color: #296bef
}

.g-header .m-navbar li .nav-drop a:last-child {
    margin-bottom: 12px
}

.g-header.white-header .header-section {
    position: absolute
}

.g-header.white-header .header-section:after, .g-header.white-header .header-section:before {
    display: none
}

.g-header.show-nav .nav-icon {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 22px;
    z-index: 100000;
    background: url(../images/mobile/m_close.png) no-repeat center;
    background-size: 16px auto
}

.g-header.show-nav .nav-icon i {
    opacity: 0
}

.g-header.show-nav .m-navbar {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

.g-header .header-section {
    -webkit-animation: showHeader .4s both;
    animation: showHeader .4s both
}

.g-header.hide .header-section {
    -webkit-animation: hideHeader .4s both;
    animation: hideHeader .4s both
}

@-webkit-keyframes hideHeader {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    100% {
        -webkit-transform: translate(0, -2rem);
        transform: translate(0, -2rem)
    }
}

@keyframes hideHeader {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    100% {
        -webkit-transform: translate(0, -2rem);
        transform: translate(0, -2rem)
    }
}

@-webkit-keyframes showHeader {
    0% {
        -webkit-transform: translate(0, -2rem);
        transform: translate(0, -2rem)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes showHeader {
    0% {
        -webkit-transform: translate(0, -2rem);
        transform: translate(0, -2rem)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.show-cross {
    display: inline-block !important
}

.m-login {
    padding: 24px 32px;
    background-color: #f5f9ff
}

.m-login .login-block {
    margin-top: 4px;
    text-align: center
}

.m-login .login-block a {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    width: 92px;
    border-radius: 40px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    background-color: #296bef
}

.m-login .after-login .login-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0eaff
}

.m-login .after-login .user-info, .m-login .after-login .user-state {
    display: flex;
    align-items: center
}

.m-login .after-login .user-avater {
    position: relative;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 100%;
    border: 1px solid #d6e1fa
}

.m-login .after-login .user-block {
    display: inline-block
}

.m-login .after-login .user-name {
    color: #0b1531;
    font-size: 16px;
    margin-left: 12px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px
}

.m-login .after-login .user-infobutton, .m-login .after-login .user-infocontent {
    width: 124px;
    display: block;
    height: 34px;
    line-height: 34px;
    background-color: #e9f0ff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer
}

.m-login .after-login .user-infobutton i, .m-login .after-login .user-infocontent i {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: 4px;
    height: 8px;
    width: 8px;
    background-color: #ff5601;
    border-radius: 100%
}

.m-login .after-login .user-infocontent {
    color: #6b7799;
    background-color: #e9f0ff
}

.m-login .login-bottom {
    padding-bottom: 16px
}

.m-login .login-bottom a {
    display: inline-block;
    margin: 20px 40px 0 0;
    color: #296bef;
    font-size: 14px
}

.m-login .login-bottom a:last-child {
    margin-right: 0
}

.mCompanyInfo {
    margin-right: 40px;
    display: inline-block
}

.navbar-login {
    display: inline-block
}

.search-block {
    float: right
}

.search-block .search-body {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center
}

.search-block .main-search {
    position: relative;
    padding-right: 8px;
    margin-right: 8px;
    border-right: 1px solid #e0eaff
}

.search-block .search-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/search/search-normal.png);
    background-size: 24px auto;
    background-repeat: no-repeat;
    transition: all .2s;
    cursor: pointer
}

.search-block .search-icon:hover {
    background-image: url(../images/search/search-hover.png)
}

@media (max-width: 1279px) {
    .search-block .search-icon {
        width: 20px;
        height: 20px;
        background-size: 20px auto
    }
}

.search-block .search-cross {
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/search/sprite_search.png);
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: 0 -48px;
    top: 6px;
    right: 14px;
    cursor: pointer;
    display: none
}

.search-block input {
    display: none
}

.search-block.searching {
    position: absolute;
    left: 50%;
    top: 0;
    width: 850px;
    background-color: #fff;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 50
}

.search-block.searching .search-body {
    border-bottom: 1px solid #e0eaff
}

.search-block.searching .main-search {
    display: inline-block;
    box-sizing: border-box;
    width: 600px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    top: 0
}

.search-block.searching input {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    display: inline-block;
    font-size: 16px;
    color: #0b1531;
    padding: 9px 12px 9px 44px;
    border: 2px solid #e0eaff;
    border-radius: 24px;
    line-height: 18px
}

.search-block.searching input:focus {
    border: 2px solid #296bef
}

.search-block.searching input:focus + .search-cross:hover {
    background-position: 0 -72px
}

.search-block.searching input::-webkit-input-placeholder {
    color: #a3aecc
}

.search-block.searching input:-moz-placeholder {
    color: #a3aecc
}

.search-block.searching input::-moz-placeholder {
    color: #a3aecc
}

.search-block.searching input:-ms-input-placeholder {
    color: #a3aecc
}

.search-block.searching .search-icon {
    position: absolute;
    top: 7px;
    left: 16px
}

.search-block.searching + .search-bgc {
    position: fixed;
    top: 73px;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(11, 21, 49, .6)
}

@media (max-width: 1279px) {
    .search-block.searching + .search-bgc {
        top: 59px
    }
}

.search-block .search-resultblock {
    display: none;
    position: absolute;
    bottom: 1px;
    width: 600px;
    left: 50%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: #fff;
    font-size: 14px;
    -webkit-transform: translate3d(-50%, 100%, 0);
    transform: translate3d(-50%, 100%, 0);
    border: 1px solid rgba(44, 114, 255, .1);
    box-shadow: 0 4px 20px rgba(44, 114, 255, .05)
}

.search-block .search-resultblock .result-block {
    text-align: left;
    padding: 20px 16px;
    border-bottom: 1px solid #e0eaff
}

.search-block .search-resultblock .result-block:last-child {
    border-bottom: none
}

.search-block .search-resultblock .result-title {
    margin-bottom: 10px;
    color: #a3aecc
}

.search-block .search-resultblock .result-more {
    text-align: center
}

.search-block .search-resultblock .result-more a {
    color: #296bef
}

.search-block .search-resultblock .no-result {
    padding: 10px 0;
    font-size: 14px;
    color: #a3aecc;
    text-align: center
}

.search-block .search-resultblock .result-content li a {
    display: block;
    padding: 10px 14px;
    color: #6b7799;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer
}

.search-block .search-resultblock .result-content li a:hover {
    color: #296bef;
    background-color: #f5f9ff
}

.search-block .search-resultblock .result-content li .high-light, .search-block .search-resultblock .result-content li em {
    color: #296bef
}

@media (max-width: 1279px) {
    .search-block .search-resultblock {
        width: 480px;
        left: 50%;
        -webkit-transform: translate3d(-50%, 100%, 0);
        transform: translate3d(-50%, 100%, 0)
    }

    .search-block .search-body {
        height: 58px
    }

    .search-block .main-search {
        top: 0;
        padding-right: 12px;
        margin-right: 12px
    }

    .search-block.searching {
        width: 650px
    }

    .search-block.searching .main-search {
        width: 480px;
        top: 0;
        padding-right: 0;
        margin-right: 0
    }

    .search-block.searching input {
        font-size: 14px;
        padding: 6px 12px 6px 36px
    }

    .search-block.searching input:focus + .search-cross {
        top: 7px;
        right: 14px;
        width: 12px;
        width: 20px;
        height: 20px;
        background-size: 20px;
        background-position: 0 -40px
    }

    .search-block.searching input:focus + .search-cross:hover {
        background-position: 0 -60px
    }

    .search-block.searching .search-icon {
        top: 6px;
        left: 14px;
        width: 20px;
        height: 20px;
        background-size: 20px;
        cursor: inherit
    }

    .search-block.searching .search-icon:hover {
        background-position: 0 0
    }

    .search-block .search-resultblock .result-block {
        padding: 16px
    }

    .search-block .search-resultblock .no-result {
        padding: 8px 0
    }

    .search-block .search-resultblock .result-title {
        margin-bottom: 8px
    }

    .search-block .search-resultblock .result-content li a {
        padding: 8px 14px
    }
}

.navbar-v2 {
    display: inline-block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap
}

.navbar-v2 .navbar-v2list {
    list-style: none;
    padding: 0 10px;
    color: #68779c
}

.navbar-v2 .navbar-v2list li {
    display: inline-block;
    position: relative
}

.navbar-v2 .navbar-v2list li .link-list {
    visibility: hidden;
    position: absolute;
    bottom: -1px;
    left: -1px;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    padding-bottom: 12px;
    width: 178px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #e0eaff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 116, 255, .05);
    text-align: left;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
    transition: all .1s
}

.navbar-v2 .navbar-v2list li .link-list .link-body {
    display: inline-block;
    padding: 10px 18px;
    width: 100%;
    font-size: 15px;
    color: #6b7799;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent
}

.navbar-v2 .navbar-v2list li .link-list .link-body:hover {
    color: #68779c;
    font-weight: 700;
    background-color: #f5f9ff
}

.navbar-v2 .navbar-v2list li .link-list .link-body:active, .navbar-v2 .navbar-v2list li .link-list .link-body:focus {
    font-weight: 700;
    background-color: #f5f9ff;
    border-top: 1px solid #d2e6ff;
    border-bottom: 1px solid #d2e6ff
}

.navbar-v2 .navbar-v2list li .main-link, .navbar-v2 .navbar-v2list li .navbar-home {
    display: inline-block;
    height: 72px;
    line-height: 72px;
    padding: 0 18px;
    text-align: center;
    position: relative;
    font-size: 16px;
    cursor: pointer;
    color: #68779c;
    z-index: 20;
    background-color: #fff
}

.navbar-v2 .navbar-v2list li .main-link.active, .navbar-v2 .navbar-v2list li .navbar-home.active {
    font-weight: 700
}

.navbar-v2 .navbar-v2list li .main-link.active:after, .navbar-v2 .navbar-v2list li .navbar-home.active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    display: inline-block;
    width: 64px;
    height: 4px;
    background-color: #296bef;
    border-radius: 3px;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

.navbar-v2 .navbar-v2list li .main-link:hover, .navbar-v2 .navbar-v2list li .navbar-home:hover {
    font-weight: 700
}

.navbar-v2 .navbar-v2list li .main-link:active, .navbar-v2 .navbar-v2list li .main-link:focus, .navbar-v2 .navbar-v2list li .navbar-home:active, .navbar-v2 .navbar-v2list li .navbar-home:focus {
    font-weight: 700;
    background-color: #f5f9ff
}

.navbar-v2 .navbar-v2list li .navbar-home.active {
    font-weight: 700
}

.navbar-v2 .navbar-v2list li .navbar-home.active:after {
    content: '';
    position: absolute;
    bottom: -1px;
    display: inline-block;
    width: 34px;
    height: 4px;
    background-color: #296bef;
    border-radius: 3px;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

.navbar-v2 .navbar-v2list li.main-linkblock:hover .link-list {
    visibility: inherit;
    opacity: 1
}

.navbar-v2 .navbar-v2list li .nav_active_third:after {
    width: 45px !important
}

@media (max-width: 1279px) {
    .navbar-v2 .navbar-v2list li .main-link, .navbar-v2 .navbar-v2list li .navbar-home {
        height: 58px;
        line-height: 58px;
        padding: 0 8px;
        font-size: 14px
    }

    .navbar-v2 .navbar-v2list li .main-link.active:after, .navbar-v2 .navbar-v2list li .navbar-home.active:after {
        content: '';
        width: 56px
    }

    .navbar-v2 .navbar-v2list li .navbar-home.active:after {
        content: '';
        width: 28px
    }

    .navbar-v2 .navbar-v2list li .link-list {
        width: 140px;
        padding-bottom: 8px;
        left: -8px
    }

    .navbar-v2 .navbar-v2list li .link-list .link-body {
        padding: 10px 14px;
        font-size: 14px
    }
}

.form-qq {
    display: inline-block;
    margin-right: 8px;
    width: 20px;
    height: 20px;
    background-image: url(../images/login/login_qq.png);
    background-size: 20px auto;
    background-repeat: no-repeat;
    vertical-align: sub
}

.form-wechat {
    display: inline-block;
    margin-right: 8px;
    width: 20px;
    height: 20px;
    background-image: url(../images/login/login_wechat.png);
    background-size: 20px auto;
    background-repeat: no-repeat;
    vertical-align: sub
}

.user-bind {
    width: 100%;
    display: inline-block;
    padding: 10px 24px;
    border-top: 1px solid #e0eaff
}

.user-bind a {
    color: #7d8bb3;
    font-size: 12px
}

.user-bind a:hover {
    color: #296bef
}

.footer {
    background-color: #282828
}

.footer .footer-bd {
    padding: 90px 0 50px
}

.footer .footer-bd .mp {
    padding-left: 100px;
    *zoom: 1
}

.footer .footer-bd .mp:after, .footer .footer-bd .mp:before {
    display: table;
    content: ""
}

.footer .footer-bd .mp:after {
    clear: both
}

.footer .footer-bd .mp:after, .footer .footer-bd .mp:before {
    display: table;
    content: ""
}

.footer .footer-bd .mp:after {
    clear: both
}

.footer .footer-bd .mp.fr {
    float: right
}

.footer .footer-bd .mp .mp-qrcode {
    margin-top: 16px
}

.footer .footer-bd .mp .mp-qrcode img {
    width: 122px;
    height: 122px
}

.footer .footer-bd .mp .mp-title {
    color: #bdbdbd;
    font-size: 16px;
    margin-bottom: 20px
}

.footer .footer-bd .mp .fnav-list {
    margin-top: -3px;
    line-height: 2
}

.footer .footer-bd .mp .fnav-list li a, .footer .footer-bd .mp .mp-desc {
    color: #666;
    font-size: 14px;
    max-width: 188px
}

.footer .footer-bd .mp .fnav-list li a:hover {
    color: #888
}

.footer .footer-ft {
    *zoom: 1;
    color: #666;
    padding: 20px 0;
    font-size: 12px;
    border-top: 1px solid #464646
}

.footer .footer-ft:after, .footer .footer-ft:before {
    display: table;
    content: ""
}

.footer .footer-ft:after {
    clear: both
}

.footer .footer-ft:after, .footer .footer-ft:before {
    display: table;
    content: ""
}

.footer .footer-ft:after {
    clear: both
}

.footer .footer-ft a {
    color: #666
}

.footer .footer-ft a:hover {
    color: #fff
}

.footer .footer-logo > a {
    display: block;
    width: 198px;
    height: 57px;
    background-image: url(../images/footer-logo.png);
    background-image: -webkit-image-set(url(../images/footer-logo.png) 1x, url(../images/footer-logo@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center
}

.footer .footer-nav {
    *zoom: 1;
    float: left
}

.footer .footer-nav:after, .footer .footer-nav:before {
    display: table;
    content: ""
}

.footer .footer-nav:after {
    clear: both
}

.footer .footer-nav:after, .footer .footer-nav:before {
    display: table;
    content: ""
}

.footer .footer-nav:after {
    clear: both
}

.footer .footer-nav li {
    float: left;
    margin-right: 20px
}

.footer .footer-copyright {
    float: right
}

.footer .footer-copyright > span {
    margin-right: 18px
}

.new-footer {
    background-color: #0b1531
}

.new-footer .container .footer-bd {
    padding: 80px 0 40px
}

.new-footer .container .footer-bd .mp {
    *zoom: 1
}

.new-footer .container .footer-bd .mp:after, .new-footer .container .footer-bd .mp:before {
    display: table;
    content: ""
}

.new-footer .container .footer-bd .mp:after {
    clear: both
}

.new-footer .container .footer-bd .mp:after, .new-footer .container .footer-bd .mp:before {
    display: table;
    content: ""
}

.new-footer .container .footer-bd .mp:after {
    clear: both
}

.new-footer .container .footer-bd .mp.fr {
    float: right
}

.new-footer .container .footer-bd .mp .mp-qrcode {
    margin-top: 28px
}

.new-footer .container .footer-bd .mp .mp-qrcode img {
    width: 144px;
    height: 144px
}

.new-footer .container .footer-bd .mp .mp-title {
    font-size: 16px;
    margin-bottom: 20px;
    color: #8f9fcc;
    font-weight: 500
}

.new-footer .container .footer-bd .mp .mp-title a {
    color: #8f9fcc
}

.new-footer .container .footer-bd .mp .mp-title a:hover {
    color: #296bef
}

.new-footer .container .footer-bd .mp .fnav-list {
    margin-top: -3px
}

.new-footer .container .footer-bd .mp .fnav-list li a, .new-footer .container .footer-bd .mp .mp-desc {
    color: #6b7799;
    font-size: 16px;
    max-width: 188px;
    line-height: 40px
}

.new-footer .container .footer-bd .mp .fnav-list li a:hover, .new-footer .container .footer-bd .mp .mp-desc:hover {
    color: #296bef
}

.new-footer .container .footer-bd .new-sqrcode {
    text-align: center
}

.new-footer .container .footer-bd .new-sqrcode .mp .mp-qrcode {
    margin-top: 20px
}

.new-footer .container .footer-bd .new-sqrcode .mp .mp-qrcode img {
    width: 100px;
    height: 100px
}

.new-footer .container .footer-bd .new-sqrcode .mp .mp-qrcode .qrcode-stitle {
    margin-top: 12px;
    font-size: 14px;
    color: #6b7799
}

@media (max-width: 1279px) {
    .new-footer .container .footer-bd .new-sqrcode .mp .mp-qrcode {
        margin-top: 16px
    }

    .new-footer .container .footer-bd .new-sqrcode .mp .mp-qrcode img {
        width: 84px;
        height: 84px
    }

    .new-footer .container .footer-bd .new-sqrcode .mp .mp-qrcode .qrcode-stitle {
        margin-top: 8px;
        font-size: 12px
    }
}

.new-footer .container .footer-ft {
    *zoom: 1;
    color: #6b7799;
    padding: 32px 0;
    font-size: 14px;
    line-height: 1;
    border-top: 1px solid #1c2338
}

.new-footer .container .footer-ft:after, .new-footer .container .footer-ft:before {
    display: table;
    content: ""
}

.new-footer .container .footer-ft:after {
    clear: both
}

.new-footer .container .footer-ft:after, .new-footer .container .footer-ft:before {
    display: table;
    content: ""
}

.new-footer .container .footer-ft:after {
    clear: both
}

.new-footer .container .footer-ft a {
    color: #6b7799;
    height: 18px;
    line-height: 18px
}

.new-footer .container .footer-ft a:hover {
    color: #fff
}

.new-footer .container .footer-logo > a {
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/logo-footer.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: center
}

.new-footer .container .footer-nav {
    *zoom: 1;
    float: left
}

.new-footer .container .footer-nav:after, .new-footer .container .footer-nav:before {
    display: table;
    content: ""
}

.new-footer .container .footer-nav:after {
    clear: both
}

.new-footer .container .footer-nav:after, .new-footer .container .footer-nav:before {
    display: table;
    content: ""
}

.new-footer .container .footer-nav:after {
    clear: both
}

.new-footer .container .footer-nav li {
    float: left;
    margin-right: 20px
}

.new-footer .container .footer-copyright {
    float: right
}

.new-footer .container .footer-copyright > span {
    margin-right: 6px
}

@media (max-width: 1279px) {
    .new-footer .container {
        width: 1024px
    }

    .new-footer .container .footer-bd {
        padding: 80px 24px 40px
    }
}

@media (max-width: 1023px) {
    .new-footer .container {
        display: none
    }
}

.new-footer .mbottom_sprite {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat
}

.new-footer .m-container {
    display: none;
    padding: 50px 0 80px;
    text-align: center
}

@media (max-width: 1023px) {
    .new-footer .m-container {
        display: block
    }
}

.new-footer .m-container ul {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 335px;
    font-size: 0
}

.new-footer .m-container ul li {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 10px 10px 0;
    width: 105px;
    height: 105px;
    background-color: #1b2542;
    font-size: 12px;
    text-align: center;
    border-radius: 8px
}

.new-footer .m-container ul li.out {
    background-color: #0b1531
}

.new-footer .m-container ul li:nth-child(3n) {
    margin-right: 0
}

.new-footer .m-container ul li a {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 22px 0;
    color: #6b7799;
    border: 1px solid #1b2542;
    border-radius: 8px
}

.new-footer .m-container ul li a:active {
    background-color: #111b38;
    border: 1px solid #111b38
}

.new-footer .m-container ul li i {
    margin-bottom: 10px
}

.new-footer .m-container ul li .m-wechat {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    width: 31px;
    background-position: 0 0
}

.new-footer .m-container ul li .m-qq {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    background-position: -32px -32px
}

.new-footer .m-container ul li .m-video {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    background-position: -32px 0
}

.new-footer .m-container ul li .m-info {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    background-position: -94px 0
}

.new-footer .m-container ul li .m-youliang {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    background-position: 0 -32px
}

.new-footer .m-container ul li .m-music {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    background-position: -64px -32px
}

.new-footer .m-container ul li .m-news {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    width: 31px;
    background-position: -64px 0
}

.new-footer .m-container ul li .m-back {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/new/m_bottomsprite.png);
    background-size: 126px auto;
    background-repeat: no-repeat;
    background-position: -32px -64px
}

@media (max-width: 480px) {
    .new-footer .m-container ul {
        width: 290px
    }

    .new-footer .m-container ul li {
        width: 90px;
        height: 90px
    }
}

.new-footer .m-container .m-bqrcode {
    margin: 50px 0 40px
}

.new-footer .m-container .m-bqrcode p {
    margin-bottom: 28px;
    color: #7d8bb3;
    font-weight: 700
}

.new-footer .m-container .m-bqrcode img {
    width: 150px;
    z-index: 50
}

.new-footer .m-container .m-bottom {
    text-align: center;
    font-size: 10px;
    color: #6b7799
}

.new-footer .m-container .m-bottom i {
    margin-bottom: 20px;
    display: inline-block;
    width: 111px;
    height: 20px;
    background-image: url(../images/new/m_logo.png);
    background-size: 111px auto;
    background-repeat: no-repeat
}

@media (max-width: 1023px) {
    .wechat-footer {
        display: none
    }
}

.m-mbqrcodeblock {
    margin: 0 auto;
    width: 335px;
    display: flex;
    justify-content: space-around
}

.m-mbqrcodeblock .m-mcblock img {
    width: 100px !important;
    height: 100px !important
}

.m-mbqrcodeblock .m-mcblock .m-mctitle {
    margin-top: 15px;
    font-size: 12px;
    font-weight: 400
}

@media (max-width: 480px) {
    .m-mbqrcodeblock {
        width: 290px
    }
}

.advisory-block {
    position: fixed;
    right: 4px;
    bottom: 24px;
    z-index: 50
}

@media (max-width: 1023px) {
    .advisory-block {
        display: none !important
    }
}

.advisory-block .advisory {
    position: relative
}

.advisory-block .advisory .adv-num {
    font-size: 28px;
    color: #296bef;
    font-family: roboto;
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    text-align: center
}

.advisory-block a {
    position: absolute;
    display: inline-block;
    width: 80%;
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    height: 52px;
    top: 134px
}

.advisory-block a:hover + .advisory-img {
    background-position: 0 -226px
}

.advisory-block .advisory-img {
    display: inline-block;
    height: 226px;
    width: 254px;
    background-image: url(../images/new/sprite_adv.png);
    background-size: 254px auto;
    background-repeat: no-repeat;
    transition: none
}

@media (max-width: 1279px) {
    .advisory-block .advisory-img {
        display: inline-block;
        height: 194px;
        width: 218px;
        background-image: url(../images/new/sprite_adv.png);
        background-size: 218px auto;
        background-repeat: no-repeat;
        transition: none
    }

    .advisory-block a {
        right: 4px;
        top: 121px
    }

    .advisory-block a:hover + .advisory-img {
        background-position: 0 -194px
    }

    .advisory-block .advisory .adv-num {
        font-size: 24px;
        top: 78px
    }
}

.m-footer {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 56px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #e2ebff;
    z-index: 10
}

@media (min-width: 1023px) {
    .m-footer {
        display: none
    }
}

.m-footer ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px
}

.m-footer ul li {
    display: inline-block
}

.m-footer ul li a {
    display: inline-block;
    height: 24px;
    line-height: 24px
}

.m-footer .m-bres, .m-footer .m-mphone {
    height: 40px;
    line-height: 40px;
    width: 50%;
    border-radius: 40px;
    color: #fff;
    text-align: center
}

.m-footer .m-bres i, .m-footer .m-mphone i {
    margin-right: 8px;
    display: inline-block;
    background-image: url(../images/new/sprite_mbottom.png);
    background-size: 48px auto;
    height: 24px;
    width: 24px;
    vertical-align: bottom
}

.m-footer .m-bres a, .m-footer .m-mphone a {
    color: #fff
}

.m-footer .m-bres {
    margin-right: 20px;
    background-color: #8ed2ff
}

.m-footer .m-bres i {
    background-position: 0 0
}

.m-footer .m-mphone {
    background-color: #296bef
}

.m-footer .m-mphone i {
    background-position: -24px 0
}

.notgood {
    position: fixed;
    z-index: 10001
}

.notgood .not-bgc {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(11, 21, 49, .6)
}

.notgood .good-box {
    display: block;
    box-sizing: border-box;
    position: fixed;
    width: 235px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    padding: 24px 24px 28px;
    background-color: #fff;
    border-radius: 10px;
    z-index: 10002;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
}

.notgood .good-img {
    margin-bottom: 20px;
    display: inline-block;
    width: 43px;
    height: 43px;
    background-image: url(../images/new/notgood.png);
    background-size: 43px auto;
    background-repeat: no-repeat
}

.notgood .good-content {
    color: #0b1531;
    font-size: 16px;
    line-height: 1.5
}

.notgood .good-btn {
    margin-top: 20px;
    display: inline-block;
    width: 110px;
    height: 37px;
    line-height: 37px;
    border-radius: 20px;
    border: 2px solid #e0eaff;
    color: #7d8bb3;
    font-size: 13px
}

@-webkit-keyframes toastInOut {
    0% {
        top: 80px;
        opacity: .5
    }
    10% {
        top: 104px;
        opacity: 1
    }
    97% {
        top: 104px;
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0)
    }
    100% {
        opacity: 0;
        display: none;
        -webkit-filter: blur(.5px);
        filter: blur(.5px)
    }
}

.toast-tip {
    position: fixed;
    left: 50%;
    top: 104px;
    padding: 20px 30px;
    font-size: 16px;
    color: #0b1531;
    border-radius: 12px;
    background-color: #fff;
    z-index: 100;
    line-height: 1;
    opacity: 0;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    box-shadow: 0 8px 30px 0 rgba(0, 60, 179, .16)
}

.toast-tip .toast-icon {
    margin-right: 6px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/notice@2x.png) no-repeat center;
    background-size: 20px;
    vertical-align: sub
}

@media (max-width: 1279px) {
    .toast-tip {
        top: 78px;
        padding: 9px 30px;
        font-size: 14px;
        border-radius: 10px
    }

    .toast-tip .toast-icon {
        width: 18px;
        height: 18px;
        background-size: 18px
    }
}

.layback-toast {
    -webkit-animation: toastInOut 5s both;
    animation: toastInOut 5s both
}

@media (max-width: 1279px) {
    .layback-toast {
        -webkit-animation: toastInOut 7s both;
        animation: toastInOut 7s both
    }

    @-webkit-keyframes toastInOut {
        0% {
            top: 60px;
            opacity: .8
        }
        10% {
            top: 78px;
            opacity: 1
        }
        96% {
            top: 78px;
            opacity: 1;
            -webkit-filter: blur(0);
            filter: blur(0)
        }
        100% {
            opacity: 0;
            display: none;
            -webkit-filter: blur(.5px);
            filter: blur(.5px)
        }
    }
}

.help-demo {
    display: flex;
    justify-content: center;
    align-items: center
}

@-webkit-keyframes helpBg {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: .8
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes helpBg {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: .8
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes helpBg01 {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes helpBg01 {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes helpBg02 {
    0% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes helpBg02 {
    0% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes helpBg03 {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes helpBg03 {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes helpBg04 {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes helpBg04 {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes gear {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0
    }
    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 1
    }
}

@keyframes gear {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 0
    }
    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 1
    }
}

@-webkit-keyframes leftCard {
    0% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
        opacity: .5
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes leftCard {
    0% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
        opacity: .5
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes rightCard {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        opacity: .5
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        opacity: 1
    }
}

@keyframes rightCard {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        opacity: .5
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        opacity: 1
    }
}

@-webkit-keyframes helpMan {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes helpMan {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes helpGirl {
    0% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes helpGirl {
    0% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes helpMeInner {
    0% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(2);
        transform: translate3d(-50%, -50%, 0) scale(2);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 1
    }
}

@keyframes helpMeInner {
    0% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(2);
        transform: translate3d(-50%, -50%, 0) scale(2);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 1
    }
}

@-webkit-keyframes helpMeOuter {
    0% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
        transform: translate3d(-50%, -50%, 0) scale(0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 1
    }
}

@keyframes helpMeOuter {
    0% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
        transform: translate3d(-50%, -50%, 0) scale(0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 1
    }
}

@-webkit-keyframes helpIdCard {
    0% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(.95);
        transform: translate3d(-50%, -50%, 0) scale(.95);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 1
    }
}

@keyframes helpIdCard {
    0% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(.95);
        transform: translate3d(-50%, -50%, 0) scale(.95);
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 1
    }
}

.help-cartoon {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
    left: -25px
}

.help-bg {
    position: absolute;
    top: 16px;
    left: 86px;
    display: inline-block;
    width: 355px;
    height: 248px;
    background-image: url(../images/help-cartoon/help_bg.png);
    background-size: 355px auto;
    -webkit-animation: helpBg 1s ease;
    animation: helpBg 1s ease;
    z-index: 20;
    border-radius: 9px;
    box-shadow: 0 3px 11px rgba(41, 107, 239, .16)
}

.help-bg01 {
    position: absolute;
    top: 61px;
    left: 116px;
    display: inline-block;
    width: 80px;
    height: 93px;
    opacity: 0;
    background-image: url(../images/help-cartoon/bg_01.png);
    background-size: 80px auto;
    -webkit-animation: helpBg01 .5s ease;
    animation: helpBg01 .5s ease;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 30
}

.help-bg02 {
    position: absolute;
    top: 66px;
    left: 219px;
    display: inline-block;
    width: 191px;
    height: 82px;
    opacity: 0;
    background-image: url(../images/help-cartoon/bg_02.png);
    background-size: 191px auto;
    -webkit-animation: helpBg02 .5s ease;
    animation: helpBg02 .5s ease;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 30
}

.help-bg03 {
    position: absolute;
    top: 180px;
    left: 116px;
    display: inline-block;
    width: 109px;
    height: 46px;
    opacity: 0;
    background-image: url(../images/help-cartoon/bg_03.png);
    background-size: 109px auto;
    -webkit-animation: helpBg03 .5s ease;
    animation: helpBg03 .5s ease;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 30
}

.help-bg04 {
    position: absolute;
    top: 171px;
    left: 242px;
    display: inline-block;
    width: 160px;
    height: 55px;
    opacity: 0;
    background-image: url(../images/help-cartoon/bg_04.png);
    background-size: 160px auto;
    -webkit-animation: helpBg04 .5s ease;
    animation: helpBg04 .5s ease;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 30
}

.help-gear {
    position: absolute;
    top: 0;
    left: 32px;
    display: inline-block;
    width: 29px;
    height: 29px;
    opacity: 0;
    background-image: url(../images/help-cartoon/gear.png);
    background-size: 29px auto;
    -webkit-animation: gear .5s ease;
    animation: gear .5s ease;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 30
}

.left-card {
    position: absolute;
    top: 63px;
    left: 0;
    display: inline-block;
    width: 103px;
    height: 43px;
    opacity: 0;
    background-image: url(../images/help-cartoon/left_card.png);
    background-size: 103px auto;
    -webkit-animation: leftCard .5s ease;
    animation: leftCard .5s ease;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 10;
    box-shadow: 0 3px 11px rgba(41, 107, 239, .16)
}

.right-card {
    position: absolute;
    top: 10px;
    left: 405px;
    display: inline-block;
    width: 94px;
    height: 109px;
    opacity: 0;
    background-image: url(../images/help-cartoon/right_card.png);
    background-size: 94px auto;
    -webkit-animation: rightCard .5s ease;
    animation: rightCard .5s ease;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 30;
    box-shadow: 0 3px 11px rgba(41, 107, 239, .16)
}

.help-man {
    position: absolute;
    top: 42px;
    left: 20px;
    display: inline-block;
    width: 211px;
    height: 271px;
    opacity: 0;
    background-image: url(../images/help-cartoon/help_man.png);
    background-size: 211px auto;
    -webkit-animation: helpMan .5s ease;
    animation: helpMan .5s ease;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 40
}

.help-girl {
    position: absolute;
    top: 154px;
    left: 231px;
    display: inline-block;
    width: 275px;
    height: 141px;
    opacity: 0;
    background-image: url(../images/help-cartoon/help_girl.png);
    background-size: 275px auto;
    -webkit-animation: helpGirl .5s ease;
    animation: helpGirl .5s ease;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 40
}

.help-me {
    position: absolute;
    top: 172px;
    left: 485px;
    display: inline-block;
    width: 15px;
    height: 15px;
    z-index: 40
}

.help-me i {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px
}

.help-me i:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #cfe7ff;
    border-radius: 15px;
    opacity: 0;
    -webkit-animation: helpMeOuter .5s ease;
    animation: helpMeOuter .5s ease;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.help-me i:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #cfe7ff;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: helpMeInner .5s ease;
    animation: helpMeInner .5s ease;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.help-idcard {
    position: absolute;
    top: 97px;
    left: 164px;
    display: inline-block;
    width: 83px;
    height: 90px;
    opacity: 0;
    background-image: url(../images/help-cartoon/id_card.png);
    background-size: 83px auto;
    -webkit-animation: helpIdCard .5s ease;
    animation: helpIdCard .5s ease;
    -webkit-animation-delay: 1.05s;
    animation-delay: 1.05s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 30
}

@font-face {
    font-family: dsp;
    src: url(../fonts/dsp.eot);
    src: url(../fonts/dsp.eot?#font-spider) format('embedded-opentype'), url(../fonts/dsp.woff2) format('woff2'), url(../fonts/dsp.woff) format('woff'), url(../fonts/dsp.ttf) format('truetype'), url(../fonts/dsp.svg) format('svg');
    font-weight: 400;
    font-style: normal
}

h2.title-big, h3.title-big {
    font-size: 36px;
    line-height: 1;
    color: #000;
    text-align: center
}

h2.title-big span, h3.title-big span {
    display: block
}

h4.title-small {
    font-size: 16px;
    color: #999;
    text-align: center;
    margin-bottom: 30px
}

.g-content {
    background-color: #fff
}

.text-overflow {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.cat-navigation {
    font-size: 14px;
    color: #000
}

.cat-navigation .container {
    border-bottom: 1px solid #d9d9d9;
    padding: 50px 0 25px;
    position: relative
}

.cat-navigation.no-border .container {
    border-bottom: none;
    padding: 40px 0 0 0
}

.slide-item {
    display: none
}

.swiper-slide {
    display: block
}

.swiper-slide-active {
    display: block
}

input, textarea {
    font-family: 'helvetica neue', 'hiragino sans gb', tahoma, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
    font-size: 14px;
    outline: 0;
    border: none 0;
    background-color: transparent
}

a {
    *cursor: pointer
}

.hero {
    width: 100%;
    height: 350px;
    margin-top: -66px;
    *overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.hero .container {
    display: table;
    height: 100%;
    padding-top: 66px;
    *padding-top: 0;
    box-sizing: border-box
}

.hero .hero-content {
    display: table-cell;
    vertical-align: middle
}

.hero .hero-title {
    display: table-cell;
    vertical-align: middle;
    font-size: 36px;
    color: #fff;
    line-height: 1.5;
    font-family: dsp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    *font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    *padding-top: 120px
}

.hero .hero-title span {
    display: block
}

.hero-index {
    position: relative;
    height: 600px;
    background: 0 0
}

.hero-index .hero-index-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/hero/hero_index.jpg) no-repeat center center #f7f8f9;
    background-image: -webkit-image-set(url(../images/hero/hero_index.jpg) 1x, url(../images/hero/hero_index@2x.jpg) 2x);
    z-index: 1
}

.hero-index .container {
    position: relative;
    z-index: 2
}

.hero-index .hero-title {
    display: block;
    color: #000
}

.hero-index .hero-text {
    font-size: 16px;
    line-height: 2;
    color: #333;
    padding: 20px 0 30px;
    word-spacing: 6px
}

.hero-index .btn-primary {
    line-height: 34px
}

.hero-index .phone {
    color: #333;
    margin-top: 20px;
    font-size: 16px
}

.hero-index .phone b {
    font-weight: 400;
    color: #008de8
}

.hero-case {
    background-image: url(../images/hero/hero_case.jpg);
    background-image: -webkit-image-set(url(../images/hero/hero_case.jpg) 1x, url(../images/hero/hero_case@2x.jpg) 2x)
}

.hero-source {
    background-image: url(../images/hero/hero_source.jpg);
    background-image: -webkit-image-set(url(../images/hero/hero_source.jpg) 1x, url(../images/hero/hero_source@2x.jpg) 2x)
}

.hero-orientation {
    background-image: url(../images/hero/hero_orientation.jpg);
    background-image: -webkit-image-set(url(../images/hero/hero_orientation.jpg) 1x, url(../images/hero/hero_orientation@2x.jpg) 2x)
}

.hero-technology {
    background-image: url(../images/hero/hero_technology.jpg);
    background-image: -webkit-image-set(url(../images/hero/hero_technology.jpg) 1x, url(../images/hero/hero_technology@2x.jpg) 2x)
}

.hero-join {
    background-image: url(../images/hero/hero_join_us.jpg);
    background-image: -webkit-image-set(url(../images/hero/hero_join_us.jpg) 1x, url(../images/hero/hero_join_us@2x.jpg) 2x);
    background-color: #262046;
    background-size: auto 100%
}

.reservation {
    background: #eaeaea;
    padding: 105px 0 40px
}

.reservation .btn {
    padding: 17px 0
}

.reservation .reservation-word {
    padding: 20px 0 45px;
    font-size: 16px;
    color: #666;
    text-align: center
}

.reservation .reservation-form {
    width: 870px;
    margin: 0 auto;
    margin-bottom: 70px
}

.reservation .reservation-form > ul {
    *zoom: 1;
    zoom: 1;
    margin-right: -30px
}

.reservation .reservation-form > ul:after, .reservation .reservation-form > ul:before {
    display: table;
    content: ""
}

.reservation .reservation-form > ul:after {
    clear: both
}

.reservation .reservation-form > ul:after, .reservation .reservation-form > ul:before {
    display: table;
    content: ""
}

.reservation .reservation-form > ul:after {
    clear: both
}

.reservation .reservation-form li {
    float: left;
    *width: 420px;
    margin-right: 30px;
    height: 95px;
    position: relative
}

.reservation .reservation-form li.item-disabled input.res-inp {
    color: #ccc;
    cursor: not-allowed;
    background-color: #eee;
    pointer-events: none
}

.reservation .reservation-form li.item-disabled .res-error-text {
    display: none
}

.reservation .reservation-form li .res-error-text {
    position: absolute;
    top: 40px;
    right: 10px;
    color: red;
    font-size: 14px;
    line-height: 48px;
    display: none
}

.reservation .reservation-form li.item-error .res-error-text {
    display: block
}

.reservation .reservation-form li.item-error input.res-inp {
    border-color: red
}

.reservation .reservation-form li input.res-inp {
    width: 360px;
    height: 48px;
    line-height: 48px;
    border-radius: 2px;
    background-color: #fff;
    background-image: url(../images/icon/icon-reservation.png);
    background-image: -webkit-image-set(url(../images/icon/icon-reservation.png) 1x, url(../images/icon/icon-reservation@2x.png) 2x);
    background-repeat: no-repeat;
    border: 1px solid #e1e0e0;
    padding: 0 10px 0 48px;
    transition: border-color .4s
}

.reservation .reservation-form li input.res-inp::-webkit-input-placeholder {
    color: #c9caca
}

.reservation .reservation-form li input.res-inp:-moz-placeholder {
    color: #c9caca
}

.reservation .reservation-form li input.res-inp::-moz-placeholder {
    color: #c9caca
}

.reservation .reservation-form li input.res-inp:-ms-input-placeholder {
    color: #c9caca
}

.reservation .reservation-form li input.res-inp.company {
    background-position: 11px -391px
}

.reservation .reservation-form li input.res-inp.name {
    background-position: 11px -444px
}

.reservation .reservation-form li input.res-inp.tel {
    background-position: 11px -496px
}

.reservation .reservation-form li input.res-inp.mail {
    background-position: 11px -544px
}

.reservation .reservation-form li input.res-inp:focus {
    color: #008de8;
    border-color: #008de8
}

.reservation .reservation-form li input.res-inp:focus::-webkit-input-placeholder {
    color: transparent
}

.reservation .reservation-form li input.res-inp:focus:-ms-input-placeholder {
    color: transparent
}

.reservation .reservation-form li input.res-inp:focus:-moz-placeholder {
    color: transparent
}

.reservation .reservation-form li input.res-inp:focus::-moz-placeholder {
    color: transparent
}

.reservation .reservation-form li input.res-inp:focus.company {
    background-position: 11px -189px
}

.reservation .reservation-form li input.res-inp:focus.name {
    background-position: 11px -242px
}

.reservation .reservation-form li input.res-inp:focus.tel {
    background-position: 11px -294px
}

.reservation .reservation-form li input.res-inp:focus.mail {
    background-position: 11px -342px
}

.reservation .reservation-form li input.res-inp.warning {
    color: #f0614e;
    border-color: #f0614e
}

.reservation .reservation-form li input.res-inp.warning.company {
    background-position: 11px 13px
}

.reservation .reservation-form li input.res-inp.warning.name {
    background-position: 11px -40px
}

.reservation .reservation-form li input.res-inp.warning.tel {
    background-position: 11px -92px
}

.reservation .reservation-form li input.res-inp.warning.mail {
    background-position: 11px -140px
}

.reservation .reservation-form li .checkbox {
    color: #666;
    padding: 12px 0
}

.reservation .reservation-form li .checkbox input.check-personal {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    background: url(../images/checkbox.png);
    background: -webkit-image-set(url(../images/checkbox.png) 1x, url(../images/checkbox@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 0;
    background: 0 0 \9;
    -webkit-appearance: none;
    border: none
}

.reservation .reservation-form li .checkbox input.check-personal:checked {
    background-position: 0 -20px
}

.reservation .reservation-form li .checkbox label {
    cursor: pointer
}

.reservation .reservation-form li.item-error .item-required input.res-inp {
    border-color: red
}

.reservation .reservation-form li.readonly .item-required .tc-btn {
    background: #f9f9f9 !important;
    color: #999
}

.reservation .reservation-form li .item-required {
    position: relative;
    border: 1px solid #e1e0e0;
    font-size: 0
}

.reservation .reservation-form li .item-required input.res-inp {
    background-image: none;
    padding-left: 14px;
    width: 225px !important;
    border: 1px solid transparent
}

.reservation .reservation-form li .item-required input.res-inp:focus {
    color: #008de8;
    border: 1px solid #008de8
}

.reservation .reservation-form li .item-required .tc-btn {
    box-sizing: border-box;
    width: 105px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    vertical-align: top;
    border: 1px solid transparent
}

.reservation .reservation-form li .item-required .error-info {
    font-size: 14px
}

.reservation .reservation-form li.item-loc {
    border-radius: 2px
}

.reservation .reservation-form li select {
    font-size: 14px;
    outline: 0;
    border-radius: 0 !important;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    color: #cbcbcb
}

.reservation .reservation-form li select.res-inp {
    width: 360px;
    height: 48px;
    line-height: 48px;
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #e1e0e0;
    padding: 0 10px 0 14px;
    transition: border-color .4s
}

.reservation .btn-erea {
    width: 510px;
    margin: 0 auto
}

.reservation .open-account {
    border-top: 1px solid #c9caca;
    padding-top: 55px
}

.reservation .open-account .open-con {
    width: 510px;
    margin: 0 auto
}

.reservation .open-account .title {
    margin-bottom: 40px
}

.reservation .open-account .invite-agency {
    text-align: center;
    margin: 30px 0 0
}

.reservation .open-account .invite-agency .btn {
    padding: 6px 30px
}

.reservation_400 {
    padding-bottom: 40px
}

.reservation_400 .reservation-con {
    *zoom: 1;
    width: 880px;
    margin: 0 auto
}

.reservation_400 .reservation-con:after, .reservation_400 .reservation-con:before {
    display: table;
    content: ""
}

.reservation_400 .reservation-con:after {
    clear: both
}

.reservation_400 .reservation-con:after, .reservation_400 .reservation-con:before {
    display: table;
    content: ""
}

.reservation_400 .reservation-con:after {
    clear: both
}

.reservation_400 .reservation-con .reservation-fill {
    float: left;
    width: 370px
}

.reservation_400 .reservation-con .reservation-form {
    width: 360px
}

.reservation_400 .reservation-con .reservation-form li {
    height: auto;
    margin-bottom: 30px
}

.reservation_400 .reservation-con .reservation-form li input.res-inp {
    width: 300px
}

.reservation_400 .reservation-con .reservation-form li.item-company {
    margin-bottom: 0
}

.reservation_400 .reservation-con .reservation-form li .res-error-text {
    top: 38px
}

.reservation_400 .reservation-con .reservation-form .btn-erea {
    width: 226px;
    margin: 0 auto;
    padding-top: 15px
}

.reservation_400 .reservation-con .rereservation-phone {
    float: right;
    width: 380px;
    text-align: center
}

.reservation_400 .reservation-con .rereservation-phone .icon-phone {
    display: inline-block;
    margin-top: 25px;
    width: 80px;
    height: 82px;
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 -380px
}

.reservation_400 .reservation-con .rereservation-phone .phone-number {
    font-size: 42px;
    color: #008de8;
    font-weight: 700;
    margin: 20px 0
}

.reservation_400 .reservation-con .rereservation-phone .time {
    color: #000;
    font-size: 14px
}

.reservation_400 .reservation-con h3.title {
    font-size: 26px;
    line-height: 1;
    font-family: dsp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif
}

.reservation_400 .reservation-con .reservation-word {
    font-size: 14px;
    color: #666
}

.reservation_400 .open-account .invite-agency {
    text-align: center;
    margin: 30px 0 0
}

.reservation_400 .open-account .invite-agency .btn {
    padding: 6px 30px
}

.reservation-pop {
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 99999;
    background: #666;
    background: rgba(0, 0, 0, .7)
}

.reservation-pop .pop-wrap {
    overflow-y: scroll;
    padding: 0 75px;
    width: 450px;
    height: 690px
}

.reservation-pop .pop-con {
    padding: 45px 0;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -390px;
    background-color: #fff;
    color: #000;
    border-radius: 3px;
    box-shadow: 2px 5px 12px rgba(0, 0, 0, .1)
}

.reservation-pop .pop-con .reservation-points {
    padding-bottom: 30px;
    margin-bottom: 35px;
    border-bottom: 1px solid #e9e9e9
}

.reservation-pop .pop-con h4 {
    font-size: 24px;
    margin: 20px 0
}

.reservation-pop .pop-con p {
    font-size: 16px;
    line-height: 2;
    color: #000
}

.reservation-pop .pop-con p > span {
    color: #008de8
}

.reservation-pop .pop-con .btn {
    width: 160px;
    padding: 12px 0
}

.reservation-pop .pop-con .reservation-research {
    text-align: left
}

.reservation-pop .pop-con .research-list {
    font-size: 14px;
    padding: 30px 0 0
}

.reservation-pop .pop-con .research-list li {
    padding-bottom: 20px
}

.reservation-pop .pop-con .research-list li h5 {
    font-size: 14px;
    padding-bottom: 10px
}

.reservation-pop .pop-con .research-list li label {
    font-size: 14px;
    vertical-align: middle;
    padding-left: 8px;
    cursor: pointer
}

.reservation-pop .pop-con .research-list li input {
    margin: 0;
    vertical-align: middle
}

.reservation-pop .pop-con .research-list li input[type=radio] {
    cursor: pointer;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: url(../images/icon/icon-all.png) no-repeat;
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-position: -660px -618px
}

.reservation-pop .pop-con .research-list li input[type=radio]:checked {
    background-position: -640px -618px
}

.reservation-pop .pop-con .research-list li input[type=checkbox] {
    cursor: pointer;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: url(../images/icon/icon-all.png) no-repeat;
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-position: -620px -618px
}

.reservation-pop .pop-con .research-list li input[type=checkbox]:checked {
    background-position: -600px -618px
}

.reservation-pop .pop-con .research-list li p {
    padding: 5px 0
}

.reservation-pop .pop-con .research-list .research-inp {
    border: 1px solid #88c1d9;
    box-sizing: border-box;
    padding: 0 14px;
    width: 100%;
    display: block;
    line-height: 36px;
    height: 36px
}

.reservation-pop .pop-con .research-list .research-inp.error-inp {
    border-color: #f0614e;
    color: #f0614e
}

.reservation-pop .pop-con .research-list .research-select {
    border: 1px solid #88c1d9;
    box-sizing: border-box;
    padding: 0 14px;
    width: 100%;
    display: block;
    line-height: 36px;
    height: 36px;
    border-radius: 0 !important;
    outline: 0;
    -webkit-appearance: none
}

.reservation-pop .pop-con .research-list .research-select.error-inp {
    border-color: #f0614e;
    color: #f0614e
}

.reservation-pop .pop-con .research-list .inp-wrap {
    margin-left: 22px;
    margin-top: 4px;
    display: block
}

.reservation-pop .pop-con .btn-area {
    text-align: center;
    padding-top: 20px
}

.reservation-pop .pop-con .btn.submit-seccess span {
    display: inline-block;
    vertical-align: middle
}

.reservation-pop .pop-con .btn.submit-seccess .icon-ok {
    margin-right: 6px;
    display: inline-block
}

.reservation-pop .pop-con span.error-text {
    color: red;
    font-size: 14px
}

.reservation-pop .btn-close {
    position: absolute;
    right: -42px;
    top: 0
}

.reservation-pop2 .pop-con .reservation-points {
    display: none;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none
}

.reservation-pop2.finished .pop-con {
    margin-top: -191px !important
}

.reservation-pop2.finished .pop-wrap {
    overflow: auto !important;
    height: auto !important
}

.reservation-pop-origin .pop-con {
    padding: 0;
    display: table;
    width: 600px;
    height: 414px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -207px;
    background: #fff;
    color: #000;
    border-radius: 3px;
    box-shadow: 2px 5px 12px rgba(0, 0, 0, .1)
}

.reservation-pop-origin .pop-con > div {
    display: table-cell;
    vertical-align: middle
}

.reservation-pop-origin .pop-con p {
    padding-bottom: 20px;
    font-size: 18px
}

.reservation-pop-origin .pop-wrap {
    height: auto;
    overflow-y: visible;
    padding-top: 58px
}

.reservation-pop-origin .reservation-research {
    display: none
}

.reservation-pop-origin .btn-area {
    display: none
}

.new-reservation {
    position: relative;
    background: #276bef;
    padding: 80px 0 0
}

@media (max-width: 1023px) {
    .new-reservation {
        padding: 35px 0 0
    }
}

.new-reservation .reservation-radius {
    position: absolute;
    top: -56px;
    left: 0;
    height: 60px;
    width: 100%;
    overflow: hidden;
    z-index: 10
}

.new-reservation .reservation-radius .radius-pr {
    position: relative;
    height: 100%
}

.new-reservation .reservation-radius .radius-block {
    position: absolute;
    bottom: -74px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 160%;
    height: 600%;
    border: 80px solid #276bef;
    border-radius: 96%
}

@media (max-width: 1023px) {
    .new-reservation .reservation-radius .radius-block {
        width: 240%
    }
}

.new-reservation .reservation-body {
    margin: 0 auto
}

.new-reservation .btn {
    padding: 17px 0
}

.new-reservation .reservation-word {
    padding: 16px 0 52px;
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    text-align: center
}

.new-reservation .reservation-form {
    width: 870px;
    margin: 0 auto;
    padding: 0
}

.new-reservation .reservation-form > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.new-reservation .reservation-form li {
    height: 95px;
    position: relative
}

.new-reservation .reservation-form li .res-error-text {
    position: absolute;
    top: 60px;
    left: 0;
    color: #ff887f;
    font-size: 14px;
    display: none
}

.new-reservation .reservation-form li select.res-inp {
    font-size: 16px;
    width: 242px;
    height: 48px;
    line-height: 48px;
    color: #fff;
    border-radius: 30px;
    border: 2px solid #6b9bff;
    padding: 0 10px 0 16px;
    transition: border-color .4s;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: 0 0;
    outline: 0
}

.new-reservation .reservation-form li input.res-inp {
    font-size: 16px;
    color: #fff;
    width: 240px;
    height: 48px;
    line-height: 48px;
    box-sizing: border-box;
    border-radius: 30px;
    border: 2px solid #6b9bff;
    padding: 0 10px 0 16px;
    transition: border-color .4s
}

.new-reservation .reservation-form li input.res-inp::-webkit-input-placeholder {
    color: #fff
}

.new-reservation .reservation-form li input.res-inp:-moz-placeholder {
    color: #fff
}

.new-reservation .reservation-form li input.res-inp::-moz-placeholder {
    color: #fff
}

.new-reservation .reservation-form li input.res-inp:-ms-input-placeholder {
    color: #fff
}

.new-reservation .reservation-form li input.res-inp.company {
    background-position: 11px -391px
}

.new-reservation .reservation-form li input.res-inp.name {
    background-position: 11px -444px
}

.new-reservation .reservation-form li input.res-inp.tel {
    background-position: 11px -496px
}

.new-reservation .reservation-form li input.res-inp.mail {
    background-position: 11px -544px
}

.new-reservation .reservation-form li input.res-inp:focus {
    color: #fff;
    border-color: #fff
}

.new-reservation .reservation-form li input.res-inp:focus::-webkit-input-placeholder {
    color: transparent
}

.new-reservation .reservation-form li input.res-inp:focus:-ms-input-placeholder {
    color: transparent
}

.new-reservation .reservation-form li input.res-inp:focus:-moz-placeholder {
    color: transparent
}

.new-reservation .reservation-form li input.res-inp:focus::-moz-placeholder {
    color: transparent
}

.new-reservation .reservation-form li input.res-inp.warning {
    color: #f0614e;
    border-color: #f0614e
}

.new-reservation .reservation-form li input.res-inp.warning.company {
    background-position: 11px 13px
}

.new-reservation .reservation-form li input.res-inp.warning.name {
    background-position: 11px -40px
}

.new-reservation .reservation-form li input.res-inp.warning.tel {
    background-position: 11px -92px
}

.new-reservation .reservation-form li input.res-inp.warning.mail {
    background-position: 11px -140px
}

.new-reservation .reservation-form li.item-disabled {
    cursor: not-allowed
}

.new-reservation .reservation-form li.item-disabled input.res-inp {
    color: #89b8ff;
    cursor: not-allowed;
    pointer-events: none;
    border: 2px solid #6b9bff;
    background-color: #4c89ff
}

.new-reservation .reservation-form li.item-disabled input.res-inp::-webkit-input-placeholder {
    color: #89b8ff
}

.new-reservation .reservation-form li.item-disabled input.res-inp:-moz-placeholder {
    color: #89b8ff
}

.new-reservation .reservation-form li.item-disabled input.res-inp::-moz-placeholder {
    color: #89b8ff
}

.new-reservation .reservation-form li.item-disabled input.res-inp:-ms-input-placeholder {
    color: #89b8ff
}

.new-reservation .reservation-form li.item-disabled .res-error-text {
    display: none
}

.new-reservation .reservation-form li .checkbox {
    color: #666;
    padding: 12px 0
}

.new-reservation .reservation-form li .checkbox input.check-personal {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    background: url(../images/checkbox.png);
    background: -webkit-image-set(url(../images/checkbox.png) 1x, url(../images/checkbox@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 0;
    background: 0 0 \9;
    -webkit-appearance: none;
    border: none
}

.new-reservation .reservation-form li .checkbox input.check-personal:checked {
    background-position: 0 -20px
}

.new-reservation .reservation-form li .checkbox label {
    cursor: pointer
}

.new-reservation .reservation-form li.item-ver {
    position: relative;
    width: 242px
}

.new-reservation .reservation-form li.item-ver .tc-btn {
    position: absolute;
    right: 4px;
    top: 18px;
    padding-left: 10px;
    width: 100px;
    height: unset;
    line-height: 1;
    text-align: left;
    border-left: 2px solid #e0eaff;
    font-size: 14px;
    color: #fff
}

.new-reservation .reservation-form li.item-ver .tc-btn.blue {
    color: #89b8ff !important;
    border-left: 2px solid #89b8ff;
    background: unset
}

.new-reservation .reservation-form li.item-ver .tc-btn.disabled {
    color: #89b8ff !important;
    border: 2px solid #6b9bff !important;
    background-color: #4c89ff !important
}

.new-reservation .btn-erea {
    width: 510px;
    margin: 0 auto
}

.new-reservation .two-select {
    display: inline-block;
    width: 241px
}

.new-reservation li.item-city {
    margin-left: 26px
}

.new-reservation li.item-city, .new-reservation li.item-loc {
    position: relative;
    display: inline-block
}

.new-reservation li.item-city select.res-inp, .new-reservation li.item-loc select.res-inp {
    width: 105px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 30px
}

@media (max-width: 1023px) {
    .new-reservation li.item-city, .new-reservation li.item-loc {
        display: block
    }

    .new-reservation li.item-city select.res-inp, .new-reservation li.item-loc select.res-inp {
        width: 100% !important
    }
}

.new-reservation .arrow-down:after {
    display: inline-block;
    content: " ";
    height: 2px;
    width: 8px;
    background-color: #6b9bff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: absolute;
    top: 24px;
    right: 22px;
    border-radius: 4px
}

.new-reservation .arrow-down:before {
    display: inline-block;
    content: " ";
    height: 2px;
    width: 10px;
    background-color: #6b9bff;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: absolute;
    top: 24px;
    right: 26px;
    border-radius: 4px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.new-reservation .item-city:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -20px;
    top: 25px;
    width: 12px;
    height: 2px;
    background-color: #6b9bff;
    border-radius: 4px
}

.new-reservation .open-account {
    height: 330px;
    background-image: url(../images/new/reservation_bgc.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

@media (max-width: 1023px) {
    .new-reservation .open-account {
        display: none
    }
}

.new-reservation .open-account .open-con {
    width: 500px;
    margin: 0 auto;
    padding-top: 80px;
    text-align: center
}

.new-reservation .open-account .title {
    margin-bottom: 40px;
    font-size: 32px;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.5px
}

.new-reservation .open-account .invite-agency {
    text-align: center;
    margin: 20px 0 0
}

.new-reservation .open-account .invite-agency a {
    color: #8f9fcc;
    line-height: 1;
    font-size: 16px
}

.new-reservation .icon-arrow-right {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    left: 3px;
    top: -2px;
    width: 19px;
    height: 11px;
    background-image: url(../images/new/arrow_right.png);
    background-size: 19px;
    background-repeat: no-repeat
}

.new-reservation .radio {
    position: relative;
    display: inline-block;
    margin: 0 24px
}

.new-reservation .radio input[type=radio] {
    position: absolute;
    opacity: 0
}

.new-reservation .radio input[type=radio] + .radio-label {
    color: #fff
}

.new-reservation .radio input[type=radio] + .radio-label:before {
    content: '';
    border-radius: 100%;
    border: 2px solid #6b9bff;
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    margin-right: 12px;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
    color: #89b8ff
}

.new-reservation .radio input[type=radio] + .radio-label:after {
    content: '';
    display: none;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffa601
}

.new-reservation .radio input[type=radio]:checked + .radio-label {
    color: #fff
}

.new-reservation .radio input[type=radio]:checked + .radio-label:before {
    color: #fff;
    border: 2px solid #fff
}

.new-reservation .radio input[type=radio]:checked + .radio-label:after {
    display: inline-block
}

.new-reservation .radio input[type=radio]:focus + .radio-label:before {
    outline: 0;
    border-color: #fff
}

.new-reservation .radio input[type=radio]:disabled + .radio-label:before {
    box-shadow: inset 0 0 0 4px #fff;
    border-color: #bfbfbf;
    background: #bfbfbf
}

.new-reservation .radio input[type=radio] + .radio-label:empty:before {
    margin-right: 0
}

.new-reservation .radio-block {
    margin-bottom: 24px;
    color: #fff;
    text-align: center;
    font-size: 16px
}

.new-reservation_400 .reservation-con {
    *zoom: 1;
    width: 1190px;
    margin: 0 auto;
    padding-bottom: 80px
}

.new-reservation_400 .reservation-con:after, .new-reservation_400 .reservation-con:before {
    display: table;
    content: ""
}

.new-reservation_400 .reservation-con:after {
    clear: both
}

.new-reservation_400 .reservation-con:after, .new-reservation_400 .reservation-con:before {
    display: table;
    content: ""
}

.new-reservation_400 .reservation-con:after {
    clear: both
}

.new-reservation_400 .reservation-con .reservation-fill {
    float: left;
    width: 650px;
    padding-right: 80px;

}

.new-reservation_400 .reservation-con .reservation-form {
    width: 530px
}

.new-reservation_400 .reservation-con .reservation-form li {
    height: auto;
    margin-bottom: 20px
}

.new-reservation_400 .reservation-con .reservation-form li.item-error {
    position: relative;
    margin-bottom: 40px
}

.new-reservation_400 .reservation-con .reservation-form li.item-error .res-error-text {
    display: block
}

.new-reservation_400 .reservation-con .reservation-form li.item-error input.res-inp {
    border-color: #ff887f
}

.new-reservation_400 .reservation-con .reservation-form .btn-erea {
    width: 100%;
    margin: 0 auto;
    padding-top: 10px;
    text-align: center
}

.new-reservation_400 .reservation-con .reservation-form .btn-erea .btn-reservation {
    width: 506px;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 16px
}

.new-reservation_400 .reservation-con .reservation-form .btn-erea .btn-reservation.disabled {
    background-color: #4c89ff;
    color: #89b8ff
}

.new-reservation_400 .reservation-con .rereservation-phone {
    float: right;
    width: 380px;
    text-align: center
}

.new-reservation_400 .reservation-con .rereservation-phone .icon-hi {
    display: inline-block;
    width: 165px;
    height: 170px;
    background-image: url(../images/new/hi.png);
    background-repeat: no-repeat;
    background-size: 165px auto
}

.new-reservation_400 .reservation-con .rereservation-phone .phone-number {
    font-size: 40px;
    color: #fff;
    margin: 52px 0 15px 0;
    font-family: Roboto;
    line-height: 1
}

.new-reservation_400 .reservation-con .rereservation-phone .time {
    color: rgba(239, 241, 243, .6);
    font-size: 16px
}

.new-reservation_400 .reservation-con h3.title {
    font-size: 32px;
    line-height: 1;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1.5px
}

.new-reservation_400 .reservation-con .reservation-word {
    font-size: 16px;
    color: rgba(255, 255, 255, .6)
}

.new-reservation_400 .open-account .invite-agency {
    text-align: center;
    margin: 24px 0 0
}

.new-reservation_400 .open-account .invite-agency .btn {
    padding: 6px 30px
}

@media (max-width: 1279px) {
    .new-reservation_400 .reservation-con {
        width: 1000px
    }

    .new-reservation_400 .reservation-con .reservation-fill {
        padding-right: 5px;
        padding-left: 5px
    }

    .new-reservation_400 .reservation-con .rereservation-phone {
        width: 300px
    }

    .new-reservation_400 .reservation-con h3.title {
        font-size: 28px
    }

    .new-reservation_400 .reservation-con .reservation-word {
        font-size: 14px
    }
}

@media (max-width: 1023px) {
    .new-reservation_400 .reservation-con {
        width: auto;
        padding-bottom: 50px
    }
    .footer_box {
        zoom: 0.3;!important;
        height: 508px;!important;

    }
    .new-reservation_400 .reservation-con .rereservation-phone {
        display: none
    }

    .new-reservation_400 .reservation-con .reservation-fill {
        border: none;
        width: 100%
    }

    .new-reservation_400 .reservation-con h3.title {
        font-size: 24px
    }

    .new-reservation_400 .reservation-con .reservation-word {
        font-size: 12px;
        padding-bottom: 40px
    }

    .new-reservation_400 .reservation-con .reservation-form {
        box-sizing: border-box;
        padding: 0 20px;
        width: 100%
    }

    .new-reservation_400 .reservation-con .reservation-form li {
        width: 100%
    }

    .new-reservation_400 .reservation-con .reservation-form li input.res-inp {
        width: 100%;
        box-sizing: border-box
    }
}

.reservation-pop {
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 99999;
    background: #666;
    background: rgba(0, 0, 0, .7)
}

.reservation-pop .pop-wrap {
    overflow-y: scroll;
    padding: 0 75px 45px;
    width: 450px;
    height: 690px
}

.reservation-pop .pop-success {
    height: auto;
    padding: 0 75px 75px
}

.reservation-pop .pop-con {
    padding: 45px 0 0;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -390px;
    background-color: #fff;
    color: #000;
    border-radius: 12px;
    box-shadow: 2px 5px 12px rgba(0, 0, 0, .1)
}

.reservation-pop .pop-con .reservation-points {
    margin-bottom: 0;
    border-bottom: 1px solid #e9e9e9
}

.reservation-pop .pop-con .reservation-points .registered-success {
    width: 165px
}

.reservation-pop .pop-con h4 {
    font-size: 32px;
    margin: 20px 0;
    color: #ffa601;
    font-weight: 500
}

.reservation-pop .pop-con p {
    font-size: 16px;
    line-height: 1.5;
    color: #0b1531
}

.reservation-pop .pop-con p > span {
    color: #008de8
}

.reservation-pop .pop-con .btn {
    width: 160px;
    padding: 12px 0
}

.reservation-pop .pop-con .reservation-research {
    text-align: left
}

.reservation-pop .pop-con .research-list {
    font-size: 14px;
    padding: 30px 0 0
}

.reservation-pop .pop-con .research-list li {
    padding-bottom: 20px
}

.reservation-pop .pop-con .research-list li h5 {
    font-size: 14px;
    padding-bottom: 10px
}

.reservation-pop .pop-con .research-list li label {
    font-size: 14px;
    vertical-align: middle;
    padding-left: 8px;
    cursor: pointer;
    color: #28292b
}

.reservation-pop .pop-con .research-list li input {
    margin: 0;
    vertical-align: middle
}

.reservation-pop .pop-con .research-list li input[type=radio] {
    cursor: pointer;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: 0 0;
    position: relative;
    display: inline-block;
    border: 2px solid #e0eaff;
    border-radius: 100%;
    box-sizing: border-box;
    background: #fff
}

.reservation-pop .pop-con .research-list li input[type=radio]:checked {
    border: 2px solid #296bef
}

.reservation-pop .pop-con .research-list li input[type=radio]:checked:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #296bef
}

.reservation-pop .pop-con .research-list li input[type=radio]:checked + .label {
    color: #28292b
}

.reservation-pop .pop-con .research-list li input[type=checkbox] {
    cursor: pointer;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #e0eaff;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff
}

.reservation-pop .pop-con .research-list li input[type=checkbox]:checked {
    border: 2px solid #1890cc
}

.reservation-pop .pop-con .research-list li input[type=checkbox]:checked:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: #1890cc
}

.reservation-pop .pop-con .research-list li p {
    padding: 5px 0
}

.reservation-pop .pop-con .research-list .research-inp {
    display: block;
    width: 100%;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    padding: 0 20px;
    font-size: 14px;
    color: #dadfe6;
    height: 42px;
    border-radius: 30px;
    color: #0b1531;
    border: 2px solid #e0eaff
}

.reservation-pop .pop-con .research-list .research-inp.error-inp {
    border-color: #ff7566;
    color: #ff7566
}

.reservation-pop .pop-con .research-list .error-qq {
    position: relative;
    padding-left: 20px;
    left: 22px;
    top: 4px;
    font-size: 14px;
    color: #ff7566
}

.reservation-pop .pop-con .research-list .error-qq:after {
    display: inline-block;
    content: '';
    width: 16px;
    height: 16px;
    margin-top: -2px;
    margin-right: 5px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
    background-image: url(../images/new/cross.png);
    background-position: center;
    background-size: 16px auto;
    background-repeat: no-repeat
}

.reservation-pop .pop-con .research-list .research-select {
    resize: none;
    display: block;
    width: 100%;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    padding: 0 20px;
    font-size: 14px;
    color: #dadfe6;
    height: 42px;
    border-radius: 30px !important;
    color: #0b1531;
    border: 2px solid #e0eaff
}

.reservation-pop .pop-con .research-list .select-block {
    position: relative
}

.reservation-pop .pop-con .research-list .select-block:after {
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-width: 0 2px 2px 0;
    border-color: #6b9bff;
    border-style: solid;
    -webkit-transform: translateY(-80%) rotate(45deg);
    -ms-transform: translateY(-80%) rotate(45deg);
    transform: translateY(-80%) rotate(45deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: absolute;
    top: 50%;
    right: 25px
}

.reservation-pop .pop-con .research-list .inp-wrap {
    margin-left: 22px;
    margin-top: 4px;
    display: block
}

.reservation-pop .pop-con .btn-area {
    text-align: center;
    padding-top: 0
}

.reservation-pop .pop-con .btn-area .new-btn {
    display: block
}

.reservation-pop .pop-con .btn.submit-seccess span {
    display: inline-block;
    vertical-align: middle
}

.reservation-pop .pop-con .btn.submit-seccess .icon-ok {
    margin-right: 6px;
    display: inline-block
}

.reservation-pop .pop-con span.error-text {
    color: #ff7566;
    font-size: 14px
}

.reservation-pop .btn-close {
    position: absolute;
    right: -42px;
    top: 0
}

.reservation-pop2 .pop-con .reservation-points {
    display: none;
    padding-bottom: 0;
    margin-bottom: 30px;
    border-bottom: none
}

.reservation-pop2.finished .pop-con {
    margin-top: -191px !important
}

.reservation-pop2.finished .pop-wrap {
    overflow: auto !important;
    height: auto !important
}

.reservation-pop-origin .pop-con {
    padding: 0;
    display: table;
    width: 600px;
    height: 414px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -207px;
    background: #fff;
    color: #000;
    border-radius: 3px;
    box-shadow: 2px 5px 12px rgba(0, 0, 0, .1)
}

.reservation-pop-origin .pop-con > div {
    display: table-cell;
    vertical-align: middle
}

.reservation-pop-origin .pop-con p {
    padding-bottom: 20px;
    font-size: 18px
}

.reservation-pop-origin .pop-wrap {
    height: auto;
    overflow-y: visible;
    padding-top: 58px
}

.reservation-pop-origin .reservation-research {
    display: none
}

.reservation-pop-origin .btn-area {
    display: none
}

.pc-fill {
    display: block
}

@media (max-width: 1023px) {
    .pc-fill {
        display: none
    }
}

.m-fill {
    display: none
}
.footer_box {
    height: 424px;
    background: url(../newimg/bottom_bj.png) no-repeat center bottom;
    margin-top: 50px;
    padding-top: 88px;
}

@media (max-width: 1023px) {
    .m-fill {
        display: block
    }
}

.m-fill ul li .choose-select {
    position: relative;
    display: inline-block;
    width: 46%
}

.m-fill ul li .choose-select:after {
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-width: 0 2px 2px 0;
    border-color: #c4d4f5;
    border-style: solid;
    -webkit-transform: translateY(-80%) rotate(45deg);
    -ms-transform: translateY(-80%) rotate(45deg);
    transform: translateY(-80%) rotate(45deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: absolute;
    top: 50%;
    right: 25px
}

.m-fill ul li.choose-dust, .m-fill ul li.choose-loc {
    position: relative;
    border: 0;
    font-size: 0;
    display: flex;
    justify-content: space-between
}

.m-fill ul li.choose-dust .form-error, .m-fill ul li.choose-loc .form-error {
    border: 0
}

.m-fill ul li.choose-dust select, .m-fill ul li.choose-loc select {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    width: 100%;
    color: #fff;
    border-radius: 30px;
    border: 2px solid #6b9bff;
    padding: 0 10px 0 26px;
    transition: border-color .4s;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: 0 0;
    outline: 0
}

.m-fill ul li.choose-dust select:nth-child(2), .m-fill ul li.choose-loc select:nth-child(2) {
    margin-right: 0
}

.m-fill ul li.choose-dust i, .m-fill ul li.choose-loc i {
    position: absolute;
    left: 49.5%;
    top: 50%;
    display: inline-block;
    height: 2px;
    width: 12px;
    background-color: #e0eaff;
    border-radius: 1px;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

@media (max-width: 1279px) {
    .m-fill ul li.choose-dust i, .m-fill ul li.choose-loc i {
        left: 50.5%
    }
}

.m-fill ul li.choose-dust {
    width: 100%
}

.m-fill ul li.choose-dust .choose-select {
    width: 100% !important
}

.m-fill .btn-reservation {
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 16px
}

.m-fill .btn-reservation.disabled {
    background-color: #4c89ff;
    color: #89b8ff
}

.icon-all {
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat
}

i.icon {
    display: inline-block;
    vertical-align: middle;
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat
}

i.icon.icon-registration-notice {
    background-position: -511px -618px;
    width: 24px;
    height: 28px
}

i.icon.icon-learning-center {
    background-position: -372px -618px;
    width: 24px;
    height: 28px
}

i.icon.icon-ads-faq {
    background-position: -402px -618px;
    width: 24px;
    height: 28px
}

i.icon.icon-activity-announce {
    background-position: -432px -618px;
    width: 24px;
    height: 28px
}

i.icon.icon-play {
    background-position: -541px -618px;
    width: 20px;
    height: 20px
}

i.icon.icon-open-account {
    background-position: 0 -618px;
    width: 42px;
    height: 32px
}

i.icon.icon-new-ads {
    background-position: -48px -618px;
    width: 42px;
    height: 32px
}

i.icon.icon-effect-evaluation {
    background-position: -96px -618px;
    width: 34px;
    height: 34px
}

i.icon.icon-effect-optimization {
    background-position: -136px -618px;
    width: 34px;
    height: 34px
}

i.icon.icon-assist-tools {
    background-position: -176px -618px;
    width: 29px;
    height: 32px
}

i.icon.icon-pro-illustration {
    background-position: -211px -618px;
    width: 30px;
    height: 35px
}

i.icon.icon-latest-update {
    background-position: -247px -618px;
    width: 34px;
    height: 34px
}

i.icon.icon-optimization-guide {
    background-position: -287px -618px;
    width: 30px;
    height: 33px
}

i.icon.icon-industry-solution {
    background-position: -323px -618px;
    width: 43px;
    height: 36px
}

i.icon.icon-video {
    background-position: -462px 0;
    width: 43px;
    height: 25px
}

i.icon.icon-attention {
    background-position: -567px -618px;
    width: 23px;
    height: 23px
}

i.icon.icon-success {
    background-position: -460px -265px;
    width: 80px;
    height: 80px
}

i.icon.icon-creative-guide {
    background-position: 0 -660px;
    width: 31px;
    height: 33px
}

i.icon.icon-schedule {
    background-position: 0 -468px;
    width: 122px;
    height: 138px
}

i.icon.icon-bid {
    background-position: -128px -468px;
    width: 171px;
    height: 138px
}

i.icon.icon-price {
    background-position: -720px -468px;
    width: 171px;
    height: 138px
}

i.icon.icon-accurate {
    background-position: -304px -467px;
    width: 138px;
    height: 138px
}

i.icon.icon-experience {
    background-position: -448px -468px;
    width: 110px;
    height: 138px
}

i.icon.icon-recognition {
    background-position: -563px -467px;
    width: 145px;
    height: 138px
}

i.icon.icon-ok {
    background-position: -680px -618px;
    width: 22px;
    height: 22px
}

i.icon.icon-close {
    background-position: -710px -618px;
    width: 32px;
    height: 32px
}

i.icon.icon-success-lg {
    width: 46px;
    height: 46px;
    background: no-repeat;
    background-position: 0 0
}

i.icon.icon-warning-lg {
    width: 46px;
    height: 46px;
    background: no-repeat;
    background-position: 0 -50px
}

i.icon.icon-error-lg {
    width: 46px;
    height: 46px;
    background: no-repeat;
    background-position: -50px 0
}

.reservation-pop i.icon.icon-close {
    background-image: url(../images/new/close_form.png);
    width: 30px;
    height: 30px;
    background-position: 0 0;
    background-size: 30px auto
}

i.icon.icon-error-lg, i.icon.icon-success-lg, i.icon.icon-warning-lg {
    background-image: url(../images/sprites/main.png?20170419105225);
    background-image: -webkit-image-set(url(../images/sprites/main.png?20170419105225) 1x, url(../images/sprites/main@2x.png?20170419105225) 2x)
}

@media only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-resolution: 240dpi), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
    i.icon.icon-error-lg, i.icon.icon-success-lg, i.icon.icon-warning-lg {
        background-image: url(../images/sprites/main@2x.png?20170419105225);
        background-size: 124px auto
    }

    i.icon.icon-success-lg {
        background-position: 0 0
    }

    i.icon.icon-warning-lg {
        background-position: 0 -48px
    }

    i.icon.icon-error-lg {
        background-position: -48px 0
    }
}

.source-description {
    padding: 90px 0
}

.source-description .description-word {
    padding-top: 15px;
    line-height: 2;
    font-size: 16px;
    color: #000;
    text-align: center
}

.show-position {
    background: #fff;
    padding: 90px 0 0
}

.show-position h3.title {
    margin-bottom: 85px
}

.show-list {
    text-align: center;
    margin-top: 50px;
    font-size: 0
}

.show-list > a {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    display: inline-block;
    color: #7c7c7c;
    font-size: 18px;
    border-radius: 2px;
    position: relative
}

.show-list > a:after {
    content: "";
    width: 1px;
    height: 18px;
    line-height: 1;
    display: inline-block;
    overflow: hidden;
    background-color: #d1d1d1;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px
}

.show-list > a.active {
    background: #008de8;
    color: #fff;
    margin-right: -1px;
    z-index: 10
}

.show-list > a.active:after {
    opacity: 0
}

.show-list > a:first-child:after {
    opacity: 0
}

.scene {
    width: 100%;
    overflow: hidden;
    background: #fff
}

.scene .container {
    width: 1274px
}

.scene .scene-text {
    height: 521px
}

.scene .scene-item {
    margin-top: 90px;
    padding: 0 172px 0;
    border-bottom: 1px solid #e9e9e9;
    background-repeat: no-repeat;
    *zoom: 1;
    background-position: right bottom;
    overflow: hidden;
    position: relative
}

.scene .scene-item:after, .scene .scene-item:before {
    display: table;
    content: ""
}

.scene .scene-item:after {
    clear: both
}

.scene .scene-item:after, .scene .scene-item:before {
    display: table;
    content: ""
}

.scene .scene-item:after {
    clear: both
}

.scene .scene-item.section-active .bg-decor:after, .scene .scene-item.section-active .bg-decor:before {
    opacity: 1
}

.scene .scene-item.section-active .bg-capt {
    box-shadow: 1px 0 8px rgba(0, 0, 0, .3)
}

.scene .scene-item .nav {
    border-radius: 3px;
    position: absolute;
    left: 172px;
    bottom: 100px
}

.scene .scene-item .nav li {
    border: 1px solid #dadada;
    border-left-width: 0;
    text-align: center
}

.scene .scene-item .nav li:first-child {
    border-left-width: 1px;
    border-radius: 3px 0 0 3px
}

.scene .scene-item .nav li:first-child.active, .scene .scene-item .nav li:first-child:hover {
    border-left-color: #008de8
}

.scene .scene-item .nav li:last-child {
    border-radius: 0 3px 3px 0
}

.scene .scene-item .nav li:last-child.active, .scene .scene-item .nav li:last-child:hover {
    border-right-color: #008de8
}

.scene .scene-item .nav.nav-word2 li {
    width: 85px
}

.scene .scene-item .nav.nav-word4 li {
    width: 105px
}

.scene .scene-item .nav.nav-word6 li {
    width: 145px
}

.scene .scene-text {
    float: left;
    width: 390px;
    display: table
}

.scene .scene-text .text-erea {
    display: table-cell;
    vertical-align: middle;
    *padding-top: 160px
}

.scene .scene-text .sub-tit {
    margin-bottom: 8px;
    font-size: 18px;
    color: #a8a8a8
}

.scene .scene-text h4 {
    font-size: 26px;
    color: #333;
    margin-bottom: 30px
}

.scene .scene-text p {
    font-size: 16px;
    line-height: 2;
    color: #000
}

.scene .scene-text .h-line3 {
    height: 160px;
    color: #909090;
    margin-top: 10px
}

.scene .scene-text .h-line5 {
    height: 200px;
    margin-top: 10px
}

.scene .scene-pic {
    float: right;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center
}

.scene .scene-pic .scene-paper {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: relative;
    border: 1px solid #dedede;
    border-bottom: none;
    border-radius: 4px
}

.scene .scene-pic .bg-decor {
    position: absolute
}

.scene .scene-pic .bg-decor:after, .scene .scene-pic .bg-decor:before {
    content: "‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧‧";
    position: absolute;
    overflow: hidden;
    line-height: 1;
    transition: all .6s .6s;
    opacity: 0
}

.scene .scene-pic .bg-capt {
    position: relative;
    z-index: 2;
    transition: all .8s
}

.scene .scene-pic .bg-capt > img {
    display: block
}

.scene .scene-pic .bg-shade {
    width: 100%;
    height: 100%;
    position: absolute
}

.scene.scene-phone .scene-pic {
    background-image: url(../images/source/bg-phone.png);
    background-image: -webkit-image-set(url(../images/source/bg-phone.png) 1x, url(../images/source/bg-phone@2x.png) 2x);
    width: 323px;
    height: 521px
}

.scene.scene-phone .scene-pic .scene-paper {
    width: 285px;
    height: 446px;
    margin-top: 75px
}

.scene.scene-phone.app-scene .scene-pic, .scene.scene-phone.browser-scene-new .scene-pic, .scene.scene-phone.qq-mobile-scene-new .scene-pic, .scene.scene-phone.qzone-mobile-scene .scene-pic {
    width: 301px;
    height: 538px;
    background-image: url(../images/source/bg-phone-b.png)
}

.scene.scene-phone.app-scene .scene-pic .scene-paper, .scene.scene-phone.browser-scene-new .scene-pic .scene-paper, .scene.scene-phone.qq-mobile-scene-new .scene-pic .scene-paper, .scene.scene-phone.qzone-mobile-scene .scene-pic .scene-paper {
    width: 267px;
    height: 471px;
    margin-top: 66px
}

.scene.scene-desktop .scene-item {
    padding: 0 100px
}

.scene.scene-desktop .scene-item .nav {
    left: 100px;
    bottom: 90px
}

.scene.scene-desktop .scene-item.left-pic .nav {
    left: 784px
}

.scene.scene-desktop .scene-item .scene-pic {
    background-image: url(../images/source/bg-desktop.png);
    background-image: -webkit-image-set(url(../images/source/bg-desktop.png) 1x, url(../images/source/bg-desktop@2x.png) 2x);
    width: 506px;
    height: 318px
}

.scene.scene-desktop .scene-item .scene-pic .scene-paper {
    width: 386px;
    height: 218px;
    background-size: 100% 100%;
    margin-top: 48px;
    border-bottom: 1px solid #dedede
}

.scene-item.left-pic {
    background-position: 0 bottom
}

.scene-item.left-pic .scene-pic {
    float: left
}

.scene-item.left-pic .scene-text {
    float: right
}

.scene-item.left-pic .nav {
    left: 712px
}

.scene .scene-item .bg-shade:after, .scene .scene-item .bg-shade:before {
    display: none \9
}

:root .scene .scene-item .bg-shade:after, :root .scene .scene-item .bg-shade:before {
    display: block \9
}

.description-digital {
    padding: 60px 0;
    width: 1050px;
    margin: 0 auto
}

.description-digital li {
    text-align: center
}

.description-digital li b {
    display: block;
    font-size: 36px;
    color: #008de8;
    margin-bottom: 10px;
    font-weight: 400
}

.description-digital li span {
    display: block;
    font-size: 16px;
    color: #000
}

.diversity {
    padding: 90px 0
}

.diversity .container {
    width: 930px;
    overflow: hidden
}

.diversity-tabs {
    margin: 60px 0;
    text-align: center;
    overflow: hidden;
    position: relative
}

.diversity-tabs:before {
    content: "";
    width: 100%;
    height: 2px;
    background: #dfe0e0;
    position: absolute;
    left: 0;
    bottom: 0
}

.diversity-tabs > a {
    display: inline-block;
    font-size: 18px;
    color: #000;
    padding: 0 0 12px;
    position: relative
}

.diversity-tabs > a:after {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 4px;
    width: 100%;
    content: ' ';
    background-color: #008de8;
    background-color: transparent \9;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.diversity-tabs > a.active, .diversity-tabs > a:hover {
    color: #008de8
}

.diversity-tabs > a.active:after, .diversity-tabs > a:hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #008de8
}

.diversity-tabs.tabs-4 > a {
    margin: 0 35px
}

.diversity-tabs.tabs-3 > a {
    margin: 0 80px
}

.diversity-con .diversity-desc {
    text-align: center;
    font-size: 16px;
    margin-bottom: 60px;
    color: #000
}

.diversity-con .pic {
    text-align: center
}

.diversity-con img {
    max-width: 100%;
    max-height: 415px
}

.sticker {
    z-index: 97;
    position: fixed;
    bottom: 100px;
    right: 100px
}

.sticker.fixed-bottom {
    position: absolute;
    margin-bottom: 0;
    bottom: 421px
}

.sticker.show-roll li.roll-top {
    opacity: 1;
    height: 53px;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.sticker.mini-screen {
    right: 10px
}

.sticker.hidden {
    display: none
}

.sticker li {
    position: relative
}

.sticker li > a {
    display: block;
    width: 53px;
    height: 53px;
    background-image: url(../images/icon/side-bar.png);
    background-image: -webkit-image-set(url(../images/icon/side-bar.png) 1x, url(../images/icon/side-bar@2x.png) 2x);
    background-repeat: no-repeat
}

.sticker li.consultation {
    padding-left: 30px
}

.sticker li.consultation a {
    background-position: 0 0
}

.sticker li.roll-top {
    margin-top: 10px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: all .3s ease
}

.sticker li.roll-top a {
    background-position: 0 bottom
}

.sticker .side-pop {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -46px
}

.sticker .side-pop > a {
    display: block;
    width: 90px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #008de8;
    background-color: #fff
}

.sticker .side-pop > a.open-account {
    border-bottom: none;
    border-radius: 3px 3px 0 0
}

.sticker .side-pop > a.after-sale {
    border-radius: 0 0 3px 3px
}

.new-sticker {
    z-index: 97;
    position: fixed;
    bottom: 100px;
    right: 24px
}

@media (max-width: 1023px) {
    .new-sticker {
        display: none !important
    }
}

.new-sticker.fixed-bottom {
    position: absolute;
    margin-bottom: 0;
    bottom: 421px
}

.new-sticker.show-roll li.roll-top {
    opacity: 1;
    height: 65px;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.new-sticker.mini-screen {
    right: 10px
}

.new-sticker.hidden {
    display: none
}

.new-sticker li {
    position: relative
}

.new-sticker li > a {
    display: inline-block;
    width: 65px;
    height: 65px;
    background-image: url(../images/new/sprite_right.png);
    background-repeat: no-repeat;
    background-size: 102px auto;
    transition: none
}

.new-sticker li.consultation {
    padding-left: 30px
}

.new-sticker li.consultation a {
    background-position: -18px -16px
}

.new-sticker li.consultation a:hover {
    background-position: -18px -120px
}

.new-sticker li.roll-top {
    padding-left: 30px;
    margin-top: 10px;
    height: 0;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: all .3s ease
}

.new-sticker li.roll-top a {
    background-position: -18px -223px
}

.new-sticker li.roll-top a:hover {
    background-position: -18px -327px
}

.new-sticker li .hover-tip {
    display: none;
    position: absolute;
    left: 30px;
    top: 50%;
    -webkit-transform: translateX(-108%) translateY(-50%);
    -ms-transform: translateX(-108%) translateY(-50%);
    transform: translateX(-108%) translateY(-50%)
}

@media (max-width: 1279px) {
    .new-sticker li .hover-tip {
        -webkit-transform: translateX(-108%) translateY(-55%);
        -ms-transform: translateX(-108%) translateY(-55%);
        transform: translateX(-108%) translateY(-55%)
    }
}

.new-sticker li .hover-tip .tip-block {
    position: relative;
    padding: 12px 16px;
    background-color: #0b1531;
    font-size: 14px;
    white-space: nowrap;
    color: #e1e5eb;
    border-radius: 8px
}

.new-sticker li .hover-tip .tip-block:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate3d(45%, -50%, 0) rotate(226deg);
    transform: translate3d(45%, -50%, 0) rotate(226deg);
    height: 0;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-radius: 3px;
    border-color: transparent transparent #0b1531 #0b1531
}

.new-sticker li .hover-tip .tip-block a {
    background-image: none;
    height: auto;
    width: auto;
    font-size: 14px;
    line-height: 1;
    color: #4d88ff
}

.new-sticker li .hover-tip .tip-block ul li {
    margin-bottom: 12px
}

.new-sticker li .hover-tip .tip-block ul li:last-child {
    margin-bottom: 0
}

.new-sticker li:hover .hover-tip {
    display: block
}

.new-sticker .side-pop {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -46px
}

.new-sticker .side-pop > a {
    display: block;
    width: 90px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #008de8;
    background-color: #fff
}

.new-sticker .side-pop > a.open-account {
    border-bottom: none;
    border-radius: 3px 3px 0 0
}

.new-sticker .side-pop > a.after-sale {
    border-radius: 0 0 3px 3px
}

@media (max-width: 1279px) {
    .new-sticker li > a {
        width: 56px;
        height: 56px;
        background-size: 80px auto
    }

    .new-sticker li.consultation {
        padding-left: 30px
    }

    .new-sticker li.consultation a {
        background-position: -13px -11px
    }

    .new-sticker li.consultation a:hover {
        background-position: -13px -93px
    }

    .new-sticker li.roll-top {
        margin-top: 5px;
        padding-left: 30px
    }

    .new-sticker li.roll-top a {
        background-position: -13px -172px
    }

    .new-sticker li.roll-top a:hover {
        background-position: -13px -254px
    }
}

.overview .dsp-source {
    position: relative;
    height: 700px;
    color: #fff;
    background: url(../images/index/overview_bg.jpg) no-repeat left center transparent;
    background-image: -webkit-image-set(url(../images/index/overview_bg.jpg) 1x, url(../images/index/overview_bg@2x.jpg) 2x)
}

.overview .dsp-source .container {
    height: 100%;
    text-align: right;
    position: relative
}

.overview .dsp-source .container:before {
    width: 0;
    height: 100%;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    content: ' ';
    vertical-align: middle
}

.overview .dsp-source .dsp-source-light {
    position: absolute;
    right: 50%;
    bottom: 0;
    width: 856px;
    height: 414px;
    margin-right: -228px;
    background: url(../images/index/overview_light.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/overview_light.png) 1x, url(../images/index/overview_light@2x.png) 2x)
}

.overview .dsp-source .dsp-source-text {
    text-align: left;
    width: 352px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle
}

.overview .dsp-source .dsp-source-text h3.title {
    font-family: dsp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    text-align: left;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 20px;
    *padding-top: 150px
}

.overview .dsp-source .dsp-source-text p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 20px
}

.overview .dsp-source .dsp-source-text .btn-more-source {
    font-size: 16px;
    color: #fff
}

.overview .dsp-source .dsp-source-text .btn-more-source:hover {
    opacity: .8
}

.overview .dsp-source .dsp-source-text .content {
    margin-bottom: 35px
}

.overview .dsp-source .dsp-source-text .btn {
    line-height: 38px
}

.overview .dsp-source .dsp-source-list {
    position: absolute;
    left: 0;
    top: 174px
}

.overview .dsp-source .dsp-source-list li {
    float: left;
    margin-right: 18px
}

.overview .dsp-source .dsp-source-list li.ads, .overview .dsp-source .dsp-source-list li.app {
    margin-top: 9px
}

.overview .dsp-source .dsp-source-list li.video, .overview .dsp-source .dsp-source-list li.wechat {
    margin-top: 30px
}

.overview .dsp-source .dsp-source-list li.news, .overview .dsp-source .dsp-source-list li.qq {
    margin-top: 68px
}

.overview .dsp-source .dsp-source-list li.kuaibao, .overview .dsp-source .dsp-source-list li.qzone {
    margin-top: 128px
}

.overview .dsp-source .dsp-source-list li .icon {
    display: block;
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat;
    width: 67px;
    height: 67px
}

.overview .dsp-source .dsp-source-list li .icon.icon-wechat {
    background-position: 0 -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-ads {
    background-position: -658px -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-app {
    background-position: -146px -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-browser {
    background-position: -219px -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-qq {
    background-position: -292px -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-qzone {
    background-position: -365px -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-video {
    background-position: -439px -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-news {
    background-position: -513px -152px
}

.overview .dsp-source .dsp-source-list li .icon.icon-kuaibao {
    background-position: -585px -152px
}

.overview .dsp-source .dsp-source-list li span {
    display: block;
    font-size: 12px;
    color: #dadada;
    text-align: center;
    margin-top: 6px
}

.overview .orientation-ability {
    padding: 110px 0 10px;
    background: #f0f3f6;
    background: linear-gradient(to bottom, #f0f3f6 0, #e9edf0 82%, #e8ebf0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f3f6', endColorstr='#e8ebf0', GradientType=0)
}

.overview .orientation-ability .orientation-ability-text {
    width: 352px;
    float: left;
    padding-top: 50px
}

.overview .orientation-ability .orientation-ability-text h3.title {
    font-family: dsp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 20px
}

.overview .orientation-ability .orientation-ability-text .content {
    margin-bottom: 35px
}

.overview .orientation-ability .orientation-ability-text p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 20px
}

.overview .orientation-ability .orientation-ability-text .btn-more-orientation {
    font-size: 16px
}

.overview .orientation-ability .orientation-ability-text .btn {
    line-height: 38px
}

.overview .orientation-ability .orientation-ability-example {
    position: relative;
    float: right;
    width: 544px;
    height: 345px
}

.overview .orientation-ability .orientation-ability-tab {
    float: right;
    width: 410px;
    margin: 60px 80px 0 0;
    overflow: hidden;
    *position: relative;
    *height: 130px
}

.overview .orientation-ability .orientation-ability-tab .orientation-tabs {
    position: relative;
    overflow: hidden;
    margin-right: -20px
}

.overview .orientation-ability .orientation-ability-tab .orientation-tabs > a {
    display: block;
    float: left;
    font-size: 18px;
    color: #000;
    padding: 0 7px 12px;
    position: relative;
    margin-right: 20px
}

.overview .orientation-ability .orientation-ability-tab .orientation-tabs > a:after {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 4px;
    width: 100%;
    content: ' ';
    background-color: #008de8;
    background-color: transparent \9;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.overview .orientation-ability .orientation-ability-tab .orientation-tabs > a.active, .overview .orientation-ability .orientation-ability-tab .orientation-tabs > a:hover {
    color: #008de8
}

.overview .orientation-ability .orientation-ability-tab .orientation-tabs > a.active:after, .overview .orientation-ability .orientation-ability-tab .orientation-tabs > a:hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #008de8
}

.overview .orientation-ability .orientation-ability-tab .orientation-tabs:before {
    content: "";
    width: 100%;
    height: 2px;
    background: #dfe0e0;
    position: absolute;
    left: 0;
    bottom: 0
}

.overview .orientation-ability .orientation-ability-tab .orientation-slide-container {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-top: 15px;
    *zoom: 1
}

.overview .orientation-ability .orientation-ability-tab .orientation-slide-container:after, .overview .orientation-ability .orientation-ability-tab .orientation-slide-container:before {
    display: table;
    content: ""
}

.overview .orientation-ability .orientation-ability-tab .orientation-slide-container:after {
    clear: both
}

.overview .orientation-ability .orientation-ability-tab .orientation-slide-container:after, .overview .orientation-ability .orientation-ability-tab .orientation-slide-container:before {
    display: table;
    content: ""
}

.overview .orientation-ability .orientation-ability-tab .orientation-slide-container:after {
    clear: both
}

.overview .management {
    padding: 100px 0;
    background: #f7f9fb
}

.overview .management .title {
    line-height: 1.5;
    margin-bottom: 60px;
    font-family: dsp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif
}

.overview .management .management-list {
    text-align: center;
    color: #000
}

.overview .management .management-list li .icon {
    display: inline-block;
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat
}

.overview .management .management-list li .icon.icon-free {
    background-position: 0 -231px;
    width: 171px;
    height: 143px
}

.overview .management .management-list li .icon.icon-cost {
    background-position: -177px -231px;
    width: 122px;
    height: 143px
}

.overview .management .management-list li .icon.icon-count {
    background-position: -305px -231px;
    width: 144px;
    height: 143px
}

.overview .management .management-list li h4 {
    font-size: 26px;
    margin: 30px 0 10px
}

.overview .management .management-list li p {
    font-size: 16px;
    line-height: 2;
    display: inline-block;
    max-width: 300px
}

.overview .effect {
    background-color: #fff;
    padding: 110px 0 80px
}

.overview .effect h3.title {
    margin-bottom: 90px;
    font-family: dsp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif
}

.overview .effect .effect-container {
    width: 100%;
    height: 520px;
    overflow: hidden;
    *position: relative
}

.overview .effect .effect-container .swiper-slide {
    position: relative
}

.overview .effect .effect-container .effect-slide1, .overview .effect .effect-container .effect-slide3 {
    background-image: url(../images/index/bg-effect.png);
    background-image: -webkit-image-set(url(../images/index/bg-effect.png) 1x, url(../images/index/bg-effect@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center bottom
}

.overview .effect .effect-container .effect-text {
    width: 480px;
    position: absolute;
    left: 50%;
    margin-left: 40px;
    margin-top: 72px
}

.overview .effect .effect-container .effect-text .effect-brand {
    color: #999;
    font-size: 18px
}

.overview .effect .effect-container .effect-text .effect-title {
    font-family: dsp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    font-size: 32px;
    line-height: 1.56;
    color: #000;
    margin: 28px 0
}

.overview .effect .effect-container .effect-text .effect-title > em {
    color: #008de8;
    font-style: normal
}

.overview .effect .effect-container .effect-text .effect-description {
    font-size: 16px;
    color: #333;
    line-height: 2;
    margin-bottom: 30px
}

.overview .effect .effect-container .effect-text .effect-description p:before {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    content: '|';
    margin-right: 8px
}

.overview .effect .effect-container .effect-text .btn-primary {
    line-height: 36px
}

.overview .effect .effect-container .effect-pic {
    position: absolute;
    right: 50%;
    margin-right: 40px
}

.overview .effect .effect-container .effect-pic.pic1 {
    width: 327px;
    height: 522px;
    background-image: url(../images/index/effect1.png);
    background-image: -webkit-image-set(url(../images/index/effect1.png) 1x, url(../images/index/effect1@2x.png) 2x);
    background-repeat: no-repeat
}

.overview .effect .effect-container .effect-pic.pic2 {
    width: 546px;
    height: 515px;
    background-image: url(../images/index/effect2.png);
    background-image: -webkit-image-set(url(../images/index/effect2.png) 1x, url(../images/index/effect2@2x.png) 2x);
    background-repeat: no-repeat
}

.overview .effect .effect-container .effect-pic.pic3 {
    width: 327px;
    height: 522px;
    background-image: url(../images/index/effect3.png);
    background-image: -webkit-image-set(url(../images/index/effect3.png) 1x, url(../images/index/effect3@2x.png) 2x);
    background-repeat: no-repeat
}

.overview .effect .pagination {
    text-align: center;
    margin: 30px 0 10px
}

.overview .effect .pagination > span {
    cursor: pointer;
    display: inline-block;
    background: #8e9ea6;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 0 6px;
    border: 1px solid #fff;
    transition: all .4s
}

.overview .effect .pagination > span.swiper-active-switch {
    border-color: #008de8;
    background: #fff
}

.overview .effect .btn-erea {
    text-align: center
}

.figure-car1 {
    position: absolute;
    top: 138px;
    left: 105px;
    width: 76px;
    height: 197px;
    background: url(../images/index/figure/figure-car1.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car1.png) 1x, url(../images/index/figure/figure-car1@2x.png) 2x);
    z-index: 2
}

.figure-car1 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-car1-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car1-active.png) 1x, url(../images/index/figure/figure-car1-active@2x.png) 2x)
}

.figure-car2 {
    position: absolute;
    top: 33px;
    left: 341px;
    width: 58px;
    height: 176px;
    background: url(../images/index/figure/figure-car2.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car2.png) 1x, url(../images/index/figure/figure-car2@2x.png) 2x);
    z-index: 2
}

.figure-car2 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-car2-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car2-active.png) 1x, url(../images/index/figure/figure-car2-active@2x.png) 2x)
}

.figure-car3 {
    position: absolute;
    top: 130px;
    left: 412px;
    width: 62px;
    height: 189px;
    background: url(../images/index/figure/figure-car3.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car3.png) 1x, url(../images/index/figure/figure-car3@2x.png) 2x);
    z-index: 2
}

.figure-car3 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-car3-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car3-active.png) 1x, url(../images/index/figure/figure-car3-active@2x.png) 2x)
}

.figure-car3-active {
    background: url(../images/index/figure/figure-car3-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car3-active.png) 1x, url(../images/index/figure/figure-car3-active@2x.png) 2x)
}

.figure-car1-shape {
    position: absolute;
    top: 324px;
    left: 108px;
    width: 61px;
    height: 17px;
    background: url(../images/index/figure/figure-car1-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car1-shape.png) 1x, url(../images/index/figure/figure-car1-shape@2x.png) 2x);
    z-index: 1
}

.figure-car2-shape {
    position: absolute;
    top: 200px;
    left: 344px;
    width: 54px;
    height: 15px;
    background: url(../images/index/figure/figure-car2-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car2-shape.png) 1x, url(../images/index/figure/figure-car2-shape@2x.png) 2x);
    z-index: 1
}

.figure-car3-shape {
    position: absolute;
    top: 309px;
    left: 414px;
    width: 57px;
    height: 16px;
    background: url(../images/index/figure/figure-car3-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car3-shape.png) 1x, url(../images/index/figure/figure-car3-shape@2x.png) 2x);
    z-index: 1
}

.figure-car1-line {
    position: absolute;
    top: 210px;
    left: 141px;
    width: 219px;
    height: 119px;
    z-index: 0
}

.figure-car1-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-car1-line.png) no-repeat 0 0 transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car1-line.png) 1x, url(../images/index/figure/figure-car1-line@2x.png) 2x)
}

.figure-car2-line {
    position: absolute;
    top: 208px;
    left: 375px;
    width: 63px;
    height: 140px;
    z-index: 0
}

.figure-car2-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-car2-line.png) no-repeat 0 0 transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car2-line.png) 1x, url(../images/index/figure/figure-car2-line@2x.png) 2x)
}

.figure-car3-line {
    position: absolute;
    top: 316px;
    left: 160px;
    width: 265px;
    height: 18px;
    z-index: 0
}

.figure-car3-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-car3-line.png) no-repeat right top transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-car3-line.png) 1x, url(../images/index/figure/figure-car3-line@2x.png) 2x)
}

.figure-shop1 {
    position: absolute;
    top: 25px;
    left: 173px;
    width: 67px;
    height: 165px;
    background: url(../images/index/figure/figure-shop1.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop1.png) 1x, url(../images/index/figure/figure-shop1@2x.png) 2x);
    z-index: 2
}

.figure-shop1 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-shop1-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop1-active.png) 1x, url(../images/index/figure/figure-shop1-active@2x.png) 2x)
}

.figure-shop3 {
    position: absolute;
    top: 147px;
    left: 245px;
    width: 78px;
    height: 197px;
    background: url(../images/index/figure/figure-shop2.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop2.png) 1x, url(../images/index/figure/figure-shop2@2x.png) 2x);
    z-index: 2
}

.figure-shop3 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-shop2-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop2-active.png) 1x, url(../images/index/figure/figure-shop2-active@2x.png) 2x)
}

.figure-shop2 {
    position: absolute;
    top: 64px;
    left: 488px;
    width: 53px;
    height: 173px;
    background: url(../images/index/figure/figure-shop3.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop3.png) 1x, url(../images/index/figure/figure-shop3@2x.png) 2x);
    z-index: 2
}

.figure-shop2 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-shop3-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop3-active.png) 1x, url(../images/index/figure/figure-shop3-active@2x.png) 2x)
}

.figure-shop1-shape {
    position: absolute;
    top: 183px;
    left: 194px;
    width: 47px;
    height: 13px;
    background: url(../images/index/figure/figure-shop1-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop1-shape.png) 1x, url(../images/index/figure/figure-shop1-shape@2x.png) 2x);
    z-index: 1
}

.figure-shop2-shape {
    position: absolute;
    top: 231px;
    left: 489px;
    width: 49px;
    height: 14px;
    background: url(../images/index/figure/figure-shop2-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop2-shape.png) 1x, url(../images/index/figure/figure-shop2-shape@2x.png) 2x);
    z-index: 1
}

.figure-shop3-shape {
    position: absolute;
    top: 332px;
    left: 258px;
    width: 73px;
    height: 20px;
    background: url(../images/index/figure/figure-shop3-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop3-shape.png) 1x, url(../images/index/figure/figure-shop3-shape@2x.png) 2x);
    z-index: 1
}

.figure-shop1-line {
    position: absolute;
    top: 189px;
    left: 218px;
    width: 292px;
    height: 53px;
    z-index: 0
}

.figure-shop1-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-shop1-line.png) no-repeat 0 0 transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop1-line.png) 1x, url(../images/index/figure/figure-shop1-line@2x.png) 2x)
}

.figure-shop2-line {
    position: absolute;
    top: 243px;
    left: 306px;
    width: 210px;
    height: 98px;
    z-index: 0
}

.figure-shop2-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-shop2-line.png) no-repeat right top transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop2-line.png) 1x, url(../images/index/figure/figure-shop2-line@2x.png) 2x)
}

.figure-shop3-line {
    position: absolute;
    top: 190px;
    left: 218px;
    width: 63px;
    height: 146px;
    z-index: 0
}

.figure-shop3-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-shop3-line.png) no-repeat right bottom transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-shop3-line.png) 1x, url(../images/index/figure/figure-shop3-line@2x.png) 2x)
}

.figure-app1 {
    position: absolute;
    top: 141px;
    left: 0;
    width: 48px;
    height: 162px;
    background: url(../images/index/figure/figure-app1.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app1.png) 1x, url(../images/index/figure/figure-app1@2x.png) 2x);
    z-index: 2
}

.figure-app1 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-app1-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app1-active.png) 1x, url(../images/index/figure/figure-app1-active@2x.png) 2x)
}

.figure-app2 {
    position: absolute;
    top: 14px;
    left: 69px;
    width: 41px;
    height: 137px;
    background: url(../images/index/figure/figure-app2.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app2.png) 1x, url(../images/index/figure/figure-app2@2x.png) 2x);
    z-index: 2
}

.figure-app2 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-app2-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app2-active.png) 1x, url(../images/index/figure/figure-app2-active@2x.png) 2x)
}

.figure-app3 {
    position: absolute;
    top: 0;
    left: 273px;
    width: 37px;
    height: 120px;
    background: url(../images/index/figure/figure-app3.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app3.png) 1x, url(../images/index/figure/figure-app3@2x.png) 2x);
    z-index: 2
}

.figure-app3 i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-app3-active.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app3-active.png) 1x, url(../images/index/figure/figure-app3-active@2x.png) 2x)
}

.figure-app1-shape {
    position: absolute;
    top: 295px;
    left: 0;
    width: 53px;
    height: 15px;
    background: url(../images/index/figure/figure-app1-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app1-shape.png) 1x, url(../images/index/figure/figure-app1-shape@2x.png) 2x);
    z-index: 1
}

.figure-app2-shape {
    position: absolute;
    top: 144px;
    left: 68px;
    width: 42px;
    height: 12px;
    background: url(../images/index/figure/figure-app2-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app2-shape.png) 1x, url(../images/index/figure/figure-app2-shape@2x.png) 2x);
    z-index: 1
}

.figure-app3-shape {
    position: absolute;
    top: 114px;
    left: 274px;
    width: 37px;
    height: 11px;
    background: url(../images/index/figure/figure-app3-shape.png) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app3-shape.png) 1x, url(../images/index/figure/figure-app3-shape@2x.png) 2x);
    z-index: 1
}

.figure-app1-line {
    position: absolute;
    top: 150px;
    left: 20px;
    width: 71px;
    height: 150px;
    z-index: 0
}

.figure-app1-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-app1-line.png) no-repeat 0 0 transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app1-line.png) 1x, url(../images/index/figure/figure-app1-line@2x.png) 2x)
}

.figure-app2-line {
    position: absolute;
    top: 120px;
    left: 88px;
    width: 205px;
    height: 33px;
    z-index: 0
}

.figure-app2-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-app2-line.png) no-repeat 0 0 transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app2-line.png) 1x, url(../images/index/figure/figure-app2-line@2x.png) 2x)
}

.figure-app3-line {
    position: absolute;
    top: 123px;
    left: 30px;
    width: 265px;
    height: 180px;
    z-index: 0
}

.figure-app3-line i {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../images/index/figure/figure-app3-line.png) no-repeat right top transparent;
    background-image: -webkit-image-set(url(../images/index/figure/figure-app3-line.png) 1x, url(../images/index/figure/figure-app3-line@2x.png) 2x)
}

.no-cssanimations .orientation-ability-example .figure i, .no-cssanimations .orientation-ability-example .line i, .no-cssanimations .orientation-ability-example .shape {
    display: none;
    opacity: 0
}

.no-cssanimations .orientation-ability-example.status0 .figure-car1 i, .no-cssanimations .orientation-ability-example.status0 .figure-car1-line i, .no-cssanimations .orientation-ability-example.status0 .figure-car1-shape, .no-cssanimations .orientation-ability-example.status0 .figure-car2 i, .no-cssanimations .orientation-ability-example.status0 .figure-car2-line i, .no-cssanimations .orientation-ability-example.status0 .figure-car2-shape, .no-cssanimations .orientation-ability-example.status0 .figure-car3 i, .no-cssanimations .orientation-ability-example.status0 .figure-car3-line i, .no-cssanimations .orientation-ability-example.status0 .figure-car3-shape {
    opacity: 1;
    display: block
}

.no-cssanimations .orientation-ability-example.status1 .figure-shop1 i, .no-cssanimations .orientation-ability-example.status1 .figure-shop1-line i, .no-cssanimations .orientation-ability-example.status1 .figure-shop1-shape, .no-cssanimations .orientation-ability-example.status1 .figure-shop2 i, .no-cssanimations .orientation-ability-example.status1 .figure-shop2-line i, .no-cssanimations .orientation-ability-example.status1 .figure-shop2-shape, .no-cssanimations .orientation-ability-example.status1 .figure-shop3 i, .no-cssanimations .orientation-ability-example.status1 .figure-shop3-line i, .no-cssanimations .orientation-ability-example.status1 .figure-shop3-shape {
    opacity: 1;
    display: block
}

.no-cssanimations .orientation-ability-example.status2 .figure-app1 i, .no-cssanimations .orientation-ability-example.status2 .figure-app1-line i, .no-cssanimations .orientation-ability-example.status2 .figure-app1-shape, .no-cssanimations .orientation-ability-example.status2 .figure-app2 i, .no-cssanimations .orientation-ability-example.status2 .figure-app2-line i, .no-cssanimations .orientation-ability-example.status2 .figure-app2-shape, .no-cssanimations .orientation-ability-example.status2 .figure-app3 i, .no-cssanimations .orientation-ability-example.status2 .figure-app3-line i, .no-cssanimations .orientation-ability-example.status2 .figure-app3-shape {
    opacity: 1;
    display: block
}

.cssanimations .orientation-ability-example .figure i, .cssanimations .orientation-ability-example .line i, .cssanimations .orientation-ability-example .shape {
    opacity: 0
}

.cssanimations .orientation-ability-example .line i {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0%
}

.cssanimations .orientation-ability-example.status0 .figure-car1 i {
    -webkit-animation: fadeIn .4s ease both;
    animation: fadeIn .4s ease both
}

.cssanimations .orientation-ability-example.status0 .figure-car1-shape {
    -webkit-animation: fadeIn .6s ease both .2s;
    animation: fadeIn .6s ease both .2s
}

.cssanimations .orientation-ability-example.status0 .figure-car1-line i {
    -webkit-animation: lineRight .4s ease both .4s;
    animation: lineRight .4s ease both .4s
}

.cssanimations .orientation-ability-example.status0 .figure-car2 i {
    -webkit-animation: fadeIn .6s ease both .4s;
    animation: fadeIn .6s ease both .4s
}

.cssanimations .orientation-ability-example.status0 .figure-car2-shape {
    -webkit-animation: fadeIn .4s ease both .6s;
    animation: fadeIn .4s ease both .6s
}

.cssanimations .orientation-ability-example.status0 .figure-car2-line i {
    -webkit-animation: lineRight .4s ease both .8s;
    animation: lineRight .4s ease both .8s
}

.cssanimations .orientation-ability-example.status0 .figure-car3 i {
    -webkit-animation: fadeIn .6s ease both .8s;
    animation: fadeIn .6s ease both .8s
}

.cssanimations .orientation-ability-example.status0 .figure-car3-shape {
    -webkit-animation: fadeIn .4s ease both 1s;
    animation: fadeIn .4s ease both 1s
}

.cssanimations .orientation-ability-example.status0 .figure-car3-line i {
    -webkit-animation: lineLeft .4s ease both 1.2s;
    animation: lineLeft .4s ease both 1.2s
}

.cssanimations .orientation-ability-example.status1 .figure-shop1 i {
    -webkit-animation: fadeIn .6s ease both;
    animation: fadeIn .6s ease both
}

.cssanimations .orientation-ability-example.status1 .figure-shop2 i {
    -webkit-animation: fadeIn .6s ease both .4s;
    animation: fadeIn .6s ease both .4s
}

.cssanimations .orientation-ability-example.status1 .figure-shop3 i {
    -webkit-animation: fadeIn .6s ease both .8s;
    animation: fadeIn .6s ease both .8s
}

.cssanimations .orientation-ability-example.status1 .figure-shop1-shape {
    -webkit-animation: fadeIn .4s ease both .2s;
    animation: fadeIn .4s ease both .2s
}

.cssanimations .orientation-ability-example.status1 .figure-shop1-line i {
    -webkit-animation: lineRight .4s ease both .4s;
    animation: lineRight .4s ease both .4s
}

.cssanimations .orientation-ability-example.status1 .figure-shop2-shape {
    -webkit-animation: fadeIn .4s ease both .6s;
    animation: fadeIn .4s ease both .6s
}

.cssanimations .orientation-ability-example.status1 .figure-shop2-line i {
    -webkit-animation: lineLeft .4s ease both .8s;
    animation: lineLeft .4s ease both .8s
}

.cssanimations .orientation-ability-example.status1 .figure-shop3-shape {
    -webkit-animation: fadeIn .4s ease both 1s;
    animation: fadeIn .4s ease both 1s
}

.cssanimations .orientation-ability-example.status1 .figure-shop3-line i {
    -webkit-animation: lineLeft .4s ease both 1.2s;
    animation: lineLeft .4s ease both 1.2s
}

.cssanimations .orientation-ability-example.status2 .figure-app1 i {
    -webkit-animation: fadeIn .6s ease both;
    animation: fadeIn .6s ease both
}

.cssanimations .orientation-ability-example.status2 .figure-app2 i {
    -webkit-animation: fadeIn .6s ease both .4s;
    animation: fadeIn .6s ease both .4s
}

.cssanimations .orientation-ability-example.status2 .figure-app3 i {
    -webkit-animation: fadeIn .6s ease both .8s;
    animation: fadeIn .6s ease both .8s
}

.cssanimations .orientation-ability-example.status2 .figure-app1-shape {
    -webkit-animation: fadeIn .4s ease both .2s;
    animation: fadeIn .4s ease both .2s
}

.cssanimations .orientation-ability-example.status2 .figure-app1-line i {
    -webkit-animation: lineRight .4s ease both .4s;
    animation: lineRight .4s ease both .4s
}

.cssanimations .orientation-ability-example.status2 .figure-app2-shape {
    -webkit-animation: fadeIn .4s ease both .6s;
    animation: fadeIn .4s ease both .6s
}

.cssanimations .orientation-ability-example.status2 .figure-app2-line i {
    -webkit-animation: lineRight .4s ease both .8s;
    animation: lineRight .4s ease both .8s
}

.cssanimations .orientation-ability-example.status2 .figure-app3-shape {
    -webkit-animation: fadeIn .4s ease both 1s;
    animation: fadeIn .4s ease both 1s
}

.cssanimations .orientation-ability-example.status2 .figure-app3-line i {
    -webkit-animation: lineLeft .4s ease both 1.2s;
    animation: lineLeft .4s ease both 1.2s
}

.cssanimations .hero-index .hero-content .btn, .cssanimations .hero-index .hero-index-bg, .cssanimations .hero-index .hero-text, .cssanimations .hero-index .hero-title, .cssanimations .hero-index .phone {
    opacity: 0
}

.cssanimations .hero-index.sec-active .hero-index-bg {
    -webkit-animation: fadeIn .6s linear both;
    animation: fadeIn .6s linear both
}

.cssanimations .hero-index.sec-active .hero-title {
    -webkit-animation: fadeInTop .4s ease-in-out both .5s;
    animation: fadeInTop .4s ease-in-out both .5s
}

.cssanimations .hero-index.sec-active .hero-text {
    -webkit-animation: fadeInTop .4s ease-in-out both .5s;
    animation: fadeInTop .4s ease-in-out both .5s
}

.cssanimations .hero-index.sec-active .hero-content .btn {
    -webkit-animation: fadeIn .4s ease-in-out both .8s;
    animation: fadeIn .4s ease-in-out both .8s
}

.cssanimations .hero-index.sec-active .phone {
    -webkit-animation: fadeIn .4s ease-in-out both .8s;
    animation: fadeIn .4s ease-in-out both .8s
}

.cssanimations .dsp-source .dsp-source-light, .cssanimations .dsp-source .dsp-source-list ul li, .cssanimations .dsp-source .dsp-source-text .btn, .cssanimations .dsp-source .dsp-source-text .content, .cssanimations .dsp-source .dsp-source-text .title {
    opacity: 0
}

.cssanimations .dsp-source.sec-active .dsp-source-text .title {
    -webkit-animation: fadeInTop .4s ease-in-out both;
    animation: fadeInTop .4s ease-in-out both
}

.cssanimations .dsp-source.sec-active .dsp-source-text .content {
    -webkit-animation: fadeInTop .4s ease-in-out both;
    animation: fadeInTop .4s ease-in-out both
}

.cssanimations .dsp-source.sec-active .dsp-source-text .btn {
    -webkit-animation: fadeIn .4s ease-in-out both .3s;
    animation: fadeIn .4s ease-in-out both .3s
}

.cssanimations .dsp-source.sec-active .dsp-source-light {
    -webkit-animation: fadeIn .4s ease-in-out both .7s;
    animation: fadeIn .4s ease-in-out both .7s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li {
    -webkit-animation: zoomIn .4s ease-in-out both;
    animation: zoomIn .4s ease-in-out both
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(1) {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(2) {
    -webkit-animation-delay: .9s;
    animation-delay: .9s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(3) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(4) {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(5) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(6) {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(7) {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(8) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.cssanimations .dsp-source.sec-active .dsp-source-list ul li:nth-child(9) {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s
}

.cssanimations .orientation-ability .orientation-ability-example, .cssanimations .orientation-ability .orientation-ability-tab, .cssanimations .orientation-ability .orientation-ability-text .btn, .cssanimations .orientation-ability .orientation-ability-text .content, .cssanimations .orientation-ability .orientation-ability-text .title {
    opacity: 0
}

.cssanimations .orientation-ability.sec-active .orientation-ability-text .title {
    -webkit-animation: fadeInTop .4s ease-in-out both;
    animation: fadeInTop .4s ease-in-out both
}

.cssanimations .orientation-ability.sec-active .orientation-ability-text .content {
    -webkit-animation: fadeInTop .4s ease-in-out both;
    animation: fadeInTop .4s ease-in-out both
}

.cssanimations .orientation-ability.sec-active .orientation-ability-text .btn {
    -webkit-animation: fadeInTop .4s ease-in-out both .3s;
    animation: fadeInTop .4s ease-in-out both .3s
}

.cssanimations .orientation-ability.sec-active .orientation-ability-example {
    -webkit-animation: fadeIn .4s ease-in-out both .6s;
    animation: fadeIn .4s ease-in-out both .6s
}

.cssanimations .orientation-ability.sec-active .orientation-ability-tab {
    -webkit-animation: fadeIn .4s ease-in-out both .9s;
    animation: fadeIn .4s ease-in-out both .9s
}

.cssanimations .management .management-item .icon, .cssanimations .management .management-item h4, .cssanimations .management .management-item p, .cssanimations .management .title-big {
    opacity: 0
}

.cssanimations .management.sec-active .title-big {
    -webkit-animation: fadeInTop .4s ease-in-out both;
    animation: fadeInTop .4s ease-in-out both
}

.cssanimations .management.sec-active .management-item:nth-child(1) .icon {
    -webkit-animation: zoomIn .4s ease-in-out both .2s;
    animation: zoomIn .4s ease-in-out both .2s
}

.cssanimations .management.sec-active .management-item:nth-child(1) h4 {
    -webkit-animation: fadeInTop .4s ease-in-out both .3s;
    animation: fadeInTop .4s ease-in-out both .3s
}

.cssanimations .management.sec-active .management-item:nth-child(1) p {
    -webkit-animation: fadeInTop .4s ease-in-out both .4s;
    animation: fadeInTop .4s ease-in-out both .4s
}

.cssanimations .management.sec-active .management-item:nth-child(2) .icon {
    -webkit-animation: zoomIn .4s ease-in-out both .4s;
    animation: zoomIn .4s ease-in-out both .4s
}

.cssanimations .management.sec-active .management-item:nth-child(2) h4 {
    -webkit-animation: fadeInTop .4s ease-in-out both .5s;
    animation: fadeInTop .4s ease-in-out both .5s
}

.cssanimations .management.sec-active .management-item:nth-child(2) p {
    -webkit-animation: fadeInTop .4s ease-in-out both .6s;
    animation: fadeInTop .4s ease-in-out both .6s
}

.cssanimations .management.sec-active .management-item:nth-child(3) .icon {
    -webkit-animation: zoomIn .4s ease-in-out both .6s;
    animation: zoomIn .4s ease-in-out both .6s
}

.cssanimations .management.sec-active .management-item:nth-child(3) h4 {
    -webkit-animation: fadeInTop .4s ease-in-out both .7s;
    animation: fadeInTop .4s ease-in-out both .7s
}

.cssanimations .management.sec-active .management-item:nth-child(3) p {
    -webkit-animation: fadeInTop .4s ease-in-out both .8s;
    animation: fadeInTop .4s ease-in-out both .8s
}

.cssanimations .effect .title-big {
    opacity: 0
}

.cssanimations .effect .swiper-slide-active .effect-brand, .cssanimations .effect .swiper-slide-active .effect-description, .cssanimations .effect .swiper-slide-active .effect-pic, .cssanimations .effect .swiper-slide-active .effect-text .btn, .cssanimations .effect .swiper-slide-active .effect-title {
    opacity: 0
}

.cssanimations .effect.sec-active .title-big {
    -webkit-animation: fadeIn .4s ease-in-out both;
    animation: fadeIn .4s ease-in-out both
}

.cssanimations .effect.sec-active .swiper-slide-active .effect-pic {
    -webkit-animation: fadeInRight .4s ease-in-out both .3s;
    animation: fadeInRight .4s ease-in-out both .3s
}

.cssanimations .effect.sec-active .swiper-slide-active .effect-brand {
    -webkit-animation: fadeInTop .4s ease-in-out both .5s;
    animation: fadeInTop .4s ease-in-out both .5s
}

.cssanimations .effect.sec-active .swiper-slide-active .effect-title {
    -webkit-animation: fadeInTop .4s ease-in-out both .5s;
    animation: fadeInTop .4s ease-in-out both .5s
}

.cssanimations .effect.sec-active .swiper-slide-active .effect-description {
    -webkit-animation: fadeInTop .4s ease-in-out both .5s;
    animation: fadeInTop .4s ease-in-out both .5s
}

.cssanimations .effect.sec-active .swiper-slide-active .effect-text .btn {
    -webkit-animation: fadeIn .4s ease-in-out both .8s;
    animation: fadeIn .4s ease-in-out both .8s
}

.orientation {
    background-color: #f5f9ff
}

.orientation .title {
    line-height: 1.75;
    margin-bottom: 60px
}

.orientation .source-description .title {
    margin-bottom: 15px
}

.orientation .btn-panle {
    margin-top: 50px;
    text-align: center
}

.orientation .btn-panle .btn {
    line-height: 34px
}

.orientation .btn-panle .btn-primary {
    width: 210px;
    padding: 12px 0;
    background-color: #296bef;
    border-radius: 45px
}

.orientation .btn-panle .btn-primary:hover {
    background-color: #165be0
}

.orientation .orientation-base {
    padding-bottom: 70px;
    padding-top: 110px
}

.orientation .orientation-base h4 {
    font-size: 26px;
    color: #000
}

.orientation .orientation-base .base-description {
    font-size: 16px;
    color: #000;
    margin: 15px 0 60px
}

.orientation .orientation-base .base-list {
    padding: 0 5.8%;
    *zoom: 1
}

.orientation .orientation-base .base-list:after, .orientation .orientation-base .base-list:before {
    display: table;
    content: ""
}

.orientation .orientation-base .base-list:after {
    clear: both
}

.orientation .orientation-base .base-list:after, .orientation .orientation-base .base-list:before {
    display: table;
    content: ""
}

.orientation .orientation-base .base-list:after {
    clear: both
}

.orientation .orientation-base .base-list .base-item {
    width: 340px;
    padding-left: 65px;
    margin-bottom: 18px;
    float: left;
    position: relative
}

.orientation .orientation-base .base-list .base-item .icon {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat;
    width: 42px
}

.orientation .orientation-base .base-list .base-item .icon.icon-location {
    background-position: 0 -107px;
    height: 33px
}

.orientation .orientation-base .base-list .base-item .icon.icon-information {
    background-position: -42px -107px;
    height: 32px
}

.orientation .orientation-base .base-list .base-item .icon.icon-status {
    background-position: -84px -107px;
    height: 33px
}

.orientation .orientation-base .base-list .base-item .icon.icon-behavior {
    background-position: -126px -107px;
    height: 32px
}

.orientation .orientation-base .base-list .base-item .icon.icon-consumption {
    background-position: -168px -107px;
    height: 33px
}

.orientation .orientation-base .base-list .base-item .icon.icon-weather {
    background-position: -210px -107px;
    height: 32px
}

.orientation .orientation-base .base-list .base-item .icon.icon-mobile {
    background-position: -252px -107px;
    height: 33px
}

.orientation .orientation-base .base-list .base-item .icon.icon-custom {
    background-position: -294px -107px;
    height: 32px
}

.orientation .orientation-base .base-list .base-item .icon.icon-tag01 {
    background-position: -340px -95px;
    height: 41px;
    width: 51px
}

.orientation .orientation-base .base-list .base-item .icon.icon-tag02 {
    background-position: -398px -95px;
    height: 46px;
    width: 46px;
    left: 2px
}

.orientation .orientation-base .base-list .base-item .icon.icon-tag03 {
    background-position: -450px -95px;
    height: 38px;
    width: 45px;
    left: 3px
}

.orientation .orientation-base .base-list .base-item .icon.icon-tag04 {
    background-position: -500px -95px;
    height: 43px;
    width: 39px;
    left: 6px
}

.orientation .orientation-base .base-list .base-item .icon.icon-tag05 {
    background-position: -545px -95px;
    height: 39px;
    width: 41px;
    left: 5px
}

.orientation .orientation-base .base-list .base-item .icon.icon-tag06 {
    background-position: -590px -95px;
    height: 40px;
    width: 40px;
    left: 5px
}

.orientation .orientation-base .base-list .base-item b {
    font-size: 20px
}

.orientation .orientation-base .base-list .base-item p {
    font-size: 14px;
    line-height: 2;
    color: #666;
    padding-top: 16px;
    height: 8em
}

.orientation .orientation-base .base-list .base-item.base-item-fr {
    float: right
}

.orientation .orientation-base .btn-eara {
    text-align: center
}

.orientation .orientation-base {
    background-color: #fff
}

.orientation .orientation-item {
    *zoom: 1;
    color: #000
}

.orientation .orientation-item .container {
    width: 1000px
}

.orientation .orientation-item:after, .orientation .orientation-item:before {
    display: table;
    content: ""
}

.orientation .orientation-item:after {
    clear: both
}

.orientation .orientation-item:after, .orientation .orientation-item:before {
    display: table;
    content: ""
}

.orientation .orientation-item:after {
    clear: both
}

.orientation .orientation-item .text-area {
    width: 450px;
    height: 468px;
    float: left;
    display: table
}

.orientation .orientation-item .text-area .box {
    display: table-cell;
    vertical-align: middle
}

.orientation .orientation-item .text-area .remark {
    display: block;
    color: #999
}

.orientation .orientation-item .text-area h3 {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 35px
}

.orientation .orientation-item .text-area p {
    font-size: 16px;
    line-height: 2
}

.orientation .orientation-item .pic-area {
    width: 400px;
    float: right;
    height: 468px;
    position: relative
}

.orientation .orientation-item .pic-area div {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.orientation .orientation-item .pic-area .dmp-pic01 {
    width: 286px;
    height: 293px;
    background-image: url(../images/technology/technology-dmp01.png);
    background-image: -webkit-image-set(url(../images/technology/technology-dmp01.png) 1x, url(../images/technology/technology-dmp01@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .dmp-pic02 {
    width: 363px;
    height: 332px;
    background-image: url(../images/technology/technology-dmp02.png);
    background-image: -webkit-image-set(url(../images/technology/technology-dmp02.png) 1x, url(../images/technology/technology-dmp02@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .dmp-pic03 {
    width: 276px;
    height: 256px;
    background-image: url(../images/technology/technology-dmp03.png);
    background-image: -webkit-image-set(url(../images/technology/technology-dmp03.png) 1x, url(../images/technology/technology-dmp03@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .dmp-pic04 {
    width: 285px;
    height: 302px;
    background-image: url(../images/technology/technology-dmp04.png);
    background-image: -webkit-image-set(url(../images/technology/technology-dmp04.png) 1x, url(../images/technology/technology-dmp04@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .ocpa-pic01 {
    width: 264px;
    height: 235px;
    background-image: url(../images/technology/technology-ocpa01.png);
    background-image: -webkit-image-set(url(../images/technology/technology-ocpa01.png) 1x, url(../images/technology/technology-ocpa01@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .ocpa-pic02 {
    width: 311px;
    height: 308px;
    background-image: url(../images/technology/technology-ocpa02.png);
    background-image: -webkit-image-set(url(../images/technology/technology-ocpa02.png) 1x, url(../images/technology/technology-ocpa02@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .ocpa-pic03 {
    width: 333px;
    height: 318px;
    background-image: url(../images/technology/technology-ocpa03.png);
    background-image: -webkit-image-set(url(../images/technology/technology-ocpa03.png) 1x, url(../images/technology/technology-ocpa03@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .tag-pic01 {
    width: 276px;
    height: 192px;
    background-image: url(../images/technology/technology-tag01.png);
    background-image: -webkit-image-set(url(../images/technology/technology-tag01.png) 1x, url(../images/technology/technology-tag01@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .tag-pic02 {
    width: 293px;
    height: 262px;
    background-image: url(../images/technology/technology-tag02.png);
    background-image: -webkit-image-set(url(../images/technology/technology-tag02.png) 1x, url(../images/technology/technology-tag02@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .tag-pic03 {
    width: 310px;
    height: 229px;
    background-image: url(../images/technology/technology-tag03.png);
    background-image: -webkit-image-set(url(../images/technology/technology-tag03.png) 1x, url(../images/technology/technology-tag03@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-item .pic-area .commodity-pic01 {
    width: 326px;
    height: 209px;
    background-image: url(../images/technology/technology-commodity01.png);
    background-image: -webkit-image-set(url(../images/technology/technology-commodity01.png) 1x, url(../images/technology/technology-commodity01@2x.png) 2x);
    background-repeat: no-repeat
}

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

.orientation .left-pic .text-area {
    float: right
}

.orientation .left-pic .pic-area {
    float: left
}

.orientation .orientation-vertical .vertical-pic {
    width: 311px;
    height: 312px;
    float: left;
    margin-right: 100px;
    background-image: url(../images/orientation/bg-orientation-vertical.png);
    background-image: -webkit-image-set(url(../images/orientation/bg-orientation-vertical.png) 1x, url(../images/orientation/bg-orientation-vertical@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .orientation-people .people-pic {
    float: right;
    width: 322px;
    height: 321px;
    margin-left: 90px;
    background-image: url(../images/orientation/bg-orientation-people.png);
    background-image: -webkit-image-set(url(../images/orientation/bg-orientation-people.png) 1x, url(../images/orientation/bg-orientation-people@2x.png) 2x);
    background-repeat: no-repeat
}

.orientation .effect {
    background-color: #fff;
    text-align: center
}

.orientation .effect .title {
    font-size: 30px;
    margin-top: 70px
}

.orientation .effect .effect-list {
    margin-bottom: 55px
}

.orientation .effect li {
    line-height: 40px;
    padding: 0 10px
}

.orientation .effect li h4 {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700
}

.orientation .effect li p {
    font-size: 24px
}

.orientation .effect li .icon-effect01 {
    width: 120px;
    height: 120px;
    background-position: -547px -251px
}

.orientation .effect li .icon-effect02 {
    width: 120px;
    height: 120px;
    background-position: -673px -251px
}

.orientation .effect li .icon-effect03 {
    width: 120px;
    height: 120px;
    background-position: -798px -251px
}

.orientation .case {
    background-color: #f5f5f5;
    margin-top: 0
}

.orientation .case .case-bd {
    width: 1200px;
    margin: 0 auto
}

.orientation .case .title {
    margin-top: 40px;
    font-size: 36px;
    text-align: center
}

.orientation .guide {
    line-height: 30px;
    padding: 60px 0;
    background-color: #fff;
    text-align: center
}

.orientation .guide .source-hd p {
    padding: 15px 0 60px 0;
    font-size: 20px
}

.orientation .guide ul {
    margin-bottom: 50px;
    margin-left: -100px
}

.orientation .guide li {
    padding-left: 100px;
    display: inline-block;
    position: relative
}

.orientation .guide li span {
    padding-top: 10px;
    display: block;
    font-size: 16px;
    color: #6d6d6d
}

.orientation .guide li .icon-guide01 {
    width: 47px;
    height: 47px;
    background-position: -635px -95px
}

.orientation .guide li .icon-guide02 {
    width: 47px;
    height: 46px;
    background-position: -687px -95px
}

.orientation .guide li .icon-guide03 {
    width: 59px;
    height: 50px;
    background-position: -739px -95px
}

.orientation .guide li .icon-guide04 {
    width: 51px;
    height: 58px;
    background-position: -803px -95px
}

.orientation .guide li .icon-guide05 {
    width: 52px;
    height: 52px;
    background-position: -1175px -95px
}

.orientation .guide li .icon-guide06 {
    width: 52px;
    height: 52px;
    background-position: -1232px -95px
}

.orientation .guide li .icon-guide07 {
    width: 46px;
    height: 52px;
    background-position: -1290px -95px
}

.orientation .guide li .icon-guide08 {
    width: 46px;
    height: 50px;
    background-position: -1342px -95px
}

.orientation .guide li:before {
    content: "";
    display: inline-block;
    width: 80px;
    height: 1px;
    border-bottom: 1px dotted #0088e5;
    position: absolute;
    left: 10px;
    top: 40%
}

.orientation .guide li:first-child:before {
    display: none
}

.orientation .guide .btn-down {
    padding-top: 30px
}

.orientation .guide .btn-down .icon-pdf {
    width: 30px;
    height: 34px;
    margin-right: 20px;
    background-position: -371px -660px
}

.orientation .guide .btn-down .btn-default:hover .icon-pdf {
    background-position: -411px -660px
}

.orientation .advantage .title {
    font-size: 36px;
    text-align: center
}

.orientation .advantage.effect {
    background-color: #f7f9fb
}

.orientation .advantage.effect .effect-list {
    margin-bottom: 90px
}

.orientation .advantage.effect .effect-list li h4 {
    line-height: 30px;
    font-size: 20px;
    font-weight: 400
}

.orientation .advantage.effect .effect-list .icon-advantage01 {
    width: 120px;
    height: 120px;
    background-position: -925px -251px
}

.orientation .advantage.effect .effect-list .icon-advantage02 {
    width: 120px;
    height: 120px;
    background-position: -1050px -251px
}

.orientation .advantage.effect .effect-list .icon-advantage03 {
    width: 120px;
    height: 120px;
    background-position: -1175px -251px
}

.orientation .advantage.orientation-base {
    padding-top: 60px;
    background-color: #fff
}

.orientation .advantage.orientation-base .base-list .base-item .icon.icon-tag01 {
    background-position: -860px -95px;
    height: 47px;
    width: 47px;
    left: 2px
}

.orientation .advantage.orientation-base .base-list .base-item .icon.icon-tag02 {
    background-position: -912px -95px;
    height: 50px;
    width: 52px
}

.orientation .advantage.orientation-base .base-list .base-item .icon.icon-tag03 {
    background-position: -970px -95px;
    height: 52px;
    width: 44px;
    left: 4px
}

.orientation .advantage.orientation-base .base-list .base-item .icon.icon-tag04 {
    background-position: -1020px -95px;
    height: 47px;
    width: 47px;
    left: 2px
}

.orientation .advantage.orientation-base .base-list .base-item .icon.icon-tag05 {
    background-position: -1072px -95px;
    height: 38px;
    width: 46px;
    left: 3px
}

.orientation .advantage.orientation-base .base-list .base-item .icon.icon-tag06 {
    background-position: -1123px -95px;
    height: 45px;
    width: 47px;
    left: 2px
}

.steward-body {
    padding-bottom: 150px
}

#newcase {
    width: 1135px
}

.main {
    padding-bottom: 80px
}

.case {
    margin-top: 50px;
    padding-bottom: 100px
}

.case .case-title {
    font-size: 45px;
    text-align: center;
    color: #333;
    margin: 60px 0 30px
}

.case .case-title.case-title-small {
    font-size: 20px;
    text-align: left;
    margin: 0 0 30px 0;
    color: #000
}

.case .case-filter {
    position: relative;
    z-index: 15;
    *zoom: 1;
    margin-bottom: 50px;
    *margin: 0 -16px 50px
}

.case .case-filter:after, .case .case-filter:before {
    display: table;
    content: ""
}

.case .case-filter:after {
    clear: both
}

.case .case-filter:after, .case .case-filter:before {
    display: table;
    content: ""
}

.case .case-filter:after {
    clear: both
}

.case .case-filter-item {
    cursor: pointer
}

.case .case-filter-item .column {
    line-height: 54px;
    height: 54px;
    position: relative;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 2px
}

.case .case-filter-item .case-filter-title {
    display: block;
    line-height: 54px;
    color: #666;
    -webkit-appearance: none;
    background-color: #fff;
    border: none;
    font-size: 16px;
    padding: 0 20px;
    outline: 0;
    position: relative
}

.case .case-filter-item .case-filter-title:after {
    position: absolute;
    top: 28px;
    right: 20px;
    content: "";
    transition: all .4s linear;
    -webkit-transform-origin: center 3px;
    -ms-transform-origin: center 3px;
    transform-origin: center 3px;
    border: 5px solid #999;
    border-color: #999 transparent transparent transparent
}

.case .case-filter-item .case-filter-title:hover {
    color: #008de8
}

.case .case-filter-item.case-filter-active .column {
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1)
}

.case .case-filter-item.case-filter-active .case-filter-title {
    color: #008de8
}

.case .case-filter-item.case-filter-active .case-filter-title:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.case .case-filter-item.case-filter-active .case-filter-dropdown {
    display: block
}

.case .case-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
    z-index: 9
}

.case .case-filter-dropdown a {
    color: #333;
    display: block;
    line-height: 45px;
    padding: 0 20px;
    transition: padding .4s linear
}

.case .case-filter-dropdown .case-filter-item-active a, .case .case-filter-dropdown li a:hover {
    padding-left: 25px;
    color: #fff;
    background-color: #23a8ee
}

.case .case-bd {
    *zoom: 1
}

.case .case-bd:after, .case .case-bd:before {
    display: table;
    content: ""
}

.case .case-bd:after {
    clear: both
}

.case .case-bd:after, .case .case-bd:before {
    display: table;
    content: ""
}

.case .case-bd:after {
    clear: both
}

.case .case-bd:after, .case .case-bd:before {
    display: table;
    content: ""
}

.case .case-bd:after {
    clear: both
}

.case .case-bd:after, .case .case-bd:before {
    display: table;
    content: ""
}

.case .case-bd:after {
    clear: both
}

.case .case-item {
    cursor: pointer;
    display: block;
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 35px;
    border: 1px solid #efefef;
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.case .case-item:nth-child(3n+1) {
    margin-left: 0
}

.case .case-item:hover {
    border-color: #007fcb
}

.case .case-item:hover .case-cover {
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08)
}

.case .case-item-hd {
    position: relative;
    height: 0;
    padding-bottom: 54%;
    overflow: hidden
}

.case .case-item-hd:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130px;
    content: " ";
    background: url(../images/new_case/case_cover.png) repeat-x 0 0 transparent;
    z-index: 1
}

.case .case-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.case .case-brand {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    z-index: 3
}

.case .case-brand-logo {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: bottom;
    line-height: 0
}

.case .case-brand-logo img {
    width: 56px;
    height: 56px
}

.case .case-brand-title {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin-left: 5px;
    font-size: 18px;
    vertical-align: bottom
}

.case .case-item-bd {
    position: relative;
    padding: 25px 20px 20px
}

.case .case-item-bd h2 {
    font-size: 20px;
    line-height: 1;
    color: #000;
    margin: 12px 0 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.case .case-item-bd p {
    font-size: 14px;
    color: #666
}

.case .case-item-ft {
    border-top: 1px solid #eee;
    *zoom: 1;
    padding: 15px 25px;
    font-size: 14px;
    position: relative
}

.case .case-item-ft:after, .case .case-item-ft:before {
    display: table;
    content: ""
}

.case .case-item-ft:after {
    clear: both
}

.case .case-item-ft:after, .case .case-item-ft:before {
    display: table;
    content: ""
}

.case .case-item-ft:after {
    clear: both
}

.case .case-item-ft:after, .case .case-item-ft:before {
    display: table;
    content: ""
}

.case .case-item-ft:after {
    clear: both
}

.case .case-item-ft:after, .case .case-item-ft:before {
    display: table;
    content: ""
}

.case .case-item-ft:after {
    clear: both
}

.case .case-meta {
    display: block;
    float: left;
    width: 31.33333333%;
    margin-left: 3%
}

.case .case-meta:first-child {
    margin-left: 0
}

.case .case-meta:first-child {
    margin-left: 0
}

.case .case-meta:nth-child(1) {
    text-align: left
}

.case .case-meta:nth-child(2) {
    text-align: center
}

.case .case-meta:nth-child(3) {
    text-align: right
}

.case .case-column-1 .case-meta {
    display: block;
    float: left;
    width: 100%;
    margin-left: 3%;
    text-align: center
}

.case .case-column-1 .case-meta:first-child {
    margin-left: 0
}

.case .case-column-1 .case-meta:first-child {
    margin-left: 0
}

.case .case-column-2 .case-meta {
    display: block;
    float: left;
    width: 48.5%;
    margin-left: 3%;
    text-align: center
}

.case .case-column-2 .case-meta:first-child {
    margin-left: 0
}

.case .case-column-2 .case-meta:first-child {
    margin-left: 0
}

.case .case-meta-data {
    height: 22px;
    color: #008de8;
    font-size: 16px
}

.case .case-meta-title {
    color: #747474
}

.case .case-ft {
    text-align: center
}

.case .case-more {
    padding: 12px 26px
}

.page-navgation.case-page-navgation {
    font-size: 16px;
    margin-bottom: 35px;
    padding-left: 30px;
    border: 1px solid #efefef;
    border-radius: 2px
}

.page-navgation.case-page-navgation > a {
    line-height: 35px
}

.selectblock {
    padding-bottom: 15px;
    border-bottom: 1px solid #e7e9ed
}

.selectmainbody {
    margin-bottom: 45px
}

.selectbody {
    position: relative;
    display: inline-block;
    margin-right: 32px;
    padding-right: 20px;
    cursor: pointer
}

.selectbody .arrow-down {
    position: absolute;
    top: 3px;
    right: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/new_case/select_down.png);
    background-size: 16px;
    background-repeat: no-repeat
}

.selectbody .arrow-up {
    position: absolute;
    top: 3px;
    right: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/new_case/select_up.png);
    background-size: 16px;
    background-repeat: no-repeat
}

.selectbody .select-bottom {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    width: 176px;
    max-height: 390px;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .05), 0 6px 15px 0 rgba(0, 0, 0, .05);
    overflow: hidden;
    z-index: 20;
    font-size: 0
}

.selectbody .select-bottom .select-list {
    overflow-y: auto;
    display: inline-block;
    width: 100%;
    max-height: 335px
}

.selectbody .select-bottom .select-list li {
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 6px 33px 6px 33px;
    font-size: 14px;
    color: #313233;
    background-color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.selectbody .select-bottom .select-list li:hover {
    background-color: #f2f4f7
}

.selectbody .select-bottom .select-list li.choosed {
    color: #296bef
}

.selectbody .select-bottom .select-list li.choosed:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 10px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/new_case/select_tick.png);
    background-size: 16px;
    background-repeat: no-repeat
}

.selectbody .selected {
    color: #296bef
}

.selectbody .selected .arrow-down {
    position: absolute;
    top: 3px;
    right: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/new_case/select_up.png);
    background-size: 16px;
    background-repeat: no-repeat
}

.selectbody .selected + .select-bottom {
    display: block
}

.choose-tagblock {
    margin-top: 15px;
    display: flex;
    align-items: flex-start
}

.choose-tagblock .choosetag-title {
    padding: 7px 0;
    margin-right: 16px;
    color: #939599;
    font-size: 14px;
    width: 50px
}

.choose-tagblock .selected-tag {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 6px 20px;
    font-size: 14px;
    color: #313233;
    background-color: #fafafb;
    border: 1px solid #e6e8ed;
    border-radius: 20px;
    transition: all .5s
}

.choose-tagblock .selected-tag i {
    position: absolute;
    top: 8px;
    right: 10px;
    display: none;
    width: 16px;
    height: 16px;
    background: url(../images/new_case/select_cross.png);
    background-size: 16px;
    background-repeat: no-repeat;
    cursor: pointer
}

.choose-tagblock .selected-tag:hover {
    padding: 6px 30px 6px 10px;
    background-color: #fff
}

.choose-tagblock .selected-tag:hover i {
    display: inline-block
}

.choose-tagblock .clear-all {
    margin-left: 20px
}

.newcase-title {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #313233
}

.newsList-title {
    margin-bottom: 36px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #313233
}

.newcase-body {
    font-size: 0;
    width: 1135px;
    display: flex;
    flex-wrap: wrap
}

.newcase-body .newcase-card {
    margin-bottom: 30px;
    margin-right: 30px;
    overflow: hidden;
    display: inline-block;
    width: 358px;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #e6e8ed;
    border-radius: 8px;
    cursor: pointer;
    transition: all .5s;
    background-color: #fff
}

.newcase-body .newcase-card:nth-child(3n) {
    margin-right: 0
}

.newcase-body .newcase-card:hover {
    box-shadow: 0 3px 5px 0 rgba(49, 50, 51, .05), 0 6px 15px rgba(49, 50, 51, .05)
}

.newcase-body .newcase-card:hover .newcase-img img {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02)
}

.newcase-body .newcase-card:active {
    background-color: #fafbfc;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .04)
}

.newcase-body .newcase-card .newcase-img {
    margin-bottom: 24px;
    width: 100%;
    overflow: hidden;
    height: 200px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px)
}

.newcase-body .newcase-card .newcase-img img {
    width: 100%;
    min-height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition: all .2s linear 0s
}

.newcase-body .newcase-card .newcase-bottom {
    padding: 0 24px 24px 24px;
    color: #313233
}

.newcase-body .newcase-card .newcase-bottom .newcase-content {
    margin-bottom: 36px;
    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #313233;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.newcase-body .newcase-card .newcase-bottom .newcase-tag {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    color: #939599
}

.newcase-body .newcase-card .newcase-bottom .newcase-tag .newcase-tagname {
    display: inline;
    margin-right: 6px;
    padding-right: 6px;
    line-height: 1;
    height: 14px;
    position: relative
}

.newcase-body .newcase-card .newcase-bottom .newcase-tag .newcase-tagname:after {
    content: "";
    position: absolute;
    height: 12px;
    width: 1px;
    background: #edeff2;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.newcase-body .newcase-card .newcase-bottom .newcase-tag .newcase-tagname + .newcase-tagname {
    margin-left: -1px
}

.newcase-body .newcase-card .newcase-bottom .newcase-tag .newcase-tagname:last-of-type {
    padding-right: 0;
    border: none
}

.newcase-body .newcase-card .newcase-bottom .newcase-tag .newcase-tagname:last-of-type:after {
    display: none
}

.case_header {
    width: 1135px;
    margin: 0 auto;
    padding-top: 80px;
    display: flex;
    justify-content: space-between
}

.case_header .case_header_title h3 {
    font-size: 46px;
    line-height: 65px;
    color: #313233;
    font-weight: 700
}

.case_header .case_header_title span {
    display: inline-block;
    margin-top: 16px;
    font-size: 16px;
    line-height: 29px;
    color: #626366
}

.case_header .case_header_bg {
    width: 223px;
    height: 93px;
    background: url(../images/new_case/case_header_bg.svg) right center no-repeat
}

.addmore-newcase {
    margin-top: 20px;
    text-align: center
}

.addmore-newcase a {
    display: inline-block;
    position: relative;
    width: 176px;
    padding: 16px;
    font-size: 16px;
    border: 1px solid #296bef;
    border-radius: 30px;
    color: #296bef;
    text-align: center;
    transition: all .2s
}

.addmore-newcase:hover a {
    color: #fff;
    border: 1px solid #fff;
    background-color: #296bef
}

.m-menu-select {
    position: relative;
    z-index: 2;
    height: 56px;
    border-bottom: 1px solid #e7e9ed
}

.m-menu-select .r-select {
    float: right;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    color: #626366
}

.m-menu-select .r-select .r-title {
    cursor: pointer;
    padding-left: 24px;
    background: url(../images/new_case/case_sort.png) no-repeat left center/16px auto
}

.m-menu-select .r-select .child {
    position: absolute;
    top: 99%;
    left: 0;
    width: 100%;
    display: none;
    padding-top: 10px
}

.m-menu-select .r-select .child .child-body {
    max-height: 700px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dfe1e6;
    box-shadow: 0 6px 15px 0 rgba(49, 50, 51, .05), 0 3px 5px 0 rgba(49, 50, 51, .05);
    border-radius: 6px;
    padding: 26px 12px 27px 40px;
    box-sizing: border-box
}

.m-menu-select .r-select .child .child-body span {
    float: left;
    width: 71px;
    font-size: 14px;
    color: #626366;
    line-height: 40px
}

.m-menu-select .r-select .child .child-body .item {
    overflow: hidden;
    margin-bottom: 10px
}

.m-menu-select .r-select .child .child-body .r-con {
    overflow: hidden
}

.m-menu-select .r-select .child .child-body .r-con .item-check {
    float: left;
    width: 50%;
    padding: 0 15px;
    box-sizing: border-box
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con {
    border-bottom: 1px solid #f2f4f7;
    height: 40px;
    line-height: 40px
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con label {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    margin-right: 8px
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con.checked label {
    background: #fff url(../images/new_case/zp3.png) center center no-repeat;
    background-size: 18px auto;
    border-color: #296bef
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .js-checkall {
    float: left;
    font-size: 14px;
    width: 113px;
    color: #313233;
    position: relative;
    display: inline-flex;
    align-items: center
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .js-checkall label {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    border: 1px solid #d2d4d9;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .js-checkall.checked label {
    background: #fff url(../images/new_case/zp3.png) center center no-repeat;
    background-size: 18px auto;
    border-color: #296bef
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .js-checkall:after {
    content: "";
    width: 1px;
    height: 16px;
    background: #f2f4f7;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 15px
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .r-con-check {
    overflow: hidden
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .r-con-check .js-checksingle {
    float: left;
    line-height: 40px;
    font-size: 12px;
    margin-right: 15px;
    color: #626366;
    display: inline-flex;
    align-items: center
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .r-con-check .js-checksingle label {
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #d2d4d9;
    border-radius: 4px;
    margin-right: 3px;
    cursor: pointer;
    margin-right: 5px
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .r-con-check .js-checksingle text {
    display: block
}

.m-menu-select .r-select .child .child-body .r-con .item-check .con .r-con-check .js-checksingle.checked label {
    background: #fff url(../images/new_case/zp3.png) center center no-repeat;
    background-size: 18px auto;
    border-color: #296bef
}

.m-menu-select .r-select .child .child-body .r-con .item-check.item-checkv2 {
    width: auto;
    margin: 0;
    padding-right: 0;
    width: 16.6%
}

.m-menu-select .r-select .child .child-body .r-con .item-check.item-checkv2 .con {
    border: none
}

.m-menu-select .r-select .child .child-body .r-con .item-check.item-checkv2 .con .js-checkall {
    width: auto;
    margin-right: 5px
}

.m-menu-select .r-select .child .child-body .r-con .item-check.item-checkv2 .con .js-checkall:after {
    display: none
}

.m-menu-select .r-select .child .child-body::-webkit-scrollbar {
    width: 15px
}

.m-menu-select .r-select .child .child-body::-webkit-scrollbar-track {
    background: #fff
}

.m-menu-select .r-select .child .child-body::-webkit-scrollbar-thumb {
    background: #c4c7cc;
    border-radius: 9px;
    border: 5px solid transparent;
    background-clip: content-box
}

.m-menu-select .r-select .child .child-body::-webkit-scrollbar-thumb:window-inactive {
    background: #fff
}

.m-menu-select .r-select:hover .child {
    display: block
}

.m-menu-select .r-select:hover .r-title {
    color: #296bef;
    background-image: url(../images/new_case/case_sort_on.png)
}

.m-menu-select .l-con {
    float: left
}

.m-menu-select .l-con .ul-select {
    height: 56px
}

.m-menu-select .l-con .ul-select li {
    float: left;
    line-height: 54px;
    margin-right: 32px;
    position: relative
}

.m-menu-select .l-con .ul-select li a {
    font-size: 16px;
    color: #626366;
    display: inline-block;
    padding-right: 18px;
    background-size: 16px auto
}

.m-menu-select .l-con .ul-select li a:after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: url(../images/new_case/zp1.png) no-repeat center center/contain;
    transition: all .3s
}

.m-menu-select .l-con .ul-select li:hover a {
    color: #296bef
}

.m-menu-select .l-con .ul-select li:hover a:after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
    background-image: url(../images/new_case/zp1h.png)
}

.m-menu-select .l-con .ul-select li .child {
    position: absolute;
    top: 99%;
    left: 0;
    width: auto;
    padding-top: 10px;
    display: none
}

.m-menu-select .l-con .ul-select li .child .child-body {
    max-height: 398px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 175px;
    background: #fff;
    box-shadow: 0 3px 5px 0 rgba(84, 85, 88, .1);
    border-radius: 6px;
    border: 1px solid #dfe1e6;
    padding: 8px 0;
    box-sizing: border-box
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checkall-table:hover .js-checkall {
    background-color: #f2f4f7
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checkall {
    font-size: 0;
    padding: 0 16px;
    height: 38px;
    line-height: 38px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    width: 175px;
    box-sizing: border-box
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checkall text {
    font-size: 14px;
    color: #313233;
    display: inline-block;
    vertical-align: middle
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checkall label {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    margin-right: 8px;
    cursor: pointer
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checkall.checked label {
    background: #fff url(../images/new_case/zp3.png) center center no-repeat;
    background-size: 18px auto;
    border-color: #296bef
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checkall:hover {
    background-color: #f2f4f7
}

.m-menu-select .l-con .ul-select li .child .child-body .r-con {
    min-height: 398px;
    position: absolute;
    left: 175px;
    top: 10px;
    display: none;
    float: left;
    width: 175px;
    background-color: #fff;
    border-radius: 0 6px 6px 0;
    border: 1px solid #dfe1e6;
    box-shadow: 3px 3px 5px 0 rgba(84, 85, 88, .1);
    padding: 8px 0;
    box-sizing: border-box
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checksingle {
    height: 38px;
    line-height: 38px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 16px
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checksingle label {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 1px solid #dfe1e6;
    border-radius: 3px;
    margin-right: 8px;
    cursor: pointer
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checksingle.checked label {
    background: #fff url(../images/new_case/zp3.png) center center no-repeat;
    background-size: 18px auto;
    border-color: #296bef
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checksingle text {
    font-size: 14px;
    color: #313233;
    display: inline-block;
    vertical-align: middle
}

.m-menu-select .l-con .ul-select li .child .child-body .js-checksingle:hover {
    background-color: #f2f4f7
}

.m-menu-select .l-con .ul-select li .child .child-body::-webkit-scrollbar {
    width: 15px;
    border-radius: 9px
}

.m-menu-select .l-con .ul-select li .child .child-body::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 9px
}

.m-menu-select .l-con .ul-select li .child .child-body::-webkit-scrollbar-thumb {
    background: #c4c7cc;
    border-radius: 9px;
    border: 5px solid transparent;
    background-clip: content-box
}

.m-menu-select .l-con .ul-select li .child .child-body::-webkit-scrollbar-thumb:window-inactive {
    background: #fff
}

.m-menu-select .l-con .ul-select li .child:after, .m-menu-select .l-con .ul-select li .child:before {
    content: "";
    width: 155px;
    height: 8px;
    position: absolute;
    bottom: 1px;
    left: 7px;
    background-color: #fff;
    z-index: 5
}

.m-menu-select .l-con .ul-select li .child:before {
    bottom: auto;
    top: 11px
}

.m-menu-select .l-con .ul-select li:hover .child {
    display: block
}

.selectedList {
    display: none;
    overflow: hidden;
    margin-top: 20px
}

.selectedList .label {
    float: left;
    color: #939599;
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    margin-right: 16px
}

.selectedList .list {
    overflow: hidden
}

.selectedList .list .item {
    float: left;
    padding: 0 19px;
    height: 30px;
    line-height: 28px;
    border-radius: 100px;
    border: 1px solid #e6e8ed;
    background-color: #fafafb;
    margin-bottom: 10px;
    margin-right: 10px;
    position: relative
}

.selectedList .list .item i {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url(../images/new_case/case_close.png) no-repeat center center/contain;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -8px;
    opacity: 0;
    transition: all .3s
}

.selectedList .list .item span {
    position: relative;
    left: 0;
    transition: all .3s
}

.selectedList .list .item:hover span {
    position: relative;
    left: -10px
}

.selectedList .list .item:hover i {
    opacity: 1
}

.selectedList .list .js-resetSelected {
    border: none;
    color: #296bef;
    cursor: pointer;
    background: 0 0
}

@-webkit-keyframes loadrotate {
    to {
        -webkit-transform: rotate(2turn);
        transform: rotate(2turn)
    }
}

@keyframes loadrotate {
    to {
        -webkit-transform: rotate(2turn);
        transform: rotate(2turn)
    }
}

.loading {
    margin-bottom: 24px
}

.loading img {
    display: block;
    margin: 0 auto;
    width: 16px;
    height: 16px;
    -webkit-animation: loadrotate 2s linear infinite;
    animation: loadrotate 2s linear infinite
}

.noData {
    text-align: center;
    font-size: 16px;
    color: #939599;
    margin-bottom: 20px
}

@media (max-width: 480px) {
    .case_pc {
        display: none
    }
}

.case_mobile {
    display: none
}

@media (max-width: 480px) {
    .case_mobile {
        display: block
    }
}

*, :after, :before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased
}

.false:focus {
    border: 2px solid #ff1531;
    background: #fff
}

::-webkit-input-placeholder {
    color: #999
}

::-moz-placeholder {
    color: #999
}

:-ms-input-placeholder {
    color: #999
}

::-ms-clear, ::-ms-reveal {
    display: none
}

.fix {
    *zoom: 1
}

.fix:after, .fix:before {
    display: block;
    content: "";
    height: 0;
    clear: both
}

.c {
    clear: both
}

.col-l, .l {
    float: left
}

.col-r, .r {
    float: right
}

.ani {
    transition: .3s
}

.unselect {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none
}

.wp {
    width: 100%;
    padding: 0 20px
}

.h50 {
    height: 50px;
    clear: both;
    overflow: hidden
}

.h100 {
    height: 100px;
    clear: both;
    overflow: hidden
}

.header {
    height: 62px;
    border-bottom: 1px solid #e7e9ed;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 29
}

.header .logo {
    font-size: 0;
    line-height: 62px;
    width: 110px;
    float: left
}

.header .logo img {
    display: inline-block;
    vertical-align: middle
}

.header .r-con {
    float: right;
    height: 62px
}

.header .r-con .menu {
    float: right;
    width: 20px;
    height: 20px;
    background: url(../images/new_case_mobile/menu.png) center center no-repeat;
    background-size: cover;
    margin-top: 20px
}

.header .r-con .so {
    float: right;
    width: 20px;
    height: 20px;
    background: url(../images/new_case_mobile/zp0.png) center center no-repeat;
    background-size: cover;
    margin-top: 20px;
    margin-right: 24px
}

.success-title {
    height: 46px;
    left: 46px;
    font-size: 32px;
    font-weight: 400;
    margin-top: 50px;
    margin-bottom: 44px;
    font-weight: 700
}

.btn-select {
    font-size: 14px;
    color: #313233;
    padding-left: 20px;
    background: url(../images/new_case_mobile/zp2.jpg) left center no-repeat;
    background-size: 13px auto;
    margin-bottom: 25px;
    display: inline-block
}

.btn-select.active {
    color: #296bef;
    background-image: url(../images/new_case_mobile/zp3.png)
}

.ul-case li {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e6e8ed;
    margin-bottom: 21px;
    position: relative
}

.case_mobile .ul-case.list-column {
    padding-top: 16px;
    border-top: 1px solid #f2f4f7
}

.case_mobile .ul-case.list-column li {
    display: flex;
    border: none;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f4f7
}

.case_mobile .ul-case.list-column .pic {
    padding-top: 0;
    margin-bottom: 0
}

.case_mobile .ul-case.list-column h3 {
    margin-bottom: 0;
    padding-bottom: 16px
}

.case_mobile .ul-case.list-column .txt {
    padding: 0;
    position: relative
}

.case_mobile .ul-case.list-column .txt a {
    -webkit-line-clamp: 3
}

.case_mobile .ul-case.list-column .info-tag {
    position: static
}

.case_mobile .list-column .pic {
    width: 112px;
    height: 112px;
    margin-right: 19px;
    border-radius: 6px
}

.case_mobile .list-column .txt {
    flex: 1
}

.ul-case li .pic {
    margin-bottom: 20px;
    position: relative;
    padding-top: 50%;
    overflow: hidden
}

.ul-case li .pic img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0
}

.ul-case li .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .4) 100%);
    color: #fff;
    padding: 0 20px;
    font-size: 19px;
    line-height: 90px;
    text-shadow: 0 1px 2px rgba(49, 50, 51, .5);
    font-family: Medium;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ul-case li .txt {
    padding: 0 20px;
    padding-bottom: 20px
}

.ul-case li .txt h3 {
    font-weight: 400;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-bottom: 20px;
    word-break: break-all
}

.ul-case li .txt .tag {
    font-size: 12px;
    color: #939599;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px
}

.ul-case li .txt .tag em {
    font-size: 12px;
    display: inline-block;
    margin: 0 3px;
    color: #edeff2
}

.ul-casev2 li .txt .tag {
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.index-more1 {
    display: block;
    margin: 0 auto;
    width: 176px;
    height: 44px;
    line-height: 42px;
    text-align: center;
    border: 1px solid #296bef;
    border-radius: 31px;
    color: #296bef;
    font: 16px;
    margin: 80px auto 80px
}

.m-form-appointment {
    background: url(../images/new_case_mobile/zp5.png) center center no-repeat;
    background-size: cover;
    padding: 50px 0
}

.m-form-appointment .lab {
    margin-bottom: 24px
}

.m-form-appointment .lab label {
    background: url(../images/new_case_mobile/zp6.png) left center no-repeat;
    background-size: 18px;
    padding-left: 30px;
    position: relative;
    line-height: 20px;
    color: #fff;
    font-size: 16px;
    margin-right: 40px
}

.m-form-appointment .lab label.checked {
    background-image: url(../images/new_case_mobile/zp7.png)
}

.m-form-appointment .lab label input {
    position: absolute;
    left: -9999px
}

.m-form-appointment .title {
    color: #fff;
    margin-bottom: 36px
}

.m-form-appointment .title h4 {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 12px
}

.m-form-appointment .title p {
    font-size: 12px
}

.m-form-appointment .item-form input {
    display: none
}

.m-form-appointment .dropmenurel01-options {
    display: none
}

.m-form-appointment .item-form {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 42px;
    border-radius: 8px;
    border: 1px solid #fff;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .05);
    position: relative;
    padding: 0 16px
}

.m-form-appointment .item-form .dropmenurel01-tit {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: #fff;
    background: url(../images/new_case_mobile/zp19.png) right center no-repeat;
    background-size: 20px auto
}

.m-form-appointment .item-form .dropmenurel01-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #fff;
    background: #4682f8;
    border-radius: 8px;
    z-index: 19
}

.m-form-appointment .item-form .dropmenurel01-options li {
    padding: 0 16px;
    color: #fff
}

.m-form-appointment .item-form input {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: 0 0;
    font-size: 16px;
    color: #fff
}

.m-form-appointment .item-form input::-webkit-input-placeholder {
    color: #fff
}

.m-form-appointment .item-form input::-moz-placeholder {
    color: #fff
}

.m-form-appointment .item-form input:-ms-input-placeholder {
    color: #fff
}

.m-form-appointment .item-form .form1-vcodebtn {
    position: absolute;
    right: 16px;
    top: 50%;
    border: none;
    background: 0 0;
    color: #fff;
    font-size: 16px;
    padding-left: 8px;
    height: 15px;
    line-height: 15px;
    border-left: 1px solid #fff;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.m-form-appointment .submit {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    border: none;
    background: #fff;
    border-radius: 22px;
    font-size: 16px;
    color: #296bef;
    margin-top: 32px
}

.m-contant {
    background: #f9fafc;
    overflow: hidden;
    padding: 24px 0
}

.m-contant .item {
    float: left;
    width: 40%;
    padding-left: 16px;
    color: #313233;
    font-size: 14px;
    line-height: 2;
    position: relative
}

.m-contant .item .tel {
    font-family: Helvetica
}

.m-contant .item:last-child {
    width: 60%;
    padding-left: 40px;
    padding-right: 16px
}

.m-contant .item:last-child::after {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 1px;
    height: 42px;
    background: #edeff2;
    margin-top: -21px
}

.footer {
    padding-bottom: 100px
}

.footer .ft-menu {
    margin-bottom: 20px
}

.footer .ft-menu .menu-item {
    border-bottom: 1px solid #eee
}

.footer .ft-menu .title {
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    color: #626366;
    background: url(../images/new_case_mobile/zp9.png) right center no-repeat;
    background-size: 12px auto
}

.footer .ft-menu .title.on {
    background-image: url(../images/new_case_mobile/zp8.png)
}

.footer .ft-menu .link {
    padding: 0 20px;
    display: none
}

.footer .ft-menu .link a {
    display: block;
    line-height: 45px;
    color: #939599
}

.footer .ft-link {
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px
}

.footer .ft-link a {
    font-size: 12px;
    color: #939599;
    line-height: 28px
}

.footer .copy {
    text-align: center;
    font-size: 12px;
    color: #939599
}

.a-top {
    position: fixed;
    right: 20px;
    bottom: 84px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .9) url(../images/new_case_mobile/zp10.png) center center no-repeat;
    background-size: 20px auto;
    border-radius: 50%;
    z-index: 10;
    display: none;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, .08), 0 4px 10px 0 rgba(0, 0, 0, .07);
    border: 1px solid #d2d4d9
}

.a-tel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 126px;
    height: 44px;
    line-height: 44px;
    font-size: 0;
    text-align: center;
    background: #296bef;
    border-radius: 22px;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, .08), 0 4px 10px 0 rgba(0, 0, 0, .07);
    z-index: 10
}

.a-tel span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #fff;
    padding-left: 32px;
    background: url(../images/new_case_mobile/zp11.png) left center no-repeat;
    background-size: 16px auto
}

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

.menu-wrap {
    position: absolute;
    top: 0;
    padding-bottom: 100px;
    right: -100%;
    bottom: 0;
    width: 84%;
    overflow-y: auto;
    background-color: #fff;
    padding: 24px 20px 0;
    height: 100%;
    z-index: 12;
    padding-bottom: 60px;
    transition: .3s
}

.menu-wrap.show {
    right: 0
}

.menu-wrap .menu-option {
    position: fixed;
    bottom: 0;
    right: -100%;
    width: 84%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    background-color: #fafbfc;
    border-top: 1px solid #e7e9ed;
    transition: .3s
}

.menu-wrap .menu-option.show {
    right: 0
}

.menu-wrap .menu-option input {
    display: inline-block;
    width: 68px;
    height: 29px;
    line-height: 29px;
    border: none;
    background: #296bef;
    border-radius: 19px;
    color: #fff;
    font-size: 14px
}

.menu-wrap .menu-option p {
    font-size: 14px;
    color: #939599
}

.menu-wrap .menu-option p em {
    color: #296bef
}

.menu-wrap .menu-check .check-title {
    font-size: 14px;
    color: #626366;
    margin-bottom: 12px;
    line-height: 1.1
}

.ul-check {
    margin: 0 -5px 24px;
    overflow: hidden
}

.ul-check li {
    float: left;
    width: 33.33%;
    padding: 0 5px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 12px;
    color: #626366
}

.ul-check li label {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 38px;
    border-radius: 4px;
    border: 1px solid #e6e8ed;
    background-color: #fafbfc;
    transition: .3s
}

.ul-check li label.checked {
    color: #296bef;
    border-color: #296bef;
    background: #fafcff
}

.ul-check li label input {
    position: absolute;
    left: -9999px
}

.m-artile {
    padding-top: 40px;
    margin-bottom: 50px
}

.m-artile .artile-title {
    margin-bottom: 40px
}

.m-artile .artile-title h2 {
    font-size: 28px;
    color: #313233;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 12px;
    font-family: Medium;
    font-weight: 700
}

.m-artile .artile-title span {
    font-size: 16px;
    color: #626366
}

.m-artile .info img {
    display: block;
    width: 100%;
    border-radius: 8px
}

.m-artile .info h3 {
    font-size: 22px;
    color: #313233;
    margin-bottom: 36px;
    line-height: 1.1;
    margin: 48px 0 20px;
    font-weight: 700
}

.m-artile .info h4 {
    font-size: 18px;
    color: #313233;
    margin-bottom: 15px;
    line-height: 1.1;
    margin: 40px 0 16px;
    font-weight: 700
}

.m-artile .info {
    font-size: 16px;
    color: #626366;
    line-height: 1.81
}

.m-artile .info p {
    margin-bottom: 12px
}

.m-about-txt {
    margin-bottom: 40px
}

.m-about-txt .item {
    background: #fafbfc;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    overflow: hidden;
    margin-bottom: 16px
}

.m-about-txt .item a.link, .m-about-txt .item a.pdf {
    float: right;
    width: 40px;
    height: 45px;
    background: url(../images/new_case_mobile/zp14.png) right center no-repeat;
    background-size: 20px auto;
    border-left: 1px solid #e6e8ed
}

.m-about-txt .item a.pdf {
    background-image: url(../images/new_case_mobile/zp15.png)
}

.m-about-txt .item .l-con {
    overflow: hidden
}

.m-about-txt .item .l-con .pic {
    float: left;
    width: 40px;
    margin-right: 12px
}

.m-about-txt .item .l-con .pic img {
    display: block;
    width: 100%
}

.m-about-txt .item .l-con .txt {
    overflow: hidden
}

.m-about-txt .item .l-con .txt h4 {
    font-size: 16px;
    color: #313233;
    font-weight: 400
}

.m-about-txt .item .l-con .txt p {
    font-size: 12px;
    color: #939599
}

.g-tit01 {
    font-size: 22px;
    color: #313233;
    margin-bottom: 24px
}

.m-about-ad {
    margin-bottom: 40px
}

.m-about-ad .item {
    overflow: hidden;
    margin-bottom: 16px
}

.m-about-ad .item a {
    display: block;
    width: 100%;
    height: 80px;
    background: #fafbfc url(../images/new_case_mobile/zp18.png) right 20px center no-repeat;
    background-size: 20px auto;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0 20px
}

.m-about-ad .item img {
    float: left;
    width: 40px;
    margin-right: 12px;
    margin-top: 20px
}

.m-about-ad .item .r-con {
    overflow: hidden;
    display: block;
    padding-right: 32px;
    height: 80px;
    position: relative
}

.m-about-ad .item .r-con h4 {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #313233;
    font-weight: 400;
    max-height: 3em;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding-right: 32px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ul-tag {
    margin: 0 -6px
}

.ul-tag li {
    padding: 0 6px;
    display: inline-block;
    margin-bottom: 12px
}

.ul-tag li .con {
    height: 39px;
    line-height: 37px;
    background: #f9fafc;
    border: 1px solid #e6e8ed;
    border-radius: 20px;
    padding: 0 20px;
    font-size: 16px;
    color: #313233
}

.m-about-tag {
    margin-bottom: 40px
}

.m-about-case {
    background: linear-gradient(180deg, #f9fafc 0, #fff 100%);
    padding: 40px 0 20px
}

.ul-casev2 {
    font-size: 0;
    padding-left: 20px;
    display: inline-flex
}

.ul-casev2 li {
    width: 298px;
    display: inline-block;
    margin-right: 17px;
    background: #fff;
    vertical-align: top
}

.ul-casev2 li:last-child {
    margin-right: 20px
}

.ul-case li .txt h3 {
    display: block;
    line-height: 24px;
    font-size: 16px;
    white-space: normal
}

.ul-case li .txt h3 a {
    color: #313233;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden
}

body.noScroll {
    position: fixed;
    overflow-y: hidden;
    overflow-x: hidden
}

.no-result {
    text-align: center;
    font-size: 16px;
    color: #999;
    height: 200px;
    line-height: 200px
}

.m-select-pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    overflow: hidden;
    display: none;
    transition: .1s
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list, .slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block
}

.slick-track:after, .slick-track:before {
    display: table;
    content: ""
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.info-tag {
    position: absolute;
    font-size: 14px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    color: #939599;
    display: flex;
    justify-content: space-between
}

.audio {
    border: 1px solid #e6e8ed;
    border-radius: 4px;
    overflow: hidden;
    background: #fafbfc;
    padding: 22px 24px;
    margin-bottom: 24px
}

.audio .audio-title {
    font-size: 16px;
    color: #313233;
    line-height: 1.1;
    margin-bottom: 18px
}

.audio audio {
    display: block;
    width: 100%;
    background: 0 0;
    height: 40px;
    background: #fafbfc !important
}

.ul-news-m {
    padding-top: 16px;
    border-top: 1px solid #f2f4f7
}

.ul-news-m li {
    overflow: hidden;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f4f7
}

.ul-news-m li:last-child {
    margin-bottom: 0
}

.ul-news-m li .pic {
    float: left;
    width: 112px;
    margin-right: 19px;
    border-radius: 6px;
    overflow: hidden
}

.ul-news-m li .pic img {
    display: block;
    width: 100%
}

.ul-news-m li .txt {
    overflow: hidden;
    font-family: Medium
}

.ul-news-m li .txt h3 {
    font-weight: 400;
    margin-bottom: 15px;
    text-align: justify
}

.ul-news-m li .txt h3 a {
    font-size: 16px;
    color: #313233;
    line-height: 1.5;
    max-height: 4.5em;
    overflow: hidden
}

.ul-news-m li .txt .bom {
    overflow: hidden
}

.ul-news-m li .txt .bom a {
    float: left;
    font-size: 12px;
    color: #939599;
    margin-right: 16px
}

.ul-news-m li .txt .bom span {
    float: left;
    font-size: 12px;
    color: #939599;
    margin-right: 16px
}

.news-title-m {
    margin: 55px 0 44px
}

.news-title-m h3 {
    font-size: 32px;
    color: #313233;
    line-height: 1.1;
    margin-bottom: 21px;
    font-family: Medium;
    text-align: justify
}

.news-title-m p {
    font-size: 16px;
    color: #626366;
    line-height: 1.1
}

.m-about-txt .item .l-con .txt h4 a {
    color: #333
}

.m-news-info-mobile {
    padding-top: 48px
}

.m-news-info-mobile .news-info-title {
    margin-bottom: 42px
}

.m-news-info-mobile .news-info-title h2 {
    text-align: justify;
    font-size: 28px;
    color: #313233;
    line-height: 1.5;
    margin-bottom: 15px;
    font-family: Medium;
    font-weight: 700
}

.m-news-info-mobile .news-info-title span {
    font-size: 16px;
    color: #626366
}

.m-news-info-mobile .news-txt {
    font-family: Medium
}

.m-news-info-mobile .news-desc {
    font-size: 16px;
    color: #626366;
    line-height: 1.85;
    margin-bottom: 41px
}

.m-news-info-mobile .news-info {
    font-size: 16px;
    color: #626366;
    line-height: 1.85;
    margin-bottom: 39px;
    text-align: justify
}

.m-news-info-mobile .news-info h4 {
    font-size: 22px;
    color: #313233;
    line-height: 1.5;
    margin-bottom: 19px;
    text-align: justify
}

.m-news-info-mobile .news-info img {
    display: block;
    width: 100%;
    border: 1px solid #def1e7;
    border-radius: 3px
}

.m-news-info-mobile .news-info strong {
    color: #000
}

.m-news-info-mobile .news-info h5 {
    font-size: 18px;
    color: #313233;
    line-height: 1.5;
    margin-bottom: 20px
}

.m-news-info-mobile audio {
    display: block;
    width: 100%;
    background: 0 0;
    height: 40px;
    background: #fafbfc !important
}

.m-news-info-mobile .audio {
    border: 1px solid #e6e8ed;
    border-radius: 4px;
    overflow: hidden;
    background: #fafbfc;
    padding: 25px 20px;
    margin-bottom: 24px
}

.m-news-info-mobile .audio-title {
    font-size: 16px;
    color: #313233;
    line-height: 1.1;
    margin-bottom: 18px
}

.case_mobile .index-more1 {
    margin-bottom: 0;
    margin-top: 30px
}

.list-column .info-tag div:first-child {
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.aboutcase-bottom .info-tag div:first-child {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ul-case.ul-casev2 .info-tag div:first-child {
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.newcase-bottom .info-tag div:first-child {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-top {
    height: 182px;
    background-color: #fafbfc;
    padding-top: 48px;
    border-bottom: 1px solid #e7e9ed;
    margin-bottom: 52px
}

.search-wrap {
    width: 784px;
    margin: 0 auto
}

.search-top .search-form {
    position: relative
}

.search-top .search-form input {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 40px;
    border: 1px solid #dfe1e6;
    border-radius: 21px;
    font-size: 16px;
    padding-left: 48px;
    background: url(../images/search/search-p1.png) left 24px center no-repeat;
    background-size: 16px;
    color: #313233
}

.search-top .search-form input::-webkit-input-placeholder {
    color: #939599
}

.search-top .search-form input::-moz-placeholder {
    color: #939599
}

.search-top .search-form input:-ms-input-placeholder {
    color: #939599
}

.search-top .search-form .em-del {
    position: absolute;
    right: 24px;
    top: 13px;
    background: url(../images/search/search-p2.png) center no-repeat;
    background-size: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: none
}

.search-link {
    font-size: 0;
    margin-top: 50px
}

.search-link a {
    display: inline-block;
    font-size: 16px;
    color: #626366;
    padding-bottom: 21px;
    position: relative;
    margin-right: 30px
}

.search-link a:hover {
    color: #007fcb
}

.search-link a::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 32px;
    height: 4px;
    background-color: #296bef;
    border-radius: 2px;
    content: '';
    display: none;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.search-link a.on {
    font-weight: 700;
    color: #313233
}

.search-link a.on::after {
    display: block
}

.search-result-body {
    margin-bottom: 100px
}

.search-result-list {
    margin-bottom: 80px
}

.search-result-list li {
    margin-bottom: 44px
}

.search-result-list li:last-child {
    margin-bottom: 0
}

.search-result-list li .result-tag {
    font-size: 14px;
    color: #939599;
    line-height: 1.1;
    margin-bottom: 22px
}

.search-result-list li h3 {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
    margin-bottom: 12px
}

.search-result-list li h3 a {
    font-size: 20px;
    color: #313233;
    font-weight: 700
}

.search-result-list li h3 a:hover {
    text-decoration: underline
}

.search-result-list li .infos {
    font-size: 14px;
    color: #626366;
    line-height: 1.786
}

.search-result-list li em {
    color: #296bef
}

.search-result-more {
    display: block;
    margin: 0 auto;
    width: 144px;
    height: 48px;
    line-height: 46px;
    border: 1px solid #296bef;
    border-radius: 29px;
    text-align: center;
    font-size: 16px
}

.search-page.search-page-reesult .not-reuslt .none-content {
    margin-bottom: 90px
}

.search-fix {
    *zoom: 1
}

.search-fix:after, .search-fix:before {
    display: block;
    content: "";
    height: 0;
    clear: both
}

.footer-search .footer-search-wrap {
    width: 1136px;
    margin: 0 auto
}

.footer-search .fs-link {
    margin: 0 -25px 27px;
    position: relative
}

.footer-search .fs-link .item {
    float: left;
    width: 20%;
    padding: 0 25px
}

.footer-search .fs-link .title {
    font-size: 14px;
    color: #626366;
    border-bottom: 1px solid #edeff2;
    font-weight: 700;
    padding-bottom: 10px;
    margin-bottom: 19px
}

.footer-search .fs-link .link a {
    display: block;
    font-size: 14px;
    color: #939599;
    margin-bottom: 10px;
    transition: .3s
}

.footer-search .fs-link .link a:hover {
    color: #626366
}

.footer-search .fs-copy {
    overflow: hidden;
    border-top: 1px solid #edeff2;
    padding-top: 34px;
    padding-bottom: 70px
}

.footer-search .fs-copy p {
    float: right;
    font-size: 14px;
    color: #939599
}

.footer-search .fs-copy .l-link {
    float: left
}

.footer-search .fs-copy .l-link a {
    font-size: 14px;
    display: inline-block;
    color: #999;
    margin-right: 30px;
    transition: .3s
}

.footer-search .fs-copy .l-link a:hover {
    color: #626366
}

.footer-search .fs-link .link .qr {
    position: absolute;
    top: 10px;
    right: -30px;
    width: 130px;
    height: 150px;
    padding: 17px;
    background-color: #fff;
    display: none;
    border: 1px solid #dfe1e6;
    box-shadow: 0 6px 15px 0 rgba(49, 50, 51, .05), 0 3px 5px 0 rgba(49, 50, 51, .05);
    border-radius: 5px
}

.footer-search .fs-link .link .qr img {
    display: block;
    width: 100%;
    margin-bottom: 8px
}

.footer-search .fs-link .link .qr p {
    font-size: 12px;
    color: #313233;
    text-align: center
}

.footer-search .fs-link .link a:hover .qr {
    display: block
}

.footer-search .fs-link .link .qr::after {
    position: absolute;
    width: 20px;
    height: 20px;
    content: '';
    top: 35px;
    left: -14px;
    background: url(../images/search/arrow.jpg)
}

.search-page.search-page-reesult .not-reuslt .search-none {
    width: 64px;
    height: 64px
}

.ul-ftlink {
    overflow: hidden;
    margin: 0 -8px;
    display: none
}

.ul-ftlink li {
    float: left;
    width: 50%;
    padding: 0 8px;
    margin-bottom: 16px
}

.ul-ftlink li .con-wrap {
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #e6e8ed;
    padding: 16px 0
}

.ul-ftlink li i {
    display: block;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0 auto 8px
}

.ul-ftlink li p {
    text-align: center;
    font-size: 12px;
    color: #939599;
    line-height: 1.1
}

.search-calcle-m {
    display: none
}

.search-hot {
    display: none
}

@media only screen and (max-width: 1140px) {
    .footer-search .footer-search-wrap {
        width: 100%;
        padding: 0 15px
    }

    .footer-search .fs-link .item {
        padding: 0 10px
    }

    .footer-search .fs-link {
        margin: 0 -10px 30px
    }
}

@media only screen and (max-width: 784px) {
    .search-hot {
        position: fixed;
        background-color: #fff;
        bottom: 0;
        left: 0;
        right: 0;
        top: 174px;
        overflow-y: auto;
        display: none
    }

    .search-hot .link {
        padding: 0 15px
    }

    .search-hot .link a {
        display: block;
        height: 56px;
        line-height: 56px;
        font-size: 16px;
        color: #313233;
        border-bottom: 1px solid #f2f4f7
    }

    .search-hot .link a em {
        font-weight: 700
    }

    .search-hot .more a {
        padding: 0 15px;
        height: 56px;
        line-height: 56px;
        font-size: 16px;
        color: #296bef;
        display: flex;
        justify-content: space-between
    }

    .search-link {
        overflow: hidden;
        white-space: nowrap;
        overflow-x: auto
    }

    .search-link a {
        padding-bottom: 14px
    }

    .search-link {
        margin-top: 25px
    }

    .search-calcle-m {
        float: right;
        display: block;
        font-size: 16px;
        color: #296bef;
        margin-left: 16px;
        margin-top: 8px
    }

    .search-top .search-form {
        overflow: hidden
    }

    .search-top {
        padding-top: 12px;
        height: auto;
        margin-bottom: 16px
    }

    .search-top .search-wrap-top {
        display: block
    }

    .search-top .search-form .em-del {
        right: 16px
    }

    .search-top .search-form input {
        background-color: #fff;
        color: #313233;
        font-size: 16px;
        height: 38px;
        line-height: 38px;
        background-position: left 16px center;
        padding-left: 44px
    }

    .footer-search {
        background-color: #fafbfc;
        padding-top: 40px
    }

    .footer-search .fs-copy .l-link a {
        margin-right: 0;
        font-size: 12px;
        color: #939599
    }

    .footer-search .fs-copy .l-link {
        float: none;
        width: auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 14px
    }

    .footer-search .fs-copy p {
        float: none;
        width: auto;
        font-size: 12px;
        color: #939599;
        text-align: center
    }

    .footer-search .fs-copy {
        padding-top: 0;
        padding-bottom: 40px
    }

    .case_pc_rel .search-wrap {
        width: 100%;
        padding: 0 15px
    }

    .footer-search .fs-link .item {
        float: none;
        width: auto
    }

    .footer-search .fs-link .item .title {
        font-size: 12px;
        color: #626366;
        padding-bottom: 0;
        height: 50px;
        line-height: 50px;
        border: none;
        border-top: 1px solid #e7e9ed;
        margin-bottom: 0;
        background: url(../images/search/ftlink-show.jpg) right center no-repeat;
        background-size: 10px auto
    }

    .footer-search .fs-link .item .title.active {
        background-image: url(../images/search/ftlink-hide.jpg)
    }

    .footer-search .fs-link .item:last-child .con {
        border-bottom: 1px solid #e7e9ed
    }

    .footer-search .fs-link .item:last-child .link {
        display: none !important
    }

    .footer-search .fs-link .link {
        display: none
    }

    .footer-search .fs-copy {
        border: none
    }

    .footer-search .fs-link .link a {
        font-size: 12px;
        color: #939599;
        margin-bottom: 17px
    }

    .search-result-list li h3 a {
        font-size: 16px;
        font-weight: 400
    }

    .search-result-list li .infos {
        height: 3.572em;
        overflow: hidden;
        font-size: 12px
    }

    .search-result-list li {
        padding-bottom: 18px;
        margin-bottom: 16px;
        border-bottom: 1px solid #f2f4f7
    }

    .search-result-list li h3 {
        margin-bottom: 17px
    }

    .search-result-more {
        height: 40px;
        line-height: 38px;
        font-size: 16px
    }

    .search-result-body {
        margin-bottom: 40px
    }

    .search-result-list {
        margin-bottom: 40px
    }
}

.Search_Btn_hd {
    width: 28px;
    height: 72px;
    background: url(../images/search/Search-btn-hd.png) center no-repeat;
    float: right;
    cursor: pointer;
    background-size: 22px auto
}

.search-block.searching {
    width: 867px;
    display: none
}

.search-block.searching .main-search {
    width: 100%
}

.search-top-close {
    position: absolute;
    width: 12px;
    height: 12px;
    background: url(../images/search/Search_close_top.png) center no-repeat;
    background-size: cover;
    top: 50%;
    margin-top: -6px;
    right: 20px;
    cursor: pointer
}

.search-block .search-body {
    position: relative
}

.Search_retult_top {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 14px;
    color: #333;
    border: 1px solid #e6e8ed;
    padding: 0 0 0;
    text-align: left;
    display: none
}

.Search_retult_top .result_hot {
    padding-top: 24px
}

.Search_retult_top .result_hot .title {
    font-size: 12px;
    color: #939599;
    margin-bottom: 15px;
    padding: 0 24px
}

.Search_retult_top .result_hot .result a {
    display: block;
    height: 38px;
    line-height: 38px;
    color: #313233;
    padding: 0 24px;
    transition: .5s
}

.Search_retult_top .result_hot .result a:hover {
    background-color: #f2f4f7
}

.resut_imp {
    display: none
}

.resut_imp .title {
    background-color: #fafbfc;
    border-bottom: 1px solid #ddd;
    font-size: 0;
    padding: 0 24px;
    margin-bottom: 10px
}

.resut_imp .title a {
    display: inline-block;
    height: 55px;
    line-height: 65px;
    position: relative;
    margin-right: 24px;
    font-size: 14px;
    color: #626366
}

.resut_imp .title a:hover {
    color: #296bef
}

.resut_imp .title a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #296bef;
    border-radius: 2px;
    content: '';
    display: none
}

.resut_imp .title a.on {
    font-weight: 700;
    color: #313233
}

.resut_imp .title a.on::after {
    display: block
}

.resut_imp .result a {
    display: block;
    padding: 0 24px;
    height: 38px;
    color: #313233;
    line-height: 38px
}

.resut_imp .result a:hover {
    background-color: #f2f4f7
}

.resut_imp .all {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    margin-top: 10px;
    padding-bottom: 24px
}

.search-btn-m {
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/search/Search-btn-hd.png) center no-repeat;
    right: 60px;
    top: 50%;
    margin-top: -10px;
    background-size: cover
}

.select-result-m {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: #fafbfc;
    border-top: 1px solid #e7e9ed;
    border-bottom: 1px solid #e7e9ed;
    z-index: 100001;
    padding: 12px 12px 0;
    display: none
}

.select-result-m a {
    float: right;
    font-size: 16px;
    color: #296bef;
    margin-left: 16px;
    margin-top: 8px
}

.select-result-m .l-con {
    overflow: hidden;
    position: relative
}

.select-result-m .l-con input {
    display: block;
    width: 100%;
    height: 39px;
    border: 1px solid #dfe1e6;
    border-radius: 19px;
    padding-left: 44px;
    padding-right: 20px;
    background: #fff url(../images/search/Search-btn-hd.png) 16px center no-repeat;
    background-size: 20px auto
}

.result-hot-m {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    overflow-y: auto;
    padding: 0 16px;
    display: none
}

.result-hot-m .title {
    line-height: 53px;
    font-size: 14px;
    color: #939599;
    border-bottom: 1px solid #f2f4f7
}

.result-hot-m .link a {
    display: block;
    border-bottom: 1px solid #f2f4f7;
    font-size: 16px;
    color: #313233;
    line-height: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.restut-list-m {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: #fff;
    z-index: 100002;
    display: none;
    padding-bottom: 15px
}

.restut-list-m .search-lik-m {
    background-color: #fafbfc;
    white-space: nowrap;
    overflow-x: auto;
    padding: 0 16px;
    border-bottom: 1px solid #e7e9ed;
    display: none
}

.restut-list-m .search-lik-m a {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #626366;
    margin-right: 24px;
    position: relative
}

.restut-list-m .search-lik-m a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    height: 4px;
    background-color: #296bef;
    border-radius: 2px;
    display: none
}

.restut-list-m .search-lik-m a.on::after {
    display: block
}

.restut-list-m .search-list {
    padding: 0 16px
}

.restut-list-m .search-list a {
    display: block;
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #e7e9ed;
    color: #333
}

.restut-list-m .search-list a em {
    font-weight: 700
}

.restut-list-m .all {
    padding: 0 16px;
    overflow: hidden;
    display: block;
    margin-top: 10px
}

.restut-list-m .all span {
    font-size: 16px;
    color: #296bef;
    float: left
}

.restut-list-m .all span.r {
    float: right
}

.select-result-m .l-con .em-del2 {
    position: absolute;
    right: 15px;
    top: 13px;
    background: url(../images/search/search-p2.png) center no-repeat;
    background-size: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    display: none
}

.footer-search .fs-copy {
    padding-bottom: 70px
}

.footer-search {
    padding-top: 30px
}

.Search_retult_null {
    position: absolute;
    height: 220px;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 14px;
    color: #333;
    border: 1px solid #e6e8ed;
    padding: 0 0 0;
    text-align: left;
    display: block
}

.Search_retult_null .txt, .result-hot-m-null .txt {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #ccc;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.result-hot-m-null {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    overflow-y: auto;
    padding: 0 16px;
    display: block
}

.case-detail .case-detail-hd {
    height: 450px;
    position: relative;
    text-align: center;
    background: url(../images/hero/hero_case_detail.jpg) no-repeat center center transparent;
    background-image: -webkit-image-set(url(../images/hero/hero_case_detail.jpg) 1x, url(../images/hero/hero_case_detail@2x.jpg) 2x);
    background-size: cover;
    color: #fff;
    line-height: 1;
    z-index: 1
}

.case-detail .case-detail-hd:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: " ";
    background: url(../images/mask.png);
    z-index: 1
}

.case-detail .case-detail-hd .container {
    position: relative;
    padding: 154px 0 0;
    z-index: 3
}

.case-detail .case-detail-hd .case-brand {
    font-size: 26px;
    margin-bottom: 30px
}

.case-detail .case-detail-hd .case-title {
    font-size: 36px;
    margin-bottom: 35px
}

.case-detail .case-detail-hd .case-tag-item {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 14px;
    color: #fff;
    background-color: #008de8;
    line-height: 30px;
    padding: 0 18px;
    margin-right: 5px;
    border-radius: 2px
}

.case-detail .case-detail-bd .container {
    background-color: #fff
}

.case-detail .case-detail-bd .case-summary {
    margin-top: -50px;
    position: relative;
    z-index: 3
}

.case-detail .case-detail-bd .case-summary .container {
    width: auto;
    max-width: none;
    margin: 0 8%;
    padding: 42px 0
}

.case-detail .case-detail-bd .case-summary .case-summary-hd {
    background-color: #008de8;
    color: #fff;
    line-height: 1
}

.case-detail .case-detail-bd .case-summary .case-summary-hd .container {
    background-color: #008de8
}

.case-detail .case-detail-bd .case-summary .case-summary-bd {
    background-color: #fff
}

.case-detail .case-detail-bd .case-summary .case-meta {
    display: block;
    float: left;
    width: 45%;
    margin-left: 10%;
    text-align: center
}

.case-detail .case-detail-bd .case-summary .case-meta:first-child {
    margin-left: 0
}

.case-detail .case-detail-bd .case-summary .case-meta:first-child {
    margin-left: 0
}

.case-detail .case-detail-bd .case-summary .case-column-3 .case-meta {
    display: block;
    float: left;
    width: 32%;
    margin-left: 2%;
    *width: 31%
}

.case-detail .case-detail-bd .case-summary .case-column-3 .case-meta:first-child {
    margin-left: 0
}

.case-detail .case-detail-bd .case-summary .case-column-3 .case-meta:first-child {
    margin-left: 0
}

.case-detail .case-detail-bd .case-summary .case-intro {
    margin-bottom: 35px
}

.case-detail .case-detail-bd .case-summary .case-intro:last-of-type {
    margin-bottom: 0
}

.case-detail .case-detail-bd .case-summary .case-meta-data {
    font-size: 50px;
    margin-bottom: 25px
}

.case-detail .case-detail-bd .case-summary .case-meta-data .has-arrow {
    position: relative;
    display: inline-block
}

.case-detail .case-detail-bd .case-summary .case-meta-data .has-arrow i {
    font-style: normal;
    font-size: 40px;
    position: absolute;
    right: -35px;
    top: 5px;
    *right: -25px
}

.case-detail .case-detail-bd .case-summary .case-meta-title {
    font-size: 18px
}

.case-detail .case-detail-bd .case-summary .case-intro-title {
    font-size: 20px;
    padding-bottom: 10px
}

.case-detail .case-detail-bd .case-summary .case-intro-data {
    font-size: 14px;
    line-height: 2;
    color: #000
}

.case-detail .case-detail-bd .case-summary .case-intro-data h2 {
    font-size: 32px;
    color: #000;
    line-height: 1;
    padding: 10px 0 20px
}

.case-detail .case-detail-bd .case-summary .case-intro-data p {
    padding-bottom: 10px
}

.case-detail .case-detail-bd .case-summary .case-intro-data p img {
    margin: 10px 0;
    width: 100%
}

.case-detail .case-detail-bd .case-content {
    background-color: #fff;
    width: auto;
    max-width: none;
    padding: 0 8% 42px 8%;
    line-height: 2;
    font-size: 14px;
    color: #000
}

.case-detail .case-detail-bd .case-content h2 {
    font-size: 32px;
    color: #000;
    line-height: 1;
    padding: 10px 0 20px
}

.case-detail .case-detail-bd .case-content h3 {
    font-size: 20px;
    padding-bottom: 10px
}

.case-detail .case-detail-bd .case-content p {
    margin: 15px 0
}

.case-detail .case-detail-bd .case-content p img {
    display: block;
    margin: 30px auto;
    max-width: 100%;
    text-align: center
}

.case-detail .case-detail-bd .case-content ol {
    list-style: decimal outside;
    padding: 0 25px 0 45px;
    margin: 25px 0
}

.case-detail .case-detail-bd .case-content ol li {
    margin: 15px 0
}

.case-detail .case-detail-bd .case-content hr {
    width: 100%;
    height: 1px;
    margin: 30px 0;
    background-color: #ededed;
    border: none
}

.case-detail .case-detail-bd .case-content a {
    text-decoration: underline
}

.case-detail .case-detail-bd .case-content a:hover {
    text-decoration: none
}

.case-detail .case-detail-bd .case-content .case-usage a {
    font-size: 14px;
    margin-right: 30px
}

.case-detail .case-detail-bd .case-navigation {
    background: #fff;
    *zoom: 1;
    margin: 0 8%;
    padding: 20px 0 45px;
    border-top: 1px solid #ededed
}

.case-detail .case-detail-bd .case-navigation:after, .case-detail .case-detail-bd .case-navigation:before {
    display: table;
    content: ""
}

.case-detail .case-detail-bd .case-navigation:after {
    clear: both
}

.case-detail .case-detail-bd .case-navigation:after, .case-detail .case-detail-bd .case-navigation:before {
    display: table;
    content: ""
}

.case-detail .case-detail-bd .case-navigation:after {
    clear: both
}

.case-detail .case-detail-bd .case-navigation a {
    font-size: 16px;
    color: #8f8f8f
}

.case-detail .case-detail-bd .case-navigation a:hover {
    color: #008de8
}

.case-detail .case-detail-bd .case-navigation-prev {
    float: left
}

.case-detail .case-detail-bd .case-navigation-next {
    float: right
}

.case-detail .case_article .case_article_title h2 {
    font-size: 36px;
    line-height: 1.5;
    color: #313233;
    font-weight: 700
}

.case-detail .case_article .case_article_title span {
    display: inline-block;
    font-size: 16px;
    color: #626366;
    line-height: 24px
}

.case-detail .case_article .case_article_title img {
    width: 100%;
    margin-top: 48px;
    border-radius: 8px;
    border: 1px solid #e6e8ed
}

.case-detail .case_article .case_article_title .pic img {
    margin: 0;
    border: none;
    border-radius: 0
}

.case-detail .case_article .case_article_content {
    margin-top: 48px
}

.case-detail .case_article .case_article_content h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    color: #313233;
    margin-bottom: 20px;
    margin-top: 48px;
    text-align: justify
}

.case-detail .case_article .case_article_content h3:first-child {
    margin-top: 0
}

.case-detail .case_article .case_article_content p {
    font-size: 16px;
    line-height: 29px;
    color: #626366;
    text-align: justify
}

.case-detail .case_article .case_article_content h4 {
    font-weight: 700;
    color: #0b1531;
    font-size: 20px;
    line-height: 30px;
    margin: 40px 0 16px 0
}

.case-detail .case_article .case_article_content img {
    max-width: 100%
}

.case-detail .case_article .case_article_content strong {
    font-weight: 700;
    color: #313233
}

.case-relative {
    background: #fff
}

.case-relative .case-relative-hd {
    padding: 60px 0 50px
}

.newcase-wrapper {
    background-color: #fff
}

.newcase-detail {
    padding-top: 80px;
    width: 785px;
    text-align: left;
    margin: 0 auto
}

.down_sprite {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.re-link {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.re-pdf {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -46px
}

.re-ppt {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -92px
}

.re-word {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -138px
}

.re-excel {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -184px
}

.re-media {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -230px
}

.re-pic {
    display: inline-block;
    width: 40px;
    height: 46px;
    background-image: url(../images/new_case/down_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -276px
}

.ad_sprite {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.re-wechat {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.re-qq {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -40px
}

.re-video {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -80px
}

.re-new {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -120px
}

.re-kandian {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -160px
}

.re-music {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -200px
}

.re-tiyu {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -240px
}

.re-ylh {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -360px
}

.re-yx {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_sprite.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: 0 -320px
}

.re-other {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/new_case/ad_case_other.png);
    background-size: 40px auto;
    background-repeat: no-repeat
}

.recase-linkicon {
    vertical-align: text-bottom;
    margin-right: 6px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../images/new_case/re_link.png);
    background-size: 16px auto;
    background-repeat: no-repeat
}

.recase-downicon {
    vertical-align: text-bottom;
    margin-right: 4px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../images/new_case/re_down.png);
    background-size: 16px auto;
    background-repeat: no-repeat
}

.cre-arrow {
    margin-right: 6px;
    display: inline-block;
    width: 6px;
    height: 11px;
    background-image: url(../images/new_case/caseresource_arrow.png);
    background-size: 6px auto;
    background-repeat: no-repeat
}

.re-information {
    margin-top: 48px
}

.re-information .re-title {
    margin-bottom: 24px;
    font-size: 24px;
    color: #313233;
    font-weight: 700
}

.re-information .recase-card {
    display: inline-block;
    width: 100%;
    height: 94px;
    margin-bottom: 16px
}

.re-information .recase-card a {
    height: 100%;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fafbfc;
    border-radius: 8px;
    border: 1px solid #e6e8ed;
    transition: all .5s;
    font-size: 16px
}

.re-information .recase-card a:hover {
    box-shadow: 0 3px 5px 0 rgba(49, 50, 51, .05), 0 6px 15px rgba(49, 50, 51, .05)
}

.re-information .recase-card a:active {
    background-color: #f5f6f7;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .04)
}

.re-information .recase-card .recase-info .recase-right {
    vertical-align: super;
    display: inline-block;
    margin-left: 16px
}

.re-information .recase-card .recase-info .recase-right .recase-title {
    margin-bottom: 2px;
    color: #313233;
    font-size: 16px
}

.re-information .recase-card .recase-info .recase-right .recase-content {
    font-size: 14px;
    color: #939599
}

.re-information .recase-card .recase-control {
    font-size: 16px;
    color: #626366
}

.casead-resource {
    margin-top: 48px
}

.casead-resource .casead-title {
    margin-bottom: 24px;
    font-size: 24px;
    color: #313233;
    font-weight: 700
}

.casead-resource .casource-body {
    position: relative
}

.casead-resource .casource-body .casource-card {
    display: inline-block;
    width: 380px;
    height: 88px;
    margin: 0 16px 16px 0
}

.casead-resource .casource-body .casource-card:nth-child(2n) {
    margin: 0 0 16px 0
}

.casead-resource .casource-body .casource-card a {
    height: 100%;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fafbfc;
    border-radius: 8px;
    border: 1px solid #e6e8ed;
    transition: all .5s;
    font-size: 16px
}

.casead-resource .casource-body .casource-card a:hover {
    box-shadow: 0 3px 5px 0 rgba(49, 50, 51, .05), 0 6px 15px rgba(49, 50, 51, .05);
    border-color: #dfe1e6
}

.casead-resource .casource-body .casource-card a:active {
    background-color: #f5f6f7
}

.casead-resource .casource-body .casource-card .cresource-info {
    color: #313233;
    display: flex;
    align-items: center
}

.casead-resource .casource-body .casource-card .cresource-info .recase-right {
    display: inline-block;
    margin-left: 16px
}

.casead-resource .casource-body .casource-card .cresource-info .recase-right .recase-title {
    width: 230px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.casead-resource {
    margin-top: 48px;
    margin-bottom: 80px
}

.casead-resource .casead-title {
    margin-bottom: 24px;
    font-size: 24px;
    color: #313233;
    font-weight: 700
}

.casead-resource .casead-tagblock {
    position: relative;
    font-size: 0
}

.casead-resource .casead-tagblock .casead-tag {
    display: inline-block;
    position: relative;
    margin-right: 16px;
    margin-bottom: 16px;
    padding: 8px 20px;
    font-size: 16px;
    color: #313233;
    background-color: #fafafb;
    border: 1px solid #e6e8ed;
    border-radius: 20px;
    transition: all .5s
}

.casead-resource .casead-tagblock .casead-tag:hover {
    box-shadow: 0 3px 5px 0 rgba(49, 50, 51, .05), 0 6px 15px rgba(49, 50, 51, .05)
}

.casead-resource .casead-tagblock .casead-tag:active {
    background-color: #f5f6f7;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .04)
}

.aboutnewcase-block {
    padding: 80px 0;
    text-align: center;
    background-color: #fafbfc
}

.aboutnewcase-block .aboutnewcase-main {
    display: inline-block;
    width: 1168px;
    text-align: left
}

.aboutnewcase-block .aboutnewcase-main .about-title {
    margin-bottom: 24px;
    font-size: 24px;
    padding-left: 17px;
    color: #313233;
    font-weight: 700
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock {
    position: relative;
    display: flex;
    justify-content: left;
    width: 1168px
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-pre {
    position: absolute;
    left: -56px;
    top: 50%;
    z-index: 50;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-pre a {
    display: inline-block;
    width: 48px;
    height: 48px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-pre a i {
    border-radius: 50%;
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url(../images/new_case/select_next.png);
    background-size: 48px auto;
    background-repeat: no-repeat
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-pre a:hover i {
    box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, .04);
    background-image: url(../images/new_case/select_nexthover.png)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-pre a:active i {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .04);
    background-image: url(../images/new_case/select_nextactive.png)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-next {
    position: absolute;
    right: -56px;
    top: 50%;
    z-index: 50;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-next a {
    display: inline-block;
    width: 48px;
    height: 48px
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-next a i {
    border-radius: 50%;
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url(../images/new_case/select_next.png);
    background-size: 48px auto;
    background-repeat: no-repeat
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-next a:hover i {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .04);
    background-image: url(../images/new_case/select_nexthover.png)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-next a:active i {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .04);
    background-image: url(../images/new_case/select_nextactive.png)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card {
    display: inline-block;
    width: 258px;
    box-sizing: border-box;
    border: 1px solid #e6e8ed;
    border-radius: 8px;
    cursor: pointer;
    transition: all .5s;
    overflow: hidden;
    background-color: #fff;
    margin: 0 16px;
    position: relative
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card:hover {
    box-shadow: 0 3px 5px 0 rgba(49, 50, 51, .05), 0 6px 15px rgba(49, 50, 51, .05)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card:active {
    background-color: #fafbfc;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .04)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-top {
    position: relative;
    overflow: hidden;
    width: 258px;
    height: 145px
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-top img {
    width: 100%
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-top .casetop-name {
    position: absolute;
    right: 22px;
    left: 22px;
    bottom: 16px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    z-index: 10;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-top:before {
    content: "";
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
    z-index: 5
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom {
    padding: 24px
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom .casebottom-name {
    margin-bottom: 34px;
    line-height: 1.5;
    font-size: 16px;
    color: #313233;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom .casebottom-tagblock {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 24px;
    bottom: 24px;
    right: 24px
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom .casebottom-tagblock .casebttom-tag {
    display: inline;
    margin-right: 6px;
    margin-bottom: 6px;
    padding-right: 6px;
    font-size: 12px;
    color: #939599;
    position: relative
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom .casebottom-tagblock .casebttom-tag:after {
    content: "";
    position: absolute;
    height: 12px;
    width: 1px;
    background: #edeff2;
    right: 0;
    top: 56%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom .casebottom-tagblock .casebttom-tag + .casebttom-tag {
    margin-left: -1px
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom .casebottom-tagblock .casebttom-tag:last-of-type {
    padding-right: 0;
    border: none
}

.aboutnewcase-block .aboutnewcase-main .aboutcase-cardblock .aboutcase-card .aboutcase-bottom .casebottom-tagblock .casebttom-tag:last-of-type:after {
    display: none
}

.list-paddingleft-2 {
    padding-left: 16px
}

.info strong {
    font-weight: 700
}

.m-ul-case-layout {
    overflow-y: auto
}

.case_article_content img {
    border-radius: 8px
}

ul[style="list-style-type: disc;"] li {
    position: relative
}

ul[style="list-style-type: disc;"] li:before {
    content: "";
    height: 7px;
    width: 7px;
    background: #626366;
    position: absolute;
    border-radius: 50%;
    left: -17px;
    top: 12px
}

.bom span {
    font-size: 12px;
    color: #939599
}

.bom span:last-child {
    float: right
}

.source {
    padding-top: 90px;
    color: #000;
    padding-bottom: 75px
}

.source .source-hd {
    text-align: center
}

.source .source-hd p {
    font-size: 16px;
    line-height: 2;
    padding: 15px 22% 80px
}

.source .source-bd .source-item {
    margin-bottom: 30px
}

.source .source-bd .source-item .column {
    background: #fff;
    border: 1px solid #efefef;
    position: relative;
    transition: border-color .6s;
    border-radius: 2px
}

.source .source-bd .source-item .column > a {
    color: #000;
    display: block;
    position: relative;
    padding: 128px 38px 40px
}

.source .source-bd .source-item .column:before {
    content: "";
    width: 29px;
    height: 27px;
    position: absolute;
    right: 40px;
    bottom: 40px;
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: -35px -74px
}

.source .source-bd .source-item .column:hover {
    border-color: #008de8
}

.source .source-bd .source-item .column:hover:before {
    background-position: 0 -74px
}

.source .source-bd .source-item .column .icon {
    position: absolute;
    left: 38px;
    top: 34px;
    background-image: url(../images/icon/icon-all.png);
    background-image: -webkit-image-set(url(../images/icon/icon-all.png) 1x, url(../images/icon/icon-all@2x.png) 2x);
    background-repeat: no-repeat
}

.source .source-bd .source-item .column .icon.icon-wechat {
    background-position: -1070px 0;
    width: 68px;
    height: 56px
}

.source .source-bd .source-item .column .icon.icon-ad {
    background-position: -1225px 0;
    width: 65px;
    height: 58px;
    top: 42px
}

.source .source-bd .source-item .column .icon.icon-app {
    background-position: -221px 0;
    width: 53px;
    height: 53px
}

.source .source-bd .source-item .column .icon.icon-browser {
    background-position: -280px 0;
    width: 84px;
    height: 68px
}

.source .source-bd .source-item .column .icon.icon-qq {
    background-position: -1008px 0;
    width: 54px;
    height: 58px
}

.source .source-bd .source-item .column .icon.icon-qzone {
    background-position: -941px 0;
    width: 59px;
    height: 57px
}

.source .source-bd .source-item .column .icon.icon-news {
    width: 54px;
    height: 54px;
    background-position: -1150px 0
}

.source .source-bd .source-item .column .icon.icon-video {
    width: 54px;
    height: 50px;
    background-position: -547px 0
}

.source .source-bd .source-item .column .icon.icon-ttkb {
    width: 50px;
    height: 50px;
    background-position: -606px 0
}

.source .source-bd .source-item .column .icon.icon-DMP {
    width: 56px;
    height: 56px;
    background-position: -661px 0
}

.source .source-bd .source-item .column .icon.icon-ocpa {
    width: 60px;
    height: 61px;
    background-position: -722px 0
}

.source .source-bd .source-item .column .icon.icon-commodity {
    width: 62px;
    height: 64px;
    background-position: -788px 0
}

.source .source-bd .source-item .column .icon.icon-tag {
    width: 77px;
    height: 62px;
    background-position: -855px 0
}

.source .source-bd .source-item .source-title {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 20px
}

.source .source-bd .source-item .source-text {
    font-size: 14px;
    line-height: 2;
    min-height: 10em;
    padding-bottom: 10px
}

.icon-steward {
    position: absolute;
    left: 38px;
    top: 34px;
    display: inline-block;
    background-image: url(../images/icon/steward.png);
    background-image: -webkit-image-set(url(../images/icon/steward.png) 1x);
    background-repeat: no-repeat;
    background-size: 64px;
    width: 64px;
    height: 64px
}

.icon-chart {
    position: absolute;
    left: 38px;
    top: 34px;
    display: inline-block;
    background-image: url(../images/icon/cps.png);
    background-image: -webkit-image-set(url(../images/icon/cps.png) 1x);
    background-repeat: no-repeat;
    background-size: 64px;
    width: 64px;
    height: 60px
}

.qq-mobile-scene .scene-shopping .bg-decor {
    right: 6px;
    top: 60px
}

.qq-mobile-scene .scene-shopping .bg-decor:after, .qq-mobile-scene .scene-shopping .bg-decor:before {
    right: 0;
    color: #008de8;
    width: 100px
}

.qq-mobile-scene .scene-shopping .bg-decor:before {
    top: 0;
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg)
}

.qq-mobile-scene .scene-shopping .bg-decor:after {
    bottom: 2px;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg)
}

.qq-mobile-scene .scene-shopping .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.82);
    -ms-transform: translateX(0) scale(.82);
    transform: translateX(0) scale(.82)
}

.qq-mobile-scene .scene-shopping.section-active .bg-capt {
    -webkit-transform: translateX(-94px) scale(1);
    -ms-transform: translateX(-94px) scale(1);
    transform: translateX(-94px) scale(1)
}

.qq-mobile-scene .scene-shopping .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.82);
    -ms-transform: scale(.82);
    transform: scale(.82);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qq-mobile-scene .scene-bag .bg-decor {
    left: 15px;
    top: 342px
}

.qq-mobile-scene .scene-bag .bg-decor:after, .qq-mobile-scene .scene-bag .bg-decor:before {
    left: 0;
    color: #e72431;
    width: 90px
}

.qq-mobile-scene .scene-bag .bg-decor:before {
    top: -2px;
    -webkit-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    transform: rotate(-6deg)
}

.qq-mobile-scene .scene-bag .bg-decor:after {
    bottom: 0;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg)
}

.qq-mobile-scene .scene-bag .bg-capt {
    -webkit-transform: translateX(0) scale(.78);
    -ms-transform: translateX(0) scale(.78);
    transform: translateX(0) scale(.78);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-mobile-scene .scene-bag.section-active .bg-capt {
    -webkit-transform: translateX(88px) scale(1);
    -ms-transform: translateX(88px) scale(1);
    transform: translateX(88px) scale(1)
}

.qq-mobile-scene .scene-bag .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.77);
    -ms-transform: scale(.77);
    transform: scale(.77);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-mobile-scene .scene-hot .bg-decor {
    right: 16px;
    top: 143px
}

.qq-mobile-scene .scene-hot .bg-decor:after, .qq-mobile-scene .scene-hot .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 90px
}

.qq-mobile-scene .scene-hot .bg-decor:before {
    top: -3px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg)
}

.qq-mobile-scene .scene-hot .bg-decor:after {
    bottom: -2px;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.qq-mobile-scene .scene-hot .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.8);
    -ms-transform: translateX(0) scale(.8);
    transform: translateX(0) scale(.8)
}

.qq-mobile-scene .scene-hot.section-active .bg-capt {
    -webkit-transform: translateX(-88px) scale(1);
    -ms-transform: translateX(-88px) scale(1);
    transform: translateX(-88px) scale(1)
}

.qq-mobile-scene .scene-hot .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.79);
    -ms-transform: scale(.79);
    transform: scale(.79);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qq-mobile-scene .scene-banner .bg-decor {
    left: 10px;
    top: 286px
}

.qq-mobile-scene .scene-banner .bg-decor:after, .qq-mobile-scene .scene-banner .bg-decor:before {
    left: 0;
    color: #0ea74a;
    width: 90px
}

.qq-mobile-scene .scene-banner .bg-decor:before {
    top: -1px;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg)
}

.qq-mobile-scene .scene-banner .bg-decor:after {
    bottom: 1px;
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg)
}

.qq-mobile-scene .scene-banner .bg-capt {
    -webkit-transform: translateX(0) scale(.8);
    -ms-transform: translateX(0) scale(.8);
    transform: translateX(0) scale(.8);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-mobile-scene .scene-banner.section-active .bg-capt {
    -webkit-transform: translateX(88px) scale(1);
    -ms-transform: translateX(88px) scale(1);
    transform: translateX(88px) scale(1)
}

.qq-mobile-scene .scene-banner .bg-shade {
    background: #0ea74a;
    -webkit-transform: scale(.79);
    -ms-transform: scale(.79);
    transform: scale(.79);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-mobile-scene .scene-weather .bg-decor {
    right: 10px;
    top: 318px
}

.qq-mobile-scene .scene-weather .bg-decor:after, .qq-mobile-scene .scene-weather .bg-decor:before {
    right: 0;
    color: #008de8;
    width: 90px
}

.qq-mobile-scene .scene-weather .bg-decor:before {
    top: -3px;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg)
}

.qq-mobile-scene .scene-weather .bg-decor:after {
    bottom: -1px;
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg)
}

.qq-mobile-scene .scene-weather .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.8);
    -ms-transform: translateX(0) scale(.8);
    transform: translateX(0) scale(.8)
}

.qq-mobile-scene .scene-weather.section-active .bg-capt {
    -webkit-transform: translateX(-88px) scale(1);
    -ms-transform: translateX(-88px) scale(1);
    transform: translateX(-88px) scale(1)
}

.qq-mobile-scene .scene-weather .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qq-mobile-scene .scene-interest .bg-decor {
    left: 12px;
    top: 205px
}

.qq-mobile-scene .scene-interest .bg-decor:after, .qq-mobile-scene .scene-interest .bg-decor:before {
    left: 0;
    color: #e72431;
    width: 95px;
    left: -2px
}

.qq-mobile-scene .scene-interest .bg-decor:before {
    top: 12px;
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg)
}

.qq-mobile-scene .scene-interest .bg-decor:after {
    bottom: 14px;
    -webkit-transform: rotate(23deg);
    -ms-transform: rotate(23deg);
    transform: rotate(23deg)
}

.qq-mobile-scene .scene-interest .bg-capt {
    -webkit-transform: translateX(0) scale(.78);
    -ms-transform: translateX(0) scale(.78);
    transform: translateX(0) scale(.78);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-mobile-scene .scene-interest.section-active .bg-capt {
    -webkit-transform: translateX(88px) scale(1);
    -ms-transform: translateX(88px) scale(1);
    transform: translateX(88px) scale(1)
}

.qq-mobile-scene .scene-interest .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.497);
    -ms-transform: scale(.497);
    transform: scale(.497);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-mobile-scene .scene-nearby .bg-decor {
    right: 7px;
    top: 210px
}

.qq-mobile-scene .scene-nearby .bg-decor:after, .qq-mobile-scene .scene-nearby .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 100px
}

.qq-mobile-scene .scene-nearby .bg-decor:before {
    top: -4px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg)
}

.qq-mobile-scene .scene-nearby .bg-decor:after {
    bottom: -2px;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.qq-mobile-scene .scene-nearby .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.82);
    -ms-transform: translateX(0) scale(.82);
    transform: translateX(0) scale(.82)
}

.qq-mobile-scene .scene-nearby.section-active .bg-capt {
    -webkit-transform: translateX(-94px) scale(1);
    -ms-transform: translateX(-94px) scale(1);
    transform: translateX(-94px) scale(1)
}

.qq-mobile-scene .scene-nearby .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.81);
    -ms-transform: scale(.81);
    transform: scale(.81);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qq-pc-scene {
    padding-bottom: 90px
}

.qq-pc-scene .scene-item {
    padding: 90px 110px 0
}

.qq-pc-scene .scene-text {
    height: 318px;
    padding-left: 60px
}

.qq-pc-scene .scene-text .text-erea {
    *padding-top: 116px
}

.qq-pc-scene .scene-banner .bg-decor {
    left: 238px;
    top: 6px
}

.qq-pc-scene .scene-banner .bg-decor:after, .qq-pc-scene .scene-banner .bg-decor:before {
    left: -2px;
    width: 46px;
    color: #008de8
}

.qq-pc-scene .scene-banner .bg-decor:before {
    top: 4px;
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg)
}

.qq-pc-scene .scene-banner .bg-decor:after {
    bottom: 4px;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg)
}

.qq-pc-scene .scene-banner .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.817);
    -ms-transform: translateX(0) scale(.817);
    transform: translateX(0) scale(.817)
}

.qq-pc-scene .scene-banner.section-active .bg-capt {
    -webkit-transform: translateX(40px) scale(1);
    -ms-transform: translateX(40px) scale(1);
    transform: translateX(40px) scale(1)
}

.qq-pc-scene .scene-banner .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.81);
    -ms-transform: scale(.81);
    transform: scale(.81);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-pc-scene .scene-window .bg-decor {
    left: 96px;
    top: 198px
}

.qq-pc-scene .scene-window .bg-decor:after, .qq-pc-scene .scene-window .bg-decor:before {
    left: 0;
    width: 44px;
    color: #e72431
}

.qq-pc-scene .scene-window .bg-decor:before {
    top: -1px;
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg)
}

.qq-pc-scene .scene-window .bg-decor:after {
    bottom: 0;
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg)
}

.qq-pc-scene .scene-window .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.4);
    -ms-transform: translateX(0) scale(.4);
    transform: translateX(0) scale(.4)
}

.qq-pc-scene .scene-window.section-active .bg-capt {
    -webkit-transform: translateX(40px) scale(1);
    -ms-transform: translateX(40px) scale(1);
    transform: translateX(40px) scale(1)
}

.qq-pc-scene .scene-window .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.36);
    -ms-transform: scale(.36);
    transform: scale(.36);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-pc-scene .scene-tips .bg-decor {
    right: 0;
    bottom: -14px
}

.qq-pc-scene .scene-tips .bg-decor:after, .qq-pc-scene .scene-tips .bg-decor:before {
    width: 50px;
    color: #fbc422;
    right: 0
}

.qq-pc-scene .scene-tips .bg-decor:before {
    top: -1px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg)
}

.qq-pc-scene .scene-tips .bg-decor:after {
    bottom: 1px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg)
}

.qq-pc-scene .scene-tips .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.6);
    -ms-transform: translateX(0) scale(.6);
    transform: translateX(0) scale(.6)
}

.qq-pc-scene .scene-tips.section-active .bg-capt {
    -webkit-transform: translateX(-48px) scale(1);
    -ms-transform: translateX(-48px) scale(1);
    transform: translateX(-48px) scale(1)
}

.qq-pc-scene .scene-tips .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.6);
    -ms-transform: scale(.6);
    transform: scale(.6);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qq-pc-scene .scene-announce .bg-decor {
    left: 284px;
    top: 48px
}

.qq-pc-scene .scene-announce .bg-decor:after, .qq-pc-scene .scene-announce .bg-decor:before {
    left: 0;
    width: 42px;
    color: #0ea74a
}

.qq-pc-scene .scene-announce .bg-decor:before {
    top: -1px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg)
}

.qq-pc-scene .scene-announce .bg-decor:after {
    bottom: 1px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg)
}

.qq-pc-scene .scene-announce .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.6);
    -ms-transform: translateX(0) scale(.6);
    transform: translateX(0) scale(.6)
}

.qq-pc-scene .scene-announce.section-active .bg-capt {
    -webkit-transform: translateX(40px) scale(1);
    -ms-transform: translateX(40px) scale(1);
    transform: translateX(40px) scale(1)
}

.qq-pc-scene .scene-announce .bg-shade {
    background: #0ea74a;
    -webkit-transform: scale(.6);
    -ms-transform: scale(.6);
    transform: scale(.6);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-pc-scene .scene-qun .bg-decor {
    right: 54px;
    bottom: 136px
}

.qq-pc-scene .scene-qun .bg-decor:after, .qq-pc-scene .scene-qun .bg-decor:before {
    bottom: 2px;
    width: 58px;
    color: #008de8
}

.qq-pc-scene .scene-qun .bg-decor:before {
    right: -2px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg)
}

.qq-pc-scene .scene-qun .bg-decor:after {
    left: -1px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg)
}

.qq-pc-scene .scene-qun .bg-capt {
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transform: translateY(0) scale(.36);
    -ms-transform: translateY(0) scale(.36);
    transform: translateY(0) scale(.36)
}

.qq-pc-scene .scene-qun.section-active .bg-capt {
    -webkit-transform: translateY(-14px) scale(1);
    -ms-transform: translateY(-14px) scale(1);
    transform: translateY(-14px) scale(1)
}

.qq-pc-scene .scene-qun .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.36);
    -ms-transform: scale(.36);
    transform: scale(.36);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

.qq-pc-scene .scene-qqshow .bg-decor {
    left: 268px;
    top: 42px
}

.qq-pc-scene .scene-qqshow .bg-decor:after, .qq-pc-scene .scene-qqshow .bg-decor:before {
    left: 0;
    width: 48px;
    color: #e72431
}

.qq-pc-scene .scene-qqshow .bg-decor:before {
    top: -2px;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg)
}

.qq-pc-scene .scene-qqshow .bg-decor:after {
    bottom: -1px;
    -webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg)
}

.qq-pc-scene .scene-qqshow .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.88);
    -ms-transform: translateX(0) scale(.88);
    transform: translateX(0) scale(.88)
}

.qq-pc-scene .scene-qqshow.section-active .bg-capt {
    -webkit-transform: translateX(40px) scale(1);
    -ms-transform: translateX(40px) scale(1);
    transform: translateX(40px) scale(1)
}

.qq-pc-scene .scene-qqshow .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.88);
    -ms-transform: scale(.88);
    transform: scale(.88);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qq-mobile-scene-new .scene-pic {
    overflow: hidden
}

.qzone-mobile-scene .scene-text .most {
    font-size: 16px;
    color: #999;
    margin-bottom: 12px
}

.qzone-mobile-scene .scene-mix .bg-decor {
    right: 0;
    top: 84px
}

.qzone-mobile-scene .scene-mix .bg-decor:after, .qzone-mobile-scene .scene-mix .bg-decor:before {
    right: 0;
    color: #008de8;
    width: 100px
}

.qzone-mobile-scene .scene-mix .bg-decor:before {
    top: 4px;
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg)
}

.qzone-mobile-scene .scene-mix .bg-decor:after {
    bottom: 5px;
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg)
}

.qzone-mobile-scene .scene-mix .bg-capt {
    -webkit-transform: translateX(0) scale(.865);
    -ms-transform: translateX(0) scale(.865);
    transform: translateX(0) scale(.865);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-mobile-scene .scene-mix.section-active .bg-capt {
    -webkit-transform: translateX(-100px) scale(1);
    -ms-transform: translateX(-100px) scale(1);
    transform: translateX(-100px) scale(1)
}

.qzone-mobile-scene .scene-mix .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.86);
    -ms-transform: scale(.86);
    transform: scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-mobile-scene .scene-video .bg-decor {
    left: 0;
    top: 65px
}

.qzone-mobile-scene .scene-video .bg-decor:after, .qzone-mobile-scene .scene-video .bg-decor:before {
    left: 0;
    color: #e72431;
    width: 100px
}

.qzone-mobile-scene .scene-video .bg-decor:before {
    top: 5px;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg)
}

.qzone-mobile-scene .scene-video .bg-decor:after {
    bottom: 8px;
    -webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg)
}

.qzone-mobile-scene .scene-video .bg-capt {
    -webkit-transform: translateX(0) scale(.862);
    -ms-transform: translateX(0) scale(.862);
    transform: translateX(0) scale(.862);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-mobile-scene .scene-video.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.qzone-mobile-scene .scene-video .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-mobile-scene .scene-pop .bg-decor {
    right: 0;
    top: 84px
}

.qzone-mobile-scene .scene-pop .bg-decor:after, .qzone-mobile-scene .scene-pop .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 100px
}

.qzone-mobile-scene .scene-pop .bg-decor:before {
    top: 5px;
    -webkit-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    transform: rotate(13deg)
}

.qzone-mobile-scene .scene-pop .bg-decor:after {
    bottom: 8px;
    -webkit-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    transform: rotate(-13deg)
}

.qzone-mobile-scene .scene-pop .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-mobile-scene .scene-pop.section-active .bg-capt {
    -webkit-transform: translateX(-100px) scale(1);
    -ms-transform: translateX(-100px) scale(1);
    transform: translateX(-100px) scale(1)
}

.qzone-mobile-scene .scene-pop .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-mobile-scene .scene-tab .bg-decor {
    left: 0;
    top: 65px
}

.qzone-mobile-scene .scene-tab .bg-decor:after, .qzone-mobile-scene .scene-tab .bg-decor:before {
    left: 0;
    color: #0ea74a;
    width: 100px
}

.qzone-mobile-scene .scene-tab .bg-decor:before {
    top: 6px;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg)
}

.qzone-mobile-scene .scene-tab .bg-decor:after {
    bottom: 8px;
    -webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg)
}

.qzone-mobile-scene .scene-tab .bg-capt {
    -webkit-transform: translateX(0) scale(.862);
    -ms-transform: translateX(0) scale(.862);
    transform: translateX(0) scale(.862);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-mobile-scene .scene-tab.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.qzone-mobile-scene .scene-tab .bg-shade {
    background: #0ea74a;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-mobile-scene .scene-brand .bg-decor {
    right: 0;
    top: 84px
}

.qzone-mobile-scene .scene-brand .bg-decor:after, .qzone-mobile-scene .scene-brand .bg-decor:before {
    right: -3px;
    color: #008de8;
    width: 106px
}

.qzone-mobile-scene .scene-brand .bg-decor:before {
    top: 8px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg)
}

.qzone-mobile-scene .scene-brand .bg-decor:after {
    bottom: 10px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg)
}

.qzone-mobile-scene .scene-brand .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-mobile-scene .scene-brand.section-active .bg-capt {
    -webkit-transform: translateX(-100px) scale(1);
    -ms-transform: translateX(-100px) scale(1);
    transform: translateX(-100px) scale(1)
}

.qzone-mobile-scene .scene-brand .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-mobile-scene .scene-micro .bg-decor {
    left: 0;
    top: 65px
}

.qzone-mobile-scene .scene-micro .bg-decor:after, .qzone-mobile-scene .scene-micro .bg-decor:before {
    left: -2px;
    color: #e72431;
    width: 106px
}

.qzone-mobile-scene .scene-micro .bg-decor:before {
    top: 10px;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg)
}

.qzone-mobile-scene .scene-micro .bg-decor:after {
    bottom: 12px;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg)
}

.qzone-mobile-scene .scene-micro .bg-capt {
    -webkit-transform: translateX(0) scale(.862);
    -ms-transform: translateX(0) scale(.862);
    transform: translateX(0) scale(.862);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-mobile-scene .scene-micro.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.qzone-mobile-scene .scene-micro .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-pc-scene {
    padding-bottom: 90px
}

.qzone-pc-scene .scene-item {
    padding: 90px 110px 0
}

.qzone-pc-scene .scene-text {
    height: 318px;
    padding-left: 60px
}

.qzone-pc-scene .scene-text .text-erea {
    *padding-top: 116px
}

.qzone-pc-scene .scene-dynamics .decor1 {
    right: 148px;
    top: 140px
}

.qzone-pc-scene .scene-dynamics .decor1:after, .qzone-pc-scene .scene-dynamics .decor1:before {
    right: 0;
    color: #008de8;
    width: 45px;
    transition: all .8s 1.8s
}

.qzone-pc-scene .scene-dynamics .decor1:before {
    top: -1px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg)
}

.qzone-pc-scene .scene-dynamics .decor1:after {
    bottom: 1px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg)
}

.qzone-pc-scene .scene-dynamics .decor1 .bg-capt {
    -webkit-transform: translateX(0) scale(.6);
    -ms-transform: translateX(0) scale(.6);
    transform: translateX(0) scale(.6);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    transition: all .8s 1.2s
}

.qzone-pc-scene .scene-dynamics .decor1 .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.6);
    -ms-transform: scale(.6);
    transform: scale(.6);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-pc-scene .scene-dynamics.section-active .decor1 .bg-capt {
    -webkit-transform: translateX(-42px) scale(1);
    -ms-transform: translateX(-42px) scale(1);
    transform: translateX(-42px) scale(1)
}

.qzone-pc-scene .scene-dynamics .decor2 {
    left: 272px;
    top: 152px
}

.qzone-pc-scene .scene-dynamics .decor2:after, .qzone-pc-scene .scene-dynamics .decor2:before {
    left: 0;
    color: #e72431;
    width: 24px;
    font-size: 12px
}

.qzone-pc-scene .scene-dynamics .decor2:before {
    top: -3px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg)
}

.qzone-pc-scene .scene-dynamics .decor2:after {
    left: 0;
    bottom: -2px;
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg)
}

.qzone-pc-scene .scene-dynamics .decor2 .bg-capt {
    -webkit-transform: translateX(0) scale(.6);
    -ms-transform: translateX(0) scale(.6);
    transform: translateX(0) scale(.6);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-pc-scene .scene-dynamics .decor2 .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.56);
    -ms-transform: scale(.56);
    transform: scale(.56);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-pc-scene .scene-dynamics.section-active .decor2 .bg-capt {
    -webkit-transform: translateX(20px) scale(1);
    -ms-transform: translateX(20px) scale(1);
    transform: translateX(20px) scale(1)
}

.qzone-pc-scene .scene-personal .decor1 {
    right: 288px;
    top: 74px
}

.qzone-pc-scene .scene-personal .decor1:after, .qzone-pc-scene .scene-personal .decor1:before {
    right: -8px;
    color: #0ea74a;
    width: 45px;
    transition: all .8s 1.8s
}

.qzone-pc-scene .scene-personal .decor1:before {
    top: 10px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg)
}

.qzone-pc-scene .scene-personal .decor1:after {
    bottom: 10px;
    -webkit-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg)
}

.qzone-pc-scene .scene-personal .decor1 .bg-capt {
    -webkit-transform: translateX(0) scale(.7);
    -ms-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    transition: all .8s 1.2s
}

.qzone-pc-scene .scene-personal .decor1 .bg-shade {
    background: #0ea74a;
    -webkit-transform: scale(.6);
    -ms-transform: scale(.6);
    transform: scale(.6);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.qzone-pc-scene .scene-personal.section-active .decor1 .bg-capt {
    -webkit-transform: translateX(-28px) scale(1);
    -ms-transform: translateX(-28px) scale(1);
    transform: translateX(-28px) scale(1)
}

.qzone-pc-scene .scene-personal .decor2 {
    left: 270px;
    top: 2px
}

.qzone-pc-scene .scene-personal .decor2:after, .qzone-pc-scene .scene-personal .decor2:before {
    left: -2px;
    color: #fbc422;
    width: 26px;
    font-size: 12px
}

.qzone-pc-scene .scene-personal .decor2:before {
    top: 0;
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg)
}

.qzone-pc-scene .scene-personal .decor2:after {
    left: 0;
    bottom: 1px;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg)
}

.qzone-pc-scene .scene-personal .decor2 .bg-capt {
    -webkit-transform: translateX(0) scale(.6);
    -ms-transform: translateX(0) scale(.6);
    transform: translateX(0) scale(.6);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-pc-scene .scene-personal .decor2 .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.54);
    -ms-transform: scale(.54);
    transform: scale(.54);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.qzone-pc-scene .scene-personal.section-active .decor2 .bg-capt {
    -webkit-transform: translateX(20px) scale(1);
    -ms-transform: translateX(20px) scale(1);
    transform: translateX(20px) scale(1)
}

.scene.scene-desktop .scene-pic {
    width: 504px;
    height: 278px
}

.scene.scene-desktop .scene-text {
    height: 400px
}

.scene.scene-desktop .scene-text h4 {
    margin-top: -80px
}

.title-tab {
    margin-bottom: 80px
}

.ad-shape {
    background: #fff;
    padding: 85px 0 70px;
    width: 100%;
    overflow: hidden
}

.shape-con {
    width: 930px;
    margin: 0 auto;
    padding-top: 150px;
    position: relative
}

.shape-list {
    position: relative;
    z-index: 3
}

.shape-list li {
    *zoom: 1;
    margin-bottom: 40px
}

.shape-list li:after, .shape-list li:before {
    display: table;
    content: ""
}

.shape-list li:after {
    clear: both
}

.shape-list li:after, .shape-list li:before {
    display: table;
    content: ""
}

.shape-list li:after {
    clear: both
}

.shape-list li .shape-pic {
    display: block;
    float: left;
    margin-left: 150px;
    box-shadow: 1px 0 8px rgba(0, 0, 0, .3)
}

.shape-list li .shape-pic img {
    display: block;
    width: 420px;
    height: 113px
}

.shape-list li .shape-text {
    width: 300px;
    float: right
}

.shape-list li .shape-text h4 {
    font-size: 26px;
    color: #333;
    margin: 10px 0
}

.shape-list li .shape-text > p {
    font-size: 16px;
    color: #000
}

.shape-phone {
    position: absolute;
    left: 50%;
    margin-left: -698px;
    top: 60px;
    width: 321px;
    height: 465px;
    background: url(../images/source/weixin/shape-phone.jpg) no-repeat
}

.shape-line {
    position: absolute;
    left: 50%;
    margin-left: -408px;
    top: 206px;
    width: 122px;
    height: 309px;
    background: url(../images/source/weixin/shape-line.png) no-repeat
}

.description-list {
    margin-top: 65px;
    text-align: center;
    color: #000
}

.description-list li h4 {
    font-size: 26px;
    margin: 30px 0 10px
}

.description-list li p {
    font-size: 16px;
    line-height: 2
}

.moments-description {
    width: 930px;
    margin-left: auto;
    margin-right: auto
}

.moments-scene {
    padding: 90px 0 0;
    background-color: transparent
}

.moments-scene .scene-text {
    height: 521px
}

.moments-scene .scene-bendi .bg-decor:after, .moments-scene .scene-bendi .bg-decor:before {
    display: none
}

.moments-scene .scene-bendi .scene-pic {
    overflow: hidden
}

.moments-scene .scene-tgy .bg-decor {
    left: 53px;
    top: 110px
}

.moments-scene .scene-tgy .bg-decor:after, .moments-scene .scene-tgy .bg-decor:before {
    color: #e72431
}

.moments-scene .scene-tgy .bg-decor:before {
    width: 170px;
    left: -31px;
    top: -75px;
    -webkit-transform: rotate(-52deg);
    -ms-transform: rotate(-52deg);
    transform: rotate(-52deg)
}

.moments-scene .scene-tgy .bg-decor:after {
    left: -46px;
    width: 200px;
    bottom: 214px;
    -webkit-transform: rotate(59deg);
    -ms-transform: rotate(59deg);
    transform: rotate(59deg)
}

.moments-scene .scene-tgy .bg-capt {
    height: 260.19417476px;
    overflow: hidden;
    transition: all .8s;
    -webkit-transform: scale(.515);
    -ms-transform: scale(.515);
    transform: scale(.515);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
}

.moments-scene .scene-tgy .bg-shade {
    background: #e72431;
    width: 134px;
    height: 134px
}

.moments-scene .scene-tgy.section-active .bg-capt {
    height: 440px;
    -webkit-transform: scale(1) translate(105px, -135px);
    -ms-transform: scale(1) translate(105px, -135px);
    transform: scale(1) translate(105px, -135px)
}

.moments-scene .scene-sp .bg-decor {
    right: 0;
    top: 120px
}

.moments-scene .scene-sp .bg-decor:after, .moments-scene .scene-sp .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 100px
}

.moments-scene .scene-sp .bg-decor:before {
    top: 6px;
    -webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg)
}

.moments-scene .scene-sp .bg-decor:after {
    bottom: 8px;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg)
}

.moments-scene .scene-sp .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.moments-scene .scene-sp.section-active .bg-capt {
    -webkit-transform: translateX(-100px) scale(1);
    -ms-transform: translateX(-100px) scale(1);
    transform: translateX(-100px) scale(1)
}

.moments-scene .scene-sp .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.moments-scene .scene-tw .bg-decor {
    left: 0;
    top: 120px
}

.moments-scene .scene-tw .bg-decor:after, .moments-scene .scene-tw .bg-decor:before {
    left: 0;
    color: #0ea74a;
    width: 100px
}

.moments-scene .scene-tw .bg-decor:before {
    top: 6px;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg)
}

.moments-scene .scene-tw .bg-decor:after {
    bottom: 8px;
    -webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg)
}

.moments-scene .scene-tw .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.moments-scene .scene-tw.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.moments-scene .scene-tw .bg-shade {
    background: #0ea74a;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.purchase-way {
    padding-top: 55px
}

.purchase-content {
    width: 1065px;
    margin: 0 auto;
    padding-top: 108px;
    padding-bottom: 150px
}

.description-banner {
    text-align: center
}

.tsa-description {
    padding: 90px 0;
    background-color: #fff;
    margin-top: 0
}

.tsa-description h3.title {
    text-align: center;
    font-size: 38px;
    color: #000;
    margin-bottom: 60px
}

.tsa-description li p {
    display: inline-block;
    width: 270px;
    text-align: left
}

.tsa-scene {
    background-color: transparent;
    padding-top: 90px
}

.tsa-scene .tsa-here-word {
    font-size: 16px;
    color: #000;
    text-align: center;
    margin-top: 35px
}

.tsa-scene .scene-orignal .bg-decor {
    right: 0;
    top: 84px
}

.tsa-scene .scene-orignal .bg-decor:after, .tsa-scene .scene-orignal .bg-decor:before {
    right: 0;
    color: #008de8;
    width: 100px
}

.tsa-scene .scene-orignal .bg-decor:before {
    top: 8px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg)
}

.tsa-scene .scene-orignal .bg-decor:after {
    bottom: 10px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg)
}

.tsa-scene .scene-orignal .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.tsa-scene .scene-orignal.section-active .bg-capt {
    -webkit-transform: translateX(-100px) scale(1);
    -ms-transform: translateX(-100px) scale(1);
    transform: translateX(-100px) scale(1)
}

.tsa-scene .scene-orignal .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.77);
    -ms-transform: scale(.77);
    transform: scale(.77);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.tsa-scene .scene-open .bg-decor {
    left: 0;
    top: -10px
}

.tsa-scene .scene-open .bg-decor:after, .tsa-scene .scene-open .bg-decor:before {
    left: -2px;
    color: #e72431;
    width: 105px
}

.tsa-scene .scene-open .bg-decor:before {
    top: 10px;
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg)
}

.tsa-scene .scene-open .bg-decor:after {
    bottom: 12px;
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg)
}

.tsa-scene .scene-open .bg-capt {
    -webkit-transform: translateX(0) scale(.862);
    -ms-transform: translateX(0) scale(.862);
    transform: translateX(0) scale(.862);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.tsa-scene .scene-open.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.tsa-scene .scene-open .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.86);
    -ms-transform: scale(.86);
    transform: scale(.86);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.tsa-scene .scene-insert .bg-decor {
    right: 11px;
    top: 109px
}

.tsa-scene .scene-insert .bg-decor:after, .tsa-scene .scene-insert .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 104px
}

.tsa-scene .scene-insert .bg-decor:before {
    top: 7px;
    -webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg)
}

.tsa-scene .scene-insert .bg-decor:after {
    bottom: 7px;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg)
}

.tsa-scene .scene-insert .bg-capt {
    -webkit-transform: translateX(0) scale(.8);
    -ms-transform: translateX(0) scale(.8);
    transform: translateX(0) scale(.8);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.tsa-scene .scene-insert.section-active .bg-capt {
    -webkit-transform: translateX(-100px) scale(1);
    -ms-transform: translateX(-100px) scale(1);
    transform: translateX(-100px) scale(1)
}

.tsa-scene .scene-insert .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.tsa-scene .scene-banner .bg-decor {
    left: 0;
    top: 190px
}

.tsa-scene .scene-banner .bg-decor:after, .tsa-scene .scene-banner .bg-decor:before {
    left: 0;
    color: #0ea74a;
    width: 105px
}

.tsa-scene .scene-banner .bg-decor:before {
    top: -3px;
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg)
}

.tsa-scene .scene-banner .bg-decor:after {
    bottom: -1px;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg)
}

.tsa-scene .scene-banner .bg-capt {
    -webkit-transform: translateX(0) scale(.862);
    -ms-transform: translateX(0) scale(.862);
    transform: translateX(0) scale(.862);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.tsa-scene .scene-banner.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.tsa-scene .scene-banner .bg-shade {
    background: #0ea74a;
    -webkit-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.digital-browser {
    padding-bottom: 0
}

.browser-scene {
    padding: 90px 0 0
}

.browser-scene .scene-item .scene-text .intr {
    font-size: 16px;
    color: #909090
}

.browser-scene .scene-item.left-pic .nav {
    left: 712px
}

.browser-scene .scene-shanping .bg-decor {
    right: 0;
    top: -24px
}

.browser-scene .scene-shanping .bg-decor:after, .browser-scene .scene-shanping .bg-decor:before {
    right: 0;
    color: #008de8;
    width: 100px
}

.browser-scene .scene-shanping .bg-decor:before {
    top: 3px;
    -webkit-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    transform: rotate(11deg)
}

.browser-scene .scene-shanping .bg-decor:after {
    bottom: 5px;
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg)
}

.browser-scene .scene-shanping .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.908);
    -ms-transform: translateX(0) scale(.908);
    transform: translateX(0) scale(.908)
}

.browser-scene .scene-shanping.section-active .bg-capt {
    -webkit-transform: translateX(-100px) scale(1);
    -ms-transform: translateX(-100px) scale(1);
    transform: translateX(-100px) scale(1)
}

.browser-scene .scene-shanping .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.908);
    -ms-transform: scale(.908);
    transform: scale(.908);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.browser-scene .scene-news .bg-decor {
    left: 0;
    top: 180px
}

.browser-scene .scene-news .bg-decor:after, .browser-scene .scene-news .bg-decor:before {
    left: 0;
    color: #e72431;
    width: 105px
}

.browser-scene .scene-news .bg-decor:before {
    top: 0;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg)
}

.browser-scene .scene-news .bg-decor:after {
    bottom: 2px;
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg)
}

.browser-scene .scene-news .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86)
}

.browser-scene .scene-news.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.browser-scene .scene-news .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.browser-scene .scene-haowen .bg-decor {
    right: 10px;
    top: 190px
}

.browser-scene .scene-haowen .bg-decor:after, .browser-scene .scene-haowen .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 90px
}

.browser-scene .scene-haowen .bg-decor:before {
    top: 0;
    -webkit-transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    transform: rotate(9deg)
}

.browser-scene .scene-haowen .bg-decor:after {
    bottom: 2px;
    -webkit-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    transform: rotate(-9deg)
}

.browser-scene .scene-haowen .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.8);
    -ms-transform: translateX(0) scale(.8);
    transform: translateX(0) scale(.8)
}

.browser-scene .scene-haowen.section-active .bg-capt {
    -webkit-transform: translateX(-90px) scale(1);
    -ms-transform: translateX(-90px) scale(1);
    transform: translateX(-90px) scale(1)
}

.browser-scene .scene-haowen .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.79);
    -ms-transform: scale(.79);
    transform: scale(.79);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.browser-scene .scene-pause .bg-decor {
    left: 33px;
    top: 26px
}

.browser-scene .scene-pause .bg-decor:after, .browser-scene .scene-pause .bg-decor:before {
    left: -4px;
    color: #e72431;
    width: 63px
}

.browser-scene .scene-pause .bg-decor:before {
    top: 10px;
    -webkit-transform: rotate(-33deg);
    -ms-transform: rotate(-33deg);
    transform: rotate(-33deg)
}

.browser-scene .scene-pause .bg-decor:after {
    bottom: 12px;
    -webkit-transform: rotate(33deg);
    -ms-transform: rotate(33deg);
    transform: rotate(33deg)
}

.browser-scene .scene-pause .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.62);
    -ms-transform: translateX(0) scale(.62);
    transform: translateX(0) scale(.62)
}

.browser-scene .scene-pause.section-active .bg-capt {
    -webkit-transform: translateX(55px) scale(1);
    -ms-transform: translateX(55px) scale(1);
    transform: translateX(55px) scale(1)
}

.browser-scene .scene-pause .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.62);
    -ms-transform: scale(.62);
    transform: scale(.62);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.browser-scene .scene-cont .bg-decor {
    right: 0;
    top: 190px
}

.browser-scene .scene-cont .bg-decor:after, .browser-scene .scene-cont .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 90px
}

.browser-scene .scene-cont .bg-decor:before {
    top: -2px;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg)
}

.browser-scene .scene-cont .bg-decor:after {
    bottom: -1px;
    -webkit-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    transform: rotate(-6deg)
}

.browser-scene .scene-cont .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86)
}

.browser-scene .scene-cont.section-active .bg-capt {
    -webkit-transform: translateX(-90px) scale(1);
    -ms-transform: translateX(-90px) scale(1);
    transform: translateX(-90px) scale(1)
}

.browser-scene .scene-cont .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.86);
    -ms-transform: scale(.86);
    transform: scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.browser-scene .scene-sear .bg-decor {
    left: 0;
    top: 150px
}

.browser-scene .scene-sear .bg-decor:after, .browser-scene .scene-sear .bg-decor:before {
    left: 0;
    color: #008de8;
    width: 58px
}

.browser-scene .scene-sear .bg-decor:before {
    top: -1px;
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg)
}

.browser-scene .scene-sear .bg-decor:after {
    bottom: 1px;
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg)
}

.browser-scene .scene-sear .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.7);
    -ms-transform: translateX(0) scale(.7);
    transform: translateX(0) scale(.7)
}

.browser-scene .scene-sear.section-active .bg-capt {
    -webkit-transform: translateX(55px) scale(1);
    -ms-transform: translateX(55px) scale(1);
    transform: translateX(55px) scale(1)
}

.browser-scene .scene-sear .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.68);
    -ms-transform: scale(.68);
    transform: scale(.68);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.browser-scene-new {
    padding: 90px 0 0
}

.browser-scene-new .scene-pic {
    overflow: hidden
}

.app-scene {
    background-color: #fff;
    padding-top: 90px
}

.app-scene .app-here-word {
    font-size: 16px;
    color: #000;
    text-align: center;
    margin-top: 35px
}

.app-scene .scene-block .bg-decor {
    right: 9px;
    top: 96px
}

.app-scene .scene-block .bg-decor:after, .app-scene .scene-block .bg-decor:before {
    right: 0;
    color: #008de8;
    width: 90px
}

.app-scene .scene-block .bg-decor:before {
    top: -3px;
    -webkit-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg)
}

.app-scene .scene-block .bg-decor:after {
    bottom: -1px;
    -webkit-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg)
}

.app-scene .scene-block .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.81);
    -ms-transform: translateX(0) scale(.81);
    transform: translateX(0) scale(.81)
}

.app-scene .scene-block.section-active .bg-capt {
    -webkit-transform: translateX(-90px) scale(1);
    -ms-transform: translateX(-90px) scale(1);
    transform: translateX(-90px) scale(1)
}

.app-scene .scene-block .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.79);
    -ms-transform: scale(.79);
    transform: scale(.79);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.app-scene .scene-search .bg-decor {
    left: 0;
    top: 260px
}

.app-scene .scene-search .bg-decor:after, .app-scene .scene-search .bg-decor:before {
    left: 0;
    color: #e72431;
    width: 100px
}

.app-scene .scene-search .bg-decor:before {
    top: -4px;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.app-scene .scene-search .bg-decor:after {
    bottom: -3px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg)
}

.app-scene .scene-search .bg-capt {
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center;
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86)
}

.app-scene .scene-search.section-active .bg-capt {
    -webkit-transform: translateX(100px) scale(1);
    -ms-transform: translateX(100px) scale(1);
    transform: translateX(100px) scale(1)
}

.app-scene .scene-search .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.85);
    -ms-transform: scale(.85);
    transform: scale(.85);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.app-scene .scene-relat .bg-decor {
    right: 188px;
    top: 248px
}

.app-scene .scene-relat .bg-decor:after, .app-scene .scene-relat .bg-decor:before {
    right: 0;
    color: #fbc422;
    width: 58px
}

.app-scene .scene-relat .bg-decor:before {
    top: 0;
    -webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg)
}

.app-scene .scene-relat .bg-decor:after {
    bottom: 1px;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg)
}

.app-scene .scene-relat .bg-capt {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: translateX(0) scale(.84);
    -ms-transform: translateX(0) scale(.84);
    transform: translateX(0) scale(.84)
}

.app-scene .scene-relat.section-active .bg-capt {
    -webkit-transform: translateX(-56px) scale(1);
    -ms-transform: translateX(-56px) scale(1);
    transform: translateX(-56px) scale(1)
}

.app-scene .scene-relat .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.news-scene {
    padding: 90px 0 0;
    background-color: #fff
}

.news-scene .scene-text {
    height: 521px
}

.news-scene .scene-pic .bg-capt > img {
    width: 330px
}

.news-scene .scene-small .bg-decor {
    right: 0;
    top: 224px
}

.news-scene .scene-small .bg-decor:after, .news-scene .scene-small .bg-decor:before {
    color: #008de8;
    right: 0;
    width: 90px
}

.news-scene .scene-small .bg-decor:before {
    top: -3px;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg)
}

.news-scene .scene-small .bg-decor:after {
    bottom: -2px;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.news-scene .scene-small .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.news-scene .scene-small .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.83);
    -ms-transform: scale(.83);
    transform: scale(.83);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.news-scene .scene-small.section-active .bg-capt {
    -webkit-transform: translateX(-90px) scale(1);
    -ms-transform: translateX(-90px) scale(1);
    transform: translateX(-90px) scale(1)
}

.news-scene .scene-big-video .bg-decor, .news-scene .scene-multi .bg-decor {
    left: 0;
    top: 168px
}

.news-scene .scene-big-video .bg-decor:after, .news-scene .scene-big-video .bg-decor:before, .news-scene .scene-multi .bg-decor:after, .news-scene .scene-multi .bg-decor:before {
    left: 0;
    color: #e72431;
    width: 90px
}

.news-scene .scene-big-video .bg-decor:before, .news-scene .scene-multi .bg-decor:before {
    top: 0;
    -webkit-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    transform: rotate(-9deg)
}

.news-scene .scene-big-video .bg-decor:after, .news-scene .scene-multi .bg-decor:after {
    bottom: 2px;
    -webkit-transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    transform: rotate(9deg)
}

.news-scene .scene-big-video .bg-capt, .news-scene .scene-multi .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.news-scene .scene-big-video.section-active .bg-capt, .news-scene .scene-multi.section-active .bg-capt {
    -webkit-transform: translateX(88px) scale(1);
    -ms-transform: translateX(88px) scale(1);
    transform: translateX(88px) scale(1)
}

.news-scene .scene-big-video .bg-shade, .news-scene .scene-multi .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.77);
    -ms-transform: scale(.77);
    transform: scale(.77);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.news-scene .scene-big-video .scene-text, .news-scene .scene-multi .scene-text {
    width: 290px
}

.news-scene .scene-big-video .bg-decor {
    left: 0;
    top: 182px
}

.news-scene .scene-big .bg-decor {
    right: 0;
    top: 223px
}

.news-scene .scene-big .bg-decor:after, .news-scene .scene-big .bg-decor:before {
    color: #fbc422;
    right: 0;
    width: 90px
}

.news-scene .scene-big .bg-decor:before {
    top: 0;
    -webkit-transform: rotate(9deg);
    -ms-transform: rotate(9deg);
    transform: rotate(9deg)
}

.news-scene .scene-big .bg-decor:after {
    bottom: 1px;
    -webkit-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    transform: rotate(-9deg)
}

.news-scene .scene-big .bg-capt {
    -webkit-transform: translateX(0) scale(.86);
    -ms-transform: translateX(0) scale(.86);
    transform: translateX(0) scale(.86);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.news-scene .scene-big .bg-shade {
    background: #fbc422;
    -webkit-transform: scale(.83);
    -ms-transform: scale(.83);
    transform: scale(.83);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.news-scene .scene-big.section-active .bg-capt {
    -webkit-transform: translateX(-90px) scale(1);
    -ms-transform: translateX(-90px) scale(1);
    transform: translateX(-90px) scale(1)
}

.news-scene .kkt-top .bg-decor {
    top: 136px
}

.news-scene .scene-shake .scene-pic .bg-capt {
    box-shadow: none
}

.news-scene .scene-shake .scene-pic .bg-capt > img {
    width: 100%
}

.news-scene .scene-shake .bg-shade {
    display: none
}

.news-scene .scene-shake .bg-decor:after, .news-scene .scene-shake .bg-decor:before {
    display: none
}

.video-scene {
    padding: 90px 0 0;
    background-color: #fff
}

.video-scene .scene-text {
    height: 521px
}

.video-scene .scene-pic .bg-capt > img {
    width: 330px
}

.video-scene .scene-small .bg-decor {
    right: 0;
    top: 165px
}

.video-scene .scene-small .bg-decor:after, .video-scene .scene-small .bg-decor:before {
    color: #008de8;
    right: 0;
    width: 142px
}

.video-scene .scene-small .bg-decor:before {
    top: -1px;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg)
}

.video-scene .scene-small .bg-decor:after {
    bottom: 1px;
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg)
}

.video-scene .scene-small .bg-capt {
    -webkit-transform: translateX(0) scale(.865);
    -ms-transform: translateX(0) scale(.865);
    transform: translateX(0) scale(.865);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.video-scene .scene-small .bg-shade {
    background: #008de8;
    -webkit-transform: scale(.83);
    -ms-transform: scale(.83);
    transform: scale(.83);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
}

.video-scene .scene-small.section-active .bg-capt {
    -webkit-transform: translateX(-142px) scale(1);
    -ms-transform: translateX(-142px) scale(1);
    transform: translateX(-142px) scale(1)
}

.video-scene .scene-small.section-active .bg-capt > img {
    border-bottom: 10px solid #fff
}

.video-scene .scene-big .bg-decor, .video-scene .scene-big-video .bg-decor {
    left: 0;
    top: 153px
}

.video-scene .scene-big .bg-decor:after, .video-scene .scene-big .bg-decor:before, .video-scene .scene-big-video .bg-decor:after, .video-scene .scene-big-video .bg-decor:before {
    left: 0;
    color: #e72431;
    width: 90px
}

.video-scene .scene-big .bg-decor:before, .video-scene .scene-big-video .bg-decor:before {
    top: 6px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg);
    left: -1px
}

.video-scene .scene-big .bg-decor:after, .video-scene .scene-big-video .bg-decor:after {
    bottom: 8px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg);
    left: -2px
}

.video-scene .scene-big .bg-capt, .video-scene .scene-big-video .bg-capt {
    -webkit-transform: translateX(0) scale(.865);
    -ms-transform: translateX(0) scale(.865);
    transform: translateX(0) scale(.865);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.video-scene .scene-big-video.section-active .bg-capt, .video-scene .scene-big.section-active .bg-capt {
    -webkit-transform: translateX(88px) scale(1);
    -ms-transform: translateX(88px) scale(1);
    transform: translateX(88px) scale(1)
}

.video-scene .scene-big .bg-shade, .video-scene .scene-big-video .bg-shade {
    background: #e72431;
    -webkit-transform: scale(.77);
    -ms-transform: scale(.77);
    transform: scale(.77);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.video-scene .scene-big-video .bg-decor {
    left: 0;
    top: 182px
}

.video-scene .scene-shake .scene-pic .bg-capt {
    box-shadow: none
}

.video-scene .scene-shake .scene-pic .bg-capt > img {
    width: 100%
}

.video-scene .scene-shake .bg-shade {
    display: none
}

.video-scene .scene-shake .bg-decor:after, .video-scene .scene-shake .bg-decor:before {
    display: none
}

.video-scene .scene-focus .scene-pic .bg-capt {
    top: 155px;
    -webkit-transform: scale(.865);
    -ms-transform: scale(.865);
    transform: scale(.865);
    -webkit-transform-origin: 0 center;
    -ms-transform-origin: 0 center;
    transform-origin: 0 center
}

.video-scene .scene-focus.section-active .bg-capt {
    -webkit-transform: translateY(-50px) translateX(-45px) scale(1.1);
    -ms-transform: translateY(-50px) translateX(-45px) scale(1.1);
    transform: translateY(-50px) translateX(-45px) scale(1.1)
}

.video-scene .scene-focus .bg-shade {
    display: none
}

.video-scene .scene-focus .bg-decor:after, .video-scene .scene-focus .bg-decor:before {
    display: none
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right 0;
        transform-origin: right 0
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right 0;
        transform-origin: right 0
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right 0;
        transform-origin: right 0
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: right 0;
        transform-origin: right 0
    }
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom
    }
}

@keyframes slideInUp {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom
    }
}

@-webkit-keyframes lineRight {
    0% {
        width: 0%;
        left: 0;
        opacity: 1
    }
    100% {
        width: 100%;
        left: 0;
        opacity: 1
    }
}

@keyframes lineRight {
    0% {
        width: 0%;
        left: 0;
        opacity: 1
    }
    100% {
        width: 100%;
        left: 0;
        opacity: 1
    }
}

@-webkit-keyframes lineLeft {
    0% {
        width: 0%;
        right: 0;
        opacity: 1
    }
    100% {
        width: 100%;
        right: 0;
        opacity: 1
    }
}

@keyframes lineLeft {
    0% {
        width: 0%;
        right: 0;
        opacity: 1
    }
    100% {
        width: 100%;
        right: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(80px, 0, 0);
        transform: translate3d(80px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(80px, 0, 0);
        transform: translate3d(80px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-80px, 0, 0);
        transform: translate3d(-80px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-80px, 0, 0);
        transform: translate3d(-80px, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.faq {
    padding-top: 40px;
    margin-bottom: 100px
}

.faq.register-notice {
    margin-top: 30px
}

.faq .container {
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 2px
}

.faq .faq-title {
    font-size: 23px;
    line-height: 90px;
    padding-left: 24px;
    border-bottom: 1px solid #efefef;
    position: relative;
    height: 90px
}

.faq .faq-title .icon {
    margin-right: 12px;
    position: relative;
    top: -2px
}

.faq .faq-bd {
    height: 100%
}

.faq .faq-list {
    width: 32%;
    border-right: 1px solid #efefef;
    margin-right: -1px
}

.faq .faq-list ul:last-of-type li:last-of-type {
    border-bottom: none
}

.faq .faq-list li.faq-cats {
    border-bottom: 1px solid #efefef
}

.faq .faq-list li.faq-cats > h4 > a {
    display: block;
    font-size: 16px;
    padding: 0 24px;
    line-height: 60px;
    height: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
    position: relative
}

.faq .faq-list li.faq-cats > h4 > a i.icon-arrow {
    width: 7px;
    height: 14px;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -7px;
    transition: all .6s
}

.faq .faq-list li.faq-cats > h4 > a i.icon-arrow:after, .faq .faq-list li.faq-cats > h4 > a i.icon-arrow:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: 0;
    transition: all .6s
}

.faq .faq-list li.faq-cats > h4 > a i.icon-arrow:before {
    border-color: transparent transparent transparent #ddd;
    left: 3px
}

.faq .faq-list li.faq-cats > h4 > a i.icon-arrow:after {
    border-color: transparent transparent transparent #fff;
    left: 0
}

.faq .faq-list li.faq-cats.active > h4 > a {
    color: #008de8
}

.faq .faq-list li.faq-cats.active > h4 > a i.icon-arrow {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.faq .faq-list li.faq-cats.active > h4 > a i.icon-arrow:before {
    border-color: transparent transparent transparent #008de8
}

.faq .faq-list .faq-submenu {
    display: none;
    background: #efefef;
    padding: 25px 0 10px
}

.faq .faq-list .faq-submenu > li {
    margin-bottom: 15px;
    padding: 0 50px
}

.faq .faq-list .faq-submenu > li a {
    display: block;
    color: #666
}

.faq .faq-list .faq-submenu > li a:hover {
    color: #008de8
}

.faq .faq-list .faq-submenu > li.active a {
    color: #008de8
}

.faq .faq-bd {
    width: 68%;
    color: #000
}

.faq .faq-bd .content {
    border-left: 1px solid #efefef;
    padding: 45px
}

.faq .faq-bd .content > h3.title {
    font-size: 20px;
    margin-bottom: 35px
}

.faq .faq-bd .faq-text {
    font-size: 14px;
    line-height: 2
}

.faq .faq-bd .faq-text h4.blue-bar {
    font-size: 16px;
    position: relative;
    padding-left: .9em;
    *padding-left: 0;
    margin-bottom: 10px
}

.faq .faq-bd .faq-text h4.blue-bar:before {
    content: "";
    width: 3px;
    height: 1em;
    background-color: #008de8;
    position: absolute;
    left: 0;
    top: .5em
}

.faq .faq-bd .faq-text p {
    margin-bottom: 1em
}

.faq .faq-bd .faq-text img {
    max-width: 100%
}

.entrance {
    display: none;
    margin-bottom: 120px
}

.entrance li {
    font-size: 14px
}

.entrance li .con {
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 2px;
    overflow: hidden;
    transition: all .6s
}

.entrance li .con:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1)
}

.entrance li .entrance-pic {
    padding-bottom: 53%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 1px
}

.entrance li .entrance-text {
    padding: 35px
}

.entrance li .entrance-text h3.title {
    line-height: 1;
    font-size: 23px;
    color: #000;
    padding-left: 36px;
    position: relative
}

.entrance li .entrance-text h3.title .icon {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -14px
}

.entrance li .entrance-text p {
    line-height: 2;
    color: #000;
    margin: 20px 0
}

.search-result {
    padding-bottom: 50px
}

.search-result .container {
    border: 1px solid #efefef;
    box-sizing: border-box
}

.search-result .result-index {
    background: #efefef;
    padding: 40px 60px 20px
}

.search-result .result-index h3 {
    font-size: 23px;
    color: #000;
    margin-bottom: 22px
}

.search-result .result-index h3 > em {
    font-style: normal;
    color: #008de8
}

.search-result .result-index .result-cat > a {
    display: inline-block;
    color: #000;
    font-size: 14px;
    line-height: 31px;
    height: 31px;
    padding: 0 16px
}

.search-result .result-index .result-cat > a.active, .search-result .result-index .result-cat > a:hover {
    background-color: #008de8;
    color: #fff
}

.search-result .result-list {
    padding: 0 60px;
    background: #fff
}

.search-result .result-list li {
    padding: 35px 0 40px;
    border-bottom: 1px solid #f1f1f1
}

.search-result .result-list li h4 {
    font-size: 20px;
    margin-bottom: 10px
}

.search-result .result-list li h4 a {
    color: #000
}

.search-result .result-list li p {
    font-size: 14px;
    line-height: 2;
    color: #666
}

.search-result .result-list li em {
    font-style: normal;
    color: #008de8
}

.page-navgation {
    padding: 30px 60px;
    background: #fff
}

.page-navgation > a {
    display: inline-block;
    line-height: 31px;
    padding: 0 12px;
    border-radius: 2px
}

.page-navgation > a.active, .page-navgation > a:hover {
    background-color: #008de8;
    color: #fff
}

.feedback {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #efefef
}

.feedback h5 {
    font-size: 14px;
    color: #000;
    margin-bottom: 15px
}

.feedback .btn-erea a.btn {
    line-height: 35px;
    padding: 0 18px;
    margin-right: 10px
}

.recommend h3.title {
    font-size: 20px;
    color: #000;
    line-height: 64px;
    padding-left: 20px;
    border-bottom: 1px solid #efefef
}

.recommend .content {
    border: 1px solid #efefef;
    box-sizing: border-box;
    background: #fff;
    border-radius: 2px;
    overflow: hidden
}

.recommend .recommend-hot {
    width: 62%
}

.recommend .recommend-hot .content {
    margin-right: 15px
}

.recommend .recommend-hot .hot-content {
    width: 100%;
    overflow: hidden;
    *position: relative
}

.recommend .recommend-hot .hot-content .hot-pic a {
    display: block;
    height: 364px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

.recommend .recommend-hot .hot-tabs {
    *zoom: 1
}

.recommend .recommend-hot .hot-tabs:after, .recommend .recommend-hot .hot-tabs:before {
    display: table;
    content: ""
}

.recommend .recommend-hot .hot-tabs:after {
    clear: both
}

.recommend .recommend-hot .hot-tabs:after, .recommend .recommend-hot .hot-tabs:before {
    display: table;
    content: ""
}

.recommend .recommend-hot .hot-tabs:after {
    clear: both
}

.recommend .recommend-hot .hot-tabs a {
    float: left;
    width: 33.33333333%;
    text-align: center;
    line-height: 60px;
    color: #000;
    font-size: 16px
}

.recommend .recommend-hot .hot-tabs a.active, .recommend .recommend-hot .hot-tabs a:hover {
    background-color: #008de8;
    color: #fff
}

.recommend .recommend-last {
    width: 38%
}

.recommend .recommend-last .content {
    margin-left: 15px;
    padding: 0 20px
}

.recommend .recommend-last h3.title {
    padding-left: 0
}

.recommend .recommend-last .last-list li {
    line-height: 2;
    padding: 15px 0;
    border-bottom: 1px solid #efefef;
    position: relative
}

.recommend .recommend-last .last-list li h4 {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80%
}

.recommend .recommend-last .last-list li h4 a {
    color: #000;
    font-size: 16px
}

.recommend .recommend-last .last-list li h4 a:hover {
    color: #008de8
}

.recommend .recommend-last .last-list li > p {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80%;
    font-size: 14px;
    color: #666
}

.recommend .recommend-last .last-list li > p .icon {
    margin-right: 8px
}

.recommend .recommend-last .last-list li a.btn {
    opacity: 0;
    visibility: hidden;
    padding: 0 6px;
    line-height: 30px;
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -16px;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
    transition: all .6s
}

.recommend .recommend-last .last-list li.active a.btn {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.recommend .recommend-last .btn-all {
    text-align: center;
    padding: 14px 0
}

.step {
    margin-top: 40px
}

.step .container .step-con {
    padding: 60px;
    border: 1px solid #efefef;
    background: #fff;
    border-radius: 2px
}

.step h3.title {
    font-size: 20px;
    line-height: 2
}

.step p.desc {
    font-size: 14px;
    color: #666;
    line-height: 2
}

.step .step-list li {
    color: #000;
    margin-top: 40px
}

.step .step-list li h4.step-title {
    font-size: 18px;
    margin-bottom: 25px;
    position: relative;
    line-height: 2
}

.step .step-list li h4.step-title a {
    color: #000
}

.step .step-list li h4.step-title a:hover {
    color: #008de8
}

.step .step-list li h4.step-title .icon {
    margin-right: 8px;
    position: relative;
    top: -2px
}

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

.step .step-list li p span {
    line-height: 2;
    display: block;
    position: relative;
    padding-left: 8px;
    margin-bottom: 8px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.step .step-list li p span a {
    color: #000
}

.step .step-list li p span a:hover {
    color: #008de8
}

.step .step-list li p span:before {
    content: "";
    width: 2px;
    height: 1em;
    background-color: #008de8;
    position: absolute;
    left: 0;
    top: .5em
}

.download-data {
    margin: 40px 0
}

.download-data .container .download-con {
    padding: 60px;
    border: 1px solid #efefef;
    background: #fff;
    border-radius: 2px
}

.download-data h3.title {
    font-size: 20px;
    line-height: 2
}

.download-data p.desc {
    font-size: 14px;
    color: #666;
    line-height: 2
}

.download-data .download-list li {
    color: #000;
    margin-top: 40px
}

.download-data .download-list li h4.download-title {
    font-size: 18px;
    margin-bottom: 25px
}

.download-data .download-list li h4.download-title a {
    color: #000
}

.download-data .download-list li h4.download-title a:hover {
    color: #008de8
}

.download-data .download-list li h4.download-title .icon {
    margin-right: 10px;
    position: relative;
    top: -2px
}

.download-data .download-list li p {
    font-size: 16px
}

.download-data .download-list li p span {
    line-height: 2;
    display: block;
    position: relative;
    padding-left: 8px;
    margin-bottom: 8px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.download-data .download-list li p span a {
    color: #000;
    position: relative
}

.download-data .download-list li p span a:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.download-data .download-list li p span a:hover {
    color: #008de8
}

.download-data .download-list li p span a:hover:after {
    background-color: #008de8
}

.download-data .download-list li p span:before {
    content: "";
    width: 2px;
    height: 1em;
    background-color: #008de8;
    position: absolute;
    left: 0;
    top: .5em
}

.enter-bbs {
    margin-bottom: 40px
}

.enter-bbs .container {
    border: 1px solid #efefef;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 2px
}

.enter-bbs .container > a {
    display: table;
    *display: block;
    width: 100%;
    height: 170px;
    background-image: url(../images/more/enter-bbs.jpg);
    background-image: -webkit-image-set(url(../images/more/enter-bbs.jpg) 1x, url(../images/more/enter-bbs@2x.jpg) 2x);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.enter-bbs .container p {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
    color: #000;
    padding-left: 60px;
    *padding-top: 60px
}

.btn_download {
    line-height: 1;
    border-bottom: 1px solid #008de8
}

.download-area h3.faq-title {
    padding-left: 0
}

.download-area h3.faq-title a {
    display: block;
    color: #000;
    padding-left: 24px
}

.download-area h3.faq-title.active {
    background: #efefef
}

.download-area .download-cats {
    width: 26%
}

.download-area .download-bd {
    width: 74%
}

.download-area .download-table {
    width: 100%;
    color: #000;
    table-layout: fixed;
    border-collapse: collapse
}

.download-area .download-table tr {
    border-bottom: 1px solid #efefef
}

.download-area .download-table thead th {
    font-size: 18px;
    line-height: 60px;
    padding-bottom: 10px;
    padding-left: 12px
}

.download-area .download-table thead th.th-name {
    width: 40%
}

.download-area .download-table thead th.th-time {
    width: 32%
}

.download-area .download-table thead th.th-operation {
    width: 28%
}

.download-area .download-table tbody td {
    font-size: 16px;
    line-height: 65px;
    padding-left: 12px
}

.download-area .download-table tbody td.data-link {
    color: #008de8;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.download-area .download-table tbody td.data-link a {
    color: #000;
    position: relative
}

.download-area .download-table tbody td.data-link a:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.download-area .download-table tbody td.data-link a:hover {
    color: #008de8
}

.download-area .download-table tbody td.data-link a:hover:after {
    background-color: #008de8
}

.download-area .download-table tbody td.td-operation a.btn {
    padding: 3px 8px;
    margin-right: 10px
}

.download-page-navgation {
    padding: 30px 0 30px 12px
}

.course-preview {
    margin-bottom: 50px
}

.course-preview .container {
    background-color: #fff;
    border: 1px solid #efefef
}

.course-preview .preview-cats {
    *zoom: 1;
    position: relative
}

.course-preview .preview-cats:after, .course-preview .preview-cats:before {
    display: table;
    content: ""
}

.course-preview .preview-cats:after {
    clear: both
}

.course-preview .preview-cats:after, .course-preview .preview-cats:before {
    display: table;
    content: ""
}

.course-preview .preview-cats:after {
    clear: both
}

.course-preview .preview-cats li {
    line-height: 60px;
    float: left;
    width: 17%
}

.course-preview .preview-cats li > a {
    display: block;
    font-size: 20px;
    color: #000;
    text-align: center;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef
}

.course-preview .preview-cats li > a:hover {
    color: #008de8
}

.course-preview .preview-cats li.active > a {
    color: #008de8;
    border-bottom-color: #fff
}

.course-preview .preview-section {
    border-top: 1px solid #efefef;
    margin-top: -1px;
    padding: 0 5.8%
}

.course-preview .preview-section li {
    overflow: hidden;
    position: relative
}

.course-preview .preview-section li:last-child:before {
    display: none
}

.course-preview .preview-section li:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #efefef;
    position: absolute;
    right: 0;
    bottom: 0
}

.course-preview .preview-section li .course-time {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -32px;
    height: 64px;
    font-size: 14px;
    color: #666
}

.course-preview .preview-section li .course-time span {
    display: block;
    font-size: 26px;
    color: #000
}

.course-preview .preview-section li .course-content {
    float: right;
    width: 81%
}

.course-preview .preview-section li .course-content .course-item {
    padding: 20px 0;
    position: relative;
    *overflow: hidden
}

.course-preview .preview-section li .course-content .course-item > div {
    display: inline-block;
    vertical-align: middle;
    *float: left
}

.course-preview .preview-section li .course-content .course-item:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #efefef;
    position: absolute;
    right: 0;
    top: 0
}

.course-preview .preview-section li .course-content .course-item:first-of-type:before {
    display: none
}

.course-preview .preview-section li .course-content .cource-pic > a {
    display: block;
    width: 150px;
    height: 86px
}

.course-preview .preview-section li .course-content .course-text {
    *padding-top: 14px;
    width: 56%;
    overflow: hidden;
    margin-left: 20px
}

.course-preview .preview-section li .course-content .course-text .cource-tit {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 18px;
    margin-bottom: 6px
}

.course-preview .preview-section li .course-content .course-text .cource-tit a {
    color: #000
}

.course-preview .preview-section li .course-content .course-text > p {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color: #666
}

.course-preview .preview-section li .course-content .course-text > p b {
    font-weight: 400;
    color: #008de8
}

.course-preview .preview-section li .course-btn {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -16px
}

.course-preview .preview-section li .course-btn .btn {
    padding: 0;
    line-height: 32px;
    width: 95px
}

.course-preview .preview-section li .course-btn .btn-disabled {
    color: #c9caca
}

.course-preview .preview-section li .activity-details {
    display: none;
    width: 56%;
    margin-left: 175px;
    font-size: 14px;
    color: #000;
    line-height: 2;
    margin-bottom: 2em
}

.course-preview .preview-section li .activity-details h5 {
    font-size: 16px
}

.course-preview .preview-section li .activity-details p {
    margin-bottom: 1em
}

.join_us {
    margin: 92px 0
}

.join_us * {
    box-sizing: border-box
}

.join_block {
    border: 1px solid #efefef;
    border-radius: 2px;
    background-color: #fff;
    padding: 64px 55px;
    margin-top: 30px;
    overflow: hidden;
    line-height: 1
}

.join_block:first-of-type {
    margin-top: 0
}

.join_block .row {
    margin: 0
}

.join_block .col-12, .join_block .col-6 {
    padding: 0 40px
}

.join_block .join_block_hd {
    font-size: 26px;
    padding-left: 40px
}

.join_block .join_block_bd {
    margin-top: 50px
}

.join_block .join_block_ft {
    margin-top: 40px
}

.join_block .join_block_ft .btn {
    width: 230px;
    height: 60px;
    line-height: 36px
}

.join_desc {
    color: #666;
    line-height: 2
}

.join_desc .desc-tit {
    font-size: 20px;
    line-height: 1;
    color: #000;
    margin-bottom: 24px
}

.join_desc .desc-define {
    font-size: 14px;
    margin-bottom: 14px
}

.join_desc .desc-list > li {
    position: relative;
    padding-left: 14px
}

.join_desc .desc-list > li:before {
    position: absolute;
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    top: 12px;
    left: 0;
    border-radius: 50%;
    background-color: #666;
    vertical-align: middle;
    margin-right: 10px
}

.tc-reg-form > ul > li .form-inline {
    font-size: 0;
    white-space: nowrap
}

.tc-reg-form > ul > li .chosen-model .chosen-search input {
    position: static
}

.tc-reg-form > ul > li .chosen-model .chosen-results .active-result {
    height: 40px;
    padding: 0 0 0 40px;
    line-height: 40px
}

.tc-reg-form > ul > li .chosen-model .chosen-results .active-result:hover {
    background-color: #3e8edd;
    color: #fff
}

.tc-reg-form > ul > li .chosen-model .chosen-results .highlighted {
    background-color: #3e8edd;
    color: #fff
}

.tc-reg-form > ul > li .chosen-model .chosen-container-single .chosen-single {
    height: 38px;
    border: none;
    border-radius: 0;
    padding: 0 10px 0 40px;
    font-size: 14px;
    color: #a9a9a9;
    line-height: 38px
}

.tc-reg-form > ul > li .chosen-model .chosen-container-single .chosen-single div b {
    background-position: 0 10px
}

.tc-reg-form > ul > li .chosen-model .chosen-container-active .chosen-single {
    color: #333
}

.tc-reg-form > ul > li .chosen-model .chosen-container-active .chosen-single div b {
    background-position: -18px 10px
}

.tc-reg-form.has-icons > ul > li input {
    padding-left: 40px
}

.tc-reg-form.has-icons > ul > li.pic-verifi input, .tc-reg-form.has-icons > ul > li.verifi input {
    padding-left: 10px
}

.tc-btn, .tc-btn:active, .tc-btn:hover, .tc-btn:link, .tc-btn:visited {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    vertical-align: middle
}

.tc-btn.blue {
    background: #008de8
}

.tc-btn.disabled, .tc-btn.disabled.focus, .tc-btn.disabled:focus, .tc-btn.disabled:hover {
    background: #f9f9f9 !important;
    border-color: #c3c3c3;
    color: #8e929b !important;
    cursor: default
}

.tc-reg-form {
    margin: 0 auto;
    font-size: 14px
}

.tc-reg-form > ul > li {
    position: relative;
    height: 40px;
    border: 1px solid #e0e0e0;
    margin-bottom: 15px;
    text-align: left;
    box-sizing: border-box;
    transition: height .4s, margin-bottom .4s
}

.tc-reg-form > ul > li > i {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 6px;
    left: 10px;
    overflow: hidden;
    background: no-repeat;
    z-index: 1
}

.tc-reg-form > ul > li > i.icons-cpname {
    background-position: -50px -50px
}

.tc-reg-form > ul > li > i.icons-mail {
    background-position: -78px -50px
}

.tc-reg-form > ul > li > i.icons-phonenum {
    background-position: -50px -78px
}

.tc-reg-form > ul > li > i.icons-username {
    background-position: 0 -100px
}

.tc-reg-form > ul > li > i.icons-years {
    background-position: -100px 0
}

.tc-reg-form > ul > li > i.icons-post {
    background-position: -106px -28px
}

.tc-reg-form > ul > li > i.icons-location {
    background-position: -28px -106px
}

.tc-reg-form > ul > li input, .tc-reg-form > ul > li select {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    padding: 10px;
    top: 0;
    bottom: 0;
    font-size: 14px;
    border: none;
    border-radius: 0;
    line-height: 18px
}

.tc-reg-form > ul > li input::-webkit-input-placeholder {
    font-size: 14px
}

.tc-reg-form > ul > li input.placeholder {
    color: #999
}

.tc-reg-form > ul > li.hide {
    height: 0;
    margin-bottom: 0 !important;
    border-color: #fff !important;
    overflow: hidden
}

.tc-reg-form > ul > li .help-info {
    position: absolute;
    top: -22px;
    right: -225px;
    width: 182px;
    height: 60px;
    padding: 10px 15px;
    border-radius: 3px;
    background-color: #f3f3f3;
    font-size: 12px;
    line-height: 20px
}

.tc-reg-form > ul > li .help-info:before {
    display: block;
    position: absolute;
    content: '';
    width: 8px;
    height: 16px;
    top: 50%;
    left: -8px;
    margin-top: -8px
}

.tc-reg-form .error-info {
    display: none;
    position: absolute;
    bottom: -26px;
    left: 0;
    height: 24px;
    line-height: 24px;
    color: #e33244;
    font-size: 14px
}

.tc-reg-form .error-info:before {
    display: inline-block;
    content: '';
    width: 12px;
    height: 12px;
    margin-top: -2px;
    margin-right: 5px;
    background: no-repeat;
    background-position: -78px -78px;
    overflow: hidden;
    vertical-align: middle
}

.tc-reg-form > ul > li.verifi.form-error {
    border: 0
}

.tc-reg-form > ul > li.verifi.form-error input {
    border: 1px solid #e33244
}

.tc-reg-form > ul > li.verifi input {
    width: 174px;
    left: 0;
    right: 106px
}

.tc-reg-form > ul > li.verifi .tc-btn {
    box-sizing: border-box;
    position: absolute;
    width: 105px;
    height: 38px;
    top: 0;
    right: 0;
    line-height: 38px;
    font-size: 14px;
    border: 1px solid transparent
}

.tc-reg-form > ul > li.verifi .tc-btn.disabled {
    border-left: 1px solid #dedede
}

.tc-reg-form > ul > li.verifi.readonly input {
    background: #f9f9f9
}

.tc-reg-form > ul > li.verifi.readonly .tc-btn {
    height: 36px;
    background: #f9f9f9 !important;
    border-left: 1px solid #dedede;
    color: #999
}

.tc-reg-form > ul > li.verifi .tc-btn.disable {
    border-left: 1px solid #dedede
}

.tc-reg-form > ul > li.pic-verifi {
    border: 0;
    font-size: 0
}

.tc-reg-form > ul > li.pic-verifi.form-error {
    border: 0
}

.tc-reg-form > ul > li.pic-verifi.form-error input {
    border: 1px solid #e33244
}

.tc-reg-form > ul > li.pic-verifi input {
    width: 130px;
    margin-right: 8px;
    border: 1px solid #e0e0e0;
    position: static;
    vertical-align: middle
}

.tc-reg-form > ul > li.pic-verifi img {
    width: 103px;
    height: 41px;
    vertical-align: middle
}

.tc-reg-form > ul > li.pic-verifi .change {
    margin-left: 8px;
    vertical-align: middle;
    color: #008fe4;
    font-size: 12px
}

.tc-reg-form > ul > li.form-error {
    border: 1px solid #e33244;
    margin-bottom: 34px
}

.tc-reg-form > ul > li.form-error input {
    color: #e33244
}

.tc-reg-form > ul > li.form-error .error-info {
    display: block
}

.tc-reg-form .reg-protocol {
    line-height: 20px;
    margin-top: 15px;
    margin-bottom: 23px
}

.tc-reg-form .form-error ~ .reg-protocol {
    margin-top: 0
}

.tc-reg-form .reg-protocol .m-checkbox .ico {
    box-sizing: border-box
}

.tc-reg-form .reg-protocol input {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    cursor: pointer;
    vertical-align: middle
}

.tc-reg-form .reg-protocol label {
    vertical-align: middle
}

.reg-protocol a {
    color: #008fe4
}

.tc-reg-form .tc-btn {
    width: 100%
}

.tc-reg-form .error-info:before, .tc-reg-form > ul > li > i.icons-cpname, .tc-reg-form > ul > li > i.icons-location, .tc-reg-form > ul > li > i.icons-mail, .tc-reg-form > ul > li > i.icons-phonenum, .tc-reg-form > ul > li > i.icons-post, .tc-reg-form > ul > li > i.icons-username, .tc-reg-form > ul > li > i.icons-years {
    background-image: url(../images/sprites/main.png?20170419105225)
}

@media only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min-resolution: 240dpi), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
    .tc-reg-form .error-info:before, .tc-reg-form > ul > li > i.icons-cpname, .tc-reg-form > ul > li > i.icons-location, .tc-reg-form > ul > li > i.icons-mail, .tc-reg-form > ul > li > i.icons-phonenum, .tc-reg-form > ul > li > i.icons-post, .tc-reg-form > ul > li > i.icons-username, .tc-reg-form > ul > li > i.icons-years {
        background-image: url(../images/sprites/main@2x.png?20170419105225);
        background-size: 124px auto
    }

    .tc-reg-form > ul > li > i.icons-cpname {
        background-position: -48px -48px
    }

    .tc-reg-form > ul > li > i.icons-mail {
        background-position: -74px -48px
    }

    .tc-reg-form > ul > li > i.icons-phonenum {
        background-position: -48px -74px
    }

    .tc-reg-form > ul > li > i.icons-username {
        background-position: 0 -96px
    }

    .tc-reg-form > ul > li > i.icons-years {
        background-position: -96px 0
    }

    .tc-reg-form > ul > li > i.icons-post {
        background-position: -100px -26px
    }

    .tc-reg-form > ul > li > i.icons-location {
        background-position: -26px -100px
    }

    .tc-reg-form .error-info:before {
        background-position: -74px -74px
    }
}

.sitemap-wrap {
    padding: 60px 50px;
    background: #fff;
    border: 1px solid #efefef;
    margin-bottom: 50px
}

.sitemap-list {
    *zoom: 1;
    margin-bottom: 50px
}

.sitemap-list:after, .sitemap-list:before {
    display: table;
    content: ""
}

.sitemap-list:after {
    clear: both
}

.sitemap-list:after, .sitemap-list:before {
    display: table;
    content: ""
}

.sitemap-list:after {
    clear: both
}

.sitemap-list:last-of-type {
    margin-bottom: 0
}

.sitemap-list h3 {
    font-size: 18px;
    color: #222;
    font-weight: 700;
    margin-bottom: 20px
}

.sitemap-list li {
    float: left;
    line-height: 36px;
    font-size: 14px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 20%
}

.sitemap-list li a {
    color: #333;
    padding-left: 10px;
    position: relative;
    transiton: color .2s
}

.sitemap-list li a:hover {
    color: #008de8;
    text-decoration: underline
}

.sitemap-list li a:before {
    content: "";
    width: 2px;
    height: 13px;
    background: #008de8;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px
}

.no-bd {
    border: none !important
}

.sp_search {
    margin: 45px 0;
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 3px
}

.sp_search * {
    box-sizing: border-box
}

.sp_search .form-wrap {
    width: 720px;
    margin: 80px auto;
    overflow: hidden
}

.sp_search .form-wrap .form-title {
    font-size: 30px;
    line-height: 1;
    text-align: center
}

.sp_search .form-wrap .form-subtitle {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #999
}

.sp_search .form-wrap .form-input {
    margin-top: 42px;
    font-size: 0
}

.sp_search .form-wrap .form-input .form-control {
    display: inline-block;
    width: 534px;
    height: 38px;
    padding: 10px 15px;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    line-height: 1;
    color: #333
}

.sp_search .form-wrap .form-input .form-control:focus {
    border-color: #008de8
}

.sp_search .form-wrap .form-input .btn {
    float: right;
    width: 168px;
    border-radius: 0;
    vertical-align: middle
}

.sp_search .form-wrap .form-input .help-block {
    height: 35px;
    margin: 0;
    padding: 0;
    line-height: 35px;
    font-size: 14px
}

.sp_search .form-wrap .form-input.has-error .help-block {
    color: #c80e13
}

.sp_search .form-wrap .result-wrap {
    margin-top: 40px
}

.sp_search .form-wrap .table {
    width: 100%;
    margin-bottom: 0
}

.sp_search .form-wrap .table > thead > tr > td, .sp_search .form-wrap .table > thead > tr > th {
    height: 50px;
    background-color: #fafafa;
    border-bottom: 1px solid #dcdee3;
    color: #999;
    vertical-align: middle
}

.sp_search .form-wrap .table > tbody > tr > td, .sp_search .form-wrap .table > tbody > tr > th, .sp_search .form-wrap .table > thead > tr > td, .sp_search .form-wrap .table > thead > tr > th {
    height: 50px;
    border-bottom: 1px solid #dcdee3;
    border-top: none;
    vertical-align: middle
}

.sp_search .form-wrap .table > tbody > tr > td:first-of-type, .sp_search .form-wrap .table > tbody > tr > th:first-of-type, .sp_search .form-wrap .table > thead > tr > td:first-of-type, .sp_search .form-wrap .table > thead > tr > th:first-of-type {
    padding-left: 20px
}

.sp_search .form-wrap .table > tbody > tr > td:nth-child(2), .sp_search .form-wrap .table > tbody > tr > th:nth-child(2), .sp_search .form-wrap .table > thead > tr > td:nth-child(2), .sp_search .form-wrap .table > thead > tr > th:nth-child(2) {
    width: 110px;
    text-align: right;
    padding-right: 20px
}

.sp_search .form-wrap .table > tbody > tr > td:last-of-type, .sp_search .form-wrap .table > tbody > tr > th:last-of-type, .sp_search .form-wrap .table > thead > tr > td:last-of-type, .sp_search .form-wrap .table > thead > tr > th:last-of-type {
    width: 140px;
    text-align: right;
    padding-right: 20px
}

.sp_search .form-wrap .table > tbody > tr > td, .sp_search .form-wrap .table > tbody > tr > th {
    color: #666
}

.sp_search .form-wrap .table > tbody > tr > td:first-of-type, .sp_search .form-wrap .table > tbody > tr > th:first-of-type {
    padding-left: 20px;
    color: #333
}

.sp_search .form-wrap .pagebar {
    padding: 0 11px 0 20px
}

.sp_search .form-wrap .pagebar .page-info {
    line-height: 46px;
    float: left;
    color: #999
}

.sp_search .form-wrap .pagebar .pagination {
    line-height: 25px;
    margin: 15px 0;
    float: right;
    font-size: 0
}

.sp_search .form-wrap .pagination > li {
    padding: 0 1px;
    display: inline-block;
    font-size: 14px
}

.sp_search .form-wrap .pagination > li > a, .sp_search .form-wrap .pagination > li > span {
    border: 0;
    color: #404040
}

.sp_search .form-wrap .pagination > li:first-child > a, .sp_search .form-wrap .pagination > li:first-child > span {
    border-radius: 2px
}

.sp_search .form-wrap .pagination > .active > a, .sp_search .form-wrap .pagination > .active > a:focus, .sp_search .form-wrap .pagination > .active > a:hover {
    border-radius: 2px;
    background-color: #008de8;
    color: #fff
}

.sp_search .form-wrap .pagination > li > a, .sp_search .form-wrap .pagination > li > span {
    padding: 3px 9px 2px 8px
}

.sp_search .form-wrap .pagination li > span, .sp_search .form-wrap .pagination li > span:focus, .sp_search .form-wrap .pagination li > span:hover {
    border-radius: 2px;
    background-color: #fff
}

@media (max-width: 1279px) {
    .container {
        width: auto !important
    }
}

@media (max-width: 1023px) {
    .container {
        width: auto !important
    }
}

.new-proxy .swiper-proxy {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative
}

.new-proxy .swiper-proxy .swiper-wrapper {
    height: 500px
}

.new-proxy .pagination {
    position: absolute;
    z-index: 20;
    bottom: 10px;
    width: 100%;
    text-align: center
}

.new-proxy .swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #555;
    margin: 0 5px;
    opacity: .8;
    border: 1px solid #fff;
    cursor: pointer
}

.new-proxy .swiper-active-switch {
    background: red
}

.new-proxy .tol-proxy {
    margin-bottom: 10px;
    color: #666;
    font-size: 14px
}

.new-proxy .tol-proxy span {
    color: #007fcb
}

.new-proxy .case {
    margin-top: 0
}

.new-proxy .case .case-title {
    font-size: 45px;
    text-align: center;
    color: #333;
    margin: 60px 0 30px
}

.new-proxy .case .case-title.case-title-small {
    font-size: 20px;
    text-align: left;
    margin: 0 0 30px 0;
    color: #000
}

.new-proxy .case .case-filter {
    position: relative;
    z-index: 15;
    *zoom: 1;
    margin-bottom: 35px;
    *margin: 0 -16px 50px
}

.new-proxy .case .case-filter:after, .new-proxy .case .case-filter:before {
    display: table;
    content: ""
}

.new-proxy .case .case-filter:after {
    clear: both
}

.new-proxy .case .case-filter:after, .new-proxy .case .case-filter:before {
    display: table;
    content: ""
}

.new-proxy .case .case-filter:after {
    clear: both
}

.new-proxy .case .case-filter-item {
    cursor: pointer
}

.new-proxy .case .case-filter-item .column {
    line-height: 54px;
    height: 54px;
    position: relative;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 2px
}

.new-proxy .case .case-filter-item .case-filter-title {
    display: block;
    line-height: 54px;
    color: #666;
    -webkit-appearance: none;
    background-color: #fff;
    border: none;
    font-size: 16px;
    padding: 0 20px;
    outline: 0;
    position: relative
}

.new-proxy .case .case-filter-item .case-filter-title:after {
    position: absolute;
    top: 28px;
    right: 20px;
    content: '';
    transition: all .4s linear;
    -webkit-transform-origin: center 3px;
    -ms-transform-origin: center 3px;
    transform-origin: center 3px;
    border: 5px solid #999;
    border-color: #999 transparent transparent transparent
}

.new-proxy .case .case-filter-item .case-filter-title:hover {
    color: #008de8
}

.new-proxy .case .case-filter-item.case-filter-active .column {
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1)
}

.new-proxy .case .case-filter-item.case-filter-active .case-filter-title {
    color: #008de8
}

.new-proxy .case .case-filter-item.case-filter-active .case-filter-title:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.new-proxy .case .case-filter-item.case-filter-active .case-filter-dropdown {
    display: block
}

.new-proxy .case .case-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
    z-index: 9
}

.new-proxy .case .case-filter-dropdown a {
    color: #333;
    display: block;
    line-height: 45px;
    padding: 0 20px;
    transition: padding .4s linear
}

.new-proxy .case .case-filter-dropdown .case-filter-item-active a, .new-proxy .case .case-filter-dropdown li a:hover {
    padding-left: 25px;
    color: #fff;
    background-color: #23a8ee
}

.new-proxy .sp_search {
    margin: 0;
    background-color: #fff;
    border: none
}

.proxy-list .proxy-part {
    padding: 24px 0;
    display: flex;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #efefef
}

.proxy-list .proxy-part:hover:after {
    content: '';
    border: 1px solid #007fcb;
    border-radius: 2px;
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transform: scaleX(1.05);
    -ms-transform: scaleX(1.05);
    transform: scaleX(1.05)
}

.proxy-list .proxy-part .proxy-img {
    width: 85px
}

.proxy-list .proxy-part .proxy-img .img-block {
    width: 85px;
    height: 85px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center
}

.proxy-list .proxy-part .proxy-info {
    padding-left: 30px
}

.proxy-list .proxy-part .proxy-info .proxy-title {
    margin-bottom: 20px;
    font-size: 18px;
    color: #000
}

.proxy-list .proxy-part .proxy-info .info-block {
    margin-bottom: 10px
}

.proxy-list .proxy-part .proxy-info .info-block:last-child {
    margin-bottom: 15px
}

.proxy-list .proxy-part .info {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    color: #666
}

.proxy-list .proxy-part .info span {
    font-size: 14px
}

.proxy-list .proxy-part .info .info-num {
    display: inline-block;
    width: 18px;
    text-align: left;
    color: #296bef
}

.proxy-list .proxy-part .info .loc {
    display: inline-block;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom
}

.proxy-list .proxy-part .contact {
    font-size: 14px;
    color: #666
}

.proxy-list .proxy-part .contact .name {
    display: inline-block;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000;
    vertical-align: top
}

.proxy-list .proxy-part .contact .phone {
    display: inline-block;
    color: #007fcb
}

.proxy-more {
    display: none;
    margin-top: 40px;
    text-align: center
}

.proxy-more .proxy-button {
    padding: 12px 22px;
    color: #007fcb;
    border: 1px solid #007fcb;
    border-radius: 2px;
    cursor: pointer
}

.proxy-more .proxy-button:hover {
    background-color: #007fcb;
    color: #fff
}

.mb15 {
    margin-bottom: 15px
}

.mb30 {
    margin-bottom: 30px
}

.mb60 {
    margin-bottom: 60px
}

.proxy-detail {
    background-color: #fff;
    padding-bottom: 120px
}

.proxy-detail .case-detail-bd .case-summary {
    margin-top: 0
}

.proxy-detail .case-detail-bd .case-summary .case-intro {
    margin-bottom: 48px
}

@media (max-width: 1279px) {
    .proxy-detail .case-detail-bd .case-summary .case-intro {
        margin-bottom: 40px
    }
}

.proxy-detail .case-detail-bd .case-summary .container {
    border-radius: 2px;
    margin: 0 50px
}

@media (max-width: 1023px) {
    .proxy-detail .case-detail-bd .case-summary .container {
        margin: 0 20px
    }
}

.proxy-detail .case-detail-hd {
    height: 322px;
    background-image: none;
    background-color: #f5f9ff;
    color: #0b1531
}

.proxy-detail .case-detail-hd:before {
    display: none
}

@media (max-width: 1279px) {
    .proxy-detail .case-detail-hd {
        height: 272px
    }
}

@media (max-width: 1023px) {
    .proxy-detail .case-detail-hd {
        height: 164px
    }
}

.proxy-detail .case-detail-hd .container {
    display: block !important;
    padding: 126px 50px 0 50px
}

.proxy-detail .case-detail-hd .container:after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #a3adcd;
    border-radius: 4px
}

@media (max-width: 1023px) {
    .proxy-detail .case-detail-hd .container:after {
        width: 30px;
        height: 3px;
        border-radius: 3px
    }
}

.proxy-detail .case-detail-hd .container .case-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    margin-bottom: 24px
}

@media (max-width: 1279px) {
    .proxy-detail .case-detail-hd .container .case-title {
        font-size: 32px;
        margin-bottom: 14px;
        line-height: 48px
    }
}

@media (max-width: 1023px) {
    .proxy-detail .case-detail-hd .container .case-title {
        font-size: 24px;
        line-height: 42px;
        margin-bottom: 12px
    }
}

.proxy-detail .case-detail-hd .container .case-brand {
    font-size: 24px;
    line-height: 28px;
    text-align: left;
    margin-bottom: 32px
}

@media (max-width: 1279px) {
    .proxy-detail .case-detail-hd .container .case-brand {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 24px
    }
}

@media (max-width: 1023px) {
    .proxy-detail .case-detail-hd .container .case-brand {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 22px
    }
}

@media (max-width: 1279px) {
    .proxy-detail .case-detail-hd .container {
        padding: 100px 50px 0 50px
    }
}

@media (max-width: 1023px) {
    .proxy-detail .case-detail-hd .container {
        padding: 32px 20px 0 20px
    }
}

.proxy-detail .proxy-title {
    margin-bottom: 30px;
    height: 20px;
    line-height: 20px;
    font-size: 28px;
    font-weight: 700
}

@media (max-width: 1023px) {
    .proxy-detail .proxy-title {
        font-size: 22px
    }
}

.proxy-detail .proxy-content {
    margin-bottom: 30px;
    line-height: 25px
}

.proxy-detail .proxy-content .proxy-name {
    margin-right: 35px
}

.proxy-detail .proxy-content .proxy-phone {
    color: #296bef
}

.proxy-detail .info-block {
    display: inline-block;
    font-size: 0;
    vertical-align: sub;
    font-weight: 700;
    color: #000
}

.proxy-detail .info-block span {
    display: inline-block;
    font-size: 18px
}

@media (max-width: 1023px) {
    .proxy-detail .info-block span {
        font-size: 16px
    }
}

.proxy-detail .info-block .info-num {
    font-size: 18px;
    color: #0b1531
}

@media (max-width: 1023px) {
    .proxy-detail .info-block .info-num {
        font-size: 16px
    }
}

.proxy-detail .proxy-infocontent {
    line-height: 25px
}

.proxy-detail .qua {
    margin-bottom: 95px;
    padding: 0 135px
}

@media (max-width: 1023px) {
    .proxy-detail .qua {
        padding: 0;
        margin-bottom: 80px
    }
}

.proxy-detail .qua .big-proxy {
    position: relative;
    width: 100%;
    height: 595px;
    border: 1px solid #e7e7e7;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.proxy-detail .qua .big-proxy img {
    max-width: 100%;
    max-height: 100%
}

@media (max-width: 1023px) {
    .proxy-detail .qua .big-proxy {
        height: auto
    }
}

.proxy-detail .qua .big-proxy .num-block {
    position: absolute;
    display: inline-block;
    width: 53px;
    height: 40px;
    line-height: 40px;
    right: 19px;
    top: 11px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background-color: #a3adcd;
    z-index: 1;
    border-radius: 7px
}

@media (max-width: 1279px) {
    .proxy-detail .qua .big-proxy .num-block {
        width: 45px;
        height: 37px;
        font-size: 12px;
        top: 20px;
        right: 16px
    }
}

.proxy-detail .qua .proxy-choosen {
    position: relative;
    padding: 20px 56px
}

.proxy-detail .qua .proxy-choosen .choosen-block {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    font-size: 0
}

.proxy-detail .qua .proxy-choosen .choose {
    display: inline-block;
    margin-right: 10px;
    width: 135px;
    height: 100px;
    border: 1px solid #e7e7e7;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden
}

@media (max-width: 1279px) {
    .proxy-detail .qua .proxy-choosen .choose {
        width: 120px;
        height: 85px
    }
}

.proxy-detail .qua .proxy-choosen .choose:hover {
    border-color: #296aef
}

.proxy-detail .qua .proxy-choosen .choose:last-child {
    margin-right: 0
}

.proxy-detail .qua .proxy-choosen .choose img {
    width: 100%
}

.proxy-detail .qua .proxy-choosen .choose.choosen {
    border-color: #296aef
}

.proxy-detail .qua .proxy-choosen .left-choose, .proxy-detail .qua .proxy-choosen .right-choose {
    position: absolute;
    top: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(44, 144, 255, .1);
    cursor: pointer;
    transition: all .2s linear
}

.proxy-detail .qua .proxy-choosen .left-choose img, .proxy-detail .qua .proxy-choosen .right-choose img {
    content: url(../images/service/swiper_arr_default.png)
}

.proxy-detail .qua .proxy-choosen .left-choose:hover, .proxy-detail .qua .proxy-choosen .right-choose:hover {
    border-color: #296aef
}

.proxy-detail .qua .proxy-choosen .left-choose:hover img, .proxy-detail .qua .proxy-choosen .right-choose:hover img {
    content: url(../images/service/swiper_arr_active.png)
}

.proxy-detail .qua .proxy-choosen .left-choose img, .proxy-detail .qua .proxy-choosen .right-choose img {
    display: inline-block;
    width: 40%;
    height: 40%;
    transition: all .2s linear
}

.proxy-detail .qua .proxy-choosen .left-choose.disabled, .proxy-detail .qua .proxy-choosen .right-choose.disabled {
    opacity: .5;
    cursor: default
}

.proxy-detail .qua .proxy-choosen .left-choose.disabled:hover, .proxy-detail .qua .proxy-choosen .right-choose.disabled:hover {
    border-color: rgba(44, 144, 255, .1)
}

.proxy-detail .qua .proxy-choosen .left-choose.disabled:hover img, .proxy-detail .qua .proxy-choosen .right-choose.disabled:hover img {
    content: normal
}

@media (max-width: 1279px) {
    .proxy-detail .qua .proxy-choosen .left-choose, .proxy-detail .qua .proxy-choosen .right-choose {
        width: 32px;
        height: 32px
    }
}

.proxy-detail .qua .proxy-choosen .left-choose {
    left: 0;
    -webkit-transform: rotateZ(180deg);
    -ms-transform: rotate(180deg);
    transform: rotateZ(180deg)
}

.proxy-detail .qua .proxy-choosen .right-choose {
    right: 0
}

.proxy-detail .proxy-code {
    font-weight: 700;
    margin-bottom: 15px
}

@media (max-width: 1023px) {
    .proxy-detail .proxy-code {
        text-align: center
    }
}

.proxy-detail .code-block {
    display: inline-block;
    width: 160px;
    height: 160px;
    padding: 10px;
    border: 1px solid #e7e7e7
}

@media (max-width: 1023px) {
    .proxy-detail .code-block {
        margin: 0 auto;
        display: block
    }
}

.proxy-detail .code-block img {
    width: 100%
}

.scroll-height {
    max-height: 300px;
    overflow-y: scroll
}

@media (max-width: 1023px) {
    .service_hide .wrapper {
        background-color: #fff;
        margin-top: 64px
    }
}

.proxy_guide_xs {
    visibility: hidden;
    margin-top: 56px
}

@media (max-width: 1279px) {
    .proxy_guide_xs {
        margin-top: 48px
    }
}

@media (max-width: 1023px) {
    .proxy_guide_xs {
        margin-top: 68px;
        visibility: visible
    }
}

.proxy_nav {
    z-index: 2;
    position: relative;
    width: 1200px;
    margin: 0 auto;
    top: 20px
}

@media (max-width: 1279px) {
    .proxy_nav {
        width: 100%;
        top: 0
    }
}

@media (max-width: 1023px) {
    .proxy_nav {
        width: 100%
    }
}

.proxy_nav > div {
    display: flex;
    align-items: center;
    padding-left: 50px
}

@media (max-width: 1279px) {
    .proxy_nav > div {
        padding-left: 50px
    }
}

.proxy_nav > div > span {
    display: block;
    padding: 8px 12px;
    background-color: #e5f0ff;
    border-radius: 4px;
    color: #296bef;
    font-size: 14px;
    position: relative;
    margin-right: 28px;
    line-height: 14px;
    transition: all .2s linear;
    cursor: pointer
}

.proxy_nav > div > span:hover {
    background-color: #296bef;
    color: #fff
}

@media (max-width: 1279px) {
    .proxy_nav > div > span {
        padding: 6px 10px;
        font-size: 12px;
        line-height: 12px
    }
}

.proxy_nav > div > span:not(:last-of-type):after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    background: url(../images/service/arr_right.png) no-repeat center/contain;
    position: absolute;
    right: -18px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (max-width: 1023px) {
    .proxy_nav {
        display: none
    }
}

.wechat-new .solution-hd {
    width: 100%;
    height: 0;
    position: relative;
    color: #fff;
    line-height: 1
}

.wechat-new .solution-hd .solution-title {
    position: absolute;
    top: 0;
    right: 0;
    height: 150px;
    left: 0;
    bottom: 0;
    margin: auto;
    text-align: center
}

.wechat-new .solution-hd .solution-title h1 {
    font-size: 40px;
    letter-spacing: .1em;
    margin-bottom: 40px
}

.wechat-new .solution-hd .solution-title a {
    font-size: 18px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    line-height: 45px;
    height: 45px;
    border-radius: 2px;
    background-color: #0088e5
}

.wechat-new .solution-hd .solution-title a:hover {
    color: #fff;
    border-color: #006eb5 !important;
    background-color: #006eb5 !important
}

.wechat-new .solution-hd .wechat-button {
    margin-top: 40px
}

.wechat-new .solution-showList {
    width: 1200px;
    margin: 0 auto
}

.wechat-new .solution-showList a {
    cursor: pointer
}

.wechat-new .solution-showTabs {
    text-align: center;
    overflow: hidden;
    position: relative
}

.wechat-new .solution-showTabs:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #ebe9e9;
    position: absolute;
    left: 0;
    bottom: 0
}

.wechat-new .solution-showTabs.tabs-4 > a {
    display: inline-block;
    margin: 0 60px;
    color: #000;
    font-size: 18px;
    margin-bottom: 15px;
    position: relative
}

.wechat-new .solution-showTabs > a.active, .wechat-new .solution-showTabs > a:hover {
    color: #008de8
}

.wechat-new .solution-showTabs > a.active:after, .wechat-new .solution-showTabs > a:hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #008de8
}

.wechat-new .solution-showTabs > a.active:after, .wechat-new .solution-showTabs > a:hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #008de8
}

.wechat-new .solution-showTabs > a:after {
    position: absolute;
    left: 0;
    bottom: -15px;
    height: 3px;
    width: 100%;
    content: " ";
    background-color: #008de8;
    background-color: transparent \9;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.wechat-new .choose-business {
    padding-top: 60px;
    background-color: #fff
}

.wechat-new .source-description {
    padding: 60px 0
}

.wechat-new .source-description .description-word {
    padding-top: 24px
}

.wechat-new .wechat-business-info {
    background-color: #f9f9f9
}

.wechat-new .scene-phone .scene-pic {
    background-image: url(../images/source/bg-phoneall.png);
    background-image: -webkit-image-set(url(../images/source/bg-phoneall.png) 1x, url(../images/source/bg-phoneall@2x.png) 2x);
    width: 292px;
    height: 596px
}

.wechat-new .scene-phone .scene-pic .scene-paper {
    width: 260px;
    height: 461px;
    margin-top: 60px
}

.wechat-new .news-scene {
    padding: 60px 0
}

.wechat-new .scene .scene-item {
    margin-top: 60px;
    border: 0
}

.wechat-new .purchase-way {
    padding-top: 50px
}

.wechat-new .purchase-content, .wechat-new .purchase-contentmore {
    width: 900px;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 50px
}

.wechat-new .purchase-contentmore {
    width: 1200px
}

.wechat-new .description-list ul {
    overflow: hidden
}

.wechat-new .wechat-buyway {
    text-align: center
}

.wechat-new .wechat-buyway .buyway-border {
    margin: 0 120px;
    opacity: .2;
    display: inline-block;
    height: 256px;
    width: 1px;
    background-color: #979797
}

.wechat-new .wechat-buyway .buyway-list {
    padding-left: 20px
}

.wechat-new .wechat-buyway .buyway-list li {
    margin-bottom: 10px;
    list-style-type: disc
}

.wechat-new .description-list li h4 {
    margin: 20px 0
}

.wechat-new .wechat-icon {
    display: inline-block;
    background: url(../images/wechat/wechat_sprites.png) no-repeat;
    height: 48px;
    width: 48px
}

.wechat-new .brand-icon {
    background-position: -96px -48px
}

.wechat-new .shop-icon {
    background-position: 0 -48px
}

.wechat-new .info-icon {
    background-position: 0 0
}

.wechat-new .product-icon {
    background-position: 0 -96px
}

.wechat-new .app-icon {
    background-position: -144px -96px
}

.wechat-new .coupon-icon {
    background-position: 0 -144px
}

.wechat-new .public-icon {
    background-position: -96px 0
}

.wechat-new .game-icon {
    background-position: -96px -144px
}

.wechat-new .choosecsae-block {
    margin-top: 40px
}

.wechat-new .choosecsae-block .choose-list {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.wechat-new .choosecsae-block .choose-list li {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    width: 140px;
    padding: 20px 0;
    border: 1px solid #e0e0e0;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    cursor: pointer
}

.wechat-new .choosecsae-block .choose-list li:last-child {
    margin-right: 0
}

.wechat-new .choosecsae-block .choose-list li::after {
    display: none;
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(-45deg);
    -ms-transform: translateX(-50%) rotate(-45deg);
    transform: translateX(-50%) rotate(-45deg);
    width: 8px;
    height: 8px;
    border-left: 2px solid #008de8;
    border-bottom: 2px solid #008de8;
    background-color: #f9f9f9
}

.wechat-new .choosecsae-block .choose-list li.active, .wechat-new .choosecsae-block .choose-list li:hover {
    border: 2px solid #008de8;
    color: #008de8
}

.wechat-new .choosecsae-block .choose-list li.active::after, .wechat-new .choosecsae-block .choose-list li:hover::after {
    display: inline-block
}

.wechat-new .choosecsae-block .choose-list li.active .brand-icon, .wechat-new .choosecsae-block .choose-list li:hover .brand-icon {
    background-position: -144px -48px
}

.wechat-new .choosecsae-block .choose-list li.active .shop-icon, .wechat-new .choosecsae-block .choose-list li:hover .shop-icon {
    background-position: -48px -48px
}

.wechat-new .choosecsae-block .choose-list li.active .info-icon, .wechat-new .choosecsae-block .choose-list li:hover .info-icon {
    background-position: -48px 0
}

.wechat-new .choosecsae-block .choose-list li.active .product-icon, .wechat-new .choosecsae-block .choose-list li:hover .product-icon {
    background-position: -48px -96px
}

.wechat-new .choosecsae-block .choose-list li.active .app-icon, .wechat-new .choosecsae-block .choose-list li:hover .app-icon {
    background-position: -96px -96px
}

.wechat-new .choosecsae-block .choose-list li.active .coupon-icon, .wechat-new .choosecsae-block .choose-list li:hover .coupon-icon {
    background-position: -48px -144px
}

.wechat-new .choosecsae-block .choose-list li.active .public-icon, .wechat-new .choosecsae-block .choose-list li:hover .public-icon {
    background-position: -144px 0
}

.wechat-new .choosecsae-block .choose-list li.active .game-icon, .wechat-new .choosecsae-block .choose-list li:hover .game-icon {
    background-position: -144px -144px
}

.wechat-new .description-item {
    display: inline-block;
    text-align: left;
    vertical-align: top
}

.noshow {
    display: none
}

.solution-fixed {
    background: #fff;
    width: 240px;
    z-index: 9999;
    position: fixed;
    right: 0;
    bottom: 0;
    border: 1px #dcdcdc solid
}

.solution-fixed .solution-fixedTitle {
    transition: all .5s linear;
    background: #f1f1f1;
    cursor: pointer;
    border-bottom: 1px #dcdcdc solid;
    height: 60px;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 60px;
    text-align: center;
    position: relative
}

.solution-fixed .solution-fixedTitle span {
    display: block;
    position: absolute;
    top: 50%;
    right: 7%;
    margin-top: -15px;
    width: 30px;
    height: 30px
}

.solution-fixed .solution-fixedTitle .solution-fixedUp {
    background: url(../images/solution/fixed_up.png) center no-repeat
}

.solution-fixed .solution-fixedTitle .solution-fixedDown {
    background: url(../images/solution/fixed_down.png) center no-repeat
}

.solution-fixed .solution-fixedBox {
    height: 180px;
    padding: 20px;
    box-sizing: border-box;
    position: relative
}

.solution-fixed .solution-fixedBox a {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 200px;
    height: 50px;
    padding: 0 15px;
    text-align: center;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 50px;
    border-radius: 5px
}

.solution-fixed .solution-fixedBox a:hover {
    color: #fff;
    border-color: #006eb5 !important;
    background-color: #006eb5 !important
}

.solution-fixed .solution-fixedBox .solution-fixedText {
    width: 100%;
    color: #666;
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
    letter-spacing: .05em;
    padding-top: 75px
}

.solution-fixed .solution-fixedBox .solution-fixedNum {
    width: 100%;
    font-size: 28px;
    font-weight: 100;
    color: #3c8de1;
    text-align: center
}

.pcbanner-block {
    position: relative;
    height: 600px;
    background-image: url(../images/company.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden
}

.pcbanner-block .video-block {
    position: relative;
    height: 100%
}

.pcbanner-block .covervid-video {
    position: absolute;
    background: #0b1531;
    height: 100%;
    width: 100%;
    z-index: 1;
    top: 0
}

.pcbanner-block .covervid-video .video {
    height: 177.77777778vh;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    position: absolute;
    top: -200px;
    width: 177.77777778vh;
    z-index: 1;
    pointer-events: none
}

.pcbanner-block video {
    -o-object-fit: cover;
    object-fit: cover
}

.pcbanner-block .banner-content {
    text-align: center;
    position: absolute;
    top: 150px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10
}

.pcbanner-block .banner-content .title {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 24px;
    font-size: 48px;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2px
}

@media (max-width: 1279px) {
    .pcbanner-block .banner-content .title {
        margin-bottom: 18px;
        padding-bottom: 16px
    }
}

.pcbanner-block .banner-content .title:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 6px;
    width: 40px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .pcbanner-block .banner-content .title:after {
        height: 4px;
        width: 32px
    }
}

.pcbanner-block .banner-content .small-title {
    font-size: 18px;
    color: #fff;
    line-height: 1;
    letter-spacing: 2px;
    margin: 0 auto 24px
}

@media (max-width: 1279px) {
    .pcbanner-block .banner-content .small-title {
        margin: 0 auto 18px
    }
}

.pcbanner-block .banner-content .sub-title {
    margin: 0 auto 40px;
    width: 470px;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 16px
}

.pcbanner-block .banner-content .pre-button {
    box-sizing: border-box;
    display: inline-block;
    height: 58px;
    line-height: 58px;
    border-radius: 29px;
    padding: 0 40px;
    color: #fff;
    font-size: 18px;
    background: #ffa601
}

.pcbanner-block .banner-content .pre-button:hover {
    background-color: #fa8d01
}

@media (max-width: 1279px) {
    .pcbanner-block {
        height: 450px
    }

    .pcbanner-block .banner-content {
        top: 95px
    }

    .pcbanner-block .banner-content .title {
        font-size: 40px
    }

    .pcbanner-block .banner-content .small-title {
        font-size: 16px
    }

    .pcbanner-block .banner-content .sub-title {
        font-size: 14px
    }

    .pcbanner-block .banner-content .pre-button {
        height: 52px;
        line-height: 52px;
        font-size: 14px
    }
}

@media (max-width: 1023px) {
    .pcbanner-block {
        display: none
    }
}

.index-block {
    position: relative
}

.index-block .index-radius {
    position: absolute;
    top: -60px;
    left: 0;
    height: 60px;
    width: 100%;
    overflow: hidden;
    z-index: 10
}

.index-block .index-radius .radius-pr {
    position: relative;
    height: 100%
}

.index-block .index-radius .radius-block {
    position: absolute;
    bottom: -80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 160%;
    height: 600%;
    border: 80px solid #f5f9ff;
    border-radius: 96%
}

@media (max-width: 1023px) {
    .index-block .index-radius .radius-block {
        width: 240%
    }
}

.new-index .index-part {
    box-sizing: border-box;
    height: 600px;
    text-align: center
}

@media (max-width: 1279px) {
    .new-index .index-part {
        height: 450px
    }
}

.new-index .index-part .part-body {
    display: flex;
    box-sizing: border-box;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center
}

.new-index .index-part .part-body .part-img {
    order: 1;
    width: 684px
}

.new-index .index-part .part-body .part-img img {
    width: 70%
}

.new-index .index-part .part-body .part-content {
    order: 0;
    text-align: left
}

.new-index .index-part .part-body .part-content .part-target {
    margin-bottom: 16px;
    font-size: 16px;
    color: #ffa601;
    line-height: 1
}

@media (max-width: 1279px) {
    .new-index .index-part .part-body .part-content .part-target {
        margin-bottom: 14px;
        font-size: 14px
    }
}

.new-index .index-part .part-body .part-content .part-title {
    position: relative;
    margin-bottom: 28px;
    padding-bottom: 30px;
    font-size: 36px;
    color: #0b1531;
    font-weight: 500;
    letter-spacing: 1.5px
}

.new-index .index-part .part-body .part-content .part-title:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 6px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .new-index .index-part .part-body .part-content .part-title {
        margin-bottom: 20px;
        padding-bottom: 20px;
        font-size: 32px
    }

    .new-index .index-part .part-body .part-content .part-title:after {
        width: 32px;
        height: 4px
    }
}

.new-index .index-part .part-body .part-content .part-content {
    display: inline-block;
    width: 470px;
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 2;
    color: #6b7799
}

@media (max-width: 1279px) {
    .new-index .index-part .part-body .part-content .part-content {
        font-size: 14px;
        margin-bottom: 24px
    }
}

.new-index .index-part:nth-child(odd) {
    background-color: #f5f9ff
}

.new-index .index-part:nth-child(even) {
    background-color: #fff
}

.new-index .index-part:nth-child(even) .part-body .part-img {
    order: 0
}

.new-index .index-part:nth-child(even) .part-body .part-content {
    order: 1
}

.new-index .part-list li {
    margin-bottom: 20px
}

.new-index .part-list li:last-child {
    margin-bottom: 0
}

.new-index .part-list p {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px;
    color: #0b1531
}

.new-index .part-list div {
    font-size: 16px;
    color: #6b7799
}

@media (max-width: 1279px) {
    .new-index .index-part .part-body {
        width: 1000px
    }

    .new-index .index-part .part-body .part-img {
        width: 513px
    }
}

@media (max-width: 1023px) {
    .pc-part {
        display: none
    }
}

.m-part {
    display: none
}

@media (max-width: 1023px) {
    .m-part {
        display: block;
        margin-top: -50px;
    }
}

.m-part .index-part {
    box-sizing: border-box;
    text-align: center;
    padding: 50px 20px 0;
    height: inherit
}

.m-part .index-part .part-body {
    display: block;
    box-sizing: border-box;
    height: 100%;
    width: auto;
    margin: 0 auto
}

.m-part .index-part .part-body .part-img {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    box-sizing: border-box
}

.m-part .index-part .part-body .part-img img {
    width: 100%
}

.m-part .index-part .part-body .part-content {
    text-align: left
}

.m-part .index-part .part-body .part-content .part-target {
    margin-bottom: 12px;
    font-size: 16px;
    color: #ffa601
}

.m-part .index-part .part-body .part-content .part-title {
    position: relative;
    margin-bottom: 16px;
    padding-bottom: 16px;
    font-size: 22px;
    color: #0b1531;
    font-weight: 500;
    letter-spacing: 1.5px
}

.m-part .index-part .part-body .part-content .part-title:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 24px;
    background-color: #ffa601;
    border-radius: 3px
}

.m-part .index-part .part-body .part-content .part-content {
    display: inline-block;
    width: 100%;
    margin-bottom: 24px;
    font-size: 12px;
    line-height: 2;
    color: #6b7799
}

.m-part .index-part:nth-child(odd) {
    background-color: #f5f9ff
}

.m-part .index-part:nth-child(even) {
    background-color: #fff
}

.m-part .part-list li {
    margin-bottom: 20px
}

.m-part .part-list li:last-child {
    margin-bottom: 0
}

.m-part .part-list p {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px;
    color: #0b1531
}

.m-part .part-list div {
    font-size: 16px;
    color: #6b7799
}

.btn-erea {
    padding-top: 30px;
    text-align: center
}

.pcswiper-part {
    position: relative;
    height: 1000px;
    box-sizing: border-box;
    background-color: #f5f9ff
}

@media (max-width: 1023px) {
    .pcswiper-part {
        display: none
    }
}

.pcswiper-part .swiper-radius {
    position: absolute;
    top: -60px;
    left: 0;
    height: 60px;
    width: 100%;
    overflow: hidden
}

.pcswiper-part .swiper-radius .radius-pr {
    position: relative;
    height: 100%
}

.pcswiper-part .swiper-radius .radius-block {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 160%;
    height: 600%;
    border: 80px solid #f5f9ff;
    border-radius: 96%
}

@media (max-width: 1023px) {
    .pcswiper-part .swiper-radius .radius-block {
        width: 190%
    }
}

.pcswiper-part .swiper-indexcontain {
    position: relative
}

.pcswiper-part .swiper-body {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    padding: 16px 0 0
}

.pcswiper-part .swiper-body .case-tolTittle {
    margin-bottom: 16px;
    font-size: 16px;
    color: #ffa601;
    text-align: center
}

.pcswiper-part .swiper-body .case-tolContent {
    margin-bottom: 56px;
    position: relative;
    padding-bottom: 28px;
    font-size: 36px;
    color: #0b1531;
    text-align: center;
    font-weight: 500
}

.pcswiper-part .swiper-body .case-tolContent:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 6px;
    width: 40px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .pcswiper-part .swiper-body .case-tolContent:after {
        height: 4px;
        width: 32px
    }
}

.pcswiper-part .swiper-body .swiper-one {
    background-image: url(../images/new/swiper-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.pcswiper-part .swiper-index {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    height: 550px;
    overflow: hidden
}

.pcswiper-part .swiper-index .swiper-slide .case-swiper {
    margin: 0 auto;
    width: 1200px;
    height: 468px;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(44, 114, 255, .1);
    box-shadow: 0 4px 20px rgba(44, 114, 255, .08);
    overflow: hidden
}

.pcswiper-part .swiper-index .swiper-slide .case-body {
    display: block;
    font-size: 0
}

.pcswiper-part .swiper-index .swiper-slide .case-body .case-img {
    height: 468px;
    width: 528px;
    display: inline-block
}

.pcswiper-part .swiper-index .swiper-slide .case-body .case-main {
    padding: 56px;
    display: inline-block;
    width: 650px;
    height: 468px;
    vertical-align: top;
    box-sizing: border-box
}

@media (max-width: 1279px) {
    .pcswiper-part .swiper-index .swiper-slide .case-body .case-main .new-btn {
        height: 42px;
        line-height: 42px;
        padding: 0 24px
    }
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-img {
    margin-bottom: 48px
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-img img {
    width: 317px
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-title {
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 500;
    color: #0b1531;
    letter-spacing: 1.5;
    line-height: 1
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-content {
    margin-bottom: 24px;
    font-size: 16px;
    color: #6b7799;
    letter-spacing: 1
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-data {
    margin-bottom: 40px
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-left {
    margin-right: 32px;
    display: inline-block;
    font-size: 16px
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-right {
    font-size: 16px;
    display: inline-block;
    padding-left: 32px;
    border-left: 1px solid #e0eaff
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-title {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: #296bef;
    font-weight: 500
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-title p {
    margin-right: 4px;
    font-size: 32px;
    color: #296bef
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-title i {
    font-size: 16px;
    font-style: normal
}

.pcswiper-part .swiper-index .swiper-slide .case-body .brand-data p {
    color: #6b7799;
    text-align: center
}

.pcswiper-part .swiper-index .swiper-button-next, .pcswiper-part .swiper-index .swiper-button-prev, .pcswiper-part .swiper-index .swiper-container-rtl .swiper-button-next, .pcswiper-part .swiper-index .swiper-container-rtl .swiper-button-prev {
    background-image: url(../images/new/swiper-button.png);
    background-size: 102px auto;
    width: 102px;
    height: 104px;
    margin-top: 0;
    top: 30%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

.pcswiper-part .swiper-index .swiper-button-next, .pcswiper-part .swiper-index .swiper-container-rtl .swiper-button-prev {
    -webkit-transform: rotate(180deg) translateX(-100%);
    -ms-transform: rotate(180deg) translateX(-100%);
    transform: rotate(180deg) translateX(-100%)
}

.pcswiper-part .swiper-index .swiper-pagination-bullet {
    opacity: 1
}

.pcswiper-part .swiper-pagination {
    text-align: center
}

.pcswiper-part .swiper-pagination > span {
    cursor: pointer;
    display: inline-block;
    background: #c4d4f5;
    width: 14px;
    height: 8px;
    border-radius: 12px;
    margin: 0 4px;
    transition: all .4s
}

.pcswiper-part .swiper-pagination > span.swiper-pagination-bullet-active {
    width: 28px;
    background: #ffa601
}

@media (max-width: 1279px) {
    .pcswiper-part {
        height: 760px
    }

    .pcswiper-part .swiper-body {
        width: 980px
    }

    .pcswiper-part .swiper-body .swiper-slide .case-swiper {
        width: 830px;
        height: 334px
    }

    .pcswiper-part .swiper-index {
        width: 1000px;
        height: 410px
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body {
        display: block;
        font-size: 0
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .case-img {
        height: 334px;
        width: 346px;
        display: inline-block
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .case-img img {
        width: 100%
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .case-main {
        padding: 32px;
        display: inline-block;
        width: 482px;
        height: 334px;
        vertical-align: top;
        box-sizing: border-box
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-img {
        margin-bottom: 24px
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-img img {
        width: 238px
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-title {
        margin-bottom: 8px;
        font-size: 20px;
        font-weight: 500;
        color: #0b1531
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-content {
        margin-bottom: 12px;
        font-size: 14px;
        color: #6b7799;
        height: 60px
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-data {
        margin-bottom: 24px
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-left {
        margin-right: 24px;
        display: inline-block;
        font-size: 14px
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-right {
        font-size: 14px;
        padding-left: 24px;
        border-left: 1px solid #e0eaff
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-title {
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: baseline;
        color: #296bef;
        font-weight: 500
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-title p {
        margin-right: 4px;
        font-size: 28px;
        color: #296bef
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-data .data-title i {
        font-size: 14px;
        font-style: normal
    }

    .pcswiper-part .swiper-index .swiper-slide .case-body .brand-data p {
        color: #6b7799
    }
}

.mswiper-part {
    display: none;
    position: relative;
    height: auto;
    padding-bottom: 40px;
    box-sizing: border-box;
    background-color: #f5f9ff
}

@media (max-width: 1023px) {
    .mswiper-part {
        display: block
    }
}

.mswiper-part .swiper-radius {
    position: absolute;
    top: -60px;
    left: 0;
    height: 60px;
    width: 100%;
    overflow: hidden
}

.mswiper-part .swiper-radius .radius-pr {
    position: relative;
    height: 100%
}

.mswiper-part .swiper-radius .radius-block {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 150%;
    height: 600%;
    border: 80px solid #f5f9ff;
    border-radius: 96%
}

@media (max-width: 1023px) {
    .mswiper-part .swiper-radius .radius-block {
        width: 240%
    }
}

.mswiper-part .swiper-indexcontain {
    position: relative
}

.mswiper-part .swiper-wrapper {
    padding: 0 20px
}

.mswiper-part .swiper-body {
    position: relative;
    top: -20px;
    width: auto;
    margin: 0 auto;
    padding: 0
}

.mswiper-part .swiper-body .case-tolTittle {
    margin-bottom: 12px;
    font-size: 12px;
    color: #ffa601;
    text-align: center
}

.mswiper-part .swiper-body .case-tolContent {
    margin-bottom: 32px;
    position: relative;
    padding-bottom: 16px;
    font-size: 22px;
    color: #0b1531;
    text-align: center;
    font-weight: 500
}

.mswiper-part .swiper-body .case-tolContent:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 4px;
    width: 24px;
    background-color: #ffa601;
    border-radius: 3px
}

.mswiper-part .mswiper-index {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: hidden
}

.mswiper-part .mswiper-index .m-img {
    width: 100%;
    height: 180px
}

.mswiper-part .mswiper-index .swiper-slide .case-swiper {
    margin: 0 auto;
    width: auto;
    height: auto;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(44, 114, 255, .1);
    box-shadow: 0 4px 20px rgba(44, 114, 255, .08);
    overflow: hidden
}

.mswiper-part .mswiper-index .swiper-slide .case-body {
    display: block
}

.mswiper-part .mswiper-index .swiper-slide .case-body .mswiper-one {
    background-image: url(../images/new/swiper-bg.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 180px
}

.mswiper-part .mswiper-index .swiper-slide .case-body .case-main {
    padding: 24px 20px 0
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-img {
    margin-bottom: 20px
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-img img {
    width: 100%
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-title {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 500;
    color: #0b1531;
    letter-spacing: 1px;
    height: 44px
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-content {
    margin-bottom: 24px;
    font-size: 15px;
    color: #6b7799
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data {
    margin-bottom: 25px;
    text-align: center
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data .data-left {
    display: inline-block
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data .data-left p {
    font-size: 12px
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data .data-right {
    display: inline-block;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #e0eaff
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data .data-right p {
    font-size: 12px
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data .data-title {
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: #296bef;
    font-weight: 500
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data .data-title p {
    margin-right: 2px;
    font-size: 28px;
    color: #296bef
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data .data-title i {
    font-size: 12px;
    font-style: normal
}

.mswiper-part .mswiper-index .swiper-slide .case-body .brand-data p {
    color: #6b7799
}

.mswiper-part .mswiper-index .swiper-button-next, .mswiper-part .mswiper-index .swiper-button-prev, .mswiper-part .mswiper-index .swiper-container-rtl .swiper-button-next, .mswiper-part .mswiper-index .swiper-container-rtl .swiper-button-prev {
    background-image: url(../images/new/swiper-button.png);
    background-size: 102px auto;
    width: 102px;
    height: 104px;
    margin-top: 0;
    top: 30%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

.mswiper-part .mswiper-index .swiper-button-next, .mswiper-part .mswiper-index .swiper-container-rtl .swiper-button-prev {
    -webkit-transform: rotate(180deg) translateX(-100%);
    -ms-transform: rotate(180deg) translateX(-100%);
    transform: rotate(180deg) translateX(-100%)
}

.mswiper-part .mswiper-index .swiper-pagination-bullet {
    opacity: 1
}

.mswiper-part .swiper-pagination {
    text-align: center
}

.mswiper-part .swiper-pagination > span {
    cursor: pointer;
    display: inline-block;
    background: #c4d4f5;
    width: 14px;
    height: 8px;
    border-radius: 12px;
    margin: 0 4px;
    transition: all .4s
}

.mswiper-part .swiper-pagination > span.swiper-pagination-bullet-active {
    width: 28px;
    background: #ffa601
}

.sprite_cost {
    display: inline-block;
    background-image: url(../images/new/sprite_cost.png);
    background-size: 190px auto;
    width: 190px;
    height: 150px
}

.pccost-manage {
    padding: 80px 0 140px;
    background-color: #fff
}

@media (max-width: 1023px) {
    .pccost-manage {
        display: none
    }
}

.pccost-manage .cost-title {
    text-align: center;
    margin-bottom: 90px
}

.pccost-manage .cost-title .pre-title {
    margin-bottom: 16px;
    font-size: 16px;
    color: #ffa601;
    line-height: 1
}

.pccost-manage .cost-title .title {
    position: relative;
    font-size: 36px;
    color: #0b1531;
    font-weight: 500;
    letter-spacing: 1.5px
}

.pccost-manage .cost-title .title:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 6px;
    width: 40px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .pccost-manage .cost-title .title:after {
        height: 4px;
        width: 32px
    }
}

.pccost-manage .cost-info {
    margin: 0 auto;
    width: 1200px;
    display: flex;
    justify-content: space-between
}

.pccost-manage .cost-info .info-block {
    text-align: center
}

.pccost-manage .cost-info .info-block .info-content i {
    margin-bottom: 30px
}

.pccost-manage .cost-info .info-block .info-content .title {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 24px;
    color: #0b1531;
    letter-spacing: 1.5px;
    line-height: 1
}

.pccost-manage .cost-info .info-block .info-content .content {
    width: 310px;
    display: inline-block;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 1px;
    color: #6b7799
}

.pccost-manage .cost-info .info-block .registered {
    display: inline-block;
    background-image: url(../images/new/sprite_cost.png);
    background-size: 190px auto;
    width: 190px;
    height: 150px;
    background-position: 0 0;
    margin-bottom: 32px
}

.pccost-manage .cost-info .info-block .cost {
    display: inline-block;
    background-image: url(../images/new/sprite_cost.png);
    background-size: 190px auto;
    width: 190px;
    height: 150px;
    background-position: 0 -150px;
    margin-bottom: 32px
}

.pccost-manage .cost-info .info-block .different {
    display: inline-block;
    background-image: url(../images/new/sprite_cost.png);
    background-size: 190px auto;
    width: 190px;
    height: 150px;
    background-position: 0 -300px;
    margin-bottom: 32px
}

@media (max-width: 1279px) {
    .pccost-manage .cost-info {
        width: 980px
    }
}

.mcost-manage {
    display: none;
    padding: 50px 20px;
    background-color: #fff
}

@media (max-width: 1023px) {
    .mcost-manage {
        display: block
    }
}

.mcost-manage .cost-title {
    text-align: left
}

.mcost-manage .cost-title .pre-title {
    margin-bottom: 12px;
    font-size: 12px;
    color: #ffa601
}

.mcost-manage .cost-title .title {
    position: relative;
    font-size: 22px;
    color: #0b1531;
    font-weight: 500;
    margin-bottom: 16px;
    padding-bottom: 16px
}

.mcost-manage .cost-title .title:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 24px;
    background-color: #ffa601;
    border-radius: 3px
}

.mcost-manage .cost-info {
    margin: 0 auto;
    width: auto
}

.mcost-manage .cost-info .info-block {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.mcost-manage .cost-info .info-block .info-content {
    text-align: left;
    flex: 1
}

.mcost-manage .cost-info .info-block .info-content .title {
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 16px;
    color: #0b1531
}

.mcost-manage .cost-info .info-block .info-content .content {
    width: auto;
    display: inline-block;
    font-size: 12px;
    line-height: inherit;
    letter-spacing: inherit;
    color: #6b7799
}

.mcost-manage .cost-info .info-block .registered {
    display: inline-block;
    background-image: url(../images/new/sprite_cost.png);
    background-size: 190px auto;
    width: 190px;
    height: 150px;
    background-position: 0 0
}

.mcost-manage .cost-info .info-block .cost {
    display: inline-block;
    background-image: url(../images/new/sprite_cost.png);
    background-size: 190px auto;
    width: 190px;
    height: 150px;
    background-position: 0 -75px
}

.mcost-manage .cost-info .info-block .different {
    display: inline-block;
    background-image: url(../images/new/sprite_cost.png);
    background-size: 190px auto;
    width: 190px;
    height: 150px;
    background-position: 0 -150px
}

.mcost-manage .cost-info .info-block .cost, .mcost-manage .cost-info .info-block .different, .mcost-manage .cost-info .info-block .registered {
    margin-right: 10px;
    background-size: 95px auto;
    width: 95px;
    height: 75px
}

.mbanner-block {
    display: none;
    height: 230px;
    background-image: url(../images/company.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mbanner-block .banner-content {
    padding-top: 60px;
    text-align: center
}

.mbanner-block .banner-content .title {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 12px;
    font-size: 28px;
    color: #fff;
    font-weight: 500
}

.mbanner-block .banner-content .title:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -4px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 4px;
    width: 24px;
    background-color: #ffa601;
    border-radius: 3px
}

.mbanner-block .banner-content .small-title {
    font-size: 14px;
    color: #fff;
    line-height: 1;
    letter-spacing: 2px;
    margin: 0 auto 12px
}

.mbanner-block .banner-content .sub-title {
    margin: 0 auto 26px;
    padding: 0 56px;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 12px
}

.mbanner-block .banner-content .pre-button {
    box-sizing: border-box;
    display: inline-block;
    width: 140px;
    height: 42px;
    line-height: 42px;
    border-radius: 29px;
    padding: 0 14px;
    color: #fff;
    font-size: 14px;
    background: #ffa601
}

.mbanner-block .banner-content .pre-button:hover {
    background-color: #fa8d01
}

@media (max-width: 1023px) {
    .mbanner-block {
        display: block
    }
}

.svideo-block {
    position: relative;
    height: 100%;
    overflow: hidden
}

.scovervid-video {
    display: inline-block;
    height: 468px;
    width: 528px
}

.scovervid-video .svideo {
    pointer-events: none;
    min-height: 100%;
    min-width: 100%
}

.scovervid-video .img-big, .scovervid-video .video-big {
    display: inline-block
}

.scovervid-video .img-small, .scovervid-video .video-small {
    display: none
}

@media (max-width: 1279px) {
    .scovervid-video {
        height: 334px;
        width: 346px
    }

    .scovervid-video .img-big, .scovervid-video .video-big {
        display: none
    }

    .scovervid-video .img-small, .scovervid-video .video-small {
        display: inline-block
    }
}

video {
    -o-object-fit: cover;
    object-fit: cover
}

.img-big {
    display: inline-block;
    width: 100%
}

@media (max-width: 1279px) {
    .img-big {
        display: none
    }
}

.img-small {
    display: none;
    width: 100%
}

@media (max-width: 1279px) {
    .img-small {
        display: inline-block
    }
}

.new-source .source-banner {
    height: 420px;
    background-image: url(../images/new/source_banner.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

@media (max-width: 1279px) {
    .new-source .source-banner {
        height: 330px
    }
}

@media (max-width: 1023px) {
    .new-source .source-banner {
        height: 200px
    }
}

.new-source .index-block {
    background-color: #f5f7fa
}

.new-source .index-block .index-radius .radius-block {
    border: 90px solid #f5f7fa
}

.new-source .title-block {
    padding-top: 100px;
    text-align: center;
    color: #fff
}

.new-source .title-block .title {
    margin-bottom: 20px;
    font-size: 18px
}

.new-source .title-block .source-content {
    position: relative;
    font-size: 40px;
    font-weight: 500
}

.new-source .title-block .source-content:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 6px;
    width: 40px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .new-source .title-block .source-content:after {
        bottom: -15px;
        height: 4px;
        width: 32px
    }
}

@media (max-width: 1279px) {
    .new-source .title-block {
        padding-top: 70px
    }

    .new-source .title-block .source-content {
        font-size: 36px
    }

    .new-source .title-block .title {
        font-size: 16px
    }
}

@media (max-width: 1023px) {
    .new-source .title-block {
        padding-top: 30px
    }

    .new-source .title-block .source-content {
        font-size: 26px
    }

    .new-source .title-block .source-content:after {
        height: 5px;
        width: 32px
    }

    .new-source .title-block .title {
        font-size: 14px
    }
}

.new-source .source-body {
    width: 1200px;
    margin: 0 auto;
    padding: 74px 0 80px
}

.new-source .source-body .source-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.new-source .source-body .source-list li {
    margin-bottom: 48px;
    width: 576px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 16px rgba(0, 116, 255, .05);
    transition: all .3s;
    overflow: hidden
}

.new-source .source-body .source-list li a {
    display: inline-block;
    color: #596380
}

.new-source .source-body .source-list li .source-main {
    display: flex;
    align-items: center;
    padding: 40px 52px;
    box-sizing: border-box;
    height: 225px
}

.new-source .source-body .source-list li:hover {
    box-shadow: 0 3px 16px rgba(0, 116, 255, .18)
}

.new-source .source-body .source-content {
    flex: 1
}

.new-source .source-body .source-content p {
    margin-bottom: 16px;
    font-size: 24px;
    color: #0b1531;
    letter-spacing: 1.5px;
    font-weight: 500
}

.new-source .source-body .source-content div {
    font-size: 16px;
    color: #596380;
    line-height: 1.5;
    letter-spacing: 1px
}

.new-source .source-body .source-allscript {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat
}

.new-source .source-body .source-wechat {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: 0 -80px
}

.new-source .source-body .source-qq {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: 0 -240px
}

.new-source .source-body .source-video {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: 0 -160px
}

.new-source .source-body .source-new {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: 0 -320px
}

.new-source .source-body .source-feeds {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: 0 -640px
}

.new-source .source-body .source-youliang {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.new-source .source-body .source-music {
    display: inline-block;
    margin-right: 30px;
    width: 80px;
    height: 80px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 80px auto;
    background-repeat: no-repeat;
    background-position: 0 -400px
}

@media (max-width: 1279px) {
    .new-source .source-body {
        width: 980px
    }

    .new-source .source-body .source-list li {
        width: 468px
    }

    .new-source .source-body .source-list li .source-main {
        padding: 32px;
        height: 190px
    }

    .new-source .source-body .source-content p {
        font-size: 20px;
        margin-bottom: 16px
    }

    .new-source .source-body .source-content div {
        font-size: 14px
    }
}

@media (max-width: 1023px) {
    .new-source .pc-source {
        display: none
    }
}

.new-source .m-source {
    display: none
}

@media (max-width: 1023px) {
    .new-source .m-source {
        display: block;
        padding: 30px 20px 80px;
        box-sizing: border-box;
        width: inherit
    }

    .new-source .m-source .source-list {
        display: block
    }

    .new-source .m-source .source-list li {
        margin-bottom: 20px;
        width: 100%
    }

    .new-source .m-source .source-list li a {
        display: inline-block;
        color: #596380
    }

    .new-source .m-source .source-list li .source-main {
        display: flex;
        align-items: center;
        padding: 30px 20px
    }

    .new-source .m-source .source-content p {
        font-size: 16px;
        margin-bottom: 14px
    }

    .new-source .m-source .source-content div {
        font-size: 14px
    }

    .new-source .m-source .source-allscript {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat
    }

    .new-source .m-source .source-wechat {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat;
        background-position: 0 -50px
    }

    .new-source .m-source .source-qq {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat;
        background-position: 0 -150px
    }

    .new-source .m-source .source-video {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat;
        background-position: 0 -100px
    }

    .new-source .m-source .source-new {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat;
        background-position: 0 -200px
    }

    .new-source .m-source .source-feeds {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat;
        background-position: 0 -400px
    }

    .new-source .m-source .source-youliang {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat;
        background-position: 0 0
    }

    .new-source .m-source .source-music {
        display: inline-block;
        margin-right: 12px;
        width: 50px;
        height: 50px;
        background-image: url(../images/new/sprite_newsource.png);
        background-size: 50px auto;
        background-repeat: no-repeat;
        background-position: 0 -250px
    }
}

.new-sourceinfo {
    overflow: hidden
}

.new-sourceinfo .source-bg {
    height: 486px;
    background-color: #fff
}

.new-sourceinfo .source-bg .sourceinfo-body {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
    padding-top: 32px
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body {
    padding-top: 32px;
    color: #333
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .btn-info {
    height: 58px;
    line-height: 58px;
    border-radius: 29px;
    width: 150px;
    font-size: 18px;
    font-weight: 400
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-title {
    margin-bottom: 16px;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #0b1531
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-content {
    display: inline-block;
    width: 470px;
    margin-bottom: 45px;
    font-size: 16px;
    line-height: 1.8;
    color: #6b7799;
    letter-spacing: 1px
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-mcontent {
    display: none
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .source-allscript {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-youliang {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: 0 0
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-wechat {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: 0 -68px
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-video {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: 0 -136px
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-qq {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: 0 -204px
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-news {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: 0 -272px
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-music {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: 0 -340px
}

.new-sourceinfo .source-bg .sourceinfo-body .info-body .info-liquid {
    display: inline-block;
    margin-bottom: 5px;
    width: 68px;
    height: 68px;
    background-image: url(../images/new/sprite_newsource.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: 0 -540px
}

.new-sourceinfo .source-bg .sourceinfo-body .wechat-infobody {
    padding-top: 114px
}

.new-sourceinfo .source-bg img {
    width: 578px
}

@media (max-width: 1279px) {
    .new-sourceinfo .source-bg {
        height: 404px
    }

    .new-sourceinfo .source-bg .sourceinfo-body {
        width: 1024px;
        padding-top: 24px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body {
        padding-top: 20px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-title {
        font-size: 36px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-content {
        width: 410px;
        font-size: 14px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .btn-info {
        height: 52px;
        line-height: 52px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .source-allscript {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-youliang {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto;
        background-position: 0 0
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-wechat {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto;
        background-position: 0 -52px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-video {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto;
        background-position: 0 -104px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-qq {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto;
        background-position: 0 -156px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-news {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto;
        background-position: 0 -208px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-music {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto;
        background-position: 0 -260px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-liquid {
        margin-bottom: 0;
        width: 52px;
        height: 52px;
        background-size: 52px auto;
        background-position: 0 -420px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .wechat-infobody {
        padding-top: 104px
    }

    .new-sourceinfo .source-bg img {
        width: 484px
    }
}

@media (max-width: 1023px) {
    .new-sourceinfo .source-bg {
        height: auto
    }

    .new-sourceinfo .source-bg .sourceinfo-body {
        padding-top: 22px;
        width: inherit;
        display: block;
        font-size: 0
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body {
        padding-top: 0;
        text-align: center
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-title {
        font-size: 22px;
        margin-bottom: 10px
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-content {
        display: none
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .info-mcontent {
        display: inline-block;
        width: auto;
        margin-bottom: 24px;
        font-size: 14px;
        padding: 0 28px;
        line-height: 1.8;
        letter-spacing: .5px;
        text-align: left
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-body .btn-info {
        display: none
    }

    .new-sourceinfo .source-bg .sourceinfo-body .info-bgc {
        display: block;
        text-align: center
    }

    .new-sourceinfo .source-bg .sourceinfo-body img {
        width: 226px
    }
}

.new-sourceinfo .source-adnav {
    display: flex;
    align-items: flex-end;
    height: 82px;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1px solid #e0eaff;
    border-bottom: 1px solid #e0eaff;
    position: relative;
    z-index: 1;
    box-shadow: 0 3px 16px rgba(0, 116, 255, .05)
}

.new-sourceinfo .source-adnav .adnav-block {
    margin: 0 auto;
    width: 1200px;
    display: flex;
    justify-content: center
}

.new-sourceinfo .source-adnav .adnav-block a {
    position: relative;
    margin-right: 120px;
    padding-bottom: 26px;
    display: inline-block;
    font-size: 18px;
    color: #68779c;
    font-weight: 400
}

.new-sourceinfo .source-adnav .adnav-block a:last-child {
    margin-right: 0
}

.new-sourceinfo .source-adnav .adnav-block a:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 6px;
    width: 40px;
    border-radius: 3px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

@media (max-width: 1279px) {
    .new-sourceinfo .source-adnav .adnav-block a:after {
        height: 4px;
        width: 32px
    }
}

.new-sourceinfo .source-adnav .adnav-block a.active {
    color: #296bef;
    font-weight: 700
}

.new-sourceinfo .source-adnav .adnav-block a.active:after {
    background-color: #296bef
}

.new-sourceinfo .source-adnav .adnav-block a:hover {
    color: #296bef;
    font-weight: 700
}

@media (max-width: 1279px) {
    .new-sourceinfo .source-adnav {
        height: 64px
    }

    .new-sourceinfo .source-adnav .adnav-block a {
        font-size: 16px;
        margin-right: 100px;
        padding-bottom: 20px
    }

    .new-sourceinfo .source-adnav .adnav-block a:last-child {
        margin-right: 0
    }
}

@media (max-width: 1023px) {
    .new-sourceinfo .source-adnav {
        display: none
    }
}

.new-sourceinfo .msource-adnav {
    display: none;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #e0eaff;
    border-bottom: 1px solid #e0eaff;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    box-shadow: 0 3px 16px rgba(0, 116, 255, .05)
}

@media (max-width: 1023px) {
    .new-sourceinfo .msource-adnav {
        display: block
    }
}

.new-sourceinfo .msource-adnav .adnav-block {
    white-space: nowrap;
    overflow-x: auto;
    box-sizing: border-box;
    padding: 14px 16px 0
}

.new-sourceinfo .msource-adnav .adnav-block::-webkit-scrollbar {
    width: 0 !important
}

.new-sourceinfo .msource-adnav .adnav-block a {
    position: relative;
    margin-right: 24px;
    padding-bottom: 15px;
    display: inline-block;
    font-size: 14px;
    color: #68779c;
    font-weight: 400
}

.new-sourceinfo .msource-adnav .adnav-block a:last-child {
    margin-right: 0
}

.new-sourceinfo .msource-adnav .adnav-block a:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    height: 4px;
    width: 40px;
    border-radius: 10px;
    -webkit-transform: translateX(-50%) scaleX(0);
    -ms-transform: translateX(-50%) scaleX(0);
    transform: translateX(-50%) scaleX(0);
    transition: all .6s cubic-bezier(.19, 1, .22, 1)
}

.new-sourceinfo .msource-adnav .adnav-block a.active, .new-sourceinfo .msource-adnav .adnav-block a:hover {
    color: #296bef;
    font-weight: 700
}

.new-sourceinfo .msource-adnav .adnav-block a.active:after, .new-sourceinfo .msource-adnav .adnav-block a:hover:after {
    -webkit-transform: translateX(-50%) scaleX(1);
    -ms-transform: translateX(-50%) scaleX(1);
    transform: translateX(-50%) scaleX(1);
    background-color: #296bef
}

.new-sourceinfo .msource-adnav.less-item .adnav-block {
    display: flex;
    justify-content: space-around
}

.new-sourceinfo .sourceinfo-detail {
    padding: 80px 0 140px;
    background-color: #f5f9ff
}

.new-sourceinfo .sourceinfo-detail .detail-body {
    width: 1200px;
    margin: 0 auto 64px
}

.new-sourceinfo .sourceinfo-detail .detail-info {
    text-align: center;
    color: #0b1531
}

.new-sourceinfo .sourceinfo-detail .detail-info p {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 32px;
    font-size: 36px;
    font-weight: 500
}

@media (max-width: 1279px) {
    .new-sourceinfo .sourceinfo-detail .detail-info p {
        padding-bottom: 18px;
        margin-bottom: 24px;
        font-size: 32px
    }
}

.new-sourceinfo .sourceinfo-detail .detail-info p:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 6px;
    width: 40px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .new-sourceinfo .sourceinfo-detail .detail-info p:after {
        height: 4px;
        width: 32px
    }
}

.new-sourceinfo .sourceinfo-detail .detail-info .detail-content {
    display: inline-block;
    width: 764px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
    color: #0b1531
}

@media (max-width: 1279px) {
    .new-sourceinfo .sourceinfo-detail {
        padding: 56px 0 100px
    }

    .new-sourceinfo .sourceinfo-detail .detail-body {
        width: auto;
        margin-bottom: 56px
    }

    .new-sourceinfo .sourceinfo-detail .detail-body .detail-info p {
        font-size: 32px
    }

    .new-sourceinfo .sourceinfo-detail .detail-body .detail-info .detail-content {
        font-size: 14px
    }
}

@media (max-width: 1023px) {
    .new-sourceinfo .sourceinfo-detail {
        padding: 40px 0 80px
    }

    .new-sourceinfo .sourceinfo-detail .detail-body {
        width: auto;
        margin-bottom: 32px
    }

    .new-sourceinfo .sourceinfo-detail .detail-body .detail-info p {
        font-size: 18px;
        padding-bottom: 12px;
        margin-bottom: 20px
    }

    .new-sourceinfo .sourceinfo-detail .detail-body .detail-info p:after {
        height: 4px;
        width: 36px
    }

    .new-sourceinfo .sourceinfo-detail .detail-body .detail-info .detail-content {
        width: auto;
        padding: 0 28px;
        font-size: 14px
    }
}

.new-sourceinfo .purpose-nav {
    margin-bottom: 80px
}

.new-sourceinfo .purpose-nav .purpose-block {
    width: 1200px;
    margin: 0 auto
}

.new-sourceinfo .purpose-nav .purpose-block ul {
    display: flex;
    justify-content: center
}

.new-sourceinfo .purpose-nav .purpose-block ul li {
    position: relative;
    margin-right: 20px;
    display: inline-block;
    font-size: 0
}

.new-sourceinfo .purpose-nav .purpose-block ul li:last-child {
    margin-right: 0
}

.new-sourceinfo .purpose-nav .purpose-block ul li:after {
    display: none;
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    background-color: #fff;
    -webkit-transform: translate3d(-50%, 50%, 0) rotate(-45deg);
    transform: translate3d(-50%, 50%, 0) rotate(-45deg);
    border-left: 2px solid #296bef;
    border-bottom: 2px solid #296bef;
    border-bottom-left-radius: 4px;
    z-index: 1
}

.new-sourceinfo .purpose-nav .purpose-block ul li a {
    display: inline-block;
    box-sizing: border-box;
    width: 132px;
    height: 132px;
    padding: 24px 0;
    color: #68779c;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    border-radius: 8px;
    transition: none;
    border: 2px solid rgba(44, 114, 255, .1);
    box-shadow: 0 3px 16px rgba(0, 116, 255, .05);
    font-size: 16px
}

.new-sourceinfo .purpose-nav .purpose-block ul li .source_sprite {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-brand {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-shop {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat;
    background-position: -50px 0
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-info {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat;
    background-position: -102px 0
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-product {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat;
    background-position: -154px 0
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-app {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat;
    background-position: 0 -52px
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-coupon {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat;
    background-position: -50px -52px
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-gzh {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat;
    background-position: -102px -52px
}

.new-sourceinfo .purpose-nav .purpose-block ul li .f-game {
    margin-bottom: 8px;
    display: inline-block;
    width: 52px;
    height: 52px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 204px auto;
    background-repeat: no-repeat;
    background-position: -154px -52px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active, .new-sourceinfo .purpose-nav .purpose-block ul li:hover {
    font-weight: 500
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active:after, .new-sourceinfo .purpose-nav .purpose-block ul li:hover:after {
    display: inline-block
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active a, .new-sourceinfo .purpose-nav .purpose-block ul li:hover a {
    border: 2px solid #296bef;
    color: #081533
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-brand, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-brand {
    background-position: 0 -102px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-shop, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-shop {
    background-position: -50px -102px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-info, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-info {
    background-position: -102px -102px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-product, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-product {
    background-position: -154px -102px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-app, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-app {
    background-position: 0 -154px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-coupon, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-coupon {
    background-position: -50px -154px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-gzh, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-gzh {
    background-position: -102px -154px
}

.new-sourceinfo .purpose-nav .purpose-block ul li.active .f-game, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-game {
    background-position: -154px -154px
}

@media (max-width: 1279px) {
    .new-sourceinfo .purpose-nav {
        margin-bottom: 60px
    }

    .new-sourceinfo .purpose-nav .purpose-block {
        width: 1024px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li a {
        width: 108px;
        height: 108px;
        padding: 18px 0;
        font-size: 14px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .source_sprite {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-brand {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-shop {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat;
        background-position: -38px 0
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-info {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat;
        background-position: -78px 0
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-product {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat;
        background-position: -116px 0
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-app {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat;
        background-position: 0 -38px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-coupon {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat;
        background-position: -38px -38px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-gzh {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat;
        background-position: -78px -38px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li .f-game {
        margin-bottom: 8px;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(../images/new/source_sprite.png);
        background-size: 156px auto;
        background-repeat: no-repeat;
        background-position: -116px -38px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active, .new-sourceinfo .purpose-nav .purpose-block ul li:hover {
        font-weight: 700;
        color: #0b1531
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active:after, .new-sourceinfo .purpose-nav .purpose-block ul li:hover:after {
        display: inline-block
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active a, .new-sourceinfo .purpose-nav .purpose-block ul li:hover a {
        border: 2px solid #296bef
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-brand, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-brand {
        background-position: 0 -78px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-shop, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-shop {
        background-position: -38px -78px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-info, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-info {
        background-position: -78px -78px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-product, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-product {
        background-position: -116px -78px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-app, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-app {
        background-position: 0 -116px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-coupon, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-coupon {
        background-position: -38px -116px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-gzh, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-gzh {
        background-position: -78px -116px
    }

    .new-sourceinfo .purpose-nav .purpose-block ul li.active .f-game, .new-sourceinfo .purpose-nav .purpose-block ul li:hover .f-game {
        background-position: -116px -116px
    }
}

@media (max-width: 1023px) {
    .new-sourceinfo .purpose-nav {
        display: none
    }
}

.new-sourceinfo .purpose-mnav {
    display: none;
    margin-bottom: 36px
}

.new-sourceinfo .purpose-mnav .purpose-block {
    margin: 0 auto;
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 16px
}

.new-sourceinfo .purpose-mnav .purpose-block::-webkit-scrollbar {
    width: 0 !important
}

.new-sourceinfo .purpose-mnav .purpose-block ul {
    padding: 0 14px;
    font-size: 0
}

.new-sourceinfo .purpose-mnav .purpose-block ul li {
    position: relative;
    margin-right: 12px;
    display: inline-block
}

.new-sourceinfo .purpose-mnav .purpose-block ul li:after {
    display: none;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7.5px;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    background-color: #fff;
    -webkit-transform: translateX(-50%) rotate(-45deg);
    -ms-transform: translateX(-50%) rotate(-45deg);
    transform: translateX(-50%) rotate(-45deg);
    border-left: 2px solid #296bef;
    border-bottom: 2px solid #296bef;
    border-radius: 2px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li a {
    display: inline-block;
    box-sizing: border-box;
    width: 86px;
    height: 86px;
    padding: 15px 0;
    color: #68779c;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    font-size: 11px;
    border-radius: 8px;
    border: 2px solid rgba(44, 114, 255, .1);
    box-shadow: 0 3px 16px rgba(0, 116, 255, .05)
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .source_sprite {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-brand {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-shop {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat;
    background-position: -31px 0
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-info {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat;
    background-position: -62px 0
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-product {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat;
    background-position: -93px 0
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-app {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat;
    background-position: 0 -31px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-coupon {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat;
    background-position: -31px -31px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-gzh {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat;
    background-position: -62px -31px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li .f-game {
    margin-bottom: 6px;
    display: inline-block;
    width: 31px;
    height: 31px;
    background-image: url(../images/new/source_sprite.png);
    background-size: 122px auto;
    background-repeat: no-repeat;
    background-position: -93px -31px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover {
    font-weight: 500
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active:after, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover:after {
    display: inline-block
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active a, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover a {
    border: 2px solid #296bef;
    color: #081533
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-brand, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-brand {
    background-position: 0 -61px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-shop, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-shop {
    background-position: -31px -61px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-info, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-info {
    background-position: -62px -61px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-product, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-product {
    background-position: -93px -61px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-app, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-app {
    background-position: 0 -92px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-coupon, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-coupon {
    background-position: -31px -92px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-gzh, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-gzh {
    background-position: -62px -92px
}

.new-sourceinfo .purpose-mnav .purpose-block ul li.active .f-game, .new-sourceinfo .purpose-mnav .purpose-block ul li:hover .f-game {
    background-position: -93px -92px
}

.new-sourceinfo .purpose-mnav .purpose-block.less-item ul {
    display: flex;
    justify-content: space-between
}

@media (max-width: 1023px) {
    .new-sourceinfo .purpose-mnav {
        display: block
    }
}

.new-sourceinfo .promotion-pcarea {
    position: relative;
    text-align: center
}

@media (max-width: 1279px) {
    .new-sourceinfo .promotion-pcarea {
        margin-top: 40px
    }
}

@media (max-width: 1023px) {
    .new-sourceinfo .promotion-pcarea {
        display: none
    }
}

.new-sourceinfo .promotion-pcarea .show-more {
    display: inline-block;
    box-sizing: border-box;
    width: 760px;
    margin-top: 80px;
    padding: 26px 148px;
    border-radius: 9px;
    background-color: #ebf3ff;
    text-align: center;
    font-size: 16px;
    color: #a1aecf;
    letter-spacing: 1px
}

.new-sourceinfo .promotion-pcarea .show-more .btn-border {
    margin-left: 38px
}

.new-sourceinfo .promotion-pcarea .show-more a {
    color: #296bef;
    margin-left: 10px
}

.new-sourceinfo .promotion-pcarea .show-more a:hover {
    color: #0045cc !important
}

.new-sourceinfo .promotion-pcarea .promotion-body {
    width: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.new-sourceinfo .promotion-pcarea .promotion-body .show-block {
    display: inline-block;
    position: relative;
    width: 280px;
    height: 570px;
    border-radius: 38px;
    background-image: url(../images/new/new_iphone.png);
    background-size: 280px auto;
    box-shadow: 0 3px 16px rgba(0, 116, 255, .05)
}

.new-sourceinfo .promotion-pcarea .promotion-body .show-block .preshow-img, .new-sourceinfo .promotion-pcarea .promotion-body .show-block .show-video {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    width: 248px;
    height: 438px;
    top: 65px;
    left: 16px;
    z-index: 2
}

.new-sourceinfo .promotion-pcarea .promotion-body .show-block .preshow-img .video-img, .new-sourceinfo .promotion-pcarea .promotion-body .show-block .show-video .video-img {
    width: 100%
}

.new-sourceinfo .promotion-pcarea .promotion-body .show-block .preshow-img {
    z-index: 1
}

.new-sourceinfo .promotion-pcarea .promotion-body .show-pccontent {
    margin-left: 84px;
    text-align: left
}

.new-sourceinfo .promotion-pcarea .promotion-body .show-pccontent .scontent-title {
    margin-bottom: 24px;
    font-size: 24px;
    color: #0b1531;
    font-weight: 500
}

.new-sourceinfo .promotion-pcarea .promotion-body .show-pccontent .scontent-detail {
    display: inline-block;
    width: 390px;
    font-size: 16px;
    color: #68779c;
    line-height: 1.8;
    letter-spacing: 1px
}

@-webkit-keyframes adBgc {
    0% {
        opacity: 1
    }
    100% {
        opacity: .5
    }
}

@keyframes adBgc {
    0% {
        opacity: 1
    }
    100% {
        opacity: .5
    }
}

@-webkit-keyframes proBanner {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: translateY(-95px) translateX(-70px);
        transform: translateY(-95px) translateX(-70px);
        width: 328px;
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes proBanner {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: translateY(-95px) translateX(-70px);
        transform: translateY(-95px) translateX(-70px);
        width: 328px;
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@-webkit-keyframes proJili {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0);
        z-index: 1
    }
    20% {
        z-index: 5
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: scale(1) translateY(-36px) translateX(-36px);
        transform: scale(1) translateY(-36px) translateX(-36px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1);
        z-index: 5
    }
}

@keyframes proJili {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0);
        z-index: 1
    }
    20% {
        z-index: 5
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: scale(1) translateY(-36px) translateX(-36px);
        transform: scale(1) translateY(-36px) translateX(-36px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1);
        z-index: 5
    }
}

@-webkit-keyframes proChapin {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: translateY(-50px) translateX(-50px);
        transform: translateY(-50px) translateX(-50px);
        width: 274px;
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes proChapin {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: translateY(-50px) translateX(-50px);
        transform: translateY(-50px) translateX(-50px);
        width: 274px;
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@-webkit-keyframes proVideo {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: translateY(-110px) translateX(-70px);
        transform: translateY(-110px) translateX(-70px);
        width: 328px;
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes proVideo {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: translateY(-110px) translateX(-70px);
        transform: translateY(-110px) translateX(-70px);
        width: 328px;
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@-webkit-keyframes proQiantie {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(70px) translateX(-70px);
        transform: translateY(70px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes proQiantie {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(70px) translateX(-70px);
        transform: translateY(70px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@-webkit-keyframes proChoose {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0);
        z-index: 1
    }
    20% {
        z-index: 5
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: scale(1) translateY(-36px) translateX(-36px);
        transform: scale(1) translateY(-36px) translateX(-36px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1);
        z-index: 5
    }
}

@keyframes proChoose {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0);
        z-index: 1
    }
    20% {
        z-index: 5
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        -webkit-transform: scale(1) translateY(-36px) translateX(-36px);
        transform: scale(1) translateY(-36px) translateX(-36px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1);
        z-index: 5
    }
}

@-webkit-keyframes gzhBottom {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(-150px) translateX(-70px);
        transform: translateY(-150px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes gzhBottom {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(-150px) translateX(-70px);
        transform: translateY(-150px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@-webkit-keyframes gzhMiddle {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(-150px) translateX(-70px);
        transform: translateY(-150px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes gzhMiddle {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(-150px) translateX(-70px);
        transform: translateY(-150px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@-webkit-keyframes gzhChoose {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(-150px) translateX(-70px);
        transform: translateY(-150px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes gzhChoose {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 328px;
        -webkit-transform: translateY(-150px) translateX(-70px);
        transform: translateY(-150px) translateX(-70px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@-webkit-keyframes gzhCps {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 274px;
        -webkit-transform: translateY(-130px) translateX(-45px);
        transform: translateY(-130px) translateX(-45px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

@keyframes gzhCps {
    0% {
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        border: 1px solid rgba(44, 114, 255, 0);
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, 0), 0 6px 12px 0 rgba(44, 114, 255, 0)
    }
    99% {
        border: 1px solid rgba(44, 114, 255, 0)
    }
    100% {
        padding: 8px;
        background-color: #fff;
        width: 274px;
        -webkit-transform: translateY(-130px) translateX(-45px);
        transform: translateY(-130px) translateX(-45px);
        border: 1px solid rgba(44, 114, 255, .1);
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0, 60, 179, .08), 0 6px 12px 0 rgba(44, 114, 255, .1)
    }
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .ani-bgc {
    -webkit-animation: adBgc 1.5s ease forwards;
    animation: adBgc 1.5s ease forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-probanner {
    -webkit-animation: proBanner 1.5s ease-out .5s forwards;
    animation: proBanner 1.5s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-projili {
    -webkit-animation: proJili 1.5s ease-out .5s forwards;
    animation: proJili 1.5s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-prochapin {
    -webkit-animation: proChapin 1.2s ease-out .5s forwards;
    animation: proChapin 1.2s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-provideo {
    -webkit-animation: proVideo 1.2s ease-out .5s forwards;
    animation: proVideo 1.2s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-proqiantie {
    -webkit-animation: proQiantie 1.5s ease-out .5s forwards;
    animation: proQiantie 1.5s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-gzhmiddle {
    -webkit-animation: gzhMiddle 1.6s ease-out .5s forwards;
    animation: gzhMiddle 1.6s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-prochoose {
    -webkit-animation: proChoose 1.5s ease-out .5s forwards;
    animation: proChoose 1.5s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-gzhbottom {
    -webkit-animation: gzhBottom 1.8s ease-out .5s forwards;
    animation: gzhBottom 1.8s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-gzhchoose {
    -webkit-animation: gzhChoose 1.5s ease-out .5s forwards;
    animation: gzhChoose 1.5s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea .preshow-img.active .adcase-gzhcps {
    -webkit-animation: gzhCps 1.5s ease-out .5s forwards;
    animation: gzhCps 1.5s ease-out .5s forwards
}

.new-sourceinfo .promotion-pcarea [class*=adcase-] {
    position: absolute;
    z-index: 5
}

.new-sourceinfo .promotion-pcarea [class*=adcase-] img {
    width: 100%
}

.new-sourceinfo .promotion-pcarea .ani-bgc {
    position: relative;
    z-index: 2
}

.new-sourceinfo .promotion-pcarea .adcase-probanner {
    left: 18px;
    top: 292px;
    width: 211px
}

.new-sourceinfo .promotion-pcarea .adcase-projili {
    left: 11px;
    top: 15px;
    width: 227px;
    z-index: 1
}

.new-sourceinfo .promotion-pcarea .adcase-prochapin {
    left: 26px;
    top: 115px;
    width: 197px
}

.new-sourceinfo .promotion-pcarea .adcase-provideo {
    left: 10px;
    top: 261px;
    width: 228px
}

.new-sourceinfo .promotion-pcarea .adcase-proqiantie {
    left: 9px;
    top: 67px;
    width: 231px
}

.new-sourceinfo .promotion-pcarea .adcase-prochoose {
    left: 11px;
    top: 15px;
    width: 227px;
    z-index: 1
}

.new-sourceinfo .promotion-pcarea .adcase-gzhbottom {
    left: 20px;
    top: 367px;
    width: 208px
}

.new-sourceinfo .promotion-pcarea .adcase-gzhmiddle {
    left: 20px;
    top: 262px;
    width: 208px
}

.new-sourceinfo .promotion-pcarea .adcase-gzhchoose {
    left: 20px;
    top: 283px;
    width: 208px
}

.new-sourceinfo .promotion-pcarea .adcase-gzhcps {
    left: 20px;
    top: 237px;
    width: 208px
}

.new-sourceinfo .wechatshow-more {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: 24px 0;
    border-radius: 9px;
    background-color: #ebf3ff;
    text-align: center;
    font-size: 16px;
    color: #a1aecf;
    letter-spacing: 1px
}

.new-sourceinfo .wechatshow-more .btn-border {
    margin-left: 38px
}

.new-sourceinfo .wechatshow-more a {
    color: #296bef;
    margin-left: 10px
}

.new-sourceinfo .wechatshow-more a:hover {
    color: #0045cc !important
}

@media (max-width: 1023px) {
    .new-sourceinfo .wechatshow-more {
        font-size: 12px
    }
}

.new-sourceinfo .promotion-marea {
    position: relative;
    display: none
}

@media (max-width: 1023px) {
    .new-sourceinfo .promotion-marea {
        display: block
    }
}

.new-sourceinfo .promotion-marea .promotion-body {
    margin: 0 auto;
    text-align: center
}

.new-sourceinfo .promotion-marea .promotion-body .show-block {
    display: inline-block;
    position: relative;
    width: 177px;
    height: 360px;
    border-radius: 38px;
    background-image: url(../images/new/new_iphone.png);
    background-size: 177px auto;
    box-shadow: 4px 8px 35px rgba(101, 109, 121, .25)
}

.new-sourceinfo .promotion-marea .promotion-body .show-block .preshow-img, .new-sourceinfo .promotion-marea .promotion-body .show-block .show-video {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    width: 155px;
    height: 276px;
    top: 42px;
    left: 11px;
    z-index: 2
}

.new-sourceinfo .promotion-marea .promotion-body .show-block .preshow-img .video-img, .new-sourceinfo .promotion-marea .promotion-body .show-block .show-video .video-img {
    width: 100%
}

.new-sourceinfo .promotion-marea .promotion-body .show-block .preshow-img {
    z-index: 1
}

.new-sourceinfo .promotion-marea .promotion-body .show-pccontent {
    margin-bottom: 40px
}

.new-sourceinfo .promotion-marea .promotion-body .show-pccontent .scontent-title {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 12px;
    font-size: 18px;
    color: #0b1531;
    text-align: center;
    font-weight: 500
}

.new-sourceinfo .promotion-marea .promotion-body .show-pccontent .scontent-title:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 4px;
    width: 36px;
    background-color: #296bef;
    border-radius: 3px
}

.new-sourceinfo .promotion-marea .promotion-body .show-pccontent .scontent-detail {
    display: inline-block;
    padding: 0 28px;
    font-size: 14px;
    color: #68779c;
    line-height: 1.8;
    letter-spacing: 1px;
    text-align: left
}

.new-sourceinfo .promotion-marea .show-more {
    margin-top: 40px;
    font-size: 14px;
    color: #596380;
    text-align: center;
    letter-spacing: 1px
}

.new-sourceinfo .promotion-marea .show-more p {
    margin-bottom: 12px
}

.new-sourceinfo .promotion-marea .show-more .btn-border {
    border: 1px solid #296bef
}

.wechat-sourceinfo .access-block .detail-info p, .wechat-sourceinfo .advertisers-block .detail-info p {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 32px;
    font-size: 36px;
    font-weight: 500
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .access-block .detail-info p, .wechat-sourceinfo .advertisers-block .detail-info p {
        padding-bottom: 18px;
        margin-bottom: 24px;
        font-size: 28px
    }
}

.wechat-sourceinfo .access-block .detail-info p:after, .wechat-sourceinfo .advertisers-block .detail-info p:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 6px;
    width: 40px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .access-block .detail-info p:after, .wechat-sourceinfo .advertisers-block .detail-info p:after {
        height: 4px;
        width: 32px
    }
}

.wechat-sourceinfo .access-block .detail-info .detail-secinfo, .wechat-sourceinfo .advertisers-block .detail-info .detail-secinfo {
    color: #6b7799;
    font-size: 16px
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .access-block, .wechat-sourceinfo .advertisers-block {
        padding: 64px 0
    }

    .wechat-sourceinfo .access-block .detail-secinfo, .wechat-sourceinfo .advertisers-block .detail-secinfo {
        font-size: 14px !important
    }
}

.wechat-sourceinfo .access-block {
    padding: 80px 0;
    background-color: #f5f9ff;
    text-align: center
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .access-block {
        padding: 64px 0
    }
}

.wechat-sourceinfo .access-detail {
    margin-top: 46px;
    display: flex;
    justify-content: center
}

.wechat-sourceinfo .access-detail .access-part {
    width: 360px
}

.wechat-sourceinfo .access-detail .access-part .part-title {
    margin-bottom: 12px;
    color: #0b1531;
    font-weight: 700;
    font-size: 24px
}

.wechat-sourceinfo .access-detail .access-part .part-content {
    font-size: 16px;
    color: #6b7799;
    line-height: 1.8;
    width: 370px
}

.wechat-sourceinfo .access-detail .access-part:first-child {
    margin-right: 104px
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .access-detail {
        margin-top: 32px
    }

    .wechat-sourceinfo .access-detail .access-part {
        width: 320px
    }

    .wechat-sourceinfo .access-detail .access-part .part-title {
        font-size: 22px;
        margin-bottom: 8px
    }

    .wechat-sourceinfo .access-detail .access-part:first-child {
        margin-right: 80px
    }

    .wechat-sourceinfo .access-detail .access-part .part-content {
        font-size: 14px;
        width: 300px
    }
}

.wechat-sourceinfo .advertisers-block {
    padding: 80px 0;
    background-color: #fff;
    text-align: center
}

.wechat-sourceinfo .accessbgc {
    margin-bottom: 10px;
    display: inline-block;
    width: 176px;
    height: 140px;
    background-image: url(../images/wechat_detail/access_bgc.png);
    background-size: 176px auto;
    background-repeat: no-repeat
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .accessbgc {
        margin-bottom: 6px;
        width: 150px;
        height: 120px;
        background-size: 150px auto
    }
}

.wechat-sourceinfo .accessbgc-pro {
    margin-bottom: 10px;
    display: inline-block;
    width: 176px;
    height: 140px;
    background-image: url(../images/wechat_detail/access_bgc.png);
    background-size: 176px auto;
    background-repeat: no-repeat;
    background-position: 0 -140px
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .accessbgc-pro {
        margin-bottom: 6px;
        width: 150px;
        height: 120px;
        background-size: 150px auto
    }
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .accessbgc-pro {
        background-position: 0 -120px
    }
}

.wechat-sourceinfo .accessbgc-gzh {
    margin-bottom: 10px;
    display: inline-block;
    width: 176px;
    height: 140px;
    background-image: url(../images/wechat_detail/access_bgc.png);
    background-size: 176px auto;
    background-repeat: no-repeat
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .accessbgc-gzh {
        margin-bottom: 6px;
        width: 150px;
        height: 120px;
        background-size: 150px auto
    }
}

.wechat-sourceinfo .accessbgc-process {
    margin-bottom: 10px;
    display: inline-block;
    width: 176px;
    height: 140px;
    background-image: url(../images/wechat_detail/access_bgc.png);
    background-size: 176px auto;
    background-repeat: no-repeat;
    background-position: 0 -280px
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .accessbgc-process {
        margin-bottom: 6px;
        width: 150px;
        height: 120px;
        background-size: 150px auto
    }
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .accessbgc-process {
        background-position: 0 -240px
    }
}

.wechat-sourceinfo .advertisers-garlly {
    margin: 26px auto 0;
    position: relative;
    display: inline-block;
    width: 980px;
    height: 500px;
    background-image: url(../images/wechat_detail/advertisers_main.png);
    background-size: 980px auto;
    background-repeat: no-repeat;
    background-position: top center
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .advertisers-garlly {
        -webkit-transform: scale(.85);
        -ms-transform: scale(.85);
        transform: scale(.85);
        margin: -18px 0
    }
}

.wechat-sourceinfo .advertisers-garlly .profile {
    position: absolute;
    left: 50%;
    top: 101px;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(../images/wechat_detail/profile.png);
    background-size: 50px auto;
    background-repeat: no-repeat;
    z-index: 10
}

.wechat-sourceinfo .advertisers-garlly .advertisers-sprites {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat
}

.wechat-sourceinfo .advertisers-garlly [class*=pos-garlly] {
    position: absolute;
    left: 45%;
    top: 80px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}

@-webkit-keyframes floatShop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .95
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes floatShop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .95
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes floatSec {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .7
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes floatSec {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: .7
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes floatThr {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes floatThr {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes floatIcon {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: .8
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes floatIcon {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    60% {
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: .8
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes SlideInAirbnb {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 12.8%;
        top: 3.2%;
        opacity: 1;
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@keyframes SlideInAirbnb {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 12.8%;
        top: 3.2%;
        opacity: 1;
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
}

@-webkit-keyframes SlideInPiguet {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 71.8%;
        top: 68.5%;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes SlideInPiguet {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 71.8%;
        top: 68.5%;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes SlideInLancome {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 9.69%;
        top: 67.1%;
        opacity: 1;
        -webkit-transform: scale(.81);
        transform: scale(.81)
    }
}

@keyframes SlideInLancome {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 9.69%;
        top: 67.1%;
        opacity: 1;
        -webkit-transform: scale(.81);
        transform: scale(.81)
    }
}

@-webkit-keyframes SlideInCadillac {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 0;
        top: 33.2%;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes SlideInCadillac {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 0;
        top: 33.2%;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes SlideInDyson {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 25%;
        top: 82.2%;
        -webkit-transform: scale(.81);
        transform: scale(.81);
        opacity: 1
    }
}

@keyframes SlideInDyson {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 25%;
        top: 82.2%;
        -webkit-transform: scale(.81);
        transform: scale(.81);
        opacity: 1
    }
}

@-webkit-keyframes SlideInJd {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 54.2%;
        top: 82.2%;
        -webkit-transform: scale(.81);
        transform: scale(.81);
        opacity: 1
    }
}

@keyframes SlideInJd {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 54.2%;
        top: 82.2%;
        -webkit-transform: scale(.81);
        transform: scale(.81);
        opacity: 1
    }
}

@-webkit-keyframes SlideInMad {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 81.7%;
        top: 39.6%;
        -webkit-transform: scale(.72);
        transform: scale(.72);
        opacity: 1
    }
}

@keyframes SlideInMad {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 81.7%;
        top: 39.6%;
        -webkit-transform: scale(.72);
        transform: scale(.72);
        opacity: 1
    }
}

@-webkit-keyframes SlideInShui {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 81.7%;
        top: 3%;
        -webkit-transform: scale(.73);
        transform: scale(.73);
        opacity: 1
    }
}

@keyframes SlideInShui {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 81.7%;
        top: 3%;
        -webkit-transform: scale(.73);
        transform: scale(.73);
        opacity: 1
    }
}

@-webkit-keyframes SlideInMakeup {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 26.3%;
        top: 43.6%;
        -webkit-transform: scale(.95);
        transform: scale(.95);
        opacity: 1
    }
}

@keyframes SlideInMakeup {
    0% {
        left: 47%;
        top: 65px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 26.3%;
        top: 43.6%;
        -webkit-transform: scale(.95);
        transform: scale(.95);
        opacity: 1
    }
}

@-webkit-keyframes SlideInCar {
    0% {
        left: 50%;
        top: 105px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 15.4%;
        top: 45.1%;
        -webkit-transform: scale(.59);
        transform: scale(.59);
        opacity: 1
    }
}

@keyframes SlideInCar {
    0% {
        left: 50%;
        top: 105px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 15.4%;
        top: 45.1%;
        -webkit-transform: scale(.59);
        transform: scale(.59);
        opacity: 1
    }
}

@-webkit-keyframes SlideInCake {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 72.3%;
        top: 33.1%;
        -webkit-transform: scale(.68);
        transform: scale(.68);
        opacity: 1
    }
}

@keyframes SlideInCake {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 72.3%;
        top: 33.1%;
        -webkit-transform: scale(.68);
        transform: scale(.68);
        opacity: 1
    }
}

@-webkit-keyframes SlideInEdu {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 65.3%;
        top: 6%;
        opacity: 1
    }
}

@keyframes SlideInEdu {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 65.3%;
        top: 6%;
        opacity: 1
    }
}

@-webkit-keyframes SlideInShop {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 37.5%;
        top: 75%;
        -webkit-transform: scale(.72);
        transform: scale(.72);
        opacity: 1
    }
}

@keyframes SlideInShop {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 37.5%;
        top: 75%;
        -webkit-transform: scale(.72);
        transform: scale(.72);
        opacity: 1
    }
}

@-webkit-keyframes SlideInGift {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 21.6%;
        top: 24.6%;
        -webkit-transform: scale(.556);
        transform: scale(.556);
        opacity: 1
    }
}

@keyframes SlideInGift {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 21.6%;
        top: 24.6%;
        -webkit-transform: scale(.556);
        transform: scale(.556);
        opacity: 1
    }
}

@-webkit-keyframes SlideInWatch {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 59.1%;
        top: 47.4%;
        -webkit-transform: scale(.795);
        transform: scale(.795);
        opacity: 1
    }
}

@keyframes SlideInWatch {
    0% {
        left: 50%;
        top: 106px;
        opacity: .8;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        left: 59.1%;
        top: 47.4%;
        -webkit-transform: scale(.795);
        transform: scale(.795);
        opacity: 1
    }
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-airbnb {
    -webkit-animation: SlideInAirbnb 1.4s ease forwards;
    animation: SlideInAirbnb 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-piguet {
    -webkit-animation: SlideInPiguet 1.4s ease forwards;
    animation: SlideInPiguet 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-lancome {
    -webkit-animation: SlideInLancome 1.4s ease forwards;
    animation: SlideInLancome 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-cadillac {
    -webkit-animation: SlideInCadillac 1.4s ease forwards;
    animation: SlideInCadillac 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-dyson {
    -webkit-animation: SlideInDyson 1.4s ease forwards;
    animation: SlideInDyson 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-jd {
    -webkit-animation: SlideInJd 1.4s ease forwards;
    animation: SlideInJd 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-mad {
    -webkit-animation: SlideInMad 1.4s ease forwards;
    animation: SlideInMad 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-shui {
    -webkit-animation: SlideInShui 1.4s ease forwards;
    animation: SlideInShui 1.4s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-makeup {
    -webkit-animation: SlideInMakeup 1s ease forwards;
    animation: SlideInMakeup 1s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-car {
    -webkit-animation: SlideInCar 1s ease forwards;
    animation: SlideInCar 1s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-cake {
    -webkit-animation: SlideInCake 1s ease forwards;
    animation: SlideInCake 1s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-edu {
    -webkit-animation: SlideInEdu 1s ease forwards;
    animation: SlideInEdu 1s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-shop {
    -webkit-animation: SlideInShop 1s ease forwards;
    animation: SlideInShop 1s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-gift {
    -webkit-animation: SlideInGift 1s ease forwards;
    animation: SlideInGift 1s ease forwards
}

.wechat-sourceinfo .advertisers-garlly.active .pos-garlly-watch {
    -webkit-animation: SlideInWatch 1s ease forwards;
    animation: SlideInWatch 1s ease forwards
}

.wechat-sourceinfo .advertisers-garlly .airbnb {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    -webkit-animation: floatIcon 7s ease alternate infinite;
    animation: floatIcon 7s ease alternate infinite;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.wechat-sourceinfo .advertisers-garlly .piguet {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    background-position: 0 -108px;
    -webkit-animation: floatIcon 10s ease alternate infinite;
    animation: floatIcon 10s ease alternate infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.wechat-sourceinfo .advertisers-garlly .lancome {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    background-position: 0 -216px;
    -webkit-animation: floatIcon 7s ease alternate infinite;
    animation: floatIcon 7s ease alternate infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.wechat-sourceinfo .advertisers-garlly .cadillac {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    background-position: 0 -324px;
    -webkit-animation: floatIcon 10s ease alternate infinite;
    animation: floatIcon 10s ease alternate infinite;
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.wechat-sourceinfo .advertisers-garlly .dyson {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    background-position: 0 -432px;
    -webkit-animation: floatIcon 10s ease alternate infinite;
    animation: floatIcon 10s ease alternate infinite;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s
}

.wechat-sourceinfo .advertisers-garlly .jd {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    background-position: 0 -540px;
    -webkit-animation: floatIcon 8s ease alternate infinite;
    animation: floatIcon 8s ease alternate infinite;
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.wechat-sourceinfo .advertisers-garlly .mad {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    background-position: 0 -756px;
    -webkit-animation: floatIcon 8s ease alternate infinite;
    animation: floatIcon 8s ease alternate infinite;
    -webkit-animation-delay: 6s;
    animation-delay: 6s
}

.wechat-sourceinfo .advertisers-garlly .shui {
    display: inline-block;
    width: 108px;
    height: 108px;
    background-image: url(../images/wechat_detail/advertisers_sprites.png);
    background-size: 108px auto;
    background-repeat: no-repeat;
    background-position: 0 -972px;
    left: 81.7%;
    top: 3%;
    -webkit-animation: floatIcon 7s ease alternate infinite;
    animation: floatIcon 7s ease alternate infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.wechat-sourceinfo .advertisers-garlly .advertisers-icon {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat
}

.wechat-sourceinfo .advertisers-garlly .makeup {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat;
    -webkit-animation: floatThr 7s ease alternate infinite;
    animation: floatThr 7s ease alternate infinite;
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.wechat-sourceinfo .advertisers-garlly .car {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat;
    background-position: 0 -88px;
    -webkit-animation: floatSec 10s ease alternate infinite;
    animation: floatSec 10s ease alternate infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.wechat-sourceinfo .advertisers-garlly .cake {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat;
    background-position: 0 -176px;
    -webkit-animation: floatSec 10s ease alternate infinite;
    animation: floatSec 10s ease alternate infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.wechat-sourceinfo .advertisers-garlly .edu {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat;
    background-position: 0 -264px;
    -webkit-animation: floatThr 7s ease alternate infinite;
    animation: floatThr 7s ease alternate infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.wechat-sourceinfo .advertisers-garlly .shop {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat;
    background-position: 0 -352px;
    -webkit-animation: floatShop 10s ease alternate infinite;
    animation: floatShop 10s ease alternate infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.wechat-sourceinfo .advertisers-garlly .gift {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat;
    background-position: 0 -440px;
    -webkit-animation: floatSec 10s ease alternate infinite;
    animation: floatSec 10s ease alternate infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.wechat-sourceinfo .advertisers-garlly .watch {
    position: absolute;
    display: inline-block;
    width: 88px;
    height: 88px;
    background-image: url(../images/wechat_detail/advertisers_icon_sprites.png);
    background-size: 88px auto;
    background-repeat: no-repeat;
    background-position: 0 -528px;
    -webkit-animation: floatThr 7s ease alternate infinite;
    animation: floatThr 7s ease alternate infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.wechat-sourceinfo .showcase-body {
    width: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.wechat-sourceinfo .showcase-body .show-body {
    display: inline-block;
    position: relative;
    width: 248px;
    height: 520px;
    margin-left: 52px
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .showcase-body .show-body {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }
}

.wechat-sourceinfo .showcase-body .show-body .case-img, .wechat-sourceinfo .showcase-body .show-body .mobile-video {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    width: 228px;
    height: 494px;
    top: 13px;
    left: 10px
}

.wechat-sourceinfo .showcase-body .show-body .case-img .video-img, .wechat-sourceinfo .showcase-body .show-body .mobile-video .video-img {
    width: 100%
}

.wechat-sourceinfo .showcase-body .show-body .mobile-video {
    position: absolute;
    width: 248px;
    height: 520px;
    border-radius: 28px;
    background-image: url(../images/wechat_detail/mobile_phone.png);
    background-size: 248px auto;
    box-shadow: 0 3px 16px rgba(0, 116, 255, .05);
    z-index: 3
}

.wechat-sourceinfo .showcase-body .show-body .mobile-video {
    top: 0;
    left: 0;
    z-index: 2
}

.wechat-sourceinfo .showcase-body .show-body .preshow-img {
    z-index: 1
}

.wechat-sourceinfo .showcase-body .show-choose {
    margin-left: 108px
}

.wechat-sourceinfo .showcase-body .show-choose .choosecase-list {
    width: 625px;
    font-size: 0
}

.wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block {
    display: inline-block;
    margin: 0 22px 22px 0;
    padding: 36px 26px;
    width: 300px;
    height: 158px;
    color: #6b7799;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 116, 255, .1), 0 3px 16px 0 rgba(0, 116, 255, .05);
    box-sizing: border-box;
    text-align: left;
    vertical-align: top;
    cursor: pointer;
    transition: all .3s ease
}

.wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block:nth-child(even) {
    margin-right: 0
}

.wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block .block-title {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700
}

.wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block .block-content {
    font-size: 16px;
    line-height: 1.5
}

.wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block:hover {
    color: #0b1531;
    box-shadow: 0 0 0 1px rgba(0, 116, 255, .1), 2px 2px 24px 0 rgba(0, 60, 179, .12)
}

.wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block.active {
    color: #0b1531;
    box-shadow: 0 0 0 2.5px #006df8, 0 3px 16px 0 rgba(0, 116, 255, .05)
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .showcase-body .show-choose {
        margin-left: 76px
    }

    .wechat-sourceinfo .showcase-body .show-choose .choosecase-list {
        width: 570px
    }

    .wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block {
        width: 270px;
        height: 138px;
        padding: 28px 24px
    }

    .wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block .block-title {
        font-size: 18px;
        margin-bottom: 8px
    }

    .wechat-sourceinfo .showcase-body .show-choose .choosecase-list .choose-block .block-content {
        font-size: 14px
    }
}

.wechat-sourceinfo .rich-return .part-content {
    text-align: left
}

.wechat-sourceinfo .rich-return .gzh-content {
    margin: 0 auto;
    width: 675px;
    font-size: 16px;
    color: #6b7799;
    text-align: center;
    line-height: 1.8
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .rich-return .gzh-content {
        font-size: 14px
    }
}

.wechat-sourceinfo .rich-return .access-detail {
    margin-top: 44px
}

.wechat-sourceinfo .return-icon {
    margin-top: 50px;
    display: inline-block;
    width: 490px;
    height: 248px;
    background-image: url(../images/wechat_detail/revenue.png);
    background-size: 490px auto;
    background-repeat: no-repeat
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .return-icon {
        width: 425px;
        height: 220px;
        background-size: 425px auto
    }
}

.wechat-sourceinfo .open-adblock {
    height: 290px;
    background-image: url(../images/wechat_detail/open_ad.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.wechat-sourceinfo .open-adblock .open-title {
    padding-top: 80px;
    font-size: 32px;
    color: #eff1f4;
    text-align: center;
    font-weight: 700
}

.wechat-sourceinfo .open-adblock .open-con {
    margin: 0 auto;
    padding-top: 40px;
    text-align: center
}

.wechat-sourceinfo .open-adblock .open-button {
    color: #296bef;
    background-color: #fff
}

.wechat-sourceinfo .open-adblock .invite-agency {
    text-align: center;
    margin: 24px 0 0
}

.wechat-sourceinfo .open-adblock .invite-agency a {
    color: #fff
}

.wechat-sourceinfo .open-adblock .icon-arrow-right {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    left: 3px;
    top: -2px;
    width: 16px;
    height: 11px;
    background-image: url(../images/new/arrow_right_white.png);
    background-size: 16px;
    background-repeat: no-repeat
}

@media (max-width: 1279px) {
    .wechat-sourceinfo .open-adblock {
        height: 240px
    }

    .wechat-sourceinfo .open-adblock .open-con {
        margin: 0 auto;
        padding-top: 32px;
        text-align: center
    }

    .wechat-sourceinfo .open-adblock .open-title {
        padding-top: 64px;
        font-size: 28px
    }

    .wechat-sourceinfo .open-adblock .open-button {
        width: 160px;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 14px;
        padding: 0 28px
    }
}

.wechat-sourceinfo .advertisers-mgarlly, .wechat-sourceinfo .maccess-block, .wechat-sourceinfo .mgzh-content, .wechat-sourceinfo .promotion-marea {
    display: none
}

@media (max-width: 1023px) {
    .wechat-sourceinfo .access-block, .wechat-sourceinfo .advertisers-garlly, .wechat-sourceinfo .gzh-content, .wechat-sourceinfo .promotion-pcarea {
        display: none
    }

    .wechat-sourceinfo .access-detail {
        margin-top: 44px
    }

    .wechat-sourceinfo .access-detail .access-part .part-title {
        font-size: 22px
    }

    .wechat-sourceinfo .access-detail .access-part .part-content {
        font-size: 14px
    }

    .wechat-sourceinfo .access-detail .access-part:first-child {
        margin-right: 60px;
        padding-right: 60px
    }

    .wechat-sourceinfo .access-block {
        padding: 64px 0
    }

    .wechat-sourceinfo .advertisers-block {
        padding: 64px 0 58px
    }

    .wechat-sourceinfo .sourceinfo-detail {
        padding: 64px 0
    }

    .wechat-sourceinfo .sourceinfo-detail .showcase-body {
        margin: 46px auto 0
    }

    .wechat-sourceinfo .sourceinfo-detail .show-choose {
        margin-left: 70px
    }

    .wechat-sourceinfo .sourceinfo-detail .show-choose .choosecase-list {
        width: 366px
    }

    .wechat-sourceinfo .sourceinfo-detail .show-choose .choosecase-list .choose-block {
        align-items: center;
        width: 100%;
        height: 90px;
        margin-right: 0 !important;
        padding: 0 24px
    }

    .wechat-sourceinfo .sourceinfo-detail .show-choose .choosecase-list .choose-block .block-title {
        margin-bottom: 8px;
        font-size: 16px
    }

    .wechat-sourceinfo .sourceinfo-detail .show-choose .choosecase-list .choose-block .block-content {
        font-size: 14px
    }

    .wechat-sourceinfo .gzh-content {
        width: 650px;
        font-size: 14px
    }

    .wechat-sourceinfo .return-icon {
        margin-top: 32px
    }

    .wechat-sourceinfo .open-button {
        padding: 0 22px;
        width: 150px;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 14px
    }

    .wechat-sourceinfo .advertisers-block, .wechat-sourceinfo .maccess-block, .wechat-sourceinfo .sourceinfo-detail {
        padding: 50px 0
    }

    .wechat-sourceinfo .advertisers-block .detail-info, .wechat-sourceinfo .maccess-block .detail-info, .wechat-sourceinfo .sourceinfo-detail .detail-info {
        text-align: center
    }

    .wechat-sourceinfo .advertisers-block .detail-info p, .wechat-sourceinfo .maccess-block .detail-info p, .wechat-sourceinfo .sourceinfo-detail .detail-info p {
        position: relative;
        font-weight: 500;
        padding-bottom: 16px;
        margin-bottom: 22px;
        font-size: 20px
    }

    .wechat-sourceinfo .advertisers-block .detail-info p:after, .wechat-sourceinfo .maccess-block .detail-info p:after, .wechat-sourceinfo .sourceinfo-detail .detail-info p:after {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 6px;
        width: 40px;
        background-color: #ffa601;
        border-radius: 3px
    }

    .wechat-sourceinfo .advertisers-block .detail-info .detail-secinfo, .wechat-sourceinfo .maccess-block .detail-info .detail-secinfo, .wechat-sourceinfo .sourceinfo-detail .detail-info .detail-secinfo {
        color: #6b7799;
        font-size: 14px
    }

    .wechat-sourceinfo .maccess-block {
        display: block;
        padding: 50px 0;
        background-color: #f5f9ff
    }

    .wechat-sourceinfo .maccess-detail {
        margin: 0 auto;
        text-align: center;
        width: 290px
    }

    .wechat-sourceinfo .maccess-detail .maccess-part {
        margin-bottom: 32px
    }

    .wechat-sourceinfo .maccess-detail .maccess-part:last-child {
        margin-bottom: 0
    }

    .wechat-sourceinfo .maccess-detail .accessbgc-gzh, .wechat-sourceinfo .maccess-detail .accessbgc-pro, .wechat-sourceinfo .maccess-detail .accessbgc-process {
        width: 105px;
        height: 84px;
        background-size: 105px auto
    }

    .wechat-sourceinfo .maccess-detail .accessbgc-pro {
        background-position: 0 -82px
    }

    .wechat-sourceinfo .maccess-detail .accessbgc-process {
        background-position: 0 -164px
    }

    .wechat-sourceinfo .maccess-detail .part-title {
        margin-bottom: 8px;
        color: #0b1531;
        font-size: 16px;
        font-weight: 700
    }

    .wechat-sourceinfo .maccess-detail .part-content {
        color: #6b7799;
        font-size: 14px;
        line-height: 1.8
    }

    .wechat-sourceinfo .btn-infowechat {
        margin-bottom: 20px;
        width: 154px;
        height: 42px;
        line-height: 42px;
        padding: 0 14px;
        font-size: 14px
    }

    .wechat-sourceinfo .open-adblock {
        margin-bottom: 50px;
        height: 178px
    }

    .wechat-sourceinfo .open-adblock .open-title {
        padding-top: 50px;
        font-size: 18px
    }

    .wechat-sourceinfo .open-adblock .open-con {
        padding-top: 16px
    }

    .wechat-sourceinfo .return-icon {
        width: 260px;
        height: 135px;
        background-size: 260px auto
    }

    .wechat-sourceinfo .mgzh-content {
        display: block;
        width: 320px;
        margin: 28px auto 0
    }

    .wechat-sourceinfo .mgzh-content .mgzh-contentpart {
        text-align: left;
        color: #6b7799;
        line-height: 1.8;
        margin-bottom: 4px
    }

    .wechat-sourceinfo .advertisers-mgarlly {
        margin: 26px auto 0;
        position: relative;
        display: inline-block
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly {
        margin: 0 auto;
        width: 290px;
        height: 225px;
        background-image: url(../images/wechat_detail/madvertisers_main.png);
        background-size: 290px auto;
        background-repeat: no-repeat;
        background-position: top center
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon {
        margin-top: 6px;
        width: 310px;
        display: flex;
        justify-content: space-between
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .advertisers-sprites {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .airbnb {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .piguet {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat;
        background-position: 0 -60px
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .lancome {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat;
        background-position: 0 -120px
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .cadillac {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat;
        background-position: 0 -180px
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .dyson {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat;
        background-position: 0 -240px
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .jd {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat;
        background-position: 0 -300px
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .mad {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat;
        background-position: 0 -420px
    }

    .wechat-sourceinfo .advertisers-mgarlly .magrlly-icon .shui {
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url(../images/wechat_detail/advertisers_sprites.png);
        background-size: 60px auto;
        background-repeat: no-repeat;
        background-position: 0 -540px
    }

    .wechat-sourceinfo .promotion-marea {
        margin: 0 auto;
        width: 320px;
        display: block;
        position: relative;
        overflow: hidden
    }

    .wechat-sourceinfo .promotion-marea .wechatswiper-index, .wechat-sourceinfo .promotion-marea .wechatswiper-indexsec {
        margin-bottom: 30px
    }

    .wechat-sourceinfo .promotion-marea .wechatswiper-index .swiper-pagination, .wechat-sourceinfo .promotion-marea .wechatswiper-indexsec .swiper-pagination {
        position: relative;
        margin-top: 10px;
        bottom: 0;
        text-align: center
    }

    .wechat-sourceinfo .promotion-marea .wechatswiper-index .swiper-pagination > span, .wechat-sourceinfo .promotion-marea .wechatswiper-indexsec .swiper-pagination > span {
        cursor: pointer;
        display: inline-block;
        background: #c4d4f5;
        width: 7px;
        height: 4px;
        border-radius: 12px;
        margin: 0 4px;
        transition: all .4s
    }

    .wechat-sourceinfo .promotion-marea .wechatswiper-index .swiper-pagination > span.swiper-pagination-bullet-active, .wechat-sourceinfo .promotion-marea .wechatswiper-indexsec .swiper-pagination > span.swiper-pagination-bullet-active {
        width: 14px;
        background: #ffa601
    }

    .wechat-sourceinfo .promotion-marea .wswiper-title {
        margin-bottom: 8px;
        color: #6b7799;
        font-size: 16px;
        font-weight: 700;
        text-align: center
    }

    .wechat-sourceinfo .promotion-marea .wswiper-content {
        height: 40px;
        line-height: 1.8;
        font-size: 14px;
        color: #6b7799;
        text-align: center
    }

    .wechat-sourceinfo .promotion-marea .wswiper-adblock {
        position: relative;
        margin: 20px auto 0;
        width: 160px;
        height: 335px
    }

    .wechat-sourceinfo .promotion-marea .wswiper-adblock .mobile-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 160px;
        height: 335px;
        background-size: 160px auto;
        z-index: 2
    }

    .wechat-sourceinfo .promotion-marea .wswiper-adblock .case-img {
        position: absolute;
        top: 6px;
        left: 5px;
        width: 151px;
        height: 326px;
        background-size: 158px auto;
        border-radius: 18px;
        z-index: 1
    }
}

@media (max-width: 1023px) and (max-width: 1023px) {
    .wechat-sourceinfo .advertisers-block .detail-info p:after, .wechat-sourceinfo .maccess-block .detail-info p:after, .wechat-sourceinfo .sourceinfo-detail .detail-info p:after {
        height: 4px;
        width: 32px
    }
}

.search_sprite {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/search/sprite_search.png);
    background-size: 24px auto;
    background-repeat: no-repeat
}

.show-cross {
    display: inline-block !important
}

.search-page {
    padding-top: 80px
}

.search-page .result-body {
    margin: 0 auto;
    width: 720px
}

.search-page .result-body .result-search {
    text-align: center
}

.search-page .result-body .search-cross {
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/search/sprite_search.png);
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: 0 -48px;
    top: 8px;
    right: 14px;
    cursor: pointer;
    display: none
}

.search-page .result-body .main-search {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 600px;
    margin: 0 0 40px 0;
    padding: 0;
    border: none;
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    top: 0
}

.search-page .result-body input {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    display: inline-block;
    font-size: 16px;
    color: #0b1531;
    padding: 9px 12px 9px 44px;
    border: 2px solid #e0eaff;
    border-radius: 24px;
    line-height: 18px
}

.search-page .result-body input:focus {
    border: 2px solid #296bef
}

.search-page .result-body input:focus + .search-cross:hover {
    background-position: 0 -72px
}

.search-page .result-body input::-webkit-input-placeholder {
    color: #a3aecc
}

.search-page .result-body input:-moz-placeholder {
    color: #a3aecc
}

.search-page .result-body input::-moz-placeholder {
    color: #a3aecc
}

.search-page .result-body input:-ms-input-placeholder {
    color: #a3aecc
}

.search-page .result-body .search-icon {
    position: absolute;
    top: 7px;
    left: 16px;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/search/sprite_search.png);
    background-size: 24px auto;
    background-repeat: no-repeat;
    cursor: pointer
}

.search-page .result-total {
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
    color: #6b7799
}

.search-page .total-list {
    font-weight: 400
}

.search-page .total-list li a {
    display: block;
    line-height: 1;
    padding: 32px 0;
    border-top: 1px solid #e0eaff
}

.search-page .total-list li a .list-title {
    margin-bottom: 10px;
    color: #0b1531;
    font-size: 18px
}

.search-page .total-list li a .list-content {
    font-size: 16px;
    line-height: 1.5;
    color: #6b7799
}

.search-page .total-list li a .high-light, .search-page .total-list li a em {
    color: #296bef
}

.search-page .total-list li a:hover .list-title {
    color: #296bef
}

.search-page .showmore-block {
    padding-bottom: 80px
}

.search-page .showmore-block .more-block {
    padding: 32px 0;
    border-top: 1px solid #e0eaff;
    text-align: center
}

.search-page .showmore-block .more-block a {
    display: inline-block;
    width: 128px;
    height: 48px;
    line-height: 44px;
    font-size: 16px;
    border: 2px solid #e0eaff;
    border-radius: 25px;
    color: #6b7799;
    box-sizing: border-box
}

.search-page .showmore-block .more-block a:hover {
    color: #296bef;
    border: 2px solid #296bef
}

.search-page .not-reuslt {
    text-align: center
}

.search-page .not-reuslt .search-none {
    width: 32px
}

.search-page .not-reuslt .none-content {
    margin: 20px 0 420px;
    line-height: 1.5;
    font-size: 16px;
    color: #a3aecc
}

@media (max-width: 1279px) {
    .search-page {
        padding-top: 64px
    }

    .search-page .showmore-block {
        margin-bottom: 60px
    }

    .search-page .showmore-block .more-block {
        padding: 28px 0
    }

    .search-page .showmore-block .more-block a {
        width: 104px;
        height: 42px;
        line-height: 42px;
        font-size: 14px
    }

    .search-page .result-body input {
        font-size: 14px;
        padding: 6px 12px 6px 36px
    }

    .search-page .result-body input:focus + .search-cross {
        top: 7px;
        right: 14px;
        width: 12px;
        width: 20px;
        height: 20px;
        background-size: 20px;
        background-position: 0 -40px
    }

    .search-page .result-body input:focus + .search-cross:hover {
        background-position: 0 -60px
    }

    .search-page .result-body .search-icon {
        top: 6px;
        left: 14px;
        width: 20px;
        height: 20px;
        background-size: 20px;
        cursor: inherit
    }

    .search-page .total-list li a {
        padding: 28px 0
    }

    .search-page .total-list li a .list-title {
        font-size: 16px
    }

    .search-page .total-list li a .list-content {
        font-size: 14px
    }
}

@-webkit-keyframes preferredBanner {
    from {
        background-position: 50% 100px
    }
    to {
        background-position: 50% 0
    }
}

@keyframes preferredBanner {
    from {
        background-position: 50% 100px
    }
    to {
        background-position: 50% 0
    }
}

.preferred_banner {
    height: 485px;
    background: #e9f1ff url(../images/preferred/banner_bg.png) no-repeat center/contain;
    -webkit-animation: preferredBanner .6s .3s linear;
    animation: preferredBanner .6s .3s linear
}

@media (max-width: 1279px) {
    .preferred_banner {
        height: 400px
    }
}

@media (max-width: 1023px) {
    .preferred_banner {
        height: 489px;
        background: #e9f1ff url(../images/preferred/banner_bg_xs.png) no-repeat center/contain
    }
}

.preferred_banner .preferred_banner_container {
    box-sizing: border-box;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 120px
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_container {
        padding: 0 80px;
        width: 935px
    }
}

@media (max-width: 1023px) {
    .preferred_banner .preferred_banner_container {
        width: 335px;
        flex-direction: column;
        padding: 0 12px
    }
}

.preferred_banner .preferred_banner_des {
    padding-top: 100px;
    -webkit-animation: bannerTrans .5s linear forwards;
    animation: bannerTrans .5s linear forwards
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_des {
        padding-top: 88px
    }
}

@media (max-width: 1023px) {
    .preferred_banner .preferred_banner_des {
        padding-top: 50px
    }
}

.preferred_banner .preferred_banner_msg {
    margin-bottom: 64px
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_msg {
        margin-bottom: 44px
    }
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_msg {
        margin-bottom: 24px
    }
}

.preferred_banner .preferred_banner_msg > p {
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
    color: #0b1531;
    letter-spacing: 1.8px
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_msg > p {
        font-size: 32px;
        line-height: 48px;
        letter-spacing: 1.5px
    }
}

@media (max-width: 1023px) {
    .preferred_banner .preferred_banner_msg > p {
        font-size: 22px;
        line-height: 33px;
        text-align: center;
        letter-spacing: 1.8px
    }

    .preferred_banner .preferred_banner_msg > p:last-of-type {
        margin-bottom: 14px
    }
}

.preferred_banner .preferred_banner_msg > span {
    color: #6b7799;
    line-height: 28px;
    font-size: 16px;
    margin-top: 6px
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_msg > span {
        font-size: 14px;
        margin-top: 15px;
        line-height: 21px
    }
}

@media (max-width: 1023px) {
    .preferred_banner .preferred_banner_msg > span {
        text-align: left
    }
}

.preferred_banner .preferred_banner_ani {
    width: 400px;
    height: 400px;
    margin-top: 41px;
    position: relative;
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-animation: bannerTrans .5s linear forwards;
    animation: bannerTrans .5s linear forwards
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_ani {
        width: 320px;
        height: 320px;
        margin-top: 37px
    }
}

@media (max-width: 1023px) {
    .preferred_banner .preferred_banner_ani {
        width: 180px;
        height: 180px;
        margin: 32px auto 0 auto;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
        -webkit-animation: bannerTransPhone .5s .2s linear forwards;
        animation: bannerTransPhone .5s .2s linear forwards
    }
}

@media (max-width: 1023px) {
    .preferred_banner .preferred_banner_btn {
        text-align: center;
        font-size: 14px
    }
}

.preferred_banner .preferred_banner_btn a {
    height: 58px;
    line-height: 58px;
    padding: 0 40px;
    font-size: 18px
}

@media (max-width: 1279px) {
    .preferred_banner .preferred_banner_btn a {
        padding: 0 32px;
        height: 52px;
        line-height: 52px;
        font-size: 16px
    }
}

@media (max-width: 1023px) {
    .preferred_banner .preferred_banner_btn a {
        height: 42px;
        padding: 0 24px;
        line-height: 42px;
        font-size: 14px
    }
}

.preferred_tips {
    background-color: #fff;
    padding-top: 64px
}

@media (max-width: 1279px) {
    .preferred_tips {
        padding-top: 55px
    }
}

@media (max-width: 1023px) {
    .preferred_tips {
        padding-top: 50px
    }
}

.preferred_tips .preferred_tips_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-animation: bannerTrans .5s 1s linear forwards;
    animation: bannerTrans .5s 1s linear forwards
}

@media (max-width: 1279px) {
    .preferred_tips .preferred_tips_list {
        width: 810px
    }
}

@media (max-width: 1023px) {
    .preferred_tips .preferred_tips_list {
        width: 320px;
        padding-bottom: 18px
    }
}

.preferred_tips .preferred_tips_list > div {
    width: 400px;
    text-align: center;
    margin-bottom: 64px
}

@media (max-width: 1279px) {
    .preferred_tips .preferred_tips_list > div {
        width: 335px;
        margin-bottom: 55px
    }
}

@media (max-width: 1023px) {
    .preferred_tips .preferred_tips_list > div {
        width: 100%;
        margin-bottom: 32px
    }
}

.preferred_tips .preferred_tips_list > div i {
    display: inline-block;
    width: 300px;
    height: 205px;
    margin-bottom: 24px
}

@media (max-width: 1279px) {
    .preferred_tips .preferred_tips_list > div i {
        width: 264px;
        height: 180px;
        margin-bottom: 20px
    }
}

@media (max-width: 1023px) {
    .preferred_tips .preferred_tips_list > div i {
        width: 180px;
        height: 123px;
        margin-bottom: 14px
    }
}

.preferred_tips .preferred_tips_list > div p {
    font-size: 24px;
    line-height: 24px;
    color: #0b1531;
    font-weight: 700;
    margin-bottom: 16px
}

@media (max-width: 1279px) {
    .preferred_tips .preferred_tips_list > div p {
        font-size: 22px;
        line-height: 22px;
        margin-bottom: 14px
    }
}

@media (max-width: 1023px) {
    .preferred_tips .preferred_tips_list > div p {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 8px
    }
}

.preferred_tips .preferred_tips_list > div > div span {
    line-height: 29px;
    font-size: 16px;
    color: #6b7799
}

@media (max-width: 1279px) {
    .preferred_tips .preferred_tips_list > div > div span {
        line-height: 24px;
        font-size: 14px
    }
}

@media (max-width: 1023px) {
    .preferred_tips .preferred_tips_list > div > div span {
        font-size: 14px;
        line-height: 22px
    }
}

@media (max-width: 1023px) {
    .preferred_tips .preferred_tips_list .preferred_tips_sec {
        display: none
    }
}

.preferred_tips .preferred_tips_list .preferred_tips_sec_xs {
    display: none
}

@media (max-width: 1023px) {
    .preferred_tips .preferred_tips_list .preferred_tips_sec_xs {
        display: block
    }
}

.preferred_tips .preferred_tips_list .preferred_tips_list_app {
    background: url(../images/preferred/tips_app.png) no-repeat center/contain
}

.preferred_tips .preferred_tips_list .preferred_tips_list_income {
    background: url(../images/preferred/tips_income.png) no-repeat center/contain
}

.preferred_tips .preferred_tips_list .preferred_tips_list_service {
    background: url(../images/preferred/tips_service.png) no-repeat center/contain
}

.preferred_tips .preferred_tips_list .preferred_tips_list_test {
    background: url(../images/preferred/tips_test.png) no-repeat center/contain
}

.preferred_swiper {
    position: relative;
    box-sizing: border-box;
    background-color: #f5f9ff
}

.preferred_swiper .case_container {
    height: 594px;
    display: flex;
    justify-content: center
}

@media (max-width: 1279px) {
    .preferred_swiper .case_container {
        height: 438px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .case_container {
        height: 786px
    }
}

.preferred_swiper .swiper-indexcontain {
    position: relative;
    padding-bottom: 74px
}

@media (max-width: 1279px) {
    .preferred_swiper .swiper-indexcontain {
        padding-bottom: 56px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .swiper-indexcontain {
        padding-bottom: 50px;
        width: 100%
    }
}

.preferred_swiper .swiper-body {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    padding: 64px 0 0
}

@media (max-width: 1279px) {
    .preferred_swiper .swiper-body {
        width: 980px;
        padding: 50px 0 0
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .swiper-body {
        width: 92%
    }
}

.preferred_swiper .swiper-body .case-tolTittle {
    margin-bottom: 16px;
    font-size: 16px;
    color: #ffa601;
    text-align: center
}

.preferred_swiper .swiper-body .case-tolContent {
    margin-bottom: 36px;
    position: relative;
    padding-bottom: 24px;
    font-size: 36px;
    color: #0b1531;
    text-align: center;
    font-weight: 500
}

@media (max-width: 1279px) {
    .preferred_swiper .swiper-body .case-tolContent {
        font-size: 28px;
        padding-bottom: 12px;
        margin-bottom: 32px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .swiper-body .case-tolContent {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 20px
    }
}

.preferred_swiper .swiper-body .case-tolContent:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 6px;
    width: 40px;
    background-color: #ffa601;
    border-radius: 3px
}

@media (max-width: 1279px) {
    .preferred_swiper .swiper-body .case-tolContent:after {
        height: 4px;
        width: 32px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .swiper-body .case-tolContent:after {
        width: 24px
    }
}

.preferred_swiper .swiper-body .swiper-one {
    background-image: url(../images/new/swiper-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.preferred_swiper .preferred-swiper-index {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    height: 640px;
    overflow: hidden
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred-swiper-index {
        width: 1000px;
        height: 465px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred-swiper-index {
        width: 100%;
        height: 810px
    }
}

.preferred_swiper .preferred-swiper-index .swiper-button-next, .preferred_swiper .preferred-swiper-index .swiper-button-prev, .preferred_swiper .preferred-swiper-index .swiper-container-rtl .swiper-button-next, .preferred_swiper .preferred-swiper-index .swiper-container-rtl .swiper-button-prev {
    background-image: url(../images/new/swiper-button.png);
    background-size: 102px auto;
    width: 102px;
    height: 104px;
    margin-top: 0;
    top: 30%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

.preferred_swiper .preferred-swiper-index .swiper-button-next, .preferred_swiper .preferred-swiper-index .swiper-container-rtl .swiper-button-prev {
    -webkit-transform: rotate(180deg) translateX(-100%);
    -ms-transform: rotate(180deg) translateX(-100%);
    transform: rotate(180deg) translateX(-100%)
}

.preferred_swiper .preferred-swiper-index .swiper-pagination-bullet {
    opacity: 1
}

.preferred_swiper .case-swiper {
    margin: 0 auto;
    width: 1036px;
    height: 520px;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(44, 114, 255, .1);
    box-shadow: 0 4px 20px rgba(44, 114, 255, .08);
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px)
}

@media (max-width: 1279px) {
    .preferred_swiper .case-swiper {
        width: 754px;
        height: 368px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .case-swiper {
        width: 100%;
        height: 786px;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.preferred_swiper .swiper-pagination {
    text-align: center;
    bottom: 0
}

.preferred_swiper .swiper-pagination > span {
    cursor: pointer;
    display: inline-block;
    background: #c4d4f5;
    width: 14px;
    height: 8px;
    border-radius: 12px;
    margin: 0 4px;
    transition: all .4s
}

@media (max-width: 1279px) {
    .preferred_swiper .swiper-pagination > span {
        width: 10.5px;
        height: 6px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .swiper-pagination > span {
        width: 7px;
        height: 4px
    }
}

.preferred_swiper .swiper-pagination > span.swiper-pagination-bullet-active {
    width: 28px;
    background: #ffa601
}

@media (max-width: 1279px) {
    .preferred_swiper .swiper-pagination > span.swiper-pagination-bullet-active {
        width: 21px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .swiper-pagination > span.swiper-pagination-bullet-active {
        width: 14px
    }
}

.preferred_swiper .preferred_case_container {
    display: flex;
    padding: 64px 64px 0 0
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container {
        padding: 44px 56px 0 0
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        padding: 30px 20px 0;
        max-width: 375px;
        margin: 0 auto
    }
}

.preferred_swiper .preferred_case_container > div:first-of-type {
    width: 288px;
    height: 594px;
    margin-right: 64px;
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid rgba(0, 116, 255, .1);
    box-shadow: 2px 2px 12px 0 rgba(0, 116, 255, .08), 0 3px 11px 0 rgba(0, 116, 255, .08);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: translateY(-94px);
    -ms-transform: translateY(-94px);
    transform: translateY(-94px)
}

.preferred_swiper .preferred_case_container > div:first-of-type > div {
    width: 257px;
    height: 557px;
    border-radius: 14px;
    box-shadow: 0 3px 11px 0 rgba(0, 116, 255, .08);
    overflow: hidden
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container > div:first-of-type > div {
        width: 189px;
        height: 410px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container > div:first-of-type > div {
        width: 163px;
        height: 350px
    }
}

.preferred_swiper .preferred_case_container > div:first-of-type > div video {
    display: block;
    width: 100%;
    height: 100%
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container > div:first-of-type {
        width: 212px;
        height: 438px;
        margin-right: 56px;
        -webkit-transform: translateY(-72px);
        -ms-transform: translateY(-72px);
        transform: translateY(-72px)
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container > div:first-of-type {
        width: 182px;
        height: 375px;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        margin: 28px auto 0
    }
}

.preferred_swiper .preferred_case_container .preferred_case_title {
    display: flex;
    align-items: center;
    margin-bottom: 14px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_title {
        margin-bottom: 8px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_title {
        margin-bottom: 14px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_title i {
    display: inline-block;
    width: 53px;
    height: 53px;
    margin-right: 23px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_title i {
        width: 36px;
        height: 36px;
        margin-right: 16px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_title i {
        width: 30px;
        height: 30px;
        margin-right: 14px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_title span {
    font-size: 28px;
    line-height: 52px;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: #0b1531
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_title span {
        font-size: 22px;
        line-height: 33px;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_title span {
        font-size: 16px;
        line-height: 27px;
        letter-spacing: 1.5px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_desc {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1.14px;
    margin-bottom: 36px;
    color: #6b7799
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_desc {
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 1px;
        margin-bottom: 30px
    }
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_desc {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 1px;
        margin-bottom: 28px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_data {
    display: flex;
    margin-bottom: 86px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_data {
        margin-bottom: 40px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_data {
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.preferred_swiper .preferred_case_container .preferred_case_data > div {
    position: relative
}

.preferred_swiper .preferred_case_container .preferred_case_data > div:first-of-type {
    padding-right: 24px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div:first-of-type {
        padding-right: 36px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div:first-of-type {
        padding-right: 36px;
        text-align: center
    }
}

.preferred_swiper .preferred_case_container .preferred_case_data > div:nth-of-type(2) {
    padding-left: 40px
}

.preferred_swiper .preferred_case_container .preferred_case_data > div:nth-of-type(2):before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background-color: #e0eaff
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div:nth-of-type(2) {
        padding-left: 36px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div:nth-of-type(2) {
        padding-left: 24px;
        text-align: center
    }
}

.preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type {
    margin-bottom: 12px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type {
        margin-bottom: 10px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type {
        margin-bottom: 12px;
        text-align: center
    }
}

.preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type > span {
    color: #296bef;
    font-weight: 700
}

.preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type > span:first-of-type {
    font-size: 32px;
    line-height: 28px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type > span:first-of-type {
        font-size: 28px;
        line-height: 28px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type > span:nth-of-type(2) {
    font-size: 16px;
    line-height: 16px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type > span:nth-of-type(2) {
        font-size: 14px;
        line-height: 14px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div > div:first-of-type > span:nth-of-type(2) {
        font-size: 12px;
        line-height: 16px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_data > div > div:nth-of-type(2) {
    color: #6b7799;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1.14px
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div > div:nth-of-type(2) {
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 1px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_data > div > div:nth-of-type(2) {
        font-size: 12px;
        line-height: 12px;
        letter-spacing: 1px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_detail {
    width: 600px;
    position: relative
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_detail {
        width: 415px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_detail {
        width: 100%
    }
}

.preferred_swiper .preferred_case_container .preferred_case_detail i {
    width: 15px;
    height: 16px;
    display: inline-block;
    position: absolute
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_detail i {
        width: 12px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_detail i {
        width: 8px
    }
}

.preferred_swiper .preferred_case_container .preferred_case_detail i:first-of-type {
    background: url(../images/preferred/case_des_icon.png) no-repeat center/contain;
    top: 0
}

.preferred_swiper .preferred_case_container .preferred_case_detail i:nth-of-type(2) {
    background: url(../images/preferred/case_des_icon_end.png) no-repeat center/contain;
    bottom: 12px;
    right: 16px
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_detail i:nth-of-type(2) {
        display: inline;
        right: auto;
        bottom: auto
    }
}

.preferred_swiper .preferred_case_container .preferred_case_detail span {
    display: inline-block;
    width: 528px;
    font-weight: 700;
    font-size: 20px;
    line-height: 36px;
    margin-left: 32px;
    color: #6b7799
}

@media (max-width: 1279px) {
    .preferred_swiper .preferred_case_container .preferred_case_detail span {
        width: 375px;
        font-size: 16px;
        line-height: 30px;
        margin-left: 24px
    }
}

@media (max-width: 1023px) {
    .preferred_swiper .preferred_case_container .preferred_case_detail span {
        width: 295px;
        font-size: 16px;
        line-height: 28px;
        margin-left: 10px;
        display: inline
    }
}

.preferred_swiper .preferred_case_container .preferred_case_am_logo {
    background: url(../images/preferred/case_am_logo.png) no-repeat center/contain
}

.preferred_swiper .preferred_case_container .preferred_case_40cm_logo {
    background: url(../images/preferred/case_40cm_logo.png) no-repeat center/contain
}

.preferred_swiper .preferred_case_container .preferred_case_teacher_logo {
    background: url(../images/preferred/case_teacher_logo.png) no-repeat center/contain
}

.preferred_bottom {
    width: 100%;
    height: 322px;
    background-color: #296bef;
    position: relative;
    overflow: hidden
}

.preferred_bottom:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 465px;
    height: 265px;
    background: url(../images/preferred/bottom_left.png) no-repeat center/contain
}

@media (max-width: 1279px) {
    .preferred_bottom:before {
        width: 335px;
        height: 210px;
        bottom: -10px
    }
}

@media (max-width: 1023px) {
    .preferred_bottom:before {
        width: 240px;
        height: 190px;
        bottom: -27px;
        left: -40px
    }
}

.preferred_bottom:after {
    content: "";
    display: block;
    position: absolute;
    top: -15px;
    right: 0;
    width: 465px;
    height: 265px;
    background: url(../images/preferred/bottom_right.png) no-repeat center/contain
}

@media (max-width: 1279px) {
    .preferred_bottom:after {
        width: 335px;
        height: 210px;
        top: -20px
    }
}

@media (max-width: 1023px) {
    .preferred_bottom:after {
        width: 240px;
        height: 190px;
        right: -30px;
        top: -35px
    }
}

@media (max-width: 1279px) {
    .preferred_bottom {
        height: 258px
    }
}

@media (max-width: 1023px) {
    .preferred_bottom {
        height: 254px
    }
}

.preferred_bottom .preferred_bottom_des {
    font-size: 28px;
    line-height: 50px;
    padding-top: 64px;
    color: #fff;
    z-index: 1;
    position: relative;
    font-weight: 700
}

@media (max-width: 1279px) {
    .preferred_bottom .preferred_bottom_des {
        font-size: 24px;
        line-height: 42px;
        letter-spacing: .86px;
        padding-top: 56px
    }
}

@media (max-width: 1023px) {
    .preferred_bottom .preferred_bottom_des {
        font-size: 18px;
        line-height: 32px;
        letter-spacing: 1px;
        padding-top: 50px
    }

    .preferred_bottom .preferred_bottom_des > div:nth-of-type(2) span {
        display: block
    }
}

.preferred_bottom .preferred_bottom_des > div {
    text-align: center
}

.preferred_bottom .preferred_bottom_btn {
    text-align: center;
    padding-top: 36px;
    position: relative;
    z-index: 9
}

@media (max-width: 1279px) {
    .preferred_bottom .preferred_bottom_btn {
        padding-top: 20px
    }
}

@media (max-width: 1023px) {
    .preferred_bottom .preferred_bottom_btn {
        padding-top: 16px
    }
}

.preferred_bottom .preferred_bottom_btn .new-btn {
    color: #296bef;
    font-weight: 700;
    background-color: #fff;
    font-size: 18px;
    height: 58px;
    line-height: 58px;
    padding: 0 40px
}

.preferred_bottom .preferred_bottom_btn .new-btn:hover {
    background-color: rgba(255, 255, 255, .8)
}

@media (max-width: 1279px) {
    .preferred_bottom .preferred_bottom_btn .new-btn {
        font-size: 16px;
        height: 42px;
        line-height: 42px;
        padding: 0 36px
    }
}

@media (max-width: 1023px) {
    .preferred_bottom .preferred_bottom_btn .new-btn {
        font-size: 14px;
        height: 42px;
        line-height: 42px;
        padding: 0 28px
    }
}

.preferred_wj {
    height: calc(100vh - 64px)
}

#container {
    width: 100%;
    height: 100%
}

@media (max-width: 1023px) {
    #container {
        background: url(../images/preferred/game_finish.png) no-repeat center/contain
    }
}

.animation {
    width: 100%;
    height: 0;
    padding-bottom: 96.42857142857143%;
    background-image: url(../images/preferred/sprites.png);
    background-size: 3000% 100.0925925925926%;
    background-repeat: no-repeat;
    -webkit-animation-name: keyframes-img;
    animation-name: keyframes-img;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: steps(1);
    animation-timing-function: steps(1)
}

@media (max-width: 1023px) {
    .animation {
        display: none
    }
}

@-webkit-keyframes bannerTrans {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bannerTrans {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes bannerTransPhone {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bannerTransPhone {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes keyframes-img {
    0% {
        width: 100%;
        height: 0;
        padding-bottom: 96.42857142857143%;
        background-image: url(../images/preferred/sprites.png);
        background-size: 3000% 100.0925925925926%
    }
    3.33% {
        background-position: 3.4482758620689653% 0
    }
    6.67% {
        background-position: 6.896551724137931% 0
    }
    10.00% {
        background-position: 10.344827586206897% 0
    }
    13.33% {
        background-position: 13.793103448275861% 0
    }
    16.67% {
        background-position: 17.24137931034483% 0
    }
    20.00% {
        background-position: 20.689655172413794% 0
    }
    23.33% {
        background-position: 24.137931034482758% 0
    }
    26.67% {
        background-position: 27.586206896551722% 0
    }
    30.00% {
        background-position: 31.03448275862069% 0
    }
    33.33% {
        background-position: 34.48275862068966% 0
    }
    36.67% {
        background-position: 37.93103448275862% 0
    }
    40.00% {
        background-position: 41.37931034482759% 0
    }
    43.33% {
        background-position: 44.827586206896555% 0
    }
    46.67% {
        background-position: 48.275862068965516% 0
    }
    50.00% {
        background-position: 51.724137931034484% 0
    }
    53.33% {
        background-position: 55.172413793103445% 0
    }
    56.67% {
        background-position: 58.620689655172406% 0
    }
    60.00% {
        background-position: 62.06896551724138% 0
    }
    63.33% {
        background-position: 65.51724137931035% 0
    }
    66.67% {
        background-position: 68.96551724137932% 0
    }
    70.00% {
        background-position: 72.41379310344827% 0
    }
    73.33% {
        padding-bottom: 96.51785714285714%;
        background-position: 75.86206896551724% 0;
        background-size: 3000% 100%
    }
    76.67% {
        padding-bottom: 96.42857142857143%;
        background-position: 79.3103448275862% 0;
        background-size: 3000% 100.0925925925926%
    }
    80.00% {
        background-position: 82.75862068965517% 0
    }
    83.33% {
        background-position: 86.20689655172413% 0
    }
    86.67% {
        background-position: 89.65517241379311% 0
    }
    90.00% {
        background-position: 93.10344827586206% 0
    }
    93.33% {
        background-position: 96.55172413793103% 0
    }
    100%, 96.67% {
        background-position: 100% 0
    }
}

@keyframes keyframes-img {
    0% {
        width: 100%;
        height: 0;
        padding-bottom: 96.42857142857143%;
        background-image: url(../images/preferred/sprites.png);
        background-size: 3000% 100.0925925925926%
    }
    3.33% {
        background-position: 3.4482758620689653% 0
    }
    6.67% {
        background-position: 6.896551724137931% 0
    }
    10.00% {
        background-position: 10.344827586206897% 0
    }
    13.33% {
        background-position: 13.793103448275861% 0
    }
    16.67% {
        background-position: 17.24137931034483% 0
    }
    20.00% {
        background-position: 20.689655172413794% 0
    }
    23.33% {
        background-position: 24.137931034482758% 0
    }
    26.67% {
        background-position: 27.586206896551722% 0
    }
    30.00% {
        background-position: 31.03448275862069% 0
    }
    33.33% {
        background-position: 34.48275862068966% 0
    }
    36.67% {
        background-position: 37.93103448275862% 0
    }
    40.00% {
        background-position: 41.37931034482759% 0
    }
    43.33% {
        background-position: 44.827586206896555% 0
    }
    46.67% {
        background-position: 48.275862068965516% 0
    }
    50.00% {
        background-position: 51.724137931034484% 0
    }
    53.33% {
        background-position: 55.172413793103445% 0
    }
    56.67% {
        background-position: 58.620689655172406% 0
    }
    60.00% {
        background-position: 62.06896551724138% 0
    }
    63.33% {
        background-position: 65.51724137931035% 0
    }
    66.67% {
        background-position: 68.96551724137932% 0
    }
    70.00% {
        background-position: 72.41379310344827% 0
    }
    73.33% {
        padding-bottom: 96.51785714285714%;
        background-position: 75.86206896551724% 0;
        background-size: 3000% 100%
    }
    76.67% {
        padding-bottom: 96.42857142857143%;
        background-position: 79.3103448275862% 0;
        background-size: 3000% 100.0925925925926%
    }
    80.00% {
        background-position: 82.75862068965517% 0
    }
    83.33% {
        background-position: 86.20689655172413% 0
    }
    86.67% {
        background-position: 89.65517241379311% 0
    }
    90.00% {
        background-position: 93.10344827586206% 0
    }
    93.33% {
        background-position: 96.55172413793103% 0
    }
    100%, 96.67% {
        background-position: 100% 0
    }
}

.share {
    float: right;
    position: relative
}

.share .qr-btn {
    display: block;
    padding-left: 22px;
    background: url(../images/new_case/zp4.png) left center no-repeat;
    cursor: pointer;
    background-size: 16px auto;
    font-size: 14px;
    color: #939599
}

.share:hover .qr-btn {
    color: #296bef;
    background-image: url(../images/new_case/zp4h.png)
}

.share .qr {
    position: absolute;
    width: 136px;
    background-color: #fff;
    padding: 15px 15px 13px;
    top: 30px;
    left: 50%;
    display: none;
    z-index: 29;
    box-shadow: 0 6px 15px 0 rgba(49, 50, 51, .05), 0 3px 5px 0 rgba(49, 50, 51, .05);
    border-radius: 6px;
    border: 1px solid #dfe1e6;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.share:hover .qr {
    display: block
}

.share .pic img {
    display: block;
    width: 100%;
    margin: 0
}

.share p {
    font-size: 14px;
    color: #313233;
    line-height: 1.51;
    text-align: center
}

.title-option {
    height: 24px;
    margin-top: 25px
}

.newcase-body2 .info-tag div:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.docs-block {
    margin: 30px 0
}

.docs-title {
    font-size: 18px;
    font-weight: 700
}

.docs-intro {
    margin: 20px 0
}

.docs-intro p {
    margin: 10px 0
}

.docs-showcase {
    margin: 20px 0
}

.docs-showcase p {
    margin: 15px 0
}

code {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    background-color: #fdf6e3;
    color: #657b83;
    display: inline-block;
    padding: 0 2px;
    margin: 0 5px
}

.docs-source {
    margin: 20px 0;
    font-size: 12px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}

.docs-source .hljs {
    border-radius: 5px;
    padding: .5em 1em;
    margin: 0
}

.docs-column {
    height: 40px;
    color: #666;
    line-height: 40px;
    text-align: center;
    background-color: #eee
}

::-moz-selection {
    background: #ccebff
}

::selection {
    background: #ccebff
}

::-moz-selection {
    background: #ccebff
}

::-webkit-selection {
    background: #ccebff
}

input, textarea {
    -webkit-appearance: none
}