@charset "utf-8";

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei"
}

#indexDiv {
    width: 100%
}

.winBorder {
    position: fixed;
    z-index: 4;
    border: 4px solid #FFF
}

img {
    width: 100%
}

#navigation {
    position: fixed;
    top: 40px;
    left: 220px;
    z-index: 10;
    width: auto;
    height: 50px
}

#navigation img {
    position: relative;
    top: 14px;
    width: 16px;
    height: 23px
}

#navigation .navigationSelect {
    float: left;
    width: auto;
    height: 50px;
    color: #FFF;
    line-height: 50px
}

#navigation .navigationSelect .text:hover {
    color: #2cead1
}

#navigation .navigationSelect .text {
    float: left;
    margin-right: 30px;
    margin-left: 30px;
    width: auto;
    height: 50px;
    color: #FFF;
    font-size: 14px;
    line-height: 50px;
    cursor: pointer;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s
}

#navigation .navigationSelect .img {
    float: left;
    width: 20px;
    height: 50px;
    color: #FFF;
    line-height: 50px
}

@keyframes jiazai {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@-moz-keyframes jiazai {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@-webkit-keyframes jiazai {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@-o-keyframes jiazai {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

#jiazai {
    position: relative;
    z-index: 20;
    display: block;
    width: 100%;
    background: #FFF
}

.logoBg {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: #00ffc0;
    background: -webkit-gradient(linear,0% 0,100% 0,from(#00ffc0),to(#77daff));
    background: -moz-linear-gradient(linear,0% 0,100% 0,from(#00ffc0),to(#77daff));
    background: -ms-radial-gradient(linear,0% 0,100% 0,from(#00ffc0),to(#77daff));
    background: -o-radial-gradient(linear,0% 0,100% 0,from(#00ffc0),to(#77daff));
    opacity: .3;
    animation: jiazai 1s;
    -moz-animation: jiazai 1s;
    -webkit-animation: jiazai 1s;
    -o-animation: jiazai 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

.jiazai_logo {
    position: absolute;
    top: 185px;
    left: 500px;
    z-index: 3;
    width: 30%;
    height: 21%
}

.jiazai_logo svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.spinner img {
    width: 100%
}

.spinner {
    margin: 100px auto 0;
    width: 5%;
    height: 5%;
    text-align: center
}

#index_pageChose {
    position: fixed;
    top: 25%;
    right: 30px;
    z-index: 4;
    width: 30px;
    height: 30%;
    background: #5451054
}

.pageChose {
    margin-top: 30px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #555;
    cursor: pointer
}

.pageChose:hover {
    margin-top: 30px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #CCC
}

.pageChose:hover:before {
    position: relative;
    top: -2px;
    right: 20px;
    background: 0;
    color: #FFF
}

#index_pageChose .active {
    background: #FFF
}

#index_pageChose .active:hover {
    background: #555
}

#index_pageChose .active:hover:before {
    position: relative;
    top: -2px;
    right: 50px;
    background: 0;
    color: #FFF
}

.indexPage {
    position: relative;
    z-index: 3;
    overflow: hidden;
    width: 100%;
    height: auto
}

.imgJian div {
    position: absolute;
    overflow: hidden
}

.imgJian div img {
    position: relative
}

#page1 {
    background: #222;
    background-size: cover;
    -webkit-transition: background-position 2s;
    -moz-transition: background-position 2s;
    -o-transition: background-position 2s;
    transition: background-position 2s;
    background-position-y: 0;
    background-image:url(../images/1.jpg);
}

#img {
    position: absolute;
    z-index: 0;
    width: 100%;
    opacity: 0
}

#page1 div {
    z-index: 2
}

.logo {
    margin-top: 250px;
    margin-left: 50px;
    width: 323px;
    height: 131px
}

.page1Right {
    position: absolute;
    top: 0;
    right: -700px;
    padding-left: 100px;
    width: 700px;
    height: 1080px;
    background: rgba(0,0,0,0.2)
}

.page1Right div {
    opacity: 0
}

.page1text1 {
    margin-top: 20px;
    width: 520px;
    height: 50px;
    color: #fff;
    font-size: 32px
}

.page1text2 {
    margin-top: 10px;
    width: 520px;
    height: 100px;
    color: #fff;
    font-size: 20px
}

.sign,.login {
    position: absolute;
    margin-top: 10px;
    width: 260px;
    height: 40px;
    border: 2px solid #71dde6;
    box-shadow: 1px 0 6px rgba(6,0,1,0.36);
    color: #71dde6;
    text-align: center;
    text-shadow: 1px 0 6px rgba(6,0,1,0.36);
    font-size: 22px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-transition: background .25s,color .25s;
    -moz-transition: background .25s,color .25s;
    -o-transition: background .25s,color .25s;
    transition: background .25s,color .25s
}

.sign {
    left: 390px
}

.sign:hover,.login:hover {
    background: rgba(113,221,230,0.5);
    color: #FFF;
    text-shadow: none
}

.sign2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 522px;
    height: 42px;
    color: #2cead1;
    text-align: center;
    font-size: 22px;
    line-height: 40px;
    cursor: pointer
}

.sign:hover {
    box-shadow: 0 0 10px #2cead1
}

.sign2:hover {
    box-shadow: 0 0 10px #2cead1 inset
}

.page1top {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 150px;
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0)))
}

.page1bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 150px;
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.5)))
}

