@charset "UTF-8"; /* 공통 스타일 */
@font-face { font-family: 'MiceGothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-01@1.0/MICEGothic.woff2') format('woff2'); font-weight: 400; font-display: swap; } 
@font-face { font-family: 'MiceGothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-01@1.0/MICEGothic Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } 

* { margin:0; padding:0; box-sizing:border-box; word-break: keep-all; font-family: "Noto Sans KR", sans-serif; letter-spacing: -.1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color:var(--color30); } 
a { text-decoration:none; color: inherit; } 
ul, li { list-style:none; } 

:root { font-size: 10px; --main1: #003366; --main2: #eb6100; --color30 :#303030; --brown: #5b4b3f; --white: #fff; --light_orange:#ffd7ba; --ffe8d9: #ffe8d9; --light_blue:#e1eef8 } 

::selection { color: #fff; background-color: var(--main1); } 

::-webkit-scrollbar { width: 1.5rem; background: #e9e9e9; } 
::-webkit-scrollbar-thumb { background-color: #303030; border-radius: 1rem; } 


.inner { width:100%; } 
.inner1 { width: 100%; max-width:1200px; margin: 0 auto; } 
.inner2 { width: 100%; max-width:1400px; margin: 0 auto; } 

@media (max-width: 768px){
 .inner { padding-left:3rem; padding-right: 3rem; } 
 }
@media (max-width:1230px){
 .inner1 { padding-left:3rem; padding-right: 3rem; } 
 }
@media (max-width:1430px){
 .inner2 { padding-left:3rem; padding-right: 3rem; } 
 }


/* color */
.c_main1 { color: var(--main1) !important; } 
.c_main2 { color: var(--main2) !important; } 
.c_303030 { color: var(--color30) !important; } 
.c_white { color: var(--white) !important; } 
.c_brown { color: var(--brown) !important; } 
.c_light_orange { color: var(--light_orange) !important; } 
.c_ffe8d9 { color: var(--ffe8d9) !important; } 

.bg_white { background: #fff; } 
.bg_blue { background: var(--main1) !important; } 
.bg_orange { background: var(--main2) !important; } 
.bg_light_orange { background: var(--light_orange) !important; } 
.bg_light_blue { background: var(--light_blue) !important; } 
.bg_ffe8d9 { background: var(--ffe8d9) !important; }
.bg_303030 { background: #303030 !important; }
.bg_brown { background: var(--brown) !important; }



h1,h2,h3,h4,h5 { font-weight: normal; } 

h1 { font-size: 4.8rem; letter-spacing: -.15rem; } 
h2 { font-size: 4rem; letter-spacing: -.15rem; } 
h3 { font-size: 3.2rem; letter-spacing: -.2rem; } 
h4 { font-size: 2.4rem; letter-spacing: -.15rem; } 
h5 { font-size: 2rem; } 
p { font-size: 1.8rem; } 

.per100 { font-size: 0; } 
.per100 img { width: 100%; } 
.pc_show { display: block; } 
.m_show { display: none; } 


#wrap { width:100%; margin:auto; overflow:hidden; min-width: 300px; } 

.mice { font-family: 'MiceGothic', sans-serif !important; } 


/* 이미지 하얗게 */
.invert img { filter: brightness(0) invert(1); } 


/* 사이트맵 */
.sitemap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; gap: 1rem; background: #fff; height: auto; z-index: 102; padding:7rem 10rem; border-radius: 3rem; display: none; } 

.sitemap .top { padding-bottom: 3rem; border-bottom: 1px solid var(--main1); margin-bottom: 5rem; } 
.sitemap .top i { font-size: 3rem; font-weight: bold; color: var(--main1); } 

.sitemap_bg { background: #000000ad; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 101; display: none; } 
.sitemap_list { display: flex; flex-wrap: wrap; } 
.sitemap_list>li { flex: 0 0 calc(25%); } 
.sitemap_list a { display: inline-block; } 
.sitemap_list .depth1_btn { margin-bottom: 2rem; } 
.sitemap_list .depth1_btn h4 { padding-left: 1.2rem; border-left: 3px solid var(--main1); } 

.sitemap_list .sub-menu a { transition: color 0.2s, padding-left 0.2s; height: 3rem; margin-bottom: .5rem; } 
.sitemap_list .sub-menu a:hover { color: var(--main1); padding-left: 0.8rem; font-weight: 600; } 


@media (max-width: 1199px){
 .sitemap, .sitemap_bg { display: none !important; } 
 }


/* 헤더 */

header { position: fixed; z-index: 100; width: 100%; isolation: isolate; border-bottom: 1px solid #ccc; top: 0; background: #fff; } 
header .inner { position: relative; display: flex; width: 100%; align-items: center; height: 100%; padding-left: 4rem; justify-content: space-between; } 

a.logo { display: flex; align-items: center; gap: 1rem; color: #fff; transition: color 0.3s; } 

header .inner2 { display: flex; justify-content: space-between; width: 100%; margin: 0 auto; height: 11rem; align-items: center; position: relative; z-index: 100; } 
header nav { position : relative; height: 100%; display: flex; align-items: center; } 
header nav > ul { display: flex; gap: 0; height: 100%; } 
header nav > ul > li { text-align: center; position: relative; display: flex; flex-direction: column; justify-content: center; transition: background 300ms ease; } 


header nav > ul > li:not(:hover)::after { transition: opacity 200ms ease, visibility 200ms ease; } 
header nav .mainMenu { z-index: 10; height: 100%; display: grid; place-content: center; transition: font-weight 300ms ease; font-size: 1.9rem; color: var(--color30); padding: 0 3.2rem; } 
header .sitemap i, header .menu i { font-size: 2.3rem; color: var(--main1); padding-left: 2rem; font-weight: 500; } 
header nav .mainMenu.on { color: var(--main1); font-weight: bold; } 


header nav .subMenu { position: absolute; top: 12rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2.5rem; text-align: center; width: 100%; height: 0; overflow: hidden; z-index: 15; box-sizing: border-box; } 
header nav .subMenu li:first-child a { padding-top: 2rem; } 
header nav .subMenu a { font-size: 1.6rem; color: var(--color30); font-weight: 500; z-index: 10; transition: color 300ms ease; font-weight: normal; display: block; } 

header nav > ul > li:hover .mainMenu { color: var(--main1); font-weight: 600; } 
header nav > ul > li:hover .subMenu a:hover { text-decoration: underline; font-weight: 600; } 
header nav > ul > li.is-active .subMenu a { color: #fff; } 

header .header_bg { width: 100%; height: 0; position: absolute; top: 11.1rem; left: 0; background: #fff; z-index: 0; } 

header .menu { line-height: 1; color: var(--main1); } 

.nav_hover_bg { position: absolute; top: 100%; left: 0; height: 38rem; background: var(--main1); display: none; pointer-events: none; z-index: 1; } 



/* 퀵메뉴 */
#quick { position: fixed; right: 10px; top: calc(50%); transform: translateY(-50%); z-index: 100; transition: bottom 0.1s ease-out; text-align: center; border-radius: 3rem; border: 1px solid #eee; box-shadow: 0px 0px 10px 9px rgba(0,0,0,0.02); background: #ffffffee; overflow: hidden; } 

#quick ul { padding:2rem 1rem; display: flex; flex-direction: column; gap: 2rem; } 
#quick a { display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-weight: 500; } 
#quick a p { font-size: 1.4rem; } 
#quick .go-top { background: var(--main1); color: #fff; padding: 1rem 0; } 
#quick .go-top p { color: #fff; } 
#quick img { width: 3.5rem; margin-bottom: .2rem; } 


/* 하단 */
footer a.logo { filter: brightness(0) invert(.7); } 
footer { border-top: 1px solid #ddd; padding: 7rem 0; } 
footer .inner2 { margin: 0 auto; gap: 5rem; } 
footer .blog { position : absolute; top: 5rem; right: -10rem; display: block; } 
footer .info p { color: #505050; line-height: 1.4; } 
footer .info p b { color: #000; } 
footer .inner2 .pc_show { display: flex; padding-top: 1rem; } 




/* Media Queries */
@media (max-width: 1500px) { } 

@media (max-width: 1400px) { } 

@media (max-width: 1200px){
 :root { font-size: 8.5px; letter-spacing: -.3px; } 
header nav ul, .header_bg { display: none; } 
a.logo { width: 20rem; } 

#menu { display: block !important; } 

header .sitemap i, header .menu i { font-size: 4rem; color: var(--main1); } 

#quick { top:unset; bottom: 0; transform: translate(0, 0); width: 100%; right: 0; border-radius: 0; background: var(--main1); border: none; overflow: visible; box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);} 
#quick ul { flex-direction: row; justify-content: space-between; padding: 0; gap: 0; } 
#quick ul li { width: 25%; padding:1.5rem 0; } 
#quick ul li:not(:last-child) { border-right: 1px solid #ffffff34; } 
#quick a p { color: #fff; } 
#quick a:not(.go-top) { height: 100%; } 

#quick .go-top { display: grid; place-content: center; position : absolute; z-index: 10; top: -7rem; right: 1rem; aspect-ratio: 1/1; width: 6rem; border-radius: 50%; border:.5px solid #ffffff3b } 

#quick .go-top i { font-size: 2rem; } 

#quick img { filter: brightness(0) invert(1); } 

footer { margin-bottom: 6rem; } 
 }


@media (max-width: 1024px) { } 


@media (max-width: 768px){
 :root { font-size: 6.6px; } 
.pc_show { display: none; } 
.m_show { display: block !important; } 

footer .inner2 .pc_show { display: none; } 
footer .m_show { display: flex !important; } 
footer .mobile { display: flex; flex-direction: column; width: 100%; } 
footer .mobile .left { display: flex; align-items: end; justify-content: space-between; } 

footer { margin-bottom: 9rem; } 
 }



@media (max-width: 480px) { 
    a.logo { width: 18rem; } 
    h1 { font-size: 4.5rem; } 
 }


/* 카카오지도 */
.root_daum_roughmap .wrap_controllers,
.section_address { display: none; } 
.root_daum_roughmap { width: 100% !important; height: 100%; } 
.root_daum_roughmap .wrap_map { height:100% !important; }