.holderCircle{border-radius:100%;width:500px;height:500px;margin:60px auto;position:relative}.round{border:2px dotted #a733bb;border-radius:100%;width:410px;height:410px;animation:100s linear infinite rotation;position:absolute;top:45px;left:40px}.dotCircle{z-index:20;border-radius:100%;width:100%;height:100%;position:absolute}.contentCircle .CirItem,.dotCircle{margin:auto;top:0;bottom:0;left:0;right:0}.contentCircle{color:#222;border-radius:100%;width:250px;position:relative;top:175px;left:50%;transform:translate(-50%,-50%)}.contentCircle .CirItem{color:#fff;text-align:center;opacity:0;border-radius:100%;width:100%;height:100%;font-size:15px;line-height:250px;transition:all .5s;position:absolute;transform:scale(0)}.CirItem.active{opacity:1;transform:scale(1)}.title-box .title{letter-spacing:2px;font-size:28px;font-weight:700;line-height:32.5px;margin-bottom:10px!important}.title-box span{font-weight:800;color:#fff!important}.title-box p{color:#fff;font-size:16px;line-height:23px}.itemDot{cursor:pointer;position:absolute}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.dotCircle .itemDot{color:#7d4ac7;text-align:center;z-index:3;cursor:pointer;background:linear-gradient(90deg,#7d4ac7 0,#a733bb 100%);border:2px solid #e6e6e6;border-radius:20px;place-content:center;width:80px;height:80px;font-size:50px;line-height:80px;display:grid;position:absolute}.dotCircle .itemDot img{object-fit:scale-down;width:50px}.dotCircle .itemDot .forActive{width:56px;height:56px;display:none;position:absolute;top:0;bottom:0;left:0;right:0}.dotCircle .itemDot .forActive:before{content:"";filter:blur(5px);border:6px solid #a733bb;width:6px;height:6px;position:absolute;top:-15px;right:-39px;transform:rotate(-45deg)}.dotCircle .itemDot .forActive:after{content:"";filter:blur(1px);border:3px solid #7d4ac7;border-radius:100%;width:5px;height:5px;position:absolute;bottom:-31px;left:-14px}@media (max-width:767px){.contentCircle .CirItem{bottom:80px;top:unset}.title-box .title{text-align:center;padding:0 40px;font-size:14px;line-height:20.5px}.title-box p{text-align:center;padding:0 45px;font-size:11px;line-height:15.8px}}@media only screen and (min-width:300px) and (max-width:599px){.dotCircle{margin:auto;top:0;bottom:0;left:0;right:0}.dotCircle,.holderCircle:after{width:100%;height:100%}}@media (max-width:767px){.holderCircle{width:300px;height:300px;margin:30px auto!important}.dotCircle .itemDot{border-radius:12px;width:50px;height:50px}.dotCircle .itemDot img{width:30px}.round{width:200px;height:200px}}
