@charset "utf-8";

/* ======================================
	Category:
	01. 表單元件基本設定
	02. 其他基本設定
	03. 分頁設定
	04. 套用owl.carousel之輪播基本設定
	05. 回頂端按紐
	
	06. 頁首header設定
	07. 小螢幕時選單設定
	08. 頁尾footer設定
	19. 輪播banner設定
	10. 全頁面共同設定
	11. 首頁
	12. 公司介紹
	
	13. 產品特性
	14. 產品介紹
	15. 最新消息
	16. 聯絡我們
	
	----
	
	其他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-color: #fff;
    border: 1px solid #ccc;
	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); font-size:0.95em;}
input::-moz-placeholder , select::-moz-placeholder , textarea::-moz-placeholder { color: rgba(51,51,51, 0.8); font-size:0.95em;}
input::-ms-input-placeholder , select::-ms-input-placeholder , textarea::-ms-input-placeholder { color: rgba(51,51,51, 0.8); font-size:0.95em;}
input::-moz-placeholder , select::-moz-placeholder , textarea::-moz-placeholder { color: rgba(51,51,51, 0.8); font-size:0.95em;}
select{
	padding-right:25px;
	appearance:none;
    -webkit-appearance: none;
    -moz-appearance: none;
	background-image:url(../images/selt-arrow.png);
	background-repeat: no-repeat;
	background-position: right 10px center;
}
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; font-family:"微軟正黑體", "新細明體", Arial;}

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

/*方形圖設定*/
.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 45px 0;
	font-size:14px;
	text-align:center;
	color:#333;
}
.page a , .page span{
	display:inline-block;
	border: 1px solid #333;
	border-bottom-width:3px;
	color:#333;
	background:#fff;
	padding: 6px 6px;
	margin:0 3px;
	font-size:0.8rem;
	font-weight:600;
	line-height:1.1;
	min-width:30px;
	border-radius:2px 2px 0 0;
}
.page span{ background:#FF9933; color:#fff;  border-color:#FF9933; border-radius:2px; }
.page a:hover{ border-color:#009999; color:#009999; }




/* ======================================
	04. 套用owl.carousel之輪播基本設定
====================================================================================================================================== */
/* 輪播-左右按鈕 */
.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:4px;
	height:20px;
	content:"";
	background:#1568B2;
	
	/*border-radius:2px;*/
}
.owl-nav-style .owl-prev:before , .owl-nav-style .owl-next:after{ bottom:50%; margin-bottom:-16px; }
.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before{ top:50%; margin-top:-16px; }
.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-nav-style .owl-prev.disabled , .owl-nav-style .owl-next.disabled{ opacity:0.5; cursor:default; }
.owl-nav-style .owl-prev.disabled:before , .owl-nav-style .owl-next.disabled:before{ border-color:#353535; }
.owl-nav-style .owl-prev.disabled:after{ border-right-color:#353535; }
.owl-nav-style .owl-next.disabled:after{ border-left-color:#353535; }*/


/* 輪播-底下圓圈 */
.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:16px;
	height:16px;
	margin:0px 5px;
	background:#fff;
	border:1px solid #1568B2;
	display:block;
	-webkit-backface-visibility:visible;
	transition:opacity .5s ease , width .5s ease;
	boder-radius:5px;
	border-radius:35px;
}
.owl-dots-style .owl-dots .owl-dot:hover span{ background:rgba(21,104,178, 0.7); }
.owl-dots-style .owl-dots .owl-dot.active span{ background:#1568B2; }
/*.owl-dots-style .owl-dots .owl-dot.active span{ width:40px;}*/
@media (max-width:960px) { 
	.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; } 
}




/* ======================================
	05. 回頂端按紐
====================================================================================================================================== */
.scrolltop{
	position: fixed;
	z-index:999;
    right:10px;
    bottom:150px;
    display:block;
	width:50px;
	height:50px;
    cursor:pointer;
	background:#989898;
	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:#FF9933; }
.scrolltop.show{ opacity:1; }




/* ======================================
	06. 頁首header設定
====================================================================================================================================== */

.header-top-flex{ display:flex; flex-wrap:wrap; align-items:center; margin:30px 0; }
.header-top-flex .flex-col01{ width:30%; }
.header-top-flex .flex-col02{ width:70%; }
.header-top-flex .flex-col03{ display:none; }


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


/*語系*/
.quicklink-list{ display:flex; flex-wrap:wrap;  justify-content:flex-end; }
.quicklink-list li{ margin:5px 0 5px 10px; }

.quicklink-item{ 
	position:relative;
	width:80px; 
	height:24px; 
	background:url(../images/web-02.png) no-repeat right center;
	background-size:cover;
	border-color:#ccc;
	border-width:1px 0 1px 1px;
	border-style:solid;
	
	transition:transform 0.5s ease;
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 0.5s ease;
	-o-transition:transform 0.5s ease; 
}
.quicklink-item:before{
	position:absolute;
	top:0;
	left:0;
	width:10px;
	height:100%;
	content:"";
}
.quicklink-list li:nth-child(6n-5) .quicklink-item:before{
	background:linear-gradient(left,#E74091 , #ED95BD);
	background:-moz-linear-gradient(left,#E74091 , #ED95BD);
	background:-webkit-linear-gradient(left,#E74091 , #ED95BD);
	background:-o-linear-gradient(left,#E74091 , #ED95BD);
	background:-ms-linear-gradient(left,#E74091 , #ED95BD);
}
.quicklink-list li:nth-child(6n-4) .quicklink-item:before{
	background:linear-gradient(left,#F39E4A , #F8C898);
	background:-moz-linear-gradient(left,#F39E4A , #F8C898);
	background:-webkit-linear-gradient(left,#F39E4A , #F8C898);
	background:-o-linear-gradient(left,#F39E4A , #F8C898);
	background:-ms-linear-gradient(left,#F39E4A , #F8C898);
}  
.quicklink-list li:nth-child(6n-3) .quicklink-item:before{
	background:linear-gradient(left,#5899D0 , #A6D9E2);
	background:-moz-linear-gradient(left,#5899D0 , #A6D9E2);
	background:-webkit-linear-gradient(left,#5899D0 , #A6D9E2);
	background:-o-linear-gradient(left,#5899D0 , #A6D9E2);
	background:-ms-linear-gradient(left,#5899D0 , #A6D9E2);
} 
.quicklink-list li:nth-child(6n-2) .quicklink-item:before{
	background:linear-gradient(left,#92C861 , #CBE4C1);
	background:-moz-linear-gradient(left,#92C861 , #CBE4C1);
	background:-webkit-linear-gradient(left,#92C861 , #CBE4C1);
	background:-o-linear-gradient(left,#92C861 , #CBE4C1);
	background:-ms-linear-gradient(left,#92C861 , #CBE4C1);
}
.quicklink-list li:nth-child(6n-1) .quicklink-item:before{
	background:linear-gradient(left,#F6D618 , #f8e25d);
	background:-moz-linear-gradient(left,#F6D618 , #f8e25d);
	background:-webkit-linear-gradient(left,#F6D618 , #f8e25d);
	background:-o-linear-gradient(left,#F6D618 , #f8e25d);
	background:-ms-linear-gradient(left,#F6D618 , #f8e25d);
} 
.quicklink-list li:nth-child(6n) .quicklink-item:before{
	background:linear-gradient(left,#25DF93 , #7CEBBE);
	background:-moz-linear-gradient(left,#25DF93 , #7CEBBE);
	background:-webkit-linear-gradient(left,#25DF93 , #7CEBBE);
	background:-o-linear-gradient(left,#25DF93 , #7CEBBE);
	background:-ms-linear-gradient(left,#25DF93 , #7CEBBE);
}
.quicklink-item a{ 
	position:relative; 
	display:block; 
	padding:0px 2px 0px 16px; 
	font-size:12px; 
	font-weight:600;
}
.quicklink-list li:nth-child(6n-5) .quicklink-item:hover a{ color:#E74091; }
.quicklink-list li:nth-child(6n-4) .quicklink-item:hover a{ color:#F39E4A; }
.quicklink-list li:nth-child(6n-3) .quicklink-item:hover a{ color:#5899D0; }
.quicklink-list li:nth-child(6n-2) .quicklink-item:hover a{ color:#92C861; }
.quicklink-list li:nth-child(6n-1) .quicklink-item:hover a{ color:#F6D618; }
.quicklink-list li:nth-child(6n) .quicklink-item:hover a{ color:#25DF93; }



.header-bottom-area{
	position:relative;
	z-index:2;
	-webkit-box-shadow:0 0 0 2px #ffffff,0 0 0 3px #ccc,0px 3px 4px rgba(0, 0 , 0 , 0.4);
	-moz-box-shadow:0 0 0 2px #ffffff,0 0 0 3px #ccc,0px 3px 4px rgba(0, 0 , 0 , 0.4);
	-o-box-shadow:0 0 0 2px #ffffff,0 0 0 3px #ccc,0px 3px 4px rgba(0, 0 , 0 , 0.4);
	box-shadow:0 0 0 2px #ffffff,0 0 0 3px #ccc,0px 3px 4px rgba(0, 0 , 0 , 0.4);

	background:linear-gradient(top,#DCDCDC , #EEEEEE );
	background:-moz-linear-gradient(top,#DCDCDC , #EEEEEE );
	background:-webkit-linear-gradient(top,#DCDCDC , #EEEEEE );
	background:-o-linear-gradient(top,#DCDCDC , #EEEEEE );
	background:-ms-linear-gradient(top,#DCDCDC , #EEEEEE );
}

.header-bottom-flex{ display:flex; flex-wrap:wrap; align-items:center; }
.header-bottom-flex .flex-left{ width:calc(100% - 300px); }
.header-bottom-flex .flex-right{ width:250px; margin-left:50px; }


/*選單*/
.menu-list{ display:flex; flex-wrap:wrap; }
.menu-list li{ position:relative; display:block; width:20%; padding:7px 10px 5px 10px; }
.menu-list li:before{
	position:absolute;
	top:50%;
	right:0;
	width:1px;
	height:16px;
	margin-top:-8px;
	content:"";
	background:#666;
}
.menu-list li:first-child:after{
	position:absolute;
	top:50%;
	left:0;
	width:1px;
	height:16px;
	margin-top:-8px;
	content:"";
	background:#666;
}
.menu-list li a{ 
	display:block; 
	text-align:center;
	padding:5px 2px 3px 2px;
	font-weight:600;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}

.menu-list li a:hover{
	color:#333;
	background:linear-gradient(top,#EEEEEE , #BEBEBE);
	background:-moz-linear-gradient(top,#EEEEEE , #BEBEBE);
	background:-webkit-linear-gradient(top,#EEEEEE , #BEBEBE);
	background:-o-linear-gradient(top,#EEEEEE , #BEBEBE);
	background:-ms-linear-gradient(top,#EEEEEE , #BEBEBE);
}



/*搜尋區塊*/
.search-box{
	position:relative;
	width:250px;
	background:#fff;
	border:1px solid #ccc;
	
	overflow:hidden;
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
}
.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-btn{
	position:absolute; 
	top:1px; 
	right:2px;
	background:transparent;
	cursor:pointer;
	padding:0 5px;
}
.search-btn:hover{ border:1px solid transparent; }





/* ======================================
	07. 小螢幕時選單設定
====================================================================================================================================== */
/*小螢幕時選單鈕*/
.menu-trigger{ position:relative; display:none; z-index:99; width:36px; height:36px; margin:7px 0 7px auto; }
.menu-trigger-icon , .menu-trigger-txt{}
.menu-trigger-icon{
	position:relative;
	width:36px;
	height:36px;
	border:1px solid #333;
	border-radius:3px;
}
.menu-trigger-icon:before , .menu-trigger-icon:after{
	position:absolute;
	left:12%;
	width:76%;
	height:3px;
	margin-top:-2px;
	content:"";
	background:#333;
	border-radius:1px;
	
	transition:transform 0.5s ease;
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 0.5s ease;
	-o-transition:transform 0.5s ease;
}
.menu-trigger-icon:before{ top:25%; }
.menu-trigger-icon:after{ top:75%; }

.menu-trigger-icon .iocn-line{
	position:absolute;
	top:50%;
	left:12%;
	width:76%;
	height:3px;
	margin-top:-2px;
	background:#333;
	border-radius:1px;
}
.menu-trigger.opened .menu-trigger-icon { background:#fff; border:1px solid #FD29EC; }
.menu-trigger.opened .menu-trigger-icon:before{
	background:#FD29EC;
	-webkit-transform: rotate(-45deg) translate(-7px, 7px) ;
    transform: rotate(-45deg) translate(-7px, 7px) ;
}
.menu-trigger.opened .menu-trigger-icon:after{
	background:#FD29EC;
	-webkit-transform: rotate(45deg) translate(-5px, -5px) ;
    transform: rotate(45deg) translate(-5px, -5px) ;
}
.menu-trigger.opened .menu-trigger-icon .iocn-line{ opacity:0; }
.menu-trigger-txt{ color:#fff; font-weight:bolder; font-size:1.2em; }



/*小螢幕時選單*/
.menu-toggle-area{
	display:none;
	position:fixed;
	z-index:99;
	top:0;
	bottom:0;
	left:-280px;
	width: 280px;
	height:100%;
	height:100vh;
	background:linear-gradient(45deg,#EEEEEE , #fff);
	background:-moz-linear-gradient(top,#EEEEEE , #fff);
	background:-webkit-linear-gradient(top,#EEEEEE , #fff);
	background:-o-linear-gradient(top,#EEEEEE , #fff);
	background:-ms-linear-gradient(top,#EEEEEE , #fff);
	/*border-right:4px solid #fff;*/
	
	overflow-y: auto;
	overflow-x: hidden;
	
	box-shadow: 0 4px 4px 1px rgba(0,0,0,.2);
	
	-webkit-transition:transform 0.5s ease;
	-moz-transition:transform 10.5s ease;
	transition:transform 0.5s ease;
}
.menu-toggle-area.opened{ 
	-webkit-transform: translateX(280px);
	-moz-transform: translateX(280px);
	-ms-transform: translateX(280px);
	-o-transform: translateX(280px);
	transform: translateX(280px);
}





/*mobile選單*/
.menu-toggle-content{ display:none; padding-bottom:20px; }
.menu-mobile-list{}
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ color:#333; display:block; font-size:14px; padding:17px 30px 17px 10px; border-bottom:1px solid #ccc; line-height:1.4; } 
.menu-mobile-list > li:first-child a{ border-top:1px solid #ccc; }
.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:20px;
	right:15px;
	width:11px;
	height:10px;
	cursor:pointer;
}
.submenu-button:before{
	position:absolute;
	z-index:4;
	top:0;
	right:0;
	width:6px;
	height:6px;
	border-right:2px solid #333; 
	border-bottom:2px solid #333; 
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

.menu-mobile-list > li.current{ /*background:rgba(255,255,255,0.1);*/ color:#FD29EC; }
.menu-mobile-list > li.current > a{ /*background:rgba(255,255,255,1);*/ color:#FD29EC; }
.menu-mobile-list > li.current > a .submenu-button:before{ border-right-color:#FD29EC; border-bottom-color:#FD29EC; }

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













/* ======================================
	08. 頁尾footer設定
====================================================================================================================================== */
.footer{ background:#999999; }

.footer-info-list{ text-align:center; margin:30px 0; }
.footer-info-list li , .footer-info-list li a{ color:#fff; font-size:14px; }
.footer-info-list li a:hover{ opactiy:0.8; }
.footer-info-list li span{ display:inline-block; margin:0 5px; }

.web-copyright{ position:relative; text-align:center; padding:5px 0; }
.web-copyright span{ font-size:14px; color:#fff; }
.web-designer{
	position:absolute;
	top:4px;
	right:0;
	font-size:12px;
	opacity:0.7;
}
.web-designer , .web-designer a{ color:#fff; }
.web-designer a:hover{ opacity:0.8; }












/* ======================================
	09. 輪播banner設定
====================================================================================================================================== */









/* ======================================
	10. 全頁面共同設定
====================================================================================================================================== */

.page-flex{ display:flex; flex-wrap:wrap; margin-top:20px; }
.page-flex-left , .page-flex-right{ padding:10px 0; }
.page-flex-left{ width:300px; margin-right:30px; }
.page-flex-right{ width:calc( 100% - 330px ); border-left:1px dashed #ccc; padding-left:30px; padding-bottom:60px;  }


.side-area{ margin-bottom:45px; }
.side-area:last-child{ margin-bottom:90px; }



/*左側分類標題*/
.side-nav-heading{ position:relative; margin-bottom:10px; border-bottom:2px solid #666; padding:7px 0; }
.side-nav-heading .title{ display:inline-block; font-size:20px; font-weight:600; padding-left:5px; color:#333; line-height:1.2; }


/*左側分類*/
.side-nav{ position:relative; }
.side-nav li{ position:relative; }
.side-nav li a{ position:relative; display:block; color:#333; padding:8px 10px 8px 18px; border-bottom:1px dashed #ccc; line-height:1.2; color:#333; }

/*有下一層選項的項目設定*/
ul.mtree  li.mtree-node > a:before , ul.mtree  li.mtree-node > a:after{
	position:absolute;
	z-index:4;
	top:50%;
	content:"";
	background:rgba(0,153,153, 0.8);
	transition:All 0.3s ease;
	-webkit-transition:All 0.3s ease;
	-moz-transition:All 0.3s ease;
	-o-transition:All 0.3s ease;
}
ul.mtree  li.mtree-node > a:before{ right:15px; width:2px; height:12px; margin-top:-6px; }
ul.mtree  li.mtree-node > a:after{ right:10px; width:12px; height:2px; margin-top:-1px; }

/*.side-nav > li.hasul > a{ cursor:default; }*/
.side-nav > li > a{ font-weight:600; color:#009999; }
.side-nav li li{ font-size:14px; }
.side-nav li ul{ margin-bottom:10px; }


.side-nav li a:hover{ color:#BF53B6; }
/*.side-nav > li.hasul > a:hover{ color:#009999; }*/

.side-nav > li:before{
	position:absolute;
	top:14px;
	left:0;
	width:12px; 
	height:8px; 
	content:"";
	background:url(../images/web-06.png) no-repeat right center;
	background-size:cover;
}
.side-nav > li.mtree-node.mtree-open > a:before{
	transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
}
.side-nav > li.mtree-node.mtree-open > a:after{ background:#FF9933; }

.side-nav > li.mtree-node.mtree-open > a{ color:#FF9933; }
.side-nav > li.mtree-node.mtree-open:before{
	background:url(../images/web-10.png) no-repeat right center;
	background-size:cover;
}





/*右側大標*/
.page-headline{ padding:5px 0 5px 0; margin-bottom:30px; }
.page-headline .title{
	position:relative;
	display:block;
	font-size:18px;
	font-weight:600;
	color:#333;
	line-height:1.4;
	border-bottom:3px double #ccc;
	margin-bottom:5px;
	padding:5px 15px;
}
.page-headline .title:before{
	position:absolute;
	top:10%;
    left:0;
    width:7px;
    height:80%;
    content:"";
    background:#FF9933;
}



/*導覽路徑*/
.breadcrumbs{ text-align:right; letter-spacing:0; line-height:1.2; }
.breadcrumbs , .breadcrumbs a{ color:#666; }
.breadcrumbs a:hover{ color:#FF9933; }
.breadcrumbs span{ position:relative; margin-right:0px; font-size:12px; }
.breadcrumbs span:before{ content:"/"; margin-right:3px; }
.breadcrumbs span:first-child:before{ display:none; }




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



/*單張點按放大圖片設定*/
.single-photo{ text-align:center; margin-top:30px; }
.single-photo img{ border:1px solid #ccc; padding:5px; max-width:100%; height:auto; }



/*詳細頁縮圖*/
.thumbnail-list{ display:flex; flex-wrap:wrap; margin:30px 0; }
.thumbnail-list li{ 
	display:inline-block;
	width:99%;
	text-align:center;
	margin:10px 0;
}
.thumbnail-list li a{ display:block; width:100%; }
.thumbnail-list li img{ display:inline-block; max-width:100%; height:auto; border:1px solid #ccc; }
.thumbnail-list li:hover{ opacity:0.8; }

.thumbnail-list.two-cols li{ width:48%; margin-left:1%; margin-right:1%;  }
.thumbnail-list.three-cols li{ width:30%; margin-left:1%; margin-right:1%;  }
.thumbnail-list.four-cols{ text-align:left; }
.thumbnail-list.four-cols li{ width:22%; margin-left:1%; margin-right: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;
	margin:10px; 
	line-height:1;
	font-size:14px;
	line-height:36px;
	font-weight:600;
	width:120px;
	height:36px;
	color:#fff;
	background:url(../images/web-09.png) no-repeat center right;
	background-size:cover;
}
.download-btn .txt{ position:relative; z-index:2; display:block; padding-right:20px; }
.download-btn .txt:before{
	position:absolute;
	z-index:1;
	top:50%;
	right:20px;
	width:16px;
	height:16px;
	margin-left:-8px;
	margin-top:-8px;
	content:"";
	background:url(../images/icon-arrow-bottom.png) no-repeat center;
	background-size:70% 70%;
}
.download-btn:hover{
	color:#fff;
	background:url(../images/web-10.png) no-repeat center right;
	background-size:cover;
}


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

















/* ======================================
	11. 首頁
====================================================================================================================================== */

/*首頁-大標*/
.idx-area-heading{ margin-bottom:30px; }
.idx-area-heading .title , .idx-area-heading .subtitle{ display:block; text-align:center; line-height:1.4; }
.idx-area-heading .title{ font-size:20px; font-weight:600; color:#009999; }
.idx-area-heading .subtitle{ color:rgba(0,153,153, 0.6); font-size:14px;}


/*首頁-最新消息*/
.idx-news-area{ margin:60px 0; }
.idx-news-list{ display:flex; flex-wrap:wrap; border:4px double #ccc; padding:10px; /*padding:30px 30px 0 30px;*/ }
.idx-news-list li{ width:calc( 100% / 3); border-right:1px solid #ccc; padding:20px; }
.idx-news-list li:last-child{ border-right-width:0px; }
.news-item{ }
.news-item a{ display:block; }

.news-item .name{ position:relative; text-align:center; }
.news-item .name .title{ display:block; font-size:18px; font-weight:600; color:#000; line-height:1.4; margin-top:7px; }
.news-item .name .date{ color:#999; font-size:12px; }
.news-item:hover .name .title{ color:#FF9933;}

.news-item .intro{ font-size:14px; height:144px; overflow:hidden; color:#666; margin-top:15px; margin-bottom:0; }



/*首頁-商品介紹*/
.idx-product-area{ margin:60px 0; }

.idx-product-list{ display:flex; flex-wrap:wrap; margin:45px 0; }
.idx-product-list li{ position:relative; width:22%; margin-right:4%; margin-bottom:45px;  }
.idx-product-list li:nth-child(4n){ margin-right:0; }

.idx-product-item a{ position:relative; display:block; }
.idx-product-item .photo{ border:1px solid #999; padding:5px; background:#fff; }
.idx-product-item .name{ text-align:center; font-weight:600; color:#333; padding:0 10px; margin:10px 0; line-height:1.5; }

.idx-product-item a:hover .photo{ border-color:#FF9933; }
.idx-product-item a:hover .name{ color:#FF9933; }



/* ======================================
	12. 公司介紹
====================================================================================================================================== */





/* ======================================
	13. 產品特性
====================================================================================================================================== */
.article-list{}
.article-list li{ border-bottom:1px dashed #ccc; }
.article-list{ margin:30px 0; }
.article-list li{ margin-bottom:20px; }
.article-item{ position:relative; padding-left:15px; font-size:16px; }
.article-item a{ display:block; color:#333; padding:5px 0; font-weight:600; }

.article-item:before{
	position:absolute;
	top:14px;
	left:0;
	width:0px;
	height:0px;
	content:"";
	border-left:6px solid #999;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
}

.article-item:hover a{ color:#FF9933; }
.article-item:hover:before{ border-left-color:#FF9933; }




/* ======================================
	14. 產品介紹
====================================================================================================================================== */
.product-list{ display:flex; flex-wrap:wrap; margin:45px 0; }
.product-list li{ width:44%; margin:0 3% 60px 3%; }

.product-item a{ display:block; text-align:center; }
.product-item a .photo{ margin-bottom:15px; border:1px solid #ccc; padding:10px; }
.product-item a .name{ color:#000; font-size:18px; margin:10px 0; padding:0 10px; font-weight:600; line-height:1.4; }

.product-item a .btn-line{ margin-top:15px; text-align:center; }
.product-item a .more-btn{
	display:inline-block;
	width:80px;
	height:24px;
	line-height:24px;
	font-size:12px;
	color:#fff;
	background:url(../images/web-09.png) no-repeat center right;
	background-size:cover;
	text-align:left;
	padding-left:10px;
}

.product-item a:hover .photo{ opacity:0.8; }
.product-item a:hover .name{ color:#FF9933; }
.product-item a:hover .more-btn{
	color:#fff;
	background:url(../images/web-10.png) no-repeat center right;
	background-size:cover;
}




/*商品詳細*/
.view-video{ /*padding-bottom:30px;*/ margin-bottom:60px; /*border-bottom:1px solid #ccc;*/ }

.product-view-gp{ display: flex; flex-wrap:wrap; margin-top:30px; margin-bottom:60px; padding:0 20px; }
.product-view-gp-left{ width:54%; margin-right:6%; }
.product-view-gp-right{ width:40%; }

.pro-view-photos{}
.pro-view-photos .sync-slide{ position:relative; z-index:3; background:#fff; border:1px solid #ccc; margin-bottom:25px; background:#fff; }

.pro-view-photos .sync-thum{ padding:5px 0; }
.pro-view-photos .sync-thum .owl-item{ position:relative; border:1px solid #ccc; cursor:pointer; }

.pro-view-photos .sync-slide .item-thumb-frame .item-thumb{ padding-bottom:80%; }
.pro-view-photos .sync-thum .item-thumb-frame .item-thumb{ padding-bottom:60%; }

.pro-view-photos .sync-thum .owl-item.current{ border-color:#FF9900; cursor:default; }


.pro-nav-style .owl-next , .pro-nav-style .owl-prev{ opacity:1; }
.owl-nav-style .owl-prev { left: -40px; }
.owl-nav-style .owl-next{ right: -40px; }
.pro-nav-style .owl-prev:before , .pro-nav-style .owl-prev:after , 
.pro-nav-style .owl-next:before , .pro-nav-style .owl-next:after{ width:3px; background:#333; }

.pro-nav-style .owl-prev:before , .pro-nav-style .owl-next:after{ bottom:50%; margin-bottom:-16px; }
.pro-nav-style .owl-prev:after , .pro-nav-style .owl-next:before{ top:50%; margin-top:-16px; }

.pro-nav-style .owl-prev:hover:before , .pro-nav-style .owl-prev:hover:after , 
.pro-nav-style .owl-next:hover:before , .pro-nav-style .owl-next:hover:after{ background:#FF9900; }

.pro-nav-style .owl-prev.disabled , .pro-nav-style .owl-next.disabled , 
.pro-nav-style .owl-prev.disabled:hover , .pro-nav-style .owl-next.disabled:hover{ opacity:0.2; cursor:default; }

.pro-nav-style .owl-prev.disabled:hover:before , .pro-nav-style .owl-prev.disabled:hover:after , 
.pro-nav-style .owl-next.disabled:hover:before , .pro-nav-style .owl-next.disabled:hover:after{ background:#333; }



/*商品詳細頁-右側簡介標題*/
.pro-view-heading{ position:relative; margin-bottom:15px; border-bottom:2px solid #ccc; }
.pro-view-heading .title{ 
	position:relative;
	display:block; 
	color:#FF9933; 
	padding:4px 5px 5px 5px; 
	font-size:18px; 
	font-weight:600;
	line-height:1.5;
}

.pro-view-editor{ padding:0 5px; margin:15px 0; }


.pro-view-intro-heading{ border-bottom:2px solid #009999; margin-top:30px; }
.pro-view-intro-heading .title{ display:inline-block; padding:2px 10px; font-size:14px; background:#009999; color:#fff; }

.pro-view-intro{ margin-bottom:60px; }

.pro-view-intro-heading + .pro-view-intro{ margin-top:15px; }






/* ======================================
	15. 最新消息
====================================================================================================================================== */
.post-list{ margin:30px 0; }
.post-list li{ margin-bottom:15px; }
.post-item{ position:relative; padding-left:32px; border-bottom:1px dashed #ccc; }
.post-item a{ position:relative; display:block; line-height:1.4; padding:12px 150px 12px 0; }
.post-item:before{
	position:absolute;
	top:17px;
	left:0;
	width:18px; 
	height:12px; 
	content:"";
	background:url(../images/web-15.png) no-repeat right center;
	background-size:cover;
}
.post-item a .title{ font-weight:600; }
.post-item a .date{ position:absolute; bottom:13px; right:5px; font-size:12px; color:#666; }

.post-item a:hover{
	background:linear-gradient(left,transparent , rgba(255,153,51, 0.5) );
	background:-moz-linear-gradient(left,transparent , rgba(255,153,51, 0.5) );
	background:-webkit-linear-gradient(left,transparent , rgba(255,153,51, 0.5) );
	background:-o-linear-gradient(left,transparent , rgba(255,153,51, 0.5) );
	background:-ms-linear-gradient(left,transparent , rgba(255,153,51, 0.5) );
}
.post-item:hover:before{
	background:url(../images/web-16.png) no-repeat right center;
	background-size:cover;
}
.post-item a:hover .title{ color:#FF9933; }















/* ======================================
	16. 聯絡我們
====================================================================================================================================== */
.map{ margin:45px 0 30px 0; }
.map iframe{ height:300px; }

.contact-info-area{ margin-bottom:60px; }
.contact-info-list{ }
.contact-info-list.border-style{ border:1px solid #666; padding:0 5px; }
.contact-info-list li{ 
	display: flex; 
	flex-wrap:wrap;
	margin-bottom:15px;
	/*padding-left:140px;*/ 
	min-height:25px; 
	line-height:1.4; 
	letter-spacing:0;
	font-size:14px;
	
}
.contact-info-list li.full-width{ padding-left:0; }
.contact-info-list li , .side-nav-heading li a{ }
.contact-info-list li a:hover{ opacity:0.8; }
.contact-info-list li .icon{ width:24px; height:24px; margin-right:5px; }
.contact-info-list li .icon img{ display:block; max-width:100%; height:auto; }
.contact-info-list li .title{ position:relative; /*width:100px;*/ word-wrap: break-word; word-break: break-all; /*margin-right:3px;*/ }
.contact-info-list li .title:after{ /*position:absolute; top:0; right:-8px;*/ content:"："; }

/*.contact-info-list li{ 
	position:relative; 
	display:block;
	margin-bottom:35px;
	padding-left:140px; 
	min-height:25px; 
	line-height:1.4; 
	letter-spacing:0;
	font-size:14px;
	
}
.contact-info-list li.full-width{ padding-left:0; }
.contact-info-list li , .side-nav-heading li a{ }
.contact-info-list li a:hover{ opacity:0.8; }
.contact-info-list li .icon{ position:absolute; top:-1px; left:0; width:24px; height:24px; }
.contact-info-list li .icon img{ display:block; max-width:100%; height:auto; }
.contact-info-list li .title{ position:absolute; top:-1px; left:30px; width:110px; }
.contact-info-list li .title:after{ position:absolute; top:0; right:0; content:"：";}*/


.contact-form-area{ }
.contact-form-box{ margin-bottom:60px; }
.contact-form-note{ margin-bottom:5px; font-size:16px; color:#231815; }

/* == 表單 套件組合 ======== */
.input-group {
	display: flex; 
	flex-wrap:wrap;
	align-items:center;
	width:100%; 
	color:#555555;
	margin-bottom:0;
	padding-right:10px;
	margin-bottom:15px;
}
.input-group.half-width{ width:50%; } 

.require-mark{ color:red; font-size:0.85em; }
.input-title{
	align-self: baseline;
	width: 100%;
	font-size:16px;
	text-align: left;
	padding-top:8px;
	color:#333;
	height:31px;
}

.input-control {
	width: 100%;
	/*width:calc(100% - 95px);*/
    min-height: 2em;
}
.input-group input[type=text] {
    width: 100%;
    display: block;
	border:1px solid #ccc;
	background:#fff;
}
.input-group input[type=file] { border:1px solid transparent; }

.input-remind{ font-size:0.8em; color:#666; }

.input-group textarea{ width: 100%; border:1px solid #ccc; background:#fff; }

.form-bt-line{ width:100%; text-align:center; }
.fbtn-confirm{
	position:relative;
	display:inline-block;
	z-index:1;
	padding:9px 45px 5px 45px;
	color:#fff;
	border:1px solid transparent;
	background:#009999;
	font-weight:600;
	font-size:16px;
	cursor:pointer;
}
.fbtn-confirm:hover{ background:#FF9933; color:#fff; }