@import url('sub.css'); 


/*** S : 민원서비스 ***/
.service-sec .dep-cont {display:flex; flex-direction:column; gap:30px;}
.service-sec .dep-tit {margin-bottom:0;}
.service-in {display:flex; flex-direction:column; gap:50px;}
.service-block {display:flex; flex-direction:column; gap:15px;}
.service-card-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:60px;}
.service-card {display:flex; flex-direction:column; gap:15px;}
.service-gray-box {position:relative; display:flex; flex-direction:column; gap:15px; padding:40px; background:var(--grayBg); border-radius:var(--borderR30); box-sizing:border-box; min-height: calc(100% - 55px);}
.service-icon {position:absolute; right:35px; bottom:35px; display:flex; align-items:center; justify-content:center; width:70px; height:70px; color:var(--main); font-style: normal;}
.service-icon img{display: block; width: 100%; height: 100%; object-fit: contain;}

.service-table-wrap {width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; position: relative;}
.service-table {width:100%; border-collapse:collapse; table-layout:fixed; border-top:2px solid var(--main);}
.service-table col.col-label {width:260px;}
.service-table col.col-fee {width:180px;}
.service-table col.col-type {width:180px;}
.service-table th,.service-table td {padding:16px 18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box; vertical-align:middle; text-align:center; letter-spacing: var(--letter-spacing-body);}
.service-table th:last-child,.service-table td:last-child {border-right:none;}
.service-table td.line_r {border-right:1px solid var(--border);}
.service-table thead th {background:var(--grayBg); color:var(--black);}
.service-table tbody td:first-child,.service-table tbody th {color:var(--black);}
.service-table tbody td:nth-child(2) {text-align:left; color:var(--basic);}
.service-table tbody td:last-child {color:var(--basic);}
.service-table tbody td:only-child {text-align:center;}
.proxy-table {min-width:1280px;}
.proxy-table col.col-label {width:20%;}
.proxy-table col.col-self {width:20%;}
.proxy-table col.col-proxy {width:20%;}
.proxy-table thead th {background:var(--grayBg); font-weight:600; color:var(--black);}
.proxy-table .th-point,.proxy-table thead th.th-point,.proxy-table tbody th.th-point {background:rgba(250,102,0,0.08); color:var(--black);}
.proxy-table td {text-align:left; color:var(--basic); vertical-align:middle;}
.proxy-table td.center,.proxy-table tbody td.center {text-align:center;}
.proxy-table td .dot-list {gap:8px;}
.proxy-table tbody td:last-child {text-align:left;}
.kiosk-block .kiosk-detail {display:flex; flex-direction:column; gap:30px;}
.kiosk-block .kiosk-sub {display:flex; flex-direction:column; gap:12px;}
.kiosk-issue-table col.col-cate {width:16.67%;}
.kiosk-issue-table col.col-lang {width:16.67%;}
.kiosk-issue-table col.col-fee {width:16.67%;}
.kiosk-issue-table.service-table tbody td {text-align:center; color:var(--basic);}
.kiosk-issue-table.service-table tbody td.target {text-align:left;}
.kiosk-issue-table.service-table tbody td.fee {text-align:center;}
.kiosk-table tbody td.fee {text-align:center;}

.contact-list li {display:flex; gap:10px; align-items:center;}
.contact-list li span:first-child {width:35px; flex-shrink:0; color:var(--black);}

.service-fee {display:flex; flex-direction:column; gap:15px;}

