.container {
  padding: 6.35417vw 6.77083vw 5.05208vw 6.77083vw
}

.container .rec {
  display: flex;
  gap: 6.92708vw;
  margin-bottom: 5.9375vw
}

.container .rec .pic {
  width: 45.83333vw;
  overflow: hidden;
  position: relative
}

.container .rec .pic img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: all 600ms
}

.container .rec .pic .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer
}

.container .rec .pic .play img {
  width: 4.6875vw
}

.container .rec .text {
  width: 31.875vw;
  flex: 1;
  padding-top: 3.38542vw
}

.container .rec .text .pt {
  color: #986733;
  font-weight: 700;
  line-height: 1.3
}

.container .rec .text .tip {
  margin: .9375vw 0 1.77083vw 0;
  color: #4E4E50;
  line-height: 1.5
}

.container .rec .text .des {
  line-height: 1.5;
  color: #4E4E50;
  margin-right: .625vw
}

.container .rec .text .tag {
  display: flex;
  align-items: center;
  color: #4E4E50;
  position: relative;
  margin-top: 2.60417vw;
  padding-top: 2.60417vw
}

.container .rec .text .tag::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1.61458vw;
  height: .15625vw;
  background: #986733
}

.container .rec .text .tag span {
  width: 2px;
  height: .78125vw;
  background: #986733;
  margin: 0 .78125vw
}

.container .rec:hover .pic img {
  transform: scale(1.05)
}

.container .toggle {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.container .toggle .tabs {
  display: flex;
  gap: 1.61458vw
}

.container .toggle .tabs .item {
  position: relative;
  cursor: pointer
}

.container .toggle .tabs .item .t {
  padding: 0 0 .72917vw .67708vw;
  font-weight: 300
}

.container .toggle .tabs .item .t .cn {
  color: #4C4C4C;
  transition: all 600ms
}

.container .toggle .tabs .item .t .en {
  margin-top: .36458vw;
  color: #838383;
  font-size: .46875vw;
  text-transform: uppercase
}

.container .toggle .tabs .item img {
  width: 8.54167vw;
  display: block;
  opacity: 0;
  transition: all 600ms
}

.container .toggle .tabs .item.on .t .cn {
  color: #986733;
  font-weight: 500
}

.container .toggle .tabs .item.on img {
  opacity: 1
}

.container .toggle .search {
  width: 30.20833vw;
  height: 2.60417vw;
  border-radius: 4px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  position: relative;
  padding: .15625vw;
  padding-left: 1.51042vw;
  gap: .83333vw
}

.container .toggle .search .icon img {
  width: 1.25vw;
  display: block
}

.container .toggle .search input {
  width: 100%;
  flex: 1;
  font-size: 1.04167vw;
  border: none;
  outline: none;
  background: transparent
}

.container .toggle .search input::placeholder {
  color: #A1A1A1
}

.container .toggle .search .submit {
  position: absolute;
  right: .15625vw;
  top: .13021vw;
  width: 5.33333vw;
  height: 2.29167vw;
  border-radius: 2px;
  background: #986733;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer
}

.container .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5.625vw 2.29167vw;
  margin-top: 3.125vw
}

.container .list .item {
  display: block;
  width: 100%;
  border-bottom: 2px solid #D1D1D1;
  transition: all 600ms;
  cursor: pointer
}

.container .list .item .pic {
  overflow: hidden;
  position: relative
}

.container .list .item .pic img {
  width: 100%;
  display: block;
  height: 18.33333vw;
  object-fit: cover;
  transition: all 600ms
}

.container .list .item .pic .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer
}

.container .list .item .pic .play img {
  width: 3.64583vw;
  height: auto
}

.container .list .item .text {
  padding: 1.45833vw 0 1.14583vw 1.35417vw
}

.container .list .item .text .time {
  color: #986733
}

.container .list .item .text .pt {
  font-weight: 500
}

.container .list .item .text .pt p {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden
}

