.child-evolution {
	position: relative;
	padding: 15px 34px 15px 45px;
	background: #eef5ff;
	border-radius: 8px;
}
.child-evolution__clue {
	display: none;
	position: absolute;
	top: 16px;
	left: 16px;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 10px;
	line-height: 10px;
	color: #798dc4;
	border-radius: 16px;
	padding: 4px 10px;
	background: #fff;
}
.child-evolution__clue svg {
	margin-right: 3px;
}
.child-evolution__content {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.child-evolution__carousel {
	position: relative;
	flex-shrink: 0;
	width: 265px;
	height: 265px;
}
.child-evolution__carousel-selected {
	position: absolute;
	z-index: 1;
	width: 265px;
	height: 265px;
	pointer-events: none;
}
.child-evolution__carousel-unselected {
	position: absolute;
	top: 51%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 243px;
	height: 243px;
}

.child-evolution__carousel-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.child-evolution__carousel-icon path {
	transition: all .5s;
}
.child-evolution[data-selected="vision"] .child-evolution__carousel-icon path {stroke: #27388A;}
.child-evolution[data-selected="hearing"] .child-evolution__carousel-icon path {stroke: #FF8E1E;}
.child-evolution[data-selected="emotions"] .child-evolution__carousel-icon path {stroke: #A418C6;}
.child-evolution[data-selected="crying"] .child-evolution__carousel-icon path {stroke: #5F8D05;}
.child-evolution[data-selected="smell"] .child-evolution__carousel-icon path {stroke: #C51F51;}

.child-evolution__carousel svg g[data-type="unselected"] {
	cursor: pointer;
}
.child-evolution__carousel-selected svg g path {
	opacity: 0;
	transition: all .1s;
}
.child-evolution__carousel-selected svg g.is-show path {
	opacity: 1;
}
.child-evolution__carousel-unselected svg g.is-hide path {
	opacity: 0;
	cursor: default;
}

.child-evolution__line {
	margin-top: 38px;
	margin-left: -20px;
}
.child-evolution[data-selected="vision"] .child-evolution__line path {stroke: #CCE2FF;}
.child-evolution[data-selected="hearing"] .child-evolution__line path {stroke: #FFD0A1;}
.child-evolution[data-selected="emotions"] .child-evolution__line path {stroke: #F0B2FF;}
.child-evolution[data-selected="crying"] .child-evolution__line path {stroke: #BFD791;}
.child-evolution[data-selected="smell"] .child-evolution__line path {stroke: #FF9DBB;}

.child-evolution__note {
	position: relative;
	width: 100%;
	max-width: 313px;

	margin-top: 65px;
	margin-left: -10px;
}
.child-evolution__note-box {
	position: absolute;
	border-radius: 16px;
	box-shadow: 0 6px 14px 0 rgba(163, 163, 163, 0.25);
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: #404040;

	opacity: 0;
	height: 0;
	overflow: hidden;

	transition: all .3s;
}
.child-evolution__note-box.is-show {
	opacity: 1;
	height: 100%;
	overflow: visible;
}
.child-evolution__note-box span {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
}

.child-evolution__note-item {
	padding: 16px;
	border-radius: 16px;
	box-shadow: 0 6px 14px 0 rgba(163, 163, 163, 0.25);
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: #404040;
}
.child-evolution[data-selected="vision"] .child-evolution__note-item {background: #cce2ff;}
.child-evolution[data-selected="hearing"] .child-evolution__note-item {background: #ffd0a1;}
.child-evolution[data-selected="emotions"] .child-evolution__note-item {background: #f0b2ff;}
.child-evolution[data-selected="crying"] .child-evolution__note-item {background: #d6eaaf;}
.child-evolution[data-selected="smell"] .child-evolution__note-item {background: #ffbdd1;}

.child-evolution[data-selected="vision"] .child-evolution__note-box span {color: #27388a;}
.child-evolution[data-selected="hearing"] .child-evolution__note-box span {color: #ff8e1e;}
.child-evolution[data-selected="emotions"] .child-evolution__note-box span {color: #a418c6;}
.child-evolution[data-selected="crying"] .child-evolution__note-box span {color: #5f8d05;}
.child-evolution[data-selected="smell"] .child-evolution__note-box span {color: #c51f51;}


@media screen and (max-width: 1079px) {
	.child-evolution__note {
		margin-top: 0px;
	}
}

@media screen and (max-width: 992px) {
	.child-evolution {
		padding: 15px 16px 15px 16px;
	}
}

@media screen and (max-width: 920px) {
	.child-evolution {
		padding: 28px 16px 42px 16px;
	}
	.child-evolution__content {
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.child-evolution__line {
		display: none;
	}
	.child-evolution__note {
		margin-top: 20px;
		margin-left: 0;
	}
	.child-evolution__note-box {
		position: static;
		transition: none;
	}
	.child-evolution__clue {
		display: flex;
	}
}

@media screen and (max-width: 420px) {
	.child-evolution__clue {
		top: 8px;
		left: 8px;
	}
}