/* --------------------------- 서브 : 세르보테크 --------------------------- */

/* 세르보테크 섹션1 시작 */
.overview-safe-wrap {
  display: flex;
  padding: 150px 0;
  width: 100%;
}

.overview-safe-desc {
  width: 55%;
  padding: 0 0 0 150px;
}

.overview-safe-desc>p {
  margin-bottom: 20px;
  font-size: clamp(16px, 0.9375vw, 20px);
  line-height: 30px;
}

.overview-safe-desc>p>span {
  display: block;
}

.overview-safe-desc-title {
  margin-bottom: 250px;
}

.overview-safe-desc-title>span {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  opacity: 20%;
  margin-bottom: 20px;
  display: block;
}

.sub_title_font {
  font-size: var(--title-font-size);
  font-weight: 500;
}

.sub_color_font {
  font-size: var(--title-font-size);
  color: var(--signature-color);
}

.overview-safe-img {
  display: flex;
  width: 45%;
  justify-content: space-between;
}

.overview-safe-img1 {
  width: 25%;
}

.overview-safe-img1>img {
  width: 100%;
}

.overview-safe-img2 {
  width: 70%;
  margin-top: 100px;
}

.overview-safe-img2>img {
  width: 100%;
}

/* 세르보테크 섹션2 시작 */
.overview-finishing-wrap {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--base-color-lightGrey);
  border-bottom: 1px solid var(--base-color-lightGrey);
  width: 100%;
}

.overview-finishing-desc-wrap {
  width: 35%;
  padding: 0 0 0 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.overview-finishing-desc>p {
  font-size: clamp(16px, 0.9375vw, 20px);
  line-height: 30px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.overview-finishing-desc>p>span {
  display: block;
}

.overview-finishing-img {
  width: 60%;
  height: 100%;
}

.overview-finishing-img>img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 세르보테크 섹션3 시작 */
.overview-banner-wrap {
  width: 100%;
  text-align: center;
  padding: 200px 0;
}

.overview-banner-wrap>p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 30px;
}

.overview-banner-wrap>p>span {
  display: block;
}

/* 세르보테크 섹션4 시작 */
.overview-img-wrap {
  width: 100%;
}

.overview-img-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 100px;
}

.overview-img-item1 {
  width: 31.5%;
  border-radius: 0 50px 50px 0;
}

.overview-img-item2 {
  width: 31.5%;
  border-radius: 50px;
}

.overview-img-item3 {
  width: 31.5%;
  border-radius: 50px 0 0 50px;
}

.overview-img-title {
  margin-bottom: 200px;
}

.overview-point-title {
  font-size: clamp(30px, 4vw, 70px);
  font-weight: 800;
  margin-left: 150px;
  opacity: 20%;
}

/* --------------------------- 서브 : 대표소개 --------------------------- */
.ceo-greeting-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.ceo-greeting-title-wrap {
  width: 40%;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ceo-greeting-title>span {
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 20px;
  display: block;
}

.ceo-greeting-logo>img {
  opacity: 20%;
}

.ceo-greeting-desc-wrap {
  width: 60%;
  margin-top: 100px;
}

.ceo-greeting-img {
  width: 100%;
}

.ceo-greeting-img>img {
  width: 100%;
}

.ceo-greeting-desc {
  margin-top: 100px;
}

.ceo-greeting-desc>p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 30px;
  margin-bottom: 20px;
}

.ceo-greeting-desc>p>span {
  display: block;
}

.ceo-greeting-desc>h4 {
  margin-top: 50px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  margin-bottom: 100px;
}

/* --------------------------- 서브 : 오시는 길 --------------------------- */
/* 오시는 길 섹션1 시작 */
.contact-map-wrap {
  width: 100%;
}

.contact-map-title {
  margin-top: 100px;
  width: 100%;
  text-align: center;
  margin-bottom: 100px;
}

.contact-map-title>p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 30px;
  margin-bottom: 50px;
}

.contact-map-title>p>span {
  display: block;
}

.contact-map-title>ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.contact-map-title>ul>li>a {
  color: #000;
  text-decoration: underline;
  font-size: clamp(16px, 1.5vw, 20px);
}

.contact-map>iframe {
  display: block;
}

.contact-map>img {
  opacity: 20%;
  display: block;
}

/* 오시는 길 섹션2 시작 */
.contact-us-wrap {
  width: 100%;
  border-top: 1px solid #00000030;
  border-bottom: 1px solid #00000030;
  display: flex;
  justify-content: space-between;
}

