* {
    padding: 0px;
    margin : 0px;
}

.swiper_Big {
    display: none;
}

/* 换成大盒子切换时会出现白屏 */
.section {
    background     : url(../img/black.png) no-repeat;
    background-size: 100% 100%;
}

#flash {
    height  : 100vh;
    width   : 100%;
    overflow: hidden;
    position: relative;
}

.bg {
    width          : 100%;
    height         : 100vh;
    background     : url('../img/black.png') no-repeat;
    background-size: 100% 100%;
    position       : relative;
}
.bg5 {
    background     : url('../img/five.png') no-repeat;
    background-size: 100% 100%;
    position       : relative;
}
.bg6 {
    background: url(../img/jj.jpg) no-repeat;
    background-size: cover;
}

#fp-nav {
    right: 9%;
}

#fp-nav ul {
    height : 170px;
    z-index: 100;
}

.fp-controlArrow {
    display: none;
}

#fp-nav li {
    width : 26px !important;
    height: 26px !important;
    margin: 10px !important;

}

#fp-nav li:nth-child(7) {
    display: none;
}

#fp-nav li a {
    display              : flex !important;
    justify-content      : center;
    align-items          : center;
    border-radius        : 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius   : 100%;
    -ms-border-radius    : 100%;
    -o-border-radius     : 100%;
    background-color     : rgba(62, 72, 89, 1) !important;
}

#fp-nav li .active {
    top       : 0 !important;
    left      : 0 !important;
    right     : 0 !important;
    bottom    : 0 !important;
    background: linear-gradient(-90deg, rgba(65, 82, 177, 1) 0%, rgba(53, 110, 206, 1) 100%) !important;
}

#fp-nav li span {

    height           : 13px !important;
    width            : 13px !important;
    margin           : 0px !important;
    top              : 10px !important;
    left             : 50%;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);
    background       : none !important;
}

#fp-nav li span img:hover {
    animation: jello-horizontal1 0.9s both;
}

/* .bg5 {
    background: url('../img/bg1.png') no-repeat;
    background-size: 100% 100%;
} */


button {
    border       : none;
    border-radius: 20px;
    cursor       : pointer;
}

button:focus {
    outline: none;
}

ul {
    padding-left: 0px;
}

ul {
    display        : inline-block;
    list-style-type: none;
}
.mainBox {
    width   : 76%;
    height  : 70%;
    position: relative;
}

main {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    z-index : 2;
    border-radius: 5px;
    box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.2);
}

canvas {
    position: absolute;
    height  : 100%;
    width   : 100%;
    top     : 0;
    left    : -45px;
    z-index : -1;
}

.bot {
    z-index: 0;
}

.align-left,
.align-right {
    display          : -webkit-box;
    display          : flex;
    -webkit-box-align: center;
    align-items      : center;
    width            : 30%;
}

.align-right {
    -webkit-box-pack: end;
    justify-content : flex-end;
}

.circleBox {
    position       : absolute;
    width          : 100%;
    height         : 100%;
    background     : url(../img/wangbg.png) no-repeat;
    background-size: cover;
    opacity        : 0.3;

}

/* SLIDER */
.slide-title {
    display: inline-block;

    margin        : 0px;
    letter-spacing: -2px;

    position: relative;
    overflow: hidden;
}

.slide-title:before {
    position          : absolute;
    content           : attr(data-text);
    top               : 0;
    left              : 0;
    width             : 100%;
    height            : 100%;
    color             : white;
    -webkit-clip-path : inset(80% 0 0 0);
    clip-path         : inset(80% 0 0 0);
    -webkit-transition: 0.55s -webkit-clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transition        : 0.55s -webkit-clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transition        : 0.55s clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transition        : 0.55s clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95), 0.55s -webkit-clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.slide-title.active:before {
    -webkit-clip-path : inset(10% 0 0 0);
    clip-path         : inset(10% 0 0 0);
    -webkit-transition: 0.425s -webkit-clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.425s;
    transition        : 0.425s -webkit-clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.425s;
    transition        : 0.425s clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.425s;
    transition        : 0.425s clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.425s, 0.425s -webkit-clip-path cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.425s;
}

.slider-controls {
    width            : 40%;
    text-align       : center;
    position         : absolute;
    -webkit-transform: translate(-50%);
    transform        : translate(-50%);
    left             : 50%;
    bottom           : 20px;
    display          : flex;
    justify-content  : center;
    align-items      : center;
}

.slider-controls ul {
    display        : flex;
    justify-content: center;
    margin-bottom  : 0;
}

.slider-controls ul li {
    height               : 5px;
    width                : 5px;
    background-color     : #90A9BA;
    border-radius        : 5px;
    margin-right         : 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    -ms-border-radius    : 5px;
    -o-border-radius     : 5px;
}

.slider-controls ul .active {
    width: 15px;
}

.slider-controls ul li:last-child() {
    margin-right: 0;
}

.slider-next-btn,
.slider-prev-btn {
    width     : 24px;
    height    : 24px;
    background: none;
    background: none;
    border    : none;
    margin    : 0 25px;
    position  : relative;
    padding   : 0;
}

.slider-next-btn:hover {
    background: #C4C4C4;
}

.slider-prev-btn:hover {
    background: #C4C4C4;
}

.slider-prev-btn {
    margin-left: 0px;
}

.slider-next-btn {
    margin-right: 0px;
}

.slider-next-btn:before,
.slider-prev-btn:before,
.slider-next-btn:after,
.slider-prev-btn:after {
    position     : absolute;
    content      : "";
    height       : 2px;
    background   : #999;
    width        : 12px;
    border-radius: 2px;
    left         : calc(50% - 5px);
}

.slider-next-btn:before {
    -webkit-transform: rotate(45deg);
    transform        : rotate(45deg);
    top              : calc(50% - 4px);
}

.slider-next-btn:after {
    -webkit-transform: rotate(-45deg);
    transform        : rotate(-45deg);
    top              : calc(50% + 3px);
}

.slider-prev-btn:before {
    -webkit-transform: rotate(45deg);
    transform        : rotate(45deg);
    top              : calc(50% + 3px);
    left             : calc(50% - 7px);
}

.slider-prev-btn:after {
    -webkit-transform: rotate(135deg);
    transform        : rotate(135deg);
    top              : calc(50% - 4px);
    left             : calc(50% - 7px);
}

.slide-progress-bar {
    height    : 2px;
    width     : 150px;
    background: rgba(255, 255, 255, 0.5);
    display   : inline-block;
    position  : relative;
    overflow  : hidden;
}

.slide-progress-bar:after {
    content          : "";
    position         : absolute;
    top              : 0;
    left             : 0;
    height           : 100%;
    width            : 100%;
    background       : white;
    -webkit-transform: translateX(-100%);
    transform        : translateX(-100%);
}

.slide-indicator {
    font-size  : 24px;
    margin-left: 15px;
    color      : rgba(0, 0, 0, 0.5);
}

.slide-indicator-container {
    height     : 24px;
    overflow   : hidden;
    line-height: 24px;
}

.slide-indicator:nth-child(1) {
    margin      : 0px 0px 0px 0px;
    margin-right: 15px;
    color       : white;
    display     : block;
}

.slide-indicator>li {
    display: block;
    margin : 0;
    color  : rgba(0, 0, 0, 0.5);
}

.bottom-bar {
    position             : absolute;
    bottom               : 0;
    left                 : 0;
    right                : 0;
    display              : -webkit-box;
    display              : flex;
    -webkit-box-orient   : horizontal;
    -webkit-box-direction: normal;
    flex-direction       : row;
    -webkit-box-pack     : justify;
    justify-content      : space-between;
    -webkit-box-align    : center;
    align-items          : center;
}

.align-left.bot {
    padding-left: 35px;

}

.btn-container {
    display          : -webkit-box;
    display          : flex;
    -webkit-box-align: center;
    align-items      : center;
    background       : white;
    color            : black;
    padding          : 15px 35px;
}


.slideA {
    width                : 100%;
    height               : 100%;
    display              : -webkit-box;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    flex-direction       : column;
    -webkit-box-align    : center;
    align-items          : center;
    -webkit-box-pack     : center;
    justify-content      : center;
    position             : absolute;
    top                  : 0;
    left                 : 0;
}

.slideA:first-child {
    -webkit-transform: translateX(0%);
    transform        : translateX(0%);
}

.slideA:nth-child(2) {
    -webkit-transform: translateX(100%);
    transform        : translateX(100%);
}

.slideA:nth-child(3) {
    -webkit-transform: translateX(200%);
    transform        : translateX(200%);
}

.slideA:nth-child(4) {
    -webkit-transform: translateX(300%);
    transform        : translateX(300%);
}

.slider {
    height     : 100%;
    position   : relative;
    will-change: transform;
}

