@charset "utf-8"; 


div[class^="I01"]{box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; ; }

/* container */
#container {position:relative; width:100%; padding-top:155px; overflow:hidden; z-index:0;}
#container:after {display:block; content:""; clear:both; }

/* ------------------------------------------------------------ */
/* ------------------ * 부속기관 F-06 Style * ------------------ */
/* ------------------------------------------------------------ */

/* 메인비주얼 */
.I01_m_visual {position:relative;}
.I01_m_visual h2{position:absolute; width:1px; height:1px; top:-999999em; left:-999999em; }  
.I01_m_visual .visual{position:relative; height:100%;}
.I01_m_visual .visual .slide{position: relative;}
.I01_m_visual .visual .slide .img {position: relative; overflow: hidden; height: 626px;}
.I01_m_visual .visual .slide .img img{position: relative; width: auto; height: 100%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.I01_m_visual .visual .slide .slogan{position: absolute; width: 96%; top: 140px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); color: #fff; text-align: center; word-break: keep-all;}
.I01_m_visual .visual .slide .slogan .txt1{position: relative; display: inline-block; font-size: 60px; font-weight: 700; margin-bottom: 60px;}
.I01_m_visual .visual .slide .slogan .txt1::after{content: ''; width: 50px; height: 4px; background: #fff; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.I01_m_visual .visual .slide .slogan .txt1::before{content: ''; width: 100px; height: 90px; background: url('/images/common/G_01_main/img_slogan_tit.png') no-repeat center / cover; position: absolute; top: -20px; left: -70px; z-index: -1;}
.I01_m_visual .visual .slide .slogan .txt2{font-size: 20px; font-family: 'NotoL';}
.I01_m_visual .visual .slide .slogan .txt2 span{font-family: 'NotoM';}
.I01_m_visual .control{position:absolute; bottom: 250px; left: calc(50% - 40px); transform: translateX(-50%); -webkit-transform: translateX(-50%);} 
.I01_m_visual .control a{display: inline-block; color: #fff; vertical-align: middle; margin: 0 3px;}
.I01_m_visual .control a.btn_play{display:none;}
.I01_m_visual .slick-dots{position:absolute; left:calc(50% + 35px); transform: translateX(-50%); bottom:252px; }
.I01_m_visual .slick-dots li{float: left; vertical-align: middle;}
.I01_m_visual .slick-dots button{position: relative; display: inline-block; vertical-align: middle; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #b9d9e5;margin: 0 6px; font-size: 0; padding: 0; box-sizing: border-box; cursor: pointer;}
.I01_m_visual .slick-dots .slick-active button{width: 10px; height: 10px; border:0; background: #fff;}
.I01_m_visual .slick-dots .slick-active button::before{content: ''; width: 15px; height: 15px; border-radius: 50%; border:2px dotted #b9d9e5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}

/* 바로가기01 */
.I01_link01 ul::after{display: block; content: ''; clear: both;} 
.I01_link01 ul li{width: 49%; float: left;}
.I01_link01 ul li:last-child{float: right;}
.I01_link01 ul li a{position: relative; display: block; background: #fff; padding: 50px 55px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); transition: border 0.3s;}
.I01_link01 ul li a::before{content: ''; position: absolute; width: 0; height:3px; bottom: 0; left: 0; transition: 0.5s; -webkit-transition: 0.5s;
	background: linear-gradient(to left, #00a1ab, #004e97);
	background: -webkit-linear-gradient(left, #00a1ab, #004e97);
	background: -o-linear-gradient(to left, #00a1ab, #004e97);
	background: -moz-linear-gradient(to left, #00a1ab, #004e97);
}
.I01_link01 ul li a h3{display: inline-block; color: #333; font-size: 30px; font-weight: 700; overflow: hidden; white-space: nowrap; max-width: 100%; margin-bottom: 20px; transition: box-shadow 0.3s; -webkit-transition: box-shadow 0.3s;}
.I01_link01 ul li a h3 em{color: #004e97; transition: color 0.3s; -webkit-transition: color 0.3s;}
.I01_link01 ul li a p{font-size: 18px; height: 54px; overflow: hidden; margin-bottom: 20px;}
.I01_link01 ul li a span{display: inline-block; width: 180px; line-height: 50px; padding: 0 20px; box-sizing: border-box; border: 1px solid #dbdbdb; position: relative; letter-spacing: 0.8px; transition: 0.3s; -webkit-transition: 0.3s;}
.I01_link01 ul li a span i{margin-left: 10px; font-size: 22px; vertical-align: middle; color: #555;}
.I01_link01 ul li a img{position: absolute; bottom: 30px; right: 50px;}
/* 바로가기01:active */
.I01_link01 ul li a:hover::before, .I01_link01 ul li a:focus::before{width: 100%;}
.I01_link01 ul li a:hover h3, .I01_link01 ul li a:focus h3{box-shadow: inset 0 -20px 0 #e0f1f3;}
.I01_link01 ul li a:hover h3 em, .I01_link01 ul li a:focus h3 em{color: #00a1ab;}
.I01_link01 ul li a:hover span, .I01_link01 ul li a:focus span{color: #00a1ab; border: 1px solid #00a1ab; }
.I01_link01 ul li a:hover span i, .I01_link01 ul li a:focus span i{color: #00a1ab;}

/* 공지사항 */
.I01_Notice { position:relative; height:100%; }
.I01_Notice:after { content:""; display:block; clear:both; }
.I01_Notice h2 { position:relative; float:left; max-width:calc((100% - 100px) / 3); padding-right:15px; font-size:24px; }
.I01_Notice h2 ~ h2 { margin-left:15px; }
.I01_Notice h2 a { display:block; overflow:hidden; position:relative; font-weight:400; line-height:3; color:#555; white-space:nowrap; letter-spacing: -1px; transition: color 0.3s; -webkit-transition: color 0.3s;}
.I01_Notice h2 a::after { content: ''; width: 0; height: 0; background: #e9f2fb; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: -1;  transition: 0.3s; -webkit-transition: 0.3s;}
.I01_Notice .list_box { display:none; position:absolute; top:75px; left:0; width:100%; height:auto; border-top:2px solid #000; }
.I01_Notice .list_box.on { display:block; }
.I01_Notice .list_box ul{margin: 0 -20px;}
.I01_Notice .list_box ul::after{display: block; content: ''; clear: both;}
.I01_Notice .list_box ul li{width: 50%; float: left;}
.I01_Notice .list_box ul li a{position: relative; margin: 0 20px; padding: 0 100px 0 80px; display: block; line-height: 60px; border-top: 1px dotted #dbdbdb; font-size: 15px; font-family: 'NotoM'; color: #333;}
.I01_Notice .list_box ul li:nth-of-type(1) a, .I01_Notice .list_box ul :nth-of-type(2) a{border-top: 0;}
.I01_Notice .list_box ul li a .cate{position: absolute; top: 0; left: 0;}
.I01_Notice .list_box ul li a .cate.noti{color: #00a1ab;}
.I01_Notice .list_box ul li a .cate.issue{color: #004e97;}
.I01_Notice .list_box ul li a .txt{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.I01_Notice .list_box ul li a .date{position: absolute; top: 0; right: 0; color: #777;}
.I01_Notice .list_box .btn_more { position: absolute; right: 0; top: -55px; font-size: 24px; color: #333; transition: transform 0.3s; -webkit-transition: transform 0.3s;}
/* 공지사항:active */
.I01_Notice h2 a:hover,
.I01_Notice h2 a:focus,
.I01_Notice h2 a.current { color:#004e97; font-weight: 700;}
.I01_Notice h2 a.current::after { width: 40px; height: 40px;}
.I01_Notice .list_box .btn_more:hover,
.I01_Notice .list_box .btn_more:focus { transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.I01_Notice .list_box ul li a:hover .txt, .I01_Notice .list_box ul li a:focus .txt{text-decoration: underline;}

/* 연구프로젝트 */
.I01_link02{position: relative;}
.I01_link02 h2{padding-bottom: 20px; font-size: 24px; color: #333; font-weight: 600; border-bottom: 2px solid #333;}
.I01_link02 .prg_list{height: 600px; margin: 30px 0 0;}
.I01_link02 ul{padding-left: 3px;}
.I01_link02 ul li{padding-bottom: 55px; border-left: 1px solid #e1e1e1;}
.I01_link02 ul li:last-child{padding-bottom: 0;}
.I01_link02 ul li a{position: relative; display: block; padding: 0 10px 0 30px;}
.I01_link02 ul li a::before{content: ''; width: 7px; height: 7px; border-radius: 50%; background: #333; position: absolute; top: 10px; left: -3.5px;}
.I01_link02 ul li a::after{display: block; content: ''; clear: both;}
.I01_link02 ul li a div{width: calc(100% - 460px); float: left; box-sizing: border-box; padding-right: 10px;}
.I01_link02 ul li a .cate{display: inline-block; background: #00a1ab; color: #fff; padding: 0 15px; font-size: 15px; line-height: 26px;}
.I01_link02 ul li a .date{display: block; color: #777; margin: 30px 0 20px; font-weight: 600; letter-spacing: 1px;}
.I01_link02 ul li a h3{font-size: 20px; color: #333; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 10px; transition: color 0.3s; -webkit-transition: color 0.3s;}
.I01_link02 ul li a .txt{color: #777; font-size: 15px; height: 66px; overflow: hidden;}
.I01_link02 ul li a .img{width: 460px; height: 270px; float: right; position: relative; border: 1px solid #dbdbdb; box-sizing: border-box; overflow: hidden; transition: border 0.3s; -webkit-transition: border 0.3s;}
.I01_link02 ul li a .img::after{content: ''; width: 80px; height: 83px; background: url('/images/common/G_01_main/img_link02_tit.png') no-repeat center / cover; position: absolute; top: 0; left: 0;}
.I01_link02 ul li a .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.I01_link02 .btn_more{position: absolute; top: 0; right: 0; font-size: 24px; color: #333; transition: transform 0.3s; -webkit-transition: transform 0.3s;}
/* 연구프로젝트:active */
.I01_link02 ul li a:hover .img, .I01_link02 ul li a:focus .img{border: 1px solid #00a1ab; }
.I01_link02 ul li a:hover h3, .I01_link02 ul li a:focus h3{color: #00a1ab;}
.I01_link02 .btn_more:hover,
.I01_link02 .btn_more:focus { transform: rotate(180deg); -webkit-transform: rotate(180deg); }

/* 바로가기3 */
.I01_link03{margin-top: 56px;}
.I01_link03 ul{position: relative; padding:0 35px; background: #113a61 url('/images/common/G_01_main/bg_link03.png') no-repeat center / cover;}
.I01_link03 ul li a{position: relative; display: block; border-bottom: 1px dashed #738ba0; color: #fff; padding: 30px 100px 30px 0;} 
.I01_link03 ul li:last-child a{border-bottom: 0;}
.I01_link03 ul li a h3{font-size: 20px; margin-right: 60px; position: relative; margin-bottom: 17px; overflow: hidden;}
.I01_link03 ul li a h3 span{display: block; margin-right: 20px; overflow: hidden; white-space: nowrap;}
.I01_link03 ul li a h3 i{position: absolute; top: 0; right: 0; line-height: 30px; transition: 0.3s; -webkit-transition: 0.3s;}
.I01_link03 ul li a p{word-break: keep-all; font-size: 15px; line-height: 25px; color: #e2e2e2; height: 50px; overflow: hidden;}
.I01_link03 ul li a .img{position: absolute; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.I01_link03 ul li a .img img{transition: transform 0.3s; -webkit-transition: transform 0.3s;}
/* 바로가기3:active */
.I01_link03 ul li a:hover .img img, .I01_link03 ul li a:focus .img img{transform: translateY(-10px); -webkit-transform: translateY(-10px);}
.I01_link03 ul li a:hover h3 i, .I01_link03 ul li a:focus h3 i{transform: rotate(180deg); -webkit-transform: rotate(180deg);}

/* 배너 */
/* .bn_wrap{width:100%; border-top:1px solid #ddd;}
.bn_wrap .bn_box{position:relative; width:100%; max-width:1400px; margin:0 auto;}
.bn_wrap h2{position: absolute; left:0; top:50%; margin-top:-10px; line-height:20px; font-size:16px; font-family: 'NotoM';}
.bn_wrap ul{margin:20px 0 20px 230px; overflow:hidden;}
.bn_wrap ul li{float:left;}
.bn_wrap ul li a{display:block; margin:0 2px; text-align:center;}
.bn_wrap ul li a img{max-width:100%; height:35px;}
.bn_wrap .slick-arrow{position:absolute; top:50%; width:34px; height:35px; margin-top:-17px; display:block; text-indent:-99999%; overflow:hidden; cursor:pointer; }
.bn_wrap .slick-next{left:149px; background:url('/images/common/G_01_main/btn_b_next.png') no-repeat center; }
.bn_wrap .slick-prev{left:80px; background:url('/images/common/G_01_main/btn_b_prev.png') no-repeat center; }
.bn_wrap .slick-arrow:hover{background-color:rgba(0, 0, 0, 0.2); border-color:#156386; }
.bn_wrap .btn_box a{display:block; position:absolute; top:50%; width:34px; height:35px; margin-top:-17px; text-indent:-99999%; overflow:hidden;}
.bn_wrap .btn_box .control a{left:114px; width:35px; }
.bn_wrap .btn_box a.btn_stop{background:url('/images/common/G_01_main/btn_b_stop.png') no-repeat center; }
.bn_wrap .btn_box a.btn_play{display:none; background:url('/images/common/G_01_main/btn_b_play.png') no-repeat center; }
.bn_wrap .btn_box a.btn_list{left:183px; background:url('/images/common/G_01_main/btn_b_list.png') no-repeat center; } */

@media screen and (max-width:1420px) { 
	/* 연구프로젝트 */
	.I01_link02 ul li a div{width: 45%;}
	.I01_link02 ul li a .img{width: 55%;}
	
	/* 배너 */
	.bn_wrap .bn_box{width:95%;}

}

@media screen and (max-width:1200px) { 
	#container{padding-top: 0;}

	/* 메인비주얼 */
	.I01_m_visual .visual .slide .img{height: 550px;}
	.I01_m_visual .visual .slide .slogan{top: 100px;}
	.I01_m_visual .visual .slide .slogan .txt1{font-size: 55px;}
	.I01_m_visual .slick-dots{bottom: 242px;}
	.I01_m_visual .control{bottom: 240px;}

	/* 바로가기3 */
	.I01_link03 ul li a h3{margin-right: 20px;}
	.I01_link03 ul li a{padding: 30px 70px 30px 0;}
	.I01_link03 ul li a .img img{width: 65px; height: auto;}
}

@media screen and (max-width:1024px) {
	/* 메인비주얼 */
	.I01_m_visual .visual .slide .img{height: 440px;}
	.I01_m_visual .visual .slide .slogan{top: 90px;}
	.I01_m_visual .visual .slide .slogan .txt1{font-size: 45px; margin-bottom: 50px;}
	.I01_m_visual .visual .slide .slogan .txt1::before{width: 80px; height: 72px; top: -10px; left: -50px;}
	.I01_m_visual .visual .slide .slogan .txt1::after{bottom: -25px;}
	.I01_m_visual .slick-dots{bottom: 152px;}
	.I01_m_visual .control{bottom: 150px;}

	/* 바로가기1 */
	.I01_link01 ul li a{padding: 40px 30px;}
	.I01_link01 ul li a h3{font-size: 24px; margin-bottom: 15px;}
	.I01_link01 ul li a p{font-size: 16px;}
	.I01_link01 ul li a img{width: 85px; height: auto; right: 30px;}

	/* 공지사항 */
	.I01_Notice h2 a{font-size: 22px;}
	.I01_Notice .list_box{top: 70px;}
	
	/* 연구프로젝트 */
	.I01_link02 h2{font-size: 22px;}
	.I01_link02 ul li a div{width: 50%;}
	.I01_link02 ul li a .img{width: 50%;}

	/* 바로가기3 */
	.I01_link03 ul::after{display: block; content: ''; clear: both;}
	.I01_link03 ul::before{content: ''; width: 1px; height: calc(100% - 50px); position: absolute; left: 50%; top: 25px; border-left:1px dashed #738ba0;}
	.I01_link03 ul li{width: 50%; float: left;}
	.I01_link03 ul li a{margin: 0 20px;}
	.I01_link03 ul li:nth-of-type(n+3) a{border-bottom: 0;}
	.I01_link03 ul{padding: 0 10px;}
}

@media screen and (max-width:860px) {
	/* hover값 초기화 */
	.I01_link01 ul li a:hover::before{width:0%;}
	.I01_link01 ul li a:hover h3{box-shadow:none;}
	.I01_link01 ul li a:hover h3 em{color: #004e97;}
	.I01_link01 ul li a:hover span{color: #666; border: 1px solid #dbdbdb; }
	.I01_link01 ul li a:hover span i{color: #00a1ab;}

	.I01_Notice h2 a:hover{ color:#666; font-weight: 400;}
	.I01_Notice .list_box .btn_more:hover { transform: none; -webkit-transform: none; }
	.I01_Notice .list_box ul li a:hover .txt{text-decoration: none;}

	.I01_link02 ul li a:hover .img{border: 1px solid #dbdbdb; }
	.I01_link02 ul li a:hover h3{color: #333;}
	.I01_link02 .btn_more:hover { transform: none; -webkit-transform:none; }

	.I01_link03 ul li a:hover .img img {transform: none; -webkit-transform: none;}
	.I01_link03 ul li a:hover h3 i{transform: none; -webkit-transform: none;}


	/* 메인비주얼 */
	.I01_m_visual .visual .slide .slogan .txt1{font-size: 40px;}
	.I01_m_visual .visual .slide .slogan .txt1::before{width: 60px; height: 54px;}

	/* 바로가기1 */
	.I01_link01 ul li a{padding: 30px;}
	.I01_link01 ul li a span{width: 150px; font-size: 13px; line-height: 45px;}

	/* 공지사항 */
	.I01_Notice .list_box ul li{width: 100%;}
	.I01_Notice .list_box ul li:nth-of-type(n+4){display: none;}
	.I01_Notice .list_box ul :nth-of-type(2) a{border-top: 1px dotted #dbdbdb;}

	/* 바로가기3 */
	.I01_link03 ul::before{display: none;}
	.I01_link03 ul li{width: 100%;}
	.I01_link03 ul li:nth-of-type(3) a{border-bottom: 1px dashed #738ba0;}
	.I01_link03 ul li a{padding-right: 100px;}
	.I01_link03 ul li a p{height: auto;}
}

@media screen and (max-width:680px) {
	/* 공지사항 */
	.I01_Notice h2 a.current::after{width: 30px; height: 30px;}

	/* 바로가기1 */
	.I01_link01 ul li{width: 100%; margin-bottom: 20px;}

	/* 바로가기3 */
	.I01_link03{margin-top: 30px;}
}

@media screen and (max-width:600px) {
	/* 메인비주얼 */
	.I01_m_visual .visual .slide .slogan .txt1{font-size: 35px;}
	.I01_m_visual .visual .slide .slogan .txt2{font-size: 18px;}

	/* 연구프로젝트 */
	.I01_link02 .prg_list{height: 450px;}
	.I01_link02 ul li{padding-bottom: 0;}
	.I01_link02 ul li:nth-of-type(n+2){display: none;}
	.I01_link02 ul li a div{width: 100%; padding-right: 0; margin-bottom: 20px;}
	.I01_link02 ul li a .img{width: 100%; height: 220px;}
	.I01_link02 ul li a .date{margin: 15px 0;}
	.I01_link02 ul li a h3{margin-bottom: 15px;}
	.I01_m_visual .slick-dots{bottom: 132px;}
	.I01_m_visual .control{bottom: 130px;}
}

@media screen and (max-width:480px) {
	/* 메인비주얼 */
	.I01_m_visual .visual .slide .slogan{top: 50px;}
	.I01_m_visual .visual .slide .slogan .txt1{font-size: 30px; margin-bottom: 40px;}
	.I01_m_visual .visual .slide .slogan .txt1::before{width: 40px; height: 36px; left: -20px;}
	.I01_m_visual .visual .slide .slogan .txt1::after{bottom: -15px;}
	.I01_m_visual .visual .slide .img{height: 360px;}

	/* 바로가기1 */
	.I01_link01 ul li a h3{font-size: 21px;}

	/* 공지사항 */
	.I01_Notice h2{padding-right: 0; max-width:calc((100% - 60px) / 3);}
	.I01_Notice h2 a{font-size: 19px;}
	.I01_Notice .list_box{top: 60px;}
	.I01_Notice .list_box .btn_more{top: -50px;}

	/* 연구프로젝트 */
	.I01_link02 h2{font-size: 19px; padding-bottom: 10px;}
	.I01_link02 .btn_more{top: -5px;}
	.I01_link02 ul li a{padding: 0 10px 0 15px;}
}

@media screen and (max-width:380px) {
	/* 메인비주얼 */
	.I01_m_visual .visual .slide .slogan .txt1{font-size: 26px;}
	.I01_m_visual .visual .slide .slogan .txt2{font-size: 16px;}

	/* 바로가기1 */
	.I01_link01 ul li a h3{margin-bottom: 10px;}
	.I01_link01 ul li a{padding: 20px;}
	.I01_link01 ul li a p{font-size: 15px;}
	.I01_link01 ul li a span{line-height: 40px;}
	.I01_link01 ul li a img{width: 70px; right: 20px; bottom: 20px;}

	/* 바로가기3 */
	.I01_link03 ul li a{padding-right: 90px; margin: 0 15px;}
	.I01_link03 ul li a p{line-height: 22px;}
}