html, body{width: 100%;overflow-x: hidden;}

@media (max-width: 1024px) {
  .hidden_m{
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .hidden_pc{
    display: none !important;
  }
}

.nav_pc_bg{width: 100%;height: auto;position: fixed;left: 0;top: 0;z-index: 997;}

.nav_pc{position: fixed;top: 36px;right: 64px;display: flex;z-index: 999;}
.nav_pc .language{position: relative;cursor: pointer;}
.nav_pc .language span{font-size: 20px;color: #878280;line-height: 24px;}
.nav_pc .language_dropdown{display: none;position: absolute;left: 50%;transform: translate(-50%, 18px);width: 148px;border: 2px solid #fff;text-align: center;}
.nav_pc .language_dropdown .lang_item{display: block;color: #fff;font-size: 20px;line-height: 50px;}
.nav_pc .language_dropdown .lang_item:hover{opacity: 0.8;}
.nav_pc .language_dropdown.active{display: block;}
.nav_pc .nav_item{display: block;font-size: 20px;color: #878280;line-height: 20px;margin-left: 72px;cursor: pointer;}
.nav_pc .nav_item:hover{color: #fff;}
.nav_pc .nav_item.active{display: block;color: #fff;}

.section{height: 100vh;position: relative;}

.home{background: url('../img/home_bg.png') center top no-repeat, url('../img/home_bg_low.jpg') center top no-repeat;background-size: cover;background-color: #100604;}
.home .home_video{position: relative;z-index: 9;width: 100%;height: 100%;object-fit: cover;}
.home .home_logo_pc{width: 16%;height: auto;position: absolute;left: 75px;top: 43px;z-index: 998;}
.home .icons {display: flex;position: absolute;left: 50%;bottom: 7.42vh;z-index: 998;transform: translateX(-50%);}
.home .icons a{display: block;font-size: 0;margin: 0 8px;cursor: pointer;}
.home .icons img{height: auto;width: 14vw;max-width: 270px;}
.progress_contaniner{background: url('../img/second_bg.png') center top no-repeat, url('../img/second_bg_low.jpg') center top no-repeat;background-size: 100% auto;background-color: #d5d1c8;height: auto;}
.progress_contaniner .main_content{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 74.17vw;}
.progress_contaniner .title_pc{width: auto;height: 12vh;display: block;margin: 0 auto 3.333vh;}
.progress_contaniner .progress_con{position: relative;display: flex;justify-content: space-between;padding: 0 9.25%;margin-bottom: 3vh;}
.progress_contaniner .progress_con .progress_bar{position: absolute;top: 50%;left: 0;transform: translate(0, -50%);width: 100%;height: 14px; background-size: cover;}
.progress_contaniner .progress_con .progress_bar .content{height: 100%;width: 0;transition: all 800ms ease;}
.progress_contaniner .progress_con .progress_bar.zero .content{width: 24%;}
.progress_contaniner .progress_con .progress_bar.one .content{width: 50%;}
.progress_contaniner .progress_con .progress_bar.two .content{width: 75%;}
.progress_contaniner .progress_con .progress_bar.three .content{width: 100%;}
.progress_contaniner .progress_con .achieve_item{position: relative;width: 5.1966%;padding-top: 5.1966%;background: url('../img/achieve.png') center center no-repeat;background-size: cover;}
.progress_contaniner .progress_con .achieve_item.active{background: url('../img/achieve_active.png') center center no-repeat;background-size: cover;}
.progress_contaniner .reward_con{display: flex;justify-content: space-between;}
.progress_contaniner .reward_item{font-size: 0;width: 22.893%;position: relative;}
.progress_contaniner .reward_item img{width: 100%;}
.text_con{padding-top: 40px;}
.progress_contaniner .text_con img{width: 50%;margin-left: 25%;margin-bottom: 1.25rem;}
.progress_contaniner .reward_item.last .right{position: absolute;top: 0;right: 2px;transform: translateX(100%);height: 100%;width: auto;}

.role_contaniner{
/*  background: url('../img/third_bg.jpg') center bottom no-repeat, url('../img/third_bg_low.jpg') center bottom no-repeat;;background-size: 100% auto;background-color: #d5d1c8; */
  height: auto;}
.role_contaniner .main_content{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 74.17vw;z-index: 998;overflow: hidden;}
.role_contaniner .title_pc{width: auto;height: 12vh;z-index: 3;display: block;margin: 0 auto 6.481vh;}
.role_contaniner .swiper-container{width: 70%;margin: 0 auto 3.33vh;}
.role_contaniner .swiper-container .swiper-slide{font-size: 0;}
.role_contaniner .swiper-container img{width: 100%;height: auto;}
.role_contaniner .swiper_operate{display: flex;justify-content: center;align-items: center;}
.role_contaniner .swiper_operate .swiper-button{background: url('../img/swiper_arrow.png') center center no-repeat;background-size: 22px 31px;width: 22px;height: 31px;cursor: pointer;}
.role_contaniner .swiper_operate .swiper-button.swiper-button-prev{transform: rotate(180deg);}
.role_contaniner .swiper_operate .swiper-pagination{display: flex;margin: 0 24px;}
.role_contaniner .swiper_operate .role_bullet{width: 16px;height: 23px;background: url('../img/swiper_dot.png') center center no-repeat;background-size: cover;margin:  0 12px;cursor: pointer;}
.role_contaniner .swiper_operate .role_bullet.role_bullet_active{background: url('../img/swiper_dot_active.png') center center no-repeat;background-size: cover;}

.share_container{position: relative;padding-top: 50.78%;background: url('../img/share_bg.jpg') no-repeat center center, url('../img/share_bg_low.jpg') no-repeat center center;background-size: cover;}
.share_container .main_content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.share_container .tips{position: absolute;top: 68.24%;left: 14%;height: 3.16%;width: auto;line-height: 32px;}
.share_container .socials{display: flex;position: absolute;top: 73.175%;left: 14%;height: 4.83%;}
.share_container .socials a{display: block;height: 100%;margin-right: 24px;font-size: 0;}
.share_container .socials a img{height: 100%;width: auto;}
.share_container .icons {position: absolute;top: 83.175%;left: 14%;height: 6.8%;display: flex;}
.share_container .icons a{display: block;font-size: 0;height: 100%;margin-right: 16px;cursor: pointer;}
.share_container .icons img{height: 100%;width: auto;}

.footer{height: 137px;background: #000;display: flex;align-items: center;padding-left: 13%;}
.footer .logo{height: 50px;margin-right: 22px;}
.footer .copyright_con{font-size: 0;}
.footer .copyright{margin-right: 16px;}
.footer .copyright, .footer .aggrement{color: #cacaca;font-size: 14px;}

@media (max-width: 1024px) {

.nav_h5{position: fixed;left: 0;top: 0;width: 100%;z-index: 9999;}
.nav_h5 .hamburg{background: rgba(0, 0, 0, .8);height: 1.15rem;display: flex;align-items: center;justify-content: center;position: relative;}
.nav_h5 .nav_logo{height: .62rem;width: auto;}
.nav_h5 .hamburg_btn{position: absolute;left: .2rem;top: .4rem;height: .34rem;width: .42rem;}
.nav_h5 .hamburg_btn .item, .nav_h5 .hamburg_btn::before, .nav_h5 .hamburg_btn::after{content: '';display: block;width: .42rem;height: .06rem;background: #fff;position: absolute;}
.nav_h5 .hamburg_btn .item{top: 50%;left: 0;transform: translateY(-50%);}
.nav_h5 .hamburg_btn::before{top: 0;left: 0;}
.nav_h5 .hamburg_btn::after{bottom: 0;left: 0;}
.nav_h5 .hamburg_btn.close .item{display: none;}
.nav_h5 .hamburg_btn.close::before{width: .48rem;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);}
.nav_h5 .hamburg_btn.close::after{width: .48rem;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-45deg);}
.nav_h5 .nav_items{background: rgba(0, 0, 0, .6);width: 100%;;height: 100vh;position: absolute;left: 0;top: 0;display: none;}
.nav_h5 .nav_items.active{display: block;}
.nav_h5 .nav_items .main_content{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;justify-content: space-between;align-items: center;height: 51.624%;width: 80%;}
.nav_h5 .nav_items .main_content .lang_con{display: flex}
.nav_h5 .nav_items .main_content .lang_con span{color: #fff;font-weight: normal;font-size: .27rem;margin: 0 .26rem;}
.nav_h5 .nav_items .main_content a{font-size: .27rem;line-height: .27rem;color: #fff;font-weight: bolder;}
.nav_h5 .nav_item{position: relative;}
.nav_h5 .nav_items .main_content .nav_item.active::after{content: '';display: block;position: absolute;bottom: -.2rem;left: 50%;width: 1.1rem;transform: translateX(-50%);height: .06rem;background: #fbff82;}

.section{height: auto;position: relative;}

/* .bg_container{background: url('../img/h5_bg_top.jpg') center 0 no-repeat, url('../img/h5_bg_top_low.jpg') center 0 no-repeat,  url('../img/h5_bg_bottom.jpg') center bottom no-repeat;background-size: 100% auto;background-color: #f6f4e8;} */

.home{background: transparent;}
.home .icons {display: flex;position: absolute;left: 50%;bottom: .4rem;transform: translateX(-50%);}
.home .icons a{display: block;font-size: 0;margin: 0 .08rem;}
.home .icons img{height: auto;width: 2.25rem;}
.home .home_logo_m{height: 1.42rem;width: auto;position: absolute;left: 50%;bottom: 1.44rem;transform: translateX(-50%);}

.progress_contaniner{background: url('../img/h5_bg_center.png') center top no-repeat, url('../img/second_bg_low.jpg') center top no-repeat;background-size: 100% auto;background-color: #d5d1c8;height: auto;}
.progress_contaniner .main_content{position: relative;left: auto;top: auto;transform: translate(0, 0);width:96%;overflow: hidden;padding-bottom: .48rem;margin: 0 auto;}
.progress_contaniner .title_pc{width: auto;height: .88rem;display: block;margin: 0 auto .12rem;}
.progress_contaniner .reward_con_h5{display: flex;flex-direction: column;position: relative;}
.progress_contaniner .reward_con_h5 img{width: 2.93rem;height: auto;margin-bottom: .1rem;}
.progress_contaniner .reward_con_h5 img:nth-child(3){margin-bottom: 0;}
.progress_contaniner .reward_con_h5 img.last{position: absolute;width: auto;height: 100%;right: 0;top: 0;}

.role_contaniner{background: transparent;width: 100%;}
.role_contaniner .main_content{position: absolute;left: calc(50% - 3.5rem);top: .6rem;transform: translate(0, 0);width: 7rem;overflow: hidden;margin: 0 auto;padding-bottom: .48rem;}
.role_contaniner .title_pc{width: auto;height: .88rem;display: block;margin: 0 auto .48rem;}
.role_contaniner .swiper-container{width: 70%;margin: 0 auto .4rem;}
.role_contaniner .swiper-container .swiper-slide{font-size: 0;}
.role_contaniner .swiper-container img{width: 100%;height: auto;}
.role_contaniner .swiper_operate{display: flex;justify-content: center;align-items: center;}
.role_contaniner .swiper_operate .swiper-button{background: url('../img/swiper_arrow.png') center center no-repeat;background-size: .22rem auto;width: .22rem;height: .31rem;cursor: pointer;}
.role_contaniner .swiper_operate .swiper-button.swiper-button-prev{transform: rotate(180deg);}
.role_contaniner .swiper_operate .swiper-pagination{display: flex;margin: 0 .24rem;}
.role_contaniner .swiper_operate .role_bullet{width: .1rem;height: .23rem;background: url('../img/swiper_dot.png') center center no-repeat;background-size: cover;margin:  0 .12rem;cursor: pointer;}
.role_contaniner .swiper_operate .role_bullet.role_bullet_active{background: url('../img/swiper_dot_active.png') center center no-repeat;background-size: cover;}

.share_container{position: relative;padding-top: 72.26667%;background: url('../img/share_bg_m.jpg') no-repeat center center;background-size: cover;overflow: hidden;}
.share_container .main_content{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.share_container .tips{position: absolute;top: 19%;left: auto;right: .34rem;height: 4.16%;width: auto;line-height: 32px;}
.share_container .socials{display: flex;position: absolute;top: 28.57%;left: auto;right: .34rem;height: 8%;}
.share_container .socials a{display: block;height: 100%;margin: 0 0 0 18px;font-size: 0;}
.share_container .socials a img{height: 100%;width: auto;}
.share_container .icons {position: absolute;top: 40.84%;left: auto;right: .43rem;height: 10%;display: flex;}
.share_container .icons a{display: block;font-size: 0;height: 100%;margin: 0 0 0 .12rem;}
.share_container .icons img{height: 100%;width: auto;}
.share_container .copyright_m{position: absolute;bottom: 0;left: 0;width: 100%;display: flex;flex-direction: column;align-items: center;padding: .26rem 0;text-align: center;}
.share_container .copyright_m::before{content: '';height: .5px;width: 4.55rem;background: #59472d;position: absolute;left: 50%;top: 0;transform: translateX(-50%);}
.share_container .copyright_m .logo{height: .39rem;margin-bottom: .18rem;}
.share_container .copyright_m .copyright_con{font-size: 0;;transform: scale(.8);transform-origin: 50% 0;}
.share_container .copyright_m .aggrement_con{margin-bottom: .12rem;}
.share_container .copyright_m .copyright{margin-right: .07rem;}
.share_container .copyright_m .copyright, .copyright_m .aggrement{color: #cacaca;font-size: .12rem}
.progress_contaniner .title_pc{
  padding:0.3rem 0;
}
.goat{
  width: 100%;
}
.goat p{
  width: 50%;
  height: auto;
  float: left;
}
.goat p img{
  margin: 0 auto;
  display: block;
}

.goatpeople{
  overflow: hidden;
}
.progress_contaniner .reward_con_h5 .goatpeople img{
  height: 0.8rem;
  width: auto;
}
.progress_contaniner .reward_con_h5 .goat_bar{
  position: relative;
  height: 0.5rem;
  margin: 0.15rem 0 0.15rem;
}
.progress_contaniner .reward_con_h5 .goat_bar .goat_bar_load{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0.16rem;
    z-index: -1;
    left: 0;
}
.progress_contaniner .reward_con_h5 .goat_bar img{
  height: 0.5rem;
  width: auto;
}
.progress_contaniner .reward_con_h5 .goatcontent img{
  width: 78%;
}

}
.language_dropdown a:hover{
  opacity: 0.8;
}