@charset "UTF-8";
@import url(all.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.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}
.sendwf{width:50%; float:left;margin:0;}
.send {width:160px; text-align:center; margin:0 0 0 auto}
.send-mail{width:140px;margin:0;background-color:transparent; border-radius: 20px;border: 1px solid #222;font-size:15px;text-decoration:none;transition:color .2s,border .2s;cursor:pointer;display:inline-block;line-height:35px;text-align: center;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;color: #000}
  .send-mail:hover{background-color: #222222;color: #fff!important;letter-spacing:.03em;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;}

.consult-wrapper{float:left; width:100%; padding:0; margin:71px 0 0 0;color:#111; background-color:#f6f6f6}
.consult-content{max-width:1100px; margin:100px auto 80px auto; padding:0}
.consult-box{float:left;width:70%; margin:0 15% 0 15%;}
.top-title{float:left;width:100%;padding:0; margin:0 0 130px 0;}
.top-title h2{padding:0 0 0 8%; margin:0 0 40px 0; font-size:13px; letter-spacing:1.6em}
.top-title h3.title {margin-bottom: 0;text-align: left;font-weight: 400;line-height: 1.1;letter-spacing:1px}
.top-title h3.title span { display: block;font-size: 22px; padding-left:8%;color: #444;position: relative;}
.top-title h3.title span:before{content: '';position: absolute; top: 52%; background: #999; width: 6%;height: 1px;}
.top-title h3.title span:before{left: 0;}
.consult-info{float:left;width:100%;padding:0; margin:0 0 20px 0;font-size: 22px;}
.consult-detail{float:left;width:100%;padding:0; margin:80px 0 20px 0;font-size: 21px;}
/*form*/
.formbox{width:100%;float:left; }
.forms-a{float:left; width:47%; margin:0 3% 0 0;position: relative;margin-top: 35px; }
 .forms-a input{outline: none;border: none;width: 100%;padding: 10px 0;color: #000;font-size: 16px; border-bottom: 1px solid #999;background: none;border-radius:0; }
 .forms-a label{position: absolute;top: 0;left: 0;color: #666;font-size: 16px;pointer-events: none;transition: all 0.5s;line-height:32px;letter-spacing: 0.1em;}
.forms-a input:focus + label,
.forms-a input:valid + label{top: -25px;}
.forms-b{float:left; width:47%; margin:0 0 0 3%;position: relative;margin-top: 35px;}
 .forms-b input{outline: none;border: none;width: 100%;padding: 10px 0;color: #000;font-size: 16px; border-bottom: 1px solid #999;background: none;border-radius:0; }
 .forms-b label{position: absolute;top: 0;left: 0;color: #666;font-size: 16px;pointer-events: none;transition: all 0.5s;line-height:32px;letter-spacing: 0.1em; }
.forms-b input:focus + label,
.forms-b input:valid + label{top: -25px;}
.forms-b input:focus , .forms-a input:focus{border-style:solid;border-bottom:1px solid #ae8d30;border-top:0px;border-left:0px;border-right:0px;outline: none}
.forms-c{width:100%; float:left; margin:25px 0 0 0;color:#666}
.forms-e{width:100%; float:left; margin:15px 0 0 0;color:#666}
.forms-title{width:12%; float:left; margin:0; line-height: 32px;font-size: 16px}
.timebox{max-width: 100%; float:left}
.timebox ul{margin:0; padding:0; list-style:none; } 
.timebox li{ width:auto; float: left; margin:0 20px 0 0;line-height:32px; font-size: 16px;}
.red{color:#e70012; }
.fieldbox{width:88%; float:left;}
.fieldbox ul{margin:0; padding:0; list-style:none; } 
.fieldbox li{ width:auto; float: left; margin:0 20px 0 0;line-height:32px; font-size: 16px;}
.inqitem{float:left; width:100%;padding:0; margin:15px 0 0 0; font-size:14px;}
.building{float:left; width:20%; margin:0 1% 0 0; line-height: 32px;font-size: 16px}
.building input:focus{border-style:solid;border-bottom:1px solid #ae8d30;border-top:0px;border-left:0px;border-right:0px;outline: none}
.building2{float:left; width:50%; margin:0 1% 0 0; line-height: 32px;font-size: 16px}
.building2 input:focus{border-style:solid;border-bottom:1px solid #ae8d30;border-top:0px;border-left:0px;border-right:0px;outline: none}
.buildingitem{ width: 100%; float: left; margin: 0 15px 0 0;line-height:32px;}
.inforbuilding{width:100%; height:30px; margin:0;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;font-size:16px; color:#000; box-sizing:border-box; background-color:transparent;border-radius:0;}
.infor2{width:100%; height:30px;margin:0;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;font-size:16px; color:#000; box-sizing:border-box; background-color:transparent;border-radius:0;}
.address-tag{width:12%;float:left; margin:0;line-height: 32px;font-size: 16px;color:#666}
.ping{float:left; width:88%; }
.ping input:focus{border-style:solid;border-bottom:1px solid #ae8d30;border-top:0px;border-left:0px;border-right:0px;outline: none}
.spaceitem{float:left; width:auto;padding:0; margin:0 25px 0 0; font-size:14px;line-height:32px;}
.spaceitem span{color:#666}
.infor5{width:200px; height:30px; margin:0;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;font-size:16px; color:#000; box-sizing:border-box; background-color:transparent;border-radius:0;}
.budget{width:88%; float:left;}
.budget ul{margin:0; padding:0; list-style:none; } 
.budget li{ width:auto; float: left; margin:0 20px 0 0;line-height:32px; font-size: 16px;}
.information{width:100%; height:32px; padding:18px 0; border-top:1px solid #3d4442;border-right:1px solid #3d4442;border-left:1px solid #3d4442;border-bottom:1px solid #ccc;box-sizing:border-box;background-color:transparent; font-weight:400; font-size:15px; border-radius:0; color: #fff;}
.messagebox{width:100%; float:left;margin:20px 0 20px}
.forms-dtitle{width:100%;float:left; margin:0 0 5px; line-height: 32px;font-size: 16px;letter-spacing: 0.2em;color:#666}
.forms-dtitle i{color:#ae8d30}
.message{float:left;width:100%; margin:0;}
.textareabox{width:100%; height:200px;padding:8px 10px; border:1px solid #999;font-size: 15px; box-sizing:border-box;border-radius:0; background-color:transparent;color:#000 !important; line-height:1.5em;}

@media only screen and (max-width: 1600px) {	
.consult-info{margin:0 0 20px 0;font-size: 20px;}
.consult-detail{margin:80px 0 20px 0;font-size: 20px;}
}
@media only screen and (max-width: 1200px) {
.consult-wrapper{float:left; width:100%; padding:0; margin:50px 0 0 0;color:#111; background-color:#f6f6f6}
.consult-content{max-width:90%; margin:80px auto 90px auto; padding:0;}
.consult-box{float:left;width:70%; margin:0 15% 0 15%;}
.top-title{float:left;width:100%;padding:0; margin:0 0 70px 0;}
.top-title h2{padding:0 0 0 8%; margin:0 0 40px 0; font-size:13px; letter-spacing:1.6em}
.top-title h3.title {margin-bottom: 0;text-align: left;font-weight: 400;line-height: 1.1; letter-spacing:1px}
.top-title h3.title span { display: block;font-size: 22px; padding-left:8%;color: #444;position: relative;}
.top-title h3.title span:before{content: '';position: absolute; top: 52%; background: #999; width: 6%;height: 1px;}
.top-title h3.title span:before{left: 0;}
.consult-info{margin:0 0 20px 0;font-size: 18px;}
.consult-detail{margin:80px 0 20px 0;font-size: 18px;}
.cntitle p{width:100%;margin:0;font-size: 24px;}
.forms-title{width:17%}
.address-tag{width:17%}	
.building{width:31%; margin:0 1% 0 0}
.building2{width:31%; margin:0 1% 0 0}
.ping{width:83%; }
.fieldbox{width:83%}
.budget{width:83%}
}
@media only screen and (max-width: 980px) {
.consult-wrapper{float:left; width:100%; padding:0; margin:50px 0 0 0;color:#111; background-color:#f6f6f6}
.consult-content{max-width:94%; margin:60px 3% 60px 3%; padding:0;}
.consult-box{float:left;width:70%; margin:0 15% 0 15%;}
.top-title{float:left;width:100%;padding:0; margin:0 0 70px 0;}
.top-title h2{padding:0 0 0 8%; margin:0 0 40px 0; font-size:13px; letter-spacing:1.6em}
.top-title h3.title {margin-bottom: 0;text-align: left;font-weight: 400;line-height: 1.1; letter-spacing:1px}
.top-title h3.title span { display: block;font-size: 22px; padding-left:8%;color: #444;position: relative;}
.top-title h3.title span:before{content: '';position: absolute; top: 52%; background: #999; width: 6%;height: 1px;}
.top-title h3.title span:before{left: 0;}
.consult-info{margin:0 0 20px 0;font-size: 18px;}
.consult-detail{margin:80px 0 20px 0;font-size: 18px;}
.textareabox{height:180px;}
.cntitle h1{margin:0 0 20px; font-size:16px}
.forms-title{width:100%}
.address-tag{width:100%}	
.ping{width:100%; }
.fieldbox{width:100%}
.budget{width:100%}
.building{width:100%; margin:0 0 15px}
.building2{width:100%; margin:0}
.infor5{width:250px}
}  
@media only screen and (max-width: 767px) {
.consult-wrapper{float:left; width:100%; padding:0; margin:50px 0 0 0;color:#111; background-color:#f6f6f6}
.consult-content{max-width:94%; margin:60px 3% 60px 3%; padding:0;}
.consult-box{float:left;width:80%; margin:0 10% 0 10%;}
.top-title{float:left;width:100%;padding:0; margin:0 0 70px 0;}
.top-title h2{padding:0 0 0 8%; margin:0 0 40px 0; font-size:13px; letter-spacing:1.6em}
.top-title h3.title {margin-bottom: 0;text-align: left;font-weight: 400;line-height: 1.1; letter-spacing:1px}
.top-title h3.title span { display: block;font-size: 20px; padding-left:8%;color: #444;position: relative;}
.top-title h3.title span:before{content: '';position: absolute; top: 52%; background: #999; width: 6%;height: 1px;}
.top-title h3.title span:before{left: 0;}
.consult-info{margin:0 0 20px 0;font-size: 16px;}
.consult-detail{margin:80px 0 20px 0;font-size: 16px;}
.forms-a , .forms-b{width:100%; margin:0;position: relative;margin-top: 35px}
.forms-a input:valid + label , .forms-b input:valid + label{top: -20px;}
.send-mail{width:120px;font-size:14px;}
}
@media only screen and (max-width: 550px) {
.consult-wrapper{float:left; width:100%; padding:0; margin:50px 0 0 0;color:#111; background-color:#f6f6f6}
.consult-content{width:92%; margin:50px 4% 60px 4%; padding:0;}
.consult-box{float:left;width:80%; margin:0 10% 0 10%;}
.top-title{float:left;width:100%;padding:0; margin:0 0 40px 0;}
.top-title h2{padding:0 0 0 8%; margin:0 0 30px 0; font-size:13px; letter-spacing:1.6em}
.top-title h3.title {margin-bottom: 0;font-weight: 400;line-height: 1.1; letter-spacing:0}
.top-title h3.title span { display: block;font-size: 20px; padding-left:8%;color: #444;position: relative;}
.top-title h3.title span:before{content: '';position: absolute; top: 52%; background: #999; width: 6%;height: 1px;}
.top-title h3.title span:before{left: 0;}
.lock{margin:5px 0 0 0;}
.unlock{margin:0 0 15px 0;}
.forms-a, .forms-b{width:100%; margin:0;position: relative;margin-top: 30px;}
.textareabox{height:150px;}
.messagebox{margin:20px 0 20px; line-height: 1.8em;letter-spacing: 0}
.cntitle h1{margin:0 0 10px; font-size:15px}
.cntitle p{line-height: 1.8em;font-size: 20px;}
.infor5{width:200px}	
.send {width:120px}
.send-mail{width:120px;font-size:14px;}
}



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 #f8fafc inset !important; border-bottom:1px solid #999; border-top: none;border-left: none;border-right: none;outline: none}
input:-webkit-autofill{-webkit-text-fill-color:#000;}
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;}