/*캐릭터 css*/

@font-face {
	font-family: '777Newyorkers';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_nine_@1.1/777Newyorkers.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
  font-family: 'Godo';
  font-style: normal;
  font-weight: 700;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff');
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

ul li {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
	font-family: 'Godo', sans-serif;
}

html {
	font-size: 16px;
	overflow-style: none;
}

::-webkit-scrollbar {
	display: none;
}

/*
body{
  overflow: hidden;
}
*/

#wrap {
	width: 100%;
	height: auto;
	background-image: url(img/character/background.png);
	background-repeat: no-repeat;
	background-size: cover;
}

/*-------------------------------------------------*/

/*--------------------------------------------메뉴---*/
.header {
	width: 20%;
	height: 100%;
	float: left;
	position: fixed;
	/*    border: 5px solid blue;*/
}

.header > a {
	width: 50%;
	height: auto;
	display: block;
	margin-left: 20%;
	margin-top: 25%;
	margin-bottom: 20%;
}

.header > a > img {
	width: 100%;
	height: auto;
}

.header > ul {
	width: 100%;
	height: 100%;
	float: left;
	margin-left: 22.5%;
}

.header > ul > li {
	width: 45%;
	height: 85px;
	margin-bottom: 24px;
	border: 2.5px solid black;
	border-radius: 50px;
	box-shadow: inset -4px -5px 0px rgba(0, 0, 0, 0.25), inset 4px 5px 0px #fff;
	background-color: #fff;
}

.header > ul > li > a {
	font-size: 1.2vw;
	font-family: 'Godo';
	font-weight: 700;
	line-height: 80px;
	text-align: center;
	display: block;
}

.header > ul .menu03 {
	background-color: #5fd2ff;
}

.header > ul .menu01:hover {
	background-color: #a682d3;
}

.header > ul .menu02:hover {
	background-color: #fcc917;
}

.header > ul .menu04:hover {
	background-color: #ffb0c0;
}

.header > ul .menu05:hover {
	background-color: #ebece5;
}

/*--------------------------------------------메뉴---*/
.panel {
	position: relative;
}

.panel:nth-of-type(even) {}

.svg-path svg {
	width: 100%;
	height: 100%;
}

.svg-path svg path {
	stroke: #fff;
	fill: none;
	stroke-width: 6px;
	stroke-miterlimit: 10;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*--------------------------------------------cen_box---*/
.cen_box {
	width: 50%;
	height: auto;
	margin-left: 25%;
	/*    border: 5px solid pink;*/
}

/*--------------------------------------------cen_box---*/
.tag_0 {
	width: 80px;
	height: 40px;
	border-radius: 50px;
	font-size: 24px;
	font-family: 'Godo';
	font-weight: bold;
	text-align: center;
	line-height: 40px;
}

/*--------------------------------------------마인---*/
.mine_img {
	width: 35%;
	position: absolute;
	top: 32%;
	left: 42%;
	transform: rotate(-18deg);
}

.tag_1 {
	position: absolute;
	top: 28%;
	left: 88%;
	z-index: 999;
	background-color: #ff981d;
}

.svg-path_1 {
	width: 55%;
	height: auto;
	position: absolute;
	top: 25%;
	left: 35%;
}

.text_1 {
	width: 450px;
	height: auto;
	position: absolute;
	top: 40%;
	left: 90%;
	font-size: 18px;
	font-family: 'Godo';
	font-weight: 500;
	line-height: 25px;
}

.btn-1 {
	background: #ff981d;
	position: absolute;
	z-index: 99999;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding-left: 20%;
	padding-top: 7%;
	left: -40%;
	right: 0;
	top: 65%;
	bottom: 0;
	margin: auto;
	transition: all .7s;
	box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.1);
}

#click_box-1 {
	width: 50px;
	height: auto;
	position: absolute;
	top: 68%;
	left: 27%;
}

#click_box-1 .click {
	width: 100%;
	height: auto;
}

#click_box-2 {
	width: 50px;
	height: auto;
	position: absolute;
	top: 65%;
	left: 72%;
}

#click_box-2 .click {
	width: 100%;
	height: auto;
}

