* {
  margin: 0;
  padding: 0;
}
a{text-decoration: none;}
input, button,textarea {
  background: none;
  outline: none;
  border: 0px;
}
ul{list-style: none;}
body {
  background-color: #f8f8f8 !important;
  overflow:auto;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.page_home{display:flex;height: 100%;}
.side_nav{
  background: transparent;
  font-style: normal;
  font-size: 16px;
  color: #323335;
  transition: width .2s linear;
  word-break: keep-all;
 
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top:11%;
  position: fixed;
}
.side_menu a{padding:10px 8px;display: block;color:#323335;font-size:13px;margin:10px 0px;}
.side_menu a.active,.side_menu a:hover{color:#222;background:#fff;font-weight:600;border-radius:10px;
  background-image: linear-gradient(90deg,#b9d5ff,#fff);}
.page_content{width:90%;text-align:left;}

.home-search{padding-bottom: 20px;}
.home-content-body{display:flex;flex-wrap: wrap;}
#search{width:70%;margin:0 auto;}
#search form {
  position: relative;
   width: 62%;
    margin:0 auto;
}
#search-list-menu{
	margin-bottom:15px;
}

#search-text {
  border-radius: 50px;
  color: #222;
  border: 1px solid rgba(255,255,255,.05);
  padding:14px 0px;
  text-indent:20px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  height: 20px;
  font-size:16px;
  border: 0;
  background-color: #fff;
  transition: .3s;

}
#search-text:focus{
	border:1px solid #cabbe9;
}

.s-type {
  position: inherit;
  top: inherit;
  left: inherit;
  z-index: inherit;
  width: auto;
}

.s-type-list {
  position: relative !important;
  display: block;
  white-space: nowrap;
  text-align: center;
  position: inherit;
  top: inherit;
  padding: inherit;
  width: none;
  background: none !important;
  border-radius: inherit;
  box-shadow: none !important;
}
.s-type-list label.active span{
	color:#222 !important;
}

.s-type-list label {
 position: relative;
  display: inline-block;
  font-size: 15px;
  text-align: center;
  font-weight: normal;
  margin-bottom: 0;
  padding: 2px 0px;
  word-break: keep-all;
  cursor: pointer;
  transition: .3s;
}

.form-control {
  display: block;
 
 
  width:100%;
  font-size: 1rem;
  font-weight: 400;
 
  color: #495057;
 
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.s-type-list label span {
    padding: 10px 20px;
	color:#777;
  }

#search button {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: 0 !important;
  width: unset;
  height: unset;
  line-height:47px;
  border-radius: 3px;
  cursor:pointer;
  width:40px;
}

.col-xl-3 {
    -ms-flex: 0 0 9%;
    flex: 0 0 9%;
    max-width:9%;
  }
.col-xl-6{
	-ms-flex: 0 0 31.03%;
    flex: 0 0 31.03%;
    max-width:31.03%;
}
.col-xl-5{
	-ms-flex: 0 0 12%;
    flex: 0 0 12%;
    max-width:12%;
	margin-bottom:15px;
	//border:1px solid #0245a3;
	//border:1px solid #a2a8d3;
	position:relative;
	//box-shadow: 0px 0px 20px -5px rgba(158,158,158,.2);
}
.tag_free{
	position: absolute;
  right: 10px;
  top: 5px;
  color: #fff;
  font-size: 12px;
  border: 1px solid #fff;
  padding: 2px;
  border-radius: 6px;
}
.home-a{display:flex;align-items: center;transition:transform 0.5s;padding:5px;}

