@charset "utf-8";
@import url("/css/webfont.css");

.evt_wrap * {box-sizing: border-box;}
.evt_wrap i {display: inline-block;}

/* ----------------------------------------------------------------
					비쥬얼
-----------------------------------------------------------------*/
.visual { padding: 40px 0 80px; text-align: center; background: url("//img.enuri.info/images/event/2024/payback/jul/visual-bg_m.png") #1E211A center calc(100% - 15px) no-repeat; background-size: 385px;}
.visual .container{padding: 0;}
.btn_page_close {right: 10px; top: 0;}
.sns_share_btn {left: 10px; top: 0;}
.visual span {display: block;}
.txt--event {font-size: 12px; color: #88EA3A; letter-spacing: 9px; line-height: 16px;}
.txt--sub {font-size: 20px; font-weight: 600; color: #fff; margin-top: 10px;}
.txt--main {width: 250px; margin-top: 10px;}
.txt--date {color: #DBDBDB; font-size: 14px; margin-top: 5px;}
.visual-img {width: 249px; animation: coupon 1.5s forwards; opacity: 0;}

@keyframes coupon {
	0% {transform: translateY(35px);opacity: 0;}
	100% {transform: translateY(20px) ;opacity: 1}
}

@media (min-width:768px) { 
	.visual {padding: 100px 0 191px;background: url("//img.enuri.info/images/event/2024/payback/jul/visual-bg.png?=v2") #1E211A center 100% no-repeat; background-size: 934px;}
	.txt--event {font-size: 24px; line-height: 31px;}
	.txt--sub {font-size: 40px; margin-top: 22px;}
	.txt--main {width: 500px; margin-top: 20px;}
	.txt--date {font-size: 28px; margin-top: 10px;}
	.visual-img {width: 498px;}

	@keyframes coupon {
		0% {transform: translateY(100px);opacity: 0;}
		100% {transform: translateY(70px) ;opacity: 1}
	}
}

/* ----------------------------------------------------------------
					플롯탭
-----------------------------------------------------------------*/
.floattab {width:100%;padding:0;background:#1E211A;top: -100%;}
.floattab.is_fixed {position:fixed;top:0;left:0;right:0;z-index:100;}
.floattab_list {padding: 14px 0; display: flex; justify-content: center; gap: 0 4px;}
.floattab_list li {width: 90px;}
.btn_floattab {display: block; width: 100%; font-size: 14px; border-radius: 42px; color: #8B8B8B; margin: 0 auto; text-align: center; border: 1px solid #8B8B8B;border-radius: 42px; height: 38px;font-weight: 700;}
.btn_floattab.active{border-color: #88EA3A;color: #88EA3A;}

@media (min-width:768px) {
	.floattab_list {padding:36px 0; gap: 0 12px;}
	.floattab.is_fixed .floattab_list {padding: 18px 0;}
	.floattab_list li {width:192px;}
	.btn_floattab {font-size: 28px; border-radius: 84px; height: 76px; font-size: 22px; transition: 0.2s; border: 2px solid #8B8B8B;}
	.floattab.is_fixed .btn_floattab {height: 64px;}
}

/* ----------------------------------------------------------------
					컨텐츠 공통
-----------------------------------------------------------------*/
.event {padding: 34px 0; text-align: center; position: relative;}
.evt_name {display: inline-block;font-size: 14px; font-weight: 700; color: #fff; border: 1px solid #fff; border-radius: 100px; padding: 6px 10px; line-height: 18px; }
.evt__tit {font-size: 20px; font-weight: 500; color: #fff; letter-spacing: -0.3px; margin-top: 14px;}
.evt__tit em {display: block; font-size: 30px; font-weight: 700; margin-top: 6px;}
.evt_sub_tit {font-size: 14px; font-weight: 500; line-height: 14px; color: #fff; margin-top: 10px;}
.evt_notice_btn {color: #fff; font-size: 12px; border-bottom: 1px solid #fff; padding: 2px; margin-top: 30px;}
.btn_payback_apply {background: #88EA3A; color: #181B15; font-size: 20px;line-height: 26px; padding: 10px 96px; border-radius: 100px; margin-top: 30px; font-weight: 700; letter-spacing: -0.4px;}
.btn_payback_apply:disabled{background: #4F4F4F; color: #fff;}

@media (min-width:768px) {
	.event {padding: 60px 0;}
	.evt_name {font-size: 28px; line-height: 36px; padding: 12px 20px; border-radius: 200px;border: 2px solid #fff;}
	.evt__tit {font-size: 40px; margin-top: 28px;}
	.evt__tit em {font-size: 60px; margin-top: 12px;}
	.evt_notice_btn {font-size: 24px; line-height: 26px; margin-top: 60px;}
	.btn_payback_apply {font-size: 40px; line-height: 52px; padding: 20px 194px; margin-top: 60px;}
}

/* ----------------------------------------------------------------
					e머니란?
-----------------------------------------------------------------*/
.intro_emoney {background: #181B15;text-align: center; padding: 30px 0 34px;}
.intro_emoney h2 {font-size: 16px; color: #fff; font-weight: 600; line-height: 16px;}
.intro_emoney h2 img {height: 20px; }
.intro_emoney_txt {font-size: 14px; font-weight: 500; color: #f5f5f5; line-height: 17px; margin: 12px 0 40px;}
.intro_emoney_img {justify-content: center; align-items: center; display: flex; gap: 0 9px;}
.emoney3000_img {height: 62px; position: relative;}
.emoney3000_img img {height: 100%;}
.emoney3000_img::after{display: block; content: ""; width: 61px; height: 50px; background: url("//img.enuri.info/images/event/2024/payback/jul/emoney_intro_arrow.png"); background-size: 100%; position: absolute; right: -35px; top: 50%; transform: translateY(-50%); z-index: 2;animation: arrowmove 1.38s infinite;}
.intro_emoney .swiper-container {height: 72px; overflow: hidden;}
.intro_emoney .swiper-slide img {height: 100%;}

@keyframes arrowmove {
	0%, 20%, 40%, 60%, 80%, 100% {transform: translate(0,-50%);}
	50%,70% {transform: translate(3px,-50%);}
} 

@media (min-width:768px) {
	.intro_emoney {padding: 60px 0;}
	.intro_emoney h2 {font-size: 34px;}
	.intro_emoney h2 img {height: 40px;}
	.intro_emoney_txt {font-size: 22px; line-height: 26px; margin: 20px 0 35px;}
	.emoney3000_img {height: 124px;}
	.emoney3000_img::after {width: 122px; height: 100px; right: -65px;}
	.intro_emoney .swiper-container {height: 144px;}
}

/* ----------------------------------------------------------------
				기본 페이백
-----------------------------------------------------------------*/
.basic_payback {background: #1E211A;}
.basic_payback--img {width: 260px; margin: 30px auto 0;}
.basic_payback--txt { display: inline-block; font-size: 14px; color: #fff; font-weight: 600; padding: 6px 30px; background: #464943; border-radius: 100px; margin-top: 24px; line-height: 16px;}

@media (min-width:768px) {
	.basic_payback--img {width: 520px; margin-top: 60px;}
	.basic_payback--txt {font-size: 28px; line-height: 33px; margin-top: 54px;}
}

/* ----------------------------------------------------------------
				금액대 페이백
-----------------------------------------------------------------*/
.price-range_payback {background:#181B15}
.evt__tit--sub {font-size: 14px; color: #fff; font-weight: 500; margin-top: 10px; display: block;}
.evt__tit--sub .emoney { padding-left: 14px; background: url("//img.enuri.info/images/event/2024/first_purchase/aug/i_emoney.png") no-repeat 0 50% / 12px;}
.range_payback__table {margin: 30px auto 0; max-width: 260px;}
.payback__table {color: #fff; font-size: 14px;}
.payback__table tr {background: #60665C;}
.payback__table th {background: #3B4535; padding: 10px 0;border: 1px solid #000; border-bottom: none;}
.payback__table td {padding: 10px 0;border: 1px solid #000;font-weight: 700;}
.payback__table .emoney {width: 12px; height: 12px;background: url("//img.enuri.info/images/event/2024/first_purchase/aug/i_emoney.png") no-repeat 0 0 / 100%; margin-right: 2px; vertical-align: -1px;}


@media (min-width:768px) {
	.evt__tit--sub {font-size: 28px; margin-top: 20px;}
	.evt__tit--sub .emoney {padding-left: 30px; background-size: 24px;}
	.range_payback__table {max-width: 525px; margin-top: 60px;}
	.payback__table  {font-size: 26px;}
	.payback__table th {padding: 20px 0;}
	.payback__table td {padding: 20px 0;}
	.payback__table .emoney {width: 24px; height: 24px; margin-right: 6px; vertical-align: -3px;}
}

/* ----------------------------------------------------------------
				무제한페이백
-----------------------------------------------------------------*/
.unlimited_payback{background: #1E211A;}
.unlimited_payback--img {width: 223px; margin: 18px auto 0; position: relative;}
.unlimited_payback--img::before{content: ""; display: block; position: absolute; width: 273px; height: 219px; background: url("//img.enuri.info/images/event/2024/payback/jul/unlimited_payback-bg.png"); background-size: 100%; left: -25px; animation: twinkle 2s infinite alternate;}
.saving-box {margin-top: 35px;}
.box {position: relative;}
.box__tit {background: #3E6440; font-size: 12px; color: #fff; line-height: 14px; font-weight: 700; padding: 6px 30px; border-radius: 20px; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); top: -15px;}
.box__cont {background: #DDF2FA; border-radius: 10px; padding: 23px 0 14px;}
.basic .box__cont {width: 158px; margin: 0 auto;}
.box--cate {color: #306A8A; font-weight: 700; font-size: 12px; line-height: 14px;}
.box--num {font-size: 18px; font-weight: 700; color: #000; margin-top: 8px; letter-spacing: -1px;}
.box--num em {font-weight: 800; font-size: 40px;}
.box--txt {font-size: 11px; font-weight: 500; color: #000; opacity: .5; line-height: 15px; margin-top: 6px;}
.unlimited {margin-top: 50px;position: relative;}
.unlimited::before {content: ""; display: block; width: 60px; height: 60px; position: absolute; background: url("//img.enuri.info/images/event/2024/payback/jul/i-saving-box.png"); background-size: 100%; top: -65px; left: 50%; transform: translateX(-50%); z-index: 2;}
.unlimited .box__cont {width: 230px; margin: 0 auto;display: flex; padding-bottom: 35px;}
.unlimited .box__cont > div {width: 50%; position: relative;}
.unlimited .box__cont > div:last-child::before {content: ""; width: 1px; height: 60px; background: #00263B; position: absolute; left: 0; top: 13px;}

@keyframes twinkle {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0.5;}
}

@media (min-width:768px) {
	.unlimited_payback--img {width: 446px; margin-top: 36px;}
	.unlimited_payback--img::before {width: 546px; height: 438px; left: -45px;}
	.saving-box {margin-top: 78px; display: flex; gap: 0 50px; justify-content: center;}
	.box__tit {font-size: 24px; line-height: 28px; padding: 12px 30px; border-radius: 40px; top: -26px; letter-spacing: -1px;}
	.box__cont{border-radius: 20px; padding: 48px 0 27px;}
	.box--cate {font-size: 24px; line-height: 28px;}
	.box--num {font-size: 34px; letter-spacing: -1.7px; margin-top: 15px;}
	.box--num em {font-size: 80px;}
	.box--txt {font-size: 22px; line-height: 30px; margin-top: 12px;}
	.basic .box__cont {width: 284px;}
	.unlimited {margin-top: 0;}
	.unlimited::before {left: -90px; transform: translate(0 ,-50%); top: 50%; width: 120px; height: 120px;}
	.unlimited .box__cont {width: 406px; padding-bottom: 69px;}
	.unlimited .box__cont > div:last-child::before {height: 120px; top: 26px;}
}