/******** global **************/

a img {
	border: medium none;
}

img {
	height: auto;
	/* ie8 */
	-ms-interpolation-mode: bicubic;
	width: auto\9;
}



/* upd by hank .video iframe 註解 2017.9.25 */

.video embed,.video object /* ,.video iframe  */ {
	width: 100%;
}

#rwd_logo img {
	width: auto;
	height: auto;
	max-width: 200px;
}



/******** header top **************/

.rwd-header {
	display: none;
}

.rwd-header a.backBtn {
	display: block;
	height: 40px;
	left: inherit;
	position: absolute;
	right: 10px;
	top: 5px;
	width: 40px;
}

.rwd-header, .rwd-footer {
	background: none repeat scroll 0 0 #777;
	box-sizing: border-box;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
	padding: 0 50px;
	width: 100%;
}

.rwd-header div {
	text-align: center;
}

.rwd-header a.leftBtn {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC") no-repeat scroll center center transparent;
	display: block;
	height: 40px;
	left: 10px;
	position: absolute;
	top: 0;
	width: 40px;
}

#rwd-menu , #rwd-menu-2 {
	margin: 0px;
	z-index: 99999;
}



/********** mmenu header **************/

.rwd-text,  a.rwd-text:link, a.rwd-text:visited, a.rwd-text:hover, a.rwd-text:active {
	color: #fff;
	text-decoration: none;
}

#rwd-menu-right {
	color: #fff;
	font-size: 1.7em;
	text-decoration: none;
	top: 6px;
	display: none;
}







/********** mmenu start ************/



#rwd-menu h3, #rwd-menu-2 h3 {
	margin: 30px 0 0 20px;
	color: dimgray;
}

.mm-menu .mm-list {
	padding: 0;
}

.mm-menu .mm-list h3 {
	font-size: 20px;
}

.mm-menu .mm-list li.contact_info {
	padding: 10px 20px;
	line-height: 26px;
	color: paleturquoise;
}

.mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel {
	padding: 0px;
}

.mm-list li > ul > li {
	padding-left: 0px;
	margin-left: 20px;
	border-bottom-width: 0px;
	border-bottom-style: none;
}

.mm-list > li > ul > li.mm-selected {
	margin-left: 0px;
	padding-left: 20px;
	border-bottom-width: 0px;
	border-bottom-style: none;
}

.mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen) {
	background: none;
}

.mm-menu .mm-list a.reset {
	padding-left: 0px;
	display: inline;
	background: none repeat scroll 0 0 #333333;
	/*text-decoration:underline;*/
}

.mm-menu .mm-selected  > a {
	color: yellow;
}

.mm-menu > .sf-search {
	background: inherit;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

.mm-menu .sf_keyword {
	float: left;
	margin-bottom: 5px;
}

.mm-menu .textbox {
	float: left;
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
	-moz-font-feature-settings: inherit;
	-moz-font-language-override: inherit;
	border: medium none;
	border-radius: 30px;
	display: block;
	font-family: inherit;
	font-size: 14px;
	font-size-adjust: inherit;
	font-stretch: inherit;
	font-style: inherit;
	font-variant: inherit;
	font-weight: inherit;
	height: 20px;
	line-height: 20px;
	margin: 0;
	outline: medium none;
	padding: 0 10px;
	width: 50%;
	color: rgba(255, 255, 255, 0.6);
	padding: 5px;
	margin-right: 5px;
}



/********** Media Query ************/

/* Media Query ，也就是當寬度 < 787 px 時將載入下面這段 CSS :*/

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

	.rwd-header {
		display: block;
	}

	header, .footer {
		width: 100%;
		margin: 0 auto;
	}

	header {
		padding-top: 0;
	}

	.content {
		width: 90%;
		margin: 20px auto 0;
	}

	.footer {
		padding-top: 10px;
	}

	.search, .register, .colSide, .logo, .lagH, .breadcrumb , .container > header nav, .logo-web , .logo-index , .container  > nav {
		display: none;
	}

	.banner, .banner div {
		margin: 0 auto;
		width: 100%;
	}

	.bx-controls {
		width: 100%;
		margin: 0;
	}

	.container {
		background: none;
	}

	.logo {
		text-align: center;
	}

	.colMain {
		width: 100%;
	}

	footer .menu {
		float: left;
	}

	#gotop {
		display: none;
	}

	.colMain img {
		max-width: 700px;
	}

	/******************/

	.bx-controls {
		margin-top: -20px;
	}

	

	/***** index *****/

	.index .content {
		background: none;
	}

	.index .coIntro .img {
		float: none;
	}

	.coLeft {
		float: none;
		width: 100%;
	}

	.cateIntro .cateList {
		width: 32.3%;
		height: auto;
		padding-top: 190px;
	}

	.cateIntro .cateList div {
		float: none;
		width: auto;
		padding: 0 0 15px 15px;
	}

	/***** products *****/

	.productList .proList .img *, .productGrid .proList .img *, .productPic .photo * {
		display: initial;
		width: auto;
		/*height:100%;*/
	}

	.productGrid.list_imgXL .proList {
		height: 100%;
	}

	.list_imgXL .img {
		width: auto;
	}

	.productGrid .proList {
		margin: 0 12px 30px;
	}
}

@media only screen and (min-width:480px) and (max-width:767px) {

	.colMain img {
		max-width: 410px;
	}

	.productList .txt {
		width: 57%;
	}
}

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

	.advBtn {
		width: 100%;
		padding: 10px 0 0 0;
	}
}



/* 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。*/

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

    /*.show_prodcut

	{

		padding:10px;

	}*/

	.colMain img {
		max-width: 250px;
		/*width:auto; add by hank 2016.8.16*/
	}

	.productPic.photo_imgL {
		width: 100%;
	}

	.productGrid.list_imgL .proList {
		height: 30%;
		width: 100%;
		margin: 10px;
		max-width: 100%;
		float: left;
	}

	.list_imgL .img {
		/*min-height: 100px;

		min-width: 100px;

		

		height: 100px;

		width: 100px;

		*/
	}

	.productGrid.list_imgXL .proList {
		width: 100%;
		margin: 0 auto 15px;
	}

	.cateIntro .cateList {
		width: 100%;
		height: 135px;
		margin: 0 0 30px;
		padding-top: 40px;
	}

	.cateIntro .cateList div {
		float: right;
		width: 45%;
		padding: 0;
	}

	.photo_imgL .photo {
		width: 250px;
		height: 250px;
	}

	.productPic, .productRight {
		float: none;
		width: 100%;
	}

	h6.relTitle {
		font-size: 100%;
	}

	.productList .proList .img {
		float: none;
	}

	.productList .txt {
		float: none;
		width: 100%;
	}
}





/* 變更驗證碼文字 */

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

	.change_random_code {
		display: block;
		font-size: 17px;
	}
}



/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 搜尋結果 */

@media (max-width: 787px) {
	.advSearch {
		width: auto;
		min-width: 270px;
	}
	.advSearch th {
		padding: 10px;
	}
	.advSearch .advKeyword {
		width: 130px;
	}
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 搜尋結果 */