@charset "utf-8";


/* 页面头图样式 */
.page-top-img{

}
/* ***************************找设计师页 */
/* 巅峰设计师 */
.detail-case-img{
    height: 200px;
    overflow: hidden;
    position: relative;
}
.top-designer{
  padding: 30px;
  background: #F7F7F7;
}
.top-designer-head{
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}
.top-designer-list{
  margin-top: 15px;
}
.top-designer-name{
  font-size: 14px;
}
.top-designer-item{
  position: relative;
  background: #fff;
}
.top-desiner-photo{
  width: 100%;
}
.top-mark{
  position: absolute;
  top: 0;
  left:0;
}
.top-designer-img{
    height: 350px;
    overflow: hidden;
}
.top-designer-text{
  padding: 8px;
}
.top-designer-title{
  font-size: 10px;
  vertical-align: bottom;
}
.top-style-title{
  display: inline-block;
  margin-top: 8px;
  padding: 4px 3px;
  background:rgba(255,235,18,1);
}
.top-style-list{
  margin-top: 8px;
}
.top-style-list span, .designer-style-list span{
  margin-right: 7px;
}

/* 设计师列表 */
.designer-item{
  margin-top: 20px;
  padding: 30px;
  background: #F7F7F7;
}
.designer-item-left{
  width: 180px;
  margin-right: 20px;
}
.designer-photo-wrapper{
  margin-bottom: 10px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
}
.designer-photo-wrapper img{
  width: 100%;
}
.designer-left-text{
  text-align: center;
}
.recommend-rate{
  margin: 10px 0;
}
.designer-name-wrapper{
  margin-bottom: 10px;
}
.designer-name{
  margin-right: 15px;
  font-size: 18px;
}
.designer-style-wrapper{
  margin-bottom: 5px;
}
.designer-style-wrapper, .designer-idea-wrapper{
  line-height: 20px;
}
.design-idea{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-align: left;
}
.designer-btn-wrapper{
  font-size: 0;
  margin-left: 45px;
}
.designer-btn-wrapper .btn{
  margin-bottom: 10px;
}
.designer-img-list{
  margin-top: 25px;
}
.designer-img-list img{
  width: 32%;
  margin: 0.5%;
}
/*.designer-img-list img:first-child{*/
/*  margin-left: 0px;*/
/*}*/

/* ********************************设计师详情页 */
.detail-designer-wrap{
  background: #f7f7f7;
}
.detail-designer-img{
  margin-right: 20px;
  width: auto;
  height: 400px;
}
.detail-designer-text{
  padding: 45px 20px 20px 0;
}
.detail-title-wrap{
  padding-bottom: 15px;
  border-bottom: solid 1px #9D9D9D;
  margin-bottom: 20px;
}
.detail-title-wrap span{
  display: inline-block;
}
.detail-designer-name{
  margin-right: 24px;
  font-size: 25px;
}
.detail-designer-experience{
  margin-left: 10px;
  padding: 2px 6px;
  background: #fc3;
}
.detail-recommend-rate{
  margin-left: 10px;
  line-height: 16px;
}
.text-item{
  line-height: 36px;
}
.text-item p{
  margin-left: 15px;
  color: #666;
}
.detail-works{
  height: 60px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-align: left;
}
.detail-btn{
  margin-top: 20px;
}
.detail-btn .btn{
  margin-right: 10px;
  border-color: #9D9D9D;
}
.detail-case-wrap{
  padding: 30px 20px 20px;
}
.case-title{
  font-size: 18px;
  margin-bottom: 20px;
}
.detail-case-item{
  background: #fff;
}
.detail-case-text, .case-text{
  padding: 15px;
}
.detail-case-name, .case-name{
  font-size: 18px;
  color: #333;
}
.detail-case-accept{
  line-height: 24px;
}
.detail-case-accept div{
  margin-left: 5px;
  line-height: 20px;
}
.detail-case-info{
  margin-top: 18px;
}
.detail-case-info span{
  margin: 0 5px;
}
.detail-review{
  border: solid 1px #F7F7F7;
}

