@charset "UTF-8";
/* 颜色 */
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  outline: none;
  font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* custom */
a {
  text-decoration: none;
  color: #000;
}

li {
  list-style: none;
}

body {
  font-family: "Microsoft YaHei";
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  color: #FFF;
}

/* flex 对齐方式 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flex-center-column {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.flex-center-top {
  display: flex;
  justify-content: center;
  align-items: top;
  flex-direction: row;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.flex-space-between-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.flex-space-between-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
}

.flex-space-between-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: row;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.flex-left-column {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.flex-top-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.flex-left-top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
}

.flex-left-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: row;
}

.flex-left-space-between {
  display: flex;
  justify-content: flex-start;
  align-items: space-between;
  flex-direction: row;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}

.flex-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.flex-top-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

.flex-bottom-left {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* 绝对定位 */
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 盒子大小 */
.max {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
}

/* 内外边距 */
.ml-5 {
  margin-left: 5px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.pl-5 {
  padding-left: 5px !important;
}

.pr-5 {
  padding-right: 5px !important;
}

.pt-5 {
  padding-top: 5px !important;
}

.pb-5 {
  padding-bottom: 5px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.pl-15 {
  padding-left: 15px !important;
}

.pr-15 {
  padding-right: 15px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.ml-25 {
  margin-left: 25px !important;
}

.mr-25 {
  margin-right: 25px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

.pl-25 {
  padding-left: 25px !important;
}

.pr-25 {
  padding-right: 25px !important;
}

.pt-25 {
  padding-top: 25px !important;
}

.pb-25 {
  padding-bottom: 25px !important;
}

.ml-30 {
  margin-left: 30px !important;
}

.mr-30 {
  margin-right: 30px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.pl-30 {
  padding-left: 30px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.ml-35 {
  margin-left: 35px !important;
}

.mr-35 {
  margin-right: 35px !important;
}

.mt-35 {
  margin-top: 35px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.pl-35 {
  padding-left: 35px !important;
}

.pr-35 {
  padding-right: 35px !important;
}

.pt-35 {
  padding-top: 35px !important;
}

.pb-35 {
  padding-bottom: 35px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.ml-45 {
  margin-left: 45px !important;
}

.mr-45 {
  margin-right: 45px !important;
}

.mt-45 {
  margin-top: 45px !important;
}

.mb-45 {
  margin-bottom: 45px !important;
}

.pl-45 {
  padding-left: 45px !important;
}

.pr-45 {
  padding-right: 45px !important;
}

.pt-45 {
  padding-top: 45px !important;
}

.pb-45 {
  padding-bottom: 45px !important;
}

.ml-50 {
  margin-left: 50px !important;
}

.mr-50 {
  margin-right: 50px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.pl-50 {
  padding-left: 50px !important;
}

.pr-50 {
  padding-right: 50px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

.ml-55 {
  margin-left: 55px !important;
}

.mr-55 {
  margin-right: 55px !important;
}

.mt-55 {
  margin-top: 55px !important;
}

.mb-55 {
  margin-bottom: 55px !important;
}

.pl-55 {
  padding-left: 55px !important;
}

.pr-55 {
  padding-right: 55px !important;
}

.pt-55 {
  padding-top: 55px !important;
}

.pb-55 {
  padding-bottom: 55px !important;
}

.ml-60 {
  margin-left: 60px !important;
}

.mr-60 {
  margin-right: 60px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.pl-60 {
  padding-left: 60px !important;
}

.pr-60 {
  padding-right: 60px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.ml-65 {
  margin-left: 65px !important;
}

.mr-65 {
  margin-right: 65px !important;
}

.mt-65 {
  margin-top: 65px !important;
}

.mb-65 {
  margin-bottom: 65px !important;
}

.pl-65 {
  padding-left: 65px !important;
}

.pr-65 {
  padding-right: 65px !important;
}

.pt-65 {
  padding-top: 65px !important;
}

.pb-65 {
  padding-bottom: 65px !important;
}

.ml-70 {
  margin-left: 70px !important;
}

.mr-70 {
  margin-right: 70px !important;
}

.mt-70 {
  margin-top: 70px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.pl-70 {
  padding-left: 70px !important;
}

.pr-70 {
  padding-right: 70px !important;
}

.pt-70 {
  padding-top: 70px !important;
}

.pb-70 {
  padding-bottom: 70px !important;
}

.ml-75 {
  margin-left: 75px !important;
}

.mr-75 {
  margin-right: 75px !important;
}

.mt-75 {
  margin-top: 75px !important;
}

.mb-75 {
  margin-bottom: 75px !important;
}

.pl-75 {
  padding-left: 75px !important;
}

.pr-75 {
  padding-right: 75px !important;
}

.pt-75 {
  padding-top: 75px !important;
}

.pb-75 {
  padding-bottom: 75px !important;
}

/* 字体大小 */
.f-12 {
  font-size: 12px !important;
}

.f-12 * {
  font-size: 12px !important;
}

.f-13 {
  font-size: 13px !important;
}

.f-13 * {
  font-size: 13px !important;
}

.f-14 {
  font-size: 14px !important;
}

.f-14 * {
  font-size: 14px !important;
}

.f-15 {
  font-size: 15px !important;
}

.f-15 * {
  font-size: 15px !important;
}

.f-16 {
  font-size: 16px !important;
}

.f-16 * {
  font-size: 16px !important;
}

.f-17 {
  font-size: 17px !important;
}

.f-17 * {
  font-size: 17px !important;
}

.f-18 {
  font-size: 18px !important;
}

.f-18 * {
  font-size: 18px !important;
}

.f-19 {
  font-size: 19px !important;
}

.f-19 * {
  font-size: 19px !important;
}

.f-20 {
  font-size: 20px !important;
}

.f-20 * {
  font-size: 20px !important;
}

.f-21 {
  font-size: 21px !important;
}

.f-21 * {
  font-size: 21px !important;
}

.f-22 {
  font-size: 22px !important;
}

.f-22 * {
  font-size: 22px !important;
}

.f-23 {
  font-size: 23px !important;
}

.f-23 * {
  font-size: 23px !important;
}

.f-24 {
  font-size: 24px !important;
}

.f-24 * {
  font-size: 24px !important;
}

.f-25 {
  font-size: 25px !important;
}

.f-25 * {
  font-size: 25px !important;
}

.f-26 {
  font-size: 26px !important;
}

.f-26 * {
  font-size: 26px !important;
}

.f-27 {
  font-size: 27px !important;
}

.f-27 * {
  font-size: 27px !important;
}

.f-28 {
  font-size: 28px !important;
}

.f-28 * {
  font-size: 28px !important;
}

.f-29 {
  font-size: 29px !important;
}

.f-29 * {
  font-size: 29px !important;
}

.f-30 {
  font-size: 30px !important;
}

.f-30 * {
  font-size: 30px !important;
}

.f-60 {
  font-size: 60px !important;
}

/* 去除边距 */
.no-ml {
  margin-left: 0px !important;
}

/* 宽度 */
.w-100 {
  width: 100%;
}

.w-50 {
  width: 50%;
}

/* 颜色 */
.color-black {
  color: #000000 !important;
}

.color-white {
  color: #FFFFFF !important;
}

.color-base {
  color: #f9557e !important;
}

.color-gray {
  color: #BBBBBB;
}

.color-gray-dark {
  color: gray;
}

.color-placeholder-base::-webkit-input-placeholder {
  color: #f9557e;
}

.color-placeholder-base:-moz-placeholder {
  color: #f9557e;
}

.color-placeholder-base::-moz-placeholder {
  color: #f9557e;
}

.color-placeholder-base:-ms-input-placeholder {
  color: #f9557e;
}

/* 背景颜色 */
.bg-white {
  background-color: #FFF;
}

.bg-base {
  background-color: #f9557e;
}

.bg-xhw {
  background-color: #e93961;
  background-image: url("/static/images/error.png");
  background-position: center center;
  background-repeat: no-repeat;
}

/* 粗体 */
.fw-550 {
  font-weight: 550;
}

/* 手势 */
.pointer {
  cursor: pointer !important;
}

/* 超出部分隐藏 */
.hidden {
  overflow: hidden;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* active */
.active-black {
  position: relative;
}

.active-black::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #000;
  border: inherit;
  border-color: #000;
  border-radius: inherit;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  content: " ";
  z-index: 999;
}

.active-black:active::after {
  opacity: 0.3;
}

/* 底部线条 */
.border-bottom {
  border-bottom: 1px solid #ededed;
}

/* 下划线 */
.underline:hover {
  text-decoration: underline;
}

.underline-base {
  position: relative;
}

.underline-base:hover {
  color: #f9557e;
}

.underline-base:hover::after {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 1px;
  background-color: #f9557e;
  left: 0%;
  bottom: 0%;
}

/* 阴影 */
.base-shadow {
  box-shadow: 0px 0px 5px #BBBBBB;
}

.relative {
  position: relative;
}

.img-loading {
  position: relative;
}

.base-loading-android {
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -18px;
  margin-top: -18px;
  animation: rotate 2s linear infinite;
  transform-origin: center center;
  z-index: 1000;
}

.base-loading-android > circle {
  display: inline-block;
  animation: dash 1500ms ease-in-out infinite;
  stroke-linecap: round;
  color: #e93961;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
  }
  50% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -45;
  }
  100% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -124;
  }
}

.loading {
  position: relative;
}

.loading .base-loading-android {
  visibility: visible;
}

.loading::after {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 800;
  content: ' ';
  opacity: 0.8;
}

.loading-white::after {
  background-color: #FFF;
}

.loading-black::after {
  background-color: #000;
}

.body-loading {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 9999;
}

/* 欣婚网服务热线 */
.contact-tel {
  height: 40px;
  width: 224px;
  cursor: pointer;
}

.contact-tel-content {
  width: 172px;
  color: #F9557E;
  font-size: 17px;
  text-align: left;
  padding-left: 10px;
  align-items: flex-start;
}

.contact-tel-content p,
.contact-tel-content span {
  font-weight: bold;
}

.contact-tel-content .tel-big {
  font-size: 17px;
}

.contact-tel-content .tel-small {
  font-size: 15px;
}

.contact-tel-content .tel-small span {
  font-size: 14px;
}