@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

/*  Reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: "Nanum Gothic", sans-serif; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; color: #111; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }

* { margin: 0; padding: 0; box-sizing: border-box; }
*:focus { outline: none !important; box-shadow: none !important; }
*:hover { -webkit-transition: all 0.2s; transition: all 0.2s; }
body { font-size: 14px; line-height: 28px; letter-spacing: -0.5px; font-family: "Nanum Gothic", sans-serif; color: #333; }
section { margin-top: 80px; min-height: calc(100vh - 294px); position: relative; }
.container { padding: 0; }
section > .container { padding-bottom: 160px; }

.pointer:hover { cursor: pointer; }
.clear { clear: both; }
/* === Design Setting === */


/* = width = */
.w-10 { width: 10%; } .w-20 { width: 20%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; }
.w-60 { width: 60%; } .w-70 { width: 70%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .vw-100 {width: 100vw;} 
.w-100px { width: 100px; } .w-140px { width: 140px; } .w-300px { width: 300px; }

/* = height = */
.h-10 { height: 10%; } .h-20 { height: 20%; } .h-30 { height: 30%; } .h-40 { height: 40%; } .h-50 { height: 50%; }
.h-60 { height: 60%; } .h-70 { height: 70%; } .h-80 { height: 80%; } .h-90 { height: 90%; } .vh-100 { height: 100vh; }

/* = margin = */
.m-2px { margin: 2px; } .m-4px { margin: 4px; } .m-6px { margin: 6px; } .m-8px { margin: 8px; } .m-10px { margin: 10px; }
.m-12px { margin: 12px; } .m-14px { margin: 14px; } .m-16px { margin: 16px; } .m-18px { margin: 18px; } .m-20px { margin: 20px; }
.m-30px { margin: 30px; } .m-40px { margin: 40px; } .m-50px { margin: 50px; } .m-60px { margin: 60px; }
.m-70px { margin: 70px; } .m-80px { margin: 80px; } .m-90px { margin: 90px; } .m-100px { margin: 100px; }
.m-120px { margin: 120px; } .m-140px { margin: 140px; } .m-160px { margin: 160px; } .m-180px { margin: 180px; } .m-200px { margin: 200px;}

.mt-2px { margin-top: 2px; } .mt-4px { margin-top: 4px; } .mt-6px { margin-top: 6px; } .mt-8px { margin-top: 8px; } .mt-10px { margin-top: 10px; }
.mt-12px { margin-top: 12px; } .mt-14px { margin-top: 14px; } .mt-16px { margin-top: 16px; } .mt-18px { margin-top: 18px; } .mt-20px { margin-top: 20px; }
.mt-30px { margin-top: 30px; } .mt-40px { margin-top: 40px; } .mt-50px { margin-top: 50px; } .mt-60px { margin-top: 60px; }
.mt-70px { margin-top: 70px; } .mt-80px { margin-top: 80px; } .mt-90px { margin-top: 90px; } .mt-100px { margin-top: 100px; }
.mt-120px { margin-top: 120px; } .mt-140px { margin-top: 140px; } .mt-160px { margin-top: 160px; } .mt-180px { margin-top: 180px; }.mt-200px { margin-top: 200px;}

.mb-2px { margin-bottom: 2px; } .mb-4px { margin-bottom: 4px; } .mb-6px { margin-bottom: 6px; } .mb-8px { margin-bottom: 8px; } .mb-10px { margin-bottom: 10px; }
.mb-12px { margin-bottom: 12px; } .mb-14px { margin-bottom: 14px; } .mb-16px { margin-bottom: 16px; } .mb-18px { margin-bottom: 18px; } .mb-20px { margin-bottom: 20px; }
.mb-30px { margin-bottom: 30px; } .mb-40px { margin-bottom: 40px; } .mb-50px { margin-bottom: 50px; } .mb-60px { margin-bottom: 60px; }
.mb-70px { margin-bottom: 70px; } .mb-80px { margin-bottom: 80px; } .mb-90px { margin-bottom: 90px; } .mb-100px { margin-bottom: 100px; }
.mb-120px { margin-bottom: 120px; } .mb-140px { margin-bottom: 140px; } .mb-160px { margin-bottom: 160px; } .mb-180px { margin-bottom: 180px; } .mb-200px { margin-bottom: 200px;}

.ml-2px { margin-left: 2px; } .ml-4px { margin-left: 4px; } .ml-6px { margin-left: 6px; } .ml-8px { margin-left: 8px; } .ml-10px { margin-left: 10px; }
.ml-12px { margin-left: 12px; } .ml-14px { margin-left: 14px; } .ml-16px { margin-left: 16px; } .ml-18px { margin-left: 18px; } .ml-20px { margin-left: 20px; }
.ml-30px { margin-left: 30px; } .ml-40px { margin-left: 40px; } .ml-50px { margin-left: 50px; } .ml-60px { margin-left: 60px; }
.ml-70px { margin-left: 70px; } .ml-80px { margin-left: 80px; } .ml-90px { margin-left: 90px; } .ml-100px { margin-left: 100px; }
.ml-120px { margin-left: 120px; } .ml-140px { margin-left: 140px; } .ml-160px { margin-left: 160px; } .ml-180px { margin-left: 180px; } .ml-200px { margin-left: 200px;}

.mr-2px { margin-right: 2px; } .mr-4px { margin-right: 4px; } .mr-6px { margin-right: 6px; } .mr-8px { margin-right: 8px; } .mr-10px { margin-right: 10px; }
.mr-12px { margin-right: 12px; } .mr-14px { margin-right: 14px; } .mr-16px { margin-right: 16px; } .mr-18px { margin-right: 18px; } .mr-20px { margin-right: 20px; }
.mr-30px { margin-right: 30px; } .mr-40px { margin-right: 40px; } .mr-50px { margin-right: 50px; } .mr-60px { margin-right: 60px; }
.mr-70px { margin-right: 70px; } .mr-80px { margin-right: 80px; } .mr-90px { margin-right: 90px; } .mr-100px { margin-right: 100px; }
.mr-120px { margin-right: 120px; } .mr-140px { margin-right: 140px; } .mr-160px { margin-right: 160px; } .mr-180px { margin-right: 180px; } .mr-200px { margin-right: 200px;}

.mx-2px { margin-left: 2px; margin-right: 2px; } .mx-4px { margin-left: 4px; margin-right: 4px; } .mx-6px { margin-left: 6px; margin-right: 6px; } .mx-8px { margin-left: 8px; margin-right: 8px; } .mx-10px { margin-left: 10px; margin-right: 10px; }
.mx-12px { margin-left: 12px; margin-right: 12px; } .mx-14px { margin-left: 14px; margin-right: 14px; } .mx-16px { margin-left: 16px; margin-right: 16px; } .mx-18px { margin-left: 18px; margin-right: 18px; } .mx-20px { margin-left: 20px; margin-right: 20px; }
.mx-30px { margin-left: 30px; margin-right: 30px; } .mx-40px { margin-left: 40px; margin-right: 40px; } .mx-50px { margin-left: 50px; margin-right: 50px; } .mx-60px { margin-left: 60px; margin-right: 60px; }
.mx-70px { margin-left: 70px; margin-right: 70px; } .mx-80px { margin-left: 80px; margin-right: 80px; } .mx-90px { margin-left: 90px; margin-right: 90px; } .mx-100px { margin-left: 100px; margin-right: 100px; }
.mx-120px { margin-left: 120px; margin-right: 120px; } .mx-140px { margin-left: 140px; margin-right: 140px; } .mx-160px { margin-left: 160px; margin-right: 160px; } .mx-180px { margin-left: 180px; margin-right: 180px; } .mx-200px { margin-left: 200px; margin-right: 200px;}

.my-2px { margin-top: 2px; margin-bottom: 2px; } .my-4px { margin-top: 4px; margin-bottom: 4px; } .my-6px { margin-top: 6px; margin-bottom: 6px; } .my-8px { margin-top: 8px; margin-bottom: 8px; } .my-10px { margin-top: 10px; margin-bottom: 10px; }
.my-30px { margin-top: 30px; margin-bottom: 30px; } .my-40px { margin-top: 40px; margin-bottom: 40px; } .my-50px { margin-top: 50px; margin-bottom: 50px; } .my-60px { margin-top: 60px; margin-bottom: 60px; }
.my-12px { margin-top: 12px; margin-bottom: 12px; } .my-14px { margin-top: 14px; margin-bottom: 14px; } .my-16px { margin-top: 16px; margin-bottom: 16px; } .my-18px { margin-top: 18px; margin-bottom: 18px; } .my-20px { margin-top: 20px; margin-bottom: 20px; }
.my-70px { margin-top: 70px; margin-bottom: 70px; } .my-80px { margin-top: 80px; margin-bottom: 80px; } .my-90px { margin-top: 90px; margin-bottom: 90px; } .my-100px { margin-top: 100px; margin-bottom: 100px; }
.my-120px { margin-top: 120px; margin-bottom: 120px; } .my-140px { margin-top: 140px; margin-bottom: 140px; } my-160px { margin-top: 160px; margin-bottom: 160px; } .my-180px { margin-top: 180px; margin-bottom: 180px; } .my-200px { margin-top: 200px; margin-right: 200px;}

/* = padding = */
.p-2px { padding: 2px; } .p-4px { padding: 4px; } .p-6px { padding: 6px; } .p-8px { padding: 8px; } .p-10px { padding: 10px; }
.p-12px { padding: 12px; } .p-14px { padding: 14px; } .p-16px { padding: 16px; } .p-18px { padding: 18px; } .p-20px { padding: 20px; }
.p-30px { padding: 30px; } .p-40px { padding: 40px; } .p-50px { padding: 50px; } .p-60px { padding: 60px; }
.p-70px { padding: 70px; } .p-80px { padding: 80px; } .p-90px { padding: 90px; } .p-100px { padding: 100px; }
.p-120px { padding: 120px; } .p-140px { padding: 140px; } .p-160px { padding: 160px; } .p-180px { padding: 180px; } .p-200px { padding: 200px; }

.pt-2px { padding-top: 2px; } .pt-4px { padding-top: 4px; } .pt-6px { padding-top: 6px; } .pt-8px { padding-top: 8px; } .pt-10px { padding-top: 10px; }
.pt-12px { padding-top: 12px; } .pt-14px { padding-top: 14px; } .pt-16px { padding-top: 16px; } .pt-18px { padding-top: 18px; } .pt-20px { padding-top: 20px; }
.pt-30px { padding-top: 30px; } .pt-40px { padding-top: 40px; } .pt-50px { padding-top: 50px; } .pt-60px { padding-top: 60px; }
.pt-70px { padding-top: 70px; } .pt-80px { padding-top: 80px; } .pt-90px { padding-top: 90px; } .pt-100px { padding-top: 100px; }
.pt-120px { padding-top: 120px; } .pt-140px { padding-top: 140px; } .pt-160px { padding-top: 160px; } .pt-180px { padding-top: 180px; } .pt-200px { padding-top: 200px; }

.pb-2px { padding-bottom: 2px; } .pb-4px { padding-bottom: 4px; } .pb-6px { padding-bottom: 6px; } .pb-8px { padding-bottom: 8px; } .pb-10px { padding-bottom: 10px; }
.pb-12px { padding-bottom: 12px; } .pb-14px { padding-bottom: 14px; } .pb-16px { padding-bottom: 16px; } .pb-18px { padding-bottom: 18px; } .pb-20px { padding-bottom: 20px; }
.pb-30px { padding-bottom: 30px; } .pb-40px { padding-bottom: 40px; } .pb-50px { padding-bottom: 50px; } .pb-60px { padding-bottom: 60px; }
.pb-70px { padding-bottom: 70px; } .pb-80px { padding-bottom: 80px; } .pb-90px { padding-bottom: 90px; } .pb-100px { padding-bottom: 100px; }
.pb-120px { padding-bottom: 120px; } .pb-140px { padding-bottom: 140px; } .pb-160px { padding-bottom: 160px; } .pb-180px { padding-bottom: 180px; } .pb-200px { padding-bottom: 200px; }

.pl-2px { padding-left: 2px; } .pl-4px { padding-left: 4px; } .pl-6px { padding-left: 6px; } .pl-8px { padding-left: 8px; } .pl-10px { padding-left: 10px; }
.pl-12px { padding-left: 12px; } .pl-14px { padding-left: 14px; } .pl-16px { padding-left: 16px; } .pl-18px { padding-left: 18px; } .pl-20px { padding-left: 20px; }
.pl-30px { padding-left: 30px; } .pl-40px { padding-left: 40px; } .pl-50px { padding-left: 50px; } .pl-60px { padding-left: 60px; }
.pl-70px { padding-left: 70px; } .pl-80px { padding-left: 80px; } .pl-90px { padding-left: 90px; } .pl-100px { padding-left: 100px; }
.pl-120px { padding-left: 120px; } .pl-140px { padding-left: 140px; } .pl-160px { padding-left: 160px; } .pl-180px { padding-left: 180px; } .pl-200px { padding-left: 200px; }

.pr-2px { padding-right: 2px; } .pr-4px { padding-right: 4px; } .pr-6px { padding-right: 6px; } .pr-8px { padding-right: 8px; } .pr-10px { padding-right: 10px; }
.pr-12px { padding-right: 12px; } .pr-14px { padding-right: 14px; } .pr-16px { padding-right: 16px; } .pr-18px { padding-right: 18px; } .pr-20px { padding-right: 20px; }
.pr-30px { padding-right: 30px; } .pr-40px { padding-right: 40px; } .pr-50px { padding-right: 50px; } .pr-60px { padding-right: 60px; }
.pr-70px { padding-right: 70px; } .pr-80px { padding-right: 80px; } .pr-90px { padding-right: 90px; } .pr-100px { padding-right: 100px; }
.pr-120px { padding-right: 120px; } .pr-140px { padding-right: 140px; } .pr-160px { padding-right: 160px; } .pr-180px { padding-right: 180px; } .pr-200px { padding-right: 200px; }

.pw-2px { padding-left: 2px; padding-right: 2px; } .pw-4px { padding-left: 4px; padding-right: 4px; } .pw-6px { padding-left: 6px; padding-right: 6px; } .pw-8px { padding-left: 8px; padding-right: 8px; } .pw-10px { padding-left: 10px; padding-right: 10px; }
.pw-12px { padding-left: 12px; padding-right: 12px; } .pw-14px { padding-left: 14px; padding-right: 14px; } .pw-16px { padding-left: 16px; padding-right: 16px; } .pw-18px { padding-left: 18px; padding-right: 18px; } .pw-20px { padding-left: 20px; padding-right: 20px; }
.pw-30px { padding-left: 30px; padding-right: 30px; } .pw-40px { padding-left: 40px; padding-right: 40px; } .pw-50px { padding-left: 50px; padding-right: 50px; } .pw-60px { padding-left: 60px; padding-right: 60px; }
.pw-70px { padding-left: 70px; padding-right: 70px; } .pw-80px { padding-left: 80px; padding-right: 80px; } .pw-90px { padding-left: 90px; padding-right: 90px; } .pw-100px { padding-left: 100px; padding-right: 100px; }
.pw-120px { padding-left: 120px; padding-right: 120px; } .pw-140px { padding-left: 140px; padding-right: 140px; } .pw-160px { padding-left: 160px; padding-right: 160px; } .pw-180px { padding-left: 180px; padding-right: 180px; } .pw-200px { padding-left: 200px; padding-right: 200px; }

.py-2px { padding-top: 2px; padding-bottom: 2px; } .py-4px { padding-top: 4px; padding-bottom: 4px; } .py-6px { padding-top: 6px; padding-bottom: 6px; } .py-8px { padding-top: 8px; padding-bottom: 8px; } .py-10px { padding-top: 10px; padding-bottom: 10px; }
.py-12px { padding-top: 12px; padding-bottom: 12px; } .py-14px { padding-top: 14px; padding-bottom: 14px; } .py-16px { padding-top: 16px; padding-bottom: 16px; } .py-18px { padding-top: 18px; padding-bottom: 18px; } .py-20px { padding-top: 20px; padding-bottom: 20px; }
.py-30px { padding-top: 30px; padding-bottom: 30px; } .py-40px { padding-top: 40px; padding-bottom: 40px; } .py-50px { padding-top: 50px; padding-bottom: 50px; } .py-60px { padding-top: 60px; padding-bottom: 60px; }
.py-70px { padding-top: 70px; padding-bottom: 70px; } .py-80px { padding-top: 80px; padding-bottom: 80px; } .py-90px { padding-top: 90px; padding-bottom: 90px; } .py-100px { padding-top: 100px; padding-bottom: 100px; }
.py-120px { padding-top: 120px; padding-bottom: 120px; } .py-140px { padding-top: 140px; padding-bottom: 140px; } .py-160px { padding-top: 160px; padding-bottom: 160px; } .py-180px { padding-top: 180px; padding-bottom: 180px; } .py-200px { padding-top: 200px; padding-bottom: 200px; }

/* === 헤더 === */
header { position: fixed; width: 100%; top: 0; left: 0; z-index: 30000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
header > .container { display: flex; align-items: flex-start; justify-content: space-between; }
.headerLogo { height: 80px; display: flex; align-items: center; }
.headerLogo > a { display: inline-block; height: 60px; }
.headerLogo > a > img { height: 100%; }
#lnb { overflow: hidden; height: 80px; z-index: 10001; }
#lnb > ul { display: flex; justify-content: center; }
.main { text-align: center; position: relative; width: 160px; }
.main>a { width: 100%; height: 80px; line-height: 80px; font-size: 18px; color:#333; cursor: pointer; }
.main:hover>a, .main.active>a { color: #ED6B00; }
.main>a::after { content: ""; width: 0; height: 4px; background-color: #ED6B00; position: absolute; top: 76px; left: 50%; transform: translateX(-50%); transition: all 0.2s; z-index: 10000;}
.main:hover>a::after, .main.active>a::after { width: 100%; }
.sub { width: 100%; height: calc(100% - 60px); padding-top: 10px; padding-bottom: 12px; position: relative; z-index: 20000; }
.sub a { display: block; height: 45px; font-size: 16px; color: #333; }
.sub a > div { height: 100% !important; display: flex; justify-content: center; align-items: center; }
.sub a:hover > div > p, .sub a.active > div > p { color: #ED6B00; font-weight: 800; }
#menuback { top: 100px; height: 100%; border-bottom: 1px solid #e5e5e5; z-index: 10000; display: none; }
.sub > li > a > div > p { line-height: 20px; }

/* == Mobile Menu == */
#ham { color: #333; background: transparent; display:none; width: 40px; height: 40px; font-size: 40px; border: none; }
#mback { top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.5; z-index: 10000; display: none; }
#mmenu { box-sizing: border-box; width: 220px; height: 100%; top: 0; right: -220px; z-index: 20000; }
#mgnb > a { display: inline-block; height: 80px; padding: 10px 20px; border-bottom: 2px solid #aaa; }
#mgnb > a > img { width: 100%; }
#mlnb { height: calc(100% - 80px); overflow: auto; }
.mmain > a { width: 100%; height: 60px; line-height: 60px; color: #333; font-weight: 800; border-bottom: 1px solid #dddce3; }
.mmain > a:hover { color: #333; }
.mmain.active > a { color: #ED6B00 }
.mmain.active > .msub { display: block; }
.mmain > a > div { float: right; font-size: 18px; width: 20px; height: 20px; margin-right: 16px; margin-top: 18px; position: relative; color: #333; }
.msub { display: none; }
.msub a { color: #666; font-size: 0.92em; background: #f0f0f0; font-weight: 800; height: 45px; line-height: 45px; padding-left: 20px; display: block; border-bottom: 1px solid #e0e0e0; }
.msub a.active { color: #ED6B00; }


/* ===== MAIN PAGE ===== */
#loading { position: fixed; z-index: 10000000; background-color: #FFF; left: 0; right: 0; top: 0; bottom: 0; }
#loading > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#loading > div > img { width: 200px; }
#loading > div > svg { margin: 60px auto; display: block; }

@keyframes spin {
    0%   {stroke-dasharray: 0px 139px;}
    100% {stroke-dasharray: 139px 139px;}
}
@keyframes spin2 {
    0%   {transform: rotate(-90deg);}
    100% {transform: rotate(270deg);}
}
#cir1 { cx: 50px; cy: 50px; r: 30px; stroke: #f08300 ; fill: transparent; stroke-width: 4px; transform-origin: center; animation: spin 2s linear infinite alternate, spin2 2s linear infinite; }
#cir2 { cx: 50px; cy: 50px; r: 18px; stroke: #004294; fill: transparent; stroke-width: 2px; transform-origin: center; animation: spin 1.5s linear infinite alternate, spin2 1.5s linear infinite; }


.indexBox { position: relative; top: 0; min-height: calc(100vh - 380px); }
.mv { width: 100%; height: 600px; margin: 0 auto; display: flex; }
.mainImgBox { position: relative; height: 100%; width: 100%; }
.mainImg { height: 100%; width: 100%; overflow: hidden; position: relative; }
.mainImg > img { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.mainImgBox > .mainTxt { color: #FFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; }
.mainImgBox > .mainTxt > p:nth-of-type(1) { font-size: 34px; line-height: 34px; font-weight: 700; margin-bottom: 20px; }
.mainImgBox > .mainTxt > p:nth-of-type(2) { font-size: 64px; line-height: 64px; font-weight: 800; margin-bottom: 24px; letter-spacing: 0.05em; }
.mainImgBox > .mainTxt > p:nth-of-type(3) { font-size: 28px; line-height: 28px; }

.subTitle { position: relative; text-align: center; font-weight: 800; font-size: 40px; line-height: 40px; padding-top: 20px; margin-bottom: 60px; margin-top: 180px; }
.subTitle::before { position: absolute; content: ""; height: 5px; width: 60px; background-color: #ED6B00; left: 50%; top: 0; transform: translate(-50%); }

.indexIntroBox > div { display: flex; justify-content: space-between; }
.indexIntroBox .indexIntroTxt { margin-top: 120px; }
.indexIntroBox .indexIntroTxt > p:first-of-type { color: #ED6B00; font-size: 32px; line-height: 48px; font-weight: 800; margin-bottom: 40px;}
.indexIntroBox .indexIntroTxt > p:last-of-type { font-size: 20px; letter-spacing: -0.04em; line-height: 34px; margin-bottom: 40px;}
.btn-outline-orange, .btn-outline-orange:focus { display: block; padding: 0; border: 1px solid #ED6B00; color: #ED6B00; height: 46px; line-height: 42px; border-radius: 4px; font-weight: 800; }
.btn-outline-orange > a { color: #ED6B00; display:block; padding: 0 50px; }
.btn-outline-orange:hover { background-color: #ED6B00; border: #ED6B00; }
.btn-outline-orange:hover > a { color: #FFF; }
.indexIntroBox .indexIntroImg { background: url("../img/indexIntroBg.jpg") no-repeat center center / cover; height: 320px; width: 460px; border-radius: 20px; position: relative; top: 30px; right: 30px; box-shadow: 4px -4px 12px rgba(0,0,0,0.2); margin-left: 30px; }
.indexIntroBox .indexIntroImg::after { height: 100%; width: 100%; background: #ED6B00; border-radius: 20px; position: absolute; content: ""; z-index: -1; top: -30px; right: -30px; }

.indexJoinBox { margin-top: 180px;  background: url("../img/bg_join.jpg") no-repeat center center / cover; height: 420px; position: relative; display: flex; justify-content: center; align-items: center; }
.indexJoinBox::after { content: ""; position: absolute; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0; left: 0; }
.indexJoinBox > div > .subTitle { margin-top: 0 !important; }
.indexJoinBox > div { position: relative; z-index: 100; text-align: center; color: #FFF; }
.indexJoinBox > div > p { font-size: 18px; line-height: 34px; font-weight: 700; }
.indexJoinBox > div > .btn-outline-white { margin-top: 40px; border: 1px solid #FFF; color: #FFF; height: 46px; line-height: 42px; border-radius: 4px; font-weight: 800; padding: 0; }
.indexJoinBox > div > .btn-outline-white > a { color: #FFF; padding: 0 50px; }
.indexJoinBox > div > .btn-outline-white:hover { background-color: #FFF; border: #FFF; }
.indexJoinBox > div > .btn-outline-white:hover > a { color: #ED6B00 !important; }

.indexNoticeBox { width: 100%; margin: 0 auto; }
.indexNoticeBox > div:nth-of-type(1), .indexNoticeBox > div:nth-of-type(2) { margin-bottom: 20px; }
.indexNoticeBox > div:nth-of-type(odd) { padding-left: 0; }
.indexNoticeBox > div:nth-of-type(even) { padding-right: 0; }
.indexNoticeBox > div > .border { min-height: 242px;  border-radius: 10px; }
.indexNoticeBox ul li { margin-bottom: 4px; }
.indexNoticeBox ul li a { color: #333; display: flex; justify-content: space-between; align-items: center; }
.indexNoticeBox ul li a:hover { color: #ED6B00; font-weight: 700; }
.indexNoticeBox ul li a p:first-of-type { display: inline-block; width: calc(100% - 100px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all; }
.indexNoticeBox ul li a p:last-of-type { display: inline-block; }
.indexListTitle { margin-bottom: 24px; }
.indexListTitle > p { font-size: 22px; letter-spacing: 0.02rem; font-weight: 800; display: inline-block; position: relative; padding: 0 4px;}
.indexListTitle > p::after { position: absolute; content: ""; width: 100%; height: 3px; background-color: #ED6B00; bottom: -10px; left: 0; }
.indexListTitle > a { font-size: 24px; color: #333; }
.indexListTitle > a:hover { transform: rotate(90deg) translate(-1px, 1px); color: #ED6B00; }

.bannerZone { width: 100%; background: #e0dfde; padding: 30px; margin-top: 140px; }
.bannerZone > div { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0; }
.bannerZone .banner { width: 650px; height: 150px; }
.bannerZone .banner > a { display: block; width: 100%; height: 100%; border: 1px solid #ccc; }
.bannerZone .banner > a > img { width: 100%; height: 100%;  }

#popUp { display: block; position: fixed; z-index: 100000; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.7); overflow: auto; }
#popUpwin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.popUpCloseBox { color: #FFF; position: absolute; bottom: 0px; right: 0; display: flex; align-items: center; background: rgba(0, 0, 0, 0.8); padding: 2px 10px; }
.todayNoShow { display: flex; align-items: center; padding-left: 0; }
.todayNoShow > .form-check-input { margin-right: 4px; margin-top: 0; cursor: pointer !important; float: none; margin-left: 0; border: 1px solid #FFF; background: transparent; }
.todayNoShow > .form-check-label { cursor: pointer !important;}
.popUpClose { display: block; color: #FFF; border: 1px solid #FFF; width: 20px; height: 20px; background: transparent; font-size: 14px; line-height: 10px; margin-left: 16px; }
#popUpSlider { position: relative;  height: 100%; width: 100%; }
.popUpSlide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; min-width: 186px; min-height: 34px; }
.popUpSlide:first-of-type { display: block; }
.popUpSlide .popUpCont > a { display: flex; }
.popUpSlide .popUpTxt { background: #FFF; color: #333; padding: 40px; min-width: 500px; width: auto; padding-bottom: 60px; }
.popUpSlide img { width: auto; max-width: 1000px; }



/* ===== SUB PAGE ===== */
.subpageBg { height:160px; margin-bottom: 160px; }
.subpageBg::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.64); top: 0; left: 0; }
.subpageBg img { position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.subpageBg p { font-size:34px; text-align:center; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; }


/* === 주요임무 === */
.missionIntroBox { width: 60%; }
.missionIntroBox .missionIntroTxt > p:first-of-type { color: #ED6B00; font-size: 32px; line-height: 48px; font-weight: 800; margin-bottom: 40px;}
.missionIntroBox .missionIntroTxt > p:last-of-type { font-size: 20px; line-height: 34px;}

.missionBox { border-top: 1px solid #ccc; width: 80%; padding: 0; }
.missionBox > li { border-bottom: 1px solid #ccc; padding: 40px 10px; display: flex; align-items: center; }
.missionBox > li > div { color: #ED6B00; flex: 0 0 50%; display: flex; align-items: center; letter-spacing: -0.04em; }
.missionBox > li > div > p:first-of-type { font-size: 60px; line-height: 60px; font-weight: 400; margin-right: 20px; }
.missionBox > li > div > p:last-of-type { font-weight: 800; font-size: 30px; line-height: 40px; }
.missionBox > li > ul { flex: 0 0 50%; list-style-type: "\2d"; }
.missionBox > li > ul > li { margin-left: 4px; padding-left: 6px; font-size: 16px; line-height: 32px; font-weight: 700; letter-spacing: -0.04em; }

.roleBox { width: 80%; }
.roleBox > li { margin-bottom: 40px; display: flex; align-items: center; }
.roleBox > li:last-of-type { margin-bottom: 0px; }
.roleBox > li > div { flex: 0 0 380px; margin-right: 107px; position: relative; height: 140px; text-align: center; border: 2px solid #ED6B00; border-radius: 80px; font-weight: 800; font-size: 24px; line-height: 38px; color: #ED6B00; display: flex; align-items: center; justify-content: center; }
.roleBox > li > div::before { position: absolute; content: ""; width: 14px; height: 14px; border-radius: 7px; background: #ED6B00; right: 0; top: 50%; transform: translate(50%, -50%); }
.roleBox > li > div::after { position: absolute; content: ""; height: 2px; width: 100px; background: #ED6B00; right: -107px; }
.roleBox > li > ul { flex: 0 0 calc(100% - (380px + 107px)); position: relative; padding: 0 100px; list-style-type: "\2d"; }
.roleBox > li > ul > li { margin-left: 4px; padding-left: 6px; font-size: 16px; line-height: 32px; font-weight: 700; }
.roleBox > li > ul::before { position: absolute; content: ""; width: 16px; height: 140px; top: 50%; left: -2px; transform: translate(0, -70px); border-radius: 16px 0 0 16px; border: 2px solid #ED6B00; border-right: 0; }
.roleBox > li > ul::after { position: absolute; content: ""; width: 16px; height: 140px; top: 50%; right: -2px; transform: translate(0, -70px); border-radius: 0 16px 16px 0; border: 2px solid #ED6B00; border-left: 0; }


/* === 협회연혁 === */
.historyList > li { padding: 0 10px; margin-bottom: 20px; }
.historyYear { font-size: 32px; font-weight: 800; border-top: 4px solid #ED6B00; color: #ED6B00; padding: 10px 0 0; }
.historyTxt > li { font-size: 16px; margin-bottom: 34px; border-top: 2px solid #ccc;  padding: 20px 0 0; }
.historyTxt > li > .historyMonth { font-size: 24px; font-weight: 800; width: 70px; color: #707070; }
.historyTxt > li > .historyCont {  width: calc(100% - 70px); }
.historyTxt > li > .historyCont > p { margin-bottom: 16px; }
.historyList > li:last-of-type > .historyTxt > li:last-of-type { margin-bottom: 0; }


/* === 조직과구성 === */
.orgChartBox { height: auto; margin-bottom: 100px; }
.orgChartBox div { display: flex; justify-content: center; align-items: center; z-index: 10; }
.orgChartBox ul { width: 100%; }
.orgChartBox .orgLevel1 > div { color: #fff; background-color: #ED6B00; width: 200px; height: 60px; font-size: 22px; font-weight: 800; position: absolute; left: 50%; transform: translate(-50%, 0); }
.orgLevel1 > ul { width: 100%;  padding-top: 120px; }
.orgLevel1 > div::before { content: ""; position: absolute; height: 60px; width: 2px; background-color: #333; top: 60px; left: 50%; transform: translate(-50%, 0); }
.orgLevel1 .orgLevel2::before { content: ""; position: absolute; height: 2px; width: calc(100% - 600px); background-color: #333; top: 150px; left: 50%; transform: translate(-50%, 0); z-index: 1; }
.orgLevel2 > ul { position: relative; padding-top: 240px; }
.orgChartBox .orgLevel1 .orgLevel2 > div { color: #ED6B00; background: #FFF; border: 2px solid #ED6B00; width: 200px; height: 60px; text-align: center; font-size: 20px; font-weight: 800; position: absolute; }
.orgChartBox .orgLevel1 .orgLevel2:nth-of-type(1) > div { left: 200px; }
.orgChartBox .orgLevel1 .orgLevel2:nth-of-type(2) > div { right: 200px; }
.orgChartBox .orgLevel1 .orgLevel2:nth-of-type(3) > div { left: 50%; transform: translate(-50%, 0); }
.orgLevel3 > ul { padding-top: 120px; padding-bottom: 60px; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 > div { color: #FFF; background-color: #fff; background: #847f7a; width: 200px; height: 60px; text-align: center; font-size: 16px; font-weight: 800; letter-spacing: -0.06em; position: absolute; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:nth-of-type(1) > div { top: 120px; left: 200px; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3::after { content: ""; position: absolute; height: 2px; width: calc((100% - 600px) / 2); background-color: #333; right: 50%; top: 150px; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:nth-of-type(2) > div::before { content: ""; position: absolute; height: 180px; width: 2px; background-color: #333; bottom: 60px; left: 50%; transform: translate(-50%, 0); }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:nth-of-type(2) > div::after { content: ""; position: absolute; height: 30px; width: 2px; background-color: #333; top: 60px; left: 50%; transform: translate(-50%, 0); }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:nth-of-type(2) > div { top: 240px; left: 50%; transform: translate(-50%, 0); }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel4::before { content: ""; position: absolute; height: 2px; width: calc(100% - 600px); background-color: #333; top: 330px; left: 50%; transform: translate(-50%, 0); z-index: 1; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4 > div { color: #847f7a; border: 2px solid #847f7a; width: 200px; height: 60px; text-align: center; font-size: 18px; font-weight: 800; position: absolute; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4 > div::before { content: ""; position: absolute; height: 30px; width: 2px; background-color: #333; bottom: 57px; left: 50%; transform: translate(-50%, 0); }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4:nth-of-type(1) > div { left: 200px; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4:nth-of-type(2) > div { right: 200px; }

.organizationTable > thead > tr > th:nth-of-type(1), .organizationTable > tbody > tr > td:nth-of-type(1) { width: 10%; }
.organizationTable > thead > tr > th:nth-of-type(2), .organizationTable > tbody > tr > td:nth-of-type(2) { width: 10%; }
.organizationTable > thead > tr > th:nth-of-type(3), .organizationTable > tbody > tr > td:nth-of-type(3) { width: 20%; }
.organizationTable > thead > tr > th:nth-of-type(4), .organizationTable > tbody > tr > td:nth-of-type(4) { width: 60%; }
.organizationTable > tbody > tr > td:nth-of-type(4) { text-align: left; }


/* === 찾아오시는길 === */
.mapPage > .mapBox { width: 100%; height: 500px; background-color: #ccc; margin-bottom: 60px; }
.subTitle1 { position: relative; font-weight: 800; font-size: 24px; padding-left: 14px; margin-bottom: 40px; }
.subTitle1::before { position: absolute; content: ""; width: 4px; height: 28px; background-color: #ED6B00; left: 0; top: 0;}
.mapPage .subTitle1 { margin-bottom: 8px; }
.mapPage .subTitle1 span { display: inline-block; margin-left: 4px; font-size: 16px; }
.mapPage .col .mapTxt { margin-left: 15px; font-size: 16px; }
.mapPage .col .mapTxt > li > span { font-weight: 800; }
.mapPage .col .mapNaviTxt > li { list-style-type: square; margin-left: 20px; margin-bottom: 10px;; }
.mapPage .col .mapNaviTxt > li > ul > li{ list-style-type: "\2d"; margin-left: 6px; padding-left: 8px; }


/* === 회원사가입 === */
.joinIntroImg { position: relative; background: url("../img/bg_join.jpg") no-repeat center center / cover; height: 200px; border-radius: 10px; }
.joinIntroImg::before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.67); top: 0; left: 0; border-radius: 10px; }
.joinIntroImg::after { position: absolute; content: ""; width: calc(100% - 30px); height: calc(100% - 30px); border: 1px solid #FFF; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; }
.joinIntroImg > p { position: absolute; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 20px; line-height: 40px; font-weight: 700; color: #FFF; width: 100%; }
.joinIntroTxt { margin: 100px auto 0; font-size: 18px; line-height: 32px; width: 80%; }
.joinIntroTxt .subTitle1 { margin-bottom: 10px; }
.joinIntroTxt > .border { border-radius: 8px; padding: 60px 80px; border: 1px solid #ED6B00 !important; background: #fffcf8; color: #454545; margin: 50px auto; }
.joinIntroTxt > .border > p { font-weight: 800; text-align: center; font-size: 20px; margin-bottom: 40px; }
.joinIntroTxt > .border > p > span.d-none-576 { display: inline; }
.joinIntroTxt > .border > ul > p { font-weight: 700; margin-bottom: 20px;}
.joinIntroTxt > .border > ul > li { list-style: decimal; margin-left: 20px; margin-bottom: 16px;}
.joinIntroTxt > .border > ul > li > p:first-of-type { font-weight: 700; }
.joinIntroTxt .datajoin { margin-bottom: 80px; }
.joinIntroTxt .datajoin li { margin-bottom: 14px; list-style: circle; margin-left: 20px; }
.joinIntroTxt .datajoin li > p:first-of-type { font-weight: 700; }
.joinIntroTxt > p { padding-top: 80px; text-align: center; position: relative; }
.joinIntroTxt > p > span { color: #ED6B00; font-weight: 700; }
.joinIntroTxt > p::before { content: ""; position: absolute; width: 50%; height: 2px; border-radius: 1px; background-color: #ED6B00; left: 50%; top: 0; transform: translate(-50%);}

.btnOrangeBox { margin-top: 60px; text-align: center; }
.btnOrangeBox .d-flex { justify-content: space-between; }
.btnOrangeBox button { width: 300px; margin: 0 30px; }
.btnOrange { background-color: #ED6B00; color: #fff; border: 0; height: 50px; border-radius: 4px; font-weight: 700; font-size: 16px; }
.btnOrange > a { display: block; color: #fff; }
.btnOrange:hover { background-color: #dc5c00; }


/* === 게시판 및 테이블 === */
/* = 서치바 = */
.searchBar { width: 100%; margin-bottom: 30px; }
.searchBar > .searchInputGroup { float: right; }
.searchBar .form-control { border-radius: .375rem !important; padding-right: 40px !important;}
.searchBar > .searchInputGroup > ul > li { display: inline-block; }
.searchBar .input-group { width: 300px; }
.btnSearch { height: 100%; background-color: transparent; border: 0; color:#ced4da ; width: 40px; border-radius: 0 6px 6px 0; position: absolute; right: 0; z-index: 100;}
.btnSearch:hover { border: 0; color:#ED6B00; }
.form-control:focus, .form-select:focus { border-color: #9a9a9a; }

/* = 페이지네이션 = */
#paginationBar { position: relative; margin-top: 40px; }
#paginationBar .page-link { border: 0; }
#paginationBar .page-link:hover { background-color: transparent; }
.active>.page-link, .page-link.active { background-color: transparent; font-weight: 800; color: #ED6B00 !important; }
#paginationBar .page-link:focus { background-color: transparent; }
#paginationBar .page-arrow { font-size: 20px; color: #ED6B00 }
#paginationBar a { color: #333; line-height: 28px; }

/* = 테이블 = */
.tableBasic { table-layout: fixed; margin-bottom: 0px; border-top: 4px solid #ED6B00; }
.tableBasic thead { font-weight: 800; background-color: #f0f1f2; border-bottom: 2px solid #333; }
.tableBasic tbody tr { border-bottom: 1px solid #ccc; }
.tableBasic th, .tableBasic td { height: 54px; padding: 6px 14px !important; text-align: center; border-right: 1px solid #ccc; vertical-align: middle; line-height: 1.2rem; }
.tableBasic > thead > tr > th:last-of-type, .tableBasic > tbody > tr > td:last-of-type { border-right: none; }
.tableBasic a { color: #333; display: block; line-height: 1.2rem; }
.tableBasic a:hover { font-weight: 700; }
.tableBasic a span { font-size: 18px; color: #ED6B00; }
.tableBasic tbody tr .tableTitleCont { text-align: left; }
.tableBasic tbody tr .tableTitleCont a { color: #333; display: block; padding-left: 10px; max-width: 95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all; }
.tableBasic tbody tr:last-of-type { border-bottom: 2px solid #333; }
.tableBasic .noFound { text-align: center; font-weight: 800; font-size: 20px; padding: 40px 0 !important; }


/* === 회원사현황 === */
.tableMemberList > thead > tr > th:nth-of-type(1), .tableMemberList > tbody > tr > td:nth-of-type(1) { width: 5%; }
.tableMemberList > thead > tr > th:nth-of-type(2), .tableMemberList > tbody > tr > td:nth-of-type(2) { width: 16%; }
.tableMemberList > thead > tr > th:nth-of-type(3), .tableMemberList > tbody > tr > td:nth-of-type(3) { width: 16%; }
.tableMemberList > thead > tr > th:nth-of-type(4), .tableMemberList > tbody > tr > td:nth-of-type(4) { width: 48%; }
.tableMemberList > tbody > tr > td:nth-of-type(4) { text-align: left; }
.tableMemberList > thead > tr > th:nth-of-type(5), .tableMemberList > tbody > tr > td:nth-of-type(5) { width: 12%; }
.tableMemberList > thead > tr > th:nth-of-type(6), .tableMemberList > tbody > tr > td:nth-of-type(6) { width: 8%; }


/* === 게시판 === */
.tableNormal > thead > tr > th:nth-of-type(1), .tableNormal > tbody > tr > td:nth-of-type(1) { width: 6%; }
.tableNormal > thead > tr > th:nth-of-type(2), .tableNormal > tbody > tr > td:nth-of-type(2) { width: 78%; }
.tableNormal > thead > tr > th:nth-of-type(3), .tableNormal > tbody > tr > td:nth-of-type(3) { width: 10%; }
.tableNormal > thead > tr > th:nth-of-type(4), .tableNormal > tbody > tr > td:nth-of-type(4) { width: 6%; }


/* === 게시판 상세페이지 === */
.noticeViewTable thead { border-top: 4px solid #ED6B00; border-bottom: 1px solid #ccc; min-height: 52px; line-height: 52px;}
.noticeViewTable tbody tr { border-bottom: 1px solid #ccc; font-size: 16px; }
.noticeViewTable tbody tr:first-of-type, .noticeViewTable .attachedFileList, .noticeViewTable tbody .noticeViewContent, .noticeViewTable tbody tr:last-of-type { border-bottom: 2px solid #333; }
.noticeViewTable tbody a { color: #333; }
.noticeViewTable tbody a:hover { font-weight: 700; }
.noticeViewContent > td { padding-top: 50px !important; padding-bottom: 50px !important; }
.noticeViewContent pre { white-space: pre-wrap; }
.noticeViewContent > td > img { width: 100%;; }
.noticeViewContList { display: inline-block; font-weight: 800; width: 100px; }
/* .attachedFileList > li { line-height: 1.2rem; } */
.attachedFileList > td > p { font-weight: 800; margin-right: 10px; display: inline-block; vertical-align: top; }
.attachedFileList > td > ul { display: inline-block; vertical-align: top; }
.attachedFileList > td > ul > li > a { line-height: 1.2rem; display: inline-block; }
.list-bottom button { border: none; height: 40px; font-weight: 800; background-color: #ED6B00; width: 100px; border-radius: 0; border-radius: 4px; }
.list-bottom button:hover, .list-bottom button:focus { background-color: #ED6B00; border-color: #ED6B00; }
.list-bottom button#btnBack { color: #FFF; }


/* === Footer === */
footer { background-color: #333; padding: 50px 0; color: #999; }
footer img { height: 60px; opacity: 0.6; }
#footerAddress > li { margin: 0 12px; display: inline-block; }
#footerAddress > li:first-of-type { margin-left: 0px; }
#footerAddress > li:last-of-type { margin-right: 0px; }
#footerAddress > li::after { content: ""; display: inline-block; width: 1px; height: 10px; background-color: #999; line-height: 60px; transform: translateX(14px); }
#footerAddress > li:last-of-type::after { content: none; }
footer a { color: #999 !important; display: inline !important; }
footer span {  display: none; }















.d-block-1400, .d-block-1200, .d-block-1025, .d-block-992, .d-block-768, .d-block-576 { display: none; }
.d-none-1400, .d-none-1200, .d-none-1025, .d-none-992, .d-none-768, .d-none-576 { display: block; }

@media all and (max-width: 1400px) {
  .d-block-1400 { display: block !important; }
  .subTitle { margin-top: 140px; }

  /* 메인페이지 */
  .mv { height: 400px; }
  .mainImgBox > .mainTxt > p:nth-of-type(1) { font-size: 26px; line-height: 26px; margin-bottom: 16px; }
  .mainImgBox > .mainTxt > p:nth-of-type(2) { font-size: 50px; line-height: 50px; margin-bottom: 16px; }
  .mainImgBox > .mainTxt > p:nth-of-type(3) { font-size: 20px; line-height: 20px; }

  .indexIntroBox .indexIntroTxt { margin-top: 80px; margin-right: 40px; }
  .indexIntroBox .indexIntroTxt > p:first-of-type { font-size: 28px; line-height: 40px;}
  .indexIntroBox .indexIntroTxt > p:last-of-type { font-size: 18px;line-height: 30px;}
  .indexIntroBox .indexIntroImg { height: 280px; width: 400px; }

  .bannerZone .banner { height: 130px; }

  .missionBox > li > div > p:first-of-type { font-size: 50px; line-height: 50px; }
  .missionBox > li > div > p:last-of-type { font-size: 26px; line-height: 36px; }
  .missionBox > li > ul > li { font-weight: 400;  }
  .roleBox > li { height: 140px; }
  .roleBox > li > div {  flex: 0 0 320px; font-size: 22px; line-height: 32px; height: 120px; }
  .roleBox > li > ul { padding: 0 60px; flex: 0 0 calc(100% - (320px + 107px)) }
  .roleBox > li > ul > li { font-weight: 400; }

}


@media all and (max-width: 1200px) {
  .d-none-1200 { display: none !important; }
  .d-block-1200 { display: block !important; }
  
  .bannerZone .banner { height: 108px; }
  
  .indexIntroBox > div { width: 90%; margin: 0 auto; }
  .missionIntroBox { width: 80%; }
  .roleBox > li { margin-bottom: 70px; }
  .roleBox > li > ul { padding: 0 80px; }
  .roleBox > li { flex-direction: column; height: auto; }
  .roleBox > li > div { flex: none; width: 520px; height: 60px; margin-right: 0; margin-bottom: 20px; }
  .roleBox > li > div::before { position: absolute; content: ""; height: 2px; width: 50px; background: #ED6B00; left: -50px; transform: translate(0, -50%); }
  .roleBox > li > div::after { position: absolute; content: ""; height: 2px; width: 50px; background: #ED6B00; right: -50px; }
  .roleBox > li > ul { padding: 0; text-align: center; list-style: none; }
  .roleBox > li > ul::before, .roleBox > li > ul::after { content: none; }

  .joinIntroTxt { width: 90%; }

  .orgChartBox .orgLevel1 .orgLevel2:nth-of-type(1) > div { left: 100px; }
  .orgChartBox .orgLevel1 .orgLevel2:nth-of-type(2) > div { right: 100px; }
  .orgLevel1 .orgLevel2::before { width: calc(100% - 400px); }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:nth-of-type(1) > div { left: 100px; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3::after { width: calc((100% - 400px) / 2);  }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel4::before { width: calc(100% - 400px); }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4:nth-of-type(1) > div { left: 100px; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4:nth-of-type(2) > div { right: 100px; }

  .tableMemberList { width: 960px !important; }
  .tableScrollXMember { width: 100%; overflow-x: auto; }
  .tableMemberList > thead > tr > th:nth-of-type(1), .tableMemberList > tbody > tr > td:nth-of-type(1) { width: 6%; }
  .tableMemberList > thead > tr > th:nth-of-type(2), .tableMemberList > tbody > tr > td:nth-of-type(2) { width: 18%; }
  .tableMemberList > thead > tr > th:nth-of-type(3), .tableMemberList > tbody > tr > td:nth-of-type(3) { width: 17%; }
  .tableMemberList > thead > tr > th:nth-of-type(4), .tableMemberList > tbody > tr > td:nth-of-type(4) { width: 35%; }
  .tableMemberList > thead > tr > th:nth-of-type(5), .tableMemberList > tbody > tr > td:nth-of-type(5) { width: 14%; }
  .tableMemberList > thead > tr > th:nth-of-type(6), .tableMemberList > tbody > tr > td:nth-of-type(6) { width: 9%; }

  .tableNormal > thead > tr > th:nth-of-type(1), .tableNormal > tbody > tr > td:nth-of-type(1) { width: 6%; }
  .tableNormal > thead > tr > th:nth-of-type(2), .tableNormal > tbody > tr > td:nth-of-type(2) { width: 72%; }
  .tableNormal > thead > tr > th:nth-of-type(3), .tableNormal > tbody > tr > td:nth-of-type(3) { width: 12%; }
  .tableNormal > thead > tr > th:nth-of-type(4), .tableNormal > tbody > tr > td:nth-of-type(4) { width: 10%; }
    
}

@media all and (max-width: 1025px) {
  .d-block-1025 { display: block !important; }
  .d-none-1025 { display: none !important; }
  
  header, .headerLogo { height: 60px; }
  .headerLogo > a { height: 48px; }
  header > .container { align-items: center; }
  
  h1 { margin-top: 16px; }
  #htopLeft { margin-top: 20px; }
  #lnb, #gnb { display: none; }
  #ham, #leftMenuham { display: block; }
  
  section { margin-top: 60px; }
  
  .bannerZone { padding: 30px 0; }
  
  footer { text-align: center; }
  footer span { display: inline !important; }
  #footerAddress { margin-top: 20px; }
  #footerAddress > li { margin: 0; display: block; }
  #footerAddress > li::after { content: none; }
  
}


@media all and (max-width: 992px) {
  .d-block-992 { display: block !important; }
  .d-none-992 { display: none !important; }
  
  .mainImg > img { height: 110%; width: auto; }

  .indexIntroBox > div { flex-direction: column-reverse; align-items: flex-end; }
  .indexIntroBox .indexIntroTxt { margin-right: 0; width: 100%; }
  .indexNoticeBox > div:nth-of-type(3) { margin-bottom: 20px; }
  .indexNoticeBox > div:nth-of-type(odd) { padding-right: 0; }
  .indexNoticeBox > div:nth-of-type(even) { padding-left: 0; }
  
  .bannerZone .banner { height: 166px; }

  .missionIntroBox { width: 100%; }
  .missionBox { width: 100%; }
  .missionBox > li { flex-direction: column; align-items: flex-start; padding: 40px; }
  .missionBox > li > div { align-items: baseline; margin-bottom: 20px; }
  .missionBox > li > ul { margin-left: 80px; }
  .roleBox { width: 100%; }

  .joinIntroTxt { width: 100%; letter-spacing: -0.04em;; }
  .joinIntroTxt > .border { padding: 40px 60px; }
  .btnOrangeBox { width: 100%; display: flex; align-items: center; justify-content: space-evenly; }
  .btnOrangeBox button { margin: 0; }


.orgChartBox .orgLevel1 .orgLevel2:nth-of-type(1) > div { left: 0px; }
.orgChartBox .orgLevel1 .orgLevel2:nth-of-type(2) > div { right: 0px; }
.orgLevel1 .orgLevel2::before { width: calc(100% - 200px); }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:nth-of-type(1) > div { left: 0px; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3::after { width: calc((100% - 200px) / 2);  }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel4::before { width: calc(100% - 200px); }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4:nth-of-type(1) > div { left: 0px; }
.orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4:nth-of-type(2) > div { right: 0px; }

  .mapPage > .mapBox { height: 340px; }

  .tableNormal > thead > tr > th:nth-of-type(1), .tableNormal > tbody > tr > td:nth-of-type(1) { width: 10%; }
  .tableNormal > thead > tr > th:nth-of-type(2), .tableNormal > tbody > tr > td:nth-of-type(2) { width: 64%; }
  .tableNormal > thead > tr > th:nth-of-type(3), .tableNormal > tbody > tr > td:nth-of-type(3) { width: 16%; }
  .tableNormal > thead > tr > th:nth-of-type(4), .tableNormal > tbody > tr > td:nth-of-type(4) { width: 10%; }
    
}


@media all and (max-width: 768px) {
  .d-block-768 { display: block !important; }
  .d-none-768 { display: none !important; }

  .subpageBg { margin-bottom: 100px; height: 120px; }
  .subpageBg p { width: 100%; font-size: 26px; }
  section > .container { padding-bottom: 100px; }

  .indexIntroBox .btn-outline-orange { margin: 0 auto; }
  
  .bannerZone .banner { height: 124px; }

  .missionIntroBox { width: 80%; }
  .missionIntroBox .missionIntroTxt > p:first-of-type { font-size: 26px; line-height: 40px; margin-bottom: 20px; }
  .missionIntroBox .missionIntroTxt > p:last-of-type { font-size: 18px; line-height: 30px; }
  .missionBox { width: 90%; }
  .missionBox > li { padding: 20px 10px; }
  .missionBox > li > div > p:first-of-type { margin-right: 10px; margin-bottom: 6px; font-size: 40px; }
  .missionBox > li > div > p:last-of-type { font-size: 22px; font-weight: 700; line-height: 32px; letter-spacing: -0.04em; }
  .missionBox > li > ul { margin-left: 0; }
  .missionBox > li > ul > li { letter-spacing: -0.08em; margin-bottom: 8px; line-height: 26px; }
  .roleBox > li > div { width: auto; padding: 10px 30px; border: 0; height: auto; margin-bottom: 30px; font-weight: 700; }
  .roleBox > li > div::before { height: 100%; width: 3px; top: 50%; left: 0; transform: translate(0, -50%); }
  .roleBox > li > div::after { height: 100%; width: 3px; top: 50%; right: 0; transform: translate(0, -50%); }
  
  .btnOrangeBox { flex-direction: column;}
  .btnOrangeBox button { margin-bottom: 20px; }
  .btnOrangeBox button:last-of-type { margin-bottom: 0px; }

  .tableScrollXOrganiztion { width: 100%; overflow-x: scroll; }
  .organizationTable { width: 720px; }

  .searchInputGroup { width: 100%; }
  .searchInputGroup > ul { display: flex; width: 100%; }
  .searchInputGroup > ul > li:first-of-type { flex-shrink: 0; width: auto; margin-right: 3px; }
  .searchInputGroup > ul > li:last-of-type { flex-grow: 1; }
  .searchBar .input-group { width: 100% !important; }

  
  .tableScrollXNormal { width: 100%; overflow-x: auto; }
  .tableNormal { width: 540px !important }

  .tableNormal > thead > tr > th:nth-of-type(1), .tableNormal > tbody > tr > td:nth-of-type(1) { width: 14%; }
  .tableNormal > thead > tr > th:nth-of-type(2), .tableNormal > tbody > tr > td:nth-of-type(2) { width: 52%; }
  .tableNormal > thead > tr > th:nth-of-type(3), .tableNormal > tbody > tr > td:nth-of-type(3) { width: 20%; }
  .tableNormal > thead > tr > th:nth-of-type(4), .tableNormal > tbody > tr > td:nth-of-type(4) { width: 14%; }
    
  #paginationBar .tablePostBtn { position: relative; float: right; transform: translateY(-20px); }

  .mapPage .row > div:first-of-type { margin-bottom: 30px; }

  #footerAddress>li:first-of-type::after { content: none; }
}


@media all and (max-width: 576px) {
  .d-block-576 { display: block !important; }
  .d-none-576 { display: none !important; }
  
  .container { padding: 0 10px; }
  
  .subpageBg img { height: 100%; width: auto; }

  .subTitle { margin-top: 100px; margin-bottom: 40px; font-size: 30px; padding-top: 14px; }
  .subTitle::before { height: 4px; width: 50px; }

  .mv { height: 260px; }
  .mainImgBox > .mainTxt { font-size: 20px; padding: 30px; }
  .mainImgBox > .mainTxt > p:nth-of-type(1) { font-size: 20px; line-height: 20px; margin-bottom: 10px; }
  .mainImgBox > .mainTxt > p:nth-of-type(2) { font-size: 44px; line-height: 44px; margin-bottom: 10px; }
  .mainImgBox > .mainTxt > p:nth-of-type(3) { font-size: 16px; }

  .indexIntroBox .indexIntroImg { height: 140px; width: 300px; border-radius: 10px; top: 15px; right: 15px; }
  .indexIntroBox .indexIntroImg::after { top: -15px; right: -15px; border-radius: 10px; }
  .indexIntroBox .indexIntroTxt { margin-top: 60px; }
  .indexIntroBox .indexIntroTxt > p:first-of-type { font-size: 22px; line-height: 34px; margin-bottom: 20px; }
  .indexIntroBox .indexIntroTxt > p:last-of-type { font-size: 16px; }

  .indexJoinBox { margin-top: 100px; height: 360px; }
  .indexJoinBox > div > p { font-size: 16px; line-height: 30px; font-weight: 400; }

  .bannerZone { padding:  14px 0; margin-top: 100px; }
  .bannerZone > div { width: 350px !important; }
  .bannerZone .banner { height: 80px; width: 350px !important; }

  #historyContents { width: 90%; margin: 0 auto; }
  .historyList > li { margin-bottom: 40px; }
  .historyTxt { padding: 0; }
  .historyYear { margin-bottom: 20px; padding-top: 18px; }
  .historyTxt > li { border-top: 0; margin-bottom: 0; padding-bottom: 0px; border-bottom: 1px solid #ccc; }
  .historyTxt > li:last-of-type { border-bottom: 0; }
  .historyTxt > li > .historyCont > div { margin-bottom: 20px; }

  .missionIntroBox { width: 100%; }
  .missionBox { width: 92% }
  .missionBox > li > div { flex-direction: column; }

  .joinIntroImg { border-radius: 6px; }
  .joinIntroImg::before { border-radius: 6px; }
  .joinIntroImg::after {width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 6px; }
  .joinIntroImg > p { font-size: 18px; line-height: 30px; font-weight: 700;  }
  .joinIntroTxt { margin-top: 60px; }
  .joinIntroTxt > .border { margin: 30px auto 50px; padding: 30px 20px; letter-spacing: -0.08em; }
  


  .orgChartBox { text-align: right; }
  .orgChartBox .orgLevel1 > div { width: 100%; height: 50px; font-size: 22px; font-weight: 700; position: relative; left: 0; transform: translate(0, 0); }
  .orgLevel1 > ul { width: 100%;  padding-top: 30px; }
  .orgLevel1 > div::before { content: none; }
  .orgLevel1 > div::after { content: ""; position: absolute; height: 186px; width: 2px; background-color: #333; top: 50px; left: 10px; transform: translate(0, 0); }
  .orgLevel1 .orgLevel2::before { content: none; }
  .orgLevel2 > ul { position: relative; padding-top: 30px; }
  .orgChartBox .orgLevel1 .orgLevel2 > div { width: calc(100% - 20px); height: 50px; font-weight: 700; position: relative; left: 20px !important; right: auto !important; transform: translate(0, 0) !important; margin-bottom: 15px; }
  .orgChartBox .orgLevel1 .orgLevel2 > div::before { content: ""; position: absolute; height: 2px; width: 10px; background: #333; left: -10px; }
  .orgChartBox .orgLevel1 .orgLevel2:last-of-type > div { margin-bottom: 0; }
  .orgChartBox .orgLevel1 .orgLevel2:last-of-type > div::after { content: ""; position: absolute; height: 121px; width: 2px; background: #333; top: 48px; left: 12px; }
  .orgLevel3 > ul { padding-top: 30px; padding-bottom: 0px; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3::before, .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3::after { content: none; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 > div {width: calc(100% - 44px); height: 50px; font-weight: 700; position: relative; top: 0 !important; left: 44px !important; right: auto !important; transform: translate(0, 0) !important; margin-bottom: 15px; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 > div::before, .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:nth-of-type(2) > div::before { content: ""; position: absolute; height: 2px; width: 10px; background-color: #333; top: 24px; left: -10px; transform: translate(0, 0); }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 > div::after { content: none; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:last-of-type > div { margin-bottom: 0; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3:last-of-type > div::after { content: ""; position: absolute; height: 121px; width: 2px; background: #333; top: 48px; left: 8px; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel4::before { content: none; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4 > div { width: calc(100% - 60px); height: 50px; font-weight: 700; position: relative; left: 60px !important; transform: translate(0, 0); margin-bottom: 15px; }
  .orgChartBox .orgLevel1 .orgLevel2 .orgLevel3 .orgLevel4 > div::before { content: ""; position: absolute; height: 2px; width: 10px; background-color: #333; bottom: 24px; left: -10px; transform: translate(0, 0); }

  .mapPage > .mapBox { height: 280px; }

  #footerAddress > li { line-height: 32px; }
  #footerAddress > li:first-of-type { line-height: 22px; margin-bottom: 8px; }
    
}