@charset "utf-8";
/* -- Contact ------ */
form { margin: 0px; }
.form input,.form option{color: #000; background:transparent; border-bottom: 1px solid #cbcbcb;border-left:none;border-top:none; border-right:none; font-size:1.25rem;  font-family: 'Noto Sans TC', sans-serif; font-weight: 400;  }
.form select,.form textarea{color: #000; background:transparent; border-bottom: 1px solid #cbcbcb;border-left:none;border-top:none; border-right:none; font-size:1.25rem; font-family: 'Noto Sans TC', sans-serif;  font-weight: 400; }
.form select,.form input,.form option,.form textarea,.form input[type="radio"]+label, .form input[type="checkbox"]+label{ transition: background-color 0.5s; -moz-transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -ms-transition: background-color 0.5s; -o-webkit-transition: background-color 0.5s; -webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	box-sizing:border-box;  outline: none;  }
.form input:invalid {  background-color: #E00;}
/*------ form ------*/
.form {width:100%; margin:auto;  display: block;}
.form ul { display: block; margin:2% auto; padding: 0; width:100%; list-style: none; overflow: hidden; }
.form ul li { margin:2% auto; font-size: 1rem; overflow: hidden;}
.form li input { padding: 0 10px; width: 100%; min-height: 40px;background:rgba(255,255,255,.7);  font-size:.9rem;   }
.form li input::placeholder,.form ul li textarea::placeholder {  color: #000;font-size:.9rem;}
.form ul li select { padding: 0 0 0 5px; width: 100%; height: 40px; line-height: 40px; font-size:.9rem; }
.form ul li option { padding: 5px 10px; font-size:.9rem; }
.form ul li textarea { padding: 5px 10px; margin: 0 0px 18px 10px;width: 97%; height: 100px; line-height: 20px;background:rgba(255,255,255,.7); font-size:.9rem; }

.form li.comment { display:block; width: 100%; margin-left:0px !important;  }
.form ul li.code input { width:50%; margin-right: 10px; }
.form ul li.code img{ background-color:#fff;}
.form ul li select:focus { color: #fff; }
.form ul li select:focus option { color: #666; padding: 5px 0px; }
.form ul li textarea:focus, .form ul li input:focus { background: #eee; color: #000; }



.contact{ padding:50px 0px;  background:  url( ../images/index/map.png) no-repeat left top; background-size:50% auto; }	
.contact h1{ padding-bottom: 10px; margin-bottom: 5%;color:#333 !important; text-align: center; font-size:2rem;  font-weight: 700; background: url(../images/index/v-line-2.png) no-repeat center bottom; background-size: 86px 4px; }
.contact h3{ margin-bottom: 5%; font-size:1.55rem;  font-weight: 700;}
.contact-wrap{width:100%;  margin:0 auto; }
.contact-data{ width: 100%; display: block;  vertical-align: top;position: relative; z-index:1; }
.contact-info{width: 98%;  max-width: 1002px; display: block; margin: auto;  padding: 50px 40px 20px 10px;  position: relative; z-index:9; background: rgba(255,255,255,.9); }
.contact-main{ width: 100%; padding:2em 1em; display: block; margin: auto;     }
.contact-main font{  display: block;  font-size: 20px;  font-weight:700;  padding-bottom: 20px; line-height: 100%;}
.contact-main i{  display: inline-block; vertical-align: middle; padding-right: 18px;font-size: 30px;}
.contact-main .txtcols { width:90%; margin:0px auto;  display: block;-webkit-column-count: 1;   -moz-column-count: 1;  column-count: 1; column-gap: 80px;  }


/* -- 767px ----------------*/
@media screen and (min-width: 768px){
.form { max-width: 720px; width:98%; margin: 0 auto; display: block;}
.form ul li { display: inline-block; list-style: none; padding: 0; width:48%; margin: 0 0px 18px 10px; overflow: hidden }
.form li input { max-width: 320px; }
.form ul li select { max-width: 320px; }
.form ul li.code { margin-left: 0; }
	
/*size*/
.form .col-full{display:block; width: 100%; margin-right:0px !important;  }
.form li.col-full input{ max-width: 100%;}
.form .col-2 {width: 48%;}
.form .col-3 {width: 33%;}
.form .col-4 {width: 25%;}
.contact-main{ width:98%; padding:2rem;  }
.contact-info{width: 80%;box-shadow: 2px 6px 15px rgba(0,0,0,.3); }
	
.contact-main .txtcols { width:31%; margin:0px 3% 0 0;  display: inline-block;   }
.contact-main .txtcols:nth-child(3n){margin-right: 0px;}
	
	
}