@charset "UTF-8";
@import url(common.css);

/* ------------------------------------------------------------------------- */
/* CSS Table of Contents
/* ------------------------------------------------------------------------- */
/*
0. Common

1. 회사소개

2. 모델

3. 주문과정

4. 시공제작사례

5. 이벤트/공지사항

6. 찾아오시는 길



/* ------------------------------------------------------------------------- */
/* 0. Common
/* ------------------------------------------------------------------------- */
#container {
  padding: 100px 0;
  transition: padding 0.3s ease;
}


/***** section *****/
.sec_header {
  padding-bottom: 40px;
  margin-bottom: 120px;
  position: relative;
}
.sec_header::before {content: "";
  width: 100vw; height: 1px;
  background-color: var(--gray-20);
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
}
.sec_tit span {
  display: block;
  margin-bottom: 4px;
  font-weight: 500; font-size: 18px; line-height: 1.6;
}
.sec_cont .tit {font-size: 20px;}


/***** section - visual *****/
.sec.visual {
  padding-bottom: 0;
  margin-bottom: 60px;
}
.sec.visual .inner {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 316px;
  transition: height 0.3s ease;
}
.sec.visual .sec_header {
  padding-bottom: 80px;
  margin-bottom: 0;
}
.sec.visual .sec_header::before {display: none;}
.sec.visual .sec_tit {font-size: 52px;}
.sec.visual .bg {
  width: 100%; height: 680px;
  position: relative;
  transition: height 0.3s ease;
  overflow: hidden;
}
.sec.visual .bg.type2 {height: 500px;}
.sec.visual .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; left: 0; top: 0;
  transform: scale(1.2);
  transition: transform 3s cubic-bezier(0.33, 1, 0.68, 1) 1s;
}
.sec.visual.active .bg img {transform: scale(1);}


/***** section - article *****/
.sec.artc {overflow: hidden;}
.sec.artc .sec_header {
  padding-bottom: 0;
  margin-bottom: 40px;
}
.sec.artc .sec_header::before {display: none;}
.sec.artc .sec_tit {font-size: 40px;}


/***** list *****/
.sec [class*="_list"] {
  display: flex; flex-wrap: wrap; gap: 80px 40px;
  width: 100%;
  transition: flex 0.3s ease, gap 0.3s ease;
}
.sec [class*="_list"] li a {
  display: flex; flex-direction: column; gap: 24px;
  width: 100%;
  transition: gap 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
}
.sec [class*="_list"] .txt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  transition: gap 0.3s ease;
}
.sec [class*="_list"] .tit {margin-bottom: 0;}
.sec [class*="_list"] .desc {
  display: block;
  color: var(--text-sub1);
}
.sec [class*="_list"] .img {
  width: 100%; height: auto;
  position: relative;
  transition: width 0.3s ease, height 0.3s ease;
  overflow: hidden;
}
.sec [class*="_list"] .img img {
  width: 100%; height: 100%; 
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.sec [class*="_list"] li:hover .img img {transform: scale(1.06);}


/***** etc. *****/
.price {font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--text-main);}
.price strong {
  display: inline-block;
  margin-right: 3px;
  font-weight: 700; font-size: 24px; vertical-align: -2px;
}
.date {
  display: block;
  color: var(--text-sub2);
}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  #container {padding: 60px 0;}

  /* section */
  .sec_header {
    padding-bottom: 32px;
    margin-bottom: 64px;
  }
  .sec_tit {font-size: 36px;}
  .sec_cont .tit {margin-bottom: 8px;}

  /* section - visual */
  .sec.visual .inner {height: 360px;}
  .sec.visual .sec_header {padding-bottom: 60px;}
  .sec.visual .sec_tit {font-size: 44px;}
  .sec.visual .bg {height: 400px;}
  .sec.visual .bg.type2 {height: 400px;}

  /* section - article */
  .sec.artc .sec_header {margin-bottom: 28px;}
  .sec.artc .sec_tit {font-size: 32px;}

  /* list */
  .sec [class*="_list"] {gap: 60px 32px;}
  .sec [class*="_list"] li {width: calc(50% - 16px);}
  .sec [class*="_list"] .txt {gap: 12px;}
  .sec [class*="_list"] li:hover .img img {transform: scale(1);}
  
  /* etc. */
  .date {font-size: 15px;}
}

