@charset "utf-8";

/* family site */
.family_wrap {
	height: auto;
	min-width: 1350px;
}
/* family_site 150727 */
.family_site_box {
	box-sizing:border-box;
	border-right: 1px solid #dedfe2;
	z-index: 9998;
	background: #f2f2f2;
	padding-top:30px;
	width: 140px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	font-family:'noto' , sans-serif;
	letter-spacing:-0.8px;
}
.family_site_box *{font-family:'noto' , sans-serif;}
.family_site_box .login_line {
	background: none;
	text-align: left;
	color: #a7a7a7;
	padding: 0 18px 0 18px;
	line-height: 48px;
	height: 48px;
	border-bottom: 1px solid #dedfe2;
}
.family_site_box .login_line a {
	color: #101013 !important;
	font-size: 11px;
}
.family_site_box .login_after_line {
	margin-top: 25px;
	position: relative;
	z-index: 111;
	color: #101013;
	font-size: 14px;
	letter-spacing: -1px;
	padding: 0 15px;
	height: 90px;
	line-height:1.3;
	text-align: left;
	border-bottom: 1px solid #dedfe2;
}
.family_site_box .select_box {
	margin-top: 10px;
}
.family_site_box .select_box > a {
	display: block;
	font-size: 12px;
	color: #9a9a9a; /**/
	width: 100px;
	height: 22px;
	padding-left: 8px;
	line-height: 22px;
	background: url("https://cdn.hackersut.com/www/images/common/bg_login.png") 86px 0 no-repeat;
	border: 1px solid #a0a0a0;
	text-align: left;
}
.family_site_box .select_banlist {
	display: none;
	border: 1px solid #000;
	background: #fff;
	width: 300px;
}
.family_site_box .select_banlist li a {
	text-align: left;
	font-size: 11px;
	letter-spacing: -1px;
	padding-bottom: 3px;
	padding-top: 3px;
	padding-left: 5px;
	display: block;
	color: #000;
	width: 295px;
}
.family_site_box .select_banlist li a:hover {
	background: #858585;
	color: #fff !important;
}
.family_site_box .login_name {
	color: #101013;
	font-weight: bold;
}
.family_site_box .family_site_open_btn {
	display: none;
}
/* 닫기 */
.family_site_box.close { /*width:42px;*/
	overflow:hidden;
	border:0;
	margin-left:0;
	border-right:1px solid #D7D7D7;
}
.family_site_box.close .close_area {
	display: none;
}
.family_site_box.close .family_site_open_btn {
	display: block;
	float: right;
	margin-right:7px;
	width:40px;
	text-align:center;
	line-height:1.5; font-size:14px; color:#939393;
}
.family_site_box.close .family_site_open_btn:before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin:0 3px;
	background: url("https://cdn.hackersut.com/www/images/common/sp_common2.png") no-repeat 0 0;
	background-position: -22px -287px;
	vertical-align: bottom;
}
.family_site_box.close .title-close { display: inline-block; margin-top: 20px;min-height: 200px; font-size: 15px; color: #5E5F61; writing-mode: tb-rl; text-align: left; }
.family_site_box.close .title-close:before { content: ''; display: inline-block; margin-bottom: 10px; width: 25px; height: 25px; background-image: url("https://cdn.hackersut.com/www/images/common/sp_common2.png"); background-position: -46px -287px; }

/* 기본스타일 */
.family_site_box .logo_ut {
	position: relative;
}
/* 편입 로고영역 */
.family_site_box .family_site_tit2 {
	display: block;
	height:105px;
	margin:15px 0 0 11px;
	background: url("https://cdn.hackersut.com/www/images/common/aside_logo_v3.jpg") no-repeat 0 0;
	font-size: 0;
	text-indent: -9999px;
}
.ico_lnb_join {
	position: absolute;
	top: 68px;
	left: 50%;
	margin-left: -55px;
}
/* 편입 로고 아래 배너 */
.family_site_box .family_list {
	padding-bottom: 20px;
	background: #f2f2f2;
}
.family_site_box .family_list strong a {
	color: #585858;
	font-size: 14px;
	padding-left: 14px;
	display: block;
	height: 57px;
	line-height: 57px;
	/*background: url("https://cdn.hackersut.com/www/images/common/bg_family_site_sub_ov.png") no-repeat 120px center;*/
}
.family_site_box .family_list > li {
	position:relative;
	padding: 0 !important;
}
.family_site_box .family_list li .family_site_sub {
	display: none;
	border-top: 1px solid #e0e1e6;
}
.family_site_box .family_list li.on .family_site_sub {
	display: block;
}
.family_site_box .family_list li.active, .family_site_box .family_list li.on {
	background: #fff;
}
.family_site_box .family_list li .family_site_sub {
	overflow: hidden;
	padding: 25px 0 20px;
}
.family_site_box .family_list li .family_site_sub li {
	padding-left: 14px;
	margin-bottom: 8px;
}
.family_site_box .family_list li .family_site_sub li a {
	color: #616161;
	font-size: 12px;
}
.family_site_box .family_list li .family_site_sub li span {
	font-size: 10px;
}
.family_site_box .family_list li .family_site_sub li.active a,
.family_site_box .family_list li .family_site_sub li a:hover {
	color: #616161;
	font-weight: bold;
}
.family_site_box .family_list li .family_site_sub li.pl0.pt5 {
	padding-left: 0;
	padding-top: 5px;
}


.family_site_box .family_list > li > strong > a:after{content:'';display:block;position:absolute;top:27px;right:14px;width:6px;height:4px;background:url('https://cdn.hackersut.com/www/images/common/sp_common2.png') -44px -140px no-repeat}
.family_site_box .family_list li.on.active strong a:after,
.family_site_box .family_list li.active strong a:after{background-position:-44px -134px}
.family_site_box .family_list > li.no-action > strong > a:after{display:none}
.family_site_close_btn{padding-left:15px; line-height:1.5; font-size:14px; color:#939393; }
.family_site_close_btn:before{ content:''; display:inline-block; width:20px; height:20px; margin-right:6px; background-image:url('https://cdn.hackersut.com/www/images/common/sp_common2.png'); background-position:0 -287px; vertical-align:bottom; }
.family_list li.hackers_cs a {
	height: 40px;padding-left:15px;font-size: 13px;line-height: 40px;color: #939393;background: #f2f2f2;font-weight:normal;
}

.family_list li.hackers_cs a em:before {
	content:'';
	display: inline-block;
	width:16px;height:16px;
	margin-right:8px;
	background: url('https://cdn.hackersut.com/www/images/common/sp_common2.png') no-repeat -63px -134px;
	vertical-align:middle;
}
.family_list li#group_qna.active {
	background: none;
}
.family_list li#group_qna strong a {
	background: none;
}
.family_site_box .on#language strong a {
	color: #d01716;
}
/* 어학 */
.family_site_box .on#group strong a {
	color: #d01716;
}
/* 그룹소개 */
.family_site_box .on#community strong a {
	color: #d01716;
}
/* 커뮤니티 */
.family_site_box .on#job strong a {
	color: #d01716;
}
/* 취업 */
.family_site_box .on#pass strong a {
	color: #d01716;
}
/* 공무원 */
.family_site_box .on#teacher strong a {
	color: #d01716;
}
/* 임용 */
.family_site_box .on#finance strong a {
	color: #d01716;
}
/* 자격증 */
.family_site_box .on#hackersut strong a {
	color: #d01716;
}

