@charset "UTF-8";
/* CSS Document */
.purchaseList .Img, .purchaseList .item, .tagList li, .countItemBox .count, .countItemBox, .fixBox, .listTotal li, .listTotal, .totalArea li, .inputList .timIns, .memberBox .box, .section, .payokList > li .rightItem, .step li {
  box-sizing: border-box;
}

.purchaseList .item, .errorNote .noteTxt, .payTopArea .toggleOpen:before, .payTopArea .toggleOpen:after, .payTopArea .toggleOpen, .payListArea .toggleClose {
  transition: all 0.5s ease;
}

@keyframes btnAni {
  20% {
    background-color: rgba(255, 153, 0, 0.3);
  }
  100% {
    transform: scale(1.3);
    background-color: transparent;
  }
}
/*步驟*/
.step {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 30px 0 20px;
}
.step li {
  display: flex;
  align-items: center;
  padding: 0 35px;
}
.step li.current .icon {
  background-color: #ff9900;
}
.step li.current .icon:after {
  opacity: 1;
  animation: btnAni 1.5s 0.2s infinite cubic-bezier(0.66, 0, 0, 1);
}
.step li.current .Txt {
  color: #553817;
}
.step .icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  margin-right: 13px;
  border-radius: 50%;
  background-color: #ac9a85;
}
.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(255, 153, 0, 0.4);
}
.step svg {
  fill: #fff;
}
.step .icon-step01 {
  width: 36px;
  height: 36px;
}
.step .icon-step02 {
  width: 35px;
  height: 35px;
  transform: translateX(4px);
}
.step .icon-step03 {
  width: 32px;
  height: 32px;
}
.step .Txt {
  color: #ac9a85;
}
.step .Txt strong {
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
}
.step .Txt b {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.075em;
}
.step .Txt p {
  font-size: 14px;
  letter-spacing: 0.15em;
}

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

.payokTitle em {
  margin-bottom: 0;
  font-size: 28px;
  letter-spacing: 0.07em;
}
.payokTitle em:after {
  display: none;
}
.payokTitle h2 {
  font-size: 18px;
  letter-spacing: 0.075em;
}

.sectionPayok .title01 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 25px;
  color: #553817;
}

.payokList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.payokList > li {
  display: flex;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #f4e9da;
}
.payokList > li:last-child {
  border-bottom: 1px solid #f4e9da;
}
.payokList > li .item {
  display: flex;
  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;
  letter-spacing: 0.05em;
}
.payokList > li .right {
  width: calc(100% - 110px);
  font-size: 14px;
  letter-spacing: 0.075em;
}

.payokList01 > li:first-child {
  padding-top: 25px;
  border-top: none;
}
.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 #f4e9da;
}
.payokList01 > li .no .left, .payokList01 > li .no .right {
  width: 100%;
  margin-bottom: 15px;
}

.payokListIns {
  width: 100%;
}
.payokListIns li {
  display: flex;
}
.payokListIns .item {
  width: 50%;
  margin-bottom: 12px;
}

/**結帳說明**/
.noteBox .textEditor {
  padding: 15px 0;
}

