@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
/********************
// resetcode
********************/
html ,body{overflow-x:hidden;}
html, body, div, 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,textarea,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,input,select,button,
time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 16px; line-height:1.6em;  font-family: 'Pretendard', 'sans-serif'; 
font-weight:400;  vertical-align: baseline; color:#232429; word-break:keep-all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);letter-spacing: 0;}

header{top:0;left:0}

.inner{width:80dvw; margin-left:auto; margin-right:auto;}
.ls0{letter-spacing: 0em;}
.tit{letter-spacing: -0.02em;}
.txt{letter-spacing: -0.05em;}
.wf1{flex:1;}
        
button{border:0}

.longTxt {    white-space: nowrap;          overflow: hidden;     text-overflow: ellipsis;min-width: 0;    width: 100%;}
.long2Txt {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;     overflow: hidden; }
.long3Txt {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 3;     overflow: hidden; }

.TxtLine1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.Txt1 {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: keep-all; }
.Txt2 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: keep-all; }
.wls0 {letter-spacing: 0em;}
.wls2 {letter-spacing: -0.02em;}
.wls20 {letter-spacing: 0.2em;}

.btnStyleNo {border:none;}
/*************** 색상 ***************/
	.co_white{color:#fff;}
    .co_black{color:#000;}

    .co1_0{color: #f1f7fe;}
    .co1_1{color: #e3edfb;}
    .co1_2{color:#c0dbf7;}
    .co1_3{color:#88bff1;}
    .co1_4{color:#499de7;}
    .co1_5{color:#2282d5;}
    .co1_6{color:#125ca5;}
    .co1_7{color:#115193;}
    .co1_8{color:#12467a;}
    .co1_9{color:#153b65;}
    .co1_10{color:#0e2643;}

    .co2_0{color: #f5f7fa;}
    .co2_1{color: #e9eef5;}
    .co2_2{color:#cfdae8;}
    .co2_3{color:#a5bcd4;}
    .co2_4{color:#7498bc;}
    .co2_5{color:#537ba4;}
    .co2_6{color:#406289;}
    .co2_7{color:#395679;}
    .co2_8{color:#2e445e;}
    .co2_9{color:#2b3b4f;}
    .co2_10{color:#1c2635;}

    .coe{color:#EE3131;}

    .cog0{color: #1e293b;}
    .cog1{color: #eeeef0;}
    .cog2{color:#d9dade;}
    .cog3{color:#b8bac1;}
    .cog4{color:#475569;}
    .cog5{color:#737784;}
    .cog6{color:#5d606c;}
    .cog7{color:#4c4e58;}
    .cog8{color:#41424b;}
    .cog9{color:#37383e;}
    .cog10{color:#26272b;}

/*************** 배경 색상 ***************/
	.bco_white{background:#fefefe;}
	.bco_black{background:#222;}

    .bcoe{background-color:#EE3131;}

    .bco1_0{background-color: #f1f7fe;}
    .bco1_1{background-color: #e3edfb;}
    .bco1_2{background-color:#c0dbf7;}
    .bco1_3{background-color:#88bff1;}
    .bco1_4{background-color:#499de7;}
    .bco1_5{background-color:#2282d5;}
    .bco1_6{background-color:#125ca5;}
    .bco1_7{background-color:#115193;}
    .bco1_8{background-color:#12467a;}
    .bco1_9{background-color:#153b65;}
    .bco1_10{background-color:#0e2643;}

    .bco2_0{background-color: #f5f7fa;}
    .bco2_1{background-color: #e9eef5;}
    .bco2_2{background-color:#cfdae8;}
    .bco2_3{background-color:#a5bcd4;}
    .bco2_4{background-color:#7498bc;}
    .bco2_5{background-color:#537ba4;}
    .bco2_6{background-color:#406289;}
    .bco2_7{background-color:#395679;}
    .bco2_8{background-color:#2e445e;}
    .bco2_9{background-color:#2b3b4f;}
    .bco2_10{background-color:#1c2635;}

    .bcog0{background-color: #F7F8F8}
    .bcog1{background-color: #eeeef0}
    .bcog2{background-color:#d9dade}
    .bcog3{background-color:#b8bac1}
    .bcog4{background-color:#91949f}
    .bcog5{background-color:#737784}
    .bcog6{background-color:#5d606c}
    .bcog7{background-color:#4c4e58}
    .bcog8{background-color:#41424b}
    .bcog9{background-color:#37383e}
    .bcog10{background-color:#26272b}


/* Chrome, Safari, Edge, Opera 브라우저용 화살표 제거 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {    -webkit-appearance: none;    margin: 0;}
input[type=number] {    -moz-appearance: textfield;}



/*** 버튼 ***/
.button{transition: 0.2s;}
.button:hover{background-color:#499de7}
.button:disabled{background-color:#EEEEF0; color:#9F9F9F; pointer-events: none;}

/*** 택스트버튼 ***/
.textBtn{border-bottom:1px solid #26272B;}
.textBtn_g{border-bottom:1px solid #91949F}

/** 폼 기본형태 **/
.inputBox input {width:100%; padding:0 16px; background-color: #ffffff; border: 1px solid #B8BAC1; outline: none; box-sizing: border-box; transition: border-color 0.2s ease-in-out;   }
.inputBox input::placeholder { color: #B8BAC1; }
.inputBox input:focus {border:2px solid #2282D5}
.inputBox .errorTxt { color: #EE3131; display: none;  }
.inputBox.error input {border:2px solid #EE3131;}
.inputBox.error input:focus { border-color: #EE3131;}
.inputBox.error .errorIcon {display: block; }
.inputBox.error .errorTxt {display: block; }
.inputBox.error .inputTxt {display: none; }

/** 파일업로드 **/
.fileCustom {border: 1px solid #D9DADE; cursor: pointer; }
.fileBtn { border: 1px solid #dcdcdc; }



/*** 서브배너 ***/
.dropdownItem {    cursor: pointer;    user-select: none;}
.dropdownItem .arrowIcon {    transition: transform 0.3s ease;}
.dropdownItem.isActive .arrowIcon {    transform: rotate(180deg); }
.dropdownMenu {top: 100%; left: 0; z-index: 10; visibility: hidden; opacity: 0; transform: translateY(-15px);  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s; }
.dropdownItem.isActive .dropdownMenu {visibility: visible; opacity: 1; transform: translateY(0);  }
.dropdownMenu li a {transition: background-color 0.2s;}
.dropdownMenu li a:hover {background-color: #f5f6f8;}


 /*************** 125 STUNNING Utility Classes ***************/
.bd_g1 { border: 1px solid #E0E0E0; }
.bd_g2 { border: 1px solid #EEEEF0; }
.bdt_dark { border-top: 2px solid #26272B; }

.bdb_dark { border-bottom: 2px solid #26272B; }
.objCover { object-fit: cover; }
.bco_dark { background-color: #111111; }
.bcog4 { background-color: #A0AEC0; }
.wpt0 { top: 0; }
.wpr0 { right: 0; }
.wpl0 { left: 0; }
.wpb0 { bottom: 0; }
.tpt0 { top: 0; }
.tpr0 { right: 0; }
.tpl0 { left: 0; }
.tpb0 { bottom: 0; }
.twd85 { max-width: 85dvw; }
.twz1000 { z-index: 1000; }
.top16 { top: 16px; }
.right16 { right: 16px; }
.dib { display: inline-block; }
.m0 { margin: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.curp { cursor: pointer; }
.woh { overflow: hidden; }


/*************** Board & Filter Common Setting Classes ***************/
.boardTab a.active { background: #111; color: #fff; }

.catBadge.contest { background: #125ca5; }
.catBadge.general { background: #457b9d; }

.noticeTable { width: 100%; border-collapse: collapse; border-top: 2px solid #26272B; }
.noticeTable th { border-bottom: 1px solid #26272B; background: #f8fafc; color: #1e293b; }
.noticeTable td { border-bottom: 1px solid #E0E0E0; }
.noticeTable tr:hover td { background-color: #f8fafc; }

.branchPill { transition: all 0.2s ease; user-select: none; }
.branchPill:hover { background-color: #e9ecef; color: #111; }
.branchPill.active { background-color: #232429; color: #fff; font-weight: 700; border-color: #232429; }

.newsLinkBtn:hover { background-color: #115193; color: #ffffff; }

/* FAQ / Civil Complaints Setting Classes */
.faqTab a.active { background: #125ca5; color: #fff; }

/* Media & Video Card Setting Classes */
.intlGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.intlCard { border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; text-decoration: none; color: inherit; }
.intlCard:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.intlContent { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.faqHeader:hover { background: #f8fafc; }
.faqHeader .arrow { transition: transform 0.25s ease; }
.faqItem.open .faqHeader .arrow { transform: rotate(180deg); }
.faqBody { display: none; }
.faqItem.open .faqBody { display: block; }

.statusBadge.done { background: #16a34a; }
.statusBadge.wait { background: #ea580c; }

/* Media Gallery Setting Classes */
.mediaTab a.active { background: #111; color: #fff; }
.mediaGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mediaCard { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; background: #fff; transition: transform 0.25s ease, box-shadow 0.25s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.mediaCard:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.mediaThumbWrap img { transition: transform 0.3s ease; }
.mediaCard:hover .mediaThumbWrap img { transform: scale(1.05); }
.catTag { backdrop-filter: blur(4px); top:12px; left:12px; }
.catTag.video { background: rgba(230, 57, 70, 0.9); }
.catTag.photo { background: rgba(69, 123, 157, 0.9); }
.playIcon { transform: translate(-50%, -50%); background: rgba(0,0,0,0.6); }

/* YouTube TV Setting Classes */
.ytGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ytCard { border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; text-decoration: none; color: inherit; }
.ytCard:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.ytPlayIcon { transform: translate(-50%, -50%); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

.mediaVideoContainer,
.videoContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

@supports not (aspect-ratio: 16 / 9) {
  .mediaVideoContainer,
  .videoContainer {
    height: 0;
    padding-bottom: 56.25%;
  }
}

.mediaVideoContainer iframe,
.videoContainer iframe,
.youtubeView iframe,
.mediaView iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}