@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Regular.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Regular.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Regular.otf') format('opentype');
    font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.otf') format('opentype');
    font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Bold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Bold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Bold.otf') format('opentype');
    font-weight: 700;
	font-style: normal;
	font-display: swap;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 20px;
	/*font: inherit;*/
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {color: black;text-decoration: none;}
a:link {color: black;text-decoration: none;}
button {background: none; font-size: inherit; font-family: inherit; cursor: pointer; color: inherit; box-sizing: border-box; border: 0; padding: 0; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

/*body {font-family: "Noto Sans KR", sans-serif; color: #191919;}*/
body {font-family: "Pretendard", sans-serif; color: #1d1d1d; font-weight: 400;}

.wrap {min-height: auto;height:auto;overflow-y:auto;}
.inner {max-width: 1200px; margin: 0 auto;}

header{height:50px;border-bottom:5px solid #00896f}
header .inner {display: flex;margin-top:30px;}/* 총높이 80 */

header .inner .logo{width:20%;margin-top: -3px;}
header .inner .pc_menu{display: flex;width:80%}
header .inner .pc_menu li{padding-right:70px;font-weight: 700;}
header .inner .pc_menu li:last-child{padding-right:0;}
header .inner .pc_menu li a{position:relative;}
header .inner .pc_menu li a:hover, header .inner .pc_menu li a.active{
	color:#00846b;
}
header .inner .pc_menu li a:hover::before, header .inner .pc_menu li a.active::before{
	content:'';
	display:block;
	width:8px;
	height:8px;
	background:#00846b;
	position:absolute;
	top:-5px;
	left:-10px;
	border-radius:4px;
}

/* 모바일 메뉴 */
.m_ham{display:none;}

.m_ham img{width:80%}
	
header .mo_gnb_area {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: #000;
	letter-spacing: 0;
	font-size: 14px;
}
header .mo_gnb_area.on {
	display: block;
}

header .mo_gnb_wrap {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 320px;
	background: #fff;
	z-index: 10;
}
header .mo_gnb_area .mo_close {
	position: absolute;
	top: 22px;
	right: 22px;
	text-indent: 0;
}

.mobile_menu{margin-top:60px;border-top:2px solid #00846b}
.mobile_menu li{width:100%;padding: 0;text-align:center;border-bottom:1px solid #00846b}
.mobile_menu li a{width:100%;padding:15px 0;display:block;}

/* visual */
.visualArea{background:url('../images/visual_img.png') no-repeat #C7FCEB; width:100%;height:600px;text-align:center; background-size:contain;position:relative;}
.visualArea .v_title_txt{font-weight: 700;font-size:2.5rem;padding-top:40px;line-height:1.5;}
.visualArea .v_title_txt .small{font-size:2rem;}
.visualArea .v_title_txt font{color:#00896f}
.visualArea .v_sub_txt{font-size:1.5rem;font-weight: 500;margin-top:30px;line-height:1.5;}
.visualArea .cardList{margin-top:30px;display:flex;justify-content:center;}
.visualArea .cardList .item{display: inline-flex;flex-direction: column;width:200px;height:330px;background:#fff;border-radius:15px;padding:20px;margin-right:20px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.visualArea .cardList .item:last-child{margin-right:0}
/*.visualArea .cardList .item:last-child::after{content:'※ 사전 가입 필요';display:block;margin-top:15px;font-size:0.9rem;color:#b20000;font-weight: 500;}*/
.visualArea .cardList .item .card_tit{font-weight: 700;font-size:1.3rem;}
.visualArea .cardList .item .card_name{margin-top:15px;font-weight: 500;font-size:1.3rem;color:#fff;background:#00896f;padding:10px 0;border-radius:30px;}
.visualArea .cardList .item .card_img{margin-top:20px;}
.visualArea .cardList .item .card_txt{margin-top:20px;font-weight: 500;line-height:1.5;}
.visualArea .cardList .item .card_desc{font-size:0.9rem;color:#b20000;font-weight: 500;margin-top:5px;}
.visualArea .woosan{position:absolute;right:220px;bottom:75px;z-index:100;}
.visualArea .persons{display:none;}

/* contents */
.main {padding: 50px 0 70px;}
.main .inner{position:relative;}

.doc_title{background:url('../images/doc_title_bg.png') no-repeat; width:524px;height:120px;text-align:center; background-size:contain;margin:0 auto;color:#fff;font-size:1.3rem;padding-top: 47px;font-weight: 700;}
.contents {margin-top:55px;}
.ico_txt::before{content:'';display:inline-block;background:url('../images/ico1.png') no-repeat;width:30px;height:35px;vertical-align:-7px;margin-right: 10px;}
.ico_txt{font-weight: 700;font-size:1.3rem;color:#00846b;padding-bottom:20px;border-bottom:1px solid #00846b;}

.desc1{margin-top:40px;}
.desc1 > li{font-weight: 500;font-size:1.2rem;line-height:1.5;padding-left: 18px; text-indent: -18px;margin-top:40px;}
.desc1 > li b{font-weight: 700;font-size:1.2rem;}
.desc1 > li::before{content:'';background:#00846b;width:6px;height:24px;display:inline-block;vertical-align: -3px;margin-right: 10px;}
.desc1 > li:first-child{margin-top:0;}

.desc2{margin-top:10px;}
.desc2 > li{font-weight: 500;line-height:1.5;padding-left: 0; text-indent: 0;}
.desc2 > li.strong{padding-left: 16px;text-indent: -16px;}
.desc2 > li.strong::before{content:'※';margin-right:5px;font-size:1rem;}
.desc2 > li.hyphen{padding-left: 13px;text-indent: -13px;}
.desc2 > li.hyphen::before{content:'-';margin-right:5px;font-size:1rem;}
.desc2 > li.num{padding-left: 22px;text-indent: -22px;}
.desc2 > li.num1::before{content:'①';margin-right:5px;font-size:1rem;}
.desc2 > li.num2::before{content:'②';margin-right:5px;font-size:1rem;}
.desc2 > li.num3::before{content:'③';margin-right:5px;font-size:1rem;}
.desc2 > li.num4::before{content:'④';margin-right:5px;font-size:1rem;}
.desc2 > li.num5::before{content:'⑤';margin-right:5px;font-size:1rem;}
.desc2 > li.num6::before{content:'⑥';margin-right:5px;font-size:1rem;}
.desc2 > li.num7::before{content:'⑦';margin-right:5px;font-size:1rem;}
.desc2 > li.num8::before{content:'⑧';margin-right:5px;font-size:1rem;}
.desc2 > li.num9::before{content:'⑨';margin-right:5px;font-size:1rem;}
.desc2 > li.tri{padding-left: 23px;text-indent: -23px;}
.desc2 > li.tri::before{content:'▶';margin-right:5px;font-size:1rem;}

.desc3{padding-left: 0;}
.desc3 > li{padding-left: 0; text-indent: 0;}
/*.desc3 > li.strong{padding-left: 16px;text-indent: -16px;}*/
.desc3 > li.strong::before{content:'※';margin-right:5px;font-size:1rem;}

/*ol*/
.desc2.deci{margin-left: 23px;}
.desc2.deci > li{list-style:decimal;}
.desc3.deci{padding-left: 17px;}
.desc3.deci > li{list-style:decimal;font-weight: 500;line-height:1.5;}

/* table */
.table1 {margin-top:20px; clear: both;width: 100%;border-collapse: collapse;border-spacing: 0px;empty-cells: show;}
.table1 caption.dns {overflow: hidden;width: 0;height: 0;font-size: 0;}
.table1 .bd0 {border-left: 0;}
.table1 th{background:#00846b;text-align:center;color:#fff;font-weight: 700;padding:15px;border-radius:10px;border-left:2px solid #fff;border-bottom:2px solid #fff;    vertical-align: middle;}
.table1 td{background:#f4f5f7;text-align:center;font-weight: 500;padding:15px;border-radius:10px;border-left:2px solid #fff;border-bottom:2px solid #fff;    vertical-align: middle;}
.table1 td.leftText{text-align:left;}

/* button */
.btnFile{font-weight: 500; height:50px; text-align:center;padding:9px 15px 0 15px;display:inline-block;border:1px solid #9aa0a4;border-radius:10px;}
.btnFile strong{font-size:0.9rem;}
.btnFile em{color:#b20000;font-style:normal;font-size:0.9rem;}
.btnFile.download::after{content:'';background:url('../images/ico_download.png') no-repeat;background-size: cover;width:20px;height:17px;display:inline-block;}
.btnFile.direct::after{content:'';background:url('../images/ico_direct.png') no-repeat;background-size: cover;width:15px;height:15px;display:inline-block;    vertical-align: -1px;}

.preview{font-weight: 500; text-align:center; height:50px;padding:11px 15px 0 15px;display:inline-block;border:1px solid #ecefef;border-radius:10px;background:#cdd0d5;font-size:0.9rem;}
.preview::after{content:'';background:url('../images/ico_preview.png') no-repeat;background-size: cover;width:20px;height:13px;display:inline-block;}

/* 구민안전보험 box */
.box{
	border:1px solid #666;
	padding:10px 15px;
	display:flex;
	margin:10px 0 20px 0;
}

.box.second{
	display:block;
}
.box .title{
	font-weight:bold;
	text-decoration:underline;
	margin-bottom:10px;
	    text-indent: 0px;
}

.box img{
	width:150px;
}
.box .img_div{
	margin:0 0 0 auto;
	text-align:right;
}

.right_img{position:absolute;bottom:0;right:0;}


.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.redFont{color:#b20000;}
.mo_br{display:none;}

.visualArea .cardList .item:nth-child(6){display:none;}
.response_div + .icon_scroll .blind{display:none;}
@media (max-width: 1900px){
	.woosan{display:none;}
	.visualArea{background:#C7FCEB;}
}

@media (max-width: 1250px){
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		font-size: 18px;
	}
	
	header .inner{width:95%;margin:30px auto 0 auto;}
	/*.visualArea .cardList .item:last-child::after{content:'※ 사전 가입 필요';display:block;margin-top:25px;font-size:0.9rem;color:#b20000;font-weight: 500;}*/
	
	.main .inner{width:90%;margin:0 auto;}
}

@media (max-width: 1120px){
	.wrap {min-height: auto;height:auto;}
	
	.visualArea .cardList{width:95%;margin:50px auto 0 auto;}
	.visualArea .cardList .item{width:20%;padding:20px 15px;}	
	
	.right_img{position:relative;text-align:center;margin-top:20px;}
}

@media (max-width: 1024px){
	.wrap {min-height: auto;height:auto;}
	header .logo {left: 20px;}
	.visualArea .cardList .item{padding:20px 10px;}
}

/* 모바일 UI */

@media (max-width: 950px){
	header .inner .pc_menu{display:none;}
	.visualArea .cardList .item{margin-right:10px;}
	
	.m_ham{
		display:block;
		position: absolute;
		right: 10px;
		top: 30px;
	}
	
	.ico_txt::before {
		vertical-align: -11px;
	}
	
	
}

@media (max-width: 882px){
	.visualArea{height:auto;padding:70px 0;}
	.visualArea .v_title_txt{text-align:left;width:90%;margin:0 auto;padding-top:0;}
	.visualArea .v_sub_txt{text-align:left;width:90%;margin:30px auto 0 auto;}
	/*.visualArea .cardList{margin-top:50px;display:flex;justify-content:center;}*/
	.visualArea .cardList {display:block;/*text-align: left;*/}
	.visualArea .cardList .item{width: 200px;height: 330px;margin-right: 20px;text-align:center;}
	.visualArea .cardList .item:nth-child(4),.visualArea .cardList .item:nth-child(5){margin-top:20px;}
	/*.visualArea .cardList::after {
		content: "";
		display: block;
		clear: both;
	}*/
	.mo_br{display:block;}
	
	.visualArea .cardList .item:nth-child(4){margin-left:-20px;}
	/*.visualArea .cardList .item:nth-child(4){float:left;clear: both;margin-left: 54px;}
	.visualArea .cardList .item:nth-child(5){float:left;}*/
	.visualArea .persons{position:absolute;right: 96px;bottom: 67px;display:none}
	.visualArea .cardList .item:nth-child(6){display:inline-flex;}
	/*.visualArea .persons{position:absolute;right: -220px;bottom: -12px;display:block}*/
	/*.visualArea .cardList .item:last-child::after {
        margin-top: 30px;
    }*/
}

@media (max-width: 768px){
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		font-size: 17px;
	}
	
	.response_div{width:95%;overflow-x:auto;}
	.response_div + .icon_scroll {
        display: block;
        width: 45px;
        height: 11px;
        background: url(https://www.dobong.go.kr/images/2023/sub/icon_scroll.png) no-repeat right center;
        margin-top: 5px;
    }
	.response_div + .icon_scroll .blind{display:none;}
	
	
	/*.visualArea .cardList .item:nth-child(4){margin-left: 30px;}*/
	.visualArea .persons{right: 74px;bottom: 67px;}
}

@media (max-width: 740px){
	/*.visualArea .cardList .item:nth-child(4){margin-left:15px;}*/
}

@media (max-width: 720px){
	/*.visualArea .cardList .item:nth-child(4),.visualArea .cardList .item:nth-child(5){margin-top:20px;}*/
	
	.visualArea .cardList .item{width: 180px;height: 300px;margin-right: 10px;}
	
	/*.visualArea .cardList .item:nth-child(4){margin-left: 52px;}*/
}

@media (max-width: 690px){
	
	/*.visualArea .cardList .item:nth-child(4){margin-left: 45px;}*/
}

@media (max-width: 623px){
	.visualArea .cardList .item{width: 170px;}
}

@media (max-width: 579px){
	.main {padding: 10px 0 50px;}
	.contents {margin-top: 0;}
	.visualArea .cardList .item{width: 160px;}
	
	.doc_title{background:url('../images/doc_title_bg.png') no-repeat; width:100%;background-size:cover;background-size: contain;background-position: center;    padding-top: 52px;}
}

@media (max-width: 547px){
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		font-size: 16px;
	}
	
	.visualArea .cardList .item{width: 150px;}
}

@media (max-width: 515px){
	
	.visualArea { padding: 30px 0;}
	.visualArea .cardList .item{width:190px;height:180px;}/* 200 */
	.visualArea .cardList .item:nth-child(2n){margin-right:0;}
	.visualArea .cardList .item .card_img{display:none;}
	.visualArea .cardList .item .card_txt{margin-top:10px;}
	.visualArea .cardList .item:nth-child(4) {
        margin-left: 0
    }
	/*.visualArea .cardList .item:last-child::after {
        margin-top: 30px;
    }*/
	
	.visualArea .v_sub_txt {
        margin: 20px auto 0 auto;
		/*color:red*/
    }
	
	.visualArea .cardList {
        margin: 30px auto 0 auto;
    }
	
	.right_img img{width:100%}
	
	.visualArea .persons{right: -185px;}
	.visualArea .persons img{width:57%}
	.box img {width: 100%;}
	
	/*.visualArea .cardList .item:nth-child(4){float:none;clear: both;margin-left: 0;}
	.visualArea .cardList .item:nth-child(5){position:relative;float:left;clear: both;margin-left: 47px;}*/
	
	.visualArea .persons{position:absolute;right: -220px;bottom: -12px;display:none}
	
	.visualArea .v_title_txt {
		font-size: 2.2rem;
	}
	
	.desc1 > li::before{height:18px;}
	
	.btnFile{font-weight: 500; height:50px; text-align:center;padding:9px 15px 0 15px;display:inline-block;border:1px solid #9aa0a4;border-radius:10px;}
	.btnFile strong{font-size:0.9rem;}
	.btnFile em{color:#b20000;font-style:normal;font-size:0.9rem;}
	.btnFile.download::after{content:'';background:url('../images/ico_download.png') no-repeat;background-size: cover;width:20px;height:17px;display:inline-block;}
	.btnFile.direct::after{content:'';background:url('../images/ico_direct.png') no-repeat;background-size: cover;width:15px;height:15px;display:inline-block;    vertical-align: -1px;}

	.preview{font-weight: 500; text-align:center; height:50px;padding:11px 15px 0 15px;display:inline-block;border:1px solid #ecefef;border-radius:10px;background:#cdd0d5;font-size:0.9rem;}
	.preview::after{content:'';background:url('../images/ico_preview.png') no-repeat;background-size: cover;width:20px;height:13px;display:inline-block;}
	
	    .btnFile,.preview {
        height: 42px;
		}
		
		    .btnFile.direct::after {
        vertical-align: -3px;
    }
	.btnFile.download::after {
        vertical-align: -3px;
		}
		    .preview::after {
        vertical-align: -2px;}

}

@media (max-width: 470px){
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		font-size: 15px;
	}
	/*header {height: 70px;}*/
	header .logo img {width: 80px;}
	header h2 {margin-left: 135px;}
	/*.visualArea .v_sub_txt {
		color:blue
    }*/
}

@media (max-width: 431px){
	.visualArea .cardList .item{width:185px;height:175px;} /* 195 */
	/*.visualArea .v_sub_txt {
		color:green
    }*/
	/*.visualArea .cardList .item:nth-child(5){margin-left: 11px;}*/
	.visualArea .persons{position:absolute;right: -178px;bottom: -12px;display:none}
}

@media (max-width: 413px){
	.visualArea .cardList .item{width:177px;height:175px;}/* 187 */
	/*.visualArea .v_sub_txt {
		color:orange
    }*/
}

@media (max-width: 391px){
	.visualArea .cardList .item{width:168px;height:175px;}/* 178 */
	/*.visualArea .v_sub_txt {
		color:pink
    }*/
	
	/*.visualArea .cardList .item:nth-child(5){margin-left: 10px}*/
	.visualArea .persons{position:absolute;right: -175px !important;bottom: -12px;display:none}
	
	    .visualArea .v_title_txt {
        font-size: 2.1rem;
    }
}


@media (max-width: 360px){
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		font-size: 13px;
	}
	
	.visualArea .cardList .item{width:153px;height:160px;}/* 163 */
	
	.visualArea .persons{position:absolute;right: -178px;bottom: -12px;display:none}
	
	.visualArea .v_title_txt {
        font-size: 2.2rem;
    }
}