.titleTotal {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fff9f2;
}
@media (min-width: 1181px) {
  .titleTotal {
    margin-left: -40px;
    margin-right: -30px;
    padding-left: 40px;
    padding-right: 30px;
  }
}
@media (max-width: 1180px) {
  .titleTotal {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.titleTotal b {
  font-weight: 500;
  color: #ff9900;
}

/**清單表格**/
.payListArea {
  padding-bottom: 40px;
}
.payListArea.listPage .payListInner:before {
  background-color: #f1f1f1;
}
.payListArea.payokPage .payListInner:before {
  display: none;
}
.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;
}
.payListArea .payListInner#paycar_list th {
  color: #ff9900;
}
.payListArea .toggleBox {
  position: relative;
  padding-bottom: 65px;
  background-color: #fff;
}
.payListArea table {
  width: 100%;
  border-collapse: collapse;
}
.payListArea .imgBox {
  display: flex;
  align-items: center;
}
.payListArea .Img {
  flex-shrink: 0;
  width: 120px;
  margin-right: 20px;
}
.payListArea .Img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .payListArea .Txt {
    padding-right: 30px;
  }
}
.payListArea .Txt a {
  display: block;
}
.payListArea .Txt h3 {
  font-weight: 400;
}
.payListArea .btn_remove {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 23px;
  background: url("../images/icon-garbage.svg") no-repeat;
  background-size: contain;
}
.payListArea .toggleClose {
  position: absolute;
  bottom: 18px;
  left: 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: #ff9900;
}
.payListArea .toggleClose:before {
  transform: rotate(45deg);
}
.payListArea .toggleClose:after {
  transform: rotate(-45deg);
}
.payListArea .toggleClose:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.payTopArea {
  display: flex;
  align-items: center;
  padding: 12px 0;
  background-color: #ff9900;
}
.payTopArea ul {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.payTopArea li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.payTopArea li:not(:first-child) {
  margin-top: 16px;
}
.payTopArea .price {
  font-size: 18px;
  letter-spacing: 0.075em;
}
.payTopArea .total {
  font-size: 14px;
  letter-spacing: 0.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: #ff9900;
}
.payTopArea .toggleOpen:after {
  transform: rotate(180deg);
}
.payTopArea .toggleOpen:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.payTopArea .toggleOpen.show:after {
  transform: rotate(90deg);
}

.discountTotal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 15px;
}
.discountTotal .icon-discount {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  fill: #ff9900;
}
.discountTotal .Txt {
  margin-right: 25px;
  letter-spacing: 0.15em;
}
.discountTotal .price {
  letter-spacing: 0.075em;
}
.discountTotal .original {
  opacity: 0.7;
  margin-right: 10px;
  text-decoration: line-through;
}
.discountTotal .tip {
  width: 100%;
  text-align: center;
}

.tip {
  font-size: 13px;
  font-style: italic;
  color: red;
}

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

