/* styles.css */
body {
    margin: 0;
 }
.banner{background: url("../img/index_banner.jpg");height: 500px;text-align: center;}/* banner背景图 */
.banner .banner_img{margin-top: 100px;    width: 80%; /* 将宽度设置为原来的 80% */height: auto; /* 自动调整高度以保持纵横比 */}/* banner透明图 */
.input{margin-top: 50px}

.input .url/* 首页url输入框 */
  { width: 730px;
    height: 60px;
    line-height: 60px;
    background: white;
    padding: 0 20px;
    font-size: 20px;
    color: #333;
    border:none;
    vertical-align: text-top;
    outline:none;
    border-radius: 10px 0px 0px 10px;
  }
.input .search-btn/* 生成短连接输出按钮 */
  { width: 150px;
    height: 100%;
    background: linear-gradient(-90deg,rgba(84,124,255,1) 0%,rgba(92,197,253,1) 100%);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    vertical-align: text-top;
    height: 60px;
    line-height: 60px;
    border-radius: 0px 10px 10px 0px;
    border:none;
  }

.banner .search-view .urls/* 批量生成短连接输入框 */
  { width: 1000px;
    height: 300px;
    border-radius: 10px;
    margin-top: 30px;
    padding: 20px;
    font-size: 15px;
    border:none;
  }

.banner .search-view .search-btn/* 批量生成短连接输出按钮 */
  { width: 8rem;
    height: 60px;
    background: linear-gradient(-90deg,rgba(84,124,255,1) 0%,rgba(92,197,253,1) 100%);
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 10px;
  }

.banner .input .custom/* 自定义输入框 */
  { width: 885px;
    height: 50px;
    line-height: 60px;
    background: white;
    padding: 0 20px;
    font-size: 20px;
    color: #333;
    border:none;
    vertical-align: text-top;
    outline:none;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 30px; /* 添加的间距 */
  }

.output-section /* 短连接内容输出框 */
  { width: 900px;
    border-radius: 15px;
    background: #fff;
    color: #333;
    display: inline-block;
    box-shadow: 0 0 5px 0 rgba(229,232,240,1);
    padding: 20px;
    text-align: left;
    display: none;
    margin: 0 auto;
    top:5px;
    margin-top: 40px; /* 添加上边框间距 */
    z-index: 999;
  }
  
.ad{text-align:center;font-size: 100px;color: #DDDDDD;z-index: 0;}

/* 响应式样式：移动端布局 */
@media screen and (max-width: 768px) {
    .banner{background: url("../img/index_banner.jpg");height: 250px;}
    .banner .banner_img{margin-top: 50px;}
    .input{margin-top: 20px}
    .input .url{
    width: 60%;
    height: 20px;
    line-height: 20px;
    padding:10px;
    font-size: 15px;
    border-radius: 10px 0px 0px 10px;
    }
    .input .search-btn{
    width: 27%;
    height: 30px;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    border-radius: 0px 5px 5px 0px;
    }
   .banner .search-view .urls{
    width: 80%;
    height: 100px;
    font-size: 10px;
    }
    
    .banner .search-view .search-btn{
    width: 8rem;
    height: 30px;
    font-size: 15px;
    border-radius: 5px;
        
    }
    
    .banner .input .custom{
    width: 90%;
    height: 30px;
    line-height: 20px;
    padding: 5px;
    font-size: 15px;
    border-radius:5px;
    margin-bottom: 16px; /* 添加的间距 */
   }
   
    .output-section {
    width: 80%; /* 使用百分比，适应不同屏幕宽度 */
    display: none;
    margin: 40px auto 0 auto; /* 顶部间距 + 居中 */
    padding: 15px;
    font-size: 14px;
   }
    .ad{font-size: 30px;
        
    }
}

.footer {
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    padding: 5px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1000;
    font-size: 12px; /* 缩小字体 */
        }