@charset "utf-8";
/* CSS Document */

/* ========== 全局基础样式 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{background:#e6f2ec;font-size: 16px;background-size: cover;line-height: 24px;}
body,ul,ol,li,p,h1,h2,h3,h4 {list-style:none;padding: 0; margin: 0;}
a{color: #fff;text-decoration: none;}
a:hover{text-decoration: none;}
a:visited{text-decoration: none;border: none;}
a:active{text-decoration: none;}
       
        body {
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
            font-size: 16px; /* 全局字体16px */
            line-height: 1.6;
            color: #333;
            background-color: #fff;
        }

        /* 页面容器：100%宽度，内容区1200px居中 */
        .page-container {
            width: 100%;
        }
        .content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 一级标题样式（32px） */
        h1 {
            font-size: 32px;
            line-height: 1.3;
            color: #fff;
            margin-bottom: 20px;
        }

        /* 二级标题样式 */
        h2{font-size: 36px; margin: 20px 0 50px;  }
        .section-title {
            position: relative;           
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            
        }
        .section-title h2{           
          display: inline-block;
          background: url(/images/littelfuse-ce/t-bg.png) repeat-x bottom;             
           position: relative;
           padding: 0 40px;
            
        }
        
        .section-title h2::after,.section-title h2::before{
          content: "";
          width: 24px; height: 39px;
          position: absolute; bottom: 0;
          
        }
        .section-title h2::before{
        left: 0;background: url(/images/littelfuse-ce/t-bg-left.png) no-repeat bottom;
        }
        .section-title h2::after{
        right: 0;
          background: url(/images/littelfuse-ce/t-bg-right.png) no-repeat bottom;
        }
        
            
       

        /* ========== 头部Banner ========== */
        .header-banner {
            width: 100%;
            background: linear-gradient(90deg, #0a4b99 0%, #002b5c 100%);
            position: relative;
            overflow: hidden;
            padding: 40px 0;
            background: url(/images/littelfuse-ce/banner.jpg) no-repeat right #0c0815;
            height: 471px;
        }
        .banner-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        .banner-text {
            flex: 1;
        }
        .banner-tag {
            display: inline-block;
            background:url(/images/littelfuse-ce/icon-01.png) no-repeat;
            color: #fff;
            padding: 12px 0px;
            border-radius: 4px;
            font-size: 22px;
            margin-bottom: 35px;
            width: 342px;
            height: 78px;
            text-align: center;           
        }
        .top{background: #2778ba;width: 100%;height:88px;}
.logo{margin:20px 0 15px;float: left;}
.login{float: right;margin-top: 22px;color: #fff;}
.login a{margin-left: 20px;color: #fff;}
        
     
        

        /* ========== 简介部分 ========== */
        .intro-section {
            background-color: #f5f5f5;
            padding: 40px 0;
        }
        .intro-text {
           
        }
        .about-box{background: url(/images/littelfuse-ce/bg-01.jpg) no-repeat right bottom #fff;padding: 40px;}
        /* ========== 行业挑战部分 ========== */
        .challenges-section {
            padding: 40px 0;
        }
        .challenges-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
            gap: 20px;
        }
        .challenge-card {
            background-color: #fff;
            border-radius: 8px;           
            box-shadow: 0px 0px 5px #d9e0e5;            
            position: relative;
        }
        .challenge-card h3 {
            font-size: 20px;
            color: #fff;
            margin-bottom: 10px;            
            background: #48a2ec;
            height: 50px;
            line-height: 50px;
            text-align: center;    
            border-radius: 8px 8px 0 0; 
            font-weight: normal;
        }
        .challenge-card h3::after {  
           content: ""; 
            width: 79px;
            height: 64px;display: block;
            position: absolute;
            top:-14px;right: 0;
            background: url(/images/littelfuse-ce/star.png) no-repeat;
        }
        .challenge-card p {           
            
           padding:10px 20px 20px;
        }
.layui-layer-content a{color: #2778ba;}
.layui-layer-content a:hover{color: #2778ba;   text-decoration: underline;}
.btoom-p{text-align: center;  font-size: 20px;  margin-top: 15px; }
.btoom-p a{background: #2778ba;  color: #fff;  padding: 2px 6px;  border-radius: 4px;}
.btoom-p a:hover{background: #48a2ec; color: #fff;  }
        /* ========== 解决方案部分 ========== */
        .solutions-section {
            padding: 40px 0;
            background-color: #fff;
        }
        .solutions-desc {            
            text-align: center;
            margin-bottom: 30px;  
        }
        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        .solution-card {
            background-color: #f7fbff;
            border-radius: 20px;
            padding:0 20px 20px;            
            border: 1px solid #2778ba;
            position: relative;
        }
        .solution-card h3 {
            font-size: 18px;
            color: #fff;
            margin-bottom: 10px;
            background: #2778ba;
            border-radius: 0 0 20px 20px;
            height: 44px;line-height: 44px;
            font-weight: normal;
            text-align: center;
            
        }
        .solution-card p {           
            font-size: 15px;            
        }
        /* 产品展示 */
        .product-box{text-align: center;
    margin: 20px 0;}
        .product-box img {
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #e0edfa;
    display: inline-block;
    margin-bottom: 15px;}
        .product-label {
            text-align: center;                      
        }

        /* ========== 应用案例部分 ========== */
        .cases-section {
            padding: 40px 0;
        }
        .cases-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        .case-card {
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 25px;
        }
        .case-card h3 {
            font-size: 20px;            
            margin-bottom: 15px;
        }
        .case-card p {            
            font-size: 15px;            
            margin-bottom: 20px;
            min-height: 96px;
        }
        .case-btn {
            background-color: #2778ba;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;            
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .case-btn:hover {
            background-color: #48a2ec;
        }
        /* 其他案例 */
        .other-cases {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        .other-case-item {
            background-color: #fff;
            padding: 15px;
            border-radius: 6px;            
            border-left: 4px solid #2778ba;
        }
        .other-case-item a{
           color: #333;
        }
        .other-case-item a:hover{
           color: #2778ba;
        }

        /* ========== 趣味活动部分 ========== */
        .activity-section {
            background-color: #0a4b99;
            color: #fff;
            padding: 40px 0;          
           
        }
        .activity-title {           
            text-align: center;
            margin-bottom: 25px;
        }
        .activity-desc {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;    
            font-size: 18px;
        }
        .coupon-box {
           
            align-items: center;
            gap: 10px;
        }

        .activity-time {
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        /* 步骤切换 */
        .steps-wrap {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }
        .step-item {
            background-color: #e6f2ec;           
            padding: 2px 2px;
            border-radius: 50px; 
            transition: background-color 0.3s;
			color: #333;
			height: 54px;
			line-height: 50px;
			padding-right:30px;
        }
		.step-item a{color: #2778ba;text-decoration: underline;}
        .step-item span {
            background-color: #00d2ff;
			display: inline-block;
            border-radius: 50px;   
			height: 50px;padding: 0 20px;
			margin-right: 10px;
        }
        /* 问卷部分 */
        .quiz-wrap {
            background-color: #fff;
            color: #333;
            padding: 30px;
            border-radius: 8px;
        }
        .quiz-item {
            margin-bottom: 25px;
        }
        .quiz-title {            
            margin-bottom: 15px;
            font-weight: 600;
        }
        .quiz-options {
            margin-left: 20px;
        }
        .quiz-option {
            margin-bottom: 10px;            
        }
        .submit-btn {
            background-color: #2778ba;
            color: #fff;
            border: none;
            padding: 12px 40px;
            border-radius: 6px;            
            cursor: pointer;
            display: block;
            margin: 0 auto;
            transition: background-color 0.3s;
			font-size: 18px;
        }
        .submit-btn:hover {
            background-color: #48a2ec;
        }

        /* ========== 响应式适配 ========== */
        @media (max-width: 1200px) {
            .cases-grid {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 768px) {
          body{font-size: 15px;}
            h1 {
                font-size: 28px;
            }
			h2{font-size: 28px; margin: 10px 0 30px;}
            h3{font-size: 18px!important;}
			.activity-desc{font-size: 15px;}
			.banner-text>h1>img{width: 100%;}
			.header-banner{height: auto;background: url(/images/littelfuse-ce/banner.jpg) no-repeat center #0c0815;  background-size: auto;}
            .banner-content {
                flex-direction: column;
                text-align: center;
            }
            .banner-img {
                margin-top: 20px;
                flex: 0 0 150px;
                text-align: center;
            }
			.about-box{padding: 20px;}
            .activity-desc {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            .steps-wrap {
                flex-direction: column;
                text-align: center;
            }
            .other-cases {
                grid-template-columns: 1fr;
            }
            .product-showcase {
                gap: 15px;
                padding: 20px;
            }
            .product-box img{
                width: 100%;
            }
            .case-card p{
              height: auto;
            }
			.solutions-section , .cases-section{    padding: 20px 0;}
			.solutions-desc{margin-bottom: 20px;}
        }
        @media (max-width: 480px) {
            h1 {
                font-size: 24px;
            }
            .section-title {
                font-size: 20px;
            }
            .challenges-grid, .solutions-grid {
                grid-template-columns: 1fr;
            }
        }