@media (max-width : 768px) {
  #container {padding: 54px 0;}
  
  /* section */
  .sec:first-child {padding-top: 24px;}
  .sec_header {
    padding-bottom: 24px;
    margin-bottom: 40px;
  }
  .sec_tit {font-size: 28px;}
  .sec_tit span {font-size: 16px;}
  .sec_cont .tit {font-size: 18px;}

  /* section - visual */
  .sec.visual {
    display: flex; flex-direction: column; justify-content: flex-end;
    height: calc(100dvh - 118px); max-height: 700px;
    margin-bottom: 54px;
  }
  .sec.visual .inner {height: auto;}
  .sec.visual .sec_header {padding-bottom: 40px;}
  .sec.visual .sec_tit {font-size: 32px;}
  .sec.visual .bg {height: 240px;}
  .sec.visual .bg.type2 {height: 240px;}

  /* section - article */
  .sec.artc .sec_header {margin-bottom: 24px;}
  .sec.artc .sec_header.type2 {flex-direction: column; align-items: flex-start; gap: 16px;}
  .sec.artc .sec_tit {font-size: 28px;}

  /* list */
  .sec [class*="_list"] {flex-direction: column; gap: 56px 16px;}
  .sec [class*="_list"] li {width: 100%;}
  .sec [class*="_list"] li a {gap: 20px;}
  
  /* etc. */
  .price strong {font-size: 18px; vertical-align: -1px;}
  .date {font-size: 14px;}
}





/* ------------------------------------------------------------------------- */
/* 1. 회사소개
/* ------------------------------------------------------------------------- */
.about_housing {
  display: flex; gap: 40px;
  transition: gap 0.3s ease;
}
.about_housing li {
  width: 100%;
  padding: 36px 40px 36px 0;
  border-top: 1px solid var(--gray-20);
  transition: padding 0.3s ease;
}
.about_housing .num {
  display: block;
  margin-bottom: 12px;
  font-size: 20px; line-height: 1.6; color: var(--disabled);
  transition: margin 0.3s ease;
}


/***** 협력사 *****/
.partner_company {
  display: flex;
  border-top: 1px solid var(--gray-20);
  border-bottom: 1px solid var(--gray-20);
  position: relative;
}
.partner_company::before {content: "";
  width: 1px; height: 100%;
  background-color: var(--gray-20);
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
}
.partner_company .img {
  display: flex; align-items: center; justify-content: center;
  width: 50%;
  transition: width 0.3s ease;
}
.partner_company .img img {width: auto; height: 40px;}
.partner_company .txt {
  width: 50%;
  padding: 52px;
  transition: width 0.3s ease, padding 0.3s ease;
}


/***** 본사 및 주택 전시장 *****/
.location_map {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 500px;
  background-color: var(--gray-10);
  transition: height 0.3s ease;
}
.location_map iframe {width: 100%; height: 100%; border: 0;}


/***** 주택전시장 예약 및 문의하기 *****/
.support_service {
  display: flex; align-items: center; gap: 24px;
  transition: gap 0.3s ease;
}
.support_service .booking,
.support_service .contact {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; height: 360px;
  padding: 52px;
  background-repeat: no-repeat; background-position: center; background-size: cover;
  transition: height 0.3s ease, padding 0.3s ease;
}
.support_service .booking {background-image: url(../img/sub/support_booking.png);}
.support_service .contact {background-image: url(../img/sub/support_contact.png);}
.support_service .tit {
  margin-bottom: 28px;
  font-weight: 700; font-size: 28px; line-height: 1.5; color: var(--gray-0);
  transition: margin 0.3s ease;
}
.support_service .btn {width: fit-content;}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .about_housing li {padding: 32px 0px;}
  .about_housing .num {margin-bottom: 10px;}

  /* 협력사 */
  .partner_company .img img {height: 36px;}
  .partner_company .txt {padding: 44px;}

  /* 본사 및 주택 전시장 */
  .location_map {height: 380px;}

  /* 주택전시장 예약 및 문의하기 */
  .support_service {gap: 20px;}
  .support_service .booking,
  .support_service .contact {height: 280px;}
  .support_service .tit {
    margin-bottom: 20px;
    font-size: 24px;
  }
}

