@charset "UTF-8";

.add {width:auto;margin-right:4px; width:150px !important;}

input.add2 {width:120px !important;}

/* CSS Document */
.step li,
.sectionPayok,
.payokList>li .rightItem,
.titleTotal,
.payListArea .payListInner,
.payListArea th,
.section,
.section input[type="text"],
.section select,
.section textarea,
.section .inner,
.section .subTitle,
.section .code .btn,
.inputList .timIns,
.totalArea li,
.listTotal,
.listTotal li,
.btnArea a,
.fixBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.payListArea .toggleClose,
.payTopArea .toggleOpen,
.payTopArea .toggleOpen:before,
.payTopArea .toggleOpen:after,
.section input[type="text"],
.section select,
.section .code .btn,
.errorNote .noteTxt {
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.mainArea {
  background-color: #f5f7fa;
}

@-webkit-keyframes btnAni {
  20% {
    background-color: rgba(237, 188, 72, 0.3);
  }

  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    background-color: transparent;
  }

}

@keyframes btnAni {
  20% {
    background-color: rgba(237, 188, 72, 0.3);
  }

  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    background-color: transparent;
  }

}

/*步驟*/
.step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 45px;
}

.step li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 35px;
}

.step li.current .icon {
  background-color: #edbc48;
}

.step li.current .icon:after {
  opacity: 1;
  -webkit-animation: btnAni 1.5s 0.2s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: btnAni 1.5s 0.2s infinite cubic-bezier(0.66, 0, 0, 1);
}

.step li.current .Txt {
  color: #434343;
}

.step .icon {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  margin-right: 13px;
  border-radius: 50%;
  background-color: #bfbfbf;
}

.step .icon:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  background-color: rgba(237, 188, 72, 0.4);
}

.step svg {
  fill: #fff;
}

.step .icon-step01 {
  width: 40px;
  height: 40px;
}

.step .icon-step02 {
  width: 37px;
  height: 37px;
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}

.step .icon-step03 {
  width: 33px;
  height: 33px;
}

.step .Txt {
  color: #959595;
}

.step .Txt strong {
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
}

.step .Txt b {
  font-family: "Nunito", "微軟正黑體", sans-serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: .075em;
}

.step .Txt p {
  font-size: 14px;
  letter-spacing: .15em;
}

.tagList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-bottom: 25px;
}

.tagList li {
  margin-right: 15px;
  margin-bottom: 10px;
  padding: 5px 10px;
  color: #fff;
  background-color: #edbc48;
  min-width: 175px;
  line-height: 1.8;
  text-align: center;
  cursor: pointer
}

.tagList li.current {
  background-color: #49362a
}

.formWrap {
  position: relative;
  clear: both;
}

.infoArea {
  overflow: hidden;
}

.addressList {
  width: 100%;
}

.addressList select[name="data_city"],
.addressList select[name="data_scity"] {
  width: 120px;
}

.addressList select[name="data_town"],
.addressList select[name="data_stown"] {
  width: 160px;
}

.addressList input,
.addressList select {
  margin: 0 0 10px 0;
}

.payokTitle em {
  margin-bottom: 0;
  font-size: 28px;
  letter-spacing: .07em;
}

.payokTitle em:after {
  display: none;
}

.payokTitle h2 {
  font-size: 18px;
  letter-spacing: .075em;
}

.sectionPayok {
  margin-bottom: 25px;
  background-color: #fff;
}

.sectionPayok .title01 {
  margin-bottom: 25px;
}

.sectionPayok01 {
  padding: 20px 140px 30px;
}

.sectionPayok02 {
  padding: 50px 140px 60px;
}

.sectionPayok03 {
  padding: 0 140px;
}

.sectionPayok03 a {
  color: #edbc48;
  text-decoration: underline;
  font-size: 15px;
}

.sectionPayok03 span {
  font-size: 15px;
}

.payokList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.payokList:not(:last-child) {
  margin-bottom: 60px;
}

.payokList>li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #f5f5f5;
}

.payokList>li:last-child {
  border-bottom: 1px solid #f5f5f5;
}

