.according_style_one {
  details summary::-webkit-details-marker {
    display: none;
  }

  details[open] summary {
    // background: #dd5328;
    // color: white;
  }
  /*  summary::marker hidden */
  summary {
    list-style: none;
    outline: none;
    &::after {
      content: "";
      border-right: 4px solid;
      border-bottom: 4px solid;
      position: absolute;
      right: 0.75em;
      height: 0.75em;
      width: 0.75em;
      transform: rotate(45deg);
      transition: all 0.3s ease-in-out;
    }

    &:focus {
      outline: 2px solid;
      outline-offset: 1px;
    }
  }
  details[open] > summary::after {
    transform: rotate(225deg);
  }
  /*  summary::after {
    content: "\f105";
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
  } */
  /*  details[open] summary::after {
    content: "/f105";
  } */

  details[open] summary ~ * {
    animation: slideDown 0.3s ease-in-out;
  }

  details[open] summary p {
    opacity: 0;
    animation-name: showContent;
    animation-duration: 0.6s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    margin: 0;
  }

  @keyframes showContent {
    from {
      opacity: 0;
      height: 0;
    }
    to {
      opacity: 1;
      height: auto;
    }
  }
  @keyframes slideDown {
    from {
      opacity: 0;
      height: 0;
      padding: 0;
    }

    to {
      opacity: 1;
      height: auto;
    }
  }
}
