:root {

}

:root[data-theme=dark]{

}

.gzl_container{ max-width: 630px; margin: 0 auto; padding: 52px 0 120px; }

.gzl_tbn_wrap{margin: 20px 0 30px;}
.swiper-container.gzl_tbn_container { }
.swiper-container.gzl_tbn_container .swiper-wrapper.gzl_tbn_wrapper{}
.swiper-container.gzl_tbn_container .swiper-wrapper.gzl_tbn_wrapper{}
.swiper-slide.gzl_tbn_slide { width: 80%; }
.gzl_tbn_item { position: relative; width: 100%; padding-bottom: 100%; border-radius: 20px; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--common_txt); }
.gzl_tbn_content { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: rgba(0,0,0,0.4); box-sizing: border-box; }
.gzl_tbn_content h3 { display: none; font-size: 16px; margin-bottom: 8px; font-weight: bold; }
.gzl_tbn_content p { display: none; font-size: 13px; margin-bottom: 12px; }
.gzl_tbn_btn { padding: 10px 25px; border-radius: 5px; background: #fff; color: #000; font-size: 16px; font-weight: bold; text-align: center; }


.gzl_bgb_wrap { margin-bottom: 40px; }
.gzl_bgb_title { color: var(--common_txt); font-size: 20px; font-weight: bold; margin-bottom: 16px; }
.gzl_bgb_title .hot { color: #EE280E; }
.gzl_bgb_container { width: 100%; }
.swiper-wrapper.gzl_bgb_wrapper{justify-content: unset;}
.swiper-slide.gzl_bgb_slide { width: 61%;}
.gzl_bgb_item { position: relative; width: 100%; padding-bottom: 40%; border-radius: 10px; overflow: hidden; }
.gzl_bgb_rank { position: absolute; top: 0; left: 20px; background: #fff; color: #000; font-weight: bold; width: 24px; font-size: 15px; padding: 6px 0 0; text-align: center; z-index: 10; text-align: center; line-height: 1.2; }
.gzl_bgb_rank::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 8px solid #fff; }
.gzl_bgb_rank.rank1 { background: gold; color: #000; }
.gzl_bgb_rank.rank1::after { border-top-color: gold; }
.gzl_bgb_rank.rank2 { background: silver; color: #000; }
.gzl_bgb_rank.rank2::after { border-top-color: silver; }
.gzl_bgb_rank.rank3 { background: #cd7f32; color: #fff; }
.gzl_bgb_rank.rank3::after { border-top-color: #cd7f32; }
.gzl_bgb_info { z-index: 10;position: absolute; bottom: 10px; left: 15px; color: #fff; }
.gzl_bgb_name { font-size: 13px; color: #fff; }
.gzl_bgb_thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; }






@media screen and (max-width:1400px) { }
@media screen and (max-width:1280px) { }
@media screen and (max-width:1166px) { }
@media screen and (max-width:1024px) { }


/* MOBILE */
@media screen and (max-width:768px) {
}

@media screen and (max-width:630px){
}

@media screen and (max-width:480px){
    .gzl_sm_pd{padding: 0 10px;}
    .gzl_tbn_content{padding-bottom: 15px;}
    .gzl_tbn_btn{padding: 5px 20px; font-size: 14px;}
}

@media screen and (max-width:360px) { }
@media screen and (max-width:280px) { }