.slider-inner {
    height  : 100%;
    width   : 100%;
    position: relative;
}

.slider .slide-img {
    position: absolute;
    width   : 100%;
    height  : 100%;
    top     : 0;
    left    : 0;
    z-index : -10;
    opacity : 0;
}


/* 上面是轮播图样式 */

.bota {
    height          : 60px;
    width           : 60px;
    background-color: red;
    position        : fixed;
    top             : 90%;
    left            : 0%;
    transform       : translate(-50%);
    color           : white;
    line-height     : 60px;
    text-align      : center;
}

#num {

    position : fixed;
    right    : 20px;
    top      : 50%;
    transform: translate(-50%);
}

#num .li {
    height          : 20px;
    width           : 20px;
    background-color: coral;
    border-radius   : 50%;
    margin-top      : 5px;
    list-style-type : none;

}

/* .slide {
    position: absolute;
    top: 125px;
    height: 60%;
    width: 80%;
    border-radius: 20px;
    background-image: linear-gradient(to right, #4252B0, #3471D1)
} */

.slideA .bgOne {
    height         : 100%;
    width          : 100%;
    /* background  : url(../img/qiu.png) no-repeat; */
    background-size: 100% 100%;
}

.waterImg {
    height  : 60px;
    width   : 160px;
    z-index : 10;
    position: relative;
    top     : -16px;
}

.slideA .bgOne .lineBox {
    position: absolute;
    top     : 70px;
}

.slideA .titlea {
    font-size        : 28px;
    color            : white;
    margin-left      : 45px;
    opacity          : 0;
    transform        : scale(1);
    animation        : fadeIn 3s forwards;
    -webkit-animation: fadeIn 3s forwards;
    -moz-animation:fadeIn 3s forwards;
    -o-animation:fadeIn 3s forwards;
    display          : flex;
    position         : absolute;
    top: 25px;
    z-index          : 100;
}

@keyframes fadeIn {
    0% {
        opacity  : 0;
        transform: scale(0);
    }
    100% {
        opacity  : 1;
        transform: scale(1);
    }
}

.zhuanjia {
    height  : 44px;
    position: relative;
    top     : -9px;
}

.watershengming {
    height: 44px;
}



.bgOne .titlea #wrapper {
    overflow       : hidden;
    display        : flex;
    font-family    : 'HYQiHei-AZEJ';
    justify-content: center;
    align-items    : center;
    color          : #fff;
    display        : none;
}

.bgOne .titlea #wrapper .svg {
    display: none;
}

.bgOne .titlea #wrapper .tierd {
    position    : relative;
    top         : -16px;
    font-size   : 38px;
    filter      : url(#filter) blur(0.5px) contrast(3);
    user-select : none;
    padding     : 10px;
    transform   : rotateZ(0deg);
    -webkit-mask: linear-gradient(-88deg, rgba(0, 246, 255, 1) 0%, rgba(58, 102, 197, 1) 100%);
}

.bgOne .titlea #wrapper .tierd::before {
    content  : '';
    position : absolute;
    transform: translate(7px, 13px);
    filter   : blur(6px);

}

.bgOne .line {
    display         : inline-block;
    height          : 1px;
    width           : 18px;
    background-color: white;

}

.slideA .secondBox .lineBox {
    position: absolute;
    top: 70px;
}



.secondBox {
    height: 100%;
    width : 100%;
}

.secondBox .titlea #wrapper {
    overflow       : hidden;
    display        : flex;
    font-family    : 'Waiting for the Sunrise', cursive;
    justify-content: center;
    align-items    : center;
    color          : #fff;
}

.secondBox .titlea #wrapper .svg {
    display: none;
}

.secondBox .titlea #wrapper .tierd {
    position   : relative;
    top        : -16px;
    font-size  : 38px;
    filter     : url(#filter) blur(0.5px) contrast(3);
    user-select: none;
    padding    : 10px;
    transform  : rotateZ(0deg);
}

.secondBox .titlea #wrapper .tierd::before {
    content  : '';
    position : absolute;
    transform: translate(7px, 13px);
    filter   : blur(6px);
}

.secondBox .line {
    display         : inline-block;
    height          : 1px;
    width           : 18px;
    background-color: white;

}

.secondBox .rightBox .rightBox-content {
    height  : 60%;
    width   : 60%;
    position: absolute;
    left: 50%;
    top     : 60%;
    transform: translate(-50%,-50%);

}

.secondBox .rightBox .rightBox-content .iconBox {
    position: absolute;
    width   : 100%;
    height  : 100%;
    z-index : 2;
}

.secondBox .rightBox .rightBox-content .hang {
    height         : 30%;
    width          : 100%;
    display        : flex;
    justify-content: space-around;
    align-items    : center;
    color          : white;
}

.secondBox .rightBox .rightBox-content .hang p {
    display    : flex;
    align-items: center;
    font-size  : 12px;
    flex-shrink:0
}

.secondBox .rightBox .rightBox-content .hang p .iconImg {
    height: 90px;
    width : 90px;
}

.secondBox .rightBox .rightBox-content .hang p span {
    display: inline-block;
}

.secondBox .rightBox .rightBox-content .hang p span:nth-child(2) {
    letter-spacing: 1px;
    padding       : 1px;

}

.secondBox .rightBox .rightBox-content .hang .iconfont {
    width                : 60px;
    height               : 60px;
    display              : flex;
    justify-content      : center;
    align-items          : center;
    font-size            : 30px;
    padding              : 10px;
    border-radius        : 15px;
    background-color     : rgba(68, 98, 221, 1);
    -webkit-border-radius: 15px;
    -moz-border-radius   : 15px;
    -ms-border-radius    : 15px;
    -o-border-radius     : 15px;
}



.secondBox .rightBox .rightBox-content .rotatetext {
    display : none;
    height  : 100%;
    width   : 100%;
    position: absolute;
    top     : -52px;
    right   : 55px !important;
}

.secondBox .rightBox .rightBox-content .rotatetext .tags a {
    font-size: 12px !important;
    padding  : 2px;
}

.secondBox .rightBox .rightBox-content .rotatetext #myCanvas {
    position         : absolute;
    font-size        : 12px;
    opacity          : 0;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);
}

.slideA .thirdBox {
    height: 100%;
    width : 100%;
}

.slideA .thirdBox .lineBox {
    position: absolute;
    top: 70px;
}

.thirdBox .titlea #wrapper {
    overflow       : hidden;
    display        : flex;
    font-family    : 'Waiting for the Sunrise', cursive;
    justify-content: center;
    align-items    : center;
    color          : #fff;
}

.thirdBox .titlea #wrapper .svg {
    display: none;
}

.thirdBox .titlea #wrapper .tierd {
    position   : relative;
    top        : -16px;
    font-size  : 38px;
    filter     : url(#filter) blur(0.5px) contrast(3);
    user-select: none;
    padding    : 10px;
    transform  : rotateZ(0deg);
}

.thirdBox .titlea #wrapper .tierd::before {
    content  : '';
    position : absolute;
    transform: translate(7px, 13px);
    filter   : blur(6px);
}

.thirdBox .line {
    display         : inline-block;
    height          : 1px;
    width           : 18px;
    background-color: white;

}
.thirdBox .lineBox {
    top     : 70px ;
}

