.tbMain {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    padding: 15px 0;
    gap: 10px;
}

@media (max-width: 768px) {
    .tbMain {
        justify-content: center;
    }
}


/*=================================================優惠券區塊=================================================*/
.CouponArea {
    width: calc(33% - 6px);
    min-width: 365px;
    height: 160px;
    position: relative;
    cursor: pointer;
    display: inline-flex;
}


.Coupon-side {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    /*hide backface*/
    backface-visibility: hidden;
    transition: transform .3s;
}

@media (max-width: 540px) {
    .CouponArea {
        width: 100%;
        min-width: unset;
    }
}


/*=================================================front coupon=================================================*/
.Coupon-front {
    display: flex;
}

.CouponInfo {
    text-align: center;
    width: 30%;
    border-radius: 25px 0 0 25px;
    border: 1px solid #e77c10;
    background: #ffffff;
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    min-width: 110px;

}

.CouponInfo:before,
.Coupon-back:before {
    content: " ";
    width: 10px;
    height: 50px;
    background: #ffffff;
    border: 1px solid #e77c10;
    border-left: none;
    position: absolute;
    left: -1px;
    border-bottom-right-radius: 50px 100px;
    border-top-right-radius: 50px 100px;
}

.CouponIcon:before {
    content: '';
    background-image: url(https://athena.noon360.com/noon360/retail-puzzle/WeForm/je8903042009_gmail.com_36385.sdir/3312119858_20221017_10440966.svg);
    padding: 20px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(75%) sepia(74%) saturate(332%) hue-rotate(354deg) brightness(103%) contrast(103%);
}

.CouponDetail {
    width: 70%;
    font-size: 14px;
    border-radius: 0 25px 25px 0;
    border: 1px solid #e77c10;
    border-left: none;
    background: #ffffe5;
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
}

.CouponDetail ul {
    margin: 0;
}

.CouponDetail:after,
.Coupon-back:after {
    content: " ";
    width: 10px;
    height: 50px;
    background: #ffffff;
    border: 1px solid #e77c10;
    border-right: none;
    position: absolute;
    right: -1px;
    border-bottom-left-radius: 50px 100px;
    border-top-left-radius: 50px 100px
}

.CouponClasstitle {
    color: #1C1C1C;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    width: 100%;
}

.CouponClasstitle:before,
.CouponClasstitle:after {
    content: ' ';
    display: block;
    line-height: 150%;
    font-size: 16px;
    font-weight: bold;
}

.CouponClasstitle:after {
    content: '優惠券';
}

.CouponDiscount {
    margin-top: 10px;
    color: #e77c10;
    font-weight: 500;
    font-size: 30px;
    font-weight: bold;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .CouponInfo {
        flex-direction: column;
    }

    .CouponClasstitle {
        display: none;
    }

    .CouponDetail {
        width: auto;
        flex: 1;
    }

    .CouponDetail ul {
        margin: 0;
        list-style: none;
        padding: 10px;
        padding-right: 15px;
    }

    .CouponDiscount {
        font-size: 24px;
    }

    .CouponDiscount:before,
    .CouponDiscount:before {
        font-size: 12px;
    }
}

/*=================================================back coupon=================================================*/
.Coupon-back {
    padding: 10px;
    transform: rotateY(180deg);
    border: 1px solid #eeeeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 25px;
}

.Coupon-back:before,
.Coupon-back:after {
    border: 1px solid #eeeeeeee;
}

.Coupon-back:before {
    border-left: 0;
}

.Coupon-back:after {
    border-right: 0;
}

/**背面欄位*/
.memo-title {
    font-size: 20px;
    font-weight: bolder;
}

.memo-back {
    height: -webkit-fill-available;
}

.validdt-back {
    font-size: 12px;
    color: #8A8A8A;
}

.prdcode {
    font-size: 14px;
    color: #8A8A8A;
    padding-left: 8px;
}

.showCouponbtn {
    background: unset;
    border: unset;
    font-size: 14px;
    border-radius: 8px;
    color: #000;
    margin-right: 8px;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.showCouponbtn img:hover {
    opacity: .4;
}
/**=================================================fliped coupon=================================================*/
.CouponArea.fliped .Coupon-front {
    transform: rotateY(180deg);
}

.CouponArea.fliped .Coupon-back {
    transform: rotateY(0deg);
}

.CouponArea.fliped>.coupon-front {
    opacity: 0;
}

.Coupon-back .bottom {
    position: absolute;
    bottom: 10px;
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fliped .showCouponbtn img {
    z-index: 99;
}



@media (max-width: 540px) {
	 .Coupon-back .bottom { justify-content: flex-start; }
    .showCouponbtn span { display: none; }
    .showCouponbtn img {
        min-width: 40px;
        min-height: 40px;
    }
}


/*=================================================入會禮風格=================================================*/
[ty*="joingift"] .CouponIcon:before {
    filter: unset;
    background-image: url(https://athena.noon360.com/noon360/retail-puzzle/WeForm/je8903042009_gmail.com_36385.sdir/3312119858_20221017_10440966.svg);
}

[ty*="joingift"] .CouponDiscount {
    color: #0f69bd;
}

[ty*="joingift"] .CouponClasstitle:before {
    content: '會員';
}

[ty*="joingift"] .CouponClasstitle:after {
    content: '入會禮';
}

[ty*="joingift"] .CouponInfo,
[ty*="joingift"] .CouponInfo:before,
[ty*="joingift"] .CouponDetail,
[ty*="joingift"] .CouponDetail:after {
    border: 1px solid #168FFF;
}

[ty*="joingift"] .CouponInfo:before {
    border-left: none;
}

[ty*="joingift"] .CouponDetail {
    border-left: none;
    background: #e5f2ff;
}

[ty*="joingift"] .CouponDetail:after {
    border-right: none;
}



/*=================================================生日禮風格=================================================*/
[ty*="birthday"] .CouponIcon:before {
    filter: unset;
    background-image: url(https://athena.noon360.com/noon360/retail-puzzle/MsgInfo/2710825375_20221018_22293573.svg);
}

[ty*="birthday"] .CouponDiscount {
    color: #e92c2c;
}

[ty*="birthday"] .CouponClasstitle:after {
    content: '生日禮';
}

[ty*="birthday"] .CouponInfo,
[ty*="birthday"] .CouponInfo:before,
[ty*="birthday"] .CouponDetail,
[ty*="birthday"] .CouponDetail:after {
    border: 1px solid #eb7d7d;
}

[ty*="birthday"] .CouponInfo:before {
    border-left: none;
}

[ty*="birthday"] .CouponDetail {
    border-left: none;
    background: #fde1e1;
}

[ty*="birthday"] .CouponDetail:after {
    border-right: none;
}


/*=================================================優惠券面額=================================================*/
[amt-value]:after {
    content: " 元 ";
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

[amt-value$="%"]:after {
    content: " 折 ";
    font-size: 16px;
    font-weight: 500;
    color: #000;
}


/*=================================================使用狀況=================================================*/
.CouponArea.已使用,
.CouponArea.已過期 {
    pointer-events: none;
    cursor: alias;
}

.text1 {
    display: none;
}

.CouponArea.已使用 .CouponIcon:before,
.CouponArea.已過期 .CouponIcon:before {
    filter: invert(64%) sepia(0%) saturate(0%) hue-rotate(11deg) brightness(96%) contrast(88%);
    opacity: 0.5;
}

[ty*="birthday"] .CouponArea.已使用 .CouponIcon:before,
.CouponArea.已過期 .CouponIcon:before {
    filter: invert(63%) sepia(0%) saturate(28%) hue-rotate(197deg) brightness(103%) contrast(67%);
}

.CouponArea.已使用 .CouponDiscount,
.CouponArea.已過期 .CouponDiscount {
    color: #999;
}

.CouponArea.已使用 .CouponInfo,
.CouponArea.已過期 .CouponInfo,
.CouponArea.已使用 .CouponInfo:before,
.CouponArea.已過期 .CouponInfo:before,
.CouponArea.已使用 .CouponDetail,
.CouponArea.已過期 .CouponDetail,
.CouponArea.已使用 .CouponDetail:after,
.CouponArea.已過期 .CouponDetail:after {
    border: 1px solid #999;
}

.CouponArea.已使用 .CouponInfo:before,
.CouponArea.已過期 .CouponInfo:before {
    border-left: none;
}

.CouponArea.已使用 .CouponDetail,
.CouponArea.已過期 .CouponDetail {
    border-left: none;
    background: #E8E8E8;
}

.CouponArea.已使用 .CouponDetail:after,
.CouponArea.已過期 .CouponDetail:after {
    border-right: none;
}


/*=================================================錯誤樣式=================================================*/
.meMsg_MsgContentBlk .txt_MsgEmpty {
    min-height: 150px;
    padding: 25px;
    font-size: 18px;
    font-weight: bold;
    color: #d00;
}

/**=================================================彈出確認兌換=================================================*/
#iWin_iWinContent .couponCorfirmBlk {
    padding: 20px;
    height: 100%;
    width: 100%;
    text-align: center;
}

#iWin_iWinContent .cfmcoupon {
    min-width: 365px;
    height: 160px;
    position: relative;
    text-align: center;
}

#iWin_iWinContent .notice {
    color: #898989;
    margin-bottom: 10px;
}

#iWin_iWinContent .couponCode {
    width: 100%;
    display: inline-block;
    margin: 0 0px 10px;
    font-size: 14px;
}

#iWin_iWinContent .couponbtn {
    color: #fff;
    width: 150px;
    background: #E64F3E;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}