.elementor-93 .elementor-element.elementor-element-ff46782{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-e1c6928{--spacer-size:50px;}.elementor-93 .elementor-element.elementor-element-eae8cb2 img{width:28%;}.elementor-93 .elementor-element.elementor-element-a5863d6{--spacer-size:50px;}.elementor-93 .elementor-element.elementor-element-2f47c9e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-afd9db8{--display:flex;--padding-top:112px;--padding-bottom:112px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-afd9db8:not(.elementor-motion-effects-element-type-background), .elementor-93 .elementor-element.elementor-element-afd9db8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F1F1;}.elementor-93 .elementor-element.elementor-element-5d0c56d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-ffb4b81{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:center;}.elementor-93 .elementor-element.elementor-element-ffb4b81 .elementor-heading-title{font-family:"pretendard", Sans-serif;font-size:48px;font-weight:700;letter-spacing:-1.3px;color:#161616;}.elementor-93 .elementor-element.elementor-element-93e8706{width:var( --container-widget-width, 100% );max-width:100%;margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:center;font-family:"pretendard", Sans-serif;font-size:20px;font-weight:400;line-height:1.6em;letter-spacing:0px;color:#333333;}.elementor-93 .elementor-element.elementor-element-4927a6c img{width:100%;}.elementor-93 .elementor-element.elementor-element-9d74d6e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--padding-top:48px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-1898183{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-16a5fd2{--e-image-carousel-slides-to-show:5;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -7px) 0px;}.elementor-93 .elementor-element.elementor-element-16a5fd2 .swiper-wrapper{display:flex;align-items:center;}.elementor-93 .elementor-element.elementor-element-de20e37{--display:flex;--overlay-opacity:0.85;--padding-top:112px;--padding-bottom:112px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-de20e37:not(.elementor-motion-effects-element-type-background), .elementor-93 .elementor-element.elementor-element-de20e37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.hssec.org/wp-content/uploads/2025/09/main_banner1.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-93 .elementor-element.elementor-element-de20e37::before, .elementor-93 .elementor-element.elementor-element-de20e37 > .elementor-background-video-container::before, .elementor-93 .elementor-element.elementor-element-de20e37 > .e-con-inner > .elementor-background-video-container::before, .elementor-93 .elementor-element.elementor-element-de20e37 > .elementor-background-slideshow::before, .elementor-93 .elementor-element.elementor-element-de20e37 > .e-con-inner > .elementor-background-slideshow::before, .elementor-93 .elementor-element.elementor-element-de20e37 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-93 .elementor-element.elementor-element-ad38310{--display:flex;}.elementor-93 .elementor-element.elementor-element-4ca5587{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:64px 64px;--row-gap:64px;--column-gap:64px;--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;}.elementor-93 .elementor-element.elementor-element-4ca5587:not(.elementor-motion-effects-element-type-background), .elementor-93 .elementor-element.elementor-element-4ca5587 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-93 .elementor-element.elementor-element-de12247{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-d3fd648{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-9c4dc92{width:auto;max-width:auto;}.elementor-93 .elementor-element.elementor-element-9c4dc92 .elementor-heading-title{font-family:"pretendard", Sans-serif;font-size:33px;font-weight:700;line-height:40px;letter-spacing:0.7px;color:#464646;}.elementor-93 .elementor-element.elementor-element-5b853a2{width:var( --container-widget-width, 100% );max-width:100%;margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;font-family:"pretendard", Sans-serif;font-size:17px;font-weight:400;}.elementor-93 .elementor-element.elementor-element-9cdbb6b img{width:100%;height:465px;object-fit:cover;object-position:top center;}.elementor-93 .elementor-element.elementor-element-fa150a7{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-93 .elementor-element.elementor-element-afd9db8{--padding-top:56px;--padding-bottom:56px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-ffb4b81{--container-widget-width:65%;--container-widget-flex-grow:0;width:var( --container-widget-width, 65% );max-width:65%;}.elementor-93 .elementor-element.elementor-element-93e8706{--container-widget-width:65%;--container-widget-flex-grow:0;width:var( --container-widget-width, 65% );max-width:65%;}.elementor-93 .elementor-element.elementor-element-9d74d6e{--padding-top:24px;--padding-bottom:24px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-16a5fd2{--e-image-carousel-slides-to-show:4;}.elementor-93 .elementor-element.elementor-element-de20e37{--padding-top:56px;--padding-bottom:56px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-4ca5587{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:32px 32px;--row-gap:32px;--column-gap:32px;}.elementor-93 .elementor-element.elementor-element-de12247{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-93 .elementor-element.elementor-element-5b853a2{--container-widget-width:72%;--container-widget-flex-grow:0;width:var( --container-widget-width, 72% );max-width:72%;}}@media(max-width:767px){.elementor-93 .elementor-element.elementor-element-eae8cb2 img{width:70%;}.elementor-93 .elementor-element.elementor-element-afd9db8{--padding-top:48px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-ffb4b81{padding:0% 5% 0% 5%;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-93 .elementor-element.elementor-element-ffb4b81 .elementor-heading-title{font-size:30px;}.elementor-93 .elementor-element.elementor-element-93e8706{padding:5% 5% 5% 5%;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:1em;}.elementor-93 .elementor-element.elementor-element-16a5fd2{--e-image-carousel-slides-to-show:2;}.elementor-93 .elementor-element.elementor-element-de20e37{--padding-top:48px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-93 .elementor-element.elementor-element-4ca5587{--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-93 .elementor-element.elementor-element-de12247{--width:100%;--min-height:0px;}.elementor-93 .elementor-element.elementor-element-9c4dc92{text-align:center;}.elementor-93 .elementor-element.elementor-element-9c4dc92 .elementor-heading-title{font-size:25px;}.elementor-93 .elementor-element.elementor-element-5b853a2{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;text-align:center;}}@media(min-width:768px){.elementor-93 .elementor-element.elementor-element-ff46782{--content-width:1300px;}.elementor-93 .elementor-element.elementor-element-5d0c56d{--width:100%;}.elementor-93 .elementor-element.elementor-element-de20e37{--content-width:1300px;}.elementor-93 .elementor-element.elementor-element-de12247{--width:40%;}.elementor-93 .elementor-element.elementor-element-fa150a7{--width:55%;}}@media(max-width:1024px) and (min-width:768px){.elementor-93 .elementor-element.elementor-element-5d0c56d{--width:100%;}.elementor-93 .elementor-element.elementor-element-de12247{--width:100%;}.elementor-93 .elementor-element.elementor-element-fa150a7{--width:100%;}}@media(min-width:1441px){.elementor-93 .elementor-element.elementor-element-de20e37:not(.elementor-motion-effects-element-type-background), .elementor-93 .elementor-element.elementor-element-de20e37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS */body {font-family: pretendard, sans-serif!important;}

/* 섹션 전체 배경을 위한 Full Width 컨테이너 (sec1-container 제거하고 sec1에 통합) */
.sec1 {
  width: 100%;
  padding: 0;
  margin: 0;
  background: url('/wp-content/uploads/2025/09/bg001.png') no-repeat center center/cover;
}

/* 리스트: Flexbox를 활용한 6x1 배치 */
.sec1-list {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 각각의 li (6x1 배치) */
.sec1-list li {
  width: 16.666%;
  height: 70vh;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s ease;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  box-sizing: border-box;
}

/* 맨 마지막 li만 우측 선 제거 */
.sec1-list li:last-child {
  border-right: none;
}

/* 내부 content 스타일 (정렬 기준점 설정) */
.content {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* num, tit, company-logo를 같은 위치에 절대 배치 */
.num, .tit, .company-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: all 0.5s ease;
}

/* num은 상단으로, tit은 그 아래로 배치 */
.num {
  font-size: clamp(14px, 1.5vw, 21px); /* ⭐clamp() 적용 */
  font-weight: 600;
  color: #ffffff;
  opacity: 1;
  visibility: visible;
  z-index: 2;
  background: #b3478882;
  padding: 8px;
  border-radius:8px;
  white-space: nowrap; /* ⭐ 한 줄로 유지 */
  transform: translate(-50%, -80px); /* num 위치 조정 */
}

/* tit 스타일 */
.tit {
  font-size: clamp(18px, 2.5vw, 25px); /* ⭐clamp() 적용 */
  line-height: 50px;
  font-weight: bold;
  color: #fff;
  text-align: center;

  /* ⭐ 한 줄로 만들고 넘치는 부분 처리 ⭐ */
  white-space: nowrap;       /* 줄바꿈 방지 */
  overflow: hidden;          /* 넘치는 텍스트 숨기기 */
  text-overflow: ellipsis;   /* 넘치는 텍스트를 ...으로 표시 */

  opacity: 1;
  visibility: visible;
  z-index: 1;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50px);
  transition: all 0.5s ease;
}

/* company-logo는 기본적으로 숨김 */
.company-logo {
  width: 300px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  /* 로고를 100px 위로 이동 */
  transform: translate(-50%, -120px);
  transition: all 0.5s ease;
}

/* txt와 btns는 호버 시 나타나도록 설정 (로고 아래에 위치) */
.txt, .btns {
  opacity: 0;
  visibility: hidden;
  color: #fff;
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px); /* ⭐clamp() 적용 */
  transition: all 0.5s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 150px); /* txt 위치 조정 */
  z-index: 4;
}

.btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, 30px); /* btns 위치 조정 */
  width: 80%; /* ⭐ 부모 요소 너비의 80%로 설정 */
}

/* hover 시 num, tit은 사라지고 로고와 btns는 나타남 */
.sec1-list li:hover .num,
.sec1-list li:hover .tit {
  opacity: 0;
  visibility: hidden;
}

.sec1-list li:hover .company-logo {
  opacity: 1;
  visibility: visible;
}

.sec1-list li:hover .txt,
.sec1-list li:hover .btns {
  opacity: 1;
  visibility: visible;
}

/* li에 배경이미지 준비 */
.sec1-list li::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 1;
}

.bg1::before { background-image: url('/wp-content/uploads/2025/09/company01.jpg'); }
.bg2::before { background-image: url('/wp-content/uploads/2025/09/company02c.jpg'); }
.bg3::before { background-image: url('/wp-content/uploads/2025/09/company03c.jpg'); }
.bg4::before { background-image: url('/wp-content/uploads/2025/09/company04b.jpg'); }
.bg5::before { background-image: url('/wp-content/uploads/2025/09/company05d.jpg'); }
.bg6::before { background-image: url('/wp-content/uploads/2025/09/company06b.jpg'); }

/* 개별 색상 설정 (선택 사항) 
.bg1::before { background-color: rgba(73, 69, 122, 0.5); }
.bg2::before { background-color: #d7cecea8 }
.bg3::before { background-color: #aedb97b0; }
.bg4::before { background-color: #73a7c947; }
.bg5::before { background-color: #bae1d894; }
.bg6::before { background-color: #bcd7a873; }

*/


