html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; }
#main{
  width: 100%;
  height: 100%;
  background: url(../img/pcbg.jpg) no-repeat;
  background-size: 100% 100%;
}
.main_top{
  position: absolute;
  top: 10%;
  width: 100%;
  height: 252px;
  text-align: center;
}
.main_top img{
  height: 100%;
  width: auto;
}
.main_bot{
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 760px;
  height: 200px;
  -webkit-transform: translate(-50%, -0%);
  -ms-transform: translate(-50%, -0%);
  -o-transform: translate(-50%, -0%);
  transform: translate(-50%, -0%);
}
ul,li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.main_bot ul{
  width: auto;
}
.main_bot li{
  position: absolute;
  width: 130px;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.main_bot li:nth-child(1){
  left: 0px;
  bottom: 90px;
}
.main_bot li:nth-child(2){
  left: 90px;
  top: 40px;
}
.main_bot li:nth-child(3){
  left: 180px;
  bottom: 90px;
}
.main_bot li:nth-child(4){
  left: 270px;
  top: 40px;
}
.main_bot li:nth-child(5){
  left: 360px;
  bottom: 90px;
}
.main_bot li:nth-child(6){
  left: 450px;
  top: 40px;
}
.main_bot li:nth-child(7){
  left: 540px;
  bottom: 90px;
}
.main_bot li:nth-child(8){
  left: 630px;
  top: 40px;
}
li img{
  width: 100%;
}
#music{
  opacity: 1;
}
.music{
  width: 40px;
  position: absolute;
  right: 50px;
  top: 50px;
  z-index: 3;
  
}
.music img{
  width: 100%;
}
.rotate-center {
  -webkit-animation: rotate-center 2s linear infinite;
  animation: rotate-center 2s linear infinite;
}
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@media only screen and (max-width:800px) { 
  html { overflow:hidden; } 
  #main{
    width: 100%;
    height: 100%;
    background: url(../img/shoubg.jpg) no-repeat;
    background-size: 100% 100%;
  }
  .main_top{
    top: 15%;
    width: 100%;
    height: auto;
  }
  .main_top img{
    height: auto;
    width: 82%;
  }
  .main_bot{
    width: 98%;
    height: 135px;
    left: 49.5%;
    bottom: 24%;
  }
  .main_bot li{
    width: 17%;
  }
  .main_bot li:nth-child(1){
    left: 0%;
    bottom: 50px;
  }
  .main_bot li:nth-child(2){
    left: 12%;
    top: 50px;
  }
  .main_bot li:nth-child(3){
    left: 24%;
    bottom: 50px;
  }
  .main_bot li:nth-child(4){
    left: 36%;
    top: 50px;
  }
  .main_bot li:nth-child(5){
    left: 48%;
    bottom: 50px;
  }
  .main_bot li:nth-child(6){
    left: 60%;
    top: 50px;
  }
  .main_bot li:nth-child(7){
    left: 72%;
    bottom: 50px;
  }
  .main_bot li:nth-child(8){
    left: 84%;
    top: 50px;
  }
  .music{
    width: 35px;
    right: 20px;
    top: 20px;
  }
}