/* 通配符选择器，重置所有元素的默认内外边距，并将盒模型设置为border-box */
* {
  padding: 0; /* 移除默认内边距 */
  margin: 0; /* 移除默认外边距 */
  box-sizing: border-box; /*元素的总宽度和高度包括了padding和border*/
}

/* body元素的基础样式 */
body {
  height: 100%; /* 设置body高度为100%。通常需要html元素也设置为height:100%才能使body充满整个视口高度。*/
  margin: 0px auto; /* 移除上下外边距，左右自动以实现内容块的水平居中（如果body有固定宽度的话）*/
  font-family: Arial, Helvetica, sans-serif; /* 设置默认字体栈 */
  font-size: 16px; /* 设置默认字体大小 */
  color: #666; /* 设置默认文字颜色 */
  line-height: 1.8em; /* 设置默认行高，为字体大小的1.8倍 */
}

/* 通用背景层样式类 */
.bg {
  background-repeat: no-repeat; /* 背景图像不重复平铺 */
  background-size: cover; /* 背景图像等比缩放以完全覆盖背景区域，可能会裁剪部分图像 */
  background-position: center; /* 背景图像在背景区域中居中显示 */
  position: relative; /* 设置为相对定位，作为内部绝对定位元素的定位上下文 */
  background-attachment: fixed; /* 背景图像固定，不随页面滚动而滚动，创建视差效果 */
}

/* .bg内部的文本容器样式，用于实现文本的垂直和水平居中 */
.bg .ptext{
  position: absolute; /* 绝对定位，相对于最近的已定位祖先元素 (.bg) */
  top: 50%; /* 元素的顶部边缘位于其父元素高度的50%处 */
  left: 50%; /* 元素的左侧边缘位于其父元素宽度的50%处 */
  transform: translate(-50%, -50%); /* 将元素向左移动自身宽度的50%，向上移动自身高度的50%，从而实现完美的水平垂直居中 */
}

/* .ptext内部的文本边框样式 */
.bg .ptext .border{
  font-size: 20px; /* 字体大小 */
  letter-spacing: 8px; /* 字符间距 */
  color: #fff; /* 文字颜色为白色 */
  background-color: #111; /* 背景颜色为深灰色/黑色 */
  padding: 20px; /* 内边距 */
  line-height: 3rem; /* 行高 (注意: 此处3rem可能较大, 确保与font-size协调) */
  border-radius: 4px; /* 边框圆角 */
}

/* 特定背景图片1 (花花大世界) */
.pimg1 {
  min-height: 600px; /* 元素的最小高度 */
  background-image: url('img/02.jpg'); /* 设置背景图片路径 */
}

/* 特定背景图片2 (青秀山) */
.pimg2 {
  min-height: 600px; /* 元素的最小高度 */
  background-image: url('img/01.jpg'); /* 设置背景图片路径 */
}

/* 特定背景图片3 (相思湖小镇) */
.pimg3 {
  min-height: 600px; /* 元素的最小高度 */
  background-image: url('img/03.jpg'); /* 设置背景图片路径 */
}

/* 特定背景图片4 (大明山) */
.pimg4 {
  min-height: 600px; /* 元素的最小高度 */
  background-image: url('img/04.jpg'); /* 设置背景图片路径 */
}

/* 内容区块的通用样式 */
.section {
  max-width: 1200px; /* 内容区块的最大宽度，限制内容在宽屏上不会过宽 */
  padding: 100px 0; /* 上下内边距100px，左右内边距0 */
  margin: 0 auto; /* 上下外边距0，左右自动，实现区块的水平居中（前提是元素为块级且有确定宽度） */
}

/* .section内部的h2标题样式 */
.section h2 {
  text-align: center; /* 文本水平居中 */
  margin-bottom: 50px; /* 距离下方内容的底部外边距 */
}

