@charset "utf-8";
/* CSS Document */
body {
	font-size:12px;
	font-family: "微軟正黑體";
	background-repeat: repeat;
	background-position: center top;
	/*background: url('../images/footer-bg.png');*/
	margin:0px;
	padding: 0px; 
}
* {
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
header {
	/*position: relative;
	background-image: url(../images/headerBg.png);
	background-repeat: repeat-x;
	background-position: center 0px;
	height:100px;*/
}
#wrapper {
	background-repeat: repeat;
	background-position: center top;
	/*background-image: url('../images/wrapper-bg.png');*/
	
}
a,a:hover {
	text-decoration: none;
}
main {
	padding:8px 8px 20px 8px;
}
/*footer {
	font-size:1.1em;
	line-height:1.5em;
	text-align: center;
	width: 100%;
	color:#fff;
	background-image: url(../images/footer-bg.png);
	background-repeat: repeat;
	background-position: center 0px;
}
footer > div{
	padding: 8px;
}
footer .footer-nav{
	background-image: url(../images/footer-nav.png);
	background-repeat: repeat;
	background-position: center 0px;
	text-align: center;
}
.footer-nav li{
	font-style: normal;
	margin-right: 10px;
	color: #fff;
}
.footer-nav li a{
	margin-right: 10px;
	color: #fff;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-mo-transition: 0.5s;
}
.footer-nav li a:hover{
	opacity: 0.5;
}

footer .footer-icon{
	text-align: center;
}
footer ul{
	clear:both; margin:0; padding:0;
}
footer .footer-icon ul li{
	width:inherit;
	height:inherit; 
	float:none; 
	border:0; 
	display:inline;
}
footer .footer-icon a{
	display: block;
	width: 50px;
	height: 50px;
	margin-right: 5px;
	float: left; 
}
footer .footer-icon a:hover{
	display: block;
	width: 50px;
	height: 50px;
	transition: 2s;
	-webkit-transition: 2s;
	-mo-transition: 2s;
}*/
footer{
	text-align:center;
	width: 100%;
	color:#fff;
	background-image: url(../images/footer-bg.png);
	background-repeat: repeat;
	background-position: center 0px;
}
footer ul{clear:both; margin:0; padding:0;}
.footer-nav, .footer-conter{
	padding: 8px;
}

/***footer-nav***/
footer .footer-nav ul li{
	width:inherit;
	height:inherit; 
	float:none; 
	border:0; 
	display:inline;
}
footer .footer-nav{
	background-image: url(../images/footer-nav.png);
	background-repeat: repeat;
	background-position: center 0px;
	text-align: center;
	border-bottom: 1px solid #585858;
}
.footer-nav li{
	font-style: normal;
	margin-right: 10px;
	color: #fff;
}
.footer-nav li a{
	margin-right: 10px;
	color: #fff;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.footer-nav li a:hover{
	opacity: 0.5;
}
/***footer-conter***/
.footer-conter{
	line-height: 1.5em;
}

