@charset "utf-8";

/* ======================================
	Category:
	01. 表單元件基本設定
	02. 其他基本設定
	03. 分頁設定
	04. 套用owl.carousel之輪播基本設定
	05. 回頂端按紐
	
	06. 頁首header設定
	07. 輪播banner設定
	08. 小螢幕時選單設定
	09. 頁尾footer設定
	10. 全頁面共同設定
	11. 首頁
	12. 關於我們

	13. 最新消息
	14. 活動公告
	15. 商品介紹
	16. 作品欣賞
	17. 活動剪影
	18. 常見問題
	19. 文章分享
	20. 檔案下載
	21. 相關連結
	22. 聯絡我們
	
	----
	
	其他CSS、JS:
	自訂：customize.js
	輪播用：animate.css  and  owl.carousel.min.css  and  owl.carousel.js
	圖片點按放大功能：jquery.fancybox.min.css  and  jquery.fancybox.min.js
	多層次menu收縮功能：mtree.js
====================================================================================================================================== */




/* ======================================
	01. 表單元件基本設定
====================================================================================================================================== */
input , select , textarea{
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    background:#F9F9F9;
    border: 1px solid #466BAA;
    border-radius: 3px;
	vertical-align:middle;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input::-webkit-input-placeholder , select::-webkit-input-placeholder , textarea::-webkit-input-placeholder{ color: rgba(51,51,51, 0.8); }
input::-moz-placeholder , select::-moz-placeholder , textarea::-moz-placeholder { color: rgba(51,51,51, 0.8); }
input::-ms-input-placeholder , select::-ms-input-placeholder , textarea::-ms-input-placeholder { color: rgba(51,51,51, 0.8); }
input::-moz-placeholder , select::-moz-placeholder , textarea::-moz-placeholder { color: rgba(51,51,51, 0.8);}
select{
	padding-right:25px;
	appearance:none;
    -webkit-appearance: none;
    -moz-appearance: none;
	background:url(../images/selt-arrow.png) no-repeat scroll right 5px center transparent;
}
select::-ms-expand { display: none; }
input:focus , select:focus{ 
	border-color: rgba(13,105,231, 0.2);
    box-shadow: 0 1px 1px rgba(13,105,231, 0.075) inset, 0 0 5px rgba(13,105,231, 0.1);
    outline: 0 none;
}
label{ line-height:1; }




/* ======================================
	02. 其他基本設定
====================================================================================================================================== */
body , .wrapper{ color:#333; background:#fff;}

/* a鏈結字 */
a { color:#333;}
a:hover, a:focus { color:#FAC200; 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; align-items:center; justify-content:center; }



/* ======================================
	03. 分頁設定 page
====================================================================================================================================== */
.page{ margin:60px 0 40px 0; font-size:14px; text-align:center; }
.page a , .page span{
	display:inline-block;
	border: 1px solid #466BAA;
	padding: 0px 4px;
	margin:0 2px;
	min-width:36px;
	color:#466BAA;
	
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}
.page span{ background:#0E429B; color: #fff; }
.page a:hover{ background:#466BAA; color: #fff; border-color:#466BAA; }




/* ======================================
	04. 套用owl.carousel之輪播基本設定
====================================================================================================================================== */
/*輪播-左右按鈕*/
.owl-nav-style .owl-next , .owl-nav-style .owl-prev{
	position: absolute;
	top:50%;
	width: 35px;
	height: 40px;
	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:5%; width:90%; z-index:3; text-align:right; padding:0 20px;}
.owl-dots-style .owl-dots .owl-dot { display:inline-block; zoom:1 }
.owl-dots-style .owl-dots .owl-dot span {
	width:40px;
	height:10px;
	margin:0px 7px;
	background:rgba(255,255,255,0.6);
	border:1px solid #0E429B;
	display:block;
	-webkit-backface-visibility:visible;
	transition:opacity .2s ease;
}
.owl-dots-style .owl-dots .owl-dot.active span, .owl-dots-style .owl-dots .owl-dot:hover span { background:rgba(51,51,51,0.6); border-color:#0E429B; }
@media (max-width:960px) { 
	.owl-dots-style .owl-dots{ text-align:center;}
	.owl-dots-style .owl-dots .owl-dot span { width:10px; height:10px; } 
}




/* ======================================
	05. 回頂端按紐
====================================================================================================================================== */
.scrolltop{
	position: fixed;
	z-index: 999;
    right: 10px;
    bottom: 70px;
    display: block;
	width:50px;
	height:50px;
    cursor: pointer;
	background:#466BAA;
	border: 4px solid rgba(255,255,255,0.5);
    padding:10px;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;

	opacity:0;
}
.scrolltop img { display:block; max-width:100%; height:auto; }
.scrolltop:hover{ background:#FAC200; }
.scrolltop.show{ opacity:1; }





/* ======================================
	06. 頁首header設定
====================================================================================================================================== */
.header{ position:relative; }

.link-line{ position:absolute; z-index:11; top:0; left:0; width:100%; text-align:right; }
.icon-fb{ position:relative; display:inline-block; max-width:150px; }
.icon-fb:before{
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	height:12px;
	content:"";
	background:url(../images/iocn-fb-shadow.png) no-repeat center top;
	background:contain;
}
.icon-fb a{ display:block; width:100%; height:100%; background:#466BAA; padding:10px 30px; }
.icon-fb a img{ display:block; max-width:100%; height:auto; }
.icon-fb a:hover{ background:#0E429B; }


.header-bar{ position:relative; background:#466BAA; }
.header-bar:before{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:15px;
	content:"";
	background:#0E429B;
	-webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}

.space-line{ height:20px;}

.header-top-flex{ display:flex; flex-wrap:wrap; align-items:center; padding:30px 15px 15px 15px; }
.header-top-left{ width:30%; }
.header-top-right{ width:70%; }


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

.desktop-logo{ display:block; }
.mobile-logo{ display:none; }


/* 語系 */
.language-wrap{ text-align:right; }
.language-wrap a{ 
	display:inline-block; 
	color:#0E429B;
	background:rgba(255,255,255,0.6);
	text-align:center; 
	font-size:12px; 
	letter-spacing:0px;
	min-width:32px;
	margin:0 3px;
	padding:3px 0;
}
.language-wrap a.member-icon{ 
	padding-left:12px;
	padding-right:12px;
	margin-left:5px;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.language-wrap a:focus{ color:#0E429B; }
.language-wrap a:hover{ background:rgba(255,255,255,0.8); color:#0E429B; }
.language-wrap a.active{ background:#fff; color:#0E429B; cursor:default; }



/*選單*/
.menu-list{ display:flex; flex-wrap:wrap; justify-content:center; }
.menu-list li{ 
	width:8.2%;
	min-width:110px;
	text-align:center; 
	height:40px; 
	overflow:hidden; 
	border-bottom:5px solid transparent;
}
.menu-list li:hover{ border-bottom-color:#FAC200;}
.menu-list li a{ 
	display:block; 
	font-size:15px; 
	color:#fff; 
	padding:13px 1px;
	
	-webkit-transform: translateY(-37px);
	-moz-transform: translateY(-37px);
	-ms-transform: translateY(-37px);
	-o-transform: translateY(-37px);
	transform: translateY(-37px);
	
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	transition: transform 0.2s;
}
.menu-list li a:hover{
	-webkit-transform: translateY(-8px);
	-moz-transform: translateY(-8px);
	-ms-transform: translateY(-8px);
	-o-transform: translateY(-8px);
	transform: translateY(-8px);
} 
.menu-list li a .menu-ch , .menu-list li a .menu-en{ display:block;}
.menu-list li a .menu-en{ color:#FAC200; letter-spacing:0; }




/*頁首在下捲時固定於最上方*/
#header-bar-fixed{
	position:relative; /*重要設定----------------*/
	z-index:10;
	top:0;/*重要設定----------------*/
	width:100%;
}
#header-bar-fixed.setfixed{ 
	position:fixed;
	-webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}
#header-bar-fixed.setfixed .header-top-flex{ padding-top:30px; }
#header-bar-fixed.setfixed .space-line{ height:0;}
#header-bar-fixed.setfixed .desktop-logo{ display:none; }
#header-bar-fixed.setfixed .mobile-logo{ display:block; }



/* ======================================
	07. 輪播banner設定
====================================================================================================================================== */
.banner{ position:relative; }
.banner img{ display:block; width:100%; height:auto; }





/* ======================================
	08. 小螢幕時選單設定
====================================================================================================================================== */
/*小螢幕時的選單按鈕*/
.nav-trigger{
	display:none;
	margin-left:auto;
	width:40px;
	height:40px;
	border:1px solid #fff;
	padding:11px 8px;
	border-radius:5px;
	background:transparent;
}
.nav-trigger-icon{ 
	position:relative; 
	width:100%; 
	height:100%;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
}
.nav-trigger-icon:before{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:2px;
	margin-top:-1px;
	content:"";
	background:#fff;
}
.nav-trigger-txt{ display:none;}



/*小螢幕選單*/
.mobile-menu-wrap{
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#466BAA;
	color: #fff;
	
	overflow-x: hidden;
	overflow-y: auto;
	opacity:0;
	visibility: hidden; 
	
	/*Force Hardware Acceleration */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	
	-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
	-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
	transition: transform 0.5s 0s, visibility 0s 0.5s;
}
.mobile-menu-wrap.is-open { opacity:0; visibility: hidden; }

/*.mobile-menu-header{ 
	color:#fff; 
	font-size:18px; 
	font-weight:600; 
	border-bottom:2px solid rgba(255,255,255,0.4); 
	padding:10px 15px;
	margin-top:80px;
}*/

.menu-mobile-list{ position:relative; border-top:1px solid rgba(56,85,136,0.9); margin-top:80px; padding-top:10px; }
.menu-mobile-list:before{
	position:absolute;
	top:1px;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:rgba(106,136,187,0.9);
}
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ 
	color:#fff; 
	display:block;
	font-size:1rem;
	padding:10px 70px 10px 15px;
	border-bottom:1px solid rgba(255,255,255,0.4);
}
.menu-mobile-list li ul{ }


/*第一層*/
.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:16px;
}

/*第三層*/
.menu-mobile-list > li > ul li ul{
	display:none; 
	position:relative;
	top:0;
	left:0;
	width:100%;
	padding-left:16px;
}
/*下一層之按鈕*/
.submenu-button{
	position:absolute;
	z-index:3;
	top:0;
	right:5px;
	width:55px;
	height:100%;
	cursor:pointer;
}
.submenu-button:before{
	position:absolute;
	z-index:4;
	top:50%;
	left:50%;
	width:6px;
	height:6px;
	border-top:2px solid rgba(255,255,255,0.4);
	border-right:2px solid rgba(255,255,255,0.4);
	margin-top:-3px;
	margin-left:-3px;
	content:"";
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;

	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.submenu-button.opened:before{
	margin-top:-10px;
	transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	-o-transform:rotate(135deg);
}

.menu-mobile-list > li.current{ background:rgba(255,255,255,0.1); color:#600B11; }
.menu-mobile-list > li.current > a{ background:rgba(255,255,255,1); color:#466BAA; }
.menu-mobile-list > li.current > a .submenu-button{
	display:none;
}

.menu-mobile-list li li.current{ background:rgba(0,0,0,0.2); }
.menu-mobile-list li li.current > a{ color:#FFD506; }
.menu-mobile-list li li.current > a .submenu-button{ display:none; }



/*小螢幕時語系*/
.mobile-language-wrap{ position:absolute; top:20px; left:15px; }
.language-trigger{
	display:block; 
	color:#fff; 
	background:rgba(255,255,255,0.1);
	font-size:15px;
	padding:5px 5px 4px 5px;
	width:110px;
	text-align:center;
}
.language-trigger:focus , .language-trigger:hover{ color:#fff; }
.language-trigger-txt{ display:inline-block; vertical-align:middle; }
.language-trigger-icon{
	display:inline-block;
	vertical-align:middle;
	width:5px;
	height:5px;
	margin-left:5px;
	border-right:2px solid #fff; 
	border-bottom:2px solid #fff; 
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.mobile-language-list{
	display:none;
	position:absolute;
	z-index:2;
	left:0;
	top:100%;
	width:100%;
	background:#fff;
}
.mobile-language-list a{
	display:block;
	width:100%;
	padding:10px;
	text-align:center;
	color:#466BAA;
	font-size:12px;
	border-bottom:1px solid rgba(0,0,0,0.1);
}
.mobile-language-list a:hover{ background:rgba(0,0,0,0.1); }
.mobile-language-list.is-open{ display:block; }


/*小螢幕時 會員鈕*/
.mobile-member-wrap{ position:absolute; top:20px; left:140px; }
.mobile-member-icon{
	display:block; 
	color:#fff; 
	background:rgba(255,255,255,0.1);
	font-size:15px;
	padding:5px;
	width:110px;
	text-align:center;
}
.mobile-member-icon:hover{ color:#fff; }



/*手機板上滑出內容時出現的叉叉，在title 右側 / 'X' close icon */
.mobile-menu-close {
	position: absolute;
	z-index: 1;
	right: 10px;
	top: 15px;
	height: 50px;
	width: 50px;
	display:block;
	
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	color: transparent;
}
.mobile-menu-close:after, .mobile-menu-close:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	height: 22px;
	width: 4px;
	background-color:#fff;
}
.mobile-menu-close:after {
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.mobile-menu-close:before {
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	-o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
/* End 手機板上滑出內容時出現的叉叉 */


.page-overlay{
	display:none; 
	position:fixed;
	z-index:1000;
	top:0;
	left:0; 
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.7);
	overflow:hidden;
}








/* ======================================
	09. 頁尾footer設定
====================================================================================================================================== */
.footer{ position:relative; margin-top:90px; }
.footer:before{
	position:absolute;
	top:-30px;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#ccc;
}
.footer-top{ background:#333; padding:20px 0; font-size:0.85em; }

.footer-logo{ display:block; max-width:300px; margin:15px 0 25px 0; }
.footer-logo img{ display:block; max-width:100%; height:auto; }

.web-copyright{ background:#0E429B; text-align:right; font-size:0.75em; padding:10px 0; }
.footer-top , .footer-top a , .web-copyright , .web-copyright a{ color:#fff; }
.footer-top a:hover , .web-copyright a:hover{ color:#FAC200; }

.footer-info-list span{ display:inline-block; }

.footer-menu-list{ position:absolute; top:0; right:0; width:320px; text-align:right; }
.footer-menu-list li{ display:inline-block; }
.footer-menu-list li a{ display:block; padding:5px 15px; margin-bottom:10px; }






/* ======================================
	10. 全頁面共同設定
====================================================================================================================================== */
.content-pd{ max-width:1000px; margin:0 auto; }

.page-flex{ display:flex; flex-wrap:wrap; }
.page-side{ width:16%; margin-right:5%; }
.page-maincontent{ width:79%; }


/*大標題*/
.page-headline{ text-align:center; margin:30px 0; }
.page-headline .title , .page-headline .subtitle{ display:block; margin:5px 0; font-weight:600; color:#466BAA; }
.page-headline .title{ font-size:1.5em; border-bottom:1px solid #ccc; }
.page-headline .subtitle{ font-size:1em; text-transform:uppercase; }


/*內容標題*/
.content-headline{ position:relative; border-bottom:3px solid #FAC200; margin-bottom:30px; }
.content-headline:before{
	position:absolute;
	z-index:0;
	top:100%;
	left:0;
	content:"";
	background:#0E429B;
	height:3px;
	width:70px;
}
.content-headline , .content-headline a{ color:#466BAA; }
.content-headline a:hover{ color:#004DA0; }
.content-headline span{ position:relative; display:inline-block; padding:0 10px 0 0; margin:3px 3px 3px 0; font-size:15px; }
.content-headline span:after{
	position:absolute;
	top:0px;
	right:-6px;
	content:">";
}
.content-headline span:last-child:after{ display:none; }
.content-headline span.title{ font-weight:600; }



/*分類*/
.category-list{ text-align:center; margin:0 auto 30px auto; max-width:1000px; }
.category-list li{ display:inline-block; text-align:center; margin:0 15px 15px 15px; }
.category-list li a{
	position:relative;
	color:#466BAA;
	border:1px solid #466BAA;
	border-radius:5px;
	padding:3px 30px 4px 30px;
}
.category-list li a:before{
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	height:12px;
	content:"";
	background:url(../images/iocn-fb-shadow.png) no-repeat center top;
	background:contain;
	opacity:0;
}
.category-list li.active a:before{ opacity:1; }
.category-list li a:hover , .category-list li.active a{ background:#466BAA; color:#fff; }
.category-list li.active a{ font-size:1.05em; font-weight:600; cursor:default; }


.thrmbnail-list{ margin:15px 0; }
.thrmbnail-list li{ text-align:center; margin-bottom:5px;}
.thrmbnail-list li img{ max-width:100%; text-align:center; }


/*編輯器區塊*/
.editor-area{ margin:15px 0; color:#606060; line-height:2; }
.editor-area img{ max-width:100%; height:auto; }



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


/* 檔案下載鈕*/
.download-line{ margin:10px 0; text-align:center; }
.download-btn{
	position:relative;
	display:inline-block;
	padding:7px 12px;
	margin:10px 20px; 
	color:#466BAA;
}
.download-btn:before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:8px;
	content:"";
	background:#466BAA;
	border-radius:2px;
}
.download-btn:after{
	position:absolute;
	bottom:0;
	left:50%;
	width:0;
	height:0;
	content:"";
	margin-left:-4px;
	border-top:6px solid #fff;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
}
.download-btn:hover{ color:#0E429B; }
.download-btn:hover:before{ background:#0E429B; }


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


/*詳細頁標題*/
.view-heading{ color:#466BAA; font-size:20px; font-weight:600; margin-bottom:20px; text-align:center; padding:0 10px; }



/*搜尋區塊*/
.search-box{
	position:relative;
	width:100%;
	background:#fff;
	border:1px solid #999;
	margin-bottom:15px;
}
.search-input , .search-btn{ 
	line-height:1; 
	height:30px; 
	border:1px solid transparent;
	border-radius:0px;
	background:#fff;
}
.search-input{
	background:#ffffff;
	width:100%;
	padding:0 10px;
	font-size:0.9em;
	color:#333;
	padding-right:40px;
}
.search-input:focus{ border-color:transparent; }
/*搜尋按鈕*/
.search-btn{
	position:absolute; 
	top:1px; 
	right:2px;
	background:transparent;
	cursor:pointer;
	padding:0 5px;
}
.search-btn:hover{ border:1px solid transparent; }








/* ======================================
	11. 首頁
====================================================================================================================================== */
/*首頁-sgs*/
.sgs-area{ text-align:center; margin:45px 0; }
.sgs-area .photo , .sgs-area .content{ display:inline-block; vertical-align:top; text-align:left; margin:0 5px; }
.sgs-area .photo{ max-width:150px; }
.sgs-area .content .title{ margin-bottom:5px; margin-top:5px; }
.sgs-area .content .title span{ 
	position:relative; 
	display:inline-block; 
	font-size:2em;
	line-height:1;
	letter-spacing:3px;
	padding-right:15px;
	margin-right:15px;
	color:#466BAA;
	font-weight:600;
}
.sgs-area .content .title span:before{
	position:absolute;
	top:5%;
	right:0;
	width:2px;
	height:90%;
	content:"";
	background:#466BAA;
}
.sgs-area .content .title span:last-child:before{ display:none; }
.sgs-area .content .spec{ font-weight:600; color:#666666; font-size:18px; }




/*首頁-最新上市*/
.idx-item-slider{ max-width:1200px; margin-left:auto; margin-right:auto; padding-left:30px; padding-right:30px; }
.idx-item-slider .owl-item .item{ padding-left:20px; padding-right:20px; }
.idx-item a{ display:block; width:100%; height:100%; border:1px solid #ccc; padding:10px; }

.owl-item-slider.owl-nav-style .owl-next , .owl-item-slider.owl-nav-style .owl-prev{ 
	height:90px; 
	margin-top:-60px;
	border:1px solid #999;
	background:#666;
	opacity:1; 
}
.owl-item-slider.owl-nav-style .owl-prev { left:-30px; }
.owl-item-slider.owl-nav-style .owl-next{ right:-30px; }
.owl-item-slider.owl-nav-style .owl-prev:before , .owl-item-slider.owl-nav-style .owl-prev:after , 
/*.owl-item-slider.owl-nav-style .owl-next:before , .owl-item-slider.owl-nav-style .owl-next:after{
	width:4px;
	height:20px;
	background:#999;
}*/
.owl-item-slider.owl-nav-style .owl-prev:before , .owl-nav-style .owl-next:after{ bottom:50%; /*margin-bottom:-16px;*/ }
.owl-item-slider.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before{ top:50%; /*margin-top:-16px;*/ }

.owl-item-slider.owl-nav-style .owl-prev:hover , .owl-item-slider.owl-nav-style .owl-next:hover{ border-color:#FFD41F; background:#FFD41F; }
.owl-item-slider.owl-nav-style .owl-prev:hover:before , .owl-item-slider.owl-nav-style .owl-prev:hover:after , 
.owl-item-slider.owl-nav-style .owl-next:hover:before , .owl-item-slider.owl-nav-style .owl-next:hover:after{
	background:#fff;
}

.owl-item-slider.owl-nav-style .owl-prev.disabled , .owl-item-slider.owl-nav-style .owl-next.disabled{ opacity:0.5; cursor:default; border-color:#ccc; }
.owl-item-slider.owl-nav-style .owl-prev.disabled:before , .owl-item-slider.owl-nav-style .owl-prev.disabled:after , 
.owl-item-slider.owl-nav-style .owl-next.disabled:before , .owl-item-slider.owl-nav-style .owl-next.disabled:after{
	background:#fff;
}
.owl-item-slider.owl-nav-style .owl-prev:hover.disabled , 
.owl-item-slider.owl-nav-style .owl-next:hover.disabled{ background:#666; }


.idx-item-name{ margin:20px 0 0px 0; padding:4px 7px; text-align:center; color:#6D6B6B; line-height:1.4; }
.idx-item a:hover .idx-item-name{ background:#6D6B6B; color:#fff; }
.idx-item a:hover { border-color:#6D6B6B; }




/*首頁-板材區塊*/
.idx-material{
	height:600px;
	margin-bottom:60px;
	background:url(../images/idx-material.png) no-repeat center;
	background-size:cover;
}

.idx-material-box{ position:relative; display:inline-block; background:rgba(70,107,170,0.5); padding:100px 80px 0 80px; }
.idx-material-box:before{
	position:absolute;
	top:0;
	left:-980px;
	width:1000px;
	height:100%;
	content:"";
	background:rgba(70,107,170,1);
}
.idx-material-btn{ position:relative; display:inline-block; margin:50px 20px; }
.idx-material-btn .title{ display:inline-block; padding:0px 40px; background:#fff; color:#466BAA; font-size:1.9em; }
.idx-material-btn .more , .idx-material-btn .slogan{ color:#fff; line-height:1; }
.idx-material-btn .more{ position:absolute; top:-16px; left:0; }
.idx-material-btn .slogan{ position:absolute; bottom:-16px; right:0; font-size:1.2em; }

.idx-material-btn:hover .title{ background:#FAC200; color:#466BAA; }
.idx-material-btn:hover .more , .idx-material-btn:hover .slogan{ color:#FAC200; }



/*首頁-活動公告*/
.announecment-box.idx{ padding-bottom:45px; margin-bottom:60px; }
.announecment-box.idx:hover{ background:transparent; }
.idx-announcement-intro{ color:#666; margin-top:20px; }

.announecment-box.idx:hover .announecment-box-list li.title{ color:#2B2B2B; }
.announecment-box.idx:hover .announecment-box-list li.info{ color:#666; }






/*首頁-product work 連結-圖片在左*/
.link-box{ position:relative; padding-right:48%; margin-bottom:30px; }
.link-photo img{ display:block; max-width:100%; height:auto; }
.link-content{ position:absolute; top:0; right:0; width:48%; }

.link-heading , .link-spec-title , .link-spec , .link-more-line{ padding-left:7%; padding-right:7%; }
.link-heading{ border-bottom:1px solid #E5E5E5; margin-bottom:20px; }
.link-heading .title{ font-size:2.3em; color:#0E429B; margin-right:10px; }
.link-heading .subtitle{ font-size:0.9em; color:#808080; }

.link-spec-title{ font-size:1.3em; color:#466BAA; font-weight:600; }
.link-spec{ font-size:0.95em; color:#808080; margin-bottom:30px; font-weight:600; }

.link-more-line{ position:relative; background:#466BAA; padding-top:20px; padding-bottom:20px; }
.link-more-line:before{
	position:absolute;
	top:0;
	left:-60px;
	width:60px;
	height:100%;
	content:"";
	background:#466BAA
}
.link-more-btn{ display:inline-block; position:relative; z-index:2; font-size:1.1em; }
.link-more-btn a{ display:block; border:1px solid #fff; color:#fff; padding:6px 100px; }
.link-more-btn a:hover{ border-color:#FAC200; color:#FAC200; }


/*首頁-product work 連結-圖片在右*/
.link-box.right{ padding-left:48%; padding-right:0; }

.link-box.right .link-content{ left:0; right:auto; }
.link-box.right .link-more-line:before{ left:auto; right:-60px; }




/*首頁-活動剪影*/
.idx-albums-list{ display:flex; flex-wrap:wrap; }
.idx-albums-list li{ width:23.5%; margin-right:2%; text-align:center; margin-bottom:45px; }
.idx-albums-list li:nth-child(4n){ margin-right:0;}



/*首頁-最新作品*/
.idx-works-list{ display:flex; flex-wrap:wrap; }
.idx-works-list li{ width:18.4%; margin-right:2%; text-align:center; margin-bottom:45px; }
.idx-works-list li:nth-child(5n){ margin-right:0;}




/*首頁-fb區塊*/
.idx-fb{
	/*min-height:420px;*/
	margin-bottom:60px;
	/*padding:80px 60px 30px 60px;
	background:url(../images/idx-fb.png) no-repeat center;
	background-size:cover;*/
}
.idx-fb img{ display:block; max-width:100%; height:auto; }
/*.idx-fb .photo{ max-width:350px; }
.idx-fb .content .title{ color:#fff; font-size:2.4em; font-weight:600; }
.idx-fb .content .spec{ color:#fff; font-size:1.1em;  }
.idx-fb .icon-fb{ position:absolute; top:0; left:0; }
@media (max-width:768px) {
	.idx-fb{ padding-left:20px; padding-right:20px; }
	.idx-fb .content .title{ font-size:1.5em;}
}
@media (max-width:480px) {
	.idx-fb{ padding-left:10px; padding-right:10px; }
	.idx-fb .photo{ max-width:250px; }
	.idx-fb .content .title{ font-size:1.1em; margin-bottom:10px; }
	.idx-fb .content .spec{ font-size:0.95em;  }
}*/


/*首頁-news區塊*/
.idx-news{ margin-bottom:60px; }
.idx-news-headline{ position:relative; padding-left:20px; margin-bottom:30px; }
.idx-news-headline:before , .idx-news-headline:after{
	position:absolute;
	left:0px;
	width:8px;
	height:50%;
	content:"";
}
.idx-news-headline:before{ top:0; background:#0E429B; }
.idx-news-headline:after{ bottom:0; background:#FAC200; }
.idx-news-headline .title , .idx-news-headline .subtitle{ display:block; line-height:1.5; }
.idx-news-headline .title{ color:#0E429B; font-size:1.6em; }
.idx-news-headline .subtitle{ color:#FAC200; }

.idx-news-list{ margin-bottom:30px; }
.idx-news-list:before, .idx-news-list:after{ display:table; content:" " }
.idx-news-list:after{ clear:both }

.idx-news-box{ float:left; width:42%; margin:10px 4%; }
.idx-news-box:nth-child(2) , .idx-news-box:nth-child(3){ float:right; }
.idx-news-box:nth-child(2){ margin-bottom:40px;}

.idx-news-box .item-thumb-frame .item-thumb{ padding-bottom:55%; }
.idx-news-box:nth-child(2) .item-thumb-frame , .idx-news-box:nth-child(3) .item-thumb-frame{ display:none; }

.news-date , .news-title a , .news-more-btn a{ color:#466BAA; }
.news-title a:hover{ color:#FAC200; }
.news-more-btn a:hover{ color:#333; }

.news-date{ font-size:0.85em; margin-bottom:5px; }
.news-title{ font-size:1.1em; font-weight:600; margin:5px 0; }
.news-spec{ font-size:0.9em; color:#989898; height:106px; overflow:hidden; margin-bottom:5px; }

.news-more{ text-align:right; }
.news-more-btn{ position:relative; display:inline-block; font-size:0.9em; }
.news-more-btn:before{ content:">"; color:#466BAA; }
.news-more-btn:hover:before{ color:#333; }

.idx-news-link{ text-align:center; }
.news-link-btn{ display:inline-block;}
.news-link-btn a{ display:block; padding:6px 40px; background:#466BAA; color:#fff; font-size:1.1em; }
.news-link-btn a:hover{ background:#0E429B; }


/*首頁-常見問題*/
.idx-faq{
	/*height:600px;*/
	margin-bottom:60px;
	/*padding:30px 60px 30px 60px;
	background:url(../images/idx-faq.png) no-repeat center;
	background-size:cover;
	text-align:center; */
}
.idx-faq img{ display:block; max-width:100%; height:auto; }
/*.idx-faq-link{ display:inline-block; }
.idx-faq .photo{ display:inline-block; max-width:200px; }
.idx-faq-title{ color:#466BAA; font-weight:bolder; font-size:1.6em; border:5px solid #466BAA; padding:0 60px; }
.idx-faq-link:hover .idx-faq-title{ color:#0E429B; border-color:#0E429B; }
@media (max-width:768px) {
	.idx-faq{ height:350px; } 
	.idx-faq .photo{ display:inline-block; max-width:150px; }
	.idx-faq-title{ font-size:1.2em; padding:0 20px; }
}*/


/*首頁-聯絡我們*/
.idx-contact{ margin-top:30px; margin-bottom:60px; }

.idx-contact-flex{ display:flex; flex-wrap:wrap; }
.idx-contact-form-wrap{ width:48%; margin-right:4%; }
.idx-map{ width:48%; }

.contact-form{ position:relative; }
.contact-form:before, .contact-form:after{ display:table; content:" " }
.contact-form:after{ clear:both }

.contact-form .control-input , .contact-form textarea{ width:100%; padding:15px; }

.contact-form-line{ position:relative; float:left; width:100%; padding-left:14px; margin-bottom:10px;}
.contact-form-line:nth-child(1) , .contact-form-line:nth-child(6){margin-bottom:5px; }
.contact-form-line:nth-child(2){ width:48%; margin-right:4%; }
.contact-form-line:nth-child(3){ width:48%; }
.contact-form-line:nth-child(4){ width:48%; margin-right:4%; }
.contact-form-line:nth-child(5){ width:48%; }

.require-txt{ position:absolute; top:10px; left:0; }
.require-txt.required{ width:6px; height:6px; background:#EC6C00; border-radius:50%; }
.require-txt span{ display:none; }

.contact-form-heading{ font-weight:600; color:#004DA0; font-size:1.1em; }

.contact-form-btn{
	position:relative;
	padding:6px 30px 6px 30px;
	background:#466BAA;
	border:1px solid #466BAA;
	color:#fff;
	font-size:0.95em;
	cursor:pointer;
}
.contact-form-btn:hover{ background:#0E429B; border-color:#0E429B; }

.verification-img , .verification-txt{ display:inline-block; vertical-align:middle; }
.contact-btn-line{ position:absolute; bottom:0; right:0; padding:0; width:auto; }





/* ======================================
	12. 關於我們
====================================================================================================================================== */






/* ======================================
	13. 最新消息
====================================================================================================================================== */
.post-item{
	padding:15px;
	margin-bottom:30px;
	border:1px solid #ccc;
	border-radius:10px;
}
.post-title .date , .post-title .name{ display:inline-block; font-size:1.05em; font-weight:600; }
.post-title .date{ color:#666; margin-right:5px; }
.post-title .name a{ color:#466BAA; }
.post-title .name a:hover { color:#fff; }
.post-content{ color:#666; height:84px; overflow:hidden; margin-bottom:5px; }

.post-more{ text-align:right; }
.post-more-btn{ display:inline-block; color:#466BAA; }
.post-more-btn:hover{ color:#0E429B; }
.post-more-btn:after{ content:">"}
.post-more-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;
}

.post-item:hover{ background:rgba(70,107,170, 0.6); }
.post-item:hover .name a , .post-item:hover .post-more-btn , .post-item:hover .post-title .date { color:#fff; }


/*最新消息詳細*/
.news-view-date{ color:#666; font-size:14px; text-align:center; }







/* ======================================
	14. 活動公告
====================================================================================================================================== */
.announecment-list{margin:30px auto 30px auto;}
.announecment-box{ margin-bottom:15px;border-bottom:1px solid #ccc; }
.announecment-box a{ display:block; padding:10px; }

.announecment-flex{ display:flex; flex-wrap:wrap; align-items:center; }
.announecment-left{ width:200px; margin-right:30px; }
.announecment-right{ width:calc(100% - 230px); }

.announecment-box-list{ margin:10px 0; }
.announecment-box-list li{ margin-bottom:5px; }
.announecment-box-list li.note span{ display:inline-block; vertical-align:top; color:#666; }
.announecment-box-list li.title{ font-weight:600; font-size:17px; margin-top:10px; color:#466BAA; }
.announecment-box-list li.info{ font-size:14px; color:#666; }
.announecment-box-list li.intro{ font-size:12px; color:#999; margin-top:10px; }

.announecment-box:hover{ background:rgba(70,107,170, 0.6); }
.announecment-box:hover .announecment-box-list li.title{ color:#fff; }
.announecment-box:hover .announecment-box-list li.info{ color:#333; }
.announecment-box:hover .announecment-box-list li.intro{ color:rgba(255,255,255,0.5); }




/* ======================================
	15. 商品介紹
====================================================================================================================================== */
/*左側分類*/
.side-nav{ position:relative; margin-bottom:60px; }
.side-nav li{ position:relative; }
.side-nav li a{ 
	position:relative;
	display:block;
	color:#333;
	background:#F6F6F6;
	font-size:16px;
	padding:7px 25px 7px 15px;
	border-bottom:1px solid rgba(114,69,94, 0.1);
}

/*有下一層選項的項目設定*/
ul.mtree  li.mtree-node > a:before{
	position:absolute;
	z-index:4;
	top:20px;
	right:10px;
	width:4px;
	height:4px;
	border-right:2px solid #333;
	border-top:2px solid #333;
	margin-top:-2px;
	content:"";

	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

/*第一層*/
.side-nav > li > a{ }
.side-nav > li:last-child > a{ }
.side-nav > li > a:after{
	position:absolute;
	top:50%;
	left:0px; 
	width:10px; 
	height:10px;
	margin-top:-4px;
	margin-left:-5px;
	content:"";
	background:#FAC200;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	opacity:0;
}
.side-nav > li > a:hover{ background:#466BAA; color:#fff; }
.side-nav > li > a:hover:after{ opacity:1; }
.side-nav > li.mtree-node > a:hover:before{ border-right-color:#fff; border-top-color:#fff; }

.side-nav > li.mtree-open > a{ background:#004DA0; color:#fff; }
.side-nav > li.mtree-node.mtree-open > a:before{ border-right-color:#fff; border-top-color:#fff; }
.side-nav > li.mtree-node.mtree-open > a:after{ opacity:1; }


/*第二層*/
.side-nav li li a{ font-size:14px; padding-left:32px; background:rgba(250,194,0, 0.4); }
.side-nav li li a:hover{background:rgba(0,77,160,0.5); color:#fff; }
ul.mtree li li.mtree-node > a:before{ top:18px; }
.side-nav li li.mtree-node > a:hover:before{ border-right-color:#fff; border-top-color:#fff; }

.side-nav li li.mtree-open > a{ background:#FAC200; color:#fff; }
.side-nav li li.mtree-node.mtree-open > a:before{ border-right-color:#fff; border-top-color:#fff; }


/*第三層*/
.side-nav li li li a{ font-size:14px; padding-left:45px; background:rgba(250,194,0, 0.2);}





.product-box{
	border-bottom:1px solid #466BAA;
	padding:0px 20px 30px 20px;
	margin-bottom:30px;
}

.product-box a{ display:block; display:flex; flex-wrap:wrap; width:100%; height:100%; padding:10px;  }
.product-box a .item-thumb-frame{ width:30%; margin-right:5%;  }
.product-box a .item-thumb-frame .item-thumb { padding-bottom: 70%; }

.product-content{ width:65%;}
.product-box a .product-title{ color:#666; font-weight:600; font-size:1.1em; margin-bottom:10px; }
.product-box a .product-spec{ color:#666; font-size:0.95em; }

.product-box a:hover{ background:rgba(70,107,170, 0.6); }
.product-box a:hover .product-title{ color:#fff; }



/*商品介紹詳細頁*/
.product-view-top-area{ padding-bottom:45px; border-bottom:1px solid #ccc; margin-bottom:30px; }
.product-view-top-area{ display:flex; flex-wrap:wrap; }

.product-view-left{ width:45%; margin-right:5%; }
.product-view-right{ width:50%; } 

.sync-slide .item .item-thumb-frame .item-thumb { padding-bottom: 70%; }
.sync-thum .item .item-thumb-frame .item-thumb { padding-bottom: 70%; }
.sync-slide{ margin-bottom:10px; }
.sync-thum .item{ cursor:pointer; }
.sync-thum .item:hvoer{ opacity:0.9; }

.product-view-name{ color:#466BAA; font-size:1.2em; margin-bottom:15px; font-weight:600; }




/* ======================================
	16. 作品欣賞
====================================================================================================================================== */
.works-list{ display:flex; flex-wrap:wrap; }
.works-list li{ width:23.5%; margin-right:2%; text-align:center; margin-bottom:45px; }
.works-list li:nth-child(4n){ margin-right:0;}


.works-box .item-thumb-frame{ border-radius:5px; overflow:hidden; border:1px solid #ccc; background-color:#fff; }
.works-box .item-thumb-frame .item-thumb { padding-bottom:100%; }
.works-title{ color:rgba(70,107,170, 1); font-weight:600; margin:10px 0; line-height:1.5; }

.works-box a{ display:block; width:100%; height:100%; padding:10px 10px 10px 10px; border-radius:5px; overflow:hidden;  }
.works-box a:hover{ background:rgba(70,107,170, 0.6); }
.works-box a:hover .works-title{ color:#fff; }





/* ======================================
	17. 活動剪影
====================================================================================================================================== */



/* ======================================
	18. 常見問題
====================================================================================================================================== */
.qa-box{ padding-bottom:15px; margin-bottom:30px; border-bottom:1px solid #ccc; }
.qa-title , .qa-content{ position:relative; padding-left:30px; }
.qa-title:before , .qa-content:before{
	position:absolute;
	top:-1px;
	left:0;
}
.qa-title:before{ content:"Q :";}
.qa-content:before{ content:"A :";}
.qa-title{ color:#466BAA; font-weight:600; }

.qa-content img{ max-width:100%; height:auto; }



/* ======================================
	19. 文章分享
====================================================================================================================================== */
.article-item{ position:relative; margin-bottom:25px; border-bottom:1px solid #ccc; padding:0 5px 10px 5px; }
.article-item a{ display:block; padding:10px; }
.article-download{ text-align:right; margin:5px 0; }
.article-download a{
	position:relative;
	display:inline-block;
	padding:0 20px 0 38px;
	font-size:12px; 
	color:#666;
	border:1px solid #ccc;
	text-align:center;
	margin-left:10px;
}
.article-download a:before{
	position:absolute;
	top:50%;
	left:20px;
	width:12px;
	height:12px;
	margin-top:-6px;
	content:"";
	background-color:#666;
	background-image:url(../images/icon-download.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
.article-download a:hover{ color:#466BAA; border-color:#466BAA; }
.article-download a:hover:before{ background-color:#466BAA; }

.article-title{ display:block; font-weight:600; color:#466BAA; }

.article-introduction{ font-size:14px; color:#666; max-height:50px; overflow:hidden; margin:5px 0 10px 0; }

.article-item > a:hover{ background:rgba(70,107,170, 0.6); }
.article-item > a:hover .article-title{ color:#fff; }




/* ======================================
	20. 檔案下載
====================================================================================================================================== */
.download-introduction{ font-size:14px; color:#666; margin:5px 0 10px 0; }



/* ======================================
	21. 相關連結
====================================================================================================================================== */
.link-list{ display:flex; flex-wrap:wrap; margin:45px 0; }
.link-list li{ width:18.4%; margin-right:2%; }
.link-list li:nth-child(5n){ margin-right:0;}

.link-item{ 
	padding:10px;
	margin-bottom:45px;
	
	transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;

}
.link-photo{ border:1px solid #ccc; background:#fff; }
.link-name{ margin:10px 0 5px 0; padding:0 5px; text-align:center; }
.link-item:hover{
	background:rgba(70,107,170, 0.6);
	transform: translateY(-5px);
    -o-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
}
.link-item:hover .link-name{ color:#fff; }



/* ======================================
	22. 聯絡我們
====================================================================================================================================== */
.contact-logo , .contact-info-list{ max-width:450px; margin:0 auto; }
.contact-logo img{ max-width:100%; height:auto; }
.footer-info-list{ margin-bottom:30px; }
.contact-info-list , .contact-info-list a{ color:#466BAA; }
.contact-info-list a:hover{ color:#0E429B; }

.contact-form-wrap , .map{ max-width:600px; margin:30px auto; }











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

@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);
  }
}