@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
body {/* overflow-x: hidden;  */font-family: 'Noto Sans KR', sans-serif; margin: 0;}


a:link, a:visited {color: #000;}


a:hover{transition: all 300ms ease-out;}
.cicon{display:inline-block;overflow:hidden;background:url(/images/common/c/hak_a/sm_hg_main_ir.png) no-repeat;font-size:0;line-height:0;}
.cicon.email{width:34px;height:34px;background-position:-1px -56px;}



#con2{position:relative;}
#con2.inner{overflow:visible; width: 100%;}

#con2 .box_info{position:relative; width: 455px;}
#con2 .box_info .list{position:relative; width: 278px;}
#con2 .box_info .list li{display:block;font-size: 15px;}
#con2 .box_info .list li img{position: relative; right: 15px; top: 5px; width: 60px;}
#con2 .box_info .list li span{display:none;position:absolute;top:-10px;right:0;color:#fff;width:159px;text-align:center;font-size: 15px;font-weight:600;}
#con2 .box_info .list li:first-child span {display:block;}

#con2 .box_info .list li span em{display:block;margin:0 auto 10px auto;height:136px;}
#con2 .box_info .list li span em.cicon.cicon7{width:159px;background:url(/images/common/c/hak_a/sm_hg_col2img.png) no-repeat center right;
background-size: 80%;}
#con2 .box_info .list li span em.cicon.cicon8{width:159px;background:url(/images/common/c/hak_a/sm_hg_col2img_2.png) no-repeat center right;
background-size: 80%;}
#con2 .box_info .list li span em.cicon.cicon9{width:159px;background:url(/images/common/c/hak_a/sm_hg_col2img_3.png) no-repeat center right;
background-size: 80%;}
#con2 .box_info .list li a{display:block;position:relative;padding:25px 20px;border-bottom:1px solid #d2d2d2;font-size: 15px;color:#000;text-align: center;}
#con2 .box_info .list li a:hover {border:1px solid transparent;background-color:#30BBFC;color:#fff;transition:none;margin-top:-1px}
#con2 .box_info .list li a.ov:before{content:"";display: block;position:absolute;top: -1px;left: -40px;width:45px;height:100%;padding: 1px 0;}
#con2 .box_info .list li a.ov:after{content:"";display: block;position:absolute;top: 12px;left: 1px;width:20px;height:20px;padding: 1px 0;/*background:url(/images/common/c/hak_a/sm_hg_main_ir.png) no-repeat 0px -71px;*/}




#mvisual {

	background: none;

	padding: 0;

}


#mcontainer {
	
	position: relative;
	overflow: hidden;
	height: 2563px;
}

#mcontainer .inner_box {

	position: absolute;

	top: 100px;

	left: 50%;

	margin-left: -160px;

	z-index: 10;

}



#mvisual .grap {

	position: relative;

	width: 100%;

	height: 100%

}



#mvisual .grap .obj {

	position: relative;

	width: 100%;

	height: 100%;

}



#mvisual .grap .obj .item {

	position: relative;

	width: 100%;

	height: 100%;

}



#mvisual .grap .obj .item img {

	height: 100%;

	max-width: none;

	min-width: 100%

}



#mvisual .control {

	position: absolute;

	bottom: 450px;

	left: 50%;

	margin-left: -160px;

}



#mvisual .control a, #mvisual .control .paging button {

	float: left;

	display: inline-block;

	width: 21px;

	height: 21px;

	margin-left: 10px;

	vertical-align: middle;

	font-size: 0

}



#mvisual .control a {

	margin-top: 5px;

}



#mvisual .control .paging {

	float: left;

}



#mvisual .control a[data-control="prev"] {

	background: url(/images/smugrade/main/visual_btn_icon_prev.png) no-repeat

}



#mvisual .control a[data-control="next"] {

	float: right;

	margin-left: 20px;

	background: url(/images/smugrade/main/visual_btn_icon_next.png) no-repeat

}



