@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:#5a5a5a;}
ul,ol{list-style:none; text-indent:0; list-style-position:outside;}
img{border:0;display:block;}
b{font-weight:normal}
/* link : style */
a{text-decoration:none;}
a:hover{text-decoration:none;}
/*clear*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}


.wrap{
    margin:0 auto;
    width:100%;
    max-width:1920px;
    min-width:1000px;
    overflow:hidden;
    position:relative;
}
.main{
    margin:0 auto;
    width:1000px;
    position:relative;
}
.header{
    top:0;
    left:50%;
    margin-left:-960px;
    width:1920px;
    height:100px;
    position:absolute;
    z-index:9999;
    background:#1b1b22;
    background:rgba(27,27,34,0.3);
}
.header .logo{
    margin-top:35px;
    margin-left:14px;
    float:left;
    width:116px;
    height:35px;
}
.header .logo-text{
    margin-left:8px;
    padding-left:8px;
    margin-top:44px;
    float:left;
    font-size:16px;
    color:#ffffff;
    line-height:24px;
    border-left:1px solid #ffffff;
}
.header .nav{
    margin-top:47px;
    margin-left:54px;
    float:left;
}
.header .nav > li{
    margin-right:20px;
    float:left;
}
.header .nav > li a{
    font-size:16px;
    line-height:16px;
    color:#ffffff;
    cursor:pointer;
}
.header .nav > li.first{
    padding-right:22px;
    cursor:pointer;
    background:url("../img/nav-tag.png") no-repeat right 2px;
}
.header .nav > li.first > a{
    color:#ff5554;
}
#navBtn{
    position:relative;
}
#navBtn ul{
    top:40px;
    left:50%;
    margin-left:-290px;
    padding:0 10px;
    width:580px;
    position:absolute;
    display:none;
    border-top:1px solid #ff5554;
    border-bottom:1px solid #ff5554;
    transition:0.4s;
}
#navBtn.act ul{
    display:block;
    transition:0.4s;
}
#navBtn ul span{
    top:-7px;
    left:50%;
    margin-left:-6px;
    width:12px;
    height:7px;
    display:block;
    position:absolute;
    background:url("../img/nav-jt.png") no-repeat center;
}
#navBtn ul li{
    margin:0 12px;
    float:left;
    line-height:30px;
}
#navBtn ul li a{
    font-size:16px;
    line-height:16px;
    color:#ffffff;
}
.header .phone{
    margin-top:46px;
    float:right;
    padding-left:25px;
    height:20px;
    font-size:16px;
    color:#ffffff;
    background:url("../img/phone.png") no-repeat left center;
}
.banner{
    width:100%;
    height:885px;
    position:relative;
}
.banner #banner{
    margin:0 auto;
    width:100%;
    height:885px;
}
.banner #banner .swiper-slide{
    width:1920px;
    height:885px;
    overflow:hidden;
    position:relative;
}
.banner #banner .img1{
    left:50%;
    margin-left:-960px;
    width:1920px;
    height:885px;
    position:absolute;
    background:url("../img/banner1-bg.jpg") no-repeat center top;
}
.banner #banner .img{
    left:50%;
    margin-left:-960px;
    width:1920px;
    height:800px;
    position:absolute;
}
.banner #banner .ls{
    bottom:0;
    left:0;
    width:775px;
    height:781px;
    position:absolute;
    background:url("../img/banner1-ls.png") no-repeat center;
    animation:5s ls infinite linear;
}
@keyframes ls {
    0%{left:0;bottom:20px;transform:scale(0.98);opacity:.9}
    25%{left:10px;bottom:0;transform:scale(1);opacity:1}
    50%{left:20px;bottom:20px;transform:scale(0.98);opacity:.9}
    75%{left:10px;bottom:40px;transform:scale(1);opacity:1}
    100%{left:0;bottom:20px;transform:scale(0.98);opacity:.9}
}
.banner #banner .lt{
    top:0;
    right:140px;
    position:absolute;
    animation:6s lt infinite ease;
}
@keyframes lt {
    10%{opacity:0;transform:rotate(0deg)}
    20%{opacity:1;transform:rotate(-5deg)}
    30%{opacity:0;transform:rotate(-10deg)}
    40%{opacity:1;transform:rotate(-15deg)}
    50%{opacity:0;transform:rotate(-20deg)}
    60%{opacity:1;transform:rotate(-25deg)}
    60%{opacity:0;transform:rotate(-30deg)}
    70%{opacity:1;transform:rotate(-35deg)}
    80%{opacity:0;transform:rotate(-40deg)}
    100%{opacity:0;transform:rotate(0deg)}
}
.banner #banner .gtx{
    top:130px;
    right:0;
    position:absolute;
    animation:5s gtx infinite linear;
}
@keyframes gtx {
    0%{right:0;top:150px;transform:scale(0.98);opacity:.6}
    25%{right:10px;top:130px;transform:scale(1);opacity:1}
    50%{right:20px;top:150px;transform:scale(0.98);opacity:.6}
    75%{right:10px;top:170px;transform:scale(1);opacity:1}
    100%{right:0;top:150px;transform:scale(0.98);opacity:.6}
}
.banner #banner .txt{
    top:270px;
    left:50%;
    margin-left:-384px;
    position:absolute;
    animation:4s txt infinite linear;
}
@keyframes txt {
    0%{transform:scale(0.98);opacity:.8}
    25%{transform:scale(1);opacity:1}
    50%{transform:scale(0.98);opacity:.8}
    75%{transform:scale(1);opacity:1}
    100%{transform:scale(0.98);opacity:.8}
}
.banner .pagination {
    width:100%;
    bottom:50px;
    z-index:99999;
    text-align:center;
    position: absolute;
}
.banner .swiper-pagination-switch {
    margin:0 5px;
    width:12px;
    height:12px;
    cursor:pointer;
    display:inline-block;
    background:#000000;
    border-radius:100%;
    transition:0.4s;
}
.banner .swiper-active-switch {
    width:12px;
    height:12px;
    background:#fb575f;
    transition:0.4s;
}
.part{
    margin:0 auto;
    width:100%;
    position:relative;
}
.part .title{
    padding:50px 0;
}
.part .title h2{
    font-size:42px;
    line-height:42px;
    font-weight:bold;
    text-align:center;
    color:#ffffff;
}
.part .title p{
    margin-top:26px;
    font-size:18px;
    line-height:18px;
    text-align:center;
    color:#ffffff;
}
.part .title img{
    margin:22px auto 0;
}
.p1{
    margin-top:-85px;
    height:1374px;
    position:relative;
    background:url("../img/p1-bg.jpg") no-repeat center;
}
.p1 .title{
    padding:92px 0 50px;
}
.p1 .line{
    margin-left:-966px;
    left:50%;
    position:absolute;
}
.p1 ul{
    margin-top:30px;
    margin-left:77px;
}
.p1 ul li{
    margin-right:8px;
    float:left;
    width:430px;
    height:280px;
    cursor:pointer;
    overflow:hidden;
    position:relative;
}
.p1 ul li.l1{
    background:url("../img/p1-img1.jpg") no-repeat center;
}
.p1 ul li.l2{
    background:url("../img/p1-img2.jpg") no-repeat center;
}
.p1 ul li .info{
    top:280px;
    width:430px;
    height:280px;
    position:absolute;
    background:url("../img/p1-ul-li-info.png") no-repeat center;
    transition:0.4s;
}
.p1 ul li:hover .info{
    top:0;
    transition:0.4s;
}
.p1 ul li .info p{
    margin-top:100px;
    font-size:18px;
    line-height:30px;
    text-align:center;
    color:#ffffff;
}
.p1 .box{
    margin-top:20px;
    margin-left:43px;
    width:936px;
    height:613px;
    overflow:hidden;
    position:relative;
    background:url("../img/p1-box.png") no-repeat;
}
.p1 .box .video{
    top:40px;
    left:51px;
    width:837px;
    height:522px;
    position:absolute;
    background:url("../img/p1-video.jpg") no-repeat center;
}
.p1 .box .video video{
    background:#000000;
}
.p1 h3{
    margin-top:-22px;
    font-size:16px;
    line-height:16px;
    color:#ffffff;
    text-align:center;
    background:url("../img/p1-tit.png") no-repeat center;
}
.part .link{
    margin:50px auto 0;
    width:242px;
    height:50px;
    line-height:50px;
    font-size:22px;
    color:#ffffff;
    text-align:center;
    display:block;
    background:url("../img/link.png") no-repeat center;
}
.part .link:hover{
    background:url("../img/link-act.png") no-repeat center;
    animation:1s link 1 ease;
}
@keyframes link {
    0%{background:url("../img/link.png") no-repeat center;}
    20%{background:url("../img/link-act.png") no-repeat center;}
    40%{background:url("../img/link.png") no-repeat center;}
    60%{background:url("../img/link-act.png") no-repeat center;}
    80%{background:url("../img/link.png") no-repeat center;}
    100%{background:url("../img/link-act.png") no-repeat center;}
}
.p2{
    height:1122px;
    position:relative;
    background:url("../img/p2-bg.jpg") no-repeat center;
}
.p2 .main{
    position:relative;
}
.p2 .line1{
    top:35px;
    left:328px;
    position:absolute;
}
.p2 .line2{
    top:35px;
    left:567px;
    position:absolute;
}
.p2 .main > ul{
    margin-left:212px;
}
.p2 .main > ul li{
    margin-right:123px;
    float:left;
    width:117px;
    height:136px;
    cursor:pointer;
    position:relative;
}
.p2 .main > ul li.l1{
    background:url("../img/p2-l1.png") no-repeat center;
}
.p2 .main > ul li.l2{
    background:url("../img/p2-l2.png") no-repeat center;
}
.p2 .main > ul li.l3{
    background:url("../img/p2-l3.png") no-repeat center;
}
.p2 .main > ul li span{
    top:-6px;
    left:-6px;
    width:59px;
    height:59px;
    display:block;
    position:absolute;
    animation:3s p2light infinite linear;
    background:url("../img/p2-light.png") no-repeat center;
}
@keyframes p2light {
    0%{top:-27px;left:30px;}
    16%{top:7px;left:-26px;}
    32%{top:72px;left:-26px;}
    48%{top:103px;left:30px;}
    64%{top:72px;left:86px;}
    80%{top:7px;left:86px;}
    100%{top:-27px;left:27px;}
}
.p2 .main > ul li h2{
    margin-top:160px;
    font-size:18px;
    line-height:18px;
    color:#ffffff;
    text-align:center;
    background:url("../img/p2-tit.png") no-repeat center;
}
.p2 .main > ul li p{
    left:50%;
    margin-left:-90px;
    margin-top:8px;
    font-size:18px;
    line-height:18px;
    text-align:center;
    width:180px;
    position:absolute;
    color:#ffffff;
}
.p2 .box{
    margin-top:114px;
    margin-left:105px;
    width:770px;
    height:470px;
    position:relative;
    background:#292945;
    overflow:hidden;
}
.p2 .box .img{
    top:34px;
    right:-40px;
    width:371px;
    height:401px;
    position:absolute;
    animation:1s p2Img infinite linear;
}
@keyframes p2Img {
    0%{opacity:1}
    50%{opacity:.7}
    100%{opacity:1}
}
.p2 .box .star{
    top:17px;
    left:23px;
    width:67px;
    height:13px;
    position:absolute;
}
.p2 .box .star{
    top:17px;
    left:23px;
    width:67px;
    height:13px;
    position:absolute;
}
.p2 .box ul{
    margin-top:66px;
    margin-left:77px;
    width:300px;
}
.p2 .box ul li{
    float:left;
    cursor:pointer;
    transition:0.4s;
}
.p2 .box ul li.tit{
    margin-bottom:26px;
}
.p2 .box ul li.tit h2{
    padding-left:43px;
    line-height:32px;
    font-size:24px;
    font-weight:bold;
    color:#f04666;
}
.p2 .box ul li.tit.t1 h2{
    background:url("../img/p2-tag1.png") no-repeat;
}
.p2 .box ul li.tit.t2 h2{
    background:url("../img/p2-tag2.png") no-repeat;
}
.p2 .box ul li.tit.t1{
    margin-left:5px;
    width:145px;
}
.p2 .box ul li.tit.t2{
    margin-left:35px;
    width:100px;
}
.p2 .box ul li.li{
    margin-bottom:20px;
    margin-right:8px;
    height:38px;
    font-size:18px;
    color:#ffffff;
    text-align:center;
    line-height:38px;
    background:#444467;
    border-radius:4px;
}
.p2 .box ul li.li.l1{
    width:150px;
}
.p2 .box ul li.li.l2{
    width:125px;
}
.p2 .box ul li.li:hover{
    background:#34a0ff;
    background:linear-gradient(to top right, #34a0ff , #08e6ff);
    transition:0.4s;
}
.p2 .box .line{
    top:430px;
    left:77px;
    width:280px;
    height:1px;
    position:absolute;
    background:#494e77;
}
.p2 .box .line span{
    top:-2px;
    left:0;
    width:30px;
    height:5px;
    display:block;
    position:absolute;
    background:#09e4ff;
    animation:3s p2Span infinite linear;
}
@keyframes p2Span {
    0%{left:0;}
    50%{left:250px;}
    100%{left:0;}
}
.p3{
    height:954px;
    background:url("../img/p3-bg.jpg") no-repeat center;
}
.p3 .box{
    margin:-22px auto 0;
    width:891px;
    height:605px;
    position:relative;
    background:url("../img/p3-img.png") no-repeat center;
}
.p3 .box .tag{
    top:123px;
    left:222px;
    position:absolute;
    animation:2s p3Tag ease infinite;
}
@keyframes p3Tag {
    0%{opacity:1}
    20%{opacity:0}
    40%{opacity:1}
}
.p3 .link{
    margin:21px auto 0;
}
.p4{
    height:978px;
    background:url("../img/p4-bg.jpg") no-repeat center;
}
.p4 .box{
    margin:0 auto;
    width:931px;
    height:576px;
    position:relative;
    background:url("../img/p4-box.png") no-repeat center;
}
.p4 .box .video{
    top:55px;
    left:24px;
    width:881px;
    height:479px;
    position:absolute;
    background:url("../img/p4-img.jpg") no-repeat center;
}
.p4 .box span{
    bottom:-2px;
    left:411px;
    width:110px;
    height:6px;
    display:block;
    position:absolute;
    animation:4s p4Span ease infinite;
    background:#f04666;
    border-radius:3px;
}
@keyframes p4Span {
    0%{left:311px}
    50%{left:511px;}
    100%{left:311px;}
}
.p5{
    height:981px;
    background:url("../img/p5-bg.jpg") no-repeat center;
}
.p5 .box{
    margin:0 auto;
    width:840px;
    height:574px;
    position:relative;
    background:url("../img/p5-box.jpg") no-repeat center;
}
.p5 .box .p5-ul{
    top:120px;
    left:-110px;
    position:absolute;
}
.p5 .box .p5-ul li{
    width:268px;
    height:68px;
    overflow:hidden;
    cursor:pointer;
    border-bottom:1px solid #5c6396;
    transition:0.4s;
}
.p5 .box .p5-ul li.act{
    transition:0.4s;
}
.p5 .box .p5-ul li.l1{
    background:url("../img/p5-tag1.png") no-repeat 18px center #272a43;
}
.p5 .box .p5-ul li.l1.act{
    background:url("../img/p5-tag1-act.png") no-repeat 18px center #09e4ff;
}
.p5 .box .p5-ul li.l2{
    background:url("../img/p5-tag2.png") no-repeat 18px center #272a43;
}
.p5 .box .p5-ul li.l2.act{
    background:url("../img/p5-tag2-act.png") no-repeat 18px center #09e4ff;
}
.p5 .box .p5-ul li.l3{
    background:url("../img/p5-tag3.png") no-repeat 18px center #272a43;
}
.p5 .box .p5-ul li.l3.act{
    background:url("../img/p5-tag3-act.png") no-repeat 18px center #09e4ff;
}
.p5 .box .p5-ul li.l4{
    background:url("../img/p5-tag4.png") no-repeat 18px center #272a43;
    border-bottom:none;
}
.p5 .box .p5-ul li.l4.act{
    background:url("../img/p5-tag1-act.png") no-repeat 18px center #09e4ff;
}
.p5 .box .p5-ul li p{
    margin-left:70px;
    margin-top:10px;
    font-size:18px;
    line-height:22px;
    color:#ffffff;
}
.p5 .box .p5-ul li p span{
    font-size:16px;
    color:#5c6396;
}
.p5 .box .p5-ul li.act p span{
    font-size:16px;
    color:#ffffff;
}
.p5 .box .p5-tab{
    top:62px;
    left:0;
    width:840px;
    height:454px;
    overflow:hidden;
    position:absolute;
}
.p5 .box .p5-tab > div{
    top:454px;
    left:0;
    width:840px;
    height:454px;
    position:absolute;
    transition:0.4s;
}
.p5 .box .p5-tab > div.act{
    top:0;
    transition:0.4s;
}
.p5 .box .p5-tab .d1{
    background:url("../img/p5-img1.jpg") no-repeat center;
}
.p5 .box .p5-tab .d2{
    background:url("../img/p5-img2.jpg") no-repeat center;
}
.p5 .box .p5-tab .d3{
    background:url("../img/p5-img3.jpg") no-repeat center;
}
.p5 .box .p5-tab .d4{
    background:url("../img/p5-img4.jpg") no-repeat center;
}
.p5 .box .p5-tab .info{
    top:190px;
    left:515px;
    width:300px;
    position:absolute;
}
.p5 .box .p5-tab .info h2{
    margin-top:5px;
    font-size:16px;
    line-height:16px;
    color:#09e4ff;
    text-indent:10px;
}
.p5 .box .p5-tab .info p{
    margin-top:3px;
    padding-left:10px;
    font-size:14px;
    line-height:24px;
    color:#ffffff;
    background:url("../img/p5-dian.png") no-repeat left center;
}
.p6{
    height:1011px;
    background:url("../img/p6-bg.jpg") no-repeat center;
}
.p6 .main{
    position:relative;
}
.p6 .box{
    width:519px;
    height:582px;
    position:relative;
    background:url("../img/p6-box.png") no-repeat center;
}
.p6 .box .md{
    top:-40px;
    left:40px;
    position:absolute;
    animation:3s md infinite linear;
}
@keyframes md {
    0%{left:30px;top:-50px;transform:scale(0.98);}
    25%{left:40px;top:-60px;transform:scale(1);}
    50%{left:50px;top:-50px;transform:scale(0.98);}
    75%{left:40px;top:-40px;transform:scale(1);}
    100%{left:30px;top:-50px;transform:scale(0.98);}
}
.p6 .box ul li{
    width:96px;
    height:96px;
    cursor:pointer;
    position:absolute;
    border-radius:100%;
    transition:0.4s;
}
.p6 .box ul li.l1{
    top:60px;
    left:40px;
}
.p6 .box ul li.l2{
    top:172px;
    left:-20px;
}
.p6 .box ul li.l3{
    top:292px;
    left:-5px;
}
.p6 .box ul li.l4{
    top:55px;
    left:370px;
}
.p6 .box ul li.l5{
    top:170px;
    left:435px;
}
.p6 .box ul li.act{
    background:#202233;
}
.p6 .box ul li.l1.act{
    box-shadow:0 0 10px 1px #d291ff;
    transition:0.4s;
}
.p6 .box ul li.l2.act{
    box-shadow:0 0 10px 1px #838cff;
    transition:0.4s;
}
.p6 .box ul li.l3.act{
    box-shadow:0 0 10px 1px #ee255a;
    transition:0.4s;
}
.p6 .box ul li.l4.act{
    box-shadow:0 0 10px 1px #09e3fe;
    transition:0.4s;
}
.p6 .box ul li.l5.act{
    box-shadow:0 0 10px 1px #fb50f9;
    transition:0.4s;
}
.p6 .p6-tab{
    top:80px;
    right:0;
    width:474px;
    height:366px;
    position:absolute;
    overflow:hidden;
    border-radius:3px;
}
.p6 .p6-tab > div{
    top:366px;
    left:79px;
    width:395px;
    height:366px;
    position:absolute;
    background:url("../img/p6-tab-tag.png") no-repeat 177px 332px #252946;
    transition:0.2s;
}
.p6 .p6-tab > div.act{
    top:0;
    transition:0.4s;
}
.p6 .p6-tab > div h2{
    margin-top:38px;
    margin-left:45px;
    padding-bottom:15px;
    font-size:28px;
    line-height:28px;
    position:relative;
    display:inline-block;
    border-bottom:1px solid #ffffff;
}
.p6 .p6-tab > div.b1 h2{
    color:#d291ff;
}
.p6 .p6-tab > div.b2 h2{
    color:#838cff;
}
.p6 .p6-tab > div.b3 h2{
    color:#ee255a;
}
.p6 .p6-tab > div.b4 h2{
    color:#09e3fe;
}
.p6 .p6-tab > div.b5 h2{
    color:#fb50f9;
}
.p6 .p6-tab > div h2 span.sp1{
    top:12px;
    left:-124px;
    width:107px;
    height:1px;
    display:block;
    position: absolute;
}
.p6 .p6-tab > div.b1 h2 span.sp1{
    background:#d291ff;
}
.p6 .p6-tab > div.b2 h2 span.sp1{
    background:#838cff;
}
.p6 .p6-tab > div.b3 h2 span.sp1{
    background:#ee255a;
}
.p6 .p6-tab > div.b4 h2 span.sp1{
    background:#09e3fe;
}
.p6 .p6-tab > div.b5 h2 span.sp1{
    background:#fb50f9;
}
.p6 .p6-tab > div h2 span.sp2{
    bottom:-2px;
    left:50%;
    margin-left:-16px;
    width:33px;
    height:3px;
    display:block;
    position: absolute;
    background:#f04666;
}
.p6 .p6-tab > div p{
    margin-top:33px;
    margin-left:50px;
    font-size:16px;
    line-height:40px;
    color:#ffffff;
    width:300px;
}
.p6 .link{
    margin:0 0 0 -121px;
    left:50%;
    bottom:-120px;
    position:absolute;
}
.p7{
    height:980px;
    background:url("../img/p7-bg.jpg") no-repeat center;
}
.p7 .text{
    top:50px;
    left:380px;
    position:absolute;
}
.p7 .box{
    margin:0 auto;
    width:952px;
    height:556px;
    position:relative;
    background:url("../img/p7-box.png") no-repeat center;
}
.p7 .box ul.tit{
    top:-20px;
    left:12px;
    width:350px;
    height:600px;
    overflow:hidden;
    position:absolute;
}
.p7 .box ul.tit li{
    top:600px;
    left:0;
    width:350px;
    height:600px;
    position:absolute;
    transition:0.4s;
}
.p7 .box ul.tit li.act{
    top:0;
    transition:0.4s;
}
.p7 .box ul.tit li span{
    top:0;
    right:0;
    width:46px;
    height:46px;
    color:#ffffff;
    font-size:21px;
    line-height:46px;
    text-align:center;
    display:block;
    position:absolute;
    background:#f04666;
}
.p7 .txt{
    top:97px;
    left:424px;
    width:410px;
    height:380px;
    overflow:hidden;
    position:absolute;
}
.p7 .txt > div{
    top:0;
    left:420px;
    width:410px;
    height:380px;
    position:absolute;
    transition:0.2s;
}
.p7 .txt > div.act{
    left:0;
    transition:0.4s;
}
.p7 .txt h2{
    margin-bottom:100px;
    font-size:26px;
    line-height:26px;
    color:#ffffff;
    position:relative;
}
.p7 .txt h2 span{
    top:42px;
    left:0;
    width:46px;
    height:3px;
    display:block;
    position:absolute;
    background:#f04666;
}
.p7 .txt h3{
    padding-bottom:9px;
    font-size:20px;
    line-height:20px;
    color:#09e4ff;
    display:inline-block;
    border-bottom:1px solid #09e4ff;
}
.p7 .txt p{
    margin-top:8px;
    margin-bottom:20px;
    font-size:15px;
    line-height:26px;
    color:#ffffff;
}
.p7 .btn{
    top:-20px;
    right:38px;
    cursor:pointer;
    position:absolute;
}
.p7 .btn li{
    margin-bottom:10px;
    width:70px;
    height:73px;
    position:relative;
    overflow:hidden;
}
.p7 .btn li.l1{
    background:url("../img/p7-tag1.jpg") no-repeat center;
}
.p7 .btn li.l2{
    background:url("../img/p7-tag2.jpg") no-repeat center;
}
.p7 .btn li.l3{
    background:url("../img/p7-tag3.jpg") no-repeat center;
}
.p7 .btn li.l4{
    background:url("../img/p7-tag4.jpg") no-repeat center;
}
.p7 .btn li.l5{
    background:url("../img/p7-tag5.jpg") no-repeat center;
}
.p7 .btn li.l6{
    background:url("../img/p7-tag6.jpg") no-repeat center;
}
.p7 .btn li div{
    top:0;
    left:0;
    width:70px;
    height:73px;
    position:absolute;
    background:rgba(64,69,83,0.5);
}
.p7 .btn li.act div{
    top:73px;
}
.p7 .link{
    margin:80px auto 0;
}
.p8{
    height:881px;
    background:url("../img/p8-bg.jpg") no-repeat center;
}
.p8 .box{
    margin:0 auto;
    width:979px;
    height:489px;
    position:relative;
    background:url("../img/p8-box.png") no-repeat center;
}
.p8 .box ul li{
    top:-200px;
    cursor:pointer;
    overflow:hidden;
    position:absolute;
    border:1px solid rgba(0,0,0,0);
}
.p8 .box ul li.l1{
    top:29px;
    left:21px;
}
.p8 .box ul li.l2{
    top:29px;
    left:315px;
}
.p8 .box ul li.l3{
    top:29px;
    left:560px;
}
.p8 .box ul li.l4{
    top:29px;
    left:741px;
}
.p8 .box ul li.l5{
    top:131px;
    left:560px;
}
.p8 .box ul li.l6{
    top:131px;
    left:741px;
}
.p8 .box ul li.l7{
    top:232px;
    left:741px;
}
.p8 .box ul li.l8{
    top:232px;
    left:21px;
}
.p8 .box ul li.l9{
    top:331px;
    left:21px;
}
.p8 .box ul li.l10{
    top:232px;
    left:198px;
}
.p8 .box ul li.l11{
    top:330px;
    left:560px;
}
.p8 .box ul li > div{
    top:100%;
    left:0;
    width:100%;
    height:100%;
    position:absolute;
    background:rgba(9,228,255,0.2);
    transition:0.4s;
}
.p8 .box ul li:hover{
    border:1px solid #09e4ff;
}
.p8 .box ul li:hover > div{
    top:0;
    transition:0.4s;
}
.p9{
    height:783px;
    background:url("../img/p9-bg.jpg") no-repeat center;
}
.p9 ul{
    margin-left:35px;
    width:1100px;
}
.p9 ul li{
    margin-right:33px;
    float:left;
    width:164px;
    height:315px;
    cursor:pointer;
    overflow:hidden;
    position:relative;
    background:url("../img/p9-li1.png") no-repeat center;
}
.p9 ul li.l1{
    background:url("../img/p9-li1.png") no-repeat center;
}
.p9 ul li.l2{
    margin-top:50px;
    background:url("../img/p9-li2.png") no-repeat center;
}
.p9 ul li.l3{
    background:url("../img/p9-li3.png") no-repeat center;
}
.p9 ul li.l4{
    margin-top:50px;
    background:url("../img/p9-li4.png") no-repeat center;
}
.p9 ul li.l5{
    background:url("../img/p9-li5.png") no-repeat center;
}
.p9 ul li .info{
    top:315px;
    left:0;
    width:164px;
    height:315px;
    overflow:hidden;
    position:absolute;
    background:#34a2fe;
    background:linear-gradient(to right top,#34a2fe,#0ed6f5);
    transition:0.4s;
}
.p9 ul li.act .info{
    top:0;
    position:absolute;
    transition:0.4s;
}
.p9 ul li .info .txt{
    margin:7px auto;
    width:148px;
    height:300px;
    border:1px solid #ffffff;
}
.p9 ul li .info .txt h2{
    margin-bottom:30px;
    margin-top:28px;
    font-size:22px;
    line-height:22px;
    text-align:center;
    color:#242639;
    position:relative;
}
.p9 ul li .info .txt h2 span{
    left:50%;
    margin-left:-12px;
    bottom:-14px;
    width:24px;
    height:3px;
    display:block;
    position:absolute;
    background:#242639;
}
.p9 ul li .info .txt p{
    margin:0 auto 5px;
    padding-bottom:8px;
    font-size:16px;
    width:120px;
    color:#ffffff;
    line-height:16px;
    text-align:center;
    border-bottom:1px solid #ffffff;
}
.p10{
    height:651px;
    background:url("../img/p10-bg.jpg") no-repeat center;
}
.p10 .main{
    position:relative;
}
.p10 .box{
    margin-left:77px;
    float:left;
    width:504px;
    height:334px;
    position:relative;
    background:url("../img/p10-box.png") no-repeat center;
}
.p10 .box .img{
    top:21px;
    left:22px;
    width:428px;
    height:275px;
    overflow:hidden;
    position:absolute;
}
.p10 .box .img img{
    top:0;
    left:428px;
    position:absolute;
    transition:0.2s;
}
.p10 .box .img img.act{
    left:0;
    transition:0.4s;
}
.p10 .info{
    margin-top:64px;
    margin-left:24px;
    float:left;
    width:340px;
    height:170px;
    position:relative;
    overflow:hidden;
}
.p10 .info > div{
    top:0;
    left:-350px;
    width:340px;
    height:170px;
    position:absolute;
    transition:0.2s;
}
.p10 .info > div.act{
    left:0;
    transition:0.4s;
}
.p10 .info h2{
    font-size:24px;
    line-height:24px;
    color:#09e4ff;
}
.p10 .info span{
    margin-top:20px;
    width:49px;
    height:3px;
    display:block;
    background:#f7365a;
}
.p10 .info p{
    margin-top:28px;
    font-size:18px;
    line-height:34px;
    color:#ffffff;
}
.p10 .btn{
    bottom:0;
    right:0;
    position:absolute;
}
.p10 .btn li{
    float:left;
    font-size:18px;
    line-height:18px;
    color:#494e77;
    cursor:pointer;
}
.p10 .btn li span{
    padding:0 5px;
    color:#494e77
}
.p10 .btn li.act{
    color:#09e4ff;
}
.p10 .link{
    margin:0 auto;
    top:250px;
    right:130px;
    position:absolute;
}
.table{
    bottom:0;
    left:50%;
    margin-left:-960px;
    width:1920px;
    height:80px;
    z-index:9999;
    position:fixed;
    background:url("../img/table-bg.jpg") no-repeat center;
}
.table .main{
    position:relative;
}
.table .tit{
    left:-50px;
    top:-135px;
    position:absolute;
}
.table form{
    margin-top:20px;
    margin-left:185px;
}
.table form input{
    float:left;
}
.table form input[type="text"]{
    margin-right:5px;
    padding:0 20px 0 40px;
    width:90px;
    height:38px;
    color:#ffffff;
    line-height:38px;
    background:none;
    border:1px solid #ffffff;
}
.table form input[type="text"].name{
    background:url("../img/table-tag1.png") no-repeat 10px center;
}
.table form input[type="text"].phone{
    background:url("../img/table-tag2.png") no-repeat 10px center;
}
.table form input[type="text"].code{
    width:120px;
    background:url("../img/table-tag3.png") no-repeat 10px center;
}
.table .yzm{
    float:left;
    margin-right:5px;
    position:relative;
}
.table #getcode{
    top:5px;
    right:0;
    width:90px;
    color:#ffffff;
    text-align:center;
    line-height:28px;
    position:absolute;
    border-left:1px solid #ffffff;
}
.table form input[type="submit"]{
    width:134px;
    height:36px;
    line-height:36px;
    font-size:21px;
    color:#ffffff;
    cursor:pointer;
    background:#f62a51;
    border:none;
    border-radius:18px;
}
input::-webkit-input-placeholder {
    color:#ffffff;
}
.footer{
    padding-bottom:80px;
    background:#242f3f;
}
.footer p{
    font-size:14px;
    color:#ffffff;
    line-height:80px;
    text-align:center;
}