.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; 
            .user-subscr {
              display: flex; gap: 10px; align-items: center;
              .state {
                .item {
                  font-size: 1.1rem; border-radius: 20px; border: 1px solid var(--main-color); color: var(--main-color); background: #fff;
                  img {
                    width: 13px; height: auto;
                  }
                  &.ing {
                    padding: 3px 15px 3px 10px; 
                  }
                  &.yet {
                    padding: 3px 10px 3px 15px; cursor: pointer;
                    &:hover {
                      box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
                    }
                  }
                }
                .join-step {
                  font-size: 1.1rem; border-radius: 20px; padding: 3px 15px 3px 10px; background: #fff;
                  img {
                    width: 13px; height: auto;
                  }
                  &.wait { 
                    border: 1px solid #bbbbbb; color: #bbbbbb; 
                  }
                  &.assignment {
                    border: 1px solid #64CCC5; color: #64CCC5; 
                  }
                  &.approval {
                    border: 1px solid #176B87; color: #176B87; 
                  } 
                  &.complate {
                    border: 1px solid #F27221; color: #F27221; 
                  }
                  &.member {
                    border: 1px solid #f27221; color: #ffffff; padding: 3px 10px 1px 10px; background-color: #f27221; border-radius: 4px;
                  } 
                }
              }
            }
          }
        }
      }
    }
  }
  .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;
      .user-table {
        table {
          tr {
            td {
              .user-subscr {
                display: block;
                .state {
                  margin-top: 10px;
                  .item {
                    display: inline-block;
                  }
                  .join-step {
                    display: inline-block;
                  }
                }
              }
            }
          }
        }
      }
    }
    .give-info-area {
      width: 100%; margin-top: 20px;
      .give-info { padding: 15px; }
    }
  }
}