body .home .common_title {
  text-transform: uppercase
}

body .home .common_title span {
  color: #F18804
}

body .home .container {
  padding-top: 6.51042vw
}

body .home .container .links {
  display: flex;
  align-items: center;
  padding: 1.71875vw 12.08333vw;
  background: #FCFCFA
}

body .home .container .links span {
  width: .3125vw;
  height: .3125vw;
  border-radius: 50%;
  background: #F18804
}

body .home .container .links a {
  color: #343434;
  margin-left: .72917vw
}

body .home .container .links p {
  color: #F18804
}

body .home .container .links i {
  margin: 0 3px
}

body .home .container .banner {
  position: relative
}

body .home .container .banner .bg {
  width: 100%;
  height: 33.48958vw;
  object-fit: cover
}

body .home .container .banner::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.78;
  background: linear-gradient(0deg, #000 0%, transparent 100%)
}

body .home .container .banner .text {
  position: absolute;
  left: 11.92708vw;
  bottom: 4.01042vw;
  width: 74.73958vw;
  color: white;
  z-index: 10
}

body .home .container .banner .text .t {
  line-height: 1.2;
  margin-bottom: 1.5625vw
}

body .home .container .banner .text .tags {
  display: flex;
  gap: 1.5625vw
}

body .home .container .banner .text .tags .anthor {
  display: flex;
  align-items: center;
  gap: .41667vw
}

body .home .container .banner .text .tags .anthor img {
  width: 1.30208vw
}

body .home .container .banner .text .tags .anthor p {
  color: #F18804;
  text-transform: capitalize
}

body .home .container .banner .text .share {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.04167vw;
  margin-top: 3.125vw
}

body .home .container .banner .text .share .icons {
  display: flex;
  gap: .52083vw
}

body .home .container .banner .text .share .icons a img {
  width: 2.5vw
}

body .home .container .html {
  width: 56.04167vw;
  margin: 6.45833vw auto;
  line-height: 1.6
}

body .home .container .pager {
  margin: 0 12.13542vw;
  display: none;
}

body .home .container .pager a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FCFCFA;
  padding: 2.29167vw 2.96875vw;
  color: #ACACAC
}

body .home .container .pager a p {
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 600ms
}

body .home .container .pager a .icon {
  opacity: 0;
  transition: all 600ms
}

body .home .container .pager a .icon svg {
  width: 1.30208vw;
  display: block
}

body .home .container .pager a:not(:last-child) {
  margin-bottom: 1.04167vw
}

body .home .container .pager a:hover {
  color: #F18804
}

body .home .container .pager a:hover .icon {
  opacity: 1
}

body .home .container .related {
  padding: 7.39583vw 12.08333vw 8.75vw 12.08333vw
}

body .home .container .related .t {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3.90625vw;
  align-items: center
}

body .home .container .related .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.60417vw
}

body .home .container .related .list .item {
  width: 100%;
  display: block
}

body .home .container .related .list .item .pic {
  width: 100%;
  position: relative;
  padding: .88542vw .78125vw
}

body .home .container .related .list .item .pic .tp {
  position: absolute;
  right: 0;
  top: 0;
  transition: all 600ms
}

body .home .container .related .list .item .pic .tp svg {
  display: block;
  width: 7.96875vw;
  height: 3.33333vw
}

body .home .container .related .list .item .pic .bp {
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 600ms
}

body .home .container .related .list .item .pic .bp svg {
  display: block;
  width: 7.96875vw;
  height: 3.33333vw
}

body .home .container .related .list .item .pic .mc {
  width: 100%;
  overflow: hidden;
  position: relative
}

body .home .container .related .list .item .pic .mc::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: all 600ms
}

body .home .container .related .list .item .pic .mc img {
  width: 100%;
  height: 17.86458vw;
  object-fit: cover
}

body .home .container .related .list .item .tags {
  margin: 2.60417vw 0 1.04167vw 0;
  display: flex;
  align-items: center
}

body .home .container .related .list .item .tags .time {
  color: #000;
  text-transform: capitalize
}

body .home .container .related .list .item .tags span {
  width: 1px;
  height: .78125vw;
  background: #000;
  margin: 0 1.30208vw
}

body .home .container .related .list .item .tags .type {
  color: #F18804;
  text-transform: uppercase;
  font-weight: 300
}

body .home .container .related .list .item .des {
  line-height: 1.5;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-weight: 600
}

body .home .container .related .list .item:hover .pic .tp {
  right: 3.125vw
}

body .home .container .related .list .item:hover .pic .bp {
  left: 3.125vw
}

body .home .container .related .list .item:hover .pic .mc::before {
  opacity: 1
}

body .home .footer {
  border-top: 1px solid rgba(0, 0, 0, 0.3)
}

@media screen and (max-width: 768px) {
  body .home .container {
    padding-top: 60px
  }

  body .home .container .links {
    padding: 15px 10px;
    flex-wrap: wrap;
    gap: 10px
  }

  body .home .container .links span {
    width: 4px;
    height: 4px
  }

  body .home .container .links a {
    margin-left: 7px
  }

  body .home .container .banner .bg {
    height: 300px
  }

  body .home .container .banner .text {
    left: 5%;
    bottom: 30px;
    width: 90%
  }

  body .home .container .banner .text .t {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.4
  }

  body .home .container .banner .text .tags {
    gap: 15px
  }

  body .home .container .banner .text .tags .anthor {
    gap: 4px
  }

  body .home .container .banner .text .tags .anthor img {
    width: 20px
  }

  body .home .container .banner .text .share {
    margin-top: 20px;
    gap: 10px
  }

  body .home .container .banner .text .share .icons {
    gap: 5px
  }

  body .home .container .banner .text .share .icons a img {
    width: 30px
  }

  body .home .container .html {
    width: 90%;
    margin: 30px auto
  }

  body .home .container .pager {
    margin: 0 10px
  }

  body .home .container .pager a {
    padding: 20px 10px
  }

  body .home .container .pager a:not(:last-child) {
    margin-bottom: 10px
  }

  body .home .container .pager a .icon svg {
    width: 15px
  }

  body .home .container .related {
    padding: 60px 5%
  }

  body .home .container .related .t {
    margin-bottom: 30px
  }

  body .home .container .related .list {
    display: block
  }

  body .home .container .related .list .item:not(:last-child) {
    margin-bottom: 20px
  }

  body .home .container .related .list .item .pic {
    padding: 10px 8px
  }

  body .home .container .related .list .item .pic .tp svg,
  body .home .container .related .list .item .pic .bp svg {
    width: 100px;
    height: auto
  }

  body .home .container .related .list .item .pic .mc img {
    height: 260px
  }

  body .home .container .related .list .item .tags {
    margin: 25px 0 10px 0
  }

  body .home .container .related .list .item .tags span {
    height: 15px;
    margin: 0 10px
  }

  body .home .container .related .list .item:hover .pic .tp {
    right: 60px
  }

  body .home .container .related .list .item:hover .pic .bp {
    left: 60px
  }

  body .home .container .related .list .item:hover .pic .mc::before {
    opacity: 1
  }
}