:root {
  color-scheme: light only;
}
 
@keyframes animatetop{
	from {opacity: 0; transform: translateY(150px);}
    to {opacity: 1;}
}

@keyframes animateright{
	from {opacity: 0; transform: translateX(-20px);}
    to {opacity: 1;  transform: translateX(0);}
}

@keyframes animateleft{
	from {opacity: 0; transform: translateX(-300px);}
    to {opacity: 1; transform: translateX(0px);}
}

@keyframes animatelefthide{
	from {opacity: 1; transform: translateX(0);}
    to {opacity: 0; transform: translateX(-300px);}
}

@keyframes float {
  0% {transform: scale(1);}
  100% {transform: scale(1.08);} 
}

@keyframes expand {
  0% {opacity: 0; transform: rotateY(-270deg);}
  100% {opacity: 1; transform: rotateY(0)} 
}

html{
	scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body{
  width: 100%;
  max-width: 100vw;
  margin: 0px;
  padding: 0px;
  color: white;
  background-color: rgb(255, 255, 255);
  font-family: 'ZCOOL KuaiLe', sans-serif;
	font-family: 'Open Sans', sans-serif;
  font-family: 'Noto Serif SC', serif;
  font-family: 'Noto Sans SC', sans-serif;
  user-select: none;
}

/*---------------------------------------
   Scroll Effect       
-----------------------------------------*/
.hidden{
  opacity: 0;
  transition: all .3s;
}

.show{
  opacity: 1;
}


::-webkit-scrollbar {
  width: 6px;
  display: none;
}
::-webkit-scrollbar-track {
  background: black;
}
::-webkit-scrollbar-thumb {
  background: #141414;
}
::-webkit-scrollbar-thumb:hover {
  background: #1a1a1a;
}



/*---------------------------------------
   NAVBAR        
-----------------------------------------*/

.navigation {
  position: fixed;
  width: 100vw;
  padding: 10px 5%;
  z-index: 999;
  top: 0;
}

.navwrapper{
  justify-content: flex-end;
}

.navigationitem{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.navigationitem a img{
  transform: scale(.7);
  margin: 0 5px;
  font-size: 0;
}

.navigationitem a:hover img,
.navigationitem a.active img{
  transform: scale(.8);
  transition: all .5s;
}

.navbar-toggler{
  color: white;
  background-color: transparent;
  border: var(--bs-border-width) solid white;
}

.scrolled{
  background-image: linear-gradient(#2c2c2cd7,#202020d7);
}

.scrolled img{
  max-height: 65px;
  transition: all .5s;
}

.dropdown-menu {
	background: linear-gradient(rgba(44, 44, 44, 0.843), rgba(32, 32, 32, 0.843));
	border: none;
	min-width: 150px;
	--bs-dropdown-padding-y: 0 !important;
}

.dropdown-item {
  color: #f1d273;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #ffffff !important;
}

.dropdown-item.first:hover,
.dropdown-item.first:focus {
   border-top-left-radius: 0.3rem !important;
   border-top-right-radius: 0.3rem !important;	
}

.dropdown-item.third:hover,
.dropdown-item.third:focus {
   border-bottom-left-radius: 0.3rem !important;
   border-bottom-right-radius: 0.3rem !important;	
}


@media screen and (max-width: 800px) {
  .navbar-nav{
	flex-direction: row;
  }
  .navigation{
    background-image: linear-gradient(#2c2c2cd7,#202020d7); 
    /*max-height: 75px;*/
    padding: 0;
  } 
  .navbar>.container-fluid{
	  flex-wrap: nowrap;
  }
  .navigationitem img{
	  height: 40px;
  }
  .navbar-brand img{
	  height: 65px !important;
  }

  .navbar .dropdown-menu{
	  left: auto !important;
	  right: 0 !important;
  }
 
  .navbar-nav .dropdown-menu{
	  position: absolute !important;
  }
}




/*---------------------------------------
   SIDEBAR        
-----------------------------------------*/

.sidebar.tcn{
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 220px;
  height: 550px;
  background: url(../img/bg_sidebar_tcn.png) top center no-repeat;
  background-size: contain;
  z-index: 999;
  top: 23%;
  left: 3%;
  gap: 0.8rem;
  padding-top: 175px;
  opacity: 0;
  transition: all .3s;
  animation: animatelefthide 1s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s;
}

.sidebar.scn{
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 220px;
  height: 550px;
  background: url(../img/bg_sidebar_scn.png) top center no-repeat;
  background-size: contain;
  z-index: 999;
  top: 23%;
  left: 3%;
  gap: 0.8rem;
  padding-top: 175px;
  opacity: 0;
  transition: all .3s;
  animation: animatelefthide 1s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s;
}

.sidebar.eng{
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 220px;
  height: 550px;
  background: url(../img/bg_sidebar_eng.png) top center no-repeat;
  background-size: contain;
  z-index: 999;
  top: 23%;
  left: 3%;
  gap: 0.8rem;
  padding-top: 175px;
  opacity: 0;
  transition: all .3s;
  animation: animatelefthide 1s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s;
}

.sidebar.on{
  animation: animateleft 1s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s;
}

.appstorebtn,
.smbtn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 15%;
  gap: .5rem;
}

.appstorebtn img,
.smbtn img{
  width: 100%;
}

.viewrewardbtn{
  width: 100%;
  width: 154px;
  height: max-content;
  background-size: contain;
}

.viewrewardbtn.scn:hover{
  height: max-content;
  background: url(../img/btn_reward_hover_scn.png) top center no-repeat;
  background-size: contain;
}

.viewrewardbtn.tcn:hover{
  height: max-content;
  background: url(../img/btn_reward_hover_tcn.png) top center no-repeat;
  background-size: contain;
}

.viewrewardbtn.en:hover{
  width: 154px;
  height: max-content;
  background: url(../img/btn_reward_hover_en.png) top center no-repeat;
  background-size: contain;
}

.viewrewardbtn img{
  width: 100%;
}

.viewrewardbtn:hover img{
  opacity: 0;
  transition: .3s;
}

.socialmedia{
  display: flex;
  align-items: center;
  gap: .3rem;
}

.socialmedia a{
  font-size: 0;
  width: 48px;
  height: 48px;
  background: url(../img/btn_sidebarplay.png) top center no-repeat;
  background-size: contain;
  cursor: pointer;
}

.socialmedia a:nth-child(2){
  background: url(../img/btn_sidebarfb.png) top center no-repeat;
  background-size: contain;
}

.socialmedia a:nth-child(3){
  background: url(../img/btn_sidebarlogin.png) top center no-repeat;
  background-size: contain;
}

.socialmedia a:hover{
  background: url(../img/btn_sidebarplay_hover.png) top center no-repeat;
  background-size: contain;
  transition: all .3s;
}

.socialmedia a:nth-child(2):hover{
  background: url(../img/btn_sidebarfb_hover.png) top center no-repeat;
  background-size: contain;
}

.socialmedia a:nth-child(3):hover{
  background: url(../img/btn_sidebarlogin_hover.png) top center no-repeat;
  background-size: contain;
}

.popup.mission{
  width: 100%;
  max-width: 500px;
  margin: auto;
}

@media screen and (max-width: 1080px) {
  .sidebar.tcn,
  .sidebar.scn,
  .sidebar.eng{
	  display: none;
  }
}


/*---------------------------------------
   BTMSIDEBAR        
-----------------------------------------*/

.btmsidebar{
  position: fixed;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  background: rgba(155, 119, 90, 0.445);
  border-top: 1px solid rgba(255, 255, 255, 0.445);
  z-index: 999;
  bottom: 0;
  gap: 0.8rem;
  max-height: 170px;
  animation: animatetop 1s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s;
  padding: 0 5%;
  backdrop-filter: blur(3px);
}

.btmsidebar.on{
  animation: animatetop 1s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s;
}

.sbrewardimg{
  position: relative;
  height: 150px;
  z-index: 1;
  margin-top: -6%;

}

.btmsmbtn{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;

  gap: .5rem;
}

.btmsidebar p{
  font-size: 1.2rem;
  font-weight: 900;
  padding: 0;
  margin: 0;
  color: #472a19;
  text-shadow: 1px 1px 3px #fff, 3px 3px 6px #fff;
}

.btmsidebar .viewrewardbtn{
  width:100%;
  width:fit-content;
  background-size: contain;
}

.btmsidebar .viewrewardbtn.en:hover{
  width:100%;
  background: url(../img/btn_reward_hover_en.png) top center no-repeat;
  background-size: contain;
}

.btmsidebar .viewrewardbtn.tcn:hover{
  width:100%;
  background: url(../img/btn_reward_hover_tcn.png) top center no-repeat;
  background-size: contain;
}

.btmsidebar .viewrewardbtn.scn:hover{
  width:100%;
  background: url(../img/btn_reward_hover_scn.png) top center no-repeat;
  background-size: contain;
}

.btmsidebar>.viewrewardbtn img{
  height: 100%;
}

.btmsidebar>.viewrewardbtn:hover img{
  height: 100%;
  opacity: 0;
  transition: .3s;
}

.btmsmbtn .socialmedia{
  gap: .3rem;
}

.btmsmbtn .socialmedia a{
  font-size: 0;
  width: 48px;
  max-width: 48px;
  height: 48px;
  background: url(../img/btn_sidebarfb.png) top center no-repeat;
  background-size: contain;
  cursor: pointer;
}

.btmsmbtn>.socialmedia a:nth-child(2){
  background: url(../img/btn_sidebarlogin.png) top center no-repeat;
  background-size: contain;
}

.btmsmbtn>.socialmedia a:hover{
  background: url(../img/btn_sidebarfb_hover.png) top center no-repeat;
  background-size: contain;
  transition: all .3s;
}

.btmsmbtn>.socialmedia a:nth-child(2):hover{
  background: url(../img/btn_sidebarlogin_hover.png) top center no-repeat;
  background-size: contain;
}

@media screen and (max-width: 1080px) {
  .btmsidebar{display: flex;}
}
@media screen and (max-width: 650px) {
  .btmsidebar p{display: none;}
}
@media screen and (max-width: 450px) {
  .sbrewardimg {max-width: 100px; max-height: 100px;}
  .socialmedia a{max-width: 40px !important;}
  .btmsmbtn a, .btmsmbtn a img,.viewrewardbtn img{min-height: 40px; max-height: 40px;}
  .btmsidebar{max-height: 100px;}
}

@media screen and (max-width: 320px) {
  .sbrewardimg {max-width: 100px; max-height: 70px;}
  .btmsmbtn, .btmsmbtn .socialmedia {gap: .25rem;}
  .socialmedia a{max-width: 30px !important;}
  .btmsmbtn a, .btmsmbtn a img,.viewrewardbtn img{min-height: 30px; max-height: 30px;}
  .btmsidebar{max-height: 100px;}
}


/*---------------------------------------
   SIDEBARPOPUP    
-----------------------------------------*/

.modal-dialog-scrollable .modal-content {
  max-height: 80vh !important;
  overflow: hidden;
}

input{
  text-overflow: ellipsis;
}

.form_reward{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-top: 1rem;
}

label{
  font-family: 'ZCOOL KuaiLe', sans-serif;
  font-size: 24px;
}

.input_reward{
  width: 100%;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.text01{
  border: 1px solid rgba(126, 126, 126, 0.3);
  height: 35px;
  color: rgba(0,0,0,0.5);
}

.sidebarpopupbtn{
  font-size: 15px;

  height: 35px;
  white-space: nowrap;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  border-radius: 50px;
  background: #59c6ba;
  padding: .3rem 1rem;
  border: none;
  right: 0;

}

.sidebarpopupbtn:hover{
  font-weight: 600;
  background-color: #fccc79;
}

.form_reward label{
  font-size: 20px;
  line-height: 20px;
}

/*---------------------------------------
   Section1-KV    
-----------------------------------------*/



.mainwrapper{
  width: 100%;
  max-width: 100vw;
  /* height: 100%; */
  /* max-height: 100vh; */
  margin: auto;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  padding: 0;
}

.kvmainwrapper{
  width: 100%;
  /*height: 100%;*/
  height: 100vh;
  min-height: 1080px;
  max-height: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  margin: 0;
  padding: 20% 0 20% 0;
  left: 0;
  background: url(../img/kvbg.jpg) top center no-repeat;
  background-size: 1920px 1080px;
  overflow: hidden;
}

.kvbackgroundvideo{
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}


@keyframes fadeout{
	from {opacity: 1; visibility: 1; z-index: 9999;}
    to {opacity: 0; visibility: hidden; z-index: -1;}
}

.bgvideo1{
  z-index: 9999;
  position: absolute;
  animation: fadeout 1s ease;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  pointer-events: none;
  left: 50%;
  transform: translate(-50%,0);
}

.bgvideo2{
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
}

.kvcontent{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 0 20%;
}

.kvcontent.en {
	gap: 3rem;
}

.kvcontent.tcn {
	gap: 1.5rem;
}

.slogan.en img{
  width: 100%;
  min-width: 320px;
  max-width: 700px;
}

.slogan.tcn img{
  width: 100%;
  min-width: 320px;
  max-width: 580px;
}

.appstore {
  font-size: 0;
  width: 100%;
  height: max-content;  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.appstore .app{
  padding: 0;
  width: 100%;
  max-width: 264px;
  height: 100%;  
  max-height: 61px;
  animation: animateright 1s;
  animation-fill-mode: backwards;
}

.appstore .app.show:nth-child(2){animation-delay: 200ms;}
.appstore .app.show:nth-child(3){animation-delay: 200ms;}
.appstore .app.show:nth-child(4){animation-delay: 200ms;}


.app img{
  width: 100%;
}

.kvbutton{
  width: 100%;
  height: 100%;
  max-height: 89px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  animation: animatetop .5s;
  animation-fill-mode: backwards;
}

.ctabtn.scn{
  width: 100%;
  width: 297px;
  height: 89px;
  background: url(../img/ctabtn_scn.png) center no-repeat;
  background-size: contain;
  animation: float 1s ease-in-out alternate infinite;
}

.ctabtn.scn:hover{
  background: url(../img/ctabtn-hover_scn.png) center no-repeat;
  transition: all .3s;
}

.ctabtn.tcn{
  width: 100%;
  width: 297px;
  height: 89px;
  background: url(../img/ctabtn_tcn.png) center no-repeat;
  background-size: contain;
  animation: float 1s ease-in-out alternate infinite;
}

.ctabtn.tcn:hover{
  background: url(../img/ctabtn-hover_tcn.png) center no-repeat;
  transition: all .3s;
}

.ctabtn.en{
  width: 100%;
  width: 297px;
  height: 89px;
  background: url(../img/ctabtn_en.png) center no-repeat;
  background-size: contain;
  animation: float 1s ease-in-out alternate infinite;
}

.ctabtn.en:hover{
  background: url(../img/ctabtn-hover_en.png) center no-repeat;
  transition: all .3s;
}

.playbtn{
  width: 100%;
  max-width: 98px;
  height: 100%;
  max-height: 86px;
  background: url(../img/playbtn.png) center no-repeat;
  background-size: contain;
}

.playbtn{
  width: 98px;
  height: 86px;
  background: url(../img/playbtn.png) center no-repeat;
  background-size: contain;
}

.playbtn:hover{
  background: url(../img/playbtn-hover.png) center no-repeat;
  transition: all .3s;
}

@media screen and (max-width: 770px) {
  .kvmainwrapper{
    min-height: 100vh;
    height: fit-content;
  }
  .kvcontent{
    padding: 0 .5rem;
    gap: 1rem;
  }
  .appstore {
    font-size: 0;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5rem;
  }
  .appstore .app {
    padding: 0;
    width: 100%;
    max-width: 155px;
    height: 100%;
    max-height: 61px;
    animation: animateright 1s;
    animation-fill-mode: backwards;
  }
  .kvbackgroundvideo{
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bgvideo1, .bgvideo2{
    height: 100%;
  }
 }
 
 @media screen and (max-width: 450px) {
  .kvmainwrapper{
    min-height: 100vh;
    height: fit-content;
  }
  .kvcontent{
    padding: 0 .5rem;
    gap: 1rem;
  }
  .kvbutton{
    scale: .7;
    transform-origin: top center;
  }
  .slogan img{
    max-width: 280px;
    min-width: unset;
  }
 }
 


/*---------------------------------------
   Video   
-----------------------------------------*/
.video-popup-container{
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, .7);
}

#video-popup-close{
  cursor: pointer;
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 998;
  width: 40px;
  height: 40px;
  border-radius: 35px;
  background-image: linear-gradient(#fee6bc,#fccc79);
  border: 3px solid white;
  background-size: 100%;
  opacity: 1;
  visibility: 1;
}

.vdwrapper{
  margin: auto;
  margin-top: 10.75rem;
  overflow: visible;
}

.popup {
  max-width: 1000px;
  margin: auto;
}

.video-popup-iframe-container {
  background: none;
  border: 0;
  width: 100%;
  max-width: 1000px;
  min-width: 300px;
}

#video-popup-close:hover img{
  scale: 1.05;
  transform: rotate(15deg);
  transform-origin: center;
  transition: .3s;
}


/*---------------------------------------
   Section2 
-----------------------------------------*/
.sec2wrapper{
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  /* max-height: 100vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: url(../img/bg_section2.jpg) top center no-repeat;
  background-size: cover;
  padding: 5% 0;
  overflow: hidden;
}

.sec2content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 15%;
  gap: 2rem;
}

.title{
  width: 100%;
  padding: 0 5%;
  max-width: 100vw;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 50;
}

.title img {
  width: 100%;
  max-width: max-content;
  max-height: 125px;
  margin-bottom: 1rem;
  pointer-events: none;
}

.title.show{
  animation: animatetop .7s;
}

.title.scn{
  width: 100%;
  padding: 0 5%;
  max-width: 100vw;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 50;
}

.title.scn img {
  width: 100%;
  max-width: max-content;
  max-height: 180px;
  margin-bottom: 1rem;
  pointer-events: none;
}

.title.scn.show{
  animation: animatetop .7s;
}

.subtitle{
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 1.1rem;
  width: 100%;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.35rem 0;
  margin: 0 3%;
  background: linear-gradient(to right,transparent, rgb(225, 60, 49), transparent);
}

.preregis-ctn{
  /* scale: .9; */
  height: max-content;
  display: flex;
  flex-wrap: nowrap;
  justify-items: center;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
}

.preregisbox{
  position: relative;
  display: inline-block;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;
  width: max-content;
  height: max-content;
  max-width: max-content;*/
  justify-content: flex-start;    
  padding: 0;
  margin: 0 auto;
  width: auto;
}

.preregisbox img {
	display: block;
	width: 100%;
	height: auto;
}

.preregisbox.show{animation: animatetop .7s;}
.preregisbox:nth-child(2).show{animation-delay: 200ms;}
.preregisbox:nth-child(3).show{animation-delay: 400ms;}


.preregisbox.scn.left a{
  background: url(../img/preregisbox-btn1-hover_scn.png) top left no-repeat;
  background-size: contain;
}

.preregisbox.tcn.left a{
  background: url(../img/preregisbox-btn1-hover_tcn.png) top left no-repeat;
  background-size: contain;
}

.preregisbox.right a{
  background: url(../img/preregisbox-btn3-hover.png) top left no-repeat;
  background-size: contain;
}

.preregisbox.center a{
  background: url(../img/preregisbox-btn2-hover.png) top left no-repeat;
  background-size: contain;
}

.preregisbox.en.left a{
  background: url(../img/preregisbox-btn1-hover_en.png) top left no-repeat;
  background-size: contain;
}

.preregisbox.en.right a{
  background: url(../img/preregisbox-btn3-hover_en.png) top left no-repeat;
  background-size: contain;
}

.preregisbox.en.center a{
  background: url(../img/preregisbox-btn2-hover_en.png) top left no-repeat;
  background-size: contain;
}

.preregisbox a{
  z-index: 10;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

.preregisbox a img{
  opacity: 1;
  display: block;
  width: 200px;
  height: auto;
}

.preregisbox a:hover img,
.preregisbox a img:hover{
  opacity: 0;
  transition: all .3s;
}

.preregisbox.left img, .preregisbox.right img {
  min-width: max-content;
}

 
/*---------------------------------------
   Section2 - forms
-----------------------------------------*/

.preregisbox.center{
  width: 100%;
  max-width: 390px;
}

.preregisbox.center img.bgimg {
  width: 100%;
  max-width: 100vw;
  min-width: 300px;
}

.regisboxtop{
  position: relative;
  text-align: center;
}

.regisboxctn{
  position: relative;
}

.reward-wrapper, .preregisbox{
  position: relative;
  overflow: visible;
  z-index: auto;
  cursor: pointer;
}

/* 确保 popup 能浮在最上层 */
.reward-popup-fixed {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background-image: url('../img/popupcontainer.png');
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.preregisbox.order-1 .reward-popup-fixed{
  top: -25%;
}

.preregisbox.order-2 .reward-popup-fixed{
	top: 0;
}

.regisboxctn:hover .reward-popup-fixed,
.preregisbox:hover .reward-popup-fixed {
  opacity: 1;
  visibility: visible;
}

/* ===== Header ===== */
.reward-popup-header{
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reward-popup-header .reward-header-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
}

.reward-header-text {
  position: relative;
  z-index: 2;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'ZCOOL KuaiLe', sans-serif;
}

/* ===== Reward 内容 ===== */
.rewardRegisContainer {
  padding: 15px;
  text-align: center;
}

.rewardRegis {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  justify-items: center;
  align-items: center;
}

/*@media (max-width: 600px){
	.rewardRegis{
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}
}*/

.rewardRegis li {
  font-family: 'Noto Sans SC', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #834d2e;
}

.rewardRegis li img {
  width: 80px;
  height: auto;
}

.rewardRegis li p {
  margin: 0;
  font-size: 14px;
}

@media(max-width: 900px){
	.rewardRegis{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width: 600px){
	.rewardRegis{
		grid-template-columns: 1fr;
	}
	
	.rewardRegis li img{
		width: 60px;
	}
	
	.rewardRegis li p{
		font-size: 16px;
	}
}


.p2 {
  width: 100%;
  height: 100%;
  padding: 5%;
  position: absolute;
  z-index: 5;
  left: 50%;
  transform: translate(-50%, 0);
}

.p2.form{
  padding-bottom: 0;
}

/* title */
.rewardtitle,
.rewardcode{
  color: #834d2e;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 600px) {
  .preregis-ctn{max-width: 300px;}
  
  .preregisbox a{
	  left: 0;
	  transform: translateX(0%);
  }
  
  
  .preregisbox a img{width: 100%;}
  .preregisbox.left, .preregisbox.right{
    /*max-width: 135px;*/
	max-width: 100%;
  }
  .preregisbox.left img, .preregisbox.right img{
    transform-origin: left top;
    /*width: 100%;*/
    min-width: unset;
  }
  .preregisbox.right a img, .preregisbox.left a img{
    min-width: unset;
  }
}

/*---------------------------------------
   Section2 - infopopup
-----------------------------------------*/
.btn-group-right{
  position: absolute;
  top: 5%;
  right: 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;	
}

.btn-group-right02{
  position: absolute;
  top: 20%;
  right: 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;	
}

.infobtn,
.rewardbtn{
  display: block;
  width: 45px;
  height: 45px;
  border: none;
  background-repeat: no-repeat !important;
  background-size: 100% !important;
  background-position: center !important;
  cursor: pointer;
}

.infobtn{
  background: url(../img/info.png);
}

.infobtn:hover{
  background: url(../img/info-hover.png);
  transition: all .2s;
}

.rewardbtn{
  background: url(../img/reward.png);
}

.rewardbtn:hover{
  background: url(../img/reward-hover.png);
  transition: all .2s;
}

.infobtn.event{
  /*position: absolute;*/
  top: 5%;
  right: 5%;
  width: 40px;
  height: 41px;
  border: none;
  background: url(../img/info.png) top center no-repeat;
  background-size: 100%;
  z-index: 10;
}

.infobtn.event:hover{
  background: url(../img/info-hover.png) top center no-repeat;
  background-size: 100%;
  transition: all .2s;
}

.rewardbtn.event{
  /*position: absolute;*/
  top: 5%;
  right: 5%;
  width: 40px;
  height: 41px;
  border: none;
  background: url(../img/reward.png) top center no-repeat;
  background-size: 100%;
  z-index: 10;
}

.rewardbtn.event:hover{
  background: url(../img/reward-hover.png) top center no-repeat;
  background-size: 100%;
  transition: all .2s;
}

.rewardbtn.event02{
  position: absolute;
  top: 20%;
  right: 5%;
  width: 40px;
  height: 41px;
  border: none;
  background: url(../img/reward.png) top center no-repeat;
  background-size: 100%;
  z-index: 10;
}

.rewardbtn.event02:hover{
  background: url(../img/reward-hover.png) top center no-repeat;
  background-size: 100%;
  transition: all .2s;
}

@media screen and (max-width: 991px){
	.rewardbtn.event02{
		top: 15%;
	}
}

.btn-close:focus{
  box-shadow: none;
}

.popupwrapper{
  background: none;
  border-radius: 20px;
  border-right: 1px solid white;
  border-left: 1px solid white;
}

#popup-close{
  cursor: pointer;
  position: absolute;
  right: 6%;
  background: none;
  border: 0;
  z-index: 998;
  width: 40px;
  height: 40px;
  background-size: 100%;
  opacity: 1;
}

#popup-close:hover{
  scale: 1.05;
  transform: rotate(15deg);
  transform-origin: center;
  transition: .3s;
}

.popup-header{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 75px;
  min-height: 75px;
  background: url(../img/popupheader.png)top center no-repeat;
  background-size: cover;
}

.popup-header.en{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 75px;
  min-height: 75px;
  background: url(../img/popupheader.png)top center no-repeat;
  background-size: cover;
  /*padding-right: 20%;*/
}

.popup-header.en img{
  width: 100%;
  max-width: max-content;
  height: max-content;
  max-height: 50px;
  margin-top: 5px;
}

.popup-header.tcn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 75px;
  min-height: 75px;
  background: url(../img/popupheader.png)top center no-repeat;
  background-size: cover;
  /*padding-right: 20%;*/
}

.popup-header.tcn img{
  width: 100%;
  max-width: max-content;
  height: max-content;
  max-height: 50px;
  margin-top: 5px;
}

.popup-header.scn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 75px;
  min-height: 75px;
  background: url(../img/popupheader.png)top center no-repeat;
  background-size: cover;
  /*padding-right: 20%;*/
}

.popup-header.scn img{
  width: 100%;
  max-width: max-content;
  height: max-content;
  max-height: 50px;
  margin-top: 5px;
}

.popup-containter{
  padding: 3rem;
  padding-bottom: 6rem;
  color: #834d2e;
  width: 100%;
  height: 100%;
  background: url(../img/popupcontainer.png)bottom center no-repeat;
  background-size: cover;
}

.enquiry_content{
  font-size: 20px;
  line-height: 35px;
}

/* form */
form {
  display: flex;
  height: 100%;
  width: 100%;
  max-width: 100vw;
  flex-direction: column;
  gap: 0.1rem;
  justify-content: flex-end;
  align-items: center;
}

#p2_verification_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#p2_phone_code{
  position: relative;
  width: 100%;
  display: grid;
  border: 1px solid rgba(126, 126, 126, 0.3);
  border-radius: 50px;
  grid-template-columns: 25% 75%;
}

select{
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .5);
  grid-column: 1;
}

input{
  width: 100%;
  padding: .25rem 0;
  padding-left: 1rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, .5);
}

