@charset "utf-8";
/* CSS Document */

body,
div,
img,
form,
input,
ul,
li,
h1,
h2,
a,
span,
p {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
body,
input,
h1,
h2 {
  font-family: '微软雅黑', '黑体';
  font-size: 16px;
  line-height: 30px;
  font-weight: normal;
  position: relative;
}

a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #d92636;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearflx:after {
  content: '';
  display: block;
  visibility: hidden;
  clear: both;
}
.cl {
  clear: both;
  height: 0px;
  overflow: hidden;
}

.none {
  display: none !important;
}

.container {
  width: 100%;
  height: 100%;
}

/* 首页 */
.p0 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url('bg0.jpg') no-repeat center center;
  background-size: 100% 100%;
}
.p0 .title {
  position: absolute;
  left: 29px;
  top: 139px;
  width: 1018px;
  height: 698px;
}
.p0 .btn_start {
  position: absolute;
  left: 50%;
  top: 993px;
  margin-left: -172.5px;
}
.p0 .btn_intro {
  position: absolute;
  left: 50%;
  top: 1140px;
  margin-left: -172.5px;
}
.p0 .logo {
  position: absolute;
  left: 50%;
  top: 1700px;
  margin-left: -363px;
}

/* 介绍页 */
.p1 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url('bg1.jpg') no-repeat center center;
  background-size: 100% 100%;
}
.p1 .title_intro {
  position: absolute;
  left: 50%;
  top: 122px;
  margin-left: -369.5px;
}
.p1 .intro {
  position: absolute;
  left: 50%;
  top: 415px;
  margin-left: -416px;
  overflow-y: scroll;
  height: 58%;
}
.p1 .btn_back {
  position: absolute;
  left: 50%;
  bottom: 91px;
  margin-left: -172.5px;
}
.p1 .tips_up {
  position: absolute;
  right: 5%;
  top: 77%;
}

/* 答题页 */
.p2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url('bg2.jpg') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 36px 0 48px;
  box-sizing: border-box;
}
.p2 .p2-hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.p2 .q {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  flex: 0 0 428px;
  width: 100%;
  height: 428px;
  margin-bottom: 100px;
}
.p2 .q2 {
  /* margin: 0px 0 30px; */
}
.p2 .q_wrap {
  position: relative;
  width: 836px;
  max-height: 428px;
}
.p2 .q_bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: none;
}
.p2 .q_bg > div {
  position: relative;
}
.p2 .q_top {
  flex: 0 0 136px;
  height: 136px;
}
.p2 .q_top img,
.p2 .q_bottom img {
  display: block;
  width: 100%;
  height: auto;
}
.p2 .q_center {
  flex: 1 1 auto;
  min-height: 10px;
  margin-top: -1px;
  background: url('q_f_2.png') repeat-y center center / 836px 1px;
  width: 100%;
}
.p2 .q_bottom {
  flex: 0 0 115px;
  height: 115px;
  margin-top: -2px;
}

