@charset "utf-8";
@import url("common.css");
@import url("/hcm/design/layout2020/common/res/css/common.css");
 

/* #main {padding:10px 0; background:#ececec;}
#main .main {margin:10px auto 10px; overflow:hidden;}

#main .title {height:50px; line-height:50px; padding-top:10px; font-size:22px; font-weight:bold; color:#231f20; font-family:'Nanum Square';}

#splash {float:left; width:550px; overflow:hidden;}

#main .v1 {background:#fff; overflow:hidden;}
#main .v2 {background:#fff; overflow:hidden;}
#main .v3 {background:#fff; overflow:hidden;} */

/* #bbs .box2+.box2 {border-top:1px solid #ececec; height:340px;} */
/* #bbs .box3 {position:relative; height:225px; padding:0 30px; overflow:hidden;}
#bbs .box1 {position:relative; height:500px; padding:0; overflow:hidden;} 
#bbs .box3+.box3 {border-top:1px solid #ececec; height:227px;} */

#bbs {width: 100%;height: 100%;}
#bbs .bg {width: 100%; height: 500px; background: linear-gradient(to right, #1f3370 20%, #f5f5f5 20%);}
#bbs .box2.on1{ max-width: 1920px; margin: 0 auto;  display: flex; text-align: center; width: 100%; height: 100%;}
#bbs .noti{color: #fff; font-size: 40px; padding-top: 80px; transform: translateX(100%);}
#bbs .box2 {position:relative; height:500px; padding:0; overflow:hidden;}

#bbs .bbs {height: 100%;}
#bbs .bbs .more {position:absolute; top: 20%; right:8%; display:none;}
#bbs .bbs .title {color:#1f3370; cursor:pointer; position: relative; left: 300px; top: 90px; display:flex;}
#bbs .bbs .title>span{ padding: 7px 25px; margin: 0 20px 0 0;  border:2px solid #1f3370; text-align: center; font-size:18px; font-weight:400; }
#bbs .bbs .btnicon { display: block; position: relative; left: 300px; top: 90px; padding-right: 20px;}
#bbs .bbs .btnicon>img { visibility: hidden; }

#bbs .bbs .list {display: flex; width: 100%; display:none; position: absolute; left: 0; top: 40%; text-align:left; padding-left:7%;}
#bbs .bbs .list li {width: 20%; height: 240px; margin: 0 0.5%; font-size:18px; line-height:30px; overflow:hidden; background-color: #fff; border: 1px solid #ddd; display: inline-block;}
#bbs .bbs .list li:hover {box-shadow: 5px 10px 10px rgba(119, 119, 119, 0.5);}
#bbs .bbs .list a {color:#333; font-weight: 600; padding: 5%; display: block; text-align: left; text-overflow:ellipsis; overflow:hidden;  height: 80%; position: relative; white-space: normal;}
#bbs .bbs .list .bodytxt {font-weight: 400; font-size:16px; display:block; color:#939393; text-align:left; padding-top: 10px; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;}
#bbs .bbs .list .bobytit { text-align:left; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;}
#bbs .bbs .list .date {font-weight: 400; font-size:16px; color:#939393;position: absolute; bottom: 0;}

#bbs .bbs.on{height: 100%;}
#bbs .bbs.on .title span {padding: 7px 25px; margin: 0 20px 0 0;  background-color: #1f3370; text-align: center; color: #fff;} 
#bbs .bbs.on .title>span a.fcolor{color:#ffffff;}
#bbs .bbs.on .btnicon { display: block; position: relative; left: 300px; top: 90px; padding-right: 20px;}
#bbs .bbs.on .btnicon>img { visibility: visible; }
#bbs .bbs.on .list {display:block;}
#bbs .bbs.on .more {display:block;}

/* 미디어 쿼리 시작 */
@media only screen and (max-width: 1500px) {
	#bbs .noti{font-size: 35px; transform: translateX(70%);}
}
@media only screen and (max-width: 1216px) {
	#bbs .bbs .list li {width: 240px;}
	#bbs .bbs .more {right:6%;}
	#bbs .bbs .title, #bbs .bbs .btnicon, #bbs .bbs.on .btnicon {left: 200px};
	
  }
