.idx-ad{
	background-color:#f7f7f7;
	background-image: url(/uploads/banner/index_ad_bg.jpg);
    background-position: top center;
	font-size:0px;
	
}
.idx-ad > div{
	display: grid;
    padding-top: 5%;
    padding-bottom: 8%;
	grid-template-columns: calc( 33% - 10px ) calc( 24% - 10px ) calc( 42% - 10px );
	grid-template-columns: calc( 32% - 10px ) calc( 25% - 10px ) calc( 42% - 10px );
    grid-gap: 15px;
    margin: auto;
    justify-content: center;
}
/*
.idx-ad > div > div{
	display: inline-block;
	font-size:0px;
	vertical-align: top;

}
*/
.promo1{
	background-color:#a60000;
}
.promo2{
	background-color:unset;
}
.promo1 img, .promo2 img{
	width:100%; 
}
.promo-vdo{
	flex-grow: 1;
	background-color:#000000;
}
.promo-vdo iframe{
	width:100%;
	height:100%;
}
.idx-hotsearch{ 
	padding:120px 0px;
	background-color:#E7E7E7 ;
}
.idx-hotsearch ul{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap:15px;
	list-style-type:none;
	padding:0px;
	margin: 0px 0px 80px 0px;
	
}
.idx-hotsearch ul li{
	background-color:#ffffff;
	border-radius:15px;
	padding:0px;
	margin:0px;
	padding: 0px;
	text-align:center;
	position:relative;
}
.idx-hotsearch ul li a{
	    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    display: block;
    height: 100%;
}
.idx-hotsearch ul li:before{
	margin-bottom:30%;
	width:100%;
	content: '';
	display: block;
}
.idx-hotsearch ul li img{
	max-height:100%;
	padding: 15px;
}
.divHotSearch{
	overflow: hidden;
	transition: 1s; 
	margin-bottom:80px;
}
.idx-hotsearch ul:not(.showAll) li:nth-child(n+13) {
   display:none;
}
.sliderLoadingbar{	
	height: 10px;
    width: 1px;
    display: block;
    background-color: var(--color2);
    position: absolute;
    bottom: 0px;
    z-index: 2;
} 
.sliderLoadingbar.setload{
	transition: width 5s ease-out;
}
.sliderLoadingbar.setload.onload{
	width:100%;
}
.promo2:before {
		top: 0px;
		left: 0px;
		margin-bottom: 100%;
		content: '';
		width: 100%;
		display: block;
		vertical-align: top;
	}
	.promo-items{
		position:relative;
	}
	.promo-item{
		position:absolute;
	 top: 0px;
	 width:100%;
	}
	.promo1 img{
	
	}
	.promo-item:not(:first-child){
		display:none;
	}
.divHotSearch li div{
	display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: calc( 100% - 20px );
    margin: auto;
    font-size: 20px;
    line-height: 26px;
}
@media only screen and (max-width:1024px) {
	.bannerinfo{
		position:unset;
		padding:60px 0px;
	}
	.bannerinfo .bdesc{
		color:#000000;
		text-shadow:unset;
		width:100%;
	}
	.swiper-pagination{
		display:none;
	}
	.sliderLoadingbar{
		display: block;
		width: 100% !important;
	}
	.idx-ad{
		    background-size: cover;
	}
	.idx-ad > div{
		    grid-template-columns: calc( 52% - 10px ) calc( 41% - 12px );
			grid-gap: 22px;
	}
	.idx-ad a{
		    display: flex;
    height: 100%;
	}
	.promo-vdo{
		grid-column: 1 / span 2;
		position: relative;
		
	}
	.promo-vdo:before{
		content: '';
		font-size: 14px;
		width: 100%;
		display: block;
		padding-top: 56.25%;
	}
	.promo-vdo iframe{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.idx-hotsearch{
		padding: 50px 0px;
	}
	.idx-hotsearch ul {
		grid-template-columns: repeat(2, 1fr);
	}
	.divHotSearch{
		margin-bottom:30px;
	}
	
}
@media only screen and (max-width:480px) {
	.pagebanner img{
		width: auto;
		height: 50vh;
		max-width: 100vw;
		object-fit: cover;
		object-position: center center;
	}
	.bannerinfo{
		padding: 30px 0px 40px 0px;
	}
	.bannerinfo .btitle{
		font-size: 16px;
		line-height: 28px;
	}
	.bannerinfo .bdesc{
		font-size:22px;
		line-height:28px;
	}
	.idx-ad > div{
		grid-template-columns: 100%;
		width: calc( 100% - 80px );
		padding-top: 40px;
		padding-bottom: 60px;
	}
	.promo-vdo{
		    grid-column: unset;
	}
	.idx-hotsearch ul{
		    grid-gap: 5px;
	}
	.idx-hotsearch ul li{
		/*
		padding-top:30px;
		padding-bottom:30px;
		*/
	}
	.idx-hotsearch ul li img{
		padding:10px;
	}
	.idx-ad a{
		height:unset;
		display:block;
	}
	
	
}