@charset "UTF-8";

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

html,body {
    font-family: "Hiragino Sans GB","Microsoft Yahei",sans-serif;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #f7f8f8;
    overflow: hidden
}

h1 {
    font-size: 16px;
    font-weight: bold;
    color: #0c3d8e
}

h2 {
    font-size: 14px;
    font-weight: bold;
    color: #898989
}

h3 {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #0c3d8e;
    margin: 0
}

h4 {
    margin: 3% 0;
    font-size: 18px;
    color: #fff;
    text-align: center
}

h5 {
    margin: 0;
    font-size: 10px;
    color: #fff;
    text-align: center
}

p {
    font-size: 16px;
    margin: 3% 0;
    line-height: 1.5;
    color: #595757
}

ul {
    -webkit-padding-start: 0!important
}

img {
    width: 100%
}

a {
    display: block;
    color: #595757
}

.container {
    height: 100%;
    position: relative;
    transition: all 1000ms ease;
    transform: translate3d(0px,0px,0px)
}

.swiper-container {
    width: 100%;
    height: 100%
}

.cover {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #073372
}

.layer {
    width: 100%
}

#layer-1 {
    position: absolute;
    opacity: 0;
    animation-fill-mode: forwards
}

#layer-2 {
    position: absolute;
    top: 0;
    opacity: 0;
    animation-fill-mode: forwards
}

#layer-3 {
    position: absolute;
    top: 0;
    opacity: 0;
    animation-fill-mode: forwards
}

.arrow_active {
    animation: 2.2s arrow ease-in-out infinite;
    animation-delay: 2.4s
}

.animation_active {
    animation: 1s bed ease-in-out
}

@keyframes bed {
    0% {
        top: 20%;
        opacity: 1
    }

    100% {
        top: 0;
        opacity: 1
    }
}

.opacity_active {
    animation: 1.8s op ease-in-out
}

@keyframes op {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.main {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center
}

.head {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 2000;
}

.arrow {
    background-image: url('arrow.png');
    width: 20px;
    height: 20px;
    clear: both;
    text-align: center;
    background-size: 100%;
    position: absolute;
    margin: 0 0 -23px 0;
    bottom: 5%;
    left: 50%;
    opacity: 0
}

@keyframes arrow {
    0% {
        opacity: 0
    }

    50% {
        opacity: .6
    }

    100% {
        opacity: 0;
        transform: translate3d(0,-20px,0)
    }
}

#bar-left {
    width: 27%;
    height: 25%;
    position: absolute;
    top: 4%;
    left: 2%;
    border: 2px solid rgba(165,182,202,0.2);
    z-index: 1000;
}

#bar-middle {
    width: 27%;
    height: 25%;
    position: absolute;
    top: 4%;
    left: 36.5%;
    border: 2px solid rgba(165,182,202,0.2);
    z-index: 1000
}

#bar-right {
    width: 27%;
    height: 25%;
    position: absolute;
    top: 4%;
    right: 2%;
    border: 2px solid rgba(165,182,202,0.2);
    z-index: 1000
}

.chart_l rect:first-of-type {
    color: #4bc6df;
    fill: #e6e6e6
}

.chart_l rect:nth-of-type(2) {
    color: #fff;
    fill: #4bc6df
}

.chart_l text:first-of-type {
    fill: #4bc6df;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold
}

.chart_m rect:first-of-type {
    color: #0c3d8e;
    fill: #e6e6e6
}

.chart_m rect:nth-of-type(2) {
    color: #fff;
    fill: #0c3d8e
}

.chart_m text:first-of-type {
    fill: #0c3d8e;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold
}

.chart_r rect:first-of-type {
    color: #f9bb4e;
    fill: #e6e6e6
}

.chart_r rect:nth-of-type(2) {
    color: #fff;
    fill: #f9bb4e
}

.chart_r text:first-of-type {
    fill: #f9bb4e;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold
}

.content {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto
}

.node {
    width: 90%;
    display: inline-block;
    margin: 5% 3% 5% 3%;
    border-bottom: 8px solid;
    padding-bottom: 8%;
    background-color: #f7f8f8;
    border-image: url(line.png) 0 0 30% 0
}

