/* constant */

@font: 'Ubuntu','微軟正黑體', 'Microsoft JhengHei', sans-serif;
@mainGreen: #008791;
@mainGrey:#77787b;
@lightgrey: #ededed;
@resFontsize: 28px;



body{
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	position: relative;
	font-family: @font;
	background-color: #f9f9f9;
}
.container{
	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
}

.headerWrapper{
	width: 100%;
	height: 100%;
	float: left;
	margin:0;
	padding:10px;

	.logo{
		width: auto;
		float:right;

		img{
			height:77px;
		}
	}
}

.menuWrapper{
	width: 100%;
	height: 60px;
	background: @mainGreen;
	float: left;

	ul{
		width: 100%;
		height: 100%;
		margin: 0;
		display: table;
	}

	li.menu{
		width: ((1/7)*100%);
		height: auto;
		color: white;
		/* float: left; */
		display: table-cell;
		text-align: center;
		font-size: 16px;
		vertical-align: middle;
        position:relative;
        a {
        	color: #fff;
        }
	}
    .menu.active::after{
            content:"";
            position:absolute;
            width:70%;
            height:5px;
            background: white;
            bottom:0px;
            left:15%;
        }

	&:after{
		clear: both;
	}

}

.contentWrapper{
	width: 100%;
	max-width: 960px;
	height: 100%;
	display: block;
	margin: 0 auto;

	.submenuContainer{
		width: 100%;
		height: 40px;
		float: left;
		margin: 20px 0 0 0;

		.submenu{
			width: auto;
			height: 100%;
			color: @mainGrey;
			font-size: 14px;
			line-height: 40px;
			text-align: center;
			background-color: #d5c4ac;
			border-radius: 0 10px 0 0;
			display: inline-block;
			padding: 0 15px;
			a {
				color: @mainGrey;
			}
		}

		.submenu.active{
			color: white;
			background-color: #998675;
			a {
				color: #fff;
			}
		}
	}

	.formContainer{
		width: 100%;
		height: 100%;
		display: block;
		float: left;
		background-color: #e3ede7;
		padding: 30px 30px;
		color: @mainGrey;

		.row{
			width: 100%;
			height: auto;
			float: left;
			margin: 10px 0;

			.subtitle{
				font-weight: bold;
				font-size: 16px;
				color: black;
				padding:20px 0 20px 0;
			}
			.sublegendWrapper,.input{
				.subgroup{
					display: inline-block;
					margin:0;
				}
				.sg1{
					text-align: center;
					text-decoration: underline;
				}
			}
			.sublegend{
				display: inline-block;
				font-size: 14px;
				width: 24%;
				height: 40px;
				text-align: center;
				padding: 0 10px;
			}
			.sublegend1{
				display: inline-block;
				font-size: 14px;
				width: 30%;
				height: 40px;
				text-align: center;
				padding: 0 10px;
			}

			.legend,.input,.sublegendWrapper{
				float: left;
				display: block;
			}

			.input.cs>div{
				width: 24%;
				text-align: center;
				display: inline-block;
			}

			.subgroup.ls>div{
				width: 30%;
				text-align: center;
				display: inline-block;
			}

			.exp{
				display: inline-block;
			}

			.innerRow{
				width: auto;
				margin: 0;
				text-align: center;
			}
		}
		.require:after{
			content: " *";
			color: red;
			font-size: 13px;
		}
	}
}

.uniButton{
	float: right;
	margin-bottom: 20px;
}
input + label{
            display: inline-block;
        }