@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon'); /* font-family: 'Do Hyeon', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); /* font-family: 'Lobster', cursive;  */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  /* font-family: 'Poppins', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Poppins', 'Noto Sans KR', sans-serif;font-weight:400;background:#333}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Poppins', 'Noto Sans KR', sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Poppins', 'Noto Sans KR', sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Poppins', 'Noto Sans KR', sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}

/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background:#efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

/* 레이아웃 크기 지정 */
#header, #wrapper, #footer {min-width:1200px}

#hd_pop,
#header_wrapper,
#tnb .inner,
#gnb .gnb_wrap,
#container_wr,
#ft_wr {min-width:1200px}

/* 추가 CSS 시작 */
#header {position:fixed;z-index:9999;margin:0;padding:0;width:100%;height:auto;background-color: rgba(0, 0, 0, 0.95);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);backdrop-filter: blur(6px);}
#header_wrapper {position:relative;margin:0;padding:10px 20px;width:100%;height:80px;border-bottom:1px solid #666;display:grid;grid-template-columns:90px 200px 1fr;column-gap:10px;row-gap:0;}
#header_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#dk_title_logo {padding:0;width:auto;}
#dk_title_logo > a {display:block;text-decoration:none;color:#fff;}
#dk_title_logo > a > .dk_logo {margin:0px 10px 0 0;padding:0;width:auto;height:60px;}
#dk_title_logo > a > .dk_logo > img {width:auto;height:100%;}
#dk_title_name {padding:0;width:auto;}
#dk_title_name > a {display:block;text-decoration:none;color:#fff;}
#dk_title_name > a > .dk_logo_title {margin:0;padding:5px 0 0;}
#dk_title_name > a > .dk_logo_title > .title1 {margin:0;padding:0;font-size:16px;font-weight:300;line-height:18px;color:#efefef;letter-spacing:-0.4px;text-align:left;}
#dk_title_name > a > .dk_logo_title > .title2 {margin:0;padding:0;font-size:22px;font-weight:700;line-height:36px;color:#fff;letter-spacing:3px;}
#dk_top_menu {margin-right:10px;padding:0;width:auto;text-align:right;}
#dk_top_menu > ul {margin:0;padding:0;list-style:none;display:inline-block;}
#dk_top_menu > ul:after {display:block;visibility:hidden;clear:both;content:""}
#dk_top_menu > ul > li {float:left;margin-left:20px;padding:0;}
#dk_top_menu > Ul > li > a {margin:0;padding:0;line-height:60px;font-size:16px;color:#fff;font-weight:500;}

/* 기본 스타일 (PC용) */
.principles {
  margin: 32px auto 16px;
  padding: 24px 16px;
  max-width: 1200px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.principles-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.principles-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 16px;
  line-height: 1.7;
}