#click_box-3 {
	width: 50px;
	height: auto;
	position: absolute;
	top: 67%;
	left: 52%;
}

#click_box-3 .click {
	width: 100%;
	height: auto;
}

#click_box-4 {
	width: 50px;
	height: auto;
	position: absolute;
	top: 70%;
	left: 80%;
}

#click_box-4 .click {
	width: 100%;
	height: auto;
}

.animation__bounce {
	animation-name: bounce;
	animation-duration: .7s;
	animation-timing-function: ease;
	visibility: visible !important;
}

@keyframes bounce {
	0% {
		opacity: 0;
		transform: translateY(100%) scale(0.6) scaleY(0.5);
	}

	60% {
		transform: translateY(-7%) scaleY(1.12);
	}

	75% {
		transform: translateY(3%);
	}

	100% {
		transform: translateY(0%) scale(1) scaleY(1);
	}
}

/*
.btn_orange{
    width: 200px;
    height: 80px;
    background: #ff981d;
    border-radius: 100PX /40PX;
    box-shadow: inset 0 10px 0 rgba(0,0,0,0.1);
    position: absolute;
    top: 76%;
    left: 12%;
}
*/
/*--------------------------------------------마인---*/

/*--------------------------------------------보나---*/
.bona_img {
	width: 33%;
	margin-left: 28%;
	margin-top: 35%;
	transform: rotate(-20deg);
}

.tag_2 {
	position: absolute;
	top: 23.5%;
	left: 82%;
	z-index: 999;
	background-color: #feb0bf;
}

.svg-path_2 {
	width: 75%;
	height: auto;
	position: absolute;
	top: 25%;
	left: 10%;
}

.text_2 {
	width: 450px;
	height: auto;
	position: absolute;
	top: 35%;
	left: 85%;
	font-size: 18px;
	font-family: 'Godo';
	font-weight: 500;
	line-height: 25px;
}

.btn-2 {
	background: #feb0bf;
	position: absolute;
	z-index: 99999;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding-left: 20%;
	padding-top: 7%;
	left: 50%;
	right: 0;
	top: 60%;
	bottom: 0;
	margin: auto;
	transition: all .7s;
	box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------보나---*/


/*--------------------------------------------바로---*/
.baro_img {
	width: 36%;
	margin-left: 80%;
	margin-top: 45%;
	transform: rotate(10deg);
}

.tag_3 {
	position: absolute;
	top: 24%;
	left: 500px;
	z-index: 999;
	background-color: #5fd2ff;
}

.svg-path_3 {
	width: 60%;
	height: auto;
	position: absolute;
	top: 25%;
	left: 60%;
}

.text_3 {
	width: 450px;
	height: auto;
	position: absolute;
	top: 40%;
	left: 5%;
	font-size: 18px;
	font-family: 'Godo';
	font-weight: 500;
	line-height: 25px;
}

.btn-3 {
	background: #5fd2ff;
	position: absolute;
	z-index: 99999;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding-left: 20%;
	padding-top: 7%;
	left: 10%;
	right: 0;
	top: 65%;
	bottom: 0;
	margin: auto;
	transition: all .7s;
	box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------바로---*/

/*--------------------------------------------스나로---*/
.snaro_img {
	width: 45%;
	margin-left: 57%;
	margin-top: 32%;
	transform: rotate(-10deg)
}

.tag_4 {
	position: absolute;
	top: 25%;
	left: 33%;
	z-index: 999;
	background-color: #ebece5;
}

.svg-path_4 {
	width: 65%;
	height: auto;
	position: absolute;
	top: 25%;
	left: 40%;
}

.text_4 {
	width: 400px;
	height: auto;
	position: absolute;
	top: 40%;
	left: 5%;
	font-size: 18px;
	font-family: 'Godo';
	font-weight: 500;
	line-height: 25px;
}

.btn-4 {
	background: #ebece5;
	position: absolute;
	z-index: 99999;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding-left: 20%;
	padding-top: 7%;
	left: 65%;
	right: 0;
	top: 70%;
	bottom: 0;
	margin: auto;
	transition: all .7s;
	box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------스나로---*/

/*--------------------------------------------nav---*/
.nav {
	width: 50%;
	height: 100px;
	position: fixed;
	top: 0px;
	left: 25%;
	z-index: 99;
	/*    border: 5px solid green;*/
}

.nav .chr_t {
	position: absolute;
	top: 45px;
	left: 82%;
	font-family: 'Godo';
	font-weight: 500;
	font-size: 1.7vw;
	cursor: pointer;
}

/*--------------------------------------------nav---*/


/*
#btn {
    position: absolute;
    z-index: 99999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00AA88;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all .7s;
}
*/

#all {
	width: 150px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: 50%;
	cursor: pointer;
}

/*
.x_btn-1{
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 150px;
    left: 260px;
    z-index: 99999999;
    display: none;
}
.x_btn-1>img{
    width: 100%;
    height: auto;
}
*/

#line {
	position: absolute;
	width: 30px;
	height: 6px;
	z-index: 999991;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: #fff;
	border-radius: 3px;
	transform: rotate(0deg);
}

#line:before {
	content: '';
	width: 30px;
	height: 6px;
	background: #fff;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: 3px;
	transform: rotate(-90deg);
}


