@charset "UTF-8";

* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-size: 1.6rem;
}

/* 政策精准推送平台样式 */
.zcjzts-wrapper {
  width: 100%;
  background: url(../images/zcjzts/header_bg.png) center top no-repeat;
  position: relative;
  overflow: hidden;
}

/* 头部样式 */
.zcjzts-header {
  width: 100%;
}

.header-logo {
  display: block;
  width: fit-content;
  height: 90px;
  margin-top: 20px;
}

.header-logo img {
  display: block;
  height: 100%;
}

.header-title {
  text-align: center;
}

/* 内容区域样式 */
/* 搜索框样式 */
.search-box {
  width: calc((840 / 1200) * 100%);
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 4px;
  padding: 10px;
  padding-left: 37px;
  color: #fff;
  display: flex;
  background-color: #fff;
  border: 2px solid rgba(255, 255, 255, 1);
  margin: 0 auto;
}

.search-box input {
  flex: 1;
  height: 100%;
  padding: 0 20px;
  border: none;
  font-size: 16px;
  outline: none;
}

.search-box::before {
  content: '';
  display: block;
  width: 23px;
  height: 24px;
  background: url(../images/zcjzts/search_icon.png) no-repeat center center;
}

.search-btn {
  width: 118px;
  height: 100%;
  background-color: rgba(219, 46, 63, 1);
  border: none;
  font-size: 2.2rem;
  cursor: pointer;
  border-radius: 4px;
  color: #fff;
  font-weight: 400;
}

/* 主内容区样式 */
.zcjzts-main {
  width: 100%;
  margin-top: 108px;
  margin-bottom: 52px;

}

.zcjzts-main-content-box{
  position: relative;
}

.zcjzts-main-content-box::before{
  content: '';
  display: block;
  width: calc(100% - 42px);
  height: calc(100% + 38px);
  background-color: rgba(237, 245, 255, 0.9);
  position: absolute;
  left: 21px;
  bottom: 0;
  border-radius: 10px;
  z-index: 2;
}

.zcjzts-main-content-box::after{
  content: '';
  display: block;
  width: calc(100% - 118px);
  height: calc(100% + 66px);
  background-color: rgba(196, 224, 255, 0.8);
  position: absolute;
  left: 59px;
  bottom: 0;
  border-radius: 10px;
  z-index: 1;
}

.zcjzts-main-content {
  position: relative;
  z-index: 3;
  width: 100%;
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 15px rgba(42, 130, 228, 0.2);
  border-radius: 10px;
  padding: 0 10px 30px 10px;
}
.zcjzts-main-content-container {
  width: 100%;
  display: flex;
  gap: 32px;
  justify-content: space-between;
}

.crumb{
  margin-bottom: 0;
}

/* 左侧表单区域样式 */
.form-area {
  width: 471px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: url(../images/zcjzts/left_bg.png) center top no-repeat;
  background-size: 100% auto;
}
.form-area .padding-box{
  padding: 20px 24px;
  padding-top: 46%;
}

.form-desc {
  margin-bottom: 20px;
  padding: 0 10px;
}

.form-desc p {
  font-size: 1.8rem;
  line-height: 3.5rem;
  color: rgba(35, 108, 194, 1);
  text-indent: 2em;
}

.form-content {
  border: 1px solid rgba(168, 209, 255, 1);
  background: rgba(255, 255, 255, 1);
  width: 100%;
  padding: 55px 25px;
  padding-bottom: 40px;
}

.form-item {
  margin-bottom: 50px;
}

.form-item label {
  display: block;
  margin-bottom: 15px;
  font-size: 2.4rem;
  color: rgba(51, 51, 51, 1);
}

.form-item label .required {
  color: #dd3333;
  margin-right: 2px;
}

.form-item input[type="text"] {
  width: 100%;
  height: 42px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
  outline: none;
}

.verification-code {
  display: flex;
  gap: 10px;
}

.verification-code input {
  flex: 1;
}

.get-code-btn {
  background-color: transparent;
  color: rgba(36, 102, 192, 1);
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
}
.get-code-btn.red{
  color: red;
}

.form-buttons button {
  width: 100%;
  height: 65px;
  font-size: 2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn {
  background-color: #dd3333;
  color: #fff;
  
}

.cancel-btn {
  background-color: #ccc;
  color: #333;
  margin-top: 31px;
}

/* 右侧分类区域样式 */
.category-area {
  flex: 1;
  border-radius: 8px;
}

.category-section {
  margin-bottom: 33px;
}

.category-section:last-child {
  margin-bottom: 0;
}

.category-title {
  position: relative;
  height: 40px;
  line-height: 40px;
  font-size: 2.4rem;
  font-weight: bold;
  padding-left: 24px;
  color: rgba(51, 51, 51, 1);
}

.category-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 21px;
  background-color: rgba(35, 108, 194, 1);
}

