@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: #FFF7E8; overflow: visible;}
.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-txt::after {content: ""; width: 262px; height: 177px;  background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/visual-img.png") 0 0 / 100%; position: absolute; top: -24px; left: 10px; z-index: 2;}
.visual-tit {font-size: 36px; font-weight: 800; line-height: 40px; color: #944D18; 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 { background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/visual-bg.png?=v2") center center  #FFF7E8 no-repeat;}
	.visual .container {padding: 116px 0 156px; position: relative;}
	.visual-txt {width: 730px; letter-spacing: -1px;}
	.visual-txt::after {width: 524px; height: 354px; left: 110px;}
	.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;}
}


/* ----------------------------------------------------------------
					혜택 공통
-----------------------------------------------------------------*/
.benefit {background: #996500; position: relative; text-align: center; padding-top: 30px;}  
.benefit-inner {background: #fff; border-radius: 16px; padding: 24px 16px 36px; position: relative;}
.benefit-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}
.benefit-num em {font-size: 24px; font-weight: 700; margin-left: 3px; vertical-align: -2px; color: #FE5C00;}
.benefit-tit {margin-top: 15px; font-size: 18px; color: #333; line-height: 22px;}
.benefit-tit em {display: block; font-weight: 700}
.benefit-tit .emoney {padding-left: 18px;background: url("//img.enuri.info/images/event/2025/pedometer/mar/web/emoney.png") no-repeat 0 50% / 16px}
.benefit-content {background: #FFF9F4; margin-top: 24px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 11px;}
.benefit-info {font-size: 0; text-indent: -999em; position: relative; margin: auto;}

@media (min-width:768px) {
	.benefit {padding-top: 60px;}
	.benefit-inner {padding: 54px 56px 70px;}
	.benefit-num {font-size: 34px; line-height: 48px; background-size: 108px; padding-top: 40px;}
	.benefit-num em {font-size: 46px; margin-left: 6px;}
	.benefit-tit {font-size: 34px; line-height: 42px; margin-top: 24px;}
	.benefit-tit .emoney {padding-left: 36px; background-size: 32px;}
	.benefit-content {margin-top: 60px;}
}

/* ----------------------------------------------------------------
					benefit1
-----------------------------------------------------------------*/
.benefit1 {padding-top: 50px;}
.benefit1 .benefit-content {padding: 20px 26px 24px;}
.get-benefit {color: #FE5C00; font-weight: 500; background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/get-benefit_m.png") 50% 50% / 186px no-repeat; height: 28px; line-height: 28px;}
.benefit-info1 {background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/benefit-info1_m.png") 50% 50% /100%  no-repeat; width: 216px; height: 369px; margin-top: 30px;}
.benefit-info1::before {content: "";display: block;width: 91px;height: 110px;top: -20px;left: 95px;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;}
.benefit-info1::after { content: ""; position: absolute; width: 104px; height: 64px; bottom: 80px; left: 35px; 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:1025px) {
	.get-benefit {height: 56px; background-size: 372px; line-height: 56px; font-size: 26px; font-weight: 600;}
	.benefit-info1 {background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/benefit-info1.png") 50% 50% /100%  no-repeat; width: 828px; height: 319px; margin-top: 58px;}
	.benefit-info1::before {width: 182px; height: 220px; left: 170px; top: -40px;}
	.benefit-info1::after {width: 208px; height: 128px; left: auto; right: 150px; bottom: 140px;}
}

@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)}

}
@media (min-width:1300px) {
	.benefit1 .benefit-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 ;top: 344px; left: -110px;}
	.benefit1 .benefit-inner::after {content: ""; display: block; width: 170px; height: 112px; background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/inner-deco2.png");position: absolute; z-index: 2;right: 0; bottom: -22px;}
}


/* ----------------------------------------------------------------
					benefit2
-----------------------------------------------------------------*/
.benefit2 .benefit-content {padding: 33px 0 26px;}
.benefit-info2 {background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/benefit-info2_m.png?=v2") 50% 50% /100%  no-repeat; width: 160px; height: 166px;}
.benefit-info2::before { content: ""; position: absolute; width: 104px; height: 64px; top: 40px; left: -50px; 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:1025px) {
	.benefit-info2  {width: 320px; height: 332px;}
	.benefit-info2::before {width: 208px; height: 128px; left: -95px; top: 90px;}
}

@media (min-width:1300px) {
	.benefit2 .benefit-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 ;top: 272px; right: -110px;}
}

/* ----------------------------------------------------------------
					benefit3
-----------------------------------------------------------------*/
.benefit3 {padding-bottom: 50px;}
.benefit3 .benefit-content {padding: 30px 0;}
.benefit-info3 {background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/benefit-info3_m.png") 50% 50% /100%  no-repeat; width: 268px; height: 164px;}
.benefit-info3::before { content: ""; position: absolute; width: 104px; height: 64px; top: 35px; right: 10px; animation: click2 2.4s infinite alternate; background: url(//img.enuri.info/images/event/2024/pedometer/aug/web/ico-hand4.png) 0 0 / 100%;}

@media (min-width:1025px) {
	.benefit3 {padding-bottom: 100px;}
	.benefit-info3 {width: 536px; height: 328px;} 
	.benefit-info3::before {width: 208px; height: 128px; top: 60px;}
}
@media (min-width:1300px) {
	.benefit3 .benefit-inner::after {content: ""; display: block; width: 170px; height: 112px; background: url("//img.enuri.info/images/event/2025/pedometer/oct/web/inner-deco2.png");position: absolute; z-index: 2;left: 0; bottom: -22px;}
}

/* ----------------------------------------------------------------
					floattab
-----------------------------------------------------------------*/
.floattab {width:100%; height: 80px; background:#563900; 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: #503500; background: #FFF4DE; 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; }
}