/*
TABLE OF CONTENT （重要區塊設計）
-------------------------------------------------
	1. GENRAL SECTION 
	2. HEADING OR PAGE TITLES 
	3. LOGO SECTION 
	4. PAGE CONTENT SECTION 
	5. SERVICES PAGE
	6. CONTACT PAGE 
	7. FOOTER SECTION 
----------------------------------------------------
*/


/* @ General Style
------------------------------------------------------*/
body{
	margin:0px;
	padding:0px;
	bottom:0px;
	top:0px;
	background-color:#CCCCCC;
	color:#333;
	font-family:'微軟正黑體', Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:17px;
	/*	border-top:7px solid #86682A;*/
	width:100%;
	height:100%;
	overflow-y:scroll;
}

#bgimg {
	margin:0px;
	padding:0px;
	position:fixed;	
	z-index: -1;
	width:100%;
	height:auto !important;
	margin-top:0px;
}

/* @ headings
------------------------------------------------------*/
h1, h2, h3, h4, h5, h6{
	color:#FFFFFF;
	font-family: 'Fjalla One', '微軟正黑體', sans-serif;
	font-weight:normal;
}
h1{
	font-size:35px;
	line-height:38px;
	margin-bottom:20px;
	margin-top:0px;
	text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.1em black;
}
h2{
	font-size:25px;
	line-height:28px;
	margin-bottom:12px;
}
h3{
	font-size:22px;
	line-height:20px;
	margin-bottom:10px;
	margin-top:0px;
}

h4{
	font-size:20px;
	line-height:18px;
	margin-bottom:6px;
	margin-top:5px;
}
h5{
	font-size:18px;
	line-height:18px;
	margin-bottom:10px;
}
h6{
	font-size:16px;
	font-family: "微軟正黑體";
}
p{
	padding-bottom:10px;
	margin-top:8px;
	font-family: "微軟正黑體";
}
a{ 
	text-decoration: none;
	}

.container img{
	max-width:96.9%;
	height:auto;
	border: thin solid #CCC;
		border-radius:8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

.thumb_img{
	float:left;
	margin-right:15px;
	display:block;
	margin-left: 10px;
}
.thumb_img h4{
	background-color:#eba73c;
	border-radius:100%;
	text-align:center;
	color:#FFFFFF;
	overflow:hidden;
	display:block;
	font-size:23px;
	width:55px;
	height:35px;
	padding-top:20px;
}

.img_border{
	padding:5px;
	background-color:#E8E0B5;
}
.client_img_border{
	margin-bottom:0px;
	border-top-style: none!important;
	border-right-style: none!important;
	border-bottom-style: none!important;
	border-left-style: none!important;
}
.description{
	display:block;
	overflow:hidden;
}
.v_space{
	height:0px;
}
.v_space2{
	margin-top:40px;
	margin-bottom:20px;

}
a.read:link{
	text-align:center;
	font-size:14px;
	font-family: 'Oswald',sans-serif;
	text-decoration:none;
	position:relative;
	text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.1em black;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}
a.read:hover{
	color:#FCC514 !important;
	text-decoration:none;
	text-shadow: 1px 1px 5px black, 0 0 2em blue, 0 0 0.5em blue;
}
.clients_subtitle{
	color:#FEB340;
	line-height:20px;
	font-size:15px;
}

/* Logo Section
------------------------------------------------------*/

.logo{
	float:left;
	border:none;
	text-align: center;
	padding-left: 30px;
}
.logo img{
	border:none;

}
.logo a:link{
text-decoration:none;
	
}
.slide_menu{
	float:right;
	width:100px;
	text-align: right;
	display: inline-block;
	margin-bottom: 15px;
}

/* @ content section
------------------------------------------------------*/
.content_subtitle h3{
	color:#C89E45;
}
.about_br img{
	margin-bottom:15px;
}
.about_border{
	background-color:#666666;
	width:100%;
	height:1px;
	overflow:hidden;
	display:block;
}

.homepage_textcontainer{
	display:block;
	overflow:hidden;
	text-align: center;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom:20px;
	padding-left: 0px;
}
.homepage_textcontainer p{
	margin-top:5px;
	padding-top: 5px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #900;
	}
	
/* @services page
------------------------------------------------------*/
.services_title h3{
	padding-bottom:3px;
	margin-top:23px;
	text-transform:uppercase;
}
.service_list ul{
	color:#0066CC;
	margin-left:0px;
	padding:0px;
	list-style:circle;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.service_list li{
	background-image:url(images/arrow.png);
	color:#0066CC;
	background-repeat:no-repeat;
	background-position:left 7px;
	overflow:hidden;
	display:block;
	padding-left:10px;
	overflow:hidden;
	display:block;
	margin-top:5px;
	margin-right: 0px;
	margin-left: 0px;
}

.service_list li a{
	color:#FFFFFF;
	text-decoration:none;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
.service_list a:hover{
	color:#CCBC5D;
}
/* @ contact page Section
----------------------------------------------------------------------------------------------------*/
#contact-form input, #contact-form textarea {
	padding: 5px;
	font-family: 'Fjalla One', sans-serif;
	margin: 0px 0px 10px 0px;
	border: 1px solid #D2E9F8;
	color:#010315;
}
#contact-form input {
	width:95%;
	background-color:#FFF;
    background-repeat:repeat;
	position:relative !important;
	float:none;
	border-radius:5px;
	
}
#contact-form textarea {
	height:150px;
	width:96%;
	background-color:#FFF;
    background-repeat:repeat;
	border-radius:5px;
}
#contact-form textarea:focus, #contact-form input:focus {
	border: 1px solid #FFF;
}
#contact-form p input#submit {
	float:left;
    text-align:center;
	color:#FFF !important;
	font-size:14px;
	font-family: 'Fjalla One',sans-serif;
	padding:10px;
	text-decoration:none;
	border-radius:25px;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
	position:relative;
	background-color:#5694C6;
	width:100px !important;
	border:none;

}
#contact-form p input#submit:hover {
	color:#CAE7F8 !important;
	padding:10px;
	text-decoration:none;
	background-color:#010315;
	cursor:pointer;
	}
