
.cms-main-content {  background-size:100% auto,auto; background-image:url("../images/index/bg-contact.jpg"), linear-gradient(#e1e1e1 10%, #fff 50%, #fff 100%); background-position: left top; background-repeat: no-repeat,repeat;}

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

 
[class^="col-"] { margin:3px 0px; }
 .cms-tab-wrap{border-bottom: solid 1px #e1e1e1}
 .cms-tab-wrap .resp-tabs-list { margin-top:0px!important;}
.cms-main-contact-tab .resp-tabs-container{background: #fff; padding: 0px 10px; border-radius:15px 15px 0px 0px; box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px;}
 
@media (max-width: 767.98px) {
.cms-main-content {width: 100%; padding: 35px 5px;  margin:30px auto 60px auto;}
  .cms-main-contact-tab .resp-tabs-container{ border-radius: 0px;box-shadow:none;}
}
.cms-main-contact-tab {width: 100%; max-width: 1100px;   padding:15px 35px; margin:60px auto 150px auto;  background-color: transparent; }
.cms-contact-wrap{width: 100%;  margin: auto; padding: 0px 30px;  display: flex; flex-wrap: wrap;   align-content: center; align-items: center;}
.cms-contact-detail{width:50%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start;  }
.cms-contact-map{width: 45%; margin-left: 5%}
.cms-contact-line{ width: 100%; display: flex; flex-wrap: wrap; margin: 1% 0; padding:5px 10px 10px 10px; border-bottom: solid 1px #ccc; align-content: center; align-items: center; }
.cms-contact-title{ width: 25%; font-size: 1rem; font-weight: 700; color: #000;  }
.cms-contact-name{ width: 75%; font-size: 0.95rem; font-weight: 400; line-height: 1.75rem; color: #232323;  }
.cms-contact-name a{  color: #232323;  }
 
@media (max-width: 767.98px) {
.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;  }
}

.address2{width:100%; margin: auto;}
.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.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;*/ flex-direction: row; }


@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);  }  
   
}

@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; font-weight: 400;}
.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;}
.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: calc(100% - 15px);  }  

.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 - 15px); 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:300px; padding: 10px 0px;  margin: 0 5px; font-weight: 700; border-radius:3px;  cursor: pointer;color: #FFF;}
.btn .btn-submit{background: #d0312a;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:#f7f7f7;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:#f7f7f7; border:none;  }
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: 20px;background:#f7f7f7;  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:0px; padding:2px 16px;width: 100%;margin-bottom: 18px;background:#f7f7f7;}

 
 
 
 