@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* reset */
*{margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

body{font-family: 'Pretendard', sans-serif;}
.wrap{width: 100%;}

/* HEDEAR */
header {width: 100%;margin: 0 auto;height: 72px;align-items: center; z-index: 100; background-color: transparent;transition: background-color 0.3s ease;}




/* 스크롤 시 로고만 검정으로 변경 */
header .innerHeader {width: 85%;;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;height: 72px;position: relative;}
header .innerHeader .menu { display: flex;gap: 40px;list-style: none;height: 100%;align-items: center}
header .innerHeader .menu li a {font-size: 16px;font-weight: 500;transition: 0.3s;}
.menu li a:hover {color: #a3e635;}

/* 햄버거 버튼 스타일 */
.menu-toggle {display: none;flex-direction: column;cursor: pointer;width: 30px;height: 22px;justify-content: space-between;}
.menu-toggle span {height: 3px;background: black;border-radius: 3px;transition: 0.3s;}






/* 주요내용 */
.equipment-detail {padding: 80px 20px;background-color: #fff;color: #222;}
.equipment-detail .inner {max-width: 1200px;margin: 0 auto;}

.textWrap h2 {font-size: 24px;font-weight: 600;margin-bottom: 10px;}
.textWrap .sub {font-size: 16px;color: #666;line-height: 1.6;}

.detailWrap {display: flex;gap: 40px;margin-top: 40px;flex-wrap: wrap;}

.imageWrap {position: relative;flex: 1 1 480px;text-align: center;background: #f9f9f9;padding: 20px;}


/* Slide */

.imageWrap {position: relative;width: 100%;max-width: 600px; margin: 0 auto 24px;overflow: hidden;}

.imageWrap img {height: auto;}

.image-slider {position: relative;width: 480px;height: 480px;overflow: hidden;margin: 0 auto;display: flex;align-items: center;justify-content: center;}

.image-slider img.slide {position: absolute;width: 100%;height: 100%;object-fit: contain;opacity: 0;transition: opacity 0.5s ease;}


.image-slider img.slide.active {opacity: 1;z-index: 1;}

.arrow {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255, 255, 255, 0.8);border: none;padding: 8px 16px;font-size: 24px;cursor: pointer;z-index: 10;border-radius: 50%;box-shadow: 0 2px 4px rgba(0,0,0,0.2);}

.arrow.prev {left: 8px;}
.arrow.next {right: 8px;}

.spec-box {width: 45%;padding: 10px 20px;color: #333;box-sizing: border-box;}
.spec-title {font-size: 30px;font-weight: bold;margin-bottom: 20px;text-align: left;}
.spec-table {width: 100%;border-collapse: collapse;margin-bottom: 30px;}

.spec-table th,.spec-table td {font-size: 14px;text-align: left;padding: 10px 0;border-bottom: 1px solid #F6F6F6;vertical-align: top;}
.spec-table th {width: 30%;font-weight: 500;color: #333;background: #F6F6F6;text-align: center;}
.spec-table td {color: #666;padding-left:18px;}
.option-box {margin-top: 10px;}
.option-title {font-size: 18px;font-weight: 600;margin-bottom: 10px;border-bottom: 1px solid #DDDDDD;padding-bottom: 18px;}
.option-list {list-style: none;padding-left: 0;font-size: 16px;line-height: 1.8;color: #444;}



/* footer */
.footer {background-color: #fff;color: #6d7a8b;padding: 40px 0 ;border-top: 1px solid #f0f0f0;}

.footer-top {display: flex;justify-content: center;align-items: center;margin-bottom: 24px;}
.footer-bottom {font-size: 13px;text-align: center;color: #a0a9b8;}
.footer-bottom a {color: #a0a9b8;text-decoration: underline;margin-left: 5px;}




/* 모바일 반응형 */
@media (max-width: 768px) {
    header { background-color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
    .equipment-detail {padding: 130px 0;}
    .equipment-detail .inner {padding: 0 24px;margin: 0 auto;overflow: hidden;}
    .textWrap h2 {font-size: 2rem;margin-bottom: 12px;}
    .textWrap .sub {font-size: 1.15rem;}

  .detailWrap {
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
  }
    .imageWrap {width: 100%;margin: 0;padding: 0;background: #fff;border-radius: 0;}
    .image-slider {width: 100%;height: auto;aspect-ratio: 1 / 1;max-width: 100%;overflow: hidden;}
    .image-slider img.slide {width: 100%;height: auto;object-fit: contain;background: #fff;box-shadow: none;}
    .arrow {top: 50%;font-size: 2rem;padding: 8px 12px;}
  .spec-box {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
    .spec-title {margin: 24px 0 8px 0;}

  .spec-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #fff;
    font-size: 1.06rem;
  }
  .spec-table th,
  .spec-table td {
    border: 1px solid rgba(0,0,0,0.15);
    padding: 14px 0 14px 8px;
    text-align: left;
    font-size: 1.18rem;
    vertical-align: middle;
    line-height: 1.2;
    word-break: keep-all;
  }
  .spec-table th {
    min-width: 90px;
    text-align: center;
    font-size: 1rem;
    border-right: 1px solid rgba(0,0,0,0.15);
  }
  .spec-table td {
    width: 64vw;
    color: #000;
    background: #fff;
    font-weight: 700;
    font-size: 1.12rem;
    text-align: left;
    border-left: 0;
  }
    .option-box {margin-top: 40px;}
  .option-title {
    font-size: 1.1rem;
    font-weight: 900;
    margin: 24px 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    letter-spacing: -0.01em;
  }
  .option-list {
    font-size: 1.06rem;
    line-height: 2;
    color: #222;
    padding-left: 0;
  }
  .option-list li {
    padding-left: 6px;
    margin-bottom: 4px;
  }

      /* FOOTER */
      .footer {background: none;border:none;padding: 0 24px;        margin-bottom: 40px;}
      .footer .description {color: #4D5159;font-size: 14px;}
      .footer .footer-bottom,.footer .footer-bottom a {color: #6d7a8b;}
}