@charset "utf-8";

body , .wrapper{ color:#333;}


/*a 鏈結字*/
a { color:#333;}
a:hover, a:focus { color:#6D9631; text-decoration:none; }


/*====================================================================*/


/*輪播-左右按鈕*/
.owl-nav-style .owl-next , .owl-nav-style .owl-prev{
	position: absolute;
	top:50%;
	width: 35px;
	height: 35px;
	margin-top:-20px;
	opacity:0;
	transition: all 0.2s ease-in-out;
}
.owl-nav-style .owl-prev { left: 0px; }
.owl-nav-style .owl-next{ right: 0px; }
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before , .owl-nav-style .owl-next:after{
	position:absolute;
	z-index:5;
	left:50%;
	margin-top:-6px;
	width:3px;
	height:16px;
	content:"";
	background:#fff;
	
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-next:after{ bottom:50%; margin-bottom:-13px; }
.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before{ top:50%; margin-top:-13px; }
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-next:before{
	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:after{
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.owl-nav-style:hover .owl-prev , .owl-nav-style:hover .owl-next{ opacity:0.8; }
.owl-nav-style .owl-prev:hover , .owl-nav-style .owl-next:hover{ opacity:1; }


/*輪播-底下圓圈*/
.owl-dots-style .owl-dots{ position:absolute; bottom:0px; left:0.5%; width:99%; z-index:3; text-align:right; padding:0 10px;}
.owl-dots-style .owl-dots .owl-dot { display:inline-block; zoom:1 }
.owl-dots-style .owl-dots .owl-dot span {
	width:12px;
	height:12px;
	margin:0px 7px;
	background:#2A63AF;
	border:1px solid #fff;
	display:block;
	-webkit-backface-visibility:visible;
	transition:opacity .2s ease;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.owl-dots-style .owl-dots .owl-dot.active span, .owl-dots-style .owl-dots .owl-dot:hover span { background:#6D9530; border-color:#fff; }
@media (max-width:960px) { 
	.owl-nav-style .owl-prev { left: 0px; }
	.owl-nav-style .owl-next{ right: 0px; }
	
	.owl-dots-style .owl-dots{ }
	.owl-dots-style .owl-dots .owl-dot span { width:10px; height:10px; } 
}

/*================================================================================*/


/*page 分頁*/
.page{
	margin:40px 0 20px 0;
	font-size:0.95em;
	text-align:center;
}
.page a , .page span{
	display:inline-block;
	border-bottom: 2px solid #333;
	padding: 0px 4px;
	margin:0 2px;
	/*-ms-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-bborder-radius:4px;
	border-radius:4px;*/
	min-width:32px;
}
.page span{ 
	background:rgba(243,152,0, 1);
	/*color:#fff;*/
	color: #fff;
	border-bottom-color:rgba(243,152,0, 1);
	-ms-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-bborder-radius:4px;
	border-radius:4px;
}

.page a{ color:#333; }
.page a:hover{ /*background:rgba(243,152,0, 0.8);*/ color: rgba(243,152,0, 1); border-bottom-color:rgba(243,152,0, 1); }


/* 多少筆 */
.page_total {}

/* 分頁資訊 */
.page_info {}

/* 上頁 */
.page_prev {}

/* 分頁數字 */
.page_item {}

/* 目前選中的分頁 */
.page_current { background:#21B1D8; color: #fff; }
/* 下頁 */
.page_next {}

/* 下十頁 */
.page_next_group {}


/*====================================================================*/




.header-top-wrap{ padding:15px 0 15px 0; }

.logo{ max-width:400px; height:auto; }
.logo img{ display:block; max-width:100%; height:auto; }
/*@media only screen and (max-width: 768px) {
	.logo{ max-width:300px; }
}*/


/*社群icon*/
.social-list li{  
	display:inline-block;
	margin:0 5px 5px 5px;
	overflow:hidden;
	
	-ms-border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-o-bborder-radius:6px;
	border-radius:6px;
}
.social-list li img{ display:block; width:auto; max-height:40px; }
.social-list li:hover{ opacity:0.8;}

.header-social-list{ position:absolute; bottom:-4px; right:0; }

.footer-social-list{}
@media only screen and (max-width: 960px) {
	/*.social-list li{ margin-left:2px; margin-right:2px; }*/
	/*.social-list li img{ max-height:40px; }*/
}
@media only screen and (max-width: 768px) {
	.header-social-list{ display:none; }
}



.menu-toggle-wrap{ background:#2a63af; }
.menu-trigger{ display:none; }
.trigger-btn{
	position:relative;
	width:40px;
	height:40px;
	margin-left:auto;
	margin-right:auto;
}
.trigger-btn .icon{ 
	position:relative;
	display:block;
	width:76%; 
	height:100%;
	margin-left:12%;
}
.trigger-btn .icon:before{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	height:2px;
	margin-top:-1px;
	content:"";
	background:#fff; 
	
	transition: 0.4s;
}
.trigger-btn .icon:after{
	position:absolute;
	top:75%;
	left:0;
	width:100%;
	height:2px;
	margin-top:-1px;
	content:"";
	background:#fff; 
	
	transition: 0.4s;
}
.trigger-btn .txt{ 
	position:absolute;
	display:block;
	top:50%;
	left:12%;
	width:74%;
	height:2px;
	margin-top:-1px;
	content:"";
	background:#fff; 
	font-size:0;
}
.menu-trigger.opened .trigger-btn .icon:before{
	-webkit-transform: rotate(-45deg) translate(-7px, 7px) ;
    transform: rotate(-45deg) translate(-7px, 7px) ;
}
.menu-trigger.opened .trigger-btn .icon:after{
	-webkit-transform: rotate(45deg) translate(-7px, -6px) ;
    transform: rotate(45deg) translate(-7px, -6px) ;
}
.menu-trigger.opened .trigger-btn .txt{ opacity:0; }


.menu-list{ text-align:right; padding:5px 0; }
.menu-list li{ position:relative; }
.menu-list li a { position:relative; display:block; color:#333; padding:7px 10px; }
	
.menu-list > li{ display:inline-block; margin-left:15px; }
.menu-list > li > a{ color:#fff; }
.menu-list > li > a:before{
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:2px;
	content:"";
	background:#FFDD12;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.menu-list > li > a:hover{ color:#FFDD12; }
.menu-list > li > a:hover:before{ width:100%; }
.menu-list > li > ul , .menu-list > li > ul > li > ul{
	display:none;
	position:absolute;
	left:-9999px;
	top:0;
}


/*小螢幕時出現的次項目開啟鈕*/
.submenu-button{
	display:none;
	position:absolute;
	z-index:3;
	top:0px;
	right:10px;
	width:50px;
	height:44px;
	cursor:pointer;
}
.submenu-button:before{
	position:absolute;
	z-index:4;
	top:50%;
	left:50%;
	width:6px;
	height:6px;
	border-right:1px solid #999; 
	border-bottom:1px solid #999; 
	margin-top:-7px;
	margin-left:2px;
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.submenu-button:after{
	position:absolute;
	z-index:4;
	top:25%;
	left:0;
	width:1px;
	height:50%;
	content:"";
	background:#999;
}
	
@media only screen and (max-width: 960px) {
	.menu-list{ text-align:center; }
}
@media only screen and (max-width: 768px) {
	.logo{ margin-left:auto; margin-right:auto;}
	.menu-toggle-wrap{ position:relative; text-align:center; }
	.menu-toggle-wrap .container{ width:100%; }
	.menu-trigger{ display:block; padding:3px 0; }
	
	.menu-toggle-wrap .toggle-content{
		display:none;
		position:absolute; 
		z-index:99; 
		top:100%; 
		left:0; 
		width:100%;
		background:#fff;
		text-align:left;
		
		-webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,.25);
		-moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,.25);
		-o-box-shadow: 0 3px 5px 0 rgba(0,0,0,.25);
		box-shadow: 0 3px 5px 0 rgba(0,0,0,.25);
	}
	.menu-list{ text-align:left;}
	.menu-list > li { display:block; margin-left:0px; }
	.menu-list > li > a{ padding-left:10px; padding-right:10px; color:#333; }
	.menu-list > li > a:before{ display:none; }
	
	.menu-list li{ border-top:1px solid #ccc; }
	.menu-list li a{ padding-top:10px; padding-bottom:10px; }
	.menu-list > li > a:hover{ color:#6D9631; }
	
	.menu-list > li:first-child{ border-top-width:0px; }
	.menu-list > li:last-child{ border-bottom-width:0px; }
	
	.menu-list > li > ul , .menu-list > li > ul > li > ul{
		/*display:none;*/
		position:relative;
		top:0;
		left:0;
		width:100%;
		
		visibility: visible;
		opacity: 1;
		-webkit-transition: none;
		transition:none;
	}
	.menu-list li ul li a{ padding-left:26px; }
	.menu-list li ul li ul li a{ padding-left:40px; }
	
	/*小螢幕時出現的次項目開啟鈕*/
	.submenu-button{ display:block;}
}

.toggle-content.opened{
	display:block;
}



.footer-top-wrap{
	position:relative;
	background:rgba(42,99,175, 0.8);
	text-align:center;
	color:#231815;
	overflow:hidden;
	padding:60px 0;
}
.footer-top-wrap:before{
	position:absolute;
	z-index:0;
	top:0;
	right:0px;
	width:500px;
	height:100%;
	content:"";
	background:url(../images/footer-top-dec.png) no-repeat center right;
	background-size:100% 100%;
	opacity:0.8;
}
.footer-top-wrap , .footer-top-wrap a{ color:#231815; }
.footer-top-wrap a:hover{ color:#fff; }

.footer-menu-list{ position:relative; z-index:2; margin-bottom:30px; }
.footer-menu-list li{ display:inline-block; margin:0 20px; }
.footer-menu-list li a{ color:#fff; }
.footer-menu-list li a:hover{ opacity:0.8; }

.footer-info-list{ position:relative; z-index:2; font-size:0.85em; }
.footer-info-list li span{ display:inline-block; margin:0 6px; }
.footer-info-list li span , .footer-info-list li span a{ color:#fff; }
.footer-info-list li span a:hover{ opacity:0.8; }
.footer-info-list li span.mobile-hide{ margin:0 0; }

.footer-bottom-wrap{ text-align:center; padding:30px 0 20px 0; }
.web-designer{ font-size:0.8em; margin-top:15px; }
.web-designer , .web-designer a{ color:#666; }
.web-designer a:hover{ color:#000; }


@media only screen and (max-width: 960px) { 
	.footer-menu-list{ display:none; }
	.footer-info-list li:first-child{ margin-bottom:15px; }
}
@media only screen and (max-width: 640px) {
	.footer-top-wrap{ padding:30px 5px; }
	.footer-info-list li span{ display:block; margin:0; }
	.footer-top-wrap:before{ opacity:0.5; }
	.footer-info-list li span.mobile-hide{ display:none; }
}




.banner{
	padding:20px 0;
	margin-bottom:40px;
	background:linear-gradient(top,#6d9630 , #3c4b24 );
	background:-moz-linear-gradient(top,#6d9630 , #3c4b24 );
	background:-webkit-linear-gradient(top,#6d9630 , #3c4b24 );
	background:-o-linear-gradient(top,#6d9630 , #3c4b24 );
	background:-ms-linear-gradient(top,#6d9630 , #3c4b24 );
}
.banner img{ display:block; max-width:100%; height:auto; }
@media only screen and (max-width: 960px) {
	.banner{ margin-bottom:10px; }
}

/*================================================================================*/

.page-maincontent.pd{ max-width:1200px; margin-left:auto; margin-right:auto; }


.page-headline{ position:relative; padding:15px 0;}
.page-headline .title{ position:relative; z-index:3; display:block; }
.page-headline .title img{ display:block; width:100%; max-width:350px; }
@media only screen and (max-width: 1024px) {
	.page-headline .title{ padding-right:15%; }
}



.category-area{ position:relative; z-index:4; }
.category-wrap{ padding-right:300px;}
.category-list{ position:relative; display:inline-block; border:1px solid #898989; padding:5px 4%; margin-bottom:60px; }
.category-list:before{
	position:absolute;
	top:20px;
	left:-960px;
	width:960px;
	height:1px;
	content:"";
	background:#898989;
}
.category-list:after{
	position:absolute;
	top:20px;
	right:-1100px;
	width:1100px;
	height:1px;
	content:"";
	background:#898989;
}
.category-list li{ position:relative; }
.category-list > li{ display:inline-block; margin:0 10px 3px 10px; }
.category-list > li > a{ position:relative; display:block; padding:0 3px; }
.category-list > li > a:before{
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:2px;
	content:"";
	background:#6D9631;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
.category-list > li > a:hover:before , .category-list > li.active > a:before{ width:100%; }

.category-list li > ul{
	position:absolute;
	z-index:5;
	top:100%;
	left:0;
	width:200%;
	background:#fff;
	border:1px solid #9FD9F6;
	padding:10px 15px;
	font-size:0.95em;
	
	visibility: hidden;
	opacity: 0;	
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
.category-list > li > ul > li{ padding:7px 0; }
.category-list > li:hover > a{ color:#6D9631; }
.category-list > li:hover > a:before{ width:100%; }

.category-list > li:hover > ul{ visibility: visible; opacity: 1; }

/*導覽路徑*/
.breadcrumbs{
	position:absolute;
	top:22px;
	right:0;
	font-size:0.8em;
	line-height:1.5;
	width:280px;
	text-align:right;
}
.breadcrumbs , .breadcrumbs a{ color:#999; }
.breadcrumbs a:hover{ color:#6D9631; }
.breadcrumbs span{ display:inline-block; margin-right:0px; }
.breadcrumbs span:after{
	content:"/";
	margin-left:5px;
	font-size:10px;
}
.breadcrumbs span:last-child:after{display:none;}


@media only screen and (max-width: 960px) {
	.category-area{ margin-bottom:20px; border-bottom:1px solid #ccc; }
	.category-list{ display:none; }
	.category-wrap{ padding-right:0px;}
	.breadcrumbs{ position:relative; top:auto; left:auto; width:100%; text-align:center; padding-bottom:5px; }
}



/*方形圖設定*/
.item-thumb-frame { position: relative; display: block; width: 100%; overflow: hidden; }
.item-thumb { display: block; max-width: 100%; padding-bottom: 100%; }



/*影片*/
.video{ position:relative; text-align:center; margin:30px 0 60px 0 ; }
.video iframe{ max-width:100%;}



/*檔案下載*/
.btn-line{ text-align:center; }
.download-btn{ display:inline-block; margin:10px; }
.download-btn .icon{ display:block; max-width:150px; }
.download-btn .icon img{ display:block; max-width:100%; height:auto; }
.download-btn:hover{ opacity:0.8;}
/*@media (max-width:768px) { 
	.download-btn{ margin:0 10px; } 
}*/



.phone-showbox{ position:relative; margin:30px auto 10px auto; max-width:900px; }
.phone-showbox:before, .phone-showbox:after{ display:table; content:" " }
.phone-showbox:after{ clear:both }
.showbox{ float:left; position:relative; width:75%; height:500px; border:1px solid #ccc; }
.showbox img{
	display:block;
	width:auto;
	height:auto;
	max-width: 95%;
	max-height: 95%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.showbox-thumbnail-list{ float:right; width:22%; }
.showbox-thumbnail-list a{ display:inline-block; width:97%; /*border:1px solid #ccc;*/ margin-bottom:10px; }
.showbox-thumbnail-list a:hover{ opacity:0.8; }
.showbox-thumbnail-list a .item-thumb-frame .item-thumb { padding-bottom: 74%; }
@media (max-width:768px) { .showbox{ height:400px;} }
@media (max-width:640px) { .showbox{ height:320px;} }
@media (max-width:480px) { 
	.showbox{ width:100%; height:280px; margin-bottom:10px;} 
	.showbox-thumbnail-list{ width:100%; text-align:center; } 
	.showbox-thumbnail-list a{ width:32%; }
}





/*返回按鈕列*/
.pageback-line{margin:60px 0 30px 0; text-align:center; }
.pageback-btn span{ position:relative; display:inline-block; padding-left:12px; color:#231815; font-size:0.9em; }
.pageback-btn span:before{
	position:absolute;
	top:50%;
	left:0;
	width:0;
	height:0;
	content:"";
	margin-top:-4px;
	border-right:8px solid #231815;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
.pageback-btn:hover span{ color:#6D9631; }
.pageback-btn:hover span:before{ border-right-color:#6D9631; }


















/*================================================================================*/

/*首頁*/
.idx-pro-area{ text-align:center; margin:40px 0 10px 0;}
.idx-pro-headline{ display:inline-block; width:100%; max-width:900px; margin-bottom:10px; text-align:left;}
.idx-pro-headline img{ display:inline-block; width:100%; max-width:450px; height:auto; }

.idx-pro-list{ display:inline-block; width:100%; max-width:900px; text-align:left; }
.idx-pro-list:before, .idx-pro-list:after{ display:table; content:" " }
.idx-pro-list:after{ clear:both }
.idx-pro-list li{ float:left; width:47%; margin:0 1.5% 30px 1.5%; }

.idx-pro-box{ position:relative; overflow:hidden; }
.idx-pro-box a{ position:relative; z-index:1; display:block; }
.idx-pro-box img{ display:block; max-width:100%; height:auto; }
.idx-pro-photo{ position:relative; }
.idx-pro-photo:before{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:rgba(0,0,0,0.5);
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	
	-moz-transform:translateY(130%);
	-webkit-transform:translateY(130%);
	-o-transform:translateY(130%);
	-ms-transform:translateY(130%);
	transform:translateY(130%);
}
.idx-pro-name{ 
	position:absolute;
	top:0px;
	left:0;
	width:100%;
	padding:10px 3%;
	color:#fff;
	font-size:0.95em;
	overflow:hidden;
}

.idx-pro-name{
	transition:All 0.5s ease 0.1s;
	-webkit-transition:All 0.5s ease 0.1s;
	-moz-transition:All 0.5s ease 0.1s;
	-o-transition:All 0.5s ease 0.1s;
	
	-moz-transform:translateY(-130%);
	-webkit-transform:translateY(-130%);
	-o-transform:translateY(-130%);
	-ms-transform:translateY(-130%);
	transform:translateY(-130%);
}

.idx-pro-box:hover .idx-pro-photo:before , .idx-pro-box:hover .idx-pro-name{
	-moz-transform:translateY(0px);
	-webkit-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
}

.idx-pro-more{
	position:absolute;
	z-index:5;
	bottom:10px;
	right:3%;
	width:35px;
	height:35px;
	background:#6d9630;
	border:2px solid #fff;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	
	-moz-transform:translateX(140%);
	-webkit-transform:translateX(140%);
	-o-transform:translateX(140%);
	-ms-transform:translateX(140%);
	transform:translateX(140%);
}
.idx-pro-more a{ position:relative; display:block; width:100%; height:100%; }
.idx-pro-more a:before{
	position:absolute;
	z-index:4;
	top:50%;
	left:50%;
	width:16px;
	height:16px;
	border-top:2px solid #fff; 
	border-right:2px solid #fff;
	margin-top:-10px;
	margin-left:-14px;
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.idx-pro-box:hover .idx-pro-more{
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
}

.idx-pro-more:hover{
	animation:goto 2s linear infinite;
	-moz-animation:goto 2s linear infinite;
	-webkit-animation:goto 2s linear infinite;
	-o-animation:goto 2s linear infinite;
}
@media only screen and (max-width: 768px) {
	.idx-pro-photo:before{ display:none; }
	.idx-pro-name{
		font-size:1.02em;
		padding-top:5px;
		padding-bottom:5px;
		background:rgba(0,0,0,0.5);
		
		-moz-transform:translateY(0px);
		-webkit-transform:translateY(0px);
		-o-transform:translateY(0px);
		-ms-transform:translateY(0px);
		transform:translateY(0px);
	}
	.idx-pro-more{
		-moz-transform:translateX(0px);
		-webkit-transform:translateX(0px);
		-o-transform:translateX(0px);
		-ms-transform:translateX(0px);
		transform:translateX(0px);
	}
}
@media only screen and (max-width: 640px) {
	.idx-pro-list li{ width:100%; margin-left:0; margin-right:0;}
}



.idx-page-headline{ position:relative; padding-left:10%; padding-right:10px; background:rgba(42,99,175, 0.8); overflow:hidden; }
.idx-page-headline:before{
	position:absolute;
	z-index:0;
	top:0;
	left:0px;
	width:792px;
	height:140px;
	content:"";
	background:url(../images/headline-dec.png) no-repeat center top;
	background-size:100% auto;
	opacity:0.6;
}
.idx-about-wrap{ 
	position:relative; 
	background:#0f4082; 
	height:480px; 
	padding-left:10%; 
	padding-top:45px; 
	padding-right:600px;
}
.idx-about-wrap , .idx-about-wrap a{ color:#fff; }
.idx-about-wrap a:hover{ text-decoration:underline; }
 
.idx-about-txt{ max-height:378px; overflow:hidden; margin-bottom:5px; }
.idx-about-photo{ position:absolute; top:0; right:0; width:480px; height:480px;}
.idx-about-photo img{ display:block; max-width:100%; height:auto; }
@media only screen and (max-width: 1024px) {
	.idx-page-headline{ padding-left:5%; }
	.idx-about-wrap{ 
		padding-left:5%; 
		padding-top:30px; 
		padding-bottom:30px; 
		padding-right:550px;
	}
}
@media only screen and (max-width: 960px) {
	.idx-about-photo{ width:300px; height:300px;}
	.idx-about-wrap{
		height:300px; 
		padding-right:350px;
	}
	.idx-about-txt{ height:200px; }
}
@media only screen and (max-width: 768px) {
	.idx-about-wrap{ height:auto; padding-right:5%; }
	.idx-about-photo{ display:none; }
	.idx-about-txt{ height:auto; max-height:none; }
}




/*最新消息*/
.datapost-item{ position:relative; padding:15px 20px; margin-bottom:45px; border:1px solid #ccc;}
.datapost-heading{ font-size:1.1em; margin-bottom:10px; }
.datapost-date{ margin-right:10px; }
.datapost-title{ font-weight:600; }
.datapost-spec{ font-size:0.95em; color:#666; max-height:54px; overflow:hidden; margin-bottom:10px; }
.datapost-more{ text-align:right; }
.datapost-more a{ display:inline-block; border-bottom:2px solid #333; }
.datapost-more a:hover{ border-bottom-color:#6D9631; color:#6D9631; }
.datapost-item:hover{ background:rgba(109,150,49, 0.3); }
/*.datapost-item:hover .datapost-title{ color:#172A88; } */
.datapost-item:hover .datapost-spec{ color:#333; }
.datapost-item:hover .datapost-more a{ border-bottom-color:#6D9631; color:#6D9631; }

@media (max-width:640px) {
	.datapost-item{ padding:15px 0 0 0; border-width:0px; border-top-width:1px; margin-bottom:40px; /*text-align:center;*/ }
	.datapost-list li:last-child .datapost-item{ border-bottom-width:1px; padding-bottom:30px; }
	.datapost-item:hover{ background:rgba(243,152,0, 0); }
	.datapost-more{ /*text-align:center;*/ margin-top:20px; }
	.datapost-more a{ color:#21B1D8; border-bottom:2px solid #21B1D8; }
	.datapost-date{ display:block; font-size:0.7em; }
	.datapost-title{ color:rgba(243,152,0, 1); }
}



/*最新消息詳細*/
.news-view-heading{
	position:absolute;
	bottom:15px;
	left:400px;
	font-weight:600;
	color:#6D9631;
}
.news-view-date{ font-size:0.8em; }
.news-view-title{ font-size:1.4em; }
@media (max-width:960px) {
	.news-view-heading{ position:relative; bottom:auto; left:0; margin-top:20px; /*text-align:center*/; }
	/*.news-view-date{ display:block; }*/
}





/*商品介紹-表列*/
.product-list{ margin:10px 0 30px 0; }
.product-list:before, .product-list:after{ display:table; content:" " }
.product-list:after{ clear:both }
.product-list li{ float:left; width:30%; margin-right:5%; text-align:center; margin-bottom:45px; }
.product-list li:nth-child(3n){ margin-right:0;}
.product-list li:nth-child(3n+1){ clear:both; float:left; }
@media (max-width:640px) { 
	.product-list li{ width:48%; margin-right:4%; }
	.product-list li:nth-child(3n){ margin-right:4%; }
	.product-list li:nth-child(3n+1){ clear:none; float:left; }
	.product-list li:nth-child(2n){ margin-right:0;}
	.product-list li:nth-child(2n+1){ clear:both; float:left; }
}

.product-box a{ display:block; width:100%; height:100%; }
.product-box .item-thumb-frame{ margin-bottom:10px; border:1px solid #ccc; }
.product-title{ font-size:0.95em; color:#5b5a5a; }
.product-number{ font-size:0.8em; color:#5b5a5a; }

.product-box a:hover .product-title{ color:#6D9631; }

.product-box a .item-thumb-frame:before , .product-box a .item-thumb-frame:after{
	position:absolute;
	top:50%;
	left:50%;
	
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	
	transition:transform 0.7s ease;
	-webkit-transition:transform 0.7s ease;
	-moz-transition:transform 0.7s ease;
	-o-transition:transform 0.7s ease;
	opacity:0;
}

.product-box a .item-thumb-frame:before{
	z-index:1;
	margin-left:-210px;
	margin-top:-210px;
	width:420px;
	height:420px;
	content:"";
	background:rgba(0,0,0, 0.1);
}

.product-box a .item-thumb-frame:after{
	z-index:2;
	width:100px;
	height:30px;
	margin-top:-15px;
	margin-left:-50px;
	content:"more";
	line-height:28px;

	background:#6D9631;
	color:#fff;
	font-size:0.95em;
}

.product-box a:hover .item-thumb-frame:before , .product-box a:hover .item-thumb-frame:after{
	opacity:1;
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}




/*商品詳細*/
.product-view-heading{ 
	margin:15px 0 20px;
	padding-bottom:5px;
	border-bottom:1px solid #666; 
	font-size:1.2em; 
	font-weight:600;
}
.owl-pro-thumb.owl-nav-style .owl-next , .owl-pro-thumb.owl-nav-style .owl-prev{
	top:auto;
	bottom:-40px;
	opacity:1;
	background:#ccc;
}
.owl-pro-thumb.owl-nav-style .owl-prev { left: 0px; }
.owl-pro-thumb.owl-nav-style .owl-next{ left:50px; right:auto; }
.owl-nav-style .owl-prev:hover , .owl-nav-style .owl-next:hover{ background:#6D9631; }
@media (max-width:960px) { .product-view-heading{ text-align:center; } }
@media (max-width:480px) {
	.owl-pro-thumb.owl-nav-style .owl-next , .owl-pro-thumb.owl-nav-style .owl-prev{ 
		position:relative;
		display:inline-block;
		bottom:auto; 
		left:auto; 
		right:auto;
		margin:10px 10px 5px 10px;
	}
}




/*相關連結*/
.link-list{ max-width:900px; margin-left:auto; margin-right:auto; margin-top:10px; }
.link-item{ position:relative; min-height:200px; border-top:1px solid #666; padding:40px 100px 40px 280px; }
.link-item:last-child{ border-bottom:1px solid #666; }
.link-item .item-thumb-frame{ position:absolute; top:40px; left:0; width:200px; /*height:100px;*/ }
.link-item .item-thumb-frame .item-thumb { padding-bottom: 60%; }

.link-heading{ font-weight:600; font-size:1.1em; line-height:120px; }
.link-goto-btn{ 
	position:absolute;
	display:inline-block;
	top:50%;
	right:0;
	width:80px;
	height:30px;
	margin-top:-15px;
	/*background:#eee;*/
	color:#33;
	text-align:center;
	line-height:28px;
}
.link-item:hover .link-goto-btn{ background:#6D9631; color:#fff; }
.link-goto-btn:hover{
	animation:goto 2s linear infinite;
	-moz-animation:goto 2s linear infinite;
	-webkit-animation:goto 2s linear infinite;
	-o-animation:goto 2s linear infinite;
}
@media (max-width:768px) {
	.link-item{ padding-left:230px; padding-right:0; }
	.link-heading{ line-height:1.8; margin-bottom:20px; }
	.link-goto-btn{ position:relative; top:auto; right:auto; margin-top:0; background:#eee; }
}
@media (max-width:480px) {
	.link-item{ min-height:140px; padding-top:20px; padding-bottom:20px; padding-left:130px; }
	.link-item .item-thumb-frame{ top:20px; width:100px; }
	.link-item .item-thumb-frame .item-thumb { padding-bottom: 100%; }
}






/*聯絡我們*/
.contact-maincontent{ padding-top:15px; }
.contact-pd-area{ max-width:950px; margin-left:auto; margin-right:auto; }

.contact-gp{ position:relative; padding-right:450px; min-height:220px; margin-bottom:30px; margin-top:30px; }
.contact-gp .box{ position:absolute; top:0; right:110px; width:310px; }
.contact-gp .qrcode{ position:absolute; top:0; right:0; width:100px; }
.contact-gp .qrcode img{ display:block; max-width:100%; height:auto; }

.info-list{ margin-bottom:10px; }
.company-title { font-weight:600; font-size:1.3em; margin-bottom:5px; color:#231815; }
.contact-social-list{ margin-top:20px; margin-bottom:10px; }
.contact-social-list.social-list li img{ max-height:40px; }

@media (max-width:768px) {
	.contact-gp{ padding-right:0px; }
	.contact-gp .box{ position:relative; right:auto; width:100%; }
	.contact-gp .qrcode{ position:relative; top:0; right:auto; width:100px; }
}


.contact-form{ margin-bottom:30px; }

/* == 表單 套件組合 ======== */
.input-group { 
	display: table; 
	border-collapse: separate; /*表格屬性，合併框與格*/ 
	width:100%; 
	color:#555555; 
	margin-bottom:10px;
	background:#fff;
	padding:10px 0;
}
.require-mark{ color:red; font-size:0.85em; }
.input-title{
	display: table-cell;
	min-width: 90px; 
	font-size: 0.95em;
	text-align: left;
    white-space: nowrap;
	vertical-align:top;
	padding-top:6px;
}
.input-control {
    display: table-cell;
	width: 100%;
    min-height: 2em;
}
.input-group input[type=text] {
    width: 100%;
    display: block;
	font-size: 1em;
	border:1px solid #ccc;
}
.input-remind{ font-size:0.8em; color:#666; }

.input-group textarea{ width: 100%; }

.form-bt-line{ text-align:left; padding-left:80px; }
input.fbtn{ font-size:1em; padding: 6px 25px; border-radius:0; margin:0 10px; cursor:pointer; }
input.fbtn-confirm{ background:#666; color:#fff; border:1px solid #666; }
input..fbtn-cancel{ background:transparent; color:#333; border:1px solid #333; }
input.fbtn:hover{ background:#333; color:#fff; }

.sex-box{margin-right:10px;}
.sex-box .ra-sex{display:none;}
.sex-box .title{ 
	display:inline-block; 
	width:30px; 
	height:30px;
	line-height:28px;
	text-align:center; 
	border:1px solid #cccccc; 
	cursor:pointer;
	border-radius: 3px;
	color:#666;
}
.sex-box .ra-sex:checked + .title{ background:#666; color:#FFF; border-radius: 3px; }

@media (max-width:640px) {
	.contact-form{ border-top:1px solid #ccc; padding-top:30px; }
	.input-title{ margin-bottom:10px; font-size: 1em; }
	.input-title , .input-control{ display:block; }
	.input-group input[type=text] { font-size: 1em;}
	.form-bt-line{ text-align:center; padding-left:0px; }
}






















/* <<==========================================>> */

@keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Firefox */
@-moz-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}


/* Safari和Chrome */
@-webkit-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Opera */
@-o-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}