@charset "utf-8";
/* 農心商行 2015 Designed By 威普網站 http://www.website.com.tw/ */

html, body, h1, h2, h3, h4, h5, h6, br, hr, p, div, span, ul, ol, li, form, label, table, tr, td, th, img, button, input, textarea {
	padding: 0px;
	margin: 0px;
	color: #454545;
	font-size: 13px;
	font-weight: normal;
}

body {
	background-color: #FFF;
	font-family: "微軟正黑體", Arial, "LiHei Pro", "新細明體", sans-serif;
	background-color: transparent;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	color: #454545;
}

#wrapper {
	overflow-x: hidden;
}

img {
	border: 0;
}

p {
	line-height: 30px;
}

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin: 7px 0;
}
.hr_dash {
	border: 0;
    border-bottom: 1px dashed #ccc;
}

.total {
	font-size: 18px;
	color: #FF0000;
}

.right {
	float: right;
}
.clear10 {
	background-color: #f3f3f3;
	height: 10px;
	clear: both;
}
.clear20 {
	background-color: #f3f3f3;
	height: 20px;
	clear: both;
}
.clear40 {
	background-color: #f3f3f3;
	height: 40px;
	clear: both;
}

#code, img {
	vertical-align: middle;
}

/*----- HEADER -----*/
#header {
	width: 980px;
	height: 456px;
	margin: 0 auto;
}
.header_bg {
	position: relative;
	background-color: transparent;
}
.header_bg::before {
	content: " ";
	position: absolute;
	width: 1422px;
	height: 456px;
	z-index: -1;
	background-image: url(../images/top.jpg);
}
#header_main {
	z-index: 2;
	position: absolute;
	top: 0px;
}

#navi {
	margin-top: 35px;
	margin-left: 290px;
	width: 690px;
}
#navi ul {
	list-style: none;
}
#navi ul li a:link, #navi ul li a:visited, #navi ul li a:active  {
	float: left;
	width: 98px;
	color: #454545;
	font-size: 16px;
	text-decoration: none;
}
#navi ul li a:hover {
	color: #bad76b;
}
.navi_green {
	color: #bad76b;
	font-size: 14px;
}

#logout {
	padding-top: 17px;
	float: right;
	color: #bad76b;
	font-size: 16px;
	text-decoration: none;
}
#logout a {
	color: #bad76b;
}


/*----- MAIN -----*/
#main_box {
	background-color: #f3f3f3;
}

#main {
	width: 980px;
	margin: 0 auto;
}
#main_right {
	width: 740px;
	margin-left: 240px;
}

.main_news {
	width: 307px;
	margin: 0;
	display: inline-block;
}


.index_tit {
	width: 285px;
	height: 33px;
	background: url(../images/index_titbg.png) no-repeat;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	padding-left: 22px;
	padding-top: 5px;
}

.more {
	float: right;
}
.more a:link, .more a:visited, .more a:active {
	color: #bad76a;
	text-decoration: none;
}
.more a:hover {
	text-decoration: underline;
}

.news_list ul {
	list-style: none;
}

.news_list ul li {
	line-height: 28px;
}
.news_list ul li a:link, .news_list ul li a:visited, .news_list ul li a:active {
	color: #454545;
	text-decoration: none;
}
.news_list ul li a:hover {
	color: #bad76a;
}

.specs {
	width: 210px;
	display: inline-block;
	vertical-align: top;
	margin-left: 8px;
}
.specs h1 {
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
}
.specs p {
	text-align: center;
	line-height: 25px;
}
.title {
	width: 980px;
	color: #bad76a;
	font-size: 18px;
	font-weight: bold;
}
.grey_tit {
	font-size: 14px;
	color: #ccc;
}
.news_tit {
	font-size: 16px;
	font-weight: bold;
	color: #bad76a;
}
.s_title {
	width: 740px;
	color: #bad76a;
	font-size: 18px;
	font-weight: bold;
}
.ico_tit {
	vertical-align: text-bottom;
}
.tit_hr {
	width: 980px;
	height: 12px;
	background: url(../images/hr.png) repeat-x;
}
.left_hr {
	width: 195px;
	height: 12px;
	background: url(../images/hr.png) repeat-x;
}
.stit_hr {
	width: 740px;
	height: 12px;
	background: url(../images/hr.png) repeat-x;
	margin-bottom: 10px;
}

