WordPress网站B2主题会员展示模块

1.演示效果

2.实现教程

（1）html代码

注意css、js等文件的地址

<link rel="stylesheet" href="https://www.ahap.cn/rz-image/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.ahap.cn/wp-content/themes/b2/Assets/fontend/style.css" type="text/css" media="all">
<div class="demo">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic"><img
data-src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153722476.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153722476.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
class="lazy"></div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">胡哥</h3>
<p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip3"><i
style="border-color: rgb(30, 115, 190);"></i><b
style="color: rgb(30, 115, 190);">终身会员</b></span></b> <span
class="lv-icon user-lv b2-lv7"><b>设计总监</b><i>lv7</i></span></span></p>
</div>
<div class="user-s-data">
<div><span>文章</span>
<p>214</p>
</div>
<div><span>评论</span>
<p>1</p>
</div>
<div><span>粉丝</span>
<p>2</p>
</div>
<div><span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow"><a href="https://www.onecad.cn/users/1" class="link-block">个人主页</a></div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic"><img
data-src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153748481.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153748481.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
class="lazy"></div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">HXP室内设计</h3>
<p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
style="border-color: rgb(129, 215, 66);"></i><b
style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
class="lv-icon user-lv b2-lv1"><b>助理设计</b><i>lv1</i></span></span></p>
</div>
<div class="user-s-data">
<div><span>文章</span>
<p>0</p>
</div>
<div><span>评论</span>
<p>2</p>
</div>
<div><span>粉丝</span>
<p>1</p>
</div>
<div><span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
室内设计，图纸深化设计
</div>
</div>
<ul class="social">
<div class="user-s-follow"><a href="https://www.onecad.cn/users/2" class="link-block">个人主页</a></div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic"><img
data-src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153914348.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153914348.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
class="lazy"></div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">芭蕉</h3>
<p><span class="lv-icon user-lv b2-lv0"><b><span class="lv-icon user-vip b2-vip2"><i
style="border-color: rgb(129, 215, 66);"></i><b
style="color: rgb(129, 215, 66);">年卡会员</b></span></b> <span
class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
</div>
<div class="user-s-data">
<div><span>文章</span>
<p>0</p>
</div>
<div><span>评论</span>
<p>2</p>
</div>
<div><span>粉丝</span>
<p>0</p>
</div>
<div><span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow"><a href="https://www.onecad.cn/users/21" class="link-block">个人主页</a></div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic"><img
data-src="https://img.onecad.cn/wp-content/uploads/2022/01/20220108072334884.jpg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220108072334884.jpg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
class="lazy"></div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">隔壁老王</h3>
<p><span class="lv-icon user-lv b2-lv0"><b></b> <span
class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
</div>
<div class="user-s-data">
<div><span>文章</span>
<p>0</p>
</div>
<div><span>评论</span>
<p>0</p>
</div>
<div><span>粉丝</span>
<p>2</p>
</div>
<div><span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow"><a href="https://www.onecad.cn/users/35" class="link-block">个人主页</a></div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic"><img
data-src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153829187.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
alt=""
src="https://img.onecad.cn/wp-content/uploads/2022/01/20220119153829187.jpeg.webp?x-oss-process=image/resize,m_fill,h_192,w_192/sharpen,120"
class="lazy"></div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">kokoko</h3>
<p><span class="lv-icon user-lv b2-lv0"><b></b> <span
class="lv-icon user-lv b2-lv0"><b>实习设计</b><i>lv0</i></span></span></p>
</div>
<div class="user-s-data">
<div><span>文章</span>
<p>0</p>
</div>
<div><span>评论</span>
<p>0</p>
</div>
<div><span>粉丝</span>
<p>1</p>
</div>
<div><span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow"><a href="https://www.onecad.cn/users/45" class="link-block">个人主页</a></div>
</ul>
</div>
</div>
</div>
</div>
</div>

（2）CSS代码

