@font-face {
   font-family: 'Alfa Slab One';
   src: url("../font/AlfaSlabOne-Regular-2.ttf")/*tpa=https://buildon.online/font/AlfaSlabOne-Regular-2.ttf*/;
   font-weight: normal;
   font-style: normal;
}
body,div,a,p,a:focus{
   margin: 0;
   padding:0;
   box-sizing: border-box;
   text-decoration: none;
}
::-webkit-scrollbar
{
  width: 2px;
  background: #fff;
}
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
  background-color: #555;
}
a:hover{
   text-decoration: none;
}
body{
   color:#fff;
   --hoverColor:#EDB812;
   background:#000;
}
html{
   font-size: 16px;
}
.theme{
   color:var(--hoverColor);
}
.themt-bg{
   background:var(--hoverColor);
}
.middle{
   display: flex;
   align-items: center;
}
.center{
   display: flex;
   justify-content: center;
}
.cam{
   display: flex;
   justify-content: center;
   align-items: center;
}
.tit_text{
   color: #FFF;
   font-family: "Alfa Slab One";
   font-size: 2.28rem;
   line-height: 3rem;
   letter-spacing: 0.08571rem;
   margin-bottom:.6rem;
}
.mb2{
   margin-bottom:2rem;
}
.sizemini{
   font-size: 1.71429rem;
   margin:4.25rem auto 4.29rem;
}
.btnAni{
   color: var(--hoverColor);
   position: relative;
   overflow: hidden;
   z-index: 1;
   transition: .2s;
   cursor: pointer;
}
.btnAni:hover {
   color: #000;
}
.btnAni::before {
   content: "";
   position: absolute;
   z-index: -1;
   width: 0;
   height: 100%;
   left: 0;
   background-color: var(--hoverColor);
   transition: ease-in-out .2s;
}
.btnAni:hover::before {
   width: 100%;
}
.ani_shake{
   animation: shake 1.5s infinite;
}
@keyframes shake {
   0% {
      transform:translateY(0px);
   }
   10% {
      transform:translateY(-3px);
   }
   25% {
      transform:translateY(-5px);
   }
   35% {
      transform:translateY(-3px);
   }
   50% {
      transform: translateY(0);
   }
   75% {
      transform: translateY(3px);
   }
   85% {
      transform:translateY(5px);
   }
   90% {
      transform:translateY(3px);
   }
   100% {
      transform: translateY(0);
   }
}
.img{
   border-radius: .7rem;
   width:100%;
}

#container{
   width: 100%;
   height: 100%;
   padding: 3rem;
   box-sizing: border-box;
}
#top_nav{
   position: fixed;
   top:3rem;
   width:100%;
   height: 4rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding:0 3rem;
   z-index: 99;
   transition: all .2s ease;
}
#top_nav.scrolled,
#top_nav_ph.scrolled{
   background: rgba(0,0,0,.5);
   top:0;
   transition: all .5s ease;
}
#top_nav.scrolled .logo::before,
#top_nav.scrolled .logo::after,
#top_nav.scrolled .nav_right::after,
#top_nav.scrolled .nav_right::before
{
   background:none;
   transition: all .5s ease;
}

