/* =========================================
   供应商须知页样式 (还原设计图)
   ========================================= */

body {
    background-color: #F8F9FA; /* 浅灰底色 */
}

/* 主容器 */
.joinCon {
    max-width: 1400px;
    margin: 60px auto 0 ;
    padding: 0 20px;
    position: relative;
}

/* 顶部标题 (供应商须知) */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-header h2 {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    font-family: "Alibaba PuHuiTi 3.0", sans-serif;
}

.line-decoration {
    width: 60px;
    height: 4px;
    /* 蓝红渐变 */
    background: linear-gradient(to right, #003B8E 50%, #E60012 50%);
    border-radius: 2px;
}

/* --- 核心内容卡片 --- */
.joinTextCon {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.05); /* 柔和阴影 */
    padding: 60px;
    margin-bottom: 50px;
}

/* --- 富文本内容排版 (针对接口 HTML) --- */
.joinText {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

/* 1. 顶部欢迎语 (翰霖汽车科技欢迎行业优质合作伙伴...) */
.joinText > p:first-child {
    font-size: 20px;
    font-weight: bold;
    color: #003B8E; /* 翰霖蓝 */
    text-align: center;
    margin-bottom: 40px;
}


.joinText p {
    margin-bottom: 10px;
}

.rule-block {
    background: #F9F9F9; /* 浅灰块背景 */
    border-radius: 6px;
    padding: 20px 30px;
    margin-bottom: 20px;
    border-left: 4px solid transparent; /* 预留 */
    transition: all 0.3s;
}

.rule-block:hover {
    background: #F0F6FF; /* 悬停变淡蓝 */
}

/* 块内的标题 (红字) */
.rule-title {
    font-size: 16px;
    font-weight: bold;
    color: #E60012; /* 红色 */
    margin-bottom: 10px;
    display: block;
}

/* 块内的正文 */
.rule-content {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* --- 底部申请按钮 --- */
.joinBut {
    display: block;
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 0 auto;
    
    /* 蓝色渐变水晶按钮效果 */
    background: linear-gradient(180deg, #5B8DEF 0%, #003B8E 100%);
    box-shadow: 0 10px 20px rgba(0, 59, 142, 0.3), 
                inset 0 1px 0 rgba(255,255,255,0.4); /* 顶部高光 */
    border-radius: 6px;
    
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 4px;
    text-decoration: none;
    transition: transform 0.2s;
    position: relative;
    overflow: hidden;
}

/* 按钮光泽动画 */
.joinBut::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.joinBut:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 59, 142, 0.4);
    color: #fff;
}

.joinButCon{
    background: url('../images/banner/btnCon.png') no-repeat;
    background-size: 100% 100%;
    padding: 60px 0;
}
/* =========================================
   供应商入驻表单样式
   ========================================= */

/* 表单容器 */
.joinForm {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 50px;
}

/* 表单标题 */
.joinform-header {
    background-color: #01409F;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 30px;
    margin: 0;
}

/* 双列表单布局 */
.two-column-form {
    padding: 30px;
}

.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.form-item {
    flex: 1;
    min-width: 0;
}

/* 表单标签 */
.form-item label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: normal;
}

/* 必填项星号 */
.required {
    color: #E60012;
    margin-left: 4px;
}

/* 表单输入框 */
.form-item .form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-item .form-control:focus {
    border-color: #01409F;
    outline: none;
    box-shadow: 0 0 0 2px rgba(1, 64, 159, 0.1);
}

/* 文档按钮容器 */
.document-buttons {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}

/* 文档按钮 */
.document-buttons .btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #01409F;
    color: #01409F;
    background-color: transparent;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.document-buttons .btn:hover {
    background-color: #01409F;
    color: #fff;
}

/* 提交按钮行 */
.submit-row {
    justify-content: center;
    margin-top: 60px;
}

/* 提交按钮 */
.button_submit {
    background-color: #01409F;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.button_submit:hover {
    background-color: #013585;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 64, 159, 0.3);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .joinTextCon {
        padding: 30px 20px;
    }
    .joinBut {
        width: 80%;
    }
    
    /* 表单响应式 */
    .two-column-form {
        padding: 20px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .document-buttons {
        flex-direction: column;
    }
    
    .document-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}