.demo {
padding-bottom: 2em;
}
.our-team {
padding: 20px 0 0px;
background: #ffffff;
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
}
.demo .user-s-info-name {
margin-top: 0px;
display: flex;
flex-flow: column;
margin-left: 0px;
}
.demo .user-s-info-desc {
font-size: 13px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 100%;
background: #ffffff;
padding: 10px;
color: #bcbcbc;
height: 62px;
line-height: 35px;
text-align: center;
box-sizing: border-box;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
}
.our-team .pic {
display: inline-block;
width: 130px;
height: 130px;
margin-bottom: 10px;
z-index: 1;
position: relative;
}
.our-team .pic:before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background: #ff3a55;
position: absolute;
bottom: 135%;
right: 0;
left: 0;
opacity: 1;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .pic:before {
height: 100%;
}
.our-team .pic:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff3a55;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 24px;
}
.col-sm-6 {
cursor: pointer;
width: calc(20% - 12px);
border-radius: 4px;
background-size: 100% 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
@media screen and (max-width: 768px){
.col-sm-6 {
width: calc(50% - 12px);
}
}
@media screen and (max-width: 500px){
.col-sm-6 {
width:100%;
}
}
.our-team .pic img {
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .pic img {
box-shadow: 0 0 0 8px #f7f5ec;
transform: scale(0.8);
}
.our-team .team-content {
margin-bottom: 30px;
}
.our-team .title {
font-size: 22px;
font-weight: 700;
color: #4e5052;
letter-spacing: 1px;
text-transform: capitalize;
margin-bottom: 5px;
}
.our-team .post {
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
}
.our-team .social {
width: 100%;
padding: 0;
margin: 0;
background: #ff3a55;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team:hover .social {
bottom: 0;
}
.our-team .social li {
display: inline-block;
}
.our-team .social li a {
display: block;
padding: 10px;
font-size: 17px;
color: #fff;
transition: all 0.3s ease 0s;
}
.our-team .social li a:hover {
color: #eb1768;
background: #f7f5ec;
}
.user-s-follow a{
border-radius: 4px;
color: #fff;
padding: 5px 10px;
transition: opacity .2s;
position: relative;
cursor: pointer;
font-size: 12px;
margin: 0;
white-space: nowrap;
background: #ff3355;
border: 1px solid #ff3355;
border-radius: 5px;
}
@media only screen and (max-width: 990px) {
.our-team {
margin-bottom: 30px;
}
}
/*首页模块标题*/
#biaoti.post-modules-top {
display: flex;
line-height: 1;
align-items: center;
justify-content: space-between;
margin-bottom: 0px;
}
.modules-title-box .module-title {
font-size: 22px;
text-align: left;
margin-right: 10px;
font-weight: 500;
}
.wwwmodel-title {
padding: 30px 0px 30px;
}
.clearfix {
zoom: 1;
}
.wwwmodel-title .wwwmodel-title-left {
float: left;
}
.wwwmodel-title .wwwmodel-title-left h3 {
color: #333333;
font-size: 22px;
}
.wwwmodel-title .wwwmodel-title-right {
float: right;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-active {
color: #666;
font-weight: bold;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item {
display: inline-block;
font-size: 14px;
color: #999;
cursor: pointer;
margin-left: 44px;
padding-bottom: 8px;
transition: all ease 0.4s;
position: relative;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-more {
display: inline-block;
padding: 0px 2px;
font-size: 14px;
color: #999;
top: 3px;
cursor: pointer;
padding-bottom: 8px;
margin-left: 40px;
position: relative;
transition: all ease 0.4s;
}
.clearfix:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item:hover {
color: #666;
font-weight: bold;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item:after {
content: '';
width: 0px;
height: 1px;
background-color: #3BC66F;
display: block;
position: absolute;
bottom: 0px;
left: 0px;
transition: all ease 0.4s;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-item:hover:after {
width: 100%;
}
.wwwmodel-title .wwwmodel-title-right .wwwmodel-title-active:after {
width: 100%;
}
/*首页模块仿照OM*/
.model-column {
margin: 0 auto;
}
.model-column .common-model-wrap .model-item:nth-of-type(6n) {
margin-right: 0
}
.model-column .model-item {
max-height: 331px;
width: 294px;
margin: 0 16px 16px 0;
transition: all .2s linear;
border-radius: 5px
}
.model-column .model-item:hover {
box-shadow: 0 8px 15px 0 rgba(0,0,0,.15);
transform: translateY(-5px)
}
.model-column .model-item:hover .model-info>p {
color: #e80000
}
.model-column .model-item:hover .model-info>div {
color: #e80000
}
.model-column .model-item .model-cover {
display: block;
width: 100%;
height: 285px;
background-color: #fff
}
.model-column .model-item .model-cover img {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s linear;
border-radius: 5px 5px 0 0
}
.model-column .model-item .model-info {
display: flex;
align-items: center;
justify-content: space-between;
height: 46px;
padding: 0 14px;
background-color: #fff;
border-radius: 0 0 5px 5px
}
.model-column .model-item .model-info .title {
color: #666;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.model-column .model-item .model-info>p {
flex: 2;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.model-column .irregular-wrap {
display: flex
}
.model-column .irregular-wrap .irregular-left {
flex-shrink: 0;
max-height: none
}
.model-column .irregular-wrap .irregular-left .model-cover {
height: 634px
}
.model-column .irregular-wrap .irregular-center {
max-width: 909px;
display: flex;
flex-wrap: wrap
}
.model-column .irregular-wrap .irregular-right .model-item {
width: 590px;
margin-right: 0
}
@media screen and (max-width: 1366px) {
.model-column .irregular-wrap .irregular-right .model-item {
width: 496px;
margin-right: 0
}
.model-column .model-item {
max-height: 331px;
width: 232px;
margin: 0 16px 16px 0;
transition: all .2s linear;
border-radius: 5px;
}
.model-column .model-item .model-cover {
display: block;
width: 100%;
height: 232px;
background-color: #fff;
}
.model-column .irregular-wrap .irregular-left .model-cover {
height: 528px;
}
}
/*首页问答列表*/
.encyclopedias {
margin-top:10px;
}
.encyclopedias ul {
width:100%;
padding:20px;
box-sizing:border-box;
background:#fff;
margin-bottom:30px; 
margin-top:0px; 
}
.encyclopedias ul .px_item {
width:50%;
float:left;
}
.encyclopedias ul .px_item:nth-child(2n+1) {
padding-right:10px;
border-right:1px dotted #f0f0f0
}
.encyclopedias ul .px_item:nth-child(2n) {
padding-left:10px
}
.encyclopedias ul .px_item a {
display:block;
width:100%;
line-height:50px;
box-sizing:border-box;
font-size:15px;
position:relative;
background:#fff url(./img/zizhu/icon-q.png.webp) 10px center no-repeat;
border-radius:4px;
padding-right:120px;
padding-left:36px;
}
.encyclopedias ul .px_item a:hover {
background:#f9f9f9 url(./img/zizhu/icon-q.png.webp) 10px center no-repeat;
border-radius:4px;
}
.encyclopedias ul .px_item a .question {
position:absolute;
height:50px;
position:absolute;
right:10px;
top:0;
z-index:2;
/*background:url(./img/zizhu/icon-q.png.webp) left center no-repeat;*/
width:auto;
padding-left:24px;
line-height:50px
}
.encyclopedias ul .px_item a:hover .question {
/*background:url(./img/zizhu/icon-q.png.webp) left center no-repeat;*/
width:auto
}
@media screen and (max-width: 768px){
.encyclopedias ul .px_item {
width:100%;
float:left;
}
.encyclopedias ul .px_item a {
display: block;
width: 100%;
line-height: 30px;
padding: 10px 0;
box-sizing: border-box;
font-size: 15px;
position: relative;
background: #fff url(./img/zizhu/icon-q.png.webp) 0px 18px no-repeat;
border-radius: 4px;
padding-right: 0px; 
padding-left: 25px;
}
.encyclopedias ul .px_item a .question {
display: none;
}
.encyclopedias ul .px_item:nth-child(2n) {
padding-left:0px
}
.encyclopedias ul .px_item:nth-child(2n+1) {
padding-right:10px;
border-right:1px dotted #fff;
}
}
.comment-text p strong{
font-weight: 700;
padding: 0 5px;
color: var(--hover_color);
}
.part-title {
display: flex;
align-items: center;
margin-bottom: -10px;
}
.puxin_sx{
font-size: 14px;
letter-spacing: .8px;
position: relative;
}
.part-title h3 {
flex: 1;
margin-bottom: 10px;
font-size: 25px;
font-weight: normal;
white-space: nowrap;
margin-right: 10px;
padding-top: 1px;
}
.part-title p {
letter-spacing: .5px;
}
.puxin_gd{
white-space: nowrap;
margin-left: 10px;
padding-bottom: 20px;
}
.puxin_gd .btn {
position: relative;
padding: 0 16px;
display: block;
border-radius: 0px;
color: #8590A6;
background-color: #fff;
height: 32px;
font-size: 14px;
color: #fff;
line-height: 32px;
background-image: -webkit-linear-gradient(0deg,#ff416c 0%,#ff4b2b 100%);
display: flex;
align-items: center;
}
.part-title .part-nav{
overflow-x: auto;
white-space: nowrap;
padding-bottom: 20px;
}
.part-title .part-nav .all {
background: var(--hover_color);
color: #fff;
}
.part-title i {
padding-left: 10px;
}
.part-title .part-nav a {
color: #606266;
font-size: 13px;
padding: 4px 10px;
display: inline-block;
margin-left: 20px;
transition: all .3s
}
.title_puxin >div:nth-of-type(2) {
margin-top: 10px;
color: #999;
font-size: 16px;
margin-bottom: 20px;
}
/* VIP头像CSS */
.lv-icon.b2-vip0 b {
color: #000 !important;
background: linear-gradient(90.34deg, #D7E5FF 0.27%, #B9CBFF 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip1 b {
color: #6C4A20 !important;
background: linear-gradient(90.34deg, #FFD2A2 0.27%, #FFE2C2 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip2 b {
color: #ffdbb1 !important;
background: linear-gradient(90.34deg, #393f68 0.27%, #24263c 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip3 b {
color: #ffffff !important;
background: linear-gradient(90.34deg, #e54b63 0.27%, #e54b63 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.user-w-lv {
display: flex;
height: 22px;
flex-wrap: wrap;
}
.b2-vip0{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
.b2-vip1{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
.b2-vip2{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
.b2-vip3{
background-image: url(https://onecad.cn/wp-content/themes/b2child/img/zizhu/vip.png.webp);
background-repeat: no-repeat;
background-size: contain;
}
/* 图酷网会员列表 */
@media (min-width:768px) {
.home-section-designs {
display: block;
width: 100%;
}
}
.home-section-designs .items {
overflow: hidden;
margin: 0 -8px 0px
}
.home-section-designs .items .item-wrap {
float: left;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px
}
@media (min-width:1024px) {
.home-section-designs .items .item-wrap {
width: 25%
}
}
.home-section-designs .items .item {
background: #fff;
overflow: hidden;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s
}
.home-section-designs .items .item:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px)
}
.home-section-designs .items .item-thumb .thumb {
padding-top: 100%
}
.home-section-designs .items .item-thumb .thumb:hover {
opacity: .8
}
.home-section-designs .items .item-main {
padding: 15px 0 0
}
@media (min-width:768px) {
.home-section-designs .items .item-main {
padding: 16px 25px
}
}
.home-section-designs .items .item-main h2 {
font-size: 18px;
color: #3c3c3c;
font-weight: 400;
line-height: 20px;
height: 20px;
overflow: hidden;
margin-bottom: 15px
}
.home-section-designs .items .item-main h2 span {
margin-left: 5px;
font-size: 13px;
color: #b2b2b2
}
.home-section-designs .items .item-main h2:hover {
color: #3385ff
}
.home-section-designs .items .item-main h4 {
margin: 0 -5px;
font-weight: 400;
line-height: 22px;
height: 22px;
overflow: hidden
}
.one_list_a{
font-size: 13px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 100%;
background: #ffffff;
color: #bcbcbc;
}
.home-section-designs .items .item-main h4 span {
display: inline-block;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #e5f0ff;
font-size: 12px;
color: #3385ff;
padding: 0 5px;
margin: 0 5px;
white-space: nowrap
}
.home-section-designs .items .item-main h4 span:hover {
background: #3385ff;
color: #fff
}
/*自定义footer底部CSS*/
.fl{float:left;width: 40%;justify-content: space-between;display: flex;}
.fla{float:left;}
.fr{float:right;}
.public-foot{width:100%;background:#2d3237;display:table;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.public-foot .foot-cont{padding:30px
0;display:table}
@media screen and (max-width: 768px){
.public-foot{
display: none;
}
}
@media screen and (min-width: 768px){
.footer-bottom{
display: none;
}
}
.public-foot .foot-cont
h4{color:#fff;margin-bottom:20px}
.public-foot .foot-cont-fl ul>li
a{color:#b2b2b2;font-size:13px}
.public-foot .foot-cont-fl ul>li a:hover{color:#ff3a55}
.public-foot .foot-cont-fr
.tel{margin-right:55px;float: left; padding-top: 6px;}
.public-foot .tel-number{display:table}
.public-foot .tel-icon
.tel-icon-a{width:42px;height:42px;line-height:42px;background:#1e1f23;color:#8b8b8b;text-align:center;margin-right:8px;padding: 10px;}
.public-foot .tel-icon .tel-icon-a:hover{background:#ff3a55;color:#fff;}
.org{color:#ff3a55}
.public-foot .tel-number{font-size:24px;margin-top:20px}
.public-foot
.ewm{margin-top: 5px;}
.public-foot .ewm
span{display:block;text-align:center;color:#b2b2b2;padding-top: 5px;}
.public-foot .ewm ul
li{float:left;margin-left:30px;text-transform:uppercase}
.public-foot .ewm ul li
img{width:100px}
.foot-copyright{width:100%;color:#666;padding:20px
0 10px;display:table;border-top: 1px solid #23232a;}
.foot-copyright
p{font-size:12px;line-height: 30px;}
.foot-copyright p
a{color:#666}
.foot-copyright p a:hover{color:#ff3a55}
.foot-copyright-fr ul
li{float:left;margin-right:5px}
.foot-copyright-fr ul li
a{display:block}
.fl ul li{
font-size: 13px;
padding: 10px 0px;
box-sizing: border-box;
}
.fl .html-widget {
padding: 10px 0px 0px 0px;
}
.fl h2{
font-size: 16px;
padding: 5px 0px;
color: #fff;
line-height: 1;

}
.tel > h2 {
font-size: 16px;
padding-bottom: 22px;
color: #fff;
line-height: 1;
font-weight: 500;
}
/*自定义home_srarch模块CSS*/
.flickity-enabled.is-draggable {
margin-top: -25px;
}