@import url(/eng/css/font.css);

/*** Layout ***/
html,body {height:100%;-webkit-font-smoothing:antialiased;color:#888}

#wrap {position:relative;height:100%}
#header {position:fixed;top:0;left:0;z-index:4;height:100%;max-height:100%}

#header .logo {height:100px;background:#fff;text-align:center}
#header #nav {position:relative;width:350px;height:100%;max-height:100%;background:#f99d32}
#header #nav .gnb {height:35px;background:#e4e4e4}
#header #nav .nav_bg_org {height:100%;padding-top:25px;background:#f99d32}
#mobile_nav {display:none;border-bottom: none;cursor: pointer}
#container {position:relative;z-index:2;height:100%;margin-left:350px}
footer {margin-top:20px;margin-left:30px}
.nomargin { margin: 0 !important;}

/* main */
#container .img_main {position:relative;width:100%;height:100%}

/* sub */
.title_1dpt {position:fixed;top:0;left:350px;z-index:3;width:100%;height:100px;background:url(/eng/img/common/bg_title1dpt.png) no-repeat 0 0 #eaeaea}
#container #content_area {padding-top:100px;padding-bottom:10px}
#container #content {width:auto;max-width: 840px;margin: 0 8.59684%}

.btn { color: #f99d32; }
.btn.brown { color: #be6e45; }
.btn:hover { color: #000; }

/*** style ***/
/* header */
.mobile_menu {display:none;height:0}
#header .logo img {width: 250px;margin-top:39px;}
#header #nav .gnb {position:relative}
#header #nav .gnb ul {position:absolute;left:50%;margin-left:-92px}
.gnb ul li {float:left;font-size:0.85em;line-height:35px;text-align:center}
.gnb ul li a {padding:6px 9px;background:url(/eng/img/common/line_top.gif) 100% 50% no-repeat;color:#888}
.gnb ul li a:hover,.gnb ul li a:active,.gnb ul li a:focus{color:#555}
.gnb ul li .end {background:none;padding-right:0}

.lnb > li > a {padding-left:30px;display:block;height:35px;font-size:1em;font-weight:700;color:#fff4e8;line-height:35px}
.lnb > li > a > .ico_act {visibility:hidden;margin-left:8px}
.lnb > li > a.active > .ico_act {visibility:visible}
.lnb > li > a:hover .ico_act,.lnb > li > a:active .ico_act,.lnb > li > a:focus .ico_act {visibility:visible}
.lnb > li > .lnb_2dpt {display:none;margin-bottom: 5px;}
.lnb > li > .lnb_2dpt > li > a {padding-left:45px;display:block;height:30px;font-size:0.95em;color:#fff4e8;line-height:30px}
.lnb > li:last-child { margin-top: 20px; opacity: 0.7;}
.lnb > li:last-child:hover { opacity: 1; }
.lnb_2dpt > li > .active {background:#ff8034}
.lnb_2dpt > li > a:hover, .lnb > li > .lnb_2dpt > li > a:active, .lnb > li > .lnb_2dpt > li > a:focus {background:#f96e1a}


#footer .sns li {float:left;line-height:0}
#footer .sns a {display:block;height:26px;padding:5px 15px 5px 0;line-height:26px}
#footer .sns a img{vertical-align:middle;opacity:0.6;filter: alpha(opacity=60)}
#footer .sns a:hover img,.sns a:active img,.sns a:focus img{opacity:1;filter:alpha(opacity=100)}
#footer .copyright {clear:both;float: left;margin-top:10px;font-size:0.750em;color:#ffcb8d;line-height:16px}

/* main */
#container .img_main .copy_main {position:absolute;top:20%;left:9%;padding-right: 9%;z-index:2;width:auto;font-family:'open_sansbold';font-size:2.626em;color:#514c4c;line-height:1.3em;letter-spacing:-1.3px;-webkit-font-smoothing: antialiased}
#container .img_main .copy_main p span { color:#f99d32; }
#container .img_main .img_slogan {position:absolute;top:10%;right:7.5%;z-index:2;width:200px;}
#container .img_main .bg_area {width:100%;height:100%;background:url(/eng/img/main/img_main.jpg) 50% 100%;background-size:100%; background-repeat: no-repeat;}
#container .img_main .bg {display:none}
#container .box_main span {display:block}
#container .box_main .info_area {display:table-cell;height:100%;vertical-align: middle;*margin-top:23.8%} /*ie7 이하 일 때의 수직 중앙 정렬 연구*/
#container .box_main .title {margin-top:20px;font-size:1.313em;font-weight:bold}
#container .box_main .txt {margin:6px 15% 0 15%;font-size:0.813em;line-height:1.250em}
.box_main .box1 {background:#ff7633}
.box_main .box2 {background:#97b032}
.box_main .box3 {background:#b05c32}
.box_main .box1 .title{color:#ffe4d6}
.box_main .box1 .txt {color:#ffc8ad}
.box_main .box2 .title{color:#eaefd6}
.box_main .box2 .txt {color:#d5dfad}
.box_main .box3 .title{color:#efded6}
.box_main .box3 .txt {color:#dfbead}
.box_main .box1:hover,.box_main .box1:active,.box_main .box1:focus {background-color:#ff6528}
.box_main .box1:hover .title,.box_main .box1:active .title,.box_main .box1:focus .title {color:#fff2eb}
.box_main .box1:hover .txt,.box_main .box1:active .txt,.box_main .box1:focus .txt {color:#ffddcc}
.box_main .box2:hover,.box_main .box2:active,.box_main .box2:focus {background-color:#86a127}
.box_main .box2:hover .title,.box_main .box2:active .title,.box_main .box2:focus .title {color:#f5f7eb}
.box_main .box2:hover .txt,.box_main .box2:active .txt,.box_main .box2:focus .txt {color:#e0e7c2}
.box_main .box3:hover,.box_main .box3:active,.box_main .box3:focus {background-color:#a14c27}
.box_main .box3:hover .title,.box_main .box3:active .title,.box_main .box3:focus .title {color:#f7efeb}
.box_main .box3:hover .txt,.box_main .box3:active .txt,.box_main .box3:focus .txt {color:#dfbead}


/* sub */
.title_1dpt h2 {height:68px;margin-left:100px;padding-top:46px;background:url(/eng/img/common/bg_content_arrow.png) no-repeat 0 100%;font-family:'open_sansbold';font-size:1.250em;color:#8f8f8f}
#content .section_info {float: left;width: 100%;padding: 80px 0 100px;border-bottom:#ccc 1px solid}
.section_info h3{padding-bottom: 40px; font-size:3.2em;color:#1b1b1b}
.section_info h4{margin-bottom:8px;font-size:1.188em;color:#f99d32;line-height:1.375em}
.section_info h5{margin-bottom:10px;font-size:1em;color:#474747;}
.section_info h6{margin-bottom:5px;font-size:1em;color:#be6e45;font-weight:bold;line-height:1.250em}
.section_info img {display:block;}
.section_info .paragraph {margin-top:40px;line-height:1.500em}
.section_info .paragraph_sub {margin-top:25px;line-height:1.500em}
.section_info p {margin-top:25px;line-height:1.500em}
.section_info .first {margin-top:0}
.section_info em {font-family:'open_sansbold'}
.section_info .box_info_gn .title {color: #97b032}
.section_info .box_txt {margin-top:15px}

.list_history { padding-top: 10px; }
.list_history li{background:url(/eng/img/common/icon_dot_log.gif) repeat-y 15px 0}
.list_history li h4 {background:url(/eng/img/common/icon_circle.png) no-repeat 9px 0;margin-bottom: 50px;}
.list_history li h4 .title {display: block;margin-left:25px;margin-top: -7px;font-family:'open_sansbold';font-size:1.5em;vertical-align: top}
.list_history li h4 .title::after { content: "▼"; font-size: 13px; position: absolute; margin-left: 5px; }
.list_history li h4.accordion.active .title::after { content: "▲"; color: #ccc; }
.list_history li ul {margin-bottom:35px; margin-top: -5px;}
.list_history li:last-child ul { margin-bottom: 0;}
.list_history li ul li {padding:0 0 15px 10px;background:url(/eng/img/common/icon_dot.gif) no-repeat 0 13px;line-height:1.375em}
.list_history .last {background:none}
.accordion { cursor: pointer; }
.list_history h4.accordion.extra { background:url(/eng/img/common/icon_circle.png) no-repeat 9px 10px;margin-bottom: 50px; top:-3px; }
.list_history h4.accordion.extra .title { display: block;margin-left:25px;margin-top: -7px;font-family:'open_sansbold';font-size:1em; line-height: 1;}
.list_history h4.accordion.extra .title::after { content: "▼"; font-size: 13px; position: absolute; top: 10px; margin-left: 5px; }
.list_history h4.accordion.extra.active .title::after { content: "▲"; color: #ccc; }

.list_dot { list-style: initial; padding-left: 15px; }

.table_custom { text-align: left; }
.table_custom tr { border-top: 1px solid #ddd; }
.table_custom tr th,
.table_custom tr td { padding: 15px 0; vertical-align: top; }
.table_custom tr th:first-child { padding-right: 20px; text-align: left; }
.table_custom tr td:first-child { padding-right: 20px; font-weight: bold; color: #f99d32; text-align: left; }
.table_custom p { margin-top: 0; margin-bottom: 10px; }
.table_custom h6 { color: #888; text-decoration: underline; }
.table_custom .symbol_8areas { width: 80px; display: inline-block; }

#content .section_info.noborder { border-bottom: 0; }
.structure .box_info_og,.structure .box_info_br {text-align:center}
.structure dl {*zoom:1}
.structure dl dt {line-height:1.5em}
.structure .box_info_gn dd {color:#a0af61}
.structure .bg_structure1 {background:url(/eng/img/sub1/bg_structure1.png) no-repeat 49.9821428% 50%}
.structure .bg_structure2 {padding-top:84px;background:url(/eng/img/sub1/bg_structure2.png) no-repeat 49.9821428% 0}
.structure .bg_structure3 {background:url(/eng/img/sub1/bg_structure3.png) no-repeat 50% 50%}

#map_canvas {width:100%;height:400px}
#map_canvas img {max-width:none}
.contact dt {float:left;font-weight:bold}
.contact dd {margin-left:113px}
.contact dt, .contact dd {padding:2px 0}
.contact .list_sns li {float:left;margin-right:5.4869%}
#content .section_info .list_sns li img {display:inline;margin-right:8px;vertical-align:middle}

.faq dt,.faq dd {line-height:1.375em}
.faq dt {padding:12px 0}
.faq dd {padding:12px 20px;background:#f6f6f6}
.faq > dt > a {display:inline-block;width:100%;color:#888;cursor: pointer;box-sizing: border-box; padding-right: 20px;}
.faq > dt > .active,.faq > dt > a:hover,.faq > dt > a:active,.faq > dt > a:focus {background:url(/eng/img/common/bu_arrow_unfold2.png) no-repeat 100% 8px;color:#f99d32}
.faq > .active > a {background:url(/eng/img/common/bu_arrow_unfold2.png) no-repeat 100% 50%;color:#f99d32}
.faq > dt > a > .q {margin-right:15px;font-weight:bold;color:#f99d32}
.faq > dt + dd {display:none}
.faq > dd > a {word-break:break-all}
.faq > .active + dd {display:block}
.collapse {display: none}
.collapse.in {display: block}
.collapsing {position: relative;height: 0;overflow: hidden;-webkit-transition: height 0.35s ease;transition: height 0.35s ease}

.bg_sharing {width:100%;height:423px;background:url(/eng/img/sub2/img1.jpg) no-repeat 50% 50%}
.partner li {margin-bottom:10px}
.project dl {margin-bottom:15px}
.store img {margin-bottom:10px}	
.list_giving_down a {display: block}
.list_giving_down li {margin-bottom:10px;font-size:0.875em}

.campaign .img_repre {float:right;margin-left:35px;margin-bottom: 20px;}
.campaign h4 {margin-bottom:0;padding:20px 0 3px 0;font-size:1.625em}
.campaign h5 {padding:5px 0 0 0;font-size:1.125em;line-height: 1.250em}
.campaign .box_info_gn dd {margin-bottom:15px;padding-top:0;background:none;font-size:1em}

.network .img_repre {float:left;margin-right:35px}
.network h4 {margin-bottom:0;padding:20px 0 7px 0;font-size:1.625em}
.network h5 {padding:5px 0 0 0;font-size:1.125em;line-height: 1.250em}

.grantmaking_process { margin-left: -12px; margin-right: -12px; }
.grantmaking_process .col { position: relative; padding-top: 5px; padding-left: 12px; padding-right: 12px; }
.grantmaking_process .col::after { position: absolute; right:-7px; top:16px; content: "➡︎"; color: #be6e45; font-weight: bold; }
.grantmaking_process .col:last-child::after { content: none; }
.grantmaking_process .col .box { min-height: 190px; padding: 12px 15px; background: #fbfbfb;border: #e5e5e5 1px solid; }


.research_vision .col { text-align: center; margin-bottom: 14px; }
.research_vision .col .box { min-height: 250px; padding: 20px; background: #fbfbfb;border: #e5e5e5 1px solid; }
.research_vision .col .box.orange { background: #fff9ef; }
.research_vision .col .box h5 { margin-bottom: 5px; }
.research_vision .col .box img { width: 80px; display: inline-block; margin-bottom: 0; }

.links li {padding:12px 25px;background:url(/eng/img/common/icon_list.png) no-repeat 5px 13px}
.links li dl dt {margin-bottom:5px}
/*.links li dl dd {overflow: hidden;white-space:nowrap;text-overflow: ellipsis;}*/
.links li dl dd a {word-break:break-all}

.box_normal { margin-top: 20px; }

.img_campaign { width: 300px; }

@media screen and (max-width:1350px) {
	.grantmaking_process .col { width: 100%; padding-bottom: 30px; }
	.grantmaking_process .col:last-child { padding-bottom: 0; }
	.grantmaking_process .col::after { top:auto; bottom:0px; left: 49%; content: "⬇︎"; }
	.grantmaking_process .col .box { min-height: auto; }
}

/*** responsive area ***/
@media screen and (max-width:1280px) {
	#header #nav {width:340px}
	.lnb > li > a {padding-left:20px}
	.lnb > li > .lnb_2dpt > li > a {padding-left:35px}
	footer {margin-left:20px}
	.title_1dpt {left:340px;}
	#container {margin-left:340px;}	
	#container .box_main img {width:42px}
	#container .box_main .title {margin-top:12px;font-size:1.063em}
	#container .box_main .txt {margin-top:4px}
	
	.research_vision .col { width: 100%; }
	.research_vision .col .box { min-height: auto; padding-bottom: 30px; background: #fbfbfb !important; }
	.research_vision .col:nth-child(2n) .box { background: #fff9ef !important; }
}

@media screen and (max-width:1150px) {
	.list_history > li > ul,
	.list_history .panel.extra .panel { width: 100%; padding-left: 45px; margin-top: 10px; }
	.list_history li h4 { margin-bottom: 20px; }
	.list_history li h4 .title { font-size: 1.2em; }
	.list_history h4.accordion.extra { margin-bottom: 20px; }
}

@media screen and (max-width:1024px) {	
	#container .img_main .copy_main {top:40%;font-size:1.875em;letter-spacing:-0.5px}
	#container .img_main {width:auto;}
	#container .box_main {position: relative;bottom:0;width:100%;height:20%}
	#container .box_main .box1,#container .box_main .box2,#container .box_main .box3 {float:left;width:33.3333%;height:100%}
	#container .img_main .img_slogan { right: 7%; width: 150px; }
	.partner .col-md-3 {float:left;width:auto}
	.list_giving_down .col-md-3  {float:left;width:auto}
}


@media screen and (min-width:800px) and (max-width:1024px) {	
	#container .box_main {text-align:left} 
	#container .box_main .info_area {padding:0 10%}
	#container .box_main .info_area img {float:left}
	#container .box_main .title {margin:0 0 0 50px}
	#container .box_main .txt {margin: 6px 0 0 50px;}	
}


@media screen and (max-width:799px) {
	.mobile_menu {display: block}
	.mobile_show {display: block}
	.mobile_hidden {display:none;overflow:hidden;height:0;font-size:0px;line-height:0;text-indent:-9999px}
	.nav_hidden {left: -100%;}
	
	#header {position:relative}
	#header .logo img {width:200px;margin-top:14px;}
	#header .logo {position:fixed;top:0;left:0;bottom:auto;width:100%;height:50px}
	#header #nav {position:fixed;top:0;width:100%;overflow-y:auto;min-height:0;background: transparent !important;z-index:99}
	/*#header #nav {width:100%;background: transparent !important;overflow-y:auto}*/
	#header #nav .nav_bg_org {padding-top:20px;min-height:460px;height:100%}
	#header #nav .gnb,#header #nav .nav_bg_org {width:315px}
	#header #nav .btn_close {position:fixed;top:0;left:315px;width:30px;height:30px;background:#313131;text-align:center;line-height:30px;}
	#header #nav .btn_close img { margin-top: 8px; }
	.lnb > li:last-child { margin-top: 10px; }
	.lnb > li > .lnb_2dpt > li > a { font-size: 0.85em; }
	/* line-height대신 padding으로 가운데 정렬 잡기 */
	#mobile_nav {display:block;position:fixed;top:11px;left:11px;padding:7px}
		
	#container .box_main .txt {display:none}
	#container .img_main .img_slogan { top: 120px; }
	#container {margin-left:0}
	.title_1dpt{top:50px;left:0;height:45px;background-image:none}
	.title_1dpt h2 {float:left;height:45px;margin: 0 14px 0 8.59684%;padding-top:15px;background-position:0 100%;font-size:0.938em}	
	
	#container .layer_foot {overflow:hidden;bottom:0;left:0;width:100%;height:auto;z-index:5;background-color:#fff;font-size:0.750em}
	.layer_foot .nav_1dpt {height:33px;margin:0 8.59684%;border-top:#e7e7e7 1px solid}
	.layer_foot .nav_1dpt .btn_1dpt {display:block;width:auto;padding:12px;color:#999}
	.layer_foot .nav_1dpt .btn_1dpt:active,.layer_foot .nav_1dpt .btn_1dpt:hover,.layer_foot .nav_1dpt .btn_1dpt:focus {color:#f99d32}
	.layer_foot .nav_1dpt .btn_prev {float:left;background:url(/eng/img/common/btn_prev.png) no-repeat 0 49%}
	.layer_foot .nav_1dpt .btn_next {float:right;background:url(/eng/img/common/btn_next.png) no-repeat 100% 49%}
	.layer_foot .btn_top {display:block;clear:both;padding:12px 0;background-color:#4a4a4a;color:#cfcfcf;text-align:center}	
	.layer_foot .btn_top img {margin-right:6px;vertical-align:middle}
	
	footer {margin-top:15px}
	
	.title_1dpt .pagenate {padding-top:18px;font-size:0.688em;float:left}
	.title_1dpt .pagenate .now {color:#f99d32}
	#content .section_info { padding: 40px 0 45px; }
	#content .section_info h3 {padding-bottom: 30px;font-size:2.25em}
	
	.list_history > li > ul { padding-left: 35px; }
	.list_history li h4 { background-position: 9px 6px;}
	.list_history h4.accordion.extra { background-position: 9px 4px; margin-bottom: 30px; top: 3px; }
	.list_history h4.accordion.extra .title::after { top: 4px; }
	
	.structure .bg_structure1,.structure .bg_structure2,.structure .bg_structure3 {padding:0;background:none}
	.structure .box_info_og,.structure .box_info_gn,.structure .box_info_br,.structure .box_info_gr {margin-top:10px}
	.contact dt {float:none;margin-top:10px}
	.contact dd {margin-left:0}	
	.bg_sharing {height:236px;background:url(/eng/img/sub2/img1.jpg) no-repeat 0 -221px}
	.project dl {margin-bottom:15px}
	.store img {margin-top:20px}
	
	#header #nav {
		-webkit-transform: translate3d(0px, 0px, 0px);
		-webkit-transition-duration: 0;
		transition-duration: 0;
		transition: all .3s ease-out 0s;
		-webkit-transition: all .3s ease-out 0s;
	}
	.blurred {
		position:fixed;
		top:0;
		z-index:80;
		width:100%;height:100%;
		display:block;
		background-color: rgba(0,0,0,.7);
		/*-webkit-transition: background-color .3s;
		transition: background-color .3s;*/
	}
}

@media screen and (max-width:656px){	
	#container .img_main .bg_area {background-position:100% 100%; background-size: 120%;}
	#container .img_main .copy_main {top: 40%;font-size:1.250em;letter-spacing:-0.5px}
	#container .img_main .img_slogan { width: 130px; top: 100px; }
	#container .box_main .title {font-size:0.875em}
	#container .box_main img {width:37px}
	#container .box_main .title {margin-top:6px}
	.faq > .active > a {background:none}
	.campaign .img_repre {float:none;margin-left:0}	
	.network .img_repre {float:none}
	.img_campaign { width: 100%; }
	.section_info img { margin-bottom: 12px; }
	.areas8 .table_custom thead { display: none; }
	.areas8 .table_custom tr th, 
	.areas8 .table_custom tr td { display: block; padding-right: 0; }
	.areas8 .table_custom tr td:first-child { padding-top: 30px; padding-bottom: 0; }
	.areas8 .table_custom tr td:last-child { padding-top: 0; padding-bottom: 30px;}
	.table_custom .symbol_8areas { margin-bottom: 0;}
}

@media screen and (max-width:360px) {
	#header #nav .gnb, #header #nav .nav_bg_org { width: 280px; }
	#header #nav .btn_close { left: 280px; }
	.lnb > li > .lnb_2dpt > li > a { padding-left: 20px; font-size: 0.8em; }
	
}

@media screen and (max-width:320px) {
	#header .logo img {width:60%}
}

@media screen and (max-width:640px) and (orientation:landscape) {
	#header .logo {text-align:right;border-bottom:#ededed 1px solid}
	#header .logo a {margin-right:10px}
	#header .logo a img {width:145px}
	#mobile_nav {left:8px}
	.title_1dpt {top:0;left:50px;width:auto;height:50px;z-index: 5;background:none;border-left:#ededed 1px solid}
	.title_1dpt h2 {margin:0 8px 0 12px;background:none}
	#container #content_area {padding-top: 50px}	
	.title_hidden {visibility:hidden}
}