/*loading*/
body{
  width: 100%;
  height: 100%;
}
.loading{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 99999;
}
.loading_hide{
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.loading .progress{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  color: #212121;
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'opt';
}
.loading .progress::before{
  content: " ";
  width: 1rem;
  height: 1rem;  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(5.7rem,1.5rem);
  background: url(../images/loading/p.png) no-repeat 0 0/100% 100%;
}
.loading .main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loading .logo{
  width: 6.6rem;
  height: 3.6rem;
  top: 0;
  left:0;
  z-index: 2;
  transform-origin: 0 0;
  position: relative;
}
.loading .logo img{
  width: 100%;
  vertical-align: top;
}
.loading .logo::after{
  content: " ";
  width: 2.5rem;
  height: .27rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,1.65rem);
  background: url(../images/loading/txt.png) no-repeat 0 0/100% 100%;
}
.loading .txt{
  margin-top: .8rem;
  width: 1.39rem;
  height: .26rem;
  padding: 0 .2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(0,500%);
}
.loading .txt img{
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.loading .txt::before,.loading .txt::after{
  content: " ";
  display: block;
  width: .23rem;
  height: .25rem;  
  background: url(../images/loading/ico.png) 0 0 no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
}
.loading .txt::before{
  left: -.5rem;
}
.loading .txt::after{
  right: -.5rem;
}
@font-face {
  font-family: 'opt';
  src:  url('../images/opt.ttf?twl9ij') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'opt' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-0:before {
  content: "\e900";
}
.icon-1:before {
  content: "\e901";
}
.icon-2:before {
  content: "\e902";
}
.icon-3:before {
  content: "\e903";
}
.icon-4:before {
  content: "\e904";
}
.icon-5:before {
  content: "\e905";
}
.icon-6:before {
  content: "\e906";
}
.icon-7:before {
  content: "\e907";
}
.icon-8:before {
  content: "\e908";
}
.icon-9:before {
  content: "\e909";
}


/*---------wraper---------*/
.wraper{
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}
/*topbar*/
.topbar{
  position: absolute;
  top: 0;
  left: 0;
}
/*container*/
.container{
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* min-width: 1400px; */
  opacity: 0;
  transition: all .5s linear;
  z-index: 0;
  background: #000;
}
.container_show{
  opacity: 1;
  z-index: 100;
}
.swiper_sections{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*section_header*/
.section_header{  
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/index/bg_20260202.jpg) no-repeat 50% 50%/cover;
}
.section_header .bg_video{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section_header .bg_video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section_header .bg_video::before{
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
}
.section_header .bg_video::after{
  content: " ";
  opacity: 0.2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: none;
  background: url(../images/pv/cover_ico_after.png) repeat 0 0/7.8125vw 7.8125vw;
}
.platform{
  width: 100%;
  height: 1.3rem;
  box-sizing: border-box;
  padding: 0 .4rem .6rem 0;
  transform-origin: 100% 100%;
  right: 0;
  bottom: 0;
  z-index: 8;
}
.platform ul{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}
.platform ul li{
  /* width: .7rem; */
  /* height: .7rem; */
  margin-left: .1rem;
  position: relative;
}
.platform ul li a{
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.platform ul li img{
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.platform ul li .qrcode{
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translate(-50%,0);
  border: 1px solid #1c2128;
  display: none;
}
.platform ul li .qrcode img{
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.platform ul li:hover .qrcode{
  display: block;
}
.platform ul li.platform_qq .qrcode{
  transform: translate(-70%,0);
}
.website_platform{
  width: 4.5rem;
  height: 2.5rem;
  position: absolute;
  top: -2.7rem;
  left: 50%;
  transform: translate(-50%,0);
  border: 1px solid #1c2128;
  display: none;
  background: #fff;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.website_platform p{
  width: 48%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.platform ul li .website_platform p img{
  width: 2rem;
  height: 2rem;
  vertical-align: top;
  flex-shrink: 0;
}
.website_platform p span{
  width: 100%;
  display: block;
  text-align: center;
  padding-top: 0rem;
  font-size: .18rem;
}
.website_platform_only{
  width: 2rem;
  height: 2.5rem;
  position: absolute;
  top: -2.7rem;
  left: 50%;
  transform: translate(-50%,0);
}
.website_platform_only p{
  width: 100%;
}
.sltips{
  width: 1rem;
  bottom: 2vh;
  left: .3rem;
  z-index: 9;
  transform-origin: 0 100%;
  display: block;
  overflow: hidden;
  outline: none;
}
.sltips img{
  width: 100%;
  vertical-align: top;
}
.header_main{
  /* width: 9.56rem; */
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 7;
  box-sizing: border-box;
  padding-bottom: 1.5rem;
}
.header_main .logo{
  width: 4.46rem;
  height: 2.43rem;
  opacity: 0;
  transform: translate(0,1rem);
  transition: transform ease-in-out .5s .5s,opacity ease-in-out .5s .8s;
}
.header_main .logo img{
  width: 100%;
  vertical-align: top;
}
.reserve_tips{
  width: 9.56rem;
  height: .32rem;
  padding: .95rem 0 .4rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(0,.1rem);
  transition: transform ease-in-out .5s .8s,opacity ease-in-out .5s .8s;
}
.reserve_tips img{
  width: 3.9rem;
  height: .32rem;
  vertical-align: top;
  margin: 0 .2rem;
}
.reserve_tips::before,.reserve_tips::after{
  content: " ";
  display: block;
  width: .28rem;
  height: .3rem;
  background: url(../images/index/ico_arr.png) no-repeat 50% 50%/100% 100%;
  /* animation: move 2s linear infinite; */
}
.tips_for_1217 img{
  width: 6.14rem;
}
.tips_for_1216 img{
  width: 4.97rem;
}
.tips_for_1219 img{
  width: 4.47rem;
}
@keyframes move {
  0%{
    opacity: 0;
    transform: translate(0,-50%);
  }
  30%,80%{
    opacity: 1;
    transform: translate(0,0);
  }
  100%{
    opacity: 0;
    transform: translate(0,30%);
  }
}
.reserve_tips .line{
  opacity: 1;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: .21rem;
  background: url(../images/index/ico_line.png) no-repeat 50% 50%/100% auto;
  transform-origin: 50% 100%;
  transform: translate(-50%);
  transition: transform linear .5s 1.3s;
}
.header_btns{
  width: 12rem;
  height: .76rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .3rem;
  opacity: 0;
  transform: translate(0,.5rem);
  transition: transform ease-in-out .3s 1.8s,opacity ease-in-out .3s 1.8s;
}
.header_btns a.btn_item{
  width: 4.26rem;
  height: .76rem;
  transition: all linear .2s;
}
.header_btns a.btn_reserve{
  background: url(../images/index/btn_reserve.png) no-repeat 50% 50%/100% 100%;
}
.header_btns a.btn_reserved{
  background: url(../images/index/btn_reserved.png) no-repeat 50% 50%/100% 100%;
}
.header_btns a.btn_get_qualify{
  background: url(../images/index/btn_download.png) no-repeat 50% 50%/100% 100%;
}
.header_btns a.btn_check_qualify{
  background: url(../images/index/btn_check.png) no-repeat 50% 50%/100% 100%;
}
.header_btns a.btn_download{
  background: url(../images/index/btn_download.png) no-repeat 50% 50%/100% 100%;
}
.header_btns a.btn_ios{
  height: .67rem;
  background: url(../images/index/btn_download_ios.png) no-repeat 50% 50%/100% 100%;
}
.header_btns a.btn_android{
  height: .67rem;
  background: url(../images/index/btn_download_android.png) no-repeat 50% 50%/100% 100%;
}
.header_btns a.btn_apk{
  height: .67rem;
  background: url(../images/index/btn_download_apk.png) no-repeat 50% 50%/100% 100%;
}
.container_show .reserve_tips .line{
  width: 15rem;
}
.container_show .section_header .logo{
  opacity: 1;
  transform: translate(0,0);
}
.container_show .section_header .reserve_tips{
  opacity: 1;
  transform: translate(0,0);
}
.container_show .section_header .header_btns{
  opacity: 1;
  transform: translate(0,0);
}
/*---------section_activity---------*/
.section_activity{  
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/activity/bg.jpg) no-repeat 50% 50%/cover;
}
.section_activity::before{
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0.5;
  background: url(../images/pv/cover_ico_before.png) repeat 0 0/5.5468vw 2.7734vw;
}
.paper_1{
  bottom: 0;
  left: 0;
  width: 8.03rem;
  height: 10.48rem;
  z-index: 5;
  transform-origin: 0 100%;
  opacity: 0;
  background: url(../images/activity/paper_1.png) no-repeat 0 0/100% 100%;
}
.paper_2{
  top: 32.64%;
  right: 0;
  width: 1.75rem;
  height: 2.33rem;
  z-index: 5;
  transform-origin: 100% 50%;
  opacity: 0;
  background: url(../images/activity/paper_2.png) no-repeat 0 0/100% 100%;
}
.cover_left{
  bottom: 0;
  left: 0;
  width: 9.6rem;
  height: 6.8rem;
  z-index: 2;
  transform-origin: 0 100%;
  background: url(../images/activity/cover_left.png) no-repeat 0 0/100% 100%;
}
/* .section_activity::after{
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0.1;
  background: url(../images/pv/cover_ico_after.png) repeat 0 0/7.8125vw 7.8125vw;
} */

.activity_wrap{
  width: 8.6rem;
  height: 100%;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 4;
  font-family: 'hywh75';
  transform-origin: 0 50%;
 }
 .activity_wrap .title{
  position: relative;
  width: 4.12rem;
  height: 2.1rem;
  /* background: url(../images/activity/title.png) no-repeat 50% 50%/100% 100%; */
  flex-shrink: 0;
 }
 .activity_wrap .title::before{
  content: " ";
  display: block;
  position: absolute;
  width: 4.12rem;
  height: 2.46rem;
  left: 0;
  bottom: 0;
  transform: translate(-12%, 5%);
  background: url(../images/activity/title.png) no-repeat 50% 50%/100% 100%;
 }
 .activity_wrap .invite_info{
  width: 100%;
  height: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 .1rem 0 .02rem;
  flex-shrink: 0;
 }
 .lottery_number{
   height: .48rem;
   border-radius: .48rem;
   background: rgba(0, 0, 0, .66);
   color: #fff;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .22rem;
   padding: 0 .3rem;
 }
 .lottery_number .s_1{
  padding-right: .2rem;
 }
 .lottery_number i{
  color: #fdd364;
 }
 .btn_rules{
  width: 1.67rem;
  height: .5rem;
  background: url(../images/activity/btn_rules.png) no-repeat 50% 50%/100% 100%;
 }
 .invite_desc,
 .invite_desc li::before,
 .invite_desc li a::before{
  background-image: url(../images/activity/spr.png);
  background-size: 8.6rem 6.63rem;
  background-repeat: no-repeat;
 }
 .invite_desc{
  flex-shrink: 0;
  width: 8.6rem;
  height: 4.23rem;
  margin-top: .15rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-position: 0 0;
 } 
.invite_desc::before{
  display: none;
}
.invite_desc_shared::before{
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  /* background: url(../images/activity/shared.png) no-repeat 50% 50%/100% 100%; */
}
 .invite_desc li{
   width: 100%;
   height: 32.5%;
   position: relative;
   z-index: 2;
 }
 .invite_desc li a{
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 2;
 } 
.invite_desc li::before{
  content: " ";
  width: .78rem;
  height: .78rem;
  position: absolute;
  right: .2rem;
  top: 50%;
  margin-top: -0.39rem;
  background-position: 100% -4.36rem;
}
.invite_desc_shared li:nth-child(2)::before{
  background-position: 100% -5.17rem;
}
.invite_desc li a::before{
  content: " ";
  width: 1rem;
  height: 0.33rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  margin-top: -0.165rem;
}
.invite_desc li:nth-child(1) a::before{
  background-position: 0 -4.46rem;
}
.invite_desc li:nth-child(2) a::before{
  background-position: 0 -4.78rem;
}
.invite_desc li:nth-child(3) a::before{
  background-position: 0 -5.08rem;
}
.invite_desc li.end a::before{
  background-position: 0 -5.44rem;
}
.invite_desc li.end::before{
  background-position: 100% -5.17rem;
}
.invite_desc li.joined a::before{
  background-position: 0 -5.78rem;
}
.invite_desc li.joined::before{
  background-position: 100% -5.17rem;
}
.invite_desc_shared li:nth-child(2) a::before{
  background-position: 0 -6.1rem;
}

 .activity_wrap .btn_record{
  flex-shrink: 0;
   width: 3.35rem;
   height: .76rem;
   background: url(../images/activity/btn_record.png) no-repeat 50% 50%/100% 100%;
   margin-top: .25rem;
 }
 .dhc_wrap{
  width: 20.87rem;
  height: 12.36rem;
  /* overflow: hidden; */
  top: 50%;
  left: 50%;
  z-index: 4;
  /* transform: translate(-7.187%,0); */
  transform-origin: 0 50%;
  transform: translate(-73%,-50%);
}
.dhc_box{
  width: 100%;
  height: 100%;
  opacity: 0;
  background: url(../images/m202406/animate/dhc/bg.png) no-repeat 0 0/auto 100%;
}
.dhc_box img{
  width: auto;
  height: 100%;
  vertical-align: top;
}
.ico_hand{
  width: 2.9rem;
  height: 3.5rem;
  z-index: 2;
  position: absolute;
  bottom: 12%;
  right: 29%;
  opacity: 0;
}
.ico_hand i{
  width: 100%;
  height: 100%;
  display: block;
  background: url(../images/dhc/ico_hand.png) no-repeat 0 0/100% 100%;
  animation: handAni .75s linear alternate infinite;
  transform-origin: 73% 78%;
}
.btn_lottery{
  width: 40%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 5;
}
.dhc_pixi{
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  position: relative;
  opacity: 1;
}
.dhc_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/dhc/bg_cover.png) no-repeat 0 0/100% 100%;
}
.dhc_pixi_wrap{
  width: 2087px;
  height: 1236px;
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes handAni{
  0%{
    transform: scale(1.1) translate(0,0) rotate3d(0, 0, 0, 0);
  }
  30%{
    transform: scale(1.1) translate(0,0) rotate3d(0, 0, 0, 0);
  }
  100%{
    transform: scale(1) translate(-.47rem,-.80rem) rotate3d(0, 0, 1, -8deg);
  }
}

/*---------section_characters---------*/
.section_characters{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/characters/bg.jpg) no-repeat 50% 50%/cover;
}
.characters_bg_video{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.characters_bg_video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%
}
.ico_1{
  width: 2.40rem;
  height: 3.10rem;
  top: 0;
  left: 0;
  background: url(../images/characters/ico_l.png) no-repeat 50% 50%/100% 100%;
  transform-origin: 0 0;
}
.ico_2{
  width: 2.90rem;
  height: 2.85rem;
  bottom: 0;
  left: 0;
  background: url(../images/characters/ico_bl.png) no-repeat 50% 50%/100% 100%;
  transform-origin: 0 100%;
}
.ico_3{
  width: 7.35rem;
  height: 2.92rem;
  bottom: 0;
  right: 0;
  background: url(../images/characters/ico_br.png) no-repeat 50% 50%/100% 100%;
  transform-origin: 100% 100%;
}
.characters_list{
  width: 1904px;
  height: 1334px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  transform-origin: 0% 0%;
  z-index: 99;
  display: block;
  /* transition: all linear .3s; */
}
.character_list_prev,.character_list_next{
  width: .88rem;
  height: .88rem;
  position: absolute;
  top: 50%;
  margin-top: -.54rem;
  opacity: 0;
}
.character_list_btn_show{
  opacity: 1;
  z-index: 3;
}
.character_list_prev{
  left: .52rem;
  background: url(../images/characters/btn_prev.png) no-repeat 50% 50%/100% 100%;
}
.character_list_next{
  right: .52rem;
  background: url(../images/characters/btn_next.png) no-repeat 50% 50%/100% 100%;
}
.characters_list_show{
  z-index: 99;
  display: block;
}
.characters_list ul{
  width: 100%;
  height: 1334px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: center;
}
.characters_list li{
  width: 25%;
  height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-100%);
}
/* .characters_list li.first_item{
  opacity: 1;
  transform: translateY(0);
} */
.characters_list .character_pic{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .3s linear;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.characters_list .character_pic img{
  height: 100%;
  width: auto;
  vertical-align: top;
}
.characters_list li .gray{
  opacity: .9;
  position: absolute;
}
.characters_list li .active{
  opacity: 0;
  position: absolute;
}
.characters_list.characters_firstpage_end li.character_hover .active{
  opacity: 1;
}
.characters_list.characters_firstpage_end li.character_hover .gray{
  opacity: 0;
}

.section_animate .character_index_1.character_show_active .gray{
  opacity: 0;
}
.section_animate .character_index_1.character_show_active .active{
  opacity: 1;
}
.characters_list li .character_pic p{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  justify-content: flex-end;
  align-items: flex-start;
}
.characters_list li .character_pic p.show{
  display: flex;
}


.characters_list .li .character_pic img{
  width: auto;
  height: 100%;
  vertical-align: top;
}
.character_name{
  width: 100%;
  top: 880px;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  font-size: 47px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
  filter: grayscale(100);
  color: #838383;
  font-family: 'hkljh';
  opacity: 0;
  /* transition: opacity .2s .8s linear; */
}
.character_name::before{
  content: " ";
  display: block;
  width: 100%;
  height: 110px;
  background: url(../images/characters/ico_name_gray.png) no-repeat 50% 0/101px 101px;
}
.character_name.character_hover::before,.characters_list li.character_hover .character_name::before{
  background: url(../images/characters/ico_name.png) no-repeat 50% 0/101px 101px;
}
/* .characters_list li .character_name.name_active{
  transition: opacity .2s 1s linear;
  opacity: 1;
} */
.characters_list li.character_hover .character_name{
  transition: opacity .2s linear;
  filter: grayscale(0);
  color: #ede8d8;
}
.character_index_3 .character_name::before,.character_index_4 .character_name::before{
  height: 80px;
  background: url(../images/characters/ico_name_gray.png) no-repeat 50% 0/80px 80px;
}
.characters_list li.character_index_3.character_hover .character_name::before,.characters_list li.character_index_4.character_hover .character_name::before{
  background: url(../images/characters/ico_name.png) no-repeat 50% 0/80px 80px;
}



.character_show_active .character_name{
  filter: grayscale(0);
  color: #ede8d8;
}
.character_show_active .character_name::before{
  background: url(../images/characters/ico_name.png) no-repeat 50% 0/101px 101px;
}
.character_index_1{
  opacity: 1;
  left: 50%;
  /* transform: translate(0,-100%); */
}
.character_index_2{
  opacity: 1;
  left: 25%;
  /* transform: translate(0,-100%); */
}
.character_index_3{
  opacity: 1;
  left: 75%;
  /* transform: translate(0,-100%); */
}
.character_index_4{
  opacity: 1;
  left: 0;
  /* transform: translate(0,-100%); */
}
.character_index_center{
  left: 50%;
  transform: translate(-50%,-100%);
}
/* .character_index_2,.character_index_4{
  background: url(../images/characters/ico_name_gray.png) no-repeat 50% 0/80px 80px;
  padding-top: 90px;
} */
.section_animate .character_index_1.character_show{
  transform: translate(0,0);
  /* opacity: 1; */
  /* transition: all .4s .3s ease-in-out; */
}
.section_animate .character_index_2.character_show{
  transform: translate(0,0);
  /* opacity: 1; */
  /* transition: all .35s .25s ease-in-out; */
}
.section_animate .character_index_3.character_show{
  transform: translate(0,0);
  /* opacity: 1; */
  /* transition: all .45s .35s ease-in-out; */
}
.section_animate .character_index_4.character_show{
  transform: translate(0,0);
  /* opacity: 1; */
  /* transition: all .3s .2s ease-in-out; */
}
/* .section_animate .character_index_1.character_index_center.character_show{
  transform: translate(-50%,0);
  opacity: 1;
  transition: all .3s .2s ease-in-out;
} */
.character_index_1.character_hide{
  transform: translate(0,-100%);
  opacity: 0;
  transition: opacity .3s linear,transform .05s .3s linear;
}
.character_index_2.character_hide{
  transform: translate(0,-100%);
  opacity: 0;
  transition: opacity .3s linear,transform .05s .3s linear;
}
.character_index_3.character_hide{
  transform: translate(0,-100%);
  opacity: 0;
  transition: opacity .3s linear,transform .05s .3s linear;
}
.character_index_4.character_hide{
  transform: translate(0,-100%);
  opacity: 0;
  transition: opacity .3s linear,transform .05s .3s linear;
}
.character_index_1.character_index_center.character_hide{
  transform: translate(-50%,-100%);
  opacity: 0;
  transition: opacity .3s linear,transform .05s .3s linear;
}
/* .character_90034001{
  opacity: 1;
  left: 0;
}
.section_animate .character_90034001.character_show{
  transform: translate(0,0);
}
.character_90034001.character_hide{
  transform: translate(0,-100%);
  opacity: 0;
  transition: opacity .3s linear,transform .05s .3s linear;
}
.character_90027001{  
  opacity: 1;
  left: 25%;
}
.character_91014001{  
  opacity: 1;
  left: 50%;
} */


.character_info{
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
  transition: all linear .3s;
  background: #000;
}
.character_info_show{
  opacity: 1;
}
.character_info_logo{
  width: 2.94rem;
  height: 1.6rem;
  padding: .68rem 0 0 .8rem;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  z-index: 10;
}
.character_info_logo img{
  width: 100%;
  vertical-align: top;
}
.character_info_close{
  width: .5rem;
  height: .5rem;
  right: .5rem;
  top: .5rem;
  z-index: 12;
  transition: all .3s ease-in-out;
  background: url(../images/characters/info/btn_close.png) no-repeat 50% 50%/100% 100%;
}
.character_info_close:hover{
  transform: rotate(90deg);
}
.character_info_list{
  width: 100%;
  height: 100%;
}
/* .character_bgcolor{
  display: block;
  position: absolute;
  top: 0;
  right: 11vw;
  width: 19.18%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
  z-index: 2;
  transition: opacity .3s .3s linear;
} */
.character_info_list ul{
  width: 100%;
  height: 100%;
  z-index: 3;
  position: relative;
}
.character_info_list ul li{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all .3s linear;
  overflow: hidden;
}
.character_info_list ul li.active{
  z-index: 5;
  opacity: 1;
}
.character_info_list ul li.active::before{
  display: block;
}
.character_info_list ul::after{
  opacity: 1;
}
.character_main{
  width: 8.5rem;
  left: .52rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  transform-origin: 0 50%;
  opacity: 0;
  z-index: 11;
  top: 50%;
  padding-bottom: .7rem;
  padding-top: .88rem;
}
.character_main::after{
  content: " ";
  display: block;
  width: 8.5rem;
  height: .2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  position: absolute;
  opacity: 0;
  transition: all .2s .6s linear;
  transform: translate(0,.2rem);
  background: url(../images/characters/info/ico_nakama.png) no-repeat 50% 50%/100% 100%;
}
.character_main .name{
  flex-shrink: 0;
  width: 100%;
  height: 1.5rem;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.49rem;
  line-height: 1;
  color: #232029;
  position: relative;
  margin-top: .35rem;
}
.characterinfo_90037001 .character_main .name{
  font-size: .7rem;
  line-height: 1.1;
}
.character_main .name::before{
  content: " ";
  display: block;
  width: .43rem;
  height: 100%;
  background: url(../images/characters/info/ico_name.png) no-repeat 50% 50%/100% 100%;
  opacity: 0;
  transform: translate(.5rem,0);
  transition: all .3s .35s ease-in-out;
}
.character_main .name i{
  width: 1px;
  height: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  transform: translate(.5rem,0);
  transition: all .3s .4s ease-in-out;
  padding-left: .2rem;
}
.character_main .title{
  flex-shrink: 0;
  width: 100%;
  height: .64rem;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translate(0,-.5rem);
  transition: all .3s .1s ease-in-out;
  /* background: url(../images/characters/info/bg_title.png) no-repeat 50% 50%/100% auto; */
}
.character_main .title i{
  height: 100%;
  font-size: .41rem;
  color: #ffffff;
  background: #060508;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 0 .1rem;
  font-weight: normal;
}

.character_info_pic{
  /* width: 100%;
  height: 100%; */
  width: 25.6rem;
  height: 16.6rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: absolute;
  right: 50%;
  bottom: 0;
  z-index: 10;
  opacity: 0;
  margin-right: -14.5rem;
  transform: translate(100%,0);
  transition: all .5s ease-in-out;
}
.characterinfo_90026001 .character_info_pic{
  margin-right: -13.7rem;
}
.characterinfo_90041001 .character_info_pic{
  right: 0;
  margin-right: 0;
}
.characterinfo_90050001 .character_info_pic{
  right: 0;
  margin-right: 0;
}
.characterinfo_90024001 .character_info_pic{
    right: 0;
    margin-right: 0;
}
.characterinfo_90060001 .character_info_pic{
  right: 0;
  margin-right: 0;
} 
.characterinfo_90033001 .character_info_pic{
  right: 0;
  margin-right: 0;
} 
.characterinfo_90021001 .character_info_pic{
  margin-right: -13.8rem;
}
@media all and (orientation : landscape ) and (max-aspect-ratio: 16/10) and (min-aspect-ratio: 15/10){ 
  /* .characterinfo_90026001 .character_info_pic{
    margin-left: -16rem;
  } */
}
@media all and (orientation : landscape ) and (min-aspect-ratio: 2/1){ 
  /* .characterinfo_90026001 .character_info_pic{
    margin-left: -8.5rem;
  }
  .characterinfo_90041001 .character_info_pic{
    margin-left: -9.5rem;
  } */
}
.character_info_pic img{
  width: 100%;
  height: 100%;  
  object-fit: contain;
  object-position: 100% 100%;
  position: relative;
  z-index: 2;
}
.cloud_back{
  width: 14.67rem;
  height: 5.04rem;
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: 100% 100%;
  background: url(../images/characters/info/cloud_back.png) no-repeat 0 0/100% 100%;
  z-index: 2;
}
.cloud_back img{
  width: 100%;
  height: 100%;  
  object-fit: contain;
  object-position: 100% 100%;
}
.cloud_front{
  width: 13.58rem;
  height: 2.69rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 11;
  transform-origin: 100% 100%;
  background: url(../images/characters/info/cloud_front.png) no-repeat 0 0/100% 100%;
}
.cloud_front img{
  width: 100%;
  height: 100%;  
  object-fit: contain;
  object-position: 100% 100%;
}
.cloud_left{
  width: 2.87rem;
  height: 1.09rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 11;
  transform-origin: 0 100%;
  background: url(../images/characters/info/cloud_left.png) no-repeat 0 0/100% 100%;
}
.cloud_left img{
  width: 100%;
  height: 100%;  
  object-fit: contain;
  object-position: 0 100%;
}
/* .character_info .character_pic::after{
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 43.1%;
  height: 20%;
  background: url(../images/characters/info/ico_character_cover.png) no-repeat 50% 100%/100% auto;
} */
.character_info_list ul li.active .character_main::after{
  transform: translate(0,0);
  opacity: 1;
}
.character_info_list ul li.active .character_main{
  opacity: 1;
}
.character_info_list ul li.active .character_info_pic{
  transform: translate(0,0);
  opacity: 1;
}
.character_info_list ul li.active .name i,.character_info_list ul li.active .name::before{
  opacity: 1;
  transform: translate(0,0);
}
.character_info_list ul li.active .title{
  opacity: 1;
  transform: translate(0,0);
  font-family: 'hywh75';
}
.total_box{
  width: 100%;
  height: 2.6rem;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.9);
  padding: .3rem 0;
  opacity: 0;
  width: 100%;
  transform: translate(0,110%);
  /* overflow: hidden; */
  transition: all ease-in-out .3s;
}
/* .total_box::after{
  content: " ";
  display: none;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(100%,0);
  border: 126px solid;
  border-left-color: rgba(0, 0, 0, 0.9);
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  opacity: 0;
  transition: all linear .2s .1s;
}
.total_box_show::after{
  display: block;
  opacity: 1;
} */
.total_box_show{
  transform: translate(0,0);
  opacity: 1;
}
.total_box::before{
  content: " ";
  display: block;
  width: 100%;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/characters/total/ico_line.png) repeat-x 0 0/auto 100%;
  transform: translate(0,-70%);
}
.total_list{
  width: 13.5rem;
  height: 100%;
  margin: 0 auto;
}
.total_list ul{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.total_list ul li{
  width: .9rem;
  height: .9rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  opacity: 0;
  transform: translate(0,60%);
  transition: all .2s linear;
}
.total_box_show .total_list ul li{
  opacity: 1;
  transform: translate(0,0);
}
/* .total_box_show .total_list ul li:nth-child(1),.total_box_show .total_list ul li:nth-child(16){
  transition: all .3s .25s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(2),.total_box_show .total_list ul li:nth-child(17){
  transition: all .3s .26s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(3),.total_box_show .total_list ul li:nth-child(18){
  transition: all .3s .27s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(4),.total_box_show .total_list ul li:nth-child(19){
  transition: all .3s .28s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(5),.total_box_show .total_list ul li:nth-child(20){
  transition: all .3s .29s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(6),.total_box_show .total_list ul li:nth-child(21){
  transition: all .3s .3s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(7),.total_box_show .total_list ul li:nth-child(22){
  transition: all .3s .31s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(8),.total_box_show .total_list ul li:nth-child(23){
  transition: all .3s .32s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(9),.total_box_show .total_list ul li:nth-child(24){
  transition: all .3s .33s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(10),.total_box_show .total_list ul li:nth-child(25){
  transition: all .3s .34s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(11),.total_box_show .total_list ul li:nth-child(26){
  transition: all .3s .35s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(12),.total_box_show .total_list ul li:nth-child(27){
  transition: all .3s .35s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(13),.total_box_show .total_list ul li:nth-child(28){
  transition: all .3s .37s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(14),.total_box_show .total_list ul li:nth-child(29){
  transition: all .3s .38s ease-in-out;
}
.total_box_show .total_list ul li:nth-child(15){
  transition: all .3s .39s ease-in-out;
} */
.total_box_show .total_list ul li:nth-child(-n + 15){
  transition: all .3s .32s ease-out;
}
.total_box_show .total_list ul li:nth-child(n+16):nth-child(-n+30) {
  transition: all .35s .36s ease-out;
}
.total_box_show .total_list ul li:nth-child(n+31):nth-child(-n+45) {
  transition: all .37s .4s ease-in-out;
}


.total_list ul li img{
  width: .70rem;
  height: .70rem;
  vertical-align: top;
  transition: all .3s linear;
}
.total_list ul li.active::after{
  content: " ";
  display: block;
  width: .90rem;
  height: .90rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: url(../images/characters/total/ico_active.png) no-repeat 0 0/100% 100%;
}
.btn_hide_allcharacter{
  width: .43rem;
  height: .83rem;
  top: 50%;
  right: 0;
  transform: translate(100%,-50%);
  background: url(../images/characters/total/btn_hide.png) no-repeat 0 0/100% 100%;
}


.btn_character_prev,.btn_character_next{
  width: .88rem;
  height: .88rem;
  top: 50%;
  margin-top: -.54rem;
  z-index: 11;
}
.btn_character_prev{
  left: .52rem;
  background: url(../images/characters/info/btn_prev.png) no-repeat 50% 100%/100% 100%;
}
.btn_character_next{
  right: .52rem;
  background: url(../images/characters/info/btn_next.png) no-repeat 50% 100%/100% 100%;
}

.ico_list{
  width: 2.40rem;
  height: .80rem;
  position: absolute;
  bottom: 3.5vh;
  left: .52rem;
  z-index: 999;
  transition: all .3s linear;
}
.ico_list_hide{
  opacity: 0;
  transform: translate(0,0);
}
.btn_show_allcharacter{
  width: .60rem;
  height: .60rem;
  right: 0;
  top: 50%;
  transform: translate(100%,-50%);
  background: url(../images/characters/total/btn_more_1.png) no-repeat 0 0/100% 100%;
}
.list_left_wrap{
  width: 2.40rem;
  height: .80rem;
  overflow: hidden;
}
.list_left{
  width: 100%;
  /* height: calc(80rem * 29); */
  transition: all .3s linear;
}
.icolist_swiper{
  width: 100%;
  height: 100%;
}
.list_left li,.icolist_swiper .swiper-slide{
  width: .80rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .10rem;
  box-sizing: border-box;
}
.list_left li img,.icolist_swiper .swiper-slide img{
  width: .60rem;
  height: .60rem;
  object-fit: cover;
  border-radius: 100%;
  box-sizing: border-box;
  transition: all .3s linear;
}
.list_left li.active img,.icolist_swiper .active img{
  width: .72rem;
  height: .72rem;
}
.icolist_swiper .swiper-slide::after{
  content: " ";
  display: block;
  width: .90rem;
  height: .90rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  background: url(../images/characters/total/ico_active.png) no-repeat 0 0/100% 100%;
  opacity: 0;
  transition: all .3s ease-in-out;
}
.icolist_swiper .active::after{
  opacity: 1;
}
.ico_list_bottom{
  width: 100%;
  height: 50vh;
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

/*---------section_pv---------*/
.section_pv{
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: url(../images/pv/bg.jpg) no-repeat 50% 50%/cover; */
}
.pv_box{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.pv_box .pv_sum{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  transition: opacity .3s linear;
  z-index: 2;
}
.pv_box::after{
  content: " ";
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #000;
  opacity: 1;
  transition: opacity .2s .05s linear;
}
.pv_box_hide::after{
  z-index: 5;
  display: block;
}

.pv_box .pv_sum img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pv_box .pv_sum img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
/* .pv_box .pv_sum::before{
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.5;
  background: url(../images/pv/cover_ico_before.png) repeat 0 0/5.5468vw 2.7734vw;
}
.pv_box .pv_sum::after{
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0.2;
  background: url(../images/pv/cover_ico_after.png) repeat 0 0/7.8125vw 7.8125vw;
}*/
.pv_sum_item{
  width: 100%;
  height: 100%;
  background: #000;
  transition: all .3s linear;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.pv_sum_item.active{
  opacity: 1;
  z-index: 2;
}
.pv_box .pv_sum video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pv_btn_play{
  width: 1.06rem;
  height: 1.06rem;
  top: 50%;
  left: 50%;
  margin: -0.53rem 0 0 -0.53rem;
  z-index: 4;
  background: url(../images/pv/ico_player.png) no-repeat 50% 100%/100% 100%;
}
.pv_1{
  background: url(../images/pv/1.jpg) no-repeat 50% 50%/cover;
}
.pv_2{
  background: url(../images/pv/2.jpg) no-repeat 50% 50%/cover;
}
.pv_3{
  background: url(../images/pv/3.jpg) no-repeat 50% 50%/cover;
}
.pv_4{
  background: url(../images/pv/4.jpg) no-repeat 50% 50%/cover;
}
.pv_list{
  width: 23rem;
  height: calc(5rem*651/1500);
  left: 50%;
  bottom: 0.3rem;
  margin-left: -11.5rem;
  z-index: 5;
  opacity: 0;
  transform: translate(0,100%);
}
.pv_list_scroll{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.pv_list ul{
  width: calc(4.6rem*7);
  height: calc(4.2rem*651/1500);
  display: flex;
  justify-content: center;
  transition: all linear .3s;
}
.pv_list ul li{
  width: 4.2rem;
  height: calc(4.2rem*651/1500);
  display: block;
  box-sizing: border-box;
  margin: 0 0.2rem;
  position: relative;
  transition: all linear .2s;
  cursor: pointer;
  overflow: hidden;
  background: #000;
  border-radius: 0.1rem;
}
.pv_list ul li a{
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  box-sizing: border-box;
  transition: all linear .2s;
}
.pv_list ul li img{
  width: 100%;
  height: 100%;
  opacity: .8;
  object-fit: cover;
  transition: all .3s linear;
}
.pv_list ul li::before{
  content: " ";
  display: block;
  width: 100%;
  height: 0.04rem;
  background: #ab8446;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
  transition: all .3s linear;
}
.pv_list ul li::after{
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  border: 0.04rem solid #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  box-sizing: border-box;
  border-radius: 0.08rem;
  transition: all .3s linear;
  opacity: 0;
}
.pv_list ul li.active{
  box-shadow: 0 0 0.12rem rgba(255, 255, 255, 0.84);
}
.pv_list ul li.active::after{
  opacity: 1;
}
.pv_list ul li.active::before{
  opacity: 0;
}
.pv_list ul li.active img{
  opacity: 1;
}
.pv_list_prev,.pv_list_next{
  width: .6rem;
  height: .6rem;
  position: absolute;
  top: 50%;
  margin-top: -.3rem;
  transition: all .3s linear;
}
.pv_list_prev{
  left: -.7rem;
  background: url(../images/characters/btn_prev.png) no-repeat 50% 50%/100% 100%;
}
.pv_list_next{
  right: -.7rem;
  background: url(../images/characters/btn_next.png) no-repeat 50% 50%/100% 100%;
}
.pv_list_prev:hover,.pv_list_next:hover{
  transform: scale(1.15);
}
.click_disable{
  opacity: 0.3;
  cursor: default;
}
.click_disable:hover{
  transform: scale(1);
}
.player_box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  z-index: 1;
  transition: all .3s linear;
}
.player_box_show{
  opacity: 1;
  z-index: 3;
}
.player_box .box{
  width: 100%;
  height: 100%;
}
.section_animate .pv_list{
  /* transition: all .5s .5s ease-in-out; */
  opacity: 1;
  transform: translate(0,0);
}
.section_animate .pv_list_hide{
  transition: all .3s ease-in-out;
  opacity: 0;
  transform: translate(0,100%);
}
/*---------section_news---------*/
.section_news{
  display: block;
  background: url(../images/news/bg.jpg) no-repeat 50% 50%/cover;
}
.news_bg_video{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.pixi_box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.pixi_box canvas{
  width: 100%;
  height: 100%;
}
.news_bg_video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  mix-blend-mode: screen;
}
.news_bg_video_cover{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 23.58rem;
  height: 23.42rem;
  z-index: 2;
  background: url(../images/news/cover.png) no-repeat 50% 50%/100% 100%;
  transform-origin: 0 100%;
}
.news_bg_video .ico_news_1{
  width: 2.60rem;
  height: 3.38rem;
  bottom: 0;
  left: 0;
  background: url(../images/news/ico_1.png) no-repeat 50% 50%/100% 100%;
  transform-origin: 0 100%;
  z-index: 3;
  opacity: 0.5;
}
.news_bg_video .ico_news_2{
  width: 4.35rem;
  height: 3.38rem;
  bottom: -.20rem;
  right: -.20rem;
  background: url(../images/news/ico_2.png) no-repeat 50% 50%/100% 100%;
  transform-origin: 100% 100%;  
}
.news_wrap{
  z-index: 2;
  width: 100%;
  height: 100%;
}
.news{
  width: 12.60rem;
  left: 5.469%;
  top: 40%;
  transform: translate(0,-52%);
  transform-origin: 0 50%;
}
.news h3{
  width: 3.44rem;
  height: 2.23rem;
  background: url(../images/news/title.png) no-repeat 50% 50%/100% 100%;
}
.news h3 span{
  display: none;
}
.news_list{
  width: 12.10rem;
  padding-left: .50rem;
}
.news_list li{
  box-sizing: border-box;
  opacity: 0;
  transform: translate(0, 50%);
  padding: .30rem 0;
  position: relative;
}
.news_list li::before,.news_list li::after{
  content: " ";
  width: 5px;
  height: 5px;
  border-radius: 100%;
  display: block;
  bottom: -2px;
  background: #6e829f;
  position: absolute;
}
.news_list li::before{
  left: 0;
}
.news_list li::after{
  right: 0;
}
.news_list li a{
  color: #252b2f;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.news_list li a::after{
  content: " ";
  width: 11.95rem;
  height: 1px;
  display: block;
  bottom: 0;
  background: #6e829f;
  position: absolute;
  left: 50%;
  transform: translate(-50%,50%);
}
.news_list li a span{
  flex-grow: 1;
  font-size: .33rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: 'hywh75';
  /* font-weight: bold; */
  color: #3f4952;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.84);
}
.news_list li a i{
  width: .88rem;
  height: .40rem;
  font-size: .28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8f8f8;
  background: #56708f;
  border-radius: .40rem;
  margin-right: .30rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.84);
}
.news_list li a em{
  font-size: .29rem;
  width: 1.90rem;
  display: block;
  text-align: right;
  color: #666a78;
}
.news_list li:last-child{
  background: none;
  padding-bottom: .18rem;
}
.news_list li a:hover{
  text-decoration: none;
}

.news_more{
  width: 3.32rem;
  height: .73rem;
  margin-top: .50rem;
  margin-left: .32rem;
  background: url(../images/news/btn_more.png) no-repeat 50% 0/100% 100%;
  opacity: 0;
  transform: translate(0, 20%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.news_more a{
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-indent: -9999em;
}

.section_news.section_animate .news_list li{
  opacity: 1;
  transform: translate(0, 0);
  position: relative;
}
.section_news.section_animate .news_list li:nth-child(1){  
  transition: all ease-in-out 0.35s 1s;
}
.section_news.section_animate .news_list li:nth-child(2){  
  transition: all ease-in-out 0.4s 1.05s;
}
.section_news.section_animate .news_list li:nth-child(3){  
  transition: all ease-in-out 0.45s 1.1s;
}
.section_news.section_animate .news_list li:nth-child(4){  
  transition: all ease-in-out 0.5s 1.15s;
}
.section_news.section_animate .news_more{  
  opacity: 1;
  transform: translate(0, 0);
  transition: all linear 0.2s 1.5s;
}


/*pop_video*/
.pop_video{
  padding: 0;
  width: 10.00rem;
  height: 6.00rem;
  background: #000;
  position: relative;
}
.pop_video .close{
  width: .50rem;
  height: .35rem;
  /*
  background: url(../images/ip/pops/btn_close.png) 0 0 no-repeat;
  background-size: 100% 100%;
  */
  right: -.50rem;
  top: 0;
  cursor: pointer;
  font-size: .50rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pop_video .close:hover{
  text-decoration: none;
}
.pop_video .main{
  width: 100%;
  height: 100%;
}
.pop_video .main .video_box{
  width: 100%;
  height: 100%;
}



.pop_pv{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0;
  z-index: -1;
  display: none;
}
.close_pv{
  width: .5rem;
  height: .5rem;
  right: .5rem;
  top: .5rem;
  background: url(../images/characters/info/btn_close.png) no-repeat 50% 50%/100% 100%;
  z-index: 1000;
  transition: all ease-in-out .5s;
}
.close_pv:hover{
  transform: rotate(90deg);
}
.pop_pv .pop_pv_content{
  width: 100%;
  height: 100%;
}
.pop_pv .pop_pv_content video{
  object-fit: contain;
}

.pop_pv_show{
  /* opacity: 1; */
  z-index: 9999;
  display: block;
}
.pop_pv_hide{
  opacity: 0;
  transition: all .3s linear;
}

/* .scene{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;
} */
.btn_get_qualify_fixed{
  z-index: 998;
  width: 2.15rem;
  height:2.34rem;
  position: absolute;
  bottom: 40%;
  right: 0;
  transform-origin: 100% 50%;
  background: url(../images/activity/btn_dhc_bg.png) no-repeat 50% 50%/100% 100%;
  opacity: 1;
  transform: translate(0,0);
  transition: all .3s linear;
}
.btn_get_qualify_fixed::before{
  content: " ";
  width: 1.05rem;
  height: .27rem;
  position: absolute;
  bottom: .18rem;
  left: .7rem;
  background: url(../images/m202406/btn_dhc_txt_get.png) no-repeat 50% 50%/100% 100%;
}
.have_qualify::before{
  background: url(../images/m202406/btn_dhc_txt_check.png) no-repeat 50% 50%/100% 100%;
}
/* .btn_get_qualify_fixed::before{
  content: " ";
  width: 1.58rem;
  height: .4rem;
  position: absolute;
  bottom: .2rem;
  left: .2rem;
  background: url(../images/m202406/btn_dhc_txt_get.png) no-repeat 50% 50%/100% 100%;
}
.btn_check_qualify::before{
  background: url(../images/m202406/btn_dhc_txt_check.png) no-repeat 50% 50%/100% 100%;
} */
.btn_get_qualify_fixed_hide{
  opacity: 0;
  transform: translate(110%,0);
}
.btn_get_qualify_fixed_nohome{
  bottom: 8vh;
}



.footer{
  width: 100%;
  min-width: 1400px
}
.footer img{
  width: 100%;
  vertical-align: top;
}




.section_process{
  overflow: hidden;
  background: url(../images/process/bg.jpg) no-repeat 50% 50%/cover;
}
.section_process .bg_video{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section_process .bg_video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cloud_right{
  display: block;
  width: 13.49rem;
  height: 4rem;
  top: -2rem;
  right: 0;
  position: absolute;
  z-index: 2;
  opacity: 0;
  background: url(../images/process/ico_right.png) no-repeat 100% 0/100% auto;
}
.section_process .title{
  width: 16.22rem;
  height: 5.7rem;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translate(0,2rem);
  background: url(../images/process/ico_left.png) no-repeat 0 100%/100% auto;
}
.section_process .title_txt{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: url(../images/process/title_txt.png) no-repeat 0 100%/100% auto;
}
.progress_number{
  width: 100%;
  /* height: 3.8rem; */
  height: 3rem;
  position: absolute;
  bottom: .5rem;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 3;
  box-sizing: border-box;
  padding-right: .8rem;
}
.progress_number .progress_number_title{
  width: 2.53rem;
  height: .48rem;
  flex-shrink: 0;
  opacity: 0;
  background: url(../images/process/title_number.png) no-repeat 100% 100%/100% 100%;
}
.number_box{
  width: 100%;
  height: 2.5rem;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
.number_canvas{
  width: 1600px;
  height: 250px;
  position: absolute;
  bottom: 0;
  right: 0;
  transform-origin: 100% 100%;
}

/* .process_list{
  width: 100%;
  height: 100%;
} */
.process_list_wrap{
  width: 25.6rem;
  height: 14.4rem;
  position: absolute;
  bottom: 0;
  right: 0;
}
.process_list{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/process/bg_process.png) no-repeat 0 0/100% 100%;
}
.process_list li{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.process_list li .gift{
  width: 5.2rem;
  height: 4rem;
  display: block;
  position: absolute;  
}
.process_list li .ani_cover,
.process_list li .on{
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
}
.process_list li.active .ani_cover,
.process_list li.active .on{
  display: block;
}
.process_item p{
  width: 5.2rem;
  height: 4rem;
  display: block;
  position: absolute;
}
.process_item p::before,.process_item p::after{
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.process_item p::after{
  opacity: 0;
}
.process_1 .gift_1{   
  bottom: 6.67rem;
  right: .45rem;
  background: url(../images/process/process_1.png) no-repeat 0 0/100% 100%;
}
.process_2 .gift_2{    
  bottom: 3.3rem;
  right: 3.13rem;
  background: url(../images/process/process_2.png) no-repeat 0 0/100% 100%;
}
.process_3 .gift_3{
  bottom: 5.48rem;
  right: 6.92rem;
  background: url(../images/process/process_3.png) no-repeat 0 0/100% 100%;
}
.process_4 .gift_4{      
  bottom: 2.87rem;
  right: 10.28rem;
  background: url(../images/process/process_4.png) no-repeat 0 0/100% 100%;
}
.process_5 .gift_5{    
  bottom: 5.57rem;
  right: 13.64rem;
  background: url(../images/process/process_5.png) no-repeat 0 0/100% 100%;
}
.process_1 .gift_1 .on{   
  background: url(../images/process/process_1_on.png) no-repeat 0 0/100% 100%;
}
.process_2 .gift_2 .on{ 
  background: url(../images/process/process_2_on.png) no-repeat 0 0/100% 100%;
}
.process_3 .gift_3 .on{
  background: url(../images/process/process_3_on.png) no-repeat 0 0/100% 100%;
}
.process_4 .gift_4 .on{    
  background: url(../images/process/process_4_on.png) no-repeat 0 0/100% 100%;
}
.process_5 .gift_5 .on{  
  background: url(../images/process/process_5_on.png) no-repeat 0 0/100% 100%;
}
.process_1 .gift_1 .ani_cover{   
  background: url(../images/process/process_1_cover.png) no-repeat 0 0/100% 100%;
}
.process_2 .gift_2 .ani_cover{ 
  background: url(../images/process/process_2_cover.png) no-repeat 0 0/100% 100%;
}
.process_3 .gift_3 .ani_cover{
  background: url(../images/process/process_3_cover.png) no-repeat 0 0/100% 100%;
}
.process_4 .gift_4 .ani_cover{    
  background: url(../images/process/process_4_cover.png) no-repeat 0 0/100% 100%;
}
.process_5 .gift_5 .ani_cover{  
  background: url(../images/process/process_5_cover.png) no-repeat 0 0/100% 100%;
}
/* .process_1.active::before{
  background: url(../images/process/bg_1.png) no-repeat 0 0/100% 100%;
}
.process_2.active::before{
  background: url(../images/process/bg_2.png) no-repeat 0 0/100% 100%;
}
.process_3.active::before{
  background: url(../images/process/bg_3.png) no-repeat 0 0/100% 100%;
}
.process_4.active::before{
  background: url(../images/process/bg_4.png) no-repeat 0 0/100% 100%;
}
.process_5.active::before{
  background: url(../images/process/bg_5.png) no-repeat 0 0/100% 100%;
} */
.process_item::before{
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.section_process.section_animate .process_item.active p::after{
  opacity: 1;
}
.section_process.section_animate .process_item.active p::before{
  opacity: 0;
}
.section_process.section_animate .process_item.active::before{
  opacity: 1;
}

.p_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.process_item.active .p_bg{
  display: block;
}
.p_bg_1{
  background: url(../images/process/bg_1.png) no-repeat 0 0/100% 100%;
  mask-image: url("../images/process/mask_1.png"); 
  mask-position: 20.52rem 2.83rem;
  mask-size: 11.9rem 4.6rem;
  -webkit-mask-image:url("../images/process/mask_1.png");
  mask-position: 20.52rem 2.83rem;
  -webkit-mask-size: 11.9rem 4.6rem;
}
.p_bg_2{
  background: url(../images/process/bg_2.png) no-repeat 0 0/100% 100%;
  mask-image: url("../images/process/mask_2.png"); 
  mask-position: 17.25rem 2.25rem;
  mask-size: 8.5rem 8.5rem;
  -webkit-mask-image:url("../images/process/mask_2.png");
  mask-position: 17.25rem 2.25rem;
  -webkit-mask-size: 8.5rem 8.5rem;
}
.p_bg_3{
  background: url(../images/process/bg_3.png) no-repeat 0 0/100% 100%;
  mask-image: url("../images/process/mask_3.png"); 
  mask-position: 13.1rem 3.1rem;
  mask-size: 8.7rem 8.7rem;
  -webkit-mask-image:url("../images/process/mask_3.png");
  mask-position: 13.1rem 3.1rem;
  -webkit-mask-size: 8.7rem 8.7rem;
}
.p_bg_4{
  background: url(../images/process/bg_4.png) no-repeat 0 0/100% 100%;
  mask-image: url("../images/process/mask_4.png"); 
  mask-position: 10.17rem 3.1rem;
  mask-size: 8.7rem 8.7rem;
  -webkit-mask-image:url("../images/process/mask_4.png");
  mask-position: 10.17rem 3.1rem;
  -webkit-mask-size: 8.7rem 8.7rem;
}
.p_bg_5{
  background: url(../images/process/bg_5.png) no-repeat 0 0/100% 100%;
  mask-image: url("../images/process/mask_5.png"); 
  mask-position: 6.6rem 4.1rem;
  mask-size: 8.7rem 8.7rem;
  -webkit-mask-image:url("../images/process/mask_5.png");
  mask-position: 6.6rem 4.1rem;
  -webkit-mask-size: 8.7rem 8.7rem;
}

#index {
  font-family: 'hkljh';
}