@charset "utf-8";
/* =========================================================
   공통 푸터 (디자인 개편)
   - 대상 마크업 : /resources/templates/front/layouts/Footer.jsp
   - style.css 다음에 로드해서 기존 #footer 규칙을 덮어쓴다.
   - 푸터 배경색 : #222
   ========================================================= */

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

/* ---------- 배너모음 ---------- */
#footer .fb-banner-wrap{width:100%;height:auto;position:relative;}
#footer .fb-banner-sec{width:100%;padding:0;background:#F7F7F7; border-radius: 20px 20px 0 0;}
/* 컨트롤을 absolute 로 띄우면 배너가 그 아래로 깔려서, 겹치지 않게 하려고
   .inner 왼쪽에 210px 같은 매직넘버를 넣어야 했다. flex 로 나란히 둔다.
   좌우 여백은 본문과 같은 --inner-gutter (서브는 변수가 없어 20px 폴백) */
#footer .fb-banner-wrap .inner{
	min-height:76px;padding:0 var(--inner-gutter, 20px);
	display:flex;align-items:center;gap:27px;
}
#footer .fb-banner-wrap .fb-control-wrap{
	position:static;transform:none;
	flex:0 0 auto;font-size:0;white-space:nowrap;
}
/* 슬라이더가 남는 폭을 전부 가져간다. min-width:0 이 없으면 내용폭 때문에 안 줄어든다 */
#footer .fb-banner-wrap .fb-banner{flex:1 1 auto;min-width:0;}
#footer .fb-banner-wrap .fb-control-wrap h3{display:inline-block;vertical-align:middle;}
#footer .fb-banner-wrap .fb-control-wrap .stit{display:inline-block;margin:0 14px 0 0;font-size:17px;font-weight:700;color:#222;letter-spacing:-0.03em;vertical-align:middle;}

/* 배너 컨트롤 : 낱개 라운드 사각 버튼. 순서는 이전 / 멈춤·재생 / 다음 */
#footer .fb-banner-wrap .fb-control{
	display:inline-flex;align-items:center;gap:8px;
	width:auto;height:auto;border:0;border-radius:0;overflow:visible;font-size:0;vertical-align:middle;
}
#footer .fb-banner-wrap .fb-control a{
	display:inline-flex;align-items:center;justify-content:center;float:none;
	/* style.css 의 .fb-control a{height:22px} 가 남아 있어 aspect-ratio 로는 정사각이 되지 않는다.
	   height 를 명시해야 눌리지 않는다. */
	width:32px;height:32px;box-sizing:border-box;
	border:1px solid #e2e2e2;border-radius:9px;background:#fff;
	position:relative;transition:border-color .2s, background .2s;
}

/* 이전/다음 화살표는 assets/images/ico/ 의 svg 를 쓴다 */
#footer .fb-banner-wrap .fb-control .btn-prev{background:#fff url(../images/ico/ico_left.svg) center / 7px 11px no-repeat;}
#footer .fb-banner-wrap .fb-control .btn-next{background:#fff url(../images/ico/ico_right.svg) center / 7px 11px no-repeat;}
#footer .fb-banner-wrap .fb-control .btn-prev:hover,
#footer .fb-banner-wrap .fb-control .btn-next:hover{background-color:#f7f7f7;}

#footer .fb-banner-wrap .fb-control .btn-pause{background-image:none;}
#footer .fb-banner-wrap .fb-control .btn-pause:before{
	content:'';width:8px;height:10px;border-left:2px solid #333;border-right:2px solid #333;
}
#footer .fb-banner-wrap .fb-control .btn-play{background-image:none;}	/* 숨김은 Footer.jsp 인라인 style 담당 */
#footer .fb-banner-wrap .fb-control .btn-play:before{
	content:'';width:0;height:0;margin-left:2px;
	border-left:9px solid #333;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}

#footer .fb-banner{width:100%;}
#footer .fb-banner li{float:left;}
#footer .fb-banner .slick-slide{height:76px;}
#footer .fb-banner .slick-slide > a{display:flex !important;align-items:center;justify-content:center;height:76px;margin:0 !important;padding:0 12px;position:relative;text-align:center;}
#footer .fb-banner .slick-slide > a:before{content:'';display:block;width:1px;height:26px;background:#e5e5e5;position:absolute;left:0;top:50%;transform:translateY(-50%);}
#footer .fb-banner .slick-slide:first-child > a:before{display:none;}
#footer .fb-banner-sec img{width:auto;max-width:100%;max-height:52px;}

