/*********************** 样式1 *************************/
.picChange{width:100%;height:650px;position:relative;}

/* 动画区域 */
.picChange .PicList{width:100%;height:100%;position:relative;overflow:hidden;transform-style:preserve-3d; perspective:1000px;}
.picChange .PicList div{position:absolute; display: none; width:100%;height:100%;background-size:cover;background-position:center;}
.picChange .PicList div a{display: block; width:100%;height:100%;}

/* 列表按钮区域 */
.picChange .BtnList{bottom:20px; width:100%; position: absolute; z-index:1;  text-align: center; padding:0; list-style: none;}
.picChange .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;}
.picChange .BtnList li:hover{position: relative; transform: scale(1.1); z-index:2; cursor: pointer;}
.picChange .BtnList li.act{opacity: 1; transform: scale(1.2);margin:0px 20px;}

/* 箭头按钮区域 */
.picChange .BtnArrow{width:100%; position: absolute; top:50%; margin-top:-40px; z-index:1;}
.picChange .BtnArrow span{display:block; position: absolute; width:50px; height:80px; text-shadow: 0px 0px 2px black; opacity: 0.1; cursor: pointer; color:white; font-family: "宋体"; font-weight: bold; font-size: 70px; text-align: center; transition: all .3s ease-in-out;}
.picChange:hover .BtnArrow span{opacity: 0.4;}
.picChange .BtnArrow span:hover{opacity: 0.7;}
.picChange .BtnArrow span.BtnLeft{ left:10px; }
.picChange .BtnArrow span.BtnRight{ right:10px; }

/*********************** 按钮样式 *************************/


/*============================================================动画效果============================================================*/
/*=============================eade 淡入淡出*/
@keyframes eadeIn{ from {opacity: 0;} to {opacity: 1;} }
@keyframes eadeOut{ from {opacity: 1;} to {opacity: 0;} }
/*=============================zoomBig 由小变大*/
@keyframes zoomBigIn{ from {transform: scale(0.3); opacity: 0; } to {transform: scale(1); opacity: 1;} }
@keyframes zoomBigOut{ from {transform: scale(1); opacity: 1;} to {transform: scale(2); opacity: 0;} }
/*=============================zoomSmall 由大变小*/
@keyframes zoomSmallIn{ from {transform: scale(2); opacity: 0; } to {transform: scale(1); opacity: 1;} }
@keyframes zoomSmallOut{ from {transform: scale(1); opacity: 1;} to {transform: scale(0.5); opacity: 0;} }
/*=============================moveLeft 左移*/
@keyframes moveLeftIn{ from {right: -100%; } to {right: 0; } }
@keyframes moveLeftOut{ from {left: 0; } to {left: -100%; } }
/*=============================moveRight 右移*/
@keyframes moveRightIn{ from {left: -100%; } to {left: 0; } }
@keyframes moveRightOut{ from {right: 0; } to {right: -100%; } }
/*=============================moveUp 上移*/
@keyframes moveUpIn{ from {bottom: -100%; } to {bottom: 0; } }
@keyframes moveUpOut{ from {top: 0; } to {top: -100%; } }
/*=============================moveDown 下移*/
@keyframes moveDownIn{ from {top: -100%; } to {top: 0; } }
@keyframes moveDownOut{ from {bottom: 0; } to {bottom: -100%; } }
/*=============================slideLeft 左滑动*/
@keyframes slideLeftIn{ from {right: -100%; opacity: 0;} to {right: 0; opacity: 1;} }
@keyframes slideLeftOut{ from {left: 0; opacity: 1;} to {left: 0; opacity: 0;} }
/*=============================slideRight 右滑动*/
@keyframes slideRightIn{ from {left: -100%; opacity: 0;} to {left: 0; opacity: 1;} }
@keyframes slideRightOut{ from {right: 0; opacity: 1; } to {right: 0; opacity: 0; } }
/*=============================slideUp 上滑动*/
@keyframes slideUpIn{ from {bottom: -100%; opacity: 0;} to {bottom: 0; opacity: 1;} }
@keyframes slideUpOut{ from {top: 0; opacity: 1;} to {top: 0; opacity: 0;} }
/*=============================slideDown 下滑动*/
@keyframes slideDownIn{ from {top: -100%; opacity: 0;} to {top: 0; opacity: 1;} }
@keyframes slideDownOut{ from {bottom: 0; opacity: 1;} to {bottom: 0; opacity: 0;} }
/*=============================FlipX 水平轴翻转*/
@keyframes FlipXIn{ from {transform:rotateX(-180deg); z-index: 1;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes FlipXOut{ from {transform:rotateX(0deg); z-index: 2;} to {transform:rotateX(180deg); z-index: 1;} }
/*=============================FlipY 垂直轴翻转*/
@keyframes FlipYIn{ from {transform:rotateY(-180deg); z-index: 1; } to {transform:rotateY(0deg); z-index: 2;} }
@keyframes FlipYOut{ from {transform:rotateY(0deg); z-index: 2;} to {transform:rotateY(180deg); z-index: 1;} }
/*=============================RollLeft 向左翻动*/
@keyframes FlipLeftIn{ from {transform:rotateY(40deg) translateZ(1000px); opacity: 0; z-index: 1;} to {transform:rotateY(0deg); opacity: 1; z-index: 2;} }
@keyframes FlipLeftOut{ from {opacity: 1;} to {opacity: 0;} }
/*=============================RollRight 向右翻动*/
@keyframes FlipRightIn{ from {transform:rotateY(-40deg) translateZ(1000px); opacity: 0; z-index: 1;} to {transform:rotateY(0deg); opacity: 1; z-index: 2;} }
@keyframes FlipRightOut{ from {opacity: 1;} to {opacity: 0;} }
/*=============================RollUp 向上翻动*/
@keyframes FlipUpIn{ from {transform:rotateX(-90deg) translateZ(400px);  z-index: 2;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes FlipUpOut{ from {opacity: 1; z-index: 1;} to {opacity: 0; z-index: 1;} }
/*=============================RollDown 向下翻动*/
@keyframes FlipDownIn{ from {transform:rotateX(90deg) translateZ(400px);  z-index: 2;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes FlipDownOut{ from {opacity: 1; z-index: 1;} to {opacity: 0; z-index: 1;} }
/*=============================RollLeft 向左滚动*/
@keyframes RollLeftIn{ from {transform:rotateY(90deg); z-index: 1; } to {transform:rotateY(0deg); z-index: 1;} }
@keyframes RollLeftOut{ from {transform:rotateY(0deg); z-index: 2; } to {transform:rotateY(-90deg); z-index: 2;} }
/*=============================RollRight 向右滚动*/
@keyframes RollRightIn{ from {transform:rotateY(-90deg); z-index: 2;} to {transform:rotateY(0deg); z-index: 2;} }
@keyframes RollRightOut{ from {transform:rotateY(0deg); z-index: 1;} to {transform:rotateY(90deg); z-index: 1;} }
/*=============================RollUp 向上滚动*/
@keyframes RollUpIn{ from {transform:rotateX(-90deg); z-index: 1;} to {transform:rotateX(0deg); z-index: 1;} }
@keyframes RollUpOut{ from {transform:rotateX(0deg); z-index: 2;} to {transform:rotateX(90deg); z-index: 2;} }
/*=============================RollDown 向下滚动*/
@keyframes RollDownIn{ from {transform:rotateX(90deg); z-index: 2;} to {transform:rotateX(0deg); z-index: 2;} }
@keyframes RollDownOut{ from {transform:rotateX(0deg); z-index: 1;} to {transform:rotateX(-90deg); z-index: 1;} }