.page1img {
    position: absolute;
    width: 36px;
    height: 36px
}

.page1img1 {
    top: 80px;
    left: 120px
}

.page1img2 {
    bottom: 80px;
    left: 120px
}

.page1img3 {
    top: 80px;
    right: 120px
}

.page1img4 {
    right: 120px;
    bottom: 80px
}

#page2 {
    background: #00aebb
}

.page2bg {
    position: absolute;
    bottom: 0;
    left: 310px;
    margin: auto;
    width: 1300px;
    height: 835px;
    background: url(../images/bg.jpg);
    background-size: cover
}

.page2text1 {
    position: absolute;
    top: 50px;
    left: 100px;
    display: none;
    width: 450px;
    height: 100px;
    color: #fff;
    font-size: 42px
}

.page2text2 {
    position: absolute;
    top: 120px;
    left: 100px;
    display: none;
    width: 620px;
    height: 100px;
    color: #fff;
    font-size: 22px
}

.pageImg {
    position: absolute;
    display: none
}

.page2img img {
    width: 100%
}

.page2img1 {
    top: 300px;
    left: 0;
    width: 1300px;
    height: 681px
}

.page2img2 {
    top: 605px;
    left: 260px;
    width: 130px;
    height: 186px
}

.page2img3 {
    top: 570px;
    left: 480px;
    width: 313px;
    height: 218px
}

.page2img4 {
    top: 635px;
    left: 850px;
    width: 314px;
    height: 150px
}

.page2img5 {
    top: 170px;
    left: 845px;
    width: 319px;
    height: 458px
}

.page2img6 {
    top: 240px;
    left: 500px;
    width: 252px;
    height: 321px
}

.page2img7 {
    top: 355px;
    left: 110px;
    width: 299px;
    height: 206px
}

.page2img8 {
    top: -50px;
    left: 1015px;
    width: 190px;
    height: 228px
}

.pageImgDiv {
    position: absolute;
    display: none;
    background-repeat: no-repeat;
    -webkit-transition: background-position 2s;
    -moz-transition: background-position 2s;
    -o-transition: background-position 2s;
    transition: background-position 2s
}

.page2imgDiv1:hover {
    background-position: -100px -100px
}

.page2imgDiv2:hover {
    background-position: -100px -100px
}

.page2imgDiv3:hover {
    background-position: -100px -100px
}

.page2imgDiv4:hover {
    background-position: -100px -100px
}

.page2imgDiv5:hover {
    background-position: -100px -100px
}

.page2imgDiv6:hover {
    background-position: -100px 0
}

.page2imgDiv7:hover {
    background-position: -100px -100px
}

.page2imgDiv1 {
    top: 630px;
    left: 125px;
    width: 75px;
    height: 132px;
    background: url(../images/1.jpg)
}

.page2imgDiv2 {
    top: 605px;
    left: 265px;
    width: 123px;
    height: 179px;
    background: url(../images/2.jpg)
}

.page2imgDiv3 {
    top: 641px;
    left: 489px;
    width: 296px;
    height: 140px;
    background: url(../images/3.jpg)
}

.page2imgDiv4 {
    top: 638px;
    left: 859px;
    width: 297px;
    height: 140px;
    background: url(../images/4.jpg)
}

.page2imgDiv5 {
    top: 171px;
    left: 847px;
    width: 302px;
    height: 410px;
    background: url(../images/5.jpg)
}

.page2imgDiv6 {
    top: 241px;
    left: 502px;
    width: 218px;
    height: 296px;
    background: url(../images/6.jpg)
}

.page2imgDiv7 {
    top: 366px;
    left: 147px;
    width: 229px;
    height: 174px;
    background: url(../images/7.jpg)
}

.page2imgDiv8 {
    top: -50px;
    left: 1015px;
    width: 190px;
    height: 228px;
    background: url(../images/8.jpg)
}

#page3 {
    background: #00aebb
}

.page3bg {
    position: absolute;
    top: 120px;
    left: 310px;
    margin: auto;
    width: 1300px;
    height: 835px;
    background: url(../images/bg.jpg);
    background-size: cover
}

