/* 흰색·검은색 푸터 공통 CSS */
#footer:is(.footer_white, .footer_black) {position: relative; padding: 21px 12.2vw 23px; font-family: 'outfit','Noto Sans KR', sans-serif; font-size: 16px; font-weight: 400; display: flex; justify-content: space-between}
#footer:is(.footer_white, .footer_black) em.outfit{font-family: 'outfit'; font-size: 16px; font-weight: 350;}
#footer:is(.footer_white, .footer_black) .left_box ul{display: flex; font-weight: 400; text-transform: uppercase}
#footer:is(.footer_white, .footer_black) .left_box ul li{line-height: 1.7em}
#footer:is(.footer_white, .footer_black) .left_box ul li + li{margin-left: 4.5rem}
#footer:is(.footer_white, .footer_black) .left_box ul li span:not(:first-child){position: relative; padding-left: 10px; margin-left: 10px}
#footer:is(.footer_white, .footer_black) .left_box ul li span:not(:first-child)::before{content: ''; position: absolute; top: calc(50% - 5px); left: 0; width: 1px; height: 10px; background: #757575}
#footer:is(.footer_white, .footer_black) .left_box ul li strong{margin-right: 10px; font-weight: 300}
#footer:is(.footer_white, .footer_black) .left_box ul li dl{display: grid; grid-template-columns: auto 1fr;}
#footer:is(.footer_white, .footer_black) .left_box ul li dl dt{grid-column: 1; margin-right: 1em; font-weight: 500;}
#footer:is(.footer_white, .footer_black) .left_box ul li dl dd{grid-column: 2}
#footer:is(.footer_white, .footer_black) .left_box .copy {margin-top: 2em; font-weight: 300; text-transform: uppercase}
#footer:is(.footer_white, .footer_black) .right_box {display: flex; flex-direction: column; align-items: flex-end; position: relative}
#footer:is(.footer_white, .footer_black) .right_box .terms_list{display: flex; font-weight: 300}
#footer:is(.footer_white, .footer_black) .right_box .terms_list li{margin-left: 20px}
#footer:is(.footer_white, .footer_black) .right_box .terms_list li a{position: relative}
#footer:is(.footer_white, .footer_black) .right_box .terms_list li a::before{content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; margin-left: 100%; background: #000; transition: width 0.3s, margin-left 0.3s}
#footer:is(.footer_white, .footer_black) .right_box .sns{display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; font-family: 'outfit'; font-size: 16px; font-weight: 350; line-height: 1.7em}
#footer:is(.footer_white, .footer_black) .right_box .sns li:not(:first-child){margin-top: 0}
#footer:is(.footer_white, .footer_black) .right_box .top_btn {position: absolute; right: -100px; top: 0; text-align: center; display: none}
#footer:is(.footer_white, .footer_black) .right_box .top_btn > p {margin-top: 5px}
#footer:is(.footer_white, .footer_black) .right_box .top_btn i {font-size: 20px}
#footer:is(.footer_white, .footer_black) .fix_btn_box { position: fixed;right: 20px; bottom: 0px ; z-index: 10; opacity: 0; pointer-events: none; overflow: hidden; transition: background 0.3s ease-in-out , opacity .5s; display: flex; flex-direction: column}
#footer:is(.footer_white, .footer_black) .fix_btn_box.show {opacity: 1; pointer-events: all}
#footer:is(.footer_white, .footer_black) .fix_btn_box.fixed {position: absolute; top: 0px; bottom: auto;transform: translateY(-100%) }
#footer:is(.footer_white, .footer_black) .fix_btn_box .btn_box {display: flex; flex-direction: column;padding:0 20px 40px 0;}
#footer:is(.footer_white, .footer_black) .fix_btn_box .btn {font-size: 20px; cursor: pointer; width: 50px; height: 50px; border-radius: 50% ; color: #000; display: flex; align-items: center; justify-content: center; border-style:solid;border-width: 1px;}
#footer:is(.footer_white, .footer_black) .fix_btn_box .btn img {width: 100%}
#footer:is(.footer_white, .footer_black) .fix_btn_box .btn + .btn {margin-top: 10px}

/* 색상 변형 */
#footer.footer_white {background-color: #fff; border-top: 1px solid #ececec}
#footer.footer_white .left_box {color: #000;}
#footer.footer_white .right_box .sns li{color:#000;}
#footer.footer_white .right_box .top_btn {color: #fff}
#footer.footer_white .fix_btn_box .btn {background-color: #fff; border-color: rgba(124,124,124,0.75);}

#footer.footer_black {background-color: #000 !important; border-top: 1px solid #1e1e1e !important}
#footer.footer_black .left_box {color: #fff;}
#footer.footer_black .right_box .terms_list{color: #fff}
#footer.footer_black .right_box .sns li{color:#fff;}
#footer.footer_black .right_box .top_btn {color: #fff}
#footer.footer_black .left_box ul li.terms_list dl dd[style*="border-right"]{border-right-color:#fff !important;}
#footer.footer_black .fix_btn_box .btn {background-color: #fff; border-color: rgba(124,124,124,0.75);}

@media (min-width:1025px){
	#footer:is(.footer_white, .footer_black) .right_box .terms_list li a:hover::before{width: 100%; margin-left: 0%; transition: width 0.3s}
	#footer.footer_black,
	#footer.footer_black .left_box,
	#footer.footer_black .left_box ul,
	#footer.footer_black .left_box ul li,
	#footer.footer_black .left_box ul li dl,
	#footer.footer_black .left_box ul li dl dt,
	#footer.footer_black .left_box ul li dl dd{
		font-family:'outfit','Noto Sans KR', sans-serif;
		font-size:16px;
		font-weight:300;
	}
	#footer.footer_black .right_box .terms_list{
		font-family:'outfit','Noto Sans KR', sans-serif;
		font-size:16px;
		font-weight:300;
	}
	#footer.footer_black em.outfit,
	#footer.footer_black .right_box .sns,
	#footer.footer_black .right_box .sns em.outfit{
		font-family:'outfit';
		font-size:16px;
		font-weight:250;
	}
}





/* 구형 모바일 푸터의 .inner 레이아웃을 복원한다. 데스크톱/태블릿은 기존 배치를 유지한다. */



	#footer > .inner {
		display: contents;
	}