@charset "utf-8";

@font-face {
  font-family: 'NanumGothic';
  src: url('font/NanumGothic.eot');
  src: url('font/NanumGothic.eot?#iefix') format('embedded-opentype'),
       url('font/NanumGothic.woff') format('woff'),
       url('font/NanumGothic.ttf') format('truetype'),
       url('font/NanumGothic.svg#NanumGothic') format('svg');
}
@font-face {
  font-family: 'NanumGothicBold';
  src: url('font/NanumGothicBold.eot');
  src: url('font/NanumGothicBold.eot?#iefix') format('embedded-opentype'),
       url('font/NanumGothicBold.woff') format('woff'),
       url('font/NanumGothicBold.ttf') format('truetype'),
       url('font/NanumGothicBold.svg#NanumGothicBold') format('svg');
}

/* Reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,blockquote,strong,b,strong{margin:0; padding:0; font:14px 'NanumGothic'; color:#000; letter-spacing:0;}
form{display:inline;}
fieldset,img,iframe,frame{border:0;}
legend,caption{overflow:hidden;position:absolute;font-size:0;line-height:0;visibility:hidden;}
img{vertical-align:middle;border:0;}
img,input,fieldset{border:0 none;outline:none;text-indent:5px;}
ul,ol,li,dl,dt,dd{list-style:none;margin:0;padding:0;}
em,address{font-style:normal}
a:link{color:#000; text-decoration:none}
a:visited,a:active{text-decoration:none;color:#999;}
legend,hr,caption{display:none;}
input,select,textarea,button{vertical-align:middle;}
textarea{overflow-y:scroll; padding:5px;}
table{border-collapse: collapse; border-spacing:0; border:0; width:100%;}
button{font-size:12px;}
a{display:block;}
html,body,#wrap{height:100%;}


@media screen and (min-width: 768px) {
	/************ header ************/
	#header{background:#232732;}
/*	#header>div{height:100px; width:1100px; margin:auto;} 원본*/
	#header>div{height:100px; width:1400px; margin:auto;}
	#header h1{padding-top:25px; float:left;}
