@import url('css.css');


html, body, ul, li, h1, h2, h3, h4, h5, h6, p, fieldset, legend {padding:0; margin:0;}
body {font-family:'Helvetica W01 Light', Helvetica, Arial, "微軟正黑體","Microsoft Jhenghei",sans-serif;}




a{	outline: none; 
	behavior:expression(this.onFocus=this.blur());     
	text-decoration: none;

	cursor: pointer;
}	  
img {border: 0px; display: block;}	  
ul,li {list-style-type:none; text-transform:none;}
input{-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -webkit-box-shadow:  0px inset;-moz-box-shadow:  0px inset; box-shadow:  0px inset; box-sizing:border-box; -moz-box-sizing:border-box;  -webkit-box-sizing:border-box;  outline: none; -webkit-appearance:none;}
.clean{ clear: both;}
.br_mobileOnly{ display: none;}
.pc_only{ display: block;}
.mobile_only{ display: none;}
.mb5{ margin-bottom: 5px !important;}
.clean{ clear: both; }
 








.btn_center_row{ overflow: hidden; text-align: center; margin:50px 0 0 0px;}
.btn_center_row li{ display: inline-block; margin: 10px;}
.btn_center_row li a{ display: block; background: #b2cb52; width: 250px; text-align: center; color: #fff; padding: 10px 0px; font-size: 18px; text-transform: uppercase; font-family: Oswald; font-weight: 500;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
}
.btn_center_row li a:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.btn_center_row li a:hover, .btn_center_row li a:focus, .btn_center_row li a:active {
	color: #fff;
}
.btn_center_row li a:hover:before, .btn_center_row li a:focus:before, .btn_center_row li a:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}






.btn_more_left{ display: block; background: #b2cb52; width: 250px; text-align: center; color: #fff; padding: 10px 0px; font-size: 18px; text-transform: uppercase; font-family: Oswald; font-weight: 500; margin: 50px 0 0 0;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
}
.btn_more_left:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
.btn_more_left:hover, .btn_more_left:focus, .btn_more_left:active {
	color: #fff;
}
.btn_more_left:hover:before, .btn_more_left:focus:before, .btn_more_left:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}