.container .list .item .text .des {
  margin: .625vw 0 1.5625vw 0;
  color: #4E4E50
}

.container .list .item .text .dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: .88542vw
}

.container .list .item .text .dt .line {
  width: 1.61458vw;
  height: .15625vw;
  background: #986733
}

.container .list .item .text .dt .tag {
  display: flex;
  align-items: center;
  color: #4E4E50
}

.container .list .item .text .dt .tag span {
  width: 2px;
  height: .78125vw;
  background: #986733;
  margin: 0 .78125vw
}

.container .list .item:hover {
  background: #F5EBE0;
  border-color: transparent
}

.container .list .item:hover .pic img {
  transform: scale(1.05)
}

.container .pager {
  display: flex;
  justify-content: center;
  gap: 1.19792vw;
  align-items: center;
  margin-top: 5vw
}

.container .pager .prev,
.container .pager .next {
  margin-top: 2px
}

.container .pager .prev svg,
.container .pager .next svg {
  display: block;
  width: 1.25vw
}

.container .pager .prev svg path,
.container .pager .next svg path {
  transition: all 600ms
}

.container .pager .prev svg:hover path,
.container .pager .next svg:hover path {
  stroke: #986733
}

.container .pager .nums {
  display: flex;
  gap: 1.19792vw
}

.container .pager .nums a {
  color: #000;
  font-weight: 300;
  line-height: 2;
  transition: all 600ms
}

.container .pager .nums a.on {
  color: #986733;
  font-weight: 900
}

@media screen and (max-width: 768px) {
  .container {
    padding: 40px 5% 40px 5%
  }

  .container .rec {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px
  }

  .container .rec .pic {
    width: 100%
  }

  .container .rec .pic .play img {
    width: 45px
  }

  .container .rec .text {
    width: 100%;
    padding-top: 0
  }

  .container .rec .text .pt {
    font-size: 20px
  }

  .container .rec .text .tip {
    margin: 15px 0;
    font-size: 14px
  }

  .container .rec .text .des {
    font-size: 14px;
    margin-right: 0
  }

  .container .rec .text .tag {
    margin-top: 20px;
    padding-top: 20px;
    font-size: 14px
  }

  .container .rec .text .tag::before {
    width: 20px;
    height: 2px
  }

  .container .toggle {
    flex-direction: column;
    gap: 10px
  }

  .container .toggle .tabs {
    gap: 20px;
    width: 100%;
    padding-bottom: 10px
  }

  .container .toggle .tabs .item .t {
    padding: 0 0 10px 10px
  }

  .container .toggle .tabs .item .t .en {
    font-size: 10px;
    margin-top: 5px
  }

  .container .toggle .tabs .item img {
    width: 120px
  }

  .container .toggle .search {
    width: 100%;
    height: 45px;
    padding-left: 15px;
    gap: 10px
  }

  .container .toggle .search .icon img {
    width: 20px
  }

  .container .toggle .search input {
    font-size: 16px
  }

  .container .toggle .search .submit {
    width: 55px;
    height: 38px;
    font-size: 14px;
    top: 2.5px;
    right: 2px
  }

  .container .list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px
  }

  .container .list .item .pic img {
    height: 225px
  }

  .container .list .item .pic .play img {
    width: 45px
  }

  .container .list .item .text {
    padding: 20px 20px 15px 20px
  }

  .container .list .item .text .time {
    font-size: 14px
  }

  .container .list .item .text .pt {
    font-size: 16px
  }

  .container .list .item .text .des {
    margin: 10px 0 20px 0;
    font-size: 14px
  }

  .container .list .item .text .dt {
    margin-right: 14px;
    font-size: 14px
  }

  .container .list .item .text .dt .line {
    width: 20px;
    height: 2px
  }

  .container .pager {
    gap: 15px;
    margin-top: 30px
  }

  .container .pager .prev svg,
  .container .pager .next svg {
    width: 20px
  }

  .container .pager .nums {
    gap: 15px
  }
}