@charset "utf-8";

/* FONT Import */
@import url("./fonts.css");

/* 초기화 */
html, body {
	width:100%;
	height:100%;
	font-family: 'Freesentation', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	margin:0;
	padding:0;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Freesentation', sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, header, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;}
input, button {margin:0;padding:0;font-size:1em;font-family: 'Freesentation', sans-serif;}
input[type="submit"]{cursor:pointer}
button {outline:0;cursor:pointer}

select {margin:0}
p {font-family: 'Freesentation', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none;outline:0}

*, ::focus {
	outline:0;
}
*, ::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* input[type=text],input[type=password], textarea {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
}
 
*  input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
	-webkit-box-shadow:  0 0 5px #9ed4ff;
	-moz-box-shadow:  0 0 5px #9ed4ff;
	box-shadow: 0 0 5px #9ed4ff;
	border: 1px solid #558ab7 !important;
}

::selection {
	color:#000;
	background-color:#b3d4fc;
	text-shadow:none;
}
::-moz-selection {
	color:#000;
	background-color:#b3d4fc;
	text-shadow:none;
}
::-webkit-selection {
	color:#000;
	background-color:#b3d4fc;
	text-shadow:none;
}

.placeholdersjs { color: #ddd !important; }

svg { overflow:hidden; vertical-align:middle; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}
input { background:#fafafa; }
textarea {
	width:100%;
	height:200px;
	font-size:14px;
	color:#333;
	line-height:1.5em;
	padding:10px !important;
	background:#fafafa;
	border:1px solid rgba(0,0,0,0.2);
	border-radius:3px;
	box-shadow:none;
	resize:none;
	outline:none;
}
input:focus,
textarea:focus { background-color:#fff; outline:none; }

select {
	height:40px;
	font-family: 'Freesentation', sans-serif;
	font-size:1rem;
	color:#212121;
	font-weight:400;
	line-height:40px;
	padding:0 40px 0 10px;
	background-color:#fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 380'%3E%3Cpath fill='%23212121' d='M256,246.5c-8.2,0-16.1-3.3-21.9-9.1L152,155.4l21.9-21.9l82.1,82.1l82.1-82.1l21.9,21.9l-82.1,82.1 C272.1,243.3,264.2,246.6,256,246.5z'/%3E%3Crect fill='%23d0d0d0' x='0' y='70' width='20' height='240'/%3E%3C/svg%3E%0A");
	background-size:30px;
	background-position:100% 50%;
	background-repeat:no-repeat;
    border:1px solid #ddd;
	border-radius:3px;
	outline:none;
    -webkit-appearance:none;
	-moz-appearance:none;    
	appearance:none;
	cursor:pointer;
}
select::-ms-expand {
	display: none;
}

input[type="checkbox"] {
	display:none;
}
input[type="checkbox"] + label {
	font-size:1rem;
	color:#333;
	white-space:nowrap;
	padding-right:25px;
	padding:0;
	cursor:pointer;
	display:inline-block;
}
input[type="checkbox"] + label span {
	width:20px;
	min-width:20px;
	height:20px;
	margin-right:0.35rem;
	vertical-align:middle;
	background-color:#fff;
	background-image:none;
	background-size:auto 26px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border:1px solid #ccc;
	border-radius:0.25rem;
	cursor:pointer;
	vertical-align:middle;
	display:inline-block;
}
input[type="checkbox"]:checked + label span {
	background-color:#000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M10.5859 13.4142L7.75748 10.5858L6.34326 12L10.5859 16.2426L17.657 9.17154L16.2428 7.75732L10.5859 13.4142Z'/%3E%3C/svg%3E%0A");
	border-color:#000;
}
input[type="checkbox"]:disabled + label,
input[type="checkbox"]:disabled + label span { cursor:default; }

input[type="radio"] {
	display:none;
}
input[type="radio"] + label {
	font-size:1rem;
	color:#333;
	padding-right:25px;
}
input[type="radio"] + label span {
	width:20px;
	height:20px;
	margin:-2px 5px 0 0;
	vertical-align:middle;
	background-color:#fff;
	background-size:auto 12px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	border:1px solid #ccc;
	border-radius:50%;
	cursor:pointer;
	display:inline-block;
}
input[type="radio"]:checked + label span {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23E53935'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-family: 'Freesentation', sans-serif;
	color:#aaa !important;
}
::-moz-placeholder { /* Firefox 19+ */
	font-family: 'Freesentation', sans-serif;
	color:#aaa !important;
}
:-ms-input-placeholder { /* IE 10+ */
	font-family: 'Freesentation', sans-serif;
	color:#aaa !important;
}
:-moz-placeholder { /* Firefox 18- */
	font-family: 'Freesentation', sans-serif;
	color:#aaa !important;
}

/* Scroll Width */
::-webkit-scrollbar {
	width:6px;
	height:6px;
	background-color:transparent;
}
/* Scroll Track */
::-webkit-scrollbar-track {
	border-radius:0;
}
/* Scroll Handle */
::-webkit-scrollbar-thumb {
	background-color:rgba(0,0,0,0.5);
	border:1px solid rgba(255,255,255,0.3);
	border-radius:10px;
}
/* Scroll Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color:rgba(0,0,0,1);
}

/* Loader */
#loader {
	position:fixed;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin:-6px 0 0 -6px;
	background-color:rgba(0,0,0,1);
	border-radius:50%;
	z-index:9;
}
#loader:before {
	content:"";
	position:absolute;
	top:0px;
	width:12px;
	height:12px;
	border-radius:50%;
	animation:loader_L 2s ease-in-out infinite;
}
#loader:after {
	content:"";
	position:absolute;
	top:0px;
	width:12px;
	height:12px;
	border-radius:50%;
	animation:loader_R 2s ease-in-out infinite;
}
@keyframes loader_L {
	0% { left:-25px; background-color:rgba(0,0,0,1); }
	50% { left:0px; background-color:rgba(0,0,0,0); }
	100% { left:-25px; background-color:rgba(0,0,0,1); }
}
@keyframes loader_R {
	0% { right:-26px; background-color:rgba(0,0,0,1); }
	50% { right:0px; background-color:rgba(0,0,0,0); }
	100% { right:-26px; background-color:rgba(0,0,0,1); }
}

