.wrapper_front_slider {
   display: flex;
   width: 100%;
 }
 .wrapper_slider_con {
   display: flex;
   width: 100%;
   margin-bottom: 20px;
 }
 .sslides_container {
   display: flex;
   position: relative;
   width: 70%;
 }
.front_slider {
   position: relative;
   display: flex;
   width: 100%;
 }
 .sslides {
   position: relative;
   display: flex;
   width: 100%;
   min-height: 1px;
   max-height: 260px;
 }
 .sslides li{
   position: absolute;
   width: 100%;
display: flex;
height: 100%;
   opacity: 0;
   z-index: 1;
 }
 .sslides li{
   display: flex;
   width: 100%;
   height: 100%;
 }
 .sslides li.active{
   position: relative;
   opacity: 1;
   z-index: 2;
display: list-item;
transition: opacity 500ms ease-in-out 0s;
 }
 .sslides img {
   position: relative;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .side-pager {
   position: relative;
   display: flex;
flex-direction: column;
justify-content: flex-end;
   width: 27%;
   height: auto;
   max-height: 100%;
   list-style-type: none;
   padding-left: 14px;
   overflow-y: auto;
   margin-left: 3%;
 }
 .side-pager li {
   display:inline-flex;
   width: 100%;
   clear: both;
   margin: 10px 0 0 0;
}
.side-pager li a {
   position: relative;
   text-decoration: none;
   width: 100%;
   display: block;
   float: left;
   clear: both;
   margin: 0;
   padding: 20px;
   font-size: 12px;
   background: rgba(255,255,255,0.6);
   border: 1px solid #eee;
   color: #999;
   line-height: 16px;
   -webkit-transition: 0.1s linear all;
   -moz-transition: 0.1s linear all;
   -ms-transition: 0.1s linear all;
   -o-transition: 0.1s linear all;
   transition: 0.1s linear all;
 }
.side-pager li a::before {
   position: absolute;
   margin-top: -12px;
   content: "";
   display: block;
   width: 16px;
   height: 16px;
   left: 0;
   top: 50%;
   background: #fff;
   border: 1px solid transparent;
     border-top-color: transparent;
     border-right-color: transparent;
     border-bottom-color: transparent;
     border-left-color: transparent;
   border-color: transparent transparent #eee #eee;
   opacity: 0;
   transform-origin: top left;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
.side-pager li.active a {
   color: #03a9f4;
   background: #fff;
}
.side-pager li.active a::before{
   opacity: 1;
}
.side-pager li:hover a {
   background: rgba(255,255,255,0.85);
   color: #444;
 }
 .sidepager_nav {
   position: absolute;
   width: 34px;
   height: 34px;
   text-align: center;
   bottom: 1px;
   background: rgba(255,255,255,0.6);
   font-size: 18px;
   z-index: 5;
   text-decoration: none;
   color: #333;
   font-weight: 500;
   -webkit-transition: 0.1s linear all;
   -moz-transition: 0.1s linear all;
   -ms-transition: 0.1s linear all;
   -o-transition: 0.1s linear all;
   transition: 0.1s linear all;
 }
 .sidepager_nav::before {
   font-family: "FontAwesome";
   display: block;
   line-height: 34px;
 }
 .sidepager_nav.prev::before {
   content: "\f104";
 }
 .sidepager_nav.next::before {
   content: "\f105";
 }
 .sidepager_nav.next {
   right: 1px;
 }
 .sidepager_nav.prev {
   right: 36px;
 }
 .sidepager_nav:hover {
   background: rgba(255,255,255,0.8);
   color: #03a9f4;
}