@charset "utf-8";
/* 页面滚动条优化 */
body::-webkit-scrollbar {width:7px;height: 1px;}
body::-webkit-scrollbar-thumb {background:#f6b93b;}
body::-webkit-scrollbar-track {background:#2c3e50;}
:root {
--primary-color: #3a8861; /* 主色调 - 道观绿 */
--secondary-color: #2289b4; /* 辅色 - 天空蓝 */
--accent-color: #e6d3a7; /* 道教金色 */
--dark-color: #2c3e50; /* 深色文本 */
--light-color: #f8f9fa; /* 浅色背景 */
--gray-color: #eaeaea; /* 灰色边框 */
--primary: #1a5d57;
--accent: #e6d3a7;
--light: #f8f9fa;
--header-color: #fff;
--text-color: #666;
--text-light: #999;
--shadow: 0 4px 12px rgba(0,0,0,0.1);
--max-width: 1560px;
/* 链接颜色规范 */
--link-color: #2c3e50; /* 主链接颜色 - 天空蓝 */
--link-hover: #3a8861; /* 悬停颜色 - 道观绿 */
--link-visited: #1a6a8f; /* 已访问链接颜色 */
--link-active: #2a7a52; /* 活动状态颜色 */
}
* {margin: 0;padding: 0;box-sizing: border-box;}
body {
font-family: Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: var(--text-color);
line-height: 1.6;
}
/* 通用链接样式 */
a {color: var(--link-color);text-decoration: none;transition: all 0.3s ease;}
a:hover {color: var(--link-hover);}
.content-header {max-width: var(--max-width);margin: 0px auto;padding: 0 20px;position: relative;}
/* 快速导航 - 桌面模式 */
.quick-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 100px;
padding: 15px 30px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
z-index: 3;
gap:10px;
}
.quick-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s;
min-width:120px;
}
.quick-item i {
font-size: 24px;
margin-bottom: 8px;
background: var(--primary-color);
color: white;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.quick-item span {font-size: 16px;color: #333;text-align: center;}
.quick-item:hover {transform: translateY(-5px);}
/* 内容区域 */
.content-container {max-width: var(--max-width);margin: 40px auto;padding: 0 20px;position: relative;}
.section-title {text-align: center;margin: 60px auto;position: relative;}
.section-title h2 {font-size: 2.0rem;color: var(--header-color);display: inline-block;background-color: white;padding: 0 25px;position: relative;z-index: 1;background: linear-gradient(to right, var(--primary-color), var(--secondary-color));border-radius:100px;}
.section-title h2::before {content: '☯';margin-right: 15px;color: var(--light-color);}
.section-title::after {content: '';position: absolute;top: 50%;left: 0;right: 0;height: 2px;background: linear-gradient(to right, transparent, var(--primary-color), transparent);z-index: 0;}
/* 门票预订 */
.ticket-container {
display: flex;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
min-height: 500px;
max-width: 1560px;
margin: 0 auto;
}
/* 左侧样式 */
.left-section {
background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
color: white;
position: relative;
overflow: hidden;
min-width: 300px;
}
.left-section::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -60px;
right: -60px;
}
.left-section::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
bottom: -50px;
left: -50px;
}
.left-section h2 {
font-size: 2.2rem;
margin-bottom: 25px;
position: relative;
z-index: 2;
text-align: center;
}
.qr-container {
background: white;
padding: 15px;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
margin: 20px 0;
position: relative;
z-index: 2;
max-width: 220px;
}
.qr-placeholder {
width: 180px;
height: 180px;
background: linear-gradient(45deg, #2289b4, #2ecc71);
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.qr-placeholder i {
font-size: 5rem;
color: white;
}
.tip-text {
margin: 25px 0;
font-size: 1.1rem;
text-align: center;
font-weight: 300;
position: relative;
z-index: 2;
line-height: 1.6;
}
.buy-btn {
background: white;
color: #1a2980;
border: none;
padding: 15px 45px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
}
.buy-btn:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);background: #f8f9fa;}
/* 中间样式 */
.middle-section {flex: 2;padding: 40px;background: #f8f9fa;min-width: 350px;}
.ticket-types {margin-bottom: 30px;}
.ticket-types h3 {
font-size: 1.8rem;
color: #2c3e50;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 3px solid #2289b4;
display: inline-block;
font-weight:600;
}
.tabs {display: flex;gap: 15px;margin-bottom: 25px;flex-wrap: wrap;}
.tab {
flex: 1;
padding: 15px;
min-width: 120px;
text-align: center;
background: #e9ecef;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
color: #495057;
}
.tab:hover {background: #dee2e6;}
.tab.active {background: #2289b4;color: white;box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);}
.ticket-info {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
max-width: 800px;
}
.ticket-detail {display: none;}
.ticket-detail.active {display: block;}
.ticket-detail h4 {font-size: 1.4rem;color: #2c3e50;margin-bottom: 15px;display: flex;align-items: center;gap: 10px;}
.price {font-size: 2.2rem;font-weight: 700;color: #e74c3c;}
.price small {font-size: 1.2rem;color: #7f8c8d;}
.description {color: #555;line-height: 1.8;margin-bottom: 20px;}
.beizhu {color: #555;line-height: 1.8;margin-top: 20px;}
.features {list-style: none;margin-top: 20px;}
.features li {margin-bottom: 10px;display: flex;align-items: flex-start;gap: 10px;}
.features i {color: #3a8861;margin-top: 4px;}
/* 右侧样式 */
.right-section {
flex: 1.5;
padding: 40px;
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
position: relative;
overflow: hidden;
min-width: 350px;
}
.process-title {
font-size: 1.8rem;
color: #2c3e50;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 3px solid #e74c3c;
display: inline-block;
}
.steps {position: relative;padding-left:0px;}
.step {position: relative;margin-bottom: 35px;padding-left: 45px;z-index: 1;}
.step:last-child {margin-bottom: 0;}
.step::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #2289b4;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
z-index: 2;
}
.step:nth-child(1)::before {content: "1";}
.step:nth-child(2)::before {content: "2";}
.step:nth-child(3)::before {content: "3";}
.step:nth-child(4)::before {content: "4";}
.step::after {
content: "";
position: absolute;
left: 15px;
top: 30px;
width: 2px;
height: calc(100% + 15px);
background: #2289b4;
z-index: 1;
}
.step:last-child::after {display: none;}
.step-content {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
position: relative;
}
.step-content::before {
content: "";
position: absolute;
left: -10px;
top: 20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid white;
}
.step-icon {font-size: 1.5rem;color: #e74c3c;margin-bottom: 10px;}
.step-text {color: #555;line-height: 1.7;}
/* 响应式设计 */
@media (max-width: 1200px) {
.ticket-container {flex-direction: column;max-width: 800px;}
.left-section, .middle-section, .right-section {width: 100%;}
.header h1 {font-size: 2.2rem;}
.left-section {padding: 30px;}
.qr-container {max-width: 200px;}
}
@media (max-width: 768px) {
.header h1 {font-size: 2rem;}
.tabs {flex-direction: column;}
.tab {min-width: 100%;}
.step::after {left: 15px;top: 30px;}
}
/* 景点介绍 */
.attractions {display: grid;grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));gap:40px;margin-bottom: 80px;}
.attraction-card {
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.3s;
background-color: white;
position: relative;
}
.attraction-card:hover {transform: translateY(-10px);box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.attraction-card::before {
/* content: ''; */
position: absolute;
top: 10px;
left: 10px;
width: 30px;
height: 30px;
background: url('data:image/svg+xml;utf8,');
background-size: contain;
z-index: 2;
opacity: 0.7;
}
.attraction-img {height: 280px;width: 100%; */object-fit: cover;}
.attraction-content {padding: 20px;}
.attraction-content h3 {margin-bottom: 10px;color: var(--text-color);display: flex;align-items: center;}
.attraction-content p {color: var(--text-light);font-size: 1rem;}
/* 多媒体矩阵 */
.media-section {
background-color: var(--light-color);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
padding: 60px 0;
margin-bottom: 60px;
border-radius: 10px;
position: relative;
}
.media-section::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border: 2px dashed var(--primary-color);
border-radius: 8px;
pointer-events: none;
}
.media-container {display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;max-width: 1500px;margin: 0 auto;}
.media-card {text-align: center;flex: 0 0 150px;position: relative;}
.qr-code {width: 140px;height: 140px;background-color: white;border-radius: 10px;display: flex;align-items: center;justify-content: center;margin: 0 auto 15px;box-shadow: var(--shadow);position: relative;overflow: hidden;}
.qr-code::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;opacity: 0.3;}
.qr-code i {font-size: 60px;color: var(--primary-color);}
.media-card h4 {color: #666;font-weight: 400;}
.contact-info {list-style: none;}
.contact-info li {margin-bottom: 15px;display: flex;}
.contact-info li a {color: #aaa;text-decoration: none;transition: color 0.3s ease;}
.contact-info li a:hover {color: var(--accent);}.contact-info i {width: 40px;height: 40px;margin-right: 10px;color: var(--primary);background: var(--accent);border-radius: 50%;display: flex;justify-content: center;align-items: center;
font-size: 1.2rem;}
.copyright {
text-align: center;
padding-top: 30px;
margin-top: 30px;
color: rgba(255,255,255,0.6);
border-top: 1px solid rgba(255,255,255,0.1);
max-width: var(--max-width);
margin: 0 auto;
font-size:14px;
}
.copyrights{
text-align: center;
color: rgba(255,255,255,0.6);
font-size: 1rem;
max-width: var(--max-width);
margin: 0 auto;font-size:14px;
}
.friend-links {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
text-align: center;
margin-top: 30px;
}
.friend-links summary {
display: inline-block;
cursor: pointer;
color: rgba(255,255,255,0.8);
transition: all 0.3s;
padding: 8px 20px;
border-radius: 30px;
background: rgba(255,255,255,0.1);
}
.friend-links summary:hover {background: rgba(255,255,255,0.2);color: white;}
.friend-links summary::marker {display: none;content: '';}
.friend-links summary::after {content: '▼';display: inline-block;margin-left: 10px;font-size: 12px;transition: transform 0.3s;}
.friend-links[open] summary::after {transform: rotate(180deg);}
.links-container {display: flex;justify-content: left;flex-wrap: wrap;gap: 15px;/* max-width: 400px; *//* margin: 20px auto 0; *//* padding: 20px 0; */}
.friend-link {display: inline-block;padding: 8px 60px;background-color: rgba(255,255,255,0.1);color: rgba(255,255,255,0.8);text-decoration: none;border-radius: 50px;transition: all 0.3s;font-weight: 500;}
.friend-link:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
}
/* 移动端快速导航 */
.mobile-quick-nav {
display: none;
background-color: white;
padding: 20px;
margin: 20px;
border-radius: 15px;
box-shadow: var(--shadow);
}
.quick-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;}
.mobile-quick-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--dark-color);
padding: 10px;
border-radius: 10px;
transition: all 0.3s;
background: rgba(12, 148, 99, 0.05);
}
.mobile-quick-item i {
font-size: 24px;
margin-bottom: 8px;
color: var(--primary-color);
background: rgba(12, 148, 99, 0.1);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.mobile-quick-item span {font-weight: 500;text-align: center;}
.mobile-quick-item:hover {background-color: var(--primary-color);color: white;}
.mobile-quick-item:hover i {
background: rgba(255,255,255,0.2);
color: white;
}
/* 响应式设计 */
@media (max-width: 992px) {
.slide-content h1 {font-size: 2.5rem;}
.slide-content h1::before,
.slide-content h1::after {display: none;}
}
@media (max-width: 768px) {
.quick-nav {display: none;}
.mobile-quick-nav {display: block;padding: 10px;margin: 10px;}
.slide-content h1 {font-size: 2rem;}
.ticket-grid {grid-template-columns: 1fr;}
.attractions {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap:30px;margin-bottom: 40px;}
/* 内容区域 */
.content-container {max-width: var(--max-width);margin: 0px auto;padding: 0 20px;position: relative;}
}
@media (max-width: 576px) {
.slide-content h1 {font-size: 1.8rem;}
.section-title h2 {font-size: 1.4rem;}
.logo-img {width: 100px;height: 40px}
.news-section {flex-direction: column;}
.section-title {text-align: center;margin:20px auto;position: relative;}
}
@keyframes float {0% {transform: translateX(0);}50% {transform: translateX(20px);}100% {transform: translateX(0);}}
/* 游客服务 */
.services-section {
padding:50px 0;
border-radius: 15px;
margin-bottom: 80px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 0 auto;
padding: 0 0px;
}
.service-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.3s;
}
.service-card:hover {
transform: translateY(-10px);
}
.service-header {
background-color: var(--primary-color);
color: white;
padding:12px;
text-align: center;
}
.service-header h3 {
font-size: 1.5rem;
margin: 0;
}
.service-content {
padding: 25px;
}
.service-links {
list-style: none;
}
.service-links li {
margin-bottom: 30px;
padding-bottom:30px;
border-bottom: 1px dashed #eee;
}
.service-links li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.service-links a {
display: flex;
align-items: center;
text-decoration: none;
color: var(--text-color);
transition: color 0.3s;
}
.service-links a:hover {
color: var(--primary-color);
}
.service-links i {
margin-right: 10px;
color: var(--primary-color);
font-size: 18px;
}
/* 新闻 */
.container {max-width: 1560px;margin: 0 auto;}
.subtitle {
color: #5C7A89;
font-size: 22px;
margin-top: 25px;
font-weight: 500;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
.content-wrapper {display: flex;flex-wrap: wrap;margin-bottom: 40px;}
/* 轮播图区域 */
.carousel-section {flex: 0 0 50%;/* border-radius: 12px; */overflow: hidden;position: relative;/* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */margin-right: 30px;min-width: 300px;/* background: #fff; */}
.carousel-container {position: relative;height: 100%;overflow: hidden;border-radius: 12px;}
.carousel-slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 1s ease-in-out;}
.carousel-slide.active {opacity: 1;}
.carousel-link {display: block;width: 100%;height: 100%;position: relative;}
/* 新闻区域 */
.news-section {flex: 1;border-radius: 12px;overflow: hidden;min-width: 300px;}
.news-tabs {display: flex;background: #f5f9f7;border-radius: 12px 12px 0 0;}
.tab-btn {
flex: 1;
padding:16px 0;
border: none;
background: transparent;
color: #5C7A89;
font-size: 19px;
font-weight: 700;
cursor: pointer;
position: relative;
}
.tab-btn i {margin-right: 10px;font-size: 18px;}
.tab-btn.active {color: white;background: #3a8861;}
.news-content {/* background: white; */border-radius: 0 0 15px 15px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);overflow: hidden;}
.news-list {display: none;padding: 20px 0px 5px 0px;}
.news-list.active {display: block;}
.news-item {
padding: 12px;
background: white;
border-radius: 12px;
margin-bottom: 15px;
transition: all 0.4s ease;
cursor: pointer;
position: relative;
overflow: hidden;
border-left:3px solid #fff;
}
.news-item:hover {background: #f9fdfa;border-left:3px solid #3a8861;}
.news-item:hover .news-title {color: #3a8861;}
.news-item:hover .news-date {color: #3DA76A;}
.news-title {
font-size: 19px;
font-weight: 600;
margin-bottom: 10px;
transition: color 0.3s ease;
display: flex;
align-items: center;
}
.news-title i {
margin-right: 12px;
color: #3DA76A;
font-size: 16px;
background: #f0faf5;
padding: 8px;
border-radius: 50%;
width: 36px;
height: 36px;
text-align: center;
line-height: 20px;
flex-shrink: 0;
}
.news-date {
font-size: 14px;
color: #8898AA;
margin-bottom: 10px;
transition: color 0.3s ease;
display: flex;
align-items: center;
}
.news-date i {margin-right: 8px;}
.news-excerpt {
font-size: 15px;
color: #777;
line-height: 1.7;
margin-bottom: 10px;
}
.read-more {
display: inline-flex;
align-items: center;
color: #3a8861;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 14px;
}
.read-more i {margin-left: 8px;font-size: 14px;}
/* 轮播图样式 */
.carousel-container {position: relative;width: 100%;height: 0;/* 初始高度为 0，使用 padding-bottom 来实现宽高比 */padding-bottom: 66%; /* 16:9 宽高比 */overflow: hidden;border-radius: 10px;}
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.carousel-slide.active {opacity: 1;}
.carousel-image {width: 100%;height: 100%;object-fit: cover; /* 保证图片比例，裁剪填充 */}
.slide-contents {background-color: rgba(0, 0, 0, 0.6);color: white;padding: 15px 15px;position: absolute;bottom: 0;left: 0;width: 100%;/* margin-top:50px; */box-sizing: border-box;}
.slide-contents h3 {margin: 0;font-weight:600;color: #fff;}
.slide-contents h3 a{color: #fff;}
.slide-contents p {margin: 5px 0 0;font-size: 0.9em;}
.carousel-btn {width: 12px;height: 12px;border-radius:100px;background-color:#3a8861;border:none;margin:0 2px;cursor: pointer;}
.carousel-btn.active {background-color: #e74c3c;}
.carousel-btn:focus {outline: none;}
/* 响应式设计 */
@media (max-width: 1200px)
{
.logo-img {width: 170px;height: 70px;}
.content-wrapper {flex-direction: column;}
.carousel-section {width: 100%;margin-right: 0;margin-bottom: 30px;}
.news-section {width: 100%;}
}
@media (max-width: 768px)
{
.title {font-size: 32px;}
.subtitle {font-size: 18px;}
.carousel-container {height: 350px;}
.feature-card {width: 100%;}
.tab-btn {font-size: 16px;padding: 15px 0;}
.tab-btn i {display: none;}
}
@media (max-width: 480px)
{
.title {font-size: 28px;}
.subtitle {font-size: 16px;margin-top: 15px;}
.carousel-container {height: 250px;}
.slide-contents h3 {font-size:16px;}
.slide-contents p {font-size: 14px;}
.news-title {font-size: 14px; }
.news-title i {width: 30px;height: 30px;font-size: 14px;padding: 6px;}
.feature-header {padding: 15px;}
.feature-icon {width: 50px;height: 50px;font-size: 24px;}
.feature-title {font-size: 20px;}
.feature-content {padding: 15px;}
.footer-links {flex-direction: column;gap: 10px;}
}
.social-icons {display: flex;gap: 15px;}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icons a:hover {background: var(--accent-color);transform: translateY(-3px);}
/* 游客服务 */
.service-container {
display: flex;
flex-wrap: wrap;
gap: 0px;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
/* 左侧选项卡样式 - 淡雅背景 */
.left-panel {
flex: 1;
min-width: 300px;
padding: 25px;
background: linear-gradient(to bottom, #f8fcf9, #f0f7f3);
color: #333;
position: relative;
overflow: hidden;
}
.left-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(to bottom, #3a8861, #2289b4);
}
.panel-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.6rem;
margin-bottom: 25px;
position: relative;
z-index: 1;
color: #5C7A89;
font-weight: 400;
}
.panel-title i {
background: #3a8861;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 5px 15px rgba(58, 136, 97, 0.2);
}
/* 横向选项卡布局 */
.tab-header {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 25px;
position: relative;
z-index: 1;
flex-wrap: wrap;
background: #f0f7f3;
padding: 15px;
border-radius: 12px;
}
.tab-btns {
padding: 15px 20px;
background: #e3f2e9;
border: none;
border-radius: 8px;
color: #3a8861;
text-align: center;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1;
min-width: 120px;
font-weight: 600;
}
.tab-btns i {font-size: 1.1rem;transition: transform 0.3s ease;}
.tab-btns:hover {background: #d5ebdf;transform: translateY(-2px);}
.tab-btns.active {background: #3a8861;color: white;box-shadow: 0 5px 15px rgba(58, 136, 97, 0.3);transform: translateY(-2px);}
.tab-content {min-height: 380px;position: relative;z-index: 1;}
.tab-pane {display: none;animation: fadeIn 0.5s ease forwards;}
.tab-pane.active {
display: block;
}
.tab-pane h3 {
font-size: 1.4rem;
margin-bottom: 20px;
color: #3a8861;
display: flex;
align-items: center;
gap: 10px;
}
.tab-pane ul {list-style-type: none;}
.tab-pane li {
margin-bottom: 8px;
padding-left:18px;
position: relative;
font-size: 1.0rem;
color: #444;
}
.tab-pane li::before {
content: "•";
color: #2289b4;
font-weight: bold;
position: absolute;
left: 0;
font-size: 1.5rem;
line-height: 1;
}
/* 右侧简化交通信息样式 */
.right-panel {flex: 1;min-width: 300px;padding: 30px;background: #fff;position: relative;}
.right-panel::before {content: '';position: absolute;top: 0;left: 0;width: 100%;/* height: 5px;background: linear-gradient(to bottom, #3a8861, #2289b4); */}
.panel-title.right i {background: #3a8861;color: white;}
.transport-container {display: flex;flex-direction: column;gap:25px;}
.transport-card {padding: 20px;border-radius: 12px;background:#f8faf8;transition: all 0.3s ease;border-left:3px solid #fff;}
.transport-card:hover {background:#f8faf8;transition: all 0.3s ease;border-left:3px solid #f60;}
.transport-header {display: flex;align-items: center;gap: 15px;margin-bottom: 15px;}
.transport-icon {width: 35px;height: 35px;background: #3a8861;border-radius: 50%;display: flex;align-items: center;
justify-content: center;color: white;font-size: 1.0rem;box-shadow: 0 5px 15px rgba(58, 136, 97, 0.2);}
.transport-title {font-size: 1.2rem;color: #3a8861;font-weight:600;}
.transport-arrow {font-size: 1.1rem;color: #2289b4;margin: 0 5px;}
.transport-content {padding: 12px 15px;background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);}
.transport-content p {margin-bottom: 10px;font-size: 1.0rem;color: #666;display: flex;align-items: center;}
.transport-content p:last-child {margin-bottom: 0;}
.highlight {color: #2289b4;padding: 2px 5px;border-radius: 4px;margin: 0 3px;}
/* 响应式设计 */
@media (max-width: 1100px) {
.logo-img {width: 150px;height: 60px}
.service-container {flex-direction: column;}
.left-panel, .right-panel {width: 100%;}
.tab-header {flex-direction: row;overflow-x: auto;padding-bottom: 15px;}
.tab-btns {min-width: 180px;}
}
@media (max-width: 768px) {
.header h1 {font-size: 2.2rem;}
.tab-btns {min-width: 140px;padding: 12px 15px;font-size: 1rem;}
.logo-img {width: 120px;height: 48px}
.transport-header {/* flex-direction: column; */align-items: flex-start;gap: 10px;}
}
@media (max-width: 576px) {
.tab-header {flex-direction: column;}
.tab-btns {width: 100%;}
}
/*通用分页样式*/
.page {margin:30px auto; text-align:center;}
.page .current{margin:0 3px;border: 1px solid #1a5d57;line-height:36px;padding:0 15px;background: #1a5d57;color:#fff;display:inline-block;border-radius: 3px;}
.page span{ margin:0 3px;border:1px solid #2289b4;line-height:36px; padding:0 15px; background:#2289b4; color:#fff; display:inline-block;border-radius: 3px;}
.page a{margin:0 3px;border: 1px solid #3a8861;line-height:36px;background: #3a8861;splay:block;color:#fff;padding:0 15px;display:inline-block;border-radius: 3px;}
.page a:hover {margin:0 3px;border:1px solid #e6d3a7;line-height:36px; background:#e6d3a7; color:#fff; padding:0 15px;display:inline-block;border-radius: 3px;}
/* 返回顶部按钮 */
.elsnews-detail-back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #3a8861;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
z-index: 100;
opacity: 0;
visibility: hidden;
}
.elsnews-detail-back-to-top.visible {
opacity: 1;
visibility: visible;
}
.elsnews-detail-back-to-top:hover {
background: #0c4a23;
transform: translateY(-5px);
}
/* 手机端返回顶部按钮调整 */
@media (max-width: 768px) {
.elsnews-detail-back-to-top {bottom: 20px;right: 20px;width: 45px;height: 45px;}
.elsnews-detail-article img {width: 100%;height: auto;display: block;}
}
.bannerwz {
text-align: center;
margin-bottom: 40px;
padding: 40px 30px;
background: linear-gradient(to right, #3a8861, #4baa7a);
color: white;
position: relative;
overflow: hidden;
}
.bannerwz::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.bannerwz::after {
content: '';
position: absolute;
bottom: -40px;
left: -40px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.bannerwz h1 {
font-size: 3.2rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.bannerwz p {
font-size: 1.3rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
position: relative;
z-index: 1;
}
.thenext {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
flex-wrap: wrap;
gap: 15px;
}
.Previousu, .nextu {flex: 1;min-width: 280px;background: linear-gradient(135deg, #2289b4 0%, #3a8861 100%);border-radius:50px;transition: all 0.3s ease;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.Previousu:hover, .nextu:hover {transform: translateY(-3px);}
.Previousu a, .nextu a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
font-weight: 500;
font-size: 18px;
position: relative;
text-align: center;
}
.Previousu a::before {content: "←";margin-right: 10px;font-weight: bold;}
.nextu a::after {content: "→";margin-left: 10px;font-weight: bold;}
@media (max-width: 768px) {
.attraction-img {height: 200px;width: 100%; */object-fit: cover;}
.attraction-content p {color: var(--text-light);font-size: 0.9rem;}
.thenext {flex-direction: column;}
.Previousu, .nextu {width: 100%;}
.news-title {font-size: 16px;}
.news-content {font-size: 16px;}
.Previousu a, .nextu a {padding: 15px;font-size: 16px;}
}
@media (max-width: 480px) {
.news-container {padding: 20px;}
.Previousu a, .nextu a {padding: 10px;font-size: 14px;}
.attraction-img {height: 160px;width: 100%; */object-fit: cover;}
.attraction-content p {color: var(--text-light);font-size: 0.8rem;}
}
/* 返回列表按钮 */
.xback-to-list {
display: block;
text-align: center;
margin: 40px auto;
padding: 12px 30px;
background-color:#1a6b54;
color: white;
text-decoration: none;
border-radius: 30px;
transition: all 0.3s ease;
max-width: 200px;
}
.xback-to-list:hover {background-color: #c9a769;transform: translateY(-3px);}
.empty-message {color: #ffd600;font-style: italic;padding: 12px 25px;}