@charset "utf-8";
@import "font-awesome.min.css";

body {background: #fff url(../images/bg.jpg)repeat-x center top;width: 100%; height:auto; margin:0; padding:0; font-family:"微軟正黑體"; font-size: 14px; line-height: 1.6;}
html { width:100%; height:auto;}

.warpper { background: #ffffff;  max-width:1140px; margin:0 auto;box-shadow: 0 0 15px 0 rgba(0,0,0,.4);overflow: hidden;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */
a { text-decoration:none;transition: all 0.3s ease 0s;}
img { border:0; vertical-align:middle;max-width: 100%;}
input { vertical-align:middle;}
.slicknav_menu {display:none;}
input.select-box { border:1px #CBCBCB solid; padding:5px 3%; width:20px; height:20px; text-align:center; margin-bottom:5px; }


/*** padding and border no width ****/
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}


/***** 表單預設文字顏色設定 *****/
/* 通用 */
::-webkit-input-placeholder { color:#999999; }
::-moz-placeholder { color:#999999; } /* firefox 19+ */
:-ms-input-placeholder { color:#999999; } /* ie */
input:-moz-placeholder { color:#999999; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color:#999999; }
#field3::-webkit-input-placeholder { color:#999999; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999; }

/* mozilla专用 */
#field2::-moz-placeholder { color:#999999; }
#field3::-moz-placeholder { color:#999999; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999; }


/*** 手機選單、選單 色塊-變色  ***/
.b-color, .slicknav_menu { max-width:1140px; margin:0 auto;  } /** 選單顏色 ***/
.slicknav_icon-bar { background-color: #FFF;} /** 手機選單ICON按鈕色 ***/
.slicknav_btn { } /** 手機選單ICON按鈕底色 ***/

.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover {color: #fffe01;text-shadow: 1px 1px 0px #002b12, -1px -1px 0px #002b12, -1px 1px 0px #002b12, 1px -1px 0px #002b12; } /** 選單滑入顏色 ***/
.slicknav_nav>li {} 
.border-color { border-left:7px #A0A0A0 solid;} /** 標題顏色 ***/


header { background:#edfbf2 url(../images/top_bg.png) no-repeat bottom left;background-size: cover;  max-width:1140px; margin:0 auto; }
.head-main { max-width:1140px; margin:0 auto; height:114px;padding:0px; position:relative; }
.head-tool { position: absolute; top:4px; right:95px;color:#0a6f39;font-size: 12px;}
.head-tool a {color:#0a6f39;padding: 3px 10px; }
.head-tool a:hover {color:#fff;background:#0a6f39;border-radius: 5px; }

.head-main .logo { position:absolute; left:55px; top:3px; width:116px; height:auto;}
.head-main .logo a {display: block; color:#000000;}
.head-main .logo img { width:100%; height:auto;}
.home { display: block; position:absolute; top:-35px; right:0px; width:25px; height:auto;}
.home_w { display:none;}

.banner { background: #ffffff;  max-width:1140px; margin:0 auto; position: relative; }
.banner img { vertical-align:middle; width:100%; height:auto; position:absolute;}

h3.login-title { margin:0 0 10px 0; font-family:"Times New Roman"; font-size:24px; line-height:30px; color:#9B9B9B;}
.login-tool { }
.icon-tool { width:40px; height:auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
@media screen and (max-width:945px){
.head-tool {right:10px;}
}
@media screen and (max-width:640px){
header {position: inherit;background: none;}
.head-main {position: inherit;height: 0;}
.head-tool { position:fixed; top:13px; right:75px;color:#fff;z-index: 1000;}
.head-tool a {color:#fff;background:#37a269;padding: 3px 5px;border-radius: 5px; }
.head-tool a:hover {color:#fff;background:#17a459;border-radius: 5px; }
.head-main .logo { position:fixed; left:5px; top:2px; width:40px;z-index: 1000;}
}
/** edm **/
.edm{position: relative;}
.edm img{width: 100%;}
.edm-font01{color: #ffff00;font-size: 34px;text-shadow: 1px 1px 4px #282304, -1px -1px 4px #282304, -1px 1px 4px #282304, 1px -1px 4px #282304;font-family:'Times New Roman';position: absolute;bottom:40px;left: 80px;font-weight: bold;margin: 0 10px 0 0;}
.edm-font02{color: #fff;font-size: 22px;text-shadow: 1px 1px 2px #484643, -1px -1px 2px #484643, -1px 1px 2px #484643, 1px -1px 2px #484643;position: absolute;bottom:10px;left: 180px;font-weight: bold;margin: 0 10px 0 0;}

 @keyframes edm-font01{
0%{position: absolute;bottom:40px;left:-50%;opacity:0;}
100%{position: absolute;bottom:40px;left: 80px;opacity:1;}
}
@-moz-keyframes edm-font01{
0%{position: absolute;bottom:40px;left:-50%;opacity:0;}
100%{position: absolute;bottom:40px;left: 80px;opacity:1;}
}
@-webkit-keyframes edm-font01{
0%{position: absolute;bottom:40px;left:-50%;opacity:0;}
100%{position: absolute;bottom:40px;left: 80px;opacity:1;}
}
@-o-keyframes edm-font01{
0%{position: absolute;bottom:40px;left:-50%;opacity:0;}
100%{position: absolute;bottom:40px;left: 80px;opacity:1;}
}
.edm-font01{animation:edm-font01 1.4s ease-out;-moz-animation:edm-font01 1.4s ease-out;-webkit-animation:edm-font01 1.4s ease-out;-o-animation:edm-font01 1.4s ease-out;}

@keyframes edm-font02{
0%{position: absolute;bottom:10px;left:-50%;opacity:0;}
100%{position: absolute;bottom:10px;left: 180px;opacity:1;}
}
@-moz-keyframes edm-font02{
0%{position: absolute;bottom:10px;left:-50%;opacity:0;}
100%{position: absolute;bottom:10px;left: 180px;opacity:1;}
}
@-webkit-keyframes edm-font02{
0%{position: absolute;bottom:10px;left:-50%;opacity:0;}
100%{position: absolute;bottom:10px;left: 180px;opacity:1;}
}
@-o-keyframes edm-font02{
0%{position: absolute;bottom:10px;left:-50%;opacity:0;}
100%{position: absolute;bottom:10px;left: 180px;opacity:1;}
}
.edm-font02{animation:edm-font02 1.8s ease-out;-moz-animation:edm-font02 1.8s ease-out;-webkit-animation:edm-font02 1.8s ease-out;-o-animation:edm-font02 1.8s ease-out;}

@media screen and (max-width:950px){
.edm-font01{position: absolute;bottom:inherit;top:45%;left: 10px;}
.edm-font02{position: absolute;bottom:inherit;top:70% ;left: 10px;line-height: 1.4;}
@keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:45%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:45%;left: 10px;opacity:1;}
}
@-moz-keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:45%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:45%;left: 10px;opacity:1;}
}
@-webkit-keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:45%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:45%;left: 10px;opacity:1;}
}
@-o-keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:45%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:45%;left: 10px;opacity:1;}
}
.edm-font01{animation:edm-font01 1.4s ease-out;-moz-animation:edm-font01 1.4s ease-out;-webkit-animation:edm-font01 1.4s ease-out;-o-animation:edm-font01 1.4s ease-out;}

@keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:70% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:70% ;left: 10px;opacity:1;}
}
@-moz-keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:70% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:70% ;left: 10px;opacity:1;}
}
@-webkit-keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:70% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:70% ;left: 10px;opacity:1;}
}
@-o-keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:70% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:70% ;left: 10px;opacity:1;}
}
.edm-font02{animation:edm-font02 1.8s ease-out;-moz-animation:edm-font02 1.8s ease-out;-webkit-animation:edm-font02 1.8s ease-out;-o-animation:edm-font02 1.8s ease-out;}
}

@media screen and (max-width:640px){
.edm{padding: 43.38px 0 0 0;}
.edm-font01{font-size: 22px;}
.edm-font02{font-size: 16px;}
}
@media screen and (max-width:500px){
.edm-font01{top:60%;}
.edm-font02{top:85%;}
	@keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:60%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:60%;left: 10px;opacity:1;}
}
@-moz-keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:60%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:60%;left: 10px;opacity:1;}
}
@-webkit-keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:60%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:60%;left: 10px;opacity:1;}
}
@-o-keyframes edm-font01{
0%{position: absolute;bottom:inherit;top:60%;left:-50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:60%;left: 10px;opacity:1;}
}
.edm-font01{animation:edm-font01 1.4s ease-out;-moz-animation:edm-font01 1.4s ease-out;-webkit-animation:edm-font01 1.4s ease-out;-o-animation:edm-font01 1.4s ease-out;}

@keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:85% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:85% ;left: 10px;opacity:1;}
}
@-moz-keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:85% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:85% ;left: 10px;opacity:1;}
}
@-webkit-keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:85% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:85% ;left: 10px;opacity:1;}
}
@-o-keyframes edm-font02{
0%{position: absolute;bottom:inherit;top:85% ;left: -50%;opacity:0;}
100%{position: absolute;bottom:inherit;top:85% ;left: 10px;opacity:1;}
}
.edm-font02{animation:edm-font02 1.8s ease-out;-moz-animation:edm-font02 1.8s ease-out;-webkit-animation:edm-font02 1.8s ease-out;-o-animation:edm-font02 1.8s ease-out;}

}

