.body {
    height: 110vh; 
    width: 100%;
}

.index {
    background-image: url("/images/zhuye2.png");
    position:relative; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background-position: center 0; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -o-background-size: cover;
    max-width: 2537px;
}
.button-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.button-groups {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
}

.button-group {
    position: relative; 
    display: inline-block;
    margin-top: 11.5%;
}
.button-you {
    position: absolute;
    top: 10px;
    right: 10px; 
}

.button-you a {
    display: inline-block;
}
.button img{
    width: 150px;
}
.button1 img{
    width: 150px;
}

  .modal {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
  }

  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    max-width: 600px; 
  }


@media (max-width: 1919px) {
    .button-img{
        width: 908px;
    }
    .button-group {
        margin-top: 18.5%;
    }
}
@media(max-width:1600px){
    .button-img{
        width: 708px;
    }
    .button img{
        width: 120px;
    }
    .button1 img{
        width: 120px;
    }
    
}


@media(max-width:980px){  
    .button-img{
        width: 100%!important;
    }
    .button img{
        width: 250px!important;
    }
    .button1 img{
        width: 250px!important;
    }
    
    .index{
         background-image: url("/images/v2/bg.png");
    }
    
    .button-container {
        display: block;
    }
    .button-group {
        margin-top: 25%!important;
    }
    .layui-layer-page {
        width: 70%!important;
        height: 35%!important;
        left: 173px!important;
    }
    #wxCode {
        width: 550px !important;
    }
    .tips {
        width: 500px !important;
    }
    .layui-layer-title {
        font-size: 36px;
    }
    
    .modal-content {
        max-width: none; 
        height: 50%;
    }
    #form-container{
        height: 100%;
    }
    #form {
        max-width: 850px!important;
        margin-top: 10% !important;
        font-size: -webkit-xxx-large;
        height: 100%;
    }
    .layui-input, .layui-select, .layui-textarea{
        height: 100px!important;
    }
    #click {
        height: 100px !important;
        font-size: unset!important;
    }
    .layui-form-radio>* {
        font-size: 50px;
    }
    .layui-form-radio>i {
        font-size: 40px;
    }
    .layui-form-switch>div {
        font-size: 24px;
    }
    .layui-btn {
        height: 80px;
        font-size: 53px;

    }
    #userName::placeholder {
        font-size: 32px;
    }
    .layui-form-select dl {
        top: 100px;
        min-height: 500px;
    }
    .layui-form-select dl dd.layui-this {
        width: 100%!important;
    }

    .layui-form-select dl dd, .layui-form-select dl dt {
        padding: 14px 10px;
        line-height: 70px;
    }
    .layui-layer-dialog .layui-layer-content {
        line-height: 62px!important;
        font-size: 42px!important;
    }
   .layui-layer .layui-layer-dialog {
        top: 831px !important;
        left: 178px !important;
        width: 70% !important;
        height: 15% !important;
    }
    .layui-layer-dialog{
        top: 831px !important;
        left: 178px !important;
        width: 70% !important;
        height: 15% !important;
    }
    .layui-layer-btn a {
        height: 67px;
        width: 100px;
        font-size: 32px;
        line-height: 67px;
    }
    .layui-layer-btn {
        padding: 0 37px 12px;
    }
     .layui-layer-msg{
            width: 800px!important;
            height: 120px!important;
        }
            
}





