.w80{
	width:80%;
}
.w60{
	width:60%;
}
.w50{
	width:50%;
}
.tf-screen-conditions{
	background: #4F4F4F;
	padding-top: 45px;
	border-bottom: 1px solid #707070;
}

.tf-main-content .tf-main-screen select{
	float:left;
	height: 38px;
	width:218px;
	margin-right: 20px;
}
.tf-main-content .tf-main-screen .select-screen{
	float:left;
	height: 44px;
	line-height: 44px;
	background: #FFF;
	margin-right: 15px;
	position: relative;
	cursor: pointer;
}
.tf-main-content .tf-main-screen .select-screen label{
	font-weight: normal;
	cursor: pointer;
}

.tf-main-content .tf-main-screen .select-screen ul.option-screen{
	position: absolute;
	width: 100%;
	top:44px;
	z-index: 10;
	background: #FFF;
	display: none;
}
.tf-main-content .tf-main-screen .select-screen ul.option-screen li{
	height: 40px;
	line-height: 40px;
	border-top: 1px solid #e6e6e6;
	cursor: pointer;
	padding-left: 15px;
}

.tf-main-content .tf-main-screen .select-screen ul.option-screen li span{
	display: block;
	float: left;
}
.tf-main-content .tf-main-screen .select-screen ul.option-screen li span.dot{
	width: 8px;
	height: 8px;
	background: #FFF;
	border-radius: 60px;
	margin:16px 10px 0 0;
	border: 1px solid #CCC;	
}
.tf-main-content .tf-main-screen .select-screen ul.option-screen li:hover{
	background: #dfb26c;
	color: #FFF;
}
.tf-main-content .tf-main-screen .select-date ul.option-screen li:hover{
	background: #FFF;
	color:#333;
}
.tf-main-content .tf-main-screen .select-screen ul.option-screen li:hover span.dot{
	border: 1px solid transparent;
}
.tf-main-content .tf-main-screen .select-screen span.active{
	background: #FFF !important;
}
.tf-main-content .tf-main-screen .select-screen span.select-item{
	padding: 0 15px;
}
.tf-main-content .tf-main-screen .select-screen span.item-01{
	background: #dfb26c;
}
.tf-main-content .tf-main-screen .select-screen span.item-02{
	background: #333;
}
.tf-main-content .tf-main-screen .select-screen span.select-item label{
	float: left;
}
.tf-main-content .tf-main-screen .select-screen span{
	display: block;
	float:left;
}
.tf-main-content .tf-main-screen .select-screen span.screen-item{
	float: right;
	width: 38px;
	height: 44px;
}
.tf-main-content .tf-main-screen .select-screen span.screen-item .screen-item-arrow{
	width: 0;
	height: 0;
	border: 7px solid #FFF;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin:20px 0 0 12px;
}
.tf-main-content .tf-main-screen .select-screen span.active .screen-item-arrow{
	width: 0;
	height: 0;
	border: 7px solid #555;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid transparent;
	margin:10px 0 0 12px;
}
.tf-main-content .tf-main-screen .select-date{
	width: 200px;
	padding: 0 !important;
}
/* .tf-main-content .tf-main-screen .date-option{
	position: absolute;
	right:265px;
	top:105px;
	width: 220px;
	height: 40px;
	display: none;
} */
.tf-main-content .tf-main-screen .date-option input{
	border: 1px solid #CCC;
	width: 50px;
	height: 25px;
	border-radius:2px;
	padding-left: 2px;
}
.tf-main-content .tf-main-screen .date-option button{
	width: 50px;
	height: 25px;
	line-height: 100%;
	font-size: 12px;
}
.tf-main-content .tf-main-screen .select-date label,.tf-main-content .tf-main-screen .select-date span{
	display: inline;
	font-weight: normal;   
	float:none;  
}
.tf-main-content .tf-main-screen .select-date label{
	padding-left: 15px;
}
.tf-main-content .tf-main-screen .select-date .select-item{
	padding:0 15px 0 0 !important;
}
.tf-main-conditions{
	margin:20px 0;
}
.tf-main-conditions label{
	color:#FFF;
	font-weight: normal;
}
.tf-main-conditions .conditions-left{
	float:left;
	width:710px;
	margin-top:20px;
}
.tf-main-conditions .conditions-left > ul > li{
	margin:30px 0 50px 0;
	-moz-user-select:none;
    -webkit-user-select: none;       
    -ms-user-select: none;
}
.tf-main-conditions .conditions-left > ul > li > label{
	width: 80px;
	float:left;
	font-size: 14px;
}
.tf-main-conditions .conditions-left .progress-bar{
	background: transparent;
	border: none;
}
.tf-main-conditions .conditions-left .progress-bar .slider{
	width: 100%;
}
/* .tf-main-conditions .conditions-left .progress-bar .bar-data{
	position: absolute;
	text-align: center;
	top:-22px;
}
.tf-main-conditions .conditions-left .progress-bar .bar-ball{
	width:20px;
	height: 20px;
	background: #f0b109;
	border-radius:60px; 
	
	cursor: pointer;
} */
.tf-main-conditions .conditions-left .progress-bar .origin{
	left:-5px;
}
.tf-main-conditions .conditions-left .progress-bar .adjustable{
	left:40%;
	z-index: 10;
}
.tf-main-conditions .conditions-left .progress-bar .adjustable .bar-ball{
	background: #666;
}
.tf-main-conditions .conditions-left .progress-bar .end{
	right:-5px;
}
.tf-main-conditions .conditions-left .thumbnail{
	float:left;
	margin-left:30px;
	border: none;
	background: none;
}
.tf-main-conditions .conditions-left .thumbnail span{
	float:left;
	display: block;
	cursor: pointer;
	margin: 0 5px;
	width: 50px;
	height: 50px;
	background: #848484;
	position: relative;
}
.tf-main-conditions .conditions-left .thumbnail span img{
	width: 100%;
	margin-bottom: 0;
}

