.holderCircle{width:500px;height:500px;border-radius:100%;margin:40px 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:#fff;color:#070b3b;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 #070b3b;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 #070b3b;right:-39px}.dotCircle .itemDot.active .forActive{display:block}.round{position:absolute;left:40px;top:45px;width:410px;height:410px;border:2px dotted #070b3b;border-radius:100%;-webkit-animation:rotation 100s infinite linear}
.dotCircle .itemDot:hover,.dotCircle .itemDot.active{color:#fff;transition:.5s;background:#0071dc;background:-moz-linear-gradient(left,#0071dc 0%,#070b3b 100%);background:-webkit-linear-gradient(left,#0071dc 0%,#070b3b 100%);background:linear-gradient(to right,#0071dc 0%,#070b3b 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d4ac7',endColorstr='#070b3b',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:40px}.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}.title{top:40px}.ptext{line-height:1;font-size:10px!important;width:100px}@media only screen and (min-width:300px) and (max-width:599px){.ptext{opacity:0}.holderCircle{width:300px;height:300px;margin:110px auto!important}.contentCircle .CirItem i{font-size:120px;position:absolute;top:0;left:50%;margin-left:-45px;color:#000;opacity:.1}.dotCircle .itemDot{font-size:25px}.dotCircle .itemDot{display:block;width:55px;height:55px;position:absolute;background:#fff;color:#7d4ac7;border-radius:20px;text-align:center;line-height:55px;z-index:3;cursor:pointer;border:2px solid #e6e6e6}.round{position:absolute;left:19px;top:20px;width:265px;height:265px;border:2px dotted #070b3b;border-radius:100%;-webkit-animation:rotation 100s infinite linear}.contentCircle{width:160px;border-radius:100%;color:#222;position:relative;top:85px;left:52%}.title-box .title{font-size:16px!important;margin:auto;top:30px}
.title-box p{font-size:15px!important;line-height:1.5em!important}.holderCircle:after{width:100%;height:100%}.dotCircle{width:100%;height:100%;top:0;right:0;bottom:0;left:0;margin:auto}}.title-box .title{font-weight:600;letter-spacing:2px;position:relative;z-index:-1}.title-box span{text-shadow:0 10px 10px rgba(0,0,0,.15);font-weight:800;color:#070b3b}.title-box p{font-size:17px;line-height:2em}