html,
        body {
            position: relative;
           # height: 100%;
            background-color: #101623;
        }

        body {
            background: #101623;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #fff;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        footer{
            width: 100%;
        }
        .container-view{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 720px;
            height: auto;
        }
        .mySwiper{
            width: 100%;
            height: auto;
            padding-bottom: 20px;
            --swiper-theme-color: #f0b129;
            --swiper-pagination-bullet-inactive-color: #fff;
            --swiper-pagination-bullet-inactive-opacity:1;
        }
        .swiper {
            
        }
        .swiper2{
            width: 90%;
            padding-bottom: 1.5rem;
        }
        .mySwiper3{
            width: 100%;
            height: auto;
            --swiper-theme-color: #f0b129;
            --swiper-pagination-bullet-inactive-color: #fff;
            --swiper-pagination-bullet-inactive-opacity:1;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #101623;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

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

        .center{
            display: flex;position: relative;width: 100%;
            flex-direction: column;justify-content: center;align-items: center;
        }
        .imgWidth{
            width: 50%;
            margin: 15px;
        }
        .topLogo{
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .img-title{
            width: 40%;
        }
        .pb-15{
            padding-bottom: 15px;
        }
        .pt-15{
            padding-top: 15px;
        }
        .mb-15{
            margin-bottom: 15px;
        }
        .mt-15{
            margin-top: 15px;
        }

        .url-list{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .list-item{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        .list-item-content{
            width: 80%;position: relative;display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .list-item-content img{
            width: 100%;
        }
        .list-item-text{
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-bottom: 2px;
            font-weight: bold;
        }
   
        .list-item-text-l{
            width: 50%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #fcf29b;
        }
        .list-item-c{
            width: 20%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #000000;
        }
        .list-item-text-r{
            width: 30%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #fcf29b;
            user-select: none;
            -webkit-user-select: none;
            height: 100%;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            padding: 10px;width: 90%;
          }
          .grid-item {
            padding: 6px;
            font-size: 30px;
            text-align: center;
          }
          .grid-item img{
            width: 100%;
          }

          .bottom-bar{
            position: fixed;
            bottom: 0px;
            width: 100%;
            z-index: 9;
            height: 60px;
            max-width: 720px;
            overflow: hidden;
          }
          .bottom-bar-bg{
            width: 100%;
            object-fit: cover;
          }
          .bottom-content{
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
          .bottom-img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
          }
          .bottom-left{
            width: 70%;height: 100%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
          }
          .bottom-right{
            width: 30%;height: 100%;position: relative;
          }
          .logo{
            height: 80%;
            object-fit: contain;
            padding-left: 0.2rem;
          }
          .title{
            height: 60%;
            object-fit: contain;
            padding-left: 1%;
          }
          .down{
            position: absolute;
            right: 0;
            width: 100%;
            height: 100%;
            display: flex;flex-direction: row;justify-content: flex-end;align-items: center;
          }
          .downLoadImg{
            height: 60%;padding-right: 0.2rem;
          }
          .animated {
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }
        
        .animated.infinite {
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite
        }
        
        @-webkit-keyframes tada {
            from,to {
                -webkit-transform: scale3d(1,1,1);
                transform: scale3d(1,1,1)
            }
        
            10%,20% {
                -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
                transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
            }
        
            30%,50%,70%,90% {
                -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
                transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
            }
        
            40%,60%,80% {
                -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
                transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
            }
        }
        
        @keyframes tada {
            from,to {
                -webkit-transform: scale3d(1,1,1);
                transform: scale3d(1,1,1)
            }
        
            10%,20% {
                -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
                transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
            }
        
            30%,50%,70%,90% {
                -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
                transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
            }
        
            40%,60%,80% {
                -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
                transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
            }
        }
        
        .tada {
            -webkit-animation-name: tada;
            animation-name: tada
        }
        
        .btn{
            height: 100px;
        }
        .btn1{
            position: absolute;
            top: 0;
            z-index: 1;
            width: 90%;
        }
        .customer{
            position: fixed;
            bottom: 40%;
            width: 1.6rem;
            z-index: 9;
            right: 0;
            max-width: 100px;
        }
        .customer img{
            width: 100%;
            animation: hob_shake 1s infinite;
            -webkit-animation: hob_shake 1s infinite;
        }
        @keyframes hob_shake {
            15%,
            45% {
              -webkit-transform: rotate(3deg);
              transform: rotate(3deg);
              transform-origin: 50% 100%
            }
            30% {
              -webkit-transform: rotate(-3deg);
              transform: rotate(-3deg);
              transform-origin: 50% 100%
            }
            60%,
            100% {
              -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
              transform-origin: 50% 100%
            }
          }
        @-webkit-keyframes hob_shake {
            15%,
            45% {
              -webkit-transform: rotate(3deg);
              transform: rotate(3deg);
              transform-origin: 50% 100%
            }
            30% {
              -webkit-transform: rotate(-3deg);
              transform: rotate(-3deg);
              transform-origin: 50% 100%
            }
            60%,
            100% {
              -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
              transform-origin: 50% 100%
            }
          }

          .swiper-slide2{
            border-radius: 12px;
          }
          .swiper-slide2 img{
            border-radius: 12px;
          }

          .dialog{
            display: block;
            position: fixed;
            z-index: 66;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
          .dialog-bg{
            position: absolute;
            z-index: 66;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
          .dialog-view{
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
          .dialog-content{
            width: 90%;
            height: auto;
            min-height: 100px;
            z-index: 67;
            border-radius: 12px;
            overflow: hidden;
            max-height: 96vh;
          }
          .dialog-title-view{
            min-height: 50px;
            width: 100%;
            z-index: 65;
            text-align: center;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
          }
          .dialog-title-left{
            width: 40px;
            min-height: 40px;
          }
          .dialog-title-right{
            width: 40px;
            min-height: 40px;
            cursor: pointer;
          }
          .center{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .close-view{
            width: 40px;
            height: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 66;
          }
          #close {
            display: inline-block;
            width: 30px;
            height: 2px;
            background: #ffffff;
            transform: rotate(45deg);
        }
    
        #close::after {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background: #ffffff;
            transform: rotate(-90deg);
        }
/*媒体查询*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {
    .btn{height: 260px;}
    .list-item{font-size: 26px;}
    .bottom-bar{height: 80px;}
	.down{right: 0.2rem;}

.dialog-content{
            width: 40%;
            

}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
   .btn{height: 200px;}
   .list-item{font-size: 22px;}
   .bottom-bar{height: 80px;}
   .down{right: 0.2rem;}
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
    .list-item{font-size: 18px;}
    .bottom-bar{height: 80px;}
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
    .list-item{font-size: 14px;}
    .bottom-bar{height: 80px;}
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
    .list-item{font-size: 12px;}
}