.family_site_box .facebook_btn {
	height: auto;
	padding: 0 0 0 17px;
}
.family_site_box .facebook_btn .sns_tit {
	width: 65px;
	height: 13px;
	display: block;
	margin: 10px 0;
	font-weight:700;
	color:#585858;
}
.family_site_box .facebook_btn .sns_btn {
	margin-bottom: 15px;
}
.family_site_box .facebook_btn .sns_btn a {
	margin-right: 7px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	width: 28px;
	height: 28px;
	background: url("https://cdn.hackersut.com/www/images/common/sp_common2.png") no-repeat 0 -156px;
	vertical-align: top;
}
.family_site_box .facebook_btn .sns_btn a.btn2 {
	background-position-x:-30px;
}
.family_site_box .facebook_btn .sns_btn a.btn3 {
	background-position-x:-60px;
}
.family_site_box .facebook_btn .sns_btn a.btn4 {
	background-position-x:-91px;
	margin-top: 10px;
}
.family_site_box .facebook_btn .sns_btn a.btn5 {
	background-position-x:-122px;
	margin-top: 10px;
}
.family_site_box .facebook_btn .sns_btn a.btn6 {
	background-position-x:-152px;
	margin-top: 10px;
}
.family_site_box .facebook_btn .sns_btn a span {
	font-size: 0;
	text-indent: -9999px;
	visibility: hidden;
}

