@use '@/assets/utils.scss';

.article-popup {
  --el-dialog-box-shadow: none;
  width: utils.vw-calc(1475);
  height: utils.vw-calc(565);
  background: url('@/assets/images/wsyd/sidebar-bg-min.png') no-repeat center / contain;

  &::after {
    content: '';
    position: absolute;
    right: utils.vw-calc(51);
    bottom: utils.vw-calc(57);
    width: utils.vw-calc(147);
    height: utils.vw-calc(267);
    background: url('@/assets/images/wsyd/sidebar-img.png') no-repeat center / contain;
  }
  &__close {
    position: absolute;
    top: utils.vw-calc(169);
    right: utils.vw-calc(-35);
    width: utils.vw-calc(72);
    height: utils.vw-calc(72);
    cursor: pointer;
    z-index: 1;
  }
  &-tabs {
    position: absolute;
    top: utils.vw-calc(125);
    left: utils.vw-calc(220);
    display: flex;
    flex-wrap: nowrap;
    font-size: utils.vw-calc(24);
    line-height: utils.vw-calc(24);

    li {
      position: relative;
      margin: 0 utils.vw-calc(45);
      font-family: 'Source Han Sans CN-Bold';
      color: #d8171e;
      white-space: nowrap;
      text-shadow: 4px 0px 4px rgba(104, 58, 13, 0.08);
      cursor: pointer;

      &:hover,
      &.active {
        color: #ffd800;
      }
      &:first-child {
        margin-left: 0;

        &::before {
          display: none;
        }
      }
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: utils.vw-calc(-55);
        width: utils.vw-calc(1);
        height: utils.vw-calc(20);
        background: #d8171e;
        transform: translateY(-50%);
      }
    }
  }

  h3 {
    position: absolute;
    top: utils.vw-calc(210);
    left: 50%;
    color: #b21e26;
    letter-spacing: 2px;
    font-size: utils.vw-calc(48);
    font-family: 'Source Han Sans CN-Bold';
    transform: translateX(-50%);
  }

  &-content.el-scrollbar {
    position: absolute;
    top: utils.vw-calc(292);
    left: utils.vw-calc(284);
    padding-right: 20px;
    width: utils.vw-calc(936);
    height: utils.vw-calc(188);
    color: #b21e26;
    text-align: justify;

    p {
      margin-bottom: utils.vw-calc(20);
      text-indent: 2em;
      font-size: utils.vw-calc(18);
      line-height: utils.vw-calc(35);
    }
  }
}
