@charset "utf-8";



a:hover{transition: all 300ms ease-out;}

.ir:before {display: inline-block;width: 100%;height: 100%;vertical-align: top;content: '';}

/*h1,h2,h3,h4,h5,h6{font-family:'nsr','ngn','Malgun Gothic','AppleGothic','Dotum','arial','sans-serif';}*/

.cicon{display:inline-block;overflow:hidden;background:url(/images/common/c/hak_c/sm_hg_main_ir.png) no-repeat;font-size:0;line-height:0;}

/*.ir-tmpl{background:url(/images/common/c/hak_c/ir-tmpl.png) no-repeat}*/



section{position:relative;overflow:hidden}

#mcontainer *{font-family:'ntk';}

#mcontainer * {word-wrap: break-word;word-break: keep-all;}



.wrapper{position:relative;width:100%;}

.wrapper:after{content:"";display:block;clear:both;visibility:hidden;}

@media (min-width:1024px) {

    .wrapper{margin:0 auto;width:95%;max-width:1024px;}

}

@media (min-width:1200px) {

    .wrapper{width:90%;max-width:1200px;}

}



/*main mcontainer*/

#mcontainer{position:relative;overflow:hidden}

#mcontainer:after{content:"";display:block;clear:both;visibility:hidden;}

#mcontainer .inner{padding:30px;}







/*main visual*/

#mvisual{padding-top:70px;height:688px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}

#mvisual .mtit h2{position:relative;color:#fff;font-size:30px;text-align:center;line-height:1.2;font-weight:600;height: 131px}

#mvisual .mtit h2:before{display:block;position:absolute;top:-23px;left:50%;margin-left:-25px;background:#fff;width:50px;height:5px;content:""}

#mvisual .mtit h2 span{display:block;font-size:16px;line-height:1.4;margin-top:15px;font-weight:normal;height: 45px;overflow: hidden;}



@media (min-width:768px) {

#mvisual{height: 772px;padding-top: 120px;}

#mvisual .mtit h2{font-size:46px}

#mvisual .mtit h2 span{font-size:18px}

}



@media (min-width:1024px) {

#mvisual{padding-top:150px;height:605px}

}





/*main link*/

#mlink{position:relative;top:53px;left:0;width:100%}

#mlink .l_bg{position:absolute;top:0;left:0;width:100%;height:170px;width:100%;background:#f0c54a;opacity: 0.9}

#mlink .r_bg{position:absolute;bottom:0;width:100%;height:204px;width:100%;background:#494949;opacity: 0.9}

#mlink .history{width:100%;height:170px}

#mlink .history a{width: 99%;height: 97%;margin-top:0px;display: block;}

#mlink .history h2{color:#333;font-size:22px;font-weight:600;letter-spacing:-1px}



#mlink .history h2 span{color:#333;font-size:16px;padding-left:7px}

#mlink .history .inner{padding:35px 15px}

#mlink .history .inner .txt_box{padding:10px 0 10px 117px}

#mlink .history .inner .txt_box .txt{color:#222;letter-spacing:-1px}

#mlink .history .course_ir{background:url(/images/common/c/hak_c/course_img.png) no-repeat;}

#mlink .history .course_ir{display:block;float:left;width:105px;height:100px;background-position:0 0}

#mlink .history .select select{width:100%;background:transparent;border:0;border-bottom:1px solid #6a6a6a;border-top:1px solid #6a6a6a;padding:10px 0;height:42px;color:#222}

#mlink .link{height:204px;width:100%}

#mlink .link ul li{display:table;float:left;text-align:center;width:50%;margin-left:-1px;margin-top:-1px;vertical-align:middle;height:100%;border-top: 1px solid rgba(140, 140, 140 ,0.6);border-left: 1px solid rgba(140,140,140,0.6)}

#mlink .link ul li a{display:table-cell;color:#fff;line-height:1.2;height:100px;padding:34px 0;font-size:16px}

#mlink .link ul li a>span{display:inline-block;overflow:hidden;margin:0 auto;width:28px;height:30px;margin-right:10px;vertical-align:middle}

#mlink .link ul li .micon_ir{background:url(/images/common/c/hak_c/micon_ir.png) no-repeat}

#mlink .link ul li a .icon1{background-position:0 0}

#mlink .link ul li a .icon2{background-position:-48px 0}

#mlink .link ul li a .icon3{background-position:-100px 0}

#mlink .link ul li a .icon4{background-position:-149px 0}



