html, body {
height: 100%;
}
/* 移动端 */
@media (max-width: 766px) {
/* content5新闻中心 */
.content_top1{
width: 5.8rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
/* padding-top: .8rem; */
padding-bottom: .6rem;
}
.content_top_p2{
font-size: .28rem;
color: #820C14;
}
.content_top_span1{
font-size: .16rem;
color: #333;
padding-top: .1rem;
margin-bottom: .1rem;
}
.content4_wap_title {
padding-top: .3rem;
font-size: .24rem;
color: #333;
font-weight: 400;
line-height: .42rem;
text-align: center;
}
.wap_tel{
width: 2.2rem;
height: .66rem;
background: #820C14;
line-height: .66rem;
margin: 0 auto;
border-radius: .1rem;
margin-bottom: .6rem;
}
.wap_tel a{
display: block;
text-align: center;
font-size: .24rem;
color: #fff;
}
.content5 .content4_wap_title{
text-align: left;
text-indent: 2em;
}
.content5_bottom{
width: 5.8rem;
margin: 0 auto;
}
.news_img{
display: flex;
justify-content: space-between;
padding-bottom: .3rem;
border-bottom: .01rem solid #E2E2E2;
}
.news_img a{
width: 1.73rem;
height: 1rem;
border-radius: .05rem;
}
.news_item_span1{
font-size: .24rem;
color: #820C14;
}
.news_list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: .6rem;
}
.news_list li{
padding-top: .3rem;
width: 2.6rem;
overflow: hidden;
white-space: nowrap;
}
.news_item_span2{
font-size: .24rem;
color: #333;
}
/* content5新闻中心 */
.friendLinks{
width: 5.84rem;
/* height: 3.84rem; */
background: url("../images/wap/link_bg@2x.jpg");
margin: 0 auto;
padding-top: .22rem;
margin-bottom: .36rem;
display: flex;
flex-direction: column;
}
.friendLinks span{
font-size: .28rem;
color: #fff;
display: block;
text-align: center;
margin-bottom: .24rem;
}
.links_item{
display: flex;
flex-wrap: wrap;
padding: .1rem;
}
.links_item li {
width: 25%;
margin-bottom: .2rem;
}
.links_item li a{
display: block;
margin: 0 auto;
font-size: .18rem;
color: #fff;
text-align: center;
}
.foot_bot_wap{
width: 5.84rem;
height:1.9rem;
margin: 0 auto;
background: url("../images/wap/bottom_bg@2x.png");
margin-bottom: .42rem;
display: flex;
flex-direction: column;
padding-top: .4rem;
color: #E6E6E6;
}
.foot_bot_wap h2{
font-size: .28rem;
color: #fff;
font-weight: 600;
text-align: center;
margin-bottom: .3rem;
}
.foot_bot_wap p{
font-size: .18rem;
color: #E6E6E6;
margin-bottom: .12rem;
padding-left: .3rem;
}
#pages{
display:flex;
align-items:center;
}
.dn_wap{
display: none;
}
}
/* pc端 */
@media (min-width: 768px) {
.width{
width: 12rem;
margin: 0 auto;
}
/*菜单 */
.swiper-container1 {
width: 2.1rem;
height: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 4;
}
.swiper-container1.active{
display: block;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* background: #fff; */
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.menu {
min-width: 100px;
width:100%;
max-width: 320px;
background-color: #efefef;
color: #fff;
}
.content {
width: 100%;
}
.menu-button {
position: absolute;
top: .28rem;
left: .4rem;
cursor: pointer;
-webkit-transition: .3s;
transition: .3s;
/* background-color: #fff; */
}
.menu-button1{
color: #000;
width: .4rem;
height: .4rem;
background: red;
}
.menu-button .bar:nth-of-type(1) {
margin-top: 0px;
}
.menu-button .bar:nth-of-type(3) {
margin-bottom: 0px;
}
.menu_pc{
width: 100%;
}
.menu_item{
padding-bottom: .26rem;
}
.menu_item i{
display: block;
font-size: .26rem;
margin-bottom: .1rem;
}
.menu_item span{
font-size: .14rem;
color: #555;
display: block;
}
.menu_item_a{
position: relative;
}
.menu_item:hover a{
color: #edb7c1;
}
.menu_item:hover span{
color: #c40d2e;
}
.menu_item_a:after{
content: '';
position: absolute;
left: 50%;
width: 12px;
margin-left: -6px;
margin-top: 14px;
height: 2px;
background: #ebebeb;
}
.bar {
position: relative;
display: block;
width: 50px;
height: 5px;
margin: 10px auto;
background-color: #fff;
border-radius: 10px;
-webkit-transition: .3s;
transition: .3s;
}
.yourElement1 {
animation-duration: .8s;
animation-delay: 0s;
animation-iteration-count: 1;
}
.yourElement2 {
animation-duration: .8s;
animation-delay: .2s;
animation-iteration-count: 1;
}
.yourElement3 {
animation-duration: .8s;
animation-delay: .4s;
animation-iteration-count: 1;
}
.yourElement4 {
animation-duration: .8s;
animation-delay: .6s;
animation-iteration-count: 1;
}
.yourElement5 {
animation-duration: .8s;
animation-delay: .8s;
animation-iteration-count: 1;
}
.yourElement6 {
animation-duration: .8s;
animation-delay: 1s;
animation-iteration-count: 1;
}
.menu-button:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(1.5px) rotate(-4.5deg);
-ms-transform: translateY(1.5px) rotate(-4.5deg);
transform: translateY(1.5px) rotate(-4.5deg);
}
.menu-button:hover .bar:nth-of-type(2) {
opacity: .9;
}
.menu-button:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-1.5px) rotate(4.5deg);
-ms-transform: translateY(-1.5px) rotate(4.5deg);
transform: translateY(-1.5px) rotate(4.5deg);
}
.cross .bar:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
-ms-transform: translateY(15px) rotate(-45deg);
transform: translateY(15px) rotate(-45deg);
}
.cross .bar:nth-of-type(2) {
opacity: 0;
}
.cross .bar:nth-of-type(3) {
-webkit-transform: translateY(-15px) rotate(45deg);
-ms-transform: translateY(-15px) rotate(45deg);
transform: translateY(-15px) rotate(45deg);
}
.cross:hover .bar:nth-of-type(1) {
-webkit-transform: translateY(13.5px) rotate(-40.5deg);
-ms-transform: translateY(13.5px) rotate(-40.5deg);
transform: translateY(13.5px) rotate(-40.5deg);
}
.cross:hover .bar:nth-of-type(2) {
opacity: .1;
}
.cross:hover .bar:nth-of-type(3) {
-webkit-transform: translateY(-13.5px) rotate(40.5deg);
-ms-transform: translateY(-13.5px) rotate(40.5deg);
transform: translateY(-13.5px) rotate(40.5deg);
}
.cross {
position: absolute;
left: -100%;
margin-left: .58rem;
}
.cross .menu_botton_menu{
display: none;
}
.menu_botton_close{
display: none;
}
.menu_botton_close .iconguanbi,.menu-button .menu_botton_close span{
color: #c40d2e;
}
.menu_botton_close .iconguanbi{
margin-right: .08rem;
}
.cross .menu_botton_close{
display: block;
background: #efefef;
}
.menu-button {
width: .8rem;
}
.menu-button .iconcaidan{
font-size: .24rem;
color: #555;
margin-right: .08rem;
}
.menu-button:hover .iconcaidan,.menu-button:hover span{
color: #c40d2e;
}
.menu-button span{
color: #555;
font-size: .2rem;
}
.swiper-wrapper1.active{
background: rgba(0,0,0,.4);
z-index: 20000;
}
/* 菜单 */
.head{
position: relative;
height: .8rem;
padding-top: .08rem;
position: relative;
width: 100%;
}
.head.active{
position: fixed;
top: 0;
background: #fff;
z-index: 3;
/* padding-left: 2.1rem; */
}
.logo_pc{
width:1.45rem;
height: .58rem;
margin: 0 auto;
}
.logo_pc h1 img{
height:.58rem;
}
.wrap{
width: 100%;
height: 100%;
z-index: 2;
}
.tel_pc{
font-size: 18px;
color: #333;
position: absolute;
right: 1.06rem;
top: .16rem;
}
.banner{
width: 100%;
height: 6.5rem;
position: relative;
}
.banner img{
position: absolute;
width: 100%;
height: 100%;
}
.banner_content{
position: absolute;
left: 2rem;
top: 3rem;
}
.banner_content1{
font-size: .18rem;
color: #fff;
margin-bottom: .2rem;
}
.banner_content2{
font-size: .26rem;
color: #fff;
margin-bottom: .2rem;
}
.banner_content3{
font-size: .16rem;
color: #fff;
line-height: .28rem;
}
.banner_content4{
width: 1.6rem;
height: .6rem;
background: #fff;
font-size: .2rem;
color: #333;
text-align: center;
line-height: .6rem;
letter-spacing: .02rem;
}
.banner_content5{
margin-bottom: .5rem;
}
/* content1客户服务中心 */
.content1{
padding-bottom: 1rem;
}
.content_top{
padding-top: .98rem;
text-align: center;
padding-bottom: .76rem;
}
.content_top img{
margin-bottom: .1rem;
width: 12rem;
height: .02rem;
}
.content_top_p1{
font-size: .4rem;
color: #820C14;
margin-bottom: .06rem;
}
.content_top_span1{
font-size: .16rem;
color: #333;
display: block;
margin-bottom: .08rem;
}
.content_top_line{
display: block;
margin: 0 auto;
width: .5rem;
height: .04rem;
background: #820C14;
}
.content1_left{
margin-right: .85rem;
}
.content1_left img{
width: 11.22rem;
height: 6.18rem;
}
.content1_right{
padding-top: 1.44rem;
}
.content1_right span{
font-size: .4rem;
color: #333;
}
.content1_right p{
padding-top: .56rem;
width: 5.4rem;
font-size: .18rem;
color: #333;
line-height: .26rem;
text-indent: 2em;
margin-bottom: .36rem;
}
.content_tel{
display: block;
width: 1.6rem;
height: .6rem;
background: #820C14;
font-size: .18rem;
color: #fff;
text-align: center;
line-height: .6rem;
}
/* content1客户服务中心 */
/* content 服务项目*/
.content2{
padding-bottom: .8rem;
background: #F5F5F5;
}
.content2_item{
margin-bottom: .6rem;
}
.content2_bottom .swiper-pagination2{
width: 5.2rem;
height: .04rem;
margin: 0 auto;
position: inherit;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
background-color: #820C14;
}
.content2_item{
margin-right: .3rem;
}
.content2_item img{
display: block;
width:2.77rem;
height: 2.6rem;
margin-bottom: .3rem;
}
.content2_item span{
font-size: .2rem;
color: #333;
}
.content2_item_right{
margin-right: 0;
}
/* content2 服务项目*/
/* content3保养建议 */
.content3_item{
border-bottom: .01rem solid #E2E2E2;
}
.content3_item_top{
padding-left: 1rem;
padding-right: 1rem;
}
.content3_list{
border-top: .01rem solid #e2e2e2;
}
.content3_item_top{
height: .56rem;
line-height: .56rem;
}
.content3_item_top.active span{
color: #820C14;
}
.content3_item span{
font-size: .18rem;
color: #333;
}
.iconjianhao{
display: none;
}
.iconjianhao.active{
display: block;
}
.content3_item_bottom{
padding-left: 1rem;
padding-right: 1rem;
height: 1.57rem;
border-top: .01rem solid #E2E2E2;
display: none;
}
.content3_item_bottom.active{
display: block;
}
.content3_item_bottom img{
width:1.03rem;
height: .86rem;
margin-right: .6rem;
margin-top: .32rem;
}
.content3_p1{
font-size: .16rem;
color: #333;
line-height: .26rem;
}
.content3_p2{
text-indent: 2em;
}
.iconjiahao.active{
display: none;
}
.iconjianhao.active{
display: block;
}
.content3_item_bottom_div1{
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
height: 100%;
width: 6.08rem;
/* position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%); */
}
/* content3保养建议 */
/* content4技师团队 */
.content4{
width: 100%;
background: #f5f5f5;
}
.content4_bottom{
width: 10.2rem;
margin: 0 auto;
/* margin-left: .36rem; */
z-index: 222;
position: relative;
height: 7.1rem;
}
.content4_tan{
width: 9.82rem;
height: 5.1rem;
border: .06rem solid #820C14;
position: absolute;
right: 0;
top: .32rem;
z-index: 22;
}
.content4_left{
margin-right: 1.1rem;
}
.content4_left img{
width: 4rem;
height: 5.8rem;
}
.content4_right{
width: 5.1rem;
}
.content4_title{
width: 2rem;
height: .6rem;
background: #820C14;
line-height: .6rem;
margin-bottom: .6rem;
}
.swiper-container3{
width: 100%;
/* height: 5.8rem; */
}
.swiper-container3 .swiper-wrapper{
margin-bottom: .8rem;
}
.content4_title_span1{
font-size: .2rem;
color: #fff;
}
.content4_title_span2{
font-size: .14rem;
color: #fff;
}
.content4_jj p{
height: .8rem;
width: 4.6rem;
text-align: left;
position: relative;
padding-left: .3rem;
}
.content4_jj p::after{
display: block;
content:" ";
width: .1rem;
height: .1rem;
border-radius: .1rem;
background: #820C14;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.content4_jj .p2::before{
display: block;
content: " ";
width: .04rem;
height: .77rem;
z-index: 1;
position: absolute;
left: .03rem;
background: #000;
top: .04rem;
}
.swiper-pagination3{
width: .9rem;
}
.swiper-pagination3 .swiper-pagination-bullet{
width: .1rem;
height: .1rem;
border-radius: .1rem;
border:.02rem solid #820C14;
background: rgba(0,0,0,0);
opacity: 1;
}
.swiper-pagination3 .swiper-pagination-bullet-active{
background: #820C14;
}
/* content4技师团队 */
/* content5新闻中心 */
.content5{
height: 8.84rem;
}
.content5_left{
width: 5.76rem;
margin-right: .6rem;
padding-top: .2rem;
}
.news_1{
position: relative;
width: 5.76rem;
height: 3.43rem;
margin-bottom: .3rem;
overflow:hidden;
}
.news_1 img{
position: absolute;
z-index: 1;
}
.news_1 .p{
font-size: .2rem;
color: #fff;
width: 100%;
height: .55rem;
background: rgba(0,0,0,.5);
position: absolute;
z-index: 2;
line-height: .55rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 .2rem;
bottom: 0;
text-align: center;
}
.news_1 .p .span1{
display:inline-block;
width: 4rem;
overflow: hidden;
white-space: nowrap;
}
.news_1 .p .content5_span3{
display:inline-block;
padding-left:.2rem;
}
.content5_span1{
width:.4rem;
height: .2rem;
font-size: .14rem;
text-align: center;
line-height: .2rem;
background: #820C14;
margin-right: .2rem;
color: #fff;
}
.content5_bottom{
margin-bottom: .5rem;
}
.new2_right{
width: 4.92rem;
}
.new2_right_p1{
font-size: .2rem;
color: #820C14;
margin-bottom: .18rem;
width: 3.72rem;
overflow: hidden;
white-space: nowrap;
margin-right: .2rem;
text-overflow: ellipsis;
}
.new2_right_p2{
width: 4.9rem;
font-size: .16rem;
color: #666;
line-height: .26rem;
display: -webkit-box;
text-overflow: ellipsis;
overflow : hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.content5_right_top{
width: 5.64rem;
height: .6rem;
border-bottom: .02rem solid #E2E2E2;
padding-top: .2rem;
}
.content5_p3{
font-size: .18rem;
color: #333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 3.8rem;
margin-right: .2rem;
}
.content5_span2{
background: #999;
}
.content5_consult{
width: 1.1rem;
height: .4rem;
margin: 0 auto;
}
.content5_consult a{
display: block;
text-align: center;
line-height: .4rem;
font-size: .16rem;
color: #fff;
background: #820C14;
}
.content5_span3{
font-size: .14rem;
color: #999;
}
/* content5新闻中心 */
/* foot */
/* foot */
.foot{
width: 100%;
/* height: 716px; */
background: #000;
padding-top: 70px;
}
.foot h1{
width: 118px;
margin: 0 auto;
margin-bottom: 60px;
}
.foot h1 a{
width: 160px;
}
.foot h1 span{
display: block;
text-indent: -99999px;
}
.friendLinks{
padding-bottom: 46px;
border-bottom: 4px solid #303030;
width:1200px;
}
.friendLinks span{
font-size: 22px;
color: #fff;
margin-right:.15rem;
}
.links_item{
width: 1072px;
}
.links_item li{
width: 106px;
margin: 0 auto;
}
.links_item li a{
display: block;
font-size: 18px;
color: #fff;
line-height: 34px;
font-size: 15px;
text-align:center;
}
.foot_icon{
height: 246px;
border-bottom: 4px solid #303030;
width:1200px;
}
.foot_bot{
padding-top: 42px;
padding-bottom: 70px;
}
.foot_bot_part2{
/* margin-right: 160px; */
}
.foot_bot_part1 span{
font-size: 16px;
color: #E6E6E6;
}
.foot_bot_part1 img{
vertical-align: middle;
margin-right: 4px;
}
.foot_nav{
border-bottom: 4px solid #303030;
font-size: 14px;
color: #a5a1a1;
height: 60px;
line-height: 60px;
text-align: center;
width:1200px;
}
.foot_nav a{
font-size: 14px;
color: #a5a1a1;
}
.cory img{
vertical-align: middle;
margin-right: 6px;
}
.cory{
font-size: 14px;
color: #E6E6E6;
text-align: center;
display:block;
}
.down{
position: absolute;
bottom: 100px;
left: 50%;
margin-left: -15px;
width: 30px;
}
.main5_bottom{
width: 1200px;
padding-bottom: 100px;
}
.tech_item{
width: 370px;
padding: 12px;
overflow:hidden;
}
.tech_item .tech_item_div12{
width:346px;
height:290px;
overflow:hidden;
margin-bottom: 42px;
}
.tech_item_div12 img{
transition: all 0.8s;
}
.tech_item img:hover{
transform: scale(1.1);
}
.tech_item_right{
margin-right: 40px;
}
.tech_item:hover{
background: #fff;
}
.tech_item span{
font-size: 24px;
display: block;
text-align: center;
color: #555555;
margin-bottom: 30px;
}
.tech_item p{
font-size: 16px;
color: #555555;
line-height: 30px;
}
/* foot */
.dn_pc{
display: none;
}
}