@charset "utf-8";

body{font-family:"微软雅黑";color:#8e8e8e;font-size:16px;padding:0;margin:0}
.icon{background:url(../images/icon.png) no-repeat;display:inline-block;}
a{cursor:pointer;text-decoration:none;color:#2980d7}
a:hover{color:#f08300}
ul{margin:0;padding:0;}
li{list-style:none;}
img{border:none}
p{font-size:20px;color:#333333;margin:5px 0px 5px 0px;}
.subject{font-size:30px;margin-top:20px;}

.max-width{margin:auto}
.content{width:auto;height:100%;overflow:hidden;text-align:center;padding:0px;}
.clear{clear:both;height:0;width:0;overflow:hidden;font-size:0;}
.tips{font-size:12px;color:black;}
.section .content{opacity:0;}

/*********** Section 1 ***************/
#p1 .content{position:relative;}
#p1 .tv{position:absolute;left:50%;margin-left:-150px;top:120px;width:300px;height:200px;}
#p1 .tv1{background:url(../img/p1-2.png) no-repeat;background-size:100% 100%;opacity:1;}
#p1 .tv2{background:url(../img/p1-1.png) no-repeat;background-size:100% 100%;opacity:0;}
#p1 .phone{position:absolute;width:180px;height:260px;left:50%;bottom:0px;margin-left:-60px;
    background:url(../img/p1-5.png) no-repeat;background-size:100% 100%;opacity:0;}
#p1 .point{position:absolute;width:100px;height:100px;left:50%;bottom:80px;margin-left:-75px;
    background:url(../img/p1-4.png) no-repeat;background-size:100% 100%;opacity:0;}
#p1 .hand{position:absolute;width:100px;height:130px;left:50%;bottom:0px;margin-left:-120px;
    background:url(../img/p1-6.png) no-repeat;background-size:100% 100%;opacity:0;}
@keyframes scale_point{
    0%   {transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);}
    100% {transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);}
}

@-moz-keyframes scale_point{
    0%   {transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);}
    100% {transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);}
}

@-webkit-keyframes scale_point{
    0%   {transform:scale(0.8);-moz-transform:scale(0.8);-webkit-transform:scale(0.8);}
    100% {transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);}
}

.point_animate{
    -moz-animation-name:scale_point;
    -moz-animation-duration:1s;
    -moz-animation-direction:alternate;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease-out;
    -webkit-animation-name:scale_point;
    -webkit-animation-duration:1s;
    -webkit-animation-direction:alternate;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-out;
    animation-name:scale_point;
    animation-duration:1s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
}


/*********** Section 2 ***************/
#p2 .content{position:relative;}
#p2 .tvbg{position:absolute;left:50%;margin-left:-150px;top:100px;width:300px;height:200px;
    background:url(../img/p2-1.png) no-repeat;background-size:100% 100%;}
#p2 .bg{position:absolute;top:150px;width:220px;height:310px;margin-left:-70px;left:50%;} 
#p2 .phone{background:url(../img/p2-4.png) no-repeat;background-size:100% 100%;z-index:1;} 
#p2 .screen{position:absolute;width:120px;height:200px;left:10px;top:37px;}
#p2 .screen1{background:url(../img/p2-2.png) no-repeat;background-size:100% 100%;opacity:0;}
#p2 .screen2{background:url(../img/p2-3.png) no-repeat;background-size:100% 100%;opacity:1;}

/*********** Section 3 ***************/
#p3 .content{position:relative;}
#p3 .turntable{position:absolute;left:50%;margin-left:-120px;top:110px;width:240px;height:240px;
    background:url(../img/p3-1.png) no-repeat;background-size:100% 100%;}
#p3 .cursor{position:absolute;left:50%;margin-left:-25px;top:197px;width:50px;height:56px;
    background:url(../img/p3-2.png) no-repeat;background-size:100% 100%;}
#p3 .award{position:absolute;left:50%;margin-left:-80px;bottom:60px;width:160px;height:35px;
    background:url(../img/p3-3.png) no-repeat;background-size:100% 100%;}
#p3 .hand{position:absolute;width:100px;height:130px;left:50%;bottom:-45px;margin-left:-120px;
    background:url(../img/p1-6.png) no-repeat;background-size:100% 100%;opacity:0;}

/*********** Section 4 ***************/
#p4 .content{position:relative;}
#p4 .bg{position:absolute;}
#p4 .present_bg{background:url(../img/p4-12.png) no-repeat;background-size:100% 100%;
                bottom:0px;left:50%;margin-left:-60px;width:120px;height:200px;}
#p4 .present_show{top:100px;position:absolute;width:300px;height:300px;left:50%;margin-left:-150px;}
#p4 .present{position:absolute;opacity:0;}
#p4 .present1{width:50px;height:35px;top:30px;left:35px;}
#p4 .present2{width:30px;height:18px;top:65px;left:65px;}
#p4 .present3{width:33px;height:40px;top:100px;left:50px;}
#p4 .present4{width:35px;height:20px;top:200px;left:55px;}

#p4 .present5{width:30px;height:30px;top:50px;left:140px;}
#p4 .present6{width:30px;height:30px;top:90px;left:120px;}
#p4 .present7{width:30px;height:30px;top:155px;left:115px;}

#p4 .present8{width:90px;height:55px;top:0px;right:40px;}
#p4 .present9{width:40px;height:30px;top:80px;right:80px;}
#p4 .present10{width:40px;height:20px;top:125px;right:50px;}
#p4 .present11{width:25px;height:40px;top:170px;right:60px;}