.thirdBox .rightBox300 {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    height: 283px;
    width: 283px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.thirdBox .rightBox300 .boxone {
    position: absolute;
    /* top  : 30%;
    left    : 10%; */
    height: 283px;
    width: 283px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.thirdBox .rightBox300 .boxone .imgNone {
    position         : absolute;
    left             : 0;
    height: 283px;
    width: 283px;
    animation        : quan 2s linear infinite;
    -webkit-animation: quan 2s linear infinite;
}

@keyframes quan {
    0% {
        transform        : scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform   : scale(0.5);
        -ms-transform    : scale(0.5);
        -o-transform     : scale(0.5);
        opacity          : 0.8;
    }

    50% {
        transform        : scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform   : scale(1.1);
        -ms-transform    : scale(1.1);
        -o-transform     : scale(1.1);
    }

    80% {
        transform        : scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform   : scale(1.2);
        -ms-transform    : scale(1.2);
        -o-transform     : scale(1.2);
        opacity          : 0;
    }

    100% {
        opacity: 0;
    }
}

.swiper-button-next {
    position         : fixed;
    left             : 47.5%;
    top              : 93%;
    transform        : translate(-50%) rotate(90deg);
    -webkit-transform: translate(-50%) rotate(90deg);
    -moz-transform   : translate(-50%) rotate(90deg);
    -ms-transform    : translate(-50%) rotate(90deg);
    -o-transform     : translate(-50%) rotate(90deg);
}


.thirdBox .rightBox300 .boxone .boxtwo .boxthree {
    position     : absolute;
    left         : 50%;
    top          : 50%;
    transform    : translate(-50%, -50%);
    border-radius: 50%;
    height       : 60%;
    width        : 60%;
}

.thirdBox .rightBox300 .bigBox {
    height    : 100%;
    width     : 100%;
    text-align: center;
    position  : absolute;
    ;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    color          : white;
}

.bigBox {
    width      : 100%;
    height     : 100%;
    display    : flex;
    align-items: center;
}

.thirdBox .rightBox300 .jiejue {
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    font-size: 19px;
    position: absolute;
    top: 14%;
    right: -30%;
    opacity: 0;
    animation:jiejue 6s infinite ;
}
@keyframes jiejue {
    0% {
        opacity: 1;
    }
    24% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

.thirdBox .rightBox300 .zhouqi {
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    position: absolute;
    font-size: 16px;
    top: 44%;
    right: -54%;
    opacity: 0;
    animation: zhouqi 6s infinite;
}
@keyframes zhouqi {
    0% {
        opacity: 0;
    }
    24% {
        opacity: 0;
    }
    25% {   opacity: 1;}

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

.thirdBox .rightBox300 .hangye {
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    position: absolute;
    font-size: 17px;
    bottom: 30px;
    right: -30px;
    z-index: 10;
    opacity: 0;
    animation: hangye 6s infinite;
}
@keyframes hangye {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }


    100% {
        opacity: 0;
    }

}
.thirdBox .rightBox300 .info {
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    position: absolute;
    font-size: 20px;
    top: 27%;
    left: -40%;
    opacity: 0;
    animation:info 6s infinite ;
}
@keyframes info {
    0% {
        opacity: 0;
    }
74% { opacity: 0;}

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}

.skyblueFlickerActive {
    animation        : nonea 1s linear infinite;
    -webkit-animation: nonea 1s linear infinite;

}

@keyframes nonea {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.thirdBox .rightBox300 .bigBox {
    font-size: 32px;
}


.bigBoxFirst {
    width   : 100%;
    height  : 100%;
    position: absolute;
    top     : 0;
    left    : 0;
    opacity: 0;
    animation: bigBoxFirstMove 2s infinite;
}
@keyframes bigBoxFirstMove {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


.thirdBox .rightBox300 .bigBox .gan {
    position         : absolute;
    font-size        : 13px;
    top              : 33%;
    left             : 50%;
    opacity          : 0.3;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);

}

.thirdBox .rightBox300 .bigBox .kong {
    position         : absolute;
    font-size        : 20px;
    top              : 40%;
    left             : 50%;
    opacity          : 0.6;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);

}

.thirdBox .rightBox300 .bigBox .zhi {
    position         : absolute;
    top              : 50%;
    left             : 50%;
    font-size        : 37px;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);

}

.bigBoxSecond {
    opacity: 0;
    width   : 100%;
    height  : 100%;
    position: absolute;
    animation: bigBoxSecondMove 2s infinite;
}
@keyframes bigBoxSecondMove {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.thirdBox .rightBox300 .bigBox .jing {
    position         : absolute;
    top              : 50%;
    left             : 50%;
    font-size        : 37px;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);
}

.thirdBox .rightBox300 .bigBox .xi {
    position         : absolute;
    font-size        : 20px;
    top              : 40%;
    left             : 50%;
    opacity          : 0.6;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);

}

.thirdBox .rightBox300 .bigBox .zhuan {
    position         : absolute;
    font-size        : 13px;
    top              : 33%;
    left             : 50%;
    opacity          : 0.3;
    transform        : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);

}
.bigBoxConActive {
    display          : block;
    animation        : sixSlide 2s;
    -webkit-animation: sixSlide 2s;
}

/* 六个文字显示隐藏 */
@keyframes sixSlide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.slideA .bannerImg {
    height: 100%;
    width: 100%;
    position: absolute;
}


.slideA .wavesbox {
    z-index: 0;
    width  : 100%;
}

.slideA .waves {
    position     : relative;
    width        : 100%;
    height       : 15%;
    margin-bottom: -60px;
    /*Fix for safari gap*/
    min-height   : 100px;
    max-height   : 150px;
}

.slideA .waves .parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;

}

.slideA .waves .parallax>use:nth-child(1) {
    animation-delay   : -2s;
    animation-duration: 7s;
}

.slideA .waves .parallax>use:nth-child(2) {
    animation-delay   : -3s;
    animation-duration: 10s;
}

.slideA .waves .parallax>use:nth-child(3) {
    animation-delay   : -4s;
    animation-duration: 13s;
}

.slideA .waves .parallax>use:nth-child(4) {
    animation-delay   : -5s;
    animation-duration: 20s;
}

/* 首页第三个波浪动画 */
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}


/* -----banner----- */
.slideA .one {
    width: 45px;
}

.slideA .three {
    width           : 260px;
    background-image: linear-gradient(to right, #ffffff, #3B63C1);
}

.slide-title {
    letter-spacing: 1px !important;
}

#anliBox {
    position : absolute;
    top      : 57%;
    left     : 20%;
    transform: translate(-50%, -50%);
    color    : white;
    opacity  : 0;
}
#anliBox .margin .marginBox {
    display: flex;
}

#anliBox .numberBig {
    font-size: 30px;
}

.slideA #anliBox p {
    letter-spacing: 1px;
}

.anliBoxActive {
    animation        : movenumber 0.5s forwards;
    -webkit-animation: movenumber 0.5s forwards;
    -webkit-transform: movenumber translate(-50%, -50%);
    -moz-transform   : movenumber translate(-50%, -50%);
    -ms-transform    : movenumber translate(-50%, -50%);
    -o-transform     : movenumber translate(-50%, -50%);
}

/* 数字的从左向右移入 */
@keyframes movenumber {
    from {
        opacity: 0;
        left   : 0%;
    }

    to {
        opacity: 1;

        left: 20%;
    }
}


.slideA #anliBox .margin {
    margin-bottom: 20px;
}

.slideA .ball {
    height  : 450px;
    width   : 750px;
    position: absolute;
    right   : 24px;
    bottom  : 38px;
}

