[play-video] {
  cursor: pointer;
}
.csv {
  background-color: #f0f5f9;
  --color: #20af86;
}
.csv img {
  vertical-align: top;
}
.csv .csv-main {
  padding-left: 12.5vw;
  padding-right: 12.5vw;
}
.csv .pagination {
  margin: 3.65vw 0 0;
  text-align: center;
}
.csv .pagination span {
  height: 0.26vw;
  width: 5.21vw;
  border-radius: 0;
  background: #bfcad3;
  opacity: 1;
}
.csv .pagination span.swiper-pagination-bullet-active {
  background: var(--color);
}
.csv h2 {
  margin: 0;
  position: relative;
  font-size: 2.08vw;
  padding-bottom: 1.35vw;
  text-align: center;
  font-weight: bold;
}
.csv h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3.12vw;
  height: 0.16vw;
  background-color: #20af86;
  transform: translateX(-50%);
}
.csv .banner img {
  width: 100%;
}
.csv .news {
  margin: 3.12vw auto 5.73vw;
}
.csv .news > div {
  margin-top: 2.34vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2.34vw;
}
.csv .news > div .news-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.csv .news > div .news-item:hover {
  box-shadow: 0.26vw 0.26vw 0.52vw rgba(0, 0, 0, 0.2);
}
.csv .news > div .news-item:hover a {
  background-color: var(--color);
  color: #fff;
}
.csv .news > div .news-item img {
  width: 100%;
}
.csv .news > div .news-item > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.82vw 1.04vw;
}
.csv .news > div .news-item > div p {
  font-size: 0.83vw;
}
.csv .news > div .news-item > div > a {
  display: inline-block;
  width: 7.81vw;
  line-height: 2.24vw;
  border: 1px solid var(--color);
  text-align: center;
  font-size: 0.94vw;
  color: var(--color);
}
.csv .activity {
  margin-top: 4.17vw;
}
.csv .activity > div {
  margin: 3.12vw 0 4.17vw;
}
.csv .activity > div .swiper-slide {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.csv .activity > div .swiper-slide .activity-item {
  position: relative;
}
.csv .activity > div .swiper-slide .activity-item:hover > div {
  display: flex;
}
.csv .activity > div .swiper-slide .activity-item > div {
  display: none;
  position: absolute;
  padding: 1.56vw;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #20af86;
  opacity: 0.8;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  color: #fff;
  font-size: 1.04vw;
  cursor: pointer;
}
.csv .activity > div .swiper-slide .activity-item > div p {
  font-size: 1.25vw;
  color: #fff;
  font-weight: bold;
}
.csv .activity > div .swiper-slide .activity-item > div span {
  text-align: center;
  line-height: 2.34vw;
  width: 7.81vw;
  border: 1px solid #fff;
  color: #fff;
  font-size: 1.04vw;
}
.csv .video {
  position: relative;
  padding-top: 6.77vw;
}
.csv .video picture img {
  width: 100%;
}
.csv .video > img {
  position: absolute;
  right: 12.5vw;
  top: 0;
  width: 46.88vw;
}
.csv .works {
  padding-top: 4.17vw;
  padding-bottom: 4.17vw;
  padding-right: 12.5vw;
}
.csv .works > div {
  margin-top: 4.17vw;
  display: flex;
}
.csv .works > div .content {
  width: 68.23vw;
}
.csv .works > div .content > div {
  display: none;
}
.csv .works > div .content .grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
}
.csv .works > div .content .grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1px;
}
.csv .works > div .content .grid-cols-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1px;
}
.csv .works > div .content .work-item {
  position: relative;
}
.csv .works > div .content .work-item:hover > div {
  display: flex;
}
.csv .works > div .content .work-item img {
  display: block;
  width: 100%;
}
.csv .works > div .content .work-item > div {
  display: none;
  position: absolute;
  padding: 1.56vw;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #20af86;
  opacity: 0.8;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: #fff;
  font-size: 1.04vw;
  cursor: pointer;
}
.csv .works > div .content .work-item > div h6 {
  font-size: 1.15vw;
}
.csv .works > div .content .work-item > div p {
  font-size: 1.04vw;
}
.csv .works > div .content .work-item > div span {
  position: absolute;
  bottom: 1.56vw;
  left: 1.56vw;
  text-align: center;
  line-height: 2.34vw;
  padding: 0 0.78vw;
  border: 1px solid #fff;
  color: #fff;
}
.csv .works > div .works-tool {
  flex: 1 1 0;
  z-index: 10;
  margin-left: 0.42vw;
  padding-top: 7.81vw;
  display: flex;
  flex-direction: column;
  flex: 0 0 17.97vw;
}
.csv .works > div .works-tool p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5.21vw;
  background-color: #e1e8e6;
  font-size: 1.56vw;
  padding: 0 1.56vw;
  cursor: pointer;
  transition: all 0.2s;
}
.csv .works > div .works-tool p i {
  margin-top: 1.04vw;
  width: 2.19vw;
  height: 0.26vw;
  background-image: url(../images/home/arrow.png);
  background-size: 100% 100%;
}
.csv .works > div .works-tool p.active {
  color: #fff;
  background-color: var(--color);
  width: 110%;
  margin-left: -10%;
}
.csv .works > div .works-tool p.active i {
  background-image: url(../images/home/arrow_active.png);
}
.csv .works > div .works-tool p + p {
  margin-top: 1.72vw;
}
.csv .expert {
  padding-top: 4.17vw;
  background-image: url(../images/home/expert_bg.jpg);
  background-size: 100% 100%;
  height: 54.95vw;
}
.csv .expert h2 {
  margin-bottom: 3.12vw;
}
.csv .expert .swiper-slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  grid-gap: 3.91vw 1.56vw;
}
.csv .expert .swiper-slide > div {
  background-color: #fff;
}
.csv .expert .swiper-slide > div img {
  width: 100%;
}
.csv .expert .swiper-slide > div p {
  margin: 0;
  padding: 0 1.3vw;
  line-height: 3.12vw;
  font-size: 1.04vw;
}
.csv .expert .pagination span {
  background: #fff;
}
.csv .expert .pagination span.swiper-pagination-bullet-active {
  background: var(--color);
}
.csv .award-ceremony {
  padding-top: 5.21vw;
  padding-bottom: 4.17vw;
}
.csv .award-ceremony > div {
  margin-top: 4.17vw;
}
.csv .award-ceremony > div .swiper-slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2.34vw;
}
.work-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}
.work-mask .swiper-container {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
}
.work-mask .swiper-wrapper {
  align-items: center;
}
.work-mask .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.work-mask .swiper-slide > div {
  padding: 1.82vw 1.3vw;
  background-color: #20af86;
  width: 26.04vw;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.work-mask .swiper-slide > div h5 {
  font-size: 1.56vw;
  margin: 0 0 1.04vw;
}
.work-mask .swiper-slide > div h6 {
  font-size: 1.25vw;
  margin: 0 0 0.52vw;
  padding-bottom: 0.52vw;
  border-bottom: 1px solid #fff;
}
.work-mask .swiper-slide > div p {
  font-size: 1.04vw;
}
.work-mask .img-prev {
  position: absolute;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  cursor: pointer;
  z-index: 10;
}
.work-mask .img-next {
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%) translate(50%);
  cursor: pointer;
  z-index: 10;
}
.work-mask .close-btn {
  position: absolute;
  top: 1.04vw;
  right: 1.04vw;
  z-index: 10;
}
.work-mask .swiper-pagination {
  position: absolute;
  bottom: 1.04vw;
  left: 50%;
  transform: translateX(-50%);
}
.work-mask .swiper-pagination .swiper-pagination-bullet {
  margin-right: 0.78vw;
  opacity: 0.6;
}
.work-mask .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .csv-main {
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .pagination {
    margin: 6.67vw 0 0;
    text-align: center;
  }
  .pagination span {
    height: 0.67vw;
    width: 13.33vw;
  }
  .csv {
    background-color: #f0f5f9;
    --color: #20af86;
  }
  .csv h2 {
    font-size: 5.33vw;
    padding-bottom: 2.67vw;
  }
  .csv h2::after {
    width: 8vw;
    height: 0.4vw;
  }
  .csv .banner img {
    width: 100%;
  }
  .csv .news {
    margin: 8vw auto 10.67vw;
  }
  .csv .news > div {
    margin-top: 5.33vw;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 5.33vw;
  }
  .csv .news > div .news-item > div {
    align-items: center;
    padding: 4vw;
  }
  .csv .news > div .news-item > div p {
    flex: 1;
    font-size: 2.93vw;
  }
  .csv .news > div .news-item > div > a {
    width: 26.67vw;
    line-height: 7.73vw;
    font-size: 3.2vw;
  }
  .csv .activity {
    margin-top: 32.33vw;
  }
  .csv .activity > div {
    margin: 8vw 0 10.67vw;
  }
  .csv .activity > div .swiper-slide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .csv .activity > div .swiper-slide .activity-item > div {
    padding: 3.33vw;
  }
  .csv .activity > div .swiper-slide .activity-item > div p {
    font-size: 3.2vw;
  }
  .csv .activity > div .swiper-slide .activity-item > div span {
    width: auto;
    line-height: 2;
    padding: 0 2vw;
    font-size: 2.93vw;
  }
  .csv .video {
    position: relative;
    padding-top: 0;
  }
  .csv .video picture img {
    width: 100%;
  }
  .csv .video > img {
    position: absolute;
    right: 2vw;
    left: 2vw;
    top: 36vw;
    width: calc(100% - 4vw);
  }
  .csv .works {
    padding-bottom: 0;
    padding-right: 0;
  }
  .csv .works > div {
    margin-top: 10.67vw;
    display: flex;
    flex-direction: column-reverse;
  }
  .csv .works > div .content {
    flex: none;
    width: 100%;
  }
  .csv .works > div .content > div {
    display: none;
  }
  .csv .works > div .content .work-item > div {
    padding: 2vw;
    font-size: 2.67vw;
  }
  .csv .works > div .content .work-item > div h6 {
    font-size: 2.93vw;
  }
  .csv .works > div .content .work-item > div p {
    font-size: 2.67vw;
  }
  .csv .works > div .content .work-item > div span {
    left: 2vw;
    bottom: 2vw;
    line-height: 2;
    padding: 0 2vw;
  }
  .csv .works > div .works-tool {
    margin-left: 0;
    padding-top: 8vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.33vw;
    width: 100%;
    padding: 0 2vw;
    flex: none;
  }
  .csv .works > div .works-tool p {
    flex-direction: column-reverse;
    height: auto;
    background-color: #e1e8e6;
    background-size: contain;
    font-size: 4vw;
    padding: 2.67vw 0;
    border-top: 20px solid #f0f5f9;
  }
  .csv .works > div .works-tool p > img {
    width: 7.33vw;
    margin-bottom: 2vw;
  }
  .csv .works > div .works-tool p i {
    display: none;
  }
  .csv .works > div .works-tool p.active {
    background-color: var(--color);
    width: auto;
    margin-left: 0;
    border-color: var(--color);
  }
  .csv .works > div .works-tool p + p {
    margin-top: 0;
  }
  .csv .expert {
    margin-top: 16vw;
    padding-top: 9vw;
    background-image: url(../images/home/expert_bg.jpg);
    background-size: 100% 100%;
    height: 120vw;
  }
  .csv .expert h2 {
    margin-bottom: 6.67vw;
  }
  .csv .expert .swiper-slide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5.33vw 2vw;
  }
  .csv .expert .swiper-slide > div {
    background-color: #fff;
  }
  .csv .expert .swiper-slide > div img {
    width: 100%;
  }
  .csv .expert .swiper-slide > div p {
    padding: 2vw;
    line-height: 1.5;
    font-size: 2.67vw;
  }
  .csv .award-ceremony {
    padding-top: 10.67vw;
    padding-bottom: 10.67vw;
  }
  .csv .award-ceremony > div {
    margin-top: 8vw;
  }
  .csv .award-ceremony > div .swiper-slide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3.33vw 2vw;
  }
  .work-mask .swiper-slide {
    flex-direction: column;
    align-items: center;
  }
  .work-mask .swiper-slide > div {
    width: 80vw;
    padding: 4vw 3.33vw;
  }
  .work-mask .swiper-slide > div h5 {
    font-size: 4vw;
    margin-bottom: 2.67vw;
  }
  .work-mask .swiper-slide > div h6 {
    font-size: 3.2vw;
    padding-bottom: 1.33vw;
    margin-bottom: 1.33vw;
  }
  .work-mask .swiper-slide > div p {
    font-size: 2.67vw;
  }
  .work-mask .img-prev,
  .work-mask .img-next {
    width: 3vw;
  }
  .work-mask .img-prev {
    left: 5vw;
  }
  .work-mask .img-next {
    right: 5vw;
  }
  .work-mask .swiper-pagination {
    bottom: 6.67vw;
  }
  .work-mask .swiper-pagination .swiper-pagination-bullet {
    margin-right: 2.67vw;
  }
}