select:focus-visible,
input:focus-visible{
  outline: none;
}

#phone_tac{
  border: 1px solid rgba(126, 126, 126, 0.3);
  border-radius: 50px;
}

#selected_country{
  margin: 0;
  padding: .25rem 0;
  padding-left: 15%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#phone{
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#p2_phone_code .line{
  position: absolute;
  z-index: 1;
  width: 28%;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  border-right: 2px solid rgba(126, 126, 126, 0.3);
  pointer-events: none;
}

#btnSendOTP{
  white-space: nowrap;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  background: #ff606e;
  padding: 0.3rem 1.5rem;
}

#btnSendOTP:hover{
  font-weight: 600;
  scale: 1.05;
  transition: .3s;
  background: #fccc79;
}

/* btm */
.aligncenter{
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.regis-no{
  width: 100%;
  max-width: 500px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: .2rem 5rem;
  border: 2px solid #ffe5b8;
  border-radius: 50px;
  background: radial-gradient( #ac120d,#610b07);
}

.regis-no :is(p,span){
  white-space: nowrap;
  font-size: 20px;
  text-align: center;
  margin: 0;
  padding: 0;
}

.tnc{
  padding: 0 20%;
}

@media screen and (max-width: 800px) {
 .tnc{padding: 0 8%; }
 li {font-size: .8rem;  line-height: 1.5rem;}
 .popup-containter {padding: 3rem .5rem;}
}

.preregisbtn.scn{
  width: 100%;
  height: 100%;
  max-width: max-content;
  max-height: max-content;
  background: url(../img/prizebtn-hover_scn.png) top center no-repeat;
  background-size: contain;
  animation: float 1s ease-in-out alternate infinite;
  scale: .7;
}

.preregisbtn.tcn{
  width: 100%;
  height: 100%;
  max-width: max-content;
  max-height: max-content;
  background: url(../img/prizebtn-hover_tcn.png) top center no-repeat;
  background-size: contain;
  animation: float 1s ease-in-out alternate infinite;
  scale: .7;
}

.preregisbtn.en{
  width: 100%;
  height: 100%;
  max-width: max-content;
  max-height: max-content;
  background: url(../img/prizebtn-hover_en.png) top center no-repeat;
  background-size: contain;
  animation: float 1s ease-in-out alternate infinite;
  scale: .7;
}

.preregisbtn img{
  opacity: 1;
  width: 100%;
}

.preregisbtn:hover img{
  opacity: 0;
  transition: all .3s;
}

@media screen and (max-width: 1080px) {
  .preregis-ctn{flex-wrap: wrap;}
}

/*---------------------------------------
   Section3
-----------------------------------------*/
.sec3wrapper{
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  /* max-height: 100vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: url(../img/bg_section3.jpg) top center no-repeat;
  background-size: cover;
  padding: 5% 0;
  overflow: hidden;
}

.sec3content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20%;
  gap: 2rem;
}

.milestone{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.reward{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 95px;
  max-width: max-content;
  padding: 1rem 0;
  background: radial-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.5));
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.reward.show{animation: animateright 1s; animation-fill-mode: backwards;}
.reward:nth-child(2).show{animation-delay: 200ms;}
.reward:nth-child(3).show{animation-delay: 300ms;}
.reward:nth-child(4).show{animation-delay: 400ms;}
.reward:nth-child(5).show{animation-delay: 500ms;}

.reward img{
  width: 100%;
  min-width: 100px;
  max-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.reward:hover img{
  scale: .95;
  transition: .3s;
}

@media screen and (max-width: 600px) {
  .reward img{max-width: 120px;}
  .reward{ padding: 1rem 10px;}
  .reward, .reward.hidden, .reward.show{opacity: 1; animation: 0;}
}


/*---------------------------------------
   Section4
-----------------------------------------*/
.sec4wrapper{
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: url(../img/bg_section4.jpg) top center no-repeat;
  background-size: cover;
  padding: 5% 0;
  overflow: hidden;
}

.sec4content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 15%;
  gap: 2rem;
}

.infobtn.missionbtn{
  position: absolute;
  right: 15%;
  top: 0; 
}

.rewardbtn.missionbtn{
  position: absolute;
  right: 15%; 
  top: 55px; 
}

.missionctn{
  width: 100vw;
  padding: 0 35%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex-direction: row;
}

.mission{
  width: 100%;
  min-width: fit-content;
  max-width: fit-content;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission img{
  width: 100%;
  /* min-width: fit-content; */
  max-width: max-content;
}

.missiondone{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: max-content;
  min-width: fit-content;
  max-width: max-content;
  transform: translate(-50%, -50%);
}

.missiondone.done{
  display: block;
  display: block;
  min-width: auto;
  width: 100%;
}

@media screen and (max-width: 1870px) {
  .missionctn{padding: 0 30%;}
}
@media screen and (max-width: 1410px) {
  .missionctn{padding: 0 25%;}
}
@media screen and (max-width: 1150px) {
  .missionctn{padding: 0 20%;}
}
@media screen and (max-width: 950px) {
  .missionctn{padding: 0 10%;}
  .infobtn.missionbtn {right: 2%; top: -7%;}
  .rewardbtn.missionbtn{right: 2%;}
}
@media screen and (max-width: 750px) {
  .missionctn{padding: 0}
}
@media screen and (max-width: 550px) {
  .mission img{max-width: 115px;}
}


.mission.show{animation: expand 1s; animation-fill-mode: backwards;}
.mission:nth-child(2).show{animation-delay: 200ms;}
.mission:nth-child(3).show{animation-delay: 300ms;}
.mission:nth-child(4).show{animation-delay: 400ms;}
.mission:nth-child(5).show{animation-delay: 500ms;}

.mission span{
  font-weight: 600;
  position: absolute;
  z-index: 3;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%, 0);
}

.invitation{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
}

.invitationcode{
  padding: .5rem 9rem;
  background: linear-gradient(to right,transparent, #6eb5b0, transparent);
}

.invitationcode p,
.invitationcode span{
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

#copy{
  white-space: nowrap;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  background: #6eb5b0;
  padding: 0.3rem 1.5rem;
}

#copy:hover {
  font-weight: 600;
  scale: 1.05;
  transition: .3s;
}

#text{
  pointer-events: stroke;
}

@media screen and (max-width: 550px) {
  .invitationcode { padding: 0.5rem 3%;}
  .invitationcode.en p {
    font-size: .7rem;
    line-height: 1rem;
    white-space: unset;
  }
}

.mission-title.en{
  font-family: 'ZCOOL KuaiLe', sans-serif;
  color: #834d2e;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.mission-title.scn{
  font-family: 'ZCOOL KuaiLe', sans-serif;
  color: #834d2e;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}

.mission-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;  
  align-items: start;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
}

.mission-row li{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  transition: transform 0.2s ease;
}

.mission-row li:hover {
  transform: scale(1.05);
}

.mission-row li img {
  width: 80px;
  height: auto;
  margin: 0 auto;
}

.mission-row li p{
  font-size: 14px;
  padding: 5px;
}

.mission-row::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

.mission-row::-webkit-scrollbar-track {
  background: #f2bd6a; /* 轨道透明 */
}

.mission-row::-webkit-scrollbar-thumb {
  background: #f2bd6a; /* 滚动条颜色 */
  border-radius: 10px; /* 圆角 */
  transition: background 0.3s ease;
}

.mission-row::-webkit-scrollbar-thumb:hover {
  background: rgba(242,189,106); /* hover 更亮 */
}

@media screen and (max-width: 600px){
	.mission-row{
		gap: 0;
		grid-template-columns: repeat(2, 1fr);
	}
	
	.mission-title{
		font-size: 16px;
	}
}













































/*---------------------------------------
   Section5
-----------------------------------------*/
.sec5wrapper{
  scroll-snap-align: start;
  width: 100%;
  height: 1857px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: url(../img/bg_section5.png) top center no-repeat;
  background-size: cover;
  padding: 5% 0;
  overflow: hidden;
  z-index: 1;
}

.sec5content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 15%;
  gap: 2rem;
  z-index: 5;
}

