@charset "UTF-8";
/***** 폰트 ****/
@font-face {font-family:'Pretendard'; font-display: swap; font-weight:900; src:url("../fonts/Pretendard-Black.woff2") format('woff2'),	url("../fonts/Pretendard-Black.woff") format('woff')}
@font-face {font-family:'Pretendard'; font-display: swap; font-weight:700; src:url("../fonts/Pretendard-Bold.woff2") format('woff2'),	url("../fonts/Pretendard-Bold.woff") format('woff')}
@font-face {font-family:'Pretendard'; font-display: swap; font-weight:400; src:url("../fonts/Pretendard-Regular.woff2") format('woff2'),	url("../fonts/Pretendard-Regular.woff") format('woff')}
@font-face {font-family:'Pretendard'; font-display: swap; font-weight:300; src:url("../fonts/Pretendard-Light.woff2") format('woff2'),	url("../fonts/Pretendard-Light.woff") format('woff')}

/***** reset *****/
*,
*::before,L
*::after{-webkit-box-sizing:inherit; box-sizing:inherit; word-break:keep-all}
html{overflow:hidden;overflow-y:auto; margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:10px}
body{overflow:hidden;position:relative;left:0;top:0;margin:0;padding:0;font-family:"Pretendard", sans-serif; font-size:1.7rem;color:#1d1d1d;line-height:1.5;letter-spacing:0}
header, footer, main, section, article, nav, aside{display:block}
ul, ol, li, dl, dt, dd{margin:0;padding:0;list-style:none}
h1, h2, h3, h4, h5, h6, p, form, figure, figcaption{margin:0;padding:0}
fieldset, hr{display:block;margin:0;padding:0;border:0 none}
input, select {max-width:100%;vertical-align:middle}
input, select, button, textarea, optgroup{margin:0;font-family:inherit;font-size:inherit;color:inherit}
address, em, i{font-style:normal}
a{color:inherit;text-decoration:none}
button {padding:0;border:0 none;background:none;cursor:pointer}
input[type=submit]{-webkit-appearance:none;-moz-appearance:none;appearance:none}
img{max-width:100%;border:0 none;font-size:0;vertical-align:middle}
table{width:100%;border-collapse:collapse}
caption, legend, .sr_only, .hidden, .blind, .IR, .hide{overflow: hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0 none;clip:rect(0, 0, 0, 0)}

/***** default *****/
#skip_nav{position:absolute;left:0;top:-1000px;width:100%;height:0;z-index:1000;line-height:0;font-size:0}
#skip_nav a{display:block;width:100%;line-height:0;font-size:0;text-align:center}
#skip_nav a:focus, #skip_nav a:hover, #skip_nav a:active{position:absolute;left:0;top:1000px;height:4rem;background-color:#002b5e;font-size:1.5rem;line-height:4rem;color:#fff}

a:focus, button:focus{outline:2px dashed #99b0cb}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus{outline:2px dashed #99b0cb}


/***** 공통 *****/
.finePage #main {min-height:calc(100vh - 135px)}
.finePage .main_wrap {margin:0 auto; padding:0 20px 0px 20px; width:124rem; max-width:100%}
.main_wrap::after{display:block;clear:both;width:100%;height:0;content:""}
.inner{max-width:128rem;margin:0 auto}

input[type=radio] + label,
input[type=text],
select,
button {height:40px; line-height:40px; border-radius:8px; font-size:15px}
a[aria-disabled="true"],
a[aria-disabled="true"],
button:disabled,
button:disabled {opacity:0.5; cursor:unset}

/* header */
#header{position:relative;background:#fff;border-bottom:1px solid #d8d8d8}
.finePage .header_top .inner {position:relative; display:flex; align-items:center; justify-content:space-between; padding:2.1rem 2rem}
.finePage .header_top .inner div {display: flex; align-items: center; justify-content: flex-end;}
.finePage .header_top .inner p span {display: flex; align-items: center; justify-content: flex-end;}
.finePage .header_top #logo {float:none}
.finePage .header_top #logo img {width:141px}
.finePage .header_top h2 {position:relative; margin-top:6px; padding-left:40px; line-height:1; font-weight:700; font-size:19px; color:#464C53}
.finePage .header_top h2:before {position:absolute; content:""; top:-2px; left:20px; width:1px; height:18px; background:#ccc}

.finePage .header_top p {position:absolute; right:20px; display:flex; align-items:center; padding:6px 8px; background:#EFF3F6; border-radius:50px; font-size:13px;line-height: 15px;}
.finePage .header_top p a.name {display:flex; align-items:center; font-weight:600}
.finePage .header_top p a.name img {padding-right:5px}
.finePage .header_top p a.logoutBtn {position:relative; margin-left:20px; padding-left:20px; background:url("../images/icon_logout.png") no-repeat center left 3px / 12px auto}
.finePage .header_top p a.name span:before {position:absolute; content:""; top:12px; right:167px; width:1px; height:14px; background:#aaa}
.finePage .header_top .logout_time {position: relative; margin: 0px 4px 0px 0px; padding: 0px 0px 0px 20px; line-height: 1; font-weight: 500; font-size: 14px; color: #464C53; width: 55px; vertical-align: middle; display: inline-block;}

.main_wrap .manual {position: relative;} 
.main_wrap .manual a {position:absolute; right:0; z-index:1; height:34px; padding-right:17px; padding-left: 40px; margin-top:12px; border:1px solid #9fbee3; border-radius:17px; background:url(../images/icon_help.png) no-repeat left 14px top 7px / 21px auto #eef2f7; box-shadow:0px 3px 3px 0 rgb(0 0 0 / 4%); font-size:14px; color:#1d1d1d; font-weight:700; line-height:31px; letter-spacing: -0.025rem;}/* 251218 */
.main_wrap .manual a:hover {border:1px solid #394c72;}/* 251218 */

@media screen and (max-width: 768px){
	.finePage .header_top p {display:block; border-radius: 10px;}
	.finePage .header_top .inner {padding: 1.5rem 2rem;}
	.finePage .header_top p a.name span:before {right:77px;}
	.main_wrap .manual a {margin-top: 8px; height: 30px; padding-right: 11px; padding-left: 35px; line-height: 29px; font-size: 12px; background: url(../images/icon_help.png) no-repeat left 14px top 7px / 18px auto #eef2f7;}/* 251218 */
}

@media screen and (max-width: 600px){
    .finePage .header_top #logo {margin-top:0}
    .finePage .header_top #logo img {width:116px}
    .finePage .header_top h2 {padding-left:20px; font-size:17px}
    .finePage .header_top h2:before {left:10px}
    .finePage .header_top p a.logoutBtn {width: 20px;overflow: hidden;background-size: 16px;}
    .finePage .header_top p a.name span:before {right:36px;}
}

.fine_title {padding:32px 0;background:#EEF2F7;text-align:center}
.fine_title h3 {font-weight:300; font-size:32px}
.fine_title h3 em {font-weight:600}

.fine_title.v2,
.fine_title.v3 {margin-bottom:0; padding:0; background:#fff}
.fine_title.v2 h3,
.fine_title.v3 h3 {margin:0 auto; padding:60px 0 16px; width:128rem; max-width:100%; background:url("../images/bg_fine_list.png") no-repeat right 50px bottom -20px / 108px auto}
.fine_title.v3 h3 {background: url("../images/bg_fine_unpaid.png") no-repeat right 50px bottom -20px / 108px auto}
.fine_title.v3 h3.v2 {background: url("../images/bg_fine_unpaid.png") no-repeat right 50px bottom -20px / 108px auto}
@media screen and (max-width: 940px){
    .fine_title h3 {font-size:25px}
    .fine_title.v2 h3,
    .fine_title.v3 h3 {padding:40px 0 16px; background: url(../images/bg_fine_list.png) no-repeat right 40px bottom -20px / 108px auto;}
}
@media screen and (max-width: 768px){
    .fine_title {padding:30px 0}
    .fine_title h3 {line-height:1.2}
    .fine_title h3 em {display:block}
    .fine_title.v2 h3,
    .fine_title.v3 h3 {padding:32px 0 16px 20px; text-align:left; background:url("../images/bg_fine_list.png") no-repeat right 20px bottom 7px / 78px auto}
    .fine_title.v3 h3.v2 {background:url("../images/bg_fine_unpaid.png") no-repeat right 20px bottom 7px / 78px auto}
}

/* 탭 */
.tabWrap .tabBtns {display:flex; width:100%; list-style:none}
.tabWrap .tabBtns li {flex:1; margin-left: -1px; border: 1px solid #B1B8BE; border-top-left-radius:8px; border-bottom-left-radius:8px; text-align:center}
.tabWrap .tabBtns li + li {border-top-left-radius:0; border-bottom-left-radius:0; border-top-right-radius:8px; border-bottom-right-radius:8px}
.tabWrap .tabBtns li a {display:block; position:relative; line-height:56px; font-size:18px; color:#464C53; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s}
.tabWrap .tabBtns li.curr {background:#063A74; border-color:#063A74}
.tabWrap .tabBtns li.curr a {font-weight:500; color:#fff}
.tabWrap .tabBox {margin-top:20px;}
.tabWrap .tabBox .individual {margin-top:16px;}

@media screen and (max-width:1161px){
    .tabWrap .tabBtns li { height:54px !important }
}
@media screen and (max-width: 1160px){
    .tabWrap .tabBtns {position:relative; margin-top:0}
    .tabWrap .tabBtns li {margin:0; width:100% !important}
    .tabWrap .tabBtns li a {line-height:55px; font-size:18px}
    .tabWrap .tabBox {margin-top:20px}
}
@media screen and (max-width: 940px){
    .tabWrap .tabBtns li.curr a:before {bottom:-1px; height:5px; border-bottom:5px solid #6E40BB}
}
@media screen and (max-width: 767px){
    .tabWrap .tabBtns li {height:46px !important}
    .tabWrap .tabBtns li a {line-height:45px; font-size:16px}
    .tabWrap .tabBtns li.curr a {font-weight:400}
    .tabWrap .tabBox {margin-top:20px}
}

/* 인증 */
.fine_certifi {display:flex; align-items:flex-start; gap:2px; justify-content:stretch;}
.fine_certifi > div {flex:1}
.fine_certifi > div a {display:block; padding:20px 18px 11px 16px; height:100%; border-radius:12px; color:#1E2124; background-color: #f8f8f8; border: 1px solid #e4e4e4;}
.fine_certifi > div:hover, .fine_certifi > div:focus {text-decoration: none; -webkit-box-shadow: 0 0 0 2px #246beb; box-shadow: 0 0 0 2px #246beb; outline: none; border-radius:12px;}
.fine_certifi > div a:focus-visible {outline-offset: 4px; outline: 2px solid rgba(36,107,235,.8); } 
.fine_certifi > div a h4 {display:inline-block; padding-left:40px; padding-right:30px; line-height:40px; background-repeat:no-repeat, no-repeat; background-position:center left,right 6px center; background-size:24px auto, 24px auto; font-weight:700; font-size:20px; width: 100%; margin-left: 4px;}
.fine_certifi > div.simple a h4 {background-image:url("../images/icon_intro01.png"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkuNTYzIDE4LjI1TDE2LjQzNiAxMiA5LjU2MyA1Ljc1IiBzdHJva2U9IiMyRDJEMkQiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=")}
.fine_certifi > div.phone a h4 {background-image:url("../images/icon_intro02.svg"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkuNTYzIDE4LjI1TDE2LjQzNiAxMiA5LjU2MyA1Ljc1IiBzdHJva2U9IiMyRDJEMkQiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=")}
.fine_certifi > div.finance a h4 {background-image:url("../images/icon_intro03.png"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkuNTYzIDE4LjI1TDE2LjQzNiAxMiA5LjU2MyA1Ljc1IiBzdHJva2U9IiMyRDJEMkQiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=")}
.fine_certifi > div.cavity a h4 {background-image:url("../images/icon_intro05.png"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkuNTYzIDE4LjI1TDE2LjQzNiAxMiA5LjU2MyA1Ljc1IiBzdHJva2U9IiMyRDJEMkQiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=")}
.fine_certifi > div a p {padding:12px 40px 0 0px; min-height:45px; font-size:13px; color:#555;}
.company .fine_certifi > div a p {min-height:60px}
@media screen and (max-width: 940px){
    .fine_certifi {gap:24px}
    .fine_certifi > div a {padding:18px}
    .fine_certifi > div a p {padding:10px 0 0 6px; font-size:13px}
}
@media screen and (max-width: 768px){
    .fine_certifi {gap:16px; padding-bottom:0}
    .fine_certifi > div {width:100%}
    .fine_certifi > div a {padding:7px}
    .fine_certifi > div a h4 {padding: 44px 0px 0px 0px; background-position: center 2px, right 9px; background-size: 42px auto, 0px auto; font-size: 12px; text-align: center; margin: 0;}
    .fine_certifi > div a p {display:none;}
}

/* 텍스트배너, 공지사항 */
.ban_noti {display:flex; gap:32px; }
.ban_noti > div {flex:1; width:50%; height:100%; border-radius:12px; padding:15px 30px 20px; background-color:#fff; border:none; box-shadow:0px 0px 10px 3px rgb(0 0 0 / 6%);}/* 251218 */
.ban_noti .text_banner {padding:32px; border:1px solid #CCCCCC; border-radius:16px}
.ban_noti .text_banner strong {display:block; padding-left:76px; background: url("../images/icon_intro06.png") no-repeat left top 0px / 60px auto}
.ban_noti .text_banner strong span {display:block; padding-left:28px; line-height:1.3; background:url("../images/icon_intro07.png") no-repeat left top 0px / 20px auto; font-weight:700; font-size:21px; color:#096AB3}
.ban_noti .text_banner p {padding-top:10px; line-height:1.55; color:#464C53}
.ban_noti .text_banner p em {font-weight:600; color:#256EF4}
.tabWrap + .fine_notice {margin-top:0}
.fine_notice {margin-top:30px; margin-bottom:30px;}/* 251218 */
.fine_notice h4 {display:block; margin-bottom:15px; padding-top:12px; padding-bottom:23px; padding-left:52px; background:url("../images/icon_intro04.png") no-repeat left top 0px / 44px auto; border-bottom:2px solid #394c72; font-size:21px; color:#1d1d1d; font-weight:700; line-height:1.0;}/* 251218 */
.fine_notice div ul li {display:flex; align-items:center; position:relative; padding-right:90px}
.fine_notice div ul li + li {margin-top:7px}/* 251218 */
.fine_notice div span {display:block; font-size:15px}
.fine_notice div span.cate {margin-top:0; margin-right:10px; padding:0 12px; height:22px; line-height:22px; background:#dfe1e4; border-radius:11px; font-size:14px; color:#666; font-weight:400}/* 251218 */
.fine_notice div span.date {position:absolute; right:0; font-size:16px; color:#999;  font-weight:400; letter-spacing:-0.5px}/* 251218 */
.fine_notice div a {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; max-width:100%; font-size:17px; font-weight:400; line-height:1.2;}/* 251218 */
@media screen and (max-width: 940px){
    .ban_noti {gap:16px;}
    .ban_noti .text_banner p,
    .fine_notice div a {font-size:15px}
    .fine_notice div ul li {padding-right:0}
    .fine_notice div ul li + li {margin-top:7px}/* 251218 */
    .fine_notice div span.cate {padding:0 10px; margin-top:0; font-size:12px;}/* 251218 */
    .fine_notice div span.date {display:none}
}
@media screen and (max-width: 768px){
	.ban_noti {margin-top:20px}
    .ban_noti {flex-direction:column}
    .ban_noti > div {width:100%; padding:15px 15px 15px;}/* 251218 */
    .ban_noti .text_banner {padding:20px}
    .ban_noti .text_banner strong {padding-left:60px; background-size:45px auto}
    .ban_noti .text_banner strong span {font-size:17px}
    .tabWrap + .fine_notice {margin-top:40px}
    .fine_notice h4 {padding-top:7px; padding-bottom:18px; padding-left:36px; background-position:left top 0px; background-size:30px auto; font-size:17px;}/* 251218 */
    .ban_noti .text_banner p,
    .fine_notice div a {max-width:100%; font-size:14px}
    .fine_notice {margin-top:0}
}

.unpaidSlider {position:relative}
.unpaidSlider {padding:0 50px}
.unpaidSlider .arrow{position:absolute; top:47%; width:3.4rem; height:6.4rem; transform:translateY(-50%); background-size:3.2rem auto; z-index:1; cursor:pointer}
.unpaidSlider .arrow.prev:before,
.unpaidSlider .arrow.next:before {content:""; display:block; position:absolute; top:0; left:0; right:0 ;bottom:0; width:3.2rem; height:3.2rem; margin:auto; background-repeat:no-repeat; background-position:center; background-size:3.2rem auto}
.unpaidSlider .arrow.prev{left:15px}
.unpaidSlider .arrow.next{right:15px}
.unpaidSlider .arrow.prev:before{background-image:url('../images/btn_slide_prev.png')}
.unpaidSlider .arrow.next:before{background-image:url('../images/btn_slide_next.png')}
@media screen and (max-width: 940px){
    .unpaidSlider .arrow.prev:before,
    .unpaidSlider .arrow.next:before {width:2.5rem; background-size:2.5rem auto}
    .unpaidSlider .arrow.prev{left:5px}
    .unpaidSlider .arrow.next{right:5px}
}

    /* 미납 과태료 */
.unpaidBox {padding:50px; background:#FAFAFA; border:1px solid #AAA; border-radius:24px}
.unpaidTit {border-bottom:1px solid #666}
.unpaidTit strong {font-weight:400; font-size:25px}
.unpaidTit strong em {font-weight:700}
.unpaidTit span {font-size:19px}
.unpaidTit span em {font-weight:700; color:#256EF4}
.unpaidTit.v2 {display:flex; justify-content:space-between; align-items:center}
.unpaidTit.v2 button {width:30px; height:30px; font-size:0; background-position:center; background-repeat:no-repeat; background-size:30px auto}
.unpaidTit.v2 button.prevBtn {background-image:url("../images/btn_fine_prev.png")}
.unpaidTit.v2 button.nextBtn {background-image:url("../images/btn_fine_next.png")}
.unpaidList {display:grid; grid-template-columns:repeat(4, 1fr); gap:40px 18px; margin:32px auto; width:98%}
.unpaidList dl {display:flex; flex-direction:column; min-width:0;}
.unpaidList dt {padding-left:25px; background-repeat:no-repeat; background-position:center left; background-size:20px auto; border-bottom:1px solid #ccc; font-weight:700; font-size:15px; color:#096AB3}
.unpaidList dd {flex:1; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; margin-top:10px; font-size:19px}
.unpaidList dd em {font-weight:700}

.unpaidList dl.notiNum {min-width:250px;}
.unpaidList dl.account {min-width:180px;}
@media screen and (max-width: 940px){
    .unpaidBox {padding:32px}
    .unpaidList {grid-template-columns:repeat(3, 1fr)}
}
@media screen and (max-width: 768px){
    .unpaidTit strong {line-height:1.2; font-size:24px}
/*     .unpaidTit strong em {display:block} */
    .unpaidTit.v2 {align-items:flex-end}
    .unpaidTit.v2 > div {display:flex; margin-bottom:5px}
    .unpaidTit.v2 button {width:25px; height:25px; background-size:25px auto}
    .unpaidList {gap:20px; grid-template-columns:repeat(2, 1fr); margin:25px auto;}
}
@media screen and (max-width: 600px){
    .unpaidBox {padding:25px}
    .unpaidList {grid-template-columns:1fr}

}

.unpaidList .reason dt {background-image:url("../images/icon_fine_list01.png")}
.unpaidList .amount dt {background-image:url("../images/icon_fine_list02.png")}
.unpaidList .date dt {background-image:url("../images/icon_fine_list03.png")}
.unpaidList .deadline dt {background-image:url("../images/icon_fine_list04.png")}
.unpaidList .cate dt {background-image:url("../images/icon_fine_list05.png")}
.unpaidList .notiNum dt {background-image:url("../images/icon_fine_list06.png")}
.unpaidList .account dt {background-image:url("../images/icon_fine_list07.png")}
.unpaidList .charger dt {background-image:url("../images/icon_fine_list08.png")}
.unpaidBox .btnWrap {text-align:right}
.unpaidBox .btnWrap .btn {padding:0 20px; height:46px; line-height:44px; border-radius:8px; font-size:17px}
.unpaidBox .btnWrap .btn + .btn {margin-left:5px}
.unpaidBox .btnWrap .btn.print {background:#ECF2FE; border:1px solid #256EF4; color:#0B50D0}
.unpaidBox .btnWrap .btn.payment {background:#256EF4; border:1px solid #256EF4; color:#fff}
@media screen and (max-width: 768px){
    .unpaidBox .btnWrap {display:flex; gap:5px}
    .unpaidBox .btnWrap .btn {padding:0 10px; height:44px; width:50%; font-size:15px}
}

/* 기납 과태료 */
.paid .srchBox {position:relative; display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding:20px 100px 20px 20px; background:#F4F5F6; border-radius:8px}
.paid .srchBox > * {display:flex; align-items:center; gap:10px}
.paid .srchBox dl dt {width:92px; font-weight:700; font-size:15px; white-space:nowrap}
.paid .srchBox dl dd {display:flex; flex-wrap:wrap; gap:10px}
.paid .srchBox input[type=text] {padding:5px 16px 0; width:240px; line-height:45px; background-color:#fff; border:1px solid #58616A}
.paid .srchBox .dateWrap {display:flex; align-items:center; gap:5px}
.paid .srchBox .dateWrap input {padding: 5px 40px 0 16px; width:170px; background:#fff url("../images/icon_fine_date.png") no-repeat center right 16px / 16px auto; cursor:pointer}
.paid .srchBox .dateWrap span {line-height:40px}
.paid .srchBox .dateWrap img {position:absolute; top:50%; right:17px; margin-top:-8px; cursor:pointer}
.paid .srchBox .date {position:relative}

.paid .srchBox .radioArea {white-space:nowrap}
.paid .srchBox .radioArea .radio {position:relative; display:inline-block; height:100%; font-size:15px}
.paid .srchBox .radioArea .radio input[type=radio] {position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; margin:-1px; clip:rect(0,0,0,0); overflow:hidden}
.paid .srchBox .radioArea .radio input[type=radio]:focus + label {outline:2px dashed #99b0cb}
.paid .srchBox .radioArea .radio input[type=radio] + label {position:relative; display:inline-block; width:75px; background:#fff; border:1px solid #256EF4; font-weight:500; color:#8A949E; text-align:center; cursor: pointer;}
.paid .srchBox .radioArea .radio input[type=radio]:checked + label {background:#ECF2FE; color:#0B50D0}
.paid .srchBox .radioArea .radio input[type=radio] + label > span {padding-left:17px; background:url("../images/icon_fine_radio.png") no-repeat center left / 16px auto}
.paid .srchBox .radioArea .radio input[type=radio]:checked + label > span {background:url("../images/icon_fine_radio_on.png") no-repeat center left / 16px auto}
.paid .srchBox > button {position:absolute; right:20px; padding:0 20px; background:#256EF4; color:#fff}
@media screen and (max-width: 768px){
    .paid .srchBox {padding-right:20px}
    .paid .srchBox > * {display:block; width:100%}
    .paid .srchBox dl dt {margin-bottom:5px}
    .paid .srchBox > button {position:static; display:block}
    .paid .srchBox .dateWrap {flex-wrap:revert}
    .paid .srchBox .dateWrap input {width:100%}
}

.paidListTop {display:flex; align-items:center; justify-content:space-between; margin-top:40px}
.paidListTop strong {font-weight:700; font-size:25px}
.paidListTop strong span {padding-left:5px; font-weight:500; font-size:15px; color:#1E2124}
.paidListTop .totalNum {padding-right:5px; font-weight:500}
.paidListTop .totalNum em {font-weight:700; color:#0B50D0}
.paidListTop select {padding:0 16px; width:74px; background:url("../images/icon_fine_sorting_arrow.png") no-repeat center right 16px / 10px auto; border:1px solid #8A949E; color:#8A949E; appearance:none}
.paidListTop div {text-align: right;}
@media screen and (max-width: 768px){
    .paidListTop strong span {display:block; line-height:1.2}
}

.paidList {margin-top:10px}
.paidList ul li {padding:20px 30px; border:1px solid #ddd; border-radius:8px; background: #FAFAFA;}
.paidList ul li + li {margin-top:20px}
.paidList ul li div.content {display:flex}
.paidList ul li div.content > div {flex:1}
.paidList ul li div.content p {padding:2px 0}
.paidList ul li div.content span {font-size:14px; color:#464C53}
.paidList ul li div.content strong {font-size:19px}
.paidList ul li div.content strong.boldBlue {font-size:15px; color:#096AB3}
.paidList ul li div.content .left strong {font-size:19px}
.paidList ul li div.content .left span.blueBox {margin-left:10px; padding:2px 5px; background:#ECF2FE; border-radius:4px; color:#0B50D0}
.paidList ul li div.content .left div {display: flex; align-items: center; justify-content: space-between; }
.paidList ul li div.content .left div span {margin-right: 10px;}
.paidList ul li div.content .left div p.truncate-text {font-weight: bold; font-size:19px; width:313px;}
.paidList ul li div.content .right {display:flex; align-items:center; justify-content:space-between; position:relative; padding-left:16px}
.paidList ul li div.content .right:before {position:absolute; content:""; top:5px; left:0; width:1px; height:50px; background-color:#CCC;}
.paidList ul li div.content .right .amount {font-size:15px}
.paidList ul li div.content .right .amount em {padding-right:3px; font-weight:700; font-size:19px; letter-spacing:-0.7px}
.paidList ul li div.content .right button {margin-left:24px; padding:0 20px; background:#ECF2FE; border:1px solid #256EF4; color:#256EF4}
@media screen and (max-width: 1160px){
    .paidList ul li div.content {flex-wrap:wrap}
    .paidList ul li div.content .right button {margin-left:5px}
}
@media screen and (max-width: 940px){
    .paidList ul li {padding:20px}
    .paidList ul li div.content p > * {display:block}
    .paidList ul li div.content .left span.blueBox {display:inline-block; margin-left:0}
    .paidList ul li div.content .right {display:block; margin-top:10px}
    .paidList ul li div.content .left div {display: block;}
}
@media screen and (max-width: 768px){
    .paidList ul li div.content p + p {margin-top:10px}
    .paidList ul li div.content .right {margin-top:20px}
    .paidList ul li div.content .right > div + div {display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:15px; margin-left:-15px}
}

/* pagination */
.pagination {display:flex; align-items:center;justify-content:center;flex-direction:row;gap:.1rem;width:100%;margin-top:4rem; padding-bottom: 1rem;}
.pagination a,
.pagination strong {display:inline-block; margin:0 4px; width:40px; height:40px; line-height:40px; font-size:17px; color:#464C53; text-align:center}
.pagination strong {background:#063A74; border-radius:4px; color:#fff}
.pagination a.nextBtn,
.pagination a.prevBtn {width:auto; background-repeat:no-repeat; background-size:16px auto}
.pagination a.nextBtn {padding-right:21px; background-image:url("../images/icon_next_arrow.png"); background-position:right 11px}
.pagination a.prevBtn {padding-left:21px; background-image:url("../images/icon_prev_arrow.png"); background-position:left 11px}
.pagination a.firstBtn,
.pagination a.lastBtn {width:40px; background-repeat:no-repeat; background-position:center; background-size:40px auto; font-size:0}
.pagination a.firstBtn {background-image:url("../images/icon_first_arrow.png")}
.pagination a.lastBtn {background-image:url("../images/icon_last_arrow.png")}
/* 스와이퍼 */
.pagination.slider {text-align:center}
.pagination.slider .swiper-pagination-bullet {position:relative; width:14px; height:14px; font-size:0; background:transparent; opacity:1}
.pagination.slider .swiper-pagination-bullet:before {position:absolute; content:""; top:50%; left:50%; transform:translate(-50%, -50%); width:8px; height:8px; background:#ccc; border-radius:100px}
.pagination.slider .swiper-pagination-bullet.swiper-pagination-bullet-active:before {width:14px; height:14px; background:#256EF4}

@media screen and (max-width: 768px){
    .pagination {margin-top:2rem}
    .pagination a,
    .pagination strong {display:inline-block ;margin:0; width:40px; height:25px; line-height:25px; font-size:15px}
    .pagination a.nextBtn,
    .pagination a.prevBtn {background-size:13px auto}
    .pagination a.nextBtn {padding-right:14px; background-position:right 5px}
    .pagination a.prevBtn {padding-left:14px; background-position:left 5px}
    .pagination a.firstBtn,
    .pagination a.lastBtn {width:20px; background-size:30px auto}
}
@media screen and (max-width: 600px){

}

/* 레이어 팝업 */
.layerPop {display:none; position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.70)}
.layerPop > .inner {overflow:hidden; position:fixed; top:50%; left:50%; max-width:90%; max-height:90%; background:#fff; transform:translate(-50%, -50%) scale(0); -webkit-transform:translate(-50%, -50%) scale(0); -moz-tansform:translate(-50%, -50%) scale(0); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; box-sizing:border-box}
.layerPop > .inner .tit {display:block; padding: 20px 24px; background: #EEF2F7; line-height: 35px; font-size: 19px; font-weight: 700; color: #1E2124;}
.layerPop > .inner .layerCont {overflow-y:auto; padding:32px 24px}
.layerPop > .inner .layerCont p {font-size:13px; padding:6px;}
.layerPop > .inner .layerCont .con {margin-bottom:20px; max-height:156px; overflow-y:auto; white-space: pre-line;}
.layerPop > .inner .layerCont .file a {position:relative; display:inline-block; padding-right:120px; min-width:100px; max-width:100%}
.layerPop > .inner .layerCont .file a span {font-size:15px}
.layerPop > .inner .layerCont .file a span.filename {display:flex; max-width:100%; border-bottom:1px solid #0B50D0; font-weight:700; color:#0B50D0}
.layerPop > .inner .layerCont .file a span.filename em {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;}
.layerPop > .inner .layerCont .file a span + span {position:absolute; top:2px; right:0; padding-left:20px; background:url("../images/icon_download.png") no-repeat center left / 18px auto; font-weight:700; color:#1E2124}
.layerPop > .inner > a {display:none}
.layerPop.on > .inner {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); -moz-transform:translate(-50%, -50%) scale(1)}
.btnBottom {text-align:right; margin-top:20px; padding-top:16px; border-top:1px solid #ccc}
.btnBottom button {padding:0 16px; background:#ECF2FE; border:1px solid #0B50D0; line-height:40px; color:#0B50D0}
@media (max-width:940px) {
    .layerPop > .inner > a {display:flex; align-items:center; justify-content:center; position:absolute; top:17px; right:14px; width:32px; height:32px; background:url("../images/btn_pop_close.png") no-repeat center / 24px auto; text-indent:-9999px}
    .btnBottom {display:none}
}

/* footer */
#footer {padding:10px 0; background:#F4F5F6; border-top:1px solid #ccc; font-size:13px; color:#464C53; text-align:center}


/* 글씨 오버시 ...으로 표현 ( width 값을 정해줘야함 )*/
.truncate-text {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}


/***** 에러페이지 2025-10-20 *****/
.finePage.error .header_top .inner {justify-content:center; padding:1.6rem 2rem}
.finePage.error .errorCon {display:flex; align-items:center; justify-content:center; height:calc(100vh - 125px); text-align:center}
.finePage.error .errorCon strong {display:block; padding-top:16px; line-height:40px; font-size:32px}
.finePage.error .errorCon p {padding-top:24px; font-weight:700; font-size:15px; color:#555}
.finePage.error .errorCon .btn {margin-top:64px;padding: 0 20px;line-height:46px;height:46px;background:#256EF4;border:1px solid #256EF4;color:#fff}
@media (max-width:768px) {
    .finePage.error .header_top .inner {justify-content:flex-start; padding:1rem 2rem}
    .finePage.error .errorCon {padding:20px; height:calc(100vh - 113px)}
    .finePage.error .errorCon img {width:75%}
    .finePage.error .errorCon strong {padding-top:16px; line-height:25px; font-size:23px}
    .finePage.error .errorCon p {padding-top:12px; font-size:15px;}
    .finePage.error .errorCon .btn {margin-top:30px; padding:0 20px}
}