.page3text1 {
    position: absolute;
    top: 50px;
    left: 630px;
    width: 450px;
    height: 100px;
    color: #fff;
    font-size: 42px
}

.page3text2 {
    position: absolute;
    top: 120px;
    left: 320px;
    width: 630px;
    height: 100px;
    color: #fff;
    text-align: right;
    font-size: 22px
}

.page3img1 {
    top: 530px;
    left: 85px;
    z-index: 4;
    width: 260px;
    height: 260px
}

.page3img2 {
    top: 280px;
    left: 1070px;
    width: 272px;
    height: 272px
}

.page3img3 {
    top: 210px;
    left: -60px;
    width: 221px;
    height: 221px
}

.page3img4 {
    top: 294px;
    left: 278px;
    z-index: 3;
    width: 697px;
    height: 457px
}

.page3img5 {
    top: 260px;
    left: 170px;
    width: 911px;
    height: 500px
}

.page3img6 {
    top: -40px;
    left: 1210px;
    width: 179px;
    height: 253px
}

#page4 {
    background: #00aebb
}

.page4bg {
    position: absolute;
    top: 120px;
    left: 310px;
    margin: auto;
    width: 1300px;
    height: 835px;
    background: url(../images/bg.jpg);
    background-size: cover
}

.page4text1 {
    position: absolute;
    top: 585px;
    left: 630px;
    width: 450px;
    height: 100px;
    color: #fff;
    font-size: 42px
}

.page4text2 {
    position: absolute;
    top: 680px;
    left: 100px;
    width: 980px;
    height: 100px;
    color: #fff;
    font-size: 22px
}

.page4img1 {
    top: 450px;
    left: -90px;
    width: 180px;
    height: 254px
}

.page4img2 {
    top: 530px;
    left: 450px;
    width: 135px;
    height: 131px
}

.page4img3 {
    top: 0;
    left: 0;
    width: 157px;
    height: 371px
}

.page4img4 {
    top: 0;
    left: 0;
    width: 200px;
    height: 360px
}

.page4img5 {
    top: 720px;
    left: 960px;
    width: 165px;
    height: 56px
}

.page4img6 {
    top: 185px;
    left: 85px;
    width: 167px;
    height: 211px
}

.page4img7 {
    top: 245px;
    left: 40px;
    width: 28px;
    height: 154px
}

.page4img8 {
    top: 60px;
    left: 310px;
    width: 401px;
    height: 332px
}

.page4img9 {
    top: 73px;
    left: 321px;
    width: 315px;
    height: 118px
}

.page4img10 {
    top: 10px;
    left: 770px;
    width: 525px;
    height: 525px
}

#page5 {
    background: #e4e4e4
}

.page6text1 {
    position: absolute;
    top: 200px;
    left: 500px;
    display: none;
    width: 500px;
    height: 100px;
    color: #00aebb;
    font-size: 62px
}

.page6text2 {
    position: absolute;
    top: 370px;
    left: 500px;
    display: none;
    width: 530px;
    height: 315px;
    color: #404040;
    font-size: 21px
}

.page6img1 {
    top: 320px;
    left: 740px;
    z-index: 3;
    width: 952px;
    height: 753px
}

.page6img3 {
    top: 360px;
    left: 200px;
    z-index: 3;
    width: 189px;
    height: 190px
}

.page6img2 {
    top: 351px;
    left: 1125px;
    z-index: 3;
    width: 544px;
    height: 418px
}

.page6img4 {
    top: 180px;
    left: 200px;
    width: 188px;
    height: 188px
}

.page6img5 {
    top: 600px;
    left: 200px;
    width: 224px;
    height: 231px
}

.page6bottom {
    position: absolute;
    bottom: 0;
    width: 1920px;
    height: 200px;
    background: rgba(0,0,0,0.1)
}

#page7 {
    background: #f3f3f3
}

.page7text1 {
    position: absolute;
    top: 660px;
    left: 470px;
    z-index: 4;
    width: 450px;
    height: 100px;
    color: #87aeb5;
    font-size: 42px
}

.page7text2 {
    position: absolute;
    top: 730px;
    left: 470px;
    z-index: 4;
    width: 980px;
    height: 100px;
    color: #222;
    font-size: 22px
}

.page7img1 {
    top: 640px;
    left: 1530px;
    width: 224px;
    height: 231px
}

.page7img2 {
    top: 50px;
    left: 0;
    width: 8735px;
    height: 732px;
    background: url(../images/2.jpg);
    background-size: auto 732px;
    background-position-x: 0
}

.page7moveLeft {
    position: absolute;
    top: 50px;
    left: 0;
    width: 400px;
    height: 732px
}

.page7moveRight {
    position: absolute;
    top: 50px;
    right: 0;
    width: 400px;
    height: 732px
}