#top_nav.scrolled .logo,
#top_nav.scrolled .nav_right{
   background:none;
   transition: all .5s ease;
}
.logo,.nav_right{
   display: flex;
   align-items: center;
   background:#000;
   height:100%;
   position: relative;
}
.logo::after{
   content: '';
   position: absolute;
   right: -1.75rem;
   top: 0;
   width: 1.875rem;   
   height: 1.875rem;
   background: radial-gradient(circle at 100% 100%, transparent 1.875rem, #000 0);
}
.logo::before{
   content: '';
   position: absolute;
   left: 0;
   bottom: -1.875rem;
   width: 1.875rem;
   height: 1.875rem;
   background: radial-gradient(circle at 100% 100%,transparent 1.875rem,#000 0);
}
.nav_right::after{
   content: '';
   position: absolute;
   right: 0;
   bottom: -1.86rem;
   width: 1.875rem;
   height: 1.875rem;
   background: radial-gradient(circle at 0% 0%, transparent 1.875rem, #000 0);
   transform:rotate(270deg);
}
.nav_right::before{
   content: '';
   position: absolute;
   left: -1.87rem;
   top: 0;
   width: 1.875rem;
   height: 1.875rem;
   background: radial-gradient(circle at 0% 0%,transparent 1.875rem,#000 0);
   transform:rotate(270deg);
}
.logo{
   border-radius:0 0 1.5rem 0;
}

.logo_img{
   width: 2.53571rem;
}
.logo_title{
   margin:auto 1.25rem;
   color: #FFF;
   font-family: "Alfa Slab One";
   font-size: 1.42857rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.42857rem; /* 100% */
   letter-spacing: 0.07143rem;
}
.nav_list{
   font-family: "Aoboshi One";
   font-size: 0.85714rem;
}
.nav_list>a{
   color:#fff;
}
.nav_list>a:hover{
   color:var(--hoverColor);
}
.nav_list>a:nth-child(2){
   margin:auto 5.625rem;
}
.nav_right{
   border-radius:0 0 0 1.5rem;
   padding-left:1rem;
}
.buy_btn{
   width: 7.5rem;
   height: 2.42857rem;
   border-radius: 0.78571rem;
   background: #F0F1EC;
   color: #000;
   font-family: "Aoboshi One";
   font-size: 0.71429rem;
   font-weight: 500;
}
.x_btn{
   /* width: 2.125rem;
   height: 2.125rem; */
   border-radius: 50%;
   width: 2.42857rem;
   height: 2.42857rem;
   background: #F0F1EC;
   margin-left:0.87rem;
}
.banner{
   width: 100%;
   height:100%;
   border-radius: 1.875rem;
}
.banner.pc{
   display: block;
}
.banner.ph{
   display: none;
}
.after_banner{
   position:relative;
}
.textimg{
   width:104%;
   margin-left:-1.4rem;
}
.float_lion{
   position: absolute;
   right:3rem;
   top:8.29rem;
   width:19.7rem;
}
.imgs{
   margin-top:3.97rem;
}
.imgs img{
   width: 100%;
   border-radius: 0.7rem;
}
.pr1{
   padding-right:1rem;
}
.plr1{
   padding:0 1rem;
}
.pl1{
   padding-left:1rem;
}
.mt8{
   margin-top:8.21rem;
}
.line_btn{
   width: 10.10714rem;
   height: 2.14286rem;
   border-radius: 1.25rem;
   border: 1px solid #B4B0A4;
   color:#fff;
   font-size: 1.14286rem;
   position: absolute;
   bottom:2.29rem;
}
.long_text{
   font-family: "Alegreya Sans";
   font-size: 1.71429rem;
   line-height: 3rem; 
   text-indent: 52%;
}
.long_text2{
   font-family: "Alegreya Sans";
   font-size: 1.71429rem;
   line-height: 3rem; 
}
.hei18{
   height:18rem;
   padding:0;
}
.hei15{
   height:15rem;
   padding:0;
}
.borbot{
   border-bottom:1px solid #6A6A6A;
}
.mr2{
   margin-right:.8rem;
   height:100%;
   /* margin-left:3rem; */
}
.img4{
   width: 22.67857rem;
}
.list_text{
   font-family: "Alfa Slab One";
   font-size: 4.57143rem;
   letter-spacing: 0.22857rem;
   margin-top:-2rem;
}
.mt11{
   margin-top:11.82rem;
}
.img5{
   width:23.5rem;
}
.mt0{
   margin-top:0;
}
.relative{
   position:relative;
}
.img5po{
   position:absolute;
   right:1.5rem;
   bottom:0;
}
.w12{
   width:12rem;
}
.mt4{
   margin-top:4rem;
}
.img8{
   position:absolute;
   left:0;
   bottom:0;
}
.img9{
   position:absolute;
   right:0;
   bottom:0;
}
.h31{
   height:31rem;
}
.img10{
   width:29.17rem;
   margin-left: 5rem;
}
.mt58{
   margin-top:5.86rem;
}
.mt13{
   margin-top:13rem;
}
.foot_nav{
   text-align: center;
   background: #000;
   height: 7rem;
}
.footbg{
   /* background: #fff; */
   padding-bottom: 3rem;
   width:100%;
}


#top_nav_ph{
   display: none;
   position: fixed;
   top:3rem;
   width:100%;
   background:#000;
   z-index: 99;
   transition: all  0.5s ease-in-out;
}
@media (max-width: 768px) { 
   #top_nav{
      display: none;
   }
   #top_nav_ph{
      display: block;
   }
   #container{
      padding-top:15rem;
   }
   .foot_nav{
      font-size: 1.7rem;
   }
   .line_btn{
      width: 14.75rem;
      height: 3.96429rem;
      border-radius: 1.25rem;
   }
   .mr2{
      margin-left:3rem;
   }
   .banner.pc{
      display: none;
   }
   .banner.ph{
      display: block;
   }
   .music_box{
      transform: scale(2);
      right:4rem !important;
   }
}
@media (min-width: 768px) {
   .music_box:hover{
      right:1rem;
      opacity: 1;
      transition: all 0.5s ease;
   }
}
.ph_box{
   display: flex;
   align-items: center;
   justify-content: space-between;
   width:100%;
   padding:3rem;
}
.ph_nav_btn{
   width: 4rem;
}
#top_nav_ph .logo_img{ 
   width: 5rem;
}
#top_nav_ph .logo_title{ 
   font-size: 3.42857rem;
}
#nav_list_ph.show .nav_list_ph_box{
   height: 100vh;
   transition: all .5s ease;
}
.nav_list_ph_box{
   position: fixed;
   top:0;
   left:0;
   width:100%;
   height:0;
   z-index: 999;
   margin: 0;
   padding: 0;
   background-color: #000;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   transition: all .5s ease;
}
.nav_box {
   width: 80%;
   max-width: 300px;
}

