@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

@font-face {font-family: "ITCAvantGardeGothicLTBookRegular";
  src:url("/assets/fonts/ITCAvantGardeGothicLTBookRegular.eot");
  src:url("/assets/fonts/ITCAvantGardeGothicLTBookRegular.eot?#iefix") format("embedded-opentype"),
  url("/assets/fonts/ITCAvantGardeGothicLTBookRegular.woff") format("woff"),
  url("/assets/fonts/ITCAvantGardeGothicLTBookRegular.ttf") format("truetype"),
  url("/assets/fonts/ITCAvantGardeGothicLTBookRegular.svg#ITCAvantGardeGothicLTBookRegular") format("svg");
}
@font-face {
  font-family: "ITC_Avant_Garde_Gothic_LT_Bold";
  src: url("/assets/fonts/ITC_Avant_Garde_Gothic_LT_Bold.eot");
  src: url("/assets/fonts/ITC_Avant_Garde_Gothic_LT_Bold.eot?#iefix") format("embedded-opentype"),
  url("/assets/fonts/ITC_Avant_Garde_Gothic_LT_Bold.woff") format("woff"),
  url("/assets/fonts/ITC_Avant_Garde_Gothic_LT_Bold.ttf") format("truetype"),
  url("/assets/fonts/ITC_Avant_Garde_Gothic_LT_Bold.svg#ITC_Avant_Garde_Gothic_LT_Bold") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "Avenir-Book";
  src: url("/assets/fonts/Avenir-Book.eot");
  src: url("/assets/fonts/Avenir-Book.eot?#iefix") format("embedded-opentype"),
  url("/assets/fonts/Avenir-Book.woff") format("woff"),
  url("/assets/fonts/Avenir-Book.ttf") format("truetype"),
  url("/assets/fonts/Avenir-Book.svg#Avenir-Book") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "Avenir-Medium";
  src: url("/assets/fonts/Avenir-Medium.eot");
  src: url("/assets/fonts/Avenir-Medium.eot?#iefix") format("embedded-opentype"),
  url("/assets/fonts/Avenir-Medium.woff") format("woff"),
  url("/assets/fonts/Avenir-Medium.ttf") format("truetype"),
  url("/assets/fonts/Avenir-Medium.svg#Avenir-Medium") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "Avenir-Black";
  src: url("/assets/fonts/Avenir-Black.eot");
  src: url("/assets/fonts/Avenir-Black.eot?#iefix") format("embedded-opentype"),
  url("/assets/fonts/Avenir-Black.woff") format("woff"),
  url("/assets/fonts/Avenir-Black.ttf") format("truetype"),
  url("/assets/fonts/Avenir-Black.svg#Avenir-Black") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: "Avenir-Roman";
  src: url("/assets/fonts/Avenir-Roman.eot");
  src: url("/assets/fonts/Avenir-Roman.eot?#iefix") format("embedded-opentype"),
  url("/assets/fonts/Avenir-Roman.woff") format("woff"),
  url("/assets/fonts/Avenir-Roman.ttf") format("truetype"),
  url("/assets/fonts/Avenir-Roman.svg#Avenir-Roman") format("svg");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*************************
 *** Vendor: Bootstrap ***
 *************************/

.modal-body {
  padding: 3rem 2rem 2rem 2rem;
}
.modal-body .close {
    position: absolute;
    float: none;
    top: 0;
    right: 0;
    font-size: 4rem;
    padding: .5rem 1rem;
}

.custom-control-input.is-invalid~.custom-control-label, 
.was-validated .custom-control-input:invalid~.custom-control-label,
.custom-control-input.is-valid~.custom-control-label, 
.was-validated .custom-control-input:valid~.custom-control-label,
.custom-select.is-valid, 
.form-control.is-valid, 
.was-validated .custom-select:valid, 
.was-validated .form-control:valid {
    color: inherit;
}

.custom-control-input.is-valid~.custom-control-label::before, 
.was-validated .custom-control-input:valid~.custom-control-label::before {
    background-color: #dee2e6;
}

.custom-control-input.is-valid:checked~.custom-control-label::before, 
.was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    background-color: #007bff;
}

.custom-select.is-valid, 
.form-control.is-valid, 
.was-validated .custom-select:valid, 
.was-validated .form-control:valid {
    border-color: #ced4da;
}

.custom-select.is-invalid-2~.invalid-feedback-2, 
.custom-select.is-invalid-2~.invalid-tooltip-2, 
.form-control.is-invalid-2~.invalid-feedback-2, 
.form-control.is-invalid-2~.invalid-tooltip-2 {
    display: block;
}

.custom-control-label {
    cursor: pointer;
}

.invalid-feedback-2 {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

.form-control {
  background-color: #FFFEFC;
  border-color: #EFD7B1;
  border-radius: 0;
}
.btn-primary {
  color: #7A7B7B;
  background-color: #EED8B1;
  border-color: #EFD7B1;
}
.btn-primary:hover {
  color: #7A7B7B;
  background-color: #FCF7EF;
  border-color: #EFD7B1;
}

.custom-select {
    background: #FFFEFC url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;
    border: 1px solid #EFD7B1;
    border-radius: 0;
}
.input-group-text {
    background-color: #FFFEFC;
    border: 1px solid #EFD7B1;
    border-radius: 0;
}

.custom-radio .custom-control-label::before {
    border-radius: 2px;
}
.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: #EFD7B1;
}
.custom-control-input:active~.custom-control-label::before,
.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    color: #fff;
    background-color: #EFD7B1;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #EFD7B1;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before,
