body{ font-family: "Source Han Sans", "PingFang SC", "Microsoft YaHei", sans-serif;}
        p {
            line-height: 1.6;
        }
        nav {
            background-color: #3777e2;
            padding: 10px;
            text-align: center;
            width: 100%;
            max-width: 750px;
            margin: 0 auto;
            box-sizing: border-box;
            position: relative; 
        }
        
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: inline-block;
        }

        nav ul li {
            float: left;
        }

        nav ul li a {
            display: block;
            color: #fff;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-weight: bold;
        }

        nav ul li a:hover {
            background-color: #fff;
            color: #2060ef;
            border-radius: 5px;
        }

      nav.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    transition: top 0.3s ease;
}
 .navbar {
           
            position: relative; /* 初始状态 */
            top: 0;
           
        }

        .navbar.fixed {
            position: fixed;
            top: 0;
           
            width: 100%;
            z-index: 1000;
        }

        .pc_body {
            max-width: 750px;
            margin: 0 auto;
        }

        .pc_btn {
            width: 900;
            position: fixed;
            bottom: 5px;
            left: calc((100vw - 900px) / 2);
            overflow: hidden;
            z-index: 1;
        }

        .mobile_btn {
            width: 100vw;
            position: fixed;
            bottom: 5px;
            left: 0;
            overflow: hidden;
            z-index: 1;
        }

        @keyframes rocking {
            0% {
                transform: rotate(0deg)
            }

            25% {
                transform: rotate(0deg)
            }

            50% {
                transform: rotate(2deg)
            }

            75% {
                transform: rotate(-2deg)
            }

            100% {
                transform: rotate(0deg)
            }
        }

        .bg_color {
            background-color: #ffffff;
            position: relative;
        }

        .fixed_bottom {
            left: 50%;
            transform: translateX(-50%);
            position: absolute;
            bottom: 35%;
            right: 0;
        }

        .bg_color2 {
            background-color: #ffffff;
        }

        .bg_color3 {
            background-color: #ffffff;
            text-align: center;
        }

        .andh {
            animation: rocking 1s infinite;
            animation-timing-function: cubic-bezier(0, 0, .58, 1);
            transition: .2s;
        }
        .bt_link{position:relative}

        .video-mg {
            width: 100%;
            border-radius: 10px;
        }
        
    
.bannerTop{position:relative}
.bannerTop .tg{position: absolute;
    bottom: 30px;
    left: 19%;}
    .tg {
    display: flex;              
    align-items: center;       
    justify-content: center;    
}
.bt_link .tg{
    position: absolute;
    bottom: 48%;
    left: 19%;
    
}
.bt_link  .tgpd{
  position: absolute;
    bottom:48%;
    right: 23%;
    
}
.bt_link .tg a,.bt_link  .tgpd a{color:#000}
.bannerTop .tgpd{
    position: absolute;
    bottom: 30px;
    right: 23%;}
    
.tg,.tgpd {
    display: flex;             
    align-items: center;        
    justify-content: center;    
}

.tg span,.tgpd span {
    margin-right: 10px;     
}

.tg img,.tgpd img {
    vertical-align: middle;  
    border-radius: 5px;
}
.tg a,.tgpd a{
        color: #478ae4;
    font-weight: bold;
    text-decoration: none;
}
    @media (max-width: 768px) {
          nav ul li a {
        padding: 14px 5px;
    }

    .tg img, .tgpd img {
        width: 30px;
    }

    .bannerTop .tg {
        position: absolute;
        bottom: 15px;
        left: 15%;
        font-size: 14px;
    }

    .bannerTop .tgpd {
        position: absolute;
        bottom: 15px;
        right: 15%;
        font-size: 14px;
    }
    .bt_link .tg a,.bt_link .tgpd a{
        font-size: 14px;
    }
    
   .bt_link .tg {
        position: absolute;
        bottom: 48%;
        left: 15%;
        font-size: 14px;
    }

   .bt_link .tgpd {
        position: absolute;
        bottom: 48%;
        right: 10%;
        font-size: 14px;
    }
    
    
        }
        html{
            scroll-behavior: auto;
        }
    .video-box{
           background: #c0defa;
               padding: 0 10px;
    }
     .video-box h2{
         margin: 0;
         padding: 20px 0;
         color: #261eaf;
         text-align: center;
         
    }
.video-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
 
}

.video-mg {
    width: 31%;
    height: auto;
}
  .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);
    }

    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
      width: 100%;
      height: 100%;
      stroke-width: 4px;
      stroke: var(--swiper-theme-color);
      fill: none;
      stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
      stroke-dasharray: 125.6;
      transform: rotate(-90deg);
    }
      .fkSwiper{height:600px}
      .dkSwiper{height:500px}
    .gdSwiper {height:550px}

    .fkSwiper .swiper-slide img{    object-fit: contain;background:#c0defa}
    .dkSwiper .swiper-slide img,.gdSwiper .swiper-slide img{ object-fit: cover;}
    .xs-none{display:none}
     .mySwiper  .lb-title {padding:10px 0;background:#c0defa}
@media (max-width: 768px) {

    .sticky {
    position: fixed;  
    top: 0;
    width: 100%;     
    z-index: 999;
    transition: top 0.3s ease; 
}
     .gdSwiper{height:300px}
     .xs-none{display:block}
     .xs-hidden{display:none}
     
      .fkSwiper2{height: max-content;background:#c0defa}
      .dkSwiper2{height:400px}
    .gdSwiper2 {height:350px}

    .fkSwiper2 .swiper-slide img{    object-fit: contain;background:#c0defa}
    .dkSwiper2 .swiper-slide img{ object-fit: contain;}
    .gdSwiper2 .swiper-slide img{object-fit: cover;}
  

}
.tf_style{background:#c0defa;padding:10px 0}