/*-----------------------------------------------------------------------------
	-	網站主體樣式設計 -
author:		  英創達網路有限公司
email:     	web@e-creative.tw
website:   	http://e-creative.tw
-----------------------------------------------------------------------------*/
body{
	 font-family: Arial, "微軟正黑體", sans-serif !important;
}
/*@import url("default.css");預設樣式
@import url("global.css");/*網站整體通用樣式設計*/
/* ---------------------------------------------------------------- */
/*列表- 行*/
ul.rows,    
ol.rows,    
dl.rows { margin: 0; padding: 0; list-style: none; }
ul.rows > li, 
ol.rows > li,
dl.rows > dt, 
dl.rows > dd { margin: 0; padding: 0; display: block; }
/*列表 - 欄*/
ul.columns, 
ol.columns, 
dl.columns { margin: 0; padding: 0; list-style: none; }
ul.columns:after,
ol.columns:after,
dl.columns:after { content: ""; clear: both; width: 0; height: 0; display: block; overflow: hidden; visibility: hidden; }
ul.columns > li, 
ol.columns > li,
dl.columns > dt, 
dl.columns > dd { margin: 0; padding: 0; float: left; }

/*漸變改色*/
*:link, *:visited, *:hover, *:active, *:focus , * {
    -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    transition: color .20s linear, background-color .20s linear, border-color .20s linear;
}
/* ==========================================================================
		圖片
========================================================================== */
/*圖片垂直置中*/
.img { text-align: center; line-height: 300px; /* Firefox, Chrome */ *font-size: 270px; /* IE */ *font-family: Arial; /* 200px * 0.9 = 180px */ }
.img img {vertical-align: middle;}
img {vertical-align: middle;}
.img-circle {
  border-radius: 50%;
}
/* ==========================================================================
		編排
========================================================================== */
/*清除兩邊*/
.clear { clear: both; margin: 0px; padding: 0px; }
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
/*靠左右*/
.fr {float: right !important;}
.fl {float: left !important;}
/*自動100%撐開*/
.auto { overflow: hidden; zoom: 1; }
	.auto .left {float: left;}
	.auto .right { overflow: hidden; zoom: 1; }
/*時間*/
time { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #888888; }
/**************************************************
= footer
********************/
.footer {
  position: relative;
  padding: 38px 0px 30px;
  font-family: Arial,"新細明體";
  line-height: 1.2em;
  font-size: 13px;
  color: #59361f;
  background: #eaeacb url(images/footer_bg-line.jpg) no-repeat center top;
  border-top: 1px solid #c5a200;
}
.footer .container { position: relative;}
.footer p {
  margin: 0px;
  padding: 0px;
  line-height: 1.5;
  letter-spacing: 1px;
}
/*info*/
.footer .info { position: relative;}
.footer .info .logo { 
   width: 32%;
  display: inline-block;
  width: 210px;
  height: 50px;
  margin: 0 0 0 70px;
  background: url(images/logo-footer.png) no-repeat 0px 0px;
  background-size: contain;
  float: left;
}
.footer .info-in {
  width: 68%;
  padding: 6px 0 6px 45px;
  background: url(images/footer-info-line.jpg) repeat-y left;
  float: right;
}
.footer .info .tel { display: inline-block; position: relative; top: 0px; }
.footer .info .tel em {
  font-size: 15px;
  font-style: normal;
}
.footer .info .tel b {  font-size: 18px;}
.footer .info .copyright { position: relative; }
.footer .info .design {
  color: #91785d;
  margin: 5px 0 0 0;
}
.footer .info .design a {
  color: #91785d;
  text-decoration: underline;
  font-weight: bold;
}
.footer .info .design a:hover {
  color: #59361f;
}

/**************************************************
= goTop
********************/
a#goTop {
  display: block;
  background: url(images/top.png) no-repeat 0px 0px;
  height: 45px;
  width: 47px;
  position: absolute;
  top: -50px;
  right: 7px;
  z-index: 90;
}
a#goTop:hover {
  background-position: 0px bottom;
}

