@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

/*
purple #B1658B;
red #CA2420;
blue #326295;
orange #F89829;
*/

*, *::before, *::after {
  box-sizing: Border-box;
}

.lihsi-desktop{
	display: block !important;
}

/*768*/
.lihsi-mobile{
	display: none !important;
}


input:focus,select:focus,textarea:focus {outline:0;}

html,body{
	letter-spacing: 3px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "新細明體", "蘋果儷黑體", Verdana, sans-serif;
}

html{
  box-sizing: border-box;
  
}

body{
	background: #ffffff;
}

body,input,button,select,textarea{
	font-family: "微軟正黑體", "微软雅黑","Helvetica Neue", Helvetica, Arial, sans-serif;
}

.wrap{
	position: relative;
	width: 100%;
	height: auto;

	background: #FFF;
	overflow-x: hidden;
}

img{
	display: block;
}

img.img-full{
	width: 100%;
}

section{
	position: relative;
	display: block;
	width: 100%;
}

.owl-carousel.owl-theme .owl-dots{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

section.st1 .showroom{
	position: absolute;
	width: 90%;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
}

section.st2 .showroom{
	position: absolute;
	width: 70%;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -22%);
}

section.contact{
	position: relative;
	display: block;
	width: 100%;

	background: url("../images/keycut_8_d.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center; center;
}

section.contact .mainblock{
	position: relative;
	display: block;
	width: 90%;

	padding: 10% 0;

	margin: 0 auto;
}

section.contact .mainblock iframe{
	width: 100%;
}

section.contact .mainblock .formblock{
	display: block;
	width: 100%;
	max-width: 800px;
	padding-top: 6%;
	margin: 0 auto;
}

section.contact .mainblock .formblock .unittitle{
	display: inline-block;
	width: 100%;
	padding-bottom: 6%;
	text-align: center;
}

section.contact .mainblock .formblock .unittitle img{
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}

section.contact .mainblock .formblock .formzone{
	display: flex;
	justify-content: space-between;

	font-size: 20px;
}

section.contact .mainblock .formblock .formzone .formleft{
	display: inline-block;
	width: 48%;
}

section.contact .mainblock .formblock .formzone .formright{
	display: inline-block;
	width: 48%;
}

section.contact .mainblock .formblock .formzone .formobject{
	display: inline-block;
	width: 100%;
	padding-bottom: 5%;
}

section.contact .mainblock .formblock .formzone .formobject span.title{
	display: inline-block;
	width: 100%;

	padding-bottom: 2%;

	font-weight: 500;
	letter-spacing: 0;
	color: #000;
}

section.contact .mainblock .formblock .formzone .formobject input[type='text']{
	display: inline-block;
	width: 100%;
	padding: 2%;

	letter-spacing: 0;
	color: #000;

	border: 2px solid #ea5514;
}

section.contact .mainblock .formblock .formzone .formobject textarea{
	display: inline-block;
	width: 100%;
	height: 135px;
	padding: 2%;

	letter-spacing: 0;
	color: #000;

	border: 2px solid #ea5514;
}

section.contact .mainblock .formblock .formzone .formobject label{
	display: flex;
	width: 100%;
	align-items: center;
	letter-spacing: 0;
	color: #000;

	font-weight: 500;
}

section.contact .mainblock .formblock .formzone .formobject label input[type='checkbox']{
	position: relative;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-right: 2%;
  border: 1px solid #808080;
  cursor: pointer;
  background: #FFF;
}

section.contact .mainblock .formblock .formzone .formobject label input[type='checkbox']:checked::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ea5514;
}

section.contact .mainblock .formblock .formzone a.sendbtn{
	display: inline-block;
	width: 100%;
	padding: 3%;

	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0;
	color: #FFF;

	text-align: center;
	background: linear-gradient(to right, #e39947, #d24537);

	text-decoration: none;
}

section.contact .mainblock .formblock .formzone a.sendbtn:hover{
	background: #ea5514;
	text-decoration: none;
}


/*大於等於1921*/
@media (min-width: 1921px) {
}


/*小於等於1920*/
@media (max-width: 1920px) {
}

/*小於等於1800*/
@media (max-width: 1800px) {
}

/*小於等於1600*/
@media (max-width: 1600px) {

}

/*小於等於1441*/
@media (max-width: 1441px) {

}

/*小於等於1280*/
@media (max-width: 1280px) {
}

/*小於等於1160*/
@media (max-width: 1160px) {

	
}

/*小於等於1024*/
/* pad default */
@media (max-width: 1024px) {
}

/*小於等於992*/
@media (max-width: 992px) {
}

/*小於等於960*/
@media (max-width: 960px) {

	.lihsi-desktop{
		display: none !important;
	}

	.lihsi-mobile{
		display: block !important;
	}

}

/*小於等於768*/
@media (max-width: 768px) {
}

/*小於等於575*/
/*mobile*/
@media (max-width: 575px) {
}

@media (max-width: 480px) {

	.owl-theme .owl-dots .owl-dot span{
		width: 10px !important;
		height: 10px !important;
		margin: 5px 3px !important;
	}

	section.st2 .showroom{
		width: 80%;
		transform: translate(-50%, -28%);
	}

	section.contact .mainblock{
		width: 100%;
		padding: 10% 15px;
	}

	section.contact .mainblock .formblock .unittitle{
		padding-bottom: 2%;
	}

	section.contact .mainblock .formblock .unittitle img{
		max-width: 120px;
	}

	section.contact .mainblock .formblock .formzone{
		flex-wrap: wrap;
		font-size: 16px;
	}

	section.contact .mainblock .formblock .formzone .formleft, section.contact .mainblock .formblock .formzone .formright{
		width: 100%;
	}

	section.contact .mainblock .formblock .formzone a.sendbtn{
		font-size: 16px;
	}

}

/*小於等於414*/
@media (max-width: 414px) {
	
}

/*小於等於380*/
@media (max-width: 380px) {

}



/*小於等於350*/
@media (max-width: 350px) {
}