.title {
    position: relative
}

.mark {
    display: inline;
    position: relative
}

.markinfo {
    display: inline;
    position: relative
}

.mark_company {
    display: inline;
    position: relative
}

.b_line {
    border-bottom: 2px #4bc6df solid
}

.d_line {
    border-bottom: 2px #0c3d8e solid
}

.y_line {
    border-bottom: 2px #f8b62d solid
}

.g_line {
    border-bottom: 2px #c9a063 solid
}

.left {
    position: absolute;
    width: 20%;
    height: 45%;
    top: 38%;
    left: 4%;
    background: url(yao1.png);
    background-size: 100%;
    background-position-x: -3%
}

.middle {
    position: absolute;
    width: 46%;
    height: 20%;
    top: 46%;
    left: 27%;
    background: #e8f0f7;
    border: 1px #d7dee2 solid;
    box-shadow: inset 2px 2px 0 0 rgba(136,136,136,0.42)
}

.scene {
    width: 100%;
    height: 100%;
    margin-top: 5%
}

.right {
    position: absolute;
    width: 18%;
    height: 37%;
    top: 39%;
    right: 6%;
    background: url(wang1.png);
    background-size: 100%;
    background-position-x: -3%
}

.left-mate {
    position: absolute;
    width: 34%;
    height: 22%;
    top: 77%
}

.middle-mate {
    position: absolute;
    width: 34%;
    height: 22%;
    left: 34%;
    top: 77%
}

.right-mate {
    position: absolute;
    width: 33%;
    height: 22%;
    top: 77%;
    right: 0
}

.mate {
    float: left;
    width: 14%;
    height: 63%;
    display: block;
    margin-top: 2%;
    margin-left: 1.6%;
    border: 2px #1b4462 solid;
    border-radius: 50%;
    opacity: .2
}

.tooltip,.c-tooltip {
    position: absolute;
    top: 35%;
    left: 9%;
    width: 80%;
    padding: 1%;
    background: #f7f8f8;
    border: 1px #dcdddd solid;
    box-shadow: 1px 1px 5px rgba(136,136,136,0.42);
    border-radius: 15px 15px 8px 8px;
    z-index: 9999;
    display: none
}

.c-tooltip-up,.tooltip-up {
    margin: 0;
    position: absolute;
    width: 100%;
    top: -1%;
    left: -1px;
    padding: 0 1px;
    height: 80px;
    border-radius: 8px 8px 0 0
}

.c-t-up-l,.t-up-l {
    width: 30%;
    float: left;
    margin-top: 5px
}

.c-t-up-r,.t-up-r {
    width: 70%;
    float: right
}

.tooltip-down>p {
    font-size: 14px
}

.c-tooltip-down,.tooltip-down {
    line-height: 24px;
    margin: 85px 5% 8% 5%
}

.c-tooltip-down>p {
    font-size: 14px
}

.tleft>img {
    width: 55%
}

.c-tleft,.tleft {
    text-align: center;
    margin: 0 auto
}

.c-tleft>img {
    width: 55%
}

.c-tleft-head,.tleft-hand {
    position: absolute;
    width: 30%;
    top: 0;
    right: 0
}

.c-tright,.tright {
    margin: 0 auto;
    text-align: center
}

.part {
    text-align: center
}

.part>h1 {
    text-align: center
}

.icon {
    width: 16%;
    float: right;
    border: 1px solid #e0effc
}

.icon-part {
    position: absolute;
    display: inline-block;
    right: 0;
    top: -30%
}

.icon>img {
    opacity: .2
}

.para {
    margin: 5% 0
}

.p-icon {
    width: 5%
}

.content-container {
    position: relative;
    margin: 0 auto;
    text-align: center;
    z-index: -1
}

.mate-img {
    width: 18%;
    float: left;
    margin-top: 2%;
    margin-left: 2%;
    opacity: .05
}

#arrow {
    position: absolute;
    top: 50%;
    left: -1%;
    width: 5%
}

canvas {
    width: 180px;
    height: 180px;
    margin: 1em 0
}

.wangshi {
    display: none
}

.blue {
    background: #01b3ed
}

.blank {
    height: 600px
}

.head-blank {
    height: 55px
}

