@import url('css2.css');

/*theme css*/
a {
    color:#17161a;
    transition: .5s;
}
a:hover {
    text-decoration: none;
    color: #274782;
}
body {
    color: #4c5b76;
    font-family: 'Times New Roman', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
}
 p {
     font-style: normal;
    font-family: 'Times New Roman', sans-serif;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: 'Times New Roman', sans-serif;
    font-style: normal;
    line-height: 1.2;
    font-weight: 700;
    transition: .2s;
    color: #000000;
    }

.witr_section_title_inner h1,.witr_section_title_inner h3 {
    font-size: 30px;
    margin: auto;
    margin-bottom: 5px;

}

.witr_section_title_inner h2 {
    font-size: clamp(24px, 1.2vw + 18px, 26px) !important;
    color: rgba(0,0,0,.7);
    width: 100%;
    margin-bottom:0px;
    margin: 0 0 1em;
    line-height: 2.3;
   text-align: justify;              /* 关键：两端对齐 */
  text-justify: inter-ideograph; /* 现代浏览器对中文更友好 */
   text-indent: 2em;                 /* 可选：首行缩进 */
  overflow-wrap: anywhere;      /* 可选：必要时换行，避免溢出 */
  hyphens: auto; 
  
 }


@media (max-width: 768px){
  .witr_section_title_inner h2{ font-size: clamp(16px, 3.5vw, 22px); }
}
@media (min-width: 1400px){
  .witr_section_title_inner h2{ font-size: 24px; } /* 大屏封顶 */
}


.witr_section_title_inner h3 {
    margin: 0 0 26px 0;


}
.witr_section_title_inner h1 span, .witr_section_title_inner h2 span, .witr_section_title_inner h3 span, .witr_section_title_inner p span, .witr_section_title_inner p span a {
    color: #274782;
}
.witr_section_title {
    position: relative;
}
@keyframes move_title_bg1{from{left:0}to{left:100%}}
@keyframes move_title_bg2{from{right:0}to{right:100%}}
.witr_section_title {
    margin-bottom: 50px;
}
.witr_section_title_inner p {
    width: 100%;
    padding: 0 0 0 0;
    margin-top: 10px;
    color: #ffffff;
}
.witr_section_title_inner.text-center p {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}


/* ===== 7. Service Area CSS ===== */
.tc_ser_area {
    padding: 95px 0 70px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px; 
    margin-left: -15px; 
    align-items: stretch; 
}
row.custom-col-lg-20 {
    flex: 0 0 20%; 
    max-width: 20%;
    padding: 5px; 
    box-sizing: border-box; 
}

.service-item {
     flex: 1; 
    flex-basis: 100%; 
    padding:10px 10px 10px 10px;
    margin-bottom: 20px;
    box-shadow: 0px 12px 49px 0px rgba(39, 71, 130, 0.1);
    position: relative; /* 设置相对定位 */
    overflow: hidden; /* 防止放大后的图片溢出 */
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
   height: 340px;
    /*background: rgba(255, 255, 255, 0.3);  设置背景颜色为半透明白色 */
}
.service-item img {
    width:30%; /* 图片宽度设置为100%，使其充满容器 */
    height: auto; /* 高度自动，保持图片比例 */
    transition: transform 0.3s ease; /* 平滑过渡效果 */
    display: block; /* 防止图片底部有间隙 */
    margin:0 auto;
    background-color: rgba(255, 255, 255, 0);
    
}
.service-item:hover img {
    transform: scale(1.3); /* 鼠标悬停时放大10% */
}
.service-item h3 {
    font-size: 25px;
    color: #000000;
    padding-top: 23px;
}
.service-item p {
    padding-right: 2px;
    padding-top: 2px;
    font-size: 18px;
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
    color: #000000;  
}
.service-item p:hover {
    color: #27738A; /* 例如，将颜色改为红色 */
}

