hhh_new/css/detail.scss

.detail-content {
  .breadcrumb {
    a {
      color: #6c757d;
    }
  }

  h5 {
    color: #34404B;
    font-size: 1.5rem;
    font-weight: 500;
  }

  .intro-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    color: #727679;

    h4 {
      color: #34404B;
      font-size: 1.5rem;
      font-weight: 500;
      letter-spacing: 1px;
    }

    .contact-wrapper {
      p {
        color: #727679;
        font-size: 1.125rem;
      }

      a {
        color: #EE751B;
        font-size: 1.5rem;
        font-weight: bold;
      }
    }

    .mark-item {
      display: inline-block;
      margin: -.5rem .5rem 0 0;
      font-size: 2.5rem;
      font-weight: bold;
      color: #FF0000;
    }

    ul {
      li {
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

  }

  .intro-above {
    margin-top: 1.5rem;

    a {
      display: inline-block;
      padding: .5rem 1rem;
      text-align: center;
      border: 1px solid #EE751B;
      border-radius: 0.25rem;
      background: #ee7518;
      color: #FFF;
      line-height: 1.2;
      transition: all .3s;

      &:hover {
        opacity: .7;
      }

      p {
        font-size: 1.75rem;
        font-weight: bold;

        small {
          display: block;
          margin-top: .3rem;
          font-size: .75rem;
          letter-spacing: 1px;
        }
      }
    }
  }

  .article-content {
    height: 50px;
    overflow: hidden;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #727679;
    transition: all .3s;
    white-space: pre-wrap;
  }

  .article-read-more {
    display: flex;
    justify-content: center;
    color: #FFAC73;
    transform: translateY(-20px);
    transition: all .3s;
    cursor: pointer;

    &:hover {
      color: #EE751B;
    }

    span {
      display: inline-block;
      margin: -1px 5px 0 7px;
      letter-spacing: 1px;
      font-size: .875rem;
    }

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      background: -webkit-gradient(linear, left bottom, left top, from(#FCFCFC), to(rgba(255, 255, 255, 0.454219)));
      background: linear-gradient(0deg, #FCFCFC 0%, rgba(255, 255, 255, 0.454219) 100%);
      width: 100%;
      height: 25px;
      -webkit-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
    }
  }

  .radar-item {
    max-height: 200px;
    display: flex;
    align-items: center;
  }

  .slider-list {
    img {
      width: 100%;
      height: 650px;
      padding: 0 3rem;
      object-fit: cover;
      cursor: pointer;
    }

    .video-item {
      position: relative;
      border: none;
      background: transparent;

      .play-img {
        width: 110px;
        height: 110px;
        padding: 0;
      }
    }

    .slick-next,
    .slick-prev {
      position: absolute;
      top: 50%;
      border: none;
      background: transparent;
    }

    .slick-next {
      right: 0;
    }

    .slick-prev {
      left: 0;
    }
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    content: '';
    width: 25px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
  }

  .swiper-button-next::after {
    background-image: url("https://hhh.com.tw/assets/images/rv_web/arrow-right.png");
  }

  .swiper-button-prev:after {
    background-image: url("https://hhh.com.tw/assets/images/rv_web/arrow-left.png");
  }

  .media-list {
    margin: auto;
    padding: 1rem 3rem;
    max-width: 450px;
    display: flex;
    justify-content: space-around;
    background-color: #FFF;
    box-shadow: 0 1px 10px #cecece;
    border-radius: 45px;

    a {
      display: inline-block;
      margin: 0 .3rem;
    }
  }

  .tag-list {
    a {
      display: inline-block;
      margin: 0.3rem;
      padding: 0.5rem .8rem;
      color: #212529;
      border: 1px solid #212529;
      transition: all .3s;

      &:hover {
        color: #EE751B;
        border: 1px solid #EE751B;
      }
    }
  }

  .other-list {
    h5 {
      margin-bottom: 0;
      font-size: 1.125rem;
      color: #727679;
      letter-spacing: 1px;
    }
  }
}

.play-img {
  width: 50px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.breadcrumb-item.active {
  span {
    opacity: .7;
  }
}