.payokList>li .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.payokList>li .leftItem {
  width: 240px;
}

.payokList>li .rightItem {
  width: calc(100% - 240px);
  padding-left: 100px;
}

.payokList>li .left {
  width: 110px;
  font-weight: 500;
  font-size: 15px;
  color: #434343;
  letter-spacing: .05em;
}

.payokList>li .right {
  width: calc(100% - 110px);
  font-size: 14px;
  color: #626262;
  letter-spacing: .075em;
}

.payokList>li .right a {
  color: #ef6632;
}

.payokList01>li:first-child {
  border-top: none;
}

.payokList01>li:first-child>.item {
  padding-top: 20px;
  padding-bottom: 10px;
}

.payokList01>li:last-child {
  border-bottom: none;
}

.payokList01>li .left {
  width: 80px;
}

.payokList01>li .right {
  width: calc(100% - 80px);
}

.payokList01>li .invoice span {
  display: block;
  margin-bottom: 12px;
}

.payokList01>li .no {
  border-right: 1px solid #ececec;
}

.payokList01>li .no .left,
.payokList01>li .no .right {
  width: 100%;
  margin-bottom: 15px;
}

.payokListIns {
  width: 100%;
}

.payokListIns li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.payokListIns .item {
  width: 50%;
  margin-bottom: 12px;
}

/**結帳說明**/
.noteBox .title {
  padding: 10px 0;
  color: #231815;
  font-weight: 400;
  font-size: 18px;
  border-bottom: 1px solid #d9d9d9;
}

.noteBox .title strong {
  font-weight: 400;
}

.noteBox .textEditor {
  padding: 15px;
}

.titleTotal {
  padding: 0 0 15px 50px;
  font-family: "Nunito", "微軟正黑體", sans-serif;
  font-size: 15px;
  color: #fff;
  letter-spacing: .2em;
}

.titleTotal b {
  font-size: 22px;
  font-weight: 500;
}

/**清單表格**/
.payListArea {
  padding-bottom: 40px;
}

.payListArea.listPage .payListInner:before {
  background-color: #f1f1f1;
}

.payListArea.listPage th {
  color: #434343;
}

.payListArea.payokPage .payListInner:before {
  display: none;
}

.payListArea.payokPage th {
  border: 1px solid #ececec;
  border-right: none;
  border-left: none;
  color: #434343;
}

.payListArea.payokPage th:first-child,
.payListArea.payokPage td:first-child {
  padding-left: 25px;
}

.payListArea.payokPage th:last-child,
.payListArea.payokPage td:last-child {
  padding-right: 25px;
}

.payListArea.payokPage .listTotal {
  border-bottom: none;
}

.payListArea .payTopTitle {
  padding: 35px 0 25px;
  text-align: center;
  background-color: #fff;
}

.payListArea .payListInner {
  position: relative;
  z-index: 0;
  padding: 0 50px;
  background-color: #fff;
}

.payListArea .payListInner th {
  font-weight: 500;
}

.payListArea .payListInner:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 55px;
  background-color: #222;
}

.payListArea .toggleBox {
  position: relative;
  padding-bottom: 65px;
  background-color: #fff;
}

.payListArea table {
  width: 100%;
  border-collapse: collapse;
}

.payListArea th {
  height: 55px;
  line-height: 55px;
  font-size: 14px;
  color: #fff;
  letter-spacing: .05em;
}

.payListArea tbody {
  border-bottom: 1px solid #dcdcdc;
}

.payListArea tbody.noLine {
  border-bottom: none;
}

.payListArea tbody tr:first-child td {
  padding-top: 20px;
}

.payListArea td {
  vertical-align: middle;
  padding-bottom: 20px;
  font-family: "Nunito", "微軟正黑體", sans-serif;
  font-size: 14px;
  color: #626262;
  letter-spacing: .05em;
  line-height: 1.8;
}

.payListArea .imgBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.payListArea .Img {
  width: 125px;
  height: 125px;
  margin-right: 45px;
}

.payListArea .Img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.payListArea .Txt a {
  display: block;
  color: #333;
}

.payListArea .Txt h3 {
  font-weight: 400;
  color: #333;
}