#wrap {
	width:100%;
	min-width:320px;
	margin:0 auto;
	opacity:0;
}
#wrap.on { opacity:1; }

/* KEY VISUAL */
#keyVisual {
	position:relative;
}
#keyVisual:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
}
#keyVisual .visual {
	width:100%;
	overflow:hidden;
}
#keyVisual .visual img.kvH {
	width:100%;
	height:auto;
	transition:all 1s ease-in-out;
	transform:scale(1.2);
	display:block;
}
#keyVisual .visual img.kvV { display:none; }
#keyVisual.aos-animate .visual img {
	transform:scale(1) !important;
}
#keyVisual .steamLogo {
	position:absolute;
	top:5%;
	left:2%;
	width:10%;
}
#keyVisual .kvSlogan {
	position:absolute;
	top:20%;
	left:50%;
	width:34%;
	transform:translateX(-56%);
	transition:all 1.5s cubic-bezier(0.25, 0.8, 0, 1.5);
	opacity:0;
	display:flex;
	align-items:center;
}
#keyVisual.aos-animate .kvSlogan {
	top:10%;
	opacity:1;
}
#keyVisual .kvSlogan .slogan {
	width:92%;
	height:auto;
	margin:0 2%;
}
#keyVisual .kvSlogan .windL,
#keyVisual .kvSlogan .windR {
	width:10%;
	height:auto;
}
#keyVisual .kvSlogan .windL { animation:wingLFlap 0.5s ease infinite alternate; }
#keyVisual .kvSlogan .windR { animation:wingRFlap 0.5s ease infinite alternate; }
@keyframes wingLFlap {
	from { transform:translateY(-10%) rotate(10deg); }
	to { transform:translateY(0%) rotate(0deg); }
}
@keyframes wingRFlap {
	from { transform: translateY(-10%) rotate(-10deg); }
	to { transform: translateY(0%) rotate(0deg); }
}
#keyVisual .logo {
	position:absolute;
	top:20%;
	left:50%;
	width:48%;
	transition:all 2s cubic-bezier(0.25, 0.8, 0, 1.5);
	transform:translateX(-50%) scaleX(1.5);
	opacity:0;
	filter:blur(10px);
}
#keyVisual.aos-animate .logo {
	transform:translateX(-50%) scaleX(1);
	opacity:1;
	filter:blur(0);
}
#keyVisual .logoSub {
	position:absolute;
	top:50%;
	left:50%;
	width:17%;
	transition:all 1s 0.25s cubic-bezier(0.25, 0.8, 0, 1.5);
	transform:translate(-50%, 50%);
	opacity:0;
	z-index:9;
}
#keyVisual.aos-animate .logoSub {
	transform:translate(-50%, 0);
	opacity:1;
}
#keyVisual .release {
	position:absolute;
	bottom:15%;
	left:50%;
	width:20%;
	transition:all 0.5s 0.25s ease-in-out;
	transform:translateX(-50%) translateY(50%);
	opacity:0;
}
#keyVisual.aos-animate .release {
	transform:translateX(-50%) translateY(0);
	opacity:1;
}
#keyVisual .kvTumblbug {
	position:absolute;
	bottom:6%;
	right:2%;
	width:16%;
	transition:all 0.5s 0.5s ease-in-out;
	transform:translateY(50%);
	opacity:0;
	z-index:9;
}
#keyVisual.aos-animate .kvTumblbug {
	transform:translateY(0);
	opacity:1;
}
#keyVisual .kvTumblbug:hover { transform:rotate(2deg); }

