@charset "utf-8";

:root{
--tit_black: #141414;
--text_black: #535353;
--white: #fff;
--bg_black: #121212;
--bg:#ffffff;
--bg_soft:#f5f6f8;
--bg_card:#f7f8fa;
--navy: #12202F;
--dk_gray: #333;
--blue: #2b65ed;
--blue_soft:#eef3fb;
--red: #d6122e;
--red_dark:#b30e26;
--red_soft:#fdeaec;
--yellow: #f7d300;
--ink:#222730;
--ink_2:#555c68;
--ink_3:#8a909b;
--tit: 'A2Z';
--line: 1px solid #E3E3E3;
--line2: 1px solid #e6e8ec;
--ok:#1f9d57;
--ok_soft:#e7f6ee;
--warn:#d98a00;
--warn_soft:#fdf3e0;
--wait:#8a909b;
--wait_soft:#eef0f3;
--gold:#c0810e;
--gold_dark:#a06d0b;
--gold_soft:#faf6ee;
--prof:#6d4bb8;
--prof_dark:#553a92;
--prof_soft:#efeafa;
--done_soft: #f4f5f7;
--ready_soft: #eef3fb;
--ready: #2b65ed;
--st_ok:#1f9d57;
--st_ok_soft:#e7f6ee;
--st_ready:#2b65ed;
--st_ready_soft:#eef3fb;
--st_fin:#8a909b;
--st_fin_soft:#eef0f3;
--st_done:#b8bcc4;
--st_done_soft:#f4f5f7;
--st_gold:#c0810e;
--st_gold_dark:#a06d0b;
--st_gold_soft:#faf6ee;
--st_prof:#6d4bb8;
--st_prof_soft:#efeafa;
--st_prof_dark:#553a92;
--st_ready_soft: #eef3fb;
--st_ready: #2b65ed;
--st_warn:#d98a00;
--st_warn_soft:#fdf3e0;
--st_wait:#8a909b; 
--st_wait_soft:#eef0f3;
--ink2:#555c68;
--bg_card:#f7f8fa;
--star_on:#e8ac1f;
--radius:10px;
--radius_sm:6px;
}

/* set */
*{box-sizing: border-box;}
body, input, textarea, select, button, table{font-family: 'pretendard', 'Dotum', "돋움", sans-serif;color: var(--text_black);}
a{color: var(--tit_black);}

