@charset "utf-8";

body , .wrapper{ color:#333; background:rgba(233,242,248, 0.1);}


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


/*圖片*/
.pic img{ width:100%; height:auto;}
.maxpic img{ max-width:100%; height:auto;}


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

.flex-container{ display: flex; flex-wrap:wrap; }


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



/*page 分頁*/
.page{
	margin: 30px 0 30px 0;
	font-size:0.75rem;
	text-align:center;
	color:#666;
}
.page a , .page span{
	display:inline-block;
	border: 1px solid #999;
	padding: 6px 6px;
	margin:0 3px;
	font-size:0.8rem;
	line-height:1.1;
	min-width:26px;
	
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}
.page span{ background:#227FB8; color:#fff; border-color:#227FB8;}

.page a{ color:#666; }
.page a:hover{ background:#333; color: #fff; border-color:#333; }





/*輪播-左右按鈕*/
.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:#333;
	
	-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:10px; left:1%; width:98%; z-index:3; text-align:center; padding:0 10px;}
.owl-dots-style .owl-dots .owl-dot { display:inline-block; zoom:1 }
.owl-dots-style .owl-dots .owl-dot span {
	width:15px;
	height:15px;
	margin:0px 7px;
	background:rgba(57,175,255,0.3);
	border:3px 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:rgba(57,175,255,1);}
@media (max-width:960px) { 
	.owl-nav-style .owl-prev { left: 0px; }
	.owl-nav-style .owl-next{ right: 0px; }
	
	.owl-dots-style .owl-dots{ bottom:5px; padding:0; line-height:1; }
	.owl-dots-style .owl-dots .owl-dot span { width:12px; height:12px; margin:0px 12px; border-width:2px; } 
}

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

.header{ padding:15px 0; }
.header-left{ width:30%; align-self:center; }
.header-right{ width:70%; align-self:center; }

.logo{ max-width:250px; }
.logo img{ display:block; max-width:100%; max-height:60px; }


/*選單*/
.menu-list{ text-align:right; }
.menu-list li{ position:relative; display:inline-block; margin:5px 10px; }
.menu-list li a{ position:relative; z-index:1; color:#333; display:block; padding:8px 10px 8px 10px; font-weight: 600; /*font-size:0.9rem;*/ }
.menu-list li a:before{
	position:absolute;
	z-index:-2;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#DF610F;
}
.menu-list li a:after{
	position:absolute;
	z-index:-1;
	bottom:-8px;
	left:50%;
	width:6px;
	height:6px;
	border:6px solid #fff;
	margin-left:-12px;
	content:"";
	background:#DF610F;
}
.menu-list li a:before , .menu-list li a:after{ opacity:0; -webkit-transition:all 0.3s; transition:all 0.3s }
.menu-list li a:hover:before , .menu-list li a:hover:after{ 
	-webkit-transform:translateY(-5px);
	transform:translateY(-5px);
	opacity:1;
}
.menu-list li a:hover{ color:#DF610F; }



.menu-trigger{
	display:none;
	position:absolute;
	top:50%;
	right:0;
	width:40px;
	height:40px;
	margin-top:-20px;
	/*border:1px solid #fff;*/
	border-radius:5px;
	background:#227FB8;
	
	webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.menu-trigger-icon{ 
	position:relative; 
	width:64%; 
	height:100%;
	margin-left:18%;
}
.menu-trigger-icon:before{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	height:4px;
	margin-top:-2px;
	content:"";
	background:#fff; 
	
	transition: 0.3s;
}
.menu-trigger-icon:after{
	position:absolute;
	top:75%;
	left:0;
	width:100%;
	height:4px;
	margin-top:-2px;
	content:"";
	background:#fff; 
	
	transition: 0.3s;
}
.menu-trigger-txt{ 
	position:absolute;
	top:50%;
	left:18%;
	width:64%;
	height:4px;
	margin-top:-2px;
	content:"";
	background:#fff; 
	font-size:0;
}
.menu-trigger.opened { background:#DF610F; }
.menu-trigger.opened .menu-trigger-icon:before{
	/*background:#fff;*/
	-webkit-transform: rotate(-45deg) translate(-8px, 7px) ;
    transform: rotate(-45deg) translate(-8px, 7px) ;
}
.menu-trigger.opened .menu-trigger-icon:after{
	/*background:#fff;*/
	-webkit-transform: rotate(45deg) translate(-7px, -6px) ;
    transform: rotate(45deg) translate(-7px, -6px) ;
}
.menu-trigger.opened .menu-trigger-txt{ opacity:0; }



/*.noScroll{ height:100vh; overflow:hidden; -webkit-overflow-scrolling: touch; }*/





/*mobile選單*/
.menu-toggle-content{ display:none; border-top:1px solid #ccc; padding-bottom:30px; }
.menu-mobile-list{ }
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ 
	color:#333; 
	display:block;
	/*font-size:0.95rem;*/
	padding:10px 20px 10px 10px;
	border-bottom:1px solid #d6d6d6;
}

.menu-mobile-list li ul{ background:#fff; }


/*第一層*/
.menu-mobile-list > li{  font-size:1rem; }
.menu-mobile-list > li > a{ font-weight: 600; }

/*第二層*/
.menu-mobile-list > li > ul{
	display:none;
	position:relative;
	top:0;
	left:0;
	width:100%;
	padding-left:15px;
}

/*第三層*/
.menu-mobile-list > li > ul li ul{
	display:none; 
	position:relative;
	top:0;
	left:0;
	width:100%;
	padding-left:15px;
}


/*下一層之按鈕*/
.submenu-button{
	position:absolute;
	z-index:3;
	top:20px;
	right:10px;
	width:11px;
	height:10px;
	cursor:pointer;
}
.submenu-button:before{
	position:absolute;
	z-index:4;
	top:0;
	right:0;
	width:4px;
	height:4px;
	border-right:2px solid #666; 
	border-bottom:2px solid #666; 
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

.menu-mobile-list li.current{ background:#227FB8; color:#fff; }
.menu-mobile-list li.current > a{ color:#fff; }
.menu-mobile-list li.current > a .submenu-button:before{ border-right-color:#fff; border-bottom-color:#fff; }









.search-area{
	background:linear-gradient( left , #fff, #fff 80%, #2483BC 20%, #2483BC );
	background:-moz-linear-gradient( left , #fff, #fff 80%, #2483BC 20%, #2483BC );
	background:-webkit-linear-gradient( left , #fff, #fff 80%, #2483BC 20%, #2483BC );
	background:-o-linear-gradient( left , #fff, #fff 80%, #2483BC 20%, #2483BC );
	background:-ms-linear-gradient( left , #fff, #fff 80%, #2483BC 20%, #2483BC );
}
.search-line{ align-items:stretch; }
.search-line-left{ width:35%; /*align-self:center;*/ padding:10px 20px; background:#fff; }
.search-line-right{ width:65%; /*align-self:center;*/ padding:10px 20px; background:#2483BC; }

/*搜尋文字區塊*/
.search-box{ position:relative; z-index:2; border:1px solid #2483BC; }
.search-input , .search-btn{ 
	line-height:1; 
	height:35px; 
	border-width:0px;
	border:1px solid transparent;
}
.search-input{
	background:#ffffff;
	border-right:1px solid transparent;
	width:100%;
	padding:0 10px;
	font-size:0.9em;
	color:#333;
}
/*搜尋按鈕*/
.search-btn{
	position:absolute; 
	top:1px; 
	right:0;
	background:transparent;
	cursor:pointer;
	padding:0 5px;
	/*opacity:0.6;*/
}
.search-btn:hover{ /*opacity:1;*/ border:1px solid transparent; }



.top-info span{ display:inline-block; margin:5px 20px 0 20px; /*font-size:0.95em;*/ color:#fff; }






/*輪播*/
.banner img{ display:block; max-width:100%; height:auto; }




/*頁尾*/
.footer{ position:relative; margin-top:20px; }
.footer:before{
	position:absolute;
	top:-20px;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#227FB8;
}
.footer-top{ background:#227FB8; padding:20px 0; }
.footer-bottom{ background:#1F212E; padding:10px 0; }

.footer-info-bar{ text-align:center;}

.footer-info-list{ font-size:0.8em; margin:10px 0; }
.footer-info-list.small{ font-size:0.75em; line-height:1.5; }
.footer-info-list li span{ display:inline-block; margin:0 10px; }

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

.footer-info-bar , .footer-info-bar a , .web-designer , .web-designer a{ color:#fff; }
.footer-info-bar a:hover  , .web-designer a:hover{ color:#DF610F; }


/*回頂端按紐*/
.backtop-btn{
	position: fixed;
	z-index: 99;
	bottom: 45px;
	right: 15px;
	width: 45px;
	height: 45px;
	color: #fff;
	text-align: center;
	background: #227FB8;
	border:3px solid rgba(255,255,255,0.5);
	padding:10px;
	cursor: pointer;
	
	opacity:0;
	transition:opacity 0.5s ease;
	-webkit-transition:opacity 0.5s ease;
	-moz-transition:opacity 0.5s ease;
	-o-transition:opacity 0.5s ease;
}
.backtop-btn img{ display:block; max-width:100%; height:auto; }
.backtop-btn:focus , .backtop-btn:hover{ color:#fff; }

.backtop-btn.show{ opacity:1; }





/*主內容區內側裝飾*/
.page-main{ position:relative; }
.page-main-dec:before{
	position:absolute;
	bottom:0;
	left:0;
	width:846px;
	height:1000px;
	content:"";
	background:url(../images/company-21.png) no-repeat left bottom;
	background-size:cover;
}

.page-content{ position:relative; min-height:1000px; padding-top:30px; padding-bottom:30px; }
.page-content.page-content-pd{ padding-left:150px; padding-right:150px; }

.page-lefttop-dec{ 
	position:absolute;
	z-index:1; 
	top:0; 
	left:80px;
	
	-moz-transform-origin:left top;
	-webkit-transform-origin:left top;
	-o-transform-origin:left top;
	-ms-transform-origin:left top;
	transform-origin:left top;
	
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(90deg);
}
.page-lefttop-dec .title{
	display:block;
	/*display:inline-block;*/
	font-size:4em;
	color:#E9E8E8;
	font-weight:600;
	padding-left:90px;
	padding-right:310px;
	line-height:80px;
	text-transform:uppercase;
}
.page-lefttop-dec .title:before{
	position:absolute;
	top:0;
	left:0;
	width:80px;
	height:80px;
	content:"";
	background:#E9E8E8;
}
.page-lefttop-dec .title:after{
	position:absolute;
	top:50%;
	right:0;
	width:300px;
	height:6px;
	margin-top:-3px;
	content:"";
	background:#E9E8E8;
}
.page-rightbt-dec{ 
	position:absolute; 
	z-index:1;
	bottom:20px; 
	right:-920px;
}
.page-rightbt-dec .title{ 
	display:inline-block;
	font-size:4em;
	color:#E9E8E8;
	font-weight:600;
	padding-left:120px;
	padding-right:310px;
	line-height:80px;
	text-transform:uppercase;
	
	-moz-transform-origin:left bottom;
	-webkit-transform-origin:left bottom;
	-o-transform-origin:left bottom;
	-ms-transform-origin:left bottom;
	transform-origin:left bottom;
	
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
}
.page-rightbt-dec .title:before{
	position:absolute;
	top:-40px;
	left:0;
	width:80px;
	height:146px;
	content:"";
	background:url(../images/company-20.png) no-repeat center;
	background-size:contain;
	
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
}
.page-rightbt-dec .title:after{
	position:absolute;
	top:50%;
	right:0;
	width:300px;
	height:6px;
	margin-top:-3px;
	content:"";
	background:#E9E8E8;
}

/*大標*/
.page-headline{ position:relative; margin:30px 0 0 0; }
.page-headline .title{ position:relative; font-size:2.6em; color:#227FB8; font-weight:600; text-align:center; line-height:1.5;}
.page-headline .title:before{
	position:absolute;
	z-index:-2;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#227FB8;
}
.page-headline .title:after{
	position:absolute;
	z-index:-1;
	bottom:-8px;
	left:50%;
	width:6px;
	height:6px;
	border:6px solid #fff;
	margin-left:-12px;
	content:"";
	background:#227FB8;
}


/*導覽路徑*/
.breadcrumbs{
	position:absolute;
	z-index:1;
	bottom:-23px;
	right:0;
	width:100%;
	/*max-width:300px;*/
	font-size:0.8em;
	line-height:1.5;
	text-align:right;
	letter-spacing:0;
}
.breadcrumbs , .breadcrumbs a{ color:#145A7B; }
.breadcrumbs a:hover{ text-decoration:underline; color:#DF610F; }
.breadcrumbs span{margin-right:0px;}
.breadcrumbs span:after{ content:"/"; margin-left:5px; font-size:10px; }
.breadcrumbs span:last-child:after{display:none;}



/*分類*/
.category-list{ margin:15px 0 30px 0; text-align:center; }
.category-list li{ display:inline-block; text-align:center; margin:0 15px 15px 15px; }
.category-list li a{ 
	position:relative;
	display:block;
	width:180px; 
	padding:5px 15px; 
	font-size:1em;
	line-height:1.4;
	background:#31B6A4; 
	color:#fff;
}
.category-list li a:before{
	position:absolute;
	z-index:1;
	bottom:0;
	left:6px;
	width:6px;
	height:6px;
	content:"";
	background:#fff;
}
.category-list li a:hover{ background:#DE620E; color:#fff; }
.category-list li.active a{ background:#DE620E; color:#fff; cursor:default; }
/*.category-list li.active a:before{ opacity:1; }*/




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


/*檔案下載*/
.download-line{ text-align:center; }
.download-btn{
	position:relative;
	display:inline-block;
	background:#3E9FFF;
	padding:8px 50px 15px 50px;
	margin:10px; 
	line-height:1;
	font-weight:600;
	color:#fff;
}
.download-btn:before{
	position:absolute;
	z-index:1;
	bottom:-8px;
	left:50%;
	width:16px;
	height:16px;
	margin-left:-8px;
	content:"";
	background:url(../images/icon-arrow-bottom.png) no-repeat center;
	background-size:70% 70%;
} 
.download-btn:after{
	position:absolute;
	z-index:0;
	bottom:-8px;
	left:20%;
	width:60%;
	height:16px;
	margin-top:-8px;
	content:"";
	background:#31B6A4;
	border:2px solid #fff;
} 
.download-btn:hover{ background:#DE620E; color:#fff; }




/*返回按鈕列*/
.pageback-line{margin:60px 0; text-align:center; }
.pageback-btn span{ position:relative; display:inline-block; padding-left:20px; color:#3E9FFF; font-weight:600; font-size:1em; line-height:1; }
.pageback-btn span:before{
	position:absolute;
	top:50%;
	left:0;
	width:16px;
	height:16px;
	margin-top:-8px;
	content:"";
	background:#31B6A4 url(../images/icon-arrow-left.png) no-repeat center;
	background-size:70% 70%;
}
.pageback-btn:hover span{ color:#DE620E; }
.pageback-btn:hover span:before{ background-color:#DE620E; }



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


/*首頁*/
.idx-sec{ margin:45px 0; }

/*首頁-關於我們*/
.idx-about-photo-area{ position:relative; width:60%; padding:0 0 60px 60px;  }
.idx-about-content-area{ width:40%; }

.idx-about-photo-area:before{
	position:absolute;
	bottom:0;
	left:0;
	width:120px;
	height:120px;
	content:"";
	background:#31B6A4;
}
.idx-about-photo .item-thumb-frame .item-thumb{ padding-bottom:60%; }
.idx-about-photo-dec{ 
	position:absolute; 
	top:0; 
	left:20px;
	-moz-transform-origin:left top;
	-webkit-transform-origin:left top;
	-o-transform-origin:left top;
	-ms-transform-origin:left top;
	transform-origin:left top;
	
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(90deg);
}
.idx-about-photo-dec .title{
	display:block;
	/*display:inline-block;*/
	font-size:1.2em;
	color:#999999;
	font-weight:600;
	padding-left:30px;
	padding-right:160px;
	width:340px;
	line-height:20px;
	text-transform:uppercase;
}
.idx-about-photo-dec .title:before{
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	content:"";
	background:#227FB8;
}
.idx-about-photo-dec .title:after{
	position:absolute;
	top:50%;
	right:0;
	width:150px;
	height:4px;
	margin-top:-3px;
	content:"";
	background:#ccc;
}
.idx-about-heading{ position:relative; padding:10px 0 10px 30px; margin-bottom:10px; }
.idx-about-heading:before{
	position:absolute;
	z-index:-2;
	bottom:0;
	left:0;
	width:80%;
	height:2px;
	content:"";
	background:#999999;
}
.idx-about-heading:after{
	position:absolute;
	z-index:-1;
	bottom:-8px;
	left:60%;
	width:6px;
	height:6px;
	border:6px solid #fff;
	content:"";
	background:#999999;
}
.idx-about-heading .title{ font-size:1.6em; color:#227FB8; font-weight:600; line-height:1.3; }
.idx-about-intro{ padding:10px 0 10px 30px; color:#666; margin:10px 0; }
.idx-about-btnline{ padding:0px 0 0px 30px; }

.idx-more-btn{
	position:relative;
	display:inline-block; 
	padding:0px 60px 0px 5px; 
	border-bottom:2px solid #DE620E;
	line-height:1.3;
	color:#DE620E;
	font-weight:600;
	font-size:1.3em;
	opacity:0.7;
}
.idx-more-btn:before{
	position:absolute;
	bottom:2px;
	right:6px;
	width:20px;
	height:2px;
	content:"";
	background:#DE620E;
}
.idx-more-btn:after{
	position:absolute;
	bottom:6px;
	right:10px;
	width:16px;
	height:2px;
	content:"";
	background:#DE620E;
}
.idx-more-btn:hover{ opacity:1; }




.idx-sec-second{
	padding:30px 0 0 0;
	background:linear-gradient(left , #227FB8 , #227FB8 50% , #F7F8FA 50% , #F7F8FA );
	background:-moz-linear-gradient(left , #227FB8 , #227FB8 50% , #F7F8FA 50% , #F7F8FA );
	background:-webkit-linear-gradient(left , #227FB8 , #227FB8 50% , #F7F8FA 50% , #F7F8FA );
	background:-o-linear-gradient(left , #227FB8 , #227FB8 50% , #F7F8FA 50% , #F7F8FA );
	background:-ms-linear-gradient(left , #227FB8 , #227FB8 50% , #F7F8FA 50% , #F7F8FA );
}
.idx-sec-second img{ display:block; max-width:100%; height:auto; }

.idx-pro-ad{ position:relative; }
.idx-pro-ad .idx-more-btn{ position:absolute; bottom:20px; right:20px; }



/*首頁-最新消息*/
.idx-news-photo-area{ width:60%; }
.idx-news-content-area{ width:40%; padding:30px 0; }
.idx-news-photo-area .item-thumb-frame .item-thumb{ padding-bottom:75%; }

.idx-news-box{ position:relative; background:#227FB8; padding:30px 0px; }
.idx-news-box:before{
	position:absolute;
	top:0;
	left:-50px;
	width:50px;
	height:100%;
	content:"";
	background:#227FB8;
}

.idx-news-heading{ position:relative; padding:5px 0px; margin-bottom:30px; }
.idx-news-heading:before{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:70%;
	height:2px;
	content:"";
	background:#fff;
}
.idx-news-heading:after{
	position:absolute;
	z-index:0;
	bottom:-8px;
	left:50%;
	width:6px;
	height:6px;
	border:6px solid #227FB8;
	content:"";
	background:#fff;
}
.idx-news-heading .title{ font-size:1.6em; color:#fff; font-weight:600; line-height:1.3; }

.idx-news-list{ margin:20px 0; }
.idx-news-item{ position:relative; }
.idx-news-item a{ position:relative; display:block; width:100%; height:100%; padding:15px 50px 15px 85px; margin-bottom:15px; min-height:100px;  }
.idx-news-item a:before{
	position:absolute;
	top:0;
	left:-50px;
	width:50px;
	height:100%;
	content:"";
	background:#31B6A4;
	 opacity:0;
}
.idx-news-item-date{
	position:absolute;
	top:15px;
	left:0;
	width:70px;
	height:70px;
	border:1px solid #fff;
	padding:5px;
}
.idx-news-item-date .year , .idx-news-item-date .day{ display:block; color:#fff; line-height:1.3; text-align:center; letter-spacing:1px; }
.idx-news-item-date .year{ font-size:0.8em;}
.idx-news-item-date .day{ font-size:2.4em;}

.idx-news-item-heading{ color:#fff; }
/*.idx-news-item-heading a:hover{ text-decoration:underline; }*/

.idx-news-btnline{ text-align:right; margin-top:30px; padding-right:50px; }
.idx-news-btnline .idx-more-btn{ border-bottom-color:#fff; color:#fff; opacity:1; }
.idx-news-btnline .idx-more-btn:before , .idx-news-btnline .idx-more-btn:after{ background:#fff; }
.idx-news-btnline .idx-more-btn:hover{ border-bottom-color:#DE620E; color:#DE620E; }
.idx-news-btnline .idx-more-btn:hover:before , .idx-news-btnline .idx-more-btn:hover:after{ background:#DE620E;}

.idx-news-item a:hover{ background:#31B6A4; }
.idx-news-item a:hover:before{ opacity:1;  }


/*首頁-商品介紹*/
.idx-sec-pro{ padding:45px 0; background:#F7F8FA; }

.idx-pro-heading{ position:relative; margin-bottom:10px; margin-bottom:45px; max-width:800px; }
.idx-pro-heading:before{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:70%;
	height:2px;
	content:"";
	background:#227FB8;
}
.idx-pro-heading:after{
	position:absolute;
	z-index:0;
	bottom:-8px;
	left:50%;
	width:6px;
	height:6px;
	border:6px solid #F7F8FA;
	content:"";
	background:#227FB8;
}
.idx-pro-heading .title{ font-size:3em; color:#227FB8; font-weight:600; line-height:1.3; }

.idx-product-list .product-item{  position:relative; width:22%; margin-right:4%; margin-bottom:30px; border:1px solid #ccc; background:#fff; }
.idx-product-list .product-item:nth-child(4n){ margin-right:0; }









/*最新消息*/
.post-list{ margin-top:60px; }
.post-item{ width:30%; margin-right:5%; margin-bottom:60px; }
.post-item:nth-child(3n){ margin-right:0; }

.post-photo{ position:relative;}
.post-photo .post-date{ 
	position:absolute;
	z-index:2;
	bottom:-15px;
	left:50%;
	width:140px;
	margin-left:-70px;
	text-align:center;
	background:#31B6A4;
	color:#fff;
	font-size:0.8em;
	letter-spacing:1px;
	padding:2px 10px;
	border:2px solid #fff;
}
.post-name{ text-align:center; background:#227FB8; color:#fff; font-weight:600; font-size:1.05em; padding:30px 10px 15px 10px; }
.post-item a:hover .post-name{ background:#DE620E; color:#fff; }



/*最新消息*/
.post-view-heading{ /*text-align:center;*/ color:#227FB8; font-size:1.3em; font-weight:600; margin-bottom:20px; }
.post-view-date{ /*text-align:center;*/ color:#227FB8; line-height:1; font-size:0.9em; margin-bottom:5px; }

.news-view-photo{ position:relative; margin:30px 0 20px 0; border:1px solid #ccc; padding:10px 5px; }
.news-view-photo:before, .news-view-photo:after{ display:table; content:" " }
.news-view-photo:after{ clear:both }
.showbox{ float:left; position:relative; width:75%; height:500px; /*border:1px solid #eaeaea;*/ }
.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:before{
	position:absolute;
	z-index:1;
	bottom:35px;
	left:50%;
	width:24px;
	height:24px;
	margin-left:-12px;
	content:"";
	background:rgba(255,255,255,0.5) url(../images/icon-zoom.png) no-repeat center;
	background-size:60% 60%;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
}
.showbox:hover:before{
	background-color:rgba(255,255,255,1);
	bottom:40px;
	-moz-transform:scale(1.3);
	-webkit-transform:scale(1.3);
	-o-transform:scale(1.3);
	-ms-transform:scale(1.3);
	transform:scale(1.3);
}

.showbox-thumbnail-list{ float:right; width:20%; }
.showbox-thumbnail-list a{ display:inline-block; width:97%; border:1px solid #fff; margin-bottom:10px; border:4px solid transparent; }
.showbox-thumbnail-list a:hover{ border-color:#FFCE00; }
.showbox-thumbnail-list a .item-thumb-frame .item-thumb { padding-bottom: 70%; }





/*商品介紹*/
.product-left-side{ width:20%; margin-right:7%; padding-top:15px; }
.product-right-side{ width:73%; padding-top:15px; }


.sidebar-heading{
	position:relative;
	display:block;
	padding:8px 15px; 
	font-size:1.1em;
	font-weight:600;
	line-height:1.4;
	background:#31B6A4; 
	color:#fff;
	margin-bottom:15px;
}
.sidebar-heading:before{
	position:absolute;
	z-index:1;
	bottom:0;
	left:6px;
	width:6px;
	height:6px;
	content:"";
	background:#fff;
}

.side-nav li{ position:relative; margin-bottom:5px; }
.side-nav li a{ display:block; padding:5px 15px; /*font-weight:600;*/ }
.side-nav li a:before{
	position:absolute;
	top:15px;
	left:0;
	width:8px;
	height:8px;
	content:"";
	background:#333;
}
.side-nav li.active a , .side-nav li a:hover{ color:#DF610F; }
.side-nav li.active a:before , .side-nav li a:hover:before{ background:#DF610F; }


.product-list .product-item{  position:relative; width:30%; margin-right:5%; margin-bottom:75px; border:1px solid #ccc; background:#fff; }
.product-list .product-item:nth-child(3n){ margin-right:0; }

.product-item a.mask{ display:block; position:relative; padding:30px 10px 50px 10px;}
.product-item a.mask:before{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:rgba(34,127,184, 0.6);
	opacity:0;
}

.product-title{ position:relative; z-index:2; font-size:1.05em; font-weight:600; text-align:center; }

.product-more-btn{ 
	position:absolute;
	z-index:2;
	bottom:-25px; 
	left:50%;
	width:50px;
	height:50px;
	margin-left:-25px;
	line-height:50px;
	color:#fff;
	background:#227FB8;
	text-align:center;
	font-weight:600;
	font-size:0.95em;
	-webkit-transition:transform 0.3s; 
	transition:transform 0.3s 
}


.product-item:hover a.mask:before{ opacity:1; }
.product-item:hover .product-more-btn{ 
	background:#DF610F; 
	color:#fff; 
	-webkit-transform:translateY(-10px); 
	transform:translateY(-10px);
}
.product-item:hover .product-title{ color:#fff; }



/*商品詳細*/
.product-view-gp{ margin-bottom:45px; }
.pro-view-photos{ width:45%; margin-right:5%; }
.pro-right-info{ width:50%; }

.pro-view-photos .sync-slide{ border:1px solid #ccc; }
.pro-view-photos .sync-thum{ margin:10px 0; padding:0 0px; }
.pro-view-photos .sync-thum .owl-item{ cursor:pointer; border:1px solid #ccc; }
.pro-view-photos .sync-thum .owl-item:hover{ opacity:0.4;}
.pro-view-photos .sync-thum .owl-item.current{ border:1px solid #DF610F; cursor:default; }
.pro-view-photos .sync-thum .owl-item:hover{  border-color:#336699; }
.pro-view-photos .sync-thum.owl-nav-style .owl-prev { left: -32px; }
.pro-view-photos .sync-thum.owl-nav-style .owl-next{ right: -30px; }

.product-view-title{ font-size:1.3em; font-weight:600; color:#227FB8; margin:10px 0; }
.product-view-intro{ color:#666; }





/*聯絡我們*/
.contact-gp{ margin:60px 0; }
.contact-gp .map{ width:50%; position:relative; z-index:2; padding:30px 0; }
.contact-gp .box{ width:50%; position:relative; z-index:1; background:#227FB8; padding:50px 30px; }
.contact-gp .box:before{
	position:absolute;
	top:0;
	left:-30px;
	width:30px;
	height:100%;
	content:"";
	background:#227FB8;
}
.contact-gp .box:after{
	position:absolute;
	top:0;
	right:20px;
	width:20px;5
	height:20px;
	content:"";
	background:#fff;
}

.info-list{ color:#fff; }
.info-list li{ position:relative; margin-bottom:5px; font-size:1em; padding-left:78px; min-height:30px; }
.info-list li.company-line { font-weight:600; font-size:1.3em; margin-bottom:5px; padding-left:0; }
.info-list li .info-title{ position:absolute; top:0; left:0; display:block; width:75px; }
.info-list li .info-title:after{ position:absolute; top:0; right:0; content:"：";}
/*.qrcode{ max-width:150px; }
.qrcode img{ display:block; max-width:100%; height:auto; } */


/*.contact-logo{ max-width:400px; margin:5px auto 20px auto; }
.contact-logo img{ display:block; max-width:100%; height:auto; }*/

.contact-form-box{ 
	padding:30px 50px;
	margin-bottom:30px;
	background:#227FB8 url(../images/company-29.png) no-repeat bottom right;
	background-size:contact;
}
.contact-form{}

.form-heading{ margin-bottom:10px; color:#fff; }

/* == 表單 套件組合 ======== */
.input-group { 
	display: table; 
	border-collapse: separate; /*表格屬性，合併框與格*/ 
	width:100%; 
	color:#555555; 
	margin-bottom:10px;
	padding:10px 0;
}
.require-mark{ color:red; font-size:0.85em; }
.input-title{
	display: table-cell;
	min-width: 85px; 
	font-size: 1em;
	text-align: left;
    white-space: nowrap;
	vertical-align:top;
	padding-top:9px;
	color:#fff;
	/*font-weight:600;*/
}
.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%; font-size: 1em; }

.form-bt-line{ text-align:left; padding-left:90px; margin-bottom:20px; }
input.fbtn{ font-size:1em; padding: 6px 25px; border-radius:0; margin:0 10px; cursor:pointer; }
input.fbtn-confirm{ background:#fff; color:#227FB8; border:2px solid #fff; }
input.fbtn-cancel{ background:#227FB8; color:#fff; border:2px solid #fff; }
input.fbtn:hover{ background:#DF610F; 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; }