/*
 * 复禾健康风格工具类CSS系统
 * 从 template/default/html/index.html 提取
 * 文件：fh21_utils.css
 * 描述：包含所有原子类工具，用于快速构建UI
 */

/* ==================== 重置与基础样式 ==================== */

/* reset.css -----------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,
input, button, textarea, p, blockquote, th, td, header, footer, section, article,
aside, nav, figure, figcaption {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    font-family: "Microsoft Yahei", "Helvetica";
    color: #333333;
}

img {
    border: 0;
    vertical-align: top;
    /*-webkit-touch-callout: none;*/
}

a {
    color: #333333;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

/* form-reset.css -----------------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    background: none;
    outline: none;
}

input, textarea, button {
    border: none;
}

input, button, textarea, select, optgroup, option {
    font: 1rem "Microsoft Yahei", "Helvetica";
}

input[type="button"], input[type="text"], input[type="submit"],
input[type="search"], input[type="tel"], input[type="number"],
select, option, .appNone {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.3);
}

input:-moz-placeholder, textarea:-moz-placeholder,
input::-moz-placeholder, textarea::-moz-placeholder {
    color: rgba(0, 0, 0, 0.3);
}

/* ==================== 工具类 ==================== */

/* 尺寸限制类 */
.mah100 { max-width: 100%; }

/* 图标基础类 */
.icon {
    display: inline-block;
    background-color: transparent;
    background-repeat: no-repeat;
}

/* 垂直居中 */
.VAM:after {
    content: "";
    display: inline-block;
    overflow: hidden;
    height: 100%;
    width: 0;
    font-size: 0;
    vertical-align: middle;
}

/* 文本处理 */
.wbwr {
    word-break: break-all;
    word-wrap: break-word;
}

/* 清除浮动 */
.clr:after, .clr:before {
    content: "";
    display: table;
}
.clr:after {
    clear: both;
}

/* 浮动 */
.fll { float: left; }
.flr { float: right; }

/* 垂直对齐 */
.vam { vertical-align: middle; }
.vat { vertical-align: top; }

/* 显示类型 */
.db { display: block; }
.dib { display: inline-block; }
.none { display: none; }

/* 文本对齐 */
.tar { text-align: right; }
.tac { text-align: center; }

/* 溢出隐藏 */
.ovh { overflow: hidden; }

/* 相对定位 */
.posr { position: relative; }

/* 居中 */
.auto {
    margin-left: auto;
    margin-right: auto;
}

/* 背景色 */
.bw { background-color: #fff; }
.ba { background-color: #fafafa; }

/* ==================== 字体大小 ==================== */
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f26 { font-size: 26px; }
.f28 { font-size: 28px; }
.f30 { font-size: 30px; }
.f32 { font-size: 32px; }
.f40 { font-size: 40px; }
.f48 { font-size: 48px; }
.f44 { font-size: 44px; }

/* ==================== 字体颜色 ==================== */
.fcf { color: #fff; }
.fc0 { color: #000; }
.fc3 { color: #333; }
.fcc { color: #ccc; }
.fc5 { color: #555; }
.fc4 { color: #444; }
.fc6 { color: #666; }
.fc8 { color: #888; }
.fc9 { color: #999; }
.fcb { color: #007cff; }
.fcg { color: #90d54e; }
.fcy { color: #fea900; }

/* 特殊颜色类 */
.green { color: #0bd3c8; }
.yellow { color: #ff0; }
.red { color: red !important; }

/* 字体粗细 */
.fn { font-weight: normal; }

/* 文本溢出省略 */
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ==================== 外边距 Margin ==================== */

/* margin-right */
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; }
.mr40 { margin-right: 40px; }
.mr45 { margin-right: 45px; }
.mr50 { margin-right: 50px; }
.mr55 { margin-right: 55px; }
.mr60 { margin-right: 60px; }
.mr65 { margin-right: 65px; }

/* margin-left */
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.ml35 { margin-left: 35px; }
.ml40 { margin-left: 40px; }
.ml45 { margin-left: 45px; }
.ml50 { margin-left: 50px; }
.ml55 { margin-left: 55px; }
.ml60 { margin-left: 60px; }
.ml65 { margin-left: 65px; }

/* margin-bottom */
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb55 { margin-bottom: 55px; }
.mb60 { margin-bottom: 60px; }
.mb65 { margin-bottom: 65px; }

/* margin-top */
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mt55 { margin-top: 55px; }
.mt60 { margin-top: 60px; }
.mt65 { margin-top: 65px; }

/* ==================== 内边距 Padding ==================== */

/* padding-right */
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr25 { padding-right: 25px; }
.pr30 { padding-right: 30px; }
.pr35 { padding-right: 35px; }
.pr40 { padding-right: 40px; }
.pr45 { padding-right: 45px; }
.pr50 { padding-right: 50px; }
.pr55 { padding-right: 55px; }
.pr60 { padding-right: 60px; }
.pr65 { padding-right: 65px; }

/* padding-left */
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pl35 { padding-left: 35px; }
.pl40 { padding-left: 40px; }
.pl45 { padding-left: 45px; }
.pl50 { padding-left: 50px; }
.pl55 { padding-left: 55px; }
.pl60 { padding-left: 60px; }
.pl65 { padding-left: 65px; }

/* padding-bottom */
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb25 { padding-bottom: 25px; }
.pb30 { padding-bottom: 30px; }
.pb35 { padding-bottom: 35px; }
.pb40 { padding-bottom: 40px; }
.pb45 { padding-bottom: 45px; }
.pb50 { padding-bottom: 50px; }
.pb55 { padding-bottom: 55px; }
.pb60 { padding-bottom: 60px; }
.pb65 { padding-bottom: 65px; }

/* padding-top */
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt40 { padding-top: 40px; }
.pt45 { padding-top: 45px; }
.pt50 { padding-top: 50px; }
.pt55 { padding-top: 55px; }
.pt60 { padding-top: 60px; }
.pt65 { padding-top: 65px; }

/* ==================== 边框 ==================== */
.bb1-dashed { border-bottom: 1px dashed #e5e5e5; }
.br1-dashed { border-right: 1px dashed #eee; }
.bb1 { border-bottom: 1px solid #c1c1c1; }

/* ==================== 变换效果 ==================== */
.isc {
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}

/* ==================== 悬停效果 ==================== */
.a-hover:hover, a:hover {
    color: #007cff;
}

.img-hover {
    -webkit-transition: 1s;
    transition: 1s;
}

.img-hover:hover {
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}

.imgs-hover:hover {
    -webkit-transform: scale(1.4, 1.4);
    -ms-transform: scale(1.4, 1.4);
    transform: scale(1.4, 1.4);
}

.opacity-hover:hover {
    opacity: 0.8;
}

/* ==================== 多行文本省略 ==================== */
.hidden2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hidden3 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ==================== 光标样式 ==================== */
.cp { cursor: pointer; }

/* ==================== 尺寸类 ==================== */
.w1200 { width: 1200px; margin: 0 auto; }
.h100 { height: 100%; }
.w100 { width: 100%; }
.w680 { width: 680px; }
.w870 { width: 870px; }
.w300 { width: 300px; }
.w160 { width: 160px; }

/* ==================== 其他工具类 ==================== */
.mb-20 { margin-bottom: 20px; }
.pt-30 { padding-top: 30px; }

/* ==================== 特殊样式 ==================== */
.eye {
    padding-left: 20px;
    background: url(../images/eye.png) no-repeat left;
}

.jksd {
    background-color: #f4f5f6;
}

.loading span {
    padding-right: 20px;
    background: url('data:image/gif;base64,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') no-repeat right;
}

/* ==================== 内容详情样式 ==================== */
.commonContentDetailStyle .commonH1Style {
    font-size: 36px !important;
    line-height: 56px !important;
    font-weight: bold !important;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonPStyle {
    font-size: 16px;
    line-height: 32px;
    text-indent: 0;
}

.commonContentDetailStyle .commonDetailBodyStyle strong {
    font-weight: bold;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonPStyle p {
    margin-bottom: 20px;
    text-indent: 0;
}

.commonContentDetailStyle .commonDetailBodyStyle h2 {
    margin-bottom: 10px;
    margin-top: 44px;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    padding-left: 15px;
    position: relative;
    height: auto !important;
}

.commonContentDetailStyle .commonDetailBodyStyle h3 {
    margin-bottom: 10px;
    margin-top: 34px;
    line-height: 32px;
    font-size: 20px;
    font-weight: bold;
    color: #6798FC;
}

.commonContentDetailStyle .commonDetailBodyStyle h2:before {
    position: absolute;
    left: 0;
    top: 4px;
    width: 5px;
    height: 24px;
    content: '';
    border-radius: 2px;
    background-color: #6798FC;
}

.commonContentDetailStyle .commonDetailBodyStyle h4,
.commonContentDetailStyle .commonDetailBodyStyle h5,
.commonContentDetailStyle .commonDetailBodyStyle h6 {
    margin-bottom: 10px;
    margin-top: 30px;
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
    color: #666;
}

.commonContentDetailStyle .commonDetailBodyStyle img {
    display: block;
    margin: 28px auto;
    max-width: 70%;
    border-radius: 12px;
}

/* 表格样式 */
.commonContentDetailStyle .commonDetailBodyStyle.commonTable table {
    margin: 28px 0;
    text-align: left;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border-bottom: 1px solid #DCE0E7;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table caption {
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table td,
.commonContentDetailStyle .commonDetailBodyStyle.commonTable table th {
    border: 1px solid #DCE0E7;
    border-left: 0;
    border-bottom: none;
    padding: 12px 20px;
    line-height: 24px;
    font-size: 16px;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table td:first-child {
    border-left: 1px solid #DCE0E7;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table th:last-child {
    border-right: none;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table thead th {
    border-top: none;
    color: #fff;
    font-weight: bold;
    background: #6798FC;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table thead th:first-child {
    border-radius: 12px 0 0 0;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table thead th:last-child {
    border-radius: 0 12px 0 0;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table tbody tr:nth-child(odd) {
    background: #F6F7FA;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table tbody td:first-child,
.commonContentDetailStyle .commonDetailBodyStyle.commonTable table th:first-child {
    text-align: center;
}

.commonContentDetailStyle .commonDetailBodyStyle.commonTable table tfoot td {
    color: #666;
    text-align: center;
}

/* 列表样式 */
.commonContentDetailStyle .commonUlStyle ul,
.commonContentDetailStyle .commonUlStyle ol,
.commonContentDetailStyle .commonUlStyle dl,
.commonContentDetailStyle .commonUlStyle dt,
.commonContentDetailStyle .commonUlStyle dd,
.commonContentDetailStyle .commonUlStyle li {
    list-style: initial;
}

.commonContentDetailStyle .commonUlStyle ul,
.commonContentDetailStyle .commonUlStyle ol,
.commonContentDetailStyle .commonUlStyle dl {
    padding-left: 20px;
}

/* ==================== 内容提示样式 ==================== */
.commonContentTipsStyle {
    line-height: 22px;
    font-size: 14px;
    color: #999;
}

/* ==================== 间距工具类 ==================== */
.mar-b5{ margin-bottom:5px; }
.pad-b5{ padding-bottom:5px; }
.pad-t5{ padding-top:5px; }
.mar-b10{ margin-bottom:10px; }
.pad-b10{ padding-bottom:10px; }
.pad-b15{ padding-bottom:15px; }
.pad-t10{ padding-top:10px; }
.pad-t15{ padding-top:15px; }
.pad-r10{ padding-right:10px; }
.pad-r15{ padding-right:15px; }
.pad-l10{ padding-left:10px; }
.pad-l15{ padding-left:15px; }
.mar-r10{ margin-right:10px; }
.mar-r15{ margin-right:15px; }
.mar-l10{ margin-left:10px; }
.mar-l15{ margin-left:15px; }