::-webkit-scrollbar {
	background-color: transparent;
	width: 0px;
}
.agree_box::-webkit-scrollbar {
	background-color: #eee;
	width: 8px;
}
.agree_box::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
}

html {
	scroll-behavior: smooth;
}

body {
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

img {
	-webkit-user-select: none;
}

.floating {
	position: fixed;
	left: 50%;
	top: 280px;
	margin-left: 435px;
	z-index: 999;
	cursor: pointer;
}

.mfloating {
	display: none;
}


.bg01 {
	background-image: url(../img/bg01.jpg);
	height: 1050px;
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	align-items: center;
	text-align: center;
	max-width: 100%;
	z-index: 2;
	width: 1920px;
	/*overflow: hidden;*/
	width: 100vw;
	background-position-y: bottom;
	background-size: cover;
}

.logo {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 50px;
}

.main_orbit {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 40px;
	animation: spin 40s linear infinite;
}


@keyframes spin {
	from {
		transform: translateX(-50%) rotate(0deg);
	}
	to {
		transform: translateX(-50%) rotate(360deg);
	}
}

.sate {
	animation: float 6s ease-in-out infinite alternate;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -500px;
}

.antenna {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -210px;
}

@keyframes sate {
	0%   { transform: translate(0, 0) rotate(0deg); }
	25%  { transform: translate(10px, -20px) rotate(10deg); }
	50%  { transform: translate(20px, 0px) rotate(0deg); }
	75%  { transform: translate(10px, 20px) rotate(-10deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}



.main_sate01 {
	position: absolute;

	top: 70px;
	display: flex;
	align-items: center;
	gap: -5px;
}

.antenna01 {
	position: absolute;
	top: 120px;
	left: 390px;
	opacity: 0;
}

.antenna02 {
	position: absolute;
	top: 120px;
	left: 400px;
	opacity: 0;
}

.antenna03 {
	position: absolute;
	top: 120px;
	left: 410px;
	opacity: 0;
}

.antenna04 {
	position: absolute;
	top: 120px;
	left: 420px;
	opacity: 0;
}

.antenna05 {
	position: absolute;
	top: 120px;
	left: 430px;
	opacity: 0;
}

.antenna01,
.antenna02,
.antenna03,
.antenna04,
.antenna05 {
	position: absolute;
	opacity: 0;
	animation: wave 3s infinite linear;
}

.antenna01 { animation-delay: 0s; }
.antenna02 { animation-delay: 0.3s; }
.antenna03 { animation-delay: 0.6s; }
.antenna04 { animation-delay: 0.9s; }
.antenna05 { animation-delay: 1.2s; }

@keyframes wave {
	0%   { opacity: 0; transform: scale(0.8); }
	10%  { opacity: 1; transform: scale(1); }
	40%  { opacity: 0.6; transform: scale(1.2); }
	70%  { opacity: 0.3; transform: scale(1.4); }
	100% { opacity: 0; transform: scale(1.6); }
}

.main_ship {
	width: 782px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 160px;
	animation: main_char 3s ease-in-out infinite;
}



.title_b01 {
	position: relative;
	left: 50%;
	top: 260px;
	margin-left: 80px;
	transform: translateX(-50%);
	/*animation: moveDiagRight 2s ease-out infinite;*/
	animation: shock-vibration 1s infinite;
}

@keyframes shock-vibration {
	0%   { transform: translateX(-50%) translate(0, 0) rotate(0deg) scale(1); }
	10%  { transform: translateX(-50%) translate(-0.5px, 0.5px) rotate(-0.3deg) scale(1.01); }
	20%  { transform: translateX(-50%) translate(0.5px, -0.5px) rotate(0.3deg) scale(0.99); }
	30%  { transform: translateX(-50%) translate(-0.5px, -0.5px) rotate(0.3deg) scale(1.01); }
	40%  { transform: translateX(-50%) translate(0.5px, 0.5px) rotate(-0.3deg) scale(0.99); }
	50%  { transform: translateX(-50%) translate(0, 0) rotate(0deg) scale(1); }
	100% { transform: translateX(-50%) translate(0, 0) rotate(0deg) scale(1); }
}



.title01 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 208px;
}
.title02 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 225px;
}

.char01 {
	position: absolute;
	left: 0;
	top: 190px;
}

.char02 {
	position: absolute;
	right: 0;
	top: 305px;
}

.obj01 {
	position: absolute;
	left: 50px;
	top: 520px;
}

.obj02 {
	position: absolute;
	right: 110px;
	top: 640px;
}


.main_bb01 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -314px;
	top: 840px;
	animation: peekLeft 2s ease-in-out infinite;
}
@keyframes peekLeft {
	0%   { transform: translateX(0); opacity: 0; }       /* 제자리, 숨은 상태 */
	20%  { transform: translateX(-50px); opacity: 1; }   /* 왼쪽으로 휙 나타남 */
	50%  { transform: translateX(-50px); opacity: 1; }   /* 잠깐 머무름 */
	100% { transform: translateX(0); opacity: 0; }       /* 제자리로 돌아오며 사라짐 */
}


