.zh-name-calligraphy path.pen {
  fill: none;
  stroke: rgb(199, 182, 160);
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 0;
}
.zh-name-calligraphy .p-he-1 {
  -webkit-clip-path: url("#he-1");
          clip-path: url("#he-1");
  stroke-dasharray: 60;
  -webkit-animation: draw-he-1 5s ease-in;
          animation: draw-he-1 5s ease-in;
}
@-webkit-keyframes draw-he-1 {
  0%, 0% {
    stroke-dashoffset: 60;
  }
  7% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-he-1 {
  0%, 0% {
    stroke-dashoffset: 60;
  }
  7% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-he-2 {
  -webkit-clip-path: url("#he-2");
          clip-path: url("#he-2");
  stroke-dasharray: 47;
  -webkit-animation: draw-he-2 5s ease;
          animation: draw-he-2 5s ease;
}
@-webkit-keyframes draw-he-2 {
  0%, 7% {
    stroke-dashoffset: 47;
  }
  14% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-he-2 {
  0%, 7% {
    stroke-dashoffset: 47;
  }
  14% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-he-3 {
  -webkit-clip-path: url("#he-3");
          clip-path: url("#he-3");
  stroke-dasharray: 83;
  -webkit-animation: draw-he-3 5s ease;
          animation: draw-he-3 5s ease;
}
@-webkit-keyframes draw-he-3 {
  0%, 14% {
    stroke-dashoffset: 83;
  }
  21% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-he-3 {
  0%, 14% {
    stroke-dashoffset: 83;
  }
  21% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-he-4-1 {
  -webkit-clip-path: url("#he-4-1");
          clip-path: url("#he-4-1");
  stroke-dasharray: 45;
  -webkit-animation: draw-he-4-1 5s linear;
          animation: draw-he-4-1 5s linear;
}
@-webkit-keyframes draw-he-4-1 {
  0%, 21% {
    stroke-dashoffset: 45;
  }
  24.5% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-he-4-1 {
  0%, 21% {
    stroke-dashoffset: 45;
  }
  24.5% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-he-4-2 {
  -webkit-clip-path: url("#he-4-2");
          clip-path: url("#he-4-2");
  stroke-dasharray: 113;
  -webkit-animation: draw-he-4-2 5s linear;
          animation: draw-he-4-2 5s linear;
}
@-webkit-keyframes draw-he-4-2 {
  0%, 24.5% {
    stroke-dashoffset: 113;
  }
  35% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-he-4-2 {
  0%, 24.5% {
    stroke-dashoffset: 113;
  }
  35% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-yi-1 {
  -webkit-clip-path: url("#yi-1");
          clip-path: url("#yi-1");
  stroke-dasharray: 109;
  -webkit-animation: draw-yi-1 5s ease;
          animation: draw-yi-1 5s ease;
}
@-webkit-keyframes draw-yi-1 {
  0%, 40% {
    stroke-dashoffset: 109;
  }
  60% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-yi-1 {
  0%, 40% {
    stroke-dashoffset: 109;
  }
  60% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-fei-1 {
  -webkit-clip-path: url("#fei-1");
          clip-path: url("#fei-1");
  stroke-dasharray: 73;
  -webkit-animation: draw-fei-1 5s ease;
          animation: draw-fei-1 5s ease;
}
@-webkit-keyframes draw-fei-1 {
  0%, 60% {
    stroke-dashoffset: 73;
  }
  68% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fei-1 {
  0%, 60% {
    stroke-dashoffset: 73;
  }
  68% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-fei-2 {
  -webkit-clip-path: url("#fei-2");
          clip-path: url("#fei-2");
  stroke-dasharray: 25;
  -webkit-animation: draw-fei-2 5s ease;
          animation: draw-fei-2 5s ease;
}
@-webkit-keyframes draw-fei-2 {
  0%, 66.8% {
    stroke-dashoffset: 25;
  }
  70% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fei-2 {
  0%, 66.8% {
    stroke-dashoffset: 25;
  }
  70% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-fei-3 {
  -webkit-clip-path: url("#fei-3");
          clip-path: url("#fei-3");
  stroke-dasharray: 127;
  -webkit-animation: draw-fei-3 5s ease-in;
          animation: draw-fei-3 5s ease-in;
}
@-webkit-keyframes draw-fei-3 {
  0%, 70% {
    stroke-dashoffset: 127;
  }
  76% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fei-3 {
  0%, 70% {
    stroke-dashoffset: 127;
  }
  76% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-fei-4 {
  -webkit-clip-path: url("#fei-4");
          clip-path: url("#fei-4");
  stroke-dasharray: 106;
  -webkit-animation: draw-fei-4 5s ease;
          animation: draw-fei-4 5s ease;
}
@-webkit-keyframes draw-fei-4 {
  0%, 80% {
    stroke-dashoffset: 106;
  }
  90% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fei-4 {
  0%, 80% {
    stroke-dashoffset: 106;
  }
  90% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-fei-5 {
  -webkit-clip-path: url("#fei-5");
          clip-path: url("#fei-5");
  stroke-dasharray: 28;
  -webkit-animation: draw-fei-5 5s ease;
          animation: draw-fei-5 5s ease;
}
@-webkit-keyframes draw-fei-5 {
  0%, 90% {
    stroke-dashoffset: 28;
  }
  93% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fei-5 {
  0%, 90% {
    stroke-dashoffset: 28;
  }
  93% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-fei-6 {
  -webkit-clip-path: url("#fei-6");
          clip-path: url("#fei-6");
  stroke-dasharray: 37;
  -webkit-animation: draw-fei-6 5s ease;
          animation: draw-fei-6 5s ease;
}
@-webkit-keyframes draw-fei-6 {
  0%, 93% {
    stroke-dashoffset: 37;
  }
  96% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fei-6 {
  0%, 93% {
    stroke-dashoffset: 37;
  }
  96% {
    stroke-dashoffset: 0;
  }
}
.zh-name-calligraphy .p-fei-7 {
  -webkit-clip-path: url("#fei-7");
          clip-path: url("#fei-7");
  stroke-dasharray: 38;
  -webkit-animation: draw-fei-7 5s ease;
          animation: draw-fei-7 5s ease;
}
@-webkit-keyframes draw-fei-7 {
  0%, 96% {
    stroke-dashoffset: 38;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-fei-7 {
  0%, 96% {
    stroke-dashoffset: 38;
  }
  100% {
    stroke-dashoffset: 0;
  }
}