@media (max-width : 768px) {
  .about_housing {flex-direction: column; gap: 16px;}
  .about_housing li {padding: 28px 0px;}
  .about_housing .num {
    margin-bottom: 4px;
    font-size: 18px;
  }

  /* 협력사 */
  .partner_company {
    flex-direction: column; 
    padding-top: 48px;
    border-bottom: 0;
  }
  .partner_company::before {display: none;}
  .partner_company .img {
    justify-content: flex-start;
    width: 100%;
  }
  .partner_company .img img {height: 32px;}
  .partner_company .txt {
    width: 100%;
    padding: 44px 0 28px 0;
  }

  /* 본사 및 주택 전시장 */
  .location_map {height: 232px;}

  /* 주택전시장 예약 및 문의하기 */
  .support_service {flex-direction: column; gap: 16px;}
  .support_service .booking,
  .support_service .contact {
    height: 240px;
    padding: 24px;
  }
  .support_service .tit {
    margin-bottom: 16px;
    font-size: 20px;
  }
}





/* ------------------------------------------------------------------------- */
/* 2. 모델
/* ------------------------------------------------------------------------- */
.model_list {gap: 80px 40px;}
.model_list li {width: calc(50% - 20px);}
.model_list .img {aspect-ratio: 34 / 21;}
.model_list .txt .flexCenter {gap: 8px;}
.model_list .txt .tit {font-weight: 700; font-size: 24px; line-height: 1.5;}
.model_list .txt .desc {
  margin-top: -12px;
  transition: margin 0.3s ease;
}
ul.model_list .target.active .fadeUp {animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);}

/* 모델 리스트 - 슬라이드 */
.model_list.swiper li {width: auto;}
.model_list.swiper .img {
  width: 580px; 
  aspect-ratio: 29/18;
}


/***** 모델 배너 *****/
.model_banner {
  display: flex; align-items: center;
  width: 100%; height: 880px;
  background: url(../img/sub/model_banner.png) no-repeat center / cover;
  transition: height 0.3s ease;
}
.model_banner .inner {
  display: flex; align-items: flex-start; flex-direction: column; gap: 40px;
  transition: gap 0.3s ease;
}
.model_banner .txt {
  display: flex; align-items: flex-start; flex-direction: column; gap: 8px;
  font-size: 20px; line-height: 1.6; color: var(--gray-0);
}
.model_banner .tit {font-weight: 700; font-size: 44px; line-height: 1.5;}
.model_banner .price {font-size: 20px; color: var(--gray-0);}
.model_banner .price strong {
  margin-right: 4px;
  font-size: 28px;
}


/***** 모델 상세 *****/
.sec.detail {
  padding-bottom: 0;
  margin-bottom: 60px;
}
.sec.detail .inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: 48px;
}
.sec.detail .sec_header {
  padding-bottom: 0;
  margin-bottom: 0;
}
.sec.detail .sec_header::before {display: none;}
.sec.detail .sec_tit {font-size: 64px;}
.sec.detail .sec_cont {min-width: 50%;}
.detail_summary {
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  padding-top: 12px;
  transition: gap 0.3s ease, padding 0.3s ease;
}
.detail_summary .flex {
  gap: 80px;
  transition: gap 0.3s ease;
}
.detail_summary dl {display: flex; flex-direction: column; gap: 4px;}
.detail_summary dt {color: var(--text-sub2);}
.detail_summary dd {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  font-weight: 500; font-size: 20px; color: var(--text-main);
}
.detail_summary dd span {position: relative;}
.detail_summary dd span::after {content: "";
  width: 1px; height: 12px;
  background-color: var(--gray-20);
  position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%);
}
.detail_summary dd span:last-child::after {display: none;}
.detail_summary .price {font-size: 20px;}
.detail_summary .price strong {
  margin-right: 4px;
  font-size: 32px; vertical-align: -3px;
}
.sec.detail .bg {
  width: 100%; height: 50.6vw; max-height: 972px; min-height: 600px;
  background-color: var(--gray-90);
  position: relative;
  transition: height 0.3s ease;
  overflow: hidden;
}
.sec.detail .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  transition: transform 3s cubic-bezier(0.33, 1, 0.68, 1) 1s;
}
.sec.detail.active .bg img {transform: scale(1);}

