.el-popper[x-placement^=top] .popper__arrow,
.el-popper[x-placement^=bottom] .popper__arrow {
  display: none;
}
.banner {
  width: 100%;
  height: 4rem;
  position: relative;
}
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner .content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner .content h2 {
  font-weight: bold;
  font-size: 0.46rem;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}
.banner .content h3 {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 0.18rem;
  color: #FFFFFF;
}
.banner .content .searchTab {
  margin-bottom: 0.14rem;
}
.banner .content .searchTab .tabBox {
  margin-top: 0.56rem;
  margin-bottom: 0.23rem;
  display: flex;
  gap: 0.53rem;
}
.banner .content .searchTab .tabBox .el-tag {
  background-color: transparent;
  border-color: transparent;
  height: auto;
  padding: 0;
  font-weight: normal;
  font-size: 0.18rem;
  color: #FCFEFF;
  border-width: 0;
  border-style: solid;
  border-radius: 0;
  box-sizing: border-box;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.banner .content .searchTab .tabBox .el-tag.active {
  font-weight: bold;
}
.banner .content .searchTab .tabBox .el-tag.active::after {
  content: '';
  position: absolute;
  top: calc(100% + 0.04rem);
  left: 50%;
  transform: translateX(-50%);
  width: 0.46rem;
  height: 0.03rem;
  background: #FF2435;
  border-radius: 0.03rem;
}
.banner .content .searchTab .formBox {
  display: flex;
  align-items: center;
  gap: 0.24rem;
  position: relative;
  margin-bottom: 0.16rem;
}
.banner .content .searchTab .formBox .searchForm {
  display: flex;
  width: 7.96rem;
}
.banner .content .searchTab .formBox .searchForm > div {
  width: 100%;
  display: flex;
  background: #fff;
  position: relative;
}
.banner .content .searchTab .formBox .searchForm .el-input__inner,
.banner .content .searchTab .formBox .searchForm .el-button {
  height: 0.6rem;
  border: 0;
  border-radius: 0;
}
.banner .content .searchTab .formBox .searchForm .el-button {
  width: 1.16rem;
  background: #DD0F1F;
  font-size: .2rem;
}
.banner .content .searchTab .formBox .smallClassBtn {
  width: 1.56rem;
  height: 0.6rem;
  background: #0F57E2;
  font-weight: bold;
  font-size: 0.16rem;
  color: #FFFFFF;
}
.trademarklist {
  padding: 0.32rem 0 0.6rem;
  background: #F7F8FB;
}
.trademarklist .trademarkClass .top {
  display: flex;
  /*max-height: 2.58rem;*/
  background: #FFFFFF;
  border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
  border: 0.01rem solid #DBDBDB;
}
.trademarklist .trademarkClass .top .left {
  width: 1.36rem;
  background: #FAFAFA;
  border-radius: 0.04rem 0rem 0rem 0.04rem;
  font-weight: bold;
  font-size: 0.16rem;
  color: #333333;
  padding: 0.28rem 0.05rem;
  text-align: right;
  flex-shrink: 0;
}
.trademarklist .trademarkClass .top .list {
  display: flex;
  flex-wrap: wrap;
  padding: 0.3rem;
  gap: 0.12rem;
}
.trademarklist .trademarkClass .top .list .item {
  min-width: 1.1rem;
  height: 0.32rem;
  border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 0.16rem;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0 0.12rem;
  cursor: pointer;
}
.trademarklist .trademarkClass .top .list .item.active {
  background: #DD0F1F;
  color: #FFFFFF;
}
.trademarklist .trademarkClass .content {
  padding: 0.4rem;
  background: #FFFFFF;
  margin-top: 0.2rem;
}
.trademarklist .trademarkClass .content .text {
  margin-bottom: 0.57rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.32rem;
}
.trademarklist .trademarkClass .content .btt {
  padding: 0.41rem 0 0.48rem;
  border-top: 0.01rem solid #DD0F1F;
  display: flex;
  gap: 0.31rem;
}
.trademarklist .trademarkClass .content .btt .left {
  width: 3.8rem;
  /*height: 3.84rem;*/
  background: #FFFFFF;
  border: 0.01rem solid #E0E3E6;
  flex-shrink: 0;
}
.trademarklist .trademarkClass .content .btt .left .tit {
  height: 0.48rem;
  background: #E3E3E3;
  border: 0.01rem solid #E0E3E6;
  font-weight: bold;
  font-size: 0.2rem;
  color: #333333;
  padding: 0 0.2rem;
  line-height: 0.48rem;
}
.trademarklist .trademarkClass .content .btt .left .item {
  min-height: 0.56rem;
  background: #FFFFFF;
  padding: .1rem 0.2rem;
  /*line-height: 0.56rem;*/
  border: 0.01rem solid #E0E3E6;
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 0.18rem;
  color: #333333;
  cursor: pointer;
}
.trademarklist .trademarkClass .content .btt .left .item img {
  filter: grayscale(100%);
  width: 0.06rem;
  height: 0.12rem;
}
.trademarklist .trademarkClass .content .btt .left .item:hover {
  background: #F5F5F5;
}
.trademarklist .trademarkClass .content .btt .left .item.active {
  color: #EC1C24;
}
.trademarklist .trademarkClass .content .btt .left .item.active img {
  filter: grayscale(0%);
}
.trademarklist .trademarkClass .content .btt .right .tip {
  width: 9.08rem;
  min-height: 0.68rem;
  background: #FFE5E6;
  border-radius: 0rem 0rem 0rem 0rem;
  border: 0.01rem dotted #DD0F1F;
  margin-bottom: 0.37rem;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 0.16rem;
  color: #DD0F1F;
  padding: 0.23rem 0.32rem;
}
.trademarklist .trademarkEle {
  padding: 0.34rem 0.4rem 0.5rem;
  background: #FFFFFF;
}
.trademarklist .trademarkEle .item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 0.01rem solid #DDDDDD;
}
.trademarklist .trademarkEle .item.active {
  background: #F5F5F5;
}
.trademarklist .trademarkEle .item.active .child {
  display: flex;
}
.trademarklist .trademarkEle .item .title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
  padding: 0.16rem 0.24rem 0.23rem;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 0.18rem;
  color: #333333;
}
.trademarklist .trademarkEle .item .title img {
  filter: grayscale(100%);
  width: 0.06rem;
  height: 0.12rem;
}
.trademarklist .trademarkEle .item.active .title img{
    transform: rotate(90deg);
}
.trademarklist .trademarkEle .item .child {
  width: 100%;
  padding-left: 0.74rem;
  margin-bottom: 0.24rem;
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
  display: none;
  flex-wrap: wrap;
}
.trademarklist .trademarkEle .item .child.active .child3{
    display: block;
}
.trademarklist .trademarkEle .item .child>div{
    width: 100%;
}
.trademarklist .trademarkEle .item .child .child3{
    width: 100%;
    padding-left: .5rem;
    /*margin-bottom: .1rem;*/
    margin-top: .1rem;
    display: none;
}
.trademarklist .trademarkEle .item .child .child3:last-child{
    margin-bottom: .1rem;
}
.trademarklist .trademarkEle .item .child img {
  filter: grayscale(100%);
  width: 0.06rem;
  height: 0.12rem;
}
.trademarklist .trademarkEle .item .child.active >img{
    transform: rotate(90deg);
}
.trademarklist .industry {
  padding: 0.4rem;
  background: #FFFFFF;
}
.trademarklist .industry .item {
  display: flex;
  border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
  border: 0.01rem solid #DBDBDB;
  margin-bottom: 0.22rem;
}
.trademarklist .industry .item .left {
  width: 2.4rem;
  height: auto;
  background: #FAFAFA;
  border-radius: 0.04rem 0rem 0rem 0.04rem;
  border-right: 0.01rem solid #DBDBDB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trademarklist .industry .item .left img {
  width: 0.6rem;
  height: 0.6rem;
}
.trademarklist .industry .item .left span {
  width: 1rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.18rem;
  color: #333333;
}
.trademarklist .industry .item .right {
  width: 100%;
  padding: 0.16rem 0.24rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.trademarklist .industry .item .right .tit {
  line-height: 0.32rem;
  font-weight: bold;
  font-size: 0.16rem;
  color: #333333;
}
.trademarklist .industry .item .right .core,
.trademarklist .industry .item .right .association {
  display: flex;
}
.trademarklist .industry .item .right .core .list,
.trademarklist .industry .item .right .association .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}
.trademarklist .industry .item .right .core .list .it,
.trademarklist .industry .item .right .association .list .it {
  width: 1.05rem;
  height: 0.32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
  border: 0.01rem solid #DBDBDB;
}
.trademarklist .industry .content ul li {
  display: flex;
  align-items: center;
  gap: 0 0.1rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.32rem;
}
.trademarklist .industry .content ul li::before {
  content: '';
  width: 0.06rem;
  height: 0.06rem;
  background: #939393;
  border-radius: 50%;
}


