* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* 确保所有元素的宽度和高度包含内边距和边框 */
}
html, body {
    width: 100%;
    overflow-x: hidden; /* 禁用水平滚动条，防止内容溢出页面宽度 */
}
body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Non-prefixed version, currently
                           supported by Chrome, Opera, and Edge */
}
header {
    background-color: rgb(35,28,26,0.8);
    height: 50px;
    width: 100%; 
    position: fixed;
    background-position: center;
}
.logo-img img {
    left: 20px;
    top: 10px;
    width: 30px;
    position:fixed;
    align-items: center;
}
h1 {
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    top: 0;
    padding: 15px 60px;
}
header a {
    color: #ffffff;
    text-decoration: none;
}
header a:hover {
    text-decoration: underline;
}
header li {
    font-size: 10px;
    display: inline;
    margin-right: 4vw;
}
header ul {
    position: absolute;
    right: 5vw;
    top: 0;
    line-height: 45px;
}

.google-search {
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中（可选，取决于父元素的高度） */
    background: linear-gradient(225deg,#ff8fbf, #ff4f9b, #d8006f, #e251ff, #ac04ca, #2eed9e, #009975, #ffa536, #ff7b00, #8d8875, #575757, #000000, #000000); /* 调整后的渐变 */
    background-size: 500% 1500%; /* 增加背景的尺寸以便于动画 */
    animation: gradientAnimation 60s linear infinite; /* 动画效果，增加动画时间 */
    text-align: center;
    padding: 350px 0 600px; /* 上下内边距 */
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%; /* 从左上角的起始位置 */
    }
    20% {
        background-position: 100% 100%; /* 渐变到右下角 */
    }
    30% {
        background-position: 100% 100%; /* 停留在右下角 */
    }
    50% {
        background-position: 0% 100%; /* 渐变到左下角 */
    }
    60% {
        background-position: 0% 100%; /* 停留在左下角 */
    }
    80% {
        background-position: 100% 0%; /* 渐变到右上角 */
    }
    90% {
        background-position: 100% 0%; /* 停留在右上角 */
    }
    100% {
        background-position: 0% 0%; /* 回到左上角 */
    }
}

.google-search img {
    align-items: center;
    max-width: 100%; 
    height: auto; 
    padding: 10px 20px;
    display: block;
    margin: 0 auto; /* 使图片居中 */
    margin-top: -110px; /* 调整这个值来上移图片 */
}
.google-search h2 {
    color: white; /* 设置文字颜色为白色 */
    font-size: 20px;
    padding: 10px 20px;
}
.google-search input[type="text"] {
    margin: 30px;
    padding: 15px;
    width: 100%; /* 输入框宽度 */
    max-width: 600px; /* 最大宽度 */
    border: 0px solid #ccc; /* 边框 */
    border-radius: 25px; /* 圆角 */
    outline: none; /* 去掉聚焦时的边框 */   
}
.google-search input[type="text"]:focus {
    border-color: #000000; /* 聚焦时的边框颜色 */
}
.geoip-info-item {
    padding: 0px;
    margin: 5px 0;
    color: white;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    max-width: 90%;
    word-wrap: break-word;
}

.system-info {
    background-color: #000;
    text-align: center;
    padding: 0 0 20px;
}

/* 自适应样式 */
@media (max-width: 768px) {
    .geoip-info-item {
        padding: 5px 10px;
        font-size: 0.6rem;
    }
}




.Client {
    height: 100%;
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: baseline;
    padding: 0;
 }
 .Client div {
    text-align: center;
    padding: 100px 0 0;
    width: 100%;
    line-height: 1.5em;
 }
.Client a {
    color: #000;
    font-size:13px;
    text-decoration: none;
}
.Client a:hover {
     
    text-decoration: underline;
}
.Client h2 {
    font-size: 20px;
    margin: 20px 0;
}
.Client1 {
    height: 100%;
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: baseline;
    padding: 0;
 }
.Client1 div {
    text-align: center;
    padding: 100px 0 0;
    width: 100%;
    line-height: 1.5em;
 }
.Client1 a {
    color: #000;
    font-size:13px;
    text-decoration: none;
}
.Client1 a:hover {
     
    text-decoration: underline;
}
.Client1 h2 {
    font-size: 20px;
    margin: 20px 0;
 }
.Client2 {
    height: 100%;
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: baseline;
    padding: 0;
 }
