.banner {
  position: relative;
}

.banner img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.banner .text {
  position: absolute;
  left: 0;
  top: 14.5833333333vw;
  width: 100%;
  text-align: center;
  color: white;
}

.banner .text .t {
  line-height: 1.65;
  font-weight: 700;
  margin-bottom: 0.78125vw;
}

.container .sec1 {
  background: #222;
  padding: 4.8958333333vw 5.2083333333vw 2.34375vw 5.2083333333vw;
  color: white;
  text-align: center;
}

.container .sec1 .p1 {
  font-weight: 500;
}

.container .sec1 .types {
  display: flex;
  justify-content: center;
  gap: 1.3541666667vw;
  padding: 2.7083333333vw 0 3.1770833333vw 0;
  border-bottom: 1px solid #fff;
}

.container .sec1 .types .item {
  width: 16.875vw;
  height: 10.9375vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3020833333vw;
  position: relative;
  padding-right: 1.5625vw;
  z-index: 5;
  cursor: pointer;
  transition: all 600ms;
}

.container .sec1 .types .item::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/borbg.svg) no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: all 600ms;
  z-index: -1;
}

.container .sec1 .types .item::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/border.svg) no-repeat;
  background-size: 100% 100%;
  transition: all 600ms;
  z-index: -1;
}

.container .sec1 .types .item .icon {
  width: 5.2083333333vw;
  height: 5.2083333333vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .sec1 .types .item .icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.container .sec1 .types .item.on {
  font-weight: 700;
}

.container .sec1 .types .item.on::before {
  opacity: 1;
}

.container .sec1 .results {
  margin-top: 2.2916666667vw;
  display: flex;
  justify-content: center;
}

.container .sec1 .results p {
  padding: 0.78125vw 1.4583333333vw 0.8333333333vw 1.4583333333vw;
  background: #ED1B24;
}

.container .sec2 {
  padding: 2.65625vw 5.2083333333vw 4.6875vw 5.2083333333vw;
  background:#F3F3F3 ;
}

.container .sec2 .t {
  text-align: center;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 2.6041666667vw;
}

.container .sec2 .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.7083333333vw;
}

.container .sec2 .list a {
  display: block;
  width: 100%;
  background: #fff;
  position: relative;
  padding: 2.65625vw 1.5625vw 1.5625vw 1.5625vw;
}

.container .sec2 .list a .brc {
  position: absolute;
  right: 0.3645833333vw;
  top: 0;
  width: 7.03125vw;
  display: block;
}

.container .sec2 .list a .name {
  font-weight: 700;
}

.container .sec2 .list a .en {
  font-style: italic;
  margin: 0.4166666667vw 0 2.1875vw 0;
  opacity: .2;
  font-weight: 700;
  text-transform: uppercase;
}

.container .sec2 .list a .pic {
  width: 100%;
  height: 13.4375vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.container .sec2 .list a .pic img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  transition: all 600ms;
}

.container .sec2 .list a .tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.6041666667vw;
}

.container .sec2 .list a .tags .num {
  background: #ED1B24;
  color: #fff;
  padding: 2px 0.5208333333vw 3px 0.5208333333vw;
}

.container .sec2 .list a .tags .more {
  display: flex;
  align-items: center;
  color: #666;
  line-height: 1.5;
  gap: 0.3125vw;
}

.container .sec2 .list a .tags .more svg {
  display: block;
  width: 1.3541666667vw;
  margin-top: 2px;
}

.container .sec2 .list a:hover .pic img {
  transform: scale(1.05);
}

@media screen and (max-width: 768px) {
  .banner {
    margin-top: 60px;
  }

  .banner img {
    height: 200px;
  }

  .banner .text {
    top: 50%;
    transform: translateY(-50%);
    padding: 0 5%;
  }

  .banner .text .t {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .container .sec1 {
    padding: 20px 5%;
  }

  .container .sec1 .types {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
  }

  .container .sec1 .types .item {
    width: 100%;
    height: auto;
    min-height: 150px;
    padding-right: 20px;
    gap: 20px;
  }

  .container .sec1 .types .item .icon {
    width: 60px;
    height: 60px;
  }

  .container .sec1 .types .item::before,
  .container .sec1 .types .item::after {
    background-position: center;
  }

  .container .sec1 .results {
    margin-top: 20px;
    flex-direction: column;
    gap: 20px;
    padding: 0 20%;
  }

  .container .sec1 .results p,
  .container .sec1 .results a {
    padding: 12px 20px 13px 20px;
    justify-content: center;
    gap: 8px;
  }

  .container .sec1 .results p img,
  .container .sec1 .results a img {
    width: 20px;
  }

  .container .sec2 {
    padding: 40px 5%;
  }

  .container .sec2 .t {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .container .sec2 .list {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  .container .sec2 .list a {
    padding: 20px;
  }

  .container .sec2 .list a .brc {
    width: 100px;
    right: 5px;
  }

  .container .sec2 .list a .en {
    margin: 8px 0 20px 0;
  }

  .container .sec2 .list a .pic {
    height: 180px;
  }

  .container .sec2 .list a .tags {
    margin-top: 30px;
    gap: 10px;
  }

  .container .sec2 .list a .tags .num {
    padding: 2px 8px 3px 8px;
  }

  .container .sec2 .list a .tags .more {
    gap: 6px;
  }

  .container .sec2 .list a .tags .more svg {
    width: 20px;
  }
}

@media screen and (max-width: 768px) and (max-width: 480px) {
  .container .sec2 .sec2 .list {
    grid-template-columns: 1fr;
  }
}