.payListArea .btn_remove {
  display: inline-block;
  width: 18px;
  height: 23px;
  color: #333;
}

.payListArea .toggleClose {
  position: absolute;
  bottom: 18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  margin-left: 12px;
  border-radius: 50%;
  background-color: #f5f7fa;
}

.payListArea .toggleClose:before,
.payListArea .toggleClose:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -1px;
  width: 14px;
  height: 2px;
  background-color: #edbc48;
}

.payListArea .toggleClose:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.payListArea .toggleClose:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.payListArea .toggleClose:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.payListArea .eventTitle {
  text-align: center;
}

.payTopArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 12px 0;
  background-color: #222;
}

.payTopArea ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}

.payTopArea li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  font-weight: 500;
  font-family: "Nunito", "微軟正黑體", sans-serif;
  color: #fff;
  text-align: center;
}

.payTopArea li:not(:first-child) {
  margin-top: 16px;
}

.payTopArea .price {
  font-size: 18px;
  letter-spacing: .075em;
}

.payTopArea .total {
  font-size: 14px;
  letter-spacing: .2em;
}

.payTopArea .toggleOpen {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 12px;
  border-radius: 50%;
  background-color: #fff;
}

.payTopArea .toggleOpen:before,
.payTopArea .toggleOpen:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -1px;
  width: 14px;
  height: 2px;
  background-color: #ef6632;
}

.payTopArea .toggleOpen:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.payTopArea .toggleOpen:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.payTopArea .toggleOpen.show:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.discountTotal {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: 25px;
  font-size: 14px;
  color: #626262;
  background-color: #fff;
}

.discountTotal.list {
  width: 100%;
  margin-bottom: 0;
  color: #fff;
  background-color: #222;
}

.discountTotal .icon-discount {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  fill: #edbc48;
}

.discountTotal .Txt {
  margin-right: 25px;
  letter-spacing: .15em;
}

.discountTotal .price {
  font-family: "Nunito", "微軟正黑體", sans-serif;
  letter-spacing: .075em;
}

.discountTotal .original {
  opacity: .7;
  margin-right: 10px;
  text-decoration: line-through;
}

.countItemBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 125px;
    height: 30px;
    border: 1px solid #ececec
}

.countItemBox.purchaseItemList {
    width:auto;
    height:auto;
}

.countItemBox .countBtn {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    background-color: #ef6632
}

.countItemBox .count {
    width: calc(100% - 60px);
    height: 30px;
    line-height: 30px;
    border: 1px solid #ececec;
    border-top: none;
    border-bottom: none;
    font-size: 15px;
    color: #959595;
    text-align: center;
    letter-spacing: .1em
}

.countItemBox .countLess:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -1px;
    width: 6px;
    height: 2px;
    background-color: #fff
}

.countItemBox .countAdd:before,.countItemBox .countAdd:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff
}

.countItemBox .countAdd:before {
    margin-left: -6px;
    margin-top: -1px;
    width: 12px;
    height: 2px
}

.countItemBox .countAdd:after {
    margin-left: -1px;
    margin-top: -6px;
    width: 2px;
    height: 12px
}

/**資料填寫**/
.infoArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.section {
  width: calc(50% - 18px);
  margin-bottom: 80px;
}

.section.full {
  width: 100%;
}

.section input[type="text"]:focus,
.section input[type="password"]:focus,
.section select:focus,
.section textarea:focus {
  outline: none;
  border-color: #95b1bf;
}

.section input[type="text"],
.section input[type="password"],
.section select {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e0e0e0;
  background: #FFF;
  font-size: 15px;
}

.section textarea {
  width: 100%;
  height: 100px;
  padding: 5px;
  border: 1px solid #e0e0e0;
}

.section .inner {
  height: 100%;
  padding: 50px 70px 0;
  background-color: #fff;
}

.section .subTitle {
  padding: 0 0 20px 70px;
}

.section .title {
  padding-bottom: 25px;
  font-size: 15px;
  color: #434343;
  letter-spacing: .05em;
}

.section .box {
  padding: 0 0 25px 0;
}

