@charset "UTF-8";
/* CSS Document */
.mainArea {
 padding-top: 150px;
}
@media (max-width: 1180px) {
 .mainArea {
  padding-top: 30px;
 }
}

.stepListBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 margin-bottom: 60px;
}
@media (max-width: 767px) {
 .stepListBox {
  margin-bottom: 20px;
 }
}

.stepList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
     -ms-flex-pack: justify;
         justify-content: space-between;
 margin-left: auto;
 margin-right: auto;
 margin-left: -60px;
 margin-right: -60px;
}
@media (max-width: 640px) {
 .stepList {
  margin-left: -20px;
  margin-right: -20px;
 }
}
@media (max-width: 480px) {
 .stepList {
  margin-left: -10px;
  margin-right: -10px;
 }
}
.stepList li {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 width: 230px;
 padding-left: 60px;
 padding-right: 60px;
}
@media (max-width: 640px) {
 .stepList li {
  width: 170px;
  padding-left: 20px;
  padding-right: 20px;
 }
}
@media (max-width: 480px) {
 .stepList li {
  width: 90px;
  padding-left: 10px;
  padding-right: 10px;
 }
}
.stepList li:not(:last-child)::before {
 content: "";
 position: absolute;
 right: -10.5px;
 top: 50px;
 width: 21px;
 height: 11px;
 background-image: url("../images/order/stepArrow.png");
}
@media (max-width: 480px) {
 .stepList li:not(:last-child)::before {
  display: none;
 }
}
@media (min-width: 1181px) {
 .stepList li:hover .icon {
  background-color: #5a4b41;
  color: #fff;
 }
 .stepList li:hover .Txt .title {
  color: #5a4b41;
 }
}
.stepList li.current .icon {
 background-color: #de6500;
 color: #fff;
}
.stepList li.current .Txt .title {
 color: #de6500;
}
.stepList .icon {
 position: relative;
 z-index: 0;
 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: 105px;
 height: 105px;
 background-color: #ececec;
 border-radius: 50%;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
@media (max-width: 640px) {
 .stepList .icon {
  width: 70px;
  height: 70px;
 }
}
.stepList .icon-step01 {
 width: 34px;
 height: 35px;
}
.stepList .icon-step02 {
 width: 30px;
 height: 37px;
}
.stepList .icon-step03 {
 width: 39px;
 height: 28px;
}
.stepList .Txt {
 padding-top: 22px;
 text-align: center;
}
.stepList .title {
 padding-bottom: 3px;
 letter-spacing: 0.05em;
 color: #5f5f5f;
}
@media (max-width: 480px) {
 .stepList .title {
  font-size: 14px;
 }
}
.stepList .step {
 text-transform: uppercase;
 font-size: 14px;
 color: #de6500;
}
@media (max-width: 480px) {
 .stepList .step {
  font-size: 13px;
 }
}

.payListOutBox .fullBox {
 width: 100%;
 padding-left: 20px;
 padding-right: 20px;
}
.payListOutBox .payListBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 margin-left: -20px;
 margin-right: -20px;
 margin-bottom: 40px;
}
.payListOutBox .payListBox.line {
 border-top: 2px solid #b4b4b4;
 padding-top: 25px;
}
.payListOutBox .halfBox {
 width: 50%;
 padding-left: 20px;
 padding-right: 20px;
 margin-left: auto;
}
@media (max-width: 960px) {
 .payListOutBox .halfBox {
  width: 100%;
 }
}
.payListOutBox .box {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 border-bottom: 1px solid #dcdcdc;
 padding: 30px;
 background-color: #f5f5f5;
}
@media (max-width: 480px) {
 .payListOutBox .box {
  padding: 15px;
 }
}
.payListOutBox .title {
 color: #000;
}
.payListOutBox .radioSet {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 margin-left: 10px;
}
.payListOutBox .radioSet li {
 margin-right: 15px;
}
.payListOutBox .note {
 width: 100%;
 padding-top: 12px;
 line-height: 1.6;
}
.payListOutBox .listBox .inner {
 padding: 30px;
 background-color: #f5f5f5;
}
@media (max-width: 1280px) {
 .payListOutBox .listBox .inner {
  padding: 20px;
 }
}
@media (max-width: 480px) {
 .payListOutBox .listBox .inner {
  padding: 15px;
 }
}
.payListOutBox .listBox .inner:not(:last-child) {
 border-bottom: 1px solid #d5d5d5;
}
.payListOutBox .subTitle {
 margin-bottom: 20px;
 font-size: 19px;
 letter-spacing: 0.05em;
 color: #000;
}
.payListOutBox .inputList > li {
 width: 100%;
 margin-bottom: 12px;
}
.payListOutBox .inputList em {
 margin-left: 3px;
 color: #a62627;
}
.payListOutBox .inputList .left {
 width: 100%;
 margin-bottom: 10px;
 color: #373737;
}
.payListOutBox .inputList .right {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
.payListOutBox .inputList .code {
 width: 100%;
}
.payListOutBox .inputList .noteTxt {
 width: 100%;
 padding: 15px;
 line-height: 1.6;
 margin-top: 15px;
 background-color: #e7e7e7;
}
.payListOutBox .inputList .full {
 width: 100%;
}
.payListOutBox .addressList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 width: 100%;
}
.payListOutBox .addressList .full {
 width: 100%;
}
.payListOutBox .addressList .full input {
 width: 100%;
}
.payListOutBox .addressList select,
.payListOutBox .addressList input[type=text] {
 margin-bottom: 10px;
}
.payListOutBox .addressList input[name=data_m_addr] {
 width: 100%;
}
.payListOutBox input[type=text],
.payListOutBox input[type=password] {
 width: 100%;
 height: 42px;
 padding-left: 20px;
 padding-right: 20px;
 border: 1px solid #d5d5d5;
 font-family: "微軟正黑體";
}
.payListOutBox input[type=text].full,
.payListOutBox input[type=password].full {
 width: 100%;
}
.payListOutBox input[type=text].small,
.payListOutBox input[type=password].small {
 width: 235px;
 margin-right: 10px;
}
.payListOutBox select {
 padding-left: 20px;
 padding-right: 20px;
 margin-right: 12px;
 height: 42px;
 border: 1px solid #d5d5d5;
 font-family: "微軟正黑體";
}
.payListOutBox textarea {
 width: 100%;
 height: 100px;
 padding: 10px;
 border: 1px solid #d5d5d5;
 font-family: "微軟正黑體";
}
.payListOutBox .same {
 cursor: pointer;
}
.payListOutBox .same::before {
 content: "\f096";
 margin-right: 5px;
 font-family: FontAwesome;
}
.payListOutBox .same.select::before {
 content: "\f046";
}
.payListOutBox .member_policy {
 cursor: pointer;
}
.payListOutBox .member_policy::before {
 content: "\f096";
 margin-right: 5px;
 font-family: FontAwesome;
}
.payListOutBox .member_policy.select::before {
 content: "\f046";
}

.payokListBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 margin-left: -20px;
 margin-right: -20px;
}
.payokListBox .listBox {
 width: 50%;
 padding-left: 20px;
 padding-right: 20px;
}
.payokListBox .listBox.full {
 width: 100%;
}
@media (max-width: 960px) {
 .payokListBox .listBox {
  width: 100%;
 }
}

.invoiceList {
 width: 100%;
}

.invoice li {
 display: none;
}

.couponText {
 padding-top: 5px;
 padding-bottom: 5px;
 color: #bb1b21;
}

.payBtnStyle {
 padding-left: 12px;
 padding-right: 12px;
 height: 42px;
 color: #fff;
 font-size: 14px;
 letter-spacing: 0.05em;
 background-color: #929292;
 border: none;
 cursor: pointer;
}
.payBtnStyle.red {
 background-color: #bb1b21;
}

.couponBox {
 width: 100%;
}
.couponBox .codeItem {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
}
@media (max-width: 640px) {
 .couponBox .codeItem {
  -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;
 }
}
.couponBox .codeItem .title {
 width: 140px;
 padding-right: 30px;
 font-size: 14px;
 letter-spacing: 0.05em;
 color: #373737;
}
@media (max-width: 640px) {
 .couponBox .codeItem .title {
  width: 100%;
  padding-right: 0;
  padding-bottom: 10px;
 }
}
.couponBox .codeItem .title,
.couponBox .codeItem .button {
 -ms-flex-negative: auto;
     flex-shrink: auto;
}
.couponBox .codeItem .button {
 padding-left: 10px;
}
@media (max-width: 640px) {
 .couponBox .codeItem .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-left: 0;
 }
}
@media (max-width: 640px) {
 .couponBox .codeItem .payBtnStyle {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
 }
}
.couponBox .codeItem .input {
 -webkit-box-flex: 1;
     -ms-flex-positive: 1;
         flex-grow: 1;
}
@media (max-width: 640px) {
 .couponBox .codeItem .input {
  width: 100%;
  padding-bottom: 10px;
 }
}

