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

        /* 全局重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "微软雅黑";
			
        }

        /* 页面基础样式 */
        body {
            background:url(/images/hioki/img_bg.png)no-repeat center  360px #fff;
            line-height: 1.6;
            color: #333;font-size: 16px;
        }

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

        /* 头部Banner */
        .banner {
            width: 100%;
            background: #051123;
            background-image: url('/images/hioki/banner2605-bg.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            padding: 60px 0;
            position: relative;
            overflow: hidden;
			
        }
        
        .banner .container {
            position: relative;
            z-index: 1;
        }
        .banner-logo {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }
        .banner-title {
            background: rgba(0,0,0,0.3);
			padding: 45px 100px;
			color: #fff;
			font-size: 60px;
			text-align: center;
			margin: 0 auto;
        }

        /* 引言区域 */
        .intro {
            padding: 40px 0;
        }
        .intro-box {
		  text-align: center;            
        }
        .intro-box p {            
            color: #333;
            margin-bottom: 10px;			
        }
		.intro-box p span{font-weight: bold;}

        /* 双栏对比区域 */
        .two-column {
            display: flex;
            gap: 20px;
            padding: 0 0 40px 0;
        }
        .column {
            flex: 1;
            background: #fff; 
			border: 2px solid #e9e9e9;
        }
        .column-header {
            display: flex;
            align-items: center;
            gap: 8px;  
			color: #fff;
			padding: 15px 20px;
			font-size: 21px;
			background:linear-gradient(100deg, #ee8d00, #fdba1a, #fdba1a);
        }
        .column-header .icon {
            width: 34px;
            height: 34px;
            background:url(/images/hioki/icon-1.png) no-repeat;           
            display: flex;
            align-items: center;
            justify-content: center;           
        }
        .column-header.yellow .icon {
            background:url(/images/hioki/icon-2.png) no-repeat;       
        }
		.column-header p{font-size: 22px;font-weight: bold;width: 100%;}
        .column ul {
            list-style: none;
            padding-left: 0;
			background: #fff;
			padding: 20px;
			border-radius:20px;     
        }
        .column ul li {            
            margin-bottom: 12px;          
            position: relative;
			min-height: 51px;
        }
		.column ul li span{
		       margin-bottom: 12px;
    position: relative;
    border-radius: 20px;
    background: #6b8edf;
    display: inline-block;
    height: 26px;
    color: #fff;
    margin-right: 8px;
    width: 26px;
    text-align: center;
    line-height: 26px;
		}
		.solu-b{text-align: center;
    margin-bottom: 30px;
    font-size: 18px;}
	.solu-b a{color: #3d60af;}
    .solu-b a:hover{text-decoration: underline;}

.jiesuo-btn{margin: 20px 0;}
.jiesuo-btn a {
    margin: 0;
    width: 160px;
    height: 40px;
    line-height: 40px;
    font-weight: normal;
    margin: 0 auto;
    background: url(/images/hioki/icon-4.png) no-repeat 35px 4px #DDE;
    color: #000;
    text-indent: 2em;  
}
.jiesuo-btn a:hover{background: url(/images/hioki/icon-4.png) no-repeat 35px 4px #d1d1dd;}
        /* 解决方案标题 */
        .solution-title {            
            font-size: 40px;
            font-weight: bold;           
            margin-bottom: 30px;
			color: #3d60af;
            text-align: center;
        }

        /* 解决方案卡片区域 */
        .solution-cards {               
			padding-bottom: 30px;
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 20px;
        }
        .solution-card {
            background: white;   
			border: 2px solid #e9e9e9;
        }
        .card-content {
            flex: 1;
        }
        .card-title {
                font-size: 22px;
    margin-bottom: 10px;
    font-weight: bold;
    background: #3d60af;
    color: #fff;
    padding: 15px 0;
    text-align: center;
        }
        .card-desc {            
           margin: 20px 20px;
            min-height: 130px;
            margin-bottom: 0px;
        }
		.card-desc p{margin-bottom: 2px; color: #555;}
		.card-btn{margin: 15px 0 20px;text-align: center;}
		.card-btn a{color: #3a6ac1;border: 1px solid #3a6ac1;padding: 6px 20px;display: inline-block;border-radius: 50px;text-decoration: none;}
		.card-btn a:hover{background:#3a6ac1;color: #fff; }
        .card-advantage {
            margin: 0 20px 10px;
			min-height: 76px;
			color: #3a6ac1;
        }
		.card-advantage span{font-weight: bold;}
        .card-img {               
            overflow: hidden;
			margin: 0 20px;
        }
        .card-img img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 活动区域 */
        .activity-section {
            background: #cfe0ee;
            padding: 40px 0;
            color: white;
        }
        .activity-title {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 50px;
			color: #3d60af;
        }
        .activity-box {
            background: white;                 
            margin-bottom: 20px;
            color: #333;
            text-align: center;
			position: relative;
        }
        .activity-box .tag {           
            color: #3a6ac1;           
            border-radius: 60px;
			width: 200px;
			height: 50px; line-height: 50px;
            font-size: 22px;
            font-weight: bold;
            display: inline-block;           
			background: linear-gradient(180deg, #fff 0%, #edf5ff 100%);
			border: 3px solid #a0c3fc;
			position: absolute;
			top: -25px;
			left: 50%;
			margin-left: -100px;
        }
        .activity-img {
            width: 100%;
            max-width: 500px;
            margin: 0 auto 10px;
        }
        .activity-img img {
            width: 100%;
            height: auto;
        }
        .activity-desc {
           
        }

        /* 活动步骤 */
        .activity-steps {
            background: white;            
            padding: 25px;
            color: #333;
			position: relative;			
        }
		.activity-box2{display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
        .activity-steps .tag {
            color: #3a6ac1;           
            border-radius: 60px;
			width: 200px;
			height: 50px; line-height: 50px;
            font-size: 22px;
            font-weight: bold;
            display: inline-block;           
			background: linear-gradient(180deg, #fff 0%, #edf5ff 100%);
			border: 3px solid #a0c3fc;
			position: absolute;
			top: -25px;
			left: 50%;
			margin-left: -100px;
			text-align: center;
        }
        .steps-list {
            
            margin-bottom: 25px;
			background: #f1f7ff;			
			padding: 10px 0 20px;
			text-align: left;
        }
        .step-item {
            flex: 1;
            text-align: center;
            position: relative;
			margin-bottom: 25px;
        }
        
        .step-item:last-child::after {
            display: none;
        }
        .step-number {
            width: 40px;
            height: 40px;           
            color: #3d60af;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: bold;
            margin: 0 auto 0px;
        }
        .step-text a {   
    color: #3a6ac1;
    border: 1px solid #3a6ac1;
    padding: 4px 20px;
    display: inline-block;
    border-radius: 50px;
    text-decoration: none;         
        }
        .step-text a:hover{ background:#3a6ac1;color: #fff;}
        .btn-forum {
            display: block;
            width: 180px;
            height: 46px;
            line-height: 46px;
            background: linear-gradient(100deg, #ee8d00, #fdba1a, #fdba1a);
            color: white;
            text-align: center;           
            text-decoration: none;           
            font-weight: bold;
            margin: 0 auto 15px;
        }
        .btn-forum:hover{ background: linear-gradient(100deg, #fdba1a, #fdba1a, #ee8d00);}
        .activity-tip {
            text-align: center;          
          
        }
        .down-btn{margin: 20px 0;}
        .down-btn a{margin: 0;width: 160px; height: 40px; line-height: 40px;font-weight: normal;margin: 0 auto;background: linear-gradient(100deg, #ee8d00, #fdba1a, #fdba1a);}
        .down-btn a:hover{background: linear-gradient(100deg, #fdba1a, #fdba1a, #ee8d00);}

        /* 响应式适配 */
        @media (max-width: 992px) {
		body{font-size: 15px;}
            .two-column {
                flex-direction: column;
            }
            .solution-card {
                flex-direction: column;
				    
            }
			.solution-cards,.activity-box2{display: inline-block;}
			.card-advantage,.card-desc{min-height: auto;}
            .card-img {
               
            }
            .steps-list {
                flex-direction: column;
                gap: 20px;
            }
            .step-item::after {
                display: none;
            }
            .banner-title {
                font-size: 30px;    padding: 15px 10px;
            }
            .banner-title img{width: 100%;}
            .banner {padding: 30px 0;}
            .intro-box, .column ul{padding: 20px;}
            .intro, .activity-section{padding: 20px 0;}
            .column-header{padding:10px 20px;}
            .column-header p{font-size: 18px;}
            .column ul li{min-height:auto; height: auto;}
            .solution-title{font-size: 30px;margin-bottom: 20px;}
            .two-column{padding: 0 0 20px 0;}
            .card-title{font-size: 18px;}
			.activity-title{margin-bottom: 30px;}
        }