/*********** Section 5 ***************/
#p5 .content{position:relative;}
#p5 .bg{position:absolute;left:50%;margin-left:-150px;top:90px;width:300px;height:300px;}
#p5 .ball_bg{background:url(../img/p5-1.png) no-repeat;background-size:100% 100%;}
#p5 .ball_show{}
#p5 .ball{position:absolute;opacity:0}
#p5 .ball1{width:60px;height:60px;top:115px;left:150px;}
#p5 .ball2{width:60px;height:60px;bottom:25px;left:30px;}
#p5 .ball3{width:60px;height:60px;top:10px;left:115px;}
#p5 .ball4{width:40px;height:40px;top:40px;right:60px;}
#p5 .ball5{width:60px;height:60px;bottom:60px;right:25px;}
#p5 .ball6{width:40px;height:40px;top:70px;left:80px;}
#p5 .award{position:absolute;left:50%;margin-left:-80px;bottom:60px;width:160px;height:35px;
    background:url(../img/p5-8.png) no-repeat;background-size:100% 100%;}
#p5 .hand{position:absolute;width:100px;height:130px;left:50%;bottom:-45px;margin-left:-120px;
    background:url(../img/p1-6.png) no-repeat;background-size:100% 100%;opacity:0;}

@-moz-keyframes ball_show{
	0%   {-moz-transform:translate(0,0);}
	50%   {-moz-transform:translate(0,20px);}
	100%   {-moz-transform:translate(0,0);}
}
@-webkit-keyframes ball_show{
	0%   {-webkit-transform:translate(0,0);}
	50%   {-webkit-transform:translate(0,20px);}
	100%   {-webkit-transform:translate(0,0);}
}
@keyframes ball_show{
	0%   {transform:translate(0,0);}
	50%   {transform:translate(0,20px);}
	100%   {transform:translate(0,0);}
}
.ball_animate{
    -moz-animation-name:ball_show;
    -moz-animation-duration:3s;
    -moz-animation-direction:alternate;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease-out;
    -webkit-animation-name:ball_show;
    -webkit-animation-duration:3s;
    -webkit-animation-direction:alternate;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-out;
    animation-name:ball_show;
    animation-duration:3s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
}


.scroll-top{position:absolute;bottom:20px;left:50%;color:#ac0000;width:80px;margin-left:-40px;text-align:center;display:none}
.animation-transition{-webkit-transition:all 3s ease-out;-moz-transition: all 3s ease-out;-o-transition: all 3s ease-out;transition: all 3s ease-out;}
#top{position:fixed;width:20px;bottom:20px;left:50%;margin-left:-10px;opacity:0;z-index:999;}
@keyframes top{
	0% {opacity:0;bottom:20px;}
	100% {opacity:1;bottom:30px;}
}
@-webkit-keyframes top{
	0% {opacity:0;bottom:20px;}
	100% {opacity:1;bottom:30px;}
}
@-moz-keyframes top{
	0% {opacity:0;bottom:20px;}
	100% {opacity:1;bottom:30px;}
}

#top{
    animation-name:top;
    animation-duration:1s;
    animation-iteration-count:infinite;
    -moz-animation-name:top;
    -moz-animation-duration:1s;
    -moz-animation-iteration-count:infinite;
    -webkit-animation-name:top;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
}

#back{position:fixed;width:100%;top:5px;left:0px;z-index:999;font-size:16px;display:none;height:30px;line-height:30px;padding:0px 15px;}
#back:before,#back::before{content:'';display:block;position:absolute;background:url('../img/back_red.png') no-repeat;background-size:15px 20px;background-position:3px 2px;width:25px;height:25px;left:10px;top:5px;z-index:999;border:1px solid #bc0000;border-radius:50%;}

@media screen and (max-height: 460px){
.page-title{width:160px}
p{font-size:16px;}

#p5 .bg{position:absolute;left:50%;margin-left:-100px;top:105px;width:200px;height:200px;}
#p5 .ball1{width:40px;height:40px;top:75px;left:100px;}
#p5 .ball2{width:40px;height:40px;bottom:20px;left:20px;}
#p5 .ball3{width:40px;height:40px;top:5px;left:75px;}
#p5 .ball4{width:30px;height:30px;top:25px;right:35px;}
#p5 .ball5{width:40px;height:40px;bottom:30px;right:15px;}
#p5 .ball6{width:30px;height:30px;top:60px;left:50px;}

}

@media screen and (max-width:260px){
p{font-size:12px;}
#p1 .tv{position:absolute;left:50%;margin-left:-130px;top:100px;width:260px;height:150px;}

}

@media screen and (min-width:360px){
/* For iphone6 + */
#p1 .tv{position:absolute;left:50%;margin-left:-180px;top:100px;width:360px;height:220px;}
#p2 .tvbg{position:absolute;left:50%;margin-left:-180px;top:100px;width:360px;height:220px;}
#p3 .turntable{position:absolute;left:50%;margin-left:-150px;top:130px;width:300px;height:300px;}
#p3 .cursor{position:absolute;left:50%;margin-left:-33px;top:238px;width:66px;height:72px;}
#p4 .present_bg{background:url(../img/p4-12.png) no-repeat;background-size:100% 100%;
                bottom:0px;left:50%;margin-left:-80px;width:160px;height:280px;}

}