﻿.decoratea address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var{margin:0;padding:0}
.decoratea  ol,ul{list-style:none}
.decoratea  li{list-style:none}
.decoratea  ul{list-style-type:square}
:focus{outline:0}
.decoratea img{border:0}
.decoratea img{vertical-align:middle}
.decoratea table{empty-cells:show}
.decoratea ins{text-decoration:none}
.decoratea del{text-decoration:line-through}
.decoratea em{font-style:normal}
.decoratea button::-moz-focus-inner,input[type=reset] ::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner{border:0;padding:0}
.decoratea table{border-spacing:0;border-collapse:collapse}
.decoratea td,th{padding:0}
.decoratea input[type=button]{border:0;padding:0}
.clearfix:after{content:".";display:block;height:0;clear:both;overflow:hidden}
.clearfix{clear:both}
.clearfix{display:block}
.decoratea h1{font:20px Times New Roman,Tahoma,Arial,Verdana,"Microsoft Yahei","微软雅黑"}
.decoratea h2,h3{font-size:1.27rem}
.decoratea h4,h5,h6{font-size:12px}
.decoratea{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:10px;-webkit-tap-highlight-color:transparent}
.decoratea{font:14px Times New Roman,Tahoma,Arial,Verdana,"Microsoft Yahei","微软雅黑";color:#282828;text-align:left;background:#f0eeef}
.decorate a{color:#282828;text-decoration:none}
.decorate a:hover{text-decoration:none;color: #fe8b4e !important;}


.header_banner{min-width:1300px;height:60px;transform:translateZ(0)}
.header_banner a{display:block;width:100%;height:100%}
.header_top{height:40px;line-height:40px;background:#dbdbdb}
.container{margin:0 auto;width:1200px}
.header_city{float:left}



.fl{float:left;}
.fr{float:right;}

/*装修课堂 栏目*/
.decorate_liucheng{margin-top: 30px; height: 310px;}
.decorate_liucheng .decorate_left{float: left; padding: 0 30px; width: 185px; height: 100%; background:#fe8b4e; color: #fff; position: relative; transition: all .5s;}
.decorate_liucheng .decorate_left:hover{box-shadow: 0 0 10px #999; transform: translateY(-5px);}
.decorate_liucheng .decorate_left i{position: absolute; top: 50%; right: -20px; margin-top: -10px; width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid #fe8b4e}
.decorate_liucheng .decorate_left h2{display: block; padding-top: 28px; color: #fff; font-weight: 700; font-size: 30px}
.decorate_liucheng .decorate_left .border{margin-top: 20px; width: 60px; height: 0; border: 2px solid #fff}
.decorate_liucheng .decorate_left p{margin: 10px 0; padding-right: 20px; color: #fff; font-size: 14px; line-height: 20px}
.decorate_liucheng .decorate_left li{margin: 20px auto; padding-left: 30px; width: 90px; height: 30px; border: 1px solid #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: url(../images/decorate_left_li.jpg) no-repeat 90px center; color: #fff; line-height: 30px; cursor: pointer}
.decorate_liucheng .decorate_left li a{color: #fff}
.decorate_liucheng .decorate_left li.active{background: #fff url(../images/decorate_left_li_active.jpg) no-repeat 90px center; color: #666}
.decorate_liucheng .decorate_left li:hover{background: #fff url(../images/decorate_left_li_active.jpg) no-repeat 90px center; color: #666}
.decorate_liucheng .decorate_left li.active a{color:#666;}
.decorate_liucheng .decorate_left li:hover a{color:#666;}
/*装修流程 特效*/
.decorate_liucheng .decorate_right{float: right; padding: 0 36px 0 428px; width: 476px; height: 310px; background: #fff url(../images/decorate_liucheng.jpg) no-repeat left top; transition: all 0.5s;}
.decorate_liucheng .decorate_right:hover{box-shadow: 0 0 10px #999; /*transform: translateY(-5px);*/}
.decorate_liucheng .decorate_right dt{padding: 18px 0 0 0; margin-bottom: 20px;}
.decorate_liucheng .decorate_right > dt > a{display: block;}
.decorate_liucheng .decorate_right dt h3{display: block; font-weight: 900; font-size: 22px; text-align: center; line-height: 30px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.decorate_liucheng .decorate_right > dt > a > h3::before,
.decorate_liucheng .decorate_right > dt > a > h3::after{color: #fe8b4e; font-size: 22px; line-height: 30px; font:normal bold 22px 'sans-serif'; display:inline-block; opacity: 0; transition: transform 0.3s, opacity 0.2s;}
.decorate_liucheng .decorate_right > dt > a > h3::before{content: '['; margin-right: 10px; transform: translateX(-20px);}
.decorate_liucheng .decorate_right > dt > a > h3::after{content: ']'; margin-left: 10px; transform: translateX(20px);}
.decorate_liucheng .decorate_right > dt > a:hover > h3,
.decorate_liucheng .decorate_right > dt > a:focus > h3{transition: color .2s; color: #fe8b4e;}
.decorate_liucheng .decorate_right > dt > a:hover > h3::before,
.decorate_liucheng .decorate_right > dt > a:hover > h3::after,
.decorate_liucheng .decorate_right > dt > a:focus > h3::before,
.decorate_liucheng .decorate_right > dt > a:focus > h3::after{transform: translateX(0px); opacity: 1;}
.decorate_liucheng .decorate_right dt p{height:51px;display: inline-block; padding: 10px 0; border-bottom: 1px dashed #ccc; color: #9f9f9f; line-height: 20px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.decorate_liucheng .decorate_right dd{margin-top: 12px; border-left: 1px solid #999; padding-left: 12px; height: 16px; line-height: 16px;}
 

/******新闻特效匹配*******/
.decorate dd > a{display: block; transition: all .3s;}
.decorate dd > a:hover{color: #017f40; font-weight: bold; transform: scale(0.95);}
/*装修大事件*/
.decorate_dsj{margin-top: 16px; height: 380px;}
.decorate_dsj h3{color: #000; font: normal bold 26px/46px 'Microsoft YaHei';}
.decorate_dsj .decorate_left{float: left; padding-left: 30px; width: 216px; height: 100%; background: #fe8b4e url(../images/decorate_dsj_left.png) no-repeat left 168px; color: #fff; position: relative; transition: all .5s;}
.decorate_dsj .decorate_left:hover{transform: translateY(-5px); box-shadow: 0 0 10px #999;}
.decorate_dsj .decorate_left i{position: absolute; top: 50%; right: -20px; margin-top: -10px; width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid #fe8b4e ;}
.decorate_dsj .decorate_left h2{display: block; padding-top: 28px; color: #fff; font-weight: 700; font-size: 30px}
.decorate_dsj .decorate_left .border{margin-top: 20px; width: 60px; height: 0; border:2px solid #fff}
.decorate_dsj .decorate_left p{margin: 10px 0; padding-right: 20px; color: #fff; font-size: 14px; line-height: 20px}
.decorate_dsj .decorate_right{float: right; width: 940px; height: 100%; position:relative;}
.decorate_top{height: 46px; line-height: 46px;}
.decorate_top h3{float: left; font-size: 22px; font-weight: normal;}
.decorate_top span{float: right; padding-right: 18px;}
/*.decorate_top span a{color:#0077b4; font-size:14px;}*/
.decorate_dsj .decorate_sj,
.decorate_dsj .decorate_fs{position: absolute; padding: 0 0 0 280px; left: 0; top: 0; width: 340px; height: 180px; background: #fff url(../images/decorate_sj.jpg) no-repeat left top; transition: all .5s;}
.decorate_rj{transition: all .5s;}
.decorate_dsj .decorate_sj:hover,
.decorate_dsj .decorate_fs:hover,
.decorate_dsj .decorate_rj:hover{box-shadow: 0 0 10px #ccc; /*transform: translateY(-5px);*/}
.decorate_dsj .decorate_fs{top: auto; bottom: 0; background: #fff url(../images/decorate_fs.jpg) no-repeat left top;}
.decorate_dsj .decorate_rj{position: absolute; padding: 200px 24px 0 24px; right: 0; top: 0; width: 260px; height: 180px; background: #fff url(../images/decorate_rj.jpg) no-repeat center 18px;}
.decorate_rj .decorate_top span{padding-right: 0;}
.decorate_dsj .decorate_right dd{margin-top: 12px; padding-left: 12px; height: 16px; line-height: 16px; overflow: hidden; border-left: 1px solid #999;}
.decorate_dsj .decorate_rj dd{border-left: 1px solid #999;}


/*旋转动画*/

/*文字特效*/
::selection{background: rgba(0, 126, 66, 0.75); color: #FFF;}
::-moz-selection{background: rgba(0, 126, 66, 0.75); color: #FFF;}
/*装修服务*/
.decoration-reference{padding-top: 34px; padding-bottom: 22px;}
.flow-container{width: 1190px; margin: 0 auto; color: #999;}
h3.title{margin-bottom: 25px; font-size: 20px; color: #333; font-weight: 700;}

.Hide{display: none !important}
.flow-icon{position: relative; overflow: hidden}
.flow-icon .animation-box{width: 100px; height: 100px}
.flow-item{float: left; width: 100px; text-align: center; font-size: 16px; transition: opacity .4s}
.flow-item a{display: block; color: #333}
.flow-item a:hover{color: #39ae44}
.flow-item a:hover div{border-color: #39ae44; transition: border-color .4s}
.flow-item p{margin-top: 10px;}
.flow-line{margin-top: 49px; float: left; width: 55px; height: 2px; border-top: 2px dashed #eee}
.border-left, .border-right{position: absolute; top: -2px; height: 5000px; border-left: 2px dashed #eee; -webkit-animation-delay: 0s; animation-delay: 0s}
.border-bottom, .border-top{position: absolute; left: -2px; width: 5000px; border-top: 2px dashed #eee}
.border-top{top: 0}
.border-left{left: 0}
.border-right{right: 0}
.border-bottom{top: 98px}
.flow-ui{position: absolute; left: 0; top: 0; background: url(../images/sprite_flow.png) no-repeat 0 0}
.deco-prepare-hammer{left: 25px; top: 26px; width: 50px; height: 48px; background-position: 0 0; -webkit-transform-origin: 28px 28px; transform-origin: 28px 28px}
.deco-prepare-wrench{left: 25px; top: 26px; width: 47px; height: 47px; background-position: -3px -652px; -webkit-transform-origin: 28px 28px; transform-origin: 28px 28px}
.deco-search{left: 25px; top: 25px; background: url("../images/4.png") no-repeat; width: 51px; height: 52px}
.deco-working{left: 23px; top: 30px; background-position: 0 -120px; width: 65px; height: 48px}
.deco-design-ruler{left: 29px; top: 31px; background-position: 0 -176px; width: 45px; height: 45px}
.deco-design-pen{left: 33px; top: 30px; background-position: 0 -280px; width: 40px; height: 40px}
.deco-purchase-basket{left: 21px; top: 28px; background: url("../images/5.png") no-repeat; width: 49px; height: 47px}
.deco-purchase-wheel{top: 65px; left: 53px; background-position: 0 -330px; width: 13px; height: 13px}
.deco-purchase-wheel + .deco-purchase-wheel{left: 33px; top: 65px}
.deco-check-paper{left: 31px; top: 28px; background-position: 0 -353px; width: 39px; height: 50px}
.deco-check-symbol{left: 42px; top: 47px; background-position: 0 -413px; width: 33px; height: 27px}
.deco-life-sofa{left: 25px; top: 31px; background: url("../images/1.png") no-repeat; width: 50px; height: 48px}
.deco-before-ruler1{left: 13px; top: 25px; z-index: 2; background-position: 0 -540px; width: 48px; height: 50px; -webkit-transform-origin: 38px 10px; transform-origin: 38px 10px}
.deco-before-ruler2{left: 41px; top: 30px; z-index: 1; background-position: 0 -600px; width: 43px; height: 42px; -webkit-transform-origin: 14px 11px; transform-origin: 14px 11px}
.road{left: 23px; top: 76px; width: 55px; height: 3px; background: #e6e6e6; border-top: 1px solid #a0a0a0; overflow: hidden}
.road em{position: absolute; left: 0; width: 5000px; height: 5px; background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #d1cfcf 5px, #b3b3b3 6px)}
.wall{left: 87px; top: 20px; width: 3px; height: 63px; background: #e6e6e6; border-left: 1px solid #a0a0a0; overflow: hidden}
.wall em{position: absolute; left: 0; width: 5px; height: 63px; background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #d1cfcf 5px, #b3b3b3 6px)}
.flow-ui-plus{position: absolute; opacity: 0}
.flow-item:hover .flow-ui-plus{opacity: 1; transition: opacity .2s}
.flow-item:hover .deco-life-sofa{-webkit-animation: scaleEffect .5s linear infinite; animation: scaleEffect .5s linear infinite;}
.flow-item:hover .road em{-webkit-animation: moveToLeft 50s linear infinite; animation: moveToLeft 50s linear infinite}
.flow-item:hover .deco-before-ruler1{-webkit-animation: ruler1 .8s linear infinite; animation: ruler1 .8s linear infinite}
.flow-item:hover .deco-before-ruler2{-webkit-animation: ruler2 .8s linear infinite; animation: ruler2 .8s linear infinite}
.flow-item:hover .deco-prepare-hammer{-webkit-animation: hammer .8s linear infinite; animation: hammer .8s linear infinite}
.flow-item:hover .deco-prepare-wrench{-webkit-animation: wrench .8s linear infinite; animation: wrench .8s linear infinite}
.flow-item:hover .deco-search{-webkit-animation: search 1.3s linear infinite; animation: search 1.3s linear infinite}
.flow-item:hover .deco-check-paper{-webkit-animation: paper 1.3s linear infinite; animation: paper 1.3s linear infinite}
.flow-item:hover .deco-check-symbol{-webkit-animation: check 1.3s linear infinite; animation: check 1.3s linear infinite}
.flow-item:hover .deco-design-pen{-webkit-animation: pen 2.5s linear infinite; animation: pen 2.5s linear infinite}
.flow-item:hover .deco-purchase-basket{-webkit-animation: basket .9s linear infinite; animation: basket .9s linear infinite}
.flow-item:hover .deco-working{-webkit-animation: working .08s step-start infinite; animation: working .08s step-start infinite}
.flow-item:hover .deco-life-pillow{-webkit-animation: pillow 1.3s linear infinite; animation: pillow 1.3s linear infinite; -webkit-animation-direction: normal; animation-direction: normal}
.flow-item:hover .border-right{-webkit-animation: moveToBottom 50s linear infinite; animation: moveToBottom 50s linear infinite}
.flow-item:hover .border-left{-webkit-animation: moveToTop 50s linear infinite; animation: moveToTop 50s linear infinite}
.flow-item:hover .border-bottom{-webkit-animation: moveToLeft 50s linear infinite; animation: moveToLeft 50s linear infinite}
.flow-item:hover .border-top{-webkit-animation: moveToRight 50s linear infinite; animation: moveToRight 50s linear infinite}

/*装修服务 动画*/

/*动画库*/
@keyframes scaleEffect{0%{transform: scale(1);} 50%{transform: scale(1.1);} 100%{transform: scale(1);}}
@keyframes moveToTop{0%{top: 0} 100%{top: -1000px}}
@keyframes moveToBottom{0%{top: -1000px} 100%{top: 0}}
@keyframes moveToRight{0%{left: -1000px} 100%{left: 0}}
@keyframes moveToLeft{0%{left: 0} 100%{left: -1000px}}
@keyframes search{0%{top: 25px; left: 25px} 10%{top: 20px; left: 20px} 38%{left: 17px} 58%{top: 27px; left: 21px} 68%{top: 30px; left: 24px} 88%{top: 27px; left: 30px} 100%{top: 25px; left: 25px}}
@keyframes ruler1{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg)} 50%{-webkit-transform: rotate(-9deg); transform: rotate(-9deg)} 100%{-webkit-transform: rotate(0deg); transform: rotate(0deg)}}
@keyframes ruler2{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg)} 50%{-webkit-transform: rotate(9deg); transform: rotate(9deg)} 100%{-webkit-transform: rotate(0deg); transform: rotate(0deg)}}
@keyframes hammer{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg)} 50%{-webkit-transform: rotate(-6deg); transform: rotate(-6deg)} 100%{-webkit-transform: rotate(0deg); transform: rotate(0deg)}}
@keyframes wrench{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg)} 50%{-webkit-transform: rotate(9deg); transform: rotate(9deg)} 100%{-webkit-transform: rotate(0deg); transform: rotate(0deg)}}
@keyframes paper{0%{-webkit-transform: scale(1, 1); transform: scale(1, 1)} 25%{-webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1)} 40%{-webkit-transform: scale(1, 1); transform: scale(1, 1)}}
@keyframes check{0%, 45%{width: 0} 50%{width: 5px} 100%, 60%{width: 33px}}
@keyframes pen{0%{left: 33px; top: 30px} 20%{left: 31px; top: 40px} 45%{left: 54px} 70%{left: 33px; top: 40px} 100%, 95%{left: 33px; top: 30px}}
@keyframes basket{0%{top: 28px} 25%{top: 29px} 50%{top: 28px} 75%{top: 27px} 100%{top: 28px}}
@keyframes working{0%{left: 23px} 20%{left: 24px} 40%{left: 25px} 60%{left: 24px} 80%{left: 23px} 100%{left: 25px}}
@keyframes pillow{0%{top: 43px} 50%{top: 10px; -webkit-transform: rotate(80deg); transform: rotate(80deg)} 73%{-webkit-transform: rotate(180deg); transform: rotate(180deg)} 95%{top: 43px; -webkit-transform: rotate(360deg); transform: rotate(360deg)} 100%{top: 43px}}
@keyframes arrowGoOut{0%{left: -20px; opacity: 1;} 100%{left: 50px; opacity: 1;}}
.moreDecor:hover{
	color:#fe4800 ;
}
/*banner*/
.banner{
	width: 100%;
	height:500px;
	overflow: hidden;
}
.banner img{
	width: 100%;
	height: 500px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	min-width: 1200px;
}
/*top链接*/
.query{
	width: 100%;
	height: auto;
	
}
.qu_text{
	width: 1200px;
	margin: 0 auto;
}
.qu_te{
	padding: 10px 0;
	font-size: 12px;
	color: #666666;
}
.qu_te a{
	color: #666666;
	margin-left:5px;
	margin-right: 5px;
}
.qu_te a:hover{
	color: red;
}