body,html{
	font-family: "Century Gothic",微軟正黑體;
	font-size: 8px;
	width:100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
section{
	position: relative;
	color:#333;
	background-color: #f2f2f2;
	max-width: 1366px;
	box-sizing: border-box;
	overflow:hidden;
}
a,a:visited{
	text-decoration: none;
	cursor:pointer;
	color: #333;
}

h1,h2,h3,h4,h5,h6,ul,ol,li{
	padding: 0;
	margin: 0;
	font-weight: 500;
}
h1{
	font-size: 5rem;
	/*40px*/
}
h2{
	font-size: 4rem;
	/*32px*/
}
h3{
	font-size: 3rem;
	/*24px*/
}
h4{
	font-size: 2.5rem;

	/*20px*/
}
h5{
	font-size: 2rem;
	/*16px*/
}
h6{
	font-size: 1.8rem;
	/*14.4px*/
}

img{
	width: 100%;
}
.rwdgrid{
	display: flex;
	align-items: top;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,
.sm-col-1,.sm-col-2,.sm-col-3,.sm-col-4,.sm-col-5,.sm-col-6,.sm-col-7,.sm-col-8,.sm-col-9,.sm-col-10,.sm-col-11,.sm-col-12
{
	box-sizing: border-box;
	padding: 10px;
	margin: 10px 0;
}
.sm-col-2{
	width: 16.6%;
}
.sm-col-3{
	width: 25%;
}
.sm-col-4{
	width: 33.3%;
}
.sm-col-6{
	width: 50%;
}
.sm-col-8{
	width: 66.6%;
}
.sm-col-9{
	width: 75%;
}
.sm-col-10{
	width: 83.3%;
}
.sm-col-11{
	width: 91.6%;
}
.sm-col-12{
	width: 100%;
}
.aligncenter{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.upbtn{
	position: fixed;
	bottom: 20px;
	right:0;
	font-size: 2rem;
	line-height: 30px;
	text-align: center;
	width: 30px;
	height: 30px;
	border-radius: 99em;
	background: #fff;
	color: #736f5f;
	z-index: 1;
}
.bn{
	width: 100%;
	height: auto;
}
.bn img{
	width: 103%;
}
.bntitle{
	font-weight: 900;
	color: #fff;
	position: absolute;
	top:50px;
	left: 50%;
	transform: translateX(-50%); 
	font-size: 4rem;
	width: 80%;
	text-align: center;
}

.brand{
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%); 
}
.brand img{
	width: 80%;
}
.bnsubtitle{
	position: absolute;
	top: 100px;
	width: 50%;
	border: solid 1px #fff;
	color: #fff;
	padding: 1% 2%;
	letter-spacing: 2px;
	text-align: center;
}
.bnsubtitle h4{
	display: inline;
}
.bnsubtitle h4:nth-child(2){
	background-color: #fff;
	color: #736c59;
}
.video{
	background-color: #dedace;
	padding: 5% 0;
}
.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 90%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}
.videobtn{
	width: 90%;
	margin-top: 5%;
}
.videobtn ul{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.videobtn a{
	margin: 0;
}
.videobtn li{
	list-style-type: none;
	border: double 2px #fff;
	text-align: center;
	padding: 10% 15%;
}
.videobtn li img{
	width: 70%;
	margin-bottom: 5%;
}

.videobtn a:nth-child(3) h6{
	font-size: 1.5rem;
}

.law{
	background-image: url(./assets/j02.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
	background-color: #f2eae3;
	padding-bottom: 10%;
}
.title{
	font-weight: 900;
	color: #a6783a;
	background-color: rgba(255,255,255,0.5);
	text-align: center;
	margin-bottom: 3%;
	width: 100%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.title:before{
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	border-bottom: solid 2px #a6783a;
	width: 10%;
	height: 10px;
	z-index: -1;
}
.title:after{
	content: "";
	position: absolute;
	top: 2px;
	right: 0;
	border-bottom: solid 2px #a6783a;
	width: 10%;
	height: 10px;
	z-index: -1;
}
.lawpic{
	width: 70%;
}
.lawpic img{
	width: 100%;
}
.law h5,.law h6{
	width: 85%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	font-weight: 900;
}
.law h5:before{
	content: "";
	position: absolute;
	top: 3px;
	left: -5%;
	background-image: url(./assets/04.svg);
	background-position: center;
	background-size: 100%;
	width: 10px;
	height: 10px;
}
.law h6{
	margin-bottom: 2%;
}
.law button{
	border: double 2px #fff;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 900;
	padding: 5px 10%;
	background-color: rgba(234,225,212,0.1);
	margin-top: -15%;
}
.law h6 span{
	color: #e50112;
	text-decoration: line-through;
}

.product{
	background-image: url(./assets/j03.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
	background-color: #f3f2ee;
	padding-bottom: 3%;
}
.product .title:before ,.product .title:after{
	width: 30%;
}
.fixbrand{
	width: 30%;
	padding-left: 63%;
	margin-top: 40%;
	margin-bottom: 10%;
}
.prosubtitle{
	position: relative;
}
.prosubtitle h4{
	margin-left: 10%;
}
.product .prosubtitle h2{
	width: 100%;
	text-align: center;
	color: #333;
}
.prosubtitle h2:before{
	content: "";
	position: absolute;
	top: 10%;
	left: 0;
	border-bottom: solid 1px;
	width: 10%;
	height: 10px;
	transform:rotate(-30deg) ;
}
.prosubtitle h4:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-bottom: solid 1px;
	width: 15%;
	height: 10px;
	transform:rotate(-30deg) ;
}
.prosubtitle img{
	width: 80%;
	margin: 5% 10%;
}
.product .rwdgrid{
	align-items: center;
}
.des01 img{
	width: 200%;
}
.des02 img{
	width: 150%;
	margin-left: -50%;
}
.product h6{
	border-bottom: solid 2px;
	line-height: 2.5rem;
	padding-bottom: 1.5rem;
}
.des01 h6{
	text-align: right;
}
.product h2{
	text-align: center;
	background: linear-gradient(0.2turn, #c59e63, #ecd482, #c59e63);
	background-clip: text;
  	-webkit-background-clip: text;
  	color: transparent;
  	font-weight: 900;
}
.product h4{
	text-align: center;
	margin-bottom: 10%;
}
.des02img img{
	margin: 1% 0;
}
.carpenter{
	background-image: url(./assets/j07.jpg);
	background-size: 180%;
	background-color: #f8f8f6;
	background-repeat: no-repeat;
}
.carpenter img{
	width: 50%;
}
.carpenter .title:before ,.carpenter .title:after{
	width: 20%;
}
.carpenter .title{
	margin-bottom: 5%;
}
.carpenter h3,.carpenter h6{
	width: 80%;
	font-weight: 900;
}
.carpenter h3{
	text-align: center;
	font-size: 2.2rem;
	color: #936136;
	margin: 5% 0;
}
.carpenterinfo{
	margin: 5% 0;
}
.ser{
	text-decoration: underline;
	background-color: #fff;
	padding: 2px 5px;
}
.carpenter button{
	border: double 2px #fff;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 900;
	padding: 10px 10%;
	background-color: rgba(234,225,212,0.1);
	margin-top: 9%;
	margin-bottom: 3%;
}
.qa{
	background-image: url(./assets/j12.jpg);
	background-size: 100%;
	/*background-repeat: no-repeat;*/
	/*padding-bottom: 50%;*/
}
.qa .title:before ,.qa .title:after{
	width: 35%;
	top: 6px;
}

.qa .title{
	background: linear-gradient(0.3turn,#6f6a5b 10%, #fff 50%, #6f6a5b 90%);
	color: #aa763d;
  	font-weight: 900;
  	padding: 1% 0;
}

.qa li{
	font-size: 1.5rem;
	color: #fff;
	padding: 0 10%;
}
.qa li a,.qa li a:visited{
	text-decoration: none;
	cursor:pointer;
	color: #fff;
}
.notice{
	background-color: #e2ded5;
}
.notice .title{
	padding: 1% 0;
}
.notice .title:before ,.notice .title:after{
	width: 35%;
	top: 6px;
}

.notice li{
	font-size: 1.5rem;
	padding: 0 10%;
}
.des03{
	position: relative;
	background-color: #e2ded5;
	padding: 10%;
}
.des03 .destitle{
	font-weight: 900;
	color: #fff;
}

.des03 .dessubtitle{
	display: inline-block;
	border: solid 1px #fff;
	color: #fff;
	padding: 1% 5px;
	letter-spacing: 2px;
	text-align: center;
}
.des03 .dessubtitle h4{
	display: inline;
}
.des03 .dessubtitle h4:nth-child(2){
	background-color: #fff;
	color: #d8b780;
}
.des03 button{
	border: double 2px #fff;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 900;
	padding: 10px 10%;
	background-color: rgba(226,222,213,0.1);
	margin-top: 9%;
	margin-bottom: 3%;
}
.closebtn{
	width: 50px;
	height: 50px;
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 100%;
	background: #d75f70;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	line-height: 40px;
	font-size: 32px;
}
.popup-box {
  width: 50%;
  padding: 50px 75px;
  transform: translate(-50%, -50%) scale(0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  background: #fff;
  text-align: center;
}
.popup-wrap {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  content: '';
  background: rgba(0, 0, 0, 0.85);
}
.close-btn {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 100%;
  background: #d75f70;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  line-height: 40px;
  font-size: 32px;
}

.transform-in, .transform-out {
  display: block;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.transform-in {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.transform-out {
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
}

@media screen and (max-width: 330px){
body,html{
	font-size: 8px;
}	
.qa li{
	font-size: 1rem;
}
.bnsubtitle{
	width: 60%;
}
}
@media screen and (min-width: 768px) and (max-width: 789px){
body,html{
	font-size: 12px;
}
h6{
	font-size: 2rem;
}
.upbtn{
	font-size: 2rem;
	line-height: 40px;
	width: 40px;
	height: 40px;
}
.bntitle{
	font-size: 6rem;
	top: 70px;
}
.bnsubtitle{
	width: 50%;
	padding: 0;
	top: 180px;
}
.product h4{
	margin: 0;
}
.bnsubtitle h4{
	font-size: 3.5rem;
	margin: 0;
}
.prosubtitle h4 {
    margin-left: -45%;
    font-size: 3rem;
}
.prosubtitle h2 {
    font-size: 7rem;
}
.law h4 ,.product h4 ,.qa h4 ,.notice h4{
	font-size: 4.5rem;
	padding: 2% 0;
}
.videobtn a:nth-child(3) h6{
	font-size: 2.3rem;
}
.videobtn a h6{
	font-size: 2.8rem;
}
.title:before ,.title:after{
	top: 43%;
	width: 10%;
}
.qa .title:before, .qa .title:after{
	top: 43%;
	width: 35%;
}
.notice .title:before, .notice .title:after{
	top: 43%;
	width: 35%;
}
.law button ,.carpenter button ,.des03 button{
	font-size: 2.5rem;
}
.qa li{
	font-size: 2rem;
}
.carpenter h3{
	font-size: 3rem;
}
}
@media screen and (min-width: 790px) and (max-width: 1080px){
body,html{
	font-size: 14px;
}
h6{
	font-size: 2rem;
}
.upbtn{
	font-size: 2rem;
	line-height: 60px;
	width: 60px;
	height: 60px;
}
.bntitle{
	font-size: 6rem;
	top: 70px;
}
.bnsubtitle{
	width: 40%;
	padding: 0;
	top: 200px;
}
.product h4{
	margin: 0;
}
.bnsubtitle h4{
	font-size: 3rem;
	margin: 0;
}
.prosubtitle h4 {
    margin-left: -45%;
    font-size: 3rem;
}
.prosubtitle h2 {
    font-size: 7rem;
}
.law h4 ,.product h4 ,.qa h4 ,.notice h4{
	font-size: 4.5rem;
	padding: 2% 0;
}
.videobtn a:nth-child(3) h6{
	font-size: 2.3rem;
}
.videobtn a h6{
	font-size: 2.8rem;
}
.title:before ,.title:after{
	top: 43%;
	width: 10%;
}
.qa .title:before, .qa .title:after{
	top: 43%;
	width: 35%;
}
.notice .title:before, .notice .title:after{
	top: 43%;
	width: 35%;
}
.law button ,.carpenter button ,.des03 button{
	font-size: 2.5rem;
}
.qa li{
	font-size: 2rem;
}
.carpenter h3{
	font-size: 3rem;
}
.qa li{
	font-size: 2.3rem;
}

}

@media screen and (min-width: 1081px){
body,html{
	font-size: 14px
}
.col-2{
	width: 16.6%;
}
.col-3{
	width: 25%;
}
.col-4{
	width: 33.3%;
}
.col-6{
	width: 50%;
}
.col-8{
	width: 66.6%;
}
.col-9{
	width: 75%;
}
.col-10{
	width: 83.3%;
}
.col-11{
	width: 91.6%;
}
.col-12{
	width: 100%;
}

.bntitle{
	top:100px;
	font-size: 9rem;
}
.bnsubtitle{
	top: 280px;
	width: 45%;
	padding: 0;
	letter-spacing: 2px;
	font-weight: 900;
}
.bnsubtitle h4{
	font-size: 5rem;
}
.law h4 ,.product h4 ,.qa h4 ,.notice h4{
	font-size: 4.5rem;
	padding: 2% 0;
}
.title:before ,.title:after{
	top: 43%;
	width: 20%;
}
.law h5:before{
	width: 30px;
	height: 30px;
}
.product .prosubtitle h2{
	font-size: 7rem;
}
.prosubtitle h4{
	margin-left: -45%;
	margin-bottom: 0;
}
.prosubtitle h2:before {
	width: 20%;
}
.product h2{
	font-size: 8rem;
	margin-top:5%; 
}
.carpenter{
	background-size: 100%;
}
.carpenter h3{
	font-size: 4.2rem;
}
.carpenter h6{
	font-size: 2.6rem;
}	
.qa .title:before, .qa .title:after{
	top: 43%;
	width: 35%;
}
.qa li{
	font-size: 2.5rem;
	line-height: 4rem;
}
.notice .title:before, .notice .title:after{
	top: 43%;
	width: 35%;
}
.upbtn{
	bottom: 20px;
	right:20px;
	background: #736f5f;
	color: #fff;
	padding: 10px;
	z-index: 1;
}

}