@charset "UTF-8";
/* CSS Document */
.usage-screen{
width: 100%;
max-width: 450px;
height: auto;
}
.swiper-usagebtn-prev{
position: absolute;
width: 40px;
height: 100%;
left: -35px;
top: 0;
background: url("../images/fast_payment_system/fps-preview-arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 40px auto;
cursor: pointer;
z-index: 10;
}
.swiper-usagebtn-next{
position: absolute;
width: 40px;
height: 100%;
right: -35px;
top: 0;
background: url("../images/fast_payment_system/fps-next-arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 40px auto;
cursor: pointer;
z-index: 10;
}
.swiper-usagebtn-prev.swiper-button-disabled,
.swiper-usagebtn-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper {
      width: 100%;
      height: 100%;
    }
.usage-swiper-row{
display: flex;
flex-wrap: wrap;
margin: 0 35px 0 35px;
justify-content: center;
align-items: center;
position: relative;
}
.usage-swiper-col1{
width: 55%;
padding: 0 15px;
}
.usage-swiper-col2{
width: 45%;
padding: 0 15px;
height: 400px;
}
.usage-swiper-col2-c{
width: 45%;
padding: 0 15px;
height: 500px;
}
    .usage-thumb1 .swiper-slide, .usage-thumb2 .swiper-slide, .usage-thumb3 .swiper-slide, .usage-thumb4 .swiper-slide, .usage-thumb5 .swiper-slide, .usage-thumb6 .swiper-slide, .usage-thumb7 .swiper-slide, .usage-thumb8 .swiper-slide {
      filter: grayscale(100%);
opacity: 0.6;
    }
.usage-thumb1 .swiper-slide-thumb-active, .usage-thumb2 .swiper-slide-thumb-active, .usage-thumb3 .swiper-slide-thumb-active, .usage-thumb4 .swiper-slide-thumb-active, .usage-thumb5 .swiper-slide-thumb-active, .usage-thumb6 .swiper-slide-thumb-active, .usage-thumb7 .swiper-slide-thumb-active, .usage-thumb8 .swiper-slide-thumb-active{
filter: grayscale(0);
opacity: 1;
}
.swiper-slide.usage-thumb-theme{
display: flex;
flex-flow: column;
justify-content: center;
}
.swiper-slide.usage-thumb-theme strong{
color: #0066b3;
}
@media all and (max-width:1023px) {
.usage-swiper-row{
margin: 0;
}
.swiper-usagebtn-prev{
left: 0;
}
.swiper-usagebtn-next{
right: 0;
}
.usage-swiper-col1{
width: 100%;
}
.usage-swiper-col2, .usage-swiper-col2-c{
width: 100%;
padding-top: 20px;
height: 180px;
}
.usage-thumb1 .swiper-slide, .usage-thumb2 .swiper-slide, .usage-thumb3 .swiper-slide, .usage-thumb4 .swiper-slide, .usage-thumb5 .swiper-slide, .usage-thumb6 .swiper-slide, .usage-thumb7 .swiper-slide, .usage-thumb8 .swiper-slide  {
display: none;
    }
.swiper-slide-thumb-active{
display: block !important;
width: 100% !important;
}
}
.swiper-slide{
text-align: center;
}