﻿@charset "utf-8";
@media all and (max-width: 1900px) {
				body{
					overflow-x: scroll;
				}
}
/* 首页部分样式----------------------- */
/*轮播图*/
.slide-box { position: relative; margin: 0 auto; width: 100%; height: 450px; text-align: center; overflow: hidden; }
.slide-box .list-box { width: 100%; height: 100%; }
.slide-box .list-box li { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; opacity: 0; filter: alpha:opacity(0); }
.slide-box .list-box li a { display: block; width: 100%; height: 100%; }
.slide-box .list-box li a img { width: 100%; height: 100%; }
.slide-box .speed-box { position: absolute; left: 0; bottom: 20px; width: 100%; height: 10px; text-align: center; z-index: 999; }
.slide-box .speed-btn { display: inline-block; margin: auto 0; }
.slide-box .speed-btn a { display: block; float: left; margin: 0 5px; width: 10px; height: 10px; background: url(/Content/img/home/slide_btns.png) 0 -166px no-repeat; overflow: hidden; *float: none; *display: inline-block; }
.slide-box .speed-btn a.selected { background-position: 0 -176px; }
.slide-box .prev-btn, .slide-box .next-btn { position: absolute; top: 50%; display: block; margin-top: -41px; width: 42px; height: 82px; z-index: 999; opacity: 0.5; filter: alpha:opacity(50); background: url(/Content/img/home/slide_btns.png) no-repeat; display: none; overflow: hidden; }
.slide-box .prev-btn { left: 31px; background-position: 0 0; }
.slide-box .next-btn { right: 31px; background-position: 0 -82px; }
/*装修流程*/
.process { width: 100%; height: auto; background-color: #F5F5F5;}
.process .container .col { margin-bottom: 20px; margin-top: 20px;}
.process .container .row .col .media { background-color: #FFFFFF; padding: 30px 10px; zoom: 1.2;}
.process .container .row .col .media p { color: #666666; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
.process .container .row .col .media .media-heading { font-weight: bold;}
.process .container .row .col .media:hover { box-shadow: rgba(0,0,0,0.3) 0 5px 50px; transform: translate3d(0,-2px,0); transition: all linear 0.3s;}

/*装修预览*/
.preview { width: 100%; height: auto; padding: 30px 0;}
.preview .container .row .col { overflow: hidden; padding: 0;}
.preview .container .row .col img { width: 100%; height: 100%; cursor: pointer; transition: all 0.5s;}
.preview .container .row .col img:hover { transform: scale(1.05);}
.preview .container .row .col-lg-5 .col-md-12 img { width: 98%; height: 98%;}
.preview .container .row .col-lg-5 .col-r { margin-bottom: 10px;}
.preview .container .row .col-lg-5 .col-md-12 {padding: 0;}
.preview .container .row .col-lg-5 .col-md-12 a img:hover { box-shadow: rgba(0,0,0,0.3) 0 3px 50px; transform: translate3d(0,-2px,0); transition: all linear 0.2s;}
/*装修效果*/
.effect { width: 100%; height: auto; background-color: #F5F5F5; padding-top: 50px;}
.effect h1 { text-align: center; font-weight: bold;}
.effect p { text-align: center; font-size: 20px; font-weight: bold;}
.effect ul { padding: 0; margin: 0; display: table; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 30px;}
.effect ul li { list-style: none; float: left; text-align: center; padding-left: 10px; padding-right: 10px; float: none; display: inline; zoom: 1;}
.effect ul li a:hover { font-weight: bold;}
.effect .container-fluid .row .col { padding-left: 0; padding-right: 0; padding: 2px;}
.effect .container-fluid .row .col img { width: 99%; object-fit: cover;}
#img1, #img2 { height: 350px; width: 100%; }
#img3 { width: 100%; height: 704px; }
#img4, #img5 { width: 100%; height: 350px; }
#img6 { width: 100%; height: 350px; }

/*装修攻略*/
.method { width: 100%; height: auto; padding-bottom: 30px;}
.method h1 { font-weight: bold; text-align: center; margin-top: 50px;}
.method p { text-align: center;font-size: 20px; font-weight: bolder; margin-top: 30px; margin-bottom: 30px;}
.method .method-r { padding: 5px;}
.method .method-r img { width: 100%; height: 100%;}
.method .method-r img:hover { box-shadow: rgba(0,0,0,0.3) 0 3px 50px; transform: translate3d(0,-2px,0); transition: all linear 0.2s;}
.method .method-r .zxgl { margin-bottom: 10px;}
/*装修服务流程*/
.service { width: 100%; height: auto; background-color: #F5F5F5;}
.service h1 { font-weight: bold; padding-top: 50px; margin-bottom: 50px; text-align: center;}
.service .container ul { padding: 0; margin: 0;}
.service .container ul li { list-style: none; float: left; width: 210px; height: 150px; margin-right: 20px; margin-bottom: 50px;}
.service .container ul .hptj { margin-right: 0;}
.service .container ul li a {display: inline-block; text-align: center; width: 210px; height: 40px; line-height: 40px; margin-top: 110px; font-size: 20px; color: #FAB105;}
.service .container ul li:hover a { color: #FFFFFF; background-color: #FAB105;}
.service .container ul li:hover { transform: translate3d(0,-2px,0); transition: all linear 0.2s; background: #FAB105;}
/*合作品牌*/
.cooperative h1 { text-align: center; font-weight: bold; padding-top: 50px;}
.cooperative p { text-align: center; font-size: 20px; font-weight: bold; padding: 20px 0;}
.cooperative .row { margin-bottom: 30px;}
/*黄雀.家*/
.information { width: 100%; height: auto; background: url(/Content/img/home/bg-fwnum.jpg); color: #FFFFFF; padding-bottom: 30px;}
.information h1 { text-align: center; font-weight: bold; padding-top: 50px;}
.information p { text-align: center; font-size: 20px; font-weight: bold; margin: 30px;}
.information .container .row .col-md-3 p { font-weight: normal;}
.information .container .row .col-md-3 .lagre { font-size: 48px;}

/*装修攻略页面-------------------*/
/*面包屑导航*/
.container .breadcrumb { background-color: #FFFFFF; margin: 0; padding: 5px; height: 50px; line-height: 50px;}
/*左部分装修攻略大全*/
.renovation h1 { font-weight: bold; margin-top: 10px; padding: 0;}
.renovation .row .col-md-8 .glbox { border-bottom: 1px solid #F5F5F5;}
.renovation .row .col-md-8 .glbox:hover { background-color: #F0F8FF;}
.renovation .row .col-md-3 { height: 190px; line-height: 190px;overflow: hidden;}
.renovation .row .col-md-3 img { width: 100%; height:130px; display: inline-block; vertical-align: middle; cursor: pointer; transition: all 0.6s;}
.renovation .row .col-md-3 img:hover { transform: scale(1.05);}
.renovation .row .col-md-9 h3 { font-size: 20px; font-weight: bold; display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow:ellipsis;}
.renovation .row .col-md-9 p { display: inline-block; white-space: normal; width: 100%; height: 60px; overflow: hidden; text-overflow: ellipsis;}
.renovation .row .col-md-9 ul { margin: 0; padding: 0;}
.renovation .row .col-md-9 ul li { list-style: none; float: left; margin: 20px 20px 20px 0;}

/*右部分精选攻略*/
.jxgl { width: 95%; height: auto; border: 1px solid #BFBEBE; background-color: #FFFFFF; padding-bottom: 20px; margin-left: 20px; margin-bottom: 20px;}
.jxgl h3 { font-weight: bold; font-size: 20px;}
.jxgl .media { padding: 5px 0 5px;}
.jxgl .media p { font-weight: bold;}
.jxgl .media-left img { width: 100px; height:80px;}
/*右部分精选案例*/
.jxal { width: 95%; height: auto; border: 1px solid #BFBEBE; background-color: #FFFFFF; padding-bottom: 20px; margin-left: 20px; margin-bottom: 20px;}
.jxal h3 { font-weight: bold; font-size: 20px;}
.jxal .col-md-12 img {margin: 0; padding: 0;}
.jxal .col-md-12 p { font-weight: bold; padding-top: 10px;}
.jxal .col-md-12 ul { margin: 0; padding: 0;}
.jxal .col-md-12 ul li { list-style: none; float: left; padding-right: 20px; color: #999999;}
.jxal .media-left img { width:100px; height:80px;}
.jxal .media { padding: 5px 0 5px;}
.jxal .media p { font-weight: bold;}
.jxal .media ul { margin: 0; padding: 0;}
.jxal .media ul li { list-style: none; float: left; padding-right: 20px; color: #999999; margin-top: 10px;}

/* 攻略内页样式------------------ */
/*左部分内容样式*/
.guide { border-bottom: 1px solid #DCDCDC; padding: 0;}
.guide h3 { font-weight: bold;}
.guide ul { margin: 0; padding: 0;}
.guide ul li { list-style: none; float: left; padding-right: 20px; color: #999999; margin: 10px 0 10px;}
/* 详细内容 */
.details { padding: 0;}
.details p { font-size: 16px; padding-top: 10px; margin-top: 20px; margin-bottom: 20px;}
.details h4 { font-weight: bold; font-size: 16px; padding-top: 10px;}
.details img { width: 80%;}
/* 热门文章 */
.popular { padding: 0;}
.popular h4 { font-weight: bold; font-size: 16px; margin-bottom: 10px;}
.popular .row img { width: 100%;}
.popular .row p { margin-top: 10px;}
.popular .row .liulan { color: #BFBEBE;} 

/* 装修案例页面------------------- */
/* 左部分案例分类 */
.case { background-color: #FFFFFF; margin-bottom: 20px;}
.case .example p { font-weight: bold; font-size: 20px; text-align: center; margin-top: 20px;}
.case .example p img { margin-right: 5px;}
.case .example {border-bottom: 1px solid #F5F5F5; width: 100%; height: auto; padding: 10px 0;}
.case .example .case-t { display: inline-block;}
.case .example .case-t ul { margin: 0; padding: 0;}
.case .example .case-t ul li { list-style: none; float: left; margin-left: 20px; height: 40px; line-height: 40px;}
.case .example .case-t ul li a { color: #666666;}
.case .example .case-t ul li a:hover { color: #666666;}
.case .example .case-t ul .fg { font-size: 18px; font-weight: bold; padding-left: 20px;}
.case .example .case-t ul .fg a { color: #000000;}
.case .example .case-t ul .fg a:hover { color: #000000;}
.case .example .case-t ul .all a { border: 1px solid #FAB105; color: #FAB105; padding: 5px; border-radius: 5px;}
.case .example .case-t ul .all a:hover { color: #FAB105;}
/* 案例类型 */
.sort { padding-left: 40px; padding-right: 40px; border-bottom: 1px solid #F5F5F5; display: inline-block;}
.sort p { font-size: 18px; padding-top: 20px;}
.sort .col-md-4 { margin: 0; padding: 0;}
.sort .col-md-4 img { width: 100%; height:180px; padding: 5px;}
.sort ul { margin: 0; padding: 0;}
.sort ul li { list-style: none; float: left; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;}
.sort ul li a { color: #999999;}
.sort ul li a:hover { color: #999999;}
/* 分页样式 */
.paging { width: 100%; text-align: center;}
.paging .pagination li { margin: 5px;}
.paging .pagination li a { border: none; margin: 3px; color: #333333; font-size: 16px;}
.paging .pagination li a:hover { border: 1px solid #FAB105;}
.paging .pagination .active a { background-color: #FFFFFF; border: 1px solid #FAB105; color: #333333;}

/* 装修案例内页部分样式----------------------- */
/* 左部分详细介绍部分 */
.more-info { background-color: #FFFFFF; margin-bottom: 20px;}
.more-info .leader { border-bottom: 1px solid #F5F5F5; display: inline-block;}
.more-info .leader h3 { text-align: center; font-weight: bold;}
.more-info .leader ul { margin: 0; padding: 0; margin-top: 20px; margin-left: 40px; padding-bottom: 20px;}
.more-info .leader ul li { list-style: none; float: left; width: 50%; height: 30px; line-height: 30px; color: #666666;}
.more-info .most { padding: 20px;}
.more-info .most p { font-size: 16px; padding: 10px;}
.more-info .most img { width: 90%; margin: 20px;}

/* 关于我们页面部分样式--------------------------- */
/* 左部分垂直导航栏 */
.vertical .our { background-color: #F5F5F5; margin-top: 30px; margin-bottom: 20px;}
.vertical .our .ab-logo { width: 100%; text-align: center; padding-top: 20px;}
.vertical .our .ab-logo h3 { color: #C0C0C0; font-size: 22px;}
.vertical .our .ab-logo p { font-size: 18px; color: #C0C0C0; text-align: center;}
.vertical .our ul { margin: 0; padding: 0;}
.vertical .our ul li { list-style: none; width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 18px;}
.vertical .our ul .active { background-color: #FAB105; color: #FFFFFF;}
/* 右部分关于我们详细内容 */
.understand .title { width: 100%; border-bottom: 1px solid gainsboro; padding: 10px;}
.understand .title h3 { color: #AAAAAA; font-size: 20px;}
.understand p { margin-top: 20px; margin-left: 10px; font-size: 16px; padding-bottom: 10px;}

.paging { font-size: 14px; padding: 20px 0 44px; line-height: 14px; text-align: center }
.paging a { font-family: 'arial'; color: #333; display: inline-block; border: 1px solid transparent; padding: 14px 18px }
.paging span { color: #333; margin: 0 6px }
.paging .current { color: #333; border: 1px solid #fab105; padding: 14px 18px; display: inline-block }
.paging a:hover { border: 1px solid #fab105 }
.paging .next a, .mPages .prev a { padding: 11px 18px 13px; background: #ff4a00; border: 1px solid #ff4a00; color: #fff; line-height: 18px; font-size: 14px; font-family: 'Microsoft YaHei' }
.paging .first a, .mPages .last a { font-family: 'Microsoft YaHei'; font-size: 14px; }
.paging .first a:hover, .mPages .last a:hover { color: #ff4a00; border: 1px solid #f2f2f2; }
.paging .all, .mPages .pageindex { padding: 6px 10px; display: inline-block; position: relative; *top: -8px; }

@media all and (max-width: 768px) {
    .preview .container .row .col-lg-5 .col-r { margin-top: 10px; }
    .process .container .row .col .media { zoom: .6; margin-right: -15px; }

    .container .row .xs-service ul { padding-left: 20px; }
    .container .row .xs-service ul li { list-style: none; float: left; margin-bottom: 10px; text-align: center; width: 46%; margin-right: 10px; }
    .container .row .xs-service ul li a { width: 100%; }
    .container .row .xs-service ul li:hover a { transition: all linear 0.2s; color: #FFFFFF; background-color: #FAB105; }

    .cooperative .row .col-xs-6 img { width: 100%; object-fit: cover; margin-bottom: 20px; }
    .renovation .row .col-md-3 { width: 100%; height: auto; }

    .information { background: none; background-color: #cc9922; }
    .renovation .row .col-md-3 img { width: 100%; height:100%;}
    .popular .col-md-4 img { width:100%; height:100%;}
    .sort .col-md-4 img { width: 100%; height:100%; }
    .more-info .leader h3 { text-align: center; font-weight: bold; line-height:35px; }
}