/*社群---------------------------*/
#communityBox {
  display: none;
  position: absolute;
  z-index: 999;
}
#communityBox .btnLine {
  width: 270px;
  padding: 10px 0 0 0;
  background-color: #FFF;
  border: 3px solid #dfdfdf;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
#communityBox .btnLine li {
  color: #444444;
  font-family: "微軟正黑體";
  font-size: 14.5px;
  font-weight: bold;
  line-height: 1.2;
  line-height: 56px;
  height: 56px;
  padding-left: 75px!important;
  background-repeat: no-repeat;
  background-position: 20px center;
}
#communityBox .btnLine li:nth-child(2n+0) {
  background-color: #f7f6e0;
}
#communityBox .btnLine li:first-child {
  line-height: 1.4;
  padding: 10px 0 0 0;
  font-size: 13px;
}
#communityBox .btnLine li:first-child + li{
  line-height: 1.4;
  padding: 10px 0 0 0;
  /*font-size: 12.5px;*/
  font-size: 13px;
  position:relative;
}
#communityBox .inco-line {
  position:absolute;
  top:5px;
  left:20px;
}
.inco-line {
  background-image: url(images/community-line.png);
  height: 46px;
  width: 46px;
  display:block;
}
.inco-line:hover {
  opacity:0.7;
  filter: alpha(opacity=70);
}
#communityBox .code {
  position:absolute;
  top:-45px;
  left:-145px;
  border: solid 1px #000;
}
#communityBox .btnLine li:first-child + li + li + li + li {
  line-height: 1.3;
  padding: 10px 0 0 0;
}
#communityBox .btnLine li b{
  color: #71551b;
  display: block;
}
.btnLine a {
  color: #444444;
}
.btnLine a:hover {
  color: #3b5998;
}
.btnLine .linkTime {
  background-image: url(images/community-time.png);
}
.btnLine .linkQR {
 background-image: url(images/community-line.png);
}
/*.btnLine .linkQR {
  background-image: url(images/community-Qrcode.png);
  cursor: default;
}*/
.btnLine .linkQR:hover {
  color: #444444;
  text-decoration: none;
}
.btnLine .linkFB {
  background-image: url(images/community-fb.png);
}
.btnLine .linkTel {
  background-image: url(images/community-tel.png);
}
.btnLine .linkPe {
  background-image: url(images/community-pe.png);
}
.footer .footer-line  {
  margin-top: 15px;
  text-align: center;
  display: none;
}
.footer .footer-line a {
  display: inline-block;
  font-size: 12px;
  font-family: "微軟正黑體";
  font-weight: bold;
  line-height: 48px;
  height: 56px;
  padding: 0 5px 0 45px;
  background-repeat: no-repeat;
}
.footer .footer-line a:hover {
  opacity:0.5;
}
.footer .footer-line .btnLine a:first-child  {
  padding-left: 52px;
  position:relative;
}
.footer .footer-line .btnLine a:hover:first-child  {
  opacity:1;
}
.footer .footer-line .code {
  position:absolute;
  top:-160px;
  left:0px;
  border: solid 1px #000;
}
/* ==========================================================================
  about
========================================================================== */
#about {
}
#about .html h2{
  color: #5b3418;
  font-size: 18px;
  font-weight: bold;
  line-height: 38px;
  background-image: url(images/about_h2-bg.jpg);
  background-repeat: no-repeat;
  height: 38px;
  width: 239px;
  padding: 0 0 0 25px;
  font-family: "華康儷中黑";
}
#about .html h3 {
  color: #5b3418;
  font-size: 15.4px;
  font-weight: bold;
  letter-spacing: 0.7px;
}
#about .html p{
  color: #786d59;
}
/* ==========================================================================
  aboutMilieu
========================================================================== */
#aboutMilieu .html {
  background: url(images/about02_bg.jpg) no-repeat 0px top;
  display: block;
  height: 600px;
  padding: 135px 15px 0 15px;
}
/*環境列表------------------*/
ul.milieuList {
  margin: 45px 0 0 0 !important;
  text-align: center !important;
}
ul.milieuList > li {
  min-height: 185px;
  margin: 1.5% 0.5%;
  padding: 0;
  display: inline-block;
}
ul.milieuList > li a {
  text-decoration: none !important;
}
ul.milieuList > li h3 {
  display: block;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  color: #FFF;
  background-color: #F2AB91;
  /*background-color: #f4b69f;*/
  text-align: center;
  line-height: 32px;
  height: 32px;
  overflow: hidden;
}
ul.milieuList > li:hover h3 {
  background-color: #c5a200;
}
ul.milieuList > li .pic {
  position: relative;
}
ul.milieuList > li .pic img {
  width:100%;
}
ul.milieuList li .pic .img-bg {
  background: /*url(../styles/images/news_inco.png) no-repeat center center*/ #000; 
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  transition: opacity .3s;
  display: none \9;
}
ul.milieuList li:hover .pic .img-bg {
  opacity:0.4;
  display: block \9;
}
/*more-inco----------------*/
ul.milieuList li .pic .opacity {
  color: #FFFFFF;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 65px;
  width: 65px!important;
  height: 65px!important;
  margin:auto;
  display: block;
  border-radius: 100px;
  background-color: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  opacity: 0;
  transition: opacity .3s;
  display: none \9;
}
ul.milieuList li:hover .pic .opacity {
  opacity:1;
  display: block \9;
}

