.techmarket-wrap {
  position: relative; margin-top: 70px;
  .pc-tech-table { 
    margin-top: 20px;
    table {
      width: 100%;table-layout: fixed; margin-top: 10px; 
      thead {
        tr {
          th {
            vertical-align: middle; height:40px; font-weight: 500; text-align: center; color: #fff; font-size: 1.4rem; background:var(--navy-color);
            &:first-child { border-radius: 5px 0 0 5px; }
            &:last-child { border-radius: 0 5px 5px 0; }
          }
        }
      }
      tbody {
        tr {
          td {
            vertical-align: middle; word-break: break-word; color: #000; text-align: center; font-size:1.5rem; height: 50px; border-bottom: 1px solid var(--line-color); font-weight: 400;
            &.tech-name { @include ellipsis; padding:0 8px; }
            .status-wrap {
              position:relative;
              .arrow-ico {
                position:absolute; top:-3px; cursor:default;
                span.material-icons { opacity:.2; }
                &.on {
                  cursor:pointer;
                  span.material-icons {opacity:1;}
                }
                &.left-arrow {left:0;}
                &.right-arrow {right:0; top:-1px}
              }
              .status-list {
                overflow:hidden;text-align: left;
                ul {
                  overflow: hidden; padding:0 32px; white-space: nowrap; max-height: 20px;
                  li {
                    display:inline-block; margin-right:4px; font-size:1.25rem; cursor:default;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .mo-tech-table {
    display: none;
    .table-box {
      .box {
        background:#f2f2f2; color:#333; padding:20px; border-radius:5px; margin-bottom:15px;
        &:last-child {margin-bottom:0;}
        .tech-name {
          @include ellipsis; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line-color);
          .status {margin-right:6px; font-size:1.2rem}
        }
        ul {
          li {
            float:left; width: calc(50% - 5px); margin-right:10px; margin-bottom:20px; font-size:1.4rem; text-align: left;
            &:nth-child(2n) {margin-right:0}
            &:nth-child(3),
            &:nth-child(4) {margin-bottom:0}
            b {margin-right:7px;}
          }
        }
      }
    }
  }
  .status {
    padding:3px 15px; border-radius: 3px; background:#aaa; display:inline-block; color:#fff; font-size: 1.1rem;
    &.status01 {background:#6182e5}
    &.status02 {background:#0aa86b}
    &.status03 {background:#9145f9}
    &.status04 {background:#1e99bd}
    &.status05 {background:#ff6464}
    &.status06 {background:#ff9c28}
  }
}


@media(max-width: 1200px) {
  .techmarket-wrap {
    margin-top: 50px;
  }
}
@media(max-width:1024px) {
  .techmarket-wrap {
    .pc-tech-table { display:none; }
    .mo-tech-table { display:block; }
  }
}
@media(max-width:500px) {
  .techmarket-wrap {
    .mo-tech-table {
      .table-box {
        .box {
          padding:15px;
          .tech-name {
            font-size:1.2rem; padding-bottom:10px; margin-bottom:10px; font-weight: 600;
            .status { padding:3px 10px; font-size: 1.1rem; font-weight: 500; }
          }
          ul {
            li {
              font-size:1.1rem;margin-bottom:15px;
            }
          }
        }
      }
    }
    .status { padding:3px 10px; font-size: 1.1rem; }
  }
}
@media(max-width:400px) {
  .techmarket-wrap {
    .mo-tech-table {
      .table-box {
        .box {
          ul {
            li {
              float:none; margin-right:0; margin-bottom:10px; width:100%; padding-bottom:10px; border-bottom:1px solid var(--line-color);
              &:last-child {border-bottom:0; padding-bottom:0}
              &:nth-child(3) {margin-bottom: 10px;} 
            }
          }
        }
      }
    }
  }
}