:root {
  --pink-color: #c30971;
  --particle-count: 14;
  --angle-jitter: 0.08turn;
  --radius-jitter: 15px;
  --radius: 200px;
  --initial-radius: 150px;
}
.pubmed_title {
  font-size: 34px;
  font-weight: 500;
  padding: 40px 17px;
  margin-bottom: 10px;
  text-align: center;
  background: #e3eff8;
    span {
      display: inline-block;
    }
}
@media screen and (max-width: 767px) {
  .pubmed_title {
    font-size: 24px;
    padding: 20px 17px;
  }
}
.pubmed_memberonly {
  margin-top: 10px;
  padding: 0 17px;
  font-size: 14px;
  color: var(--pink-color);
  text-align: center;
}
.pubmed_header {
  margin: 40px auto 45px;
  padding: 0 17px;
  max-width: 884px;
  font-size: 18px;
  color: #666;
  line-height: 1.7;
  letter-spacing: 0.015em;
    aside {
      display: flex;
      justify-content: right;
      margin-top: 3px;
      font-size: 12px;
      p {
        display: flex;
      }
      b {
        flex: 1;
        font-weight: 400;
      }
      .pubmed_asterisk {
        width: 2.5em;
      }
    }
}
@media screen and (max-width: 767px) {
  .pubmed_header {
    margin-top: 20px;
  }
}
.pubmed_utility {
  max-width: 1100px;
  padding: 0 17px;
  margin: 46px auto 0;
}
.pubmed_utility-header {
  max-width: 964px;
  margin: 0 auto 27px;
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  align-items: center;
}
.pubmed_button-register {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 180px;
  height: 34px;
  display: flex;
  gap: 7px;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--pink-color);
  border-radius: 17px;
  outline: none;
  font-size: 13px;
  color: #fff;
  background: var(--pink-color);
  cursor: pointer;
  transition: color 0.5s ease;
    &:hover,
    &:focus {
      color: var(--pink-color);
        &::before,
        &::before {
          transform: scaleX(1);
          transform-origin: left;
        }
        svg {
          fill: var(--pink-color);
        }
        path {
          fill: var(--pink-color);
        }
    }
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      transform: scaleX(0);
      transform-origin: right;
      transition: all 0.5s ease;
      transition-property: transform;
    }
    svg {
      fill: #fff;
    }
    path {
      transition: all 0.5s ease;
    }
}
.pubmed_utility-footer {
    h2 {
      position: relative;
      font-size: 15px;
      font-weight: 500;
      color: #001F4E;
        &::after {
          content: '';
          position: absolute;
          top: calc(50% - 1px);
          left: 0;
          z-index: -1;
          display: inline-block;
          width: 100%;
          height: 1px;
          background-image: linear-gradient(to right, #D9D9D9, #D9D9D9 2px, transparent 2px, transparent 4px);
          background-size: 6px 1px;
          background-position: left bottom;
        }
        span {
          z-index: 1;
          padding-right: 25px;
          background: #fff;
            &::before {
              margin-right: 0.25em;
              content: "\25CF";
            }
        }
        &.pubmed-pediatrics {
            span::before {
              color: #FF7F6A;
            }
        }
        &.pubmed-hematology {
            span::before {
              color: #3F004E;
            }
        }
        &.pubmed-ophthalmology {
            span::before {
              color: #004E1F;
            }
        }
    }
}
.pubmed_tags {
  margin-top: 10px;
    ul {
      padding: 0;
      margin: 0;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      list-style: none;
    }
}
.pubmed_button-tag {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 5.5px 19px;
  display: flex;
  gap: 1px;
  justify-content: center;
  align-items: center;
  border: 2px solid #F7F7F7;
  border-radius: 17px;
  outline: none;
  font-size: 15px;
  color: #001F4E;
  background: #fff;
  cursor: pointer;
  transition: 0.2s ease;
    &:hover {
      background-color: #EBEDEF;
    }
    &[data-active="true"] {
      background-color: #A4E200;
    }
}
.pubmed_list {
  max-width: 930px;
  padding: 50px 61px;
  margin: 46px auto 0;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.015em;
  color: #666;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    li {
      padding: 20px 0;
        & + li {
          padding-top: 21px;
          background-image: linear-gradient(to right, #D9D9D9, #D9D9D9 2px, transparent 2px, transparent 4px);
          background-size: 6px 1px;
          background-position: left top;
          background-repeat: repeat-x;
        }
    }
    article {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap:wrap;
      gap: 17px;
    }
    .pubmed_publish {
      width: 100px;
    }
    .pubmed_favBtn {
      margin-top: 0;
    }
    h1 {
      margin: 0;
      flex: 1;
      font-size: 18px;
      font-weight: 400;
    }
    a {
      color: #666;
    }
}
@media screen and (max-width: 767px) {
  .pubmed_list {
    padding: 20px 23px;
    margin: 46px 17px 0;
      article {
        gap: 10px;
      }
      h1 {
        flex: auto;
        width: 100%;
      }
  }
}
.pubmed_favBtn {
  width: 36px;
  height: 34px;
    button {
      -webkit-appearance: none;
        -moz-appearance: none;
              appearance: none;
      padding: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #F05270;
      border-radius: 50%;
      background-color: #fff;
      outline: none;
      cursor: pointer;
        &[data-active="true"] {
          border: 2px solid #f05270;
          transition: .2s;
            &:hover {
              border-color: rgba(240, 82, 112, 0.7);
                svg {
                  fill: rgba(240, 82, 112, 0.7);
                }
            }
            &[data-clicked="true"] {
                svg {
                  animation: heartAnime 800ms;
                  animation-fill-mode: forwards;
                }
            }
            svg {
              fill: #F05270;
              transition: .2s;
            }
        }
        &[data-active="false"] {
          border: 2px solid #D9D9D9;
          transition: .2s;
            &:hover {
              border-color: rgba(240, 82, 112, 0.3);
                svg {
                  fill: rgba(240, 82, 112, 0.3);
                }
            }
            svg {
              fill: #D9D9D9;
              transition: .2s;
            }
        }
    }
}
@keyframes heartAnime {
  0% {
    transform: scale(0);
  }
  39% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.2, 1.2);
  }
  70% {
    transform: scale(1, 1) translate(0%, -10%);
  }
  75% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  80% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