.memberBox .inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.memberBox .box {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.memberBox .half {
  width: 50%;
}

.section .radioSet {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.section .radioSet li {
  margin: 0 25px 10px 0;
}

.section .radioSet label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.section .radioSet.transport li {
  line-height: 50px;
}

.section input[type="radio"]+label {
  font-size: 14px;
  color: #626262;
  letter-spacing: .05em;
}

/*--radio--*/
input[type="radio"]+label {
  position: relative;
  cursor: pointer;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

input[type="radio"]+label span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  width: 25px;
  height: 25px;
  border: 1px solid #e7e7e7;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  border-radius: 50%;
}

input[type="radio"]+label span:before {
  content: '';
  position: absolute;
  top: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  left: 50%;
  margin-left: -6.5px;
  margin-top: -6.5px;
  width: 13px;
  height: 13px;
  background-color: #edbc48;
  border-radius: 50%;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.radio {
  display: none;
  position: relative;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.radio:checked+label {
  color: #edbc48;
}

.radio:checked+label span:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.section .note {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #f1f1f1;
  font-size: 12px;
  color: #959595;
  letter-spacing: .05em;
}

.section .code {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px;
}

.section .code ::-webkit-input-placeholder {
  /* Chrome */
  color: #c9c9c9;
}

.section .code :-ms-input-placeholder {
  /* IE 10+ */
  color: #c9c9c9;
}

.section .code ::-moz-placeholder {
  /* Firefox 19+ */
  color: #c9c9c9;
  opacity: 1;
}

.section .code :-moz-placeholder {
  /* Firefox 4 - 18 */
  color: #c9c9c9;
  opacity: 1;
}

.section .code .codeInput {
  width: calc(100% - 200px);
  margin-right: 30px;
}

.section .code #coupon {
  width: calc(100% - 200px);
  margin-right: 30px;
}

.section .code .point {
  font-size: 14px;
  color: #626262;
  letter-spacing: .05em;
}

.section .code .btn {
  border: none;
  width: 100%;
  max-width: 160px;
  padding: 16px;
  color: #fff;
  font-size: 14px;
  letter-spacing: .05em;
  background-color: #edbc48;
  cursor: pointer;
  margin-left: 15px;
}

.section .code .btn:focus {
  outline: none;
}

.section .code .btn:hover {
  background-color: #edbc48;
}

.section .code .btn.gray {
  background-color: #bababa;
}

.section label.same {
  /*同聯絡人*/
  cursor: pointer;
}

.section label.same:before {
  content: "\f096";
  margin-right: 5px;
  font-family: FontAwesome;
}

.section label.same.select:before {
  content: "\f046";
}

.section label.member_policy {
  cursor: pointer;
}

.section label.member_policy:before {
  content: "\f096";
  margin-right: 5px;
  font-family: FontAwesome;
}

.section label.member_policy.select:before {
  content: "\f046";
}

.inputList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.inputList .top {
  border-bottom: 1px solid #ececec;
  padding-bottom: 25px;
  letter-spacing: .1em;
}

.inputList .top a {
  color: #edbc48;
  text-decoration: underline;
}

.inputList>li {
  width: 50%;
  margin-bottom: 25px;
  font-size: 15px;
  color: #434343;
  letter-spacing: .05em;
}

.inputList>li.full {
  width: 100%;
}

.inputList>li.line {
  border-top: 1px solid #ececec;
  padding-top: 35px;
  margin-top: 10px;
}

.inputList .left,
.inputList .right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.inputList .left {
  margin-bottom: 12px;
}

.inputList em {
  margin-left: 3px;
  color: #edbc48;
}

.inputList input.small {
  /*width: 235px;*/
  margin-right: 30px;
}

.inputList .noteTxt {
  margin-top: 10px;
  font-size: 13px;
  color: #959595;
}

.inputList .method {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}

.inputList .invoiceBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.inputList .invoiceBox .radioSet,
.inputList .invoiceBox .invoice {
  width: 100%;
}

.inputList .invoiceBox [class^='g-'] {
  padding: 0 15px 0 0;
}

.inputList .invoiceBox .invoice {
  margin-top: 15px;
}

.inputList .invoiceBox .invoice li {
  display: none;
}

.inputList .timeBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.inputList .timIns {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.inputList .timIns:not(:last-child) {
  padding-right: 15px;
}

.errorNote {
  position: relative;
  font-size: 13px;
  color: #626262;
  letter-spacing: .05em;
}

.memberBox em {
  margin-left: 3px;
  color: #edbc48;
}

.errorNote .noteTxt {
  opacity: 0;
  pointer-events: none;
}

.errorNote .noteTxt.show {
  opacity: 1;
  pointer-events: auto;
}

.errorNote .noteTxt.yes {
  color: #7CB4AC;
}

.errorNote .noteTxt.no {
  color: #bf4712;
}

.error {
  border: 1px solid #bf4712 !important;
  -webkit-box-shadow: 0 0 10px #ff1717;
  box-shadow: 0 0 10px #ff1717;
}

.errorTxt {
  color: #ff1717;
}

/*總計*/
.totalArea li {
  width: 100%;
  padding: 0 25px;
}

.totalArea li:not(:first-child) {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #ececec;
}

.totalArea .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-family: "Nunito", "微軟正黑體", sans-serif;
  font-size: 15px;
  color: #434343;
  letter-spacing: .075em;
}

.totalArea .item:not(:first-child) {
  margin-top: 25px;
}

.totalArea .left {
  width: 60%;
}

.totalArea .right {
  width: 40%;
}

.totalArea .noteTxt {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  color: #959595;
  letter-spacing: .05em;
}

.totalArea .totalPrice {
  font-size: 20px;
  font-weight: 500;
}

.totalArea .red {
  color: #bf4712;
}

.listTotal {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 25px 20px 25px 0;
  border-bottom: 1px solid #dcdcdc;
}

.listTotal ul {
  width: 400px;
}

.listTotal li {
  width: 100%;
  padding: 0 25px;
}

.listTotal li:not(:first-child) {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #ececec;
}

.listTotal .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-family: "Nunito", "微軟正黑體", sans-serif;
  font-size: 15px;
  color: #434343;
  letter-spacing: .075em;
}

.listTotal .item:not(:first-child) {
  margin-top: 10px;
}

.listTotal .left {
  width: 60%;
}

.listTotal .right {
  width: 40%;
}

.listTotal .noteTxt {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  color: #959595;
  letter-spacing: .05em;
}

.listTotal .totalPrice {
  font-size: 20px;
  font-weight: 500;
}

.listTotal .red {
  color: #bf4712;
}

.discountNote {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: #ef6632;
}

/*按鈕區塊*/
.btnArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.btnArea.center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btnArea a {
  display: inline-block;
  width: 100%;
  max-width: 160px;
  padding: 15px 20px;
  font-size: 14px;
  color: #fff;
  letter-spacing: .05em;
  text-align: center;
  border: 1px solid #222;
  background-color: #222;
}

.btnArea a.bg {
  color: #fff;
  background-color: #222;
}

.btnArea a.bg:hover {
  color: #fff;
  background-color: #000;
  border: 1px solid #000;
}

.btnArea a.bg02 {
  color: #fff;
  background-color: #222;
  border: 1px solid #222;
}

.btnArea a.bg02:hover {
  color: #fff;
  background-color: #222;
}

.btnArea a:not(:first-child) {
  margin-left: 30px;
}

.btnArea p {
  margin-top: 5px;
  color: #d92047;
}

.btnArea02 {
  width: 100%;
  margin-top: 15px;
  text-align: center;
}

.btnArea02 p {
  margin-bottom: 40px;
  font-size: 14px;
  color: #626262;
  letter-spacing: .05em;
}

.btnArea02 .btn a {
  display: inline-block;
  width: 160px;
  height: 50px;
  line-height: 50px;
  margin: 0 16px;
  font-size: 14px;
  color: #fff;
  letter-spacing: .05em;
  color: #fff;
  background-color: #222;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btnArea02 .btn .light {
  color: #fff;
  background-color: #222;
}

.btnArea02 .btn .light:hover {
  color: #fff;
  background-color: #000;
}

.fixBox {
  position: relative;
  padding: 25px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
}

/*結帳完成*/
.orderStatus {
  /*感謝購物資訊*/
  line-height: 1.8;
  margin-bottom: 30px;
  font-size: 15px;
  color: #d92047;
}

.orderStatus b {
  font-size: 16px;
  color: #a58640;
}

.inforArea .formBox b {
  /*確定的靜態資料*/
  font-size: 15px;
  color: #5c5c5c;
}

.repayment {
  cursor: pointer;
  display: inline-block;
  padding: 0 5px;
  margin-left: 10px;
  font-size: 9pt;
  line-height: 2 !important;
  vertical-align: middle;
  color: #FFF !important;
  border-radius: 4px;
  outline: none;
}

.repayment.orange {
  background: #FFA724;
  border: 1px solid #e0a82f;
  text-shadow: 0 -1px #e0a82f;
}


.addPurchaseBox {
    padding-bottom: 40px
}

.addPurchaseBox .title {
    color: #626262;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 2px;
    text-indent: 2px
}

.addPurchaseBox .title::before {
    content: '\f06b';
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 60px;
    font-family: FontAwesome;
    color: #edbc48
}

.purchaseList {
    margin-top: 40px;
    margin-left: -15px;
    margin-right: -15px
}

.purchaseList .slick-slide {
    padding: 15px
}

.purchaseList .item {
    max-width: 355px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 20px;
    background-color: #fff;
    transition: all .5s;
}

.purchaseList .item:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1)
}