.Client2 div {
    text-align: center;
    padding: 100px 0 0;
    width: 100%;
    line-height: 1.5em;
 }
.Client2 a {
    color: #000;
    font-size:13px;
    text-decoration: none;
}
.Client2 a:hover {
     
    text-decoration: underline;
}
.Client2 h2 {
    font-size: 20px;
    margin: 20px 0;
 }

.Common {
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: baseline;
    padding: 10% 5%;
 }
 .Common div {
    text-align: center;
    padding: 25px 0;
    height: 200px;
    width: 100%;
    line-height: 1.5em;
    
 }
 .Common a {
    line-height: 30px;
    color: #000;
    font-size:13px;
    text-decoration: none;
}
.Common a:hover {
     
    text-decoration: underline;
}
.Common h2 {
    font-size: 20px;
    margin: 20px 0;
}
.welcome p {
    height: 30px;
    font-size: 11px;
    color: #000000;
    text-align: center;
    justify-content: space-between;
}
footer {
    font-size: 10px;
    padding: 10px;
    text-align: center;
    justify-content: space-between;
    background-color: #000;
    color: #999999;
}
.menu {
    display: none;
}
.geoip-container {
    background-color: rgba(0, 0, 0); /* 设置黑色背景，并将不透明度设为0.8 */
    text-align: center;
    padding: 20px 0px 20px;
}

#geoip-info {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.geoip-info-item {
    color: white;
    padding: 5px 50px;
    border-radius: 30px;
    text-align: center;
    min-width: 100px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .geoip-info-item {
        padding: 8px 50px;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .geoip-info-item {
        padding: 5px 10px;
        font-size: 0.6rem;
    }
}

/* 响应式设计语法 */
 @media screen and (max-width:768px) {
    
    header ul {
        display: none;
    }
  header h1 {
        width: 100%; /* 调整Logo大小 */
        display: flex;
        align-items: center;
        justify-content: center; /* 水平居中对齐 */
        text-align: center; /* 文字居中 */
        left: 50%;
        transform: translateX(-50%);
    }
    .logo-img img {
        width: 30px; /* 调整Logo大小 */
        left: 50%;
        transform: translateX(-300%);
    }
    .google-search {
        
        align-items: center;
        width: 100%;
    }
    .google-search img {
        display: flex;
        margin-top: -200px; /* 调整这个值来上移图片 */
        width: 36%;
        align-items: center;
        justify-content: center;
    }
    .google-search input[type="text"] {
        margin-top: 12px; /* 调整这个值来上移图片 */
        align-items: center;
        justify-content: center;
        width: 80%;
    }
    .Client {
        display: flex;
        background-color: rgb(255, 255, 255);
        flex-direction: column;
        height: 50%;
        align-items: center;  
     }
   
    .Client div { 
        align-items: center;
        background-color: #ffffff;
    } 
    .Client h2 {
        font-size: 20px;
        text-align: center;
    }
    .Client a {
        color: #000;
        font-size:13px;
        text-decoration: none;
    }
    .Client1 {
        display: flex;
        background-color: rgb(255, 255, 255);
        flex-direction: column;
        height: 50%;
        align-items: center;  
     }
   
    .Client1 div { 
        align-items: center;
        background-color: #ffffff;
    } 
    .Client1 h2 {
        font-size: 20px;
        text-align: center;
    }
    .Client1 a {
        color: #000;
        font-size:13px;
        text-decoration: none;
    }
    .Client2 {
        display: flex;
        background-color: rgb(255, 255, 255);
        flex-direction: column;
        height: 50%;
        align-items: center;  
     }
   
    .Client2 div { 
        align-items: center;
        background-color: #ffffff;
    } 
    .Client2 h2 {
        font-size: 20px;
        text-align: center;
    }
    .Client2 a {
        color: #000;
        font-size:13px;
        text-decoration: none;
    }
    .welcome p {
        width: 100%;
    }
    footer {
         width: 100%;
    }
    .menu {
        display: block;
        background-color: transparent;
        color: white;
        font-size: 25px;
        position: absolute;
        top: 7px;
        left: 20px;
        border: none;
        cursor: pointer;
    }
    .Common {
        flex-direction: column;
        height: 100%;
        width: 100%;
     }
     .Common div {
        align-items: center;
        height: 100%;
    }
 }