@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(bootstrap.css);
@import url(font-awesome.css);
:root{--ci1:#0168b7;}
body{overflow:visible;}
html{overflow-x:hidden; overflow-y:auto; width:100vw; font-size:15px; background:#eee;}
html, body{position:relative; z-index:-2;}
body{width:100%;}
*{font-family:'Noto Sans TC', 'FontAwesome', '微軟正黑體', sans-serif; font-size:15px; line-height:25px;}
p{margin:0;}
a{color:#1A449A;}
h5{font-size:18px; line-height:18px; margin-bottom:5px; font-weight:bold;}
ul{margin:0; padding-left:20px; display: block;}
.hideit{display:none;}
.main{max-width:736px; margin:0 auto; position:relative;}
header{position:fixed; z-index:900; left:0; top:0; width:100vw; background:url('../images/headerBg.jpg') repeat-x; background-size: auto 100%; box-shadow:0 2px 3px rgba(0,0,0,0.4);}
header .main{color:#fff; font-size:30px; line-height:30px; padding:15px 0; font-weight:400;}
header .main span{color:#fff; font-size:30px; line-height:30px; padding:15px 0; font-weight:400;}
header .fa-navicon{color:#fff; font-size:30px; line-height:30px; position:absolute; right:10px; top:28px; text-decoration:none; cursor:pointer;}
header .phone{position:absolute; right:45px; top:28px; font-size:26px; font-weight:900; color:#fff; letter-spacing:1px;}
nav{position:fixed; z-index:900; right:calc(50vw - 375px); top:66px; background:rgba(255,255,255,0.8); display:none;}
nav a{display:block; font-size:18px; line-height:18px; color:var(--ci1); padding:10px 15px;}
nav a.blod{background-color:var(--ci1); color:#fff; font-weight:bold;}
nav a.blue{color:#fff; background:var(--ci1); font-size:18px; line-height:18px; margin-bottom: 0;}
main{padding:20px 15px; max-width:700px; background:#fff; border:2px #BFBFBF solid; margin:-30px auto 20px auto; position:relative;}
main .blue{font-size:18px;}
main section{text-align:left; position:relative;}
#closeArtile{position:fixed; z-index:900; right:10px; top:70px; font-size:30px; width:40px; height:40px; line-height:40px; background:var(--ci1); color:#fff; border-radius:20px; text-align:center;}
article{position:fixed; z-index:890; left:0; top:40px; width:100vw; height:calc(100vh - 98px); background:#fff; padding:20px 15px 60px 15px; overflow-x:hidden; overflow-y:auto;}
label{display:inline-block; margin-right:15px;}
label input{display:inline-block; width:auto; max-width:none;}
#title{color:var(--ci1); font-size:26px; line-height:26px; margin-bottom:25px;}
#banner_box{width:100%; height:90vh; position:relative; display:block;}
#banners a{width:100%; max-width:none; height:90vh; text-align:center; background:center no-repeat; background-size:cover; display:block;}
#phone{position:fixed; z-index:900; left:0; bottom:0; width:100vw; background:url('../images/bgPhones.jpg') repeat-x; background-size:auto 100%; border-top:2px var(--ci1) solid;}
#phone a{display:inline-block; position:relative; text-align:center; width:50%; padding:8px 0;}
#phone a img{height:40px;}
#phone a:nth-child(1):after{content:''; width:2px; height:40px; background:var(--ci1); display:inline-block; position:absolute; z-index:901; right:-2px;}
.blackBar{background:url('../images/bgBlackBar.jpg') repeat-x; background-size:1px 100%; height:60px; line-height:60px; color:#fff; font-size:30px; font-weight:bold; text-align:center;}
.forms{background:#EFEFEF; padding:15px 0;}
.forms form{margin:15px 10%; position:relative;}
.forms form input{width:100%; margin-bottom:10px; position:relative;}
.forms form input:nth-last-child(1){margin-top:10px;}
.forms form label input{width:auto; margin-bottom:10px; position:relative;}
footer{text-align:center; margin-bottom:70px;}
.grayBar{background:#3E3A39; color:#fff; padding:20px 0;}
ul.caseList{margin:20px auto; padding:0; max-width:557px;}
ul.caseList li{list-style:none; margin:0 0 20px 0; padding:0;}
.redBox{border:2px var(--ci1) solid; border-radius:5px; text-align:center; max-width:80%; margin:20px auto; padding:0 0px 15px 0px; font-size:18px;}
.redBox h5{background:var(--ci1); color:#fff; margin:-2px 0 10px 0; padding:15px 0; border-radius:5px 5px 0 0;  font-size:22px;}
.redBox h5 a{color:#fff;  font-size:22px;}
h5.title{color:var(--ci1); font-size:22px;}
#banner_box{position:relative; z-index:-1; max-height:540px; margin-top:60px;}
#banner_box a{display:block; width:100%; height:80vh; max-height:540px; background:no-repeat center; background-size:cover;}
#index_adsense_nav{position:absolute; z-index:900; bottom:15px; text-align:center;}
form{text-align:left;}
form section{margin-left:17%; display:inline-block; position:relative;}
form .form-control, form button{width:100%; max-width:45%; display:inline-block;}
.form-control{margin-bottom:15px;}
.form-control.inline{max-width:40%;}
.bannerTitleBox{background:rgba(255,255,255,0.4); margin:90px auto 0 auto; padding:30px 30px; display:inline-block; text-align:center; width:100%; max-width:700px; font-size:20px; line-height:30px; color:#333;}
.bannerTitleBox strong{font-size:30px; color:var(--ci1);}
.blue{color:var(--ci1); font-size:30px; line-height:30px; margin-bottom:15px;}
.q{background:url('../images/q.png') no-repeat; padding-left:25px; min-height:20px;}
.a{background:url('../images/a.png') no-repeat; padding-left:25px;}
.fl{float:left; margin:0 10px 10px 0;}
.clear{clear:both;}
.mobile{display:none;}
.mobile-x{display:inline-block;}
@media screen and (max-width:736px){
	nav{right:0;}
	.mobile{display:inline-block;}
	.mobile-x{display:none;}
}
@media screen and (max-width:600px){
	form section{width:100%;}
	.form-control.inline{max-width:calc(48% - 15px); margin-right:15px;}
}
@media screen and (max-width:600px){
	*{font-size:13px; line-height:18px;}
	header{padding:5px 0;}
	header .main{padding:0;}
	header .main span{font-size:18px; line-height:18px;}
	header .phone{font-size:1.2rem; line-height:1; position:absolute; top:13px;}
	header br{line-height:0; height:0;}
	header .main .title{position:absolute; left:10px; top:-10px;}
	header .main .fa-navicon{font-size:18px; line-height:18px; top:13px;}
	#closeArtile{top:40px;}
	article{top:0; height:calc(100vh - 50px);}
	nav{top:58px;}
	main{max-width:90vw;}
	.redBox{max-width:98%; font-size:13px;}
	.redBox h5, .redBox h5 a{font-size:18px;}
	.grayBar{padding:20px 15px;}
	#banner_box{margin-top:30px; max-height:50vh;}
	#banners a{max-height:50vh;}
	.bannerTitleBox{margin-top:10vh; width:90vw;}
	form button{max-width:none; display:block;}
	form section{margin-left:0; margin-bottom:20px; margin-bottom:10px;}
	form section label{margin-bottom:15px;}
	#phone a img, #phone a:nth-child(1):after{height:26px;}
	#phone a:nth-child(1):after{right:0;}
	footer{font-size:12px; padding:20px 15px;}
}
@media print{
	html, body{ width:100%; height:auto; overflow:auto; }
}