/* CSS reset */
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

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, font, img, ins, kbd, q, s, samp, small, strike, strong, #sub, #sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, label {margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-family:inherit; vertical-align:baseline; color:#444;}
html { overflow-y:scroll; font-family:NanumSquare, 돋움, Verdana, Geneva, sans-serif; transform: skew(-0.001deg); font-weight: 100;}
/* html5 적용 js 리셋 */
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{ display:block;} 

/*********************************************************************************************/

body { background-color: #fff !important; font-size: 1em !important;}
.wrap { position: relative; margin: 0 auto; width: 1200px;}
.data_tbl { border-spacing: 0; width: 100%; margin: 60px 0px 70px; border-top: 1px solid #000;}
.data_tbl caption { /*height: 0; line-height: 0; text-indent: -9999px; font-size: 0;*/ text-align: left; margin-bottom: 10px; font-size: 1.2em; font-weight: bold; color: #369; }
.data_tbl th { border-bottom: 1px solid #ddd; color: #333; font-weight: bold;  background-color: #eee; border-right: 1px solid #ddd;}
.data_tbl td { border-bottom: 1px solid #ddd; color: #666; font-weight: 400; }
.data_tbl td.thtype { background-color: #e6f2f7;}
.data_tbl th, .data_tbl td { text-align: center; vertical-align: middle; font-size: 1em !important; line-height: 150%; padding: 0.5em 0.5em 0.5em 1em; min-width: 4em;}
.data_tbl th a { text-decoration: none;}
.default_lists { list-style-type: none; text-align: center;}
.default_lists li { list-style: none; display: inline-block;}
a.btn_type { cursor: pointer; display: block;}
.sub40 .btn_confirm { text-align: center;}
.blind { display: none;}

/**************************************************************/
/*.gnb_area {}
.gnb_box { width: 1200px; margin: 0 auto; position: relative;}
	.gnb_box>ul { position: absolute; right: 0; top: 0; text-align: right;}
	.gnb_box>ul>li { display: inline-block; text-align: left; margin-left: 4em;}
	.gnb_box>ul>li>a { line-height: 80px; display: inline-block; height: 80px; text-decoration: none; font-size: 1.2em; font-weight: 400;}
	.gnb_box>ul>li>a:hover { color: #0080c1;}*/

.gnb_area { width: 100%; z-index: 1000000;}
	.gnb_box { width: 1200px; margin: 0 auto; position: relative;}
	.gnb_box>ul { position: absolute; right: 0; top: 0; text-align: right;}
	.gnb_box>ul>li { display: inline-block; text-align: left; margin-left: 2em; vertical-align: top;}
	.gnb_box>ul>li>a { line-height: 80px; display: inline-block; height: 80px; text-decoration: none; font-size: 1.1em; font-weight: 600;}
	.gnb_box>ul>li>a:hover { color: #00aeef;}
	a.depth1 { color: #444; font-size: 1.6em; font-weight: 800; text-decoration: none; line-height: 85px; padding: 0 1em; text-align: left; padding-left: 0.5em;}
	a.depth1:hover { color: #00aeef;}
	.depth2_list { display: none; vertical-align: top; min-height: 150px; position: relative; z-index: 100; text-align: left; padding-top: 1em;}
	.depth2_list>li { list-style: none; display:block; vertical-align: top;}
	a.depth2 { color: #444; font-size: 0.9em; text-decoration: none; line-height: 200%; font-weight: 200; padding-left: 0.6em;}
	a.depth2:hover { color: #00aeef; background: url("./images/sq.gif") no-repeat left center; font-weight: 600;}
	.gnb_sub_box { width: 100%; margin-top: -2px; position: absolute; display: none; height: 210px; background-color: rgba(255,255,255,0.9); z-index: 90; border-bottom: 1px solid #444;}

.main_visual { display: none;}
	.mslide_list { position: relative;}
	.mslide_list p { position: absolute; padding-bottom: 5em; margin: auto; font-size: 2em; color: #444 !important; font-weight: 400;}
	.mslide_list p strong { font-size: 1.2em; line-height: 140%;}
	.mslide_list p strong b { font-weight: 800;}
	.mslide_list p span { display: block; margin-top: 0.5em; color: #444 !important;}
.visual_area { min-width: 1200px; height: 500px; margin: 0 auto; background: #deebf4 url("./images/slide1.jpg") no-repeat center top; border-top: 1px solid #444; border-bottom: 1px solid #444; position: relative;}
.visual_area p { width: 1100px; height: 6em; font-size: 1.8em; color: #fff; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; line-height: 140%; padding-top: 2em;}
.visual_area p b { font-weight: 600;}
.visual_area p span { display: block; color: #fff; line-height: 200%;}
.sub10 .visual_area { background: url("./images/bg_sub10.jpg") repeat-x center top; height: 366px;} 
.sub20 .visual_area { background: url("./images/bg_sub30.jpg") repeat-x center top; height: 366px;} 
.sub30 .visual_area { background: url("./images/bg_sub20.jpg") repeat-x center top; height: 366px;} 
.sub40 .visual_area { background: url("./images/bg_sub40.jpg") repeat-x center top; height: 366px;} 
.sub50 .visual_area { background: url("./images/bg_sub50.jpg") repeat-x center top; height: 366px;} 
.contents_area {}
.contents_area.gray { background-color: #f2f2f2;}
.contents_box { position: relative; margin: 0 auto; max-width: 1200px; padding: 20px 0 40px;}
	.flex { display: flex; flex-flow: row wrap; justify-content: space-between;}
	.chart { width: 1200px; list-style-type: none; margin-bottom: 30px; 
	display: flex; flex-flow: row wrap; justify-content: space-between;
	}
	.chart li { list-style: none; width: 20%; text-align: left; border: 1px solid #ccc; border-radius: 7px; padding: 30px 10px; font-weight: 400; font-size: 1em; margin: 10px 0; background-size: 20% !important; background-color: #fff !important;}
	.chart li.chart01 { background: url("./images/chart01.png") no-repeat right center;}
	.chart li.chart02 { background: url("./images/chart02.png") no-repeat right center;}
	.chart li.chart03 { background: url("./images/chart03.png") no-repeat right center;} 
	.chart li.chart04 { background: url("./images/chart04.png") no-repeat right center;}
	.chart li.chart05 { background: url("./images/chart05.png") no-repeat right center;}
	.chart li.chart06 { background: url("./images/chart06.png") no-repeat right center;}
	.chart li.chart07 { background: url("./images/chart07.png") no-repeat right center;}
	.chart li.chart08 { background: url("./images/chart08.png") no-repeat right center;}
	.chart li.chart09 { background: url("./images/chart09.png") no-repeat right center;}
	.chart li.chart10 { background: url("./images/chart10.png") no-repeat right center;}
	.chart li.chart11 { background: url("./images/chart11.png") no-repeat right center;}
	.chart li.chart12 { background: url("./images/chart12.png") no-repeat right center;}
	.chart li.chart13 { background: url("./images/chart13.png") no-repeat right center;}
	.chart li.chart14 { background: url("./images/chart14.png") no-repeat right center;}
	.chart li.chart15 { background: url("./images/chart15.png") no-repeat right center;}
	.chart li.chart16 { background: url("./images/chart16.png") no-repeat right center;}
	.chart li.chart17 { background: url("./images/chart17.png") no-repeat right center;}
	.chart li.chart18 { background: url("./images/chart18.png") no-repeat right center;}
	.chart .blank { border: none; background-color: rgba(255,255,255,0) !important;}
	.chart2 .blank { border: none; background-color: rgba(255,255,255,0) !important;}
	.chart2 { width: 1200px; list-style-type: none; margin-bottom: 30px; 
	display: flex; flex-flow: row wrap;
	}
	.chart2 li { list-style: none; text-align: center; font-weight: 400; font-size: 1em; margin: 10px 0; background-size: 20% !important;}
	.chart2 li img { display:block; margin: 0 auto; border: 2px solid #ccc; border-radius: 100%; width: 40%; padding: 10%;}
	.chart2 li span { display: block; width: 9em; margin: 1em auto; text-align: center;}

	h3.title { font-size: 1.6em; font-weight: 600; margin-bottom: 0.4em;}
	h3.title+p { font-size: 1.05em; font-weight: 400; line-height: 160%; margin-bottom: 2.5em;}
	h3.title+p:last-child { margin-bottom: 0;}
	p.title_txt { font-size: 1.6em;}
		.blue { color: #4e7f95;}
		.blue b { color: #4e7f95;}
		.red { color: #b58082;}
		.red b { color: #b58082;}
	p.title_txt>strong { font-size: 1.7em; display: block; margin: 0.2em 0 0.7em 0;}
	p.title_txt>strong b {}
	p.sub_txt { line-height: 150%;}
	.text_box { padding: 1em 2% 1em 0; width: 48%; flex-basis: auto;}
	.text_box.gray_bg { background-color: #fafafa; padding: 1.5em 1%;}
	.text_box.wide { width: 100%;}
	#main_links { list-style-type: none; overflow: hidden; width: 1200px; margin: 35px auto;}
	#main_links li { list-style: none; float: left;}
	#main_qlink { margin-top: 50px; list-style-type: none; text-align: center;}
	#main_qlink li { list-style: none; display: inline-block; margin: 4px 2px;}
	#cs_banner { background: url("./images/main_banner_cs.jpg") no-repeat center top; height: 421px; min-width: 1200px; margin: 0 auto 60px; position: relative;}
	#cs_banner a { display: block; width: 10em; margin: 0 auto; position: absolute; left: 0; right: 0; top: 55%; margin: auto; text-decoration: none; color: #fff; font-size: 1.3em; outline: 1px solid #fff; line-height: 2em; height: 2em; padding: 0 1em; text-align: center;}
	#cs_banner a:hover { background-color: rgba(0,0,0,0.5);}
	#location { list-style-type: none; overflow: hidden; margin-top: 50px;}
	#location li { list-style: none; width: 50%; float: left;}
	#location li strong { font-size: 2.2em; font-weight: 600; display: block;}
	#location li span { display: inline-block; margin-right: 1em; font-size: 1.2em; line-height: 160%;}
	#location li iframe { border: 7px solid #dedede; margin: 10px 0 60px; width: 566px; height: 285px;}
	#cert { list-style-type: none; text-align: left; margin: 50px 0 40px;}
	#cert li { list-style: none; display: inline-block; position: relative; width: 210px; height: 300px; overflow: hidden; margin: 20px 10px;}
	#cert li img { width: 100%;}
	img.con_img { display: block; margin: 40px 0; width: 100%; max-width: 1200px;}
	img.con_img2 { display: block; margin: 40px 0; width: 100%; max-width: 600px;}
	img.con_img3 { display: block; margin: 0; width: 100%; max-width: 600px;}
h2.title_conb { font-size: 1.8em; text-align: center; margin-bottom: 20px; width: 100%;}
h2.title_conb span { text-transform: uppercase; background: url("./images/sq1.gif") no-repeat center bottom; height: 73px; display: inline-block; margin-bottom: 25px; font-size: 0.8em;}
h2.title_conb b { font-weight: 600;}
h2.title_conb+p { text-align: center; width: 100%;}

h2.title_page { font-size: 2.4em; text-align: left; padding-top: 40px; width: 100%; margin-bottom: 0.5em;}
h2.title_page span { text-transform: uppercase; background: url("./images/sq2.gif") no-repeat left top; display: inline-block; margin-bottom: 10px; font-size: 0.8em; padding-top: 10px;}
h2.title_page>b { font-weight: 600;}
h2.title_page>b+span { background: none; font-size: 0.7em; padding: 0;}
h2.title_page+p { text-align: left; line-height: 200%; font-size: 1.2em;}
h2.title_page+p>b { font-weight: 600;}
h3.title strong { font-size: 1.5em; display: block; line-height: 180%;}

.tab_menu { text-align: center; width: 80%; margin: 3em auto 4em;}
.tab_menu li { display: inline-block; width: 30%;}
.tab_menu li a { text-decoration: none; line-height: 200%; font-size: 1.6em; display: block; width: 100%; outline: 1px solid #ddd;}
.tab_menu li a:hover { background-color: #aaa; color: #fff;}

.tab_menu_imgs { width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; margin-top: 2em;}
.tab_menu_imgs .box_img { padding: 1em 2% 1em 0; flex-basis: auto;}
.tab_menu_imgs .box_img img { width: 100%;} 
.box_img span { display: block; text-align: center; line-height: 200%; font-size: 1.4em;}

#sub2301 .sub2301 a,
#sub2302 .sub2302 a,
#sub2303 .sub2303 a { background-color: #01a8ec; color: #fff;}

/*#sub32 .img_lists { margin: 0 auto; padding: 0; display: flex; flex-flow: row wrap; justify-content: space-between; list-style-type: none;}
#sub32 .img_lists img { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 5px; list-style: none;}*/


.inform_area { border-top: 1px solid #dddddd; padding-top: 1.5em;}
.inform_box { width: 1200px; margin: 0 auto; text-align: center; padding-bottom: 2em;}
.inform_box p { padding-top: 1em;}
.inform_box p   span { display: inline-block; margin-right: 1.5em; line-height: 150%;} 

#greeting { font-size: 1.2em; line-height: 150%; padding: 0 0 0 33%; background: url("./images/bg_greeting.jpg") no-repeat left top;}
#greeting strong { font-size: 1.4em; font-weight: 400;}
#sln_menus { display: none;}
#btn_allview_close { display: none;}
#btn_allview { position: absolute; top: 1.5em; right: 2%;}

@media all and (max-width:1200px){
	.gnb {}
	.gnb_box { position: relative;}
	#btn_allview { display: none;}
}
@media all and (min-width:1200px){
	.gnb_area { position: fixed; height: 80px; background-color: #fff; border-bottom: 1px solid #ddd;}
	#btn_allview { display: none;}
	.wrap { width: 100%;}
}

@media all and (max-width:600px){
.chart { padding: 1%;}
	.chart li { width: 40%;} 
}

@media all and (min-width:601px) and (max-width:799px){
	
	.chart { padding: 1%;}
	.chart li { width: 27%; background-size: 25% !important;} 
}

@media all and (max-width:799px){
	
	img.con_img { display: block; margin: 20px auto; width: 96%;}
	img.con_img2 { margin: 0; margin: 20px auto; width: 96%;}
	h2.title_page { padding-top: 20px; padding-left: 5px; font-size: 1.4em; margin-bottom: 1.5em;}
	h2.title_page+p { font-size: 0.9em;}
	h3.title { font-size: 1.2em;}
	h3.title+p { font-size: 0.9em; margin-bottom: 2em;}
	.main_visual { display: block; min-width: 360px; display: none;}
	.visual_area { display: none; min-width: 360px; border: none;}
	.sub .visual_area { display: block; width: 100%; margin: 0 auto; height: 10em !important; background-size: cover;}
	.visual_area p { width: 96%; font-size: 1.05em; padding: 0 2%;}
	.contents_box { width: 100%; max-width: 799px; padding: 10px 0;}
	.wrap { width: 100%; max-width: 799px; padding: 0;}
	.text_box.gray_bg { padding: 2em 2%;}
	.text_box { width: 96%; padding: 0 2%; margin-bottom: 2em;}
	.tab_menu_imgs .box_img { width: 30%;}
	p.sub_txt { width: 100%; padding: 0;}
	#main_links { width: 100%; margin: 1em auto;}
	#main_links img { width: 100%;}
	#main_qlink { margin-top: 20px;}
	#main_qlink li { margin: 5px 0; display: block; width: 100%;}
	#main_qlink li img { width: 100%;}
	#cs_banner { width: 100%; height: 150px; max-width: 799px; min-width: 360px; background-size: cover;}
	#cert { margin: 0;}
	#cert li { width: 40%; margin: 1em 5%; height: auto;}
	#location { margin-top: 20px;}
	#location li { width: 96%; padding: 0 2%;}
	#location li iframe { width: 96%;}
	#location li strong { font-size: 1.3em;}
	#location li span { font-size: 0.9em;}
	p.title_txt { font-size: 1.1em;}
	p.title_txt>strong { font-size: 1.3em; padding: 0;}
	.inform_box { width: 100%; font-size: 0.8em;}
	.latest_list { display: inline-block; width: 49%; margin-bottom: 1em;}
	.latest_list img { width: 100%;}
	
	
	.gnb_area { top: 0; width: 100%; z-index: 100;}
	.gnb_area.allview { height: 100%;}
	#greeting { font-size: 1em; line-height: 150%; padding: 0 2% 2em; background: none;}
#greeting strong { font-size: 1.2em; font-weight: 400;}
	#sln_logo { width: 45%; display: block;}
	#sln_logo img { width: 100%;}
	#btn_allview_close { position: absolute; top: 20px; right: 10px; display: block; width: 12%; padding-bottom: 2em; display: none; z-index: 1000;}
	#btn_allview { display: block; position: absolute; top: 23%; bottom: 0; right: 10px; display: block; height: 40px; width: 8%; z-index: 10000;}
	#btn_allview_close>img,
	#btn_allview>img { width: 100%;}
	.gnb_box { width: 100%; position: relative; /*background-color: #315480;*/}
	.gnb { max-width: 1100px; height: 100%; margin: 0 auto; padding: 0; position: relative;}
	.gnb a { color: #444 !important;} 
		.gnb_box>ul { position: relative; padding-top: 1em;}
		.gnb_box>ul>li { display: block;}
		.gnb_box>ul>li>a { line-height: 145%; height: 1.2em;}
		.depth1_list { position: relative; display: none; margin: 1em 0; border-top: 1px dashed #eee;}
		.depth1_list>li { display: block; width: 100%; text-align: left; vertical-align: top; margin-bottom: 1em;}
		a.depth1 { color: #fff; font-size: 1.2em; font-weight: bold; text-decoration: none; line-height: 160%; padding: 0 0 0 0; border-bottom: 1px dashed #ddd; padding-bottom: 5px;}
		a.depth1:hover { color: #ffc600;}
		.depth2_list { display: block; min-height: 50px; padding-bottom: 1em;}
		.depth2_list>li { list-style: none;}
		a.depth2 { color: #fff; font-size: 1em; text-decoration: none; line-height: 160%;}
		a.depth2:hover { color: #ffc600;}
		.csboard { display: none !important;}
		#cs_banner { display: none;}
	.gnb_sub_box { width: 100%; height: 0; position: relative; background-color: #ddd;}
}

@media all and (min-width:800px) and (max-width:1199px){
	html { font-size: 85%;}
	.wrap { width: 100%; max-width: 800px;}
	.gnb_area { position: fixed; height: 65px; background-color: #fff; border-bottom: 1px solid #ddd;}
	.gnb_box { width: 100%; max-width: 800px;}
	.gnb_box>ul { position: absolute; right: 0; top: 0; text-align: right;}
	.gnb_box>ul>li { display: inline-block; text-align: left; margin-left: 0.5em; vertical-align: top;}
	.gnb_box>ul>li>a { line-height: 70px; display: inline-block; height: 70px; text-decoration: none; font-size: 1.2em; font-weight: 400;}
	.gnb_box>ul>li>a:hover { color: #0080c1;}
	a.depth1 { color: #444; font-size: 1.2em; font-weight: 800; text-decoration: none; line-height: 85px; padding: 0 0.5em; text-align: left;}
	a.depth1:hover { color: #0080c1;}
	.depth2_list { display: none; vertical-align: top; min-height: 150px; position: relative; z-index: 100; text-align: center;}
	.depth2_list>li { list-style: none; display:block; vertical-align: top;}
	a.depth2 { color: #444; font-size: 1em; text-decoration: none; line-height: 180%; font-weight: 200; text-align: left;}
	a.depth2:hover { color: #0080c1;}
	.gnb_sub_box { width: 100%; margin-top: -2px; position: absolute; display: none; height: 220px; background-color: #fff; z-index: 90; border-bottom: 1px solid #444;} 
	.tab_menu_imgs .box_img { width: 30%;}
	.chart li { width: 20%; background-size: 25% !important;} 
	#greeting { font-size: 1.2em; line-height: 150%; padding: 0 0 0 33%; background: url("./images/bg_greeting.jpg") no-repeat left top; background-size: 28% 28%;}
#greeting strong { font-size: 1.4em; font-weight: 400;}
	#sln_logo img { width: 200px;}
	#location {}
	#location li iframe { width: 360px;}
	.visual_area { display: none;}
	.sub .visual_area { display: block; width: 800px; min-width: 800px; height: 250px;}
	.sub .visual_area p { width: 98%; padding: 0 1%;}
	.contents_box { width: 98%; margin: 0 1%;}
	#cs_banner { width: 800px; min-width: 800px;}
	#main_links { width: 100%; margin-bottom: 0;}
	#main_links li { width: 50%;}
	#main_links li img { width: 100%;}
	#main_qlink { width: 100%;}
	#main_qlink li { width: 49%;}
	#main_qlink li img { width: 100%;}
	.contents_box.latest_box { justify-content: space-evenly; padding-bottom: 0;}
	.latest_list { display: inline-block; width: 49%; margin-bottom: 1em;}
	.latest_list img { width: 100%;}
	.inform_box { width: 800px;} 
	.main_visual { display: block;}
}