/* 自定义主题色与样式 */
:root {
    --brand-green: #8bc34a;
    --brand-green-hover: #7cb342;
    --brand-blue: #71b8e4;
    --bg-light-blue: #eef7fc;
    --text-dark:#111a27;
}

@font-face {
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/hind/v18/5aU69_a8oxmIdGh4BCOz.woff2) format('woff2');
    unicode-range: U +0900 -097F, U +1CD0 -1CF9, U +200C -200D, U +20A8, U +20B9, U +20F0, U +25CC, U + A830-A839, U + A8E0-A8FF, U +11B00 -11B09;
}
body {
    font-family: 'Hind', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: var(--text-dark); 
    width:100%;
    overflow-x: hidden;
}

 

.container{
     max-width: 1220px;
}
.Hind{
    font-family: 'Hind'; 
}

.light {
    font-weight: 300;
    /* 细体 */
}

.bold {
    font-weight: 700;
    /* 加粗 */
}
.bg-light-blue {
    background: #C7F1FF
}

/* 通用按钮样式 */
.btn-brand {
    background-color: var(--brand-green);
    color: white;
    border-radius: 3px;
    padding:16px 42px;
    font-weight: 600;
    border: none;
    -webkit-transition: all .3s linear;
    -o-transition: .3s all linear;
    transition: all .3s linear;
    font-size: 16px;
}
.btn-brand:hover {
    background-color: var(--brand-green-hover);
    color: white;
}

.section-padding {
    padding:100px 0;
}

/* 顶部导航栏 */
.navbar {
    padding: 20px 5%;
}
.navbar-brand {
    font-weight: bold;
    color: var(--brand-green) !important;
    font-size: 1.5rem;
}
.navbar-brand img {
    height: 50px;
}

/* Hero 区域 */
.hero-section {
    padding:90px 0px;
    background-color: #fff;
}
.hero-title {
    font-weight: 700;
    font-size: 55px;
    line-height: 1.2;
    margin-bottom: 20px;
    color:rgba(17,26,39,1);
}
.hero-subtitle {
    font-weight: bold;
    font-size: 40px;
    line-height:1.5;
    margin-bottom: 30px;
}
.hero-subtitle-small{
     font-size: 30px;
}
.hero-subtitle span {
    color: var(--brand-green);
    font-weight: bold;
}

.banner-desc{
     font-size: 20px;
     line-height: 32px;
     color:rgba(60,72,84,0.8);
}


.about-img{
     position: relative;
     height: 480px;
     width: 100%;
     background: #D3EFFD;
     border-radius: 0 0 0 40px;
     margin-top: 50px;
}
.about-img-box{
     position: absolute;
     width: 700px;
     height: 480px;
     left:50px;
     top:-50px;
      border-radius: 0 0 0 40px;
      overflow: hidden;
}
.about-img-box img{  
     height: 100%;

}

/* 蓝色横幅特点区 */
.features-bar {
    background: linear-gradient(to top, #64C4EA 0%, #6EDEFF 100%);
    color: white;
    padding: 40px 20px;
    margin: 50px 0;
    border-radius: 15px;
}
.feature-item {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0 20px;
}
.feature-item:last-child {
    border-right: none;
}
.feature-item h5{
     font-size: 1rem;
     font-weight: bold;
     height: 48px;
     line-height: 24px;
}
.feature-item .desc{
    font-size: 13px;
    text-align: left;
}

/* 浅蓝色背景区块 */

.bg-light-section {
    background: linear-gradient(180deg, #D3F4FB 0%, #F4FCFE 100%);
    position: relative;
    border-radius: 150px 0 0 0;
}
.bg-light-section2 {
    background: linear-gradient(180deg, #D3F4FB 0%, #FFF 100%);
    position: relative;
    border-radius: 150px 0 0 0;
}

.bg-light-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.4), transparent 60%);
}

