.banners {
	width: 100%;
    max-width: 545px;
    position: relative;
    aspect-ratio: 545 / 645;
}
.large_box{
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
    position: relative;
}
.large_box img {
    max-width: 100%;
    height: auto;
	display: inline-block;
}
.large_box ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.large_box li {
    font-size: 0;
    text-align: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    display: flex;
}

.large_box li:not(.on):not(.active) {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}
.large_box li video,
.large_box li img {
	display: block;
	width: 100%;
	height: auto;
}


.small_box {
    display: flex;
    align-items: center;
	width: 100%;
    height: 98px;
    overflow:hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: rgba(255,255,255,0.6);
}


.small_list{
	position: relative;
	height: 98px;
	flex: 1;
	min-width: 0;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
    scrollbar-width: none; 
}
.small_list::-webkit-scrollbar {
    display: none; 
}
.small_list li {
	position: relative;
	flex-shrink: 0;
	width: 98px;
	height: 98px;
	margin: 0;
	padding: 2px;
	border: 2px solid #f2f2f2;
	box-sizing: border-box;
	cursor: pointer;
}
.small_list li video,
.small_list li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.small_list li.on{
    border-color: #35b257;
}

.small_box .btn {
    position: relative;
    z-index: 2;
	display: block;
	line-height: 5;
	border-radius: 0;
	height:98px;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	background-color: #ddd;
    color: #333;
    flex-shrink: 0;
}
.small_box .btn:hover{
    background-color: #35b257;
    color: #fff;
}


@media (max-width: 995.98px) {
    .banners {
        max-width: 100% !important;
        aspect-ratio: auto !important; 
    }
    .large_box {
        aspect-ratio: 1 / 1;
    }
  
    .small_box {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        height: 64px;
        margin-top: 8px;
        background: transparent;
    }
    .small_list {
        height: 64px;
    }
    .small_list li {
        width: 50px !important;
        height: 50px !important;
        padding: 2px;
        border-width: 2px;
    }
}


@media (max-width: 575.98px) {
    .small_list li {
        width: 46px !important;
        height: 46px !important;
        padding: 1px;
        border-width: 2px;
    }
    .small_box {
        height: 56px;
    }
    .small_list {
        height: 56px;
    }
}


@media (max-width: 995.98px) {
    .extm,
    .overlayElement,
    .loadingElement {
        display: none !important;
    }
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
}