@charset "UTF-8";
html {
  /* background: #000; */
}

body {
  /* 不給反白 字色預設為#fff */
}

p {
  /* bs reset */
  margin: 0;
  padding: 0;
}

ul,
ol {
  /* bs reset */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.display-none {
  display: none;
}

.display-block {
  display: block;
}

/* set rem */
@media screen and (max-width: 1920px) {
  html {
    font-size: 619.466%;
  }
}
@media screen and (max-width: 1680px) {
  html {
    font-size: 546.875%;
  }
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 468.75%;
  }
}
@media screen and (max-width: 1366px) {
  html {
    font-size: 444.661%;
  }
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 333.333%;
  }
}
@media screen and (max-width: 818px) {
  html {
    font-size: 345%;
  }
}
@media screen and (max-width: 750px) {
  html {
    font-size: 312.5%;
  }
}
@media screen and (max-width: 720px) {
  html {
    font-size: 300%;
  }
}
@media screen and (max-width: 640px) {
  html {
    font-size: 266.667%;
  }
}
html,
body {
  background-color: #0e0e0e;
}

body {
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 !important;
  padding: 0 !important;
}

.pc {
  display: block;
}
@media screen and (max-width: 540px) {
  .pc {
    display: none;
  }
}

.mobile {
  display: none;
}
@media screen and (max-width: 540px) {
  .mobile {
    display: block;
  }
}

#gamesintroduce .header-wrap {
  /* main banner */
}
#gamesintroduce .header-wrap > img {
  width: 100%;
}
#gamesintroduce .content-wrap {
  /* main content */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