/* 装修案列列表页面 */
.search-wrap{
  margin: 15px 10px 15px 0;
  width: 190px;
  padding: 3px 10px;
  border: solid 1px #D5D5D5;
  border-radius: 10px;
  font-size: 12px;
}
.search-wrap input, .search-wrap i{
  height: 16px;
  line-height: 16px;
}
.search-wrap i{
  cursor: pointer;
}
.case-list{
  padding: 20px;
  background: #F7F7F7;
  flex-wrap: wrap;
}
.case-item{
  width: 375px;
  margin-left: 17.5px;
  margin-bottom: 15px;
  background: #fff;
}
.case-item:nth-child(3n + 1){
  margin-left: 0;
}
.case-item .icon{
  font-size: 20px;
}
.case-item .mark-text{
 margin-top: 0px;
}
.case-photo{
  width: 375px;
  height: 248px;
}
.case-name{
  font-size: 18px;
  color: #333;
  text-align: center;
}
.case-accept, .case-info{
  line-height: 48px;
}
.case-accept div{
  margin-left: 5px;
  font-size: 0;
}
.case-see-btn{
  display: none;
  width: 100%;
  text-align: center;
  padding: 15px 0;
}
.case-item:hover .case-see-btn{
  display: block;
}
.case-item:hover .info-wrap{
  display: none;
}
/* 预约设计师弹框 */
#appointment-design{
  margin: 40px 0;
  background: #fff;
}
#appointment-design input[type='button']{
  background: #fc3;
  border: none;
  color: #333;
  font-size: 14px;
}
body .appointment .layui-layer-title{
  background: #fc3;
}

/* 五零工程 */
.auto-box {
  position: absolute;
  z-index: 2;
  width: 1200px;
  top: 0;
  left: 50%;
  margin-left: -600px;
}
.promise-a {
  height: 766px;
  background: url(../images/promise-a-bg.jpg) center 0 no-repeat
}

.promise-b {
  min-width: 1200px
}

.promise-b .promise-list-box:before,.promise-b .promise-list-box:after {
  content: " ";
  display: table
}

.promise-b .promise-list-box:after {
  clear: both
}

.promise-b .promise-list-box li {
  float: left;
  width: 20%;
  height: 887px;
  overflow: hidden
}

.promise-b .promise-list-box li a {
  display: block;
  width: 100%;
  height: 887px;
  background: url(../images/promise-link.png) center 135px no-repeat;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s
}

.promise-b .promise-list-box li a dl {
  text-align: center
}

.promise-b .promise-list-box li a dl dt {
  padding-top: 240px;
  font-size: 45px;
  margin-bottom: 220px
}

.promise-b .promise-list-box li a dl dd {
  font-size: 30px;
  color: #ebe7e2;
  opacity: 0;
  filter: alpha(opacity=0);
  line-height: 40px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s
}

.promise-b .promise-list-box li a dl dd small {
  font-size: 22px
}

.promise-b .promise-list-box li a:hover {
  background: url(../images/promise-link-hover.png) center 135px no-repeat rgba(38,34,31,0.95);
}

.promise-b .promise-list-box li a:hover dl dt {
  color: #ffffff
}

.promise-b .promise-list-box li a:hover dl dd {
  opacity: 1;
  filter: alpha(opacity=100)
}

