@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900&display=swap");
ul,li{list-style:none;margin:0;padding:0}
body{margin:0;padding:0;overflow-x: hidden;font-family: "Poppins", sans-serif;}
div,img,h3,h4,p,dd,dl,em{margin: 0; padding: 0; border: 0;}
h1{letter-spacing:0px;margin:0;padding:0}
h2{letter-spacing:0px;font-size:16px;color:#000;background:inherit;margin:0 0 5px;padding:0}
p{margin:0 auto}
a{text-decoration:none;}

.proall{background: url(../images/jjfa.jpg) no-repeat center;width:100%;height: 52vw;margin-top:-7vw;padding-top:0vw;border-top:0px solid #bfd8f3;background-size: cover;}
.pro{width: 88%;padding:19vw 6% 0 6%;overflow: hidden;}
.pro h3{font-size: 3.5vw;font-weight: 600;color: #fff;padding-bottom:0.3vw;}
.pro dd{font-size: 1.1vw;font-weight: bold;color: #fff;line-height: 1.6vw;}

.hint_box_case {margin-left: 6%;color: #fff;
    margin-top: 18%;
  position: relative;
  display: flex;
  align-items: center; }
  .hint_box_case .hint_box {
    width: 13px;
    height: 21px;
    border: 2px solid #fff;
    border-radius: .5rem;
    position: relative;
    margin-right: .5vw;
    font-size: .14rem;
    line-height: 1; }
    .hint_box_case .hint_box span {
      width: 3px;
      height: 5px;
      border-radius: 2px;
      background-color: #fff;
      position: absolute;
      left: 3px;
      top: 2px;
      animation: upd 2s ease infinite; }
@keyframes upd {
  0% {
    transform: none; }
  50% {
    transform: translateY(50%); }
  100% {
    transform: none; } }

.yywz{padding: 260px 10% 0px 10%;width: 80%;}
.yywz h3{color: #333;
    font-size: 1.1vw;
    font-weight: normal;}
.yywz p{margin-bottom: 0.8em;font-weight: 750;
    font-size: 2.5vw;
    color: #222;}

.yingyong{width:94%;padding:8vw 0% 8vw 6%;overflow: hidden;}
.gangyu{background: #f6f6f6;}
.yingyong h2{color:#222;font-size:2.5vw;}
.yingyong dd{color:#333;font-size:1vw;}
.duiying{}
.duiying p{color:#333;font-size:1.4vw;padding:2vw 0 1vw 0;font-weight: bold;}
.duiying p span{    background: #0081e0;
    height: 20px;
    width: 5px;
    display: inline-block;
    margin-right: .5vw;}
.duiying ul{width: 100%;margin-bottom:6vw;}
.duiying ul li{
    float: left;
    margin-right: 1vw;    
    text-align: center;
    border-radius: 10px;}
.duiying ul li a{font-size: .9vw;border: 1px solid #ddd;padding: 1vw 2vw;font-weight:normal;
    color: #333;
    line-height: 3vw;
    border-radius: 10px;}
.duiying ul li a:hover{color:#0081e0;border: 1px solid #0081e0;}
.duiying ul li img{width: 1.5vw;
    position: relative;transition: all .3s ease;
    top: 0.35vw;
    margin-left: 0.5vw;}
.duiying ul li:hover img{transform: scale(1.15);}

.yingyong h3{color:#222;font-size:1.4vw;}
.yingyong h3 span{    background: #0081e0;
    height: 20px;
    width: 5px;
    display: inline-block;
    margin-right: .5vw;}

.tabs-container {
            display: block;
            gap: 15px;
            height: auto;
            margin-top: 1vw;
        }
		
		.tabs-container1 {
            display: flex;
            gap: 15px;
            height: auto;
            margin-top: 1vw;
        }
        
        .tab {float: left;
    margin:0 1% 1% 0;
            background-color:#e6e7ea;
            border-radius: 12px;
            padding:1.6vw 1.8vw;
            box-shadow: 0 4px 5px rgba(0, 0, 0, 0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            flex: 1;
            display:block;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
            min-width: 0;
			
        }
		
		.tab:nth-child(5n) {
    margin:0 0% 1% 0;}
        
        .tab:hover {
            background-color: #b3e0ff;
            flex: 1;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .tab-icon {border-radius: 12px;
            width:13.3vw;
            margin-bottom: 15px;
            color: #3498db;
            transition: transform 0.3s ease;}       
        .tab-icon img{width:100%;border-radius: 12px;}
        .tab:hover .tab-icon {
            transform: scale(1);
        }
		
		.tab-icon1 {border-radius: 12px;
            width:15.3vw;
            margin-bottom: 15px;
            color: #3498db;
            transition: transform 0.3s ease;}       
        .tab-icon1 img{width:100%;border-radius: 12px;}
        .tab:hover .tab-icon1 {
            transform: scale(1);
        }
        
        .tab-title {
            font-size: 1vw !important;
            font-weight: 600;
            margin-bottom: 10px;
            color: #2c3e50;
            transition: margin-bottom 0.4s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .tab-desc {
            color: #34495e;
            line-height: 1.6;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        
        .tab:hover .tab-desc {
            opacity: 1;
            max-height: 100px;
        }
        
        .tab:hover .tab-title {
            margin-bottom: 10px;
        }
        
        /* 响应式调整 */
        @media (max-width: 900px) {
            .tabs-container {
                flex-wrap: wrap;
                height: auto;
            }
            
            .tab {
                flex: 1 0 calc(50% - 15px);
                min-height: 180px;
            }
            
            .tab:hover {
                flex: 2 0 calc(100% - 15px);
            }
        }
        
        @media (max-width: 600px) {
            .tab {
                flex: 1 0 100%;
            }
            
            .tab:hover {
                flex: 2 0 100%;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
/* ============================================
   移动端适配样式 - 仅针对屏幕宽度 ≤ 768px 生效
   保留原有电脑端所有样式，此部分为追加样式
   ============================================ */

@media only screen and (max-width: 768px) {
    
    /* 全局调整：防止横向滚动，字体基础大小 */
    body {
        overflow-x: hidden;
        font-size: 14px;
    }
    
    
    
    /* ----- 头部banner区域调整 ----- */
    .proall {
        height: auto !important;
        min-height: 280px;
        background-size: cover;
        background-position: center;
        margin-top: -15vw;
        padding: 50px 0 30px;
    }
    
    .pro {
        width: 90%;
        padding: 15% 5% 0 5%;
    }
    
    .pro h3 {
        font-size:6vw;
        padding-bottom: 8px;
    }
    
    .pro dd {
        font-size: 3.5vw;
        line-height: 1.5;
        font-weight: normal;
    }
    
    .hint_box_case {
        margin-top: 12%;
        margin-left: 5%;
        font-size: 3vw;
    }
    
    .hint_box_case .hint_box {
        width: 12px;
        height: 20px;
        margin-right: 8px;
    }
    
    /* ----- 应用领域主容器调整 ----- */
    .yingyong {
        width: 90%;
        padding: 8vw 5% 10vw 5%;
    }
    
    .yingyong h2 {
        font-size:5vw;
    }
    
    .yingyong dd {
        font-size: 3.2vw;
        line-height: 1.4;
        margin-top: 5px;
    }
    
    .duiying p {
        font-size: 4vw;
        padding: 5vw 0 5vw 0;
    }
    
    .duiying p span {
        height:3vw;
        width: 1vw;
		margin-right: 1vw;
    }
    
    /* 对应产品按钮组 */
    .duiying ul {
        margin-bottom: 8vw;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .duiying ul li {
        float: none;
        margin-right: 0;
        width: auto;
    }
    
    .duiying ul li a {
        font-size: 3.5vw;
        padding: 8px 16px;
        line-height: 1.4;
        display: inline-block;
        white-space: nowrap;
    }
    
    .duiying ul li img {
        width:5vw;
        top:1.2vw;
        margin-left: 6px;
    }
    
    .yingyong h3 {
        font-size: 4.5vw;
        margin: 15px 0 10px;
    }
    
    .yingyong h3 span {
        height: 3.5vw;
        width: 1vw;
		margin-right: 1vw;
    }
    
    /* ----- Tab卡片区域移动端优化 (每行2个或1个) ----- */
    .tabs-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 20px;
    }
    
    .tabs-container1 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .tab {
        margin: 0 !important;
        padding: 12px 8px;
        flex: auto !important;
        min-width: 0;
        text-align: center;
        border-radius: 12px;min-height: auto;
    }
    
    .tab-icon {
        width: 100% !important;
        margin-bottom: 8px;
    }
    
    .tab-icon img {
        width: 100%;
        border-radius: 10px;
    }
    
    .tab-title {
        font-size: 3.2vw !important;
        white-space: normal;
        word-break: keep-all;
        margin-bottom: 0;
    }
    
    /* 移除悬停效果在移动端的额外展开，保持简洁 */
    .tab-desc {
        display: none;
    }
    
    .tab:hover .tab-desc {
        max-height: 0;
        opacity: 0;
    }
    
    /* 刚玉系列、制釉系列同样适用 */
    .gangyu .tabs-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 针对只有5个以内的卡片，自动调整 */
    .tabs-container:last-child {
        margin-bottom: 0;
    }
    
    /* ----- 底部footer移动端适配 ----- */
    .jch_footxiaall {
        padding: 20px 5% 10px;
    }
    
    .jch_footxia {
        flex-direction: column;
    }
    
    .jch_footerm {
        flex-wrap: wrap;
        width: 100%;
        gap: 20px;
    }
    
    .jch_footerm1, 
    .jch_footerm2, 
    .jch_footerm3, 
    .jch_footerm4, 
    .jch_footerm5 {
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    
    .jch_footerm1 a, 
    .jch_footerm2 a, 
    .jch_footerm3 a, 
    .jch_footerm4 a, 
    .jch_footerm5 a {
        font-size: 12px;
        line-height: 2;
    }
    
    .jch_footerl {
        flex-direction: row;
        justify-content: flex-start;
        gap: 25px;
        margin-top: 20px;
        width: 100%;
    }
    
    .jch_footerl li {
        text-align: center;
    }
    
    .jch_footerl li img {
        width: 70px;
        height: 70px;
    }
    
    .jch_footerb p {
        font-size: 10px;
        text-align: center;
        padding: 15px 0;
    }
    
    /* 修复一些原有元素的间距问题 */
    .yywz {
        padding: 100px 5% 20px;
        width: 90%;
    }
    
    .yywz h3 {
        font-size: 3vw;
    }
    
    .yywz p {
        font-size: 5vw;
    }
    
    /* 确保所有图片自适应 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 修正三组应用标题下的描述文字 */
    .yingyong dd {
        font-size: 3.2vw;
    }
}