/* for Pardot Form (Default Style) 
@import url('https://assets.aten.com/webpage/shared/CMS_Libraries/CSS/Pardot/Form/Pardot-Form_Default-Style.css');
*/


/* for Pardot Form 【 A-1 】【 RWD 】【 for Original Ver Style for Landing 】 
@import url('https://assets.aten.com/webpage/shared/CMS_Libraries/CSS/Pardot/Form/Pardot-Form_Default-RWD-Style.css');
*/


/* for Pardot Form 【 A-2 】【 RWD 】【 for Original Ver Style for Landing >> Industry Field 】 
@import url('https://assets.aten.com/webpage/shared/CMS_Libraries/CSS/Pardot/Form/Pardot-Form_Default-Landing-RWD-Style.css');
*/


/* for Pardot Form 【 B 】 【Lite Ver Style for Product Page (含 RWD) 】
@import url('https://assets.aten.com/webpage/shared/CMS_Libraries/CSS/Pardot/Form/Pardot-Form_Product-Page-Style.css');
*/


/* for Pardot Form 【 C】【 RWD 】【 for Lightbox Form for Landing 】 
@import url('https://assets.aten.com/webpage/shared/CMS_Libraries/CSS/Pardot/Form/Pardot-Form_Lightbox-RWD-Style.css');
*/


/* for Pardot Form 【 D 】 【Lite Ver Style for Align Left for CCPA (含 RWD) 】
@import url('https://assets.aten.com/webpage/shared/CMS_Libraries/CSS/Pardot/Form/Pardot-Form_Text-Align-RWD-Style.css');
*/





/*************************************************************************************************************************
                                【 Pardot Form 】 (Default Style for Original Form)
**************************************************************************************************************************/



/* 一開始隱藏 >> 點選 email 下的輸入欄位 >> 下面兩個欄位才會出現 */
#pardot-form.form .form-field.Agree_Policy, 
#pardot-form.form .g-recaptcha {
  display: none;
}







/* 預設欄位提示字 */
::placeholder {
  color: #d7d7d7;
  color: #cacaca;
  color: #868788;
  font-weight: 400;
}
  



/* 隱藏 */
#pardot-form.form .no_display {display: none;}



iframe {
  border: 0 !important;
}




/* Error Message */
#pardot-form.form .form-field.error input:not([type="radio"]):not([type="checkbox"]), 
#pardot-form.form .form-field.error select, 
.form-field.error select, 
.form-field.error input {
  border: 1px solid #8b0000; /* Red border */
  border: 1px solid #ff0000; /* Red border */
  /* background-color: #ffeaea;  Light red background */
}

/* Error Message (每個欄位下 This field is required) */
#pardot-form.form .error.no-label, 
.error.no-label {
    color: #8b0000; /* Red text */
    color: #ff0000; /* Red text */
    font-weight: bold;
    display: none; /* 會跑版 > 隱藏 > 用紅框取代 */
}


/* Error Message (最上方 Please correct the errors below) */
#pardot-form.form p.error label, 
#pardot-form.form p.errors, 
p.errors {
  color: #8b0000 !important; /* Red text */
  color: #ff0000 !important;
  background: transparent !important;
  display: block;
  width: 100%;

  width: calc(100% - 15px);
  padding: 0px 35px 0px 35px;

  width: calc(100% - 0px);
  padding: 0px 30px 0px;

  font-weight: bold;
  font-weight: 500;
}


/* Error Message (Reaptcha) */
#pardot-form.form .form-field.pd-captcha.error + div.g-recaptcha iframe {
  border: 1px solid red;
}





/* Out-Container for Form (EN 英文) */
#pardot-form.form .page_titles.Long-Title, 
#pardot-form.form .form-field textarea, 
#pardot-form.form p.submit input, 
#pardot-form.form .submit, 
#pardot-form.form {
    font-family: 'Roboto','Segoe UI','Segoe UI Light','Myriad Set Pro',NotoSansHant,'Microsoft JhengHei',微軟正黑體,'Heiti TC','Microsoft YaHei',微軟雅黑體,simhei,PMingLiU,新細明體,Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,'ＭＳ Ｐゴシック','Malgun Gothic',Dotum,Gulim,'Trebuchet MS','Lucida Grande',Verdana,Arial,sans-serif;
}