.home-body-content{align-items: center;}
.home-body-img{margin-right:4px;}
.home-nav-name{
	overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  word-break: break-all;
  font-size: .875rem;
  color: #333;
  font-weight:700;
}
.hot-rank-1 {
  color: #fff;
  background: #f1404b;
}
.hot-rank-2 {
  color: #fff;
  background: #c56831;
}
.hot-rank-3 {
  color: #fff;
 background: #b89e2c;
}
.hot-rank {
  width: 18px;
  border-radius: 4px;
   padding-bottom:3px;
  display: inline-block;
  text-align: center;
}
.img-width-20{width:15px !important;height:15px !important;}
.img-width-30{width:30px !important;height:30px !important;}
.home-nav-desc{
	overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  word-break: break-all;
  font-size: .75rem;
  color: #777;
  margin-top:8px;
}
  
  .url-card a.card {
  justify-content: center;
}
.card, .block {
  background: #fff;
  border-width: 0;
  margin-bottom: 1rem;
  box-shadow: 0px 0px 20px -5px rgba(158,158,158,.2);
  transition: background-color .3s;
}
.mb-4, .my-4 {
  margin-bottom: 1.5rem !important;
}
.ma{
	margin-top:20px;
}
.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
  border-radius: .25rem;
}
.home-content-row{display:flex;padding:10px 0;justify-content:center;}
.home-card{text-align:center;cursor:pointer;}
.home-card a{color:#000;}
.card-title{margin-top:10px;font-size:13px;}
.home-body-card:hover .home-nav-name{color:#3b6bff; transition: all 0.3s ease;}
.home-body-card{padding:5px;background:#fff;margin-right:10px;border-radius: 8px;}
.hot-title{display:flex;border-bottom:1px solid #EBEBEB;padding:10px 10px;}
.hot-time{display:flex;flex:1;justify-content: flex-end;align-items: center;font-size:12px;color:#666;}
.hot-title img{vertical-align:middle;width:30px;height:30px;border-radius:50%;margin-right:10px;}
.hot-body{height:330px;overflow:auto;}
.hot-channel{font-size:14px;}
.hot-body{padding:5px;}
.hot-body-row{display:flex;margin:13px 10px;}
.hot-num{margin-right:5px;}
.hot-body-title{width:70%;}
.hot-body-title a{color:#1A1A1A;font-size:13px;}
.hot-body-title a:hover{color:#3b82f6;}
.hot-body-hot{display:flex;flex:1;justify-content: flex-end;font-size:14px;color:#999;align-items: center;}
.hot-image{vertical-align:middle;margin-right:5px;width:35px;height:35px;border-radius:0px !important;}
.page_content img{
	width:45px;
	height:45px;
	border-radius:10px;
	border: 0;
  }
  

.weekly-list__base{background:#fff;width:85%;margin:0 auto;padding: 24px;
  border-radius: 12px;}

.weekly-header{
	font-weight: 600;
  font-size: 16px;
}
.weekly-content{padding:20px 0px;}
.weekly-tabs ul li a.active{
	color: #323335;
  font-weight: 700;
  position: relative;
}
.weekly-tabs ul li a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
  height: 2px;
  background-color: #2a55e5;
}
.weekly-tabs ul li a{
	color: #64666b;
	display: flex;
	padding: 8px 0;
  line-height: 24px;
}
.weekly-tabs ul li{
	display: inline-block;
 margin-right: 24px;
  font-size: 14px;
  line-height: 22px;
}

.weekly-detail{margin-top:25px;}

.weekly-list{
  display: grid;
  grid-template-columns: repeat(4,274px);
  gap: 24px 16px;
}

.card-list-item {
  width: 274px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.card-list-item .card-list-item__cover {
  width: 274px;
  height: 152px;
  cursor: pointer;
  object-fit: cover;
}

.card-list-item .card-list-item__type {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 6px;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  background-color: rgba(0,0,0,.5);
  border-radius: 8px 0;
}

.card-list-item .card-list-item__title {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  height:23px;
  padding: 9px 12px 12px;
  background: #fafafa;
  color: #323335;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-body {
    /* 设置溢出行为，使滚动条出现 */
   

    /* 针对Webkit内核的浏览器 */
    &::-webkit-scrollbar {
        /* 设置滚动条的宽度 */
        width: 8px;
    }

    /* 滚动条轨道 - 背景颜色/白底 */
    &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 10px;
    }

    /* 滚动条的滑块部分 */
    &::-webkit-scrollbar-thumb {
        background: rgba(144,147,153,.2);
        border-radius: 10px;
    }

    /* 当鼠标悬停在滚动条滑块上时改变颜色 */
    &::-webkit-scrollbar-thumb:hover {
        background: rgba(144,147,153,.4);
    }
}