.hero-panel{margin-top: 15px;}
.hero-panel .hero-panel-top{overflow: hidden;background-color: #fff;}
.hero-panel .hero-panel-top ul{overflow: hidden; margin: 20px 10px 0 10px;padding: 0;}
.hero-panel .hero-panel-top ul li{width: 90px; float: left; margin: 0 14px 12px 14px; overflow: hidden; list-style: none; }
.hero-panel .hero-panel-top ul li a{display: block;}
.hero-panel .hero-panel-top ul li a img{display: block; margin: 0px auto; width: 90px; height: 90px; border-radius: 14px;}
.hero-panel .hero-panel-top ul li a p{display: block; width: 90px; height: 36px; line-height: 36px; text-align: center; font-size: 15px; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;margin: 0;}
.hero-panel .hero-panel-bottom{background-color: #ffffff;}
.hero-panel .hero-panel-bottom ul{overflow: hidden; margin: 0px 20px 10px 20px;padding: 0;padding-top: 8px;}
.hero-panel .hero-panel-bottom ul li{overflow: hidden; height: 25px; position: relative; padding: 0 0px 0 0px; margin: 0 0 15px 0;}
.hero-panel .hero-panel-bottom ul li .bgcolor1 { background-color: #f60; border-left-color: #F94E3F; }
.hero-panel .hero-panel-bottom ul li .bgcolor2 { background-color: #3e96f9; border-left-color: #3e96f9; }
.hero-panel .hero-panel-bottom ul li .bgcolor3 { background-color: #49c124; border-left-color: #49c124; }
.hero-panel .hero-panel-bottom ul li em { float: left; line-height: 25px; width: 70px; height: 25px; color: #fff; text-align: center; font-size: 15px; position: relative; border-radius: 4px; font-style: normal; }
.hero-panel .hero-panel-bottom ul li em:after { content: ''; position: absolute; top: 26%; right: -11px; border: 6px solid transparent; border-left-color: red; }
.hero-panel .hero-panel-bottom ul li em.bgcolor1:after { border-left-color: #f60; }
.hero-panel .hero-panel-bottom ul li em.bgcolor2:after { border-left-color: #60A9FC; }
.hero-panel .hero-panel-bottom ul li em.bgcolor3:after { border-left-color: #49c124; }
.hero-panel .hero-panel-bottom ul li a { padding: 0 0px 0 20px; display: inline-block; overflow: hidden; color: #333; height: 25px; line-height: 25px; position: relative; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.hero-panel .hero-panel-bottom ul li a:hover { color: #f60; }
.hero-panel .hero-panel-bottom ul li a.color1 { color: #3e96f9 }
.hero-panel .hero-panel-bottom ul li a.color2 { color: red; }
.hero-panel .hero-panel-bottom ul li a.color4 { color: #49c124; }
.hero-panel .hero-panel-bottom ul li a.color6 { color: #f60 }

.banner-switch-panel{margin-top: 15px;}
.banner-switch-panel .container{display: flex;}
.banner-switch-panel .new-list{width: 320px;background-color: #ffffff;flex: 0 0 320px;max-width: 320px;}
.banner-switch-panel .new-list .titleWrap{display: flex;align-items: center;justify-content: space-between;overflow: hidden;border-bottom: 1px solid #eee;}
.banner-switch-panel .new-list .titleWrap .title{height: 25px; line-height: 25px; font-size: 22px; border-left: 3px solid #ff6600; padding-left: 8px; margin: 18px 19px 18px 19px; float: left;}
.banner-switch-panel .new-list .titleWrap .title span{color: #ff6600;}
.banner-switch-panel .new-list .titleWrap .switch-btn{font-size: 15px; color: #333; float: right; line-height: 25px; width: 70px; height: 25px; border-radius: 4px; text-align: center; margin: 0 15px 0 0; cursor: pointer;}
.banner-switch-panel .new-list ul{overflow: hidden; margin: 4px 15px 4px 20px; display: none;padding: 0;}
.banner-switch-panel .new-list ul li{overflow: hidden; border-bottom: 1px dotted #ebebeb;list-style: none;}
.banner-switch-panel .new-list ul li:last-child{border-bottom: none;}
.banner-switch-panel .new-list ul li a{height: 90px; margin: 0px 0px 0px 0px; padding: 15px 0px 15px 105px; display: block; position: relative;}
.banner-switch-panel .new-list ul i { position: absolute; left: 0px; top: 15px; width: 90px; height: 90px; display: block; }
.banner-switch-panel .new-list ul i img { width: 90px; height: 90px; border-radius: 14px; }
.banner-switch-panel .new-list ul strong { display: block; width: 183px; height: 30px; line-height: 30px; font-size: 15px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; }
.banner-switch-panel .new-list ul p { font-size: 12px; color: #666; width: 183px; height: 23px; line-height: 23px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.banner-switch-panel .new-list ul span { color: #666; font-size: 12px; height: 23px; line-height: 23px; display: block; margin: 5px 0px; }
.banner-switch-panel .new-list ul a:hover strong { color: #f60 }
.banner-switch-panel .new-list ul li:last-of-type { border-bottom: 0px; }
.banner-switch-panel .new-list ul a:hover i img { opacity: 0.8 }
.banner-switch-panel .new-list ul a em { position: absolute; top: 47px; right: 0; background: #f5f5f5; color: #666666; text-align: center; height: 25px; line-height: 25px; display: block; margin: 0 auto; border-radius: 4px; width: 70px;font-style: normal;}
.banner-switch-panel .new-list ul a:hover em { color: #fff; background: #f60 }

.banner-list { overflow: hidden; width: 860px; height: 430px; position: relative; display: inline; float: right; }
.banner-list .tab-list { position: absolute; top: 0px; right: 0px; z-index: 99; background: url(../images/home/hdslide-nav.webp) repeat-y; width: 114px; transition: width 0.5s; }
.banner-list .tab-list:hover{ width: 240px!important; }
.banner-list .tab-list ul li { overflow: hidden; height: 107.5px; padding: 0px 0; opacity: 0.7 }
.banner-list .tab-list ul li a { display: block; height: 80px; padding: 0 15px; overflow: hidden; margin-top: 13.5px; }
.banner-list .tab-list ul li a img { border-radius: 12px; height: 80px; width: 80px; margin-right: 15px; float: left; }
.banner-list .tab-list ul li a em { display: block; height: 26px; line-height: 26px; font-size: 15px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.banner-list .tab-list ul li a span { margin-top: 4px; display: block; height: 22px; line-height: 22px; font-size: 12px; overflow: hidden; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.banner-list .tab-list ul li.active { background: url(../images/home/rgba50.webp); opacity: 1; filter: alpha(opacity=100); border-right: 4px solid #f60; }
.banner-imager-list { width: 860px; height: 430px; overflow: hidden; }
.banner-imager-list ul li { position: relative; overflow: hidden; width: 860px; height: 430px; }
.banner-imager-list ul li p { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; line-height: 40px; background: url(../images/home/des_bg.webp); }
.banner-imager-list ul li p strong { color: #fff; font-weight: normal; padding-left: 20px; width: 390px; display: block; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.banner-imager-list ul li img { width: 860px; height: 430px; }

.item-tab-listing{margin-top: 15px;background-color: #ffffff;width: 1200px;margin: 15px auto 0;}
.item-tab-listing .titleWrap{overflow: hidden; border-bottom: 1px solid #eee;}
.item-tab-listing .titleWrap .title{height: 25px; line-height: 25px; font-size: 22px; border-left: 3px solid #ff6600; padding-left: 8px; margin: 18px 19px 18px 19px; float: left;}
.item-tab-listing .titleWrap .title span{color: #ff6600;}
.item-tab-listing .titleWrap .tab-list{display: inline;float: left; margin: 20px 0px 0px 50px;}
.item-tab-listing .titleWrap .tab-list li{font-size: 15px; float: left; line-height: 25px; width: 70px; height: 25px; border-radius: 4px; text-align: center; margin: 0 8px 0 0; cursor: pointer;list-style: none;}
.item-tab-listing .titleWrap .tab-list li.active{background: #f60; color: #fff;}
.item-tab-listing .titleWrap .moreBtn{float: right; font-size: 14px; color: #999; line-height: 60px; padding-right: 15px;}
.item-tab-listing .titleWrap .moreBtn:hover{color: #f60;}
.item-tab-listing .tab-content{overflow: hidden;margin-bottom: 20px;margin-left: 15px;}
.item-tab-listing .tab-content li { float: left; width: 108px; margin-bottom: 0px; margin: 0px 10px 0 0px; position: relative; list-style: none; }
.item-tab-listing .tab-content li img { width: 90px; height: 90px; border-radius: 14px; margin: 25px auto 0; display: block; }
.item-tab-listing .tab-content li p { width: 108px; font-size: 15px; color: #333; height: 25px; line-height: 25px; text-align: center; overflow: hidden; display: block; margin: 10px auto 2px; }
.item-tab-listing .tab-content li span { font-size: 12px; color: #999; height: 26px; line-height: 26px; text-align: center; overflow: hidden; display: block; white-space: nowrap; }
.item-tab-listing .tab-content li em { display: none; width: 70px; height: 25px; line-height: 25px; font-size: 14px; background: #f60; color: #fff; text-align: center; cursor: pointer; border-radius: 4px; position: absolute; bottom: 0px; left: 50%; margin-left: -35px; }
.item-tab-listing .tab-content li:hover em { background: #f60; color: #fff; }
.item-tab-listing .tab-content li:hover p { color: #f60 }
.item-tab-listing .tab-content li:hover em { display: block; }
.item-tab-listing .tab-content li:hover img { opacity: 0.8 }

.hot-topic-panel{margin-top: 15px;background-color: #ffffff;width: 1200px;margin: 15px auto 0;}
.hot-topic-panel .titleWrap{overflow: hidden; border-bottom: 1px solid #eee;}
.hot-topic-panel .titleWrap .title{height: 25px; line-height: 25px; font-size: 22px; border-left: 3px solid #ff6600; padding-left: 8px; margin: 18px 19px 18px 19px; float: left;}
.hot-topic-panel .titleWrap .title span{color: #ff6600;}
.hot-topic-panel .titleWrap .tab-list{display: inline;float: left; margin: 20px 0px 0px 50px;}
.hot-topic-panel .titleWrap .tab-list li{font-size: 15px; float: left; line-height: 25px; width: 70px; height: 25px; border-radius: 4px; text-align: center; margin: 0 8px 0 0; cursor: pointer;list-style: none;}
.hot-topic-panel .titleWrap .tab-list li.active{background: #f60; color: #fff;}
.hot-topic-panel .titleWrap .moreBtn{float: right; font-size: 14px; color: #999; line-height: 60px; padding-right: 15px;}
.hot-topic-panel .titleWrap .moreBtn:hover{color: #f60;}
.hot-topic-panel .topic-list{overflow: hidden;}
.hot-topic-panel .topic-list ul{overflow: hidden; margin: 20px 0 22px 0;}
.hot-topic-panel .topic-list ul li{float: left; width: 275px; overflow: hidden; margin: 0 0 0 20px;}
.hot-topic-panel .topic-list ul li > a{width: 275px; height: 138px; display: block; position: relative; border-radius: 4px; overflow: hidden;}
.hot-topic-panel .topic-list ul li > a img{border-radius: 4px; width: 275px; height: 138px;}
.hot-topic-panel .topic-list ul li > a span{display: block; position: absolute; left: 0; bottom: 0; color: #fff; font-size: 15px; text-align: center; z-index: 10; width: 246px; height: 35px; line-height: 35px; white-space: nowrap; text-overflow: ellipsis; padding: 0px 15px; background-color: rgba(0,0,0,0.5);}
.hot-topic-panel .topic-list .bottomList{margin-top: 15px;overflow: hidden; margin-left: 1px;}
.hot-topic-panel .topic-list .bottomList p{width: 91px; float: left;}
.hot-topic-panel .topic-list .bottomList p a{width: 70px; display: block; margin: 0 auto;}
.hot-topic-panel .topic-list .bottomList p a img{border-radius: 14px; width: 70px; height: 70px;}
.hot-topic-panel .topic-list .bottomList p a span{height: 25px; line-height: 25px; overflow: hidden; color: #333; display: block; margin: 8px 0; text-align: center;}
.hot-topic-panel .topic-list .bottomList p a em { background: #f60; color: #fff; text-align: center; height: 25px; line-height: 25px; display: block; margin: 0 auto; border-radius: 4px; width: 70px; }
.hot-topic-panel .topic-list .bottomList p a:hover em { background: #f50; }
.hot-topic-panel .topic-list .bottomList p a:hover span { color: #f60; }
.hot-topic-panel .topic-list .bottomList p a:hover img { opacity: 0.8 }

.ranking-panel{margin-top: 15px;width: 1200px;margin: 15px auto 0;display: flex ; justify-content: space-between;}
.ranking-panel .rank-block{width: 390px; overflow: hidden;background-color: #ffffff;}
.ranking-panel .rank-block .titleWrap{overflow: hidden; border-bottom: 1px solid #eee;}
.ranking-panel .rank-block .titleWrap .title{height: 25px; line-height: 25px; font-size: 22px; border-left: 3px solid #ff6600; padding-left: 8px; margin: 18px 19px 18px 19px; float: left;}
.ranking-panel .rank-block .titleWrap .title span{color: #ff6600;}
.ranking-panel .rank-block ul{display: block; width: 350px; margin: 20px auto 5px; overflow: hidden;}
.ranking-panel .rank-block ul li{width: 100%; display: block; float: left; padding-bottom: 20px; }
.ranking-panel .rank-block ul li.active{display: block!important;}
.ranking-panel .rank-block ul li > span{display: block; float: left; width: 22px; height: 22px; background: #f2f2f2; color: #666; text-align: center; line-height: 22px; font-size: 12px; margin-right: 12px; border-radius: 2px;}
.ranking-panel .rank-block ul li.active span{height: 50px; line-height: 50px; margin-top: 14px; }
.ranking-panel .rank-block ul li > span.rank1 { background: #ff5555; color: #fff; }
.ranking-panel .rank-block ul li > span.rank2 { background: #ff6600; color: #fff; }
.ranking-panel .rank-block ul li > span.rank3 { background: #ff9900; color: #fff; }
.ranking-panel .rank-block ul li .wrap{display: block; float: left; width: 255px; height: 22px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; color: #333;}
.ranking-panel .rank-block ul li.active .wrap, .ranking-panel .rank-block ul li.active .size{display: none;}
.ranking-panel .rank-block ul li .size{width: 55px; line-height: 22px; text-align: right; font-size: 12px; color: #666; height: 22px; overflow: hidden; white-space: nowrap; margin-right: 4px;float: right;}
.ranking-panel .rank-block ul li .detailWrap{display: none; width: 315px; height: 90px;float: left;}
.ranking-panel .rank-block ul li.active .detailWrap{display: block;}
.ranking-panel .rank-block ul li .icon{width: 90px; height: 90px; overflow: hidden; border-radius: 14px; margin-right: 12px;float: left;}
.ranking-panel .rank-block ul li .icon img{width: 90px; height: 90px; border-radius: 14px;}
.ranking-panel .rank-block ul li .name p{display: block; float: left; width: 210px; height: 30px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; font-weight: bold; color: #333;}
.ranking-panel .rank-block ul li .infoWrap{width: 140px; height: 40px; line-height: 20px; color: #666; font-size: 12px; margin-top: 8px;float: left;}
.ranking-panel .rank-block ul li .infoWrap p img{height: 14px; width: auto; display: block; margin-bottom: 8px;}
.ranking-panel .rank-block ul li .downloadBtn{width: 70px; text-align: center; height: 25px; line-height: 25px; background: #f5f5f5; color: #666666; font-size: 14px; border-radius: 4px; margin-top: 12px;float: right;}
.ranking-panel .rank-block ul li .downloadBtn:hover{background: #f60; color: #fff;}
.ranking-panel .rank-block ul li .name p:hover{color: #ff7700;}

.new-update-panel{margin-top: 15px;background-color: #ffffff;width: 1200px;margin: 15px auto 0;}
.new-update-panel .titleWrap{overflow: hidden; border-bottom: 1px solid #eee;}
.new-update-panel .titleWrap .title{height: 25px; line-height: 25px; font-size: 22px; border-left: 3px solid #ff6600; padding-left: 8px; margin: 18px 19px 18px 19px; float: left;}
.new-update-panel .titleWrap .title span{color: #ff6600;}
.new-update-panel .titleWrap .moreBtn{float: right; font-size: 14px; color: #999; line-height: 60px; padding-right: 15px;}
.new-update-panel .titleWrap .moreBtn:hover{color: #f60;}
.new-update-panel .update-list{overflow: hidden;}
.new-update-panel .update-list ul{padding: 0;overflow: hidden; margin: 10px 0px; }
.new-update-panel .update-list ul li{float: left; width: 366px; height: 40px; line-height: 40px; margin: 0 0px 0 25px; overflow: hidden; font-size: 15px;list-style: none;}
.new-update-panel .update-list ul li > em{float: right; font-size: 13px;color: red;}
.new-update-panel .update-list ul li a{width: 285px; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis;}
.new-update-panel .update-list ul li a:hover{color: #f60;}
.new-update-panel .update-list ul li a span{padding-right: 10px; color: #999;}

.friendship-link-panel{margin-top: 15px;background-color: #ffffff;width: 1200px;margin: 15px auto 0;}
.friendship-link-panel .titleWrap{overflow: hidden; border-bottom: 1px solid #eee;}
.friendship-link-panel .titleWrap .title{height: 25px; line-height: 25px; font-size: 22px; border-left: 3px solid #ff6600; padding-left: 8px; margin: 18px 19px 18px 19px; float: left;}
.friendship-link-panel .titleWrap .title span{color: #ff6600;}
.friendship-link-panel .friendship-link-list{overflow: hidden; padding: 25px 20px 15px 20px;}
.friendship-link-panel .friendship-link-list a{display: block; float: left; color: #333; margin-right: 22px; overflow: hidden; margin-bottom: 10px; font-size: 15px; }
.friendship-link-panel .friendship-link-list a:hover { color: #f60 }