/* ========================================================================================================================
                                              Quick Link Button for Contact Us Form >> in Section
======================================================================================================================== */

/* iFram 高度 (欄位增加須更改) */
div.Form_Box iframe {
  height: 490px !important;
}


/* 整個 Contact Us 外圍 (margin-top & padding-top 互減高度 >> 抵銷第二層選單遮蓋)*/
#form_Contact-Us {
  padding-top: 80px !important; 
  margin-top: -80px !important;
  margin-left: -15px !important; 
  margin-right: -15px !important;
}


#Quick-Link-Section {
  background-color: #1d4872;
  /*background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_50Per.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_GPhotos_50Per.png'), linear-gradient(to bottom, rgba(29, 72, 114, 1) 0%,rgb(29, 72, 114, 1) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_GPhotos_20Per.png'), linear-gradient(to bottom, rgba(29, 72, 114, 1) 0%,rgb(29, 72, 114, 1) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_30Per-2.png'), linear-gradient(to bottom, rgba(29, 72, 114, 1) 0%,rgb(29, 72, 114, 1) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_20Per-2.png'), linear-gradient(to bottom, rgba(29, 72, 114, 1) 0%,rgb(29, 72, 114, 1) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_20Per-2.png'), linear-gradient(to bottom, rgb(3, 48, 96) 0%,rgb(18, 116, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_20Per-3.png'), linear-gradient(45deg, rgb(3, 48, 96) 0%,rgb(18, 116, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_20Per-4.png'), linear-gradient(45deg, rgb(3, 48, 96) 0%,rgb(18, 116, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_20Per-5.png'), linear-gradient(55deg, rgb(0, 43, 89) 0%,rgb(16, 108, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_TPhotos_20Per-3.png'), linear-gradient(55deg, rgb(0, 43, 89) 0%,rgb(16, 108, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_Photos-Blue_Short_T-Per70-3.png'), linear-gradient(55deg, rgb(0, 43, 89) 0%,rgb(16, 108, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_Photos-Blue_Short_T-Per80-1.png'), linear-gradient(55deg, rgb(0, 43, 89) 0%,rgb(16, 108, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_Photos-Blue_Short_T-Per80-1.png'), linear-gradient(55deg, rgb(0, 43, 89) 0%,rgb(16, 95, 164) 100%);
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_Photos-Blue_Short_T-Per80-1.png'), linear-gradient(55deg, rgb(0, 43, 89) 0%,rgb(7, 119, 153) 100%);*/
  background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_Photos-Blue_Short_T-Per90-1.png'), linear-gradient(55deg, rgb(0, 43, 89) 0%,rgb(7, 119, 153) 100%);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-position: 50% 47%;
  overflow: hidden;
  padding: 3%;
  padding: 3% 4.5%;
  border-radius: 5px;
}

/* wording left > Green Line-1 
#wording-csection {
  border-left: 3px solid #85c12f;
  padding-left: 3%;
  margin-left: 2%;
}*/

#wording-csection {
  padding-left: 3%;
}


/* wording left > Green Line-1 (綠條在字的旁邊) */
#wording-csection.before-style1::before {
  content: "";
  background: rgba(142, 194, 31, 1.0);
  display: block;
  position: absolute;
  height: 9.5vh;
  width: 6px;
  top: 6px;
  left: 18px;
}

/* wording left > Green Line-2 (綠條在外框最左邊) */
#wording-csection.before-style2::before {
  content: "";
  background: rgba(142, 194, 31, 1.0);
  display: block;
  position: absolute;
  height: 13.5vh;
  width: 10px;
  top: -10px;
  left: -47px;
  top: -10%;
  left: -7.8%;
  width: 17px;
  top: 0px;
  left: -47px;
  left: -7.8%;
  top: -1%;
}


/* wording left > Green Line-3 (綠箭頭在外框最左邊) */
#wording-csection.before-style3::before {
  content: "";
  background: rgba(142, 194, 31, 1.0);
  display: block;
  position: absolute;
  height: 13.5vh;
  width: 6vw;
  top: -11px;
  left: -111px;
  top: -10.5%;
  left: -18.5%;
  height: 128px;
  width: 128px;
  top: -9px;
  left: -112px;
  top: -9.5%;
  left: -18.5%;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 60% 0, 100% 50%, 60% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 50% 0, 100% 50%, 50% 100%, 0% 100%);
}

.Two-Button #wording-csection.before-style3::before {
  left: -26%;
  top: -4%;
}


