@charset "utf-8";
/* CSS Document */
.apple-banner {
width: 100%;
overflow: hidden;
}
.apple-banner .swiper-container {
margin-top:0px;
width: 100%;
}
.swiper-button-prev,.swiper-button-next{
width: 15%;
height: 100%;
top:0;
background:none;
}
.swiper-button-prev{
left:0;}
.swiper-button-next{ right:0;}
.swiper-button-prev span,.swiper-button-next span{
display:block;
width: 64px;
height: 64px;
position: absolute;
left: 20px;
top: 50%;
margin-top:-32px;
border-radius: 100%;
background: rgba(180,180,180,0.25) url(../images/arrows.png) no-repeat center 17px;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.swiper-button-next span{
background: rgba(180,180,180,0.25) url(../images/arrows.png) no-repeat center -71px;
left:auto;
right:20px;
}
.swiper-button-prev:hover span,.swiper-button-next:hover span{
opacity: .6;
}
/*分页器*/
.apple-banner .swiper-pagination{
top:auto;
bottom:10px;
background:none;
}
.apple-banner .swiper-pagination-bullet {
display: inline-block;
width: 50px;
height: 30px;
margin: 0 3px;
cursor: pointer;
background: none;
border-radius:0;
opacity: 1;
}
.apple-banner .swiper-pagination-bullet span {
width: 50px;
height: 2px;
display: block;
background: rgba(255,255,255,0.6);
}
.apple-banner .swiper-pagination-bullet-active span{
background: white;
}
.apple-banner .autoplay .swiper-pagination-bullet-active span{
background: rgba(255,255,255,0.6);
}
.apple-banner .swiper-pagination-bullet i{
background: white;
height: 2px;
transform:scaleX(0);
transform-origin: 0;
display: block;
}
.apple-banner .autoplay .firsrCurrent i{
transition:transform 2.9s linear;
transform:scaleX(1);
}
.apple-banner .autoplay .current i{
transition:transform 4s linear;
transform:scaleX(1);
}
.apple-banner .autoplay .replace span{
background:white;
}
/*内容样式*/
.swiper-slide{ width: 100%; margin-left: auto; margin-right: auto;}
.swiper-slide img{ width: 100%;}
@media screen and (max-width:640px){
.apple-banner .swiper-pagination{
top:auto;
bottom:0px;
background:none;
}
.apple-banner .swiper-pagination-bullet {
display: inline-block;
width: 30px;
height: 10px;
margin: 0 3px;
cursor: pointer;
background: none;
border-radius:0;
opacity: 1;
}
.apple-banner .swiper-pagination-bullet span {
width: 30px;
height: 2px;
display: block;
background: rgba(255,255,255,0.6);
}
.apple-banner {
width: 100%;
overflow: hidden;
margin-top: 65px;
}
}