/*	#header h1 a{background:url(../img/logo1.png) no-repeat; width:240px; height:50px; font-size:0;}*/
	#header h1 a {color : white; font-size:3em; text-align:center;}
	#header ul{float:right; overflow:hidden; margin-top:30px;}
	#header ul li{float:left; padding-left:30px;}
	#header ul li a{padding:10px 20px; color:#fff; font:18px NanumGothicBold;}
	#header ul li:hover a,#header ul li.active a{color:yellow;}

	/************ main ************/
	#main{background:#eee; padding-bottom:30px}
	.se{display:block; text-align:center; padding-bottom:40px;}
	.se img{height:50px;cursor:pointer;}
	.banner>img{display:none;}
	.banner{height:530px; overflow:hidden; position:relative; min-width:1100px;  background:url(../img/banner.jpg) no-repeat top center;}
	.banner>img{width:100%;}
	.big .banner>img{display:none;}
	.banner>div{width:1100px; position:absolute; left:50%; top:0; z-index:5; margin-left:-550px;}
	.banner ul{width:450px; background:rgba(255,40,70,0.9); padding:30px; float:left; height:530px}
	.banner ul li{display:none; color:#fff; line-height:20px;}
	.banner ul li.active{display:block;}
	.banner ul li div h2{font:50px/55px NanumGothicBold; letter-spacing:-2px; color:#fff; letter-spacing:-1px;}
	.banner ul li div h2 span{font:16px NanumGothic; color:#fff; display:block; padding-bottom:2px; letter-spacing:0;}
	.banner ul li div b{display:block; color:yellow; font:40px NanumGothicBold; padding:12px 0 20px;}
	.banner ul li div a{margin-top:40px; background:#fff; border-radius:40px; color:#222; font:20px/50px NanumGothicBold; width:230px; text-align:center;}
	.banner ol{float:right; width:500px; margin-top:90px}
	.banner ol li{float:left; width:120px; height:80px; background:rgba(255,255,255,0.7); color:#000; font:20px NanumGothicBold; border-radius:110px; margin:15px 5px; text-align:center; padding-top:40px; border:7px solid rgba(255,255,255,0.7); position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.4)}
	.banner ol li span{display:block; text-align:center;}
	.banner ol li img{position:absolute; left:20px; top:-15px}

	.notice{border-bottom:1px solid #ddd; margin-bottom:40px; background:#fff;}
	.notice>div{width:1100px; margin:auto; overflow:hidden;}
	.notice div div{float:left; padding:20px 0 20px 20px; width:510px;}
	.notice div div:first-child{border-right:1px solid #ddd; width:509px; padding:20px 0;}
	.notice h3{float:left; margin-right:20px; font:24px NanumGothicBold;}
	.notice div div ul li{font:14px/20px NanumGothicBold; padding:2px; color:#000}
	.notice div div ul li b{background:#274a7f; color:#fff;display:inline-block; width:70px; text-align:center; margin-right:10px; font:12px/20px NanumGothic; height:20px; overflow:hidden; vertical-align:top;}

	/************ 컬리큘럼 ************/
	#class{width:1100px; margin:auto; padding:50px 0; min-height:600px}
	.title h2{font:40px NanumGothicBold; color:#333; padding-bottom:20px;}
	.title p{font:16px/22px NanumGothic; color:#6c717f; padding-bottom:30px;}
	#class p b{display:block; background:url(../img/point.jpg) no-repeat left 33px; padding:35px 0 20px 33px; font:18px NanumGothic; color:#555}
	#class p strong{display:block; font:30px NanumGothic; padding-bottom:10px; color:#334986}
	.tab{position:relative; height:588px;  }
	.tab:after{display:block; content:""; clear:both;}
	.tab li{float:left;}
	.tab li a{text-align:center; padding:0 58px;background:#4582b6; color:#fff; font:18px/40px NanumGothicBold; border:1px solid #4582b6;  border-left:2px solid #4582b6;  border-top:1px solid #4582b6;}
	.tab li.active a{background:#fff; color:#244e8c; border-bottom-color:#fff; border-right:2px solid #4582b6;}
	.tab li div{display:none; position:absolute; left:0; top:41px; width:1024px; background:#fff; padding:30px; border:3px solid #4582b6; border-width:0 2px 2px 2px}
	.tab li.active div{display:block;}
	.tab li h2{font:30px/40px Coalition; padding-bottom:10px; color:#fb3354}
	.tab li div p{color:#777; font-size:16px}
	.tab li div dl{background:#fff; margin-top:40px; min-height:300px}
	.tab li div dl dt{padding:8px 25px; background:#78798a; color:#fff; font:16px NanumGothicBold; margin-bottom:10px}
	.tab li div dl dd{padding:8px 15px 8px 35px; background:url(../img/check.png) no-repeat 10px center; font-size:13px; background-size:auto 20px} 
	/*.tab .map01 dl{background:#fff url(../images/html5.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map02 dl{background:#fff url(../images/css3.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map03 dl{background:#fff url(../images/js.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map04 dl{background:#fff url(../images/jq.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map06 dl{background:#fff url(../images/java.jpg) no-repeat right 50px bottom 5px;} 
	.tab .map07 dl{background:#fff url(../images/jsp.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map08 dl{background:#fff url(../images/sql.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map09 dl{background:#fff url(../images/an.jpg) no-repeat right bottom;} 
*/
	.tab .map03 dl{background:#fff url(../images/spring_ic.png) no-repeat right 50px bottom 20px;}
	.tab .map02 dl{background:#fff url(../images/arduinotitle.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map09 dl{background:#fff url(../images/c.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map01 dl{background:#fff url(../images/java.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map04 dl{background:#fff url(../images/html5.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map05 dl{background:#fff url(../images/sql.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map06 dl{background:#fff url(../images/python.png) no-repeat right 50px bottom 20px;} 
	
	.tab .map11 dl{background:#fff url(../images/html5.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map12 dl{background:#fff url(../images/css3.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map13 dl{background:#fff url(../images/js.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map14 dl{background:#fff url(../images/jq.jpg) no-repeat right 50px bottom 20px;} 
	.tab .map15 dl{background:#fff url(../images/Adobe_Photoshop_CC_icon.png) no-repeat right 50px bottom 20px;} 
	.tab .map16 dl{background:#fff url(../images/html5.jpg) no-repeat right 50px bottom 20px;} 
	
	/************ 포트폴리오 ************/
	.title.port h2{font:40px Coalition; color:#2f5aa0; padding-bottom:5px}
	/*.port p{color:#999; padding-top:19px; font-size:14px}*/
	.port>li{float:left; width:230px; margin:0 40px 40px 0; position:relative; overflow:hidden;}
	.port{overflow:hidden; clear:both;}
	.port li img{width:100%;}
	.port li span{display:block; position:absolute; left:0; bottom:0; width:230px; text-align:center; padding:5px 0; color:#fff; z-index:10; background:rgba(0,0,0,0.7); font-family:NanumGothicBold;}
	.port li:hover span{background:#ff2069;}
	.port li ol{display:none;}
	.port li:hover ol{display:block; position:absolute; left:0; top:0; background:rgba(0,0,0,0.8); padding:2px 10px 0; height:180px;}
	.port ol li{color:#fff; position:relative; padding:5px 30px 5px 70px; border-bottom:1px dotted #ddd; font-size:14px;}
	.port ol li b{color:#638db4; width:85px; position:absolute; left:0; top:5px; font-size:14px;}
	.coo{margin-top:35px;}
	.coo h2{font:40px/40px NanumGothicBold; float:left; margin-right:20px; padding-bottom:20px;}
	.coo p{padding-top:23px;}
	.coo ol{clear:both; overflow:hidden;}
	.coo ol li{float:left; text-align:center; border:1px solid #aaa; color:#444; padding:8px 30px 10px; margin:10px 10px 0 0;}

	/************ 문의사항 ************/
	#class .qna{text-align:left; font:30px NanumGothicBold; color:#333; padding-bottom:20px}
	.table{border:1px solid #caceda; width:100%;}
	.table th, table td{border-top:1px solid #caceda; padding:20px; text-align:left;}
	.table th{background:#f3f3f3; text-align:center; width:150px; border-right:1px solid #caceda; color:#000; font:16px NanumGothicBold}
	.table td label{padding-right:50px;}
	.table td input[type="text"]{width:300px; border:1px solid #caceda; height:40px;}
	.table td textarea{width:95%; height:80px; border:1px solid #caceda; outline:none;}
	.btn{text-align:center; padding:40px;} 
	.btn button{width:200px; text-align:center; background:#676c79; color:#fff; margin:0 10px; border:0; font:20px/50px NanumGothic;}
	.btn button[type="submit"]{background:#ea486b;}
	.table td input:focus,.table td textarea:focus{border:1px solid #ea486b}

	/************ 찾아오시는 길 ************/
	.local img{height:100%;border:1px solid #ddd;}
	.go{overflow:hidden;}
	.go dl{float:left; width:500px; margin-right:50px}
	.go dt{font:20px/40px NanumGothicBold; color:#000; margin:25px 0 10px; background:url(../img/o.jpg) no-repeat 0 center; padding-left:30px; border-bottom:1px solid #ccc;}
	.go dd{font:16px/30px NanumGothicBold; padding-left:45px; background:url(../img/pp.jpg) no-repeat 30px center;}
	.go dd span.green{color:#357b0b}
	.go dd span.blue{color:#2a4c91}
	.call{float:right; color:#fb2a6b;font:30px/36px NanumGothicBold; margin-top:-10px}
	.call b{font:20px NanumGothicBold; color:#fb2a6b; display:block; text-align:right}

	/************ footer ************/
	#footer{background:#232732;}
	#footer div{width:910px; background:url(../img/buk2.png) no-repeat left center; margin:auto; padding:30px 0 30px 190px; font-size:12px; position:relative;}
	#footer address{display:block;  padding:6px 0; margin:17px 0 0; color:#888;}
	#footer span{position:absolute; right:0; top:24px; font:30px NanumGothicBold; color:#ff004f;}
	#footer span b{display:block; color:#aaa; text-align:right; font:20px NanumGothicBold;}
	
	/* 저체화면의 팝업창 관련 수정 21.01.13 추가*/
	.popup { display:none;}
	.popup2 { display:block; float:right;background-color:rgb(2,2,2,0.7); margin:10px; padding:10px;}	
	.popup2 h2 b { font: 20px NanumGothicBold; letter-spacing:0px; color:#ccc;}
	.popup2 h2 span { font: 16px NanumGothicBold; letter-spacing:0px; color:#ccc;}
}

@media screen and (max-width: 768px) {
	#header{box-shadow:0 0 10px rgba(0,0,0,0.5); position:fixed; width:100%; z-index:5; background:#0063a8}
	/*#header h1 a{background:url(../img/logo_M.png) no-repeat center; height:56px; font-size:0; background-size:auto 38px}*/
	#header h1 a {color:white; font-size:3em; text-align:center; font:15px/40px NanumGothicbold }
	#header ul{overflow:hidden;}
	#header ul li{float:left; width:33%}
	#header ul li:first-child{width:34%}
	#header ul li a{color:#0063a8; font:15px/40px NanumGothicbold; height:40px; text-align:center; background:#fff}
	#header ul li:hover a,#header ul li.active a{color:#ff3f75; border-bottom:3px solid #ff3f75; height:37px;}
	
	/* 메인 */
	#main{padding:90px 0 30px;}
	/*.banner>img{width:100%}*/
	.banner>img{width:400px}
	.notice,.banner div ul{display:none;}
	.banner ol{overflow:hidden; margin-top:20px}
	.notice{padding:0 15px;}
	.notice div div h3{background:url(../img/02.png) no-repeat left center; padding-left:40px; background-size:auto 40px; font:24px/40px NanumGothicbold; margin:25px 0 0;}
	.notice div div:first-child h3{background:url(../img/01.png) no-repeat left center; padding-left:40px; background-size:auto 40px;}
	.notice ul{margin:10px 0; border:1px solid #bbb;}
	.notice ul li{border-top:1px solid #bbb;}
	.notice ul li:first-child{border-top:none;}
	.notice ul li b{display:block; padding:7px 10px; background:#eee; font:16px NanumGothic; color:#333; text-align:center;}
	.notice ul li span{display:block; padding:10px; font:18px NanumGothicbold; color:#000; text-align:center;}
	.banner ol li{color:#000; font:16px NanumGothicBold; margin:20px 10px; border:1px solid #ddd; padding:10px 15px 10px 60px; position:relative;}
	.banner ol li img{position:absolute; left:-5px; top:-11px; width:65px}
	
	/* popup 추가 - 이미지 없앰 21.1.13 - mobile */
	.popup { background-color:rgb(255,40,70) ; margin:10px; padding:30px;	}
	.popup2{background-color:#333;margin:10px;padding:30px;}
	.popup2 h2 b {font: 20px NanumGothicBold;   letter-spacing:0px; color: #fff;  }
	.popup2 h2 span {font: 16px NanumGothicBold;   letter-spacing:0px; color: #fff; }
	.banner { color :#fff; line-height:30px; font: 14px NanumGothic;letter-spacing: 0;}
	.banner div h2 span { font:16px NanumGothicBold; color: #fff;  display: block;  padding-bottom: 2px;    letter-spacing: 0; }
	.banner div h2 { font: 40px/45px NanumGothicBold;   letter-spacing: -2px; color: #fff;    letter-spacing: -1px; }
	.banner div b {   display: block;   color: yellow;   font: 30px NanumGothicBold;    padding: 12px 0 20px; }
	
	.se img {height: 50px; margin-bottom: 20px;}	
	.banner div a { margin-top: 30px;    background: #fff;    border-radius: 40px;    color: #222;    font: 20px/50px NanumGothicBold;    width: 230px;    text-align: center;}
	
	/* 컬리큘럼 */
	#class{padding:120px 0 40px; background:url(../img/bg_50.png) no-repeat center top; background-size:auto 100px;}
	#class>div:first-child{padding:0 15px;}
	#class h2{font:25px NanumGothicBold; color:#222;}
	#class p{margin-bottom:20px; line-height:1.4em; color:#555;}
	#class p b{display:block; background:url(../img/point.jpg) no-repeat left 23px; padding:5px 0 0 32px; font:18px/60px NanumGothic; color:#555;}
	#class p strong{display:block; font:18px NanumGothicBold; color:#000; padding-bottom:10px;}
	.none{display:none;}
	#class .tab{border-bottom:1px solid #ddd;}
	#class .tab div{display:none; padding:20px 15px; box-shadow:inset 0 0 10px rgba(0,0,0,0.3);}
	#class .tab li.active div{display:block; background:#ededed;}
	#class .tab li{border-top:1px solid #ddd;}
	#class .tab li p{margin-bottom:20px; line-height:1.4em; color:#555;}
	#class .tab li a{padding:15px 10px; background:url(../img/down.png) no-repeat right 20px center; background-size:auto 8px; color:#555;}
	#class .tab li.active a{background:url(../img/up.png) no-repeat right 20px center; background-size:auto 8px; color:#006ecc; font-family:NanumGothicbold}
	#class .tab li div h2{display:none;}
	.tab li div dl dt{font:18px/40px NanumGothicbold; color:#000; border-bottom:1px solid #ccc; margin-bottom:10px;}
	.tab li div dl dd{padding:5px 0 5px 22px; background:url(../img/check.png) no-repeat 0 7px; font-size:13px; background-size:auto 15px; color:#000} 

	/* 포트폴리오 */
	.port{overflow:hidden; padding:0 10px}
	.port>li{float:left; width:50%;}
	.port li a{margin:0 5px 12px; position:relative;}
	.port li a img{width:100%;}
	.port ol{display:none;}
	.port span{display:block; background:rgba(0,60,120,0.8); text-align:center; color:#fff; padding:5px 0; position:absolute; left:0; bottom:0; width:100%; font-family: NanumGothicbold; }
	.coo{padding:15px 15px 0;}
	.coo ol{overflow:hidden;}
	.coo ol li {float:left; margin:0 10px 10px 0; border:1px solid #ccc; padding:10px 20px;}

	/* 포트폴리오 */
	.local{margin:15px 0 0}
	.local img{width:100%;}
	.call{display:none;}
	.go{overflow:hidden;}
	.go dt{font:17px/38px NanumGothic; color:#000; border:1px solid #ddd; border-width:1px 0; padding-left:15px; background:#f2f2f2; margin:20px 0 10px}
	.go dt:first-child{margin:0 0 10px}
	.go dd{font:14px/20px NanumGothic; padding-left:30px; background:url(../img/pp.jpg) no-repeat 20px center; color:#555; background-size:5px auto;}
	.go dd span.green{color:#357b0b; font-family:NanumGothicBold}
	.go dd span.blue{color:#2a4c91; font-family:NanumGothicBold}

	/* ********* footer ********* */
	#footer{background:#232732; border-top:1px solid #222; text-align:center; font-size:12px; padding:20px 0;}
	#footer address{color:#888; padding-bottom:10px;}
	#footer span{display:block; color:#fff; font:17px/30px NanumGothicBold;}
	#footer span b{display:none;}
}