@import url(//fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@charset "utf-8";
/* CSS Document */
body,ul,li,ol,h1,h2,h3,h4,h5,h6,p{list-style:none;margin:0;padding:0;font-family:Arial,"微軟正黑體";}
i{font-style:normal;}
a,button,img{transition:all .5s}
img{max-width:100%;width:auto;}
a{text-decoration:none;color: #333333;cursor:pointer;}
a:hover{color:#7D5816;}
a img:hover{opacity:0.8;transition:all .5s}

input,select{padding:2px 5px;margin:1px;border:1px solid #ccc;color:#333;vertical-align:middle;
max-width:100%;width:auto;}
input{padding:4px 5px;}

input,select,button,span,img{vertical-align:middle;display:inline-block;}

hr.dottedLine{border-style:dotted;}
hr.solidLine{border-color:#bcbcbc; margin:8px 0}
hr.heightLine{margin:8px 0 10px 0}

button{border-radius:5px;border:none;padding:5px 25px;border:1px solid #ccc;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

button:hover{box-shadow:inset #999 0 0 5px}
button.smallBtn{padding:3px 10px;font-size:12px;}
button.largeBtn{padding:5px 10px;font-size:25px;}

button.largeBtn:hover{box-shadow:inset #000 0 0 8px;}

input[type=checkbox]{
    vertical-align: middle;
    position: relative;
    bottom: 2px;
}


.redBtn{color:#fff;box-shadow:none;border:none;background:#B71C1C;}
.brownBtn{color:#fff;box-shadow:none;border:none;background:#7D5816;}
.checkBtn{ width:100%}
.checkBtn2{ width:50%}
/*inlineBlock*/
.inlineBlock{
    font-size:0;
	[;font-size:12px;];
	*font-size:0;
	font-family:arial;
	[;letter-spacing:-3px;];
	*letter-spacing:normal;
	*word-spacing:-1px;
    }
.inlineBlock li{	
    display:inline-block;
	*display:inline;
	*zoom:1;
	letter-spacing:normal;
	word-spacing:normal;
    font-family:Arial,"微軟正黑體";
 }

/*table*/
table{width:100%;margin-bottom:10px;}
table td{padding:5px 2px;border-bottom:1px solid #eee;}

table tr:nth-child(odd){background:#fff;}
table tr:nth-child(even){background:#f5f5f5}
table th{background:#333;color:#ccc;font-size:12px;padding:5px 2px;border:1px solid #444;}

.tb1 td{padding:2px;font-size:90%;}

/*list*/
.noStyleList{list-style:none;}
.StyleListD li{list-style:decimal; margin-bottom:0.5em}

/*noboder*/
.noborder{border:none}

/*LightBox*/
.LightBox{width:100%;height:100%;background:rgba(255,255,255,.9);position:fixed;left:0;top:0;text-align:center;z-index:999;display:none;}
.LightBox>section{display:inline-block;vertical-align:middle;width:800px;padding:0 50px;text-align:center;position:relative;max-height:90%;overflow:auto;}
.LightBox:before{content:"";display:inline-block;vertical-align:middle;height:100%;}
.LightBox dt{display:inline-block;vertical-align:middle;text-align:right;width:100px;margin:0;}
.LightBox dd{display:inline-block;vertical-align:middle;text-align:left;margin:0;margin-left:20px;}
.LightBox dd>input{margin-right:10px;}
.LightBox li{list-style:none;margin:5px;text-align:left;}
.LightBox ul{margin-bottom:20px;text-align:center;margin:auto;display:inline-block;}
.LightBox hr{border:0;border-bottom:1px solid #ccc;margin:20px 0;}
.LightBox #btnClose{font-size:30px;text-align:right;cursor:pointer;position:absolute;top:25px;right:0;}
.LightBox #btnClose:hover{color:#F60}
.LightBox h2{letter-spacing:10px;}


/*bgColor*/
table tr.grayBg{background-color:#888;color:#fff;}
table tr.purpleBg{background-color:#9099b1;color:#fff;}
table tr.yellowBg{background-color:#FFC}
table tr.redBg{background-color:#F00;color:#fff;}
.purpleBg{background:#d8dce4;color:#4c5976;}
.grayBg{background:#666;}
.gray2Bg{background:#666;}
.greenBg{background:#589199;}

/*color*/
.yellowColor{color:#faff6a}
.redColor,a.redColor{color:#C70000}
.blueColor,a.blueColor{color:#40a2b4;}
.greenColor,a.greenColor{color:#396;}
.grayColor{color:#888;}
.brownColor{color:#7D5816;}
.brownColor2{color:#7D5816;}
.whiteColor{ color:#FFFFFF}

/*align*/
.alignCenter{text-align:center;}
.alignLeft{text-align:left;}
.alignRight{text-align:right}

/*font*/
.bold{font-weight:bold;}
.letter_1px{letter-spacing:1px;}
.letter_2px{letter-spacing:2px;}
.letter_3px{letter-spacing:3px;}
.letter_4px{letter-spacing:4px;}
.letter_5px{letter-spacing:5px;}

/*border*/
.borderBGold{border-bottom:1px solid #a18449}
.borderBrown{border-color:#B49E73}
.borderGrayR{border-right:1px solid #BDBDBD;}
.borderBGray{border-bottom:1px solid #BDBDBD;}
.borderNone{border:none;}

/*width*/
.w100{width:100%}
.w85{width:85%}
.w80{width:80%}
.w75{width:75%}
.w70{width:70%}
.w65{width:65%}
.w60{width:60%}
.w55{width:55%}
.w50{width:50%}
.w45{width:45%}
.w40{width:40%}
.w30{width:30%}
.w25{width:25%}
.w20{width:20%}
.w15{width:15%}
.w10{width:10%}
.w5{width:5%}

/*margin*/

.MT{ margin-top: -0.3em;}
.MTR0{margin:0;}
.MT05{margin-top:-5px;}
.MT010{margin-top:-10px;}
.MT5{margin-top:5px;}
.MT10{margin-top:10px;}
.MT15{margin-top:15px;}
.MT20{margin-top:20px;}
.MT30{margin-top:30px;}
.MT50{margin-top:50px;}

.MB0{margin-bottom:0px;}
.MB5{margin-bottom:5px;}
.MB10{margin-bottom:10px;}
.MB15{margin-bottom:15px;}
.MB20{margin-bottom:20px;}
.MB30{margin-bottom:30px;}

.MR5{margin-right:5px;}
.MR10{margin-right:10px;}
.MR15{margin-right:15px;}
.MR20{margin-right:20px;}
.MR30{margin-right:30px;}

.ML5{margin-left:5px;}
.ML10{margin-left:10px;}
.ML15{margin-left:15px;}
.ML20{margin-left:20px;}
.ML30{margin-left:30px;}
.ML-100{margin-left:-100px;}

.MTB5{margin-top:5px;margin-bottom:5px;}
.MTB10{margin-top:10px;margin-bottom:10px;}
.MTB15{margin-top:15px;margin-bottom:15px;}

.MLR0{ margin:0 auto}
.MLR10{margin-right:10px;margin-left:10px}
.MLR15{margin-right:15px;margin-left:15px}
.MLR20{margin-right:20px;margin-left:20px}

.padding_0{padding:0;}
.PTB5{padding:5px 0}
.PTB10{padding:10px 0}
.PTB15{padding:15px 0}
.PLR5{padding:0 5px }
.PLR10{padding:0 10px }

.FR{float:right}
.FL{float:left}
.clearAll{clear:both;}

.bdrCircle{border-radius:50%;}
.bdr5{border-radius:5px}
.bdr10{border-radius:10px}
.bdr15{border-radius:15px}
.bdr20{border-radius:20px}

.blue_bd5{border:5px solid #2c3a44}

a.Line{text-decoration:underline}
a.Noline{text-decoration:none}

/*font-size*/
.font_12{font-size:12px}
.font_13{font-size:13px}
.font_14{font-size:14px}
.font_15{font-size:15px}
.font_18{font-size:18px}
.font_20{font-size:20px}
.font_30{font-size:30px}

/*icon*/
.ico_brown{padding:2px 5px;background:#7D5816;color:#fff;border-radius:5px;}
.icon_add{width:20px;height:20px;line-height:20px;background:#C8BC8C;color:#fff;display:inline-block;border-radius:50%;font-size:20px;text-align:center;font-family:Arial, Helvetica, sans-serif;letter-spacing:0;z-index:999;}
.icon_discount{display:block;background-color:#B71C1C;color:#fff;border-radius:50%;width:40px;height:40px;line-height:40px;font-style:normal;position:absolute;left:10px;top:10px;z-index:999;text-align: center}
.icon_new{display:block;background-color:#C8BC8C;color:#fff;border-radius:50%;width:40px;height:40px;line-height:40px;font-style:normal;position:absolute;left:10px;top:10px;z-index:999;text-align: center}
.icon_num{display:block;background-color:#BDBDBD;color:#fff;border-radius:50%;width:23px;height:23px;line-height:23px;font-style:normal;position:absolute;left:10px;top:10px;z-index:999;}


/*bootStrap Add*/
/* define bootstrap 5 columns */
		.col-xs-1-5,
		.col-sm-1-5,
		.col-md-1-5,
		.col-lg-1-5 {
			position: relative;
			min-height: 1px;
		    padding:10px 10px;
		}
 
		.col-xs-1-5 {
			width: 20%;
			float: left;
			padding:0 3px;
		}	
		.clearfix {
		  *zoom: 1;
		}
		@media (min-width: 768px) {
		.col-sm-1-5 {
				width: 20%;
				float: left;
			}
		 .row-sm-height {
			display: table;
			table-layout: fixed;
			height: 100%;
			width: 100%;
		  }
		  .col-sm-height{
			display: table-cell;
			float: none;
			height: 100%;
		  }
		   .col-sm-top {
				vertical-align: top;
			  }
			  .col-sm-middle {
				vertical-align: middle;
			  }
			  .col-sm-bottom {
				vertical-align: bottom;
			  }
		}
		@media (min-width: 992px) {
			.col-md-1-5 {
				width: 20%;
				float: left;
			}
			/* columns of same height styles */					
			.row-md-height {
				display: table;
				table-layout: fixed;
				height: 100%;
				width: 100%;
			  }
			  .col-md-height {
				display: table-cell;
				float: none;
				height: 100%;
			  }
			  .col-md-top {
				vertical-align: top;
			  }
			  .col-md-middle {
				vertical-align: middle;
			  }
			  .col-md-bottom {
				vertical-align: bottom;
			  }
			  .checkBtn{ width:15%; padding:10px 20px; margin:0 auto}
			  .checkBtn2{ width:auto; padding:10px 20px; margin:0 auto}
		
		}
		@media (min-width: 1200px) {
			.col-lg-1-5 {
				width: 20%;
				float: left;
			}
		}