@charset "utf-8";
/* 퀵메뉴(오른쪽 고정 바로가기) — 모든 페이지 공통             2026-08-28

   왜 이 파일이 따로 있나
   ---------------------
   퀵메뉴 모양은 원래 common.css 안에만 있었다. 그런데 새 디자인 셸
   (new_sub_header.jsp)과 새 메인(index.jsp)은 common.css 를 부르지 않는다.
   그래서 마크업만 옮기면 아이콘도 색도 폰트도 없는 맨 링크 목록이 된다.
   여기에 모양 규칙을 그대로 옮겨 담아, 어느 셸에서든 같은 모습이 되게 한다.

   아래 '모양' 부분은 common.css 에서 **한 글자도 고치지 않고** 순서까지
   그대로 옮긴 것이다. 구 페이지는 common.css 로도 같은 규칙을 이미 받는데,
   값이 같으므로 겹쳐도 결과가 안 바뀐다. 고칠 일이 생기면 두 곳을 함께
   고쳐야 한다 — 한쪽만 고치면 페이지마다 다르게 보인다.

   폰트도 common.css 의 @import 로 오던 것이라 여기서 다시 불러야 한다.
   (grep 으로 안 잡히는 자리다. 빼먹으면 새 페이지 글자만 serif 로 나온다.) */
@import url("S-Core-Dream-light/s-core-dream.css");

/* ── 기반 초기화 ──────────────────────────────────────────────────
   모양 규칙만 옮기고 그 밑에 깔려 있던 초기화를 안 챙겼다가 한 번 틀렸다.
   common.css 는 맨 앞에서 ul·li·a 를 통째로 초기화한다. 새 셸(새 메인·
   _nd 페이지)에는 그게 없어서, 옮겨 온 목록이 브라우저 기본값으로 돌아갔다:

     list-style: disc      → 항목마다 흰 점이 찍혔다
     padding-left: 40px    → 목록이 오른쪽으로 40px 밀려 화면 밖으로 잘렸다
     margin-top: 16px      → 위치가 16px 내려갔다

   그래서 퀵메뉴가 기대는 초기화만 여기서 다시 세운다. 범위를 .rightAside
   안으로 묶어 다른 목록은 건드리지 않는다. 구 페이지에는 common.css 가
   이미 같은 값을 주고 있어 겹쳐도 결과가 안 바뀐다. */
.rightAside .rightBanner { list-style:none; margin:0; padding:0; }
.rightAside .rightBanner li { list-style:none; }
.rightAside .rightBanner li a { text-decoration:none; }