#keyVisual .kvSubTitle {
	position:absolute;
	bottom:0;
	left:50%;
	width:45%;
	transition:all 0.5s ease-in-out;
	transform:translateX(-50%) translateY(30%);
	z-index:9;
}
#keyVisual .kvSubTitle.mobile { display:none; }

h1.secTitle {
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	transition:all 0.5s ease-in-out;
}

/* MOVIE */
#movie {
	position:relative;
	padding:5% 0;
	background:linear-gradient(180deg, rgba(255,254,198,1) 0%, rgba(255,255,255,1) 100%);
	display:flex;
	flex-direction:column;
	align-items:center;
}
#movie:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/movie_bg.png");
	background-size:100% auto;
	background-position:50% 0;
	background-repeat:no-repeat;
	mix-blend-mode:multiply;
	opacity:0.2;
}
#movie:after {
	content:"";
	position:absolute;
	top:-40px;
	left:0;
	width:100%;
	height:40px;
	background-color:#fffec6;
	--mask:
		radial-gradient(44.03px at 50% 61.25px,#000 99%,#0000 101%) calc(50% - 50px) 0/100px 100%,
		radial-gradient(44.03px at 50% -36.25px,#0000 99%,#000 101%) 50% 25px/100px 100% repeat-x;
	-webkit-mask: var(--mask);
		mask: var(--mask);
}
#movie .secTitle {
	position:relative;
	color:#383b42;
}
/*
#movie .secTitle:before {
	content:"";
	position:absolute;
	top:50%;
	left:-60%;
	width:40%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23383b42' d='M70.8 9.2H33.2l-4.1-3c-1.1-.8-2.6-.8-3.7 0l-4.1 3H14l1.7-1.7c.9-.9 1.3-2 1.3-3.1s-.4-2.3-1.3-3.1C14-.4 11.2-.4 9.5 1.3L6.2 4.5 0 10.7l6.2 6.2 3.2 3.2c.9.9 2 1.3 3.1 1.3s2.2-.4 3.1-1.3c1.7-1.7 1.7-4.5 0-6.2l-1.7-1.7h7.3l4.1 3c1.1.8 2.6.8 3.7 0l4.1-3h37.6c.8 0 1.5-.7 1.5-1.5s-.6-1.5-1.4-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
#movie .secTitle:after {
	content:"";
	position:absolute;
	top:50%;
	right:-60%;
	width:40%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23383b42' d='M1.5 9.2h37.6l4.1-3c1.1-.8 2.6-.8 3.7 0l4.1 3h7.3l-1.7-1.7c-.9-.9-1.3-2-1.3-3.1s.4-2.3 1.3-3.1c1.7-1.7 4.5-1.7 6.2 0L66 4.5l6.2 6.2-6.2 6.2-3.2 3.2c-.9.9-2 1.3-3.1 1.3s-2.2-.4-3.1-1.3c-1.7-1.7-1.7-4.5 0-6.2l1.7-1.7H51l-4.1 3c-1.1.8-2.6.8-3.7 0l-4.1-3H1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
*/
#movie .mov {
	width:80%;
	padding:5%;
	transition:all 0.5s ease-in-out;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#movie .mov li {
	position:relative;
	width:50%;
	padding:0 1%;
	text-align:center;
}
#movie .mov li .playBtn {
	position:absolute;
	top:50%;
	left:50%;
	width:15%;
	background-color:rgba(255,255,255,0.8);
	border-radius:50%;
	box-shadow:0 3px 0 3px rgba(0,0,0,0.3);
	transform:translate(-50%, -50%);
	transition:all 0.25s ease-in-out;
	z-index:9;
}
#movie .mov li .playBtn:before {
	content:"";
	padding-bottom:100%;
	display:block;
}
#movie .mov li .playBtn:after {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:35%;
	height:40%;
	background-color:#000;
	clip-path:polygon(100% 50%, 0 0, 0 100%);
	transform:translate(-40%, -50%);
	display:block;
}
#movie .mov li img {
	width:100%;
	height:auto;
	transition:all 0.25s ease-in-out;
}
#movie .mov li:nth-of-type(1) img { transform:rotate(-2deg); }
#movie .mov li:nth-of-type(2) img { transform:rotate(3deg); }
#movie .mov li .playBtn:hover { background-color:rgba(255,255,255,1); }
#movie .mov li .playBtn:hover ~ img { transform:rotate(0deg); }