.principles-list li + li { margin-top: 8px; }
.principles-list.ko { font-weight: 500; }
.principles-list.en { color: #374151; }

/* 반응형 (모바일) */
@media (max-width: 768px) {
  .principles {
    padding: 16px 12px;         /* 여백 축소 */
  }
  .principles-inner {
    grid-template-columns: 1fr; /* 세로로 쌓기 */
    gap: 12px;
  }
  .principles-list {
    font-size: 14px;            /* 글자 작게 */
    line-height: 1.5;
  }
  .principles-list li + li {
    margin-top: 6px;            /* 항목 간 간격 축소 */
  }
}

/* 아주 작은 화면(예: 480px 이하)일 때 더 축소 */
@media (max-width: 480px) {
  .principles-list {
    font-size: 13px;
  }
}

.side_bar {
  display: none;
  margin: 0;
  padding: 0;
  font-size: 30px;
  color: #fff;
}

.side_menu.on {
  left: 0;
}


.side_menu {display:none;
  position: fixed; /* 스크롤과 상관없이 항상 화면에 고정 */
  top:-70px;left:0;bottom:0;width:230px;margin:0;padding:0 20px;border-right:1px solid #ccc;background:rgba(255,255,255,0.8);z-index:999;}
.side_menu > .side_title {position:relative;margin:23px 0;border-bottom:1px solid #ccc;}
.side_menu > .side_title > h3 {margin:0;padding:0;font-size:20px;font-weight:500;color:#000;}
.side_menu > .side_title > .sm_close {position:absolute;top:2px;right:-5px;padding:0 5px;width:auto;height:30px;font-size:26px;line-height:20px;color:#e91e63;z-index:999;}
.side_menu > ul {margin:0;padding:0;list-style:none;}
.side_menu > ul > li {position:relative;margin:0;padding:0;border-bottom:1px solid #aaa;}
.side_menu > ul > li > a {display:block;margin:0;padding:0;text-decoration:none;font-size:18px;line-height:30px;font-weight:400;color:#000;}
.side_menu > ul > li > a > span {margin-right:10px;}

.kakao11 {position:fixed;right:10px;top:250px;width:120px;height:auto;transition:right 0.3s ease;z-index:999;}
.kakao11 > a {display:inline-block;}
.kakao11 > a > img {width:100%;height:auto;}

#wrapper {position:relative;background:#fff;}

.box {
      position: relative;
      width: 100%;     /* 원하는 너비 */
      height: 800px;    /* 원하는 높이 */
      background: url('/images/test1.png') no-repeat center center;
      background-size: cover; /* 배경 꽉 차게 */
      
    }

    .box img {
      position: absolute;
      top: 55%;         /* 세로 가운데 */
      left: 50%;        /* 가로 가운데 */
      transform: translate(-50%, -50%);
      width: 1000px;     /* 위에 올릴 이미지 크기 */
      height: auto;
    }

    @media (max-width: 768px) {
  .box img {
    content: url("/images/test3.png");
    width: 100%;   /* 크기도 줄이기 */
  }
}

.gallery-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 박스 2개 나란히 */
    gap: 24px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 16px;
  }

  /* 개별 캐러셀 박스 */
  .carousel {
    --duration: 22s;                /* 한 바퀴 도는 시간(박스1 기본값) */
    position: relative;
    overflow: hidden;               /* 바깥으로 나가는 부분 숨김 */
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    height: 240px;                  /* 박스 높이 */
  }

  /* 두 번째 박스는 속도만 다르게 */
  .carousel.slow {
    --duration: 28s;
  }

  /* 트랙: 4장 + 4장(복제) = 8장으로 200% 폭 만들기 */
  .track {
    display: flex;
    width: 200%;                    /* 컨테이너의 2배 */
    height: 100%;
    animation: scroll var(--duration) linear infinite;
  }

  /* 호버하면 일시정지 */
  .carousel:hover .track {
    animation-play-state: paused;
  }

  /* 각 아이템은 컨테이너 기준 25% 폭(4장 = 100%) */
  .item {
    flex: 0 0 25%;
    height: 100%;
    position: relative;
  }

  .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* 좌→우로 부드럽게 무한 롤링 (0%~100% = 0 → -50%) */
  @keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 8장 중 앞 4장만큼 이동 */
  }

  /* 반응형(모바일) */
  @media (max-width: 768px) {
    .gallery-wrap {
      grid-template-columns: 1fr;  /* 세로로 쌓기 */
      gap: 16px;
    }
    .carousel {
      height: 200px;
    }
  }

#dk_background_wrapper {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.background-slider {
  position: absolute;
  top: 15%;
  right: 10%;
  width: auto;
  max-width: 100%;
  z-index: 2;
}

.slider-content {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding-left: 100px;
}

/* 좌우 레이아웃 */
.slider-section{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1250px;
  margin: 60px auto;
  padding: 40px 48px;
  background: linear-gradient(180deg,#0b0b0d 0%, #09090b 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  color: #e5e5e5;
}

/* 왼쪽 문구 */
.slider-caption{
  flex: 1;
  display: flex;                 /* ← 추가: 타이포 블록 정렬용 */
  flex-direction: column;
  gap: 16px;
}
.slider-caption ul{
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: .2px;
  color: #e5e5e5;
}
.slider-caption li{
  position: relative;
  padding-left: 22px;
}
.slider-caption li::before{
  content:"";
  position:absolute; left:0; top:.95em; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg,#d8b86e 0%, #b28a48 100%); /* 은은한 골드 */
}
.slider-caption li + li{ margin-top: 8px; }

/* ── 선택 요소(있으면 예쁘고, 없어도 무해) ── */
.caption-eyebrow{                 /* 작은 상단 라벨 */
  font: 600 12px/1 system-ui, "Noto Sans KR", sans-serif;
  letter-spacing: .25em;
  color: #9aa0a6;
}
.caption-headline{                /* 큰 헤드라인 (줄바꿈은 <span>으로) */
  margin: 0;
  font-family: "Noto Serif KR", serif;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .1px;
  font-size: clamp(16px, 2vw, 30px);
  color: #f2f2f2;
}
.caption-headline span{ display:block; }
.caption-sub{                     /* 보조 설명문 */
  margin: 2px 0 0;
  font: 400 15px/1.9 "Noto Sans KR", system-ui, sans-serif;
  color: #b9bdc1;
}
.caption-cta{                     /* 액션 버튼 */
  display:inline-block; margin-top: 10px;
  padding: 12px 20px; border-radius: 8px;
  background: #1f2937; color:#fff; text-decoration:none;
  font: 600 14px/1 "Noto Sans KR", sans-serif;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.caption-cta:hover{
  transform: translateY(-1px);
  background:#111827;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* 오른쪽 슬라이드 */
.slider-images{
  position: relative;
  flex: 1.6;                    /* 비율: 문구 1 : 이미지 1.6 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #0a0a0c;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}
.slider-images img{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.slider-images img.active{ opacity: 1; }

/* 반응형 */
@media (max-width: 992px){
  .slider-section{ gap: 28px; padding: 32px 36px; }
  .slider-caption ul{ font-size: 18px; }
}
@media (max-width: 768px){
  .slider-section{ flex-direction: column; gap: 20px; padding: 20px; }
  .slider-caption{ align-items:center; text-align:center; gap: 14px; }
  .slider-caption ul{ font-size: 16px; line-height: 1.6; }
  .slider-images{ width: 100%; border-radius: 10px; }
  .caption-sub{ font-size: 14px; line-height: 1.8; }
}

.top-spacing {
  height: 50px;
}

.main-content {
  margin-top: 180px;       /* 슬라이드 또는 동영상 높이만큼 여백 확보 */
  padding: 120px;           /* 내부 여백 (선택 사항) */
  position: relative;      /* 필요시 z-index 조절을 위해 */
  z-index: 2;              /* 배경보다 위에 위치하게 */
  font-size: 31px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* 텍스트 쉐도우 추가 */
}

.slider-text {
  max-width: 90%;
  margin: auto;
  text-align: center;
}

.slider-text h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: bold;
  color: white;
}

.slider-text p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: white;
}


/* 모바일 기준 */
@media (max-width: 768px) {
  .top-spacing {
    height: 20px;
  }

  .slider-text h2 {
    font-size: 2rem;
  }

  .slider-text p {
    font-size: 1.5rem;
  }

  .video-buttons a {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

/* PC 기준 */
@media (min-width: 1024px) {
  .slider-text h2 {
    font-size: 48px !important;
  }

  .slider-text p {
    font-size: 34px !important;
  }
}

.video-buttons a {
  display: inline-block;
  margin: 0 10px;
  padding: 10px 18px;
  background-color: rgba(26, 44, 86, 0.7); /* ← 반투명 설정 */
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.video-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* 이게 없으면 왼쪽에 붙을 수 있음 */
  text-align: center;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.contact-section {
  background-image: url('/images/tel_bk.jpg'); /* 배경 이미지 경로 */
  background-size: cover;         /* 이미지를 전체 영역에 맞춤 */
  background-position: center;    /* 이미지 위치 중앙 정렬 */
  background-repeat: no-repeat;
  padding: 80px 40px;             /* 위아래 여백 조정 */
  text-align: center;             /* 버튼들 중앙 정렬 */
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 40px; /* 가로/세로 간격 */
  padding: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-buttons a {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #132b56;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.contact-buttons a:hover {
  transform: translateY(-2px);
  background-color: #1e3a72;
}

.contact-buttons img {
  width: 25px;
  height: 25px;
}

#footer {position:relative;margin:0;padding:0;width:100%;height:auto;background:#333;}
#ft_wr {margin:0;padding:20px 0 10px;max-width:100%;width:100%;text-align:center;}
#ft_wr > .ft_cnt {width:100%;padding:0;}
#ft_copy {color:#ccc;margin:0;padding:10px 0 20px;width:100%;border-top:1px solid #666;}
.ft_info {margin:0;padding:0;}
.ft_info_m {display:none;}

.dk_section {position:relative;margin:0;padding:0;width:100%;min-height:300px;height:auto;overflow:hidden;border-bottom:1px solid #ccc; background: linear-gradient(180deg, #0b0b0d 0%, #09090b 100%); /* ← 세련된 다크톤 */}
.dk_section:after {display:block;visibility:hidden;clear:both;content:""}
.dk_wrapper {position:relative;margin:0 auto;padding:20px 0;width:1200px;}
.dk_wrapper_code {padding:20px 0;}
.dk_nopadding {padding:0;}
.dk_content_img {display:block;position:relative;margin:0;padding:0;width:100%;height:auto;min-width:1200px;}
.dk_content_img > img {width:100%;height:auto;}
.dk_mobile_content_img {display:none;position:relative;margin:0;padding:0;width:100%;height:auto;}
.dk_mobile_content_img > img {width:100%;height:auto;}
.dk_bg_lightgray {background:#f9f9f9;}

.dk_business {position:relative;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;list-style:none;}
.dk_business > li {margin:0;padding:0;}
.dk_business > li > .bs_img {position:relative;margin:0 0 10px;height:auto;overflow:hidden;border:1px solid #ccc;}
.dk_business > li > .bs_img > img {width:100%;height:auto;transition:all 0.3s linear}
.dk_business > li > .bs_img:hover > img {-moz-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);}
.dk_business > li > .bs_img > a {position:absolute;top:0;left:0;width:100%;height:100%;text-decoration:none;opacity:0;}
.dk_business > li > .bs_txt {margin:0;padding:0;width:100%;height:auto;background:#f9f9f9;}
.dk_business > li > .bs_txt > a {display:block;margin:0 0 10px;padding:0;font-size:16px;font-weight:400;color:#444;width:100%;height:auto;line-height:22px;word-break:keep-all;}
.dk_business > li > .bs_txt > span {color:#000;font-weight:500;}
.dk_business > li > .bs_doc {position:relative;margin:0;padding:10px;width:100%;height:auto;border:1px solid #ccc;background:#f5f5f5;}
.dk_business > li > .bs_line3 {height:194px;overflow:hidden;overflow-y:scroll;}
.dk_business > li > .bs_line4 {height:172px;overflow:hidden;overflow-y:scroll;}
.dk_business > li > .bs_line5 {height:150px;overflow:hidden;overflow-y:scroll;}
.dk_business > li > .bs_doc > p {margin-bottom:10px;font-size:14px;font-weight:400;color:#555;line-height:20px;}
.dk_business > li > .bs_doc > p.bs_doc_title {font-weight:500;color:#333;}

h2 {font-size:40px;text-align:center;margin-bottom:30px;}

.dk_color_white {color:#fff;}
.nt_list {position:relative;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:30px;list-style:none;}
.nt_list > li {margin:0;padding:0;width:100%;background:#fff;border:1px}
.nt_list > li > a {display:block;margin:0;padding:0;text-decoration:0;width:100%;}
.nt_list > li > a > .area_name {margin:0;padding:5px 0;font-size:20px;font-weight:500;color:#fff;text-align:center;background:#000;border-bottom:1px solid #999;}
.nt_list > li > a > .area_phone {margin:0;padding:5px 0;font-size:24px;font-weight:500;color:#90caf9;text-align:center;background:#5c5835;}

.dk_bg_latest {background:#efefef;}
.bd_list {position:relative;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:50px;list-style:none;}
.bd_list > .bd_latest {margin:0;padding:0;width:100%;}


.dk_location {position:relative;margin:20px 0;padding:0;width:100%;display:grid;grid-template-columns:600px 1fr;gap:50px;}
.dk_maps_list {position:relative;margin:0;padding:0;width:100%;height:400px;border:1px solid #ccc;overflow:hidden;}
.dk_maps_info {position:relative;margin:0;padding:0;width:100%;height:400px;overflow:hidden;}
.map_img {position:absolute;top:0;left:0;width:100%;height:400px;display:none;}
.map_box {position:relative;margin:0;padding:0;width:100%;height:100%;text-align:center}
.map_img > a {position:absolute;top:0;left:0;bottom:0;width:100%;background:transparent;opacity:0;z-index:1000;}
.map_bg {position:absolute;left:0;bottom:0;margin:0;padding:0;width:100%;height:400px;z-index:500;}
.map_bg > img {width:100%;height:auto;}
.map_loc {position:relative;display:inline-block;margin:130px auto 0;padding:10px;width:auto;background:#fff;border:1px solid #333;border-radius:5px;z-index:1000;}
.map_loc > .loc_title {margin:0 0 2px;padding:0;text-align:center;font-size:16px;font-weight:500;color:#ff0000;line-height:16px;}
.map_loc > .loc_address {margin:0;padding:0;font-size:14px;font-weight:400;color:#333;}
.map_loc > .loc_arrow_out {position:absolute;left:0;bottom:-21px;font-size:30px;color:#333;text-align:center;width:100%;}
.map_loc > .loc_arrow_in {position:absolute;left:0;bottom:-19px;font-size:30px;color:#fff;text-align:center;width:100%;}

.map_area {position:relative;width:100%;height:auto;margin-bottom:70px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
.map_area > li {margin:0;padding:0;border:2px solid #333;background:#555;width:100%;height:40px;font-size:18px;font-weight:400;line-height:36px;text-align:center;color:#fff;cursor:pointer;}
.map_area > li.active {color:#fff;background:rgba(33,150,243,0.8);}
.map_addr {position:relative;margin:0;padding:39px 25px 25px;border-radius:5px;background:rgba(0,0,0,0.5);}
.map_addr > .addr2 {margin:0;padding:0;font-size:36px;font-weight:400;color:#333;}
.map_addr > .addr2 > span {display:inline-block;padding-top:10px;border-top:4px solid #ffeb3b;color:#ffeb3b;}
.map_addr > .addr3 {margin:0 0 10px;padding:0;font-size:22px;font-weight:400;color:#fff;letter-spacing:-1px;}
.map_addr > .addr4 {margin:0 0 0 2px;padding:0;font-size:22px;font-weight:500;color:#fff;}
.map_addr > .addr4 > span {position:relative;margin:0;padding:0;color:#ffeb3b;}

.call_number {display:none;}

.phone1-number-overlay {display:none;position:absolute;top:41.05%;margin-left:5%;padding:0;width:90%;height:50px;}
.phone2-number-overlay {display:none;position:absolute;top:25.6%;margin-left:5%;padding:0;width:90%;height:50px;}


/* 지역별 흥신소 전화번호 위치 지정 */
/* 모바일 버튼 클릭을 위한 자표설정 */
/* iPhone  - 460px */
@media screen and (max-width: 460px) {
  .phone1-number-overlay {top:1730px;height:70px;}
  .phone2-number-overlay {top:2505px;height:70px;}
}
/* iPhone  - 430px */
@media screen and (max-width: 430px) {
  .phone1-number-overlay {top:1615px;height:65px;}
  .phone2-number-overlay {top:2340px;height:65px;}
}
/* iPhone 12/13/14 Pro Max - 428px */
@media screen and (max-width: 428px) {
  .phone1-number-overlay {top:1610px;height:65px;}
  .phone2-number-overlay {top:2330px;height:65px;}
}
/* iphone - 414px */
@media screen and (max-width: 414px) {
  .phone1-number-overlay {top:1555px;height:65px;}
  .phone2-number-overlay {top:2255px;height:65px;}
}
/* Galaxy S20/S21/S22 Ultra - 412px 요기까지*/ 
@media screen and (max-width: 412px) {
  .phone1-number-overlay {top:1550px;height:60px;}
  .phone2-number-overlay {top:2245px;height:60px;}
}
/* iPhone 15 - 393px */
@media screen and (max-width: 393px) {
  .phone1-number-overlay {top:1475px;height:60px;}
  .phone2-number-overlay {top:2140px;height:60px;}
}
/* iPhone 12/13/14 - 390px */
@media screen and (max-width: 390px) {
  .phone1-number-overlay {top:1465px;height:55px;}
  .phone2-number-overlay {top:2125px;height:55px;}
}
/* iPhone SE (2020) - 375px */
@media screen and (max-width: 375px) {
  .phone1-number-overlay {top:1410px;height:53px;}
  .phone2-number-overlay {top:2045px;height:53px;}
}
/* Galaxy S20/S21/S22 - 360px */
@media screen and (max-width: 360px) {
  .phone1-number-overlay {top:1355px;height:50px;}
  .phone2-number-overlay {top:1965px;height:50px;}
}
/* iphone - 320px */
@media screen and (max-width: 320px) {
  .phone1-number-overlay {top:1200px;height:50px;}
  .phone2-number-overlay {top:1740px;height:50px;}
}

/* 모바일 사이즈 설정 */
@media (min-width: 320px) and (max-width: 1199px) {
  #header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 화면 중앙에 고정 */
    width: 100%;
    max-width: 460px;            /* 헤더 배경도 460px 안에서 제한 */
    background-color: rgba(0, 0, 0, 0.95);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);backdrop-filter: blur(6px);
    z-index: 9999;
    box-sizing: border-box;
  }
  #header, #wrapper, #footer {min-width:320px;max-width:460px;margin:0 auto;}
  #hd_pop,
  #header_wrapper,
  #tnb .inner,
  #gnb .gnb_wrap,
  #container_wr,
  #ft_wr {min-width:320px;max-width:460px;width:100%;}


  .main-content {
  top: 30%;       /* 슬라이드 또는 동영상 높이만큼 여백 확보 */
  padding: 90px;           /* 내부 여백 (선택 사항) */
  position: relative;      /* 필요시 z-index 조절을 위해 */
  z-index: 2;              /* 배경보다 위에 위치하게 */
  font-size: 31px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  padding-left: 12%;
}

  #header_wrapper {height:70px;padding:5px 10px 0;grid-template-columns:60px 1fr 70px;}
  #dk_title_logo > a > .dk_logo {padding:5px 0 0 0;}
  #dk_title_logo > a > .dk_logo > img {width:100%;height:auto;}
  #dk_title_name > a > .dk_logo_title {padding:7px 0 0;}
  #dk_title_name > a > .dk_logo_title > .title1 {text-align:center;letter-spacing:-0.2px;font-size:14px;padding-left:0px;}
  #dk_title_name > a > .dk_logo_title > .title2 {text-align:center;letter-spacing:2px;line-height:25px;font-size:20px;margin-right:0;}

  .kakao11 {top:100px;}
  #dk_top_menu {margin-right:0;}
  #dk_top_menu > ul {display:none;}
  .side_bar {display:block;margin-top:7px;}
  .ft_info {display:none;}
  .ft_info_m {display:block;} 
  #top_btn {bottom:10px;right:10px;width:40px;height:40px;line-height:36px;z-index:9999;}

  h2 {font-size:24px;text-align:center;margin-bottom:20px;}

  .dk_content_img {display:none;}
  .dk_mobile_content_img {display:block;}
  .dk_wrapper {width:100%;padding:0 0 20px;}
  .dk_wrapper_code {padding:20px 10px;}

  .dk_business {grid-template-columns:repeat(2,1fr);gap:10px;}
  .dk_business > li > .bs_txt {font-size:14px;line-height:22px;}

  .nt_list {grid-template-columns:repeat(2,1fr);gap:10px;}
  .nt_list > li > a > .area_name {font-size:16px;}
  .nt_list > li > a > .area_phone {font-size:17px;letter-spacing:-0.5px;}

  .bd_list {grid-template-columns:repeat(1,1fr);gap:0;}

  .dk_location {grid-template-columns:repeat(1,1fr);gap:10px;}
  .map_bg > img {width:auto;height:auto;object-fit:cover;object-position:center;}
  .dk_maps_info {height:auto;}
  .map_area {margin-bottom:5px;grid-template-columns:repeat(3,1fr);gap:5px;}
  .map_addr > .addr2 {font-size:26px;}
  .map_addr > .addr3 {font-size:14px;}
  
  .call_number {display:block;position:fixed;left:2%;bottom:20px;margin:0;padding:9px 0;width:96%;border:1px solid #fff;background:rgba(0,0,0,0.8);text-align:center;z-index:1000;}
  .call_number > a {position:relative;display:inline-block;margin:0;padding:0 0 0 100px;font-size:25px;font-weight:700;color:#ffeb3b;text-decoration:none;}
  .call_number > a > span {position:absolute;top:0;left:0;color:#fff;font-size:23px;font-weight:700;}  

  .phone1-number-overlay {display:block;}
  .phone2-number-overlay {display:block;}
  
  .bd_list > .bd_latest:nth-child(2) {display:none;}
  
}