.tf-main-conditions .conditions-left .thumbnail span.active{
	border: 1px solid #dfb26c;
}
.tf-main-conditions .conditions-left .thumbnail span .small{
	width: 22px;
	height: 22px;
	background: #dfb26c;
	position: absolute;
	right: 0;
	bottom: 0;
}
.tf-main-conditions .conditions-left .thumbnail span .middle{
	width: 32px;
	height: 32px;
	background: #dfb26c;
	position: absolute;
	right: 0;
	bottom: 0;
}
.tf-main-conditions .conditions-left .thumbnail span .large{
	width: 42px;
	height: 42px;
	background: #dfb26c;
	position: absolute;
	right: 0;
	bottom: 0;
}
.tf-main-conditions .conditions-left .theme-color{
	float:left;
}
.tf-main-conditions .conditions-left .theme-color span{
	cursor: pointer;
	display:block;
	float:left;	
	margin-right: 5px;
	width: 24px;
	height: 31px;
	margin-right: 10px;
}
.tf-main-conditions .conditions-left .theme-color span .active{
	width: 0;
	height: 0;
	border: 5px solid black;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	border-bottom: 5px solid transparent;
	margin: 2px 7px;
	display: none;
}
.tf-main-conditions .conditions-left .theme-color span.color-colour .active{
	width: 24px;
	height: 10px;
	background: url("../../images/colour-arrow.png") no-repeat center;
	background-size:10px auto;
	margin: 0;
	padding: 0;
	border: none;
}
.tf-main-conditions .conditions-left .theme-color span.active .active{
	display: block;
}
.tf-main-conditions .conditions-left .theme-color span .theme{
	width: 24px;
	height: 24px;
	border-radius: 60px;
}
.tf-main-conditions .conditions-left .theme-color span.color-black .theme{
	background: black;
}
.tf-main-conditions .conditions-left .theme-color span.color-01 .theme{
	background: #0391ce;
}
.tf-main-conditions .conditions-left .theme-color span.color-02 .theme{
	background: #0147ff;
}
.tf-main-conditions .conditions-left .theme-color span.color-03 .theme{
	background: #3d01a4;
}
.tf-main-conditions .conditions-left .theme-color span.color-04 .theme{
	background: #8601af;
}
.tf-main-conditions .conditions-left .theme-color span.color-05 .theme{
	background: #a7194b;
}
.tf-main-conditions .conditions-left .theme-color span.color-06 .theme{
	background: #fe2712;
}
.tf-main-conditions .conditions-left .theme-color span.color-07 .theme{
	background: #fd5308;
}
.tf-main-conditions .conditions-left .theme-color span.color-08 .theme{
	background: #fb9902;
}
.tf-main-conditions .conditions-left .theme-color span.color-09 .theme{
	background: #fabc02;
}
.tf-main-conditions .conditions-left .theme-color span.color-10 .theme{
	background: #fefe30;
}
.tf-main-conditions .conditions-left .theme-color span.color-11 .theme{
	background: #d0ea2b;
}
.tf-main-conditions .conditions-left .theme-color span.color-12 .theme{
	background: #66b032;
}
.tf-main-conditions .conditions-left .theme-color span.color-white .theme{
	background: white;
}
.tf-main-conditions .conditions-left .theme-color span.color-gray .theme{
	background: #999;
}
.tf-main-conditions .conditions-left .theme-color span.color-colour .theme{
	background: linear-gradient(to right,#fa1105 5%,#fff400 ,#5bf700,#0384c4);
}
.tf-main-conditions .conditions-left .theme-shape span{
	cursor: pointer;
	float: left;
	margin: 0 5px;
	display: block;
	border:2px solid  #CCC;
	background: #616161;
	margin-right: 50px;
}
.tf-main-conditions .conditions-left .theme-shape span.active{
	border:2px solid  #dfb26c;
}
.tf-main-conditions .conditions-left .theme-shape .shape-square{
	width: 36px;
	height: 36px;
}
.tf-main-conditions .conditions-left .theme-shape .shape-cross{
	width: 46px;
	height: 24px;
	margin-top:7px;
}
.tf-main-conditions .conditions-left .theme-shape .shape-vertical{
	width: 24px;
	height: 36px;
}
.tf-main-conditions .conditions-left .theme-shape .shape-circular{
	width: 40px;
	height: 40px;
	border-radius: 60px;
}
.tf-main-conditions .conditions-left .theme-shape .shape-special{
	width: 46px;
	height: 40px;
	background: url("../../images/shape-05.png") no-repeat;
	border: none;
}
.tf-main-conditions .conditions-left .theme-shape span.active:last-child{
	background: url("../../images/shape-05-active.png") no-repeat;
	border: none;
}

.tf-main-conditions .conditions-right{
	width: 472px;
	float:left;
	padding-top: 50px;
}
.tf-main-conditions .conditions-right label{
	font-size: 14px;
}
.tf-main-conditions .conditions-right .hot-label{
	margin:10px 0 40px 0;
}
.tf-main-conditions .conditions-right .hot-label span{
	display: block;
	float:left;
	border:1px dashed #FFF;
	color: #FFF;
	padding:2px 15px;
	margin:5px;
	border-radius: 2px;
	cursor: pointer; 
	background: #616161;
}
.tf-main-conditions .conditions-right .certification{
	margin-top:10px;
}
.tf-main-conditions .conditions-right .certification span{
	display: block;
	float:left;
	font-size: 14px;
	margin-right: 5px;
	cursor: pointer;
	text-align: center;
	border: 2px solid #999;
	margin:0 5px;
	color:#999;
	width: 40px;
	height: 40px;
	line-height: 135%;
	margin-right: 13px;
}
.tf-main-conditions .conditions-right .certification span:last-child{
	margin-right: 0;
}
.tf-main-conditions .conditions-right  span.active{
	color:#dfb26c;
	border:2px solid #dfb26c; 
}
.tf-main-conditions .conditions-right .hot-label span.active{
	border:1px solid #dfb26c; 
}

.tf-main-conditions .conditions-right .ad-theme{
	width: 457px;
	height: 121px;
}
.tf-main-conditions .conditions-right .ad-theme img{
	width: 100%;
}
.tf-main-conditions .conditions-right .selected-paintings > input{
	height: 25px;
	padding-left: 5px;
	border-radius: 2px;
}
.tf-main-conditions .conditions-right .selected-paintings > button{
	background: #000;
	color:#dfb26c;
	border: none;
	border-radius: 5px;
}
.in-selection{
	display: none;
}

.conditions-confirm{
	margin-top:20px;
}
.conditions-confirm button{
	float: left;
}

/*banner*/
.tf-banner .banner01{
    min-width: 1400px;
    padding-top: 100px;
    height: 320px;
	background: url("../../images/bannner-01.jpg") no-repeat center center;
	background-size:100% 100%; 
}
.slider-handle{
	/* background: #dfb26c; */
	background: #fff;
	border: 1px solid #ccc;
}
.slider-selection.tick-slider-selection{
	/* background: #cd9d51; */
	background: #00204E;
}
.slider-track-low, .slider-track-high{
	background: #ccc;
}
/* 改版样式 */
.left-order-area{
	float: left;
	width: 200px;
	border-right: 1px solid #e5e5e5;
}
.left-order-li .screen-text{
	position: relative;
	width: 180px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.left-order-li .screen-text input{
	width: 140px;
	background-color: #fff;

}
.left-order-li .screen-text .fa-search{
	color: #818181;
	cursor: pointer;
}
.left-order-li .title{
	padding: 15px 0;
	font-size: 18px;
}
.left-order-li .title .icon{
	float: right;
	margin-top: 3px;
	margin-right: 30px;
	transition: transform 0.2s linear;
}
.left-order-li .icno-active .icon{
	transform: rotateZ(180deg);
}
/* 搜索框 */
.left-order-li .active .shape-triangle{
	border-bottom-color: #00253E;
}
/* 筛选选择框 */
.left-order-li .order-li{
	float: left;
	width: 100%;
	margin-bottom: 15px;
	text-align: left;
	cursor: pointer;
}
.left-order-li .order-li-inline{
	width: 50%;
}
.left-order-li .order-li .frame{
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	border: 1px solid #ccc;
}
.left-order-li .order-li .txt{
	font-size: 14px;
	color: #6A6A6A;
	margin-left: 5px;
	vertical-align: top;
}
.left-order-li .active .frame{
	border: none;
	background-image: url(../../images/tf_images/goods/icon-1.png);
	background-position: center;
	background-size: 24px 24px;
}
/* 筛选形状 */
.left-order-li .shape-li{
	float: left;
	width: 20%;
	margin-bottom: 15px;
	cursor: pointer;
}
.left-order-li .shape-li .shape-boder{
	border: 1px solid #ccc;
	
}
.left-order-li .shape-li .shape-vertical{
	display: inline-block;
	width: 15px;
	height: 25px;
	vertical-align: middle;
}
.left-order-li .shape-li .shape-transverse{
	display: inline-block;
	width: 25px;
	height: 15px;
	vertical-align: middle;
}
.left-order-li .shape-li .shape-square{
	display: inline-block;
	width: 25px;
	height: 25px;
	vertical-align: middle;
}
.left-order-li .shape-li .shape-round{
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	vertical-align: middle;
}
.left-order-li .shape-li .shape-triangle{
	position: relative;
	display: inline-block;
	width: 0;
    height: 0;
	margin-top: 2px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #fff;
	border-top: none;
	vertical-align: middle;
}
.left-order-li .shape-li .shape-triangle:after{
	content: "";
    display: block;
    width: 0; 
    height: 0; 
    position: absolute;
    bottom: -21px;
    left: -12px;
    z-index: -1;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 23px solid #ccc;
}
.left-order-li .active .shape-boder{
	background-color: #00253E;
}
.left-order-li .active .shape-triangle{
	border-bottom-color: #00253E;
}