#gamesintroduce .content-wrap .youtube-box,
#gamesintroduce .content-wrap .content-box {
  width: 10rem;
  margin: auto;
  margin-top: -1px;
}
@media screen and (max-width: 750px) {
  #gamesintroduce .content-wrap .youtube-box,
#gamesintroduce .content-wrap .content-box {
    width: 95vw;
  }
}
#gamesintroduce .content-wrap .youtube-box {
  height: 8.64rem;
  margin-bottom: -2rem;
}
#gamesintroduce .content-wrap .youtube-box > h1,
#gamesintroduce .content-wrap .youtube-box > p {
  position: absolute;
  top: 0;
  opacity: 0;
}
@media screen and (max-width: 750px) {
  #gamesintroduce .content-wrap .youtube-box {
    height: 82.3vw;
  }
}
@media screen and (max-width: 400px) {
  #gamesintroduce .content-wrap .youtube-box {
    margin-bottom: -18vw;
  }
}
#gamesintroduce .content-wrap .content-box {
  position: relative;
  margin-bottom: 0.7rem;
}
#gamesintroduce .content-wrap .content-box .content-img {
  position: relative;
  width: 100%;
  z-index: 10;
}
#gamesintroduce .content-wrap .content-box .bg-left-el,
#gamesintroduce .content-wrap .content-box .bg-right-el {
  position: absolute;
  bottom: 0;
  margin: auto;
  width: 4rem;
}
#gamesintroduce .content-wrap .content-box .bg-left-el {
  top: -2rem;
  left: -2.7rem;
}
#gamesintroduce .content-wrap .content-box .bg-right-el {
  top: 0rem;
  right: -2.7rem;
}
#gamesintroduce .content-wrap .content-box > h1,
#gamesintroduce .content-wrap .content-box > p {
  position: absolute;
  top: 0;
  opacity: 0;
}
@media screen and (max-width: 750px) {
  #gamesintroduce .content-wrap .content-box .bg-left-el {
    top: auto;
  }
  #gamesintroduce .content-wrap .content-box .bg-right-el {
    top: auto;
  }
}
#gamesintroduce .notice-box > p {
  padding-bottom: 0.6rem;
  color: white;
  text-align: center;
  font-size: 0.22rem;
}
@media screen and (max-width: 360px) {
  #gamesintroduce .notice-box > p {
    /* font shadow ------------------------------------ */
    text-shadow: 0.5887px 0.3787px #884122, 0.2905px 0.637px #884122, -0.0994px 0.693px #884122, -0.4585px 0.5292px #884122, -0.6713px 0.1974px #884122, -0.6713px -0.1974px #884122, -0.4585px -0.5292px #884122, -0.0994px -0.693px #884122, 0.2905px -0.637px #884122, 0.5887px -0.3787px #884122;
  }
}
@media screen and (max-width: 499px) and (min-width: 361px) {
  #gamesintroduce .notice-box > p {
    text-shadow: 0.7434px 0.3906px #884122, 0.47712px 0.69132px #884122, 0.10164px 0.83412px #884122, -0.2982px 0.7854px #884122, -0.62916px 0.55692px #884122, -0.81564px 0.20076px #884122, -0.81564px -0.20076px #884122, -0.62916px -0.55692px #884122, -0.2982px -0.7854px #884122, 0.10164px -0.83412px #884122, 0.47712px -0.69132px #884122, 0.74424px -0.3906px #884122;
  }
}
@media screen and (max-width: 767px) and (min-width: 500px) {
  #gamesintroduce .notice-box > p {
    text-shadow: 1.145606px 0.393575px #884122, 0.955479px 0.743554px #884122, 0.662417px 1.013607px #884122, 0.296695px 1.173459px #884122, -0.100513px 1.207367px #884122, -0.486822px 1.109276px #884122, -0.819847px 0.891296px #884122, -1.064469px 0.576436px #884122, -1.194046px 0.199815px #884122, -1.194046px -0.199815px #884122, -1.064469px -0.576436px #884122, -0.819847px -0.891296px #884122, -0.486822px -1.109276px #884122, -0.100513px -1.207367px #884122, 0.296695px -1.173459px #884122, 0.662417px -1.013607px #884122, 0.955479px -0.743554px #884122, 1.145606px -0.393575px #884122;
  }
}
@media screen and (min-width: 768px) {
  #gamesintroduce .notice-box > p {
    text-shadow: 1.580439px 0.406119px #884122, 1.428756px 0.786142px #884122, 1.188999px 1.117235px #884122, 0.874216px 1.376564px #884122, 0.503979px 1.551081px #884122, 0.102753px 1.627738px #884122, -0.304997px 1.601642px #884122, -0.694806px 1.476055px #884122, -1.038947px 1.257501px #884122, -1.319479px 0.959028px #884122, -1.51683px 0.600208px #884122, -1.617952px 0.203875px #884122, -1.617952px -0.203875px #884122, -1.51683px -0.600208px #884122, -1.319479px -0.959028px #884122, -1.038947px -1.257501px #884122, -0.694806px -1.476055px #884122, -0.304997px -1.601642px #884122, 0.102753px -1.627738px #884122, 0.503979px -1.551081px #884122, 0.874216px -1.376564px #884122, 1.188999px -1.117235px #884122, 1.428756px -0.786142px #884122, 1.580439px -0.406119px #884122;
  }
}
#gamesintroduce .footer-wrap {
  /* footer */
  width: 100%;
  display: flex;
  padding: 0.2rem;
  box-sizing: border-box;
  justify-content: center;
  background-color: #444;
  background-color: #222;
}
#gamesintroduce .footer-wrap .footer-box {
  display: flex;
  justify-content: center;
  align-self: center;
}
#gamesintroduce .footer-wrap .footer-box .footer-con {
  width: 100%;
  max-width: 25rem;
  font-size: 0.2rem;
  color: #fff;
  padding-right: 0.5rem;
  align-self: center;
}
#gamesintroduce .footer-wrap .footer-box .footer-con > span {
  display: block;
  font-size: 0.2rem;
  color: #eed1b3;
  padding-top: 0.1rem;
}
#gamesintroduce .footer-wrap .footer-box .footer-img {
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #gamesintroduce .footer-wrap {
    padding: 0.3rem 0.3rem 0.3rem;
  }
}
#gamesintroduce .nav-wrap {
  /* 桌機 右側nav bar */
  position: fixed;
  right: 0;
  top: 3vw;
  background: url(../gameintroblank/bg_nav.png) no-repeat center;
  background-size: 100%;
  width: 12vw;
  height: 30vw;
  z-index: 10;
}
#gamesintroduce .nav-wrap .btn-download,
#gamesintroduce .nav-wrap .btn-fb {
  width: 60%;
  height: 2.5vw;
  position: absolute;
  right: 0;
  left: 0.4vw;
  margin: auto;
  transform: scale(1);
}
#gamesintroduce .nav-wrap .btn-download:active,
#gamesintroduce .nav-wrap .btn-fb:active {
  transform: scale(1.1);
  transition: 0.3s;
}
#gamesintroduce .nav-wrap .btn-download {
  bottom: 6.2vw;
  background: url(../gameintroblank/apk.png) no-repeat center;
  background-size: 93%;
}
#gamesintroduce .nav-wrap .btn-fb {
  bottom: 3.4vw;
  background: url(../gameintroblank/fb.png) no-repeat center;
  background-size: 93%;
}