.news a:link, .news a:visited, .news a:active {
	color: #454545;
	text-decoration: none;
}
.news a:hover {
	color: #bad76a;
}

.map {
	margin-left: 25px;
	display: inline-block;
	vertical-align: top;
}


/*---------- LEFT---------*/
#main_left {
	width: 220px;
	float: left;
}

.left_box {
	background-color: #FFF;
	height: 180px;
	padding: 10px;
	margin-bottom: 15px;
}
.left_tit, .left_tit a:link, .left_tit a:visited, .left_tit a:active {
	line-height: 30px;
	color: #666;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
.left_tit a:hover {
	color: #bad76a;
}

/*-----------PRODUCT----------*/
.list_box {
	width: 295px;
	height: 250px;
	background: #FFF;
	float: left;
	margin-right: 15px;
	margin-top: 25px;
	padding: 10px;
}
.list > :nth-child(3n+3) {
	margin-right: 0;
}
.list_img {
	width: 295px;
	height: 190px;
	background: #f1f1f1;
	margin: 0 auto;
	margin-bottom: 10px;
}
.list_tit, .list_tit a:link, .list_tit a:visited, .list_tit a:active {
	color: #454545;
	font-size: 16px;
	text-decoration: none;
	line-height: 25px;
}
.list_tit a:hover {
	color: #ed5382;
}
.list_info {
	height: 35px;
	padding-top: 0px;
}
.list_more {
	float: right;
	height: 25px;
	line-height: 25px;
	width: 65px;
	background: #000;
	color: #FFF;
	text-align: center;
}
.list_info a {
	color: #FFF;
	text-decoration: none;
}
.list_price {
	font-size: 15px;
	color: #FF0033;
}

.prod_box {
	display: inline-block;
	width: 472px;
	height: 300px;
	background-color: #FFF;
	padding: 12px;
}
.prod_tit {
	line-height: 35px;
	font-size: 18px;
	font-weight: bold;
}
.prod_price {
	color: #ff6a6a;
	font-size: 18px;
}
.info {
	width: 450px;
	display: inline-block;
	vertical-align: top;
	margin-left: 20px;
}
.info_content {
	height: 95px;
	overflow-y: auto;
	overflow-x: hidden;
}



/*---------- FORM----------*/
.paid_form p {
	margin-bottom: 5px;
}


.order_form {
	background-color: #FFF;
	padding: 10px;
	margin-top: 10px;
}
.sub_form {
	border: solid 1px #c3c3c3;
	padding: 12px;
}
.sub_form h2 {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	margin-bottom: 15px;
	border-bottom: solid 1px #c3c3c3;
}

.label {
	width: 120px;
	display: inline-block;
	margin-right: 10px;
	text-align: right;
	vertical-align: middle;
	color: #666;
	clear: left;
}
#ordernum, #paydate, #payamount, #accnum, #accname, #cname, #tel, #payinfo {
	border: solid 1px #ccc;
	height: 20px;
	width: 350px;
	color: #666;
}
#message, #cnote {
	border: solid 1px #ccc;
	width: 350px;
	color: #666;
}
#pieces1 {
	width: 50px;
	height: 20px;
}
#cname, #tel ,#cmail, #addr, #payName, #payTime, #payAcc, #payAmount, #orderId, #bankName, #bank_acct,
#cname1, #tel1, #addr1, #prod11, #prod12, #prod13, #pieces1, #trans1, #sum1
{
	border: solid 1px #c3c3c3;
	height: 20px;
}
#cname, #tel {
	width: 300px;
}
#cmail, #addr {
	width: 550px;
}
#shiptime, #cname1 {
	width: 75px;
	text-align: center;
}
#addr1 {
	width: 400px;
	padding-left: 3px;
}
#tel1 {
	width: 85px;
	text-align: center;
}
#prod11, #prod12, #prod13 {
	width: 35px;
	text-align: center;
}
#pieces1, #trans1, #sum1 {
	width: 45px;
	text-align: center;
}

