@charset "utf-8";

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}

.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none !important;margin:0;padding:0}

/* Mobile */
h4{font-size:32px; color:var(--point); margin:40px 0 30px 0; line-height: 1.2em; font-weight:700;}
h5{font-size:28px;  margin:20px 0 10px;font-weight:700; line-height: 1.2em;}
h6{font-size:24px; color:var(--color1); margin:20px 0 10px; font-weight:700; line-height: 1.2em;}

/* 기본 컨텐츠 */
.basic_ul{margin:0 0 40px;}
.basic_ul li{position: relative; line-height:1.5em;padding:0 0 0 12px;margin:0 0 5px 0;}
.basic_ul li::before{content: ''; display: block; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background: var(--point); border-radius: 20px;}
.basic_ul li ul{margin:10px 0 0;}
.basic_ul li li{color: var(--color1);}
.basic_ul li li::before{top: 10px; width: 8px; height: 3px; background: #b4b4b4;}
.basic_ul li li li{}
.basic_ul li li li::before{top: 8px; width: 6px; height: 6px;}
.basic_ul .li_none{padding:0;}
.basic_ul .li_none::before{display: none;}

.basic_dl{margin:0 0 40px 10px}
.basic_dl dt{font-size:18px;color:#4931c3;background:url("/images/common/h6.png") no-repeat 0 8px;padding:0 0 5px 16px;font-weight: 500;}
.basic_dl dd{background:url("/images/common/li02.gif") no-repeat 0 9px;padding:0 0 0 10px;margin:5px 0 8px 8px;}
.basic_dl li ul{margin:5px 0}
.basic_dl li li{padding:0 0 0 10px;background:url("/images/common/li03.gif") no-repeat 0 9px}
.basic_dl .dd_none{background:none;padding:0;}

.basic_p{line-height:1.5em;margin:10px 0;}

/* 폰트 컬러 : 상황에 따라 추가 가능 */
.fc_red{color:#d32626 !important;font-style:normal;}
.fc_blue{color:var(--point) !important;font-style:normal;}
.fc_gray{color: var(--color1) !important;font-style:normal;}

/* 테이블 */
.over_table{overflow-x:auto}
.over_table .scroll_guide{position:relative;padding:10px 20px;background: var(--bg1); margin-bottom:5px;text-align:center;}
.over_table .scroll_guide:before{position:absolute; top:50%; left:0px; width:20px; height:20px; margin-top:-10px; line-height:20px; font-weight:700; content:"〈";}
.over_table .scroll_guide:after{position:absolute; top:50%; right:0px; width:20px; height:20px; margin-top:-10px; line-height:20px; font-weight:700; content:"〉";}
.over_table .scroll_guide p{ text-align:center;font-weight:700;color:var(--color1);font-size:12px;}
.over_table .scroll_guide p:before{ content:"좌우로 움직이시면 자세한 내용을 확인하실수 있습니다.";}
.basic_table ul{text-align: left;}
.basic_table ul li{position: relative; line-height:1.5em;padding:0 0 0 12px;margin:0 0 5px 0;}
.basic_table ul li::before{content: ''; display: block; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background: var(--point); border-radius: 20px;}
.basic_table ul li ul{margin:10px 0 0;}
.basic_table ul li li{color: var(--color1);}
.basic_table ul li li::before{top: 10px; width: 8px; height: 3px; background: #b4b4b4;}
.basic_table ul li li:last-child{margin-bottom: 0;}
.basic_table ul li li li::before{top: 8px; width: 6px; height: 6px;}
.basic_table ul .li_none{padding:0;}
.basic_table ul .li_none::before{display: none;}
.basic_table{width:100%;min-width:800px;margin:10px 0; border-top:1px solid var(--line); border-left: 2px #fff solid; border-right: 2px #fff solid;}
.basic_table th, .basic_table td{text-align:center;padding:10px; border:1px solid var(--line); border-top:none; vertical-align:middle; line-height:1.5em}
.basic_table thead th{background:var(--bg1); color:#111;font-weight: 500;}
.basic_table tbody th{background:var(--bg2s); color:#111;font-weight: 500;}
.basic_table tbody td .sbtn_go, .basic_table tbody td .sbtn_new, .basic_table tbody td .sbtn_down{white-space:nowrap;}
.basic_table .point_bg{background:#fff9f9;}
li .basic_table td{text-align:center;}
li .basic_table td.txt_left{text-align:left;}
.basic_table .tntable {min-width: auto;}
.basic_table tbody .tntable th {background: var(--bg2);}
.table_unit { text-align:right; font-size:15px; color:#898989; margin:0 0 5px 0 } 

.table_left td{text-align:left;}

/* 탭 */
.basic_tab{margin:0 0 30px 0;text-align: center; background: var(--bg2); border-radius: 10px;}
.basic_tab li{}
.basic_tab li a{display: block; padding: 16px 0; line-height: 1.5em; font-size: 19px; font-weight: 500; border-radius: 10px; transition: 0.5s ease-out; }
.basic_tab li a:hover,.basic_tab li a:focus{color: var(--point); font-weight: 700;}
.basic_tab li.on a{background: var(--point); color: var(--color4); }

.basic_tab2{margin:0 0 30px 0; text-align: center;}
.basic_tab2 li{}
.basic_tab2 li a{position: relative; display:block; padding: 20px 10px; border-bottom:1px solid var(--line); line-height: 1.5em; font-size: 19px; font-weight: 500;}
.basic_tab2 li a::after{content: ''; display: block; position: absolute; bottom: -1px; left: 0; width: 0; height: 3px; background: #111; transition: 0.5s;}
.basic_tab2 li.on a::after,
.basic_tab2 li a:hover::after{width: 100%;}
.basic_tab2 li.on a{color: #111;}



/* 버튼 스타일 */
.basic_btn{text-align:center; margin:20px 0;}
.basic_btn a{display:inline-block;position: relative;margin:0 5px 10px 5px;padding: 16px 60px 16px 30px;border: 1px var(--point) solid;border-radius:10px; overflow: hidden;}
.basic_btn a::after{content: '';position: absolute;top: 20px;right: 34px;display:block;width: 16px;height: 16px;background:url("/images/citizencard/common/btn_ico.png") no-repeat;}
.basic_btn .btn_go::after{background-position: 100% 2px;}
.basic_btn .btn_new::after{background-position: 100% -97px;}
.basic_btn .btn_down::after{background-position: 100% -29px;}
.basic_btn .btn_file::after{background-position: 100% -255px;}
.basic_btn a::before{content: ''; display: block; position: absolute; bottom: -1px; left: 0; width: 0; height: calc(100% + 2px); background: var(--point);  transition: 0.5s; z-index: -1;}
.basic_btn a:hover::before, .basic_btn a:focus::before{width: 100%;}
.basic_btn a:hover, .basic_btn a:focus{color: var(--color4);}
.basic_btn .btn_go:hover::after{background-position: 100% -129px;}
.basic_btn .btn_new:hover::after{background-position: 100% -228px;}
.basic_btn .btn_down:hover::after{background-position: 100% -161px;}
.basic_btn .btn_file:hover::after{background-position: 100% -282px;}

.sbtn_go{display:inline-block; position: relative; margin:2px 5px 2px 0; padding:6px 50px 6px 20px;  font-size:14px; background: var(--bg2); border-radius: 10px; transition: 0.5s ease-out;}
.sbtn_go::after{content: '';position: absolute;top: 11px;right: 20px;display:block;width: 16px;height: 16px;background:url("/images/citizencard/common/btn_ico.png") no-repeat;background-position: 100% 1px;}
.sbtn_go:hover, .sbtn_go:focus{background: var(--bg3); color: var(--color4);}
.sbtn_go:hover::after, .sbtn_go:focus::after{background-position: 100% -129px;}

.sbtn_new{display:inline-block; position: relative; margin:2px 5px 2px 0;padding:6px 50px 6px 20px;  font-size:14px; background: var(--bg2); border-radius: 10px; transition: 0.5s ease-out;}
.sbtn_new::after{content: '';position: absolute;top: 11px;right: 20px;display:block;width: 16px;height: 16px;background:url("/images/citizencard/common/btn_ico.png") no-repeat;background-position: 100% -97px;}
.sbtn_new:hover, .sbtn_new:focus{background: var(--bg3); color: var(--color4);}
.sbtn_new:hover::after, .sbtn_new:focus::after{background-position: 100% -228px;}

.sbtn_down{display:inline-block; position: relative; margin:2px 5px 2px 0;padding:6px 50px 6px 20px;  font-size:14px; background: var(--bg2); border-radius: 10px; transition: 0.5s ease-out;}
.sbtn_down:after{content: '';position: absolute;top: 9px;right: 20px;display:block;width: 16px;height: 16px;background:url("/images/citizencard/common/btn_ico.png") no-repeat;background-position: 100% -29px;}
.sbtn_down:hover, .sbtn_down:focus{background: var(--bg3); color: var(--color4);}
.sbtn_down:hover::after, .sbtn_down:focus::after{background-position: 100% -161px;}

.sbtn_file{display:inline-block; position: relative; margin:2px 5px 2px 0;padding:6px 50px 6px 20px;  font-size:14px; background: var(--bg2); border-radius: 10px; transition: 0.5s ease-out;}
.sbtn_file:after{content: '';position: absolute;top: 9px;right: 20px;display:block;width: 16px;height: 16px;background:url("/images/citizencard/common/btn_ico.png") no-repeat;background-position: 100% -255px;}
.sbtn_file:hover, .sbtn_file:focus{background: var(--bg3); color: var(--color4);}
.sbtn_file:hover::after, .sbtn_file:focus::after{background-position: 100% -282px;}

.txt_link {background:url("/images/citizencard/common/link_icon.png") no-repeat right center; padding:0 20px 0 0; color:var(--point);}
.txt_link:hover, .txt_link:focus {text-decoration:underline;}

/* 박스형 컨텐츠 */
.basic_box{margin: 30px 0; padding: 20px; border: 1px var(--line) solid; border-radius: 10px;}
.basic_box2{margin:20px 0 30px 0; padding: 20px; background: var(--bg1); border-radius: 10px;}
.basic_box3{margin:20px 0 30px 0; padding: 20px; background: #f8f8f8; border-radius: 10px;}

.basic_box,.basic_box2,.basic_box3 h4{margin-top: 0;}

.basic_box ul li{position: relative; line-height:1.5em;padding:0 0 0 12px;margin:0 0 5px 0;}
.basic_box ul li::before{content: ''; display: block; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background: var(--point); border-radius: 20px;}
.basic_box ul li ul{margin:10px 0}
.basic_box ul li li{color: var(--color1);}
.basic_box ul li li::before{top: 10px; width: 8px; height: 3px; background: #b4b4b4;}
.basic_box ul li li li::before{top: 8px; width: 6px; height: 6px;}
.basic_box ul .li_none{padding:0;}
.basic_box ul .li_none::before{display: none;}
.basic_box .tit{font-size: 28px; font-weight: 700;}
.basic_box dl dt{font-size: 28px; font-weight: 700;}

.basic_box2 ul li{position: relative; line-height:1.5em;padding:0 0 0 12px;margin:0 0 5px 0;}
.basic_box2 ul li::before{content: ''; display: block; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background: var(--point); border-radius: 20px;}
.basic_box2 ul li ul{margin:10px 0}
.basic_box2 ul li li{color: var(--color1);}
.basic_box2 ul li li::before{top: 10px; width: 8px; height: 3px; background: #b4b4b4;}
.basic_box2 ul li li li::before{top: 8px; width: 6px; height: 6px;}
.basic_box2 ul .li_none{padding:0;}
.basic_box2 ul .li_none::before{display: none;}
.basic_box2 .tit{margin: 5px 0 15px; font-size: 28px; font-weight: 700;}
.basic_box2 dl dt{margin: 5px 0 15px; font-size: 28px; font-weight: 700;}
.basic_box2 .line_dot{border-top:1px var(--bg4) dashed;}

.basic_box3 ul li{position: relative; line-height:1.5em;padding:0 0 0 12px;margin:0 0 5px 0;}
.basic_box3 ul li::before{content: ''; display: block; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background: var(--point); border-radius: 20px;}
.basic_box3 ul li ul{margin:10px 0}
.basic_box3 ul li li{color: var(--color1);}
.basic_box3 ul li li::before{top: 10px; width: 8px; height: 3px; background: #b4b4b4;}
.basic_box3 ul li li li::before{top: 8px; width: 6px; height: 6px;}
.basic_box3 ul .li_none{padding:0;}
.basic_box3 ul .li_none::before{display: none;}
.basic_box3 .tit{margin: 5px 0 15px; font-size: 28px; font-weight: 700;}
.basic_box3 dl dt{margin: 5px 0 15px; font-size: 28px; font-weight: 700;}
.basic_box3 .line_dot{border-top:1px var(--bg4) dashed;}

.info_txt{background: url("/images/citizencard/common/ico_common_info.png") no-repeat; background-position: 0 8px; padding: 6px 0 6px 30px;}
.info_txt2{background: url("/images/citizencard/common/ico_common_info.png") no-repeat; background-position: 0 -27px; padding: 6px 0 6px 30px;}

.line_dot {border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 14px;}

.toggle h5{margin: 20px 0 0 0; font-size: 24px;}
.toggle h5 a{display: block; padding:20px; background: var(--bg2); border-radius: 10px;}
.toggle h5.on a{background: var(--point); color:#fff; border-radius: 10px 10px 0 0;}
.toggle div{display:none;padding:20px;border: 1px solid #dedede;border-top:none;}
.toggle div.on{display:block; margin-bottom: 10px;border-radius: 0 0 10px 10px;}
.toggle div ul{margin:0}

/* 링크연결 컨텐츠 */
.link_box{text-align:center;}
.link_box strong{display: block; font-size:24px;font-weight:700;margin:30px 0 0 0;}
.link_box a{margin:15px 0 0 0;}
.link_box img{width:auto;max-width:100%;}

.link_box2{text-align:center;}
.link_box2 a{margin:15px 0 0 0;}
.link_box2 img{width:auto;max-width:100%;}
.link_box2 dl dt{font-size:24px;font-weight:700;margin:30px 0 020px 0;}
.link_box2 dl dd{word-break: keep-all;}

/* 모바일 이미지 확대보기 */
.big_img{border:1px solid var(--line);position:relative;padding:20px;margin:5px 0;text-align:center}
.big_img img{width:100%}
.big_img a{position:absolute;bottom:0;right:0;display:block;background:url("/images/citizencard/common/img_view.png") no-repeat right 20px center var(--point); border-radius: 20px 0 0; color:#fff;padding:10px 40px 10px 20px}

.w100 img, img.w100{width:100%}

/* 기본절차도 */
.basic_step li{margin: 0 0 14px 0 ;text-align:center;}
.basic_step li::after{content: ''; display: block; margin: 14px auto 0; width: 18px; height: 18px; background:url("/images/citizencard/common/ico_common_step.png") no-repeat; background-position: 50% 0;}
.basic_step li:last-child::after{display: none;}
.basic_step li strong{display:block; background: var(--bg2); padding:16px; border-radius: 10px 10px 0 0;}
.basic_step li div{display:block; padding:16px; border:1px solid var(--line); border-radius: 0 0 10px 10px; border-top: 0;}
.basic_step li div em{font-style:normal; font-size:14px}
.basic_step li span{display: block; padding: 16px; border:1px solid var(--line); border-radius: 0 0 10px 10px; border-top: 0;}

.basic_step3 li{margin: 0 0 14px 0 ;text-align:center; }
.basic_step3 li:before{display:none;}
.basic_step3 li::after{content: '';display: block;margin: 0 auto;width: 18px;height: 18px;background:url("/images/citizencard/common/ico_common_step.png") no-repeat;background-position: 50% 0;}
.basic_step3 li:last-child::after{display: none;}
.basic_step3 li strong{display:block;background: var(--point);color: var(--color4);padding:16px;border-radius: 10px;}


.basic_step2 li{margin: 0 0 14px 0 ;text-align:center; }
.basic_step2 li::after{content: ''; display: block; margin: 14px auto 0; width: 18px; height: 18px; background:url("/images/citizencard/common/ico_common_step.png") no-repeat; background-position: 50% 0;}
.basic_step2 li:last-child::after{display: none;}
.basic_step2 li strong{display:block; background: var(--bg2); padding:16px; }
.basic_step2 li span{display: block; padding: 16px; border:1px solid var(--line); }

/* 이미지 코멘트 */
.comment{display:block;overflow:hidden;position:absolute;font-size:1.8em;left:-5000px;top:0;}
.map_area{border:1px solid var(--line);}
.map_area img{width:100%}

.con_nodata{text-align: center;}
.con_nodata p{word-break: keep-all;}
.con_nodata p::before{content: ''; display: block; width: 120px; height: 140px; margin: 0 auto 30px; background: url('/images/citizencard/common/nodata.png') no-repeat; background-size: 120px;}
.con_nodata strong{display: block; margin: 0 0 30px; font-size: 28px;}
.con_nodata br{display: none;}

/* 폰트 사이즈 : 기본적으로 작성은 되어있으나 사용여부는 디자이너 판단 */
.fs11{font-size:11px;}
.fs12{font-size:12px;}
.fs13{font-size:13px;}
.fs14{font-size:14px;}
.fs15{font-size:15px;}
.fs16{font-size:16px;}
.fs17{font-size:17px;}
.fs18{font-size:18px;}
.fs19{font-size:19px;}
.fs20{font-size:20px;}
.fs21{font-size:21px;}
.fs22{font-size:22px;}
.fs23{font-size:23px;}
.fs24{font-size:24px;}
.fs25{font-size:25px;}
.fs26{font-size:26px;}

/* 기본 마진 : 상황에 따라 추가 가능 */
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mt0{margin-top:00px;}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mb05{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}

/* 기본 패딩 : 상황에 따라 추가 가능 */
.p0{padding:0;}
.pb0{padding-bottom:0px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pr10{padding-right:10px;}
.pr20{padding-right:10px;}
.pr30{padding-right:10px;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt100{padding-top:100px}

/* 배경 없앰 */
.bg_none{background:none;}
.va_top{vertical-align:top;}

/* 컨텐츠 float */
.f_left{float:left;}
.f_right{float:right;}

/* float 해제 */
.clear{clear:both}

/* 이미지 및 컨텐츠 정렬 시. */
.txt_center{text-align:center !important}
.txt_right{text-align:right !important}
.txt_left{text-align:left !important}

.s_con strong {font-weight: 700;}


/* Tablet */
@media all and (min-width:768px) {

.basic_tab ul{display: flex; flex-wrap: wrap;}
.basic_tab li{width: 50%;}

.basic_tab2 ul{display: flex; flex-wrap: wrap;}
.basic_tab2 li{width: 50%;}
.basic_tab2 li a{padding:20px 40px;}

.basic_box .img{overflow:hidden}
.basic_box .img span{text-align:left;margin:0 3% 0 0;float:left;width:15%}


.link_box ul{display: flex; justify-content: center; flex-wrap: wrap; gap: 0 10%;}
.link_box2{max-width: 900px; margin: 0 auto;}
.link_box2{display: flex; justify-content: flex-start; gap: 0 5%;}
.link_box2 dl{text-align: left;}
.link_box2 .basic_btn{text-align: left;}

.big_img{padding:40px 0}
.big_img img{width:100%}

.con_nodata p{font-size: 24px; line-height: 1.5em;}
.con_nodata p::before{width: 260px; height: 260px; background-size: auto;}
.con_nodata br{display: block;}
.con_nodata strong{font-size: 34px;}

}

/* Desktop */
@media all and (min-width:1023px) {

.basic_tab2 ul{justify-content: center;}
.basic_tab li{width:25%;}
.basic_tab2 li{width:auto;}
.basic_tab .col5 li, .basic_tab2 .col5 li{width:20%}
.basic_tab .col4 li,.basic_tab2 .col4 li{width:25%}
.basic_tab .col3 li,.basic_tab2 .col3 li{width:33.333%}
.basic_tab .col2 li,.basic_tab2 .col2 li{width:50%}

.basic_box,
.basic_box2,
.basic_box3{padding: 30px;}

.big_img img{width:auto}
.big_img a{display:none}

.w100 img, img.w100{width:auto}


/* 기본절차도 */
.basic_step ol{overflow:hidden;}
.basic_step li{float:left; position: relative; margin: 0 10px 0 0; padding-right: 30px;}
.basic_step li::after{position: absolute; right: 0; top: 36px; background-position: 50% -34px;}
.basic_step .col2 li{width:49%}
.basic_step .col3 li{width:32%}
.basic_step .col4 li{width:24%}
.basic_step .col5 li{width:19%}

.basic_step2 li{display: flex; position: relative; padding-bottom: 30px;}
.basic_step2 li::after{position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}
.basic_step2 li strong{width:20%; border-radius: 10px 0 0 10px;}
.basic_step2 li span{width:80%;text-align:left; border-left: 0; border-radius: 0 10px 10px 0;}

.basic_step3 ol{overflow:hidden;}
.basic_step3 li{float:left; position: relative; margin: 0 10px 0 0; padding-right: 30px;}
.basic_step3 li::after{position: absolute;right: 0;top: calc(50% - 9px);background-position: 50% -34px;}
.basic_step3 .col2 li{width:49%}
.basic_step3 .col3 li{width:32%}
.basic_step3 .col4 li{width:24%}
.basic_step3 .col5 li{width:19%}

.over_table .scroll_guide{display:none;}
}


/* 사이트맵 */
.sitemap>ul{display: flex; flex-direction: column; gap: 40px 0;}
.sitemap>ul>li{border-radius: 20px;}
.sitemap>ul>li>a{display: block; padding: 20px 0; border-top: 2px var(--point) solid; font-size: 20px; font-weight: 700;  text-align: center;}
.sitemap ul ul{padding: 20px; border-radius: 10px; background: var(--bg2);}
.sitemap ul li li a{display: block; margin-bottom: 10px; font-weight: 500;}
.sitemap ul ul ul{margin: 10px 0; background: var(--bg4);}
.sitemap ul li li li:last-child a{margin-bottom: 0;}
.sitemap ul ul ul ul{padding: 0;}
.sitemap ul li li li li{position: relative; padding-left: 14px;}
.sitemap ul li li li li a{color: var(--color1); font-weight: 400;}
.sitemap ul li li li li::before{content: ''; position: absolute; left: 0; top: 10px; display: inline-block; width: 6px; height: 3px; background: var(--line1);}
@media all and (min-width:768px) {
.sitemap>ul{flex-direction: row; flex-wrap: wrap; gap: 40px 4%;}
.sitemap>ul>li{flex-basis: 48%;}
}
@media all and (min-width:1200px) {
.sitemap>ul>li{flex-basis: 22%;}
}