/* 统计数据部分 */
      .stats-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: #69bcbf; 
        padding: 20px;
        color: white;
        text-align: center;
    }
    .stat-item {
        flex: 1;
        max-width: 250px;
        min-width: 120px;
        margin: 10px;
    }
    .stat-number {
        font-size: 48px;
        font-weight: bold;
    }
    .stat-unit {
        font-size: 16px;
        font-weight: normal;
    }
    .stat-description {
        font-size: 14px;
        margin-top: 5px;
        opacity: 0.8;
    }

      /* 图片区域 */
      .image-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

    .image-container img {
        width: 49.5%;
    }

    
    .container1 {
        max-width: 1400px;
        margin: 50px auto;
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }
    .box {
        width: 24%;
        height: 350px;
        position: relative;
        overflow: hidden;
        border-radius: 30px;
        transition: transform 0.3s ease-in-out;
        flex-wrap: wrap;
    }
    .box:hover .bg {
        transform: scale(1.1);
    }
    .bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 0.3s ease-in-out;
    }

    .about-title h2, .contact-title  h2 {
        text-align: center;
        margin-bottom: 30px;
        font-size: 80px;
        color: #13bfbf;
        font-weight: bold;
    }
	
	.about-title h3 {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        color: #fff;
		margin-left:15px;
		font-weight: bold;
         
    }

    .content1 p {
        opacity: 0;
		margin-left:15px;
        transform: translateY(10px);
		line-height:1.2;
		
		font-size:14px;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    
    .box:hover .content1 p {
        opacity: 1;
        transform: translateY(0);
    }

    .content1 {
        position: absolute;
        top: 150px; /* 调整这个值向上移动 */
        
        color: white;
        text-align: left;
        z-index: 2;
        transition: bottom 0.3s ease-in-out;
    }
    
    .box:hover .content1 {
        bottom: 60px; /* 可在悬停时进一步上移 */
    }
    /* .introduce {
        width: 100%;
        height: 1000px;
        background-image: url('../images/about/pic5.png');
        background-size: cover;
        background-position: center;
    } */

    .introduce {
        width: 100%;
        height: 1000px;
        background-image: url('../images/about/pic5.png');
        background-size: cover;
        background-position: center;
		margin-top:20px;
		padding-top:50px;
    }
    .introduceTitle{
        padding-top: 45px;
        width: 100%;
        height:100px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 48px;
        color: white;
        font-weight: bold;
    }
    .introduceTitle1{
        padding-top: 45px;
        width: 100%;
        height:100px;
        display: flex; 
        align-items: center; 
        justify-content: center;
        font-size: 32px;
        color: white;
    }
    
    
/* 适配平板（两列布局） */
@media (max-width: 1024px) {
    .box {
        width: 48%; /* 让两列等宽 */
    }
}

/* 适配手机（单列布局） */
@media (max-width: 768px) {
    .container1 {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 90%; /* 让内容居中，并避免太窄 */
    }
}

/* PC 端：默认横向排列 */
@media (min-width: 768px) {
    .introduce {
        flex-direction: row;
    }
	
	
	
}

/* 手机端：改为纵向排列 */
@media (max-width: 767px) {
    .introduce {
        flex-direction: column;
    }

    .introduceTitle,
    .introduceTitle1 {
        width: 80%; /* 在小屏幕上增加宽度 */
        font-size: 20px;
    }
	
	h2 {
        text-align: center;
        margin-bottom: 30px;
        font-size: 30px;
        color: #19c4d6;
        font-weight: bold;
    }
	
	
}




/* --- 主容器布局 --- */
.counter-display-section9 .container9 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: nowrap; /* PC端默认左右排列 */
}

/* --- 左侧图片区域 --- */
.about_left9 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about_left9 img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 10px; /* 圆角美化 */
}

/* --- 右侧文本区域 --- */
.about_right9 {
    flex: 1;
    padding: 10px;
    text-align: justify;
}

/* === 手机端适配 (屏幕768px以下) === */
@media (max-width: 768px) {
    .counter-display-section9 .container9 {
        flex-direction: column; /* 手机端上下排列 */
        align-items: center;
        gap: 10px;
    }

    .about_left9,
    .about_right9 {
        width: 90%;
        padding: 5px 0;
    }

    .about_left9 img {
        width: 90%;
        max-width: 100%;
    }

    .about_right9 {
        text-align: left; /* 手机端文字左对齐 */
    }
	
	
}

