@charset "UTF-8"; 
#wrap { padding-top:13.2rem; } 
@media (max-width:1024px){
#wrap { padding-top:12.5rem; }
} 
 
/* 서브 헤더 */
.header .header-logo a img { transform: translateY(-50%); }
.header .header-container.bottom { background: #fff; }
.header .header-container .layout .header-menu>ul>li>a>span { color:#222; }
.header.on .header-container .layout .header-menu>ul>li>a>span,
body.scroll .header .header-container .layout .header-menu>ul>li>a>span
{ color:#222; }
.header.on .header-container.bottom { background: #fff; }
.header .header-container .layout .header-util .header-sitemap button i { color:#222; }
.header-popup { display: none; }

/* 서브 퀵 메뉴 */
.quickmenu .quickmenu-btn { background: #1877CF; } 

/* 서브 비주얼 */
.sub-visual { height: 30rem;background: #ddd; padding:10.6rem 0;position: relative;  }
.sub-visual:before { content:"";display: block;width:100%;height: 100%;position: absolute;top:0;left:0; }
.sub-visual .layout .sub-visual-container { display: flex; flex-direction: column;gap:1.6rem; }
.sub-visual .layout .sub-visual-container h2 { font-size:4.4rem;line-height: 5.28rem;letter-spacing: -2%;color:#fff;font-weight: 700; }
.sub-visual .layout .sub-visual-container .sub-location { display: flex;gap:2rem; align-items: center; }
.sub-visual .layout .sub-visual-container .sub-location li { position: relative; }
.sub-visual .layout .sub-visual-container .sub-location li a span { color:#fff; font-size:1.6rem; font-weight: 400; line-height: 1; }
.sub-visual .layout .sub-visual-container .sub-location li a i { color:#fff;font-size:1.6rem;line-height: 1; }
.sub-visual .layout .sub-visual-container .sub-location li:before { content:"\ea6d";position: absolute;top:50%;left:-1.5rem;transform: translateY(-50%);font-size:1rem;font-family: "remixicon";color:#fff;opacity: .7; }
.sub-visual .layout .sub-visual-container .sub-location li:first-of-type:before { display: none; }
@media (max-width:640px){
.sub-visual .layout .sub-visual-container .sub-location li { display: none; }
.sub-visual .layout .sub-visual-container .sub-location li:first-of-type { display: block; }
.sub-visual .layout .sub-visual-container .sub-location li:last-of-type { display: block; }   
}
 
/* 서브 비주얼 배경 */
#visual1:before { background: url(../images/sub/sub-visual-img01.jpg) no-repeat center center/cover; }
#visual2:before { background: url(../images/sub/sub-visual-img02.jpg) no-repeat center center/cover; }  
#visual3:before { background: url(../images/sub/sub-visual-img03.jpg) no-repeat center center/cover; }  
#visual4:before { background: url(../images/sub/sub-visual-img04.jpg) no-repeat center center/cover; }
#visual5:before { background: url(../images/sub/sub-visual-img05.jpg) no-repeat center center/cover; }  
#visual6:before { background: url(../images/sub/sub-visual-img06.jpg) no-repeat center center/cover; }      
#visual7:before { background: url(../images/sub/sub-visual-img07.jpg) no-repeat center center/cover; }      
     
/* 서브 전체 영역 */
#sub { padding:4rem 0 10rem 0; }
#sub .layout { display: flex; gap:0 8rem; min-height: 80rem; }

/* 서브 좌측 메뉴 */
#lnb { width:28rem;position: sticky;top:18rem;flex-shrink: 0; align-self: flex-start; }
#lnb ul li a { position: relative;display: block; }
#lnb>ul { display: flex;flex-direction: column;gap:.8rem; }
#lnb>ul ul { display: none; }
#lnb>ul>li>a { display: block;padding:2.15rem 1.6rem; border:1px solid #D9D9D9;border-radius: .8rem; }
#lnb>ul>li>a.is { padding:2.15rem 3.2rem 2.15rem 1.6rem; }
#lnb>ul>li>a.is:before { content:"\ea12";display: block; font-family: "remixicon"; position: absolute; top:50%; transform:translateY(-50%); right: 1.6rem ; color:#444; } 
#lnb>ul>li>a.on { background: linear-gradient(90deg, #1877CF 0%, #00A78B 100%);border:0;}
#lnb>ul>li>a.is.on:before { content:"\f1ae";color:#fff; }
#lnb>ul>li>a.on>span { color:#fff; }
#lnb>ul>li>a>span { font-size:1.8rem;color:#444;font-weight: 500; }
#lnb>ul>li>ul { padding:1.2rem 2.4rem;background: #EDF5FC; margin-top:.8rem; border-radius: .8rem; }
#lnb>ul>li>ul>li { border-top:1px dashed #d9d9d9; }
#lnb>ul>li>ul>li:first-of-type { border-top:0; }
#lnb>ul>li>ul>li>a { padding:1.2rem 1rem; }
#lnb>ul>li>ul>li>a>span { color:#444;font-weight: 400;letter-spacing: -2%;font-size:1.7rem; }
#lnb>ul>li>ul>li>a.on:before { content:"";display: block;width:.4rem;height: .4rem;border-radius: 50%;position: absolute;top:2rem; left:0; background: #003C73; }     
#lnb>ul>li>ul>li>a.on>span { color:#003C73; font-weight: 500;} 
#lnb>ul>li>ul>li>ul { padding:0 1.2rem; padding-bottom:1rem; } 
#lnb>ul>li>ul>li>ul>li>a { padding-left:1rem; }
#lnb>ul>li>ul>li>ul>li>a>span { color:#424242; }
#lnb>ul>li>ul>li>ul>li>a.on>span { text-decoration: underline;text-underline-offset: 3px; }
#lnb>ul>li>ul>li>ul>li>a:before { width:4px;height: 2px;position: absolute;top:1rem;left:0;content:"";background: #949494; }
@media (max-width:1024px){
#lnb { display: none; }
}  

/* 컨텐츠 전체 영역 */
#content { flex:1; display: flex; flex-direction: column; }
#lnb+#content { width:calc(100% - 28rem - 8rem); }

/* 서브 컨텐츠 타이틀 */
.content-title { padding:2.4rem 0 4rem 0;display: flex;justify-content: space-between;width:100%;gap:1rem; }
.content-title h3 { font-size: 3.6rem;line-height: 4.32rem;letter-spacing: -2%;font-weight: 700;color:#222; }
.content-title-util { display: flex; gap:3.3rem; align-self: self-start; margin-top:.85rem; } 
.content-title-util li { position: relative; }
.content-title-util li:before { content:"";display: block;height: 1.3rem;width:1px;background: #d9d9d9; position: absolute; top:50%; left:-1.6rem; transform: translateY(-50%); }
.content-title-util li:first-of-type:before { display: none; }
.content-title-util li a i { font-size:2rem;color:#444; }
@media (max-width:640px){
.content-title-util li:first-of-type { display:none; }
.content-title-util li:before { display:none; }
} 

/* 서브 탭 영역 */ 
.content-tab { margin-bottom:4rem;overflow-x: auto; }
.content-tab::-webkit-scrollbar { width: 5px; height: 5px;}
.content-tab::-webkit-scrollbar-thumb { background-color: #003C73;}
.content-tab::-webkit-scrollbar-track { background-color: #eee; }
.content-tab ul { display:flex;gap:.8rem; }
.content-tab ul li { width:100%; }   
.content-tab ul li a { display: flex;padding:0 1rem; background: #F8F8F8;border-radius: 6.4rem;height: 6rem; align-items: center; justify-content: center; }
.content-tab ul li a span { color:#757575; font-size: 1.8rem;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.036rem;text-align: center; }
.content-tab ul li a.on { background: #1877CF; }
.content-tab ul li a.on span { color:#fff;font-weight: 700; }
.content-tab ul li.active a { background: #1877CF;color:#fff;font-weight: 700; }    
@media (max-width:640px){
.content-tab ul li { width:auto;flex-shrink: 0; }         
.content-tab ul li a { padding:0 2.4rem; } 
}

/* 서브 컨텐츠 영역 */
.content-area .content-title01 { font-size:2.6rem;line-height: 150%;letter-spacing: -0.052rem;font-weight: 700;color:#222; padding-top:1rem; position: relative; margin:6.4rem 0 2.4rem 0; }
.content-area .content-title01[data-type=first] { margin-top:0; }
.content-area .content-title01:before { content:"";display: block;position: absolute;top:0;left:0; width:3.2rem; height: .8rem; background: url(../images/sub/content-title-h4-before.svg) no-repeat center center/cover; }
.content-area p { font-size:1.8rem;line-height: 2.7rem;font-weight: 400; } 
.content-area .content-title01 + .content-title02 { margin-top:2.4rem; }
.content-area .content-title02 { font-size:2.3rem;line-height: 150%;letter-spacing: -0.046rem;font-weight: 700;color:#222;margin:4.8rem 0 1.6rem 0; }    
.content-area .content-title02 span { color:#1877CF;font-size: 2.3rem;font-weight: 400;
line-height: 150%;letter-spacing: -0.046rem; }
.content-area .content-title03 { font-size:2rem;line-height: 140%;letter-spacing: -0.036rem;font-weight: 500;color:#333;margin:3.4rem 0 1.2rem 0; }    
.content-area .content-title03 .point1 { color:#c00; }
.content-area .content-title02.type02 { display: flex;align-items: center;gap:1rem; }      
@media (max-width:640px){
.content-area .content-title02 span { display:block; } 
}

/* 서브 만족도 조사 */
.content-satisfaction { padding:4rem; background: #F8F8F8; border:1px solid #D9D9D9;border-radius: .8rem; position: relative; }
.content-satisfaction .content-satisfaction-title { font-size:1.8rem;font-weight: 400;line-height: 2.7rem; color:#222; }
.content-satisfaction .content-satisfaction-select { flex-wrap: wrap; display: flex; gap:1rem 2.4rem;margin-top:2.4rem; }
.content-satisfaction .content-satisfaction-select li label input[type="radio"] { opacity:0;position:absolute; }  
.content-satisfaction .content-satisfaction-select li label:has(input[type="radio"]:focus)>span>i { outline:1px solid #000; }           
.content-satisfaction .content-satisfaction-select li label span { display: flex;align-items: center; gap:.6rem; font-size:1.6rem; font-weight: 400; color:#444; }
.content-satisfaction .content-satisfaction-select li label span i { width:1.8rem;height: 1.8rem; border-radius: 50%; border:1px solid #d9d9d9;display: block;background: #fff; display: flex; position: relative; align-items: center; justify-content: center; }
.content-satisfaction .content-satisfaction-select li label span i:before { content:"";width:.8rem; height: .8rem; border-radius: 50%;background: #444;display: none; }
.content-satisfaction .content-satisfaction-select li label input[type="radio"]:checked+span i { border-color:#222; }
.content-satisfaction .content-satisfaction-select li label input[type="radio"]:checked+span i:before { display: block; }
.content-satisfaction .content-satisfaction-submit { position: absolute; bottom:4rem; right:4rem; display: flex;gap:.4rem; }
.content-satisfaction .content-satisfaction-submit input[type="text"] { flex:1; height: 4.8rem; border-radius: .2rem;max-width:100%; }
.content-satisfaction .content-satisfaction-submit button[type="submit"] { width:7.2rem; height: 4.8rem;background: #424242; border-radius: .2rem; }
.content-satisfaction .content-satisfaction-submit button[type="submit"] span { font-size:1.6rem;font-weight: 500;color:#fff; }
@media (max-width:1080px){
.content-satisfaction .content-satisfaction-submit { position: relative;bottom:auto;right:auto; transform: none; margin-top:2rem;justify-content: center; }
} 
@media (max-width:640px){
.content-satisfaction { padding:2rem; }
}

/* 서브 공통 컨텐츠 테이블 */
.tbl { position:relative; width:100%; letter-spacing:-0.02em; border-collapse:collapse; table-layout:fixed; border-top:1px solid #1D1D1D; } 
.tbl thead { border-bottom:1px solid #D8D8D8; } 
.tbl::after { display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#D8D8D8; content:""; } 
.tbl th { padding:1.4rem 2rem; color:#444; font-weight:700; font-size:1.8rem; text-align:center; border-width:1px 1px 0 0; border-color:#E0E0E0; border-style: solid; background: #F8F8F8; } 
.tbl td { padding:1.4rem 2rem;  color:#444; font-weight: 400; font-size:1.8rem; text-align:center; word-break:keep-all; word-wrap:break-word; border-width:1px 1px 0 0; border-color:#d8d8d8; border-style: solid; } 
.tbl td:first-of-type { border-left:0; }
.tbl tr:first-of-type td { border-top:0; } 
.tbl tr:first-of-type th { border-top:0; } 
.tbl th input,
.tbl th button,
.tbl th a { color:#424242;z-index: 2; position: relative; } 
.tbl td input,
.tbl td button,
.tbl td a { color:#424242;z-index: 2; position: relative; } 
.tbl td:last-child { border-right:0; } 
.tbl tr th:last-child { border-right:0; } 
.tbl-scroll:before { display:none; position:absolute; top:0; right:23px; color:#003C73; font-size:3rem; font-family: "xeicon"; content:"\eafa"; animation: tableScroll 1.8s ease-out infinite, tableScroll02 1.8s ease-in infinite; } 
.bd-right { border-right:1px solid #E0E0E0 !important; }
.bd-left { border-left:1px solid #E0E0E0 !important; }
.tbl-scroll .scroll-btn { position: absolute;top:50%;transform: translateY(-50%);font-size: 2.8rem;display: none;color:#003C73; }
#tbl-btn-left { left:0; }
#tbl-btn-right { right:0; }
.tbl-wrap::-webkit-scrollbar { width: 5px; height: 5px;}
.tbl-wrap::-webkit-scrollbar-thumb { background-color: #003C73;}
.tbl-wrap::-webkit-scrollbar-track { background-color: transparent; }
.btn-icon i { font-size:2rem; color:#424242; }
.tbl-scroll + .tbl-scroll { margin-top:6.4rem; }
.txt-br { line-height: 1; } 
.txt-br br { display: none; }
@keyframes tableScroll{ 0% {transform: translateX(0);opacity: 1;} 50% {opacity: 1;} 70% {transform: translateX(-1.8rem);} 80%{opacity: 0;} 100% {transform: translateX(-1.8rem);opacity: 0;} }
@media (max-width:640px) {
.tbl-scroll { position:relative; position:relative; padding:3.5rem 3rem 0 3rem; } 
.tbl-scroll .tbl-wrap { overflow-x:auto;cursor: grab;} 
.tbl-scroll:before { display:block; }                          
.tbl-scroll .tbl { min-width: 800px;} 
.tbl-scroll .scroll-btn { display: block; }  
.txt-br br { display: block; } 
.tbl.response { display:block; } 
.tbl.response>tbody { display:block; }
.tbl.response>tbody>tr { display:block; }
.tbl.response>tbody>tr>th { display:block;border-right:0; }
.tbl.response>tbody>tr>td { display:block; }
}         
  
/* 게시판 */
.board-search { display: flex; }

/* 블릿 리스트 */
.txt-list { display: flex;gap:.6rem;flex-direction: column; }
.txt-list li { font-size:1.8rem;color:#444; line-height: 2.7rem;position: relative; padding-left:1rem; }
.txt-list li:before { content:"";display: block;width:.4rem;height: .4rem;position: absolute; top:1rem; left:0; background: #949494;border-radius: .2rem; }

/* 블릿 리스트 타입02*/
.txt-list.type02 li:before { content:"";display: block; border-radius: 0; width:.4rem; height: .2rem;background: #949494; }

/* 숫자 리스트 */
.num-list { counter-reset: num-list; } 
.num-list>li { position: relative; padding-left:3rem; margin-top:1.4rem; color:#424242; font-weight:400; font-size:1.8rem; line-height:150%; } 
.num-list>li:first-of-type { margin-top:0; } 
.num-list>li:before { display: flex; justify-content: center; align-items: center; position: absolute; top:.3rem; left:0; width:2rem; height: 2rem; border-radius: .2rem; background: #003C73; color:#fff; font-weight: 700; font-size:1.4rem; content:""counter(num-list)""; counter-increment: num-list; line-height: 1; } 

/* 숫자 리스트 타입02*/
.num-list.type02 { counter-reset: num-list02; }
.num-list.type02>li { margin-top:0; padding-left:1.8rem; }
.num-list.type02>li:before { display: flex;font-weight: 400; content:""counter(num-list02)"."; counter-increment: num-list02; width:auto;height: auto;background: none;color:#424242;font-size:1.8rem;top:.5rem; } 

/* 숫자 리스트 타입03*/
.num-list.type03>li { padding-left:2.2rem; }
.num-list.type03>li:before { content:attr(aria-level);width:auto;height: auto;background: none;color:#424242;font-size: 1.8rem;font-weight: 400;top:.5rem; }
.num-list.type03>li { margin-top:0; }

/* 숫자 텍스트 */
.num-txt { position: relative; padding-left:3rem; margin-top:1.4rem; color:#424242; font-weight:400; font-size:1.8rem; line-height:150%; }
.num-txt:first-of-type { margin-top:0; }
.num-txt:before { display: flex; justify-content: center; align-items: center; position: absolute; top:.3rem; left:0; width:2rem; height: 2rem; border-radius: .2rem; background: #003C73; color:#fff; font-weight: 700; font-size:1.4rem; line-height: 1; content:attr(aria-level); }
 
/* 블릿 텍스트 */
.bullet-txt { position: relative;padding-left:1rem; }
.bullet-txt:before { content:"";display: block;width:.4rem;height: .4rem;position: absolute; top:1rem; left:0; background: #949494;border-radius: .2rem; }

/* 캡션 텍스트 */
.caption-txt { position: relative;color: #444;font-size: 1.7rem;
font-style: normal;font-weight: 400;line-height: 150%; letter-spacing: -0.034rem;padding-left:2rem; }
.caption-txt:before { content:"\ea81";display: block;position: absolute; top:.5rem; left:0; font-family: "remixicon";font-size:1.7rem;color:#1877CF;line-height: 1; }
.caption-txt.type02 { padding-left:1rem;font-size:1.6rem;color:#757575; } 
.caption-txt.type02:before { content:"*";display: block;position: absolute; top:.7rem; left:0;font-size:1.6rem;color:#D43333;line-height: 1; }  
  
/* 중요 텍스트 */
.important-txt { position: relative;color: #444;font-size: 1.7rem;
font-style: normal;font-weight: 400;line-height: 150%; letter-spacing: -0.034rem;padding-left:2rem; }
.important-txt:before { content:"\eca0";display: block;position: absolute; top:.2rem; left:0; font-family: "remixicon";font-size:1.7rem;color:#D43333;line-height: 1; }  
  
/* 서브 공통 탑 박스 */
.content-topbox { padding:3.2rem;background: rgba(24, 119, 207, 0.05);border-radius: .8rem;margin-bottom:4rem;display: flex;gap:1.6rem; border:2px solid #1877CF; }
.content-topbox .icon { flex-shrink: 0; display: flex; align-items: flex-start; }
.content-topbox p { display: flex;flex-direction: column;align-items: flex-start; justify-content: center; color:#222;font-size: 2rem;font-weight: 500;line-height: 150%;letter-spacing: -0.04rem; }
.content-topbox p a { color:#1877CF;text-decoration: underline; } 
@media (max-width:480px){
.content-topbox .icon { display:none; }
}          
         
/* 이미지 박스 */
.img-box { border-radius: .8rem;border:1px solid #d9d9d9;padding:4rem;display: flex;justify-content: center;gap:2.4rem; }
.img-box.type02 { border:0; }
.img-box.type03 { border:0;padding:0; }
.img-box::-webkit-scrollbar { width: 5px; height: 5px;}
.img-box::-webkit-scrollbar-thumb { background-color: #003C73;}
.img-box::-webkit-scrollbar-track { background-color: transparent; }
.img-scroll:before { display:none; position:absolute; top:0; right:3.5rem; color:#003C73; font-size:3rem; font-family: "xeicon"; content:"\eafa"; animation: tableScroll 1.8s ease-out infinite, tableScroll02 1.8s ease-in infinite; } 
.img-scroll .scroll-btn { position: absolute;top:50%;transform: translateY(-50%);font-size: 2.8rem;display: none;color:#003C73; }
.img-scroll .img-info-txt { color:#757575;font-weight:400;letter-spacing: -0.032rem; font-size:1.6rem; }
#img-btn-left { left:0; }    
#img-btn-right { right:0; }  
.img-box p { text-align:center; }   
@media (max-width:640px){ 
.img-scroll { position:relative; padding:3.5rem 3.5rem 0 3.5rem; } 
.img-box {text-align:center; flex-direction: column; align-items: center; padding:4rem 2rem; }
.img-scroll .img-box { position:relative; overflow-x:auto;cursor: grab;} 
.img-scroll:before { display:block; }                            
.img-scroll .img-box>div { min-width: 600px; }   
.img-scroll .img-box { display:block; }      
.img-scroll .scroll-btn { display:block; }      
}   
@keyframes imgScroll{ 0% {transform: translateX(0);opacity: 1;} 50% {opacity: 1;} 70% {transform: translateX(-1.8rem);} 80%{opacity: 0;} 100% {transform: translateX(-1.8rem);opacity: 0;} }  
 
/* 버튼 */
.btn-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap:1rem; }
.btn-wrap.left {justify-content: flex-start;}
.btn-wrap.center {justify-content: center;}  
.btn-wrap .btn { gap:.5rem; display: flex;justify-content: center;align-items: center;flex-shrink: 0;border-radius: .2rem; padding: 1.3rem 2.2rem; border-radius: .2rem; border: 1px solid #424242; transition: .2s;}
.btn-wrap .btn span { font-size:1.6rem;color:#424242; }
.btn-wrap .btn[target="_blank"] span {position: relative; padding-right: 2.4rem;}
.btn-wrap .btn[target="_blank"] span::before {content: "\f0f4"; font-family: "remixicon"; font-size: 1.8rem; position: absolute; right: 0; top: 0;}
.btn-wrap .btn:hover {background: #424242;}
.btn-wrap .btn:hover span {color: #fff;}
.btn-wrap .btn:hover i { color:#fff; }
.btn-wrap.small { gap:.4rem; }
.btn-wrap.small .btn { height: 4rem;padding:0 1.6rem; } 
.btn-wrap.small .btn.type01 { background: #1877CF;border-color:#1877CF; }
.btn-wrap.small .btn.type01 span { color:#fff; }
.btn-wrap.small .btn.type02 { background: #424242;border-color:#424242; }
.btn-wrap.small .btn.type02 span { color:#fff; }
.btn.blue {background: #1877CF; border-color: #1877CF;}
.btn.blue span {color: #fff;}
.btn.blue:hover {background: #fff;}
.btn.blue:hover span {color: #1877CF;}        

/* 공공누리 */
.content-openbox { margin:12rem 0 2rem 0; border:1px solid #D9D9D9;padding:2rem 4rem;display:flex;align-items:center;gap:2rem;border-radius:.8rem;margin-bottom:2rem; }
.content-openbox img { width:21rem; }
.content-openbox span { font-size:1.8rem; }
@media (max-width:640px){
.content-openbox { flex-direction: column; align-items: flex-start; gap:1rem; }
}