.main_char {
	position: absolute;
	left: 50%;
	top: 675px;
	z-index: 20;
	transform: translate(-50%, 0);
	animation: main_char 3s ease-in-out infinite;
}

@keyframes main_char {
	0%, 100% {
		transform: translate(-50%, 0);
	}
	50% {
		transform: translate(-50%, -20px);
	}
}

.main_obj01 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -211px;
	top: 660px;
}

.main_obj02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 290px;
	top: 660px;
}

.main_b01, .main_b02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
}

/* 01 */
.main_b01 {
	margin-left: -178px;
	top: 1037px;
	width: 164px;
	animation: moveDiagRight 2s ease-out infinite;
}

/* 02 */
.main_b02 {
	margin-left: 233px;
	top: 945px;
	width: 178px;
	animation: moveDiagLeft 2s ease-out infinite;
	animation-delay: 1s; /* 01보다 늦게 시작 */
}

/* 오른쪽 위 → 왼쪽 아래 */
@keyframes moveDiagRight {
	0% {
		transform: translate(50%, -50%) scale(0.3) rotate(-15deg);
	}
	30% {
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
}

/* 왼쪽 아래 → 오른쪽 위 (등장 후 흔들림 포함) */
@keyframes moveDiagLeft {
	0% {
		transform: translate(-50%, 50%) scale(0.3) rotate(15deg);
	}
	30% {
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
	40% {
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
	45% {
		transform: translate(-52%, 0) scale(1) rotate(-2deg);
	}
	50% {
		transform: translate(-48%, 0) scale(1) rotate(2deg);
	}
	55% {
		transform: translate(-51%, 0) scale(1) rotate(-1deg);
	}
	60% {
		transform: translate(-49%, 0) scale(1) rotate(1deg);
	}
	70% {
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
}









.bg02 {
	background-image: url(../img/bg02.png);
	height: 1250px;
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	/*background-color: #F1F2F7;*/
	align-items: center;
	text-align: center;
	max-width: 100%;
	/*z-index: 4;*/
	/*width: 1920px;*/
	overflow: hidden;
	width: 100vw;
	background-position-y: bottom;
	background-size: cover;
}


.main_cloud {
	position: absolute;
	left: 50%;
	top: 805px;
	z-index: 19;
	width: 1920px;
	transform: translateX(-50%);
	animation: cloudFloat 4s ease-in-out infinite;
}

@keyframes cloudFloat {
	0% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(-10px);
	}
	100% {
		transform: translateX(-50%) translateY(0);
	}
}


.con01 {
	position: relative;
	/*left: 50px;*/
	/*transform: translateX(-50%);*/
	top: 250px;
	display: inline-block;
}

.con01_notice {
	position: absolute;
	top: 312px;
	right: 16px;
	z-index: 10;
	animation: blinkTwice 2s ease-in-out infinite;
}
@keyframes blinkTwice {
	0%, 10% { opacity: 1; }
	15%, 25% { opacity: 0; }
	30%, 40% { opacity: 1; }
	45%, 55% { opacity: 0; }
	60%, 100% { opacity: 1; }
}

.img-grid {
	position: relative;
	top: 25px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	max-width: 608px;
	margin: 0 auto;
	justify-content: center;
}
.img-box {
	width: 153px;
	position: relative;
	overflow: hidden;
	display: inline-block;
	cursor: pointer;
}
.img-box img {
	display: block;
	/*border-radius: 8px;*/
}
.img-grid .img-box img {
	transition: all 0.3s ease;
}

.img-grid .img-box img:hover {
	filter: brightness(1.2);
}

/* 공통 라인 */
.line {
	position: absolute;
	background: #0F0E44;
	box-shadow:
			0 0 6px #ffffff,
			0 0 12px #0F0E44,
			0 0 18px #0F0E44;
	opacity: 0;
}


/* 네 면 위치 지정 */
.line.top    { top: 0; left: 0; height: 2px; width: 0; }
.line.right  { top: 0; right: 0; width: 2px; height: 0; }
.line.bottom { bottom: 0; right: 0; height: 2px; width: 0; } /* 오른쪽→왼쪽 */
.line.left   { bottom: 0; left: 0; width: 2px; height: 0; }  /* 아래→위 */

/* 호버 시 순차 애니메이션 */
.img-box:hover .line.top    { animation: drawTop 0.2s ease-out forwards; }
.img-box:hover .line.right  { animation: drawRight 0.2s ease-out forwards 0.15s; }
.img-box:hover .line.bottom { animation: drawBottom 0.2s ease-out forwards 0.2s; }
.img-box:hover .line.left   { animation: drawLeft 0.2s ease-out forwards 0.075s; }

/* keyframes */
@keyframes drawTop {
	from { width: 0; opacity: 1; }
	to   { width: 100%; opacity: 1; }
}
@keyframes drawRight {
	from { height: 0; opacity: 1; }
	to   { height: 100%; opacity: 1; }
}
@keyframes drawBottom {
	from { width: 0; opacity: 1; right: 0; }
	to   { width: 100%; opacity: 1; right: 0; }
}
@keyframes drawLeft {
	from { height: 0; opacity: 1; bottom: 0; }
	to   { height: 100%; opacity: 1; bottom: 0; }
}

/* 모달 기본: 처음엔 숨김 */
.modal {
	display: none; /* 처음엔 안 보이게 */
	position: fixed;
	z-index: 999;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.8);
	justify-content: center;
	align-items: center;
}

/* 모달 콘텐츠 */
.modal-content {
	position: relative;
	max-width: 80%;
	max-height: 80%;
	display: none; /* 기본적으로 숨김 */
}
.modal-content img {
	width: 100%;
	height: auto;
	display: block;
}

/* 닫기 버튼 이미지 */
.modal .close {
	position: absolute;
	top: 15px;
	right: 20px;
	width: 17px;
	height: 17px;
	cursor: pointer;
	display: none;
}


.con01_btn {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 350px;
	width: 392px;
	cursor: pointer;
	z-index: 9;
}


.con01_btn img {
	display: block;
}

/* 공통 라인 스타일 */
.con01_btn .line {
	position: absolute;
	background: #1ed9d4;
	box-shadow: 0 0 8px #1ed9d4, 0 0 16px #1ed9d4;
	opacity: 0;
}

/* 라인 위치 */
.con01_btn .line.top {
	top: 0; left: 0;
	height: 2px; width: 0;
}
.con01_btn .line.right {
	top: 0; right: 0;
	width: 2px; height: 0;
}
.con01_btn .line.bottom {
	bottom: 0; right: 0;
	height: 2px; width: 0;
}
.con01_btn .line.left {
	bottom: 0; left: 0;
	width: 2px; height: 0;
}

/* 공통 애니메이션 */
.con01_btn .line {
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

/* top → 0s 시작 */
.con01_btn .line.top {
	animation-name: drawTopFull;
	animation-delay: 0s;
}

/* right → 0.625s 시작 */
.con01_btn .line.right {
	animation-name: drawRightFull;
	animation-delay: 0.625s;
}

/* bottom → 1.25s 시작 */
.con01_btn .line.bottom {
	animation-name: drawBottomFull;
	animation-delay: 1.25s;
}

/* left → 1.875s 시작 */
.con01_btn .line.left {
	animation-name: drawLeftFull;
	animation-delay: 1.875s;
}

/* keyframes (공통) */
@keyframes drawTopFull {
	0% { width: 0; opacity: 1; }
	50% { width: 100%; opacity: 1; }
	90% { width: 100%; opacity: 1; }
	100% { width: 100%; opacity: 0; }
}
@keyframes drawRightFull {
	0% { height: 0; opacity: 1; }
	50% { height: 100%; opacity: 1; }
	90% { height: 100%; opacity: 1; }
	100% { height: 100%; opacity: 0; }
}
@keyframes drawBottomFull {
	0% { width: 0; opacity: 1; }
	50% { width: 100%; opacity: 1; }
	90% { width: 100%; opacity: 1; }
	100% { width: 100%; opacity: 0; }
}
@keyframes drawLeftFull {
	0% { height: 0; opacity: 1; }
	50% { height: 100%; opacity: 1; }
	90% { height: 100%; opacity: 1; }
	100% { height: 100%; opacity: 0; }
}



/* keyframes */
@keyframes drawTop {
	from { width: 0; opacity: 1; }
	to   { width: 100%; opacity: 1; }
}
@keyframes drawRight {
	from { height: 0; opacity: 1; }
	to   { height: 100%; opacity: 1; }
}
@keyframes drawBottom {
	from { width: 0; opacity: 1; right: 0; }
	to   { width: 100%; opacity: 1; right: 0; }
}
@keyframes drawLeft {
	from { height: 0; opacity: 1; bottom: 0; }
	to   { height: 100%; opacity: 1; bottom: 0; }
}



.con01_bb {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1073px;
	margin-left: 235px;
	z-index: 99;
}

.con01_cloud {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(50% + 1530px);
	/* bottom: 1653px; */
	/* margin-top: 300px; */
	z-index: 1;
	animation: cloudFloat 4s ease-in-out infinite;
	width: 1920px;
}

.con01_cloud img {

}







.con02 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 110px;
}
.game_title {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 180px;
	z-index: 12;
}
.con03 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 211px;
}





/*  게   임  */

.bg03 {
	background-image: url(../img/bg03.png);
	height: 1501px;
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	/*background-color: navy;*/
	align-items: center;
	text-align: center;
	max-width: 100%;
	z-index: 2;
	width: 1920px;
	overflow: hidden;
	width: 100vw;
	background-position-y: bottom;
	background-size: cover;
}


#game-container {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	user-select: none;
	position: relative;
	width: 720px;
	height: 639px;
	background: url("../img/game_map.png") no-repeat center/cover;
	overflow: hidden;
	left: 50%;
	transform: translateX(-50%);
	top: 170px;
	z-index: 9;
}
#overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
#start-btn {
	cursor: pointer;
	animation: neonPulse 1.5s infinite alternate;
}
@keyframes neonPulse {
	0% { box-shadow: 0 0 4px #54E288, 0 0 8px #54E288, 0 0 12px #54E288; border: 2px solid #5DFF91; }
	50% { box-shadow: 0 0 6px #fff, 0 0 12px #54E288, 0 0 18px #54E288; border: 2px solid #fff; }
	100% { box-shadow: 0 0 8px #54E288, 0 0 16px #251FAE, 0 0 24px #1957BE; border: 2px solid #ffffff; }
}

#ufo {
	position: absolute;
	width: 191px;
	height: 134px;
	background: url("../img/game_ufo.png") no-repeat center/contain;
	cursor: grab;
	touch-action: none;
	transform: translate(280px, 0);
}


/*
@keyframes zigzagFloat {
	0%    { transform: translate(280px, 0) scale(1); }
	16.6% { transform: translate(380px, 60px) scale(1.02); }
	33.3% { transform: translate(250px, 120px) scale(0.80); }
	50%   { transform: translate(390px, 150px) scale(1.03); }
	66.6% { transform: translate(180px, 220px) scale(0.80); }
	83.3% { transform: translate(290px, 300px) scale(1.02); }
	100%  { transform: translate(130px, 330px) scale(1); }
}
*/


@keyframes zigzagFloat {
	0%   { transform: translate( 280px,   0px) rotate(0deg)    scale(1.00); }
	10%  { transform: translate( 380px,  40px) rotate(3deg)    scale(1.02); }
	20%  { transform: translate( 220px,  95px) rotate(-4deg)   scale(0.96); }
	30%  { transform: translate( 410px, 140px) rotate(2deg)    scale(1.03); }
	40%  { transform: translate( 160px, 200px) rotate(-3deg)   scale(0.95); }
	50%  { transform: translate( 330px, 250px) rotate(4deg)    scale(1.04); }
	60%  { transform: translate( 120px, 305px) rotate(-2deg)   scale(0.94); }
	70%  { transform: translate( 360px, 330px) rotate(2deg)    scale(1.02); }
	80%  { transform: translate( 180px, 260px) rotate(-3deg)   scale(0.97); }
	90%  { transform: translate( 300px, 190px) rotate(3deg)    scale(1.01); }
	100% { transform: translate( 130px, 330px) rotate(0deg)    scale(1.00); }
}





@keyframes float {
	0% { transform: translate(0, 0); }
	100% { transform: translate(30px, 40px); }
}

#target {
	position: absolute;
	left: 465px;
	top: 313px;
	width: 80px;
	height: 80px;
	/* border: 2px dashed rgba(255,255,255,0.6); */
	border-radius: 50%;
	transition: border 1.4s ease, box-shadow 1.4s ease;
}

.drop-fail {
	animation: neonBlink 3s ease-in-out forwards;
}

@keyframes neonBlink {
	0% {
		outline: 3px dotted rgba(255,59,59,0);
		box-shadow: none;
		opacity: 1;
	}
	20% {
		outline: 3px dotted rgba(255,59,59,0.8);
		box-shadow: 0 0 8px rgba(255, 59, 59, 0.6),
		0 0 16px rgba(255, 59, 59, 0.3);
		opacity: 1;
	}
	80% {
		outline: 3px dotted rgba(255,59,59,0.8);
		box-shadow: 0 0 8px rgba(255, 59, 59, 0.6),
		0 0 16px rgba(255, 59, 59, 0.3);
		opacity: 1;
	}
	100% {
		outline: 3px dotted rgba(255,59,59,0);
		box-shadow: none;
		opacity: 1;
	}
}





#darken {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0);
	z-index: 2;
	pointer-events: none;
	transition: background 1s ease;
}
#darken.active { background: rgba(0,0,0,0.8); }
#finish-char {
	position: absolute;
	top: -350px;
	left: 50%;
	transform: translateX(-50%) !important;
	height: auto;
	z-index: 3;
	display: none;
}
.char-drop { animation: charDrop 1.3s ease-out forwards, float 6s ease-in-out infinite alternate 1.5s; }

