@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;
	background-size: cover;
}

li {
	list-style: none;
}

#wrap {
	width: 100%;
	background: #B8C1EC;
}

.hidden {
	visibility: hidden;
	height: 0;
	width: 0;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

#header {
	width: 100%;
	height: 52vh;
}

.banner > div {
	display: block;
	width: 100%;
	float: left;
	top: 28%;
	position: absolute;
	color: #2F365F;
}

.banner > div > p {
	font: normal 1rem/1.5 'Montserrat';
	color: #fff;
}

.banner > div > h1 {
	font: 900 3rem/1.5 'Montserrat';
	color: #2F365F;
}

.products {
	width: 100%;
}

.choice {
	width: 100%;
	height: 50px;
	background: rgba(255, 255, 255, 0.6);

}

.choice > div {
	width: 500px;
	margin: 0 auto;
	text-align: center;

}

.choice > div > li {
	width: 260px;
	line-height: 50px;
	margin: 0 auto;
}


.choice > div > li > a {
	display: block;
	width: 90px;
	height: 50px;
	font: bold 1.2rem/51px 'Montserrat';
	margin: 0 20px;
	float: left;
}

.choice > div > li > a:hover {
	background: url(../img/pencil_line_pink.png) center;
	background-size: cover;
}

.color {
	background: url(../img/pencil_line_pink.png) center;
	background-size: cover;
}

.doll {
	position: relative;
	z-index: 2;
}


.li01 {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}


.li02 {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.doll_product > h2 {
	margin-left: 20px;
	font: 900 2rem/140px 'Montserrat';
	text-align: left;
	text-decoration: underline wavy;
	color: #2F365F;
}


.furry_dolls {
	width: 500%;
	position: relative;
	overflow: hidden;
}

.rattle_dolls {
	width: 300%;
	position: relative;
	overflow: hidden;
}

.furry_dolls > div {
	width: calc(20% - 40px);
	height: 100%;
	float: left;
	display: grid;
	margin: auto 20px;
	grid-gap: 20px;
	grid-template-columns: auto auto;
	overflow: hidden;
}

.rattle_dolls > div {
	width: calc(33.33% - 40px);
	height: 100%;
	float: left;
	display: grid;
	margin: auto 20px;
	grid-gap: 20px;
	grid-template-columns: auto auto;
	overflow: hidden;

}

.btn {
	display: block;
	float: left;
	width: 100%;
	position: absolute;
}

.btn > img {
	width: 25px;
	height: 47px;
	transform: scale(0.7);
	cursor: pointer;
	padding: 5px 16px;
	margin: 5vh auto 0;
	border-radius: 9999px;
}

#btn01_ri {
	transform: rotate(180deg) scale(0.7);
}

.btn_01 > img {
	background-color: #2f365f;
}

.btn_02 > img {
	background-color: #febeb0;
}

#btn02_ri {
	transform: rotate(180deg) scale(0.7);
}

.btn_01 > img:hover {
	transition: all 0.3s ease-in-out;
	transform: scale(0.75);
	box-shadow: 0 0 10px rgba(75, 75, 75, 0.7);
}


.btn_02 > img:hover {
	transition: all 0.3s ease-in-out;
	transform: scale(0.75);
	box-shadow: 0 0 10px rgba(13, 32, 33, 0.7);
}

.dolls > div > li {
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 40px;
	position: relative;
	margin: auto;
	z-index: 1;
	transition: all 0.2s ease-in-out;
}

.dolls > div > li:hover ::after {
	width: 100%;
	height: 100%;
	content: "";
	cursor: pointer;
	border-radius: 40px;
	position: absolute;
	background: #fff;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0.4;
}


.dolls > div > li > h3 {
	display: block;
	margin-top: 30%;
	margin-left: 12%;
	float: left;
	font: bold 1.2rem/2 'Montserrat';
	top: 4%;
	visibility: hidden;
}

