@charset "utf-8";
body {margin:0; padding:0; font-size:15px; font-family:Arial, Helvetica, sans-serif,'微軟正黑體';}
a{text-decoration:none;}
*{box-sizing:border-box;}

#defaultimg, .content, #footer{width:100%; height:auto; float:left;}
.page{height:auto; position:relative; margin:auto auto; padding:auto auto;}
.block{height:auto; float:left;}
.rwdimg{width:100%; height:auto;}
/*nav*/
.nav{height:auto; float:right; text-align:right;}
.nav a{color:#333;}
.nav span{color:#CCC;}
.content{padding:1em;}
/*header*/
#header{width:100%; height:auto; position:fixed; top:0; background:url(images/header-bg.jpg) repeat-x bottom; z-index:100;}
#logo{height:auto; float:left;}
/*defaultimg*/
#defaultimg{box-shadow:0 0 5px rgba(0,0,0,0.3); margin-top:3em;}
#defaultimg img{width:100%; height:auto;}
.bannerimg {width:100%;}



/*defaultservice*/
.defaultservice{background:url(images/default-bg1.jpg) #000; text-align:center; padding:4em 0;}
.defaultservice .block{width:33.3%; padding:1.5em;}
.defaultservice img{width:70%; height:auto; border-radius:50%; box-shadow:0 0 8px rgba(0,0,0,0.3);}
.defaultservice h1{color:#C00; margin:0.5em 0 0.2em 0;}
/*defaultabout*/
.defaultabout{background:url(images/default-bg2.jpg) center; color:#fff; padding:2em 0; line-height:180%;}
.defaultabout h2{text-align:center;}
.defaultabout a{background:#C00; color:#fff; padding:0.2em 5em;}
.defaultabout a:hover{background:#fff; color:#C00; border:1px solid #C00;}
/*footer*/
#footer{background:#000; padding-top:1em;}
#footer a{color:#ccc; padding:1em;}

.tit{font-weight:normal; color:#666; text-align:center; margin:1em; font-size:28px;}
.btn{background:#666; color:#fff; border-radius:5px; padding:0.5em 2em;}
.btn:hover{background:#333;}
/*input frame*/
.inputframe{height:auto;  padding:10px; text-align:left;}
.inputframe input{height:30px; width:100%;}
.inputframe textarea{width:100%;}
select{height:auto; width:100%;}

/*price*/
.price .block{ text-align:center;}
.pricetit{height:3em; width:100%; display:block; margin:0; padding:0.5em;}
.pricecontent{ height:3em;  width:100%; display:block; margin:0; padding:0.5em; color:#036;}
.pricecontent input{width:100%;}
.price h4{margin:0em 0;}
/*table color*/
.color1{border:1px solid #375164; color:#fff;}
.color1 .pricetit{background:#375164;}
.color1 .pricecontent{background:#E8EEED;}
.color2{border:1px solid #537691; color:#fff;}
.color2 .pricetit{background:#537691;}
.color3{border:1px solid #360; color:#fff;}
.color3 .pricetit{background:#360;}
.color4{border:1px solid #4B5C2C; color:#fff;}
.color4 .pricetit{background:#4B5C2C;}
.color4 .pricecontent{background:#DFE8D7;}
.color5{border:1px solid #333; color:#fff;}
.color5 .pricetit{background:#9d9b9b;}
.color5 .pricecontent{background:#efefef;}
.color6{border:1px solid #666; color:#fff;}
.color6 .pricetit{background:#666;}

@media screen and (max-width:600px) {/*mobile*/
.BannerDivPc{display:none;}
.hide-m{display:none;}
#header .page, .defaultservice .page, #footer .page, .normal .page{width:100%;}
/*nav*/
.nav{width:100%; margin-top:0em; font-size:16px; display:none;}
.nav a{width:100%; height:auto; float:left; display:block; text-align:center; background:#efefef; padding:0.8em; border-bottom:1px dotted #999;}
.nav a:hover{background:#cbaf8b;}
.content{padding-top:40px;}
.content_price{padding-top:90px;}
/*header*/
#logo{width:40%; margin-left:10px}
/*defaultservice*/
.defaultservice .block{width:100%;}
.defaultservice h1{font-size:28px;}
/*defaultabout*/
.defaultabout .page{width:90%; font-size:13px;}

/*footer*/
#footer a{font-size:13px; width:33.3%; height:auto; display:block; float:left; text-align:center;}
.left{float:left; margin:0; width:100%; height:auto; text-align:center;}
.right{margin-top:1em; float:left; width:100%; height:auto; text-align:center;}
.normal .block{width:98%; margin:1%; border:1px solid #CCC; text-align:center;}

.price .block{width:33.3%;}
#widthframe{width:100%;}
}
@media screen and (min-width:600px) and (max-width:1366px){/*pad*/
.BannerDivMobile{display:none;}
.hide-p{display:none;}
#header .page, .defaultservice .page, #footer .page, .normal .page{width:90%;}
/*nav*/
.nav{width:75%; padding-top:5%; font-size:13px;}
.nav a{margin:1em; }
.content{padding-top:90px;}
.content_price{padding-top:103px;}
/*header*/
#logo{width:25%;}
/*defaultservice*/
.defaultservice .block{width:33.3%;}
.defaultservice h1{font-size:28px;}
/*defaultabout*/
.defaultabout .page{width:90%; font-size:13px;}
/*footer*/
.left{float:left; margin:0 2em 0 0; width:100%; height:auto; text-align:center;}
.right{margin-top:1em; float:left; width:100%; height:auto; text-align:center;}
.normal .block{width:46%; margin:1% 2%; border:1px solid #CCC; text-align:center;}

.price .block{width:14.2%;}
}
@media screen and (min-width:1366px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none;}
#header .page, .defaultservice .page, #footer .page, .normal .page, .price .page {width:66%;}
/*nav*/
.nav{width:80%; padding-top:4%; font-size:16px;}
.nav a{margin:1em; }
.content{padding-top:100px;}
.content_price{padding-top:84px;}

/*header*/
#logo{width:20%;}
/*defaultservice*/
.defaultservice .block{width:33.3%;}
/*defaultabout*/
.defaultabout .page{width:40%;}
/*footer*/
.left{float:left; margin:0 2em 0 0;}
.right{margin-top:1em; float:left;}

.normal .block{width:31%; margin:1%; border:1px solid #CCC; text-align:center;}

.price .block{width:14.2%;}
}