.main,.main div {
  width:100%;
  height:100%;
  overflow:hidden;
  position: absolute;
}
.main .mainBoxes{
  height:100%;
  overflow: initial;
}
.mainCont{
  position: absolute;
  left: 12%;
  top: 5%;
  z-index: 2;
}
.logo{
  margin-bottom: 0.3rem;
  width: 3.72rem;
  height: auto;
}
.indexTitle{
  width: 5rem;
  height: auto;
}
.navTab{
  margin-top: .3rem;
}
.navTab .top{
  display: flex;
  justify-content:left;
  text-align: center;
}
.navTab .top div{
  flex: 1;
  color: #ffffff;
  font-size: .22rem;
  line-height: .6rem;
  cursor: pointer;
}
.navTab .top .on{
  background: url(../img/indexStar.png)no-repeat 10% center;
  background-color: rgba(255, 255, 255, 0.2);
  border-top-right-radius: .2rem;
  border-top-left-radius: .2rem;
}
.navTab .bottom {
  background-color: rgba(255, 255, 255, 0.2);
  border-bottom-right-radius: .2rem;
  border-bottom-left-radius: .2rem;
}
.navTab .bottom ul{display: none;}
.navTab .bottom ul.on{
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 10px;
  text-align: center;
  padding-top: .2rem;
}

.navTab .bottom ul li{
  margin-bottom: .1rem;
  transition: all .3s;
  background: url(../img/bubbles.png)no-repeat center top;
  background-size: 0rem;
}
.navTab .bottom ul li div{
  transition: all .6s;
  min-height: .6rem;
}
.navTab .bottom ul li:hover{
  background: url(../img/bubbles.png)no-repeat center top;
  background-size: 1.1rem;  
}
.navTab .bottom ul li:hover div{
  transform: rotateY(360deg);
}
.navTab .bottom ul p{
  color: #fff;
  font-family: 'fzzhjt';
  margin-top: .15rem;
  font-size: 0.22rem;
}
.navTab .bottom ul img{
  display: block;
  margin: 0 auto;
}
.mainClose{
  display: none;
}
@media screen and (max-width:1000px){
  .main{
    display: none;
  }
  .mainCont{
    left: 2%;
  }
  .indexTitle{
    width: 5rem;
  }
  .navTab{
    width: 98%;
  }
}