@charset "utf-8";

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


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


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


.idx-wrapper{ background:url(../images/web-05.png) no-repeat center; background-size:cover; }


.header{ background:url(../images/web-02.png) no-repeat center; background-size:cover; }

.idx-logo{ position:relativ; z-index:5; max-width:250px; margin:30px 0 50px 0; }
.idx-logo img{ display:block; max-width:100%; height:auto; }



.idx-banner{ position:relative; }
.idx-banner img{ display:block; max-width:100%; height:auto; }
.idx-banner:before{
	position:absolute;
	top:-108px;
	left:50%;
	width:1920px;
	height:108px;
	margin-left:-960px;
	content:"";
	background:url(../images/web-03.png) no-repeat center bottom;
	background-size:cover;
}
.idx-banner:after{
	position:absolute;
	bottom:-108px;
	left:50%;
	width:1920px;
	height:108px;
	margin-left:-960px;
	content:"";
	background:url(../images/web-04.png) no-repeat center top;
	background-size:cover;
}


.idx-footer{ margin-top:60px; }

.idx-info-list{ margin-top:25px; }
.idx-info-list li{ position:relative; font-size:1.1em; }
.idx-info-list li , .idx-info-list li a{ color:#fff; }
.idx-info-list li a:hover{ text-decoration:underline; }
.idx-info-list li span{ display:inline-block; }


.enter-btn{ position:absolute; top:0; right:0; width:300px; }
.enter-btn a{ display:block; position:relative; z-index:1;  }
.enter-btn a img{ display:block; max-width:100%; height:auto; }
.enter-btn a:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
	background:url(../images/web-18.png) no-repeat center;
	background-size:cover;
	opacity:0;
	transition:opacity 0.5s ease;
	-webkit-transition:opacity 0.5s ease;
	-moz-transition:opacity 0.5s ease;
	-o-transition:opacity 0.5s ease;
}
.enter-btn a:hover:before{ opacity:0.5; }




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


