@charset "utf-8";

/*google font*/
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600');

/* CSS Document */
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;}
/* body {font-family: 'Oswald', "微軟正黑體","Microsoft Jhenghei",sans-serif; font-weight: 300; background: #fff;} */
/* body{font-family: 'PT Sans', sans-serif, "微軟正黑體","Microsoft Jhenghei",sans-serif; overflow-x: hidden;} */


a{	outline: none; /* for Firefox Google Chrome  */
	behavior:expression(this.onFocus=this.blur()); /* for IE */    
	text-decoration: none;
/* 	-moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; */
	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; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ 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; }
 
/********************************************************************************************************************************************************************/


/*一開始宣告*/



/*common*/
.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: #000; /* background: #77899f; */ 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: #3d5776;
	-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{ background: #ff0000 url(../image/btn_arrow.png) no-repeat right 10px center;} */
.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: #3d5776; 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*/
.head_full{ width: 100%; height: auto; background: #3d5776; position: fixed; top: 0px; left: 0px; z-index: 1005;}
.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 #fff;}
.head_menu_list li:last-child{ border-right: 0px solid #3d5776;}

.head_menu_list li a{ display: block; font-size: 14px; font-weight: bold; color: #fff; 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: #dfe4ea;}
.head_menu_list li a.active{ color: #dfe4ea;}



/*index **************************************************************************************************/

/*index_about*/
.index_about_row_full{overflow: hidden; width: 100%; position: relative; margin-top: 100px; background: url(../image/index/index_about_bg.jpg) no-repeat right bottom #000; background-size: cover;}
.index_about_row_center{ max-width: 1200px; margin: 100px auto 100px auto; position: relative;}

.index_about_logo{ text-align: center;}
.index_about_logo img{ margin: auto; width: 200px;}
.index_about_text1{ width: 60%; margin: 0 auto 0 auto; text-align: center; color: #fff;}
.index_about_text1 h2{ font-size: 30px; line-height: 42px; font-family: Oswald; font-weight: 500; text-transform: uppercase; margin-bottom: 20px;}
.index_about_text1 p{ font-size: 16px; line-height: 24px; /* text-align: justify; */}
.index_about_text1 a{ display: inline-block; margin: auto;}


/*index_project*/
.index_project_row_full{overflow: hidden; width: 100%; background: #f2f1f1; 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);}
.index_project_list li .index_project_name{ font-size: 16px; line-height: 20px; font-weight: bold; color: #3d5776; 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_remodal{ width: 80%;}
.index_project_remodal_text{ width: 100%; text-align: left; font-size: 16px; /* text-transform: uppercase; */ text-align: justify;
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
}
.index_project_remodal_text .project_name{ font-size: 20px; color: #3d5776; font-weight: bold; margin: 0 0 0 0px; display: inline-block;}
.index_project_remodal_text p span{ color: #888;}
.index_project_remodal_text .project_info{ margin: 20px 0 20px 0; padding: 20px 0 0 0; font-size: 14px; line-height: 24px; border-top: 1px solid #ccc;}


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

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



/*page all use **************************************************************************************************/
.page_row_full{overflow: hidden; width: 100%; background: #f2f1f1; position: relative;}
.page_row_center{ max-width: 1200px; margin: 200px auto 100px auto; position: relative;}

.page_block{ margin: 0 100px 100px 100px; }
.page_block>h2{ font-size: 30px; line-height: 30px; text-align: center; font-family: Oswald; font-weight: 500; text-transform: uppercase; margin-bottom: 30px;}
.page_block>h3{ font-size: 20px; line-height: 26px; text-align: center; margin-bottom: 20px; color: #3d5776;}
.page_block>h4{ font-size: 16px; line-height: 26px; margin-bottom: 20px; color: #3d5776; text-align: justify;}
.page_block>p{ font-size: 14px; line-height: 22px; text-align: justify; margin-bottom: 20px;}

.block_2part{ overflow: hidden;}
.block_left{ width: 49%; float: left; border-right: 1px solid #ccc;}
.block_right{ width: 49%; float: right;}


/*page_about **************************************************************************************************/
.about_report_list{ overflow: hidden; margin: 0 -20px;}
.about_report_list li{ width: calc(100%/4); float: left; display: inline-block; padding: 0 20px 20px 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.about_report_list li .about_report_list_img{ position: relative; background: #000;}
.about_report_list li .about_report_list_img img{ width: 100%; display: block;}

.remodal_about_report{ max-width: 500px;}
.remodal_about_report img{ width: 100%;}

.customers_list{ overflow: hidden;}
.customers_list li{ list-style: disc; margin: 10px 0 10px 20px; font-size: 16px; color: #365779;}


/*page_products*/
.products_list{ overflow: hidden; margin: 0 -20px;}
.products_list li{ width: calc(100%/5); float: left; display: inline-block; padding: 0 20px 20px 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.products_list li .products_list_img{ position: relative; background: #000; overflow: hidden; border: 5px solid #9eabba;
	-webkit-border-radius: 5000px;
	-moz-border-radius: 5000px;
	border-radius: 5000px;
}
.products_list li .products_list_img img{ width: 100%; display: block;}
.products_list li h4{ text-align: center; font-size: 14px; margin: 5px 0 0 0; color: #3d5776;}


/*page_project*/
.project_list{ overflow: hidden; margin: 0 -20px;}
.project_list li{ width: calc(100%/3); float: left; display: inline-block; position: relative; padding: 0 20px 20px 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.project_list li a{ display: block; background: #77899f; color: #fff; overflow: hidden; padding: 0; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;}
.project_list li a:hover{ background: #3d5776; color: #fff;}
.project_list li .project_list_num{ width: 65px; height: 50px; line-height: 50px; float: left; font-size: 30px; font-family: Oswald; font-weight: 500; text-align: center; background: #3d5776; color: #fff;}
.project_list li .project_list_name{ float: left; padding: 0 10px; line-height: 50px; font-size: 16px; vertical-align: middle;}
.project_list li:after{ content: ""; position: absolute; right: 35px; top: 50%; margin-top: -14px; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}

.project_remodal{ width: 600px; background: #fff !important; padding: 30px !important;}
.project_remodal .project_remodal_title{ color: #3d5776; margin: 0 0 10px 0;}
.project_remodal .project_open_img_box{ }
.project_remodal .project_open_img_list{ /* width: 50%; float: left; border: 0px solid #ccc; overflow: hidden; */}
.project_remodal .project_open_img_list li{ /* overflow: hidden; */ }
.project_remodal .project_open_img_list li img{ width: 100%; display: block;}


/*page_video*/
.video_list{ overflow: hidden; margin: 0 -20px 20px -20px;}
.video_list li{ width: calc(100%/3); float: left; display: inline-block; padding: 0 20px 30px 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.video_list li .video_list_img{ position: relative; background: #000;}
.video_list li .video_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;
}
.video_list li:hover .video_list_img>img{ -webkit-filter:grayscale(0);}
.video_list li .video_list_img .icon_play{ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; z-index: 1;}
.video_list li .video_list_img .icon_play img{ width: 50px;}
.video_list li h4{ text-align: center; color: #3d5776; font-size: 14px; margin: 5px 0 0 0;}

.video_remodal{ width: 80%;}
.video_remodal_name{ color: #3d5776; margin: 0 0 10px 0;}
.youtube_box{ width: calc(100%); height: 500px;}
.youtube_box iframe{ width: 100%; height: 100%; display: block;}


/*page_contact*/
.page_contact_info{ margin: 0 0 30px 0; overflow: hidden; font-size: 14px; line-height: 22px; }
.page_contact_info .company_area{ background: #9eabba; text-align: center; padding: 5px 10px; margin-bottom: 20px; font-size: 16px; color: #fff; font-weight: bold;  border-bottom: 1px dashed #9eabba;}
.page_contact_info .ch{ width: 50%; float: left; padding: 0 10px 0 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.page_contact_info .en{ width: 50%; float: right; padding: 0 0 0 10px ; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.page_contact_info .company_name{ font-size: 16px; color: #365779; font-weight: bold; margin-bottom: 5px;}
.page_contact_info a{ color: #000; text-decoration: none;}
.page_contact_info a:hover{ color: #000; text-decoration: underline;}
.page_contact_map{ margin: 0; }


/*footer*/
.footer_full{overflow: hidden; width: 100%; background: #fff; /* border-top: 2px solid #9eabba; */}
.footer_center{width: 1200px;  margin: 0px auto; padding: 50px 0; overflow: hidden;}
.footer_center .footer_copyright{ float: left;  margin: 0 0 0 20px; }
.footer_center .footer_copyright .footer_copyright_logo{ width: 220px;}
.footer_center .footer_copyright .footer_copyright_logo img{ width: 100%;}
.footer_center .footer_copyright p{ display: block; color: #365779; font-size: 14px; line-height: 20px; }

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

.footer_center a{ color: #365779; text-decoration: none;}
.footer_center a:hover{ color: #365779; 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 #3d5776; text-transform: uppercase;}
.footer_center .footer_link_list li:last-child{ border-right: 0px solid #3d5776;}










/* RWD *******************************************************************************************************************************************************************/

.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;}
	
	
	
	/*common*/
	.btn_center_row{ margin: 30px 0 0 0px;}
	
	
	
	/* head */
	.head_full{height: 65px!important;}
	.head_center{ width: 100%;}
	.head_logo{ margin: 10px 0 10px 10px!important; width: 150px!important;}	
	.icon_menu{ display: block; float: right; margin: 15px 15px 0 0!important; width: 35px!important;}	
	.icon_menu img{ width: 100%;}
	
	/* menu */
	.head_menu_list{ display: none; /* background: rgba(0,0,0,0.9); */ background: #3d5776; 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 #3d5776;}
	.head_menu_list li a{ text-align: center; font-size: 20px; padding: 15px 20px;}
	.icon_close{ display: block; float: right; width: 35px; margin: 15px 15px 0 0;}
	.icon_close img{ width: 100%;}

	/*index */
	.index_about_row_full{ margin-top: 65px;}
	.index_about_row_center{ margin: 50px auto 50px auto;}
	.index_about_logo img{ width: 150px;}
	.index_about_text1{ width: auto; margin: 0 20px 0 20px; text-align: justify;}
	
	.index_project_row_center{ margin: 50px auto 50px auto;}
	.index_project_row_center h2{ font-size: 26px;}
	.index_project_list li{ width: calc(100%/1);}
	
	.index_project_remodal_img_list li{ width: calc(100%/1);}
	
	/*page all use */
	.page_row_full{ margin-top: 65px;}
	.page_row_center{ margin: 50px auto 50px auto;}
	.page_block{ margin: 0 20px 50px 20px;}
	.page_block>h2{ font-size: 26px; margin-bottom: 20px;}
	
	/*page_about */
	.about_report_list{ margin: 0 -10px;}
	.about_report_list li{ width: calc(100%/2); padding: 0 10px 20px 10px;}
	.block_left{ width: auto; float: none; border-right: 0px solid #ccc;}
	.block_right{ width: auto; float: none;}
	
	/*page_products*/
	.products_list{ margin: 0 -10px;}
	.products_list li{ width: calc(100%/2); padding: 0 10px 20px 10px;}
	
	/*page_project*/
	.project_list li{ width: calc(100%/1);}
	
	/*page_video*/
	.video_list li{ width: calc(100%/1);}
	.youtube_box{ height: 300px;}
	
	/*page_contact*/
	.page_contact_info .ch{ width: auto; float: none; padding: 0 0 20px 0;}
	.page_contact_info .en{ width: auto; float: none; padding: 0 0 0 0;}







	
		
	/*footer*/
	.footer_center{ width: auto;}
	.footer_center .footer_copyright{ float: none; margin: 0 0 20px 20px;}
	.footer_center .footer_contact{ margin: 0 0 0 20px; padding: 0; float: none; border-left: 0px solid #ccc;}
	
	/*remodal project open *********************************************************************************************************************************************************************/
	.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;}
	

		
		
}