/* ---------- 하단 정보 ---------- */
#footer .fc-wrap{background:#222;padding:0;}
#footer .fc-wrap .fc-util{padding:40px 0;border-bottom:1px solid #383838;}
#footer .fc-wrap .fc-util .fm-list{}
#footer .fc-wrap .fc-util .fm-list:after{content:'';display:block;clear:both;}
#footer .fc-wrap .fc-util .fm-list li{float:left;position:relative;padding-left:21px;margin-left:20px;}
#footer .fc-wrap .fc-util .fm-list li:first-child{padding-left:0;margin-left:0;}
#footer .fc-wrap .fc-util .fm-list li:before{content:'';display:block;width:1px;height:12px;background:#4b4b4b;position:absolute;left:0;top:4px;}
#footer .fc-wrap .fc-util .fm-list li:first-child:before{display:none;}
#footer .fc-wrap .fc-util .fm-list li a{display:block;line-height:20px;color:#E0DEDE;letter-spacing:-0.03em;}
#footer .fc-wrap .fc-util .fm-list li.imp a{color:#fff;font-weight:700;}
#footer .fc-wrap .fc-util .fm-list li a:hover,
#footer .fc-wrap .fc-util .fm-list li a:focus{color:#fff;text-decoration:underline;}

/* 목록이 위로 열려 3번 섹션 영역을 침범한다.
   .sec-book .inner 가 z-index:1 이라 z-index:auto 인 이 목록이 책 카드에 덮였다. */
#footer .fc-wrap .fc-util .select-wrap{position:absolute;right:0;top:24px;z-index:3;}
#footer .fc-wrap .fc-util .sel-base{width:300px;height:50px;margin:0;padding:0;border:1px solid #4b4b4b;background:#111;border-radius:8px;}
#footer .fc-wrap .fc-util .sel-base button{padding:0 36px 0 16px;line-height:1;color:#fff;background:transparent;letter-spacing:-0.03em; height: 50px;}
#footer .fc-wrap .fc-util .sel-base button:after{content:'';display:block;width:8px;height:8px;border-left:1px solid #fff;border-top:1px solid #fff;transform:translateY(-2px) rotate(45deg);position:absolute;right:16px;top:50%;transition:transform .2s;}
/* 열리면 화살표를 상하 반전. .on 은 commonUI.js 가 붙인다 */
#footer .fc-wrap .fc-util .sel-base.on button:after{transform:translateY(-6px) rotate(-135deg);}
#footer .fc-wrap .fc-util .sel-base button ul{bottom:51px;border-color:#4b4b4b;}
#footer .fc-wrap .fc-util .sel-base button ul a{color:#333;}
#footer .fc-wrap .fc-util .sel-base button ul a:hover,
#footer .fc-wrap .fc-util .sel-base button ul a:focus{background:#f2f2f2;text-decoration:underline;}

#footer .fc-copy{padding:26px 160px 34px 0;border-top:0;}
#footer .fc-copy address{margin:0;font-style:normal;line-height:25px;}
#footer .fc-copy address span{display:block;color:#9e9e9e;letter-spacing:-0.02em; font-size: 1rem; text-align: left;}
#footer .fc-copy address span em{font-style:normal;font-weight:700;color:#fff;}
#footer .fc-copy address .copy{margin-top:20px;color:#8e8e8e;}

/* position:absolute / right:0 / display:block 는 style.css 와 동일 */
#footer .mark{top:50%;transform:translateY(-50%);padding:0;width:auto;}
#footer .mark img{width:84px;}

/* ---------- 반응형 ---------- */
@media screen and (max-width:1400px){
	#footer .fc-wrap{padding:0 var(--inner-gutter, 20px);}
	#footer .fc-wrap .inner{padding:0;}
}

@media screen and (max-width:1024px){
	#footer .fb-banner-wrap .inner{
		padding:14px var(--inner-gutter, 20px);min-height:0;
		flex-direction:column;align-items:stretch;gap:10px;
	}
	#footer .fb-banner-wrap .fb-control-wrap{text-align:center;}

	#footer .fc-wrap .fc-util{padding:20px 0;text-align:left;}
	#footer .fc-wrap .fc-util .fm-list{float:none;display:inline-block;padding-top:0;}
	#footer .fc-wrap .fc-util .select-wrap{position:relative;right:auto;top:auto;margin-top:16px;}
	#footer .fc-wrap .fc-util .sel-base{width:100%;max-width:320px;}

	#footer .fc-copy{padding:24px 0 30px;text-align:center;}
	#footer .mark{position:relative;right:auto;top:auto;transform:none;margin:16px auto 0;}
}

@media screen and (max-width:768px){
	#footer .fc-wrap .fc-util .fm-list{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2px 18px;}
	#footer .fc-wrap .fc-util .fm-list:after{content:none;}
	#footer .fc-wrap .fc-util .fm-list li{float:none;padding:0;margin:0;}
	#footer .fc-wrap .fc-util .fm-list li:before{display:none;}
	#footer .fc-wrap .fc-util .fm-list li a{padding:4px 0;}
	#footer .fc-copy {padding: 20px 0;}
	#footer .fc-copy address .copy {margin-top: 12px;}
	#footer .fc-copy address span em {display: block;}
}