.app { width: 100%; height: 100%; background-color: #e6c78b; }
.container { width: 6.82rem; height: 11.77rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.music-control { width: 0.59rem; height: 0.59rem; background: url("../images/music.png") no-repeat; position: absolute; right: 0.4rem; top: 0.45rem; z-index: 100000; background-size: 0.59rem 0.59rem; animation: musicRotate 2s linear infinite; -webkit-animation: musicRotate 2s linear infinite; }
.music-control.pause { background: url("../images/music-pause.png") no-repeat; background-size: 0.59rem 0.59rem; animation: initial !important; -webkit-animation: initial !important; }
.page { width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%; overflow: hidden;}
.loading { background-color: #e6c78b; background-position: 50% 50%; position: absolute; left: 0; top: 0; z-index: 199; transform: rotateY(0deg); }
.loading.rotate { transform: rotateY(180deg); transition: all 2s; }
.box1 { background-color: #666; position: absolute; left: 0; top: 0; z-index: 199; display: none; }
.loading .item { width: 6.82rem; height: 11.77rem; background-color: #9d0b0b; border-radius: 0.15rem; position: absolute; left: 50%; top: 50%; margin: -5.885rem 0 0 -3.41rem; }
.loading .item .box { width: 6.51rem; height: 11.37rem; border: 2px solid rgba(174, 151, 107, 0.45); position: absolute; left: 50%; top: 50%; margin: -5.685rem 0 0 -3.255rem; }
.loading.home .item .box { border-bottom: 0; border-top: 0; }
.loading.home .item .box .bottom .left-border { width: 0.42rem; height: 0.02rem; background: rgba(174, 151, 107, 0.45); position: absolute; left: -0.41rem; bottom: 0.09rem; }
.loading.home .item .box .bottom .right-border { width: 0.42rem; height: 0.02rem; background: rgba(174, 151, 107, 0.45); position: absolute; right: -0.47rem; bottom: 0.09rem; }
.loading.home .item .box .top .left-border { width: 0.42rem; height: 0.02rem; background: rgba(174, 151, 107, 0.45); position: absolute; left: -0.41rem; top: 0.07rem; }
.loading.home .item .box .top .right-border { width: 0.42rem; height: 0.02rem; background: rgba(174, 151, 107, 0.45); position: absolute; right: -0.47rem; top: 0.07rem; }
.loading .item .box .top { width: 3.63rem; height: 0.15rem; position: absolute; top: -0.08rem; left: 46.5%; margin-left: -1.815rem; box-sizing: content-box; padding: 0 0.2rem; }
.loading .item .box .top img { width: 3.63rem; height: 0.15rem; display: block; }
.loading .item .box .bottom { width: 3.63rem; height: 0.62rem; position: absolute; bottom: -0.05rem; left: 46.5%; margin-left: -1.815rem; box-sizing: content-box; padding: 0 0.2rem; background-size: 7.5rem 13.34rem; background-position: center -0.3rem; }
.loading .item .box .bottom img { width: 3.63rem; height: 0.62rem; display: block; }
.loading .item .box .radius-top { width: 0.9rem; height: 0.94rem; position: absolute; top: -0.1rem; }
.loading .item .box .tl { background: url("../images/tl.png") no-repeat center; background-size: 0.9rem 0.94rem; left: -0.12rem; }
.loading .item .box .tr { background: url("../images/tr.png") no-repeat center; background-size: 0.9rem 0.94rem; right: -0.12rem; }
.loading .item .box .radius-bottom { width: 0.9rem; height: 1.27rem; position: absolute; bottom: -0.1rem; }
.loading.home .item .box .radius-bottom { bottom: -0.04rem; }
.loading .item .box .bl { background: url("../images/bl.png") no-repeat center; background-size: 0.9rem 1.27rem; left: -0.12rem; }
.loading .item .box .br { background: url("../images/br.png") no-repeat center; background-size: 0.9rem 1.27rem; right: -0.12rem; }
.loading .item .box .loading-title { width: 6.59rem; height: 3.05rem; margin-top: 0.3rem; margin-left: -0.06rem; }
.loading .item .box .loading-title img { width: 100%; height: 100%; }
.loading .item .box .loading-txt { width: 6.19rem; height: 2.74rem; margin: -0.45rem auto 0; }
.loading .item .box .loading-txt img { width: 100%; height: 100%; }
.loading-animate { display: block; margin: -1.2rem auto 0.3rem; width: 4.43rem; height: 4.69rem; }
.loading .item .box .start { width: 3.82rem; height: 1.06rem; border-radius: 0.1rem; background: url("../images/loading-btn.png") no-repeat; background-size: 3.82rem 1.06rem; margin: 0rem auto 0; position: relative; }
.loading .item .box .start .arrowr { position: absolute; left: 0; top: 0; width: 0.44rem; height: 0.17rem; left: 0.1rem; top: 0.21rem; animation: leftMove; animation-timing-function:linear; animation-duration: 0.4s; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; }
.loading .item .box .start .arrowl { position: absolute; right: 0; top: 0; width: 0.44rem; height: 0.17rem; right: 0.1rem; top: 0.21rem; animation: rightMove; animation-timing-function:linear; animation-duration: 0.4s; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; }
.loading .item .box .start img { width: 0.44rem; height: 0.17rem; position: absolute; }
.question .item { background-color: #fff4de }
.question .item .box .top { background-color: #fff4de }
.question .item .box .bottom { background-color: #fff4de }
.question .item .box .tl { background: url(../images/tl-question.png) no-repeat center; background-size: 0.9rem 0.94rem; }
.question .item .box .tr { background: url(../images/tr-question.png) no-repeat center; background-size: 0.9rem 0.94rem; }
.question .item .box .bl { background: url(../images/bl-question.png) no-repeat center; background-size: 0.9rem 1.27rem; }
.question .item .box .br { background: url(../images/br-question.png) no-repeat center; background-size: 0.9rem 1.27rem; }
.question .chart { width: 2.3rem; height: 2.3rem; background: rgba(241, 209, 148, 0.529); border-radius: 50%; margin: -0.45rem auto 0.2rem; }
.question .chart img { width: 2.88rem; height: 2.89rem; margin-top: -0.38rem; margin-left: -0.24rem; }
.question .chart.chart3 img { width: 4.45rem; height: 2.98rem; margin-top: -0.5rem; margin-left: -1rem; }
.question .chart.chart4 img { width: 3.35rem; height: 3.25rem; margin-top: -0.6rem; margin-left: -0.56rem; }
.question .chart.chart5 img { width: 3.19rem; height: 3.18rem; margin-top: -0.48rem; margin-left: -0.5rem; }
.question .chart.chart6 img { width: 3.21rem; height: 3.02rem; margin-top: -0.43rem; margin-left: -0.45rem; }
.question .con .subject { }
.question .con .subject .subject-title { margin: 0 auto 0.3rem; }
.question .con .subject .subject-title img { width: 100%; }
.question .con .subject1 .subject-title { width: 5.12rem; height: 1.18rem; }
.question .con .subject2 .subject-title { width: 4.91rem; height: 1.24rem; }
.question .con .subject3 .subject-title { width: 5.22rem; height: 1.24rem; }
.question .con .subject4 .subject-title { width: 5.13rem; height: 1.23rem; }
.question .con .subject5 .subject-title { width: 5.22rem; height: 1.18rem; }
.question .con .subject ul li { font-size: 0.3rem; padding: 0 0.5rem; color: #d12727; line-height: 0.48rem; text-transform: uppercase; font-weight: bold; margin-bottom: 0.1rem; position: relative; }
.question .con .subject ul li .radio { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
.question .con .subject ul li .option { margin-right: 0.3rem; width: 0.48rem; height: 0.48rem; text-align: center; line-height: 0.48rem; }
.question .con .subject ul li.on .option { background: url("../images/option.png") no-repeat center; background-size: 0.48rem 0.48rem; color: #761313; }
.question .con .subject ul li.on .answer { color: #761313; }
.question .con .subject .next { width: 2.36rem; height: 0.68rem; background: url("../images/next.png") no-repeat; background-size: 2.36rem 0.68rem; position: absolute; bottom: 0.9rem; left: 50%; margin-left: -1.18rem; }
.question .con .subject5 .subject-title { margin-bottom: 0.1rem; }
.question .con .chart .animate { position: absolute; }
.question .con3 .chart .people { width: 2.05rem; height: 2.09rem; background: url("../images/animate/three1.png") no-repeat; background-size: 2.05rem 2.09rem; left: 0.2rem; top: 0.05rem; z-index: 2; animation: people; animation-duration: 2.5s; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; }
.question .con3 .chart .cloud { width: 2.24rem; height: 1.03rem; background: url("../images/animate/three2.png") no-repeat; background-size: 2.24rem 1.03rem; top: 0.9rem; left: -0.3rem; z-index: 1; animation: cloudMove; animation-duration: 2.5s; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; }
.question .con3 .chart .cloud2 { width: 1.10rem; height: 0.51rem; background: url("../images/animate/three3.png") no-repeat; background-size: 1.10rem 0.51rem; top: 0.8rem; left: 1.55rem; z-index: 3; animation: cloudMove2; animation-duration: 2.5s; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; }
.question .con3 .chart .gold1 { width: 0.48rem; height: 0.48rem; background: url("../images/animate/three4.png") no-repeat; background-size: 0.48rem 0.48rem; top: 0.75rem; left: -0.25rem;  /*动画持续时间*/ animation-duration: 1.5s;  /*动画延迟时间*/ animation-delay: 0s;  /*动画执行次数*/ animation-iteration-count: infinite; }
.question .con3 .chart .gold2 { width: 0.52rem; height: 0.54rem; background: url("../images/animate/three5.png") no-repeat; background-size: 0.52rem 0.54rem; z-index: 4; left: 2rem; top: 0.7rem;  /*动画持续时间*/ animation-duration: 1.5s;  /*动画延迟时间*/ animation-delay: 0s;  /*动画执行次数*/ animation-iteration-count: infinite; }
.question .con3 .chart .gold3 { width: 0.35rem; height: 0.35rem; background: url("../images/animate/three6.png") no-repeat; background-size: 0.35rem 0.35rem; left: 1.3rem; top: -0.15rem;  /*动画持续时间*/ animation-duration: 1.5s;  /*动画延迟时间*/ animation-delay: 0s;  /*动画执行次数*/ animation-iteration-count: infinite; }
.question .con4 .chart .phone { width: 1.80rem; height: 2.35rem; background: url("../images/animate/four1.png") no-repeat; background-size: 1.8rem 2.35rem; left: 0.25rem; top: -0.15rem; animation: phoneRotate; animation-duration: 1s; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; }
.question .con4 .chart .phone h2 { font-size: 0.3rem; color: #c51a1a; font-weight: bold; text-align: center; margin-top: 1.25rem; }
.question .con4 .chart .star1 { width: 0.2rem; height: 0.2rem; background: url("../images/animate/four2.png") no-repeat; background-size: 0.2rem 0.2rem; left: 2.2rem; top: 0.1rem;  /*动画持续时间*/ animation-duration: 1.5s;  /*动画延迟时间*/ animation-delay: 0s;  /*动画执行次数*/ animation-iteration-count: infinite; }
.question .con4 .chart .star2 { width: 0.33rem; height: 0.31rem; background: url("../images/animate/four3.png") no-repeat; background-size: 0.33rem 0.31rem; left: 2.1rem; top: 1.4rem;  /*动画持续时间*/ animation-duration: 1.5s;  /*动画延迟时间*/ animation-delay: 0s;  /*动画执行次数*/ animation-iteration-count: infinite; }
.question .con4 .chart .star3 { width: 0.39rem; height: 0.36rem; background: url("../images/animate/four4.png") no-repeat; background-size: 0.39rem 0.36rem; left: -0.35rem; top: 0.4rem;  /*动画持续时间*/ animation-duration: 1.5s;  /*动画延迟时间*/ animation-delay: 0s;  /*动画执行次数*/ animation-iteration-count: infinite; }
.nickname-box .nickname-input { width: 5.36rem; height: 1.08rem; border: 0.04rem solid #c31414; border-radius: 0.1rem; background: none; margin: 0 auto; display: block; font-size: 0.36rem; color: rgba(195, 21, 21, 1); line-height: 1.08rem; text-indent: 0.35rem; margin-top: 2rem; }
::-webkit-input-placeholder { color: rgba(195, 21, 21, 0.58); }
:-moz-placeholder { color: rgba(195, 21, 21, 0.58); opacity: 1; }
::-moz-placeholder { color: rgba(195, 21, 21, 0.58); opacity: 1; }
:-ms-input-placeholder { color: rgba(195, 21, 21, 0.58); }
.nickname-box .generate { width: 5.38rem; height: 1.06rem; background: url("../images/nickname.png") no-repeat; background-size: 5.38rem 1.06rem; margin: 1rem auto 0; }
.result .item { background-color: #fff4de; }
.result .item .box .tl { background: url(../images/tl-result.png) no-repeat center; background-size: 0.9rem 0.94rem; }
.result .item .box .tr { background: url(../images/tr-result.png) no-repeat center; background-size: 0.9rem 0.94rem; }
.result .item .box .bl { background: url(../images/bl-result.png) no-repeat center; background-size: 0.9rem 1.27rem; }
.result .item .box .br { background: url(../images/br-result.png) no-repeat center; background-size: 0.9rem 1.27rem; }
.result .item .box .top { background-color: #fff4de; }
.result .item .box .bottom { background-color: #fff4de; }
.result .item .con .thisyear { margin-bottom: 1rem; }
.result .item .con .result-nickname { font-size: 0.3rem; color: #d12727; line-height: 2; font-weight: bold; text-align: center; margin: 0.7rem 0 0.05rem 0; }
.result .item .con .result-2018 { width: 3.26rem; height: 0.37rem; display: block; margin: 0 auto 0.15rem; }
.result .item .con .result-2019 { width: 3.62rem; height: 0.37rem; display: block; margin: 0 auto 0.15rem; }
.result .item .con .txtbox { width: 5.16rem; height: 1.59rem; background: url("../images/result-txt-box.png") no-repeat; background-size: 5.16rem 1.59rem; margin: 0 auto; margin-bottom: 0.2rem; }
.result .item .con .txtbox h2 { font-size: 1.12rem; color: #fff; line-height: 1.59rem; font-weight: bold; width: 25%; text-align: center; float: left; }
.result .item .con .msc { font-size: 0.25rem; color: #a69066; line-height: 1.286; width: 4.9rem; letter-spacing: 0.02rem; margin: 0 auto; }
.result .item .con .result-footer { width: 4.13rem; margin: 0.55rem auto 0; }
.result .item .con .result-footer img { width: 4.13rem; display: none; }
.result .item .con .result-footer .share { width: 3.82rem; height: 1.06rem; background: url("../images/share-btn.png") no-repeat; background-size: 3.82rem 1.06rem; margin: 0 auto; display: block; }
.result .page-result { width: 6.82rem; height: 12.06rem; position: absolute; left: 50%; top: 50%; margin-top: -6.03rem; margin-left: -3.41rem; }
.resultImg { width: 6.82rem; height: 12.06rem; position: fixed; left: 50%; top: 50%; margin-top: -6.03rem; margin-left: -3.41rem; z-index: 9998; opacity: 0; }
.resultImg img { width: 100%; height: 100%; }

@keyframes leftMove {
  from { transform: translate(-1px, 0px); }
  to { transform: translate(4px, 0px); }
}
@-webkit-keyframes leftMove {
  from { -webkit-transform: translate(-1px, 0px); }
  to { -webkit-transform: translate(4px, 0px); }
}

@keyframes rightMove {
  from { transform: translate(1px, 0px); }
  to { transform: translate(-4px, 0px); }
}
@-webkit-keyframes rightMove {
  from { -webkit-transform: translate(1px, 0px); }
  to { -webkit-transform: translate(-4px, 0px); }
}

@keyframes musicRotate {
  0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
  100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes musicRotate {
  0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
  100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}