@charset "utf-8";

/* =========================
  File
========================= */
.fileWrap {display: flex; flex-direction: column; width: 100%; margin-bottom: 10px;}
.fileWrap .fileSec {display: flex; height: 4vw; line-height: 4vw; background: none; border: 0; padding: 0 ; border-radius: 0; color: inherit;}
.fileWrap .fileSec > input {border: 0;}
.fileWrap .frm_input {margin: 0;}
.fileWrap .file_del {position: relative !important; top: auto !important; left: 0; right: auto; color: inherit; margin-top: 10px; font-size: inherit;}
.fileWrap .fileSec .filebox {position: relative; width: 100%; font-size: inherit;}
.fileWrap .fileSec .filebox .upload-name {width: 100%; background: none; border: 1px solid rgba(255,255,255,0.3); color: #666; border-radius: 10px;}
.fileWrap .fileSec .filebox .upload-hidden {display: none;}

.fileWrap .fileSec .btn_file_find {display: flex; align-items: center; justify-content: center; width: 240px; height: calc(4vw + 2px); margin-left: 15px; background: #333; color: #fff; border-radius: 4vw; cursor: pointer;}

.fileWrap .file_del label {text-transform: none;}
.fileWrap .file_del label:hover {font-weight: inherit;}
.fileWrap .file_del label > *:not(span) {width: calc(100% - 30px); word-break: break-all;}

.file-btns {margin-bottom: 10px;}
.file-btns > button {background: none; color: inherit; font-weight: 300; width: 75px; height: 54px; background-color: transparent; border-radius: 10px;}
.file-btns > button:hover {color: #fff; border: 0 !important;}


  /* ====================================================================================================
    데스크탑 (1280px ~ 1780px)
  ==================================================================================================== */
  @media screen and (max-width: 1780px) {
    .fileWrap .fileSec {height: 6vw; line-height: 6vw; background: none; border: 0;}
    .fileWrap .fileSec .btn_file_find {height: calc(6vw + 2px);}
  }

  /* ====================================================================================================
    노트북 & 태블릿 가로 (1024px ~ 1279px)
  ==================================================================================================== */
  @media screen and (max-width:1279px) {
    .fileWrap .fileSec {display: flex;}
  }


  /* ====================================================================================================
    태블릿 가로 (768px ~ 1023px)
  ==================================================================================================== */
  @media screen and (max-width:1023px) {
    .fileWrap .fileSec {height: 8vw; line-height: 8vw;}
    .fileWrap .fileSec .btn_file_find {height: calc(8vw + 2px);}
    .file-btns > button {height: 49px;}
  }


  /* ====================================================================================================
    모바일 가로 & 태블릿 세로 (480px ~ 767px)
  ==================================================================================================== */
  @media screen and (max-width:767px) {
    .fileWrap .fileSec {height: 10vw; line-height: 10vw;}
    .fileWrap .fileSec .filebox .upload-name {border-radius: 8px;}
    .fileWrap .fileSec .btn_file_find {width: 190px; height: calc(10vw + 2px); border-radius: 50px;}
    .file-btns > button {height: 44px;}
  }


  /* ====================================================================================================
    모바일 세로 (~ 479px)
  ==================================================================================================== */
  @media screen and (max-width:479px) {
    .fileWrap {margin-bottom: 0;}
    .fileWrap .fileSec {flex-direction: column; height: auto; line-height: inherit;}
    .fileWrap .fileSec .btn_file_find {width: 100%; height: 14vw; margin-left: 0; margin-top: 10px;}
    .fileWrap .file_del label {margin-bottom: 30px;}
  }