#Index {
    width: 100%
}

#Index .bannerBox {
    position: relative;
    width: 100%;
    height: 528px;
    overflow: hidden;
    text-align: center;min-height:832px;background-color: #4f83bd;padding-top:70px;overflow: visible
}

#Index .bannerBox .leftArrowBox {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    width: 37px;
    height: 528px
}

#Index .bannerBox .leftArrowBox img {
    transition: all .3s;
    opacity: 0;
    position: absolute;
    margin-top: -28.5px;
    top: 50%;
    left: 7px;
    width: 30px;
    height: 57px;
    cursor: pointer
}

#Index .bannerBox .leftArrowBox:hover img {
    opacity: 1
}

@media(max-width: 520px) {
    #Index .bannerBox .leftArrowBox {
        display:none
    }
}

#Index .bannerBox .rightArrowBox {
    z-index: 100;
    position: absolute;
    top: 0;
    right: 0;
    width: 37px;
    height: 528px
}

#Index .bannerBox .rightArrowBox img {
    transition: all .3s;
    opacity: 0;
    position: absolute;
    margin-top: -28.5px;
    top: 50%;
    right: 7px;
    width: 30px;
    height: 57px;
    cursor: pointer
}

#Index .bannerBox .rightArrowBox:hover img {
    opacity: 1
}

@media(max-width: 520px) {
    #Index .bannerBox .rightArrowBox {
        display:none
    }
}

#Index .bannerBox .indexBox {
    z-index: 100;
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 170px;
    margin-left: -85px;
    height: 4px;
    background-color: none
}

#Index .bannerBox .indexBox .indexDetail {
    z-index: 100;
    float: left;
    width: 32px;
    height: 8px;
    border-bottom: 4px solid rgba(110,120,139,0.5);
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s
}

#Index .bannerBox .indexBox .indexDetail:hover {
    border-color: #FFF
}

#Index .bannerBox .indexBox .indexDetail:first-child,#Index .bannerBox .indexBox .indexDetail:nth-child(2),#Index .bannerBox .indexBox .indexDetail:nth-child(3) {
    margin-right: 14px
}

#Index .bannerBox .indexBox .activeIndex {
    border-color: #FFF
}

#Index .bannerBox .indexBox:after {
    clear: both
}

#Index .bannerBox .bannerContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    background-color: black
}

#Index .bannerBox .bannerContainer:after {
    clear: both
}

#Index .bannerBox .firstBanner {
    float: left;
    width: 20%;
    height: 528px;
    background-color: #012544;
    overflow: hidden
}

#Index .bannerBox .firstBanner .leftBox {
    z-index: 20;
    padding-top: 130px
}

#Index .bannerBox .firstBanner .leftBox .title {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    font-size: 42px;
    font-weight: 400;
    color: #FFF;
    cursor: default;
    width: 600px;
    line-height: 64px;
    white-space: nowrap;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .firstBanner .leftBox .title {
        margin-top:0;
        width: 100%;
        font-size: 26px;
        line-height: 36px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .firstBanner .leftBox .title {
        width:100%;
        font-size: 22px;
        line-height: 26px;
        text-align: center
    }
}

#Index .bannerBox .firstBanner .leftBox .solgan {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    font-size: 20px;
    color: #FFF;
    cursor: default;
    line-height: 50px;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .firstBanner .leftBox .solgan {
        margin-top:20px;
        width: 100%;
        font-size: 16px;
        line-height: 16px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .firstBanner .leftBox .solgan {
        margin-top:20px;
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        text-align: center
    }
}

#Index .bannerBox .firstBanner .leftBox .intro {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    margin-bottom: 40px;
    font-size: 20px;
    color: #34c8e6;
    cursor: default;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .firstBanner .leftBox .intro {
        margin-top:15px;
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .firstBanner .leftBox .intro {
        margin-top:15px;
        width: 100%;
        font-size: 13px;
        line-height: 12px;
        text-align: center
    }
}

#Index .bannerBox .firstBanner .leftBox .tryBtnBox {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .firstBanner .leftBox .tryBtnBox {
        display:none
    }
}

#Index .bannerBox .firstBanner .leftBox .mobileImg {
    display: none
}

@media(max-width: 520px) {
    #Index .bannerBox .firstBanner .leftBox .mobileImg {
        display:block;
        margin-left: 5%;
        width: 90%
    }
}

@media(max-width: 380px) {
    #Index .bannerBox .firstBanner .leftBox .mobileImg {
        margin-left:0;
        width: 100%
    }
}

#Index .bannerBox .firstBanner .leftBox .tryBtn {
    float: left;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .firstBanner .leftBox .tryBtn a {
    display: block;
    width: 100%;
    height: 40px
}

#Index .bannerBox .firstBanner .leftBox .tryBtn:hover {
    border-color: #34c8e6;
    background-color: #34c8e6
}

#Index .bannerBox .firstBanner .leftBox .playBtn {
    position: relative;
    margin-left: 20px;
    float: left;
    width: 50px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #FFF;
    cursor: pointer;
    overflow: hidden
}

#Index .bannerBox .firstBanner .leftBox .playBtn .line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    border-bottom: 2px solid #FFF
}

#Index .bannerBox .firstBanner .leftBox .playBtn .leftLine {
    z-index: 10;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .firstBanner .leftBox .playBtn .rightLine {
    z-index: 10;
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .firstBanner .leftBox .playBtn:hover .leftLine {
    -webkit-transform: translateX(-25px);
    transform: translateX(-25px)
}

#Index .bannerBox .firstBanner .leftBox .playBtn:hover .rightLine {
    -webkit-transform: translateX(25px);
    transform: translateX(25px)
}

@media(max-width: 520px) {
    #Index .bannerBox .firstBanner .leftBox {
        padding-top:0
    }
}

#Index .bannerBox .firstBanner .rightBox {
    position: relative
}

#Index .bannerBox .firstBanner .rightBox .firstBorder {
    z-index: 1;
    position: absolute;
    top: -25px;
    right: 50px;
    width: 578px;
    height: 578px;
    border-radius: 289px;
    border: 1px solid #023256;
    background-color: rgba(16,36,87,0.2);
    -webkit-animation: firstBanner 3s linear infinite;
    animation: firstBanner 3s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .secondBorder {
    z-index: 10;
    position: absolute;
    top: -25px;
    right: 50px;
    width: 578px;
    height: 578px;
    border-radius: 289px;
    border: 1px solid #023256
}

#Index .bannerBox .firstBanner .rightBox .thirdBorder {
    z-index: 10;
    position: absolute;
    margin-top: -196.5px;
    margin-left: -196.5px;
    top: 50%;
    left: 50%;
    width: 393px;
    height: 393px;
    border-radius: 196.5px;
    border: 1px solid #0c5679
}

#Index .bannerBox .firstBanner .rightBox .thirdBorder .borderImg {
    position: absolute;
    top: 43.5px;
    left: 43.5px
}

#Index .bannerBox .firstBanner .rightBox .thirdBorder .logoImg {
    position: absolute;
    top: 50px;
    left: 38px
}

#Index .bannerBox .firstBanner .rightBox .dockerImg {
    z-index: 1;
    position: absolute;
    margin-top: -42.5px;
    margin-left: -42.5px;
    top: 50%;
    left: 50%;
    width: 85px;
    height: 85px;
    text-align: center;
    border-radius: 42.5px;
    background-color: rgba(22,73,126,0.5);
    -webkit-animation: firstBannerDocker 45s linear infinite;
    animation: firstBannerDocker 45s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .dockerImg img {
    margin-top: 24px
}

#Index .bannerBox .firstBanner .rightBox .ksImg {
    z-index: 1;
    position: absolute;
    margin-top: -42.5px;
    margin-left: -42.5px;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    text-align: center;
    border-radius: 42.5px;
    background-color: rgba(18,71,123,0.5);
    -webkit-animation: firstBannerks 45s linear infinite;
    animation: firstBannerks 45s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .ksImg img {
    margin-top: 11px
}

#Index .bannerBox .firstBanner .rightBox .trImg {
    z-index: 1;
    position: absolute;
    margin-top: -42.5px;
    margin-left: -42.5px;
    top: 50%;
    left: 50%;
    width: 85px;
    height: 85px;
    text-align: center;
    border-radius: 42.5px;
    background-color: rgba(22,73,126,0.5);
    -webkit-animation: firstBannertr 45s linear infinite;
    animation: firstBannertr 45s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .trImg img {
    margin-top: 17px
}

#Index .bannerBox .firstBanner .rightBox .containerIcon {
    z-index: 20;
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    color: #FFF;
    -webkit-animation: firstBannerContainerIcon 30s linear infinite;
    animation: firstBannerContainerIcon 30s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .containerIcon p {
    display: block;
    margin-top: 8px;
    margin-left: -13px;
    width: 50px;
    color: #60e8f8
}

