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

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

        /* 页面基础样式 */
        body {
            background-color: #e9f6ff;
            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/banner-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 {
            font-size: 36px;
            font-weight: bold;
            line-height: 1.4;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        /* 引言区域 */
        .intro {
            padding: 40px 0;
        }
        .intro-box {
            background:url(/images/hioki/bg-about.png) no-repeat top center #ecf4ff;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
			border: 3px solid #fff;
        }
        .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: #3d60af;
            border-radius:20px;           
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
			overflow: hidden;
        }
        .column-header {
            display: flex;
            align-items: center;
            gap: 8px;  
			color: #fff;
			padding: 20px 40px;
			font-size: 21px;
        }
        .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: 21px;font-weight: bold;}
        .column ul {
            list-style: none;
            padding-left: 0;
			background: #fff;
			padding: 40px;
			border-radius:20px;     
        }
        .column ul li {            
            margin-bottom: 12px;          
            position: relative;
			min-height: 51px;
        }

        .check-list li::before {
            content: "";
            width: 14px;height: 14px;
			display: inline-block;
			background: url(/images/hioki/icon-3.jpg) no-repeat;
			margin-right: 8px;
        }

        /* 解决方案标题 */
        .solution-title {
            text-align: center;
            font-size: 40px;
            font-weight: bold;           
            margin-bottom: 30px;

        }
		.solution-title span{            background: linear-gradient(90deg, #0052cc, #9966cc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;}

        /* 解决方案卡片区域 */
        .solution-cards {
            display: flex;
            flex-direction: column;
            gap: 25px;
            padding-bottom: 50px;
        }
        .solution-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            display: flex;
            gap: 25px;
            align-items: flex-start;
        }
        .card-content {
            flex: 1;
        }
        .card-title {
            font-size: 20px;  
            margin-bottom: 10px;
            font-weight: bold;
        }
        .card-desc {            
           
            margin-bottom: 0px;
        }
		.card-desc p{margin-bottom: 2px; color: #555;}
		.card-btn{margin: 15px 0;}
		.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 {
            background: #f8fafc;
            border-radius: 8px;
            padding: 8px 12px;           
            color: #3a6ac1;
            margin-top: 10px;
            display: inline-block;
			border: 1px solid #e4e8ed;
        }
		.card-advantage span{font-weight: bold;}
        .card-img {
            width: 360px;            
            overflow: hidden;
        }
        .card-img img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 活动区域 */
        .activity-section {
            background: linear-gradient(135deg, #3d60af 0%, #4a89dc 100%);
            padding: 40px 0;
            color: white;
        }
        .activity-title {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 50px;
        }
        .activity-box {
            background: white;
            border-radius: 12px;
            padding: 25px;
            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;
            border-radius: 12px;
            padding: 25px;
            color: #333;
			position: relative;
			margin-top: 50px;
        }
        .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 {
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
			background: #f1f7ff;
			margin-top: 30px;
			padding: 10px 0 20px;
        }
        .step-item {
            flex: 1;
            text-align: center;
            position: relative;
        }
        .step-item::after {
            content: "➤";
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            color: #ccc;
            font-size: 20px;
        }
        .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(135deg, #3d60af 0%, #4a89dc 100%);
            color: white;
            text-align: center;
            border-radius: 40px;
            text-decoration: none;           
            font-weight: bold;
            margin: 0 auto 15px;
        }
        .btn-forum:hover{ background: linear-gradient(135deg, #4a89dc 0%, #3d60af 100%);}
        .activity-tip {
            text-align: center;          
          
        }
        .down-btn{margin-top: 10px;}
        .down-btn a{margin: 0;width: 160px; height: 40px; line-height: 40px;font-weight: normal;}
        .down-btn a:hover{background: linear-gradient(135deg, #4a89dc 0%, #3d60af 100%);}

        /* 响应式适配 */
        @media (max-width: 992px) {
		body{font-size: 15px;}
            .two-column {
                flex-direction: column;
            }
            .solution-card {
                flex-direction: column;
            }
            .card-img {
                width: 100%;
            }
            .steps-list {
                flex-direction: column;
                gap: 20px;
            }
            .step-item::after {
                display: none;
            }
            .banner-title {
                font-size: 28px;
            }
            .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;}
        }