body {
  font-family: "STHeiti", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  margin: 0 auto;
  max-width: 750px;
  background: #000;
}
img {
  vertical-align: top;
  width: 100%;
}
.top {
  position: relative;
}
.top .logo {
  width: 3.05rem;
  position: absolute;
  left: 3.48rem;
  top: 0.55rem;
}
.top .photo {
  width: 8.2rem;
  position: absolute;
  left: 0.9rem;
  top: 2.7rem;
}
.naviBox {
  padding: 0.2rem;
  background: #0f0f0f;
}
.naviBox .navi {
  border: 1px solid #292929;
}
.naviBox .navi > li {
  float: left;
  width: 33.33%;
  position: relative;
  box-sizing: border-box;
  border-right: 1px solid #292929;
}
.naviBox .navi > li.li02,
.naviBox .navi > li.li05 {
  border-right: none;
}
.naviBox .navi > li.li01,
.naviBox .navi > li.li02 {
  width: 50%;
  border-bottom: 1px solid #292929;
}
.naviBox .navi > li > a {
  padding: 0.82rem 0 0.78rem;
  display: block;
  position: relative;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.33rem;
  text-align: center;
}
.naviBox .navi > li > a img {
  margin: 0 auto;
  display: block;
  width: auto;
  height: 0.42rem;
}
.naviBox .navi > li > a span span {
  margin-bottom: 0.1rem;
  display: block;
}
.naviBox .navi > li:hover > a,
.naviBox .navi > li.on > a {
  color: #000;
  background: #fdcc03;
}
.naviBox .navi > li:hover > a span span,
.naviBox .navi > li.on > a span span {
  background: url(../images/img01_on.png) no-repeat center top;
  background-size: auto 0.42rem;
}
.naviBox .navi > li:hover > a span img,
.naviBox .navi > li.on > a span img {
  visibility: hidden;
}
.naviBox .navi > li.li02:hover > a span span {
  background-image: url(../images/img02_on.png);
}
.naviBox .navi > li.li03:hover > a span span {
  background-image: url(../images/img03_on.png);
}
.naviBox .navi > li.li04:hover > a span span {
  background-image: url(../images/img04_on.png);
}
.naviBox .navi > li.li05:hover > a span span {
  background-image: url(../images/img05_on.png);
}
.naviBox .jsBox {
  padding-bottom: 0.2rem;
  width: 9.58rem;
  position: absolute;
  left: 0;
  bottom: 100%;
  display: none;
}
.naviBox .navi .arrow {
  margin-left: -0.11rem;
  width: 0.22rem;
  position: absolute;
  left: 50%;
  top: -0.22rem;
  z-index: 10;
  display: none;
}
.naviBox .navi li.on .arrow {
  display: block;
}
.naviBox .jsBox ul {
  padding: 0.4rem 0.4rem 0.15rem;
  border: 1px solid #fdcc03;
  background: rgba(0, 0, 0, 0.8);
}
.naviBox .jsBox li {
  margin-bottom: 0.27rem;
  overflow: hidden;
  zoom: 1;
  color: #313131;
  font-size: 0.3rem;
  line-height: 0.6rem;
  text-align: center;
}
.naviBox .jsBox li .ms {
  margin-right: 4%;
  width: 12.5%;
  display: block;
  float: left;
  background: #fff;
}
.naviBox .jsBox li img {
  margin: 0.2rem 3% 0 0;
  width: 5%;
  display: block;
  float: left;
}
.naviBox .jsBox li .url {
  width: 48%;
  float: left;
  display: block;
  background: #fff;
}
.naviBox .jsBox li a {
  display: block;
  float: right;
  width: 24.5%;
  color: #060403;
  font-weight: bold;
  background: #fdcc03;
}
#footer {
  overflow: hidden;
  background: #000;
}
#footer p {
  color: #969696;
  font-size: 0.28rem;
  line-height: 1rem;
  text-align: center;
}
#footer p span {
  color: #fff;
}

