/* 样式1 */
.picChange1{width:100%;height:500px;position:relative;}
/* 动画区域 */
.picChange1 .PicList{width:100%;height:100%;position:relative;overflow:hidden;transform-style:preserve-3d; perspective:1000px;}
.picChange1 .PicList div{position:absolute;display:none;width:100%;height:100%;background-size:cover;background-position:center;}
.picChange1 .PicList div a{display: block; width:100%;height:100%;}
.picChange1 .PicList div.show{display:block;}
.picChange1 .PicList div.next{z-index:1;}
.picChange1 .PicList div.now{z-index:0;}
/* 列表按钮区域 */
.picChange1 .BtnList{bottom:20px; width:100%; position: absolute; z-index:1;  text-align: center;}
.picChange1 .BtnList li{width:80px; height:40px; opacity: 0.8; border:3px white solid; margin:0px 5px; display: inline-block;  background-size:cover;background-position:center; transition: all .3s ease-in-out;}
.picChange1 .BtnList li:hover{position: relative; transform: scale(1.1); z-index:2; cursor: pointer;}
.picChange1 .BtnList li.act{opacity: 1; transform: scale(1.2);margin:0px 20px;}
/* 箭头按钮区域 */
.picChange1 .BtnArrow{width:100%; position: absolute; top:50%; margin-top:-40px; z-index:1;}
.picChange1 .BtnArrow span{display:block; position: absolute; width:50px; height:80px; background-color: black; opacity: 0.1; cursor: pointer; color:white; font-family: "宋体"; font-size: 70px; text-align: center; transition: all .3s ease-in-out;}
.picChange1:hover .BtnArrow span{opacity: 0.4;}
.picChange1 .BtnArrow span:hover{opacity: 0.7;}
.picChange1 .BtnArrow span.BtnLeft{ left:10px; }
.picChange1 .BtnArrow span.BtnRight{ right:10px; }




