@font-face{
	font-family: franklin Gothic Book;
	src: url('../font/FRABK.TTF'),
		 url('../font/FRABK.eot');
}
.cen{width: 100%;background: -webkit-linear-gradient(top,#a0c470,#b5d17d);background: -ms-linear-gradient(top,#a0c470,#b5d17d);background: -moz-linear-gradient(left,#8cd287,#dcdb94,#8cdfb3 70%);background: -o-linear-gradient(left,#8cd287,#dcdb94,#8cdfb3 70%);}
.wqmain{width: 100%;max-width: 1280px;margin: 0 auto;padding: 2% 0;}
.mapbanner{margin-bottom: 4%;max-width: 1280px;margin: 0 auto;}
.bancon{padding-top: 5%;width: 66%; margin: 0 auto;}
#map{width: 46%;float: left;margin-bottom: 2%;}
.maptext{width: 50.5%;overflow: hidden;padding-left:8.5%;padding-right: 8.5%;border: 1px solid #fff;margin-bottom: 2%;font-family:"franklin Gothic Book","Microsoft YaHei";position: relative;}
.txttop{margin-top: 20%;margin-bottom: 5%;border-bottom: 1px solid #fff;}
.txttop img{float: left;width: 20%;margin-bottom: 4%;}
.txttop p{overflow: hidden;margin-left: 25%;font-size: 1.7em;color: #fff;text-shadow: 0 0 10px #5cbca6;}
#txttopp{margin: 0;margin-bottom: 10px;clear: both;}
#txttopp img{width: 45%;margin: 0 2%;}
.txtbotm p{font-size: 1.7em;color: #fff;text-shadow: 0 0 10px #5cbca6;}
.sel{width: 70%;margin: 0 auto;}
.inputselect{width: 47%;float: left;}
.inputselect input{float: left;width: 70%;border: 1px solid #d7d7d7;border-radius: 6px;overflow: hidden;font-size: 1.7em;font-family:"franklin Gothic Book","Microsoft YaHei";color: #666;padding: 0 4%;}
.inputselect img{float: left;width: 20%;}
#selectr{margin-left: 6%;}
.cle{clear: both;}
.graph{width: 66.5%;margin: 0 auto;font-size: 1.4em;line-height: 28px;font-family:"franklin Gothic Book","Microsoft YaHei";color: #666;}
.chartphoto{width: 82.2%;margin: 0 auto;}
.chartphoto > p{text-align: center;color: #009c45;margin: 5px 0;font-size: 1.6em;}
#notep{font-size: 1.2em;}
.chartphoto img{width: 100%;}
.chartl{float:left;width: 20%;margin-right: 0.3%;text-align: center;}
.chartr{float:left;width: 79%;padding: 0 2%;}
.chartdescription{font-size: 1.2em;}
#criteria{background-color: #f9f2d2;}
#description{background-color: #e2f2d6;}
#criteria p,#description p{margin: 0;}
.hid{width: 22%;border: 1px solid #d7d7d7; border-radius: 6px;background-color: #fff;padding: 0 1%;line-height: 40px;display: none;font-size: 1.5em;}
#hidl{position: absolute;left: 0;top: 0;}
#hidr{position: absolute;left: 0;top: 0;}
.hid p{color: #666;border-bottom: 1px solid #d7d7d7;margin: 0;}
.hid p:hover{color: #009c45;}
.hid a{text-decoration: none;}
#down{width: 34%;position: absolute;top: 0;left: 0;z-index: 99;}
#up{width: 34%;position: absolute;top: 0;left: 0;z-index: 98;}
.imge{display: none;}
.imghide,.phide{display: none;}
#imgshow,.pshow{display: block;}
.hidlastp{border-bottom: none !important;}
@media(max-width: 1200px){
	.maptext p{font-size: 1.6em;}
	.inputselect input{font-size: 1.5em;}
	.txttop{margin-top: 11%;}
}
@media(max-width: 1006px){
	.maptext p{font-size: 1.3em;}
	.inputselect input{font-size: 1.3em;}
	.txttop{margin-top: 15%;}
}
@media(max-width: 840px){
	#map{width: 100%;float: none;margin: 0 auto;}
	.maptext{width: 100%;}
	.maptext p{font-size: 2.2em;}
	.inputselect input{font-size: 2em;width: 70%;}
	.hid{font-size: 1.8em;}
	.inputselect{width: 100%;margin-top: 20px;}
	#selectr{margin-left: 0;}
	.graph{width: 90%;}
	.wqmain{padding: 5% 0;}
	.txttop{margin-top: 5%;}
	.sel{width: 80%;}
}
@media(max-width: 700px){
	.maptext p{font-size: 1.8em;}
	.txttop{margin-top: 10%;}
	.bancon{width: 80%;}
	.txttop img{width: 10%;}
	.txttop p{margin-left: 16%;}
}
@media(max-width: 540px){
	.maptext p{font-size: 1.5em;}
	.inputselect input{font-size: 1.5em;}
	.hid{font-size: 1.5em;}
	.graph{width: 100%;}
	.txttop{margin-top: 13%;}
}
@media(max-width: 485px){
	.inputselect input{font-size: 1.3em;}
	.txttop{margin-top: 6%;}
	.txttop p{margin: 0 0 6px;}
	.hid{font-size: 14px;}
	.chartphoto > p{font-size: 1.3em;}
	#notep{font-size: 1em;}
	.chartdescription{font-size: 0.9em;}
	.txttop img{width: 15%;}
}
@media(max-width: 380px){
	.txttop{margin-top: 4%;}
	.maptext p{font-size: 1.4em;}
	
}