.contact-top{width:100%; float: left; margin:0;padding:170px 0 100px; background-color: #000000;color: #fff}
.top-container{ width:80%; margin: 0 auto}
.contact-title{width:100%;float:left;line-height: 1.7em;font-size: 36px;margin-bottom:60px;font-weight: 500}
.contact-title h1{width:100%;float:left;font-size: 16px;margin-bottom:10px;line-height: 1em;padding-bottom: 20px; font-weight: 400;border-bottom: 1px solid #999}
.contact-list{width:100%;float: left; margin:0;display:flex;flex-wrap:wrap;}
.contact-item{width: calc((100% - 60px)/4);float: left;margin-right:20px;background-color: #333;border-radius: 5px}
.contact-item:nth-child(4) {margin: 0;}
.contact-item i{font-size:26px;margin-bottom: 20px}
 .infortx{width: 100%;float: left;padding: 25px 0;text-align: center;}
.infortx h2{font-size:15px; margin-bottom: 15px}
.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;color: #999;font-weight: 500}
 .infortx p a:hover{text-decoration: underline;text-underline-offset:2px;text-decoration-thickness: 1px;color: #fff}

@media screen and (max-width: 1600px) {
.contact-top{padding:170px 0 90px}
.top-container{ width:88%; margin: 0 auto}
}
@media screen and (max-width: 1200px) {
.contact-top{padding:140px 0 60px}
.contact-title{margin-bottom:50px}
.contact-item{width: calc((100% - 20px)/2);margin-right:20px; margin-bottom: 20px}
.contact-item:nth-child(2) {margin: 0 0 20px;}
.contact-item:nth-child(4) {margin: 0 0 20px;}
}
@media screen and (max-width: 980px) {
.contact-top{padding:130px 0 50px}
}
@media screen and (max-width: 767px) {
.contact-top{padding:130px 0 40px}
.contact-title{font-size:28px;margin-bottom:45px}
.contact-item{width: 100%;margin-right:0; margin-bottom: 20px}
}
@media screen and (max-width: 550px) {
.contact-top{padding:100px 0 20px}
.contact-title{font-size:26px;margin-bottom:35px}	
}

.unlock{ width:100%;padding:0;position:relative;z-index:1;margin:0 auto; color: #ddd;}
.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:#d5b544;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:'';color:#900;position:absolute;top:50%;left:0;width:20px;height:20px;margin-top:-12px; border:2px solid #9c802f;border-radius:99em; text-align:left;}
.unlock input[type="checkbox"] + label:after{box-sizing:content-box;content:'';background-color:#9c802f;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:#9c802f;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}
.sendsend{cursor:pointer;}

/*form*/
.cnwarp{width:100%; float:left;padding:110px 0 100px 0;background-color: #111;color: #fff}
.cntitle{width:100%; float:left; margin:0 0 50px 0; text-align:center;}
.cntitle h1{ width:100%;float:left;margin:0; line-height:2em; font-size:20px;font-weight:100; }
.cnbox{width:100%; float:left;margin:0;}
.sidebar_c{float:left;width:50%; height:800px;margin:0; padding:0;background-size:cover; background-position:left center; background-repeat: no-repeat; display:block}
.leftbar-box{float:left;width:34%; margin:60px 10% 0 6%;position:relative;}
.cninfo{width:100%;float:left; margin:0 0 20px}
.cninfo h2{margin:0 0 40px 0; font-weight:400; font-size:26px}
.cninfo p{width:80%;margin:0 20% 0 0;text-align:justify;line-height:2em;color: #999}
.forms-a{float:left; width:100%; margin:0;position: relative;margin-top: 45px;font-weight: 400}
 .forms-a input{outline: none;border: none;width: 100%;padding: 10px 0;color: #ccc;font-size: 15px; border-bottom: 1px solid #454547;background: none;border-radius:0; }
 .forms-a label{position: absolute;top: 0;left: 0;color: #fff;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;}
.messagebox{float:left;width:100%; margin:40px 0 20px}
.forms-dtitle{width:100%;float:left; margin:0 0 5px; line-height: 34px;font-size: 15px;color: #ccc;letter-spacing: 0.2em;}
.message{float:left;width:100%; margin:0;}
.textareabox{width:100%; height:120px;padding:8px 10px; border:1px solid #454547;font-size: 15px; box-sizing:border-box;border-radius:0; background-color:transparent;color:#fff !important; line-height:1.5em;font-family:"Noto Sans TC";}

 /*lock*/
.lock{float:left;width:100%; margin:10px 0 15px 0; padding:0; font-size:15px}
.unlock{width:125px;position:relative;z-index:1;margin:0 0 20px 0;}
.sendwf{float:left;width:100%; margin:0;}
.send{width:135px; margin:0 auto 0 0; padding:0;}
.send input{ outline-color: invert ;outline-style: none ;outline-width: 0px ;text-shadow: none ;-webkit-appearance: none ;-webkit-user-select: text ;outline-color: transparent; }
.send-mail{width:100%;display:block; height:30px; padding:0;line-height:28px;text-decoration:none; background:#333333;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;cursor: pointer;box-shadow:1px 2px 3px #000; color:#FFF;border-radius:99em;font-size:13px; font-weight:200;}
.send-mail:hover {color:#fff; background:#555555}  

@media only screen and (max-width: 1600px) {
.cnwarp{float:left;padding:90px 0}
.leftbar-box{width:38%; margin:60px 6% 0 6%;}
.cninfo p{width:90%;margin:45px 10% 0 0;}	
}
@media only screen and (max-width: 1200px) {
.cnwarp{padding:80px 0}
.sidebar_c{width:46%; }
.leftbar-box{width:44%; margin:30px 5% 0 5%;}
.cninfo{margin:0 0 10px}
.cninfo h2{margin:0 0 10px 0; font-size:38px;}
.cninfo p{width:100%;margin:25px 0 0 0;line-height:2em;}
}

@media only screen and (max-width: 980px) {
.cnwarp{padding:70px 0}
.cntitle{margin:0 0 30px 0; }
.sidebar_c{width:35%; height:760px}
.leftbar-box{width:54%; margin:10px 5% 0 6%;}
.cninfo{margin:0 0 10px 0;}
.cninfo h2{font-size:34px;}
.cninfo p{margin:25px 0 0 0;}
}  
@media only screen and (max-width: 767px) {
.cnwarp{padding:50px 0}
.cninfo h2{font-size:28px;}
.sidebar_c{display:none}
.leftbar-box{width:88%; margin:0 6%}	
}

@media only screen and (max-width: 550px) {
.cnwarp{padding:35px 0}
.cntitle{margin:0 0 30px 0;}
.cninfo{margin:0 0 25px 0;line-height:1.8em;}
.cninfo h2{margin:0 0 10px 0; font-size:24px;}
.cninfo p{margin:15px 0 0 0;line-height: 1.7em}
.forms-a{float:left; width:100%; margin:0 0 25px 0}
.messagebox{margin:10px 0 20px}
.lock{margin:10px 0;}
}

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;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#ccc;}
input:-moz-placeholder, textarea:-moz-placeholder { color:#ccc;}
input::-moz-placeholder, textarea::-moz-placeholder { color:#ccc;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#ccc;} 
input:-webkit-autofill,select:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset !important;} 
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;}
input:-webkit-autofill,textarea:-webkit-autofill,
select:-webkit-autofill {background-color: transparent!important;background-image: none !important;
-webkit-box-shadow: 0 0 0 1000px #111111 inset !important;}
input:-webkit-autofill{-webkit-text-fill-color:#ccc;font-weight: 300}

textarea::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#cccccc;}
textarea:-moz-placeholder, textarea:-moz-placeholder { color:#cccccc;}
textarea::-moz-placeholder, textarea::-moz-placeholder { color:#cccccc;}
textarea:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#cccccc;} 
textarea:-webkit-autofill,select:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset !important;  } 
textarea{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-autofill{-webkit-text-fill-color:#ccc;}
textarea{resize:vertical;}