@charset "utf-8";
/* CSS Document */

.bg{
  position: absolute;
  top: 30px;
  right:66%;
  bottom:30px;
  left: 30px;
  background:url(../images/contact/bg2.jpg) center;
  -webkit-background-size: cover;
  background-size: cover;
}

.content{
  position: absolute;
  top: 30px;
  left: 66%;
  bottom: 30px;
  right: 30px;
  margin-left: -380px;
}

.consultInfo{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}
.title{
  position: relative;
  margin-bottom: 20px;
}
.title h2{
  position: absolute;
  top: 0;
  left: 40px;
}

.showPage{
  width: 740px;
  margin: 0 10px;
}


/*form*/
.cont {
  overflow: hidden;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom:#CCC dotted 1px;
}
.formTitle {
  color: #000;
  margin-bottom: 10px;
}
.w1 {
  width: 48%;
  float: left;
  font-size: 0.875em;
  padding-right: 10px;
  margin-right: 2%;
  box-sizing: border-box;
  margin-bottom:5px;
}
.w2 { float: left; }
.w3 { overflow: hidden; }
.w3 > div {
  float: left;
  margin-right: 10px;
}
.w4 {
  font-size: 0.875em;
  margin-bottom:5px;
}

input, textarea, button, select {
  -webkit-appearance: none; /*Safari/Chrome*/
  -moz-appearance: none; /*Firefox*/
  -ms-appearance: none; /*IE*/
  -o-appearance: none; /*Opera*/
  appearance: none;
  -webkit-border-radius: 0;
  font-size: 1em;
  font-family:"STHeiti Light ", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
}
input[type="radio"] {
  -webkit-appearance: radio; /*Safari/Chrome*/
  -webkit-border-radius: 10px;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
/*input:focus:input-placeholder { color:transparent; }*/

.input1, .input2 {
  border: #CCC solid 1px;
  box-sizing: border-box;
}
.input1 {
  width: 100%;
}

select, .input3 { 
  border: #ccc solid 1px;
  box-sizing: border-box;
  min-width: 70px;
}
select {
  background: url(../images/selectArrow.png) no-repeat right center;
}
.input3 {
  width: 96%;
  height: 60px;
  box-sizing: border-box;
}
.city{display:none;}

.refresh{
  font-size: 0.875em;
}
.refresh a{color: #70A8C3;}
.btn{
  float:right;
  font-size:0.875em;
  margin-top:-30px;
}
.btn a{
  margin-left:5px;
  background:#999;
  padding:5px;
  color:#FFF;
}
@media screen and (max-width:1440px){
  .content{
    margin-left: -340px;
  } 
  .showPage{
    width: 660px;
  }
}
@media screen and (max-width:1100px),screen and (max-height:660px){
  .bg{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom: auto;
    padding-bottom:300px;
  }

  .title{
    position: absolute;
    top: 300px;
    left: 50%;
    background: #FFF;
    width: 180px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .title h2{
    position: static;
  }

  .content{
    position: static;
    margin: 0;
  }
  
  .consultInfo{
    position: static;
    -webkit-transform: none;
    transform: none;
    width: auto;
    margin: 100px 30px;
  }
  .showPage{
    width: auto;
  }
  .input3{
    height: 120px;
  }

  .refresh{
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom:#CCC dotted 1px;
  }
  .btn{
    float: none;
    margin: 0;
  }
  .btn a{
    margin-left: 0;
    margin-right: 5px;
  }
}

@media screen and (max-width:640px){
  .consultInfo{
    margin: 60px 10px;
  }
  .w1{
    width: 100%;
    margin-right: 0;
    padding-right: 0;
  }
  .w2, .refresh > .w3 div:nth-child(1){
    float: none;
    margin-right: 0;
  }
  .input3, .refresh .input2{
    width: 100%;
  }
}