@charset "utf-8";

body , .wrapper{ color:#333; background:#fff;}


/*a 鏈結字*/
a { color:#333;}
a:hover, a:focus { color:#e27b2a; 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; }


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

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

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


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

/*輪播-左右按鈕*/
.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: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:-12px; }
.owl-nav-style .owl-prev:after , .owl-nav-style .owl-next:before{ top:50%; margin-top:-12px; }
.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:right; padding:0 10px;}
.owl-dots-style .owl-dots .owl-dot { display:inline-block; zoom:1 }
.owl-dots-style .owl-dots .owl-dot span {
	width:15px;
	height:15px;
	margin:0px 7px;
	background:#fff;
	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:#EB6A26; border:3px solid transparent;}
@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; } 
}
 


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


/*回頂端按紐*/
.scrolltop{
	position: fixed;
	z-index: 999;
    right: 15px;
    bottom: 75px;
    display: block;
    cursor: pointer;
	
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 33px;
    padding: 10px 5px;
	opacity:0;
}
.scrolltop img {
    animation: scroll-act1 2.5s infinite;
}
.scrolltop.show{ opacity:1; }

@keyframes scroll-act1{
	0% {
		opacity: 0;
		-webkit-transform: translateY(12px);
		-ms-transform: translateY(12px);
		transform: translateY(12px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0px) scale(1);
		-ms-transform: translateY(0px) scale(1);
		transform: translateY(0px) scale(1);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(-10px) scale(1);
		-ms-transform: translateY(-10px) scale(1);
		transform: translateY(-10px) scale(1);
	}
}


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


/*logo和選單列*/
.header-top-flex{ 
	display: flex; 
	flex-wrap:wrap; 
	align-items:stretch;
	background:#2094E2 url(../images/web-02.png) no-repeat center right;
	background-size:cover;	
}
.header-top-left{ width:460px; margin-right:50px;}
.header-top-right{ position:relative; width:calc( 100% - 510px ); }