@media only screen and (max-width: 1024px) {
  .banner{
    margin-top: 50px;
    height: 4.5rem;
  }
  .banner .content h3,.banner .content .searchTab .tabBox .el-tag,.el-input__inner,.banner .content .searchTab .formBox .searchForm .el-button span{
    font-size: 12px;
  }
  .banner .content .searchTab .formBox .searchForm{
    width: 100%;
  }
  .banner .content .searchTab .formBox .smallClassBtn{
    width: auto;
      padding: 0 0.2rem;
      margin-top: 0.1rem;
      font-size: 12px;
  }
  .banner .content .searchTab .formBox{
    display: block;
  }
  .trademarklist .main{
    width: 98%;
    margin: auto;
  }
  .trademarklist .trademarkClass .top{
    display: block;
  }
  .trademarklist .trademarkClass .top .left{
    text-align: left;
    width: 100%;
  }
  .trademarklist .trademarkClass .top .list .item{
    font-size: 12px;
    flex: 0 0 23.6%;
  }
  .trademarklist .trademarkClass .content .text,.trademarklist .trademarkClass .content .text p,.trademarklist .trademarkClass .content .btt .left .tit,.trademarklist .trademarkClass .content .btt .left .item,.trademarklist .trademarkClass .top .left,.trademarklist .trademarkClass .content .btt .right .tip p,.trademarklist .trademarkClass .content .text p{
    font-size: 12px;
  }
  .trademarklist .trademarkClass .content .btt{
    display: block;
  }
  .trademarklist .trademarkClass .content .btt .left{
    width: 100%;
  }
  .trademarklist .trademarkClass .content .btt .right .tip{
    width: 100%;
    margin-top: 0.2rem;
  }
  .trademarklist .trademarkEle .item .title,.trademarklist .trademarkEle .item .child span{
    font-size: 12px;
  }
  .trademarklist .industry .item .right .tit{
    flex: 0 0 34%;
  }
  .trademarklist .industry .item .right .tit,.trademarklist .industry .item .right .core .list .it, .trademarklist .industry .item .right .association .list .it,.trademarklist .industry .item .left span,.trademarklist .industry .content ul li{
    font-size: 12px;
  }
  .trademarklist .industry .item .right .core .list .it, .trademarklist .industry .item .right .association .list .it{
    width: 1.12rem;
    overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
 flex: 0 0 48%;
    height: auto;
    padding: 0.04rem;
  }
  .trademarklist .industry .item .right .core, .trademarklist .industry .item .right .association{
    display: block;
  }
}