@charset "utf-8";

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}


/* <<===begin  reset =======================================================================================>> */
html, body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button,textarea, p, th, td {
  margin: 0;
  padding: 0;
}
img {border: 0;}
:focus {outline: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;/*font-weight: normal;*/}
input, button, textarea,select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  /*line-height: inherit;*/
}

/*purpose To enable resizing for IE */
/*branch For IE6-Win, IE7-Win */
input, button, textarea, select {*font-size: 100%;}
ol, ul, li {list-style: none;}
:link, :visited , ins {text-decoration: none;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block;}

/* <<=== end reset==>> */




/* <<===begin Basic Elements：定義基本元素的樣式 =================================================================>> */
html , body{
	height:100%;
	min-height:100%;
	width:100%;
}

body{
	background:#FFF;
	color:#000000;
	font-family:"微軟正黑體", serif , "新細明體-ExtB";
	font-size:16px;
	line-height:1.8;
	letter-spacing:1px;
}

/*a 鏈結字*/
a { color:#337ab7; text-decoration:none; }
a:hover, a:focus { color:#23527c; text-decoration:none; }
a:focus { outline:none; }


.clearfix:before , .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


h1{font-size:1.2em; margin:20px 0; padding:10px 0;}
h2 , h3{ font-size:1em; margin:20px 0; padding:10px 0;}
p{/*margin:1em 0;*/ padding:10px 0;}

.tc{ text-align:center;}
.tl{ text-align:left;}
.tr{ text-align:right;}


/* <<===begin Basic Layout =================================================================>> */
.wrapper{ 
	background:#ffffff;
	height:auto;
	width:100%;
	min-height:100%;
}

.container{
	position:relative;
	max-width:1280px;
	margin:0 auto;
	padding:0;
	width:80%;
}
.container:before, .container:after{ display:table; content:" " }
.container:after{ clear:both }




/* <<===begin 表單 ===========================================================================>> */
.form{
	color:#332C2B;
	margin:30px auto;
	width:100%;
}

.form-title{
	font-size:1.2em;
	margin-bottom:30px;
	text-align:center;
	width:100%;
}

/*.form .line{margin-bottom:15px;}*/
.input-list{}
.input-list:before, .input-list:after{ display:table; content:" " }
.input-list:after{ clear:both }

.input-list li{
	float:left;
	position:relative;
	margin:0px 0 15px 0;
	padding-left:105px;
	width:100%;
}
.input-list li:last-child{margin-bottom:0px;}

.input-lab{position:absolute; top:2px; left:0; font-size:0.95em;}
.rednote{ display:inline-block; width:8px; color:#F00;}
.lab-title{display:inline-block;}


.btn-line{
	margin:30px 0 0px 0;
	padding-bottom:0;
	text-align:center;
	width:100%;
}


input{
	background: rgba(255,255,255,1);
	border: 1px solid #E3E1E1;
	padding:5px 10px;
	vertical-align:middle;
}

.input-txt , .input-selt{
	background: rgba(255,255,255,1);
	border: 1px solid #E3E1E1;
	padding:2px 10px;
	width:100%;
	line-height:1.5;
	
    transition:All 0.15s ease-out;
	-webkit-transition:All 0.15s ease-out;
	-moz-transition:All 0.15s ease-out;
	-o-transition:All 0.15s ease-out;
	vertical-align:middle;
}

.input-txt:focus , .input-selt:focus { 
	background: rgba(255,255,255,0);
	border-color:#cccccc;
	outline: none;
}

.input-selt{
	border: 1px solid #cccccc;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
	padding:5px 10px;
}
.input-selt:focus { border-color:#999;}

.input-txt::-webkit-input-placeholder { color: rgba(51,44,43, 0.4);}
.input-txt::-moz-placeholder { color: rgba(51,44,43, 0.4);}
.input-txt::-ms-input-placeholder { color: rgba(51,44,43, 0.4);}
.input-txt::-moz-placeholder { color: rgba(51,44,43, 0.4);}


button , input[type="submit"] {
	background:rgba(220,220,220,0.2);
	background:linear-gradient(top , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-moz-linear-gradient(top  , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-webkit-linear-gradient(top  , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-o-linear-gradient(top , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-ms-linear-gradient(top  , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
	padding:2px 1.5em;
	border: 1px solid #CCC;
	vertical-align:middle;
	cursor:pointer;
}

.fm-btn{
	background:rgba(220,220,220,0.2);
	background:linear-gradient(top , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-moz-linear-gradient(top  , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-webkit-linear-gradient(top  , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-o-linear-gradient(top , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	background:-ms-linear-gradient(top  , rgba(255,255,255,0.5) ,rgba(220,220,220,0.5));
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
	
	border: 1px solid #CCC;
	cursor: pointer;
	color:#333;
    padding:5px 1.5em;
	/*line-height:2em;*/
	margin:0px 10px 0 10px;
	vertical-align:middle;
}



.fm-btn:hover , button:hover , input[type="submit"]:hover{
	background: rgba(255,255,255,0.5);
	border: 1px solid #CCC;
	outline: none;
}

input[type="file"]{ border:1px solid transparent;}

.sp-area{display:block; padding:3px 0px 4px 0px;}

.radbtn{vertical-align:middle;}

/* <<===end 表單==>> */




/* <<===begin 表格 ==============================================================================>> */
.tbset{
	border: 1; 
	border-collapse: collapse; /*讓表格間無間隔*/
	/*table-layout:fixed;*//*能改善表格呈現的性能*/
	/*empty-cells:show;*//*能隱藏不必要的干擾因素*/
	/*color:#666666;*/
	/*font-size:16px;*/
	/*letter-spacing:1px;*/
	font-size:0.95em;
	margin:30px 0;
	width:100%;
} 

.tbset a{color:inherit;} 

.tbset a:hover{color:#333;} 

.tbset th{
	font-size:0.9em;
	font-weight:100;
	padding:5px 5px;
	text-align:center;
}

.tbset td{ padding:5px 5px; }

.tbset tr{ border: 1px solid #E6E6E6; }

.tbset thead{ background:#F5F5F5; color:#333; border: 1px solid #E6E6E6;}

/* <<===end 表格==>> */







/* <<===頁面固定樣式 ==============================================================================>> */

/*右側懸浮鈕*/
.side-float-area{
	position:fixed;
	z-index:9;
	right:5px;
	bottom:280px;
	width:35px;
	background:#999;
	padding:10px 2px;
}

.side-float-dicide-line{
	width:75%;
	border-top:1px solid #fff;
	margin:12px auto;
}


.go-cart-box{ text-align:center; color:#fff; font-size:11px; }
.go-cart-box{ display:block; }
.go-cart-box span{ display:block; line-height:1.5; text-align:center; }
.side-float-area .cart-num{ color:#fff; }
/*.side-float-area .check-btn{
	border:1px solid #fff;
	color:#ffffff;
	display:block;
	width:80%;
	margin:5px auto 0 auto;
	padding:1px 0px;
	font-size:10px; 
}
.side-float-area .check-btn:hover{background:#F00; color:#FFF;}*/

.favorite-icon{
	display:block;
	position:relative;
	width:31px;
	height:31px;
}



.gotop-icon{ 
	display:block;
	position:relative;
	width:31px;
	height:31px;
	font-size:11px;
	text-align:center;
	padding-top:15px;
	letter-spacing:0;
	color:#fff;
}
.gotop-icon:before{
	position:absolute;
	top:5px;
	left:50%;
	width:0;
	height:0;
	content:"";
	margin-left:-5px;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:7px solid #fff;
	
}
.gotop-icon:hover , .gotop-icon:focus{ color:#fff; } 



.favorite-wrap{
	position:absolute;
	top:0;
	right:100%;
	width:120px;
	padding:10px 10px;
	background:rgba(102,102,102,0.9);
	visibility: hidden;
	opacity: 0;
}
.favorite-wrap.opened{ opacity:1; visibility: visible; }

.vc_heading{ font-size:1em; color:#fff; font-weight:600; text-align:right;  }
.vc_heading .title , .vc_heading .facorite-close{ display:inline-block; }
.vc_heading .facorite-close{ width:20px; text-align:center; }
.facorite-close , .facorite-close:hover , .facorite-close:focus{ color:#fff; }


.vc_goUp, .vc_goDown { display: block; }
.vc_goUp.isDisabled, .vc_goDown.isDisabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
  cursor: not-allowed;
}
.vc_container { overflow: hidden; }
.vc_list li{ padding: 3px 0; }


.vc_control{ margin-top:5px; }
.vc_control:before, vc_control:after{ display:table; content:" " }
.vc_control:after{ clear:both }

.vc_goUp, .vc_goDown {
	float: left;
	position:relative;
	display: block;
	width: 48%;
	height: 20px;
	background: #fff;
	text-align: center;
	color: #000;
	margin:0 1%;
}
.vc_goUp:before{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	width:5px;
	height:5px;
	margin-top:-2px;
	margin-left:-3px;
	border-right:2px solid #666;
	border-top:2px solid #666;
	
	content:"";
	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.vc_goDown:before{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	width:5px;
	height:5px;
	margin-top:-3px;
	margin-left:-3px;
	border-right:2px solid #666;
	border-bottom:2px solid #666;
	
	content:"";
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.facorite-item{ }
.facorite-item  a{ display:block; position:relative; z-index:1; border:2px solid #fff; }
.facorite-item  a:before{
	position:absolute;
	z-index:2;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	content:"";
	opacity:0;
}
.facorite-title{
	position:absolute;
	z-index:3;
	top:0;
	left:0;
	width:100%;
	height:100%;
	line-height:96px;
	text-align:center;
	color:#fff;
	font-size:0.95em;
	opacity:0;
}
.facorite-item  a:before , .facorite-title{
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}
.facorite-item  a:hover{ border-color:transparent; }
.facorite-item  a:hover:before , .facorite-item  a:hover .facorite-title{ opacity:1; }


.vc_detail{ text-align:center; }
.facorite-all-btn{ display:inline-block; text-decoration:underline; color:#fff; margin-top:15px; font-size:.9em; }

.facorite-all-btn:hover{ color:red; text-decoration:underline; }



/*---------------*/

.site-top{ min-height:60px;}


.center-list{ position:absolute; top:20px; right:300px; }
.center-list li{display:inline-block; margin-left:20px; }
.center-list li a{ display:block; color:#666; font-size:0.9em; padding:5px 0px; line-height:1; }
.center-list li a:hover{color:#333;}
.center-list li a.focus-center-btn{
	padding-left:10px;
	padding-right:10px;
	/*background:rgba(246,108,52,1);*/
	background:#ff3232;
	color:#fff;
	-ms-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-o-bborder-radius:2px;
	border-radius:2px;
}
.center-list li a.focus-center-btn:hover{ background:red; color:#fff; }


.logo{ display:inline-block; margin:8px 0 0px 0; }
.logo img{ width:100%; max-width:80px; height:auto;}


/*共同設定*/
.widget-area{ position:absolute; top:15px; right:0; display:inline-block; text-align:right; }
.social-list , .search-bar , .cart-bar{ display:inline-block; vertical-align:middle; margin-left:7px; line-height:1; }

/*social 按鈕*/
.social-list li{ display:inline-block; margin:0px 2px;}
.social-list li img{  display:block; max-width:32px; }
.social-list li:hover{ opacity:0.8;}


.search-bar{ width:180px; border:1px solid #cccccc; }
/*.search-bar.mobile-search{ display:none; }*/
/*搜尋文字區塊*/
.serach-fm{ position:relative; }
.search-input , .search-btn{ 
	line-height:1; 
	height:32px; 
	border-width:0px;
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
	border:1px solid transparent;
}
.search-input{
	background:#ffffff;
	border-right:1px solid transparent;
	width:100%;
	padding:0 10px;
	font-size:0.95em;
}

/*搜尋按鈕*/
.search-btn{
	position:absolute; 
	top:1px; 
	right:0;
	
	/*border:1px solid #666;
	background:#666;*/
	background:transparent;
	cursor:pointer;
	padding:0 10px;
	opacity:0.6;
}
.search-btn:hover{ opacity:1; border:1px solid transparent; }


.cart-bar{ position:relative; }
.cart-bar-icon img{ display:block; }
.badge{ 
	display: inline-block;
	padding: 3px 5px;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	background:rgba(246,108,52,1);
	border:1px solid rgba(246,108,52,1);
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}

.cart-bar .badge{position:absolute; top:-5px; left:25px; }

.cart-bar:hover a{color:#963437;}
.cart-bar:hover .badge{color:#C95E0E;background-color: #ffffff; border:1px solid #C95E0E;}



/*主選單*/
.menu-line{ position:relative; z-index:9; margin-bottom:10px; text-align:center; }
.nav{ margin-bottom:5px; padding:0px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }

.menu li{ display:inline-block; }
.menu li a{
	color:#333;
	display:block;
	font-size:0.95em;
	height:auto;
	letter-spacing:1px;
	padding:5px 25px;
	width:100%;
}

.nav-trigger{
	display:none;
	width:52px;
	height:50px;
	border-right:1px solid #fff;
	border-left:1px solid #fff;
	padding:15px 12px;
	
	background:#ffb400; 
	/*background:#168fff;*/
}
.nav-trigger-icon{ 
	position:relative; 
	width:100%; 
	height:100%;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
}
.nav-trigger-icon:before{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:2px;
	margin-top:-1px;
	content:"";
	background:#fff;
}
.nav-trigger-txt{ display:none;}


.toggle-trigger , .toggle-wrap{ display:none; }






.header{
	position:fixed;
	top:0;
	top:0;
	left:0;
	width:100%;
	z-index:99;
	background:#fff;
}
.page-top-empty-box{ height:115px; }






/*---------------*/

/*左側商品分類*/
.subnav{
	float:left;
	width:180px;
	margin-bottom:30px;
	background:#fff;
}

/*.side-fixed-content{ overflow:auto;}
#side-fixed{ position:absolute; top:0; left:0; }
#side-fixed.fixed{ position:fixed; top:110px; left:10%;  height:400px; overflow:auto; }*/


/*右側主內容區*/
.main-content{
	float:right;
	min-height:500px;
	margin-bottom:30px;
	padding-bottom:30px;
	padding-left:2%;
	width:80%;
	width:-moz-calc(100% - 180px - 10px);
	width:-webkit-calc(100% - 180px - 10px);
	width:calc(100% - 180px - 10px);
}

/*總寬主內容區*/
.main-full{
	padding-bottom:30px;
	margin-bottom:30px;
}


/*---------------*/

/*公司footer資料*/
.footer{
	background:#F7F7F7;
	color:#666;
	padding:30px 0;
	text-align:center;
}
.footer span{display:inline-block;}
.footer-design{ position:absolute; bottom:0px; right:0; font-size:0.75em; }
.footer , .footer a{color:#666;}
.footer a:hover , .footer a:hover{color:#333;}

.footer-info-list{ position:relative; z-index:2; margin-bottom:20px; }
.footer-info-list li{ margin:5px 0; }
.footer-info-list li span{ display:inline-block; margin:0 6px; font-size:0.8em; }
.footer-info-list li span.mobile-hide{ margin:0 0; }
/*.footer-info-list li span.work-time{ font-size:0.7em; letter-spacing:0px; }*/


/*---------------*/

/*主內容區的標題列*/
.page-header{ position:relative; margin:15px 0 30px 0; }

.page-header:before{
	position:absolute;
	z-index:0;
	bottom:0px;
	left:0;
	content:"";
	background:#ccc;
	height:2px;
	width:100%;
}

/*主內容區的標題列-文字*/
.page-header .title{
	position:relative;
	z-index:10;
	display:inline-block;
	color:#333;
	font-size:1.1em;
	letter-spacing:1px;
	border-bottom:2px solid #999999;
	padding-left:30px;
	padding:6px 0 6px 15px;
}

.page-header .title:after{
	position:absolute;
	z-index:5;
	top:25%;
	left:0px;
	content:"";
	background:#333333;
	height:50%;
	width:4px;
}


/*總寬主內容區的標題無左側直線且置中*/
.full-header.page-header .title:after{display:none;}
.full-header.page-header{text-align:center; }
.full-header.page-header .title{ padding-left:10px; padding-right:10px; }


/*---------------*/

/*單張縮圖*/
.thumbnail{
	/*font-size:0;*/
	text-align:center;
	max-width:60%;
	margin:30px 20%;
}

.thumbnail img{display:block; width:100%;height:auto;}

.thumbnail .info{
	color:#666;
	display:block;
	font-size:0.95em;
	text-align:center;
	margin-top:10px;
}

/*---------------*/

.thumbnail-list{ font-size:0; margin:30px 0;}
.thumbnail-list li{margin:5px 0;}
.thumbnail-list img{display:block; max-width: 100%; max-height: 100%; height:auto;}

/*---------------*/

.page-content{color:#333;margin:30px 0;}
.page-content img{ max-width:100%; height:auto; }

.main-full .page-content{text-align:center;}

/*---------------*/

/*下拉選單之分類*/
.category-area{margin:30px 0 0 0; text-align:left;}

.category{display:inline-block; position:relative; width:auto;}

.category a{ display:inline-block; position:relative; margin-right:18px; color:#666; }
.category a:before{
	position:absolute;
	top:50%;
	right:-9px;
	width:1px;
	height:14px;
	margin-top:-7px;
	content:"";
	background:#666;
}
.category a:last-child:before{ display:none;}
.category a:hover{ color:#701414; }

/*.category-title{
	position:absolute;
	top:-2px;
	left:0px;
	color:#333;
	display:block;
	font-size:1em;
	padding:3px 10px 3px 0px;
	text-align:left;
}

.category-title:before{
	position:absolute;
	top:25%;
	right:0px;
	width:2px;
	height:50%;
	content:"";
	background:#808080;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}

.category-selt{
	background:#ffffff;
	border:1px solid #CCC;
	color:#666;
	display:inline-block;
	font-size:1em;
	margin:0 0 0 60px;
	padding:5px 10px 5px 10px;
	outline:none;
}

.category-selt:focus{background:#ffffff; outline:none;}*/

/*---------------*/

/*檔案下載*/
.download{margin:10px 0; text-align:center; }

.download a{
	border:1px solid #cccccc;
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
	
	color:#333333;
	display:inline-block;
	font-size:1em;
	margin:20px 20px 20px 20px;
	padding:0 40px 0 25px;
	text-align:center;
}

.download a span{position:relative;}

.download a span:before{
	position:absolute;
	right:-15px;
	bottom:50%;
	margin-left:5px;
	margin-bottom:-3px;
	content:"";
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid #333333;
}

.download a:hover{color:#8B0E0E; border-color:#8B0E0E;}
.download a:hover span:before{border-top-color:#8B0E0E;}


/*---------------*/


.video iframe{ max-width:100%; max-height:100%; }