#login {
	width: 500px;
	/*height: 200px;*/
	border: solid 1px #ccc;
	margin: 0 auto;
	margin-top: 40px;
	padding: 20px;
}
#login p {
	height: 40px;
}
#acc, #pwd {
	height: 25px;
	border: solid 1px #ccc;
	width: 250px;
}
#ncode {
	height: 25px;
	border: solid 1px #ccc;
	width: 125px;
}
.loginlink, .loginlink a:link, .loginlink a:visited, .loginlink a:active {
	color: #454545;
	text-decoration: none;
}
.loginlink a:hover {
	text-decoration: underline;
}

.myorder {
	line-height: 25px;
}
.ostatus a, .ostatus a:link, .ostatus a:visited, .ostatus a:active {
	color: #454545;
	text-decoration: underline;
}
.ostatus a:hover {
	color: #bad76a;
	text-decoration: underline;
}

.left_navi {
	width:200px;
	line-height:35px;
}
.left_navi a, .left_navi a:link, .left_navi a:visited, .left_navi a:active {
	color:#454545;
	text-decoration: none;
}
.left_navi a:hover {
	color: #bad76a;
	text-decoration: none;
}

/*----- FOOTER -----*/
#footer_box {
	background: url(../images/footer_bg.jpg) repeat-x;
	font-size: 0;
}
#footer {
	width: 980px;
	height: 104px;
	margin: 0 auto;
}
#footer p {
	color: #FFF;
	padding-top: 15px;
	line-height: 25px;
}
#footer p a {
	color: #FFF;
	text-decoration: none;
}
.author {
	float: right;
	margin-top: 65px;
}
.author, .author a:link, .author a:visited, .author a:active {
	color: #FFF;
	text-decoration: none;
	vertical-align: bottom;
}
.author a:hover {
	text-decoration: underline;
}


/*---------- BUTTON -----------*/
.btn1 a {
	display: inline-block;
	width: 80px;
	color: #FFF;
	text-decoration: none;
	font-size: 14px;
}
input[type=submit], input[type=reset] {
	padding-top:5px;
	padding-bottom: 5px;
	width: 80px;
	margin-right: 10px;
	margin-top: 5px;
}

input[type=submit], input[type=reset], .btn1, .btn2 {
	text-align: center;
	border : solid 1px #000000;
	border-radius : 3px;
	moz-border-radius : 3px;
	-webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	-moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	color : #ffffff;
	font-family: "微軟正黑體", Arial, "LiHei Pro", "新細明體", sans-serif;
	font-size: 14px;
	background : #5f6166;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5f6166), color-stop(100%,#00060a));
	background : -moz-linear-gradient(top, #5f6166 0%, #00060a 100%);
	background : -webkit-linear-gradient(top, #5f6166 0%, #00060a 100%);
	background : -o-linear-gradient(top, #5f6166 0%, #00060a 100%);
	background : -ms-linear-gradient(top, #5f6166 0%, #00060a 100%);
	background : linear-gradient(top, #5f6166 0%, #00060a 100%);
	filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f6166', endColorstr='#00060a',GradientType=0 );
}


/*----------Pagination----------*/
.pagination {
		float: right;
}

.page {
    display: inline-block;
    padding: 5px 12px;
    margin-right: 4px;
    border-radius: 2px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.page:hover, .page.gradient:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.page.active {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

.page.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
    background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
}