/***footer-icon***/
footer .footer-icon ul li{
	width:inherit;
	height:inherit; 
	float:none; 
	border:0; 
	display:inline;
	line-height: 1.5em;
	font-size: 1.5em;
}
.footer-icon ul li a{
	width: 50px;
	height: 50px;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	background-position: center center;
	background-repeat: no-repeat;
}
#google_translate_element {
	padding-bottom: 8px;
}
.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active{
	display: none !important;
}
.goog-te-gadget .goog-te-combo {
	color: #404040 !important;
	border-radius: 5px !important;
	padding: 3px !important;
	background: #ffffffd6 !important;
}
.goog-te-gadget {
	color: rgba(102, 102, 102, 0) !important;
	line-height: 4px !important;
}
/*.footer-icon a.fi-1{background-image: url(../images/icon-01-1.png);}
.footer-icon a.fi-1:hover{background-image: url(../images/icon-02-1.png);}
.footer-icon a.fi-2{background-image: url(../images/icon-01-2.png);}
.footer-icon a.fi-2:hover{background-image: url(../images/icon-02-2.png);}
.footer-icon a.fi-3{background-image: url(../images/icon-01-3.png);}
.footer-icon a.fi-3:hover{background-image: url(../images/icon-02-3.png);}
.footer-icon a.fi-4{background-image: url(../images/icon-01-4.png);}
.footer-icon a.fi-4:hover{background-image: url(../images/icon-02-4.png);}
.footer-icon a.fi-5{background-image: url(../images/icon-01-5.png);}
.footer-icon a.fi-5:hover{background-image: url(../images/icon-02-5.png);}
.footer-icon a.fi-6{background-image: url(../images/icon-01-6.png);}
.footer-icon a.fi-6:hover{background-image: url(../images/icon-02-6.png);}*/
/**moble-icno手機板展開icon**/
.menu-title-moble{
	text-align:center;
	width: 100%;
	color:#fff;
}
.menu-title-moble ul{
	clear:both; 
	margin:0; 
	padding:5px 0 0 0;
}
.menu-title-moble .moble-icno ul li{
	width:inherit;
	height:inherit; 
	float:none; 
	border:0; 
	display:inline;
	line-height: 1.5em;
	font-size: 1.5em;
}
.moble-icno ul li a{
	width: 30px;
	height: 30px;
	margin: 0 2px 0 2px;
}
.moble-icno ul li a.mi-1{
	background-image: url(../images/icon-02.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size:180px 30px;
}
.moble-icno ul li a.mi-2{
	background-image: url(../images/icon-02.svg);
	background-repeat: no-repeat;
	background-position: -30px 0px;
	background-size:180px 30px;
}
.moble-icno ul li a.mi-3{
	background-image: url(../images/icon-02.svg);
	background-repeat: no-repeat;
	background-position: -60px 0px;
	background-size:180px 30px;
}
.moble-icno ul li a.mi-4{
	background-image: url(../images/icon-02.svg);
	background-repeat: no-repeat;
	background-position: -90px 0px;
	background-size:180px 30px;
}
.moble-icno ul li a.mi-5{
	background-image: url(../images/icon-02.svg);
	background-repeat: no-repeat;
	background-position: -120px 0px;
	background-size:180px 30px;
}
.moble-icno ul li a.mi-6{
	background-image: url(../images/icon-02.svg);
	background-repeat: no-repeat;
	background-position: 0-150px 0px;
	background-size:180px 30px;
}

ul#productsShow li {
	float: left;
	display: block;
	margin-bottom:0px;
	padding:10px;
}
ul#productsShow li .wap{
	display: block;
	padding: 10px;
	background: #fff;
	/*-webkit-box-shadow: 0px 0px 83px -35px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 83px -35px rgba(0,0,0,1);
	box-shadow: 0px 0px 83px -35px rgba(0,0,0,1);*/
	/*border-color:#406831;
	border-bottom-style:solid;
	border-bottom-width:3px;*/
	border:#E1E1E1 solid 1px;
	border-bottom: #abc10b solid 5px;
	border-radius: 5px;
	background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
ul#productsShow li .wap:hover{
	box-shadow: 0px 0px 83px -35px rgba(0,0,0,1);
	-webkit-box-shadow: 0px 0px 83px -35px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 83px -35px rgba(0,0,0,1);
}

ul#productsShow li h1{
	float:left;
	width:100%;
	height:204px;
	text-align:center;
	font-size:0;
	}
ul#productsShow li h1 *{vertical-align:middle;}
ul#productsShow li h1 span{display:inline-block; height:100%;}
ul#productsShow li h1 a {
}
ul#productsShow li h1 img {
	max-width:100%; max-height:100%;
}

ul#productsShow li h1 img:hover {
	transition: 
}

ul#productsShow li h1{
}
ul#productsShow li h1 a:hover {
	opacity: 0.8;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	filter: alpha(opacity=80);
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
ul#productsShow li h2 {
	float:left;
	margin-top:10px;
	color:#406831;
	width: 100%;
}
ul#productsShow li h2 .h2B {
	float:left;
	font-size:1.1em;
	line-height:1.3em;
	height: 50px;
	width: 100%;
	margin-bottom:8px;
	font-weight:600;	
}
ul#productsShow li h2 .h2S {
	float:left;
	font-size:0.8em;
	line-height:1.3em;
	font-weight:normal;
	color:#757575;
	margin-bottom:10px;
	height: 50px;
	width: 100%;
}
ul#productsShow li h3 {
	color:red;
	display:block;
	width:100%;
	text-align:center;
	float:left;
	margin:10px 0 10px 0;
	}
ul#productsShow li h3 .h3A {
	display:block;
	width:80%;
	float:left;
	text-align: left;
	}
ul#productsShow li h3 .h3B {
	display:block;
	width:20%;
	float:right;
	text-align: right;
	font-size: 1.2em;
	}
a.h3B,.h3B.active {
	color: red;
}
.h3B {
	color: #C7C7C7;
	cursor: pointer;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
ul#productsShow li h4 {
	float: left;
	width: 50%;
	margin: 0px 0 5px 0;
}
h4 .price {
    font-size: 7px;
    text-decoration: line-through;
    font-weight: 200;
}
ul#productsShow li h4 span{
	color: red;
	font-size: 2em;
}
ul#productsShow li h5 {
	float:right;
	display:block;
	width:40%;
	text-align:right;
	margin:10px 0 5px 0;
	}
