/* 定义字体图标 */
@font-face {
  font-family: 'icomoon'; /* 自定义字体名称 */
  src: url("../fonts/icomoon/icomoon.eot"); /* 定义 eot 格式字体路径 */
  src: url("../fonts/icomoon/icomoon.eot#iefix") format("embedded-opentype"), /* 兼容 IE 的 eot 格式 */
       url("../fonts/icomoon/icomoon.ttf") format("truetype"), /* ttf 格式字体 */
       url("../fonts/icomoon/icomoon.woff") format("woff"), /* woff 格式字体 */
       url("../fonts/icomoon/icomoon.svg#icomoon") format("svg"); /* svg 格式字体 */
  font-weight: normal; /* 设置字体粗细 */
  font-style: normal; /* 设置字体样式 */
}

/* =======================================================
*
* 	模板样式
*
* ======================================================= */

/* 设置页面基础样式 */
body {
  font-family: "Work Sans", Arial, sans-serif; /* 设置字体 */
  font-weight: 400; /* 字体粗细 */
  font-size: 16px; /* 字体大小 */
  line-height: 1.7; /* 行高 */
  color: #828282; /* 字体颜色 */
		  margin: 0;
		  height: 100%;
		  position: relative;
}
		/* 使用伪元素来处理背景 */
		body::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('../images/topbg1.jpg'); /* 背景图片路径 */
			background-attachment: fixed; /* 背景固定 */
			background-size: cover; /* 背景图片覆盖整个页面 */
			background-position:center; /* 背景居中 */
			filter: blur(3px); /* 模糊效果 */
			z-index: -1; /* 确保背景图不遮挡文字 */
		}

		/* 页面内容 */
		.content {
			position: relative;
			z-index: 1; /* 确保文字位于背景之上 */
		}
		h2:hover {
		  transform: rotate(5deg); /* 鼠标悬停时文字旋转 */
		  color: #FFC0CB; /* 改变颜色为淡粉色 */
		  text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3); /* 增加阴影效果 */
		}
		
        /* 菜单按钮（仅显示在小屏幕上） */
        .menu-toggle {
            display: none; /* 默认隐藏菜单按钮 */
            position: fixed; /* 固定在页面右上角 */
            top: 20px;
            right: 10px;
            font-size: 20px; /* 设置字体大小 */
            color: white; /* 按钮文字颜色为白色 */
            border: none; /* 去除按钮默认的边框 */
            padding:8px; /* 按钮内边距 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
            border-radius: 20%; /* 设置按钮为圆形 */
            z-index: 10000; /* 设置按钮的层级，使其在其他元素之上 */
			transition: background-color 0.3s, transform 0.3s; /* 按钮过渡效果 */
        }
		.menu-toggle:hover {
            background-color: #555; /* 悬停时按钮颜色变暗 */
            transform: scale(1.1); /* 鼠标悬停时按钮稍微放大 */
        }


        /* 小屏设备（手机端） */
        @media (max-width: 768px) {
            .fh5co-menu {
                display: none; /* 在手机端默认隐藏菜单 */
                position:fixed; /* 使用固定定位 */
                top:0;
                right:0;
                width: 90px; /* 菜单宽度为屏幕宽度 */
                height: 80%; /* 菜单高度为屏幕高度 */
				padding-top: 100px; /* 菜单内容向下移动，避免覆盖菜单按钮 */
				transition: transform 0.3s ease; /* 添加过渡效果 */
                transform: translateX(100%); /* 初始状态菜单隐藏 */
				display: flex; /* 使用 flex 布局 */
				flex-direction: column; /* 垂直排列菜单项 */
				align-items: center; /* 居中对齐菜单项 */
				justify-content: flex-start; /* 从顶部开始排列菜单项 */
				flex-wrap: wrap; /* 当空间不足时换行 */			
            }

            .fh5co-menu a {
                padding: 15px 0; /* 菜单项上下内边距 */
                text-align: center; /* 菜单项文字居中 */
                line-height: 2.0; /* 设置行距为2.0 */
                color: #FFC0CB; /* 设置文字颜色 */
				font-weight: bold; /* 加粗 */
                font-size: 18px; /* 设置菜单项字体大小 */
                text-decoration: none; /* 去除下划线 */
                transition: background-color 0.3s; /* 菜单项悬停效果 */
				width: 100%; /* 每个菜单项占据全宽 */
				box-sizing: border-box; /* 确保内边距和宽度不发生重叠 */
				
            }

            .fh5co-menu a:hover {
                background-color: #FFC0CB; /* 菜单项悬停时改变背景色 */
            }

            .menu-toggle {
                display: block; /* 显示菜单按钮 */
            }
			/* 当菜单展开时 */
			.fh5co-menu.show {
				transform: translateX(0); /* 菜单从右侧滑入 */
			}	
          }			

/* 设置页面整体容器样式 */
#page {
  position: relative; /* 设置相对定位 */
  overflow-x: hidden; /* 隐藏横向滚动条 */
  width: 100%; /* 宽度为 100% */
  height: 100%; /* 高度为 100% */
  -webkit-transition: 0.5s; /* 设置过渡动画，webkit 浏览器 */
  -o-transition: 0.5s; /* 设置过渡动画，Opera 浏览器 */
  transition: 0.5s; /* 设置过渡动画 */
}

/* 设置超链接样式 */
a {
  color: #F14E95; /* 链接颜色 */
  -webkit-transition: 0.5s; /* 设置过渡动画，webkit 浏览器 */
  -o-transition: 0.5s; /* 设置过渡动画，Opera 浏览器 */
  transition: 0.5s; /* 设置过渡动画 */
}

/* 设置超链接悬停、点击和焦点时的样式 */
a:hover, a:active, a:focus {
  color: #F14E95; /* 悬停时的颜色 */
  outline: none; /* 去掉焦点时的轮廓 */
  text-decoration: none; /* 去掉下划线 */
}

/* 设置段落样式 */
p {
  margin-bottom: 20px; /* 段落底部外边距 */
}

/* 设置标题和其他元素的样式 */
h1, h2, h3, h4, h5, h6, figure {
  color: #000; /* 文字颜色 */
  font-family: "Work Sans", Arial, sans-serif; /* 字体 */
  font-weight: 400; /* 字体粗细 */
  margin: 0 0 20px 0; /* 外边距 */
}

/* 设置文本选中的样式 */
::-webkit-selection {
  color: #fff; /* 选中文本颜色 */
  background: #F14E95; /* 选中文本背景颜色 */
}

::-moz-selection {
  color: #fff; /* 选中文本颜色 */
  background: #F14E95; /* 选中文本背景颜色 */
}

::selection {
  color: #fff; /* 选中文本颜色 */
  background: #F14E95; /* 选中文本背景颜色 */
}