.contact-address>h3,
.contact-us>h3 {
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 50px;
}

.contact-address>p,
.contact-us>p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 30px;
}

.contact-address {
  width: 50%;
  padding: 200px 0;
  text-align: center;
  border-right: 1px solid #00000030;
}

.contact-us {
  width: 50%;
  padding: 200px 0;
  text-align: center;
}

/* --------------------------- 서브 : 금속천장재 --------------------------- */
/* 금속천장재 섹션1 시작 */
.product-metal-desc-wrap {}

.product-metal-desc-title {
  text-align: center;
  margin-bottom: 150px;
  margin-top: 100px;
}

.product-metal-desc-title>p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 30px;
}

.product-metal-desc-title>p>span {
  display: block;
}

.product-metal-desc {
  display: flex;
  justify-content: space-between;
}

.product-metal-desc-box {
  width: 40%;
  padding: 100px;
}

.product-metal-desc-box>h3 {
  font-weight: 500;
  margin-bottom: 20px;
}

.product-metal-desc-box>span {
  font-size: clamp(16px, 2vw, 20px);
  opacity: 40%;
  position: relative;
  margin-bottom: 100px;
  display: block;
}

.product-metal-desc-box>span::before {
  content: '';
  width: 150px;
  height: 2px;
  background-color: #000;
  position: absolute;
  bottom: -50px;
  left: 0;
}

.product-metal-desc-box>p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 30px;
}

.product-metal-desc-box>p>span {
  display: block;
}

.product-metal-img-box {
  text-align: left;
  width: 60%;
  position: relative;
  z-index: 1;
}

.product-metal-img-box>img {
  display: block;
  width: 80%;

}

.product-metal-img-box>span {
  display: block;
  width: 80%;
  width: 150px;
  height: 300px;
  background-color: var(--signature-color);
  position: absolute;
  bottom: -50px;
  right: 140px;
  z-index: -1;
}

/* 금속천장재 섹션 2 시작 */
.product-metal-long-wrap {
  width: 100%;
  margin: 0 auto;
  margin-top: 200px;
  text-align: center;
  border-top: 1px solid var(--base-color-lightGrey);
}

.product-metal-long-title,
.product-metal-short-title {
  margin-top: 200px;
  margin-bottom: 50px;
}

.product-metal-long-title>h3,
.product-metal-short-title>h3 {
  position: relative;
}

.product-metal-long-title>h3::before,
.product-metal-short-title>h3::before {
  content: '';
  width: 150px;
  height: 2px;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  opacity: 40%;
}

.product-metal-long-title>p,
.product-metal-short-title>p {
  margin-top: 50px;
  font-size: clamp(16px, 2vw, 20px);
}

.product-metal-long-items {
  height: 350px;
  position: relative;
  margin: 0 auto;
}

.product-metal-long-item {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  gap: 50px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.product-metal-long-item.active,
.product-metal-short-item.active {
  opacity: 1;
}

.product-metal-long-img {
  width: 60%;
}

.product-metal-long-img>img,
.product-metal-short-img>img {
  width: 100%;
}

.product-metal-long-desc {}

.product-metal-long-mini-title,
.product-metal-short-mini-title {
  border: 1px solid #000;
  border-radius: 50px;
  margin-bottom: 20px;
}

.product-metal-long-mini-title>p,
.product-metal-short-mini-title>p {
  padding: 10px 20px;
  font-size: clamp(16px, 2vw, 20px);
}

.product-metal-long-info,
.product-metal-short-info {
  display: flex;
  margin-top: 5px;
}

.product-metal-long-info>p:nth-of-type(1),
.product-metal-short-info>p:nth-of-type(1) {
  margin-right: 10px;
  font-weight: 600;
  font-size: clamp(16px, 2vw, 20px);
}

.product-metal-long-info>p,
.product-metal-short-info>p {
  font-size: clamp(16px, 2vw, 18px);
}

/* Swiper */
.product-metal01 {
  margin-bottom: 200px;
  width: 75%;
  margin-top: 50px;
}

.product-metal01 .swiper-wrapper {
  position: relative;
}

.product-metal01 .swiper-slide {
  width: 25%;
  opacity: 0.25;
  cursor: pointer;
  transition: opacity .3s ease;
}

.product-metal01 .swiper-slide-visible:not(.swiper-slide-active) {
  opacity: 0.25;
}

.product-metal01 .swiper-slide-active {
  opacity: 1;
}

.product-metal01 .swiper-slide>img {
  width: 100%;
}

.product-metal01 .swiper-slide>p {
  margin-top: 20px;
  font-size: clamp(16px, 2vw, 20px);
}

.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 50px;
}

