.wrapper {
  width: 10rem;
  height: 100vh;
  margn: 0 auto;
  background-image: -wbkit-radial-gradient(#ed1c24, #782828);
  background-image: radial-gradient(#ed1c24, #782828);
}
.wrapper .page {
  width: 10rem;
  margn: 0 auto;
}
/* 封面 */
.page_cover {
  width: 100%;
  height: 100vh;
  background: url(../img/bg_1.jpg) no-repeat center / cover;
  position: relative;
}
.page_cover .bjnews_logo {
  width: 1.38666667rem;
  height: 0.48rem;
  position: absolute;
  top: 0.53333333rem;
  left: 50%;
  margin-left: -0.69333333rem;
  z-index: 10;
}
.page_cover .lianghui_logo {
  width: 5.33333333rem;
  height: 1.53333333rem;
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  margin-left: -2.66666667rem;
  z-index: 10;
}
.page_cover .cover_title {
  width: 8rem;
  height: 4.13333333rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2.06666667rem 0 0 -4rem;
}
.page_cover .cover_title .c_title {
  width: 8rem;
  position: absolute;
  left: 50%;
  margin-left: -4rem;
}
.page_cover .cover_title .c_title_1 {
  top: 0;
}
.page_cover .cover_title .c_title_2 {
  bottom: 0;
}
.page_cover .cover_title .c_light {
  position: absolute;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
.page_cover .cover_title .c_light_1 {
  width: 4.13333333rem;
  height: 2.82666667rem;
  right: 0;
  top: -1.2rem;
}
.page_cover .cover_title .c_light_2 {
  width: 4.34666667rem;
  height: 4.30666667rem;
  right: -1.06666667rem;
  bottom: -0.53333333rem;
}
.page_cover .btn_start {
  width: 2.8rem;
  height: 1.06666667rem;
  position: absolute;
  bottom: 2.66666667rem;
  left: 50%;
  margin-left: -1.33333333rem;
  animation-iteration-count: infinite;
}
.page_cover .box_wrapper {
  width: 100%;
  height: 100%;
  background-image: -wbkit-radial-gradient(#ed1c24, #782828);
  background-image: radial-gradient(#ed1c24, #782828);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
}
.page_cover .box_wrapper .word_box {
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2rem 0 0 -2rem;
  transform: perspective(700px) rotateX(-80deg);
  transform-style: preserve-3d;
}
.page_cover .box_wrapper .word_box .side {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: 1s;
  color: #c6ab76;
  font-size: 0.8rem;
  text-align: center;
  line-height: 4rem;
}
.page_cover .box_wrapper .word_box .side_1 {
  transform: translateZ(150px);
}
.page_cover .box_wrapper .word_box .side_2 {
  transform: translateZ(-150px);
}
.page_cover .box_wrapper .word_box .side_3 {
  transform: rotateY(90deg) translateZ(-150px);
}
.page_cover .box_wrapper .word_box .side_4 {
  transform: rotateY(-90deg) translateZ(-150px);
}
.page_cover .box_wrapper .word_box .side_5 {
  transform: rotateX(90deg) translateZ(-150px);
}
.page_cover .box_wrapper .word_box .side_6 {
  transform: rotateX(-90deg) translateZ(-150px);
}
/* 游戏 */
.page_game {
  width: 100%;
  height: 100vh;
  background: url(../img/bg_2.jpg) no-repeat center / cover;
  animation-duration: 2s;
  position: relative;
}
.page_game .game_area {
  width: 10.08rem;
  height: 14.48rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -7.24rem 0 0 -5.04rem;
}
.page_game .game_area .tip_type {
  width: 5.33333333rem;
  color: #aa1301;
  font-size: 0.37333333rem;
  text-align: center;
  position: absolute;
  top: 4.53333333rem;
  left: 50%;
  margin-left: -2.66666667rem;
}
.page_game .game_area .g_paper {
  width: 9.33333333rem;
  height: 7.12rem;
  background: url(../img/g_paper.png) no-repeat center / 100%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -4.66666667rem;
}
.page_game .game_area .g_paper .word_put {
  width: 6.8rem;
  height: 1.6rem;
  position: absolute;
  top: 1.2rem;
  left: 50%;
  margin-left: -3.4rem;
  display: flex;
  justify-content: space-between;
}
.page_game .game_area .g_paper .word_put .put_box {
  width: 1.6rem;
  height: 1.6rem;
  background: url(../img/put_box.png) no-repeat center / 100%;
  color: #C6AB76;
  font-size: 1.04rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.6rem;
}
.page_game .game_area .g_typer {
  width: 10rem;
  height: 8.26666667rem;
  background: url(../img/g_typer.png) no-repeat center / 100%;
  position: absolute;
  bottom: 1.06666667rem;
  left: 50%;
  margin-left: -5rem;
}
.page_game .game_area .g_typer .word_btn {
  width: 8.16rem;
  height: 4.82666667rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2.26666667rem 0 0 -4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.page_game .game_area .g_typer .word_btn .btn_box {
  width: 1.6rem;
  height: 1.6rem;
  background: url(../img/btn_box.png) no-repeat center / 100%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.33333333rem;
  -webkit-text-shadow: 1px -1px #666666;
  text-shadow: 1px -1px #666666;
}
.page_game .game_area .g_typer .word_btn .b_box_empty {
  background: url(../img/b_box_empty.png) no-repeat center / 100%;
}
.page_game .game_area .btn_submit {
  display: block;
  width: 2.8rem;
  height: 1.06666667rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -1.4rem;
  animation-iteration-count: infinite;
}
.page_game .tip_mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}
.page_game .tip_mask .tip_fail {
  width: 10rem;
  height: 6.66666667rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -5rem;
  margin-top: -3.33333333rem;
}
/* 动画 */
.btn_box_ani {
  animation: BtnBoxAni 0.1s 1 forwards;
  -webkit-animation: BtnBoxAni 0.1s 1 forwards;
  pointer-events: none;
}
@keyframes BtnBoxAni {
  0 {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.95) translateY(0.13333333rem);
    transform: scale(0.95) translateY(0.13333333rem);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    opacity: 0.5;
  }
}
@-webkit-keyframes BtnBoxAni {
  0 {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.95) translateY(0.13333333rem);
    transform: scale(0.95) translateY(0.13333333rem);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    opacity: 0.5;
  }
}
/* 结果+视频 */
.page_result,
.page_video {
  width: 100%;
  height: 100vh;
  background: url(../img/bg_3.jpg) no-repeat center / cover;
  padding: 0.26666667rem 0.16rem;
  position: relative;
}
.page_result .res_line,
.page_video .res_line {
  width: 100%;
  height: 100%;
  border: 2px solid #c6ab77;
  border-radius: 0.26666667rem;
  padding: 0.2rem 0.2rem;
  position: relative;
}
.page_result .res_line .res_box,
.page_video .res_line .res_box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 0.26666667rem;
  display: flex;
  flex-direction: column;
}
.page_result .res_line .res_box .res_area,
.page_video .res_line .res_box .res_area {
  width: 100%;
}
.page_result .res_line .res_box .area_logo,
.page_video .res_line .res_box .area_logo {
  height: 1.93333333rem;
  padding-top: 0.13333333rem;
  margin-bottom: 0.53333333rem;
}
.page_result .res_line .res_box .area_logo .logo_two,
.page_video .res_line .res_box .area_logo .logo_two {
  width: 4.8rem;
  height: 1.93333333rem;
  margin: 0 auto;
  position: relative;
}
.page_result .res_line .res_box .area_logo .logo_two .bjnews_logo,
.page_video .res_line .res_box .area_logo .logo_two .bjnews_logo {
  width: 1.38666667rem;
  height: 0.48rem;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -0.69333333rem;
}
.page_result .res_line .res_box .area_logo .logo_two .lianghui_logo,
.page_video .res_line .res_box .area_logo .logo_two .lianghui_logo {
  width: 5.06666667rem;
  height: 1.36rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -2.4rem;
}
.page_result .bg_bottom,
.page_video .bg_bottom {
  width: 10rem;
  height: 7.84rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -5rem;
}
/* 结果 */
.page_result .res_line .res_box .area_answer {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.page_result .res_line .res_box .area_answer .the_answer {
  flex: 1;
  max-height: 13.33333333rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.page_result .res_line .res_box .area_answer .the_answer .res_content {
  opacity: 0;
}
.page_result .res_line .res_box .area_answer .the_answer .ans_res {
  width: 7.73333333rem;
  height: 1.86666667rem;
  background: url(../img/res_box.png) no-repeat center / 100%;
  position: relative;
}
.page_result .res_line .res_box .area_answer .the_answer .ans_res .the_Res {
  width: 7.65333333rem;
  height: 1.84rem;
  position: absolute;
  left: 0;
  top: 0;
  animation-iteration-count: 1;
}
.page_result .res_line .res_box .area_answer .the_answer .ans_intro {
  width: 7.65333333rem;
  height: 2.53333333rem;
  border-top: 0.13333333rem solid #c6ab76;
  padding-top: 0.4rem;
  position: relative;
}
.page_result .res_line .res_box .area_answer .the_answer .ans_intro .txt_Res {
  width: 7.2rem;
  animation-duration: 2s;
}
.page_result .res_line .res_box .area_answer .the_answer .ans_pic {
  height: 4.53333333rem;
  position: relative;
}
.page_result .res_line .res_box .area_answer .the_answer .ans_pic .pic_Res {
  width: 4.53333333rem;
  height: 4.53333333rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -2.26666667rem;
  margin-top: -2.26666667rem;
  animation-duration: 2s;
}
.page_result .res_line .res_box .area_btn {
  width: 100%;
  height: 2.13333333rem;
  position: relative;
}
.page_result .res_line .res_box .area_btn .b_btn {
  width: 2.66666667rem;
  height: 0.89333333rem;
  position: absolute;
  animation-iteration-count: infinite;
  z-index: 9;
}
.page_result .res_line .res_box .area_btn .btn_agenda {
  left: 0;
  top: 0;
}
.page_result .res_line .res_box .area_btn .btn_video {
  left: 0;
  bottom: 0;
}
.page_result .res_line .res_box .area_btn .btn_again {
  right: 0;
  top: 0;
}
.page_result .res_line .res_box .area_btn .btn_share {
  right: 0;
  bottom: 0;
}
.page_result .bg_bottom {
  background: url(../img/bg_bottom_1.png) no-repeat center / 100%;
}
.page_result .bg_bottom .scan_code {
  width: 1.81333333rem;
  height: 1.81333333rem;
  position: absolute;
  bottom: 1.06666667rem;
  left: 50%;
  margin-left: -0.84rem;
}
.tip_share {
  width: 2.4rem;
  height: 0.18666667rem;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  position: fixed;
  bottom: 0.66666667rem;
  left: 50%;
  margin-left: -1.2rem;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  z-index: 9999;
}
/* 海报 */
#canvasImg {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}
/* 视频 */
.page_video .res_line .res_box {
  background-color: transparent;
  position: relative;
}
.page_video .res_line .res_box .area_video {
  width: 9.06666667rem;
  height: 10rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.53333333rem;
  margin-top: -5.66666667rem;
}
.page_video .res_line .res_box .area_video .video_bg {
  width: 9.06666667rem;
  height: 8.4rem;
  background: url(../img/bg_video.png) no-repeat center / 100%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -4.53333333rem;
}
.page_video .res_line .res_box .area_video .video_bg .video_box {
  display: block;
  width: 8rem;
  height: 4.49333333rem;
  position: absolute;
  top: 3.2rem;
  left: 50%;
  margin-left: -4rem;
}
.page_video .res_line .res_box .area_video .video_bg .video_box .lh_video {
  display: block;
  width: 8rem;
  height: 4.49333333rem;
  position: absolute;
  left: 0;
  top: 0;
}
.page_video .res_line .res_box .area_video .video_bg .video_box .btnplay {
  width: 1.73333333rem;
  height: 1.73333333rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.86666667rem;
  margin-top: -0.86666667rem;
  animation-iteration-count: infinite;
}
.page_video .res_line .res_box .area_video .btn_back_v {
  width: 2.8rem;
  height: 1.06666667rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -1.4rem;
  animation-iteration-count: infinite;
  z-index: 999;
}
.page_video .bg_bottom {
  background: url(../img/bg_bottom_2.png) no-repeat center / 100%;
}
/* 议程 */
.page_agenda {
  background-color: #c40d23;
  padding: 0.4rem 0 1.33333333rem;
}
.page_agenda .the_agenda {
  width: 10rem;
  margin: 0 auto;
}
.page_agenda .tip_down {
  display: block;
  width: 0.8rem;
  margin: 0.66666667rem auto;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.page_agenda .btn_back_a {
  display: block;
  width: 2.8rem;
  height: 1.06666667rem;
  margin: 0.66666667rem auto 0;
  animation-iteration-count: infinite;
  z-index: 999;
}
/* 背景音乐 */
.bgm {
  width: 25px;
  height: 25px;
  background: url(../img/musicOff.png) no-repeat;
  background-size: 100%;
  z-index: 999;
  position: fixed;
  top: 0.46666667rem;
  right: 0.4rem;
}
.music_on {
  background-image: url(../img/musicOn.png);
  animation: reverseRotating 1.2s linear infinite;
  -webkit-animation: reverseRotating 1.2s linear infinite;
}
@keyframes reverseRotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes reverseRotating {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}