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

/*感謝資訊*/
  .thankInfo{
    width: 100%;
    color: #454545;
    font-size: 15px;
    text-align: left;
    border-top: 1px solid #e5e5e5;
    position: relative;
    padding: 26px 0;
    margin: 20px 0;
    z-index: 1;
  }

/*formBox*/
  .formBox{
    width: 100%;
    margin: 0 -10px;
  }
  .formBox .left{
    margin-bottom: 5px;
  }
  .formBox label{
    display: inline-block;
    margin-right: 7px; 
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #000;
  }

  /*星號的顏色*/
  .formBox label em{
    color: #ff4d4d;
    font-style: normal;
    font-weight: normal;
    margin-left: 3px;
  }
  .formBox .right{
      position: relative;
  }
  .formBox .right::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0%;
    height: 1px;
    background: #8b2538;
    transition: all .5s;
  }
  .formBox .current .right::after {
    width: 100%;
  }

  .formBox input[type="text"],
  .formBox textarea{
    outline: none;
    color: #272727;
    padding: 5px 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    letter-spacing: 1px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 0;
    font-size: 14px;
    font-family: Arial, Helvetica, 'Noto Sans TC', "微軟正黑體";
    display: block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .formBox input[type="text"]:focus,
  .formBox textarea:focus{
    outline: #b13b09;
    border-color: #27319d;
  }
  .formBox select:focus{
    outline: #b13b09;
    border-color: #27319d;
  }

  .formBox select {
    padding: 5px 10px;
    width: 200px;
    height: 40px;
    color: #272727;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 0px;
    font-size: 14px;
    font-family: Arial, Helvetica, 'Noto Sans TC', "微軟正黑體";
    letter-spacing: 0.5px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .formBox textarea{
    height: 130px;
  }
  .formBox input[type="radio"]{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 0;
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 5px -2px 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .formBox input[type="radio"]:checked{
    background: #27319d;
    border-color: #27319d;
  }

  .formBox input[type="checkbox"]{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 15px;
    height: 15px;
    margin: 0 5px -2px 0;
    border: 1px solid #999;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .formBox input[type="checkbox"]:checked{
    background: #27319d;
    border-color: #27319d;
  }

  .formBox input:-moz-placeholder,
  .formBox textarea:-moz-placeholder{ 
    color: #ccc;
  }
  .formBox input::-moz-placeholder,
  .formBox textarea::-moz-placeholder{ 
    color: #ccc;
  }
  .formBox input:-ms-input-placeholder,
  .formBox textarea:-ms-input-placeholder{ 
    color: #ccc;
  }
  .formBox input::-webkit-input-placeholder,
  .formBox textarea::-webkit-input-placeholder{ 
    color: #ccc;
  }

/*驗證碼*/
  .checkArea {
    clear: both;
    padding-top: 25px;
    text-align: left;
  }

/*送出按鈕*/
  .checkArea .btn{
    display: inline-block;
    vertical-align: top;
  }
  .checkArea .btn a{
    width: 180px;
    height: 45px;
    line-height: 45px;
    letter-spacing: 1.5px;
    border-radius: 0;
  }
  .checkArea .btn a:hover{
    background: #27319c;
  }
  .checkArea .btn a::before,
  .checkArea .btn a:after{
    display: none;
  }

.sliderBox {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
/*向右滑動解鎖*/
  .note{
    font-size: 18px;
  }
.error {
  -webkit-box-shadow: 0 0 10px #ff3333;
          box-shadow: 0 0 10px #ff3333;
}

/*****************/
/** QapTcha CSS **/
/*****************/
  .clr{
    clear: both;
  }
  .bgSlider{
    /*滑軌*/
    float: left;
    width: 200px;
    height: 34px;
    border-radius: 6px;
    background: #45484d;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDU0ODRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #45484d), color-stop(100%, #000000));
    background: -webkit-linear-gradient(-45deg, #45484d 0%, #000000 100%);
    background: -o-linear-gradient(-45deg, #45484d 0%, #000000 100%);
    background: -webkit-linear-gradient(315deg, #45484d 0%, #000000 100%);
    background: -o-linear-gradient(315deg, #45484d 0%, #000000 100%);
    background: linear-gradient(135deg, #45484d 0%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=1);
  }
  .Slider{
    /*按鈕*/
    position: relative;
    top: 2px;
    left: 0;
    z-index: 99;
    width: 45px;
    height: 30px;
    background: transparent url("../images/but-arrow.gif") no-repeat;
    cursor: pointer;
  }
  .dropSuccess{
    /*成功*/
    color: #4e8b37;
  }
  .dropError{
    /*錯誤*/
    display: none;
  }


/**********響應式**********/
@media (max-width: 1180px){
  .thankInfo,
  .checkArea{
    text-align: center;
  }
  .formBox{
    margin: 0;
  }
}
@media (max-width: 768px){
  .checkArea{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
  .captchaArea{
    width: 50%;
    min-width: 240px;
  }
  .checkArea .btn{
    width: 50%;
  }
  .checkArea .btn a{
    width: 100%;
  }
}
@media (max-width: 540px){
  .checkArea{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .captchaArea{
    width: 100%;
    margin: 0 0 15px;
  }
  .captchaArea .note{}
  .checkArea .btn{
    width: 100%;
  }
}
@media (max-width: 480px){
  .captchaArea .note{
    width: 100%;
  }
  .captchaArea{
    min-width: unset;
  }
}