@media screen and (max-width:768px) {
  :root {
    --head: 52px;
  }

  .C-wrap {
    width: calc(100% - 40px);
  }

  .stage {
    width: 100%;
  }

  .head1 {
    left: 16px;
    right: 16px;
    top: 12px;
    width: auto;
    margin-left: 0;
    height: var(--head);
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(31, 33, 36, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .head1.show {
    transform: translateY(0%);
  }

  .isback .head1 {
    transform: translateY(-160%);
  }

  .head1 .logo {
    width: 44px;
  }

  .head1 .nav {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0;
    border-radius: 12px;
    background: rgba(31, 33, 36, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.5px solid rgba(246, 205, 159, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
    pointer-events: none;
  }

  header.open .head1 .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .head1 .nav .link {
    height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .head1 .nav .link:not(:last-child) {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  }

  .head1 .nav .link span {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    justify-content: flex-start;
  }

  .head1 .nav .link.on span,
  .head1 .nav .link:hover span {
    background: transparent;
    border-color: transparent;
  }

  .head1 .nav .link .line {
    display: none;
  }

  .head1 .right {
    gap: 12px;
  }

  .head1 .head-btn {
    height: 32px;
    padding: 0 14px;
  }

  .head1 .navbar-toggle {
    display: inline-block;
  }

  .head1 .navbar-toggle span {
    background: #f6cd9f;
  }

  .home1 {
    height: 88vh;
    min-height: 480px;
  }

  .home1 .con {
    left: 20px;
    bottom: 60px;
    width: calc(100% - 40px);
  }

  .home1 .con .desc {
    margin-top: 12px;
  }

  .home1 .con .C-btn1 {
    margin-top: 24px;
  }

  .home2 {
    height: 380px;
  }

  .home2 .bg {
    top: 0;
    height: 100%;
  }

  .home2 .t1 {
    left: 0;
    top: 50%;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    transform: translateY(-50%);
  }

  .home3 {
    height: auto;
    overflow: visible;
    padding: 60px 0;
  }

  .home3 .stage {
    height: auto;
  }

  .home3 .C-title {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0 20px;
  }

  .home3 .home3-pic {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 24px;
  }

  .home3 .home3-pic img {
    height: auto;
  }

  .home3 .h3cards {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 24px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .home3 .h3card {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .home3 .h3card .glow {
    opacity: 1;
  }

  .home3 .h3card .in {
    height: auto;
    padding: 24px;
  }

  .home3 .h3card .l .tit {
    width: auto;
    margin-top: 6px;
  }

  .home3 .h3card .ico {
    width: 28px;
  }

  .home3 .h3card .desc {
    width: auto;
    margin-top: 16px;
  }

  .home4 {
    height: auto;
    padding: 60px 20px;
  }

  .home4 .stage {
    height: auto;
  }

  .home4 .bg {
    display: none;
  }

  .home4 .points {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    pointer-events: auto;
  }

  .home4 .h4point {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }

  .home4 .h4point .ico {
    width: 16px;
    height: 16px;
  }

  .home4 .h4cons {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 28px;
  }

  .home4 .h4video {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: 8px;
    margin-bottom: 20px;
  }

  .home4 .h4video .pic {
    width: 100%;
    height: 180px;
  }


  .home4 .h4video .bar {
    margin-top: 8px;
    gap: 8px;
  }

  .home4 .h4video .bar .play {
    width: 24px;
    flex-shrink: 0;
  }

  .home4 .bullets {
    margin-top: 20px;
  }

  .home4 .bullet {
    position: relative;
  }

  .home4 .bullet i {
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    position: absolute;
    right: 100%;
    top: 0.8em;
    margin-right: 4px;
  }

  .home4 .h4con .C-btn1 {
    margin-top: 20px;
  }

  .home4 .h4bar {
    display: none;
  }

  .home5 {
    padding: 60px 0;
    overflow: hidden;
  }

  .home5 .stage {
    padding: 0 20px;
  }

  .home5 .C-title {
    margin-top: 0;
  }

  .home5 .h5list {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 24px 0 0;
  }

  .home5 .h5item {
    width: 100%;
    height: auto;
    padding: 20px;
  }

  .home5 .h5item:first-child {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .home5 .h5item .num {
    margin-top: 6px;
  }

  .home5 .earth-box {
    width: 330px;
    height: 330px;
    margin: 24px auto 0;
    overflow: hidden;
  }

  .home5 .h5earth {
    width: 1006px;
    height: 1006px;
    transform: scale(0.328);
    transform-origin: top left;
  }

  .home5 .h5earth #earthCanvas {
    left: 103px;
    top: 103px;
    width: 800px;
    height: 800px;
  }

  .home5 .h5points {
    display: none;
  }

  .home6 {
    padding: 60px 0 0;
  }

  .home6 .zuo {
    width: 100%;
    padding: 0 20px;
  }

  .home6 .zuo .C-title .desc {
    margin-top: 12px;
  }

  .home6 .zuo .C-btn1 {
    margin-top: 24px;
  }

  .home6 .h6grid {
    width: 100%;
    gap: 28px 12px;
    margin-top: 36px;
    padding: 0 20px;
  }

  .home6 .h6grid .item {
    padding: 0 12px;
  }

  .home6 .h6grid .item .num {
    margin-top: 8px;
  }

  .home6 .h6pic {
    position: static;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 36px;
  }

  .home6 .h6pic img {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .home7 {
    padding: 70px 20px;
  }

  .home7 .h7bg {
    top: 0%;
    right: 0;
    width: 65%;
  }

  .home7 .C-title .desc {
    width: 100%;
  }

  .home7 .h7btns {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .foot {
    height: auto;
  }

  .foot .foot-bg {
    left: -20px;
    top: auto;
    bottom: 0;
    width: 100%;
  }

  .foot .foot-in {
    height: auto;
    padding: 40px 0 24px;
  }

  .foot .foot-brand {
    padding-top: 0;
  }

  .foot .foot1 {
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .foot .foot-nav {
    gap: 20px;
    flex-wrap: wrap;
  }

  .foot .share-list {
    gap: 12px;
  }

  .foot .share-list .share {
    width: 36px;
    height: 36px;
    border-radius: 100%;
  }

  .foot .share-list .share img {
    width: 16px;
  }

  .foot .foot-line {
    height: 1px;
    margin-top: 20px;
  }

  .foot .foot-info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .foot .foot-bottom {
    position: static;
    margin-top: 24px;
  }

  .foot .foot2 {
    margin-top: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .foot .foot2 .copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .foot .foot2 .links i {
    margin: 0 6px;
  }

  .foot .goTop {
    gap: 6px;
  }

  .foot .goTop img {
    width: 6px;
  }

  .C-btn1 {
    height: 40px;
    padding: 0 20px;
  }

  .C-btn1 .light {
    width: 80px;
    bottom: -4px;
  }

  .C-btn2 {
    height: 40px;
    padding: 0 20px;
  }

  .C-btn2 .light {
    width: 80px;
    bottom: -4px;
  }
}