@charset "UTF-8";
/* CSS Document */
body{font:14px "Microsoft Yahei", arial,"Hiragino Sans GB",Tahoma,Arial,Helvetica,STHeiti;}
html, body { position:relative; height:100%; min-width:1000px; }
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,table,th,td,img,div,dl,dt,dd,fieldset,legend,input,textarea,select{margin:0;padding:0;border:none; box-sizing: border-box;}
ul,ol,li{ list-style:none; }
em{font-style: normal;}
img{vertical-align: middle; max-width:100%;}
table{border-collapse:collapse; border-spacing:0;}
.clearfix{*zoom:1;}
.clearfix:after{content: '';display: block;clear:both;}
button,input,select{border:none; background:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; outline: none;}
a{ cursor:pointer; text-decoration: none;}
.fl{float:left;}
.fr{ float:right;}
.mb10 { margin-bottom: 10px; }
.wrap{ width: 1100px; margin:0 auto; }
.none { display: none; }
.a1 { data-wow-delay: 0s; position: absolute; top: 0; left:80px; }
.a2 { data-wow-delay: 0.5s; position:absolute; top:50px; left:95px; }
.a3 { data-wow-delay:1s; position: absolute; top:590px; left:80px; }

/*头部*/
.top_bar { height:80px; padding:10px 0; background-color: #fff; position:fixed; top:0;  z-index: 9; width: 100%; }
.tb_right {line-height: 30px; padding-top:15px; }
.tb_right a { display: inline-block; margin-right:30px; color:#666; font-size:16px; }
.tb_right a:hover { color: #298dff; }
.tb_right .down_btn { padding: 0 22px; border:1px solid #298dff; border-radius:16px; }
.tb_right .down_btn:hover{ background-color: #298dff; color: #fff; }
.tb_right .qd_btn{padding-right:15px; position:relative; width:100px;}
.tb_right .qd_btn img{ display:none; width:100px; height:100px;border:1px solid #ddd;}
.qd_btn:hover img{ display:block; }

/*轮播*/
.swiper-container { width:100%; height:100%;}
.swiper-container .swiper-slide { position:relative; }
.swiper-container .swiper-pagination{right:30px;}
.swiper-container .swiper-pagination .swiper-pagination-bullet{width:12px; height:12px; background:#fff; opacity:0.4; margin:20px 0;}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active{opacity:1; }

/*第一部分*/
.page1 {background: url("../img/page1.jpg") no-repeat top center; background-size:cover;}
.page1 .p1_con {padding:0 32px; position:absolute; bottom: 0%; left:50%; transform: translate(-50%, 0); -webkit-ransform: translate(-50%, 0); z-index: 9; }
.page1 .p1_con .bottom {position:absolute; bottom:0; right:-120px; z-index:9;}
.page1 .p1_con .p1_left{width:450px; text-align: center;}
.page1 .p1_con .title{ margin-top:150px;}
.page1 .p1_con .download { margin-top:50px; }
.page1 .p1_con .download .erweima{ width:200px; height:200px; margin: 0 auto;}
.page1 .p1_con .download .xiazai{ width: 250px;}
.page1 .p1_con .download .xiazai img{padding-right: 10px;}
.page1 .p1_con .download .xiazai a{display:inline-block; margin-top:30px; color: #fff; font-size:20px; padding:10px 30px; border: 2px #fff solid; border-radius: 8px; font-weight: bold;}

/*第二部分*/
.page2 { background: url("../img/page2.png") no-repeat top center; background-size:cover; }
.page2 .p2_con {height:630px; padding:0 32px; position:absolute; top:50%; left:50%; margin-top:-275px; margin-left:-500px; z-index:9;}
.page2 .p2_con .p2_a1 { position: absolute; top:8%; left:500px; }
.page2 .p2_con .p2_a2 {position: absolute; top:40%; left:20px;}
.page2 .p2_con .p2_a3 { position: absolute; top:51%; left:74px; }
.page2 .p2_con .p2_a4 { position: absolute; top:70%; left:0; }
.page2 .p2_con .p2_a5 { position: absolute;top:80%; left:460px; }
.page2 .p2_con .p2_star { position: absolute; top:22%; left:440px; }
.page2 .p2_con .p2_phone { position: relative; width:480px; }
.page2 .p2_con .p2_main{ width:450px; }
.page2 .p2_con .p2_main .p2_text { position: relative;}
.page2 .p2_con .p2_main .p2_txt {position: absolute; top:80px; text-align: center;}
.page2 .p2_con .p2_main .p2_txt h3 {font-weight: bold; font-size: 50px; color: #c60200; line-height: 80px; }
.page2 .p2_con .p2_main .p2_txt p { font-size: 24px; line-height: 2em; color: #823800; margin-top:40px; text-align: justify;}

/*第三部分*/
.page3{ background: url("../img/page3.png") no-repeat top center; background-size: cover; }
.page3 .p3_con {height:630px; padding:0 32px; position: absolute; top: 50%; left: 50%; margin-top: -275px; margin-left: -500px; z-index: 9;}
.page3 .p3_a1 { position: absolute; top:2%; right:-20px; }
.page3 .p3_a2 { position: absolute; top:0%; left:0px;}
.page3 .p3_a3{ position:absolute; top:20%; right:0;}
.page3 .p3_star{ position: absolute; top:30%; right:60px;}
.page3 .p3_a4{ position:absolute; top:70%; right:0;}
.page3 .p3_a5{ position:absolute; top:80%; right:80px;}
.page3 .p3_a6{ position:absolute; top:50%; right:460px;}
.page3 .p3_a7{ position:absolute; top:40%; right:500px;}
.page3 .p3_big{ position:absolute; top:60%; left:120px;}
.page3 .p3_con .p3_phone {width:480px; position:relative;}
.page3 .p3_con .p3_main { position:relative;width:450px;}
.page3 .p3_con .p3_main .p3_text { position: relative;}
.page3 .p3_con .p3_main .p3_txt {position: absolute; top:80px; text-align: center;}
.page3 .p3_con .p3_main .p3_txt h3 {font-weight: bold; font-size: 50px; color: #fff; line-height: 80px; }
.page3 .p3_con .p3_main .p3_txt p { font-size: 24px; line-height: 2em; color: #fff; margin-top:40px; text-align: justify;}

/*第四部分*/
.page4 { background: url("../img/page4.png") no-repeat top center; background-size:cover; }
.page4 .p4_con {height:630px; padding:0 32px; position:absolute; top:50%; left:50%; margin-top:-275px; margin-left:-500px; z-index:9;}
.page4 .p4_con .p4_a1 { position: absolute; top:8%; left:500px; }
.page4 .p4_con .p4_a2 {position: absolute; top:40%; left:20px;}
.page4 .p4_con .p4_a3 { position: absolute; top:51%; left:74px; }
.page4 .p4_con .p4_a4 { position: absolute; top:70%; left:0; }
.page4 .p4_con .p4_a5 { position: absolute;top:80%; left:460px; }
.page4 .p4_con .p4_big{ position:absolute; top:60%; right:120px;}
.page4 .p4_con .p4_star { position: absolute; top:22%; left:440px; }
.page4 .p4_con .p4_phone { position: relative; width:480px; }
.page4 .p4_con .p4_main{ width:450px; }
.page4 .p4_con .p4_main .p4_text { position: relative;}
.page4 .p4_con .p4_main .p4_txt {position: absolute; top:80px; text-align: center;}
.page4 .p4_con .p4_main .p4_txt h3 {font-weight: bold; font-size: 50px; color: #fff82e; line-height: 80px; }
.page4 .p4_con .p4_main .p4_txt p { font-size: 24px; line-height: 2em; color: #fff; margin-top:40px; text-align: justify;}

@media only screen and (max-height:768px) {
    .top_bar { height:60px; padding:5px 0; }
    .tb_right {padding-top:10px; }
    .top_bar .logo{max-width:180px; margin-top: 5px;}
    .page1 .p1_con {width:1000px; position:absolute; bottom: 0; left:50%; transform: translate(-50%, 0); -webkit-ransform: translate(-50%, 0); z-index: 9; }
    .page1 .p1_con .p1_phone{ width:280px; position:absolute; bottom: 0; right:60px; }
    .page1 .p1_con .p1_left{ position:absolute; bottom:60px; left:60px; }

    .page2 .p2_con, .page3 .p3_con, .page4 .p4_con {width:1000px; height:550px; position:absolute; top:50%; left:50%; margin-top:-225px; margin-left:-500px; z-index:9;}
    .page2 .p2_con .p2_phone img,  .page3 .p3_con .p3_phone img,  .page4 .p4_con .p4_phone img{ width:70%;}
    .a2 {top:40px; left:90px;}
    .a3 {top:490px; left:50px;}
    .page2 .p2_con .p2_star{ left:380px; }
    .page3 .p3_con .p3_star{ right:400px; }
    .page3 .p3_con .p3_a6{ right:80px; }
    .page4 .p4_con .p4_star{ left:380px; }
    .page3 .p3_con .p3_phone .a1 { data-wow-delay: 0s; position: absolute; top: 0; left:150px; }
    .page3 .p3_con .p3_phone .a2 { data-wow-delay: 0.5s; position:absolute; top:40px; left:160px;; }
    .page3 .p3_con .p3_phone .a3 { data-wow-delay:1s; position: absolute; top:490px; left:130px; }
    .page2 .p2_con .p2_phone .p2_pic, .page3 .p3_con .p3_phone .p3_pic, .page4 .p4_con .p4_phone .p4_pic { width:46%;}
    .page2 .p2_con .p2_phone .p2_water,.page3 .p3_con .p3_phone .p3_water,.page4 .p4_con .p4_phone .p4_water{ width:60%;}
}

@media screen and (min-height: 650px) and (max-height: 768px){
    .page1 .p1_con .p1_phone{ width:330px; position:absolute; bottom: 0; right:60px; }
    .page1 .p1_con .p1_left{ position:absolute; bottom:120px; left:60px; }
}


    .zhuan{ animation:zhuan 4s infinite linear; -webkit-animation: zhuan 4s infinite linear; }
@keyframes zhuan {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);
    }
}
@-webkit-keyframes zhuan {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.shan {animation: shan 4s infinite linear; -webkit-animation: shan 4s infinite linear; }
@keyframes shan {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes shan {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}