@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; background:#ceced6;}*/
body {font-family: "Pretendard", sans-serif; color: #1d1d1d; font-weight: 400; background:#ceced6;}

.inner {max-width: 1200px; margin: 0 auto;}

header {height: 60px; background: #fff;}
header .inner {display: flex; align-items: center; justify-content: center; position: relative; height: 100%;}
header .logo {position: absolute; top: 50%; left: 0; transform: translateY(-43%);}
header h2 {font-weight: bold; color:#191919; }

.tab_div{width:85%;margin:0 auto;}
.tab{display:inline-block;width:100%;}
.tab li{width:31.5%;height:60px;margin-right:20px;background:#fff;border-radius:30px;float:left;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.tab li:nth-child(3n){margin-right:0}	/* tab 3의 배수 요소 */
.tab li:nth-child(n+4){margin-top:20px} /* tab 4번째 요소부터 다 */
/*.tab li:nth-child(6){visibility:hidden;}*/

.tab li a{font-size:0.95rem;width:100%;height:62px;display: flex;justify-content:flex-start;align-items:center;padding:0 5%;line-height:1.2;}
.tab li a.tab1::before{content:'';background:url('../images/ico_tab01.png') no-repeat; background-size:cover; width:40px;height:40px;margin-right:20px;}
.tab li a.tab2::before{content:'';background:url('../images/ico_tab02.png') no-repeat; background-size:cover; width:40px;height:40px;margin-right:20px;}
.tab li a.tab3::before{content:'';background:url('../images/ico_tab03.png') no-repeat; background-size:cover; width:40px;height:40px;margin-right:20px;}
.tab li a.tab4::before{content:'';background:url('../images/ico_tab04.png') no-repeat; background-size:cover; width:40px;height:40px;margin-right:20px;}
.tab li a.tab5::before{content:'';background:url('../images/ico_tab05.png') no-repeat; background-size:cover; width:40px;height:40px;margin-right:20px;}
.tab li a.tab6::before{content:'';background:url('../images/ico_tab06.png') no-repeat; background-size:cover; width:40px;height:40px;margin-right:20px;}
.tab li a.tab7::before{content:'';background:url('../images/ico_tab07.png') no-repeat; background-size:cover; width:40px;height:40px;margin-right:20px;}


.tab li a:hover, .tab li a.active{background:#ffe7a8;border-radius:30px;}
.tab li a:hover.tab1::before, .tab li a.active.tab1::before{content:'';background:url('../images/ico_tab01_on.png') no-repeat;background-size:cover; }
.tab li a:hover.tab2::before, .tab li a.active.tab2::before{content:'';background:url('../images/ico_tab02_on.png') no-repeat;background-size:cover; }
.tab li a:hover.tab3::before, .tab li a.active.tab3::before{content:'';background:url('../images/ico_tab03_on.png') no-repeat;background-size:cover; }
.tab li a:hover.tab4::before, .tab li a.active.tab4::before{content:'';background:url('../images/ico_tab04_on.png') no-repeat;background-size:cover; }
.tab li a:hover.tab5::before, .tab li a.active.tab5::before{content:'';background:url('../images/ico_tab05_on.png') no-repeat;background-size:cover; }
.tab li a:hover.tab6::before, .tab li a.active.tab6::before{content:'';background:url('../images/ico_tab06_on.png') no-repeat;background-size:cover; }
.tab li a:hover.tab7::before, .tab li a.active.tab7::before{content:'';background:url('../images/ico_tab07_on.png') no-repeat;background-size:cover; }

.s_visual{background:url('../images/s_visual_pc.png') no-repeat;width:100%;height:450px;background-size:cover;background-position:center;}
.main {width:980px;margin:0 auto 30px auto;clear:both;}
.contents{background:#fff;padding:40px;border-radius:15px;margin-top:30px;}
.con_tit{font-size:1.25rem;font-weight:700;padding-bottom:10px;border-bottom:1px solid #252525; color:#252525;padding-left: 47px;text-indent: -47px;}
.con_tit.ico1::before{content:'';background:url('../images/ico_tab01.png') no-repeat; background-size:cover; width:40px;height:40px;display:inline-block;vertical-align: -11px;}
.con_tit.ico2::before{content:'';background:url('../images/ico_tab02.png') no-repeat; background-size:cover; width:40px;height:40px;display:inline-block;vertical-align: -11px;}
.con_tit.ico3::before{content:'';background:url('../images/ico_tab03.png') no-repeat; background-size:cover; width:40px;height:40px;display:inline-block;vertical-align: -11px;}
.con_tit.ico4::before{content:'';background:url('../images/ico_tab04.png') no-repeat; background-size:cover; width:40px;height:40px;display:inline-block;vertical-align: -11px;}
.con_tit.ico5::before{content:'';background:url('../images/ico_tab05.png') no-repeat; background-size:cover; width:40px;height:40px;display:inline-block;vertical-align: -11px;}
.con_tit.ico6::before{content:'';background:url('../images/ico_tab06.png') no-repeat; background-size:cover; width:40px;height:40px;display:inline-block;vertical-align: -11px;}
.con_tit.ico7::before{content:'';background:url('../images/ico_tab07.png') no-repeat; background-size:cover; width:40px;height:40px;display:inline-block;vertical-align: -11px;}


.desc1{margin-top:25px;}
.desc1 > li{font-weight: 500;line-height:1.5;padding-left: 20px; text-indent: -20px;margin-top:20px;}
/*.desc1 > li b{font-weight: 700;font-size:1.2rem;}*/
.desc1 > li::before{content:'';background:#dc744c;width:10px;height:10px;display:inline-block;border-radius:5px;vertical-align: 2px;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: 18px;text-indent: -18px;font-size:0.95rem;}
.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.num1,.desc2 > li.num2{padding-left: 26px;text-indent: -26px;}
.desc2 > li.num1::before{content:'①';margin-right:5px;font-size:1rem;}
.desc2 > li.num2::before{content:'②';margin-right:5px;font-size:1rem;}

.desc3{padding-left: 0;}
.desc3 > li{padding-left: 0; text-indent: 0;}
.desc3 > li a{text-decoration:underline;}
.desc3 > li.num1,.desc3 > li.num2{padding-left: 26px;text-indent: -26px;}
.desc3 > li.num1::before{content:'①';margin-right:5px;font-size:1rem;}
.desc3 > li.num2::before{content:'②';margin-right:5px;font-size:1rem;}
.desc3 > li.strong{padding-left: 18px;text-indent: -18px;font-size:0.95rem;}
.desc3 > li.strong::before{content:'※';margin-right:5px;font-size:1rem;}
.desc3 > li.bull{padding-left: 26px;text-indent: -26px;}
.desc3 > li.bull::before{content:'·';margin-right:5px;font-size:1rem;}
/* table */
.table1 {margin-top:10px; 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:#ffe7a8;text-align:center;color:#252525;font-weight: 700;font-size:0.95rem;padding:5.25px;border-radius:10px;border-left:2px solid #fff;border-bottom:2px solid #fff;vertical-align: middle;line-height:1.3}
.table1 td{background:#f4f5f7;text-align:center;font-weight: 500;padding:4px;border-radius:10px;border-left:2px solid #fff;border-bottom:2px solid #fff;    vertical-align: middle;line-height:1.3}
.table1 td.leftText{text-align:left;}
.table1 th.long,.table1 td.long{padding:15px;}

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt25{margin-top:25px;}
.mb10{margin-bottom:10px;}
.redFont{color:#7d0000;}
.mo_br{display:none;}
.img_100{width:100%}

@media (max-width: 1200px){
	header .logo {left: 20px;}
	
}

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

}

@media (max-width: 980px){
	.main {width:95%;}
	.tab_div{width:100%;}
}


@media (max-width: 820px){
	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;
	}


	.tab li{width: 31.5%;}
}

@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;
	}
	
	.tab li {
        width: 31%;
    }
	.tab li a{letter-spacing:-1px;}
	
	.tab li a.tab1::before,
	.tab li a.tab2::before,
	.tab li a.tab3::before,
	.tab li a.tab4::before,
	.tab li a.tab5::before,
	.tab li a.tab6::before,
	.tab li a.tab7::before{margin-right:15px;width:35px;height:35px;}
	
	.tab li a:hover.tab1::before, .tab li a.active.tab1::before,
	.tab li a:hover.tab2::before, .tab li a.active.tab2::before,
	.tab li a:hover.tab3::before, .tab li a.active.tab3::before,
	.tab li a:hover.tab4::before, .tab li a.active.tab4::before,
	.tab li a:hover.tab5::before, .tab li a.active.tab5::before,
	.tab li a:hover.tab6::before, .tab li a.active.tab6::before,
	.tab li a:hover.tab7::before, .tab li a.active.tab7::before{width:35px;height:35px;}
}

@media (max-width: 645px){
	.s_visual{background:url('../images/s_visual_mo.png') no-repeat;width:100%;height:450px;background-size:cover;background-position:center;}
	.tab li{width:48%;}
	.tab li:nth-child(3n){margin-right:20px}	/* tab 3의 배수 요소 */
	.tab li:nth-child(2n){margin-right:0}	/* tab 2의 배수 요소 */
	.tab li:nth-child(n+3){margin-top:20px} /* tab 4번째 요소부터 다 */
}

@media (max-width: 526px){
	.tab li{width:47%;}
}


@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: 16px;
	}
	
	/*header {height: 70px;}*/
	header .logo img {width: 80px;}
	header h2 {margin-left: 96px;}
	
	.tab li a.tab1::before,
	.tab li a.tab2::before,
	.tab li a.tab3::before,
	.tab li a.tab4::before,
	.tab li a.tab5::before,
	.tab li a.tab6::before,
	.tab li a.tab7::before{margin-right:10px;width:28px;height:28px;}
	
	.tab li a:hover.tab1::before, .tab li a.active.tab1::before,
	.tab li a:hover.tab2::before, .tab li a.active.tab2::before,
	.tab li a:hover.tab3::before, .tab li a.active.tab3::before,
	.tab li a:hover.tab4::before, .tab li a.active.tab4::before,
	.tab li a:hover.tab5::before, .tab li a.active.tab5::before,
	.tab li a:hover.tab6::before, .tab li a.active.tab6::before,
	.tab li a:hover.tab7::before, .tab li a.active.tab7::before{width:28px;height:28px;margin-right: 7px;}
	
	.con_tit.ico1::before,
	.con_tit.ico2::before,
	.con_tit.ico3::before,
	.con_tit.ico4::before,
	.con_tit.ico5::before,
	.con_tit.ico6::before,
	.con_tit.ico7::before{width:30px;height:30px;vertical-align:-7px;}

	.con_tit{padding-left: 35px;text-indent: -35px;}
	
	.page_img{width:100%}
	.mo_br{display:block;}
}

@media (max-width: 412px){
	.contents {
		padding: 25px;
	}
	header h2 {margin-left: 96px;}
}

@media (max-width: 380px){
	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;
	}
	
}