*{

box-sizing:border-box;

}



body{


margin:0;


min-height:100vh;



/*
修改这里更换背景图片
*/

background-image:url("https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEW4ldqT1dqX_IGQAfBrGQel_QM3dF7pQACHiQAAuHegVasGxMsHijHvjwE.jpg");



background-size:cover;


background-position:center;


background-attachment:fixed;



font-family:
"Microsoft YaHei",
Arial,
sans-serif;



}





.container{


width:90%;


max-width:1200px;


margin:auto;


padding-top:60px;


}







/* =====================
搜索区域
===================== */


.search-area{


text-align:center;


margin-bottom:50px;


}







/* 搜索框 */


.search-box{


display:flex;


width:600px;


height:55px;


margin:auto;



background:
rgba(255,255,255,.35);



backdrop-filter:
blur(15px);



border-radius:30px;



overflow:hidden;



}





.search-box input{


flex:1;



border:none;


outline:none;



background:transparent;



padding-left:25px;



font-size:18px;



color:white;



}



.search-box input::placeholder{


color:white;


opacity:.8;


}







/* 搜索按钮 */


.search-btn{


width:60px;



border:none;



cursor:pointer;



display:flex;



align-items:center;



justify-content:center;



background:transparent;



transition:.3s;



}





.search-btn svg{


width:26px;


height:26px;



stroke:white;



stroke-width:2;



fill:none;



}





.search-btn:hover{


background:
rgba(255,255,255,.25);



}









/* =====================
搜索引擎按钮
===================== */


.engine-buttons{


margin-top:20px;



display:flex;



justify-content:center;



gap:20px;



}





.engine{


width:140px;


height:42px;



border:none;



border-radius:25px;



display:flex;



align-items:center;



justify-content:center;



gap:10px;



cursor:pointer;



font-size:16px;



color:white;



background:
rgba(255,255,255,.25);



backdrop-filter:
blur(12px);



transition:.3s;



}






.engine img{


width:22px;


height:22px;



object-fit:contain;



}





.engine:hover{


transform:
translateY(-4px);



}





.engine.active{


background:white;



color:#333;



box-shadow:
0 5px 15px rgba(0,0,0,.15);



}








/* =====================
网站布局
===================== */


.sites{


display:grid;



grid-template-columns:
repeat(7,1fr);



gap:35px 25px;



}







.site{


text-align:center;



cursor:pointer;



}







/* Logo卡片 */


.icon-box{


width:90px;


height:90px;



margin:auto;



border-radius:22px;



overflow:hidden;



transition:.3s;



}





.icon-box img{


width:100%;


height:100%;



object-fit:cover;



}





.site:hover .icon-box{


transform:
translateY(-8px)
scale(1.08);



}







.site-name{


margin-top:12px;



font-size:15px;



color:white;



text-shadow:
0 1px 5px #555;



}







/* 平板 */


@media(max-width:900px){



.sites{


grid-template-columns:
repeat(4,1fr);



}



}








/* 手机 */


@media(max-width:600px){



.search-box{


width:95%;



}




.engine{


width:120px;



}



.sites{


grid-template-columns:
repeat(3,1fr);



}



}