.guildbg{
  position: absolute;
  top: 15%;
  left: 51%;
  transform: translate(-50% , 0);
}

.guildctn{
  padding: 2rem 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 450px) {
  .guildctn {padding: 25% 10%;}
}


.searchsection{
  width: 100%;
  max-width: 500px;
  margin-top: .5rem;
  display: flex;
  justify-content: center;
}

.searchbar{
  width: 100%;
  margin: 35px 0px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 35px;
}

.searchbarctn{
  height: 100%;
  border-radius: 0;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border: none;
  padding: .5rem 2rem;
  background-color: white;
}

.searchicon{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: .5rem 1.5rem .5rem 0;
  background-color: white;
}

.searchicon img{
  opacity: 50%;
}

.searchicon:hover img{
  opacity: 100%;
}

.searchbar [type="search"]{
  outline: none;
}

#guildList{
  display: flex;
  align-items: center;
  justify-content: center;
}

.guildlistctn{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: visible;
  display: none;
}

.guildlist{
  width: 100vw;
  /* max-width: 1200px; */
  padding: 0 22%;
  margin-bottom: 20px;
  /* height: 425px; */
  height: 100%;
  min-height: 360px;
  max-height: 500px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem ;
  align-items: center;
  justify-content: center;
  overflow-x: visible;
  overflow-y: scroll;
}

