body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img{padding: 0;margin: 0;}
table{border-collapse: collapse; border-spacing: 0;}
fieldset, img{vertical-align: top; border: 0;}
address, caption, cite, code, dfn, em, th, var, i{font-weight: normal; font-style: normal;}
ol, ul, li{list-style: none;}
div, dl, dt, dd, ol, ul, li{zoom: 1;}
caption, th{text-align: left;}
h1, h2, h3, h4, h5, h6{font-weight: normal;font-size: 100%;}
q:before, q:after{content: '';}
abbr, acronym{border: 0;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu,time{margin: 0;padding: 0;display:block;zoom:1;}
/* Public */
body{color: #333;font-size: 20px;line-height:1.8;font-family:"Microsoft YaHei",SimSun,Arial,Helvetica,Tahoma,sans-serif;text-align: left;-webkit-text-size-adjust: none;}
a{color: #333; text-decoration: none; outline: none;}
a:hover{color: #9A0000;}
.clearbox{border: none; border-top: 1px solid transparent !important; clear: both; font-size: 0; height: 0; line-height: 0; margin-top: -1px !important; visibility: hidden;}
.blank{display: block; height: 10px; font-size: 0px; line-height: 0; overflow: hidden; clear: both;}
.clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
* html .clearfix{height: 1%;}
* + html .clearfix{min-height: 1%;}
.fl{float: left;}
.fr{float: right;}
.hide{display: none;}
input[type=button], input[type=submit], input[type=file]}

    body {
        font-family: 'Arial', sans-serif;       
     
        background-color: #c0defe;
    }

    .question-container {
        
       
        /*border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);*/
        margin-bottom: 20px;
    }


    .nav-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 25px;
    }
    #prevBtn, #nextBtn{
        padding: 8px 25px;
        border: none;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
    }
    #prevBtn {
        background: #6c757d;
        color: white;
    }
    #nextBtn {
        background: #0d6efd;
        color: white;
    }
    #submitBtn {
        background: #28a745;
        color: white;
        display: none;
        width: 100%;
    }
    .progress-container {
        margin: 10px 0;
    }
    .progress-bar {
        height: 8px;
        background: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }
    .progress {
        height: 100%;
        background: #0d6efd;
        transition: width 0.3s;
    }
    .progress-text {
        text-align: right;
        margin-top: 5px;
        color: #6c757d;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    h1 {
        color: #212529;
        text-align: center;
        margin-bottom: 30px;
    }
    h3 {
        color: #343a40;
        margin-bottom: 15px;
    }

.iconbut{clear: both;text-align: center;}


.submitBtn {
  padding: 18px 36px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(to bottom, #2c8aee, #1943c1);
  border: none;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(74, 123, 213, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;width: 100%;margin-top: 30px;
  clear: both;font-size: 22px;
}


#ValidateCode{width:200px;}
.code{clear:both;}
.code_tit{float:left;line-height:32px;}
#ValidateCode{float:left;width:100px;border: 1px solid #ccc;height: 42px;line-height: 42px;padding: 0 5px;border-radius: 4px;}
.codeerror .field-validation-error{top:-30px;}
textarea.surveyitemCheck{border:1px solid #ccc;width:100%; min-height: 100px;}
.descriptions{font-size: 16px;text-indent: 2em;}
/* 其他输入框 */
.otherInput {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 8px;
    font-size: 14px;
    transition: border 0.2s;
}

.otherInput:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
#footer{  font-size: 14px;text-align: center; }
.copyRight{  text-align: center; line-height: 30px;padding-top: 20px;padding-bottom: 30px;}

#container{background: #fff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);padding:6%;width:80%;margin:5%;}
.siteWith{width:100%!important;}
.subweb_top{display:none;}



#SurveytopBox{text-indent: 2em;}
body{background: url(images/bg.jpg) no-repeat top center; background-color: #dee6fd;background-size:auto 270px;}
#header{height:170px;background: url(images/wz.png) no-repeat center;background-size:100% auto;}

@media (min-width: 760px) {
body{background: url(images/bg.jpg) no-repeat top center; background-color: #dee6fd;}
#header{height:270px;background: url(images/wz.png) no-repeat center;}
#container,.copyRight{width: 920px;margin: 0 auto;padding:30px;}
.subweb_top{display:block; width:100%;}
.siteWith{width:980px!important;margin: 0 auto;}

.submitBtn {
  width: 50%;
}


}



.question-container {
  max-width: 100%; 
  box-sizing: border-box;
}

.question-container ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 10px;
}

.question-container li {
  flex: 0 0 calc(50% - 5px); 
  box-sizing: border-box;
}

.surveyitemoption {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  /*! border: 1px solid #ddd; */
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.surveyitemoption:hover {
  background-color: #f5f5f5;
}

.surveyitemCheck {
  margin-right: 8px;
}

.otherInput {
  margin-left: 8px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

@media (max-width: 480px) {
  .question-container li {
    flex: 0 0 100%;
  }


}