/* 设置导航条样式 */
.fh5co-nav {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  margin: 0; /* 外边距为 0 */
  padding: 0; /* 内边距为 0 */
  width: 100%; /* 宽度为 100% */
  padding: 40px 0; /* 上下内边距为 40px */
  z-index: 1001; /* 设置层级 */
}

/* 响应式设计: 屏幕宽度小于768px时的导航栏样式 */
@media screen and (max-width: 768px) {
  /* 设置导航栏内外边距 */
  .fh5co-nav {
    padding: 20px 0;
  }
  
  /* 隐藏菜单项 */
  .fh5co-nav .menu-1, .fh5co-nav .menu-2 {
    display: none;
  }
}

/* 设置logo样式 */
.fh5co-nav #fh5co-logo {
  font-size: 40px; /* 字体大小 */
  margin: 0; /* 去除外边距 */
  padding: 0; /* 去除内边距 */
  line-height: 40px; /* 行高与字体大小一致 */
  font-family: "Sacramento", Arial, serif; /* 字体样式 */
}
@media screen and (max-width: 768px) {
.fh5co-nav #fh5co-logo {
  font-size: 28px; /* 字体大小 */
  text-align: center; /*文字居中 */
  }
}



/* 设置导航链接样式 */
.fh5co-nav a {
  padding: 5px 10px; /* 内边距 */
  color: #FFC0CB; /* 粉色字体 */
  text-decoration: none; /* 去掉链接下划线 */
}

/* 鼠标悬停时的效果 */
.fh5co-nav a:hover {
  color: darkgray; /* 悬停时文字变灰 */
}


/* 背景图样式 */
.fh5co-bg {
  background-size: cover; /* 背景图像覆盖整个元素 */
  background-position: top center; /* 背景图位置：顶部居中 */
  background-repeat: no-repeat; /* 背景图不重复 */
  position: relative; /* 位置设置为相对 */
}

/* 适用于视频背景的样式 */
.fh5co-video {
  height: 450px; /* 视频框的高度 */
  overflow: hidden; /* 超出部分隐藏 */
  -webkit-border-radius: 7px; /* Webkit浏览器圆角 */
  -moz-border-radius: 7px; /* Firefox浏览器圆角 */
  -ms-border-radius: 7px; /* IE浏览器圆角 */
  border-radius: 7px; /* 统一设置圆角 */
}

/* 视频背景中的链接样式 */
.fh5co-video a {
  z-index: 1001; /* 确保链接在最上层 */
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  margin-top: -45px; /* 调整垂直位置 */
  margin-left: -45px; /* 调整水平位置 */
  width: 90px; /* 宽度 */
  height: 90px; /* 高度 */
  display: table; /* 设置为表格显示 */
  text-align: center; /* 文本居中对齐 */
  background: #fff; /* 背景颜色为白色 */
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75); /* Webkit浏览器阴影效果 */
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75); /* Firefox浏览器阴影效果 */
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75); /* 普通浏览器阴影效果 */
  -webkit-border-radius: 50%; /* Webkit浏览器圆形按钮 */
  -moz-border-radius: 50%; /* Firefox浏览器圆形按钮 */
  -ms-border-radius: 50%; /* IE浏览器圆形按钮 */
  border-radius: 50%; /* 统一设置圆形按钮 */
}

/* 链接中的图标样式 */
.fh5co-video a i {
  text-align: center; /* 图标居中对齐 */
  display: table-cell; /* 设置为表格单元格 */
  vertical-align: middle; /* 垂直居中对齐 */
  font-size: 40px; /* 设置字体大小 */
}

/* 视频背景的覆盖层样式 */
.fh5co-video .overlay {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部位置为0 */
  left: 0; /* 左侧位置为0 */
  right: 0; /* 右侧位置为0 */
  bottom: 0; /* 底部位置为0 */
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  -webkit-transition: 0.5s; /* Webkit浏览器过渡效果 */
  -o-transition: 0.5s; /* Opera浏览器过渡效果 */
  transition: 0.5s; /* 普通浏览器过渡效果 */
}

/* 鼠标悬停时覆盖层背景变化 */
.fh5co-video:hover .overlay {
  background: rgba(0, 0, 0, 0.7); /* 鼠标悬停时背景颜色加深 */
}

/* 鼠标悬停时视频框放大 */
.fh5co-video:hover a {
  position: relative; /* 设置为相对定位 */
  -webkit-transform: scale(1.2); /* Webkit浏览器放大效果 */
  -moz-transform: scale(1.2); /* Firefox浏览器放大效果 */
  -ms-transform: scale(1.2); /* IE浏览器放大效果 */
  -o-transform: scale(1.2); /* Opera浏览器放大效果 */
  transform: scale(1.2); /* 普通浏览器放大效果 */
}

/* 覆盖图样式 */
.fh5co-cover {
  height: 720px; /* 覆盖图的高度 */
  background-size: cover; /* 背景图像覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图不重复 */
  position: relative; /* 位置设置为相对 */
  width: 100%; /* 宽度为100% */
}

/* 覆盖图上的背景覆盖层 */
.fh5co-cover .overlay {
  z-index: 0; /* 设置层级 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部位置为0 */
  top: 0; /* 顶部位置为0 */
  left: 0; /* 左侧位置为0 */
  right: 0; /* 右侧位置为0 */
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}

/* 覆盖图内容容器 */
.fh5co-cover > .fh5co-container {
  position: relative; /* 位置设置为相对 */
  z-index: 10; /* 设置层级 */
}

/* 屏幕宽度小于768px时的覆盖图样式 */
@media screen and (max-width: 768px) {
  .fh5co-cover {
    height: 600px; /* 高度调整为600px */
  }
}

/* 覆盖图上的显示元素 */
.fh5co-cover .display-t,
.fh5co-cover .display-tc {
  height: 900px; /* 高度设置为900px */
  display: table; /* 设置为表格显示 */
  width: 100%; /* 宽度为100% */
}

/* 屏幕宽度小于768px时，调整 .fh5co-cover 高度 */
@media screen and (max-width: 768px) {
  .fh5co-cover .display-t,
  .fh5co-cover .display-tc {
    height: 600px; /* 设置高度为600px */
  }
}

/* 默认的 .fh5co-cover.fh5co-cover-sm 高度设置 */
.fh5co-cover.fh5co-cover-sm {
  height: 600px; /* 设置默认高度为600px */
}

/* 屏幕宽度小于768px时，调整 .fh5co-cover.fh5co-cover-sm 高度 */
@media screen and (max-width: 768px) {
  .fh5co-cover.fh5co-cover-sm {
    height: 400px; /* 设置高度为400px */
  }
}

