/* Basic Reset & Body Styling */
* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; background-color: #fbf9f5;
   /* Light grey background like the image edges */
   color: #43250b; font-size: 16px; }
div{box-sizing: border-box;}
/* Container for the form */
.container { max-width: 1000px;
   padding: 50px 80px;
   /* Adjust width as needed */
   margin: 10px auto 0;
   /* Center the container */
   background-color: #fff;
   /* White background for the form area */
   /* padding: 20px 40px; remove padding here, add to header/form */
   /* box-shadow: 0 2px 8px rgba(0, 0, 0, .1); */
   /* Optional subtle shadow */ }
.container p{font-size: 18px;margin-bottom: 10px;}
/* Header Styling */
.header { background-color: #395b9a;
   /* Blue color from the image */
   color: #fff;
   /* padding: 20px 40px; */
   text-align: center;
   /* Center the title */
   position: relative;
   /* For potential absolute positioning like QR code */ }
.banner { background: url(https://n.sinaimg.cn/finance/66ceb6d9/20250514/banner-pc.png)
   no-repeat center top; background-size: 100% auto; height: auto; aspect-ratio: 1920 / 360; }
h1.topTitle { padding: 20px 20px 0; font-size: 22px; color: #333; font-weight: 700; max-width: 800px; margin: 0 auto; }
h1.topTitle-wap { font-size: 22px; color: #333; font-weight: 700; max-width: 324px; margin: 70px auto 40px; background: url(../img/title1.png)
   no-repeat center top; background-size: 100% auto; height: 45px; }
h2.title2{background: url(../img/title2.png) no-repeat center top; background-size: 100% auto; width: 998px; height: 488px; margin: 40px auto 60px;}
h2.title3{background: url(../img/title3.png) no-repeat center top; background-size: 100% auto; width: 416px; height: 44px; margin: 40px auto;}
.topInfo { padding: 20px; font-size: 18px; color: #43250b; font-weight: 400; max-width: 1000px; margin: 0 auto; line-height: 1.8;}
.topInfo p{margin-bottom: 10px;}
.banner h1 { color: #fff; padding: 50px 0; background: #578ef3; font-size: 40px; }
.banner h2 { text-align: left; max-width: 800px; margin: 0 auto; padding: 20px 0; font-size: 18px; color: #555; font-weight: 400; }
.header h1 { display: none; margin: 0; font-size: 24px;
   /* Adjust size as needed */
   font-weight: 500; }
.qr-code-placeholder { position: absolute; top: 0; right: -160px; width: 150px; height: 150px; background-color: #ccc; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #555; content: 'QR'; }
/* Form Styling */
.form-content { padding: 30px 40px; }
.form-group { margin-bottom: 20px; display: flex; justify-content: center; 
   /* Space between form sections */ }
.form-group select{
   width: 500px;
    padding: 10px;
    border: 1px solid #ccb57a;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;}
label { display: block;
   /* Make labels appear on their own line */
   margin: 9px 10px 0 0;
   /* Space between label and input */
   /* font-weight: 600; */
   width: 160px;
   text-align: right;
   font-size: 18px;
   /* Slightly bolder labels */
   color: #43250b; }
input[type='text'], input[type='tel'], input[type='email'], textarea { width: 500px;
   /* Full width minus padding and border */
   padding: 10px; border: 1px solid #ccb57a; border-radius: 4px; font-size: 18px; box-sizing: border-box;
   /* Include padding and border in the element's total width and height */ }
input[type='text'].error, input[type='tel'].error, input[type='email'].error, textarea.error { border-color: #ff4d4f; }
input[type='text']:hover, input[type='tel']:hover, input[type='email']:hover, textarea:hover, input[type='text']:focus, textarea:focus { border-color: #5c94fc;
   /* Highlight border on focus */
   outline: none;
   /* Remove default browser outline */
   box-shadow: 0 0 0 2px rgba(57, 91, 154, .2);
   /* Subtle glow */ }
textarea { min-height: 80px;
   /* Minimum height for textarea */
   resize: vertical;
   /* Allow vertical resizing */ }
/* Radio Button Styling */
.radio-group{ display: flex; width: 500px; gap: 10px; flex-wrap: wrap;}
.radio-group label { /* Style the labels next to radio buttons */
   margin: 0 0 0 8px; padding: 8px 0; font-weight: normal;
   /* Normal weight for options */
   margin-bottom: 0;
   /* Reset margin bottom for inline labels */
   vertical-align: middle;
   width: auto;
   /* Align text with radio button */
   flex: 1; color: #666; font-size: 18px; cursor: pointer; }
.radio-group label b { color: #333; font-size: 16px; display: block; }
.radio-group div { /* Spacing between radio options */
   display: flex; cursor: pointer; box-sizing: border-box; align-items: center; }
.radio-group input[type='radio'] {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 18px;
   height: 18px;
   border: 2px solid #ccb57a;
   border-radius: 50%;
   outline: none;
   cursor: pointer;
   position: relative;
   margin: 0;
   flex-shrink: 0;
}
.radio-group input[type='radio']:checked {
   border-color: #c8a06a;
   background-color: #fff;
}
.radio-group input[type='radio']:checked::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #c8a06a;
}
.radio-group input[type='radio']:hover {
   border-color: #c8a06a;
}
/* Required Asterisk */
.required { color: #ff4d4f;
   /* Red color for asterisk */
   margin-left: 4px; }
/* Character Counter */
.char-counter { text-align: right; font-size: 12px; color: #888; margin-top: 5px; }
.char-counter.error { color: #ff4d4f; }
/* File Upload Hint Text */
.file-hint { font-size: 12px; color: #888; margin-top: 5px; display: block;
   /* Put hint on its own line */ }
.file-hint-secondary { font-size: 12px; color: #888; margin-top: 5px; display: block; margin-bottom: 8px; }
/* File Input Basic Styling (difficult to style consistently across browsers without JS/advanced CSS) */
.file-upload-area { border: 1px dashed #ccb57a; padding: 20px; text-align: center; cursor: pointer; background-color: #fafafa; border-radius: 4px; position: relative;
   /* Needed if you want to hide the default input */ }
.file-upload-area:hover { border-color: #395b9a; }
.file-upload-area span { /* Style the "Upload File" text */
   color: #395b9a; font-size: 16px; }
.file-upload-area input[type='file'] { /* Optional: Hide the default ugly input, but requires JS to trigger click */
   /*
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            */
   display: block;
   /* Keep it simple for now */
   margin: 10px auto 0;
   /* Center it below the placeholder text */ }

/* 文件上传容器 */
.file-upload-wrapper {
   width: 500px;
   display: flex;
   flex-direction: column;
}

/* 自定义文件上传按钮 */
.custom-file-upload {
   width: 100%;
   height: 40px;
   border: 1px solid #ccb57a;
   border-radius: 4px;
   display: flex;
   align-items: center;
   cursor: pointer;
   background-color: #fff;
   transition: border-color 0.3s ease;
   box-sizing: border-box;
}

.custom-file-upload:hover {
   border-color: #c8a06a;
}

.custom-file-upload .upload-icon {
   font-size: 32px;
   color: #c8a06a;
   line-height: 1;
   margin: 0 8px 8px;
}

.custom-file-upload .upload-text {
   font-size: 18px;
   color: #b2b2b2;
}

/* 文件提示文字样式调整 */
.file-upload-wrapper .file-hint {
   margin-top: 8px;
   margin-left: 0;
   font-size: 18px;
   color: #8c8c8c;
}
.image-preview-w { display: flex; }
.image-preview-container { position: relative; }
.image-preview-delete { position: absolute; top: -10px; right: -10px; color: #fff; background-color: #395b9a; border-radius: 50%; padding: 5px; cursor: pointer; }
.image-preview-delete::before { content: ''; color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 0; display: inline-block; vertical-align: middle; width: 24px; height: 24px; background-color: #fff; -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.image-preview { display: block; margin-top: 10px; margin-right: 10px; max-width: 200px; max-height: 200px; }
/* Separator Line */
hr { border: none; border-top: 1px solid #e8e8e8;
   /* Light grey line */
   margin: 30px 0;
   /* Space around the line */ }
/* Submit Button */
.submit-button { background: url(../img/btn-bg.png) 0/contain no-repeat;
   /* Blue background */
   color: #fff;
   width: 200px;
   height: 40px;
   /* White text */
   border: none; padding: 7px 25px; font-size: 20px; border-radius: 4px; cursor: pointer; transition: background-color .3s ease;
   /* Smooth hover effect */
   display: block;
   /* Make it block to center easily if needed */
   margin: 0 auto;
   /* Center the button */ }

.info { padding-bottom: 100px; padding: 0 20px 80px 250px; font-size: 18px; color: #43250b; }
.info h3{font-size: 18px; color: #764b1e; margin: 0 0 15px;}
.form-result { display: flex; padding: 50px 0 100px; min-height: 200px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.image-preview-wrap { display: flex; margin-top: 10px;}
@media screen and (max-width: 800px) { body { font-size: 17px; }
   .banner { background-image: url(https://n.sinaimg.cn/finance/66ceb6d9/20250514/banner-wap.png); aspect-ratio: 1015 / 360; }
   h1.topTitle { display: none; }
   h1.topTitle-wap { display: block; }
   .topInfo { padding: 20px; font-size: 14px; color: #555; font-weight: 400; }
   .banner h1 { font-size: 24px; padding: 50px 40px; }
   .banner h2 { padding: 10px 20px; font-size: 14px; }
   .container { margin: 0 auto; }
   .qr-code-placeholder { display: none; }
   /* Form Styling */
   .form-content { padding: 20px 20px; }
   input[type='text'], input[type='tel'], input[type='email'], textarea { width: 500px; } }
.checkbox-group > div { margin-bottom: 8px; display: flex;
   /* Align checkbox and label */
   align-items: flex-start;
   /* Align to top if label is multi-line */ }
.checkbox-group input[type='checkbox'] { margin-right: 8px; margin-top: 4px;
   /* Adjust vertical alignment with text */ }
.checkbox-group label { /* Style the labels next to radio buttons */
   margin-left: 8px; padding: 5px 0; font-weight: normal;
   /* Normal weight for options */
   margin-bottom: 0;
   /* Reset margin bottom for inline labels */
   vertical-align: middle;
   /* Align text with radio button */
   flex: 1; color: #666; font-size: 12px; }
.checkbox-group label b { color: #333; font-size: 16px; display: block; }
.checkbox-group input[type='checkbox'] { vertical-align: middle;
   /*Alignradiobuttonwithtext*/
   margin: 0 0 0 5px;         transform: translateY(10px); -webkit-transform: translateY(10px);    -moz-transform: translateY(10px);     -ms-transform: translateY(10px);      -o-transform: translateY(10px); }
.form-result .code img { width: 200px; height: 200px; }
.form-result p.t2 { padding-top: 20px; font-size: 14px; }
.form-result .code-text { color: #999; font-size: 12px; margin-top: -10px; }
#return_button { margin-top: 20px; }

/* 标签按钮组容器 */
.tag-group-container {
    display: flex;
    gap: 7px;
    width: 500px;
}

/* 单个标签样式 */
.tag-item {
    padding: 8px 10px;
    border: 1px solid #ccb57a;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    color: #43250b;
    transition: all 0.3s ease;
}

/* 标签选中态（匹配截图的金色背景） */
.tag-item.active {
    background-color: #c8a06a; /* 截图中的选中背景色 */
    border-color: #c8a06a;
}

/* 标签 hover 态 */
.tag-item:hover:not(.active) {
    border-color: #c8a06a;
    color: #c8a06a;
}

/* .form-group label {
    width: auto;
    text-align: right;
    font-weight: 600;
    color: #43250b;
    margin-right: 15px;
} */
.required {
    color: #ff4d4f;
    margin-left: 4px;
}

/* 选中态改为金色（匹配申报赛道标签） */
.radio-group input[type='radio']:checked + label::before {
    border-color: #c8a06a; 
    background-color: #c8a06a;
}
footer{
   background: url(../img/foot.png) center top no-repeat;
   background-size: auto 100%;
   height: 139px;
   width: auto;
}

.bannercheck{
   position: relative;
}
.bannercheck a{
   display: block;
   width: 36px;
   height: 36px;
}
.link1{
   position: absolute;
   left: 50px;
   top: 35px;
}
.link2{
   position: absolute;
   left: 100px;
   top: 35px;
}
.fan-link{
   background: url(../img/font-fan.png) 0/cover no-repeat;
}
.en-link{
   background: url(../img/font-en.png) 0/cover no-repeat;
}
.jian-link{
   background: url(../img/font-jian.png) 0/cover no-repeat;
}
.fan-link:hover{
   background: url(../img/font-fan-hover.png) 0/cover no-repeat;
}
.en-link:hover{
   background: url(../img/font-en-hover.png) 0/cover no-repeat;
}
.jian-link:hover{
   background: url(../img/font-jian-hover.png) 0/cover no-repeat;
}