/* scroll */
*::-webkit-scrollbar {width:5px;height:5px;}
*::-webkit-scrollbar-track {border-radius:5px;background:#f4f4f4;}
*::-webkit-scrollbar-thumb {background:#121212;border-radius: 5px}

/* mobile */
.main_wrap{padding: 0 20px;}
header{padding: 30px 0;border-bottom: 1px solid #C5C5C5;}
header .main_wrap{display: flex;justify-content: space-between;align-items: center;}
header h1 a{display: flex;gap: 20px;align-items: center;}
header h1 a span{width: 82px;height: 40px;background: url("/images/common/logo_b.png") no-repeat center /cover;font-size: 0;flex-shrink: 0;}
header h1 a strong{width: 125px;font-size: 18px;line-height: 1.1;}
header .util{display: none;}
header .head_btm button, header .sitemap a{display: block;width: 30px;height: 30px;font-size: 0;background: url("/images/common/main_icon.png") no-repeat center 0;cursor: pointer;}
header .menu{display: none;position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(255,255,255,.8);backdrop-filter: blur(5px);padding: 20px;z-index: 9;}
header .menu.on{display: block;}
header .menu h2{font-family: var(--tit);font-size: 24px;font-weight: 700;color: var(--tit_black);padding-bottom: 20px;border-bottom: var(--line);margin-bottom: 20px;}
header .depth1>li>a{display: inline-flex;padding: 10px 0;font-family: var(--tit);font-size: 20px;color: var(--tit_black);position: relative;}
header .depth1>li.on>a{font-weight: 600;}
header .depth1>li.on>a:after{position: absolute;width: 6px;height: 6px;background: var(--blue);content: "";border-radius: 100%;right: -10px;}
header .depth_box{display: none;background: var(--white);padding: 20px;border-radius: 10px;}
header li.on .depth_box{display: block;}
header .depth_box li a{display: block;padding: 4px 0;}
header .depth_box li.on a{color: var(--blue);font-weight: 700;}
header .depth_box li div{border-top: 1px solid var(--tit_black);padding: 10px;}
header .menu button{background-position: center -30px;position: absolute;top: 20px;right: 20px;}
header .sitemap{display: none;}

footer{background: var(--bg_black);color: #e4e4e4;padding: 40px 0;}
footer .main_wrap{display: flex;flex-direction: column;gap: 40px;}
footer .f_top{display: flex;flex-direction: column;gap: 40px;}
footer .f_logo a{display: block;width: 163px;height: 80px;background: url("/images/common/logo_w.png") no-repeat center /cover;font-size: 0;}
footer .site_link{position: relative;}
footer .site_link button{display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 15px 20px;border: 1px solid rgba(255,255,255,.3);color: var(--white);border-radius: 8px;background: var(--bg_black);font-size: 22px;}
footer .site_link button span{width: 35px;height: 35px;background: url("/images/common/main_icon.png") no-repeat center -278px;font-size: 0;}
footer .site_link div{display: none;position: absolute;left: 0;right: 0;}
footer .site_link div ul{padding: 20px;background: rgba(255,255,255,.8);backdrop-filter: blur(5px);border-radius: 8px;max-height: 200px;overflow-y: auto;}
footer .site_link div.on{display: block;}
footer .site_link div li a{display: block;padding: 10px 0;font-size: 18px;}
footer .site_link div button{position: absolute;top: -67px;left: 0;}
footer .site_link div button span{transform: rotate(180deg);}
footer .f_btm{display: flex;flex-direction: column;gap: 40px;}
footer .f_info ul{display: flex;flex-wrap: wrap;flex-direction: column;gap: 10px;font-size: 18px;}
footer .f_call ul{display: flex;flex-direction: column;}
footer .f_call li{display: flex;gap: 8px;font-size: 18px;align-items: center;}
footer .f_call li strong{font-size: 32px;color: var(--white);}

/* tablet */
@media (min-width: 768px) {
header{padding: 20px 0;}
header h1 a span{width: 163px;height: 80px;}
header h1 a strong{width: 154px;font-size: 22px;}
footer .f_top, footer .f_btm{flex-direction: row;justify-content: space-between;align-items: center;}
footer .site_link{min-width: 300px;}
footer .f_call{flex-shrink: 0;}
}

/* pc */
@media (min-width: 1024px) {
header{padding: 20px 0 0;min-height: 140px;}
header .util{display: block;}
header .util ul{display: flex;justify-content: flex-end;}
header .util li:before{display: inline-flex;content: "";width: 1px;height: 10px;background: #303030;margin: 0 10px;}
header .util li:first-of-type::before{display: none;}
header .util li a{color: var(--text_black);font-size: 18px;}
header .head_btm button{display: none;}
header .menu{display: block;background: none;backdrop-filter: none;position: static;padding: 0 50px 0 0;}
header .sitemap{display: block;position: absolute;right: 20px;top: 70px;}
header .menu h2{display: none;}
header .depth1{display: flex;}
header .depth1>li{position: relative;}
header .depth1>li>a{padding: 20px 20px 40px;font-size: 22px;font-family: inherit;font-weight: 600;}
header .depth1>li.on>a{font-weight: 800;}
header .depth1>li.on>a:after{right: 10px;}
header .depth_box{position: absolute;padding: 10px 0 0;min-width: 200px;background: none;left: 50%;transform: translateX(-50%);z-index: 1;}
header .depth_box ul{padding: 20px;background: rgba(255,255,255,.8);backdrop-filter: blur(5px);box-shadow: 2px 2px 22px rgba(68,68,68,.2);border-radius: 22px;}
header .depth_box li a{padding: 10px 0;text-align: center;font-size: 18px;}
header .depth_box li a:hover, header .depth_box li a:focus{font-weight: 700;}
header .depth_box li div{border-top: none;padding: 0;}
}

/* wide */
@media (min-width: 1440px) {
.main_wrap{padding: 0 80px;}
header .sitemap{right: 80px;}
footer .f_call ul{flex-direction: row;gap: 25px;}
footer .f_call li{font-size: 22px;}
footer .f_call li strong{font-size: 40px;}
}
@media (min-width: 1600px) {
.main_wrap{margin: 0 auto;max-width: 1920px;}
header .main_wrap{position: relative;}
header .sitemap{top: 50px;}
}

/* admin */
@media (min-width: 1024px) {
header .admin .depth_box{left: auto;transform: none;right: 0;position: fixed;max-width: 1760px;}
header .admin .depth_box .depth2{display: flex;flex-wrap: wrap;flex-direction: row;gap: 20px;}
header .admin .depth_box .depth2 li{min-width: 160px;}
}
@media (min-width: 1440px) {
header .admin .depth_box{right: 80px;}
}
@media (min-width: 1920px) {
header .admin .depth_box{right: calc((100vw - 1920px)/2 + 60px);}
}