html,body{
  width: 100%;
}
[v-cloak]{
  display: none;
}
#app{
  width: 100%;
  max-width: 720px;
  /* background: url(../images/new_img/bg.jpg) no-repeat; */
  /* background-size: 100% 0; */
  /* background-position:center;
  background-size: 100%;
  height: 6209px; */
  margin: 0 auto;
  position: relative;
}
img{
  pointer-events: none;
}
.bg{
  width: 100%;
  position: relative;
}
.bg>.header_bg{
  width: 100%;
  display: block;
}
.yuyue_content{
  position: absolute;
  z-index: 9;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}
.content_top .state_btn{
  width: 100%;
  text-align: center;
  position: absolute;
  top: -5%;
}
.content_top .state_btn img{
  width: 48%;
}
.title{
  text-align: center;
}
.content_top .title_1{
  padding-top: 6%;
}
.content_top .title_2{
  padding-top: 1.5%;
}
.content_top .title_3{
  padding-top: 20%;
}
.title img{
  width: 80%;
}
.swiper_top{
  width: 100%;
  overflow: hidden;
}
.swiper_bottom{
  height: 35%;
  width: 100%;
  overflow: hidden;
}
.get_people img{
 display: block;
 width: 92%;
 margin: 0 auto;
}
.people_number_bg{
  position: relative;
  z-index: 99;
  margin-top: 2.5%;
}
.people_number{
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50% , -50%);
  -webkit-transform: translate(-50% , -50%);
  -moz-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  -o-transform: translate(-50% , -50%);
  background: linear-gradient(to bottom, #ffffb8, #be8b46);
  -webkit-background-clip: text;
  color: transparent;
  font-size:calc(7vw);
}
.top_wold{
  text-align: center;
  background: linear-gradient(to bottom, #ffffb8, #be8b46);
  -webkit-background-clip: text;
  color: transparent;
  font-size:calc(4vw);
}
.top_wold>span{
  font-weight: 700;
}
.shuoming_title{
  margin-top: 8.5%;
}
.shuoming_title img{
  width: 20%;
  display: block;
  margin: 0 auto;
}
.register{
  position: relative;
  margin-top: 3.5%;
}
.register>img{
  display: block;
  width: 90%;
  margin: 0 auto;
}
.register_content>img{
  height: 38%;
  margin-right: 1%;
  display: block;
  position: relative;
  top: -3%;
}
.register_content{
  color: #fff;
  font-size: calc(2.2vw);
  position: absolute;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.word_color{
  color: #ffc432;
  position: relative;
}
.word_color span{
  position: absolute;
  z-index: 9999;
  width: 12%;
  height: 59%;
  top: -30%;
  right: 0%;
  background: red;
  color: #fff;
  font-size: calc(1.4vw);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  text-align: center;
}
.explain_word{
  width: 92%;
  margin: 0 auto;
  color: #cb6c37;

}
.explain_word p{
  padding-left: 1.8em;
  line-height: 2.1;
  font-size: calc(2.8vw);
  position: relative;
}
.explain_word p::after{
  content: ' ';
  width: 8px;
  height: 8px;
  display: inline-block;
  position: absolute;
  left: 2%;
  top: calc(2vw);
  background: url(../images/new_img/disn.png) no-repeat;
  background-size: 100% 100%;
}
.number_people{
  margin-top:2%
}
.number_people img{
  width: 76%;
}
.number_people .people_number{
  font-size: calc(5vw);
  color: #ffde00;
}
.word_middle .word_content{
  width: 82%;
  margin: 0 auto;
  display: block;
  margin-top:4%
}
.word_middle .active_list{
  width: 87%;
  margin: 0 auto;
  display: block;
  /* margin-top:1% */
}
.gift_top{
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
  justify-content: space-between;
}
.gift_top li{
  width: 48%;
  position: relative;
  margin-bottom: 2%;
}
.gift_top li>img{
  width: 100%;
}
.gift_top li .gift_content{
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 100;
  
}
.gift_content>img{
  width: 22%;
  display: block;
  margin: 19% 0 15% 40%;
}
.gift_content>span{
  display: block;
  width: 100%;
}
.gift_content>span>img{
  display: block;
  width: 48%;
  margin: 0 auto 2%;
}
.gift_content .word{
  line-height: 2.5;
  color: #f9d096;
  text-align: center;
  font-size: calc(3.5vw);
  font-weight: 600;

}
.gift_content .title{
  margin: 13% auto 0;
  line-height: 1.7;
  color: #eb9d7c;
  font-size: calc(3vw);
}
.content_middle .state_btn img{
  width: 48%;
  display: block;
  margin: 0 auto;
}
.pub_button{
  color: #fff;
  line-height: 2;
  font-size: calc(3vw);
  background: url(../images/new_img/btn.jpg) no-repeat;
  background-size: 100% 100%;
  border: 0;
  display: block;
  margin: 0 auto;
  padding: 0 2%;
}
.result>img{
  width: 84%;
  margin: 8% auto 0;
  display: block;
}
.result>div{
  font-size: calc(3vw);
  color: #cbcac9;
  text-align: center;
  line-height: 1.8;
}
.title_4{
  position: relative;
  top: -1.5%;
}
.bottom_content{
  text-align: left;
  width: 84%;
  margin: 10% auto 0;
}
.bottom_content .pub_button{
  margin: 0;
  display: inline-block;
}
.bottom_title{
  background: linear-gradient(to bottom, #9c5b00, #e19e47);
  -webkit-background-clip: text;
  color: transparent;
  font-size: calc(4vw);
  font-weight: 600;
  line-height: 2;
}
.bottom_content_t{
  color: #fff;
  font-size: calc(3vw);
}
.bottom_gift{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.bottom_gift li{
  position: relative;
  width: 45%;
  padding-bottom: 11%;
  /* height: 60%; */
  /* height: calc(17vw); */
}
.bottom_gift li>.gift_outside{
  position: relative;
}
.bottom_gift li>.gift_outside img:first-child{
  display: block;
  width: 60%;
  margin: 0 auto;
}
.bottom_gift li>.gift_outside img:last-child{
  width: 21%;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50% , -50%);
  -webkit-transform: translate(-50% , -50%);
  -moz-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  -o-transform: translate(-50% , -50%);
}
.bottom_gift div{
  color: #e3e2e2;
  font-size: calc(3vw);
  text-align: center;
  line-height: 1.5;
}
.green{
  color: #51c706 !important;
}
.blue{
  color: #0a7dc6 !important;
}
.orange{
  color: #e45326 !important;
}
.purple{
  color: #a512c6 !important;
}
.btn_list{
  /* display: block; */
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.btn_list img{
  width: 60%;
}
.bottom_content .tab{
  background: url(../images/new_img/bottom_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 0 1%;
  height: calc(24vw);
}
.bottom_content .tab .bottom_content_b{
  color: #e7e6e6;
  font-size: calc(3vw);
  margin-bottom: 2%;
  
}
.fill_code input{
  width: 70%;
  margin-right: 2%;
  outline-color:none;
  outline-style:none;
  outline-width:none;
  line-height: 1.9;
  color: #fff;
  background: #1f1b1a;
  border: 0;
  text-indent: .3em;
  border-radius: calc(1vw);
}
.table>div{
  display: flex;

}
.table{
  border: 1px solid #7b5e54;
}
.table span{
  color: #fff;
  text-align: center;
  /* flex-grow:1; */
  width: 50%;
  border-right: 1px solid #7b5e54;
  border-bottom: 1px solid #7b5e54;
  height: calc(8vw);
  line-height: calc(8vw);
  font-size: calc(4vw);
}
.table_head span{
  background: url(../images/new_img/tabet_header.png) no-repeat;
  background-size: 100% 100%;
}
.table_head span:last-child{
  border-right: 0;
}
.table_body span{
  background: url(../images/new_img/tabet_body.png) no-repeat;
  background-size: 100% 100%;
}
.table>div:last-child>span{
  border-bottom: 0;
  
}
.table>div>span:last-child{
  border-right: 0;
}
.table_title{
  line-height: 2.5;
}
.table_title_top{
  padding-top: 5%;
}
/* .my-bullet-active{
  background: #ff6600;
  opacity: 1;
} */
.swiper{
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #ff6600;/* 两种都可以 */
}
.custom-pagination{
  display: flex;
  margin-top: 3%;
}
.pagination_outside{
  width: 90%;
  margin: 0 auto 5%;
}
.custom-pagination li{
  color: #fff;
  text-align: center;
  width: 20%;
  font-size: calc(3vw);
  
}
.custom-pagination li span{
  position: relative;
  z-index: 3;
  margin-bottom: 13%;
  display: block;
}
.custom-pagination li .disc_bg{
  position: relative;
  z-index: 7;
  width: 100%;
}
.custom-pagination li .active_disc_bg{
  width: 100%;

}
.custom-pagination li>div{
  position: relative;
}
.custom-pagination li .word{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  -webkit-transform: translate(-50% , -50%);
  -moz-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  -o-transform: translate(-50% , -50%);
  width: 100%;
  /* position: relative; */
  z-index: 8;
}
.active_disc_bg{
  display: none;
}
.custom-pagination .active .active_disc_bg{
  display: block;
}
.custom-pagination .active .disc_bg{
  display: none;
}
.active_bg_bd{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate( -14% , -23%);
    -webkit-transform: translate( -14% , -23%);
    -moz-transform: translate( -14% , -23%);
    -ms-transform: translate( -14% , -23%);
    -o-transform: translate( -14% , -23%);
    width: 137%;
    z-index: 2;
}
.custom-pagination .active .active_bg_bd{
  display: block;
}
.dialog{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  z-index: 10000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:center;
}
.dialog .dialog_login{
  position: relative;
  width: 92%;
  height: calc(55vw);
  background: url(../images/new_img/login_bg.jpg) no-repeat;
  background-size: 100% 100%;
}
.dialog .dialog_register{
  position: relative;
  width: 92%;
  height: calc(85vw);
  background: url(../images/new_img/register_bg.jpg) no-repeat;
  background-size: 100% 100%;
}
.close{
  position: absolute;
  height: calc(3vw);
  width: 3%;
  background: url(../images/new_img/close.jpg) no-repeat;
  background-size: 100% 100%;
  top: 1.5%;
  right: 1%;

}
.dialog .dialog_login .login_content{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 5% 4%;
}
.dialog .word{
  color: #fff;
  font-size: calc(2.5vw);
  text-align: center;
  line-height: 3.5;
}
.login_title{
  background: linear-gradient(to bottom, #ffffb8, #be8b46);
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  font-size: calc(3vw);
  line-height: 2.5;
  font-weight: 600;
}
.award_title{
  font-size: calc(4vw);
  line-height: 2;
  margin-top: 1%;
}
.login_input{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
  height: 64%;
}
.login_input>div{
  width: 100%;
  display: flex;
  justify-content: center;
}
.login_input>div>span{
  color: #fff;
  /* width: 10%; */
  font-size: calc(3vw);
  line-height: 2.5;
}
.login_input>div>input{
  color: #fff;
  width: 56%;
  background: rgba(0, 0, 0, .3);
  padding: calc(1.8vw);
  border: 0;
  outline-color: none;
  outline-style: none;
  outline-width: none;
  font-size: calc(3vw);
}
.login_input .verificationCode>input{
  width: 27%;
}
.login_input .verificationCode button{
  width: 27%;
  height: calc(8vw);
  background: url(../images/new_img/dialog.png) no-repeat;
  background-size: 100% 100%;
  border: 0;
  color: #fff;
  text-shadow:2px 3px 1px #000;
  font-size: calc(3vw);
  margin-left: 3%;
}
.login_input>div>select{
  color: #fff;
  width: 56%;
  background: rgba(0, 0, 0, .3);
  padding: calc(1.8vw);
  border: 0;
  outline-color: none;
  outline-style: none;
  outline-width: none;
  font-size: calc(3vw);
}
.login_button{
  text-align: center;
  position: relative;
}
.login_button .login_btn{
  text-stroke: 2px #000;
  /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
  -webkit-text-stroke: 2px #000;
  width: 24%;
  height: calc(8vw);
  background: url(../images/new_img/dialog.png) no-repeat;
  background-size: 100% 100%;
  border: 0;
  font-size: calc(3vw);
}
.login_button [data-content]::before {
  /* attr()是用来获取被选中元素的某属性值,并且在样式文件中使用 */
  content: attr(data-content);
  position: absolute;
  /* 实现元素外描边的关键 */
  -webkit-text-stroke: 0;
  /* 文本颜色 */
  color: #fff;
}
.orange{
  color: #ff8400;
}
option{
  /* color: black;
  background: rgba(0, 0, 0, .5);
  line-height: 1.5;
  appearance: none; */
}
.dialog_award{
  box-sizing: border-box;
  position: relative;
  width: 92%;
  height: calc(134vw);
  background: url(../images/new_img/award.jpg) no-repeat;
  background-size: 100% 100%;
  padding: 4% 1%;
}
.dialog_award .close{
  top: 0.5%;
}
.dialog_award .login_btn{
  text-stroke: 2px #000;
  /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
  -webkit-text-stroke: 2px #000;
  width: 24%;
  height: calc(8vw);
  background: url(../images/new_img/dialog.png) no-repeat;
  background-size: 100% 100%;
  border: 0;
  font-size: calc(3vw);
  color: #fff;
}
.dialog_award [data-content]::before {
  /* attr()是用来获取被选中元素的某属性值,并且在样式文件中使用 */
  content: attr(data-content);
  position: absolute;
  /* 实现元素外描边的关键 */
  -webkit-text-stroke: 0;
  /* 文本颜色 */
  color: #fff;
}
.dialog_award .login_input{
  height: auto;
}
.dialog_award{
  font-size: calc(3vw);
}
.dialog_award .word{
  text-align: center;
  line-height: 1.5;
}
.yellow{
  color: #ffe400 !important;
}
.dialog_award .img img{
  width: 24%;
  display: block;
  margin: 0 auto;
}
/* select:focus{
  border: 2px #ddd solid;
  box-shadow: 0 0 15px 1px #DDDDDD;
}
option:hover{
  background: #EBCCD1;
} */
.award_top{
  height: calc(62vw);
}
.award_list{
  width: 96%;
  height: calc(63vw);
  background: url(../images/new_img/inside_bg.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;

}
.list_title{
  background: linear-gradient(to bottom, #ffffb8, #be8b46);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    font-size: calc(3vw);
    line-height: 1.9;
    font-weight: 600;
}
.list_top{
  height: 40%;
  width: 96%;
  margin: 0 auto;
}
.list_bottom{
  height: 41%;
  width: 96%;
  margin: 0 auto;
  margin-top: 4%;
  
}
.cambridge_blue{
  color: #00ccff;
}
.award_list ul li{
  text-align: center;
  line-height: 1.8;
  font-size: calc(2.5vw);
}
.award_list_title{
  color: #fff;
  line-height: 2.5;
  font-size: calc(2.5vw);
  text-indent: .5em;
}
.enroll{
  font-size: calc(3.3vw);
  text-decoration:underline;
}
.is_get{
  filter: grayscale(100%);
}