@font-face{font-family:'Roboto';src:url(../../styles/fonts/Roboto-Regular.ttf) format("truetype")}
@font-face{font-family:'Roboto-Light';src:url(../../styles/fonts/Roboto-Light.ttf) format("truetype")}
#frameContact{padding:20px 0 100px;background-color:#fff}
#frameContact form{margin:30px 0px 0px 0px;}
#frameContact form ul.c{margin:0;padding:0}
#frameContact form li{padding:0}
#frameContact form li.w{display:none}
#frameContact form li.r{padding:60px 0 2px}
#frameContact form li.c{padding:25px 0 0}
#frameContact form li.c > em{font-size:25px;font-style:normal;color:#333639;margin:20px 0 15px 30px;display:inline-block}
#frameContact form li.c > em > cite{margin:0 0 0 10px;width:21px;height:25px;background:url(../images/choice-more.png) no-repeat center center;display:inline-block}
#frameContact form li span{font-size:16px;color:#333639;line-height:34px;padding:0 8px 0 0;width:20%;display:inline-block;text-align:right;vertical-align:top;background-position:36px 34px;position:relative;transition:background .3s ease .1s}
#frameContact form li span.mr{background:url(../images/gender.png) no-repeat scroll 36px 0}
#frameContact form li span.ms{background:url(../images/gender.png) no-repeat scroll 36px -34px}
#frameContact form li span b{font-size:12px;color:#fff;line-height:20px;text-align:center;background-color:#936;display:block;width:52px;position:absolute;top:-16px;right:9px}
#frameContact form li dfn{font-style:normal;color:#fff;line-height:36px;height:36px;margin:0 0 0 1px;padding:0 16px;vertical-align:middle;display:none}
#frameContact form li dfn.fc{color:#18bbf1;padding:0 16px 0 30px;background:url(../images/correct.png) no-repeat left center}
#frameContact form li dfn b{font-family:'Trebuchet MS',sans-serif;font-size:18px;font-weight:400;letter-spacing:1px}
#frameContact form li input:focus{outline:0;}
#frameContact form li input[type=password]{font-family:Arial,sans-serif;font-size:26px;color:#939699;height:36px;padding:0 0 0 3px;border-width:0;border-bottom:1px solid #d3d6d9;display:inline-block;vertical-align:middle}
#frameContact form li input[type=text]{font-family:"微軟正黑體",Arial,sans-serif;font-size:18px;color:#232629;height:36px;padding:0 0 0 3px;border-width:0;border-bottom:1px solid #0099ff;background-color:#fff;display:inline-block;vertical-align:middle;transition:color .3s linear}
#frameContact form li input[type=text].loading{background:url(../images/loading-min.gif) no-repeat scroll right center}
#frameContact form li input.c{width:60%;max-width:350px}
#frameContact form li input.cm{-ms-ime-mode:disabled}
#frameContact form li input[name=Address]{width:65%;max-width:620px}
#frameContact form li input[type=submit]{font-family:"微軟正黑體",Arial,sans-serif;font-size:22px;color:#fff;letter-spacing:2px;margin:1px 0 0;padding:0 0 0 5px;width:220px;height:72px;border-width:0;background-color:#d3d6d9;display:inline-block;transition:all .25s linear}
#frameContact form li input[type=submit].go{color:#fff;background-color:#0080ff}
#frameContact form li input[type=submit].go:hover{color:#fff;background-color:#936;border-radius:0}
#frameContact form li select{font-family:"微軟正黑體",Arial,sans-serif;font-size:18px;padding:3px;border:solid #fff;border-width:3px 8px;background-color:#fff}
#frameContact form li select.onloaging{background:url(../images/loading-min.gif) no-repeat 12px 50%}
#frameContact form li select[name=sCity]{width:135px}
#frameContact form li select[name=sArea]{width:135px}
#frameContact form li select[name=sRoad]{width:135px}
#frameContact form li select[name=sNum]{width:135px}
#frameContact form li select+strong{font-family:Roboto,Arial,sans-serif;font-size:18px;color:#ff6600;padding:0 0 0 10px}
#frameContact form li select+strong.onloaging{background:url(../images/loading-min.gif) no-repeat 12px 50%}
#frameContact form li optgroup{font-size:16px;font-style:normal;color:#fff;background-color:#bcd447;padding:1px;margin:1px 0 0;display:block}
#frameContact form li select option{background-color:#fff;color:#232629;padding:0 0 0 20px}
#frameContact form li select option:hover{color:#fff;background-color:#0080ff;cursor:pointer}
#frameContact form li select.onloaging option{background-color:transparent;cursor:default}
#frameContact form li.gender em{font-style:normal}
#frameContact form li.gender label{padding:0 10px 0 0}
#frameContact form li.service label{font-size:16px;color:#838689;line-height:32px;margin:5px 0 0;padding:0 10px;display:inline-block;transition:background-color .15s linear}
#frameContact form li.service label.c{color:#fff;font-weight:700;background-color:#EDBA1F;box-shadow:1px 1px 5px rgba(80,85,90,0.3)}
#frameContact form li.service label:lang(design){color:#131619;}
#frameContact form li.service label input[type=checkbox]{margin:0 0 0 2px}
#frameContact form li.service span{display:block}
#frameContact form li.service div.service{margin:0 20px 0 22%;max-width:560px}
#frameContact form li textarea{font-family:"微軟正黑體",Arial,sans-serif;font-size:18px;color:#232629;padding:3px;border:1px solid #d3d6d9;background-color:#fff;width:65%;max-width:615px;min-height:150px;max-height:500px;resize:vertical;}
#frameContact form li textarea:focus{border:1px solid #a3a6a9;outline:0;}
#frameContact form li b.gender{font-weight:400;display:none}
#frameContact form li b.gender label{padding:0 10px 0 0;color:#993366;}
#frameContact form li input[type=radio]{margin:0 5px;display:inline-block;}
#frameContact p.contact-us{padding:0 80px 30px 0;font-size:15px;line-height:22px;text-align:right}
#frameContact p.contact-us span{display:block}
#frameContact p.contact-us em.contact-to-email{font-style:normal;text-decoration:underline;text-underline-offset:5px;cursor:pointer;}
#frameContact p.contact-us a{padding:0px 2px;color:#993366;text-decoration:none;border-bottom:1px solid #993366;transition:color .2s linear}
#frameContact p.contact-us a:hover{color:#0080ff;border-bottom:1px solid #0080ff;}
div.contact-by-email{position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;justify-content:center;align-items:center;}
div.contact-by-email > div{width:360px;height:100px;margin:22% auto auto auto;padding:20px 30px;border:1px solid #fff;background-color:#fff;box-shadow:0px 0px 48px rgba(0,0,0,0.2);transition:all .25s linear;}
div.contact-by-email > div div.validation{text-align:center;}
div.contact-by-email > div div.validation a{font-family:Roboto-Light,Arial,sans-serif;font-size:32px;line-height:90px;color:#9acd32;text-decoration:none;}
div.contact-by-email > div div.validation a:hover{text-decoration:underline;text-underline-offset:5px;}
div.contact-by-email > div div.validation p{font-size:13px;}
div.contact-by-email > div div.validation span{width:19%;line-height:80px;margin:3% 2%;font-family:Roboto-Light,Arial,sans-serif;font-size:48px;border:3px solid #d3d6d9;background-color:#ffffee;display:inline-block;}
div.contact-by-email > div div.validation span:hover{border-color:#ffd700;transition:all .15s linear;}
@media (min-width:1280px){#frameContact form li select[name=sCity]{width:165px}
#frameContact form li select[name=sArea]{width:165px}
#frameContact form li select[name=sRoad]{width:165px}
#frameContact form li select[name=sNum]{width:165px}
#frameContact{padding:20px 0 200px}
#frameContact form li span{background-position:100px 34px}
#frameContact form li span.mr{background:url(../images/gender.png) no-repeat scroll 100px 0}
#frameContact form li span.ms{background:url(../images/gender.png) no-repeat scroll 100px -34px}
}@media (min-width:768px) and (max-width:979px){#frameContact p.contact-us{padding:10px 30px 50px;font-size:14px;text-align:left}
#frameContact p.contact-us span{display:inline}
#frameContact form li select[name=sCity]{width:115px}
#frameContact form li select[name=sArea]{width:115px}
#frameContact form li select[name=sRoad]{width:105px}
#frameContact form li select[name=sNum]{width:105px}
#frameContact form li span{background-position:10px 34px}
#frameContact form li span.mr{background:url(../images/gender.png) no-repeat scroll 10px 0}
#frameContact form li span.ms{background:url(../images/gender.png) no-repeat scroll 10px -34px}
#frameContact form li dfn{margin:0 0 0 154px}
}@media (max-width:980px){#frameContact form li input[name=Address]{width:70%}
#frameContact form li textarea{width:70%}
#frameContact form li.service div.service{margin:0 20px 0 18%;max-width:560px}
}@media (max-width:767px){#frameContact p.contact-us{padding:0 15px 30px 20px;font-size:15px;text-align:left}
#frameContact p.contact-us span{display:inline}
#choiceAddress select{margin:0 0 0 25%;display:block}
#frameContact form li.c{padding:5px 0 0}
#frameContact form li select[name=sCity]{width:200px}
#frameContact form li select[name=sArea]{width:200px}
#frameContact form li select[name=sRoad]{width:200px}
#frameContact form li select[name=sNum]{width:200px}
#frameContact form li select[disabled=disabled]{display:none}
#frameContact form li select+strong{margin:3px 0 3px 25%;display:block}
#frameContact form li input[type=submit]{width:200px;height:60px}
#frameContact form li.service span.service{display:none}
#frameContact form li.gender em{margin:8px 0 25px 18%;display:block}
#frameContact form li span{background-position:10px 34px}
#frameContact form li span.mr{background:url(../images/gender.png) no-repeat scroll 10px 0}
#frameContact form li span.ms{background:url(../images/gender.png) no-repeat scroll 10px -34px}
#frameContact form li dfn{margin:0 0 0 21%}
}@media (max-width:580px){#frameContact form li span{background-position:95px 34px}
#frameContact form li span.mr{background:url(../images/gender.png) no-repeat scroll 95px 0}
#frameContact form li span.ms{background:url(../images/gender.png) no-repeat scroll 95px -34px}
#frameContact form{margin:0 5%}
#choiceAddress select{margin:0 auto;display:block}
#frameContact form li.service label{font-size:18px}
#frameContact form li select[name=sCity]{width:97%}
#frameContact form li select[name=sArea]{width:97%}
#frameContact form li select[name=sRoad]{width:97%}
#frameContact form li select[name=sNum]{width:97%}
#frameContact form li select[disabled=disabled]{display:none}
#frameContact form li textarea{width:98%}
#frameContact form li.service div.service{margin:0 0 0 3%;display:block}
#frameContact form li span{width:100%;margin:10px 0 3px;padding:0 0 0 5px;text-align:left;display:block}
#frameContact form li span b{margin:0 0 3px 5px;line-height:22px;display:inline-block;position:static}
#frameContact form li input[type=text]{width:98%;border:1px solid #d3d6d9;display:block;box-sizing:border-box}
#frameContact form li input.c{width:98%;max-width:none}
#frameContact form li.submit{text-align:center}
#frameContact form li.c > em{margin:25px 0 5px}
#frameContact form li.gender em{margin:8px 0 25px 1%;display:block}
#frameContact form li dfn{margin:0 0 0 1px}
div.contact-by-email > div{margin:65% auto auto auto;}
}