/* ABOUT */
#about {
	position:relative;
	padding:8% 0;
	background:linear-gradient(180deg, rgba(89,29,169,1) 0%, rgba(5,25,96,1) 100%);
	display:flex;
	flex-direction:column;
	align-items:center;
}
#about:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/about_bg.png");
	background-size:100% auto;
	background-position:50% 0;
	background-repeat:no-repeat;
	opacity:0.2;
	mix-blend-mode:screen;
}
#about .headShape {
	position:absolute;
	top:-1%;
	left:0;
	width:100%;
	background-color:#fff;
	clip-path: polygon(50% 100%, 100% 10%, 100% 0, 0 0, 0 10%);
	z-index:1;
}
#about .headShape:before {
	content:"";
	padding-bottom:5%;
	display:block;
}
#about .secTitle {
	position:relative;
	color:#fff;
	margin-top:3%;
	z-index:1;
}
#about .secTitle:before {
	content:"";
	position:absolute;
	top:50%;
	left:-60%;
	width:40%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23fff' d='M70.8 9.2H33.2l-4.1-3c-1.1-.8-2.6-.8-3.7 0l-4.1 3H14l1.7-1.7c.9-.9 1.3-2 1.3-3.1s-.4-2.3-1.3-3.1C14-.4 11.2-.4 9.5 1.3L6.2 4.5 0 10.7l6.2 6.2 3.2 3.2c.9.9 2 1.3 3.1 1.3s2.2-.4 3.1-1.3c1.7-1.7 1.7-4.5 0-6.2l-1.7-1.7h7.3l4.1 3c1.1.8 2.6.8 3.7 0l4.1-3h37.6c.8 0 1.5-.7 1.5-1.5s-.6-1.5-1.4-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
#about .secTitle:after {
	content:"";
	position:absolute;
	top:50%;
	right:-60%;
	width:40%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23fff' d='M1.5 9.2h37.6l4.1-3c1.1-.8 2.6-.8 3.7 0l4.1 3h7.3l-1.7-1.7c-.9-.9-1.3-2-1.3-3.1s.4-2.3 1.3-3.1c1.7-1.7 4.5-1.7 6.2 0L66 4.5l6.2 6.2-6.2 6.2-3.2 3.2c-.9.9-2 1.3-3.1 1.3s-2.2-.4-3.1-1.3c-1.7-1.7-1.7-4.5 0-6.2l1.7-1.7H51l-4.1 3c-1.1.8-2.6.8-3.7 0l-4.1-3H1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
#about .rellaxPlanet {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	mix-blend-mode:luminosity;
	overflow:hidden;
	z-index:0;
}
#about .rellaxPlanet span {
	position:absolute;
	transform:translate(-50%, -50%);
	opacity:0.5;
}
#about .rellaxPlanet span:nth-of-type(1) {
	top:65%;
	left:25%;
	width:9%;
}
#about .rellaxPlanet span:nth-of-type(2) {
	top:35%;
	left:70%;
	width:3%;
}
#about .rellaxPlanet span:nth-of-type(3) {
	top:-15%;
	left:12%;
	width:5%;
}
#about .rellaxPlanet span:nth-of-type(4) {
	top:90%;
	left:16%;
	width:8%;
}
#about .rellaxPlanet span:nth-of-type(5) {
	top:10%;
	left:75%;
	width:17%;
}
#about .rellaxPlanet span img {
	width:100%;
	height:auto;
}
#about .intro {
	position:relative;
	width:100%;
	margin-top:2%;
	padding:5%;
	z-index:1;
}
#about .intro p {
	font-family:"Recipekorea", sans-serif;
	font-size:1.2vw;;
	color:#fff;
	line-height:3.25em;
	text-align:center;
	filter:drop-shadow(0px 5px 0px rgba(0,0,0,0.3));
}
#about .intro p b {
	color:#ff9600;
	font-weight:normal;
}

