body {

  overflow: hidden;
  overscroll-behavior: contain !important;

}


.my-drawer {

  position: fixed;
  top: 0;
  width: 100%;
  overscroll-behavior: contain !important;
  background-color: #FFFFFF;
  overflow-y: scroll;
  max-width: 7.7rem !important;
  margin: 0 auto;

}

.my-drawer::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ct::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.am-drawer {

  overflow: scroll;
  overscroll-behavior: contain !important;

}

.ct {

  overflow: scroll;
  overscroll-behavior: contain !important;
  padding-top: 1.05rem;

}

.ctfix {
  padding-top: 1.05rem;
  height: 100%;
  overflow: hidden;
}

.list {

  min-height: calc(101vh);
  background-color: #FFFFFF;
  max-width: 7.7rem !important;
  margin: 0 auto;

}

a, a:active, a:hover, a:visited {

  display: flex;
  text-decoration: none;
  color: #262626;

}

.empty-result {
  display: none;
}

.empty-ct {

  width: 100%;
  height: 4.16rem;
  max-width: 7.7rem !important;
  margin: 0 auto;
  
}

.empty-ct .empty-img{

  width: 3.45rem;
  height: 2.31rem;
  margin: 0.6rem 2.02rem 0.25rem;

}

.empty-ct .empty-title{

  font-size: 0.28rem;
  color: #8C8C8C;
  text-align: center;

}

div, a {
  box-sizing: border-box;
}

.menu-icon {
  position: fixed;
  z-index: 19;
  bottom: 20%;
  right: calc(100vw / 2 - 3.75rem + 0.4rem);
  width: 1.03rem !important;
  height: 1.03rem !important;
  border-radius: 55%;
  background-color: rgba(0, 0, 0, 0.45);
  
}

.menu-icon i {
  margin-top: 0.02rem !important;
  margin-right: 0.05rem !important;
  line-height: 1.03rem !important;
  font-size: 0.7rem !important;
  color: #FFFFFF !important;
  text-align: center;
}

/* header */

.header {
  width: 100%;
  color: #FFFFFF;
}
div[class^='header-color-'] {
  width: 100%;
  height: 1.10rem;
  padding: 0 0.4rem;
  box-sizing: border-box;
}

.header .btn-back {
  margin-left: 0.06rem;
  width: 0.20rem;
  height: 0.20rem;
  border-left: 0.05rem solid #FFFFFF;
  border-bottom: 0.05rem solid #FFFFFF;
  transform: rotate(45deg);
}
.header .more,.header .more:active, .header .more:hover, .header .more:visited {
  font-size: 0.28rem;
  color: #FFFFFF;
}

div[class^='header-bg-'] {
  width: 100%;
  height: 3.78rem;
  box-sizing: border-box;
  padding-top: 2.59rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.header div[class^='year-btn-'] {
  width: 1.92rem;
  height: 0.6rem;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 0.34rem;
}

.header div[class^='year-btn-'] .year {
  line-height: 0.62rem;
  font-size: 0.4rem;
  margin-right: 0.14rem;
}

.header div[class^='year-btn-'] i {
  line-height: 0.62rem;
  font-size: 10px;
  transform: scale(0.65) rotate(0deg);
  transition: all 0.2s ease-in;
}

.header div[class^='year-btn-'] i.active{
  transform: scale(0.65) rotate(180deg);
  transition: all 0.1s ease-in;
}

.header .desc-btn {
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  top: 1.62rem;
  left: 5.24rem;
}

/* filter */
.filter {
  width: 100%;
  height: 0.98rem;
  margin-top: 0.2rem;
  padding: 0 0.4rem;
}

.filterfix {
  position: fixed;
  z-index: 1;
  top: 1.05rem;
  /* left: 0; */
  width: 100%;
  max-width: 7.7rem;
  height: 0.98rem;
  padding: 0 0.4rem;
  background-color: #FFFFFF;
}

.filter-layout .filter-list::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
}

.filter-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.98rem;
}

.filter-layout .filter-list {
  flex: 1;
  flex-shrink: 0;
  height: 0.98rem;
  display: inline-flex;
  overflow-x: scroll;
  overflow-y: hidden;
}


.filter-layout .filter-list .cate-part {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.filter-layout .filter-list .cate-part:not(:last-child) {
  margin-right: 0.15rem;
}

.filter-layout .filter-list .cate-part .filter-item {
  display: inline-block;
  height: 0.58rem;
  line-height: 0.58rem;
  padding: 0 0.2rem;
  border-radius: 0.04rem;
  font-size: 0.28rem;
  box-shadow: 0rem 0rem 0.05rem 0rem #E7E7E7;
}

.filter-layout .filter-list .cate-part .filter-item:first-child {
  margin-left: 0.05rem;
}
.filter-layout .filter-list .cate-part .filter-item:not(:last-child) {
  margin-right: 0.2rem;
}
.filter-layout .filter-list .cate-part .filter-item:last-child {
  margin-right: 0.05rem;
}

.filter-layout .more-btn i{
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 10px;
  transform: scale(0.65) rotate(0deg);
  transition: all 0.1s ease-in;
}

.filter .active, .filterfix .active {
  color: #FFFFFF;
}

.filter-layout .more-btn i.activepop {
  transform: scale(0.65) rotate(180deg);
  transition: all 0.1s ease-in;
}


/* list */
.list {
  width: 100%;
  padding-left: 0.4rem;
  padding-bottom: 1.65rem;
}

.rank-item {
  display: block;
  width: 100%;
  padding: 0.3rem 0;
  padding-right: 0.4rem;
  border-bottom: 0.01rem solid #E7E7E7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rank-item .left {
  width: 0.54rem;
  height: 100%;
  margin-right: 0.25rem;
}

.rank-item .left .badge {
  width: 0.54rem;
  height: auto;
  margin: auto 0;
}

.rank-item .mid {
  flex: 1;
  overflow: hidden;
}

.rank-item div[class$='name'] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-item .cname {
  height: 0.32rem;
  font-size: 0.32rem;
  color: #262626;
  line-height: 0.32rem;
  margin-bottom: 0.1rem;
}

.rank-item .ename {
  height: 0.24rem;
  font-size: 0.24rem;
  color: #C5C5C5;
  line-height: 0.24rem;
}

.rank-item .right {
  min-width: 1.12rem;
  margin-left: 0.5rem;
  font-family: YouSheBiaoTiHei-2;
  font-size: 0.6rem;
  color: #C5C5C5;
  text-align: right;
}

.rank-item:nth-child(1) .right,
.rank-item:nth-child(2) .right,
.rank-item:nth-child(3) .right {
  color: #FF4D4F;
}

.rank-item .right span {
  display: inline-block;
  width: 0.46rem;
  text-align: right;
}

.rank-item.disable .mid,
.rank-item.disable .mid .cname,
.rank-item.disable .mid .ename {
  color: #c5c5c5;
}

/* pop-filter */
#pop-overlay {
  display: none;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* max-width: 7.7rem; */
  margin: 0 auto;
  background-color: #000000;
  opacity: 0.5;
  transition: all 0.2s ease-in;
  
}

#pop-major {
  position: fixed;
  z-index: 2001;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80vh;
  max-width: 7.7rem;
  overflow-y: auto;
  border-top-left-radius: 0.24rem;
  border-top-right-radius: 0.24rem;
  background-color: #FFFFFF;
  transform: translateY(80vh);
  transition: all 0.2s ease-in;
}

#pop-major::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
}

#pop-overlay.show {
  display: block;
  transition: all 0.2s ease-in;
}

#pop-major.show {
  transform: translateY(0);
  transition: all 0.2s ease-in;
}

#pop-major .head {
  width: 100%;
  height: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.35rem;
  border-bottom: 0.01rem solid #E7E7E7;
}

#pop-major .head .cancel, #pop-major .head .confirm {
  width: 0.7rem;
  height: 0.45rem;
  line-height: 0.5rem;
  font-size: 0.32rem;
  color: #8C8C8C;
}

#pop-major .head .title {
  height: 0.5rem;
  font-size: 0.36rem;
  font-weight: 700;
  color: #595959;
  line-height: 0.5rem;
}

#pop-major .content {
  width: 100%;
  height: calc(80vh - 1.05rem);
  padding: 0.35rem;
  overflow-y: auto;
}

#pop-major .content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#pop-major .content .cate-part:not(:last-child) {
  margin-bottom: 0.15rem;
}

#pop-major .content .cate-name {
  height: 0.45rem;
  font-size: 0.32rem;
  font-weight: 700;
  color: #262626;
  line-height: 0.45rem;
  margin-bottom: 0.2rem;
}

#pop-major .content .cate-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#pop-major .content .major-item {
  display: inline-block;
  flex-shrink: 0;
  width: calc(50% - 0.1rem);
  height: 0.8rem;
  margin-bottom: 0.2rem;
  border-radius: 0.08rem;
  border: 0.02rem solid #E7E7E7;
  font-size: 0.28rem;
  font-weight: 400;
  color: #262626;
  line-height: 0.8rem;
  text-align: center;
}

#pop-major .content .major-item.active {
  background: rgba(24, 144, 255, 0.15);
  border: 0.02rem solid #1890FF;
  color: #1890FF;
  font-weight: bold;
}

