.my-dashboard {
  position: relative;
  .user-info-area {
    float: left; position: relative; width: calc(50% - 15px); margin-right: 30px;
    .user-name {
      font-size: 2.5rem; font-weight: 300; color: #000; padding-bottom: 15px;
      img { width: 30px; height: 30px; }
      .name { color: var(--main-color); }
    }
    .user-table {
      position: relative; width: 100%;
      table {
        table-layout: fixed; width: 100%; border-top: 1px solid #333; font-size: 1.3rem;
        tr { 
          border-bottom: 1px solid var(--line-color);
          th { width: 100px; height: 40px; font-weight: 500; color: #000; padding: 5px; }
          td { height: 40px; font-weight:500; color: #6e6e6e; padding: 5px; }
        }
      }
    }
  }
  .give-info-area {
    float: left; position: relative; width: calc(50% - 15px); border:1px solid var(--line-color);
    .give-level {
      float: left; width: 140px; text-align: center; padding: 20px; background: #f2f5f6; border-right:1px solid var(--line-color);
      .tit {display: inline-block; font-size: 1rem; font-weight: 600; border-radius: 30px; padding: 4px 15px; background:var(--darkblue-color); color: #fff; margin: 7px 0;}
      .level-img {
        img { display: none; width: 90px; height: 90px; }
        &.President {
          img.President { display: inline-block; }
        }
        &.gold {
          img.gold { display: inline-block; }
        }
        &.silver {
          img.silver { display: inline-block; }
        }
        &.bronze {
          img.bronze { display: inline-block; }
        }
        &.notapplicable{
          img.notapplicable {display: inline-block;}
        }
      }
    }
    .give-info {
      float: left; width: calc(100% - 140px); padding: 19px 30px; position: relative;
      .row {
        font-size: 1.2rem; padding: 13px 0; letter-spacing: -.2px; font-weight: 500;
        &:first-child {border-bottom: 1px solid var(--line-color); }
        .tit { float: left; width: 65px; font-weight: 600;}
        .txt { float: left; width: calc(100% - 65px); color: #6e6e6e; }
        .btn-wrap {
          button { 
            font-size: 1rem; padding:3px 15px; height: auto; min-width: auto; border: 1px solid var(--main-color); color:var(--main-color); background-color: transparent; font-weight: 600; 
            &:hover { background: var(--main-color); color: #fff; }
          }
        }
      }
    }
  }
}

@media (max-width: 1060px) {
  .my-dashboard {
    .user-info-area { 
      width: calc(45% - 10px); margin-right: 20px; 
      .user-name { 
        font-size: 2rem;
        > img { width: 23px; height: 23px; }
      }
    }
    .give-info-area { 
      width: calc(55% - 10px); 
      .give-level { 
        width: 110px; padding: 41px 20px;
        .tit {margin: 0 0 15px; }
        .level-img {
          img { height: auto; width: 100%;}
        }
      }
      .give-info { width: calc(100% - 110px); padding: 19px 20px;}
    }
  }
}
@media (max-width: 650px) {
  .my-dashboard {
    .user-info-area {
      width: 100%; margin-right: 0;
    }
    .give-info-area {
      width: 100%; margin-top: 20px;
      .give-info { padding: 15px; }
    }
  }
}