/* TUTORIAL */
#tutorial {
	position:relative;
	padding:5% 0 10% 0;
	background-color:#f0ffe6;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#tutorial:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;
}
#tutorial .headShape {
	position:absolute;
	top:-5%;
	left:0;
	width:100%;
	background-color:#f0ffe6;
	clip-path: polygon(50% 0, 100% 80%, 100% 100%, 0 100%, 0 80%);
	z-index:1;
}
#tutorial .headShape:before {
	content:"";
	padding-bottom:3.5%;
	display:block;
}
#tutorial .headShape:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;	
}
#tutorial .secTitle {
	position:relative;
	color:#383b42;
}
#tutorial .secTitle:before {
	content:"";
	position:absolute;
	top:50%;
	left:-18%;
	width:13%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23383b42' d='M70.8 9.2H33.2l-4.1-3c-1.1-.8-2.6-.8-3.7 0l-4.1 3H14l1.7-1.7c.9-.9 1.3-2 1.3-3.1s-.4-2.3-1.3-3.1C14-.4 11.2-.4 9.5 1.3L6.2 4.5 0 10.7l6.2 6.2 3.2 3.2c.9.9 2 1.3 3.1 1.3s2.2-.4 3.1-1.3c1.7-1.7 1.7-4.5 0-6.2l-1.7-1.7h7.3l4.1 3c1.1.8 2.6.8 3.7 0l4.1-3h37.6c.8 0 1.5-.7 1.5-1.5s-.6-1.5-1.4-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
#tutorial .secTitle:after {
	content:"";
	position:absolute;
	top:50%;
	right:-18%;
	width:13%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23383b42' d='M1.5 9.2h37.6l4.1-3c1.1-.8 2.6-.8 3.7 0l4.1 3h7.3l-1.7-1.7c-.9-.9-1.3-2-1.3-3.1s.4-2.3 1.3-3.1c1.7-1.7 4.5-1.7 6.2 0L66 4.5l6.2 6.2-6.2 6.2-3.2 3.2c-.9.9-2 1.3-3.1 1.3s-2.2-.4-3.1-1.3c-1.7-1.7-1.7-4.5 0-6.2l1.7-1.7H51l-4.1 3c-1.1.8-2.6.8-3.7 0l-4.1-3H1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
#tutorial ul {
	width:70%;
	margin-top:5%;
	padding:0 5%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#tutorial ul li {
	width:50%;
	padding:0 1%;
}
#tutorial ul li img {
	width:100%;
	height:auto;
}

/* GOODS */
#goods {
	position:relative;
	padding:3% 0 5% 0;
	background-color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#goods:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;
}
#goods .headShape {
	position:absolute;
	top:-5%;
	left:0;
	width:100%;
	filter:drop-shadow(0px -6px 3px rgba(0,0,0,0.1));
	z-index:1;
}
#goods .headShape:before {
	content:"";
	padding-bottom:13%;
	display:block;
}
#goods .shape {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#fff;
	clip-path: url(#cloudShape);
}
#goods .shape:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;	
}
#goods .secTitle {
	position:relative;
	color:#383b42;
	z-index:2;
}
#goods .secTitle:before {
	content:"";
	position:absolute;
	top:50%;
	left:-12%;
	width:8.5%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23383b42' d='M70.8 9.2H33.2l-4.1-3c-1.1-.8-2.6-.8-3.7 0l-4.1 3H14l1.7-1.7c.9-.9 1.3-2 1.3-3.1s-.4-2.3-1.3-3.1C14-.4 11.2-.4 9.5 1.3L6.2 4.5 0 10.7l6.2 6.2 3.2 3.2c.9.9 2 1.3 3.1 1.3s2.2-.4 3.1-1.3c1.7-1.7 1.7-4.5 0-6.2l-1.7-1.7h7.3l4.1 3c1.1.8 2.6.8 3.7 0l4.1-3h37.6c.8 0 1.5-.7 1.5-1.5s-.6-1.5-1.4-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
#goods .secTitle:after {
	content:"";
	position:absolute;
	top:50%;
	right:-12%;
	width:8.5%;
	height:50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.3 21.4'%3E%3Cpath fill='%23383b42' d='M1.5 9.2h37.6l4.1-3c1.1-.8 2.6-.8 3.7 0l4.1 3h7.3l-1.7-1.7c-.9-.9-1.3-2-1.3-3.1s.4-2.3 1.3-3.1c1.7-1.7 4.5-1.7 6.2 0L66 4.5l6.2 6.2-6.2 6.2-3.2 3.2c-.9.9-2 1.3-3.1 1.3s-2.2-.4-3.1-1.3c-1.7-1.7-1.7-4.5 0-6.2l1.7-1.7H51l-4.1 3c-1.1.8-2.6.8-3.7 0l-4.1-3H1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5z'/%3E%3C/svg%3E");
	background-size:100% auto;
	background-position:0 50%;
	background-repeat:no-repeat;
	transform:translateY(-50%);
	display:block;
}
#goods .goodsList {
	width:70%;
	margin-top:5%;
	padding:0 5%;
	display:flex;
	align-items:flex-start;
}
#goods .goodsList h2 {
	position:relative;
	font-family:"Recipekorea", sans-serif;
	font-size:1.2vw;;
	color:#5a5958;
	display:flex;
	align-items:center;
}
#goods .goodsList h2:before {
	content:"";
	width:1em;
	height:1em;
	margin-top:-0.5em;
	margin-right:0.5em;
	background-color:#5a5958;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	display:inline-block;
}
#goods .goodsList p {
	margin-top:6%;
	padding:0 5%;
	display:flex;
	align-items:center;
}
#goods .goodsList img {
	width:100%;
	height:auto;
}
#goods .col-1 dt {
	width:100%;
	padding:0 2%;
}
#goods .col-2 dt {
	width:50%;
	padding:0 2%;
}

