@charset "UTF-8";
@import url("/css/font-awesome-4.5.0/css/font-awesome.min.css");
body {
  background-color: #0c0000;
}

.mian_container .mian_logo a {
  display: none !important;
}

.wrapper {
  background-image: url(../../images/guide/indexbg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  color: #fff;
}

hr {
  border: 0;
  height: 1px;
  background-color: #ffd543;
}

/* ================= 版頭 ================= */
.header {
  width: 100%;
  position: relative;
}

.header .container {
  width: 1280px;
  height: 779px;
  position: relative;
}

.header .container .slogan {
  width: 553px;
  height: 394px;
  position: absolute;
  top: 141px;
  left: 152px;
  background: url(../../images/guide/slogan.png);
}

.header .container .logo {
  width: 176px;
  height: 114px;
  position: absolute;
  top: 443px;
  left: 725px;
}

.header .container .logo a {
  display: block;
  width: 176px;
  height: 114px;
}

.header .container .slogan {
  background-repeat: no-repeat;
  background-size: 100% !important;
}

.logoBtn {
  width: 150px;
  height: 30px;
  position: absolute;
  bottom: 2.5%;
  left: 44%;
}

.logoBtn a {
  position: relative;
  width: 150px;
  height: auto;
  display: block;
  border: 1px solid #fff;
  border-radius: 15px;
  background: rgba(33, 30, 72, 0.5);
  color: #fff;
  text-align: center;
  word-spacing: .15em;
  padding: 3px 0;
}

.logoBtn a:hover {
  top: 2px;
}

/* ================= 頁面選單 ================= */
.nav {
  width: 100%;
  padding-bottom: 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.nav ul {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.nav ul li {
  display: block;
  list-style: none;
  text-indent: -9999px;
  width: 310px;
  height: 106px;
  cursor: pointer;
  margin: 2px;
}

.nav ul li.btn01 {
  background-image: url(../../images/guide/btn01.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li.btn02 {
  background-image: url(../../images/guide/btn02.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li.btn03 {
  background-image: url(../../images/guide/btn03.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li.btn04 {
  background-image: url(../../images/guide/btn04.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li.btnNO {
  background-image: url(../../images/guide/btnNO.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li.btnNO02 {
  background-image: url(../../images/guide/btnNO02.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li.btnNO03 {
  background-image: url(../../images/guide/btnNO03.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li.btnNO04 {
  background-image: url(../../images/guide/btnNO04.png?20210106);
  background-repeat: no-repeat;
  background-size: 100%;
}

.nav ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 927px) {
  /*容器基本框架*/
  .wrapper {
    background-size: 150%;
    overflow: hidden;
  }
  .header .container {
    width: 100%;
    height: 0;
    padding-bottom: 60.85938%;
  }
  .header .container .slogan {
    width: 43.20312%;
    height: 0;
    padding-bottom: 30.78125%;
    top: 18.10013%;
    left: 11.875%;
    background-size: 100%;
  }
  .header .container .logoBtn {
    width: 15%;
    height: 0;
    padding-bottom: 2.34375%;
    bottom: 4%;
    left: 43%;
  }
}

@media only screen and (max-width: 927px) and (max-width: 569px) {
  .header .container .logoBtn {
    bottom: 5%;
  }
}

@media only screen and (max-width: 927px) and (max-width: 415px) {
  .header .container .logoBtn {
    width: 27%;
    bottom: 11%;
    left: 36%;
  }
}

@media only screen and (max-width: 927px) {
  .header .container .logoBtn a {
    width: 100%;
    padding-bottom: 2.34375%;
  }
}

@media only screen and (max-width: 927px) and (max-width: 569px) {
  .header .container .logoBtn a {
    font-size: 12px;
    word-spacing: 0;
  }
}

@media only screen and (max-width: 927px) and (max-width: 415px) {
  .header .container .logoBtn a {
    padding: 0;
  }
}

@media only screen and (max-width: 927px) {
  /* ================= 頁面選單 ================= */
  .nav ul {
    width: 100%;
  }
  .nav ul li {
    width: 24.21875%;
    height: 0;
    padding-bottom: 8.28125%;
  }
  .nav ul li a {
    padding-bottom: 8.28125%;
  }
}

@media only screen and (max-width: 927px) and (max-width: 415px) {
  .nav ul li {
    width: 42%;
    padding-bottom: 15%;
  }
}

/* =================RWD區塊顯示控制================= */
.RwdPcData {
  border: 10px double #ff6600;
  background: url(/Action/images/DataPcTitle.png) right top no-repeat;
}

.RwdMobileData {
  border: 10px double #008080;
  background: url(/Action/images/DataMobileTitle.png) right top no-repeat;
}

.RwdIngameData {
  border: 10px double #3b5998;
  background: url(/Action/images/DataInGameTitle.png) right top no-repeat;
}