.payListArea {
 width: 100%;
 padding-bottom: 40px;
}
.payListArea.listPage th {
 color: #000;
}
.payListArea.listPage .payListInner {
 -webkit-box-shadow: none;
         box-shadow: none;
 padding-right: 25px;
}
.payListArea.listPage .payListInner .toggleStyle {
 display: none;
}
.payListArea.listPage .payListInner::before {
 background-color: #ececec;
}
.payListArea.listPage .discountListBox {
 -webkit-box-shadow: none;
         box-shadow: none;
 padding-right: 25px;
}
.payListArea.payokPage .payListInner:before {
 display: none;
}
.payListArea.payokPage th {
 border: 1px solid #ececec;
 border-right: none;
 border-left: none;
 text-align: left;
 color: #de6500;
}
.payListArea.payokPage th:first-child {
 padding-left: 25px;
}
.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;
 margin-bottom: 25px;
 padding-left: 25px;
 padding-right: 45px;
 background-color: #fff;
 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 960px) {
 .payListArea .payListInner {
  padding-left: 20px;
  padding-right: 20px;
 }
}
.payListArea .payListInner:before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 z-index: -1;
 width: 100%;
 height: 42px;
 background-color: #de6500;
}
.payListArea .payListInner#paycar_list th {
 color: #a62627;
}
.payListArea .discountListBox {
 position: relative;
 z-index: 0;
 margin-bottom: 25px;
 padding-top: 20px;
 padding-left: 25px;
 padding-right: 45px;
 background-color: #fff;
 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 960px) {
 .payListArea .discountListBox {
  padding-left: 20px;
  padding-right: 20px;
 }
}
.payListArea .discountListBox .discountList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 padding-bottom: 20px;
}
@media (max-width: 960px) {
 .payListArea .discountListBox .discountList {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
 }
}
.payListArea .discountListBox .discountList .text {
 width: 70%;
}
@media (max-width: 960px) {
 .payListArea .discountListBox .discountList .text {
  width: 100%;
 }
}
.payListArea .discountListBox .discountList .text .title {
 display: inline;
 margin-right: 20px;
}
@media (max-width: 960px) {
 .payListArea .discountListBox .discountList .text .title {
  display: block;
  margin-right: 0;
  margin-bottom: 10px;
 }
}
.payListArea .discountListBox .discountList .text .title span {
 display: inline-block;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 10px;
 padding-right: 10px;
 letter-spacing: 0.05em;
 color: #FFF;
 background-color: #838383;
 border-radius: 15px;
}
@media (max-width: 960px) {
 .payListArea .discountListBox .discountList .text .title span {
  margin-right: 0;
 }
}
.payListArea .discountListBox .discountList .text .note {
 display: inline;
 margin-right: 20px;
}
@media (max-width: 960px) {
 .payListArea .discountListBox .discountList .text .note {
  margin-right: 0;
  margin-bottom: 10px;
 }
}
.payListArea .discountListBox .discountList .price {
 width: 30%;
 text-align: right;
 font-size: 16px;
 padding-left: 10px;
 padding-right: 10px;
}
@media (max-width: 960px) {
 .payListArea .discountListBox .discountList .price {
  width: 100%;
 }
}
.payListArea .toggleBox {
 position: relative;
 padding-bottom: 65px;
 background-color: #fff;
}
.payListArea table {
 width: 100%;
 border-collapse: collapse;
}
.payListArea tr:not(:last-child) {
 border-bottom: 1px solid #d5d5d5;
}
@media (max-width: 960px) {
 .payListArea tr {
  padding-top: 10px;
  padding-bottom: 10px;
 }
}
.payListArea th {
 height: 42px;
 line-height: 42px;
 font-size: 14px;
 color: #fff;
 letter-spacing: 0.05em;
 font-weight: 400;
}
@media (max-width: 960px) {
 .payListArea th:not(:first-child) {
  display: none;
 }
}
.payListArea tbody {
 border-bottom: 1px solid #dcdcdc;
}
.payListArea tbody tr:first-child td {
 padding-top: 20px;
}
@media (max-width: 960px) {
 .payListArea tbody tr:first-child td {
  padding-top: 10px;
 }
}
@media (max-width: 960px) {
 .payListArea tbody tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
 }
}
.payListArea td {
 vertical-align: middle;
 padding-top: 20px;
 padding-bottom: 20px;
 font-size: 16px;
 letter-spacing: 0.05em;
 color: #000;
 line-height: 1.8;
}
@media (max-width: 960px) {
 .payListArea td {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
 }
 .payListArea td:not(:last-child)::before {
  content: attr(data-text);
 }
}
.payListArea select {
 width: 100px;
 height: 40px;
 border: 1px solid #ececec;
}
.payListArea .imgBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 padding-right: 50px;
}
@media (max-width: 960px) {
 .payListArea .imgBox {
  padding-right: 0;
 }
}
@media (max-width: 414px) {
 .payListArea .imgBox {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
 }
}
.payListArea .imgBox .Txt {
 padding-top: 15px;
}
@media (max-width: 1180px) {
 .payListArea .imgBox .Txt {
  padding-top: 0;
 }
}
.payListArea .imgBox .Txt .discountTitle {
 display: inline-block;
 font-size: 12px;
 padding-left: 10px;
 padding-right: 10px;
 letter-spacing: 0.05em;
 color: #FFF;
 background-color: #838383;
 border-radius: 15px;
}
.payListArea .Img {
 width: 150px;
 height: 150px;
 margin-right: 25px;
 -ms-flex-negative: 0;
     flex-shrink: 0;
 border: 1px solid #ececec;
 -webkit-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
@media (min-width: 1181px) {
 .payListArea .Img:hover {
  border-color: #de6500;
 }
}
@media (max-width: 1180px) {
 .payListArea .Img {
  width: 100px;
  height: 100px;
  margin-right: 12px;
 }
}
@media (max-width: 480px) {
 .payListArea .Img {
  width: 80px;
  height: 80px;
 }
}
@media (max-width: 414px) {
 .payListArea .Img {
  margin-bottom: 10px;
 }
}
.payListArea .Img img {
 display: block;
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
    object-fit: cover;
}
.payListArea .Txt a {
 display: block;
}
@media (min-width: 1181px) {
 .payListArea .Txt a:hover {
  opacity: 0.75;
 }
}
.payListArea .Txt .title {
 display: block;
 font-size: 18px;
 letter-spacing: 0.05em;
 color: #000;
 font-weight: 400;
}
@media (max-width: 1180px) {
 .payListArea .Txt .title {
  font-size: 16px;
 }
}
.payListArea .Txt .spec {
 display: block;
 font-size: 14px;
 letter-spacing: 0.05em;
 color: #6a6a6a;
}
.payListArea .Txt .note {
 font-size: 13px;
}
.payListArea .btn_remove {
 display: -webkit-inline-box;
 display: -ms-inline-flexbox;
 display: inline-flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #eee;
}
@media (max-width: 960px) {
 .payListArea .btn_remove {
  width: 100%;
  border-radius: 5px;
 }
}
.payListArea .btn_remove .icon-garbage {
 width: 19px;
 height: 22px;
 color: #5f5f5f;
}
@media (min-width: 1181px) {
 .payListArea .btn_remove:hover {
  background-color: #de6500;
 }
 .payListArea .btn_remove:hover .icon-garbage {
  color: #fff;
 }
}
.payListArea .toggleClose {
 position: absolute;
 bottom: 18px;
 left: 50%;
 -webkit-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: #000;
}
.payListArea .toggleClose:before {
 -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
}
.payListArea .toggleClose:after {
 -webkit-transform: rotate(-45deg);
         transform: rotate(-45deg);
}
@media (min-width: 1181px) {
 .payListArea .toggleClose:hover {
  background-color: rgba(255, 255, 255, 0.8);
 }
}

.payTopArea {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
     -ms-flex-pack: justify;
         justify-content: space-between;
 padding: 12px 70px 12px 25px;
 background-color: #de6500;
 color: #fff;
}
@media (max-width: 414px) {
 .payTopArea {
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 55px;
 }
}
.payTopArea .toggleStyle {
 height: 100%;
 border-bottom: none;
}
@media (max-width: 414px) {
 .payTopArea .toggleStyle {
  width: 100%;
  height: 45px;
  top: auto;
  bottom: 0;
  background-color: #f9f9f9;
 }
}

.noteBox {
 margin-bottom: 30px;
}
.noteBox .textEditor {
 color: #3f3f3f;
}

.noteText {
 padding-top: 10px;
 padding-bottom: 10px;
}

.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;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 padding-top: 15px;
 padding-bottom: 15px;
 font-size: 14px;
 background-color: #fff;
}
@media (max-width: 480px) {
 .discountTotal {
  width: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
 }
}
.discountTotal .icon-discount {
 width: 25px;
 height: 25px;
 margin-right: 10px;
 fill: #a62627;
}
.discountTotal .Txt {
 margin-right: 20px;
 letter-spacing: 0.15em;
}
@media (max-width: 480px) {
 .discountTotal .Txt {
  width: 100%;
  margin-right: 0;
 }
}
.discountTotal .price {
 letter-spacing: 0.075em;
}
.discountTotal .price + .price {
 padding-left: 10px;
}
.discountTotal .original {
 opacity: 0.7;
 text-decoration: line-through;
 color: #ccc;
 font-size: 16px;
}
.discountTotal .tip {
 width: 100%;
 text-align: center;
}
.discountTotal.green .discount {
 color: #5eb658;
}
.discountTotal.red .discount {
 color: #bb1b21;
}

