@charset "UTF-8";
/************************************************************
    Title: service
    Author: Ifang, Hsu
    Date: 2019/05/05
*******************************************************************

    0. Global Reset / import
    1. body
        1.0 defined
            1.0.1 text
        1.1 wrapper
        1.2 header
        1.3 block
            1.3.1 titleGroup
            1.3.2 agreement
            1.3.3 checkList
            1.3.4 progressStep | 抬頭步驟進度表
            1.3.5 list
    2. Button
    3. Shape
    4. blockUi
    5. status
    6. media

********************************************************************/
/* 0. Global ------------------------------------------------*/
@import url("plugins/normalize.css");

.w5 {
  display: block;
  width: 5%;
  margin: auto;
}

.w5m0 {
  display: block;
  width: 5%;
 
}

.w10 {
  display: block;
  width: 10%;
  margin: auto;
}

.w15 {
  display: block;
  width: 15%;
  margin: auto;
}

.w-20 {
  display: block;
  width: 20%;
  margin: auto;
}

.w-20m0 {
  display: block;
  width: 20%;
}

.w20 {
  display: block;
  width: 20%;
  margin: auto;
}

.w25 {
  display: block;
  width: 25%;
  margin: auto;
}

.w25m0 {
  display: block;
  width: 25%;
}

.w30 {
  display: block;
  width: 30%;
  margin: auto;
}

.w30m0 {
  display: block;
  width: 30%;
}

.w35 {
  display: block;
  width: 35%;
  margin: auto;
}

.w40 {
  display: block;
  width: 40%;
  margin: auto;
}

.w45 {
  display: block;
  width: 45%;
  margin: auto;
}

.w45m0 {
  display: block;
  width: 45%;
}

.w50 {
  display: block;
  width: 50%;
  margin: auto;
}

.w55 {
  display: block;
  width: 55%;
  margin: auto;
}

.w60 {
  display: block;
  width: 60%;
  margin: auto;
}

.w65 {
  display: block;
  width: 65%;
  margin: auto;
}

.w70 {
  display: block;
  width: 70%;
  margin: auto;
}

.w70m0 {
  display: block;
  width: 70%;
}

.w75 {
  display: block;
  width: 75%;
  margin: auto;
}

.w80 {
  display: block;
  width: 80%;
  margin: auto;
}

.w85 {
  display: block;
  width: 85%;
  margin: auto;
}

.w90 {
  display: block;
  width: 90%;
  margin: auto;
}

.w94 {
  display: block;
  width: 94%;
  margin: auto;
}

.w100 {
  width: 100%;
}

.h3rem {
  height: 3rem;
  line-height: 0;
}

.h2rem {
  height: 2.5rem;
  border-radius: 8px;
}

.h1rem {
  height: 1rem;
}

.pdtype1 {
  padding: 1rem 1.5rem;
}

.pdtype2 {
  padding: 1.8rem 3rem;
}

.pdtype3 {
  padding: 1rem 3rem;
  margin-bottom: 5rem;
}

.pdtype4 {
  padding: 0.6rem !important;
  margin-top: 2rem;
}

.pdtype5 {
  padding: 1.2rem 1rem 1rem;
  margin-bottom: 2rem !important;
}

.pdtype6 {
  padding: 0.5rem;
}

.pdb1rem {
  padding-bottom: 1rem !important;
}

.pdl1rem {
  padding-left: 1rem;
}

