/* 通用样式 */

/* 重置所有元素的外边距和内边距 */
* {
    margin: 0;
    padding: 0;
    text-shadow: none;
    /* 使用边框盒模型 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 重置常见元素的边框和列表样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td,
img {
    border: medium none;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* 设置 body 和一些表单元素的字体 */
body,
button,
input,
select,
textarea {
    font: 12px/1.5 Microsoft Yahei, Arial;
}

/* 设置一些 HTML5 元素的显示方式为块级元素 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/* 设置标题元素的字体大小为原始大小 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

/* 去除 em 元素的斜体样式 */
em {
    font-style: normal;
}

/* 限制图片的最大高度和宽度为 100%，去除边框 */
img {
    max-height: 100%;
    max-width: 100%;
    border: none;
}

/* 重置无序列表和有序列表的样式 */
ul,
ol,
li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* 设置字体粗细，可以是具体数值或关键字 */
{
    font-weight: 100 - 900 | bold | bolder | lighter | normal;
}

/* 链接样式 */

/* 去除未访问链接的下划线 */
a,
a:link {
    text-decoration: none;
}

/* 当链接被激活或悬停时，去除下划线 */
a:active,
a:hover {
    text-decoration: none;
}

/* 当链接获得焦点时，去除轮廓线 */
a:focus {
    outline: none;
}

/* 清除浮动样式 */

/* 清除左右浮动 */
.clear {
    clear: both;
}

/* 使输入框和图片垂直居中对齐 */
input,
img {
    vertical-align: middle;
}

/* 设置 body 的样式 */
body {
    font-size: 0.3rem;
    height: auto;
    margin: 0 auto;
    max-width: 750px;
    width: 100%;
    min-width: 320px;
    background: #fff!important;
}

/* 左浮动类 */
.fl {
    float: left;
}

/* 右浮动类 */
.fr {
    float: right;
}

/* 宽度为 94%，左外边距为 3%，左浮动 */
.w94 {
    width: 94%;
    margin-left: 3%;
    float: left;
}

/* 宽度为 100% */
.w100 {
    width: 100%;
}

/* 高度为 1 像素，宽度为 100% */
.h1 {
    height: 1px;
    width: 100%;
}

/* 高度为 10 像素，宽度为 100%，左浮动 */
.h10 {
    height: 10px;
    width: 100%;
    float: left;
}

/* 高度为 0.2 rem，宽度为 100%，左浮动 */
.h20 {
    height:.2rem;
    width: 100%;
    float: left;
}

/* 高度为 0.5 rem，宽度为 100%，左浮动 */
.h50 {
    height:.5rem;
    width: 100%;
    float: left;
}

/* 类名为 img_w 的元素中的图片宽度为 100% */
.img_w img {
    width: 100%;
}

/* 文本居中对齐类 */
.txt_c {
    text-align: center;
}

/* 文本左对齐类 */
.txt_l {
    text-align: left;
}

/* 文本首行缩进 2em 类 */
.txt_i {
    text-indent: 2em;
}

/* 文本右对齐类 */
.txt_r {
    text-align: right;
}

/* 字体加粗类 */
.font_w {
    font-weight: bold;
}

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

/* 绝对定位类 */
.pa {
    position: absolute;
}

/* 颜色为白色的类 */
.col_fff {
    color: #fff;
}

/* 颜色为特定灰色的类 */
.col_h {
    color: #595757;
}

/* 颜色为蓝色的类 */
.col_blue {
    color: #214798;
}

/* 大写文本类 */
.font_big {
    text-transform: uppercase;
}

/* 头部样式 */

/* 头部容器样式，宽度 100%，文本居中 */
header {
    width: 100%;
    text-align: center;
}

/* 头部中的图片样式，宽度 2.4rem，上下内边距为 0.15rem */
header img {
    width: 2.4rem;
    padding:.15rem 0;
}

/* 横幅样式 */
.banner {
    width: 100%;
    height: 3.86rem;
    background: #0d0012 url(banner04.png) no-repeat right top;
    background-size:.85rem;
    text-align: center;
}

/* 横幅中的一个元素样式，宽度 5.35rem，上下内边距和外边距特定设置 */
.banner1 {
    width: 5.35rem;
    padding:.56rem 0.35rem;
    margin: 0 auto;
}

/* 另一个横幅元素样式，宽度 4.29rem，有动画效果，底部内边距特定设置 */
.banner2 {
    width: 4.29rem;
    margin: 0 auto;
    /* 定义动画 */
    -webkit-animation: banner2 1.4s infinite ease-in-out;
    padding-bottom:.35rem;
}

/* 定义 banner2 的关键帧动画 */
@-webkit-keyframes banner2 {
    0% {
        width: 4.29rem;
        padding-bottom:.35rem;
    }

    25% {
        width: 4rem;
        padding-bottom:.39rem;
    }

    50% {
        width: 4.29rem;
        padding-bottom:.35rem;
    }

    75% {
        width: 4rem;
        padding-bottom:.39rem;
    }

    100% {
        width: 4.29rem;
        padding-bottom:.35rem;
    }
}

/* 另一个横幅元素样式，宽度 5.35rem，相对定位 */
.banner3 {
    width: 5.35rem;
    margin: 0 auto;
    position: relative;
}

/* 横幅中的小图标样式 */
.b1,
.b2,
.b3,
.b4 {
    background: url(right.png) no-repeat;
    background-size:.25rem;
    position: absolute;
    top: -.05rem;
    width:.25rem;
    height:.23rem;
}

/* 第一个小图标动画 */
.b1 {
    left:.05rem;
    animation: b1 2.2s infinite ease-in-out;
}

/* 定义 b1 的关键帧动画 */
@keyframes b1 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 第二个小图标动画 */
.b2 {
    left: 1.7rem;
    animation: b2 2.2s infinite ease-in-out;
}

/* 定义 b2 的关键帧动画 */
@keyframes b2 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 第三个小图标动画 */
.b3 {
    left: 2.9rem;
    animation: b3 2.2s infinite ease-in-out;
}

/* 定义 b3 的关键帧动画 */
@keyframes b3 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 第四个小图标动画 */
.b4 {
    left: 4.4rem;
    animation: b4 2.2s infinite ease-in-out;
}

/* 定义 b4 的关键帧动画 */
@keyframes b4 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 导航样式 */

/* 导航容器样式，特定外边距，使用 flex 布局，左右间距均匀，垂直居中 */
.nav {
    margin:.5rem.67rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 导航列表样式，文本颜色特定设置 */
.nav_list {
    color: #333333;
}

/* 导航中的图标样式，特定宽度、高度、左浮动、右边距 */
.nav_img1,
.nav_img2,
.nav_img3,
.nav_img4 {
    width:.37rem;
    height:.5rem;
    float: left;
    margin-right:.1rem;
}

/* 第一个导航图标背景样式，特定图片路径、居中重复、背景大小 */
.nav_img1 {
    background: url(ico01.png) no-repeat center center;
    background-size:.37rem;
}

/* 第二个导航图标背景样式，特定图片路径、居中重复、背景大小 */
.nav_img2 {
    background: url(ico02.png) no-repeat center center;
    background-size:.37rem;
}

/* 第三个导航图标背景样式，特定图片路径、居中重复、背景大小 */
.nav_img3 {
    background: url(ico03.png) no-repeat center center;
    background-size:.37rem;
}

/* 第四个导航图标背景样式，特定图片路径、居中重复、背景大小 */
.nav_img4 {
    background: url(ico04.png) no-repeat center center;
    background-size:.37rem;
}

/* 导航右侧标题容器样式，左浮动、文本居中 */
.nav_r_tit {
    float: left;
    text-align: center;
}

/* 导航右侧标题中的 span 元素样式，特定字体大小 */
.nav_r_tit span {
    font-size:.2rem;
}

/* 导航右侧标题中的 p 元素样式，特定字体大小、大写转换 */
.nav_r_tit p {
    font-size:.12rem;
    text-transform: uppercase;
}
/*植发项目*/

/* 植发项目容器样式 */
.zf_xm {
    /* 设置背景图片并重复显示 */
    background: url(bg_bg_03.jpg) repeat;
    /* 设置内边距 */
    padding:.3rem.88rem;
    /* 宽度为 100% */
    width: 100%;
    /* 左浮动 */
    float: left;
}

/* 植发项目标题样式 */
.zf_tit {
    /* 设置字体大小 */
    font-size:.36rem;
    /* 设置字体加粗 */
    font-weight: bold;
    /* 宽度为 100% */
    width: 100%;
    /* 文本居中对齐 */
    text-align: center;
    /* 设置底部内边距 */
    padding-bottom:.4rem;
    /* 设置文本颜色 */
    color: #333333;
}

/* 植发项目列表样式 */
.zf_xm ul {
    /* 使用 flex 布局 */
    display: flex;
    /* 项目之间均匀分布 */
    justify-content: space-between;
    /* 垂直居中对齐 */
    align-items: center;
    /* 允许项目换行 */
    flex-wrap: wrap;
}

/* 植发项目列表中的 li 元素样式 */
.zf_xm ul li {
    /* 设置底部外边距 */
    margin-bottom:.25rem;
}

/* 植发项目列表中的图片样式 */
.zf_xm ul li img {
    /* 设置宽度 */
    width: 1.71rem;
}

/* 植发项目列表中的文字样式 */
.zf_xm ul li p {
    /* 宽度为 100% */
    width: 100%;
    /* 文本居中对齐 */
    text-align: center;
    /* 设置字体大小 */
    font-size:.28rem;
    /* 设置文本颜色 */
    color: #333333;
    /* 设置顶部外边距 */
    margin-top:.1rem;
    /* 设置字体粗细 */
    font-weight: 350;
}

/* 品牌样式 */

/* 品牌容器样式 */
.pinpai {
    /* 宽度为 100% */
    width: 100%;
    /* 左浮动 */
    float: left;
}

/* 品牌标题样式 */
.pinpai p {
    /* 宽度为 100% */
    width: 100%;
    /* 文本居中对齐 */
    text-align: center;
    /* 设置字体大小 */
    font-size:.36rem;
    /* 设置字体加粗 */
    font-weight: bold;
    /* 设置顶部、底部和左边距 */
    margin:.5rem 0.15rem 0;
    /* 左浮动 */
    float: left;
}

/* 品牌内容样式 */
.pinpai div {
    /* 宽度为 100% */
    width: 100%;
    /* 文本居中对齐 */
    text-align: center;
    /* 设置字体大小 */
    font-size:.28rem;
    /* 设置字体粗细为正常 */
    font-weight: normal;
    /* 外边距为 0 */
    margin: 0;
}

/* 品牌中的图片样式 */
.pinpai img {
    /* 设置顶部外边距 */
    margin-top:.2rem;
}
a {
    color: black;
    text-decoration: none;
}

a:visited {
    color: black;
}
h1 {
    text-align: center;
}
/* 地图样式 */

/* 地图容器样式 */
.map {
    /* 宽度为 100% */
    width: 100%;
    /* 设置背景图片，不重复，位于顶部中心 */
    background: url(map_bg.png) no-repeat top center;
    /* 设置内边距 */
    padding:.1rem.3rem.3rem;
    /* 设置背景图片大小 */
    background-size: 7.07rem;
    /* 左浮动 */
    float: left;
    /* 设置外边距 */
    margin:.3rem 0 1rem;
}

/* 地图中的链接样式 */
.map a {
    /* 文本居中对齐 */
    text-align: center;
    /* 设置文本颜色 */
    color: #333333;
    /* 宽度为 100% */
    width: 100%;
    /* 左浮动 */
    float: left;
}

/* 地图中的 span 元素样式 */
.map span {
    /* 文本居中对齐 */
    text-align: center;
    /* 设置内边距 */
    padding:.1rem 0;
    /* 宽度为 100% */
    width: 100%;
    /* 左浮动 */
    float: left;
}

/* 地图中的段落样式 */
.map p {
    /* 宽度为 100% */
    width: 100%;
    /* 文本居中对齐 */
    text-align: center;
    /* 左浮动 */
    float: left;
    /* 设置底部外边距 */
    margin:.1rem 0;
}

/* 设置地图中的文本字体大小 */
.map span,
.map p,
.map a {
    font-size: 16px;
}

/* 页脚样式 */

/* 页脚容器样式 */
.footer {
    /* 宽度为 100% */
    width: 100%;
    /* 固定定位在底部 */
    position: fixed;
    /* 位于底部 */
    bottom: 0;
    /* 最大宽度为 7.5rem */
    max-width: 7.5rem;
    /* 水平居中 */
    margin: 0 auto;
    /* 设置高度 */
    height: 1.2rem;
}

/* 页脚中的电话链接容器和消息链接容器样式 */
.footer.bot_tel,
.footer.bot_swt {
    /* 宽度为 50% */
    width: 50%;
    /* 文本居中对齐 */
    text-align: center;
    /* 设置行高 */
    line-height: 1.2rem;
    /* 设置字体大小 */
    font-size:.42rem;
}

/* 页脚中的电话链接容器样式 */
.footer.bot_tel {
    /* 设置背景颜色和背景图片，不重复，位于中心 */
    background: #ea7b11 url(tel.png) no-repeat.75rem center;
    /* 左浮动 */
    float: left;
    /* 设置背景图片大小 */
    background-size:.5rem;
    /* 设置文本缩进 */
    text-indent: 2em;
}

/* 页脚中的电话链接和消息链接内部的 a 元素样式 */
.footer.bot_tel a,
.footer.bot_swt a {
    /* 宽度为 100% */
    width: 100%;
    /* 设置文本颜色 */
    color: #fff;
}

/* 页脚中的消息链接容器样式 */
.footer.bot_swt {
    /* 设置背景颜色和背景图片，不重复，位于中心 */
    background: #135bc9 url(mesg.png) no-repeat.58rem center;
    /* 右浮动 */
    float: right;
    /* 设置背景图片大小 */
    background-size:.73rem;
    /* 设置文本缩进 */
    text-indent: 2em;
}

/* 媒体查询，当屏幕宽度最大为 640px 时的样式 */
@media (max-width: 640px) {
    /* 导航右侧标题中的 span 元素字体大小 */
  .nav_r_tit span {
        font-size: 16px;
    }

    /* 导航容器的外边距 */
  .nav {
        margin:.5rem.3rem;
    }

    /* 导航图标背景大小 */
  .nav_img1,
  .nav_img2,
  .nav_img3,
  .nav_img4 {
        background-size:.5rem;
    }

    /* 导航图标的宽度和高度 */
  .nav_img1,
  .nav_img2,
  .nav_img3,
  .nav_img4 {
        width:.5rem;
        height:.8rem;
    }

    /* 植发项目列表中的文字字体大小 */
  .zf_xm ul li p {
        font-size: 16px;
    }

    /* 地图中的文本字体大小、span 元素的内边距以及段落元素的外边距 */
  .map span,
  .map p,
  .map a {
        font-size: 14px;
    }
  .map span {
        padding:.1rem 0;
    }
  .map p {
        margin:.1rem;
    }
}

/* 隐藏特定元素 */
#LRdiv0 {
    display: none!important;
}

/* 关于信息中的 b 元素样式 */
.about_inf b {
    font-size: 18px;
    margin:.15rem 0;
    width: 100%;
    float: left;
}

/* 关于信息中的 p 元素样式 */
.about_inf p {
    font-size: 16px;
    text-align: justify;
    text-indent: 2em;
    line-height: 28px;
    width: 100%;
    float: left;
}

/* 底部电话图标样式 */
.tel_bot img {
    width: 4.2rem;
    margin-bottom:.2rem;
}

/* 关于标题中的图片样式 */
.about_tit img {
    width: 1.99rem;
}