/* ==========================================================================
  news
========================================================================== */
.newsList {
  /*margin-left: 3%;*/
  text-align: center;
}
.newsList .item {
  width: 225px;
  height: 330px !important;
  margin: 0 1% 2.5% 1%;
  padding: 0;
  border: 2px solid transparent;
  background-color: #f0f0e1;
  position: relative;
  display: inline-block;
}
.newsList .item:hover {
  border: 2px solid #e9bf00;
}
.newsList .item a {
  text-decoration: none !important;
}
.newsList .item .pic {
  position: relative;
}
.newsList .item .pic .img-bg {
  background: /*url(../styles/images/news_inco.png) no-repeat center center*/ #000; 
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  transition: opacity .3s;
  display: none \9;
}
.newsList .item:hover .pic .img-bg {
  opacity:0.4;
  display: block \9;
}
/*more-inco----------------*/
.newsList .item .pic .opacity {
  color: #FFFFFF;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 70px;
  width: 70px!important;
  height: 70px!important;
  margin:auto;
  display: block;
  border-radius: 100px;
  background-color: #CC9900;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  opacity: 0;
  transition: opacity .3s;
  display: none \9;
}
.newsList .item:hover .pic .opacity {
  opacity:1;
  display: block \9;
}
.newsList .item .date {
  background-color: #fbde3c;
  height: 48px;
  width: 56px;
  padding: 0px 10px 0px 8px;
  position: absolute;
  top: 0px;
  right: 0px;
  background-image: url(images/news_adte-line.png);
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  z-index: 999;
}
.newsList .item .date time{
  font-size: 16px;
}
.newsList .item .date time b{
  color: #5b3418;
  display: block;  
}
.newsList .item .date time b.month{
  text-align: left;    
}
.newsList .item .date time b.day{
  text-align: right;    
}
.newsList .item .inner {
  padding: 20px 15px 0px 15px;
}
.newsList .item .inner h3 {
  font-size: 13px;
  color: #6e4600;
  font-weight: bold;
  line-height: 1.6;
  height: 44px;
  overflow: hidden;
  padding:0;
  margin:0 0 10px 0;
}
l.newsList .item:hover .inner h3{
  color: #DD6104;
}
.newsList .item .inner .info {
  font-size: 13px;
  color: #786d59;
  height: 75px;
  overflow: hidden;
}
.newsList .item .inner .info::after { content: "…" !important;}
.newsList .item:hover .inner .info {
   color:#837d5f !important;
}
/* ==========================================================================
  newsDia
========================================================================== */
#newsDia .title {
  border-bottom: 1px solid #eeeeee;
  padding: 5px 0 15px 0;
  margin: -5px 0 20px 0;
  position: relative;
}
#newsDia .title h2 {
  color:#5b3418;
  font-size:20px;
  display: inline-block;
  padding:0;
  margin:0 10% 0 0;
}
#newsDia .title time {
  display: inline-block;
  letter-spacing: 0px;
  margin: 0 0 0 10px;
}
#newsDia .title .fb {
  position: absolute;
  top: -18px;
  right: 0px;
}
#newsDia .html {
  padding: 0 0 35px 0;
  background: url(images/.content-h1-bg.jpg) repeat-x bottom;
}
#newsDia .html p{
  color: #786d59;
}
#newsDia .pageNum {
  text-align: right;
}
/*search--------------------------------------------*/
#news .search {
  color: #614a00;
  font-size: 15px;
  height: 32px;
  margin: -5px 0 0 0;
  padding: 0 0 60px 0;
  text-align: right;
}
#news .search a {
  color: #614a00;
  font-weight: bold;
}
#news .search form {
  padding-right: 10px;
  display: inline-block;
}
#news .search form .txt {
  color: #ae9786;
  font-size: 13px;
  line-height: 22px;
  height: 22px;
  width: 187px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid #5b3418;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
