.hero-panel-slider{position: relative;}
.hero-panel-slider .hero-banner-swiper{overflow: hidden; position: relative; margin: 10px 15px 15px 15px; border-radius: 4px; height: auto;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a{position: relative;height: 100%;display: block;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a p{height: 38px; display: block; position: absolute; bottom: 0; left: 0; line-height: 38px; background: url(../images/home/rgba50.webp); color: #fff; right: 0px; font-size: 15px; border-bottom-right-radius: 4px; width: auto; border-bottom-left-radius: 4px; padding: 0px 100px 0px 15px; overflow: hidden;}
.hero-panel-slider .swiper-pagination-bullet{display: inline-block; background: rgba(255, 255, 255, .5); width: 6px; height: 6px; border-radius: 10px; margin: 0px 2px;opacity: 1;}
.hero-panel-slider .swiper-pagination-bullet-active{width: 15px;}
.hero-panel-slider .hero-swiper-pagination{position: absolute;right: 30px;bottom: 11px;z-index: 1;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a img{height: 160px;object-fit: cover;object-position: center;width:100%;}

.banner-switch-panel{overflow: hidden;border-top: 10px solid #ececec;background-color: #ffffff;}
.banner-switch-panel ul{overflow: hidden; margin: 5px 0 15px 0; display: none; }
.banner-switch-panel ul li{position: relative; height: auto; background: #fff; overflow: hidden; margin: 15px 15px 0 15px; padding: 15px; background-color: #f9f9f9; border-radius: 8px;}
.banner-switch-panel ul li .detailWrap{position: relative; width: auto; height: auto; overflow: hidden;}
.banner-switch-panel ul li .imgWrap{float: left; width: 75px; height: 75px; border-radius: 14px; display: block; overflow: hidden;}
.banner-switch-panel ul li .imgWrap img{width: 75px; height: 75px; border-radius: 14px; display: block; overflow: hidden;}
.banner-switch-panel ul li .linkWrap{-webkit-box-flex: 1; display: block; overflow: hidden;}
.banner-switch-panel ul li .linkWrap > div{width: auto; height: auto; -webkit-box-flex: 1; padding: 0 0 0 15px; box-sizing: border-box; display: block; overflow: hidden;}
.banner-switch-panel ul li .linkWrap > div h4{height: 20px; line-height: 20px; font-size: 15px; font-weight: normal; color: #333; margin: 2px 0 0 0; display: block; overflow: hidden;padding-right: 70px; width: auto;}
.banner-switch-panel ul li .linkWrap > div span{display: block; height: 20px; margin: 8px 0 5px 0; line-height: 20px; color: #999; font-size: 12px;}
.banner-switch-panel ul li .linkWrap > div b{white-space: nowrap; width: 100%; height: 20px; line-height: 20px; font-size: 12px; font-weight: normal; color: #999; display: block; overflow: hidden;}
.banner-switch-panel ul li .downloadBtn{text-decoration: none; color: #f60; position: absolute; font-style: normal; top: 42px; right: 15px; border: 1px solid #f60; border-radius: 4px; display: block; height: 22px; line-height: 22px; font-size: 14px; text-align: center; width: 53px; background: #f60; color: #fff;}

.item-listing{background-color: #ffffff;overflow: hidden; border-top: 10px solid #ececec;}
.item-listing ul{width: 100%; height: auto; padding: 0 10px 15px 10px; box-sizing: border-box; display: block; overflow: hidden;}
.item-listing ul li{width: 25%; height: auto; margin: 22px 0px 0 0px; box-sizing: border-box; float: left; display: inline; overflow: hidden;}
.item-listing ul li a{margin: 0px auto; height: auto; display: block; overflow: hidden;}
.item-listing ul li a i{display: block;}
.item-listing ul li a i img{width: 75px; height: auto; border-radius: 14px; display: block; overflow: hidden; margin: 0 auto;}
.item-listing ul li a h4{width: 100%; height: 20px; line-height: 20px; font-size: 15px; font-weight: normal; color: #333; text-align: center; margin: 10px 0 5px 0; display: block; overflow: hidden;}
.item-listing ul li a p{font-size: 12px; color: #999; height: 20px; line-height: 20px; text-align: center; display: block;}

.hot-topic-panel{position: relative;background-color: #ffffff;overflow: hidden; border-top: 10px solid #ececec;}
.hot-topic-panel .hot-topic-swiper{overflow: hidden; position: relative; margin: 10px 15px 15px 15px; border-radius: 4px; height: auto;padding: 0px 0px 40px 0px; margin-top: 20px;}
.hot-topic-panel .hot-topic-swiper .swiper-slide a.imgBanner{width: 100%; height: auto; display: block; overflow: hidden; position: relative; border-radius: 4px;margin: 0 auto;}
.hot-topic-panel .hot-topic-swiper .swiper-slide a.imgBanner img{border-radius: 4px; width: 100%; height: auto; display: block; overflow: hidden; }
.hot-topic-panel .hot-topic-swiper .swiper-slide a.imgBanner h4{right: 0px;border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;padding: 0; width: 100%; height: 35px; line-height: 35px; font-size: 15px; font-weight: normal; color: #fff; text-align: center; background: rgba(0, 0, 0, .5); display: block; position: absolute; left: 0; bottom: 0; z-index: 10; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.hot-topic-panel .hot-topic-swiper .swiper-slide .itemList{overflow: hidden; margin: 20px 0 0 0;}
.hot-topic-panel .hot-topic-swiper .swiper-slide .itemList a{margin: 0 auto; position: relative; overflow: hidden;float: left; display: block; width: 33.333%;}
.hot-topic-panel .hot-topic-swiper .swiper-slide .itemList a img{width: 75px; height: 75px; border-radius: 12px; display: block; margin: 0px auto;}
.hot-topic-panel .hot-topic-swiper .swiper-slide .itemList a h4{display: block; height: 24px; line-height: 24px; overflow: hidden; font-size: 15px; color: #333; width: 75px; margin: 8px auto 0; white-space: normal;text-align: center;font-weight: normal;}
.hot-topic-panel .hot-topic-swiper .swiper-slide .itemList a .downloadBtn{text-decoration: none; position: relative; zoom: 1; margin: 5px auto 0; color: #f60; font-style: normal; border: 1px solid #f60; border-radius: 4px; display: block; height: 22px; line-height: 22px; font-size: 14px; text-align: center; width: 53px; background: #f60; color: #fff;}
.hot-topic-panel .hot-topic-pagination{position: absolute;left: 50%;transform: translateX(-50%);bottom: 5px;}
.hot-topic-panel .swiper-pagination-bullet{display: inline-block; background: #d9d9d9; width: 6px; height: 6px; border-radius: 10px; margin: 0px 2px;opacity: 1;}
.hot-topic-panel .swiper-pagination-bullet-active{width: 15px;background: #f60;}

.hot-ranking-panel{background-color: #ffffff;overflow: hidden; border-top: 10px solid #ececec;}
.hot-ranking-panel .titleWrap .rankTabs{font-size: 14px; position: absolute; right: 15px; top: 12px;    overflow: hidden; width: 195px; background: #f8f8f8; border-radius: 20px; margin: 0px auto 0;}
.hot-ranking-panel .titleWrap .rankTabs p{float: left; color: #999; width: 65px; font-size: 15px; text-align: center; line-height: 26px; height: 26px; border-radius: 20px; padding: 0; border-right: 0; }
.hot-ranking-panel .titleWrap .rankTabs p.active{background: linear-gradient(to right, #f60 0%, #ff973c 100%);color: #fff;}
.hot-ranking-panel .rankList{overflow: hidden; margin: 20px 15px 0px 15px; background-size: 100% 100%; display: none;}
.hot-ranking-panel .rankList.active{display: block !important;}
.hot-ranking-panel .rankList.bg1{background-image: url(../images/home/bj01.webp); background-repeat: no-repeat;}
.hot-ranking-panel .rankList.bg2{background-image: url(../images/home/bj03.webp); background-repeat: no-repeat;}
.hot-ranking-panel .rankList.bg3{background-image: url(../images/home/bj04.webp); background-repeat: no-repeat;}
.hot-ranking-panel .rankList .rankTitle{display: flex; justify-content: center; align-items: center; padding: 1.875rem 0 0.875rem 0;}
.hot-ranking-panel .rankList .rankTitle img{width: 2.75rem; height: .75rem;}
.hot-ranking-panel .rankList .rankTitle .rankText{font-size: 1.125rem; font-weight: bold; font-stretch: normal; letter-spacing: .0625rem; color: #ffffff; margin: 0 1.125rem;}
.hot-ranking-panel .rankList .topWrap{height: 160px; padding: 5px 15px 15px; overflow: hidden; border-bottom: 1px dashed #eaeaea;}
.hot-ranking-panel .rankList .topWrap li{width: 33%; float: left; margin-top: 10px;}
.hot-ranking-panel .rankList .topWrap li a{display: block; text-align: center;}
.hot-ranking-panel .rankList .topWrap li a .rankIcon{width: 100%; height: 25px; background: url(../images/home/no1.webp) no-repeat center; background-size: auto 24px; clear: both; display: block;}
.hot-ranking-panel .rankList .topWrap li.rank2 a .rankIcon{background: url(../images/home/no2.webp) no-repeat center;background-size: auto 24px;}
.hot-ranking-panel .rankList .topWrap li.rank3 a .rankIcon{background: url(../images/home/no3.webp) no-repeat center;background-size: auto 24px;}
.hot-ranking-panel .rankList .topWrap li a img{width: 70px; height: 70px; clear: both; border-radius: 20px;}
.hot-ranking-panel .rankList .topWrap li.rank1{margin-top: 0;}
.hot-ranking-panel .rankList .topWrap li.rank1 a img{border: 2px solid #fed52f; width: 80px; height: 80px;}
.hot-ranking-panel .rankList .topWrap li.rank2 a img{border: 2px solid #e2e2e2;}
.hot-ranking-panel .rankList .topWrap li.rank3 a img{border: 2px solid #c08a5b;}
.hot-ranking-panel .rankList .topWrap li a p{width: 100%; text-align: center; font-size: 15px; line-height: 34px; height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333;}
.hot-ranking-panel .rankList .topWrap li a span{width: 100%; text-align: center; font-size: 12px; color: #999; display: block;}
.hot-ranking-panel .rankList .rankListing{overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul{overflow: hidden; margin: 5px 0 15px 0;padding: 0;}
.hot-ranking-panel .rankList .rankListing ul li{position: relative; height: auto; background: none; overflow: hidden; margin: 15px 15px 0 15px; padding: 0; border-radius: 8px;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap{position: relative; width: auto; height: auto; overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .imgWrap{float: left; width: 75px; height: 75px; border-radius: 14px; display: block; overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .imgWrap img{width: 75px; height: 75px; border-radius: 14px; display: block; overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .linkWrap{-webkit-box-flex: 1; display: block; overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .linkWrap > div{width: auto; height: auto; -webkit-box-flex: 1; padding: 0 0 0 15px; box-sizing: border-box; display: block; overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .linkWrap > div h4{width: 100%; height: 20px; line-height: 20px; font-size: 15px; font-weight: normal; color: #333; margin: 2px 0 0 0; display: block; overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .linkWrap > div h4 strong{line-height: 20px; font-size: 16px; font-weight: bold; text-align: center; font-family: 'Roboto'; color: #333; padding-right: 10px;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .linkWrap > div i{display: block; height: 14px; margin: 9px 0 8px 0;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .linkWrap > div i img{width: auto; height: 14px; display: block; overflow: hidden;border-radius: 14px;}
.hot-ranking-panel .rankList .rankListing ul li .itemWrap .linkWrap > div span{white-space: nowrap; width: 100%; height: 20px; line-height: 20px; font-size: 12px; font-weight: normal; color: #999; display: block; overflow: hidden;}
.hot-ranking-panel .rankList .rankListing ul li .downloadBtn{text-decoration: none; color: #f60; position: absolute; font-style: normal; top: 26px; right: 0; border: 1px solid #f60; border-radius: 4px; display: block; height: 22px; line-height: 22px; font-size: 14px; text-align: center; width: 53px; background: #f60; color: #fff;}

.friendship-links-panel{background-color: #ffffff;overflow: hidden; border-top: 10px solid #ececec;}
.friendship-links-panel .friendship-links{width: 100%; height: auto; display: block; overflow: hidden; padding: 0 15px 20px 0; box-sizing: border-box; }
.friendship-links-panel .friendship-links a{width: auto; height: 16px; line-height: 16px; font-size: 15px; font-weight: normal; color: #333; padding: 0; background: none; float: left; margin: 20px 0 0 15px; display: inline; overflow: hidden;}