@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: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color: #333333; letter-spacing:1px; }
.iframe_ch { display:none }
.w100{ width:100%; }
.middle{ vertical-align:middle; }

/*上標、下標*/
sup , sub{ font-size:12px; }

.btn1{ border:0; color:#FFF !important;font-size:15px !important;width:auto !important;padding: 15px 100px; text-decoration:none; letter-spacing:2px;cursor:hand;cursor:pointer;background:  #ed6c00;}
.btn1:hover{ background:#e07e2b; -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: #ff7e3e!important;font-size:15px !important;width:auto !important;padding: 15px 50px; text-decoration:none; letter-spacing:2px;border: 1px solid #ff7e3e; cursor:hand;cursor:pointer;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.btn2:hover{ background:#ff7e3e; color:#ffffff !important; border: 1px solid #ff7e3e; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*fix safari*/
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; }

/*分頁*/
.pager{ position:relative; width:100%; margin:110px auto; text-align:center; } 

/*分頁 - 上方無padding*/
.pager_noh{ position:relative; width:100%; margin: 0px 0px 60px 0px; text-align:center; } 

/*網頁大標題*/
.common-title{ text-align:left;font-size:30px; color:#215f6a; letter-spacing:3px;line-height: 25px;padding:40px 10px; }
.common-title span{ color:#ee6e03; }
.common-title > .line{ background:#215f6a; width:45px; height:3px; margin:20px 0 0 0; }

.common-title2-c{text-align:center;font-size: 14px;color: #7c7a7a;letter-spacing:3px;line-height: 25px;padding: 70px 10px 0px 10px;}
.common-title2{text-align:center;font-size:30px;color:#215f6a;letter-spacing:3px;line-height: 30px;padding: 70px 10px 20px 10px;}
.common-title2 span{ color:#ee6e03; }
.common-title2 > .line{ background:#215f6a; width:45px; height:3px; margin:20px auto 0 auto; }


/*回頂部*/
#page_top{width:100%; max-width: 1400px; margin:0px auto -2px auto; text-align: right;}
#page_top{display:block;position: absolute;bottom: 0;margin-left: auto;margin-right: auto;left: 0;right: 0;}

/*網站地圖*/
#sitemap{ width:100%; margin:30px 0 20px 0; padding:0 10px; font-size:15px; letter-spacing:1px; color:#7e7463; }
#sitemap > .wrap{ max-width:1200px; overflow:hidden; margin:0 auto; padding:15px 0; text-align:right; }
#sitemap > .wrap:before{ content:url(../../images/home.png); padding:0 5px 0 0; vertical-align: -30%; width:21px; }
#sitemap > .wrap a{ color:#7e7463; }

/*字體效果*/
.w-shadow{ text-shadow: 1px 1px 1px #CCC; }
.w-bold{ font-weight:bold; }
.w-fs15{ font-size:15px !important;}

.editor{width:100%;overflow:hidden;line-height: 30px;/*min-height:100px;*/font-size:14px;letter-spacing:1px; text-align:left; color:#606060; right:0;padding:0 5px 30px 5px;box-sizing:border-box;}

@media screen and (min-width: 1024px) {
	/*網頁小標題*/
	.s-title{ text-align:center; font-size:16px; letter-spacing:5px; padding:50px 10px; min-height:130px; }
	.s-title a{ display:inline-block; color:#000000; text-decoration:none; }
	.s-title a:hover{ color:#eb560c; }
	.s-title .on{  color:#eb560c; }
	.s-title .on a{ color:#eb560c; border-bottom:1px solid #eb560c; padding-bottom:10px; }
	.s-title a{ text-align:center;}
	.s-title span:before{ content:'＋'; padding:0 10px; }
	.s-title span:hover a{ border-bottom:1px solid #eb560c; padding-bottom:10px; }
	.s-title span:first-child:before{content:'';}
}
@media screen and (max-width: 1024px) {
	
	.s-title{ width:100%; overflow:hidden; text-align:center; margin:0 auto; font-size:16px; letter-spacing:5px; box-shadow: 1px 1px 5px #ebebeb; }
	.s-title a{ display:block; background:#FFDBC9; text-decoration:none; color:#545454;text-shadow: 1px 1px 1px #fff;font-weight: normal;text-align:  center;padding: 10px 5px;font-size:13px;text-transform: uppercase;cursor:hand;cursor:pointer;border-bottom:1px solid #FFA03B;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
	.s-title a:hover{ color:#000000; border-left:5px solid #FFA03B; }	
	.s-title span{ /*display:none;*/ }
	.s-title .on{ display:block; }
}

@media screen and (max-width: 480px) {
  .b-title{margin:10px 10px 10px 10px;font-size: 16px;}
  .b-title span{ font-size:40px; padding:10px 0 5px 0; margin-bottom:0; }
  
  .common-title{ font-size:20px; }
  .common-title2{ padding:10px 10px; font-size:20px; }
}

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

#wrapper{width:100%;overflow:hidden;margin:0 auto;position: relative;}
.inner-bg{ background:url(../../images/bg-inner.png) repeat !important; }
.common_wrap{ max-width:1400px; min-height:360px; margin: 0px auto 0 auto; padding:30px 10px 0 10px; }
.common_wrap_index{ max-width:1400px; margin: 0px auto 0 auto;padding: 0px 0px; }

.full_wrap{ width:100%; margin: 0px auto 0 auto;padding: 30px 10px; }


/*子選單*/
.submenu1{display:none;/* min-width: 200px; */font-size:18px !important;overflow:hidden;background: rgba(248, 248, 248, 1);position:absolute;margin-left: -50px;min-width: 300px;text-align: left;/* left: -9px; */padding: 5px;/* top: 130px; */box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25);/* -webkit-border-radius: 10px; */-moz-border-radius: 10px;/* border-radius: 10px; */}
.submenu1 a{
 border-bottom: 1px solid rgba(0, 0, 0, 0);
 font-size:15px !important;
 color:#000000 !important;
 font-weight:normal !important;
 display:block !important;
 /* border-bottom:1px solid #dedede; */
 padding: 10px 0px 10px 0px;
 margin: 10px 20px;
 -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; border-bottom: 1px solid #ffc0a0; }


nav { 
 letter-spacing:2px;
 -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: 99999;padding: 3px 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: 1px solid #fff; padding-left:20px; }
.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: 0px;
 margin-bottom: 7px;
 height: 100%;

 line-height: 20px;
 /*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;text-align: center;font-weight: bold;list-style: none;padding-right: 20px;padding-left: 20px;padding-bottom: 15px;padding-top: 15px;cursor:hand;cursor:pointer;}
.header_box .header_box_main .menu li span{display:block;text-align: center;color: #ffdbc9;letter-spacing: 1px;font-size:12px;}
.header_box .header_box_main .menu li a { }
.header_box .header_box_main .menu li img { padding:0 3px; }
/*原始選單*/
.header_box_scroll1 { background-color: transparent; top:-20px; z-index:99; }
.header_box_scroll1 .menu { margin-top: 35px; margin-bottom: 10px }
.header_box_scroll1 .menu li a {
 color: #ffffff;
 font-size: 16px;
 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 .header_box_main .menu li:hover a{color: #ffdbc9;}

.header_box_scroll1 .logo-big, .header_box_scroll1 .logo-mid {
 position: absolute;
 margin-top: 15px;
 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 25px 0;background: rgba(57, 57, 57, .9);-webkit-box-shadow: 0 1px 4px rgba(4, 77, 102, .15);-moz-box-shadow: 0 1px 4px rgba(4, 77, 102, .15);box-shadow: 0 1px 4px rgba(4, 77, 102, .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 { display:none; 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: -5px;
 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*/
#nav{ position:absolute; right:20px; top:25px; z-index:9999; color:#ffffff; font-size:15px;
-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 img{ vertical-align:middle; }
#nav a{ color:#ffffff; text-decoration:none; letter-spacing:2px; }
#nav a:hover{ text-decoration:underline; }


.overlay1 {/*margin-top:80px;*/height: 100%;width: 0%;position: fixed; top: 0;right: 0;background-color: rgba(25, 25, 25, 0.9); overflow:hidden; 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: #ffa03b !important; }


.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;letter-spacing: 2px;font-weight:bold;}
.overlay1_item a:hover { color:#000000; }



.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(25, 25, 25, 0.9);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:#d9a159; text-decoration:none; }

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


/*Footer*/
#footer { width:100%;min-height:235px;margin: 0 auto;overflow:hidden;background: url(../../images/footer_bg.jpg) center bottom no-repeat; background-size:cover; }
.footer_contain {position:relative;max-width:1400px;text-align:left;margin:0 auto;padding:30px 10px;box-sizing:border-box;}
.footer-contact{position:absolute;right: 10px;top:0;line-height:25px;font-size:13px;padding-top:30px;padding-bottom: 20px;max-width: 600px;}
.contact-p{ width: 100px;text-align:center; }
.footer_contain .qrcode{ position:absolute; right:0; }

#copyright{max-width:1400px;text-align:right;margin: 50px auto 0 auto;color:#718092;padding: 10px 10px;letter-spacing:1px;text-align:right;line-height:20px;}
#copyright a{ color:#718092; text-decoration:none; }
#copyright a:hover{ text-decoration:underline; }

/*底部漸層*/
.footer-gradient
{
	width:100%;
	height:23px;
	background: linear-gradient(360deg, rgba(255, 183, 95, 1)0%, rgba(238, 109, 3, 1)59%); 
	background: -moz-linear-gradient(360deg, rgba(255, 183, 95, 1)0%, rgba(238, 109, 3, 1)59%); 
	background: -webkit-linear-gradient(360deg, rgba(255, 183, 95, 1)0%, rgba(238, 109, 3, 1)59%); 
	background: -o-linear-gradient(360deg, rgba(255, 183, 95, 1)0%, rgba(238, 109, 3, 1)59%); 
}

/*首頁輪播*/
.slick_wrap{ position:absolute; top:60%; max-width:1400px; left:0; right:0; margin-left:auto; margin-right:auto;  -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease; }
.slick_area{ background:#aa8232; padding:10px 10px; z-index:99999; }
.slick_area .wrap{ max-width:500px; width:100%; padding:0 10px; max-height:56px; overflow:hidden; }
.slick_area .wrap h1{ font-weight: normal;font-size: 16px; text-align:left; letter-spacing: 2px; cursor:hand; cursor:pointer; }
.slick_area .wrap h1 span{ display:inline-block; padding-right:30px; }

/*版面設定*/
.common_grid { width:100%; background:#ffffff;  }
.common_grid_wrap { text-align:left; position:relative; max-width:1400px; overflow:hidden; margin:0 auto; padding:0 0; color:#797979; font-size:14px; line-height:25px; letter-spacing:1px; }

/*仿table排版*/
#C_table {display:table;color: #ffffff;/* letter-spacing: 1px; */width: 100%; }
.C_tr { display: table-row; }
.C_td {display: table-cell;letter-spacing: 2px;padding: 3px 5px;text-align:left;}
.C_td img { vertical-align:middle; }
.C_td a{color:#2a2a2a;display: inline-block;padding: 10px 0px;text-decoration:none;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
.C_td a:hover{ color:#e05c72; }

/*內頁Banner*/
.banner-inner{ position:relative; width:100%; height:455px; margin-top:100px; background:url(../../images/banner1.jpg?v=1) no-repeat; }
.banner-inner >.title{ position:absolute;bottom: 130px;right:5%;color: #ffffff;font-size: 30px;letter-spacing: 2px; text-align:right; text-shadow: 1px 1px 1px #CCC; }
.banner-inner >.sitemap{ position:absolute;bottom: 100px; right:5%;color: #ffffff;font-size: 12px;letter-spacing: 2px; }
.banner-inner >.sitemap a{ color: #ffffff; text-decoration:underline; }

@media screen and (max-width: 1400px) {
	.header_box .header_box_main .menu li{ padding-right:12px; padding-left:12px; font-weight:normal; }
	.none1400{ display:none; }
}
@media screen and (max-width: 1200px) {
	.header_box_scroll1 .logo-big{ display:none; }
	.header_box_scroll1 .logo-mid{ opacity:1; }
	.none1200{ display:none; }	
	#copyright{ text-align:left; margin-top:0; }
}


@media screen and (min-width: 1201px) {
	.header_box_scroll1 .logo-mid{ opacity:0; }
	
}
@media screen and (max-width: 1024px) {

	#nav{ right:3%; }
	.footer-contact{ position:inherit; right:0; }
	
	.common_grid{ /*min-height:inherit;*/ }
	.common_grid_wrap{ padding:padding:30px 0; }
	
}

@media screen and (max-width: 768px) {
	
	.inner_title{margin: 0 0 30px 0;}
	.mark_product{ padding-top:30px; }	
	
	.slick_area .wrap{ max-width:250px; }
	.slick_area .wrap h1 span{ display:none; }
	
	.none768{ display:none; }
	
	.footer_contain{ text-align:center; }				
}


@media screen and (max-width: 480px) {

	.common_title{ font-size:30px; }
	.p_btn{ margin-top:30px; }
	.none480{ display:none; }	
}


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


/*About*/
#index_about { width:100%; /*background-size: cover; background-attachment: fixed;*/ }
.index_about_contain { position:relative; max-width:1400px; overflow:hidden; margin:0 auto; padding:30px 0; color:#000000; font-size:14px; line-height:25px; letter-spacing:1px; }
.index_about_contain .left{ float:left; width:40%; }
.index_about_contain .right{ float:left; width:60%; }


/*Major Customer*/
.slick-pre{ position:absolute;top:30%;left:0;display:block;z-index:9999; }
.slick-next{ position:absolute;top:25%;right:40px;display:block;z-index:9999; }

#index-customer img{ max-width:330px; }

/*What we do*/
.index_wedo{ width:100%; overflow:hidden; background-color:#f6f6f6; padding:0 0 30px 0; }
.index_wedo .wrapper{ max-width:1200px; min-height:500px; margin: 0px auto 0 auto; padding: 30px 10px; background:url(../../images/bg-wedo.png) right top no-repeat; }
.index_wedo .wedo-grid{ padding:50px 0 0 0; overflow:hidden; }
.index_wedo .wedo-grid img{ box-shadow:8px 8px rgba(20%,20%,40%,0.5); margin:20px 0; }
.index_wedo .wedo-grid .title{ color:#215f6a; font-size:24px; margin:0 0 30px 0; }
.index_wedo .wedo-grid .content{ color:#000000; font-size:15px; line-height:22px; }
.index_wedo .left{float:left;width:40%;padding: 0 20px;box-sizing:border-box;}
.index_wedo .right{float:left;width:60%;padding: 0 20px;box-sizing:border-box;}
.index_wedo .left2{ float:left; width:40%; padding:0 10px 0 0; box-sizing:border-box; }
.index_wedo .right2{ float:left; width:60%; padding:20px 0 0 10px; box-sizing:border-box; }

/*Contact Us*/
.index_contact{ width:100%; overflow:hidden; background-color:#f6f6f6; padding:0 0 100px 0; background:url(../../images/contact-bg.png) center center no-repeat; background-size:cover; }
.index_contact .wrapper{ max-width:1200px; min-height:500px; margin: 0px auto 0 auto; padding: 30px 10px; }
.index_contact .wrapper .common-title2{ color:#ffffff; }
.index_contact .wrapper .common-title2 span{ color:#ffffff; }
.index_contact .wrapper .common-title2 .line{ background:#ffffff; }
.index_contact .wrapper .contact-solgan{max-width: 500px;width:100%;margin:0 auto;font-size:14px;letter-spacing: 1px;line-height:20px;color:#aed1d9;}
.contact-form{ width:100%; overflow:hidden; padding:30px 0; }

.contact-form .input-area{float:left;width: 31%;margin: 0px 1.2% 20px 1.1%;padding: 18px 15px;box-sizing:border-box;border:1px solid #ffffff;color:#ffffff;letter-spacing:1px;font-size:13px;}
.contact-form .input-area > .left{float:left;width:25%;font-size: 14px;letter-spacing: 2px;}
.contact-form .input-area > .right{ float:left; width:75%; }

.contact-form .input-area2{float:left;width:97.7%;margin: 0px 1.2% 20px 1.1%; background:unset; padding: 18px 15px;box-sizing:border-box;border:1px solid #ffffff;color:#ffffff;letter-spacing:1px;font-size:13px;}
.contact-form .input-area2 option{ color:#000; font-size:14px; letter-spacing:2px; }
.contact-form .input-area2 > .left{float:left;width:25%;font-size: 14px; max-width:150px; letter-spacing: 2px;}
.contact-form .input-area2 > .right{ float:left; width:75%; }

.contact-form .captcha-area{float:left;width: 31%;margin: 0px 1.2% 20px 1.1%;padding: 18px 15px;box-sizing:border-box;border:1px solid #ffffff;color:#ffffff;letter-spacing:1px;font-size:13px;}
.contact-form .captcha-area .captcha-left{float:left;width:40%;font-size: 14px;letter-spacing: 2px;}
.contact-form .captcha-area .captcha-right{ float:left; width:60%; }
.contact-form .submit{ float:right; padding-right:1%; margin-top:10px; }

.contact-form input[type="text"]{color:#ffffff;font-size: 14px;letter-spacing: 2px;background:none;border:0;outline:0;}
.contact-form textarea{ width:98%; height:260px; padding:20px; box-sizing:border-box; margin:0 1%; color:#ffffff;font-size: 14px;letter-spacing: 2px;background:none;border:1px solid #FFF; outline:0; resize:none;}


.contact-form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff;
  opacity: 1; /* Firefox */
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ffffff;
}

.contact-form ::-ms-input-placeholder { /* Microsoft Edge */
  color: #ffffff;
}

@media screen and (max-width: 1200px) {
	.index_wedo .left2{ float:none; width:100%; }
	.index_wedo .right2{ float:none; width:100%; }	
}

@media screen and (max-width: 1024px) {
	
	.index_about_contain .left{ float:none; width:100%; }
	.index_about_contain .right{ float:none; width:100%; }	
	
	.contact-form{ padding:30px 0 0 0; }
	.contact-form .input-area{ width:98%; margin:0px 1.2% 20px 1.1%; }
	.contact-form .input-area > .left{ max-width:80px; }
	.contact-form .captcha-area{ width:50%; }
	.contact-form .captcha-area .captcha-left{ max-width:120px; }
	
	
}

@media screen and (max-width: 768px) {
	
	.index_wedo .left{ padding:0 15px; }
	.index_wedo .right{ padding:0 15px; }
	
	.contact-form .captcha-area{ width:80%; }
	.contact-form .submit{ float:none; margin-top:50px; clear:both; text-align:center; }

}

@media screen and (min-width: 550px) {
	
	.show-550{ display:none; }

}

@media screen and (max-width: 550px) {
	
	.show-550{ display:block; }
	.none-550{ display:none; }
	.index_wedo .left{ float:none; width:100%; text-align:center; }
	.index_wedo .right{ float:none; width:100%; text-align:center;  }

}

@media screen and (max-width: 480px) {
	
	.slick-pre{ top:10%; }
	.slick-next{ top:20%; }
	
	.contact-form .captcha-area{ width:70%; }	
	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Foundry <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.foundry-area{ max-width: 750px;width:100%;margin:0 auto; }
.foundry-area > .title{ font-size:22px; line-height:30px; letter-spacing: 1px; color:#2e2f2f; margin:20px 0; }
.foundry-area > .content{ font-size:15px; padding:30px 0 30px 0; line-height:25px; letter-spacing:1px; }

/*product detail*/
.p-detail{ width:100%; overflow:hidden; background-color:#f6f6f6; padding:0 0 30px 0; }
.p-detail .wrapper{ max-width:1200px; min-height:500px; margin: 0px auto 0 auto; padding: 30px 10px; }
.p-detail .wrapper .content{ font-size:15px; display: flex; line-height:20px; }

/*收合選單*/
.question{ margin:20px 0; }
.question_bg{background: #ffffff;/* border:1px solid #017426; */border-left: 6px solid #215f6a;border-bottom:0;font-weight: bold;font-size: 13px;letter-spacing: 1px;padding: 20px 0;cursor:pointer;cursor:hand;}
.question_border{ margin:25px 0; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1); }
.padd10{padding:10px;}
.question_title{font-family:'微軟正黑體';color: #151515;/* font-weight:bold; */font-size: 16px;position:relative;padding: 0 40px 0 0;}
.question_content{ position:relative; background:#ffffff; color:#2d2d2d; padding:15px 35px 50px 35px; position:relative; font-size:15px; line-height:30px; letter-spacing:1px; text-align:left; }
.question_img{ position:absolute; bottom:0px; right: 15px; }
.question_date{ /*background: #2d2d2d;*/ color:#00649c; font-size:18px; letter-spacing:2px; }
.question_date span{ display:block; font-size:48px; letter-spacing:2px; }
.question_close{ position:absolute; width:100%; bottom:0; left:0; background:#215f6a; color:#ffffff; height:50px; line-height:50px; text-align:center; cursor:hand; cursor:pointer; }

.pro-left{ width:50%; float:left; padding:30px; box-sizing:border-box; }
.pro-left img{ border:1px solid #d7d7d7; box-shadow:5px 5px rgba(30%,30%,40%,0.2); }
.pro-left .title{ font-size:14px; color:#6f6f6f; }
.pro-right{ width:50%; float:left;padding:30px; }
.pro-right .title{ font-size:15px; color:#215f6a; border-bottom:1px solid #215f6a; }
.pro-right .title span{background:#215f6a;color:#ffffff;width: 28px;height: 28px;margin: 0 10px 8px 0;display: inline-block;text-align: center;-webkit-border-radius: 20px;-moz-border-radius:20px;border-radius:20px;}
.pro-right .content{ width:100%; overflow:hidden; padding:5px 5px; }
.pro-right .content > .left{ float:left; width:35%; font-weight:bold; font-size:13px; padding:5px 5px; }
.pro-right .content > .right{ float:left; width:65%; font-size:13px; padding:5px 5px;  }
.pro-right .content > .center{ float:left; width:100%; font-weight:bold; font-size:13px; padding:5px 5px;  }
.pro-right .content:nth-of-type(odd) div { background-color:#f6f6f6; }
.pro-right > div{ width:100%; overflow:hidden; }
.pro-right > div:not(:first-child){ margin-top:25px; }

.image-area1{ width:100%; overflow:hidden; }
.image-area1 > div{ float:left; width:25%; padding:15px; box-sizing:border-box; }

@media screen and (max-width: 1024px) {
	.question_content{ padding:15px 15px 50px 15px; }
	.pro-left, .pro-right{ padding:10px; }	
	.image-area1 > div{ width:50%; }
}
@media screen and (max-width: 800px) {
	.pro-left{ float:none; width:100%; }
	.pro-right{ width:100%; }	
}
@media screen and (max-width: 768px) {
	.question_title{ font-size:16px;}	
}
@media screen and (max-width: 600px) {
	.image-area1 > div{ width:100%; padding:10px; }
}
@media screen and (max-width: 480px) {
	.faq_date{ display:none; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Service <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.service-list{ list-style-type:decimal;font-size:15px;padding: 0; margin:0 30px; }
.service-list li{ padding:15px 5px 15px 5px; border-bottom:1px solid #d8d8d8; letter-spacing:1px; line-height:22px; }
.service-list li > .img1-area{ width:100%; overflow:hidden; text-align:center; margin:20px 0; padding:20px; }
.service-list li > .img1-area img{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin:20px 10px; max-width:770px; }
.service-list li > .img2-area{ width:100%; margin:50px 0; overflow:hidden; }
.service-list li > .img2-area div{ float:left; width:46%; margin:2%; }
.service-list li > .img2-area div img{ max-width:515px; padding:15px; border:1px solid #ebebeb; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

@media screen and (max-width: 600px) {
	.service-list{ margin:0 10px 0 30px; }
	.service-list li > .img1-area{ margin:0 10px; }
	.service-list li > .img2-area div{ float:left; width:98%; margin:2% 0; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Refinery <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.refinery-list{ width:100%; overflow:hidden; margin:30px 0; font-size:15px; line-height:25px; letter-spacing:1px; }
.refinery-list img{ float:left; padding:0 20px 20px 0; }

.refinery{ width:100%; overflow:hidden; padding:0; background:url(../../images/container-top-bg.png) top center no-repeat; background-size:auto cover; background-color:#f6f6f6; }
.refinery .wrapper{ min-height:500px; margin: 0px auto 0 auto; padding:10% 10px; background:url(../../images/container-bottom-bg.png) bottom center no-repeat; background-size:auto cover; }
.refinery .wrapper > .img1-area{ max-width:1400px; margin:0 auto; padding:50px 0; overflow:hidden; }
.refinery .wrapper > .img1-area > .left{ float:left; width:50%; text-align:center; padding:10% 10px 0 10px; }
.refinery .wrapper > .img1-area > .left div{ text-align:center; padding:8px 0 8px 70px; font-size:15px; text-shadow: 1px 1px 1px #CCC; }
.refinery .wrapper > .img1-area > .right{ float:left; width:50%; text-align:center; padding:0 10px 0 10px; }
.refinery .wrapper > .img1-area > .right div{ text-align:center; padding:8px 0 8px 70px; font-size:15px; text-shadow: 1px 1px 1px #CCC; }

.refinery2{ width:100%; overflow:hidden; padding:0; /*background:url(../../images/container-bottom-bg.png) top center no-repeat;*/ background-size:auto cover; background-color:#ffffff; }
.refinery2 .wrapper{ min-height:500px; margin: 0px auto 0 auto; padding:0px 10px 170px 10px; text-align:center; /*background:url(../../images/container-top-bg.png) bottom center no-repeat;*/ background-size:auto cover; }


.img-shadow-left{
	box-shadow: -50px 50px 1px #e4e4e4; 
	-webkit-box-shadow: -50px 50px 1px #e4e4e4; 
	-moz-box-shadow: -50px 50px 1px #e4e4e4; 	
}
.img-shadow-right{
	box-shadow: 50px 50px 1px #e4e4e4; 
	-webkit-box-shadow: 50px 50px 1px #e4e4e4; 
	-moz-box-shadow: 50px 50px 1px #e4e4e4; 	
}

@media screen and (max-width: 768px) {
	.refinery{ background:none; background-color:#f6f6f6; }
	.refinery .wrapper{ background:none; padding:20px 10px; }
	.refinery .wrapper > .img1-area{ padding:50px 0 0 0; }
	.refinery .wrapper > .img1-area > .left{ float:none; width:100%; padding-top:0; }
	.refinery .wrapper > .img1-area > .left div{padding:15px 0 15px 0; }
	.refinery .wrapper > .img1-area > .right{ float:none; width:100%; }
	.refinery .wrapper > .img1-area > .right div{ padding:15px 0 15px 0; }	
	
	.refinery2 .wrapper{ min-height:inherit; padding:0px 10px 50px 10px; }
	
	.img-shadow-left, .img-shadow-right{ box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; }
}
@media screen and (max-width: 600px) {
	.refinery-list img{ padding:0 0 20px 0 }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> meterial <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*Industrial Accessories*/
.meterial-area{ float:left; width:31%; overflow:hidden; margin:30px 1%; text-align:center; }
.meterial-area div{ width:100%; background:#ffffff; border:1px solid #ffffff; padding:40px 0; margin:20px 0; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.meterial-area div img{ width:100%; max-width:292px; }
.meterial-area div:hover{ background:#f6f6f6; border:1px solid #CCC; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25); }
.meterial-area div span{ display:inline-block; min-width:150px; padding-bottom:20px; color:#292929; letter-spacing:2px; text-shadow: 1px 1px 1px #CCC; border-bottom:3px solid #ee7806; }

/*Crucibles*/
.crucibles-area1{ width:100%; overflow:hidden; }
.crucibles-area1 div{ float:left; width:31%; margin:20px 1%; }
.crucibles-area1 div img{ width:100%; max-width:326px; }

.crucibles-area2{ width:100%; overflow:hidden; }
.crucibles-left{width:50%;float:left;padding: 30px 30px;}
.crucibles-right{ width:50%; float:left;padding:30px; }
.crucibles-area2 .title{ font-size:15px; color:#215f6a; border-bottom:1px solid #215f6a; }
.crucibles-area2 .title span{background:#215f6a;color:#ffffff;width: 28px;height: 28px;margin: 0 10px 8px 0;display: inline-block;text-align: center;-webkit-border-radius: 20px;-moz-border-radius:20px;border-radius:20px;}
.crucibles-area2 .content{ width:100%; overflow:hidden; padding:5px 5px; }
.crucibles-area2 .content > .center{ float:left; width:100%; font-size:13px; padding:0 5px;  }
.crucibles-area2 .content:nth-of-type(odd) div { background-color:#f6f6f6; }

.crucibles-area3 .title{font-size:15px;color: #000000;font-weight: bold;/* border-bottom:1px solid #215f6a; */}
.crucibles-area3 .title span{background:#215f6a;color:#ffffff;width: 28px;height: 28px;margin: 0 10px 8px 0;display: inline-block;text-align: center;-webkit-border-radius: 20px;-moz-border-radius:20px;border-radius:20px;}
.crucibles-area3 .content{ width:100%; overflow:hidden; padding:5px 5px; }
.crucibles-area3 .content > .left{ float:left; width:50%; font-weight:bold; font-size:13px; padding:0 5px; }
.crucibles-area3 .content > .right{ float:left; width:50%; font-size:13px; padding:0 5px;  }
.crucibles-area3 table{ width:100%; }
.crucibles-area3 table tr th{ border-bottom:1px solid #000000; font-weight:bold; text-align:center; }
.crucibles-area3 table tr td{ text-align:center; }
.crucibles-area3 table tr:nth-of-type(odd) { background-color:#f6f6f6; }

@media screen and (max-width: 1024px) {
	.meterial-area{ width:48%; margin:0px 1%; }
	.meterial-area div{ padding:20px; }
}

@media screen and (max-width: 768px) {
	.crucibles-left{ float:none; width:100%; padding:10px; }
	.crucibles-right{ width:100%; padding:15px; }
}

@media screen and (max-width: 550px) {
  	.meterial-area{ width:98%; }
	.crucibles-area3 .content > .left{ float:none; }
	.crucibles-area3 .content > .right{ width:100%; }
	.meterial-area div{ padding:10px; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> divas Slider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*
 * Divas Slider main style
 * Do not edit or edit with extreme care!
 * These rules are mandatory for Divas Slider to work correctly
 */
.divas-slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.divas-slide-container {
	position: relative;
	margin: 0;
	padding: 0;
}

.divas-slide-container:before,
.divas-slider-container:after {
  content: "";
  display: table;
  clear: both;
}

.divas-slide {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	overflow: hidden;
}

.divas-slide img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	outline: 0 none;
	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility: hidden;
 	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

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

.bannerArea{ z-index:999999; }
.bannerArea a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	position:absolute;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:  2%;
	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: #ffffff;
    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: 18px;
    width: 18px;
    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: 5px;
    top: 1px;
    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-mask{ position:absolute; top:0; left:0; background:url(../../images/bg-mask.png); width:100%; height:250px; }
.swiper-word {display:none;width:100%; letter-spacing:5px; max-width: 1400px;position:absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;font-size:2.75vw;/* line-height: 3.5vw; */top: 38%;text-align: left;padding-right:4%;padding-left: 50px;border-left: 1px solid #ffffff;box-sizing:border-box;}
.swiper-word span { font-size:16px; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> CSS Effect <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*image zoom*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
.photo-zoom img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  
}
.photo-zoom:hover img {

  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  
}

/*image mask*/
.photo-mask{ opacity:0; position:absolute; left:0; bottom:0; color:#ffffff; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7); letter-spacing:3px; text-align:center; padding:10px; line-height:22px; -webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s; }
.photo-mask-content{ width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.photo-mask .line{ border:1px solid #FFFFFF; }
.gallery:hover .photo-mask{ opacity:1; }


/*圖片filter*/
.img-gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 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 <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cssa { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:10px; padding-left:10px }
.cssb { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }
.cssc { padding-bottom:3px; letter-spacing:1px; font-size:12px; padding-left:10px; padding-right:10px; height:40px }
.cssd { font-family:Verdana; font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }
a.pagelink_no:link { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink_no:visited { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:active { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:hover { color: #003399; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:link { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }

a.pagelink:visited { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:active { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:hover { color: #333333; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_ch:link { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:visited { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:active { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:hover { color: #cc3300; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }





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

.news-list{ font-size:15px;padding: 0; margin:0 30px; margin-bottom: 100px;}
.news-list li{ padding:15px 5px 15px 5px;  letter-spacing:1px; line-height:22px; cursor: pointer;}

@media screen and (max-width: 600px) {
	.news-list{ margin:0 10px 0 10px; }
}
.news-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    background: #f8f8f8;
    color: #2c3441;
    transition: background-color 0.3s;
    align-items: stretch;
    position: relative;
    
    
}
.news-date{
	background: #2c3441;
	width:100px;
	color:#fff;
	display: flex;
	align-items: center;
	min-height: 100px;
	flex-direction: column;
	flex-shrink: 0;
	border-right: 1px solid #ffffff;
	justify-content: center;
	line-height: 1.2;
}
.news-date span {
    display: block;
    font-size: 48px;
    letter-spacing: 2px;
}
.news-tit {
		margin:auto;
    flex-grow: 1;
    margin-left:1px solid #fff;
    padding:0 80px 0 40px;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 500;
    position: relative;

}
.news-content {
    padding: 0 35px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
            background-color: #f9f9f9;
}

.news-list li.active .news-title{

		background: #ed6c00;
    color: #ffffff;


}
.news-list li.active .news-title{

		background: #ed6c00;
    color: #ffffff;


}

.news-list li.active .news-content{
	   border: 1px solid #ed6c00;
    border-top:0;
    padding:35px;
     height: auto;
     display: block;
      opacity:1; /* 預設透明，防止 display: none 影響淡入 */
      max-height: unset;    
}


.news-title:after{
	content: " ";
	display: block;
	background-image: url('../../images/news_open.png');
	background-repeat: no-repeat;
	width: 25px;
	height: 16px;
	position: absolute;
	right: 20px;
	top:45%;
}

.news-list li.active .news-title:after{
		background-image: url('../../images/news_close.png');
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 施工項目效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: "Rubik", sans-serif;
  --font-serif: "Cardo", serif;
}

#project .page-content {
  display: grid;
  grid-gap: 1rem;
  /* padding: 1rem; */
  max-width: 1300px;
  margin: 0 auto;
  font-family: var(--font-sans);
}
@media (min-width: 600px) {
  #project .page-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 800px) {
  #project .page-content {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1300px) {
  #project .page-content {
    grid-template-columns: repeat(4, 1fr);
  }
}


#project .card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0.5rem;
  width: 100%;
  text-align: center;
  cursor:pointer;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
  #project .card {
    height: 300px;
  }
}
#project .card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position:center center;
  /*background-position: 0 0;*/
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
#project .card:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  /*background:rgba(10, 14, 41, 0.5);*/
  background-image: linear-gradient(to bottom, rgba(10, 14, 41, 0) 0%, rgba(10, 14, 41, 0.99) 100%);
  /*background-image: linear-gradient(to bottom, rgba(10, 14, 41, 0) 0%, rgba(10, 14, 41, 0.009) 11.7%, rgba(10, 14, 41, 0.034) 22.1%, rgba(10, 14, 41, 0.072) 31.2%, rgba(10, 14, 41, 0.123) 39.4%, rgba(10, 14, 41, 0.182) 46.6%, rgba(10, 14, 41, 0.249) 53.1%, rgba(10, 14, 41, 0.32) 58.9%, rgba(10, 14, 41, 0.394) 64.3%, rgba(10, 14, 41, 0.468) 69.3%, rgba(10, 14, 41, 0.54) 74.1%, rgba(10, 14, 41, 0.607) 78.8%, rgba(10, 14, 41, 0.668) 83.6%, rgba(10, 14, 41, 0.721) 88.7%, rgba(10, 14, 41, 0.762) 94.1%, rgba(10, 14, 41, 0.79) 100%);*/
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}
#project .card:hover{/*background:rgba(10, 14, 41, 0.5);*/}

#project .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
}
#project .content > * + * {
  margin-top: 1rem;
}

#project .title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 1px 1px 1px #333333;
  margin: 0;
}

#project .copy {
  /* font-family: var(--font-serif); */
  font-size: 1.125rem;
  /* font-style: italic; */
  line-height: 1.55;
}

#project .btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 2.0rem;
  font-size: 18px;
  /* font-weight: bold; */
  letter-spacing: 1px;
  /* text-transform: uppercase; */
  color: white;
  background-color: #edcc44;
  border: none;
  border-radius: 30px;
}
#project .btn:hover {
  background-color: #be9a08;
}
#project .btn:focus {
  outline: 1px dashed yellow;
  outline-offset: 3px;
}

@media (hover: hover) and (min-width: 600px) {
 #project  .card:after {
    transform: translateY(0);
  }

 #project  .content {
    transform: translateY(calc(100% - 10.5rem));
  }
  #project .content > *:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }

  #project .card:hover,
#project .card:focus-within {
    align-items: center;

  }
 #project  .card:hover:before,
#project .card:focus-within:before {
    transform: translateY(-4%);
  }
#project   .card:hover:after,
#project .card:focus-within:after {
    transform: translateY(-50%);
  }
 #project  .card:hover .content,
#project .card:focus-within .content {
    transform: translateY(0);
  }
  #project .card:hover .content > *:not(.title),
#project .card:focus-within .content > *:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

 #project  .card:focus-within:before, .card:focus-within:after,
#project .card:focus-within .content,
#project .card:focus-within .content > *:not(.title) {
    transition-duration: 0s;
  }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 工程實績詳細內頁 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*
.slick-prev{ background:url(images/prev.png); width:52px; height:52px;}
.slick-next{ background:url(images/next.png); width:52px; height:52px;}
*/

#project .toper{
    margin: 0 10px 20px 10px;
}
#project .lefter{position:relative;flex:1;/*padding:0 10px 0 10px;*/display: flex;align-items:center;justify-content: center;}
#project .lefter img, #project .righter img{width: 100%;max-height: 488px;height: auto;margin: auto; /* 將圖片置中 */}
#project .lefter .marker,#project .righter .marker{position:absolute;bottom:0;left:0;background: #000000;color: #ffffff;padding: 10px 20px;}
#project .righter{position:relative;flex:1;/*padding:0 0 0 20px;*/display: flex;align-items:center;justify-content: center;}
#project .caption{
    font-size: 20px;
    color: #000000;
    padding: 0 0 20px 0;
    letter-spacing: 1px;
    font-weight: bold;
}
#project .toper .item-area{
    display: flex;
    flex-wrap: wrap;
    width: 52%;
}
#project .item-area .item{
    width: 100%;
    max-width: 300px;
    padding: 15px 0;
    font-size: 16px;
}
.slick-prev:before{ background:url(../../images/prev.png); width:52px; height:52px; } 
.slick-next:before{ background:url(../../images/next.png); width:52px; height:52px; }

.performance-slider{ display:flex;}

@media screen and (max-width: 600px) {
 .performance-slider{display:block;}
 #project .righter{/* padding:30px 10px; */}
 
#project .item-area{
    width: 100%;
} 

#project .toper .item-area{
   
    width: 100%;
}
 
}

.prev-next{
	background-position:center;
	background-repeat:no-repeat;
	margin:0 10px;

}
.container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: url('../../images/news_close.png') center center no-repeat;
  transform: rotate(30deg);
}


.index_project_date{
	color:#215f6a;
	margin-right: 10px;
}



.image-hover-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
 
}

/* 包裹背景圖片，控制放大效果 */
.image-inner {
  width: 100%;
  height: 100%;
  background-image: url('your-image.jpg') no-repeat center center;
  background-size: cover;
  transition: transform 0.4s ease;
  background-position:center center; 
  background-size:cover;
}

.image-hover-card:hover .image-inner {
  transform: scale(1.05); /* 圖片放大 5% */
}

/* 文字部分 */
.hover-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-hover-card:hover .hover-text {
  opacity: 1;
}