/* ============================ footer style start ============================= */
@charset "utf-8";

/* ===================== common-foot ======================= */
/* ===================== common-foot ======================= */


.common-foot {padding: 100px 0;background: #fff url(../img/custom/foot-bg.png) right bottom no-repeat;}
.common-foot .flex-box {display: flex; justify-content: space-between; gap: 30px; align-items: flex-start;}
.common-foot h3 {font-weight: 300; margin-bottom: 50px;text-align: center;}
.common-foot .visit-info {display: flex; gap: 30px;}
.common-foot .visit-info h4 {margin-bottom: 10px;}
.common-foot .visit-info h5 {margin: 20px 0 10px;}
.common-foot .visit-info .btn-box {margin-top: 25px; display: flex; gap: 10px;}

.common-foot .tel-list li {margin-bottom: 10px;}
.common-foot .tel-list li a{display: block;font-size: 35px;font-weight: 900;line-height: 1.1;}
.common-foot .label {display: inline-block; font-size: 20px;font-weight: 600;letter-spacing: 0;background: #334a25; color: #fff; padding: 3px 10px; border-radius: 4px; margin-bottom: 10px;}
.common-foot .small {font-size: 14px; margin-top: 10px; color: #555;}

.map-info .btn-box {width: 100%;}
.map-info .btn-box a{width: 33.3%;display: block;background: #f1f1f1;white-space: pre-line;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;padding: 10px;font-weight: 700;text-align: center;}
.map-info .btn-box a img{max-height:30px;}
.map-info .btn-box a:hover{background: #e7eddd;}
/* ========== Quick Floating Menu ========== */
.quickfab{
  position: fixed;
  left: 24px;
  bottom: 84px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 90;
  animation: bouncing .7s infinite alternate;
-webkit-animation: bouncing .7s infinite alternate;
}
@keyframes bouncing {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
/* 버튼 기본(동그라미) */
.qbtn{
  --btn-h: 56px;
  --btn-w: 56px;            /* 기본: 동그라미 */
  --btn-w-expanded: 200px;  /* 호버/포커스 시 길어지는 폭 */
  --shadow: 0 8px 24px rgba(0,0,0,.18);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: var(--btn-h);
  width: var(--btn-w);
  padding: 0 16px 0 12px;
  border-radius: 9999px;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  transition: width .32s ease, box-shadow .2s ease, background-color .2s ease;
  will-change: width;
}

/* 아이콘 영역(항상 보임) */
.qbtn__icon{
  flex: 00 0 32px;
  width: 25px; height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
}

/* 레이블(기본 숨김 → 호버 시 등장) */
.qbtn__label{
  font-weight: 700;
  opacity: 0;
  transform: translateX(8px);
  white-space: nowrap;
  transition: opacity .22s ease .08s, transform .22s ease .08s;
  color: #fff;
  font-size: 20px;
  margin-left: 15px;
}

/* 호버/포커스/키보드 접근 시 확장 */
.qbtn:is(:hover,:focus-visible,.is-open){
  width: var(--btn-w-expanded);
}
.qbtn:is(:hover,:focus-visible,.is-open) .qbtn__label{
  opacity: 1;
  transform: translateX(0);
}

/* 네이버 스타일 */
.qbtn--naver{
 background: linear-gradient(45deg, #57b115, #344a24);
}

/* 카카오 스타일 */
.qbtn--kakao{
  background: linear-gradient(45deg, #FFD400, #231815); /* 카카오 옐로우 */
}

/* 공통 아이콘 SVG(배경/텍스트 대비) */
.qbtn__svg{
  width: 22px; height: 22px;
  fill: currentColor;
}
.qbtn__svg rect, .qbtn__svg circle{ fill: currentColor; }
.qbtn__svg text{ fill:#fff; font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* 접근성 & 모바일 보완 */
@media (hover:none){
  /* 터치 환경: 기본 폭을 약간 넓혀도 좋다면 주석 해제
  .qbtn{ width: 72px; }
  */
}

/* 작은 화면 위치 보정 */
@media (max-width: 480px){
  .quickfab{ left: 10px; bottom: 70px; gap: 10px; }
  .qbtn{ --btn-h: 55px; --btn-w: 55px; --btn-w-expanded: 184px; }
}

@media screen and (max-width: 1080px) {
  .common-foot .visit-info {flex-direction: column;}
}


#footer {padding: 50px 0px 100px; background-color: #000; border-top: 1px solid #eeeeee;}
#footer {text-align: center; color: #fff; font-size: 15px}
#footer p:first-of-type {margin: 30px 0 10px;}
#footer img {max-width: 230px;}

.footer-gnb{margin: 20px 0;}
.footer-gnb > ul{display:flex; justify-content:center;}
.footer-gnb > ul > li a{display: flex; justify-content: center; align-items: center; color: #fff;width: 150px;  padding: 10px 0;text-align: center;border: 1px solid rgba(255, 255, 255, 0.3);}



@media screen and (max-width:1200px) {
	#footer {padding: 30px 0 120px;}
}

@media screen and (max-width:1025px){
	#footer img {max-width: 160px;}
	#footer p { white-space: pre-line;}
	#footer p br {display: none;}
	.quickfab{bottom:100px;}
}

@media screen and (max-width:769px){
	.footer-gnb > ul > li a{width: 100px;}
	.common-foot{text-align: center;}
	.common-foot{padding: 50px 10px;  background: linear-gradient(to bottom, #fff, #effff7);}
	.common-foot h3 {margin-bottom: 20px;}
	.common-foot .label{font-size: 15px;}	
	.common-foot .samll{font-size: 12px;}
	.common-foot .tel-list li a{font-size: 30px;}
	.common-foot .flex-box{gap:0;justify-content: center;}
	.time > li > ul > li p{width: 100%;justify-content: center;}
	.time > li > ul > li:last-child{width: auto;}
}
@media screen and (max-width:480px){
	#footer{padding: 30px 0 150px;}
	#footer p:first-of-type{margin: 10px 0;}
	#footer img {max-width: 140px;}
	footer *{font-size: 12px !important;}

	.footer-gnb {margin: 10px 0;}
	.footer-gnb > ul {flex-wrap: wrap;}
	.footer-gnb > ul > li {margin: 5px; width: calc(50% - 10px);}
	.footer-gnb > ul > li:nth-child(3),.footer-gnb > ul > li:nth-child(4),.footer-gnb > ul > li:nth-child(5),.footer-gnb > ul > li:nth-child(6) {margin: 5px; width: calc(25% - 10px);}
	.footer-gnb > ul > li a {width: 100%;}
	.footer-gnb > ul > li:nth-child(3) a,.footer-gnb > ul > li:nth-child(4) a,.footer-gnb > ul > li:nth-child(5) a,.footer-gnb > ul > li:nth-child(6) a{border: none;}

}


/* ============================================================================================================================== */
/* ======================================================= quick menu 코드 ==================================================== */
/* ============================================================================================================================== */


#quick_menu {position: fixed; top: 50%; transform: translateY(-50%); right: 10px; z-index: 999;}
#quick_menu img {height: 38px;}
#quick_menu span {display: block; width: 100%; padding-top: 5px; white-space: pre-line; line-height: 1.5; font-weight: 700; transform: skew(-0.1deg);}

#quick_menu li:first-child a{display: inline-block; width: 100%; color: #fff;}
#quick_menu li:not(:first-child) a {display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;color: #fff; font-weight: 500; width: 100px; height: 100px;}
#quick_menu li:first-child {cursor: pointer; color: #fff; background-color: #333; padding: 10px 0; width: 100%; text-align: center;-webkit-border-radius: 15px 15px 0 0 ;-moz-border-radius: 15px 15px 0 0;border-radius: ;15px 15px 0 0;}
#quick_menu li:not(:first-child) a:hover {background: rgba(0,0,0,0.2);transition: all 0.3s;}
#top_btn{-webkit-border-radius: 0 0 15px 15px;-moz-border-radius: 0 0 15px 15px;border-radius: 0 0 15px 15px;}

#quick_menu li:nth-child(2){background:#333;}
#quick_menu li:nth-child(3){background:#333;}
#quick_menu li:nth-child(4){background:#333;}
#quick_menu li:nth-child(5){background:#333;}
#top_btn {border: none; width: 100%; max-width: 100px; max-height: 100px; padding: 20px 10px; background-color: #333; cursor: pointer;}
#top_btn span {color: #fff;}

@media screen and (max-width:1024px){

#quick_menu {padding: 0; left: 0px;	top: auto; width: 100%; height: auto; bottom: 0px; display: block; transform:none;}
#quick_menu ul {overflow: hidden;position: relative;}
#quick_menu ul li {width:25%; height: 100%; text-align: center; border-right-color: rgb(255, 255, 255); border-right-width: 1px; border-right-style: solid; float: left;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#quick_menu ul li a {width: 100% !important; max-width: 100% !important;padding: 10px; }
#quick_menu ul li#call {display: none;}
#quick_menu ul li:first-child {display: none;}
#quick_menu ul li#top {display: none;}
#quick_menu span{font-size: 12px;}
#quick_menu img{height: 30px;}
#quick_menu li:not(:first-child) a{height: auto;}

}