/* hover 시 배경 보이기 */
.sec1-list li:hover::before {
  opacity: 1;
}

/* 오버레이: 항상 존재 (이미지 어둡게) */
.sec1-list li::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: none;
}
/* 마우스 오버 시: 오버레이를 밝게 만듦 */
.sec1-list li:hover::after {
    background: rgba(0, 0, 0, 0.05); /* ⭐ 호버 시 투명도 0.05 (밝아짐) */
}
/* btns 디자인 (기존 코드와 합침) */
.shop-btn {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  background-color: #ffffffc7;
  border-radius: 5px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
   font-size: clamp(14px, 1.5vw, 16px); /* ⭐clamp() 적용 */
  transition: background-color 0.3s ease;
}

.shop-btn img {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.shop-btn.disabled {
  background-color: #aaa;
  color: #fff;
  cursor: default;
}

.sns-btns {
  display: flex;
  gap: 10px;
}

.sns-btns {
  display: flex;
  flex-direction: column; /* ⭐ 세로 정렬로 변경 */
  align-items: center;
  gap: 5px; /* 전화번호와 이메일 간 간격 */
  margin-top: 10px; /* '홈페이지 바로가기' 버튼과의 간격 */
}

.sns-btns a {
  /* 기존 스타일 유지 (링크의 텍스트 스타일) */
  color: #fff;
  font-size: clamp(12px, 1.2vw, 14px); /* ⭐clamp() 적용 */
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

/*.sns-btns a img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}*/
.phone-btn img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.email-btn img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.phone-btn,
.email-btn {
  display: flex; /* ⭐ 플렉스 컨테이너로 설정 */
  align-items: center; /* ⭐ 자식 요소들을 수직 중앙에 정렬 */
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* 반응형 CSS */
@media screen and (max-width: 1024px) {
  /* 태블릿: 2x3 배치 */
  .sec1-list li {
    width: 50%;
    height: 40vh;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .sec1-list li:nth-child(2n) {
    border-right: none;
  }
  .sec1-list li:nth-child(n+6) {
    border-bottom: none;
  }
}

@media screen and (max-width: 767px) {
  /* 모바일: 1x6 배치 (세로 정렬) */
  .sec1-list {
    flex-direction: column;
  }
  .sec1-list li {
    width: 100%;
    height: 30vh;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .sec1-list li:last-child {
    border-bottom: none;
  }
  .tit {
    font-size: 28px;
    line-height: 36px;
  }
  .company-logo {
    width: 180px;
  }
.company-logo {
    position: absolute;
    top: 54%;}
.btns {top: 24%;}
.shop-btn {    font-size: 14px;padding: 5px 5px;}
.tit {
    font-size: 24px;
  top: 74%;}
.num {
    font-size: 17px;top: 66%;}
  
  
}/* End custom CSS */