.holderCircle{width:500px;height:500px;border-radius:100%;margin:60px auto;position:relative}.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:80px;height:80px;position:absolute;background:none;color:linear-gradient(to right,#8a2887 0%,#d21c5d 100%);border-radius:20px;text-align:center;line-height:80px;font-size:30px;z-index:3;cursor:pointer;border:2px solid #e6e6e6}.dotCircle .itemDot .forActive{width:56px;height:56px;position:absolute;top:0;left:0;right:0;bottom:0;display:none}.dotCircle .itemDot .forActive::after{content:'';width:5px;height:5px;border:3px solid #7d4ac7;bottom:-31px;left:-14px;filter:blur(1px);position:absolute;border-radius:100%}.dotCircle .itemDot .forActive::before{content:'';width:6px;height:6px;filter:blur(5px);top:-15px;position:absolute;transform:rotate(-45deg);border:6px solid #a733bb;right:-39px}.dotCircle .itemDot.active .forActive{display:block}.round{position:absolute;left:40px;top:45px;width:410px;height:410px;border:2px dotted #a733bb;border-radius:100%;-webkit-animation:rotation 100s infinite linear}.dotCircle .itemDot:hover,.dotCircle .itemDot.active{color:#fff;transition:.5s;background:#7d4ac7;background:-moz-linear-gradient(left,#7d4ac7 0%,#a733bb 100%);background:-webkit-linear-gradient(left,#7d4ac7 0%,#a733bb 100%);background:linear-gradient(to right,#8a2887 0%,#d21c5d 100%) ;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d4ac7',endColorstr='#a733bb',GradientType=1);border:2px solid #fff;-webkit-box-shadow:0 30px 30px 0 rgba(0,0,0,.13);-moz-box-shadow:0 30px 30px 0 rgba(0,0,0,.13);box-shadow:0 30px 30px 0 rgba(0,0,0,.13)}.dotCircle .itemDot{font-size:50px}.contentCircle{width:250px;border-radius:100%;color:#222;position:relative;top:150px;left:50%;transform:translate(-50%,-50%)}.contentCircle .CirItem{border-radius:100%;color:#222;position:absolute;text-align:center;bottom:0;left:0;opacity:0;transform:scale(0);transition:.5s;font-size:15px;width:100%;height:100%;top:0;right:0;margin:auto;line-height:250px}.CirItem.active{z-index:1;opacity:1;transform:scale(1);transition:.5s}.contentCircle .CirItem i{font-size:180px;position:absolute;top:0;left:50%;margin-left:-90px;color:#000;opacity:.1}@media only screen and (min-width:300px) and (max-width:599px){.holderCircle{width:300px;height:300px;margin:0 auto}.holderCircle::after{width:100%;height:100%}.dotCircle{width:100%;height:100%;top:0;right:0;bottom:0;left:0;margin:auto}}@media only screen and (min-width:600px) and (max-width:767px){}@media only screen and (min-width:768px) and (max-width:991px){}@media only screen and (min-width:992px) and (max-width:1199px){}@media only screen and (min-width:1200px) and (max-width:1499px){}