/*page 分頁*/
.page{
	margin: 45px 0 10px 0;
	font-size:0.75rem;
	text-align:center;
	color:#ffff;
}
.page a , .page span{
	display:inline-block;
	border: 1px solid #fff;
	padding: 8px 8px;
	margin:0 2px;
	font-size:0.8rem;
	line-height:1.1;
	min-width:26px;
}
.page span{ background:#e55c00; color:#fff; border-color:#fff;}

.page a{ color:#fff; }
.page a:hover{ background:#fff; color: #70361E; 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:-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-nav-style .owl-prev:hover:before , .owl-nav-style .owl-prev:hover:after , 
.owl-nav-style .owl-next:hover:before , .owl-nav-style .owl-next:hover:after{ background:#e55c00; }


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


/*回頂端按紐*/
.backtop-btn{
	position: fixed;
	z-index: 99;
	bottom: 60px;
	right: 15px;
	width: 45px;
	height: 45px;
	color: #fff;
	text-align: center;
	background:#70361E;
	
	border:3px solid rgba(255,255,255,0.5);
	padding:10px;
	cursor: pointer;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;

	opacity:0;
	transition:opacity 0.5s ease;
	-webkit-transition:opacity 0.5s ease;
	-moz-transition:opacity 0.5s ease;
	-o-transition:opacity 0.5s ease;
}
.backtop-btn img{ display:block; max-width:100%; height:auto; }
.backtop-btn:focus , .backtop-btn:hover{ background:#70361E; color:#fff; }
.backtop-btn.show{ opacity:1; }
.backtop-btn:hover{ border-color:rgba(255,255,255,1); background:#e55c00; }


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

.page-wrapper{ position:relative;  background:#70361E; }
.page-wrapper:before{
	position:absolute;
	top:0;
	left:0;
	width:30%;
	height:100%;
	content:"";
	background:url(../images/web-07.png) repeat center;
}


.page-wrapper-content{
	position:relative;
	z-index:2;
	-webkit-box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) , 2px 2px 11px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) , 2px 2px 11px rgba(0, 0, 0, 0.3);
	-o-box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) , 2px 2px 11px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 11px rgba(0, 0, 0, 0.3) , 2px 2px 11px rgba(0, 0, 0, 0.3);
}
.page-wrapper-content:before{
	position:absolute;
	z-index:0;
	top:0;
	right:-60px;
	width:60px;
	height:100%;
	content:"";
	background:url(../images/web-17.png) repeat-y top left;
}


.page-wrapper-content-left{
	position:relative;
	z-index:4;
	width:20%; 
	width:300px; 
	background:url(../images/web-21.png) repeat-y center;
	padding-bottom:200px;
	
	-webkit-box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.4);
	box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.4);
}
.page-wrapper-content-right{ 
	position:relative;
	z-index:3;
	width:80%; 
	width: calc(100% - 300px); 
	background:#70361E;
	border-top:20px solid #310F10;
	padding-bottom:180px;
}



.logo-area{ position:relative; background:url(../images/web-09.png) no-repeat bottom left; background-size:contain; padding:18px 10px; }

.logo{ max-width:170px; margin:36px auto 20px auto; }
.logo img{ display:block; max-width:100%; height:auto; }

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


.logo-info{ text-align:center; margin:20px auto 36px auto; }
.logo-info span{ display:block; color:#220D01; font-weight:600; }


.menu-trigger{
	display:none;
	position:absolute;
	z-index:20;
	bottom:15px;
	right:10px;
	height:55px;
	padding-left:55px;
	padding-right:5px;
	background:#70361E;
	
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
}

.menu-trigger-icon{ 
	position:absolute;
	top:0;
	left:0;
	width:55px;
	height:55px;
}
.menu-trigger-icon:before , .menu-trigger-icon:after , .menu-trigger-dec{
	position:absolute;
	left:18%;
	width:64%;
	height:3px;
	margin-top:-2px;
	content:"";
	background:#fff;
}
.menu-trigger-icon:before{
	top:25%;
	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:after{
	top:75%;
	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-dec{ top:50%; }

.menu-trigger-txt{ 
	display:inline-block; 
	line-height:1.3; 
	text-transform:uppercase; 
	font-size:1.1em; 
	color:#fff; 
	/*font-weight:600;*/ 
	padding-top:5px;
	letter-spacing:0;
}

.menu-trigger.opened { background:#e55c00; }
.menu-trigger.opened .menu-trigger-icon:before{
	-webkit-transform: rotate(-45deg) translate(-10px, 10px) ;
    transform: rotate(-45deg) translate(-10px, 10px) ;
}
.menu-trigger.opened .menu-trigger-icon:after{
	-webkit-transform: rotate(45deg) translate(-9px, -9px) ;
    transform: rotate(45deg) translate(-9px, -9px) ;
}
.menu-trigger.opened .menu-trigger-dec{ opacity:0; }





/*mobile選單*/
.menu-toggle-content{ 
	display:none;
	width:100%;
	padding-bottom:30px; 
	background:url(../images/web-02.png) no-repeat bottom left; 
	background-size:contain;
	background:#70361E;
}
.menu-mobile-list{ margin-top:5px; }
.menu-mobile-list li{ position:relative; display:block; }
.menu-mobile-list li a{ 
	color:#fff; 
	display:block;
	font-size:1rem;
	padding:10px 20px 10px 15px;
	border-bottom:1px solid #fff;
}

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


/*第一層*/
.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:3px solid #fff; 
	border-bottom:3px 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:#ffd421; }
.menu-mobile-list li.current > a{ color:#ffd421; }
.menu-mobile-list li.current > a .submenu-button:before{ border-right-color:#ffd421; border-bottom-color:#ffd421; }

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






/*商品分類*/
.side-procate-area{ height:100%; background:rgba(255,255,255,0.4); padding:20px 15px; }

.side-nav{/* margin-bottom:60px;*/ }
ul.mtree li{ position:relative; }
ul.mtree li a{ position:relative; display:block; padding:5px 30px 5px 25px; }


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

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

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


.side-nav li a{ color:#333; font-size:1.1em; }
.side-nav li a:hover{ color:#e55c00;}
.side-nav li.mtree-node:hover > a:before{ border-right-color:#e55c00; border-top-color:#e55c00; }

.side-nav > li{ }
.side-nav > li:before{
	position:absolute;
	z-index:2;
	top:11px;
	left:0;
	width:16px;
	height:16px;
	content:"";
	background:url(../images/web-11.png) no-repeat center;
	background-size:cover;
	/*opacity:0;*/
}
.side-nav > li > a{ color:#4C1D09; font-weight:600; }

.side-nav li ul{ margin-bottom:5px; }

.side-nav li.mtree-active > a{ color:#8F1E33; }
.side-nav > li.mtree-active:before { opacity:1; }
ul.mtree li.mtree-active.mtree-node > a:before{ border-right-color:#8F1E33; border-top-color:#8F1E33; }
/*.side-nav li.active > a{ background:rgba(255,255,255,0.5); color:#141F3F; }
ul.mtree li.active.mtree-node > a:before{ border-right-color:transparent; border-bottom-color:transparent; }*/

.side-nav li.mtree-open > a{ color:#8F1E33; }
.side-nav > li.mtree-open:before { opacity:1; }
.side-nav li.mtree-node.mtree-open > a:before{ border-right-color:#8F1E33; border-top-color:#8F1E33; }






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

/*跑馬燈*/
.ad-marquee{ background:rgba(255,255,255,0.1); color:#fff; font-size:1.1em; font-weight:600; padding:10px; line-height:1; }

.menu-list{ text-align:center; margin:30px 0 60px 0;  }
.menu-list li{ display:inline-block; vertical-align:middle; width:30%; }
.menu-list li a{ 
	display:block;
	max-width:160px;
	margin-left:auto;
	margin-right:auto;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
.menu-list li a img{ display:block; max-width:100%; height:auto; }
.menu-list li a:hover{
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-o-transform:scale(1.05);
	-ms-transform:scale(1.05);
	transform:scale(1.05);
}



/*頁尾*/
.footer{ position:absolute; bottom:0; right:0; width:100%; background:rgba(0,0,0,0.2); padding:30px 20px 20px 20px; }
.footer , .footer a{ color:#fff; }
.footer a:hover{ text-decoration:underline; }

.footer-info-list{ text-align:center; }
.footer-info-list li{ /*font-size:0.85em;*/ }

.web-designer{ text-align:right; font-size:0.75em; margin-top:5px; }



/*瀏覽人數*/
.count-area{}
.count-title{ color:#70361E; font-weight:600; font-size:0.8em; }
.count{ 
	display:inline-block;
	min-height:20px;
	padding:1px 4px;
	background:#fff;
	
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}
.count img{ float:left; }

.desktop-ount-area.count-area{
	position:absolute;
	z-index:10;
	bottom:20px;
	left:0;
	width:100%; text-align:center; 
}
.mobile-ount-area.count-area{
	display:none;
	text-align:center;
	margin-top:20px;
}
.mobile-ount-area.count-area .count-title{ color:#fff; }


.main{ padding:0 40px; min-height:300px; }



/*大標*/
.page-headline{ margin:30px 0 30px 0; }
.page-headline .title{ 
	position:relative; 
	display:block; 
	color:#fff; 
	padding:0 35px; 
	border-bottom:2px solid #fff;
	font-size:1.4em;
	font-weight:600;
	line-height:1.4; 
}
.page-headline .title:before{
	position:absolute;
	top:-8px;
	left:-5px;
	width:30px;
	height:50px;
	content:"";
	background:url(../images/web-15.png) no-repeat center;
	background-size:cover;
}
.page-headline .title:after{
	position:absolute;
	bottom:-9px;
	right:-5px;
	width:30px;
	height:15px;
	content:"";
	background:url(../images/web-16.png) no-repeat center;
	background-size:cover;
}




/*導覽路徑*/
.breadcrumbs{
	position:relative;
	font-size:0.7em;
	line-height:1.2;
	margin:5px 0;
	text-align:right;
	padding-right:30px;
	/*opacity:0.8;*/
	/*text-align:right;*/
}
.breadcrumbs , .breadcrumbs a{ color:#eee; }
.breadcrumbs a:hover{ text-decoration:underline; color:#fff; }
.breadcrumbs span{ position:relative; /*display:inline-block;*/ margin-right:0px;}
.breadcrumbs span:after{ content:"/"; margin-left:5px; font-size:10px; }
.breadcrumbs span:last-child:after{display:none;}
.breadcrumbs span:first-child{ padding-left:10px;}
.breadcrumbs span:first-child:before{
	position:absolute;
	top:8px;
	left:0;
	width:4px;
	height:4px;
	content:"";
	background:#fff;
	
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}



/*分類*/
.category-list{ position:relative; z-index:2; margin:10px 0 40px 0; text-align:center; }
.category-list li{ display:inline-block; margin:10px 20px; max-width:220px; }
.category-list li a{ 
	position:relative;
	display:block;
	padding:4px 5px 4px 25px; 
	font-size:1em;
	line-height:1.3;
	text-align:center;
	color:#fff;
	border-bottom:2px solid transparent;
}
.category-list li a:before{
	position:absolute;
	top:7px;
	left:5px;
	width:16px;
	height:16px;
	content:"";
	background:url(../images/web-31.png) no-repeat center;
	background-size:cover;l
}
.category-list li a:after{
	position:absolute;
	bottom:-7px;
	left:50%;
	width:0;
	height:0;
	margin-left:-7px;
	content:"";
	border-top:7px solid #fff;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	opacity:0;
}
.category-list li a:hover , .category-list li.active a{ color:#fff; border-bottom-color:#fff; }
.category-list li.active a:after{ opacity:1; }
/*.category-list li a:hover:before{ background:rgba(143,30,51, 0.9); }*/
/*.category-list li.active a{ color:rgba(143,30,51, 0.9); border-bottom-color:rgba(143,30,51, 0.9); cursor:default; }
.category-list li.active a:before{ background:rgba(143,30,51, 0.9); }*/




/*編輯區塊*/
.edit-area{ margin:10px 0 30px 0; color:#fff; /*background:rgba(255,255,255,0.05);*/ }



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


/* 檔案下載鈕 & 返回按鈕*/
.page-widget{ margin:30px 0; text-align:center; }

.download-btn , .pageback-btn{
	display:inline-block; 
	padding:5px 20px 5px 20px;
	margin:20px;
	color:#70361E;
	background:#fff;
	border:1px solid #fff;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}

.download-btn .txt ,  .pageback-btn .txt{
	position:relative;
	display:inline-block;  
	line-height:1;
	padding-left:14px;
}
.download-btn .txt:before{
	position:absolute;
	z-index:2;
	top:50%;
	left:0;
	width:0;
	height:0;
	content:"";
	margin-top:-5px;
	border-right:5px solid transparent;
	border-top:8px solid #70361E;
	border-left:5px solid  transparent;
}
.pageback-btn .txt:before{
	position:absolute;
	z-index:2;
	top:50%;
	left:0;
	width:0;
	height:0;
	content:"";
	margin-top:-5px;
	border-right:8px solid #70361E;
	border-top:5px solid transparent;
	border-bottom:5px solid  transparent;
}

.download-btn:hover , .pageback-btn:hover{ background:#e55c00; color:#fff; }
.download-btn:hover .txt:before{ border-top-color:#fff; }
.pageback-btn:hover .txt:before{ border-right-color:#fff; }





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



/*首頁*/
.product-list{ padding-right:20px; }
.product-item{ 
	position:relative;
	width:22%;
	margin-right:4%;
	margin-bottom:45px;
	
	text-align:center;
}
.product-item:nth-child(4n){ margin-right:0; }
.product-photo{ 
	border:5px solid #fff; 
	background:#fff; 
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
/*.product-photo a{ display:block; border:1px solid #eee; }*/

.product-title{ width:90%; margin:10px auto 5px auto; padding:5px; font-size:1.1em; font-weight:600; }
.product-title a{ display:block; color:#fff; }


.product-item:hover .product-title a{ text-decoration:underline; color:#fff; }
.product-item:hover .product-photo{ 
	/*border-color:#e55c00;*/
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	-o-transform:scale(1.05);
	-ms-transform:scale(1.05);
	transform:scale(1.05);
}




/*首頁-聯絡我們*/
.idx-contact-gp{ padding-right:20px; margin-bottom:30px; }
.idx-map{ width:35%; }
.idx-contac-box{ width:65%; position:relative; /*background:#E8CDA6;*/ padding:0 10px; /*margin:20px 0;*/ overflow:hidden; }
.idx-contac-box img{ display:block; max-width:100%; height:auto; }
/*.idx-contac-box:before{
	position:absolute;
	z-index:0;
	bottom:0;
	right:0;
	width:360px;
	height:240px;
	content:"";
	background:url(../images/web-30.png) no-repeat top left; 
	background-size:contain;
	opacity:0.3;
}*/

.idx-contac-box .info-title{ 
	position:relative; 
	z-index:2; 
	color:#220D01; 
	font-size:1.8em; 
	font-weight:bolder;
	margin-bottom:10px; 
}
.idx-contac-box .info-list li{ 
	position:relative; 
	z-index:2; 
	font-size:1.1em; 
	font-weight:600;
	padding-left:92px;
	margin-bottom:15px;
	min-height:30px;
}
.idx-contac-box .info-list li .title{ position:absolute; top:0; left:0; }
.idx-contac-box .info-list li , .idx-contac-box .info-list li a{ color:#220D01; }
.idx-contac-box .info-list li a:hover{ color:#e55c00; }



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

.pro-view-photos{ position:relative; }

.pro-view-photos .sync-slide{  margin-bottom:20px; background:#fff; }
.pro-view-photos .sync-thum{ margin:10px 0; }
.pro-view-photos .sync-thum .owl-item{ cursor:pointer; background:#fff; border:3px solid #fff;}
.pro-view-photos .sync-thum .owl-item.current{ border-color:#e55c00; cursor:default; }
.pro-view-photos .sync-thum .owl-item:hover{  border-color:#ffd421; }
.pro-view-photos .sync-thum.owl-nav-style .owl-prev { left: -32px; }
.pro-view-photos .sync-thum.owl-nav-style .owl-next{ right: -30px; }

.product-view-title{
	position:relative;
	padding:10px 0; 
	margin-bottom:10px; 
	color:#fff;
	font-size:1.4em;
	font-weight:bolder;
	padding-left:40px;
}
.product-view-title:before{
	position:absolute;
	z-index:2;
	top:16px;
	left:0;
	width:32px;
	height:32px;
	content:"";
	background:url(../images/web-31.png) no-repeat center;
	background-size:cover;
}

.product-view-intro{ 
	padding:30px 10px; 
	margin:30px 0 10px 0; 
	border-top:2px solid rgba(255,255,255,0.3); 
	border-bottom:2px solid rgba(255,255,255,0.3); 
	color:#fff;
	
	-ms-border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-o-bborder-radius:10px;
	border-radius:10px;
}






/*聯絡我們*/
.contact-gp{ margin:5px auto 90px auto; }
.contact-gp .map{ width:30%; position:relative; /*order:2;*/ }
.contact-gp .box{ width:70%; position:relative; padding:0 20px; }
.contact-gp .box img{ display:block; max-width:100%; height:auto; }

.contact-gp .box , .contact-gp .box a{ color:#fff; }
.contact-gp .info-list li{ 
	position:relative;
	font-size:1.05em; 
	font-weight:600; 
	margin-bottom:10px;
	 padding-left:90px; 
	 min-height:30px;
 }
.contact-gp .info-list li .title{ position:absolute; top:0; left:0; }



.contact-form-box{ 
	/*padding:30px 50px;*/
	margin-bottom:30px;
}
.contact-form{}

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

/* == 表單 套件組合 ======== */
.input-group { 
	display: table; 
	border-collapse: separate; /*表格屬性，合併框與格*/ 
	width:100%; 
	color:#555555; 
	margin-bottom:10px;
	padding:10px 0;
}
.require-mark{ color:red; font-size:0.85em; }
.input-title{
	display: table-cell;
	min-width: 95px; 
	font-size: 1em;
	text-align: left;
    white-space: nowrap;
	vertical-align:top;
	padding-top:8px;
	color:#fff;
	font-weight:600;
}
.input-control {
    display: table-cell;
	width: 100%;
    min-height: 2em;
}
.input-group input[type=text] {
    width: 100%;
    display: block;
	font-size: 1em;
	border:1px solid #ccc;
}
.input-remind{ font-size:0.8em; color:#666; }

.input-group textarea{ width: 100%; font-size: 1em; }

.form-bt-line{ text-align:left; padding-left:90px; margin-bottom:20px; }
input.fbtn{ font-size:1em; padding: 6px 25px; border-radius:0; margin:0 10px; cursor:pointer; }
input.fbtn-confirm{ background:#fff; color:#70361E; border:2px solid #fff; }
input.fbtn-cancel{ background:#70361E; color:#fff; border:2px solid #fff; }
input.fbtn:hover{ background:#e55c00; color:#fff; }

.sex-box{margin-right:10px;}
.sex-box .ra-sex{display:none;}
.sex-box .title{ 
	display:inline-block; 
	width:30px; 
	height:30px;
	line-height:28px;
	text-align:center; 
	border:1px solid #fff; 
	cursor:pointer;
	border-radius: 3px;
	color:#fff;
}
.sex-box .ra-sex:checked + .title{ background:#e55c00; color:#FFF; border-radius: 3px; }