:root,
html {
	--white: #fff;
	--gray-pale: #f6f7f9;
	--gray-lightest: #f3f4f5;
	--gray-border: #d5dbe0;
	--gray-light: #9ea3ab;
	--gray-mid: #6f737a;
	--gray-dark: #252d3a;
	--black: #000;
	--orange: #fab005;
	--red-color: #fe5f57;
	--green-color: #9ccf48;
	--main-color: #1c61a6;
	--main-light: #1da3ec;
	--mint-blue: #00c2d5;
	--blue: #1c61a6;
	--main-gra: linear-gradient(to left, #ff9c8b, #ff687c);
	--main-gra-rev: linear-gradient(to right, #ff9c8b, #ff687c);
	--width: 1024px;
	--input-rect: 18px;
	--input-h: 36px;
	--cell-h: 50px;
	--Type1: #fab005;
	--Type2: #1c66af;
	--Type3: #116c43;
	--Type4: #d11e71;
	--Type5: #541d85;
	--Type6: #ac5d3c;
	--Type7: #00b0cf;
	--font-size: 14px;
	--font-size12: 12px;
	--top-h: 50px;
	--map-color: #f6f7f9;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	letter-spacing: -0.05em;
}

img {
	border: none;
	vertical-align: top;
	max-width: 100%;
}

html,
body {
	height: 100%;
	color: var(--gray-dark);
	font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
	overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0;
	font-size: var(--font-size);
	background-color: #000;
}

a {
	color: inherit;
	text-decoration: none;
}

.btns a.link {
	color: #1c61a6;
	position: relative;
}

.btns a.link:before {
	content: '';
	background: #fff;
	opacity: 0.9;
	z-index: -1;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

.btns a.link:hover {
	color: #fff;
}

@media (max-width: 820px) {
	.gate ul li .ment .btns a {
		display: block;
	}
}

.wrap {
	background-color: #000;
}

.gate {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.gate ul {
	flex-grow: 1;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	height: auto;
	flex-grow: 1;
	width: 100%;
	position: relative;
	background-color: #fff;
}

.gate ul li.member {
	display: flex;
	gap: 20px;
	width: 40%;
	justify-content: flex-start;
	padding: 30px 40px;
	cursor: pointer;
}

.gate ul li.member .ment {
	text-align: left;
}

.gate ul li.member .ment h1 {
	font-size: 24px;
	margin-bottom: 10px;
}

.gate ul li {
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	color: #fff;
	display: flex;
	padding: 30px;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: auto;
}

.gate ul li .ment {
	position: relative;
	z-index: 10;
}

.gate ul li .ment h1 {
	font-size: 2.4em;
	line-height: 1.2;
}

.gate ul li .ment h2 {
	font-size: 1.4em;
	margin-bottom: 10px;
}

.gate ul li .ment .btns {
	margin-top: 24px;
	font-size: 0;
}

.gate ul li .ment .btns a {
	padding: 16px 30px;
	border: 2px solid #fff;
	margin: 5px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	display: inline-block;
	transition: 0.3s;
}

.gate ul li .ment .btns a.disable {
	opacity: 0.5;
	border-style: dotted;
	pointer-events: none;
	cursor: no-drop;
}

.gate ul li .ment .btns a:hover {
	background-color: #fff;
	color: var(--main-color);
}

.gate ul li .ment .btns a .new {
	margin-right: 5px;
	animation-name: new_blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	letter-spacing: 0;
}

/* .gate ul li.login {
        background-color: var(--mint-blue);
      }
      .gate ul li.join {
        background-color: var(--mint-blue);
      } */
@keyframes new_blink {
	0% {
		color: #fff;
	}

	50% {
		color: var(--red-color);
	}

	100% {
		color: #fff;
	}
}

.ext {
	text-align: center;
	padding: 1em;
	font-size: 0.85em;
	color: #bbb;
}

#clock {
	font-family: 'Pretendard';
	font-size: 3em;
	margin-bottom: 5px;
	color: var(--main-color);
}

.gate ul li.notice {
	padding: 20px;
}

.gate ul li.notice::after {
	background-color: #000;
}

.gate ul li.notice .ment h1 span {
	color: yellow;
}

.gate ul li:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #000630;
	left: 0;
	top: 0;
	z-index: 0;
}

.gate ul li:nth-last-child(5):after {
	opacity: 1;
}

.gate ul li:nth-last-child(4):after {
	opacity: 0.95;
}

.gate ul li:nth-last-child(3):after {
	opacity: 0.9;
}

.gate ul li:nth-last-child(2):after {
	opacity: 0.85;
	/* filter: grayscale(0.5); */
}

.gate ul li:nth-last-child(1):after {
	opacity: 0.8;
	/* filter: grayscale(0.5); */
}

.gate ul li .ment h1 {
	font-size: 2em;
}

.gate .footer {
	font-size: 12px;
	letter-spacing: 0;
	font-weight: 500;
	text-transform: uppercase;
	padding: 20px 0;
	display: none;
}

.gate .footer p {
	letter-spacing: 0;
	font-size: 10px;
}

.modal {
	display: none;
	align-items: center;
	justify-content: center;
	height: 100%;
	position: fixed;
	z-index: 12;
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
}

.modal .modal-in {
	background-color: #fff;
	padding: 30px;
	border-radius: 12px;
}

.modal .modal-in h1.current {
	font-size: 1em;
	color: var(--gray-light);
}

.modal .modal-in h2 {}

.modal .modal-in h2+p {
	margin-top: 10px;
}

.modal .modal-in .btn {
	margin-top: 30px;
}

.modal .modal-in .btn a {
	background-color: var(--main-color);
	text-align: center;
	padding: 16px;
	display: block;
	color: #fff;
	font-weight: bold;
	border-radius: 6px;
}

@media (max-width: 444px) {
	.gate ul li .ment .btns a {
		width: 100%;
	}

	.gate ul li .ment .btns {
		margin-top: 30px;
	}

	.gate ul li.member {
		padding: 30px;
	}

	.gate ul li.member .ment h1 {
		font-size: 1.5em;
	}

	.gate ul li.member .ment p {
		font-size: 0.8em;
	}
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-Black.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2) format('woff2'), url(../../../packages/pretendard/dist/web/static/woff/Pretendard-Thin.woff) format('woff');
}


.popup{padding:0px;top:30px;border: 10px solid #1c61a6;position: absolute;z-index: 9990;background: #fff;}
#popup{left:10%;max-width: 488px;}
@media ( max-width : 600px) {
	#popup1 {
		width:90%;
		left: 50%;
		transform: translate(-50%, 0px);
	}
	.map-area.web {display: none;}
	.map-area.mobile {
		display: block;
	}
	#popup2{left: 10%; transform: translate(-10%, 0px); width:90%;}
}