.guildlist::-webkit-scrollbar {
  display: none;
  width: 6px;
  border-radius: 50px;
}
.guildlist::-webkit-scrollbar-track {
  background: rgb(92, 92, 92);
  border-radius: 50px;
}
.guildlist::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 50px;
}
.guildlist::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
  border-radius: 50px;
}


.guild{
  font-family: 'ZCOOL KuaiLe', sans-serif;
  color: #834d2e;
  min-width: 270px;
  max-width: 270px;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: visible;
  padding-top: 30px;
  background: url(../img/guildctn.png) top center no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5));
  background-size: contain;
  flex-direction: column;
}

.guild.show{
  height: 175px;
  transition: .3s;
}

.guild span{
 font-size: 22px;
 line-height: 10px;
 margin-bottom: 20px;
}

.guildinfobtn{
  font-family: 'Noto Sans SC', sans-serif;
  white-space: nowrap;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  background: #ff606e;
  padding: 0.3rem 1.5rem;
}

.guildinfobtn_j{
  font-family: 'Noto Sans SC', sans-serif;
  white-space: nowrap;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  background: #ff606e;
  padding: 0.3rem 1.5rem;
}

.guildinfobtn.en{
  font-size: 14px;
  padding: 0.3rem .8rem;
}

.guildinfobtn_j.en{
  font-size: 14px;
  padding: 0.3rem .8rem;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active,
.guildinfobtn:hover{
  font-weight: 600;
  color: #ff606e;
  background: white;
  transition: all .5s;
}

li.guildpg,
.guildpg a,
.guildpg button{
  color: white;
  background: none;
  outline: none;
  border: none;
}

.guildbtn.tcn{
  border: none;
  width: 292px;
  height: 64px;
  background: url(../img/guildbtn_tcn.png)top center no-repeat;
  background-size: contain;
}

.guildbtn.tcn:hover{
  width: 292px;
  height: 64px;
  background: url(../img/guildbtn-hover_tcn.png)top center no-repeat;
  background-size: contain;
}

.guildbtn.scn{
  border: none;
  width: 292px;
  height: 64px;
  background: url(../img/guildbtn_scn.png)top center no-repeat;
  background-size: contain;
}

.guildbtn.scn:hover{
  width: 292px;
  height: 64px;
  background: url(../img/guildbtn-hover_scn.png)top center no-repeat;
  background-size: contain;
}

.guildbtn.en{
  border: none;
  width: 292px;
  height: 64px;
  background: url(../img/guildbtn_en.png)top center no-repeat;
  background-size: contain;
}

.guildbtn.en:hover{
  width: 292px;
  height: 64px;
  background: url(../img/guildbtn-hover_en.png)top center no-repeat;
  background-size: contain;
}

.popup-containter form{
  width: 100%;
}

.form-guild{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form-control:focus,
.form-control:focus-visible{
  outline: none;
  box-shadow: none;
}


@media screen and (max-width: 1500px) {
  .guildlist {padding: 0 20%;}
}
@media screen and (max-width: 1400px) {
  .guildlist {padding: 0 10%;}
}
@media screen and (max-width: 1100px) {
  .guildlist {padding: 0;}
}







/*---------------------------------------
   Section6
-----------------------------------------*/
.sec6wrapper{
  scroll-snap-align: start;
  width: 100%;
  height: 974px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-top: -750px;
  padding: 0;
  z-index: 1;
  padding: 5% 0;
}

.sec6content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 15%;
  gap: 2rem;
  z-index: 0;
}

#weaponSlide {
  position: absolute;
  display: flex;
  width: 100vw;
  height: 974px;
  background: url(../img/bg_section6.png) bottom center no-repeat;
  background-size: 100%;
  mask-image: url(../img/charmask.png);
  -webkit-mask-image: url(../img/charmask.png);
  z-index: 2;
  top: 0;
  align-items: flex-end;
  padding-bottom: 3px;
  margin-top: -120px;
}