.addPurchaseBox {
 padding-bottom: 40px;
}
.addPurchaseBox .topTitle {
 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;
 margin-bottom: 20px;
 font-size: 19px;
 letter-spacing: 0.05em;
 text-align: center;
 color: #000;
}
.addPurchaseBox .topTitle::before, .addPurchaseBox .topTitle::after {
 content: "";
 -webkit-box-flex: 1;
     -ms-flex-positive: 1;
         flex-grow: 1;
 height: 1px;
 background-color: #dcdcdc;
}
.addPurchaseBox .topTitle::before {
 margin-right: 15px;
}
.addPurchaseBox .topTitle::after {
 margin-left: 15px;
}

.purchaseList {
 position: relative;
 margin-left: -13px;
 margin-right: -13px;
 padding-left: 80px;
 padding-right: 80px;
}
@media (max-width: 640px) {
 .purchaseList {
  padding-left: 40px;
  padding-right: 40px;
 }
}
.purchaseList > li {
 float: left;
 width: 25%;
}
.purchaseList .payArrowStyle.absolute.prev {
 left: 13px;
}
.purchaseList .payArrowStyle.absolute.next {
 right: 13px;
}
.purchaseList .payDotStyle {
 margin-top: 20px;
}
.purchaseList .slick-list {
 padding-top: 30px;
}
.purchaseList .slick-slide {
 padding-left: 13px;
 padding-right: 13px;
}
.purchaseList .item {
 padding: 20px;
 background-color: #fff;
 border: 1px solid #ececec;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
@media (min-width: 1181px) {
 .purchaseList .item:hover {
  -webkit-box-shadow: 0px 0px 14px 0px rgba(207, 207, 207, 0.42);
          box-shadow: 0px 0px 14px 0px rgba(207, 207, 207, 0.42);
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
 }
}
.purchaseList .Img {
 margin-bottom: 10px;
}
.purchaseList .Img img {
 display: block;
 width: 100%;
}
.purchaseList .bottomBox {
 text-align: center;
}
.purchaseList .title {
 display: block;
 margin-bottom: 8px;
 font-size: 16px;
 font-weight: 400;
 letter-spacing: 0.05em;
}
.purchaseList .price {
 margin-bottom: 10px;
 font-size: 19px;
 color: #b80000;
}
.purchaseList .price .nt {
 display: inline-block;
 padding-right: 5px;
 font-size: 12px;
}
.purchaseList .addCart {
 display: block;
 padding: 6px 15px;
 text-align: center;
 font-size: 14px;
 letter-spacing: 0.05em;
 background-color: #eee;
 color: #5f5f5f;
}
@media (min-width: 1181px) {
 .purchaseList .addCart:hover {
  background-color: #de6500;
  color: #fff;
 }
}
.purchaseList .countItemBox {
 width: 100%;
 margin-bottom: 8px;
}

.noteBox {
 margin-bottom: 30px;
}
.noteBox .textEditor {
 color: #3f3f3f;
}

.payDotStyle {
 width: 100%;
 text-align: center;
}
.payDotStyle li {
 display: inline-block;
 margin-right: 6px;
 margin-left: 6px;
}
.payDotStyle li.slick-active button {
 border-color: #de6500;
}
.payDotStyle li.slick-active button::after {
 background-color: #de6500;
}
.payDotStyle li button {
 position: relative;
 display: block;
 width: 13px;
 height: 13px;
 border-radius: 50%;
 border: 1px solid transparent;
 background: none;
 font-size: 0;
 line-height: 0;
 padding: 0;
 text-indent: -9999px;
 cursor: pointer;
}
.payDotStyle li button::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -2.5px;
 margin-top: -2.5px;
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background-color: #c7c7c7;
}
.payDotStyle li button:focus {
 outline: none;
}

