/* CSS Document */
*{margin:0; padding:0; list-style:none; font-style: normal;}
body{font-size:0.8rem; background:#F6F6F6; font-family:"微软雅黑", "苹方"; overflow-x:hidden; -webkit-text-size-adjust:none; color:#333}
img{border:0;} a{color:#333;text-decoration:none} a:hover{text-decoration:none}
input[type="text"]:focus,input[type="password"]:focus,texb-ontarea:focus{outline:none}
.clear{clear: both}
a{color:#333}
i{text-decoration: none}

.top{width: 100%; height: 70px; position:fixed; z-index: 999; background: #000; top:0}
.fixed{position: fixed; top: 0}
.main {width: 90%; max-width: 100%; margin: 0 auto; padding: 0 20px;}
.s_main {max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px;}
.logo{width:10%;height: 28px;margin-top:20px;float: left}
.logo img{width: 100%;}
.lan{width:15%; float: left}
.fixed{position: fixed;top: 0}
.nav_bar{width:60%;float: left;height: 60px;margin-left:3%}
.nav_bar li{float: left;line-height: 60px;text-align: center;width:14%}
.nav_bar li a{color: #FFF; text-decoration: none; display: block}
.nav_bar>ul>li:hover{background: #00cece}
.nav_bar ul li.l1:hover .hid{ display: block}

.login{float:left; margin:15px}
.login span a{display: block; width:70px; transition: all 0.4s ease; color:#FFF; height: 30px;  border-radius:15px; text-align: center; line-height: 30px; float: left; margin: 0 10px} 
.login em{float: left;color:#FFF}
.login span a:hover{background:#7a86a4; transition: width 0.4s ease; z-index: -1; color:#FFF} 

.arrow {display: inline-block; margin-left:8px;  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #FFF; transition: transform 0.3s}
.hero-container { position:relative;height: 100vh; overflow: hidden;}

/* 图片定位样式 */
.bg-image {position: absolute;width: 100%;height: 100%; object-fit: cover}
.stats-overlay { position: relative;z-index: 2; display: flex; gap: 10px; justify-content: center; align-items: center; height: 100%; left: 20%; top:22%}
.stat-card { opacity: 0; transform: translateY(60px);  animation: cardRise 1s forwards; text-align: center; padding: 30px 40px}
/* 新增数字容器样式 */
.number-wrapper { position: relative; display: inline-block}
.number {font-size:3rem; font-weight: 700; color: #FFF; font-family: 'Arial Black', sans-serif; margin-bottom: 8px}
/* 右上角加号样式 */
.plus-symbol { position: absolute; top: -8px; right: -18px; color: #FFF; font-size: 24px; font-weight: bold;}
.label {color: #FFF; font-size: 20px; letter-spacing: 1px;margin-top:25px}
@keyframes cardRise {to {opacity: 1;transform: translateY(0);} }
.stat-card:nth-child(1) { animation-delay: 0.3s; }
.stat-card:nth-child(2) { animation-delay: 0.6s; }
.stat-card:nth-child(3) { animation-delay: 0.9s; }

/* 其他原有样式保持不变... */
.us_ico1 a{background: url("../images/ico01.png") no-repeat center;  width: 150px; height:180px; display: block; margin-top:20px; margin-right:18px; float: left}
.us_ico1 a:hover{background: url("../images/ico01_h.png") no-repeat center;}

.us_ico2 a{background: url("../images/ico02.png") no-repeat center;  width: 150px; height:180px; display: block; margin-top:20px; margin-right: 30px; float: left}
.us_ico2 a:hover{background: url("../images/ico02_h.png") no-repeat center;}

.us_txt{width:45%; float:left; margin-right:10%;}
.us_pic{width:45%; float:left; margin-top: 50px}

.us_txt i{display: block; margin-top:170px; line-height: 24px; text-align:center}
.us_pic{position: relative; } .us_pic img:hover{transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.us_pic span{display: block; background:#d7e7ff; border-radius:50%;width:180px; height:180px; position: absolute; left: -60px; top: -20px;}
.us_pic span img{margin: 20px 40px}
.us_pic span:hover{background:#b7cdee}

.us h3{font-size:68px; line-height:130px; text-align: center; color:#000; margin:90px 0 80px 0;}
.gradient-slide { font-size: 4em; background:#000;-webkit-background-clip: text;-webkit-text-fill-color: transparent; animation: slideGradient 1.2s cubic-bezier(0.4, 0, 0.2, 1) both}

@keyframes slideGradient { from { opacity: 0; transform: translateX(-100px) skewX(15deg); }to { opacity: 1; transform: translateX(0) skewX(0);}}

.us_pic i{position: absolute; font-size:24px; color:#1c509c; font-weight: bolder; top:30px; right: -120px;  display: block}
.us_pic em{position: absolute; color:#1c509c; font-size:14px; text-align: center; height: 70px; display: block; margin-top:-7px}

:root { --item-width: 550px;--item-height:450px; --item-gap: 30px; --primary-color: #ff6b6b }
.aigc{background:#1a2d5c; padding:40px 0; margin:100px 0 50px 0;opacity: 0; /* 初始透明 */animation: fadeIn 2s ease-in-out forwards;}
@keyframes fadeIn {from {opacity: 0;}to { opacity: 1;}}
.aigc h2{font-size:160px; text-align: center;  color:#41578e; padding-top:100px; margin-bottom:50px; animation: bounceUp 1s ease both;}
.aigc h2 span{display: block; font-size:76px; color: #FFF; margin-top:-80px;}

.carousel-wrapper {width: 100%;margin: 0 auto;position: relative;overflow: hidden;padding: 60px 0; }

.carousel-track {display: flex;transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); gap: var(--item-gap); padding: 0 calc((100% - 3*var(--item-width) - 2*var(--item-gap))/2)}
.carousel-item { flex: 0 0 var(--item-width); height: auto;  display: flex;  flex-direction: column; gap: 15px; opacity: 0.6; transform: scale(0.95); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); position: relative}
.carousel-item.active {opacity: 1; transform: scale(1)}

 /* 图片容器悬停特效 */
.carousel-item:hover .card-image { transform: translateY(-5px); }
.carousel-item:hover .card-title {color:#6081d4}
.card-image { width: 100%; height: var(--item-height); border-radius: 15px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.18); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: rel.float-btnative}
.card-image::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s}
.carousel-item:hover .card-image::after { opacity: 1}
.card-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 0.4s}
.carousel-item:hover .card-image img { transform: scale(1.05)}
.card-title {text-align: center; font-size: 22px;  color: #FFF;   transition: color 0.3s; padding: 0 20px}



 /* 分页指示器优化 */
.pagination-wrapper {padding: 15px 30px; width: 150px; margin:40px auto 0 auto; background:#1d2246; backdrop-filter: blur(8px); box-shadow: 0 -5px 20px rgba(0,0,0,0.05);bottom: 0;border-radius:150px;}
.pagination { display: flex; gap: 15px; justify-content: center; max-width: 1200px; margin: 0 auto}
.dot {width: 16px; height: 16px; background:#FFF; border-radius: 50%; cursor: pointer; transition: all 0.4s; position: relative; overflow: hidden }
.dot::after { content: ''; position: absolute; top: 50%;  left: 50%; width: 0; height: 0; background:#41578e; border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.4s}
.dot.active {background: transparent;}

.dot.active::after { width: 100%; height: 100%;}
.dot:hover {transform: scale(1.2);}

/* 导航按钮优化 */
.nav-btn {position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; background: rgba(255,255,255,0.95); border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 8px 25px rgba(0,0,0,0.15); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; align-items: center; justify-content: center}

.nav-btn:hover {background:#41578e; transform: translateY(-50%) scale(1.1); box-shadow: 0 12px 30px rgba(255,107,107,0.25)}
.nav-btn::before {content: ''; border: solid #333; border-width: 0 3px 3px 0; display: inline-block; padding: 8px; transition: border-color 0.3s}

.nav-btn:hover::before { border-color: white;}
.prev-btn {left: 5%}
.prev-btn::before {transform: rotate(135deg);}
.next-btn {right: 5%}
.next-btn::before {transform: rotate(-45deg);}

/* 展开状态 */
.custom-arrow.active .arrow {transform: rotate(180deg)}
.hid{width:100%; height:60px; background: #00cece; position: absolute; left: 0;	display: none}
.hid ul{ width: 1210px; margin: 0 auto;}

.material-icons{background: url("../images/seek_btn.png") no-repeat; width: 100%; height: auto}

/* 下拉容器 */
.dropdown {position: relative;  width:150px; margin-top:20px; margin-left: 10px}
.dropdown li i {margin-right: 8px; vertical-align: middle}
.dropdown::after { content: "\f078"; font-family: "Font Awesome 5 Free"; margin-left: 10px;}

/* 触发按钮 */
.dropdown-toggle {width: 100%; padding: 10px; border:1px solid #bababa; border-radius:150px; color: #FFF;  font-size: 16px; cursor: pointer; transition: all 0.3s; background:no-repeat;  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1)}

.dropdown-toggle:hover { background: #66b1ff; transform: translateY(-2px); }

 /* 下拉菜单 */
.dropdown-menu { position: absolute; top:70%; left: 0;  width: 100%;  background: white;  border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(-10px); visibility: hidden; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

 /* 下拉菜单显示时 */
.dropdown:hover .dropdown-menu { opacity: 1; transform: translateY(0); visibility: visible}

/* 菜单项 */
.dropdown-item {padding: 12px 20px; color: #606266; text-decoration: none;  display: block; transition: all 0.2s}
.dropdown-item:hover { background: #ecf5ff; color: #409eff; padding-left: 25px}

 /* 分割线 */
.dropdown-divider { height: 1px; background: #ebeef5; margin: 4px 0;}

 /* 搜索容器样式 */
.search-container { position:absolute; display: inline-block; float:right; top: 0; right: 0}

/* 搜索图标默认状态 */
.search-icon {  width: 40px; height: 40px; cursor: pointer; position: absolute; margin-top: 5px; left: 10px; top: 50%; transform: translateY(-50%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2}

 /* 输入框样式 */
.search-input { width: 0; margin-top: 10px; height: 45px; margin-top: 10px; margin-right: 5px; padding: 0 20px;  padding-left: 60px;  border: none;  border-radius: 30px; border:1px solid #bababa; opacity: 0; transition: all 0.4s ease-in-out; transform-origin: right center}

 /* 激活状态样式 */
 .search-container.active .search-input {width: 260px; opacity: 1}

.search-container.active .search-icon { left: 20px; transform: translateY(-50%) scale(0.8)}

/* 输入框聚焦样式 */
.search-input:focus { outline: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)}

.carousel {width:100%;  padding: 40px 20px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; position: relative}

/* 底部装饰线 */
.carousel::after {content: ''; position: absolute; bottom: -30px; left: 50%;  transform: translateX(-50%); width: 85%; height: 2px; background: repeating-linear-gradient(90deg, transparent 0px,  transparent 8px,  #264692 8px,  #4CAF50 12px);}
.title-section {padding-left: 30px}
.title {font-size: 36px; margin: 0 0 20px; color: #000;line-height: 1.2;}

/* 轮播容器 */
.slider-container { position: relative;width: 500px; height: 500px; left: -220px}
.container {padding: 0 20px;}
.solution{width:1300px; margin:0 auto}

/* 动画板块通用样式 */
.animate-card {opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);  display: grid;
 align-items: center; will-change: transform, opacity}

/* 图片容器 */
.card-img {position: relative; overflow: hidden; border-radius: 10px}
.card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 0.8s ease}

/* 文字容器 */
.card-text {padding: 20px}

/* 不同动画类型 */
.slide-left { transform: translateX(-100px); }
.slide-right { transform: translateX(100px); }
.zoom-in { transform: scale(0.9); }

/* 激活状态 */
.animate-card.active { opacity: 1; transform: none}
.animate-card.active img {transform: scale(1);}


.sol_card{ width:28%; margin:50px 2%; float:left}
.sol_card h2 a{font-weight: 700;color: #000; display: block; margin:25px 0 15px 0}

.sol_ico1{background: url("../images/ico01.png") no-repeat center ; background-size:107px 112px;  width: 107px; height:112px; display: block; margin-top:20px; margin-right:30px; float:left}
.sol_ico1:hover{background: url("../images/ico01_h.png") no-repeat center; background-size:107px 112px;}
.sol_ico2{background: url("../images/ico02.png") no-repeat center ; background-size:107px 112px;  width: 107px; height:112px; display: block; margin-top:20px; margin-right:30px; float:left}
.sol_ico2:hover{background: url("../images/ico02_h.png") no-repeat center; background-size:107px 112px;}
.sol_card li{height:56px;  line-height:56px; display: block; background:#264692; margin-bottom:15px;border-radius: 15px; text-align: center; color:#FFF;transition: color 0.3s; font-size:1em;}
.sol_card li:hover{background:#203b7b;opacity:0.8;transition: opacity 0.3s ease;}

 /* 响应式设计 */
 @media (max-width: 768px) {
.animate-card {margin: 50px 0;}
.card-text {order: -1;}color:#000;}

/* 图片动画 */
.slide {position: absolute; width: 100%; height: 100%; opacity: 0; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);  transform: scale(0.9) rotate(-5deg)}
.slide.active {opacity: 1; transform: scale(1) rotate(0deg); z-index: 2}
.image-container {width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.15); position: relative}
.carousel-img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1)}

/* 右下角内容 */
.content-wrapper { position: absolute; right: -260px; bottom: 50px; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 15px}
.cp_content { background: rgba(255,255,255,0.97);padding: 20px 25px; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); min-width: 200px; text-align: right; transform: translateY(20px); animation: textFloat 2s ease-in-out infinite}
@keyframes textFloat { 0%, 100% { transform: translateY(20px); } 50% { transform: translateY(15px); }}
.cp_content h3 { font-size: 26px; margin: 0 0 8px; color: #000000}
.cp_content p { font-size: 16px; color: #7f8c8d; line-height: 1.4; margin: 0}

/* 箭头按钮 */ 
.controls { display: flex; gap: 15px; background: rgba(255,255,255,0.95); padding: 10px; border-radius: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.control-btn { cursor: pointer; width: 45px; height: 45px; border: none; border-radius: 50%; background: #41578e; color: white; font-size: 22px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center}

.control-btn:hover { background: #264692; transform: scale(1.15) rotate(8deg); box-shadow: 0 5px 15px rgba(38, 70, 146, 0.4);}

/* 图标颜色变化 */
.search-icon path { transition: fill 0.3s ease}
.search-container.active .search-icon path { fill: #2196F3;}

.menu {display:flex; width: 60%; float:left}
.menu-item {position: relative; color: white; cursor: pointer; padding:20px; transition: all 0.3s ease}
.menu-item a{color: #FFF}
.menu-item:hover {background: #555;}

/* 二级菜单样式 */
.submenu {position: absolute; top: 100%; color:#FFF;  left: 0; background:#FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width:800px; padding: 1rem; border-radius: 8px}

.menu-item:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0)}

/* 二级菜单内容布局 */
.submenu-content {display: flex; gap: 1.5rem; color:#333; line-height: 36px }
.submenu-text {flex: 1; padding-left: 30px; padding-top:35px}
.submenu-image {flex: 1; border-radius: 4px; overflow: hidden; transition: transform 0.3s ease;}
.submenu-image img {width: 100%; height: auto; display: block;}
.submenu-image:hover { transform: scale(1.05) }

/* 大局浮动浮动*/
.slide-left {opacity: 0;transform: translateX(-100px); transition: all 0.8s ease 0.2s;}
.slide-right {opacity: 0;transform: translateX(100px); transition: all 0.8s ease 0.2s;}
.slide-up {opacity: 0; transform: translateY(50px); transition: all 0.6s ease;}
.float-animation {animation: float 3s ease-in-out infinite}

/* 动画激活状态 */
.active .slide-left,.active .slide-right,.active .slide-up {opacity: 1; transform: translate(0);}

/* 新版块样式 */
.dynamic-box { display: flex; gap: 40px; margin: 150px 0; align-items: center}
.dynamic-box .content { flex: 1}

/* 浮动动画关键帧 */
@keyframes float {0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); }
}

/* 新增整体滑动动画 */
.stats-container {display: flex;justify-content: center; padding: 80px 20px; background: url("../images/sj_bg.png") no-repeat center}
.stat-item {text-align: center; position: relative; min-width: 180px; transition: transform 0.3s}
.stat-item:hover { transform: translateY(-10px); }
.number1 {font-size: 48px; font-weight: 700; color: #fff; margin-bottom: 15px; opacity: 0; transition: opacity 0.5s}
.label {font-size: 18px; color: #fff; letter-spacing: 1px}

/* 装饰元素 */
.stat-item::after { content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border: 2px solid rgba(45, 52, 54, 0.1); border-radius: 20px; z-index: -1}
 @keyframes scaleIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; }}
.animate {animation: scaleIn 1s ease-out forwards}

/* 重置基础样式 */
.luxury-carousel,.luxury-carousel * {margin: 0; padding: 0; box-sizing: border-box}

/* 主容器 */
.luxury-carousel {width: 1300px; height: 700px; margin: 40px auto; position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.3)}

/* 幻灯片容器 */
.luxury-slides { display: flex; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); height: 100%}

/* 单个幻灯片 */
.luxury-slide {min-width: 100%; position: relative; overflow: hidden}

/* 图片样式 */
.luxury-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 0.8s ease}

/* 悬停图片放大效果 */
.luxury-carousel:hover .luxury-slide img {transform: scale(1)}

/* 文字容器 */
.luxury-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: #fff; transform: translateY(100%); transition: transform 0.5s ease}

/* 文字入场动画 */
.luxury-slide.active .luxury-caption { transform: translateY(0);}

/* 标题样式 */
.luxury-caption h3 {font-size: 2.2rem; margin-bottom: 15px; opacity: 0; transform: translateY(30px); transition: all 0.4s ease 0.2s}

/* 描述文字 */
.luxury-caption p { font-size: 1.1rem; line-height: 1.6; max-width: 600px; opacity: 0; transform: translateY(20px); transition: all 0.4s ease 0.3s;}

/* 激活状态文字动画 */
.luxury-slide.active h3,.luxury-slide.active p {opacity: 1; transform: translateY(0)}

/* 导航按钮 */
.luxury-nav {position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -30px; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(8px)}

/* 按钮悬停效果 */
.luxury-nav:hover {background: rgba(255,255,255,0.3); transform: scale(1.1)}

/* 按钮箭头 */
.luxury-nav::after { position: absolute; width: 15px; height: 15px; border: 3px solid #fff; border-width: 0 3px 3px 0; top: 50%; left: 50%}

/* 上一页按钮 */
.luxury-prev {left: 30px;}
.luxury-prev::after { transform: translate(-40%, -50%) rotate(135deg)}

/* 下一页按钮 */
.luxury-next { right: 30px;}
.luxury-next::after {transform: translate(-60%, -50%) rotate(-45deg)}

/* 指示器 */
.luxury-dots { position: absolute; bottom: 20px; left: 50%;transform: translateX(-50%); display: flex;gap: 12px}
.luxury-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s ease}
.luxury-dot.active {background: rgba(255,255,255,0.9); transform: scale(1.3);}
.lux_tit{width: 600px; margin: 70px auto 30px auto}
.lux_tit h2{font-size:2.6em;text-align: center; margin-top:20px;color:#000;}

.social-container {display: flex; margin-top: 15px; padding-right: 20px;  gap: 20px}

.social-icon {width: 40px;height: 40px; border-radius: 50%; background-color: #666; transition: background-color 0.3s; cursor: pointer; position: relative}

/* 鼠标悬停效果 */
.social-icon:hover { background-color: #333;}

.social-icon img{width:25px; height: auto; text-align: center; vertical-align: middle; margin:7px}

.b_footer{text-align:center;  height: 50px; line-height: 50px; background: #000; color: #939393}
.footer{background:#1c1c1c; margin-top: 30px; font-size:0.828em; padding: 50px 0; color:#939393} .footer a{color:#939393}
.foot_list{margin-right:2%; height:150px; padding-right:2%; border-right: 1px solid #666; float:left}

/* 悬浮容器样式 */
.float-container { position: fixed; right: 20px; bottom: 100px; display: flex; flex-direction: column; gap: 15px; z-index: 999}

/* 通用按钮样式 */
.float-btn { width:40px; height:40px; border-radius: 25px; background: white; box-shadow: 0 3px 10px rgba(0,0,0,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; position: relative; padding-top: 10px; padding-left: 10px}

/* 鼠标悬停动画 */
.float-btn:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0,0,0,0.3);}

/* 图标样式 */
.icon {font-size: 24px; transition: all 0.3s ease;}

/* 微信样式 */
.wechat:hover {background: #2AAC5B;color: white;}

/* QQ样式 */
.qq:hover { background: #264692; color: white;}

/* 置顶样式 */
.top1:hover { background: #666;color: white}

/* 二维码弹窗 */
.qrcode-popup { position: absolute; left: -120px; top: 50%; transform: translateY(-50%); padding: 10px; background: white;border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transition: all 0.3s ease;}
.float-btn:hover .qrcode-popup {opacity: 1; visibility: visible; left: -130px}


/* 返回顶部箭头 */
.top .icon { font-size: 20px;}
.container {justify-content: space-between;padding: 20px; overflow: hidden; position: relative; fone-size:148px}

/* 左侧英文部分 */
.container{margin-top: 100px}
.left-content {transform: translateX(-100%);animation: slideRight 1s forwards;color: #1c509c;font-weight: bolder; fone-size:148px; line-height: 130px; width:60%; margin-right: 10%;font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";font-weight: 700; float:left}
.rocking{color: #1c509c;font-weight: bolder; font-size:98px; text-align: right}
.chef {transform: translateX(-100%); animation: slideRight 1s 0.3s forwards;color: #1c509c;font-weight: bolder; font-size:98px; text-align: right;margin-bottom:20px}

/* 右侧中文部分 */
.right-content1{ transform: translateX(100%); animation: slideLeft 1s 0.6s forwards; margin-top:70px; width:30%; float: right}
.right-content1 h2{font-size:36px; margin-bottom: 30px}
.right-content1 p{margin-bottom: 20px; text-indent:2em}

/* 底部图片 */
.bottom-image { transform: translateY(100%); animation: slideUp 1s 1s forwards; text-align: center; margin-top: 50px;}
@keyframes slideRight { to {transform: translateX(0);}}
@keyframes slideLeft { to {transform: translateX(0);}}
@keyframes slideUp { to {transform: translateY(0); }}

/* 基础样式 */
.year {font-size:200px; text-align:right}.right-content { max-width: 400px;}
.company-name { font-size: 24px; margin: 15px 0; color: #1c509c;}

/*关于我们start*/
.about_bg{position:fixed;width:100%;height:100%;top:0;left:0;background:url("../images/about_bg.jpg") no-repeat;background-size:cover;}
.about_content{width:60%;margin:0 auto;}
.about_content h2,.about_content h3{text-align:center;font-weight:bold;color:#000;}
.about_content h2{font-size:40px;margin-bottom:50px;}
.about_content p{font-size:0.8em;color:#000;line-height:180%;margin-bottom:20px;}
.about_content.history{text-align:center;position:relative;}


/*大事记start*/
.event_box{margin:3% auto 0;position:relative;min-height:420px;}
.event_box .parHd {width:100%;display:inline-block;height:92px;overflow:hidden;}
.parHd  ul{width:100%;margin:0 auto;padding-top:25px !important;}
.parHd .tempWrap{margin:0 auto;}
.parHd .tempWrap:after{content:'';width:85%;height:1px;background:#580000;position:absolute;/* top:33%;*//* right:-140%;*/right:8%;top:35%;/* margin-top:-0.5px;*/z-index:10;}
.parHd li.no_line:before{display:none;}
.parHd li{display:inline-block;cursor:pointer;padding-top:30px;font-size:16px;color:#000;margin:0 30px;position:relative;}
.parHd li:after{content:'';background:url(../images/dot_ico.png) no-repeat;width:24px;height:24px;position:absolute;z-index:20;top:-12px;left:50%;margin-left:-12px;}

div#listBox {width:100%;}
.sPrev,.sNext{width:30px;height:30px;display:block;position:absolute;top:10px;}
.sPrev{left:0;}
.sNext{right:0;}
.sPrev img,.sNext img{transition:all .6s cubic-bezier(.51,1.1,.9,.95);-moz-transition:all .6s cubic-bezier(.51,1.1,.9,.95);-webkit-transition:all .6s cubic-bezier(.51,1.1,.9,.95);-o-transition:all .6s cubic-bezier(.51,1.1,.9,.95);}
.parHd li.act span{display:block;width:24px;height:24px;overflow:hidden;background:url(../images/cat.png) no-repeat;position:absolute;top:-12px;left:7px;z-index:21;}
.parHd li span,.parHd li.clone span{display:none;}	

.slide_left{width:400px; float:left} .slide_left img{width:400px; height:auto} 
.slide_right{width:600px; float:left; margin-left:150px; margin-top:100px}
.slide_right h2{color: #1c509c; font-size:36px}  .slide_right span{font-size:58px; margin-bottom: 15px; color: #1c509c;font-weight: bolder; line-height: 100px;}

.zs{background: #dee5ed; padding:50px 0; margin-bottom:80px}
.zs h2{font-size:40px;margin-bottom:50px; text-align: center; color: #000}
/* 新增遮罩层样式 */
.overlay {position: fixed;top: 0;left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7);backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 100}
/* 弹窗容器 */
.popup-container {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); width: 900px; height: 560px; background: white; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);  opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 101; padding: 40px;display: grid; grid-template-rows: auto auto 1fr}
/* 激活状态 */
.popup-active .overlay { opacity: 1; pointer-events: all; }
.popup-active .popup-container { opacity: 1; transform: translate(-50%, -50%) scale(1)}
 /* 弹窗内容样式 */
 .popup-title { font-size:68px; text-align: center; color: #000;  margin-bottom: 10px;text-transform: uppercase;  font-weight: 600;font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";font-weight: 700;  letter-spacing :3px; line-height: 130px; margin-top: 40px}
.popup-subtitle { font-size:36px; text-align: center; color: #00287f; text-transform: uppercase;  margin-bottom: 25px;font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";font-weight: 700; letter-spacing :2px}
.pop-span{width:97.8%;height: 60px; line-height: 60px; background: #00287f; margin: 0 -40px; padding:0 50px; font-size:24px}
.pop-span span{margin-right: 30px; color: #fff;}
.popup-content {font-size: 16px; color: #888; line-height: 1.8; overflow-y: auto; padding-right: 20px; margin-top: -200px;}
/* 关闭按钮 */
.close-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;  cursor: pointer; transition: transform 0.3s}
.close-btn:hover { transform: rotate(90deg);}
.close-btn::before,.close-btn::after { content: ''; position: absolute; width: 24px; height: 2px; background: #999; left: 8px; top: 19px}
.close-btn::before { transform: rotate(45deg);}
.close-btn::after {transform: rotate(-45deg)}
.container1{display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; padding: 50px; max-width: 1200px; margin: 0 auto}
.certificate {position: relative;transform: translateY(100px); opacity: 0; transition: all 0.6s cubic-bezier(0.25, 0.1, 0.2, 1.5); cursor: pointer}
.certificate.active { transform: translateY(0); opacity: 1}
.certificate img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.3s}
.certificate:hover img {transform: scale(1.05);}
.popup {position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%) scale(0); background: rgba(0,0,0,0.9); color: white; padding: 12px 20px; border-radius: 6px; white-space: nowrap; font-family: 'Microsoft YaHei'; font-size: 14px; opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); pointer-events: none;}
.popup::after { content: '';  position: absolute; top: 100%; left: 50%; border: 8px solid transparent; border-top-color: rgba(0,0,0,0.9); transform: translateX(-50%)}
.certificate:hover .popup {opacity: 1; transform: translateX(-50%) scale(1)}
.container1{ display: grid; grid-template-columns: repeat(5, 1fr);gap: 30px; padding: 50px; max-width: 1200px; margin: 0 auto}
.certificate { position: relative; transform: translateY(100px); opacity: 0; transition: all 0.6s cubic-bezier(0.25, 0.1, 0.2, 1.5); cursor: pointer}
.certificate:nth-child(-n+5) {transition-delay: 0.2s;}
.certificate.active { transform: translateY(0); opacity: 1}
.certificate img { width:220px; height:308px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s}
.certificate:hover img {transform: scale(1.05) rotate(1deg)}
.popup {position: absolute; bottom: calc(100% + 15px); left: 50%;transform: translateX(-50%) scale(0); background: white; color: #333;padding: 15px 25px;border-radius: 10px;box-shadow: 0 8px 30px rgba(0,0,0,0.15);font-family: 'Microsoft YaHei';font-size: 16px; font-weight: 500; opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); pointer-events: none;min-width: 160px;text-align: center; z-index: 10;}
.popup::after { content: ''; position: absolute; top: 100%; left: 50%; border: 10px solid transparent; border-top-color: white; transform: translateX(-50%)}
.certificate:hover .popup { opacity: 1; transform: translateX(-50%) scale(1);}

.news_page { max-width:1200px; margin:50px auto 0 auto}
.news_title {text-align: center; color: #1a1a1a; font-size: 32px; margin-bottom: 40px;letter-spacing: 2px}
.tabs {display: flex; justify-content: center;gap: 15px; margin-bottom: 40px;}
.tab { padding: 8px 25px; font-size: 14px; color: #666; background: transparent; border: 2px solid #e0e0e0; border-radius: 20px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.tab.active { background: #e0e0e0;border-color: #e0e0e0;color: #333}
.tab:hover {border-color: #bdbdbd;}
/* 新闻列表 */
.news-list {list-style: none}
.news-item {background: white;border-radius: 12px;padding:30px;margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); opacity: 0; transform: translateX(100%); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex;gap: 25px;}
.news-item.show {opacity: 1; transform: translateX(0);}
.news-item:hover {background: #f8f9ff;transform: translateX(10px);}
/* 日期样式 */
.news-date {min-width: 80px;text-align: center; padding-right: 20px;border-right: 2px solid #eee}
.news-date span {display: block;color: #666}
.news-date .day {font-size: 28px;font-weight: bold; color: #2196f3; line-height: 1; margin-bottom: 5px}
.news-date .month {font-size: 14px; text-transform: uppercase}
.news-content h3 {color: #333; margin-bottom: 10px; font-size: 18px}
.news-content p {color: #666;}

:root {--primary-color: #2c3e50;--secondary-color: #3498db; --text-color: #333; --transition: all 0.3s ease}

.news-header { text-align: center; margin-bottom: 30px; transform: translateY(20px); opacity: 0;  animation: slideIn 0.6s forwards}
.news-header h1{color: #000; margin:70px 0 40px 0}
.news-header img{width: 100%; height: auto}
.news-title { font-size: 2.5rem; color: var(--primary-color);  margin-bottom: 20px; padding-top:50px}
.news-image {width: 100%;height: 500px; object-fit: cover;border-radius: 15px;box-shadow: 0 10px 20px rgba(0,0,0,0.1);transition: var(--transition);cursor: pointer}
.news-image:hover {transform: translateY(-5px)}
.meta-info {display: flex; justify-content:left; gap: 50px;margin: 20px 0; color: #7f8c8d}
.meta-item { display: flex; align-items: center; gap: 8px; transition: var(--transition);}
.meta-item:hover {color: var(--secondary-color)}
.news-content1{margin: 30px 0; transform: scale(0.95); opacity: 0; animation: scaleUp 0.5s 0.3s forwards}
.news-content1 p{text-indent:40px; margin-bottom: 20px; line-height: 36px; font-size: 16px}
.subtitle {color: var(--primary-color); margin: 20px 0;font-size: 1.8rem}
.comments-section {background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1)}
.comment-form textarea {width:97%; padding: 15px; border: 2px solid #eee; border-radius: 10px; resize: vertical; margin: 15px 0; transition: var(--transition)}
.comment-form textarea:focus {border-color: var(--secondary-color); outline: none; }
.btn { background: var(--secondary-color); color: white; border: none;padding: 12px 25px;border-radius: 25px;cursor: pointer; transition: var(--transition);display: flex;align-items: center;gap: 8px}
.btn:hover {transform: translateY(-2px); box-shadow: 0 5px 15px rgba(52,152,219,0.3);}
.comment-list {margin-top: 30px;}
.comment-item {display: flex; gap: 15px; padding: 20px; background: #f8f9fa; border-radius: 10px; margin-bottom: 15px; opacity: 0; transform: translateX(-20px); animation: slideIn 0.5s forwards}
.recommendations {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 40px}
.recommend-card { background: white; border-radius: 15px; padding:30px; transition: var(--transition); cursor: pointer;}
.recommend-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
@keyframes slideIn {to { opacity: 1; transform: translateY(0);}}
@keyframes scaleUp {to {opacity: 1; transform: scale(1);}}

.recipe_tit{text-align: center; margin-bottom: 20px; width:100%}
.subtitle { color: #666; font-size: 1.2rem;}
.tabs3{display: flex;justify-content: center; gap: 20px;  margin-bottom: 30px; flex-wrap: wrap;}
.tab3{padding: 12px 30px; border: none; background: #fff; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1)}
.tab3.active { background: #3160a5; color: white;transform: translateY(-3px);}
.tab3:hover {transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.dishes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;opacity: 0; transform: translateY(20px); transition: all 0.5s ease}
.dish-card { background: white; border-radius: 15px; overflow: hidden;box-shadow: 0 4px 12px rgba(0,0,0,0.1);transition: transform 0.3s ease;}
.dish-card:hover {transform: translateY(-5px)}
.dish-image {width: 100%; height: 200px; object-fit: cover; border-bottom: 3px solid #3160a5}
.dish-title {padding: 20px; text-align: center; font-size: 1.1rem; color: #333}
.active-grid {opacity: 1; transform: translateY(0)}

 .yy_title {text-align: center;color: #1a1a1a;font-size: 36px; margin-bottom: 40px; letter-spacing: 2px; transform: translateY(-20px); opacity: 0; animation: titleSlide 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; margin-top: 60px}
@keyframes titleSlide {to {transform: translateY(0); opacity: 1}}
.yy_tabs {display: flex;justify-content: center;gap: 30px;margin-bottom: 60px;opacity: 0;transform: translateY(20px);animation: tabsAppear 0.6s 0.3s ease-out forwards}
@keyframes tabsAppear {to {opacity: 1;transform: translateY(0)}}
.yy_tab {padding: 12px 40px; font-size: 16px; color: #666; background: rgba(255,255,255,0.9); border: 2px solid #3160a5; border-radius: 30px; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(4px)}
.yy_tab.active {background: #3160a5;border-color: #3160a5; color: white; transform: scale(1.05)}
.yy_tab:hover {border-color: #3160a5}
.scene-list {list-style: none}
.scene-item { background: rgba(255,255,255,0.95); border-radius: 16px; margin-bottom: 30px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); opacity: 0; transform: translateX(100%); transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); display: flex; min-height: 240px; overflow: hidden; position: relative}
.scene-item::before {position: absolute;top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #f8f9ff, #fff); opacity: 0; transition: 0.4s ease}
.scene-item:hover {transform: translateX(20px); box-shadow: 0 12px 32px rgba(0,0,0,0.12)}
.scene-item:hover::before {opacity: 1}
.scene-item.show {opacity: 1; transform: translateX(0)}
.scene-img {flex: 0 0 40%; background-size: cover; background-position: center; position: relative;overflow: hidden}
.scene-img img{width: 100%; height: auto}
.scene-img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1);transition: 0.4s ease}
.scene-item:hover .scene-img::after {background: rgba(0,0,0,0.05)}
.scene-content {flex: 1; padding: 30px 40px; position: relative}
.scene-title {color: #1a1a1a; font-size: 24px; margin-bottom: 15px; position: relative; display: inline-block;}
.scene-title::after {position: absolute;bottom: -5px;left: 0;width: 40px; height: 3px; background: #2196f3; transition: 0.4s ease}
.scene-item:hover .scene-title::after {width: 100%}
.scene-desc {color: #666; line-height: 1.8; margin-bottom: 25px; font-size: 15px}
.more-link {display: inline-flex; align-items: center; color: #2196f3; text-decoration: none; font-weight: 500; transition: 0.3s ease}
.more-link::after {content: '→'; margin-left: 8px;transition: 0.3s ease}
.more-link:hover {letter-spacing: 1px}
.more-link:hover::after {transform: translateX(5px)}

        :root {--red: #ff4757; --blue: #2d98da; --green: #20bf6b; --orange: #fa8231;  --purple: #8854d0;  --hover-scale: 1.08;}

        .cp {display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; padding: 2rem;margin: 0; place-items: center; margin-bottom: 30px}

        /* 入场动画增强 */
        @keyframes enter {0% {opacity: 0; transform: translateY(30px) rotate(15deg)}
            80% {transform: translateY(-5px)}
            100% {opacity: 1; transform: translateY(0) rotate(0)}
        }

        .feature-card {position: relative; width: 140px; height: 140px; border-radius: 50%; padding: 1.5rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.08); animation: enter 0.6s ease-out both; display: flex;  flex-direction: column; align-items: center; justify-content: center; text-align: center}

        /* 入场延迟 */
        .feature-card:nth-child(1) { animation-delay: 0.1s; }
        .feature-card:nth-child(2) { animation-delay: 0.2s; }
        .feature-card:nth-child(3) { animation-delay: 0.3s; }
        .feature-card:nth-child(4) { animation-delay: 0.4s; }
        .feature-card:nth-child(5) { animation-delay: 0.5s; }

        /* 悬停动态效果 */
        .feature-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.15); transform: scale(var(--hover-scale)) rotate(0deg)}

        /* 图标容器动态 */
        .icon-box {  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden}

        /* 新增光环效果 */
        .icon-box::after {content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease}

        /* 动态图标 */
        .icon { width: 32px; height: 32px; transition: all 0.3s ease; position: relative; z-index: 2}

        /* 颜色主题 */
        .red .icon-box { background:#3160a5; }
        .blue .icon-box { background:#3160a5; }
        .green .icon-box { background:#3160a5; }
        .orange .icon-box { background:#3160a5; }
        .purple .icon-box { background:#3160a5; }

         /* 悬停变色效果 */
        .feature-card:hover .icon-box {
            transform: translateY(-8px) scale(1.15);
        }
        .red:hover .icon-box { background: #ff6b6b; }
        .blue:hover .icon-box { background: #45aaf2; }
        .green:hover .icon-box { background: #26de81; }
        .orange:hover .icon-box { background: #fd9644; }
        .purple:hover .icon-box { background: #a55eea; }

        /* 文字动态 */
        h3 {transition: transform 0.3s ease;}

        p {transition: transform 0.3s ease;}

        /* 文字动画 */
        .feature-card:hover h3 { transform: translateY(-2px);color: #000;}
        .feature-card:hover p { transform: translateY(2px);opacity: 1;}

        /* 新增脉冲动画 */
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.1); }
            70% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
            100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
        }

        .feature-card:hover .icon-box::after {opacity: 1; animation: pulse 1s ease-out;}

  .card-container {
            display: flex;
            gap: 30px;
            padding: 20px;
        }

        .card2 {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            width: 300px;
            transform: translateX(100vw) scale(0.8);
            opacity: 0;
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
            transition: 
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        /* 卡片入场动画 */
        .card2.active {
            transform: translateX(0) scale(1);
            opacity: 1;
        }

        /* 脉冲动画 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        /* 悬停效果 */
        .card2:hover {
            animation: pulse 1.2s infinite;
            background: #1c509c; /* 悬停蓝色 */
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        }

        /* 文字样式 */
        .card2 h2 {
            color: #333;
            font-size: 2.8em;
            margin-bottom: 15px;
            font-weight: 700;
            transition: color 0.3s ease;
        }

        .card2:hover h2 {
            color: white; /* 悬停白字 */
        }

        .card2 p {
            color: #666;
            font-size: 1.2em;
            line-height: 1.6;
            transition: color 0.3s ease;
        }

        .card2:hover p {
            color: rgba(255, 255, 255, 0.9);
        }

        /* 延迟动画 */
        .card2:nth-child(1) { transition-delay: 0.1s; }
        .card2:nth-child(2) { transition-delay: 0.2s; }
        .card2:nth-child(3) { transition-delay: 0.3s; }

        @media (max-width: 768px) {
            .card-container {
                flex-direction: column;
            }
            .card {
                width: 100%;
                transform: translateX(100vw) scale(0.8);
            }
        }

 /* 加载动画 */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.5s;
        }

        .loader::after {
            content: "";
            width: 60px;
            height: 60px;
            border: 6px solid #ff6b6b;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 内容样式 */
.al {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
        }

        .container4 {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            opacity: 0;
            transform: translateY(20px);
            transition: 1s ease;
			padding-top: 150px
        }

        .container4 h1 {
            text-align: center;
            font-size: 3em;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: titleFloat 2s ease-in-out infinite alternate;
        }

        .video-container {
            position: relative;

            margin: 20px 0;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            transform: scale(0.95);
            transition: 0.5s ease;
        }

        .video-container:hover {
            transform: scale(1);
        }

        .video-container iframe {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .content4 {
            background: rgba(255,255,255,0.9);
            padding: 30px;
            border-radius: 15px;
            margin: 20px 0;
            backdrop-filter: blur(10px);
            transform: translateX(-50px);
            opacity: 0;
            transition: 1s ease;
        }
.content4 images{width: 100%}
        .content.active {
            transform: translateX(0);
            opacity: 1;
        }

        /* 动画定义 */
        @keyframes titleFloat {
            from { transform: translateY(0); }
            to { transform: translateY(-10px); }
        }

        .animate-item {
            opacity: 0;
            transform: translateY(30px);
            transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .animate-item.show {
            opacity: 1;
            transform: translateY(0);
        }
.container4{padding-top:170px}

        .ksh_title {
            text-align: left;
            margin: 50px 0;
            color: #333;
        }

        .image-container1 {

            overflow-x: hidden;
        }

        .slide-img {
            width: 220px;
            height: auto; vertical-align:middle;
			margin-right:20px;
            opacity: 0;
            transform: translateX(100%);
            transition: all 1s ease;
            object-fit: cover;
            flex-shrink: 0;
        }

        /* 时间线容器 */
        .timeline-container {
            width: 1100px;
            margin: 0 auto;
            position: relative;
            height: 150px;
        }

        /* 时间线 */
        #timeline {
            height: 2px;
            background: #eee;
            width: 0;
            position: absolute;
            top: 50%; /* 垂直居中 */
            left: 0;
            transition: width 1.5s ease;
            z-index: 1; /* 确保线在底层 */
        }

        /* 圆圈容器 */
        .circles-wrapper {
            display: flex;
            justify-content: space-between;
            width: 100%;
            position: absolute;
            top: 50%; /* 与时间线垂直对齐 */
            transform: translateY(-50%); /* 精确垂直居中 */
            z-index: 2; /* 确保圆圈在上层 */
        }

        /* 单个圆圈项 */
        .circle-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        /* 圆圈样式 */
        .circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            position: relative;
        }

        /* 中间三个蓝色圆圈 */
        .circle.mid { 
            background: #3160a5; 
            color: white;
            /* 添加投影突出层次 */
            box-shadow: 0 2px 6px rgba(33,150,243,0.4);
        }

        /* 两侧灰色圆圈 */
        .circle.left, .circle.right {
            background: #ccc;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        /* 文字说明 */
        .circle-text {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            position: absolute;
            bottom: -40px; /* 调整文字位置 */
            text-align: center;
            width: 100px;
            left: 50%;
            transform: translateX(-50%);
        }

        .transfer-system { 
            font-family: Arial, sans-serif;
            margin: 20px;
            min-width: 1200px;
        }

        .transfer-title {
            text-align: left;
            margin-bottom: 50px;
            color: #333;
            font-size: 24px;
        }

        .transfer-images {
            width: 1200px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 80px;
            overflow-x: hidden;
        }

        .transfer-img {
            width: 380px;
            height: 450px;
            opacity: 0;
            transform: translateX(100%);
            transition: all 1s ease;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .transfer-timeline {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            height: 150px;
        }

        #transfer-line {
            height: 2px;
            background: #333;
            width: 0;
            position: absolute;
            top: 50%;
            left: 0;
            transition: width 1.5s ease;
            z-index: 1;
        }

        .transfer-circles {
            display: flex;
            justify-content: space-between;
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
        }

        .transfer-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        /* 修改中间圆圈颜色 */
        .transfer-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        /* 选中第二个圆圈 */
        .transfer-step:nth-child(2) .transfer-circle {
            background: #1c509c;
            color: white;
        }

        .transfer-label {
            font-size: 14px;
            color: #666;
            position: absolute;
            bottom: -40px;
            width: 100px;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
        }

        /* 加载动画 */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.5s;
        }

        .loader::after {
            content: "";
            width: 60px;
            height: 60px;
            border: 6px solid #ff6b6b;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 整体样式 */
.ycp{
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: #fff;
	padding: 70px 0 30px 0;
            line-height: 1.6;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .container5 {
            max-width: 1200px;
            margin: 70px auto;
            padding: 2rem;
            background: rgba(0,0,0,0.7);
            border-radius: 20px;
   
            backdrop-filter: blur(10px);
        }

        /* 标题区域 */
        .ycp_header {
            text-align: center;
            margin-bottom: 2rem;
            transform: translateY(-20px);
            animation: slideDown 0.8s ease-out forwards;
        }

        .ycp_title {
            font-size: 3rem; color: #fff;
            margin: 1rem 0;
        }

        /* 信息卡片 */
        .info-card {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
            padding: 1.5rem;
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            transition: transform 0.3s;
        }

        .info-card:hover {
            transform: translateY(-5px);
        }


/* 联系我们 */

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scaleIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* 应用动画 */
       .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out forwards;
        }

       .animate-scaleIn {
            animation: scaleIn 0.6s ease-out forwards;
        }

        /* 地图样式 */
        #map {
            height: 400px;
            width: 100%;
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            animation: fadeInUp 0.8s ease-out forwards;
            animation-delay: 0.6s;
            opacity: 0;
        }

        /* 过渡效果 */
        nav a,
        button {
            transition: all 0.3s ease;
        }


/* 添加以下新样式 */
/* 加载动画 */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a2d5c;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s;
}

.circle-loader {
  width: 120px;
  height: 120px;
  border: 5px solid rgba(255,255,255,0.2);
  border-top-color: #6081d4;
  border-radius: 50%;
  animation: spin 1.2s infinite cubic-bezier(0.55, 0.15, 0.45, 0.85);
}

@keyframes spin {
  to { transform: rotate(720deg); }
}

.company-logo {
  position: absolute;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* 增强卡片动画 */
.carousel-item {
  transform-style: preserve-3d;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.carousel-item:hover {
  transform: perspective(1000px) rotateY(10deg) translateZ(30px);

}

/* 3D翻转效果 */
[data-aos="flip-left"] {
  transform: perspective(2500px) rotateY(-100deg);
  opacity: 0;
  backface-visibility: hidden;
  transition-property: transform, opacity;
}

/* 数字动画增强 */
.number1 {
  position: relative;
  display: inline-block;
}

.number1::after {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, #6081d4 0%, transparent 70%);
  opacity: 0;
  animation: numberGlow 1.5s ease-out;
}

@keyframes numberGlow {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.4; }
  100% { opacity: 0; transform: scale(2); }
}

/* 悬停流体效果 */
.sol_card li {
  position: relative;
  overflow: hidden;
}

.sol_card li::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

  transform: rotate(45deg);
  transition: all 0.6s;
}

.sol_card li:hover::before {
  animation: fluid 1.2s;
}

@keyframes fluid {
  0% { transform: rotate(45deg) translate(-50%, -50%); }
  100% { transform: rotate(45deg) translate(50%, 50%); }
}

        .pure-blue-btn {
            position: relative;
            padding: 20px 40px;
            font-size: 1.2rem;
            font-weight: 600;
            color: #fff;
            background: #007bff;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform: translateY(0);
            box-shadow: 0 4px 18px rgba(0, 123, 255, 0.3);
        }

        /* 悬停效果 */
        .pure-blue-btn:hover {
            background: #0056b3;
            transform: translateY(-3px) rotate(1deg);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.5);
        }

        /* 点击效果 */
        .pure-blue-btn:active {
            transform: translateY(2px) scale(0.97);
            box-shadow: 0 3px 12px rgba(0, 123, 255, 0.2);
        }

        /* 光流效果 */
        .pure-blue-btn::before {
            content: '';
            position: absolute;
            top: -150%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 20%,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 80%
            );
            animation: lightFlow 3s linear infinite;
            opacity: 0.4;
        }

        @keyframes lightFlow {
            0% { transform: rotate(15deg) translateX(-100%); }
            100% { transform: rotate(15deg) translateX(100%); }
        }

        /* 悬停时增强光效 */
        .pure-blue-btn:hover::before {
            opacity: 0.6;
            animation-duration: 1.8s;
        }

        /* 点击涟漪效果 */
        .pure-blue-btn::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: radial-gradient(
                circle at center,
                rgba(255, 255, 255, 0.4) 0%,
                transparent 70%
            );
            transform: scale(0);
            transition: transform 0.6s ease-out;
        }

        .pure-blue-btn:active::after {
            transform: scale(3);
            opacity: 0;
        }

        /* 呼吸边框 */
        .pure-blue-btn {
            border: 2px solid rgba(0, 123, 255, 0.3);
            animation: borderBreath 3s ease-in-out infinite;
        }

        @keyframes borderBreath {
            0%, 100% { border-color: rgba(0, 123, 255, 0.3); }
            50% { border-color: rgba(0, 123, 255, 0.8); }
        }



/*鼠标跟随*/
       .cursor-dot1{
            position: fixed;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        .dot1{
            position: absolute;
            border-radius: 50%;
            mix-blend-mode: multiply;
            transition: transform 0.3s;
        }
        .dot-1 {
            width: 40px;
            height: 40px;
            background: rgba(28, 80, 156); /* 浅蓝色 */
            filter: blur(1px);
        }
        .dot-2 {
            width: 20px;
            height: 20px;
            background: rgba(255, 180,0, 0.7); 
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

.circle-loader {
    width: 80px;
    height: 80px;
    border: 5px solid rgba(255,255,255,0.2);
    border-top-color: #6081d4;
    border-radius: 50%;
    animation: spin 1.2s infinite cubic-bezier(0.55, 0.15, 0.45, 0.85);
}

@keyframes spin {
    to { transform: rotate(720deg); }
}

/* 证书动画增强 */
.container1 {
    perspective: 1000px;
}

.certificate {
    opacity: 0;
    transform: translateX(50px) rotateY(20deg);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.certificate:nth-child(even) {
    transform: translateX(-50px) rotateY(-20deg);
}

.certificate.active {
    opacity: 1;
    transform: translateX(0) rotateY(0);
}

.certificate:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(28,80,156,0.2);
}

/* 时间轴美化 */
.event_box {
    position: relative;
    padding: 60px 0;
}

.timeline-bar {
    position: absolute;
    top: 120px;
    left: 50%;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #1c509c 0%, #6081d4 100%);
    transform: translateX(-50%);
    transition: width 1.2s ease-out;
    box-shadow: 0 0 15px rgba(28,80,156,0.3);
}

.parHd ul {
    position: relative;
    z-index: 2;
}

.parHd li {
    transition: all 0.6s ease;
}

.parHd li.act {
    transform: scale(1.2);
    color: #1c509c;
}

.parHd li:after {
    transition: all 0.4s ease;
}

.parHd li.act:after {
    background: #1c509c;
    box-shadow: 0 0 0 6px rgba(28,80,156,0.1);
}

/* 数字动画 */
.number {
    position: relative;
    display: inline-block;
}

.number::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, #6081d4 0%, transparent 70%);
    opacity: 0;
    animation: numberGlow 1.5s ease-out;
}

@keyframes numberGlow {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 0.4; }
    100% { opacity: 0; transform: scale(2); }
}

/*移动端代码*/

@media (max-width: 1024px) {
	body{width: 100%; overflow-x: hidden}
  .menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #000;
    flex-direction: column;
  }
  
  .menu-item {
    width: 100%;
    padding: 15px;
  }
  
  .hamburger {
    display: block;
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
  }
  
  .login {
    float: right
  }
	.logo{width:25%;height: 28px;margin-top:20px;float: left}

}
img {
  max-width: 100%;
  height: auto;
}
.carousel-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.carousel-item {
  flex: 1 1 300px;
  max-width: 400px;
}

@media (max-width: 768px) {
  .stats-overlay {
    flex-direction: column;
    left: 0;
    top: 15%;
  }
	body{width: 100%; overflow-x: hidden}
	.slider-container{display: none}
	.title-section{display: none}
	.animate-card.active{display: none}
	 .sol_card {
    width:30%;
    margin: 20px 5%; float: none
  }
  
	.number {font-size:2rem}
 .us_pic span{display: block; background:#d7e7ff; border-radius:50%;position: absolute; left: -60px; top: -20px;}
.us_pic span img{margin: 20px 40px;}
.us_pic span:hover{background:#b7cdee}
.us_pic i{position: absolute; font-size:1.2em; color:#1c509c; font-weight: bolder; top:30px; right: -120px;  display: block}
.us_pic em{position: absolute; color:#1c509c; font-size:0.6em; line-height: 1.2em; text-align: center; height: 70px; display: block; margin-top:-7px}
 
  .stat-card {
    padding: 15px;
    margin: 10px 0;
  }
  
  .us_txt, .us_pic {
    width: 100%;
    margin: 20px 0;
  }

  .luxury-carousel {
    width: 100%;
    height: auto;
  }
h3.gradient-slide {
  font-size: 2.5rem;
}
	.container{margin: 0}
@media (max-width: 768px) {
  h3.gradient-slide {
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 40px 0;
  }
  
  .aigc h2 {
    font-size: 3rem;
  }
}
h3.gradient-slide {
  font-size: 2.5rem;
}

@media (max-width: 768px) {
  h3.gradient-slide {
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 40px 0;
  }
  
  .aigc h2 {
    font-size: 3rem;
  }
}
h3.gradient-slide {
  font-size: 2.5rem;
}

@media (max-width: 768px) {
  h3.gradient-slide {
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 40px 0;
  }
  
  .aigc h2 {
    font-size: 3rem;
  }
}
h3.gradient-slide {
  font-size: 2.5rem;
}

@media (max-width: 768px) {
  h3.gradient-slide {
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 40px 0;
  }
  
  .aigc h2 {
    font-size: 3rem;
  }
}
.search-container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

@media (max-width: 480px) {
  .search-input {
    width: 100%;
  }
  
  .login span a {
    width: auto;
    padding: 0 15px;
  }
}
@media (max-width: 480px) {
  .cursor-dot1 {
    display: none;
  }
  
  .stats-overlay .plus-symbol {
    display: none;
  }
}
	/* 汉堡菜单图标 */
.hamburger {
  display: none;
  position: absolute;
  right: 20px;
  top: 25px;
  z-index: 1000;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background: #fff;
  transition: all 0.3s;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(6px);
}

.menu.active {
  display: flex !important;
}