#contact-form label {
	width:70px;
	padding-top: 1px;
	font-size:13px;
	font-family: 'Fjalla One', sans-serif;
	color:#fff;
}
.vaidate_error {
	border:1px solid #F96E5B!important;
}
#response {
	color:#010315;
	font-size:16px
}
.contact_bg{
	width:100%;
	height:200px;
}
.contact_page {
	padding-bottom:5px;
	color:#330F00;
	font-size: 16px;
	background-image: url(images/but/location.png);
	background-repeat: no-repeat;
	text-indent: 26px;
	margin-top: 20px;
}
.contact_page h4{
	color:#330F00;
}



/* @ footer Section
------------------------------------------------------*/
.footer_bg{
	width:100%;
	background:url(images/bg/footer.png) repeat-x left top;
	position:fixed;
	z-index:-1;
	bottom:0px;
	height:5%;
/*	border-top:7px #054770 solid;*/
	overflow:hidden;
}
#footer{
	overflow:hidden;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;

}
.copy_right{
	text-shadow: shadow1, shadow2, shadow3;
	text-shadow: 0px 0px 3px #2E70A3, 1px 1px 5px rgba(2,4,29,0.9);
	float:left;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFF;
}

.copy_right a{
	font-weight:bold;
	color:#FFE590;
	text-decoration: none;
}
.copy_right a:hover{color:#FCC514}

ul.social_icons{
	list-style:none;
	float:right;
	padding:0px;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
}

ul.social_icons li{
	display:inline-block;
	background-color:#500000;
	border-radius:100px;
	width:35px;
	height:35px;
	text-align:center;
}
.social_icons img{
	border:none;
}

ul.social_icons li:hover{
	background-color:#C89E45;
}

/* __________ Accordion __________ */
#accordion {
	padding-top:11px;
	display: block;
}
#accordion h4.accordion_title {
	position:relative;
	margin:0;
	text-transform:none;
	line-height:26px;
	font-size:20px;
	color:#999;
	border-top:1px solid #e9e9e9;
	cursor:pointer;
	transition: color 0.3s ease-in-out;
	-webkit-transition: color 0.3s ease-in-out;
	padding-top: 16px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 50px;
	font-family: "微軟正黑體";
	font-weight: bold;
}
#accordion h4.accordion_title:hover {color:#242424;}
#accordion h4.accordion_title.active {
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #600;
	color: #600;
	padding-bottom: 0px;
}
#accordion h4.accordion_title:before {
	content: "\f105";
	position:absolute;
	left:2px;
	top:12px;
	width:30px;
	height:30px;
	font-family:FontAwesome;
	font-weight:bold;
	text-indent:2;
	line-height:30px;
	text-align:center;
	font-size:18px;
	color:#ccc;
	border:2px solid #ccc;
	border-radius:50%;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
