@charset "utf-8";

/* 
 * content CSS Document
 *
 */

/* .area-subVisual {
     --radius: 8rem;
     --lnb-size: 70rem;
     position: relative;
     z-index: 8;
     height: 200rem;
     padding-top: var(--header-height);
     background: var(--black) no-repeat 50% / cover;
 } */

.area-subVisual {
  overflow: hidden;
  position: relative; /*height:200rem;*/
  height: auto;
  background-color: #3f3f3f;
  background-size: cover;
  background-repeat: no-repeat;
  padding-block: 25rem;
  .inr {
    height: 100%;
    display: flex;
    align-items: center;
  }
  &[data-subLayout="about"] {
    background-image: url("/images/content/img_profile_bg.jpg");
  }
  &[data-subLayout="performance"] {
    background-image: url("/images/content/img_profile_bg.jpg");
  }
  &[data-subLayout="photo"] {
    background-image: url("/images/content/img_profile_bg.jpg");
  }
  &[data-subLayout="works"] {
    background-image: url("/images/content/img_profile_bg.jpg");
  }
  &[data-subLayout="inquiry"] {
    background-image: url("/images/content/img_profile_bg.jpg");
  }
  .title-group {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 15rem;
  }
  .title-group h3 {
    font-size: var(--fs28);
    font-weight: 700;
  }
  .title-group ul {
    display: flex;
    gap: 40rem;
  }
  .title-group ul li {
    font-size: 15rem;
    font-weight: 400;
    position: relative;
  }
  .title-group ul li b {
    font-weight: 600;
  }

  @media (min-width: 767px) {
    .title-group ul li:not(:last-child)::after {
      content: "|";
      position: absolute;
      right: -22rem;
      bottom: 0;
    }
  }

  @media (max-width: 767px) {
    padding-block: 30rem;
    .title-group ul {
      gap: 15rem;
      justify-content: space-between;
    }
    .title-group ul li {
      font-size: 13rem;
    }
    .title-group ul li b {
      display: block;
    }
  }
}

.area-lnb {
  height: 60rem;
  border-bottom: 1px solid #eeeeee;
  .inr {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10rem;
  }
  .breadcrumb [data-subTitle] {
    font-size: 16rem;
    font-weight: 300;
  }
  [data-subTitle] {
    font-size: 18rem;
    font-weight: 500;
  }

  .lnb {
    height: 100%;
  }
  .lnb ul {
    display: flex;
    height: 100%;
    align-items: center;
  }
  .lnb a {
    padding-inline: 10rem;
    color: var(--color-point);
    border-bottom: 1px solid var(--color-point);
  }
}

/* form active - 디자인가이드 input radio, checkbox 디자인 관련입니다. 필요없는경우 삭제하시고 작업하시면되요.*/
.cus_design {
  max-width: 400rem;
}
.cus_design > ul > li {
  display: block;
  position: relative;
  margin: 3rem 0px;
}
.cus_design input[type="text"] {
  width: 100%;
  height: 45rem;
}
.cus_design select {
  width: 100%;
  height: 45rem;
}
.cus_design label {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 90%;
  box-sizing: border-box;
  padding: 0 5rem;
  background: #fff;
  transform: translateY(-50%);
}
.cus_design .in label {
  color: #1637a2;
}
.cus_design .active label {
  top: 10%;
  width: auto;
  font-size: 11rem;
}
.cus_design [data-form-design="select"] label {
  top: 10%;
  width: auto;
  font-size: 12rem;
  font-weight: 500;
}

/* #content{ padding: clamp(70rem, calc( 144 / var(--inr) * 100vw ), 144rem) 0; } */
section.subpage {
  padding: clamp(70rem, calc(144 / var(--inr) * 100vw), 100rem) 0;
  min-height: 50svh;
}
.sub-title {
  margin-bottom: clamp(50rem, calc(100 / var(--inr) * 100vw), 100rem);
  font: 700 var(--fs40) var(--font-pre);
  text-align: center;
}
.section-title {
  margin-bottom: clamp(50rem, calc(100 / var(--inr) * 100vw), 100rem);
  font: 700 var(--fs40) var(--font-pre);
  text-align: left;
}
.sub-section-title {
  margin-bottom: clamp(24rem, calc(100 / var(--inr) * 100vw), 50rem);
  font: 700 var(--fs35) var(--font-pre);
  text-align: left;
}

