@charset "utf-8";
html{
    margin:0px;
    padding:0px;
    z-index:1;
    overflow-x:hidden;
    height:100%;
    }
    
body{
    margin:0 auto;  
    padding:0px; 
    font-size:12px; 
    font-family:arial,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
    background:#fff;
    z-index:99;
    height:100%;
    width:100%;
    color:#231815;
    }
    
a{
    font-size:12px; 
    text-decoration:none;
    }
    
a:hover{
    font-size:12px; 
    color:#a30000;
    text-decoration:none;
    }
    
p{
    padding:0px; 
    margin:0px;
    }
    
h1,h2,h3,h4,h5,h6{
    margin:0px;
    padding:0px; 
    font-weight:normal;
    }
    
dl,dt,dd,ul,li{
    margin:0px; 
    padding:0px; 
    list-style-type:none;
    text-decoration:none;
    }
    
input{
    outline:none;
    }
    
img{
    border:0px; 
    margin:0px; 
    padding:0px;
    }
em{
    font-style:normal;
    }
tr{
    _border-top:1px solid #bfbfbf;
    _border-bottom:1px solid #bfbfbf;
}
h1,h2,h3,h4,h5,h6,b{ font-weight: normal;}
/*正式*/
div[class^='page']{ width:100%; display: inline-block;}

.box{ width:980px; margin:0 auto; position:relative;}
.page1 .box{ width:980px; height:680px;background:url(/templets/default/images/newimg/HD850-1.jpg) no-repeat center center; background-size:cover;}

.page1 .box .txt h2{ font-size: 47px; margin:40px 0 20px 0; opacity:0;}
.page1 .box .txt p{ font-size: 24px; color:#4c4c4c; opacity:0;}
.page1 .box .cp{ position:absolute; left:75px; bottom:180px; text-align: center; font-size: 'Adobe 黑体 Std';}
.page1 .box .cp h3{  font-size: 23px; margin:5px;}
.page1 .box .cp p{ font-size: 15px; color:#666;}

.page2 {  height:650px; background:url(/templets/default/images/newimg/HD850-2.jpg) no-repeat center center; background-size:cover;}
.page2 .box .txt{ color:#fff;}
.page2 .box .txt h2{ font-size: 47px; margin: 70px 0 10px 0;opacity:0;}
.page2 .box .txt h3{ font-size: 27px;opacity:0;}
.page2 .box .txt h3 span{ font-size: 110px; border:3px solid #fff; width:220px;  display:inline-block; box-sizing: border-box; text-align: center;}
.page2 .box .txt p{ font-size: 24px; line-height: 36px; margin-top: 20px;opacity:0;}

.page3 {  height:985px; background:url(/templets/default/images/newimg/HD850-3.1.jpg) no-repeat center center; position:relative;}
.page3 .txt1{ position:absolute; top:60px; left:0;}
.page3 .txt2{ position:absolute; top:630px; left:0;}
.page3 .box .wz{ float: left; text-align:left;} 

.page3 .box h2{ font-size: 47px; line-height: 60px; opacity:0;}
.page3 .box .txt1 h2{ margin-bottom: 20px;}
.page3 .box p{ font-size: 20px; line-height: 34px; opacity:0;}
.page3 .box .txt2 h2{ margin: 70px 0 20px 0; opacity:0;}
.page3 .box .bw{ position:absolute; left:40%; display:inline-block; top:-50px;}
.page3 .box .bw li{position:absolute; top:413px; left:-115px; opacity:0; }
.page3 .box .bw .li02{top:455px; left:-82px;}
.page3 .box .bw .li03{top:499px; left:-56px;}
.page3 .box .bw .li04{top:539px; left:-31px;}

.page4 ul{ margin:0px auto 100px; height:312px; width:980px;  border-top:1px solid #666; padding-top:20px; }
.page4 ul li{ float: left; width:312px; margin-right:22px; cursor:pointer; transition: all 2s;}
.page4 ul .myli{ margin-right: 0;}
.page4 ul li .tu{ width:312px; height:253px; overflow:hidden;}
.page4 ul li p{ height:100px;background:#e2e2e2; color:#3e3a39; text-align: center; border-top: 1px solid #fff; font-size: 18px; padding-top: 35px; line-height: 30px;}

.page5{ height:700px; background:url(/templets/default/images/newimg/HD850-5.jpg) no-repeat center center; background-size:cover; position:relative;}
.page5 .box .txt{ position:absolute; top:140px; right:0;}
.page5 .box .txt h2{ font-size: 47px; opacity:0;}
.page5 .box .txt p{ font-size: 27px; opacity:0;}
.page5 .box .txt span{ position:absolute; top:-30px; left:19px; display:none;}

.page6{ height:200px; width:100%; background:#f8f8f8; margin-top: -3px;}
.page6 h3{ text-align: center; font-size: 18px; margin:70px 0 10px 0; color:#4d4d4d;}
.page6 a{ font-size: 30px; color:#999; text-align: center; display:block;}


.sf{ animation:sf 2s;-webkit-animation:sf 3s; animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;}
@-webkit-keyframes sf {
    0% { }
    100% { -webkit-transform:scale(1.5,1.5); }
}

@keyframes sf {
    0% {}
    100% { transform:scale(1.5,1.5); }
    
}
.sf1{ animation:sf1 2s;-webkit-animation:sf1 3s;}
@-webkit-keyframes sf1 {
    0% { -webkit-transform:scale(1.5,1.5);}
    100% { -webkit-transform:scale(1,1); }
}

@keyframes sf1 {
    0% { transform:scale(1.5,1.5);}
    100% { transform:scale(1,1); }
    
}

.pt-page-moveFromBottomFade {
    -webkit-animation: moveFromBottomFade 2.5s ease both;
    animation: moveFromBottomFade 2.5s ease both;
     
}


.pt-page-moveFromBottomFade1 {
    -webkit-animation: moveFromBottomFade 3.5s ease both;
    animation: moveFromBottomFade 3.5s ease both;
    
}
.pt-page-moveFromBottomFade2 {
    -webkit-animation: moveFromBottomFade 4.5s ease both;
    animation: moveFromBottomFade 4.5s ease both;
     
}

@-webkit-keyframes moveFromBottomFade {
    from { opacity: 0; -webkit-transform: translateY(100%); }
}
    to{opacity: 1; }
@keyframes moveFromBottomFade {
    from { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); }
    to{opacity: 1; }
}

@-webkit-keyframes moveFromBottomFade-1 {
    from { opacity: 0; -webkit-transform: translateY(200%); }
}
    to{opacity: 1; }
@keyframes moveFromBottomFade-1 {
    from { opacity: 0; -webkit-transform: translateY(200%); transform: translateY(200%); }
    to{opacity: 1; }
}
.pt-page-flipInRight {
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animation: flipInRight 2.5s both ease-out;
	animation: flipInRight 2.5s both ease-out;
}
	

@-webkit-keyframes flipInRight {
	from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipInRight {
	from { -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}


.bw1{  animation: shuibo 1s ease 0s infinite alternate;  -webkit-animation: shuibo 1s ease 0s infinite alternate; } 

@-webkit-keyframes shuibo {
    0% { -webkit-transform: scale(0,0); opacity:0;}
	50% { -webkit-transform: scale(1,1); opacity:0.5;}
    100% {  -webkit-transform: scale(1.02,1);opacity:1;}
}

} 
@keyframes shuibo {
    0% { transform: scale(0,0);opacity:0;}
	50% { -webkit-transform: scale(1,1); opacity:0.5;}
    100% {  transform: scale(1.02,1);opacity:1;}
}