.oblique-line {
  position: absolute;
  bottom: 0;
  width: 6.14rem;
  height: 0.23rem;
  opacity: 0.61;
  background-size: 100% auto; }

.pc-only .bg-wrap {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #000; }
.pc-only .oblique-line {
  position: absolute;
  bottom: 0;
  width: 6.14rem;
  height: 0.23rem;
  opacity: 0.61;
  background-size: 100% auto; }
.pc-only .kv-screen {
  height: 100vh;
  max-height: 10.8rem;
  position: relative;
  overflow: hidden; }
  .pc-only .kv-screen .text-img-1,
  .pc-only .kv-screen .text-img-2 {
    position: absolute;
    top: 1.4rem;
    bottom: 0.6rem; }
    .pc-only .kv-screen .text-img-1 img,
    .pc-only .kv-screen .text-img-2 img {
      height: 100%;
      object-fit: contain; }
  .pc-only .kv-screen .text-img-1 {
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; }
  .pc-only .kv-screen .text-img-2 {
    right: 1.02rem; }
.pc-only .active-content {
  display: flex;
  padding: 0.96rem 0.62rem 1.1rem 0.6rem;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  .pc-only .active-content .text-box {
    padding-top: 0.89rem;
    width: 6.8rem;
    margin-right: 0.68rem; }
    .pc-only .active-content .text-box .border {
      width: 0.4rem;
      height: 0.06rem;
      background-color: #66adf0; }
    .pc-only .active-content .text-box .tit {
      margin-top: 0.52rem;
      font-family: HanSansBold;
      font-size: 0.28rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.57rem;
      letter-spacing: 0rem;
      color: #feffff;
      margin-bottom: 0; }
    .pc-only .active-content .text-box .desc {
      /*padding-top: 0.64rem;*/
	  margin-top: 0.3rem;
      font-family: HanSans;
      font-size: 0.24rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.5rem;
      letter-spacing: 0rem;
      color: #ffffff;
      opacity: 0.7;
      word-break: break-all;
      text-align: justify; }
  .pc-only .active-content .video {
    width: 10.58rem;
    height: 5.94rem;
    position: relative;
    cursor: pointer;
    overflow: hidden; }
    .pc-only .active-content .video .poster {
      width: 100%;
      display: block;
      height: 100%;
      object-fit: contain;
      transition: all 100ms linear; }
    .pc-only .active-content .video:hover .poster {
      transform: scale(1.05);
      transition: all 100ms linear; }
    .pc-only .active-content .video .play-btn {
      position: absolute;
      width: 0.83rem;
      height: 0.83rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer; }
  .pc-only .active-content .oblique-line {
    bottom: 0;
    left: 0.25rem; }
.pc-only .anniversary-record {
  padding-top: 0.74rem;
  padding-bottom: 1.23rem;
  position: relative; }
  .pc-only .anniversary-record .tit {
    font-size: 0; }
    .pc-only .anniversary-record .tit img {
      display: block;
      width: 5.22rem;
      margin: 0 auto; }
  .pc-only .anniversary-record .video-list {
    padding: 0.86rem 0.6rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .pc-only .anniversary-record .video-list .item {
      position: relative;
      width: 31.33%; }
      .pc-only .anniversary-record .video-list .item .video {
        position: relative;
        cursor: pointer;
        overflow: hidden; }
        .pc-only .anniversary-record .video-list .item .video .poster {
          width: 100%;
          display: block;
          transition: all 100ms linear; }
        .pc-only .anniversary-record .video-list .item .video:hover .poster {
          transform: scale(1.05);
          transition: all 100ms linear; }
        .pc-only .anniversary-record .video-list .item .video .play-btn {
          position: absolute;
          width: 0.83rem;
          height: 0.83rem;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          cursor: pointer; }
      .pc-only .anniversary-record .video-list .item .content h5 {
        font-family: HanSansBold;
        font-size: 0.28rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.57rem;
        letter-spacing: 0rem;
        color: #ffffff;
        margin-top: 0.56rem; }
      .pc-only .anniversary-record .video-list .item .content .desc {
        margin-top: 0.36rem;
        font-size: 0.24rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.5rem;
        letter-spacing: 0rem;
        text-align: justify;
        color: #ffffff;
		opacity:0.7; }
  .pc-only .anniversary-record .oblique-line {
    bottom: 0;
    right: 0.43rem;
    transform: rotateY(180deg); }
.pc-only .fellow-traveler {
  position: relative;
  padding-bottom: .96rem;
  margin-top: -1.4rem; }
  .pc-only .fellow-traveler .tit {
    font-size: 0; }
    .pc-only .fellow-traveler .tit img {
      display: block;
      width: 6.76rem;
      padding-bottom: .6rem; }
  .pc-only .fellow-traveler .content-box {
    padding-top: 0.63rem;
    height: 9.32rem;
    background-size: 100% 9.32rem;
    background-repeat: no-repeat;
    padding: 3.17rem 1.25rem 0 8.85rem; }
    .pc-only .fellow-traveler .content-box .title {
      font-family: HanSansBold;
      font-size: 0.28rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.47rem;
      letter-spacing: 0rem;
      color: #fff;
      margin-bottom: 0.4rem; }
    .pc-only .fellow-traveler .content-box .desc {
      font-size: 0.24rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.5rem;
      letter-spacing: 0rem;
      color: #fff;
	  opacity: 0.7;
      /*margin-bottom: .5rem;*/ }
    @media screen and (max-width: 1024px) {
      .pc-only .fellow-traveler .content-box {
        width: 98%;
        height: 9.361rem;
        padding-left: 8.85rem; }
        .pc-only .fellow-traveler .content-box .title {
          font-size: 0.24rem;
          line-height: 0.4rem; }
        .pc-only .fellow-traveler .content-box .desc {
          font-size: 0.2rem;
          line-height: 0.4rem; } }
.pc-only .dream-building {
  padding-top: 0.51rem;
  padding-bottom: 1.33rem;
  position: relative; }
  .pc-only .dream-building .oblique-line {
    bottom: 0;
    left: 0.25rem; }
  .pc-only .dream-building .tit {
    font-size: 0; }
    .pc-only .dream-building .tit img {
      display: block;
      width: 3.38rem;
      margin: 0 auto; }
  .pc-only .dream-building .swiper-container {
    width: calc(100% - 1.2rem);
    margin: 0;
    margin-left: 0.6rem;
    /* margin: 0 0.6rem; */
    /* padding-inline: 0.6rem; */
    /*padding-top: 0.92rem;*/
    padding-bottom: 0.59rem; }
    .pc-only .dream-building .swiper-container .swiper-slide {
      display: flex;
      height: auto;
      gap: 0.3rem;
      flex-wrap: wrap;
      width: 18rem;
      padding: 0; }
      .pc-only .dream-building .swiper-container .swiper-slide img {
        display: block;
        width: calc((100% - 0.6rem) / 3);
        cursor: pointer;
        transition: all 100ms linear; }
        .pc-only .dream-building .swiper-container .swiper-slide img:hover {
          transform: scale(1.05);
          transition: all 100ms linear; }
    .pc-only .dream-building .swiper-container .swiper-scrollbar {
      bottom: 0;
      width: 12.5rem;
      height: 0.08rem;
      background-color: rgba(214, 214, 214, 0.2);
      left: 50%;
      transform: translateX(-50%);
      border-radius: 0; }
      .pc-only .dream-building .swiper-container .swiper-scrollbar .swiper-scrollbar-drag {
        background-color: #66adf0;
        width: 20%;
        border-radius: 0; }
.pc-only .news-box {
  margin-top: 1.21rem;
  padding-bottom: 0.51rem; }
  .pc-only .news-box .news-list {
    padding: 0 0.6rem;
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0; }
    .pc-only .news-box .news-list li {
      width: calc((100% - 0.4rem) / 2);
      position: relative; }
      .pc-only .news-box .news-list li .news-img {
        width: 100%; }
      .pc-only .news-box .news-list li .text-box {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 0.94rem;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 0 0.48rem;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .pc-only .news-box .news-list li .text-box span {
          font-family: HanSansBold;
          font-size: 0.36rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.57rem;
          letter-spacing: 0rem;
          color: #ffffff; }
          @media screen and (min-width: 768px) and (max-width: 1023px) {
            .pc-only .news-box .news-list li .text-box span {
              font-size: 0.28rem; } }
        .pc-only .news-box .news-list li .text-box .a {
          font-size: 0.28rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #ffffff;
          border-bottom: 1px solid #fff;
          font-style: inherit; }
  .pc-only .news-box .social-responsibility {
    padding: 0.4rem 0.6rem 0;
    position: relative; }
    .pc-only .news-box .social-responsibility .news-img {
      width: 100%; }
    .pc-only .news-box .social-responsibility .text-box {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 0.94rem;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 0 0.48rem;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .pc-only .news-box .social-responsibility .text-box span {
        font-family: HanSansBold;
        font-size: 0.36rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.57rem;
        letter-spacing: 0rem;
        color: #ffffff; }
        @media screen and (min-width: 768px) and (max-width: 1023px) {
          .pc-only .news-box .social-responsibility .text-box span {
            font-size: 0.28rem; } }
      .pc-only .news-box .social-responsibility .text-box .a {
        font-size: 0.28rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
        border-bottom: 1px solid #fff;
        font-style: inherit; }

.mb-only .bg-wrap {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #000; }
@media screen and (max-width: 767px) {
  .mb-only .kv-screen {
    height: 8.79rem; }
  .mb-only .active-content {
    padding: 0.36rem 0.28rem 0.86rem 0.28rem;
    margin: 0 auto;
    position: relative; }
    .mb-only .active-content .text-box {
      padding-left: 0.15rem; }
      .mb-only .active-content .text-box .border {
        width: 0.4rem;
        height: 0.06rem;
        background-color: #66adf0;
        margin-left: -0.03rem; }
      .mb-only .active-content .text-box .tit {
        margin-top: 0.24rem;
        font-family: HanSansBold;
        font-size: 0.28rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.57rem;
        letter-spacing: 0rem;
        color: #feffff;
        margin-bottom: 0; }
      .mb-only .active-content .text-box .desc {
        margin-bottom: 0.39rem;
        /*padding-top: 0.35rem;*/
		margin-top: 0.24rem;
        font-family: HanSans;
        font-size: 0.24rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.5rem;
        letter-spacing: 0rem;
        color: #ffffff;
        opacity: 0.7; }
    .mb-only .active-content .video {
      position: relative; }
      .mb-only .active-content .video .poster {
        width: 100%;
        display: block;
        height: 100%;
        object-fit: contain; }
      .mb-only .active-content .video .play-btn {
        position: absolute;
        width: 0.58rem;
        height: 0.58rem;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer; }
    .mb-only .active-content .oblique-line {
      bottom: 0;
      right: 0;
      transform: rotateY(-180deg); }
  .mb-only .anniversary-record {
    padding-top: 0.45rem;
    padding-bottom: 0.94rem;
    position: relative; }
    .mb-only .anniversary-record .tit {
      font-size: 0; }
      .mb-only .anniversary-record .tit img {
        display: block;
        width: 4.27rem;
        margin: 0 auto; }
    .mb-only .anniversary-record .video-list {
      padding: 0;
      margin-bottom: 0; }
      .mb-only .anniversary-record .video-list .item {
        padding: 0.44rem 0.3rem 0;
        position: relative; }
        .mb-only .anniversary-record .video-list .item .video {
          position: relative; }
          .mb-only .anniversary-record .video-list .item .video .poster {
            width: 100%;
            display: block; }
          .mb-only .anniversary-record .video-list .item .video .play-btn {
            position: absolute;
            width: 0.83rem;
            height: 0.83rem;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer; }
        .mb-only .anniversary-record .video-list .item .content {
          padding: 0 0.15rem; }
          .mb-only .anniversary-record .video-list .item .content h5 {
            font-family: HanSansBold;
            font-size: 0.28rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.57rem;
            letter-spacing: 0rem;
            color: #ffffff;
            margin-top: 0.3rem; }
          .mb-only .anniversary-record .video-list .item .content .desc {
            margin-top: 0.24rem;
            font-size: 0.24rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.5rem;
            letter-spacing: 0rem;
            text-align: justify;
            color: #ffffff;
			opacity:0.7;
            margin-bottom: 0; }
    .mb-only .anniversary-record .oblique-line {
      bottom: 0;
      left: 0.08rem; }
  .mb-only .fellow-traveler {
    padding-top: 0.45rem;
    position: relative;
    margin-top: -.5rem; }
    .mb-only .fellow-traveler .tit {
      font-size: 0;
      position: absolute;
      top: 1rem;
      left: 50%;
      transform: translateX(-50%); }
      .mb-only .fellow-traveler .tit img {
        display: block;
        width: 6.76rem; }
    .mb-only .fellow-traveler .content-box {
      width: auto;
      margin: .47rem auto 0;
      background-size: 100% 8.59rem;
      background-repeat: no-repeat;
      padding: 8.59rem 0.4rem 0  .47rem; }
      .mb-only .fellow-traveler .content-box .title {
        font-family: HanSansBold;
        font-size: 0.28rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.47rem;
        letter-spacing: 0rem;
        color: #fff; }
      .mb-only .fellow-traveler .content-box .desc {
        font-size: 0.24rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.5rem;
        letter-spacing: 0rem;
		opacity: 0.7;
        color: #fff; }
  .mb-only .dream-building {
    /*padding-top: 0.43rem;*/
    position: relative;
    padding-bottom: .7rem; }
    .mb-only .dream-building .oblique-line {
      bottom: 0;
      right: 0.09rem;
      transform: rotateY(-180deg); }
    .mb-only .dream-building .tit {
      font-size: 0; }
      .mb-only .dream-building .tit img {
        display: block;
        width: 2.79rem;
        margin: 0 auto; }
    .mb-only .dream-building .swiper-container {
      padding-top: 0.42rem;
      padding-bottom: 0.76rem;
      margin: 0 0.3rem; }
      .mb-only .dream-building .swiper-container .swiper-slide {
        display: flex;
        gap: 0.18rem;
        flex-wrap: wrap;
        padding: 0; }
        .mb-only .dream-building .swiper-container .swiper-slide img {
          display: block;
          width: calc((100% - 0.18rem) / 2); }
      .mb-only .dream-building .swiper-container .swiper-scrollbar {
        bottom: 0;
        width: 100%;
        height: 0.08rem;
        background-color: rgba(214, 214, 214, 0.2);
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0; }
        .mb-only .dream-building .swiper-container .swiper-scrollbar .swiper-scrollbar-drag {
          background-color: #66adf0;
          width: 20%;
          border-radius: 0; }
  .mb-only .news-box {
    margin-top: 0.8rem;
    padding-bottom: 0.56rem; }
    .mb-only .news-box .news-list {
      padding: 0 0.3rem;
      margin-bottom: 0; }
      .mb-only .news-box .news-list li {
        position: relative;
        margin-bottom: 0.46rem; }
        .mb-only .news-box .news-list li:last-child {
          margin-bottom: 0; }
        .mb-only .news-box .news-list li .news-img {
          width: 100%; }
        .mb-only .news-box .news-list li .text-box {
          position: absolute;
          width: 100%;
          bottom: 0;
          height: 0.62rem;
          background-color: rgba(0, 0, 0, 0.4);
          padding: 0 0.15rem;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .mb-only .news-box .news-list li .text-box span {
            font-family: HanSansBold;
            font-size: 0.32rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0.57rem;
            letter-spacing: 0rem;
            color: #ffffff; }
          .mb-only .news-box .news-list li .text-box .a {
            font-size: 0.28rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #ffffff;
            border-bottom: 1px solid #fff;
            font-style: inherit; } }

.copyright,
.copyright-info .copyright-info-nav-b {
  background: #000; }

.video-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #000;
  width: 100%;
  height: 100%;
  display: none; }
  .video-box video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .video-box .close-btn {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    background: url(https://static.hyundai.com.cn/v2/img/20/20thAnniversary/search-close.png) no-repeat center;
    background-size: 100% 100%;
    width: 0.5rem;
    height: 0.5rem;
    cursor: pointer; }

.popup-modal {
  display: none;
  background-color: rgba(0, 0, 0, 0.88);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1001; }
  .popup-modal .popup-wrapper,
  .popup-modal video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1003; }
    .popup-modal .popup-wrapper .popup-content,
    .popup-modal video .popup-content {
      width: 100%;
      height: 100%; }
    .popup-modal .popup-wrapper .swiper-container,
    .popup-modal video .swiper-container {
      height: 100%;
      width: 100%; }
      .popup-modal .popup-wrapper .swiper-container .swiper-slide,
      .popup-modal video .swiper-container .swiper-slide {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center; }
    .popup-modal .popup-wrapper img,
    .popup-modal .popup-wrapper video,
    .popup-modal video img,
    .popup-modal video video {
      height: 80%;
      width: 80%;
      object-fit: contain; }
  .popup-modal .popup-modal-close {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    cursor: pointer;
    z-index: 1004; }
    .popup-modal .popup-modal-close .popup-close-ico {
      width: 100%;
      height: 100%; }
  .popup-modal .swiper-button-next,
  .popup-modal .swiper-button-prev {
    z-index: 1002; }
  .popup-modal .swiper-button-prev {
    left: 0.29rem; }
  .popup-modal .swiper-button-next {
    right: 0.29rem; }
  @media (max-width: 767px) {
    .popup-modal .popup-wrapper {
      width: 100%;
      height: 100%; }
      .popup-modal .popup-wrapper video {
        width: 100vw;
        height: 57vw; }
      .popup-modal .popup-wrapper img {
        height: 80%;
        width: 100%; }
    .popup-modal .popup-modal-close {
      top: 0.8rem;
      right: 0.1rem; } }

/*# sourceMappingURL=20thAnniversary.css.map */