#Index .bannerBox .firstBanner .rightBox .cicdIcon {
    z-index: 20;
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    color: #FFF;
    -webkit-animation: firstBannerCicdIcon 30s linear infinite;
    animation: firstBannerCicdIcon 30s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .cicdIcon p {
    display: block;
    margin-top: -20px;
    margin-left: 8px;
    width: 50px;
    color: #60e8f8;
    transform: rotate(-90deg)
}

#Index .bannerBox .firstBanner .rightBox .serviceIcon {
    z-index: 20;
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    color: #FFF;
    -webkit-animation: firstBannerServiceIcon 30s linear infinite;
    animation: firstBannerServiceIcon 30s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .serviceIcon p {
    display: block;
    margin-top: -43px;
    margin-left: -24px;
    width: 50px;
    color: #60e8f8;
    transform: rotate(-180deg)
}

#Index .bannerBox .firstBanner .rightBox .devIcon {
    z-index: 20;
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    color: #FFF;
    -webkit-animation: firstBannerDevIcon 30s linear infinite;
    animation: firstBannerDevIcon 30s linear infinite
}

#Index .bannerBox .firstBanner .rightBox .devIcon p {
    display: block;
    margin-top: -15px;
    margin-left: -39px;
    width: 50px;
    color: #60e8f8;
    transform: rotate(-270deg)
}

@media screen and (min-width: 1200px) {
    #Index .bannerBox .firstBanner .rightBox .firstBorder {
        right:-25px
    }

    #Index .bannerBox .firstBanner .rightBox .secondBorder {
        right: -25px
    }
}

@media(max-width: 520px) {
    #Index .bannerBox .firstBanner .rightBox {
        display:none
    }
}

#Index .bannerBox .secondBanner {
    position: relative;
    z-index: 20;
    float: left;
    width: 20%;
    height: 528px;
    background: url("../img/index/secondBannerBg.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden
}

#Index .bannerBox .secondBanner .leftBox {
    z-index: 20;
    padding-top: 150px
}

#Index .bannerBox .secondBanner .leftBox .title {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    font-size: 42px;
    font-weight: 400;
    color: #FFF;
    cursor: default;
    width: 600px;
    line-height: 64px;
    white-space: nowrap;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .secondBanner .leftBox .title {
        margin-top:0;
        width: 100%;
        font-size: 26px;
        line-height: 36px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .secondBanner .leftBox .title {
        margin-top:40px;
        width: 100%;
        font-size: 22px;
        line-height: 26px;
        text-align: center
    }
}

#Index .bannerBox .secondBanner .leftBox .solgan {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    margin-bottom: 40px;
    font-size: 20px;
    color: #FFF;
    cursor: default;
    line-height: 50px;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .secondBanner .leftBox .solgan {
        margin-top:20px;
        width: 100%;
        font-size: 16px;
        line-height: 16px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .secondBanner .leftBox .solgan {
        margin-top:20px;
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        text-align: center
    }
}

#Index .bannerBox .secondBanner .leftBox .intro {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    margin-bottom: 60px;
    font-size: 24px;
    color: #33c8e6;
    cursor: default;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .secondBanner .leftBox .intro {
        margin-top:15px;
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .secondBanner .leftBox .intro {
        margin-top:15px;
        width: 100%;
        font-size: 13px;
        line-height: 12px;
        text-align: center
    }
}

#Index .bannerBox .secondBanner .leftBox .tryBtnBox {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .secondBanner .leftBox .tryBtnBox {
        display:none
    }
}

#Index .bannerBox .secondBanner .leftBox .mobileImg {
    display: none
}

@media(max-width: 520px) {
    #Index .bannerBox .secondBanner .leftBox .mobileImg {
        display:block;
        margin-left: 5%;
        width: 90%
    }
}

@media(max-width: 380px) {
    #Index .bannerBox .secondBanner .leftBox .mobileImg {
        margin-left:0;
        width: 100%
    }
}

#Index .bannerBox .secondBanner .leftBox .tryBtn {
    float: left;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .secondBanner .leftBox .tryBtn a {
    display: block;
    width: 100%;
    height: 40px
}

#Index .bannerBox .secondBanner .leftBox .tryBtn:hover {
    border-color: #34c8e6;
    background-color: #34c8e6
}

#Index .bannerBox .secondBanner .leftBox .playBtn {
    position: relative;
    margin-left: 20px;
    float: left;
    width: 50px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #FFF;
    cursor: pointer;
    overflow: hidden
}

#Index .bannerBox .secondBanner .leftBox .playBtn .line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    border-bottom: 2px solid #FFF
}

#Index .bannerBox .secondBanner .leftBox .playBtn .leftLine {
    z-index: 10;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .secondBanner .leftBox .playBtn .rightLine {
    z-index: 10;
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .secondBanner .leftBox .playBtn:hover .leftLine {
    -webkit-transform: translateX(-25px);
    transform: translateX(-25px)
}

#Index .bannerBox .secondBanner .leftBox .playBtn:hover .rightLine {
    -webkit-transform: translateX(25px);
    transform: translateX(25px)
}

@media(max-width: 520px) {
    #Index .bannerBox .secondBanner .leftBox {
        padding-top:0
    }
}

#Index .bannerBox .secondBanner .rightBox {
    position: relative;
    height: 528px
}

#Index .bannerBox .secondBanner .rightBox .innerImg {
    z-index: 20;
    position: absolute;
    margin-top: -141px;
    margin-left: -155.5px;
    top: 50%;
    left: 50%;
    width: 311px;
    height: 282px
}

#Index .bannerBox .secondBanner .rightBox .outterImg {
    z-index: 1;
    position: absolute;
    margin-top: -193.5px;
    margin-left: -324.5px;
    top: 50%;
    left: 50%;
    width: 675px;
    height: 387px
}

#Index .bannerBox .secondBanner .rightBox .spinIconFirst {
    position: absolute;
    top: 70px;
    left: -80px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5)
}

#Index .bannerBox .secondBanner .rightBox .spinIconSecond {
    position: absolute;
    top: 80px;
    left: 50px;
    -webkit-transform: scale(0.3,0.3);
    transform: scale(0.3,0.3)
}

#Index .bannerBox .secondBanner .rightBox .spinIconThird {
    position: absolute;
    top: 50px;
    right: -50px;
    -webkit-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8)
}

#Index .bannerBox .secondBanner .rightBox .spinIconForth {
    position: absolute;
    top: 150px;
    right: 0;
    -webkit-transform: scale(0.7,0.7);
    transform: scale(0.7,0.7)
}

#Index .bannerBox .secondBanner .rightBox .spinIconFifth {
    position: absolute;
    top: 400px;
    right: 50px;
    -webkit-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8)
}

#Index .bannerBox .secondBanner .rightBox .u_p3d {
    z-index: 15;
    -webkit-transform-style: preserve-3d!important;
    transform-style: preserve-3d!important
}

#Index .bannerBox .secondBanner .rightBox .ui_base {
    position: absolute;
    width: 400px;
    height: 0;
    left: -51px;
    top: 131px;
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 50% 0;
    perspective: 1000px;
    perspective-origin: 50% 0
}

#Index .bannerBox .secondBanner .rightBox .base {
    -webkit-transform: rotateX(80deg) rotateY(-10deg);
    transform: rotateX(80deg) rotateY(-10deg);
    position: relative;
    width: 684px;
    height: 342px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: secondBannerLittleCircle 30s linear 0s infinite;
    animation: secondBannerLittleCircle 30s linear 0s infinite
}

#Index .bannerBox .secondBanner .rightBox .ball_base {
    -webkit-transform-origin: 342px 0;
    transform-origin: 342px 0;
    position: absolute;
    top: 175px;
    left: -50px;
    width: 225px;
    height: 127px
}

#Index .bannerBox .secondBanner .rightBox .ball {
    -webkit-transition: all 2s ease-out 0;
    transition: all 2s ease-out 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-size: 100% 100%;
    left: 0;
    top: 0;
    color: rgba(255,255,255,0);
    font-size: 13px;
    opacity: 1;
    overflow: hidden
}

#Index .bannerBox .secondBanner .rightBox .ball {
    color: #fff;
    opacity: 1
}

#Index .bannerBox .secondBanner .rightBox .ball_1 .ball {
    -webkit-animation: secondBannerFirstIcon 30s linear 0s infinite;
    animation: secondBannerFirstIcon 30s linear 0s infinite
}

#Index .bannerBox .secondBanner .rightBox .ball_2 .ball {
    -webkit-animation: secondBannerSecondIcon 30s linear 0s infinite;
    animation: secondBannerSecondIcon 30s linear 0s infinite
}