/* Out-Container for Form (Asian 亞洲) */
body.locale_jp-ja #pardot-form.form .page_titles.Long-Title, 
body.locale_kr-ko #pardot-form.form .page_titles.Long-Title, 
body.locale_cn-zh #pardot-form.form .page_titles.Long-Title, 
body.locale_tw-zh #pardot-form.form .page_titles.Long-Title, 
body.locale_tw-zh #pardot-form.form .form-field textarea, 
body.locale_jp-ja #pardot-form.form .form-field textarea, 
body.locale_kr-ko #pardot-form.form .form-field textarea, 
body.locale_cn-zh #pardot-form.form .form-field textarea, 
body.locale_tw-zh #pardot-form.form p.submit input, 
body.locale_jp-ja #pardot-form.form p.submit input, 
body.locale_kr-ko #pardot-form.form p.submit input, 
body.locale_cn-zh #pardot-form.form p.submit input, 
body.locale_tw-zh #pardot-form.form .submit, 
body.locale_jp-ja #pardot-form.form .submit, 
body.locale_kr-ko #pardot-form.form .submit, 
body.locale_cn-zh #pardot-form.form .submit, 
body.locale_tw-zh #pardot-form.form, 
body.locale_jp-ja #pardot-form.form, 
body.locale_kr-ko #pardot-form.form,
body.locale_cn-zh #pardot-form.form {
  font-family: "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Roboto", "Segoe UI", "Segoe UI Light", "Myriad Set Pro", Microsoft JhengHei, "微軟正黑體", Heiti TC, Microsoft YaHei, "微軟雅黑體", simhei, PMingLiU, 新細明體, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, ＭＳ Ｐゴシック, Malgun Gothic, Dotum, Gulim, Trebuchet MS, Lucida Grande, Verdana, Arial, sans-serif;
}


/* Out-Container for Form (EN) */
#pardot-form.form {
  padding: 0px !important;
}


/* Out-Container & .form-field + submit */
#pardot-form.form .form-field, 
#pardot-form.form .submit, 
#pardot-form.form {
  width: 100%;
  margin: 0px auto;
}


/* Out-Container & .form-field + submit */
#pardot-form.form .form-field, 
#pardot-form.form .submit {
}


/* Required Marl >> 取消用 background (改用 ::after *)  */
#pardot-form.form p.required label, 
#pardot-form.form span.required label {
  background: url(/images/required.gif) no-repeat top left;
  background: none; /* 取消用 background */
}


/* Required Marl >> 改用 ::after * (取消用 background)  */
/*#pardot-form.form span.required label::after, */
#pardot-form.form p.required label:not(#pardot-form.form .form-field.Agree_Policy .description + label):not(#pardot-form.form .form-field.Product_Type.required span.value label):after, 
#pardot-form.form .form-field.Agree_Policy.required span.value label::after {
  /* content: '';
  background: url(/images/required.gif) no-repeat top left;*/
  content: '*';
  color: rgb(242, 108, 0);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  display: inline-block;
  position: relative;
  height: 16px;
  width: 16px;
  padding-left: 3px;
}



/* Required Mark >> I agreen >> 取消多一個無用 lable  */
#pardot-form.form .form-field.Agree_Policy .description + label, 
#pardot-form.form .form-field.Agree_Policy label {
  display: none;
}


/* Out-Container > .form-field > label + submit + input + select */
#pardot-form.form .form-field .field-label, 
#pardot-form.form .form-field input:not([type="radio"]):not([type="checkbox"]), 
#pardot-form.form .form-field select, 
#pardot-form.form .form-field textarea, 
#pardot-form.form .submit input {
  width: 100%;
}

/* Out-Container > .form-field > .field-label (欄位名) */
#pardot-form.form .form-field .field-label {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    text-align: left;
    display: block;
    padding: 3px 0;
    margin-top: 10px;
}


/* All Input + Select + Button FIeld */
#pardot-form.form .form-field input:not([type="radio"]):not([type="checkbox"]), 
#pardot-form.form .form-field select, 
#pardot-form.form .form-field textarea, 
#pardot-form.form .submit input {
  font-size: 14px;
  font-size: 15px;
  padding: 6px;
  padding: 7px;
  padding: 9px 8px;

  outline: none;
  border: 1px solid #ccc;
  border-radius: 2px;

  box-sizing: border-box; /* 限制欄位不要因為 padding 或者其它因素超出固定寬度 */
}