/* wording left > Green Line-4 (綠箭頭在外框最左邊) */
#wording-csection.before-style4::before {
  content: "";
  background: rgba(142, 194, 31, 1.0);
  display: block;
  position: absolute;
  height: 13.5vh;
  width: 6vw;
  top: -11px;
  left: -111px;
  top: -10.5%;
  left: -18.5%;
  height: 128px;
  width: 128px;
  top: -9px;
  left: -112px;
  top: -9.5%;
  left: -18.5%;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 60% 0, 100% 50%, 60% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 50% 0, 100% 50%, 50% 100%, 0% 100%);
}


#wording-csection.before-style4::after {
  content: "";
  background-color: #76af24;
  background-color: #69a218;
  display: block;
  position: absolute;
  z-index: 0;
  height: 200px;
  width: 786px;
  top: -35px;
  left: -50px;
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

#wording-csection.before-style4 #wording-csection h3, 
#wording-csection.before-style4 #wording-csection h4 { 
  position: relative;
  text-shadow: 0px 0px 17px rgba(1, 23, 41, 0) !important;
  z-index: 1;
}



#wording-csection h3, #wording-csection h4 {
  color: #fff !important;
  text-shadow: 0px 0px 17px rgba(1, 23, 41, 0.5);
}

#wording-csection h3 {
  font-size: 2.4em !important;
  font-weight: 500 !important;
}

#wording-csection h4 {
  font-size: 0.96em !important;
  opacity: .85;
  opacity: .65;
}

.Two-Button #wording-csection h4 {
  font-size: 1em !important;
}

#button-section {
  position: relative;
  /*float: right;*/
}

#button-section.Two-Button, 
.Two-Button #button-section {
  display: flex;
  flex-direction: row;
}

.Two-Button a#quote_button { order: 1; }
.Two-Button a#contact_button { order: 2; }


.button_Contact.btn-primary, 
.button_Contact.btn-primary a {
  color: #fff;
  font-weight: 500;
}


.button_Contact.btn-primary {
  font-size: 1.6em !important;
  font-size: 1.3em !important;
  padding: 5% 13% !important;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 6px !important;
  display: block;
  width: 100%;
  text-shadow: 1px 1px 1px rgba(0,0,0,.2);
  text-shadow: -1px -2px 1px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 1px 6px 10px 0 rgba(0, 0, 0, .3) !important;
  box-shadow: 1px 6px 10px 0 rgba(5, 60, 104,.05) !important;
  box-shadow: 1px 6px 6px 0 rgba(5, 60, 104,.5) !important;
  transition: all 0.2s ease-in-out 0s;
}

.Two-Button .button_Contact.btn-primary {
  padding: 4% 8% !important;
  padding: 3.2% 5% !important;
}

.Two-Button .button_Contact.btn-primary:last-child {
  margin-right: 0% !important;
}

.button_Contact.btn-primary.button_blue {
  background-color: #3a9ccc;
  background-color: #00b4f1;
  background-color: #00c3ff;
}

.button_Contact.btn-primary.button_white {
  background-color: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,.4);
}


.button_Contact.btn-primary.button_green {
  background-color: #85c12f;
}

.button_Contact.btn-primary:hover {
  color: #fff;
  background-color: rgba(0,0,0,.8);
  border: 2px solid transparent;
  text-shadow: 1px 1px 1px rgba(0,0,0,.2);
  transition: all 0.2s ease-in-out 0s;
}




/* 980 以上  */
@Media (min-width: 980px) {

  .Two-Part-QSection {
  display: flex;
  align-items: center;
  }

}




/* 1024 以上  */
@Media (min-width: 1024px) {

  #Quick-Link-Section {
  background-size: 109%;
  background-position: 0% 47%;
  padding: 3% 5.5%;
  padding: 3% 5%;
  }

  #wording-csection {
  padding-left: 5%;
  }

  .Two-Button #wording-csection h3 {
  font-size: 2.7em !important;
  }

  .Two-Button #wording-csection h4 {
  width: 90%;
  }

  .button_Contact.btn-primary {
  width: auto;
  /*float: right;*/
  margin-right: 6%;
  }

  .Two-Button .button_Contact.btn-primary {
  width: 85%;
  }


  /* Button >> Padding (PL 波蘭) */
  body.locale_pl-pl #content .Two-Button .button_Contact.btn-primary,  
  body.locale_la-es #content .Two-Button .button_Contact.btn-primary, 
  body.locale_la-pt #content .Two-Button .button_Contact.btn-primary, 
  body.locale_de-de #content .Two-Button .button_Contact.btn-primary, 
  body.locale_es-es #content .Two-Button .button_Contact.btn-primary, 
  body.locale_fr-fr #content .Two-Button .button_Contact.btn-primary, 
  body.locale_pt-pt #content .Two-Button .button_Contact.btn-primary, 
  body.locale_se-sv #content .Two-Button .button_Contact.btn-primary, 
  body.locale_ru-ru #content .Two-Button .button_Contact.btn-primary, 
  body.locale_nl-nl #content .Two-Button .button_Contact.btn-primary {
  width: auto;
  }

}