/* 设置 .fh5co-cover.fh5co-cover-sm 中 .display-t 和 .display-tc 元素的样式 */
.fh5co-cover.fh5co-cover-sm .display-t,
.fh5co-cover.fh5co-cover-sm .display-tc {
  height: 600px; /* 设置高度为600px */
  display: table; /* 使用表格布局 */
  width: 100%; /* 宽度占满100% */
}

/* 屏幕宽度小于768px时，调整 .fh5co-cover.fh5co-cover-sm 中 .display-t 和 .display-tc 高度 */
@media screen and (max-width: 768px) {
  .fh5co-cover.fh5co-cover-sm .display-t,
  .fh5co-cover.fh5co-cover-sm .display-tc {
    height: 400px; /* 设置高度为400px */
  }
}

/* 通用的倒计时和活动区域样式 */
#fh5co-event {
  height: auto; /* 高度自动 */

  position: relative; /* 相对定位 */
  overflow: hidden; /* 隐藏超出部分 */
  border-radius: 8px; /* 圆角边框 */
}

/* 设置倒计时和活动区域中的 .display-t 和 .display-tc 元素 */
#fh5co-event .display-t,
#fh5co-event .display-tc {
  height: 100%; /* 高度为100% */
  display: table; /* 使用表格布局 */
  width: 100%; /* 宽度占满100% */
}

/* 设置倒计时和活动标题的样式 */
#fh5co-event .fh5co-heading h2 {
  color: #fff; /* 设置字体颜色为白色 */
  font-size: 36px; /* 设置字体大小为36px */
  font-weight: 700; /* 设置加粗字体 */
  text-transform: uppercase; /* 字母大写 */
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* 添加文本阴影 */
}

/* 设置倒计时和活动副标题的样式 */
#fh5co-event .fh5co-heading span {
  color: rgba(255, 255, 255, 0.6); /* 设置颜色为透明的白色 */
  text-transform: uppercase; /* 字母大写 */
  font-size: 13px; /* 设置字体大小为13px */
  letter-spacing: 2px; /* 设置字母间距 */
  font-weight: 300; /* 设置字体为300 */
  display: block; /* 块级显示 */
  margin-top: 10px; /* 设置上方外边距 */
}

/* 设置倒计时和活动的覆盖层样式 */
#fh5co-event .overlay {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部为0 */
  left: 0; /* 左边为0 */
  right: 0; /* 右边为0 */
  bottom: 0; /* 底部为0 */
  background: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
  border-radius: 8px; /* 圆角边框 */
}

/* 屏幕宽度小于768px时，调整倒计时和活动区域的样式 */
@media screen and (max-width: 768px) {
  #fh5co-event {
    height: auto; /* 高度自动 */
    padding: 7em 0; /* 上下内边距 */
  }

  #fh5co-event .display-t,
  #fh5co-event .display-tc {
    height: auto; /* 高度自动 */
  }
}

/* 设置倒计时和活动包装区域的样式 */
#fh5co-event .event-wrap {
  border: 2px solid rgba(255, 255, 255, 0.3); /* 设置浅色边框 */
  background: rgba(255, 255, 255, 0.1); /* 半透明背景 */
  padding: 30px; /* 内边距30px */
  width: 100%; /* 宽度占满100% */
  float: left; /* 左浮动 */
  border-radius: 8px; /* 圆角边框 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 设置倒计时和活动包装区域的鼠标悬停效果 */
#fh5co-event .event-wrap:hover {
  background: rgba(255, 255, 255, 0.2); /* 悬停时背景变暗 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 屏幕宽度小于768px时，调整倒计时和活动包装区域的样式 */
@media screen and (max-width: 768px) {
  #fh5co-event .event-wrap {
    margin-bottom: 10px; /* 设置下方外边距 */
  }
}

/* 设置倒计时和活动标题的样式 */
#fh5co-event .event-wrap h3 {
  font-size: 20px; /* 设置字体大小 */
  color: #FFC0CB; /* 设置字体颜色为粉红色 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 添加底部边框 */
  display: block; /* 块级显示 */
  padding-bottom: 20px; /* 设置底部内边距 */
  text-transform: uppercase; /* 字母大写 */
  letter-spacing: 2px; /* 设置字母间距 */
  font-weight: 500; /* 设置字体加粗 */
}


/* 样式定义倒计时和活动区域的段落和文本样式 */
#fh5co-event .event-wrap p,
#fh5co-event .event-wrap span {
  display: block; /* 将元素设置为块级显示 */
  color: #FFC0CB; /* 设置字体颜色为粉红色 */
  line-height: 1.6; /* 设置行高 */
}

/* 图标样式 */
#fh5co-event .event-wrap i {
  color: #FFC0CB; /* 设置图标颜色为粉红色 */
  font-size: 20px; /* 设置字体大小为20px */
  margin-right: 10px; /* 设置右边距为10px */
}

/* 设置倒计时和活动区域的列样式 */
#fh5co-event .event-wrap .event-col {
  width: 50%; /* 设置每列的宽度为50% */
  float: left; /* 设置浮动方向为左 */
  margin-bottom: 30px; /* 设置底部外边距为30px */
  padding: 10px; /* 设置内边距为10px */
}



/* 时间线样式 */
.timeline {
  list-style: none; /* 去除列表项的默认样式 */
  padding: 20px 0 20px; /* 设置上下内边距为20px */
  position: relative; /* 设置相对定位 */
}

/* 时间线的分隔线样式 */
.timeline:before {
  top: 0; /* 顶部为0 */
  bottom: 0; /* 底部为0 */
  position: absolute; /* 绝对定位 */
  content: " "; /* 空内容，用于创建伪元素 */
  width: 1px; /* 设置宽度为1px */
  background-color: #d4d4d4; /* 设置背景色为浅灰色 */
  left: 50%; /* 定位到父容器的50% */
  margin-left: 0px; /* 取消左边距 */
}

/* 屏幕宽度小于480px时，调整时间线分隔线的位置 */
@media screen and (max-width: 480px) {
  .timeline:before {
    margin-left: -64px; /* 调整分隔线的位置 */
  }
}

/* 时间线每个列表项的样式 */
.timeline > li {
  margin-bottom: 20px; /* 设置底部外边距为20px */
  position: relative; /* 设置相对定位 */
}

/* 时间线列表项的伪元素，用于清除浮动 */
.timeline > li:before, .timeline > li:after {
  content: " "; /* 空内容 */
  display: table; /* 使元素显示为表格 */
}

/* 清除时间线列表项的浮动 */
.timeline > li:after {
  clear: both; /* 清除浮动 */
}

