﻿@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body{
	margin:0;
	padding:0;
	font-size:14px;
	font-family: 'Open Sans', Microsoft JhengHei,sans-serif;
	color: #231815;
	background: #DDD;
}

*:hover{transition: all .20s linear;}

a{ text-decoration:none; outline: none; color: #231815;}

img{max-width: 100%;}
input, select, textarea{outline: none;}

#pageWrapper{
	position:relative;
	margin: 0 auto;
	box-sizing: border-box;
}
.wrapper{
	position: relative;
	width: 100%;
	max-width: 1000px;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0 auto;
}

/*=[header]=========*/
header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
	text-align: center;
}
header .wrapper{
	padding: 10px;
	box-sizing: border-box;
	overflow: visible;
	background: rgba(0, 0, 0, 0.6);
	text-align: left;
}
header .logo{
	color: #FFF;
	font-size: 20px;
}
header nav{
	display: inline-block;
	float: right;
	margin: 0;
}
header nav ul{
	margin: 0;
	padding: 0;
}
header nav ul li{
	position: relative;
	display: inline-block;
}
header nav ul li a{
	display: inline-block;
	margin: 0 10px;
	line-height: 18px;
	color: #FFF;
	font-size: 16px;
}
header #nav_icon{
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	font-size: 18px;
	color: #FFF;
}
header nav #btn_close{
	float: right;
	margin: 10px;
	color: #FFF;
	font-size: 26px;
}


/*=[page]=========*/


/*==page contact==*/
#minishop{

}

#minishop .content{

}

#minishop .formcontent{
	
}
#minishop .formcontent .wrapper{
	padding: 60px 0 60px;
	background: #f6f6f6;
}
#minishop .formcontent .title{
	font-size: 24px;
	font-weight: bold;
	color: #0066B0;
	margin-bottom: 20px;
}
#minishop .formcontent .subtitle{
	max-width: 700px;
	font-size: 18px;
	line-height: 34px;
	margin: 25px auto 55px;
}
#minishop .form{
	width: 100%;
	max-width: 540px;
	margin: auto;
}

#minishop .content3{
	
}
#minishop .content3 .wrapper{
	padding: 20px 0 20px;
	background: #EEE;
	text-align: center;
}

#spec .col2{
	float: left;
	width: 50%;
	padding: 10px;
	box-sizing: border-box;
}

/*=[breadcrumb]=========*/
.breadcrumb{
	font-size: 14px;
	padding: 20px 0 5px;
	margin-bottom: 60px;
	border-bottom: 1px #AFAFAF solid;
}
.breadcrumb a.current{

}

/*=[pagination]=========*/
.pagination{
	text-align: center;
	margin: 60px auto;
}
.pagination a{
	display: inline-block;
	width: 24px;
	text-align: center;
	color: #999;
	font-size: 15px;
}
.pagination a.current{
	color: #333;
	text-decoration: underline;
	font-weight: bold;
}

/*=[deco]=========*/
.wrapper.deco{
	background: url(../images/footer_pic.png) center bottom no-repeat;
	background-size: 100% auto;
	padding-top: 10%;
}

/*=[footer]=========*/
footer{

}
footer .copyright{
	font-size: 14px;
	padding: 30px 0 60px;
	text-align: center;
}

#messenger{
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: 5px;
	background: url(../images/icon-messenger.png) center center no-repeat;
	background-size: auto 100%;
	cursor:pointer;
}
#line{
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: 5px;
	background: url(../images/icon-line.png) center center no-repeat;
	background-size: auto 100%;
	cursor:pointer;
}
#scrollup{
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: 5px;
	background: url(../images/btn_totop.png) center center no-repeat;
	background-size: auto 100%;
	cursor:pointer;
}
.fixed-btn{
	position: fixed;
	right: 10px;
    bottom: 40px;
    z-index: 20;
}