.pge7imgAll {
    position: relative;
    margin: auto;
    margin-top: 200px;
    width: 1624px;
    height: 592px
}

.page7imga {
    display: none
}

.page7imga1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 499px;
    height: 592px
}

.page7imga2 {
    position: absolute;
    top: 0;
    left: 330px;
    width: 499px;
    height: 592px
}

.page7imga3 {
    position: absolute;
    top: 0;
    left: 660px;
    width: 499px;
    height: 592px
}

.page7imga4 {
    position: absolute;
    top: 0;
    left: 990px;
    width: 499px;
    height: 592px
}

.page7imga5 {
    position: absolute;
    top: 0;
    left: 1320px;
    width: 499px;
    height: 592px
}

.page7imgContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.page7imgCotentC {
    position: absolute;
    top: 13px;
    left: 9px;
    display: none;
    overflow: hidden;
    width: 282px;
    height: 381px
}

.page7imgCotentC:hover .page7imgContent4 {
    top: 0
}

.page7imgCotentC:hover .page7imgContent2 {
    top: -100%
}

.page7imgContent2 {
    position: absolute;
    top: 0;
    -webkit-transition: top .25s;
    -moz-transition: top .25s;
    -o-transition: top .25s;
    transition: top .25s
}

.page7imgContent3 {
    position: absolute;
    z-index: 5
}

.page7imgContent4 {
    position: absolute;
    top: 100%;
    -webkit-transition: top .25s;
    -moz-transition: top .25s;
    -o-transition: top .25s;
    transition: top .25s
}

#page8 {
    z-index: 3;
    background: rgba(0,0,0,0.8)
}

.page8bg {
    position: relative;
    top: 1400px;
    margin: auto;
    width: 1320px;
    height: 980px;
    background: #FFF
}

.page8text {
    position: absolute;
    color: #96e6c2;
    font-size: 30px;
    cursor: pointer;
    -webkit-transition: transform .5s,color .5s;
    -moz-transition: transform .5s,color .5s;
    -o-transition: transform .5s,color .5s;
    transition: transform .5s,color .5s
}

.page8Content {
    display: none
}

.page8text1 {
    top: 100px;
    left: 250px;
    width: 200px;
    text-align: center
}

#page8 .activeText {
    display: block;
    color: #74dfb1;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -ms-transform: scale(1.5)
}

.page8text2 {
    top: 100px;
    left: 450px;
    width: 200px;
    text-align: center
}

.page8text3 {
    top: 100px;
    left: 650px;
    width: 150px;
    text-align: center
}

.page8text4 {
    top: 100px;
    left: 850px;
    width: 200px;
    text-align: center
}

.page8textContent {
    position: absolute;
    top: 250px;
    left: 100px;
    width: 589px;
    height: 447px;
    background: url(../images/2.png);
    background-size: cover
}

.page8text5 {
    margin-top: 70px;
    margin-left: 100px;
    height: 40px;
    color: #96e6c2;
    font-size: 38px
}

.page8text6 {
    margin-top: 40px;
    margin-left: 100px;
    color: #373737;
    font-size: 20px
}

.page8img1 {
    position: absolute;
    top: 180px;
    left: 740px;
    width: 500px
}

.page8img1 img {
    display: none
}

#page6 {
    z-index: 1;
    background: url(../images/bg1.jpg);
    background-size: cover;
    overflow:visible;
}

.page9img {
    position: absolute
}

.page9img1 {
    bottom: 50px;
    left: 100px;
    display: none;
    width: 100px;
    height: 100px
}

.page9img2 {
    top: 50px;
    left: 100px;
    display: none;
    width: 100px;
    height: 100px
}

.page9img3 {
    right: 100px;
    bottom: 50px;
    display: none;
    width: 100px;
    height: 100px
}

.page9img4 {
    top: 50px;
    right: 100px;
    display: none;
    width: 100px;
    height: 100px
}

.page9img5 {
    top: 255px;
    left: 755px;
    width: 366px;
    height: 366px;
    opacity: 0
}

.page9img6 {
    top: 406px;
    left: 805px;
    width: 274px;
    height: 74px;
    opacity: 0
}

.page9img7 {
    top: 670px;
    left: 780px;
    width: 311px;
    height: 41px;
    opacity: 0
}

.page9bgAll {
    z-index: 0;
    width: 1920px;
    height: 1080px;
    background: rgba(0,0,0,0.45)
}

.page9top {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 150px;
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0)))
}

.page9bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 150px;
    background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.5)))
}

.page9img11:hover {
    -webkit-filter: blur(8px)
}


#footer{
    width:100%;
    height:186px;
    background-color:#000;
    position:absolute;
    bottom:-186px;
    color:#FFF;
    text-align:center;
}