#Index .bannerBox .secondBanner .rightBox .ball_3 .ball {
    -webkit-animation: secondBannerThirdIcon 30s linear 0s infinite;
    animation: secondBannerThirdIcon 30s linear 0s infinite
}

#Index .bannerBox .secondBanner .rightBox .ball_4 .ball {
    -webkit-animation: secondBannerForthIcon 30s linear 0s infinite;
    animation: secondBannerForthIcon 30s linear 0s infinite
}

#Index .bannerBox .secondBanner .rightBox .ball_1 {
    -webkit-transform: rotateX(-90deg) rotateY(90deg) translateY(-60px);
    transform: rotateX(-90deg) rotateY(90deg) translateY(-60px)
}

#Index .bannerBox .secondBanner .rightBox .ball_1 .imgBox {
    opacity: .8;
    z-index: 20;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    text-align: center;
    background-color: #066c92
}

#Index .bannerBox .secondBanner .rightBox .ball_1 .imgBox img {
    margin-bottom: 18px
}

#Index .bannerBox .secondBanner .rightBox .ball_2 {
    -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-60px);
    transform: rotateX(-90deg) rotateY(180deg) translateY(-60px)
}

#Index .bannerBox .secondBanner .rightBox .ball_2 .imgBox {
    opacity: .8;
    z-index: 20;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    text-align: center;
    background-color: #066c92
}

#Index .bannerBox .secondBanner .rightBox .ball_2 .imgBox img {
    margin-bottom: 18px
}

#Index .bannerBox .secondBanner .rightBox .ball_3 {
    -webkit-transform: rotateX(-90deg) rotateY(270deg) translateY(-60px);
    transform: rotateX(-90deg) rotateY(270deg) translateY(-60px)
}

#Index .bannerBox .secondBanner .rightBox .ball_3 .imgBox {
    opacity: .8;
    z-index: 20;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    text-align: center;
    background-color: #066c92
}

#Index .bannerBox .secondBanner .rightBox .ball_3 .imgBox img {
    margin-bottom: 18px
}

#Index .bannerBox .secondBanner .rightBox .ball_4 {
    -webkit-transform: rotateX(-90deg) rotateY(360deg) translateY(-60px);
    transform: rotateX(-90deg) rotateY(360deg) translateY(-60px)
}

#Index .bannerBox .secondBanner .rightBox .ball_4 .imgBox {
    opacity: .8;
    z-index: 20;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
    background-color: #066c92
}

#Index .bannerBox .secondBanner .rightBox .ball_4 .imgBox img {
    margin-bottom: 43px
}

@media(max-width: 520px) {
    #Index .bannerBox .secondBanner .rightBox {
        display:none
    }
}

#Index .bannerBox .thirdBanner {
    position: relative;
    float: left;
    width: 20%;
    height: 528px;
    background: #112645
}

#Index .bannerBox .thirdBanner .leftBox {
    z-index: 20;
    padding-top: 150px
}

#Index .bannerBox .thirdBanner .leftBox .title {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    font-size: 42px;
    font-weight: 400;
    color: #FFF;
    cursor: default;
    width: 600px;
    line-height: 64px;
    white-space: nowrap;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .thirdBanner .leftBox .title {
        margin-top:0;
        width: 100%;
        font-size: 26px;
        line-height: 36px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .thirdBanner .leftBox .title {
        margin-top:40px;
        width: 100%;
        font-size: 22px;
        line-height: 26px;
        text-align: center
    }
}

#Index .bannerBox .thirdBanner .leftBox .solgan {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    margin-bottom: 40px;
    font-size: 20px;
    color: #FFF;
    cursor: default;
    line-height: 50px;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .thirdBanner .leftBox .solgan {
        margin-top:20px;
        width: 100%;
        font-size: 16px;
        line-height: 16px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .thirdBanner .leftBox .solgan {
        margin-top:20px;
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        text-align: center
    }
}

#Index .bannerBox .thirdBanner .leftBox .intro {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    margin-bottom: 60px;
    font-size: 24px;
    color: #33c8e6;
    cursor: default;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .thirdBanner .leftBox .intro {
        margin-top:15px;
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .thirdBanner .leftBox .intro {
        margin-top:15px;
        width: 100%;
        font-size: 13px;
        line-height: 12px;
        text-align: center
    }
}

#Index .bannerBox .thirdBanner .leftBox .tryBtnBox {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .thirdBanner .leftBox .tryBtnBox {
        display:none
    }
}

#Index .bannerBox .thirdBanner .leftBox .mobileImg {
    display: none
}

@media(max-width: 520px) {
    #Index .bannerBox .thirdBanner .leftBox .mobileImg {
        display:block;
        margin-left: 5%;
        width: 90%
    }
}

@media(max-width: 380px) {
    #Index .bannerBox .thirdBanner .leftBox .mobileImg {
        margin-left:0;
        width: 100%
    }
}

#Index .bannerBox .thirdBanner .leftBox .tryBtn {
    float: left;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .thirdBanner .leftBox .tryBtn a {
    display: block;
    width: 100%;
    height: 40px
}

#Index .bannerBox .thirdBanner .leftBox .tryBtn:hover {
    border-color: #34c8e6;
    background-color: #34c8e6
}

#Index .bannerBox .thirdBanner .leftBox .playBtn {
    position: relative;
    margin-left: 20px;
    float: left;
    width: 50px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #FFF;
    cursor: pointer;
    overflow: hidden
}

#Index .bannerBox .thirdBanner .leftBox .playBtn .line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    border-bottom: 2px solid #FFF
}

#Index .bannerBox .thirdBanner .leftBox .playBtn .leftLine {
    z-index: 10;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .thirdBanner .leftBox .playBtn .rightLine {
    z-index: 10;
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .thirdBanner .leftBox .playBtn:hover .leftLine {
    -webkit-transform: translateX(-25px);
    transform: translateX(-25px)
}

#Index .bannerBox .thirdBanner .leftBox .playBtn:hover .rightLine {
    -webkit-transform: translateX(25px);
    transform: translateX(25px)
}

@media(max-width: 520px) {
    #Index .bannerBox .thirdBanner .leftBox {
        padding-top:0
    }
}

#Index .bannerBox .thirdBanner .rightBox {
    position: relative;
    height: 528px
}

#Index .bannerBox .thirdBanner .rightBox .boxImg {
    z-index: 20;
    position: absolute;
    margin-left: -282.5px;
    left: 50%;
    bottom: 0;
    width: 565px;
    height: 289px
}

#Index .bannerBox .thirdBanner .rightBox .lightImg {
    z-index: 10;
    position: absolute;
    margin-left: -304px;
    left: 50%;
    top: 0;
    width: 576px;
    height: 328px;
    -webkit-animation: thirdBannerLight 2s linear infinite;
    animation: thirdBannerLight 2s linear infinite
}

#Index .bannerBox .thirdBanner .rightBox .firstIcon {
    position: absolute;
    margin-left: -120px;
    top: 200px;
    left: 50%;
    -webkit-animation: thirdBannerIcon 2s linear infinite;
    animation: thirdBannerIcon 2s linear infinite;
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms
}

#Index .bannerBox .thirdBanner .rightBox .secondIcon {
    position: absolute;
    margin-left: -10px;
    top: 180px;
    left: 50%;
    -webkit-animation: thirdBannerIcon 2s linear infinite;
    animation: thirdBannerIcon 2s linear infinite;
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms
}

#Index .bannerBox .thirdBanner .rightBox .thirdIcon {
    position: absolute;
    margin-left: 80px;
    top: 100px;
    left: 50%;
    -webkit-animation: thirdBannerIcon 2s linear infinite;
    animation: thirdBannerIcon 2s linear infinite;
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms
}

#Index .bannerBox .thirdBanner .rightBox .forthIcon {
    position: absolute;
    margin-left: -130px;
    top: 130px;
    left: 50%;
    -webkit-animation: thirdBannerIcon 2s linear infinite;
    animation: thirdBannerIcon 2s linear infinite;
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms
}

#Index .bannerBox .thirdBanner .rightBox .fifthIcon {
    position: absolute;
    margin-left: 0;
    top: 80px;
    left: 50%;
    -webkit-animation: thirdBannerIcon 2s linear infinite;
    animation: thirdBannerIcon 2s linear infinite;
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms
}

#Index .bannerBox .thirdBanner .rightBox .sixthIcon {
    position: absolute;
    margin-left: -200px;
    top: 60px;
    left: 50%;
    -webkit-animation: thirdBannerIcon 2s linear infinite;
    animation: thirdBannerIcon 2s linear infinite
}

