@charset "utf-8";
/* CSS Document */



/*---- 整體 ----*/



body {
	font-family: "微軟正黑體", "Microsoft JhengHei UI", "Microsoft JhengHei UI Light";
	background: url(../Images/bg.jpg) top center no-repeat #48b697;
}


#page .container {
    width: 1160px;
	margin:70px auto 0px auto;
}

a, a:hover {
    text-decoration: none;
    transition: all .3s;
}

img, img:hover{
	border: 0px none #000;
	transition: all .5s;
}



@media screen and (max-width: 1160px){

#page .container {
    width: 100%;
}

}


/*---- 上方區塊 ----*/

#nav_top {
    width: 1160px;
    background-color: #fff;
    /*background-image: url(../images/nav_top_bg.jpg);*/
    background-repeat: repeat-x;
    background-position: left bottom;
    border-color: transparent;
}

.navbar-brand {
	padding:0px 15px !important;
	}

.blueline {
	background:#048b00;
	height:3px;
    box-shadow: 5px 5px 10px 3px rgba(0,0,0,0.3);	
}


/*---- logo ----*/

#panel_logo {
	display: flex;
	margin: 0 auto;
	text-align: center;
}
	
#panel_logo span {
	position: absolute;
    top: 32%;
	padding: 0 10px;
	font-size:30px;
	color:#000;
}

#panel_logo div {
	display: flex;
	align-items: center;
}

#panel_logo span a { 
	/*margin-top:18px;*/
	color:#000;
	line-height:30px;	
}

#box_top {
	background:#fff;
	opacity: 0.69;
}


#panel_logo a {
	height: auto;
}

#panel_logo img {
    width: 50px;
    height: auto;
	padding:10px 0px;
}

.navbar-brand>img {
	display:inline-block;
}

@media screen and (max-width: 1160px){

	#nav_top {
		width: 100%;
	}
}

@media screen and (min-width: 768px){

	#nav_top {
		margin: auto;
	}
}	

/*---- 一般民眾 ----*/
.people {
	/*background:url(../img/login_bg.jpg) center top no-repeat #6aa1bf;*/
	background:#fff;
	min-height:550px;
	border:5px solid #e4e4e4;	
	font-size:18px;
	box-shadow:0px 0px 30px 5px rgba(0,0,0,0.3);
	/*border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;	*/
	border-radius:10px;
	
}

#login_box h1 {
	font-size: 1.3em;
    background: #5bb4ff;
    color: #484d50;
    padding: 15px 20px;
    margin: -10px -5px 0px -5px;
    position: relative;
    z-index: 999;
	margin-bottom:15px;		
	border-top-left-radius:10px;
	border-top-right-radius :10px;
	
	background: linear-gradient(270deg, #fafafa 25%, #e4e4e4 82%);
	background: -moz-linear-gradient(270deg, #fafafa 25%, #e4e4e4 82%);
	background: -webkit-linear-gradient(270deg, #fafafa 25%, #e4e4e4 82%);
	background: -o-linear-gradient(270deg, #fafafa 25%, #e4e4e4 82%);
}

#login-box-name {
	float: left;
    display: inline;
    width: 20%;
    text-align: right;
    padding: 0px 10px 0 0;
    margin: 10px 0 7px 0;
	font-size:18px;
}

.form-login {
	width: 80%;
    padding: 10px 4px 6px 3px;
    border: 1px solid #ccc;
    background-color:transparent;
    font-size: 16px;
    color: #000;
	border-radius:3px;
}

.form-code {
	width: 15%;
    padding: 10px 4px 6px 3px;
    border: 1px solid #0d2c52;
    background-color:transparent;
    font-size: 16px;
    color: #000;
	border-radius:3px;
}

#login_box .form-control {
	
}

#login_box select {
    border: 1px solid #0d2c52;
    background-color:transparent;
    font-size: 16px;
    color: #000;
	border-radius:3px;
	width:100%;
	margin-right:10px;
	height:auto;	
	}

.list {
    margin: 0px 20px;
}

.list a {
	color:#484d50;
}

.list a:hover {
	color:#038c00;
}

.list .date {
	color:#3277ba;
	margin-top:3px;
}

.list1 {
	float: left;
    width: 100%;
}


#login-box-field {
	margin-top:10px;
}

.glyphicon-calendar {
	margin-left:-30px;
}

.form-group img {
	margin-top:-8px;
}

.form-group span {
	/*margin:0px 10px;*/
}

.form-group a span {
	text-align:center;	
	color: #3277ba;
}

.form-group a span:hover {
	text-decoration:none;
}

.foot {
	/*background:url(../img/foot_bg.png) top left repeat-x;
	height: 37px;
    margin-top: 1px;*/
	text-align: center;
	margin-top:30px;
}

.foot button {
	margin-top:0px;
	text-align:center;
}

.btn-primary {
	font-size:20px;
	border:none;
	margin:0px 10px;
	padding:8px 20px;
	right:20px;
	
	background: linear-gradient(270deg, #0077c0 25%, #003374 82%);
	background: -moz-linear-gradient(270deg, #0077c0 25%, #003374 82%);
	background: -webkit-linear-gradient(270deg, #0077c0 25%, #003374 82%);
	background: -o-linear-gradient(270deg, #0077c0 25%, #003374 82%);
	}

.btn-primary:hover {
	background:#003374;
	}
	

/*---- 單位 ----*/
.apply {
	text-align:center;
	margin: 40px 0px 15px 0px;
    display: block;
}

.apply a {
	margin:20px 10px;
}

.apply a:hover {
	text-decoration:underline;
}

.lock_bg {
	/*background:url(../img/lock_bg.png) no-repeat;
	background-position: 30px 270px;
	padding-bottom: 150px;*/
	}



@media screen and (max-width: 991px){
	
.foot {
	margin-bottom:20px;
}
	
	#login_box {
		margin-bottom:0px;
	}
	
	/*#panel_logo span {
		position:inherit;
		width:100%;
		text-align:center;
	}*/
	
			.people {
		min-height:auto;
		    padding-bottom: 20px;
			margin:0px 0px 30px 0px;
	}


.navbar {
	   margin-bottom: 0px; 
}

.left_bg {
	background:none;
}

.right_bg {
	background:none;
}
.lock_bg {
	background:none;
	background-position: 0px 0px;
	padding-bottom: 0px;
	}
	
}

@media screen and (max-width: 768px){
		#panel_logo span a {
	font-size:20px;
	line-height:24px;
	margin-bottom:10px;
}
	.form-inline .form-group {
		    display:block;
	}
	
	.form-login {
    width: 90%;
    margin: 0px 5%;
}

#login-box-name {
    width: auto;
    margin: 0px 5%;
}

.glyphicon-calendar {
    margin-left: -60px;
}

#login_box select {
    margin: 0px 5%;
    width: 90%;
}

.form-code {
    width: 90%;
    margin: 0px 5%;
}

.form-group img {
    margin: 10px 5%;
}

}

@media screen and (max-width: 480px){
	
	#panel_logo span {
		   font-size:20px;
	}	

	.navbar-header {
		margin: 0 auto;
	}
}

.container-fluid {
	justify-content: center !important;
}

#userInfo {
	list-style: none;
	padding-left: 0 !important;
}

#btnSubmit {
	width: 80%;
}