/** 首頁 **/
.i-performance{text-align: right;position: relative;padding: 15px 0 0 0;}
.i-performance img{position: relative;z-index: 1;}
.i-performance-images{position: absolute;right:100px;bottom:0px;z-index: 0;width:calc(100% - 75px);}
.i-performance-images img{width: 100%;}
@keyframes i-performance-images{
0%{position: absolute;right:-100%;bottom: 0px;opacity:0;}
40%{position: absolute;right:100px;bottom: 0px;opacity:1;}
80%{position: absolute;right:100px;bottom: 0px;opacity:1;}
100%{position: absolute;right:100px;bottom: 0px;opacity:0;}
}
@-moz-keyframes i-performance-images{
0%{position: absolute;right:-100%;bottom: -22px;opacity:0;}
60%{position: absolute;right:100px;bottom: -22px;opacity:1;}
100%{position: absolute;right:100px;bottom: -22px;opacity:0;}
}
@-webkit-keyframes i-performance-images{
0%{position: absolute;right:-100%;bottom: -22px;opacity:0;}
60%{position: absolute;right:100px;bottom: -22px;opacity:1;}
100%{position: absolute;right:100px;bottom: -22px;opacity:0;}
}
@-o-keyframes i-performance-images{
0%{position: absolute;right:-100%;bottom: -22px;opacity:0;}
60%{position: absolute;right:100px;bottom: -22px;opacity:1;}
100%{position: absolute;right:100px;bottom: -22px;opacity:0;}
}
.i-performance-images{animation:i-performance-images 10s ease infinite;-moz-animation:i-performance-images 10s ease infinite;-webkit-animation:i-performance-images 10s ease infinite;-o-animation:i-performance-images 10s ease infinite;}
@media screen and (max-width:750px){
.i-performance>img{width:260px;}
}
@media screen and (max-width:640px){
.i-performance{padding: 30px 0 0 0;}
.i-performance>img{width: 180px;}
}
@media screen and (max-width:500px){
.i-performance>img{width: 150px;}
}