body {
  font-family: "STHeiti", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  margin: 0 auto;
  max-width: 750px;
  background: #000;
}
img {
  vertical-align: top;
  width: 100%;
}
.top {
  position: relative;
}
.top .logo {
  width: 3.05rem;
  position: absolute;
  left: 3.48rem;
  top: 0.55rem;
}
.top .photo {
  width: 8.2rem;
  position: absolute;
  left: 0.9rem;
  top: 2.7rem;
}
.naviBox {
  padding: 0.2rem;
  background: #0f0f0f;
}
.naviBox .navi {
  border: 1px solid #292929;
}
.naviBox .navi > li {
  float: left;
  width: 33.33%;
  position: relative;
  box-sizing: border-box;
  border-right: 1px solid #292929;
}
.naviBox .navi > li.li02,
.naviBox .navi > li.li05 {
  border-right: none;
}
.naviBox .navi > li.li01,
.naviBox .navi > li.li02 {
  width: 50%;
  border-bottom: 1px solid #292929;
}
.naviBox .navi > li > a {
  padding: 0.82rem 0 0.78rem;
  display: block;
  position: relative;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.33rem;
  text-align: center;
}
.naviBox .navi > li > a img {
  margin: 0 auto;
  display: block;
  width: auto;
  height: 0.42rem;
}
.naviBox .navi > li > a span span {
  margin-bottom: 0.1rem;
  display: block;
}
.naviBox .navi > li:hover > a,
.naviBox .navi > li.on > a {
  color: #000;
  background: #fdcc03;
}
.naviBox .navi > li:hover > a span span,
.naviBox .navi > li.on > a span span {
  background: url(../images/img01_on.png) no-repeat center top;
  background-size: auto 0.42rem;
}
.naviBox .navi > li:hover > a span img,
.naviBox .navi > li.on > a span img {
  visibility: hidden;
}
.naviBox .navi > li.li02:hover > a span span {
  background-image: url(../images/img03_on.png);
}
.naviBox .navi > li.li03:hover > a span span {
  background-image: url(../images/img02_on.png);
}
.naviBox .navi > li.li04:hover > a span span {
  background-image: url(../images/img04_on.png);
}
.naviBox .navi > li.li05:hover > a span span {
  background-image: url(../images/img05_on.png);
}
.naviBox .jsBox1 {
  padding-bottom: 0.2rem;
  width: 4.8rem;
  position: absolute;
  left: 0;
  bottom: 100%;
  display: none;
}
.naviBox .navi .arrow {
  margin-left: -0.11rem;
  width: 0.22rem;
  position: absolute;
  left: 50%;
  top: -0.22rem;
  z-index: 10;
  display: none;
}
.naviBox .navi li.on .arrow {
  display: block;
}
.naviBox .jsBox1 ul {
  padding: 0.28rem 0.4rem 0.62rem 1.1rem;
  border: 1px solid #fdcc03;
  background: rgba(0, 0, 0, 0.8);
}
.naviBox .jsBox1 li {
  margin-top: 0.35rem;
  overflow: hidden;
  zoom: 1;
  color: #313131;
  font-size: 0.3rem;
  line-height: 0.6rem;
}
.naviBox .jsBox1 li .ms {
  margin-right: 4%;
  width: 12.5%;
  display: block;
  float: left;
  background: #fff;
}
.naviBox .jsBox1 li img {
  display: inline-block;
  margin: -0.02rem 0.2rem 0 0;
  vertical-align: middle;
  width: 0.39rem;
}
.naviBox .jsBox1 li .url {
  /*width: 48%;*/
  margin-left: 0.1rem;
  color: white;
  /*background: #fff;*/
}
.naviBox .jsBox1 li a {
  display: block;
  float: right;
  width: 24.5%;
  color: #060403;
  font-weight: bold;
  background: #fdcc03;
}
#footer {
  overflow: hidden;
  background: #000;
}
#footer p {
  color: #969696;
  font-size: 0.28rem;
  line-height: 1rem;
  text-align: center;
}
#footer p span {
  color: #fff;
}

.li04 {
  position: relative;
}
.li04:hover .saBox {
  display: block;
}
.saBox {
  position: absolute;
  z-index: 50;
  top: -130%;
  left: -56%;
  width: 250px;
  display: none;
}
@media screen and (min-width: 320px) and (max-width: 330px) {
  .saBox {
    top: -150%;
    left: -76%;
  }
}
@media screen and (min-width: 413px) and (max-width: 414px) {
  .saBox {
    top: -120%;
    left: -47%;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .saBox {
    width: 450px;
    top: -160%;
    left: -45%;
  }
  .saul {
    width: 395px;
    margin: 19px auto !important;
  }
}
.li04:hover .saBox {
  display: block;
}
.position {
  position: absolute;
  top: 0px;
  left: 1.8%;
}
.saul {
  /* border: 1px solid red; */
  margin: 10px auto;
  /* position: absolute;
  top: 0px; */
}
.saul > a {
  display: block;
  width: 110%;
  margin: 5px auto;
}