#Index .bannerBox .thirdBanner .rightBox .spinIconFirst {
    position: absolute;
    top: 240px;
    left: 30px;
    -webkit-transform: scale(0.6,0.6);
    transform: scale(0.6,0.6)
}

#Index .bannerBox .thirdBanner .rightBox .spinIconSecond {
    position: absolute;
    top: 320px;
    left: -50px;
    -webkit-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8)
}

#Index .bannerBox .thirdBanner .rightBox .spinIconThird {
    position: absolute;
    top: 460px;
    left: -300px;
    -webkit-transform: scale(0.7,0.7);
    transform: scale(0.7,0.7)
}

@media(max-width: 520px) {
    #Index .bannerBox .thirdBanner .rightBox {
        display:none
    }
}

#Index .bannerBox .forthBanner {
    position: relative;
    float: left;
    width: 20%;
    height: 528px;
    text-align: center;
    color: #FFF;
    overflow: hidden
}

#Index .bannerBox .forthBanner .forthContainer {
    position: absolute;
    margin-left: -960px;
    top: 0;
    left: 50%;
    padding-top: 134px;
    width: 1920px;
    height: 100%;
    background: url('../img/index/forthBannerBg.png') no-repeat;
    background-size: 100% 100%;
    background-color: #1d1847
}

@media(max-width: 1366px) {
    #Index .bannerBox .forthBanner .forthContainer {
        margin-left:-840px;
        width: 1680px
    }
}

@media(max-width: 1280px) {
    #Index .bannerBox .forthBanner .forthContainer {
        margin-left:-840px;
        width: 1680px
    }
}

@media(max-width: 1200px) {
    #Index .bannerBox .forthBanner .forthContainer {
        margin-left:-740px;
        width: 1480px
    }
}

#Index .bannerBox .forthBanner .containerSvg {
    opacity: 0;
    margin-bottom: 32px;
    width: 250px;
    height: 75px;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .forthBanner h1 {
    opacity: 0;
    z-index: 20;
    margin-top: 0;
    margin-bottom: 32px;
    font-size: 48px;
    line-height: 48px;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .forthBanner h1 {
        padding:0 20px;
        font-size: 34px;
        line-height: 34px
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .forthBanner h1 {
        font-size:28px;
        line-height: 28px
    }
}

#Index .bannerBox .forthBanner p {
    opacity: 0;
    z-index: 20;
    font-size: 24px;
    line-height: 24px;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .forthBanner p {
        padding:0 15px;
        font-size: 18px;
        line-height: 18px
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .forthBanner p {
        font-size:16px;
        line-height: 16px
    }
}

#Index .bannerBox .forthBanner .innerLight {
    z-index: 10;
    position: absolute;
    margin-left: -21.35%;
    bottom: 71px;
    left: 50%;
    width: 42.5%;
    height: 340px;
    -webkit-animation: thirdBannerLight 2s linear infinite;
    animation: thirdBannerLight 2s linear infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

#Index .bannerBox .forthBanner .outerLight {
    z-index: 10;
    position: absolute;
    margin-left: -36.5%;
    bottom: 41px;
    left: 50%;
    width: 73.125%;
    height: 562px;
    -webkit-animation: thirdBannerLight 2s linear infinite;
    animation: thirdBannerLight 2s linear infinite
}

#Index .bannerBox .forthBanner .bottomCircle {
    position: absolute;
    margin-left: -24%;
    left: 50%;
    bottom: 20px;
    opacity: .3;
    z-index: -1;
    width: 49.635%;
    height: 195px;
    border-radius: 50%;
    border: 1px dashed #1d4792;
    background-color: #103d7e;
    -webkit-animation: forthBannerLight 4.5s linear infinite;
    animation: forthBannerLight 4.5s linear infinite
}

#Index .bannerBox .forthBanner .spinIcon {
    position: absolute
}

#Index .bannerBox .forthBanner .firstSpinIcon {
    opacity: .7;
    top: 220px;
    left: 33%;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5)
}

#Index .bannerBox .forthBanner .secondSpinIcon {
    opacity: .9;
    top: 330px;
    left: 67%;
    -webkit-transform: scale(0.7,0.7);
    transform: scale(0.7,0.7)
}

#Index .bannerBox .forthBanner .thirdSpinIcon {
    top: 370px;
    left: 10%;
    -webkit-transform: scale(0.4,0.4);
    transform: scale(0.4,0.4)
}

#Index .bannerBox .forthBanner .forthSpinIcon {
    opacity: .7;
    top: 500px;
    left: 80%;
    -webkit-transform: scale(0.3,0.3);
    transform: scale(0.3,0.3)
}

#Index .bannerBox .forthBanner .commonForthIcon {
    position: absolute;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: secondBoxOutterCircle 4s linear infinite;
    animation: secondBoxOutterCircle 4s linear infinite
}

#Index .bannerBox .forthBanner .firstIcon {
    opacity: .2;
    top: 20px;
    left: 13%;
    width: 13px;
    height: 13px
}

#Index .bannerBox .forthBanner .secondIcon {
    opacity: .3;
    top: 300px;
    left: 25%;
    width: 17px;
    height: 17px;
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms
}

#Index .bannerBox .forthBanner .thirdIcon {
    opacity: .4;
    top: 420px;
    left: 33%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms
}

#Index .bannerBox .forthBanner .forthIcon {
    opacity: .3;
    top: 100px;
    left: 82%;
    width: 13px;
    height: 13px;
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms
}

@media(max-width: 520px) {
    #Index .bannerBox .forthBanner {
        background:url('../img/index/mobileForthBannerBg.png') no-repeat;
        background-size: 100% 100%
    }

    #Index .bannerBox .forthBanner .containerSvg {
        width: 200px;
        height: 60px
    }

    #Index .bannerBox .forthBanner .bottomCircle,#Index .bannerBox .forthBanner .innerLight,#Index .bannerBox .forthBanner .outerLight {
        display: none
    }
}

#Index .bannerBox .fifthBanner {
    position: relative;
    z-index: 20;
    float: left;
    width: 20%;
    height: 528px;
    background-color: #131e48;
    overflow: hidden
}

#Index .bannerBox .fifthBanner .leftBox {
    z-index: 999;
    padding-top: 130px
}

#Index .bannerBox .fifthBanner .leftBox .title {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    font-size: 46px;
    font-weight: 400;
    color: #FFF;
    cursor: default;
    width: 600px;
    line-height: 64px;
    height: 64px;
    white-space: nowrap;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    margin-top: 20px
}

@media(max-width: 520px) {
    #Index .bannerBox .fifthBanner .leftBox .title {
        margin:0;
        width: 100%;
        font-size: 26px;
        height: 36px;
        line-height: 36px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .fifthBanner .leftBox .title {
        margin-top:0;
        width: 100%;
        font-size: 22px;
        line-height: 26px;
        height: 26px;
        text-align: center
    }
}

#Index .bannerBox .fifthBanner .leftBox .solgan {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    height: 50px;
    font-size: 23px;
    color: #FFF;
    cursor: default;
    line-height: 50px;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .fifthBanner .leftBox .solgan {
        margin:20px 0 0 0;
        width: 100%;
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .fifthBanner .leftBox .solgan {
        margin:20px 0 0 0;
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        height: 14px;
        text-align: center
    }
}

#Index .bannerBox .fifthBanner .leftBox .intro {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    margin-bottom: 40px;
    font-size: 20px;
    height: 28px;
    line-height: 28px;
    color: #34c8e6;
    cursor: default;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .fifthBanner .leftBox .intro {
        margin:15px 0 40px 0;
        width: 100%;
        font-size: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center
    }
}

@media(max-width: 350px) {
    #Index .bannerBox .fifthBanner .leftBox .intro {
        margin:15px 0 40px 0;
        width: 100%;
        font-size: 13px;
        line-height: 12px;
        height: 12px;
        text-align: center
    }
}

#Index .bannerBox .fifthBanner .leftBox .tryBtnBox {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    -webkit-transition: all .6s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .6s cubic-bezier(0.645,0.045,0.355,1)
}

@media(max-width: 520px) {
    #Index .bannerBox .fifthBanner .leftBox .tryBtnBox {
        display:none
    }
}

#Index .bannerBox .fifthBanner .leftBox .mobileImg {
    display: none
}

@media(max-width: 520px) {
    #Index .bannerBox .fifthBanner .leftBox .mobileImg {
        display:block;
        margin-left: 5%;
        width: 90%
    }
}

@media(max-width: 380px) {
    #Index .bannerBox .fifthBanner .leftBox .mobileImg {
        margin-left:0;
        width: 100%
    }
}

