﻿@charset "utf-8";

/* 안내문 */
.info-box {position:relative; padding:20px 20px 20px 120px; color:#333; border:1px solid #d1d8e4; font-size:14px; line-height:140%; margin-bottom:30px; letter-spacing:-0.3px;}
.info-box:before {position:absolute; top:50%; left:25px; margin-top:-36px; content:''; display:block; width:72px; height:72px; background:url('/images/org/web/gnise/sub/infobox_ico.png') no-repeat -90px 0}
.info-box.ico01:before { background-position:0 0}
.info-box.ico03:before { background-position:-180px 0}
.info-box.ico04:before { background-position:-270px 0}
.info-box.ico05:before { background-position:-360px 0}

/*센터소개*/
.orchart_01 { width: 100%; margin: 0 auto; height: auto; clear: both; background: 0 0; position: relative }
.orchart_01>li { width: 100%; text-align: center }
.orchart_01>ul>li:nth-child(1) {width: 180px; height:180px; line-height:30px; color:#fff; font-weight:bold; font-size:25px; box-sizing: border-box; background-color: #39947c; border-radius: 50%; margin-left: calc(50% - 90px); margin-right: calc(50% - 90px); padding:60px 40px; text-align: center }
.orchart_01>ul>li:nth-child(2) {position:relative; padding-top:40px; }
.orchart_01>ul>li:nth-child(2):after{display:block; content:''; width:1px; height:40px; position:absolute; top:0; left:50%; background:#999;}
.orchart_01>ul>li:nth-child(2)>ul>li>ul { height:130px; box-sizing: border-box; border: 1px solid #ccc; background-color: #fff; border-radius: 3px }
.orchart_01>ul>li:nth-child(2)>ul {display:inline-block; text-align: center; width: 100% }
.orchart_01>ul>li:nth-child(2)>ul>li {width:50%; float:left;}
.orchart_01>ul>li:nth-child(2)>ul>li>div {width:100%; height:50px; padding:15px; color: #fff; font-size:18px; font-weight:bold; box-sizing: border-box; text-align: center }
.orchart_01>ul>li:nth-child(2)>ul>li:nth-child(1)>div { background-color: #21873A;}
.orchart_01>ul>li:nth-child(2)>ul>li:nth-child(2)>div { background-color: #3e8685;}
.orchart_01>ul>li:nth-child(2)>ul>li:nth-child(3)>div { background-color: #6e668f;}
.orchart_01>ul>li:nth-child(2)>ul>li:nth-child(4)>div { background-color: #387d9e;}
.orchart_01>ul>li:nth-child(2)>ul>li:nth-child(5)>div { background-color: #36548f; }
.orchart_01>ul>li:nth-child(2)>ul>li>ul>li { box-sizing: border-box; padding: 5px 5px 5px 20px; background: url(/images/org/web/gnise/sub/dot.png) 10px center no-repeat; margin: 3px; text-align: left }
.orchart_01>ul>li:nth-child(3) { font-weight: 700; height: 50px; line-height: 40px; color: #fff; text-align: center; padding-top: 140px;}
.orchart_01>ul>li:nth-child(3)>div { background-color: #000; padding: 10px 20px; font-size: 20px; border-radius: 40px }
.orchart_01 .tit{position:relative; display:block; width:100%; margin-top:80px; padding:15px 0; line-height:30px; font-size:20px; font-weight:bold; background:#3e454c; color:#fff;}
.orchart_01 .tit:before{display:block; content:''; width:32px; height:36px; position:absolute; top:-60px; left:50%; background: url(/images/org/web/gnise/sub/img_arrow_b.png) no-repeat;}

/*보조공학 181116 */
.as_technology li{width:25%; float:left; text-align:center;}
.as_technology li img{width:200px; height:200px;}
.as_technology li p{margin-top:5px;}

/*보조공학기기 안내 181224 */
.as_technology2 li{width:10.2%; margin:5px 0 0 5px; padding:7px; text-align:center; border:1px solid #ccc; float:left; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
.as_technology2 li:first-child{margin-left:0;}
.as_technology2 li span { display:block; width:70px; height:70px; background-size:70px !important; margin:0 auto 5px} 
.as_technology2 li span.ico1 { background:url('/images/org/web/gnise/sub/ico_050401_1.png') no-repeat 50% 50%}
.as_technology2 li span.ico2 { background:url('/images/org/web/gnise/sub/ico_050401_2.png') no-repeat 50% 50%}
.as_technology2 li span.ico3 { background:url('/images/org/web/gnise/sub/ico_050401_3.png') no-repeat 50% 50%}
.as_technology2 li span.ico4 { background:url('/images/org/web/gnise/sub/ico_050401_4.png') no-repeat 50% 50%}
.as_technology2 li span.ico5 { background:url('/images/org/web/gnise/sub/ico_050401_5.png') no-repeat 50% 50%}
.as_technology2 li span.ico6 { background:url('/images/org/web/gnise/sub/ico_050401_6.png') no-repeat 50% 50%}
.as_technology2 li span.ico7 { background:url('/images/org/web/gnise/sub/ico_050401_7.png') no-repeat 50% 50%}
.as_technology2 li span.ico8 { background:url('/images/org/web/gnise/sub/ico_050401_8.png') no-repeat 50% 50%}

.as_technology2 li span.ico1_on { background:url('/images/org/web/gnise/sub/ico_050401_1_on.png') no-repeat 50% 50% !important; background-size:70px !important;}
.as_technology2 li span.ico2_on { background:url('/images/org/web/gnise/sub/ico_050401_2_on.png') no-repeat 50% 50% !important; background-size:70px !important;}
.as_technology2 li span.ico3_on { background:url('/images/org/web/gnise/sub/ico_050401_3_on.png') no-repeat 50% 50% !important; background-size:70px !important;}
.as_technology2 li span.ico4_on { background:url('/images/org/web/gnise/sub/ico_050401_4_on.png') no-repeat 50% 50% !important; background-size:70px !important;}
.as_technology2 li span.ico5_on { background:url('/images/org/web/gnise/sub/ico_050401_5_on.png') no-repeat 50% 50% !important; background-size:70px !important;}
.as_technology2 li span.ico6_on { background:url('/images/org/web/gnise/sub/ico_050401_6_on.png') no-repeat 50% 50% !important; background-size:70px !important;}
.as_technology2 li span.ico7_on { background:url('/images/org/web/gnise/sub/ico_050401_7_on.png') no-repeat 50% 50% !important; background-size:70px !important;}
.as_technology2 li span.ico8_on { background:url('/images/org/web/gnise/sub/ico_050401_8_on.png') no-repeat 50% 50% !important; background-size:70px !important;}

.technologySearch .search{width:85%; height:25px; border:1px solid #ccc;}

/* 탭_on */
.as_technology2 li:hover span {transition:transform 300ms ease-in-out 0s; transform:rotate(360deg); transform: rotateY(360deg); transition:transform 300ms ease-in-out 0.1s;}
.as_technology2 li:hover span.ico1 { background-image:url('/images/org/web/gnise/sub/ico_050401_1_on.png'); }
.as_technology2 li:hover span.ico2 { background-image:url('/images/org/web/gnise/sub/ico_050401_2_on.png'); }
.as_technology2 li:hover span.ico3 { background-image:url('/images/org/web/gnise/sub/ico_050401_3_on.png'); }
.as_technology2 li:hover span.ico4 { background-image:url('/images/org/web/gnise/sub/ico_050401_4_on.png'); }
.as_technology2 li:hover span.ico5 { background-image:url('/images/org/web/gnise/sub/ico_050401_5_on.png'); }
.as_technology2 li:hover span.ico6 { background-image:url('/images/org/web/gnise/sub/ico_050401_6_on.png'); }
.as_technology2 li:hover span.ico7 { background-image:url('/images/org/web/gnise/sub/ico_050401_7_on.png'); }
.as_technology2 li:hover span.ico8 { background-image:url('/images/org/web/gnise/sub/ico_050401_8_on.png'); }

/* 교육장 인사말 */
.greeting_officer { position:relative}
.greeting_officer .img { display:block; position:absolute; top:15px; left:0}
.greeting_officer .txt_hd{ margin-left:268px; font-size:25px; color:#374e66; line-height:140%; letter-spacing:-1.5px; margin-bottom:20px;}
.greeting_officer .txt_hd em{ font-weight:bold}
.greeting_officer .col_gr{ color:#179472;}
.greeting_officer .col_bl{ color:#005ebe;} 
.greeting_officer .txt_cnt{ margin-left:268px; color:#666; font-size:15px; letter-spacing:-0.5px; line-height:150%; margin-bottom:30px}
.greeting_officer .txt_cnt em{ font-size:17px; font-weight:bold}
.greeting_officer .txt_ft{ margin-left:268px; text-align:right; font-size:15px; color:#666;}
.greeting_officer .txt_ft img{ margin-left:10px; vertical-align:middle}

/* 연혁 180825 수정 */
.historyList{ overflow:hidden; text-align:center;}
.historyList .list{width:100%; font-size:14px; overflow:hidden; background:url('/images/org/web/gnise/sub/history_line_bg.png') repeat-y center;}
.historyList .list .last{ width:7px; height:7px; background-color:#ddd; border-radius:50%; position:absolute; left:50%; margin-left:-3.5px; bottom:35px}
.historyList .list .right{width:50%; margin-right:6px; float:right; background:url('/images/org/web/gnise/sub/history_right_bg.png') no-repeat left 20px;}
.historyList .list .right ul{float:right; text-align:left;}
.historyList .list .left{width:50%; margin-left:6px; float:left; background:url('/images/org/web/gnise/sub/history_left_bg.png') no-repeat right 20px;}
.historyList .list .left ul{float:left; text-align:right;}
.historyList .list ul{width:75%; border-radius:10px; padding:20px 30px; background:#fff; border:1px solid #ddd;}
.historyList .list ul li{line-height:30px;}
.historyList .list ul li.tit{font-size:20px; font-weight:bold; color:#001f66; margin-bottom:10px;}
.historyList .list ul li > span{ font-weight:bold; margin-right:8px}
.historyList .list .y2010 ul{background:#f2f6fb; border:1px solid #ddd; }
.historyList .list .y2010{background:url('/images/org/web/gnise/sub/history_y2010_bg.png') no-repeat left top;}

/*  CI */
.ci_wrap {position:relative;}
.ci_wrap .ci-down{ position:absolute; top:0; right:0}
.ci_wrap .boxTy03 .box {padding:30px 20px}
.ci_wrap  p{ font-size:14px; line-height:150%}
.ci_wrap  p span{ color:#005bbd; font-weight:bold}
.ci_wrap .logoType{ overflow:hidden}
.ci_wrap .logoType li{ float:left;  width:48%; margin-left:4%}
.ci_wrap .logoType li:first-child{ margin-left:0}

/*운영방향*/
.orchart_01 { width: 100%; margin: 0 auto; height: auto; clear: both; background: none; position: relative; text-align: center }
.orchart_01>li { width: 100%; text-align: center }
.orchart_01>li:nth-child(1) { height: 260px; background: url('/images/org/web/gnise/sub/ogrul_bg.png') no-repeat 50% 50%; color: #ffffff; font-weight: 600; font-size:25px; padding-top: 90px; box-sizing: border-box }
.orchart_01>li:nth-child(1)>span { color: #ffffff; font-weight: bold; font-size: 24px }
.orchart_01>li:nth-child(2) { display: inline-block; width: 590px; border: 3px solid#ccc; border-radius: 20px; padding-top: 35px; height: 392px; color: #333; font-weight: bold; font-size: 20px; box-sizing: border-box }
.orchart_01>li:nth-child(2)>span { background: #FFF; display: block; padding: 10px; width: 30%; margin: 0 auto; margin-top: -65px; color: #333; font-weight: bold; font-size: 20px; line-height: 35px }
.orchart_01>li:nth-child(3) { background: url('/images/org/web/gnise/sub/ogrul_bg1.png') no-repeat; height: 215px; line-height:25px; background-position: center top; padding-top: 70px; margin-top: -320px; color: #1254d6; font-weight: bold; font-size: 18px }
.orchart_01>li:nth-child(4) { position: relative; background-position: center top; margin-top: -310px; height: 370px }
.orchart_01>li:nth-child(4)>ul { width: 100%; text-align: center }
.orchart_01>li:nth-child(4)>ul>li:nth-child(1), .orchart_01>li:nth-child(4)>ul>li:nth-child(2), .orchart_01>li:nth-child(4)>ul>li:nth-child(3), .orchart_01>li:nth-child(4)>ul>li:nth-child(4) { width: 188px; display: inline-block; border-radius: 10px; padding: 20px; font-size: 16px; color: #fff; margin: 0 auto; position: absolute }
.orchart_01>li:nth-child(4)>ul>li:nth-child(1) {background-color: #349d81;top: 0px;left: 50%;margin-left: -390px} /* 221013 접근성 */
.orchart_01>li:nth-child(4)>ul>li:nth-child(2) {background-color: #006dd5;top: 155px;left: 50%;margin-left: -390px} /* 221013 접근성 */
.orchart_01>li:nth-child(4)>ul>li:nth-child(3) {background-color: #387d9e;top: 0px;left: 50%;margin-left: 162px} /* 221013 접근성 */
.orchart_01>li:nth-child(4)>ul>li:nth-child(4) {background-color: #1a506a;top: 155px;left: 50%;margin-left: 162px} /* 221013 접근성 */
.orchart_01>li:nth-child(4)>ul>li>img { margin-bottom: 10px; clear: both }
.orchart_01>li:nth-child(5) {height: 208px; padding-top:55px;  background: url('/images/org/web/gnise/sub/ogrul_bg3.png') no-repeat center top; line-height:30px; color: #fff; font-size: 17px; font-weight: 600;box-sizing: border-box }
.orchart_01>li:nth-child(5)>ul>li { background-position: center top; height: 50px; margin-top: -10px; color: #333; font-size: 18px; font-weight: 600; box-sizing: border-box; padding-top: 16px }

/* 조직업무안내 */
.systemInfo .tit{position:relative; z-index:10; text-align:center;}
.systemInfo .wrap{position:relative; z-index:1; top:-5px; display:inline-block; width:90%; background:url('/images/org/web/gnise/sub/system_bg.gif'); border:1px solid #ddd; padding:25px 4%;}
.systemInfo .wrap ul{display:inline-block; margin:0 auto; width:100%;}
.systemInfo .wrap ul li{width:46.7%; height:320px; background:#f6fafe; float:left; text-align:center; border:1px solid #ddd; letter-spacing: -1px;; margin:25px 1.5%;}
.systemInfo .wrap ul li h2{ font-size:18px;; color:#fff; line-height:45px; background:url('/images/org/web/gnise/sub/system_tit_bg.gif');}
.systemInfo .wrap ul li p{margin:20px 15px; border:1px solid #ddd;}
.systemInfo .wrap ul li p span{background:#fff; border-bottom:1px solid #ddd; display:block; line-height:45px;}
/*180827*/
.systemInfo .wrap ul li p span.info_01{background:#f5f9ff url('/images/org/web/gnise/sub/system_bg2.png');}
.systemInfo .wrap ul li p span.info_03{background:#f5f9ff url('/images/org/web/gnise/sub/system_bg2.png');}
.systemInfo .wrap ul li p span.info_05{background:#f5f9ff url('/images/org/web/gnise/sub/system_bg2.png');}

/* 181116 추가 대여절차 및 서식 */
.list_st01 {margin-top :20px; margin-bottom:20px;}
.list_st01 > li{float:left; width:32%; margin-left:2%;}
.list_st01 > li:first-child {margin-left:0;}
.list_st01 span{background:url('/images/org/web/gnise/sub/050402_02.png'); padding:3px 8px; background-repeat:no-repeat; background-position:center; color:#ffffff;}

/*텍스트배경 241204*/
.bg_red, .bg_gray, .bg_blue, .bg_navy, .bg_org, .bg_black, .bg_green, .bg_yellow { padding:1px 0.5rem !important; color:#fff !important; display:inline-block; }
.bg_gray { background:#333 !important; }
.bg_black { background:#000 !important; }
.bg_blue { background:#254ba6 !important; }

.bg_red { background:#c00426 !important; }
.bg_navy { background:#091f46 !important; }
.bg_org { background:#ff4400 !important; }
.bg_green { background:#099e5e !important; }
.bg_yellow { background:#eb8809 !important; }

@media screen and (max-width:1019px) {
	
	/*센터소개*/	
	.orchart_01>ul>li:nth-child(2) { background: 0 0 }
	
	/*보조공학 181116 */
	.as_technology li{width:50%;}
	.as_technology li img{width:90%; height:auto;}
	.as_technology li p{padding:5px 0 20px;}
	
	/*보조공학기기 안내 181116 */
	.as_technology2 li{width:11.8%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }/*181127*/
	.as_technology2 li:nth-child(5){font-size:12px;}
	.technologySearch .search{width:100%;}
	.technologySearch a.sw-btn{margin-top:5px; float:right;}
	
	/* 교육장 인사말 */
	.greeting_officer .txt_hd, .greeting_officer .txt_cnt, .greeting_officer .txt_ft{ margin-left:240px}
	
	
}





@media screen and (max-width:800px) {
	
	
	/* 안내문 */
	.info-box {margin-bottom:20px}	
	
	
	/*보조공학기기 안내 181127 */
	.as_technology2 li{width:23.6%;}
	.as_technology2 li:nth-child(5){margin-left:0;}
	.as_technology2 li img{width:60px; height:60px;}
	
	/* 교육장 인사말 */
	.greeting_officer .txt_hd, .greeting_officer .txt_cnt, .greeting_officer .txt_ft{ margin-left:0}
	.greeting_officer .img {width:auto; display:block; position:relative; top:auto; left:auto; text-align:center; margin-bottom:20px;}
	.greeting_officer .img img{ width:auto;}
			
	/* CI */
	.ci_wrap .ci-down{ position:relative; top:auto; right:auto; margin-bottom:30px}
	.ci_wrap .logoType li{width:100%; margin-left:0; margin-top:20px}
	.ci_wrap .logoType li:first-child{ margin-top:0}
	
	/*운영방향*/
	.orchart_01>li:nth-child(2) { width: 100%; margin: 0 auto; border: none; height: 50px }
	.orchart_01>li:nth-child(2)>span { width: 100%; margin: -30px auto 0; padding: 0 }
	.orchart_01>li:nth-child(3) { height: 150px; margin-top: 0 }
	.orchart_01>li:nth-child(4) { height: 320px; margin-top: 0 }
	.orchart_01>li:nth-child(4)>ul>li:nth-child(1) { top: 0; left: 50%; margin-left: -233px }
	.orchart_01>li:nth-child(4)>ul>li:nth-child(2) { top: 155px; left: 50%; margin-left: -233px }
	.orchart_01>li:nth-child(4)>ul>li:nth-child(3) { top: 0; left: 50%; margin-left: 5px }
	.orchart_01>li:nth-child(4)>ul>li:nth-child(4) { top: 155px; left: 50%; margin-left: 5px }
	
	/* 181116 추가 대여절차 및 서식 */
	.list_st01 > li{width:100%; margin-left:0%; margin-top:10px;}

}

@media screen and (max-width:680px) {
	
	/* 안내문 */
	.info-box {padding:16px}
	.info-box:before { background-image:none}
	
	/*센터소개*/
	.orchart_01>ul>li:nth-child(2)>ul>li {width:100%;}

	/* 교육장 인사말 */	
	.greeting_officer .txt_hd{font-size:20px; letter-spacing:-1px}
	
		/* 연혁 */ 
	.historyList > img{ width:50%; height:auto}
    .historyList .list .right ul, .historyList .list .left ul {width:95%;}
	.historyList .list ul li > span{ display:block; margin-right:0}
	
	/* 181116 추가 대여절차 및 서식 */
	.btn_mg a {margin-left:0!important; margin-right:0!important; margin-top:10px;}
}

@media screen and (max-width:580px) {
	
	/* CI */
	.ci_wrap .cg-btn { display:block; margin:0 0 5px}
	.ci_wrap .logoType li:last-child .boxTy03 .box img { width:70%; height:auto}
	
	/* 연혁 */ 
	.historyList > img{ width:60%}
		
	/*운영방향*/
	.orchart_01>li:nth-child(1) { line-height:30px; background-position: 50% 70%;}
	.orchart_01>li:nth-child(4) { height: auto }
	.orchart_01>li:nth-child(4)>ul>li:nth-child(1), .orchart_01>li:nth-child(4)>ul>li:nth-child(2), .orchart_01>li:nth-child(4)>ul>li:nth-child(3), .orchart_01>li:nth-child(4)>ul>li:nth-child(4) { position: relative; left: 0; top: 0; margin-left: 0; width: 80%; padding: 10%; margin-top: 5% }
	.orchart_01>li:nth-child(4)>ul>li:nth-child(4) { margin-bottom: 5% }
	.orchart_01>li:nth-child(5)>ul>li { font-size: 14px; font-weight: 700 }
	
}

@media screen and (max-width:480px) {
	
	/*보조공학기기 안내 181127 */
	.as_technology2 li:nth-child(5){margin-left:0; letter-spacing:-2px;}
	
	/* 교육장 인사말 */	
	.greeting_officer .txt_ft{ text-align:left}
	
	/*운영방향*/
	.orchart_01>li:nth-child(1) {font-size:20px;}
}

@media screen and (max-width:380px) {


	
}