/*--title--*/
.titleTotal {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
}
.titleTotal .text {
 margin-left: 5px;
 font-size: 14px;
 list-style-position: 0.05em;
 color: #bb1b21;
}

.payTitleStyle1 {
 width: 100%;
 padding-top: 10px;
 padding-bottom: 12px;
 margin-bottom: 15px;
 font-size: 19px;
 font-weight: 400;
 letter-spacing: 0.05em;
 color: #000;
 border-bottom: 2px solid #b4b4b4;
}

/*--button--*/
.toggleStyle {
 position: absolute;
 right: 0;
 top: 0;
 width: 45px;
 height: 43px;
 padding: 0;
 border: none;
 border-bottom: 1px solid #d5d5d5;
 background-color: #fff;
 cursor: pointer;
 outline: none;
}
.toggleStyle::before, .toggleStyle::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -4px;
 margin-top: -0.5px;
 width: 8px;
 height: 1px;
 background-color: #000;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.toggleStyle::after {
 -webkit-transform: rotate(0);
         transform: rotate(0);
}
.toggleStyle.show::after, .toggleStyle.close::after {
 -webkit-transform: rotate(90deg);
         transform: rotate(90deg);
}

.btnArea2 {
 width: 100%;
 margin-top: 15px;
 text-align: center;
}
.btnArea2 p {
 margin-bottom: 40px;
 font-size: 14px;
 letter-spacing: 0.05em;
}
.btnArea2 a {
 display: inline-block;
 min-width: 160px;
 height: 40px;
 line-height: 40px;
 margin: 0 16px;
 font-size: 14px;
 color: #fff;
 letter-spacing: 0.05em;
 background-color: #de6500;
 border: 1px solid #de6500;
}
@media (max-width: 640px) {
 .btnArea2 a {
  width: 100%;
  margin: 0 0 10px;
 }
}
@media (min-width: 1181px) {
 .btnArea2 a:hover {
  color: #de6500;
  background-color: #fff;
 }
}
.btnArea2 .light {
 color: #de6500;
 background-color: #fff;
}
@media (min-width: 1181px) {
 .btnArea2 .light:hover {
  color: #fff;
  background-color: #de6500;
 }
}
.btnArea2 .gray {
 color: #5f5f5f;
 border-color: #d5d5d5;
 background-color: #fff;
}
@media (min-width: 1181px) {
 .btnArea2 .gray:hover {
  border-color: #de6500;
 }
}

