/* 阿銘自定 CSS */

/* Google Fonts 思源黑 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/* Google Fonts 圓體 */
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css");

body{ font-family: 'cwTeXYen',sans-serif; }

h1, .fixed-header { font-family: 'Noto Sans TC', sans-serif; }

.navbar-brand { font-weight: 600; }
.main-title { font-weight: 400; margin: 15px auto; }

.background p, .background li { font-size: 1.1em; }

/* 調整 ICON 位置*/
.glyphicon { top: 5px; }

.numberCircle {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    margin: 5px;
    background: #fff;
    border: 2px solid black;
    color: black;
    text-align: center;
    font: 42px Arial, sans-serif;
    display: inline-block;
}

.tm-image { z-index: -66; }

.div-bottom-text {
  width: 100%;
  margin-top: 88%;
  position: absolute;
  font-size: 1.6em;
  /*height: 1.5em;*/
  padding-right: 10px;
  color: #006400;
  text-shadow: 1px 1px 1px #fff,2px 2px 2px #fff;
  text-align: center;
  display: flex;
}

.rw-words span{
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 100%;
}
.rw-words-1 span{
  -webkit-animation: rotateWordsFirst 18s linear infinite 0s;
  -ms-animation: rotateWordsFirst 18s linear infinite 0s;
  animation: rotateWordsFirst 18s linear infinite 0s;
}

.rw-words span:nth-child(2) { 
  -webkit-animation-delay: 3s; 
  -ms-animation-delay: 3s; 
  animation-delay: 3s; 
}
.rw-words span:nth-child(3) { 
  -webkit-animation-delay: 6s; 
  -ms-animation-delay: 6s; 
  animation-delay: 6s; 
}
.rw-words span:nth-child(4) { 
  -webkit-animation-delay: 9s; 
  -ms-animation-delay: 9s; 
  animation-delay: 9s; 
}
.rw-words span:nth-child(5) { 
  -webkit-animation-delay: 12s; 
  -ms-animation-delay: 12s; 
  animation-delay: 12s; 
}
.rw-words span:nth-child(6) { 
  -webkit-animation-delay: 15s; 
  -ms-animation-delay: 15s; 
  animation-delay: 15s; 
}
@-webkit-keyframes rotateWordsFirst {
  0%   { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
  8%   { opacity: 1; height: 60px; }
  19%  { opacity: 1; height: 60px; }
  25%  { opacity: 0; height: 60px; }
  100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
  0%   { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
  8%   { opacity: 1; height: 60px; }
  19%  { opacity: 1; height: 60px; }
  25%  { opacity: 0; height: 60px; }
  100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
  0%   { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
  8%   { opacity: 1; height: 60px; }
  19%  { opacity: 1; height: 60px; }
  25%  { opacity: 0; height: 60px; }
  100% { opacity: 0; }
}

/* for Slick Slider 同步輪轉部份 */
.slick-slider-2 img { max-width: 100%; }

.slick-slider-2 {
  position: relative;
  width: 100%;
  margin: 10px auto;
}

.slick-slider-2 .slick-slide img {
  border: 3px solid transparent;
}
.slick-slider-2 .slick-slide.slick-current img {
  border-color: #fff;
}

/* 調整 "FAQ" 區段部份 */
.thumbnail { text-align: center; background: rgba(255, 255, 255, 0.6); }

.blockquote-reverse{
  border-right: 5px solid #0006;
  background-color: #eee;
  margin-right: 3px;
}

/* 購買表單部份 */
    #order {
      color: #fff;
      background: #333;
      -webkit-font-smoothing: antialiased;
    }

    #order button,input,select,textarea {
      font-family: inherit;
      font-size: 125%;
      vertical-align: baseline;
      border: 0;
      outline: 0;
      color: #fff;
    }

    #order button::-moz-focus-inner,input::-moz-focus-inner {
      border: 0;
      padding: 0;
    }

    #order textarea {
      overflow: auto;
      vertical-align: top;
      resize: none;
    }

    [placeholder]::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.8);
    }

    [placeholder]:hover::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.4);
    }

    [placeholder]:focus::-webkit-input-placeholder {
      color: transparent;
    }

    [placeholder]::-moz-placeholder {
      color: rgba(255, 255, 255, 0.8);
    }

    [placeholder]:hover::-moz-placeholder {
      color: rgba(255, 255, 255, 0.4);
    }

    [placeholder]:focus::-moz-placeholder {
      color: transparent;
    }

    [placeholder]:-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.8);
    }

    [placeholder]:hover:-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.4);
    }

    [placeholder]:focus:-ms-input-placeholder {
      color: transparent;
    }

    form {
      width: 96%;
      margin: 6px auto;
    }

    #order input[type="text"] {
      display: block;
      width: 96%;
      margin: 0 0 20px;
      padding: 8px 12px 10px 12px;
      border: 1px solid rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, 0.25);
    }

    #order textarea {
      display: block;
      width: 96%;
      height: 150px;
      margin: 0 0 20px;
      padding: 8px 12px 10px 12px;
      border: 1px solid rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, 0.25);
    }

    .radio {
      position: relative;
      display: inline-block;
      margin: 0 20px 20px 0;
      font-size: 125%;
    }

    .radio input[type="radio"] {
      vertical-align: middle;
      opacity: 0;
    }

    .radio label {
      vertical-align: middle;
      cursor: pointer;
    }

    .radio input[type="radio"] + label:before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: -3px 5px 0 -15px;
      vertical-align: middle;
      font-size: 14px;
      font-family: fontawesome;
      line-height: 19px;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, 0.25);
    }

    .radio input[type="radio"] + label:before {
      border-radius: 50%;
    }

    .radio input[type="radio"]:hover + label:before {
      content: "\f058";
      font-size: 125%;
      color: rgba(255, 255, 255, 0.4);
    }

    .radio input[type="radio"]:checked + label:before {
      content: "\f058";
      font-size: 125%;
      color: rgba(255, 255, 255, 0.8);
    }

    input[type="submit"] {
      display: block;
      width: 150px;
      margin: 0 0 20px;
      padding: 8px 0 10px 0;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, 0.25);
    }