.logo{ position:relative; z-index:2; max-width:400px; padding:10px 40px 0 10px; }
.logo img{ display:block; max-width:100%; height:auto; }
.logo:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:100%;
	height:120%;
	content:"";
	
	background:linear-gradient( left ,#006094 , #3E3A39 45% );
	background:-moz-linear-gradient( left ,#006094 , #3E3A39 45% );
	background:-webkit-linear-gradient( left ,#006094 , #3E3A39 45% );
	background:-o-linear-gradient( left ,#006094 , #3E3A39 45% );
	background:-ms-linear-gradient( left ,#006094 , #3E3A39 45% );
	
	-ms-border-radius:0 10px 10px 0;
	-moz-border-radius:0 10px 10px 0;
	-webkit-border-radius:0 10px 10px 0;
	-o-bborder-radius:0 10px 10px 0;
	border-radius:0 10px 10px 0;
	
	-webkit-box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.5);
	box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.5);
}



.menu-list{ display: flex; flex-wrap:wrap; height:100%;  }
.menu-list li{ width:auto; height:100%; margin-left:5px; align-content:center; }
.menu-list li a{
	position:relative;
	display:block;
	height:100%;
	padding:35px 30px 5px 30px;
	line-height:1.2;
	font-weight:600;
	text-align:center;
}
.menu-list li a .menu-title , .menu-list li a .menu-subtitle{ display:block; }
.menu-list li a .menu-title{ color:rgba(255,255,255,1); }
.menu-list li a .menu-subtitle{ color:rgba(255,255,255,0.5); }
.menu-list li a:hover{ background:rgba(52,69,76,0.7); }



/*小螢幕時選單鈕*/
.menu-trigger{ display:none; position:absolute; top:50%; right:20px; margin-top:-22px; }
.menu-trigger-icon , .menu-trigger-txt{ display:inline-block; vertical-align:middle; line-height:1; }
.menu-trigger-icon{
	position:relative;
	width:44px;
	height:44px;
	background:#EEBA4E;
	border:1px solid #fff;

	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
}
.menu-trigger-icon:before , .menu-trigger-icon:after{
	position:absolute;
	left:15%;
	width:70%;
	height:3px;
	margin-top:-2px;
	content:"";
	background:#fff; 
	
	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:15%;
	width:70%;
	height:3px;
	margin-top:-2px;
	background:#fff;
}
.menu-trigger.opened .menu-trigger-icon {}
.menu-trigger.opened .menu-trigger-icon:before{
	background:#fff;
	-webkit-transform: rotate(-45deg) translate(-8px, 8px) ;
    transform: rotate(-45deg) translate(-8px, 8px) ;
}
.menu-trigger.opened .menu-trigger-icon:after{
	background:#fff;
	-webkit-transform: rotate(45deg) translate(-7px, -7px) ;
    transform: rotate(45deg) translate(-7px, -7px) ;
}
.menu-trigger.opened .menu-trigger-icon .iocn-line{ opacity:0; }

.menu-trigger-txt{ color:#fff; font-weight:bolder; font-size:1.2em; }





/*mobile選單*/
.menu-toggle-content{ 
	display:none; 
	padding-top:10px;
	padding-bottom:30px;
	
	background:linear-gradient( right , #363636 , rgba(0,31,69,0.7) );
	background:-moz-linear-gradient( right , #363636 , rgba(0,31,69,0.7) );
	background:-webkit-linear-gradient( right , #363636 , rgba(0,31,69,0.7) );
	background:-o-linear-gradient( right , #363636 , rgba(0,31,69,0.7) );
	background:-ms-linear-gradient( right , #363636 , rgba(0,31,69,0.7) );
}
.menu-mobile-list{ margin:10px 0 0px 0; }
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ 
	color:#fff; 
	display:block;
	font-size:1rem;
	padding:10px 20px 10px 10px;
	border-bottom:1px solid rgba(255,255,255,0.3);
}

.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: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:20px;
	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 #fff; 
	border-bottom:2px solid #fff; 
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}

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



.footer{ position:relative; margin-top:10px; }
.footer:before{
	position:absolute;
	top:-10px;
	left:0;
	width:100%;
	height:10px;
	content:"";
	
	background:linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-moz-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-webkit-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-o-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-ms-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
}

.footer-top-wrap{
	background:linear-gradient( left , #363636 , rgba(0,31,69,0.7) );
	background:-moz-linear-gradient( left , #363636 , rgba(0,31,69,0.7) );
	background:-webkit-linear-gradient( left , #363636 , rgba(0,31,69,0.7) );
	background:-o-linear-gradient( left , #363636 , rgba(0,31,69,0.7) );
	background:-ms-linear-gradient( left , #363636 , rgba(0,31,69,0.7) );
}

.footer-logo { margin:40px auto 20px auto; max-width:400px; padding:0 10px;  }
.footer-logo img{ display:block; max-width:100%; height:auto; }

.footer-info-wrap{ text-align:center; }
.footer-qrcode , .footer-info{ display:inline-block; vertical-align:middle; margin:10px 10px 30px 10px;  } 
.footer-qrcode{ border:1px solid #fff; /* padding:5px; */ max-width:110px; }
.footer-qrcode img{ display:block; max-width:100%; height:auto; }
.footer-info-list{ text-align:left; }
.footer-info-list li{ font-size:14px; }
.footer-info-list li span{ margin-right:9px; }
.footer-info-list li , .footer-info-list li a{ color:#fff; }
.footer-info-list li a:hover{ color:rgba(255,255,255,0.9); }


.footer-bottom-wrap{ text-align:center; padding:10px 0; background:#102238; }
.web-copyright{ font-size:0.9em; color:#fff; }
.web-copyright span{ display:inline-block; }
.web-designer{ position:absolute; bottom:0; right:0; font-size:0.75em; }
.web-designer , .web-designer a{ color:rgba(255,255,255,0.5); }
.web-designer a:hover{ color:rgba(255,255,255,1); }



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


/*主內容*/
.page-main{
	min-height:800px;
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
	background:url(../images/web-12.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F );
}



/*導覽路徑*/
.breadcrumbs-wrap{ 
	margin-bottom:15px;
	background:linear-gradient( left , transparent , #fff );
	background:-moz-linear-gradient( left , transparent , #fff );
	background:-webkit-linear-gradient( left , transparent , #fff );
	background:-o-linear-gradient( left , transparent , #fff );
	background:-ms-linear-gradient( left , transparent , #fff );
}
.breadcrumbs{
	position:relative; 
	line-height:1.4;
	text-align:right;
	letter-spacing:0;
	padding:1px 0;
}
.breadcrumbs , .breadcrumbs a{ color:#223B51; }
.breadcrumbs a:hover{ color:#FF9C43; }
.breadcrumbs span{ margin-right:0px; font-size:12px;}
.breadcrumbs span:after{ content:"/"; margin-left:5px; font-size:0.7em; }
.breadcrumbs span:last-child:after{display:none;}


/*分類*/
.category-area{ margin:10px 0 30px 0; }
.category-list{ display:flex; flex-wrap:wrap; }
.category-list li{ margin:5px 20px 15px 0; width:15%; margin-right:2%; }
.category-list li:nth-child(6n){ margin-right:0; }
.category-list li a{
	position:relative;
	display:block;
	margin-bottom:15px;
	color:#fff;
	font-size:17px;
	padding:8px 15px 6px 15px;
	text-align:center;
	border-top:5px solid #fff;
	
	/*background:linear-gradient( left , rgba(255,255,255,0.2) , rgba(255,255,255,0.2) );
	background:-moz-linear-gradient( left , rgba(255,255,255,0.5) , rgba(255,255,255,0.1) );
	background:-webkit-linear-gradient( left , rgba(255,255,255,0.5) , rgba(255,255,255,0.1) );
	background:-o-linear-gradient( left , rgba(255,255,255,0.5) , rgba(255,255,255,0.1) );
	background:-ms-linear-gradient( left , rgba(255,255,255,0.2) , rgba(255,255,255,0.2) );*/
	
	background:linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-moz-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-webkit-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-o-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-ms-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	
	background:#002F54;
	
	-webkit-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	-o-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	
	overflow:hidden;
}
.category-list li a:before{
	position:absolute;
	top:50%;
	left:0;
	width:0;
	height:0;
	content:"";
	margin-top:-20px;
	border-top: 25px solid transparent;
	border-bottom:20px solid transparent;
	border-left:160px solid rgba(255,255,255,0.1);
	opacity:0;
}

.category-list li.active a , .category-list li a:hover{
	color:#fff;
	background:linear-gradient( left , rgba(255,255,255,0.3) , rgba(255,255,255,0.1) );
	background:-moz-linear-gradient( left , rgba(255,255,255,0.3) , rgba(255,255,255,0.1) );
	background:-webkit-linear-gradient( left , rgba(255,255,255,0.3) , rgba(255,255,255,0.1) );
	background:-o-linear-gradient( left , rgba(255,255,255,0.3) , rgba(255,255,255,0.1) );
	background:-ms-linear-gradient( left , rgba(255,255,255,0.3) , rgba(255,255,255,0.1) );
}
.category-list li.active a:before , .category-list li a:hover:before{ opacity:1; }




/*大標*/
.category-heading{ position:relative;  margin:20px 0 30px 0; border-bottom:5px solid #fff; }
.category-heading .title{ 
	color:#fff; 
	font-weight:600; 
	font-size:28px; 
	text-shadow:0px 0px 10px rgba(255,255,255,0.4) , 0px 0px 10px rgba(255,255,255,0.4), 0px 0px 10px rgba(255,255,255,0.4);
}
.category-heading .subtitle{
	position:absolute;
	top:-30px;
	left:60px;
	color:rgba(255,255,255,0.4);
	font-weight:600;
	font-size:40px;
}


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



/*詳細頁縮圖*/
.thumbnail-area{}
.thumbnail-list{ text-align:center; }
.thumbnail-list li{ display:inline-block;  text-align:center; }
.thumbnail-list li a{ display:inline-block; }
.thumbnail-list li img{ display:block; max-width:100%; height:auto; }
.thumbnail-list li:hover{ opacity:0.8; }

.thumbnail-list.three-cols li{ width:30%; margin:0 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;
	padding:12px 30px 10px 20px;
	margin:10px; 
	line-height:1;
	font-size:0.95em;
	font-weight:600;
	color:#fff;
	border-top:5px solid #fff;
	background:#00487F;
}
.download-btn:before{
	position:absolute;
	z-index:1;
	top:50%;
	right:10px;
	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{ background-color:#EEBA4E; color:#fff; }



/*返回按鈕列*/
.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:#fff; 
	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:url(../images/icon-arrow-left.png) no-repeat center;
	background-size:70% 70%;
}
.pageback-btn:hover span{ color:#EEBA4E; }
.pageback-btn:hover span:before{ background-color:#EEBA4E; }







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





/*首頁-關於我們*/
.idx-about-wrap{
	position:relative;
	min-height:450px;
	padding:70px 700px 20px 5%;
	
	background:url(../images/web-06.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F 50% , #00487F );
	background:url(../images/web-06.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F 50% , #00487F );
	background:url(../images/web-06.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F 50% , #00487F );
	background:url(../images/web-06.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F 50% , #00487F );
	background:url(../images/web-06.png) no-repeat bottom left , linear-gradient( 45deg , #494949 , #000000 , #00487F 50% , #00487F );
}
.idx-about-dec{
	position:absolute;
	top:0;
	right:0;
	width:800px;
	height:450px;
	background:url(../images/web-07.png) no-repeat center right;
	background-size:auto 100%;
}
.idx-about-name{ font-weight:600; color:#fff; font-size:36px; margin-bottom:15px; }
.idx-about-intro{ color:#fff; font-size:18px; line-height:2.2; }
.idx-about-more{
	position:absolute;
	z-index:1;
	bottom:15px;
	left:0;
	width:100%;
	text-align:center;
}
.idx-about-more a{ display:inline-block; color:rgba(255,255,255,0.5); }
.idx-about-more a .title{ position:relative; padding-left:28px; }
.idx-about-more a .title:before{
	position:absolute;
	top:50%;
	left:0;
	width:24px;
	height:24px;
	margin-top:-13px;
	content:"";
	background:#7C7C7C;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.idx-about-more a .title:after{
	position:absolute;
	top:50%;
	left:3px;
	width:10px;
	height:10px;
	margin-top:-7px;
	content:"";
	border-top:3px solid rgba(255,255,255,0.5);
	border-right:3px solid rgba(255,255,255,0.5);
	-webkit-transform: rotate(45deg);
}
.idx-about-more a:hover{ color:#EEBA4E; }
.idx-about-more a:hover .title:before{ background:#EEBA4E; }



/*首頁-聯絡我們*/
.idx-contact-flex{ position:relative; display: flex; flex-wrap:wrap; min-height:300px; margin-top:10px; }
.idx-contact-flex:before{
	position:absolute;
	top:-10px;
	left:0;
	width:100%;
	height:10px;
	content:"";
	
	background:linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-moz-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-webkit-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-o-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
	background:-ms-linear-gradient( left , #494949 , rgba(219,225,225,0.5) , #000000 );
}
.idx-contact-left{ width:30%; text-align:center; padding:30px 0 5px 0; background:url(../images/web-08.png) no-repeat center; background:cover; }
.idx-contact-right{ width:70%; }

.idx-contact-name{ font-weight:600; color:#fff; font-size:36px; margin-bottom:15px; }
.idx-contact-info li{ margin-bottom:30px; font-size:18px; font-weight:600; }
.idx-contact-info li , .idx-contact-info li a{ color:#fff; }
.idx-contact-info li a:hover{ color:#EEBA4E; }
.idx-contact-info span{ display:block; margin:0 auto; line-height:1.4; }
.idx-contact-info span.icon{ max-width:30px; }
.idx-contact-info span.icon img{ display:block; max-width:100%; height:auto; }






/*最新消息*/
.news-item{ 
	border-bottom:1px solid rgba(255,255,255, 0.5); 
	margin-bottom:30px;
}
.news-item a{ 
	display:block;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}
.news-date{ 
	position:relative; 
	display:block;
	width:120px;
	color:rgba(255,255,255, 0.5); 
	font-size:0.85em; 
	padding:10px 25px 4px 10px; 
	line-height:1;
}

.news-name{ 
	position:relative; 
	z-index:2; 
	display:block; 
	color:#fff; 
	font-size:18px; 
	padding:10px 10px;
	font-weight:600;
	
	/*overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;*/
}

.news-item:hover{ border-bottom-color:transparent; }
.news-item a:hover{
	background:rgba(255,255,255,0.5);
	
	-webkit-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	-moz-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	-o-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
}




/*最新消息詳細*/
.news-view-name{
	position:relative;
	text-align:center;
	padding:12px 5px;
}
.news-view-name .title{ 
	display:block; 
	font-weight:600;
	border-bottom:5px solid #fff;
	color:#fff; 
	font-weight:600; 
	font-size:22px;
	padding:5px 0;
	text-shadow:0px 0px 10px rgba(255,255,255,0.4) , 0px 0px 10px rgba(255,255,255,0.4);
}
.news-view-name .date{ display:block; font-size:12px; text-align:right; color:#fff; padding:2px 0; }







/*商品介紹*/
.product-cols-gp{ display: flex; flex-wrap:wrap; margin:30px 0; }
.product-left-side{ width:22%; margin-right:5%; }
.product-right-side{ width:73%; }


.side-nav-heading{ position:relative; border-bottom:5px solid #fff; }
.side-nav-heading .title{
	position:relative; 
	display:block;
	color:#fff; 
	font-weight:600; 
	font-size:28px; 
	text-shadow:0px 0px 10px rgba(255,255,255,0.4) , 0px 0px 10px rgba(255,255,255,0.4), 0px 0px 10px rgba(255,255,255,0.4);
}
.side-nav-heading .subtitle{
	position:absolute;
	top:-30px;
	left:60px;
	color:rgba(255,255,255,0.4);
	font-weight:600;
	font-size:40px;
}





/*左側分類*/
.side-nav{ margin-bottom:60px; border-bottom:10px solid #fff; padding-bottom:10px; }
ul.mtree li{ position:relative; }
ul.mtree li a{ position:relative; display:block; }


/*有下一層選項的項目設定*/
ul.mtree li.mtree-node > a:before{
	position:absolute;
	z-index:4;
	top:21px;
	right:15px;
	width:8px;
	height:8px;
	border-right:2px solid #fff; 
	border-top:2px solid #fff;
	margin-top:-5px;
	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);
}

/*ul.mtree li li a , ul.mtree li li li a{ padding-left:35px;}*/

/*第二層*/
ul.mtree li li a{ padding-left:44px;}

/*第三層*/
ul.mtree li li li a{ padding-left:40px;}

/*第四層*/
ul.mtree li li li li a{ padding-left:54px;}

.side-nav{ padding:5px; }
.side-nav li{ border-top:1px solid rgba(255,255,255,0.5); }
.side-nav li a{ color:#fff; font-size:15px; padding:8px 30px 6px 5px; }
.side-nav > li:first-child{ border-top-width:0px; }
.side-nav li a:hover{
	background:rgba(255,255,255,0.6);
	
	-webkit-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	-moz-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	-o-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
}

.side-nav li.mtree-node:hover > a:before{ /*border-right-color:#444; border-top-color:#444;*/ }

.side-nav > li{ padding:5px 0; }
.side-nav > li > a{ font-size:18px; }
.side-nav li li > a:after{
	position:absolute;
	top:15px;
	left:23px;
	width:8px;
	height:8px;
	content:"";
	border:3px solid #fff;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;

}
.side-nav li ul{}
.side-nav > li > a:hover:after{ background:#0054A7; }

/*.side-nav li.mtree-active > a{ background:rgba(47,47,47,0.5); color:#fff; }
.side-nav > li.mtree-active:before { opacity:1; }
ul.mtree li.mtree-active.mtree-node > a:before{ display:none;  }
ul.mtree li.mtree-active.mtree-node > a:after{ display:block; }*/

.side-nav li.mtree-open{ }
.side-nav li.mtree-open > a{ color:#EEBA4E; }
.side-nav > li.mtree-open:before { opacity:1; }
.side-nav li.mtree-node.mtree-open > a:before{
	top:17px;
	border-right:2px solid #EEBA4E;
	border-top:2px solid #EEBA4E;
	
	-moz-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	-o-transform:rotate(135deg);
	-ms-transform:rotate(135deg);
	transform:rotate(135deg);
}
.side-nav > li.mtree-open > a:after { background:#EEBA4E; }



/*商品分類大標*/
.product-cate-name{
	color:#fff;
	font-weight:600; 
	font-size:22px;
	text-align:center;
	padding:6px 9px;
	margin-bottom:25px;
}


/*商品介紹*/
.product-list{ display: flex; flex-wrap:wrap; }
.product-list li{  position:relative; width:31%; margin-right:3.5%; margin-bottom:60px; }
.product-list li:nth-child(3n){ margin-right:0; }

.product-item{ position:relative; border:2px solid #fff; /*position:relative;  border-bottom:10px solid #0054A7; height:100%;*/ }
.product-item-photo{ position:relative; background:#fff; }
.product-item-photo:before{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:rgba(255,255,255,0.6);
	opacity:0;
}

.product-item-name{ 
	padding:7px; 
	text-align:center; 
}
.product-item-name .title{ display:block; background:#fff; color:#113454; font-weight:600; font-size:18px; }

.product-item-more{
	position:absolute;
	bottom:-35px;
	left:-2px;
	width:calc( 100% + 4px );
	text-align:center;
	background:#fff; 
	opacity:0;
	-webkit-box-shadow: 1px 1px 20px rgba(255, 255, 255, 0.9);
	-moz-box-shadow: 1px 1px 20px rgba(255, 255, 255, 0.9);
	-o-box-shadow: 1px 1px 20px rgba(255, 255, 255, 0.9);
	box-shadow: 1px 1px 20px rgba(255, 255, 255, 0.9);
}
.product-item-more:before{
	position:absolute;
	top:50%;
	left:10%;
	width:80%;
	height:2px;
	margin-top:-1px;
	content:"";
	background:#113454;
}
.product-item-more .title{
	position:relative;
	display:inline-block;
	color:#113454;
	font-size:11px;
	padding:9px 17px;
	background:#fff;
}
.product-item-more .title:before , .product-item-more .title:after{
	position:absolute;
	top:50%;
	width:8px;
	height:8px;
	content:"";
	margin-top:-7px;
	border:2px solid #113454;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.product-item-more .title:before{ left:0; }
.product-item-more .title:after{ right:0; }

.product-item:hover{
	background:#fff;
	
	-webkit-box-shadow: 1px 10px 20px rgba(255, 255, 255, 0.9);
	-moz-box-shadow: 1px 10px 20px rgba(255, 255, 255, 0.9);
	-o-box-shadow: 1px 10px 20px rgba(255, 255, 255, 0.9);
	box-shadow: 1px 10px 20px rgba(255, 255, 255, 0.9);
}
.product-item:hover .product-item-more{ opacity:1; }
.product-item:hover .product-item-photo:before{ opacity:1; }





/*商品詳細*/
.product-view-gp{ display: flex; flex-wrap:wrap; margin-bottom:60px; }
.product-view-gp-left{ width:50%; margin-right:5%; }
.product-view-gp-right{ width:45%; }


.pro-view-photos{ }
.pro-view-photos .sync-slide{ 
	border:2px solid #fff;
	
	-webkit-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
	-o-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
	box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
}
.pro-view-photos .sync-thum{ padding:10px; border:2px solid #fff; }
.pro-view-photos .sync-thum .owl-item{ cursor:pointer; }
.pro-view-photos .sync-thum .owl-item:hover{ opacity:0.4;}
.pro-view-photos .sync-thum .owl-item.current{ border:4px solid #fff; cursor:default; }
.pro-view-photos .sync-thum .owl-item:hover{ }
.pro-view-photos .sync-thum .owl-item.current:hover{ opacity:1; }
.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-name{ 
	padding:20px 0; 
	margin-bottom:20px; 
	color:#fff;
	font-size:24px;
	font-weight:600;
	text-align:center;
}
.product-intro-title{
	position:relative;
	display:block;
	margin-bottom:20px;
	color:#000;
	font-size:17px;
	padding:8px 15px 6px 15px;
	text-align:center;
	border-top:5px solid #fff;
	
	background:linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-moz-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-webkit-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-o-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	background:-ms-linear-gradient( left , #fff , rgba(255,255,255,0.5) );
	
	-webkit-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
	-o-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
	box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5);
}


.product-view-desc-headline{ border-bottom:2px solid #898989; margin-top:30px; margin-bottom:30px; }
.product-view-desc-headline .title{ display:block; padding:8px 20px; text-align:center; max-width:200px; background:#898989; color:#fff; font-size:0.9em; }




/*聯絡我們*/
.contact-gp{ display:flex; flex-wrap:wrap; margin:45px auto 75px auto;  }
.contact-gp-left{ position:relative; width:50%; margin-right:5%; }
.contact-gp-right{ width:45%; }

.contact-heading{
	position:relative;
	display:inline-block;
	margin-bottom:15px;
	color:#fff;
	font-size:17px;
	padding:4px 30px 2px 30px;
	text-align:center;
	/*font-weight:600;*/
	border-top:5px solid #fff;
	
	/*background:linear-gradient( left , rgba(255,255,255,0.2) , rgba(255,255,255,0.1) );
	background:-moz-linear-gradient( left , rgba(255,255,255,0.2) , rgba(255,255,255,0.1) );
	background:-webkit-linear-gradient( left , rgba(255,255,255,0.2) , rgba(255,255,255,0.1) );
	background:-o-linear-gradient( left , rgba(255,255,255,0.2) , rgba(255,255,255,0.1) );
	background:-ms-linear-gradient( left , rgba(255,255,255,0.2) , rgba(255,255,255,0.1) );*/
	
	background:#002F54;
	
	-webkit-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	-o-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
	
	overflow:hidden;
}
.contact-heading:before{
	position:absolute;
	top:50%;
	left:0;
	width:0;
	height:0;
	content:"";
	margin-top:-20px;
	border-top: 20px solid transparent;
	border-bottom:20px solid transparent;
	border-left:130px solid rgba(255,255,255,0.1);
}

.contact-info-list{}
.contact-info-list li{ position:relative; margin-bottom:15px; font-size:1em; padding-left:58px;  }
.contact-info-list li .title{ position:absolute; top:0; left:0; width:55px; }
.contact-info-list li .title:after{ position:absolute; top:0; right:0; content:"：";}
.contact-info-list li , .contact-info-list li a { color:#fff; }
.contact-info-list li a:hover { color:rgba(255,255,255,0.8); }

.contact-form-box{ margin-bottom:45px; }
.contact-form-note{ margin-bottom:15px; font-size:1em; color:#fff; }

.contact-logo{ margin-top:30px; }
.contact-logo img{ display:block; max-width:100%; height:auto; }



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

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

.input-control {
	width: 100%;
	width:calc(100% - 85px);
    min-height: 2em;
}
.input-group input[type=text] {
    width: 100%;
    display: block;
	border:1px solid transparent;
	border-bottom:1px solid #ccc;
}
.input-remind{ font-size:0.8em; color:#fff; }

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

.form-bt-line{ width:100%; text-align:center; }

input.fbtn{
	position:relative;
	padding-right:30px;
	background:transparent;
	border-color:transparent;
	color:#fff;
	font-weight:600;
	font-size:18px;
	cursor:pointer;
}

.fbtn-outset{ position:relative; display:inline-block; }
.fbtn-outset:before{
	position:absolute;
	top:50%;
	right:0;
	width:24px;
	height:24px;
	margin-top:-15px;
	content:"";
	background:#fff;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.fbtn-outset:after{
	position:absolute;
	top:50%;
	right:8px;
	width:10px;
	height:10px;
	margin-top:-9px;
	content:"";
	border-top:3px solid #7C7C7C;
	border-right:3px solid #7C7C7C;
	-webkit-transform: rotate(45deg);
}

.fbtn-outset:hover input.fbtn{ color:#EEBA4E; }
.fbtn-outset:hover:before{ background:#EEBA4E; }
.fbtn-outset:hover:after{ border-top:3px solid #fff; border-right:3px solid #fff; }