/* 时间线面板的样式 */
.timeline > li > .timeline-panel {
  width: 40%; /* 设置面板的宽度为40% */
  float: left; /* 设置浮动方向为左 */
  border: 1px solid #d4d4d4; /* 设置边框为浅灰色 */
  padding: 30px; /* 设置内边距为30px */
  position: relative; /* 设置相对定位 */
  border-radius: 4px; /* 设置圆角边框 */
}

/* 时间线面板的三角形指示符 */
.timeline > li > .timeline-panel:before {
  position: absolute; /* 绝对定位 */
  top: 80px; /* 设置三角形的顶部位置 */
  right: -15px; /* 设置右边距为-15px */
  display: inline-block; /* 内联块级元素 */
  border-top: 15px solid transparent; /* 设置透明的上边框 */
  border-left: 15px solid #ccc; /* 设置灰色的左边框 */
  border-right: 0 solid #ccc; /* 设置右边框为0 */
  border-bottom: 15px solid transparent; /* 设置透明的下边框 */
  content: " "; /* 空内容，用于创建伪元素 */
}

/* 时间线面板的第二层三角形指示符 */
.timeline > li > .timeline-panel:after {
  position: absolute; /* 绝对定位 */
  top: 81px; /* 设置第二个三角形的顶部位置 */
  right: -14px; /* 设置右边距为-14px */
  display: inline-block; /* 内联块级元素 */
  border-top: 14px solid transparent; /* 设置透明的上边框 */
  border-left: 14px solid #fff; /* 设置白色的左边框 */
  border-right: 0 solid #fff; /* 设置右边框为0 */
  border-bottom: 14px solid transparent; /* 设置透明的下边框 */
  content: " "; /* 空内容，用于创建伪元素 */
}

/* 屏幕宽度小于480px时，调整时间线面板的样式 */
@media screen and (max-width: 480px) {
  .timeline > li > .timeline-panel {
    width: 75% !important; /* 强制将面板宽度调整为75% */
  }
  .timeline > li > .timeline-panel:before {
    top: 30px; /* 调整三角形的顶部位置 */
  }
  .timeline > li > .timeline-panel:after {
    top: 31px; /* 调整第二个三角形的顶部位置 */
  }
}

/* 时间轴中每个事件点的样式 */
.timeline > li > .timeline-badge {
  background-size: cover; /* 背景图像尺寸为覆盖整个区域 */
  background-position: top center; /* 背景图像在顶部居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  position: relative; /* 设置元素的定位方式为相对定位 */
  color: #fff; /* 文字颜色为白色 */
  width: 160px; /* 宽度为160px */
  height: 160px; /* 高度为160px */
  line-height: 50px; /* 设置行高为50px */
  font-size: 1.4em; /* 字体大小为1.4倍基准字体 */
  text-align: center; /* 文字水平居中对齐 */
  position: absolute; /* 设置为绝对定位 */
  top: 16px; /* 上边距为16px */
  left: 50%; /* 左边距为50%，使其水平居中 */
  margin-left: -80px; /* 向左偏移80px，实现完全居中 */
  background-color: #999999; /* 背景颜色为灰色 */
  z-index: 100; /* 设置堆叠顺序，确保在其他元素之上 */
  -webkit-border-radius: 50%; /* 兼容Webkit浏览器的圆形边框 */
  -moz-border-radius: 50%; /* 兼容Mozilla浏览器的圆形边框 */
  -ms-border-radius: 50%; /* 兼容IE浏览器的圆形边框 */
  border-radius: 50%; /* 设置圆形边框 */
}

/* 针对屏幕宽度小于480px的设备，调整时间轴点的样式 */
@media screen and (max-width: 480px) {
  .timeline > li > .timeline-badge {
    width: 60px; /* 宽度调整为60px */
    height: 60px; /* 高度调整为60px */
    margin-left: -20px !important; /* 左边距调整为-20px，覆盖其他样式 */
  }
}

/* 时间轴中反向排列的面板样式 */
.timeline > li.timeline-inverted > .timeline-panel {
  float: right; /* 使面板浮动到右侧 */
}

/* 时间轴中反向排列的面板箭头样式 */
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0; /* 左侧无边框 */
  border-right-width: 15px; /* 右侧边框宽度为15px */
  left: -15px; /* 箭头位置调整 */
  right: auto; /* 右边距为自动 */
}

/* 时间轴中反向排列的面板箭头样式（额外细节） */
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0; /* 左侧无边框 */
  border-right-width: 14px; /* 右侧边框宽度为14px */
  left: -14px; /* 箭头位置调整 */
  right: auto; /* 右边距为自动 */
}

/* 时间轴标题的顶部间距 */
.timeline-title {
  margin-top: 0; /* 无顶部间距 */
}

/* 日期样式 */
.date {
  display: block; /* 设置为块级元素 */
  margin-bottom: 20px; /* 底部外边距为20px */
  font-size: 13px; /* 字体大小为13px */
  text-transform: uppercase; /* 将文字转换为大写 */
  letter-spacing: 2px; /* 字母间距为2px */
}

/* 时间轴正文的段落和列表样式 */
.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0; /* 无底部外边距 */
}

/* 时间轴正文中相邻段落之间的顶部间距 */
.timeline-body > p + p {
  margin-top: 5px; /* 顶部外边距为5px */
}

/* 针对屏幕宽度小于992px的设备，调整时间轴的样式 */
@media (max-width: 992px) {
  ul.timeline:before {
    left: 90px; /* 时间轴的起始位置为90px */
  }

  ul.timeline > li > .timeline-panel {
    width: calc(100% - 200px); /* 面板宽度为100%减去200px */
    width: -moz-calc(100% - 200px); /* 针对Mozilla浏览器的兼容性 */
    width: -webkit-calc(100% - 200px); /* 针对Webkit浏览器的兼容性 */
  }

  ul.timeline > li > .timeline-badge {
    left: 15px; /* 时间轴点的左边距为15px */
    margin-left: 0; /* 无左外边距 */
    top: 16px; /* 顶部外边距为16px */
  }

  ul.timeline > li > .timeline-panel {
    float: right; /* 面板浮动到右侧 */
  }

  ul.timeline > li > .timeline-panel:before {
    border-left-width: 0; /* 左侧无边框 */
    border-right-width: 15px; /* 右侧边框宽度为15px */
    left: -15px; /* 箭头位置调整 */
    right: auto; /* 右边距为自动 */
  }

  ul.timeline > li > .timeline-panel:after {
    border-left-width: 0; /* 左侧无边框 */
    border-right-width: 14px; /* 右侧边框宽度为14px */
    left: -14px; /* 箭头位置调整 */
    right: auto; /* 右边距为自动 */
  }
}

