@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

div#content.sub{min-height:300px;padding:100px 0;}

p.mob_info{margin-top:10px; padding:5px; background:#f6f6f6;}
/* 서브비쥬얼 */
.area_subVisual{position:relative; height:400px; padding:0 15px; background-size:cover; background-position:80% 50%; display:flex; justify-content:center; align-items:center; text-align:center; color:#fff;}
.area_subVisual h2{font:300 40px 'GongGothic'; padding-bottom:6px;}
.area_subVisual p{font-size:18px;}

.sub_title{margin-bottom:60px;}
.sub_title h2{text-align:center; color:#303030; font:300 35px 'GongGothic';}

/* lnb */
.lnb {width:100%; height:70px; text-align:center;}
.lnb ul {margin:0 auto; width:100%; height:100%; padding-top:10px;}
.lnb ul li {display:inline-block; padding:0 28px; line-height:40px;}
.lnb ul li:first-child {padding-left:0 ;background:none}
.lnb ul li:last-child{padding-right:0;}
.lnb ul li a {font-weight:700; font-size:16px; color:#4b93d6;transition: 0.2s;}
.lnb ul li:hover a,
.lnb ul li a.on {display:block; padding:0 15px; background:#4b93d6; color:#fff; border-radius:20px; box-sizing:border-box;}


div#content.sub article{padding-bottom:120px;}
div#content.sub article:last-of-type{padding-bottom:0;}
div#content.sub article > .tit_box{margin-bottom:20px;}
div#content.sub article > .tit_box > h3{font:300 28px 'GongGothic'; text-align:center; word-break:keep-all; }
div#content.sub article > .tit_box > span{font:300 30px 'GongGothic'; margin-bottom:30px; padding:10px 20px; background:#303030; color:#fff;}
div#content.sub article > p{margin-bottom:50px; font-size:18px; font-weight:300; text-align:center;}
div#content.sub article > p > b{font-weight:500;}

div#content.sub .tit_box > span.tltsty {display:block; width:100%; text-align:center; color:#303030; font:300 35px 'GongGothic'; background:none; color:#000; margin-bottom:40px; padding:auto;}

/* area_about */
.area_about{display:flex; justify-content:center; }
.area_about > div{width:50%;}
.area_about .img_box{background:url(/images/content/about_tit.jpg) no-repeat 50%; background-size:contain;}
.area_about .txt_box{padding:20px 0;}
.area_about .txt_box h3{font:300 24px 'GongGothic'; line-height:1.2; margin-bottom:20px; color:#535353;}
.area_about .txt_box h3 span{font-size:36px; color:#3c82c4;}
.area_about .txt_box p{font-size:18px; font-weight:300; word-break:keep-all; line-height:1.72; padding-bottom:20px;}
.area_about .txt_box p > b{font-weight:500;}
.area_about .txt_box > span{display:block; text-align:right; padding-top:20px;}
.area_about .txt_box > span em{font:400 32px 'Nanum Pen Script'; margin-left:6px;}

/* area_org-chart */
.area_org-chart{position:relative; }
.area_org-chart p{position:relative; margin:0 auto; display:table; width:150px; height:150px; border-radius:50%; border:1px solid #d3d3d3; margin-bottom:200px;}
.area_org-chart p::after{position:absolute; content:''; display:block; top:100%; left:50%; transform:translateX(-50%); width:1px; height:100px; background:#d3d3d3;}
.area_org-chart b{display:table-cell; vertical-align:middle; text-align:center; font-size:22px;}
.area_org-chart > ul{width:90%; margin:0 auto;}

.area_org-chart .depth2 strong{display:block; border:1px solid #d3d3d3; background:#ededed; text-align: center; padding:15px 0;}
.area_org-chart .depth2{position:relative; display:flex;}
.area_org-chart .depth2::before{position:absolute; content:''; display:block; top:-100px; left:50%; transform:translateX(-49.3%); width:75.5%; height:1px; background:#d3d3d3;}
.area_org-chart .depth2 > li{position:relative; width:25%; padding-right:2%;}
.area_org-chart .depth2 > li::before{position:absolute; content:''; display:block; bottom:100%; left:50%; transform:translateX(-50%); width:1px; height:100px; background:#d3d3d3;}
.area_org-chart .depth2 > li:last-child{padding-right:0;}
.area_org-chart .depth2 > li > ul{border:1px solid #d3d3d3; border-top:none; background:#fff; line-height:1.72; text-align:left; padding:20px 40px; box-sizing:border-box;}
.area_org-chart .depth2 > li > ul > li{position:relative; text-indent:10px;}
.area_org-chart .depth2 > li > ul > li::before{content:''; display:block; position:absolute; width:2px; height:2px; background:#d3d3d3; top:12px; left:0;}

/* area_location */
.area_location .root_daum_roughmap{width:100%; margin-bottom:30px;}

.area_location .txt_box{width:100%; overflow:hidden;}
.area_location .txt_box h3{font:300 30px 'GongGothic'; float:left;}
.area_location .txt_box table{text-align:left; float:right; width:50%;}
.area_location .txt_box table tr th{position:relative; width:80px; vertical-align:top; border-bottom:solid 10px #fff;}
.area_location .txt_box table tr th::before{content:''; display:block; width:20px; height:20px; position:absolute; left:-33px; top:0; background-repeat:no-repeat; background-size:contain; background-position:50%;}
.area_location .txt_box table tr:nth-child(1) th::before{background-image:url(/images/main/icon_form01.png);}
.area_location .txt_box table tr:nth-child(2) th::before{background-image:url(/images/main/icon_form03.png);}
.area_location .txt_box table tr:nth-child(3) th::before{background-image:url(/images/main/icon_form04.png);}
.area_location .txt_box table tr td{word-break:keep-all;}

/* area_guidance */
.area_guidance section{padding:60px 0;}
.area_guidance section:nth-of-type(2n+1){background:#f2f2f2;}
.area_guidance section h3{font:300 24px 'GongGothic'; text-align:center; margin-bottom:10px;}
.area_guidance section table{width:96%; margin:0 auto;}
.area_guidance section table tr td{position:relative; overflow:hidden; width:33.3333%; height:0; padding-bottom:20%; border:solid 3px #ebebeb; box-sizing:border-box; background-size:contain; backdrop-filter:blur(100px);}
.area_guidance section table tr td img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:auto; height:100%; z-index:10;}
.area_guidance section table tr td div{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; opacity:0.5; filter:blur(1px); background-size:200%; background-position:50%; z-index:1;}

/* area_field */
.area_field{}
.area_field section{position:relative; width:90%; height:0; padding-bottom:90%; margin:0 auto;}
.area_field section > .center{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url(/images/content/field_bg.png) no-repeat 50%; background-size:contain; width:400px; height:400px; border-radius:50%; display:flex; justify-content:center; align-items:center; text-align:center; font:300 28px/1.2 'GongGothic'; color:#fff;}
.area_field section > span{position:absolute; width:180px; height:180px; border-radius:50%; display:flex; justify-content:center; align-items:center; text-align:center; font:500 21px/1.2 'GongGothic'; box-sizing:border-box; border:solid 5px #a5d8ff; color:#fff; transition:0.6s; background-size:cover; background-repeat:no-repeat; background-position:50%;}
.area_field section .deg0{top:0; left:50%; transform:translate(-50%, 0%); background-image:url(/images/content/field01.jpg);}
.area_field section .deg30{top:15%; left:70%; transform:translate(-50%, -50%); background-image:url(/images/content/field02.jpg);}
.area_field section .deg60{top:30%; left:85%; transform:translate(-50%, -50%); background-image:url(/images/content/field03.jpg);}
.area_field section .deg90{top:50%; right:0; transform:translate(0, -50%); background-image:url(/images/content/field04.jpg);}
.area_field section .deg120{bottom:15%; left:85%; transform:translate(-50%, -50%); background-image:url(/images/content/field05.jpg);}
.area_field section .deg150{bottom:0; left:70%; transform:translate(-50%, -50%); background-image:url(/images/content/field06.jpg);}
.area_field section .deg180{bottom:0; left:50%; transform:translate(-50%, 0); background-image:url(/images/content/field07.jpg);}
.area_field section .deg210{bottom:0; right:70%; transform:translate(50%, -50%); background-image:url(/images/content/field08.jpg);}
.area_field section .deg240{bottom:15%; right:85%; transform:translate(50%, -50%); background-image:url(/images/content/field09.jpg);}
.area_field section .deg270{top:50%; left:0; transform:translate(0, -50%); background-image:url(/images/content/field10.jpg);}
.area_field section .deg300{top:15%; right:70%; transform:translate(50%, -50%); background-image:url(/images/content/field11.jpg);}
.area_field section .deg330{top:30%; right:85%; transform:translate(50%, -50%); background-image:url(/images/content/field12.jpg);}

@media all and (max-width:1280px){
}

@media all and (max-width:1080px){
	div#content.sub article{padding-bottom:100px;}

	.area_about .tit_box{margin-right:4%;}
	.area_about .txt_box p{font-size:16px;}

	.area_org-chart .depth2 > li > ul{padding:20px 20px;}

	.area_field section{height:auto; padding-bottom:0; display:flex; justify-content:space-around; flex-wrap:wrap;}
	.area_field section > .center{display:none;}
	.area_field section > span[class^="deg"]{position:static; margin-bottom:25px; transform:translate(0, 0);}
	.area_field section > span:last-child{margin-bottom:0;}
}

@media all and (max-width:767px){
	div#content.sub{padding:50px 0;}
	.area_subVisual{height:300px;}
	.area_subVisual h2{font-size:25px;}
	.sub_title h2{font-size:22px;}

	div#content.sub .tit_box > span.tltsty {font-size:22px;}

	div#content.sub article{padding-bottom:60px;}
	div#content.sub article > .tit_box > span{font-size:24px;}

	.area_about{flex-direction:column;}
	.area_about > div{width:100%;}
	.area_about .img_box{height:0; padding-bottom:100%;}
	.area_about .txt_box h3{text-align:center; font-size:18px;}
	.area_about .txt_box h3 span{font-size:24px;}
	.area_about .txt_box p{text-align:center;}

	.area_org-chart .depth2 > li > ul{padding:10px 10px;}

	.area_guidance section{padding:30px 0;}
	.area_guidance section table tr{display:flex; flex-direction:column; align-items:center;}
	.area_guidance section table tr td{width:90%; height:0; padding-bottom:60%;}
	.area_guidance section h3{font-size:21px;}
}

@media all and (max-width:600px){
	.lnb{overflow-x:auto; width:100%; overflow-y:hidden;}
	.lnb ul{display:table; margin:0 auto; table-layout:fixed; overflow-y:hidden;}
	.lnb ul li{display:table-cell; padding:0 15px; vertical-align:middle;}
	.lnb ul li a{display:block; padding:0; font-size:15px; white-space:nowrap;}
	.lnb ul li:first-child{padding-left:15px;}
	.lnb ul li:last-child{padding-right:15px;}

	.area_about .txt_box p br{display:none;}

	.area_org-chart > ul{width:100%;}
	.area_org-chart p{margin-bottom:20px;}
	.area_org-chart p::after{display:none;}
	.area_org-chart .depth2::before{display:none;}
	.area_org-chart .depth2{flex-direction:column;}
	.area_org-chart .depth2 > li{width:100%; margin-bottom:20px;}
	.area_org-chart .depth2 > li::before{height:20px;}
	.area_org-chart .depth2 > li:last-child{margin-bottom:0;}
	.area_org-chart .depth2 > li > ul >li{width:100px; margin:0 auto;}

	.area_location .txt_box h3{clear:both; margin-bottom:30px;}
	.area_location .txt_box table{clear:both; width:100%;}
	.area_location .txt_box table tr th::before{left:0;}
	.area_location .txt_box table tr th{text-indent:30px; white-space:nowrap; padding-right:10px;}
	.area_location .txt_box table tr td{word-break:break-all;}
}


@media all and (max-width:500px){
	.lnb ul{table-layout: auto;}
}

@media all and (max-width:420px){
}