@charset "UTF-8";
:root{
  --momo-color:#d62872;
  --momo-blue:#027BFF;
  --momo-red:#dd2726; 
}
#MoMoLM {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  opacity: 1;
}
iframe {
  margin: 0 auto;
  padding: 0;
  border: 0;
  height: 90px;
  width: 100%;
}
/* checkbox style */
.form-checkmark,
.form-checkmark-child {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  height: 18px;
  width: 18px;
  margin: 0.5em;
  background-color: #fff;
  border: 1px solid #D7D7D7;
  outline: 2px solid #ffffff;
  border-radius: 4px;
  transition: .3s;
}
.form-check-label:hover .form-check-input ~ .form-checkmark,
.form-check-label:hover .form-check-input ~ .form-checkmark-child {
  border: 1px solid #D7D7D7;
  outline: 2px solid #f2f2f2;
}
.form-check-label .form-check-input:checked ~ .form-checkmark {
  background-color: #d62872;
  border-color: #d62872;
}
.form-check-label .form-check-input:checked ~ .form-checkmark-child {
  background-color: #ffffff;
}
.form-check-label .form-check-input:checked:disabled ~ .form-checkmark {
  background-color: #ededed;
  border-color: #d7d7d7;
}
.form-check-label .form-check-input:checked:disabled ~ .form-checkmark-child {
  background-color: #ededed;
  border-color: #d7d7d7;
}
.form-check-label .form-check-input:disabled ~ .form-checkmark,
.form-check-label .form-check-input:disabled ~ .form-checkmark-child {
  background-color: #ededed;
  border-color: #d7d7d7;
  outline: 2px solid #ffffff;
}
.form-checkmark:before,.form-checkmark:after,.form-checkmark-child:before,.form-checkmark-child:after {
  content: "";
  position: absolute;
  display: none;
}
.form-check-label .form-check-input:checked ~ .form-checkmark:before,.form-check-label .form-check-input:checked ~ .form-checkmark:after,.form-check-label .form-check-input:checked ~ .form-checkmark-child:before,.form-check-label .form-check-input:checked ~ .form-checkmark-child:after {
  display: block
}
.form-check-label .form-checkmark:before,.form-check-label .form-checkmark:after,.form-check-label .form-checkmark-child:before,.form-check-label .form-checkmark-child:after {
  background-color: #fff;
  width: 2px;
  border-radius: 2px;
}
.form-check-label .form-checkmark-child:before,.form-check-label .form-checkmark-child:after {
  background-color: #727272;
}
.form-check-label .form-check-input:disabled ~ .form-checkmark-child:before,.form-check-label .form-check-input:disabled ~ .form-checkmark-child:after {
  background-color: #727272;
}
.form-check-label .form-checkmark:before,.form-check-label .form-checkmark-child:before {
  height: 10px;
  left: 8px;
  top: 3px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.form-check-label .form-checkmark:after,.form-check-label .form-checkmark-child:after {
  height: 5px;
  top: 7px;
  left: 4px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* radiobox style */
.form-radiomark {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 18px;
  width: 18px;
  margin: 0.5em;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  outline: 2px solid transparent;
  border-radius: 50%;
  transition: .3s;
}
.form-radiomark:after {
  content: "";
  position: absolute;
  display: none;
}
.form-check-label:hover .form-check-input ~ .form-radiomark {
  border: 1px solid #d7d7d7;
  outline: 2px solid #f2f2f2;
}
.form-check-label .form-check-input:checked ~ .form-radiomark {
  background-color: #ffffff;
  border-color: #d7d7d7;
}
.form-check-label .form-check-input:checked:disabled ~ .form-radiomark {
  background-color: #ffffff;
  border-color: #d7d7d7;
  opacity: 0.5
}
.form-check-label .form-check-input:disabled ~ .form-radiomark {
  background-color: #ffffff;
  border-color: #f2f2f2;
  outline: 2px solid #ffffff;
}
.form-check-label .form-check-input:checked ~ .form-radiomark:after {
  display: block;
}
.form-check-label .form-radiomark:after {
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d62872;
}
.form-check-label .form-check-input:checked:disabled ~ .form-radiomark:after {
  background: #ededed;
}
.form-check-label .form-check-input:checked ~ .form-check-text p {
  font-weight: bold;
}
/* floatingLayerBox style */
.floatingLayerBox * {
  font-size: 15px;
  box-sizing: border-box;
  font-family: var(--primary-font-family);
}
#repayLayerBox1P .innerArea {
  padding: 0px;
  overflow-y: auto;
}
#repayLayerBox1P .innerArea form {
  padding: 20px;
}
#repayLayerBox3P .innerArea,
#repayLayerBox3P_Hi .innerArea {
  height: calc(100% - 50px);
  padding: 20px;
  overflow-y: auto;
}
.floatingLayerBox {
  color: #454545;
  text-align: left;
}
.floatingLayerBox .title {
  padding: 14px 20px;
  position: relative;
}
.floatingLayerBox .title > span {
  font: bold 17px/22px var(--primary-font-family);
}
.floatingLayerBox .pay-info-content,
.floatingLayerBox .payment-option {
  margin-bottom: 20px;
}
.floatingLayerBox .pay-info-content,
.floatingLayerBox .inner-payment-area {
  padding: 0 10px;
}
.floatingLayerBox .inner-payment-area {
  margin: 20px 0;
}
.payment-3d-area {
  color: #454545;
}
.payment-3d-area .note {
  font-size: 13px;
  color: #888;
}
.payment-3d-area .alert-tips {
  font-size: 13px;
  color: var(--momo-red);
}
/**資訊呈現區塊**/
.pay-info-content .list-group {
  line-height: 20px;
}
.pay-info-content .list-item + .list-item {
  margin-top: 10px;
}
.pay-info-content .list-group .list-item {
  font: 15px/20px Verdana, Helvatica, Microsoft JhengHei, sans-serif;
}
.pay-info-content .list-item > .hintText {
  font-size: 13px;
  padding-left: 5px;
  color: var(--momo-red);
}
/**付款方式**/
.payment-3d-area .payment-option {
  width: 100%;
  height: 44px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #f2f2f2;
}
.payment-3d-area .payment-option .option-content {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.payment-3d-area .payment-option .option-content > li {
  flex: 0 0 172px;
}
.payment-3d-area .payment-option .option-content .form-check-label {
  margin: 0;
  align-items: center;
}
/**付款方式-信用卡區塊**/
.inner-payment-area .info-tips {
  margin-bottom: 4px;
}
.inner-payment-area .credit-card-type {
  margin-bottom: 10px;
}
.inner-payment-area .credit-card-name {
  font-size: 13px;
  padding-left: 75px;
}
.payment-3d-area .recently-card-no-btn {
  cursor: pointer;
  color: #454545;
  padding: 0px 10px;
  text-align: center;
  border-radius: 4px;
  display: inline-block;
  background: #e7e7e7;
  border: 1px solid #888;
}
.payment-3d-area .cvv-sample-btn {
  line-height: 26px;
  cursor: pointer;
  display: inline-block;
  color: var(--momo-blue);
}
.credit-card-box {
  /* margin-bottom: 20px; */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.credit-card-box > .card-fill-in {
  flex: 0 0 400px;
  margin-right: 6px;
}
.credit-card-box > .list-group {
  flex: auto;
}
.credit-card-box .list-item {
  min-height: 26px;
}
.credit-card-box .list-item:not(:first-child) {
  margin-top: 10px;
}
/**付款方式-信用卡區塊-momo車**/
.red-remindtxtcard {
  color: var(--momo-red);
  width: 100%;
  cursor: pointer;
  margin-bottom: 10px;
}
.link {
  padding: 0 6px;
  color: var(--momo-blue);
}
.momo-cart > .card-fill-in {
  margin: 0;
  flex: 1 1 100%;
}
.momo-cart .fill-item ~ .fill-item {
  margin-top: 10px;
}
.momo-cart .fill-item dd+dd {
  margin-left: 6px;
}
.momo-cart .fill-item > dd {
  width: 300px;
}
.fill-group .cancelCard,
.pick-card-list .delBtn {
  width: 18px;
  height: 18px;
  margin: auto;
  display: block;
  cursor: pointer;
  background: url('/ecm/img/cmm/solid-circle-xmark.svg') no-repeat 0 0;
}
/**付款方式-信用卡區塊-卡號資訊輸入區**/
.fill-group button,
.fill-group input,
.fill-group select {
  border: 0;
  outline: 0;
}
.fill-group input,
.fill-group select {
  font-size: 15px;
  line-height: 24px;
  color: #454545;
  border-radius: 4px;
  border: 1px solid #888;
}
.fill-group input {
  padding: 0 5px;
}
.fill-group select:required:invalid {
  color: rgba(136, 136, 136, 1);
}
.fill-group .cancelCard {
  margin-top: -9px;
  position: absolute;
  top: 50%;
  right: 5px;
}
.fill-group .alert-tips {
  display: none;
  margin-top: 4px;
  line-height: 18px;
}
.fill-group > .alert-tips {
  padding-left: 75px;
}
.fill-item {
  display: flex;
  align-items: center;
}
.fill-item + .fill-item {
  margin-top: 10px;
}
.fill-item > dt {
  flex: 0 0 75px;
}
.fill-item > dd {
  width: 100%;
  display: flex;
  position: relative;
}
.fill-item > dd > .creditCardNumber {
  width: 100%;
}
.fill-item > dd > .selStyle {
  width: 70px;
  margin-right: 6px;
}
.fill-item > dd > .securityCode {
  width: calc(100% - 152px);
}
/** 信用卡分期選項 **/
.installment-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.installment-group > li {
  margin-bottom: 10px;
}
.installment-group > li:not(:nth-child(2n+4)) {
  margin-right: 10px;
}
.installment-item {
  width: calc((100% - 30px)/4);
  padding: 5px;
  background-color: #e7e7e7;
}
.installment-item .form-check-label {
  margin: 0;
  flex-direction: column;
}
.installment-item .form-radiomark {
  margin: 0;
}
.installment-item .bank {
  width: 100%;
  padding: 6px 8px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.installment-item .bank > .form-check-text {
  flex: none;
}
.installment-item .form-check-text > .allotBank {
  font-size: 13px;
  line-height: 1.2;
  color: var(--momo-blue);
}
.installment-item .budget {
  font-size: 19px;
  line-height: 36px;
  width: 100%;
  text-align: center;
}
.installment-item .budget > span {
  font-family: var(--price-font-family);
}
.installment-item .budget > .price,
.installment-item .budget > .percent {
  font-size: 19px;
}
.installment-item .budget > .number {
  font-size: 25px;
  font-weight: bold;
}
/** 信用卡CVV範例圖 **/
.payment-3d-area .cvv-sample-box {
  display: none;
  width: 320px;
  height: 200px;
  margin: -100px 0 0 -160px;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #ddd;
  z-index: 1010;
}
/**按鈕區**/
.btn-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-area .btn {
  padding: 8px;
  color: #fff;
  display: block;
  cursor: pointer;
  text-align: center;
  background-color: var(--momo-color);
}
/**按鈕區－進行3D驗證付款按鈕**/
.btn-area .btn-apply {
  width: 146px;
  height: 36px;
  font-weight: bold;
  border-radius: 22px;
  font-size: 17px;
  line-height: 22px;
}
/**按鈕區－確定按鈕**/
.btn-area .confirm-btn {
  width: 132px;
  height: 30px;
  padding: 3px 8px;
}

/**持卡人區塊**/
.bank-pay-main {
  padding: 0 10px;
  margin: -10px 0 20px;
}
.bank-pay-main .owner-data-title {
  display: flex;
  align-items: center;
}
.bank-pay-main .owner-data-title > span {
  color: var(--momo-red);
}
.bank-pay-main .form-check-label {
  align-items: center;
  margin: 0;
}
.bank-pay-main  > .alert-tips {
  padding-left: 90px;
}
.bank-pay-main  > .owner-data-fill-in {
  display: none;
}
.owner-data-fill-in .inputStyle {
  width: 234px;
}
.owner-data-fill-in .area-code {
  width: 70px;
}
.owner-data-fill-in .phone-number {
  width: 146px;
}
.owner-data-fill-in .address {
  width: 350px;
}
.owner-data-fill-in > .fill-item {
  align-items: flex-start;
}
.owner-data-fill-in > .fill-item > dt {
  line-height: 26px;
  flex: 0 0 90px;
}
.owner-data-fill-in > .fill-item > dd {
  display: block;
  width: calc(100% - 90px);
}
.owner-data-fill-in .sub-fill-item > .text {
  padding: 0 6px;
}
.owner-data-fill-in .sub-fill-item {
  display: flex;
  align-items: center;
}
.owner-data-fill-in .sub-fill-item > .selStyle {
  margin-right: 6px;
}
.owner-data-fill-in .sub-fill-item > .selYear,
.owner-data-fill-in .sub-fill-item > .selMonth,
.owner-data-fill-in .sub-fill-item > .selDate {
  width: 74px;
}
.owner-data-fill-in .sub-fill-item > .city,
.owner-data-fill-in .sub-fill-item > .district {
  width: 124px;
}
.bank-pay-main + .inner-payment-area {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f2f2f2;
}
.bank-pay-main + .inner-payment-area > .installment-group {
  border-bottom: 0;
  padding-bottom: 0;
}
/**信用卡清單**/
.pick-card-list {
  margin: -15px -15px 20px;
  max-height: 416px;
  overflow-y: auto;
}
.pick-card-list table,
.pick-card-list caption,
.pick-card-list tbody,
.pick-card-list tfoot,
.pick-card-list thead,
.pick-card-list tr,
.pick-card-list th,
.pick-card-list td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.pick-card-list table {
  border-spacing: 0;
  border-collapse: collapse;
}
.table-list {
  width: 100%;
  text-align: center;
}
.table-list th {
  padding: 8px;
  font-size: 15px;
  background-color: #f5f5f5;
  border-right: 1px solid #f5f5f5;
}
.table-list td {
  font-size: 13px;
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #f5f5f5;
}
.table-list td > .form-check-label {
  width: 33px;
  margin: auto;
}
.table-list tr.selected {
  background-color: #ffffe5;
}
/* .pick-card-list .delBtn {
  width: 18px;
  height: 18px;
  margin: auto;
  display: block;
  position: relative;
  background: url('/ecm/img/cmm/solid-circle-xmark.svg') no-repeat 0 0;
} */

#repayLayerBox3P #billPageBOX {
  max-height: 108px;
}
#repayLayerBox3P iframe {
  height: auto;
  max-height: 108px;
}
#repayLayerBox3P .innerArea {
  padding: 20px 15px;
}
.pay-info-content .list-item + .list-item .heading {
  margin-right: 10px;
  color: #999999;
}