@charset 'utf-8';

@keyframes bgloop {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -1600px 0;
    }
}

@keyframes bgloopsp {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 0 1600px;
    }
}


@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

@keyframes expansion {
    from {
      top: -140px
    }
    to {
      top: 140px
    }
}

.kv-dot {
  display: block;
  /* width: 100%; */
  height: 7px;
  line-height: 0px;
  margin-top: 0px;
  list-style: none;
  text-align: right;
  position: absolute;
  bottom: 20px;
  right: calc(20px - 2.5px); }

.kv-dot a {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 2.5px;
  padding: 0;
  border: 1px solid black;
  border-radius: 5px;
  background:white
 }

 .kv-dot a.current {
   background:black
  }

 .kv-dot a span{
   display: none
 }


@media only screen and (min-width: 1280px) {

  .content.index{
    margin-top: 56.25vw;
    border-top: 1px solid;
    position: relative;
    background: #fff url(../../images/_renew/common/bg_grid.png);
    background-attachment: fixed;
  }

  .container section.index-msg .inner{
    /* width: 100vw; */
    /* border-bottom: 1px solid; */
    /* margin-top: -56.25vw; */
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
  }

  .container section.index-msg .inner .msg{
    position: absolute;
    bottom: -60px;
    left: 100px;
    animation: rotate 20s linear infinite;
  }

  .container section.index-kv {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 56.25vw;}
    .container section.index-kv .inner{
      /* width: 100vw; */
      height: 56.25vw;
      padding-left: 40px;
      padding-right: 40px;
      position: relative;
      pointer-events: none;
    }
    .container section.index-kv .inner .msg{
      position: absolute;
      bottom: -60px;
      left: 100px;
      animation: rotate 20s linear infinite;
    }
    .container section.index-kv .inner .attent{
      position: absolute;
      bottom: 191px;
      left: 50%;
      transform: translate(-50%,0px);
      font-size: 11px;
      line-height: 11px;
      text-align: center;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .container section.index-kv .inner .attent .line{
      position: absolute;
      top: 31px;
      left: 50%;
      width: 1px;
      height: 140px;
      background: #969696;
      overflow: hidden;
      z-index: 1;
    }
    .container section.index-kv .inner .attent .line:before{
      content: "";
      display: block;
      width: 1px;
      height: 140px;
      background: #ffffff;
      display: block;
      position: absolute;
      top: -140px;
      right: 0px;
      animation: 4s ease-out infinite forwards running expansion;
    }
    .container section.index-kv .pannel{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-size: contain;
      background-position: 50%;
      background-repeat: repeat-x;
      animation: bgloop 40s linear infinite;
      opacity: 0.0;
      transition: 0.2s ease-out;
    }
    .container section.index-kv .pannel.show{
      opacity: 1.0;
    }

    .container section.index-kv .pannel .items{
      width: 100%;
      height: 100%;
    }

    .container section.index-kv .pannel .items,
    .container section.index-kv .pannel .items .slick-list,
    .container section.index-kv .pannel .items .slick-track,
    .container section.index-kv .pannel .items .slick-slide,
    .container section.index-kv .pannel .items .slick-slide > div
    {
      width: 100%;
      height: 100%;
    }


    .container section.index-kv .pannel .items .item{
      background: white;
      width: 100%;
      height: 100%;
    }

    .container section.index-kv .pannel .items .item img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* background-position: 50%; */
      /* background-repeat: repeat-x; */
      /* animation: bgloop 40s linear infinite; */
    }


  .container .content.index section.banner {
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-bottom: 70px;
    margin-top: 120px;
    padding-left: 40px;
    padding-right: 40px; }
    .container .content.index section.banner.show .inner{
      display: flex;
    }
    .container .content.index section.banner .inner {
      display: none;
      max-width: 800px;
      margin: 0 auto;
      flex-wrap: wrap;
      gap: 20px}
    .container .content.index section.banner .inner.center {
      justify-content: center;
    }
    .container .content.index section.banner .inner a{
      display: block;
      width: calc((100% - 20px) / 2)
    }
    .container .content.index section.banner .inner a img{
      width: 100%;
      display: block;
    }
	.container section.index-kv .inner .attent .label{
		color: white;	
	}
  .container .content.index section.limited {
    margin-bottom: 100px;
    padding-left: 40px;
    padding-right: 40px; }
    .container .content.index section.limited .inner > .title {
      width: 100%;
      height: 40px;
      padding-bottom: 30px;
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative; }
      .container .content.index section.limited .inner > .title .m_btn_readmore_wh {
        position: absolute;
        right: 0px;
        top: 0; }
      .container .content.index section.limited .inner > .title .m_btn_readmore_wh span{
        text-transform: uppercase; }
    .container .content.index section.limited .inner .limited_items {
      /* display: flex;
      justify-content: center;
      flex-wrap: wrap; */
      max-width: 1280px;
      margin-right: 80px;
      margin-left: 80px;
      margin: 0 auto; }
      .container .content.index section.limited .inner .limited_items .m_product_item_l {
        width: calc((1280px - 20px) / 2) !important;
        margin-right: 20px;
       }
  .container .content.index section.marquee {
    margin-bottom: 44px; }
  .container .content.index section.about {
    margin-bottom: 100px;
    background: white; }
    .container .content.index section.about .inner {
      border-top: 1px solid;
      border-bottom: 1px solid; }
      .container .content.index section.about .inner > .title {
        width: 100%;
        padding-top: 77px;
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; }
        .container .content.index section.about .inner > .title span {
          text-transform: uppercase; }
      .container .content.index section.about .inner .items {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between; }
        .container .content.index section.about .inner .items .item {
          width: calc(33.333%);
          border-right: 1px solid;
          text-align: center;
          padding-bottom: 50px; }
          .container .content.index section.about .inner .items .item:last-child {
            border-right: none; }
          .container .content.index section.about .inner .items .item figure {
            width: 230px;
            height: 230px;
            border-radius: 230px;
            overflow: hidden;
            border: 1px solid;
            margin: 0 auto;
            margin-bottom: 45px; }
            .container .content.index section.about .inner .items .item figure img {
              width: 230px;
              height: 230px;
              -o-object-fit: cover;
                 object-fit: cover; }
          .container .content.index section.about .inner .items .item .head {
            margin-bottom: 23px; }
          .container .content.index section.about .inner .items .item .body {
            padding-left: 20px;
            padding-right: 20px;
          }
          .container .content.index section.about .inner .items .item .m_btn_readmore_wh a{
            display: inline-flex;}
          .container .content.index section.about .inner .items .item .m_btn_readmore_wh {
            margin-top: 30px; }
  .container .content.index .news_note_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 125px; }
  .container .content.index section.news_note {
    width: calc((100% - 120px) / 2); }
    .container .content.index section.news_note:first-child .inner > .title {
      padding-left: calc(100% - 580px); }
    .container .content.index section.news_note:first-child .inner .items .item {
      padding-left: calc(100% - 580px); }
    .container .content.index section.news_note:last-child .inner > .title .m_btn_readmore_wh {
      right: calc(100% - 580px); }
    .container .content.index section.news_note:last-child .inner .items .item {
      padding-right: calc(100% - 580px); }
    .container .content.index section.news_note .inner > .title {
      width: 100%;
      height: 70px;
      padding-bottom: 30px;
      display: flex;
      align-items: center;
      position: relative;
      box-sizing: border-box; }
      .container .content.index section.news_note .inner > .title .m_btn_readmore_wh {
        position: absolute;
        right: 0px;
        top: 0; }
    .container .content.index section.news_note .inner .items {
      border-top: 1px solid;
      background: white; }
      .container .content.index section.news_note .inner .items .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0px;
        border-bottom: 1px solid; }
        .container .content.index section.news_note .inner .items .item figure {
          width: 210px;
          position: relative;
          border-radius: 10px;
          overflow: hidden; }
          .container .content.index section.news_note .inner .items .item figure:before {
            content: "";
            display: block;
            padding-top: 71.428%; }
          .container .content.index section.news_note .inner .items .item figure img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover; }
        .container .content.index section.news_note .inner .items .item .txt {
          width: calc(100% - 210px - 40px); }
          .container .content.index section.news_note .inner .items .item .txt .head {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-bottom: 10px; }

  .container .content.index section.video {
    width: 800px;
    margin: 100px auto; }
    .container .content.index section.video .inner .video {
      width: 100%;
      position: relative;
      margin-bottom: 50px; }
      .container .content.index section.video .inner .video:before {
        content: "";
        display: block;
        padding-top: 56.25%; }
      .container .content.index section.video .inner .video iframe {
        border: 1px solid #000000;
        border-radius: 10px;
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px; }
}