/* 설명 */
.detail_desc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 52px;
  margin-top: -24px;
  transition: gap 0.3s ease, margin 0.3s ease;
}

/* 내부 인테리어 */
.detail_img li {width: auto; height: 560px;}
.detail_img li img {
  height: 100%;
  object-fit: cover;
}

/* 시공 스펙 */
.detail_specs {
  display: flex; align-items: flex-start; gap: clamp(20px ,5.2vw, 100px);
  width: 100%;
  transition: gap 0.3s ease;
}
.specs_basic {
  width: 64%;
  transition: width 0.3s ease;
}
.specs_option {
  width: calc(36% - clamp(20px ,5.2vw, 100px));
  transition: width 0.3s ease;
}
.specs_list {
  gap: 0 !important;
  padding-top: 20px;
  border-top: 1px solid var(--gray-20);
  transition: padding 0.3s ease;
}
.specs_list li {
  width: calc(100%/3);
  padding: 32px 40px 32px 0;
  transition: width 0.3s ease, padding 0.3s ease;
}
.specs_list li .tit {margin-bottom: 4px !important;}
.specs_list li .tit.asterisk {
  margin-bottom: 0 !important;
  font-size: 16px;
}
.specs_basic .specs_list li {
  width: 50%;
  padding-top: 24px; padding-bottom: 24px;
}
.specs_option .specs_list li {
  width: 100%;
  padding-top: 24px; padding-bottom: 24px;
}

/* 도면 */
.detail_drawing {
  border: 1px solid var(--gray-20);
  overflow: hidden;
}
.detail_drawing li {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 20px;
}
.detail_drawing li img {
  width: auto; height: 520px;
  transition: height 0.3s ease;
}

/* 문의하기 */
.sticky_bar {
  padding: 12px 0;
  background-color: var(--gray-0);
  position: sticky; z-index: 20;
}
.sticky_bar.btm {
  bottom: -68px;
  transition: bottom 0.4s ease;
}
.sticky_bar.btm::before {content: "";
  width: 100%; height: 1px;
  background-color: var(--gray-20);
  position: absolute; left: 0; top: 0;
}
.sticky_bar.btm.active {bottom: 0;}
.sec + .sticky_bar.btm {margin-top: 100px; margin-bottom: -100px;}
.sticky_bar.absolute {position: absolute;}
.sticky_bar .inner {display: flex; align-items: center; justify-content: space-between;}
.sticky_bar .tit {font-weight: 700; font-size: 28px; line-height: 1.5; color: var(--text-main);}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .model_list .txt .desc {margin-top: -8px;}
  .model_list.swiper .img {width: 348px;}

  /* 모델 배너 */
  .model_banner {height: 540px;}
  .model_banner {height: 54vw;}
  .model_banner .txt {font-size: 16px;}
  .model_banner .tit {font-size: 40px;}
  .model_banner .price {font-size: 16px;}
  .model_banner .price strong {font-size: 24px;}

  /* 모델 상세 */
  .sec.detail .inner {
    flex-direction: column; gap: 32px;
    padding-bottom: 40px;
  }
  .sec.detail .sec_tit {font-size: 52px;}
  .detail_summary {
    gap: 28px;
    padding-top: 0;
  }
  .detail_summary .flex {gap: 60px;}
  .detail_summary .price {font-size: 20px;}
  .detail_summary .price strong {font-size: 28px; vertical-align: -2px;}
  .sec.detail .bg {
    height: auto; min-height: 240px;
    aspect-ratio: 128/79;
  }
  .sec.detail .bg img {min-height: 240px;}
  .detail_desc {
    gap: 48px;
    margin-top: -16px;
  }
  .detail_img li {height: 65vw; max-height: 560px; min-height: 252px;}
  .detail_specs {flex-direction: column; gap: 120px;}
  .specs_basic, 
  .specs_option {width: 100%;}
  .specs_list {padding-top: 16px;}
  .specs_list li {
    width: 50% !important;
    padding: 24px 24px 24px 0;
  }
  .specs_list li:nth-of-type(2n) {padding: 24px 0 24px 24px;}
  .specs_option .specs_list li {width: 50%;}
  .detail_drawing li img {height: 56.5vw; max-height: 520px; min-height: 220px;}
  .sticky_bar.btm {bottom: -72px;}
  .sec + .sticky_bar {margin-top: 60px; margin-bottom: -60px;}
  .sticky_bar .tit {font-size: 24px;}
  .sticky_bar .btn_box {gap: 10px;}
}

