@charset "utf-8";

@import url(common.css);

/* content */
#container {position:relative; padding-top:100px;}
.main_content {position:relative; z-index:7; margin-top:420px; overflow:hidden; min-height:800px; background:url("/images/template/00010/main/cont_bg.jpg") no-repeat center top;}
.area_main_content_1{ width:1015px; margin:0 auto;}

.area_visual .ul_arrow a,
.area_visual .ul_play li a,
.ul_pos li a,
.ul_pos li span {display:block; overflow:hidden; height:0; font-size:0; line-height:100px; text-indent:-10000px;}
.area_visual .ul_arrow a,
.area_visual .ul_play li a,
.ul_pos li a,
.ul_pos li span {background-image:url("/images/template/00010/main/ul_pos.png"); background-repeat:no-repeat;}

/* visual */
.area_visual {overflow:hidden; position:absolute; top:0; left:0; width:100%; height:489px;}
.area_visual .ul_visual li {overflow: hidden; position:absolute; top:0; left:50%; width:100%; height:0; padding-top:489px; background-repeat:no-repeat; background-position:center bottom;}
.area_visual .ul_visual li.li1 {display:block;}
.area_visual .ul_visual li.li1 {background:url("/images/template/00010/main/m_visual01.png") center top; background-size: cover;}
.area_visual .ul_visual li.li2 {background:url("/images/template/00010/main/m_visual02.png") center top; background-size: cover;}
.area_visual .ul_visual li.li3 {background:url("/images/template/00010/main/m_visual03.png") center top; background-size: cover;}
.area_visual .ul_visual li p {position:absolute; left:50%; width:50%; margin-left:-507px; text-align:left; opacity:1; color:#fff;}
.area_visual .ul_visual li p a{ display:block; color:#fff;}
.area_visual .ul_visual li .txt_1 {font-size:26px; line-height:1.1; font-family:'NanumBold'; padding-top:10px; background:url("/images/template/00010/main/m_bullet.png") no-repeat 0 0; }
.area_visual .ul_visual li .txt_2 {font-size:15px; line-height:1.3; font-family:'NanumBold'; }
.area_visual .ul_visual li .txt_1{top:55%;} 
.area_visual .ul_visual li .txt_2{top:71%;} 
/*visual rolling*/
.area_visual .ul_play{position:absolute; bottom:15%; left:50%; margin-left:-460px !important; z-index:2;}
.box_main_content_1 .ul_pos,
.area_visual .ul_pos {position:absolute; bottom:15%; left:50%; margin-left:-510px !important; z-index:1; }
.area_visual .ul_play li {position:absolute; bottom:0; left:0;}
.area_visual .ul_play li a {display:none; width:11px; height:10px;}
.area_visual .ul_play li.on a {display:block;}

.ul_pos{ width:150px; height:10px; display:block; overflow:hidden;}
.ul_pos li {width:11px; height:10px; float:left; display:block; margin:0 2px;}
.ul_pos li a,
.ul_pos li span {display:block; background-position:-10px 0; width:11px; height:10px; }
.ul_pos li.on a,
.ul_pos li.on span {background-position:0 0;}

/*president's message*/
.president{ position:relative; width:664px; float:left;}
.president h2{ font-size:20px; margin-bottom:15px; font-family:'NanumBold'; }
.president p.photo{ position:absolute; z-index:30}
.president div.message{ position:relative; float:right; background:url("/images/template/00010/main/message_Bg.png") no-repeat 100% 0; height:282px; width:392px;z-index:20}
.president div.message p.txt01{ font-size:20px; color:#fff; padding:40px 20px 0 90px; line-height:1.3;}
.president div.message p.txt02{ font-size:13px; color:#b6e0ff; padding:10px 20px 0 90px;}
.president div.message a.more{ position:absolute; bottom:30px; left:90px; width:46px; height:10px; background:url("/images/template/00010/main/more01.png") no-repeat 0 0; text-indent:-10000px; font-size:0; line-height:0;}

/* 공지사항 */
.box_notice { width:304px; overflow:hidden; float:right;}
.box_notice .notice_cnt { width:304px; position:relative; }
.box_notice h2{ font-size:20px; font-family:'NanumBold'; padding-bottom:14px; border-bottom:3px solid #969696; }
.box_notice .list_box{ width:304px; padding:0 0 0; }
.box_notice .ul_list,
.box_notice .ul_list a{ display:block;}
.box_notice .ul_list li{ float:left; width:100%; padding:13px 0 13px; border-bottom:1px solid #ddd; background:url("/images/template/00010/main/noti_dot.gif") no-repeat 0 21px; }
.box_notice .ul_list li a { padding-left:8px; line-height:20px; font-size:13px; color:#333; }
.box_notice .ul_list li a:hover{ text-decoration:underline;}
.box_notice .ul_list li span.date{ margin-right:5px; color:#666}
.box_notice .btn_more{ position:absolute; top:5px; right:0; width:18px; height:18px; background:url("/images/template/00010/main/btn_more.png") no-repeat 0 0; text-indent:-10000px; font-size:0; line-height:0;}

/*바로가기*/
.m_link01{position:relative;width: 304px;height: auto;float: right;/* clear:both; */margin:30px 0 0;}
.m_link01 ul{ width:100%; }
.m_link01 li{float:left;width: 135px;height:106px;text-align:center;margin-bottom: 30px;}
.m_link01 li:nth-child(2n){ margin-left:33px;}
.m_link01 li a{background:url("/images/template/00010/main/LinkBg.png") no-repeat 0 0;width:105px;height:106px;display:block;margin: 0 auto;}
.m_link01 li a span{ padding:113px 0 0; display:block; font-family:'NanumBold'; font-size:12px; color:#555;}
.m_link01 li a:hover span{ color:#0074ca;}
.m_link01 li.btn_01 a{ background-position: 0 0;}
.m_link01 li.btn_05 a{ background-position: -105px 0;}
.m_link01 li.btn_03 a{ background-position: -210px 0;}
.m_link01 li.btn_04 a{ background-position: -315px 0;}
.m_link01 li.btn_02 a{ background-position: -420px 0;}
.m_link01 li.btn_01 a:hover{ background-position: 0 -106px;}
.m_link01 li.btn_05 a:hover{ background-position: -105px -106px;}
.m_link01 li.btn_03 a:hover{ background-position: -210px -106px;}
.m_link01 li.btn_04 a:hover{ background-position: -315px -106px;}
.m_link01 li.btn_02 a:hover{ background-position: -420px -106px;}

/*홍보동영상*/
.m_video {float: left; width: 664px; margin-top: 30px;}
.m_video h2 { margin-bottom:10px; font-size:20px; font-family:'NanumBold';}
.m_video .video {width: 100%;height: 250px;background: #cecece;}
.m_video .video video {width:100%;height: 100%; object-fit: cover;}

/*admission*/
.admission{ width:304px; height:128px; float:right; margin:30px 0 0; background:url("/images/template/00010/main/admissions_bg.png") no-repeat 82% 0;}
.admission h2{ font-size:16px; font-family:'NanumBold'; color:#fff; margin:30px 0 10px 30px; }
.admission .go_admis{ margin-left:30px;}
.admission a{ display:inline-block; border:1px solid #b7cddd; padding:5px 10px; color:#fff; font-family:'NanumBold'; font-size:12px; letter-spacing:0.5px;}
.admission a:hover{ text-decoration:underline; border:1px solid #fff;}

/*바로가기*/
.m_link02{position:relative;width: 664px;float:left;clear:both;margin:30px 0 0;}
.m_link02 ul{ width:100%; }
.m_link02 li{ float:left; width:308px; }
.m_link02 li h2{ background:#143a5f; height:40px; line-height:40px; text-align:center; color:#fff; font-size:16px; font-family:'NanumBold'; }
.m_link02 li.btn_03 h2{ background:#d44a6a;}
.m_link02 li.btn_02{ margin-left:48px;}
.m_link02 li.btn_03{ width:302px; margin-left:47px;}
.m_link02 li .box{ position:relative; border:1px solid #d1d0d5; border-top:0; height:230px; box-shadow:0 2px 3px #f7f7f7; }
.m_link02 li .box p.text{font-family:'Nanum'; margin:10px; font-size:12px; color:#666; }
.m_link02 a.more{ position:absolute; bottom:16px; right:20px; width:34px; height:13px; background:url("/images/template/00010/main/more02.png") no-repeat 0 0; text-indent:-10000px; font-size:0; line-height:0;}
.m_link02 a.play{ z-index:30; position:absolute; bottom:95px; left:130px; width:59px; height:59px; background:url("/images/template/00010/main/btn_play.png") no-repeat 0 0; text-indent:-10000px; font-size:0; line-height:0;}
.m_link02 li.btn_03 p.img{ position:relative; z-index:10}
.m_link02 a.down {display: block; max-width: 80%; border: 1px solid #0074ca; border-radius: 10px; margin: 20px auto 0; padding: 10px 5px; text-align: center;  font-family:'NanumBold';}
.m_link02 a.down:hover {background-color: #0074ca; color: #fff; transition: .3s; }
.m_link02 a.down:hover img {filter: brightness(10);}

/*academics*/
.academics{ position:relative; clear:both; float:left; width:664px; margin:30px 0 0; }
.academics h2{ font-size:20px; font-family:'NanumBold'; margin-bottom:14px; }
.academics a.btn_more{ position:absolute; top:5px; right:0; width:18px; height:18px; background:url("/images/template/00010/main/btn_more.png") no-repeat 0 0; text-indent:-10000px; font-size:0; line-height:0;}
.academics ul.link_lst li{ float:left; width:211px; height:272px; margin-left:15px;}
.academics ul.link_lst li:first-child{ margin-left:0;}
.academics ul.link_lst li a{ display:block; height:272px; border-bottom:3px solid #0090da; box-sizing:border-box; }
.academics ul.link_lst li a:hover{ background:url("/images/template/00010/main/aca_onBg.png") no-repeat 50% 0}
.academics ul.link_lst li a:hover h3{ color:#fff;}
.academics ul.link_lst li a:hover p{ color:#e0dfdf;}
.academics ul.link_lst li a:hover span.icon img{ opacity:0.7;}
.academics ul.link_lst li h3{ color:#333; font-size:17px; padding:10px 0 10px 15px;}
.academics ul.link_lst li p{ color:#666; font-size:11px; font-family:'Nanum'; padding-left:15px; letter-spacing:-0.5 }
.academics ul.link_lst li span.icon{ padding:15px 0 0 15px; display:block}

/*photonews*/
.photonews{ position:relative; width:304px; float:right; margin:30px 0 0; }
.photonews h2{ font-size:20px; font-family:'NanumBold'; margin-bottom:14px; }
.photonews a.btn_more{ position:absolute; top:5px; right:0; width:18px; height:18px; background:url("/images/template/00010/main/btn_more.png") no-repeat 0 0; text-indent:-10000px; font-size:0; line-height:0;}
.photonews .pnews_img p.img { float:left; margin:0 15px 0 0}
.photonews .pnews_img p.img img {width:93px; height:62px;}
.photonews .pnews_img h3.tit a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; font-weight:bold; font-size:15px; line-height:1.4;color:#222;}
.photonews .pnews_img p.txt{ margin-top:5px; overflow:hidden; height:35px;}
.photonews .pnews_img p.txt a{ font-size:12px; line-height:14px; color:#222; font-family:'Nanum';}
.photonews .pnews_li{ margin:15px 0 0; padding-top:10px; clear:both; float:left; width:100%; border-top:1px dashed #ddd; }
.photonews .pnews_li li{ background:url("/images/template/00010/main/noti_dot.gif") no-repeat 0 10px;}
.photonews .pnews_li li a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; font-family:'Nanum'; font-size:12px; line-height:1.8; color:#444; padding-left:8px;}
.photonews a:hover{ text-decoration:underline;}

/*HSU_sns*/
.HSU_sns{ position:relative; width:304px; float:right; margin:25px 0 0; }
.HSU_sns h2{ margin-bottom:10px; font-size:20px; font-family:'NanumBold';}
.HSU_sns ul{ margin-left:-1%;}
.HSU_sns ul li{ float:left; width:100%; margin:0 0 5px 0; border-radius:3px; }
.HSU_sns ul li a{ color:#fff; font-family:'NanumBold'; font-size:13px; line-height:45px; height:45px; display:block; padding:0 15px;}
.HSU_sns ul li.Ty01{ background:#3069bd;}
.HSU_sns ul li.Ty02{ background:#d94146;}
.HSU_sns ul li.Ty01 a{ background:url(/images/template/00010/main/ico_facebook.png) no-repeat 90% 50%;}
.HSU_sns ul li.Ty02 a{ background:url(/images/template/00010/main/ico_youtube.png) no-repeat 90% 50%;}
.HSU_sns ul li a:hover{ text-decoration:underline;}

@media (max-width: 800px) {
	.main_content {margin:0 auto; background-image:none; }
	.area_main_content_1{ width:95%; }	
	
	/* visual */
	.area_visual {overflow:hidden; position:relative; height:0; margin-top:-70px; padding-top:40%; height:auto;}
	.area_visual .ul_visual li { padding-top:40%; background-size:cover}
	.area_visual .ul_visual li p { left:5%; width:100%; margin-left:0;}
	.area_visual .ul_visual li .txt_1 {font-size:26px; line-height:1.1; font-family:'NanumBold'; padding-top:10px; background:url("/images/template/00010/main/m_bullet.png") no-repeat 0 0; }
	.area_visual .ul_visual li .txt_2 {font-size:15px; line-height:1.3; font-family:'NanumBold'; }
	.area_visual .ul_visual li .txt_1{top:35%;} 
	.area_visual .ul_visual li .txt_2{top:60%;} 
	
	/*visual rolling*/
	.area_visual .ul_play{ bottom:18%; left:5%; margin-left:0 !important; z-index:2;}
	.box_main_content_1 .ul_pos,
	.area_visual .ul_pos { bottom:18%; left:5%; margin-left:0 !important; z-index:1; }

	/*president's message*/
	.president{ width:100%; margin-top:30px;}
	.president div.message{width:80%;0}
	.president div.message p.txt01{ padding:40px 0 0 40%;}
	.president div.message p.txt02{  padding:10px 0 0 40%;}

	/* 공지사항 */
	.box_notice { width:100%; margin-top:30px;}
	.box_notice .notice_cnt { width:100%; }
	.box_notice .list_box{ width:100%; }
	.box_notice .ul_list li{  width:100%; }
	.box_notice .ul_list li a { overflow:hidden; white-space:nowrap; text-overflow:ellipsis;  }
	
	/*바로가기*/
	.m_link01{ width:100%; height:auto;}
	.m_link01 ul{ width:100%;}
	.m_link01 li{ margin-left:0; width:20%; height:140px; margin-bottom:20px; }
	.m_link01 li:nth-child(2n){margin-left:0;}
	.m_link01 li a{ margin:0 auto; }
		
	/*admission*/
	.admission{ width:100%; margin:0}

	/*바로가기*/
	.m_link02 { width:100%; height:auto;}
	.m_link02 li{width: 48%;}
	.m_link02 li.btn_02{ margin-left:3%;}
	.m_link02 li.btn_03{ width:32%; margin-left:3%;}
	.m_link02 li .box{height: 220px;}
	.m_link02 a.play{ bottom:50%; left:50%; margin:0 0 -30px -30px;}	
	.m_link02 li.btn_03 p.img img{ height:200px;}	
	.m_link02 li .box p.text{
    padding-right: 35px;
    /* text-overflow: ellipsis; */
}
	.m_link02 li .box p.img img{ width:100%;}
	
	/*academics*/
	.academics{ width:100%; }	
	.academics ul.link_lst li{ width:31%;  margin-left:3.5%;}
	.academics ul.link_lst li:first-child{ margin-left:0;}

	/*photonews*/
	.photonews{ width:100%; }
	
	/*keyword*/
	.keyword{ width:100%;}
		
	/*HSU_sns*/
	.HSU_sns{ width:100%;}

	/*홍보동영상*/
	.m_video { width:100%;}
					
}

@media (max-width: 690px) {
	/* visual */
	.area_visual { padding-top:50%;}
	.area_visual .ul_visual li {padding-top:50%;}	

	/*president's message*/
	.president p.photo{ display:none;}
	.president div.message{ height:auto; width:100%; padding:40px; box-sizing:border-box;}
	.president div.message p br{ display:none;}	
	.president div.message p.txt01{ padding:0; }
	.president div.message p.txt02{ padding:10px 0 0 0;}
	.president div.message a.more{ position:relative; bottom:auto; left:auto; margin:15px 0 0; display:block;}
	
	/*academics*/
	.academics ul.link_lst li{ width:100%; height:auto; margin-left:0; border-bottom:1px solid #ddd;}
	.academics ul.link_lst li:first-child{ margin-left:0; border-top:1px solid #ddd;}
	.academics ul.link_lst li a{ height:auto; border-bottom:none; display:block; width:100% }	
	.academics ul.link_lst li a:hover{ background:none}
	.academics ul.link_lst li a:hover h3{ color:#333;}
	.academics ul.link_lst li a:hover span.icon img{ opacity:1;}	
	.academics ul.link_lst li h3{ color:#666; font-size:15px; padding:10px 0 10px 55px; box-sizing:border-box; line-height:43px; display:block; width:100%; background:url(/images/template/00010/main/arrow.gif) no-repeat 98% 50%;}	
	.academics ul.link_lst li h3 br{ display:none;}
	.academics ul.link_lst li p{ display:none; }	
	.academics ul.link_lst li span.icon{ width:43px; float:left; position:absolute; }
	.academics ul.link_lst li span.icon img{ width:60%; }
		
}

@media (max-width: 560px) {	
	.area_main_content_1{ width:90%; }	
	
	/* visual */
	.area_visual { padding-top:60%;}
	.area_visual .ul_visual li {padding-top:60%;}	
	.area_visual .ul_visual li p { display:none}	

	/*visual rolling*/
	.area_visual .ul_play{ display:none;}
	.box_main_content_1 .ul_pos,
	.area_visual .ul_pos { display:none; }
	
	/*바로가기*/
	.m_link01 li{ width:33%; }	
	.m_link01 li.btn_04{ margin-left:16%}
		
	/*바로가기*/
	.m_link02{ margin:0;}
	.m_link02 li{ width:100%; margin-top:10px; }
	.m_link02 li.btn_02{ margin-left:0;}
	.m_link02 li.btn_03{ width:100%; margin-left:0;}
	.m_link02 li .box{ height:auto; padding-bottom:20px; }
	.m_link02 li.btn_03 .box{ padding-bottom:0; }
}

@media (max-width: 480px) {	

	/*바로가기*/
	.m_link01 li{ width:50%; }	
	.m_link01 li.btn_04{ margin-left:0%}
	
	/*academics*/	
	.academics ul.link_lst li h3{ font-size:14px; padding:10px 0 10px 50px;}	
	.academics ul.link_lst li span.icon{  padding:15px 0 0 10px; }
	
}

@media (max-width: 380px) {

	
}
