@charset "utf-8";

/*
base-color:#333333
seconde-color:#99CC66 綠色
hover-color:
*/

body , .wrapper{color:#333333; background:#333333;}

/*a 鏈結字*/
a { color:#333333;}
a:hover, a:focus { color:#99CC66;}


.mt{ margin-top:30px;}
.mb{ margin-bottom:30px;}
.mt-h{ margin-top:15px;}
.mb-h{ margin-bottom:15px;}
.mt-d{ margin-top:60px;}
.mb-d{ margin-bottom:60px;}

.pic img{ width:100%; height:auto;}
.maxpic img{ max-width:100%; height:auto;}

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

.col-gp{}
.col-gp:before, .col-gp:after{ display:table; content:" " }
.col-gp:after{ clear:both }

.col{ float:left; margin:0 2% 0px 0;}


.cols02 > .col{width:49%;}
.cols03 > .col{width:32%;}
.cols04 > .col{width:23.5%;}

.cols02 > .col:nth-child(2n) , .cols03 > .col:nth-child(3n) ,
.cols04 > .col:nth-child(4n){ margin-right:0%;}

.cols02 > .col:nth-child(2n+1) , .cols03 > .col:nth-child(3n+1) , 
.cols04 > .col:nth-child(4n+1){ clear:both; float:left;}

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

/*叉叉圖示*/
.btn-close{ position:relative;}
.btn-close:before, .btn-close:after{
	position: absolute; top: 50%; left: 50%;
	background: rgba(128,128,128,0.8);
	content: '';
	display: inline-block;
	height: 3px;
	width: 26px;
	margin-top: -2px;
	margin-left: -13px;
	
	transition:All 0.5s ease;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.btn-close:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.btn-close:hover:before, .btn-close:hover:after{background:#e6d9b4;}
.btn-close .icon-txt{ display:none;}

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

/*分頁*/
.page{
	margin:30px 0 60px 0;
    text-align:center;
	font-size:0.9em;
}
.page , .page a{ color: #666; }
.page a:hover{ background-color: #B3B3B3; color: #ffffff; }

.page a , .page span{
	isplay:inline-block;
	border: 1px solid #ccc;
    padding: 1px 8px 1px 8px;
	margin: 2px;
	border-radius: 3px;
}
.page span{ background-color: #666; color: #fff; }

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

.header{ position:relative; z-index:1; overflow:hidden; min-height:180px; background:#FFF; padding-top:1px;}
.header:before{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-960px;
	width:1920px;
	height:180px;
	content:"";
	background:#FFF url(../images/header-top-bg.png) no-repeat center;
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1);
}

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

.logo{ position:absolute; top:10px; right:0px; max-width:70px;}

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

.page-header-area , .idx-header-area{ position:relative; margin-top:140px; min-height:150px;}

.idx-header-area{ min-height:700px; padding-left:300px;}

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

/* 最上方登入、註冊...等 列 */
.quicklink-list{ position:absolute; top:-40px; left:75px;}
.quicklink-list li{ position:relative; display:inline-block; margin-right:0.5em;}
.quicklink-list li a{ 
	display:block; 
	font-size:0.95em; 
	line-height:1.5; 
	padding:0 0.3em;
	color:#999; 
}
.quicklink-list li a:hover{ 
	color:#333; 
}

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

.quicklink-cart{
	position:absolute; 
	top:-41px; 
	left:10px;
	
	display:inline-block;
	background:url(../images/icon-cart4.png) no-repeat center;
	background-size:cover;
	width:25px;
	height:25px;
}

.quicklink-cart a{ display:block; width:100%; height:100%;}
.quicklink-cart .title{ display:none;}

.quicklink-cart .badge{
	position:absolute;
	top:3px;
	left:110%;
	border:1px solid #5b7a3d;
	background:transparent;
	color:#5b7a3d;
	display:inline-block;
	font-size:0.75em;
	min-width:22px;
	line-height:1.7;
	text-align:center;
	border-radius:3px;
}

.quicklink-cart .badge:before{
	position:absolute;
	top:50%;
	left:-4px;
	width:6px;
	height:6px;
	margin-top:-3px;
	content:"";
	border-top:1px solid #5b7a3d;
	border-left:1px solid #5b7a3d;
	background:#FFF;
	
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.quicklink-cart:hover .badge{ background:#5b7a3d; color:#fff; }
.quicklink-cart:hover .badge:before{ background:#5b7a3d;}

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

.site-language.pageset , .site-language.idxset{ position:absolute; top:10px; left:20px; }

.site-language a {
	position:relative;
	z-index:2;
	display:inline-block;
	margin-right:20px;
	width:35px;
	height:35px;
	line-height:30px;
	text-align:center;
	color:#B3B3B3;
	border:1px solid #B3B3B3;
	font-size:0.85em;
	vertical-align:middle;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	
}
.site-language a:before {
	position:absolute;
	z-index:1;
	top:-4px;
	left:-4px;
	width:39px;
	height:39px;
	content:"";
	background:transparent;
	border:1px solid #B3B3B3;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	opacity:0;
}
.site-language a:hover{border-color:transparent;}
.site-language a.active{ background:#B3B3B3; color:#ffffff; }
.site-language a.active:before{opacity:1; }

.site-language a:hover:before{ 
	opacity:1; 
	animation:ringing 1.5s linear infinite;
	-moz-animation:ringing 1.5s linear infinite;
	-webkit-animation:ringing 1.5s linear infinite;
	-o-animation:ringing 1.5s linear infinite;
}

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

/*整個搜尋區塊*/

.search-bar.pageset , .search-bar.idxset{ position:absolute; z-index:10; top:60px; left:5px; }

.search-fm{
	position:relative;
	display:inline-block; 
	-ms-border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-o-bborder-radius:20px;
	border-radius:20px;
	-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);

	padding:2px;
}
.search-input , .search-btn{
	background:#ffffff;
	font-size:0.85em;
	line-height:1; 
	height:25px;
	outline:none;	
}
.search-input{ 
	padding:0px 15px 0px 35px;  
	width:110px;
	border:1px solid transparent;
	-ms-border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-o-bborder-radius:20px;
	border-radius:20px;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.search-btn{ 
	position:absolute;
	top:4px;
	left:4px;
	cursor:pointer; 
	text-align:center; 
	width:25px;
	border:1px solid #B3B3B3;
	background:#999;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.search-btn i{ color:#fff; font-size:1em; margin-bottom:3px;}

.search-btn:hover{ background:#B3B3B3;}
.search-btn:hover i{ color:#ffffff; }

.search-input:focus {width:160px;}


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

.nav li{ text-align:center;}
.nav span{ display:block; font-weight:600; line-height:1.5;}
.nav li a{ 
	display:inline-block;
	width:120px;
	height:65px;
	padding-top:15px;
	color:#4D4D4D;
	text-align:center;
}
.nav li a:hover{
	background:url(../images/menu-bg.png) no-repeat center;
	background-size:cover;
	color:#333;
}

/*------------------------------------*/

.nav.idxset{
	position:absolute; 
	top:90px; 
	left:0;
	width:225px;
	height:600px;
	padding-top:50px;
	background: url(../images/idx-menu-bg.png) no-repeat right top;
	background-size:150px 600px;
}

.nav.idxset{ text-align:left;}
.nav.idxset li { text-align:left; margin-bottom:0px;}
.nav.idxset li:nth-child(2n) { padding-left:30px;}
.nav.idxset li a .title{ font-size:1.1em;}

/*------------------------------------*/

.nav.pageset{
	position:absolute; 
	top:40px; 
	left:0px;
	padding-left:150px;
	padding-bottom:10px;
	width:100%;
	border-bottom:1px solid #E6E6E6;
}
.nav.pageset li { display:inline-block; width:13%; text-align:right;}

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

.social-list.idxset{ position:absolute;  top:600px;  left:5px; }
.social-list.footerset{ position:absolute; bottom:-10px; right:0px; }
.social-list.loacationset{ position:absolute; top:0px; right:0px; }


.social-list{ display:inline-block; }

.social-list li{ 
	display:inline-block; 
	margin:5px; 
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	opacity:1;
}
.social-list li img{
	display:block; 
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.social-list li:hover{opacity:0.8;}

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

.main{ padding:30px 0 0px 0; background:#FFF;}

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

.page-left , .page-right{float:left; position:relative; }
.page-left{width:16%; margin-right:4%; z-index:6;}
.page-right{width:80%; z-index:5;}

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

.footer{ position:relative; background:#333333; overflow:hidden; padding-bottom:10px; padding-top:170px; color:#ffffff;}
.footer:before{
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-960px;
	width:1920px;
	height:180px;
	content:"";
	background:url(../images/header-top-bg2.png) no-repeat center;
	
	-moz-transform: scale(-1);
	-webkit-transform: scale(-1);
	-ms-transform: scale(-1);
	transform: scale(-1);
}

.footer a{color:#ffffff;}
.footer a:hover{ text-decoration:underline;}

/*---------------------*/

.footer-menu{ margin-bottom:90px;}
.footer-menu li{ position:relative; display:inline-block; margin-right:90px;}
.footer-menu li.active a{color:#0065B3;}

/*---------------------*/

.footer-info{ 
	position:relative;
	display:inline-block;
	font-size:0.8em; 
	text-align:left; 
	padding-left:100px; 
	padding-top:5px; 
	padding-right:130px;
	margin-bottom:15px;
}
.footer-info span{ display:inline-block; margin-right:15px;}
.footer-logo{ position:absolute; top:0; left:0; width:80px;}

/*---------------------*/

.footer-designer{
	text-align:right;
	font-size:0.75em;
}

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

.headline{
	position:relative;
	text-align:center; 
	color:#999999; 
	background:url(../images/headline-bg.png) no-repeat bottom center;
	background-size:contain;
	min-height:80px;
	padding-bottom:35px;
}

.headline .subtitle{
	display:block;
	font-size:2.5em;
	line-height:1.1;
}

.headline:before{
	position:absolute;
	bottom:-20px;
	left:55%;
	content:"";
	width:180px;
	height:90px;
	background:url(../images/cloud.png) no-repeat center;
	background-size:cover;
}

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

.back-line{text-align:center;}

.pageback-btn{ display:inline-block; vertical-align:top; font-size:0.85em; line-height:1.5; color:#898989;}

.pageback-btn-txt{position:relative; padding-left:12px;}

.pageback-btn-txt:before{
	position:absolute;
	left:0;
	top:50%;
	margin-top:-4px;
	content:"";
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 8px solid #898989;
	border-bottom: 5px solid transparent;
}

.pageback-btn:hover{color:#99CC66;}

.pageback-btn:hover .pageback-btn-txt:before{border-right-color:#99CC66}

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

.category-wrap{text-align:center;}

.category a{ position:relative; display:inline-block; margin-left:20px; margin-right:20px; font-size:1.1em; color:#999; }
.category a:hover{ color:#99CC66;  }
.category a:before{
	position:absolute;
	top:50%;
	right:-20px;
	width:1px;
	height:16px;
	margin-top:-8px;
	content:"";
	background:#9FA0A0;
}

.category a:last-child:before{ display:none;}


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

.submenu li{ position:relative; padding-left:35px; margin-bottom:12px; border-radius:2px;}

.submenu li:before{
	position:absolute;
	top:50%;
	left:5px;
	content:"";
	width: 20px;
	height: 20px;
	margin-top:-10px;
	background:url(../images/icon-pagination.png) no-repeat center;
	background-size:cover;
	opacity:0.5;
}

.submenu li a{ display:block; padding:5px 0;}

.submenu li:hover  , .submenu li.active{ background:#99CC66;}
.submenu li:hover a , .submenu li.active a{ color:#000; }
.submenu li:hover:before , .submenu li.active:before{ opacity:1;}

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

.pro-item{ position:relative; border:1px solid #E6E6E6; padding:10px; margin-bottom:30px;}

.pro-item a{ display:block; width:100%; height:100%;}

.pro-item .photo{
	position:relative;
	width:100%;
	height:270px;
	overflow:hidden;
}
.pro-item .photo img{
	width:auto;
	height:auto;
	max-width: 100%;
	max-height: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

.pro-item .title{ position:relative; z-index:5; font-size:1.1em; margin:5px 0;}
.pro-item .title , .pro-item .intro { color:#999999; }
.pro-item .title a:hover { color:#99CC66; }
.pro-item .intro{ position:relative; z-index:5; font-size:0.9em; margin:5px 0; height:50px; overflow:hidden;}

.pro-item a:before{
	position:absolute;
	z-index:4;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:#99CC66;
	opacity:0;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.pro-item:hover a:before{ opacity:1; }

.pro-item:hover .title , .pro-item:hover .intro{ color:#FFF;}

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

.datepost-list{
}

.datepost{
	position:relative;
	min-height:320px;
	padding:10px 350px 0px 20px;
	border:1px solid transparent;
	margin-bottom:60px;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.datepost:before{
	position:absolute;
	bottom:-41px;
	left:0;
	width:100%;
	height:80px;
	content:"";
	background:url(../images/datapost-bg.png) no-repeat bottom center;
	background-size:100% 80px;
	opacity:0.8;
}


.datepost .photo{
	position:absolute;
	top:10px;
	right:10px;
	width: 300px;
	height:300px;
	overflow:hidden;
}

.datepost .photo img{
	max-width: 100%;
	max-height: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.datepost .date{
	display:inline-block;
	font-size:0.9em;
	line-height:1.2;
	/*padding:0 5px;*/
	color:#666;
	letter-spacing:1px;
}

.datepost .title{ 
	margin:15px 0;
	font-size:1.2em;
	font-weight:600;
	overflow : hidden;
	
	text-overflow : ellipsis; 
	white-space : nowrap;
}

.datepost .intro{
	font-size:1.05em;
	color:#666;
	height:157px;
	overflow:hidden;
	margin:15px 0 0px 0;
}

.datepost:hover{ border:1px solid #808080;}

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

.download{ display:block; }
.download.ct{ text-align:center; }

.download .item{ display:inline-block;}

.download a{  position:relative; }
.download a:before{
	position:absolute;
	bottom:-5px;
	left:50%;
	margin-left:-1px;
	width:0px;
	height:0px;
	border-top:3px solid #333;
	border-left:3px solid transparent;
	border-right:3px solid transparent;
	content:"";

}
.download .item:hover{ border-color:#99CC66;}

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

.video{ text-align:center;}
.video iframe{ display:inline-block; max-width:100%;}


.pdlerg-set{ width:80%; margin-left:auto; margin-right:auto;}