/* SYSTEM */
#system {
	position:relative;
	padding:5% 0;
	background-color:#211f30;
	background-image:url("../img/geometry_pattern.jpg");
	display:flex;
	flex-direction:column;
	align-items:center;
}
#system article {
	padding:0 5%;
	display:flex;
	align-items:center;
}
#system article .logo {
	width:50%;
}
#system article .logo img {
	width:80%;
	height:auto;
}
#system article ul {
	width:50%;
}
#system article ul li {
	padding:3% 0;
	display:flex;
	align-items:center;
}
#system article ul li:not(:first-of-type) {
	border-top:3px dotted #433e66;
}
#system article ul li span {
	min-width:30%;
	font-size:1vw;
	color:#8a879b;
	font-weight:700;
}
#system article ul li p {
	font-size:1vw;
	color:#fff;
	font-weight:700;
}

/* FOOTER */
#footer {
	position:relative;
	padding:3% 0;
	background-color:#100a21;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#footer p {
	font-family:'yg-jalnan';
	font-size:1.3vw;
	color:#8a879b;
	font-weight:700;
	line-height:120%;
	text-align:center;
}

/* TUMBLBUG FLOAT */
#tumblugFloat {
	position:fixed;
	right:-20%;
	bottom:2%;
	width:16%;
	transition:all 1.5s cubic-bezier(0.25, 0.8, 0, 1.2);
	opacity:0;
	z-index:99;
}
#tumblugFloat.on {
	right:2%;
	opacity:1;
}
#tumblugFloat img {
	width:100%;
	height:auto;
}
#tumblugFloat:hover img { transform:rotate(2deg); }

/* 250515 */
/* Overview */
#overview {
	position:relative;
	padding:5% 0 8% 0;
	background-color:#211f30;
	background-image:url("../img/geometry_pattern.jpg");
	text-align:center;
}
#overview h1 {
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
}
#overview article {
	margin-top:5%;
	padding:0 5%;
	display:flex;
	align-items:center;
}
#overview article .col { padding:0 3%; }
#overview article .col:first-of-type { width:45%; }
#overview img {
	width:100%;
	height:auto;
}
#overview ul {
	width:100%;
}
#overview ul li {
	padding:3% 0;
	display:flex;
	align-items:center;
}
#overview ul li:not(:first-of-type) {
	border-top:3px dotted #433e66;
}
#overview ul li span {
	min-width:20%;
	font-size:1vw;
	color:#8a879b;
	font-weight:700;
	text-align:left;
}
#overview ul li p {
	font-size:1vw;
	color:#fff;
	font-weight:400;
	word-break:keep-all;
	text-align:left;
}
#overview ul li p b {
	font-size:1.3vw;
	color:#00CBD3;
	font-weight:700;
	word-break:keep-all;
}

/* Concept */
#concept {
	position:relative;
	padding:5% 0 15% 0;
	background-color:#777e87;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#concept:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;
}
#concept h1 {
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
}
#concept article {
	margin-top:5%;
	padding:0 5%;
	display:flex;
	align-items:center;
}
#concept article .col { padding:0 3%; }
#concept article .col:first-of-type { width:50%; }
#concept article .col:last-of-type {
	width:50%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#concept article img {
	width:100%;
	height:auto;
}
#concept article .col:last-of-type img {
	width:50%;
	height:auto;
}
#concept h2 {
	font-size:2.3vw;
	color:#fff;
}
#concept h2 .c01 { color:#ffc000; }
#concept h2 .c02 { color:#00cbd3; }
#concept h2 .c03 { color:#ff5900; }
#concept ul {
	width:100%;
}
#concept ul li {
	padding:3% 0;
	display:flex;
	align-items:center;
}
#concept ul li:not(:first-of-type) {
	border-top:3px dotted #433e66;
}
#concept ul li span {
	min-width:20%;
	font-size:1vw;
	color:#8a879b;
	font-weight:700;
	text-align:left;
}
#concept ul li p {
	font-size:1vw;
	color:#fff;
	font-weight:400;
	word-break:keep-all;
	text-align:left;
}
#concept ul li p b {
	font-size:1.3vw;
	color:#00CBD3;
	font-weight:700;
	word-break:keep-all;
}

