﻿
 /* Hero首屏 */
        .hero {
            margin-top: 130px;
            padding: 0px 0;
            background:#F4F1EA;
            color: #000;
            text-align: left;
        }
		 .hero video{width:100%}
		.hero .container{display: flex;align-items: center; gap: 150px;}
		.hero .left{ max-width: 700px;}
		.hero .right{max-width:560px;}
		.hero .right video{width:100%;height:560px;background:#FFF;}
        .hero h1 {
            font-size: 50px;    line-height: 70px;
            margin-bottom: 16px;
            max-width: 500px;
        }
        .hero p {
            font-size: 24px;
            max-width: 550px;
            margin-bottom: 30px;
        }
        .hero a {
            display: inline-block;
            padding: 12px 28px;
            background: #ffae66;
            color: #000;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 500;
            transition: opacity .2s;
        }
        .hero a:hover {
         background: #ffcfa4;
        }



  /*轮播容器，可修改宽高*/
        .banner-wrap {
            width: 100%;
            height: 350px;
            max-width: 1920px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .banner-list {
            width: 100%;
            height: 100%;
            display: flex;
            transition: transform 0.6s ease;
        }
        .banner-item {
            flex: 0 0 100%;
            height: 100%;
        }
        .banner-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /*左右切换按钮*/
        .prev-btn,.next-btn {
           
        }
        .prev-btn {left:20px;}
        .next-btn {right:20px;}
        /*圆点指示器*/
        .dot-box {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap:10px;
            z-index:10;display:none;
        }
        .dot {
            width:12px;
            height:12px;
            border-radius:50%;
            background:rgba(255,255,255,0.4);
            cursor:pointer;
        }
        .dot.active {
            background:#ffffff;
        }







        /* 动物照明分类板块 */
        .animal-light {
            padding: 50px 0;background:#F4F1EA;
        }
        .sec-title {
            font-size: 34px;text-align:center;
            margin-bottom: 12px;
        }
        .sec-desc {
            font-size: 18px;text-align:center;
            color: var(--gray);
            margin-bottom: 50px;
           
        }
        .animal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        .animal-card {
            background: var(--white);
            padding: 18px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform .3s;
        }
        .animal-card:hover {
            transform: translateY(-6px);
        }
        .animal-card h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }
        .animal-card p {
            color: var(--gray);
        }
		.animal-card p img{max-width:100%;width: 100%;}


.animal-light .more{border: 2px solid #ffae66;padding:10px;width:240px;background:#FFF;text-align:center; margin:30px auto;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}




        /* 数据统计板块 */
        .data-block {
            background:url(../images/data-block.jpg) no-repeat center;background-attachment: fixed;
            color: #fff;
            padding: 70px 0;
        }
        .data-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            text-align: center;
        }
        .data-num {
            font-size: 60px;  
            font-weight: 700;
            line-height: 1;display:inline;
        }
		 .data-sz i.i1{background:url(../images/num1.png) no-repeat;width:38px;height:40px;display:inline-block}
		.data-sz i.i2{background:url(../images/num2.png) no-repeat;width:38px;height:40px;display:inline-block}
		.data-sz i.i3{background:url(../images/num3.png) no-repeat;width:38px;height:40px;display:inline-block}
		
        .data-text {
            font-size: 18px;
            margin-top: 10px;
            opacity: 0.85;
        }

        /* 客户Logo滚动 */
        .client-wrap {
            padding: 60px 0;
            overflow: hidden;
        }
        .client-scroll {
            display: flex;
            gap: 30px;
            animation: scroll 25s linear infinite;
            width: max-content;
        }
		.client-scroll:hover{animation-play-state: paused;}
        .client-item {
            font-size: 20px;
            font-weight: 600;
            color: var(--gray);
            white-space: nowrap;
        }
		.client-item  img{height:240px}
		.client-item  p{width:100%;text-align:center;font-size:16px;}
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }



  .testimonial-wrap {
            width: 100%;padding:80px 0;
            margin: 0 auto;
        }
		 .testimonial-wrap .container{}
        /* 顶部评价容器 */
        .testimonial-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 60px;
            margin-bottom: 50px;
        }
        .quote-text-area {
            flex: 1;
            max-width: 520px;
        }
        .quote-content {
            font-size:32px;
            line-height: 1.4;
            color: #000;
            margin-bottom: 24px;
        }
        .author-name {
            font-size:20px;
             color: #000;
            margin-bottom: 30px;
        }
        .read-full-btn {
            padding: 12px 28px;
            border: 1px solid #99c2d8;
            background: #fff;
            font-size: clamp(14px, 1.5vw, 18px);
            cursor: pointer;
            border-radius: 2px;
            transition: background 0.2s;
        }
        .read-full-btn:hover {
            background-color: #f0f7fc;
        }
        .avatar-block {
            position: relative;
            flex-shrink: 0;
        }
        .avatar-circle {
          
            object-fit: cover;
            display: block;
        }
        .cow-icon-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            width: clamp(70px, 8vw, 110px);
            height: clamp(70px, 8vw, 110px);
            background-color: #24b886;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cow-icon-badge svg {
            width: 55%;
            fill: #fff;
        }
        /* 底部案例导航栏 */
        .case-tabs {
            display: flex;
            gap: 20px;
        }
        .case-tab-item {
           
            align-items: center;
            
            padding: 12px 20px;
            background: #f7f7f7;
           
            cursor: pointer;
            transition: background 0.2s;
            flex: 1;
        }
        .case-tab-item:hover {
            background: #eef5f2;
        }
        .tab-icon-circle {
           
           
          
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .tab-icon-circle img {
            width: auto; 
            height:230px;
            fill: #fff;
        }
        .tab-text {
            font-size: clamp(14px, 1.4vw, 18px);
            color: #111;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .arrow-right {
            margin-left: 8px;
            font-size: clamp(16px, 1.6vw, 20px);
            color: #111;
            flex-shrink: 0;
        }

        /* 移动端适配：768px以下切换垂直布局 */
        @media screen and (max-width: 768px) {
           
            .testimonial-top {
                flex-direction: column-reverse;
                align-items: center;
                text-align: center;
                gap: 35px;
            }
            .quote-text-area {
                max-width: 100%;
                width: 100%;
            }
            .case-tabs {
                flex-direction: column;
                gap: 15px;
            }
            .read-full-btn {
                width: 100%;
            }
			.client-scroll{gap: 20px;}
			.client-item  img{height:130px}
			
        }



        /* 通用按钮样式 */
        .btn-light {
            padding: 12px 20px;
            background: #ffae66;
            border: none;font-weight:bold;
            border-radius: 2px;
            font-size: 16px;
            cursor: pointer;
            color: #000;
            margin-top: 16px;
        }
        .btn-light:hover {
            background: #ffcfa4;
        }
        /* Join the family */
        .block-partner {
            background: #f5eae1;
          -webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
          
           overflow:hidden;
            margin-bottom: 48px;
            align-items: center;
        }
		.block-partner .container{ padding:0;display: flex;}
        .partner-img-wrap {width:55%;
          
        }
        .partner-img {
            max-width: 100%;
            display: block;
            
        }
		.partner-text{width:40%;margin-left:5%;margin-top:50px;}
        .partner-text h4 {
            font-size:16px;
            font-weight: normal;
            color: #333;
            margin-bottom: 8px;margin-top:80px;
        }
        .partner-text h2 {
            font-size: 48px;
            margin-bottom: 12px;
        }
        .partner-text p {
            font-size: 18px;
            line-height: 1.5;
            color: #333; margin-bottom: 42px;
            max-width: 420px;
        }

       

        /*  Contact Chat */
        .block-contact {
            background: #f5eae1;
          
           padding:50px 0;
            
        }
			.block-contact img{max-width:100%}
		 .block-contact .container{  display: flex;
            gap: 80px;align-items: center;}
		
		
        .contact-avatar-wrap {
            flex: 0 0 300px;
            position: relative;
        }
        .avatar-bg-circle {
            width: 400px;
            height: 400px;
            background: #ffae66;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }
        .avatar-bg-circle::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: repeating-conic-gradient(transparent 0deg 15deg, #ffcfa4 15deg 30deg);
            opacity: 0.6;
        }
        .contact-avatar {
            width: 72%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
           
        }
        .contact-text h4 {
            font-size: 16px;
            font-weight: normal;
            color: #333;
            margin-bottom: 8px;
        }
        .contact-text h2 {
            font-size: 48px;
            margin-bottom: 12px;
        }
        .contact-text p {
            font-size: 18px;
            line-height: 1.5;
            color: #444;
            max-width: 620px;margin-bottom:30px;
        }

        /* 移动端适配 768px 以下 */
        @media screen and (max-width: 768px) {
          
          
         
            .partner-text p, .contact-text p, .insights-header p {
                max-width: 100%;
            }
			.hero{margin-top:115px;}
			.hero .container{display: block;}
			.hero .container .left,.hero .container .right{width:100%}
			.hero .right video{height:auto;}
			.hero h1{font-size:30px;line-height: 50px;}
			.hero p{font-size:16px;}
			.data-text{font-size:14px;}
			
			.btn-light{    padding: 12px 15px;}
			
			.banner-wrap{height: 100px;}
			.banner-item img{width: auto;height: 100px;}
			
			
			
			
			
			
        }



      
        @media(max-width:576px) {
            .animal-grid { grid-template-columns: 1fr; }
            .sec-title { font-size: 26px; }
            .data-num { font-size: 42px; }
        }