.purchaseList .Img {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 250px
}

.purchaseList .Img img {
    max-height: 200px;
    display: block;
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.purchaseList h3 {
    display: block;
    font-family: "Noto Sans TC","微軟正黑體",sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis   
}
 .purchaseList h3 a {
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #b7b5b6;
    font-family: "Noto Sans TC","微軟正黑體",sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.purchaseList .bottomBox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px
}

.purchaseList .price {
    color: #694e3d;
    font-size: 20px;
}

.purchaseList .price::before {
    content: 'NT.';
    display: inline-block;
    font-size: 15px;
    margin-right: 5px
}


@media (min-width: 1231px) {
  .btnArea a:hover {
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
  }

  .btnArea02 .btn a:hover {
    color: #edbc48;
    background-color: #fff;
  }

}

@media (max-width: 1230px) {
  .section .inner {
    padding: 40px 40px 0;
  }

  .section .subTitle {
    padding: 0 0 20px 40px;
  }

  .sectionPayok01 {
    padding: 20px 50px 30px;
  }

  .sectionPayok02 {
    padding: 50px 50px 60px;
  }

}

@media (max-width: 1180px) {
  .btnArea a:last-child {
    margin-left: 12px;
  }

}

@media (max-width: 1023px) {
  .payListArea .payListInner {
    padding: 0 20px;
  }

  .titleTotal {
    padding: 0 0 15px 20px;
  }

  .sectionPayok {
    padding: 30px 20px;
  }

}

/*960*/
@media screen and (max-width: 960px) {
  .infoArea {
    margin: 0;
  }

  .fixBox {
    position: static;
  }

  .section {
    width: 100%;
  }

  .step li {
    padding: 0 20px;
  }

  .payListArea .Img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
  }

  .payokList>li .rightItem {
    padding-left: 50px;
  }

}

