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

body { background:#feda96; width:100%; height:100%; margin:0; padding:0; font-family:"微軟正黑體"; font-size: 14px; line-height: 1.6;}
html { width:100%; height:100%;}

.warpper { background: #ffffff;  max-width:1140px; margin:0 auto;display: flex;overflow: hidden;box-shadow: 0 0 20px 0 rgba(0,0,0,.2);}
.warpper-l {width: 200px;box-shadow: 0 0 15px 0 rgba(0,0,0,.4);position: relative;z-index: 1;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa800+1,fe891b+100 */
background: rgb(255,168,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,168,0,1) 1%, rgba(254,137,27,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,168,0,1) 1%,rgba(254,137,27,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,168,0,1) 1%,rgba(254,137,27,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa800', endColorstr='#fe891b',GradientType=1 ); /* IE6-9 */}
.warpper-l_bg {padding: 20px 10px;background: url(../images/menu_bg.png) repeat-y center center;background-size: contain;height: 100%;}
.warpper-r {flex: 1;}
.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; }
@media screen and (max-width:780px){
	.warpper {display: block;}
	.warpper-l {width:0px;position: fixed;z-index: 1000;}
	.warpper-l_bg {background: none;}
	.warpper-r{width: 100%;}
}

/*** 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 {} /** 選單顏色 ***/
.slicknav_icon-bar { background-color: #654406;} /** 手機選單ICON按鈕色 ***/
.slicknav_btn { } /** 手機選單ICON按鈕底色 ***/

.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover { } /** 選單滑入顏色 ***/
.slicknav_nav>li { border-bottom:3px #d77106 solid;} 
.border-color { border-left:7px #A0A0A0 solid;} /** 標題顏色 ***/


header { background: #ffb11a url(../images/banner.png)no-repeat top center;background-size:cover;min-height: 230px;}
.head-main { max-width:1140px; margin:0 auto; height:230px;padding:0; position:relative; }
.head-tool { position: absolute; top:10px; right:10px;color:#633f0a;font-size: 12px;}
.head-tool a {color:#633f0a;padding: 3px 10px; }
.head-tool a:hover {color:#fff;background: #633f0a;border-radius: 5px; }
.people{position: absolute; bottom:0px;right:22px;}
.people img{width: 100%;}
.banner-font{position: absolute;top:30px;left:30px;}
.banner-font img{width: 100%;}
@keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:30px;left:30px;opacity:1;}
}
@-moz-keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:30px;left:30px;opacity:1;}
}
@-webkit-keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:30px;left:30px;opacity:1;}
}
@-o-keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:30px;left:30px;opacity:1;}
}
.banner-font{animation:banner-font 1.5s ease-out;-moz-animation:banner-font 1.5s ease-out;-webkit-animation:banner-font 1.5s ease-out;-o-animation:banner-font 1.5s ease-out;}

.logo { width:180px; height:auto;margin: 0 auto 50px auto;}
.logo a {display: block;}
.logo img { width:100%; height:auto;}
.beautify{margin: 0 auto; background: url(../images/left-light.png)no-repeat top center;padding: 40px 0 0 0;text-align: center;}
.beautify img{width: 100%;}
.banner { background: #ffffff;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;}
.home{display:none;}
@media screen and (max-width:780px){
header{padding:43.38px 0 0 0;}
.head-tool{display: none;}
.logo {width:44px;position:fixed;top:5px;left: 5px;z-index: 1000;}
.home{display:block;position:fixed;top:4px;right:80px;z-index: 1000;font-size: 22px;color: #654406;}
.home a{color: #654406;}
.home a:hover{color: #fb1f16;}
}

/** 首頁內容 **/
.i-content{background: url(../images/i-content_bg.png)no-repeat center center;background-size:contain;padding: 20px;}

/** 首頁跑馬燈 **/
.marquee{}
.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左浮动 */

/** 首頁關於我們 **/
.i-about{text-align: right;position: relative;margin: -20px 0 0 0;}
.i-about-font{position: absolute;bottom:20px;left:10px;color: #702000;font-size: 16px;font-weight: bold;text-shadow: 1px 1px 1px #fff,-1px -1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff,2px 2px 3px #000;text-align: left;}

@keyframes i-about-font{
0%{position: absolute;bottom:50px;left:-20px;opacity:0;}
100%{position: absolute;bottom:20px;left:10px;opacity:1;}
}
@-moz-keyframes i-about-font{
0%{position: absolute;bottom:50px;left:-20px;opacity:0;}
100%{position: absolute;bottom:20px;left:10px;opacity:1;}
}
@-webkit-keyframes i-about-font{
0%{position: absolute;bottom:50px;left:-20px;opacity:0;}
100%{position: absolute;bottom:20px;left:10px;opacity:1;}
}
@-o-keyframes i-about-font{
0%{position: absolute;bottom:50px;left:-20px;opacity:0;}
100%{position: absolute;bottom:20px;left:10px;opacity:1;}
}
.i-about-font{animation:i-about-font 2s ease-in-out;-moz-animation:i-about-font 2s ease-in-out;-webkit-animation:i-about-font 2s ease-in-out;-o-animation:i-about-font 2s ease-in-out;}

@media screen and (max-width:1030px){
.banner-font{position: absolute;top:10px;left:20px;margin: 0 10px 0 0;}
.banner-font img{width: 100%;}
@keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:10px;left:20px;opacity:1;}
}
@-moz-keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:10px;left:20px;opacity:1;}
}
@-webkit-keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:10px;left:20px;opacity:1;}
}
@-o-keyframes banner-font{
0%{position:absolute;top:-70%;left:-70%;opacity:0;}
100%{position:absolute;top:10px;left:20px;opacity:1;}
}
}
@media screen and (max-width:780px){
	.i-content{padding: 10px;}
}
@media screen and (max-width:640px){
.i-content{background: url(../images/i-content_bg.png)no-repeat center center;background-size:cover;}
.i-about-font{position:inherit;bottom:inherit;left:inherit;text-align: center;margin: 10px 0 0 0;}
	@keyframes i-about-font{
0%{position:inherit;bottom:inherit;left:inherit;}
100%{position:inherit;bottom:inherit;left:inherit;}
}
@-moz-keyframes i-about-font{
0%{position:inherit;bottom:inherit;left:inherit;}
100%{position:inherit;bottom:inherit;left:inherit;}
}
@-webkit-keyframes i-about-font{
0%{position:inherit;bottom:inherit;left:inherit;}
100%{position:inherit;bottom:inherit;left:inherit;}
}
@-o-keyframes i-about-font{
0%{position:inherit;bottom:inherit;left:inherit;}
100%{position:inherit;bottom:inherit;left:inherit;}
}
}
@media screen and (max-width:500px){
header { min-height: 150px;}
.head-main {height:150px;}
.people{width: 100px;}
.i-about{margin:0px 0 0 0;}
}

/*****  聯絡我們  *****/
.contact-content{}
.contact-body { }
.contact-note { padding:10px 0; font-size:13px; color:#F00;}
.contact-left { }
.contact-left img { width:100%; height:auto; margin-top:0px; }
.cart-btn {display: flex;justify-content: flex-end;margin: 10px 5px;}
.btn-send { font-size:13px;} 
a.btn-send { background: #729846; padding: 5px 20px; text-align:center; font-size:14px; color:#fff;margin:2px 0 2px 5px;}
a.btn-send:hover { background: #43671a;}
a.btn-reset { background:#666;  padding: 5px 20px; text-align:center; font-size:14px; color:#fff;margin:2px 0 2px 5px;}
a.btn-reset:hover { background:#444;}

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;}

.map {display: block;position: relative;height: 0;overflow: hidden;padding: 0; padding-bottom:60%;border: 10px #fff solid;box-shadow: 0 0 0 1px #bee3b3;border-radius: 5px;}
.map iframe {position: absolute;height: 100%;width: 100%;left: 0;top: 0;}
.company{border: 10px #fff solid;box-shadow: 0 0 0 1px #bee3b3;border-radius:5px;}
.contact-bg{background: url(../images/contact_bg.png)no-repeat bottom center; background-size:100%;width: 100%; height:115px;position: absolute;bottom: 0;left: 0; }
.contact-main{position: relative;padding:15px 34px 28px 34px;}
@media screen and (max-width:940px) {
.map {padding-bottom:130%;}
} 
@media screen and (max-width:640px) {
.map {padding-bottom:80%;}
.contact-bg{height:171px;}
} 
@media screen and (max-width:500px) {
.map {padding-bottom:100%;}
} 

/*****  內頁架構  *****/
.content-body { margin:0 auto;padding:10px 20px;}
.page-title { background:#fff url(../images/icon.gif) left 5px top 15px no-repeat; font-size:18px; color:#77a04e;padding:5px 15px 5px 25px; margin:10px 0 10px 0; display: table;position: relative;z-index: 1;font-weight: normal;}
.page-title-main{position: relative;z-index: 0; }
.page-title-main:after {content: "";display: block;width: 100%;height: 8px;background: url(../images/bar00.png)repeat-x left center;position: absolute;right: 0;top: calc(50% - 4px);}
.page-main { padding: 0 15px; font-size: 16px; color:#6c4c26;}
.page-main-title { background: url(../images/icon2.gif)no-repeat left 5px top 14px;font-size: 16px; color:#77a04e;padding: 5px 5px 5px 20px;margin: 20px 0 5px 0;}

.left-menu-title { background:#8c8c8c; text-align:center; font-size:18px; color: #fff; padding:5px 0 10px 0;  
                   -webkit-border-radius:0 0 5px 0px; -moz-border-radius:0 0 5px 0px; border-radius:0 0 5px 0px;}
.in-left-menu {  }
.in-left-menu>ul { margin:0; padding:0; list-style:none;display: flex;justify-content: flex-end;flex-wrap: wrap; }
.in-left-menu>ul>li  {font-size:15px; color:#fff; padding:0;margin: 5px; min-width: 130px;text-align: center;}
.in-left-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-left-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 */ }
.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;  }

.m_classLink{display:none;}
@media screen and (max-width:640px) {
.classBox{padding:0 0 10px 0;}
ul.classLink{display:none;}
.m_classLink{display:block; position:relative; background-color:#fff; border:1px solid #008800;}
.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:#008800; 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 #008800; 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 #008800; 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:#edf9ed;}
.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 #008800; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
}
.content-page{display: flex;align-items: center;}
.content-page-left{flex: 1;margin: 0 15px 0 0;}
.content-page-left ul{list-style: none;padding: 0;margin: 0;}
.content-page-left ul li{padding:15px 5px 15px 25px;margin: 0;background: url(../images/icon2.gif)no-repeat left 10px top 24px;border-bottom: 2px #feda96 dotted;}
.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: 185px;}
.content-page-right01{flex: 1;}
.content-page-right02{flex: 0.542; margin: 0 0px 0 30px;}
.content-page-right02 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.content-page-right02 ul li{padding: 0;margin:10px 5px 0px 5px;width: calc(100% - 10px);}
.content-page-right02 ul li img{box-shadow: 0 0 0 1px #ccc;border: 6px #f9f9f9 solid;border-radius: 10px;margin:0;}
.content-page-right03{width: 300px; margin: 0 0 0 0px;}
.content-page-right03 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.content-page-right03 ul li{padding: 0;margin: 5px;width: calc(50% - 10px);}
.content-page-right03 ul li img{box-shadow: 2px 2px 0 0 rgba(0,0,0,.4);border: 1px #999 solid;margin:5px 0;}
.content-page-right03 ul li h4{color: #77a04e;font-size: 13px; text-align: center;padding:0;margin: 0;font-weight: normal;}
.content-page-right04{width: 150px; margin: 0 0 0 0px;}
.content-page-right04 ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.content-page-right04 ul li{padding: 0;margin: 5px;width: calc(100% - 10px);}
.content-page-right04 ul li img{box-shadow: 2px 2px 0 0 rgba(0,0,0,.4);border: 1px #999 solid;margin:5px 0;}
.content-page-right04 ul li h4{color: #77a04e;font-size: 13px; text-align: center;padding:0;margin: 0;font-weight: normal;}
@media screen and (max-width: 1070px) {
.content-page-left ul li{padding:10px 5px 10px 25px;background: url(../images/icon2.gif)no-repeat left 10px top 19px;}
}
@media screen and (max-width: 850px) {
.content-page{display:block;}
.content-page-left{flex:inherit;margin: 0 0 15px 0;}
.content-page-right{margin: 0 auto;}
.content-page-right01{flex:inherit;max-width: 400px; margin: 0 auto 10px auto;}
.content-page-right02{flex:inherit;margin: 0 0px 0px 0px;}
.content-page-right02 ul li{width: calc(50% - 10px);}
.content-page-right03{width: 100%;}
.content-page-right04{width: 100%;}
.content-page-right04 ul{justify-content: center;}
.content-page-right04 ul li{width: calc(50% - 10px);}
}
@media screen and (max-width: 780px) {
.content-body {padding:10px ;}
.page-main { padding: 0 0px;}
}
@media screen and (max-width: 360px) {
.content-page-right02 ul li{width: calc(100% - 0px);margin: 10px 0 0 0;}
.content-page-right03 ul li{width: calc(100% - 0px);margin: 5px 0;}
.content-page-right04 ul li{width: calc(100% - 0px);margin: 5px 0;}
}
/** 營業項目 **/
.line{border-bottom: 2px #feda96 dotted;padding: 0 0 15px 0;}
.business{margin: 5px 0;}
.business ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.business ul li{padding: 0;margin: 5px;width: calc(33.3333% - 10px);text-align: center;}
.business ul li h4{color: #77a04e;font-size: 13px; text-align: center;padding:0;margin:5px 0;font-weight: normal;}
.business ul li img{box-shadow: 0 0 0 1px #ccc;border: 6px #f9f9f9 solid;border-radius: 10px;}
@media screen and (max-width: 850px) {
.business ul li{width: calc(50% - 10px);}
}
@media screen and (max-width: 360px) {
.business ul li{width: calc(100% - 0px);margin: 5px 0;}
}
/*****  內頁BANNER  *****/
.inside-banner { background: #ffb11a url(../images/banner.png)no-repeat top center;background-size:cover;min-height:180px;}
.inside-banner .banner-title { max-width:1140px; margin:0 auto; height:180px;padding:0; position:relative; }
.c-people{position: absolute; bottom:0px;right:22px;width: 140px;}
.c-people img{width: 100%;}
.content-title{display: table;padding:10px 20px 0 20px;}
.content-title img{width: 100%;}
@media screen and (max-width: 980px) {
.c-people{width: 100px;}
}
@media screen and (max-width: 780px) {
.content-title{padding:10px 10px 0 10px;}
.inside-banner {padding: 43.38px 0 0 0;}
}
@media screen and (max-width: 500px) {
.inside-banner {min-height:140px;}
.inside-banner .banner-title {height:140px;}
.c-people{width:80px;}
}

/***  版面欄位  ***/
.main {padding: 10px 0;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffe7b7+0,ffffff+20 */
background: rgb(255,231,183); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,231,183,1) 0%, rgba(255,255,255,1) 80px); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,231,183,1) 0%,rgba(255,255,255,1) 80px); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,231,183,1) 0%,rgba(255,255,255,1) 80px); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe7b7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }
.col-100 { 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;}

.col-p-100 {width:100%;}
.col-p-015 { width:13%; margin-right:2%; float:left;}
.col-p-020 { width:18%; margin-right:2%; float:left;}
.col-p-025 { width:23%; margin-right:2%; float:left;}
.col-p-030 { width:28%; margin-right:2%; float:left;}
.col-p-040 { width:38%; margin-right:2%; float:left;}
.col-p-045 { width:43%; margin-right:2%; float:left;}
.col-p-050 { width:48%; margin-right:2%; float:left;}
.col-p-055 { width:53%; margin-right:2%; float:left;}
.col-p-060 { width:58%; margin-right:2%; float:left;}
.col-p-065 { width:63%; margin-right:2%; float:left;}
.col-p-070 { width:68%; margin-right:2%; float:left;}
.col-p-075 { width:73%; margin-right:2%; float:left;}
.col-p-080 { width:78%; margin-right:2%; float:left;}
.col-p-085 { width:83%; margin-right:2%; float:left;}
@media screen and (max-width: 780px) {
.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%;}
}

/***  選單與下拉  ***/
nav {  }
 .menu { padding:0; list-style:none; position:relative;  margin: 0 auto;}
 .menu>li { color:#fff; font-size:20px; position:relative;cursor:pointer;text-align: left;border-bottom: 1px #fff dotted;font-weight: bold;}
 .menu>li .menu-en { color:#fff; font-size:12px;text-transform: uppercase; font-family: "arial"; text-align:right; text-shadow: 1px 1px 0 rgba(0,0,0,.0);line-height: 1;font-weight:normal;}
 .menu>li>a { color:#fff; display:block;text-shadow: 1px 1px 0 rgba(0,0,0,.32);padding:10px 5px 5px 5px;}  
 .menu>li>a:hover {position: relative;color: #663300;padding:10px 5px 5px 15px;}
 .menu>li>a:hover:before {content: "";display: block;position: absolute;left: 0;top:10px; width: 5px; height:28px;border-radius: 3px; border: 1px #534640 solid;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#807469+1,534640+100 */
background: rgb(128,116,105); /* Old browsers */
background: -moz-linear-gradient(top, rgba(128,116,105,1) 1%, rgba(83,70,64,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(128,116,105,1) 1%,rgba(83,70,64,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(128,116,105,1) 1%,rgba(83,70,64,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#807469', endColorstr='#534640',GradientType=0 ); /* IE6-9 */}
 .menu>li>a:hover .menu-en{text-shadow: 1px 1px 0 rgba(0,0,0,.32);color: #fff;}

@media screen and (max-width: 780px) {
	.slicknav_menu { display:none;}
	.js #menu {	display:none;}
	.js .slicknav_menu {display:block;position: fixed;width: 100%;z-index: 1000;background: #feda96;box-shadow: 0 1px 15px 0 rgba(0,0,0,.2);}
} 


/***  表單欄位  ***/
.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 {display: flex;padding:8px 5px;}
.opinion-left01 { background:none; width:75px;min-width:75px; padding:5px 10px; font-size:16px; font-family:"微軟正黑體"; color:#729846; line-height:1.8;font-weight: bold;}
				  			  
.input-main-style01 { background:#fff; flex: 1; border:none; margin:0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;width:100%;}
.input-main-style02 { background:#fff; flex: 1; border:1px solid #729846; margin:0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;width:100%;}
.input-main-style03 {  background:#fff; flex: 1; border:1px solid #729846; margin:0; padding:5px 10px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;width:100%;}

.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:#fff; flex: 1; border:1px solid #729846;padding:5px 10px; line-height:1.8; font-size:15px; font-family:"微軟正黑體"; color:#333; width:100%; }
img.code { width:100px; height:39px; margin:0; vertical-align:middle;}
.input-main-style01:focus, .input-main-style02:focus, .input-main-style03:focus, .input-style01:focus{outline: 0;}


/******  底部資訊  ******/
footer {padding: 10px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd585+0,ffffff+100 */
background: rgb(255,213,133); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,213,133,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,213,133,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,213,133,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd585', 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:#ffa343;} 
@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;} 
}