/*-------------------------------------------------------------------------------------------

	#header

-------------------------------- */
.header_user{
	z-index:905;
	background:var(--color-one) url(../images/web-01.png) no-repeat center;
	/*padding-top:var(--space-md);*/
	overflow:hidden;
}
.header_user .header_row{
	align-items:center;
}

.header_user .header-one{
	order:3;
	width:100%;
	/*margin-top: var(--space-sm);*/
	/*flex:1 1 auto;
	width:1%; min-width:0;*/
}
.header_user .header-two{
	position:relative;
	order:4;
	width:100%;
	margin-top:var(--space-sm);
}
.header_user .header-two:before{
	position:absolute; top:0; left:50%; content:"";
	width:1600px; height:100%;
	background:rgba(0,0,0,0.1);
	transform:translate(-50%, 0);
}

.header_user .header-three{
	order:1;
	flex:1 1 auto;
	width:1%; min-width:0;
}
.header_user .header-four{
	order:2;
	width:100px;
	
}

@media (min-width:992px){
	.header_user{
		padding:var(--space-md) 0;
	}
	.header_user .header-one{
		order:1;
		flex:none;
		width:auto;
		/*margin:0; margin-right:var(--space-unit);*/
	}
	.header_user .header-two{
		order:2;
		flex:1 1 auto;
		width:1%; min-width:0;
		margin: 0 var(--space-unit) 0 var(--space-xl);
	}
	.header_user .header-two:before{
		display:none;
	}
	
	.header_user .header-three{
		order:3;
		flex:none;
		width:auto;
		margin-right:var(--space-md);
	}
	.header_user .header-four{
		order:4;
		width:auto;
	}
}





/*-------------------------------------------------------------------------------------------

	#Logo

-------------------------------- */
.header_user .logo{
	margin-left:auto; margin-right:auto;
}

.info_user_welcome{
	font-size:var(--font-sm); font-weight:600;
	color:#fff;
}


.logo_specific{
	position:relative; z-index:1;
	display:block;
	color:var(--color-accent);
	font-size:var(--font-md); font-weight:600;
	padding:var(--space-sm) var(--space-xs);
	text-align:center;
	text-shadow: -1px 0 #fff, 0 1px #fff,
      			 1px 0 #fff, 0 -1px #fff;
}
@media (min-width:992px){
	.logo_specific{
		display:inline-block;
		background:#fff;
		border:2px solid rgba(255,255,255,0.1);
		background-clip: padding-box;
		border-radius:30px;
		color:var(--color-accent);
		font-size:var(--font-md); font-weight:600;
		padding:var(--space-xxs) var(--space-unit);
		text-align:center;

		text-shadow:none;
		box-shadow: 5px 5px 10px rgba(255,255,255,0.2),
					5px -5px 10px rgba(255,255,255,0.2),
					-5px -5px 10px rgba(255,255,255,0.2),
					-5px 5px 10px rgba(255,255,255,0.2);
	}
}


.btnbar_logout{
	justify-content:flex-end;
}
.btn_logout{
	border:2px solid #fff;
	color:#fff;
	font-size:var(--font-sm);
	padding:var(--space-unit);
	padding:var(--space-xs) var(--space-unit);
}
.btn_logout:hover{
	background:#fff;
	border:2px solid #fff;
	color:var(--color-accent);
}

@media (min-width:992px){
	.header_user .logo{
		margin-left:0; margin-right:0;
	}

	.info_user_welcome{
		text-align:right;
	}
}

@media (min-width:1200px){
	.header_user .logo{
		margin-left:0; margin-right:0;
	}

	.info_user_welcome{
		font-size:var(--font-md);
	}
	
	.btn_logout{
		font-size:var(--font-unit);
		padding:var(--space-sm) var(--space-unit);
	}
}





/*-------------------------------------------------------------------------------------------

	#Header_fixed [is-sticky]：卷軸下捲時固定

-------------------------------- */
.header_user.header_fixed.is-sticky .header-one,
.header_user.header_fixed.is-sticky .header-two{
	display:none;
}
@media (min-width:992px){
	.header_user.header_fixed.is-sticky .header-one,
	.header_user.header_fixed.is-sticky .header-two{
		display:block;
	}
}





/*-------------------------------------------------------------------------------------------

	#message

-------------------------------- */
.itembox_message{
	max-width:800px;
	text-align:center;
	margin:var(--space-xl) auto;
}

.itembox_message .editor{
	font-size:var(--font-md); font-weight:600;
	max-width:400px;
	margin:var(--space-sm) auto;
}


.itembox_message .redmark{
	color:red;
}

.itembox_message .btnbar{
	margin-top:var(--space-lg);
}





/*-------------------------------------------------------------------------------------------

	#btn_needs_add:新增需求

-------------------------------- */
.btn_needs_add{
	position:relative;
	width:100%;
	background:var(--color-four);
	border-color:var(--color-four);
	border-radius:25px;
	color:#fff;
	font-size:var(--font-unit);
	text-align:center;
	margin:0;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.2)
}
.btn_needs_add br{
	display:none;
}
@media (min-width:768px){
	.btn_needs_add{
		position:relative;
		width:90px; height:90px;
		background:var(--color-four) url(../images/web-03.png) no-repeat left bottom;
		background-size:cover;
		border-color:var(--color-four);
		border-radius:50%;
		color:#fff;
		font-size:var(--font-md);
		text-align:center;
	}
	.btn_needs_add br{
		display:block;
	}
	.btn_needs_add .btn-text{
		line-height:1.2;
	}
	.btn_needs_add:hover{
		background-color:var(--color-accent);
		border-color:var(--color-accent);
		color:#fff;
		box-shadow:none;
	}
}