@keyframes charDrop {
	0% { top: -300px; opacity: 0; }
	100% { top: -100px; opacity: 1; }
}
.alien-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	z-index: 3;
	/*image-rendering: pixelated;*/
}
#finish-text01 { top: 465px;
	width: 420px; }
#finish-text02 { top: 465px; }
.show-mosaic { display: block; animation: mosaicIn 0.3s steps(6) forwards; }
@keyframes mosaicIn {
	0% { filter: blur(8px); opacity: 0; }
	50% { filter: blur(4px); opacity: 0.6; }
	100% { filter: blur(0); opacity: 1; }
}
.fade-out { animation: fadeOut 0.8s ease-out forwards; }
@keyframes fadeOut {
	0% { opacity: 1; filter: blur(0); }
	100% { opacity: 0; filter: blur(6px); }
}
#arrow {
	position: absolute;
	top: 250px;
	left: calc(50% - -112px);
	height: auto;
	z-index: 1;
	display: none;
}
.bounce { animation: bounce 0.4s infinite alternate ease-in-out; }
@keyframes bounce {
	0% { transform: translateY(0); }
	100% { transform: translateY(15px); }
}
.bg-fade { animation: bgFade 1.5s ease forwards; }
@keyframes bgFade { 0% { opacity: 0; } 100% { opacity: 1; } }





