@-webkit-keyframes zoominBg {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(1.06);
        transform: scale(1.06)
    }
}

@keyframes zoominBg {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    to {
        -webkit-transform: scale(1.06);
        transform: scale(1.06)
    }
}

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

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

@-webkit-keyframes zoomoutBg {
    0% {
        -webkit-transform: scale(1.06);
        transform: scale(1.06)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes zoomoutBg {
    0% {
        -webkit-transform: scale(1.06);
        transform: scale(1.06)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInDown {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes bounceInLeft {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeft {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

video::-internal-media-controls-download-button {
    display: none
}

video::-webkit-media-controls-enclosure {
    overflow: hidden
}

video::-webkit-media-controls-fullscreen-button {
    display: none
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px)
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden
}

#water {
    background: 0 0 !important
}

.animateContent {
    width: 36%;
    position: absolute;
    z-index: 3
}

.sec-container {
    position: absolute;
    z-index: 1
}

#fullpage > div:nth-child(1), #fullpage > div:nth-child(2), #fullpage > div:nth-child(3), #fullpage > div:nth-child(4), #fullpage > div:nth-child(5) {
    position: relative;
    overflow: hidden;
    transform-origin: center;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center
}

.blue_bg {
    height: 24%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    overflow: hidden
}

.blue_bg, .blue_bg img, .contain1 img, .play > img, .playbtn > img {
    width: 100%
}

.contain1 {
    left: 0;
    top: 0
}

.contain1, .play, .sayTitle {
    position: absolute
}

.sayTitle {
    top: 25%;
    background: url(../images/index/banner1-title1.png) no-repeat center;
    background-size: contain;
    width: 31%;
    height: 44%;
    left: 12%;
    z-index: 3
}

.play {
    width: 6%;
    height: 13%;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 4%;
    z-index: 6;
    cursor: pointer
}

.playbtn, .video-show {
    position: absolute;
    top: 0;
    left: 0
}

.playbtn {
    margin: auto;
    right: 0;
    bottom: 0;
    width: 80%;
    height: 80%;
    z-index: 4
}

.play > img {
    height: 100%;
    display: block;
    -webkit-animation: rotate 3s linear infinite
}

.video-show {
    width: 100%;
    z-index: 6;
    background: rgba(0, 0, 0, .5);
    height: 100%;
    opacity: 0;
    display: none
}

.video-container {
    display: table;
    position: relative;
    margin: 12% auto
}

#video_play, .closeBtn {
    top: 0;
    position: absolute;
    z-index: 4
}

#video_play {
    margin: auto;
    left: 0;
    bottom: 0;
    cursor: pointer;
    width: 9%;
    right: 0
}

.closeBtn, .detail_more {
    text-align: center;
    cursor: pointer
}

.closeBtn {
    color: gray;
    font-size: 50px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    right: 8px
}

.detail_more {
    width: 9%;
    min-width: 120px;
    height: 47px;
    min-height: 36px;
    background: #4394ed;
    border-radius: 24px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    z-index: 5;
    margin: auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 8%;
    overflow: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    display: none
}

.detail_more > a > .direction {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 8px
}

.detail_more > a {
    display: block;
    color: #fff;
    font-size: 17px;
    width: 100%;
    height: 47px;
    line-height: 47px
}

.detail_more:hover {
    background: #fff;
    border: 1px solid #4394ed
}

.detail_more > a:hover {
    color: #4394ed
}

.detail_more > a:hover > .direction {
    border-right: 1px solid #4394ed;
    border-top: 1px solid #4394ed
}

.cssTitle_four, .cssTitle_one, .cssTitle_thr, .cssTitle_two {
    width: 50%;
    margin-bottom: 15px;
    display: none
}

.cssTitle_two img {
    width: 112%
}

.cssTitle_one img {
    height: 7vw;
    width: auto
}

.cssTitle_four img {
    width: 162%
}

.cssTitle_thr img {
    width: 86%
}

.intro_one img, .intro_thr img, .intro_two img {
    width: 36%
}

.intro_four img {
    width: 81%
}

.intro_four, .intro_one, .intro_thr, .intro_two {
    display: none
}

.contain2, .waterInfo {
    position: absolute;
    top: 0;
    left: 0
}

#svg-images img, .contain2 img, .contain3 img, .contain4 img, .contain5 img {
    width: 100%
}

.waterInfo {
    font-size: 22px;
    margin: auto;
    right: 0;
    top: 205px;
    color: #fff;
    text-align: center;
    z-index: 3
}

#list_contentName li, .waterInfo_one {
    width: auto
}