/* 1100 以上  */
@Media (min-width: 1100px) {

  .Two-Button #wording-csection.before-style3::before {
  left: -32%;
  top: -4%;
  }

}


/* 1921 以上  */
@Media (min-width: 1921px) {

  .Two-Button .button_Contact.btn-primary {
  position: relative;
  width: 46%;
  width: 44%;
  left: 2%;
  width: 42%;
  left: 6%;
  }

}






/* ========================================================================================================================
                                                       Contact Us Form >> in Section
======================================================================================================================== */

/* 底灰色 */
#ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0, 
#form-gsection, 
#wording-gsection {
    background-color: #f4f4f4;
    background-color: rgba(244,244,244,1);
    background-color: #f2f3f4;
    background-color: #f5f6f6;
    /*height: 43vh;*/
}

/* 左底圖 (EN) */
#wording-gsection { 
    /*background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_Photos-Left-1.jpg'), linear-gradient(to bottom,  rgba(244,244,244,1) 0%,rgba(226,230,233,1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-2.png'), linear-gradient(to bottom,  rgba(244,244,244,1) 0%,rgba(226,230,233,1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-2.png'), linear-gradient(to right,  rgba(244,244,244,1) 0%,rgba(226,230,233,1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-2.png'), linear-gradient(45deg,  rgba(244,244,244,1) 0%,rgba(226,230,233,1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-2.png'), linear-gradient(to bottom,  rgba(226,230,233,1) 0%,rgba(244,244,244,1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-2.png'), linear-gradient(to bottom, rgba(226,230,233,1) 0%,rgba(244,244,244,1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-2.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%);*/
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-3.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-4.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-9.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%);
    background-image: url('//assets.aten.com/product/overview/global_en/Contact-Us_NPhotos_Left-10.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 3%;
}

/* 左底圖 >> for TW */
body.locale_tw-zh #content #wording-gsection { 
    background-image: url('//assets.aten.com/product/overview/tw_zh/Contact-Us_NPhotos_Left_TW-2.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%) !important;
    background-image: url('https://assets.aten.com/product/overview/tw_zh/Contact-Us_NPhotos_Left_TW-2.png'), linear-gradient(to bottom, rgba(226, 233, 238, 1) 0%,rgba(244, 244, 244, 1) 100%) !important;
}

/* Two Part >> Padding */
#wording-gsection, #form-gsection {
    padding: 4%;
}

/* Form Part >> Padding */
#form-gsection {
  padding: 6.3% 4% !important;
  padding: 5.9% 4% !important;
}

/* Two Part >> Height */
#wording-gsection, #form-gsection {
  height: 57.5vh;
  height: 63.5vh;
}

#wording-gsection h3, #wording-gsection h4 {
text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.3) !important;
}

#wording-gsection h3 {
    color: #0082b9;
    font-size: 2.3em !important;
}

#wording-gsection h4 {
  color: #586a77;
  font-size: 0.9em !important;
}

/* 輸入欄位 */
#form-gsection #ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form input, 
#form-gsection #ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form textarea, 
#form-gsection #ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form select, 
#form-gsection #ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form-field, 
#form-gsection #ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form-field.ao-left, 
#ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form input, 
#ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form textarea, 
#ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form select, 
#ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form-field, 
#ao-form-9db902ce-962e-4b57-b051-022ef6fc78e0 .ao-form-field.ao-left {
  font-size: 14px !important;
  padding: 9px 8px !important;
}

/* 隱藏星號 */
#block-b1516587695898 .ao-form-label, 
#row-r1595232464107 .ao-form-label, 
#row-r1657607771466 .ao-form-label, 
#block-b1678686438128 .ao-form-label, 
#ao-form-83b11075-3ea8-403d-9bfd-a65d0345014a .ao-required, 
#block-b1678699182481 .ao-form-label {
  display: none !important;
}



/* Submit Button */
.ao-form button.ao-form-submit {
  padding: 14px 7% !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}


/* 1024 以上  */
@Media (min-width: 1024px) {

  /* Two Part >> Height */
  #wording-gsection, #form-gsection {
  min-height: 570px;
  }

  /* 整個 Contact Us 外圍*/
  #form_Contact-Us {
  padding: 0 1.5%;
  }

  /* Form Part >> Min-Height */
  #form-gsection {
  min-height: 560px;
  }

}