.m0 {
  margin: 0;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb01 {
  margin-bottom: 0.1rem !important;
}

.mbhalf {
  margin-bottom: 0.5rem !important;
}

.mb1rem {
  margin-bottom: 1rem !important;
}

.mb1halfrem {
  margin-bottom: 1.5rem !important;
}

.mb2rem {
  margin-bottom: 2rem !important;
}

.mb3rem {
  margin-bottom: 3rem !important;
}

.mb4rem {
  margin-bottom: 4rem !important;
}

.mr1rem {
  margin-right: 1rem;
}

.mr10 {
  margin-right: 10%;
}

.mr05 {
  margin-right: 10%;
}

.mt2rem {
  margin-top: 2rem;
}

.flexWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flexWrap--spaceAround {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.imgtype1 {
  width: 8px;
  height: 1.3rem;
}

.fontSize-xl {
  font-size: 1.8rem !important;
}

.fontSize-l {
  font-size: 1.3rem !important;
}

.fontSize-m2 {
  font-size: 1.19rem !important;
}

.fontSize-m {
  font-size: 1.08rem !important;
}

.fontSize-sm {
  font-size: 0.9rem !important;
}

.fontSize-xs {
  font-size: 0.85rem !important;
}

.fontSize-xxs {
  font-size: 0.7rem !important;
}

.fontSize-xxxs {
  font-size: 0.6rem !important;
}

.fontAlign-c {
  text-align: center;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans TC', '微軟正黑體', 'arial';
}

html, body {
  font-size: 12px;
  background: #FFF7E2;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  color: #555;
}

h1, h2 {
  font-weight: normal;
}

h1 {
  font-size: 2.25rem;
}

h2 {
  font-size: 1.75rem;
}

p {
  margin: 0;
  font-size: 1.2rem;
  color: #555;
}

a {
  text-decoration: none;
  color: #3E210D;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}

a:active {
  color: #3E210D;
  text-decoration: none;
  opacity: 0.9;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

a:hover {
  color: #3E210D;
  text-decoration: none;
}

option {
  color: #555;
}

ul {
  padding-left: 2rem;
  color: #555;
}

button, select, input {
  outline: none;
}

/* 1. body  -------------------------------------------------------*/
/* 1.0 defined */
.text {
  line-height: 1.68;
  color: #D36911;
  font-size: 1.3rem;
}

.text--sm {
  font-size: 1.2rem !important;
}

.text--xs {
  font-size: 1rem;
}

input, select {
  background: #fff;
  width: 100%;
  height: 3.6rem;
  border-radius: 10px;
  border: 3px solid #C9CACA;
  padding: 0 1rem;
  font-size: 1.3rem;
  color: #3E210D;
}

input::-webkit-input-placeholder, select::-webkit-input-placeholder {
  font-size: 1.2rem;
  line-height: 1.66;
  color: #555;
}

input:-ms-input-placeholder, select:-ms-input-placeholder {
  font-size: 1.2rem;
  line-height: 1.66;
  color: #555;
}

input::-ms-input-placeholder, select::-ms-input-placeholder {
  font-size: 1.2rem;
  line-height: 1.66;
  color: #555;
}

input::placeholder, select::placeholder {
  font-size: 1.2rem;
  line-height: 1.66;
  color: #555;
}

input.higher, select.higher {
  height: 4.2rem;
}

input.short, select.short {
  width: 15%;
  height: 3rem;
  text-align: center;
  padding: 0;
}

input.medium, select.medium {
  width: 25%;
  height: 3rem;
  text-align: center;
  padding: 0;
}

input.medium2, select.medium2 {
  width: 55%;
  height: 3rem;
  text-align: left;
  padding: 0;
}

input.all, select.all {
  width: 80%;
  height: 3rem;
  text-align: center;
  padding: 0;
}

input[type=submit], input[type=button], select[type=submit], select[type=button] {
  border: none;
}

select {
  background-color: #fff !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #555;
  appearance: none;
  background-color: #fff;
  background-image: url(../img/arrow.png) !important;
  background-repeat: no-repeat !important;
  background-size: 12px !important;
  background-position: 95% 50% !important;
  color: #555 !important;
  margin: 0;
  outline: none;
}

/* 1.1 wrapper */
.wrapper {
  max-width: 640px;
  margin: auto;
  background: #FFF7E2;
  min-height: 90vh;
  /* Fallback for browsers that do not support Custom Properties */
}

.wrapper__header {
  width: 100%;
  margin: auto;
}

.wrapper__titleGroup {
  margin: 0 auto 1.2rem;
}

.wrapper__checkList {
  margin: .8rem auto;
  padding: 0 2.2rem;
}

.wrapper__agreement {
  margin: 1rem 1.8rem;
}

.wrapper__intention p {
  font-size: 1rem;
  line-height: 1.68;
}

.wrapper__list {
  width: 85%;
  margin: 0.8rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wrapper__list95 {
  width: 95%;
  margin: 0.8rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wrapper__list100 {
  width: 100%;
  margin: 0.8rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wrapper__list--left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.wrapper__list--marginModify {
  margin: 0 auto;
}

.wrapper__mainTitle {
  text-align: center;
  color: #D36911;
  font-size: 1.55rem;
  padding: 1.8rem 0;
}

.wrapper__subTitle {
  text-align: center;
  color: #D36911;
  font-size: 1.4rem;
  margin: 2rem auto 1.2rem;
}

.wrapper__button {
  margin: 1.6rem auto;
  width: 85%;
  text-align: center;
}

/* 1.2 header */
.header {
  width: 100%;
  padding-bottom: .8rem;
  height: 4.2rem;
  line-height: 4.2rem;
  text-align: center;
  background: #e6b025;
}

.header .header__title {
  color: #fff;
  line-height: 4rem;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
}

.header .header__img {
  width: 42%;
  max-width: 160px;
  vertical-align: middle;
  /* top: 1em; */
}

/* 1.3 block */
.titleGroup__mainTitle {
  text-align: center;
  color: #D36911;
  font-size: 1.55rem;
  padding: 2rem 0;
}

.titleGroup__subTitle {
  text-align: center;
  color: #D36911;
  font-size: 1.4rem;
  margin-top: 2.2rem;
}

.agreement__content {
  background: #fff;
  color: #3E210D;
  font-size: 1rem;
  line-height: 1.68;
  border-radius: 20px;
  margin-top: .5rem;
  padding: .5rem 1rem;
  max-height: 200px;
  border: 4px solid #C9CACA;
  overflow-y: scroll !important;
}

.agreement__content2 {
  background: #fff;
  color: #3E210D;
  font-size: 1rem;
  line-height: 1.68;
  border-radius: 20px;
  margin-top: .5rem;
  
  max-height: 200px;
  border: 4px solid #C9CACA;
  overflow-y: scroll !important;
}

.agreement__content--active {
  display: block;
}

.agreement__listItem {
  list-style-type: none;
}

.agreement__listItem-main {
  display: block;
  color: #e6b025;
  padding-top: 2rem;
}

.agreement__listItem--bold {
  display: block;
  font-weight: bold;
  padding-top: 1.4rem;
}

.checkList {
  color: #555;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 0.9rem;
}

.checkList--pl {
  padding-left: 4.5rem;
}

.checkList__checkbox {
  display: block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin-bottom: 1.2rem;
  padding-left: 2rem;
  font-size: 1rem;
  line-height: 1.2;
}

.checkList__checkbox2 {
  display: block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin-bottom: 1.2rem;
  padding-left: 2rem;
  font-size: 1rem;
  line-height: 1.2;
}

.checkList__checkbox input[type=checkbox], .checkList__checkbox input[type=radio] {
  position: absolute;
  opacity: 0;
  height: initial;
  top: 0;
  left: 0;
}

.checkList__checkbox input[type=checkbox]:checked ~ .checkList__checkbox--checked, .checkList__checkbox input[type=radio]:checked ~ .checkList__checkbox--checked {
  background: #fff;
}

.checkList__checkbox input[type=checkbox]:checked ~ .checkList__checkbox--checked:after, .checkList__checkbox input[type=radio]:checked ~ .checkList__checkbox--checked:after {
  display: block;
}

.checkList__checkbox--bg {
  font-size: 1.2rem;
}

.checkList__checkbox--checked {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.3rem;
  width: 1.3rem;
  border-radius: 2px;
  border: 0.1rem solid #3E210D;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: #fff;
}

.checkList__checkbox--checked:after {
  content: "";
  position: absolute;
  display: none;
  left: 14%;
  top: 10%;
  border: solid #555;
  width: .4rem;
  height: 1.5rem;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
          transform: rotate(45deg) translate(-50%, -50%);
}

.checkList__radio {
  display: block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  padding-left: 2rem;
}

.checkList__radio input[type=radio] {
  position: absolute;
  opacity: 0;
  height: initial;
  top: 0;
  left: 0;
}

.checkList__radio input[type=radio]:checked ~ .checkList__radio--checked:after {
  display: block;
}

.checkList__radio--checked {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  border: 0.12rem solid #555;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: #fff;
}

.checkList__radio--checked:after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #3E210D;
}

.checkList__radio--bg {
  font-size: 1.2rem;
}

.progressStep {
  width: 85%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: auto;
}

.progressStep span {
  list-style-type: none;
  width: 100%;
  height: 4px;
  background: #C9CACA;
}

.progressStep span:before {
  content: '';
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  -webkit-box-sizing: initial;
          box-sizing: initial;
  border: 4px solid #C9CACA;
  background: #fff;
  z-index: 2;
  top: -5px;
}

.progressStep span:last-of-type:after {
  content: '';
  position: absolute;
  -webkit-box-sizing: initial;
          box-sizing: initial;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  border: 4px solid #C9CACA;
  background: #fff;
  z-index: 2;
  right: 0;
  top: -5px;
}

.progressStep span.stepActive:before {
  border: none;
  background: #e6b025;
  border: 4px solid #e6b025;
}

.progressStep span.stepActive {
  background: #e6b025;
}

.progressStep span.stepActive--lastone {
  background: #C9CACA;
}

.progressStep span.stepActive--end::after {
  border: 4px solid #e6b025;
  background: #e6b025;
}

.list__text {
  text-align: left;
}

.list__text--mark {
  color: #e6b025;
}

.list__text--underline {
  text-decoration: underline;
}

.list__text--mt {
  margin-top: 1.5rem;
  padding-left: 0.2rem;
}

.list__box {
  text-align: center;
  padding-bottom: 0.8rem;
}

.listpoint {
  width: 85%;
  margin: 0 auto 1.4rem;
}

.listpoint li {
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.4;
  font-size: 1rem;
}

.listpoint--bg li {
  font-size: 1.2rem;
}

.resultBox {
  background: #fce6bd;
  -webkit-box-shadow: 1px 1px 1px #e6b025;
          box-shadow: 1px 1px 1px #e6b025;
  margin: 0 auto 2.5rem;
}

.resultBox2 {
  background: #fce6bd;
  -webkit-box-shadow: 1px 1px 1px #e6b025;
          box-shadow: 1px 0px 1px #e6b025;
  
}

.resultBox3 {
  background: #fce6bd;
  -webkit-box-shadow: 1px 1px 1px #e6b025;
          box-shadow: 1px 1px 1px #e6b025;
  
}

.resultBox-m {
  background: #fce6bd;
  -webkit-box-shadow: 1px 1px 1px #e6b025;
          box-shadow: 1px 1px 1px #e6b025;
  margin: 0 auto 0.1rem;
}

.resultBox--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.resultBox2--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.resultBox--center p, .resultBox--center input {
  text-align: center;
}

.resultBox p {
  font-size: 1.3rem;
  letter-spacing: 1px;
  line-height: 1.68;
}

.resultBox p.sm {
  padding-bottom: 0.5rem;
  font-size: 1.14rem;
}

.subscribe__title {
  color: #D36911;
  font-size: 1.55rem;
  padding: 1rem 0;
}

.subscribe__title--center {
  text-align: center;
}

.subscribe__dataSign p {
  font-size: 1.1rem;
  padding-left: 2px;
  color: #D36911;
}

.subscribe__record img {
  width: 30px;
  margin: 0 1rem;
}

.subscribe__setting input {
  width: 35%;
  height: 2.4rem;
  border-width: 1px;
  border-radius: 4px;
  margin-left: 1rem;
}

.subscribe__currency {
  margin-bottom: 1rem;
}

.subscribe__currency p {
  font-size: 0.9rem;
}

.subscribe__currency img {
  width: 2.4rem;
  margin-right: 2px;
}

.subscribe__action {
  margin-bottom: 1rem;
}

.subscribe__action img {
  width: 16px;
  margin-right: 0.5rem;
}

/* 2. Button--------------------------------------------------------*/
.pressBtn {
  display: block;
  background: #e6b025;
  color: #3E210D;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 1px;
  -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
}

.pressBtn--sm {
  padding: 0;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  height: 2.6rem;
}

.pressBtn--type2 {
  background: #D36911;
  color: #fff;
}

.pressBtn:active {
  opacity: 0.8;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
          box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.iconBtn {
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #e6b025;
  color: #fff;
  padding: 1.2rem 0;
  border-radius: 10px;
}

.iconBtn__icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 1rem;
}

.iconBtn__text {
  display: inline-block;
  margin-right: 1rem;
  font-size: 1.2rem;
}

/* 3. Shape ------------------------------------------------------- */
.oval {
  padding: 0.3rem 0.8rem;
  background: #9FA0A0;
  color: #fff;
  border-radius: 20px;
}

.oval--big {
  width: 85%;
  margin: auto;
  padding: 0.4rem 0.8rem;
}

/* 4. blockUi / loading -------------------------------------------*/
.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  margin: auto;
  z-index: 2;
  background: #fff;
}

.popup .popup__wrapImg {
  width: 80vw;
  height: 80vw;
  max-width: 300px;
  max-height: 300px;
  margin: auto;
  border-radius: 10px;
  background: #FFF7E2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.popup .popup__wrapImg img {
  margin: auto;
  width: 80%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.loading {
  width: 100%;
  height: 100%;
  background: #e6b025;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 1.5s;
  transition: 1.5s;
  z-index: 12;
}

.loading img {
  width: 20%;
  display: block;
  margin: auto;
  text-align: center;
  -webkit-animation: logoZoom 3s forwards;
          animation: logoZoom 3s forwards;
}

.loading.isload {
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes logoZoom {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes logoZoom {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

/* 5. status -----------------------------------------------------*/
.hidden {
  display: none;
}

.mark {
  color: #e6b025;
}

.secondary {
  color: #D36911;
}

.uwaga {
  color: #e60012;
}

.bottom {
  bottom: -10rem;
}

.dogIcon {
  display: block;
  width: 80%;
  max-width: 320px;
  margin: 2rem auto 4rem;
}

.icon {
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  padding: 2px;
  vertical-align: top;
}

.wrapBarcode {
  border: 2px solid #C9CACA;
  background: #fff;
  border-radius: 5px;
  padding: 0.3rem 2rem 0.6rem;
}

.wrapBarcode__barcode {
  display: block;
  margin: auto;
  /* left: 50%; */
  width: 100%;
  max-height: 80px;
  background: none !important;
  /* transform: translateX(-50%)!important; */
}

/* 20190619: 手動新增信用卡申請、資料確認頁的 CSS */
.confirm-section {
	height: 30em;
	overflow: scroll;
}

/* 20190710: 信用卡帳務相關 */
.DIV1{
width:200px;　//DIV區塊寬度
line-height:50px;　//DIV區塊高度
padding:20px;　//DIV區塊內距，參閱：CSS padding 內距。
border:2px blue solid;　//DIV區塊邊框，參閱：CSS border 邊框設計。
margin-right:10px;　//靠右外距，參閱：CSS margin 邊界使用介紹範例教學。
float:left;
}
.tHeader{
width:40%;
line-height:2px;
padding:14px;
border:1px white solid;
color: #3E210D;
background: #e6b025;
font-size: 1.2rem;
font-weight:bold;
float:left;
}
.tHeaderColumn{
width:20%;
line-height:2px;
padding:14px;
border:1px white solid;
color: #3E210D;
background: #e6b025;
font-size: 1.2rem;
font-weight:bold;
float:left;
}
.tRowHeader{
width:40%;
line-height:2px;
padding:14px;
border:1px white solid;
color: #3E210D;
background: #fce6bd;
font-size: 1rem;
font-weight:bold;
float:left;
}
.tRowColumn{
width:20%;
line-height:2px;
padding:14px;
border:1px white solid;
color: #3E210D;
background: #fce6bd;
font-size: 1rem;
float:left;
}


.scrollPanel {
    height: 400px; 
    overflow-x: hidden; 
    overflow-x: auto; 
    text-align:justify; 
    border:2px #B5B5B6 solid;
    margin-bottom: 10%;
}


.mp0 {

}

.panel-heading {
  padding: 0;
  border:0;
}
.panel-title>a, .panel-title>a:active{
  display:block;
  padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:1px;
  word-spacing:3px;
  text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   color: #e6b025;
   float: right;
   transition: all;
}
.panel-heading.active a:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
} 

.panelHeaderDate{
  background: #ccc;
  font-weight:bold;
  padding:5px 15px 0px 15px;
  font-size:13px;
  letter-spacing:1px;
  word-spacing:3px;
  font-weight:bold;
}

.panelHeaderExtra{
  padding:5px 15px 0px 15px;
  background: #fff;
  font-size:13px;
  letter-spacing:1px;
  word-spacing:3px;
}
.panelBodyExtra{
  border:0px;
  padding-top:2px;
  background: #fff;
  font-size:13px;
  letter-spacing:1px;
  word-spacing:3px;
}
.headerrightfloat {
  float: right;
}
.bodyrightfloat {
  padding:0px 14px 0px 0px;
  float: right;
}
.inputDate {
  border-width: 1px;
  border-radius: 0px;
}
.firstLineMsg {
  padding-bottom: 16px;
  font-size: 1.4rem;
  font-weight: bold;
}
.pm0 {
  padding:0;
  margin:0;
}

.pbottom0{
  padding-bottom:0px
}

.pbottom10{
  padding-bottom:10px
}

.pbottom16{
  padding-bottom:16px
}

.star {
  color:red;
  padding:0 0px 16px 10px;
  margin:0;
  font-size: 15px;
}

.star2 {
  color:red;
  padding:0;
  margin:0;
  /* font-size: 15px; */
  font-size: 3em;
}

.fw {
  font-weight:bold;
}

.f13w {
  font-size: 2.3rem;
  font-weight:bold;
}

.bw2 {
  border-width:2px;
}

.pcode {
  font-size: 1.2rem;
  color:#fff;
  background: #000;
  text-align: center;
}

.fsize25 {
  font-size: 25px;
}

.fsize1d2 {
  font-size: 1.2rem;
}

.pr10m0 {
  padding:0 10px 0 0;
  margin:0;
}
.bw1br0 {
  border-width:1px;
  border-radius: 0px;
}
.pl25s1d2 {
  padding-left:25px;
  font-size: 1.2rem;
}
.pl10m0 {
  padding:0 0px 0px 10px;
  margin:0;
}
.txar {
  text-align: right;
}
.txal {
  text-align: left;
}
.f1d2 {
  font-size: 1.2rem;
}
.f1d2m18 {
  font-size: 1.2rem;
  margin-left: 18px;
}
.f1d2l18 {
  font-size: 1.2rem;
  margin-left: 18px;
}
.f1d2m05 {
  font-size: 1.2rem;
  margin-left: 5px;
}
.ml34 {
  margin-left: 34px;
}

.mt0 {
  margin-top:0px;
}
.ml0mt10 {
  margin-left: 0px;
  margin-top: 10px;
}
.ml0 {
  margin-left: 0px;
}
.pb16mt0 {
  padding-bottom:16px;
  margin-top:0px;
}
.pd28 {
  padding-bottom:28px;
}
.pd10 {
  padding-bottom:10px;
}
.pd20 {
  padding-bottom:20px;
}
.ml0f1d4pb10 {
  margin-left: 0px;
  font-size: 1.4rem;
  padding-bottom:10px;
}
.bw2br5ml42 {
  border-width:2px;
  border-radius: 5px;
  margin-left: 42px;
}
.m0 {
  margin:0;
}
.ml30bw1br4 {
  margin-left: 30%;
  border-width:1px;
  border-radius: 4px
}
.clearbth {
  clear:both;
}

.mt20pb10 {
  margin-top: 20px;
  padding-bottom:10px
}

.pb30 {
  padding-bottom:30px
}

.bw2br10 {
  border-width:2px;
  border-radius: 10px
}
.pb14 {
  padding-bottom:14px;
}
.p01 {
  padding:0 1%;
}
.bgwhite {
  background: #fff;
}

/* 6. media -----------------------------------------------------*/
@media screen and (max-width: 584px) {
  html {
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 10px;
  }
  html .wrapBarcode__barcode {
    height: 70px;
  }
}
/*# sourceMappingURL=style.css.map */