@media(max-height:900px){
    .button-group {
        margin-top: 3.5%;
    }
}


        .layui-layer layui-layer-page{
            width: 400px!important;
        }
        .layui-layer{
            width: 400px;
        }
        
        .layui-layer-page{
            width: 400px;
        }
        
        
        #game .col-md-5 input{
            display: none;
        }
          .tips{
            width: 300px;
        }
        #refresh-btn {
        position: relative;
        display: none; /* 初始时隐藏 */
        cursor: pointer; /* 鼠标悬停时变为手形图标 */
        background: url(/images/guoqi.png) no-repeat;
        background-size: cover;
        width: 300px;
        height: 300px;
        margin: auto;

    }

    #refresh-btn:before  {
        content: ""; 
        position: absolute; 
        top: 0;
        left: 0; 
        width: 100%;
        height: 100%; 
        background-color: hsla(0,0%,100%,.98);
        z-index: 1;
    }
    #refresh-btn span {
        position: absolute; 
        left: 50%;
        transform: translateX(-50%); 
        color: white; 
        font-size: 16px;
        z-index: 2;
        pointer-events: none; 
        color: #121111;
        bottom: 75px;
        font-weight: 100;
    }
    
        #game{
            margin-left: 40px!important;
        }
        .layui-form-select .layui-edge {
            /*right: -45px;*/
        }
        @font-face {
            font-family: "CustomFont" !important;
            src: url("/public/fonts/ccht.TTF") !important;
        }
        #app {
            color: #78828a;
            font-family: "CustomFont" !important;
            font-weight: bold;
        }
        .card .card-body {}
        .alert,
        .alert-danger {
            position: fixed;
            left: 50%;
            top: 30%;
            transform: translate(-50%, -50%);
        }
        #code {
            text-align: center;
        }
        .loginBox .col-form-label {
            flex: unset;
            width: 78px;
            padding-left: 0;
        }
        .layui-input-block {
            margin-left: 0px;
            color: #1a1919;
            text-align: center;
        }
        .layui-input-block input{
            display: none;
        }
        .layui-form-switch {
            margin-top: 0px;
        }
        .btn-success {
            padding: 0 100px;
            color: #fff;
            background-color: #0085fe;
            border-color: #0085fe;
        }
        .btn-success:hover {
            padding: 0 100px;
            color: #fff;
            background-color: #0085fe;
            border-color: #0085fe;
        }
        .layui-form-onswitch {
            color: #fff;
            background-color: #0085fe;
            border-color: #0085fe;
        }
      
        .loginBox .card-body {
          padding-right: 48px!important;
        }

        #code {
            margin-top: 4rem;
        }
        .layui-layer-content {
            color: #000206 !important; 
            height: auto!important;
            text-align: center;
        }
        .layui-layer-msg{top:200px!important;  color: #000206 !important;}
        input,
        textarea {
            height: 36.5px;
            border-color: #e9edef!important;
            background: #e2f3fb !important;
            color: #78828a !important;
            font-family: "CustomFont" !important;
        }
        
        /*input,*/
        #form select, textarea{color: var(--text-primary)!important;
            background-color: rgba(255, 255, 255, .6)!important;
            border: 1px solid transparent!important;
            border-radius: 4px;line-height: 1.3!important;backdrop-filter: blur(40px)!important;
            box-sizing: border-box!important;}
            
        #form .layui-input:hover, .layui-textarea:hover {
            border-color: #777!important;
            
        }
         #form .layui-input:focus{
              border-color: #777!important;
               box-shadow: 0 0 0 1px #777!important;
         }
        #form .in:focus{
            background-color: transparent;
            border: none;
            box-shadow: none; 
            
        }
        .title{
            margin-left: -7%;
        }
        .layui-form-radio div {
            color: #1c1b1b;
        }
        .layui-form-radio:hover *,
        .layui-form-radioed,
        .layui-form-radioed>i {
            color: #03a9f4;
        }
        .downloadLCon {
            display: none !important;
        }
        .downloadRCon {
            width: 100% !important;
            margin-left: unset;
            color: #202325;
        }
        .justify-content-md-center {
            -ms-flex-pack: center !important;
            justify-content: center !important;
        }
        #form {
            max-width: 650px;
            min-width: 300px;
            margin: 0 auto;
            display: none;
            margin-top: -1% ;
        }
        .bg-video {
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            z-index: -1;
            vertical-align: bottom;
            display: block;
            position: fixed;
        }
        .v1 {
            width: 100%;
            height: auto;
            min-height: 70vh;
        }
        .layui-select-title input {
               color: #434343 !important;
            font-family: "CustomFont" !important;
        }
        .downloadTit2 {
            height: 0px;
            line-height: 115px;
            letter-spacing: 10px;
            text-align: center;
            color: #000206!important;
        }
        .downloadTit1 {
            height: 50px;
            line-height: 200px;
            margin-left: 45.7%;
            letter-spacing: 6px;
             color: #000206!important;
        }
        .layui-form-select dl dd.layui-this {
            background-color: #0085fe !important;
            width: 280px;
        }
        .download1 {
            height: 100vh !important;
            position: relative;
        }
        
        #click{
            position: absolute; 
            /*right: -55px;*/
            right: 0;
            top: 1px;
            background: transparent!important;
            height: 30px ;
        }
        .downloadRCon1{
                padding-left: 6.4%;
            }

        @media(max-width:1920px) {
            .download1 {
                height: 100vh !important;
            }
        }
              @media(max-width:1707px){
            .loginBox{
                margin-top:8%!important;
            }
        }
        @media(max-width:1680px) {
            .download1 {
                height: 90vh !important;
            }
            .v1 {width: unset;}
        }
        @media(max-width:1440px) {
            .download1 {
                height: 80vh !important;
 
            }
                           .v1 {width: unset;}
        }
        @media(max-width:1266px){
            .loginBox{
                margin-top: 10%!important;
            }
        }
        @media(max-width:590px) {
            .btn-success{
                margin-left: 55px !important;
            }
            .downloadRCon1{
                padding-left: 0;
            }
            .download1 {
                height: 100vh !important;
            }
            .v1 {
                width: unset;
            }
            input {
                width: 250px !important;
            }
            .btn-success {
                margin-right: 60px;
            }

            .layui-input-block {
                margin-left: 0px;
            }

            .downloadTit1 {
                margin-left: 29.4%;
            }
            .title{
                margin-left: -30%;
            }

            .layui-form-select .layui-edge {
                right: 5px;
            }
            .layui-form-select dl dd.layui-this {
                width: 245px;
            }
            #click {
                position: unset; 
                right: 0;
                top: 5px;
                background: #ffffff !important;
                height: 40px !important;
            }
            .downloadRCon1{
                margin-left: 7%;
            }
            #game {
                margin-left: -10px !important;
            }
            .loginBox {
                margin-top: -12% !important;
            }
            #app{
                    background-color: #e9eaeb;
            }
            
            
      
        }