/* ==============================================
   PAGES.CSS
   SeeChart Homepage 페이지별 고유 스타일
   ============================================== */
@import url('pages-redesign.css?v=260909');
@import url('pages-consult.css?v=260909');


/* ======================================================================
   INDEX (메인 홈) — common.css 기반
   ====================================================================== */

/* 메인 히어로 슬라이드 래퍼 (서비스 페이지 .slide 와 충돌 방지) */
body.page-index .slide {
  position: absolute;
  z-index: -1;
}

.swiper-container { height: 590px; }

/* ----- INDEX 뉴스레터: PC 기본 ----- */
.news_letter_title {
  width: 100%;
  height: 30px;
  background: url(../img/news_letter.png) no-repeat center center;
  background-size: auto 30px;
  margin-bottom: 30px;
}

.news_letter_title .news_letter_title_text {
  display: none !important;
}

.news_letter_title::before,
.news_letter_title::after {
  content: none !important;
}

.swiper-container2 {
  width: 100%;
  max-width: 1400px;
  height: auto;
  overflow: hidden;
  margin: 0 auto 50px !important;
}

.swiper-container2 > .swiper-wrapper > .swiper-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  height: auto;
}

.swiper-container2 > .swiper-wrapper > .swiper-slide > div {
  width: 100%;
  max-width: 170px;
  height: auto !important;
  margin: 0 auto;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.swiper-container2 > .swiper-wrapper > .swiper-slide .slide01,
.swiper-container2 > .swiper-wrapper > .swiper-slide .slide02,
.swiper-container2 > .swiper-wrapper > .swiper-slide .slide03,
.swiper-container2 > .swiper-wrapper > .swiper-slide .slide04,
.swiper-container2 > .swiper-wrapper > .swiper-slide .slide05,
.swiper-container2 > .swiper-wrapper > .swiper-slide .slide06 {
  background-size: contain;
}

.swiper-container2 .slide01 img {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain;
  object-position: top center;
  transition: transform 0.25s ease;
}

.swiper-container2 .slide01 img:hover {
  transform: scale(1.03);
}

.swiper-container2 > .swiper-wrapper > .swiper-slide > span {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  display: block;
  width: 100%;
  margin-top: 8px;
  font-family: 'NotoSansKR-Regular';
  font-size: 13px;
  color: #555;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gray_bg {
  width: 100%;
  height: 360px;
  position: absolute;
  bottom: -50px;
  background: #f8f8f8;
  z-index: -1;
}

.swiper-container .swiper-slide .text_inner {
  width: 1400px;
  margin: 0 auto;
}

.swiper-container .swiper-slide .text_inner #text_box01,
.swiper-container .swiper-slide .text_inner #text_box02,
.swiper-container .swiper-slide .text_inner #text_box03,
.swiper-container .swiper-slide .text_inner #text_box04 {
  position: absolute;
  transform: translate(0%, 140%);
  text-align: left;
}

.swiper-container .swiper-slide .text_inner #text_box01 p,
.swiper-container .swiper-slide .text_inner #text_box02 p,
.swiper-container .swiper-slide .text_inner #text_box03 p,
.swiper-container .swiper-slide .text_inner #text_box04 p {
  font-size: 42px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3em;
  text-shadow: 0.5px 1px 1px #555;
}

.swiper-container .swiper-slide .text_inner #text_box01 span,
.swiper-container .swiper-slide .text_inner #text_box02 span,
.swiper-container .swiper-slide .text_inner #text_box03 span,
.swiper-container .swiper-slide .text_inner #text_box04 span {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-top: 20px;
}

/* 슬라이드 텍스트 애니메이션 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box01 p,
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box01 span {
    animation: text 1.2s 0.2s both;
  }
  @keyframes text {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box02 p,
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box02 span {
    animation: text2 1.2s 0.2s both;
  }
  @keyframes text2 {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box03 p,
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box03 span {
    animation: text3 1.2s 0.2s both;
  }
  @keyframes text3 {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box04 p,
  .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box04 span {
    animation: text4 1.2s 0.2s both;
  }
  @keyframes text4 {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* 페이지네이션 */
.swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #ffffff;
  position: relative;
  opacity: 1;
}

.swiper-container .swiper-pagination {
  text-align: left;
  position: relative;
  margin: 0 auto;
  top: -60px;
}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 1400px !important;
  margin: 0 auto;
}

.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  top: 5px;
  width: 18px;
  height: 20px;
  background: url(../img/haxagon.png) no-repeat 0px 3px;
  opacity: 1;
}

/* content01_area (메인 3단 배너) — index 전용 */
body.page-index .container .content01_area {
  width: 100%;
  height: 100px;
  margin-top: 30px;
  background-color: var(--red);
  border-radius: 15px;
  overflow: hidden;
}

body.page-index .container .content01_area dl {
  float: left;
  width: 33.33%;
  margin-top: 1.5em;
  color: #fff;
  background: url(../img/bar.png) no-repeat 0 50%;
  cursor: pointer;
}

body.page-index .container .content01_area dl dt {
  float: left;
  margin-top: 10px;
  margin-left: 25%;
}

body.page-index .container .content01_area dl dt img { transition: all 0.3s linear; }

body.page-index .container .content01_area dl dd {
  float: left;
  display: contents;
  text-align: left;
}

body.page-index .container .content01_area dl dd p { font-size: 20px; margin-left: 35%; }
body.page-index .container .content01_area dl dd .small_p { font-size: 15px; }
body.page-index .container .content01_area dl:hover dd .small_p { text-decoration: underline; }
body.page-index .container .content01_area dl:hover dt img { transform: rotateY(180deg); }

/* content02_area (메인 카드 그리드) */
.container .content02_area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 80px;
}

.container .content02_area .t-content {
  display: block;
  width: 100%;
  max-width: none;
  height: 320px;
  border-radius: 15px;
  box-shadow: 0px 0px 8px #ddd;
  box-sizing: border-box;
}

.container .content02_area .t-content table { width: 100%; height: 100%; }

.container .content02_area .t-content table tbody tr td {
  vertical-align: middle;
  cursor: pointer;
}

.container .content02_area .t-content table tbody tr td span {
  display: block;
  font-size: 21px;
  margin-top: 10%;
  color: #111111;
}

.container .content02_area .t-content:hover table tbody tr td span { color: var(--red); }

.container .content02_area .t-content .t-content_span {
  font-family: 'NotoSansKR-Regular';
  font-size: 22px;
  font-weight: 600;
  color: var(--red);
  margin: 3% 0 2% 0;
}

.container .content02_area .t-content .t-content_p {
  font-family: 'NotoSansKR-Regular';
  font-size: 17px;
  font-weight: 600;
  color: #111;
}

.container .content02_area .t-content table tbody tr td img { transition: all 0.2s ease-in-out; }
.container .content02_area .t-content:hover table tbody tr td img { transform: scale(1.05); }