#news .search form .btn {
  background-image: url(images/inco-search.png);
  background-repeat: no-repeat;
  background-position: 0px -20px;
  height: 24px;
  width: 20px;
  margin: -5px 0 0 0;
}
#news .search form .btn:hover {
  opacity:0.5;
}
#news .search .searchSort {
  display: inline-block;
}
#news .search .searchSort a {
  color: #614a00;
}
#news .search .searchSort a:hover {
  color: #DD6104 !important;
}


/* ==========================================================================
  team
========================================================================== */
.teamBox {
  margin: 0 0 3% 0;
}
.drInfo {
  display: block;
  background-color: #f0f0e1;
}
.drInfo .inner .name {
  font-size: 200%;
  color: #593317 !important;
  padding: 2% 0 0 5%;
}
.drInfo .inner .name .nickName {
  color: #ab7409;
  margin: 0 10px 0 0;
}
.drInfo .inner .name .jobTitle {
  font-size: 16px;
  margin: 0 0 0 10px;
}

.drInfo .inner .info {
  width: 95%;
  padding: 15px;
  margin: 0 5% 5% 5%;
  background-color: #FFF;
  position: relative;
}
.drInfo .inner .info .ex {
  background-image: url(images/doctor_ex.png);
  background-repeat: no-repeat;
  height: 83px;
  width: 25px;
  position: absolute;
  left: -25px;
  top: 0px;
}
.drInfo .inner .info p {
  color: #786d59;
  font-size: 15px;
  line-height: 1.3;
  margin: 0px;
  padding: 1.4% 3%;
  border-top: 1px dotted #bbbbbb;
}
.drInfo .inner .info p:first-child {
  border-top: none;
}

.certificates {
  text-align: center;
  margin: 10px 0 0 0;
  padding: 0 0 2% 0;
  background-color: #f0f0e1;
}
.certificates h3 {
  font-size: 18px;
  color: #593317;
  text-align: left;
  line-height: 40px;
  height: 40px;
  padding: 10px 5% 0 5%;
  margin: 0 0 2% 0;
  display: block;
  background: url(images/certificates-h2-bg.jpg) repeat-x;
}
.certificates .item {
  display: inline-block;
  margin: 1.5% 0.5%;
}
.certificates .item h4 {
  font-size: 14px;
  color: #593317;
}
/* ==========================================================================
  teamTime
========================================================================== */
#teamTime .html p {
  margin: 0px;
  padding: 0px;
  line-height: 1.5;
}
#teamTime .html table {
  width: 100%;
  margin-bottom: 25px;
}
#teamTime .html table th {
  color: #6e4600;
  font-size: 13px;
  font-family: "新細明體";
  font-weight: bold;
  text-align: center;
  padding: 8px 5px;
  background-color: #f3d955;
  letter-spacing: 2px;
}
#teamTime .html table td {
  color: #846000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 14px 0;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