#photos {
	position: absolute;
	width: 1900px;
	height: 100px;
	margin: auto;
	opacity: 0;
	transition: all 1s cubic-bezier(.43, -0.58, .6, 1.56);
	transform: rotate(45deg);
	display: none;
}

.photo-1 {
	top: -200px;
	left: -250px;
	bottom: 50px;
}

.photo-2 {
	top: -200px;
	left: -270px;
	bottom: 1200px;
}

#photos > .bg-photo-1 > img {
	width: 100%;
	top: 0%;
	left: 0%;
}

.photo-3 {
	top: -200px;
	left: -270px;
	bottom: 1000px;
}

.photo-4 {
	top: -200px;
	left: -270px;
	bottom: 1000px;
}

#photos > .bg-photo-2 > img {
	width: 100%;
	top: 0%;
	left: 0%;
}

#photos li {
	position: relative;
	display: inline-block;
	width: 300px;
	height: 300px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	background: rgba(255, 255, 255);
	border-radius: 50%;
	overflow: hidden;
	text-align: center;
}

#photos li img {
	position: absolute;
	width: 90%;
	top: 5%;
	left: 5%;
}

#photos li:last-child img {
	top: 15%;
	left: 10px;
}

#photos li > p {
	font-size: 14px;
	font-family: 'Roboto';
	font-weight: 500;
	line-height: 25px;
	margin-top: 170px;
}

#photos li > .icon-1 > img {
	width: 50px;
	height: auto;
	margin-top: 50px;
	margin-left: 40px;
}

#photos li > .icon-1 > img:hover {
	filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
}

#photos li > .icon-2 > img {
	width: 50px;
	height: auto;
	margin-top: 50px;
	margin-left: 110px;
}

#photos li > .icon-2 > img:hover {
	filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
	cursor: default;
}

#photos li > .icon-3 > img {
	width: 50px;
	height: auto;
	margin-top: 50px;
	margin-left: 180px;
}

#photos li > .icon-3 > img:hover {
	filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5));
	cursor: default;
}


.logo_mobile {
	display: none;
}

.side_box {
	display: none;
}

.open {
	display: none;
}


/*-------------------------------------------------*/

@media (max-width: 1280px) {
	body {
		background: #880e4f;
	}

	html {
		font-size: 12px;
	}
	.header>ul>li{
		width: 45%;
		height: 65px;
	}
	.header>ul>li>a{
		line-height: 55px;
	}

}




@media (max-width: 1024px) {
	body {
		background: #4a148c;
	}
	.header>ul>li{
		width: 40%;
		height: 55px;
		margin-bottom: 15px;
		border: 3px solid black;
	}
	.header>ul>li>a{
		line-height: 50px;
	}

}




@media (max-width: 960px) {
	body {
		background: #311b92;
	}

}




