@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&display=swap');

.qa_banner{
    display:flex; 
    width:100%;
    position: relative; 
    flex-direction:row; 
    justify-content: center; 
    align-items: center;
    padding:0 50px; 
    box-sizing: border-box;
}


.qa_banner > ul.bannerRange{
    user-select: none;
    position: relative;
    width: 100%;
    display:inline-flex; 
    flex-direction: row; 
    flex-wrap: nowrap;
    list-style: none;
    overflow-x: scroll;
    overflow-y:inherit;
    padding: 0px;
    margin: 0;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: none;
    

}

.qa_banner > ul.bannerRange > li{
    flex: 1 0 calc( 100% / 4 );
    padding:15px 15px; 
    box-sizing: border-box; 
    display: inline-block; 
    
    
}
.qa_banner > ul.bannerRange > li > a.item{ width: 100%; text-decoration: none; }
.qa_banner > ul.bannerRange > li{transition: all .2s linear; user-select: none; }
.qa_banner > ul.bannerRange > li:hover{ transform: scale(1.05); }
.qa_banner > ul.bannerRange > li > a.item > .imgarea{ aspect-ratio: 16 / 9; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; overflow: hidden; }
.qa_banner > ul.bannerRange > li > a.item > .imgarea >img{ display:block; width:100%;}
.qa_banner > ul.bannerRange > li > a.item > .qnum{ display:flex; flex-direction: row; justify-content: flex-start; align-items: center;margin:8px 0; line-height: 1.3; gap:15px}
.qa_banner > ul.bannerRange > li > a.item > .qnum span:nth-child(1){ flex:1 0 auto; font-size:31px;font-family: "Maven Pro", serif; font-weight:600; font-style: italic; color:#ada6cc; transition: color 0.2s linear;}
.qa_banner > ul.bannerRange > li:hover > a.item > .qnum span:nth-child(1){color:var(--main);}
.qa_banner > ul.bannerRange > li > a.item > .qnum span:nth-child(2){ flex:1 1 100%;  height:14px; background: linear-gradient(to right, rgba(173,166,204,.5) 0% , rgba(173,166,204,0) 100% ); }
.qa_banner > ul.bannerRange > li > a.item > .query{ 
    display: -webkit-box;
    line-clamp: 2;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%; text-align: justify;font-size:21px; color:#555

}
.qa_banner .arrowMenu{
    /*position: absolute;*/
    display:inline-flex; 
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #ada6cc;
    transform: translateY(-0%);
    color:#fff;
    width:25px;
    height: 30px;
    /*top:50%;*/
    border-radius: 3px;
    cursor: pointer;
}
.qa_banner .arrowMenu:hover{background:var(--main)}
/*
.qa_banner .leftMenu{left:0;}
.qa_banner .rightMenu{right:0;}*/
.qa_banner .leftMenu .arrow, .qa_banner .rightMenu .arrow{width: 12px;}
.qa_banner .leftMenu .arrow .cls-1, .qa_banner .rightMenu .arrow .cls-1{fill:#fff; }
.qa_banner .pagesArea{
    position: absolute; 
    top:-15%; 
    right:5%; 
    display:inline-flex; 
    flex-direction: row; 
    align-items: center;
    flex-wrap: nowrap; gap: 10px; }
.qa_banner .pages{font-size:21px; user-select: none; color:var(--main) }

@media screen and ( max-width:1280px ) {
    .qa_banner > ul.bannerRange > li{flex: 1 0 calc( 100% / 3 );}
    
}

@media screen and ( max-width:768px ) {
    .qa_banner > ul.bannerRange > li{flex: 1 0 calc( 100% / 2 );}
    
}

@media screen and ( max-width:500px ) {
    .qa_banner{padding:10px 30px}
    .qa_banner > .arrowMenu{width:30px; height: 40px;}
    .qa_banner > ul.bannerRange > li{flex: 1 0 calc( 100% / 1 );}
    
}