#mvisual .control .paging button {

	background: url(/images/smugrade/main/visual_page_icon_on.png) no-repeat center center;

}



#mvisual .control .paging button.ov {

	background: url(/images/smugrade/main/visual_page_icon_off.png) no-repeat center center;

}



#mnotice .grap .item a {

	min-height: 216px;

	padding-bottom: 0;

}



#mnotice .grap .item a b {

	max-height: 60px;

	height: 60px;

}



#mnotice .grap .item a img {

	width: 100%;

	max-height: 100px;

	margin-bottom: 10px;

}



#mnotice .grap .item a .text {

	height: auto

}


#gallery .more {
	
	display: inline-block;
	position: absolute;
	top: 55px;
	right: 102px;
}


#mlink {

	top: 314px;

	position: absolute;

}



#mlink .link ul li .micon_ir {

	background: none;

}



#mlink .link ul li a .icon2 {

	background: url("/images/smartit/main/youtubeicon.png") no-repeat;

	background-position: 0;

}



#mlink .link ul li a .icon3 {

	background: url("/images/smartit/main/instaicon.png") no-repeat;

	background-position: 0;

}



#mlink .link ul li a .icon4 {

	background: url("/images/smartit/main/facebookicon.png") no-repeat;

	background-position: 0;

}



#mlink .link ul li:FIRST-CHILD {

	color: white;

	padding: 26px 0;

}

.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row;  flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}

.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 8vw;  margin-left: 18.5vw;}
.slide-image {height: 27vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 83vw; color: #000000; padding:0vw 0vw 3vw 4vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 0.8vw; font-weight: 400;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}

.arrows{width: 60.5vw; margin: 0 auto; position: relative; top: -386px; left: -30px;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #000000; border-left: 0.15vw solid #000000; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}



@media ( min-width :0px) {

	#mvisual .control {

		bottom: 410px;

	}

	#mlink .link ul li .vi_icon {

		background: url(/images/smae/main/video_mini.png) no-repeat;

	}

	#mlink .link ul li a .icon2 {

		background-size: 100%;

	}

	#mlink .link ul li a .icon3 {

		background-size: 100%;

	}

	#mlink .link ul li a .icon4 {

		background-size: 100%;

	}

}

@media (max-width: 480px) {
	
	#mcontainer {height: 3805px;}
	
	ul#last {list-style: none; display: flex; flex-wrap: wrap; text-align: center; padding: 10px;}
	
	ul#last>a>p {
	
		text-align: center; padding-bottom: 27px;
	}
	
	ul#last>a>li img {
	
		width: 66%;
	}

	#mvisual .grap .obj .item img {height: 38%; max-width: none; min-width: 100%}
	
	#mvisual .mtit h2 {position: relative; color: #fff; font-size: 15px; line-height: 1.2; height: 18px; }
	
	#mvisual .mtit h1 {position: relative; color: #fff; font-size: 15px; line-height: 1.2; height: 131px; }
	
	#mvisual .mtit span {display: none;}
	
	#mcontent {width: 100%; height: 100%;}
	
	#mcontent .wrapper{top: 35px; height: 2540px;}
	
	#mcontent2 .more{position: relative; float: right; top: -298px;}
	
	#mboard{position: relative; top: 20px;}
	
	#mprofessor{display: none;}
	
	#mprofessor .inner{padding: 32px 30px 0;}
	
	#mprofessor .minfoWrap{list-style: none; padding: 0; width: 100%;}
	
	#mprofessor .img{width: 100%; height: 53.5%; margin: 0 !important; object-fit: cover;}
	
	#mvideo{padding: 30px 0 30px 0;}
	
	#gallery .more{display: inline-block; position: absolute; top: 5px; right: 28px;}
	
	#gallery .inner{padding: 0 !important;}
	
	#gallery .depgallery .grap{margin: 0 auto; max-width: 1200px; height: 2470px; overflow: hidden;}
	
	#gallery .depgallery .grap .obj .item{overflow: hidden; display: inlline-block; position: relative; float: left; height: 490px; padding: 0 23px; width: 100%;}
	
	#gallery .depgallery .grap .obj .item a .img{display: block; overflow: hidden; position: relative; width:100%; height: 343px; text-align: center; background: #fff;}
	
	#gallery .depgallery .grap .obj .item a .info{display: block; width: 100%; text-transform: uppercase; transition: transform 0.35s; text-align: center; padding-top: 15px;}
	
	/* #mcontent2 .wrapper2{width: 92%; display: flex; justify-content: center; margin: 0 auto; padding: 50px 0 50px 0;} */
	
	#exhibition2{height: 260px;}

	#exhibition2-img{margin: 0 20px; position: relative; width: 89%; height: 400px;}
	
	#con2 .box_info .list{padding: 0 !important; left: 25px;}
	
	.section5{top: 30px;}
}