.info {
    position: absolute;
    width: 100%;
    background: #f7f8f8;
    box-shadow: 1px 1px 5px rgba(136,136,136,0.42);
    z-index: 9999;
    display: none
}

.info-1-2 {
    top: 5%
}

.x {
    position: absolute;
    width: 6%;
    z-index: 9999;
    right: 2%;
    top: 1.3%
}

.shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 2001;
    display: none
}

.gg {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 25%;
    z-index: 999;
    display: none
}

.active {
    display: block;
    animation: gg 3s;
    -webkit-animation: gg 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards
}

@keyframes gg {
    0% {
        top: 50%;
        opacity: 0
    }

    20% {
        top: 40%;
        opacity: 1
    }

    70% {
        top: 40%;
        opacity: 1
    }

    90% {
        top: 30%;
        opacity: 0
    }

    100% {
        top: -30%;
        opacity: 0
    }
}

.ul_show {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 103%;
    left: 0;
    list-style: none;
    background: #e8f0f7;
    z-index: 999;
    display: none
}

.nav {
    padding: 6% 0;
    border-bottom: 1px solid #fff
}

.intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('bg.jpg');
    background-size: 100%;
    z-index: 9999
}

.ts-up {
    width: 25%;
    position: absolute;
    top: 9%;
    right: 4%
}

.ts-middle {
    position: absolute;
    width: 30%;
    top: 17%;
    right: -4%
}

.ts {
    float: left;
    width: 25%;
    padding-right: 1%
}

.ts-down {
    position: absolute;
    width: 28%;
    height: 5%;
    bottom: 20%;
    right: 37%;
    border: 1px solid #fff;
    border-radius: 30px;
}

.ts-down>p {
    text-align: center;
    color: #fff;
    font-size: 16px
}

#ts-right {
    position: absolute;
    width: 30%;
    right: 7%;
    top: 36%
}

.underline {
    position: absolute;
    width: 22%;
    top: 43%;
    left: 6%
}

.line-ts {
    position: absolute;
    top: 46%;
    width: 26%;
    left: 4%
}

.hand {
    position: absolute;
    width: 7%;
    top: 44%;
    left: 24%;
    z-index: 9999
}

.nav>h3 {
    color: #1e3964;
    font-weight: 500
}

.c-t-container,.t-container {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 auto
}

.bold {
    font-weight: bold
}

.ts-team {
    position: absolute;
    width: 15%;
    top: 26%;
    left: 6%
}

.ts-team-img {
    position: absolute;
    width: 7%;
    top: 21%;
    left: 10%
}

.menu-arrow {
    background-image: url(menu_arrow.png);
    width: 14px;
    height: 9px;
    clear: both;
    text-align: center;
    background-size: 100%;
    position: absolute;
    margin: 0 0 -23px 0;
    right: 3%;
    top: 40%;
    animation: 2.2s arrow ease-in-out;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3
}

@keyframes arrow {
    0% {
        opacity: 0
    }

    50% {
        opacity: .6
    }

    100% {
        opacity: 0
    }
}

.review {
    position: absolute;
    bottom: 3%;
    width: 9%;
    right: 3%;
    z-index: 99
}

.yhl {
    width: 8%;
    float: left;
    margin-top: -1%
}

.yhr {
    width: 8%;
    float: right;
    margin-top: -13%
}

.yh-yh {
    padding: 4% 8%;
    line-height: 25px;
    font-style: italic
}

.node-last {
    width: 90%;
    display: inline-block;
    margin: 5% 3% 5% 3%;
    border-bottom: 1px solid #c9caca;
    padding-bottom: 4%;
    background-color: #f7f8f8
}

.para-last {
    margin: 10% 0
}

.bottom {
    border-bottom: 8px solid;
    border-image: url(bottom.png) 0 0 30% 0;
    padding-bottom: 6%
}

.msk {
    margin: 0 auto;
    text-align: center
}

.msk>img {
    width: 18%
}

.para-pd {
    margin: 5% auto;
    text-align: center
}

@media only screen and (min-width:1000px) {
    #all_container {
        left: 50%;
        width: 500px;
        height: 800px;
        margin-left: -250px
    }
}

.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1
}