/*
	create by nasir farhadi
	email : nasirfarhadi92@gmail.com
	Github : nasirfarhadi92
*/

	.holderCircle{
		width:16rem;
		height:100px;
		border-radius:100%;
		margin:-4.8rem auto;
		position:relative;
	}
	
	/* .holderCircle::after{
		content:'';
		width:500px;
		height:500px;
		border-radius:100%;
		border:1px solid #000;
		position:absolute;
		top:0;
	} */

	.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:1.2rem;
		height:1.2rem;
		position:absolute;
		background:#ddd;
		color:#fff;
		border-radius:100%;
		text-align: center;
		line-height: 1.2rem;
		font-size:0.3rem;
		z-index:3;
		cursor:pointer;		
	}
	

	.contentCircle{
		position: absolute;
		bottom: 7rem;
		width: 100%;
		height: 100%;
		/*margin:4.8rem auto;*/
	}
	
	
	.contentCircle .CirItem{
		color: #333;
		position: absolute;
		text-align: center;
		bottom: 0;
		left: 0;
		opacity: 0;
		transform: scale(0);
		transition: 0.5s;
		font-weight: bold;
		font-size: 0.14rem;
		width: 100%;
		height: 100%;
		top: 15rem;
		right: 0;
		margin: auto;
	}
	
		.CirItem.active{
		z-index:1;
		opacity:1;
		transform:scale(1);
		transition:0.5s;
	}
	
	
	
	.dotCircle  .itemDot1{
		background:url(../image/31.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot1.active{
		background:url(../image/310.png);background-size:100%;
	}
	
	.dotCircle  .itemDot2{
		background:url(../image/30.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot2.active{	
		background:url(../image/300.png);background-size:100%;
	}

	.dotCircle  .itemDot3{
		background:url(../image/29.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot3.active{
		background:url(../image/290.png);background-size:100%;
	}
	
	.dotCircle  .itemDot4{
		background:url(../image/33.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot4.active{
	background:url(../image/330.png);background-size:100%;
	}
	
	.dotCircle  .itemDot5{
	background:url(../image/32.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot5.active{	
	background:url(../image/320.png);background-size:100%;
	}
	
	.dotCircle  .itemDot6{
		background:url(../image/28.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot6.active{	
		background:url(../image/280.png);background-size:100%;
	}
	
	.dotCircle  .itemDot7{
		background:url(../image/31.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot7.active{
		background:url(../image/310.png);	background-size:100%;
	}
	
	.dotCircle  .itemDot8{
	background:url(../image/30.png)no-repeat center;background-size:100%;
		
	}
	.dotCircle  .itemDot8.active{	
	background:url(../image/300.png);background-size:100%;
	}
	
	.dotCircle  .itemDot9{
		background:url(../image/29.png)no-repeat center;background-size:100%;
		
	}
	.dotCircle  .itemDot9.active{
background:url(../image/290.png);background-size:100%;
	}
	
	.dotCircle  .itemDot10{
		background:url(../image/33.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot10.active{	
background:url(../image/330.png);background-size:100%;
	}
	
	
		.dotCircle  .itemDot11{
		background:url(../image/32.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot11.active{	
background:url(../image/320.png);background-size:100%;
	}
	
		.dotCircle  .itemDot12{
		background:url(../image/28.png)no-repeat center;background-size:100%;
	}
	.dotCircle  .itemDot12.active{	
background:url(../image/280.png);background-size:100%;
	}
	
	
	
	
	.dotCircle .itemDot.active{
		color:#fff;
		transition:0.5s;
	}
	.dotCircle .itemDot.active::before{
		border-color:#34495e;
	}	

	
.CirItem .shil{position: relative;font-size: 0.18rem;color: #fff;line-height: 0.35rem;width: 100%;margin: 0 auto;overflow: hidden;text-align: center;}
.CirItem .shil .tu{width: 1.2rem;height:1.2rem;background: url(https://www.arsbiao.com/statics/css/images/index/ico1.png)no-repeat center;margin:0 auto;line-height: 1.2rem;font-size: 0.2rem;color: #333;font-weight: bold;}
.CirItem .shil .shuoming p{font-size: 0.34rem;font-weight: bold;color: #fff;margin-top: 1rem;}
.CirItem .shil .shuoming hr{width: 0.5rem;height: 2px;background: #fff;outline: none;border: none;margin: 0.5rem auto;}
.CirItem .shil .shuoming span{font-size: 0.24rem;font-weight: bold;color: #f08012;}