.contact-title{width:100%; margin:0}
.contact-title h1{width: auto;display: inline-block; font-size:26px; font-weight: 500;letter-spacing: 0.1em}
.a-en{margin:0; font-size:32px; color: #5a8987; font-family:"Times New Roman","Microsoft JhengHei",sans-serif; line-height: 1em;}
.contact-top{width:100%; float: left; margin: 80px auto 60px}
.top-container{ width:1280px; margin: 0 auto}
.contact-list{width:100%;float: left; margin:0;display:flex;flex-wrap:wrap;}
.contact-item{width: calc((100% - 80px)/3);float: left;margin-right:40px;background-color: #678f8d;border-radius: 5px;padding: 30px;color:#fff}
.contact-item:nth-child(3) {margin: 0;}
.contact-item i{font-size:20px;margin-right:10px;}
.infortx{width: 100%;float: left}
.infortx .title{font-size:18px; margin-bottom:20px;font-weight: 500}
.infortx .left{font-size:16px; margin: 0 20px 0 0; display: inline-block}
.infortx .right{font-size:16px; display: inline-block}
.infortx .mtx{width: 100%; font-size:16px}
.infortx h2{font-size:15px; margin-bottom:5px}
.infortx p{font-size:14px;text-decoration: underline;text-decoration-color: transparent;transition: .5s; -webkit-text-decoration-color: transparent;-moz-text-decoration-color: transparent;text-underline-offset:2px;text-decoration-thickness: 1px}
 .infortx p a:hover{text-decoration: underline;text-underline-offset:2px;text-decoration-thickness: 1px}

@media only screen and (max-width: 1600px) {
.contact-top{margin:70px auto 50px}
.top-container{ width:85%;}
}
@media only screen and (max-width: 1200px) {
.contact-top{margin:55px auto 45px}
.top-container{ width:90%;}
.contact-item{width: calc((100% - 60px)/3);margin-right:30px;padding: 25px}
.contact-item:nth-child(3) {margin: 0;}
.infortx .left{margin: 0 0 20px 0}
}
@media only screen and (max-width: 980px) {
.contact-top{margin:55px auto 40px}
.contact-item{width: 100%;margin:0 0 10px;padding:20px 30px}
.contact-title h1{font-size:24px}
.a-en{font-size:30px}
.infortx .left{margin: 0 25px 0 0}
}
@media only screen and (max-width: 550px) {
.contact-top{margin:30px auto 25px;}
.contact-item{margin:0 0 10px;padding:20px 20px}
.contact-title h1{font-size:22px}
.a-en{font-size:26px}
}

.unlock{ width:100%;padding:0;position:relative;z-index:1;margin:0 auto; color: #000;}
.unlock input[type="checkbox"]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px; }
.unlock input[type="checkbox"]:focus + label:before,.unlock input[type="checkbox"]:hover + label:before{border-color:#444444;border-width:2px;border-radius:99em; }
.unlock input[type="checkbox"]:active + label:before{-webkit-transition-duration:0;transition-duration:0;-webkit-filter:brightness(0.2);filter:brightness(0.2);}
.unlock input[type="checkbox"] + label{position:relative;padding:10px;padding-left:35px;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:0;}
.unlock input[type="checkbox"] + label:before{box-sizing:content-box;content:'';position:absolute;top:50%;left:0;width:20px;height:20px;margin-top:-12px; border:2px solid #999999;border-radius:99em; text-align:left;}
.unlock input[type="checkbox"] + label:after{box-sizing:content-box;content:'';background-color:#717070;position:absolute;top:50%;left:4px;width:22px;height:22px;border-radius:99em; margin-top:-11px; -webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50%;transform-origin:50%;-webkit-transition:-webkit-transform 200ms ease-out;transition:-webkit-transform 200ms ease-out;transition:transform 200ms ease-out;transition:transform 200ms ease-out,-webkit-transform 200ms ease-out;}
.unlock input[type="checkbox"] + label:after{background-color:transparent;top:50%;left:5px;width:0px;height:0px;margin-top:-7px;border-style:solid;border-color:#444444;border-width:7px;-o-border-image:none;border-image:none;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:none;transition:none;}
.unlock input[type="checkbox"]:checked + label:after{content:'';-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 200ms ease-out;transition:-webkit-transform 200ms ease-out;transition:transform 200ms ease-out;transition:transform 200ms ease-out,-webkit-transform 200ms ease-out}
.send{cursor:pointer;}

 /*lock*/
.lock{float:left;width:50%; margin:8px 0 0;font-size:15px;}
.unlock{width:125px;position:relative;z-index:1;margin:0 0 20px 0;}
.cnwarp{width:100%; float:left; margin:0}
.formsinfo{width:1280px; margin:0 auto 90px; padding:60px 70px; background-color: #fff;border-top: 4px solid #555;border-bottom: 4px solid #8b282d;background-color: #ffffff;box-shadow:2px 3px 10px #ccc;}
.cn-text{width:100%; float: left;font-size:16px; text-align: center;margin: 20px 0 40px}  
.cn-subtitle{width:100%; float: left;margin-bottom: 10px; }  
.cn-subtitle h1{ font-size:24px; text-align: center;font-family: "Montserrat", sans-serif;font-weight:500; }  
.inputbox{width:100%; height:36px; padding:0 10px; line-height:36px;border-top:1px solid #fff; border:1px solid #777; font-family: 'Noto Sans TC', "Microsoft JhengHei", "Arial", "Helvetica", "sans-serif";font-size: 14px; color: #f6f6f6; box-sizing:border-box;border-radius:0; background-color:transparent;}
.forms-dtitle{width:100%;float:left; margin-bottom: 10px;}
.forms-dtitle span{color:#e70012; }
.timebox{width:100%; float:left;}
.timebox ul{margin:0; padding:0; list-style:none; } 
.timebox li{ width:auto; float: left; margin:0 30px 0 0; padding:0;line-height:32px; font-size: 15px;border-bottom: 1px solid #ccc;}
.sendline{width:100%; float:left; margin: 30px 0 0;}
.sendwf{width:50%; float:left;margin:0;}
.send{width:60px; height: 60px;text-align:center; margin:0 0 0 auto;border:3px solid #678f8d;background-color: #fff;border-radius: 99em;transition: all 0.5s;}
.send-mail{width:54px;height:54px;font-size:14px;text-align:center; margin:0;transition: background-position 0.5s; display: block; text-decoration: none;
	cursor: pointer;border-radius: 99em;box-shadow:rgba(0,0,0,0.4)1px 1px 2px 0px inset;background-color: #fff;color: #000}
  .send:hover{border:3px solid #8b282d;transition: all 0.5s;}
.send input{border: none;}
.forms-a{float:left; width:46%; margin:0 4% 0 0;position: relative;margin-top: 45px; }
 .forms-a input{outline: none;border: none;width: 100%;padding: 10px 0;color: #000;font-size: 15px; border-bottom: 1px solid #999;background: none;border-radius:0; }
 .forms-a label{position: absolute;top: 0;left: 0;color: #000;font-size: 15px;pointer-events: none;transition: all 0.5s;line-height:36px;letter-spacing: 0.2em;}
.forms-a input:focus + label,
.forms-a input:valid + label{top: -30px;}
.forms-d{float:left; width:46%; margin:0 0 0 4%;position: relative;margin-top: 45px;}
 .forms-d input{outline: none;border: none;width: 100%;padding: 10px 0;color: #000;font-size: 15px; border-bottom: 1px solid #999;background: none;border-radius:0; }
 .forms-d label{position: absolute;top: 0;left: 0;color: #000;font-size: 15px;pointer-events: none;transition: all 0.5s;line-height:36px;letter-spacing: 0.2em; }
.forms-d input:focus + label,
.forms-d input:valid + label{top: -30px;}
.messagebox{float:left;width:100%; margin:40px 0 0;}
.forms-dtitle{width:100%;float:left; margin:0 0 5px; line-height: 34px;font-size: 15px;letter-spacing: 0.2em;}
.message{float:left;width:100%; margin:0;}
.textareabox{width:100%; height:120px;padding:8px 10px; border:1px solid #999;font-size:16px; box-sizing:border-box;border-radius:0; background-color:transparent;color:#111 !important; line-height:1.5em;}

@media only screen and (max-width: 1600px) {
.formsinfo{width:85%; margin:0 auto 80px; padding:50px 60px;}
}
@media only screen and (max-width: 1200px) {
.formsinfo{width:90%; margin: 0 auto 60px; padding: 45px 50px;}
.cn-text{margin: 10px 0 20px}  
}
@media only screen and (max-width: 980px) {
.formsinfo{margin:0 auto 60px; padding: 40px}
.sendline{margin: 20px 0 0;}
.textareabox{height:90px;}
}  
@media only screen and (max-width: 767px) {
.forms-a{width:100%; margin:0;position: relative;margin-top: 35px}
.forms-a input:valid + label{top: -20px;}
.forms-d{width:100%; margin:0;position: relative;margin-top: 35px}
.forms-d input:valid + label{top: -20px;}
.cn-subtitle{margin-bottom: 10px;}
}

@media only screen and (max-width: 550px) {
.formsinfo{margin:0 auto 35px; padding: 20px 25px 25px;}
.lock{margin:15px 0 0 0;}
.unlock{margin:0 0 15px 0;}
.cn-subtitle{margin:0 0 5px 0;}  
.cn-subtitle h1{font-size:22px;}
.sendline{width:100%; margin: 10px 0 0;}
.forms-a{width:100%; margin:0;position: relative;margin-top: 30px;}
.forms-a input:valid + label{top: -20px;}
.forms-d{width:100%; margin:0;position: relative;margin-top: 30px;}
.forms-d input:valid + label{top: -20px;}
.textareabox{height:100px;}
.messagebox{margin:30px 0 0;}
.cn-text{margin: 10px 0 5px}  
}

div.text-warning{margin: 2px 0 -10px 0;color: #c14948;font-size: 15px;display:block;padding: 0;}
span.text-warning{margin: 2px 0px 0px 0px;color: #c14948;font-size: 15px;padding:0;}
.hidden-input {opacity: 0;position: absolute;z-index: -1;}
input[type=checkbox]+span {display: inline-block;height: 13px;width: 13px;border-radius: 50px; margin:0 5px 0 0;background-color: #fff; border: 1px solid #555}
input[type=checkbox]:checked+span {background-color:#555;}
input::-webkit-input-placeholder {color:#000;}
input:-moz-placeholder {color: #000;}
input::-moz-placeholder {color: #000;}
input:-ms-input-placeholder {color: #000;}
input:-webkit-autofill,select:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset !important;} 
input:-webkit-autofill,textarea:-webkit-autofill,
select:-webkit-autofill {background-color: transparent!important;background-image: none !important;-webkit-box-shadow: 0 0 0 1000px #fff inset !important; border-bottom:1px solid #ccc; border-top: none;border-left: none;border-right: none;outline: none;}
input{outline-color: invert ;outline-style: none ;outline-width: 0px ;border: none ;border-style: none ;text-shadow: none ;-webkit-appearance: none ;-webkit-user-select: text ;outline-color: transparent ;box-shadow: none;}

textarea::-webkit-input-placeholder {color:#000;}
textarea:-moz-placeholder {color: #000;}
textarea::-moz-placeholder {color: #000;}
textarea:-ms-input-placeholder {color: #000;}
textarea:-webkit-autofill,select:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset !important;  } 
textarea:-webkit-autofill{-webkit-text-fill-color:#000;}
textarea{resize:vertical;}