/* Scss Document */
@keyframes animate-panel {
  0% {
    transform-origin: left top;
    transform: scale(0, 1); }
  49% {
    transform-origin: left top;
    transform: scale(1, 1); }
  50% {
    transform-origin: right top;
    transform: scale(1, 1); }
  100% {
    transform-origin: right top;
    transform: scale(0, 1); } }
@keyframes animate-content {
  0% {
    visibility: hidden; }
  49% {
    visibility: hidden; }
  50% {
    visibility: visible; }
  100% {
    visibility: visible; } }

#shoplist {
  display: inline-block; }
  #shoplist .slideConts .slbox {
    position: relative;
    visibility: hidden; }
    #shoplist .slideConts .slbox::after {
      content: "";
      background: #FFF;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: left top;
      transform: scale(0,1);
      transition: all 0.3s ease 0s;
      visibility: visible; }

    #shoplist .slideConts.start .slbox{
      animation-name: animate-content;
      animation-duration: 1.5s;
      animation-timing-function: ease;
      animation-delay: 0s;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: both;
      animation-play-state: running;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }


      #shoplist .slideConts.start .slbox::after {
        animation-name: animate-panel;
        animation-duration: 1.5s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: both;
        animation-play-state: running;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }