@charset "utf-8";

/* ----------------------------------------------------------------
					공통
-----------------------------------------------------------------*/
.noti-open__button {color: #777;}

/* ----------------------------------------------------------------
					visual
-----------------------------------------------------------------*/
.visual {background: #6F50E1; position: relative;}
.visual .container::before {content: ""; display: block; width: 165px; height: 89px; background: url(//img.enuri.info/images/event/2025/new-user/mar/visual-deco1.png?=v2) 0 0 / 100% no-repeat; left: 0; bottom: 0; position: absolute;}
.visual .container::after {content: ""; display: block; width: 185px; height: 108px; background: url(//img.enuri.info/images/event/2025/new-user/mar/visual-deco2.png?=v3) 0 0 / 100% no-repeat; right: 0; top: 0; 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 86px; text-align: center; color: #FFFFFF;}
.visual .title {font-size: 18px; line-height: 22px;}
.visual .title em {display: flex; font-size: 56px; line-height: 64px; font-weight: 900; padding-top: 4px; justify-content: center;}
.visual .title span {animation: flip 0.6s alternate; animation-delay: calc(.25s * var(--i));display: block; transition: 0.5s;}

@keyframes flip {
	0%{transform: translateY(0);}
	50%{transform: translateY(-8px);}
	100%{transform: translateY(0);}
}

@media (min-width:768px){
	.visual-text {padding: 130px 0 96px;}
	.visual .title {font-size: 28px; line-height: 37px;}
	.visual .title em {font-size: 88px; line-height: 76px; padding-top: 16px;}
	.visual .container::before {width: 364px; height: 189px; background: url(//img.enuri.info/images/event/2025/new-user/mar/visual-deco1-pc.png) 0 0 / 100%;left: -150px; bottom: 50px;}
	.visual .container::after {width: 573px; height: 332px; background: url(//img.enuri.info/images/event/2025/new-user/mar/visual-deco2-pc.png) 0 0 / 100%; right: -230px;}
}
@media (min-width:1025px){
	.visual .container::before {left: -50px;}
	.visual .container::after {right: -120px;}
}

/* ----------------------------------------------------------------
					tab
-----------------------------------------------------------------*/
.tab {background: #6F50E1;}
.tab .container {padding: 0; margin: 0;}
.tab-list {display: flex;}
.tab-button {width: 50%; padding: 16px 0; color: #fff; font-size: 14px; line-height: 16px; font-weight: 700;text-align: center; background: #000;}
.tab-button.on {background: #2C1581;}
.tab-content {display: none; padding-bottom: 36px;}
.tab-content.active {display: block;}
.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;}
	.tab-content {padding-bottom: 90px;}
}

/* ----------------------------------------------------------------
					first-saving
-----------------------------------------------------------------*/
.first-saving {padding: 36px 0 40px; background: #fff;}
.first-saving .title {font-size: 16px; font-weight: 500; color: #222; line-height: 20px; text-align: center;}
.first-saving .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;}
.first-saving .title em {display: block; font-size: 28px; font-weight: 700; line-height: 28px; padding-top: 2px;}
.saving-content {margin-top: 24px;}
.saving-list {display: flex; gap: 12px 0; flex-wrap: wrap;}
.saving-list li {width: 100%; border-radius: 12px; padding: 20px 0; position: relative;}
.saving-title {font-size: 18px; line-height: 22px; color: #222; font-weight: 500; padding-bottom: 14px;}
.saving-title em {display: block; color: #333; font-size: 16px; font-weight: 700; line-height: 20px; padding-left: 22px; background: url(//img.enuri.info/images/event/2025/new-user/mar/saving-title_m.svg ) 0  50% / 18px no-repeat; margin-top: 6px;}
.saving-list__text {max-width: 250px; margin: 0 auto; position: relative;}
.new-subscribe {background: url(//img.enuri.info/images/event/2025/new-user/apr/new-subscribe.png) #F4F6FA calc(50% + 55px) 50% / 139px no-repeat;}
.new-subscribe::after {content: ""; display: block; background: url(//img.enuri.info/images/event/2025/new-user/mar/i-new-subscribe.png) 0 0 / 100%; width: 45px; height: 50px; position: absolute; left:calc(50% + 30px); top: 15px; }
.new-subscribe:hover::after{animation: icowmove 0.85s;}
.app-install {background: url(//img.enuri.info/images/event/2025/new-user/apr/app-install.png) #F4F6FA calc(50% + 55px) 50% / 132px no-repeat;}
.app-install::after {content: ""; display: block; background: url(//img.enuri.info/images/event/2025/new-user/mar/i-app-install.png) 0 0 / 100%; width: 35px; height: 40px; position: absolute; left:calc(50% - 5px); top: 8px; }
.app-install:hover::after{animation: icowmove2 0.85s;}
.app-alarm {background: url(//img.enuri.info/images/event/2025/new-user/apr/app-alarm.png) #F4F6FA  calc(50% + 55px) 60% / 128px no-repeat;}
.app-alarm::after {content: ""; display: block; background: url(//img.enuri.info/images/event/2025/new-user/mar/i-app-alarm.png) 0 0 / 100%; width: 63px; height: 70px; position: absolute; left:calc(50% + 24px); top: 5px;}
.app-alarm:hover::after{animation: icowmove3 1.5s;}

.benefit-button {background: #6F50E1; font-size: 14px; color: #fff; font-weight: 500; border-radius: 50px; padding: 6px 20px; line-height: 16px;}
.benefit-button:disabled {background: #777777;}

@keyframes icowmove {
	0%, 50%, 100% {transform: translate(0, 0);}
	30%, 70% {transform: translate(0, -5px);}
}

@keyframes icowmove2 {
	0%, 50%, 100% {transform: translate(0, 0);}
	30%, 70% {transform: translate(0, 5px);}
}

@keyframes icowmove3 {
	0%,100% {transform: rotate(0deg);}
	10% {transform: rotate(2deg);}
	20%,40%,60% {transform: rotate(-4deg);}
	30%,50%,70% {transform: rotate(4deg);}
	80% {transform: rotate(-2deg);}
	90% {transform: rotate(2deg);}
}

@media (min-width:768px){
	.first-saving {padding: 70px 0 90px;}
	.first-saving .title {font-size: 30px; line-height: 34px;}
	.first-saving .title em {font-size: 48px; padding-top: 8px; line-height: 48px;}
	.first-saving .title-emoney { padding-left: 56px; background: url(//img.enuri.info/images/event/2025/new-user/mar/i-title.svg?=v2) 0 50% / 48px no-repeat;}
	.saving-content {margin-top: 40px;}
	.saving-list {gap: 0 20px;}
	.saving-list li {width: calc((100% - 40px) / 3); padding: 36px 0 190px 36px; box-sizing: border-box; border-radius: 24px;}
	.saving-title {font-size: 32px; line-height: 34px; padding-bottom: 28px; letter-spacing: -0.7px;}
	.saving-title em {font-size: 28px; line-height: 30px; margin-top: 6px; background-size: 32px; padding-left: 36px; line-height: 36px;}
	.new-subscribe {background: url(//img.enuri.info/images/event/2025/new-user/mar/new-subscribe-pc.png) #F4F6FA 100% 95% / 212px no-repeat}
	.new-subscribe::after {background: url(//img.enuri.info/images/event/2025/new-user/mar/i-new-subscribe-pc.png) 0 0 / 100%; width: 74px; height: 83px; right: 75px; top: 215px; left: auto;}
	.app-install {background: url(//img.enuri.info/images/event/2025/new-user/mar/app-install-pc.png) #F4F6FA 100% 95% / 173px no-repeat;}
	.app-install::after {background: url(//img.enuri.info/images/event/2025/new-user/mar/i-app-install-pc.png) 0 0 / 100%;width: 50px; height: 56px; top: 220px; left: auto; right: 120px;}
	.app-alarm {background: url(//img.enuri.info/images/event/2025/new-user/mar/app-alarm-pc.png) #F4F6FA 100%  95% / 173px no-repeat}
	.app-alarm::after {background: url(//img.enuri.info/images/event/2025/new-user/mar/i-app-alarm-pc.png) 0 0 / 100%;width: 93px; height: 102px; top: 210px; left: auto; right: 30px;}
	.benefit-button {font-size: 20px; padding: 12px 30px; border-radius: 100px;}
}
/* ----------------------------------------------------------------
					bonus-event
-----------------------------------------------------------------*/
.bonus-event {background: #F4F6FA; padding: 50px 0 24px; text-align: center;}
.bonus-event-content {background: #fff; border-radius: 12px; position: relative; padding: 42px 0 24px;}
.bonus-event-title {background: #6F50E1; font-size: 16px; font-weight: 700; line-height: 20px; border-radius: 8px; width: 214px; position: absolute; left: 50%; transform: translateX(-50%); top: -20px; color: #fff; padding: 10px 0;}
.bonus-event .title {font-size: 14px; line-height: 18px; color: #555; letter-spacing: -0.5px;}
.bonus-event .title em {display: block; font-size: 19px; color: #222; font-weight: 700; padding-top: 6px;}
.bonus-event-img {margin-top: 12px;}
.bonus-event-img img {width: 172px;}
.bonus-event .benefit-date {margin-top: 16px; color: #888; font-size: 13px; line-height: 14px;}

@media (min-width:768px){
	.bonus-event {padding: 70px 0 40px;}
	.bonus-event-content {border-radius: 24px; padding: 63px 0 40px;}
	.bonus-event-title {font-size: 26px; line-height: 34px; width: 395px; border-radius: 12px; padding: 12px 0; top: -28px;}     
	.bonus-event .title {font-size: 24px; line-height: 30px;}
	.bonus-event .title em {font-size: 38px; line-height: 42px; padding-top: 8px;}
	.bonus-event-img {margin-top: 25px;}
	.bonus-event-img img {width: 344px;}
	.bonus-event .benefit-date {margin-top: 32px; font-size: 20px; line-height: 28px;}
}

/* ------------------- ---------------------------------------------
					first-buying-goods
-----------------------------------------------------------------*/
.first-buying-goods {padding: 36px 0 40px; text-align: center;}
.first-buying-goods .title {font-size: 16px; font-weight: 500; color: #222; line-height: 20px; text-align: center;}
.first-buying-goods .title em {display: block; font-size: 28px; font-weight: 700; line-height: 28px; padding-top: 2px;}
.first-buying-img {margin-top: 24px;}
.first-buying-img img {width: 178px;}
.condition {margin: 16px auto 20px; width: 210px;}
.condition span {display: block; font-size: 12px; line-height: 18px; color: #888; text-align: left; letter-spacing: -0.5px;}
.apply-button {font-size: 16px; line-height: 20px; font-weight: 700; color: #fff; background: #6F50E1; border-radius: 50px; padding: 12px 65px;}
.apply-button:disabled {background: #777;}

@media (min-width: 768px){
	.first-buying-goods {padding: 70px 0 90px;}
	.first-buying-goods .title {font-size: 30px; line-height: 34px;}
	.first-buying-goods .title em {font-size: 48px; line-height: 54px; padding-top: 6px;}
	.first-buying-img {margin-top: 40px;}
	.first-buying-img img {width: 356px;}
	.condition {width: 350px; margin: 28px auto 36px;}
	.condition span {font-size: 20px; line-height: 28px;}
	.apply-button {font-size: 26px; line-height: 34px; border-radius: 100px; padding: 16px 130px;}
}
/* ----------------------------------------------------------------
					participatory-methods
-----------------------------------------------------------------*/
.participatory-methods {background: #F4F6FA; padding: 36px 0;}
.participatory-methods .title {font-size: 18px; line-height: 24px; color: #222; font-weight: 600; text-align: center;}
.methods-step {margin: 24px 0;}
.step__item {background: #fff; padding: 0 40px 0 24px; border-radius: 50px; display: flex; gap: 0 25px; align-items: center; height: 100px; box-sizing: border-box; position: relative;}
.step__item:not(:first-child) {margin-top: 35px;}
.step__item:not(:first-child)::before {content: ""; width: 17px; height: 11px;  position: absolute; left: 50%; transform: translateX(-50%); background: url(//img.enuri.info/images/event/2025/new-user/mar/step-arrow.png) #F4F6FA 0 0 / 100% no-repeat; top: -25px; animation: icowmove2 2.2s infinite;}
.step-num {font-size: 16px; line-height: 20px; color: #6F50E1; font-weight: 700; text-align: center; position: relative;}
.step-num::before {content: ""; width: 1px; height: 100%; background: #ddd; position: absolute; right: -12px}
.step-content {word-break: keep-all; font-size: 11px; line-height: 14px; color: #777; }
.step-content h3 {font-size: 13px; line-height: 16px; color: #444; font-weight: 500; padding-bottom: 4px;}

@media (min-width: 768px){
	.participatory-methods {padding: 70px 0 64px;}
	.participatory-methods .title {font-size: 36px; line-height: 34px;}
	.methods-step {margin: 40px 0;}
	.step__item {padding: 0 64px; gap: 0 80px; height: 120px; border-radius: 100px;}
	.step__item:not(:first-child) {margin-top: 48px;}
	.step__item:not(:first-child)::before {width: 34px; height: 22px; top: -35px;}
	.step-num {font-size: 32px; line-height: 34px;}
	.step-num::before {right: -40px; width: 2px;}
	.step-content {font-size: 20px; line-height: 26px;}
	.step-content h3 {font-size: 26px; line-height: 28px; padding-bottom: 4px;}
}

/* ----------------------------------------------------------------
					popular-goods
-----------------------------------------------------------------*/
.popular-goods {padding-top: 36px;}
.popular-goods .title {font-size: 16px; font-weight: 500; color: #222; line-height: 20px; text-align: center;}
.popular-goods .title em {display: block; font-weight: 700; font-size: 24px; line-height: 28px; padding-top: 2px;}
.popular-goods .title em span {color: #6F50E1;}
.popular-goods__contents {padding: 24px 0 34px;}
.popular-goods__list {display: flex; flex-wrap: wrap; gap: 28px 10px;}
.popular-goods__item {width: calc(50% - 5px);}
.popular-goods__item a {display: block;}
.item-img {position: relative; height: 0; padding-top: 100%; position: relative; border: 4px; overflow: hidden;}
.item-img img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.item-img::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 4px;border: 1px solid #eee;background-color: rgba(0, 0, 0, .02);z-index: 2;}
.item-info {margin-top: 9px;}
.item-name {font-size: 12px; color: #444; line-height: 16px; white-space: wrap; overflow: hidden; display: -webkit-box; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all;}
.item-price {margin-top: 7px; font-size: 12px; color: #000; line-height: 20px;}
.item-price em {font-size: 14px; font-weight: 700;}
.item-etc {display: flex; margin-top: 7px; align-items: center; gap: 2px 9px; flex-wrap: wrap; line-height: 15px;}
.item-rate {position: relative; flex: none; color: #444; font-size: 11px;}
.item-rate::before {content: "\2605";color: #FFA112;line-height: 12px;font-size: 12px;}
.item-rate em { font-weight: 700; color: #222;}
.item-price-compare {flex: 0 0 auto; font-size: 11px; color: #444; position: relative;}
.item-price-compare::before {content: ""; width: 1px; height: 100%; background: #D9D9D9; position: absolute; left: -4px;}
.move-bestshop {display: block;width: calc(100% - 44px);max-width: 468px; margin: 0 auto;font-size: 16px; line-height: 20px; color: #444; font-weight: 600; border: 1px solid #444; border-radius: 50px; padding: 12px 0; text-align: center; position: relative;} 
.move-bestshop::after {content: ""; display: block; width: 7px; height: 10px; background: url(//img.enuri.info/images/event/2025/new-user/mar/move-bestshop.png) 0 0 / 100%; position: absolute; right: 46px; top: 50%; transform: translateY(-50%);}

@media (min-width: 768px){
	.popular-goods {padding-top: 70px;}
	.popular-goods .title {font-size: 30px; line-height: 34px;}
	.popular-goods .title em {font-size: 48px; line-height: 54px; padding-top: 6px;}
	.popular-goods__contents {padding: 50px 0 40px;}
	.popular-goods__list {gap: 50px 20px;}
	.popular-goods__item {width: calc((100% - 40px) / 3);}
	.item-info {margin-top: 12px;}
	.item-name {font-size: 16px; line-height: 22px;}
	.item-price {margin-top: 8px; line-height: 22px;font-size: 14px;}
	.item-price em {font-size: 20px;}
	.item-etc  {line-height: 16px; margin-top: 9px;}
	.item-rate {font-size: 13px;}
	.item-rate::before {font-size: 16px;}
	.item-price-compare {font-size: 13px;}
	.move-bestshop {font-size: 26px; line-height: 34px; padding: 15px; border-radius: 100px;}
	.move-bestshop::after  {width: 14px; height: 20px; right: 80px;}
}

@media (min-width: 1025px){
	.popular-goods__item {width: calc((100% - 60px) / 4);}
}