.specialww-animation {
   padding: 50px 0 0 80px;
}

.circlearc {
   position: relative;
   width: 848px;
   height: 848px;
   border-radius: 50%;
   /*      border: 2px solid blue;*/

   transform: scale(.35);
   display: flex;
   align-items: center;
   justify-content: center;
   transform-origin: 0 0;
}

.circlearc:after {

   position: absolute;
   content: "";
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background: transparent;
   width: calc(100% + 90px);
   height: calc(100% + 90px);
   border: 30px solid #0c0c0c;
   border-radius: 50%;
   z-index: 12;
   pointer-events: none;
}

.centertext {
   width: 420px;
   height: 420px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #303030;
   border-radius: 50%;

   font-weight: 600;
   color: #fff;
   font-size: 20px;
   line-height: 36px;
   padding: 25px 35px;
   text-align: center;
   position: relative;
}

.centertext h3 {
   font-size: 40px;
   line-height: 48px;
}

.centertext h4 {
   font-size: 32px;
   line-height: 42px;
}

.centertext:before {
   position: absolute;
   content: "";
   left: -60px;
   top: -60px;
   width: calc(100% + 120px);
   height: calc(100% + 120px);
   background: url(../effectimage/black-line-ani.svg) no-repeat 0 0;
   background-size: 100%;
   animation: round2 10s linear infinite;
}

@keyframes round2 {
   0% {
      transform: rotate(0deg);
   }

   0% {
      transform: rotate(-360deg);
   }
}

.centertext:after {
   position: absolute;
   content: "";
   left: -50px;
   top: -50px;
   width: calc(100% + 100px);
   height: calc(100% + 100px);
   background: url(../effectimage/red-line-ani.svg) no-repeat 0 0;
   background-size: 100%;
   animation: round1 10s linear infinite;
}

@keyframes round1 {
   0% {
      transform: rotate(0deg);
   }

   0% {
      transform: rotate(360deg);
   }
}


.shapeHolder {
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
}

.shape {
   position: absolute;
   width: auto;
}

.shape img {
   transition: .5s;
   width: auto;
}

.shape img.trd {}

.shape img.trd {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
}

.shape:hover img.trd,
.shape.active img.trd {
   opacity: 1;
}

.shape:hover img.blc,
.shape.active img.blc {
   opacity: 0;
}


.shape2 {
   top: 0;
   right: 0;
}

.shape3 {
   left: 50%;
   bottom: -5px;
   transform: translate(-50%, -5px);
}



.itemholder {
   opacity: 0;
   transition: .5s;
   pointer-events: none;
}

.itemholder.show {
   opacity: 1;
   pointer-events: initial;
}