@media (max-width : 768px) {
  .model_list .txt .tit {font-size: 18px;}
  .model_list.swiper .img {width: 308px;}

  /* 모델 배너 */
  .model_banner {height: 61.5vw; min-height: 240px;}
  .model_banner .inner {gap: 16px;}
  .model_banner .txt {gap: 0;}
  .model_banner .tit {font-size: 28px;}
  .model_banner .desc {display: none;}
  .model_banner .price strong {
    margin-right: 3px;
    font-size: 18px; 
  }

  /* 모델 상세 */
  .sec.detail {
    padding-top: 120px;
    margin-bottom: 54px;
  }
  .sec.detail .inner {
    gap: 24px;
    padding-bottom: 32px;
  }
  .sec.detail .sec_tit {font-size: 40px;}
  .detail_summary {gap: 16px;}
  .detail_summary .flex {flex-direction: column; gap: 16px;}
  .detail_summary dl {gap: 2px;}
  .detail_summary dd {font-size: 16px;}
  .detail_summary .price {font-size: 16px;}
  .detail_summary .price strong {font-size: 24px;}
  .detail_desc {
    gap: 40px;
    margin-top: -12px;
  }
  .detail_specs {gap: 108px;}
  .specs_list {
    flex-direction: row !important; gap: 12px 0 !important;
    padding-top: 12px;
  }
  .specs_list li {padding: 16px 16px 16px 0;}
  .specs_list li:nth-of-type(2n) {padding: 16px 0 16px 16px;}
  .specs_list .tit.asterisk {width: calc(100vw - 80px); word-break: keep-all;}
  .specs_basic .specs_list li,
  .specs_option .specs_list li {padding-top: 16px; padding-bottom: 16px;} 
  .sec + .sticky_bar {margin-top: 54px; margin-bottom: -54px;}
  .sticky_bar .inner {justify-content: center;}
  .sticky_bar .tit {display: none;}
  .sticky_bar .btn_box {width: 100%;}
  .sticky_bar .btn_box .btn {width: calc(50% - 4px);}
}





/* ------------------------------------------------------------------------- */
/* 3. 주문과정
/* ------------------------------------------------------------------------- */
/***** navigation *****/
.sticky_bar.top {
  margin-top: -60px; margin-bottom: 60px;
  border-bottom: 1px solid var(--gray-20);
  top: 0; 
  transition: top 0.4s ease;
}
.sticky_bar .anchor {
  display: flex; align-items: center; gap: 44px;
  transition: gap 0.3s ease;
}
.sticky_bar .anchor a {
  line-height: 22px; text-align: center; color: var(--text-sub2);
  transition: color 0.3s ease;
}
.sticky_bar .anchor a.active {font-weight: 500; color: var(--text-main);}

/* 스크롤 동작 */
#wrap.scroll_down .sticky_bar.top {top: 0;}
#wrap.scroll_up .sticky_bar.top {top: 92px;}