.dolls > div > li > p {
	display: block;
	width: 1px;
	margin-left: 12%;
	margin-bottom: 15%;
	font: bold 1rem/1.1 'Montserrat';
	color: #ff2323;
	text-align: center;
	opacity: 1;
	visibility: hidden;
}


.dolls > div > li:hover p {
	visibility: inherit;
}

.dolls > div > li:hover h3 {
	visibility: inherit;
	opacity: 1;
}


/* Furry Dolls 제품 목록 */

/* Furry Dolls-  1페이지 */

#no1 > li:nth-child(1) {
	background: url(../img/doll1.jpg) center;
	background-size: cover;
}


#no1 > li:nth-child(2) {
	background: url(../img/doll2.jpg) center;
	background-size: cover;
}

#no1 > li:nth-child(3) {
	background: url(../img/doll3.jpg) center;
	background-size: cover;
}

#no1 > li:nth-child(4) {
	background: url(../img/doll4.jpg) center;
	background-size: cover;
}

/* Furry Dolls-  2페이지 */

#no2 > li:nth-child(1) {
	background: url(../img/doll5.jpg) center;
	background-size: cover;
}

#no2 > li:nth-child(2) {
	background: url(../img/doll6.jpg) center;
	background-size: cover;
}

#no2 > li:nth-child(3) {
	background: url(../img/doll7.jpg) center;
	background-size: cover;
}

#no2 > li:nth-child(4) {
	background: url(../img/doll8.jpg) center;
	background-size: cover;
}

/* Furry Dolls-  3페이지 */

#no3 > li:nth-child(1) {
	background: url(../img/doll9.jpg) center;
	background-size: cover;
}

#no3 > li:nth-child(2) {
	background: url(../img/doll10.jpg) center;
	background-size: cover;
}

#no3 > li:nth-child(3) {
	background: url(../img/doll11.jpg) center;
	background-size: cover;
}

#no3 > li:nth-child(4) {
	background: url(../img/doll12.jpg) center;
	background-size: cover;
}

/* Furry Dolls-  4페이지 */

#no4 > li:nth-child(1) {
	background: url(../img/doll13.jpg) center;
	background-size: cover;
}

#no4 > li:nth-child(2) {
	background: url(../img/doll14.jpg) center;
	background-size: cover;
}


#no4 > li:nth-child(3) {
	background: url(../img/doll15.jpg) center;
	background-size: cover;
}


#no4 > li:nth-child(4) {
	background: url(../img/doll16.jpg) center;
	background-size: cover;
}

/* Furry Dolls-  5페이지 */

#no5 > li:nth-child(1) {
	background: url(../img/doll17.jpg) center;
	background-size: cover;
}

#no5 > li:nth-child(2) {
	background: url(../img/doll18.jpg) center;
	background-size: cover;
}

#no5 > li:nth-child(3) {
	background: url(../img/doll19.jpg) center;
	background-size: cover;
}

#no5 > li:nth-child(4) {
	background: url(../img/doll20.jpg) center;
	background-size: cover;
}

/* Furry Dolls-  6페이지 */

#no6 > li:nth-child(1) {
	background: url(../img/rattle_doll1.jpg) center;
	background-size: cover;
}

#no6 > li:nth-child(2) {
	background: url(../img/rattle_doll2.jpg) center;
	background-size: cover;
}

#no6 > li:nth-child(3) {
	background: url(../img/rattle_doll3.jpg) center;
	background-size: cover;
}

#no6 > li:nth-child(4) {
	background: url(../img/rattle_doll5.jpg) center;
	background-size: cover;
}


/* rattle dolls 제품 목록 */

/* Rattle dolls  - 1페이지 */

#no7 > li:nth-child(1) {
	background: url(../img/rattle_doll1.jpg) center;
	background-size: cover;
}

#no7 > li:nth-child(2) {
	background: url(../img/rattle_doll2.jpg) center;
	background-size: cover;
}