/*=[common]=========*/
input, select, textarea{
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	margin-bottom: 20px;
	box-sizing: border-box;
	border: 1px #CCC solid;
	resize: none;
}
input[type=submit]{
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	width: 124px;
	padding: 10px 0;
	box-sizing: border-box;
	border-radius: 20px;
	border: none;
	text-align: center;
	color: #FFF;
	background: #222; 
	font-size: 16px;
	cursor: pointer;
}
input[type=submit]:hover{
	color: #FFF;
	background: #555; 
}
input[type=radio], input[type=checkbox]{
	width: initial;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #aaa;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
     color: #aaa;
}

::-ms-input-placeholder { /* Microsoft Edge */
     color: #aaa;
}


.clear{clear: both;}
.center{text-align: center;}
.right{text-align: right;}
.left{text-align: left;}
.fleft{float: left;}
.fright{float: right;}
.mobile{display: none !important;}
.mobile_800{display: none !important;}

.w100{width: 100px;}
.w200{width: 200px;}
.w300{width: 300px;}
.w400{width: 400px;}

.color1{
	color: #1885B5;
}

a.btn_more, a.btn_back{
	display: inline-block;
	width: 124px;
	padding: 5px 0;
	box-sizing: border-box;
	border-radius: 12px;
	text-align: center;
	color: #FFF;
	background: #C1272D; 
	font-size: 18px;
}

.line{
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px #DDD solid;
}

.rwd-table {
	width: 100%;

	border-collapse: collapse;
	margin: 20px 0;
	line-height: 26px;

}
.rwd-table th{
	color: #67542c;
	border-bottom: 2px #67542c solid;
	padding: 10px;
	font-weight: bold;
}
.rwd-table td{
	border-bottom: 1px #999 solid;
	text-align: center;
	padding: 20px 0;
	vertical-align: top;
}
/*.rwd-table td:first-child{text-align: left;}*/
.rwd-table td:before {display: none;}

.rwd-table a:hover{
	color: #0d30a6;
}

.mobile_display{ display: none;}


@media screen and (max-width: 880px) {
	.desktop_display{ display: none !important;}
	.mobile_display{ display: block !important;}
	.mobile_center{text-align: center !important;}

	#pageWrapper{
		padding-top: 60px;
	}

	header nav{
		position: fixed;
		width: 200px;
		height: 100vh;
		top: 0;
		right: -200px;
		float: none;
		z-index: 100;
		background: rgba(0, 0, 0, 0.8);
	}
	header nav ul{
		margin: 40px 0 0;
		padding: 0;
	}
	header nav ul li{
		position: relative;
		display: block;
		padding: 10px;
	}
	header nav ul li a{
		display: inline-block;
		margin: 0;
		line-height: 18px;
		color: #FFF;
		font-size: 16px;
	}

	.wrapper{
		padding: 20px !important;
		box-sizing: border-box;
	}
	.btn_navCloss{
		float: right;
		color: #FFF;
		font-size: 20px;
		display: block;
	}

	.content .wrapper{
		padding: 0px !important;
	}
	#spec .col2{
		float: none;
		width: 100%;
		padding: 0px;
		box-sizing: border-box;
	}
	#messenger, #line{
		width: 40px;
		height: 40px;
	}
	#scrollup{
		width: 40px;
		height: 40px;
	}
}

@media screen and (max-width: 640px) {
	.rwd-table th {display: none;}
	.rwd-table td {display: block;}
	.rwd-table th, .rwd-table td {text-align: left; padding: 10px;}
	.rwd-table td:first-child {padding-top: 20px; font-size: 18px; font-weight: bold;}
	.rwd-table td:last-child {padding-bottom: 20px;}
	.rwd-table td:before {
		content: attr(data-th) ":";
		font-weight: bold;
		width: 80px;
		display: inline-block;
		color: #67542c;
	}
	.rwd-table td:first-child:before {
		content: "";
		width: 0;
	}
	.rwd-table td.empty{
		display: none;
	}
}