.container .content02_area .t-content table tbody tr td em {
  font-size: 12px;
  color: #666;
  line-height: 1.2rem;
  display: block;
  margin: 10px 0;
}


/* ======================================================================
   SUB01 — 회사 소개 (sub01_01.html)
   ====================================================================== */

.bg_content .bg_area.sub01_bg,
body.page-sub01 .bg_content .bg_area {
  background: url(../img/company/sub_bg.png) no-repeat 0 0;
  background-size: cover;
}

.container .content01_area.about_area,
body.page-sub01 .container .content01_area {
  padding: 70px 0 200px 0;
  text-align: left;
  width: auto;
  height: auto;
  margin-top: 0;
  background-color: transparent;
  border-radius: 0;
}

.container .content01_area.about_area b,
body.page-sub01 .container .content01_area b {
  display: block;
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 40px;
}

.container .content01_area.about_area p,
body.page-sub01 .container .content01_area p {
  font-size: 17px;
  text-align: justify;
  letter-spacing: -0.1px;
  color: #666;
}


/* ======================================================================
   SUB02 — 서비스 소개 (sub02_XX.html)
   ====================================================================== */

.bg_content .bg_area.sub02_bg,
body.page-sub02 .bg_content .bg_area {
  background: url(../img/service/sub_bg.png) no-repeat 0 0;
  background-size: cover;
}

/* 앵커 메뉴 */
.ank_menu {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--line);
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  z-index: 9;
  backdrop-filter: blur(8px);
}

