@charset "utf-8";
/* CSS Document */
/*header*/
#header{background:#fff; border:1px solid #efefef;}
#header{/*padding:0.5em 0;*/}
.nav a{font-size:16px; color:#333333;}
.nav span.line{width:1px; height:15px; background:#a9a6a6; display:inline-block;}
.topblue a{color:#CCC; font-size:13px;}
.topblue i{font-size:16px; margin-right:0.3em; margin-left:1em;}
.topblue a:hover{color:#999;}
/*footer*/
#footer{color:#333; padding:1em 0; margin-top:3em; font-size:13px;}
#footer .right{padding-left:3em; margin-top:2em;}
#footer .right p{margin:2em 0;}
#footer input{height:30px; padding:3px;}
#footer a{background:#5aa572; color:#fff; text-align:center; height:30px;}
#footer h4{font-size:16px; margin-bottom:0.5em; margin-top:2em;}
/*default page*/
.d1 .flexfrm{justify-content:space-between; algin-items:stretch; flex-wrap:no-wrap; list-style:none; margin:3em 0; padding:0; width:100%;}
.d1 .flexfrm li{display:inline-block; font-size:18px; font-family:Arial, Helvetica, sans-serif,"微軟正黑體"; padding:0 1em; margin:0; cursor:pointer;}
.page.d1{padding:0;}
.d2{background:url(images/d2-1-bg.jpg) no-repeat bottom right; padding-top:4em; padding-bottom:3em;}
.d2 h4{font-size:24px; font-weight:normal; color:#1d1c1c; margin-bottom:0.3em; margin-top:1em; }
.d2 h4.tit{padding-left:1em;}
.d2 .col-12{margin:0.7em 0;}
.d2 section{width:calc(70% - 2em); float:right; font-size:13px; color:#666; line-height:170%;}
.d3 .flexfrm{justify-content:space-between; algin-items:stretch; flex-wrap:wrap;}
.d3 .flexfrm > div{width:20%; padding:20px 1em 0 1em; overflow:hidden; }
.d3 .frm{height:110%; background:#ededed; transition:.3s; color:#4a4949; text-align:center; padding:2.5em 1em 4em 1em; line-height:150%;}
.d3 .frm:hover{transform:skewY(-10deg); background:#79cd94;}
.d3 .frm div{transition:.3s;}
.d3 .frm:hover div{transform:skewY(10deg);}
.d3 .frm h4{color:#333; font-size:16px; margin-bottom:0.5em;}
.d3 img{max-width:100%; height:auto;}
.d3 section{ text-align:left;}
/*content*/
h1.tit{text-align:center; color:#5aa572; line-height:1.4em;}
/*gallery*/
.gallery .flexfrm{justify-content:space-between; algin-items:stretch; flex-wrap:wrap;}
.gallery .flexfrm > div{padding:1em;}
.gallery .flexfrm img{transition:.3s;}
.gallery .flexfrm > div:hover img{transform:scale(1.05,1.05);}
.gallery .flexfrm .frm{overflow:hidden; height:100%; background:#f5f5f5; cursor:pointer; transition:.3s;}
.gallery .frm h3.subject{position:absolute; bottom:0; left:0; padding:0; margin:0; background:linear-gradient(rgba(0,0,0,0) 10%,rgba(0,0,0,1)); width:100%; height:auto; color:#fff; line-height:1.4em;}
.gallery .frm h3.subject i{background:#5aa572; margin-right:0.5em; padding:0.5em 0.4em; font-size:24px; transition:.3s;}
.gallery .flexfrm > div:hover i{padding:0.5em 0.4em 0.5em 0.7em;}
.gallery .flexfrm .frm:hover{box-shadow:0 0 10px rgba(0,0,0,0.3); color:#fff; background:#5d6a70;}
/*product*/
.productintro, .productimg{padding:0.5em;}
.productimg img{padding:5px; border:1px solid #ccc; box-shadow:0 0 5px rgba(0,0,0,0.1);}
.productintro h1.tit{font-size:24px; text-align:left; margin-top:0;}
h3.subject{width:100%; display:block;}
h3.subject span{text-align:center; background:#5aa572; color:#FFF; border-radius:0.5em 0.5em 0 0; border-bottom:1px solid #5aa572; padding:0.2em 0.5em;}
/*news*/
.news.flexfrm{flex-wrap:wrap;}
.news > div{padding:1em;}
.news .frm{height:100%; background:#f5f5f5; color:#666; cursor:pointer; trnsition:.3s;}
.news .frm:hover{color:#000; box-shadow:0 10px 20px rgba(0,0,0,0.2);}
.news .frm:hover h3.subject{color:#5aa572;}
.news .frm section{padding:0.5em;}
.news .frm h3.subject{font-weight:normal; font-size:18px; color:#000; transition:.3s;}

/*footer*/
#footer .left a { border:1px solid #000; padding:0.5em 2em; margin:0 3px; background:#FFF; color:#000;}
#footer .left a:hover{background: #5aa572; color:#FFF; border:0;}
@media screen and (max-width:767px) {/*mobile*/
.logo{padding:0.5em;}
/*nav*/
#header{padding:0; box-shadow:0 3px 10px rgba(0,0,0,0.3);}
.nav a:hover{background:#333; color:#fff;}
/*footer*/
#footer .right{padding-left:0; text-align:center;}
/*default page*/
.d1 .flexfrm{flex-wrap:wrap; margin:1em 0;}
.d1 .flexfrm li{width:50%; padding:0 0.5em; border-bottom:1px solid #ccc;}
.d1 .flexfrm li h4{margin-top:0;}
/*default page*/
.d1 .flexfrm li{text-align:center;}
.d1 .flexfrm > li:first-child{width:100%;}
.d2 section{width:100%; text-align:center;}
.d2 .col-12{text-align:center; background:rgba(255,255,255,0.8);}
.d2 h4{text-align:center; padding:0; margin:0;}
.d3 .flexfrm > div{padding:30px 0.5em 0 0.5em; width:50%;}
.d3 .flexfem > div img{float:left;}
.d3 .flexfem section{width:50%; float:left;}
.d3 .flexfrm > div:last-child{width:100%;}
.d2{background:inherit;}
}
@media screen and (min-width:768px) and (max-width:1199px){/*pad*/
/*nav*/
.nav{padding-top:1.5em;}
.nav a{padding:1em 1em 0.6em 1em;}
.nav a:hover{color:#5aa572; border-bottom:5px solid #5aa572; border-radius:1em;}
.logo{padding:0.5em 0 1em 0;}
/*default page*/
.d1 .flexfrm li{text-align:center; width:20%;}
.d1 .flexfrm h4{font-size:16px;}
.d2 h4{text-align:left;}
.d2 img{float:left; margin-right:2em;}
.d2 .col-12{background:linear-gradient(90deg,rgba(255,255,255,0.4),rgba(255,255,255,0.8));}
.d3 .flexfrm > div{padding:20px 0.5em 0 0.5em; font-size:13px;}
.d3 .frm{padding:2.5em 0.5em 4em 0.5em;}
/*content*/
h1.tit{font-size:36px;}
}
@media screen and (min-width:900px) and (max-width:1199px){/*desktop*/
/*nav*/
.nav a{padding:1em 2em;}
/*default page*/
.d2 img{ margin-left:2em; margin-right:2em;}
}
@media screen and (min-width:1200px){/*desktop*/
/*header*/
/*nav*/
.nav{padding-top:2.5em;}
.nav a{padding:1em 2em;}
.nav a:hover{color:#5aa572; border-bottom:5px solid #5aa572; border-radius:1em;}
.logo{padding:1em 0;}
/*default page*/
.d1 .flexfrm{float:left;}
.d1 img, .d1 h4{float:left;}
.d2 img{float:left; margin-right:2em;}
/*content*/
h1.tit{font-size:36px;}
}