/* 图片画廊列表样式 */
#fh5co-gallery-list {
  flex-wrap: wrap; /* 使项目换行 */
  -webkit-flex-wrap: wrap; /* 兼容Webkit浏览器 */
  -moz-flex-wrap: wrap; /* 兼容Mozilla浏览器 */
  display: -webkit-box; /* 兼容Webkit浏览器 */
  display: -moz-box; /* 兼容Mozilla浏览器 */
  display: -ms-flexbox; /* 兼容IE浏览器 */
  display: -webkit-flex; /* 兼容Webkit浏览器 */
  display: flex; /* 使用flex布局 */
  position: relative; /* 相对定位 */
  float: left; /* 向左浮动 */
  padding: 0; /* 内边距为0 */
  margin: 0; /* 外边距为0 */
  width: 100%; /* 宽度为100% */
}

/* 图片画廊中的每个列表项样式 */
#fh5co-gallery-list li {
  display: block; /* 设置为块级元素 */
  padding: 0; /* 内边距为0 */
  margin: 0 0 10px 1%; /* 外边距为10px（底部）和1%（左侧） */
  list-style: none; /* 去掉列表样式 */
  min-height: 400px; /* 最小高度为400px */
  background-position: center center; /* 背景图像居中 */
  background-size: cover; /* 背景图像覆盖整个区域 */
  background-repeat: no-repeat; /* 背景不重复 */
  float: left; /* 向左浮动 */
  clear: left; /* 清除左侧浮动 */
  position: relative; /* 相对定位 */
  -webkit-border-radius: 7px; /* 兼容Webkit浏览器的圆角 */
  -moz-border-radius: 7px; /* 兼容Mozilla浏览器的圆角 */
  -ms-border-radius: 7px; /* 兼容IE浏览器的圆角 */
  border-radius: 7px; /* 设置圆角 */
}

/* 图片画廊列表项中的文字样式 */
#fh5co-gallery-list li span {
  color: #ef6a8a; /* 文字颜色为粉色 */
}

#fh5co-gallery-list li h2 {
  color: #ef6a8a; /* 标题文字颜色为粉色 */
}

/* 针对屏幕宽度小于480px的设备，调整图片画廊列表项的样式 */
@media screen and (max-width: 480px) {
  #fh5co-gallery-list li {
    margin-left: 0; /* 左外边距为0 */
  }
}

/* 图片画廊列表项链接样式 */
#fh5co-gallery-list li a {
  min-height: 400px; /* 最小高度为400px */
  padding: 2em; /* 内边距为2em */
  position: relative; /* 相对定位 */
  width: 100%; /* 宽度为100% */
  display: block; /* 设置为块级元素 */
}

/* 为每个图像链接元素添加一个伪元素 */
#fh5co-gallery-list li a:before {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左对齐 */
  right: 0; /* 右对齐 */
  bottom: 0; /* 底部对齐 */
  content: ""; /* 伪元素的内容为空 */
  z-index: 80; /* 设置层级 */
  -webkit-transition: 0.5s; /* 设置webkit浏览器的过渡效果 */
  -o-transition: 0.5s; /* 设置Opera浏览器的过渡效果 */
  transition: 0.5s; /* 设置其他浏览器的过渡效果 */
  -webkit-border-radius: 7px; /* 设置webkit浏览器的圆角 */
  -moz-border-radius: 7px; /* 设置Firefox浏览器的圆角 */
  -ms-border-radius: 7px; /* 设置IE浏览器的圆角 */
  border-radius: 7px; /* 设置所有浏览器的圆角 */
  background: rgba(0, 0, 0, 0.2); /* 设置背景颜色为半透明黑色 */
}

/* 鼠标悬停时，背景颜色变为更深的黑色 */
#fh5co-gallery-list li a:hover:before {
  background: rgba(0, 0, 0, 0.5); /* 悬停时背景色变为半透明黑色 */
}

/* 定义case-studies-summary的样式 */
#fh5co-gallery-list li a .case-studies-summary {
  width: auto; /* 宽度自动 */
  bottom: 2em; /* 底部位置 */
  left: 2em; /* 左侧位置 */
  right: 2em; /* 右侧位置 */
  position: absolute; /* 绝对定位 */
  z-index: 100; /* 设置层级 */
}

/* 响应式设计：屏幕宽度小于768px时调整样式 */
@media screen and (max-width: 768px) {
  #fh5co-gallery-list li a .case-studies-summary {
    bottom: 1em; /* 底部位置调整 */
    left: 1em; /* 左侧位置调整 */
    right: 1em; /* 右侧位置调整 */
  }
}

/* 定义case-studies-summary中的span样式 */
#fh5co-gallery-list li a .case-studies-summary span {
  text-transform: uppercase; /* 设置文本为大写 */
  letter-spacing: 2px; /* 设置字母间距 */
  font-size: 13px; /* 设置字体大小 */
  color: black; /* 设置字体颜色为黑色 */
}

/* 定义case-studies-summary中的h2样式 */
#fh5co-gallery-list li a .case-studies-summary h2 {
  color: #fff; /* 设置默认字体颜色为白色 */
  margin-bottom: 0; /* 设置底部外边距为0 */
  color: #ef6a8a; /* 设置字体颜色为粉色 */
  font-size: 20px; /* 设置字体大小为20px */
}

/* 响应式设计：屏幕宽度小于768px时调整h2字体大小 */
@media screen and (max-width: 768px) {
  #fh5co-gallery-list li a .case-studies-summary h2 {
    font-size: 20px; /* 设置字体大小为20px */
  }
}

/* 为li元素定义宽度 */
#fh5co-gallery-list li.one-third {
  width: 32.3%; /* 设置宽度为32.3% */
}

/* 响应式设计：屏幕宽度小于768px时调整宽度 */
@media screen and (max-width: 768px) {
  #fh5co-gallery-list li.one-third {
    width: 49%; /* 设置宽度为49% */
  }
}

/* 响应式设计：屏幕宽度小于480px时调整宽度 */
@media screen and (max-width: 480px) {
  #fh5co-gallery-list li.one-third {
    width: 100%; /* 设置宽度为100% */
  }
}

/* 设置地图样式 */
#map {
  width: 100%; /* 设置宽度为100% */
  height: 500px; /* 设置高度为500px */
  position: relative; /* 相对定位 */
}

/* 响应式设计：屏幕宽度小于768px时调整地图高度 */
@media screen and (max-width: 768px) {
  #map {
    height: 200px; /* 设置地图高度为200px */
  }
}



/* 设置 `.display-tc` 类的元素为表格单元格，并使其内容垂直居中 */
#fh5co-header .display-tc,
.fh5co-cover .display-tc {
  display: table-cell !important; /* 使用表格单元格布局 */
  vertical-align: middle; /* 垂直居中对齐 */
}

