
.cms-main-content {  background-size:auto; background-image:linear-gradient(#fff 10%, #fff 50%, #f7fbf5 100%); background-repeat: repeat;}

.cms-main-content { width: 100%; max-width: 100%; padding:20px; margin-top: 0px; }

 

.cms-contact-wrap{width: 100%;  margin: auto; padding: 0px;  display: flex; flex-wrap: wrap;  }

.cms-form{flex: 0 0 50%; position: relative; padding:0px 10px;}
.cms-info{flex: 0 0 50%; position: relative; padding:0px 50px;} 
.cms-info-box{ margin-bottom: 20px; display: flex; flex-wrap: wrap; }
@media (min-width: 1280px){
.cms-info::before { content: ''; position: absolute; top: 0; left: -10px; bottom: 0; display: block; width: 1px; background-color: #323232; opacity: .1;}
}

@media (max-width: 1024px) {
 .cms-info{ padding:0px;} 
}
@media (max-width: 768px) {
.cms-form{flex: 0 0 100%; padding:0px 10px;}
 .cms-info{flex: 0 0 100%; } 
}
.cms-contact-detail{width:100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start;  }
 .cms-contact-line{ width: 100%; display: flex; flex-wrap: wrap; margin: 1% 0; padding:5px 10px 10px 10px; border-bottom: solid 1px rgba(50, 50, 50, 0.1); align-content: center; align-items: center; }
.cms-contact-title{ width: 20%; padding-left: 20px; font-size: 1rem; font-weight: 700; color: #309C3D; position: relative;  }
.cms-contact-title::before { content: ''; position: absolute; top: calc(0.75rem - 1px); left: 0; display: block; width: 12px; height: 2px; background-color: #309C3D;}
.cms-contact-name{ width: 80%; font-size: 1rem; font-weight: 400; line-height: 1.75rem; color: #323232;  }
.cms-contact-name a{  color:#323232   }
.cms-contact-map {width: 80%; position: relative; overflow: hidden; margin: 0; border: 10px solid #ffffff; border-radius: 20px;  -webkit-box-shadow: 10px 10px 20px rgb(0 0 0 / 30%); box-shadow: 10px 10px 20px rgb(0 0 0 / 30%);}
@media (max-width: 768px) {
.cms-main-contact {width: 100%; max-width: 100%;  padding: 35px 15px;  margin:0px auto 60px auto;   }
.cms-contact-detail{width: 100%;   }
.cms-contact-map{width: 100%; margin-left: 0}
.cms-main-contact-tab {width: 100%;   padding: 35px 0px;   margin:30px auto;  }
.cms-contact-title{ width: 30%; padding-left: 20px; font-size: 1rem; font-weight: 700; color: #309C3D; position: relative;  }
.cms-contact-name{ width: 70%; font-size: 1rem; font-weight: 400; line-height: 1.75rem; color: #323232;  }

}

.address2{width:100%; margin: auto;}
.contact-form{width: 100%;   padding:15px 50px; margin:20px auto 150px auto;  background-color: transparent; }
.contact-form ul li .formTd{width: calc(100% - 15px);  display: flex; flex-wrap: wrap; }  
.contact-form ul li.full{width: 100%!important;}
.contact-form ul li .formTd input[type=checkbox]{width:18px; height: 18px; margin-top: 12px!important; display: flex; flex-wrap: wrap;   align-self: center;  }
.contact-form ul li select{  min-height: 38px; width: calc(100% - 15px)!important;}
.contact-form ul li input,.contact-form ul li textarea{width: calc(100% - 30px)!important;}
.contact-form ul li.th-row .formTd select{ height: 30px; }  
.contact-form ul li .form-checkbox{ width:calc(100%/3 - 30px); margin: auto 15px; display: flex; flex-wrap: wrap; align-self: center; }
@media (max-width:1024px) {
 .contact-form{ padding:15px 0px;  }
   
}

@media print, screen and  (max-width:999px){
.address2{width:100%;margin: 0px; padding: 0px;}
.strong{font-size: 16px;font-weight: bold;}
.contact-form ul li .formTd{width:100%;  display: flex; flex-wrap: wrap;  }  
  .contact-form ul li .form-checkbox{ width:calc(100%/2 - 30px);   }  
}
@media print, screen and  (max-width:820px){
.contact-form ul li .form-checkbox{ width:calc(100% - 30px);} 
.contact-form ul li input,.contact-form ul li textarea{width: calc(100% - 18px)!important;}
.contact-form ul li select{  min-height: 38px; width: calc(100% - 18px)!important;}
 }

@media print, screen and  (min-width:640px) and  (max-width:999px){
.contact-data ul{display: flex;flex-direction: row;flex-wrap: wrap;margin-left: -18px;}
.contact-data ul li{width: calc(100% / 2 - 18px);margin-left: 18px;}
}


.contact-form ul li .formTh{font-size: 1rem;  color: #323232; font-weight: 700;}
.contact-form ul li .formTd{font-size: 1rem;}


@media print, screen and  (min-width:999px){
.contact{display: flex;flex-direction: row;}
.contact-form ul{width: 100%; display: flex; flex-wrap: wrap; margin: 0; padding: 0;}
.contact-form ul li{ width: calc(100% / 2 - 18px); display: flex; flex-wrap: wrap; flex-direction: column; list-style: none;}
 
    
.contact-form ul li .formTh{width: 100%;margin-top: 8px; display: flex; }
.contact-form ul li .formTd{width: 100%;}  

.contact-form ul li.th-row { width: calc(100%/2 - 18px); display: flex; flex-wrap: wrap; flex-direction: row;  justify-content: space-between; list-style: none;} 
.contact-form ul li.th-row .formTh{width: 100%; display: flex; }
.contact-form ul li.th-row .formTd{width: calc(100%/2 - 5px); flex-direction: row; }  

}













  /*----------------------------------------/
  title樣式5
----------------------------------------*/
.cms-title-block { width: 80%; padding-top: 0px; justify-content: flex-start;}
#cms-main .cms-title-block h2{ margin:0px 15px;   font-weight: 700;color: #000;  }
#cms-main .cms-title-block p {width: 100%; margin:15px;  }
#cms-main .cms-con p{ font-size:0.9rem; color:#404040;  }
#cms-main .cms-con p strong{ font-size:1.125rem; color:#016f89;  }  
#cms-main .cms-con p a{  color:#404040;  }
.cms-con { width: 100%; height: auto;  padding:30px 0px 155px 0px;  position: relative; display: flex; flex-wrap: wrap;}
.cms-con-wrap { position: relative; padding: 25px 40px; width: calc(100%/3 - 20px); margin:10px;  display: flex; flex-wrap: wrap; justify-content: center;  align-content: flex-start; align-items: flex-start; } 
.cms-con-location { position: relative; padding: 25px 40px; width: calc(100% - 20px); margin:30px 10px;  display: flex; flex-wrap: wrap; align-content: center; align-items: center; }   
.cms-con-location-img{ width: 30%;  display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.cms-con-location-img figure{ display: flex; }
.cms-con-location-detail{ width: 70%; display: flex; flex-wrap: wrap;  padding:10px 50px; }
@media (max-width: 768px) {
.cms-con-wrap { position: relative; padding: 25px 40px; width: calc(100% - 20px); margin:10px;  } 
.cms-con-location {  padding: 0px 0px 10px 0px; width:100%; margin:30px auto;  }      
.cms-con-location-img{ width: 100%; justify-content: center; }  
.cms-con-location-img figure img{ width: 100%; margin: auto; border-radius:10px 10px 0px 0px;  }
.cms-con-location-detail{ width: 100%; padding:0px 15px;  }

}

#cms-main .cms-con-title { width: 100%;margin: 15px auto; padding-bottom: 15px;font-size:1.313rem; font-weight:400; letter-spacing: .5px; color:#016f89; border-bottom:  solid 1px #016f89;}
#cms-main .cms-con-title strong{ display: block;  }
#cms-main .cms-con-title span{ display: block; font-size:1rem; font-weight:400;  }

.cms-con-style { border-radius: 15px; box-shadow: 5px 15px 15px rgb(0 0 0 / 12%); background-image:linear-gradient(-45deg,#d6e7ec 0%, #fff 70%); position: relative; }
.cms-con-style:before{ content: ""; display: block;position: absolute; left:20px; top:15px; bottom: 20px; width: 90%; height: 90%; border: solid 1px rgba(1,111,137,.5); border-radius: 5px; }
.cms-con-location.cms-con-style:before{ content: ""; display: block;position: absolute; left:20px; top:20px; width: 97%; height: 90%; border: solid 2px rgba(1,111,137,.2); border-radius: 5px; }
 @media (max-width: 768px) {
 #cms-main .cms-con-title {  font-size:1.063rem; }
 .cms-con-location.cms-con-style:before,.cms-con-style:before{  display: none;  }   
}
.cms-map{ width: 100%; min-height:400px;  display: block; margin: auto;}
.cms-map iframe{width: 100%; min-height:400px;  display: block; margin: auto;}
a.btn{color: #fff!important;  }

 /*contact*/
.red:after{content:"*";color: red;padding-left: 3px;}
.contact-form > .content-Box{position: relative;}
.contact-form ul li{list-style: none; font-size: .875rem;   }
/*.contact-form ul li .formTh,.contact-form ul li .formTd{padding:8px 18px;margin-bottom: -8px;}*/
.contact-form ul li div span{margin: 0 18px 0 0;display:inline-block;}
.contact-form ul li div span:last-child{margin-right:0;}
.btn .btn-submit,.btn .btn-reset{width:calc(50% - 10px); max-width:220px; padding: 10px 0px; margin: 0 5px;font-size:1.188rem; font-weight: 400;letter-spacing: 5px;  border-radius:15px;  cursor: pointer;color: #FFF;}
.btn .btn-submit{background: #277f32;box-shadow: 0 3px 5px rgba(0,0,0, .3);border:0;}
.btn .btn-reset{background: #666;box-shadow: 0 3px 5px rgba(0,0,0, .3);border:0;}


    
.btn { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; text-transform: uppercase;  margin-top: 1.5%;}
.backlist_out{margin-top:-3px;}


.cms-title-h2-sub{}
.cms-title-h2-sub h2{ font-size: 2rem; font-weight: 700;}

/*--------form style------------*/
#cms-main label{ font-size:.9rem; align-self: center; }
input, option, textarea, input[type="radio"]{ line-height:2rem;  padding-left:15px;  font-size:0.875rem; color: #000;background-color:#f5f5f5;border: 1px solid #f7f7f7;border-radius:5px;  }
input[type="radio"]+label, input[type="checkbox"]+label { width:auto; box-sizing: border-box; padding: 5px 5px 0px 5px; }
*:focus { outline: none; }
/* placeholder ---*/
input::placeholder {  font-size:0.875rem;  }
input:focus, textarea:focus { outline: none;  }
input:focus:placeholder { color: transparent;  }
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }
/*IE --*/ 
select{min-height:2rem;line-height:2rem;  padding-left:15px;  font-size:0.875rem; color: #000; border-radius:0px; background:#f5f5f5; border:none;border-radius:10px;  }
select::-ms-expand {display: none; }
select:focus{ box-shadow: 0 0 5px 2px #467BF4;    }
input, button, select, textarea { outline: none;  }


input[type="text"],input[type="password"],input[type="tel"],input[type="number"],input[type="email"],input[type="password"],input[type="date"]	{ -webkit-appearance: none; -moz-appearance: none; appearance: none;min-height: 42px;background:#f5f5f5;  border-bottom: none;  border-top:none;  border-left:none;  border-right:none; }
input[type="submit"],input[type="reset"],input[type="button"]	{-webkit-appearance: none;}
input, input[type=checkbox]::before,textarea{border: none; border-radius:10px; padding:2px 16px;width: 100%;margin-bottom: 18px;background:#f5f5f5;}

 
 
 
 