*{
box-sizing:border-box;
}


body{

margin:0;

font-family:
"Microsoft YaHei",
Arial;

background:#f6f8fb;

color:#333;

}


.container{

max-width:1200px;

margin:auto;

padding:0 20px;

}



.header{

background:
linear-gradient(
135deg,
#00b4db,
#0083b0
);

color:white;

padding:20px 0;

}


.header a{

color:white;

text-decoration:none;

}


nav a{

margin-right:20px;

}



.hero{

background:

linear-gradient(
120deg,
#36d1dc,
#5b86e5
);

color:white;

padding:80px 0;

text-align:center;

}


.hero h2{

font-size:42px;

}



.search-box{

margin-top:30px;

}


.search-box input{

width:60%;

padding:15px;

border-radius:30px;

border:0;

}



.search-box button{

padding:15px 30px;

border:0;

border-radius:30px;

background:#ff9800;

color:white;

}



.title{

margin-top:50px;

}



.city-grid{

display:grid;

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

gap:20px;

}



.card{

background:white;

padding:25px;

border-radius:20px;

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

}


footer{

margin-top:50px;

background:#222;

color:white;

padding:30px 0;

text-align:center;

}

.city-page{

padding-top:40px;

}



.breadcrumb{

font-size:14px;

color:#888;

margin-bottom:30px;

}



.city-page article{

background:#fff;

padding:40px;

border-radius:24px;

}



.city-page h1{

font-size:36px;

margin-bottom:10px;

}



.city-en{

color:#888;

font-size:18px;

margin-bottom:30px;

}



.info-card{

margin-top:30px;

padding:25px;

background:#f8fbff;

border-radius:18px;

}



.info-card h2{

color:#0083b0;

}

.spot-page{

padding-top:40px;

}



.spot-page article{

background:#fff;

padding:40px;

border-radius:24px;

}



.spot-page h1{

font-size:36px;

}



.spot-en{

color:#888;

font-size:18px;

margin-bottom:30px;

}
.spot-cover img{

width:100%;

max-height:500px;

object-fit:cover;

border-radius:20px;

}



.info-grid{

display:grid;

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

gap:20px;

}



.gallery{

margin-top:40px;

}



.gallery-list{

display:grid;

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

gap:15px;

}



.gallery-list img{

width:100%;

height:220px;

object-fit:cover;

border-radius:15px;

}