.item1 {
   width: 210px;
   height: 175px;
   background: linear-gradient(to bottom, #814143 30%, #A45556 70%, #814b4c 100%);
   ;
   position: absolute;
   left: 100%;
   top: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
   text-align: center;
   /*      border-radius: 50%;*/
   z-index: 12;

   /*      clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);*/
   clip-path: polygon(33% 4%, 16% 5%, 0 7%, 11% 100%, 27% 97%, 46% 96%, 64% 97%, 85% 100%, 100% 8%, 86% 6%, 70% 4%, 51% 3%);

}


.itemholder:nth-child(1) .item1:nth-child(5) {
   left: -225px;
   top: 427px;
   transform: translateX(0) rotate(-101deg);
}

.itemholder:nth-child(1) .item1:nth-child(5) h4 {
   transform: rotate(0deg);
}

.itemholder:nth-child(1) .item1:nth-child(4) {
   left: -228px;
   top: 238px;
   transform: translateX(0) rotate(-81deg);
}

.itemholder:nth-child(1) .item1:nth-child(4) h4 {
   transform: rotate(75deg);
}

.itemholder:nth-child(1) .item1:nth-child(3) {
   left: -163px;
   top: 56px;
   transform: translateX(0) rotate(-61deg);
}

.itemholder:nth-child(1) .item1:nth-child(3) h4 {
   transform: rotate(55deg)
}

.itemholder:nth-child(1) .item1:nth-child(2) {
   left: -38px;
   top: -94px;
   transform: translateX(0) rotate(-42deg);
}

.itemholder:nth-child(1) .item1:nth-child(2) h4 {
   transform: rotate(35deg);
}

.itemholder:nth-child(1) .item1:nth-child(1) {
   left: 125px;
   top: -194px;
   transform: translateX(0) rotate(-22deg);
}

.itemholder:nth-child(1) .item1:nth-child(1) h4 {
   transform: rotate(10deg)
}



.itemholder:nth-child(2) .item1:nth-child(1) {
   left: calc(100% - 540px);
   top: -197px;
   transform: translateX(0) rotate(-2deg);
}

.itemholder:nth-child(2) .item1:nth-child(1) h4 {
   transform: rotate(0deg);
}

.itemholder:nth-child(2) .item1:nth-child(2) {
   left: calc(100% - 350px);
   top: -168px;
   transform: translateX(0) rotate(17deg);
}

.itemholder:nth-child(2) .item1:nth-child(2) h4 {
   transform: rotate(-15deg);
}

.itemholder:nth-child(2) .item1:nth-child(3) {
   left: calc(100% - 182px);
   top: -77px;
   transform: translateX(0) rotate(38deg);
}

.itemholder:nth-child(2) .item1:nth-child(3) h4 {
   transform: rotate(-35deg);
}

.itemholder:nth-child(2) .item1:nth-child(4) {
   left: calc(100% - 61px);
   top: 66px;
   transform: translateX(0) rotate(58deg);
}

.itemholder:nth-child(2) .item1:nth-child(4) h4 {
   transform: rotate(-55deg);
}

.itemholder:nth-child(2) .item1:nth-child(5) {
   left: calc(100% + 7px);
   top: 242px;
   transform: translateX(0) rotate(79deg);
}

.itemholder:nth-child(2) .item1:nth-child(5) h4 {
   transform: rotate(-75deg);
}

.itemholder:nth-child(2) .item1:nth-child(6) {
   left: calc(100% + 6px);
   top: 429px;
   transform: translateX(0) rotate(98deg);
}

.itemholder:nth-child(2) .item1:nth-child(6) h4 {
   transform: rotate(-95deg);
}

.itemholder:nth-child(2) .item1:nth-child(7) {
   left: calc(100% - 56px);
   top: 607px;
   transform: translateX(0) rotate(118deg);
}

.itemholder:nth-child(2) .item1:nth-child(7) h4 {
   transform: rotate(-115deg);
}

.itemholder:nth-child(2) .item1:nth-child(8) {
   left: calc(100% - 176px);
   top: 752px;
   transform: translateX(0) rotate(139deg);
}

.itemholder:nth-child(2) .item1:nth-child(8) h4 {
   transform: rotate(-135deg);
}

.itemholder:nth-child(2) .item1:nth-child(9) {
   left: calc(100% - 340px);
   top: 845px;
   transform: translateX(0) rotate(162deg);
}

.itemholder:nth-child(2) .item1:nth-child(9) h4 {
   transform: rotate(-169deg);
   left: -5px;
   position: relative;
}



.itemholder:nth-child(3) .item1:nth-child(1) {
   left: calc(100% - 472px);
   top: 872px;
   transform: translateX(0) rotate(175deg);
}

.itemholder:nth-child(3) .item1:nth-child(1) h4 {
   transform: rotate(-145deg);
}

.itemholder:nth-child(3) .item1:nth-child(2) {
   left: calc(100% - 661px);
   top: 858px;
   transform: translateX(0) rotate(194deg);
}

.itemholder:nth-child(3) .item1:nth-child(2) h4 {
   transform: rotate(-155deg);
}

.itemholder:nth-child(3) .item1:nth-child(3) {
   left: calc(100% - 835px);
   top: 780px;
   transform: translateX(0) rotate(214deg);
}

.itemholder:nth-child(3) .item1:nth-child(3) h4 {
   transform: rotate(-175deg);
}

.itemholder:nth-child(3) .item1:nth-child(4) {
   left: calc(100% - 973px);
   top: 647px;
   transform: translateX(0) rotate(233deg);
}

.itemholder:nth-child(3) .item1:nth-child(4) h4 {
   transform: rotate(-195deg);
}



.item1:after {
   position: absolute;
   content: "";
   width: 200px;
   height: 200px;
   background: url(../effectimage/line-ani.svg) no-repeat 0 0;
   background-size: 100%;
   left: -15px;
   top: -15px;
   animation: round2 10s linear infinite;

   display: none;
}

.item1 h4 {
   color: #fff;
   margin: 0;
   font-weight: 400;
   font-size: 24px;
   line-height: 26px;
   letter-spacing: 1px;
}

.itemhovertext {
   text-align: left;
   font-size: 28px;
   line-height: 38px;
   color: #fff;
   background: #141414;
   border: 1px solid #864344;
   border-radius: 20px;
   position: absolute;
   padding: 20px;
   width: 600px;
   left: calc(100% + 40px);
   z-index: 1;
   transform-origin: 0 0;
   transition: .5s;
   display: none;
   z-index: 999;
}

.itemhovertext.show {
   display: inline-flex;
}

.itemhovertext:before {
   position: absolute;
   content: "";
   border-left: 7px solid transparent;
   border-right: 15px solid #864344;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   right: 100%;
   top: 40px;
}

.itemhovertext p {
   margin: 0;
}



.item1 {
   transform: translateX(-200px) rotate(0deg);
   opacity: 0;
   transition-duration: .5s;
}

.itemholder.show .item1 {
   transform: translateX(0) rotate(0deg);
   opacity: 1;
}

.itemholder.show .item1.active {
   filter: grayscale(100%);
}

/*.item1:nth-child(1){transition-delay: .3s;}
   .item1:nth-child(2){transition-delay: .6s;}
   .item1:nth-child(3){transition-delay: .9s;}
   .item1:nth-child(4){transition-delay: 1.2s;}
   .item1:nth-child(5){transition-delay: 1.5s;}
   .item1:nth-child(6){transition-delay: 1.8s;}
   .item1:nth-child(7){transition-delay: 2.1s;}
   .item1:nth-child(8){transition-delay: 2.4s;}
   .item1:nth-child(9){transition-delay: 2.7s;}*/

.itemhovertextholder1 .itemhovertext:nth-child(1) {
   top: -200px;
   left: 350px;
}

.itemhovertextholder1 .itemhovertext:nth-child(2) {
   top: 10px;
   left: 166px;
   transform: rotate(-1deg);
   transform-origin: center;
}

.itemhovertextholder1 .itemhovertext:nth-child(2):before {
   position: absolute;
   content: "";
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 15px solid #864344;
   border-bottom: 7px solid transparent;
   bottom: auto;
   left: -16px;
   right: auto;
   top: 20px;
   transform: rotate(90deg);
}

.itemhovertextholder1 .itemhovertext:nth-child(3) {
   top: 105px;
   left: 50px;
   transform: rotate(-2deg);
   transform-origin: center;
}

.itemhovertextholder1 .itemhovertext:nth-child(3):before {
   position: absolute;
   content: "";
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 15px solid #864344;
   border-bottom: 7px solid transparent;
   bottom: auto;
   left: -18px;
   right: auto;
   top: 45px;
   transform: rotate(90deg);
}

.itemhovertextholder1 .itemhovertext:nth-child(4) {
   top: 245px;
   left: -10px;
   transform: rotate(0deg);
   transform-origin: center;
}

.itemhovertextholder1 .itemhovertext:nth-child(4):before {
   position: absolute;
   content: "";
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 15px solid #864344;
   border-bottom: 7px solid transparent;
   bottom: auto;
   left: -18px;
   right: auto;
   top: 25px;
   transform: rotate(90deg);
}

.itemhovertextholder1 .itemhovertext:nth-child(5) {
   top: 390px;
   left: -12px;
   transform: rotate(-6deg);
   transform-origin: center;
}

.itemhovertextholder1 .itemhovertext:nth-child(5):before {
   position: absolute;
   content: "";
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 15px solid #864344;
   border-bottom: 7px solid transparent;
   bottom: auto;
   left: -20px;
   right: auto;
   top: 12px;
   transform: rotate(90deg);
}


.itemhovertextholder2 .itemhovertext:nth-child(1) {
   top: -138px;
   left: -220px;
}

.itemhovertextholder2 .itemhovertext:nth-child(2) {
   top: -202px;
   left: calc(100% - 110px);

}

.itemhovertextholder2 .itemhovertext:nth-child(3) {
   top: -130px;
   left: calc(100% + 50px);
}

.itemhovertextholder2 .itemhovertext:nth-child(4) {
   top: 10px;
   left: calc(100% + 150px);
}

.itemhovertextholder2 .itemhovertext:nth-child(5) {
   top: 30%;
   left: calc(100% + 250px);
}

.itemhovertextholder2 .itemhovertext:nth-child(6) {
   top: 55%;
   left: calc(100% + 250px);
}

.itemhovertextholder2 .itemhovertext:nth-child(7) {
   top: 84%;
   left: calc(100% + 173px);
}

.itemhovertextholder2 .itemhovertext:nth-child(8) {
   top: calc(100% + 38px);
   left: calc(100% + 70px);
}

.itemhovertextholder2 .itemhovertext:nth-child(9) {
   top: calc(100% + 172px);
   left: calc(100% - 125px);
}



.itemhovertextholder3 .itemhovertext:nth-child(1) {
   top: calc(100% + 45px);
   left: 600px;
}

.itemhovertextholder3 .itemhovertext:nth-child(2) {
   top: calc(100% + 250px);
   left: 200px;
}

.itemhovertextholder3 .itemhovertext:nth-child(3) {
   top: calc(100% + 150px);
   left: 0;
}

.itemhovertextholder3 .itemhovertext:nth-child(4) {
   top: calc(100% + 30px);
   left: -200px;
}

.itemhovertextholder3 .itemhovertext:nth-child(3):before,
.itemhovertextholder3 .itemhovertext:nth-child(2):before,
.itemhovertextholder3 .itemhovertext:nth-child(4):before {
   position: absolute;
   content: "";
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 7px solid transparent;
   border-bottom: 15px solid #864344;
   bottom: 100%;
   left: 30px;
   right: auto;
   top: auto;
}