.p2 .q_content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 60px 0 35px;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.p2 .q_content img {
  display: block;
  max-width: 100%;
  max-height: calc(428px - 95px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.p2 .q.q-enter-wait,
.p2 .q_content.q-enter-wait {
  opacity: 0;
  visibility: hidden;
}
.p2 .ans > div.ans-enter-wait {
  opacity: 0;
  visibility: hidden;
}
.p2 .btn_next.btn-enter-wait,
.p2 .btn_submit.btn-enter-wait {
  opacity: 0;
}
.p2 .ans > div.ans-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.p3 .prize_name_tip {
  font-size: 32px;
  color: #d92636;
  text-align: center;
  margin-top: 200px;
  padding: 0 40px;
}

.p2 .ans {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  min-height: 480px;
  margin-top: 8px;
}
.p2 .ans > div {
  width: 587px;
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}

.p2 .ans .A,
.p2 .ans .C {
  margin-left: -276px;
}
.p2 .ans .B,
.p2 .ans .D {
  margin-left: 350px;
}

.p2 .ans > div {
  --ans-bg: url('ans_bg.png') no-repeat center bottom / 587px 229px;
  background: var(--letter), var(--ans-bg);
  margin-top: -50px;
}
/* 用户选中选项 */
.p2 .ans > div.on {
  --ans-bg: url('icon_choose.png') no-repeat center bottom / 587px 229px;
  background: var(--letter), var(--ans-bg);
}

.p2 .ans .A {
  --letter: url('ans_a.png') no-repeat center top / 83px 89px;
}
.p2 .ans .B {
  --letter: url('ans_b.png') no-repeat center top / 76px 89px;
}
.p2 .ans .C {
  --letter: url('ans_c.png') no-repeat center top / 82px 89px;
}
.p2 .ans .D {
  --letter: url('ans_d.png') no-repeat center top / 82px 89px;
}

/* 正确答案标记 */
.p2 .ans > div.t {
  background:
    url('ans_t.png') no-repeat left top / 202px 101px,
    var(--letter),
    var(--ans-bg);
}

.p2 .r {
  position: relative;
  pointer-events: none;
  flex: 0 0 195px;
  width: 618px;
  min-height: 195px;
  margin-top: 8px;
}
.p2 .r_f {
  background: url('ans_r_f.png') no-repeat center center / 100% 100%;
  width: 590px;
  height: 166px;
}
.p2 .r_t {
  background: url('ans_r_t.png') no-repeat center center / 100% 100%;
  width: 618px;
  height: 195px;
}
.p2 .p2_btns {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.p2 .btn_next,
.p2 .btn_submit {
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

/* 结果页 */
.p3 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url('bg3.jpg') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.p3 .r_success,
.p3 .r_fail {
  position: absolute;
  top: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}
.p3 .result_content {
  position: relative;
  background: url('success_bg.png') no-repeat center center / 100% 100%;
  width: 753px;
  height: 313px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 50px;
}
.p3 .r_fail .result_content {
  background: url('fail_bg.png') no-repeat center center / 100% 100%;
  height: 377px;
}
.p3 .result_content > div {
  position: absolute;
}
.p3 .result_content .fail_1 {
  left: -35px;
  top: -73px;
}
.p3 .result_content .fail_2 {
  top: 80px;
}
.p3 .result_content .fail_3 {
  top: 200px;
}
.p3 .result_content .fail_4 {
  top: 20px;
}

.p3 .result_content .success_1 {
  top: 67px;
}
.p3 .result_content .success_2 {
  top: 130px;
}
.p3 .result_content .success_3 {
  top: 20px;
}
.btn_draw {
  position: absolute;
  right: -110px;
  bottom: -130px;
}

.p3 .r_award {
  position: absolute;
  top: 20%;
}

.p3 .result_content .award_1 {
  top: 67px;
}
.p3 .result_content .award_2 {
  top: 130px;
}
.p3 .result_content .award_3 {
  top: 120px;
}

.btn_claim,
.btn_again {
  position: relative;
}

.btn_share {
  position: relative;
}

.btn_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 信息填写页 */
.p4 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url('bg2.jpg') no-repeat center center;
  background-size: 100% 100%;
}
.p4 .p4_form {
  position: absolute;
  padding-top: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.p4 .p4_form_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  margin-bottom: 50px;
  padding: 0 40px;
}
.p4 .p4_form_item2 {
  margin-bottom: 100px;
  padding: 80px 40px 30px;
}

.p4_name input {
  font-family: '微软雅黑', '黑体';
  font-size: 67px;
  line-height: 85px;
  font-weight: normal;
  position: relative;
  width: 100%;
}
.p4_mobile input {
  font-family: '微软雅黑', '黑体';
  font-size: 67px;
  line-height: 85px;
  font-weight: normal;
  position: relative;
  width: 100%;
}
.p4_address textarea {
  font-family: '微软雅黑', '黑体';
  font-size: 67px;
  line-height: 85px;
  font-weight: normal;
  position: relative;
  width: 100%;
  height: 246px;
}

.p4_name input::placeholder,
.p4_mobile input::placeholder,
.p4_address textarea::placeholder {
  text-align: center;
}

.p4_name {
  background:
    url('f_bg_name.png') no-repeat left top / 193px 94px,
    url('ans_bg.png') no-repeat center center / 587px 229px;
  width: 591px;
  height: 244px;
  margin-left: -295.5px;
}
.p4_mobile {
  background:
    url('f_bg_mobile.png') no-repeat right top / 191px 92px,
    url('ans_bg.png') no-repeat center center / 587px 229px;
  width: 591px;
  height: 244px;
  margin-left: 250.5px;
}
.p4_address {
  background:
    url('f_bg_addr.png') no-repeat center top / 198px 78px,
    url('f_bg_address.png') no-repeat center center / 819px 371px;
  width: 811px;
  min-height: 385px;
}

/* .btn_submit_form{position: absolute; bottom: 100px; left: 50%; margin-left: -178.5px;} */
.share_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 101;
}
.share_bg {
  width: 100%;
  height: 100%;
  background: rgba(25, 28, 34, 0.58);
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: pointer;
}
.share_png {
  background: url('share_tips.png') no-repeat right top;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 16;
  cursor: pointer;
}