#teamTime .html table td time {
  color: #846000;
  font-size: 13px;
}
#teamTime .html table td:first-child {
  font-size: 15px;
  line-height: 2;
  background-color: #eeeeee;  
}
#teamTime .html .hours {
  color:#786d59;
  font-size: 14px;
  padding: 24px 30px;
  background-color: #f9f9d7;
}


/* ==========================================================================
  service
========================================================================== */
ul.caseList li {
  height: 194px;
  /*min-height: 194px;*/
  padding: 0 0 0 20px !important;
  margin: 2% 1.5% 0.5% 1%!important;
  border-top: 3px solid #ddba2a;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  background: #fcfcfc; /* Old browsers */
  background: -moz-linear-gradient(top,  #fcfcfc 0%, #fffff0 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#fffff0)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #fcfcfc 0%,#fffff0 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #fcfcfc 0%,#fffff0 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #fcfcfc 0%,#fffff0 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #fcfcfc 0%,#fffff0 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fffff0',GradientType=0 ); /* IE6-9 */
  position: relative;
}
@media (max-width: 480px) {
  ul.caseList li {
    padding: 0 0 0 5px !important;
    margin: 2% 0% 0.5% 0%!important;
  }
  ul.caseList li .info {
      padding: 0 30px 0 0 !important;
  }
}
ul.caseList li:hover {
  border-right: 1px solid #ddba2a;
  border-bottom: 1px solid #ddba2a;
  border-left: 1px solid #ddba2a;
  background: #fcfcfc; /* Old browsers */
  background: -moz-linear-gradient(top,  #fcfcfc 0%, #ffffce 80%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(80%,#ffffce)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #fcfcfc 0%,#ffffce 80%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #fcfcfc 0%,#ffffce 80%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #fcfcfc 0%,#ffffce 80%); /* IE10+ */
  background: linear-gradient(to bottom,  #fcfcfc 0%,#ffffce 80%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ffffce',GradientType=0 ); /* IE6-9 */
}
ul.caseList li .left {
  float: left;
  z-index: 10;
}
ul.caseList li .right {
  float: right;
}
ul.caseList li h3 {
  color: #c6a641;
  font-size: 17px;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  margin: 8% 0 3% 0;
}
ul.caseList li h4 {
  color: #833c11;
  font-size: 19px;
  font-weight: bold;
  margin: 0 0 5% 0;
}
ul.caseList li:hover h4{
  color: #DD6104;
}
ul.caseList li .info {
  color: #786d59;
  max-height: 100px;
  padding: 0 10px 0 0;
  overflow: hidden;
}
ul.caseList li:hover .info {
  color: #A87C09;
}
ul.caseList li .go {
  height: 45px;
  width: 45px;
  display: block;
  background: url(images/service_go.png) no-repeat 0px 0px;
  position: absolute;
  right: -30px;
  bottom: -10px;
}
ul.caseList li:hover .go {
  background-position: 0px bottom; 
}
ul.caseList li .pic{
  position: absolute;
  top: 0px;
  right: 0px;
  overflow: hidden;
}
ul.caseList li .pic img{
	  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000)\0;
}
ul.caseList li:hover .pic img{
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
          
  -webkit-transform: scaleX(1.04) scaleY(1.03);
  -moz-transform: scaleX(1.04) scaleY(1.03);
  -o-transform: scaleX(1.04) scaleY(1.03);
  -ms-transform: scaleX(1.04) scaleY(1.03);
  transform: scaleX(1.04) scaleY(1.03);
}

/* ==========================================================================
  serviceList
========================================================================== */
.titleCase {
  margin: 10px 0 5px 0;
}
.titleCase .hd {
  background-image: url(images/servicelist_title-bg.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  height: 137px;
  padding: 44px 0 0 40px;
  margin: 0.5% 0 4% 0;
  display: block;
}
.titleCase .hd h3 {
  color: #c6a641;
  font-size: 18px;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0;
  letter-spacing: 1px;
  text-shadow: 1px 1px #FFF;
}
.titleCase .hd h4 {
  color: #833c11;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
}
.titleCase .inner .line-top {
  background: url(images/servicelist_line-bg.jpg) repeat-x top;
  height: 15px;
}
.titleCase .inner .line-bot {
  background: url(images/servicelist_line-bg.jpg) repeat-x top;
  height: 10px;
}
.titleCase .inner .info {
  padding: 1% 20% 1% 3.5%;
  background: url(images/servicelist_inner-bg.png) no-repeat right bottom;
}
.titleCase .inner .info p {
  color: #786d59;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1.7;
  text-shadow: 2px 2px #FFF;
}

ul.caseList2 li {
  margin: 0 4% 3.3% 4%!important;
}
@media (max-width: 480px) {
  ul.caseList2 li {
      margin: 2% 0% 0.5% 0%!important;
    }
}
ul.caseList2 li .no {
  float: left;
  color: #875600;
  font-size: 38px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  background: url(images/servicelist_number-bg.jpg) no-repeat right top;
  height: 46px;
  width: 88px;
  padding: 0 25px 0 0;
}
ul.caseList2 li:hover .no {
  color: #DD6104;
}
ul.caseList2 li h3 {
  float: left;
  color: #875600;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  width: 70%;
  height: 35px;
  margin: 30px 0 0.5% -25px;
  overflow: hidden;
}
ul.caseList2 li:hover h3{
  color: #DD6104;
}
ul.caseList2 li .info {
  color: #786d59;
  height: 70px;
  padding:0 0 5px 0;
  overflow: hidden;
}
ul.caseList2 li:hover .info {
  color: #A87C09;
}
ul.caseList2 li .pic {
  position:relative;
  border: 2px solid #e8d1b4;
}
ul.caseList2 li .pic img {
  width: 100%;
}
ul.caseList2 li:hover .pic {
  border: 2px solid #ddba2a;  
}
ul.caseList2 li .pic .img-bg {
  background: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  transition: opacity .3s;
  display: none \9;
  z-index: 10;
}
ul.caseList2 li:hover .pic .img-bg {
  opacity:0.4;
  display: block \9;
}
ul.caseList2 li .pic .opacity {
  color: #FFFFFF;
  font-size: 26px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 53px;
  width: 53px!important;
  height: 53px!important;
  margin:auto;
  display: block;
  border-radius: 100px;
  background-color: #000000;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  opacity: 0;
  transition: opacity .3s;
  display: none \9;
}
ul.caseList2 li:hover .pic .opacity {
  opacity:1;
  display: block \9;
}
ul.caseList2 li:hover .pic .opacity:before {
  content: "+";
}

#casesList ul.caseList2 li .pic {
  border: none;
}
#casesList ul.caseList2 li .pic .spic img{
  margin: 0px;
  padding: 0px;
}
#casesList ul.caseList2 li .pic .spic{
  text-align: center;
  min-height:205px;
}
#casesList ul.caseList2 li .pic .spic .compare {
  display: inline-block;
  border: 5px solid #dfdfdf;
  background-color: #dfdfdf;
}
#casesList ul.caseList2 li .pic .spic .compare img {
  width: 100%;
  margin: 0px;
  padding: 0px;
}
#casesList ul.caseList2 li:hover .pic .img-bg {
  border: 5px solid #ddba2a;
}
#casesList ul.caseList2 li .before {
  display: inline-block;
}
#casesList ul.caseList2 li .after {
  display: inline-block;
}
#casesList ul.caseList2 li .over {
  display: inline-block;
  border: 2px solid #dfdfdf;
}
/* ==========================================================================
  serviceDia
========================================================================== */
#serviceDia h1 {
  position: relative;
}
#serviceDia h1 .fb {
  position: absolute;
  right: 0px;
  bottom: -26px;
}
#serviceDia .html {
  padding: 0 0 35px 0;
  background: url(images/servicelist_line-bg.jpg) repeat-x bottom;  
}
#serviceDia .html p {
  color:#786d59;
  line-height: 1.6;
  margin: 0;
}
/* ==========================================================================
  casesDia
========================================================================== */
#casesDia h1 {
  position: relative;
}
#casesDia h1 .fb {
  position: absolute;
  right: 0px;
  bottom: -26px;
}
#casesDia .html {
  padding: 0 0 35px 0;
  background: url(images/servicelist_line-bg.jpg) repeat-x bottom;  
}
#casesDia .html p {
  color:#786d59;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
  contact