@media (min-width:768px) {

    #mlink {top:61px}

    #mlink .wrapper{width: 68%;margin: 0 auto;}

    #mlink .link{padding:60px 0}

    #mlink .link ul li,#mlink .link ul li a,#mlink .link ul li a>span{display:block}

    #mlink .link ul li{width:20%}

    #mlink .link ul li{padding: 0 10px; border-top:0;border-left:0}

    #mlink .history h2{margin-bottom:10px}

    #mlink .history .course_ir{width: 138px;height: 130px;background-position: -1px -151px;}

    #mlink .l_bg,#mlink .history{height:204px}

    #mlink .history .inner{padding: 45px 15px;}

    #mlink .history .inner .txt_box{padding:10px 0 10px 164px}

    #mlink .history .inner .txt_box .txt{border-top: 1px solid #f2d581;border-bottom: 1px solid #f2d581;padding: 10px 4px;font-size: 15px;letter-spacing: -2px; font-family:dotum;}

    #mlink .link ul li a{padding:0}

    #mlink .link ul li a>span{width:60px;height:60px;margin: 0 auto 18px;}

    #mlink .link ul li a .icon1{background-position:0 -60px;}

    #mlink .link ul li a .icon2{background-position:-67px -59px}

    #mlink .link ul li a .icon3{background-position:-156px -59px}

    #mlink .link ul li a .icon4{background-position:-233px -59px}

    

    

}



@media (min-width:1024px) {

#mlink .l_bg{width:50%}

#mlink .r_bg{width:50%}





#mlink .r_bg{right:0}

#mlink .history,#mlink .link{float:left;width:50%}

#mlink .link{padding:50px 0 50px 3%}

#mlink .wrapper {width: 89%;}

#mlink .history .inner{padding:34px 10% 34px 0}

}



@media (min-width:1200px) {

#mlink .wrapper{max-width:1200px}

#mlink .l_bg,#mlink .r_bg{height:100%;}

#mlink .l_bg{width:50%}

#mlink .r_bg{width:50%}

}



@media (max-width:400px) {

    #mlink .link ul li a{font-size: 15px;}

}



/*main content*/

#mcontent{width:100%}

/*main notice, mprofessor */

#mnotice h2,#mprofessor h2{margin-bottom:22px;color:#000;font-size:20px;line-height:24px;font-weight:600;}

#mnotice h2 span,#mprofessor h2 span{display:block;color:#9b9b9b;font-size:16px;font-weight:normal;letter-spacing:0}

#mnotice .grap .item{display:inline-block;position:relative;width:100%;margin-top:10px;background-color: #fff;}

#mnotice .grap .item:first-child{margin-top:0}

#mnotice .grap .item a{display:block;padding: 42px 30px;border: 1px solid #d0d0d0}

#mnotice .grap .item a.new:before{display:block;content:"";position:absolute;top:0;right:0;background:url(/images/common/c/hak_c/marr_ir.png) no-repeat;background-position:-10px -79px;width:26px;height:25px}

#mnotice .grap .item a b{display:inline-block;overflow:hidden;width:100%;max-height:60px;height:60px;color:#000;font-size:18px;line-height:28px;letter-spacing:-1px;}

#mnotice .grap .item a b:hover{text-decoration:underline}

#mnotice .grap .item a .text{display:block;color: #555;font-size: 16px;line-height: 1.3;overflow: hidden;height: 47px;}

#mnotice .grap .item a .date{display:block;margin-top:5px;color:#555;font-size:14px}

#mnotice .more{display:inline-block;position:absolute;top:29px;right:32px}

#mnotice .more .marr_ir{background:url(/images/common/c/hak_c/marr_ir.png) no-repeat}

#mnotice .more .more_icon{background-position:-79px -10px}

#mnotice .more a{display:inline-block;padding-left:16px;letter-spacing:-1px;font-size:15px;font-weight:600}

#mnotice .more a span{display:block;position:absolute;top:8px;left:0;width:12px;height:12px}



#mnotice .control{display: none;}



#mprofessor {padding-bottom:30px;}

#mprofessor .inner{padding:0px 30px 40px}

#mprofessor .table{display:table;height: 154px;background: url(/images/common/c/hak_c/quick_bg.png) no-repeat;background-size: cover;width: 100%;}

#mprofessor .table-row{display:table-row}

#mprofessor .table-col{display:table-cell;-webkit-transition: all 0.4s;transition: all 0.4s;vertical-align:top; padding:40px 10px 0 10px;letter-spacing: -1px;text-align:center;color:#222;    font-weight: 600;

    font-size: 14px;}

#mprofessor .table-col:hover{-webkit-transform: scale(1.1) rotate(0.002deg);transform: scale(1.1) rotate(0.002deg)}

#mprofessor .table-col .quickmenu_ir{display: block;width: 60px;height: 60px;margin:0 auto 8px;background: url(/images/common/c/hak_c/quick_ir.png) no-repeat}