.promise-b .promise-list-box li.promise-1 {
  background: url(../images/promise-1.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

.promise-b .promise-list-box li.promise-2 {
  background: url(../images/promise-2.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

.promise-b .promise-list-box li.promise-3 {
  background: url(../images/promise-3.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

.promise-b .promise-list-box li.promise-4 {
  background: url(../images/promise-4.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

.promise-b .promise-list-box li.promise-5 {
  background: url(../images/promise-5.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}


.promise-c {
  background: url(../images/promise-c-bg.jpg) center 0 no-repeat;
}

.promise-box {
  width: 590px;
  padding-top: 50px
}

.promise-box h2 {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 78px;
  color: #ffffff
}

.promise-box p {
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 30px
}

.promise-box dl {
  margin-bottom: 25px
}

.promise-box dl dt {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: normal;
  font-size: 18px;
  background-color: #27221f;
  color: #ffffff;
  margin-bottom: 10px
}

.promise-box dl dd {
  font-size: 16px;
  line-height: 24px;
  color: #27221f
}

.promise-d {
  background: url(../images/promise-d-bg.jpg) center 0 no-repeat;
}

.promise-d .promise-box dl dt {
  background-color: #b69454
}

.promise-d .promise-box dl dd {
  color: #b69454
}

.promise-e {
  background: url(../images/promise-e-bg.jpg) center 0 no-repeat;
}

.promise-e .promise-box {
  width: 400px
}

.promise-e .promise-box dl dd {
  color: #fff
}

.promise-f {
  background: url(../images/promise-f-bg.jpg) center 0 no-repeat;
}

.promise-f .promise-box dl dt {
  background-color: #b69454
}

.promise-f .promise-box dl dd {
  color: #b69454
}

.promise-g {
  background: url(../images/promise-g-bg.jpg) center 0 no-repeat;
}
.promise-g .promise-box {
  width: 400px
}

.promise-g .promise-box dl dd {
  line-height: 20px;
  color: #fff
}

.promise-c, .promise-d, .promise-e, .promise-f, .promise-g, .promise-h{
  position: relative;
}

.promise-h {
  text-align: center;
}

.promise-h .auto-box{
  position: initial;
  margin: 60px auto;
}

.promise-h h2 {
  font-size: 36px;
  margin-bottom: 10px
}

.promise-h p {
  font-size: 23px;
  color: #b69454;
  margin-bottom: 30px
}

.msg-form label{
  margin-right: 15px;
  position: relative;
}
.msg-form input[type="text"]{
  border: solid 1px #d8d8d8;
  line-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
}
.msg-form .btn{
  border-radius: 5px;
}
.msg-form label.error{
  position: absolute;
  left: 0;
  top: 32px;
  color: #f00;
}

/* 三重保护页面 */
.protect-a {
  height: 1265px;
  background: url(../images/protect-a-bg.jpg) center 0 no-repeat
}

.pro-header {
  position: relative;
  padding-top: 150px;
  padding-bottom: 56px;
  text-align: center;
  margin-bottom: 70px
}

.pro-header p {
  font-size: 55px;
  color: #0E0E0E;
}
.protect-c .pro-header p{
  color: #fff;
}

.pro-header h4 {
  position: relative;
  margin-top: 25px;
  font-size: 16px;
  font-weight: normal;
  color: #7E7E7E;
  background: url(../images/01-bg.png) center no-repeat;
}
.protect-c .pro-header h4{
  color: #fff;
}

.protect-b, .protect-c, .protect-d, .protect-e{
  position: relative;
}
.protect-b .pro-header{
  background: url(../images/01.png) center 145px no-repeat;
}
.protect-c .pro-header{
  background: url(../images/02.png) center 145px no-repeat;
}
.protect-d .pro-header{
  background: url(../images/03.png) center 145px no-repeat;
}
.protect-e .pro-e-header{
  padding: 90px 0 170px;
  background: url(../images/04.png) center 60px no-repeat;
}

.protect-b-list {
  width: 1200px;
  margin: 0 auto
}

.protect-b-list:before,.protect-b-list:after {
  content: " ";
  display: table
}

.protect-b-list:after {
  clear: both
}

.protect-b-list li {
  padding: 80px 0 65px;
  float: left;
  width: 216px;
  text-align: center;
  background: #F7F7F7;
  margin-left: 20px;
}

.protect-b-list li i {
  display: block;
  margin: 0 auto;
  width: 72px;
  height: 72px;
  line-height: 70px;
  border: 1px solid #715c45;
  font-size: 42px;
  color: #715c45;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.protect-b-list li span {
  display: block;
  margin-top: 15px;
  font-size: 18px
}

.protect-b {
  height: 898px;
  background: url(../images/protect-b-bg.jpg) center 0 no-repeat
}

.protect-b .pro-header {
  color: #553a16
}

.protect-c {
  height: 975px;
  background: url(../images/protect-c-bg.jpg) center 0 no-repeat
}

.protect-icon-list{
  margin: 0 100px;
}
.protect-icon-list li{
  text-align: center;
}
.protect-icon-list li i{
  margin-bottom: 23px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  width: 57px;
  height: 57px;
  line-height: 57px;
  font-size: 20px;
}
.protect-icon-list li span{
  display: block;
  font-size: 18px;
  color: #fff;
}

.protect-c .protect-c-list {
  margin-top: 80px
}

.protect-c .protect-c-list:before,.protect-c .protect-c-list:after {
  content: " ";
  display: table
}

.protect-c .protect-c-list:after {
  clear: both
}

.protect-c .protect-c-list li {
  float: left;
  width: 232px;
  overflow: hidden;
  cursor: pointer;
}
.protect-c .protect-c-list li:hover{
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.protect-c .protect-c-list li img {
  display: block;
  width: 232px
}
.protect-c .protect-c-list li:hover img{
  animation: scale 5s 1;
}
.protect-c .protect-c-list li+li {
  margin-left: 10px
}

.protect-d {
  height: 976px;
  background: url(../images/protect-d-bg.jpg) center 0 no-repeat
}

.protect-d-cont .zl-tag {
  display: block;
  width: 148px;
  height: 38px;
  line-height: 36px;
  border: 1px solid #45614d;
  text-align: center;
  font-size: 20px;
  margin: 0 auto
}

.protect-d-cont p {
  margin: 36px auto;
  width: 780px;
  font-size: 18px;
  line-height: 28px;
  color: #333333
}

.protect-e {
  height: 840px;
  background: url(../images/protect-e-bg.jpg) center 0 no-repeat
}

.protect-e .pro-e-header h4 {
  text-align: center;
  font-size: 55px;
  font-weight: normal;
}

.protect-e .pro-e-body {
  width: 875px;
  margin: 0 auto
}

.protect-e .pro-e-list:before,.protect-e .pro-e-list:after {
  content: " ";
  display: table
}

.protect-e .pro-e-list:after {
  clear: both
}

.protect-e .pro-e-list li {
  float: left;
  width: 407px;
  height: 455px;
  text-align: center;
  background: #FCFCFC
}

.protect-e .pro-e-list li+li {
  margin-left: 60px;
  background: #FCFCFC
}

.protect-e .pro-e-list li dl {
  position: relative;
  height: 195px;
  margin-bottom: 30px;
}
.protect-e .pro-e-list li dl::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -22px;
  width: 44px;
  height: 3px;
  background-color: #553a16
}
.protect-e .pro-e-list li dl dt {
  padding-top: 70px;
  font-size: 36px;
  color: #0E0E0E;
  margin-bottom: 5px
}

.protect-e .pro-e-list li dl dd {
  font-size: 14px;
  color: #565656
}

.protect-e .pro-e-list li p {
  width: 310px;
  height: 120px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 20px;
  color: #9c9d9e
}

.protect-e .pro-e-list li .btn {
  padding: 10px 38px;
  border-radius: 20px;
  font-size: 16px;
}

/* 蓝钻工程页面 */
.content-title{
  padding: 86px 0 68px;
  text-align: center;
}
.content-title h4{
  margin-bottom: 15px;
  font-size: 36px;
}
.content-title p{
  color: #7E7E7E;
  font-size: 12px;
}
.blue-c .content-title p, .blue-f .content-title p{
  color: #fff;
}
.content-title p>span{
  margin: 0 15px;
  display: inline-block;
  width: 50px;
  border-top: solid 1px #999999;
  vertical-align: middle;
}
.blue-a .content-title{
  background: url(../images/01.png) center center no-repeat;
}
.blue-b .content-title{
  background: url(../images/lan-02.png) center center no-repeat;
}
.blue-c .content-title{
  background: url(../images/lan-03.png) center center no-repeat;
}
.blue-d .content-title{
  background: url(../images/04.png) center center no-repeat;
}
.blue-e .content-title{
  background: url(../images/05.png) center center no-repeat;
}
.blue-f .content-title{
  background: url(../images/06.png) center center no-repeat;
}
.blue-g .content-title{
  background: url(../images/07.png) center center no-repeat;
}

.a-item{
  margin-left: 20px;
  width:284px;
  height:373px;
  position: relative;
}
.a-item:first-child{
  margin-left: 0;
}
.a-item-text{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: rgba(0,0,0,0.33);
}
.a-item-text>p{
  font-size:18px;
  margin: 10px 0 8px;
  font-weight: bold;
}

.b-tab-title{
  font-size: 0;
}
.b-tab-title a{
  display: inline-block;
  width: 143px;
  margin-left: 8px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #0e0e0e;
  border-radius: 15px;
}
.b-tab-title a:first-child{
  margin-left: 0;
}
.b-tab-title a:hover{
  background: #FFD43E;
}
.b-tab{
  margin: 50px 0 135px;
}
.b-tab img{
  display: none;
  border:1px solid #353A3E;
}
.b-tab .active{
  display: block;
}

.blue-c{
  color: #fff;
  height: 655px;
  background: url(../images/blue-c-bg.png) center center no-repeat;
}
.blue-c .swiper-button-prev, .blue-c .swiper-button-next {
  margin-top: -55px;
  background-image: none;
  width: 28px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  background: #BFBFBF;
  color: #fff;
  border-radius: 15px;
  font-size: 18px;
}
.blue-c .swiper-button-next {
  right: -30px;
}
.blue-c .swiper-button-prev {
  left: -35px;
}
/* #blue-c-swiper img{
  width: calc(100% - 12px);
} */
#blue-c-swiper a{
  display: block;
  position: relative;
}
#blue-c-swiper a p{
  position: absolute;
  bottom: 0;
  width: calc(100% - 12px);
  line-height: 56px;
  text-align: center;
  background:rgba(255,177,58,0.64);
}
.bottom-wrap{
  position: relative;
}
.bottom-div{
  position: absolute;
  width: 100%;
  bottom: 0;
}
.blue-d-body{
  height: 320px;
  font-size: 0;
  position: relative;
}
.d-item{
  position: absolute;
  width: 200px;
  display: inline-block;
}
.d-item:nth-child(2){
  left: 200px;
}
.d-item:nth-child(3){
  left: 400px;
}
.d-item:nth-child(4){
  left: 600px;
}
.d-item:nth-child(5){
  left: 800px;
}
.d-item:nth-child(6){
  left: 1000px;
}
.d-item p{
  font-size: 12px;
  padding: 10px 5px;
  color: #fff;
  background:rgba(0,0,0,.3);
}
.pt60{
  top: 60px;
}
.pt120{
  top: 120px;
}

.blue-e-body{
  margin-bottom: 115px;
  font-size: 0;
}
.blue-e-body>img{
  margin-left: 21px;
  margin-bottom: 20px;
}
.blue-e-body>img:nth-child(4n+1){
  margin-left: 0;
}

.blue-f{
  color: #fff;
  height: 859px;
  background: url(../images/blue-f-bg.png) center center no-repeat;
}

.blue-g{
  height: 692px;
  background: url(../images/blue-g-bg.png) center center no-repeat;
}
.blue-g-body{
  margin-top: 50px;
}
.blue-g .swiper-btn-wrap{
  border-top: solid 1px #B5B5B5;
}
#blue-g-swiper{
  margin-top: -9px;
}
#blue-g-swiper .g-item{
  display: inline-block;
  padding: 0 55px;
  text-align: center;
}
#blue-g-swiper .swiper-slide{
  width: auto;
}
.blue-g .swiper-button-prev, .blue-g .swiper-button-next {
  margin-top: -153.5px;
  background-image: none;
  line-height: 52px;
  color: #7F7F7F;
  font-size: 18px;
  cursor: pointer;
}
.blue-g .swiper-button-next {
  right: -17px;
}
.blue-g .swiper-button-prev {
  left: -5px;
}
.g-item-icon{
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #fff;
  border: solid 4px #fc3;
  border-radius: 50%;
}
.g-item-text{
  height: 210px;
  margin-top: 30px;
  width: 171px;
  padding: 30px 15px;
  background: #F7F7F7;
  text-align: left;
}
.g-item-text::before{

}
.g-item-year{
  font-size: 16px;
  margin-bottom: 13px;
}
.g-item-tip{
  font-size: 14px;
}
.g-item-border{
  margin: 13px 0;
  display: inline-block;
  width: 30px;
  border-top: solid 1px #666;
}