.weaponslidectn{
  position: relative;
  display: none;
  margin: 0;
  width: 100%;
  height: 739px;
}

.weaponctn{
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  max-height: 650px;
  bottom: 0;
  padding: 0 20%;
}

.wpchar{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.wpchar img {
  position: absolute;
}

.wpinfo {
  position: relative;
  font-weight: 600;
  padding: 2rem;
  text-wrap: wrap;
  color: #472a19;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.wpinfo p{
  text-shadow: 1px 1px 3px #fff, 3px 3px 6px #fff;
}

.wpinfo img {
  height: max-content;
  max-height: 190px;
  margin-bottom: 2rem;
  margin-left: -15px;
}

.arrowbtn.weaponbtn{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  padding: .3rem;
  right: 5%;
  background-color: #6eb5b0;
  border: none;
  border-radius: 50px;
  z-index: 88;
  pointer-events: all;
}

.weaponbtn.prev{
  top: 53.5%;
  rotate: 90deg;
}

.weaponbtn.next{
  top: 60%;
  rotate: 90deg;
}

.arrowbtn.weaponbtn.prev:hover{
  transform: rotate(90deg) scale(1.05);
  transition: all .3s;
}

.arrowbtn.weaponbtn.next:hover{
  transform: rotate(90deg) scale(1.05);
  transition: all .3s;
}

@media screen and (max-width: 1200px) {
  #weaponSlide {
    background: url(../img/bg_section6.png) bottom left no-repeat;
    background-size: cover;
    pointer-events: none;
  }

  .weaponslidectn {
    position: relative;
    display: none;
    margin: 0;
    width: 100%;
    height: 739px;
    background: linear-gradient(0deg, white, white, transparent) no-repeat bottom;
    background-size: 100% 50%;
  }
  .weaponctn {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    max-height: 650px;
    bottom: 0;
    padding: 0 20%;
    flex-direction: column-reverse;
  }

  .wpchar img {
    position: absolute;
    z-index: -1;
    padding-bottom: 25%;
  }
  .wpinfo {
    width: max-content;
    min-width: 320px;
    max-width: 470px;
    top: -6%;
  }
}

