﻿

/*1232是最大视口控制区域*/
/*320是最小视口控制区域*/
/*768是切换到ipad和iphone的临界值*/

/*页面头部开始*/
/*页面头部pc端部分*/
.headBox{
	position: relative;
	width: 100%;
	height: auto;
}
.header{
	width: 100%;
	height: 100px;
	min-width: 320px;
	max-width: 1232px;
	padding: 0 16px;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	
}


@media  screen and (max-width:820px ) {
	.logoBox{
		width: 160px;
	}
	.header-bar {
    height: 70px;
}
}
.logo{
	width: 100%;
	margin-top: 0px;
}



/*页面头部moble部分*/

.headMbl{
	width: 100%;
	height: auto;
	display: none;
}
.headMblTop{
	width: 100%;
	height: 43px;
	/*display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;*/
	padding:0 16px;
	position: relative;
	z-index: 10;
}
.headMblTopAct{
	box-shadow: 0 3px 6px rgba(0,0,0,0.08);	
}
.headMblTop .logo{
	width: 59px;
	margin: 0;
	margin-top: 9px;
	float: left;
}
.headSearchIconMbl{
	width: 17px;
}
.headMblgo{
	float: right;
	margin-top: 26px;
	display: none; 
}
.menuBtnMbl{
	width: 18px;
	margin-left: 16px;
}
.headMblSearch{
	width: 100%;
	height: auto;
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #ebebeb;
	padding: 10px 16px;
	position: relative;
}
.headMblSearchShadow{
	width: 100%;
	height: 1px;
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow:0 3px 6px rgba(0,0,0,0.04) ;
}
.headMblSearchInnerBox{
	width: 100%;
	height: auto;
	padding: 0 30px 0 12px;
	border: 1px solid rgba(213,213,213,0.6);
	border-radius: 100px;
	position: relative;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) ; 
}
.headMblSearchInnerBtn{
	border: 0;
	width: 100%;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	color: #333;
	padding: 0;
	background: transparent;
}
.searchBtn{
	width: 20px;
	position: absolute;
	top: 2px;right: 3px;
	border: 0;
	background: transparent;
}
.headMblChoose{
	width: 100%;
	height: auto;
	font-size: 12px;
}
.headMblChooseA{
	width: 100%;
}
.headMblChooseAHead{
	width: 100%;
	height: 36px;
	position: relative;
	border-bottom: 1px solid #e4e4e4;
	line-height: 35px;
	padding: 0 16px;
	display: flex;
	display: -webkit-flex;
	align-content: center;
	-webkit-align-content: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	color:#000;
}
.headMblChooseAHead em{
	font-size: 18px;
	font-style: normal;
	color: #d3d3d3;
}
.headMblChooseBHeadAdd{
	width: 100%;
	height: 36px;
	border-bottom: 1px solid #e4e4e4;
	line-height: 35px;
	color: #000;
	background: #f7f7f7;
	padding: 0 16px;
	position: relative;
	display: flex;
	display: -webkit-flex;
	align-content: center;
	-webkit-align-content: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.headMblChooseBHead{
	width: 100%;
	height: 36px;
	border-bottom: 1px solid #e4e4e4;
	line-height: 35px;
	background: #f7f7f7;
	padding: 0 16px;
	position: relative;
	display: flex;
	display: -webkit-flex;
	align-content: center;
	-webkit-align-content: center;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.headMblChooseBHead a{
	color: #333;
}
.arrowRight{
	width: 6px;
	height: 11px;
	display: block;
	position: absolute;
	top: 12px;
	right: 16px;
}
.redRight{
	width: 11px;
	height: 6px;
	display: block;
	position: absolute;
	top: 15px;
	right: 16px;
}
.headMblChooseC{
	width: 100%;
	height: 36px;
	border-bottom: 1px solid #e4e4e4;
	line-height: 35px;
	background: #f7f7f7;
	padding: 0 27px;
}
.headMblChooseABody{
	display: none;
}
.headMblChooseBBody{
	display: none;
}


@media  screen and (max-width:768px) {
	.headMbl{
		display: block;
	}
	.headMblgo{display: block;}
	.headPc{
		display: none;
		padding-top: 86px;
	}
	.slide img{ min-height:250px}
	.news .col-xs-6{ width:100%}
	.new img {min-height: 43px;}
	#linkinfo{ width:100%}
	#linkinfo img{ height:40px; width:auto}
	#footercate{  display:none}
	.footer_message{ margin-top:-60px}
	#openingstijden .col-xs-5{width:100%;}
	#openingstijden .col-xs-7{width:100%;}
	#openingstijden .col-xs-3{width:100%;}
	#openingstijden .col-xs-9{width:100%;}
	.salon {height:auto}
	.sky-form{ padding-top:10px}
	
	/**/
	.left{ display:none}
	.right { width:100%}
	.right img{ width:100%}
	.right .col-xs-8{width:100%;}
	.right .col-xs-4{width:100%;}
}
@media  screen and (max-width:414px) {
	.headMblSearchInnerBtn{
		height: 28px;
		line-height: 28px;
	}
	.headMblChooseAHead {
	    height: 38px;
	    line-height: 37px;
	}
	.headMblChooseBHeadAdd{
		height: 38px;
	    line-height: 37px;
	}
	.headMblChooseBHead{
		height: 38px;
	    line-height: 37px;
	}
	.arrowRight{
		top: 13px;
	}
	.redRight{
		top: 16px;
	}
}
@media  screen and (max-width:375px) {
	.headMblSearchInnerBtn{
		height: 26px;
		line-height: 26px;
	}
	.searchBtn {
	    top: 3px;
	}
	.headMblChooseAHead {
	    height: 37px;
	    line-height: 36px;
	}
	.headMblChooseBHeadAdd{
		height: 37px;
	    line-height: 36px;
	}
	.headMblChooseBHead{
		height: 37px;
	    line-height: 36px;
	}
}
@media  screen and (max-width:320px) {
	.headMblSearchInnerBtn{
		height: 24px;
		line-height: 24px;
	}
	.headMblChooseAHead {
	    height: 36px;
	    line-height: 35px;
	}
	.headMblChooseBHeadAdd{
		height: 36px;
	    line-height: 35px;
	}
	.headMblChooseBHead{
		height: 36px;
	    line-height: 35px;
	}
	.arrowRight{
		top: 12px;
	}
	.redRight{
		top: 15px;
	}
}


.headMblChooseAHead .jiaIcon{
	width: 10px;
	position: absolute;
	top: 13px;
	right: 16px;
}
.headMblChooseAHead .jianIcon{
	width: 10px;
	position: absolute;
	top: 17px;
	right: 16px;
}
@media  screen and (max-width:414px) {
	.headMblChooseAHead .jianIcon{
		top: 18px;
	}
	.headMblChooseAHead .jiaIcon{
		top: 14px;
	}
}
@media  screen and (max-width:375px) {
	
}
@media  screen and (max-width:320px) {
	.headMblChooseAHead .jianIcon{
		top: 17px;
	}
	.headMblChooseAHead .jiaIcon{
		top: 13px;
	}
}

















