@charset "utf-8";

.wrap{width:100%;min-height:100vh;position: relative;display:flex;flex-direction: column;align-items: center;}
.wrap *{box-sizing:border-box;}

/* 상단 BI */
.header{flex:none;width:100%;height:60px;display:flex;justify-content: center;border-bottom:1px solid #eee;min-width:auto;}
.header-inner{width:100%;max-width:680px;height:100%;display:flex;align-items: center}
/* 로고는 /css/event/pro_headfoot.css 의 .header__logo-link 패턴을 따른다 */
/* ㄴ font-size:0 이 있어야 text-indent 로 밀어낸 글자가 줄 상자를 만들지 않는다 */
.header-logo{display:block;width:65px;height:18px;font-size:0;text-indent:-9999em;background:url(//img.enuri.info/images/icon/svg/icon_logo_ko.svg) no-repeat 0 50% / 100% auto}

.inner{flex:1;width:100%;max-width:680px;display:flex;flex-direction: column;align-items: center;justify-content: center;padding:40px 0;letter-spacing:-.3px}

.title{display:flex;flex-direction: column;align-items: center;gap:20px;}
.title-badge{display:inline-flex;align-items: center;padding:6px 14px 6px 16px;border-radius:9999px;background-color:#e5f8f1}
.title-badge img{display:block;width:131px;height:16px}
.title-text{margin:0;font-size:36px;text-align:center;line-height:1.2;font-weight:700;color:#0f0f0f;}
.title-text em{font-style:normal;color:#3c7e74}

.loader{margin-top:28px;width:548px;display:flex;flex-direction: column;text-align:center}
.loader-image{height:227px;display:flex;align-items:center;justify-content:center}
.loader-gif,
.loader-canvas{height:100%;object-fit:contain}
.loader-canvas{display:none}
.loader-bar{position:relative;margin-top:28px;width:100%;height:8px;border-radius:9999px;overflow:hidden;background:#f5f7fa}
.loader-bar::after{content:'';position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(to right,#00c73c,#3b7ae0);animation:loader-progress 2.5s linear infinite}
.loader-bar.is-paused::after{animation-play-state:paused}

@keyframes loader-progress{from{width:0%}to{width:100%}}

.loader-text{color:#767676;font-size:16px;line-height:1.4;margin-top:20px;}
.loader-controller{margin-top:20px;display:flex;justify-content: center;gap:12px;flex-wrap:wrap}
.loader__button{height:36px;padding:0 24px;font-size:16px;line-height:1;border-radius:4px;border:1px solid #d2d2d2;background-color:#fff;white-space:nowrap;}
.loader__button--stop{color:#0f0f0f;}
.loader__button--play{border-color:#333;background-color:#333;color:#fff;font-weight:700}

.notice{width:100%;margin-top:28px;background-color:#f8f8f8;padding:36px 56px;display:flex;flex-direction: column;align-items: center;gap:12px}
.notice-title{margin:0;width:568px;max-width:100%;font-size:16px;line-height:1.4;color:#0f0f0f;font-weight:700;}
.notice-title em{font-style:normal;color:#1a70dd;}
.notice-content{width:568px;max-width:100%;display:flex;flex-direction: column;gap:8px;counter-reset:notice-item}
.notice-content__item{font-size:14px;line-height:1.4;color:#767676;position: relative;padding-left:21px;counter-increment:notice-item}
.notice-content__item:before{content:counter(notice-item)".";position: absolute;left:0;top:0}

.copyright{font-size:12px;line-height:1.4;color:#767676;margin-top:28px}

@media (max-width:680px) {
	.inner{
		max-width:none;
		justify-content: flex-start;
		padding:40px 0 0;
	}

	.header{
		height:44px;
	}

	.header-inner{
		max-width:none;
		padding:0 20px;
	}

	.header-logo{
		width:58px;
		height:16px;
	}

	.title{
		padding:0 12px;
		gap:16px
	}

	.title-text{
		font-size:26px;
	}

	.loader{
		margin-top:24px;
		width:calc(100% - 80px);
	}

	.loader-image{
		height:165px;
	}

	.loader-bar{
		margin-top:24px;
		height:6px;
	}

	.loader-text{
		margin-top:16px;
		font-size:13px;
	}

	.loader-controller{
		margin-top:16px;
	}

	.notice{
		margin-top:36px;
		padding:32px 20px;
	}

	.notice-title{
		width:auto;
		font-size:14px;
	}

	.notice-content{
		width:auto;
	}

	.notice-content__item{
		font-size:12px;
		padding-left:18px;
	}

	.copyright{
		width:100%;
		font-size:11px;
		text-align:center;
		margin:20px 0;
	}
}