@charset "utf-8";


.good-tech-wrap {
  .tech-list {
      display: flex; flex-wrap: wrap; gap: 15px;
    .item-cont {
      width: calc(33% - 7px);
      .item {
        &.no-image {
          &:hover {
            .thumbnail-area {
              > img {
                transform: translate(-50%,-50%) scale(1);
              }
            }  
          }
          .thumbnail-area {
            background-color: #F9F9F9;
            > img {
              width: 140px; opacity: .5; height: auto; max-width: 90%;
            }
          }
        }
        .thumbnail-area {
          width: 100%; padding-bottom: 55%; position: relative; overflow: hidden; border-radius: 5px; margin-bottom: 15px; border: 1px solid var(--line-color);
          > img {
            width: 100%; height: 100%; object-fit: cover; transition: transform .2s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; transition: transform .2s, -webkit-transform .2s;
          }
          &:hover {
            .thumbnail {
              transform: translate(-50%, -50%) scale(1.1);
            }
          }
          .thumbnail {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: transform .2s;
          }
          .youtube-icon {
            width: 24px; height: 24px; position: absolute; bottom: 8px; left: 8px; z-index: 1;
            img {
              width: 100%; height: auto;
            }
          }
        }
        .title-area {
          .tit {
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 700; padding-bottom: 10px; line-height: 1.6;
          }
          .info {
            > {
              span {
                position: relative; display: inline-block; font-size: 1.4rem; color: #757575;
                &:not(:first-child):after {
                  content: ''; width: 1px; height: 10px; background: #aaa; position: absolute; top: 5px; left: 5px;
                }
                &:not(:first-child) {
                  padding-left: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.tag {
  display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px;
  &.detail {
    padding: 15px 0;
    li {
      padding: 8px 10px; font-size: 1.5rem; background: #ebedf4; color: #222;
    }
  }
  li {
    background: #7f9cff; color: #fff; padding: 5px; border-radius: 3px; font-size: 1.3rem; font-weight: 400; cursor: pointer;
  }
}
.tab-area {
  padding-bottom: 50px;
  ul {
    display: flex; gap: 5px; padding-bottom: 10px; flex-wrap: wrap;
    li {
          flex: 1 1 calc(100% / 6 - 10px); max-width: calc(100% / 6 - 10px); text-align: center;
      &.active {
        a {
          background: var(--main-color); color: #fff; font-weight: 500;
        }
      }
      &:hover {
        a {
          background: var(--main-color); color: #fff; font-weight: 500;
        }
      }
      a {
        padding: 10px 0; font-size: 1.5rem; font-weight: 600; color: #818181; background: #EFEFEF; border-radius: 5px; display: block;
      }
    }
  }
}

.download {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; background: linear-gradient(89.7deg, rgb(68, 127, 255) -.87%, #4aaeff 99.76%); padding: 15px; margin-top: 15px; border-radius: 5px; overflow: hidden;
  &:hover {
    background: linear-gradient(89.7deg, rgb(48, 105, 228) -.87%, #2f89d3 79%);
  }
  p {
    position: relative; font-weight: 600; color: #fff;
    &.tit {
      flex: 1 1 auto; min-width: 0; font-size: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    &.down {
      font-size: 1.4rem; flex: 0 0 auto; position: relative; top: 3px;
    }
    img {
      position: relative; top: -3px; left: -1px; width: 20px; height: 20px;
    }
  }
}

.keyword-wrap {
  position: relative; padding-top: 10px;
  .keyword-list {
    ul {
      display: flex; gap: 8px; flex-wrap: wrap;
      li {
        &:hover {
          .keyword {
            background: #6182e5; color: #fff;
          }
        }
        .keyword {
          padding: 8px 15px; border-radius: 3px; background: #ebedf4; display: inline-block; color: #000; font-size: 1.2rem; cursor: pointer;
        }
      }
    }
  }
  .caption {
    font-size: 1.3rem; font-weight: 500; color: #888888; padding-bottom: 7px;
  }
}

.tech-search-wrap {
  padding-bottom: 40px; width: 100%; margin: 0 auto;
  .search-box {
    position: relative;
    .input-box {
      margin: 0 auto;
      input[type=text].text-input {
        height: 40px; padding: 0 110px 0 10px;
      }
    }
    .btn-wrap {
      position: absolute; top: -4px; right: 0;
      .theme-btn {
        width: auto; height: 46px; border-radius: 3px;
        img {
          width: 15px; height: 15px; margin-right: 5px;
        }
      }
    }
  }
}

.fav {
  color: #aaa; padding: 5px; border-radius: 3px; font-size: 1.1rem; display: inline-block; font-weight: 500; min-width: 52px; text-align: center; border: 1px solid #ccc;
  &.mg-right {
    margin-right: 5px;
  }
  &:hover {
    background: #fff; border: 1px solid var(--main-color); color: var(--main-color);
  }
  &.active {
    background: #fff; border: 1px solid var(--main-color); color: var(--main-color);
  }
}

.caption {
  padding-bottom: 10px;
  p {
    color: #787878; font-size: 1.3rem;
  }
}

.file-input {
  position: relative;
  display: inline-block;
  width: 700px; max-width: 100%;
  padding-left: 10px;
  font-size: 1.2rem; line-height: 40px;
  background: #fff; border: 1px solid var(--line-color);
  border-radius: 5px; margin-top: 7px; cursor: pointer;
  text-align: left;

  > input[type=file]{
    position: absolute; inset: 0;   /* top:0; right:0; bottom:0; left:0; */
    width: 100%; height: 100%;
    opacity: 0; z-index: 3; cursor: pointer;
    margin-top: 0 !important;
  }

  .label{
    display: block;
    color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    padding: 0 112px 0 0;  /* 버튼 폭만큼 오른쪽 여백 */
    &.empty{ color:#888; opacity:.5; }
  }

  .button{
    position: absolute; top:-1px; right:-1px;   /* 테두리 겹치기 */
    height: calc(100% + 2px);                   /* 위/아래 보더 포함 */
    min-width: 110px; padding: 0 16px;
    display:flex; align-items:center; justify-content:center;
    background:#1f1f1f; color:#fff;
    border-radius: 0 5px 5px 0;
    font-weight:600; line-height: 1;
    z-index: 2; pointer-events: none; /* 클릭은 투명 input이 받게 */
  }
}




@media (max-width: 1200px) {
  .good-tech-wrap {
    .tech-list {
      .item-cont {
        .item {
          .title-area {
            .tit {
              font-size: 1.5rem; padding-bottom: 3px;
            }
          }
        }
      }
    }
  }
  .filter-area {
    padding: 0;
  }
}

@media (max-width: 1000px) {
  .board-wrap {
    .board-body {
      > div {
        &.board-cell {
          &.cell-tit {
            padding: 3px 0; width: 100%;
          }
        }
      }
      > .board-cell {
        &[data-label="즐겨찾기"] {
          &::before {
            content: none !important;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .good-tech-wrap {
    .tech-list {
      flex-wrap: wrap;
      .item-cont {
        width: calc(50% - 10px);
      }
    }
  }
  .tab-area {
    padding-bottom: 40px;
    ul {
      li {
        flex: 1 1 calc(100% / 4 - 10px); max-width: calc(100% / 4 - 10px);
        a {
          font-size: 1.4rem;
        }
      }
    }
  }
  .tag {
    &.detail {
      li {
        font-size: 1.4rem;
      }
    }
  }
}


@media (max-width: 525px) {
  .good-tech-wrap {
    .tech-list {
      .item-cont {
        .item {
          .title-area {
            .tit {
              font-size: 1.4rem; line-height: 1.5; padding-bottom: 3px;
            }
            .info {
              > span {
                font-size: 1.3rem;
              }
            }
          }
        }
      }
    }
  }
  .download {
    padding: 10px;
    p {
      &.tit {
        font-size: 1.4rem;
      }
      &.down {
        font-size: 1.3rem;
      }
      img {
        width: 18px; height: 18px;
      }
    }
  }
  .tab-area {
    padding-bottom: 30px;
    ul {
      li {
        flex: 1 1 calc(100% / 3 - 10px); max-width: calc(100% / 3 - 10px);
        a {
          font-size: 1.3rem;
        }
      }
    }
  }
  .tag {
    &.detail {
      li {
        font-size: 1.3rem;
      }
    }
  }
  .fav {
    &.mg-right {
      margin-bottom: 2px;
    }
  }
}

@media (max-width: 440px) {
  .good-tech-wrap {
    .tech-list {
      .item-cont {
        width: 100%;
      }
    }
  }
}