/* All Input + Select + Button FIeld (Hover) */
#pardot-form.form .form-field input:not([type="radio"]):not([type="checkbox"]):hover, 
#pardot-form.form .form-field select:hover, 
#pardot-form.form .form-field textarea:hover, 
#pardot-form.form .submit input:hover {
  border-color: #22a3c9 !important;
  box-shadow: 2px 4px 5px 1px rgba(48, 107, 125, 0.1);
  transition: all 0.5s linear 0s;
}


#pardot-form.form .form-field select {
    background-color: #FFFFFF;
}

/* Text Area 文字輸入框 */
#pardot-form.form .form-field textarea {
  min-height: 100px;
  height: 100px;
  min-height: 70px;
  height: 70px;
}


/* 外框 >> Input + 欄位說明 */
#pardot-form.form .value span {
  display: flex !important;
  align-items: start;
  margin: 2% auto 0px;
  float: left;
}

/* Input 定義 >> Input + 欄位說明 */
#pardot-form.form .value span input {
  display: inline-block;
  margin-right: 5px;
  top: 0px;
  top: -4px;
  position: relative;
}

/* 說明文字 定義 >> Input + 欄位說明 */
#pardot-form.form .value span label.inline {
  display: inline-block;
  position: relative;
  top: -7px;
  float: none;
  width: 93%;
  letter-spacing: -0.01em;
  line-height: 1.2em;
}



/* Line fo Agree_Policy */
#pardot-form.form .Agree_Policy .description {
  border-top: dotted 2px #bdbdbd;
  border-top: dotted 2px #d1d1d1;
}


/* Marketing_Approval >> (Yes / No) radio button */
#pardot-form.form .form-field.Direct_Marketing_Approval .field-label {
  display: inline-block;
  width: auto;
}

/* Agree_Policy */
#pardot-form.form .form-field.Agree_Policy {
padding-top: 15px;
padding-bottom: 15px;
padding-bottom: 7px;
}


/* Marketing_Approval + Agree_Policy >> 內文 */
#pardot-form.form .form-field.Agree_Policy span.description, 
#pardot-form.form .form-field.Direct_Marketing_Approval span.description {
    font-size: 12px;
    font-size: 10px;
    color: #666;
    display: block;
    margin: 5px 0 10px;
}


/* Showroom_Policy >> 內文 */
.privacy-block.Showroom-privacy {
  margin-bottom: 20px;
}


/* Marketing_Approval + Agree_Policy (a:各種狀態) >> 內文 */
#pardot-form.form .form-field.Agree_Policy span.description a:link, 
#pardot-form.form .form-field.Agree_Policy span.description a:active, 
#pardot-form.form .form-field.Agree_Policy span.description a:visited, 
#pardot-form.form .form-field.Agree_Policy span.description a, 
#pardot-form.form .form-field.Direct_Marketing_Approval span.description a:link, 
#pardot-form.form .form-field.Direct_Marketing_Approval span.description a:active, 
#pardot-form.form .form-field.Direct_Marketing_Approval span.description a:visited, 
#pardot-form.form .form-field.Direct_Marketing_Approval span.description a {
  color: rgb(4, 132, 174);
  font-weight: 500;
  text-decoration: underline !important;
}

/* Marketing_Approval + Agree_Policy (a:hover) >> 內文 */
#pardot-form.form .form-field.Agree_Policy span.description a:hover, 
#pardot-form.form .form-field.Direct_Marketing_Approval span.description a:hover {
  color: rgb(0, 187, 199);
  text-decoration: none !important;
}


/* Marketing_Approval + Agree_Policy >> I Agree */
#pardot-form.form span.value {
  margin-left: 0px;
}



/* Marketing_Approval + Agree_Policy >> checkbox */
#pardot-form.form .form-field.Agree_Policy .value input {
    margin-right: 8px;
}


/* Marketing_Approval + Agree_Policy >> I Agree (Error Message) */
#pardot-form.form .form-field.Agree_Policy .value .inline, 
#pardot-form.form p.error label.inline {
  display: inline;
  padding-left: 0;
}