.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    background-color: #EFD7B1;
}

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid {
    border-right: 1px solid #dc3545 !important;
    border-left: 1px solid #dc3545 !important;
}

/******************************
 *** Vendor: intl-tel-input ***
 ******************************/

.intl-tel-input {
    display: block;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, 
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text], 
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] {
    padding-left: 98px;
}


/**********************
 *** Vendor: swiper ***
 **********************/

.swiper-container { max-width: 1000px; }

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
/*   left: 3px; */
  right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
/*   right: 3px; */
  left: auto;
}

@media (max-width: 575.98px) {
  .swiper-button-next, .swiper-button-prev {
      width: 13.5px;
      height: 22px;
      background-size: 100%;
  }

/*   .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    left: 0;
  } */
/*   .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    right: 0;
  } */
}

/********************
 *** Image picker ***
 ********************/
ul.thumbnails.image_picker_selector { width: 100%; }
ul.thumbnails.image_picker_selector li { margin: 0; padding: 5px; }
ul.thumbnails.image_picker_selector li .thumbnail { padding: 6px; border: 1px solid #dddddd; cursor: pointer; }
ul.thumbnails.image_picker_selector li .thumbnail img { max-width: 100%; background-color: #ffffff; }
/********************
 *** Custom Style ***
 ********************/


.masthead h1 { max-width: 850px; margin-left: auto; margin-right: auto; }
.masthead h5 { max-width: 420px; margin-left: auto; margin-right: auto; }

@media (max-width: 991.98px) {
  .masthead h1 { font-size: 1.5rem; }  
  .masthead h5 { font-size: 1rem; }  
}
@media (max-width: 575.98px) {
  .masthead h1 { font-size: 1.3rem; }  
  .masthead h5 { font-size: .8rem; }  
}

body { font-family: 'Avenir-Roman', 'Noto Sans TC', Arial, sans-serif; background-color: #FFF; color: #7A7B7B; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { letter-spacing: .1rem; }
.sit { font-family: 'ITCAvantGardeGothicLTBookRegular'; }
.sit_bold { font-family: 'ITC_Avant_Garde_Gothic_LT_Bold'; }
.AvenirRoman { font-family: "Avenir-Roman"; }
.AvenirMedium { font-family: "Avenir-Medium"; }
.AvenirBook { font-family: "Avenir-Book"; }
.AvenirBlack { font-family: "Avenir-Black"; }
.NotoSansTC { font-family: "Noto Sans TC"; }
	
.clearfix { *zoom: 1; }
.clearfix:before,
.clearfix:after { display: table; line-height: 0; content: ""; }
.clearfix:after { clear: both; }

.pt-6, .py-6 { padding-top: 10rem; }
.pb-6, .py-6 { padding-bottom: 10rem; }

#btn-submit { 
  max-width: 300px; 
  border-radius: .05rem;
  margin-left: auto; 
  margin-right: auto; 
}

#footer { 
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  border-top: 2px solid #000; }


.head-logo { max-width: 160px; margin: 0 auto; }
.head-title { max-width: 320px; width: 100%; }
.head-img { max-width: 100%; width: auto; }
/* .content-section-middle { max-width: 900px; } */
#form-header h5,
#form-header p { font-size: 1.05rem; }
#tnc-container { text-transform: uppercase; }
#tnc-container h3 { font-weight: 700; }
#tnc-container li {  
  font-size: 80%;
  font-weight: 400; 
  margin-bottom: .25rem;
}

.small, small {
    font-size: 90%;
    font-weight: 400;
}
.mark_hash {
    padding-left: 10px;
    display: block;
    position: relative;
}
.mark_hash:before {
    content: "#";
    position: absolute;
    left: 0;
    top: -1px;
    font-size: 70%;
}

.title-shadow {
    position: relative;
    margin-left: auto;
    margin-right: auto;
  padding-bottom: 3px;
}
.title-shadow:after {
    content: "";
    position: absolute;
    height: 46%;
    width: 100%;
    background-color: rgba(238, 216, 177, .2);
    bottom: 0;
    left: 0;
    z-index: -1;
}

.title-shadow-2 {
    position: relative;
    margin-left: auto;
    margin-right: auto;
  padding-bottom: 3px;
}
.title-shadow-2:after {
    content: "";
    position: absolute;
    height: 46%;
    width: 100%;
    background-color: rgba(38, 16, 187, .07);
    bottom: 0;
    left: 0;
    z-index: -1;
}

@media (min-width: 576px) {
  .cpt { padding-top: 3rem; }
  .cpb { padding-bottom: 3rem; }
  .title-productname { font-size: 2rem; }
}

@media (max-width: 575.98px) {
  .head-logo { max-width: 100px; }
  .cpt { padding-top: 2rem; }
  .cpb { padding-bottom: 2rem; }  
  .title-productname { font-size: 1.25rem; }
}



/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .sit { font-family: 'ITCAvantGardeGothicLTBold'; }
}