@font-face{
	
	
	font-family: 'alifont';
	src: url('../myfont/AlimamaFangYuanTiVF-Thin.woff2') format('woff2'), 
		 url('../myfont/AlimamaFangYuanTiVF-Thin.woff') format('woff');  

}


@font-face{
	
	
	font-family: 'alifont2';
	src: url('../myfont/AlimamaShuHeiTi-Bold.woff2') format('woff2'), 
		 url('../myfont/AlimamaShuHeiTi-Bold.woff') format('woff');  

}



.ch-usealifont-title{
	
	font-size: 110px;
    line-height: 1.05;
    font-weight: 700;
    margin-top: -20px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
	
	font-family:'alifont';
}

.ch-usealifont1{
	
	font-family:'alifont';

}

.ch-usealifont2{
	
	font-family:'alifont2';
}

.mysk{
	
	display:inline-block;
	width:30px;
	height:10px;
}

.mysp{
	
	width:100%;
	display:block;
	height:20px;
}

.mybimg{
	
	width:50%;
}


.ch-to-top{
	
	margin-top:30px;
}


   		.mshop{
   		
   			cursor:pointer;
   			float:left;
   		}
   		.mshop img{
   			width:40px;
   			float:left;
   		}
   		
   		.mshop div{
   			display:inline-block;
   			margin-left:10px;
   		}
   		
   		.mshop div span{
   			color:#2dc457;
   			display:block;
   			font-size:16px;
   			
   			line-height:28px;
   		}
   		.mshop div desc{
   			color:#d3d3d3;
   			display:block;
   			font-size:12px;
   			line-height:18px;
   		}
   		
   		
   		
   		
   		
   		
   		
   		
 mysection {
  position: fixed;
  top:0px;
  left:0px;
  z-index:0;
  width: 100%;
  height: 100vh;
  background: transparent;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* 3.设置枫叶盒子的基本样式 */

mysection .set {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* 4.对第二个枫叶盒子单独设置样式 */

.set2 {
  transform: scale(2) rotateY(180deg);
  filter: blur(2px);
}

/* 5.对第三个枫叶盒子单独设置样式 */

.set3 {
  transform: scale(0.8) rotateX(180deg);
  filter: blur(4px);
}

/* 6.对枫叶图片外侧盒子做样式 */

mysection .set div {
  position: absolute;
  display: block;
}


mysection .set div img{
	
	opacity: 0.1;
}


/* 7.对每一个单独的枫叶盒子做动画和样式修改 */
mysection .set div:nth-child(1) {
  left: 20%;
  animation: animate 15s linear infinite;
  animation-delay: -7s;
}

mysection .set div:nth-child(2) {
  left: 50%;
  animation: animate 20s linear infinite;
  animation-delay: -5s;
}

mysection .set div:nth-child(3) {
  left: 70%;
  animation: animate 20s linear infinite;
  animation-delay: 0s;
}

mysection .set div:nth-child(4) {
  left: 0%;
  animation: animate 15s linear infinite;
  animation-delay: -5s;
}

mysection .set div:nth-child(5) {
  left: 85%;
  animation: animate 18s linear infinite;
  animation-delay: -10s;
}

mysection .set div:nth-child(6) {
  left: 0%;
  animation: animate 12s linear infinite;
  animation-delay: 0s;
}

mysection .set div:nth-child(7) {
  left: 15%;
  animation: animate 14s linear infinite;
  animation-delay: 0s;
}

mysection .set div:nth-child(8) {
  left: 90%;
  animation: animate 18s linear infinite;
  animation-delay: -1s;
}
/* 这里面修改的数值不用纠结，只是为了达到效果，其实不用严格按照我这个数来 */

/* 8.定义动画 */

@keyframes animate {
  0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: translateX(-20px) rotate(45deg);
  }
  40% {
    transform: translateX(-20px) rotate(90deg);
  }
  60% {
    transform: translateX(20px) rotate(180deg);
  }
  80% {
    transform: translateX(-20px) rotate(180deg);
  }
  100% {
    top: 110%;
    transform: translateX(-20px) rotate(226deg);
  }
}  		
   		
   	
   	.xfuwu{
   	
   		width:100px;
   		height:100px;
   	   	background: linear-gradient(-141deg, #ff5c1b, #fff1e0);
   		position:fixed;
   		right:20px;
   		bottom:30px;
   		z-index:9999;
   		border-radius:50px;	
   		display:none;
   	}
   	
   	.xfuwu img{
   		
   		width:80px;
   		height:80px;
   		border-radius:40px;
   		margin-left:10px;
   		margin-top:10px;
   	}	
   		
   		
   		

   	.myfuwu  .mclose{

		width:100%;
		height:1px;
		position:relative;
 	}
 	
 	.myfuwu  .mclose svg{
 		
 		width:25px;
 		height:25px;
 		position:absolute;
 		top:20px;
 		right:30px;
 		cursor:pointer;
 	}
 
 
   .myfuwu{
   	
   		width:260px;
   		height:300px;
   		background: linear-gradient(-141deg, #ff5c1b, #fff1e0);
   		position:fixed;
   		right:20px;
   		bottom:30px;
   		z-index:9999;
   		border-radius:5px;

   	}
   	
   	.myfuwu .fw1{
   	
   		width:82px;
   		height:82px;
   		border:1px solid #f3f3f3;
   		border-radius:40px;
   		position:relative;
   		top:-30px;
   	}
   	
   	

   	
   	.myfuwu .fw1 img{
   	
   		width:70px;
   		height:70px;
   		border-radius:35px;
   		margin-top:5px;
   		margin-left:5px;
   		transform: scaleX(-1);
   	}
   	
   	.myfuwu .fw2{
   	
   		width:100%;
   		height:30px;
   		color:#ffffff;
   		font-size:26px;
		margin-top:-20px;
   		text-align:center;
   		font-weight:700;
   	}
 
 	.myfuwu .fw2 span{
 		color:#ffd140;
 	}
 
 	.myfuwu .fw3{
 	
 		width:180px;
 		height:180px;
 		background-color:#ffffffbd;
 		border:1px solid #ffffff;
 		margin-left: calc(50% - 90px);
 		margin-top:20px;
 	}
 	
 	.myfuwu .fw3 img{
 	
 		width:170px;
 		height:170px;
 		margin-top:4px;
 		margin-left:4px;
 	}
 	
 	.myfuwu .fw4{
 	
		width:100%;
		text-align:center;
 	}
 	
 	.myfuwu .fw4 span{
 	
 		width:90%;
 		height:30px;
 		line-height:30px;
 		display:inline-block;
 		 background: linear-gradient(to right, transparent, #ffffff78, transparent);
 		 margin-top:5px;
 		 color:#ffffff;
 	}
 
  	.myfuwu .fw5{
 	
		width:100%;
		text-align:center;
 	}
 
 .myfuwu .fw5 span{
 	
		height:35px;
 		line-height:35px;
 		display:inline-block;
 		padding:0px 10px;
 		background: linear-gradient(to right, #ff5c1b, #ff923e);
 		margin-top:20px;
 		color:#fff;
 		border-radius:15px;
 	}
 
  .myfuwu .fw5 span k{
  
  	font-size:18px;
  	font-weight:700;
  }
 
 
 
 
 
 
 
 
 
 
   		
   		


/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
    
    
 
}



/* 屏幕宽度在600px到900px之间 */
@media (min-width: 100px) and (max-width: 899px) {
	

   	
}

/* 屏幕宽度在600px到900px之间 */
@media (min-width: 900px) and (max-width: 1299px) {
	

}


/* 屏幕宽度大于900px */
@media (min-width: 1200px) {
	
	

}