@media screen and (max-width: 650px) {
  .weaponctn {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    max-height: 650px;
    bottom: 0;
    padding: 0;
    flex-direction: column-reverse;
  }
  .wpchar img {
    position: absolute;
    z-index: -1;
    padding-bottom: 53%;
    scale: 0.7;    
  }
}

@media screen and (max-width: 450px) {
  .wpinfo {
    width: 100vw;
    min-width: unset;
    font-size: .8rem;
  }
  .wpinfo img{
    transform-origin: left bottom;
    scale: .7;
  }
  .wpinfo img{margin-left: 0px;}
}


/*---------------------------------------
   Section7
-----------------------------------------*/
.sec7wrapper{
  scroll-snap-align: start;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  top: 0;
  left: 0;
  margin-top: -150px;
  padding: 0;
  background: url(../img/bg_section7.png) top center no-repeat;
  background-size: cover;
  padding: 5% 0;
  overflow: hidden;

}

.sec7content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 15%;
  gap: 2rem;
 
}

#featureSlide{
  position: relative;
  width: 100%;
  padding: 0 20%;
}

/* .featureslidectn{
  display: none;
} */

.featurectn img{
  width: 100%;
}
/* 
.featurebtn.prev{
  left: 10%;
}

.featurebtn.right{
  right: 10%;
} */

