@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: "ITCAvantGardeGothicLTBold";
  src:url("/assets/fonts/ITCAvantGardeGothicLTBold.eot");
  src:url("/assets/fonts/ITCAvantGardeGothicLTBold.eot?#iefix") format("embedded-opentype"),
      url("/assets/fonts/ITCAvantGardeGothicLTBold.woff2") format("woff2"), /* chrome、firefox */
      url("/assets/fonts/ITCAvantGardeGothicLTBold.woff") format("woff"),
      url("/assets/fonts/ITCAvantGardeGothicLTBold.ttf") format("truetype"),
      url("/assets/fonts/ITCAvantGardeGothicLTBold.svg#ITCAvantGardeGothicLTBold") format("svg");
}

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

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

@media (max-width: 575.98px) {
  .modal-dialog {
      margin: 1.75rem 1rem 3.75rem;
  }
}

.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;
}

.custom-select {
  color: #495057 !important;
}

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

.btn-dark { 
    background-color: #000;
    border-color: #000;
}

/******************************
 *** 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; color: }
.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: 'Noto Sans TC'; background-color: #ECB7BD; color: #000; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 900; }
ol { padding-left: 25px; }
.sit { font-family: 'ITCAvantGardeGothicLTBookRegular'; }
.sit-bold { font-family: 'ITCAvantGardeGothicLTBold'; }
.textlink { color: #91252A; text-decoration: underline; }
	
.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; 
  background-color: #91252A;
  color: #fff;
  border: 0;
}

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


.head-logo { max-width: 210px; margin: 0 auto; }
.head-title { margin: 15px auto; color: #91252A; }
.head-img { max-width: 100%; width: auto; }
.notice {
/*   background-color: #F1B6B8; */
  color: #91252A;
  padding: .9rem 1rem;
  max-width: 590px;
  margin: auto;
  text-align: center;
  line-height: 1.4;
}
.content-section-top { max-width: 900px; }
.content-section-middle { max-width: 900px; }
.content-section-bottom { max-width: 1000px; }
#form-header h5,
#form-header p { font-size: 1.05rem; }
#tnc-container li,
#3ce-container li {  
/*   font-size: 80%;
  font-weight: 400;  */
  margin-bottom: .25rem;
}
.was-validated .form-control:valid { color: #495057; }
#tbl-customer { max-width: 440px; }
#tbl-customer th { white-space: nowrap; }



#draggableContainer {
    position: relative;
    width: 210px;
    margin: 0px auto;
    color: #555;
    padding: 4px 0;
    background-color: #91252A;
    border: 2px solid #912520;
    border-radius: 7px;
/*     background-image: -webkit-linear-gradient(top, #111 0%, #333 100%);
    background-image: -moz-linear-gradient(top, #111 0%, #333 100%);
    background-image: -o-linear-gradient(top, #111 0%, #333 100%);
    background-image: linear-gradient(to bottom, #111 0%, #333 100%); */
}
#draggableContainer .inner{ width: 200px; margin: 0 auto; }
#draggableContainer .text { 
    color: #fff;
    position: absolute;
    top: 11px;
    font-size: 14px;
    left: calc(50% - 28px);
    margin: 0;
}

#draggable {
		position: relative;
    height: 36px;
    width: 54px;
    border-radius: 3px;
    background: #fff;
    /* background-image: -webkit-linear-gradient(top, #F4E4D4 0%, #ccc 100%); */
    background-image: -moz-linear-gradient(top, #F4E4D4 0%, #ccc 100%);
    background-image: -o-linear-gradient(top, #F4E4D4 0%, #ccc 100%);
    /* background-image: linear-gradient(to bottom, #F4E4D4 0%, #ccc 100%); */
    cursor: -webkit-grab;
    font-weight: 900;
/*     padding: 18px 0; */
    text-align: center;
	z-index: 1;
}
#draggable.is-pointer-down {
  /* background: #09F; */
  z-index: 2; /* above other draggies */
}
/* #draggable.is-dragging { opacity: 0.7; } */


#amountContainer { 
	display: none;
	width: 200px;
	margin: 0 auto;
	padding: 0;
/* 	border: 5px solid; */
	background-color: #fff;
	border-radius: 10px;
	background: #222;
	background-image: -webkit-linear-gradient(top, #111 0%, #333 100%);
	background-image: -moz-linear-gradient(top, #111 0%, #333 100%);
	background-image: -o-linear-gradient(top, #111 0%, #333 100%);
	background-image: linear-gradient(to bottom, #111 0%, #333 100%);
}
#amountContainer > * { 
	display: block;
    text-align: center;
    margin: 0 auto;
    color: #000;
}
#amountContainer label { 
	color: #000;
    font-size: 20px;
    font-weight: 900;
}
#amountContainer [type=text] { 
	background-color: #fff;
    color: #000;
    padding: 6px 12px;
    height: 34px;
    line-height: 34px;
    border: 2px solid #000;
    font-size: 16px;
    margin: 10px auto 0;
}

#amountContainer > #submitbtn {
    background-color: transparent;
    width: 100%;
    height: 100%;
    padding: 16px 0;
    border: 0;
    color: #fff;
    outline: 0;
    font-size: 20px;
}

#remark {
    font-size: 10px;
    padding-top: 12px;
    text-align: center;
}

@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'; }
}