.g6-article-list-component{width:100%}
@media(max-width:767px){.g6-article-list-component{padding:0 20px}
}
.g6-article-list-component .g6-article-list-component-container{max-width:100%;width:100%;margin:auto;text-align:center}
@media(min-width:768px) and (max-width:1632px){.g6-article-list-component .g6-article-list-component-container{overflow:hidden}
}
.g6-article-list-component .g6-article-list-component-container .title-container{max-width:1220px;margin:0 auto 44px}
@media(max-width:767px){.g6-article-list-component .g6-article-list-component-container .title-container{margin:0 auto 32px}
}
.g6-article-list-component .g6-article-list-component-container .title-container .g6-title-md{font-family:'Poppins';line-height:84px;height:84px;overflow:hidden}
@media(max-width:1220px){.g6-article-list-component .g6-article-list-component-container .title-container .g6-title-md{max-width:728px;margin:auto}
}
@media(max-width:767px){.g6-article-list-component .g6-article-list-component-container .title-container .g6-title-md{max-width:unset;line-height:42px;height:42px}
}
.g6-article-list-component .g6-article-list-component-container .title-container .button{display:block;margin:44px 0 0;font-family:'Roboto';font-weight:500;font-size:16px;line-height:19px;max-width:100%}
@media(max-width:767px){.g6-article-list-component .g6-article-list-component-container .title-container .button{margin:32px 0 0}
}
.g6-article-list-component .slick-track{display:flex;align-items:stretch}
.g6-article-list-component .slick-slide{height:auto !important}
.g6-article-list-component .slick-arrow{position:absolute;transform:translateX(-50%);bottom:0}
.g6-article-list-component .slick-arrow.prev{left:calc(50% + 20px - 60px)}
.g6-article-list-component .slick-arrow.next{left:calc(50% - 20px + 60px)}
.g6-article-list-component .slick-arrow:not(.slick-disabled){fill:#fff}
.g6-article-list-component .slick-arrow:not(.slick-disabled) circle,.g6-article-list-component .slick-arrow:not(.slick-disabled) path{stroke:#757575}
.g6-article-list-component .slick-arrow:not(.slick-disabled):hover{fill:#f2f2f2}
.g6-article-list-component .slick-arrow:not(.slick-disabled):focus circle,.g6-article-list-component .slick-arrow:not(.slick-disabled):focus path{stroke:#ccc}
.g6-article-list-component .slick-arrow.slick-disabled{fill:#fff}
.g6-article-list-component .slick-arrow.slick-disabled circle,.g6-article-list-component .slick-arrow.slick-disabled path{stroke:#ccc}
.g6-article-list-component ul.list-container{position:relative;z-index:1;justify-content:center;align-items:stretch}
.g6-article-list-component ul.list-container:not(.slick-initialized){display:flex}
@media(max-width:1220px){.g6-article-list-component ul.list-container:not(.slick-initialized){overflow:hidden}
}
@media(max-width:767px){.g6-article-list-component ul.list-container:not(.slick-initialized){overflow:unset}
}
@media(min-width:768px) and (max-width:1632px){.g6-article-list-component ul.list-container .slick-list{overflow:visible !important}
}
@media(max-width:1220px){.g6-article-list-component ul.list-container{justify-content:flex-start;padding-bottom:92px}
}
@media(max-width:767px){.g6-article-list-component ul.list-container{justify-content:center;flex-direction:column;gap:16px 0;padding-bottom:0 !important}
.g6-article-list-component ul.list-container li{margin-left:0 !important}
}
@media screen and (max-width:1632px){.g6-article-list-component ul.list-container.list-4{justify-content:flex-start;padding-bottom:92px}
}
@media screen and (max-width:1632px) and (max-width:767px){.g6-article-list-component ul.list-container.list-4{justify-content:center}
}
@media(max-width:767px){.g6-article-list-component ul.list-container.list-4 li{margin-left:0 !important}
}
.g6-article-list-component ul.list-container li{display:flex;flex-direction:column;flex-shrink:0;border-radius:32px;overflow:hidden;width:396px;text-decoration:none;transition:.3s;cursor:pointer}
@media(max-width:1220px){.g6-article-list-component ul.list-container li{border-radius:24px;transition:none}
}
@media(max-width:767px){.g6-article-list-component ul.list-container li{height:auto;width:100%;border-radius:12px}
}
.g6-article-list-component ul.list-container li+li{margin-left:16px}
.g6-article-list-component ul.list-container li.white{background-color:#fff}
.g6-article-list-component ul.list-container li.black{background-color:#1a1a1c}
.g6-article-list-component ul.list-container li:hover{transform:scale(1.04)}
@media(max-width:767px){.g6-article-list-component ul.list-container li:hover{transform:none}
}
.g6-article-list-component ul.list-container li .item-image-container{display:flex;align-items:center;height:220px;width:100%;overflow:hidden}
@media(max-width:767px){.g6-article-list-component ul.list-container li .item-image-container{height:186px}
}
.g6-article-list-component ul.list-container li .item-image-container img{width:100%;height:auto}
.g6-article-list-component ul.list-container li .item-text-container{flex-grow:1;height:auto;min-height:151px;max-height:280px;overflow:hidden;width:100%;padding:24px;text-align:left;display:flex;flex-direction:column;gap:24px}
.g6-article-list-component ul.list-container li .item-text-container p.g6-subtitle-md{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.g6-article-list-component ul.list-container li .item-text-container .item-button-container{flex-grow:1;display:flex;align-items:flex-end}
.g6-article-list-component ul.list-container li .item-text-container .item-button-container a{font-family:'Roboto';font-weight:500;font-size:16px;line-height:19px;margin:0}
.g6-article-list-component .slider-container{display:none;height:60px;width:100%;justify-content:center;align-items:center;margin-top:32px}
@media(max-width:1220px){.g6-article-list-component .slider-container{display:flex;gap:20px}
}
@media(max-width:767px){.g6-article-list-component .slider-container{display:none}
}
.g6-article-list-component .slider-container .slider-left,.g6-article-list-component .slider-container .slider-right{height:60px;width:60px}
.g6-article-list-component .slider-container .slider-left svg circle,.g6-article-list-component .slider-container .slider-right svg circle,.g6-article-list-component .slider-container .slider-left svg path,.g6-article-list-component .slider-container .slider-right svg path{stroke:#ccc}
.g6-article-list-component .slider-container .slider-left.active svg circle,.g6-article-list-component .slider-container .slider-right.active svg circle,.g6-article-list-component .slider-container .slider-left.active svg path,.g6-article-list-component .slider-container .slider-right.active svg path{stroke:#757575}
.g6-article-list-component.darkMode{background-color:#000}
.g6-article-list-component.darkMode .title-container .title{color:#fff}
.g6-article-list-component.darkMode .title-container .button{color:#b27aff !important}
.g6-article-list-component.darkMode .title-container .button::after{content:url("https://www.benq.com/etc/designs/g6/clientlib-site/img/g6/right-arrow-dark.svg")}
.g6-article-list-component.darkMode .slick-arrow:not(.slick-disabled){fill:unset}
.g6-article-list-component.darkMode .slick-arrow:not(.slick-disabled):hover{fill:#333}
.g6-article-list-component.darkMode .slick-arrow:not(.slick-disabled):active{fill:unset}
.g6-article-list-component.darkMode .slick-arrow:not(.slick-disabled):active circle,.g6-article-list-component.darkMode .slick-arrow:not(.slick-disabled):active path{stroke:#ccc}
.g6-article-list-component.darkMode .slick-arrow circle,.g6-article-list-component.darkMode .slick-arrow path{stroke:#757575}
.g6-article-list-component.darkMode .slick-arrow.slick-disabled{fill:unset;opacity:.5}