.Contone {
    position: absolute;
    bottom: 2%;
    bottom: 3% \9;
    left: 18%
}

.intro_one {
    position: relative;
    z-index: 4
}

#svg-area, #svg-images {
    width: 100%;
    height: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2
}

#svg-area {
    margin: 0 auto;
    display: block
}

#svg-area > path {
    width: 100%;
    height: 28%
}

.contain3 {
    position: absolute;
    top: 0;
    left: 0
}

.waterInfo_two {
    width: auto;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    color: #fff
}

.Conttwo {
    position: absolute;
    bottom: -2%;
    left: 18%
}

.intro_two {
    position: relative;
    z-index: 4
}

.contain4 {
    top: 0;
    left: 0
}

.waterInfo_thr {
    width: auto;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    color: #fff
}

.Contthr {
    position: absolute;
    bottom: -4%;
    left: 18%
}

.intro_thr {
    position: relative;
    z-index: 4
}

.contain5 {
    position: absolute;
    top: 0;
    left: 0
}

.waterInfo_four {
    width: auto;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    opacity: 1
}

.Contfour {
    position: absolute;
    bottom: -3%;
    left: 13%
}

.intro_four {
    position: relative;
    z-index: 4
}

#fullpage > div:last-child > .fp-tableCell {
    height: 300 !important
}

.backtop {
    position: fixed;
    bottom: 70px;
    right: 50px;
    width: 66px;
    height: 66px;
    background: url(../images/index/backtop.png) no-repeat center;
    background-size: contain;
    opacity: 0;
    z-index: 5
}

.backtop > a {
    display: block;
    width: 100%;
    height: 100%
}

#list_contentName {
    position: relative;
    display: none;
    background: #fff;
    overflow: hidden;
    z-index: 4
}

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

.zoomBg, .zoomoutBg {
    -webkit-animation: zoominBg 1.5s linear;
    animation: zoominBg 1.5s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards
}

.zoomoutBg {
    -webkit-animation: zoomoutBg 1.5s linear;
    animation: zoomoutBg 1.5s linear
}

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

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

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

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

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

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

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

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

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

@media screen and (max-width: 1024px) {
    .detail_more {
        height: 32px;
        line-height: 32px;
        bottom: 45px
    }

    .detail_more > a {
        font-size: 15px;
        width: 100%;
        line-height: 32px;
        height: 32px
    }

    .waterInfo {
        font-size: 15px;
        top: 142px
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .detail_more, .detail_more > a {
        height: 36px;
        line-height: 36px
    }

    .detail_more > a {
        font-size: 15px;
        width: 100%
    }

    .waterInfo {
        font-size: 16px;
        top: 159px
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .detail_more, .detail_more > a {
        height: 38px;
        line-height: 38px
    }

    .detail_more > a {
        font-size: 15px;
        width: 100%
    }

    .waterInfo {
        font-size: 16px;
        top: 173px
    }
}

@media only screen and (min-width: 1366px) and (max-width: 1440px) {
    .detail_more, .detail_more > a {
        height: 40px;
        line-height: 40px
    }

    .detail_more > a {
        font-size: 15px;
        width: 100%
    }

    .waterInfo {
        font-size: 16px;
        top: 183px
    }
}

@media only screen and (min-width: 1440px) and (max-width: 1680px) {
    .detail_more, .detail_more > a {
        height: 44px;
        line-height: 44px
    }

    .detail_more > a {
        font-size: 15px;
        width: 100%
    }

    .waterInfo {
        font-size: 17px;
        top: 189px
    }
}