#Index .bannerBox .fifthBanner .leftBox .tryBtn {
    float: left;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .fifthBanner .leftBox .tryBtn a {
    display: block;
    width: 100%;
    height: 40px
}

#Index .bannerBox .fifthBanner .leftBox .tryBtn:hover {
    border-color: #34c8e6;
    background-color: #34c8e6
}

#Index .bannerBox .fifthBanner .leftBox .playBtn {
    position: relative;
    margin-left: 20px;
    float: left;
    width: 50px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #FFF;
    cursor: pointer;
    overflow: hidden
}

#Index .bannerBox .fifthBanner .leftBox .playBtn .line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    border-bottom: 2px solid #FFF
}

#Index .bannerBox .fifthBanner .leftBox .playBtn .leftLine {
    z-index: 10;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .fifthBanner .leftBox .playBtn .rightLine {
    z-index: 10;
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 25px;
    height: 2px;
    border-bottom: 2px solid #34C8E6;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bannerBox .fifthBanner .leftBox .playBtn:hover .leftLine {
    -webkit-transform: translateX(-25px);
    transform: translateX(-25px)
}

#Index .bannerBox .fifthBanner .leftBox .playBtn:hover .rightLine {
    -webkit-transform: translateX(25px);
    transform: translateX(25px)
}

@media(max-width: 520px) {
    #Index .bannerBox .fifthBanner .leftBox {
        padding-top:0
    }
}

#Index .bannerBox .fifthBanner .rightBox {
    position: relative;
    height: 528px;
    padding: 75px 0 0 70px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 100
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord {
    position: relative;
    padding: 140px 0 0 25px;
    width: 420px;
    height: 334px;
    margin: 0;
    background: url("../img/index/fifthBannerCenter.png") no-repeat left top;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordOne {
    position: absolute;
    opacity: 1
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordOne .fifthWordOneOne {
    font-size: 14px;
    width: 373px;
    height: 24px;
    line-height: 24px;
    color: #57dced;
    margin: 0
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordOne .fifthWordOneOne .fifthWordOneTwo {
    font-size: 14px;
    width: 373px;
    height: 24px;
    line-height: 24px;
    color: #57dced;
    margin: 0;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordOne .fifthWordOneOne .fifthWordOneThird {
    display: inline-block;
    width: 16px;
    height: 18px;
    margin-top: 3px;
    border-bottom: 3px solid #57dced;
    position: absolute;
    -webkit-animation: fifthBannerSpan 1s infinite linear;
    animation: fifthBannerSpan 1s infinite linear
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerIconOne {
    top: -100px;
    left: -250px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthWordScale {
    -webkit-transform: scale(0.3,0.3);
    transform: scale(0.3,0.3)
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerIconTwo {
    top: 130px;
    left: -350px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerIconThird {
    top: -105px;
    left: -210px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerIconforth {
    top: 60px;
    left: -140px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerIconfifth {
    top: -125px;
    left: -110px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerIconSixth {
    top: -180px;
    left: 70px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerIconSeventh {
    top: 10px;
    left: 420px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerCloud1 {
    width: 79px;
    height: 27px;
    position: absolute;
    z-index: -1;
    top: 170px;
    left: -140px;
    background: url("../img/index/fifthbannerCould1.png") no-repeat -11px -37px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerCloud2 {
    width: 79px;
    height: 27px;
    position: absolute;
    z-index: 15;
    top: 282px;
    left: 485px;
    background: url("../img/index/fifthbannerCould1.png") no-repeat -11px -37px
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordThird .fifthBannerCloud3 {
    width: 235px;
    height: 100px;
    position: absolute;
    top: 47px;
    left: 283px;
    z-index: 15
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordTwo {
    position: absolute;
    opacity: 0
}

#Index .bannerBox .fifthBanner .rightBox .fifthImg .fifthWord .fifthWordTwo p {
    font-size: 14px;
    color: #57dced;
    height: 24px;
    line-height: 24px;
    margin: 0
}

@media(max-width: 520px) {
    #Index .bannerBox .fifthBanner .rightBox {
        display:none
    }
}

#Index .bannerBox .activeBanner .leftBox .title,#Index .bannerBox .activeBanner .leftBox .solgan,#Index .bannerBox .activeBanner .leftBox .intro,#Index .bannerBox .activeBanner .leftBox .tryBtnBox {
    -webkit-transform: translateY(0px)!important;
    transform: translateY(0px)!important;
    opacity: 1!important
}

#Index .bannerBox .activeBanner .forthContainer .containerSvg,#Index .bannerBox .activeBanner .forthContainer h1,#Index .bannerBox .activeBanner .forthContainer p {
    -webkit-transform: translateY(0px)!important;
    transform: translateY(0px)!important;
    opacity: 1!important
}

#Index .firstBox {
    padding-top: 70px;
    min-height: 720px;
    text-align: center
}

#Index .firstBox .title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #414141
}

#Index .firstBox .secondTitle {
    margin-bottom: 50px;
    font-size: 14px;
    color: #545454
}

#Index .firstBox .serviceDetail {
    margin-bottom: 20px;
    padding: 30px 50px 0;
    height: 235px;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .firstBox .serviceDetail .serviceTitle {
    font-size: 16px;
    font-weight: 600;
    color: #1e1e1e
}

#Index .firstBox .serviceDetail .serviceIntro {
    line-height: 25px;
    font-size: 13px;
    color: #8b8b8b
}

#Index .firstBox .serviceDetail svg {
    margin-bottom: 20px;
    width: 50px;
    height: 50px
}

#Index .firstBox .serviceDetail svg use {
    fill: #919191
}

#Index .firstBox .serviceDetail:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    box-shadow: 0 7px 7px #e9e9e9
}

@media(max-width: 520px) {
    #Index .firstBox .serviceDetail {
        margin-bottom:0;
        padding: 30px;
        height: auto
    }
    #Index .bannerBox {
        min-height: 0px;
        height: auto;
    }
    #Index .firstBox .serviceDetail svg {
        float: left
    }

    #Index .firstBox .serviceDetail .serviceTitle {
        padding-left: 80px;
        text-align: left
    }

    #Index .firstBox .serviceDetail .serviceIntro {
        padding-left: 80px;
        text-align: left
    }
}

#Index .secondBox {
    padding-top: 70px;
    width: 100%;
    min-height: 720px;
    text-align: center;
    background-color: #fafafa
}

#Index .secondBox .middleSpin {
    display: none
}

#Index .secondBox .title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #414141
}

#Index .secondBox .secondTitle {
    margin-bottom: 60px;
    font-size: 14px;
    color: #545454
}

@media(max-width: 520px) {
    #Index .secondBox .secondTitle {
        padding:0 30px
    }
}

#Index .secondBox .leftBox {
    text-align: right
}

#Index .secondBox .leftBox .top {
    position: relative;
    cursor: pointer
}

#Index .secondBox .leftBox .top p {
    margin-bottom: 20px;
    color: #4d4d4d;
    font-weight: 600;
    font-size: 16px;
    text-align: right
}

#Index .secondBox .leftBox .top span {
    line-height: 25px;
    color: #888;
    font-size: 14px;
    text-align: right
}

#Index .secondBox .leftBox .top .spinIcon {
    z-index: 15;
    display: none;
    position: absolute;
    top: 4px;
    right: -30px
}

#Index .secondBox .leftBox .top .spinIcon img {
    z-index: 1;
    position: absolute;
    top: 9px;
    left: 20px
}

#Index .secondBox .leftBox .top .spinIcon .cover {
    z-index: 10;
    position: absolute;
    top: -10px;
    left: 20px;
    width: 120px;
    height: 50px;
    background-color: #fafafa
}

#Index .secondBox .leftBox .middle {
    position: relative;
    margin-top: 30px;
    cursor: pointer
}

#Index .secondBox .leftBox .middle p {
    margin-bottom: 20px;
    color: #4d4d4d;
    font-weight: 600;
    font-size: 16px;
    text-align: right
}

#Index .secondBox .leftBox .middle span {
    line-height: 25px;
    color: #888;
    font-size: 14px;
    text-align: right
}

#Index .secondBox .leftBox .middle .spinIcon {
    z-index: 15;
    display: none;
    position: absolute;
    top: 4px;
    right: -30px
}

#Index .secondBox .leftBox .middle .spinIcon img {
    position: absolute;
    top: 9px;
    left: 20px
}

#Index .secondBox .leftBox .middle .spinIcon .cover {
    z-index: 10;
    position: absolute;
    top: -10px;
    left: 20px;
    width: 120px;
    height: 50px;
    background-color: #fafafa
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .secondBox .leftBox .middle {
        margin-top:40px
    }
}

#Index .secondBox .leftBox .bottom {
    position: relative;
    margin-top: 30px;
    cursor: pointer
}