.sub01.sp01 {
  /* .inr {display: grid;grid-template-columns: auto clamp(250rem,calc(480 / var(--inr)* 100vw),480rem);gap: 50rem;} */
  .top-images {
    width: 80%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  hgroup {
    text-align: center;
    margin-top: 60rem;
    color: #222;
  }
  hgroup h3 {
    font-size: 36rem;
    font-weight: 800;
  }
  hgroup h4 {
    font-size: var(--fs28);
    font-weight: 600;
    margin-top: 10rem;
  }
  .text-content {
    margin-top: 50rem;
    font-size: 16rem;
    line-height: 1.8;
    text-align: center;
    color: #555;
  }
  .text-content p:not(:last-child) {
    margin-bottom: 40rem;
  }
  .text-content p:last-child {
    font-size: 14rem;
    font-weight: 600;
    color: #222;
  }
  .scrolling-text {
    width: 100%;
    overflow-x: hidden;
    margin-top: 130rem;
  }
  .scrolling-text img {
    filter: grayscale(1) opacity(0.2);
  }
  .text-content b {
    font-size: 22rem;
    color: #222;
  }
  @media (max-width: 767px) {
    .inr {
      grid-template-columns: 1fr;
    }
    .col-right {
      order: -1;
    }
    .top-images {
      width: 100%;
    }
  }
}

.sub02.sp01 {
  .result-lists {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20rem;

    li > a {
      background-color: #f5f5f5;
      border: 1px solid #e5e5e5;
      padding: 45rem 35rem;
      display: flex;
      flex-direction: column;
      gap: 15rem;
      transition: all var(--trans-ani);
      height: 100%;
    }
    em {
      background-color: var(--color-point);
      color: var(--color-white);
      width: 76rem;
      height: 32rem;
      display: grid;
      place-items: center;
      transition: all var(--trans-ani);
    }
    h4 {
      font-size: 18rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    p {
      font-size: 16rem;
    }
    article {
      display: flex;
      flex-direction: column;
      gap: 10rem;
    }
    article > div {
      display: flex;
    }
    article b {
      flex-basis: 6ch;
    }
    article i {
      flex: 1;
    }

    @media (hover: hover) {
      li > a:hover {
        background-color: var(--color-point);
        color: var(--color-white);
      }
      li > a:hover em {
        background-color: var(--color-white);
        color: var(--color-point);
      }
    }
  }

  @media (max-width: 1080px) {
    .result-lists {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767px) {
    .result-lists {
      gap: 15rem;
      li > a {
        padding: 20rem 20rem;
        font-size: 14rem;
        gap: 12rem;
      }
      article > div {
        flex-direction: column;
      }
      article b {
        flex-basis: auto;
      }
      h4 {
        font-size: 15rem;
      }
      p {
        font-size: inherit;
      }
      em {
        font-size: 12rem;
      }
    }
  }
}

.sub04.sp01 {
  .work-lists {
    display: grid;
    grid-template-columns: repeat(3, 380rem);
    justify-content: center;
    gap: 30rem;
  }
  .work-lists article {
    flex-basis: 360rem;
    display: flex;
    flex-direction: column;
    gap: 30rem;
    border: 1px solid #eee;
    padding: 40rem 30rem;
  }
  .work-lists figure {
    display: grid;
    place-items: center;
  }
  .work-lists figure img {
    width: 40%;
    border-radius: 5rem;
  }
  .work-lists hgroup {
    text-align: center;
  }
  .work-lists hgroup h4 {
    font-size: var(--fs22);
  }
  .work-lists hgroup p {
    margin-top: 10rem;
    font-size: 16rem;
    line-height: 1.6;
    color: #555555;
  }

  .work-lists2 {
    margin-top: 40rem;
    display: grid;
    grid-template-columns: 40% auto;
    gap: 35rem;
    border: 1px solid #eeeeee;
    padding: 20rem;
    ul {
      display: flex;
      flex-direction: column;
      gap: 20rem;
      padding-block: 20rem 40rem;
    }
    figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    hgroup {
      display: flex;
      flex-direction: column;
      gap: 5rem;
    }
    hgroup h4 {
      font-size: var(--fs22);
    }
    hgroup p {
      font-size: 16rem;
      line-height: 1.6;
      color: #555555;
      text-wrap-style: balance;
    }
  }

  @media (max-width: 1280px) {
    .work-lists {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 767px) {
    .work-lists {
      grid-template-columns: 1fr;
    }
    .work-lists2 {
      grid-template-columns: 1fr;
    }
  }
}
.thumbnail-wrap:hover {
  /* border: 3px solid yellow; */
  box-shadow: 0px 0px 0px 0px #ffd60a;
  transition: all 0.4s;
}

.thumbnail-wrap:hover {
  /* border: 3px solid yellow; */
  box-shadow: 0px 0px 0px 10px #ffd60a;
  transition: all 0.4s;
}

.info-row[data-board="detail"] img {
  display: none;
  visibility: hidden;
}

.info-item .info-row strong {
  position: relative;
  min-width: 80px;
}

.info-item .info-row strong:after {
  content: ":";
  position: absolute;
  right: 0;
}

.info-item {
  padding: 16px;
  margin-top: 0px;
}

.ko_board_list li {
  background-color: #f9f9f9;
  padding-inline: 24px;
}

.thumbnail-wrap {
  margin-top: 24px;
}