@charset "UTF-8";
/* 版面樣式設定 */
.head:after,.banner:after,.about:after,.service:after,.price:after,.contact:after,.contain:after,contact_ways:after{
  content: "";
  display: block;
  clear: both;}

.contain{ /*內容寬度*/
  margin: 0 auto;
  width: 98%;
  max-width: 1000px;
}

.head{height: 50px; background-color: #005566;z-index: 30;width: 100%;}

/*.head .logo{float: left;height: 50px;line-height: 50px;color: #ffffff;font-size: 20px;letter-spacing: 0.05em;}
.head .logo img{display: block;float: left; padding:10px 10px 0px 0 ; width: 30px; margin-right: 0px;*padding-top: 12px;}*/
.head .logo{ float: left; height: 50px; line-height: 50px; }
.head .logo img{ height: 30px; margin-right: 0px; }

.head .logo a{color: #ffffff;}
.head .logo a:hover{color: #e6e6e6; text-decoration: none;}
.top_list{ float: right; list-style: none;line-height: 50px;margin: 0px;}
.top_list li{
  float: left;
  margin-left: 40px;
  letter-spacing: 0.05em;
}
.top_list a{color: #e6e6e6;}
.top_list a.on,
.top_list a:hover{color: #ffff66; text-decoration: none; }

.banner{height: 350px;background: url(../images/banner_bg.png) center no-repeat;background-color: #0095a6;}
.banner .contain{}
.banner_text{width: 50%;padding-top: 7em;color:#ffffff}
.banner_text h1{margin-bottom:25px;line-height: 58px;}
.banner_text h5{line-height:24px;}

.about{padding: 80px 0;background-color: #ffffff;}
.about .contain{text-align: center;}
.about h2{line-height: 48px;color: #444444;}
.about p{line-height: 24px;margin-top: 35px;text-align: left;color: #848484;font-size: 16px;}
.about p.bigger{font-size: 1.4rem;line-height: 1.8;color: #666666;letter-spacing: 0.05em}

.service{background-color: #dff4f7;padding: 80px 0 60px;}
.service .contain{text-align: center;}
.service h3{line-height: 48px;color: #444444;}
.service h5{line-height: 24px;margin-top: 35px;color: #848484;}
.service_list:after{content: "";display: block; clear: both;}
.service_list{list-style: none;margin: 0;padding:0;}
.service_list li{
  width: 49%;
  min-height: 155px; 
  float: left;
  margin-top: 1.4em; 
  padding: 0;
  background-color: #ffffff; 
  box-shadow:0 0px 0px 1px #e5e5e5 inset; 
  text-align: left;
}
.service_list li.left{float: left;margin-right: 2%;}
.service_list li.right{float: right;}
.service_list_img{width: 15%; float: left;padding:5% 0% 5% 5%;max-width: 150px;}
.service_list_text{width: 74%;*width: 71.7%;float: left;padding:5% 3% 4%;}
.service_list_text h4{color: #444444;}
.service_list_text p{margin-top: 14px;color: #848484;line-height: 1.6}

.demo{background-color: #dff4f7;padding: 0px 0 80px;}
.demo .contain{text-align: center;border-top: 1px solid #dddddd;padding-top: 40px;}
.demo h2{line-height: 48px;color: #444444;}
.demo h5{line-height: 24px;margin-top: 35px;color: #848484;}
.demo_list:after{content: "";display: block; clear: both;}
.demo_list{list-style: none;margin: 0;padding:0;}
.demo_list li{
  width: 50%; 
  float: left;
  margin-top: 1.4em; 
  padding: 0;
  line-height: 2;
  text-align: center;
}
.demo_btn{
  display: block;
  width: 90%;
  height: 70px;
  margin: 0 auto;
  padding: 10px 0px;
  background-color: #ffffff;
  border-radius: 10px;
  text-align: center;
  line-height: 70px;
  border: 1px solid #d9d9d9;
  box-shadow: 0 3px 6px 0 #d9d9d9;
}
.demo_btn:hover{border: 1px solid #80c3ff;box-shadow: 0 0 1px 0 #80c3ff;}

.price{background-color: #ffffff;padding: 80px 0;}
.price .contain{text-align: center;}
.price h3{line-height: 48px;color: #444444;}
.price h5{line-height: 24px;margin-top: 35px;color: #848484;}
.price_table{width: 100%;margin:35px auto 0;text-align: center; border: 1px solid #d3d3d3;}
.price_table th,.price_table td{padding: 10px;}
.price_table th{ 
  line-height: 2.2em;
  border: 1px solid #d3d3d3;
  background-color: #f3f3f3;
  white-space: nowrap;
  font-weight: normal;
}
.price_table td{border: 1px solid #d3d3d3;line-height: 2em;}
.price_table td p{padding-left: 10px;}
.price_table td .text,.price_table td .text2{margin: 0 auto;padding: 0;text-align: left;list-style-position: inside;}
.price_table td .text{padding-left: 10px;}
.price_table td .text2{padding-left: 30px;}

.contact{background-color: #454c4d;padding: 1.5em 0 0}
.contact .contain{text-align: center;}
.contact h2{line-height: 48px;color: #ffffff;}
.contact h5{line-height: 24px;margin-top: 35px;color: #cccccc;}
.contact_form{float: left;width: 54%;min-height: 330px;margin: 2rem 0;color: #ffffff;text-align: left;border-right: 1px solid #808080;}
.contact_form td{line-height: 1.4rem;padding: 0px 0 10px;}
.contact_form input,.contact_form textarea{padding: 4px;border-radius: 4px;border: 1px solid #cccccc;width: 86%;line-height: 1.4rem;}
.contact_form .btn{width: 35%;background-color: #0095a6; color: #ffffff;border: 1px solid #0095a6;}
.contact_form .btn:hover{background-color: #005566;border: 1px solid #005566;}
.contact_form .txt_r{color:#EF9A9A;}
.contact_form .form_info{color:#dd0000;line-height: 2}

.contact_text{ float: right; width: 40%; text-align: left; padding: 0; color: #ffffff; margin: 2rem 0 ; font-size: 16px; color: #cccccc; }
.contact_text img{ height: 140px; }
/*.contact_text .logo{font-size: 18px;line-height: 22px;letter-spacing: 0.08em;}
.contact_text .logo img{display: block;float: left;width: 20px; padding:1px 10px 1px 0 ; margin-right: 0px;padding-top: -1px;position: relative;}
.contact_text p{margin-top: 15px; line-height: 2.2;}*/

.contact_ways{width: 100%; margin:0px 0 0 0;padding: 0;}
.contact_ways td{line-height: 2.2;}
.contact_text a{color: #cccccc;text-decoration: underline}
.contact_text a:hover{color: #ffff66}
.import_map{height: 250px; border: 1px solid #7e8aa2;}

/*聯絡我們 單頁*/
.contact_page{background-color: #ffffff;padding: 80px 0 0;}
.contact_page  h2{color: #222222;}
.contact_page  h5{color: #444444;}
.contact_page .contact_form{color: #444444;}
.contact_page .import_map{border: 1px solid #cccccc;margin-top: 35px;}
.contact_page .contact_text{color:#444444;margin-top: 35px;}
.contact_page .yellow{color: #ff4d00;}
.contact_page .contact_text a{color: #444444}


.footer{ background-color:#2e3233; }
.footer .contain{padding: 1.5em 0;text-align: center;border-top: 1px solid #646464}
.copyright{ color: #a3a3a3; }
.copyright img{ height: 20px; }

/* 基本樣式設定 */
body{
  font-family:'Roboto Slab','Roboto', 'Noto Sans TC', Helvetica,Arial,Microsoft Yahei,SimSun,STXihei,arial,sans-serif;
  font-size: 14px;
  margin: 0 auto;
  color:#444444;
  background-color: #2e3233;
  min-width: 1000px;
}

img{border: 0px;vertical-align: middle;line-height: 0;}
a {color: #0088cc;text-decoration: none;}
a:hover{ color: #0066cc; text-decoration: underline;}

h1,h2,h3,h4,h5,h6{
  margin: 0;
  font-family: inherit;
  font-weight: 400;  
}

h1,.h1 {font-size: 48px;}

h2,.h2 {font-size: 36px;}

h3,.h3 { font-size: 26px;}

h4,.h4 { font-size: 22px;}

h5,.h5 { font-size: 18px;}

h6,.h6 { font-size: 14px;}

p{padding: 0;margin: 0;}
table{
  border-collapse: collapse;
  border-spacing: 0;}
iframe{}

.red{color: #ff1a1a}
.blue{color: #0088cc}
.gray{color: #848484}
.yellow{color:#fff133;}