@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; font-family: 'Hakgyoansim Allimjang'; font-weight: 700; color:#222222; margin:40px 0 30px 0; line-height: 1.2em; font-weight:700;}
h5{font-size:28px; font-family: 'Hakgyoansim Allimjang'; font-weight: 400; color:#451876; margin:20px 0 10px;font-weight:700; line-height: 1.2em;}
h6{font-size:24px; font-family: 'Hakgyoansim Allimjang'; font-weight: 400; color:#b99021; margin:20px 0 10px; font-weight:700; line-height: 1.2em;}

/* 기본 컨텐츠 */

.basic_ul{margin:0 0 40px 0;}
.basic_ul li{position: relative; line-height:1.5em; padding:0 0 0 15px; margin-bottom: 8px;}
.basic_ul li::before{content: '';position: absolute; top: 8px; left: 0; display: block; width: 6px; height: 6px; background: #8252b5; border-radius: 50%;}
.basic_ul li ul{margin:8px 0 0;}
.basic_ul li li{padding:0 0 0 16px; margin-bottom:6px;}
.basic_ul li li::before{top: 9px; width: 8px; height: 4px; background: #838383; border-radius: 4px;}
.basic_ul li li li{padding:0 0 0 14px; color:#555555; font-size:15px;}
.basic_ul li li li::before{top: 8px; width: 6px; height: 6px; background: #a9a9a9; border-radius: 50%;}
.basic_ul .li_none{padding:0;}
.basic_ul .li_none::before{display: none;}

.basic_ul_num>li{position:relative; padding-left:36px; margin-bottom: 10px;}
.basic_ul_num>li::before{content:''; display: inline-block; position:absolute; left:0; box-sizing: border-box; width:26px; height:26px; padding-top:3px; margin-right:6px; background: #8252b5; border-radius: 50%; color:#fff; text-align: center;  font-size:15px; }
.basic_ul_num>li:nth-of-type(1)::before{content: '1';}
.basic_ul_num>li:nth-of-type(2)::before{content: '2';}
.basic_ul_num>li:nth-of-type(3)::before{content: '3';}
.basic_ul_num>li:nth-of-type(4)::before{content: '4';}
.basic_ul_num>li:nth-of-type(5)::before{content: '5';}
.basic_ul_num>li:nth-of-type(6)::before{content: '6';}
.basic_ul_num>li:nth-of-type(7)::before{content: '7';}
.basic_ul_num>li:nth-of-type(8)::before{content: '8';}
.basic_ul_num>li:nth-of-type(9)::before{content: '9';}
.basic_ul_num>li:nth-of-type(10)::before{content:'10';}
.basic_ul_num ul{margin:6px 0;}
.basic_ul_num li li{position:relative; padding:0 0 0 15px; margin-bottom: 6px;}
.basic_ul_num li li::before{content: ''; display: block; position: absolute; top:9px; left:0; width:8px; height:4px; border-radius: 4px; background: #838383;}
.basic_ul_num ul ul{margin:6px 0 0;}
.basic_ul_num li li li{padding:0 0 0 14px; color:#555; font-size:15px;}
.basic_ul_num li li li::before{top:8px; width:6px; height:6px; border-radius: 50%; background: #a9a9a9; }


/* .basic_dl{margin:0 0 40px 10px}
.basic_dl dt{font-size:20px;color:#4931c3;background:url("/images/common/h6.gif") no-repeat 0 8px;padding:15px 0 0 0;margin:20px 0 10px 10px;}
.basic_dl dd{background:url("/images/common/li02.gif") no-repeat 0 7px;padding:0 0 0 17px;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 18px;}
.num{display: inline-block; width:32px; height:32px; padding-top: 6px; background: #8252b5; color:#fff; border-radius: 50%; font-size:14px; font-style: normal; text-align: center; vertical-align: middle;}

/* 폰트 컬러 : 상황에 따라 추가 가능 */
.fc_red{color:#e03c3c !important; font-style: normal;}
.fc_blue{color:#3543cd !important; font-style: normal;}
.fc_green{color:#147328 !important; font-style: normal;}

/*테이블*/
.over_table{overflow-x: auto;}
.scroll_guide{position: relative; padding:14px 20px; background: #f4f4f4; margin-bottom:5px; text-align: center;}
.scroll_guide::before{position: absolute; top:50%; left:0; width:20px; height:20px; margin-top:-10px; line-height: 20px; font-weight: 600; content:"〈";}
.scroll_guide::after{position: absolute; top:50%; right:0; width:20px; height:20px; margin-top:-10px; line-height: 20px; font-weight: 600; content:"〉";}
.scroll_guide p{text-align: center; font-size:14px; word-break: keep-all;}
.scroll_guide p::before{content: "좌우로 움직이시면 자세한 내용을 확인하실수 있습니다.";}

.basic_table{width:100%; min-width:800px; margin:10px 0; border-top: 1px solid #451876; border-left: 2px #fff solid; border-right: 2px #fff solid;}
.basic_table th, 
.basic_table td{text-align:center; padding: 16px 14px; border: 1px solid #dad6de; border-top:none;  vertical-align:middle; line-height:1.5em; background: #fff;}
.basic_table thead th{background: #f9f5ff; font-weight: 500;}
.basic_table tbody th{background: #fbfbfb;font-weight: 400;}
.basic_table tbody td li{position: relative; line-height:1.5em; padding:0 0 0 16px; margin-bottom: 8px; text-align: left;}
.basic_table tbody td li::before{content: '';position: absolute; top: 8px; left: 0; display: block; width: 6px; height: 6px; background: #8252b5; border-radius: 50%;}
.basic_table tbody td li ul{margin:8px 0;}
.basic_table tbody td li li{padding:0 0 0 15px; margin-bottom:6px;}
.basic_table tbody td li li::before{top: 9px; width: 8px; height: 4px; background: #838383; border-radius: 4px;}
.basic_table tbody td li li li{padding:0 0 0 14px; color:#555; font-size:15px;}
.basic_table tbody td li li li::before{top: 8px; width: 6px; height: 6px; background: #a9a9a9; border-radius: 50%;}
.basic_table .point_bg{background: #fffcf2;}
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: #f9f5ff;}
.basic_table.table_left{text-align: left;}

.table_left td{text-align:left}


/*탭*/
.basic_tab{margin:30px 0; text-align: center;}
.basic_tab ul{border-radius: 15px;}
.basic_tab li{margin: 0 0 6px 0;}
.basic_tab li a{display:block;height: 56px;padding: 16px 15px 0;border:1px solid #e1e1e1;border-radius: 15px 15px 15px 3px; transition:0.3s;}
.basic_tab li a:hover,.basic_tab li a:focus,.basic_tab li.on a{border:1px solid #451876; color:#451876;}

.new_win{display: inline-block; width: 13px; height: 15px; margin-left: 4px; background: url('/images/member/common/new_win.png') no-repeat; font-size: 0; vertical-align: middle;}

/*버튼스타일*/
.basic_btn{margin:20px 0; text-align: center;}
.basic_btn a{display: inline-block; position:relative; background:#fff; text-align: left;  margin:0 5px 10px 5px; padding: 16px 60px 16px 30px; border:1px solid #8252b5; border-radius: 25px; }
.basic_btn a:hover{border:none; background: #8252b5; color:#fff; box-shadow: 5px 5px 10px #f7fcff; transition: 0.3s ease-in-out;}
.basic_btn a::after{content: ''; position:absolute; top:20px; right:34px; display: block; width:16px; height:16px; background: url('/images/member/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% -31px;}
.basic_btn .btn_file::after{background-position: 100% -65px;}
.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% -195px;}

.sbtn_go{display:inline-block; position: relative; margin:2px 5px 2px 0; padding:6px 50px 6px 20px; border:1px solid #e1e1e1;  font-size:14px; background: #fff; 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/member/common/btn_ico.png') no-repeat;background-position: 100% 1px;}
.sbtn_go:hover, .sbtn_go:focus{border:1px solid #8252b5;}
.sbtn_new{display: inline-block; position: relative; margin:2px 5px 2px 0; padding:6px 50px 6px 20px; border:1px solid #e1e1e1;  font-size:14px; background: #fff; 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/member/common/btn_ico.png')no-repeat; background-position: 100% -97px;}
.sbtn_new:hover, .sbtn_new:focus{border:1px solid #8252b5;}
.sbtn_down{display: inline-block; position: relative; margin:2px 5px 2px 0; padding:6px 50px 6px 20px; border:1px solid #e1e1e1; font-size:14px; background: #fff; border-radius: 10px; transition: 0.5s ease-out;}
.sbtn_down::after{content: ''; position: absolute; top:11px; right:20px; display: block; width:16px; height:16px; background: url('/images/member/common/btn_ico.png')no-repeat; background-position: 100% -29px;}
.sbtn_down:hover, .sbtn_down:focus{border:1px solid #8252b5;}
.sbtn_file{display: inline-block; position: relative; margin:2px 5px 2px 0; padding:6px 50px 6px 20px; border: 1px solid #e1e1e1; font-size:14px; background: #fff; border-radius: 10px; transition: 0.5s ease-out;}
.sbtn_file::after{content: ''; position: absolute; top:11px; right:20px; display: block; width:16px; height:16px; background: url('/images/member/common/btn_ico.png')no-repeat; background-position: 100% -65px;}
.sbtn_file:hover, .sbtn_file:focus{border:1px solid #8252b5;}

.txt_link {background:url('/images/member/common/link_icon.png') no-repeat right center; padding:0 20px 0 0; color:#8252b5;}
.txt_link:hover, .txt_link:focus {text-decoration:underline;}

/* 박스형 컨텐츠 */


.basic_box{margin: 30px 0; padding: 20px; border: 1px solid #8252b5; border-radius: 25px 25px 3px 25px;}
.basic_box2{margin:20px 0 30px 0; padding: 20px; border-radius: 10px; background: #f9f5ff; border-radius: 25px 25px 3px 25px;}

.basic_box,.basic_box2{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: 4px; 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: #8252b5; 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: 4px; background: #838383;}
.basic_box2 ul li li li::before{top: 8px; width: 6px; height: 6px; background: #a9a9a9; color:555;}
.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 dashed #dad6de;}


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

.line_dot {border-top: 1px dashed #dad6de; padding-top: 14px; margin-top: 14px;}



/*토글*/
.toggle h4, .toggle > h5{padding:0 20px;margin:12px 0 0 0;font-size:18px;line-height:1.25em;border: 1px #f3e9fe solid;background:none;border-radius:10px;}
.toggle h4.on,.toggle > h5.on{border: 1px solid #8252b5;border-bottom:0;border-radius:10px 10px 0 0;}
.toggle h4 a,.toggle > h5 a{color: #8252b5;display:block;padding: 20px 30px 20px 0; font-weight: 400;font-size: 20px;}
.toggle h4.on a,.toggle > h5.on a{color: #8252b5;padding: 20px 0;}
.toggle div{display:none;padding:20px}
.toggle div.on{display:block;background: #f9f9f9;border: 1px solid #451876;border-top:0;border-radius:0 0 10px 10px;padding: 20px;}
.toggle div ul{margin:0 0 0 30px;border-radius:5px;padding:20px;border:dashed 1px #dad6de;background:#fff;}

/* 링크연결 컨텐츠 */
.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 #8252b5; position:relative; padding:20px;margin:0 0 40px 0;text-align:center; border-radius:20px; overflow:hidden;}
.big_img img{width:100%}
.big_img a{position:absolute;bottom:0;right:0;display:block;background:url("/images/member/common/img_view.png") no-repeat 16px center #8252b5; color:#fff;padding:10px 20px 10px 40px; border-radius:20px 0 0 0;}

.w100 img, img.w100{width:100%; border:1px solid #8252b5; border-radius:20px; text-align: center;}


/*기본절차도*/
.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/member/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: #f9f5ff;  padding:16px; border-radius: 10px 10px 0 0;}
.basic_step li div{display:block; padding:16px; border:1px solid #f9f5ff; 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 #ebe2f8; border-radius: 0 0 10px 10px; border-top: 0;}

.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/member/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: #f9f5ff; padding:16px; }
.basic_step2 li span{display: block; padding: 16px; border:1px solid #ebe2f8; }



/* 이미지 코멘트 */
.comment{display:block;overflow:hidden;position:absolute;font-size:1.8em;left:-5000px;top:0;}
.map_area{border:1px solid #dedede; background: #fff;}
.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}
.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_tab li a{margin-right: 6px;}

.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 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:1200px) {

.scroll_guide{display:none;}
.basic_tab ul{justify-content: left;}
.basic_tab li{width:25%;}
.basic_tab ul.col2 li,.basic_tab2 ul.col2 li{width: 50%;}
.basic_tab ul.col3 li,.basic_tab2 ul.col3 li{width: 33.33%;}
.basic_tab ul.col4 li,.basic_tab2 ul.col4 li{width: 25%;}
.basic_tab ul.col5 li,.basic_tab2 ul.col5 li{width: 20%;}

.basic_box{padding: 30px 40px;}
.basic_box2>div{padding: 30px 40px;}

.big_img{width:1620px;}
.big_img img{width:auto;max-width:1620px;}
.big_img a{display:none}
.big_view  a{display:block;padding:10px 20px 10px 50px;background-position:15px center;}
.w100 img, img.w100{width:auto; max-width: 1620px;}

/* 기본절차도 */
.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;}

.over_table .scroll_guide{display:none;}
}