@charset "utf-8";
/* CSS Document */

/*Title:   Main Template Css File
Author:  http://themeforest.net/user/lorthemes // Bogdan Laurentiu  */
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css); /* font-family: 'Noto Sans TC', sans-serif; */

/* Reset CSS */


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body {
	font-family:  'Roboto', "微軟正黑體", 'Noto Sans TC', sans-serif;;
	font-size:14px;
	line-height: 22px;
	color:#454545;
	background: url(../menubg05.png) no-repeat center 102px , url(../bg01.jpg) center top;
}

/* Typography */
a {
	color: #666666;
	font-weight: 500;
	
}
a:hover {
	text-decoration: none;
	color: #0066CC;
}
a:hover img {
filter:alpha(opacity=80);       /* IE */
-moz-Chroma:0.8;              /* Moz + FF */
opacity: 0.8;           /* 支持CSS3的瀏覽器（FF 1.5也支持）*/

}
h1, h2, h3, h4, h5, h6 {margin-bottom: 20px;}
p {
	color: #333;
	margin-bottom: 20px;
}

/* Lists */
ul, ol {margin-top: 0; margin-bottom: 10px; list-style-type: disc; padding-left: 40px; }
ol {list-style-type: decimal;}
.reset-list,
.reset-list ul,
.reset-list ol {margin:0; padding:0; list-style: none; }
.reset-list2,
.reset-list2 ul,
.reset-list2 ol {list-style: none; }

