@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/



html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-x:hidden; overflow-y:scroll }
body, td, th { font-size:12px; font-family: 'Roboto Condensed', sans-serif; }
.iframe_ch { display:none }
.w100{ width:100%; }
.middle{ vertical-align:middle; }

.btn1{color:#FFF !important;font-size:15px !important;width:auto !important;padding: 20px 60px;border:1px solid #FFF;cursor:hand;cursor:pointer;}
.btn1:hover{ color:#d3474d !important; border:1px solid #d3474d; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
.btn2{color: #d3474d !important;font-size:15px !important;width:auto !important;padding: 15px 40px;border: 1px solid #d3474d;cursor:hand;cursor:pointer;display: inline-block;}
.btn2:hover{ color:#d3474d !important; background:#fcdadc; border:1px solid #d3474d; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
input, select, textarea{
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box; 
	-webkit-appearance: none;
}

.p_btn{ width:100%; margin:100px 0 35px 0; text-align:right; }
 

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#wrapper{ width:100%; margin:0 auto; padding-top:200px; }
#wrapper .common_wrap{max-width:1400px;min-height:800px;margin: 0px auto 0 auto;}

/*子選單*/
.submenu1{ font-size:18px !important; overflow:hidden; background:#fff; border:1px solid #EBEBEB; position:absolute; top: 130px;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
.submenu1 a{
 font-size:18px !important;
 color:#495963 !important;
 font-weight:normal !important;
 display:block !important;
 /* border-bottom:1px solid #dedede; */
 padding: 11px 25px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 }
.submenu1 a:hover{ color:#ffffff !important; background:#d3474d !important; }

nav { -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box { position: fixed; top: 0; left: 0; z-index: 4; padding: 0; width: 100%; background-color: #fff }
.header_box_main {animation: 1s ease-out 0s 1 transiTop20;max-width:1400px;/*overflow: hidden;*/margin-right: 70px;margin-left: 70px;margin: 15px auto 8px auto;}
.header_box_line { /*padding-bottom: 20px;*/ /*border-bottom: 2px solid #fff;*/ }
.header_box .header_box_main .logo_box {
 position: relative;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -o-transition: all .3s ease;
 transition: all .3s ease;
 -ms-transition: all .3s ease;
}
.header_box .header_box_main .menu {
 margin-top: 10px;
 margin-bottom: 0px;
 height: 100%;
 line-height: 25px;
 /*text-transform: uppercase;*/
 font-weight: 700;
 font-size: 14px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}
.header_box .header_box_main .menu { float: right!important }
.header_box .header_box_main .menu li {float: left;list-style: none;padding-right: 15px;padding-left: 15px;padding-bottom: 22px;}
.header_box .header_box_main .menu li a { }
.header_box .header_box_main .menu li img { padding:0 3px; }
.header_box .header_box_main .menu li a:hover { color: #d3474d }
/*原始選單*/
.header_box_scroll1 { background-color: transparent; top:-20px; }
.header_box_scroll1 .menu { margin-top: 35px; margin-bottom: 10px }
.header_box_scroll1 .menu li a {
 color: #262e32;
 font-size:18px;
 font-weight: normal;
 letter-spacing: 1px;
 text-decoration:none;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
}

.header_box_scroll1 .logo-big, .header_box_scroll1 .logo-mid {
 position: absolute;
 margin-top: 30px;
 max-width: 558px;
 opacity: 1;
 /*
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 */
}
.header_box_scroll1 .logo-small { opacity: 0;
 /*
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
 */
}
/*捲軸往下的變換選單*/
.header_box_scroll2 {padding: 0px 0;height: 75px;background: rgba(38, 46, 50, .9);-webkit-box-shadow: 0 1px 4px rgba(211, 71, 77, .15);-moz-box-shadow: 0 1px 4px rgba(211, 71, 77, .15);box-shadow: 0 1px 4px rgba(211, 71, 77, .15)}
.header_box_scroll2 .menu { margin-top: 0; margin-bottom: 0; height: 100% }
.header_box_scroll2 .menu > li > a { color: #fff; -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out
}
.header_box_scroll2 .logo-big, .header_box_scroll2 .logo-mid { opacity: 0; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box_scroll2 .logo-small {
 position: absolute;
 margin-top: -7px;
 width: 80px;
 opacity: 1;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}



/*語系切換*/
#nav{position:absolute;right:10px;top: 30px;z-index:9999;color: #3d4e59;font-size:15px;background-color:rgba(255, 255, 255, 0.7);-webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;-ms-transition: all .4s ease;}
#nav span{ padding:5px 5px; display:inline-block; }
#nav a{color: #262e32;text-decoration:none;letter-spacing:2px;}
#nav a:hover{ text-decoration:underline; }


.overlay1 {/*margin-top:80px;*/height: 100%;width: 0%;position: fixed;overflow:auto;top: 0;right: 0;background-color: rgba(0, 0, 0, 0.6);overflow:auto;transition: 0.5s;z-index: 4;}
.overlay1-content { position: relative; top: 0%; width: 100%; text-align: center; }
.overlay1 a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }
.overlay1 a:hover, .overlay1 a:focus { color: #f1f1f1; }
.overlay1-title { width:100%; height:50px; margin-top:80px; }
.overlay1-title span { color:#FFF; border-bottom:2px solid #FFF; font-size:20px; letter-spacing:1px; }
.overlay1_options { width:80%; margin:0 auto; }
.overlay1_item { position:relative; text-align:left; padding:15px 5px; color:#EAEAE8; letter-spacing:1px; border-bottom:1px solid #d2d2d2; font-size:15px; letter-spacing:1px; cursor:hand; cursor:pointer; }
.overlay1_item a { font-size:15px; color:#fff; font-weight:bold; }
.overlay1_item a:hover { color:#252F31; }
.overlay1_item span { position:absolute; right:0; top:25px; padding:0 5px; font-size:25px; }
/*.overlay1_item:hover{ background:#000; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }*/
.overlay1_event {width:100%;display:none;background-color: rgba(211, 71, 77, 0.7);text-align:left;padding:20px;box-sizing:border-box;letter-spacing:1px;}
.overlay1_event a { display:block; font-size:15px; color:#fff; }
.overlay1_event a:hover { color:#00ac99; text-decoration:none; }

.show-1, .show-2, .show-3{ opacity:0; }


#footer{width:100%;border-top:1px solid #90b2be;min-height:230px;background: #262e32;background-size:cover;}
#footer .footer_wrap { position:relative; max-width:1400px; margin:0 auto; padding:50px 0 0 0; text-align:center; }
#footer .copyright{width:100%;font-size:12px;letter-spacing:2px;color: #9ab9c2;border-top: 2px solid #3a4347;line-height:20px;padding:20px 0;margin:20px 0 0 0;}
#footer .copyright a{color: #9ab9c2;text-decoration:none;}
#footer .copyright a:hover{ text-decoration:underline; }

.common_title{border-right: 10px solid #d3474d;padding:0 20px;color: #d3474d;font-size:40px;line-height:50px;font-weight:bold;text-align:right;letter-spacing:3px;}
.common_title_s{ float:right; color:#80a9b8; font-size:16px; letter-spacing:2px; max-width:570px; text-align:right; line-height:30px; padding:20px 0; }

.inner_title{color:#252F31;font-size:30px;letter-spacing:2px;text-align:center;margin: 50px 0 100px 0;}
 
.sitemap{ text-align:right; line-height:25px; padding:10px 10px;}
.sitemap a{ color:#797979; }

.gotop{ position:absolute; right:10px; top:20px; cursor:hand; cursor:pointer; opacity: 0.9; filter: alpha(opacity=90); /* For IE8 and earlier */ }

.mark_product{padding-top: 90px;}

@media screen and (max-width: 1400px) {
	.common_title{ text-align:left; border-right:0; border-left:10px solid #252F31; }
	.common_title_s{ text-align:left; float:left; }
	.none1400{ display:none; }
}
@media screen and (max-width: 1024px) {
	.footer_nav a{ display:none; }	
	.footer_copyright{ text-align:center; padding:0 10px;}
	.footer_info3, .footer_info4{ display:none;}
	
	.footer_info1{ width:100%; text-align:center; }
	.footer_info2{ width:255px; margin:0 auto; float:none; }
	
}

@media screen and (max-width: 768px) {
	.header_box_scroll1 .logo-big, .header_box_scroll1 .logo-mid{/* margin-top: 5vh; */}
	.header_box_scroll1 .logo-big{ display:none; }
	.inner_title{margin: 0 0 30px 0;}
	.mark_product{ padding-top:30px; }	
}

@media screen and (max-width: 480px) {
	
	#wrapper{ padding-top:150px; }
	.common_title{ font-size:30px; }
	.p_btn{ margin-top:30px; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*News*/
#index_news { width:100%; background:url(../../images/news_bg.jpg) no-repeat; background-position:center center; background-size: cover;}
.index_news_contain {position:relative;max-width:1400px;min-height: 655px;margin:0 auto;color:#797979;font-size:14px;letter-spacing:1px;padding: 50px 0;}
.index_news_title{/* max-width:660px; */color:#FFF;}
.index_news_title span { display:inline-block; color:#13a38e; font-size:55px; margin: 0 0 30px 0; }
.index_news_title p{margin:5px 0 20px 0;letter-spacing: 2px;padding:  30px 0;color:#ffffff; font-size: 16px; line-height:35px; }
.index-news-list{display:flex;flex-wrap:wrap;padding:50px 0;}
.index-news-list .items{
    flex: 0 46%;
    margin: 25px 2%;
    padding: 0 0 30px 0;
    border-bottom: 4px solid #d8e8ed;
}
.index-news-list .items a{color:#0b0b0b;text-decoration:none;line-height: 35px;}
.index-news-list .items a:hover{ color:#d3474d;}

.index-news-list .items .date{
    font-size: 18px;
    color: #5d5d5d;
    border: 1px solid #aeaeae;
    display: inline-block;
    padding: 5px 15px;
    margin: 0 0 20px 0;
}
.index-news-list .items .content{
	position:relative;
	color: #0b0b0b;
	font-size: 20px;
	padding: 0 40px 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2; /* 設置顯示的行數 */
}
.index-news-list .items .content img.more{position:absolute;right:0px;bottom: 10px;}


#index-news .pager{ width:100%; margin:50px auto; }

/*Product*/
#index-product {max-width:1500px;/* min-height:1000px; */overflow:hidden;margin:0 auto;padding: 100px 10px 0 10px;box-sizing: border-box;}
.product-items-area{max-width: 1400px;margin: 0 auto;text-align: center;}
.index-product-img{ width:100%; margin:0 auto; text-align:center; max-width:742px; }
#index-product .pager{ margin:50px auto; }

.product-list{width:100%;overflow:hidden;margin: 40px auto 40px auto;padding: 10px 0;}
.product-list a{font-size:16px;color:#474747;text-decoration:none;letter-spacing: 2px;}
.product-list a:hover{ text-decoration:underline; }

.product-item
{
    margin:0 2% 50px 2%;
    width:30%;
    vertical-align:  top;
    max-width:320px;
    text-align:left;
    display:inline-block;
    line-height: 25px;
}
.product-item img{border: 1px solid #e0e0e0;box-shadow: 1px 1px 5px #ebebeb;display:block;margin-bottom: 20px;}


@media screen and (max-width: 1400px) {
	.product-item{ margin:0 1% 50px 1%; }	
}

@media screen and (max-width: 768px) {
	.product-item{ width:47%; }	
	.product-list{ margin:0 0 0px 0; }	
	.index-news-list .items{
		flex: 100%;	
	}	
}

@media screen and (max-width: 380px) {
	.product-item{ width:96%; max-width:none; text-align:center; }	
	
}



/*About*/
#index_about { width:100%; background:url(../../images/about_bg.jpg) no-repeat; background-position:center center; background-size: cover; background-attachment: fixed; }
.index_about_contain { position:relative; max-width:1400px; height:777px; margin:0 auto; color:#797979; font-size:14px; line-height:25px; letter-spacing:1px; }
.index_about_title{ position:absolute; left:5%; top:15%; max-width:660px; color:#FFF; }
.index_about_title span { display:inline-block; color:#13a38e; font-size:55px; margin: 0 0 30px 0; }
.index_about_title p{margin:5px 0 20px 0;letter-spacing: 2px;padding:  30px 0;color:#ffffff; font-size: 16px; line-height:35px; }

.custom_title1{color: #d3474d;border-right:0;border-left: 10px solid #d3474d;text-align:left;}


/*Contact*/

#index-contact {/* max-width:1500px; */min-height: 819px;margin:0 auto;overflow: hidden;padding: 100px 10px 0 10px;box-sizing: border-box;background:url(../../images/contact_bg.jpg) no-repeat;background-size:cover;}
.contact-items-area{/* float:right; */max-width: 1400px;margin: 0 auto;}
.contact_left{float:left;width: 35%;padding-right:5%;box-sizing:border-box;}
.contact{width:90%; overflow:hidden; margin:20px auto; line-height:40px; color:#2D2D2D; font-size:15px; letter-spacing:1px;}
.contact_info_area{ width:100%; overflow:hidden; padding:5px 0; /*border-bottom:1px dashed #a7a7a4;*/ }
.contact_info_title{float:left;width: 15%;min-width:60px;}
.contact_info_content{float:left;width: 84%;text-align:  left;color: #262e32;}

.contact_form_area{ float:left; width:50%; overflow:hidden; padding:10px 0; /*border-bottom:1px dashed #a7a7a4;*/ }
.contact_form_title{float:left;min-width: 150px;line-height: 40px;color:#474747;letter-spacing:1px;padding-left: 10px;box-sizing:  border-box;font-size:16px;text-align:left;}
.contact_form_content{float:left;width: 65%;color: #145d78;line-height: 30px;text-align:left;}
.service_input{ max-width:280px; width:100%;font-size:16px;color:#666;height:40px;padding:0 10px;box-sizing: border-box;letter-spacing:2px;outline:0;border:1px solid #e7e7e7;outline:0;}
.service_radio{ border:1px solid #e7e7e7;  
	-ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
	outline:0; 
}
.service_checkbox{ width:125px; display:inline-block; padding:8px 0; }
.service_textarea{ width:100%; height:200px; border:1px solid #e7e7e7; font-size:16px; color:#666; resize:none; outline:0; }
.contact_verify{max-width: 150px;width: 100%;font-size:16px; letter-spacing:1px; height:40px;padding:0 10px;outline:0;border:1px solid #e7e7e7;margin:10px 0;}

.contact_right{float:right;width: 65%;}

.custom_title2{ color:#5d8fa1 !important; border-right:10px solid #5d8fa1; }




@media screen and (max-width: 1400px) {
	#index-service { background:none; }
	.service-items-area{ width:inherit; }
	.custom_title2{ border-right:0; border-left:10px solid #9dbdc6; }
	.contact_form_area{ float:none; }
	.contact_form_area{ width:90%; }
}

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

	.index-service-img{ display:none; }
		
}

@media screen and (max-width: 1024px) {
	.index_why_container{ padding:10px 0 10px 0; }
 	.index_why_square{ padding:0; } 
	.contact_right{ float:none; }	
	.contact_left{ width:100%; }
	.contact_right{ width:100%; }
	.contact{ width:100%; }
	.contact_info_title{ width:auto; }
}
@media screen and (max-width: 768px) {
	.index_why_square{ width:250px; }
	#index-contact { padding-top:50px;}	
}
@media screen and (max-width: 568px) {
	.index_why_square{ margin:10px 15px; }
	.service-items-area{ float:none; }
	.contact_info_content{ width:100%; }
	.contact_form_content{ width:100%; }
	.service_input{ max-width:none;  }
	.contact_info_area{ width:100%; padding:0px 0; }
	.contact_form_area{ width:100%; padding:0 0; }	
	.contact_form_title{ float:none; padding:0; font-weight:bold; }
}

@media screen and (max-width: 480px) {
	.index_why_square{ width:inherit; margin:0; padding:0; }
	.contact_form_title{ padding-left:0; }
	.service_textarea{ width:98%; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> About <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner_about{max-width:650px;margin:0 auto;overflow:hidden;font-size: 16px;letter-spacing: 1px;line-height: 30px;}
.about_content{padding: 0 10px 50px 10px;letter-spacing:1px;color:#252F31;font-size:16px;line-height:30px;text-align:left;}

.about_list_area{ float:left; width:100%; overflow:hidden; line-height:20px; box-sizing:border-box; padding:20px 10px; font-size:16px; color:#474747; letter-spacing:2px; border-bottom:1px solid #d1e3e9; }
.about_list_area span{ font-size:20px; color:#9dbdc6; }


@media screen and (max-width: 768px) {
	.about_list_area span{ display:block; padding-bottom:15px; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> News <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner_news {width:100%;}
.inner_news_contain {position:relative;max-width:1400px;/* height:777px; */margin:0 auto;color:#797979;font-size:14px;line-height:25px;letter-spacing:1px;/* padding: 50px 0; */}
.inner_news_title{/* max-width:660px; */color:#FFF;}
.inner_news_title span { display:inline-block; color:#13a38e; font-size:55px; margin: 0 0 30px 0; }
.inner_news_title p{margin:5px 0 20px 0;letter-spacing: 2px;padding:  30px 0;color:#ffffff; font-size: 16px; line-height:35px; }
.inner-news-list{display:flex;flex-wrap:wrap;padding:50px 0;}
.inner-news-list .items{
    flex: 0 46%;
    margin: 25px 2%;
    padding: 0 0 30px 0;
    border-bottom: 4px solid #d8e8ed;
}
.inner-news-list .items a{color:#0b0b0b;text-decoration:none;line-height: 35px;}
.inner-news-list .items a:hover{ color:#d3474d;}

.inner-news-list .items .date{
    font-size: 18px;
    color: #5d5d5d;
    border: 1px solid #aeaeae;
    display: inline-block;
    padding: 5px 15px;
    margin: 0 0 20px 0;
}
.inner-news-list .items .content{
	position:relative;
	color: #0b0b0b;
	font-size: 20px;
	padding: 0 40px 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2; /* 設置顯示的行數 */
}
.inner-news-list .items .content img.more{position:absolute;right:0px;bottom: 10px;}


#inner-news .pager{ width:100%; margin:50px auto; }

@media screen and (max-width: 768px) {
	.inner-news-list .items{
		flex: 100%;	
	}	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> News Detail <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.news-detail{
    padding: 0 20px;
	min-height:400px;
}
.news-detail .title{
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 30px;
    border-bottom: 4px solid #d8e8ed;
    padding: 0 0 20px 0;
}
.news-detail .content{
    margin: 40px 0;
    line-height: 22px;
    font-size: 16px;
}
.news-detail .date{
    font-size: 18px;
    color: #5d5d5d;
    border: 1px solid #aeaeae;
    display: inline-block;
    padding: 10px 15px;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
    /* float: right; */
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Products <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner_product{max-width:1400px; margin: 0 auto 100px auto;overflow:hidden;}
.product_list{width:100%;overflow:hidden;margin:0 0 50px 0;padding: 10px 0;}
.product_left{ float:left; width:20%; max-width:290px; padding:0 10px 20px 10px; box-sizing:border-box; letter-spacing:2px; font-size:26px; color:#9dbdc6; font-weight:bold; }
.product_right{ float:left; width:80%; text-align:left; padding:0 5px; box-sizing:border-box; font-size:16px; color:#474747; letter-spacing:2px; line-height:30px; }
.product_right a{ font-size:16px; color:#474747; text-decoration:none; }
.product_right a:hover{ text-decoration:underline; }

.product_item
{
    margin:0 2% 50px 2%;
    width:30%;
    vertical-align:  top;
    max-width:320px;
    text-align:left;
    display:inline-block;
}
.product_item img{ border: 1px solid #e0e0e0; box-shadow: 1px 1px 5px #ebebeb; display:block; margin-bottom:10px; }


@media screen and (max-width: 1400px) {
	.product_item{ margin:0 1% 50px 1%; }	
}

@media screen and (max-width: 768px) {
	.product_item{ width:47%; }	
	.product_list{ margin:0 0 0px 0; }	
	
	.product_left{ width:100%; max-width:none; float:none; padding:20px 10px 20px 10px }
	.product_right{ width:100%; }
	#inner_product{ margin-bottom:20px; }	
}
@media screen and (min-width: 768px) {
    .transImg{

        box-shadow: 0 0 0px rgba(0, 0, 0, 0.2);
        transition: 0.3s;
    }
    .transImg:hover{
        transform: translateY(-5px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    }
	
}
@media screen and (max-width: 640px) {

	
}
@media screen and (max-width: 380px) {
	.product_item{ width:96%; max-width:none; text-align:center; }	
	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Products Detail <<<------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.product_detail{width:100%;overflow:hidden;margin:80px 0 100px 0;padding: 10px 0; }
.detail_left{ float:right; width:50%; text-align:left; padding:0 10px; box-sizing:border-box; font-size:16px; color:#474747; letter-spacing:2px; line-height:30px; }
.detail_right{ float:left; width:50%; padding:0 10px 20px 10px; box-sizing:border-box; letter-spacing:2px; }

.p_simg{ max-width:650px; margin-top:20px; }
.p_simg img{ width:48%; margin:10px 0; }
.ptype_name{ color:#9dbdc6; font-size:30px; font-weight:bold; margin-bottom:20px; }
.p_name{ font-size:20px; letter-spacing:2px; color:#474747; padding:20px 0; }
.p_content{ border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; padding:50px 0; }
.mg_left{ margin-left:1.5% !important; }
.mg_right{ margin-right:1.5% !important; }

@media screen and (max-width: 1024px) {
	.product_detail{ margin:0px 0 50px 0 }	
	.detail_left{ width:60%; }	
	.detail_right{ width:40%; }	
	.p_simg img{ width:100%; }	
}
@media screen and (max-width: 640px) {
	.product_detail{ margin:0px 0 50px 0 }
	.detail_left{ float:none; width:100%; }	
	.detail_right{ float:none; width:100%; }
	
	.mg_left{ margin-left:0 !important; }
	.mg_right{ margin-right:0 !important; }	
			
}

@media screen and (max-width: 480px) {
	.p_content{ padding:20px 0; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Exhibition <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.exhibition_item
{
    margin:0 2% 50px 2%;
    width:31%;
    vertical-align:  top;
    max-width:400px;
    text-align:left;
    display:inline-block;
	letter-spacing:1px; line-height:22px;
}
.exhibition_item img{ border: 1px solid #e0e0e0; box-shadow: 1px 1px 5px #ebebeb; display:block; margin-bottom:10px; }
.exhibition_item .date{ color:#B0B0B0; font-size:13px; }
.exhibition_item .title{ display:inline-block; padding:0px 0 10px 0; color:#5E5E5E; text-decoration:none; font-size:18px; font-weight:bold; }
.exhibition_item .content{ color:#B0B0B0; font-size:15px; }


@media screen and (max-width: 1400px) {
	.exhibition_item{ margin:0 1% 50px 1%; }	
}

@media screen and (max-width: 768px) {
	.exhibition_item{width: 45%;margin: 0 2% 50px 2%;}	
}
@media screen and (max-width: 380px) {
	.exhibition_item{width:96%;max-width:none;text-align:center;margin: 0 2% 50px 2%;}	
	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 區塊跳動效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.bannerArea{ z-index:999999; }
.bannerArea a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	width:80px;
	position:absolute;
	bottom:20px;
	left:50%;
	margin-left:-40px;
	z-index:999;}

.bannerArea a.scrollDown i{
	display:inline-block;
	text-align:center;
	font-size:25px;
	color:#FFF;
	text-align:center;}

/*------css3動畫--------*/
@-webkit-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}

}
@-moz-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}
}
@keyframes upDown {
  from     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  to {bottom:20px; opacity:1;}
}
.upDown{
	-webkit-animation: upDown ease-out 1s infinite;
	-moz-animation: upDown ease-out 1s infinite;

	-o-animation: upDown ease-out 1s infinite;
	animation: upDown ease-out 1s infinite;}




/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> checkbox/radio template <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/* The container */
.container {
    display: inline-block;
    position: relative;
    color: #474747;
    letter-spacing: 2px;
    padding-left: 35px;
    padding-right: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight:normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border:1px solid #CCC;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #179ccb;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Swiper Slider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

html, body { position: relative; height: 100%; }
.swiper-container { position:relative; width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 48px; color:#fff; letter-spacing:1px; background-size:cover; background-position: center; }
.swiper-word { display:none; width:100%; max-width:1200px; position:absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; font-size:2.75vw; bottom:30%; text-align:right; padding-right:4%; box-sizing:border-box; }
.swiper-word span { font-size:16px; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Transition Effect <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.infinite_effect{   animation: nudge 5s linear infinite alternate; }

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(15px, 0);
  }
  
  50% {
    transform: translate(-15px, 0);
  }
}


@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes transiTop20 {  0% {
 transform: translateY(-20%);

}
 100% {
 transform: translateY(0);
}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(152, 192, 210, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 90px;line-height: 18px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;padding: 10px;background-color:rgba(152, 192, 210, 0.8);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;/* height:25px; */padding: 8px 0;letter-spacing: 2px;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.pageselect{border:1px solid #CCCCCC;padding: 4px 5px;font-size:12px;}
.pageselect:hover{ background:#ebebeb; }
a.pagelink_no{color:#333333;text-decoration:none;border: 1px solid #cccccc;padding: 0px 5px;display: inline-block;margin: 5px 0;}
a.pagelink_no:hover{ background:#ebebeb; }
a.pagelink{color:#333333;text-decoration:none;border: 1px solid #CCCCCC;padding: 5px 10px;}
a.pagelink:hover{ background:#ebebeb; }
a.pagelink_ch{color:#333333;padding: 5px 10px;border: 1px solid #cccccc;background: #ebebeb;text-decoration:none;}