.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* 금속천장재 섹션 3 시작 */
.product-metal-short-wrap {
  width: 100%;
  margin: 0 auto;
  margin-top: 400px;
  text-align: center;
  border-bottom: 1px solid var(--base-color-lightGrey);
}

.product-metal-short-items {
  height: 300px;
  position: relative;
  margin: 0 auto;
}

.product-metal-short-item {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  gap: 50px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.product-metal-short-img {
  width: 50%;
}

.product-metal-short-img>img {
  width: 75%;
}

/* Swiper */
.product-metal02 {
  margin-bottom: 200px;
  width: 75%;
  margin-top: 150px;
}

.product-metal02 .swiper-wrapper {
  position: relative;
}

.product-metal02 .swiper-slide {
  width: 25%;
  opacity: 0.25;
  cursor: pointer;
  transition: opacity .3s ease;
}

.product-metal02 .swiper-slide-visible:not(.swiper-slide-active) {
  opacity: 0.25;
}

.product-metal02 .swiper-slide-active {
  opacity: 1;
}

.swiper-slide>img {
  width: 65%;

}

.swiper-slide>p {
  margin-top: 20px;
  font-size: clamp(16px, 2vw, 20px);
}

.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 50px;
}

.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* 금속천장재 섹션4 시작 */
.product-caution-wrap {
  text-align: center;
  margin-bottom: 100px;
}

.product-caution-wrap>h3 {
  margin-top: 150px;
  margin-bottom: 50px;
  text-align: center;
}

.product-caution-wrap>p {
  text-align: center;
  font-size: clamp(18px, 2vw, 24px);
  margin-top: 100px;
}

.product-caution-wrap>p>strong {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--signature-color);
  font-weight: 700;
}

.product-caution-wrap>p>span {
  display: block;
}

.product-caution-wrap>button {
  padding: 20px 30px;
  font-size: clamp(16px, 2vw, 20px);
  background-color: var(--signature-color);
  color: #fff;
  margin: 70px 0 100px 0;
  transition: all 0.45s;
  border: 1px solid var(--signature-color);
  cursor: pointer;
}

.product-caution-wrap>button:hover {
  background-color: #fff;
  border: 1px solid var(--signature-color);
}

.product-caution-wrap>button:hover a {
  
  color: var(--signature-color) !important;
} 

.product-caution-box>p {
  font-size: clamp(16px, 2vw, 20px);
  text-align: center;
  padding: 50px;
  line-height: 30px;
  margin-bottom: 20px;
  background-color: #EFEFEF;
}

.product-caution-box>p>span {
  display: block;
}

.product-caution-mini {
  text-align: right;
  display: block;
  font-size: clamp(16px, 2vw, 18px);
  color: #ff0000;
}

/* --------------------------- 서브 : 흡음용마감재 --------------------------- */
/* 흡음용마감재 섹션1 시작 */
.product-hubeum-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 100px;
}

.product-hubeum-box2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.product-hubeum-desc1 {
  width: 50%;
}

.product-hubeum-desc1>p,
.product-hubeum-desc2>p {
  margin-top: 30px;
  line-height: 30px;
  font-size: clamp(16px, 2vw, 20px);
}

.product-hubeum-desc1>p:nth-of-type(1) {
  margin-top: clamp(60px, 10vw, 200px);
}

.product-hubeum-desc1>p>span {
  display: block;
}

.product-hubeum-img {
  width: 50%;
}

.product-hubeum-img>img {
  width: 100%;
}

.product-hubeum-desc2 {
  width: 50%;
  padding: 50px;
}

.product-hubeum-desc2>p:nth-of-type(1) {
  margin-top: clamp(50px, 8vw, 300px);
}

.product-hubeum-desc2>p>span {
  display: block;
}

/* --------------------------- 서브 : 컬러천장재 --------------------------- */
/* 컬러천장재 섹션1 시작 */
.product-color-desc-title {
  margin-top: 100px;
  text-align: center;
}

.product-color-desc-title>p {
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 50px;
  line-height: 30px;
}

.product-color-desc-title>p>span {
  display: block;
}