/* === 宽屏优化 (1200px以上) === */
@media (min-width: 1200px) {
    .counter-display-section9 .container9 {
        max-width: 1200px;
        margin: 0 auto; /* 居中显示 */
    }
    .container1 {
        padding: 0 10%;
      }

    .about_left9 img {
        max-width: 600px;
    }
}

    

/* Contact us */

.contact {margin-top:50px; margin-bottom:100px; font-size:18px;}
.contact  h3 {
        text-align: center;
        margin-bottom: 10px;
        font-size: 42px;
        color: #13bfbf;
		text-align:left;
		font-family:Arial;
		font-weight:bold;
    }
	
.contact  p { line-height:1.5;font-size:21px;}



.contact .tabs {
    display: flex;
    margin-bottom: 20px;
}

.contact .tab {
    padding: 15px 20px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
}

.contact .tab.active {
    background-color: #13bfbf; /* Example active color */
    color: white;
    border-color: #13bfbf;
}

.contact .form-container > div {
    display: block; /* Initially hide all form sections */
}

.contact .form-container > div.active {
    display: block; /* Show the active form section */
}


.contact .form-group {
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.contact .form-group label {
    width: 150px;
    text-align: left;
}

.contact .form-group input[type="text"],
.contact .form-group input[type="email"],
.contact .form-group input[type="tel"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 28px; /* Set the input box height */
}

/* Style for the first three input fields in one row */
.contact .name-phone-email-group {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.contact .name-phone-email-group > div {
    flex-grow: 1;
}

.contact .name-phone-email-group label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

.contact .name-phone-email-group input[type="text"],
.contact .name-phone-email-group input[type="email"],
.contact .name-phone-email-group input[type="tel"] {
    width: calc(100% - 12px); /* Adjust for padding and border */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 58px; /* Set the input box height */
}

/* Style for Company Name and Company Website in one row */
.contact .company-info-group {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.contact .company-info-group > div {
    flex-grow: 1;
}

.contact .company-info-group label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

.contact .company-info-group input[type="text"] {
    width: calc(100% - 12px); /* Adjust for padding and border */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 58px; /* Set the input box height */
}

.contact .application-scenario {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.contact .application-scenario h2 {
    margin-bottom: 10px;
    color: #13bfbf; 
	font-size:36px;
	font-family:arial;
}

.contact .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.contact .radio-group h3 {
    width: 100%;
    margin-top: 30px;
    color: #13bfbf;
    font-size: 24px;
	line-height:1;
}

.contact .radio-group label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact .requirements-description {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.contact .requirements-description label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.contact .requirements-description textarea {
    width: calc(100% - 12px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 18vh; 
	max-width:1000px;
    font-family: sans-serif;
    font-size: 1em;
}

.contact .country-area {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact .country-area label {
    width: 150px;
    text-align: left;
    color: #333;
}

.contact .country-area select {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* height: 30px; Remove fixed height */
}

.contact .privacy-agreement {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact .privacy-agreement label {
    color: #333;
}

.contact .author-button {
    margin-top: 20px;
}

.contact .author-button button {
    background-color: #13bfbf; 
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

/* Style for required fields */
.contact label[for="name"]::after,
.contact label[for="phone"]::after,
.contact .application-scenario h2::after {
    content: "*";
    color: red;
    margin-left: 5px;
}


.contact input {
    width: 20px;
}



.pros {margin:0 0 60px 0; overflow:hidden;}


.protypetitle{  margin-top:60px;  margin-bottom:30px; overflow:hidden;}
.protypetitle h3{text-align:center;font-size:42px;margin-bottom:60px; }

.pros .link {
        border-right: 10px solid #fff;
        color: #fff;
		
		 background-color: #888;
        padding: 10px 48px 10px 18px;
        text-align: center;
        text-decoration: none;
        display: inline-flex; /* 使用 inline-flex 使链接保持 inline-block 的特性 */
        align-items: center; /* 垂直居中对齐 */
        font-size: 18px;font-weight:bold;
        cursor: pointer;
          margin-bottom:30px;
        box-sizing: border-box; /* 包含内边距和边框 */
    }


.pros .link img {height:50px;}

   .pros .link span {
        margin-right: 16px; /* 调整图标和文字之间的间距 */
    }

   .pros .link.active, .pros .link:hover {
        background-color: #13bfbf;
    }


	 

    /* 手机端样式调整 */
    @media (max-width: 600px) {
        .pros.link {
            font-size: 14px;
            padding: 10px 15px;
        }
       .pros .link-container {
            padding: 15px;
            gap: 8px;
            width: 100%; /* 手机端宽度自适应 */
        }
    }
	
	

.integrated {
	background:url(/assets/images/about/integrated.png) no-repeat center center;
	height:1089px; width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	font-family: sans-serif;
	color:#fff;
}

.integrated a{color:#fff;}
.integrated a:hover{color:#13bfbf;}



.top-section {
            display: flex;
            justify-content: space-between;
            width: 900px;
            margin-top:15%;
			 
			
        }
top-left, .top-right {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .icon-layer img {
           height:60px;
        }
		
		.icon-layer:hover img {
           opacity:0.85;
        }
		
		
		.top-left .icon-layer, .top-right .icon-layer {
            /* Style for icon layer */
            margin-bottom: 5px;
        }
		
		

        .top-left .text-layer, .top-right .text-layer {
            /* Style for text layer */
            text-align: center;
        }

        .central-section {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 600px;
        }

        .central-circle {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 30vw;
            height: 30vw;
            border: 2px solid #ccc; /* Placeholder for the circle */
            border-radius: 50%;
            text-align: center;
            position: relative;
			margin-top:-160px;
        }

        .central-circle .text-layer {
            font-weight: bold;
        }

        .one-stop-text {
            margin-top: 0px;
            font-size:1rem;
            line-height: 2;
            padding: 40px 30px 80px 80px;
            text-align: left; /* Align text to the left */
        }

        .one-stop-text ul {
            list-style-type: none; /* Remove default bullet points */
            padding-left: 0; /* Remove default padding */
            margin-bottom: 0; /* Remove default margin */
        }

        .one-stop-text li {
            display: flex;
            align-items: center;
            margin-bottom: 5px; /* Add some spacing between lines */
        }

        

         .small-circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            top: -8px; /* Adjust to position above the main circle */
        }

        .small-circle-right-empty {
            background-color: #0f1a2f; /* Transparent background */
            border: 2px solid #ccc; /* Border for the right circle */
            left: -1.05vw;
			top: 6.35vw;
            transform: translateX(50px); /* Adjust for spacing */
        }
		
		.small-circle-left {
            background-color: #fff; /* Solid color for the left circle */
            left: 7.5vw;
			top: 26vw;
            transform: translateX(-50px); /* Adjust for spacing */
        }

        
		
		.surrounding-section {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .surrounding-section .icon-layer {
            /* Style for icon layer */
            margin-bottom: 5px;
        }

        .surrounding-section .text-layer {
            text-align: center;
            font-size: 0.9em;
        }

        .top-left-section {
            top: -80px;
            left: 50%;
            transform: translateX(-150%);
        }

        .top-right-section {
            top: -80px;
            right: 50%;
            transform: translateX(150%);
        }

        .bottom-left-section {
            bottom: -80px;
            left: 32%;
            transform: translateX(-150%);
        }

        .bottom-right-section {
            bottom: -80px;
            right: 45%;
            transform: translateX(150%);
        }
		
 	
		
		 /* 手机端样式调整 */
    @media (max-width: 1600px) {
        
		.small-circle-right-empty {
            left: -1.5vw;
			top: 6.35vw;
        }
		
		.small-circle-left {
            left: 8vw;
			top: 26vw;
        }
		
		
		.one-stop-text {
            margin-top: 0px;
            font-size:0.85rem;
            line-height: 2;
            padding: 40px 30px 80px 50px;
            text-align: left; /* Align text to the left */
        }
		
		
		
		
    }	
	
	
	 @media (max-width: 1200px) {
		 
		 .one-stop-text {
            margin-top: 0px;
            font-size:0.75rem;
            line-height: 1.2;
            padding: 0px 30px 30px 40px;
            text-align: left; /* Align text to the left */
        }
		
		.small-circle {display:none;}
		
		.central-circle .text-layer {
			font-size: 1rem;
		}

		 
	 }		 


     @media (max-width: 750px) {
		.top-section {
           display: none;
        }
        .surrounding-section{
            display: none;
        }
        .integrated{
            flex-direction: row;
            align-items: center;
        }
        .central-circle{
            width:85vw;
            height:85vw;
            margin-top:0;
        }
        .integrated{
            height:530px;
        }
        .mycert h2{
            font-size: 34px;
        }
        .about-title h2, .contact-title h2{
            font-size: 30px;
        }
        .hero-bg{
            height:250px;
        }
        #videoPlayer{
            width:100%;
            height:250px;
            object-fit: cover;
            margin:0;
            padding:0;

        }
        .content1 p{
            opacity: 1;
        }
     
     }