ul.styled-list li:before { content: "\f105"; font-family: 'icomoon'; color: #DCCA61; font-size: 11px; margin-right: 5px;}
ul.styled-list li ul li:before { content: "\f105"; font-family: 'icomoon'; color: #DCCA61; font-size: 11px; margin-right: 5px;}
ul.styled-list li ul li { list-style: none;}
ul.styled-list { list-style: none;}
ol.styled-list { list-style: none;}

/* Tooltip */
.tooltip-test + .tooltip > .tooltip-inner {background-color: #DCCA61; border-radius: 0; padding: 6px 10px;}
.tooltip.top .tooltip-arrow {border-top-color: #DCCA61; }


h1.section-title {
	font-weight: 400;
	color: #DCCA61;
	font-size: 22px;
	line-height: 30px;
	margin: 0;
}
h2.section-title {
	font-weight: 300;
	color: #BDA351;
	font-size: 24px;
	line-height: 35px;
	margin-bottom: 15px;
	
}
h2.section-title2 {font-weight: 300; color: #fff; font-size: 30px; line-height: 35px; margin-bottom: 10px;}
h2.section-title3 {font-weight: 300; color: #161616; font-size: 26px; line-height: 30px;}
h4.section-subtitle {color: #a1a1a1; font-size: 16px; line-height: 20px;}
h2.shop-title { font-size: 70px; font-weight: 300; color: #3d3d3d; line-height: 70px;}
h3.shop-title {font-size: 45px; font-weight: 300; color: #3d3d3d; line-height: 50px; }
h3.section-title {font-weight: 300; color: #161616; font-size: 26px; line-height: 30px;}

.feature-title { font-size: 45px; line-height: 50px;}


/* Padding/Margin/Colors */
.tcolor {
	color: #003399 !important;
}
.gray { color: #a1a1a1;}
.black { color: #161616 !important;}
.white { color: #fff;}
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.fleft { float: left;}
.fright { float: right;}
.inline-block { display: inline-block;}
.block { display: block;}
.italic { font-style: italic;}
.rounded { border-radius: 50%;}
.width100 { width: 100%;}
.thin-shadow { box-shadow: 0 1px 1px rgba(0,0,0,0.15);}
.relative { position: relative !important;}

.weight300 { font-weight: 300;}

.size17 { font-size: 17px !important; line-height: 22px !important;}
.size18 { font-size: 18px !important;}
.size20 { font-size: 20px !important;}

.l30 { line-height: 30px;}

.bg-white { background-color: #fff !important;}

.ptop5 { padding-top: 5px;}
.ptop10 { padding-top: 10px;}
.ptop15 { padding-top: 15px;}
.ptop20 { padding-top: 20px;}
.ptop30 { padding-top: 30px;}
.ptop40 { padding-top: 40px;}
.ptop50 { padding-top: 50px;}
.ptop100 { padding-top: 100px;}
.pbottom50 { padding-bottom: 50px;}
.pbottom70 { padding-bottom: 70px;}
.pbottom80 { padding-bottom: 80px;}
.pright0 { padding-right: 0;}
.pright30 { padding-right: 30px;}
.pleft0 { padding-left: 0 !important;}
.pleft5 { padding-left:5 !important;}
.pleft10 { padding-left:10 !important;}
.pleft15 { padding-left:15 !important;}

.mauto { margin: 0 auto;}
.m0 { margin: 0 !important;}
.mtop0 { margin-top: 0px;}
.mtop5 { margin-top: 5px;}
.mtop20 { margin-top: 20px;}
.mtop25 { margin-top: 25px;}
.mtop30 { margin-top: 30px;}
.mtop40 { margin-top: 40px;}
.mtop50 { margin-top: 50px;}
.mtop70 { margin-top: 70px;}
.mtop100 { margin-top: 100px !important;}
.mtop106 { margin-top: 106px !important;}
.mtop130 { margin-top: 130px !important;}
.mbottom0 { margin-bottom: 0 !important;}
.mbottom5 { margin-bottom: 5px !important;}
.mbottom10 { margin-bottom: 10px !important;}
.mbottom15 { margin-bottom: 15px !important;}
.mbottom20 { margin-bottom: 20px !important;}
.mbottom25 { margin-bottom: 25px !important;}
.mbottom30 { margin-bottom: 30px !important;}
.mbottom35 { margin-bottom: 35px !important;}
.mbottom40 { margin-bottom: 40px !important;}
.mbottom50 { margin-bottom: 50px !important;}
.mbottom60 { margin-bottom: 60px !important;}
.mbottom70 { margin-bottom: 70px !important;}
.mbottom80 { margin-bottom: 80px !important;}
.mbottom90 { margin-bottom: 90px !important;}
.mbottom100 { margin-bottom: 100px !important;}
.mleft5 { margin-left: 5px;}
.mleft10 { margin-left: 10px;}
.mleft15 { margin-left: 15px;}
.mleft20 { margin-left: 20px;}
.mleft30 { margin-left: 30px;}
.mleft50 { margin-left: 50px;}
.mleft60 { margin-left: 60px;}
.mleft65 { margin-left: 65px;}
.mleft80 { margin-left: 80px;}
.mleft85 { margin-left: 85px;}
.mleft90 { margin-left: 90px;}
.mleft160 { margin-left: 160px;}
.mleft240 { margin-left: 240px;}
.mright5 { margin-right: 5px;}
.mright10 { margin-right: 10px;}
.mright25 { margin-right: 25px;}
.mright30 { margin-right: 30px;}
.mright40 { margin-right: 40px;}
.mleft230 { margin-left: 230px;}
.mright15 { margin-right: 15px;}

.line {display: inline-block; width: 50px; border: solid 1px #DCCA61; margin-bottom: 50px;}


.radius50 { border-radius: 50%;}

.animation {-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;}

.spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

.separator {
	display: block;
	border: 1px dotted #CCCCCC;
}

#page-wrapper {
	background-color: #000;
}
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/* 主選項 CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top:150px;
  right: 0;
  left: 0;
  z-index: 20;
  
  
}

.menu_l , .menu_m , .menu_r{
	height:106px;
	float:left;
}

@media (min-width:1200px) {

.navbar-wrapper > .menu_l{
	width:15%;
	background:url(../menubg02.png) no-repeat;
	background-size:100% 106px;
}

.navbar-wrapper > .menu_m{
	width:70%;
	padding:15px 0 0;
	background:url(../menubg03.png) no-repeat;
	background-size:100% 106px;
}

.navbar-wrapper > .menu_r{
	width:15%;
	background:url(../menubg04.png) no-repeat;
	background-size:100% 106px;
}

}

@media (max-width:1199px) {
.navbar-wrapper > .menu_l,
.navbar-wrapper > .menu_r{
	display:none;
}
	
.navbar-wrapper > .menu_m{
	width:100%;
	padding:15px 0 0;
	background:url(../menubg03.png) no-repeat;
	background-size:100% 106px;
}
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}

@media (max-width:767px) {

.menu_l , .menu_m , .menu_r{
	height:80px;
	float:left;
}

.navbar-wrapper .navbar {
  padding-right: 0;
  padding-left: 0;
}
}

.navbar-wrapper .navbar .container {
  width: auto;
}


/* 主圖輪播CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Callback example */

.pageswf{  max-height:484px;
}
.indexswf{
	max-height:484px;
	margin-bottom: 30px;
}

.events {
  list-style: none;
  }

.callbacks_container {
	position: relative;
	width: 100%;
	margin-top:255px;
}

@media (max-width: 768px) {
	.callbacks_container {
		margin-top:230px;
	}
}

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }

.callbacks img {
  display: block;
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  border: 0;
  }

.callbacks .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
  }

.callbacks_nav {
	position: absolute;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	top: 52%;
	left: 0;
	opacity: 0.7;
	z-index: 3;
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none;
	height: 61px;
	width: 38px;
	margin-top: -45px;
	background-color: transparent;
	background-image: url(../themes.gif);
	background-repeat: no-repeat;
	background-position: left top;
  }

.callbacks_nav:active {
  opacity: 1.0;
  }

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

#slider3-pager a {
  display: inline-block;
}

#slider3-pager img {
  float: left;
}

#slider3-pager .rslides_here a {
  background: transparent;
  box-shadow: 0 0 0 2px #666;
}

#slider3-pager a {
  padding: 0;
}

@media screen and (max-width: 600px) {

  .callbacks_nav {
    top: 47%;
    }
  }

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;

  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }




/* FOOTER */
footer{
	padding:15px 0;
	background:url(../bg02.jpg) no-repeat center top;
	background-size:100% 787px;
}

footer h2{
	text-align:center;
	font-size:12px;
	color:#d6d6d6;
	margin:0;
}

footer h2 a{
	color:#CC6;
}

footer h2 a:hover{
	color:#FFF;
}


/* Header */
#header {
	background-color: #000;
	min-height: 100px;
	position: fixed;
	top: 0;
	transition: top 0.2s ease-in-out;
	width: 100%;
	z-index: 100;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	background-image: url(../nav_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}


#header.nav-up  { top: -200px; }
#header.nav-up.sticky { top: 0;}


/* 回頂端top button */
#back-top { position: fixed; bottom: 30px; right: 15px; background: #DCCA61; border-radius: 4px; 
border-bottom: solid 2px #958213; }
#back-top a { color: #fff; padding: 5px 13px; line-height: 30px;}
#back-top:active { border-bottom: none;}





/*產品內頁 */
.productpicbig {
	width: 100%;
	float: left;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.productpicbig img{
	height: auto;
	width: 100%;
}
/* IE6 hack */
.productpicbig span{
	height:100%; 
	display:inline-block;
	}
 
/* 讓table-cell下的所有元素都居中 */
.productpicbig *{ vertical-align:middle;}


.spic{
	float: left;
	border: 1px solid #CCC;
	padding: 1px;
	height: 90px;
	width: 150px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	margin-top: 7px;
	margin-bottom: 7px;
	margin-left: 18px;

}
/* IE6 hack */
.spic span{
	height:100%; 
	display:inline-block;
	}
 
/* 讓table-cell下的所有元素都居中 */
.spic *{ vertical-align:middle;}
.spic img{
	width: 140px;
	height: auto;
}
.productdetail{
	width: 100%;
	float: left;
	margin-top: 10px;
}
.productdetail h2{
	
	border-bottom: 1px dashed #999;
	font-size: 20px;
	font-weight: bold;
	color: #039;
	margin-bottom: 10px;
	line-height: 30px;
}
.productdetail .content{
	margin-left: 15px;
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
}