* {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-tap-highlight-color: transparent;
  outline: none; }

body,
html {
  font-size: 14px;
  background: #fff;
  color: #000;
  font-family: "PingFang SC","Source Han Sans CN","Microsoft Yahei", "Helvetica Neue", "STHeitiSC-Light", "Arial", sans-serif; }

body {
  overflow-x: hidden; }

body::before {
  content: "";
  display: table; }

.body-over {
  overflow: hidden; }

.clear {
  clear: both; }

i {
  font-style: normal; }

a {
  text-decoration: none;
  cursor: pointer;
  outline: none; }

a:active,
a:hover,
a:link,
a:visited {
  color: #585858; }

button {
  cursor: pointer; }

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0; }

input[type="search"]::-webkit-search-cancel-button {
  display: none; }

input[type="search"]::-webkit-search-decoration {
  display: none; }

dl,
dl dd,
ol,
ol li,
ul,
ul li {
  list-style: none; }

img {
  vertical-align: bottom; }

section {
  width: 90%;
  margin: 0 auto; }

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden; }

@-webkit-keyframes logoloop {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }
@-moz-keyframes logoloop {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }
@-o-keyframes logoloop {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }
@keyframes logoloop {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }
header {
  width: 100vw;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  mix-blend-mode: difference; }
  header .logo {
    position: relative;
    width: auto; }
    header .logo img {
      width: 2.6rem;
      height: 1rem; }
  header li {
    font-size: 0.22rem;
    width: auto;
    line-height: 0.25rem;
    padding: 2px 0;
    position: relative;
    cursor: pointer;
    text-align: right;
    letter-spacing: 3px;
    color: #fff;
    font-weight: lighter; }
    header li:hover {
      text-decoration: line-through; }
    header li:last-child {
      padding-top: 10px; }
  header .active {
    text-decoration: line-through; }
  header .subnav {
    position: absolute;
    display: none;
    width: 200%;
    left: 0;
    top: calc(0.25rem + 10px);
    z-index: 9;
    margin-top: 20px; }
    header .subnav:after {
      content: "";
      width: 90vw;
      height: 3rem;
      background: rgba(255, 255, 255, 0.45);
      position: fixed;
      left: 5vw;
      top: calc(1.72rem + 60px);
      z-index: -1; }
    header .subnav li {
      margin: 0;
      list-style-type: disc;
      font-size: 0.18rem;
      line-height: 0.36rem;
      padding: 0; }
      header .subnav li:hover:after {
        display: none; }
  header .header-button {
    width: 25px;
    height: 15px;
    left: 25px;
    cursor: pointer;
    position: absolute;
    display: none; }
    header .header-button span {
      width: 100%;
      height: 2px;
      background: #000;
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9); }
    header .header-button span:first-child {
      transform: translate(0, 0) rotate(0deg); }
    header .header-button span:last-child {
      transform: translate(0, 10px) rotate(0deg); }
  header .nav-icon-click span {
    background: #000; }
  header .nav-icon-click span:first-child {
    transform: translate(0, 0) rotate(135deg); }
  header .nav-icon-click span:last-child {
    transform: translate(0, 0) rotate(-135deg); }
  header .nav-icon-click:hover span:first-child {
    transform: translate(0, 0px) rotate(135deg); }
  header .nav-icon-click:hover span:last-child {
    transform: translate(0, 0px) rotate(-135deg); }
  header a:active,
  header a:hover,
  header a:link,
  header a:visited {
    color: #fff; }

.banner {
  transform: translate3d(-35vw, 0vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
  padding-top: 3.5rem;
  width: 100%;
  height: calc(100vh - 4rem);
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0.5rem;
  z-index: 1; }
  .banner .menu {
    -webkit-animation: logoloop 15s linear infinite;
    -moz-animation: logoloop 15s linear infinite;
    -o-animation: logoloop 15s linear infinite;
    animation: logoloop 15s linear infinite;
    width: auto;
    height: calc(100vh - 4rem); }
  .banner .list {
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer; }
  .banner .list-item {
    width: 16vw;
    height: calc(100vh - 4rem);
    margin-right: 10px;
    justify-content: center;
    align-items: center;
    display: flex; }
    .banner .list-item .color,
    .banner .list-item .number,
    .banner .list-item .title {
      display: none; }
  .banner a {
    width: 100%;
    height: 100%;
    display: block; }
  .banner .img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center; }

.banner:focus-within .menu,
.banner:hover .menu {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused; }

.show {
  width: 100vw;
  height: 100vh;
  position: relative; }
  .show .info {
    position: absolute;
    top: 2.5rem;
    left: 20px; }
  .show .number-show {
    font-size: 0.5rem;
    font-weight: bold;
    line-height: 0.5rem; }
  .show .title-show {
    font-size: 0.25rem;
    margin-top: 5px; }

footer {
  text-align: center;
  height: 0.5rem;
  line-height: 0.5rem;
  position: fixed;
  width: 100vw;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: none;
  color: #bcbcbc;
  font-size: 10px; }
  footer a:active,
  footer a:hover,
  footer a:link,
  footer a:visited {
    color: #bcbcbc; }

.line {
  width: 100vw;
  height: 2.7rem;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background: #fff; }

.prolist {
  margin-top: 2.7rem;
  width: 100vw; }
  .prolist li {
    width: 100%;
    border-bottom: 1px solid #000;
    font-size: 0.28rem;
    height: 0.9rem;
    line-height: 0.9rem;
    color: #000; }
    .prolist li:hover {
      background: #000;
      color: #fff; }
      .prolist li:hover a:active,
      .prolist li:hover a:hover,
      .prolist li:hover a:link,
      .prolist li:hover a:visited {
        color: #fff; }
      .prolist li:hover .title::after {
        content: "";
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        left: -30px;
        top: 50%;
        margin-top: -7px; }
  .prolist a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    cursor: pointer; }
  .prolist a:active,
  .prolist a:hover,
  .prolist a:link,
  .prolist a:visited {
    color: #000; }
  .prolist .number {
    width: 10%;
    text-align: left; }
  .prolist .title {
    margin-left: 5%;
    text-align: left;
    width: 50%;
    position: relative; }
  .prolist .industry {
    width: 10%;
    text-align: right; }

.bc {
  background: #fff;
  mix-blend-mode: normal;
  position: static; }
  .bc a:active,
  .bc a:hover,
  .bc a:link,
  .bc a:visited {
    color: #bcbcbc; }

.bc1 {
  background: #fff;
  mix-blend-mode: normal; }
  .bc1 a:active,
  .bc1 a:hover,
  .bc1 a:link,
  .bc1 a:visited {
    color: #bcbcbc; }

.product, .about, .contact, .newslist {
  width: 100vw;
  box-sizing: border-box;
  padding: 2.7rem 20px 0;
  display: flex;
  justify-content: flex-end; }
  .product .info, .about .info, .contact .info, .newslist .info {
    width: 28%;
    height: auto;
    position: fixed;
    left: 20px;
    bottom: 0.5rem;
    z-index: 10; }
    .product .info h3, .about .info h3, .contact .info h3, .newslist .info h3 {
      font-size: 0.26rem;
      line-height: 0.6rem;
      margin-bottom: 20px;
      font-weight: normal; }
    .product .info p, .about .info p, .contact .info p, .newslist .info p {
      font-size: 0.18rem;
      margin-bottom: 8px;
      font-weight: lighter; }
  .product .right, .about .right, .contact .right, .newslist .right {
    width: 68%; }
  .product .img, .about .img, .contact .img, .newslist .img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
    .product .img img, .about .img img, .contact .img img, .newslist .img img {
      width: auto;
      max-width: 100%;
      flex-shrink: 0;
      display: block;
      margin: 0 8px 16px; }
  .product .more, .about .more, .contact .more, .newslist .more {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .product .more a, .about .more a, .contact .more a, .newslist .more a {
      display: block;
      font-size: 0.22rem;
      text-transform: uppercase;
      font-weight: lighter; }

.canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1; }

.about, .contact, .newslist {
  margin-top: calc(2.7rem + 200px);
  padding-top: 0;
  justify-content: space-between;
  z-index: 80;
  position: relative;
  background: transparent; }
  .about .about-left, .contact .about-left, .newslist .about-left {
    width: 40%; }
    .about .about-left img, .contact .about-left img, .newslist .about-left img {
      width: 100%;
      height: auto; }
  .about .about-right, .contact .about-right, .newslist .about-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between; }
    .about .about-right .text, .contact .about-right .text, .newslist .about-right .text {
      font-size: 0.5rem;
      line-height: 0.75rem;
      margin-bottom: 35px;
      letter-spacing: 3px;
      font-weight: lighter;
      text-align: justify; }
    .about .about-right .bcline, .contact .about-right .bcline, .newslist .about-right .bcline {
      display: inline-block;
      position: relative; }
      .about .about-right .bcline::after, .contact .about-right .bcline::after, .newslist .about-right .bcline::after {
        content: "";
        width: 100%;
        height: 1px;
        background: #000;
        position: absolute;
        left: 0;
        bottom: 0; }
      .about .about-right .bcline:hover, .contact .about-right .bcline:hover, .newslist .about-right .bcline:hover {
        cursor: pointer; }
        .about .about-right .bcline:hover .we, .contact .about-right .bcline:hover .we, .newslist .about-right .bcline:hover .we {
          position: absolute;
          display: block;
          left: 50%;
          margin-left: -13vw;
          bottom: 0.6rem;
          z-index: 999; }
    .about .about-right .we, .contact .about-right .we, .newslist .about-right .we {
      display: none;
      width: 26vw;
      height: auto;
      border-radius: 10px;
      overflow: hidden; }
      .about .about-right .we img, .contact .about-right .we img, .newslist .about-right .we img {
        width: 100%;
        height: auto; }

.contact {
  margin-top: 2.9rem;
  height: calc(100vh - 3.4rem);
  align-content: space-between;
  flex-wrap: wrap; }
  .contact .information {
    width: 100%; }
    .contact .information p {
      font-size: 0.55rem;
      line-height: 0.75rem;
      font-weight: bold; }
  .contact a:active,
  .contact a:hover,
  .contact a:link,
  .contact a:visited {
    color: #000; }
  .contact ul {
    margin-top: 30px;
    position: relative; }
  .contact li:hover .wechat {
    display: block; }
  .contact .wechat {
    width: 130px;
    height: 130px;
    position: absolute;
    left: 200px;
    top: 0;
    display: none; }
    .contact .wechat img {
      width: 100%;
      height: auto; }
  .contact .iconfont {
    font-size: 0.35rem;
    color: #000;
    font-weight: bold;
    cursor: pointer; }
  .contact #newdate {
    width: 100%;
    font-size: 1.2rem;
    font-weight: bolder; }

.newslist {
  margin-top: 3rem; }
  .newslist ul {
    width: 40vw;
    border-top: 1px solid #000;
    padding-top: 10px;
    margin-bottom: 1rem; }
  .newslist .news_left_item {
    cursor: pointer; }
  .newslist .year {
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
    position: relative; }
  .newslist .newslist_items .show .news_item_list {
    display: block; }
  .newslist .newslist_items .show::before {
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 5px;
    right: 0;
    transform: rotate(45deg); }
  .newslist .newslist_items .show::after {
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 5px;
    right: 0;
    transform: rotate(-45deg); }
  .newslist .news_item_list {
    width: 80%;
    margin-left: 20%;
    font-size: 14px;
    line-height: 25px;
    display: none; }
  .newslist .news_item_list_info {
    position: relative;
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box; }
    .newslist .news_item_list_info:hover::after {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #000;
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -3px; }
  .newslist .img_mob {
    display: none; }
  .newslist .news_right .swiper_item {
    width: 50vw;
    height: 100vh;
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 990;
    overflow: hidden;
    transform: translateX(100vw);
    transition: transform 0.5s; }
  .newslist .news_right .show {
    transform: translateX(0); }
  .newslist .news_right .swiper-container {
    height: 100vh; }
  .newslist .news_right .swiper-slide {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; }
  .newslist .news_right img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%; }
  .newslist .show {
    width: 100%;
    height: auto; }

@media screen and (max-width: 1200px) {
  .banner {
    height: 65vh; }
    .banner .menu {
      height: 65vh; }
    .banner .list-item {
      height: 65vh;
      width: 350px;
      flex: none; }

  .show .info {
    position: fixed;
    top: auto;
    bottom: calc(60vh + 0.8rem); }

  .line {
    height: 3.5rem; }

  .prolist {
    margin-top: 3.5rem; }

  .product, .about, .contact, .newslist {
    padding-top: 3.5rem; }

  .about, .contact, .newslist {
    padding-top: 0; }

  .newslist {
    margin-top: 3.5rem; }

  .contact {
    margin-top: 3.5rem;
    height: calc(100vh - 4rem);
    align-content: center; }
    .contact #newdate {
      position: fixed;
      left: 20px;
      bottom: 0.5rem; } }
@media screen and (max-width: 767px) {
  header li {
    font-size: 0.24rem; }

  .banner {
    height: 60vh; }
    .banner .menu {
      height: 60vh; }
    .banner .list-item {
      height: 60vh;
      width: 250px;
      flex: none; }

  .show .info {
    position: fixed;
    top: auto;
    bottom: calc(60vh + 0.8rem); }

  .prolist .title {
    width: 60%;
    margin-left: 5%; }
  .prolist .industry {
    width: 20%; }

  .product, .about, .contact, .newslist {
    flex-wrap: wrap; }
    .product .info, .about .info, .contact .info, .newslist .info {
      position: sticky;
      width: 100%; }
      .product .info h3, .about .info h3, .contact .info h3, .newslist .info h3 {
        margin-bottom: 0; }
    .product .right, .about .right, .contact .right, .newslist .right {
      width: 100%; }

  .about, .contact, .newslist {
    margin-top: calc(2.7rem + 120px); }
    .about .about-left, .contact .about-left, .newslist .about-left {
      width: 100%; }
    .about .about-right, .contact .about-right, .newslist .about-right {
      width: 100%;
      margin-top: 15px; }
      .about .about-right .text, .contact .about-right .text, .newslist .about-right .text {
        margin-bottom: 15px; }
      .about .about-right .we, .contact .about-right .we, .newslist .about-right .we {
        width: 54vw; }

  .newslist {
    margin-top: 4rem; }
    .newslist ul {
      width: 100%;
      margin-bottom: 0.5rem; }
    .newslist .newslist_items .img_mob {
      display: block; }
      .newslist .newslist_items .img_mob img {
        width: 100%;
        height: auto; }
    .newslist .news_right {
      display: none; }

  .contact {
    margin-top: calc(2rem + 100px);
    align-content: flex-start; }
    .contact #newdate {
      position: fixed;
      left: 20px;
      bottom: 0.5rem; } }

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