@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-family: 'Noto Sans KR', sans-serif;
	text-align: center;
	text-decoration: none;
	color: #000;
}

li {
	list-style: none;
}

#wrap {
	width: 100%;
}

.hidden {
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}


#header {
	height: 100vh;
	width: 100%;
	background: url(../img/rabbits.jpg) center;
	background-size: cover;
}

.banner {
	width: 100%;
	height: 80%;
	margin: 0 auto;
	float: left;

}

.banner > h1 {
	margin: 0 auto;
	transform: translateY(100%);
	width: 300px;
	text-align: right;
	font: 900 2.1rem/1.5 'Montserrat';
	color: #fff;
	text-decoration: rgba(139, 124, 255, 0.56) wavy underline;
	float: right;
	margin-right: 20px;
}

#section {
	margin: auto;

}

.about_brand {
	height: 100vh;
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.about_brand > h1 {
	padding: 20px 20px 0 20px;
	font: 900 2rem/4 'Montserrat';
	color: #B8C1EC;
	border-bottom: 4px wavy #B8C1EC;

}


.about_jellycat {
	width: 300%;
	overflow: hidden;
	position: relative;

}

.about_jellycat > li {
	width: 33.33%;
	float: left;
}

.about_jellycat > li > div {
	width: 180px;
	height: 180px;
	margin: auto;
	border-radius: 20px;
}

#about_png01 {
	background: url(../img/index_holly.png) center;
	background-size: cover;
}


#about_png02 {
	background: url(../img/index_mark.png) center;
	background-size: cover;
}

#about_png03 {
	background: url(../img/index_03.png) center;
	background-size: cover;
}

.left_btn {
	width: 28px;
	height: 50px;
	position: relative;
	right: 35%;
	top: 47px;
	transform: rotate(180deg) translateY(-66.5px);
	z-index: 1;
	cursor: pointer;
}

.right_btn {
	width: 28px;
	height: 50px;
	position: relative;
	top: 47px;
	transform: translateY(66.5px);
	left: 35%;
	z-index: 1;
	cursor: pointer;
}

.left_btn:hover {
	transform: scale(1.1) rotate(180deg) translateY(-60px);
	transition: all 0.2s ease-in-out;
}

.right_btn:hover {
	transform: scale(1.1) translateY(60px);
	transition: all 0.2s ease-in-out;
}

.about_jellycat > li > h3 {
	width: 35%;
	font: bold 1.5rem/2 'Montserrat';
	margin: 30px auto 10px auto;
	border-bottom: 4px solid rgba(139, 124, 255, 0.56)
}


.about_jellycat > li > p {
	width: 250px;
	margin: auto;
	font: normal 1rem/1.6 'Noto Sans KR';
}

.btn {
	width: 150px;
	height: 45px;
	background: #FEBEB0;
	cursor: pointer;
	border: none;
	margin: 40px auto;
	transition: all 0.3s ease-in-out;
	border-radius: 10px;
}

.btn > a {
	display: block;
	font: normal 1rem/1 'Montserrat';
	color: #fff;
	transition: all 0.3s ease-in-out;
}

.btn:hover {
	background: #fd9c9c;
	width: 160px;
	transition: all 0.3s ease-in-out;
}

.intro_product {
	height: 100vh;
	width: 100%;
	margin: auto;
	/*	background: #2F365F;*/
	background: url(../img/index_bed.jpg) center;
	background-size: cover;
	float: left;
	overflow: hidden;
}

.intro_product > h1 {
	max-width: 1200px;
	padding: 60px 20px 50px 20px;
	font: 900 2rem/1.4 'Montserrat';
	text-align: left;
	margin: auto;
	color: #fff;
}

.products {
	width: calc(100% - 40px);
	height: 360px;
	display: grid;
	margin: auto;
	grid-gap: 10px;
	grid-template-columns: auto auto;
}

.products > li {
	border-radius: 20px;
}

