@charset "utf-8";
/* CSS Document */

body{margin:0;padding:0; font-family:  "Arial", \5FAE\8EDF\6B63\9ED1\9AD4 , Microsoft JhengHei , "sans-serif" ; font-size:16px}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1; /*For IE 6&7 only*/
}
:focus , a:focus{ outline: none}
img{max-width: 100%}
* { box-sizing: border-box}
a{color:#333; text-decoration: none}
.wrap{width:1200px;margin:0 auto}
#header.header .wrap{ position: relative}
.sb-toggle-right{ display: none}

.menu{ position: absolute; z-index: 10;margin-top:30px; background: rgba(255,255,255,0.77);width:100%;padding:15px 10px; box-shadow: 1px 1px 3px rgba(130, 130, 130, 0.58)}

#header .menu{-webkit-animation-name: fadeInDown; animation-name: fadeInDown}
.banner{-webkit-animation-name: fadeIn; animation-name: fadeIn}
.logo{width:25%; float:left; text-align: center}
.nav_zone{width:75%; float:right}
.nav_zone>ul>li{padding:22px; font-size:18px}
.nav_zone a{color:#3a560d; text-transform: uppercase}
.nav_zone a:hover , .nav_zone a.active{color:rgba(253,70,0,1.00)}
.nav_zone>ul>li:last-child{padding:18px 22px}
.nav_zone>ul>li:last-child a i{color:rgba(138,138,138,1.00); font-size:25px}

#header2{background:rgba(255,255,255,0.83); box-shadow: 1px 1px 3px rgba(130, 130, 130, 0.58)}

#header2 .menu{ position: static;margin-top:0; box-shadow: none; background: rgba(255,255,255,0.03)}
.header *{-webkit-transition: position 0.3s ease 0.3s;    
	-moz-transition: position 0.3s ease 0.3s;    
	-ms-transition: position 0.3s ease 0.3s;    
	-o-transition: position 0.3s ease 0.3s;    
	transition:position 0.3s ease 0.3s;}
.header--clone {  position: fixed; width:100%;  z-index: 130;  top: 0;  left: 0;
		-webkit-transform: translateY(-160px);   -ms-transform: translateY(-160px); transform: translateY(-160px);
		 -webkit-transition: all 300ms ease-in-out;  -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.header--stick { -webkit-transform: translateY(0%);   -ms-transform: translateY(0%); transform: translateY(0%);}
.sb-active .header--clone{-webkit-transform: translateY(-160px);      -ms-transform: translateY(-160px);transform: translateY(-160px);}

/*下拉選單*/
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown.nav2:hover .dropdown-content {
    display:none;
}


/*下拉選單_　end*/



/*footer*/
.footer{ background: url(../images/ft_bg.jpg) repeat-x #595656;color:#fff}
.footer .wrap{padding:50px 0}
.ft_left{width:70%; float:left;padding-right:30px; border-right:1px solid rgba(26,26,26,0.2) ; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft}
.ft_left h3{ text-align: center;margin-bottom:10px; font-weight: bold; font-size: 30px;color:#747372}
.ft_left ul li{margin-bottom: 5px}
.ft_left ul li li{ display: inline-block;margin-bottom: 0px}
.ft_left ul li li:after{ content: " / ";margin:0 5px}
.ft_left ul li li:last-child:after{content: "  ";}
.ft_left iframe{width:100%;height:230px;}
.ft_left .co_info a{color: #fff;}
.googlemap{ background: #fff;margin-bottom: 15px}
.ft_right{width:30%; float:right;padding-left:30px;-webkit-animation-name: fadeInRight; animation-name: fadeInRight}
.ft_right h4{ border:1px solid #fff;width:200px; text-align: center;padding:5px 0;margin-bottom:10px}
.ft_right a{ text-decoration: underline;color:#fff}
.ft_right ul li{padding:5px 2px}
.ft_right ul li a{ font-weight: bold; transition: all 0.3s ease-in-out}
.ft_right ul li:hover a{color:rgba(137,255,0,1.00);padding-left:5px}
.ft_right ul li:hover a:before{ content: ">";margin-right:3px}
.ft_right ul li.ft_pro_nav{padding-top:20px}
.ft_right ul li:hover li a{padding-left:0;color:#fff}
.ft_right ul li:hover li a:before{ content: ""}
.ft_right ul li li{ font-size:14px}
.ft_right ul li li a{color:rgba(255,255,255,0.88); font-weight: normal}
.ft_right ul li li:hover a{color:rgba(223,253,171,1.00)}
/*goto*/
#gotop {
position: fixed;
    right: 10px;
    bottom: 30px;    
    padding: 2px 12px;    
    font-size: 25px;
    background:rgba(177,177,177,0.73);
    color: white;
    cursor: pointer; z-index:1000; font-weight:100; transition:all 0.3s ease-in-out
}
#gotop:hover{background:rgba(104,104,104,1.00);}
.mob_lang{ display:none}


@media  (max-width : 1200px) {
.wrap{width:100%;padding:0 15px}
#header .wrap{padding:0}
.dropdown-content { right:0}
	.logo{width:20%}
	.nav_zone{width:80%}
	#header2>.wrap{padding:0}
	.ft_left , .ft_right{padding:0 20px}
}

@media  (max-width : 1100px) {
	.nav_zone>ul>li{padding:22px 18px}
}

@media  (max-width : 1000px) {
	.nav_zone>ul>li{ display: none}
	.sb-toggle-right{ display:block; position: absolute;right:15px; top:15px;padding:8px 10px 5px; font-size: 20px; background: rgba(119,164,16,1.00);color:#fff; border-radius: 3px; cursor: pointer}
	.menu{margin-top:15px}
	.banner_zone{padding-top:170px}
	.logo{width:80%; float:none; text-align: left}
	
	.sb-menu > li:last-child{ display: none}
	.sb-right .mob_lang{ display:block}
	.sb-right .mob_lang ul li a{padding:10px 15px; background: #fff; display: block; border-bottom: 1px solid rgba(187,187,187,0.5)}
	.sb-right .mob_lang ul li.active a{color:rgba(62,195,0,1.00)}
}

@media  (max-width : 789px) {
	.ft_left {border-right:0;border-bottom: 1px solid rgba(127,127,127,0.28);margin-bottom:30px;padding-bottom:20px}
	.ft_left , .ft_right{ float:none;width:100%}
	.ft_right h4{margin:0 auto 10px}
	.ft_right ul li{ text-align: center}
	
}

@media  (max-width : 480px) {
	.ft_left ul li{ display: block; text-align: center;padding-bottom: 5px}
	.ft_left ul li li:after{content: "  ";}
	
}

/*content_all*/

.insidebanner_pic{ background: url(../images/comm/inside_ban.jpg) center top no-repeat ; height:480px}
.content{ background: url(../images/comm/inside_bg.gif) ; position: relative}
.content .wrap{ background: rgba(255,255,255,1.00);margin-top:-143px}
.content_wrap{padding:15px}
.tree{ text-align: right}
.tree ul li{ display: inline-block; font-size:13px;color:rgba(42,144,0,1.00)}
.tree ul li a{color:#6E6E6E}
.tree ul li a:hover{ text-decoration:underline }
.tree ul li:after{ content: ">";margin:0 2px ; color:#6E6E6E}
.tree ul li:last-child:after{content: ""}
.left_menu{width:20%; float:left ; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft}
.left_menu .left_tit{ background: url(../images/tit_arrow.jpg) no-repeat #90c31f; height:51px; line-height: 50px;padding-left:40px; font-weight: bold;color:#fff; font-size: 20px;margin-bottom: 1px}
.left_menu ul li{margin-bottom: 1px}
.left_menu ul li a{padding:15px; background: #dbdada; display: block ; transition:all 0.3s ease-in-out}
.left_menu ul li a:hover , .left_menu ul li.active a{ background: rgb(152, 152, 152);color:#fff}
.right_content{width:80%; float:right;padding-left:30px ; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-direction: 1s; animation-direction: 1s ; -webkit-animation-delay: 0.3s ; animation-delay: 0.3s}
.right_content h1{ background: url(../images/arrow_tit.jpg) no-repeat; min-height:53px;  border-bottom:1px solid #ccc;padding-left:30px; font-size:22px; font-weight: bold; line-height: 50px;color:#06470f;margin-bottom: 20px}
.cate_tit_info{padding:20px; color:#57960b}
.cate_tit_info p{margin-bottom:15px; line-height: 140%}
.cate_tit_info ol { list-style: decimal; line-height: 1.6; margin-left: 3%; }

.cate_pro_list ul li {width:calc(33.3% - 30px);margin:0 15px 40px; float:left; position: relative;padding:30px 0 ; border-top: 1px solid rgba(30,30,30,1.00)}
.cate_pro_list ul li a{width:100%; height:100%; position: absolute; left:0; top:0; background:url(../images/comm/add_btn.png) right bottom no-repeat; border-bottom: 1px solid rgba(70,70,70,1.00); transition:all 0.3s ease-in-out}
.cate_pro_list ul li:hover a{ background: url(../images/comm/add_btna.png) right bottom no-repeat ;border-bottom: 1px solid rgba(85,142,33,1.00);  }
.cate_pro_list ul li:hover{border-top: 1px solid  rgba(85,142,33,1.00)}
.cate_pro_list ul li .pic{ overflow: hidden; max-width: 272px; height: 204px; position: relative}
.cate_pro_list ul li .pic img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);transition:all 0.3s ease-in-out}
.cate_pro_list ul li:hover .pic img{ max-width: 300px}

.cate_pro_list ul li:hover p{color:rgba(231,65,1,1.00)}
.pro_list p{height:30px}
.pro_list h4{margin-bottom:5px; font-weight: bold}
.pro_list ul li:hover h4 , .pro_list ul li:hover p{color:rgba(38,163,13,1.00)}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pro_left_pic{width:55%; float:left; text-align: center;}
.pro_left_pic p{color:#90c31f}
/*自訂*/
.pro_left_pic2{width: 100%; float: none;}
.pro-caption{color: #90c31f; text-align: left; margin-left: 10%; margin-right: 10%; clear: both; padding-top: 10%;}
.pro-caption li{ position: relative; padding-left: 10px; line-height: 1.6; margin-bottom: 10px;}
.pro-caption li::before{content:'*'; position: absolute; left: 0; top: 2px; color: rgb(59, 138, 2)}



.right_video{width:45%; float: right;padding:20px}
.model{margin:10px;padding:10px; background:rgba(207,239,160,0.5); color:rgb(59, 138, 2) ; font-weight: bold; font-size: 20px}
.pro_detail{margin-bottom: 20px}
.ui-tabs-nav{ border-bottom: 1px solid rgba(102,102,102,0.5);margin-bottom:15px}
.ui-tabs-nav li{ float:left;margin-right:2px}
.ui-tabs-nav li a{padding:15px 50px; display: block; background:#d7f6b2;color:#3e7804; font-weight: bold ; transition:all 0.3s ease-in-out} 
.ui-tabs-nav li:hover a{background:#90c31f;color:#fff}
.ui-tabs-nav li.ui-state-active a{ background: url(../images/tit_arrow.jpg) no-repeat #90c31f;color:#fff}
.tabs_zone{padding:20px}
.tabs_zone ul{margin:0 0 0 20px}
.tabs_zone ul li{ list-style: decimal;margin-bottom:10px; line-height: 150%;color:rgba(36,92,6,1.00)}
.tabs_zone2 h3{ color:#333;margin-bottom:10px}
.tabs_zone2 table{width:100%}
.tabs_zone2 table th{ background: #d7f6b2;color:#3e7804;padding:10px 15px;border:1px solid #fff; font-weight: bold}
.tabs_zone2 table td{ border:1px solid #fff;padding:10px 15px; background: rgba(236,236,236,1.00); text-align:center}

/*自訂*/
.tabs_zone .tab_notes{ font-size: 14px;}
.tabs_zone .tab_notes li{ position: relative; list-style: none; padding-left: 10px;color: #000000; margin: 0;}
.tabs_zone .tab_notes li::before{content:'*'; position: absolute; left: 0; top: 2px; color: rgb(59, 138, 2)}

.scrollbar
{
	width: 100%;
	overflow-x: auto;
	overflow-y:hidden;
	margin-bottom: 20px
}


.style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.style-1::-webkit-scrollbar
{
	width: 10px;
	background-color:rgba(99,142,14,1.00);
}

.style-1::-webkit-scrollbar-thumb
{
	background-color:rgba(99,142,14,1.00);	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


@media  (max-width : 1200px) {
	.left_menu .left_tit{ font-size: 18px;padding-left:35px}
	.insidebanner_pic{ background: url(../images/comm/inside_ban.jpg) -350px 0 no-repeat ; height:480px}
}

@media  (max-width : 1000px) {
	.left_menu{ display: none}
	.right_content{width:100%; float:none;padding:0}
	.right_video{padding:30px 0}
	.tree{margin-bottom: 15px}
}

@media  (max-width : 800px) {
.cate_pro_list ul li {width:calc(50% - 40px);margin:0 20px 40px; }	
	.insidebanner_pic{height:400px;background: url(../images/comm/inside_ban.jpg) -400px 0 no-repeat ;}
	.content .wrap{margin-top:-60px}
	.pro_left_pic , .right_video{width:100%; float:none}
	.right_video{padding:15px 0 0 0}
	
}

@media  (max-width : 560px) {

	.insidebanner_pic{height:300px;background: url(../images/comm/inside_ban.jpg) 28%  0  no-repeat ; background-size: cover }
	.content .wrap{margin-top:-90px}
	.cate_tit_info{padding:10px }
	.cate_pro_list ul li {width:calc(50% - 30px);margin:0 15px 40px; }	
	.tabs_zone{padding:20px 10px}
	.ui-tabs-nav{margin-bottom: 0}
	.ui-tabs-nav li{width:100%; float:none}
	.tabs_zone{ border:1px solid rgba(215,215,215,1.00)}
	.right_content h1{ font-size:18px; line-height: 130%; min-height: inherit;padding-top:5px ;padding-bottom:5px}
}

@media  (max-width : 480px) {
	.cate_pro_list ul li {width:80%; float:none;margin:0 auto 30px; border-top:0 }	
	.model{margin:0 10px; font-size: 16px}
	}

@media  (max-width : 360px) {
	.insidebanner_pic{height:280px;background: url(../images/comm/inside_ban.jpg) 28%  0  no-repeat ; background-size: 350% }
	.cate_pro_list ul li {width:100%;  }
	.content .wrap{margin-top:-70px}
	}






/*=======lightbox=============*/
.trans
{
	transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	-webkit-transition: all 0.1s ease;
}


.bigimg ul
{
	list-style: none;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-sizing: border-box;
}
.bigimg ul li
{
	position: relative;
	float: none;    
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	
}

.bigimg ul li::before
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	content: '';
	color: white;
	
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.bigimg ul li:hover::before
{
	
	
}
.bigimg ul li img
{
	width: 100%;
	height: auto;
	overflow: hidden;
	transition: 0.2s all ease-in-out
}
.bigimg ul li:hover img{
	transform: scale(1.1)
}

/**/
.bigimg2{ max-width: 400px; margin-left: auto; margin-right: auto}
.bigimg2 ul li{ padding: 5px;}


.lightbox
{
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.75);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}
.lightbox img
{
	max-width: 90%;
	max-height: 80%;
	position: relative;
	top: -100%;
	/* Transition */
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.lightbox:target
{
	outline: none;
	top: 0;
	opacity: 1;
	pointer-events: auto;
	transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
}
.lightbox:target img
{
	top: 0;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

/*===公司簡介===*/
.about_us p{ color: #000000;font-size: 15px; font-weight: normal; line-height: 1.8}
.info-md2{ width: 50%; padding-left: 15px; padding-right: 15px; float: left;}
.info-md2 ul{ margin-bottom: 10px;}
.info-md2 li { margin-top: 5px;line-height: 1.5;border-bottom:1px solid #ccc;}
.info-md2 li span{ color: #57960b; font-weight: bold; font-size: 16px;border-left: 2px solid #57960b;padding-left: 5px;}
.info-md3{ width: 100%; padding-left: 15px; padding-right: 15px; float: left;}
.about_us h6{font-size:18px; font-weight: bold;margin-bottom: 10px;}
.about_us .img-no{display: none;}
.text-center{ text-align: center}
.about_us ul li{ color: #000000;font-size: 15px; font-weight: normal; padding-bottom: 10px;}

@media(max-width:768px){
	.about_us .img-ha{display: none}
	.about_us .img-no{display: block;}
	.text-center{text-align: center}
	.info-md2{ width: 100%; float: none;}
	.info-md2 img{margin-left: auto; margin-right: auto;}
}


/*====影音專區===========*/
.video-con iframe{ width: 100%; height: 250px;}
.video-con .info-md2{margin-bottom: 20px;}








/*====聯絡我們===========*/
.table-form{ width: 100%}
.table-form span{ color: #CC0003}
.table-form tr td{padding-bottom: 5px; padding-top: 5px; line-height: 1.8}
.table-form tr td:first-of-type{ width: 20%;}
.table-form tr td:last-of-type{width: 79%;}
.table-form input{ width: 100%; padding: 5px; border: 1px solid #D4D4D4}
.table-form select, .contact2 textarea{padding: 5px; border: 1px solid #D4D4D4}
.table-form input#cu_name{ width: auto}
.contact2 textarea{ width: 100%; padding: 5px;}
.ctbtn{text-align: center}
.ctbtn input{ margin-left: 2px; margin-right: 2px;color: #FFFFFF; padding: 8px 15px;border-radius: 2px;cursor: pointer}
.ctbtn input[type="reset"]{ background: #90c31f;  border: 1px solid #7AA717; }
.ctbtn input[type="reset"]:hover{background: #7AA717}
.ctbtn input[type="submit"]{ background: rgba(253,70,0,1.00);  border: 1px solid rgba(205,56,0,1.00); }
.ctbtn input[type="submit"]:hover{background: rgba(205,56,0,1.00);}


/*====網站地圖=====================*/
.sitemap-con ul{ list-style: disc; margin-left: 30px; line-height: 1.8; overflow: hidden}
.sitemap-con ul li{ width: 44%; float: left; text-transform: uppercase; font-weight: bold; margin-left: 3%; margin-right: 3%; margin-bottom: 20px}
.sitemap-con ul li ul{ margin-top: 10px; margin-bottom: 20px; list-style-type: square; overflow: visible; margin-left: 0}
.sitemap-con ul li ul li{width: 100%; text-transform: none; font-weight: normal; margin-bottom: 0; margin-left: 30px;}
.sitemap-con ul li:nth-child(2n+1){ clear: left}
.sitemap-con ul li:nth-last-child(-n+3){width:100%; float: none; clear:both}
@media(max-width:600px){
	.sitemap-con ul li{ clear: none; width: 100%; float: none;}
}


/* 電子型錄 */
.catalog {
	float: left;
	width: 33.3%;
	padding: 10px;
	text-align: center;
	margin-bottom: 20px;
}

.catalog:nth-child(3n+1) {
	clear: both;
}

.catalog-item {
	background-color: #fff;
	display: inline-block;
	position: relative;
	border: solid 1px #e3e2e2;
	overflow: hidden;
}

.catalog-item a {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

.catalog-item img {
	transition: all 0.5s ease-in-out;
	opacity: 1;
}

.catalog-item:hover img {
	transform: scale(1.1);
	opacity: 0.7;
}

.catalog h3 a:hover {
	color: #006543;
}

@media (max-width : 991px) {
.catalog {
	float: left;
	width: 50%;
	padding: 10px;
	text-align: center;
	margin-bottom: 20px;
}

.catalog:nth-child(2n+1) {
	clear: both;
}
}

@media (max-width : 480px) {
	.catalog {
		width: 100%;
		text-align: center;
	}
}
/* end of 電子型錄 */