#Index .secondBox .leftBox .bottom p {
    margin-bottom: 20px;
    color: #4d4d4d;
    font-weight: 600;
    font-size: 16px;
    text-align: right
}

#Index .secondBox .leftBox .bottom span {
    line-height: 25px;
    color: #888;
    font-size: 14px;
    text-align: right
}

#Index .secondBox .leftBox .bottom .spinIcon {
    z-index: 15;
    display: none;
    position: absolute;
    top: 4px;
    right: -30px
}

#Index .secondBox .leftBox .bottom .spinIcon img {
    position: absolute;
    top: -9px;
    left: 20px
}

#Index .secondBox .leftBox .bottom .spinIcon .cover {
    z-index: 10;
    position: absolute;
    top: -10px;
    left: 20px;
    width: 120px;
    height: 50px;
    background-color: #fafafa
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .secondBox .leftBox .bottom {
        margin-top:40px
    }
}

@media(max-width: 520px) {
    #Index .secondBox .leftBox {
        display:none
    }
}

#Index .secondBox .rightBox {
    text-align: left;
    cursor: pointer
}

#Index .secondBox .rightBox .top {
    position: relative
}

#Index .secondBox .rightBox .top p {
    margin-bottom: 20px;
    color: #4d4d4d;
    font-weight: 600;
    font-size: 16px;
    text-align: left
}

#Index .secondBox .rightBox .top span {
    line-height: 25px;
    color: #888;
    font-size: 14px;
    text-align: left
}

#Index .secondBox .rightBox .top .spinIcon {
    z-index: 15;
    display: none;
    position: absolute;
    top: 4px;
    left: -30px
}

#Index .secondBox .rightBox .top .spinIcon img {
    position: absolute;
    top: 9px;
    right: 20px
}

#Index .secondBox .rightBox .top .spinIcon .cover {
    z-index: 10;
    position: absolute;
    top: -10px;
    right: 20px;
    width: 120px;
    height: 50px;
    background-color: #fafafa
}

#Index .secondBox .rightBox .middle {
    position: relative;
    margin-top: 30px;
    cursor: pointer
}

#Index .secondBox .rightBox .middle p {
    margin-bottom: 20px;
    color: #4d4d4d;
    font-weight: 600;
    font-size: 16px;
    text-align: left
}

#Index .secondBox .rightBox .middle span {
    line-height: 25px;
    color: #888;
    font-size: 14px;
    text-align: left
}

#Index .secondBox .rightBox .middle .spinIcon {
    z-index: 15;
    display: none;
    position: absolute;
    top: 4px;
    left: -30px
}

#Index .secondBox .rightBox .middle .spinIcon img {
    position: absolute;
    top: 9px;
    right: 20px
}

#Index .secondBox .rightBox .middle .spinIcon .cover {
    z-index: 10;
    position: absolute;
    top: -10px;
    right: 20px;
    width: 120px;
    height: 50px;
    background-color: #fafafa
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .secondBox .rightBox .middle {
        margin-top:40px
    }
}

#Index .secondBox .rightBox .bottom {
    position: relative;
    margin-top: 30px;
    cursor: pointer
}

#Index .secondBox .rightBox .bottom p {
    margin-bottom: 20px;
    color: #4d4d4d;
    font-weight: 600;
    font-size: 16px;
    text-align: left
}

#Index .secondBox .rightBox .bottom span {
    line-height: 25px;
    color: #888;
    font-size: 14px;
    text-align: left
}

#Index .secondBox .rightBox .bottom .spinIcon {
    z-index: 15;
    display: none;
    position: absolute;
    top: 4px;
    left: -30px
}

#Index .secondBox .rightBox .bottom .spinIcon img {
    position: absolute;
    top: -9px;
    right: 20px
}

#Index .secondBox .rightBox .bottom .spinIcon .cover {
    z-index: 10;
    position: absolute;
    top: -10px;
    right: 20px;
    width: 120px;
    height: 50px;
    background-color: #fafafa
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .secondBox .rightBox .bottom {
        margin-top:40px
    }
}

@media(max-width: 520px) {
    #Index .secondBox .rightBox {
        display:none
    }
}

#Index .secondBox .middleBox {
    position: relative
}

#Index .secondBox .middleBox .outterCircle {
    z-index: 20;
    position: absolute;
    margin-left: -236.5px;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 473px;
    border-radius: 50%;
    background-color: #fafafa;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: secondBoxOutterCircle 90s linear infinite;
    animation: secondBoxOutterCircle 90s linear infinite
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .secondBox .middleBox .outterCircle {
        margin-left:-194px;
        width: 80%
    }
}

#Index .secondBox .middleBox .innerCircle {
    z-index: 25;
    position: absolute;
    margin-left: -201.5px;
    top: 35px;
    left: 50%;
    width: 100%;
    max-width: 403px;
    border-radius: 50%;
    background-color: #fafafa;
    -webkit-animation: secondBoxInnerCircle 90s linear infinite;
    animation: secondBoxInnerCircle 90s linear infinite
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .secondBox .middleBox .innerCircle {
        margin-left:-165px;
        top: 27px;
        width: 68.1%
    }
}

#Index .secondBox .middleBox .imgList {
    z-index: 30
}

#Index .secondBox .middleBox .imgList li {
    z-index: 30;
    position: absolute;
    margin-left: -168.5px;
    top: 68px;
    left: 50%;
    width: 337px;
    height: 337px
}

#Index .secondBox .middleBox .imgList li img {
    z-index: 30;
    opacity: 0;
    transition: all .3s
}

@media(max-width: 520px) {
    #Index .secondBox .middleBox {
        display:none
    }
}

#Index .secondBox .activeService {
    display: block!important;
    -webkit-animation: secondBoxLine 1s linear;
    animation: secondBoxLine 1s linear
}

#Index .secondBox .activeServiceImg img {
    opacity: 1!important
}

#Index .secondBox .mobileBox {
    position: relative;
    display: none;
    min-height: 520px
}

@media(max-width: 520px) {
    #Index .secondBox .mobileBox {
        display:block
    }
}

#Index .secondBox .mobileBox .leftArrowBox {
    z-index: 20;
    position: absolute;
    top: 150px;
    left: 10px;
    width: 10px;
    height: 30px
}

#Index .secondBox .mobileBox .leftArrowBox img {
    width: 10px
}

#Index .secondBox .mobileBox .rightArrowBox {
    z-index: 20;
    position: absolute;
    top: 150px;
    right: 10px;
    width: 10px;
    height: 30px
}

#Index .secondBox .mobileBox .rightArrowBox img {
    width: 10px
}

#Index .secondBox .mobileBox .bigCircleImg {
    position: absolute;
    left: 10%;
    width: 80%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: secondBoxOutterCircle 90s linear infinite;
    animation: secondBoxOutterCircle 90s linear infinite
}

#Index .secondBox .mobileBox .littleCircleImg {
    position: absolute;
    top: 4%;
    left: 15%;
    width: 70%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: secondBoxInnerCircle 90s linear infinite;
    animation: secondBoxInnerCircle 90s linear infinite
}

@media(max-width: 380px) {
    #Index .secondBox .mobileBox .littleCircleImg {
        top:3.5%
    }
}

@media(max-width: 350px) {
    #Index .secondBox .mobileBox .littleCircleImg {
        top:3%
    }
}

#Index .secondBox .mobileBox .imgBox {
    display: block;
    width: 70%
}

#Index .secondBox .mobileBox .imgBox .imgDetail {
    z-index: 10;
    opacity: 0;
    position: absolute;
    top: 8%;
    left: 20%;
    width: 60%;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

#Index .secondBox .mobileBox .imgBox .imgDetail img {
    margin-bottom: 50px;
    width: 100%
}

#Index .secondBox .mobileBox .imgBox .imgDetail p {
    font-size: 14px;
    font-weight: 600;
    text-align: center
}

#Index .secondBox .mobileBox .imgBox .imgDetail span {
    font-size: 13px;
    text-align: center
}

@media(max-width: 380px) {
    #Index .secondBox .mobileBox .imgBox .imgDetail {
        top:7%
    }
}

@media(max-width: 350px) {
    #Index .secondBox .mobileBox .imgBox .imgDetail {
        top:6%
    }
}

#Index .secondBox .mobileBox .imgBox .activeImgDetail {
    opacity: 1
}

#Index .thirdBox {
    padding-top: 70px;
    min-height: 720px;
    text-align: center
}

#Index .thirdBox .title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #414141
}

@media(max-width: 520px) {
    #Index .thirdBox .title {
        padding:0 20px
    }
}

#Index .thirdBox .secondTitle {
    margin-bottom: 40px;
    font-size: 14px;
    color: #545454
}