.sns {
	background-color: #fff;
	padding: 60px;
	display: flex;
	justify-content: center;
}

.notice {
	background-color: #fff;
	display: flex;
	justify-content: center;
	padding-bottom: 50px;
}

.footer {
	background-color: #dcf6ff;
	padding: 60px;
	display: flex;
	justify-content: center;
}







/* ================게임 끝============================ */



.pop_b {
	color: #262262;
}
.pop_g {
	color: #707071;
}




/* 팝업 */
.answer_popup {
	width: 700px;
	display: none;
	/*background-color: #fff;*/
	letter-spacing: -1px;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

.answer_popup .title {
	position:relative;
	padding: 40px;
	/*background-image:url('../img/pop_title.png');*/
	background-size:cover;
	background-position:center;
	text-align: center;
}

.answer_popup .content {
	padding: 30px 40px 5px 40px;
	background: #fff;
}

.pb_30 {
	padding-bottom: 30px;
}
p.notice2 {
	padding-top: 15px;
	font-size: 15px;
}
.agree_wrap {
	padding-bottom: 13px;
	margin-bottom: 5px;
	text-align:left;
}
.youtube_btn {
	display: flex
;
	justify-content: center;
	padding: 30px;
}
.agree_box {
	width: 100%;
	overflow-y: scroll;
    border: 1px solid #27226240;
	padding: 16px;
	box-sizing: border-box;
	/*margin-top: 20px;*/
	margin-bottom: 20px;
	height: 195px;
	background: #f1f1f1;
	color: #333;
	/*border: 1px solid #333;*/
	font-size: 14px;
}

.agree_box p {
	margin-bottom: 20px;
}

.agree_box p:last-of-type {
	margin-bottom: 0;
}

.agree_box .h5 {
	display: inline-block;
	font-weight: 800;
	font-size: 19px;
}

.agree_box .h6 {
	display: inline-block;
	font-weight: 800;
}

.agree_radio {
	font-size: 18px;
	text-align: center;
}

.agree_radio label {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	display:inline-block;
	/*margin-left: 10px;*/
	cursor:pointer;
	font-size: 17px;
}

.sub_title {
	text-align: center;
	font-size: 30px;
	font-weight: 800;
	color: #333;
	margin-bottom: 20px;
}
.sub_title.etc_quest {
	margin-top: 50px;
}
.sub_title p {
	color: #00df98;
	display: inline-block;
}

.board_write_form {
	width: 100%;
}


.board_write_form .form_field:first-child {
	border-top: 1px solid #c6c6c6;
}

.board_write_form .form_field {
	font-size: 15px;
	border-bottom: 1px solid #c6c6c6;
	border-right: 1px solid #d9d9d9;
}



.board_write_form .form_field th {
	border-bottom: 1px solid #c6c6c6;
	width: 160px;
	font-size: 18px;
	color: #fff;
	text-align: center;
	background-color: #272262;
	padding: 20px;
	vertical-align:middle;
}

.board_write_form.etc_quest .form_field th {
	background-color: #00df98;
	padding: 20px;
	vertical-align:middle;
}

.board_write_form td.field {
	font-size: 18px;
	padding: 20px;
	text-align:left;
	vertical-align:middle;
}

.board_write_form td.field.route span,
.board_write_form td.field.age span {
	display:inline-block;
	margin-right: 30px;
}


.button_box {
	margin-top: 0px;
	display: flex;
	justify-content: center;
}
.buttons {
	text-align: center;
}
.buttons a.confirm {
	background-color: #473FD3;
	color: #fff;
	display: inline-block;
	/*font-size: 22px;*/
	width: 260px;
	height: 70px;
	line-height:70px;
	cursor:pointer;
	/*user-select: none;*/
	/*-webkit-user-select: none;*/
	/*-moz-user-select: none;*/
	/*-ms-user-select: none;*/
}
.buttons a.cancel {
	background-color: #A4A4A4;
	color: #000;
	display: inline-block;
	/*font-size: 22px;*/
	width: 260px;
	height: 70px;
	line-height:70px;
	cursor:pointer;
}
.btn_l {
	margin-left: 7px;
}
.btn_r {
	margin-right: 7px;
}


.board_write_form input[type='text'],
.board_write_form input[type='tel'],
.board_write_form select {
	height: 35px;
}

.w120 {
	width: 120px;
}

.w200 {
	width: 250px;
}

.w160 {
	width: 160px;
}

.strong {
	font-size:15px;
}

.lotto_popup {
	display:none;
	width: 1100px;
	background-image:url('../img/win_bg.jpg');
	background-position:center;
	background-size:cover;
	padding-bottom: 80px;
}

.lotto_popup .title {
	padding: 25px;
	margin-bottom: 40px;
}

.lotto_popup .content .scratch {
	width: 812px;
	margin: auto;
	height: 590px;
	background-image:url('../img/lotto_bg.png');
	background-position:center;
	position:relative;
	cursor: url('../img/coin_s_img.png'), url('../img/coin_s_img.cur'), auto;
}

.lotto_popup .content .scratch .coin {
	position:absolute;
	right: -10px;
	bottom: -10px;
}

.lotto_popup .content .scratch .canvas_wrap {
	width: 550px !important;
	height: 324px !important;
	position:absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);
}

