@import "bootstrap-grid.css";
@import "flickity.css";
@import "flickity-fade.css";
@import "lightgallery.css";
@import "lg-zoom.css";
@import "lg-thumbnail.css";
@import "lg-video.css";
@import "style.css";
@import "ecommerce.css";
@import "swiper-bundle.min.css";

html,
body {
position: relative;
height: 100%;
}

body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}

.swiper {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;


}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.banner .container{
    position: absolute;
}
.banner .banner_img{
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner .swiper-slide-active .banner_img{
    -webkit-animation: haha2 2s linear both;
}
.banner .swiper-slide{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

}

.banner .swiper-pagination-bullet-active{
    background: url(../img/banner_dian.png);
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    width: 27px;
    height: 27px;
}
.banner .swiper-button-prev1{
    position: absolute;
    background: url(../img/banner_right.png);
    top:50%;
    width: 50px;
    height: 50px;
    z-index: 10;
    left: 5%;
}

.banner .swiper-button-next1{
    position: absolute;
    background: url(../img/banner_left.png);
    top:50%;
    width: 50px;
    height: 50px;
    z-index: 10;
    right: 5%;
}

.banner .swiper-pagination-bullet{
    width: 27px;
    height: 27px;
    border-radius: 100%;
    opacity: 1;
    background: url(../img/banner_dians.png);

}
.banner .swiper-pagination-bullet-active{
    background: url(../img/banner_dian.png);
    width: 27px;
    height: 27px;
    -webkit-animation: haha1 3s linear infinite;
}
@-webkit-keyframes haha1{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes haha2{
    0%{ transform: scale(2) }
    10%{ transform: scale(1.9) }
    20%{ transform: scale(1.8) }
    30%{ transform: scale(1.7) }
    40%{ transform: scale(1.6) }
    50%{ transform: scale(1.5) }
    60%{ transform: scale(1.4) }
    70%{ transform: scale(1.3) }
    80%{ transform: scale(1.2) }
    90%{ transform: scale(1.1) }
    100%{ transform: scale(1) }
}