/*960 end*/
@media (max-width: 767px) {
  .step {
    margin-bottom: 30px;
  }

  .step li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }

  .step .icon {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .payListArea tr {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .payListArea tr:not(:first-child) {
    border-top: 1px solid #dcdcdc;
  }

  .payListArea thead th:first-child {
    width: 100%;
  }

  .payListArea thead th:not(:first-child) {
    display: none;
  }

  .payListArea tbody tr {
    padding: 8px 0;
  }

  .payListArea td {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    padding: 8px 0 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .payListArea td:before {
    content: attr(data-text);
  }

  .payListArea td:first-child {}

  .payListArea td.del {
    position: absolute;
    right: 0;
    top: 20px;
    width: 30px;
    height: 30px;
  }

  .payokList>li {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .payokList>li .no {
    border-right: none;
  }

  .payokListIns li {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .payokListIns .item {
    width: 100%;
    padding: 20px 0;
    margin-bottom: 0;
    border-top: 1px solid #f5f5f5;
  }

  .payokList01>li {
    padding: 0;
  }

  .payokList01>li .no .left {
    width: 80px;
  }

  .payokList01>li .no .right {
    width: calc(100% - 80px);
  }

  .payokList01>li>.item {
    padding: 20px 0;
  }

  .payokList01>li>.invoice {
    border-bottom: 1px solid #f5f5f5;
  }

  .payokList01>li .leftItem {
    width: 100%;
  }

  .payokList01>li .rightItem {
    width: 100%;
    padding-left: 0;
  }

  .payokList02>li {
    padding: 0;
    border-top: none;
  }

  .payokList02>li .leftItem,
  .payokList02>li .rightItem {
    width: 100%;
  }

  .payokList02>li .rightItem {
    padding-left: 0;
  }

  .payokList02>li .item {
    padding: 20px 0;
    border-top: 1px solid #f5f5f5;
  }

  .memberBox .half {
    width: 100%;
  }

}

/*640*/
@media screen and (max-width: 640px) {
  .inputList>li {width: 100%;}
  .step i {
    margin-right: 5px;
    font-size: 28px;
  }

  .step .Txt p {
    font-size: 13px;
  }

  .section .inner {
    padding: 20px 20px 0;
  }

  .section .subTitle {
    padding: 0px 0 20px 20px;
  }

  .totalArea li {
    padding: 0;
  }

  .inputList .right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .inputList .radioSet,
  .inputList .noteTxt {
    margin-top: 12px;
  }

  .inputList input.small {
    width: 100%;
    margin-right: 0;
  }

  .inputList .timIns {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    width: 100%;
    padding-right: 0 !important;
    margin-bottom: 12px;
  }

  .inputList>li.half {
    width: 100%;
  }

  .inputList .invoiceBox [class^='g-'] {
    padding: 0 0 15px 0;
  }

  .addressList input[name="data_zip"],
  .addressList input[name="data_szip"],
  .addressList select[name="data_city"],
  .addressList select[name="data_scity"],
  .addressList select[name="data_town"],
  .addressList select[name="data_stown"] {
    width: 100% !important;
    margin: 0 0 10px 0;
  }

}

@media (max-width: 767px) {
  .section .code {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .section .code .codeInput {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .section .code #coupon {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .section .code .btn {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 12px;
  }
}

/*640end*/
@media (max-width: 480px) {

  .btnArea {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .btnArea a {
    max-width: 100%;
    margin-bottom: 5px;
  }

  .btnArea a:not(:first-child) {
    margin-left: 0;
  }

  .btnArea a:last-child {
    margin-left: 0;
    margin-top: 12px;
  }

  .discountTotal {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .discountTotal .Txt {
    width: calc(100% - 35px);
    margin-right: 0;
  }

  .discountTotal .price {
    margin-top: 12px;
  }

  .payokTitle em {
    font-size: 25px;
  }

  .payokTitle h2 {
    font-size: 15px;
  }

  .step li {
    padding: 0 5px;
  }

  .step .icon {
    width: 50px;
    height: 50px;
  }

  .step .icon-step01 {
    width: 28px;
    height: 28px;
  }

  .step .icon-step02 {
    width: 26px;
    height: 26px;
  }

  .step .icon-step03 {
    width: 28px;
    height: 28px;
  }

  .step .Txt strong {
    font-size: inherit;
  }

  .step .Txt b {
    font-size: inherit;
  }

  .btnArea02 .btn a {
    width: 100%;
    margin: 0;
  }

  .btnArea02 .btn a:not(:first-child) {
    margin-top: 12px;
  }

}

/*--title--*/
.title01 {
  font-weight: 400;
  font-size: 20px;
  color: #fff;
  letter-spacing: .05em;
}

/*--title--*/
.title01.title22 {
  font-weight: 400;
  font-size: 20px;
  color: #333;
  letter-spacing: .05em;
}