#no7 > li:nth-child(3) {
	background: url(../img/rattle_doll3.jpg) center;
	background-size: cover;
}

#no7 > li:nth-child(4) {
	background: url(../img/rattle_doll4.jpg) center;
	background-size: cover;
}


/* Rattle dolls  - 2페이지 */

#no8 > li:nth-child(1) {
	background: url(../img/rattle_doll5.jpg) center;
	background-size: cover;
}

#no8 > li:nth-child(2) {
	background: url(../img/rattle_doll6.jpg) center;
	background-size: cover;
}

#no8 > li:nth-child(3) {
	background: url(../img/rattle_doll7.jpg) center;
	background-size: cover;
}

#no8 > li:nth-child(4) {
	background: url(../img/rattle_doll8.jpg) center;
	background-size: cover;
}

/* Rattle dolls  - 3페이지 */

#no9 > li:nth-child(1) {
	background: url(../img/rattle_doll9.jpg) center;
	background-size: cover;
}

#no9 > li:nth-child(2) {
	background: url(../img/rattle_doll10.jpg) center;
	background-size: cover;
}

#no9 > li:nth-child(3) {
	background: url(../img/rattle_doll11.jpg) center;
	background-size: cover;
}


/*--------Acc--------*/

.acc {
	width: 100%;
	float: left;
	z-index: 1;
	overflow: hidden;
	position: relative;
	display: none;
	background: #F7F1ED;
	padding-bottom: 60px;
}

.z_index {
	z-index: 3;
}

.acc_product {
	background: #F7F1ED
}

.acc_product > h2 {
	margin-left: 20px;
	font: 900 2.5rem/140px 'Montserrat';
	text-align: left;
	text-decoration: underline wavy;
	color: #2F365F;
}

.acc_product > ul {
	width: calc(100% - 40px);
	height: 100%;
	float: left;
	display: grid;
	margin: auto 20px;
	grid-gap: 20px;
	grid-template-columns: auto auto;
	overflow: hidden;
}

.acc_product > ul > li {
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 40px;
	position: relative;
	margin: auto;
	z-index: 1;
	transition: all 0.2s ease-in-out;
	overflow: hidden;
}

.acc_product > ul > li:hover ::after {
	width: 100%;
	height: 100%;
	content: "";
	cursor: pointer;
	border-radius: 40px;
	position: absolute;
	background: #fff;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0.4;
}

.acc_product > ul > li > h3 {
	display: block;
	margin-top: 30%;
	margin-left: 12%;
	float: left;
	font: bold 1.2rem/2 'Montserrat';
	top: 4%;
	visibility: hidden
}


.acc_product > ul > li > p {
	display: block;
	width: 1px;
	margin-left: 12%;
	margin-bottom: 15%;
	font: bold 1rem/1.1 'Montserrat';
	color: #ff2323;
	text-align: center;
	opacity: 1;
	visibility: hidden;
}


.acc_product > ul > li:hover p {
	visibility: inherit;
}

.acc_product > ul > li:hover h3 {
	visibility: inherit;
	opacity: 1;
}

/* 악세사리 물품 목록 */

