.file-area {
  .file {
    ul {
      li {
        float:left; width:calc(33.3% - 14px); margin-right:20px; margin-bottom:20px;
        &:nth-child(3n) {
          margin-right:0;
        }
        .file-box {
          position:relative; padding:15px; border:1px solid var(--line-color);
          .type {width:40px; height:40px; border-radius:5px; float:left; position:relative;
            span {
              position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); display:block; font-weight:700; font-size:1rem; color:#fff; 
            }
            &.hwp {
              background:#4d70e4;
              }
            &.excel {
              background:#2a9b3d;
              }
            &.ppt {
              background:#ee6767;
              }
            &.img {
              background:#ffad16
              }
            &.etc {
              background:#4c4c4c;
              }
          }
          .info-area {
            float:left; padding-left:12px; width: calc(100% - 70px);
            .info {
              span { 
                position: relative; display: inline-block; font-size: 1.2rem; font-weight: 500; color: #aaa; 
                &:first-child {
                  padding-right: 20px;
                  &:before { content: ''; position: absolute; top:5px; right:6px; width: 4px; height: 4px; border-radius: 5px; background: #c1c1c1; }
                }
              }
            }
            .file-name {
              font-size:1.4rem; padding-top:12px; text-decoration: underline; cursor: pointer; @include ellipsis; transition: color .25s ease;
              &:hover {
                color:#20368a;
              }
            }
          }
          .down-btn {
            position:absolute; right:12px; top:8px;
            img {
              width:25px; height:25px; opacity:0.4; cursor:pointer; transition: opacity .25s ease;
              &:hover {opacity:1;}
            }
          }    
        }
      }
    }
  }
}

@media(max-width:1024px) {
  .file-area {
    .file {
      ul {
        li {
          float:left; width:calc(50% - 14px); margin-right:20px; margin-bottom:20px;
          &:nth-child(3n) {
            margin-right:20px;
          }    
          &:nth-child(2n) {
            margin-right:0;
          }             
        }
      }
    }
  }
}

@media(max-width:768px) {
  .file-area {
    .file {
      ul {
        li {
          float:left; width:100%; margin-right:0px; margin-bottom:20px;
          &:nth-child(3n) {
            margin-right:0px;
          }       
        }
      }
    }
  }
}

@media(max-width:500px) {
  .file-area {
    .file {
      ul {
        li {          
          .file-box {
            padding:10px;
            .info-area {
              .info {
                span {
                  font-size:1rem;
                }
              }
              .file-name {
                font-size:1.3rem
              }
            }
          }            
        }
      }
    }
  }
}