@charset "utf-8";
body {margin:0; padding:0; font-size:16px; line-height:160%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體'; }
a{text-decoration:none; transition:.3s;}
#header, #footer, #defaultimg, .content{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;}/*讓圖自適應用*/
*{box-sizing:border-box;}

/*header*/
#header{position:fixed; z-index:1000; background:url(images/header-bg.png) repeat-x; top:0;}
.logo{ height:auto; float:left;}
.logo img{max-width:100%; height:auto; margin-top:10px;}
#defaultimg h1{text-align:center; color:#fff; font-weight:normal;}
#defaultimg{text-align:center; color:#fff; font-weight:normal;}
/*qrcode*/
.online-contact{position:fixed; cursor:pointer; bottom:2%; right:-200px; z-index:199; width:270px; height:auto; text-align:center; font-size:15px; transition:1s; line-height:160%;}
.online-contact-hover{right:1em;}
.online-contact h3.qabtn{border-radius:50%; width:60px; height:60px; background:#0C0; color:#fff; text-align:center; margin:0 10px 0 0; float:left; padding:5px; cursor:pointer; font-size:60px; overflow:hidden; transition:0.3s;}
.online-contact h3.fbbtn{border-radius:50%; width:60px; height:60px; background:#3b5999; color:#fff; text-align:center; margin:10px 10px 0 0; float:left; padding:5px; cursor:pointer; font-size:60px; overflow:hidden; transition:0.3s;}
.online-contact h3.qabtn:hover img, .online-contact h3.fbbtn:hover img{transform:scale(1.1,1.1);}
/*nav*/
.nav{float:right; width:72%; height:auto;}
.nav a{display:block; float:right; color:#fff; font-size:15px;}
.nav a:hover{ color:#F78F5E;}
.nav-m{width:100%; height:auto; float:left; display:none;}
.nav-m a{width:100%; height:auto; float:left; display:block; text-align:center; border-top:1px dotted #efefef; background:#fff; line-height:250%; color:#666;}
.nav-m span{color:#999;}
.nav-m a:hover{background:#efefef;}
a.special{transition:0.5s; transform:translateY(-10px);}
a.special:hover{transform:translateY(0px);}
/*subnav*/
.subnav ul{margin:0; padding:0; list-style:none;  font-size:16px;}
/*defaultimg*/
/*footer*/
#footer{background:#414557; color:#ffffff; font-size:13px; padding-bottom:3em;}
#footer a{height:auto; line-height:220%; color:#efefef; display:block; float:left;}
#footer a:hover{color:#fff;}
/*content*/
.content{line-height:160%;}
.side{height:auto; float:left;box-sizing:border-box;}
.main{height:auto; float:left; box-sizing:border-box; line-height:180%; text-align:left;}
h1.tit, h2.tit{font-size:36px; font-weight:normal; color:#414557; line-height:110%;}
.content img{ max-width:100%;}


/*default page use*/
.default1, .default2{overflow-x:hidden;}
.default1{background:url(images/default1-bg.jpg) repeat-x bottom;}
.default3{text-align:center; color:#fff; background:#414557; padding:2em 0;}
.default3 a{background:#F90; color:#fff; border-radius:1em; font-size:24px; padding:0.2em 1em; margin:1em;}
.default3 a:hover{background:#C00;}
.default4{padding:2em 0;}
.default4 .block{text-align:center;}
.default5{padding:2em 0; background:#f6f6f6; color:#333; text-align:center;}
.default5 .block{padding:1em;}
.default5 h3{font-weight:normal; margin-bottom:0;}
.default5 p{padding-left:2em; margin-top:0; color:#666;}
.default5 article{padding:0.5em 0.2em; text-align:left; border:1px solid #f6f6f6; cursor:pointer; transition:0.6s; transform:translateY(30px); border-radius:1em; opacity:0;}
.default5 article:hover{background:rgba(255,255,255,0.5); border:1px solid #efefef; box-shadow:0 0 3px rgba(0,0,0,0.1);}
.default5 article:hover h3{color:#F60;}
.default5 a.btn, a.btn{border-radius:1em; font-size:24px; padding:0.2em 1em; margin:1em; background:#414557; color:#fff; border:1px solid #fff; display:inline-block; transition:0.2s;}
.default5 a.btn:hover, a.btn:hover{background:#FA6B47; }

/*contact*/
.inputframe{height:auto; padding:10px 5%; text-align:left; float:left; width:100%;}
.input{height:30px; width:100%;}
.textarea{width:100%; height:150px;}
.select{height:auto; width:100%;}
.contact .side h3{font-weight:normal; font-size:14px; color:#6A9295;}
.contact .side h3 span{font-size:24px; color:#666;}
.contact .side p{float:left; padding-left:5px;}
.contact .side div{clear:both; width:100%; text-align:center;}
.contact .main h3.tit{font-weight:normal; font-size:20px; color:#666; margin-bottom:0;}
.contact .main .selectblock{height:auto; float:left; padding:1em; text-align:center; }
.contact .main .selectblock div{padding:1em; border-radius:1em; background:#f6f6f6;}
#pricetable{text-align:center; background:#fff; font-size:18px;}
#pricetable td{padding:1em;}
/*intro*/
.intro{text-align:center;}
.intro ul,.introlist ul{list-style:none; margin:0; padding:0; text-align:center;}
.intro li, .introlist li{height:auto; display:inline-block; float:left; padding:2em 1.5em; transition:.3s; overflow:hidden;}
.intro li:hover h3 span, .introlist li:hover h3 span{background:#069;}
.intro li:hover h3, .introlist li:hover h3{color:#069;}
.intro li:hover, .introlist li:hover{background:#fff;}
.intro h2{font-size:36px; text-align:center;}
.intro h3, .introlist h3{font-weight:normal; font-size:20px; color:#333; margin:0;}
.intro h3 > span{width:3em; height:3px; display:inline-block; background:#efefef;}
.intro a, .introlist a{background:#F90; color:#fff; border-radius:1em; text-align:center; display:inline-block;}
.intro a:hover, .introlist a:hover{background:#272F34;}
.introlist{text-align:center; background:linear-gradient(180deg, #efefef,#fff,#efefef);}
.introlist li:hover,.intro li:hover{background:linear-gradient(180deg, rgba(240,240,240,0.5),#fff);}
.introlist li img, .intro li img{transition:.3s;}
.introlist li:hover img, .intro li:hover img{transform:scale(1.1,1.1);}
/*price*/
.price, .case, .contact{padding-top:3em;}
.price .tit span{font-size:16px; font-weight:normal; line-height:200%;}
.price h3{font-weight:normal;}
.price h3 span{font-size:36px;}
.price .block, .case .block{padding:1em;}
.price .block div{border:1px solid #ccc; text-align:center;}
.price .block div p{width:100%; height:auto; display:block;  border-top:1px dashed #ccc; margin:0; padding:1em 0;}
.price .block p span{color:#666;}
.case .block{padding:1.5em;}
.case .block div.fade{box-shadow:0 2px 10px rgba(0,0,0,0.2); line-height:0; display:block; position:relative; cursor:pointer; border-radius:0.3em; overflow:hidden;}
.mask{width:100%; height:100%; position:absolute; background:rgba(0,0,0,0.5); color:#fff; text-align:center; z-index:2; opacity:0; transition:0.3s; padding:0 1em; transform:scale(1.5,1.5); }
.mask span{display:block; width:80%; margin-top:50%; margin-left:10%; line-height:150%; border-bottom:3px solid #F60; font-weight:bold; font-size:18px; transform:translateY(-50%);}
.mask a{color:#fff; margin-top:1em; font-size:13px;}
.mask a > i{padding-right:5px;}
.mask:hover{opacity:1; transform:scale(1,1); }
.case .block div img{transition:0.6s;}
.case .block div.fade:hover img{transform:scale(1.1,1.1);}
.price .block div.fade{opacity:0; transform:translateY(30px); transition:1s ease-in-out;}
.case .block div.fade.in, .price .block div.fade.in, .default5 article.in{opacity:1; transform:translateY(0px);}
.case .block div p{text-align:left; font-size:18px; color:#069; padding:0 0.5em;}
/*goto*/
.goto div{width:50%; height:auto; padding:2em 0; text-align:center; float:left;}
.goto a{border-radius:1em; background:#333; color:#fff; font-size:20px; padding:0.5em 1.5em; border:1px solid #fff; transition:0.2s;}
.goto a:hover{background:#FA6B47;}
/*faq*/
.faq .block{width:100%; height:auto;}
.question{font-weight:normal; font-size:18px; background:#f6f6f6; border:1px solid #fff; margin:0; padding:0.5em 0.3em; border-bottom:1px solid #fff; cursor:pointer; transition:0.3s;}
.question:hover{background:#fff; border:1px solid #ccc; color:#069;}
.question:hover a{ color:#069;}
.question a{font-weight:normal; font-size:18px; color:#111;}
@media screen and (max-width:767px) {/*mobile*/
.BannerDivPc{display:none;}
.hide-m{display:none;}
.page{width:100%; padding:0 2%;}
/*header*/
.logo{width:40%; padding-left:1%; padding-top:1%;}
/*defaultimg*/
.topimg{ min-height:15vh;}
#defaultimg h1{padding-top:10vh; font-size:30px;}
/*subnav*/
#submenu{border:1px solid #ccc; float:left; width:100%; border-radius:5px; margin-top:3em;}
.subtoggle{padding:15px;}
.subnav{display:none;}
.subnav ul li a{border-top:1px dotted #ccc; line-height:240%;}
.subnav ul li ul li a{padding-left:1.5em; border:none; font-size:15px; color:#666;}
.subnav a:hover{color:#d16a39; background:#efefef;}
.subnav a{width:100%; color:#333; display:block; padding-left:1em; transition:0.3s;}

/*content*/
.tit{text-align:center;}
.content{margin-top:0em;}
.side{width:100%; padding:0 1em; }
.main{width:100%; padding:1em;}
/*default use*/
.default1 .block,.default2 .block,.default5 .block{width:100%;}
.default4 .block{width:50%;}
.default1 {text-align:center;}
.default2{text-align:center;}
/*intro*/
.intro li{width:100%;}
.introlist li{width:50%;}
.introlist li h3{font-size:16px;}
.intro a, .introlist a{ padding:0.5em 1em; font-size:14px;}

/*footer*/
#footer h1{text-align:center;}
#footer a{ width:33.3%; text-align:center;}
#footer p{text-align:center; }
#footer .block{width:100%;}
/*price*/
.price .block, .case .block{width:100%;}
/*contact*/
.contact .block{width:100%; padding:0.5em;}
.contact .main .selectblock{width:100%;}
}

@media screen and (min-width:768px) and (max-width:1199px){/*pad*/
.BannerDivMobile{display:none;}
.hide-p{display:none;}
.page{width:100%; padding:0 2%;}
/*header*/
.logo{width:28%; padding-left:1%; }
/*defaultimg*/
.topimg{ min-height:300px;}
#defaultimg h1{padding-top:15vh;}
/*nav desktop*/
.nav a{padding:1em; font-size:13px;}
/*subnav*/
.subtoggle{display:none;}
.subnav ul li{ padding:1em 0; border-left:1px dotted #ccc;}
.subnav ul li a{border-radius:2em; overflow:hidden; margin-left:-0.5em; font-size:14px;}
.subnav a:hover{color:#fff; background:#036; padding-left:2em;}
.subnav a{width:100%; color:#333; background:#C2CDD8; padding:0.5em 1em; transition:0.3s; border:4px solid #efefef;}
.subnav ul li::before {content: "●"; color:#efefef; font-size:24px;}
/*content*/
.side{width:30%; padding:0em 1em 1em 1em; }
.main{width:70%; padding:0em 1em 1em 1em; min-height:500px;}
/*default use*/
.default1 .block,.default2 .block,.default5 .block{width:50%;}
.default4 .block{width:25%; }
.default1 h1{padding:20% 0 0 10%;}
.default1 p{padding:0 0 20% 10%;}
.default2{text-align:right;}
.default2 h2{padding:20% 10% 0 0;}
.default2 p{padding:0 10% 20% 0;}
/*intro*/
.intro li{width:33.3%;}
.introlist li{width:33.3%;}
.intro a, .introlist a{ padding:0.5em 1.5em;}

/*footer*/

#footer a{ width:33.3%;}
#footer p{text-align:right; }
#footer .block{width:50%;}
/*price*/
.price .block{width:33.3%;}
.case .block{width:25%;}
/*contact*/
.contact .block{width:50%; padding:0.5em;}
.contact .main .selectblock{width:50%;}
}

@media screen and (min-width:1200px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none;}
.page{width:1200px;}
/*header*/
.logo{width:28%;}
/*defaultimg*/
.topimg{ min-height:400px;}
#defaultimg h1{padding-top:25vh;}

/*nav desktop*/
.nav a{padding:1.5em 1.5em 1em 1.5em;}
/*subnav*/
.subtoggle{display:none;}
.subnav ul li{ padding:1em 0; border-left:1px dotted #ccc;}
.subnav ul li a{border-radius:2em; overflow:hidden; margin-left:-0.5em;}
.subnav a:hover{color:#fff; background:#036; padding-left:2em;}
.subnav a{width:100%; color:#333; background:#C2CDD8; padding:0.5em 1.5em; transition:0.3s; border:4px solid #efefef;}
.subnav ul li::before {content: "●"; color:#efefef; font-size:24px;}
/*content*/
.side{width:25%; padding:0em 1em 1em 1em; }
.main{width:75%; padding:0em 1em 1em 1em; min-height:600px;}
/*default use*/
.default3 h1, .default4 h1, .default5 h1{ text-align:center; font-weight:normal;}
.default1 .block,.default2 .block,.default5 .block{width:50%;}
.default1 h1{padding:20% 0 0 10%;}
.default1 p{padding:0 0 20% 10%;}
.default2{text-align:right;}
.default2 h2{padding:20% 10% 0 0;}
.default2 p{padding:0 10% 20% 0;}
.default4 .block{width:25%;}
/*intro*/
.intro{padding:3em 0;}
.intro li{width:33.3%;}
.introlist li{width:16.6%; }
.intro a, .introlist a{ padding:0.5em 1.5em;}
/*footer*/
#footer a{ width:33.3%;}
#footer p{text-align:right; }
#footer .block{width:50%;}
/*price*/
.price .block{width:33.3%;}
.case .block{width:25%;}
/*contact*/
.contact .block{width:50%; padding:1em;}
.contact .main .selectblock{width:50%;}

}