/*
 * http://www.rc666.com.tw/
 * 
 * Copyright 2015
 * 
 * 2015 / 12 / 25
 */
 
/* + member
*----------------------------------------------------------------------------*/
.wrapper .indexWrap section .infoWrap {
	overflow: hidden;
}

.wrapper .indexWrap section .infoWrap #member ,
.wrapper .indexWrap section .new {
	float: left;
	background-image: url(../images/index/img-logingBg.png);
	background-repeat: no-repeat;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin ,
.wrapper .indexWrap section .infoWrap #member #memberBox {
	padding: 20px;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .tit ,
.wrapper .indexWrap section .infoWrap #member #memberBox .tit {
	padding: 10px 0 0 70px;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin h3 ,
.wrapper .indexWrap section .infoWrap #member #memberBox .tit h3 {
	width: 100%;
	height: 33px;
	display: block;
	background-image: url(../images/index/img-logingTit.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo {
	overflow: hidden;
	padding: 10px;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form ,
.wrapper .indexWrap section .infoWrap #member #memberLogin .mamberinfo form ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo {
	margin: 10px 0;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo form fieldset {
	border: 0;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset p ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo form fieldset p {
	margin: 5px 0;
	font-size: 16px;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset p input ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo form fieldset p input ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo form fieldset p select {
	border: 1px #eacc73 solid;
	border-radius: 2px;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn {
	margin: 10px 0;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn input#btnOKL ,
.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn a {
	float: right;
	display: inline-block;
	background-image: url(../images/index/icon-loging.png);
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 100%;
	text-indent: -9999px;
	opacity: 1;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn a {
	margin: 0 10px;
	background-image: url(../images/index/icon-askPassword.png);
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form .join a {
	width: 215px;
	height: 33px;
	display: block;
	background: url(../images/index/img-newmemberBg.png) no-repeat 0 0;
	text-indent: -9999px;
	opacity: 1;
}

.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn input#btnOKL:hover ,
.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn a:hover ,
.wrapper .indexWrap section .infoWrap #member #memberLogin .login form .join a:hover {
	opacity: 0.6;
}

.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo h4 {
	font-size: 18px;
}

.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo ul li {
	margin: 5px 0;
}

.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo ul li a ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo form fieldset p.send input {
	width: 100%;
	height: 41px;
	background-image: url(../images/index/icon-password.png);
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: 70%;
	display: block;
	text-indent: -9999px;
	opacity: 0.8;
}

.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo ul.loginout li a {
	position: relative;
	width: 60%;
	float: right;
	margin-top: -50px;
	background-image: url(../images/index/icon-join.png);
	right: -20px;
}

.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo form fieldset p.send input {
	background-image: url(../images/index/icon-send.png);
	background-color: initial !important;
	border: 0;
	width: 60%;
}

.wrapper .indexWrap section .infoWrap #member #memberBox ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo {
	margin-bottom: 0;
	padding-bottom: 0;
}

.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo ul li a:hover ,
.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo form fieldset p.send input:hover {
	opacity: 1;
}

.wrapper .indexWrap section .infoWrap #member #memberBox .mamberinfo ul li b {
	font-size: 18px;
	color: #E30E12;
}


/* + new
*----------------------------------------------------------------------------*/
.wrapper .indexWrap section .new {
	overflow: hidden;
	padding: 10px 0;
	background-image: url(../images/index/img-newBg.png);
	background-position: 29% 0;
}

.wrapper .indexWrap section .new h3 {
	padding: 10px 0 0;
}

.wrapper .indexWrap section .new h3 a {
	width: 290px;
	height: 107px;
	display: block;
	background-image: url(../images/index/img-newTit.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}

.wrapper .indexWrap section .new .newsList {
	overflow: hidden;
	padding: 0 0 0 20px;
}

.wrapper .indexWrap section .new .newsList ul li {
	background: url(../images/index/icon-new.png) no-repeat 0 5px;
}

.wrapper .indexWrap section .new .newsList ul li h4 a {
	font-size: 18px;
	color: #ecaa05;
}


/* + store
*----------------------------------------------------------------------------*/
.wrapper .indexWrap section .store {
	overflow: hidden;
	background-image: url(../images/index/img-storeBg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	float: left;
}

.wrapper .indexWrap section .store .photo {
	margin: 20px;
}


/* + productWrap
*----------------------------------------------------------------------------*/
.wrapper .productWrap {
	overflow: hidden;
	background: url(../images/main/img-prodBg.gif) repeat-x 0 bottom;
}

.wrapper .productWrap ul {
	overflow: hidden;
	margin-bottom: 30px;
}

.wrapper .productWrap ul li {
	margin: 10px;
	float: left;
	position: relative;
}

.wrapper .productWrap ul li a:hover h3 {
	color: #fff;
}

.wrapper .productWrap ul li h3 {
	position: absolute;
	z-index: 20;
	text-shadow: 1px 1px 1px #000;
}

.wrapper .productWrap ul li img.prod {
	position: absolute;
	z-index: 10;
}

.wrapper .productWrap ul li img.photo {
	width: 95%;
}


/**********適應性**********/
/************************/
@media only screen and (min-width: 320px) {
	.wrapper .indexWrap section .infoWrap #member ,
	.wrapper .indexWrap section .new ,
	.wrapper .indexWrap section .store {
		margin: 10px 5px;
		width: 90%;
	}
	.wrapper .indexWrap section .infoWrap #member {
		width: 300px;
		margin: 0 auto;
		float: inherit;
	}
	.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn input#btnOKL ,
	.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn a {
		width: 82px;
		height: 26px;
	}
	.wrapper .indexWrap section .new .newsList ul li {
		padding: 5px 0 5px 25px;
	}
	.wrapper .productWrap ul li h3 {
		padding: 1% 0 0 26%;
		font-size: 16px;
	}
	.wrapper .productWrap ul li img.photo {
		margin: 7px;
	}
}

@media only screen and (min-width: 480px) {
	.wrapper .productWrap ul li h3 {
		padding: 2% 0 0 26%;
		font-size: 20px;
	}
	.wrapper .productWrap ul li img.photo {
		margin: 30px 10px;
	}
}

@media only screen and (min-width: 640px) {
	.wrapper .indexWrap section .infoWrap #member ,
	.wrapper .indexWrap section .new {
		margin: 10px 0;
		width: 50%;
	}
	.wrapper .indexWrap section .infoWrap #member {
		margin: 0;
		float: left;
	}
	.wrapper .indexWrap section .new .newsList ul li {
		padding: 8px 0 8px 25px;
	}
	.wrapper .productWrap ul li {
		width: 45%;
	}
	.wrapper .productWrap ul li h3 {
		font-size: 18px;
	}
}

@media only screen and (min-width: 768px) {
	.wrapper .indexWrap section .new .newsList ul li {
		padding: 0 0 10px 25px;
	}
	.wrapper .indexWrap section .infoWrap #member {
		width: 45%;
	}
}

@media only screen and (min-width: 960px) {
	.wrapper .indexWrap section .infoWrap #member ,
	.wrapper .indexWrap section .new ,
	.wrapper .indexWrap section .store {
		margin: 10px 5px;
		width: 30%;
	}
	.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn input#btnOKL ,
	.wrapper .indexWrap section .infoWrap #member #memberLogin .login form fieldset.btn a {
		width: 102px;
		height: 36px;
	}
	.wrapper .indexWrap section .new {
		margin: 0 5px;
	}
	.wrapper .indexWrap section .store {
		width: 35%;
	}
	.wrapper .productWrap ul li h3 {
		padding: 2% 0 0 43%;
		font-size: 28px;
	}
	.wrapper .productWrap ul li img.photo {
		margin: 50px 20px;
	}
}

@media only screen and (min-width: 1366px) {
	.wrapper .indexWrap section .infoWrap #member ,
	.wrapper .indexWrap section .new ,
	.wrapper .indexWrap section .store {
		margin: 10px 5px;
		width: 25%;
	}
	.wrapper .indexWrap section .store {
		width: 40%;
	}
}