/* Fun Factors */
#funFactors {
	position:relative;
	padding:2% 0 8% 0;
	background-color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#funFactors:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;
}
#funFactors .headShape {
	position:absolute;
	top:-10%;
	left:0;
	width:100%;
	filter:drop-shadow(0px -6px 3px rgba(0,0,0,0.1));
	z-index:0;
}
#funFactors .headShape:before {
	content:"";
	padding-bottom:13%;
	display:block;
}
#funFactors .shape {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#fff;
	clip-path: url(#cloudShape);
}
#funFactors .shape:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;	
}
#funFactors h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#383b42;
	display:block;
	z-index:2;
}
#funFactors ul {
	width:100%;
	margin-top:5%;
	padding:0 5%;
	display:flex;
	align-items:center;
}
#funFactors ul li {
	width:33.333%;
	padding:0 2%;
}
#funFactors ul li img {
	width:100%;
	height:auto;
}
#funFactors h2 {
	font-size:2.5vw;
	color:#383b42;
	font-weight:700;
	margin-top:5%;
}
#funFactors h2 .c01 { color:#ff5900; }
#funFactors h2 .c02 { color:#00cbd3; }

/* Story */
#story {
	position:relative;
	padding:5% 0 8% 0;
	background-image:linear-gradient(180deg, rgba(89,29,169,1) 0%, rgba(5,25,96,1) 100%);
	display:flex;
	flex-direction:column;
	align-items:center;
}
#story:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/about_bg.png");
	background-repeat:no-repeat;
	mix-blend-mode:screen;
	filter:brightness(0.2);
}
#story .rellaxPlanet {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	mix-blend-mode:luminosity;
	overflow:hidden;
	z-index:0;
}
#story .rellaxPlanet span {
	position:absolute;
	transform:translate(-50%, -50%);
	opacity:0.5;
}
#story .rellaxPlanet span:nth-of-type(1) {
	top:100%;
	left:12%;
	width:9%;
}
#story .rellaxPlanet span:nth-of-type(2) {
	top:100%;
	left:80%;
	width:3%;
}
#story .rellaxPlanet span:nth-of-type(3) {
	top:-30%;
	left:5%;
	width:6%;
}
#story .rellaxPlanet span:nth-of-type(4) {
	top:90%;
	left:16%;
	width:8%;
}
#story .rellaxPlanet span:nth-of-type(5) {
	top:-10%;
	left:75%;
	width:18%;
}
#story .rellaxPlanet span img {
	width:100%;
	height:auto;
}
#story h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
	z-index:1;
}
#story article {
	position:relative;
	margin-top:3%;
	padding:0 5%;
	display:flex;
	flex-direction:column;
	align-items:center;
	z-index:1;
}
#story h2 {
	font-size:2.3vw;
	color:#fff;
	font-weight:400;
}
#story h2 .c01 { color:#ffc000; font-weight:700; }
#story h2 .c02 { font-size:2.8vw; color:#00cbd3; font-weight:800; }
#story .storyPhoto {
	width:40%;
	margin-top:2%;
}
#story .storyPhoto img {
	width:100%;
	height:auto;
	border:3px solid #fff;
}
#story p {
	font-size:1.3vw;
	color:#fff;
	font-weight:400;
	word-break:keep-all;
	margin-top:2%;
	text-align:center;
}

/* Character */
#character {
	position:relative;
	padding:5% 0 8% 0;
	background-color:#53585e;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#character:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;
}
#character h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
}
#character article {
	position:relative;
	margin-top:5%;
	padding:0 10%;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#character article img {
	width:100%;
	height:auto;
}

/* Play Process */
#playProcess {
	position:relative;
	padding:5% 0 8% 0;
	background-color:#f0ffe6;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#playProcess:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;
}
#playProcess h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#383b42;
	display:block;
}
#playProcess ul {
	width:100%;
	padding:0 10%;
	margin-top:3%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#playProcess ul li {
	width:33.333%;
	padding:1%;
}
#playProcess article {
	display:flex;
	flex-direction:column;
	align-items:center;
}
#playProcess article h2 {
	width:100%;
	font-size:1.6vw;
	color:#fff;
	font-weight:700;
	padding:2% 0;
	background-color:#ff5900;
	border-radius:0.6vw 0.6vw 0 0;
	text-align:center;
	display:block;
}
#playProcess article h2 em {
	font-weight:200;
	font-style:normal;
	margin-right:2%;
}
#playProcess article h2 b {
	font-size:1vw;
	font-weight:200;
	font-style:normal;
	margin-right:2%;
}
#playProcess article img {
	width:100%;
	height:auto;
}

