@charset "utf-8";
/* CSS Document */
/* common */
body,div,h1,h2,h3,h4,h5,h6,dl,dd,dt,p,a,form,select,input,ul,ol,li{margin:0; padding:0; text-indent:0; font-weight:normal;font-size:14px; font-family:'Microsoft YaHei', sans-serif;color:#000000;}
ul,ol{list-style:none; text-indent:0; list-style-position:outside;}
img{border:0;display:block;}
b{font-weight:normal}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
/* link : style */
a{text-decoration:none;}
a:hover{text-decoration:none;}
/*clear*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
body{
    overflow-x:hidden;
}
.main{
    margin:0 auto;
    width:1024px;
}
.wrap{
    margin:0 auto;
    width:100%;
    max-width:1920px;
    min-width:1024px;
    overflow:hidden;
    position:relative;
}
.header{
    top:0;
    left:50%;
    margin-left:-960px;
    width:1920px;
    height:140px;
    z-index:9999;
    position:absolute;
}
.header > .main{
    position:relative;
}
.header .phone{
    float:right;
    margin-top:13px;
    padding-left:34px;
    height:25px;
    color:#ffffff;
    font-size:18px;
    line-height:25px;
    background:url("../img/phone.png") no-repeat left center;
}
.header .box{
    top:50px;
    left:50%;
    margin-left:-964.5px;
    padding-top:1px;
    width:1929px;
    height:88px;
    position:absolute;
    background:url("../img/header-bg.png") no-repeat center;
}
.header .box .logo{
    margin-top:20px;
    float:left;
}
.header .box .logo-text{
    margin-top:20px;
    margin-left:20px;
    float:left;
    font-size:18px;
    line-height:38px;
    color:#ffffff;
}
.header .box .nav{
    float:right;
    line-height:80px;
    height:80px;
}
.header .box .nav li{
    margin-left:30px;
    float:left;
    height:80px;
    line-height:80px;
    text-align:center;
    position:relative;
}
.header .box .nav li.act span{
    margin-left:-20px;
    top:0;
    left:50%;
    width:40px;
    height:1px;
    display:block;
    position:absolute;
    background:#00fff2;
}
.header .box .nav li a{
    font-size:18px;
    color:#ffffff;
}
.banner{
    width:100%;
    height:700px;
    position:relative;
}
.banner #banner{
    margin:0 auto;
    width:100%;
    height:700px;
}
.banner #banner .img{
    width:100%;
    height:700px;
}
.banner #banner .img.i1{
    position:relative;
    background:url("../img/banner1.jpg") no-repeat center;
}
.banner #banner .img.i1 .txt{
    top:245px;
    left:50%;
    margin-left:-365px;
    width:730px;
    height:212px;
    position:absolute;
    animation:1s i1txt linear infinite;
}
@keyframes i1txt{
    0%{opacity:1}
    50%{opacity:0.5}
    100%{opacity:1}
}
.banner #banner .img.i1 .btn{
    bottom:90px;
    left:50%;
    margin-left:-170px;
    width:340px;
    height:94px;
    position:absolute;
    animation:1s i1btn linear infinite;
}
@keyframes i1btn{
    0%{transform:rotate(5deg) scale(1);}
    25%{transform:scale(0.9)}
    50%{transform:rotate(-5deg) scale(1);}
    75%{transform:scale(0.9)}
    100%{transform:rotate(5deg) scale(1);}
}
.banner #banner .img.i2{
    position:relative;
    background:url("../img/banner2.jpg") no-repeat center;
}
.banner #banner .img.i2 .txt{
     top:222px;
     left:50%;
     margin-left:-330px;
     width:660px;
     height:311px;
     position:absolute;
     animation:1s i2txt linear infinite;
 }
@keyframes i2txt{
    0%{transform:rotate(-2deg) scale(0.95);}
    25%{transform:scale(1)}
    50%{transform:rotate(2deg) scale(0.95);}
    75%{transform:scale(1)}
    100%{transform:rotate(-2deg) scale(0.95);}
}
.banner #banner .img.i2 .btn{
    bottom:90px;
    left:50%;
    margin-left:-210px;
    width:420px;
    height:40px;
    position:absolute;
}
.banner #banner .img.i2 .b1{
    bottom:90px;
    left:50%;
    margin-left:-303px;
    width:93px;
    height:38px;
    position:absolute;
    animation:1s i2b1 linear infinite;
    background:url("../img/banner2-b1.png") no-repeat center:
}
@keyframes i2b1{
    0%{ background:url("../img/banner2-b1.png")  repeat 0;}
    100%{ background:url("../img/banner2-b1.png")  repeat 93px;}
}
.banner #banner .img.i2 .b2{
    bottom:90px;
    left:50%;
    margin-left:210px;
    width:91px;
    height:48px;
    position:absolute;
    animation:1s i2b2 linear infinite;
    background:url("../img/banner2-b2.png") no-repeat center:
}
@keyframes i2b2{
    0%{ background:url("../img/banner2-b2.png")  repeat 0;}
    100%{ background:url("../img/banner2-b2.png")  repeat 91px;}
}
.banner .pagination {
    width:100%;
    bottom:40px;
    z-index:99999;
    text-align:center;
    position: absolute;
}
.banner .swiper-pagination-switch {
    margin:0 5px;
    width:16px;
    height:6px;
    cursor:pointer;
    display:inline-block;
    background:#ffffff;
    border-radius:3px;
    transition:0.4s;
}
.banner .swiper-active-switch {
    width:30px;
    height:6px;
    background:#00fff2;
    transition:0.4s;
}
.part .title{
    padding:50px 0;
}
.part .title h2{
    margin:0 auto;
    width:1024px;
    font-size:48px;
    color:#00fff2;
    line-height:48px;
    text-align:center;
    background:url("../img/title.png") no-repeat 70px center;
}
.part .title.t2 h2{
    margin:0 auto;
    width:1024px;
    font-size:48px;
    color:#00fff2;
    line-height:48px;
    text-align:center;
    background:url("../img/title2.png") no-repeat 10px center;
}
.part .title p{
    margin-top:18px;
    font-size:24px;
    color:#ffffff;
    line-height:24px;
    text-align:center;
}
.part .link{
    margin:50px auto 0;
    width:305px;
    height:55px;
    font-size:30px;
    display:block;
    color:#ffffff;
    line-height:55px;
    text-align:center;
    background:url("../img/link.jpg") repeat 0;
    border-radius:5px;
    transition:1s;
}
.part .link:hover{
    background:url("../img/link.jpg") repeat 305px;
    transition:1s;
}
.p1{
    padding-bottom:30px;
    background:#1f1d32;
}
.p1 .box{
    margin-left:47px;
    float:left;
    width:910px;
    height:520px;
    position:relative;
    background:url("../img/p1-box.png") no-repeat center;
}
.p1 .box h2{
    margin-top:70px;
    margin-left:64px;
    width:213px;
    height:38px;
    font-size:20px;
    color:#ffffff;
    line-height:38px;
    text-align:center;
    border:1px solid #00fff2;
}
.p1 .box h2 span{
    font-size:24px;
    color:#00fff2;
}
.p1 .box p{
    margin-top:55px;
    margin-left:64px;
    font-size:20px;
    color:#ffffff;
    line-height:36px;
}
.p1 .box p span{
    font-size:24px;
    color:#00fff2;
}
.p1 .box a.btn{
    margin-top:54px;
    margin-left:64px;
    width:195px;
    height:45px;
    line-height:45px;
    color:#ffffff;
    display:block;
    font-weight:bold;
    font-size:20px;
    text-align:center;
    animation:2s link1 linear infinite;
    background:url("../img/p1-btn.png") no-repeat center;
    border-radius:5px;
}
@keyframes link1{
    0%{ background:url("../img/p1-btn2.jpg")  repeat 0;}
    100%{ background:url("../img/p1-btn2.jpg")  repeat 195px;}
}
.p1 .box .video{
    top:53px;
    right:-20px;
    width:445px;
    height:414px;
    cursor:pointer;
    position:absolute;
    overflow:hidden;
    background:url("../img/p1-img.jpg") no-repeat;
}
.p1 .box .video .info{
    left:0;
    bottom:0;
    width:100%;
    height:40px;
    position:absolute;
    overflow:hidden;
    background:#000000;
    background:rgba(0,0,0,0.4);
}
.p1 .box .video .info h3{
    margin-top:10px;
    margin-left:20px;
    padding-left:20px;
    font-size:18px;
    line-height:20px;
    color:#ffffff;
    border-left:2px solid #00fff2;
}
.p1 .box .video .light1{
    bottom:-250px;
    right:-250px;
    width:455px;
    height:455px;
    position:absolute;
    animation:4s ease-in-out infinite light1;
}
@keyframes light1{
    0%{bottom:-300px;right:-300px;opacity:0}
    50%{bottom:200px;right:-290px;opacity:1}
    100%{bottom:-300px;right:-300px;opacity:0}
}
.p1 .box .video .light2{
    top:-250px;
    left:-250px;
    width:455px;
    height:455px;
    position:absolute;
    animation:4s ease-in-out infinite light2;
}
@keyframes light2{
    0%{top:-300px;left:-300px;opacity:0}
    50%{top:200px;left:-290px;opacity:1}
    100%{top:-300px;left:-300px;opacity:0}
}
.p1 .box #video{
    top:50%;
    left:50%;
    margin-top:-288px;
    margin-left:-360px;
    width:720px;
    height:540px;
    position:fixed;
    z-index:99999;
    display:none;
    background:#000000;
}
.p1 .box #close{
    top:0;
    right:-50px;
    width:50px;
    height:100px;
    text-align:center;
    line-height:50px;
    font-size:30px;
    color:#00fff2;
    cursor:pointer;
    position:absolute;
    background:#1f1d32;
}
.p2{
    height:790px;
    background:url("../img/p2-bg.jpg") no-repeat center;
    animation:10s p2bg linear infinite;
}
.p2 .main{
    padding-bottom:50px;
}
.p2 ul{
    width:1200px;
    height:400px;
}
.p2 ul li{
    margin-right:60px;
    float:left;
    width:300px;
    height:400px;
    overflow:hidden;
    position:relative;
}
.p2 ul li.l1{
    background:url("../img/p2-img1.jpg") no-repeat center;
    animation:1s p2l1 linear infinite;
}
@keyframes p2l1{
    0%{margin-top:0;}
    50%{margin-top:-10px;}
    100%{margin-top:0;}
}
.p2 ul li.l2{
    background:url("../img/p2-img2.jpg") no-repeat center;
    animation:1s p2l2 linear infinite;
}
@keyframes p2l2{
    0%{margin-top:-10px;}
    50%{margin-top:0;}
    100%{margin-top:-10px;}
}
.p2 ul li.l3{
    background:url("../img/p2-img3.jpg") no-repeat center;
    animation:1s p2l3 linear infinite;
}
@keyframes p2l3{
    0%{margin-top:0;}
    50%{margin-top:-10px;}
    100%{margin-top:0;}
}
.p2 ul li p{
    margin-top:210px;
    margin-left:28px;
    font-size:14px;
    color:#ffffff;
    line-height:20px;
}
.p2 ul li p span{
    font-size:18px;
    color:#00fff2;
}
.p2 ul li h3{
    left:0;
    bottom:30px;
    width:160px;
    height:40px;
    color:#ffffff;
    font-size:24px;
    line-height:40px;
    text-align:center;
    position:absolute;
    border-radius:0 5px 5px 0;
}
.p2 ul li.l1 h3{
    background:#46d0d7;
}
.p2 ul li.l2 h3{
    background:#6893de;
}
.p2 ul li.l3 h3{
    background:#915be8;
}
.p3{
    height:940px;
    background:url("../img/p3-bg.jpg") repeat center;
    /*animation:10s p3bg linear infinite;*/
}
@keyframes p3bg{
    0%{background:url("../img/p3-bg.jpg") repeat center 0;}
    100%{background:url("../img/p3-bg.jpg") repeat center 940px;}
}
.p3 .btn{
    margin-left:74px;
}
.p3 .btn li{
    padding-top:10px;
    float:left;
    width:292px;
    height:70px;
    cursor:pointer;
    transition:0.4s;
}
.p3 .btn li h2{
    margin:0 auto;
    width:200px;
    height:50px;
    font-size:30px;
    color:#ffffff;
    line-height:50px;
    text-align:center;
    background:#292945;
    transition:0.4s;
}
.p3 .btn li p{
    margin-top:7px;
    font-size:16px;
    color:#ffffff;
    text-align:center;
    transition:0.4s;
}
.p3 .btn li p span{
    color:#00fff2;
}
.p3 .btn li.act{
    background:url("../img/p3-act.png") no-repeat center top;
    transition:0.4s;
}
.p3 .btn li.act h2{
    background:none;
    transition:0.4s;
}
.p3 .btn li.act p{
    display:none;
    transition:0.4s;
}
.p3 .btn li.first.act p{
    margin-top:7px;
    text-indent:45px;
    font-size:16px;
    color:#ffffff;
    text-align:left;
    display:block;
    transition:0.4s;
}
.p3 .box{
    margin-top:50px;
    width:1024px;
    height:500px;
    overflow:hidden;
    position:relative;
}
.p3 .box > div{
    top:500px;
    left:0;
    width:1024px;
    height:500px;
    position:absolute;
    transition:0.4s;
}
.p3 .box > div.act{
    top:0;
    transition:0.8s;
}
.p3 .box .b1 ul{
    width:1200px;
}
.p3 .box .b1 ul li{
    margin-top:20px;
    margin-right:19px;
    float:left;
    width:242px;
    height:187px;
    overflow:hidden;
    background:url("../img/p3-b1-li.png") no-repeat center;
}
.p3 .box .b1 ul li h2{
    margin-top:90px;
    font-size:32px;
    line-height:32px;
    text-align:center;
    color:#ffffff;
}
.p3 .box .b1 ul li h2 span{
    font-size:22px;
}
.p3 .box .b1 ul li p{
    margin-top:6px;
    font-size:22px;
    line-height:22px;
    text-align:center;
    color:#00fff2;
}
.p3 .box .b1 h3{
    margin-top:25px;
    font-size:14px;
    line-height:24px;
    color:#ffffff;
    width:1024px;
    text-align:center;
}
.p3 .box .b2{
    background:url("../img/p3-b2-img.png") no-repeat center 91px;
}
.p3 .box .b2 .txt1{
    top:238px;
    left:50%;
    margin-left:-194.5px;
    width:389px;
    height:89px;
    position:absolute;
    background:url("../img/p3-b2-txt1.png") no-repeat center;
}
.p3 .box .b2 .txt1 p{
    margin-top:18px;
    color:#ffffff;
    font-size:16px;
    line-height:24px;
    text-align:center;
}
.p3 .box .b2 .txt2{
    top:-2px;
    left:50%;
    margin-left:-118px;
    width:236px;
    height:123px;
    position:absolute;
    background:url("../img/p3-b2-txt2.png") no-repeat center;
}
.p3 .box .b2 .txt2 h2{
    margin-top:8px;
    margin-left:20px;
    color:#00fff2;
    font-size:16px;
    line-height:24px;
}
.p3 .box .b2 .txt2 p{
    margin-top:2px;
    margin-left:20px;
    color:#ffffff;
    font-size:14px;
    line-height:16px;
}
.p3 .box .b2 .txt3{
    top:182px;
    right:10px;
    width:284px;
    height:76px;
    position:absolute;
    background:url("../img/p3-b2-txt3.png") no-repeat center;
}
.p3 .box .b2 .txt3 h2{
    margin-top:8px;
    margin-left:68px;
    color:#00fff2;
    font-size:16px;
    line-height:24px;
}
.p3 .box .b2 .txt3 p{
    margin-top:2px;
    margin-left:68px;
    color:#ffffff;
    font-size:14px;
    line-height:16px;
}
.p3 .box .b2 .txt4{
    top:260px;
    left:10px;
    width:284px;
    height:76px;
    position:absolute;
    background:url("../img/p3-b2-txt4.png") no-repeat center;
}
.p3 .box .b2 .txt4 h2{
    margin-top:8px;
    margin-left:20px;
    color:#00fff2;
    font-size:16px;
    line-height:24px;
}
.p3 .box .b2 .txt4 p{
    margin-top:2px;
    margin-left:20px;
    color:#ffffff;
    font-size:14px;
    line-height:16px;
}
.p3 .box .b2 .txt5{
    bottom:10px;
    left:255px;
    width:277px;
    height:76px;
    position:absolute;
    background:url("../img/p3-b2-txt5.png") no-repeat center;
}
.p3 .box .b2 .txt5 h2{
    margin-top:8px;
    margin-left:20px;
    color:#00fff2;
    font-size:16px;
    line-height:24px;
}
.p3 .box .b2 .txt5 p{
    margin-top:2px;
    margin-left:20px;
    color:#ffffff;
    font-size:14px;
    line-height:16px;
}
.p3 .box .b3{
    background:url("../img/p3-b3-img.png") no-repeat center top;
}
.p3 .box .b3 h2{
    top:280px;
    right:20px;
    font-size:18px;
    line-height:28px;
    color:#ffffff;
    position:absolute;
}
.p3 .box .b3 h2 span{
    font-size:24px;
    color:#00fff2;
}
.p3 .box .b3 p{
    top:380px;
    right:35px;
    font-size:14px;
    line-height:14px;
    color:#ffffff;
    position:absolute;
}
.p3 .link{
    margin:25px auto 0;
}
.p4{
    height:953px;
    background:url("../img/p4-bg.jpg") repeat center;
    animation:10s p4bg linear infinite;
}
@keyframes p4bg{
    0%{background:url("../img/p4-bg2.jpg") repeat 0;}
    100%{background:url("../img/p4-bg2.jpg") repeat -1920px;}
}
.p4 ul{
    margin-left:58px;
    height:700px;
    overflow:hidden;
    position:relative;
}
.p4 ul li{
    margin-right:55px;
    margin-bottom:44px;
    float:left;
    width:425px;
    height:306px;
    position:absolute;
}
.p4 ul li.l1{
    top:0;
    left:0;
    background:url("../img/p4-l1.png") no-repeat center;
    /*animation:20s p4l1 linear infinite;*/
}
@keyframes p4l1{
    0%{top:0;left:0;}
    10%{top:0;left:480px;}
    40%{top:0;left:480px;}
    50%{top:0;left:0;}
}
.p4 ul li.l2{
    top:0;
    left:480px;
    background:url("../img/p4-l2.png") no-repeat center;
    /*animation:20s p4l2 linear infinite;*/
}
@keyframes p4l2{
    0%{top:0;left:480px;}
    10%{top:350px;left:480px;}
    40%{top:350px;left:480px;}
    50%{top:0;left:480px;}
}
.p4 ul li.l3{
    top:350px;
    left:0;
    background:url("../img/p4-l3.png") no-repeat center;
    /*animation:20s p4l3 linear infinite;*/
}
@keyframes p4l3{
    0%{top:350px;left:0;}
    10%{top:0;left:0;}
    40%{top:0;left:0;}
    50%{top:350px;left:0;}
}
.p4 ul li.l4{
    top:350px;
    left:480px;
    background:url("../img/p4-l4.png") no-repeat center;
    /*animation:20s p4l4 linear infinite;*/
}
@keyframes p4l4{
    0%{top:350px;left:480px;}
    10%{top:350px;left:0;}
    40%{top:350px;left:0;}
    50%{top:350px;left:480px;}
}
.p4 .link{
    margin:0 auto;
}
.p4 ul li h2{
    top:58px;
    left:186px;
    font-size:24px;
    color:#ffffff;
    line-height:30px;
    position:absolute;
}
.p4 ul li.l1 h2 span{
    color:#00fff2;
}
.p4 ul li.l2 h2 span{
    color:#915be8;
}
.p4 ul li.l3 h2 span{
    color:#6893de;
}
.p4 ul li.l4 h2 span{
    color:#c55198;
}
.p4 ul li p{
    top:180px;
    left:55px;
    font-size:20px;
    color:#ffffff;
    line-height:24px;
    position:absolute;
}
.p5{
    height:810px;
    background:url("../img/p5-bg.jpg") repeat center;
    animation:10s p5bg linear infinite;
}
@keyframes p5bg{
    0%{background:url("../img/p5-bg2.jpg") repeat 0;}
    100%{background:url("../img/p5-bg2.jpg") repeat 2880px;}
}
.p5 .mbp{
    margin-left:154px;
    float:left;
    width:869px;
    height:468px;
    position:relative;
    background:url("../img/p5-mbp.png") no-repeat center;
}
.p5 .mbp .tag{
    top:12px;
    left:-82px;
    width:284px;
    height:395px;
    position:absolute;
    overflow:hidden;
    background:url("../img/p5-tag.png") no-repeat center;
}
.p5 .mbp .tag h3{
    margin-top:80px;
    font-size:18px;
    line-height:32px;
    text-align:center;
    color:#ffffff;
}
.p5 .mbp .tag h3 span{
    font-size:24px;
    color:#6b98e6;
}
.p5 .mbp .tag h2{
    margin:16px auto 0;
    font-size:30px;
    line-height:73px;
    color:#00fff2;
    width:190px;
    text-align:center;
    border-top:1px solid #2a283d;
    border-bottom:1px solid #2a283d;
}
.p5 .mbp .tag h4{
    margin:24px auto 0;
    font-size:24px;
    line-height:24px;
    color:#ffffff;
    text-align:center;
}
.p5 .mbp .tag h5{
    margin:24px auto 0;
    text-align:center;
    width:120px;
    height:40px;
    font-size:30px;
    color:#ffffff;
    line-height:40px;
    display:block;
    background:url("../img/p5-line.png") no-repeat center;
}
.p5 .mbp .box{
    margin-top:50px;
    margin-left:212px;
}
.p5 .mbp .box .tit li{
    float:left;
    font-size:24px;
    line-height:24px;
    color:#ffffff;
}
.p5 .mbp .box .tit li.l1{
    margin-right:65px;
}
.p5 .mbp .box .tit li.l2{
    margin-right:80px;
}
.p5 .mbp .box .tit li.l3{
    margin-right:50px;
}
.p5 .mbp .box .table{
    margin-top:12px;
    height:306px;
    overflow:hidden;
    position:relative;
}
.p5 .mbp .box .table ul li{
    float:left;
    font-size:16px;
    line-height:34px;
    color:#ffffff;
}
.p5 .mbp .box .table ul li.l1{
    margin-right:40px;
    width:50px;
}
.p5 .mbp .box .table ul li.l2{
    margin-right:45px;
    width:150px;
}
.p5 .mbp .box .table ul li.l3{
    margin-right:50px;
    width:70px;
}
.p5 .mbp .box .table .move1{
    top:0;
    left:0;
    position:absolute;
    animation:10s move1 linear infinite;
}
@keyframes move1{
    0%{top:0}
    100%{top:-408px;}
}
.p5 .mbp .box .table .move2{
    top:408px;
    left:0;
    position:absolute;
    animation:10s move2 linear infinite;
}
@keyframes move2{
    0%{top:408px;}
    100%{top:0;}
}
.p6{
    height:749px;
    background:url("../img/p6-bg.jpg") repeat center;
    /*animation:10s p6bg linear infinite;*/
}
@keyframes p6bg{
    0%{background:url("../img/p6-bg.jpg") repeat 0;}
    100%{background:url("../img/p6-bg.jpg") repeat 0 749px;}
}
.p6 ul{
    height:520px;
    position:relative;
}
.p6 ul li{
    position:absolute;
}
.p6 ul li.l1{
    top:80px;
    left:0;
    width:466px;
    height:210px;
    overflow:hidden;
    background:url("../img/p6-l1.png") no-repeat center;
    animation:1s p6l1 ease-in-out infinite;
}
@keyframes p6l1{
    0%{top:80px;}
    50%{top:75px;}
    100%{top:80px;}
}
.p6 ul li.l2{
    top:0;
    left:440px;
    width:466px;
    height:210px;
    overflow:hidden;
    background:url("../img/p6-l2.png") no-repeat center;
    animation:1s p6l2 ease-in-out infinite;
}
@keyframes p6l2{
    0%{top:0;}
    50%{top:5px;}
    100%{top:0;}
}
.p6 ul li.l3{
    top:300px;
    left:120px;
    width:466px;
    height:210px;
    overflow:hidden;
    background:url("../img/p6-l3.png") no-repeat center;
    animation:1s p6l3 ease-in-out infinite;
}
@keyframes p6l3{
    0%{top:300px;}
    50%{top:305px;}
    100%{top:300px;}
}
.p6 ul li.l4{
    top:240px;
    left:570px;
    width:466px;
    height:210px;
    overflow:hidden;
    background:url("../img/p6-l4.png") no-repeat center;
    animation:1s p6l4 ease-in-out infinite;
}
@keyframes p6l4{
    0%{top:240px;}
    50%{top:235px;}
    100%{top:240px;}
}
.p6 ul li h2{
    margin-top:48px;
    margin-left:58px;
    font-size:30px;
    line-height:30px;
}
.p6 ul li.l1 h2{
    color:#00fff2;
}
.p6 ul li.l2 h2{
    color:#915be8;
}
.p6 ul li.l3 h2{
    color:#6893de;
}
.p6 ul li.l4 h2{
    color:#c55198;
}
.p6 ul li p{
    margin-top:20px;
    margin-left:58px;
    font-size:16px;
    line-height:34px;
    color:#ffffff;
}
.p6 ul li a{
    margin-top:46px;
    margin-left:58px;
    width:120px;
    height:40px;
    line-height:40px;
    font-size:20px;
    color:#ffffff;
    text-align:center;
    display:block;
    background:url("../img/p6-btn.png") no-repeat center;
}
.p6 ul li:hover p{
    display:none;
}
.p6 ul li:hover a{
    margin-top:36px;
    background:url("../img/p6-btn.png") no-repeat center;
    animation:1s p6a linear infinite;
    transition:0.4s;
}
@keyframes p6a{
    0%{opacity:1;}
    50%{opacity:0.7;}
    100%{opacity:1;}
}
.p7{
    height:840px;
    background:url("../img/p7-bg.jpg") repeat center;
    animation:1s p7bg linear infinite;
}
@keyframes p7bg{
    0%{opacity:1}
    50%{opacity:0.95}
    100%{opacity:1}
}
.p7 .page{
    margin:0 auto;
    width:818px;
    height:516px;
    position:relative;
    background:url("../img/p7-page.png") no-repeat center;
}
.p7 .page .btn{
    top:150px;
    left:40px;
    position:absolute;
}
.p7 .page .btn li{
    margin-bottom:20px;
    width:170px;
    height:35px;
    line-height:35px;
    color:#ffffff;
    font-size:18px;
    cursor:pointer;
    text-align:center;
    overflow:hidden;
    background:url("../img/p7-jt.png") no-repeat 160px center #6893de;
    transition:0.4s;
}
.p7 .page .btn li.big{
    padding:8px 0;
    height:auto;
    line-height:22px;
}
.p7 .page .btn li.act{
    background:url("../img/p7-jt.png") no-repeat 160px center #907bfc;
    transition:0.4s;
}
.p7 .page .box{
    top:92px;
    left:304px;
    width:460px;
    height:400px;
    overflow:hidden;
    position:absolute;
}
.p7 .page .box > div{
    top:400px;
    position:absolute;
    transition:0.2s;
}
.p7 .page .box > div.act{
    top:0;
    transition:0.4s;
}
.p7 .page .box h2{
    width:128px;
    height:33px;
    font-size:24px;
    color:#ffffff;
    text-align:center;
    line-height:33px;
    border:1px solid #00fff2;
}
.p7 .page .box .info{
    margin-top:18px;
    height:195px;
}
.p7 .page .box .info ul{
    float:left;
    width:230px;
}
.p7 .page .box .info ul li{
    padding-left:18px;
    font-size:18px;
    line-height:24px;
    color:#ffffff;
}
.p7 .page .box p{
    padding-left:18px;
    margin-top:22px;
    line-height:24px;
    font-size:18px;
    color:#ffffff;
}
.p8{
    height:821px;
    position:relative;
    background:url("../img/p8-bg.jpg") no-repeat center;
}
.p8 .th{
    top:494px;
    left:0;
    width:799px;
    height:114px;
    position:absolute;
    animation:10s th linear infinite;
}
@keyframes th{
    0%{left:-799px;}
    100%{left:1920px;}
}
.p8 .box{
    height:480px;
    position:relative;
    overflow:hidden;
}
.p8 .box > div{
    left:0;
    top:480px;
    height:480px;
    position:absolute;
    transition:0.4s;
}
.p8 .box > div.act{
    top:0;
    transition:0.8s;
}
.p8 .box > div .img{
    top:0;
    left:92px;
    width:240px;
    height:440px;
    position:absolute;
    border:5px solid #00fff2;
}
.p8 .box .img img{
    top:25px;
    left:25px;
    position:absolute;
}
.p8 .box .info{
    top:60px;
    left:470px;
    position:absolute;
}
.p8 .box .info h2{
    margin-left:15px;
    width:430px;
    font-size:30px;
    line-height:30px;
    font-weight:bold;
    color:#00fff2;
}
.p8 .box .info h2 span{
    margin-left:22px;
    font-size:24px;
    color:#ffffff;
}
.p8 .box .info .txt{
    margin-top:20px;
    width:465px;
    height:330px;
    overflow:hidden;
    background:url("../img/p8-txt.png") no-repeat center;
}
.p8 .box .info .txt p{
    margin-top:92px;
    margin-left:45px;
    color:#ffffff;
    font-size:16px;
    line-height:30px;
}
.p8 .btn{
    top:245px;
    left:50%;
    margin-left:340px;
    width:60px;
    height:30px;
    position:absolute;
}
.p8 .btn .b1{
    float:left;
    width:10px;
    height:30px;
    cursor:pointer;
    background:url("../img/p8-btn1.jpg") no-repeat;
}
.p8 .btn .b2{
    float:right;
    width:10px;
    height:30px;
    cursor:pointer;
    background:url("../img/p8-btn2.jpg") no-repeat;
}
.p8 .btn p{
    float:left;
    width:40px;
    font-size:18px;
    color:#ffffff;
    text-align:center;
    line-height:30px;
}
.p9{
    padding-bottom:50px;
    background:#1f1d32;
}
.p9 .btn{
    margin-top:28px;
    margin-left:30px;
}
.p9 .btn li{
    float:left;
    width:240px;
    height:50px;
    font-size:24px;
    color:#ffffff;
    text-align:center;
    line-height:60px;
    position:relative;
    cursor:pointer;
    background:#1f1e31;
    border:1px solid #333357;
    border-radius:5px 5px 0 0;
    transition:0.4s;
}
.p9 .btn li.act{
    background:#292944;
    border:1px solid #30395b;
    transition:0.4s;
}
.p9 .btn li img{
    top:-28px;
    left:50%;
    position:absolute;
}
.p9 .btn li.l1 img{
    margin-left:-20px;
}
.p9 .btn li.l2 img{
    margin-left:-14px;
}
.p9 .btn li.l3 img{
    margin-left:-19px;
}
.p9 .btn li.l4 img{
    margin-left:-18px;
}
.p9 .box{
    margin-left:30px;
    width:968px;
    height:445px;
    position:relative;
    overflow:hidden;
    background:url("../img/p9-img.jpg") no-repeat #181827;
}
.p9 .box > div{
    top:0;
    right:-482px;
    width:482px;
    height:445px;
    position:absolute;
    transition:0.4s;
}
.p9 .box > div.act{
    right:0;
    transition:0.8s;
}
.p9 .box > div h2{
    margin-left:15px;
    margin-top:50px;
    padding:0 0 8px 8px;
    width:120px;
    color:#ffffff;
    font-size:24px;
    line-height:24px;
    background:url("../img/p9-line2.png") no-repeat left top;
}
.p9 .box > div p{
    margin-left:25px;
    margin-top:10px;
    font-size:16px;
    line-height:36px;
    color:#ffffff;
}
.p10{
    padding-bottom:50px;
    background:#181727;
}
.p10 .main{
    height:700px;
    position:relative;
    background:url("../img/p10-bg.jpg") no-repeat center;
}
.p10 .main > div{
    overflow:hidden;
}
.p10 .main .b1{
    top:70px;
    left:42px;
    width:300px;
    height:245px;
    position:absolute;
    background:url("../img/p10-img1.jpg") no-repeat center;
}
.p10 .main .b2{
    top:70px;
    left:362px;
    width:300px;
    height:245px;
    position:absolute;
    background:url("../img/p10-img2.jpg") no-repeat center;
}
.p10 .main .b3{
    top:335px;
    left:42px;
    width:620px;
    height:235px;
    position:absolute;
    background:url("../img/p10-img3.jpg") no-repeat center;
}
.p10 .main .b4{
    top:70px;
    left:682px;
    width:300px;
    height:500px;
    position:absolute;
    background:url("../img/p10-img4.jpg") no-repeat center;
}
.p10 .main > div h2{
    margin-top:20px;
    width:145px;
    height:35px;
    font-size:20px;
    font-weight:bold;
    line-height:35px;
    text-align:center;
    color:#ffffff;
    border-radius:0 5px 5px 0;
    transition:0.8s;
}
.p10 .main > div.b1 h2{
    background:#907bfc;
}
.p10 .main > div.b2 h2{
    background:#c55198;
}
.p10 .main > div.b3 h2{
    background:#6993df;
}
.p10 .main > div.b4 h2{
    background:#47d0d7;
}
.p10 .main .info1{
    top:50%;
    left:50%;
    margin-left:-135px;
    margin-top:-100px;
    width:0;
    height:0;
    position:absolute;
    overflow:hidden;
    background:url("../img/p10-info1.png") no-repeat;
    transition:0.4s;
}
.p10 .main > div:hover h2{
    margin-top:-35px;
    transition:0.2s;
}
.p10 .main > div:hover .info1{
    width:270px;
    height:200px;
    transition:0.4s;
}
.p10 .main .info1 p{
    margin-top:50px;
    font-size:18px;
    line-height:24px;
    color:#ffffff;
    width:270px;
    text-align:center;
}
.p10 .main .info1 h3{
    margin-top:70px;
    font-size:18px;
    line-height:24px;
    color:#ffffff;
    width:270px;
    text-align:center;
}
.p10 .main .info2{
    top:50%;
    left:50%;
    margin-left:-235px;
    margin-top:-75px;
    width:0;
    height:0;
    position:absolute;
    overflow:hidden;
    background:url("../img/p10-info2.png") no-repeat;
    transition:0.4s;
}
.p10 .main > div:hover .info2{
    width:470px;
    height:150px;
    transition:0.4s;
}
.p10 .main .info2 p{
    margin-top:40px;
    font-size:18px;
    line-height:24px;
    color:#ffffff;
    text-align:center;
}
.p10 .main .info3{
    top:50%;
    left:50%;
    margin-left:-110px;
    margin-top:-135px;
    width:0;
    height:0;
    overflow:hidden;
    position:absolute;
    background:url("../img/p10-info3.png") no-repeat;
    transition:0.4s;
}
.p10 .main > div:hover .info3{
    width:220px;
    height:270px;
    transition:0.4s;
}
.p10 .main .info3 p{
    margin-top:100px;
    font-size:18px;
    line-height:24px;
    color:#ffffff;
    text-align:center;
}
.footer{
    padding-bottom:80px;
    width:100%;
    height:50px;
    line-height:50px;
    color:#ffffff;
    text-align:center;
    background:#000000;
}
#table{
    left:0;
    bottom:0;
    padding:20px 0;
    width:100%;
    z-index:9999;
    position:fixed;
    background:#292945;
}
#table .main{
    position:relative;
}
#table .main .img{
    top:-168px;
    left:-136px;
    width:272px;
    height:248px;
}
#table img{
    left:100px;
    position:absolute;
}
#table input[type="text"]{
    margin-right:10px;
    padding:0 20px 0 40px;
    float:left;
    width:100px;
    height:38px;
    color:#ffffff;
    background:none;
    border:1px solid #16ebf4;
    border-image:linear-gradient(to right,#16ebf4,#9e6ffd) 1 10;
}
#table input[type="text"].name{
    margin-left:150px;
    background:url("../img/table-tag1.png") no-repeat 10px center;
}
#table input[type="text"].phone{
    background:url("../img/table-tag2.png") no-repeat 10px center;
}
#table input[type="text"].code{
    background:url("../img/table-tag3.png") no-repeat 10px center;
}
#table .wm{
    margin-right:10px;
    float:left;
    width:160px;
    height:40px;
    position:relative;
}
#table .wm #getcode{
    top:5px;
    right:4px;
    padding-left:5px;
    line-height:28px;
    font-size:12px;
    color:#00fff2;
    cursor:pointer;
    position:absolute;
    border-left:1px solid #00fff2;
}
#table input[type="submit"]{
    margin-right:10px;
    float:left;
    width:150px;
    height:40px;
    line-height:40px;
    font-size:24px;
    color:#ffffff;
    cursor:pointer;
    text-align:center;
    font-weight:bold;
    background:#16ebf4;
    background:linear-gradient(to right,#16ebf4,#9e6ffd);
    border:none;
    border-radius:18px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color:#ffffff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#ffffff;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color:#ffffff;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color:#ffffff;
}
#top{
    left:50px;
    top:-79px;
    width:66px;
    height:49px;
    cursor:pointer;
    position:absolute;
    z-index:9999;
    background:url("../img/top.png") no-repeat center #000000;
    border-radius:20px 20px 0 0;
}


#time span{
    width:28px;
    height:28px;
    display:block;
    border:1px solid #00fff2;
}