@charset "utf-8";

#cpn {padding: 4rem 0 6rem; background: #F5F6FA;}
#cpn * {box-sizing: border-box;}
#cpn button {-webkit-appearance: none; appearance: none;}

.cpn-title {text-align: center;}
.cpn-title h6 {font-size: 0.875rem; font-weight: 400; color: #006FFF; line-height: 1.5;}
.cpn-title h5 {font-size: 0.875rem; margin-top: 0.625rem; font-weight: 300; line-height: 1.5;}
.cpn-title h3 {font-size: 2.75rem; margin-top: 1.5rem; font-weight: 600;}
.cpn-list {margin: 0 -1.25rem; padding: 0 10%; display: flex; flex-wrap: wrap;}
.cpn-list li {width: 50%; padding: 2rem 1.25rem;}
.cpn-list li dl dt {padding-bottom: 60%; position: relative; background: url('https://img.megastudyth.com/main/2025/coupon.png')no-repeat center center / cover;}
.cpn-list li dl dt > div {position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0 25% 5% 2.2%;}
.cpn-list li dl dt div > div {width: 100%; height: 100%; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.cpn-list li dl dt div > div:before {content: 'Discount'; color: #524A57; font-size: 1.5rem; font-weight: 600;}
.cpn-list li dl dt h5 {color: #006FFF; margin-top: 0.25rem; font-size: 3rem; text-align: center; line-height: 1.0; letter-spacing: -0.075rem;}
.cpn-list li dl dt h5:before {content: ''; display: block; width: 2rem; height: 1px; margin: 0 auto 0.5rem; background: #524A57; opacity: 0.7;}
.cpn-list li dl dt p {color: #006FFF; font-size: 0.875rem; font-weight: 300; margin-top: 1rem;}
.cpn-list li dl dt em {display: block; width: 5.5rem; height: 5.5rem; text-indent: -9999px; position: absolute; right: -2rem; top: -3rem; animation: blink-badge 1s step-end infinite; background: url('https://img.megastudyth.com/main/2025/coupon_badge.png')no-repeat left center / auto 100%;}
.cpn-list li dl dd {margin-top: 0.5rem;}
.cpn-list li dl dd p {font-size: 0.875rem; text-align: center; font-weight: 300;}
.cpn-list li dl dd p:before {content: 'ระยะเวลาโปรโมชัน  : ';}
.cpn-list li dl dd button {margin: 1.5rem auto 0; width: 100%; max-width: 17.5rem; padding: 0.625rem 1.25rem; background: #fff; color: #006FFF; border: solid 1px #006FFF; display: flex; align-items: center; justify-content: center; border-radius: 10rem;}
.cpn-list li dl dd button:disabled {background: #E3E5E9; border-color: #E3E5E9; color: #8B95A1;}
@keyframes blink-badge {50% {background-position: right center;}}

@media (max-width:992px) {
	.cpn-list {padding: 0;}
	.cpn-list li dl dt h5 {font-size: 4rem;}
	.cpn-list li dl dt em {right: -1rem;}
}

@media (max-width:768px) {
	.cpn-list {display: block; padding-top: 1.5rem;}
	.cpn-list li {width: 100%; margin-bottom: 4rem; padding: 0 1.25rem;}
	.cpn-list li:last-child {margin-bottom: 0;}
	.cpn-list li dl dt em {width: 5rem; height: 5rem;}
}