.arrowbtn.featurebtn{
  display: flex;
  justify-content: center;
  padding: .3rem;
  align-items: center;
  position: absolute;
  border: none;
  border-radius: 50px;
  top: 50%;
  transform: translateY(-50%);
  scale: .8;
  background-color: rgba(255, 255, 228, 0.5);
}

.featurebtn.next {
  right: 0;
}

.featurebtn:hover{
  background-color: #59c6ba;
}

@media screen and (max-width: 1080px) {
  .sec2content,.sec3content,.sec4content,.sec5content,.sec6content,.sec7content{padding: 0 3%;}
  #featureSlide{margin:0 0; padding: 0 0;}
}


/*---------------------------------------
   MILESTONES POPUP
-----------------------------------------*/
.milestoneReward{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

@media screen and (max-width: 400px){
	.milestoneReward{
		gap: 20px;
	}
}

.mReward{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mReward img{
	width: 60px;
}

.rewardTitles{
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (max-width: 400px){
	.rewardTitles{
		font-size: 0.85em;
	}
}



























/*---------------------------------------
   FOOTER
-----------------------------------------*/
.deskstop-view {
	display: flex;
}

.mobile-view {
	display: none;
}

.footer{
	font-family: var(--opensans);
	color: white;
	font-size: .8rem;
	width: 100%;
	max-width: 2800px;
  background-color: #524640;
  height: auto;
}

.footer-wrapper {
	display: flex;
	flex-direction: column;
}

.footer-info {
	flex-direction: row;
	align-items: center;
}

.gsrr-wrapper {
	flex: 0 0 120px;
}

.footerInfo-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px;	
	gap: 20px;
}

.gsrr-info p {
	text-align: justify;
	max-width: 1000px;
	margin: 0;
	font-size: 0.8rem;
}

.company-info {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.comp-logo {
	display: flex;
	gap: 18px;
	align-items: center;
}

.comp-logo img {
	width: auto;
	height: 30px !important; 
	object-fit: contain;
}

.comp-info {
	font-size: 0.8rem;
	text-align: justify;
	flex-wrap: wrap;
	max-width: 350px;
	font-weight: 600;
	line-height: 1.4;
}

.footer-border {
	width: 100%;
	height: 1px;
	background: #fff;
	margin-top: 12px;
	opacity: 0.3;
}

.img-gsrrLogo {
	width: 70%;
	height: auto;
}

.footer-copyrightWrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.footer-copyrightWrapper {
	font-size: 0.8rem;
	margin-top: 8px;
}

.terms-wrapper a {
	padding-left: 8px;
	padding-right: 8px;
	color: #fff;
	text-decoration: none;
}

.terms-wrapper a:hover {
	text-decoration: underline;
}

.terms-spread {
	border-left: 1.2px solid #fff;
	/*border-right: 1.2px solid #fff;*/
}


/****** Chinese (CN) ******/
.cn-gsrr-info p {
	text-align: justify;
	flex-wrap: wrap;
	font-size: 0.8rem;
}

.cn-footerInfo-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;	
	gap: 0;
}

@media (max-width: 991px){
	.deskstop-view {
		display: none;
	}
	
	.mobile-view {
		display: flex;
	}
	
	.footer {
		padding: 25px;
		height: 60vh;
}

	.m-footer-info {
		flex-direction: column;
		gap: 30px;
	}

	.m-gsrr-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 16px;
	}

	.img-gsrrLogo {
		max-width: 10%;
		height: 10% !important;
	}
	
	.footerInfo-wrapper {
		padding: 0;
	}
	
	.company-info {
		flex-direction: column;
		align-items: center;
	}
	
	.comp-info {
		max-width: 100%;
		text-align: center;
	}
	
	.comp-logo img {
		height: 35px !important;
	}
	
	.footer-copyrightWrapper {
		flex-direction: column;
		align-items: center;
		font-size: 0.65rem;
	}
	
	.footer-copyrightWrapper p {
		margin-bottom: 0;
	}
	
	.cn-img-gsrrLogo {
		max-width: 10%;
		height: 10% !important;
	}
}


@media (max-width: 768px) {
	.deskstop-view {
		display: none;
	}
	
	.mobile-view {
		display: flex;
	}
	
	.footer{
		height: 60vh;
	}
	
	.footer-wrapper {
		flex-direction: column;
		text-align: center;
	}
	
	.footerInfo-wrapper {
		width: 100%;
	}
	
	.img-gsrrLogo {
		max-width: 20%;
		height: 10% !important;
	}
	
	.footer-copyrightWrapper {
		margin-bottom: 50px;
	}
	
	/****** Chinese (CN) ******/
	.cn-img-gsrrLogo {
		max-width: 12%;
		height: 10% !important;
	}
}

@media (max-width: 568px) {
	.deskstop-view {
		display: none;
	}
	
	.mobile-view {
		display: flex;
	}
	
	.gsrr-info p {
		font-size: 0.7rem;
	}
	
	.company-info {
		gap: 15px;
	}
	
	.comp-info {
		font-weight: 500;
		font-size: 0.7rem;
	}
	
	.img-gsrrLogo {
		max-width: 28%;
		height: 10% !important;
	}
	
	.m-gsrr-wrapper {
		flex-direction: column;
		align-items: center;
	}
	
	.footer {
		padding: 40px 20px;
		height: 70vh;
	}
	
	/****** Chinese (CN) ******/
	.cn-img-gsrrLogo {
		max-width: 18%;
		height: 10% !important;
	}
	
	.cn-gsrr-info p {
		font-size: 0.7rem;
	}
}