.indexbg{
  height: 100%;
  background: url('../images/indexbg.png') no-repeat;
  background-size: 100% 100%;
}
.show_text{
  background-color: transparent;
  position: fixed;
  top: 25%;
  right: 6%;
  width: 50px;
  height: 50px;
}
h1{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5%;

}
h1 img{
  width: 1.45rem;
  margin-right: 0.4rem;
}
h1 span{
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 6px;
  font-weight:bold;
  text-shadow:0px 0px 30px #00000090;
}
.indexContent{
  width: 76.3%;
  height: 50%;
  margin: 0 auto;
}
.indexContent .mapweather{
  text-align: right;
  color: #fff;
  text-shadow: 0px 0px 8px #00001087;
  font-size: 0.35rem;
  padding-right: 20px;
  margin-top: 30px;
}
.navigation{
  margin:6px 0 20px 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.navigation li{
  margin-bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  width: 270px;
  height: 270px;
  margin: 10px;
  transition: 0.3s;
}
.navigation li:hover{
  transform: scale(1.1,1.1);
}
.navigation li i{
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
}
.navigation li i:first-of-type{
  position: absolute;
  top: 0.47rem;
}
.navigation li i:last-of-type{
  position: absolute;
  top: 1rem;
}
.navigation li p{
  position: absolute;
    bottom: 0.6rem;
    color: #fff;
    font-size:0.35rem;
}
.navigation li p:last-of-type{
    top: 2.1rem;
    color: #fff9;
    width: 1.6rem;
    text-align: center;
    font-size: 0.2rem;
}
.item1 .map{
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-image: linear-gradient(to right, #ff7272, rgba(255, 0, 168, 0.5)), linear-gradient(to right, #fcd530, #f2b62e 102%);
}
.item1 .map i{
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url("../images/map.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 0.1rem;
  top: 12px !important;
  left: 0.2rem;
}
.item1 .map span{
  color: #fff;
  font-size: 0.25rem;
  margin-left: 0.6rem;
}
.navigation .item2{
  background-image: linear-gradient(157deg, #22dd93 2%, #07a2b1 85%);
}
.navigation .item2 i.evacuationRoute_1{
  background: url("../images/evacuationRoute_1.png");
}
.navigation .item2 i.evacuationRoute_2{
  background: url("../images/evacuationRoute_2.png");
}
.navigation .item3{
  background-image: linear-gradient(134deg, #f0ef2b, #e3be02 99%);
}
.navigation .item3 i.organization_1{
  background: url("../images/organization_1.png");
}
.navigation .item3 i.organization_2{
  background: url("../images/organization_2.png");
}
.navigation .item4{
  background-image: linear-gradient(157deg, #b544e4 2%, #654fd7 85%);
}
.navigation .item4 i.drill_1{
  background: url("../images/drill_1.png");
}
.navigation .item4 i.drill_2{
  background: url("../images/drill_2.png");
}
.navigation .item5{
  background-image: linear-gradient(157deg, #22dddb 2%, #4492f7 85%);
}
.navigation .item5 i.materialReserve_1{
  background: url("../images/materialReserve_1.png");
}
.navigation .item5 i.materialReserve_2{
  background: url("../images/materialReserve_2.png");
}
.navigation .item6{
  background-image: linear-gradient(138deg, #f2d62d 3%, #f18a2f 98%);
}
.navigation .item6 i.teamBuilding_1{
  background: url("../images/teamBuilding_1.png");
}
.navigation .item6 i.teamBuilding_2{
  background: url("../images/teamBuilding_2.png");
}
.navigation .item7{
  background-image: linear-gradient(157deg, #3a8eeb 2%, #5325e7 85%);
}
.navigation .item7 i.knowledge_1{
  background: url("../images/knowledge_1.png");
}
.navigation .item7 i.knowledge_2{
  background: url("../images/knowledge_2.png");
}
.navigation .item8{
  background-image: linear-gradient(138deg, #fc9b41 5%, #fc5496 67%);
}
.navigation .item8 i.flag_1{
  background: url("../images/flag_1.png");
}
.navigation .item8 i.flag_2{
  background: url("../images/flag_2.png");
}
.navigation .item9{
  background-image: linear-gradient(136deg, #d75bc1 3%, #8836da 99%);
}
.navigation .item9 i.horn_1{
  background: url("../images/horn_1.png");
}
.navigation .item9 i.horn_2{
  background: url("../images/horn_2.png");
}
/* .navigation .item9{
  height: 449px;
  position: absolute;
  right: -20.5%;
  background-image: linear-gradient(168deg, #32ceff 1%, #146efa 95%);
}
.navigation .item9 i.drill_1{
  background: url("../images/drill_1.png");
  top: 32%;
}
.navigation .item9 i.drill_2{
  background: url("../images/drill_2.png");
  top: 44%;
}
.navigation .item9 p{
  bottom: 38%;
} */
.maskbg_index{
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top:0;
  background: rgba(9,8,8,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.maskbg_index .maskContent{
  width: 300px;
  height: 250PX;
  margin: 0 0 2px;
  padding: 48px 18px;
  border-radius: 4px;
  background-color: #fff;
  flex-direction: column;
}
.maskbg_index .maskContent .title{
  text-align: center;
  font-size: 24px;
}
.maskbg_index .maskContent .subject{
  margin-top: 31px;
  text-align: center;
  flex-direction: column;
}
.layui-input-block{
  margin-left: 70px;
}
.layui-form-label{
  text-align: left;
  width: 70px;
}