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

body { margin:0;font-family: "微軟正黑體";color:#000000; }
.all_background{
	/*background-image: url('/images/green.jpg');*/
	background-size: cover;
	width: 100%;
    height: 100%;
    position: fixed;
    z-index: -2;
}
.header{
	width: 80%;
	text-align: center;
	margin: 0 auto;
	padding: 50px 0;

}
.header >div{
	/*color:#ffffff;*/
	border: 5px solid #1CFF94;
	border-radius:100px;
	height: 100px;
	width: 100px;
	display: inline-block;
	margin: 0 5%;
	line-height: 100px;
	
}
.header >span{
	border-top: 15px solid transparent;
    border-left: 25px solid #6EF1B2;
    border-bottom: 15px solid transparent;
    display: inline-block;

}
.header >.active{
	background-color: #6EF1B2;
	
}

.outside{ text-align: center; height: auto;}

.product_background{
	width: 100%;
    height: 100%;
    position: fixed;
    background: #505050;
    opacity: 0.9;
    z-index: -1;
}
input{
	border-radius:4px;
	border: 1px solid #42946d;
	padding: 10px 5px;
	background-color: #ffffff;
	font-size: 16px;
}

.clear{
	clear: both;
}
.main{
    line-height: 1.5em;
    /*position: absolute;*/
    /*top: 20%;
    left: 50%;*/
    /*width: 400px;*/
    /*margin-left: -210px;*/
    background-color: #ffffff;
    opacity: 0.9;
    padding: 10px;
    border-radius:10px;
    width: 90%;
    margin: 0 auto;
}
.main >div{
	padding: 8px;
}
.main >input{
 	margin: 5px;
}

.main input[type="radio"]{
	width: 20px;
	height: 20px;
}
.main >div>div>label>span{
	position: relative;
	top:-4px;
}

.index_main{
	line-height: 1.5em;
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    margin-left: -36%;
    background-color: #ffffff;
    opacity: 0.9;
    padding: 10px 1%;
    border-radius:10px;
    margin-bottom: 20px;
}
.index_main >div{
	padding: 8px;
}
.index_main >input{
 	margin: 5px;

}


.logo{
	color: #ffffff;
    font-size: 30px;
    width: 100%;
    position: relative;
    text-align: center;
    padding: 5px 0;
    background: #8FC43E;
}
.logo >span{
	font-size: 16px;
	position: absolute;
	right: 10px;
	top :15px;
	
}
.logo a{
	color:#ffffff;
}
.contact{
	width: 90%;
    position: relative;
    background: #ffffff;
    top: 30%;
    left: 50%;
    margin-left: -46%;
    text-align: left;
    padding: 0 1%;
    margin-bottom: 20px;
    overflow: hidden;
}
.button_1{
	position: relative;
	margin:20px 0;
}
.product_logo{
	color:#ffffff;
	font-size: 50px;
	width: 200px;
	position: relative;
	top: 5%;
	left: 50%;
	margin-left: -100px;
	text-align: center;
}
.product_main{
	line-height: 1.5em;
    position: relative;
    top: 10%;
    left: 0;
    width: 100%;
    padding: 10px 0 ;
}

.contract_logo{
	color:#ffffff;
	font-size: 50px;
	width: 200px;
	position: relative;
	top: 10%;
	left: 50%;
	margin-left: -100px;
	text-align: center;
	padding: 10px 0;
}

.contract_main{
	line-height: 1.5em;
    position: relative;
    top: 10%;
    left: 50%;
    width: 80%;
    margin-left :-41%;    
    background-color: #ffffff;
    padding: 1%;
    border-radius:10px;
}
.contact input{
	border-color:red;
}
.row_product_top{
	color: #000000;
	display: inline-block;
	width:95%;
    background-color: #ffffff;
    opacity: 0.9;
    margin: 5px 0;
    font-weight: bolder;
	font-size: 20px;
}
.row_product_top >div{
	opacity:1;
	padding: 20px 0;
	float: left;
	display: inline-block;
	margin: 0 1%;
	width: 9%;
	text-align: left;
	line-height: 30px;
}
.row_product{
	color: #000000;
	
	display: inline-block;
	width:95%;
    background-color: #ffffff;
    opacity: 0.9;
    margin: 5px 0;
}
.row_product:first-child{
	color:#000000;
}

.row_product >div{
	opacity:1;
	padding: 20px 0;
	float: left;
	display: inline-block;
	margin: 0 1%;
	width: 9%;
	text-align: left;
	line-height: 30px;
}



.row_product >div>span>input{
	border: 1px solid #000000;
	width: 100%;
}
.row_product >div>span>img{
	width: 100%;
}
.row_product >div>h6{
	display: none;
}

.row_product:last-child{
	
}

.product_table{
	margin: 20px 0;
}

.product_list{
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-right: 1px solid #000000;
	display: inline-block;
	width: 100%;
	height: 70px;

}
.product_list >div{
	float: left;
	display: inline-block;
	width: 13%;
	border-left: 1px solid #000000;
	height: 50px;
	padding: 10px 1%;
}

.product_list:first-child{
	font-weight: bolder;
	text-align: center;
	background-color: #cccccc;
}

.product_list >div:first-child{
	text-align: center;
	width:5%;
}
.product_list >div>input{
	width:100%;
}

.product_list_other{
	border: 1px solid #000000;
	display: inline-block;
	width: 100%;
	text-align: right;	
}
.fontred{
	color:red;
}
.list_main{
	text-align: center;
	margin: 15% auto 0 auto;

}
.list_main >a>div{
	width: 90%;
	border:1px solid #42946d;
	margin: 20px auto;
	padding: 20px 0;
	cursor: pointer;
	border-radius: 10px;
	box-shadow:4px 4px 12px -5px rgba(47, 70, 50, 0.5);
}
a{
	text-decoration: none;
}
a:link{
	color:#000000;
}
.search_list{
	margin: 20px 10px 50px 10px;
}
.search_list >ul{
	display: flex;
    margin: 0;
    padding: 0;
    border-top: 1px solid #42946d;
    border-right: 1px solid #42946d;
}

.search_list >ul>li{
	display:  block;/*上層用了flex*/
	/*width: 22%;*/
    border-left: 1px solid #42946d;
    padding:2%;
    word-break:break-all;/*強制換行*/

}
.search_list >ul>li:first-child{
	width: 12%;
}
.search_list >ul>li:nth-child(2){
	width: 23%;
}
.search_list >ul>li:nth-child(3){
	width: 30%;
}
.search_list >ul>li:last-child{
	/*width: 26%;*/
}

.search_list >ul:first-child{
	background-color: #E6FFDE;
}

.search_list >ul:last-child{
	border-bottom: 1px solid #42946d;
}
.search_list button{
	-webkit-appearance: button;
	background-color: #ffffff;
	border:1px solid #42946d;
	box-shadow:4px 4px 12px -5px rgba(47, 70, 50, 0.5);
	cursor: pointer;
	width: 50px;
	height: 30px;
}


.service_list{
	margin: 20px 10px 50px 10px;
}
.service_list >ul{
	display: flex;
    margin: 0;
    padding: 0;
    border-top: 1px solid #42946d;
    border-right: 1px solid #42946d;
}

.service_list >ul>li{
	display:  block;/*上層用了flex*/
	/*width: 22%;*/
    border-left: 1px solid #42946d;
    padding:2%;
    word-break:break-all;/*強制換行*/

}
.service_list >ul>li:first-child{
	width: 12%;
}
.service_list >ul>li:nth-child(2){
	width: 32%;
}
.service_list >ul>li:nth-child(3){
	width: 20%;
}
.service_list >ul>li:last-child{
	/*width: 26%;*/
}

.service_list >ul:first-child{
	background-color: #E6FFDE;
}

.service_list >ul:last-child{
	border-bottom: 1px solid #42946d;
}
.service_list button{
	-webkit-appearance: button;
	background-color: #ffffff;
	border:1px solid #42946d;
	box-shadow:4px 4px 12px -5px rgba(47, 70, 50, 0.5);
	cursor: pointer;
	width: 50px;
	height: 30px;
}
.loading{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    z-index: 2000;
    opacity: 0.8;
    background-image: url('/images/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}



.manager_list{
	margin: 20px 10px 50px 10px;
}
.manager_list >ul{
	display: flex;
    margin: 0;
    padding: 0;
    border-top: 1px solid #42946d;
    border-right: 1px solid #42946d;
}

.manager_list >ul>li{
	display:  block;/*上層用了flex*/
	/*width: 22%;*/
    border-left: 1px solid #42946d;
    padding:2%;
    word-break:break-all;/*強制換行*/

}
.manager_list >ul>li:first-child{
	width: 12%;
}
.manager_list >ul>li:nth-child(2){
	width: 50%;
}
.manager_list >ul:first-child{
	background-color: #E6FFDE;
}

.manager_list >ul:last-child{
	border-bottom: 1px solid #42946d;
}
.manager_list button{
	-webkit-appearance: button;
	background-color: #ffffff;
	border:1px solid #42946d;
	box-shadow:4px 4px 12px -5px rgba(47, 70, 50, 0.5);
	cursor: pointer;
	width: 50px;
	height: 30px;
}

.bonus{
	margin: 10px 0;
	text-align: center;
}
.bonus >select{width: 30%;font-size: 16px;padding: 5px;}

@media screen and (max-width: 768px){
	.main{
		width: 90%;
	}
	.main >div>input{
		padding: 10px 5px;
		width:100%;
	}
	.index_main{
		text-align: left;
		width: 90%;
    	margin-left: -46%;
    	border-bottom: 1px solid #6EF1B2;
    	border-radius: 0px;
    	padding: 20px 1%;
    	font-size: 18px;
	}
	.index_main [type='radio']{
		width: 25px;
		height: 25px;
		position: relative;
    	top: 6px;
	}
	.header >div{
		width: 44px;
		height: 44px;
		line-height: normal;
		font-size:18px;
		border:none;
	}
	.header >span{
		border-top: 10px solid transparent;
	    border-left: 15px solid #6EF1B2;
	    border-bottom: 10px solid transparent;
	    display: inline-block;
	    position: relative;
    	top: -10px;
	}
	.contact input{
		width: 100%;
		padding:10px 0;
		border-color:red;
	}
	.contact input[type="radio"]{
		width: 20px;
		height: 20px;
	}
	.row_product{
		margin: 0;
	}
	.row_product >div>input{
		padding: 5px 0;
	}
	.contract_main input{
		padding: 10px 0px;
	}
	input[type="button"], input[type="submit"] , input[type="reset"]{
	    padding: 10px 5px;
	    -webkit-appearance: button;
    	cursor: pointer;
	}
	.contract_main{
		width: 90%;
		margin-left: -46%;		
	}

	/*product*/
	.row_product_top{
		display: none;
	}
	
	.product_contact{
    	width: 90%;
    	margin: 0 auto;
	}

	.row_product{
		width:100%;
		border-top:1px solid #42946d;
		border-left:1px solid #42946d;
		border-right:1px solid #42946d;
		margin: 10px 0;
	}

	.row_product >div{
		width: 98%;
		float: none;
		line-height: normal;
		padding: 0;
		border-bottom: 1px solid #42946d;
		margin: 0;
		padding: 0 1%;
	}
	.row_product >div>p{
		display: block;
		display: inline-block;
		font-size: 16px;
		font-weight: normal;
		width: 100px;
		background-color: #E6FFDE;
		padding:10px 0;
	}
	.row_product >div>span{
		padding: 0 16px;
		display: inline-block;
	}
	.row_product >div>img{
		width: 30%;
	}
	.row_product >div>span>input{
		width: 100px;
		padding: 10px 0;
	}
	
}