.section {
  /*width: calc(50% - 18px);*/
  width: 100%;
  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;
}
.section input[type=text], .section input[type=password] {
  width: 100%;
  background-color: #fff;
}
.section select {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #f4e9da;
  border-radius: 4px;
  font-size: 14px;
  font-family: "Open Sans", "Noto Sans TC", "微軟正黑體", "Helvetica", sans-serif;
  color: #553817;
  background-color: #fff;
}
@media (max-width: 640px) {
  .section .addressList select,
.section .addressList input[type=text] {
    width: 100% !important;
  }
  .section .addressList select {
    margin-bottom: 10px;
  }
}
.section textarea {
  width: 100%;
  height: 100px;
  padding: 5px;
  border: 1px solid #f4e9da;
  border-radius: 4px;
  background-color: #fff;
}
.section .inner {
  height: 100%;
  border: 1px solid #f4e9da;
  background-color: #fff9f2;
}
@media (min-width: 641px) {
  .section .inner {
    padding: 30px 30px 0;
  }
}
@media (max-width: 640px) {
  .section .inner {
    padding: 30px 20px 0;
  }
}
.section .subTitle {
  padding: 0;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
  color: #553817;
}
.section .title {
  padding-bottom: 25px;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.section .box + .box {
  padding: 20px 0 0;
  margin-top: 20px;
  border-top: 1px solid #f4e9da;
}
.section .radioSet {
  display: flex;
  flex-wrap: wrap;
}
.section .radioSet li {
  margin: 0 25px 10px 0;
}
.section .radioSet label {
  display: flex;
  align-items: center;
}
.section input[type=radio] + label {
  font-size: 14px;
  letter-spacing: 0.05em;
}
.section .note {
  margin-top: 5px;
  font-size: 14px;
  color: #ac9a85;
}
.section .code {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.section .code .codeInput {
  width: calc(100% - 200px);
  margin-right: 30px;
}
.section .code .point {
  font-size: 14px;
  letter-spacing: 0.05em;
}
.section .code .btn {
  cursor: pointer;
}
.section .code .btn.gray:not(:hover) {
  border-color: #bababa;
  background-color: #bababa;
}
.section label.same {
  /*同聯絡人*/
  cursor: pointer;
}
.section label.same:before {
  content: "";
  margin-right: 5px;
  font-family: FontAwesome;
}
.section label.same.select:before {
  content: "";
}
.section label.member_policy {
  cursor: pointer;
}
.section label.member_policy::before {
  content: "";
  margin-right: 5px;
  font-family: FontAwesome;
}
.section label.member_policy.select::before {
  content: "";
}

@media (max-width: 480px) {
  .section .code .btn {
    margin-top: 10px;
  }
}
.memberBox .inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.memberBox .box {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
.memberBox .half {
  width: 50%;
}
.memberBox em {
  margin-left: 3px;
  color: #ff9900;
}

.inputList {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.inputList .top {
  border-bottom: 1px solid #f4e9da;
  padding-bottom: 25px;
  letter-spacing: 0.1em;
}
.inputList .top a {
  color: #ff9900;
  text-decoration: underline;
}
.inputList > li {
  width: 100%;
  margin-bottom: 25px;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.inputList > li.half {
  width: 50%;
}
.inputList > li.line {
  border-top: 1px solid #f4e9da;
  padding-top: 35px;
  margin-top: 10px;
}
.inputList .left, .inputList .right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.inputList .left {
  margin-bottom: 12px;
}
.inputList em {
  margin-left: 3px;
  color: #ff9900;
}
.inputList input.small {
  width: 235px;
  margin-right: 30px;
}
.inputList .noteTxt {
  padding: 5px 0;
  font-size: 14px;
  color: #ac9a85;
}
.inputList .method {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}
.inputList .invoiceBox {
  display: flex;
  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: flex;
  flex-wrap: wrap;
}
.inputList .timIns {
  flex: 1;
}
.inputList .timIns:not(:last-child) {
  padding-right: 15px;
}

.errorNote {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.errorNote .noteTxt {
  left: 0;
  top: 10px;
  opacity: 0;
  pointer-events: none;
}
.errorNote .noteTxt.show {
  opacity: 1;
  pointer-events: auto;
}
.errorNote .noteTxt.yes {
  color: #7CB4AC;
}
.error {
  box-shadow: 0 0 10px #ff1717;
}

/*總計*/
.totalArea li {
  width: 100%;
  padding: 0;
}
.totalArea li:not(:first-child) {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f4e9da;
}
.totalArea .item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
  letter-spacing: 0.075em;
}
.totalArea .item:not(:first-child) {
  margin-top: 10px;
}
.totalArea .left {
  width: 60%;
}
.totalArea .right {
  width: 40%;
}
.totalArea .noteTxt {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  color: #959595;
  letter-spacing: 0.05em;
}
.totalArea .totalPrice {
  font-size: 20px;
  font-weight: 500;
}
.listTotal {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  background-color: #fff9f2;
}
@media (min-width: 961px) {
  .listTotal {
    padding: 25px 20px;
  }
}
@media (max-width: 960px) {
  .listTotal {
    padding: 20px;
  }
}
.listTotal ul {
  width: 100%;
}
@media (min-width: 961px) {
  .listTotal ul {
    max-width: 400px;
  }
}
.listTotal li {
  width: 100%;
}
@media (min-width: 961px) {
  .listTotal li {
    padding: 0 25px;
  }
}
.listTotal li:not(:first-child) {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f4e9da;
}
.listTotal li:last-child .right {
  font-weight: bold;
}
.listTotal .item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
  letter-spacing: 0.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: #ac9a85;
  letter-spacing: 0.05em;
}
.listTotal .totalPrice {
  font-size: 20px;
  font-weight: 500;
}
.discountNote {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.8;
}

/*按鈕區塊*/
.btnArea {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.btnArea .btn {
  margin-top: 10px;
}
.btnArea p {
  margin-top: 5px;
  color: #d92047;
}

.btnArea02 {
  width: 100%;
  padding-bottom: 20px;
  text-align: center;
}
.btnArea02 p {
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.btnArea02 .btn a {
  display: inline-block;
  width: 160px;
  height: 50px;
  line-height: 50px;
  margin: 0 16px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.05em;
  background-color: #ff9900;
  border: 1px solid #ff9900;
}
.btnArea02 .btn a:hover {
  color: #ff9900;
  background-color: #fff;
}
.btnArea02 .btn .light {
  color: #ff9900;
  background-color: #fff;
}
.btnArea02 .btn .light:hover {
  color: #fff;
  background-color: #ff9900;
}

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

.countItemBox {
  display: flex;
  width: 125px;
  height: 30px;
  border: 1px solid #f4e9da;
}
.countItemBox .countBtn {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background-color: #b19e88;
}
.countItemBox .count {
  width: calc(100% - 60px);
  height: 30px;
  line-height: 30px;
  border: 1px solid #f4e9da;
  border-top: none;
  border-bottom: none;
  font-size: 15px;
  color: #959595;
  text-align: center;
  letter-spacing: 0.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;
}

.tagList {
  border-bottom: none;
}
.tagList li {
  min-width: 175px;
  line-height: 1.8;
  border: 1px solid rgba(215, 164, 107, 0.5);
  border-radius: 4px;
  color: #d7a46b;
  text-align: center;
  background-color: #fff3e1;
  cursor: pointer;
}
.tagList li.current {
  border-color: #ac9a85;
  color: #fff;
  background-color: #ac9a85;
}

.iconTicket {
  position: relative;
  padding-left: 30px;
}
.iconTicket::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
  font-size: 23px;
  font-family: FontAwesome;
  color: #b39e88;
}

.addPurchaseBox {
  padding-bottom: 40px;
}
.addPurchaseBox .title {
  color: #ff9900;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
  text-indent: 2px;
}
.addPurchaseBox .title::before {
  content: "";
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 60px;
  font-family: FontAwesome;
  color: #b19e88;
}

.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;
}
.purchaseList .item:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.purchaseList .Img {
  flex-shrink: 0;
  display: flex;
  justify-content: 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 a {
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #b7b5b6;
  font-family: "Open Sans", "Noto Sans TC", "微軟正黑體", "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.purchaseList .bottomBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
.purchaseList .price {
  color: #ff9900;
  font-size: 20px;
}
.purchaseList .price::before {
  content: "NT.";
  display: inline-block;
  font-size: 15px;
  margin-right: 5px;
}
.purchaseList .countItemBox {
  width: auto;
}

#coupon {
  letter-spacing: 0.1em;
}

/*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;
    margin-right: 15px;
  }

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

  .purchaseList .Img {
    height: auto;
  }
  .purchaseList .Img img {
    max-height: 250px;
  }
}
/*960 end*/
@media (max-width: 767px) {
  .step li {
    flex-direction: column;
    text-align: center;
  }
  .step .icon {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .payListArea tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }
  .payListArea thead th {
    padding: 10px;
  }
  .payListArea thead th:first-child {
    width: 100%;
  }
  .payListArea thead th:not(:first-child) {
    display: none;
  }
  .payListArea td {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
  }
  .payListArea td:before {
    content: attr(data-text);
  }
  .payListArea td.del {
    position: absolute;
    right: 0;
    top: 20px;
    width: 30px;
    height: 30px;
    padding: 0;
  }

  .payokList > li {
    flex-wrap: wrap;
  }
  .payokList > li .no {
    border-right: none;
  }
  .payokListIns li {
    flex-wrap: wrap;
  }
  .payokListIns .item {
    width: 100%;
    margin-bottom: 0;
    border-top: 1px solid #f4e9da;
  }

  .payokList01 > li {
    padding: 0;
  }
  .payokList01 > li .no.item {
    padding: 0;
  }
  .payokList01 > li .no.item + .item {
    padding-bottom: 0;
  }
  .payokList01 > li .no .left {
    width: 80px;
    margin-bottom: 0;
  }
  .payokList01 > li .no .right {
    width: calc(100% - 80px);
    margin-bottom: 0;
  }
  .payokList01 > li .item {
    padding: 20px 0;
  }
  .payokList01 > li > .invoice {
    border-bottom: 1px solid #f4e9da;
  }
  .payokList01 > li .leftItem {
    width: 100%;
  }
  .payokList01 > li .rightItem {
    width: 100%;
  }

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

  .memberBox .half {
    width: 100%;
  }
}
/*640*/
@media screen and (max-width: 640px) {
  .step i {
    margin-right: 5px;
    font-size: 28px;
  }
  .step .Txt p {
    font-size: 13px;
  }

  .totalArea li {
    padding: 0;
  }

  .inputList .right {
    flex-direction: column;
    align-items: flex-start;
  }
  .inputList .radioSet, .inputList .noteTxt {
    margin-top: 12px;
  }
  .inputList input.small {
    width: 100%;
    margin-right: 0;
  }
  .inputList .timIns {
    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;
  }
}
/*640end*/
@media (max-width: 480px) {
  .section .code {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .section .code .codeInput {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .discountTotal {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
  }
  .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;
  }
}
.mainColor {
  color: #ff9900 !important;
}