/* CSS Document */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
  margin: 0;
  padding: 0;
}
html,
body,
fieldset,
img,
iframe,
abbr {
  border: 0;
}
li {
  list-style: none;
}
textarea {
  overflow: auto;
  resize: none;
}
a,
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
  font-weight: bold;
}
a,
a:hover {
  text-decoration: none;
}
body,
html {
  width: 100%;
  font-weight: normal;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: "Microsoft YaHei", "Helvetica Neue", "HelveticaNeue", "HelveticasimSun", "Helvetica", "simSun", "Lucida Grande", "Lucida Sans Unicode", "Arial";
}
body {
  background: #f2f2f2;
  opacity: 1;
  transition: opacity 500ms ease-in;
}
a {
  text-decoration: none;
}
input {
  -webkit-appearance: none;
}
* {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: rgba(0, 0, 0, 0);
}
p,
a,
li,
span,
input {
  font-size: 0.28rem;
}
h1 {
  font-size: 0.32rem;
}
h2 {
  font-size: 0.34rem;
}
h3 {
  font-size: 0.3rem;
}
h4 {
  font-weight: normal;
  font-size: 0.3rem;
}
h5 {
  font-size: 0.28rem;
}
textarea {
  font-size: 24px;
}
a {
  color: #434343;
}
html {
  font-size: 312.5%;
}
@media screen and (max-width: 359px) and (orientation: portrait) {
  html {
    font-size: 266.67%;
  }
}
@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
  html {
    font-size: 300%;
  }
}
@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
  html {
    font-size: 320%;
  }
}
@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
  html {
    font-size: 333.33%;
  }
}
@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
  html {
    font-size: 345%;
  }
}
@media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) {
  html {
    font-size: 360%;
  }
}
@media screen and (min-width: 480px) and (max-width: 639px) and (orientation: portrait) {
  html {
    font-size: 400%;
  }
}
@media screen and (min-width: 640px) and (orientation: portrait) {
  html {
    font-size: 533.33%;
  }
}
@font-face {
  font-family: "poptext";
  src: url('poptext.woff2');
}
/*******************横竖屏弹层样式************************/
#forhorview {
  position: fixed;
  z-index: 1002;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  font-size: .32rem;
  color: #fff;
  text-align: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  display: none;
}
#forhorview p {
  font-size: 0;
  background: url(../img/forhorview_tips.png) center no-repeat;
  background-size: contain;
  width: 100%;
  height: 0.86rem;
}
#forhorview.show {
  display: -ms-flexbox;
  display: flex;
}
.popup {
  width: 100%;
  height: 100%;
  max-height: 13.34rem;
  position: fixed;
  top: 0;
  left: 0;
  background: url(../img/bg3.jpg) center no-repeat;
  background-size: cover;
  z-index: 999;
  display: none;
}
.popup.show {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
.popup .pop-wrap {
  position: relative;
  width: 100%;
}
.popup .pop-close {
  position: absolute;
  background: url(../img/pop_close.png) no-repeat;
  background-size: contain;
  width: 0.64rem;
  height: 0.64rem;
  bottom: 0.8rem;
  left: 50%;
  margin-left: -0.32rem;
}
.popup .pop-ts {
  position: absolute;
  width: 100%;
  height: 13.34rem;
  left: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  opacity: 0;
}
.popup .pop-ts.tsplayed {
  opacity: 1;
}
.popup .pop-text {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  margin-top: 0.4rem;
  z-index: 2;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.popup .pop-text p {
  font-family: "poptext";
  font-size: .24rem;
  text-align: center;
  line-height: 0.34rem;
  color: #909090;
}
.popup .pop-text p span {
  font-family: "poptext";
  font-size: .24rem;
  color: #784226;
}
.popup.countdown-pop .countdown {
  position: relative;
  width: 100%;
  height: 0.5rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
.popup.countdown-pop .countdown > div {
  position: relative;
  font-family: "MonogramsToolbox";
  font-size: .5rem;
  color: #d7d7d7;
  line-height: 1;
  text-align: center;
  margin: 0 1px;
}
.popup.countdown-pop .countdown > div.hours,
.popup.countdown-pop .countdown > div.minutes,
.popup.countdown-pop .countdown > div.seconds {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
.popup.countdown-pop .countdown > div.hours span,
.popup.countdown-pop .countdown > div.minutes span,
.popup.countdown-pop .countdown > div.seconds span {
  font-size: .5rem;
  width: 0.4rem;
}
.popup.countdown-pop .countdown::before {
  content: '';
  position: absolute;
  background: url(../img/pop_cd_bg.png) no-repeat;
  background-size: contain;
  width: 3.46rem;
  height: 1.43rem;
  top: -0.5rem;
  left: 50%;
  margin-left: -1.7rem;
}
.popup.countdown-pop .pop-text {
  position: relative;
  top: auto;
  left: auto;
  margin-top: 0.8rem;
}
.popup.clue-pop .pop-wrap {
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.popup.clue-pop .popup-allow-click {
  position: absolute;
  width: 100%;
  height: 6rem;
  left: 0;
  top: 50%;
  margin-top: -4.2rem;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 9;
}
.popup#pop-suitcase .popup-allow-click {
  height: 5.4rem;
  margin-top: -4rem;
}
.popup#pop-pen .popup-allow-click {
  height: 4.8rem;
  margin-top: -3rem;
}
.popup#pop-potion .popup-allow-click {
  height: 6.4rem;
  margin-top: -4.2rem;
}
.popup#pop-hat .popup-allow-click {
  height: 4.8rem;
  margin-top: -3rem;
}
.popup#pop-vase .popup-allow-click {
  height: 6.8rem;
  margin-top: -4.2rem;
}
.popup#pop-vase .pop-text {
  margin-top: 1.2rem;
}
.popup#pop-newspaper .popup-allow-click {
  height: 5.4rem;
  margin-top: -3.6rem;
}
.popup#pop-gun .popup-allow-click {
  height: 5.6rem;
  margin-top: -3.2rem;
}
.popup#pop-photo .popup-allow-click {
  height: 5rem;
  margin-top: -2.9rem;
}
.popup#pop-note .popup-allow-click {
  height: 5.6rem;
  margin-top: -3.2rem;
}
.popup#pop-computer .popup-allow-click {
  height: 6rem;
  margin-top: -4.2rem;
}
.copy-tips-pop {
  position: absolute;
  padding: 0 0.6rem;
  font-size: .28rem;
  color: #fff;
  line-height: 0.8rem;
  background-color: #000;
  border-radius: 0.8rem;
  top: 50%;
  left: 50%;
  z-index: 98;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: none;
}
.pre-poptext {
  position: absolute;
  z-index: -10000;
  font-family: "poptext";
  opacity: 0;
}