@media (max-width:420px)
 {
 	.phone_body1
{
     	width: 100%;
}      
 	.phone_body2 
{       
	    margin-top:5%;
     	width: 100%;
}  
.appearance1_body 
{
     	width: 100%;
     	display: none;
}      
.appearance1_body2 
{       
	    margin-top:5vh;
     	width: 100%;
     	display: none;
} 
.line1
{
	display: none;
} 
.appearance1_image
{ 
	position: relative;
	text-align:center;
}
.appearance1_image2
{ 
	
	text-align:center;
}

.img1
{
	max-width: 82.7%;
}
.img2
{
	max-width: 82.7%;
}
.article1 
{   
	letter-spacing:0.1vw;
	
	position: absolute; top:18% ; left: 15%; font-size:20px;
}
.article2 
{   
	
	width:73%;
    letter-spacing:0.05vw;
	position: absolute; top:25% ; left: 15%; right:20%; font-size:13px;text-align: justify;
}
@keyframes lefteaseinAnimate
{ 
	0%{ transform: translateX(-2000px); opacity: 0;}
  /*在0%时设置文字在想X轴-2000px位移处(左边),透明度为0,也就是看不见文字*/ 
  100%{ transform: translateX(0px); opacity: 1;}
  /*在100%时设置文字在想X轴0px位移处,也就是原始布局的位置,透明度为1,也就是文字可以看见了*/
}
@-webkit-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
@-o-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
@-ms-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
@-moz-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
.article2{ animation: lefteaseinAnimate 1s ease 1; /*调用已定义好的动画lefteaseinAnimate,全程运行时间1S,进入的速度曲线为ease,只播放一次*/ 
-webkit-animation: lefteaseinAnimate 1s ease 1; 
-ms-animation: lefteaseinAnimate 1s ease 1; 
-o-animation: lefteaseinAnimate 1s ease 1; 
-moz-animation: lefteaseinAnimate 1s ease 1; 
/*规定动画的最后状态为结束状态*/ 
animation-fill-mode:forwards; 
-webkit-animation-fill-mode: forwards; 
-o-animation-fill-mode: forwards; 
-ms-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards; }
/*定义一个名字为righteaseinAnimate动画,实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimate{ 0%{ transform: translateX(2000px); opacity: 0;} 
/*在0%时设置文字在想X轴2000px位移处(右边),透明度为0,也就是看不见文字*/ 
100%{ transform: translateX(0px); opacity: 1;} 
/*在100%时设置文字在想X轴0px位移处,也就是原始布局的位置,透明度为1,也就是文字可以看见了*/}
@-webkit-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}
@-o-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}
@-ms-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}
@-moz-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}

.article1
{ 
	animation: righteaseinAnimate 1s ease 1; /*调用已定义好的动画righteaseinAnimate,全程运行时间1S,进入的速度曲线为ease,只播放一次*/ 
	-webkit-animation: righteaseinAnimate 1s ease 1; -moz-animation: righteaseinAnimate 1s ease 1; -ms-animation: righteaseinAnimate 1s ease 1; 
	-o-animation: righteaseinAnimate 1s ease 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; 
	-o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; 
}

}
 @media (min-width:420px)
{
.phone_body
{
	display: none;
}
.appearance1_body 
{
     	width: 100%;
}      
.appearance1_body2 
{       
	    margin-top:5vh;
     	width: 100%;
}  
.appearance1_image
{ 
	position: relative;
	text-align:center;
}
.appearance1_image2
{ 
	
	text-align:center;
}

.img1
{
	max-width: 82.7%;
}
.img2
{
	max-width: 82.7%;
}
.article1 
{   
	letter-spacing:0.1vw;
	max-width: 20%;
	position: absolute; top:37% ; left: 13%; font-size:1.48vw;
}
.article2 
{   
	max-width: 35%;
	width:35%;
    letter-spacing:0.05vw;
	position: absolute; top:45.5% ; left: 13%; right:20%; font-size:0.9154vw;text-align: justify; line-height: 2vw;
}
@keyframes lefteaseinAnimate
{ 
	0%{ transform: translateX(-2000px); opacity: 0;}
  /*在0%时设置文字在想X轴-2000px位移处(左边),透明度为0,也就是看不见文字*/ 
  100%{ transform: translateX(0px); opacity: 1;}
  /*在100%时设置文字在想X轴0px位移处,也就是原始布局的位置,透明度为1,也就是文字可以看见了*/
}
@-webkit-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
@-o-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
@-ms-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
@-moz-keyframes lefteaseinAnimate{ 0%{ -webkit-transform: translateX(-2000px); opacity: 0;} 
100%{ -webkit-transform: translateX(0px); opacity: 1;} }
.article2{ animation: lefteaseinAnimate 1s ease 1; /*调用已定义好的动画lefteaseinAnimate,全程运行时间1S,进入的速度曲线为ease,只播放一次*/ 
-webkit-animation: lefteaseinAnimate 1s ease 1; 
-ms-animation: lefteaseinAnimate 1s ease 1; 
-o-animation: lefteaseinAnimate 1s ease 1; 
-moz-animation: lefteaseinAnimate 1s ease 1; 
/*规定动画的最后状态为结束状态*/ 
animation-fill-mode:forwards; 
-webkit-animation-fill-mode: forwards; 
-o-animation-fill-mode: forwards; 
-ms-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards; }
/*定义一个名字为righteaseinAnimate动画,实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimate{ 0%{ transform: translateX(2000px); opacity: 0;} 
/*在0%时设置文字在想X轴2000px位移处(右边),透明度为0,也就是看不见文字*/ 
100%{ transform: translateX(0px); opacity: 1;} 
/*在100%时设置文字在想X轴0px位移处,也就是原始布局的位置,透明度为1,也就是文字可以看见了*/}
@-webkit-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}
@-o-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}
@-ms-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}
@-moz-keyframes righteaseinAnimate{ 0%{ -webkit-transform: translateX(2000px); opacity: 0;} 100%{ -webkit-transform: translateX(0px); opacity: 1;}}

.article1
{ 
	animation: righteaseinAnimate 1s ease 1; /*调用已定义好的动画righteaseinAnimate,全程运行时间1S,进入的速度曲线为ease,只播放一次*/ 
	-webkit-animation: righteaseinAnimate 1s ease 1; -moz-animation: righteaseinAnimate 1s ease 1; -ms-animation: righteaseinAnimate 1s ease 1; 
	-o-animation: righteaseinAnimate 1s ease 1; /*规定动画的最后状态为结束状态*/ animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; 
	-o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; 
}
}