.ank_menu .ank_inner {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.ank_menu .ank_inner .ank_inner_content {
  width: 385px;
  overflow: hidden;
  cursor: pointer;
}

.ank_menu .ank_inner .ank_inner_content p {
  font-size: 15px;
  width: 308px;
  height: 50px;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  padding-left: 20px;
  line-height: 3.2em;
  text-align: left;
  display: inline-block;
  float: left;
}

.ank_menu .ank_inner .ank_inner_content img {
  border-right: 1px solid #777;
  float: left;
  padding: 22px 20px;
}

.ank_sub {
  position: absolute;
  z-index: 6;
}

.ank_sub .ank_sub_inner {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.ank_sub .ank_sub_inner ul {
  width: 363px;
  height: 100%;
}

.ank_sub .ank_sub_inner ul li {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate);
  border-bottom: none;
  width: 100%;
  height: 50px;
  line-height: 3.2em;
  padding-left: 20px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ank_sub .ank_sub_inner ul li:hover {
  background: var(--accent-soft);
  color: var(--red);
}
.ank_sub .ank_sub_inner ul li:first-child { border-top: none; }
.ank_sub .ank_sub_inner ul li:last-child { border-bottom: 1px solid #ccc; }

/* 서비스 콘텐츠 영역 */
.container .content01_area.service_area,
body.page-sub02 .container .content01_area {
  padding: 100px 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
  width: 100%;
  height: auto;
  margin-top: 0;
  background-color: transparent;
  border-radius: 0;
  box-sizing: border-box;
}

.container .service_text_area {
  float: none;
  flex: 1 1 360px;
  min-width: 0;
  max-width: 520px;
  width: auto;
}

.container .content01_area.service_area b,
body.page-sub02 .container .content01_area b {
  display: block;
  font-size: 35px;
  font-weight: 600;
  color: var(--red);
}

.container .content01_area.service_area span,
body.page-sub02 .container .content01_area span {
  font-size: 15px;
  margin-bottom: 40px;
  color: #aaa;
  display: block;
}

.container .content01_area.service_area p,
body.page-sub02 .container .content01_area p {
  font-size: 17px;
  text-align: justify;
  letter-spacing: -0.1px;
  color: #666;
}

/* sub02 소개문·포인트 목록: 문장은 <p> 단위로만 끊고 나머지 줄바꿈은 어절 단위로 자연스럽게
   (justify + keep-all 조합은 어절 사이가 벌어져 보여서 왼쪽 정렬) */
body.page-sub02 .container .content01_area p,
body.page-sub02 .container .content01_area .service_content_area li {
  text-align: left;
  word-break: keep-all;
  text-wrap: pretty; /* 마지막 줄에 한 어절만 남는 것 방지 (미지원 브라우저는 무시) */
}

.container .content01_area .service_img_area {
  float: right;
  margin-top: -80px;
}

.container .content01_area .service_img_area img {
  display: block;
  margin: 10px auto 70px 0;
}

.container .content01_area .service_content_area {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  float: none;
  overflow: hidden;
}

.container .content01_area .service_content_area .s-inner01 {
  width: 100%;
  border: 1px solid var(--line);
  border-right: none;
  padding: 32px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

.container .content01_area .service_content_area .s-inner01 span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.container .content01_area .service_content_area .s-inner01 ul li {
  color: #666;
  line-height: 1.2em;
  background: url(../img/service/dot.png) no-repeat 0 50%;
  padding-left: 10px;
  margin: 10px 0;
}

.container .content01_area .service_content_area .s-inner02 {
  width: 100%;
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

.container .content01_area .service_content_area .s-inner02 span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.container .content01_area .service_content_area .s-inner02 ul li {
  color: #666;
  line-height: 1.8em;
  background: url(../img/service/dot.png) no-repeat 0 50%;
  padding-left: 10px;
}

/* 서비스 슬라이드 (모니터 이미지) */
body.page-sub02 .slide,
.slide.service_slide {
  position: relative;
  overflow: hidden;
  flex: 1 1 400px;
  min-width: 0;
  max-width: 520px;
  width: auto;
  height: auto;
  aspect-ratio: 580 / 410;
  margin: 0 0 50px;
  float: none;
  right: 0;
  z-index: 1;
}

body.page-sub02 .slide .panel,
.slide.service_slide .panel {
  position: relative;
  width: 100%;
  height: 100%;
}

body.page-sub02 .slide .panel > li,
.panel > li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.panel li p {
  position: absolute;
  color: #fff;
  top: 200px;
  left: 10%;
  animation-name: banner_txt1;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.panel li .banner_text.on {
  position: absolute;
  left: 0;
  color: #fff;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.panel .banner1  { background: url(../img/service/s01.webp)    no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner2  { background: url(../img/service/s01_01.webp) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner3  { background: url(../img/service/s02.webp)    no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner4  { background: url(../img/service/s02_01.webp) no-repeat 50% 0; height: -webkit-fill-available; }

/* sub02_01~06 실사 모니터 사진(3:2): 슬라이드(580:410)보다 납작해 위아래 여백이 생기고 모서리가 각져 보임
   → 사진 비율대로 위에 붙이고 라운드 처리, 남는 아래 띠에는 dot 이 들어감 */
body.page-sub02 .slide.photo_slide .panel > li {
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  background-size: cover !important;
}
.panel .banner5  { background: url(../img/service/s03.webp)    no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner6  { background: url(../img/service/s03_01.webp) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner7  { background: url(../img/service/s04.webp)    no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner8  { background: url(../img/service/s04_01.webp) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner9  { background: url(../img/service/s04_02.webp) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner10 { background: url(../img/service/s05.webp)    no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner11 { background: url(../img/service/s05_01.webp) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner12 { background: url(../img/service/s06.webp)    no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner13 { background: url(../img/service/s06_01.webp) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner14 { background: url(../img/service/s09.png)    no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner15 { background: url(../img/service/s09_01.png) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner16 { background: url(../img/service/s09_02.png) no-repeat 50% 0; height: -webkit-fill-available; }
.panel .banner17 { background: url(../img/service/s08.png)    no-repeat 50% 30%; background-size: auto; height: -webkit-fill-available; }
.panel .banner18 { background: url(../img/service/s08_01.png) no-repeat 50% 30%; background-size: auto; height: -webkit-fill-available; }
.panel .banner24 { background: url(../img/service/s08_02.png) no-repeat 50% 30%; background-size: auto; height: -webkit-fill-available; }
.panel .banner25 { background: url(../img/service/s08_03.png) no-repeat 50% 30%; background-size: auto; height: -webkit-fill-available; }
.panel .banner19 { background: url(../img/dingdong/01.png)    no-repeat 50% 0%; background-size: contain; height: -webkit-fill-available; }
.panel .banner20 { background: url(../img/dingdong/02.png)    no-repeat 50% 0%; background-size: contain; height: -webkit-fill-available; }
.panel .banner21 { background: url(../img/dingdong/03.png)    no-repeat 50% 0%; background-size: contain; height: -webkit-fill-available; }
.panel .banner22 { background: url(../img/dingdong/04.png)    no-repeat 50% 0%; background-size: contain; height: -webkit-fill-available; }
.panel .banner23 { background: url(../img/dingdong/05.png)    no-repeat 50% 0%; background-size: contain; height: -webkit-fill-available; }

.dot {
  position: absolute;
  right: 47%;
  bottom: 0;
  transform: translateX(-10%);
}

.dot > li {
  float: left;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #aaa;
  margin-left: 5px;
  text-indent: -9999px;
  cursor: pointer;
}

.dot > li.on { background-color: #000; }

.prev1 img { position: absolute; top: 35%; left: 0; cursor: pointer; }
.next1 img { position: absolute; top: 35%; right: 0; cursor: pointer; }

.store_bt { margin-top: 30px; }
.store_bt > .google_bt { width: 165px; margin-right: 10px; cursor: pointer; }
.store_bt > .app_bt { width: 165px; cursor: pointer; }


/* ======================================================================
   SUB03 — 온라인 신청 (sub03_01.html)
   ====================================================================== */

.bg_content .bg_area.sub03_bg,
body.page-sub03 .bg_content .bg_area {
  background: url(../img/online/sub_bg.png) no-repeat center center;
  background-size: cover;
}

/* sub03은 폼 페이지라 배너를 더 compact하게 */
body.page-sub03 .bg_content {
  height: 340px;
}
body.page-sub03 .bg_content .bg_area {
  height: 340px;
}

/* step box */
.container .step_box {
  text-align: center;
  margin-top: 40px;
  display: inline-flex;
  overflow: hidden;
}

.container .step_box .step {
  width: 150px;
  margin: 0 5px;
  float: left;
  padding: 12px 35px;
  border: 1px solid #ddd;
}

.container .step_box .step.active,
.container .step_box .step.on {
  border: 1px solid var(--red);
  background: var(--red);
  border-radius: 30px;
}

.container .step_box .step.on span,
.container .step_box .active > span { color: #fff; }

.container .step_box > div > span {
  font-size: 15px;
  color: #a0a0a0;
  cursor: default;
}

/* 공통 step area */
.container .step01_area,
.container .step02_area,
.container .step03_area,
.container .step04_area,
.container .step05_area {
  padding: 90px 0;
  text-align: left;
}

/* plus_text */
.container .step01_area .plus_text,
.container .step02_area .plus_text,
.container .step03_area .plus_text {
  margin-bottom: 20px;
  text-align: center;
  background: #f8f8f8;
  overflow: hidden;
}

.container .step01_area .plus_text p,
.container .step02_area .plus_text p,
.container .step03_area .plus_text p {
  font-size: 15px;
  color: #888888;
  margin: 20px auto;
}

/* hospital_kind (step01 선택) */
.container .step01_area .hospital_kind {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
  gap: 10px;
  align-items: stretch;
}

.container .step01_area .hospital_kind .t-hospital {
  position: relative;
  display: block;
  text-align: center;
  overflow: hidden;
  opacity: 0; /* 로딩 시 애니메이션으로만 표시 */
}

.container .step01_area .hospital_kind .t-hospital img {
  display: block;
  margin: 16px auto 8px;
  position: static;
  transform: none;
}

.container .step01_area .hospital_kind .t-hospital span {
  display: block;
  font-size: 14px;
  margin-top: 6px;
  color: #333333;
}

/* hospital_checkbox */
.hospital_checkbox[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hospital_checkbox[type='checkbox'] + label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  color: #666;
  width: 100%;
  height: 130px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 12px 8px;
}

.hospital_checkbox[type='checkbox'] + label:hover { border: 1px solid var(--red); }

.hospital_checkbox[type='checkbox'] + label:before {
  content: ' ';
  display: none;
  width: 16px;
  height: 16px;
  line-height: 21px;
  margin: -2px 5px 0 0;
  vertical-align: middle;
  border: 1px solid #666;
  border-radius: 3px;
}

/* 버튼 공통 */
.container .step01_area .hospital_next,
.container .step02_area .hospital_next,
.container .step03_area .hospital_next,
.container .step04_area .hospital_next,
.container .step05_area .hospital_next {
  text-align: center;
  margin-top: 50px;
}

.next_bt, .next_bt2, .next_bt3, .next_bt4, .next_bt5, .next_bt6,
.prev_bt, .prev_bt2, .prev_bt3 {
  font-family: 'NotoSansKR-Regular';
  display: inline-block;
  font-size: 17px;
  padding: 10px 80px;
  cursor: pointer;
}

.next_bt { border: 1px solid #ccc; background-color: #ccc; color: #fff; cursor: default; }
.next_bt2, .next_bt3, .next_bt4, .next_bt5, .next_bt6 {
  border: 1px solid var(--red);
  background-color: var(--red);
  color: #fff;
  cursor: pointer;
}

.prev_bt, .prev_bt2, .prev_bt3 {
  border: 1px solid #bbb;
  background-color: #fff;
  font-weight: 500;
  color: #bbb;
}

.next_bt3, .next_bt4 { margin-left: 5px; }
.next_bt5 { padding: 10px 60px; margin-left: 5px; }

/* step02 room */
.container .step02_area .hospital_room {
  border: 1px solid #ddd;
  height: 480px;
  padding: 50px;
}

.container .step02_area .hospital_room table tr td ul {
  width: 320px;
  background: url(../img/online/bar.png) no-repeat 100% 50%;
  overflow: hidden;
}

.container .step02_area .hospital_room table tr td .last_ul { background: none; }
.container .step02_area .hospital_room table tr td ul li { margin: 30px 0; }

.container .step02_area .hospital_room table tr td ul li div .allcount {
  width: 75px;
  height: 41px;
  border: 1px solid #ddd;
  color: #333;
  font-size: 16px;
  text-align: center;
  margin: -4.5px;
  vertical-align: middle;
}

.container .step02_area .hospital_room table tr td ul li div .m_bt {
  width: 45px;
  height: 45px;
  border: 1px solid #ddd;
  background: url(../img/online/m_bt.png) no-repeat 50% 50%;
  cursor: pointer;
  vertical-align: middle;
}

.container .step02_area .hospital_room table tr td ul li div .p_bt {
  width: 46px;
  height: 45px;
  border: 1px solid #ddd;
  background: url(../img/online/p_bt.png) no-repeat 50% 50%;
  cursor: pointer;
  vertical-align: middle;
  border-left: none;
}

.container .step02_area .hospital_room .room_inner01 table { width: 100%; height: 80px; }
.container .step02_area .hospital_room .room_inner01 table tr th { font-size: 17px; font-weight: 600; color: #333; }
.container .step02_area .hospital_room .room_inner01 table tr td { font-size: 16px; color: #666; }

.container .step02_area .hospital_room .room_inner02 table {
  width: 100%;
  height: 290px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding-top: 50px;
}

.container .step02_area .hospital_room .room_inner02 table tr th {
  width: 200px;
  font-size: 17px;
  font-weight: 600;
  color: #333;
  padding-top: 50px;
}

.container .step02_area .hospital_room .room_inner02 table tr td { font-size: 16px; color: #666; }
.container .step02_area .hospital_room .room_inner02 table tr td .count_box { display: inline; }

.container .step02_area .hospital_room .room_inner02 table tr td span {
  width: 100px;
  font-size: 16px;
  color: #666;
  vertical-align: middle;
  display: inline-block;
}

.container .step02_area .hospital_room .room_inner03 table { width: 100%; height: 80px; }
.container .step02_area .hospital_room .room_inner03 table tr th { font-size: 17px; font-weight: 600; color: #333; padding-top: 50px; }
.container .step02_area .hospital_room .room_inner03 table tr td { font-size: 16px; color: #666; }
.container .step02_area .hospital_room .room_inner03 table tr td b { display: block; }
.container .step02_area .hospital_room .room_inner03 table tr td .allplus { text-decoration: underline; }

.room_all { float: right; font-weight: 600; color: var(--red); margin-right: 100px; }

/* step03 item */
.container .step03_area .hospital_item {
  border: 1px solid #ddd;
  height: 360px;
  padding: 50px;
}

.container .step03_area .hospital_item ul { overflow: hidden; }
.container .step03_area .hospital_item ul li { margin: 10px 0; font-size: 16px; }

.container .step03_area .hospital_item .room_inner01 table { width: 100%; height: 150px; }
.container .step03_area .hospital_item .room_inner01 table tr th { font-size: 17px; font-weight: 600; color: #333; }
.container .step03_area .hospital_item .room_inner01 table tr td { font-size: 16px; color: #666; }

.container .step03_area .hospital_item .room_inner02 table {
  width: 100%;
  height: 130px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding-top: 50px;
}

.container .step03_area .hospital_item .room_inner02 table tr th {
  width: 200px;
  font-size: 17px;
  font-weight: 600;
  color: #333;
  padding-top: 50px;
}

.container .step03_area .hospital_item .room_inner02 table tr td { font-size: 16px; color: #666; }
.container .step03_area .hospital_item .room_inner02 table tr td span { font-size: 16px; color: #666; display: inline-block; }
.container .step03_area .hospital_item .room_inner03 table { width: 100%; height: 100px; }
.container .step03_area .hospital_item .room_inner03 table tr th { font-size: 17px; font-weight: 600; color: #333; padding-top: 50px; }
.container .step03_area .hospital_item .room_inner03 table tr td { font-size: 16px; color: #666; }
.container .step03_area .hospital_item .room_inner03 table tr td b { display: block; }

/* item_checkbox */
.container .step03_area table tbody tr td .item_checkbox[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.container .step03_area table tbody tr td .item_checkbox[type='checkbox'] + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  color: #666;
  margin-bottom: 5px;
}

.container .step03_area table tbody tr td .item_checkbox[type='checkbox'] + label:before {
  content: ' ';
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 21px;
  margin: -3px 5px 0 0;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #666;
  border-radius: 3px;
}

.container .step03_area table tbody tr td .item_checkbox[type='checkbox']:checked + label:before {
  content: "\2713";
  font-size: 14px;
  font-weight: 800;
  color: var(--red);
  text-align: center;
  line-height: 15px;
  border: 1px solid var(--red);
}

.container .step03_area table tbody tr td .item_checkbox[type='checkbox']:checked + label span { color: var(--red); }

/* step04 information */
.container .step04_area .hospital_imformation {
  border: 1px solid #ddd;
  padding: 50px;
  overflow: hidden;
}

.container .step04_area .hospital_imformation .room_inner01 {
  float: left;
  width: 50%;
  height: 300px;
  margin-bottom: 40px;
  background: url(../img/online/bar2.png) no-repeat 100% 0;
}

.container .step04_area .hospital_imformation .room_inner01 table { width: 100%; height: 300px; }
.container .step04_area .hospital_imformation .room_inner01 table tbody tr th { font-size: 17px; }

.container .step04_area .hospital_imformation .room_inner01 table tbody tr td select {
  font-size: 14px;
  width: 200px;
  height: 49px;
  margin-bottom: 5px;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: url("../img/online/arrow.png") no-repeat 90% center;
}

.container .step04_area .hospital_imformation .room_inner01 table tbody tr td span { font-size: 14px; color: #666; display: block; }

.container .step04_area .hospital_imformation .room_inner01 table tbody tr td input,
.container .step04_area .hospital_imformation .room_inner02 table tbody tr td input {
  font-size: 14px;
  width: 250px;
  height: 45px;
  margin-bottom: 5px;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.container .step04_area .hospital_imformation .room_inner01 table tbody tr td #datepicker {
  background: url(../img/online/date.png) no-repeat 95% center;
}

#ui-datepicker-div { width: 260px !important; }

.container .step04_area .hospital_imformation .room_inner01 table tbody tr td input::placeholder,
.container .step04_area .hospital_imformation .room_inner02 table tbody tr td input::placeholder { color: #999; }

.container .step04_area .hospital_imformation .room_inner02 {
  float: left;
  width: 50%;
  height: 300px;
}

.container .step04_area .hospital_imformation .room_inner02 table { width: 100%; height: 300px; }
.container .step04_area .hospital_imformation .room_inner02 table tbody tr th { font-size: 17px; padding-left: 40px; }

.container .step04_area .hospital_imformation .room_inner02 table tbody tr td select {
  font-size: 14px;
  width: 80px;
  height: 49px;
  margin-bottom: 5px;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: url("../img/online/arrow.png") no-repeat 85% center;
}

.container .step04_area .hospital_imformation .room_inner02 table tbody tr td span { font-size: 14px; color: #666; display: block; }

.container .step04_area .hospital_imformation .room_inner03 { width: 100%; float: left; }
.container .step04_area .hospital_imformation .room_inner03 table { width: 100%; }
.container .step04_area .hospital_imformation .room_inner03 table tbody tr th { font-size: 17px; vertical-align: middle; }

.container .step04_area .hospital_imformation .room_inner03 table tbody tr td textarea {
  font-family: 'NotoSansKR-Regular';
  width: 98%;
  height: 130px;
  text-align: left;
  color: #999;
  padding: 10px 15px;
}

.container .step04_area .hospital_imformation .room_inner03 table tbody tr td textarea::placeholder { color: #aaa; }
.container .step04_area .hospital_imformation .room_inner03 table tbody tr td textarea:focus { outline: none; }

.container .step04_area .hospital_imformation .info_box {
  width: 100%;
  float: left;
  text-align: center;
  margin: 30px auto -10px auto;
}

/* step05 finish */
.container .step05_area .hospital_finish {
  border: 1px solid #ccc;
  width: 100%;
  height: 550px;
  background: #fafafa;
  text-align: center;
  padding-bottom: 30px;
}

.container .step05_area .hospital_finish img { text-align: center; margin: 100px auto; }
.container .step05_area .hospital_finish p { font-size: 22px; font-weight: 600; margin-bottom: 20px; color: #333; }
.container .step05_area .hospital_finish span { font-size: 15px; display: block; color: #666; }
.next_bt6 { padding: 10px 80px; }


/* ======================================================================
   SUB04 — 고객 지원 / 상담 (sub04_XX.html)
   ====================================================================== */

.bg_content .bg_area.sub04_bg,
body.page-sub04 .bg_content .bg_area {
  background: url(../img/help/sub_bg.png) no-repeat 0 0;
  background-size: cover;
}

.container .help_area {
  padding: 40px 0 100px 0;
  text-align: left;
}

/* 카드형 폼 — sub03 STEP4 와 동일 톤 (테이블 미사용) */
.container .help_area .hospital_imformation {
  border: none;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.container .help_area .help_card {
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 8px 20px;
  box-sizing: border-box;
  background: #fff;
}

.container .help_area .help_field {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}
.container .help_area .help_field:last-child {
  border-bottom: none;
}

.container .help_area .help_label {
  display: block;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.container .help_area .help_field select {
  font-family: 'NotoSansKR-Regular', sans-serif;
  font-size: 14px;
  width: 100%;
  height: 46px;
  margin: 0 0 8px;
  padding: 0 36px 0 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  background: #fff url("../img/online/arrow.png") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
}

.container .help_area .help_phone-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.container .help_area .help_phone-row #phone_number {
  width: 110px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.container .help_area .help_phone-row #phone {
  flex: 1;
  margin-bottom: 0;
}

.container .help_area .help_field input[type='text'],
.container .help_area .help_field input:not([type='checkbox']):not([type='button']) {
  font-size: 14px;
  width: 100%;
  height: 46px;
  margin: 0 0 8px;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}
.container .help_area .help_field input:last-child {
  margin-bottom: 0;
}
.container .help_area .help_field input::placeholder {
  color: #999;
}

.container .help_area .help_field textarea,
.container .help_area .help_field .textarea {
  font-family: 'NotoSansKR-Regular', sans-serif;
  display: block;
  width: 100%;
  min-height: 140px;
  height: 140px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: left;
  color: #333;
  resize: vertical;
}
.container .help_area .help_field textarea::placeholder {
  color: #aaa;
}
.container .help_area .help_field textarea:focus {
  outline: none;
}

.container .help_area .hospital_imformation .info_box {
  width: 100%;
  float: none;
  text-align: left;
  margin: 4px 0 0;
  padding: 4px 2px;
}

.container .help_area .hospital_next {
  margin-top: 28px;
  text-align: center;
}
.container .help_area .hospital_next .next_bt {
  padding: 12px 60px;
  margin-left: 0;
}


/* ======================================================================
   SUB05 — 컨설팅 선택 (sub05_01.html)
   ====================================================================== */

.bg_content .bg_area.sub05_bg,
body.page-sub05 .bg_content .bg_area {
  background: url(../img/help/sub_bg2.png) no-repeat 0 0;
  background-size: cover;
}

.container .consulting_area {
  font-family: 'NotoSansKR-Regular';
  padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 100px);
  text-align: left;
  overflow: visible;
}

.container .consulting_area .consulting_imformation {
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.container .consulting_area .consulting_imformation .room_inner01 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 0;
  float: none;
}

.container .consulting_area .consulting_imformation .room_inner01 .ico_box01,
.container .consulting_area .consulting_imformation .room_inner01 .ico_box02 {
  width: 100%;
  height: auto;
  min-height: 300px;
  float: none;
  margin: 0;
  padding: 40px 32px 36px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  border: none;
  border-radius: 25px;
  box-shadow: 0px 10px 50px #ddd;
  line-height: 1.65;
}

.container .consulting_area .consulting_imformation .room_inner01 .ico_box01 img,
.container .consulting_area .consulting_imformation .room_inner01 .ico_box02 img {
  width: 72px;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.container .consulting_area .consulting_imformation .consult-text {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.container .consulting_area .consulting_imformation .room_inner01 .ico_box01 p,
.container .consulting_area .consulting_imformation .room_inner01 .ico_box02 p {
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  margin: 0;
  word-break: keep-all;
}

.container .consulting_area .consulting_imformation .room_inner01 .ico_box01 span,
.container .consulting_area .consulting_imformation .room_inner01 .ico_box02 span {
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--red);
}

.container .consulting_area .consulting_imformation .room_inner02 {
  width: 100%;
  margin-top: 0;
  float: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box03,
.container .consulting_area .consulting_imformation .room_inner02 .ico_box04,
.container .consulting_area .consulting_imformation .room_inner02 .ico_box05 {
  font-family: 'NotoSansKR-Regular';
  width: 100%;
  height: auto;
  min-height: 300px;
  float: none;
  margin: 0;
  padding: 32px 24px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  border-radius: 25px;
  box-shadow: 0px 10px 50px #ddd;
  line-height: 1.8em;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box03 .ico_img {
  width: 56px;
  height: auto;
  margin: 0 0 16px;
  object-fit: contain;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box03 i {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  font-style: normal;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box03 span {
  font-size: 15px;
  color: #666;
  display: block;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box03 span b {
  font-size: 15px;
  font-style: normal;
  color: #a7a7a7;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box03 em {
  font-size: 12px;
  color: #666;
  line-height: 1.45;
  display: block;
  margin-top: auto;
  padding-top: 16px;
  font-style: normal;
  word-break: keep-all;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box04 img,
.container .consulting_area .consulting_imformation .room_inner02 .ico_box05 img {
  width: 56px;
  height: auto;
  margin: 0 0 20px;
  object-fit: contain;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box04 p,
.container .consulting_area .consulting_imformation .room_inner02 .ico_box05 p {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box04 span,
.container .consulting_area .consulting_imformation .room_inner02 .ico_box05 span {
  font-size: 15px;
  color: #a7a7a7;
  margin-top: 8px;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box04 b,
.container .consulting_area .consulting_imformation .room_inner02 .ico_box05 b {
  font-size: 15px;
  width: 170px;
  max-width: 100%;
  color: #333;
  background: #f5f5f5;
  border-radius: 25px;
  padding: 10px;
  font-weight: 600;
  display: block;
  text-align: center;
  margin: auto auto 0;
  cursor: pointer;
}

.container .consulting_area .consulting_imformation .room_inner02 .ico_box04 b:hover,
.container .consulting_area .consulting_imformation .room_inner02 .ico_box05 b:hover { color: #fff; background: var(--red); }


/* ======================================================================
   SUB06 — 고객사 레퍼런스 / 공지사항 (sub06_XX.html)
   ====================================================================== */

.bg_content .bg_area.sub06_bg,
body.page-sub06 .bg_content .bg_area {
  background: url(../img/reference/sub_bg.png) no-repeat 0 0;
  background-size: cover;
}

/* reference */
.container .reference_area {
  padding: 40px 0 100px 0;
  margin-bottom: 100px;
}

.container .reference_area .notice-detail-loading {
  text-align: center;
  padding: 80px 0;
  color: #888;
  font-size: 16px;
}

.container .reference_area .reference_imformation { text-align: center; margin: 0 auto; }

.container .reference_area .reference_imformation .room_title {
  border-top: 2px solid var(--red);
  border-bottom: 1px solid #ccc;
  padding: 40px 0;
  text-align: left;
}

.container .reference_area .reference_imformation .room_title p {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  display: inline-block;
}

.container .reference_area .reference_imformation .room_title span { font-size: 16px; color: #ccc; }

#category { float: left; margin: 5px 10px 5px 0; }
#regDate { display: block; text-align: right; }

.container .reference_area .reference_imformation .room_inner01 {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 30px;
  overflow: auto;
}

.room_inner01::-webkit-scrollbar { width: 6px; height: 5px; }
.room_inner01::-webkit-scrollbar-thumb { height: 17%; background-color: rgba(180, 180, 180, 1); border-radius: 10px; }
.room_inner01::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0); }

.container .reference_area .reference_imformation .room_inner01 img { margin: 50px 0 40px 0; }
.container .reference_area .reference_imformation .room_inner01 pre { color: #888; font-size: 15px; text-align: left; }

.container .reference_area .reference_imformation .room_inner02 {
  width: 100%;
  margin-top: 30px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 40px 0;
}

.container .reference_area .reference_imformation .room_inner02 .next_bt { width: 100%; }
.container .reference_area .reference_imformation .room_inner02 .next_bt ul { overflow: hidden; }

.container .reference_area .reference_imformation .room_inner02 .next_bt ul li {
  float: left;
  width: 50%;
  cursor: pointer;
}

.container .reference_area .reference_imformation .room_inner02 .next_bt ul li p:hover { color: #333; }
.container .reference_area .reference_imformation .room_inner02 .next_bt ul li p.null_txt { color: #888; }
.container .reference_area .reference_imformation .room_inner02 .next_bt ul li p.null_txt:hover { color: #999; }

.container .reference_area .reference_imformation .room_inner02 .next_bt ul li:nth-child(1) {
  text-align: left;
  background: url(../img/reference/bar.png) no-repeat 100% 0;
}

.container .reference_area .reference_imformation .room_inner02 .next_bt ul li:nth-child(2) { text-align: right; }

.container .reference_area .back {
  padding: 10px 30px;
  color: #333;
  background: #fff;
  border: 1px solid #333;
  border-radius: 5px;
  display: inline-block;
  margin-top: 30px;
  float: right;
  cursor: pointer;
}

/* notice */
.container .notice_area {
  width: 100%;
  margin: 40px auto 100px auto;
}

.container .notice_area .notice_title {
  width: auto;
  background: #f8f8f8;
  overflow: hidden;
  padding: 10px 30px;
}

.container .notice_area .notice_title p { float: left; color: #333; font-size: 16px; font-weight: 600; margin-top: 10px; }
.container .notice_area .notice_title .notice_search { float: right; }

.container .notice_area .notice_title .notice_search select {
  width: 90px;
  height: 45px;
  background: url(../img/arrow.png) no-repeat 90% 50%;
  background-color: #fff;
  padding-left: 15px;
  border: 1px solid #ccc;
  font-weight: 600;
  color: #333;
}

.container .notice_area .notice_title .notice_search option { font-size: 14px; color: #aaa; }

.container .notice_area .notice_title .notice_search input {
  width: 250px;
  height: 41px;
  color: #aaa;
  background: #fff;
  border: 1px solid #ccc;
  padding-left: 10px;
  margin-left: 2px;
}

.container .notice_area .notice_title .notice_search button {
  width: 80px;
  height: 44px;
  color: #fff;
  margin-top: 1px;
  background: #333333;
  font-weight: 600;
  border: 1px solid #333;
  vertical-align: bottom;
  cursor: pointer;
}

/* category_bt */
.category_bt { margin-top: 30px; text-align: left; }
.category_bt ul { overflow: hidden; }

.category_bt ul li { float: left; width: 280px; height: 50px; }

.category_bt button {
  font-family: 'NotoSansKR-Regular';
  font-size: 17px;
  border-radius: 25px;
  padding: 10px 25px;
  color: #888;
  margin-right: 5px;
  cursor: pointer;
  width: 100%;
  height: 50px;
  border: none;
  text-indent: -0.5em;
  background: url(../img/bar4.png) no-repeat 99% 50%;
}

.category_bt button.on {
  background-color: var(--red);
  border-radius: 25px;
  color: #fff;
  background-image: none;
}

.category_bt button:hover { opacity: 0.8; }
.category_bt button:last-child { margin-right: 0; }

/* notice table */
.container .notice_area .notice_inner { width: 100%; margin-top: 40px; }
.container .notice_area .notice_inner2 { width: 100%; margin-top: 40px; overflow: hidden; }

.container .notice_area .notice_inner table {
  width: 100%;
  border-top: 2px solid var(--red);
  border-bottom: 1px solid #ccc;
  margin-bottom: 40px;
}

.container .notice_area .notice_inner2 table {
  width: 48%;
  border-top: 2px solid var(--red);
  border-bottom: 1px solid #ccc;
  margin-bottom: 40px;
}

.container .notice_area .notice_inner2 .t_01 { float: left; }
.container .notice_area .notice_inner2 .t_02 { float: right; }

.container .notice_area .notice_inner table tr th {
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  vertical-align: middle;
}

.container .notice_area .notice_inner table tr td {
  font-size: 15px;
  font-weight: 500;
  color: #888;
  vertical-align: middle;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  text-align: center;
  cursor: pointer;
}

.container .notice_area .notice_inner2 table tr td {
  font-size: 15px;
  font-weight: 500;
  color: #888;
  vertical-align: middle;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  text-align: left;
}

.container .notice_area .notice_inner table tr td:hover,
.container .notice_area .notice_inner2 table tr td:hover { color: #999; }

.container .notice_area .notice_inner2 table tr .t_img { width: 34%; padding-left: 2vh; cursor: pointer; }
.container .notice_area .notice_inner2 table tr img { cursor: pointer; }

.container .notice_area .notice_inner2 table tr td span { font-size: 18px; color: #888; }

.container .notice_area .notice_inner2 table tr td span .t_date {
  background: url(../img/bar4.png) no-repeat 85% 50%;
  width: 100px;
  display: inline-block;
}

.container .notice_area .notice_inner2 table tr td p {
  font-size: 20px;
  font-weight: 600;
  margin-top: 7px;
  cursor: pointer;
  color: #333;
}

.container .notice_area .notice_inner2 table tr td button {
  padding: 10px 20px;
  font-size: 17px;
  font-weight: 600;
  color: #666;
  border: none;
  border-radius: 25px;
  margin-top: 105px;
  cursor: pointer;
}

.container .notice_area .notice_inner2 table tr td button:hover { opacity: 0.8; }

.container .notice_area .notice_inner .more,
.container .notice_area .notice_inner2 .more {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: var(--red);
  padding: 10px 40px;
  border-radius: 25px;
  display: inline-block;
  margin: 30px auto 0 auto;
  text-align: center;
  cursor: pointer;
}

/* download */
.download_area {
  margin-bottom: 40px;
  width: 100%;
}

.download_area ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}

.download_area ul li {
  width: 100%;
  height: auto;
  min-height: 240px;
  float: none;
  margin: 0;
  padding: 28px 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #cccccc;
  border-radius: 15px;
  background-color: #f8f8f8;
  background-repeat: no-repeat;
  background-position: right 14px top 24px;
  background-size: 52px auto;
}

.download_area ul li:nth-child(1) { background-image: url(../img/download/ico01.png); }
.download_area ul li:nth-child(2) { background-image: url(../img/download/ico02.png); }
.download_area ul li:nth-child(3) { background-image: url(../img/download/ico03.png); }
.download_area ul li:nth-child(4) { background-image: url(../img/download/ico04.png); }
.download_area ul li:nth-child(5) { background-image: url(../img/download/ico05.png); }

.download_area ul li p {
  font-family: 'NotoSansKR-Regular';
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 600;
  color: #111;
  margin: 0;
  padding-right: 56px;
  text-align: left;
  line-height: 1.3;
  word-break: keep-all;
}

.download_area ul li a {
  display: block;
  width: 100%;
  margin-top: auto;
  text-decoration: none;
}

.download_area ul li span {
  font-family: 'NotoSansKR-Regular';
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  color: #666;
  padding: 8px 18px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 25px;
  text-align: center;
  float: none;
  display: inline-block;
  margin: 16px 0 0;
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%;
  white-space: nowrap;
}

.download_area ul li span:hover { text-decoration: underline; text-underline-position: under; }


/* ======================================================================
   SUB07 — 지점 찾기 (sub07_01.html)
   ====================================================================== */

.bg_content .bg_area.sub07_bg,
body.page-sub07 .bg_content .bg_area {
  background: url(../img/map/sub_bg.png) no-repeat 0 0;
  background-size: cover;
}

ul.tabs {
  margin: 40px 0 32px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

ul.tabs > li {
  width: auto;
  background: #fff;
  margin: 0;
  color: #999999;
  border: 1px solid #ddd;
  border-radius: 25px;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

ul.tabs > li.current {
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
}

.tab-content { display: none; }

.tab-content.current {
  margin-bottom: 100px;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.map_kard {
  width: 100%;
  height: auto;
  min-height: 170px;
  border: 1px solid #ddd;
  float: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 28px 24px;
  box-sizing: border-box;
}

.map_kard .area_name {
  border-bottom: 1px solid #ddd;
  padding-bottom: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
}

.map_kard .area_name p {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--red);
  float: none;
}

.map_kard .area_name span {
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-size: 15px;
  color: #666;
  float: none;
}

.map_kard .area_name b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: auto;
  display: block;
  padding: 10px 16px;
  border-radius: 25px;
  font-size: 15px;
  color: #333;
  float: none;
  border: 1px solid #f5f5f5;
  background: #f5f5f5;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

.map_kard .area_name b:hover { color: #fff; background: var(--red); }
.map_kard > div > ul { margin-top: 25px; text-align: left; }
.map_kard > div > ul > li { padding-left: 25px; color: #999; }
.map_kard > div > ul > li:nth-child(1) { background: url(../img/map/T.png) no-repeat 0 2px; }
.map_kard > div > ul > li:nth-child(2) { background: url(../img/map/E.png) no-repeat 1px 50%; }
.map_kard > div > ul > li:nth-child(3) { background: url(../img/map/A.png) no-repeat 0 50%; }
.map_kard > .address2 > ul > li:nth-child(1) { background: url(../img/map/E.png) no-repeat 1px 2px; }
.map_kard > .address2 > ul > li:nth-child(2) { background: url(../img/map/A.png) no-repeat 1px 2px; }


/* =============================================
   INDEX — 히어로 Swiper (메인 배너)
   ============================================= */

body.page-index .swiper-container {
  height: 590px;
  overflow: hidden;
}

body.page-index .swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-index .swiper-container .swiper-slide .text_inner {
  width: 1400px;
  margin: 0 auto;
  position: relative;
}

body.page-index .swiper-container .swiper-slide .text_inner #text_box01,
body.page-index .swiper-container .swiper-slide .text_inner #text_box02,
body.page-index .swiper-container .swiper-slide .text_inner #text_box03,
body.page-index .swiper-container .swiper-slide .text_inner #text_box04 {
  position: absolute;
  transform: translate(0%, 140%);
  text-align: left;
}

body.page-index .swiper-container .swiper-slide .text_inner #text_box01 p,
body.page-index .swiper-container .swiper-slide .text_inner #text_box02 p,
body.page-index .swiper-container .swiper-slide .text_inner #text_box03 p,
body.page-index .swiper-container .swiper-slide .text_inner #text_box04 p {
  font-family: 'NotoSansKR-Regular', 'Noto Sans KR', sans-serif;
  font-size: 42px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3em;
  text-shadow: 0.5px 1px 1px #555;
}

body.page-index .swiper-container .swiper-slide .text_inner #text_box01 span,
body.page-index .swiper-container .swiper-slide .text_inner #text_box02 span,
body.page-index .swiper-container .swiper-slide .text_inner #text_box03 span,
body.page-index .swiper-container .swiper-slide .text_inner #text_box04 span {
  display: block;
  font-family: 'NotoSansKR-Regular', 'Noto Sans KR', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin-top: 20px;
}

body.page-index .swiper-container .swiper-slide .text_inner .slide_cta {
  margin-top: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 밝은 배경 슬라이드 — 연한 회색 풀블리드 백드롭 + 텍스트만 */
body.page-index .swiper-container .swiper-slide.slide-hero-cta {
  position: relative;
}

body.page-index .swiper-container .swiper-slide.slide-hero-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(40, 46, 52, 0.48) 0%,
      rgba(40, 46, 52, 0.22) 72px,
      rgba(40, 46, 52, 0) 150px
    ),
    linear-gradient(
      90deg,
      rgba(245, 246, 247, 0.72) 0%,
      rgba(245, 246, 247, 0.48) 42%,
      rgba(245, 246, 247, 0.22) 100%
    );
}

body.page-index .swiper-container .swiper-slide.slide-hero-cta .text_inner {
  position: relative;
  z-index: 2;
}

body.page-index .swiper-container .swiper-slide.slide-hero-cta .text_inner #text_box01 {
  transform: translate(0%, 55%) !important;
  max-width: 720px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

body.page-index .swiper-container .swiper-slide.slide-hero-cta .text_inner #text_box01 p {
  color: #1c2024 !important;
  text-shadow: none !important;
  font-family: 'NotoSansKR-Regular', 'Noto Sans KR', sans-serif !important;
  font-weight: 600 !important;
}

body.page-index .swiper-container .swiper-slide.slide-hero-cta .text_inner #text_box01 span {
  color: #3a424a !important;
  text-shadow: none !important;
  font-family: 'NotoSansKR-Regular', 'Noto Sans KR', sans-serif !important;
  font-weight: 400 !important;
}

body.page-index .swiper-container .swiper-slide.slide-hero-cta .text_inner #text_box01 .slide_cta {
  margin-top: 24px;
  display: inline-block;
}

/* 슬라이드 애니메이션 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box01 p,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box01 span,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box01 .slide_cta,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box02 p,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box02 span,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box03 p,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box03 span,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box04 p,
  body.page-index .swiper-container .swiper-slide.swiper-slide-active .text_inner #text_box04 span {
    animation: hero-text 1.2s 0.2s both;
  }
  @keyframes hero-text {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* 페이지네이션 */
body.page-index .swiper-container .swiper-pagination {
  text-align: left;
  position: relative;
  margin: 0 auto;
  top: -60px;
}
body.page-index .swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #ffffff;
  opacity: 1;
}
body.page-index .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  top: 5px;
  width: 18px;
  height: 20px;
  background: url(../img/haxagon.png) no-repeat 0px 3px;
  opacity: 1;
}
body.page-index .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100% !important;
  max-width: var(--container-wide) !important;
  margin: 0 auto;
}

/* gray background */
body.page-index .gray_bg {
  width: 100%;
  height: 360px;
  position: absolute;
  bottom: -50px;
  background: #f8f8f8;
  z-index: -1;
}

/* =============================================
   INDEX — 뉴스레터 (PC 전용 보강, 769px 이상)
   모바일 스타일과 완전 분리
   ============================================= */
@media screen and (min-width: 993px) {
  body.page-index .news_letter_title {
    width: 100% !important;
    height: 30px !important;
    background: url(../img/news_letter.png) no-repeat center center !important;
    background-size: auto 30px !important;
    margin-bottom: 30px !important;
    display: block !important;
  }

  body.page-index .news_letter_title .news_letter_title_text {
    display: none !important;
  }

  body.page-index .news_letter_title::before,
  body.page-index .news_letter_title::after {
    content: none !important;
    display: none !important;
  }

  body.page-index .swiper-container2 {
    width: 100% !important;
    max-width: var(--container-wide) !important;
    height: auto !important;
    overflow: hidden !important;
    margin: 0 auto 56px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.page-index .swiper-container2 .swiper-slide {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
  }

  body.page-index .swiper-container2 > .swiper-wrapper > .swiper-slide > div,
  body.page-index .swiper-container2 .slide01 {
    width: 100% !important;
    max-width: 170px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

  body.page-index .swiper-container2 .slide01 img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
  }

  body.page-index .swiper-container2 .swiper-slide > span {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555 !important;
    white-space: nowrap !important;
  }

  body.page-index .gray_bg {
    display: block !important;
  }
}


/* ----- SUB02_07 SeeSign 사용 흐름 슬라이드 ----- */
.container .content01_area .service_img_area .seesign-slider {
  position: relative;
  width: 320px;
  max-width: 100%;
  margin: 0 auto 60px;
  overflow: hidden;
}

.container .content01_area .service_img_area .seesign-slider .swiper-slide {
  margin: 0;
  text-align: center;
}

.container .content01_area .service_img_area .seesign-slider img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.container .content01_area .service_img_area .seesign-slider figcaption {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.container .content01_area .service_img_area .seesign-slider figcaption em {
  margin-right: 8px;
  font-style: normal;
  font-size: 13px;
  color: var(--red);
}

/* 메인 슬라이드용 .swiper-pagination-bullets { width: 1400px !important } 덮어씀 */
.container .content01_area .seesign-slider > .seesign-slider-pagination {
  width: 100% !important;
  margin-top: 12px;
  text-align: center;
}

/* page-sub02 의 content01_area span 공통 규칙(블록·여백)이 불릿(span)에 먹지 않게 덮어씀 */
body.page-sub02 .container .content01_area .seesign-slider-pagination .swiper-pagination-bullet {
  display: inline-block;
  margin: 0 4px;
}

body.page-sub02 .container .content01_area .seesign-slider-pagination .swiper-pagination-bullet-active {
  background: var(--red);
}