/* 设置标题（h1）和副标题（h2）的字体颜色为白色，并取消默认的外边距和内边距 */
#fh5co-header .display-tc h1, #fh5co-header .display-tc h2,
.fh5co-cover .display-tc h1,
.fh5co-cover .display-tc h2 {
  margin: 0; /* 取消外边距 */
  padding: 0; /* 取消内边距 */
  color: white; /* 设置字体颜色为白色 */
}

/* 设置主标题（h1）字体大小为100px，行高为1.5，并使用 "Sacramento" 字体 */
#fh5co-header .display-tc h1,
.fh5co-cover .display-tc h1 {
  margin-bottom: 0px; /* 取消标题下方的外边距 */
  font-size: 100px; /* 设置字体大小为100px */
  line-height: 1.5; /* 设置行高为1.5 */
  font-family: "Sacramento", Arial, serif; /* 设置字体 */
}

/* 屏幕宽度小于768px时，调整主标题（h1）的字体大小为40px */
@media screen and (max-width: 768px) {
  #fh5co-header .display-tc h1,
  .fh5co-cover .display-tc h1 {
	margin-top: 50px; /* 距顶部间隙 */
    font-size: 40px; /* 设置字体大小为40px */
	color: #FFC0CB; /* 设置字体颜色为白色 */
  }
}

/* 设置副标题（h2）的字体大小为20px，行高为1.5，下边距为15px */
#fh5co-header .display-tc h2,
.fh5co-cover .display-tc h2 {
  font-size: 20px; /* 设置字体大小为20px */
  line-height: 1.5; /* 设置行高为1.5 */
  margin-bottom: 15px; /* 设置下边距为15px */
  color: #FFC0CB; /* 设置字体颜色为白色 */
}

/* 设置按钮（.btn）的样式，包括内边距、背景色、字体颜色等 */
#fh5co-header .display-tc .btn,
.fh5co-cover .display-tc .btn {
  padding: 15px 20px; /* 设置按钮的内边距 */
  background: #fff !important; /* 设置按钮的背景色为白色 */
  color: #F14E95; /* 设置按钮字体颜色为粉色 */
  border: none !important; /* 去除按钮的边框 */
  font-size: 14px; /* 设置按钮字体大小为14px */
  text-transform: uppercase; /* 将按钮文本转为大写 */
}


.simply-countdown {
  margin-bottom: 2em; /* 倒计时容器底部间距 */
  display: flex; /* 使用 flexbox 来排列子元素 */
  justify-content: center; /* 居中排列 */
  align-items: center; /* 垂直居中 */
  flex-wrap: nowrap; /* 确保圆圈在同一行 */
  gap: 15px; /* 控制圆圈之间的间距 */
}

.simply-countdown > .simply-section {
  display: inline-flex; /* 显示为内联块元素 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110px; /* 宽度 */
  height: 110px; /* 高度 */
  background: linear-gradient(145deg, rgba(241, 78, 149, 0.9), rgba(236, 72, 153, 0.8)); /* 背景渐变 */

  border-radius: 50%; /* 圆角 */
  position: relative; /* 相对定位 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  animation: pulse 1s ease infinite; /* 动画效果 */
  transition: transform 0.3s ease-in-out; /* 过渡效果 */
}

.simply-countdown > .simply-section:hover {
  transform: scale(1.1); /* 鼠标悬停时，放大效果 */
}

@keyframes pulse {
  0% {
    transform: scale(1); /* 初始状态大小 */
  }
  50% {
    transform: scale(1.1); /* 放大效果 */
  }
  100% {
    transform: scale(1); /* 还原为初始状态 */
  }
}

.simply-countdown > .simply-section > div {
  display: flex; /* 使用 flexbox 来居中内容 */
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 使 div 填满父容器 */
  height: 100%; /* 使 div 填满父容器 */
}

.simply-countdown > .simply-section .simply-amount,
.simply-countdown > .simply-section .simply-word {
  display: block; /* 块级显示 */
  color: white; /* 文字颜色 */
  text-align: center; /* 确保文字居中 */
}

.simply-countdown > .simply-section .simply-amount {
  font-size: 35px; /* 数字字体大小 */
  font-weight: bold; /* 加粗 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* 文字阴影效果 */
  top: 5px; /* 控制数字上移的位置 */
}

.simply-countdown > .simply-section .simply-word {
  font-size: 14px; /* 文字大小 */
  color: rgba(255, 255, 255, 0.7); /* 文字颜色 */
  text-transform: uppercase; /* 文字大写 */
  letter-spacing: 1px; /* 文字字间距 */
  font-weight: 600; /* 字体粗细 */
  line-height: 1.5; /* 控制行距 */
}

@media (max-width: 768px) {
  .simply-countdown > .simply-section {
    width: 70px; /* 屏幕宽度小于 768px 时，调整倒计时的宽度 */
    height: 70px; /* 高度 */
  }

  .simply-countdown > .simply-section .simply-amount {
    font-size: 20px; /* 数字字体大小调整 */
  }

  .simply-countdown > .simply-section .simply-word {
    font-size: 12px; /* 文字大小调整 */
  }
}

#fh5co-testimonial,
#fh5co-services,
#fh5co-event,
#fh5co-couple-story,
#fh5co-couple,
#fh5co-gallery,
.fh5co-section {
  padding: 7em 0; /* 每个部分的上下内边距 */
  clear: both; /* 清除浮动 */
}

@media screen and (max-width: 768px) {
  #fh5co-testimonial,
  #fh5co-services,
  #fh5co-event,
  #fh5co-couple-story,
  #fh5co-couple,
  #fh5co-gallery,
  .fh5co-section {
    padding: 3em 0; /* 屏幕宽度小于 768px 时，调整内边距 */
  }
}

.fh5co-section-gray {
  background: rgba(0, 0, 0, 0.04); /* 灰色背景 */
}

.couple-wrap {
  width: 90%; /* 夫妻部分宽度 */
  margin: 0 auto; /* 居中对齐 */
  position: relative; /* 相对定位 */
}

@media screen and (max-width: 768px) {
  .couple-wrap {
    width: 100%; /* 屏幕宽度小于 768px 时，宽度调整 */
  }
}

.heart {
  position: absolute; /* 绝对定位 */
  top: 4em; /* 上间距 */
  left: 0; 
  right: 0;
  z-index: 99; /* 层级 */
  animation: pulse 1s ease infinite; /* 心形动画 */
}

.heart i {
  font-size: 20px; /* 图标字体大小 */
  background: #fff; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  color: #F14E95; /* 字体颜色 */
  border-radius: 50%; /* 圆形边框 */
}

@media screen and (max-width: 768px) {
  .heart {
    display: none; /* 屏幕宽度小于 768px 时，隐藏心形图标 */
  }
}

.couple-half {
  width: 50%; /* 夫妻部分宽度 */
  float: left; /* 左浮动 */
}