@media only screen and (max-width:1040px) {
	#bbs .noti{color:#1f3370; font-size: 30px; text-align: center; font-weight: 500; position: absolute; left: 50%; transform: translate(-60%);  padding-top: 20px;} 
	#bbs .bbs .list {top: 30%; overflow-y: hidden; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; white-space: nowrap;}
	#bbs .bg {background: linear-gradient(to right, #1f3370 0%, #f5f5f5 0%);}
	#bbs .bbs .btnicon{opacity: 0;}
	#bbs .bbs .title{left: 80px;}
	#bbs .bbs .list a, #bbs .bbs .list .bodytxt{font-size: 15px;}
	.bbs .list li {flex: 0 0 auto;list-style: none;margin-right: 10px;scroll-snap-align: center;}
	#bbs .bbs .title>span { padding: 7px 15px; margin: 0 10px 0 0; font-size: 17px;}
	#bbs .bbs.on .title>span { padding: 7px 15px; margin: 0 10px 0 0; font-size: 17px;} 
}
::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: #ddd;
}
::-webkit-scrollbar{
	height: 7px;
}
@media only screen and (max-width:820px) {
	#bbs .bbs .more {right:6%; top:19%;}
	#bbs .noti{font-size: 24px;}
}
@media only screen and (max-width:740px) {

}
@media only screen and (max-width:640px) {

	#bbs .bbs .title{left: 20px;}
	#bbs .bbs .title>span { font-size: 15px; padding: 5px 10px; margin: 0 7px 0 0;}
	#bbs .bbs.on .title>span {padding: 5px 10px; margin: 0 7px 0 0;} 
	#bbs .bbs .list li { font-size:14px;}
	#bbs .bbs .list .bodytxt, #bbs .bbs .list .date  {font-size:14px;}
}
@media only screen and (max-width:480px) {
	#bbs .bbs .more {right:2%;}
}

#department{width: 100%; height: 680px; background-color: #ddd; background-image: url(../img/depart_img.png); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
#department .txt{position: absolute; text-align: center; left: 50%; transform: translateX(-50%); margin-top: 85px; z-index: 1;}
#department .txt .dpt{font-size: 40px; color: #fff; font-weight: 400; display: block;}
#department .txt .tt{color: rgba(255, 255, 255, 0.6); font-weight: 300; margin-top: 20px; text-align: center; display: block;}

#department .contain{position: absolute; width: 100%; margin: 0 auto; top: 0; left: 50%; transform: translateX(-50%); display: inline-block;}
#department .contain .default{width: 100%; height: 680px; display: flex;}
#department .contain .default .sec{width: 33.333%}
#department .contain .default .sec .num{color: rgba(255, 255, 255, 0.5); font-size: 55px; font-weight: 200; position: relative; top: 45%; left: 30%;}
#department .contain .default .sec .name{color: #fff; font-size: 27px; position: relative; top: 47%; left: 30%;}
#department .contain .default .sec .num02{color: rgba(255, 255, 255, 0.5); font-size: 55px; font-weight: 200; position: relative; top: 30%; left: 35%;}
#department .contain .default .sec .name02{color: #fff; font-size: 27px; position: relative; top: 32%; left: 30%;}
#department .contain .default .sec .explan{color: #fff; text-align: center; display: block; height: 90px; width: 450px; position: relative; top: 45%; left: 50%; transform: translate(-50%,-50%); word-wrap: break-word; overflow-wrap: break-word; word-break: keep-all;}
#department .contain .default .sec>img{position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%);}

@media only screen and (max-width:1500px) {
	#department .txt .dpt{font-size: 30px;}
	#department .txt .tt{font-size: 14px;}
	#department .contain .default .sec .explan{width: 100%;}
	#department .contain .default .sec .num02{ left: 30%;}
	#department .contain .default .sec .name02{ left: 20%;}
}
@media only screen and (max-width:1040px) {
	#head {display:none;}
	#m_head {display:block;}
}
@media only screen and (max-width:900px) {
	#department .txt .dpt, #department .txt .tt{display: none;}
	#department .contain .default{flex-direction : column;}
	#department .contain .default .sec{height: 33.333%; width: 100%; display: flex; border-bottom: 1px solid #fff;}
	#department .contain .default .sec>img{display: none;}
	#department .contain .default .sec .num{top: 37%; left: 35%;}
	#department .contain .default .sec .name{top: 45%; left: 35%;}
	#department .contain .default .sec .explan{text-align: left; left: 50%; top: 58%; font-size: 14px; padding: 0 20px;}
	#department .contain .default .sec .num02{display: none;}
	#department .contain .default .sec .name02{display: none;}
}	
@media only screen and (max-width:640px) {
	#department .contain .default .sec .explan{font-size: 13px; padding: 0 10px;}
	#department{background-image: url(../img/241106_Seoultech_A_06_A.png); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
}
@media only screen and (max-width:480px) {
}
@media only screen and (max-width:320px) {
}