html,body{margin:0; padding:0; width:100%; font-family:微软雅黑}
a{text-decoration:none}
.fr{float:right;}
.fl{float:left;}
.top{width:100%;  font-size:1vw;}
.top .weather{float:left; color:#FFF; font-weight:bold; width:24%; padding:1.7% 10px 0;}
.top .weather .logo{float:right; width:35%;}
.top .topRight{float:right; width:20%; padding:0px 40px;  font-weight:bold; color:#FFF; margin-top:2%; display:flex; justify-content:space-between; align-items:center; position:relative;}
.top .topRight .child{position:absolute; top:40px; left:20px; margin:0; list-style:none; padding:0; z-index:999; border-radius:5px; overflow:hidden; display:none}
.top .topRight .child li{background:#FED130; height:40px; line-height:40px; padding:0 20px; color:#000}
.top .topRight .child li a{color:#000}

button{background:#FED130; color:#000; border:0; font-size:1vw; font-weight:bold; padding:0.5vw 1vw; border-radius:5px;}

.menu{position:absolute; top:10%; height:60px; width:100%; display:flex; justify-content:center; align-items:center;}
.menu button{margin:0 20px;}

.area{position:absolute; width:460px; left:50%; top:170px; margin-left:-230px; display:flex; justify-content:space-around;}
.area .areaItem{width:200px; height:50px; background:#0476D6; display:flex; align-items:center; border-radius:5px;}
.area .areaItem span{width:60px; color:#FFF; text-align:center;}
.area .areaItem select{width:140px; height:50px; background:#FFF; border-radius:5px; border:0}


.box{position:absolute;  width:27vw;}
.box .boxbg{width:20vw; height:20vh; position:absolute; top:0; left:0; background-image: url(../images/box_bg.png); background-size: 100% 100%; background-repeat: no-repeat; background-origin: padding-box; border-width: 20px 3.5vw; border-style: solid; border-image:url('../images/box_border.png') 20 50 stretch;}
.box .boxcontent{padding:15px; position:relative;}
.box .boxcontent .header{width:100%; height:39px; font-weight:bold; display:flex; justify-content:space-between; align-items:center}
.box .boxcontent .title{background:url(../images/title_bg.png) no-repeat; width:50%; font-size:1vw; color:#FFF; font-weight:bold; line-height:2.2vw; padding-left:20px; background-size:100%;}
.box .boxcontent .more{background:#FED130; color:#000; padding:5px 15px; border-radius:20px; font-size:14px;}

.box .boxcontent .content{padding:2vh 0.5vw;}
.box .boxcontent ul.content{margin:0; list-style:none; display:flex; justify-content:space-around; flex-wrap:wrap;}
.box .boxcontent .content li{display:block; width:28%; margin-bottom:18px; height:3vh; line-height:3vh; text-align:left; color:#FFF; font-size:0.8vw;}
.box .boxcontent .content li input{width:20px; height:20px; background:none}
.box .boxcontent .content li input {display: none;}
.box .boxcontent .content li input+label {background: url(../images/checkbox1.png) 2vh 0.5vh no-repeat; border:2px solid #C5AB3C; border-radius:20px; background-size: 2vh 2vh; display:block; width:calc(100% - 2.5vw); height:100%; padding-left:2.5vw;}
.box .boxcontent .content li input:checked+label {background-image: url(../images/checkbox2.png); background-color:#C5AB3C;}

.map{width:100%;}
.map img{width:100%;}

.loginbg{position: absolute;width: 100%; height: 100%;}
.loginbg img{width:100%;}
.login{width:15vw; padding:1.5vw; background:rgba(255,255,255,.5);  position:absolute; top:20vw;z-index: 999; left:50%; margin-left:-9vw;}
.login .fields{background:#FFF; width:100%; height:4vh; display:flex; justify-content:space-around; align-items:center; margin-top:2vh;}
.login .fields input{border:0; height:3vh;}
.login .fields input:focus, .login .code input:focus{outline:none}
.login .fields img{width:14px; height:14px;}
.login .code{background:#FFF; width:45%; height:4vh; display:flex; justify-content:space-around; align-items:center;}
.login .code input{width:80px; border:0; height:3vh;}
.login .submit{background:#FFF; width:100%; margin-top:2vh; border-radius:3px; height:4vh; line-height:4vh; font-weight:normal; font-size:16px; padding:0}