/* 980 以上  */
@Media (min-width: 980px) {

    /* Two Part >> Padding */
    #wording-gsection, #form-gsection {
    padding: 4%;
    } 

    /* Wording Part >> Padding */
    #wording-gsection { 
    border-radius: 9px 0px 0px 9px;
    padding: 3.2% 4% 4.8%;
    padding: 3.6% 4% 4.8%;

    padding: 4% 4% 10.7%; /* 欄位增加用 */
    padding: 4% 4% 9.5%; /* 欄位增加用 */
    }

    /* Form Part >> Padding */
    #form-gsection {
    border-radius: 0px 9px 9px 0px;
    padding: 6.3% 4% !important;
    padding: 2.9% 4% !important;
    padding: 2.9% 4.5% !important;
    /* padding: 2.88% 1.5% !important;  Pardot Form */
    padding: 3.3% 2.5% 2.5% 3% !important;
    }

    /* form-gsection Part >> Padding (TW 繁中) */
    body.locale_tw-zh #content #form-gsection {
    padding: 3.6% 4% 6.4%;
    padding: 3.6% 4% 0.4% !important;
    /* padding: 2.04% 1.5% !important;  Pardot Form */
    }

    /* Wording Part >> Padding (PL 波蘭) */
    body.locale_pl-pl #content #wording-gsection {
    padding: 4% 4% 5.4%;
    }

}




/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {

  /* Two Part >> Height */
  #wording-gsection, #form-gsection {
  height: 75vh;
  }


}



/* 810 以下 (iPad) */
@Media (max-width: 810px) {

  #Quick-Link-Section {
  padding: 3% 7% 5%;
  }

  /* Wording Part >> Padding */
  #wording-gsection {
  border-radius: 9px 9px 0px 0px;
  height: 14vh;
  height: 50vh;
  padding-top: 5%;
  padding-bottom: 2%;
  }

  .Two-Button #wording-csection.before-style3::before {
    left: -21%;
    top: -15%;
  }


  .Two-Button #wording-csection {
  padding-bottom: 2%;
  }

  .Two-Button .button_Contact.btn-primary {
  padding: 2.1% 5% !important;
  width: auto;
  margin-right: 4%;
  margin-right: 5%;
  width: 40%;
  }

  /* Form Part >> Padding */
  #form-gsection {
  border-radius: 0px 0px 9px 9px;
  }

  /* Form Button >> 置中 */
  .ao-block-wrapper > #block-b1512985974153 > div {
  margin: 0 auto;
  text-align: center !important;
  }



}


/* 480 以下  */
@Media (max-width: 480px) {

  .Two-Button .row.Two-Part-QSection {
    margin-right: 0px;
  }

  #Quick-Link-Section.Two-Button {
    padding: 5% 7% 7%;
  }

  /* Wording Part >> Padding */
  #wording-gsection {
  height: 40vh;
  }

  #button-section.Two-Button, .Two-Button #button-section {
  display: flex;
  flex-direction: column;
  }

  .Two-Button #wording-csection.before-style3::before {
  left: -43%;
  }

  .Two-Button .button_Contact.btn-primary {
  width: 100%;
  padding: 4% 5% !important;
  margin-right: 0%;
  margin-bottom: 6%;
  margin-top: 3%;
  }

}



















/* ========================================================================================================================
                Pardot Form 【Lite Ver Form】 >> for Rich Content Product Page Inquire (.Pardot-inSection.col-md-6)
======================================================================================================================== */



@media (min-width: 980px) {


  /* for Pardot Lite Ver Form (.Pardot-inSection.col-md-6) */
  #form-gsection.Pardot-inSection {

  padding: 2% 1.5% !important;

  padding: 2.88% 1.5% !important; /* ( 舊版 Product Page ) (.col-md-6 寬度從一半算) */

  /*padding-top: calc(3.2% - 8px) !important;
  padding-bottom: calc(3.2% - 8px) !important;
  padding-left: calc(1.5% - 8px) !important;
  padding-right: calc(1.5% - 8px) !important;
  */

  }




}





































/* ========================================================================================================================
                                          Contact Us Form >> at Bottom
======================================================================================================================== */

#form_Contact-Us.Form-Bottom {
  background-color: #f5f6f6;
  padding: 4%;
  border-radius: 9px;
}

#form_Contact-Us.Gray-Box {
  background-color: #f4f4f4;
  background-color: #f2f3f4;
  background-color: #f5f6f6;
  padding: 4% 1.5% 2%;
  padding: 3.5% 1.5% 1.2%;
  border-radius: 7px;
}

.wording-center-section {
  text-align: center;
  display: block;
  margin-bottom: 4%;
  margin-top: 4%;
}

.wording-center-section h4 {
    color: #686f73 !important;
    opacity: .75;
}


/* 1024 以上  */
@Media (min-width: 1024px) {

  .Form_Box_Bottom {
  width: 70%;
  margin: 0 auto;
  }

  #form_Contact-Us.Gray-Box .Form_Box_Bottom {
  width: 75%;
  }

}