@charset "utf-8";


/* ******************** component ******************** */

/* button */ 
@import "../../component/button-style";

/* board */
@import "../../component/board";

/* sub-cont */ 
@import "../common/_sub-cont";



/* ******************** sub-common ******************** */ 

/* sub-banner */ 
@import "../common/_sub-banner";

/* sub-tab */ 
@import "../common/_sub-tab";



/* ******************** 가족회사 ******************** */

/* banner */ 
@import "./banner";

.support-program-list ul li {
  float: left; width: 33%; height: 250px; background: #fff; border-left: 1px solid #dee3eb; border-top: 1px solid #dee3eb; padding: 20px; position: relative;

  &:nth-child(2n) {
    border-right: 1px solid #dee3eb;
  }

  &:last-child, &:nth-last-child(2) {
    border-right: 1px solid #dee3eb; border-bottom: 1px solid #dee3eb;
  }

  .number {
    font-weight: 800; font-size: 20px; margin-bottom: 5px; color: #C9C9C9;
  }

  .name {
    font-weight: 700; font-size: 18px; margin-bottom: 5px;
  }

  .exp {
    font-size: 13.5px;
  }

  a {
    margin-top: 20px; display: inline-block; font-size: 13px; background: #1686f4; color: #fff; height: 30px; line-height: 30px; font-weight: 300; padding: 0 15px; border-radius: 3px; position: absolute; right: 20px; bottom: 20px; transition: background .25s ease;
    &:hover {
      background: #0068D0;
    }
  }

  .float-btn {
    position: absolute; bottom: 20px; right: 20px;
    a {
      position: static;
    }
  }
}

@media all and (max-width: 1100px) {
  .support-program-list ul li {
    width: 100%; border-right: 1px solid #dee3eb;

    &:nth-last-child(2) {
      border-bottom: none;
    }
  }
}

@media all and (max-width: 420px) {
  .support-program-list ul li {
    height: auto;
    a {
      width: 100%;
      .support-program-list ul li {
        float: left; width: 49%; height: 250px; background: #fff; border-left: 1px solid #dee3eb; border-top: 1px solid #dee3eb; padding: 20px; position: relative;
        &:nth-child(2n) {
          border-right: 1px solid #dee3eb;
        }
        &:last-child, &:nth-last-child(2) {
          border-right: 1px solid #dee3eb;
          border-bottom: 1px solid #dee3eb;
        }
        .number {
          font-weight: 800;
          font-size: 20px;
          margin-bottom: 5px;
          color: #C9C9C9;
        }
        .name {
          font-weight: 700; font-size: 18px; margin-bottom: 5px;
        }
        .exp {
          font-size: 13.5px;
        }
        a {
          margin-top: 20px; display: inline-block; font-size: 13px; background: #1686f4; color: #fff; height: 30px; line-height: 30px; font-weight: 300; padding: 0 15px; border-radius: 3px; position: absolute; right: 20px; bottom: 20px; transition: background .25s ease;
          &:hover {
            background: #0068D0;
          }
        }
      
        .float-btn {
          position: absolute; bottom: 20px; right: 20px;
          a {
            position: static;
          }
        }
      }
      
      @media all and (max-width: 1100px) {
        .support-program-list ul li {
          width: 100%; border-right: 1px solid #dee3eb;
      
          &:nth-last-child(2) {
            border-bottom: none;
          }
        }
      }
      
      @media all and (max-width: 420px) {
        .support-program-list ul li {
          height: auto;
      
          a {
            width: 100%; right: 0; bottom: 0; position: relative; text-align: center; margin-top: 30px;
          }
      
          .float-btn {
            width: 100%; right: 0; bottom: 0; position: relative; text-align: center; margin-top: 30px;
            a {
              margin-top: 15px;
            }
          }
        }
      }
      right: 0; bottom: 0; position: relative; text-align: center; margin-top: 30px;
    }

    .float-btn {
      width: 100%; right: 0; bottom: 0; position: relative; text-align: center; margin-top: 30px;
      a {
        margin-top: 15px;
      }
    }
  }
}