/* ── 모양 (common.css 원문 그대로) ─────────────────────────────── */
.rightAside {
	width:100px; z-index:1000; position:fixed; left:50%; margin-left:600px;
	top:100px;
}
.rightAside .rightBanner { width:100px; text-align:center;}
.rightAside .rightBanner li { width:100px; height:84px; }
.rightAside .rightBanner li + li { margin-top:1px; }
.rightAside .rightBanner li a { width:100%; height:100%;  display:block; padding-top:58px; font-size:14px; font-family:"s-core-dream-medium",'serif'; color:#fff;}
.rightAside .rightBanner li.menu01{line-height:1.2;height:140px;}
.rightAside .rightBanner li.menu01 a {background:url(../images/common/r_icon1.png) 50% 10px no-repeat #31b8b1; background-size:40px auto;}
.rightAside .rightBanner li.menu02 a {background:url(../images/common/r_icon2.png) 50% 10px no-repeat #31b8b1; background-size:40px auto;}
.rightAside .rightBanner li.menu03 a {background:url(../images/common/r_icon3.png) 50% 10px no-repeat #31b8b1; background-size:40px auto;}
.rightAside .rightBanner li.menu04 a {background:url(../images/common/r_icon4.png) 50% 10px no-repeat #31b8b1; background-size:40px auto;}
.rightAside .rightBanner li.menu05 a {background:url(../images/common/r_icon9.png) 50% 10px no-repeat #31b8b1; background-size:40px auto;}
.rightAside .rightBanner li.sns01 a {background:url(../images/common/r_icon5.png) 50% 10px no-repeat #fff; border:1px solid #ccc; color:#555; background-size:40px auto;}
.rightAside .rightBanner li.sns02 a {background:url(../images/common/r_icon6.png) 50% 10px no-repeat #fff; border:1px solid #ccc; color:#555; background-size:40px auto;}
.rightAside .rightBanner li.sns03 a {background:url(../images/common/r_icon7.png) 50% 10px no-repeat #fff; border:1px solid #ccc; color:#555; background-size:40px auto;}
.rightAside .rightBanner li.sns04 a {background:url(../images/common/r_icon8.png) 50% 10px no-repeat #fff; border:1px solid #ccc; color:#555; background-size:40px auto;}
.rightAside .rightBanner li.sns05 a {background:url(../images/common/r_icon10.png) 50% 10px no-repeat #fff; border:1px solid #ccc; color:#555; background-size:40px auto;}

.rightAside .rightBanner { border-radius:14px; overflow:hidden;
	box-shadow:0 8px 30px rgba(0,0,0,0.28); }
.rightAside .rightBanner li + li { margin-top:0; border-top:1px solid rgba(255,255,255,0.12); }
.rightAside .rightBanner li a { -webkit-backdrop-filter:blur(16px) saturate(115%);
	backdrop-filter:blur(16px) saturate(115%); transition:background-color .18s; }
.rightAside .rightBanner li.menu01 a,
.rightAside .rightBanner li.menu02 a,
.rightAside .rightBanner li.menu03 a,
.rightAside .rightBanner li.menu04 a,
.rightAside .rightBanner li.menu05 a,
.rightAside .rightBanner li.sns01 a,
.rightAside .rightBanner li.sns02 a,
.rightAside .rightBanner li.sns03 a,
.rightAside .rightBanner li.sns04 a,
.rightAside .rightBanner li.sns05 a { background-color:rgba(12,26,32,0.62);
	color:#fff; border:0; }
.rightAside .rightBanner li a:hover { background-color:rgba(12,26,32,0.80); }

.rightAside .scrollFixIt { display:none; }

@media all and (max-height: 880px) {
	.rightAside { top:84px; }
	.rightAside .rightBanner li { height:72px; }
	.rightAside .rightBanner li a { padding-top:48px; font-size:12px; }
	.rightAside .rightBanner li[class] a { background-size:34px auto; }
}
@media all and (max-height: 760px) {
	.rightAside { top:72px; }
	.rightAside .rightBanner li { height:62px; }
	.rightAside .rightBanner li a { padding-top:40px; font-size:11px; }
	.rightAside .rightBanner li[class] a { background-size:28px auto; }
}

/* ── 세로 위치 ────────────────────────────────────────────────────
   원래 top:100px 은 구 헤더(약 100px) 기준이었다. 새 디자인 헤더는 더
   두껍다 — 메인 138px, 서브(_nd) 133px — 그래서 퀵메뉴 첫 칸이 헤더에
   30~40px 겹쳐 있었다. 헤더 아래로 내린다.

   화면이 낮으면 9칸이 잘리므로 칸을 줄이고 위치도 되돌린다. 낮은 화면에서
   9칸을 다 보이게 하는 쪽이 헤더 겹침을 피하는 것보다 낫다 — 퀵메뉴는
   고정이라 조금만 내려도 헤더는 지나가지만, 잘린 칸은 영영 안 보인다.

     화면 높이 > 910 : 148 + 9x84 = 904
     800 ~ 910      : 140 + 9x72 = 788
     800 이하        :  80 + 9x62 = 638   (1366x768 노트북 대응)

   여기가 위치를 정하는 유일한 자리다. 위쪽 '모양' 블록은 common.css 원문
   그대로라 손대지 않는다(그래야 두 파일을 대조해 어긋난 곳을 찾을 수 있다). */
.rightAside { top:148px; }
@media all and (max-height: 910px) {
	.rightAside { top:140px; }
	.rightAside .rightBanner li { height:72px; }
	.rightAside .rightBanner li a { padding-top:48px; font-size:12px; }
	.rightAside .rightBanner li[class] a { background-size:34px auto; }
}
@media all and (max-height: 800px) {
	.rightAside { top:80px; }
	.rightAside .rightBanner li { height:62px; }
	.rightAside .rightBanner li a { padding-top:40px; font-size:11px; }
	.rightAside .rightBanner li[class] a { background-size:28px auto; }
}

/* 가로 1280px 이하에서는 퀵메뉴를 숨긴다(common.css 와 같은 규칙).
   접기 손잡이도 .rightAside 안에 있어 함께 사라진다 — 손잡이만 남아
   허공에 떠 있으면 그게 뭔지 알 수 없다. */
@media all and (max-width: 1280px) {
	.rightAside { display:none; }
}


/* ── 접기·펴기 ────────────────────────────────────────────────────
   견적 흐름은 화면이 빽빽하다(유형 104개가 네 줄로 깔리고, 오른쪽 아래엔
   바푸가 서 있다). 그 위에 100px 짜리 퀵메뉴가 겹치면 고를 것을 가린다.
   그래서 견적에 들어가면 접힌 채로 시작한다. 없애지는 않는다 — 손잡이는
   그대로 남아, 필요하면 언제든 펼 수 있다.

   왜 미끄러지지 않고 딱 바뀌나
   ---------------------------
   처음엔 목록을 오른쪽으로 밀어 내는 효과(transform)를 넣었다. 그런데
   손잡이는 left ↔ right 로 자리를 옮기는 터라 두 값 사이를 이을 수 없어
   100px 를 순간이동했고, 목록만 스르륵 사라져 오히려 고장난 것처럼 보였다.
   게다가 밀어 내기가 눌러서 접을 때는 먹지 않는 경우가 있었다.
   접고 펴는 것은 재주 부릴 자리가 아니다. 딱 바뀌는 편이 어긋날 데가 없다.

   목록은 display:none 으로 지운다. 눈에서만 감추면(visibility) 자리를
   차지한 채 남아 그 위를 덮는 요소의 클릭을 방해할 수 있다. */
.rightAside .quickToggle {
	position:absolute; top:0; left:-30px; width:30px; height:56px;
	margin:0; padding:0; border:0; cursor:pointer;
	background:rgba(12,26,32,0.62); color:#fff;
	-webkit-backdrop-filter:blur(16px) saturate(115%);
	backdrop-filter:blur(16px) saturate(115%);
	border-radius:14px 0 0 14px;
	box-shadow:0 8px 30px rgba(0,0,0,0.28);
	font-family:inherit; font-size:15px; line-height:1;
	transition:background-color .18s;
}
.rightAside .quickToggle:hover { background:rgba(12,26,32,0.80); }
.rightAside .quickToggle:focus-visible { outline:3px solid #0EA5E9; outline-offset:2px; }
/* 화살표는 그림이 아니라 글자다. 이미지가 하나 더 늘면 관리할 것이 는다. */
.rightAside .quickToggle::before { content:"›"; display:block; font-size:20px; font-weight:700; }
.rightAside.quick-closed .quickToggle::before { content:"‹"; }

/* 접힌 모습 — 목록은 지우고 손잡이만 화면 오른쪽 끝에 남긴다.
   손잡이는 상자(.rightAside) 안쪽 오른쪽 끝으로 옮긴다. 상자는 그대로
   right:20px 자리에 있으니, 손잡이는 화면 가장자리에서 50px 안쪽에 선다. */
.rightAside.quick-closed .rightBanner { display:none; }
.rightAside.quick-closed .quickToggle { left:auto; right:0; }

/* 자바스크립트가 막힌 환경에서는 접기가 동작하지 않는다. 그럴 때 손잡이만
   덩그러니 두면 눌러도 아무 일이 없는 단추가 된다. js 가 켜지면 스스로
   .quick-on 을 붙이고, 그 전까지 손잡이는 숨어 있는다. */
.rightAside .quickToggle { display:none; }
.rightAside.quick-on .quickToggle { display:block; }