.lotto_popup .content .scratch .canvas_wrap .canvas {
	position:absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;

}

.lotto_popup .content .scratch .complete_item {
	width: 100%;
	height: 100%;
	position:absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);
	background-position:center;
}

.lotto_popup .content .scratch .complete_item.n0 {
	background-image:url('../img/win_store_new.png');
}

.lotto_popup .content .scratch .complete_item.n1 {
	background-image:url('../img/win_br_new.png');
}

.lotto_popup .content .scratch .complete_item.n2 {
	background-image:url('../img/win_happy_new.png');
}

.lotto_popup .content .scratch .complete_item.n3 {
	background-image:url('../img/win_chicken_new.png');
}


@media (max-width: 768px) {
	.bg02 {
		height: 1232px;
	}
	.con01 {
		top: 220px;
	}
	.con01_btn {
		top: 309px;
	}
	.main_cloud {
		top: 955px;
		/*animation: unset;*/
		width: 100%;
	}
	.char01, .char02, .obj03, .obj02, .main_obj01, .sate, .main_bb01 {
		display: none;
	}
	.con01_cloud {
		top: calc(50% + 1368px);
		width: 100%;
	}
	.main_obj02 {
		width: 252px;
	}
	.obj01 {
		position: absolute;
		left: 5px;
		top: 628px;
	}
	.obj02 {
		position: absolute;
		right: -21px;
		top: 715px;
	}
	.mfloating {
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 99999;
	}
	.footer {
		padding-bottom: 140px;
	}

	.agree_box, .board_write_form .form_field th, p.notice2, .w200, select#c_hp1, input#c_hp2, input#c_hp3 {
		font-size: 20px;
	}
	.board_write_form input[type='text'], .board_write_form input[type='tel'], .board_write_form select {
		height: 50px;
	}
	.agree_radio, .agree_radio label {
		font-size: 22px;
	}

}



/* style css */
body, html {
	overflow-x:hidden;
}

img {
	-webkit-user-drag: none;
}

::selection {
	background: #6CFFFD;
	color: #000
}

::-moz-selection {
	background: #6CFFFD;
	color: #000
}


::-webkit-selection {
	background: #6CFFFD;
	color: #000
}


body {
	-webkit-font-smoothing: antialiased;
	color:#333;
}



@media(min-width:992px) {
	.pc {
		display:block !important
	}

	.mobile {
		display:none !important
	}
}

@media(max-width:991px) {

	.pc {
		display:none !important
	}

	.mobile {
		display:block !important
	}



}

@media(max-width:575px) {




}