html,body,h1,h2,h3,h4,h5,h6,ul,li,div,span,img,a,input,p{ padding: 0; margin: 0; }
input,img{ border: none; }
ul, ol, dd, li{list-style: none outside none;}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
body{ font-family: "microsoft yahei"; color: #3b3b3b;}
a{ text-decoration: none; outline: medium none;color: #3b3b3b;}
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,input,p,th,td{margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6{font-weight: normal;}
ul, ol, dd, li{list-style: none outside none;}
img{border: 0 none;}
em{font-style: normal;}

.section{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.section-bg-red{ z-index: 6; background: url(../images/p2_bg.png) repeat;}
.section-bg-red2{ z-index: 6; background: url(../images/p6_bg.png) repeat;}
.circle{ padding-top: 10px; text-align: center;}
.circle li{ display: inline-block; margin: 0 2px; background: url(../images/p2_circle.png) no-repeat; width: 9px; height: 9px;}

#p1{ background:url(../images/p1_bg.jpg) center no-repeat ; background-size: 100% 100%; }
#p1 .top{ width: 100%; position: absolute; left: 0; top: 0;}
#p1 .bottom{ width: 100%; position: absolute; bottom: 0; left: 0;}
#p1 .peo{ width: 100%; position: absolute; bottom: 0; left: 0;}
#p1 .logo{ width: 33%; position: absolute; bottom: 1%; left: 33%;}
#p1 .title{ position: absolute; top: 4%; width: 90%; left: 5%; z-index: 5;}
#p1 .btn{  background: url(../images/p1_btn.png) no-repeat; width: 187px; height: 151px; z-index: 5; position: absolute; bottom: 40px; left: 28%; background-size: 100% auto;}
#p1 .btn.btn-pause{ background-image: url(../images/p1_btn_pause.png);}
#p1 a{ display: block;}
#p1 a img{ width: 100%; display: block; }
#p1 .btn-l{ position: absolute; left: 0; bottom: 0; z-index: 5; width: 28%;}
#p1 .btn-r{ position: absolute; right: 0; bottom: 0; z-index: 5; width: 28%;}

#p1-1 .main{ text-align: center; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -200px; width: 400px;}
#p1-1 .main h3{ padding-bottom: 10px; display: inline-block; border-bottom: 1px solid #c88789; font-size: 32px; text-align: center; color: #fff; font-weight: bold; text-align: center;}
#p1-1 .main .i-close{ width: 50px; position: absolute; bottom: -70px; left: 175px;}
#p1-1 .main .i-close img{ display: block; width: 100%;}


#p2 .gc{ padding-top: 10px; font-size: 16px; text-align: center; color: #fff; line-height: 1.8em;}
#p2 .main{ top: 50%; position: absolute; margin-top: -223px; height: 486px;}
#p2 h3{ text-align: center;}
#p2 h3 img{ width: 80%; }
#p2 .line{ margin: 15px 0;  color: #fff; text-align: center;}
#p2 .line .line-bg{ width: 60%;background: #cccccc; border: 5px solid #fff; border-radius: 20px; height: 6px; margin: 0 10px;}
#p2 .line .line-bg i{ background: #ff0000; height: 6px; float: left; width: 5%;border-radius: 20px; }
#p2 .line img{ width: 100%;}
#p2 .line span{ display: inline-block;  color: #fff;}
#p2 .line .num{position: relative; top: -3px; font-size: 14px;}
#p2 .s-start div{ margin-top: 25px; text-align: center;} 
#p2 .s-start div a{ width: 25%; display: inline-block; margin: 0 5px;}
#p2 .s-start div a img{ display: block; width: 100%;}
#p2 .s-start p{ color: #fff; text-align: center; margin: 15px 0;}

#p2 .s-end{ margin-top: 25px; text-align: center;}
#p2 .s-end a{ height: 38px; width: 80px; display: inline-block; margin: 0 5px;  background: url(../images/p3_btn_play.png) top no-repeat; background-size: 100% auto; }
#p2 .s-end a img{ display: block; width: 100%;}
#p2 .s-end a.btn-ctr.btn-pause{ background-image: url(../images/p3_btn_pause.png);}

#p4 .main{ position: relative; top: 50%; margin-top: -80px;}
#p4 h3{ text-align: center; margin: 0px 0 0px;}

#p6 .share{ width: 80%; position: absolute; top: 10px; right: 10px;}
#p6 .share img{ width: 100%;}




#p5{ background:url(../images/p5_bg.png) center no-repeat ; background-size: 100% 100%; }
#p5 .top{ width: 100%; position: absolute; left: 0; top: 0;}
#p5 .bottom{ width: 100%; position: absolute; bottom: 0; left: 0;}
#p5 .peo{ width: 100%; position: absolute; bottom: 0; left: 0;}
#p5 .logo{ width: 32%; position: absolute; bottom: 10px; left: 33%;}
#p5 .title{ position: absolute; top: 4%; width: 90%; left: 5%; z-index: 5;}
#p5 .btn{ background: url(../images/bofang.png) no-repeat top center; width: 170px; height: 122px; z-index: 5; position: absolute; bottom: 130px; left: 50%; margin-left: -85px; background-size: 100% auto;}
#p5 .btn.btn-pause{ background-image: url(../images/p1_btn_pause.png);}
#p5 div img{ width: 100%; display: block; }
#p5 .total{ font-size: 16px; text-align: center; line-height: 35px; z-index: 5; position: absolute; bottom: 102px; color: #fff; background: url(../images/btn_total.png) no-repeat top center; width: 300px; height: 50px;background-size: 100% auto; left: 50%; margin-left: -150px; }
#p5 .btn-join{ z-index: 5; position: absolute; margin-left: -97px; left: 50%; text-align: center; bottom: 62px; width: 194px; }
#p5 .btn-l{ position: absolute; left: 0; bottom: 0; z-index: 5; width: 28%;}
#p5 .btn-r{ position: absolute; right: 0; bottom: 0; z-index: 5; width: 28%;}
.btn-joinimg,.btn-limg,.btn-rimg{width: 100%; display: block;}

#p3-3 table{ border-collapse: collapse; width: 225px; position: absolute; top: 50%; left: 50%;   margin: -150px 0 0 -112px;}
#p3-3 img{ width: 100%;}
#p3-3 input{ width: 100%; box-sizing: border-box; padding: 0 20px; font-size: 18px; height: 35px; line-height: 35px; border-radius: 20px; margin: 10px 0;}
#p3-3 .btn{ padding-top: 10px; text-align: center;}
#p3-3 .btn a{ width: 45%; display: inline-block; }
#p3-3 .btn a:first-child{ margin-right: 10%;}