/* Basic Reset & Body Styling */
* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; background-color: #f0f2f5;
   /* Light grey background like the image edges */
   color: #333; font-size: 16px; }
/* Container for the form */
.container { max-width: 800px;
   /* 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 */ }
/* 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 { padding: 20px 20px 0; font-size: 22px; color: #333; font-weight: 700; max-width: 800px; margin: 0 auto; display: none; }
.topInfo { padding: 20px; font-size: 18px; color: #555; font-weight: 400; max-width: 800px; margin: 0 auto; }
.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: 25px;
   /* Space between form sections */ }
label { display: block;
   /* Make labels appear on their own line */
   margin-bottom: 8px;
   /* Space between label and input */
   font-weight: 600;
   /* Slightly bolder labels */
   color: #444; }
input[type='text'], input[type='tel'], input[type='email'], textarea { width: calc(100% - 22px);
   /* Full width minus padding and border */
   padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; 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 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; }
.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: baseline; }
.radio-group div.selected, .radio-group div:hover { background-color: rgb(194, 237, 251); border-left: 1px solid #578ef3; cursor: pointer; }
.radio-group input[type='radio'] { vertical-align: middle;
   /* Align radio button with text */
   margin: 0 0 0 5px; }
/* 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 #d9d9d9; 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 */ }
.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-color: #395b9a;
   /* Blue background */
   color: #fff;
   /* White text */
   border: none; padding: 12px 25px; font-size: 16px; 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 */ }
.submit-button:hover { background-color: #2d477a;
   /* Darker blue on hover */ }
.info { text-align: center; padding-bottom: 100px; padding: 0 20px 80px; font-size: 14px; color: #666; }
.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; }
@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: calc(100% - 0px); } }
.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; }