/***** 주문과정 *****/
.order_process {
  display: flex; flex-direction: column; gap: 80px;
  transition: gap 0.3s ease;
}
.order_process li {
  padding: 48px 0;
  position: relative;
  transition: gap 0.3s ease, padding 0.3s ease;
}
.order_process li::before {content: "";
  width: 100%; height: 1px;
  background-color: var(--gray-20);
  position: absolute; left: 0; top: 0;
}
.order_process li .flex {justify-content: space-between; gap: 100px;}
.order_process .txt {
  flex-shrink: 0;
  width: 44%;
  transition: width 0.3s ease;
}
.order_process .tit {
  display: flex; flex-direction: column; gap: 20px;
  font-size: 24px;
  transition: gap 0.3s ease;
}
.order_process .tit span {font-weight: 700;}
.order_process p {transition: margin 0.3s ease;}
.order_process p + p {margin-top: 20px;}
.order_process .img {
  width: 100%; max-width: 680px;
  transition: width 0.3s ease;
}
.order_process .img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.order_process li::after {content: "";
  width: 0; height: 1px;
  background-color: var(--gray-100);
  position: absolute; left: 0; top: 0;
  transition: none;
}

/* is-reading */
.order_process li.is-reading::after {
  width: 100%;
  transition: width 1s ease;
}


/***** 배너 *****/
.process_banner {
  display: flex; align-items: center;
  width: 100%; height: 580px;
  color: var(--gray-0);
  background: url(../img/sub/about_bg.png) no-repeat center / cover;
  position: relative;
  transition: height 0.3s ease;
}
.process_banner::before {content: "";
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.32);
  position: absolute; left: 0; top: 0;
}
.process_banner .inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  transition: gap 0.3s ease;
}
.process_banner .tit {font-weight: 700; font-size: 44px; line-height: 1.5;}


/***** MediaQuery *****/
@media (max-width : 1280px) {
  .sticky_bar .anchor {gap: 20px;}
}

@media (max-width : 1024px) {
  .sticky_bar.top {margin-bottom: 40px;}
  #wrap.scroll_up .sticky_bar.top {top: 80px;}

  /* 주문과정 */
  .order_process {gap: 60px;}
  .order_process li {padding: 32px 0;}
  .order_process li .flex {gap: 40px;}
  .order_process .txt {width: calc(60% - 40px);}
  
  /* 배너 */
  .process_banner {height: 540px;}
  .process_banner .inner {gap: 24px;}
  .process_banner .tit {font-size: 32px;}
}

@media (max-width : 768px) {
  #wrap.scroll_up .sticky_bar.top {top: 64px;}

  /* 주문과정 */
  .order_process {gap: 48px;}
  .order_process li {padding: 24px 0;}
  .order_process li .flex {flex-direction: column; gap: 28px;}
  .order_process .txt {width: 100%;}
  .order_process .tit {
    gap: 16px;
    margin-bottom: 4px;
    font-size: 20px;
  }
  .order_process p + p {margin-top: 8px;}
  .order_process .img {max-width: 100%; max-height: 340px;}
  .order_process .img img {max-height: 340px;}
  
  /* 배너 */
  .process_banner {height: 500px;}
  .process_banner .inner {gap: 16px;}
  .process_banner .tit {font-size: 28px;}
}





/* ------------------------------------------------------------------------- */
/* 4. 시공제작사례
/* ------------------------------------------------------------------------- */
.project_list li {width: calc((100% - 80px)/3);}
.project_list .img {aspect-ratio: 11 / 7;}
.project_list .flexCol {gap: 4px;}
.project_list .txt .tit {font-weight: 700; font-size: 24px; line-height: 1.5;}


/***** 프로젝트 상세 *****/
.sec.detail .inner.type2 {
  flex-direction: column; gap: 48px;
  transition: padding 0.3s ease, gap 0.3s ease;
}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .project_list .img {aspect-ratio: 34 / 21;}
  .sec.detail .inner.type2 {gap: 32px;}
}

@media (max-width : 768px) {
  .project_list .txt .tit {font-size: 18px;}
  .sec.detail .inner.type2 {gap: 24px;}
}





