@charset "utf-8";
@import url("/css/korean/webfont.css");
@import url("/css/korean/layout.css");

/*----------------------------------------------------------------------------
 * 메인 스타일 정의
 * ---------------------------------------------------------------------------
 * Author	: (주)플랜아이 http://plani.co.kr
 * ---------------------------------------------------------------------------
 * History
 * ---------------------------------------------------------------------------
 * 2017-03-16 (조민지)	: 최초작성
 * -------------------------------------------------------------------------*/

/* 레이아웃 */
#contents {position:relative; padding-left:110px;}
#contents .title {padding:30px 0 20px; font-size:1.1em; font-weight:500; color:#252525;}
#contents > section {display:none;}
#contents > section.on {display:block;}

/* 왼쪽메뉴 */
.leftmenu {position:absolute; left:0; top:0; z-index:1; width:110px; text-align:center;}
.leftmenu:before {position:absolute; left:0; top:0; z-index:-1; width:100%; height:10000%; background-color:#2d2d3b; content:'';}
.leftmenu a {display:block; overflow:hidden; position:relative; z-index:1; height:110px; margin-bottom:1px; padding-top:25px; box-sizing:border-box; background-color:#373745; font-size:.9em; color:#9b9bb0; letter-spacing:-1px;}
.leftmenu a:before {position:absolute; left:0; bottom:0; z-index:-1; width:100%; height:0; border-left:4px solid #2fc96b; background-color:#fff; content:''; transition:all .2s;}
.leftmenu p {overflow:hidden; height:35px; margin-bottom:5px; font-size:0; line-height:0;}
.leftmenu p span {display:block; transition:all .2s;}
.leftmenu .on a,
.leftmenu a:hover,
.leftmenu a:focus,
.leftmenu a:active {border-right:1px solid #c9d0dc; color:#5d5d5d;}
.leftmenu a:hover:before,
.leftmenu a:focus:before,
.leftmenu a:active:before,
.leftmenu .on a:before {height:100%;}
.leftmenu .on a .off,
.leftmenu a:hover .off,
.leftmenu a:focus .off,
.leftmenu a:active .off {margin-top:-35px;}

/* latest */
.latest {position:absolute; left:auto; top:0; width:855px;}
.latest .more {position:absolute; right:0; top:38px; width:12px; height:12px;}
.latest .more:before {position:absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px; background-color:#7b808e; content:'';}
.latest .more:after {position:absolute; left:50%; top:0; width:2px; height:100%; margin-left:-1px; background-color:#7b808e; content:'';}

.tab {display:table;position:relative; width:100%; height:460px; table-layout:fixed;}
.tab .group {display:table-cell;}
.tab .group h3 {font-size:.95em; font-weight:normal; text-align:center;}
.tab .group h3 a {display:block; position:relative; height:68px; padding-top:12px; border-bottom:1px solid #c8cfdc; border-left:1px solid #c8cfdc; color:#858c9a; letter-spacing:-1px; transition:all .2s;}
.tab .group h3 a:before {position:absolute; left:50%; bottom:-1px; width:10px; height:10px; margin-left:-5px; content:''; transform:rotate(45deg); transition:all 0s 0s, bottom .2s 0s;}
.tab .group h3 img {opacity:.4; transition:all .2s}
.tab .group h3 span {display:block; margin-top:-5px;}
.tab .group:first-child h3 a {border-left:0 none;}
.tab .list {display:none; position:absolute; left:0; top:110px; width:100%;}
.tab .list ul {margin:0 35px;}
.tab .list a {display:block; position:relative; margin-top:12px; padding-left:120px;}
.tab .list img {position:absolute; left:0; top:0;}
.tab .list strong {display:block; overflow:hidden; font-weight:500; color:#252525; text-overflow:ellipsis; white-space:nowrap;}
.tab .list p {overflow:hidden; font-size:.95em; color:#777; text-overflow:ellipsis; white-space:nowrap;}
.tab .list small {position:Relative; top:-1px; font-size:11px; color:#888e9a;}
.tab .list small:before {position:relative; top:1px; margin:0 3px 0 5px; font-family:'FontAwesome'; color:#b5bdcd; content:'\f08e';}
.tab .date {font-size:.9em; color:#aab3c3;}
.tab .date:before {margin-right:3px; font-family:'FontAwesome'; content:'\f02e';}
.tab .color-blue {color:#0a81db;}
.tab .icon {display:inline-block; width:35px; height:20px; font-size:.9em; color:#fff; text-align:center; line-height:20px; vertical-align:middle;}
.tab .icon.blue {background-color:#0a81db;}
.tab .icon.green {background-color:#2fc96b;}
.tab .icon.yellow {background-color:#f5b626;}
.tab .more {display:none; position:absolute; right:40px; top:95px; width:70px; height:25px; border-radius:3px; border:1px solid #c0c9da; background-color:#eef1f8; font-size:.9em; color:#75829a; text-align:center; line-height:25px;}
.tab .more:before,
.tab .more:after {display:none;}
.tab .on .more,
.tab .on .list {display:block;}
.tab .on h3 a {background-color:#eef1f8; color:#626f86;}
.tab .on h3 a:before {border-bottom:1px solid #c8cfdc; border-right:1px solid #c8cfdc; background-color:#eef1f8; bottom:-6px; transition:all 0s .2s, bottom .2s .2s;}
.tab .on h3 img {opacity:1;}
.tab.area .group h3 {font-size:1.1em;}
.tab.area .group h3 a {height:75px; padding-top:5px; color:#626f86;}
.tab.area .group h3 span {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; line-height:88px;}
.tab.area .group:last-child h3 img {margin-left:-10px;}
.tab.area .on h3 a {color:#fff;}

/* 시장/기술동향 */
.trend {float:left; position:relative; width:361px; padding:0 0 0 35px;}
.trend li a {display:block; overflow:hidden; position:relative; min-height:57px; margin-top:12px;}
.trend .date {display:block; position:absolute; left:0; bottom:0; width:55px; height:55px; border:1px solid #d7d7d7; text-align:center; line-height:120%;}
.trend .date small {display:block; padding-top:5px; font-size:10px; color:#666;}
.trend .date strong {font-size:1.4em; color:#0a81db;}
.trend .date + p {overflow:hidden; margin-left:55px; padding:5px 0 0 15px; font-weight:500; color:#252525; text-overflow:ellipsis; white-space:nowrap;}
.trend .date + p span {display:block; font-size:13px; font-weight:normal; color:#555555;}
.trend .date + p span:after {margin-left:5px; font-family:'FontAwesome'; color:#a4a9b7; content:'\f0c7';}
.trend .first a {margin-top:0;}
.trend .first img {float:left;}
.trend .first .date {border:0 none; background-color:#0a81db;}
.trend .first .date > * {color:#fff;}
.trend .first .date + p {position:absolute; left:0; right:0; bottom:0; z-index:1; height:50px; color:#fff;}
.trend .first .date + p span {color:#b1b2b5;}
.trend .first .date + p:before {position:absolute; left:0; top:0; z-index:-1; width:100%; height:100%; background-color:#000; content:''; opacity:.7;}

/* 전문서적 */
.book {float:right; position:relative; width:380px; margin-right:40px;}
.book li a {display:block; position:relative; min-height:75px; margin-top:10px; padding-left:75px; border:1px solid #e1e6ef;}
.book li a:before {position:absolute; left:59px; top:0; width:1px; height:100%; background-color:#e1e6ef; content:'';}
.book li img {position:absolute; left:0; top:0;}
.book li strong {display:block; padding-top:5px; font-weight:500; color:#252525;}
.book li p {margin-top:3px; font-size:12px; color:#a3a3a3; line-height:140%;}
.book li p span {display:block;}
.book li p span:before {margin-right:3px; font-family:'FontAwesome'; color:#6e6e6e; content:'\f040';}
.book li:first-child a {margin-top:0;}

/* state */
.state {float:left; position:relative; width:300px;}
.state:before {position:absolute; left:0; top:0; width:100%; height:100%; border-left:1px solid #d7dde9; border-right:1px solid #d7dde9; content:'';}

/* ad */
.ad {overflow:hidden; width:300px; height:217px; margin-left:1px;}
.ad .bx-viewport {z-index:0;}
.ad .bx-controls {position:absolute; left:30px; top:30px; z-index:1; padding-left:40px;}
.ad .bx-controls-auto {position:absolute; left:0; top:0;}
.ad .bx-controls-auto-item {display:inline; vertical-align:top;} 
.ad .bx-controls-auto-item a {display:inline-block; position:relative; width:13px; height:13px; margin-right:5px; border-radius:100%; background-color:#728187; font-size:0; line-height:0; vertical-align:top;}
.ad .bx-start {float:right;}
.ad .bx-start:before {position:absolute; left:0; top:0; width:100%; height:100%; padding-left:1px; box-sizing:border-box; font-size:8px; color:#fff; content:'▶'; text-align:center; line-height:11px;}
.ad .bx-stop:before {position:absolute; left:50%; top:50%; width:1px; height:5px; margin:-2.5px 0 0 -2.5px; border-left:2px solid #fff; border-right:2px solid #fff; content:'';}
.ad .bx-pager-item {display:inline; vertical-align:middle;}
.ad .bx-pager-item a {display:inline-block; width:13px; height:13px; margin-right:5px; border-radius:15px; background-color:#c1cada; font-size:0; line-height:0; vertical-align:top; transition:all .2s;}
.ad .bx-pager-item .active {width:30px; background-color:#0c82db;}

/* graph */
.graph {position:relative; padding:0 30px 40px; box-sizing:border-box; border-top:1px solid #d7dde9;}
.graph .title {margin-bottom:5px;}
.graph .contents a {display:block;}
.graph .legend {margin-top:20px; font-size:12px; color:#666; line-height:150%;}
.graph .legend li {display:inline; margin-right:3px; white-space:nowrap;}
.graph .legend li:before {display:inline-block; width:9px; height:9px; margin-right:5px; content:''; vertical-align:middle;}
.graph .legend .blue:before {background-color:#0a81db;}
.graph .legend .green:before {background-color:#2fc96b;}
.graph .legend .yellow:before {background-color:#f5b626;}
.graph .legend .purple:before {background-color:#7e57c2;}
.graph .legend .red:before {background-color:#f16160;}
.graph .legend .brown:before {background-color:#97775e;}
.graph .legend .gray:before {background-color:#96a2b9;}
.graph-view {visibility:hidden; position:absolute; left:0; bottom:0; z-index:10; width:100%; height:0; padding:0 30px; box-sizing:border-box; background-color:#fff; transition:height .3s;}
.graph-view .contents {display:table; overflow:hidden; width:100%; height:100%; opacity:0; transition:opacity .3s .2s;}
.graph-view .contents ul {display:table-cell; font-size:.95em; vertical-align:middle;}
.graph-view li {position:relative; padding-right:50px; border-top:1px solid #d7dde9; text-overflow:ellipsis; white-space:nowrap; line-height:22px;}
.graph-view li:first-child {border-top:0 none;}
.graph-view li span {position:absolute; right:0; top:0; color:#0a81db;}
.graph-view .close {position:absolute; right:-35px; top:-5px; width:35px; height:35px; background-color:#0a81db;}
.graph-view .close:before {position:absolute; left:0; top:0; width:100%; height:100%; font-family:'FontAwesome'; font-size:20px; color:#fff; content:'\f00d'; text-align:center; line-height:35px;}
.graph-view.active {visibility:visible; height:100%; box-shadow:0 0 10px rgba(0, 0, 0, 0.5); border:5px solid #0a81db;}
.graph-view.active .contents {opacity:1;}

/* guide */
.guide {float:left; position:relative; z-index:1; width:325px; margin-left:2px; padding:0 30px; box-sizing:border-box; background-color:#eef1f8;}

/* 이노폴리스라이브러리 이용안내 */
.use li {position:relative; margin-top:10px; padding-left:45px;}
.use strong {font-size:1.05em; font-weight:500; color:#0a81db;}
.use p {margin-top:2px; font-size:.9em; color:#4f596b; line-height:130%;}
.use .use-01 {margin-top:-5px;}
.use .use-01 p {margin-top:0; font-size:1.3em; font-weight:bold;}
.use-01:before {position:absolute; left:0; top:5px; font-family:'FontAwesome'; font-size:30px; color:#0a81db; content:'\f017';}
.use-02:before {position:absolute; left:0; top:5px; font-family:'FontAwesome'; font-size:28px; color:#0a81db; content:'\f274';}
.use-03:before {position:absolute; left:0; top:17px; font-family:'FontAwesome'; font-size:40px; color:#0a81db; content:'\f130';}

/* link */
.link {margin:20px 0; border-top:1px solid #d7dde9;}
.link a {display:block; position:relative; border-bottom:1px solid #d7dde9; font-size:.95em; color:#7e8ca6; letter-spacing:-1.3px; line-height:40px;}
.link a:before {margin-right:5px; font-family:'FontAwesome'; color:#a3adc0; content:'\f019';}
.link a:after {position:absolute; right:5px; top:50%; width:5px; height:5px; margin-top:-3px; border-right:2px solid #c0c9da; border-top:2px solid #c0c9da; content:''; transform:rotate(45deg);}
.link li:first-child + li a:before {content:'\f27a';}

/* 기술찾기포럼제안기술 */
.banner {display:block; padding:15px 20px; box-sizing:border-box; border:1px solid #dfe4ee; background:url('/images/korean/main/banner.gif') no-repeat 90% center #e6eaf5;}
.banner strong {display:block; font-size:1.05em; font-weight:500; color:#0f83db;}
.banner span {font-size:13px;}

/* 팝업존 */
.popupzone {position:relative; z-index:0;}
.popupzone .bx-controls {position:absolute; right:0; top:40px;}
.popupzone .bx-stop:before {position:absolute; left:50%; top:5px; width:2px; height:9px; margin:-3px 0 0 0; border-left:2px solid #0a81db; border-right:2px solid #0a81db; content:'';}
.popupzone .bx-start:before {position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; font-size:12px; color:#0a81db; content:'▶'; text-align:right; line-height:12px;}
.popupzone .bx-controls-auto-item a {display:inline-block; position:relative; width:20px; height:13px; font-size:0; line-height:0; vertical-align:top;}
.popupzone .bx-controls-auto-item .active {display:none;}
.popupzone .bx-controls-auto-item,
.popupzone .bx-controls-auto,
.popupzone .bx-pager {display:inline; vertical-align:top;}
.popupzone .bx-pager-item {display:inline; vertical-align:middle;}
.popupzone .bx-pager-item a {display:inline-block; width:13px; height:13px; margin-right:5px; border-radius:15px; background-color:#c1cada; font-size:0; line-height:0; vertical-align:top; transition:all .2s;}
.popupzone .bx-pager-item .active {width:30px; background-color:#0c82db;}

/* 바로가기 */
.related {padding:24px 0 35px;}
.related .group {position:relative; z-index:1; margin-top:5px;}
.related .group:before {position:absolute; right:20px; top:0; font-size:10px; color:#c0c9da; content:'▼'; line-height:40px; transition:all .2s;}
.related .group.active:before {transform:rotate(180deg);}
.related .group h3 {border:1px solid #d8deea; background-color:#e6e9f1; font-size:.9em; font-weight:normal;}
.related .group a {display:block; padding-left:15px; color:#8d94a1; line-height:40px;}
.related .list {position:absolute; left:0; bottom:40px; width:100%; box-sizing:border-box;}
.related .list a {visibility:hidden; overflow:hidden; height:0; font-size:.9em; line-height:30px; transition:all 0s;}
.related .active .list {padding:10px 0; border:1px solid #d8deea; background-color:#e6e9f1;}
.related .active .list a {visibility:visible; height:30px; transition:all .2s;}

/* 하단 */
#layout-footer {clear:both;}
#footer {padding-left:120px; box-sizing:border-box; text-align:left;}

/* 20170501 수정 */
.board {float:left; width:855px; margin-top:460px;}
#contents-04.on + .board {margin-top:490px;}

@media screen and (max-width:1592px)
{
	/* 레이아웃 */
	#container,
	#footer {width:1267px;}

	/* guide */
	.guide {overflow:hidden; clear:both; float:none; width:100%; margin:0; padding:75px 360px 40px 540px;}

	/* 이노폴리스라이브러리 이용안내 */
	.use {position:absolute; left:30px; top:0; width:430px;}
	.use ul {position:relative;}
	.use .use-03 {position:absolute; right:0; top:0; margin-top:0;}

	/* link */
	.link {position:absolute; bottom:40px; left:30px; width:430px; margin:0;}

	/* 기술찾기포럼제안기술 */
	.banner {float:right; width:265px; padding:25px 20px;}

	/* 바로가기 */
	.related {float:right; width:265px; padding:15px 0 0;}

	/* 팝업존 */
	.popupzone {position:absolute; right:30px; top:0; width:270px;}
}
/* 연구기관별 tab*/
.local_group {
	width: auto;
	margin: 30px 25px 0;
	box-sizing: border-box;
	overflow: hidden;
	}
.local_group .float_wrap  {
	border-bottom: solid 1px #d7dde9;
	overflow: hidden;
	}
.local_group .float_wrap > div {
	float: left;
	padding: 25px 0;
	overflow: hidden;
	}
.local_group  .daedeok_area {
	padding-bottom: 25px;
	}
.local_group .tit_box {
	float: left;
	width: 56px;
	height: 56px;
	margin-right: 15px;
	background: #3c65c3;
	text-align: center;
	color: #fff;
	line-height: 56px;
	font-size: 1em;
	font-weight: normal;
	}
.local_group .colum_list {
	position: relative;
	font-size: 0.813em;
	overflow: hidden;
	}
.colum_list li {
	color: #000;
	letter-spacing: -0.05em;
	}
.daedeok_area .colum_list {
    column-count: 5;
	-webkit-column-count: 5;
    -moz-column-count: 5;
	}
.count2 {
	width: 39%;
	}
.count2 > ul {
	float: left;
	width: 35%;
	}
.count3 {
	width: 59%;
	}
.count3 > ul {
	float: left;
    width: 28.33%;
	}
.local_group .gwangju {
	background: #fd840d;
	}	
.local_group .daegu {
	background: #97c34d;
	}	
.local_group .busan {
	background: #f05f4b;
	}	
.local_group .jeonbuk {
	background: #36bedd;
	}	
.count2 .colum_list, 
.count3 .colum_list {
	float: left;
	}
.gwangju + .colum_list,
.busan + .colum_list {
	width: 34%;
	}
.count2 .busan + .colum_list  {
	width: 25%;
	}	
.count2 .busan + .colum_list + .colum_list {
	width: 46%;
	}	
.float_wrap > div:first-child {
	border-right: solid 1px #d7dde9;
	margin-right: 15px;
	}