/*  familySiteNew_ico_set */
.lst_login_info{border-bottom:1px solid #e0e1e6;font-family:'noto' , sans-serif;}
.lst_login_info > li{position:relative;border-top:1px solid #e0e1e6;line-height:38px}
.lst_login_info > li > a{display:block;height: 40px;padding-left:15px;font-size: 14px;line-height: 40px;color: #939393;background: #f2f2f2;;}
/*.lst_login_info > li > a:hover{background:#fff;color:#000}*/
.login_before .lst_login_info > li:first-child,.login_after .lst_login_info > li:first-child{border-top:0}
.login_after .lst_login_info > li.on .lecture{background-position-y:-519px}
.login_after .lst_login_info li.on .bx_lect_lst{display:block}
.login_after .user_name{display:block;padding:25px 10px;letter-spacing:-1px}

.lst_login_info > li .ico_set{display:inline-block;width:20px;height:20px;background:url('https://cdn.hackersut.com/www/images/common/sp_common2.png') no-repeat;vertical-align:middle;}
.lst_login_info > li .join{background-position:0 -90px}
.lst_login_info > li .login{background-position:-24px -90px}
.lst_login_info > li .logout{background-position:-44px -90px}
.lst_login_info > li .lecture{background-position:-64px -90px}
.lst_login_info > li .myclass{background-position:-91px -90px}
.lst_login_info > li .modify{background-position:-109px -90px}
.lst_login_info > li .favorite{background-position:-133px -90px}
.lst_login_info > li .cart{background-position:-159px -90px}
.lst_login_info > li > a:hover [class^='ico_']{background-position-y:-90px}
.join_events{width:100%;font-weight:400;color:#404040;padding:10px 0;position:relative;font-size:14px;border-top:1px solid #E0E1E3;border-bottom:1px solid #E0E1E3;text-align:center;background: #f2f2f2;}
.join_events span{display:none;width:100%;position:absolute;left:0;top:0;padding:9px 0 0;background-color:#f2f2f2;color:#d01716;font-weight:bold;}
.join_events a{display:block;} 


/* 170509 ?占쏙옙?占쏙옙???占쏙옙?占쏙옙 famliy_site ?占쏙옙???占쏙옙?? */
li.re_hackersac{background-color:#C00000 !important;}
a.hackersac_a{color:#fff !important;}
.re_siteSub{background-color:#fff !important; padding:20px 0 !important;}
.re_siteSub li{padding:0 !important; margin:0 !important;}
.re_siteSub li a{font-size:12px; vertical-align:middle; color:#858585; display:block; letter-spacing:-1px; padding:5px 0 5px 0 !important; margin-left:14px !important;}
.re_siteSub li:hover{background-color:#F8E2E2 !important;}
.re_siteSub li a:hover{font-weight:bold; color:#616161; font-size:12px;}




/*closing_banner*/
.closing_banner_wrap{position:fixed;top:-730px;right:0;transition:all 0.3s;z-index:99999;}
.closing_banner_wrap .bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:9999;opacity:.8;filter:alpha(opacity=80)}
.closing_banner{position:absolute;top:0;right:8px;height: 730px;background-color:rgb(243, 243, 243);z-index:10000;}
.closing_banner img{max-width:340px;}
.closing_banner .top_view img{min-width:340px;}
.closing_banner .closing_title{text-align:center;height:50px;line-height:55px;background:#232323;}
.closing_banner .closing_title a{display:block;color:#fff;font-size:15px;}
.closing_banner a.close{display:block;position:absolute;top:17.5px;right:19px;margin-right:0;width:20px;height:20px;background-image: url('https://cdn.hackersut.com/www/images/common/close_btn2.png');text-indent:-3000em;font-size:0;}
.closing_banner .top_view{text-align:center;padding:15px 15px 0;float:left;}
.closing_banner .btm_view{padding:10px 15px 0 15px;overflow:hidden;}
.closing_banner .btm_view li{float: left;width:164px;overflow:hidden;}
.closing_banner .btm_view li:last-child{float: right;}
.closing_banner .btm_view li .list_wrap .view_img{display: inline-block;width: 164px;background-color: #fff;text-align: center;vertical-align: top;cursor: pointer;transition-duration: 0.15s;transition-timing-function: ease-in-out;border-radius: 5px;overflow: hidden;border: 1px solid #eaeaea;box-sizing: border-box;}
.closing_banner .btm_view li .list_wrap .view_name{display:block;height:38px;line-height:20px;font-size:13px;color:#424242;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;}
.closing_banner .btm_view li .list_wrap:hover .view_name{color:#000 !important;font-weight:600;}
.closing_banner .btm_view li .list_wrap:hover .view_img{
	transition-duration:0.15s;
	-webkit-transition-duration:0.15s;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-delay:initial;
	-webkit-transition-delay:initial;
	transition-property:initial;
	-webkit-transition-property:initial;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	box-shadow:rgba(50, 50, 50, 0.15) 0 6px 6px 0;
	border:none;
}
.closing_banner .closing_closetoday{display:block;clear:both;width:340px;padding:10px 10px 15px;position: absolute;bottom: 0;}
.closing_banner input[type="checkbox"]{margin-right:5px;}


/* * *
gate-wrap
* * */
.gate-wrap{ width:100%; font-family:'noto', san-serif; letter-spacing:-1px; background:#f4f5f6; }
.gate-cont{ display:none; width:100%; border-top:1px solid #c4c4c4; }
.gate-menu-wrap{border-bottom:1px solid #e9eaea;}
.gate-wrap .gate-top{ width:100%; position:relative; text-align:center; border-bottom:1px solid #e9eaea; }
.gate-wrap .gate-top .btn .off{ display:none; }
.gate-wrap .gate-top .btn.on .off{ display:inline-block; }
.gate-wrap .gate-top .btn.on .on{ display:none; }
.gate-wrap .gate-top .gate-close{ display:none; position:absolute; right:50%; top:20px; margin-right:-490px; }
.gate-wrap .gate-top .gate-close.on{ display:block; }
.gate-wrap .gate-top .tooltip-btn{ position:absolute; right:px; top:0; height:64px; line-height:64px;; font-size:13px; color:#333; }
.gate-wrap .gate-top .tooltip-btn span{ position:relative; }
.gate-wrap .gate-top .tooltip-btn span:after{ position:absolute; bottom:0; left:0; width:100%; height:1px; background:#333; content:''; }
.gate-wrap .gate-top .tooltip-box{padding-bottom:10px;font-size:13px;color:#7e7e7e;z-index:1000;}

/*??*/
.gate-tab-wrap{ width:1000px; margin:0 auto; padding:10px 0 30px; }
.gate-tab-wrap:after{ display:block; content:""; clear:both; }
.js-gate-tab{ float:left; width:20%; margin-top:28px; }
.js-gate-tab li{ display:inline-block; height:45px; margin-top:10px; line-height:43px; text-align:left; }
.js-gate-tab li a{ display:block; padding:0 36px 0 22px; font-size:17px; color:#666; background:#f4f5f6; border:1px solid #ccc; border-radius:5px; font-weight:100; background:url('https://cdn.hackersut.com/www/images/layout/main/black_arrow.png') no-repeat 90% 50%; }
.js-gate-tab li:hover a,
.js-gate-tab li.on a{ color:#fff; border:1px solid #8b98a5; background:#8b98a5 url('https://cdn.hackersut.com/www/images/layout/main/white_arrow.png') no-repeat 90% 50%; }
.gata-tab-con{ display:none; float:left; width:80%; }
.gata-tab-con.on{ display:block; }
.gata-tab-con:after{ display:block; content:""; clear:both; }
.gata-tab-con dl{ float:left; position:relative; width:22%; margin-left:4%; }
.gata-tab-con dl:after{ position:absolute; left:0; top:60px; content:""; width:1px; height:135px; background:#e8e8e8; }
.gata-tab-con dl:first-child{ margin-left:0; }
.gata-tab-con dl dt{ padding:0 10px; height:43px; line-height:43px; border-bottom:1px solid #7a7a7b; font-weight:500; color:#222; font-size:18px; letter-spacing:-2px; }
.gata-tab-con dl dd{ height:150px; overflow-y:auto; }
/*chrome scroll 占쏙옙占쏙옙?占쏙옙??*/
.gata-tab-con dl dd::-webkit-scrollbar{ width:10px; }
.gata-tab-con dl dd::-webkit-scrollbar-track{ background-color:#f4f5f6; }
.gata-tab-con dl dd::-webkit-scrollbar-thumb{ background-color:#e4e7ea; border-radius:10px; }
.gata-tab-con dl dd::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{ width:5px; height:5px; background:#f4f5f6; }
.gata-tab-con dl dd::-webkit-scrollbar-thumb:hover{ background-color:#bfc6cd; }
/*ie scroll 占쏙옙占쏙옙?占쏙옙??*/
.gata-tab-con dl dd{ scrollbar-face-color:#cfd3d7; scrollbar-track-color:#f4f5f6; scrollbar-arrow-color:#f4f5f6; scrollbar-highlight-color:#f4f5f6; scrollbar-3dlight-color:none; scrollbar-shadow-color:#f4f5f6; scrollbar-darkshadow-color:none; }
.gata-tab-con dl dd a{ display:block; position:relative; padding:9px 0 0 13px; font-size:15px; color:#666; letter-spacing:-1px; word-break:keep-all; }
.gata-tab-con dl dd a:hover{ color:#0056ba; }
.gata-tab-con dl dd a .hover{ display:none; padding-left:5px; color:#0056ba; font-weight:700; font-size:11px; }
.gata-tab-con dl dd a .hover:before{ display:none; position:absolute; left:0; top:8px; width:2px; height:20px; background:#1d84fb; content:""; z-index:9 }
.gata-tab-con dl dd a:hover .hover,
.gata-tab-con dl dd a:hover .hover:before{ display:inline-block; margin-top:2px; vertical-align:top; }