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

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

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

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

.header .slogan {
  width: 903px;
  height: 131px;
  position: absolute;
  top: 0px;
  left: 187px;
  background: url(../../images/guide/slogan01_light.png);
  -webkit-animation: blink-1 0.6s linear infinite both;
          animation: blink-1 0.6s linear infinite both;
}

.header .slogan02 {
  width: 1280px;
  height: 287px;
  position: absolute;
  top: 432px;
  left: 0px;
  background: url(../../images/guide/index_slogan02_light.jpg);
  -webkit-animation: blink-2 1s  linear infinite both;
          animation: blink-2 1s  linear infinite both;
}

.header .logo, .header .logo a {
  width: 211px;
  height: 136px;
  display: block;
}

.header .logo {
  position: absolute;
  top: 360px;
  left: 15px;
  z-index: 9;
  background: url(../../images/logo.png);
}

.header .logoBtn {
  width: 150px;
  height: 30px;
  padding: 3%;
  position: absolute;
  bottom: -11%;
  left: 50%;
  -webkit-transform: translateX(-70%);
          transform: translateX(-70%);
}

@media screen and (orientation: portrait) {
  .header .logoBtn {
    bottom: -18%;
    -webkit-transform: translateX(-60%);
            transform: translateX(-60%);
  }
}

.header .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;
}

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

.btn_gold, .btn_gold a {
  width: 189px;
  height: 228px;
  display: block;
}

.btn_gold {
  position: absolute;
  top: 150px;
  left: 1043px;
  background: url(../../images/guide/btn_link_gold.png);
  -webkit-animation: zoomIn 0.5s, bounceIn 0.5s 0.6s, pulse 1.2s 1.5s infinite;
          animation: zoomIn 0.5s, bounceIn 0.5s 0.6s, pulse 1.2s 1.5s infinite;
}

@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@-webkit-keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

/* ================= 頁面選單 ================= */
.nav {
  width: 100%;
  padding: 2.5%;
  padding-top: 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;
}

@media screen and (orientation: portrait) {
  .nav {
    padding-top: 10%;
  }
}

.nav ul {
  width: 100%;
  max-width: 1024px;
  margin: 1.5rem auto 10px 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;
}

@media screen and (min-height: 414px) and (orientation: landscape) {
  .nav ul {
    padding-top: 0;
    margin: 1rem auto 10px auto;
  }
}

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

.nav ul li.btn01, .nav ul li.btn02, .nav ul li.btn03, .nav ul li.btn04, .nav ul li.btn05, .nav ul li.btn06 {
  background-size: 100%;
}

.nav ul li.btn01 {
  background-image: url(../../images/guide/btn01.png);
}

.nav ul li.btn02 {
  background-image: url(../../images/guide/btn02.png);
}

.nav ul li.btn03 {
  background-image: url(../../images/guide/btn03.png);
}

.nav ul li.btn04 {
  background-image: url(../../images/guide/btn04.png);
}

.nav ul li.btn05 {
  background-image: url(../../images/guide/btn05.png);
}

.nav ul li.btn06 {
  background-image: url(../../images/guide/btn06.png);
}

.nav ul li.btn06-notopen {
  background-image: url(../../images/guide/btn06_cover.png);
}

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

/* =================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;
}