@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(font-awesome.css);
@import url(font-awesome-ie7.css);
@import url(jquery.css);
@import url(jquery-ui.css);
@import url(jquery-ui.theme.css);
@import url(bootstrap.css);
@import url(bootstrap-theme.css);
@import url(/js/fancybox.css);
@import url(/js/wowbook.css);
html{overflow-x:hidden; overflow-y:auto; margin:0; padding:0;}
body{background:#000; margin:0; padding:0;}
*, * *, a{font-size:15px; line-height:30px; color:#fff; font-family:Arial, 'Noto Sans TC', '微軟正黑體';}
a:hover{text-decoration:none; color:#31B0D5;}
h1, h2, h3, h4, h5, h6, strong{font-weight:bold;}
.form-control{margin-bottom:10px;}
.form-control.ckn{max-width:80px; display:inline-block;}
.container{width:100%; max-width:1050px; margin:0 auto;}
header{width:100%; padding-bottom:10px; position:fixed; z-index:900; left:0; top:0; background:rgba(0,0,0,0.7);}
nav{position:absolute; right:0; top:25px;}
nav a{color:#fff; width:150px; text-align:center; font-size:18px; font-weight:bold; display:inline-block;}
nav a div{color:#fff; font-size:12px; line-height:12px;}
nav a:hover, nav a:hover div{color:#ee7534;}
#logo{padding:10px 0 0 15px; display:inline-block;}
#logo img{height:50px;}
#banners{height:100vh; position:relative;}
#banners a{width:100%; height:100vh; background:no-repeat center; background-size:cover; display:block;}
main{display:block; position:relative; margin:20px 0;}
main img{max-width:100%; height:auto;}
#featuresBox{width:100%; overflow:hidden; position:relative;}
#featuresBack, #featuresNext{font-size:50px; position:absolute; z-index:800; top:calc(50% - 25px); color:#ee7534; cursor:pointer;}
#featuresNext{right:0;}
#contactUsInfo{width:calc(100% - 380px); float:left; background:rgba(0,0,0,0.6); padding:20px;}
#productsList{margin:20px 0;}
#productsList a{width:calc(20% - 24px); display:inline-block; text-align:center; margin:0 10px 20px 10px;}
form{width:100%; max-width:350px; margin:0 auto 0 20px; float:right;}
#contactBox{background:url('../images/contactUsBg.png') no-repeat left bottom; background-size:80% auto; padding:50px 0px 50px 20px;}
footer .container{position:relative; padding:0 15px;}
footer .container, footer .container *{color:#fff;}
footer .container .logo img{height:30px; margin:0 20px 10px 0;}
footer .container .fa-facebook-square{color:#4267B2; font-size:50px; line-height:40px; background:#fff; width:40px; height:38px; display:inline-block; border-radius:7px; position:absolute; right:0; top:15px;}
video{width:100vw; height:auto;}
#ajax{max-width:92%; max-height:80vh; overflow-y:auto;}
#ajax, #ajax *{color:#000;}
#ajax img{max-width:100%; height:auto;}
.fr{float:right;}
.hideit{display:none;}
.clear{clear:both;}
.mobile{display:none;}
.mobile-x{display:inline-block;}
.fancybox-toolbar, .fancybox-toolbar *, .fancybox-infobar, .fancybox-infobar *, .fancybox-navigation, .fancybox-navigation *{color:#fff;}
@media screen and (max-width:1050px){
	nav{display:none; width:145px; padding-top:10px; right:0; top:70px; background:rgba(0,0,0,0.8);}
	nav a{margin-bottom:15px; display:block;}
	#navMobile{display:inline-block; position:absolute; right:15px; top:20px;}
}
@media screen and (max-width:800px){
	#contactUsInfo{width:100%; float:none;}
	#contactBox{background-size:auto 100%;}
	footer .container .logo{display:block;}
	.mobile{display:inline-block;}
	.mobile-x{display:none;}
}
@media screen and (max-width:700px){
	#logo img{width:80%; height:auto;}
	#navMobile{top:17px;}
	#productsList a{width:calc(50% - 20px); margin:0 20px 20px 0;}
	#productsList a:nth-child(even){margin-right:0;}
	form{width:100%; max-width:350px; margin:0 auto; padding:20px 10px 100px 10px; float:none;}
	#contactBox{padding:20px 10px 100px 10px;}
	footer .container a{display:inline-block;}
	footer .container .fa-facebook-square{right:10px; top:-10px;}
}
@media print{
	html, body{ width:100%; height:auto; overflow:auto; }
}