.service-item a {
   font-size: 20px;
   padding: 10px 20px; /* 增加内边距，使按钮看起来更大 */
   color: white; /* 字体颜色 */
    background-color: #27738A; /* 背景颜色 */
    border: none; /* 移除默认边框 */
    border-radius: 5px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    text-decoration: none; /* 移除下划线 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加背景色和颜色过渡效果 */
}
.service-item a:hover {
    background-color: #000640; /* 悬停时的背景颜色 */
    color: #fff; /* 悬停时的字体颜色 */
}
.service-item:hover{
    background-image: url("../image/");
    background-position: top left;
    background-size: cover;
    box-shadow: 0px 12px 49px 0px rgba(39, 71, 130, 0.1);
    
}
.service-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #27738A; /* 绿色边框 */
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none; /* 防止边框影响点击事件 */
}
.service-item:hover::after {
    opacity: 1; /* 鼠标悬停时显示边框 */
}

@media (min-width: 992px) { /* 大型屏幕的最小宽度 */
    .custom-col-lg-20 {
        flex: 0 0 20%; /* 设置五个元素，设置宽度为20% */
        max-width: 20%; /* 最大宽度为20% */
    }
}

.service-item1 {
     flex: 1; 
    flex-basis: 100%; 
    padding:10px 10px 10px 10px;
    margin-bottom: 20px;
    box-shadow: 0px 12px 49px 0px rgba(39, 71, 130, 0.1);
    position: relative; /* 设置相对定位 */
    overflow: hidden; /* 防止放大后的图片溢出 */
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
   height: 400px;
}
.service-item1 img {
    width:42%; /* 图片宽度设置为100%，使其充满容器 */
    height: auto; /* 高度自动，保持图片比例 */
    transition: transform 0.3s ease; /* 平滑过渡效果 */
    display: block; /* 防止图片底部有间隙 */
    margin:0 auto;
    background-color: rgba(255, 255, 255, 0);
    
}
.service-item1:hover img {
    transform: scale(1.3); /* 鼠标悬停时放大10% */
}
.service-item1 h3 {
    font-size: 25px;
    color: #000000;
    padding-top: 23px;
}
.service-item1 p {
    padding-right: 2px;
    padding-top: 2px;
    font-size: 18px;
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
    color: #000000;  
}
.service-item1 p:hover {
    color: #27738A; /* 例如，将颜色改为红色 */
}

.service-item1 a {
   font-size: 20px;
   padding: 10px 20px; /* 增加内边距，使按钮看起来更大 */
   color: white; /* 字体颜色 */
    background-color: #27738A; /* 背景颜色 */
    border: none; /* 移除默认边框 */
    border-radius: 5px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    text-decoration: none; /* 移除下划线 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加背景色和颜色过渡效果 */
}
.service-item1 a:hover {
    background-color: #000640; /* 悬停时的背景颜色 */
    color: #fff; /* 悬停时的字体颜色 */
}
.service-item1:hover{
    background-image: url("../image/");
    background-position: top left;
    background-size: cover;
    box-shadow: 0px 12px 49px 0px rgba(39, 71, 130, 0.1);
    
}
.service-item1::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #27738A; /* 绿色边框 */
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none; /* 防止边框影响点击事件 */
}
.service-item1:hover::after {
    opacity: 1; /* 鼠标悬停时显示边框 */
}


/* ===== 8. Safe Area CSS ===== */


.tc_saf_area {
    background: rgba(255, 255, 255, 0);
    padding: 0 0 0 0;
}
.sub-item.all_feature_color.text-center {
    padding: 10px 25px 30px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; /* 平滑过渡效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border: 2px solid transparent; /* 默认不显示边框 */
    position: relative; /* 为子元素定位做准备 */
    width: 100%; /* 确保宽度一致 */
    height: 180px; /* 假设你希望所有容器都有固定的高度，根据需要调整 */
}
.tc_saf_area .all_feature_color h3{
    font-size: 25px;
    margin: 30px 0 15px 0;
    color: #000000;
    transition: color 0.3s ease; /* 字体颜色过渡效果 */
    
}
.tc_saf_area .witr_btn {
    margin-top: 20px;
}

.hover-effect {
    transition: transform 0.3s ease, filter 0.3s ease; /* 平滑过渡效果 */
   
 }
.hover-effect:hover {
    transform: scale(1.2); /* 图片放大1.2倍 */
    
}
.sub-item.all_feature_color.text-center:hover {
    transform: translateY(-10px); /* 向上移动10px */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 添加阴影效果 */
    border: 2px solid #27738A; /* 绿色边框 */
}
.sub-item.all_feature_color.text-center:hover h3 {
    color: #000640; /* 例如，将颜色改为红色 */
}