========================================================================== */
#contact .company {
  text-align: center;
  margin: 0 0 3% 0;
}
#contact .company .pic {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
}
#contact .company .pic img{
  margin: -100px 0 0 0!important;
}

#contact .company .inner {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#contact .company .inner{
  margin: 12px 0 0 0!important;
}
#contact .company .inner h2 {
  color: #5b3418;
  font-size: 18px;
  text-align: left;
  letter-spacing: 1px;
  margin: 0 0 15px 0;
  font-weight: bold;
}
#contact .company .inner p {
  color: #786d59;
  font-size: 14px;
  text-align: left;
  letter-spacing: 0.5px;
  line-height: 1.6!important;
  margin: 0!important;
  padding: 0 0 0 15px;
  background-image: url(images/inco-contact.png);
  background-repeat: no-repeat;
  background-position: 0px 7px;
}
#contact .company .inner .btn {
  color: #8D4112;
}
#contact .company .inner .btn:hover {
  color: #FFF;
  text-decoration: none;
}
#contact .company .inner .rest {
  margin: 0 0 0 73px;
}
#contact .map {
  text-align: center;  
}

/* ==========================================================================
  contactOnline
========================================================================== */
#contactOnline .html {
  margin: 0 4%;
}
#contactOnline .html p {
  color: #6e4600;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  margin: 0;
}
#contactOnline .html p b {
  color: #6e4600;
  font-size: 16px;
  font-weight: bold;
  padding: 0 5px;
}
#contactOnline form {
  margin-top: -10px !important;
}
#contactOnline form .inco{
	margin-right:5px;
	color:#e10505;
}
#contactOnline form address span {
	border-right:1px solid #DFDFDF;
	display:inline-block;
	width:60px;
	padding-right:15px;
	margin-right:15px;
	margin-bottom:5px;
}
#contactOnline form .note{
  color:#e10505;
  font-size: 13px;
  margin-bottom:10px;
}
/*#contactOnline form .code {
  color: #cc3333;
  font-size: 12px;
  letter-spacing: 0.5px;
  margin: 0 0 0 15px;
}*/
#contactOnline form label {
  color: #786d59;
  font-size: 14px;
  font-weight: normal;
}
#contactOnline form .control-label {
  color: #786d59;
  font-size: 15px;
  font-weight: bold;
}
#contactOnline form .form-group .button {
  margin: 30px 10px 0 0;
}


@media screen and (max-width: 1215px){/*當螢幕小於1215 並直著看*/
    #contact .company .pic img{
      margin: 0!important;
    }
    #contact .company .inner h2 {
      text-align: center!important;
      margin: 10px 0!important;
    }
}

/* ==========================================================================
  contactOnlineOk
========================================================================== */
#contactOnlineOk .html {
  text-align: center;
  border: 1px solid #ddba2a;
  margin: 10% 10% 0 10%;
  padding: 7% 10%;
}
#contactOnlineOk .html p {
  color: #6e4600;
  letter-spacing: 1px;
}#index0 #slick-index .slider.single-item li {
  display: block;
}