@charset "utf-8";

/* Animation */
#header .toputil .naver_search .input,
#header .toputil a.btn,
#header .toputil a.btn:after,
#header #gnb ul li a strong,
#header #mob_gnb ul,
#header .mob_btn
{transition : all 0.4s ease; -webkit-transition : all 0.4s ease;} 

/* Common */
body {background:#e9eff9;}
#wrap {/*overflow:hidden;*/ overflow-y:scroll; height:100%;}
h2, h3, h4, h5 {font-weight:500;}
h2.title {color:#fff; font-size:26px; line-height:32px; margin-bottom:15px; background:#091152; display:inline-block; vertical-align:top; padding:9px 30px 9px 45px; position:relative; border-radius:0 30px 30px 0; -webkit-border-radius:0 30px 30px 0;}
h2.title:before,
h2.title:after {content:""; display:block; position:absolute;}
h2.title:before {width:36px; height:28px; left:0; top:50%; margin-top:-14px; background-repeat:no-repeat; background-position:center top; background-size:auto 100%;}
h2.title:after {width:500px; height:100%; left:-500px; top:0; background:#091152;}
#sub1 h2.title:before {background-image:url(../images/common/gnb_ico1.png);} 
#sub2 h2.title:before {background-image:url(../images/common/gnb_ico2.png);} 
#sub3 h2.title:before {background-image:url(../images/common/gnb_ico3.png);}
#sub4 h2.title:before {background-image:url(../images/common/gnb_ico4.png);}
#sub5 h2.title:before {background-image:url(../images/common/gnb_ico5.png);}
#sub6 h2.title:before {background-image:url(../images/common/gnb_ico6.png);}
h3.title {color:#091152; font-size:22px; line-height:28px; font-weight:500; background:url(../images/common/h3_bul.png) no-repeat left 9px; padding:0 0 0 18px; margin-top:25px; margin-bottom:10px;}
h3.title span {line-height:1em; color:#30a0d7;}
h4.title {color:#0f1756; font-size:20px; line-height:26px; position:relative; padding-left:18px;}
h4.title:before {content:""; display:block; width:4px; height:4px; border:2px solid #0f1756; border-radius:50%; -webkit-border-radius:50%; position:absolute; left:1px; top:9px;}
.layout {width:1500px; margin:0 auto; padding:0 60px; box-sizing:border-box; position:relative; z-index:10;}
.check {display:none;}

/* Header */
#header {height:233px; position:relative; min-width:1500px; background:#fff; overflow:hidden;}
#header:before {content:""; display:block; width:100%; height:100%;  position:absolute; top:0;
transform-origin:center top; -webkit-transform-origin:center top;
animation-name:headerBg; 
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease;
-webkit-animation-name:headerBg;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease;}
@keyframes headerBg {
	0%   {opacity:0; transform:scale(1.5);}
	100%   {opacity:1; transform:scale(1);}
}
@-webkit-keyframes headerBg {
	0%   {opacity:0; transform:scale(1.5);}
	100%   {opacity:1; transform:scale(1);}
}
#header:after {content:""; display:block; width:100%; height:128px; background:#2240AB; position:absolute; left:0; bottom:0; z-index:5;}
#header .logo {position:absolute; left:60px; top:22px; z-index:20;  background-image:url(../images/common/logo.png); width: 197px; height: 56px;  background-repeat:no-repeat; background-position:center top;}
#header .logo img{display: none;}
#header .toputil {position:absolute; right:60px; top:35px; z-index:20;}
#header .toputil:after {content:""; display:block; clear:both;}
#header .toputil a.btn {display:block; width:40px; height:40px; float:left; margin-left:10px; position:relative; overflow:hidden; text-indent:-9999px; z-index: 99;}
#header .toputil a.btn:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background-repeat:no-repeat; background-position:center 50%;}
#header .toputil a.btn.search {margin-left:0;}
#header .toputil a.btn.search:before {content:""; display:block; opacity:0; -webkit-opacity:0; width:100%; height:100%; position:absolute; left:0; top:0; background-repeat:no-repeat; background-position:center 50%; background-image:url(../images/common/toputil_search_ico_close.png);}
#header .toputil a.btn.search:after {background-image:url(../images/common/toputil_search_ico.png);}
#header .toputil a.btn.search.act:before {opacity:1; -webkit-opacity:1;}
#header .toputil a.btn.search.act:after {opacity:0; -webkit-opacity:0;}
#header .toputil a.btn.rome {width:92px; margin-right:5px;} 
#header .toputil a.btn.rome:after {background-image:url(../images/common/toputil_rome_ico.png); background-position:center 40%;}
#header .toputil a.btn.print {display:none;}
#header .toputil a.btn.print:after {background-image:url(../images/common/toputil_print_ico.png);} 
#header .toputil a.btn.note {width: auto;  height:42px;  border: 1px solid #75839B; border-radius: 8px; text-indent: 0; font-size: 12px; line-height: 40px; color: #000; padding: 0 8px 0 30px; box-sizing: border-box;}
#header .toputil a.btn.note:after {background-image:url(../images/common/toputil_note.png); background-position: 10px center;}
#header .toputil a.btn.note:hover{text-decoration: none;}
#header .toputil a.btn.resize {width:50px; height:40px;  border: 1px solid #75839B; border-radius: 8px;}
#header .toputil a.btn.resize:after {background-image:url(../images/common/toputil_resize_ico.png);
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease;}
#header .toputil a.btn.resize.on:after {background-image:url(../images/common/toputil_resize_ico2.png);}
#header .toputil a.btn.resize:hover {}
#header .toputil a.btn.resize:hover:after {animation-name:rotate; -webkit-animation-name:rotate;}
@keyframes rotate {
	0%   {transform: rotateY(0deg);}
	100%   {transform: rotateY(360deg);}
}
@-webkit-keyframes rotate {
	0%   {transform: rotateY(0deg);}
	100%   {transform: rotateY(360deg);}
}
#header .toputil .naver_search {float:left; position:relative;}
#header .toputil .naver_search .input {position:absolute; right:0; padding-right:40px; box-sizing:border-box; height:40px; top:0; width:0; overflow:hidden; opacity:0; -webkit-opacity:0; /*display:none;*/}
#header .toputil .naver_search .input.act {opacity:1; -webkit-opacity:1; width:460px;}
#header .toputil .naver_search .input input[type="text"] {border:0; height:40px; color:#202020; padding:0 10px; border-bottom:1px solid #C6CEDA; width:420px; padding-right: 40px; box-sizing:border-box; background:none; display:block;} 
#header .toputil .naver_search .input input[type="text"]::-webkit-input-placeholder {color:#707070;}
#header .toputil .naver_search .input input[type="text"]:-moz-placeholder {color:#707070;}
#header .toputil .naver_search .input input[type="text"]::-moz-placeholder {color:#707070;}
#header .toputil .naver_search .input input[type="text"]:-ms-input-placeholder {color:#707070;}
#header .toputil .naver_search .input input[type="button"] {display:block; width:40px; height:40px; overflow:hidden; text-indent:-9999px; background:url(../images/common/toputil_btn_search.png) no-repeat center center; border:0; cursor:pointer; position:absolute; left:380px; top:0;}


#header #gnb {height:128px; padding-top:105px; position:relative; z-index:15;}
#header #gnb ul {height:128px;}
#header #gnb ul li {float:left; width:16.666%; height:100%; position:relative;} 
#header #gnb ul li:nth-child(1) {width:16.67%;}
#header #gnb ul li:before,
#header #gnb ul li:after {content:""; display:block; width:1px; height:78px; position:absolute; top:50%; margin-top:-39px;}

#header #gnb ul li:after {background: rgba(255,255,255,0.3); right:0;}
#header #gnb ul li:nth-child(1):before,
#header #gnb ul li:nth-child(6):after {display:none;}
#header #gnb ul li a {display:block; color:#fff; text-align:center; font-weight:400; font-size:20px; line-height:26px; text-decoration:none; height:100%; overflow:hidden;} 
#header #gnb ul li a strong {display:block; font-weight:400; color:rgba(255,255,255,0.7); padding:27px 0; height:100%; position:relative; top:0; box-sizing:border-box; -webkit-box-sizing:border-box; word-break:keep-all;}
#header #gnb ul li a strong:before {content:""; display:block; height:36px; margin-bottom:10px; background-repeat:no-repeat; background-position:center top;}
#header #gnb ul li:nth-child(1) a strong:before {background-image:url(../images/common/gnb_ico1.png); opacity: 0.5;}
#header #gnb ul li:nth-child(2) a strong:before {background-image:url(../images/common/gnb_ico2.png); opacity: 0.5;}
#header #gnb ul li:nth-child(3) a strong:before {background-image:url(../images/common/gnb_ico3.png); opacity: 0.5;}
#header #gnb ul li:nth-child(4) a strong:before {background-image:url(../images/common/gnb_ico4.png); opacity: 0.5;}
#header #gnb ul li:nth-child(5) a strong:before {background-image:url(../images/common/gnb_ico5.png); opacity: 0.5;}
#header #gnb ul li:nth-child(6) a strong:before {background-image:url(../images/common/gnb_ico6.png); opacity: 0.5;}
#header #gnb ul li a strong:after {display:block; width:100%; height:100%; font-weight:400; padding:73px 0 27px 0; box-sizing:border-box; -webkit-box-sizing:border-box; position:absolute; left:0; top:100%; color:#fff; text-align:center; font-size:20px; line-height:26px; text-decoration:none; background-repeat:no-repeat; background-position: center 27px;}
#header #gnb ul li:nth-child(1) a strong:after {content:"종합정보"; background-image:url(../images/common/gnb_ico1.png);}
#header #gnb ul li:nth-child(2) a strong:after {content:"기술동향 정보"; background-image:url(../images/common/gnb_ico2.png);}
#header #gnb ul li:nth-child(3) a strong:after {content:"연구개발계획서 요약"; background-image:url(../images/common/gnb_ico3.png);}
#header #gnb ul li:nth-child(4) a strong:after {content:"연구개발기관 정보"; background-image:url(../images/common/gnb_ico4.png);}
#header #gnb ul li:nth-child(5) a strong:after {content:"연구개발과제수행 이력"; background-image:url(../images/common/gnb_ico5.png);}
#header #gnb ul li:nth-child(6) a strong:after {content:"비교하기"; background-image:url(../images/common/gnb_ico6.png);}
#header #gnb ul li a.act strong,
#header #gnb ul li a:hover strong,
#header #gnb ul li a:active strong {top:-100%;}
#header #gnb ul li a.act strong{}
#header .mob_btn,
#header #mob_gnb {display:none;}

/* Container */
#container {position:relative;}
#container:after {content:""; display:block; min-width:1500px; width:100%; height:580px; background:url(../images/common/container_bg.jpg) no-repeat right top; position:absolute; left:0; top:0;}
#content {padding:35px 0;}
#content .layout {padding:0 45px;}
#content h2.title,
#content h3.title,
#content .sub_txt,
#content h4.title {margin-left:15px; margin-right:15px;}
#content .sub_txt {padding-left:18px;}


@media screen and (max-width: 718px){
	/* Common */
	h2.title {font-size:24px; line-height:30px;}
	h3.title {margin-top:20px; font-size:20px; line-height:26px; background-position:left 8px; padding-left:15px;}
	h4.title {font-size:18px; line-height:24px; padding-left:15px;}
	.layout {width:100%; padding:0;}
	.check {display:block;}

	/* Header */
	#header {min-width:100%;}
	#header .logo {left:10px; top:27px; background-image:url(../images/common/logo_ta.png); width: 170px; height: 49px;}
	#header .toputil {right:10px;}
	#header .toputil a.btn {margin-left:5px;}
	#header .toputil a.btn.rome{width: 70px; margin-right: 0;}
	#header .toputil a.btn.rome:after{background-size:100% auto;}

	#header .toputil .naver_search .input{right: 40px;}
	#header .toputil .naver_search .input.act {width:170px;}
	#header .toputil .naver_search .input input[type="text"] {width:170px;}
	#header .toputil .naver_search .input input[type="submit"] {left:170px;}
	#header .toputil .naver_search .input input[type="button"]{left: 130px;}
	#header .toputil .naver_search .input input[type="text"]::-webkit-input-placeholder {font-size: 12px;}
	#header .toputil .naver_search .input input[type="text"]:-moz-placeholder  {font-size: 12px;}
	#header .toputil .naver_search .input input[type="text"]::-moz-placeholder  {font-size: 12px;}
	#header .toputil .naver_search .input input[type="text"]:-ms-input-placeholder  {font-size: 12px;}

	#header #gnb ul li a {font-size:16px;}
	#header #gnb ul li a strong,
	#header #gnb ul li a strong:after {font-size:16px; line-height:20px; padding-left:15px; padding-right:15px;}
	#header #gnb ul li a strong {padding-top:22px;}
	#header #gnb ul li a strong:after {padding-top:68px; background-position:center 22px;}

	/* Container */
	#container:after {min-width:100%; background-size:800px auto;}
	#content {padding:25px 0;}
	#content .layout {padding:0;}
	#content h2.title {margin-left:10px;}
}


@media screen and (max-width: 640px){
	/* Common */	
	h2.title {font-size:22px;line-height:28px;}
	h3.title {font-size:18px; line-height:24px; background-position:left 7px;}
			
	/* Header */
	#header {height:140px;}
	#header:after {height:53px; background: none; border-top:1px solid #C6CEDA; border-bottom:1px solid #C6CEDA;}
	#header.fixed {position:relative; z-index:999;}
	#header .logo {left:20px; top:22px; background-image:url(../images/common/logo_mo.png); width: 150px; height: 43px;}
	#header .toputil {top:92px; right: 0; left: 0;box-sizing: border-box; width: 100%; position: relative; padding: 0 85px 0 10px;}
	
	#header .toputil a.btn{float: right; margin-left: 0;}
	#header .toputil a.btn.resize {display:none;}
	#header .toputil .naver_search{float: right; width: 100%;}
	#header .toputil a.btn.rome{margin-right: 0; width: 100px; top: -107px; right: -25px;}
	#header .toputil a.btn.rome:after{position: absolute; left:15px; top:6px; background-image:url(../images/common/toputil_rome_ico_mo.png); background-size: 100%; background-position: left center; width:75px; height: 24px;}
	#header .toputil a.btn.note {height: 40px;position: absolute; right: 10px;line-height: 40px;padding: 0 5px 0 25px;}
	#header .toputil a.btn.note:after{background-position: 5px center;}
	#header .toputil .naver_search .input{right: 0;}
	#header .toputil .naver_search .input.act{width: 100%;}
	#header .toputil .naver_search .input input[type="text"]{width: 100%;}
	#header .toputil .naver_search .input input[type="button"]{right: 40px; left: inherit;}
	
	#header #gnb {display:none;}
	#header .mob_btn {display:block; position:absolute; right:20px; top:25px; overflow:hidden; width:40px; height:40px; text-indent:-9999px; z-index:300; background-image:url(../images/common/mob_gnb_btn.png); background-repeat:no-repeat; background-position:center 50%;}
	#header .mob_btn.act {background-image:url(../images/common/mob_gnb_btn_close.png);}

	#header #mob_gnb {display:none; position:fixed; left:0; top:0; width:100%; height:100%; /*background:rgba(0,0,0,0.6);*/ z-index:200;}
	#header #mob_gnb ul {background:#2240AB; margin-top:86px; position:relative; left:100%;}
	#header #mob_gnb ul.act {left:0;}
	#header #mob_gnb ul li {border-top:1px solid #fff;}
	#header #mob_gnb ul li:first-child {border-top:0;}
	#header #mob_gnb ul li a {display:block; color:#fff; padding:18px 4%; font-size:16px; text-decoration:none;}
	#header #mob_gnb ul li a.act {background:#2240AB;}
	#header #mob_gnb ul li a strong {position:relative; display:block;}
	#header #mob_gnb ul li a strong:before {content:""; display:inline-block; vertical-align:top; width:30px; height:24px; background-repeat:no-repeat; background-size:auto 100%; background-position:center 50%; margin-right:8px;}
	#header #mob_gnb ul li:nth-child(1) a strong:before {background-image:url(../images/common/gnb_ico1.png);}
	#header #mob_gnb ul li:nth-child(2) a strong:before {background-image:url(../images/common/gnb_ico2.png);}
	#header #mob_gnb ul li:nth-child(3) a strong:before {background-image:url(../images/common/gnb_ico3.png);}
	#header #mob_gnb ul li:nth-child(4) a strong:before {background-image:url(../images/common/gnb_ico4.png);}
	#header #mob_gnb ul li:nth-child(5) a strong:before {background-image:url(../images/common/gnb_ico5.png);}
	#header #mob_gnb ul li:nth-child(6) a strong:before {background-image:url(../images/common/gnb_ico6.png);}

	/* Common */
	#wrap.fixed {position:fixed; overflow:hidden; width:100%;}	
}


@media screen and (max-width: 480px){
/* Common */	
h2.title {font-size:20px;line-height:26px;}
}


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

}