/* ******************** button style ******************** */

.btn-wrap {
  position: relative; text-align: center;
  &:after {
    content: ''; display: block; clear: both;
  }
  &.inline {
    display: inline-block;
    button {
      float: none;
    }
  }
  &.mg-20 {
    margin-top:20px;
  }
  .btn-right {
    float:right;
  }
  .btn-left {
    float:left;
  }
  .btn-center {
    display: inline-block; float:none 
  }
  button {
    margin-right: 5px; background:#3f3f3f; color:#fff; height: 54px;padding:0 15px; width:100%; font-size: 1.4rem; font-weight: 500; -webkit-transition: background .3s, color .3s; -o-transition: background .3s,color .3s;transition: background .3s, color .3s; cursor: pointer; float: left; border-radius: 5px; line-height: 52px; border:1px solid #3f3f3f;
    &:hover {
      background:#202020;
      border-color:#202020;
    }
    &:last-child {
      margin-right:0
    }
    &.small-btn {
      padding: 3px 15px; height: 25px; min-width: 90px; font-size: 1.2rem; font-weight: 500; border-radius: 20px; line-height: 20px;
    }
    &.theme-btn {
      background: var( --main-color);
      border-color:var(--main-color);
      &:hover {
        background:#3f62d9;
        border-color:#3f62d9;
      }
    }
    &.navy-btn {
      background:#15284c;
      &:hover {
        background:#09101c;
      }
    }
    &.gray-btn {
      background:#afafaf;
      border-color:#afafaf;
      &:hover {
        background:#919191;
        border-color:#919191;
      }
    }
    &.white-btn {
      background:#fff;
      border-color:var(--line-color);
      color:#444;
      &:hover {
        background:#f7f7f7;
      }
    }  
    &.white-border-btn {
      background:transparent;
      border-color:#fff;
      color:#fff;
      &:hover {
      }
    } 
    &.blue-gray-btn {
      background:#ebedf4;
      border-color:#ebedf4;
      color:#8a96bd;
      &:hover {
        background:#e1e5f5;
        border-color:#e1e5f5;
      }
    }
    &.red-btn {
      background:#ef5b5b;
      border-color: #ef5b5b;
      color: #fff;
      &:hover {
        background:#ed4545;
        border-color: #ed4545;
      }
    }
    &.sns-btn {
      font-weight:600;
      font-size:1.3rem;
      height:45px;
      line-height:43px;
    }
    &.kakao-btn {
      background:#ffde00;
      color:#371c1d;
      border-color:#ffd300;  
      &:hover {
        background:#eed008;
        border-color:#eed008;
      }    
    }
    &.face-btn {
      background:#4268b3;
      border-color:#4268b3;
      &:hover {
        background:#1d4799;
        border-color:#1d4799;
      }
    }
    &.naver-btn {
      background:#42c800;
      border-color:#44c800;
      &:hover {
        background:#1aab00;
        border-color:#1aab00;
      }
    }
    &.google-btn {
      border-color:#b8b8b8;
      background:#fff;
      color:#514e4e;
      &:hover {
        background:#f4f4f4;
      }
    }
  }
}