@media screen and (max-width: 1024px) {
  .brand_main {
    width: 100%;
  }


  /* --------list-box.css start----------*/
  .list-box {
    width: 100%;
    height: calc(24rem * 0.16);
    /* background: radial-gradient(56.85% 44.26% at 50% 59.97%, #FF6565 0%, #DE1515 100%); */
    background-image: url(../images/brand/bg3.jpg);
    background-size: cover;
    box-sizing: border-box;
    padding-top: calc(1.25rem * 0.16);
    position: relative;
    background-position-x: center;
    background-position-y: -0.45rem;
    background-repeat: no-repeat;
  }

  .list-box-top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .list-box-top>p {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    width: calc(3.75rem * 0.16);
    height: calc(1.4375rem * 0.16);
    line-height: calc(1.4375rem * 0.16);
    font-size: calc(0.75rem * 0.16);
    text-align: center;
    color: #FFFFFF;
    background: #F0BC89;
    border-radius: calc(0.75rem * 0.16) 0 0 calc(0.75rem * 0.16);
  }

  .list-box-top>p:focus,
  .list-box-top>p:active,
  .list-box-top>p:visited,
  .list-box-top>p:hover {
    color: #FFFFFF;
  }

  .list-box-title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .list-box-title>svg {
    font-size: calc(3.4375rem * 0.16);
  }

  .list-box-title>div {
    /* height: calc(3.4375rem * 0.16); */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-evenly; */
  }

  .list-box-title h3 {
    font-size: calc(1.4375rem * 0.16);
    color: #F8F2BB;
    margin: calc(0.3125rem*0.16) 0 calc(0.5rem*0.16) 0;
  }

  .list-box-title p {
    color: #F8F2BB;
    font-size: calc(0.8125rem * 0.16);
  }

  .top-tabBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94%;
    height: calc(2.1875rem * 0.16);
    margin: calc(1.25rem * 0.16) auto;
    background: rgba(255, 255, 255, 0.2);
    border-radius: calc(3.125rem * 0.16);
    overflow: hidden;
  }

  .top-tabBar li {
    width: calc(5.3125rem * 0.16);
    text-align: center;
    height: calc(2.1875rem * 0.16);
    line-height: calc(2.1875rem * 0.16);
    border-radius: calc(3.125rem * 0.16);
    color: rgba(255, 255, 255, 1);
    font-size: 0.16rem;
  }

  .top-tabBar .barChosing {
    background: rgba(255, 255, 255, 1);
    color: #A80E28;
  }

  .top-three-box {
    width: 100%;
    position: absolute;
    bottom: calc(3.25rem * 0.16);
  }

  .sentiment .top-three-box {
    width: 100%;
    position: absolute;
    bottom: calc(2.1875rem * 0.16);
  }

  .topThree {
    width: 94%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .topThree>div {
    width: calc(6.875rem * 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .topThree>.top1 {
    width: calc(8.125rem * 0.16);
  }

  .topThree .top-dedail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(0.3125rem * 0.16);
  }

  .topThree img {
    width: calc(3.4375rem * 0.16);
  }

  .topThree .top2-img,
  .topThree .top3-img {
    width: calc(5.625rem * 0.16);
    height: calc(3.4375rem * 0.16);
    border: 1px solid #F0F0F0;
    margin: calc(0.375rem * 0.16) 0 calc(1.25rem * 0.16) 0;
    border-radius: 5px;
  }

  .topThree .top1-img {
    width: calc(6.5625rem * 0.16);
    height: calc(4.0625rem * 0.16);
    border-radius: 5px;
    margin: calc(0.375rem * 0.16) 0 calc(2.5rem * 0.16) 0;
    border: 1px solid #F0F0F0;
  }

  .sentiment .topThree .top2-img,
  .sentiment .topThree .top3-img {
    margin: calc(0.375rem * 0.16) 0 calc(1.25rem * 0.16) 0;
  }

  .sentiment .topThree .top1-img {
    margin: calc(0.375rem * 0.16) 0 calc(2.5rem * 0.16) 0;
  }

  .sentiment .topThree .compnay {
    margin: calc(0.3125rem * 0.16) 0;
  }

  .topThree .compnay {
    display: block;
    font-size: calc(0.75rem * 0.16);
    text-align: center;
    max-width: calc(5.625rem*0.16);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin: calc(0.3125rem * 0.16) 0;
    overflow: hidden;
  }

  .topThree p {
    color: #FFFFFF;
  }

  .topThree .voteNum {
    font-size: calc(0.5625rem * 0.16);
    display: flex;
    align-items: center;
  }

  .vote {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: calc(3.4375rem * 0.16);
    height: calc(1.25rem * 0.16);
    line-height: calc(1.25rem * 0.16);
    text-align: center;
    background: #A80E28;
    border-radius: calc(3.125rem * 0.16);
    font-size: calc(0.75rem * 0.16);
    color: #FFFFFF;
  }

  .vote:active,
  .vote:focus,
  .vote:visited,
  .vote:hover {
    color: #FFFFFF;
    outline: none;
  }

  .vote>span {
    font-size: 0.5625rem;
    margin-left: 0.1875rem;
  }

  /* ----list-content.css.start---- */
  .list-content1,
  .list-content2 {
    width: 100%;
    /* background: linear-gradient(#A80E28 10px, #FFFFFF calc(10rem * 0.16)); */
    background: url("../images/bg4_m.jpg") no-repeat;
    background-size: 100% auto;
    margin-top: -0.1rem;
  }

  .list-content1 .bd,
  .list-content2 .bd {
    width: 94%;
    margin: 0 auto;
  }

  .bd>:first-child .company {
    /* color: #FFFFFF; */
  }

  .bd li {
    width: 100%;
    /* height: 6.875rem; */
    /* line-height: 8.375rem; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    padding: calc(.625rem * 0.16) 0;
    box-sizing: content-box;
  }


  .company_main_msg {
    display: flex;
    align-items: center;
  }

  .company_main_describe {
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: calc(.75rem * 0.16);
    line-height: calc(1.25rem * 0.16);
  }

  /* 2020-12-24-- */
  .bd li:first-child {
    /* border-bottom: 1px solid rgb(231, 177, 177); */
  }

  .bd>li>svg {
    font-size: calc(1.75rem * 0.16);
    margin-right: calc(0.3125rem * 0.16);
  }

  .bdImg img {
    width: calc(6.25rem * 0.16);
    height: calc(3.84375rem * 0.16);
    border-radius: calc(0.3125rem * 0.16);
    border: 1px solid #F0F0F0;
    object-fit: contain;
    background: #fff;
  }

  .bdMsg {
    width: calc(12.5625rem * 0.16);
    display: flex;
    flex-direction: column;
    margin-left: calc(0.625rem * 0.16);
  }

  .companyNam,
  .company {
    width: calc(12.5625rem * 0.16);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .companyNam {
    /* font-size: calc(1.125rem * 0.16); */
    font-size: 0.15rem;
    /* font-weight: bold; */
    line-height: calc(1.65625rem * 0.16);
    color: rgba(64, 64, 64, 1);
    opacity: 1;
  }

  .company {
    font-size: calc(0.75rem * 0.16);
    line-height: calc(1.03125rem * 0.16);
    color: rgba(205, 205, 205, 1);
    opacity: 1;
    margin-top: calc(0.3125rem * 0.16);
    background: url("../images/icon_hot2_active_m.png") no-repeat;
    background-size: 0.12rem auto;
    background-position: left center;
    padding-left: 0.15rem;
  }

  .sLogo {
    height: calc(2.5rem * 0.16);
    display: flex;
    align-items: center;
  }

  .sLogo>div {
    display: flex;
    margin-right: calc(0.625rem * 0.16);
  }

  .sLogo>div>a {
    display: flex;
    align-items: center;
  }

  .sLogo span {
    display: block;
    height: calc(0.875rem * 0.16);
    font-size: calc(0.625rem * 0.16);
    line-height: calc(0.875rem * 0.16);
    color: rgba(51, 51, 51, 1);
    opacity: 1;
  }

  .sLogo .noChose {
    color: #999999;
  }

  .sLogo svg {
    font-size: calc(1.125rem * 0.16);
    margin-right: calc(0.125rem * 0.16);
  }

  .xiangqing>a>svg {
    font-size: calc(3.125rem * 0.16);
  }

  .xiangqing>a {
    display: block;
    height: calc(1.875rem * 0.16);
  }

  .xiangqing {
    height: calc(1.875rem * 0.16);
    width: calc(3.125rem * 0.16);
    position: relative;
  }

  .xiangqing svg {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(1.875rem * 0.16);
  }

  .sLogo_div svg {
    margin-right: calc(0.125rem * 0.16);
  }

  .nums {
    width: calc(1.75rem * 0.16);
    height: calc(1.75rem * 0.16);
    font-size: calc(0.75rem * 0.16);
    line-height: calc(1.75rem * 0.16);
    margin-right: calc(0.3125rem * 0.16);
    text-align: center;
    border-radius: 50%;
    color: #E09F4D;
    background: #FFF0C2;
  }

  .list-content2 .sLogo_div {
    height: calc(1.875rem * 0.16);
    display: flex;
    align-items: center;
    font-size: calc(0.75rem * 0.16);
    color: #404040;
  }

  .list-content2 .sLogo>div {
    margin-right: 0;
  }

  .list-content2 .sLogo_div>span {
    color: #A80E28;
  }

  .list-content2 .sLogo {
    justify-content: space-between;
  }

  /* ----list-content.css.end---- */

  /* ------top.css start------- */




  /* -----matLike.css start----- */
  .mayLike {
    width: 100%;
    margin-top: calc(2.5rem * 0.16);
  }

  .likeTitle {
    width: 100%;
    height: calc(3.125rem * 0.16);
  }

  .likeTitle>h3 {
    text-align: center;
    height: calc(1.84375rem * 0.16);
    font-size: calc(1.3125rem * 0.16);
    margin: 0 auto;
    line-height: calc(1.3125rem * 0.16);
    color: rgba(51, 51, 51, 1);
    opacity: 1;
  }

  .likeTitle>span {
    display: block;
    width: calc(1.25rem * 0.16);
    height: calc(0.25rem * 0.16);
    margin: 0 auto;
    background: rgba(236, 25, 37, 1);
    opacity: 1;
    margin-top: calc(0.625rem * 0.16);
  }

  .mayLikeList {
    width: 94%;
    margin: 0 auto;
  }

  .mayLikeList li {
    height: calc(6.25rem * 0.16);
    padding: 0 calc(0.625rem * 0.16);
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    align-items: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px calc(0.3125rem*0.16) calc(0.46875rem*0.16) rgba(102, 102, 102, 0.1);
    opacity: 1;
    border-radius: calc(0.3125rem * 0.16);
    margin-bottom: calc(0.625rem * 0.16);
  }

  .mayLikeList li>a {
    margin-right: calc(1.25rem * 0.16);
  }

  .mayLikeList img {
    width: calc(6.25rem * 0.16);
    height: calc(3.84375rem * 0.16);
    border: 1px solid #F0F0F0;
    object-fit: contain;
    background: #fff;
  }

  .mayLikeRight {
    width: 66%;
    height: calc(3.75rem * 0.16);
    line-height: calc(3.75rem * 0.16);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .mayLikeRight>div {
    width: 68.1%;
    height: 100%;
  }

  .mayLikeRight>div>a {
    width: 100%;
    height: calc(3.125rem * 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .mayLikeRight h3 {
    width: 100%;
    height: calc(1.40625rem * 0.16);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.16rem;
    line-height: calc(1.40625rem * 0.16);
    color: rgba(68, 68, 68, 1);
    opacity: 1;
  }

  .mayLikeRight span {
    width: 100%;
    height: calc(1.125rem * 0.16);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(0.75rem * 0.16);
    line-height: calc(1.125rem * 0.16);
    color: rgba(205, 205, 205, 1);
    opacity: 1;
    background: url("../images/icon_hot2_active_m.png") no-repeat;
    background-size: 0.12rem auto;
    background-position: left center;
    padding-left: 0.15rem;
  }

  .mayLikeList .xq {
    width: calc(3.75rem * 0.16);
    height: calc(1.5625rem * 0.16);
    line-height: calc(1.5625rem * 0.16);
    font-size: calc(0.75rem * 0.16);
    color: rgba(255, 255, 255, 1);
    text-align: center;
    background: linear-gradient(130deg, #A80E28 0%, rgba(255, 106, 0, 1) 100%);
    box-shadow: 0px calc(0.125rem * 0.16) calc(0.3125rem*0.16) rgba(255, 28, 14, 0.3);
    opacity: 1;
    border-radius: calc(3.125rem * 0.16);
    -webkit-border-radius: calc(3.125rem * 0.16);
    -moz-border-radius: calc(3.125rem * 0.16);
    -ms-border-radius: calc(3.125rem * 0.16);
    -o-border-radius: calc(3.125rem * 0.16);
  }

  /* -----matLike.css end----- */

  .check_more {
    display: block;
    width: 1.24rem;
    height: .42rem;
    margin: .1rem auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: .04rem;
    line-height: .42rem;
    text-align: center;
    color: #999999;
    font-size: .16rem;
    -webkit-border-radius: .04rem;
    -moz-border-radius: .04rem;
    -ms-border-radius: .04rem;
    -o-border-radius: .04rem;
  }

}