.hit_full_white{ background: url(../image/hit_full_white.png) repeat left top; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.hit_full_gray{ background: url(../image/hit_full_gray.png) repeat left top; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.hit_full_black{ background: url(../image/hit_full_black.png) repeat left top; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}






.head_full{ width: 100%; height: auto; background: rgba(0,0,0,0.8); position: fixed; top: 0px; left: 0px; z-index: 1005;}
.head_colorline{ width: 100%; height: 5px; background: #b2cb52;}
.head_center{ max-width: 1200px; margin: 0 auto; overflow: hidden; position: relative;}
.head_logo{ width: 200px; margin: 20px 0 20px 20px; display: block; float: left;}
.head_logo img{ width: 100%;}

.head_menu_list{ display: block; overflow: hidden; float: right; margin: 38px 0px 0px 0px;}
.head_menu_list li{ display: inline-block; float: left; border-right: 1px solid #b2cb52;}
.head_menu_list li:last-child{ border-right: 0px solid #b2cb52;}

.head_menu_list li a{ display: block; font-size: 14px; font-weight: bold; color: #b2cb52; text-transform: uppercase; padding: 0px 20px; 
	-moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;
}
.head_menu_list li a:hover{ color: #fff;}
.head_menu_list li a.active{ color: #fff;}





.kv_row_full{overflow: hidden; width: 100%;}
.kv_row_center{width: 100%; min-height: 580px; max-height: 1200px; overflow: hidden; margin: 0px auto 0 auto; position: relative; }
.kv_img_list{ overflow: hidden; position: relative;}
.kv_img_list li img{ width: 100%; min-width: 1200px;}
.kv_img_list li p{ font-size: 50px; color: #fff; font-family: Oswald; font-weight: 500; width: 100%; text-align: center; text-transform: uppercase; position: absolute; top: 55%; left: 50%;
	transform:  translate(-50%, -50%); -ms-transform:  translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform:  translate(-50%, -50%); -o-transform:  translate(-50%, -50%);
}
.kv_img_list li p span{ font-size: 26px; color: #fff; font-family: Oswald; font-weight: 400; display: block;}
.video_hit_full{ background: url(../image/video_hit_full.png) repeat left top; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}



.index_about_row_full{overflow: hidden; width: 100%; background: #f2f1f1; position: relative;}
.index_about_row_center{ max-width: 1200px; margin: 150px auto 150px auto; position: relative;}

.index_about_bg1{ background: url(../image/index_about1.jpg) no-repeat right bottom #4095b5; background-size: cover;}
.index_about_text1{ margin: 0 0 0 100px; width: 45%;}
.index_about_text1 h2{ font-size: 30px; line-height: 42px; color: #fff; font-family: Oswald; font-weight: 500; text-transform: uppercase; margin-bottom: 20px;}
.index_about_text1 p{ font-size: 14px; line-height: 22px; text-align: justify; color: #fff;}




.index_project_row_full{overflow: hidden; width: 100%; background: #fff; position: relative; margin: 0px auto 0 auto;}
.index_project_row_center{max-width: 1200px; margin: 100px auto 100px auto; position: relative;}

.index_project_row_center h2{ font-size: 30px; font-family: Oswald; font-weight: 500; text-align: center; text-transform: uppercase; margin-bottom: 25px;}
.index_project_row_center h3{ text-align: center; font-size: 20px; color: #666; margin-bottom: 20px; font-weight: 300;}

.index_project_list{ overflow: hidden; margin: 0 0px;}
.index_project_list li{ width: calc(100%/4); float: left; display: inline-block; padding: 0 20px 30px 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.index_project_list li .index_project_list_img{ position: relative; background: #000;}
.index_project_list li .index_project_list_img img{ width: 100%; display: block;
	-webkit-filter:grayscale(1);
	-moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;
}
.index_project_list li .index_project_list_img_tips{ position: absolute; top: 0; left: 0; padding: 3px 10px; font-size: 14px; background: #000; color: #fff; font-family: Oswald; font-weight: 400; }
.index_project_list li .index_project_name{ font-size: 18px; line-height: 20px; font-weight: bold; color: #555; margin: 10px 0 0 0; padding: 0 0 5px 0; text-align: left;}
.index_project_list li .index_project_content{ font-size: 14px; line-height: 20px; color: #666; margin: 0px 0 0 0; padding: 10px 0 0 0; text-align: justify; border-top: 1px solid #ccc;}

.index_project_list li:hover .index_project_list_img img{ -webkit-filter:grayscale(0);}






.index_products_list{ overflow: hidden; margin: 0 0px;}
.index_products_list li{ width: calc(100%/2); float: left; display: inline-block; padding: 0 20px 30px 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.index_products_list li .index_project_list_img{ position: relative; background: #000;}
.index_products_list li .index_project_list_img img{ width: 100%; display: block;
	-webkit-filter:grayscale(1);
	-moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;
}
.index_products_list li .index_project_list_img_tips{ position: absolute; top: 0; left: 0; padding: 3px 10px; font-size: 14px; background: #000; color: #fff; font-family: Oswald; font-weight: 400; }
.index_products_list li .index_project_name{ font-size: 18px; line-height: 20px; font-weight: bold; color: #555; margin: 10px 0 0 0; padding: 0 0 5px 0; border-bottom: 1px solid #ccc;}
.index_products_list li .index_project_content{ font-size: 14px; line-height: 20px; color: #666; margin: 10px 0 0 0; text-align: justify;}

.index_products_list li:hover .index_project_list_img img{ -webkit-filter:grayscale(0);}







.page_about_row_full{overflow: hidden; width: 100%; background: #f2f1f1; position: relative;}
.page_about_row_center{ max-width: 1200px; margin: 150px auto 150px auto; position: relative;}

.page_about_text{ margin: 0 100px 100px 100px; }

.page_about_row_center h2{ font-size: 30px; line-height: 42px; text-align: center; font-family: Oswald; font-weight: 500; text-transform: uppercase; margin-bottom: 20px;}
.page_about_row_center h3{ font-size: 16px; line-height: 26px; text-align: justify; }
.page_about_row_center p{ font-size: 14px; line-height: 22px; text-align: justify; }



.service_item_list{ overflow: hidden; margin: 0 -10px; background: url(../image/hit_full_gray.png) repeat left top; padding: 20px 20px;}
.service_item_list li{ width: calc(100%/2); float: left; display: inline-block; padding: 0px 10px 30px 10px;  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.service_item_list li .service_item_list_img{ position: relative; float: left; width: 40%;}
.service_item_list li .service_item_list_img img{ width: 100%;}
.service_item_list li .service_item_list_text{ margin: 25px 0 0 0; width: 60%; float: right; }
.service_item_list li .service_item_list_text h3{ font-size: 18px; line-height: 20px; font-weight: bold; text-transform: uppercase; margin: 0 0 10px 0;}
.service_item_list li .service_item_list_text p{ line-height: 18px;}


.page_contact_row_full{overflow: hidden; width: 100%; background: #f2f1f1; position: relative;}
.page_contact_row_center{ max-width: 1200px; margin: 150px auto 150px auto; position: relative;}
.page_contact_text{ margin: 0 100px 30px 100px; }
.page_contact_row_center .page_contact_text h2{ font-size: 30px; line-height: 42px; text-align: center; font-family: Oswald; font-weight: 500; text-transform: uppercase; margin-bottom: 20px;}
.page_contact_row_center .page_contact_text h3{ font-size: 16px; line-height: 26px; text-align: justify; }
.page_contact_row_center .page_contact_text p{ font-size: 14px; line-height: 22px; text-align: justify; }
.page_contact_info{ margin: 0 100px 30px 100px; overflow: hidden; font-size: 14px; line-height: 22px; }
.page_contact_info .ch{ width: 50%; float: left; }
.page_contact_info .en{ width: 50%; float: right; }
.page_contact_info a{ color: #000; text-decoration: none;}
.page_contact_info a:hover{ color: #000; text-decoration: underline;}
.page_contact_map{ margin: 0 100px 0 100px; }



.footer_full{overflow: hidden; width: 100%; background: #333;}
.footer_center{width: 1200px;  margin: 0px auto; padding: 50px 0; overflow: hidden; border-top: 1px solid #988b5c;}
.footer_center .footer_copyright{ float: left;  margin: 0 0 0 20px; }
.footer_center .footer_copyright .footer_copyright_logo{ width: 150px; margin-bottom: 35px;}
.footer_center .footer_copyright .footer_copyright_logo img{ width: 100%;}
.footer_center .footer_copyright p{ display: block; color: #999; font-size: 14px; line-height: 20px; }

.footer_center .footer_contact{ font-size: 14px; float: left; color: #b2cb52; line-height: 24px; margin: 0 0 0 50px; padding: 0 0 0 50px; border-left: 1px solid #424d16;}

.footer_center a{ color: #b2cb52; text-decoration: none;}
.footer_center a:hover{ color: #fff; text-decoration: underline;}



.footer_center .footer_link_list{ overflow: hidden; float: right;}
.footer_center .footer_link_list li{ display: inline-block; float: left; border-right: 1px solid #b2cb52; text-transform: uppercase;}
.footer_center .footer_link_list li:last-child{ border-right: 0px solid #b2cb52;}










.remodal{ width: 80%;}

.remodal_project_text{ width: 100%; text-align: left; font-size: 16px;  text-align: justify;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
.remodal_project_text .project_date{ margin: 0px 20px 0px 0px; display: inline-block;}
.remodal_project_text .project_name{ margin: 0 0 0 0px; display: inline-block;}
.remodal_project_text p span{ color: #888;}
.remodal_project_text .project_info{ margin: 20px 0 20px 0; padding: 20px 0 0 0; font-size: 14px; line-height: 24px; border-top: 1px solid #ccc;}

.btn_visit{ display: block; text-align: center; border: 1px solid #000; color: #fff; background: #000; margin: 30px 0 30px 0; padding: 6px 50px 7px 50px; font-size: 14px; 
	-moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.btn_visit:hover{ border: 1px solid #000; background: #fff; color: #000;}

.remodal_project_img_list{  overflow: hidden; margin: 0 -10px;}
.remodal_project_img_list li{ width: calc(100%/1); padding: 10px; float: left; display: inline-block; position: relative;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
.remodal_project_img_list li img{ width: 100%; margin-bottom: 0px;}
.remodal_project_img_list p{ background: rgba(0,0,0,0.8); width: calc(100% - 20px); color: #fff; text-align: justify; font-size: 14px; position: absolute; bottom: 10px; left: 10px; padding: 10px;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}

.remodal_project_img_list li.youtube_box{ width: calc(100%); height: 500px;}
.remodal_project_img_list li iframe{ width: 100%; height: 100%; display: block;}







.icon_menu,.icon_close{ display: none;}


@media screen and (max-width: 899px) {
	
	.br_pcOnly{ display: none !important;}
	.br_mobileOnly{ display: block !important;}
	.pc_only{ display: none !important;}
	.mobile_only{ display: block !important;}
	
	
	
	
	.head_full{height: 65px!important;}
	.head_center{ width: 100%;}
	.head_logo{ margin-left: 10px; margin-top: 10px!important; width: 150px!important;}	
	.icon_menu{ display: block; float: right; margin: 10px 10px 0 0!important; width: 40px!important;}	
	.icon_menu img{ width: 100%;}
	
	
	.head_menu_list{ display: none; background: rgba(0,0,0,0.9); position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index:2000; overflow: scroll; margin: 0px !important; }
	.head_menu_list li{ display: block; width: 100%; border-right: 0px solid #b2cb52;}
	.head_menu_list li a{ text-align: center; font-size: 20px; padding: 15px 20px;}
	.icon_close{ display: block; float: right; width: 40px; margin: 15px 10px 0 0;}
	.icon_close img{ width: 100%;}












	
		
	
	.footer_center{ width: auto;}
	
	
	.remodal{ width: 100%; margin: 0px !important; padding: 20px !important;}
	.remodal_project_text{ width: auto; float: left; padding-left: 0px; margin-bottom: 30px;}
	.remodal_project_img{ width: auto;}
	

		
		
}