.submitText {
 padding-top: 10px;
 text-align: center;
 font-size: 14px;
 letter-spacing: 0.05em;
}
.submitText input {
 accent-color: #de6500;
}
.submitText .confirmPolicy {
 color: #de6500;
}
.submitText .confirmPolicy a {
 color: #de6500;
}
@media (min-width: 1181px) {
 .submitText .confirmPolicy a:hover {
  color: #5a4b41;
 }
}
.submitText p {
 padding-bottom: 5px;
}

/*--arrow--*/
.payArrowStyle {
 width: 30px;
 height: 30px;
 padding: 0;
 background-color: #de6500;
 border: none;
 font-size: 16px;
 color: #fff;
 cursor: pointer;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
@media (min-width: 1181px) {
 .payArrowStyle:hover {
  background-color: #000;
 }
}
.payArrowStyle.absolute {
 position: absolute;
 top: 50%;
 margin-top: -15px;
}
.payArrowStyle.absolute.prev {
 left: 0;
}
.payArrowStyle.absolute.next {
 right: 0;
}

/*--old--*/
.formWrap {
 position: relative;
 clear: both;
}

.infoArea {
 margin-right: 360px;
 overflow: hidden;
}

.priceArea {
 position: absolute;
 right: 0;
 top: 0;
 width: 320px;
}

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

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

.itemBox,
.section {
 margin-top: 25px;
}

/**清單表格**/
.itemBox table {
 width: 100%;
 border-collapse: collapse;
}
.itemBox th {
 padding: 10px;
 background-color: #ececec;
 text-align: left;
}
.itemBox td {
 padding: 10px 5px;
 vertical-align: middle;
 border-bottom: 1px solid #d9d9d9;
}
.itemBox td a {
 color: #1785d5;
}
.itemBox td a strong {
 display: inline-block;
 vertical-align: middle;
}
.itemBox td a img {
 display: inline-block;
 vertical-align: middle;
 width: 60px;
 margin-right: 10px;
}
.itemBox .btn_remove {
 display: inline-block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 font-size: 16px;
 color: #d92047;
 text-align: center;
 background-color: #eaeaea;
}

/**資料填寫**/
.section .title {
 /*項目標題區*/
 padding: 10px 15px;
 background-color: #9e9e9e;
}
.section .title strong {
 /*標題字*/
 font-size: 14px;
 color: #fff;
}
.section .box {
 padding: 15px 0;
}
.section .left {
 display: block;
 height: 20px;
 margin-bottom: 5px;
 font-size: 14px;
 color: #222;
}
.section .left em {
 font-size: 12px;
 color: #f00;
}
.section .left b.note {
 padding-left: 5px;
 font-weight: 400;
 font-size: 12px;
 color: #d07474;
}
.section .radioSet label {
 display: inline-block;
 margin-right: 10px;
 margin-bottom: 5px;
}
.section .radioSet label:last-child {
 margin-right: 0;
}
.section ul {
 margin-top: 15px;
}
.section ul li {
 display: none;
 line-height: 1.8;
}
.section ul li:first-child {
 display: block;
}
.section input[type=text],
.section select {
 width: 100%;
 height: 30px;
 line-height: 30px;
 padding: 5px;
 border: 1px solid #ccc;
}
.section textarea {
 width: 100%;
 height: 100px;
 height: 100px;
 line-height: 100px;
 padding: 5px;
 border: 1px solid #ccc;
}
.section label.same {
 /*同聯絡人*/
 cursor: pointer;
}
.section label.same:before {
 content: "\f096";
 margin-right: 5px;
 font-family: FontAwesome;
}
.section label.same.select:before {
 content: "\f046";
}

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

/*總計*/
.totalArea {
 border-bottom: 1px solid #d9d9d9;
}
.totalArea table {
 width: 100%;
 font-size: 14px;
 border-collapse: collapse;
}
.totalArea td {
 padding: 8px;
}
.totalArea tr.total td {
 font-size: 18px;
 color: #fff;
 background-color: #00529B;
}
.totalArea b {
 font-size: 18px;
}
.totalArea .price {
 font-size: 24px;
 color: #e02528;
}
.totalArea .price .text {
 font-size: 16px;
}

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

.payokTextBox .item {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 padding-bottom: 5px;
}

/*按鈕區塊*/
.btnArea {
 clear: both;
 margin-top: 30px;
}
.btnArea > a {
 display: inline-block;
 margin-bottom: 5px;
 padding: 10px 20px;
 border-radius: 3px;
 font-size: 15px;
 color: #fff;
}
.btnArea p {
 margin-top: 5px;
 color: #d92047;
}

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

/*960*/
@media screen and (max-width: 960px) {
 .infoArea {
  margin: 0;
 }
 .priceArea {
  position: static;
  width: 100%;
 }
 .fixBox {
  position: static;
 }
}
/*960 end*/
/*640*/
@media screen and (max-width: 640px) {
 .step li {
  padding: 0 5px;
 }
 .step i {
  margin-right: 5px;
  font-size: 28px;
 }
 .step .Txt p {
  font-size: 13px;
 }
 .itemBox table td a img {
  display: none;
 }
}
/*640end*/
/*# sourceMappingURL=pay.css.map */