.hero-panel-slider{margin-top: 1.5rem;}
.hero-panel-slider .swiper-slide{width: 13.5rem;transition: transform 0.3s ease, width 0.3s ease;}
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active{width: 42rem;}
.hero-panel-slider .swiper-slide a{max-height: 23.5rem;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a > img{max-height: 23.5rem;width: 100%;object-position: inherit;transition: transform 0.3s ease, width 0.3s ease;filter: grayscale(0.8);}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap{width: 0;overflow: hidden;transition: transform 0.3s ease, width 0.3s ease;}
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active a .bottomWrap{width: calc(100% - 4rem);}
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active a > img{width: 100%;opacity: 1;filter: unset;}
.hero-panel-slider .swiper-wrapper{margin-left: -14.2rem;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .overlay{background: #FFFFFF40; }
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active a .overlay{background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.59%, #000000 100%);}

.hot-category-list{margin-top: 4rem;padding: 0 2rem;}
.hot-category-list .swiper-slide a{border-radius: 1rem;box-shadow: 0px 2px 4px 0px #11135B26;height: 8.5rem;position: relative;overflow: hidden;display: block;}
.hot-category-list .swiper-slide a p{font-size: 1.5rem;color: #ffffff;font-weight: 700;padding: 1rem;position: absolute;top: 0;left: 0;z-index: 1;}
.hot-category-list .swiper-slide a.rpg{background: linear-gradient(283deg, rgba(229, 57, 53, 0.25) 0%, rgba(229, 57, 53, 0.75) 100%); }
.hot-category-list .swiper-slide a.action{background: linear-gradient(283deg, rgba(251, 140, 0, 0.25) 0%, rgba(149, 83, 0, 0.75) 100%); }
.hot-category-list .swiper-slide a.fighting{background: linear-gradient(283deg, rgba(142, 36, 170, 0.25) 0%, rgba(57, 14, 68, 0.75) 100%); }
.hot-category-list .swiper-slide a.racing{background: linear-gradient(283deg, rgba(253, 216, 53, 0.25) 0%, rgba(151, 129, 32, 0.75) 100%); }
.hot-category-list .swiper-slide a.sport{background: linear-gradient(283deg, rgba(30, 136, 229, 0.25) 0%, rgba(17, 75, 127, 0.75) 100%); }
.hot-category-list .swiper-slide a.puzzle{background: linear-gradient(283deg, rgba(67, 160, 71, 0.25) 0%, rgba(24, 58, 26, 0.75) 100%); }
.hot-category-list .swiper-slide a.rpg::after {content: 'swords'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #E5393540;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.action::after {content: 'altitude'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #FB8C0040;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.fighting::after {content: 'sports_mma'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #8E24AA40;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.racing::after {content: 'sports_motorsports'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #74662440;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.sport::after {content: 'sports_basketball'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #1E88E540;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.puzzle::after {content: 'extension'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #43A04740;bottom: 0;width: 9rem;height: 9rem;}

.hot-category-list .swiper-slide a.social{background: linear-gradient(283deg, rgba(156, 39, 176, 0.25) 0%, rgba(66, 16, 74, 0.75) 100%); }
.hot-category-list .swiper-slide a.music{background: linear-gradient(283deg, rgba(63, 81, 181, 0.25) 0%, rgba(27, 35, 79, 0.75) 100%); }
.hot-category-list .swiper-slide a.shopping{background: linear-gradient(283deg, rgba(240, 98, 146, 0.25) 0%, rgba(138, 56, 84, 0.75) 100%); }
.hot-category-list .swiper-slide a.budget{background: linear-gradient(103deg, rgba(46, 125, 50, 0.75) 0%, rgba(84, 227, 91, 0.25) 100%); }
.hot-category-list .swiper-slide a.travel{background: linear-gradient(283deg, rgba(253, 216, 53, 0.25) 0%, rgba(151, 129, 32, 0.75) 100%); }
.hot-category-list .swiper-slide a.social::after {content: 'diversity_3'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #9C27B040;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.music::after {content: 'piano'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #3F51B540;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.shopping::after {content: 'local_mall'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #F0629240;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.budget::after {content: 'savings'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #2E7D3240;bottom: 0;width: 9rem;height: 9rem;}
.hot-category-list .swiper-slide a.travel::after {content: 'travel'; font-family: 'Material Icons Fill'; position: absolute; right: 0;font-size: 9rem; color: #74662440;bottom: 0;width: 9rem;height: 9rem;}