@media(max-width: 520px) {
    #Index .thirdBox .secondTitle {
        padding:0 50px
    }
}

#Index .thirdBox .careerDetail {
    position: relative;
    padding: 20px 15px;
    height: 243px
}

#Index .thirdBox .careerDetail .imgBox {
    width: 100%;
    height: 203px;
    border-radius: 3px;
    overflow: hidden
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .thirdBox .careerDetail .imgBox {
        height:173px
    }
}

@media(max-width: 520px) {
    #Index .thirdBox .careerDetail .imgBox {
        height:153px
    }
}

@media(max-width: 350px) {
    #Index .thirdBox .careerDetail .imgBox {
        height:133px
    }
}

#Index .thirdBox .careerDetail .imgBox .coverBox {
    transition: all .3s;
    padding: 5px 20px;
    min-height: 60px;
    color: #FFF;
    background-color: rgba(0,0,0,0.7);
    -webkit-transform: translateY(168px);
    transform: translateY(168px)
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .thirdBox .careerDetail .imgBox .coverBox {
        padding:5px 15px;
        -webkit-transform: translateY(138px);
        transform: translateY(138px)
    }
}

@media(max-width: 520px) {
    #Index .thirdBox .careerDetail .imgBox .coverBox {
        padding:5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        -webkit-transform: translateY(118px);
        transform: translateY(118px)
    }
}

@media(max-width: 350px) {
    #Index .thirdBox .careerDetail .imgBox .coverBox {
        padding:5px;
        -webkit-transform: translateY(98px);
        transform: translateY(98px)
    }
}

#Index .thirdBox .careerDetail .imgBox .coverBox .careerTitle {
    margin-bottom: 0;
    line-height: 30px;
    font-size: 16px;
    text-align: left;
    cursor: default
}

@media(max-width: 520px) {
    #Index .thirdBox .careerDetail .imgBox .coverBox .careerTitle {
        font-size:14px
    }
    #Index .serviceBox .imgBox{
        float: left;
    }
}


#Index .thirdBox .careerDetail .imgBox .coverBox .intro {
    margin-bottom: 0;
    line-height: 20px;
    font-size: 14px;
    text-align: left;
    cursor: default
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .thirdBox .careerDetail .imgBox .coverBox .intro {
        font-size:13px
    }
}

#Index .thirdBox .careerDetail .imgBox:hover .coverBox {
    background-color: #34c8e6;
    -webkit-transform: translateY(143px);
    transform: translateY(143px)
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .thirdBox .careerDetail .imgBox:hover .coverBox {
        -webkit-transform:translateY(113px);
        transform: translateY(113px)
    }
}

@media(max-width: 520px) {
    #Index .thirdBox .careerDetail .imgBox:hover .coverBox {
        -webkit-transform:translateY(73px);
        transform: translateY(73px)
    }
}

@media(max-width: 350px) {
    #Index .thirdBox .careerDetail .imgBox:hover .coverBox {
        -webkit-transform:translateY(53px);
        transform: translateY(53px)
    }
}

#Index .thirdBox .careerDetail .internetBox {
    background: url("../img/small/ga.jpg") no-repeat;
    background-size: 100% 100%
}

#Index .thirdBox .careerDetail .cashBox {
    background: url("../img/small/jt.jpg") no-repeat;
    background-size: 100% 100%
}

#Index .thirdBox .careerDetail .carBox {
    background: url("../img/small/xf.jpg") no-repeat;
    background-size: 100% 100%
}

#Index .thirdBox .careerDetail .buildBox {
    background: url("../img/small/yy.jpg") no-repeat;
    background-size: 100% 100%
}

#Index .thirdBox .careerDetail .eduBox {
    background: url("../img/small/gk.jpg") no-repeat;
    background-size: 100% 100%
}

#Index .thirdBox .careerDetail .electBox {
    background: url("../img/small/jc.jpg") no-repeat;
    background-size: 100% 100%
}

#Index .thirdBox .careerDetail .runBox {
    background: url("../img/small/cc.jpg") no-repeat;
    background-size: 100% 100%
}

#Index .thirdBox .careerDetail .manBox {
    background: url("../img/small/jd.jpg") no-repeat;
    background-size: 100% 100%
}
#Index .thirdBox .careerDetail .yjBox {
    background: url("../img/small/yj2.jpg") no-repeat;
    background-size: 100% 100%
}

@media(min-width: 1024px) and (max-width:1250px) {
    #Index .thirdBox .careerDetail {
        height:193px
    }
}

@media(max-width: 520px) {
    #Index .thirdBox .careerDetail {
        height:183px
    }
}

@media(max-width: 350px) {
    #Index .thirdBox .careerDetail {
        height:163px
    }
}

#Index .forthBox {
    position: relative;
    padding-top: 70px;
    width: 100%;
    height: 400px;
    text-align: center;
    background-color: #fafafa
}

#Index .forthBox .title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #414141
}

@media(max-width: 520px) {
    #Index .forthBox .title {
        padding:0 20px
    }
}

#Index .forthBox .secondTitle {
    margin-bottom: 47.5px;
    font-size: 14px;
    color: #545454
}

@media(max-width: 520px) {
    #Index .forthBox .secondTitle {
        padding:0 35px
    }
}

#Index .forthBox .leftArrowBox {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 150px;
    line-height: 150px;
    cursor: pointer
}

#Index .forthBox .leftArrowBox img {
    margin-left: 5.5px
}

#Index .forthBox .rightArrowBox {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 150px;
    line-height: 150px;
    cursor: pointer
}

#Index .forthBox .rightArrowBox img {
    margin-left: 5.5px
}

#Index .forthBox .imgBox {
    position: relative;
    padding: 0 30px;
    height: 150px;
    line-height: 150px;
    overflow: hidden
}

#Index .forthBox .imgContainer {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden
}

#Index .forthBox .imgList {
    position: absolute;
    top: 9px;
    left: 0;
    z-index: 1;
    width: 220%
}

#Index .forthBox .imgList .imgDetail {
    position: relative;
    float: left;
    margin-top: 17.5px;
    width: 9.09090909%;
    height: 115px;
    border-radius: 4px
}

#Index .forthBox .imgList .imgDetail img {
    position: absolute;
    top: 50%;
    left: 50%
}

#Index .forthBox .imgList .imgDetail .bgi {
    margin-top: -25.5px;
    margin-left: -66.5px;
    width: 123px;
    height: 51px
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail .bgi {
        margin-top:-20.5px;
        margin-left: -30%;
        width: 60%;
        height: 41px
    }
}

#Index .forthBox .imgList .imgDetail .Benz {
    margin-top: -30px;
    margin-left: -88.5px;
    width: 177px;
    height: 60px
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail .Benz {
        margin-top:-18px;
        margin-left: -30%;
        width: 60%;
        height: 36px
    }
}

#Index .forthBox .imgList .imgDetail .Haier {
    margin-top: -20px;
    margin-left: -70.5px;
    width: 141px;
    height: 40px
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail .Haier {
        margin-top:-18px;
        margin-left: -30%;
        width: 60%;
        height: 36px
    }
}

#Index .forthBox .imgList .imgDetail .pekingUniversity {
    margin-top: -24.5px;
    margin-left: -86px;
    width: 172px;
    height: 49px
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail .pekingUniversity {
        margin-top:-18px;
        margin-left: -30%;
        width: 60%;
        height: 36px
    }
}

#Index .forthBox .imgList .imgDetail .chinaMobile {
    margin-top: -21px;
    margin-left: -68px;
    width: 136px;
    height: 42px
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail .chinaMobile {
        margin-top:-20.5px;
        margin-left: -30%;
        width: 60%;
        height: 41px
    }
}

#Index .forthBox .imgList .imgDetail .cloancn {
    margin-top: -21px;
    margin-left: -75.5px;
    width: 151px;
    height: 42px
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail .cloancn {
        margin-top:-20.5px;
        margin-left: -30%;
        width: 60%;
        height: 41px
    }
}

#Index .forthBox .imgList .imgDetail:hover {
    box-shadow: 0 2px 4px #dbdbdb;
    background-color: #FFF
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail:hover {
        box-shadow:0;
        background-color: rgba(0,0,0,0)
    }
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .imgDetail {
        margin-left:.5%;
        width: 12%;
        height: 61px;
        border: 1px solid #DADADA;
        background-color: #FFF
    }
}

@media(max-width: 520px) {
    #Index .forthBox .imgList .mobileImg {
        display:none
    }
}

#Index .forthBox .imgList:after {
    clear: both
}

@media(max-width: 520px) {
    #Index .forthBox .imgList {
        top:30px;
        width: 400%
    }
}

@media(max-width: 520px) {
    #Index .forthBox {
        background-color:#FFF
    }
}