/* 有 Checkbox 使用 >> 不包含 Agree_Policy */
#pardot-form.form .form-field.Product_Type, 
#pardot-form.form .form-field.pd-checkbox:not(#pardot-form.form .form-field.Agree_Policy.pd-checkbox) {
  padding-top: 15px;
  padding-bottom: 10px;
}


/* 選產品四大類 (有 Checkbox 使用) */
#pardot-form.form .form-field.Product_Type label {
  margin-bottom: 5px;
  margin-top: 10px;
}

/* Checkbox Input 與 Label 距離 (ex: 選產品四大類) */
#pardot-form.form .form-field label.inline {
  margin-left: 2px;
  margin-bottom: 5px;
  margin-top: 10px;
  margin-top: 5px;
}


/* 有 Checkbox 的 Label::after >> 取消 * 使用 (ex: 選產品四大類) */
#pardot-form.form .form-field.Product_Type.required span.value label::after, 
#pardot-form.form .form-field.required span.value label.inline::after {
  display: none !important;
}

/* .submit (Button 上層) */
#pardot-form.form .submit {
  text-align: center;
}


/* .submit 綠色 > input (Submit Button) */
#pardot-form.form .submit input {
   cursor: pointer;

    color: #fff;
    font-size: 20px;
    line-height: 1.4em;
    font-weight: 600;
    text-align: center;

    width: auto;
    padding: 10px 26px;
    padding: 12px 50px;
    padding: 1.7% 5%;

    margin-top: 20px;
    margin-top: 3%;

    border-radius: 4px;
    border: 1px solid rgb(142, 194, 31);
    background-color: rgb(142, 194, 31);
    box-shadow: 0px 15px 20px -10px rgba(0, 0, 0, 0.3);

    transition: all 0.3s ease-in-out 0s;
}



/* .submit 綠色 (Hover) > input (Submit Button) */
#pardot-form.form .submit input:hover {
  background-color: rgba(159, 226, 40, 1.0) !important;
  border: 1px solid rgba(159, 226, 40, 1.0) !important;

  transition: all 0.3s ease-in-out 0s;
}





/* reCaptcha */
#pardot-form.form .form-field.pd-captcha {
  display: none;
}

/* reCaptcha */
#pardot-form.form .g-recaptcha {
  /*display: block;*/
  position: relative;
  width: 100%;
  text-align: center;
  border-bottom: dotted 2px transparent;
  border-bottom: solid 1px #e9e9ea;
  margin: 0 auto;
  margin: 15px auto 0;
  padding-bottom: 30px;
}

/* reCaptcha */
#pardot-form.form .g-recaptcha > div {
  margin: auto;
}


/* reCaptcha */
#pardot-form.form .g-recaptcha {
  border-bottom: dotted 2px #bdbdbd;
  border-bottom: dotted 2px #d1d1d1;
  border-bottom: solid 1px #e9e9ea;
  /*width: calc(100% - 55px);
  left: 15px;*/
}





/* Thank You Wording */
#pardot-form.form .page_titles.Long-Title {
  color: #000;
  font-size: 2.6em !important;
  font-size: 3.3em !important;
  line-height: 1.3em !important;
  letter-spacing: -0.001em !important;
  font-weight: 400;
  padding-top: 0;
  padding-bottom: 1%;
}


/* Thank You Wording */
#pardot-form.form p.color_bluedark {
  font-weight: 400 !important;
  color: #0082a7;
  margin-top: 5px !important;
}









/* 表單分區標題區塊 */
.Section-Title-Block {
  display: block !important;
  width: 100% !important;
}

/* 表單分區標題 >> 表單分區標題區塊 >> 通用 */
.section-title {
  font-size: 22px;
  color: #5ea600;
  display: block;
  margin-bottom: 10px;
  font-weight: 300;
}


/* 表單大標題  */
.section-title.title_big {
  /* color: #004276;*/
  font-weight: 500;

  border: solid #eaeaea;
  border-width: 1px 0px 1px 0px; /*上右下左*/

  padding: 3% 0;
  margin-top: 40px;
  margin-top: 25px;
}

/* 表單分區標題 【2】 >> 表單分區標題區塊 */
#Section-Title_2 {
  margin: 50px 0 0px 0;
  padding-top: 40px;
}


/* 表單分區標題 【2】Line >> 表單分區標題區塊 */
#Section-Title_2::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  border-top: dotted 2px #ddd;
  padding-top: 40px;
}