.product-color-desc-items {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin: 0 auto;
  justify-content: space-between;
  margin-top: 100px;
  gap: 20px;
}

.product-color-desc-item {
  position: relative;
  flex: 1 1 22%;
  min-width: 200px;
}

.product-color-desc-item>img {
  width: 100%;
  display: block;
  transition: all 0.45s;
}

.product-color-desc-item>p {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  transition: all 0.45s;
  cursor: pointer;
  padding: 20px;
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
  font-weight: 400;
  background-color: #00000033;
  opacity: 0;
}

.product-color-desc-item>p:hover {
  opacity: 1;
}












/* ----------------------------------- 반응형 시작 ----------------------------------- */
/* 1400px */
@media screen and (max-width: 1400px) {
  /* --------------------------- 서브 : 세르보테크 --------------------------- */

  /* 세르보테크 섹션1 시작 */
  .overview-safe-desc {
    width: 100%;
    padding: 0 0 0 100px;
    margin-bottom: 50px;
  }

  .overview-safe-img {
    width: 90%;
  }

  /* 세르보테크 섹션2 시작 */
  .overview-finishing-wrap {
    width: 100%;
    padding: 100px 0;
  }

  .overview-finishing-desc-wrap {
    width: 100%;
    padding: 0 0 0 100px;
    margin: 0 auto;
  }

  .overview-finishing-desc>p>span {
    display: inline;
  }

  .overview-finishing-img {
    width: 100%;
    padding: 0 15px;
    height: 100%;
  }

  /* --------------------------- 서브 : 금속찬장재 --------------------------- */
  .product-metal-img-box>span {
    display: none;
  }

  /* --------------------------- 서브 : 컬러천장재 --------------------------- */
  /* 컬러천장재 섹션1 시작 */
  .product-color-desc-items {
    display: flex;
    flex-wrap: nowrap;
    width: 70%;
    margin: 0 auto;
    justify-content: space-between;
    margin-top: 100px;
    gap: 20px;
  }

  .product-color-desc-item {
    position: relative;
    width: 23%;
    min-width: 0;
  }
}

/* 1080px */
@media screen and (max-width: 1080px) {
  /* --------------------------- 서브 : 세르보테크 --------------------------- */

  /* 세르보테크 섹션1 시작 */
  .overview-safe-wrap {
    flex-direction: column;
    margin: 0 auto;
    padding: 100px 15px;
  }

  .overview-safe-desc {
    width: 100%;
    padding: 0;
    margin-bottom: 50px;
  }

  .overview-safe-desc>p>span {
    display: inline;
  }

  .overview-safe-desc-title {
    margin-bottom: 150px;
  }

  .overview-safe-img {
    width: 100%;
  }

  /* 세르보테크 섹션2 시작 */
  .overview-finishing-wrap {
    width: 100%;
    flex-direction: column;
    padding: 50px 0;
  }

  .overview-finishing-desc-wrap {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
  }

  .overview-finishing-desc>p>span {
    display: inline;
  }

  .overview-finishing-img {
    height: 100%;
    margin: 0 auto;
  }

  /* 세르보테크 섹션3 시작 */
  .overview-banner-wrap {
    width: 100%;
    padding: 100px 15px;
    margin: 0 auto;
  }

  .overview-banner-wrap>p>span {
    display: inline;
  }

  /* --------------------------- 서브 : 금속천장재 --------------------------- */
  /* 금속천장재 섹션1 시작 */
  .product-metal-desc-wrap {}

  .product-metal-desc-title>p>span {
    display: block;
  }

  .product-metal-desc {
    flex-direction: column;
  }

  .product-metal-desc-box {
    width: 100%;
    text-align: center;
  }

  .product-metal-desc-box>span::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .product-metal-desc-box>p>span {
    display: block;
  }

  .product-metal-img-box {
    width: 100%;
  }

  .product-metal-img-box>img {
    width: 80%;
    margin: 0 auto;

  }

  .product-metal-img-box>span {
    display: none;
  }

  /* 금속천장재 섹션2 시작 */
  .product-metal-long-desc {
    width: 50%;
  }

  /* --------------------------- 서브 : 흡음용마감재 --------------------------- */
  /* 흡음용마감재 섹션1 시작 */
  .product-hubeum-box {
    flex-direction: column-reverse;
    margin-bottom: 100px;
    gap: 50px;
  }

  .product-hubeum-box2 {
    flex-direction: column;
  }

  .product-hubeum-desc1 {
    width: 100%;
    text-align: center;
  }

  .product-hubeum-img {
    width: 100%;
  }

  .product-hubeum-desc2 {
    width: 100%;
    padding: 0;
    text-align: center;
  }

}

