.contact-box{
  width: 1000px;
  max-width: 100%;
  display: block;
  margin:  0 auto;
  padding: 30px 40px;
  box-sizing: border-box;
  border: 1px solid #FFF;
  margin-bottom: 40px;
  color: #FFF;
}

#contact .main-title{
  text-shadow: rgba(255, 255, 255, 0.7) 0px 0px 10px,
               rgba(255, 255, 255, 0.7) 0px 0px 20px,
               rgba(255, 255, 255, 0.7) 0px 0px 30px,
               rgba(255, 255, 255, 0.7) 0px 0px 40px;
}


.contact-info-form{
  width: 100%;
  height: 100%;
  display: block;
  font-size: 0;
  padding: 40px 0;
}
.contact-info-form li{
  display: inline-block;
  vertical-align: top;
  width: 50%;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 35px;
}
.contact-info-form li.special{
  width: calc( 100% / 3 );
}
.contact-info-form li input,
.request-from-box li.button input{
  width: 100%;
  height: 40px;
  display: block;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #FFF;
  outline: none;
  font-size: 26px;
  color: #fff;
}
.contact-lable{
  font-size: 26px;
  letter-spacing: 4px;
  position: absolute;
  top: 0;
  left:15px;
  pointer-events: none;
}
.contact-lable span{
  color: #ff0000;
}
.contact-info-form li.button,
.request-from-box li.button {
  width: 300px;
  display: block;
  margin: 0 auto;
  padding-top: 40px;

}
.contact-info-form li.button input,
.request-from-box li.button input{
  width: 100%;
  height: 50px;
  display: block;
  border: 1px solid #FFF;
  box-sizing: border-box;
  font-family:  'Saira Extra Condensed';
  font-size: 26px;
  letter-spacing: 6px;
}
.request-from-box li.button input{
  width: 200px;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.request-from-skype,
.request-from-mail{
    font-size: 20px;
    color: #fff;
    display: inline-block;
    vertical-align: bottom;
    margin-left: 15px;
}
.request-from-skype:hover, .request-from-mail:hover{
    color: #fff;
}
#name:focus + label,
#mail:focus + label,
#phone:focus + label,
#fax:focus + label,
#country:focus + label,
#add:focus + label,
#company:focus + label,
#project:focus + label{
  display: none;
}

/*表單送出*/
.contact-thanks-box{
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
}
.contact-thanks-box.active{
  -webkit-align-items: center;
          align-items: center;
    -webkit-justify-content: center;
          justify-content: center;
    display: -webkit-flex;
    display:         flex;
}
.contact-thanks{
  background-color: #000;
  position: relative;
  padding: 80px;
  border-radius: 20px;
  z-index: 6;
}
.contact-thanks-p{
  font-size: 26px;
  line-height: 1.6;
  letter-spacing: 2px;
  font-weight: bold;
  color: #FFF;
  display: block;
}
.contact-out{
  width: 20px;
  height: 20px;
  max-width: 100%;
  display: block;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #FFF;
  top: 4%;
  right: 4%;
  cursor: pointer;
}
.contact-out span{
  width: 15px;
  height: 1px;
  background-color: #FFF;
  display: block;
  margin: 0 auto;
  position: relative;
}
.contact-out span:nth-child(1){
  top: 9px;
    left: 0.5px;
    transform: rotate(45deg);
}
.contact-out span:nth-child(2){
    top: 8px;
    left: 0.5px;
    transform: rotate(-45deg);
}
.contact-thanks-mask{
  width: 100%;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.3);
}

.contact-info-form li.button input,
.request-from-box li.button input{
  color: #FFF;
}

.companybox-list-title{
  font-size: 24px;
  letter-spacing: 1px;
}

.companybox-list-p{
  font-size: 20px;
  letter-spacing: 1px;
}
.companybox-list-p a{
  transition: all .5s ease;
}

.companybox-list-p a:hover{
      text-shadow: rgba(255, 255,255, 1) 0px 0px 5px, rgba(255, 255, 255, 1) 0px 0px 10px, rgba(255, 255, 255, 1) 0px 0px 15px, rgba(255, 255, 255, 1) 0px 0px 20px, rgba(255, 255, 255, 1) 0px 0px 25px;
}
.contact-info-form li.special-message{
    width: 100%;
    color: #fff;
    font-size: 24px;
    margin: 0;
    text-align: center;
}
.special-message a:hover{
      text-shadow: rgba(255, 255,255, 1) 0px 0px 5px, rgba(255, 255, 255, 1) 0px 0px 10px, rgba(255, 255, 255, 1) 0px 0px 15px, rgba(255, 255, 255, 1) 0px 0px 20px, rgba(255, 255, 255, 1) 0px 0px 25px;
}