@media screen and (max-width: 768px) {
  .couple-half {
    width: 100%; /* 屏幕宽度小于 768px 时，夫妻部分宽度调整 */
  }
}

.couple-half h3 {
  font-family: "Sacramento", Arial, serif; /* 字体 */
  color: #F14E95; /* 文字颜色 */
  font-size: 30px; /* 字体大小 */
}

.couple-half .groom, .couple-half .bride {
  float: left; /* 浮动 */
  border-radius: 50%; /* 圆形 */
  width: 150px; /* 宽度 */
  height: 150px; /* 高度 */
}

.couple-half .groom img, .couple-half .bride img {
  width: 150px; /* 图片宽度 */
  height: 150px; /* 图片高度 */
  border-radius: 50%; /* 圆形边框 */
}

@media screen and (max-width: 480px) {
  .couple-half .groom, .couple-half .bride {
    width: 100%; /* 屏幕宽度小于 480px 时，宽度调整 */
    height: 140px; /* 高度调整 */
  }
  .couple-half .groom img, .couple-half .bride img {
    width: 120px; /* 图片宽度调整 */
    height: 120px; /* 图片高度调整 */
    margin: 0 auto; /* 图片居中 */
  }
}

.couple-half .groom {
  float: right; /* 新郎部分右浮动 */
  margin-right: 5px; /* 右边距 */
}

.couple-half .bride {
  float: left; /* 新娘部分左浮动 */
  margin-left: 5px; /* 左边距 */
}

.couple-half .desc-groom {
  padding-right: 180px; /* 新郎描述右内边距 */
  text-align: right; /* 描述文字右对齐 */
}

.couple-half .desc-bride {
  padding-left: 180px; /* 新娘描述左内边距 */
  text-align: left; /* 描述文字左对齐 */
}

/* 响应式设计：当屏幕宽度小于等于480px时 */
@media screen and (max-width: 480px) {
  .couple-half .groom, .couple-half .bride {
    margin-left: 0; /* 去除新郎/新娘的左边距 */
    margin-right: 0; /* 去除新郎/新娘的右边距 */
  }
  .couple-half .desc-groom {
    padding-right: 0; /* 去除新郎描述的右边距 */
    text-align: center; /* 新郎描述文字居中 */
  }
  .couple-half .desc-bride {
    padding-left: 0; /* 去除新娘描述的左边距 */
    text-align: center; /* 新娘描述文字居中 */
  }
}

/* 页面标题样式 */
.fh5co-heading {
  margin-bottom: 5em; /* 底部边距5em */
}

.fh5co-heading.fh5co-heading-sm {
  margin-bottom: 2em; /* 小型标题的底部边距2em */
}

.fh5co-heading h2 {
  font-size: 60px; /* 字体大小60px */
  margin-bottom: 10px; /* 底边距10px */
  line-height: 1.5; /* 行高1.5 */
  font-weight: bold; /* 字体加粗 */
  color: #F14E95; /* 字体颜色 */
  font-family: "Sacramento", Arial, serif; /* 字体 */
}

/* 响应式设计：当屏幕宽度小于等于768px时，标题字体变小 */
@media screen and (max-width: 768px) {
  .fh5co-heading h2 {
    font-size: 40px; /* 字体大小40px */
  }
}

.fh5co-heading p {
  font-size: 18px; /* 字体大小18px */
  line-height: 1.5; /* 行高1.5 */
  color: #828282; /* 字体颜色 */
}

.fh5co-heading span {
  text-transform: uppercase; /* 字母大写 */
  font-size: 13px; /* 字体大小13px */
  letter-spacing: 2px; /* 字母间距2px */
  font-weight: 600; /* 字体粗细600 */
  color: rgba(0, 0, 0, 0.4); /* 字体颜色 */
}

/* 客户推荐样式 */
#fh5co-testimonial .wrap-testimony {
  position: relative; /* 相对定位 */
}

#fh5co-testimonial .wrap-testimony .testimony-slide {
  text-align: center; /* 文本居中 */
}

#fh5co-testimonial .wrap-testimony .testimony-slide span {
  font-size: 12px; /* 字体大小12px */
  text-transform: uppercase; /* 字母大写 */
  letter-spacing: 2px; /* 字母间距2px */
  font-weight: 700; /* 字体加粗 */
  display: block; /* 块级元素 */
}

#fh5co-testimonial .wrap-testimony .testimony-slide span a.twitter {
  color: #F14E95; /* Twitter链接字体颜色 */
  font-weight: 300; /* 字体粗细300 */
}

/* 客户推荐图片样式：圆形 */
#fh5co-testimonial .wrap-testimony .testimony-slide figure {
  margin-bottom: 10px; /* 底部边距10px */
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  width: 100px; /* 宽度100px */
  height: 100px; /* 高度100px */
}

#fh5co-testimonial .wrap-testimony .testimony-slide figure img {
  width: 100px; /* 图片宽度100px */
  height: 100px; /* 图片高度100px */
  border-radius: 50%; /* 圆形边框 */
}

/* 客户推荐引用框样式 */
#fh5co-testimonial .wrap-testimony .testimony-slide blockquote {
  border: none; /* 无边框 */
  margin: 30px auto; /* 上下30px，居中 */
  width: 50%; /* 宽度50% */
  position: relative; /* 相对定位 */
  border-radius: 4px; /* 边角圆滑 */
}

@media screen and (max-width: 992px) {
  #fh5co-testimonial .wrap-testimony .testimony-slide blockquote {
    width: 100%; /* 屏幕宽度小于等于992px时，宽度100% */
  }
}

#fh5co-testimonial .wrap-testimony .testimony-slide blockquote p {
  font-style: italic; /* 斜体 */
  color: #8f989f; /* 字体颜色 */
  font-size: 20px; /* 字体大小20px */
  line-height: 1.6em; /* 行高1.6 */
}

#fh5co-testimonial .wrap-testimony .testimony-slide.active {
  display: block; /* 显示当前激活的推荐项 */
}

/* testimonial 区域箭头 */
#fh5co-testimonial .wrap-testimony .arrow-thumb {
  position: absolute; /* 设置为绝对定位 */
  top: 40%; /* 距离顶部40% */
  display: block; /* 设置为块级元素 */
  width: 100%; /* 宽度为100% */
}

/* testimonial 区域箭头的链接 */
#fh5co-testimonial .wrap-testimony .arrow-thumb a {
  font-size: 32px; /* 字体大小32px */
  color: #dadada; /* 字体颜色为浅灰色 */
}

/* 鼠标悬停、焦点和点击时的效果 */
#fh5co-testimonial .wrap-testimony .arrow-thumb a:hover, 
#fh5co-testimonial .wrap-testimony .arrow-thumb a:focus, 
#fh5co-testimonial .wrap-testimony .arrow-thumb a:active {
  text-decoration: none; /* 去掉下划线 */
}