.bg-light-section-right {
    background: linear-gradient(180deg, #D3F4FB 0%, #FFF 80%);
    position: relative;
    border-radius: 0 150px 0 0;
}





/* 产品卡片 & 优势卡片 */
.Big-title{
     font-size: 40px;
}
.Big-title2{
     font-size: 34px;
}
.Our-Products{
     margin-top: 90px;
}

.card-custom {
    border: none;
    transition: transform 0.3s;
    margin-bottom: 10px;
    padding:0;
}
.card-custom:hover {
    transform: translateY(-5px);
}

.card-title{
     font-size: 20px;
     font-weight: bold;
     margin-top: 20px
} 


.bg-ddd{
    background: #ddd;
    border-radius: 15px;
    padding:30px 20px;
    cursor: pointer;
}
.bg-ddd:hover{
    	 background: #C7F1FF
    } 
.bg-ddd .title{
     font-weight: bold;
     font-size: 20px;
     margin:15px 0;
}
.bg-ddd .desc{
     font-size: 14px;
     line-height:28px;
}

/* 步骤流程区域 */
.step-number {
    font-size: 80px;
    color: var(--brand-green);
    font-weight: 300;
    opacity: 0.3;
    line-height: 1;

}
.step-title {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 15px;
    position: relative;
}
.step-title strong{
    position: absolute;
    bottom:0px;
}
.step-subtitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
.step-img {
    border-radius: 0px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.6s;
}
.step-img:hover{
	transform: scale(1.05);
}

.l {
  color: #8BC34A;
  width: 24px;
  height: 24px;
}

.list-unstyled{
     display: flex;
     flex-wrap: wrap;
}

.list-unstyled li{
     width:50%;
     margin-bottom: 20px;
}

.list-unstyled-all li{
     width: 100%
}



.app-list{
	overflow: hidden;
	cursor: pointer;
}
.app-list img{
	transition: all 0.6s;
}
.app-list:hover img{
	 transform: scale(1.1);
}

.App h6{
    margin-top: 20px;
}
.Factory div{
     padding:0;
}
.Factory img{
    width: 100%
}





/* 底部表单区域 */
.Message{
     padding-bottom: 90px;
}

.contact-form-card {
    background-color: #BBE5F5;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.contact-form-card:before{
     content: "";
     position: absolute;
     left:-40px;
     top:50px;
     width:100%;
     height: 100%;
     z-index: -1;
     background: #E2F5FD;
     border-radius: 30px;
}
.form-control {
    border-radius: 8px;
    background-color: #f4f6f8;
    border: 1px solid #e1e5eb;
    padding: 12px 15px;
}

.list-icon {
    width: 40px;
    height: 40px;
    background-color: var(--brand-green);
    color: white; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 30px;
    flex-shrink: 0;
    font-size: 20px;
    line-height: 40px;
}
.list-item-box {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.Message h6{
    font-size: 20px;
    margin-bottom: 20px;
}



table{
        width: 100%!important;
        background: #fff;
    }
.table td, .table th {
    padding:10px 5px 10px 15px; 
}    
td{
        border:1px solid #ddd;
        padding:15px;
        font-size: 14px;
        font-weight: normal;
        line-height: 24px;
        min-width: 200px;
 }
tr td:nth-child(1){
     font-weight: bold;
     text-align: left;
}
 
tr:hover{         
        cursor: pointer;
        background:#D3F6AA 
     }    
.firstRow{
     background: #C7F1FF
}
.firstRow td{
  font-size: 20px; font-weight: bold; padding: 15px
}

.form-group label{
     font-weight: bold;
}









.top-yuding{      
     width: 100%;
    height: auto;
    min-height: 100%;
    background: rgba(0,0,0,0.7);
    position: fixed;
    left: 0%;
    top: 0%;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 999999;
    text-align: left;
    display: none;
    overflow-y: scroll;
}
.yuding-box{
    width:750px;
    height: auto;    
    position: absolute;
    left: 50%;
    top: 50%;
    background: #FFF;
    overflow-y: visible;
    padding:30px 130px; 
    border-radius: 30px;
    border-radius: 50px 0 0 0;
    transform: translate(-50%, -50%); 
}

.yuding-box .title{
   display: block;
   font-size: 34px;
   font-weight: bold;
   max-width: 380px; 
   margin:0 auto;
   margin-bottom: 30px;
   text-align: center;
   width: 100%;
}
.yuding-box .subtitle{
   display: block;
   width:100%;
   margin:0 auto;
   font-size:16px;
   max-width: 380px;
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid #ddd;
}
.yuding-box .form-control{
     height: 50px;
     line-height: 50px;
}
.yuding-box .form-control-text{
     height: 140px;
}


#yudingclose{
   position: absolute;
   right:15px;
   top:15px;
   z-index: 999;
   cursor: pointer;
   color:#00a2e9;
}
 

.input-tc{
  line-height: 50px;
  border-radius:0px;
  padding:0 15px;
  width:100%;
  margin-bottom: 15px;
  border:1px solid #ddd;
  display: block;
}

.input-tc-box{
  line-height:24px;
  border-radius: 0px;
  padding:0 15px;
  width:100%;
  margin-bottom: 15px;
  border:1px solid #ddd;
  display: block;
  color:#888;
}

.input-tc-btn{
  line-height:50px;
  border-radius: 25px;
  padding:0 15px;
  width:50%; 
  display: block;
  background: #fdd100; 
  border:none;
  color:#fff;

}

.close{
    float: right;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity:1;
    width:44px;
    height:44px; 
    position: absolute;
    right: -20px;
    top:-20px;
    z-index: 3; 
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover{
     opacity: 1;
}
.top-yuding .form-group{
   width:100%;
   margin-bottom: 15px;
   margin-right: 0
}  

.top-yuding .message{
   margin:0;
}
 
.navbar-light .navbar-toggler{
     border:none;
}

.Every-desc{
     font-size: 14px;
}



@media(max-width: 768px){
     .navbar-brand img{
         height: 30px;
     }
     .navbar{
        padding: 10px;
     }
     .navbar-nav{
         display: block; 
     }
     .hero-title{
         font-size: 26px;
     }
     .hero-subtitle,
     .hero-subtitle-small{
        font-size: 20px;
     }
     .banner-desc{
        font-size: 14px;
        line-height: 24px;
     }
     .hero-section {
        padding:30px 0px; 
    }
    .btn-brand { 
        padding: 10px 22px; 
        font-size: 14px;
    }

    .about-img{
        height: 300px;
    }
    .about-img-box{
         height: 300px;
         left: 30px;
        top: -30px;
    }
    .feature-item{
          padding: 15px;
          border-bottom: 1px solid #f1f1f1;
    }      
    .feature-item h5{
         height:24px;
         font-size: 14px;
         line-height: 30px;
         margin-bottom: 15px;
         overflow: hidden;
    }
    .feature-item .desc{
         font-size: 12px;
    }

    .Big-title,
    .Big-title2{
      font-size: 26px;
       color:#000;
    }
    .Big-title2{
         margin-top: 25px;
    }

    .bg-light-section{
             border-radius: 50px 0 0 0;
    }
    .Our-Products{
         margin-top: 50px;
    } 
    .section-padding {
       padding:50px 0;
    }
    .card-custom{
         padding:0!important;
    }
    .col-6{        
         padding-right:5px;
        padding-left:5px;
    }
    .card-body{
        padding:15px 0;
    }
    .card-title{
         font-size: 14px;
         margin-top: 0px;
    }

    .bg-ddd{
        padding:15px!important;
    } 

    .bg-ddd .desc{ 
         line-height: 24px;
         font-size: 12px;
    }

    .step-title{
         font-size: 24px;
    }

    .App h6{
        margin-top: 10px;
        font-size: 14px;
    }

    .Every-desc{
         font-size: 13px;
         color:#666;
    }
    .list-unstyled li{
        width: 100%;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .Message .Big-title{
         margin-top: 30px;
    }

    .yuding-box{
         width:94%;
         left:3%;
         top:3%;
         transform: translate(0%, 0%);
         padding:15px;
    }
    .close{
        top:5px;
        right:5px;
    }
    .yuding-box .title{
         font-size: 24px;
         margin-bottom: 10px;
    }
    .yuding-box .subtitle{
         font-size: 12px;
    }
    .yuding-box .form-control-text{
         height: 100px
    }


}