.holderCircle {
	width: 560px;
	height: 560px;
	border-radius: 100%;
	margin: 80px auto;
	position: relative;
}
/* .holderCircle::after{
		content:'';
		width:460px;
		height:460px;
		border-radius:100%;
		border:1px solid #666;
		position:absolute;
		top:50px;
		left:50px;
	} 
*/
.dotCircle {
	width: 100%;
	height: 100%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 100%;
	z-index: 20;

}
.dotCircle .itemDot {
	display: block;
	width: 180px;
	height: 180px;
	position: absolute;

	color: #fff;
	border-radius: 100%;
	text-align: center;
	line-height: 180px;
	font-size: 30px;
	z-index: 3;
	cursor: pointer;
	background-repeat:no-repeat;
	background-position:center;
	background-size:90% auto;	
}




.dotCircle .itemDot.active {
	/*background: #c12d82;*/
	color: #fff;
	transition: 0.5s;
}
.dotCircle .itemDot.active::before {
	border-color: #c12d82;
}
.dotCircle .itemDot .forActive {
	width: 56px;
	height: 56px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.dotCircle .itemDot .forActive::before {
	content: '';
	width: 6px;
	height: 6px;
	filter: blur(5px);
	top: -15px;
	position: absolute;
	transform: rotate(-45deg);
	border: 6px solid #F48E2A;
	right: -39px;
}
.dotCircle .itemDot.active .forActive {
	display: block;
}
.dotCircle .itemDot:hover {
	color: #fff;
	transition: 0.5s;
}
.dotCircle .itemDot:hover::before {
	border-color: #c12d82;
}

.dotCircle .itemDot1 {
	 background-image:url(../img/zy1.png);
}
.dotCircle .itemDot2 {
	 background-image:url(../img/zy2.png);
}
.dotCircle .itemDot3 {
	 background-image:url(../img/zy3.png);
}
.dotCircle .itemDot4 {
	 background-image:url(../img/zy4.png);
}
.dotCircle .itemDot5 {
	 background-image:url(../img/zy5.png);
}
.dotCircle .itemDot6 {
	 background-image:url(../img/zy6.png);
}







.contentCircle {
	width: 250px;
	height: 250px;
	border-radius: 100%;
	background:#c12d82;
	color: #fff;
	position: relative;
	top: 70px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	
	padding:100px;
	border:1px solid #999;
	border-radius:500px;
	
}
.contentCircle .CirItem {
	border-radius: 100%;
	color: #fff;
	position: absolute;
	text-align: center;
	bottom: 0;
	left: 0;
	opacity: 0;
	transform: scale(0);
	transition: 0.5s;
	font-weight: bold;
	font-size: 13px;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	margin: auto;
	background: #fff;
	line-height: 250px;
}
.CirItem.active {
	z-index: 1;
	opacity: 1;
	transform: scale(1);
	transition: 0.5s;
}



 @media only screen and (min-width: 300px) and (max-width: 599px) {
.holderCircle {
	width: 300px;
	height: 300px;
	margin: 110px auto;
}
.holderCircle::after {
	width: 100%;
	height: 100%;
}
.dotCircle {
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
}