.products > li:nth-child(1) {
	background: url(../img/doll1.jpg) center;
	background-size: cover;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.products > li:nth-child(1):hover {
	transform: scale(1.05);
}

.products > li:nth-child(2) {
	background: url(../img/doll2.png) center;
	background-size: cover;
	cursor: pointer;
	transition: all 0.3s ease-in-out;

}

.products > li:nth-child(2):hover {
	transform: scale(1.05);

}

.products > li:nth-child(3) {
	background: url(../img/doll4.png) center;
	background-size: cover;
	cursor: pointer;
	transition: all 0.3s ease-in-out;

}

.products > li:nth-child(3):hover {
	transform: scale(1.05);

}

.products > li:nth-child(4) {
	background: url(../img/doll3.jpg) center;
	background-size: cover;
	cursor: pointer;
	transition: all 0.3s ease-in-out;

}

.products > li:nth-child(4):hover {
	transform: scale(1.05);

}

.intro_product > .btn {
	margin: 50px;
}

#footer {
	height: 300px;
	width: 100%;
	float: left;
	background: #2F365F;
}

#footer > select {
	margin: 50px 0;
}

#address {
	font-size: 0.9rem;
	color: #ddd;


}

#address > a {
	color: #ddd;
}



/*태블릿(768이상*/

@media all and (min-width:768px) {
	.banner {
		width: 100%;
		height: 80%;
		margin: 0 auto;
	}

	.banner > h1 {
		width: 100%;
		font: 900 3rem/1.5 'Montserrat';
		text-align: center;
		margin: auto;
		transform: translateY(80%);
	}

	.slide_btn {
		display: none;
	}


	.about_brand > h1 {
		padding: 20px 20px 0 20px;
		font: 900 2rem/3 'Montserrat';
		color: #B8C1EC;
		border-bottom: 4px wavy #B8C1EC;

	}

	.about_jellycat {
		width: calc(100% - 40px);
		overflow: hidden;
		margin: auto;
		display: grid;
		grid-template-columns: auto auto auto;
	}

	.about_jellycat > li {
		width: calc(100% - 30px);
		height: 420px;
		margin: 20px auto;
		box-shadow: 0 0 8px rgba(221, 221, 221, 0.8);
	}


	.about_jellycat > li:hover {
		transform: scale(1.05);
		transition: all 0.3s ease-in-out;

	}

	#about_png01 {
		margin-top: 20px;
	}

	#about_png02 {
		margin-top: 20px;
	}


	#about_png03 {
		margin-top: 20px;
	}

	.about_jellycat > li > h3 {
		width: 80%;
		font: bold 1.4rem/2.5 'Montserrat';
		text-align: center;
		margin-top: 20px;
	}

	.about_jellycat > li > p {
		width: 90%;
		margin: auto;
		font: normal 1rem/1.6 'Noto Sans KR';
		text-align: center;
	}

	.about_jellycat > li > div {
		margin: auto;
	}
	
	.intro_product > h1{
		text-align: center;
	}

	.products {
		width: calc(100% - 40px);
		height: 40%;
		display: grid;
		margin: - auto;
		grid-gap: 20px;
		grid-template-columns: auto auto auto auto;

	}

	.products > li:nth-child(3) {
		grid-column: 4;
		grid-row: 1;
	}

}




/*PC용*/

@media all and (min-width:1200px) {
	.banner {
		margin: 0 auto;
	}

	.about_jellycat {
		width: 1200px;
	}

	.about_jellycat > li {
		width: calc(100% - 50px);
		height: 420px;
		margin: 20px auto;
		box-shadow: 0 0 8px rgba(221, 221, 221, 0.8);
	}


	.about_jellycat > li > h3 {
		width: 50%;
		font: bold 1.3rem/3 'Montserrat';
		text-align: center;
		margin-top: 20px;
	}

	.about_jellycat > li > p {
		width: 62%;

	}

	.products {
		width: 1200px;
		height: 50%;
		grid-template-columns: auto auto auto auto;
	}

}