#accordion h4.accordion_title:hover:before {
	color:#333;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
}
#accordion h4.accordion_title.active:before {
	color:#fff;
	background-color:#F90;
	transform:rotate(90deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	border-top-color: #630;
	border-right-color: #630;
	border-bottom-color: #630;
	border-left-color: #630;
}

#accordion .accordion_content {
	display:none;
	color: #333;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 45px;
	line-height: 20px;
}
#accordion .accordion_content p {
	margin-bottom:25px;
	font-size: 14px;
	color: #000!important;
}

/*-----------------------------------------------------------------------------------*/
/*	TOVAR ITEM
/*-----------------------------------------------------------------------------------*/
.tovar_img {
	overflow:hidden;
	position:relative;
	text-align:center;
}
.tovar_img_wrapper img {
	position:absolute !Important;
	left:0;
	top:0;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

.tovar_item .tovar_img_wrapper .img_h,
.tovar_item:hover .tovar_img_wrapper .img {
	opacity:0;
}
.tovar_item:hover .tovar_img_wrapper .img_h {opacity:0.25;}


.tovar_item_btns {
	position:absolute;
	left:79px;
	right:0;
	bottom:-61px;
	margin:0 -5px;
	opacity:0;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.tovar_item:hover .tovar_item_btns {opacity:1; bottom:20px;}
.tovar_item_btns a {
	display:inline-block;
	margin:0 3px 0 5px;
}
.tovar_item_btns a:hover {
	background-color:#333;
	color:#fff;
}
a.add_lovelist:hover {
	color:#cc3333;
	border-color:#cc3333;
	background-color:inherit;
}
.open-project-link {display:inline-block;}
.tovar_view {
	padding:13px 32px;
	text-transform:uppercase;
	font-weight:900;
	font-size:14px;
	color:#333;
	border:2px solid #333;
}
.add_bag, .add_lovelist {
	display:inline-block;
	width:50px;
	height:50px;
	text-align:center;
	line-height:46px;
	font-size:16px;
	color:#333;
	border:2px solid #333;
}
.tovar_description {
	padding:18px 0 0;
}
.tovar_title {
	float:left;
	width:80%;
	display:block;
	text-transform:uppercase;
	font-weight:900;
	line-height:16px;
	font-size:14px;
	color:#333;
}
.tovar_title:hover {color:#232323;}
.tovar_price {
	float:right;
	display:block;
	font-weight:900;
	line-height:16px;
	font-size:14px;
	color:#666666;
}

/* Tovar information */
.tovar_information .box {display: none;}
.tovar_information .box.visible {
	display: block;
	margin-top: -14px;
}

.tovar_information .tabs li {
	position:relative;
	float:left;
	text-transform:uppercase;
	font-weight:900;
	font-size:14px;
	color:#666;
	border:1px solid #e9e9e9;
	cursor:pointer;
	transition: color 0.3s ease-in-out;
	-webkit-transition: color 0.3s ease-in-out;
	list-style-type: none;
	background-color: rgba(255,255,255,0.5);
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 14px;
	padding-right: 20px;
	padding-bottom: 14px;
	padding-left: 20px;
}
.tovar_information .tabs li:hover {color:#333;}
.tovar_information .tabs li.current {
	margin-top:-2px;
	color:#333;
	background: #f0f0f0; /* Old browsers */
	background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 60%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(60%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f0f0f0 0%,#ffffff 60%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f0f0f0 0%,#ffffff 60%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f0f0f0 0%,#ffffff 60%); /* IE10+ */
	background: linear-gradient(to bottom, #f0f0f0 0%,#ffffff 60%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	list-style-type: none;
	border-top-width: 3px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #500000;
	border-bottom-color: #fff;
}

.tovar_information .box {
	margin-top:-14px;
	line-height:18px;
	font-size:12px;
	color:#666;
	border:1px solid #e9e9e9;
	background-color: rgba(255,255,255,0.95);
	padding: 5px;
}