/* 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: .26rem; }
div{box-sizing: border-box;}
/* Container for the form */
.container { max-width: 10rem;
   padding: .3rem ;
   /* Adjust width as needed */
   margin: 0 auto 0;
   /* Center the container */
   /* White background for the form area */
   /* padding: .2rem .4rem; remove padding here, add to header/form */
   /* box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .1); */
   /* Optional subtle shadow */ }
.container p{font-size: .26rem;margin-bottom: .1rem;text-indent: 2em;}
/* Header Styling */
.header { background-color: #395b9a;
   /* Blue color from the image */
   color: #fff;
   /* padding: .2rem .4rem; */
   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: .2rem .2rem 0; font-size: .22rem; color: #333; font-weight: 700; max-width: 8rem; margin: 0 auto; }
h1.topTitle-wap { font-size: .22rem; color: #333; font-weight: 700; max-width: 3.24rem; margin: .7rem auto .4rem; background: url(../img/title1.png)
   no-repeat center top; background-size: 100% auto; height: .45rem; }
h2.title2{background: url(../img/title2.png) no-repeat center top; background-size: 100% auto; width: 6.9rem; height: 9.5rem; margin: .4rem auto .6rem;}
h2.title3{background: url(../img/title3.png) no-repeat center top; background-size: 100% auto; width: 4.16rem; height: .44rem; margin: .4rem auto;}
.topInfo { padding: .2rem .3rem; font-size: .26rem; color: #43250b; font-weight: 400; max-width: 10rem; margin: 0 auto; line-height: 1.8;}
.topInfo p{margin-bottom: .1rem;}
.banner h1 { color: #fff; padding: .5rem 0; background: #578ef3; font-size: .4rem; }
.banner h2 { text-align: left; max-width: 8rem; margin: 0 auto; padding: .2rem 0; font-size: .18rem; color: #555; font-weight: 400; }
.header h1 { display: none; margin: 0; font-size: .24rem;
   /* Adjust size as needed */
   font-weight: 500; }
.qr-code-placeholder { position: absolute; top: 0; right: -1.6rem; width: 1.5rem; height: 1.5rem; background-color: #ccc; display: flex; align-items: center; justify-content: center; font-size: .1rem; color: #555; content: 'QR'; }
/* Form Styling */
.form-content { padding: .3rem .4rem; 
   background-color: #fff;
}
.form-group { margin-bottom: .2rem; 
   /* display: flex; justify-content: center;  */
   /* Space between form sections */ }
.form-group select{
   width: 6rem;
    padding: .1rem;
    border: .01rem solid #ccb57a;
    border-radius: .04rem;
    font-size: .28rem;
    box-sizing: border-box;}
label { display: block;
   /* Make labels appear on their own line */
   margin: 0 .1rem .1rem 0;
   /* Space between label and input */
   /* font-weight: 600; */
   font-size: .28rem;
   /* Slightly bolder labels */
   color: #43250b; }
input[type='text'], input[type='tel'], input[type='email'], textarea { width: 6rem;
   /* Full width minus padding and border */
   padding: .16rem .1rem; border: .01rem solid #ccb57a; border-radius: .04rem; font-size: .24rem; 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 .02rem rgba(57, 91, 154, .2);
   /* Subtle glow */ }
textarea { min-height: .8rem;
   /* Minimum height for textarea */
   resize: vertical;
   /* Allow vertical resizing */ }
/* Radio Button Styling */
.radio-group{ display: flex; width: 6rem; gap: .1rem; flex-wrap: wrap;}
.radio-group label { /* Style the labels next to radio buttons */
   margin: 0 0 0 .08rem; padding: .08rem 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: .24rem; cursor: pointer; }
.radio-group label b { color: #333; font-size: .16rem; 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: .18rem;
   height: .18rem;
   border: .02rem 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: .1rem;
   height: .1rem;
   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: .04rem; }
/* Character Counter */
.char-counter { text-align: right; font-size: .12rem; color: #888; margin-top: .05rem; }
.char-counter.error { color: #ff4d4f; }
/* File Upload Hint Text */
.file-hint { font-size: .12rem; color: #888; margin-top: .05rem; display: block;
   /* Put hint on its own line */ }
.file-hint-secondary { font-size: .12rem; color: #888; margin-top: .05rem; display: block; margin-bottom: .08rem; }
/* File Input Basic Styling (difficult to style consistently across browsers without JS/advanced CSS) */
.file-upload-area { border: .01rem dashed #ccb57a; padding: .2rem; text-align: center; cursor: pointer; background-color: #fafafa; border-radius: .04rem; 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: .16rem; }
.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: .1rem auto 0;
   /* Center it below the placeholder text */ }

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

/* 自定义文件上传按钮 */
.custom-file-upload {
   width: 100%;
   height: .6rem;
   border: .01rem solid #ccb57a;
   border-radius: .04rem;
   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: .32rem;
   color: #c8a06a;
   line-height: 1;
   margin: 0 .08rem .08rem;
}

.custom-file-upload .upload-text {
   font-size: .24rem;
   color: #b2b2b2;
}

/* 文件提示文字样式调整 */
.file-upload-wrapper .file-hint {
   margin-top: .08rem;
   margin-left: 0;
   font-size: .24rem;
   color: #8c8c8c;
}
.image-preview-w { display: flex; }
.image-preview-container { position: relative; }
.image-preview-delete { position: absolute; top: -0.1rem; right: -0.1rem; color: #fff; background-color: #395b9a; border-radius: 50%; padding: .05rem; 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: .24rem; height: .24rem; 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: .1rem; margin-right: .1rem; max-width: 2rem; max-height: 2rem; }
/* Separator Line */
hr { border: none; border-top: .01rem solid #e8e8e8;
   /* Light grey line */
   margin: .3rem 0;
   /* Space around the line */ }
/* Submit Button */
.submit-button { background: url(../img/btn-bg.png) 0/contain no-repeat;
   /* Blue background */
   color: #fff;
   width: 4rem;
   height: .8rem;
   line-height: .8rem;
   /* White text */
   border: none; text-align: center; font-size: .28rem; border-radius: .04rem; 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: 0 .2rem .4rem 0; font-size: .18rem; color: #43250b; margin-top: .8rem;}
.info h3{font-size: .26rem; color: #764b1e; margin: 0 0 .15rem;}
.info p{text-indent: 0;}
.form-result { display: flex; padding: .5rem 0 1rem; min-height: 2rem; flex-direction: column; justify-content: center; align-items: center; gap: .1rem; }
.image-preview-wrap { display: flex; margin-top: .1rem;}
.checkbox-group > div { margin-bottom: .08rem; 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: .08rem; margin-top: .04rem;
   /* Adjust vertical alignment with text */ }
.checkbox-group label { /* Style the labels next to radio buttons */
   margin-left: .08rem; padding: .05rem 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: .12rem; }
.checkbox-group label b { color: #333; font-size: .16rem; display: block; }
.checkbox-group input[type='checkbox'] { vertical-align: middle;
   /*Alignradiobuttonwithtext*/
   margin: 0 0 0 .05rem;         transform: translateY(.1rem); -webkit-transform: translateY(.1rem);    -moz-transform: translateY(.1rem);     -ms-transform: translateY(.1rem);      -o-transform: translateY(.1rem); }
.form-result .code img { width: 2rem; height: 2rem; }
.form-result p.t2 { padding-top: .2rem; font-size: .14rem; }
.form-result .code-text { color: #999; font-size: .12rem; margin-top: -0.1rem; }
#return_button { margin-top: .2rem; }

/* 标签按钮组容器 */
.tag-group-container {
    display: flex;
    gap: .1rem;
    width: 6rem;
    flex-wrap: wrap;
}

/* 单个标签样式 */
.tag-item {
    padding: .12rem .4rem;
    border: .01rem solid #ccb57a;
    border-radius: .04rem;
    cursor: pointer;
    font-size: .24rem;
    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: .15rem;
} */
.required {
    color: #ff4d4f;
    margin-left: .04rem;
}

/* 选中态改为金色（匹配申报赛道标签） */
.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: 1.8rem;
   width: auto;
}

.bannercheck{
   position: relative;
}
.bannercheck a{
   display: block;
   width: .5rem;
   height: .5rem;
}
.link1{
   position: absolute;
   left: .18rem;
   top: .18rem;
}
.link2{
   position: absolute;
   left: .18rem;
   top: .78rem;
}
.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;
}