@charset "utf-8";

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea, select {margin:0;padding:0;box-sizing: border-box;-webkit-text-size-adjust:none;text-size-adjust:none;/*阻止旋转屏幕时自动调整字体大小*/}
html{height:100%;}
body{color: rgb(165, 23, 0);font-family:微软雅黑,'Heiti SC',黑体,Arial;font-size:0.875em; max-width: 640px;}
ol,ul,li{list-style:none outside none;}
a{text-decoration:none;color:inherit;}
img{border:none;vertical-align:middle;/* max-width:100%;max-height:100% */}
table{border-collapse:collapse;}
tr,td,th{padding:0;margin:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;color:rgb(28, 31, 135);line-height:120%;}
input,textarea,select,button{border:1px solid #CCC;font-family:微软雅黑,'Heiti SC',黑体,Arial;padding:0;margin:0;}

.p8{background: url(../img/bj.png) no-repeat center; background-size:cover !important;}
.p2{background:#ef7f30; background-size: cover !important;  }
.p7{background:#6372b6; background-size: cover !important;  }
.p6{background:#ff7200; background-size: cover !important;  }
.p3{background:url(../img/p5-bg.jpg) no-repeat center; background-size:cover !important;}
.p4{background:url(../img/p6-bg.jpg) no-repeat center; background-size:cover !important;}
.p5{background:#59c9d3; background-size:cover !important;}
.p9{background:#f26666; background-size:cover !important;}
.p10{background:#aa9bdf; background-size:cover !important;}
.p11{background:#19b2c6; background-size:cover !important;}
.p12{background:url(../img/p11bg.jpg) no-repeat center; background-size:cover !important;}
.absolute{ position: absolute; }
/*p1*/
.p1-div1{width: 100%;height: 100px;top: 0px;}
.p1-1{top: 64px;height: auto;width: 25%;right: 10%;}
.p1-div2{width: 100%;height: 60%;top: 3%;}
.p1-2{left: 5%; top:0%;}
.p1-3{right: 23%;top: 24%;}
.p1-4{right: 27%;top: 52%;}
.p1-5{right: 26%;top: 67%;}
.p1-6{right: 45%;top: 28%;}
.p1-div3{ width:100%; height:90%;background-size: 91%!important; left:6%;background:url(../img/p1-2.png) no-repeat;  }
.p1-7{  color: #a72a16; font-size: 13px; line-height: 1.2em;  left: 10%; width:10px;font-weight: bold; }
.p1-8{bottom: 0px; width: 20px;}
.p1-9{ width: 100%; height: 100%; }
/*p2*/
.p2-div1{width: 100%;height: 100%;left:0;top:3%;}
.p2-1{top: 3%;height:10%; width:84%; left:7%;}
.p2.active .p2-1,.p4.active .p4-2{-webkit-animation:pullDown 1s ease 0.5s both;
	-moz-animation:pullDown 1s ease 0.5s both;
	-ms-animation:pullDown 1s ease 0.5s both;
	animation:pullDown 1s ease 0.5s both;
}
.p2-2,.p4-3{width:96%;top: 6%;font-size: 18px;line-height: 1.2em;font-weight: bold;color: #fff;text-align: center;}
.p2.active .p2-2,.p4.active .p4-3{-webkit-animation:fadeIn 1s ease-in-out 0.5s both;
	-moz-animation:fadeIn 1s ease-in-out 1s both;
	-ms-animation:fadeIn 1s ease-in-out 1s both;
	animation:fadeIn 1s ease-in-out 1s both;
}
.p2-3,.p2-5,.p2-7,.p2-9{left:6%;height:auto;width: 90%;text-align: left;font-size: 14px;line-height: 1.5em;}
.p2-4,.p2-6,.p2-8,.p2-10{width: 3px;height: 80%;top: 5%;right: 37%;background: rgb(165, 23, 0);}
.p2-3{ top: 18%;}
.p2-5{ top: 30%;}
.p2-7{ top: 39%;}
.p2-9{ top: 45%;}
.p2-6{right: 46%;}
.p2-8{right: 55%;}
.p2-10{right: 65%; height: 80%;}
.p2-11{ left: 6%; bottom: 21%;  }
/*p3*/
.p3 .p3-div1,.p3 .p3-div3{ width: 100%; height:auto; top: 2%; left:1%;  }
.p3 .p3-div3{ top: 84%;left: 60% }
.p3 .p3-1{ height: auto; margin-top:-50%; height: auto }
.p3 .p3-2{ height: auto; margin-bottom: -50%; height: auto}
.p3-div2{position: relative;top: 12%;left: 25%;width: 50%;height: 210px;}
.p3-3{width: 100%;height: auto;z-index: 11;}
.p3-4{width: 100%; left: 55%;margin-top: 5%;z-index: 111;}
.p3-5{width: 100%; margin-top:38%; margin-left: 0%;}
.p3-6{width: 100%; margin-top:109%; left:0%; }
.p6-div0{ width: 86%; left: 0%; top: 8%; font-size:16px; z-index:1;}
.p7-div0{ width: 80%; left: 10%; top: 19%; font-size:16px;}
.p3-div4,.p7-div3,.p6-div1{ width: 70%; left: 15%; height: 30px; top: 52%;}
.p7-div1{ width: 100%; left: 2%; height: 100%;top: 18%; background:url(../img/p3-6.png) no-repeat; background-size: 98%;}
.p3-7,.p7-2,.p7-4,.p7-6,.p7-4d{ text-align: center; font-size: 19px; text-indent:2em; width: 100%; color: #fff; line-height: 2.3em;  }
.p3-8{ top: 62%; font-size: 14px; text-align: center; line-height: 2em; width: 80%; left: 10%;}

/*p5*/
.p5-div1{ width: 100%; height:auto; left: 0%; top: 2%; }
.p5-3{width: 100%; height: auto; left: 20%; margin-top: 13%;}
.p5-4{width: 100%; left: 2%; margin-top: 32%!important; z-index: 1;}
.p5-5{ width: 100%; margin-top: 91%!important; margin-left: 12%; z-index: 2;}
.p5-6{width: 57%; margin-top: 150%;left: 35%;}
/*p9*/
.p9-div1{ width: 100%; height:auto;left: 0%; top: 2%; }
.p9-3{width: 100%;   height: auto;   left: 20%;   margin-top: 12%;}
.p9-4{width: 100%; left: 0%; margin-top: 35%; z-index: 1;}
.p9-5{width: 100%; margin-top: 92%;  margin-left: 15%; z-index: 2;}
.p9-6{width: 50%; margin-top: 150%; left: 38%;}

/*p10*/
.p10-div1{ width: 100%; height:auto; left: 0%; top: 2%; }
.p10-3{ width: 100%;  height: auto;  left: 20%;  margin-top:12%!important;}
.p10-4{width: 100%; left: 2%; margin-top: 31%!important; z-index: 1;}
.p10-5{ width: 100%; margin-top: 82%!important;  left: 12%; z-index: 2;}
.p10-6{width: 80%; margin-top: 148%!important; left: 37%;}

/*p11*/
.p11-div1{ width: 100%; height:auto; left: 0%; top: 2%;}
.p11-3{width: 100%; height: auto; left: 3%; margin-top: 19%; z-index: 1;}
.p11-4{width: 100%;left: 11%; margin-top: 29%; z-index: 1;}
.p11-5{width: 100%;margin-top: 85%; left: 12%; z-index: 2;}
.p11-6{width: 100%;margin-top: 119%!important; left: 0%; }

/*p12*/
.p12-div1{ width: 100%; height:auto; left: 0%; top: 2%;}
.p12-3{width: 100%; height: auto; left: 29%;  margin-top: 15%; z-index: 1;}
.p12-4{width: 85%; height: 340px;left:8%;margin-top: 38%;z-index:1; background: #fff; border-radius: 10px;text-align:center;}
.p12-5{width: 100%; margin-top:0%; left:0%;z-index: 2; font-size: 20px; line-height: 30px;}
.p12-4 input{ width:80%; height:40px; background: #fff; border:1px solid #a7a7a7; border-radius: 10px; margin:4% auto; text-indent: 2em; font-size: 16px; color: #999}
input.name{ margin-top:10%;}
input.tijiao{ background: url(../img/p11-2.png) no-repeat; border: none; background-size: 75%; margin-left: 16%; cursor: pointer;}
   
   
/*p4*/
.p4-div1{ width: 100%; height:auto; left: 0%; top: 2%; }
.p4-div2{ width: 12%; height: 40%; top: 18%;  left: 7%; }
.p4-3{ width: 50%; right: 26%;}
.p4-div3{ width: 70%; height: 63%; left: 20%; top: 20%; overflow: hidden; }
.p4-5{ width: 30px; height: auto; left: 37%; }
.p4.active .p4-5{-webkit-animation:pullDown 2s ease  both;
	-moz-animation:pullDown 2s ease  both;
	-ms-animation:pullDown 2s ease  both;
	animation:pullDown 2s ease  both;} 

.p4-6{ width: 100%; left: 13%; margin-top: 104%; z-index: 5;}
.p4-8{ width: 100%; left: -4%;  margin-top: 19%; z-index: 3;}
.p4-9{ width: 100%; left: 15%;  margin-top: 28%; z-index: 4;}
.p4-7{ width: 100%; left: 27%;  margin-top: 14%; z-index: 4;}

/*p6*/
.p6 .p3-div1,.p6 .p3-div3{ width: 80%; height: 23%; top: -7%; left: -40%;  }
.p6 .p3-div3{ top: 84%;left: 60% }
.p6 .p3-1{ height: auto; margin-top:-50%; height: auto }
.p6 .p3-2{ height: auto; margin-bottom: -50%; height: auto}
.p6-div1{ top: 40%; }
.p6-1{ width: 75%;  right: -32%;  margin-top: 26%;}
.p6-2{ width: 94%;  left: 3%; margin-top: 9%; }
.p6-3{ width: 100% !important;  right: 0px; left: -2%; margin-top: 24%;}
.p6-div2{ top: 34%; width: 80%; left: 10%; }
.p6-div2 li{ width: 48%; margin: 0 30% 6% 0; float: left; position: relative; margin-bottom: 6%;  }
.p6-div2 li img{ width: 100%; height: auto; }
.p6-div2 li img.p6-4{ position: absolute; width: 90%; height: auto; left: 66%; top: 10%;  }
.p6-5{width: 130%;left:-17%;}
.p6-6{width: 17%;left: 8%;bottom: 10%;}
.p6-w{ width: 100%; text-align: center; bottom: 28%; font-size: 18px; font-weight: bold; }

/*p7*/
.p7-1{left:2%;top:-10%;}
.p7-2{left:8%;top:-8%;}
.p7-4{width: 80%; height: auto;left: 4%; }
.p7-3{left:12%;}

.p7-div2,.p7-div4,.p7-div6{top: 38%;font-size: 18px;line-height: 2em;text-align: center;width: 100%;font-weight: bold;}
.p7-div3{top: 77%;width:91%; left:0%;}
.p7-div4{top: 53%;}
.p7-div5{ width: 100%; height: 168px; top: 52%; }
.p7-5{ width: 80%; left: 5%; }
.p7-4d{ width: 80%; height: auto;left: 10%; }

/*音乐*/
audio{display:inline;float:left}
.music{width: 30px;height: 30px;text-align:center;background:url(../img/off.png);background-size:100%;position:fixed;z-index:1000;top: 20px;right: 20px;z-index:100;}
.music-off{background:url(../img/on.png);background-size:100%}
.music-ani{
    animation:musicRound 1s infinite linear;
    -webkit-animation:musicRound 1s infinite linear
}
@keyframes musicRound{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
@-webkit-keyframes musicRound{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
/*音乐*/
.section{background-size:100% auto;background-position:center center} 

@media only screen and (min-width: 414px) and (max-width: 600px){
.p1-9 {width: 100%; height: 100%;}
.p1-div5 {left:3%; margin-top:70%!important; width: 94%;}
.p7-div3 {top: 76%!important;}
.p2-11 { bottom: 18%!important;}
.p2-2{top:9%;}
.p2-3{top:20%;}
.p2-7{top:41%;}	
.p2-5{top:32%;}	
.p3-4{left:50%;margin-top:12%;}
.p3-5{margin-top:43%;}
.p3-6{margin-top:115%;}
.p4-6{margin-top:106%;}
.p5-3{width:93%;}
.p5-4 {width:95%; left: 4%; margin-top: 28%; z-index: 1;}
.p5-5 {width: 96%; margin-top: 87%; margin-left: 12%; z-index: 2;}
.p5-6 {width: 48%; margin-top: 148%!important; left: 37%;}
.p9-3 {width: 93%;}
.p9-4 {width: 96%; left: 2%; margin-top: 32%; z-index: 1;}
.p9-5 {width: 97%; margin-top: 87%; margin-left: 15%; z-index: 2;}
.p9-6 {width: 46%; margin-top: 142%; left: 37%;}
.p10-3 {width: 93%; margin-top: 9%;}
.p10-4 {width: 90%; left: 7%; margin-top: 28%; z-index: 1;}
.p10-5 {width: 89%; margin-top: 79%; left: 16%; z-index: 2;}
.p10-6 {width: 65%; margin-top: 144%; left: 39%;}
.p11-6 { margin-top: 108%!important;}
.p11-3 { margin-top:18%;}
}

@media screen and (max-width:375px){
.p3-5 { width: 100%; margin-top: 47%;margin-left: 0%;}
.p3-4 { width: 100%; left: 46%; margin-top: 10%; z-index: 111;}
.p3-6 { width: 100%; margin-top: 119%; left: 0%;}
.p1-div5{ margin-top: 68%;}
.p2-5 { top: 32%;}
.p2-11 { bottom: 27%;}
.p7-div3{ top: 69%;}	
.p6-div1 { top: 36%;}
.p6-3 { margin-top: 29%;}
.p6-5 { width: 136%; left: -19%;}
.p11-6 {margin-top: 119%!important;}
.p5-6 { margin-top: 148%;}
}


@media screen and (min-width:640px){

.p1-div3 {width: 79%; left:10%;}
.p1-div5 { left: 20%; top: 20%; width: 55%;}
.p2-2 {width: 63%; top: 11%;left: 20%;}
.p2-3 {top: 22%; left: 16%;  width: 71%;}
.p2-7 { top: 48%; width:78%;}
.p2-5 { top: 35%;}
.p7-div1 {width: 78%; left: 14%; height: 100%;top: 18%;}
.p2-11 {left: 12%; bottom: 3%; width: 79% !important;}
.p7-div3 {top: 86%; width: 78%; left: 12%;}	
.p7-1 {left: 6%; top: -7%;}
.p7-2 {left: 5%; top: -8%;}
.p7-4 {width: 76%; height: auto; left: 7%; top: 2%;}	
.p6-2 { width: 68%; left: 20%; margin-top: 6%;}
.p6-1 { width: 65%; right: -30%; margin-top: 26%;}
.p6-5 { width: 104%;  left: -4%;  top: 71%;}
.p6-3 { width: 83% !important;  right: 0px; left: 8%; margin-top: 26%;}
.p3-5 { width: 81%; margin-top: 32%; margin-left: 10%;}
.p3-4 { width: 83%; left: 53%;  margin-top: 5%; z-index: 111;}
.p3-6 { width: 64%; margin-top: 88%; left: 0%;}	
.p4-8 { width: 74%; left: 11%; margin-top: 18%;z-index: 3;}
.p4-9 {width: 69%; left: 27%; margin-top: 27%;}
.p4-6 { width: 58%; left: 30%; margin-top: 79%; z-index: 5;}
.p4-7 { width: 85%; left: 27%; margin-top: 14%; z-index: 4;}
.p5-3 { width: 68%; left: 28%; margin-top: 10%;}
.p5-4 { width: 63%; left: 18%; margin-top: 23%!important; z-index: 1;}
.p5-5 { width: 63%; margin-top: 63%!important; margin-left: 24%; z-index: 2;}	
.p5-6 { width: 30%; margin-top: 102%; left: 42%;}
.p9-3 { width: 65%; height: auto; left: 30%; margin-top: 12%;}	
.p9-4 { width: 66%; left: 18%; margin-top: 27%; z-index: 1;}
.p9-5 { width: 65%; margin-top: 65%; margin-left: 27%; z-index: 2;}
.p9-6 { width: 31%; margin-top: 102%; left: 42%;}
.p10-3 { width: 68%; height: auto; left: 27%; margin-top: 10%!important;}
.p10-4 { width: 62%; left: 20%; margin-top: 23%!important;z-index: 1;}	
.p10-5 { width: 61%; margin-top: 58%!important; left: 26%; z-index: 2;}	
.p10-6 { width: 45%; margin-top: 103%!important; left: 44%;}	
.p11-6 { margin-top: 71%!important; width: 78%;}
.p11-3 { width: 68%; height: auto;  left: 17%;  margin-top: 12%; z-index: 1;}
.p11-4 { width: 67%; left: 23%; margin-top: 20%;  z-index: 1;}
.p11-5 { width: 68%; margin-top: 59%;left: 24%;   z-index: 2;}		
.p12-3 { width: 75%; left: 32%;margin-top: 15%;}
.p12-4 { idth: 85%;height: 425px; left: 8%; margin-top: 31%;}
.p12-4 input { margin: 3% auto;}
input.tijiao { margin-left: 22%; height: 64px;}	
}
@media screen and (max-width:360px){
.p7-div3 { top: 73%;}
.p4-8 {margin-top: 23%;}
.p4-9 {	margin-top: 33%;}
.p4-6 {	margin-top: 112%;}
.p4-7 { width: 100%; left: 21%;  margin-top: 19%;  z-index: 4;}
.p10-4{	margin-top: 32%;}
.p10-3{	margin-top: 12%;}
.p10-5{	margin-top: 88%;}
.p10-6 { margin-top: 162%;}
.p11-6 {margin-top: 132%;}
.p11-3 {margin-top: 23%;}
.p11-4{margin-top: 33%;}
.p11-5{margin-top: 90%;}	
}