/*
  HTML中使用的 .section-light 类在此CSS文件中没有对应的样式定义。
  如果需要为 .section-light 添加特定样式，应在此处补充。
*/


/* “探索景点”大标题容器样式 */
.biaoti{
  width: 100%; /* 宽度占满父元素 */
  height: 200px; /* 固定高度 */
  text-align: center; /* 内部文本（如果有多行或块级子元素）水平居中 */
  line-height: 25px; /* 行高 (对于h2.bt这种大字体，此行高可能过小，主要影响基线) */
  position: absolute; /* 绝对定位 */
  left: 1px; /* 距离定位父元素的左边缘1px (这个值比较特定，通常可能是0或更大值) */
  top: 300px; /* 距离定位父元素的顶部边缘300px */
}

/* “探索景点”大标题文本样式 */
.bt{
  font-size:200px; /* 巨大的字体大小 */
  color: rgba(255,255,255,0.7); /* 文字颜色为半透明白色 */
  font-family: "LingWai SC"; /* 使用特定字体 "LingWai SC" */
}


/* 版权信息样式 */
/* 注意1：使用中文作为类名不是CSS的最佳实践。*/
/* 注意2：此样式规则当前在 景点.html 文件中没有直接对应的HTML元素使用 .版权 类。*/
/* 注意3：关于定位，见下方 transform 属性的注释。 */
.版权{
  color: white; /* 文字颜色为白色 */
  background-color: rgba(188, 188, 188, 0.50); /* 背景色为半透明的灰色 */
  position:fixed; /* 固定定位，相对于浏览器视口 */
  bottom:0; /* 定位到视口底部 */
  left: 50%; /* 元素的左边缘距离其定位父元素（此处为视口）的左边缘50% */
  /* transform: translate(-50%, -50%); */
  /* 上一行原始的 transform 会使元素在水平居中的同时，向上偏移自身高度的50%。*/
  /* 由于 bottom:0，这会导致元素的一半显示在屏幕内，一半在屏幕外（下方）。*/
  /* 如果意图是元素紧贴底部并水平居中，应使用 transform: translateX(-50%); */
  transform: translate(-50%, -50%); /* 实现水平居中，但垂直方向会因-50%向上移动 */
  text-align:center; /* 内部文本水平居中 */
}


/* 页面主要容器样式 (在当前 HTML 中，此容器内部仅有一个空的 .navbar) */
/* 注意：此类选择器在当前的 景点.html 文件中对应的 <div> 元素内部仅包含一个空的 <div class="navbar">。 */
/* 因此，背景图像和内边距等样式主要作用于一个几乎为空的高度为视口高度的区域。*/
.container {
  width: 100%; /* 容器宽度占满父元素 */
  height: 100vh; /* 容器高度占满整个视口高度 */
  /* 背景设置：应用一个从上到下、从黑色半透明到黑色半透明的线性渐变，并叠加一个背景图片 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/gycs.jpeg);
  background-position: center; /* 背景图片在容器中居中显示 */
  background-size: cover; /* 背景图片等比缩放以覆盖整个容器区域 */
  padding-left: 8%; /* 左内边距为容器宽度的8% */
  padding-right: 8%; /* 右内边距为容器宽度的8% */
  box-sizing: border-box; /* padding和border的值不计入元素的width和height之内 */
}

/* 导航栏容器样式 */
/* 注意：在当前的 景点.html 文件中，<div class="navbar"> 内部是空的。*/
/* 如果计划添加导航链接，可能需要恢复或添加子元素的样式 (如 nav, ul, li, a)。*/
.navbar {
  height: 12%; /* 导航栏高度占其父容器 (.container) 高度的12% */
  display: flex; /* 使用flex布局 */
  align-items: center; /* flex子项在交叉轴上居中对齐（垂直居中） */
}

/* Logo样式 (当前未在景点.html中直接使用，但可能为.navbar内部预留) */
.logo {
  width: 100px; /* logo图片的宽度 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}