.fixed-banner {
  transition : 0.3s ease-in-out transform;
  position   : fixed;
  left       : 323px;
  right      : 0;
  bottom     : 0;
  width      : calc(100% - 343px);
  background : #385958;
  padding    : 0 10px 10px !important;
  transform  : translateY(150%);
  box-shadow: 0px -6px 13px rgba(0, 0, 0, 0.25);

  &.show {
    transform : translateY(0);
  }

  .detail {
    font-family : $overpass;
    font-weight : 900;
    font-size   : 14px;
    color       : $white;
    display     : block;
    padding     : 7px 0 6px;
  }

  .close {
    font-family : $overpass;
    font-size   : 18px;
    color       : $white;
    position    : absolute;
    top         : 0;
    right       : 5px;
    cursor      : pointer;
    transition  : 0.3s ease-in-out opacity;

    &:hover {
      opacity : 0.8;
    }
  }

  .wrapper {
    padding       : 10px;
    background    : $white;
    box-shadow    : 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius : 8px;
    display       : flex;
    align-items   : stretch;
  }

  .column {
    flex : 0 1 608px;
  }

  .title {
    margin-bottom : 6px;
    display       : block;
    font-family   : $overpass;
    font-size     : 26px;
    color         : #494949;
  }

  .link {
    transition      : 0.3s ease-in-out background;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 304px;
    height          : 48px;
    max-width       : 100%;
    background      : #E59620;
    box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.374);
    border-radius   : 7px;
    font-family     : $overpass;
    font-weight     : $bold;
    font-size       : 26px;
    line-height     : normal;
    color           : $white;

    &:hover {
      background : #bf7c1b;
    }
  }

  .decoration {
    display    : inline-block;
    margin     : 0 66px;
    flex       : 0 0 2px;
    width      : 2px;
    height     : 117px;
    background : #D7D7D7;
  }

  .display {
    flex            : 0 1 429px;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
  }

  img {
    display   : block;
    max-width : 100%;
    height    : auto;
  }

  @media(max-width : 1000px) {
    left  : 0;
    width : calc(100% - 20px);

    .decoration {
      margin : 0 20px;
    }
  }

  @media(max-width : 667px) {
    .wrapper {
      flex-direction : column;
    }

    .detail {
      font-size : 12px;
      padding   : 3px 0;
    }

    .decoration {
      display : none;
    }

    .display,
    .column {
      flex       : 0 1 auto;
      text-align : center;
    }

    .title {
      font-size : 14px;
    }

    img {
      width  : 150px;
      margin : 0 auto 10px;
    }

    .link {
      width     : 304px;
      height    : 24px;
      font-size : 14px;
      padding-top: 1px;
    }
  }
}
