.model {
  display: none;
  position: fixed;
  z-index: 999;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.model.share-show {
  animation: scale-in 0.25s ease 0s 1 normal forwards;
}

.model.share-hide {
  animation: scale-out 0.25s ease 0s 1 normal forwards;
}

.model .model-content {
  padding: 20px;
}

.model .model-nav {
  padding: 8px 20px;
  font-size: 16px;
  line-height: 24px;
  color: rgb(148 163 184);
  background-color: rgb(241 245 249);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.model .model-nav i.close {
  display: block;
  cursor: pointer;
  background-color: rgb(148 163 184);
  width: 16px;
  height: 16px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M8 8L40 40'/%3E%3Cpath d='M8 40L40 8'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M8 8L40 40'/%3E%3Cpath d='M8 40L40 8'/%3E%3C/g%3E%3C/svg%3E");
  mask-size: 100%;
  -webkit-mask-size: 100%;
  transition: 0.1s;
}

.model .model-nav i.close:hover {
  background-color: rgb(71 85 105);
}

.shareBox {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-left: 20px;
  margin-bottom: 30px;
  gap: 8px;
}

i.icon {
  width: 30px;
  height: 30px;
  background-color: #eee;
  border-radius: 999px;
  cursor: pointer;
}

i.icon.facebook {
  background-color: #0d5185;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z'/%3E%3C/svg%3E");
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center;
}

i.icon.twitter {
  background-color: #000;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23fff" d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z"%2F%3E%3C%2Fsvg%3E');
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
}

i.icon.weibo {
  background-color: #d52c2b;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="512" height="512" viewBox="0 0 512 512"%3E%3Cpath fill="%23fff" d="M407 177.6c7.6-24-13.4-46.8-37.4-41.7c-22 4.8-28.8-28.1-7.1-32.8c50.1-10.9 92.3 37.1 76.5 84.8c-6.8 21.2-38.8 10.8-32-10.3M214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6c79.5-33.6 140.5-16.8 114 51.4c-3.7 9.4 1.1 10.9 8.3 13.1c135.7 42.3 34.8 215.2-169.7 215.2m143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7c-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116M347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3c72.3-15.2 134.8 52.8 111.7 124c-7.4 24.2 29.1 37 37.4 12c31.9-99.8-55.1-195.9-157.4-174.3m-78.5 311c-17.1 38.8-66.8 60-109.1 46.3c-40.8-13.1-58-53.4-40.3-89.7c17.7-35.4 63.1-55.4 103.4-45.1c42 10.8 63.1 50.2 46 88.5m-86.3-30c-12.9-5.4-30 .3-38 12.9c-8.3 12.9-4.3 28 8.6 34c13.1 6 30.8.3 39.1-12.9c8-13.1 3.7-28.3-9.7-34m32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4c-2.9 5.1-1.4 10.6 3.7 12.9c5.1 2 11.7-.3 14.6-5.4c2.8-5.2 1.1-10.9-4-12.9"%2F%3E%3C%2Fsvg%3E');
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center;
}

i.icon.wechat {
  background-color: #09bc64;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 width="24" height="24" viewBox="0 0 24 24"%3E%3Cg fill="%23fff" fill-rule="evenodd" clip-rule="evenodd"%3E%3Cpath d="M8.452 3.5C4.149 3.5.5 6.425.5 10.214c0 1.94.97 3.668 2.484 4.878v1.682a.5.5 0 0 0 .634.482l2.363-.657a9.307 9.307 0 0 0 2.63.329a.202.202 0 0 0 .192-.24a6.457 6.457 0 0 1-.097-1.122c0-3.898 3.405-6.637 7.197-7.01a.198.198 0 0 0 .172-.26C15.088 5.48 12 3.5 8.452 3.5M6.855 7.46a1.065 1.065 0 1 1-2.13 0a1.065 1.065 0 0 1 2.13 0m4.258 1.064a1.065 1.065 0 1 0 0-2.129a1.065 1.065 0 0 0 0 2.13"%2F%3E%3Cpath d="M16.79 9.887c3.617 0 6.71 2.461 6.71 5.679c0 1.632-.81 3.084-2.07 4.104v1.362a.5.5 0 0 1-.634.482l-1.947-.541a7.845 7.845 0 0 1-2.059.271c-3.616 0-6.71-2.46-6.71-5.678s3.094-5.679 6.71-5.679m-2.244 4.758a.932.932 0 1 0 0-1.863a.932.932 0 0 0 0 1.863m5.456-.931a.931.931 0 1 1-1.863 0a.931.931 0 0 1 1.863 0"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes scale-in {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scale-out {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}