/* feature-left 类样式，适用于左浮动的元素 */
.feature-left {
  float: left; /* 设置为左浮动 */
  width: 100%; /* 宽度为100% */
  margin-bottom: 30px; /* 底部间距30px */
  position: relative; /* 设置为相对定位 */
}

/* 最后一个 .feature-left 元素去掉底部间距 */
.feature-left:last-child {
  margin-bottom: 0;
}

/* icon 样式，设置为圆形并添加阴影 */
.feature-left .icon {
  float: left; /* 设置为左浮动 */
  margin-right: 5%; /* 右边距5% */
  width: 54px; /* 宽度54px */
  height: 54px; /* 高度54px */
  background: #fff; /* 背景色为白色 */
  display: table; /* 设置为表格元素 */
  text-align: center; /* 文本居中 */
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75); /* 添加阴影 */
  border-radius: 50%; /* 圆角边框，变成圆形 */
}

/* 小屏幕设备（如手机）下的样式 */
@media screen and (max-width: 768px) {
  .feature-left .icon {
    margin-right: 5%; /* 右边距5% */
  }
}

/* icon 中的 i 标签样式 */
.feature-left .icon i {
  display: table-cell; /* 设置为表格单元格 */
  vertical-align: middle; /* 垂直居中对齐 */
  font-size: 30px; /* 字体大小30px */
  color: #F14E95; /* 颜色为粉色 */
}

/* feature-copy 区域的样式 */
.feature-left .feature-copy {
  float: left; /* 设置为左浮动 */
  width: 80%; /* 宽度80% */
}

/* 小屏幕设备（如手机）下的样式 */
@media screen and (max-width: 768px) {
  .feature-left .feature-copy {
    width: 70%; /* 宽度70% */
    float: left; /* 设置为左浮动 */
  }
}

/* feature-copy 区域标题样式 */
.feature-left .feature-copy h3 {
  text-transform: uppercase; /* 将文本转换为大写 */
  font-size: 18px; /* 字体大小18px */
  color: #5d5d5d; /* 字体颜色为灰色 */
  margin-bottom: 10px; /* 底部间距10px */
}


/* owl-carousel 控制点的样式 */
.owl-carousel .owl-controls .owl-dot span {
  background: #e6e6e6; /* 默认背景色为浅灰色 */
}

/* 鼠标悬停、焦点时的控制点样式 */
.owl-carousel .owl-controls .owl-dot span:hover, 
.owl-carousel .owl-controls .owl-dot span:focus {
  background: #cccccc; /* 悬停时背景色为更深的灰色 */
}

/* 控制点激活状态的样式 */
.owl-carousel .owl-controls .owl-dot.active span {
  background: transparent; /* 背景透明 */
  border: 2px solid #F14E95; /* 边框为粉色 */
}

/* 大写字母样式 */
.uppercase {
  font-size: 14px; /* 设置字体大小 */
  color: #000; /* 设置字体颜色 */
  margin-bottom: 10px; /* 设置底部间距 */
  font-weight: 700; /* 设置字体加粗 */
  text-transform: uppercase; /* 将文本转换为大写字母 */
}

/* 返回顶部按钮的样式 */
.gototop {
  position: fixed; /* 固定定位，始终显示在页面右下角 */
  bottom: 20px; /* 设置距离底部20px */
  right: 20px; /* 设置距离右边20px */
  z-index: 999; /* 设置层级 */
  opacity: 0; /* 初始时隐藏按钮 */
  visibility: hidden; /* 初始时隐藏按钮 */
  transition: 0.5s; /* 设置平滑过渡效果 */
}

/* 返回顶部按钮激活时的样式 */
.gototop.active {
  opacity: 1; /* 显示按钮 */
  visibility: visible; /* 设置按钮可见 */
}

/* 返回顶部按钮的链接样式 */
.gototop a {
  width: 50px; /* 设置按钮宽度 */
  height: 50px; /* 设置按钮高度 */
  display: table; /* 使按钮成为表格元素，居中对齐 */
  background: rgba(0, 0, 0, 0.5); /* 设置按钮背景色为半透明黑色 */
  color: #fff; /* 设置文字颜色为白色 */
  text-align: center; /* 设置文本居中对齐 */
  border-radius: 4px; /* 设置圆角 */
}

/* 返回顶部按钮内部图标样式 */
.gototop a i {
  height: 50px; /* 设置图标容器高度 */
  display: table-cell; /* 设置图标容器为表格单元格，居中对齐 */
  vertical-align: middle; /* 垂直居中 */
}

/* 返回顶部按钮的鼠标悬停、点击、聚焦时的样式 */
.gototop a:hover, .gototop a:active, .gototop a:focus {
  text-decoration: none; /* 移除链接的下划线 */
  outline: none; /* 移除焦点时的轮廓 */
}

/* 按钮的基础样式 */
.btn {
  margin-right: 4px; /* 右边距设置 */
  margin-bottom: 4px; /* 下边距设置 */
  font-family: "Work Sans", Arial, sans-serif; /* 字体设置 */
  font-size: 16px; /* 字号设置 */
  font-weight: 400; /* 字体粗细设置 */
  border-radius: 30px; /* 圆角设置 */
  transition: 0.5s; /* 过渡效果 */
  padding: 8px 20px; /* 内边距设置 */
}

/* 中等大小按钮样式 */
.btn.btn-md {
  padding: 8px 20px !important; /* 强制设置内边距 */
}

/* 大号按钮样式 */
.btn.btn-lg {
  padding: 18px 36px !important; /* 强制设置大号按钮的内边距 */
}

/* 按钮的悬停、活动、焦点时样式 */
.btn:hover, .btn:active, .btn:focus {
  box-shadow: none !important; /* 去掉阴影 */
  outline: none !important; /* 去掉外轮廓 */
}

/* 具有较大下边距的行样式 */
.row-pb-md {
  padding-bottom: 4em !important; /* 设置下边距 */
}

/* 具有较小下边距的行样式 */
.row-pb-sm {
  padding-bottom: 2em !important; /* 设置较小的下边距 */
}

/* 页面加载时的加载动画 */
.fh5co-loader {
  position: fixed; /* 固定定位 */
  left: 0px; /* 距离左侧0px */
  top: 0px; /* 距离顶部0px */
  width: 100%; /* 宽度设置为100% */
  height: 100%; /* 高度设置为100% */
  z-index: 9999; /* 层级设置为最高 */
  background: url(../images/loader.gif) center no-repeat #fff; /* 显示加载动画 */
}

/* 动画元素的初始状态 */
.js .animate-box {
  opacity: 0; /* 初始透明度为0 */
}