/* 基础样式 */
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Helvetica Neue', Arial, sans-serif;
 }
 
 body {
 background-color: #f8f9fa;
 color: #333;
 line-height: 1.6;
 overflow-x: hidden;
 }
 
 .container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 }
 
 /* 导航栏样式 */
 header {
 background-color: #fff;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 position: fixed;
 width: 100%;
 z-index: 1000;
 transition: all 0.3s ease;
 }
 
 header.scrolled {
 padding: 10px 0;
 background-color: rgba(255, 255, 255, 0.95);
 }
 
 .nav-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 20px 0;
 }
 
 .logo {
 font-size: 24px;
 font-weight: bold;
 color: #1e88e5;
 text-decoration: none;
 display: flex;
 align-items: center;
 }
 
 .logo i {
 margin-right: 10px;
 }
 
 .nav-links {
 display: flex;
 }
 
 .nav-links a {
 color: #555;
 text-decoration: none;
 margin-left: 30px;
 font-weight: 500;
 transition: color 0.3s ease;
 }
 
 .nav-links a:hover {
 color: #1e88e5;
 }
 
 .mobile-menu-btn {
 display: none;
 cursor: pointer;
 font-size: 24px;
 }
 
 /* 区域样式 */
 .hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/packs/template/zhisu/images/1.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
    position: relative;
 }
 
 .hero::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url('/packs/template/zhisu/images/1.jpg') center/cover no-repeat;
 opacity: 0.2;
 }
 
 .hero-content {
 position: relative;
 z-index: 1;
 max-width: 800px;
 margin: 0 auto;
 }
 
 .hero h1 {
 font-size: 48px;
 margin-bottom: 20px;
 animation: fadeInUp 1s ease;
 }
 
 .hero p {
 font-size: 18px;
 margin-bottom: 30px;
 animation: fadeInUp 1s ease 0.2s;
 animation-fill-mode: both;
 }
 
 .cta-btn {
 display: inline-block;
 background-color: white;
 color: #1e88e5;
 padding: 12px 30px;
 border-radius: 30px;
 text-decoration: none;
 font-weight: bold;
 transition: all 0.3s ease;
 animation: fadeInUp 1s ease 0.4s;
 animation-fill-mode: both;
 }
 
 .cta-btn:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 /* 功能展示部分 */
 .features {
 padding: 100px 0;
 background-color: white;
 }
 
 .section-title {
 text-align: center;
 margin-bottom: 60px;
 }
 
 .section-title h2 {
 font-size: 36px;
 color: #1e88e5;
 margin-bottom: 15px;
 }
 
 .section-title p {
 color: #777;
 max-width: 600px;
 margin: 0 auto;
 }
 
 .features-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 30px;
 }
 
 .feature-card {
 background-color: #f8f9fa;
 border-radius: 10px;
 padding: 30px;
 text-align: center;
 transition: all 0.3s ease;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
 .feature-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }
 
 .feature-icon {
 font-size: 48px;
 color: #1e88e5;
 margin-bottom: 20px;
 }
 
 .feature-card h3 {
 font-size: 22px;
 margin-bottom: 15px;
 }
 
 .feature-card p {
 color: #666;
 }
 
 /* 价格方案部分 */
 .pricing {
 padding: 100px 0;
 background-color: #f8f9fa;
 }
 
 .pricing-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 30px;
 margin-top: 50px;
 }
 
 .pricing-card {
 background-color: white;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 transition: all 0.3s ease;
 }
 
 .pricing-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }
 
 .pricing-header {
 background-color: #1e88e5;
 color: white;
 padding: 30px 20px;
 text-align: center;
 }
 
 .pricing-card.popular .pricing-header {
 background-color: #ff9800;
 }
 
 .pricing-title {
 font-size: 24px;
 margin-bottom: 10px;
 }
 
 .pricing-price {
 font-size: 36px;
 font-weight: bold;
 margin-bottom: 0;
 }
 
 .pricing-period {
 font-size: 14px;
 opacity: 0.8;
 }
 
 .pricing-body {
 padding: 30px 20px;
 }
 
 .pricing-features {
 list-style: none;
 margin-bottom: 30px;
 }
 
 .pricing-features li {
 padding: 10px 0;
 border-bottom: 1px solid #eee;
 display: flex;
 align-items: center;
 }
 
 .pricing-features li i {
 color: #1e88e5;
 margin-right: 10px;
 }
 
 .pricing-features li.popular-i {
 color: #ff9800;
 }
 
 .pricing-btn {
 display: block;
 width: 100%;
 background-color: #1e88e5;
 color: white;
 text-align: center;
 padding: 12px;
 border-radius: 5px;
 text-decoration: none;
 font-weight: bold;
 transition: all 0.3s ease;
 }
 
 .pricing-card.popular .pricing-btn {
 background-color: #ff9800;
 }
 
 .pricing-btn:hover {
 background-color: #1565c0;
 }
 
 .pricing-card.popular .pricing-btn:hover {
 background-color: #f57c00;
 }
 
 .popular-badge {
 position: absolute;
 top: 0;
 right: 0;
 background-color: #ff9800;
 color: white;
 padding: 5px 15px;
 font-size: 12px;
 font-weight: bold;
 }
 
 /* 用户评价部分 */
 .testimonials {
 padding: 100px 0;
 background-color: white;
 }
 
 .testimonials-slider {
 position: relative;
 max-width: 800px;
 margin: 0 auto;
 overflow: hidden;
 }
 
 .testimonial-slide {
 display: none;
 padding: 30px;
 background-color: #f8f9fa;
 border-radius: 10px;
 text-align: center;
 animation: fadeIn 0.5s ease;
 }
 
 .testimonial-slide.active {
 display: block;
 }
 
 .testimonial-text {
 font-size: 18px;
 font-style: italic;
 margin-bottom: 20px;
 color: #555;
 }
 
 .testimonial-author {
 display: flex;
 align-items: center;
 justify-content: center;
 }
 
 .author-img {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 margin-right: 15px;
 object-fit: cover;
 }
 
 .author-info h4 {
 font-size: 18px;
 margin-bottom: 5px;
 }
 
 .author-info p {
 color: #777;
 }
 
 .slider-controls {
 display: flex;
 justify-content: center;
 margin-top: 30px;
 }
 
 .slider-dot {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #ddd;
 margin: 0 5px;
 cursor: pointer;
 transition: all 0.3s ease;
 }
 
 .slider-dot.active {
 background-color: #1e88e5;
 }
 
 /* 联系我们部分 */
 .contact {
 padding: 100px 0;
 background-color: #f8f9fa;
 }
 
 .contact-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 50px;
 }
 
 .contact-info h3 {
 font-size: 24px;
 margin-bottom: 20px;
 color: #1e88e5;
 }
 
 .contact-info p {
 margin-bottom: 20px;
 color: #555;
 }
 
 .contact-details {
 list-style: none;
 }
 
 .contact-details li {
 display: flex;
 align-items: center;
 margin-bottom: 15px;
 }
 
 .contact-details i {
 color: #1e88e5;
 margin-right: 10px;
 font-size: 18px;
 }
 
 .contact-form {
 background-color: white;
 padding: 30px;
 border-radius: 10px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
 .form-group {
 margin-bottom: 20px;
 }
 
 .form-group label {
 display: block;
 margin-bottom: 8px;
 font-weight: 500;
 }
 
 .form-control {
 width: 100%;
 padding: 12px 15px;
 border: 1px solid #ddd;
 border-radius: 5px;
 font-size: 16px;
 transition: all 0.3s ease;
 }
 
 .form-control:focus {
 border-color: #1e88e5;
 outline: none;
 box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
 }
 
 textarea.form-control {
 min-height: 120px;
 resize: vertical;
 }
 
 .submit-btn {
 background-color: #1e88e5;
 color: white;
 border: none;
 padding: 12px 30px;
 border-radius: 5px;
 font-size: 16px;
 font-weight: bold;
 cursor: pointer;
 transition: all 0.3s ease;
 }
 
 .submit-btn:hover {
 background-color: #1565c0;
 }
 
 /* 页脚样式 */
 footer {
 background-color: #1e1e1e;
 color: white;
 padding: 60px 0 30px;
 }
 
 .footer-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 30px;
 margin-bottom: 40px;
 }
 
 .footer-column h4 {
 font-size: 18px;
 margin-bottom: 20px;
 position: relative;
 padding-bottom: 10px;
 }
 
 .footer-column h4::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 40px;
 height: 2px;
 background-color: #1e88e5;
 }
 
 .footer-links {
 list-style: none;
 }
 
 .footer-links li {
 margin-bottom: 10px;
 }
 
 .footer-links a {
 color: #aaa;
 text-decoration: none;
 transition: all 0.3s ease;
 }
 
 .footer-links a:hover {
 color: #1e88e5;
 }
 
 .social-links {
 display: flex;
 margin-top: 20px;
 }
 
 .social-links a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background-color: #333;
 color: white;
 margin-right: 10px;
 transition: all 0.3s ease;
 }
 
 .social-links a:hover {
 background-color: #1e88e5;
 transform: translateY(-3px);
 }
 
 .footer-bottom {
 text-align: center;
 padding-top: 30px;
 border-top: 1px solid #333;
 }
 
 .footer-bottom p {
 color: #777;
 font-size: 14px;
 }
 
 /* 通知样式 */
 .notification {
 position: fixed;
 bottom: 20px;
 right: 20px;
 background-color: white;
 color: #333;
 padding: 15px 20px;
 border-radius: 5px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 transform: translateY(100px);
 opacity: 0;
 transition: all 0.3s ease;
 z-index: 1000;
 max-width: 300px;
 }
 
 .notification.show {
 transform: translateY(0);
 opacity: 1;
 }
 
 /* 动画 */
 @keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 
 @keyframes fadeIn {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
 }
 
 /* 响应式设计 */
 @media (max-width: 768px) {
 .nav-links {
 display: none;
 }
 
 .mobile-menu-btn {
 display: block;
 }
 
 .hero h1 {
 font-size: 36px;
 }
 
 .features-grid,
 .pricing-grid {
 grid-template-columns: 1fr;
 }
 
 .testimonials-slider {
 max-width: 100%;
 }
 }
         .btn {
            display: inline-block;
            background-color: #3498db;
            color: #fff;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
 
  .btn:hover {
            background-color: #2980b9;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 2px solid #fff;
            margin-left: 15px;
        }
        
        .btn-outline:hover {
            background-color: #fff;
            color: #2c3e50;
        }

@font-face {
  font-family: 'zsxt-icon';  /* Project id 4987140 */
        src: url('//at.alicdn.com/t/c/font_4987140_ccnftbdwa4r.woff2?t=1755102865212') format('woff2'),
       url('//at.alicdn.com/t/c/font_4987140_ccnftbdwa4r.woff?t=1755102865212') format('woff'),
       url('//at.alicdn.com/t/c/font_4987140_ccnftbdwa4r.ttf?t=1755102865212') format('truetype'),
       url('//at.alicdn.com/t/c/font_4987140_ccnftbdwa4r.svg?t=1755102865212#iconfont') format('svg');
}

.zsxt-icon{font-family:zsxt-icon!important;font-size: 16px;color: #1e88e5;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.zsxto {font-size: 48px;}