@media only screen and (max-width: 1279px) {


  .content.index{
    margin-top: 150vw;
    border-top: 1px solid;
    position: relative;
    background: #fff url(../../images/_renew/common/bg_grid.png);
    background-attachment: fixed;
    padding-bottom: 50px;
  }

  .container section.index-kv {
    border-bottom: 1px solid;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 150vw;}

    .container section.index-msg .inner{
      /* width: 100vw; */
      /* height: 150vw; */
      position: relative;
    }
    .container section.index-msg .inner .msg{
      position: absolute;
      bottom: -70px;
      left: 30px;
      animation: rotate 20s linear infinite;
      width: 185px;
      height: 185px;
    }
    .container section.index-msg .inner .msg img{
      width: 100%
    }

    .container section.index-kv .inner{
      /* width: 100vw; */
      pointer-events: none;
      height: 150vw;
      position: relative;
    }
    .container section.index-kv .inner .msg{
      position: absolute;
      bottom: -70px;
      left: 30px;
      animation: rotate 20s linear infinite;
      width: 185px;
      height: 185px;
    }
    .container section.index-kv .inner .msg img{
      width: 100%
    }
    .container section.index-kv .inner .attent{
      position: absolute;
      bottom: 220px;
      right: 0px;
      font-size: 11px;
      line-height: 11px;
      text-align: center;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .container section.index-kv .inner .attent .label{
      display: block;
      transform: rotate(90deg) translate(10px,1px);
      color: white;
    }

    .container section.index-kv .inner .attent .line{
      position: absolute;
      top: 45px;
      left: 50%;
      width: 1px;
      height: 140px;
      background: #585757;
      overflow: hidden;
      z-index: 1;
    }
    .container section.index-kv .inner .attent .line:before{
      content: "";
      display: block;
      width: 1px;
      height: 140px;
      background: white;
      display: block;
      position: absolute;
      top: -140px;
      right: 0px;
      animation: 4s ease-out infinite forwards running expansion;
    }
    .container section.index-kv .pannel{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-size: contain;
      background-position: 50%;
      background-repeat: repeat-y;
      animation: bgloopsp 40s linear infinite;
      opacity: 0.0;
      transition: 0.2s ease-out;
    }
    .container section.index-kv .pannel.show{
      opacity: 1.0;
    }

    .container section.index-kv .pannel .items,
    .container section.index-kv .pannel .items .slick-list,
    .container section.index-kv .pannel .items .slick-track,
    .container section.index-kv .pannel .items .slick-slide,
    .container section.index-kv .pannel .items .slick-slide > div
    {
      width: 100%;
      height: 100%;
    }


    .container section.index-kv .pannel .items .item{
      background: white;
      width: 100%;
      height: 100%;
    }

    .container section.index-kv .pannel .items .item img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* background-position: 50%; */
      /* background-repeat: repeat-x; */
      /* animation: bgloop 40s linear infinite; */
    }

    .container .content.index section.banner {
      margin-top: 120px;
      margin-bottom: 70px;
      padding-left: 20px;
      padding-right: 20px;
    }
    .container .content.index section.banner .title{
      font-weight: 400;
      font-size: 25px;
      line-height: 29px;
      text-align: center;
      margin-bottom: 30px;
    }

    .container .content.index section.banner.slide .inner a{
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box;
      display: block;
      margin-bottom: 0px;
    }

    .container .content.index section.banner.slide .slick-dots{
      bottom: -10px
    }

    .container .content.index section.banner.slide .inner a img{
      border: 1px solid;
    }

    .container .content.index section.banner .inner a{
      display: block;
      margin-bottom: 20px;
    }

    .container .content.index section.banner .inner a img{
      width: 100%;
      display: block;
    }

    .container .content.index section.banner.clm {
      margin-top: 90px;
      margin-bottom: 60px;
      /* padding-left: 10px;
      padding-right: 10px; */
    }

    .container .content.index section.banner.clm .inner {
      display: flex;
      flex-wrap: wrap;
      gap: 10px
    }
    .container .content.index section.banner.clm .inner a{
      width: calc((100% - 10px) / 2);
      margin-bottom: 0px;
    }

  .container .content.index section.m_products {
    margin-bottom: 70px; }
  .container .content.index section.limited {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 65px; }
    .container .content.index section.limited .inner > .title {
      width: 100%;
      padding-bottom: 35px;
      position: relative;
      text-align: center; }
      .container .content.index section.limited .inner > .title .m_btn_readmore_wh span{
        text-transform: uppercase; }
      .container .content.index section.limited .inner > .title .m_btn_readmore_wh {
        margin-top: 15px; }
      .container .content.index section.limited .inner > .title .m_btn_readmore_wh a{
        display: inline-flex;}
    .container .content.index section.limited .inner .limited_items {
      /* display: flex;
      justify-content: center;
      flex-wrap: wrap; */
      margin: 0 auto; }
      .container .content.index section.limited .inner .limited_items .m_product_item_l {
        width: 320px !important;
        /* margin-left: 10px; */
        margin-right: 20px; }
  .container .content.index section.marquee {
    margin-bottom: 32px; }
  .container .content.index section.marquee .inner{
    line-height: 1.0
  }
  .container .content.index section.about {
    margin-bottom: 100px;
    background: white; }
    .container .content.index section.about .inner {
      border-top: 1px solid;
      border-bottom: 1px solid; }
      .container .content.index section.about .inner > .title {
        width: 100%;
        padding-top: 60px;
        padding-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; }
        .container .content.index section.about .inner > .title span {
          text-transform: uppercase; }
      .container .content.index section.about .inner .items {
        padding-left: 20px;
        padding-right: 20px; }
        .container .content.index section.about .inner .items .item {
          border-bottom: 1px solid;
          text-align: center;
          padding-top: 40px;
          padding-bottom: 40px; }
          .container .content.index section.about .inner .items .item:last-child {
            border-bottom: none; }
          .container .content.index section.about .inner .items .item figure {
            width: 230px;
            height: 230px;
            border-radius: 230px;
            overflow: hidden;
            border: 1px solid;
            margin: 0 auto;
            margin-bottom: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            }
            .container .content.index section.about .inner .items .item figure img {
              width: 150px;
              height: 150px;
              -o-object-fit: cover;
              object-fit: contain;
              display: flex;
              align-items: center;
              justify-content: center;
              }
          .container .content.index section.about .inner .items .item .head {
            margin-bottom: 23px; }
          .container .content.index section.about .inner .items .item .m_btn_readmore_wh {
            margin-top: 30px; }
          .container .content.index section.about .inner .items .item .m_btn_readmore_wh a{
            display: inline-flex;}
  .container .content.index section.news_note.news {
    margin-bottom: 50px; }
  .container .content.index section.news_note .inner > .title {
    padding-left: 20px;
    width: 100%;
    height: 70px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box; }
    .container .content.index section.news_note .inner > .title .m_btn_readmore_wh {
      position: absolute;
      right: 20px;
      top: 0; }
    .container .content.index section.news_note .inner > .title .m_btn_readmore_wh a{
      display: inline-flex;}
  .container .content.index section.news_note .inner .items {
    border-top: 1px solid;
    background: white; }
    .container .content.index section.news_note .inner .items .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 0px;
      padding-right: 20px;
      border-bottom: 1px solid; }
      .container .content.index section.news_note .inner .items .item figure {
        width: 185px;
        position: relative;
        border-radius: 0px 10px 10px 0px;
        overflow: hidden; }
        .container .content.index section.news_note .inner .items .item figure:before {
          content: "";
          display: block;
          padding-top: 71.428%; }
        .container .content.index section.news_note .inner .items .item figure img {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover; }
      .container .content.index section.news_note .inner .items .item .txt {
        width: calc(100% - 185px - 20px); }
        .container .content.index section.news_note .inner .items .item .txt .head {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          margin-bottom: 10px; }

  .container .content.index section.video {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 80px;
    margin-top: 80px}
    .container .content.index section.video .inner .video {
      width: 100%;
      position: relative;
      margin-bottom: 30px; }
      .container .content.index section.video .inner .video:before {
        content: "";
        display: block;
        padding-top: 56.25%; }
      .container .content.index section.video .inner .video iframe {
        border: 1px solid #000000;
        border-radius: 10px;
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px; }
}

/*# sourceMappingURL=style.css.map */