/** 跑馬燈 **/
.marquee{max-height: 130.95px;}
.marquee ul{list-style: none;padding: 0;margin: 0;}
.marquee ul li{padding:8px 0;margin: 0;}
.marquee ul li img{width: 150px;border: 2px #fff solid;box-shadow: 1px 1px 5px rgba(0,0,0,.5);}
#Marquee_x { overflow:hidden;width: 100%;} 
#Marquee_x ul li ,#Marquee_x ul li div{ float:left;} /* 横向滚动必须让所有li左浮动 */

/*****  聯絡我們  *****/
.contact-body {}
.contact-note { padding:10px 0; font-size:13px; color:#F00;}
.contact-left {margin: 20px 0 ; }
.contact-left img {}
.cart-btn { margin: 15px 0 ;display: flex;justify-content: flex-end;}

.btn-send { font-size:13px;} 
a.btn-send { background: #397a09; padding: 5px 20px; text-align:center; font-size:13px; color:#fff;  margin:2px 0 2px 5px;}
a.btn-send:hover { background: #295c03;}
a.btn-reset { background:#666666;  padding: 5px 20px; text-align:center; font-size:13px; color:#fff; margin:2px 0 2px 5px;}
a.btn-reset:hover { background:#444444;}

a.btn-send-over { background: #9c9c9b; padding: 5px 20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px; }
a.btn-send-over:hover { background: #b9b9b9;}


/*****  內頁架構  *****/
.content-body {padding: 0 0 2px 0;display: flex;background: #a0c2aa;}
.content-body-left {padding: 20px 20px 300px 20px;flex: 1;position: relative;overflow: hidden;background: #fff;width: 100%;}
.content-body-right {padding: 20px;background: #a0c2aa;flex:3.5;width: 100%;}

.contact-body-main{border-radius: 5px; background: #fff;box-shadow: inset 0 0 0 5px #f3f3f3;padding: 20px;height: 100%;}
.page-title { background:url(../images/page-title.jpg) left bottom no-repeat; font-size:20px; color:#030; padding:14px 0px 0 75px; margin:0 0 20px 0; border-bottom:1px #030 dotted; }
.page-main { padding: 0; font-size: 16px; color:#333;}
@media screen and (max-width:750px) {
.content-body-left {padding: 10px 10px 200px 10px;}
.content-body-right {padding: 10px;}
	.contact-body-main{padding: 15px;}
}
@media screen and (max-width:640px) {
.content-body {padding:43.38px 0 2px 0;display: block;}
.content-body-left {flex: inherit;width: 100%;padding: 10px;overflow: inherit;}
.content-body-right {flex: inherit;width: 100%;}
}
.left-menu-title { background:#a0c2aa;font-size:18px; color: #fff; padding:5px 10px; border-radius:5px;margin: 0 0 5px 0;font-weight: bold;}
.in-left-menu {position: relative; z-index: 1;  }
.in-left-menu>ul { margin:0; padding:20px; list-style:none;background: #dde8e0; border-radius:5px; }
.in-left-menu>ul>li {border-bottom:1px #007d12 dotted; font-size:15px; color:#030; padding:0;font-weight: bold;}
.in-left-menu>ul>li>a { background:url(../images/left-icon.png) no-repeat 5px 14px; color:#030; display:block; padding:8px 5px 8px 25px;}
.in-left-menu>ul>li>a:hover { background:url(../images/left-icon.png) no-repeat 5px 14px #eff9f2; }
.in-left-menu>ul>li ul { margin:5px 0 0 40px; padding:0; list-style: square;} 
.in-left-menu>ul>li ul li { border-top:1px #CCC dotted; padding:5px;}
.in-left-menu>ul>li ul li:hover { background: #E8E8E6;} 
.in-left-menu>ul>li ul li a { font-size:13px; color:#666; display:block;}
.in-left-menu>ul>li ul li a:hover { color: #71743D;  }
.in-left-images{position: absolute; bottom: 0;right: 0;width: 100%;z-index: 0;}
.in-left-images img{width: 100%;}
.m_classLink{display:none;}

.in-top-menu {margin: 0 0 10px 0;  }
.in-top-menu>ul { margin:0; padding:0; list-style:none;display: flex;justify-content: flex-end;flex-wrap: wrap; }
.in-top-menu>ul>li  {font-size:15px; color:#fff; padding:0;margin: 5px; min-width: 130px;text-align: center;}
.in-top-menu>ul>li>a {display: block; color: #fff;box-shadow: inset 1px 1px 2px 0 #10e926,2px 2px 0 0 rgba(0,0,0,.2);border: 1px #008800 solid;border-radius: 5px;padding: 2px 10px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#008800+0,3ac100+100 */
background: rgb(0,136,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,136,0,1) 0%, rgba(58,193,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,136,0,1) 0%,rgba(58,193,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,136,0,1) 0%,rgba(58,193,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008800', endColorstr='#3ac100',GradientType=0 ); /* IE6-9 */ }
.in-top-menu>ul>li>a:hover {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3ac100+0,008800+100 */
background: rgb(58,193,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(58,193,0,1) 0%, rgba(0,136,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(58,193,0,1) 0%,rgba(0,136,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(58,193,0,1) 0%,rgba(0,136,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ac100', endColorstr='#008800',GradientType=0 ); /* IE6-9 */ }

.m_classLink02{display:none;}
@media screen and (max-width:750px) {
	.in-left-menu>ul { margin:0; padding:10px; }
}
@media screen and (max-width:640px) {
.in-left-images{display: none;}
.classBox{padding:0 0 0px 0;}
ul.classLink{display:none;}
.m_classLink{display:block; position:relative; background-color:#fff; border:1px solid #a0c2aa;}
.m_classLink a.main{display:block; background:none; font-size:15px; font-family:"微軟正黑體", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
.m_classLink a.main i{display:block; font-size:15px; background:#a0c2aa; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #a0c2aa; position:absolute; left:0; top:100%; z-index:999; box-sizing:border-box;}
.m_classLink ul li{margin:0; padding:0;}
.m_classLink ul li a{display:block; padding:8px; border-top:1px solid #a0c2aa; font-family:"微軟正黑體", "新細明體", sans-serif; font-size:15px; color:#222;}
.m_classLink ul li:first-child a{border:none;}
.m_classLink ul li a:hover{background:#eff9f2;}
.m_classLink ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none;width: calc(100% - 20px);  background:#FFF; border:1px solid #a0c2aa; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}

.classBox02{padding:0 0 10px 0;}
ul.classLink02{display:none;}
.m_classLink02{display:block; position:relative; background-color:#fff; border:1px solid #008800;}
.m_classLink02 a.main02{display:block; background:none; font-size:15px; font-family:"微軟正黑體", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
.m_classLink02 a.main02 i{display:block; font-size:15px; background:#008800; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
.m_classLink02 ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #008800; position:absolute; left:0; top:100%; z-index:0; box-sizing:border-box;}
.m_classLink02 ul li{margin:0; padding:0;}
.m_classLink02 ul li a{display:block; padding:8px; border-top:1px solid #008800; font-family:"微軟正黑體", "新細明體", sans-serif; font-size:15px; color:#222;}
.m_classLink02 ul li:first-child a{border:none;}
.m_classLink02 ul li a:hover{background:#edf9ed;}
.m_classLink02 ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none;width: calc(100% - 20px);  background:#FFF; border:1px solid #008800; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
}

.font-001{font-size: 18px;color: #333;font-weight: bold;text-align: center;}
.font-002{font-size: 18px;color: #333;font-weight: bold;}
.content-page-main{font-size: 16px;color: #333;}
.content-page-main>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.content-page-main>ul>li{padding:0 15px 0 0;margin:10px 0;width:50%;border-right: 2px #007d12 dotted;}
.content-page-main>ul>li:last-of-type{border-right: 0 #007d12 dotted;}
.content-page-main>ul>li:nth-child(2n){border-right: 0 #007d12 dotted;padding:0 15px;}
.content-page-title{font-size: 18px;color: #333; background: url(../images/icon10.gif)no-repeat left top 7px;padding: 0 0 0 22px;margin: 25px 0 5px 0;width: 100%;}
.content-page{font-size: 16px;color: #333;}
.content-page>ol{padding:0;margin: 0 0 0 45px;}
.content-page>ol>li{padding:4px 0;margin: 0;width: 100%;}

.content-page-infornation{display: flex;align-items: center;flex-wrap: wrap;}
.content-page-left{flex: 1;margin: 0 15px 0 0;font-size: 16px;color: #333;}
.content-page-left ul{padding: 0;margin: 0 0 0 40px;}
.content-page-left ul li{padding:5px;margin: 0;}
.content-page-left h3{color: #6c4c26;font-size: 18px; font-weight: bold;background: #feda96;margin: 25px 0 5px 0;padding:5px 15px;}
.content-page-right{width: 300px;padding: 0 50px 0 0;}
.content-page-right02{flex: 0.542; }
.content-page-right02 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.content-page-right02 ul li{padding: 0;margin:5px;width: calc(25% - 10px);text-align: center;}
.content-page-right02 ul li img{box-shadow: 0 0 0 1px #77a04e;border: 3px #f9f9f9 solid;margin:0;}
.content-page-right02 ul li h4{color: #666;font-size: 13px; text-align: center;padding:0;margin: 0;font-weight: normal;}

.content-page-right03{width: 330px; }
.content-page-right03 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.content-page-right03 ul li{padding: 0;margin: 5px;width: calc(50% - 10px);text-align: center;}
.content-page-right03 ul li img{box-shadow: 0 0 0 1px #77a04e;border: 3px #f9f9f9 solid;margin:0;}
.content-page-right03 ul li h4{color: #666;font-size: 13px; text-align: center;padding:0;margin: 0;font-weight: normal;}
.content-page-right04{flex:0.5;}
.content-page-right04 img{box-shadow: 0 0 0 1px #77a04e;border: 3px #f9f9f9 solid;margin:0;}
.content-page-right05{width: 165px; }
.content-page-right05 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.content-page-right05 ul li{padding: 0;margin: 5px;width: calc(100% - 10px);text-align: center;}
.content-page-right05 ul li img{box-shadow: 0 0 0 1px #77a04e;border: 3px #f9f9f9 solid;margin:0;}
.content-page-right05 ul li h4{color: #666;font-size: 13px; text-align: center;padding:0;margin: 0;font-weight: normal;}
.content-page-right06{}
.content-page-right06 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.content-page-right06 ul li{padding: 0;margin:5px;width: calc(33.3333% - 10px);text-align: center;}
.content-page-right06 ul li img{}
.content-page-right06 h4{color: #666;font-size: 13px; text-align: center;padding:0;margin: 0;font-weight: normal;}

@media screen and (max-width: 750px) {
.content-page-main>ul>li{padding:0;margin: 0;width:100%;border-right: 0px}
.content-page-main>ul>li:nth-child(2n){padding:0;}
.content-page-title{margin: 15px 0 5px 0;}
	.content-page-right{width: 220px;padding: 0;}
	.content-page-right02 ul li{width: calc(33.3333% - 10px);}
	.content-page-right06 ul li{width: calc(50% - 10px);}
}
@media screen and (max-width:640px) {
.content-page-infornation{display:block;}
.content-page-left{margin: 0 0 15px 0;}
.content-page-right{width: 260px; margin: 0 auto;}
.content-page-right03{width: auto;margin: 15px 0 0 0;}
	.content-page-right02 ul li{width: calc(50% - 10px);}
	.content-page-right04{flex:inherit;max-width: 300px;margin: 15px auto 0 auto;}
	.content-page-right05{width:100%;max-width:280px; margin: 0 auto;}
	.content-page-right05 ul li{margin: 5px 0;width: calc(100% - 0px);}
}
@media screen and (max-width:360px) {
.content-page-right03 ul li{margin: 5px 0;width: calc(100% - 0px);}
	.content-page-right02 ul li{margin: 5px 0;width: calc(100% - 0px);}
		.content-page-right06 ul li{margin: 5px 0;width: calc(100% - 0px);}
}


/***  版面欄位  ***/
.i-content_bg{background: url(../images/i-content_bg.jpg) no-repeat center bottom;background-size: cover;}
.main {}
.col-100 {float:left; width:100%;}
.col-010 { width:9%; margin-right:1%; float:left;}
.col-015 { width:14%; margin-right:1%; float:left;}
.col-020 { width:19%; margin-right:1%; float:left;}
.col-025 { width:24%; margin-right:1%; float:left;}
.col-030 { width:29%; margin-right:1%; float:left;}
.col-040 { width:39%; margin-right:1%; float:left;}
.col-045 { width:44%; margin-right:1%; float:left;}
.col-050 { width:49%; margin-right:1%; float:left;}
.col-055 { width:54%; margin-right:1%; float:left;}
.col-060 { width:59%; margin-right:1%; float:left;}
.col-065 { width:64%; margin-right:1%; float:left;}
.col-070 { width:69%; margin-right:1%; float:left;}
.col-075 { width:74%; margin-right:1%; float:left;}
.col-080 { width:79%; margin-right:1%; float:left;}
.col-085 { width:84%; margin-right:1%; float:left;}

.cor-010 { width:10%; float:left;}
.cor-015 { width:15%; float:left;}
.cor-020 { width:20%; float:left;}
.cor-025 { width:25%; float:left;}
.cor-030 { width:30%; float:left;}
.cor-035 { width:35%; float:left;}
.cor-040 { width:40%; float:left;}
.cor-045 { width:45%; float:left;}
.cor-050 { width:50%; float:left;}
.cor-055 { width:55%; float:left;}
.cor-060 { width:60%; float:left;}
.cor-065 { width:55%; float:left;}
.cor-070 { width:70%; float:left;}
.cor-075 { width:75%; float:left;}
@media screen and (max-width: 750px) {
.cor-p-015 { width:15%; float:left;}
.cor-p-020 { width:20%; float:left;}
.cor-p-025 { width:25%; float:left;}
.cor-p-030 { width:30%; float:left;}
.cor-p-035 { width:35%; float:left;}
.cor-p-040 { width:40%; float:left;}
.cor-p-045 { width:45%; float:left;}
.cor-p-050 { width:50%; float:left;}
.cor-p-055 { width:55%; float:left;}
.cor-p-060 { width:60%; float:left;}
.cor-p-065 { width:55%; float:left;}
.cor-p-070 { width:70%; float:left;}
.cor-p-075 { width:75%; float:left;}
}
@media screen and (max-width:640px) {
.col-m  { width:100%; margin-right:0%; float:none;}
.col-100 {}
.col-015, .col-020, .col-025, .col-030, .col-035, .col-040, .col-045, .col-050, .col-055, .col-060, .col-065, .col-070, .col-075, .col-080,.col-085 { width:100%; margin-right:0%;}
.cor-015, .cor-020, .cor-025, .cor-030, .cor-035, .cor-040, .cor-045, .cor-050, .cor-055, .cor-060, .cor-065, .cor-070, .cor-075, .cor-080,.cor-085 { width:100%;}
}


/***  選單與下拉  ***/
.company-name{position: absolute;top:calc(50% - 18px);left:20px;}
nav { position: relative;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#05552a+0,0c7a3f+50,045228+100 */
background: rgb(5,85,42); /* Old browsers */
background: -moz-linear-gradient(top, rgba(5,85,42,1) 0%, rgba(12,122,63,1) 50%, rgba(4,82,40,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(5,85,42,1) 0%,rgba(12,122,63,1) 50%,rgba(4,82,40,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(5,85,42,1) 0%,rgba(12,122,63,1) 50%,rgba(4,82,40,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05552a', endColorstr='#045228',GradientType=0 ); /* IE6-9 */}
 .menu { padding:10px 0; list-style:none; position:relative;margin: 0 0 0 330px; display: flex;justify-content: flex-end;}
 .menu>li { color:#00471e; font-size:18px; text-align:center; position:relative; border-left:1px rgba(255,255,255,.3) solid; cursor:pointer;box-shadow:-1px 0 0 0 #275a3e;font-weight: bold;}
 .menu>li>a { color:#00471e; display:block;padding:0px 20px;text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff;}  
 .menu>li>a:hover {color: #fffe01;text-shadow: 1px 1px 0px #002b12, -1px -1px 0px #002b12, -1px 1px 0px #002b12, 1px -1px 0px #002b12;}

 @keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:20px;opacity:1;}
}
@-moz-keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:20px;opacity:1;}
}
@-webkit-keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:20px;opacity:1;}
}
@-o-keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:20px;opacity:1;}
}
.company-name{animation:company-name 1.2s ease-out;-moz-animation:company-name 1.2s ease-out;-webkit-animation:company-name 1.2s ease-out;-o-animation:company-name 1.2s ease-out;}

@media screen and (max-width:1020px){
.company-name{left:5px;}
.menu {margin: 0 0 0 300px;}
.menu>li>a {padding:0px 9px;}
	
@keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:5px;opacity:1;}
}
@-moz-keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:5px;opacity:1;}
}
@-webkit-keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:5px;opacity:1;}
}
@-o-keyframes company-name{
0%{position: absolute;top:calc(50% - 18px);left:-40%;opacity:0;}
100%{position: absolute;top:calc(50% - 18px);left:5px;opacity:1;}
}
}
@media screen and (max-width:870px){
	.company-name{top: 2px;left: calc(50% - 145px);}
	.menu { padding:40px 0 10px 0;margin: 0 auto;justify-content: center;}
	.menu>li:first-of-type {border-left:0;box-shadow:0 0 0 0 #275a3e;}
	.menu>li>a {padding:0px 15px;}
@keyframes company-name{
0%{position: absolute;top:0;left:-40%;opacity:0;}
100%{position: absolute;top: 2px;left: calc(50% - 145px);opacity:1;}
}
@-moz-keyframes company-name{
0%{position: absolute;top: 0px;;left:-40%;opacity:0;}
100%{position: absolute;top: 2px;left: calc(50% - 145px);opacity:1;}
}
@-webkit-keyframes company-name{
0%{position: absolute;top: 0px;;left:-40%;opacity:0;}
100%{position: absolute;top: 2px;left: calc(50% - 145px);opacity:1;}
}
@-o-keyframes company-name{
0%{position: absolute;top: 0px;;left:-40%;opacity:0;}
100%{position: absolute;top: 2px;left: calc(50% - 145px);opacity:1;}
}
}
@media screen and (max-width: 640px) {
	.slicknav_menu { display:none;}
	.js #menu {	display:none;}
	.js .slicknav_menu {display:block;position: fixed;z-index: 1000;width: 100%;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#05552a+0,0c7a3f+50,045228+100 */
background: rgb(5,85,42); /* Old browsers */
background: -moz-linear-gradient(top, rgba(5,85,42,1) 0%, rgba(12,122,63,1) 50%, rgba(4,82,40,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(5,85,42,1) 0%,rgba(12,122,63,1) 50%,rgba(4,82,40,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(5,85,42,1) 0%,rgba(12,122,63,1) 50%,rgba(4,82,40,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05552a', endColorstr='#045228',GradientType=0 ); /* IE6-9 */}
	
.company-name{position:fixed;top:9px;left:48px;z-index: 1000;width: 140px;}
@keyframes company-name{
0%{position:fixed;top:9px;left:-40%;opacity:0;}
100%{position:fixed;top:9px;left:48px;;opacity:1;}
}
@-moz-keyframes company-name{
0%{position:fixed;top:9px;left:-40%;opacity:0;}
100%{position:fixed;top:9px;left:48px;;opacity:1;}
}
@-webkit-keyframes company-name{
0%{position:fixed;top:9px;left:-40%;opacity:0;}
100%{position:fixed;top:9px;left:48px;;opacity:1;}
}
@-o-keyframes company-name{
0%{position:fixed;top:9px;left:-40%;opacity:0;}
100%{position:fixed;top:9px;left:48px;;opacity:1;}
}
} 


/***  表單欄位  ***/
.form-box {}
.form-box input, .form-box img { vertical-align:middle;}
.form-style01 { font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; padding:5px 0 10px 0; line-height:20px; width:100%;}

.opinion {padding: 10px;border-bottom: 1px #ddd dashed;display: flex;flex-wrap: wrap;}
.opinion-left01 { background:none;width: 75px;min-width: 75px; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333;font-weight:bold;line-height:1.8;}
				  			  
.input-main-style01 {background:none; flex: 1;width:100%; border:none; margin:0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;}
.input-main-style02 { background:#fafafa; flex: 1;width:100%; border: 1px #333 solid; margin:0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;}
.input-main-style03 { background:#eeeeee;  flex: 1;width:100%;margin:5px 0 0 0; border: 0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8; }

.input-main-select { background:#eeeeee; float:left; width:70%; border: 0; margin:0; padding:0; font-size:14px; color:#4E4E4E; line-height:20px;}
.input-main-select select { background:#eeeeee; width: 49%; padding:5px 3%; line-height:20px; border: 0; font-family:"微軟正黑體";}

.select-style { background: #8a6e0c; font-size:15px; color:#ffffff; line-height:20px; padding:5px 10px; border: 0; }
.input-style01 { background:#fafafa; border: 1px #333 solid; padding:5px 10px; line-height:1.8; font-size:15px; font-family:"微軟正黑體"; color:#333; width:100%; flex: 1; }
img.code { width:100px; height:39px; margin:0; vertical-align:middle;}
.input-main-style02:focus, .input-style01:focus {outline: 0;}
@media screen and (max-width:750px){
.opinion {padding: 5px 0px;}
}

/******  底部資訊  ******/
footer {padding: 10px;border-top:1px #a0c2aa solid;box-shadow: 0 -2px 0 0 #fff;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ccfee3+0,ffffff+100 */
background: rgb(204,254,227); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,254,227,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(204,254,227,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(204,254,227,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccfee3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
footer .footer { color:#2f2f2f; font-size:12px;position: relative;text-align: center; }
footer .footer span {padding: 0 10px;}
.wd { color:#2f2f2f; font-size:12px;position: absolute;bottom: 0 ;right:0;} 
.wd a{ color:#2f2f2f; } 
.wd a:hover{ color:#096d37;} 
@media screen and (max-width:550px){
footer .footer span {display:block;padding: 0;}
footer .footer br {display:none;}
.wd { position:inherit;bottom:inherit;right:inherit;} 
}