.pubmed_pager {
  margin: 40px auto 100px;
  padding: 0 17px;
  max-width: 697px;
  font-size: 18px;
    ul {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 13px;
      list-style: none;
    }
    button {
      -webkit-appearance: none;
        -moz-appearance: none;
              appearance: none;
      padding: 0;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      border-radius: 10px;
      outline: none;
      cursor: pointer;
        &[data-active="true"] {
          color: #fff;
          background: #001F4E;
          cursor: default;
          pointer-events: none;
        }
        &[data-active="false"] {
          color: #fff;
          background: #C0C7D3;
            &:hover {
              color: #001F4E;
              border: 2px solid #001F4E;
            }
        }
    }
    li:first-child,
    li:last-child {
        button {
          color: #001F4E;
          background: #fff;
          border: 1px solid #001F4E;
            &[data-action="true"] {
                &:hover {
                  border-width: 2px;
                  font-weight: 700;
                }
            }
            &[data-action="false"] {
              opacity: 0.1;
              cursor: default;
              pointer-events: none;
            }
        }
    }
}
.pubmed_pager-blank {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 767px) {
  .pubmed_pager {
      li {
          &[data-viewSP="false"] {
            display: none;
          }
      }
  }
  .pubmed_pager-blank {
    display: none;
  }
}
.pubmed_detail_wrap {
  max-width: 1100px;
  padding: 0 6px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_wrap {
    padding: 0;
    display: block;
  }
}
.pubmed_detail_mainW {
  max-width: 800px;
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_mainW {
    max-width: none;
  }
}
.pubmed_detail_publish {
  margin-bottom: 20px;
  text-align: right;
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_publish {
    margin: 0 17px 20px;
  }
}
.pubmed_detail_header {
  padding: 23px 16px 126px calc(50vw - 50%);
  margin-left: calc(50% - 50vw);
  background: #E3EFF8;
    .pubmed_tags {
      margin-top: 0;
    }
    h1 {
      margin-top: 24px;
      font-size: 28px;
      font-weight: 700;
      line-height: 1.21428571429;
      overflow-wrap: anywhere;
      word-break: normal;
      line-break: strict;
    }
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_header {
    padding-right: 17px;
      .pubmed_tags {
        margin-left: 17px;
      }
      h1 {
        margin-left: 17px;
      }
  }
}
.pubmed_detail_doi {
  margin-top: 20px;
    a {
      color: #333;
      text-decoration: underline;
    }
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_doi {
    margin: 24px 17px 0;
  }
}
.pubmed_detail_utility {
  margin-top: 12px;
  gap: 16px;
    ul {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      list-style: none;
    }
    .pubmed_favBtn {
      width: 125px;
      height: 34px;
        button {
          -webkit-appearance: none;
            -moz-appearance: none;
                  appearance: none;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 6px;
          border-radius: 17px;
          border: 2px solid #a4e200;
          background-color: #fff;
          color: #001f4e;
          outline: none;
          cursor: pointer;
            &[data-active="true"] {
              background: #a4e200;
              transition: .2s;
                &:hover {
                  border-color: #a4e200;
                    svg {
                      fill: #001f4e;
                    }
                }
                &[data-clicked="true"] {
                    svg {
                      animation: heartAnime 800ms;
                      animation-fill-mode: forwards;
                    }
                }
                svg {
                  fill: #F05270;
                  transition: .2s;
                }
            }
            &[data-active="false"] {
              transition: .2s;
                &:hover {
                  background: #a4e200;
                  border-color: #a4e200;
                    svg {
                      fill: #001f4e;
                    }
                }
                svg {
                  fill: #001f4e;
                }
            }
        }
    }
    .pubmed_registerBtn {
      width: 180px;
      height: 34px;
    }
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_utility {
    margin: 30px 0 0 17px;
    ul {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .pubmed_originalArticleBtn + .pubmed_detail_utility {
    margin-left: 0;
  }
}
.pubmed_lineBtn {
  width: 120px;
  height: 34px;
    a {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      gap: 10px;
      border: 2px solid #06C755;
      background-color: #06C755;
      border-radius: 17px;
      color: #fff;
      font-size: 13px;
      transition: .5s;
        &:hover {
          color: #fff !important;
          opacity: .7;
            &::before {
              transform: scale(1);
              opacity: 1;
            }
        }
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          border: 3px solid #06C755;
          border-radius: 17px;
          box-sizing: border-box;
          transform: scale(1.4);
          opacity: 0;
          transition: transform ease .5s, opacity .5s;
        }
    }
}
.pubmed_detail_section {
  position: relative;
  padding: 60px 37px 100px;
  margin: -100px 16px 100px 0;
  background: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
    h2 {
      font-size: 27px;
      font-weight: 700;
      line-height: 1.21428571429;
      letter-spacing: -0.015em;
      color: #001F4E;
        & + p {
          margin-top: 56px;
          font-size: 18px;
          line-height: 1.7;
          letter-spacing: 0.015em;
          overflow-wrap: anywhere;
          word-break: normal;
          line-break: strict;
            i {
              font-style: italic;
            }
            b {
              font-weight: 700;
            }
            sup {
              vertical-align: super;
            }
            sub {
              vertical-align: sub;
            }
        }
    }
    .pubmed_detail_utility {
      margin-top: 0;
    }
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_section {
    padding: 60px 27px 100px;
    margin: -100px 7px 100px;
  }
}
.pubmed_originalArticleBtn {
  margin: 50px auto;
  max-width: 498px;
    div {
      margin-bottom: 17px;
    }
    a {
      height: 76px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 35px;
      font-size: 20px;
      color: #fff;
      border: 5px solid #C30971;
      border-radius: 5px;
      background: #C30971;
      transition: .3s;
        &:hover {
          color: #C30971 !important;
          background: #fff;
            svg {
              fill: #C30971;
            }
        }
    }
    svg {
      fill: #fff;
      transition: .3s;
    }
    p {
      text-align: center;
    }
}
.pubmed_detail_backBtn {
  margin: -20px auto 100px;
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_backBtn {
    margin: -40px 7px 40px;
  }
}
.pubmed_detail_asideW {
  margin: 41px auto 100px 50px;
  max-width: 300px;
    h2 {
      position: relative;
      font-size: 14px;
      font-weight: 500;
      color: #001F4E;
        &::after {
          content: '';
          position: absolute;
          top: calc(50% - 1px);
          left: 0;
          z-index: -1;
          display: inline-block;
          width: 100%;
          height: 1px;
          background-image: linear-gradient(to right, #D9D9D9, #D9D9D9 2px, transparent 2px, transparent 4px);
          background-size: 6px 1px;
          background-position: left bottom;
        }
        span {
          z-index: 1;
          padding-right: 25px;
          background: #fff;
            &::before {
              margin-right: 0.25em;
              content: "\25CF";
            }
        }
        &.pubmed-pediatrics {
            span::before {
              color: #FF7F6A;
            }
        }
        &.pubmed-hematology {
            span::before {
              color: #3F004E;
            }
        }
        &.pubmed-ophthalmology {
            span::before {
              color: #004E1F;
            }
        }
    }
    .pubmed_tags {
      margin-top: 17px;
    }
}
@media screen and (max-width: 1100px) {
  .pubmed_detail_asideW {
    margin: 41px 17px 41px;
    max-width: none;
  }
}