@charset "utf-8";



/* ----------------------------------------------------------------
					공통
-----------------------------------------------------------------*/
.noti-open__button {color: #777;}
.section-name {display: inline-block; font-size: 14px; line-height: 16px; color: #fff; font-weight: 600; padding: 6px 15px; border-radius: 100px; background: #FF9D2E;}
.tab-content {padding: 42px 0; text-align: center;}
.tab-content .title {font-size: 16px; color: #222; line-height: 20px; margin-top: 12px; font-weight: 500;}
.tab-content .title em {display: block; font-size: 24px; line-height: 28px; font-weight: 700; padding-top: 2px;}
.title-emoney { padding-left: 32px; background: url(//img.enuri.info/images/event/2025/new-user/mar/i-title_m.svg) 0 50% / 28px no-repeat;}
.content { max-width: 800px; margin: 24px auto 0;}
.apply-button-area {margin-bottom: 24px;}
.apply-button {font-size: 16px; line-height: 20px; font-weight: 700; color: #fff; background: #DF7000 ; border-radius: 50px; padding: 12px 65px;}
.apply-button:disabled {background: #777;}

@media (min-width:768px){
	.tab-content {padding: 60px 0 64px;}
	.section-name {font-size: 20px; line-height: 20px; padding: 12px 30px;}
	.title-emoney {padding-left: 60px; background-size: 56px;}
	.tab-content .title {font-size: 30px; line-height: 34px; margin-top: 24px;}
	.tab-content .title em {font-size: 48px; line-height: 52px; padding-top: 6px;}
	.content {margin-top: 46px;}
	.apply-button {font-size: 26px; line-height: 24px; padding: 16px 130px; border-radius: 100px;}
	.apply-button-area {margin-bottom: 40px;}
}

/* ----------------------------------------------------------------
					visual
-----------------------------------------------------------------*/
.visual {background: #FF9D2E; position: relative;}
.visual .container::before {content: ""; display: block; width: 186px; height: 111px; background: url(//img.enuri.info/images/event/2025/buying/mar/visual-deco1.png?=v2) 0 0 / 100% no-repeat; left: -15px; top: 0; position: absolute;}
.visual .container::after {content: ""; display: block; width: 114px; height: 174px; background: url(//img.enuri.info/images/event/2025/buying/mar/visual-deco2.png) 0 0 / 100% no-repeat; right: -25px; bottom: -20px; position: absolute;}
.page-close__button::before, 
.page-close__button::after {box-shadow: 0 0 7px 4px rgba(0,0,0,0.15)}
.visual-text {padding: 100px 0 60px; text-align: center; color: #FFFFFF;position: relative;}
.visual-text::before {content: ""; display: block; width: 72px; height: 56px; background: url(//img.enuri.info/images/event/2025/buying/mar/visual-deco3.png?=v2) 0 0 / 100% no-repeat; right: -24px; bottom: 88px; position: absolute; z-index: 1; animation: icoenter 1.5s forwards; opacity: 0;}
.visual-text::after {content: ""; display: block; width: 72px; height: 56px; background: url(//img.enuri.info/images/event/2025/buying/mar/visual-deco4.png?=v2) 0 0 / 100% no-repeat; right: -20px; bottom: 58px; position: absolute; z-index: 1; animation: icoenter 1.5s forwards; animation-delay: 0.5s; opacity: 0;}
.visual-date::after {content: ""; display: block; width: 72px; height: 56px; background: url(//img.enuri.info/images/event/2025/buying/mar/visual-deco5.png?=v2) 0 0 / 100% no-repeat; right: -18px; bottom: 28px; position: absolute; z-index: 1; animation: icoenter 1.5s forwards; animation-delay: 1s; opacity: 0;}
.visual .title {font-size: 18px; line-height: 22px;}
.visual .title em {font-size: 56px; line-height: 64px; font-weight: 900; padding-top: 4px; justify-content: center; display: block;}
.visual-date {font-size: 15px; line-height: 18px; margin-top: 8px;}

@keyframes icoenter {
	0%{transform: translateY(100%);}
	100%{transform: translateY(0); opacity: 1;}
}

@media (min-width:768px){
	.visual .container::before {width: 372px; height: 222px; left: -25px;}
	.visual .container::after {width: 340px; height: 348px; background: url(//img.enuri.info/images/event/2025/buying/mar/visual-deco2-pc.png?=v2) 0 0 / 100% no-repeat; right: -85px; bottom: -70px;}
	.visual-text {padding: 90px 0 85px;}
	.visual-text::before {width: 144px; height: 114px; bottom: 150px; right: 40px;}
	.visual-text::after {width: 144px; height: 114px; bottom: 95px; right: 53px;}
	.visual-date::after {width: 144px; height: 114px; bottom: 40px; right: 66px;}
	.visual .title {font-size: 28px; line-height: 37px;}
	.visual .title em {font-size: 88px; line-height: 88px; padding-top: 16px;}
	.visual-date {font-size: 24px; line-height: 28px; margin-top: 24px;}
}

/* ----------------------------------------------------------------
					tab
-----------------------------------------------------------------*/
.tab {background: #FF9D2E; width: 100%; }
.tab.is_fixed {position: fixed; z-index: 100;}
.tab .container {padding: 0; margin: 0;}
.tab-list {display: flex;}
.tab-button {width: 100%; padding: 16px 0; color: #fff; font-size: 14px; line-height: 16px; font-weight: 700;width: calc(100% / 3); text-align: center; background: #000; ; transition: 0.3s all;border-right: 1px solid #FF9D2E;}
.tab-button:first-child {border-left: 1px solid #FF9D2E;}
.tab-button.on {background: #DF7000;}
.new-user {background: #F4F6FA;}

@media (min-width:768px){
	.tab .container {padding: 0 10px; margin: 0 auto;}
	.tab-button {font-size: 24px; line-height: 28px; padding: 18px 0;}
}

/* ----------------------------------------------------------------
					basic-saving 
-----------------------------------------------------------------*/
.basic-saving {background: #FAF7F4;}
.basic-saving .swiper-container {overflow: hidden;  margin-bottom: 50px; position: relative;}
.basic-saving .swiper-slide {background: #fff; border-radius: 12px;}
.basic-saving .swiper-slide img {width: 300px; margin: 0 auto;}
.basic-saving .swiper-pagination {position: absolute; bottom: -24px !important;}
.basic-saving .swiper-pagination-bullet {width: 8px; height: 8px; background: #ccc;}
.basic-saving .swiper-pagination-bullet-active {background: #666; width: 18px; height: 6px; border-radius: 10px;}

@media (min-width:768px){
	.basic-saving .swiper-container {margin-bottom: 96px;}
	.basic-saving .swiper-slide {border-radius: 24px;}
	.basic-saving .swiper-slide img {width: 720px}
	.basic-saving .swiper-pagination {bottom: -50px !important;}
	.basic-saving .swiper-pagination-bullet {width: 12px; height: 12px;}
	.basic-saving .swiper-pagination-bullet-active {width: 36px; height: 12px; border-radius: 20px;}
}

/* ----------------------------------------------------------------
					additional-saving
-----------------------------------------------------------------*/
.chart {display: flex; max-width: 400px; margin: 0 auto; padding-top: 14px; position: relative;}
.chart::after {content: ""; width: 100%; height: 1px; background: #999; position: absolute; bottom: 0;}
.chart-item {position: relative; width: 25%;}
.graph-bar {width: 26px; border-radius: 25px 25px 0 0; font-size: 0; text-indent: -9999em; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.graph {height: 120px;}
.graph-bar {height: 0; background: #f87e16;}
.graph-bar1 {opacity: 0.5;}
.graph-bar::before {display: block; position: absolute; top: -18px; font-size: 13px; font-weight: 500; letter-spacing: -0.9px; width: 25px;}
.graph-bar1::before {content: "5회";color: #F9BB85;}
.graph-bar2 {opacity: 0.7;}
.graph-bar2::before {content: "10회";color: #F9A359;}
.graph-bar3 {opacity: 0.85;}
.graph-bar3::before {content: "15회";color: #F89037;}
.graph-bar4::before {content: "20회";color: #F87E16;}
.chart-name {width: 100%; position: absolute; padding-top: 6px;}
.chart-name span {font-size: 12px; line-height: 14px; color: #444; font-weight: 500;padding-left: 14px; background: url(//img.enuri.info/images/event/2024/pedometer/aug/app/i-get-emoney.svg) no-repeat 0 center / 12px;}
.additional-saving-noti {max-width: 250px; margin: 44px auto 20px; }
.additional-saving-noti span {display: block; text-align: left; color: #888; font-size: 12px; line-height: 18px;}

@media (min-width:768px){
	.chart {max-width: 600px;}
	.graph-bar {width: 50px; border-radius: 50px 50px 0 0; }
	.graph {height: 240px;}
	.graph-bar::before  {font-size: 24px; width: 50px; top: -32px;}
	.chart-name {padding-top: 8px}
	.chart-name span {font-size: 22px; line-height: 28px; padding-left: 26px; background-size: 24px;}
	.additional-saving-noti {max-width: 420px; margin: 80px auto 36px;}
	.additional-saving-noti span {font-size: 20px; line-height: 28px;}
}

/* ----------------------------------------------------------------
					special-saving
-----------------------------------------------------------------*/
.special-saving {background: #FAF7F4;}
.goods-saving-rate {margin-bottom: 28px;}
.goods-saving__list {display: flex; gap: 8px 0; flex-wrap: wrap;}
.goods-saving__list li {width: 100%; background: #FFFFFF; border-radius: 12px; padding: 25px 16px; position: relative; height: 96px; box-sizing: border-box; }
.saving-text {text-align: left;font-size: 13px; color: #222; font-weight: 500; max-width: 200px; margin: 0 auto; position: relative; height: 100%; line-height: 16px;}
.saving-text1::before{content: ""; width: 42px; height: 74px; display: block; background: url(//img.enuri.info/images/event/2025/buying/mar/special-saving1.png?=v2) 0 0 / 100%; position: absolute; bottom: -25px; right: 0;  animation: icomove 3s infinite alternate;}
.saving-text2::before{content: ""; width: 56px; height: 72px; display: block; background: url(//img.enuri.info/images/event/2025/buying/mar/special-saving2.png?=v2) 0 0 / 100%; position: absolute; bottom: -16px; right: 0; animation: icomove 3s infinite alternate; animation-delay: 3s;}
.saving-text-stress {font-size: 12px; margin-top: 2px;}
.saving-text-stress em {font-size: 26px; line-height: 28px; font-weight: 800; margin-top: 2px;}

@keyframes icomove {
	0%, 20%, 40%, 100% {transform: translate(0, 0); }
	10%, 30% {transform: translate(0, -3px);}
}


@media (min-width:768px){
	.goods-saving-rate {margin-bottom: 46px;}
	.goods-saving__list {gap: 0 40px;}
	.goods-saving__list li {width: calc(50% - 20px) ; border-radius: 24px; padding: 36px; height: 230px;}
	.saving-text {font-size: 32px; max-width: 100%; margin: 0; ; line-height: 34px;}
	.saving-text-stress {font-size: 36px} 
	.saving-text-stress em {font-size: 90px; line-height: 92px; margin-top: 12px;}
	.saving-text1::before {width: 84px; height: 148px;bottom: -36px;}
	.saving-text2::before{width: 112px; height: 148px; bottom: -36px;}
}