/* pop-desc */

#pop-desc {
  position: fixed;
  visibility: hidden;
  width: 6.1rem;
  z-index: 2001;
  padding: 0.4rem 0.4rem 0;
  border-radius: 0.12rem;
  background-color: #FFFFFF;
  display: none;
  overscroll-behavior: contain !important;
}

#pop-desc::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
}

#pop-desc.show {
  visibility: visible;
}

#pop-desc .title  {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.36rem;
  font-weight: bold;
  color: #262626;
  text-align: center;
}
#pop-desc .detail {
  max-height: 40vh;
  overflow: auto;
  margin: 0.2rem 0 0.4rem;
  line-height: 0.48rem;
  font-size: 0.32rem;
  color: #020E19;
  text-align: justify;
  word-break: break-all;
}

#pop-desc .detail::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
}

#pop-desc .confirm-btn {
  margin-left: -0.4rem;
  width: 6.1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.32rem;
  color: #1890FF;
  text-align: center;
  border-top: 0.01rem solid #E7E7E7;
}

.header-qs, .header-color-qs {background-color: #FC9D30;}
.header-usnews, .header-color-usnews {background-color: #004C98;}
.header-times, .header-color-times {background-color: #28272A;}
.header-guardian, .header-color-guardian {background-color: #001C30;}
.header-qantnet, .header-color-qantnet {background-color: #CBA984;}
.header-tfe, .header-color-tfe {background-color: #262626;}
.header-the, .header-color-the {background-color: #F5494C;}
.header-arwu, .header-color-arwu {background-color: #0273C1;}

.year-btn-qs {
  box-shadow: 0rem 0.06rem 0.11rem 0rem rgba(250, 101, 0, 0.54);
  color: #FA6500;
}
.year-btn-usnews {
  box-shadow: 0rem 0.06rem 0.11rem 0rem #003B75;
  color: #004C98;
}
.year-btn-times {
  box-shadow: 0rem 0.06rem 0.11rem 0rem rgba(46, 18, 0, 0.54);
  color: #AF8C66;
}
.year-btn-guardian {
  box-shadow: 0rem 0.06rem 0.11rem 0rem #002844;
  color: #002844;
}
.year-btn-qantnet {
  box-shadow: 0rem 0.06rem 0.12rem 0rem rgba(126, 88, 46, 0.5);
  color: #AF8C66;
}
.year-btn-tfe {
  color: #262626;
}
.year-btn-the {
  box-shadow: 0rem 0.06rem 0.11rem 0rem #B82023;
  color: #F5494C;
}
.year-btn-arwu {
  box-shadow: 0rem 0.06rem 0.11rem 0rem #005FA0;
  color: #0273C1;
}

.header-bg-list-qs {
  background-color: #FC9D30;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_qs.png');
}
.header-bg-list-usnews {
  background-color: #004C98;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_usnews3.png');
}
.header-bg-list-times {
  background-color: #28272A;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_times2.png');
}
.header-bg-list-guardian {
  background-color: #001C30;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_guardian2.png');
}
.header-bg-list-qantnet {
  background-color: #CBA984;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_qantnet2.png');
}
.header-bg-list-tfe {
  background-color: #262626;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_tfe2.png');
}
.header-bg-list-the {
  background-color: #F5494C;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_the.png');
}
.header-bg-list-arwu {
  background-color: #0273C1;
  background-image: url('https://info.compassedu.hk/mobile/default/header_list_arwu.png');
}

.header-bg-majr-qs {
  background-color: #FC9D30;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_qs.png');
}
.header-bg-majr-usnews {
  background-color: #004C98;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_usnews3.png');
}
.header-bg-majr-times {
  background-color: #28272A;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_times2.png');
}
.header-bg-majr-guardian {
  background-color: #001C30;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_guardian2.png');
}
.header-bg-majr-qantnet {
  background-color: #CBA984;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_qantnet2.png');
}
.header-bg-majr-tfe {
  background-color: #262626;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_tfe2.png');
}
.header-bg-majr-the {
  background-color: #F5494C;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_the.png');
}
.header-bg-majr-arwu {
  background-color: #0273C1;
  background-image: url('https://info.compassedu.hk/mobile/default/header_majr_arwu.png');
}

.filter-qs .active {background-color: #FC9D30;}
.filter-usnews .active {background-color: #004C98;}
.filter-times .active {background-color: #E8C298;}
.filter-guardian .active {background-color: #005591;}
.filter-qantnet .active {background-color: #E8C298;}
.filter-tfe .active {background-color: #595959;}
.filter-the .active {background-color: #F5494C;}
.filter-arwu .active {background-color: #0273C1;}
.filter-cug .active {background-color: #062C52;}