/* ------------------------------------------------------------------------- */
/* 5. 이벤트/공지사항
/* ------------------------------------------------------------------------- */
.sec article.artc {
  padding-bottom: 160px;
  position: relative;
  transition: padding 0.3s ease;
}
.sec article.artc:last-child {padding-bottom: 0;}
.sec article.artc + article.artc {padding-top: 120px;}
.sec article.artc + article.artc::before {content: "";
  width: 100vw; height: 1px;
  background-color: var(--gray-20);
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
}
.sec article.artc .sec_header {
  padding-bottom: 0;
  margin-bottom: 40px;
}
.sec article.artc .sec_header::before {display: none;}
.sec article.artc .sec_tit {font-size: 32px;}

.tabCont_board0,
.tabCont_board1 {display: block;}


/***** 이벤트 *****/
.event_list li {width: calc((100% - 80px)/3);}
.event_list .img {aspect-ratio: 1 / 1;}
.event_list .img .ended {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-weight: 500; font-size: 24px; text-align: center; color: var(--gray-0);
  background-color: rgba(0,0,0,0.6);
  position: absolute; left: 0; top: 0;
}
.event_list .txt .tit {
  display: -webkit-box; -webkit-line-clamp: 2;
  font-weight: 400;
}


/***** 공지사항 *****/
.notice_list {flex-direction: column; gap: 0 !important;}
.notice_list li {width: 100% !important;}
.notice_list li a {
  flex-direction: row !important; align-items: center; justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid var(--gray-20);
}
.notice_list li:first-child a {border-top: 1px solid var(--gray-20);}
.notice_list .tit {
  display: -webkit-box;
  font-weight: 400;
}

/* hover */
.notice_list li:hover a {
  padding-right: 16px; padding-left: 16px;
  background-color: var(--main-surface);
}
.notice_list li:hover .tit {font-weight: 500;}


/***** 상세페이지 *****/
.board_box {display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(40px, 4.16vw, 80px);}
.board_header {
  display: flex; flex-direction: column; align-items: flex-start;
  width: calc(46% - clamp(40px, 4.16vw, 80px));
  position: sticky; top: 80px;
  transition: width 0.3s ease, top 0.3s ease;
}
.board_header .tit {
  margin-bottom: 6px;
  font-weight: 700; font-size: 28px; line-height: 1.5;
}
.board_header .date {margin-bottom: 20px;}
.board_cont {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  width: 54%;
  transition: width 0.4s ease;
}
.board_cont img {width: 100%;}
.board_box + .btn_box {
  margin-top: 160px;
  transition: margin 0.3s ease;
}

/* 공지사항 상세 */
.board_box.type2 {
  flex-direction: column; gap: 40px;
  width: 100%; max-width: 750px;
}
.board_box.type2 .board_header {
  width: 100%;
  position: relative; top: 0;
}
.board_box.type2 .board_cont {width: 100%;}

/* 스크롤 동작 */
#wrap.scroll_up .board_header {top: 172px;}
#wrap.scroll_up .board_box.type2 .board_header {top: 0;}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  .sec article.artc {padding-bottom: 120px;}
  .sec article.artc:first-child {padding-top: 16px;}
  .sec article.artc + article.artc {padding-top: 80px;}
  .sec article.artc .sec_header {margin-bottom: 28px;}
  .sec article.artc .sec_tit {font-size: 28px;}
  .sec .artc[class*="tabCont_"] {padding-top: 80px;}
  .sec .artc[class*="tabCont_"] + .artc[class*="tabCont_"]::before {display: none;}

  .tabCont_board0,
  .tabCont_board1 {display: none;}
  .tabCont_board0.active,
  .tabCont_board1.active {display: block;}

  .sec_cont .sticky_bar.top {
    margin-top: -64px; margin-bottom: 0;
    border-bottom: 0;
  }
  .sec_cont .sticky_bar.top::after {content: "";
    width: 100vw; height: 1px;
    background-color: var(--gray-20);
    position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%);
  }

  /* 이벤트 */
  .event_list .txt .tit {font-size: 18px;}
  
  /* 공지사항 */
  .notice_list li a {
    padding: 32px 24px;
    border-left: 1px solid var(--gray-20); border-right: 1px solid var(--gray-20);
  }
  .notice_list .tit {font-size: 18px;}
  .notice_list li:hover a {
    padding: 32px 24px;
    background-color: transparent;
  }
  .notice_list li:hover .tit {font-weight: 400;}

  /* 상세페이지 */
  .board_header {
    width: calc(38% - clamp(40px, 4.16vw, 80px));
    top: 40px;
  }
  .board_header .tit {font-size: 24px;}
  .board_box.type2 .board_header .tit {font-size: 28px;}
  .board_cont {width: 62%;}
  .board_box + .btn_box {margin-top: 120px;}
  #wrap.scroll_up .board_header {top: 120px;}
}

