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

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing:1px; outline:0; }
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-y:scroll; overflow-x:hidden; background:url(../../images/inner-bg.jpg) repeat; }
body, td, th,select,input {font-size:12px;font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#333333;}

/*簡易設定*/
.iframe_ch { display:none }
.middle { vertical-align:middle; }
.center { text-align:center; }
.w100{ width:100%; }
.fix-top{ margin-top:105px; }

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
  
/*全營幕遮罩*/ 
.bg-overlay{display:block;position:fixed;left:0;top:0;background:rgba(0,0,0,0.7);opacity:0;visibility:hidden;width:100%;height:100%;z-index:9999;-webkit-transition:.4s;-o-transition:.4s;transition:.4s}
.bg-overlay.visible{opacity:1;visibility:visible} 

/*分頁*/
.pager{ width:100%; margin:50px auto 50px auto; text-align:center; }
.pager span{ font-size:14px; letter-spacing:1px; cursor:hand; cursor:pointer; }

/*麵包屑*/
#sitemap{width:100%;margin:0;padding:0 10px;box-sizing: border-box;font-size: 15px;letter-spacing:1px;color: #737373;text-align: left;border-bottom: 1px solid #c1c1c1;}
#sitemap .wrap{width:100%;max-width:1400px;overflow:hidden;margin: 0 auto;padding: 20px 20px;}
#sitemap .wrap:before{ font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f015"; padding:0 5px 0 0; color:#378042; }
#sitemap .wrap a{color: #378042; text-decoration:none; }
#sitemap .wrap a{ text-decoration:underline; }

/*編輯器*/
.editor{ width:100%; overflow:hidden; letter-spacing:1px; font-size:14px; line-height:20px; padding:20px 0; }

input[type=submit],input[type=text] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

/*編輯器*/
.editor{ padding:50px 0 20px 0; font-size:16px; line-height:30px; }

/*連結*/
a{ color:#000000;text-decoration:none; }
a:hover{ color:#506267; }

/*表格*/
#css-table { display:table; width:100%; }
.css-tr {display: table-row;}
.css-td {display: table-cell;text-align:left;vertical-align:middle;padding: 0px 10px;box-sizing:border-box;letter-spacing:1px;font-size:14px;color:#121212;}


.btn1{display: inline-block;border:0;color:#FFFFFF;font-size:14px;width:auto;padding: 15px 100px;text-decoration:none;letter-spacing:2px;cursor:hand;cursor:pointer;background: #464646;}
.btn1:hover{ background:#646363; transition: all 0.3s ease; }

.btn2{display: inline-block;border:0;color:#FFFFFF;font-size:14px;width:auto;width:180px;margin: 10px 5px;text-align:center;padding:15px 0;text-decoration:none;letter-spacing:2px;cursor:hand;cursor:pointer;background: #464646;}
.btn2:hover{ background:#000000; transition: all 0.3s ease; }

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


/*網頁大標題*/
.common-title{font-family:'Noto Sans TC', sans-serif;font-size:36px;color:#3b3b3b;margin-top: 3vw;margin-bottom: 20px;}
.common-title span{ font-size:24px; padding-left:30px; }
.common-title select{float:right;padding: 10px 20px;width: 100%;max-width: 250px;margin: 0 5%;font-size: 18px;border: 1px solid #dedfdf;}

/*Header*/
#header{ position:fixed; top:0; left:0; width:100%; z-index:9; background:#050102; }
#header .wrap{ position:relative; width:100%; max-width:1400px; height:105px; margin:0 auto; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
#header a.logo{ display:inline-block; width:555px; height:97px; position:absolute;top: 3px;left:10px;display:flex;cursor:pointer; background:url(../../images/logo.png); }
#header div.lang{ position:absolute; top:20px; right:0; color:#ffffff; font-size:15px; }
#header div.lang a{ color:#ffffff; font-size:16px; text-decoration:none; margin:0 10px; }
#header div.lang a:hover{ text-decoration:underline; }

/*Menu*/
#nav ul > li > a:hover{ color:#378042; transition: all 0.5s ease; border-bottom:3px solid #378042; }

/*內頁banner*/
#banner-box{  width:100%; overflow:hidden; background:#110102; }
#banner-inner{position:relative;height:470px; background:url(../../images/banner-inner.jpg) center no-repeat; background-size: cover; display:flex;align-items:center;justify-content: center; }
#banner-inner .title{opacity:0;text-align:center;color:#ffffff;font-size: 24px;letter-spacing: 10px;}
#banner-inner .title span{font-size:40px;font-family: 'Lato', sans-serif;display: inline-block;font-weight: bold;margin-bottom: 20px;letter-spacing: 5px;font-family:inherit;}
/*內頁背景*/
#inner-resolution{ position:relative; background:url(../../images/resolution-bg.jpg) no-repeat center bottom; min-height:600px; }


/*Wrapper*/
#wrapper{ width:100%; overflow:hidden; }
#wrapper .container{ width:100%; max-width:1400px; margin:0 auto; padding:20px; box-sizing:border-box; }

/*footer*/
#footer{ width:100%; overflow:hidden; background:#000000; }
#footer .wrap{ position:relative; display:flex;flex-wrap:wrap;width:100%;max-width:1400px;min-height:500px;padding: 5vw 10px 30px 8px;margin:0 auto;color:#ffffff;}
#footer .wrap .left{ flex:1; display:flex; }
#footer .wrap .right{ flex:1; display:flex; }
#footer .wrap .area{flex: 1;color:#ffffff;display: flex;align-items:center;writing-mode: vertical-lr;}
#footer .wrap .area span{background:#0F0;font-size:24px;font-style: oblique;/* font-weight:bold; */padding:10px 5px 40px 5px;letter-spacing:2px;font-family: 'Lato', sans-serif;background: linear-gradient(45deg, rgba(55, 128, 65, 1)25%, rgba(74, 146, 7, 0.8)60%);background: -moz-linear-gradient(45deg, rgba(55, 128, 65, 1)25%, rgba(74, 146, 7, 0.8)60%);background: -webkit-linear-gradient(45deg, rgba(55, 128, 65, 1)25%, rgba(74, 146, 7, 0.8)60%);background: -o-linear-gradient(45deg, rgba(55, 128, 65, 1)25%, rgba(74, 146, 7, 0.8)60%);}
#footer .wrap .info{flex: 3;color:#ffffff;}
#footer .wrap .contact-info{float:right;color: #ffffff;font-size:14px;display:flex;width: 100%;max-width: 650px;margin: 0;}
#footer .wrap .contact-info .contact-left,
#footer .wrap .contact-info .contact-right{flex:1;padding: 0 0 0 20px;text-align: left;}
#footer .wrap .contact-info .items{display:flex;align-items: flex-start; font-family:'Noto Sans TC', sans-serif; }
#footer .wrap .contact-info .items:not(:last-child){padding-bottom: 20px;}
#footer .wrap .contact-info .items .items-title{flex: 1; font-size:14px; color:#83bb4e; }
#footer .wrap .contact-info .items .items-content{flex: 5; font-size:16px; line-height:22px; color:#ffffff; }
#footer .wrap .contact-info .items .items-content a{ color:#ffffff; text-decoration:none; }
#copyright{width:100%;text-align:center;margin: 5vw auto 0 auto;}
#copyright img{width:100%;max-width:1006px;margin-bottom: 10px;}

/*回頂部*/
#gotop{position:absolute;top:20px;right:20px;opacity: .7;}

@media (max-width: 1400px) {
	#header a.logo{ background:url(../../images/logo-s.png); width:275px; }
}

@media (max-width: 768px) {
	.common-title select{display: block;float: none;margin: 20px auto;}
	
	#footer .wrap{ display:block; }
	#footer .wrap .right{ margin-top:30px; }
}

@media (max-width: 480px) {
	.common-title{font-size:22px; line-height:24px;text-align:center;}
	.common-title span{ font-size:16px; }
	#footer .wrap .area{ flex:none; }
}

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



/* ----------------------------------------------------------------------------------------------------------------*/


/*---------------News----------------*/
#index-news{ background:url(../../images/news-bg.jpg) no-repeat; background-size:cover; padding:5vw 0; }
#index-news .news-area{ display:flex; }

#index-news .news-area > .right{ flex:1; }
#index-news .news-area > .right .news-items .date{padding-bottom: 1vw;}
#index-news .news-area > .right .news-items .btn1{ margin-top:2vw; }

#index-news .news-area .news-items{width:100%;box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.1);background:#ffffff;padding:20px 40px 20px 40px;margin-top:30px;display: flex;align-items:center;}
#index-news .news-area .news-items div{width:100%;text-align: right;}
#index-news .news-area .news-items .date{font-size: 13px;font-weight: bold;color: #62bb0f;text-align: left;}
#index-news .news-area .news-items ul.title{ padding-left:30px; margin:0; color: #3b3b3b;font-size: 22px;text-align: left;font-weight: bold;font-family: 'Noto Sans TC', sans-serif;}
#index-news .news-area .news-items ul li{list-style-image:url(../../images/star.png); vertical-align:middle;line-height: 39px;}
#index-news .news-area .news-items .content{color:#848282;font-size:16px;text-align: left;line-height: 30px;}

#index-news .news-area .news-items:hover{ background:#464646; transition: all 0.3s ease; }
#index-news .news-area .news-items:hover ul li{filter: brightness(0) invert(1);}
#index-news .news-area .news-items:hover .content{ color:#b7b7b7; }
#index-news .news-area .news-items:hover .btn1{ background:#ffffff; color:#646363; }


@media (max-width: 1000px) {
	#index-news .news-area{ display:block; }
	#index-news .news-area > .left.news-items .date{padding-bottom: 1vw;}
	#index-news .news-area > .left.news-items .btn1{ margin-top:2vw; }	
	
	#index-news .news-area .news-items ul.title{font-size: 18px; margin-bottom:20px; }
	#index-news .news-area .news-items ul li{ line-height:25px; }
	#index-news .news-area .news-items .content{font-size:14px;}
	
	
}
@media (min-width: 1001px) {
	#index-news .news-area > .left{ flex:1; margin-right:30px; }
	#index-news .news-area > .left.news-items{padding: 5vw 40px 20px 40px;}
	#index-news .news-area > .left.news-items .date{padding-bottom: 3vw;}
	#index-news .news-area > .left.news-items .content{ margin-top:20px; }
	#index-news .news-area > .left.news-items .btn1{ margin-top:5vw; }
}

@media (max-width: 480px) {
	#index-news .news-area .news-items{ padding:20px 20px 20px 20px; }
	#index-news .news-area .news-items div{ text-align:center; }
}

/*---------------Service----------------*/
#index-service{ background:#29312a; padding:5vw 0; }
#index-service .common-title{ color:#62bb0f; }
#index-service .service-area{margin: 5vw 0 0 0;display:flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
#index-service .service-area .items{ width: calc(1/3*100% - (1 - 1/3)*30px); margin-bottom:30px; cursor:pointer; }
#index-service .service-area .items span{ position:relative; display:inline-block; }
#index-service .service-area .items span img{ width:100%; }
#index-service .service-area .items span .word{position:absolute;right:20px;bottom:20px;font-size: 30px;color:#ffffff;text-shadow: 1px 1px 1px #000000;font-family:'Noto Sans TC', sans-serif;}
#index-service .service-area .items span .btn1{ padding:15px 5vw; top:-20px; transition: all 0.3s ease; }
#index-service .service-area .items:hover .btn1{ top:0; }

/*service 遮罩*/
.photo-mask{opacity:0;position:absolute;left:0;bottom:0;display: flex;align-items:center;justify-content: center;color:#ffffff;width:100%;height:100%;/*background-color:rgba(0, 0, 0, 0.7);*/background:url(../../images/service-mask.png);letter-spacing:3px;text-align:center;padding:15px;box-sizing:border-box;line-height:22px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-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; }  

@media (max-width: 1000px) {
	#index-service .service-area .items span .word{font-size: 23px;}
	#index-service .service-area .items{ width: calc(1/2*100% - (1 - 1/2)*30px); }	
}

@media (max-width: 480px) {
	#index-service .service-area .items{ width: calc(1/1*100% - (1 - 1/1)*30px); }	
}

/*---------------About----------------*/
#index-about{ position:relative; background:url(../../images/about-bg.jpg) no-repeat left bottom; background-color:#f9f9f9; min-height:840px; }
#index-about .slogan{position:absolute;bottom:5vw;right:5vw;max-width: 440px;padding: 20px;width:100%;text-align:center;color:#7a7a7a;font-size:30px;}
#index-about .slogan span.word{width: 100%;display: inline-block;line-height:50px;font-weight: bold;letter-spacing: 3px;font-family: 'Noto Sans TC', sans-serif;}
#index-about .slogan span.btn1{ margin-top:4vw; }

@media (max-width: 1400px) {
	#index-about{ background-position:center bottom; }
	#index-about .slogan{ background-color:rgba(255, 255, 255, 0.7); }
}
@media (max-width: 480px) {
	#index-about{ min-height:550px; background-size:contain; }
	#index-about .slogan{ right:0; max-width:none; position:inherit; bottom:0; }
}

/*---------------Contact----------------*/
#index-contact{ position:relative; background:url(../../images/contact-bg.png) no-repeat center bottom fixed; background-color:#ddeccd; padding-bottom:50px; }
#index-contact .title{text-align:center;color:#3c7506;font-size:36px;font-family: 'Noto Sans TC', sans-serif;font-weight: bold;letter-spacing: 3px;margin: 5vw 0 1vw 0;}
#index-contact .title span{display:block;font-size:24px;padding: 20px 0 40px 0;}
#index-contact .slogan{text-align:center;font-size:16px;color:#576745;max-width: 650px;margin: 0px auto 30px auto;line-height: 25px;}

/*聯絡我們表單*/
.contact_form{ width:100%; max-width:1000px; margin:10px auto; overflow:hidden; padding:0 20px; box-sizing:border-box; }
.contact_form .form_left{ float:left; width:50%; box-sizing:border-box; }
.contact_form .form_right{ float:right; width:50%; padding-left:20px; box-sizing:border-box; }
.contact_form .form_right.align{ text-align:right !important;}
.contact_form input[type='text']{width:100%;border:0;padding: 12px 8px 12px 80px;box-sizing:border-box;letter-spacing:1px;border:1px solid transparent;color:#333333;font-size: 14px;margin:8px 0;outline:0;background-color:rgba(255, 255, 255, 0.7);}
.contact_form select{width:100%;border:0;padding:10px 8px 10px 8px;box-sizing:border-box;letter-spacing:1px;border:1px solid transparent;color:#333333;font-size: 14px;margin:8px 0;outline:0;}
.contact_form textarea{ width:100%; border:0; height:200px; background-color:rgba(255, 255, 255, 0.7); padding:40px 8px 10px 15px; box-sizing:border-box; letter-spacing:1px; border:1px solid transparent; color:#333333; font-size:16px; margin:8px 0; outline:0; }
.contact_form input[type='text']:hover ,.contact_form textarea:hover { border:1px solid #3C7506; transition: all 0.3s ease; }

.contact_form .frame{ position:relative; }
.contact_form .frame:hover span{ font-weight:bold; color:#3C7506; }
.contact_form .frame span{position:absolute;top: 25px;left: 10px;font-size: 14px;letter-spacing: 1px;}
.contact_form .frame .image{ display:inline-block; cursor:pointer; position:absolute;top: 17px;right: 15px; color:#817272; font-size:14px; text-decoration:none; letter-spacing:2px; }


@media screen and (max-width:768px) {
	.contact_form .form_left{ float:none; width:100%; padding-right:0; }
	.contact_form .form_right{ float:none; width:100%; padding-left:0; }	
	.contact_form .verify{ width:100% !important; }
	.contact_form .form_right.align{ text-align:center !important; margin-top:20px; }
	.contact_form .form_right .btn1{ padding:15px 5vw; width:100%; }
	
}

/*---------------Resolution----------------*/

#index-resolution{ position:relative; background:url(../../images/resolution-bg.jpg) no-repeat center bottom fixed; min-height:840px; }
#index-resolution .slogan{position:absolute;top:5vw;left:5vw;background:#378042;padding: 40px 20px;width:100%;max-width:580px;text-align: left;color:#7a7a7a;font-size:30px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
#index-resolution .slogan .title1{position:absolute;top: 50px;right: -240px;font-size: 115px;color:#ffffff;text-shadow: 3px 3px 13px #242424;font-family: 'Lato', sans-serif;}
#index-resolution .slogan .title1 div{display:table-cell;margin:0;padding:0 2px;float: left;}
#index-resolution .slogan .title2{color:#88dd95;font-size:30px;margin-top:200px;padding: 0 0 20px 0;letter-spacing: 5px;}
#index-resolution .slogan .title3{color:#ffffff;font-size:16px;letter-spacing: 2px;padding: 0 0 30px 0;margin: 0 0 20px 0;border-bottom: 1px solid #ffffff;}
#index-resolution .slogan img{ width:100%; max-width:540px; }

@media (max-width: 1000px) {
	#index-resolution{ min-height:inherit; padding:30px 20px; }
	#index-resolution .slogan{ position:initial; margin-left:auto; margin-right:auto; right:0; left:0; }
	#index-resolution .slogan .title1{ position:initial; font-size:50px; }	
	#index-resolution .slogan .title2{margin-top:20px;}
}

@media (max-width: 1000px) {
	#index-resolution .slogan .title1{ font-size:30px; }	
}

@media (max-width: 480px) {
	#index-resolution{padding:300px 0 0 0px;  background:url(../../images/resolution-bg.jpg) no-repeat center bottom;}
}

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

.inner-about1{ padding:5vw 0; background:url(../../images/about-bg1.png) right bottom no-repeat; }
.inner-about1 .slogan{ font-size:24px; color:#3b3b3b; margin:50px 0; line-height:30px; }
.inner-about1 .history-area{width:100%;border-left: 3px solid #478a51;}
.inner-about1 .history-area .items{position: relative;display:flex;padding: 0 0 30px 20px;background:rgba(255, 255, 255, 0.7); padding: 0px 20px 30px 20px;}
.inner-about1 .history-area .items:last-child{ padding-bottom:0; }
.inner-about1 .history-area .items:before{ content:url(../../images/dot.png); position:absolute;top: 10px;left: -8px;}
.inner-about1 .history-area .items .left{ flex:1; font-size:24px; color:#62bb0f; }
.inner-about1 .history-area .items .right{ flex:5; font-size:16px; color:#282828; line-height:30px; }

.inner-about2{position:relative;height: 50vw;max-height: 845px;background:url(../../images/about-bg2.jpg) right bottom no-repeat;background-size: cover;}
.inner-about2 span{position:absolute;right:10vw;bottom:10vw;font-size:48px;color:#2b5d33;font-family: 'Noto Sans TC', sans-serif;font-weight: bold;letter-spacing: 10px;}

.inner-about3{width: 100%;padding:5vw 0 0 0;}
.inner-about3 .title{font-size:60px;color:#d2d2d2;font-family: 'Lato', sans-serif;}
.inner-about3 .certificate{ width:100%; background:url(../../images/about-bg3.jpg) center; }
.inner-about3 .certificate .container{ position:relative; min-height:560px; }
.inner-about3 .certificate .container .iso-title{position:absolute;top: 7vw;left:5vw;font-size:48px;color:#000000;letter-spacing: 3px;font-family: 'Noto Sans TC', sans-serif;font-weight: bold;}
.inner-about3 .certificate .container .iso-title span{font-size:32px;color:#478a51;display:block;padding: 20px 0 0 0;letter-spacing: 5px;}
.inner-about3 .certificate .container .iso-img{position:absolute;top: 7vw;right:5vw;}
.inner-about3 .certificate .container .iso-img img{ padding:10px 10px; }

@media (max-width: 1400px) {
	.inner-about1 .history-area .items{/* background:rgba(255, 255, 255, 0.7); padding: 0px 20px 30px 20px;*/ }
}

@media (max-width: 1000px) {
	.inner-about1{ padding:5vw 0 70vw 0; background-size:100%; }
	.inner-about2 span{color:#ffffff;width: 100%;right: 0;top: 0;bottom: auto;text-align: center;background: rgba(0,0,0,0.5);padding: 15px 10px;font-size: 30px;}
	.inner-about3 .title{ font-size:40px; text-align:center; }
	.inner-about3 .certificate .container{ text-align:center; min-height:inherit; }
	.inner-about3 .certificate .container .iso-title{ position:static; margin:40px 0; }
	.inner-about3 .certificate .container .iso-img{ position:static; margin:40px 0; }
}

@media (max-width: 480px) {
	.inner-about1 .history-area .items{display:block;}
	.inner-about3 .title{ font-size:30px; }
	.inner-about3 .certificate .container .iso-title{ font-size:24px;}
	.inner-about3 .certificate .container .iso-title span{ font-size:18px;}
}

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


#inner-news{ padding:5vw 0; }
#inner-news .news-area{ display:flex; }

#inner-news .news-area .news-items{display:flex; width:100%;box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.1);background:#ffffff;padding:20px 40px 20px 40px;margin-top:30px;display: flex;align-items:center;}
#inner-news .news-area .news-items .number{ padding:10px; background:#378042; color:#ffffff; font-size:40px;  }
#inner-news .news-area .news-items .content{ padding:0 20px; }
#inner-news .news-area .news-items .date{font-size: 13px;font-weight: bold;color: #62bb0f;text-align: left;}
#inner-news .news-area .news-items ul.title{ padding-left:30px; margin:0; color: #3b3b3b;font-size: 22px;text-align: left;font-weight: bold;font-family: 'Noto Sans TC', sans-serif;}
#inner-news .news-area .news-items ul li{list-style-image:url(../../images/star.png); vertical-align:middle;line-height: 39px;}
#inner-news .news-area .news-items .content{flex:1;color:#848282;font-size:16px;text-align: left;line-height: 30px;}

#inner-news .news-area .news-items:hover{ background:#464646; transition: all 0.3s ease; }
#inner-news .news-area .news-items:hover ul li{filter: brightness(0) invert(1);}
#inner-news .news-area .news-items:hover .content{ color:#b7b7b7; }
#inner-news .news-area .news-items:hover .btn1{ background:#ffffff; color:#646363; }

/*detail*/
#inner-news-detail .news-area .news-items{display:flex;width:100%;box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.1);background:#ffffff;padding:20px 40px 20px 40px;margin: 30px 0 40px 0;display: flex;align-items:center;}
#inner-news-detail .news-area .news-items > div{ width:100%; padding:0 50px; }
#inner-news-detail .news-area .news-items .date{font-size: 13px;font-weight: bold;color: #62bb0f;text-align: left; padding:20px 0; }
#inner-news-detail .news-area .news-items ul.title{padding-left:30px;margin:0;border-bottom:3px solid #378042;padding-bottom: 15px;color: #3b3b3b;font-size: 22px;text-align: left;font-weight: bold;font-family: 'Noto Sans TC', sans-serif;}
#inner-news-detail .news-area .news-items ul li{list-style-image:url(../../images/star.png); vertical-align:middle;line-height: 39px;}
#inner-news-detail .news-area .news-items .editor{padding: 20px 0px; min-height:400px; }

#inner-news-detail .news-area .download-area{width:100%;border-bottom:1px solid #dadada;font-size:18px;margin: 30px 0 0 0;}
#inner-news-detail .news-area .download-area .title{color:#378142;letter-spacing: 5px;}
#inner-news-detail .news-area .download-area .list{font-size:18px;background: #ddeccd;padding: 10px 10px;margin: 10px 0 10px 0;}
#inner-news-detail .news-area .download-area .list a{ color:#5c5b5b; }
#inner-news-detail .news-area .download-area .list:before{font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f019";color:#a2a2a2;margin: 0 5px 0 0;}


@media (max-width: 1000px) {
	#inner-news .news-area .news-items{ flex-wrap:wrap; padding:20px 0px 20px 0px; }
	#inner-news .news-area .news-items .number{ margin:0 auto; }
	#inner-news .news-area .news-items .date{ text-align:center; }
	#inner-news .news-area .news-items .number{ text-align:center; }
	#inner-news .news-area .news-items .content{display: block;width: 100%;flex: none;}
	#inner-news .news-area .news-items .btn1{ margin:20px auto; }
	#inner-news-detail .news-area .news-items > div{ padding:0 0px; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Product <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-product{ width:100%; }
#inner-product .common-title{ text-align:center; }

.product-about{ width:100%; display:flex; min-height:600px; }
.product-about > .left{ flex:1; background:#29312a; color:#ffffff; padding:10% 5% 5% 15%; }
.product-about > .left .title{ color:#fefefe; font-size:36px; margin-bottom:50px; }
.product-about > .left .content{ color:#fefefe; font-size:16px; line-height:30px; }
.product-about > .right{ flex:1.5; background:url(../../images/product-img1.jpg) no-repeat; background-size:cover; }

.product-spec{ position:relative; width:100%; min-height:900px; background:url(../../images/product-img2.jpg) no-repeat; background-size:cover; }
.product-spec > div{ position:absolute; bottom:10%; right:10%; width:100%; max-width:600px; }
.product-spec > div .title{ font-size:36px; color:#2d2d2d; margin-bottom:30px; letter-spacing:3px; }
.product-spec > div .title span{ font-size:24px; padding-left:30px; }
.product-spec > div .items{ margin-bottom:20px; }
.product-spec > div .items span{ display:block;padding: 5px 8px;font-size: 20px;font-weight: bold; }
.product-spec > div .items span:before{content:url(../../images/star.png);vertical-align: -10%;padding-right:10px;}
.product-spec > div .items div{padding: 10px 40px;font-size: 18px;}

@media (max-width: 1700px) {

	.product-spec > div{ padding:20px; background-color:rgba(255, 255, 255, 0.7); }

}

@media (max-width: 1400px) {
	.product-about > .left{ flex:3; padding:5% 5% 5% 5%; }
}

@media (max-width: 1024px) {
	.product-spec{ min-height:inherit; }
	.product-spec > div{ position:initial; max-width:100%; right:inherit; }
	.product-spec > div .title{ font-size:26px; }
	.product-spec > div .title span{ font-size:20px; }
	
	.product-about{ display:block; }
	.product-about > .right{ height:400px; }	
	
}

@media (max-width: 768px) {
	.product-about > .left{ flex: 95%; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Composition <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-composition .container{background:url(../../images/about-bg1.png) right bottom no-repeat;background-size: 800px 600px;}
#inner-composition .common-title{ text-align:center; }
.composition-menu{ width:100%; text-align:center; }
#inner-composition .title{ font-size:24px; padding:50px 10px 20px 10px; }
#inner-composition .title:before{ content:url(../../images/star.png); padding-right:10px; }

.table{ width:100%; overflow:auto; }
.table table{ width:100%; min-width:800px; }
.table table { border-collapse: collapse;}
.table table th{background: #ffca7c;color: #333 !important;}
.table table, 
.table table th,
.table table td {border: 1px solid black;color:#333;font-size:15px;letter-spacing:1px;line-height:23px;padding: 5px 10px;box-sizing:border-box;text-align:center;}
.table table td:first-child { text-align:center; }
.table table tr:nth-of-type(odd){ background:#fff0da; }
.table table tr:nth-of-type(even){ background:#f3f3f3; }

.color-2 table th{background: #a1dfec !important;}
.color-2 table tr:nth-of-type(odd){ background:#ceebf1 !important; }
.color-2 table tr:nth-of-type(even){ background:#f3f3f3 !important; }

.color-3 table th{background: #cfc7eb !important;}
.color-3 table tr:nth-of-type(odd){ background:#f1edff !important; }
.color-3 table tr:nth-of-type(even){ background:#f3f3f3 !important; }

.color-4 table th{background: #aed89b !important;}
.color-4 table tr:nth-of-type(odd){ background:#ddedd6 !important; }
.color-4 table tr:nth-of-type(even){ background:#f3f3f3 !important; }

.color-5 table th{background: #ffb4a9 !important;}
.color-5 table tr:nth-of-type(odd){ background:#fee3df !important; }
.color-5 table tr:nth-of-type(even){ background:#f3f3f3 !important; }

.color-6 table th{background: #9abdff !important;}
.color-6 table tr:nth-of-type(odd){ background:#d5e3fd !important; }
.color-6 table tr:nth-of-type(even){ background:#f3f3f3 !important; }

.color-7 table th{background: #d2dbc0 !important;}
.color-7 table tr:nth-of-type(odd){ background:#e9ede2 !important; }
.color-7 table tr:nth-of-type(even){ background:#ffffff !important; }

.packing-area{width:100%; display:flex; padding:50px 0;}
.packing-area > .left{flex:1;}
.packing-area > .right{flex:1.5;}


@media (max-width: 1400px) {
	.packing-area{flex-direction:column-reverse; text-align:center; }
}

@media (max-width: 1000px) {
	#inner-composition .container{background: url(../../images/about-bg1.png) center bottom no-repeat;background-size: 100%;padding-bottom: 60vw;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Production Process <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-produce .common-title{ text-align:center; }
#inner-produce .container{ text-align:center; }
#inner-produce .container .items-area{width:100%;display:flex;flex-wrap:wrap;justify-content: center;margin: 40px 0;}

#inner-produce .container .items-area .items{text-align: left;font-size: 24px;color: #090303;margin: 30px 20px;}
#inner-produce .container .items-area .items div:before{ content:url(../../images/star.png); }
#inner-produce .container .items-area .items span{ font-size:18px; padding-left:10px; }
#inner-produce .container .items-area .items img{ width:100%; max-width:522px; }

@media (max-width: 480px) {
	#inner-produce .container .items-area .items{ font-size:18px; margin:10px 10px; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> CSR <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#index-activity{width:100%;padding: 40px 0 150px 0;background-image:url(../../images/container-bg-4.jpg);background-position:bottom;background-repeat:no-repeat; background-size:100%; background-color:#ffffff; margin-bottom: -1px;}
#index-activity .wrap{display:flex;flex-wrap: wrap;width:100%;max-width:1200px;margin:0 auto;}

#activity-list{display:flex;/* justify-content: space-between; */flex-wrap:wrap;width:100%;overflow:hidden;text-align: center;padding-bottom: 0vw;margin: 100px 0 0 0;/* border-bottom: 1px dashed #878787; */}
#activity-list .items{display: inline-block;vertical-align: top;flex: 0 31%;margin: 10px 1% 10px 1%;box-sizing:border-box;text-align:center;/*background:#ffffff;*/}
#activity-list .items .date{color:#62bb0f;font-size:14px;text-align: left;padding: 10px 0;}
.activity-detail-title{ color:#bc8e8e; font-size:18px; border-bottom:1px solid #bc8e8e; margin:30px 0; padding:0 0 10px 0; }
#activity-list .photo-mask-content span{ color:#ffffff; font-size:16px; line-height:22px; }
#activity-list .photo-mask-content span i{ font-size:30px; }
#activity-list .items .title{
    font-size: 24px;
    color: #464646;
    /* font-weight: bold; */
    text-align: left;

    padding: 0 0 15px 0;
    margin: 15px 0;
	line-height:30px;
    /* border-bottom: 1px solid #d3af78; */
}
#activity-list .items .title a{ color:#464646; text-decoration:none; }
#activity-list .items .title a:hover{ color:#378042; font-weight:bold; }
#activity-list .items .content{
    font-size: 15px;
    text-align: left;
    line-height: 20px;
    color: #606060;
}
#index-activity .btn-3{margin: 10px auto;}


/*------image mask--------*/
.photo-mask2{opacity:0;position:absolute;left:0;bottom:0;color:#ffffff;width:100%;height:100%;background-color:rgba(35, 35, 35, 0.7);letter-spacing:3px;text-align:center;padding:4vw; box-sizing:border-box; line-height:22px;-webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;}
.photo-mask-content2{ width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.photo-mask-content2 span{
    font-size: 14px;
    letter-spacing: 3px;
    border: 1px solid #ffffff;
    padding: 13px 25%;
}
.photo-mask2 .line{border:1px solid #FFFFFF;}
.gallery{ position:relative; }
.gallery .photo-mask2{ opacity:0; cursor:pointer; }
.gallery:hover .photo-mask2{ opacity:1; }
.gallery:hover .title{ opacity:0; }	

@media screen and (max-width:800px) {
	#index-activity{padding: 40px 0 0px 0;}
	#activity-list{ margin:10px 0; }
	#activity-list .items{flex:0 46%;margin: 20px 1.5%;}	
}
@media screen and (max-width:480px) {
	#activity-list .items{flex:0 100%;margin: 0px 2%;}	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Contact <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-contact{ position:relative; background:url(../../images/contact-bg.png) no-repeat center bottom fixed; background-color:#ddeccd; padding-bottom:50px;}
#inner-contact .container{ overflow:hidden; }
#inner-contact .left{ float:left; width:50%; }
#inner-contact .right{  float:left; width:50%; }
#inner-contact .title{text-align:left;color:#3c7506;font-size:36px;font-family: 'Noto Sans TC', sans-serif;font-weight: bold;letter-spacing: 3px;margin: 5vw 0 1vw 0;padding: 0 20px 10px 20px;}
#inner-contact .title span{display:block;font-size:24px;padding: 20px 0 40px 0;}
#inner-contact .slogan{text-align:left;font-size:16px;color:#576745;max-width: 650px;margin: 0px 0 30px 0;padding: 0 20px;line-height: 25px;}
#inner-contact .btn1{padding: 13px 10px;margin: 8px 0;}

#inner-contact .contact-info{float:left;color: #ffffff;font-size:14px;display:flex;width: 100%;max-width: 650px;margin: 10px 0 20px 0;}
#inner-contact .contact-info .contact-left,
#inner-contact .contact-info .contact-right{flex:1;padding: 0 0 20px 20px;text-align: left;}
#inner-contact .contact-info .items{display:flex;align-items: flex-start; font-family:'Noto Sans TC', sans-serif; }
#inner-contact .contact-info .items:not(:last-child){padding-bottom: 20px;}
#inner-contact .contact-info .items .items-title{flex: 1;font-size:14px;color: #343a2f;}
#inner-contact .contact-info .items .items-content{flex: 5;font-size:16px;line-height:22px;color: #343a2f;}

@media (max-width: 1024px) {
	#inner-contact .left{ width:100%; }
	#inner-contact .right{ float:none; width:100%; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> CSR <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*owl*/
#inner-news-detail .owl-left{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: flex-start;width: 8%;float:left;}
#inner-news-detail .owl-center{width: 84%;float:left;}
#inner-news-detail .owl-right{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: flex-end;width: 8%;text-align: right;float:left;}

#owl-photography .item{margin:0;padding:10px 5px;height: 120px;/*overflow:hidden;*/display:flex;align-items:center;justify-content: center;width:98%;background:#ffffff;}
#owl-photography .item img{ box-shadow:0 0px 6px rgb(0 0 0 / 25%); border:1px solid #cccccc; }

@media (max-width: 768px) {
	#inner-news-detail .owl-left{width: 12.5%;}
	#inner-news-detail .owl-center{width: 75%;}
	#inner-news-detail .owl-right{width: 12.5%;}
}

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

html, body { position: relative; height: 95%; }
.swiper-container {position:relative;width: 100%;height: 95%; }
.swiper-slide { text-align: center; font-size: 48px; color:#fff; letter-spacing:1px; /*height:840px;*/ height: 100%;  transition: all 0.2s ease; }
.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; }

@media (max-width: 1400px) {
	.swiper-container { height:70%; }
}

@media (max-width: 1000px) {
	.swiper-container { height:50%; }
}

@media (max-width: 768px) {
	.swiper-container { height:30%; }
}

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

/*------Zoom--------*/

.scaleZoom {

	-webkit-animation: scaleZoom 2s ease both;
	animation: scaleZoom 2s ease both;
}
@-webkit-keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.1); }
}
@keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); }
}

/*------區塊跳動效果--------*/
.swiper-scroll{ z-index:999999; }
.swiper-scroll a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	position:absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0%;
	z-index:999;
	}

.swiper-scroll 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;
}

/*image zoom*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.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);
}

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

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(0, 0, 0, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 60px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;padding-top: 10px;left: 0;right: 0;background-color:rgba(0, 0, 0, 0.5);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;height: 25px;}

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

.pageselect{border:1px solid #CCCCCC;padding: 4px 5px;font-size:12px;}
.pageselect:hover{ background:#676666; }
a.pagelink_no{color: #ffffff;text-decoration:none;border: 1px solid #464646;background: #464646;padding: 9px 11px;display: inline-block;margin: 5px 0;}
a.pagelink_no:hover{ background:#676666; }
a.pagelink{color: #ffffff;text-decoration:none;border: 1px solid #464646;background: #464646;padding: 7px 12px;}
a.pagelink:hover{ background:#676666; }
a.pagelink_ch{color: #ffffff;padding: 7px 12px;border: 1px solid #000000;background: #000000;text-decoration:none;}