#Index .bottomBox {
    width: 100%;
    min-width: 1250px;
    height: 160px;
    background: url("../img/index/testNow.png") no-repeat;
    background-size: 100% 100%
}

#Index .bottomBox .title {
    margin: 0;
    float: left;
    line-height: 160px;
    font-size: 34px;
    font-weight: 500;
    color: #FFF;
    text-align: center
}

#Index .bottomBox .loginBtnBox {
    height: 160px;
    line-height: 160px
}

#Index .bottomBox .loginBtnBox .loginBtn {
    margin-top: 62px;
    width: 130px;
    height: 36px;
    line-height: 36px;
    color: #FFF;
    text-align: center;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
    float: right;
    margin-right: 25%;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .bottomBox .loginBtnBox .loginBtn:hover {
    color: #34c8e6;
    background-color: #FFF
}

#Index .cover {
    display: none;
    z-index: 2000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(96,96,96,0.7);
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .videoBox {
    opacity: 0;
    z-index: -1;
    position: fixed;
    margin-left: -300px;
    top: 50px;
    left: 50%;
    width: 600px;
    height: 420px;
    border-radius: 5px;
    background-color: #FFF;
    overflow: hidden;
    -webkit-transition: all .3s cubic-bezier(0.645,0.045,0.355,1);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .activeBox {
    display: block!important;
    top: 150px;
    opacity: 1;
    z-index: 3000
}

@keyframes firstBanner {
    0% {
        opacity: 1;
        transform: scale(1,1)
    }

    100% {
        opacity: 0;
        transform: scale(1.5,1.5)
    }
}

@keyframes firstBannerDocker {
    0% {
        transform: rotate(0deg) translate(289px) rotate(0deg)
    }

    100% {
        transform: rotate(360deg) translate(289px) rotate(-360deg)
    }
}

@keyframes firstBannerks {
    0% {
        transform: rotate(120deg) translate(279px) rotate(0deg)
    }

    100% {
        transform: rotate(480deg) translate(279px) rotate(-360deg)
    }
}

@keyframes firstBannertr {
    0% {
        transform: rotate(240deg) translate(289px) rotate(0deg)
    }

    100% {
        transform: rotate(600deg) translate(289px) rotate(-360deg)
    }
}

@keyframes firstBannerContainerIcon {
    0% {
        transform: rotate(0deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(360deg) translate(196px) rotate(-360deg)
    }
}

@keyframes firstBannerCicdIcon {
    0% {
        transform: rotate(90deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(450deg) translate(196px) rotate(-360deg)
    }
}

@keyframes firstBannerServiceIcon {
    0% {
        transform: rotate(180deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(540deg) translate(196px) rotate(-360deg)
    }
}

@keyframes firstBannerDevIcon {
    0% {
        transform: rotate(270deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(630deg) translate(196px) rotate(-360deg)
    }
}

@keyframes secondBoxOutterCircle {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes secondBoxInnerCircle {
    0% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes secondBannerFirstIcon {
    0% {
        transform: rotateY(-90deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-450deg) rotateZ(10deg)
    }
}

@keyframes secondBannerSecondIcon {
    0% {
        transform: rotateY(-180deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-540deg) rotateZ(10deg)
    }
}

@keyframes secondBannerThirdIcon {
    0% {
        transform: rotateY(-270deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-630deg) rotateZ(10deg)
    }
}

@keyframes secondBannerForthIcon {
    0% {
        transform: rotateY(-360deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-720deg) rotateZ(10deg)
    }
}

@keyframes secondBannerLittleCircle {
    0% {
        transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg)
    }

    100% {
        transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg)
    }
}

@keyframes thirdBannerLight {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

@keyframes thirdBannerIcon {
    0% {
        transform: translateY(0px)
    }

    25% {
        transform: translateY(3px)
    }

    50% {
        transform: translateY(0px)
    }

    75% {
        transform: translateY(-3px)
    }

    100% {
        transform: translateY(0px)
    }
}

@keyframes forthBannerLight {
    0% {
        transform: scale(1,1)
    }

    100% {
        background-color: #16284d;
        opacity: 0;
        transform: scale(1.7,1.7)
    }
}

@-webkit-keyframes firstBanner {
    0% {
        opacity: 1;
        transform: scale(1,1)
    }

    100% {
        opacity: 0;
        transform: scale(1.5,1.5)
    }
}

@-webkit-keyframes firstBannerDocker {
    0% {
        transform: rotate(0deg) translate(289px) rotate(0deg)
    }

    100% {
        transform: rotate(360deg) translate(289px) rotate(-360deg)
    }
}

@-webkit-keyframes firstBannerks {
    0% {
        transform: rotate(120deg) translate(279px) rotate(0deg)
    }

    100% {
        transform: rotate(480deg) translate(279px) rotate(-360deg)
    }
}

@-webkit-keyframes firstBannertr {
    0% {
        transform: rotate(240deg) translate(289px) rotate(0deg)
    }

    100% {
        transform: rotate(600deg) translate(289px) rotate(-360deg)
    }
}

@-webkit-keyframes firstBannerContainerIcon {
    0% {
        transform: rotate(0deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(360deg) translate(196px) rotate(-360deg)
    }
}

@-webkit-keyframes firstBannerCicdIcon {
    0% {
        transform: rotate(90deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(450deg) translate(196px) rotate(-360deg)
    }
}

@-webkit-keyframes firstBannerServiceIcon {
    0% {
        transform: rotate(180deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(540deg) translate(196px) rotate(-360deg)
    }
}

@-webkit-keyframes firstBannerDevIcon {
    0% {
        transform: rotate(270deg) translate(196px) rotate(0deg)
    }

    100% {
        transform: rotate(630deg) translate(196px) rotate(-360deg)
    }
}

@-webkit-keyframes secondBoxOutterCircle {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes secondBoxInnerCircle {
    0% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@-webkit-keyframes secondBannerFirstIcon {
    0% {
        transform: rotateY(-90deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-450deg) rotateZ(10deg)
    }
}

@-webkit-keyframes secondBannerSecondIcon {
    0% {
        transform: rotateY(-180deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-540deg) rotateZ(10deg)
    }
}

@-webkit-keyframes secondBannerThirdIcon {
    0% {
        transform: rotateY(-270deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-630deg) rotateZ(10deg)
    }
}

@-webkit-keyframes secondBannerForthIcon {
    0% {
        transform: rotateY(-360deg) rotateZ(10deg)
    }

    100% {
        transform: rotateY(-720deg) rotateZ(10deg)
    }
}

@-webkit-keyframes secondBannerLittleCircle {
    0% {
        transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg)
    }

    100% {
        transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg)
    }
}

@-webkit-keyframes thirdBannerLight {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes thirdBannerIcon {
    0% {
        -webkit-transform: translateY(0px)
    }

    25% {
        -webkit-transform: translateY(3px)
    }

    50% {
        -webkit-transform: translateY(0px)
    }

    75% {
        -webkit-transform: translateY(-3px)
    }

    100% {
        -webkit-transform: translateY(0px)
    }
}

@-webkit-keyframes forthBannerLight {
    0% {
        -webkit-transform: scale(1,1)
    }

    100% {
        background-color: #16284d;
        opacity: 0;
        -webkit-transform: scale(1.7,1.7)
    }
}

@keyframes fifthBannerSpan {
    0% {
        opacity: 1
    }

    25% {
        opacity: .5
    }

    50% {
        opacity: 0
    }

    75% {
        opacity: .75
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fifthBannerSpan {
    0% {
        opacity: 1
    }

    25% {
        opacity: .5
    }

    50% {
        opacity: 0
    }

    75% {
        opacity: .75
    }

    100% {
        opacity: 1
    }
}

.fa {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor
}

.icon2 {
    /* margin-bottom:20px; */
    /* width:50px; */
    /* height: 35px; */
    font-size: 50px;
    color: #919191
}

.icon_hover {
    color: #3cbcd8
}

#Index .serviceBox .serviceDetail {
    text-align: center;
    padding: 30px 20px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: all .3s cubic-bezier(0.645,0.045,0.355,1)
}

#Index .serviceBox .serviceDetail:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-4px)
}

#Index .serviceBox .imgBox {
    margin: 0 auto 18px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg,#34C8E6,#2ba8c2);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Index .serviceBox .imgBox i {
    font-size: 30px;
    color: #fff;
    float: none!important
}

#Index .serviceBox .serviceTitle {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #202020
}

#Index .serviceBox .serviceIntro {
    font-size: 13px;
    color: #707070;
    line-height: 22px
}

@media(max-width: 767px) {
    #Index .serviceBox .serviceDetail {
        padding:20px 15px
    }
}