@charset "utf-8";
/* CSS Document */
/*活力净彩*/
.h1 {background:#414141;position:relative;}
.h1 .r{color:#fff; height:0; padding-bottom:37%;position:relative;}
.h1 .r .tit{ position:absolute;top:20%; left:8%; }
.h1 .r .tit h2{ text-align:left;}
.h1 .r .con{position:absolute; top:50%; left:8%;}
.h1 .r .price{ font-size:1.25em; position:absolute; top:80%; left:8%; color:#50a6ba; display:none;}
.h1 .r .price span{ font-size:3em; margin-right:15px;}
.h1 .r img{ width:60%; max-width:520px;}
.h2{ position:relative;}
.h2 .tit{ position:absolute; left:10%; top:20%; width:50%; }
.h2 .tit h2,.h2 .tit h3{text-align:left;}
.h3{ position:relative;}
.h3 .tit{ position:absolute; top:40%; width:100%; }
.h4{  overflow:auto;}
.h4 .tit{ margin-top:10%;width:50%; max-width:330px;}
.h4 .con{ margin:2% auto 10%; width:90%; max-width:710px; text-align:center;}
.h4 .con2{ width:80%; margin-bottom:5%;}
.h4 .con2 ul li{ width:25%; float:left;}
.h5{ background:#302e2b; overflow:auto; color:#fff;}
.h5 .con2{ margin:10% auto; width:80%;}
.h5 .con2 ul li{ width:33%; float:left; text-align:center; border-right:1px solid #fff;}
.h5 .con2 ul li .tit{ margin-top:5%;}
.h5 .con2 ul li .con{ margin:10% 9%;}
.h5 .con2 ul li.last{ border-right:none;}
.h6{ background:#88c14a; overflow:auto; position:relative;}
.h6 .l.half{ width:55%;}
.h6 .con{ position:absolute; right:35%; top:50%; width:40%;  text-align:right;}
.h7{ background:#fff; }
.h7 .tit{ margin:10% auto 3%;}
.h7 .tit h2{ margin-top:2%;}
.h7 .con{ width:62%; text-align:center; margin-bottom:5%;}
.h7 .l{ width:31.7%;}
.h7 .r{ width:68.3%;}
.h8{ background:url(../images/h8.jpg) no-repeat right top;background-size: 100% 100%; overflow:auto; padding-bottom:5%;}
.h8 h2{ width:100%; text-align:center; line-height:4em; color:#fff; margin-top:3%;}
.h8 h3{ width:100%; text-align:center; line-height:3em; color:#fff;margin-bottom:2%;}
.h8 ul{ width:60%; margin:0 auto;}
.h8 ul li{ width:20%; float:left; margin:0 6.6%; text-align:center;}
.h8 ul li img{ max-width:160px;}
.h9{ overflow:auto; position:relative;}
.h9 .con{ position:absolute; right:30%; top:55%;width:50%; text-align:right;}
.h10 .tit{ margin-top:10%;}
.h10 .tit,.h10 .con{width:80%;} 
.h10 .tit h3{ margin:5% auto;}
.h10 .tit h2,.h10 .tit h3,.h10 .con{text-align:left;}
.h11{ background:#d45cd8; overflow:auto; position:relative;}
.h11 .con{ position:absolute; left:30%; top:25%; width:30%;}
.h11 .con p{color:#fff;}
.h12{ background:#f8f8f8; overflow:auto; padding:5% 0;}
.h12 .tit h3{ margin-top:3%;}
.h12 .con{ width:90%; margin:1% auto 3%; max-width:630px; text-align:center;}
.h12 .con2{ text-align:center; margin-top:2%;}
.h12 .con2 img{ display:inline;}
.h13{ position:relative; color:#fff;}
.h13 .tit{ position:absolute; left:10%; top:15%;}
.h13 .tit h3,.h13 .tit h4{ text-align:left;}
.h13 .con{ position:absolute; left:10%; top:35%; width:40%;}

.z13{ padding:10% 0 5%;}
.z13 .box{ text-align:center; width:27%;float:left;}
.z13 .box.m{ width:34%; }
.z13 .box.l,.z13 .box.m{ border-right:1px solid #414141;padding-right:5%;}
.z13 .box img{ width:60%;}
.z13 .box p{color:#3c3f44;}
.z13-1{color:#3c3f44;}
.z13-1 .tit{ width:100%; text-align:center;line-height:2em;}
.z13-1 .con{ text-align:center; width:90%;}
.z13-1 .con2{ text-align:center; margin:2% auto;}
.z13-1 .con2 img{ display:inline-block;}

.h15{ position:relative;}
.h15 .tit{ position:absolute; right:15%; top:15%;}
.h15 .tit h2{ text-align:right;}
.h15 .con{ position:absolute; right:13%; top:30%; width:10%;}
.h16{ background:#f7f7f7; text-align:center; padding:50px 0; color:#414141; ;}
.h16 .tit{margin:0.5em auto; line-height:1.2em;}
.h16 .con p{ max-width:665px;}
.h17{ background:#414141; color:#fff;position:relative;}
.h17 .l .tit{ position:absolute; top:20%; left:10%;}
.h17 .l .tit h2,.h17 .l .tit h3{ text-align:left;}
.h17 .l .tit h2 i{font-size: 0.8em;font-style: normal;}
.h18{ position:relative; color:#fff;}
.h18 .tit{ position:absolute;top:35%; width:100%;}
.h18 .tit h1{ margin:3% auto;}
.h19{ position:relative;}
.h19 .tit{ position:absolute; left:15%; top:15%;}
.h19 .tit h2{ text-align:left;}
.h20{ background:#414141; overflow:auto; padding:8% 0;}
.h20 .con p{ color:#fff; }
.h20 .con p span{font-size:1em;}
.h21{ position:relative;}
.h21 .tit{ position:absolute; left:15%; top:15%;}
.h21 .con{ position:absolute; left:15%; top:35%;width:30%;}
.h22{ margin-top:5%;}
.h22 .tit{position:relative}
.h22 .line{border-bottom:1px solid #000; }
.h22 .tit span{ position:absolute; bottom:-80%; text-align:center; display:block; width:100%;}
.h22 .con{ padding:5%; border-bottom:1px solid #000;}
.h22 .con ul li{float: left; width:33%; text-align:center;border-right:1px solid #333;}
.h22 .con ul li.last{ border-right:none;}
.h22 .more{ margin:1% auto; width:100%; background:#50a7bb; text-align:center; }
.h22 .more a{padding:1% 5%;font-size:2em; border:1px solid #fff; border-radius:5px; line-height:10em; color:#fff;}

@media screen and (max-width: 1100px){
.h1 .r{ height:auto; padding:0;}
.h1 .r .tit{ margin:30px 0 20px 10%; position: static;}
.h1 .r .con{ margin:10px 0 30px 10%;  position: static;}
.h1 .r .price{ margin:30px 0 30px 10%; position: static;}
.h8 ul{ width:80%;}
.h8 ul li{ width:25%; float:left; margin:0 4%; text-align:center;}
.h13 .con{ top:45%;}
.z13-1 .con2{ text-align:center; margin:5% auto;}
.h21 .con{ width:40%;}
}

@media screen and (max-width: 800px){

.h21 .l{ width:50%;}
.h21 .r{ width:50%;}
.h22 .con ul li{ border-right:none;}
}

@media screen and (max-width: 640px){
.h3 .con{right:35%; top:40%; width:30%; max-width:360px;}
.z13-1 .tit{ width:100%; text-align:center;}
.z13-1 .con{ text-align:center;}
.h13 .tit{ left:5%;}
.h13 .con{width:50%; left:5%;}
.h16 .tit,.h16 .con{ padding:0 5%;}
.h18 .tit{ top:15%;}
.h21 .con{ width:60%; top:40%}
}

@media screen and (max-width: 480px){
.h1 .r .tit{ margin-left: 5%;}
.h1 .r .price span{ font-size:2em;}
.h1 .r .con{ margin-left: 5%;}
.h1 .r .price{ margin-left: 5%;}
.h2 .tit{ left:5%; width:95%;}
.h4 .con2 ul li{ width:50%; float:left;}
.h5 .con2 ul li{ width:100%; float:none; border-right:none;}
.h6 .l.half{ width:100%;}
.h7 .con{ width:90%;}
.h7 .l,.h7 .r{  width:80%;}
.h7 .r{ position:static;}
.h7 .r img{ width:95%; margin:10% auto;}
.h8 ul{ width:90%;}
.h8 ul li{ width:30%; float:left; margin:0 1.6%; text-align:center;}
.h12 .con2 img{ max-width:48%;}
.h13{ background:url(../images/h13.jpg) no-repeat left top;background-size:auto 300px; overflow:auto; height:200px; padding-bottom:5%;}
.h13 img{ display:none;}
.h13 .con{width:80%; left:5%; top:50%;}
.h13 .con img{ display:block;}
.z13 .box{ width:49%;  margin-bottom:5%;}
.z13 .box.l{ width:44%;}
.z13 .box.m{ width:56%;}
.z13 .box.l, .z13 .box.m{ border-right:none; padding-right:0;}
.z13 .box.r{ float:none !important;}

.h15 .con{top:40%;}
.h16 .con p{ position:relative;}
.h20 .con p span{ display:block; font-size:1em;}
.h21{ background:url(../images/h21.jpg) no-repeat 40% top;background-size:auto 300px; overflow:auto; height:300px;}
.h21 img{ display:none;}
.h21 .tit,.h21 .con{ left:5%;}
.h21 .l,.h21 .r{ width:100%;}
.h22 .con ul li{ width:100%; }
.h22 .tit span{ bottom:-60%;}
.h22 .tit span img{ width:30%;}
}