ul#productsShow li h5 a {
	width: 100%;
	display: block;
	text-align: center;
	font-size:1.5em;
	font-weight:normal;
	background-color:#FF732B;
	color:#FFFDFD;
	padding:5px;
	border-bottom: 3px solid #D85715;
	border-radius: 3px;
	transition: 0.5s;
}
ul#productsShow li h5 a:hover,ul#productsShow li h5 a.active{
	background-color:#D15110;
}

.loginFloat{
	color: #fff;
}
/*手機板搜尋隱藏*/
#mobile_search, .mobile-search{
	visibility:hidden;
}
/*嵌入fb*/
.embedded-fb {
    padding: 10px;
}

@media only screen and (max-width: 979px) {
header {
		/*visibility:hidden;
		height:0px;*/
}
.footer-nav i{
	font-style: normal;
	margin-right: 5px;
	color: #fff;
}
.footer-nav i a{
	margin-right: 5px;
	color: #fff;
	transition: 0.5s;
}
/*手機板搜尋顯示*/
#mobile_search, .mobile-search{
	visibility:visible;
}
/*電腦板搜尋隱藏*/
.search_field{
	visibility:hidden;
}
}
#topHeader {
	text-align:center;
}

a {
	text-decoration: none;
}
.clear {
	clear:both;
}
@media screen and (max-width: 767px) {
.page {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.page-pad {
	width: 100%;
	padding: 0 10px 0 10px;
	margin-right: auto;
	margin-left: auto;
}
#logo img.bbcomes_logo{
	display: none;
}
}

@media screen and (max-width: 480px) {
.page {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	}
ul#productsShow li .wap{
	padding-bottom: 3px;
}
ul#productsShow li .wap:hover{
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}

ul#productsShow li h1{
	height: 100px;
	display: block;
}
ul#productsShow li h2 {
	margin-top:10px;
}
ul#productsShow li h2 .h2B {
	font-size:0.8em;
	height: 25px;

}
ul#productsShow li h2 .h2S {
	font-size:0.8em;
	display: none;
}

ul#productsShow li h4 span{
	color: red;
	font-size: 1.5em;
	z-index: 999;
}
ul#productsShow li h3 {
	margin: 8px 0 0px 0;
}
ul#productsShow li h3 .h3A{
	width: 100%;
}
ul#productsShow li h3 .h3B{
	margin-top: 5px;
}
ul#productsShow li h4{
	padding: 3px 0 0 0;
	margin-top: -23px;
}
ul#productsShow li h5{
	display: none;
}

}

@media screen and (min-width: 768px) and (max-width: 979px) {
.page {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	}
.page-pad {
	width: 750px;
	padding: 0 10px 0 10px;
	margin-right: auto;
	margin-left: auto;
	}
}

@media screen and (min-width: 1200px) {
.page {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	}
.page-pad {
	width: 750px;
	padding: 0 10px 0 10px;
	margin-right: auto;
	margin-left: auto;
	}

}

@media screen and (min-width: 980px) and (max-width: 1199px) {
.page {
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	}
.page-pad {
	width: 750px;
	padding: 0 10px 0 10px;
	margin-right: auto;
	margin-left: auto;
	}
ul#productsShow li h2 .h2B {
	font-size:1em;
}
ul#productsShow li h1{
	height: 276px;
}
}


@media screen and (min-width: 481px) and (max-width: 766px) {
.page {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	}
ul#productsShow li h2 .h2B {
	font-size:1em;
}
}



/*小工具專區*/
.visits {
    color: #fff;
    font-size: 1.3em;
    padding: 10px 0px;
}
.visits span {
    background-color: #000;
    border-radius: 3px;
    padding: 0 5px 0 10px;
    margin: auto 5px;
    letter-spacing: 5px;
}
/*聯絡資訊icon 電話、line....等*/
ul.contaction {
    position: fixed;
    width: 50px;
    left: 15px;
    bottom: 15px;
    display: none;
    flex-direction: column;
}
ul.contaction li {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    margin-bottom: 10px;
}
ul.contaction li a#phone p{
    opacity: 0;
    width: 150px;
    position: absolute;
    background-color: rebeccapurple;
    top: -8px;
    z-index: 2;
    left: 40px;
    font-size: 1.5em;
    color: #fff;
    padding: 5px 10px;
    border-radius: 30px;
    text-align: center;
    transition: 0.4;
}
ul.contaction li img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 1050px) {

    ul.contaction li a#phone:hover p{
    opacity: 1;
    transition: 0.4;
    left: 50px;
    }
    ul.contaction li a{
        position: relative;
    }
}