.category-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.category-row:last-child {
  margin-bottom: 0;
}

.category-items {
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  gap: 34px 0;
}

.category-item {
  width: 20%;
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  cursor: pointer;
  margin-bottom: 10px;
}

.category-item input[type="checkbox"] {
  appearance: none;
  display: block;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  border: 1px solid rgba(89, 89, 89, 1);
  border-radius: 4px;
  cursor: pointer;
}
.category-item input[type="checkbox"]:checked {
  border: none;
  background: url(../images/zcjzts/checked_icon.png) no-repeat;
  background-size: 100% 100%;
}
.form-tips{margin-top: 10px;}
.form-tips p{color: #cccccc;text-align: center;}

.link-img {margin:30px 0 20px 0;}
.link-img a,.link-img img{display:block;width:100%;height:100%;}
.link-img img{transition: all 0.3s}
.link-img a{overflow:hidden;border-radius: 7px;}
.link-img a:hover img{transform:scale(1.05);}

/* 响应式样式 */
@media (max-width: 1500px) {
  html {
    font-size: 9px;
  }
  
  .form-area {
    width: 400px;
  }
  
  .category-items {
    gap: 32px 0;
  }
  .form-tips p{font-size: 14px;}
}

@media (max-width: 1280px) {
  html {
    font-size: 8px;
  }
  
  .zcjzts-main {
    margin-top: 90px;
  }
  
  .zcjzts-main-content-container {
    gap: 20px;
  }
  
  .form-area {
    width: 350px;
  }
  
  .form-content {
    padding: 40px 20px;
    padding-bottom: 30px;
  }
  
  .form-item {
    margin-bottom: 35px;
  }
  
  .search-box {
    width: calc((900 / 1200) * 100%);
    height: 60px;
  }
  .category-items{
    gap: 12px 0;
  }
  
  .category-item {
    width: 25%;
  }

}

@media (max-width: 992px) {

  .zcjzts-main-content{
    padding: 0 10px 20px 10px;
  }
  .zcjzts-main-content-container {
    flex-direction: column-reverse;
  }
  
  .form-area {
    width: 100%;
    margin-bottom: 0;
    margin-top: 20px;
  }
  
  .search-box {
    width: 100%;
    padding-left: 20px;
  }
  
  .header-logo {
    height: 70px;
  }
  
  .category-item {
    width: 25%;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 9px;
  }
  .zcjzts-main-content-box::before{
    display: none;
  }
  .zcjzts-main-content-box::after{
    display: none;
  }
  
  .zcjzts-main {
    margin-top: 70px;
    margin-bottom: 40px;
  }
  
  .header-logo {
    height: 60px;
  }
  
  
  .form-content {
    padding: 30px 15px;
    padding-bottom: 25px;
  }
  
  .form-item {
    margin-bottom: 25px;
  }
  
  .form-buttons button {
    height: 55px;
  }
  
  .category-item {
    width: 33.33%;
  }
  .form-tips p{font-size: 12px;}
}

@media (max-width: 431px) {
  .zcjzts-wrapper {
    background-size: cover;
  }
  
  .zcjzts-main {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .zcjzts-main-content{
    padding: 20px 10px;
  }
  
  .search-box {
    height: 45px;
    padding: 5px 10px;
  }
  
  .search-btn {
    width: 70px;
    font-size: 1.6rem;
  }
  
  .header-logo {
    height: 50px;
  }
  
  .header-title img {
    max-width: 90%;
  }
  
  .form-area {
    margin-top: 0;
  }
  .form-area .padding-box{
    padding: 0 10px;
    padding-top: 46%;
  }
  .form-item{
    margin-bottom: 20px;
  }
  .form-content {
    padding: 20px 10px;
  }
  
  .form-item label {
    margin-bottom: 10px;
  }
  
  .form-item input[type="text"] {
    height: 36px;
  }
  
  .form-buttons button {
    height: 45px;
  }
  
  .cancel-btn {
    margin-top: 20px;
  }
  
  .category-title {
    font-size: 2rem;
    padding-left: 18px;
  }
  
  .category-title:before {
    height: 16px;
    width: 4px;
  }
  
  .category-item {
    width: 50%;
  }
  
  .category-items {
    margin-top: 20px;
    gap: 15px 0;
  }
  .crumb h2{padding: 9px 5px !important}
  .link-img {margin: 10px 0;}
  .link-img a{border-radius: 0px;}
}

@media (max-width: 361px){
  .search-box input{padding: 0 10px;width: 67%;}
}