.message-box{ padding-bottom: 4.1667vw;}
.message-box .top{ height: 50px; line-height: 50px; position: relative; background: #f2f5fa; padding-left: 30px; font-size: 18px; color: #333;}
.message-box .top::before{ content: ""; position: absolute; width: 4px; height: 100%; left: 0; top: 50%; transform: translateY(-50%); background: #005ca2;}
.message-box .top .bz{ font-size: 14px; color: #999; margin-left: 15px; padding-left: 15px; position: relative;}
.message-box .top i{ color: #f00; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.message-box .top span{ font-size: 14px; color: #005ca2; margin-left: 20px;}
.message-box .xx-box{ padding-top: 40px; overflow: hidden; margin-bottom: 16px;}
.message-box .xx-box li{ width: calc( (100% - 6.2%) / 2 ); margin-right: 6.2%; height: 50px; line-height: 50px; display: flex; float: left; margin-bottom: 34px;}
.message-box .xx-box li:nth-child(2n){ margin-right: 0;}
.message-box .xx-box li label:first-child{ margin-bottom: 0; width: 20%; float: left; font-weight: normal; font-size: 14px; color: #333; padding-left: 10px; position: relative;}
.message-box .xx-box li label i{ color: #f00; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.message-box .xx-box li input, .message-box .xx-box li select{ width: auto; padding: 5px; border: 1px solid rgb(199, 199, 199); border-radius: 4px; padding: 0 15px; font-size: 14px; color: #333;}
.message-box li input.long { width:72%; }
.message-box li select.long { width:72%; }

.message-box .yd-box{ padding-top: 40px; overflow: hidden; margin-bottom: 16px;}
.message-box .yd-box li{ width: calc( (100% - 6.2%) / 2 ); margin-right: 6.2%; line-height: 50px; display: flex; float: left; margin-bottom: 34px;}
.message-box .yd-box li:last-child{ width: 100%; margin-right: 0;}
.message-box .yd-box li:nth-child(2n){ margin-right: 0;}
.message-box .yd-box li label{ margin-bottom: 0; font-weight: normal; font-size: 14px; color: #333; position: relative;}
.message-box .yd-box li.mj label{ width: 20%;}
.message-box .yd-box li.xq label{ width: 15%;}
.message-box .yd-box li.lj label{ width: 16%;}
.message-box .yd-box li .box{ flex: 1;}
.message-box .yd-box li .box input{ width: 100%; float: left; height: 50px; border: 1px solid #e5e5e5; border-radius: 4px; font-size: 14px; color: #333; padding: 0 15px; margin-right: 10%;}

.message-box .yd-box li.xq .box button{ width: calc( (100% - 40px) / 3 ); margin-left: 20px; height: 50px; line-height: 50px; background: #eee; color: #666; font-size: 14px; border-radius: 4px; border: none; float: left; position: relative; overflow: hidden;}
.message-box .yd-box li.xq .box b{ font-weight: normal; position: relative; z-index: 1;}
.message-box .yd-box li.xq .box button span{ display: none; position: absolute; z-index: 0; width: 48px; height: 48px; background: #00487f; border-radius: 100%; right: -15px; top: -21px;}
.message-box .yd-box li.xq .box button span i{ width: 20px; height: 20px; line-height: 15px; position: absolute; left: 10px; bottom: 5px;}
.message-box .yd-box li.xq .box button.on{ background: #005ca2; color: #fff;}
.message-box .yd-box li.xq .box button.on span{ display: block;}
.message-box .yd-box li.xq .box button:first-child{ margin-left: 0;}

.message-box .yd-box li.lj .box button{ width: calc( (100% - 100px) / 5 ); margin-left: 25px; height: 50px; line-height: 50px; background: #eee; color: #666; font-size: 14px; border-radius: 4px; border: none; float: left; position: relative; overflow: hidden;}
.message-box .yd-box li.lj .box b{ font-weight: normal; position: relative; z-index: 1;}
.message-box .yd-box li.lj .box button span{ display: none; position: absolute; z-index: 0; width: 48px; height: 48px; background: #00487f; border-radius: 100%; right: -15px; top: -21px;}
.message-box .yd-box li.lj .box button span i{ width: 20px; height: 20px; line-height: 15px; position: absolute; left: 10px; bottom: 5px;}
.message-box .yd-box li.lj .box button.on{ background: #005ca2; color: #fff;}
.message-box .yd-box li.lj .box button.on span{ display: block;}
.message-box .yd-box li.lj .box button:first-child{ margin-left: 0;}

.message-box .btns{ text-align: center; margin-top: 3.91vw;}
.message-box .btns input{ width: 200px; height: 50px; border: none; background: #005ca2; color: #fff; font-size: 16px; border: none; border-radius: 4px;}

@media (max-width:1199px) and (min-width:992px){
  .message-box .xx-box li label{ width: 26%;}
  .message-box .yd-box li.mj label{ width: 25%;}
  .message-box .yd-box li.xq label{ width: 18%;}
  .message-box .yd-box li.lj label{ width: 20%;}
  .message-box .yd-box li:last-child{ display: block;}
  .message-box .yd-box li .box{ width: 100%;}
}

@media (max-width:991px) and (min-width: 768px){
  .message-box{ margin-top: 20px;}
  .message-box .top{ font-size: 14px;}
  .message-box .top span{ font-size: 12px;}
  .message-box .xx-box li{ width: calc( (100% - 3.2%) / 2 ); margin-right: 3.2%;}
  .message-box .xx-box li label{ width: 32%;}
  .message-box .yd-box li{ width: 100%; margin-right: 0; margin-bottom: 20px;}
  .message-box .yd-box li:last-child{ display: block;}
  .message-box .yd-box li.lj label{ width: 100%;}
  .message-box .yd-box li .box{ width: 100%;}
  .message-box .yd-box li.lj .box button{ width: calc( (100% - 75px) / 3 );}
  .message-box .yd-box li.lj .box button:nth-child(3n-2){ margin-left: 0;}
  .message-box .yd-box li.lj .box button:nth-child(-n+3){ margin-bottom: 25px;}
}

@media (max-width: 767px){
  .message-box{ margin-top: 0;}
  .message-box .top{ font-size: 14px; height: auto; line-height: 35px; padding-left: 20px;}
  .message-box .top::before{ width: 2px;}
  .message-box .top span{ font-size: 12px; display: inline-block;}
  .message-box .xx-box{ padding-top: 20px;}
  .message-box .xx-box li{ width: 100%; margin-right: 0; height: auto; line-height: 45px; margin-bottom: 15px;}
  .message-box .xx-box li label:first-child{ width: 32%;}
  /* .message-box .xx-box li input{ height: 45px;} */
  .message-box .yd-box{ padding-top: 20px; margin-bottom: 0;}
  .message-box .yd-box li{ width: 100%; margin-right: 0; margin-bottom: 20px;}
  .message-box .yd-box li:nth-child(2n){ margin-bottom: 5px;}
  .message-box .yd-box li.xq label{ width: 20%;}
  .message-box .yd-box li.xq .box button{ width: calc( (100% - 20px) / 3 ); margin-left: 10px;}
  .message-box .yd-box li.mj label{ width: 28%;}
  .message-box .yd-box li:last-child{ display: block;}
  .message-box .yd-box li.lj label{ width: 100%;}
  .message-box .yd-box li .box{ width: 100%;}
  .message-box .yd-box li.lj .box button{ width: calc( (100% - 10px) / 2 ); margin-left: 10px; margin-top: 10px;}
  .message-box .yd-box li.lj .box button:nth-child(-n+2){ margin-top: 0;}
  .message-box .yd-box li.lj .box button:nth-child(2n-1){ margin-left: 0;}
  .message-box .btns{ margin-top: 25px;}
  .message-box .btns input{ width: 120px; height: 40px; line-height: 40px; font-size: 14px;}
}