@charset "utf-8";
/* CSS Document */
html, body{	
	background: #040506;
	font-size: 16px;
	height: 100%; 
	color: rgb(51, 51, 51); 
	line-height: 1.5em; 
	font-family: "微軟正黑體", Microsoft JhengHei, "新細明體", PMingLiU, "Open Sans", sans-serif, Helvetica, Arial;	
	/*height:100%;*/
	margin:0;	
	padding:0;	
}
body a {
	text-decoration:none;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
a:hover{
 text-decoration:none;
}
.msg {
    color: #C00;
}
.mainpage {
    width: 100%;
    max-width :1400px;
    margin: 0 auto;
    /*background-color: #fff;*/
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
@media(max-width:1600px) {
    .mainpage {
        width: 100%;
        margin: 0 auto;
        max-width :1400px;
    }
}
@media(max-width:1500px) {
    .mainpage {
        width: 100%;
        margin: 0 auto;
        max-width :1400px;
    }
}
@media(max-width:1440px) {
    .mainpage {
        width: 100%;
        margin: 0 auto;
    }
}
@media(max-width:960px) {
    .mainpage {
        width: 100%;
       max-width :960px;
    }
}
@media(max-width:900px) {
    .mainpage {
        width: 100%;
       max-width :900px;
    }
}
@media(max-width:360px) {
    .mainpage {
        width: 100%;
       max-width :360px;
    }
}
/*ourContentsArea 公司簡介*/ 
.ourContentsArea {
  	background: url(../images/bg_our_contents.jpg) no-repeat center center;
  	background-size: cover;
	background-color: #312d2d; 
  	height: 650px;
    padding:1em;
  	transition: 0.3s;
}
.ourContentsArea h2 {
    /*background: url(../images/title_aboutus.png) no-repeat;*/   
    width:100%;
    height:auto;
	max-width :381px;
    max-height :61px;
	margin: 0em auto;
	/*padding-top: 2em;*/	
}
.ourContentsArea  p {
    text-align:center;
    color: #c7c7c6;
    margin-left:2em;
    margin-bottom:2em;
}
.ourContentsArea .ourContentsArea_box1 {
    /*position:relative;*/
    background: url(../images/about01.jpg) no-repeat center center;
    background-size: cover;
    width:100%;
    max-width :886px;
    height:477px;
    max-height:477px;
    /*float:left;
    margin-left:5em;*/ 
    margin : 0 auto;
    padding:1em ;   
    z-index:98;
}
.ourContentsArea .ourContentsArea_box2 {
    width:90%;       
    margin:0 auto;
    background-color:rgba(51, 51, 51,0.8);
    color:#efefef;
    z-index:99;
    padding:2em 3em;   
    border:1px solid #fde5bc;
    line-height:1.5em;
    transition: 0.3s;     
}
/*hr*/
.ourContentsArea .ourContentsArea_box2 hr {
        height:1px;
        border:none;
        border-top:1px solid #555555;
    }
@media screen and (max-width: 1500px) { 
  .ourContentsArea  p {
    margin:1em;     
  }
}
@media screen and (max-width: 1366px) {   
      .ourContentsArea .ourContentsArea_box2 {         
        margin-top:0;     
     }
    }
@media screen and (max-width: 800px) {
      .ourContentsArea {
        height: 600px;  
      }
     .ourContentsArea .ourContentsArea_box1 {
    padding-top:1em;     
}
       .ourContentsArea .ourContentsArea_box2 {         
        padding:1em;          
     }
    }
@media screen and (max-width: 540px) {    
      .ourContentsArea {        
        height: 650px;      
      }
      .ourContentsArea .ourContentsArea_box2 {   
        width :99%;
        max-width :500px;
        padding:10px;          
     }
    }
@media screen and (max-width: 480px) {    
    /*大標題不呈現*/
     .ourContentsArea h2 .img480  { 
     display:none;
     }
     .ourContentsArea h2  { 
     background: url(../images/title_aboutus_s.png) no-repeat;    
    width:100%;
    height:40px;
	max-width :250px;
    max-height:40px;    
}
     .ourContentsArea .ourContentsArea_box1 {
    padding:5px;     
}
     .ourContentsArea .ourContentsArea_box2 {  
           width:99%;           
     }
    }
@media screen and (max-width: 450px) { 
    .ourContentsArea {  
  	height:680px;    
}
    }
@media screen and (max-width: 360px) {
    .ourContentsArea {  
  	height:780px;    
}
      .ourContentsArea p {
        font-size :1.2em;
        line-height :1.8em;      
    }  
   }
@media screen and (max-width: 320px) {
  .ourContentsArea {
    	height:920px;    
}
  .ourContentsArea h2  {   
    width:250px;
    height:40px;
	max-width :250px;
    max-height:40px;    
}
  .ourContentsArea p {
        font-size :1em;
        line-height :1.8em;   
        margin-bottom:1em;    
    }
  .ourContentsArea .ourContentsArea_box1 {
         width:100%; 
        padding:0;     
}
  .ourContentsArea .ourContentsArea_box2 {  
         width:100%;
         max-width :320px;        
         margin:0 auto;
         padding:1em 0.5em;  
         line-height :1.8em;       
     }   
}
@media screen and (max-width: 240px) {
    .ourContentsArea {
        height: 1200px;
    }
}
/**************************************************
 businessArea Area 營業項目-服務項目
**************************************************/
.businessArea {
  background: url(../images/bg_services.jpg) no-repeat center center;
  background-size: cover;
  background-color: #312d2d; 
  height:700px;
  transition: 0.3s;
  padding: 50px; 
}
 .businessArea h2 {    
    width:100%;
    height:auto;
	max-width :381px;
    max-height :61px;
	margin: 0em auto;
} 

.businessArea .businessAreaInner{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  color: #fff; line-height: 2em; text-align: left; 
}

.businessbox:nth-child(1) {
float: left;text-align: left;  width:44%; padding: 2em; 
}
.businessbox:nth-child(2) {
float: left; text-align: left; width:46%; padding: 2em;
}

@media screen and (max-width: 1280px) {
     .businessbox:nth-child(1) {
        width:38%; padding: 1.5em; 
    }
    .businessbox:nth-child(2) {
        width:60%;padding: 1.5em; 
    }
 
}
@media screen and (max-width: 1160px) {
     .businessbox:nth-child(1) {
        width:50%; padding: 2em; 
    }
    .businessbox:nth-child(2) {
        width:48%;padding: 2em; 
    } 
}
@media screen and (max-width: 1024px) {
    .businessArea {     
      height:720px;  
    }   
}
@media screen and (max-width: 1000px) {
  .businessArea {     
      height:750px;  
    } 
}

@media screen and (max-width: 980px) {
   .businessArea {     
      height:980px;  
      /*padding-bottom:50px;*/
    }  
    .businessbox:nth-child(1){
        margin:0 auto;
        width:98%; padding-top: 2em; padding-bottom:0em;
    }   
     .businessbox:nth-child(2) {
        /*margin:-1em auto;*/
        width:98%; 
    }   
}
@media screen and (max-width: 960px) {
   .businessArea {     
      height:900px;  
    }  
    .businessbox:nth-child(1){
        margin:0 auto;
        width:98%; padding-top: 2em; padding-bottom:0em;
    }   
     .businessbox:nth-child(2) {
        /*margin:-1em auto;*/
        width:98%; 
    }   
}
@media screen and (max-width: 900px) {
    .businessArea { 
      padding: 20px;    
      height:940px;  
    }   
}
@media screen and (max-width: 850px) {
     
     .businessbox:nth-child(1){     
        width:100%; padding-top: 2em; padding-bottom:0em;
    }   
     .businessbox:nth-child(2) {       
        width:100%; 
    }  
}
@media screen and (max-width: 800px) {
    .businessArea { 
      width:100%;
      max-width:800px;
      padding: 0px; 
      height:850px; 
      padding:20px; 
    }   
   .businessbox:nth-child(1){     
        width:100%; padding-top: 0.5em; 
    }   
     .businessbox:nth-child(2) {       
        width:100%; padding-top: 0.5em; 
    }  

}
@media screen and (max-width: 767px) {
    .businessArea {     
      height:900px;  
    }   
 
}
@media screen and (max-width: 720px) {
    .businessArea {     
      height:950px;  
    }   
 
}

@media screen and (max-width: 640px) {
  .businessArea {     
      height:950px;  
    } 
}
@media screen and (max-width: 540px) {
  .businessArea {     
      height:1000px;  
    } 
}
@media screen and (max-width: 480px) {
     .businessArea { 
      width:100%;
      max-width:480px;     
      height:1050px; 
      padding:5px; 
    }   
   .businessbox:nth-child(1){     
        width:100%; padding-top: 0.5em; 
    }   
     .businessbox:nth-child(2) {       
        width:100%; 
    }  
 
    /*大標題不呈現*/
     .businessArea h2 .img480  { 
     display:none;
     }
 .businessArea h2  { 
     background: url(../images/title_business_s.png) no-repeat;    
    width:250px;
    height:47px;
	max-width :250px;
    max-height:47px;    
}
  .businessAreaInner  { 
    width:100%;   
	max-width :480px;
}
 
}
@media screen and (max-width: 450px) {
  .businessArea {         
      height:1100px;  
    }   
}
@media screen and (max-width: 414px) {
  .businessArea {     
      height:1200px;  
    } 
}
@media screen and (max-width: 360px) { 
   .businessArea {     
      height:1400px; 
      padding: 0; 
    } 
    .businessAreaInner  { 
    width:100%;   
	max-width :360px;
     height:1400px; 
} 
}
@media screen and (max-width: 320px) {
   
  .businessArea {     
      height:1550px;  
    }   
   .ourContentsArea h2  {   
    width:250px;
    height:47px;
	max-width :250px;
    max-height:47px;    
}
}
@media screen and (max-width: 240px) {
   
  .businessArea {     
      height:1650px;  
    }    
}
/**************************************************
 jobsArea Area 工程實跡
**************************************************/
.jobsArea {
 /* background: #323030;*/
  background: url(../images/bg_jobs.png) no-repeat center center;
  background-size: cover;
  background-color: #312d2d; 
  height: 850px;
  transition: 0.3s;
  padding: 50px; 
}

.jobsArea h2,  .jobsArea_page h2 {    
    width:100%;
    height:auto;
	max-width :323px;
    max-height :61px;
	margin: 0em auto;
} 

 /*工程實跡 更多 btn ==============================================================================================*/
.jobsAreabtn {
     width:200px; 
     margin:2em auto ; 
     overflow: hidden;
}
.jobsAreabtn a {   
    color:#fff; 
    border:1px solid #fff; 
    padding:8px 20px; 
    text-align :center ; 
    display: block;
    transition:0.2s; 	
}
.jobsAreabtn a:hover {
    background: rgba(117, 37, 38,1); 
    border:1px solid rgb(141, 120, 90);
    transition:0.2s; 
    border-image: none;	
}

    .btn_box {
	 padding:8px 20px; text-align: center; overflow: hidden; clear: both;
}

    .btn_s {
    padding:8px 20px; 
	/*padding: 0.5em 2em;*/ 
    border:1px solid #fff;  
    border-image: none; 
    font-family: "微軟正黑體", "新細明體", "標楷體"; 
    font-size: 15px; 
    vertical-align: middle; 
    display: inline-block; 
    position: relative; 
    box-shadow: 0px 0px 1px rgba(0,0,0,0); 
    transform: translateZ(0px);
    transition-property: color; 
    transition-duration: 0.3s; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transform: translateZ(0);
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-property: color; 
    -webkit-backface-visibility: hidden;
}
    .btn_s::before {
	background: rgba(117, 37, 38,1); 
    transform-origin: 50% 100%; 
    left: 0px; top: 0px; 
    right: 0px; bottom: 0px; 
    position: absolute; 
    z-index: -1; 
    content: ""; 
    transform: scaleY(0); 
    transition-property: transform; 
    transition-duration: 0.2s; 
    transition-timing-function: ease-out; 
    -webkit-transform: scaleY(0); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 0.2s; 
    -webkit-transition-property: transform; 
    -webkit-transform-origin: 50% 100%;
}
    .btn_s:hover {
	border:1px solid rgb(141, 120, 90);
    border-image: none; 
    color: #fff !important;
}
    .btn_s:focus {
	    border: 1px solid rgb(102, 102, 102); border-image: none; color: rgb(255, 255, 255) !important;
    }
    .btn_s:active {
	    border: 1px solid rgb(102, 102, 102); border-image: none; color: rgb(255, 255, 255) !important;
    }
    .btn_s:hover::before {
	    transform: scaleY(1); -webkit-transform: scaleY(1);
    }
    .btn_s:focus::before {
	    transform: scaleY(1); -webkit-transform: scaleY(1);
    }
    .btn_s:active::before {
	    transform: scaleY(1); -webkit-transform: scaleY(1);
    }
    
 /*工程實跡 照片列表==============================================================================================*/
 
.products_box_b{
	width:100%;
	max-width:1400px;
	margin:0 auto;
    text-align :center ;
}

.portfolio-left{
	width:25%;
    float:left ;
    margin-top:10px;
    margin-bottom:20px;	
}
/*--light-box--*/
.project-eff:hover span.rollover1 {
    margin-left:11px;
    background-color:rgba(253, 229, 188, 0.4);
    border:1px solid #fde5bc;
	cursor: pointer;	
    width: 93%;	
	height: 100%;
	display: block;
	position: absolute;	
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.project-eff{
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	position:relative;
}

/*照片工程名稱連結*/
.pohoto_text {
    margin:1em auto;
    text-align:center;
    /*padding:2em 3em;*/
}
.pohoto_text a {
	color:#fff !important ;
    width:98%; 
    display:block;   
}
.pohoto_text a:hover{
	color:#e8b038 !important ;   
}

@media(max-width:1366px) {
    .products_box_b{	
	max-width:1366px;
}
 .project-eff:hover span.rollover1 {
        margin-left:3px;
         width: 98%;
    }
}
@media(max-width:1280px) {
    .jobsArea {    
      height: 1180px;   
      padding: 50px; 
}
  .products_box_b{  
	width:100%;
	max-width:1280px;	
}
    .portfolio-left{
	width:33.33%;  
}
     .project-eff:hover span.rollover1 {
        margin-left:40px;
         width:79%;
    }

}
@media(max-width:1200px) {
  .products_box_b{ 
      width:100%;  
	max-width:1200px;	
}
  .project-eff:hover span.rollover1 {
      margin-left:26px;
     width:85%;    
    }
  }
@media(max-width:1160px) {
  .products_box_b{   
    width:100%;
	max-width:1160px;	
}
    .project-eff:hover span.rollover1 {
      margin-left:20px;
     width:88%;    
    } 
  }
@media(max-width:1024px) {
     .jobsArea {    
      height: 1650px;
}
  .products_box_b{
      width:100%;
      max-width:1024px;	  
}
 .portfolio-left{
	width:48%;
    float:left ;
    margin-right:5px; 
}
    .portfolio-left img{
        width:100%;
        max-width :350px;	  
        height:auto;         
}   
     .project-eff:hover span.rollover1 { 
        margin-left:38px !important ;
        width:88%;
         max-width :350px;	 
    }
  }
@media(max-width:1000px) {
  .products_box_b{
      width:100%;
      max-width:1000px;	   
}
    .project-eff:hover span.rollover1 {       
        margin-left:34px !important ; 
        width:87%;
         max-width :350px;       
    }

  }
@media(max-width:980px) {
  .products_box_b{
      width:100%;
      max-width:980px;	   
}
   .project-eff:hover span.rollover1 {       
        margin-left:28px !important ; 
        width:87%;
         max-width :350px;       
    }

  }
@media(max-width:960px) {  
 .products_box_b{  
     width:960px;
      max-width:960px;	   
}  
  .portfolio-left{
	width:45%;
    float:left ;
    margin-right:5px; 
}
     .project-eff:hover span.rollover1 {       
        margin-left:40px !important ; 
        width:87%;
         max-width :350px;       
    }
}

@media(max-width:900px) {   
      .products_box_b{    
          width:900px;     
          max-width:900px;
}   
  
     .project-eff:hover span.rollover1 {       
        margin-left:28px !important ; 
        width:87%;
         max-width :350px;       
    }
     
}
@media(max-width:850px) {
    .products_box_b{  
     width:850px;
      max-width:850px;	   
}
   .project-eff:hover span.rollover1 {       
        margin-left:16px !important ; 
        width:92%;
         max-width :350px;       
    }
     
}
@media(max-width:800px) {
 .products_box_b{  
      max-width:800px;	   
}
   .portfolio-left{
	width:42%;
    float:left ;
    margin-right:15px; 
}
     .project-eff:hover span.rollover1 {       
        margin-left:0px !important ; 
        width:100%;
         max-width :350px;       
    }
   
}
@media(max-width:767px) {
      .jobsArea {    
      height: 1600px;
}
 .products_box_b{  
      max-width:767px;	   
}
 
}

@media(max-width:750px) {
 .products_box_b{  
      max-width:750px;	   
}
}
@media(max-width:720px) {
       .jobsArea {    
      height: 1500px;
}
 .products_box_b{  
      max-width:720px;	   
}
 
}
@media(max-width:640px) {   
       .jobsArea {    
      height: 1400px;
}
 .products_box_b{  
      max-width:640px;	   
} 
}

@media(max-width:540px) {   
    .jobsArea {
 /* background: #323030;*/
  background: #312d2d url('../images/bg_jobs.png') repeat-x repeat-y left top ;
  transition: 0.3s;
  padding: 50px;
  height:2900px; 
}         

.jobsArea h2,  .jobsArea_page h2 {        
    width:323px;
    height:auto;
	max-width :323px;
    max-height :61px;
    margin:0 auto;

} 
 .products_box_b{
     width:100%;  
      max-width:540px;      
}
    .portfolio-left{
	width:90%;   
    margin:5px auto;   
}
     .project-eff:hover span.rollover1 {       
        margin-left:8px !important ; 
        width:100%;
        max-width :350px;       
    }
}

@media(max-width:480px) {
  .jobsArea {
  height:2800px; 
}     
        /*大標題不呈現*/
  .jobsArea h2 .img480  { 
     display:none;
     }
 .jobsArea h2  { 
     background: url(../images/title_jobs_s.png) no-repeat;    
    width:250px;
    height:47px;
	max-width :250px;
    max-height:47px;    
    margin:0 auto;
}
 .products_box_b{
     width:100%;  
      max-width:480px;   
}
    .portfolio-left{
	width:100%;   
    margin:0 auto;   
}
     .project-eff:hover span.rollover1 {       
        margin-left:0px !important ; 
        width:100%;
        max-width :350px;       
    }
}
@media(max-width:450px) {
    .jobsArea {
        height: 2600px;
    }
}
@media(max-width:414px) {
    .jobsArea {     
    height: 2350px;      
}
 
}
  @media(max-width:360px) {
       .jobsArea {     
    height: 2250px;      
}
 .products_box_b{
     width:100%;  
      max-width:360px;  
} 
 
} 

   @media(max-width:320px) {
        .jobsArea {     
    height: 2350px; 
}
.jobsArea h2 ,  .jobsArea_page h2 {
    background: url(../images/title_jobs_s.png) no-repeat ;
	width:250px;
    height:47px;
	margin-left:-1em;
}
 .products_box_b{
     width:100%;  
      max-width:320px;
      margin:0 auto;	   
}

} 
 /*工程實跡 次頁 jobs_content.aspx ==============================================================================================*/
.jobsArea_page {
  background: url(../images/bg_jobs.png) no-repeat center center;
  background-size: cover;
  background-color: #312d2d; 
  height: auto;
  transition: 0.3s;
  padding: 50px; 
  min-height:600px;
}

.title_sub {
text-align:center; color:#fff; font-size:1.25em; margin:1em auto;

}

/**************************************************
 contactArea  聯絡我們
**************************************************/
.contactArea { 
  background: url(../images/bg_contact.jpg) no-repeat center center;
  background-size: cover;
  background-color: #3f4344; 
  height: 820px;
  transition: 0.3s;
  padding-top: 50px; 
}

 .contactArea h2 {  
	width:347px;
    height:61px;
	margin: 0 auto;		
}
.contactArea .contactAreatext p:first-child{
    padding-top:2em;
    padding-bottom :1em;
	color:#f1787a;
    text-align:center;
    font-size:1.25em;
}
.contactArea .contactAreatext p:nth-child(2){
	color:#fde5bc;
    text-align:center;
}
 

/*表單*/
    .contact_form {
        margin-top: 1em;       
        width: 100%;      
        /*display: block;*/
        font-size: 15px;
        line-height: 1.2em;     
        color: #fde5bc;
        text-align:left;
        float:left;
    }
    .contact_form .formtext {        
        margin: 0px 0 30px 0;
        /*background-color:#4d4f4e;*/
        background-color:transparent;
        border:0;
        border-radius: 0px;
        border-bottom:1px solid #878a88;
        color:#f3ede5;
    }
    .my_radio {
    }
    .my_radio input, .my_radio label {
        display: inline-block;
        padding: 0;
        margin: 6px 0 0 0;
    }
    .my_radio label {
        padding: 0 8px 0 3px;
    }

    .form-group img {
        border: none !important;
        /*width: 50%;*/
        height: auto;
    }   
    #TBValidateCode1 {
        border: none !important;
        /*width: 30%;*/
        height: auto;
    }   

   /*send btn*/
    .submit_white_m {
        cursor: pointer;
        background-color: #762426;
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        border: 1px #ebd5b0 solid;
        padding: 0.5em 2em;
        font-size: 15px;
        font-family: "微軟正黑體", "新細明體", "標楷體";
}
    .submit_white_m:hover, .submit_white_m:focus {
        border: 1px #f8ead2 solid;
        color: #fbc608 !important;
        background-color: #1d1c1c;
    }
    .submit_white_m::-moz-focus-inner {
        border: none;
    }
   @media(max-width:1160px) {
        .contactArea .contactAreatext{
          width:75%;
          margin:0 auto ;
          line-height :2em;
}
}
    @media(max-width:1024px) {
   .form-group img {
        border: none !important;
        width: 80%;
        height: auto;
    }  
}

     @media(max-width:800px) {
   .contactArea { 
      background: url(../images/bg_contact.jpg) repeat-y ;     
      background-color: #3f4344; 
      height: 850px;
   
}
    .form-group img {
            border: none !important;
            width: 80%;
            height: auto;
        } 
}
    @media(max-width:767px) {
         .contactArea {      
            height: 1100px;   
}  
         .contactArea .contactAreatext{
          width:72%;
          margin:0 auto ;
          line-height :2em;
}     
}
     @media(max-width:750px) {
         .contactArea {      
           height: 1100px;   
}  
         .contactArea .contactAreatext{
          width:80%;
          margin:0 auto ;
          line-height :2em;
}
     .form-group img {
        border: none !important;
        width: 45%;
        height: auto;
    } 
}
@media(max-width:720px) {
     .contactArea {     
      height: 1050px;   
}
  
}
@media(max-width:640px) {
  .contactArea {     
      height: 1080px;   
}
 
}
 @media(max-width:540px) {

     /*background: url(../images/bg_jobs.png) no-repeat center center;*/

  .contactArea {     
      height: 1090px;   
}
  .form-group img {
        border: none !important;
        width: 70%;
        height: auto;
    }  
}
  @media(max-width:480px) {
  .contactArea {     
      height:1120px;   
}   
   /*大標題不呈現*/
  .contactArea h2 .img480  { 
     display:none;
     }
 .contactArea h2  { 
     background: url(../images/title_contact_s.png) no-repeat;    
    width:100%;
    height:44px;
	max-width :250px;
    max-height:44px;    
}
}   
    @media(max-width:450px) {
    .contactArea h2 {
        background: url(../images/title_contact_s.png) no-repeat ;
	    width:250px;
        height:44px;
	    margin: 0 auto;		
}
    .contactArea .contactAreatext p:first-child{   
    font-size:1em;
}
  .form-group img {
        border: none !important;
        width: 80%;
        height: auto;
    }   
  
}
      @media(max-width:414px) {
        
  .form-group img {
        border: none !important;
        width: 90%;
        height: auto;
    }   
  
}
   @media(max-width:360px) {
  .contactArea {     
      height: 1150px;   
}
 
 .contactArea .contactAreatext{
          width:85%;
          margin:0 auto ;
          line-height :2em;
} 
   .form-group img {
        border: none !important;
        width: 100%;
        height: auto;
    } 
   
}  
/*footer==================================================*/

footer {
    background: url(../images/bg_footer.jpg) no-repeat center center;
  	background-size: cover;
	background-color: #333232; 
  	/*height: 200px;*/
  	transition: 0.3s;   
    width: 100%;
    max-width:1400px;
    overflow: hidden;  
    color: #efefef;    
    padding: 16px 20px 50px;  
    font-family: "微軟正黑體", "新細明體", "標楷體", 'Muli', sans-serif;
}
    footer a {
        color: #efefef;
        text-decoration: none;
    }
    footer a:hover {
        color: rgb(250, 172, 77);
        text-decoration: none;
        -moz-transition: background 250ms;
        -o-transition: background 250ms;
        -webkit-transition: background 250ms;
    }    
    .footer_row {
        width: 90%;
        margin:1em auto;
        padding-bottom :4em;
    }
    /*footer_menu*/
   .footer_menu { 
         width: 80%;
         text-align:center;
         margin:0 auto 1em;    
    }
     .footer_menu li {
        /*float: left;*/       
        display: inline-block;
        padding: 0 15px;
        border-right: 1px #ccc solid;
        font-size: 15px;
        line-height: 14px;
    }
    .footer_menu li:first-child {
        padding-left: 0;
    }
    .footer_menu li:last-child {
        border: none;
        padding-right: 0;
    }      

    /*footer_left*/
    .footer_left {
        float: left;
        width: 55%;   
    }
     /*logo_bottom */
    .logo_bottom { 
        float:left;       
        background: url(../images/logo_bottom.png ) no-repeat ;
	    width:82px;
        height:76px;
	    margin-right :1em; 
    }
    .footer_left ul {
        float:left;
        list-style: none;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .footer_left li {
        margin: 0 0 0.3em 0;
    }
     .footer_left ul li i {
        letter-spacing:8px;
    }
     /*copyright*/
     .footer_text {
        margin-left:1em;
        font-size: 13px;
    }
      /*counter*/
     .footer_counter {
       position:relative; 
       left:185px; 
       top:-30px;
    }

    /*footer_right*/
    .footer_right {
        float: left;
        width: 43%;   
        /*height:200px;*/
    }   
    
    .footer_map {
        float: left;
        width: 100%;
        max-width :600px;
        height:200px;
        padding-bottom:20px;
    }

  @media(max-width:1366px) {
          
    .footer_left {
        width: 55%;
        margin-left: 0.5em;
    }

    .footer_right {
        width: 38%;
    }
    .footer_ul {
        float:left;    
    }
}
  
  @media(max-width:1280px) {   

    .footer_right {
        width: 44%;
    }
     .footer_map {
        float: left;
        width: 100%;
        max-width :480px;
        height:200px;
        padding-bottom:20px;
    }
}

@media(max-width:1160px) {
    .logo_bottom {        
        background: url(../images/logo_bottom_s.png ) no-repeat ;
	    width:50px;
        height:46px;
	    margin: 0 auto; 
    }
      .footer_left {           
        width: 55%;
        margin-left: 0;
        font-size :0.9em;
    }
       .footer_ul {
        width:80%;
        float:left; 
        margin-left: 0.5em;   
    }
       .footer_counter {
           position:relative; 
           left:120px; 
           top:-28px;
    }      
    .footer_right {
        margin-top:0.5em;
        width: 43%;
    }
}
@media(max-width:1024px) {  
      .footer_ul {
        width:85%;
        float:left; 
        margin-left: 0.5em;   
    }
      .footer_right {
        margin-top:0.5em;
        width: 44%;
    }
    
      .footer_map {       
        width: 100%;
        height:auto;
        /*margin-left:-5em;*/
    }
}
@media(max-width:960px) {  
      .footer_ul {
        width:80%;
        float:left; 
        margin-left: 0.5em;   
    }
      .footer_right {
        margin-top:0;
        width: 32%;
        float:right ;
    }
     .footer_left {           
        width: 68%;        
        /*margin-left: 0;*/
        font-size :0.9em;
    }
     .footer_map {       
        width: 100%;
        height:auto;
        max-height:80px;          
    }
}
@media(max-width:900px) {  
      .footer_ul {
        width:85%;
        float:left; 
        margin-left: 0.5em;   
    }
      .footer_right {
        margin-top:0;
        width: 35%;
        float:right ;
    }
     .footer_left {           
        width: 63%;        
        /*margin-left: 0;*/
        font-size :0.9em;
    }   
}
@media(max-width:800px) {  
     .footer_right {
        margin-top:0;
        width: 33%;
        float:right ;
    }
     .footer_left {           
        width: 65%;        
        /*margin-left: 0;*/
        font-size :0.9em;
    }    
    .logo_bottom { 
	    margin-top:-3em; 
        margin-bottom :0.5em;
        margin-left :1em;
    }
      .footer_ul {
        width:100%;
        float:left; 
        margin-left: 0.5em;   
    }
       .footer_counter {       
           left:70px; 
    } 
      
}
@media(max-width:767px) {
    .footer_right {
        /*margin-top:0;*/
        width: 100%;
        /*float:right ;*/
    }
     .footer_left {           
        width: 100%;  
        font-size :0.9em;
    }    
    .logo_bottom { 
	    margin-top:-3.5em; 
        margin-bottom :0.5em;
        margin-left :1em;
    }
     .footer_map {
         width:100%; 
         max-width:660px; 
        margin-bottom:50px;          
    }
}
@media(max-width:540px) {
     footer {   
        width: 100%;
        max-width:540px;
        overflow: hidden;
        padding: 16px 10px 50px;  
   
}
        .footer_menu { 
         width: 80%;
         text-align:center;
         margin-top:0;
         margin-left :5em;    
    }
    .logo_bottom { 
	    margin-top:-3em; 
        margin-bottom :0.5em;
        margin-left :0.25em;
    }
     .footer_ul {
        width:100%;
        float:left; 
        margin-left:0.25em;   
    }
   
}

@media(max-width:480px) {
     footer {   
        width: 100%;
        max-width:480px;
        overflow: hidden;
        padding: 16px 10px 50px;  
   
}
        .footer_menu { 
         width: 100%;
         text-align:center;
         margin-top:0;
         margin-left :1.5em;    
    }
    .logo_bottom { 
	    margin:-3em 0.5em 0.5em -0.75em;     
      
    }
     .footer_right {      
        width: 100%; 
        font-size:0.8em;   
    }
      
     .footer_ul {
        width:100%;
        float:left; 
        margin-left:0;   
    }
     .footer_map {
         width:100%; 
         max-width:450px; 
        margin-bottom:50px;          
    }
}
@media(max-width:450px) {
     footer {   
        width: 100%;
        max-width:450px;
        overflow: hidden;
        padding: 16px 5px 50px;  
   
}
        .footer_menu { 
         width: 100%;
         text-align:center;
         margin-top:0;
         margin-left :0.5em;    
    }
    .logo_bottom { 
	    margin:0em 0.5em 0.5em -0.75em;     
      
    }     
       .footer_counter {       
           left:110px; 
    } 
     .footer_ul {
        width:80%;
        float:left; 
        margin-left:0;   
    }
     .footer_map {
         width:100%; 
         max-width:450px; 
        margin-bottom:50px;          
    }
}
@media(max-width:414px) {
     footer {   
        width: 100%;
        max-width:414px;
        overflow: hidden;
        padding: 16px 5px 50px;  
   
}
        .footer_menu { 
            display:none;    
    }

    .logo_bottom { 
	    margin:0em 0.5em 0.5em 0.5em;     
      
    }     
       .footer_counter {       
           left:65px; 
    }    
     .footer_map {
         width:100%; 
         max-width:450px; 
        margin-bottom:50px;          
    }
}
@media(max-width:360px) {
     footer {   
        width: 100%;
        max-width:360px;
        overflow: hidden;
        padding: 16px 5px 50px;  
   
} 
      .footer_counter {       
           left:60px; 
    }   
     .footer_map {
         width:100%; 
         max-width:360px; 
        margin-bottom:50px;          
    }
}
@media(max-width:320px) {
     footer {   
        width: 100%;
        max-width:320px;
        overflow: hidden;
        padding: 16px 5px 50px; 
   
} 
      .footer_counter {       
           left:60px; 
    }     
     .footer_map {
        width:100%; 
        max-width:320px; 
        margin-bottom:50px;          
    }
}
/*toTop==============================================================================*/
.scrollToTop{
	width: 48px;
    height: 65px;
	position:fixed;
	bottom: 40px;
    right: 20px;
	display:none;
    text-decoration: none;
    overflow: hidden;
    border: none;
	background: url(../images/arr.png)  no-repeat 0px 0px;
}
.scrollToTop:hover{
	text-decoration:none;
}
/*fck============================================================================================================*/
.fck, .fck p, .fck div, .fck tr, .fck td, .fck span, .fck ol, .fck ul, .fck li {
    color: #333;
    font-size: 14px;
    line-height: 1.8em;
    font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
}

    .fck a {
        color: #2675a3;
        text-decoration: underline;
    }
    .fck a:hover {
        color: #333;
        text-decoration: underline;
    }
    .fck h1 {
        font-size: 24px;
        font-weight: bold;
        font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
        color: #d1870d;
        background:none;
        padding:0;
        margin:0;
        text-align: left;
        margin: 0 0 0 0;
    }
    .fck h2 {
        font-size: 22px;
        font-weight: bold;
        font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
        color: #526422;
        background:none;
        padding:0;
        margin:0;
        text-align: left;
        margin: 0 0 0 0;
    }
    .fck h3 {
        font-size: 18px;
        font-weight: bold;
        font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
        color: #2878a6;
    }
    .fck h4 {
        font-size: 18px;
        font-weight: bold;
        color: #934F2B;
    }
    .fck h5 {
        font-size: 16px;
        font-weight: bold;
        color: #399;
    }
    .fck h6 {
        font-size: 15px;
        color: #333;
        font-weight: bold;
    }
    .fck h7 {
        font-size: 13px;
    }
    .fck h1, .fck h2, .fck h3, .fck h4, .fck h5, .fck h6, .fck h7 {
        margin: 0 0 1em 0;
        line-height: 1em;
    }
    .fck pre {
        border: 1px #CCCCCC solid;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background-color: #fff;
        padding: 2px 7px !important;
    }
    .fck cite { /*格式設定*/
        color: #F00;
        font-size: 36px;
    }
    .fck address, .fck var, .fck cite { /*地址*/
        font-style: italic;
    }
    .fck .marker {
        color: #E13953;
    }
    .fck .big {
        font-size: 18px;
    }
    .fck .small {
        font-size: 14px;
    }
    .fck tt {
        background-color: #FFE6F1;
        color: #E13953;
    }
    .fck code {
        background-color: #f1f1f1;
        color: #E13953;
    }
    .fck kbd {
        background-color: #333;
        color: #fff;
    }
    .fck samp {
        background-color: #333;
        color: #FC0;
    }
    .fck del {
        text-decoration: line-through;
    }
    .fck ins {
        text-decoration: underline;
    }
    .fck p, .fck ul, .fck ol {
        padding: 0;
        margin: 0 0 1em 0;
        line-height: 1.8em;
        font-size: 15px;
        font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    }
    .fck ul li ul, .fck ol li ol, .fck ul li ol, .fck ol li ul {
        margin: 0 0 0 0;
    }
    .fck li {
        line-height: 1.8em;
    }
    .fck ol li {
        list-style-type: decimal;
        margin-left: 1.5em;
        font-size: 15px;
        font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
        color: #333;
    }
    .fck ul li {      
        margin-left: 1.5em;    
        list-style-image: url(../images/service_list.png);
        background-repeat: no-repeat;
    }
    .fck img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: 100% !important;
        max-width: 100% !important;
        margin: 1em auto 4px auto !important;
    }
    .fck table {
        border-collapse: collapse !important;
        width: 100% !important;
        font-family: "Times New Roman", Times, serif !important;
        font-size: 15px;
        border-color: #CCC;
        border: 1px #CCCCCC solid;
    }
    .fck table th, .fck table td {
        font-family: "Times New Roman", Times, serif;
        font-size: 15px;
        line-height: 1.2em !important;
        padding: 6px 2px !important;
        text-align: center;
    }

    .fck table th {
        background-color: #f1f1f1;
    }

    .fck table p, .fck table span {
        font-size: 15px;
        line-height: 1.2em !important;
        color: #333;
        margin: 0;
        padding: 0;
    }

video {
    max-width: 100%;
    height: auto;
    max-height:640px;
}

.row:after {
    content: "";
    clear: both;
    display: table;
}

.bg_video {
    width:100%;
    background-color:rgb(51, 51, 51);     
    text-align:center; 
   padding: 16px 32px;
  
}
.clear_b {
    clear:both:
}
.video_title {  
    color: #efefef;
    background-color: rgba(117, 37, 38,1);
    border:#fff 1px solid;
    font-size:1.2rem;
    width: 18rem;
    padding: 16px 24px;
    margin:16px auto;
}
@media(max-width:768px) {
    .video_title {
        color: #efefef;
        background-color: rgba(117, 37, 38,1);
        border: #fff 1px solid;
        font-size: 1.2rem;
        width: 8rem;
        padding: 16px 24px;
        margin: 16px auto;
    }
}
@media(max-width:576px) {
    .video_title {
        color: #efefef;
        background-color: rgba(117, 37, 38,1);
        border: #fff 1px solid;
        font-size: 1.2rem;
        width: 10rem;
        padding: 16px ;
        margin: 8px auto;
    }
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
  /*  min-width: 100%;
    min-height: 100%;*/
    max-width:100%;
    height:auto;
}

/*999*/