.kiosk-step-wrap {display:flex; align-items:stretch; gap:30px;}
.kiosk-step {position:relative; display:flex; flex:1; flex-direction:column; align-items:center; gap:20px; padding:40px 30px; border-radius:var(--borderR30); box-sizing:border-box; background:var(--grayBg); text-align:center;}
.step-num {display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:500px; background:var(--main); font-size:0.7778rem; line-height:185.71%; color:var(--white); font-family:var(--eng); font-weight:700;}
.step-icon {display:flex; align-items:center; justify-content:center; width:82px; height:82px; color:var(--main); font-style:normal;}
.step-icon img {display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.kiosk-step .step-txt {display:flex; flex-direction:column; align-items:center; gap:8px; width:100%;}
.kiosk-step .step-txt .fs18 {text-align:center;}
.kiosk-step::after {content:''; display:block; width:26px; height:26px; background:url('/disclosure/img/step-arrow.png') no-repeat center/contain; position:absolute; top:50%; margin-top:-13px; right:-13px;}
.kiosk-step:last-of-type:after {display:none !important;}

.portal-box {align-items:flex-start;}
.online-wrap {overflow-x:auto;}
.online-table col.col-cate {width:16.67%;}
.online-table col.col-lang {width:16.67%;}
.online-table.service-table tbody td {text-align:center; color:var(--basic);}
.online-table.service-table tbody td[rowspan] {color:var(--black);}
.online-table.service-table tbody td.target {text-align:left;}
.online-remark {padding-top:10px; text-align:left; font-size:0.8889rem; line-height:175%; letter-spacing:-4%; color:var(--light);}
.online-remark .mark {color:var(--main);}
/*** E : 민원서비스 ***/



/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){

}
/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){

/*** S : 민원서비스 ***/
.service-table-wrap .responsive-dim.show{display: block;}
.service-table-wrap table{min-width: 1280px;}
.proxy-table {min-width:1280px;}
/*** E : 민원서비스 ***/

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/*** S : 민원서비스 ***/
.service-card-grid {gap:30px;}
.service-icon {width:60px; height:60px;}

.kiosk-step-wrap {flex-wrap: wrap;}
.kiosk-step {flex: auto; width: calc((100% - 30px)/2);}
.kiosk-step:nth-child(2n)::after{display: none;}

/*** E : 민원서비스 ***/

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/*** S : 민원서비스 ***/
.service-sec .dep-cont {gap:20px;}
.service-in {gap:40px;}
.service-block {gap:10px;}
.service-card-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
.service-card {gap:10px;}
.service-gray-box {gap:10px; padding:30px; min-height: 100px;}
.service-gray-box.gray-card,
.service-gray-box.place-box,
.service-gray-box.time-box {padding:30px 100px 30px 30px ;}
.service-icon {right:20px; bottom:20px; width:50px; height:50px;}

.service-table-wrap table{min-width: 980px;}
.proxy-table {min-width:980px;}
.service-table col.col-label {width:180px;}
.service-table col.col-fee {width:100px;}
.service-table col.col-type {width:100px;}
.service-table th,.service-table td {padding:10px;}
.proxy-table td .dot-list {gap:6px;}

.kiosk-step-wrap {gap:20px;}
.kiosk-step {gap:15px; padding:30px 20px; width: calc((100% - 20px)/2);}
.step-icon {width:65px; height:65px;}
/*** E : 민원서비스 ***/


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/*** S : 민원서비스 ***/
.service-sec .dep-cont {gap:15px;}
.service-in {gap:30px;}
.service-block {gap:6px;}
.service-card {gap:6px;}
.service-gray-box {gap:6px; padding:20px;}
.service-gray-box.gray-card,
.service-gray-box.place-box,
.service-gray-box.time-box {padding:20px 80px 20px 20px ;}
.service-icon {width:40px; height:40px;}

.service-table-wrap table{min-width: 768px;}
.proxy-table {min-width:768px;}
.service-table col.col-label {width:120px;}
.service-table col.col-fee {width:80px;}
.service-table col.col-type {width:80px;}
.service-table th,.service-table td {padding:8px;}
.proxy-table td .dot-list {gap:4px;}

.service-fee {gap:10px;}

.kiosk-step-wrap {gap:10px;}
.kiosk-step {gap:10px; padding: 20px; width: 100%;}
.kiosk-step:nth-child(2n)::after{display: block;}
.step-num {width:26px; height:26px;}
.step-icon {width:50px; height:50px;}
.kiosk-step .step-txt {gap:4px;}
.kiosk-step::after {width:20px; height:20px; margin-top:0; top: auto; bottom: -10px; right:50%; margin-right: -10px; transform: rotate(90deg);}
/*** E : 민원서비스 ***/

}