@charset "utf-8";
.container {box-sizing: border-box;}
.floating-button {bottom: 85px;}

@media (min-width:768px) {
	.floating-button {bottom: 125px;}
}
@media (min-width:1025px) {
	.container {padding: 0}

}
/* ----------------------------------------------------------------
					비쥬얼
-----------------------------------------------------------------*/
.visual {text-align: center; position: relative; background: #E6F5FF;}
.visual .container {padding: 70px 0;}
.page-close__button::before, 
.page-close__button::after {background: #999;}
.visual-txt {width: 280px; margin: 0 auto ; letter-spacing: -0.8px; position: relative;}

.visual-tit {font-size: 36px; font-weight: 800; line-height: 40px; color: #1183EE; text-align: center;}
.visual-tit em {color:#FE5C00; margin-left: 58px;}
.visual-date {font-size: 12px; font-weight: 500; color: #888; line-height: 14px; margin-top: 6px; text-align: right;}

@media (min-width:768px) {
	.visual .container {padding: 116px 0 156px; position: relative;}
	.visual .container::before {content: ""; width: 87px; height: 37px; background: url("//img.enuri.info/images/event/2025/pedometer/mar/web/visual-deco1.svg");display: block; position: absolute; right: -100px; top: 207px;}
	.visual .container::after {content: ""; width: 56px; height: 24px; background: url("//img.enuri.info/images/event/2025/pedometer/mar/web/visual-deco2.svg");display: block; position: absolute; left: -100px; top: 167px;}
	.visual-txt {width: 730px; letter-spacing: -1px;}
	.visual-tit {font-size: 90px; line-height: 100px;}
	.visual-tit em {margin-left: 170px;}
	.visual-date {font-size: 24px; line-height: 30px; margin-top: 8px;}
}


/* ----------------------------------------------------------------
					혜택 공통
-----------------------------------------------------------------*/
.benfit {background: #009DFF; position: relative; text-align: center; }  
.benfit-inner {background: #fff; border-radius: 16px; padding: 24px 0 32px; position: relative;}
.benfit-num {font-size: 18px; font-weight: 600; line-height: 24px; position: relative; color: #FE8946; padding-top: 22px; background: url("//img.enuri.info/images/event/2024/pedometer/aug/web/cont-num.png?=v2") no-repeat 50% 0 / 54px}
.benfit-num em {font-size: 24px; font-weight: 700; margin-left: 3px; vertical-align: -2px; color: #FE5C00;}
.benfit-tit {margin-top: 15px; font-size: 18px; color: #333; line-height: 22px;}
.benfit-tit em {display: block; font-weight: 700}
.benfit-tit .emoney {padding-left: 18px;background: url("//img.enuri.info/images/event/2025/pedometer/mar/web/emoney.png") no-repeat 0 50% / 16px}
.benfit-content {margin: 17px auto 0; position: relative; font-size: 0; text-indent: -9999em;}

@media (min-width:768px) {
	.benfit-inner {padding: 54px 0 74px;}
	.benfit-num {font-size: 34px; line-height: 48px; background-size: 108px; padding-top: 40px;}
	.benfit-num em {font-size: 46px; margin-left: 6px;}
	.benfit-tit {font-size: 34px; line-height: 42px; margin-top: 24px;}
	.benfit-tit .emoney {padding-left: 36px; background-size: 32px;}
	.benfit-content {margin-top: 60px;}
}
@media (min-width:1300px) {
	.benfit-inner::before {content: ""; display: block; width: 141px; height: 58px; background: url("//img.enuri.info/images/event/2025/pedometer/mar/web/inner-deco1.svg");position: absolute; z-index: 2;}
	.benfit-inner::after {content: ""; display: block; width: 130px; height: 117px; background: url("//img.enuri.info/images/event/2025/pedometer/mar/web/inner-deco2.svg");position: absolute; z-index: 2;}
}
/* ----------------------------------------------------------------
					benfit1
-----------------------------------------------------------------*/
.benfit1 {padding-top: 50px; position: relative;}
.benfit1::after {content: ""; display: block; width: 260px; height: 178px; background: url("//img.enuri.info/images/event/2025/pedometer/jun/app/visual-img.png") 0 0 / 100% no-repeat; position: absolute; top: -155px; left: 50%; z-index: 2;transform: translateX(-50%);}
.benfit1 .benfit-info {background: #FFF9F4; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 18px 16px; max-width: 350px; margin: 18px auto 0;}
.benfit-content1 {width: 260px; height: 210px; background: url("//img.enuri.info/images/event/2025/pedometer/mar/web/benefit1.png") 50% 0 / 100% no-repeat;}
.benfit-content1::after {content: "";display: block; width: 91px; height: 110px; bottom: 95px; left: 113px; animation: click1 2.4s infinite;background: url("//img.enuri.info/images/event/2024/pedometer/aug/web/ico-hand.png?=v2") 0 0 /100%; position: absolute;}

@media (min-width:768px) {
	.benfit-content1 {width: 520px; height: 420px;}
	.benfit1::after { width: 520px; height: 356px; position: absolute; top: -330px;}
	.benfit-content1::after {width: 182px; height: 220px; left: 230px; bottom: 188px;} 
}
@media (min-width:1300px) {
	.benfit1 .benfit-inner::before {bottom: 330px; left: -90px;}
	.benfit1 .benfit-inner::after {bottom: -30px; right: 90px;}
}

@keyframes click1 {
	0% {transform: rotate(0deg) scale(1)}
	25%{transform: rotate(-3deg) scale(1.02)}
	50% {transform: rotate(0deg) scale(1)}
	75% {transform: rotate(-3deg) scale(1.02)}
	100% {transform: rotate(0deg) scale(1)}
}
@keyframes click2 {
	0% {transform: translateX(0) scale(1)}
	25%{transform: translateX(5px) scale(1.02)}
	50% {transform: translateX(0) scale(1)}
	75% {transform: translateX(5px) scale(1.02)}
	100% {transform: translateX(0) scale(1)}
}


/* ----------------------------------------------------------------
					benfit2
-----------------------------------------------------------------*/
.benfit2 {padding: 16px 0 36px;}
.benfit-content2 {width: 260px; height: 206px; background: url("//img.enuri.info/images/event/2025/pedometer/jun/web/benefit2.png") 50% 0 / 100% no-repeat;}
.benfit-content2::before {content: ""; display: block;  position: absolute; width: 104px; height: 64px; top: 50px; left: 55px; animation: click2 2.4s infinite alternate;background: url("//img.enuri.info/images/event/2024/pedometer/aug/web/ico-hand3.png") 0 0 /100%;}

@media (min-width:768px) {
	.benfit2 {padding: 60px 0 105px;}
	.benfit-content2 {width: 520px; height: 412px;}
	.benfit-content2::before {width: 208px; height: 128px; top: 65px; left: 108px;}
}

@media (min-width:1300px) {
	.benfit2 .benfit-inner::before {top: 72px; right: -108px;}
	.benfit2 .benfit-inner::after {bottom: -35px; left: 50px;}
}
/* ----------------------------------------------------------------
					floattab
-----------------------------------------------------------------*/
.floattab {width:100%; height: 80px; background:#00335C; z-index: 10; color: #fff;  box-sizing: border-box;}
.floattab.fixed {position: fixed; bottom: 0;}
.floattab .container {display: flex;height: 100%; padding: 15px 12px; align-items: center; justify-content: space-between;}
.flottab__txt {font-size: 12px; font-weight: 700; line-height: 14px;}
.btn__app-install {font-size: 10px; font-weight: 700; color: #000921; background: #DAEDFF; width: 105px; border-radius: 50px; height: 30px; border: 1px solid rgba(0, 0, 0, 0.1);}

@media (min-width:768px) {
	.floattab {height: 120px;}
	.flottab__txt {font-size: 24px; line-height: 30px;}
	.btn__app-install {width: 280px;height: 60px;font-size: 20px; }
}