@media ( min-width :768px) {
	
	#mnotice .inner{
	
	padding: 40px 20px 40px 20px;
	
	width: 370px;
	
	height: 455px;
	
	}
	
	#mnotice .more{
	
	top: 42px;
	
	right: 85px;
	
	}
	
	#gallery .inner{
	
	padding: 0 0 100px 0;
	
	}
	
	.section5 {
	
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	top: -356px;
	background: #efefef;
	
	}
	
	#mvisual .mtit h2 {
	
		font-size: 46px;
		
		height: auto;
		
		}
	
	#mvisual .mtit h1 {
	
		position: relative;
		
		font-size: 50px;
		
		color: #fff;
		
		line-height: 1.2;
		
		font-weight: 600;
		
		}
		
	#mvisual .mtit span {
	
		position: relative;
		
		color: #fff;}

	#mnotice .grap .item a b {

		height: 32px;

		font-size: 20px

	}

	#mlink {

		top: 45px;

	}

	#mcontainer .inner_box {

		top: 355px;

		left: 250px;

	}

	#mprofessor {
	
	float: right;
	
	width: 445px;
	
	height: 436px;
	
	top: -391px;
	
	left: -15px;
	
	}
	
	#mprofessor .more {
	
	top: 52px;
	
	right: 77px;
	
	}
	
	#mcontent {
	
	width: 100%;
	height: 1400px;
	
	}
	
	#mcontent2 {
	
	width: 365px;
	
	}
	
	#mcontent2 .more {
	
	position: relative;
	top: -286px;
	right: -222px;
	
	}

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

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

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

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

#mcontent2 .more a::before{content: ""; height: 3px; width: 0; background-color: #c0ddff; border-radius: 5px; transition: 0.5s; position: absolute; bottom: 0; left: 0;}

#mcontent2 .more a:hover::before{width: 100%; background-color: #fff;}

#mcontent2 .control{display: none;}
	
	
	
	#mcontent .wrapper {
	
	width: 100%;
	
	margin: 0 auto;
	
	padding: 50px 0 50px 0;
	
	display: block;
	
	}
		
	/*  #mcontent2 {
	
	width: 300px;
	
	top: 14px;
	
	}
	
	#mcontent2 .inner {
	
	padding: none;
	
	}
	
	#mcontent2 .box_info {
	
	display: flex;
	
	justify-content: center;
	
	padding-top : 40px;
	
	}
	
	#mcontent2 .lst_01, .lst_02, .lst_03{
	
		background-color: #cfddf3;
		
		padding: 10px 70px;
		
		font-size: 18px;
		
		width: 270px;
		
		text-align: center;
		
		margin-bottom: 20px;
		
	}
	
	#mcontent2 .more {
	
	float: right;
	
	margin-top: -315px;
	
	} */

	#mvisual .control {

		bottom: 430px;

	}

	#mlink .link ul li {

		width: 25%;

	}

	#mlink .link ul li .vi_icon {

		background: url(/images/smae/main/video_icon.png) no-repeat;

	}

	#mvisual .mtit h2 span {

		height: 50px;

	}


	#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;

	}

	#mprofessor .table-col {

		font-size: 16px;

	}

	#mvisual .mtit h2 span {

		font-size: 19px;

	}

	#mlink .link ul li:FIRST-CHILD {

		padding: 16px 0;
		
		margin-bottom: 15px;

		font-size: 19px;

	}
	
	#mlink .link ul li img {
	
	transition: 0.35s;
	
	}
	
	#mlink .link ul li img:hover{
	
	filter: drop-shadow(0 0 30px #fff);
	border-radius: 100%;
	-moz-transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-o-transform: scale(1.0);
 	 transform: scale(1.0);
	
	}
	
	
	#department .inner{
	
		padding: 0 0 100px 0;
	
	}

}

