@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */


/* common */
.sub #content{position:relative; padding-top:100px;}

.sub h2{font-weight:800; font-size:40px; letter-spacing:-0.3rem;}
.sub h3{line-height:1.4; font-size:36px; letter-spacing:-0.2rem; COLOR:#222;}
h3.bbsTitle{letter-spacing:0;}

section[class^="area_"] p,
article[class^="area_"] p,
div[class^="area_"] li,
article[class^="area_"] li{line-height:1.7; font-weight:300; color:#555;}

#content .mob_info{padding:5px 0; background:#f1f1f1; font-weight:600; font-size:13px; color:#444;}

.titFont{font-family:'GyeonggiTitleM';}
.wrap_inner{position:relative; width:1150px;}

/* board */
.sub ul.bbsList li .more.active,
.sub ul.bbsList li .more:hover,
.sub ul.bbsList li .more:focus{border-color:#2166d6;}
.sub ul.bbsList li .more em,
.sub ul.bbsList li .subject:hover,
.sub ul.bbsList li .subject:focus{color: #574b97;}
.sub ul.bbsList li .more:before{background:url(../images/content/icon_more.png) no-repeat 0 0;}

.pagination span{color:#e49b9d; border-color:#e49b9d;}
.pagination a:not([class^="btn_"]):hover,
.pagination a:not([class^="btn_"]):focus{background:#f9f1f2; border-color:#f9f1f2;}

/* page navigation */
.area_navigation{position:absolute; top:36px; right:0;}
.area_navigation ul{display:inline-block; overflow:hidden;}
.area_navigation ul li{position:relative; float:left; line-height:1; padding:0 15px; font-size:15px; color:#333;}
.area_navigation ul li img{display:inline-block; position:relative; top:1px; height:12px; vertical-align:top;}
.area_navigation ul li i{display:none;}
.area_navigation ul li:after{content:""; position:absolute; top:5px; right:-3px; width:4px; height:4px; background:#cbcbcb; border-radius:10px;}
.area_navigation ul li:last-child{padding-right:0; font-weight:400; color:#222;}
.area_navigation ul li:last-child:after{background:none;}
.area_navigation ul li:first-child{padding-left:0;}
.area_navigation ul li:first-child img{opacity:0.54;}
.area_navigation ul li:nth-child(2){color:#999;}

/* lnb */
.lnb{position:absolute; overflow:hidden; top:-35px; right:0; z-index:99; width:425px;}
.lnb.fix{position:fixed; top:0;}
.lnb div{text-align:left;}
.lnb em{display:block; width:100%; padding:19px 0; background:#574b97; font-weight:600; font-size:22px; color:#fff;}
.lnb ul{overflow:hidden;}
.lnb ul li a{display:block;}
.lnb ul li.active a{color:#222;}
.lnb em i{display:inline-block; opacity:0.5; margin-left:14px; font-weight:100; font-size:15px;}
.lnb > div > *{padding-left:36px;}
.lnb > div > ul{margin-top:42px;}
.lnb > div > ul li{margin-bottom:14px;}
.lnb > div > ul li:last-child{margin-bottom:0;}
.lnb > div > ul li a{font-weight:300; color:#888;}
.lnb > div > ul li.active a{font-weight:500; color:#222;}

/* sub visual */
.area_subVisual{position:relative; height:243px; background-position:76% 50%; box-shadow:22px 25px 46px 0px rgb(87 75 151 / 5%); background-repeat:no-repeat;}
.area_subVisual > .wrap{position:relative;}
.area_subVisual h2,
.area_subVisual h3{padding-top:98px; font-weight:800; font-size:40px; letter-spacing:-0.3rem;}

/* map default */
.area_map .map_style{padding:0; border:none; border-bottom:1px solid #ccc;}
.area_map .map_style .wrap_controllers{display:none;}

/* 이용약관 */
.area_policy{padding-top:0;}
.area_policy h2{padding:30px 0; font-weight:700; font-size:40px; color:#222; text-align:center;}
.area_policy h3{margin-bottom:20px; font-weight:700; font-size:17px; color:#222;}
.area_policy ul li,
.area_policy p{line-height:1.6; font-weight:300; font-size:15px; color:#666;}
.area_policy p{line-height:1.6; font-size:14px;}
.area_policy ul li{margin-bottom:8px;}
.area_policy ul li:last-child{margin:0;}
.area_policy ul li ul{margin-top:5px; margin-bottom:20px;}
.area_policy ul li ul li{margin-bottom:2px; font-size:15px;}
.area_policy .inr_policy{padding:40px 0; border-bottom:1px solid #ddd;}
.area_policy .inr_policy:last-child{border:none;}

/* history */
.area_history{position:relative; margin:0 0 160px 0;}
.list_history:after{content:""; display:block; position:absolute; top:0; left:50%; width:7px; height:100%; background-color:#f2f2f2; transform:translateX(-50%); border-radius:5px;}
.list_history > li{position:relative; width:45.2%; margin-bottom:229px; margin-left:50%; padding-left:56px;}
.list_history > li:last-child{margin-bottom:0;}
.list_history > li:before,
.list_history > li:after{content:attr(data-before); display:block; position:absolute; top:0; left:0; transition:all .5s ease 0s; transform:translateX(-50%);}
.list_history > li:before{top:14px; z-index:1; width:21px; height:21px; background-color:#f2f2f2; border-radius:50%;}
.list_history > li:after{top:0px; width:0; height:0; background-color:transparent; border-radius:50%;}
.list_history > li.active:before{top:18px; width:13px; height:13px; background-color:#574b97;}
.list_history > li.active:after{width:50px; height:50px; background-color:rgba(242,242,242,.4);}
.list_history > li.left .img_history{position:absolute; top:-13px; left:100%; margin-left:20%;}
.list_history > li.right .img_history{position:absolute; top:-5px; right:100%; margin-right:25%;}
.list_history .year{position:relative; line-height:1; margin-bottom:42px; font-weight:600; font-size:42px; color:#444 !important;}
.list_history .detail > li{position:relative; padding-left:42px;}
.list_history .detail > li + li{margin-top:23px;}
.list_history .detail > li:before{content:""; display:block; position:absolute; top:0.7em; left:0; width:14px; height:5px; background:url('/images/content/icon_dot_gray.gif') repeat-x 0 0; transition:all .5s ease 0s;}
.list_history .detail > li em{display:block; float:left; width:78px; padding-top:3px; font-family:'GyeonggiTitleM'; font-weight:700; font-size:18px;}
.list_history .detail > li p{line-height:1.9; margin-left:78px; color:#666; word-break:break-all; word-wrap:break-word;}
.list_history .detail > li p i{display:block;}
.list_history .detail > li p span{font-size:14px;}
.list_history > li.active .detail > li:before{background-image:url('/images/content/icon_dot.gif');}
 .list_history > li:not(.right){margin-left:0;padding-left:0;margin-right:50%;padding-right: 4.8%;text-align:right;}
.list_history > li:not(.right):before,
.list_history > li:not(.right):after{left:auto; right:0; transform:translateX(50%);}
.list_history > li:not(.right) .detail > li{padding-left:0;padding-right: 0;}
.list_history > li:not(.right) .detail > li:before{left:auto; right:0;}
.list_history > li:not(.right) .detail > li em{float:right;padding-right: 35px;}
.list_history > li:not(.right) .detail > li p{margin-left:0;margin-right: 118px;}

/* 인사말 */
.area_about{padding-bottom:110px;}
.greetings_con > div{display:flex; justify-content:space-between;}
.greetings_con 
 .greetings_item.item02{margin-top:-50px; flex-direction:row-reverse;}
.greetings_con > div h3{position:relative; left:-1px; margin-top:100px;}
.greetings_con > div h3 + p{margin-top:25px;}
.greetings_con .greetings_item.item02 h3{margin-top:170px;}
.greetings_con .greetings_item > div{max-width:512px;}
.greetings_con > div em{display:block; margin-top:70px; font-weight:500; color:#222;}
.greetings_con > div em img{display:inline-block; position:relative; top:-2px; height:35px; margin-left:15px; vertical-align:middle;}
.about_list_con{margin:100px 0; padding:100px 0; background:#f9f9f9;}
.list_basic > li > h5{position:relative; line-height:1; padding-left:11px; font-weight:300; font-size:21px; color:#222; letter-spacing:-0.02rem;}
.list_basic > li > h5:before{content:""; display:inline-block; position:absolute; top:0; left:0; width:4px; height:100%; background:#222;}
.list_basic > li > h5 + *{margin-top:20px;}
.list_basic > li{margin-bottom:38px;}
.list_basic > li > .list_background li{position:relative; width:-webkit-calc(50% - 45px); width:calc(50% - 47px); margin-bottom:15px; padding:19px 20px; background:#fff;}
.list_basic > li > .list_background{display:flex; justify-content:space-between; flex-wrap:wrap;}
.list_basic > li > *{padding-left:11px;}
.list_basic > li > .list_background li:after{content:""; position:absolute; opacity:0.15; top:0; left:0; width:100%; height:100%; box-shadow:11px 14px 25px 0px rgb(87 75 151);}
.list_basic > li > .list_background li:nth-child(4)~li{margin-bottom:0;}
.list_history .left .detail > li p i b{float:right; margin-right:0; margin-left:10px;}
.list_history .detail > li p i b{display:inline-block; margin-right:10px; font-family:'GyeonggiTitleM'; font-weight:300;}
.list_history > li > *{opacity:0; transition:all 0.7s ease-out 0s; transform:translateY(60px);}
.list_history > li.active > *{opacity:1; transform:translateY(0px);}

/* 오시는 길 */
.map-container{margin-top:25px;}
.map-container dl{display:flex; justify-content:space-between; flex-wrap:wrap;}
.map-container dt h5{font-weight:300; font-size:19px; color:#111;}
.map-container dd:not(:last-child){margin-right:5%; padding-bottom:20px;}
.map-container dt{margin-bottom:10px;}

/* 주요사업 */
.list_image{display:flex; flex-wrap:wrap;}
.list_image li{margin-right:19px; text-align:center; max-width:270px; flex-basis:0; flex-grow:1;}
.list_image li p{margin-top:15px; font-weight:500; font-size:17px; color:#222; letter-spacing:-0.04rem;}
.list_image li:nth-child(4) ~ li{margin-top:37px;}
.list_image li:nth-child(4n){margin-right:0;}
.list_text > li{margin-bottom:7px;}
.list_text > li:last-child{margin-bottom:0;}
.list_text > li > ul{margin:5px 0 21px 18px;}
.list_text > li > ul li{position:relative; margin-bottom:3px; font-weight:300; color:#666;}
.list_text > li > ul li:before{content:""; display:inline-block; position:relative; width:4px; height:4px; margin-right:6px; background:#574b97; border-radius:10px; vertical-align:middle;}
.list_text > li p{font-weight:400; color:#333;}
.list_text > li p i{font-weight:300;}

/* 후원안내 */
ul.list_icon img{display:block; height:75px; margin:0 auto;}
.list_icon{display:flex; justify-content:space-between;}
.list_icon > li{width:22%; padding:59px 0; border:4px solid #e6e6e6; text-align:center;}
.list_icon > li h6{margin-top:14px; font-weight:300; font-size:18px; color:#222;}
#content table.table thead th{padding:15px 0; background:none; font-weight:500; color:#222;}
#content table.table{border-top:3px solid #574b97;}
#content table.table tbody td{padding:14px 0; font-weight:300; font-size:15px; color:#666;}
#content table.table thead tr:last-child th{border-bottom:1px solid #b1b1b1;}
.list_text > li strong,
.list_text > li strong + p{display:inline-block;}
.list_text > li strong{margin-right:5px; font-weight:600; color:#222;}
.list_text > li strong + p{font-weight:300; color:#666;}
.sub .customer_con.wrap{padding-right:0 !important;}

/* 조직도 */
.area_chart .tabs{display:inline-flex; position:relative; z-index:1; margin-bottom:70px; border:3px solid #dfdfdf; border-radius:81px;}
.area_chart .tabs li{float:left; cursor:pointer;}
.area_chart .tabs li.active{color:#fff;}
.area_chart .tab_container{background:#FFF; clear:both;}
.area_chart .tab_content{display:none;}
.area_chart .tab_container .tab_content ul{width:100%; margin:0px; padding:0px;}
.area_chart .tab_container .tab_content ul li{padding:5px; list-style:none;}
.area_chart .tabs li{position:relative;padding:10px 30px;font-weight:300;font-size:19px;color:#999;border-radius:100px;}
.area_chart .tabs li.active:before{background:#574b97;}
.area_chart .tabs li:before{content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background:transparent; transform:scale(1.1); border-radius:100px;}
.area_chart .tab_content img{width:100%; max-width:1150px;}

@media screen and (max-width:1919px){
	.sub #content .wrap{padding-right:100px;}
	.lnb{width:245px;}
	.wrap_inner{width:1080px;}
	.lnb em{padding:16px 0; font-size:20px;}
	.lnb > div > *{padding-left:26px;}
	.list_image{flex-wrap:nowrap;}
	.list_image li img{width:100%;}
	.business_item.item02 .list_image{display:flex; flex-wrap:wrap;}
	.business_item.item02 .list_image li{width:23%; flex-basis:auto;}
	.business_item.item02 .list_image li:nth-child(4n){margin-right:0;}
	.business_item.item02 .list_image li:nth-child(4) ~ li{margin-top:37px;}
}

@media screen and (max-width:1480px){
	.sub #content .wrap{padding-right:30px;}
	.wrap_inner{width:1000px;}
	.greetings_con .greetings_item > div{margin-right:50px;}
	.greetings_con .greetings_item > img{width:45%;}
	.greetings_con .greetings_item.item02 > div{margin-right:0; padding-left:100px; max-width:none;}
	.list_history > li:not(.right){padding-right:44px;}
	.area_chart .tabs{margin-bottom:50px;}
	.map-container dl{display:flex; justify-content:space-between; flex-wrap:nowrap;}
	.map-container dd:not(:last-child){margin-right:0;}
}

@media screen and (max-width:1365px){
	.sub h3{font-size:30px;}
	.lnb{top:0; width:100%; background:#574b97; border-bottom:1px solid #ddd;}
	.lnb em{display:none;}
	.lnb > div > *{padding-left:0;}
	.lnb > div > ul{display:flex; margin-top:0;}
	.lnb > div > ul li{margin-bottom:0;}
	.lnb > div > ul li a{padding:16px 13px;}
	.lnb > div > ul li.active a{opacity:1; font-weight:500; color:#fff;}
	.lnb > div > ul li a{opacity:0.5; font-weight:300; color:#fff;}
	.lnb > div > ul li:first-child a{padding-left:0;}
	.wrap_inner{width:auto;}
	.sub #content .wrap{padding-right:0;}
	.sub #content{padding-top:140px;}
	.list_history > li:not(.right){text-align:left;}
	.list_history > li:not(.right) .detail > li em,
	.list_history .left .detail > li p i b{float:left;}
	.list_history > li:not(.right) .detail > li:before{right:auto; left:0;}
}

@media screen and (max-width:1280px){
	.area_navigation{top:30px; right:0;}
}

@media screen and (max-width:1023px){
	.sub #content{padding-top:120px;}
	.sub h3{font-size:28px;}
	.area_subVisual{background-position:0 50%;}
	.greetings_con > div{align-items:flex-start;}
	.greetings_con > div h3 br{display:none;}
	.greetings_con > div h3 + p br{display:none;}
	.greetings_con > div h3{margin-top:10px;}
	.greetings_con .greetings_item.item02 > div{padding-left:10%;}
	.greetings_con .greetings_item.item02{margin-top:0;}
	.greetings_con .greetings_item.item02 h3{margin-top:60px;}
	.greetings_con > div em{margin-top:40px;}
	.greetings_con > div em img{height:24px;}
	.about_list_con{margin:70px 0; padding:70px 0;}
	.list_history > li{margin-bottom:79px; padding-left:38px;}
	.list_history > li:after{width:40px; height:40px;}
	.list_history > li:before{top:12px; width:15px; height:15px;}
	.list_history > li .year{font-size:32px;}
	.list_history .detail > li + li{margin-top:8px;}
	.list_history .detail > li:before{top:0.6em;}
	.list_history .detail > li em{padding-top:0;}
	.list_history > li{width:44.6%; margin-bottom:129px;}
	.list_history > li .img_history{width:70%;}
	.area_chart .tabs li{font-size:16px;}
	.area_chart .tabs{margin-bottom:40px;}
	.map-container dl{flex-direction:column;}
	.map-container dt{margin-bottom:3px;}
	.list_icon > li{padding:29px 0;}
}

@media all and (max-width:840px){
	.list_image li p{margin-top:8px; font-size:14px;}
	.list_image li{margin-right:7px; flex-basis:48%;}
	.list_image{flex-wrap:wrap;}
	.list_image li:nth-child(2n){margin-right:0;}
	.list_image li:nth-child(2) ~ li{margin-top:15px;}
	.business_item.item02 .list_image li{width:auto; flex-basis:48%;}
	.list_image li{max-width:none;}
	.business_item.item02 .list_image li:nth-child(4) ~ li{margin-top:20px;}
	.list_text > li > ul li{text-indent:-10px;}
}

@media all and (max-width:767px){
	.sub #content{padding-top:70px;}
	.sub h3{font-size:22px; letter-spacing:-0.1rem;}
	.lnb{z-index:50;}
	.lnb > div{margin:0; padding:0; overflow-x:scroll; overflow-y:hidden;}
	.lnb ul{display:table; margin:0 auto; margin-top:0;}
	.lnb ul li{display:table-cell; float:none; padding:0 0; white-space:nowrap;}
	.lnb > div > ul li a{padding:13px 10px;}
	.lnb > div > ul{margin-left:15px;}
	.area_policy{margin-top:20px !important;}
	.area_policy h2{padding:0px 0; font-weight:600; font-size:20px;}
	.area_policy h3{margin-bottom:10px; font-weight:600; font-size:14px;}
	.area_policy ul li{margin-bottom:5px;}
	.area_policy ul li ul{padding-left:10px;}
	.area_policy ul li ul li{font-size:13px;}
	.area_policy ul li,
	.area_policy p{line-height:1.7; font-size:13px;}
	.area_policy .inr_policy{padding:25px 0;}
	.area_subVisual{height:170px; background-size:cover; background-position:38% 50%;}
	.area_subVisual h2,
	.area_subVisual h3{padding-top:78px; font-size:27px;}
	.area_navigation{top:16px;}
	.area_navigation ul li{padding:0 11px; font-size:13px;}
	.area_navigation ul li img{height:11px;}
	.greetings_con .greetings_item.item01{flex-direction:row-reverse;}
	.greetings_con > div{flex-direction:column !important;}
	.greetings_con > div h3 + p{margin-top:15px;}
	.greetings_con .greetings_item > img{width:100%; margin-top:20px;}
	.greetings_con .greetings_item.item01 > img{align-self:self-end;}
	.greetings_con .greetings_item.item02{}
	.greetings_con .greetings_item.item02 > div{width:100%; padding-left:0;}
	.greetings_con > div em{margin-top:30px; font-weight:600; font-size:13px;}
	.greetings_con > div em img{top:-4px; height:24px; margin-left:10px;}
	.greetings_con .greetings_item.item01 > img,
	.greetings_con .greetings_item.item02 h3{display:none;}
	.greetings_con > div.item02 h3 + p{margin-top:12px;}
	.about_list_con{margin:50px 0; padding:50px 0;}
	.list_basic > li > h5{font-size:18px;}
	.list_basic > li > h5 + *{margin-top:14px;}
	.area_about p{line-height:1.8;}
	.list_basic > li{margin-bottom:30px;}
	.list_basic > li > .list_background li{width:100%; margin-bottom:4px; padding:12px 12px; font-weight:400;}
	.list_basic > li > .list_background li:nth-child(4)~li{margin-bottom:4px;}
	.list_history{margin-left:20px;}
	.list_history:after{left:1px; width:5px;}
	.list_history > li{width: 94%;margin-left:0 !important;padding-left:32px !important;}
	.list_history > li .year{margin-bottom:25px; font-size:26px;}
	.list_history .detail > li{padding-left:28px !important;}
	.list_history .detail > li:before{width:14px;}
	.list_history .left .detail > li p i b{margin-right:10px; margin-left:0;}
	.list_history > li.active:before{top:5px;}
	.list_history > li:after{top:-14px !important;}
	.list_history > li:not(.right):before{right:auto; left:-6px; transform:none;}
	.list_history > li:not(.right):after{right:auto; left:-24px; transform:none;}
	.list_history > li{margin-bottom:49px;}
	.area_about{padding-bottom:20px;}
	.list_history > li .img_history{display:none !important;}
	.area_chart .tabs li{padding:7px 11px; font-size:14px;}
	.area_chart .tabs li:last-child{padding-right:15px;}
	.area_chart .tabs li.active{padding:7px 11px !important;}
	.chart_con{text-align:center;padding-top: 20px;}
	.map-container{margin-top:15px;}
	.map-container dt h5{font-size:17px;}
	.map-container dd:not(:last-child){padding-bottom:13px;}
	.area_location iframe{height:270px;}
	ul.list_icon img{height:43px;}
	.list_icon{justify-content:flex-start; flex-wrap:wrap;}
	.list_icon > li{width:auto; margin-right:6px; flex-basis:46%;}
	.list_icon > li:nth-child(2n){margin-right:0;}
	.list_icon > li:nth-child(2) ~ li{margin-top:7px;}
	#content table.table tbody td{font-size:13px;}
	#content table.table tbody tr td:first-child{width:25%;}
	.list_history > li:not(.right){padding-right:0;}
	.list_history > li:not(.right) .detail > li p{margin-right:0;}
	.list_history > li:not(.right) .detail > li em{float:right; padding-right:0;}

}