@charset "UTF-8";
/* CSS Document */

.usage-container{
position: relative;
}
.swiper-container{
padding-bottom: 15px;
}
@media all and (max-width:576px) {
.swiper-container{
padding-bottom: 10px;
}
}
.swiper-pagination-bullet-active{
background: #0066b3;
}
.pagination-style{
--swiper-theme-color: #0066b3;
position: absolute;
bottom: 0 !important;
}
.usage-screen{
width: 100%;
max-width: 360px;
height: auto;
}


.swiper-usagebtn-prev{
position: absolute;
width: 35px;
height: 100%;
left: 0;
top: 0;
background: url("../images/se-prev-arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 35px auto;
cursor: pointer;
z-index: 10;
}
.swiper-usagebtn-next{
position: absolute;
width: 35px;
height: 100%;
right: 0;
top: 0;
background: url("../images/se-next-arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 35px 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: nowrap;
justify-content: center;
align-items: center;
position: relative;
gap: 10px 20px;
padding: 0 50px
}
.usage-swiper-col-img{
width: 50%;
text-align: center;
}
.usage-swiper-col{
width: 50%;
}
@media all and (max-width:576px) {
.usage-swiper-row{
flex-flow: column;
}
.usage-swiper-col-img, .usage-swiper-col{
width: 100%;
}
}

    .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;
}

.usage-no{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: 0 10px;
}
.usage-no-inline{
display: inline-flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: 0 10px;
}
.usage-no-cn img{
margin-top: 3px;
}
.app-row{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 0 10px;
}
.swiper-login-bar{
width: 100%;
margin-top: 30px;
background-image: linear-gradient(to right, transparent, white 10% 90%, transparent);
background-repeat: no-repeat;
padding: 15px 20px;
text-align: center;
font-weight: bold;
}