﻿@charset "UTF-8";
.bg {
  background-color: #f5f5f5;
  padding-bottom: 90px;
}

/* 设置滚动条的样式 */
.scroll {
  overflow: auto;
  overflow-x: hidden;
}

.scroll::-webkit-scrollbar {
  width: 6px;
}

/* 滚动槽 */
.scroll::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    */
  border-radius: 3px;
}

/* 滚动条滑块 */
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.center-box {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.mt20 {
  margin-top: 20px;
}

.f-shadow {
  -webkit-box-shadow: 0px 3px 9.2px 0.8px rgba(177, 177, 177, 0.1);
  box-shadow: 0px 3px 9.2px 0.8px rgba(177, 177, 177, 0.1);
}

/* 步骤 */
.step-box {
  background-color: #fff;
  /* 最后一步成功操作时的样式 */
}

.step-box.three-steps .step-item {
  width: 33.3333%;
}

.step-box.four-steps .step-item {
  width: 25%;
}

.step-box .step-item {
  position: relative;
  float: left;
  /* 当前步骤时的样式 */
}

.step-box .step-item .cot-box {
  height: 58px;
  text-align: center;
  font-size: 0;
}

.step-box .step-item .cot-box i.num {
  display: inline-block;
  vertical-align: 0;
  width: 28px;
  height: 28px;
  font-size: 18px;
  background: url("../images/i-steps.png") no-repeat 0 0;
  margin-right: 10px;
  color: #999;
  line-height: 28px;
  font-style: normal;
}

.step-box .step-item .cot-box span {
  font-size: 20px;
  color: #999;
  line-height: 58px;
}

.step-box .step-item .arrow {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background: url("../images/steps-arrow.png") no-repeat center;
}

.step-box .step-item.on .cot-box {
  margin-right: 20px;
  background-color: #1b8bff;
}

.step-box .step-item.on .cot-box i.num {
  color: #fff;
  background-position-y: -28px;
}

.step-box .step-item.on .cot-box span {
  color: #fff;
}

.step-box .step-item.on .arrow {
  display: block;
}

/*.step-box.success .cot-box i.num {*/
  /*color: transparent;*/
  /*background-position-y: -56px;*/
/*}*/
.step-item.success .cot-box i.num {
  color: transparent;
  background-position-y: -56px;
}

/*.step-box.success .cot-box span {*/
  /*color: #3ad53a;*/
/*}*/
.step-item.success .cot-box span {
  color: #3ad53a;
}

/* 表单 */
.f-box {
  background-color: #fff;
  /* 两列 */
}

.f-box .f-hd {
  height: 49px;
  line-height: 49px;
  padding: 0 20px;
  font-size: 18px;
  color: #666;
  border-bottom: 1px solid #ddd;
}

.f-box .f-tab {
  width: 278px;
  height: 36px;
  border: 1px solid #0c6bcd;
  border-radius: 3px;
  margin: 20px auto 0 auto;
}

.f-box .f-tab .tab-item {
  cursor: pointer;
  float: left;
  width: 139px;
  height: 100%;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  color: #0c6bcd;
}

.f-box .f-tab .tab-item.on {
  background-color: #0c6bcd;
  color: #fff;
}

.f-box .f-bd {
  padding: 15px 0;
}

.f-box .f-bd .f-item {
  padding: 15px 0;
  /* 表单正确时的提示 */
  /* 表单错误时的提示 */
}

.f-box .f-bd .f-item .l-txt {
  float: left;
  width: 300px;
  line-height: 34px;
  text-align: right;
  font-size: 14px;
  color: #333;
}

.f-box .f-bd .f-item .l-txt span {
  font-size: 12px;
  color: #ff0000;
}

.f-box .f-bd .f-item .r-state {
  float: right;
  width: 306px;
  height: 34px;
  line-height: 34px;
  text-align: left;
}

.f-box .f-bd .f-item .r-state .alert i {
  display: none;
  float: left;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-top: 9px;
  margin-right: 6px;
  background: url("../images/allbg.png") -246px -152px no-repeat;
}

.f-box .f-bd .f-item .r-state .alert span {
  float: left;
  display: none;
  font-size: 12px;
  color: #ec594a;
}

.f-box .f-bd .f-item .r-state .psw-strength span {
  display: inline-block;
  width: 40px;
  height: 8px;
  border-radius: 2px;
  background-color: #ddd;
}

.f-box .f-bd .f-item .r-state .psw-strength span.on {
  background-color: #76c141;
}

.f-box .f-bd .f-item .input-box {
  position: relative;
  width: 365px;
  margin: 0 auto;
  /* 文本输入框的样式 */
  /* 选择框的样式 */
  /* checkbox样式 */
  /* textarea的样式 */
}

.f-box .f-bd .f-item .input-box .text-input {
  box-sizing: content-box;
  display: block;
  width: 343px;
  height: 32px;
  padding: 0 10px;
  line-height: 32px;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  background-color: transparent;
  border-radius: 3px;
  /* 验证码的样式 */
  /* 手机验证码的样式 */
}

.f-box .f-bd .f-item .input-box .text-input.code-input {
  float: left;
  width: 223px;
}

.f-box .f-bd .f-item .input-box .text-input.phonecode-input {
  float: left;
  width: 193px;
}

.f-box .f-bd .f-item .input-box .select-box {
  position: relative;
  float: left;
  cursor: pointer;
}

.f-box .f-bd .f-item .input-box .select-box.w154 {
  width: 154px;
  margin-left: 13px;
}

.f-box .f-bd .f-item .input-box .select-box.w154:first-child {
  margin-left: 0;
}

.f-box .f-bd .f-item .input-box .select-box span.fn-text {
  display: block;
  margin-right: 11px;
  color: #333;
}

.f-box .f-bd .f-item .input-box .select-box.spreaded .select-arrow {
  background-position-y: -6px;
}

.f-box .f-bd .f-item .input-box .select-box .select-arrow {
  position: absolute;
  right: 10px;
  top: 14px;
  width: 11px;
  height: 6px;
  background: url("../images/i-select-arrow.png") no-repeat 0 0;
}

.f-box .f-bd .f-item .input-box .select-box .cot-list {
  display: none;
  position: absolute;
  z-index: 99;
  left: -1px;
  top: 36px;
  width: 100%;
  height: 136px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.f-box .f-bd .f-item .input-box .select-box .cot-list li {
  display: block;
  line-height: 100%;
  padding: 10px;
  color: #666;
}

.f-box .f-bd .f-item .input-box .select-box .cot-list li:hover {
  color: #666;
  background-color: #eee;
}

.f-box .f-bd .f-item .input-box .check-radio-box {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 34px;
  margin-right: 28px;
  font-size: 14px;
  color: #333;
}

.f-box .f-bd .f-item .input-box .check-radio-box.checked i.i-c {
  background-position-y: -18px;
}

.f-box .f-bd .f-item .input-box .check-radio-box.checked i.i-r {
  background-position-y: -16px;
}

.f-box .f-bd .f-item .input-box .check-radio-box i {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -3px;
}

.f-box .f-bd .f-item .input-box .check-radio-box i.i-c {
  width: 18px;
  height: 18px;
  background: url("../images/i-checkbox.png") no-repeat 0 0;
}

.f-box .f-bd .f-item .input-box .check-radio-box i.i-r {
  width: 16px;
  height: 16px;
  background: url("../images/i-radio.png") no-repeat 0 0;
}

.f-box .f-bd .f-item .input-box .check-radio-box .input-r-c {
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
  position: absolute;
  left: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
}

.f-box .f-bd .f-item .input-box .check-radio-box .input-r-c.input-checkbox {
  top: 8px;
  width: 18px;
  height: 18px;
}

.f-box .f-bd .f-item .input-box .check-radio-box .input-r-c.input-radio {
  top: 9px;
  width: 16px;
  height: 16px;
}

.f-box .f-bd .f-item .input-box .input-textarea {
  width: 343px;
  font-size: 14px;
  color: #333;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.f-box .f-bd .f-item .input-box .code-box {
  float: left;
  width: 108px;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-left: 10px;
  cursor: pointer;
}

.f-box .f-bd .f-item .input-box .phonecode-box {
  float: left;
  width: 138px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-left: 10px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  background-color: #f5f5f5;
}

.f-box .f-bd .f-item .input-box .phonecode-box:hover {
  background-color: #eee;
}

.f-box .f-bd .f-item .input-box .reg-btn {
  display: block;
  width: 120px;
  height: 36px;
  background-color: #0c6bcd;
  color: #fff;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  border-radius: 3px;
}

.f-box .f-bd .f-item .input-box .reg-btn:hover {
  background-color: #1b8bff;
}

.f-box .f-bd .f-item .input-box .add-infor {
  padding: 0 10px;
  font-size: 14px;
  line-height: 100%;
  color: #999;
  margin-top: 10px;
}

.f-box .f-bd .f-item.correct .r-state .alert i {
  display: block;
}

.f-box .f-bd .f-item.error .input-box .text-input {
  border-color: #ff0000;
}

.f-box .f-bd .f-item.error .r-state .alert i {
  display: block;
  background-position-y: -136px;
}

.f-box .f-bd .f-item.error .r-state .alert span {
  display: block;
}

.f-box .f-bd .f-item .paper-box {
  float: left;
  width: 500px;
  margin-left: 20px;
}

.f-box .f-bd .f-item .paper-box .paper-img-box img {
  display: block;
}

.f-box .f-bd .f-item .paper-box .paper-img-box .img-txt {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.f-box .f-bd .f-item .paper-box .paper-info {
  width: 385px;
}

.f-box .f-bd .f-item .paper-box .paper-info p {
  font-size: 14px;
  color: #999;
}

.f-box .f-bd .f-item .paper-box .paper-info .form-border-btn {
  position: relative;
  display: inline-block;
  padding: 8px 15px;
  border-radius: 3px;
  border: 1px solid #0c6bcd;
  color: #0c6bcd;
  line-height: 100%;
  margin-top: 10px;
}

.f-box .f-bd .f-item .paper-box .paper-info .form-border-btn:hover {
  color: #fff;
  background-color: #0c6bcd;
}

.f-box .f-bd .f-item .paper-box .paper-info .form-border-btn input {
  position: absolute;
  width: 88px;
  height: 32px;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
  filter: alpha(opacity=0);
}

.f-box .f-bd .f-item .paper-box .paper-info .chose-file {
  display: inline-block;
  margin-left: 12px;
}

.f-box .f-bd .f-item .paper-box .paper-info .chose-file i {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url("../images/allbg.png") -246px -152px no-repeat;
}

.f-box .f-bd .f-item .paper-box .paper-info .chose-file span {
  font-size: 14px;
  color: #999;
}

.f-box .f-bd .f-item .add-adjunct {
  float: left;
  width: 500px;
  margin-left: 20px;
}

.f-box .f-bd .f-item .add-adjunct .add-btn {
  position: relative;
  font-size: 14px;
  color: #999;
}

.f-box .f-bd .f-item .add-adjunct .add-btn i {
  display: inline-block;
  vertical-align: -3px;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: url("../images/i-add.png") no-repeat center;
}

.f-box .f-bd .f-item .add-adjunct .add-btn input {
  position: absolute;
  width: 84px;
  height: 20px;
  left: 0;
  top: 0;
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
  filter: alpha(opacity=0);
}

.f-box .f-bd .f-item .add-adjunct .adj-list {
  padding: 12px 0;
}

.f-box .f-bd .f-item .add-adjunct .adj-list a {
  display: block;
  color: #333;
  padding: 12px 0;
}

.f-box .f-bd .f-item .add-adjunct .adj-list a i {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 14px;
  margin-right: 6px;
  background: url("../images/i-adj.png") no-repeat 0 0;
}

.f-box .f-bd .f-item .add-adjunct .adj-list a span {
  display: none;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background: url("../images/i-close14x14.png") no-repeat center;
}

.f-box .f-bd .f-item .add-adjunct .adj-list a:hover {
  color: #1b8bff;
}

.f-box .f-bd .f-item .add-adjunct .adj-list a:hover i {
  background-position-y: -14px;
}

.f-box .f-bd .f-item .add-adjunct .adj-list a:hover span {
  display: inline-block;
}

.f-box.two-lines .f-bd {
  *zoom: 1;
}

.f-box.two-lines .f-bd:after {
  display: table;
  content: "";
  line-height: 0;
  clear: both;
}

.f-box.two-lines .f-item {
  position: relative;
  float: left;
  width: 445px;
}

.f-box.two-lines .f-item .l-txt {
  width: 160px;
}

.f-box.two-lines .f-item .input-box {
  position: relative;
  width: 240px;
  margin-left: 170px;
}

.f-box.two-lines .f-item .input-box .text-input {
  width: 218px;
}

.f-box.two-lines .f-item .input-box .add-infor {
  position: absolute;
  bottom: -20px;
}

.f-box.two-lines .f-item .input-box .check-radio-box {
  margin-right: 20px;
}

.f-box.two-lines .f-item .input-box .select-box.w154 {
  width: 88px;
}

.f-box.two-lines .f-item .input-box .input-textarea {
  width: 665px;
}

.f-box.two-lines .f-item .r-state {
  width: 25px;
}

.f-box.two-lines .f-item.error .r-state {
  position: absolute;
  width: 240px;
  bottom: -15px;
  left: 170px;
}

.f-submit {
  position: fixed;
  width: 100%;
  height: 69px;
  left: 0;
  bottom: 0;
  -webkit-box-shadow: 0px -3px 10.12px 0.88px rgba(212, 212, 212, 0.22);
  box-shadow: 0px -3px 10.12px 0.88px rgba(212, 212, 212, 0.22);
  border-top: 1px solid #cccc;
  background-color: #fff;
  text-align: center;
}

.f-submit .f-check-btn {
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  height: 36px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 36px;
  color: #fff;
  margin-top: 17px;
  cursor: pointer;
  background-color: #0c6bcd;
}

.f-submit .f-check-btn:hover {
  background-color: #1b8bff;
}

.f-submit .f-reset-btn {
  display: inline-block;
  vertical-align: middle;
  width: 118px;
  height: 34px;
  color: #999;
  margin-top: 17px;
  line-height: 34px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-left: 26px;
}

.f-submit .f-reset-btn:hover {
  color: #1b8bff;
  border-color: #1b8bff;
}
.ship-box {
  position: relative;
  border: 1px solid #ccc;
  height: 54px;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
}

.ship-box.on {
  border-color: #1b8bff;
}

.ship-box.on .icon-bottom-check {
  background-position-y: -30px;
}

.ship-box .mt8 {
  margin-top: 8px;
}

.ship-box img {
  display: block;
  margin-right: 25px;
}

.ship-box .name {
  font-size: 14px;
  color: #333;
}

.ship-box .idcard {
  font-size: 12px;
  color: #333;
}

.ship-box .idcard span {
  margin-left: 8px;
}

.ship-box .icon-bottom-check {
  position: absolute;
  width: 34px;
  height: 30px;
  right: -1px;
  bottom: -1px;
  background: url("../images/icon-check-bottom.png") no-repeat 0 0;
}

.ship-box .edit {
  position: absolute;
  color: #1b8bff;
  right: 12px;
  top: 8px;
}

.ship-box .edit:hover {
  text-decoration: underline;
}

.add-ship-btn {
  color: #999;
  cursor: pointer;
  margin-top: 10px;
}

.add-ship-btn i {
  display: inline-block;
  vertical-align: -3px;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: url(../images/i-add.png) no-repeat center;
}

.twice-chose {
  text-align: center;
  font-size: 0;
  padding: 10px 0;
}

.twice-chose .ship-box {
  display: inline-block;
  text-align: left;
  width: 363px;
  height: 74px;
  margin: 0 10px;
}

.twice-chose .ship-box .ship-tit {
  font-size: 16px;
  color: #333;
  margin-top: 4px;
}

.twice-chose .ship-box .ship-tit span {
  display: inline-block;
}

.twice-chose .ship-box .sign {
  padding: 0 6px;
  height: 22px;
  line-height: 22px;
  border-radius: 3px;
  background-color: #ff8150;
  font-size: 12px;
  color: #fff;
  margin-left: 4px;
}

.twice-chose .desc-txt {
  font-size: 14px;
  color: #999;
}

.reminder-wrap {
  padding: 0 40px;
}

.reminder-wrap .reminder {
  position: relative;
  border-radius: 5px;
  background-color: #f2f8ff;
  border: 1px solid #b9dbff;
  padding: 10px 60px 10px 36px;
  color: #666;
}

.reminder-wrap .reminder a {
  color: #1b8bff;
}

.reminder-wrap .reminder .icon-remind {
  position: absolute;
  left: 12px;
  top: 13px;
  width: 16px;
  height: 16px;
  background: url("../images/icon-remind.png") no-repeat center;
}

.reminder-wrap .reminder .icon-close {
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 10px;
  width: 11px;
  height: 11px;
  background: url("../images/icon-close.png");
}

.reminder-wrap .reminder .icon-close:hover {
  background-position-y: -11px;
}