#mprofessor .table-col .icon1{background-position: 0 0}

#mprofessor .table-col .icon2{background-position: -78px 0}

#mprofessor .table-col .icon3{background-position: -158px 0}









@media (max-width:767px) {

	#mprofessor .table-col{ padding-top:30px;}



}

@media (max-width:419px) {

	#mprofessor .table-col{ padding-top:22px;}



}

@media (min-width:768px) {

    #mcontent .wrapper{width: 92%;margin: 0 auto;}

    /*#mcontent .mboard{height:337px}*/

   

    #mnotice .inner,#mprofessor .inner{padding:50px 0 0 0;/*height:338px*/}

    #mnotice .grap .item{margin-bottom:35px}

    #mnotice .grap .item a{padding:36px 30px}

    #mnotice .grap .item a b{height:32px;font-size:20px}

    #mnotice .more{top:49px;right:4px}

    /*#mprofessor{float:left;width:40%;padding-left:20px}*/

    #mprofessor .table{height:186px}



}



@media (min-width:1200px) {

#mnotice .grap .item a b {height: 42px;font-size: 17px;line-height: 1.2;}

#mnotice .grap .item a .text{font-size:14px;height:38px}

#mnotice .grap .item a .date{margin-top:25px}

#mnotice{float:left;width: 60%;height:338px;}

#mprofessor{float:left;width:40%;padding-left:20px}

}



@media (min-width:1025px) and (max-width:1201px){

    #mnotice .grap .item a b{white-space: nowrap;text-overflow:ellipsis;}

}



@media (min-width:1024px) {

#mnotice .grap .item a{padding:37px 30px}

#mnotice .grap .item{float:left;width:32%;margin-bottom: 0;margin-left:10px;margin-top:0}

#mnotice .grap .item:first-child{margin-left:0}

}



@media (min-width:1200px) {



#mprofessor .table{height:220px}

#mprofessor .table-col .quickmenu_ir{width:96px;height:96px}

#mprofessor .table-col .icon1{background-position:0 -79px}

#mprofessor .table-col .icon2{background-position:-118px -79px}

#mprofessor .table-col .icon3{background-position:-227px -79px}

#mcontent .mboard{height:407px}

#mnotice .grap .item a{padding:39px 25px}

#mprofessor .table-col{font-size:16px}



}

/*gallery*/

#gallery{background: url(/images/common/c/hak_c/gallery_bg.png) no-repeat 50% 50%;width:100%;background-size: cover;}

#gallery .inner{padding:50px 0}

#gallery h2{margin-bottom: 28px;color: #000;font-size: 28px;line-height: 24px;font-weight: 600;letter-spacing: -4px;text-align: center;}

#gallery h2 span{display: block;color: #555555;font-size: 16px;font-weight: normal;letter-spacing: 0;}

#gallery .depgallery .grap{margin:0 auto;max-width:1200px;height:370px;overflow:hidden}

#gallery .depgallery .grap .inner{position:relative;width:100%;padding: 0}

#gallery .depgallery .grap .obj{position: relative;float: left;width: 100%;height:370px;}

#gallery .depgallery .grap .obj .item{overflow: hidden;display:inline-block;position: relative;float: left;width:50%;height:370px;padding:0 23px}

#gallery .depgallery .grap .obj .item a{display: block;position: relative;width: 100%;height: 100%;background-color: #fff;}

#gallery .depgallery .grap .obj .item a .img{display:block;overflow: hidden;position: relative;width: 100%;height:196px;text-align: center;background:#fff}

#gallery .depgallery .grap .obj .item a .img img{display: block;max-width: none;width: 100%;height: 100%;transition: all .4s ease-in-out;}

#gallery .depgallery .grap .obj .item a .img img:hover,#gallery .depgallery .grap .obj .item a .img img:focus{transform: scale(1.2);}

#gallery .depgallery .grap .obj .item a .info{display: block;padding:35px 20px;width: 100%;text-transform: uppercase;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s}

#gallery .depgallery .grap .obj .item a .tit{display: block;overflow: hidden;margin-bottom: 15px;height: 38px;font-family: 'nsr';font-size: 17px;line-height: 1.2;color: #000;letter-spacing: -1px;}

#gallery .depgallery .grap .obj .item a .tit:hover{text-decoration:underline}

#gallery .depgallery .grap .obj .item a .text{display: block;overflow: hidden;height:33px;color: #555; font-size: 14px;line-height: 1.2;margin-bottom:15px}

#gallery .depgallery .grap .obj .item a .date{display:block;margin-top:15px;color: #767676;font-size: 12px;line-height: 1;}

