@charset "utf-8";
/*---------------contact---------------------*/
.contact{width:100%; max-width: 1100px; margin:5% auto 1% auto; padding:2%; display: block; background-color:rgba(255,255,255,1);  }
.contact h3{ margin:10px auto 20px 0px; padding:10px 0px 0px 40px; background: url("../images/icon/nav-1.svg") no-repeat left 0px; background-size:30px 30px;}
.contact p{color:#526672;}
.contact-left,.contact-right{ width:100%; margin: auto; display: block; }
.contact-left {
    padding: 0 15px;
}
.contact-left ul {  margin:5% auto; font-size:15px; border-bottom:dotted 1px #91a4af; }
.contact-left ul li{ width: 100%; margin-bottom: 5px; padding-left:15px; display: block; font-size:15px; line-height: 1.8em;	letter-spacing:0.2px;color:#3d3c3c; background: url("../images/icon/dot.png") no-repeat left 10px; background-size:8px; font-weight: 400;}
.contact-left ul li:first-child {font-size:16px; display:block;  color:#9a692d; background: no-repeat;}
.contact-left ul li:last-child { margin-bottom:10px}
.contact-left ul li a{ color:#cfb17e;}

/* -- form ------ */
form { margin: 0px; }
.form select,.form input,.form button,.form option,.form textarea { color: #666; background:#f3f4f7;border: 1px solid #999;border-radius:0px;  font-family:'微軟正黑體'; font-size:.95rem;  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 { max-width: 720px; margin: 0 auto; display: block;}
.form ul { display: block; margin: 0; padding: 0; width: 100%; list-style: none; overflow: hidden; }
.form ul li { display: inline-block; width: 100%; padding: 0 10%; margin: 0 0px 18px 0; font-size: 13px; overflow: hidden;}
.form li input { padding: 0 10px; width: 100%; height: 40px; line-height: 40px; color: #999;}
.form ul li select { padding: 0 0 0 5px; width: 100%; height: 40px; line-height: 40px;  color: #999; }
.form ul li option { padding: 5px 10px;}
.form ul li textarea { padding: 5px 10px; width: 100%; height: 100px; line-height: 20px; }
.form li.comment { display:block; width: 100%; }
.form ul li.code input { width:50%; margin-right: 10px; }
.form ul li select:focus { color: #333; }
.form ul li select:focus option { color: #333; padding: 5px 0px; }
.form ul li textarea:focus, .form ul li input:focus { background: #eee; color: #000; }
 
div.submit { padding: 45px 0; display: flex; align-items: center; justify-content: center;}
div.submit input, div.submit button {  width: 210px; height: 50px; font-weight: 700; cursor: pointer;}
div.submit .clear { background-color: #dcdcdc; padding: 1%; margin: 1% 3px 1% auto; border: solid 1px #dcdcdc; }
div.submit .send { background-color: #dd002e; color: #fff; padding: 1%; margin: 1% auto 1% 3px; border: solid 1px #dd002e;}
.result-page {
    margin: 100px;
    text-align: center;
    line-height: 1.5;
}
.gohome-page {
    margin: 30px;
}
/* -- 767px ----------------*/
@media screen and (min-width: 767px) {
.contact-right { width:48%; margin:50px 0 0 2%; display: inline-block; }
.contact-left{ width:40%; margin:20px 0 0 3%; display: inline-block; vertical-align:top;}
.form ul li { display: inline-block; list-style: none; padding: 0; width:46%; margin: 0 0px 18px 0; overflow: hidden; line-height: 1; font-weight: 400;}
.form ul li:nth-child(even) { margin-left: 30px; }
.form li input { max-width: 240px; }
.form ul li select { max-width: 240px; }
.form ul li.code { margin-left: 0; }
.form ul.send li{ display: inline-block; width:44%;}
}