/*动画效果*/
 .eadeIn{animation:eadeIn 1.2s ease;}@keyframes eadeIn{from{opacity:0;}to{opacity:1;}}.eadeOut{animation:eadeOut 1.2s ease;}@keyframes eadeOut{from{opacity:1;}to{opacity:0;}}.zoomBigIn{animation:zoomBigIn 1.2s ease;z-index:2;}@keyframes zoomBigIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1;}}.zoomBigOut{animation:zoomBigOut 1.2s ease;}@keyframes zoomBigOut{from{transform:scale(1);opacity:1;}to{transform:scale(2);opacity:0;}}.zoomSmallIn{animation:zoomSmallIn 1.2s ease;z-index:2;}@keyframes zoomSmallIn{from{transform:scale(2);opacity:0}to{transform:scale(1);opacity:1;}}.zoomSmallOut{animation:zoomSmallOut 1.2s ease;}@keyframes zoomSmallOut{from{transform:scale(1);opacity:1;}to{transform:scale(.5);opacity:0;}}.moveLeftIn{animation:moveLeftIn 1.2s ease;}@keyframes moveLeftIn{from{right:-100%}to{right:0}}.moveLeftOut{animation:moveLeftOut 1.2s ease;}@keyframes moveLeftOut{from{left:0}to{left:-100%}}.moveRightIn{animation:moveRightIn 1.2s ease;}@keyframes moveRightIn{from{left:-100%}to{left:0}}.moveRightOut{animation:moveRightOut 1.2s ease;}@keyframes moveRightOut{from{right:0}to{right:-100%}}.moveUpIn{animation:moveUpIn 1.2s ease;}@keyframes moveUpIn{from{bottom:-100%}to{bottom:0}}.moveUpOut{animation:moveUpOut 1.2s ease;}@keyframes moveUpOut{from{top:0}to{top:-100%}}.moveDownIn{animation:moveDownIn 1.2s ease;}@keyframes moveDownIn{from{top:-100%}to{top:0}}.moveDownOut{animation:moveDownOut 1.2s ease;}@keyframes moveDownOut{from{bottom:0}to{bottom:-100%}}.slideLeftIn{animation:slideLeftIn 1.2s ease;z-index:1;}@keyframes slideLeftIn{from{right:-100%;opacity:0;}to{right:0;opacity:1;}}.slideLeftOut{animation:slideLeftOut 1.2s ease;}@keyframes slideLeftOut{from{left:0;opacity:1;}to{left:0;opacity:0;}}.slideRightIn{animation:slideRightIn 1.2s ease;z-index:1;}@keyframes slideRightIn{from{left:-100%;opacity:0;}to{left:0;opacity:1;}}.slideRightOut{animation:slideRightOut 1.2s ease;}@keyframes slideRightOut{from{right:0;opacity:1}to{right:0;opacity:0}}.slideUpIn{animation:slideUpIn 1.2s ease;z-index:1;}@keyframes slideUpIn{from{bottom:-100%;opacity:0;}to{bottom:0;opacity:1;}}.slideUpOut{animation:slideUpOut 1.2s ease;}@keyframes slideUpOut{from{top:0;opacity:1;}to{top:0;opacity:0;}}.slideDownIn{animation:slideDownIn 1.2s ease;z-index:1;}@keyframes slideDownIn{from{top:-100%;opacity:0;}to{top:0;opacity:1;}}.slideDownOut{animation:slideDownOut 1.2s ease;}@keyframes slideDownOut{from{bottom:0;opacity:1;}to{bottom:0;opacity:0;}}.FlipXIn{animation:FlipXIn 1.2s ease;backface-visibility:hidden;}@keyframes FlipXIn{from{transform:rotateX(-180deg);z-index:1;}to{transform:rotateX(0deg);z-index:2;}}.FlipXOut{animation:FlipXOut 1.2s ease;backface-visibility:hidden;}@keyframes FlipXOut{from{transform:rotateX(0deg);z-index:2;}to{transform:rotateX(180deg);z-index:1;}}.FlipYIn{animation:FlipYIn 1.2s ease;backface-visibility:hidden;}@keyframes FlipYIn{from{transform:rotateY(-180deg);z-index:1;}to{transform:rotateY(0deg);z-index:2;}}.FlipYOut{animation:FlipYOut 1.2s ease;backface-visibility:hidden;}@keyframes FlipYOut{from{transform:rotateY(0deg);z-index:2;}to{transform:rotateY(180deg);z-index:1;}}.RollLeftIn{animation:RollLeftIn 1.2s ease;backface-visibility:hidden;}@keyframes RollLeftIn{from{transform:rotateY(40deg) translateZ(1000px);opacity:0;z-index:1;}to{transform:rotateY(0deg);opacity:1;z-index:2;}}.RollLeftOut{animation:RollLeftOut 1.2s ease;backface-visibility:hidden;}@keyframes RollLeftOut{from{opacity:1;}to{opacity:0;}}.RollRightIn{animation:RollRightIn 1.2s ease;backface-visibility:hidden;}@keyframes RollRightIn{from{transform:rotateY(-40deg) translateZ(1000px);opacity:0;z-index:1;}to{transform:rotateY(0deg);opacity:1;z-index:2;}}.RollRightOut{animation:RollRightOut 1.2s ease;backface-visibility:hidden;}@keyframes RollRightOut{from{opacity:1;}to{opacity:0;}}.RollUpIn{animation:RollUpIn 1.2s ease;backface-visibility:hidden;}@keyframes RollUpIn{from{transform:rotateX(-90deg) translateZ(400px);z-index:2;}to{transform:rotateX(0deg);z-index:2;}}.RollUpOut{animation:RollUpOut 1.2s ease;backface-visibility:hidden;}@keyframes RollUpOut{from{opacity:1;z-index:1;}to{opacity:0;z-index:1;}}.RollDownIn{animation:RollDownIn 1.2s ease;backface-visibility:hidden;}@keyframes RollDownIn{from{transform:rotateX(90deg) translateZ(400px);z-index:2;}to{transform:rotateX(0deg);z-index:2;}}.RollDownOut{animation:RollDownOut 1.2s ease;backface-visibility:hidden;}@keyframes RollDownOut{from{opacity:1;z-index:1;}to{opacity:0;z-index:1;}}