.acc_product > ul > li:nth-child(1) {
	background: url(../img/acc1.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(2) {
	background: url(../img/acc2.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(3) {
	background: url(../img/acc3.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(4) {
	background: url(../img/acc4.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(5) {
	background: url(../img/acc5.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(6) {
	background: url(../img/acc6.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(7) {
	background: url(../img/acc7.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(8) {
	background: url(../img/acc8.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(9) {
	background: url(../img/acc9.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(10) {
	background: url(../img/acc10.jpg) center;
	background-size: cover;
}

.acc_product > ul > li:nth-child(11) {
	background: url(../img/acc13.jpg) center;
	background-size: cover;
}

/*
.acc_product > ul > li:nth-child(12) {
	background: url(../img/acc12.jpg) center;
	background-size: cover;
}
*/


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


#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) {

	.menu > li:nth-child(2) {
		background: url(../img/pencil_line.png) center;
		background-size: cover;
		display: block;
		width: 100px;
	}

	.menu > li:nth-child(2) a {
		color: #FEBEB0;

	}

	.menu > li:hover {
		background: none;
	}

	.choice {
		min-width: 767px;
		margin: auto;
	}

	.doll_product > h2 {
		margin-left: 50px;
		font: 900 2.5rem/150px'Montserrat';
		margin-bottom: 20px;
		text-align: left;
		transition: all 0.3s ease-in-out;
	}

	.doll_product > ul > div {
		height: 70%;
		grid-gap: 30px;
		grid-template-columns: auto auto auto auto;
		transition: all 0.4s ease-in-out;
	}

	.dolls > div > li > h3 {
		margin-top: 90%;
		float: left;
		font: bold 1.2rem/2 'Montserrat';
	}

	.dolls > div > li > p {
		margin-left: 12%;
		font: bold 1.1rem/1.2 'Montserrat';
	}

	.btn > img {
		margin-top: 5vh;
		transform: scale(0.8);
	}

	#btn01_ri {
		transform: rotate(180deg) scale(0.8);
	}

	#btn02_ri {
		transform: rotate(180deg) scale(0.8);
	}

	.btn_01 > img:hover {
		transition: all 0.3s ease-in-out;
		transform: scale(0.85);
		box-shadow: 0 0 10px rgba(75, 75, 75, 0.7);
	}

	#btn01_ri:hover {
		transform: rotate(180deg) scale(0.85);
	}

	#btn02_ri:hover {
		transform: rotate(180deg) scale(0.85);
	}


	.btn_02 > img:hover {
		transition: all 0.3s ease-in-out;
		transform: scale(0.85);
		box-shadow: 0 0 10px rgba(13, 32, 33, 0.7);
	}

	.acc {
		width: 100%;
		overflow: hidden;
		padding-bottom: 70px;
		background: #F7F1ED;
	}

	.acc_product {
		overflow: hidden;
	}

	.acc_product > h2 {
		margin-left: 50px;
		font: 900;
		margin-bottom: 40px;
		text-align: left;
		transition: all 0.3s ease-in-out;

	}

	.acc_product > ul {
		grid-gap: 30px;
		grid-template-columns: auto auto auto;
		transition: all 0.4s ease-in-out;
		overflow: hidden;
	}


	.acc_product > ul > li > h3 {
		margin-top: 90%;
		float: left;
	}


	.acc_product > ul > li > p {
		margin-left: 12%;
	}


}


/*PC용*/

@media all and (min-width:1200px) {

	#section {
		width: 100%;
	}

	.choice {
		width: 1200px;
	}

	.choice_pro {
		margin: 0 auto;
	}

	.doll_product {
		width: 1200px;
		margin: auto;
		overflow: hidden;
	}

	.doll_product > ul > div {
		height: 60%;
		grid-template-columns: auto auto auto auto;
		transition: all 0.4s ease-in-out;
	}

	.dolls > div > li > h3 {
		margin-top: 60%;
		float: left;
		font: bold 1.2rem/2 'Montserrat';
	}

	.dolls > div > li > p {
		margin-bottom: 15%;
		font: bold 1.1rem/1.2 'Montserrat';
	}

	.btn {
		margin-top: 10vh;
		width: 1200px;
	}

	.acc {
		width: 100%;
		margin: auto;
	}

	.acc_product {
		width: 1200px;
		margin: auto;


	}


	.acc_product > ul {
		grid-template-columns: auto auto auto auto;
		transition: all 0.4s ease-in-out;
	}

	.acc_product > ul > li > h3 {
		margin-top: 60%;
		float: left;
		font: bold 1.2rem/2 'Montserrat';
	}


	.acc_product > ul > li > p {
		margin-bottom: 15%;
		font: bold 1.1rem/1.2 'Montserrat';
	}




}