/* Play Features */
#PlayFeatures {
	position:relative;
	padding:5% 0 8% 0;
	background-color:#006E74;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#PlayFeatures:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/noise_pattern.jpg");
	mix-blend-mode:multiply;
}
#PlayFeatures h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
}
#PlayFeatures ul {
	width:100%;
	padding:0 10%;
	margin-top:3%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
#PlayFeatures ul li {
	width:25%;
	padding:1%;
}
#PlayFeatures article {
	display:flex;
	flex-direction:column;
	align-items:center;
}
#PlayFeatures article h2 {
	width:100%;
	font-size:1.6vw;
	color:#fff;
	font-weight:700;
	padding:3% 0;
	background-color:#00cbd3;
	border-radius:0.6vw 0.6vw 0 0;
	text-align:center;
	display:block;
}
#PlayFeatures article h2 em {
	font-weight:200;
	font-style:normal;
	margin-right:2%;
}
#PlayFeatures article img {
	width:100%;
	height:auto;
}
#PlayFeatures p {
	font-size:1.6vw;
	color:#fff;
	margin-top:3%;
	padding:2% 8%;
	border:3px solid #00cbd3;
	border-radius:50rem;
	text-align:center;
}
#PlayFeatures p strong {
	font-size:1.8vw;
	color:#00cbd3;
	display:block;
}

/* Structure */
#structure {
	position:relative;
	padding:5% 0 15% 0;
	background-color:#8d8479;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#structure:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/stage_bg.png");
	mix-blend-mode:multiply;
}
#structure h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
	z-index:1;
}
#structure h2 {
	position:relative;
	font-size:1.6vw;
	color:#ccc;
	z-index:1;
}
#structure article {
	position:relative;
	margin-top:8%;
	padding:0 10%;
	z-index:1;
}
#structure article img {
	width:100%;
	height:auto;
}
#structure p {
	position:relative;
	font-size:1.6vw;
	color:#fff;
	padding:2% 8%;
	border:3px solid #00cbd3;
	border-radius:50rem;
	text-align:center;
	z-index:1;
}
#structure p strong {
	font-size:1.8vw;
	color:#00cbd3;
	display:block;
}

/* Teams */
#teams {
	position:relative;
	padding:2% 0 8% 0;
	background-color:#645562;
	display:flex;
	flex-direction:column;
	align-items:center;
}
#teams:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/team_bg.png");
	mix-blend-mode:multiply;
}
#teams .headShape {
	position:absolute;
	top:-10%;
	left:0;
	width:100%;
	filter:drop-shadow(0px -6px 3px rgba(0,0,0,0.1));
	z-index:0;
}
#teams .headShape:before {
	content:"";
	padding-bottom:13%;
	display:block;
}
#teams .shape {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#645562;
	clip-path: url(#cloudShape);
}
#teams .shape:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/team_bg.png");
	mix-blend-mode:multiply;	
}
#teams h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
	z-index:1;
}
#teams h2 {
	position:relative;
	font-size:1.6vw;
	color:#ccc;
	z-index:1;
}
#teams article {
	position:relative;
	margin-top:5%;
	padding:0 10%;
	z-index:1;
}
#teams article img {
	width:100%;
	height:auto;
}

/* Company */
#company {
	position:relative;
	padding:5% 0 8% 0;
	background-color:#211f30;
	text-align:center;
}
#company:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url("../img/company_bg.png");
	mix-blend-mode:multiply;
}
#company h1 {
	position:relative;
	font-family:"CookieRun Black", sans-serif;
	font-size:2.8vw;
	color:#fff;
	display:block;
	z-index:1;
}
#company h2 {
	position:relative;
	font-size:1.6vw;
	color:#ccc;
	z-index:1;
}
#company article {
	position:relative;
	margin-top:5%;
	padding:0 10%;
	display:flex;
	align-items:center;
	z-index:1;
}
#company article .col { width:100%; padding:0 5%; }
#company article .col:first-of-type { width:45%; }
#company img {
	width:100%;
	height:auto;
}
#company ul {
	width:100%;
	border-bottom:1px solid rgba(255,255,255,0.25);
}
#company ul li {
	padding:3% 0;
	border-top:1px solid rgba(255,255,255,0.25);
	display:flex;
	align-items:center;
}
#company ul li span {
	min-width:30%;
	font-size:1vw;
	color:#8a879b;
	font-weight:700;
	text-align:left;
}
#company ul li p { text-align:left; }
#company ul li p b,
#company ul li p a {
	font-size:1vw;
	color:#fff;
	font-weight:200;
	line-height:150%;
	word-break:keep-all;
	display:block;
}