/* 一些小字 */
.slideA .ball .circle1 span {
    font-size  : 8px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle1 span:nth-child(1) {
    position         : absolute;
    left             : -50%;
    top              : 0%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle1 span:nth-child(2) {
    position         : absolute;
    right            : -50%;
    top              : 0%;
    animation        : texthideen 3s linear infinite alternate;
    -webkit-animation: texthideen 3s linear infinite alternate;
}

.slideA .ball .circle1 span:nth-child(3) {
    position         : absolute;
    left             : -43%;
    bottom           : -10%;
    animation        : texthideen 4s linear infinite alternate;
    -webkit-animation: texthideen 4s linear infinite alternate;
}

.slideA .ball .circle1 span:nth-child(4) {
    position         : absolute;
    right            : -60%;
    top              : 80%;
    animation        : texthideen 3s linear infinite alternate;
    -webkit-animation: texthideen 3s linear infinite alternate;
}

.slideA .ball .circle2 span {
    font-size  : 8px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle2 span:nth-child(1) {
    position         : absolute;
    left             : -10%;
    top              : -20%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle2 span:nth-child(2) {
    position         : absolute;
    right            : -30%;
    bottom           : 0;
    animation        : texthideen 3s linear infinite alternate;
    -webkit-animation: texthideen 3s linear infinite alternate;
}

.slideA .ball .circle2 span:nth-child(3) {
    position         : absolute;
    left             : -49%;
    bottom           : -10%;
    animation        : texthideen 4s linear infinite alternate;
    -webkit-animation: texthideen 4s linear infinite alternate;
}

.slideA .ball .circle3 span {
    font-size  : 8px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle3 span:nth-child(1) {
    position         : absolute;
    left             : -50%;
    top              : -20%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle5 span {
    font-size  : 8px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle5 span:nth-child(1) {
    position         : absolute;
    left             : -40%;
    bottom           : -10%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle5 span:nth-child(2) {
    position: absolute;
    right   : -80%;
    ;
    top              : 30%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle6 span {
    font-size  : 8px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle6 span:nth-child(1) {
    position         : absolute;
    left             : -40%;
    top              : 0%;
    animation        : texthideen 4s linear infinite alternate;
    -webkit-animation: texthideen 4s linear infinite alternate;
}

.slideA .ball .circle6 span:nth-child(2) {
    position         : absolute;
    right            : -30%;
    bottom           : -15%;
    animation        : texthideen 5s linear infinite alternate;
    -webkit-animation: texthideen 5s linear infinite alternate;
}

.slideA .ball .circle6 span:nth-child(3) {
    position         : absolute;
    right            : -50%;
    bottom           : 20%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle6 span:nth-child(4) {
    position         : absolute;
    right            : -50%;
    top              : 30%;
    animation        : texthideen 3s linear infinite alternate;
    -webkit-animation: texthideen 3s linear infinite alternate;
}

.slideA .ball .circle6 span:nth-child(5) {
    position         : absolute;
    right            : 20%;
    top              : -20%;
    animation        : texthideen 7s linear infinite alternate;
    -webkit-animation: texthideen 7s linear infinite alternate;
}

.slideA .ball .circle6 span:nth-child(6) {
    position         : absolute;
    left             : -60%;
    top              : 40%;
    animation        : texthideen 1s linear infinite alternate;
    -webkit-animation: texthideen 1s linear infinite alternate;
}

.slideA .ball .circle6 span:nth-child(7) {
    position         : absolute;
    left             : -60%;
    top              : 80%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle6 span:nth-child(8) {
    position         : absolute;
    right            : 10%;
    bottom           : -40%;
    animation        : texthideen 3s linear infinite alternate;
    -webkit-animation: texthideen 3s linear infinite alternate;
}

.slideA .ball .circle8 span {
    font-size  : 8px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle8 span:nth-child(1) {
    position         : absolute;
    left             : -100%;
    top              : 60%;
    animation        : texthideen 3s linear infinite alternate;
    -webkit-animation: texthideen 3s linear infinite alternate;
}

.slideA .ball .circle8 span:nth-child(2) {
    position         : absolute;
    right            : -100%;
    top              : 60%;
    animation        : texthideen 1s linear infinite alternate;
    -webkit-animation: texthideen 1s linear infinite alternate;
}

.slideA .ball .circle8 span:nth-child(3) {
    position         : absolute;
    bottom           : -30%;
    left             : 10%;
    animation        : texthideen 5s linear infinite alternate;
    -webkit-animation: texthideen 5s linear infinite alternate;
}

.slideA .ball .circle9 span {
    font-size  : 6px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle9 span:nth-child(1) {
    position         : absolute;
    left             : -50%;
    top              : -19%;
    animation        : texthideen 1s linear infinite alternate;
    -webkit-animation: texthideen 1s linear infinite alternate;
}

.slideA .ball .circle9 span:nth-child(2) {
    position         : absolute;
    right            : -101%;
    top              : 40%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle9 span:nth-child(3) {
    position         : absolute;
    right            : -50%;
    top              : 115%;
    animation        : texthideen 4s linear infinite alternate;
    -webkit-animation: texthideen 4s linear infinite alternate;
}

.slideA .ball .circle10 span {
    font-size  : 6px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle10 span:nth-child(1) {
    position         : absolute;
    right            : -10%;
    bottom           : -25%;
    animation        : texthideen 1s linear infinite alternate;
    -webkit-animation: texthideen 1s linear infinite alternate;
}

.slideA .ball .circle10 span:nth-child(2) {
    position         : absolute;
    right            : -97%;
    bottom           : 113%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle11 span {
    font-size  : 6px;
    color      : rgba(122, 165, 241, 1);
    line-height: 0em;
}

.slideA .ball .circle11 span:nth-child(1) {
    position         : absolute;
    right            : -20%;
    bottom           : 120%;
    animation        : texthideen 2s linear infinite alternate;
    -webkit-animation: texthideen 2s linear infinite alternate;
}

.slideA .ball .circle11 span:nth-child(2) {
    position         : absolute;
    left             : -70%;
    bottom           : -15%;
    animation        : texthideen 5s linear infinite alternate;
    -webkit-animation: texthideen 5s linear infinite alternate;
}

.slideA .ball .circle11 span:nth-child(3) {
    position         : absolute;
    right            : -70%;
    bottom           : -15%;
    animation        : texthideen 1s linear infinite alternate;
    -webkit-animation: texthideen 1s linear infinite alternate;
}



@keyframes texthideen {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}




/* ----------------------------------------- */
.slideA .ball img {
    z-index : 0;
    opacity : 1;
    position: absolute;
}

.slideA .ball .ball-line-one {
    top              : 65%;
    left             : 48%;
    height           : 10%;
    width            : 8%;
    transform        : rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform   : rotate(20deg);
    -ms-transform    : rotate(20deg);
    -o-transform     : rotate(20deg);
}

.slideA .ball .ball-line-two {
    top   : 54%;
    height: 10%;
    width : 10%;
    left  : 63%;

}

.slideA .ball .ball-line-three {
    top   : 59%;
    left  : 72%;
    height: 7%;
}

.slideA .ball .ball-line-four {
    top   : 36%;
    left  : 68%;
    height: 9%;
}

.slideA .ball .ball-line-five {
    top   : 37%;
    left  : 78%;
    height: 10%;
}

.slideA .ball .ball-line-six {
    top : 52%;
    left: 86%;
}

.slideA .ball .ball-line-seven {
    top    : 53%;
    left   : 77%;
    height : 10%;
    z-index: 1;
}

.slideA .ball .ball-line-eight {
    left  : 82%;
    top   : 68%;
    height: 10%;
}

.slideA .ball .ball-line-nine {
    left  : 88%;
    top   : 61%;
    height: 5%;
}

.slideA .ball .ball-line-ten {
    top    : 68%;
    left   : 87%;
    height : 10%;
    z-index: 1;
}

/* -------------- */
.slideA .ball .circle {
    position             : absolute;
    left                 : 27%;
    top                  : 53%;
    display              : block;
    text-align           : center;
    line-height          : 8.5rem;
    font-size            : 20px;
    color                : #54EBF8;
    background           : black;
    border-radius        : 50%;
    height               : 8.5rem;
    width                : 8.5rem;
    margin               : 0;
    background           : radial-gradient(circle at 8px 90px, #5cabff, rgba(13, 34, 155, 0.733));
    transition           : all 0.6s;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%;
    box-shadow           : 10px 27px 60px 0px #344ea3;
    letter-spacing       : 2px;
}

.circleBox {
    position       : absolute;
    width          : 100%;
    height         : 100%;
    background     : url(../img/wangbg.png) no-repeat;
    background-size: cover;
    opacity        : 0.3;

}

.slideA .ball .circlePub {
    display: block;
}

.slideA .ball .circle1 {
    position     : absolute;
    right        : 60%;
    top          : 42%;
    display      : block;
    text-align   : center;
    line-height  : 40px;
    font-size    : 10px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 40px;
    width        : 40px;
    margin       : 0;
    background   : radial-gradient(circle at 18px 60px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
}

.slideA .ball .circle2 {
    position     : absolute;
    left         : 17%;
    top          : 68%;
    display      : block;
    text-align   : center;
    line-height  : 50px;
    font-size    : 8px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 50px;
    width        : 50px;
    margin       : 0;
    background   : radial-gradient(circle at 18px 60px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
}

.slideA .ball .circle3 {
    position     : absolute;
    left         : 47%;
    top          : 25%;
    display      : block;
    text-align   : center;
    line-height  : 40px;
    font-size    : 8px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 40px;
    width        : 40px;
    margin       : 0;
    background   : radial-gradient(circle at 10px 60px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
}

.slideA .ball .circle4 {
    position      : absolute;
    left          : 50%;
    top           : 34%;
    display       : block;
    text-align    : center;
    line-height   : 100px;
    font-size     : 18px;
    color         : #54EBF8;
    background    : black;
    border-radius : 100%;
    height        : 100px;
    width         : 100px;
    margin        : 0;
    background    : radial-gradient(circle at 10px 110px, #5cabff, rgba(13, 34, 155, 0.733));
    transition    : all 0.6s;
    box-shadow    : 26px 40px 60px 0px #344ea3;
    letter-spacing: 2px;
}

.slideA .ball .circle5 {
    position     : absolute;
    left         : 47%;
    top          : 65%;
    display      : block;
    text-align   : center;
    line-height  : 40px;
    font-size    : 10px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 40px;
    width        : 40px;
    margin       : 0;
    background   : radial-gradient(circle at 10px 60px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
}

.slideA .ball .circle6 {
    position     : absolute;
    left         : 65%;
    top          : 19%;
    display      : block;
    text-align   : center;
    line-height  : 40px;
    font-size    : 12px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 40px;
    width        : 40px;
    margin       : 0;
    background   : radial-gradient(circle at 50px 60px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
}

.slideA .ball .circle7 {
    position      : absolute;
    left          : 67%;
    top           : 53%;
    display       : block;
    text-align    : center;
    line-height   : 90px;
    font-size     : 16px;
    color         : #54EBF8;
    background    : black;
    border-radius : 100%;
    height        : 90px;
    width         : 90px;
    margin        : 0;
    background    : radial-gradient(circle at 30px 100px, #5cabff, rgba(13, 34, 155, 0.733));
    transition    : all 0.6s;
    box-shadow    : 9px 45px 60px 0px #344ea3;
    letter-spacing: 5px;
}

.slideA .ball .circle8 {
    position     : absolute;
    left         : 64%;
    top          : 77%;
    display      : block;
    text-align   : center;
    line-height  : 50px;
    font-size    : 7px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 50px;
    width        : 50px;
    margin       : 0;
    background   : radial-gradient(circle at 50px 80px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
    box-shadow   : -30px 27px 60px 0px #344ea3;
}

.slideA .ball .circle9 {
    position     : absolute;
    left         : 77%;
    top          : 42%;
    display      : block;
    text-align   : center;
    line-height  : 40px;
    font-size    : 10px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 40px;
    width        : 40px;
    margin       : 0;
    background   : radial-gradient(circle at 50px 80px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
    box-shadow   : -10px 17px 60px 0px #344ea3;
}

.slideA .ball .circle10 {
    position     : absolute;
    left         : 80%;
    top          : 77%;
    display      : block;
    text-align   : center;
    line-height  : 40px;
    font-size    : 12px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 40px;
    width        : 40px;
    margin       : 0;
    background   : radial-gradient(circle at 50px 80px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
}

.slideA .ball .circle11 {
    position     : absolute;
    left         : 88%;
    top          : 56%;
    display      : block;
    text-align   : center;
    line-height  : 40px;
    font-size    : 12px;
    color        : #54EBF8;
    background   : black;
    border-radius: 100%;
    height       : 40px;
    width        : 40px;
    margin       : 0;
    background   : radial-gradient(circle at 50px 80px, #5cabff, rgba(13, 34, 155, 0.733));
    transition   : all 0.6s;
    box-shadow   : -20px 17px 60px 0px #344ea3;
}

.slideA .ball .circlePub {
    animation        : circlePubMove 1s linear infinite alternate;
    -webkit-animation: circlePubMove 1s linear infinite alternate;
}

@keyframes circlePubMove {
    0% {
        transform        : scale(1);
        -webkit-transform: scale(1);
        -moz-transform   : scale(1);
        -ms-transform    : scale(1);
        -o-transform     : scale(1);
    }

    100% {
        transform        : scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform   : scale(1.1);
        -ms-transform    : scale(1.1);
        -o-transform     : scale(1.1);
    }
}



/* 文字眩晕 */
.slideA .ball .circle .hue-cold {
    height  : 100%;
    width   : 100%;
    position: absolute;
    opacity : 0;
}

.slideA .ball .circle .hue-cold .transformTop:nth-child(1) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite;
    -webkit-animation: a_hue-cold 4s linear infinite;
}

.slideA .ball .circle .hue-cold .transformTop:nth-child(2) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 1s;
    -webkit-animation: a_hue-cold 4s linear infinite 1s;
}

.slideA .ball .circle .hue-cold .transformTop:nth-child(3) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 2s;
    -webkit-animation: a_hue-cold 4s linear infinite 2s;
}

.slideA .ball .circle .hue-cold .transformTop:nth-child(4) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 3s;
    -webkit-animation: a_hue-cold 4s linear infinite 3s;
}

.slideA .ball .circle4 .hue-cold {
    height  : 100%;
    width   : 100%;
    position: absolute;
    top     : 0;
    opacity : 0;
}

.slideA .ball .circle4 .hue-cold .transformTop:nth-child(1) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite;
    -webkit-animation: a_hue-cold 4s linear infinite;
}

.slideA .ball .circle4 .hue-cold .transformTop:nth-child(2) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 1s;
    -webkit-animation: a_hue-cold 4s linear infinite 1s;
}

.slideA .ball .circle4 .hue-cold .transformTop:nth-child(3) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 2s;
    -webkit-animation: a_hue-cold 4s linear infinite 2s;
}

.slideA .ball .circle4 .hue-cold .transformTop:nth-child(4) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 3s;
    -webkit-animation: a_hue-cold 4s linear infinite 3s;
}

.slideA .ball .circle7 .hue-cold {
    height  : 100%;
    width   : 100%;
    position: absolute;
    top     : 0;
    opacity : 0;
}

.slideA .ball .circle7 .hue-cold .transformTop:nth-child(1) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite;
    -webkit-animation: a_hue-cold 4s linear infinite;
}

.slideA .ball .circle7 .hue-cold .transformTop:nth-child(2) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 1s;
    -webkit-animation: a_hue-cold 4s linear infinite 1s;
}

.slideA .ball .circle7 .hue-cold .transformTop:nth-child(3) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 2s;
    -webkit-animation: a_hue-cold 4s linear infinite 2s;
}

.slideA .ball .circle7 .hue-cold .transformTop:nth-child(4) {
    position         : absolute;
    left             : 0;
    height           : 100%;
    width            : 100%;
    animation        : a_hue-cold 4s linear infinite 3s;
    -webkit-animation: a_hue-cold 4s linear infinite 3s;
}

/* 文字眩晕动画 */
@keyframes a_hue-cold {
    0% {
        color    : #fff;
        opacity  : 1;
        transform: translateY(0);
        z-index  : 4;
    }

    25% {
        color            : rgb(108, 108, 206);
        transform        : translateY(-1%);
        z-index          : 4;
        -webkit-transform: translateY(-1%);
        -moz-transform   : translateY(-1%);
        -ms-transform    : translateY(-1%);
        -o-transform     : translateY(-1%);
    }

    26% {
        z-index: 3;
    }

    50% {
        color            : rgb(92, 92, 173);
        transform        : translateY(-2%);
        z-index          : 3;
        -webkit-transform: translateY(-2%);
        -moz-transform   : translateY(-2%);
        -ms-transform    : translateY(-2%);
        -o-transform     : translateY(-2%);
    }

    51% {
        z-index: 2;
    }

    75% {
        color            : rgb(48, 48, 48);
        transform        : translateY(-3%);
        z-index          : 2;
        -webkit-transform: translateY(-3%);
        -moz-transform   : translateY(-3%);
        -ms-transform    : translateY(-3%);
        -o-transform     : translateY(-3%);
    }

    76% {
        opacity: 1;
        z-index: 1;
    }

    100% {
        opacity          : 0;
        transform        : translateY(-4%);
        -webkit-transform: translateY(-4%);
        -moz-transform   : translateY(-4%);
        -ms-transform    : translateY(-4%);
        -o-transform     : translateY(-4%);
    }
}

.bannerBg {
    height  : 100%;
    width   : 100%;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index : 0;
    opacity : 0.7;
    border-radius: 5px;
}



/* Q弹小标题 */
@keyframes jello-horizontal1 {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform        : scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform        : scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform        : scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform        : scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform        : scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform        : scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform        : scale3d(1, 1, 1);
    }
}

/* 向下按钮一直跳动 */
.swiper-button-next {
    width            : 5%;
    height           : 5%;
    background-image : none;
    transform        : rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform   : rotate(0deg);
    -ms-transform    : rotate(0deg);
    -o-transform     : rotate(0deg);
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    outline          : none;
    animation        : tiaodong 0.8s both infinite alternate;
    -webkit-animation: tiaodong 0.8s both infinite alternate;
}

.swiper-button-next p {
    margin-top: 5px;
    color     : #999999;
}

@keyframes tiaodong {
    0% {
        top: 92%;
    }

    50% {
        top: 92.5%;
    }

    100% {
        top: 93%
    }
}

.bg2_content {
    height  : 50%;
    width   : 70%;
    position: absolute;
    top     : 30%;
    left    : 10%;
    display : none;
    box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.2) ;
}


.sectionBgActive2 {
    animation        : bg2 500ms;
    -webkit-animation: bg2 500ms;
    -moz-animation: bg2 500ms;
    -o-animation: bg2 500ms;
}

@keyframes bg2 {
    0% {
        top : 30%;
        left: -100%;
    }

    100% {
        top : 30%;
        left: 10%;
    }
}

.bg2_title {
    position: absolute;
    top     : 20%;
    left    : 5%;
    display : none;
}

.indexBgTitleActive {
    animation        : indexBgTitleActive 500ms;
    -webkit-animation: indexBgTitleActive 500ms;
    -moz-animation: indexBgTitleActive 500ms;
    -o-animation: indexBgTitleActive 500ms;

}

.bg2_title .white_title div {
    color            : white;
    font-size        : 36px;
    position         : relative;
    z-index          : 10;
    transform        : translateZ(20px);
    -webkit-transform: translateZ(20px);
    -moz-transform   : translateZ(20px);
    -ms-transform    : translateZ(20px);
    -o-transform     : translateZ(20px);
}

.bg2_title .white_title span {
    color    : white;
    font-size: 14px;
}

.bg2_title .black_title {
    position : absolute;
    width    : 200%;
    top      : -18%;
    left     : -18%;
    color    : #354063;
    font-size: 30px;
}

@keyframes indexBgTitleActive {
    0% {
        left: -20%;
    }

    100% {
        left: 5%
    }
}

.bg2BigSwiper {
    height  : 100%;
    width   : 100%;
    overflow: hidden;
}

.bg2BigSwiper .swiper-slide {
    border-radius        : 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    -ms-border-radius    : 10px;
    -o-border-radius     : 10px;
}

.bg2BigSwiper .swiper-slide img {
    border-radius        : 5px;
    height               : 100%;
    width                : 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    -ms-border-radius    : 5px;
    -o-border-radius     : 5px;
}

.bg2-content-right {
    position: absolute;
    right    : 30px;
    top     : 15%;
    height  : 60%;
    width   : 40%;
    z-index : 1;
    overflow: hidden;
}

.bg2-content-right .line {
    height          : 1%;
    width           : 10%;
    background-color: rgb(108, 108, 206);
}

.bg2-content-right .bg2-content-right_title {
    font-size     : 28px;
    color         : white;
    padding-top   : 33px;
    padding-bottom: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg2-content-right .bg2-content-right_content {
    font-size: 14px;
    color    : rgba(255, 255, 255, 0.4);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.bg2-content-left {
    height  : 60%;
    width   : 40%;
    z-index : 1;
    position: absolute;
    left    : 5%;
    top     : 40%;
}

.bg2-content-left img {
    position: absolute;
    height  : 100%;
    width   : 100%;
}

.bg2-content-left .topone {
    animation        : threeimgone 6s 1.2s infinite;
    -webkit-animation: threeimgone 6s 1.2s infinite;
}

.bg2-content-left .toptwo {
    animation        : threeimgtwo 6s 1.2s infinite;
    -webkit-animation: threeimgtwo 6s 1.2s infinite;
}

.bg2-content-left .topthree {
    z-index          : -1;
    animation        : threeimgthree 6s linear infinite;
    -webkit-animation: threeimgthree 6s linear infinite;
}

/* 三张图片上下动 */
@keyframes threeimgone {
    0% {
        top: 0%;
    }

    20% {
        top: -40%;
    }

    80% {
        top: -40%;
    }

    100% {
        top: 0%;
    }
}

@keyframes threeimgtwo {
    0% {
        top: 0%;
    }

    20% {
        top: -20%;
    }

    30% {
        top: -20%;
    }

    50% {
        top: -30%;
    }

    60% {
        top: -30%;
    }

    80% {
        top: -20%;
    }

    100% {
        top: 0%;
    }
}

@keyframes threeimgthree {
    0% {
        top: 0;
    }

    100% {
        top: 0;
    }
}

.bg2_content .btnBox {
    height                     : 30px;
    width                      : 100px;
    line-height                : 30px;
    position                   : absolute;
    right                      : 5%;
    bottom                     : 5%;
    text-align                 : center;
    z-index                    : 1;
    --color                    : #fff;
    --color-hover              : var(--color);
    --background               : rgba(55, 83, 192, 1);
    --background-hover         : var(--background);
    /*--hover-back             : #6D58FF;
    --hover-front              : #5C86FF;
    */
    /*padding                  : 8px 28px;
    */
    border-radius              : 20px;
    font-size                  : 12px;
    letter-spacing             : 0.02em;
    border                     : none;
    outline                    : none;
    overflow                   : hidden;
    cursor                     : pointer;
    -webkit-appearance         : none;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image         : -webkit-radial-gradient(white, black);
    color                      : var(--c, var(--color));
    background                 : var(--b, var(--background));
    transition                 : color 0.2s linear var(--c-d, 0.2s), ;
    -webkit-transition         : color 0.2s linear var(--c-d, 0.2s), ;
    -moz-transition            : color 0.2s linear var(--c-d, 0.2s), ;
    -ms-transition             : color 0.2s linear var(--c-d, 0.2s), ;
    -o-transition              : color 0.2s linear var(--c-d, 0.2s), ;
}

.btnBox:not(.simple):before,
.btnBox:not(.simple):after {
    content      : '';
    position     : absolute;
    background   : var(--pb, var(--hover-back));
    top          : 0;
    left         : 0;
    right        : 0;
    height       : 200%;
    border-radius: var(--br, 40%);
    transform    : translateY(var(--y, 50%));
    transition   : transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s);
}

.btnBox:not(.simple):after {
    --pb: var(--hover-front);
    --d : 0.44s;
}

.btnBox div {
    z-index        : 1;
    position       : relative;
    display        : flex;
    justify-content: center;
}

.btnBox div span {
    display            : block;
    backface-visibility: hidden;
    transform          : translateZ(0);
    animation          : var(--name, none) 0.7s linear forwards 0.18s;
}

.btnBox.in {
    --name: move;
}

.btnBox.in:not(.out) {
    --c: var(--color-hover);
    --b: var(--background-hover);
}

.btnBox.in:not(.out):before,
.btnBox.in:not(.out):after {
    --y : 0;
    --br: 5%;
}

.btnBox.in:not(.out):after {
    --br : 10%;
    --d-d: 0.02s;
}

.btnBox.in.out {
    --name: move-out;
}

.btnBox.in.out:before {
    --d-d: 0.06s;
}

@keyframes move {

    30%,
    36% {
        transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
    }

    50% {
        transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
    }

    70% {
        transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
    }
}

@keyframes move-out {

    30%,
    36% {
        transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
    }

    50% {
        transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
    }

    70% {
        transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
    }
}
.classicBg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: url("../img/mohu.png") no-repeat;
    background-size: 100% 100%;
    z-index:10;
    display:none;
}
.classicBg .classicBgPub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 900px;
    height: 320px;
}
.classicBg .classicBgPub .classicBgPublast {
    position: absolute;
    width: 900px;
    height: 320px;
    background: linear-gradient(-88deg, #4252b2, #3275d7);
    opacity: 0.4;
    border-radius: 10px;
}
.classicBg .classicBgPub .classicBgPubsecond {
    position: absolute;
    width: 860px;
    height: 370px;
    left: 20px;
    top: -24px;
    background: linear-gradient(-88deg, #4252b2, #3275d7);
    opacity: 0.7;
    border-radius: 10px;
}
.classicBg .classicBgPub .classicBgPubfirst {
    left: 40px;
    top: -51px;
    position: absolute;
    width: 820px;
    height: 420px;
    background: url(../img/tanchuangbg.png) no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
}
.classicBg .classicBgPub .classicBgPubfirst .classicBgClose {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 15px;
    top: 15px;
}
.classicBg .classicBgPub .classicBgPubfirst  .blackText {
    position: absolute;
    font-size: 30px;
    top: -50px;
    text-align: center;
    width: 100%;
    color: white;
    opacity: 0.2;
}
.classicBg .classicBgPub .classicBgPubfirst  .whiteText {
    position: absolute;
    font-size: 30px;
    width: 100%;
    text-align: center;
    color: white;
    top: -40px;
}
.classicBg .classicBgPub .classicBgPubfirst .classicBgClose:hover {
    animation: closedou 0.1s 4;
}
.classicBg .classicBgPub .classicBgPubfirst .classicBgPubImg {
    height: 200px;
    width: 400px;
    position: absolute;
    left: 50%;
    top:140px;
    transform: translate(-50%,-50%);
}
.classicBg .classicBgPub .classicBgPubfirst .classicBgPubCon {
    position: absolute;
    top: 280px;
    padding: 0px 80px;
    color: white;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;

}
@keyframes closedou {
    0% {
        transform: rotateZ(-10deg);
    }
    100% {
        transform: rotateZ(10deg);
    }
}
@media screen and (max-width: 1300px) {
    .slideA .titlea {
        font-size: 22px;
        top: 25px;
        margin-left: 20px;
    }
    .ball {

        height: 290px !important;
        width : 520px !important;
        bottom: 53px !important;
        right : 64px !important;

    }
    .circle1,
    .circle2,
    .circle3,
    .circle5,
    .circle6,
    .circle8,
    .circle9,
    .circle10,
    .circle11 {
        height     : 60px !important;
        width      : 60px !important;
        line-height: 60px !important;
        font-size  : 12px !important;

    }

    .circle2 span,
    .circle3 span,
    .circle5 span,
    .circle6 span,
    .circle8 span,
    .circle9 span,
    .circle10 span,
    .circle11 span {
        font-size: 10px;
        transform: scale(0.8);
    }

    .circle {
        height     : 120px !important;
        width      : 120px !important;
        line-height: 120px !important;
        font-size  : 16px !important;
        left       : 20% !important;
        top        : 45% !important;
    }

    .circle1 {
        top : 23% !important;
        left: 27% !important;
    }

    .circle2 {
        left: 8% !important;
        top : 65% !important;
    }

    .circle3 {
        left: 38% !important;
        top : 4% !important;
    }
    .circle4 {
        height     : 100px !important;
        width      : 100px !important;
        line-height: 100px !important;
        font-size  : 16px !important;
        left       : 45% !important;
        top        : 20% !important;
    }

    .circle5 {
        left: 46% !important;
        top : 60% !important;
    }

    .circle6 {
        left: 64% !important;
        top : 4% !important;
    }

    .circle8 {
        left: 60% !important;
        top: 81% !important;
    }


    .circle9 {
        left: 76% !important;
        top : 30% !important;
    }
    .circle10 {
        top: 81% !important;
    }

    .circle7 {
        height     : 90px !important;
        width      : 90px !important;
        line-height: 90px !important;
        font-size  : 16px !important;
        left       : 65%;
    }
    /*.secondBox .rightBox .rightBox-content .hang p .iconImg {*/
    /*    height: 80px;*/
    /*    width: 80px;*/
    /*}*/

}

@media screen and (min-width: 1300px) {
    .ball {
        height: 360px !important;
        width : 640px !important;
        bottom: 53px !important;
        right : 64px !important;

    }

    .circle1,
    .circle2,
    .circle3,
    .circle5,
    .circle6,
    .circle8,
    .circle9,
    .circle10,
    .circle11 {
        height     : 55px !important;
        width      : 55px !important;
        line-height: 55px !important;
        font-size  : 12px !important;
    }

    .circle {
        height     : 130px !important;
        width      : 130px !important;
        line-height: 130px !important;
        font-size  : 20px !important;
        left       : 20% !important;
        top        : 45% !important;
    }

    .circle1 {
        top : 27% !important;
        left: 27% !important;
    }

    .circle2 {
        left: 8% !important;
        top : 65% !important;
    }

    .circle3 {
        left: 38% !important;
        top : 10% !important;
    }

    .circle4 {
        height     : 110px !important;
        width      : 110px !important;
        line-height: 110px !important;
        font-size  : 20px !important;
        left       : 45% !important;
        top        : 20% !important;
    }

    .circle5 {
        left: 46% !important;
        top : 60% !important;
    }

    .circle6 {
        left: 64% !important;
        top : 10% !important;
    }

    .circle8 {
        left: 60% !important;

    }

    .circle9 {
        left: 76% !important;
        top : 34% !important;
    }

    .circle7 {
        height     : 100px !important;
        width      : 100px !important;
        line-height: 100px !important;
        font-size  : 20px !important;
        left       : 65%;
    }




    /*#anliBox .numberBig {*/
    /*    font-size: 22px !important;*/
    /*    font-weight: 700;*/
    /*}*/

    /*#anliBox .anlijianju {*/
    /*    font-size: 12px !important;*/
    /*}*/

    /*#anliBox .margin {*/
    /*    margin-bottom: 44px !important;*/
    /*}*/

    .rotatetext {
        top: 0px !important;
    }

    .rightBox-content {
        height: 350px !important;
        width : 790px !important;
    }

    .boxone {
        height: 377px !important;
        width : 377px !important;
    }

    .imgNone {
        height: 377px !important;
        width : 377px !important;
    }

    .slideAPub .rightBox300 {

        height: 377px ;
        width : 377px ;
    }

    .slideAPub .rightBox300 .info {
        font-size: 27px;
    }

    .slideAPub .rightBox300 .hangye {
        font-size: 23px;
        bottom   : 15px;
        right    : -70px;
    }

    .slideAPub .rightBox300 .jiejue {
        font-size: 25px;
        top      : 10%;
        right    : -35%;
        opacity: 1;
    }

    .slideAPub .rightBox300 .zhouqi {
        font-size: 22px;
        top      : 53%;
        right    : -50%;
    }

    .slideAPub .rightBox300 .bigBox .gan {
        font-size: 17px;
    }

    .slideAPub .rightBox300 .bigBox .kong {
        font-size: 27px;
    }

    .slideAPub .rightBox300 .bigBox .zhi {
        font-size: 49px;
    }

    .slideAPub .rightBox300 .bigBox .jing {
        font-size: 49px;
    }

    .slideAPub .rightBox300 .bigBox .xi {
        font-size: 27px;
    }

    .slideAPub .rightBox300 .bigBox .zhuan {
        font-size: 17px;
    }

    .slideAPub .rightBox300 .bigBox .bigBoxFirst {
        top: 20px;
    }

    .slideAPub .rightBox300 .bigBox .bigBoxSecond {
        top: 20px;
    }
}

@media screen and (min-width: 1650px) {

    .ball {
        height: 460px !important;
        width : 850px !important;
        bottom: 70px !important;
        right : 64px !important;
    }


    .circle1,
    .circle2,
    .circle3,
    .circle5,
    .circle6,
    .circle8,
    .circle9,
    .circle10,
    .circle11 {
        height     : 74px !important;
        width      : 74px !important;
        line-height: 74px !important;
        font-size  : 14px !important;
    }

    .circle {
        height     : 12rem !important;
        width      : 12rem !important;
        line-height: 12rem !important;
        font-size  : 36px !important;
    }

    .circle1 {
        bottom: 100px !important;
        right : 643px !important;
    }

    .circle2 {
        left: 13% !important;
        top : 76% !important;
    }
    .circle4 {
        height     : 10rem !important;
        width      : 10rem !important;
        line-height: 10rem !important;
        font-size  : 30px !important;
    }

    .circle5 {
        left: 51% !important;
        top : 70% !important;
    }



    .circle7 {
        height     : 7.5rem !important;
        width      : 7.5rem !important;
        line-height: 7.5rem !important;
        font-size  : 30px !important;
    }
    .boxone {
        height: 452px !important;
        width: 452px !important;
    }

    .imgNone {
        height: 452px !important;
        width: 452px !important;
    }
   .thirdBox .rightBox300 {
        top: 60%;
    }
    .thirdBox .rightBox300 .info {
        font-size: 32px;
        left: -100%;

    }
    .thirdBox .rightBox300 .hangye {
        font-size: 27px;
        bottom: 0px;
        right: -170px;
    }
    .thirdBox .rightBox300 .jiejue {
        font-size: 30px;
        top: 4%;
        right: -100%;
    }
    .thirdBox .rightBox300 .zhouqi {
        font-size: 26px;
        top: 53%;
        right: -107%;
    }
}

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


    #fullpage {
        display: none;
    }

    .swiper-pagination {
        display: none;
    }

    .swiper-button-next {
        display: none;
    }

    .swiper_Big {
        display    : block;
        width      : 100vw;
        padding-top: 81px;
    }

    .swiper_Big .swiper_small {
        width   : 100%;
        overflow: hidden;
    }

    .swiper_small .swiper-wrapper {
        width: 100vw;
    }

    .swiper_small .swiper-wrapper .smallSilde {
        width : 100vw;
        height: 10rem;
    }

    .swiper_small .swiper-wrapper .smallSilde img {
        height: 100%;
        width : 100vw;
    }

    .sm_two .titleBox {
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        position       : relative;
        height         : 100px;
    }

    .sm_two_title {
        font-size  : 20px;
        font-weight: 700;
    }

    .black_title {
        position : absolute;
        color    : black;
        font-size: 20px;
        opacity  : 0.1;
    }

    .imgBox {
        position: relative;
    }

    .imgBox .imgBoxContent {
        position : absolute;
        top      : 50%;
        left     : 50%;
        transform: translate(-50%, -50%);
        color    : white;
        font-size: 20px;
    }

    .imgBox img {
        height: 200px;
        width : 100vw;
    }

    .sm_three .titleBox {
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        position       : relative;
        height         : 100px;
    }

    .sm_three .sm_two_title {
        font-size  : 20px;
        font-weight: 700;
    }

    .sm_three .black_title {
        position : absolute;
        color    : black;
        font-size: 20px;
        opacity  : 0.1;
    }

    .jdSwiper {
        height  : 230px;
        width   : 100vw;
        overflow: hidden;
    }

    .jdSlideBox {
        position: relative;
    }

    .jdSlideBoxContent {
        position : absolute;
        top      : 50%;
        left     : 50%;
        transform: translate(-50%, -50%);
        color    : white;
        font-size: 20px;
    }

    .jdSwiper img {
        width : 100%;
        height: 230px;
    }
    .jdSlide .sm_three_tachuanBox {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        z-index: 1;
        background: url("../img/tanchuangbg.png") no-repeat;
        background-size: 100% 100%;
        display: none;
    }
    .jdSlide .sm_three_tachuanBox .sm_three_tachuanBox_title {
        text-align: center;
        font-size: 18px;
        color: white;
        margin: 10px 0px;
    }
    .jdSlide .sm_three_tachuanBox .sm_three_close {
        height: 20px;
        width: 20px;
        position: absolute;
        right: 2px;
        top: 2px;
    }

    .jdSlide .sm_three_tachuanBox .sm_three_tachuanBox_con {
        padding: 0px 10px;
        font-size: 14px;
        color: white;
        /*display: -webkit-box;*/
        /*-webkit-box-orient: vertical;*/
        /*-webkit-line-clamp: 6;*/
        /*overflow: hidden;*/
    }

    .sm_four .titleBox {
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        position       : relative;
        height         : 100px;
    }

    .sm_four.sm_two_title {
        font-size  : 20px;
        font-weight: 700;
    }

    .sm_four .black_title {
        position : absolute;
        color    : black;
        font-size: 20px;
        opacity  : 0.1;
    }

    .sm_fourImgBigBox {
        height         : 200px;
        width          : 100%;
        background     : url(../img/black.png) no-repeat;
        background-size: 100% 100%;
        display        : flex;
        justify-content: space-around;
        align-items    : center;
        overflow-x:hidden ;
    }

    .sm_fourImgsmallBox {
        height         : 100%;
        width          : 100%;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
    }

    .sm_fourImgBigBox img {
        height: 65px;
        width : 106px;
    }

    .sm_fourImgBigBox div {
        color     : white;
        font-size : 20px;
        margin-top: 10px;
    }

    .sm_five .titleBox {
        display         : flex;
        flex-direction  : column;
        justify-content : center;
        align-items     : center;
        position        : relative;
        height          : 100px;
        background-color: #fff;
    }

    .sm_five .sm_two_title {
        font-size  : 20px;
        font-weight: 700;
    }

    .sm_five .black_title {
        position : absolute;
        color    : black;
        font-size: 20px;
        opacity  : 0.1;
    }

    .sm_fiveContent .sm_fiveContentBg {
        display       : flex;
        flex-direction: column;
        align-items   : center;
        color         : white;
    }
    .sm_fiveContent .sm_fiveContentBg img {
       width: 50px;
        height: 50px;
    }

    .sm_fiveContentBg1 {
        height         : 300px;
        width          : 100%;
        background     : url(../img/bg3-2.png) no-repeat;
        background-size: 100% 100%;
    }

    .sm_fiveContentBg2 {
        height         : 300px;
        width          : 100%;
        background     : url(../img/bg3-1.png) no-repeat;
        background-size: 100% 100%;
    }

    .sm_fiveContentBg3 {
        height         : 300px;
        width          : 100%;
        background     : url(../img/bg3-3.png) no-repeat;
        background-size: 100% 100%;
    }

    .sm_fiveContentBg4 {
        height         : 300px;
        width          : 100%;
        background     : url(../img/bg3-4.png) no-repeat;
        background-size: 100% 100%;
    }

    .sm_fiveContentBg5 {
        height         : 300px;
        width          : 100%;
        background     : url(../img/bg3-5.png) no-repeat;
        background-size: 100% 100%;
    }

    .sm_fiveContentBg img {
        margin-top: 10px;
    }

    .sm_fiveContentBg_title {
        margin     : 20px 0;
        font-weight: 700;
        font-size  : 20px;
        color      : #ccc;
    }

    .sm_fiveContentBg_js {
        padding: 0 60px;
        color  : #ccc;
    }

    .sm-six .titleBox {
        display         : flex;
        flex-direction  : column;
        justify-content : center;
        align-items     : center;
        position        : relative;
        height          : 100px;
        background-color: #fff;
    }

    .sm-six .sm_two_title {
        font-size  : 20px;
        font-weight: 700;
    }

    .sm-six .black_title {
        position : absolute;
        color    : black;
        font-size: 20px;
        opacity  : 0.1;
    }

    .sixform {
        height         : 470px;
        width          : 100%;
        background     : url(../img/bg6_b.png) no-repeat;
        background-size: 100% 100%;
        position       : relative;

    }

    .sixformtitle {
        font-size  : 20px;
        color      : white;
        text-align : center;
        padding-top: 10px;
    }

    .inputBox {
        padding-left: 20px;
        margin-top  : 10px;
    }

    .sixform .xingxing {
        color : red;
        margin: 0 10px;
    }

    .inputname {
        color: white;
    }

    .sixform input {
        opacity: 0.3;
        width  : 270px;
    }

    .checkBoxTitle {
        margin-top  : 20px;
        padding-left: 20px;
    }

    .checkName {
        color: white;
        display: inline-block;
        width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    .checkInputBox {
        display        : flex;
        align-items    : center;
        justify-content: center;
        width          : 90px;
        margin         : 5px 0;
    }

    .checkInputBox .check {
        width      : 15px;
        height     : 15px;
        margin-left: 5px;
    }

    .checkInputBoxBig {
        display        : flex;
        flex-wrap      : wrap;
        justify-content: space-between;
        margin-top     : 5px;
        padding: 0px 20px;
    }

    .sixformTextBox {
        width       : 100%;
        height      : 100px;
        display     : flex;
        justify-self: center;
    }

    .sixformText {
        opacity: 0.3;
        width  : 380px;
        height : 100px;
        margin : 10px auto;
    }

    .sixBtn {
        height     : 30px;
        width      : 80px;
        margin-top : 20px;
        margin-left: 50%;
        transform  : translate(-50%);
        color      : white;
        background : linear-gradient(270deg, #384bbb, #3275d7);
    }
}
@media screen and (max-height: 700px) {
    .bg2-content-right .bg2-content-right_content {

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
}
@media screen and (max-height: 660px)  {

    .ball {
        height: 290px !important;
        width : 520px !important;
        bottom: 53px !important;
        right : 64px !important;
    }
    .circle1,
    .circle2,
    .circle3,
    .circle5,
    .circle6,
    .circle8,
    .circle9,
    .circle10,
    .circle11 {
        height     : 60px !important;
        width      : 60px !important;
        line-height: 60px !important;
        font-size  : 12px !important;

    }

    .circle2 span,
    .circle3 span,
    .circle5 span,
    .circle6 span,
    .circle8 span,
    .circle9 span,
    .circle10 span,
    .circle11 span {
        font-size: 10px;
        transform: scale(0.8);
    }

    .circle {
        height     : 120px !important;
        width      : 120px !important;
        line-height: 120px !important;
        font-size  : 16px !important;
        left       : 20% !important;
        top        : 45% !important;
    }

    .circle1 {
        top : 23% !important;
        left: 27% !important;
    }

    .circle2 {
        left: 8% !important;
        top : 65% !important;
    }

    .circle3 {
        left: 38% !important;
        top : 4% !important;
    }
    .circle4 {
        height     : 100px !important;
        width      : 100px !important;
        line-height: 100px !important;
        font-size  : 16px !important;
        left       : 45% !important;
        top        : 20% !important;
    }

    .circle5 {
        left: 46% !important;
        top : 60% !important;
    }

    .circle6 {
        left: 64% !important;
        top : 4% !important;
    }

    .circle8 {
        left: 60% !important;
        top: 81% !important;
    }


    .circle9 {
        left: 76% !important;
        top : 30% !important;
    }
    .circle10 {
        top: 81% !important;
    }

    .circle7 {
        height     : 90px !important;
        width      : 90px !important;
        line-height: 90px !important;
        font-size  : 16px !important;
        left       : 65%;
    }


    .rightBox-content {
        width: 500px !important;
        height: 300px !important;
    }
    .slider-controls {
        bottom: 20px;
    }
    .rightBox300 {
        height: 300px !important;
        width: 300px !important;
    }
    .boxone {
        height: 300px !important;
        width: 300px !important;
    }
    .imgNone {
        height: 300px !important;
        width: 300px !important;
    }
    .slideAPub .rightBox300 .bigBox .gan {
        font-size: 17px;
    }

    .slideAPub .rightBox300 .bigBox .kong {
        font-size: 24px;
    }

    .slideAPub .rightBox300 .bigBox .zhi {
        font-size: 32px;
    }

    .slideAPub .rightBox300 .bigBox .jing {
        font-size: 32px;
    }

    .slideAPub .rightBox300 .bigBox .xi {
        font-size: 24px;
    }

    .slideAPub .rightBox300 .bigBox .zhuan {
        font-size: 17px;
    }
    .slideAPub .rightBox300 .hangye {
        font-size: 20px;
        bottom   : 35px;
        right    : -70px;
    }

    .slideAPub .rightBox300 .jiejue {
        font-size: 22px;
        top      : 10%;
        right    : -35%;
    }

    .slideAPub .rightBox300 .zhouqi {
        font-size: 20px;
        top      : 53%;
        right    : -50%;
    }

    .bg2_title {
        top: 18%;
    }
}
@media screen and (max-height: 650px) {
    canvas {
        left: -60px;
    }
}
@media screen and (max-height: 630px) {
    .bg2_content {
        top: 32%;
    }
    .bg2-content-right .bg2-content-right_title {
        padding-bottom: 20px;
    }


}