/* design-page styles */
#design-page{
    margin:0 auto;
    width:850px;
    position:relative;
}
#design-page .design-title{
    margin:0 0 9px;
    color:#fff;
    font-size:22px;
    line-height:60px;
    padding:1px 20px 0;
    background:url(/common/design/user/img/design_page/title_bg.gif) repeat-x;
}
#design-page .sub-design-title{
    margin:0 0 20px;
    color:#fff;
    font-size:25px;
    line-height:60px;
    padding:0 15px;
    background:#59af26;
}
#design-page .mb22{margin-bottom: 22px !important;}
#design-page .mb45{margin-bottom: 45px !important;}
#design-page .mb36{margin-bottom: 36px !important;}
#design-page .btn{
    display: block;
    position: relative;
    margin: 0 auto 84px;
    width: 570px;
    height: 90px;
    font-size: 30px;
    line-height: 90px;
    font-weight: bold;
    color: #fff;
    padding: 0 44px 0 140px;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    background: #ff9000;
    text-decoration: none;
}
#design-page .btn:after{
    content: '';
    position: absolute;
    left: 44px;
    bottom: 7px;
    width: 84px;
    height: 90px;
    background: url('/common/design/user/img/design_page/design-item.png') no-repeat;
    overflow: hidden;
}
#design-page .btn:before{
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 25px;
    height: 40px;
    background: url('/common/design/user/img/design_page/design-arrow.png') no-repeat;
    overflow: hidden;
    margin-top: -20px;
}
#design-page .btn:hover{
    -moz-opacity:0.8;
    filter:alpha(opacity:80);
    opacity:0.8;
}
.design-banner{
    overflow: hidden;
    position: relative;
}
.design-banner img{
    display: block;
    width: 100%;
}
#design-page .hiden-text{
    position: absolute;
    left: -9999px;
}
.design-section01{
    overflow: hidden;
}
.design-section01 p{
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 20px;
    color: #161616;
}
.design-section01-box{
    background: #ffe8e8;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    padding: 22px 338px 16px 14px;
    position: relative;
    margin-bottom: 68px;
}
.design-section01-box:after{
    content: '';
    display: block;
    clear: both;
}
.design-section01-box img{
    position: absolute;
    top: -27px;
    right: 3px;
}
.design-section01-box h3{
    margin: 0 0 5px;
    color: #ea0000;
    font-size: 18px;
    line-height: 20px;
}
.design-section01-box p{
    margin: 0 0 20px;
    color: #000;
    font-size: 16px;
    line-height: 18px;
}
.design-section01 h2{
    overflow: hidden;
    text-indent: -9999px;
    background: url('/common/design/user/img/design_page/design-text.png') no-repeat 50%;
    height: 25px;
    margin: 0 0 27px;
}
.design-step-list{
    overflow: hidden;
    border: 1px solid #ddd;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    position: relative;
    list-style: none;
    margin:0 0 29px;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.design-step-list li{
    position: relative;
    text-align: center;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    font-size: 14px;
    line-height: 16px;
    color: #3d3d3d;
    height: 50px;
    padding-left: 36px;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	cursor:pointer;
}
.design-step-list li:nth-child(1){
    width: 15%;
    padding-left: 10px;
}
.design-step-list li:nth-child(2){width: 26%;}
.design-step-list li:nth-child(3){width: 22%;}
.design-step-list li:nth-child(4){width: 22%;}
.design-step-list li:nth-child(5){width: 15%;}
.design-step-list li:after{
    content: '';
    position: absolute;
    right: -33px;
    top: 7px;
    width: 50px;
    height: 1px;
    background: #ddd;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.design-step-list li:before{
    content: '';
    position: absolute;
    right: -33px;
    top: 42px;
    width: 50px;
    height: 1px;
    background: #ddd;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.design-step-list li:last-child:after,
.design-step-list li:last-child:before{display: none;}
.design-step-list li.active{
    background: #0093e7;
    color: #fff;
}
.design-step-list li.active:after{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid #0093e7;
    border-bottom: 25px solid transparent;
    top: 0;
    right: -25px;
    background: none;
}
/*
.design-step-list li.active:before{display: none;}
*/
.design-step-list li.active:before{
	display:block;
	content:"";
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:25px;
	height:100%;
	background:url(/common/design/user/img/design_page/left-bg-k.png) no-repeat;
	background-size:25px 100%;
	-webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.design-step-list li.active:first-child:before{display:none;}
.design-step-list span{
    display: block;
    text-align: left;
    position: relative;
    padding-left: 28px;
    white-space: nowrap;
}
.design-step-list span:after{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 22px;
    overflow: hidden;
    text-align: center;
    font: bold 16px/24px Arial, Helvetica, sans-serif;
    color: #fff;
    background: #0093e7;
    margin-top: -11px;
    -moz-border-radius:22px;
    -webkit-border-radius:22px;
    border-radius:22px;
}
.design-step-list .active span:after{
    color: #0093e7;
    background: #fff;
}
.design-step-list li:nth-child(1) span:after{content:"1";}
.design-step-list li:nth-child(2) span:after{content:"2";}
.design-step-list li:nth-child(3) span:after{content:"3";}
.design-step-list li:nth-child(4) span:after{content:"4";}
.design-step-list li:nth-child(5) span:after{content:"5";}
.design-section02{overflow: hidden;}
.design-section03{overflow: hidden;}
.design-section03 p{
    margin: 0 0 40px;
    font-size: 14px;
    line-height: 20px;
    color: #161616;
}
#design-page .swiper-container {
    border: 1px solid #b4b4b4;
    background: #fff;
    overflow: hidden;
    padding: 11px 36px 11px;
    margin-bottom: 36px;
}
#design-page .swiper-container h3{
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: #191919;
	min-height:62px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
}
#design-page .swiper-slide .image{
    background: #efefef;
	overflow:hidden;
}
#design-page .swiper-slide img{
    display: block;
	/*width:100%;*/
    max-width:100%;
}
#design-page .swiper-button-prev{
    background: url('/common/design/user/img/design_page/swiper-button-prev.png') no-repeat;
    width: 36px;
    height: 36px;
    overflow: hidden;
    text-indent: -9999px;
    margin-top: -18px;
}
#design-page .swiper-button-next{
    background: url('/common/design/user/img/design_page/swiper-button-next.png') no-repeat;
    width: 36px;
    height: 36px;
    overflow: hidden;
    text-indent: -9999px;
    margin-top: -18px;
}
/* design-page styles end */

#design-page .sub-design-title{font-weight:bold;}