#gallery  .control{margin: 18px auto 0;width: 170px}

#gallery  .control .more{float:left;display:block;border: 1px solid #26303d;color: #222;padding: 6px 20px;font-size: 14px;height: 38px;width:82px;line-height: 1.5;text-align:center}

#gallery  .control .more:hover,#gallery  .control .more:focus{background-color:#26303d;color:#fff}

#gallery  .control .ctl_ir{background: url(/images/common/c/hak_c/m_ir.png) no-repeat;}

#gallery  .control [type^=button]{float:left;width: 38px;height: 38px;padding: 8px 0;font-size: 0;border: 1px solid #26303d;margin-left:6px}

#gallery  .control [data-control=prev]{background-position: 3px -30px;}

#gallery  .control [data-control=next]{background-position: -40px -30px;}

#gallery  .control [type^=button]:hover,#gallery  .control [type^=button]:focus{border:2px solid #26303d}

#gallery .wrapper{padding-right: 0px;}





/*@media (max-width:450px) {

#gallery .depgallery .grap .obj .item:first-of-type{width:255px;padding-left:50px;}

}*/





@media (min-width:768px) {

#gallery .inner{padding:80px 0 60px}

#gallery h2{text-align: left;margin-left:25px;margin-bottom: 60px;}

#gallery h2 span{display:inline;margin-left:10px}

#gallery  .control{position: absolute;top: -8px;right: 18px;margin-top: 0;}

#gallery .depgallery .grap .obj .item{width:33%;padding: 0 13px;}

#gallery .depgallery .grap .obj .item a .tit{height:45px}

#gallery .depgallery .grap .obj .item a .text{height:48px}

#gallery .depgallery .grap .obj .item a .img{height:162px}

#gallery .depgallery .grap .obj .item a .date{font-size:14px}

}

@media (min-width:1024px) {

/*#gallery .depgallery .grap{max-width:1050px;}*/

/*#gallery .depgallery .grap .obj .item{width:25.5%}*/



}

@media (min-width:1200px) {

#gallery .depgallery .grap .obj .item {width:20%;padding: 0 1%;}

#gallery h2{text-align:center;margin-left:0}

#gallery h2 span{display:block}

#gallery .control{right: 85px;}

}



@media (min-width:1400px) {

#gallery .depgallery .grap .obj .item {width:20%;}

#gallery  .control [type^=button]{display:none}

#gallery  .control{width:120px;right:33px;}

#gallery  .control .more{width:120px}

}



@media (min-width:768px) and (max-width:1023px) {

/*#mnotice .grap .item{position:absolute;margin:0px;}

*/





/*#mnotice div.more{display: none;}*/

#mnotice .control{position: absolute;top: 55px;right:0px;display: block;width: auto;height: 10px;}

#mnotice .control .more{position:relative;top:auto;right:auto;padding:3px 15px; border:1px solid #ddd;}

#mnotice .control .more span {display: inline-block;margin:0px 5px;width: 12px;height: 15px;}

#mnotice .control a[data-control="prev"],

#mnotice .control a[data-control="next"]{display:inline-block;width:30px;height:30px;border:1px solid #aaa;background: url(/images/common/c/hak_c/m_ir.png) no-repeat;text-indent:-9999px;font-size:0px;line-height: 0px;}

#mnotice .control a[data-control="prev"]{padding:3px; background-position: 3px -121px;}

#mnotice .control a[data-control="next"]{padding:3px; background-position: -25px -121px;}





#mnotice  .control{float:right;margin: 18px auto 0;width: 148px}

#mnotice  .control .more{float:left;display:block;border: 1px solid #aaa;color: #767676;padding: 3px 10px;font-size: 14px;height: 30px;width:82px;line-height: 1.5;text-align:center}

#mnotice  .control .more:hover,#mnotice  .control .more:focus{background-color:#26303d;color:#fff}

#mnotice  .control [type^=button]{float:left;width: 38px;height: 38px;padding: 8px 0;font-size: 0;border: 1px solid #aaa;margin-left:3px;cursor: pointer;}

#mnotice  .control [type^=button]:hover{border:2px solid #26303d;}

#mnotice .control .more .more_icon {background-position: -79px -6px;}

}





@media (max-width:767px){

#mnotice .grap .item{position:relative;}

}









@media (min-width:1201px) and (max-width:1399px){

#gallery .depgallery .grap, 

#gallery .depgallery .grap .obj{width:1155px}   

}





@media (min-width:1200px){

    .wrapper{padding-right:0;}

    .#mcontainer{padding-right:120px;}

}







@media (max-width:480px){

    #gallery .depgallery .grap .obj .item{width:100%}

}