@charset "utf-8"; 
body, html { min-width: 1200px;  } 
 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  
body, p, h1, h2, h3, h4, h5, table, ul, li, form, input { margin: 0; padding: 0; color: #000; font-family: '微软雅黑'; line-height: 1; }  
 body, p { font-size: 14px; border: none; color: #000; } 
a { font-size: 14px; color: #000; text-decoration: none; border: none; padding: 0; margin: 0; }  
table { border-collapse: collapse; }  
img { border: 0; margin: 0; padding: 0; display: block; } 
ul, li { list-style: none; border: 0; margin: 0; padding: 0; } 
dl, dt, dd { margin: 0; padding: 0; -webkit-margin-start: 0; } 
h1, h2, h3, h4, h5 { font-weight: normal; font-size: 12px; display: block; }  
strong, b { font-weight: normal; }  
table, tr, td { border-spacing: 0; } 
em, i, b { font-style: normal; }  
p { line-height: 170%; color: #555; font-size: 14px; }  
input,button{ border: none; background: none; }  figcaption { display: block; }  
input:focus { outline: none; } 
::-webkit-input-placeholder { /* WebKit browsers */ font-size: 14px; color: #dfdfdf; }  
::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size: 14px; color: #dfdfdf; } 
.fl { float: left; }  
.fr { float: right; } 
 .clearfix { *zoom: 1; } 
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } 
.clearfix:after { clear: both; } 
.w1200 { width: 1200px; margin: 0 auto; }

body{ background: url(../images/bg.png) repeat;}
.top{ background: url(../images/topbg.png) no-repeat top center; height: 150px; position: relative;}
.top .cont{ display: flex; justify-content: space-between; align-items: center;}
.top ul{ display: flex; justify-content: space-around; width: 500px; align-items: center; height: 150px;}
 .top li {position: relative;}
.top li a::before{ transition: all 1s; background: url(../images/上门按摩加盟_03.png) no-repeat top center; width: 49px; height: 133px;
 display: block; content: ''; position: absolute; top: -25px; bottom: 0; z-index:-2; left: -15px; opacity: 0;}
.top li a{ display: block; height: ; width: 20px; font-size: 20px; font-family: "新宋体"; position: relative; z-index: 3; transition: all 1s;}
.top .logo{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 33;}
.top li:hover a::before,.top li.on a::before{ opacity: 1; }
.top li:hover a,.top li.on a{ color: #fff;}

.banner-bottom { border-bottom:1px solid #E0E0E0; }
.banner-bottom .cont{ display: flex; justify-content: space-between; align-items: center;  align-items: center; height: 160px;}
.banner-bottom .div1{ display: flex; justify-content: space-between; align-items: center;  align-items: center; }
.banner-bottom .div1 img{ margin-right: 20px; display: block;}
.banner-bottom .div1 h3{ color: #653903; font-size: 22px; font-weight: bold; padding-bottom: 10px;}
.banner-bottom .div2{ border:1px solid #E0E0E0; border-top: none; border-bottom: none; height: 160px; padding: 0 55px; display: flex; align-items: center;
flex-wrap: wrap; align-content: center; width: 470px; justify-content: center;}
.banner-bottom .search-box{ display: flex; justify-content: space-between; width: 370px; height: 40px; background: #fff; border:1px solid #E0E0E0; align-items: center;
padding: 0 10px;}
.search-box button{ background: url(../images/zoom.png) no-repeat center; width: 22px; height: 22px;}
.banner-bottom .div2 p{width: 370px;}
.banner-bottom .div2 p a{ display: inline-block; margin-right: 10px; transition: all 0.6s; margin-top: 10px; color: #555; font-size: 14px;}
.banner-bottom .div2 p a:hover{ color: #653903;}
.banner-bottom .div3 h3{  font-size: 14px; color: #555; padding-bottom: 0; font-weight: normal;}
.banner-bottom .div3 p{ font-size: 30px; color: #653903; font-family: arial;}

.tit{ padding:40px 0;}
.tit h3{ text-align: center; color: #000; font-size: 36px; font-family: '新宋体';  font-weight: bold;}
.tit h3 b{ color: #bc010e; font-family: '新宋体'; font-weight: bold;}
.tit p{ text-align: center;font-size: 18px; color: #000; padding-top: 10px;}

.about .text{ width: 655px; line-height: 42px; font-size: 16px; color: #333; position: relative; z-index: 33; padding-top:65px;}
.about .text a{ color: #bc010e; display: block; font-size: 16px;}
.about .cont{ position: relative;}
.about .cont img{  position: absolute; right: 0; top: 0;}

.qianjing{ background: url(../images/qj-bg.jpg) no-repeat top center;}
.qianjing .tit h3,.qianjing .tit p{ color: #fff;}
.qianjing .tit h3 b{ color: #fff;}
.qianjing .cont{ background: #fff; padding: 40px; box-shadow: 0 0 5px rgba(0,0,0,0.1);}
.qianjing .ul1{ display: flex; justify-content: space-between;}
.qianjing .ul1 li{ width: 240px;}
.qianjing .ul1 h4{ text-align: center; color: #bc010e; font-size: 24px; font-family: '新宋体'; padding:30px 0;}
.qianjing .ul1 p{ color: #000; font-size: 14px; line-height: 30px;}
.qianjing .hf3{ margin:35px auto}

.question{ margin-top: 50px;}
.question h3{ background: url(../images/上门按摩加盟_41.png) no-repeat top center; text-align: center; height: 77px; width: 744px; margin: 0 auto;
line-height: 77px; color: #000; font-size: 40px; font-family: "新宋体"; background-size: 100% 100%; font-weight: bold;}
.question h3 b{ color: #bc010e; font-weight: bold; }
.question img{ display: block; margin: 0 auto;}
.question .positon-re{ position: relative; margin-top: 65px;}
.question ul p{ text-align: center; font-weight: bold; color: #333; font-size: 26px;}
.question ul li{ position: absolute;}
.question .ul2 li:nth-child(1){ top: 30px; left: 138px;}
.question .ul2 li:nth-child(2){ top: 150px; left: 80px;}
.question .ul2 li:nth-child(3){ top: 320px; left: 0;}
.question .ul3 li:nth-child(1){ top: 20px; right: 100px;}
.question .ul3 li:nth-child(2){ top: 150px; right: 70px;}
.question .ul3 li:nth-child(3){ top: 320px; right: 0;}
 
.youshi{  background: url(../images/bg2.jpg) no-repeat top center; padding-bottom:45px; background-size: 100% 100%;}
.youshi .tit h3,.youshi .tit p{ color: #fff;}
.youshi .tit h3 b{ color: #fff;}
.youshi .tit p b{ font-weight: bold;}
.youshi .cont{ background: #ffefd4;}
.youshi ul{ display: flex;}
.youshi ul li{ display: flex; align-items: center; position: relative;}
.youshi ul li h3{ color: #bc010e; font-family: "新宋体"; font-size: 20px; padding-bottom: 10px; text-align: center; font-weight: bold;}
.youshi ul li figcaption{ padding: 0 10px;  width: 300px;}
.youshi li img{ width: 300px;}
.youshi ul li p{ color: #bc010e; font-size:16px;}
.youshi li em{ display: block; background: url(../images/zi.png) no-repeat top center; height: 99px; width: 99px; position: absolute;
bottom: 0;right: 0;}


.service .hd ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.service .hd li{ display: block; width: 280px; height: 60px; background: url(../images/line-bg.png) no-repeat; background-position: 0 -61px;
 margin-bottom: 20px;}
.service .hd li a{ text-align: center; display: block; font-size: 24px; font-family: "新宋体"; line-height: 63px;}
.service .hd li.on,.service .hd li:hover{ background-position: 0 0;}
.service .hd li.on a,.service .hd li:hover a{ color: #cf4a53;}
.service .bd{ margin-top: 35px; position: relative;}
.service .bd li{  position: relative;}
.service img{ display: block; width: 100%; height: 500px;}
.service figcaption{ position: absolute; right: 0; top:0; bottom: 0; background: #c11521; width: 300px; display: flex; padding: 40px 0; }
.service figcaption h3{ width: 30px; font-size: 30px;  color: #fff; font-family:"新宋体"; font-weight: bold; }
.service figcaption div{ display: flex; width: 225px; justify-content: flex-end; align-items:flex-start; padding-right: 30px;}
.service figcaption p{width: 15px;  color: #fff; font-size: 15px; line-height: 1.1;  margin: 0 10px; word-break: break-all; word-wrap: break-word;
opacity: 0.9;}


.jiameng{ position: relative; }
.jiameng .pos{ position: absolute; right: 100px; top: 0;}
.jiameng ul{ display: flex; justify-content: space-between;}
.jiameng li figure{  width: 380px; height: 300px; overflow: hidden;}
.jiameng li img{ display: block; width: 380px; height: 300px; transition: all 0.6s; border-radius: 3px; overflow: hidden;}
.jiameng li:hover img{ border-radius: 0; transform: scale(1.1);}
.jiameng li figcaption{ box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #fff url(../images/iconbg.png) no-repeat center center; padding:50px 30px; }
.jiameng li h3{ color: #333; font-size: 18px; text-align: center;}
.jiameng li h5{ color: #333; font-size: 14px; text-align: center; font-family: arial; padding: 15px 0;}
.jiameng li p{ color: #333; font-size: 14px; text-align: center; }
.jiameng li span{ display: block; color: #fff; text-align: center; background: url(../images/上门按摩加盟_73.png) no-repeat center; height: 32px; width: 222px;
margin: 30px auto 0 auto; line-height: 32px;} 
.jiameng li:hover h3{ color: #bf121e;}

.hf2{ background: url(../images/hf4.jpg) no-repeat top center; height: 320px; margin-top: 45px;}
.hf2 .cont{ display: flex; justify-content: space-between; align-items: center; height: 320px; }
.hf2 .div1 h3{ color: #fff; font-size: 18px;  padding: 15px 0;}
.hf2 .div1 p{ color: #fff; font-size: 22px;}
.hf2 .div1 p b{ color: #fff; font-size: 34px;}
.hf2 .liuyan{ display: flex; flex-wrap: wrap; width: 500px;}
.hf2 .div2 h3{ color: #fff; font-size: 26px; font-weight: bold; text-align: center; padding: 15px 0 35px 0;} 
.hf2 .div2 .in{ display: flex; background: #dcdcdc; width: 230px;  height: 40px; align-content: center; align-items: center; margin-left: 20px;
margin-bottom: 20px; padding: 0 10px;}
.hf2 .liuyan img{ display: inline-block; margin-right: 5px;}
.hf2 .div2 button{ background: #DCDCDC; height: 40px; width: 150px; text-align: center; color: #000; margin: 0 auto; display: block;
transition: all 0.36s;}
.hf2 .div2 button:hover{ background: #cf4a53; color: #fff;}

.news ul{ display: flex; justify-content: space-between; height: 450px;}
.news li figure{  width: 380px; height: 300px; overflow: hidden;}
.news figcaption{ border:1px solid #000; width: 335px; margin: 0 auto; padding: 50px 20px 35px 20px; margin-top: -60px; position: relative; z-index: 33;
transition: all 0.36s;}
.news figcaption h3{color: #000; font-size: 18px; padding: 20px 0;}
.news figcaption h5{color: #fff;; font-size: 12px;  opacity: 0; transition: all 0.36s; margin-top: -20px;}
.news figcaption p{ line-height: 24px; height: 48px; overflow: hidden; transition: all 0.3s; color: #666; font-size: 13px;}
.news figcaption div{ padding-top: 20px;}
.news figcaption b{ display: inline-block; height: 1px; background: #e7452c;  width: 225px; vertical-align: middle; margin-left: 10px;}
.news figcaption span{ color: #e7452c;}
.news li:hover figcaption{ background: #222222; color: #fff; padding-top: 20px;}
.news li:hover h5{ opacity: 1; margin-top: 0; margin-bottom: 20px;}
.news li:hover h3,.news li:hover p{ color: #fff;}
.news li:hover b{ background: #fff;}
.news li:hover span{ color: #fff;}

.youlian{ padding: 50px 0 0 0;}
.youlian .div1{ display: flex; justify-content: space-between; align-items: center;}
.youlian .bd{ padding-top: 30px;}
.youlian .bd li{ width: 120px;}
.youlian .bd li a{ display: block; font-size: 14px; width: 100px;}
.youlian .bd li:hover a{color: #e7452c;}
.footer{ background:url(../images/上门按摩加盟_96.png) no-repeat top center; margin-top: 55px; padding-top: 60px; padding-bottom: 30px;}  
.footer .cont{ display: flex; justify-content: space-between;}
.footer h3{ color: #fff; font-size: 18px; padding-bottom: 20px;}
.footer h2{ font-weight: bold; font-size: 34px; font-family: arial; color: #fff; padding-bottom: 30px;}
.footer .code{ display: flex; justify-content: space-between;}
.footer .code p{ text-align: center; font-size: 14px; color: #fff; line-height: 50px;}
.footer .code div{ margin-right: 20px;}
.footer .div2 { width: 310px;}
.footer .div2 p{ font-size: 16px; color: #fff; padding: 10px 0 20px 0;}
.footer .div2 p a{ display: inline-block; color: #fff;width: 32%; margin-bottom: 15px; transition: all 0.6s;} 
.footer .div2 p a:hover{ color: #cf4a53;}
.footer .div3 p { color: #fff; font-size: 14px; color: #fff; line-height: 40px;}


.neibanner img,.neibanner{ width: 100%; overflow: hidden;}
.breadcrumb{ box-shadow: 0 0 5px rgba(0,0,0,0.1); background: #fff; padding: 35px 0; text-align: center;}
.breadcrumb a{ display: inline-block; padding: 0 50px; font-size: 16px;}
.breadcrumb a.on,.breadcrumb a:hover{ color: #cf4a53;}


.newslist{ padding: 50px 0;}
.newslist .time{ float: left; width: 80px; background: #F5F5F5; padding: 10px;}
.newslist figcaption{ float: left; width: 1000px; padding-left: 20px;}
.newslist li a{ display: block; overflow: hidden; clear: both; background: #fff; padding: 20px; box-shadow: 0 0 2px rgba(0,0,0,0.2);
transition: all 0.6s; position: relative; margin-bottom: 20px; border:5px solid transparent}
.newslist .p1{ font-size: 14px; color: #999; text-align: center;}
.newslist .p2{ font-size: 16px; color: #333; text-align: center; padding: 5px 0;}
.newslist .p3{ font-size: 16px; color: #000; font-weight: bold; text-align: center;}
.newslist figcaption h3{ font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 15px;  transition: all 0.6s; }
.newslist figcaption p{ font-size: 14px; color: #666; line-height: 26px; height: 152px; overflow: hidden; margin-top: 10px;}
.newslist li:hover a{ transform: translateX(20px);}
.newslist li:hover h3{ color: #cf4a53;}
.newslist li:hover a{ border-color: #cf4a53;}

.caselist{ padding: 50px 0;}
.caselist ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.caselist li{ width: 31%; margin-bottom: 45px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.caselist li figure{ display: block; height:270px; overflow: hidden;}
.caselist li figure img{ display: block; width: 100%; transition: all 1.2s;}
.caselist li figcaption{ background: #fff; padding: 30px;}
.caselist li h3{ color: #000; font-size: 16px; padding-bottom: 15px;}
.caselist li p{ color: #666; font-size: 12px;}
.caselist li:hover img{ transform: scale(1.1);}



/*详情页面*/
.detailpage{ padding: 20px 20px 50px 20px; background: #fff; margin: 50px 0; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.stace h1{ font-size:24px; font-weight:bold; line-height:36px; overflow:hidden; padding-top:20px;}
.stace strong{ display:block; overflow:hidden; padding:20px 0; overflow:hidden; margin-bottom:20px; border-bottom:1px #e0e0e0 solid;}
.stace strong span{ display:inline-block; color:#999; padding-right:30px;}
.stace .cont{ width:100%; overflow:hidden;}
.stace .cont p{ color:#333; line-height:34px; margin-top:15px; text-indent: 2em;}
.stace .cont img{ display:block; max-width:100%; margin: auto;}
.stace .zjlj{ width:100%; overflow:hidden; margin-top:60px; border:1px #e0e0e0 solid; border-left:none; border-right:none; line-height:60px; position:relative;}
.stace .zjlj a{ display:block; width:48%; float:left; overflow:hidden; color:#666; text-overflow:ellipsis; white-space:nowrap; font-size:12px;
transition: all 0.6s;}
.stace .zjlj a:nth-child(1){ text-align:left;}
.stace .zjlj a:nth-child(2){ text-align:right; float: right;}
.stace .zjlj a i{ color:#000;}
.stace .zjlj a:hover{ color: #cf4a53;}
.detail-left{ width: 830px;}
.detail-right{ width:300px;}

.tade .zxsj{  position:relative; z-index:10;  }
.tade .zxsj input.text{ width:288px; color:#555; padding-left: 10px; 
line-height:40px; height:40px; border:1px solid #E0E0E0; background:#fff; margin-top:15px; border-radius:4px;}
.tade .zxsj input.sub{ border:none; width:100%; line-height:43px; height:43px; background:#fff; color:#fff;
 font-size:16px; margin-top:15px; border-radius:4px; cursor:pointer; background: #cf4a53;}
.tade .zxsj p{ color:#fff; font-size:12px; text-align:center; margin-top:8px;}

.tade .ming{ width:100%; height:36px; line-height:36px; border-bottom:1px #e0e0e0 solid; margin-top:20px;}
.tade .ming h1{ float:left; height:36px; border-bottom:1px #cf4a53 solid; font-size:16px;}
.tade .ming a{ color:#cf4a53; float:right;}
.tade .rmal{ width:100%; overflow:hidden;}
.tade .rmal a{ display:block; width:100%; overflow:hidden; margin-top:15px;}
.tade .rmal a em{ display:block; overflow:hidden;}
.tade .rmal a em img{ display:block; width:100%; -webkit-transition:all 0.4s linear;
height: 200px; -moz-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear;}
.tade .rmal a:hover em img{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1);}
.tade .rmal a h1{ font-size: 14px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin: 15px 0;}