@media (max-width : 768px) {
  .sec article.artc {padding-bottom: 80px;}
  .sec article.artc:last-child {padding-top: 0;}
  .sec article.artc + article.artc {padding-top: 40px;}
  .sec article.artc .sec_header {margin-bottom: 24px;}
  .sec article.artc .sec_tit {font-size: 24px;}
  .sec .artc[class*="tabCont_"] {padding-top: 40px;}
  .sec_cont .sticky_bar.top {margin-top: -40px;}
  
  /* 이벤트 */
  .event_list .txt {gap: 4px !important;}
  
  /* 공지사항 */
  .notice_list li a {
    flex-direction: column !important; align-items: flex-start; gap: 0px !important;
    padding: 28px 24px;
  }
  .notice_list .tit {font-size: 16px;}
  .notice_list li:hover a {padding: 28px 24px;}

  /* 상세페이지 */
  .board_box {flex-direction: column;}
  .board_header {
    width: 100%;
    position: initial; top: 0;
  }
  .board_header .tit {font-size: 20px;}
  .board_box.type2 .board_header .tit {font-size: 20px;}
  .board_header .date {margin-bottom: 12px;}
  .board_cont {width: 100%;}
  .board_box + .btn_box {margin-top: 60px;}
  #wrap.scroll_up .board_header {top: 0;}
}





/* ------------------------------------------------------------------------- */
/* 6. 찾아오시는 길
/* ------------------------------------------------------------------------- */
/***** 본사 및 주택 전시장 *****/
.sec .location .flex {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  width: 100%;
  transition: gap 0.3s ease, padding 0.3s ease;
}
.sec .location.artc .sec_header {
  flex-direction: column; align-items: flex-start; gap: 12px;
  margin-bottom: 0;
}
.sec .location .map {
  flex-shrink: 0;
  width: 60%; max-width: 820px;
  transition: width 0.3s ease, max-width 0.3s ease;
}
.sec .location .map .location_map {height: 460px;}


/***** 자체 공장 *****/
.sec .factory_list {gap: 24px;}
.sec .factory_list li {
  display: flex; flex-direction: column; gap: 24px;
  width: calc((100% - 48px)/3); 
  transition: gap 0.3s ease;
}
.sec .factory_list .img {
  max-height: 400px;
  aspect-ratio: 3 / 2;
}
.sec .factory_list .img img {max-height: 400px;}
.sec .factory_list .txt {gap: 4px;}
.sec .factory_list .txt .tit {font-weight: 700;}

.sec .factory_list li:hover .img img {transform: scale(1);}


/***** MediaQuery *****/
@media (max-width : 1024px) {
  /* 본사 및 주택 전시장 */
  .sec .location .map {width: 54%; max-width: 520px;}
  .sec .location .map .location_map {height: 320px;}

  /* 자체 공장 */
  .sec .factory_list {gap: 20px;}
}

@media (max-width : 768px) {
  /* 본사 및 주택 전시장 */
  .sec .location .flex {flex-direction: column; gap: 32px;}
  .sec .location .sec_header {gap: 6px;}
  .sec .location .map {width: 100%; max-width: 100%;}
  .sec .location .map .location_map {
    height: auto; max-height: 400px;
    aspect-ratio: 3 / 2;
  }

  /* 자체 공장  */
  .sec .factory_list {flex-direction: column; gap: 48px;}
  .sec .factory_list li {
    gap: 20px;
    width: 100%;
  }
}