.area-text{width: 94%; border-radius: 3px; border: 1px solid #ccc; line-height: 34px; height: 34px; padding: 0px 2%;font-size: 14px; background: #fff;}    
.area-bg{ width:100%; height:100%; background:#000; position: fixed; opacity: 0.5; left:0px; top:0px; display: none; z-index:9999; }
.area{width: 100%;  position: fixed;  bottom: 0px; left:0px; z-index:99999; border-radius: 15px 15px 0 0; background:#fff; padding:15px 0 15px 0; height:85%; display: none;}
.area i.close{ color: #fff; position: absolute; right: 5px; top: 5px; width: 25px;height: 25px;  line-height: 25px;  background: #ccc;text-align: center;   border-radius: 50%;}
.area dl{ padding:0 3%;}
.area dt{padding:0 3%; border-bottom:1px solid #ccc; line-height:30px; margin:0 0 15px 0; overflow: hidden;}
.area dt span{ margin:0 15px 0 0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; max-width:80px; display: inline-block;}
.area dt span:last-child{ max-width:100px}
.area dt span.hover{ color:red; font-weight: bold;}
.area dl dd{ float:left; border: 1px solid #ccc;padding: 3px 7px;   margin: 0 10px 10px 0; border-radius: 2px; font-size:14px;}
.area dl dd.hover{ color:#fff; border: 1px solid red; background:red;}
.area dl i {font-size: 30px;position: absolute;   top: 120px;   left: 50%;   margin-left: -17px;}


@media screen and (min-width:800px){
	.area{width: 800px; left:50%; margin-left:-400px;}
}