@charset "utf-8";

#top-slider {
  position: relative;
  width: 100%;
/*  height: 53%;*/
   height: 100%;
  overflow: hidden;
}

#top-slider .container {
   height: 100%;
}

.swiper-container-1 {
   position: relative;   
   width: 100%;
   height: 110px;
   transition: opacity .6s ease, transform .3s ease;
   overflow: hidden;
}
  
.swiper-container-1 .swiper-wrapper {}   
   
.swiper-container-1 .swiper-image {
   width: 100%;
   height: 100%;
}
   
.swiper-container-1 .swiper-image-inner {
   display: flex;   
   width: 100%;
   height: 100%;   
   background-size: cover;
   background-position: center center;
}
      
.swiper-container-1 .swiper-slide {   
   overflow: hidden;
   font-size: 2.8rem;
	font-size: 28px;
	line-height: 3.3rem;
	line-height: 33px;
   font-style: italic;
}
   
.swiper-container-1 .swiper-button-prev,
.swiper-container-1 .swiper-button-next {
   width: 44px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease-out;
}
   
.swiper-container-1 .swiper-button-prev {
   transform: translateX(50px);
}
   
.swiper-container-1 .swiper-button-next {
   transform: translateX(-50px);
}
   
.swiper-container-1:hover .swiper-button-prev,
.swiper-container-1:hover .swiper-button-next {
   transform: translateX(0);
   opacity: 1;
   visibility: visible;
}
   
.swiper-container-1 .swiper-pagination-1 {
   position: absolute;
   display: flex;
   justify-content: center;
   text-align: center;    
   bottom: 0px;
   z-index: 400; 
}
  
.swiper-container-1 .swiper-pagination-bullet {
   width: 20px;
   height: 20px;
   line-height: 20px;
   opacity: 1;
   background: rgba(255, 255, 255, 1.0);
}

.swiper-container-1 .swiper-pagination-bullet-active {
   color: #fff;
   background: #ff6b00;
}
   
.swiper-container-1 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 9px);
} 
   
.swiper-container-1 .swiper-button-prev,
.swiper-container-1 .swiper-button-next {
   color: #fff;
}  

.swiper-container-1 .swiper-image-inner::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
/*  background: linear-gradient(to bottom, transparent 50%, rgba(69,137,144,0.8) 90%);*/
   background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.35) 90%);   
}

.swiper-container-1 .swiper-image-inner .container {  
   display: inline-block;
   bottom: 20%;
   align-self: flex-end; 
   z-index: 1000;      
}

/*----------------------- responsive */