@media (max-width: 768px) {
/*
	body {
		background: #4a148c;
	}
*/
	body {
			background: #fff;
			background-image: url(img/character/background.png);
			background-size: cover;
			/*        background: #004D40;*/
		}

		#wrap {
			background-image: none;
		}

		.header {
			display: none;
		}

		#click_box-1 {
			display: none;
		}

		#click_box-2 {
			display: none;
		}

		#click_box-3 {
			display: none;
		}

		#click_box-4 {
			display: none;
		}

		#btn {
			display: none;
		}

		.logo_mobile {
			display: block;
			width: 35%;
			height: auto;
			float: left;
			position: fixed;
			z-index: 999;
			margin-left: 5%;
			margin-top: 30px;
		}

		.logo_mobile > a {
			width: 100%;
			height: auto;
			display: block;
		}

		.logo_mobile > a > img {
			width: 100%;
			height: auto;
		}

		.side_box {
			width: 200px;
			height: 100%;
			position: fixed;
			top: 0;
			right: -200px;
			z-index: 9999;
			transition: 0.4s;
			background-color: #fff;
			display: block;
		}

		.side_box > ul {
			width: 100%;
			height: auto;
			position: absolute;
			top: 10%;
		}

		.side_box > ul > li {
			width: 100%;
			height: 30px;
			text-align: right;
			padding-right: 25%;
			font-size: 12PX;
		}

		.close {
			width: 30px;
			height: 30px;
			position: absolute;
			top: 3%;
			right: 17%;
			z-index: 999;
			/*        background-color: forestgreen;*/
			cursor: pointer;
		}

		.side_box .line {
			width: 30px;
			height: 4px;
			margin-bottom: 5px;
			border-radius: 50px;
			background-color: #4f4f4f;
		}

		.side_box .line01 {
			transform-origin: top left;
			transform: rotate(40deg);
		}

		.side_box .line02 {
			background-color: rgba(0, 0, 0, 0);
		}

		.side_box .line03 {
			transform-origin: bottom left;
			transform: rotate(-40deg);
		}

		.open {
			width: 30px;
			height: 30px;
			position: fixed;
			top: 3%;
			right: 5%;
			z-index: 999;
			cursor: pointer;
			display: block;
			/*        background-color: hotpink;*/
		}

		.open .line {
			width: 25px;
			height: 4px;
			margin-bottom: 5px;
			border-radius: 50px;
			background-color: #4f4f4f;
		}

		.nav {
			top: 110px;
			left: 320px;
		}

		.nav .chr_t {
			font-size: 16px;
		}

		.cen_box {
			margin-left: 0;
		}

		/*    -----------------------------------------------*/

		.tag_0 {
			width: 40px;
			height: 20px;
			font-size: 12px;
			line-height: 20px;
		}

		.mine_img {
			width: 60%;
			left: 65%;
			top: 25%;
		}

		.tag_1 {
			top: 25%;
			left: 135%;
		}

		.svg-path_1 {
			width: 80%;
			left: 58%;
			top: 23%;
		}

		.text_1 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 60%;
			top: 64%;
		}

		.bona_img {
			width: 55%;
			margin-left: 65%;
			margin-top: 70%;
		}

		.tag_2 {
			top: 22%;
			left: 155%;
		}

		.svg-path_2 {
			width: 120%;
			left: 42%;
			top: 23%;
		}

		.text_2 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 60%;
			top: 64%;
		}

		.baro_img {
			width: 55%;
			margin-left: 85%;
			margin-top: 90%;
		}

		.tag_3 {
			top: 22%;
			left: 50%;
		}

		.svg-path_3 {
			width: 90%;
			left: 55%;
			top: 23%;
		}

		.text_3 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 60%;
			top: 64%;
		}

		.svg-path_3 svg path {
			stroke: #eee;
		}

		.snaro_img {
			width: 55%;
			margin-left: 85%;
			margin-top: 90%;
		}

		.tag_4 {
			top: 29%;
			left: 48%;
		}

		.svg-path_4 {
			width: 90%;
			left: 55%;
			top: 30%;
		}

		.text_4 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 60%;
			top: 64%;
		}

		.svg-path_4 svg path {
			stroke: #eee;
		}

	@media (max-width: 576px) {
		body {
			background: #fff;
			background-image: url(img/character/background.png);
			background-size: cover;
			/*        background: #004D40;*/
		}

		#wrap {
			background-image: none;
		}

		.header {
			display: none;
		}

		#click_box-1 {
			display: none;
		}

		#click_box-2 {
			display: none;
		}

		#click_box-3 {
			display: none;
		}

		#click_box-4 {
			display: none;
		}

		#btn {
			display: none;
		}

		.logo_mobile {
			display: block;
			width: 35%;
			height: auto;
			float: left;
			position: fixed;
			z-index: 999;
			margin-left: 10%;
			margin-top: 20px;
		}

		.logo_mobile > a {
			width: 100%;
			height: auto;
			display: block;
		}

		.logo_mobile > a > img {
			width: 100%;
			height: auto;
		}

		.side_box {
			width: 200px;
			height: 100%;
			position: fixed;
			top: 0;
			right: -200px;
			z-index: 9999;
			transition: 0.4s;
			background-color: #fff;
			display: block;
		}

		.side_box > ul {
			width: 100%;
			height: auto;
			position: absolute;
			top: 10%;
		}

		.side_box > ul > li {
			width: 100%;
			height: 30px;
			text-align: right;
			padding-right: 25%;
			font-size: 12PX;
		}

		.close {
			width: 30px;
			height: 30px;
			position: absolute;
			top: 3%;
			right: 17%;
			z-index: 999;
			/*        background-color: forestgreen;*/
			cursor: pointer;
		}

		.side_box .line {
			width: 30px;
			height: 4px;
			margin-bottom: 5px;
			border-radius: 50px;
			background-color: #4f4f4f;
		}

		.side_box .line01 {
			transform-origin: top left;
			transform: rotate(40deg);
		}

		.side_box .line02 {
			background-color: rgba(0, 0, 0, 0);
		}

		.side_box .line03 {
			transform-origin: bottom left;
			transform: rotate(-40deg);
		}

		.open {
			width: 30px;
			height: 30px;
			position: fixed;
			top: 3%;
			right: 10%;
			z-index: 999;
			cursor: pointer;
			display: block;
			/*        background-color: hotpink;*/
		}

		.open .line {
			width: 25px;
			height: 4px;
			margin-bottom: 5px;
			border-radius: 50px;
			background-color: #4f4f4f;
		}

		.nav {
			top: 50px;
			left: 136px;
		}

		.nav .chr_t {
			font-size: 12px;
		}

		.cen_box {
			margin-left: 0;
		}

		/*    -----------------------------------------------*/

		.tag_0 {
			width: 40px;
			height: 20px;
			font-size: 12px;
			line-height: 20px;
		}

		.mine_img {
			width: 60%;
			left: 65%;
			top: 25%;
		}

		.tag_1 {
			top: 25%;
			left: 135%;
		}

		.svg-path_1 {
			width: 80%;
			left: 58%;
			top: 25%;
		}

		.text_1 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 13%;
			top: 54%;
		}

		.bona_img {
			width: 55%;
			margin-left: 65%;
			margin-top: 90%;
		}

		.tag_2 {
			top: 22%;
			left: 155%;
		}

		.svg-path_2 {
			width: 120%;
			left: 42%;
			top: 23%;
		}

		.text_2 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 13%;
			top: 54%;
		}

		.baro_img {
			width: 55%;
			margin-left: 85%;
			margin-top: 110%;
		}

		.tag_3 {
			top: 22%;
			left: 50%;
		}

		.svg-path_3 {
			width: 90%;
			left: 55%;
			top: 23%;
		}

		.text_3 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 13%;
			top: 54%;
		}

		.svg-path_3 svg path {
			stroke: #eee;
		}

		.snaro_img {
			width: 55%;
			margin-left: 85%;
			margin-top: 120%;
		}

		.tag_4 {
			top: 29%;
			left: 48%;
		}

		.svg-path_4 {
			width: 90%;
			left: 55%;
			top: 30%;
		}

		.text_4 {
			font-size: 12px;
			text-align: center;
			width: 310px;
			left: 13%;
			top: 54%;
		}

		.svg-path_4 svg path {
			stroke: #eee;
		}
	}