* {
  margin: 0;
  padding: 0;
}
ol, ul {
  list-style-type: none;
}
a {
  color: #666;
  text-decoration: none;
}
.left {
  float: left;
}
.right {
  float: right;
}

.container {
    width: 1200px;
    margin: 0px auto;
    padding: 0px;
}

/* 设置页面顶部的样式 */
#top {
    background-color: #3f8acc;
    height: 8px;
}

/* 设置页面导航的样式 */
#nav {
    height: 90px;
    width: 100%;
    background-color: #090909;
}
#nav  li {
    float: left;
    margin: 0px 20px;
    line-height: 90px;
}
#nav img {
    width: 90px;
    height: auto; /* 保持图片宽高比，避免图片变形 */
}
#nav  li a {
    color: #f8f6f6;
    font-weight: bold;
}
#nav  li a:hover {
    color: #3f8acc;
    font-weight: bold;
}
/* 设置页面banner的样式 */
#banner {
    background-image: url("../images/banner.jpg"); 
    background-size: cover; /* 使背景图片覆盖整个区域 */
    background-position: center; /* 将背景图片居中 */
    color: rgb(246, 243, 243); 
    height: 350px; /* 设置高度 */
    text-align: center;
}

/* 设置页面must-do的样式 */
#must-do {
    height: 600px;
    width: 100%;
    background-color: #f2f2f2;
}
#must-do .must-top {
    margin: 20px;
    text-align: center;   
    height: 80px; 
}
#must-do .must-top img {
    width: 50px;
    height: auto; /* 保持图片宽高比，避免图片变形 */
}
#must-do li {
    width: 280px;
    height: 480px;
    margin: 0px 8px;
    background-color: azure;
    float: left;
    border-bottom: 2px solid #535050;
    transition: all 0.3s ease-in-out;
}
#must-do li:hover {
    border-bottom: 4px solid #3f8acc;
    transform: translateY(-10px);
}
#must-do li img {
    width: 280px;
    height: 300px;
}
#must-do li h2 {
    text-align: center;
    margin-top: 10px;
}
#must-do li p {
    text-align: center;
    margin: 10px 0px;
}
#must-do .places {
    color: #2580cf;
}
/* 设置页面home的样式 */
#home {
    height: 1450px;
    background-color: #f2f2f2;
}
#home .home-top {
    margin: 20px;
    text-align: center;   
    height: 80px; 
}
#home .home-top img {
    width: 50px;
    height: auto; /* 保持图片宽高比，避免图片变形 */
}
/* 酒店列表样式 */
.hotel-list {
    margin-top: 30px;

}

.hotel-card {
    background-color:  azure;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
   box-sizing: border-box;
    display: flex;
    transition: transform 0.3s ease;
    padding: 10px;
    height: 200px;
}

.hotel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hotel-image {
    flex: 0 0 35%;
    max-width: 35%;
    position: relative;
}

.hotel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hotel-info {
    flex: 0 0 65%;
    max-width: 65%;

}

.hotel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.hotel-name {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

.hotel-description {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.hotel-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.hotel-price {
    text-align: right; /* 改为整体右对齐 */

}

.hotel-location {
    color: #999;
    font-size: 0.9rem;
}
.price-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #3f8acc;
}

.price-unit {
    font-size: 0.9rem;
    color: #666;
}



/* 设置页面service的样式 */
#service {
    height: 100px;
    background-color: #f2f2f2;
   
}
#services dl {
    width: 180px;
    height: 70px;
    
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 10px; /* 内边距 */
}

#services dt {
    flex: 0 0 40px; /* 固定左侧图片容器宽度 */
    margin-right: 10px; /* 与右侧内容的间距 */
}

#services dt img {
    width: 100%; /* 图片宽度占满容器 */
    height: auto;
    object-fit: contain; /* 保持图片比例 */
}

#services dd {
    display: flex; /* 为dd设置flex布局 */
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: space-between; /* 分布在容器的开始和结束之间 */
    height: 100%; /* 高度占满容器 */
}

#services dd .dd1 {
    font-weight: bold;
}

#services dd .dd2 {
    color: #666; 
}
#services li {
    float: left;
    margin: 0px 10px;
    transition: all 0.3s ease-in-out;
}
#services li:hover {
    transform: translateY(-10px);
}
#services ul{
    width: 1110px;
    margin: 0px auto;
    height: 100px;
}
#contact {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
    border-top: 2px solid #555;
    margin-top: 30px;
}