/* 680px */
@media screen and (max-width: 680px) {

  /* --------------------------- 서브 : 세르보테크 --------------------------- */
  /* 세르보테크 섹션4 시작 */
  .overview-img-wrap {
    width: 90%;
    margin: 0 auto;
  }

  .overview-img-items {
    flex-direction: column;
    gap: 20px;
  }

  .overview-img-item1,
  .overview-img-item2,
  .overview-img-item3 {
    width: 100%;
    border-radius: 30px;
  }

  .overview-point-title {
    margin-left: 0;
  }

  /* --------------------------- 서브 : 대표소개 --------------------------- */
  .ceo-greeting-wrap {
    width: 90%;
    flex-direction: column;
  }

  .ceo-greeting-title-wrap {
    width: 100%;
  }

  .ceo-greeting-logo {
    display: none;
  }

  .ceo-greeting-desc-wrap {
    width: 100%;
    margin-top: 50px;
  }

  .ceo-greeting-desc {
    margin-top: 50px;
  }

  .ceo-greeting-desc>p>span {
    display: inline;
  }

  /* --------------------------- 서브 : 오시는 길 --------------------------- */
  /* 오시는 길 섹션1 시작 */

  .contact-map>img {
    width: 100%;
  }

  .contact-map-title>p>span {
    display: inline;
  }

  /* 오시는 길 섹션2 시작 */
  .contact-us-wrap {
    flex-direction: column;
  }

  .contact-address {
    width: 100%;
    padding: 100px 0;
    border-bottom: 1px solid #00000030;
    border-right: none;
  }

  .contact-us {
    width: 100%;
    padding: 100px 0;
  }

  /* --------------------------- 서브 : 금속천장재 --------------------------- */
  /* 금속천장재 섹션1 시작 */
  .product-metal-desc-title>p>span,
  .product-metal-desc-box>p>span {
    display: inline;
  }

  /* 금속천장재 섹션2 시작 */
  .product-metal-long-item {
    width: 100%;
    align-items: center;
    gap: 30px;
    flex-direction: column;
  }

  .product-metal-long-mini-title>p,
  .product-metal-short-mini-title>p {
    padding: 10px 15px;
  }

  /* Swiper */
  .product-metal01 {
    margin-bottom: 100px;
    width: 100%;
    margin-top: 160px;
    position: relative;
  }
  .product-metal01 .swiper-wrapper{
    width: 100%;
  }
  .product-metal01 .swiper-slide{
    width: 25%; 
  }

  .product-metal02 {
    margin-top: 260px;
  }

  .product-metal-long-items {
    position: relative;
  }

  .product-metal-long-items::before {
    content: '슬라이드를 움직여 천장재를 확인하세요.';
    position: absolute;
    bottom: -28%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    color: var(--signature-color);
  }

  .product-metal-short-items {
    position: relative;
  }
.product-metal-desc-box{
  padding: 0; margin-bottom: 50px;
}
  .product-metal-short-items::before {
    content: '슬라이드를 움직여 천장재를 확인하세요.';
    position: absolute;
    bottom: -61%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    color: var(--signature-color);
  }

    .swiper-slide > img{
      width: 100%;
    }
.product-metal01 .swiper-slide>img{
  width: 111%;
}
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

  /* 금속천장재 섹션 3 시작 */
  .product-metal-short-wrap {
    margin-top: 100px;
  }

  .product-metal-short-item {
    width: 100%;
    align-items: center;
    gap: 30px;
    flex-direction: column;
  }

  /* 금속천장재 섹션4 시작 */
  .product-caution-wrap>button {
    margin-bottom: 100px;
  }

  .product-caution-box>p>span {
    display: inline;
  }

  .product-caution-mini {
    text-align: center;
  }

  /* --------------------------- 서브 : 컬러천장재 --------------------------- */
  /* 컬러천장재 섹션1 시작 */
  .product-color-desc-items {
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    margin: 0 auto;
    justify-content: space-between;
    margin-top: 100px;
    gap: 20px;
  }

  .product-color-desc-item {
    position: relative;
    flex: 1 1 22%;
    min-width: 200px;
  }


}