.close_button {
   position: absolute;
   top: 7rem;
   right: 4rem;
   width: 3.5rem;
   cursor: pointer;
}

.link-list {
   list-style: none;
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}
 
.link-item {
   padding: 4rem 0;
   position: relative;
   text-align: center;
   border-bottom: 1px solid #6A6A6A;
   width:100%;
}

.link-item a {
   color: #fff;
   text-decoration: none;
   position: relative;
   display: inline-block;
}
.wd60{
   width:52%;
}
.wd70{
   width:70%;
}
.wd80{
   width:84%;
}
#loading{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000;
   z-index: 9999;
}
.loading_box{
   flex-direction: column;
   height:85%;
   opacity: 0;
}
.load_img{
   width:20%;
}
.load_text{
   font-family: 'Alfa Slab One';
   letter-spacing: 0.1rem;
}
.dot {
   display: inline-block;
   width: 2rem;
   vertical-align: bottom;
}
.dot::after {
   content: ".";
   display: inline-block;
   animation: dotAnimation 3s infinite;
}
@keyframes dotAnimation {
   0% {
      content:'.'
   }
   16.6% {
      content:'..'
   }
   33.2% {
      content:'...'
   }
   50% {
      content:'....'
   }
   66.4% {
      content:'.....'
   }
   83% {
      content:'......'
   }
   100% {
      content:'.';
   }
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.music_box{
   width:4rem;
   height:4rem;
   position: fixed;
   right:-1rem;
   top:42%;
   border-radius: 50%;
   box-shadow: 0 0 5rem rgb(215 206 206);
   opacity: 0.7;
   z-index: 99;
   cursor: pointer;
   transition: all 0.5s ease;
}

.music_img{
   width: 1.65rem;
   position: absolute;
   left: 1.2rem;
   top: 1.2rem;
}
.music_box.isplay .music_btn{
  animation: rotate 5s linear infinite;
}
.music_cicon{
   position: absolute;
   top:0;
   left:0;
}
.friends {
   display: flex;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   background: #000;
   border-radius: 0 0 3.53rem 3.53rem;
   padding: 3rem 0 8rem;
   margin-top: -1px;
}
.friends .img{
   width: 4.8135rem;
   height: 4.8135rem;
   margin-right:1.88rem;
}
.friend-scroll {
   display: flex;
   animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-50%);
   }
}

.friend-scroll a {
   flex-shrink: 0;
}