/* amazing */
body{
background: #000;
}
/******** contactUs *******/
#contactUs{
width: 100%;
}
#contactUs_wrap{
width: 1440px;
margin: 0 auto;
padding: 100px 40px 50px;
box-sizing: border-box;
}
@media screen and (max-width: 1439px){
#contactUs_wrap{
width: 90%;
padding: 100px 0 50px;
}
}
#contactUs_wrap > h1{
margin-top: 100px;
margin-bottom: 55px;
font-size: 64px;
font-weight: bold;
line-height: 70px;
word-break: initial;
color: #fff;
}
@media screen and (max-width: 500px){
#contactUs_wrap > h1{
font-size: 40px;
line-height: 48px;
}
}
@media screen and (max-width: 785px){
#contactUs_wrap > h1 > span{
display: block;
}
}
#contactUs_wrap > p{
font-weight: bold;
font-size: 12px;
padding-top: 27px;
color: #fff;
position: relative;
}
#contactUs_wrap > p::after{
display: block;
content: '';
width: 16px; height: 2px;
background: #fff;
position: absolute;
top: 0; left: 0;
}
/******** location *******/
#location{
}
#location_wrap{
width: 1440px;
margin: 0 auto;
padding: 0 40px;
padding-top: 150px;
box-sizing: border-box;
overflow: hidden;
}
@media screen and (max-width: 1439px){
#location_wrap{
width: 90%;
padding: 150px 0 0;
}
}
#location_wrap > section{
width: 33.33%;
box-sizing: border-box;
padding-right: 3%;
color: #fff;
padding-bottom: 50px;
}
@media screen and (min-width: 768px){
#location_wrap > section:nth-child(n+4){
padding-bottom: 0;
}
}
#location_wrap > section:last-child{
padding-right: 0;
padding-bottom: 0;
}
@media screen and (min-width: 768px){
#location_wrap > section{
float: left;
}
}
@media screen and (max-width: 767px){
#location_wrap > section{
width: 50%;
padding-right: 3%;
}
}
@media screen and (max-width: 767px){
#location_wrap > section{
width: 100%;
padding-right: 0;
}
}
#location_wrap > section > h3{
font-weight: bold;
font-size: 32px;
font-family: 'PT Areka Neue';
}
#location_wrap > section > h4{
font-weight: bold;
font-size: 16px;
font-family: 'PT Areka Neue';
padding-top: 15px; padding-bottom: 10px;
}
#location_wrap > section > p{
font-size: 14px;
line-height: 25px;
}
@media screen and (max-width: 1439px){
#location_wrap > section > p > span.br1{
display: block;
}
}
@media screen and (min-width: 1016px){
#location_wrap > section > p > span.br2{
display: inline-block;
margin-left: 15px;
}
}
@media screen and (max-width: 1015px){
#location_wrap > section > p > span.br2{
display: block;
}
}
.map{
width: 100%; height: 480px;
background: #000;
padding-bottom: 50px;
margin-top: 100px;
}
/******** contact *******/
#contact{
}
#contact_wrap{
width: 1440px;
margin: 0 auto;
padding: 150px 40px 100px;
box-sizing: border-box;
overflow: hidden;
}
@media screen and (max-width: 1439px){
#contact_wrap{
width: 90%;
padding: 150px 0 100px;
}
}
#contact_wrap > section{
float: left;
}
section.contact_title{
width: 40%;
box-sizing: border-box;
padding-right: 3%;
color: #fff;
}
@media screen and (max-width: 767px){
section.contact_title{
width: 100%;
padding-right: 0;
margin-bottom: 60px;
}
}
section.contact_title > h3{
font-weight: bold;
font-size: 28px;
line-height: 34px;
margin-bottom: 20px;
}
@media screen and (max-width: 900px){
section.contact_title > h3{
font-size: 24px
}
}
@media screen and (min-width: 768px){
section.contact_title > h3 > span{
display: block;
}
}
section.contact_title > p{
font-size: 14px;
line-height: 24px;
}
section.contact_form{
width: 60%;
}
@media screen and (max-width: 767px){
section.contact_form{
width: 100%;
}
}
section.contact_form > form{
width: 100%;
}
section.contact_form > form > fieldset{
width: 100%;
}
section.contact_form fieldset > div{
margin-bottom: 50px;
}
section.contact_form fieldset > .projectName,
section.contact_form fieldset > .askInfo{
height: auto;
position: relative;
}
section.contact_form fieldset > .projectName > span,
section.contact_form fieldset > .askInfo > span{
width: 0; height: 3px;
overflow: hidden;
display: block;
background: #fff;
transition: all 0.3s;
position: absolute;
left: 0; bottom: 0;
}
section.contact_form fieldset > .projectName > span.lineColor,
section.contact_form fieldset > .askInfo > span.lineColor{
width: 100%;
}
section.contact_form fieldset > div > p{
font-size: 14px;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
}
section.contact_form fieldset > div > input[type=text]{
width: 100%; height: 55px;
background: none;
outline: 0 none;
color: #fff;
border-bottom: 3px solid #999;
box-sizing: border-box;
}
section.contact_form fieldset > div > input[type=text]::placeholder{
font-size: 14px;
color: #999;
}
.projectForm > p > strong{
font-size: 10px;
color: #f02b2b;
margin-left: 5px;
}
.clientsInfo > div{
width: 100%; height: 55px;
position: relative;
}
.clientsInfo > div > input{
width: 100%; height: 55px;
background: none;
outline: 0 none;
color: #fff;
border-bottom: 3px solid #999;
box-sizing: border-box;
}
.clientsInfo > div > input::placeholder{
font-size: 14px;
color: #999;
}
.clientsInfo > div > span{
width: 0; height: 3px;
overflow: hidden;
display: block;
background: #fff;
transition: all 0.3s;
position: absolute;
left: 0; bottom: 0;
}
.clientsInfo > div > span.lineColor{
width: 100%;
}
input[type=radio]{
display: block;
}
.checkAll{
overflow: hidden;
}
.checkAll > div{
float: left;
}
.checkAll > div > input{
float: left;
margin: 3px 3px 3px 4px;
}
.checkAll > div > label{
float: left;
margin-right: 20px;
font-size: 14px;
color: #999;
}
section.contact_form fieldset > div.policy{
height: 115px;
overflow-y: scroll;
}
section.contact_form fieldset > div.policy > p{
font-size: 10px;
color: #999;
font-weight: normal;
}
.policyAgree{
}
.policyAgree > div{
overflow: hidden;
}
.policyAgree > div > input{
float: left;
margin: 2px 3px 3px 4px;
}
.policyAgree > div > label{
float: left;
color: #999;
font-size: 10px;
}
.policyAgree > div > label > span{
border-bottom: 1px solid #999;
}
.submit{
height: 35px;
display: inline-block;
position: relative;
}
input[type=button]{
height: 35px; line-height: 35px;
font-size: 16px;
font-weight: bold;
color: #fff;
background: none;
cursor: pointer;
box-sizing: border-box;
border-bottom: 3px solid #999;
outline: none 0;
font-family: 'Apple SD Gothic Neo', 'Spoqa Han Sans', 'Spoqa Han Sans KR', 'Sans-serif';
}
.submit > span{
width: 0; height: 3px;
overflow: hidden;
display: block;
content: '';
background: #fff;
transition: all 0.3s;
position: absolute;
left: 0; bottom: 0;
}
@media screen and (min-width: 1367px){
.submit:hover > span{
width: 100%;
}
}