.box-item{
	padding: 30px 0 30px 0;
	margin-bottom: -125px;
}

@media ( min-width :1200px) {

	#mnotice {
	
	float: left;
	
	left: 85px;
	
	height: auto;
	
	width: 435px;
	
	}
	
	#mnotice .grap .item a b {

		height: 42px;

		font-size: 17px;

	}

}



@media ( min-width : 1024px) {
	
	#mvisual .control {

		bottom: 100px;
		margin: 0 auto;

	}
	
	#mlink .link {
	
	padding: 50px 0 50px 3%;
	display: flex;
	flex-direction: column;
	position: relative;
	left: 590px;
	top: -50px;
	
	}
	
	#mlink ul {
	
	display: contents;
	
	}

	ul#last {
	list-style: none;
	padding: 55px 10px 60px 10px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	}

	ul#last>a>li {
	
		position: relative;
		display: inline-block;
		width: 188px;
		height: 55px;
		overflow: hidden;
	}
	
	ul#last>a>p {
	
		text-align: center;
	}

#mprofessor .minfoWrap .grap{margin:0 auto;max-width:1100px;height:216px;overflow:hidden}

#mprofessor .minfoWrap .grap .inner{position:relative;width:100%;padding: 0}

#mprofessor .minfoWrap .grap .obj{position: relative;float: right;width: 100%;height:370px;}

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

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

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

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

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

#mprofessor .minfoWrap .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}

#mprofessor .minfoWrap .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;}

#mprofessor .minfoWrap .grap .obj .item a .tit:hover{text-decoration:underline}

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

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

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

#mprofessor  .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}

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

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

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

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

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

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

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



#mprofessor .item {
  position: relative; left: -12px;
}

#mprofessor .item::before {
  content: attr(data-alt);
  position: absolute;
  top: 0;
  left: 0;
  margin: 0px auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 14px;
/*   line-height: 1.4; */
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.5s ease;
  z-index: 999;
  cursor: pointer;
}

#mprofessor .item:hover::before {
  opacity: 1;
  visibility: visible;
}

}



@media ( min-width : 1200px) {

	#mlink .wrapper {
	
	height: 1200px;
	
	}
	
	
	#mlink .l_bg {

		width: 50%;

	}

	#mlink .r_bg {

		width: 50%;

	}

}


@media(max-width:1300px){
	#con2 .box_info .list {padding: 0 130px 0 5px;}
	#con2 .box_info .list li a.ov:before {left: -30px;width: 35px;}

	#con2 .box_info .list li span,
	#con2 .box_info .list li span em.cicon.cicon7,
	#con2 .box_info .list li span em.cicon.cicon8,
	#con2 .box_info .list li span em.cicon.cicon9{width:110px;}
	#con2 .box_info .list li span em.cicon.cicon7{background: url(/images/common/c/hak_a/sm_hg_col2img.png) no-repeat right center;background-size: 100%;}
}


.mvideo{
  position: relative;
  padding-bottom:56.25%;
}
.iframe{
  position: absolute;
  top: 0;
  left: 0 ;
  right: 0;
  bottom: 0;
  width:100%;
  height: 100%;
}