@charset "utf-8";
/* 은재 공인중개사사무소 - 2010년풍 재현 (루사이트 리뉴얼 '전' 예시)
   일부러 옛날 방식: 고정폭 960px, 굴림 12px, 표 레이아웃, 광택 그라디언트 버튼.
   반응형이 아니다(리뉴얼 전 이야기의 일부). 서버 코드 없음, 정적 파일만. */

* { margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  font-family: "굴림", Gulim, "돋움", Dotum, AppleGothic, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
  background-color: #cfcfcf;
  background-image: repeating-linear-gradient(45deg, #d6d6d6 0, #d6d6d6 2px, #cbcbcb 2px, #cbcbcb 4px);
  word-break: keep-all;
}
img { border: 0; vertical-align: top; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: #333; text-decoration: none; }
a:hover { color: #b34400; text-decoration: underline; }
a:focus, button:focus, summary:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: 2px dotted #000; outline-offset: 1px; }
button { font-family: inherit; font-size: 12px; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 12px; color: #333; }
[hidden] { display: none !important; }

/* 리뉴얼 전 예시 띠 */
.demo-ribbon {
  padding: 5px 10px;
  background: #fff36b;
  border-bottom: 1px solid #c9b800;
  color: #222;
  font-weight: bold;
  text-align: center;
}

#skip a { position: absolute; left: -9999px; top: 0; }
#skip a:focus { left: 10px; top: 30px; z-index: 30; padding: 5px 10px; background: #000; color: #fff; }

/* 전체 틀 */
#wrap {
  position: relative;
  width: 960px;
  margin: 0 auto;
  background: #fff;
  border-left: 1px solid #a9a9a9;
  border-right: 1px solid #a9a9a9;
}

/* 상단 */
#header { position: relative; }
.util {
  height: 26px;
  padding-right: 12px;
  background: #f4f4f4;
  border-bottom: 1px solid #ddd;
  text-align: right;
  font-size: 11px;
  line-height: 26px;
}
.util li { display: inline; }
.util li + li:before { content: "|"; margin: 0 6px; color: #bbb; }
.util a, .util__off { color: #666; }
.util__off { cursor: default; }

.head-row { width: 100%; height: 88px; }
.logo { padding-left: 18px; vertical-align: middle; }
.logo a { color: #1d3d8f; }
.logo a:hover { text-decoration: none; }
.logo__mark {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -2px;
  color: #1d3d8f;
  text-shadow: 2px 2px 0 #9fb3e0, 3px 3px 3px #555;
}
.logo__name {
  margin-left: 6px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 1px #aaa;
}
.logo__sub { margin-top: 2px; padding-left: 4px; font-size: 11px; color: #666; }
.head-tel { width: 230px; padding-right: 16px; text-align: right; vertical-align: middle; }
.head-tel__label {
  display: inline-block;
  padding: 1px 6px;
  background: #b34400;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
}
.head-tel__num {
  font-family: Arial, "굴림", Gulim, sans-serif;
  font-size: 26px;
  font-weight: bold;
  color: #b34400;
  letter-spacing: -1px;
  vertical-align: middle;
}
.head-tel__time { display: block; font-size: 11px; color: #666; }

/* GNB: 광택 남색 그라디언트 + 베벨 */
#gnb {
  height: 40px;
  background: linear-gradient(to bottom, #4f74c7 0%, #2a4fa3 48%, #183b8a 50%, #1f4597 100%);
  border-top: 1px solid #10296a;
  border-bottom: 1px solid #0c2258;
  font-size: 0;
}
#gnb li { display: inline-block; width: 160px; }
#gnb a {
  display: block;
  height: 38px;
  border-left: 1px solid #6f8fd8;
  border-right: 1px solid #12306f;
  border-top: 1px solid #7d9be0;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 38px;
  text-align: center;
  text-shadow: 1px 1px 0 #0b1f55;
}
#gnb li:first-child a { border-left: 0; }
#gnb li:last-child a { border-right: 0; }
#gnb a:hover, #gnb a:focus {
  background: linear-gradient(to bottom, #ffb35c 0%, #f08a1c 48%, #e0700a 50%, #f08a1c 100%);
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 0 #8a3a00;
}

/* 공지 흐름 글 (marquee 태그 대신 CSS 애니메이션) */
.notice-line {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  background: #fffbe0;
  border-bottom: 1px solid #e3d79a;
  overflow: hidden;
}
.notice-line__label {
  flex: none;
  margin-right: 8px;
  padding: 0 5px;
  background: #c00;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
}
.notice-line__view { flex: 1; overflow: hidden; white-space: nowrap; }
.notice-line__track {
  display: inline-block;
  white-space: nowrap;
  color: #6b4b00;
  animation: notice-flow 38s linear infinite;
}
.notice-line__track span { display: inline-block; }
.notice-line:hover .notice-line__track,
.notice-line:focus-within .notice-line__track,
.notice-line.is-paused .notice-line__track { animation-play-state: paused; }
@keyframes notice-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.notice-line__toggle {
  display: none;
  flex: none;
  margin-left: 8px;
  padding: 0 6px;
  height: 18px;
  background: linear-gradient(#fff, #e6e6e6);
  border: 1px solid #aaa;
  border-color: #ccc #888 #888 #ccc;
  color: #333;
  font-size: 11px;
}
.js .notice-line__toggle { display: inline-block; }

/* 플래시 배너 흉내 */
#visual {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-bottom: 3px solid #1d3d8f;
  background: #223;
}
.slide { position: absolute; left: 0; top: 0; width: 960px; height: 300px; }
.slide--2 { opacity: 0; animation: slide-fade 12s infinite; }
#visual:hover .slide--2 { animation-play-state: paused; }
@keyframes slide-fade {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
.slide__title {
  position: absolute;
  left: 40px;
  top: 70px;
  font-family: "돋움", Dotum, "굴림", Gulim, sans-serif;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: -2px;
  color: #fffbd0;
  text-shadow: -2px -2px 0 #1b2c66, 2px -2px 0 #1b2c66, -2px 2px 0 #1b2c66, 2px 2px 0 #1b2c66, 4px 5px 4px rgba(0, 0, 0, 0.7);
}
.slide__sub {
  position: absolute;
  left: 42px;
  top: 192px;
  padding: 4px 10px;
  background: rgba(17, 34, 85, 0.75);
  border: 1px solid #8aa2e0;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.visual__gloss {
  position: absolute;
  left: 0;
  top: 0;
  width: 960px;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* 2단 레이아웃 (표) */
#container { width: 960px; table-layout: fixed; }
#aside {
  width: 210px;
  padding: 12px 0 20px 10px;
  vertical-align: top;
  background: #f7f7f7;
  border-right: 1px solid #ddd;
}
#contents { padding: 12px 16px 24px 18px; vertical-align: top; }

/* 사이드 박스 */
.box {
  width: 198px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #b9c4dd;
}
.box__title {
  height: 26px;
  padding-left: 10px;
  background: linear-gradient(to bottom, #f3f6fc, #d6def0);
  border-bottom: 1px solid #b9c4dd;
  color: #1d3d8f;
  font-size: 12px;
  line-height: 26px;
}
.box__title:before { content: "▶ "; font-size: 9px; color: #b34400; vertical-align: 1px; }

.quick { padding: 8px 10px 10px; }
.quick label { display: block; margin-top: 4px; color: #555; font-size: 11px; }
.quick select {
  width: 176px;
  height: 21px;
  border: 2px inset #ddd;
  background: #fff;
}
.quick__btns { margin-top: 8px; text-align: center; }

/* 베벨 버튼 */
.btn-bevel {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(to bottom, #ffffff, #dcdcdc);
  border: 2px outset #e3e3e3;
  color: #333;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
}
.btn-bevel:hover { background: linear-gradient(to bottom, #fff7e8, #ffd08a); color: #333; text-decoration: none; }
.btn-bevel:active { border-style: inset; }
.btn-bevel--blue { background: linear-gradient(to bottom, #4a6cbf, #1f4597); border-color: #4a6cc0; color: #fff; }
.btn-bevel--blue:hover { background: linear-gradient(to bottom, #c44a00, #9a3a00); border-color: #f09040; color: #fff; }
.btn-bevel--lg { padding: 5px 18px; font-size: 13px; }

/* 공지사항 */
.notice-list { padding: 4px 8px 6px; }
.notice-list li { border-bottom: 1px dotted #ccc; }
.notice-list li:last-child { border-bottom: 0; }
.notice-list summary {
  display: block;
  padding: 4px 0;
  font-size: 11px;
  cursor: pointer;
  list-style: none;
  overflow: hidden;
}
.notice-list summary::-webkit-details-marker { display: none; }
.notice-list summary:hover .notice-list__t { color: #b34400; text-decoration: underline; }
.notice-list__t:before { content: "· "; }
.notice-list__d { float: right; color: #666; font-family: Tahoma, Arial, sans-serif; font-size: 11px; }
.notice-list details p { padding: 2px 4px 6px 8px; color: #555; font-size: 11px; background: #fafafa; }

.ico-new {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: #c44a00;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 11px;
  text-align: center;
  vertical-align: 1px;
}
.ico-hot { color: #c00; font-weight: bold; }

/* 상담 전화 */
.box--tel {
  padding: 10px 0;
  background: linear-gradient(to bottom, #ffffff, #eef2fb);
  text-align: center;
}
.box-tel__label { color: #1d3d8f; font-size: 13px; font-weight: bold; }
.box-tel__num a {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #b34400;
  letter-spacing: -1px;
}
.box-tel__time { color: #555; font-size: 11px; }

/* 배너 링크 */
.banner-links li { margin-bottom: 6px; }
.bl {
  display: block;
  width: 186px;
  padding: 7px 6px;
  border: 1px solid #999;
  font-size: 11px;
  line-height: 1.4;
}
.bl b { font-size: 13px; }
.bl--molit { background: linear-gradient(to right, #e9f4e2, #c7e3b5); color: #2c5a16; }
.bl--iros { background: linear-gradient(to right, #eef0fa, #c9d0ee); color: #22337a; }
.bl:hover { border-color: #b34400; color: #b34400; text-decoration: none; }

/* 방문자 카운터 */
.counter {
  width: 186px;
  margin-top: 4px;
  padding: 6px;
  background: #333;
  border: 2px inset #777;
  color: #ddd;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
.counter p { overflow: hidden; }
.counter__k { float: left; color: #ccc; font-weight: bold; }
.counter__v { float: right; padding: 0 4px; background: #000; color: #4cff4c; letter-spacing: 2px; }
.counter .counter__note { margin-top: 3px; color: #bbb; font-family: "굴림", Gulim, sans-serif; font-size: 11px; text-align: right; }

/* 본문 섹션 */
.section { margin-bottom: 26px; }
.sec-title {
  position: relative;
  height: 28px;
  margin-bottom: 10px;
  border-bottom: 2px solid #1d3d8f;
  font-size: 15px;
  line-height: 28px;
}
.sec-title span { padding-left: 18px; background: linear-gradient(#b34400, #b34400) no-repeat 2px 9px / 10px 10px; color: #222; }
.sec-title .more { position: absolute; right: 0; top: 0; font-size: 11px; font-weight: normal; color: #666; }
.sub-title { margin: 16px 0 8px; color: #1d3d8f; font-size: 13px; }

/* 회사소개 */
.intro { width: 100%; }
.intro__img { width: 162px; vertical-align: top; }
.intro__img img { padding: 3px; border: 1px solid #ccc; }
.intro__txt { vertical-align: top; color: #555; }
.intro__txt p { margin-bottom: 6px; }
.intro__hi { color: #1d3d8f; font-size: 13px; }
.intro__sign { text-align: right; font-weight: bold; color: #333; }

/* 추천매물 */
.thumbs { overflow: hidden; }
.thumbs li {
  float: left;
  width: 164px;
  margin: 0 8px 10px 0;
  font-size: 11px;
  color: #555;
  text-align: center;
}
.thumbs li:nth-child(4n) { margin-right: 0; }
.thumbs img, .noimg {
  display: block;
  width: 150px;
  height: 100px;
  margin: 0 auto 4px;
  padding: 3px;
  border: 1px solid #ccc;
}
.noimg {
  background: #eee;
  color: #666;
  font-family: Arial, "굴림", sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
  padding-top: 34px;
  height: 69px;
}
.thumbs__t { color: #333; font-weight: bold; font-size: 12px; }
.price { color: #c00; font-weight: bold; }
.deal { font-size: 11px; font-weight: bold; }
.deal:before { content: "["; }
.deal:after { content: "]"; }
.deal--sale { color: #c0392b; }
.deal--jeonse { color: #1d6f2a; }
.deal--rent { color: #1d3d8f; }
.sample-note { color: #666; font-size: 11px; }

/* 매물 게시판 */
.board-info { margin-bottom: 4px; color: #555; font-size: 11px; }
.board-info b { color: #b34400; }
.board-all {
  margin-left: 6px;
  padding: 0 6px;
  background: linear-gradient(#fff, #e6e6e6);
  border: 1px solid #999;
  font-size: 11px;
}
.board { width: 100%; table-layout: fixed; border-top: 2px solid #1d3d8f; font-size: 11px; }
.board caption { position: absolute; left: -9999px; }
.board th {
  height: 26px;
  background: linear-gradient(#f6f6f6, #e4e4e4);
  border-bottom: 1px solid #bbb;
  color: #333;
  font-weight: bold;
}
.board td {
  height: 24px;
  padding: 0 3px;
  border-bottom: 1px solid #e2e2e2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board tbody tr:nth-child(even) td { background: #f5f8fd; }
.board tbody tr:hover td { background: #fff5d6; }
.board td.subj { text-align: left; color: #333; }
.board td.num, .board td.date { color: #666; font-family: Tahoma, Arial, sans-serif; font-size: 11px; }
.board td.price { color: #c00; }
.js .board tbody tr.is-off { display: none; }
.board-empty { padding: 20px 0; border-bottom: 1px solid #ddd; text-align: center; color: #666; }

.pager { margin-top: 10px; text-align: center; font-size: 0; }
.pager button {
  margin: 0 2px;
  padding: 1px 6px;
  background: #fff;
  border: 1px solid #bbb;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
}
.pager button:hover { border-color: #b34400; color: #b34400; }
.pager button[aria-current="page"] { background: #1d3d8f; border-color: #1d3d8f; color: #fff; font-weight: bold; }
.pager button:disabled { color: #aaa; border-color: #ddd; cursor: default; }

/* 업무안내 */
.svc { width: 100%; table-layout: fixed; }
.svc td {
  padding: 10px;
  vertical-align: top;
  border: 1px solid #ccd5ea;
  background: linear-gradient(to bottom, #ffffff, #f2f5fb);
  color: #555;
  font-size: 11px;
}
.svc__h {
  margin-bottom: 6px;
  padding: 4px 8px;
  color: #fff;
  font-size: 13px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.svc__h--1 { background: linear-gradient(#c0472a, #9a3218); }
.svc__h--2 { background: linear-gradient(#3d7f31, #2a5f20); }
.svc__h--3 { background: linear-gradient(#3f63b8, #1f4597); }
.svc ul { margin-top: 6px; }
.svc li:before { content: "√ "; color: #b34400; font-weight: bold; }

.steps { display: flex; align-items: center; }
.steps li { flex: 1; padding: 8px 4px; background: #eef2fb; border: 1px solid #b9c4dd; text-align: center; color: #333; }
.steps li b { display: block; color: #b34400; font-family: Arial, sans-serif; font-size: 11px; }
.steps .steps__arr { flex: none; padding: 0 6px; background: none; border: 0; color: #1d3d8f; font-size: 14px; }

/* 상담신청 폼 */
.consult-lead { margin-bottom: 8px; color: #555; }
.req { color: #c00; font-weight: bold; }
.form-tbl { width: 100%; border-top: 2px solid #1d3d8f; }
.form-tbl th {
  width: 110px;
  padding: 6px 10px;
  background: #f3f3f3;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-weight: bold;
  color: #333;
}
.form-tbl td { padding: 6px 10px; border-bottom: 1px solid #ddd; }
.form-tbl td label { margin-right: 10px; }
.form-tbl input[type="text"], .form-tbl textarea, .form-tbl select {
  padding: 2px;
  border: 2px inset #ddd;
  background: #fff;
}
.form-tbl textarea { width: 96%; }
.agree-txt {
  width: 98%;
  padding: 6px;
  border: 1px solid #bbb;
  background: #fafafa;
  color: #555;
  font-size: 11px;
  line-height: 1.6;
  resize: none;
}
.agree-chk { margin: 6px 0; text-align: right; }
.agree-chk label { margin-left: 10px; }
.form-msg { margin: 8px 0; padding: 8px 10px; border: 1px solid #e3b400; background: #fff9d6; color: #6b4b00; font-weight: bold; }
.form-msg.is-error { border-color: #d55; background: #fdecec; color: #a00; }
.form-btns { margin-top: 10px; text-align: center; }
.form-btns { display: none; }
.js .form-btns { display: block; }
.form-nojs { margin-top: 10px; color: #666; text-align: center; }
.js .form-nojs { display: none; }

/* 오시는길 */
.loc-tbl { width: 100%; border-top: 2px solid #1d3d8f; }
.loc-tbl th { width: 90px; padding: 6px 10px; background: #f3f3f3; border-bottom: 1px solid #ddd; text-align: left; }
.loc-tbl td { padding: 6px 10px; border-bottom: 1px solid #ddd; color: #555; }
.map-btns { margin-top: 10px; }

/* 퀵메뉴: 1200px 이상 화면에서만 */
#quick {
  display: none;
  position: fixed;
  top: 200px;
  left: calc(50% + 492px);
  width: 76px;
  background: #fff;
  border: 1px solid #8fa3d3;
  text-align: center;
  font-size: 11px;
}
@media (min-width: 1200px) { #quick { display: block; } }
.quick-menu__t {
  padding: 5px 0;
  background: linear-gradient(#4f74c7, #1f4597);
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1.2;
}
#quick a { display: block; padding: 6px 0; border-top: 1px solid #dde3f2; color: #333; }
#quick a:hover { background: #fff5d6; }
#quick .quick-menu__top { background: #eee; font-weight: bold; }

/* 하단 */
#footer { background: #e9e9e9; border-top: 3px solid #1d3d8f; }
.foot-links { padding: 7px 16px; background: #dcdcdc; border-bottom: 1px solid #c9c9c9; font-size: 11px; }
.foot-links li { display: inline; }
.foot-links li + li:before { content: "|"; margin: 0 7px; color: #aaa; }
.foot-links a { color: #444; }
.foot-info { padding: 12px 16px 14px; color: #555; font-size: 11px; line-height: 1.7; }
.foot-logo { margin-bottom: 4px; color: #666; font-size: 13px; font-weight: bold; }
.foot-info address { font-style: normal; }
.foot-copy { margin-top: 4px; font-family: Tahoma, Arial, sans-serif; color: #666; }
.foot-ie { color: #666; }
.lusite-demo-note { margin-top: 8px; padding-top: 6px; border-top: 1px dotted #bbb; color: #555; }

/* 레이어 팝업 (div, 새 창 아님) */
.layer-pop {
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: 110px;
  z-index: 20;
  width: 330px;
  background: #fff;
  border: 2px solid #1d3d8f;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.layer-pop__head {
  padding: 6px 10px;
  background: linear-gradient(#4f74c7, #1f4597);
  color: #fff;
  font-weight: bold;
}
.layer-pop__body {
  padding: 16px 16px 14px;
  background: linear-gradient(to bottom, #fffdf0, #fff3c4);
  color: #444;
  text-align: center;
}
.layer-pop__body p { margin-bottom: 8px; }
.layer-pop__big { font-family: "돋움", Dotum, sans-serif; font-size: 18px; font-weight: bold; color: #333; line-height: 1.4; }
.layer-pop__big strong { color: #b34400; }
.layer-pop__tel b { font-family: Arial, sans-serif; font-size: 18px; color: #b34400; }
.layer-pop__foot { overflow: hidden; padding: 4px 8px; background: #333; }
.layer-pop__foot button { background: none; border: 0; color: #eee; font-size: 11px; }
.layer-pop__foot button:hover { color: #ffcf6b; text-decoration: underline; }
.layer-pop__today { float: left; }
.layer-pop__close { float: right; }
.layer-pop__foot button:focus { outline-color: #fff; }

/* 움직임 줄이기: CSS 애니메이션만 멈춘다 (콘텐츠는 그대로) */
@media (prefers-reduced-motion: reduce) {
  .notice-line__track, .slide--2 { animation: none !important; }
  .notice-line { height: auto; min-height: 26px; padding-top: 3px; padding-bottom: 3px; }
  .notice-line__view, .notice-line__track { display: block; white-space: normal; }
  .notice-line__track span { display: inline; }
  .notice-line__track span[aria-hidden] { display: none; }
  .js .notice-line__toggle { display: none; }
}