@charset "utf-8";

:root {
	--100vh : calc(var(--vh, 1vh) * 100);
	--inner: 1460px;
	--inner-padding: clamp(20px, 8.3vw, 8.3vw);
	--header-height: 5.5rem;
	--header-height-scroll: 4.7rem;

	/* color */
	--black: #1e1e1e;
	--gray: #878787;
	--blue: #25287E;
	--red: #D42A1E;

	--radius: 2rem;
	--frame-size: calc(var(--radius) / 3);
	--d-outer: calc(var(--radius) * 2);
	--d-inner: calc(var(--d-outer) - var(--frame-size));
	--font-size: calc(var(--radius) / 10);
}

body, select, input,textarea, button {word-break: keep-all; font-family: 'pretendard';}
html::-webkit-scrollbar {width: 5px;}
.inner {padding: 0 var(--inner-padding); max-width: 3500px;}
.red {color: #E93333;}
.yellow {color: #FDFF97;}
input {transition: .5s ease;}
html::selection {background: #D42A1E15; color: var(--red)}
input[type='number'] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
body.overflow-hidden {overflow: hidden; padding-right: var(--scrollbar-width);}


@font-face {
	font-family: 'DungGeunMo';
	font-weight: 400;
	src: url('../font/DungGeunMo.woff') format('woff');
}


/* 애니메이션 ------------------------------------------------------ */
@keyframes showMove {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes showMoveInfi {0% {opacity: 0;} 50%, 100% {opacity: 1;}}
@keyframes upShowMove {0% {transform: translateY(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upShowMove10 {0% {transform: translateY(10%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upShowMove20 {0% {transform: translateY(20%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes upShowMove100 {0% {transform: translateY(100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes downShowMove {0% {transform: translateY(-20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes downShowMove100 {0% {transform: translateY(-100%);} 100% {transform: none;}}
@keyframes downHideMove100 {0% {transform: none;} 100% {transform: translateY(100%);}}
@keyframes leftShowMove {0% {transform: translateX(-20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes leftShowMove20 {0% {transform: translateX(-20%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes leftShowMove100 {0% {transform: translateX(-100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes rightShowMove {0% {transform: translateX(20px); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes rightShowMove100 {0% {transform: translateX(100%); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes scaleShowMove {0% {transform: scale(.8); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes spanTextUp {0% {transform: translateY(0px);} 10% {transform: translateY(-3px);} 20% {transform: none;}}
@keyframes spanTextUp100 {0% {transform: translateY(100%);} 10% {transform: translateY(-3px);} 20% {transform: none;}}
@keyframes heightMoveInfi {0% {height: 0;} 60%, 100% {height: 100%;}}
@keyframes dataTextUpMove {0% {transform: translate(-50%, 100%);} 100% {transform: translateX(-50%);}}
@keyframes buttonMove {20% {transform: rotate(10deg);} 60% {transform: rotate(-10deg);} 100% {transform: none;}}
@keyframes topMove {100% {top: 0;}}
@keyframes upMove {0% {transform: translateY(20px);} 100% {transform: none;}}
@keyframes upMove100 {0% {transform: translateY(100%);} 100% {transform: none;}}
@keyframes downMove {0% {transform: translateY(-20px);} 100% {transform: none;}}
@keyframes scaleMove {0% {transform: scale(0);} 100% {transform: none;}}
@keyframes scaleShowMove {0% {transform: scale(.8); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes scaleZoomMoveBg {0% {transform: scale(1.1);} 100% {transform: none;}}
@keyframes scaleZoomMoveBgX {0% {transform: scale(1.1) translateX(-50%);} 100% {transform: translateX(-50%);}}
@keyframes scaleZoomMoveBgXY {0% {transform: scale(1.1) translate(-50%, -50%);} 100% {transform: translate(-50%, -50%);}}
@keyframes widthMove {100% {width: 100%;}}
@keyframes heightMove {100% {height: 100%;}}
@keyframes heightMove_hide {100% {height: 0%;}}
@keyframes rotateMove {100% {transform: rotate(360deg);}}
@keyframes rotateXMove {0% {transform: rotateX(180deg);} 100% {transform: none;}}
@keyframes rotateYMove {0% {transform: rotateY(180deg);} 100% {transform: none;}}
@keyframes rotateYUpMove {0% {transform: rotateY(180deg) translateY(100%);} 100% {transform: none;}}
@keyframes rotateYShowMove360 {0% {transform: rotateY(360deg); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes rotateYMove360 {0% {transform: rotateY(360deg);} 100% {transform: none;}}
@keyframes translateScaleShowMove {0% {opacity: 0; transform: translate(-50%, -50%) scale(.5);} 100% {transform: translate(-50%, -50%); opacity: 1;}}
@keyframes widthMove {0% {width: 0;} 100% {width: 100%;}}
@keyframes clip_path_circle {0% {clip-path: circle(0);} 100% {clip-path: circle(100%);}}
@keyframes clip_path_circle_topCenter {0% {clip-path: circle(0% at 50% 0);} 100% {clip-path: circle(111.7% at 50% 0);}}
@keyframes clip_path_square {0% {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}}
@keyframes clip_path_width {0% {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_width_right {0% {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);;} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_height {0% {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_height_up {0% {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_path_height_width {0% {clip-path: polygon(0 0, 100% 0, 50% 0, 0 0);} 50% {clip-path: polygon(0 0, 100% 0, 50% 50%, 0% 100%);} 100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes clip_logo {0% {clip-path: polygon(50% 5%,60% 15%,65% 20%,80% 25%,80% 50%,65% 55%,50% 95%,35% 55%,20% 50%,20% 25%,35% 20%,40% 15%);}}

@keyframes clip_path_out_in {0% {clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);} 100% {clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);}}
/* 헤더 ------------------------------------------------------ */
header {position: fixed; z-index: 80; width: 100%; box-sizing: border-box; transition: .5s cubic-bezier(0.49, 0.21, 0.49, 0.77) , opacity 0s; top: 0; left: 0;}
header .h-inner {position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 2%; z-index: 50; padding-left: clamp(20px, 7.3vw, 7.3vw); padding-right: clamp(20px, 7.3vw, 7.3vw); transition: .5s ease;}
header .h-inner > *:not(.nav) {flex: none; width: clamp(120px, 12vw, 189px); box-sizing: border-box;}
header .h-inner .logo a {width: clamp(120px, 12vw, 189px);}
header .h-inner .logo a img {transition: .5s ease;}
header .h-inner .right-box {display: flex; gap: .5rem; align-items: center; justify-content: flex-end; height: 100%;}
header .h-inner .right-box .sitemapBtn {position: relative; background: var(--pointColor); width: var(--header-height); height: 100%; color: #fff; text-align: center; flex: none; overflow: hidden; transition: .5s ease;}
header .h-inner .right-box .sitemapBtn .text {position: relative; padding-top: .3rem; border-top: 1px solid #fff; font-size: .9rem; display: inline-block; overflow: hidden;}
header .h-inner .right-box .sitemapBtn .text p {transition: .5s ease;}
header .h-inner .right-box .sitemapBtn .line {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 2.6rem; height: 2.6rem; opacity: 0; transition: .5s ease;}
header .h-inner .right-box .sitemapBtn .line:before, header .h-inner .right-box .sitemapBtn .line:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; transition: .5s .1s ease;}
header .h-inner .right-box .sitemapBtn .line:before {width: 0; height: 1px;}
header .h-inner .right-box .sitemapBtn .line:after {width: 1px; height: 0;}
header .h-inner .right-box .sitemapBtn.open .text {opacity: 0;}
header .h-inner .right-box .sitemapBtn.open .line {opacity: 1; transform: translate(-50%, -50%) rotate(45deg);}
header .h-inner .right-box .sitemapBtn.open .line:before {width: 100%;}
header .h-inner .right-box .sitemapBtn.open .line:after {height: 100%;}
header .h-inner .nav {max-width: 660px; width: 100%; height: 100%; transition: .5s ease;}
header .h-inner .dep1 {display: flex; height: 100%; justify-content: center; width: 100%; margin: 0 auto; height: 100%;}
header .h-inner .dep1 > li {height: 100%; width: 100%; position: relative; height: 100%;}
header .h-inner .dep1 > li > a {position: relative; height: 100%; width: 100%; padding: 5px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .95rem; transition: .5s cubic-bezier(0.5, -0.02, 0.25, 1)}
header .h-inner .dep1 > li > a:after {content: ""; position: absolute; top: 50%; left: 50%; width: 80%; height: 3.3rem; background: var(--blue); transform: translate(-50%, -50%); border-radius: 10px; z-index: -1; opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transition: 1s ease;}
header .h-inner .dep2 {position: absolute; top: calc(100% - .5rem); display: none; padding: 1.3rem 0; width: 100%; text-align: center; box-sizing: border-box; background: #BE3329; border-radius: 10px;}
header .h-inner .dep2 a {color: #fff; padding: .6rem 5px; width: 100%; box-sizing: border-box; font-weight: 500; white-space: nowrap; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1;}
header .h-inner .dep2 a p:after {content: ""; position: absolute; top: 50%; right: 70%; width: 12px; height: 12px; background: url(../../images/nav_green.svg) no-repeat right top / contain; transform: translate(-10px, 10px); opacity: 0; transition: .7s ease;}
header .h-inner .dep2 a p span {overflow: hidden;}
header .h-inner .sitemap-btn {position: relative; width: 44px; height: 44px; transition: .5s ease;}
header .h-inner .sitemap-btn .circle {position: absolute; width: 12px; height: 12px; background: #1D2088; border-radius: 50%; top: 0; left: 0; transition: 1s ease;}
header .h-inner .sitemap-btn .circle.red {background: var(--red); top: 0; left: auto; right: 0;}
header .h-inner .sitemap-btn:before, header .h-inner .sitemap-btn:after {content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #1D2088; transition: 1s ease;}
header .h-inner .sitemap-btn:before {bottom: 0; left: 0;}
header .h-inner .sitemap-btn:after {bottom: 0; right: 0;}
header .h-inner .sitemap-btn:hover .circle {transform: translate(32px, 32px);}
header .h-inner .sitemap-btn:hover .circle.red {transform: translate(-32px, 32px);}
header .h-inner .sitemap-btn:hover:before {transform: translate(32px, -32px);}
header .h-inner .sitemap-btn:hover:after {transform: translate(-32px, -32px);}


header .sitemap {position: fixed; top: 0; right: -100%; width: 100%; height: 100%; z-index: 51; transition: .5s ease;}
header .sitemap .bg {position: absolute; width: 0%; height: 100%; top: 0; right: 0; background: rgb(0 0 0 / 30%); transition: .5s .15s ease; z-index: -1;}
header .sitemap .sitemap-box {max-width: 1300px; width: 95%; height: 100%; box-sizing: border-box; position: relative; padding: 0 clamp(20px, 4vw, 4vw); padding-top: var(--header-height); padding-bottom: 50px; margin-left: auto; z-index: 1; display: flex; justify-content: center; background: #fff;}
header .sitemap .sitemap-box .close-btn {position: absolute; top: 2rem; right: 2rem; font-size: 1.8rem; transition: .5s ease;}
header .sitemap .sitemap-box .dep-box {width: 100%; display: flex; flex-direction: column; gap: 1.5rem;}
header .sitemap .sitemap-box .dep-box {display: flex; align-items: center; justify-content: center; min-height: 370px; width: 100%; height: 100%;}
header .sitemap .sitemap-box .dep-box .dep {display: flex; flex: 1; width: 100%; flex-direction: column; box-sizing: border-box; overflow-y: auto;}
header .sitemap .sitemap-box .dep-box .dep > li {width: 100%; height: 100%; position: relative; padding: 2rem 0; box-sizing: border-box; display: flex; align-items: center; gap: 6%; border-bottom: 1px solid #E4E4E4;}
header .sitemap .sitemap-box .dep-box .dep > li > a {font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 600; width: 7em;  flex: none;}
header .sitemap .sitemap-box .dep-box .dep > li > a span {position: relative;}
header .sitemap .sitemap-box .dep-box .dep2 {width: 100%; display: flex; flex-wrap: wrap; gap: 1rem 9%; transition: .5s ease;}
header .sitemap .sitemap-box .dep-box .dep2 a {padding: .6rem; margin: -.6rem; font-weight: 500; transition: .2s ease; width: 7rem; box-sizing: border-box; display: flex; align-items: center;}
header .sitemap .sitemap-box .dep-box .dep2 a span {position: relative; overflow: hidden; color: transparent;}
header .sitemap .sitemap-box .dep-box .dep2 a span:before, header .sitemap .sitemap-box .dep-box .dep2 a span:after {content: attr(data-text); position: absolute; left: 0; transition: .5s ease;}
header .sitemap .sitemap-box .dep-box .dep2 a span:before {color: #474747; top: 0;}
header .sitemap .sitemap-box .dep-box .dep2 a span:after {color: var(--red); top: 100%;}
header .sitemap .sitemap-box .dep-box .bot-box {margin-left: auto;}
header .sitemap .sitemap-box .dep-box .bot-box .company {display: flex; align-items: center; gap: 2rem; margin-left: auto;}
header .sitemap .sitemap-box .dep-box .bot-box .company .text {font-size: 1.35rem; font-weight: 600;}
header .sitemap .sitemap-box .dep-box .bot-box .company .shinwoo {display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: 5px; border: 1px solid #e4e4e4; font-size: .9rem; font-weight: 700;}

/* 사이트맵 오픈 */
header.open .h-inner {background: transparent;}
header.open .h-inner > * {opacity: 0;}
header.open .sitemap {right: 0;}
header.open .sitemap .bg {width: 100%;}
header.open .sitemap .sitemap-box .dep-box .dep > li > a {animation: clip_path_height_up 1s .3s cubic-bezier(0.81, 0.49, 0.27, 0.77) both;}
header.open .sitemap .sitemap-box .dep-box .dep2 > li > a {animation: clip_path_width 1s .3s cubic-bezier(0.81, 0.49, 0.27, 0.77) both;}
header.open .sitemap .sitemap-box .dep-box .bot-box {animation: clip_path_height 1s .3s cubic-bezier(0.81, 0.49, 0.27, 0.77) both;}

/* 스크롤 내림 */
/* header.scroll .h-inner {background: #fff; border-radius: 1rem; box-shadow: 0 10px 20px #1e1e1e1f; height: var(--header-height-scroll); margin: 1rem; padding-left: clamp(20px, 5.5vw, 5.5vw); padding-right: clamp(20px, 5.5vw, 5.5vw);}
header.scroll .h-inner .logo a {transform: scale(.8);}
header.scroll .h-inner .nav {max-width: 950px;}
header.scroll .h-inner .dep1 > li > a {font-size: .9rem;}
header.scroll .h-inner .sitemap-btn {scale: .8;} */

header.scroll .h-inner {background: #0A0A0A; border-radius: 1rem; box-shadow: 0 10px 20px #1e1e1e1f; height: var(--header-height-scroll); margin: 1rem; padding-left: clamp(20px, 5.5vw, 5.5vw); padding-right: clamp(20px, 5.5vw, 5.5vw);}
header.scroll .h-inner .logo a {transform: scale(.8);}
header.scroll .h-inner .nav {max-width: 600px;}
header.scroll .h-inner .dep1 > li > a {font-size: .9rem;}
header.scroll .h-inner .sitemap-btn {scale: .8;}

/* 메인 */
body:has(.main) header.scroll .h-inner .logo a img {content: url(../../images/logo_white.svg);}
body:has(.main) header.scroll .h-inner .nav a {color: #fff;}
/* 서브 */
body:has(.sub-head) header .h-inner .logo a img {content: url(../../images/logo_white.svg);}
body:has(.sub-head) header .h-inner .dep1 > li > a {color: #fff;}


/* 푸터 */
footer {position: relative; font-size: .9rem; z-index: 1; background: #151515;}
footer .quick-menu {position: fixed; bottom: 2rem; right: 2rem; z-index: 10;}
footer .quick-menu.on {position: absolute; bottom: auto; top: -1.1rem;}
footer .quick-menu .scrollUp {width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; line-height: 1; scale: 0; transition: .5s ease;}
footer .quick-menu .scrollUp:after {content: ""; position: absolute; width: 100%; height: 100%; transform: rotate(45deg); background: var(--red); transition: .5s ease;}
footer .quick-menu .scrollUp .icon {position: relative; z-index: 1; color: #fff;}
footer .quick-menu .scrollUp .text {color: #fff; opacity: 0; z-index: 1; position: absolute; width: 100%; height: 100%; font-size: 6px; transition: .5s ease; scale: 0;}
footer .quick-menu .scrollUp .text span {position: absolute; font-size: 1.2em; transform-origin: 0 35px; top: -15px; left: 20px; text-transform: uppercase;}
footer .quick-menu.show .scrollUp {scale: 1;}
footer .inner {display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-left: calc(var(--inner-padding) + 2%); padding-right: calc(var(--inner-padding) + 2%); padding-top: 3rem; padding-bottom: 3rem; background: #151515; color: #fff;}
footer .inner .logo {width: clamp(100px, 15vw, 180px); flex: none;}
footer .inner address {width: 100%; max-width: 972px;}
footer .inner address ul {display: flex; gap: 1rem 6%; width: 100%; flex-wrap: wrap;}
footer .inner address ul li {display: flex; flex-direction: column; gap: .3rem; font-size: .85rem;}
footer .inner address ul li .tt1 {font-weight: 500;}
footer .inner address ul li .tt2 {font-weight: 300; color: #fff;}
footer .inner address ul li a.tt2 {position: relative; overflow: hidden; color: transparent;}
footer .inner address ul li a.tt2:before, footer .inner address ul li a.tt2:after {content: attr(data-text); position: absolute; left: 0; transition: .5s ease;}
footer .inner address ul li a.tt2:before {color: #fff; top: 0;}
footer .inner address ul li a.tt2:after {color: var(--red); top: 100%;}



@media screen and (min-width: 1201px) {
	header .h-inner .dep1 > li:hover > a {color: #fff;}
	header .h-inner .dep1 > li:hover > a:after {opacity: 1; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);}
	header .sitemap .sitemap-box .close-btn:hover {transform: rotate(90deg);}
	header .sitemap .sitemap-box .dep-box .dep:has(li:hover) > li:not(:hover) > * {opacity: .4;}
	header .sitemap .sitemap-box .dep-box .dep > li:hover > a {color: var(--red);}
	header .sitemap .sitemap-box .dep-box .bot-box .company .shinwoo:hover {box-shadow: inset 5px 5px 10px #14007d10, inset -5px -5px 10px #14007d10; color: #14007d;}
	header .sitemap .sitemap-box .dep-box .dep2 a:hover span:before {top: -100%;}
	header .sitemap .sitemap-box .dep-box .dep2 a:hover span:after {top: 0;}

	footer .inner address ul li a.tt2:hover:before {top: -100%;}
	footer .inner address ul li a.tt2:hover:after {top: 0;}

	footer .quick-menu .scrollUp:hover:after {scale: 2; border-radius: 50%;}
	footer .quick-menu .scrollUp:hover .text {opacity: 1; scale: 1; animation: rotateMove 8s linear infinite;}
	footer .quick-menu .scrollUp:hover i {animation: scrollUp_hover 2s cubic-bezier(0.81, 0.49, 0.27, 0.77) both infinite;}
	@keyframes scrollUp_hover {0%, 20% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);} 60%, 100% {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}}

}
@media screen and (min-width: 1025px) {
	header .h-inner .dep2 a {overflow: hidden;}
	header .h-inner .dep2 a span {clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transition: .7s cubic-bezier(0.81, 0.49, 0.27, 0.77);}
	header .h-inner .dep2.open a span {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
	header .h-inner .dep2:has(li:hover) li:not(:hover) a {opacity: .3;}
}
@media screen and (max-width: 1400px) {
	:root {
		--inner-padding: clamp(30px, 4vw, 4vw);
	}
	header .h-inner .dep2 {width: calc(100% + 2rem); left: 50%; transform: translateX(-50%);}

}
@media screen and (max-width: 1200px) {
	header .h-inner .dep2 a {font-size: .8rem; white-space: normal; word-break: break-all;}
}
@media screen and (max-width: 1024px) {
	header .h-inner > *:not(.nav) {width: auto;}
	header .h-inner .nav {display: none;}

	footer .quick-menu {right: 1.5rem; bottom: 1.5rem;}
	header .h-inner .sitemap-btn {width: 30px; height: 30px;}
	header .h-inner .sitemap-btn .circle {width: 8px; height: 8px;}
	header .h-inner .sitemap-btn:before, header .h-inner .sitemap-btn:after {width: 8px; height: 8px;}

	header .h-inner .sitemap-btn:hover .circle {transform: translate(22px, 22px);}
	header .h-inner .sitemap-btn:hover .circle.red {transform: translate(-22px, 22px);}
	header .h-inner .sitemap-btn:hover:before {transform: translate(22px, -22px);}
	header .h-inner .sitemap-btn:hover:after {transform: translate(-22px, -22px);}
}

@media screen and (max-width: 900px) {
	header .sitemap .sitemap-box .dep-box .dep > li {padding: 2.5rem 0; flex-direction: column; gap: 1.5rem; align-items: flex-start; min-height: 7rem; height: auto; justify-content: center; box-sizing: border-box;}
	footer .inner {flex-direction: column; gap: 3rem; align-items: flex-start; padding-top: 2rem; padding-bottom: 2rem;}
}

@media screen and (max-width: 640px) {
	footer .inner address ul {flex-direction: column;}
}

@media screen and (max-width: 480px) {
	:root {
		--inner-padding: 20px;
		--header-height: 4.5rem;
	}
}