@import 'var.less';


*{
  position:relative;
}
body{
    margin: 0px;
    padding-top: 100px;
    color: #000;
    font-weight: 400;
    font-family: '微軟正黑體','STHeiti','Noto Sans TC', 'Lusitana Normal', 'Lusitana Bold', 'cwTeXMing', '黑體', 'Verdana','新細明體', 'Arial', 'Geneva', 'sans-serif', 'helvetica';
    text-align: justify;
    letter-spacing: 1px;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    
    background-color: #6D7781;
    
}
centerwrap{
	max-width:1280px;
    position: relative;
    margin: auto;
    text-align: center;
    height: 100%;
    display: block;
}
centerwraps{
	max-width:480px;
    position: relative;
    margin: auto;
    text-align: center;
    height: 100%;
    display: block;
}
.centerwrap {
    max-width:1280px;
    position: relative;
    margin: auto;
    text-align: center;
    height: 100%;
}
li{
  list-style: none;
}
a{
  display: contents;
  color: inherit;
  text-decoration: none;
}

h1,h2,h3{
	margin-block-start: 0;
    margin-block-end: 0;
    font-weight: normal;
}

/* placeholder */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-weight: 300;
	color: #d9d9d9;
}
::-moz-placeholder { /* Firefox 19+ */
	font-weight: 300;
	color: #d9d9d9;
}
:-ms-input-placeholder { /* IE 10+ */
	font-weight: 300;
	color: #d9d9d9;
}
:-moz-placeholder { /* Firefox 18- */
	font-weight: 300;
	color: #d9d9d9;
}



.comingsoon{
	height: 500px;
    text-align: center;
    line-height: 500px;
    font-size: 59px;
    font-weight: 100;
    color: #c9b897;
}

.s404{
	background-color: #f9f9f9;
    text-align: center;
    font-size: 100px;
    padding: 30px;
    color: #bbb;
    font-weight: 100;
    font-family: auto;
}

section, footer{
	// -webkit-transition: all 0.3s;
	// -moz-transition: all 0.3s;
	// -o-transition: all 0.3s;
	// transition: all 0.3s;
	// background-color: #FFF;
}

.animation-pause{
	animation-play-state: paused !important;
}

/* 開發測試 */
.dev{
	display: none;
}

// animationDo
// .................................
.animationDo{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

	//淡入
	&[adtype="fadein"].do{
		opacity: 0;
	
	}
	//淡入向下
	&[adtype="fadedown"].do{
		opacity: 0;
		transform: translate(0px,-10px);
	
	}

}
input ,textarea ,select{
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
	-moz-outline:none !important;
	-webkit-outline:none !important;
	outline:none !important;
}


select{
	height: 50px;
    width: 220px;
    font-size: 20px;
    text-align-last: center;
    border: none;
    border-right: 10px solid #FFF;
    border-left: 10px solid #FFF;
}

.pc{
	display: block;
}
.m{
	display: none;
}
pc{
	display: block;
}
m{
	display: none;
}

#fb-root{
	display: none;
	opacity: 0;
}


// demo
section.demo{

	img{
		width: 100%;
		-webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -o-user-select: none;
		  user-select: none;
	}
}

//en
//.........................................
html[lang="en"]{

		.zh_only{
			display: none;
		}
}





//Fb comments RWD
//.........................................
/* 這個元素內嵌在 iframes 裡，有可能造成部分 layout 變形，所以請把它隱藏 */


section.comments{
	#fb-root {
	    display: none;
	}

	/* 讓所有容器的寬度都變成 100% */
	.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	    width: 100% !important;
	}
}




section.customizefooter{
	background-color:#f1e7cc;
	// min-height: 300px;
	padding: 40px;
	border: 5px solid #E5CD8D;

	&:after{
		content: '';
	    background-color: #f1e7cc;
	    position: absolute;
	    width: 80%;
	    height: 5px;
	    left: 10%;
	    top: -5px;
	}

	h2{
		color: #DBB44D;
	    font-family: serif;
	    font-size: 43px;
	    font-weight: 100;
	}
	h3{
		color: #DBB44D;
		font-family: serif;
		    margin-bottom: 30px;
	}
	.text{
		color: #5F5F5F;
		line-height: 1.8;
	}
	.btn{
		background-color:#DBB44D;
	}
	.text02{
		color: #5F5F5F;
		line-height: 1.8;
	}
	.btn{
		background-color: #DBB44D;
	    width: 125px;
	    margin: auto;
	    margin-top: 25px;
	    margin-bottom: 25px;
	    padding: 22px;
	    color: #FFF;
	    border-radius: 5px;
	    cursor: pointer;
	    font-size: 18px;

	    i{
	    	color: #f0eab7;
		    font-size: 30px;
		    vertical-align: middle;
		    margin-left: 10px;
		    margin-right: -10px;

	    }
	}
}


section.page{

	min-height: 300px;
	background-color: #FFF;
	padding: 30px;
	font-family: serif;
	text-align: left;
	color: #5F5F5F;

	font-size: 16px;
	line-height: 1.5;
	padding-top: 100px;


	centerwrap{
		text-align: left;
			max-width: 760px;



		h1{
			font-size: 30px;
			font-weight: bold;
		}

		article{
			font-size: 18px;
			overflow: hidden;


			img{
				max-width: 100%;
				height: auto !important;
			}

			p{
					line-height: 33px;
			}
		}
	}

	

}

// rwd
//.........................................

@media screen and (max-width: @mobilew) {

		body{
			padding-top: 60px;
		}

		.comingsoon{
			font-size: 30px;
		}

		pc{
			display: none;
		}
		m{
			display: block;
		}
		.pc{
			display: none;
		}
		.m{
			display: block;
		}
}