@media (max-width:420px)
 {
 	.phone_body1 
{
     	width: 100%;
     	margin-top: 1.5%;
}     
.art1_right
{       
   
	max-width: 20%;
	position: absolute; top:28.5% ; left: 75.9%; font-size:0vw;/* 修改此处字体大小可以使得在没有动画效果情况下也能看见字体*/
	color: white;
	letter-spacing: 0.3vw;
}
.art2_right
{   
	max-width: 28%;
	width:27%;
	color: white;
	letter-spacing: 0.15vw;
	position: absolute; top:39% ; left: 58.4%; right: 20%; font-size:0vw;text-align: justify; line-height: 2vw;/* 修改此处字体大小可以使得在没有动画效果情况下也能看见字体*/
	text-align: right;
}
.appearance3_body 
{
     	width: 100%;
     	margin-top: 1.5%;
     	display: none;
}      
.appearance3_image
{ 
	position: relative;
	text-align:center;
}
.img1
{
	max-width: 82.7%;
}

.article1_left
{   
	max-width: 20%;
	position: absolute; top:27% ; left: 18.4%; font-size:1.6vw;
	color: white;
	letter-spacing: 0.3vw;
}
.article2_left
{   
	max-width: 28%;
	width:27%;
	color: white;
	letter-spacing: 0.15vw;
	position: absolute; top:38% ; left: 18.5%; right: 20%; font-size:0.9154vw;text-align: justify; line-height: 2vw;
}
.article1_right
{   
	max-width: 20%;
	position: absolute; top:28.5% ; left: 75.9%; font-size:1.6vw;
	color: white;
	letter-spacing: 0.3vw;
}
.article2_right
{   
	max-width: 28%;
	width:27%;
	color: white;
	letter-spacing: 0.15vw;
	position: absolute; top:39% ; left: 58.4%; right: 20%; font-size:0.9154vw;text-align: justify; line-height: 2vw;
	text-align: right;
}
@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_left{ 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; }
.article2_right{ 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_left
{ 
	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; 
}
.article1_right
{ 
	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)
 {
.art1_right
{       
   
	max-width: 20%;
	position: absolute; top:28.5% ; left: 75.9%; font-size:0vw;/* 修改此处字体大小可以使得在没有动画效果情况下也能看见字体*/
	color: white;
	letter-spacing: 0.3vw;
}
.art2_right
{   
	max-width: 28%;
	width:27%;
	color: white;
	letter-spacing: 0.15vw;
	position: absolute; top:39% ; left: 58.4%; right: 20%; font-size:0vw;text-align: justify; line-height: 2vw;/* 修改此处字体大小可以使得在没有动画效果情况下也能看见字体*/
	text-align: right;
}
.phone_body{
	display: none;
}
.appearance3_body 
{
     	width: 100%;
     	margin-top: 1.5%;
}      
.appearance3_image
{ 
	position: relative;
	text-align:center;
}
.img1
{
	max-width: 82.7%;
}

.article1_left
{   
	max-width: 20%;
	position: absolute; top:27% ; left: 18.4%; font-size:1.6vw;
	color: white;
	letter-spacing: 0.3vw;
}
.article2_left
{   
	max-width: 28%;
	width:27%;
	color: white;
	letter-spacing: 0.15vw;
	position: absolute; top:38% ; left: 18.5%; right: 20%; font-size:0.9154vw;text-align: justify; line-height: 2vw;
}
.article1_right
{   
	max-width: 20%;
	position: absolute; top:28.5% ; left: 75.9%; font-size:1.6vw;
	color: white;
	letter-spacing: 0.3vw;
}
.article2_right
{   
	max-width: 28%;
	width:27%;
	color: white;
	letter-spacing: 0.15vw;
	position: absolute; top:39% ; left: 58.4%; right: 20%; font-size:0.9154vw;text-align: justify; line-height: 2vw;
	text-align: right;
}
@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_left{ 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; }
.article2_right{ 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_left
{ 
	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; 
}
.article1_right
{ 
	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; 
}

}