@charset "utf-8";

.contents { padding-bottom: 8rem; }

/* 제품소개 */
.sub-title { display: flex; align-items: center; gap:3.2rem; padding-bottom: 3rem; margin-bottom: 5.2rem; font-weight: 700; font-size: 2.8rem; border-bottom:8px solid #EEEEEE; }
.sub-title h3 { position: relative; font-weight: 800; font-size: 3.6rem; }
.sub-title span { position: relative; }
.sub-title span::before { content: ''; position: absolute; left: -1.6rem; top:50%; transform: translateY(-50%); width: 1px; height: 3.2rem; background: var(--main-black); }


.gallery-list ul { display: grid; grid-template-columns: repeat(7, 1fr); gap:2.4rem 1.6rem; }
.gallery-list li { aspect-ratio: 1/1; border: 1px solid var(--lite-gray); }
.gallery-list li img { width: 70%; height: 70%; margin:15%; object-fit: contain; }


.table-list table { width: 100%; table-layout: auto; }
.table-list th { padding: 2.6rem 1rem; background: #F5F5F5; font-size: 1.8rem; font-weight: 800; border-top:1px solid #DEDEDE; border-bottom:1px solid #DEDEDE; }
.table-list td { padding: .5rem 1rem; font-size: 1.7rem; font-weight: 400; border-top:1px solid #DEDEDE; border-bottom:1px solid #DEDEDE; text-align: center; line-height: 1.4; cursor: pointer; }
.table-list td img { height: 8rem; object-fit: contain; }
  .table-list .list-num { width: 8%; }
  .table-list .list-img { width: 16%; }
  .table-list .list-name { width: 20%; }
  .table-list .list-ext1 { width: 16%; }
  .table-list .list-ext2 { width: 20%; }
  .table-list .list-ext3 { width: 20%; }

.no-list { font-size: 1.7rem; text-align: center; color:var(--sub-black); }

/* 제품소개 팝업 */
.popup.popup-detail { max-width:620px; height:auto; left:50px; top:50px; pointer-events: none; cursor:move; }
.popup.popup-detail .popup-wrap { width:100%; position: relative; left:0; top:0; transform: none; height: auto; padding: 2.4rem 3rem 3rem; border-radius: 2rem; border:1px solid var(--deep-gray); box-shadow: 0 0 3rem rgba(0, 0, 0, 0.15); overflow: hidden; pointer-events:initial; }
.popup-detail .popup-title { height: 4rem; padding: 0; margin-bottom: 2.4rem; }
.popup-detail .popup-title .h3-wrap { display: flex; align-items: end; gap:1rem; }
.popup-detail .popup-title h3 { font-size: 2.4rem; font-weight: 800; }
.popup-detail .popup-title span { color:var(--sub-black); font-size: 2rem; }
.popup-detail .popup-title .popup-close { width: 4rem; height:4rem; text-indent: -99999px; overflow: hidden; padding-right: 0; }
.popup-detail .popup-title .popup-close::before { content: ''; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-45deg); width: 3rem; height: 1px; background: var(--main-black); }
.popup-detail .popup-title .popup-close::after { content: ''; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-135deg); width: 3rem; height: 1px; background: var(--main-black); }

.popup-detail .popup-content { max-height: 80vh; overflow-y: auto; }

.popup-detail .detail-info { display: flex; gap:3rem; }
.popup-detail .detail-info .detail-info-img { width: 22.5rem; height: auto; aspect-ratio: 1/1; cursor: pointer; }
.popup-detail .detail-info .detail-info-img img { height: 100%; object-fit: contain; object-position: top; }
.popup-detail .detail-info .detail-info-text { width: calc(100% - 25.5rem); }
.popup-detail .detail-info .detail-info-text p { margin-bottom: 4px; line-height: 1.4; font-size: 1.6rem; }
.popup-detail .detail-info .detail-info-text b { font-weight: 700; }
.popup-detail .detail-info .detail-info-default { padding: 4px; margin-bottom: 2px; border-bottom:1px solid var(--lite-gray); }
.popup-detail .detail-info .detail-info-default p:last-child { margin-bottom: 0; }
.popup-detail .detail-info .detail-info-add { padding: 4px; line-height: 1.4; font-size: 1.6rem; }

.popup-detail .detail-imgs { display: flex; gap:1.4rem; margin-top: 2rem; }
.popup-detail .detail-img-main { flex:4; aspect-ratio: 1/1; border:1px solid var(--deep-gray); }
.popup-detail .detail-img-main img { height: 100%; object-fit: contain; }
.popup-detail .detail-img-sub { flex:1; }
.popup-detail .detail-img-sub ul { height: 100%; }
.popup-detail .detail-img-sub li { margin-bottom: .2rem; aspect-ratio: 1/1; border:1px solid var(--lite-gray); opacity: 0.6; cursor: pointer; }
.popup-detail .detail-img-sub li:last-child { margin-bottom: 0; }
.popup-detail .detail-img-sub img { height: 100%; object-fit: contain; }
.popup-detail .detail-img-sub li.active { border:1px solid var(--deep-gray); opacity: 1; }

/* 회사개요 */
.about h4 { position: relative; padding-left: 3.2rem; margin-bottom: 2rem; font-size: 2.8rem; font-weight: 700; }
.about h4::before { content: ''; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; border:4px solid var(--main-black); border-top-color:var(--point-color); border-left-color:var(--point-color); }
.about .h4-wrap { padding:0 4rem; }

.about-1 { z-index: 1; position: relative; background-color: #F5F5F5; padding: 4rem; margin-bottom: 6rem; border-radius: 10px; position: relative; overflow: hidden; border:1px solid var(--lite-gray); }
.about-1::after { z-index: -1; content: ''; display: block; position: absolute; bottom:3.6rem; right:8rem; width:21rem; aspect-ratio: 384/319; background: url('/resources/img/common/logo_mobile.svg') no-repeat center/contain; filter: saturate(0) brightness(0.2); }
.about-1 p { font-size: 1.7em; line-height: 1.6;}
.about-1 b { font-weight: 700; }

.about-2 { z-index: 1; position: relative; }

.about-2 .contact { z-index: 3; position: absolute; right:6rem; bottom:0; transform: translateY(10%); border:1px solid var(--lite-gray); background-color: #fff; padding: 2.4rem 3rem; border-radius: 1.2rem; }
.about-2 .contact ul { display: flex; flex-direction: column; gap:.4rem; }
.about-2 .contact ul li { display: flex; font-size: 1.7rem; line-height: 1.4; }
.about-2 .contact ul li span { position: relative; display: inline-block; margin-right:1rem; padding-right:1rem; line-height: 1.4; }
.about-2 .contact ul li span::after { content: ''; position: absolute; right:0; top:50%; transform: translateY(-50%); background: white; width: 1px; height: 1.4rem; }
.about-2 .contact ul li b { min-width: 7rem; font-weight: 400; color: #333; }
.about-2 .contact ul li:first-child { margin-bottom: 15px; font-size: 1.8rem; font-weight: 700; align-items: center; }
.about-2 .contact ul li:first-child b { min-width: auto; margin-right: 5px; }

#daumRoughmapContainer1758788960173 { width: 100% !important; height: 400px !important; border-radius: 8px; overflow: hidden;}



@media screen and (max-width:1024px){
  .sub-title { font-size: 2.6rem; }
  .sub-title h3 { font-size: 3rem; }
  
  .about .h4-wrap { padding: 0 2.4rem; }
  .about h4 { font-size: 2.4rem; }
  .about-1 { padding:3rem; }
  .about-1::after { right:4rem; }
  .about-2 { margin-bottom: 4rem; }
  .about-2 .contact { transform: translateY(40%); right:1rem; }

  .gallery-list ul { grid-template-columns: repeat(5, 1fr); }

  .table-list td { padding: 0 1rem; }
}

@media screen and (max-width:768px){
  .sub-title { font-size: 2.2rem; }
  .sub-title h3 { font-size: 2.8rem; }
  
  .about .h4-wrap { padding: 0 2rem; }
  .about-1 { padding:2.4rem; }
  .about-1::after { opacity: 0.4; bottom: 2rem; }
  #daumRoughmapContainer1758788960173 { height: 320px !important; }
  .about-2 .contact { position: relative; transform: none; right:0; }

  .table-list th { padding: 20px 5px; font-size: 14px; }
  .table-list .list-ext2 { display: none; }
  .table-list .list-ext3 { display: none; }

  .popup.popup-detail { width: 90%; left:50% !important; transform: translateX(-50%) !important; }
  /* .popup.popup-detail::before { z-index: -1; content: ''; position: fixed; left:50%; top:50%; transform: translate(-50%, -50%); display: block; width: 100dvw; height: 100dvh; background: rgba(0, 0, 0, 0.6); pointer-events: initial; } */
  .popup-detail .detail-info .detail-info-img { width: 18rem; }
  .popup-detail .detail-info .detail-info-text { width: calc(100% - 21rem); }
}

@media screen and (max-width:600px){
  .gallery-list ul { grid-template-columns: repeat(4, 1fr); gap: 2rem 1rem; }
}

@media screen and (max-width:500px){
  .gallery-list ul { grid-template-columns: repeat(3, 1fr); }
  
  .table-list .list-num { width: 50px; }
  .table-list .list-img { width: 160px; }
  .table-list .list-ext1 { display: none; }

  .popup-detail .detail-info { gap:2rem; }
  .popup-detail .detail-info .detail-info-img { width: 12rem; }
  .popup-detail .detail-info .detail-info-text { width: 14rem; }
}