.container--wide { width:2560px; position:relative; text-align:center; left:50%; margin-left:-1280px; } 
.container--medium { width: 1050px; margin: 0 auto; text-align: center; position: relative; } 

a { text-decoration: none; color: inherit; } 

#main { overflow: hidden; } 
.section-main { position: relative; } 
.section-main__bnr { width: 2000px; margin: 0 auto; position: relative; overflow: hidden; z-index: 1; }
.banner_top .bxslider-default:not(.loaded) > .bxslider > li + li { display: none; }
/* bxslider 초기화 전 첫 화면 고정 — 스크립트(jQuery ready)가 슬라이더를 만들기 전에는 슬라이드가 세로로 모두 펼쳐졌다가
   접혀, 메인 빅배너·강의프로모션 카드·학원 이미지 띠배너가 "찰나에 모두 펼쳐졌다 정상으로" 보였다(2026-10-30).
   초기화되면 bxslider 가 ul 을 .bx-wrapper > .bx-viewport 로 감싸므로, ul 이 원래 부모의 직계 자식인 동안만
   초기화 직후 첫 화면과 같은 크기·위치를 잡아 둔다(초기화 뒤에는 이 규칙이 빠진다). 값은 초기화 후 실측과 같게:
   빅배너 첫 장 2000x800, 카드 258x285(테두리·모서리 포함), 띠배너 350x210 슬라이드 1px 간격 한 줄. */
.section-main__bnr > .bxslider > li + li { display: none; }
.section--ticker .sd-box > .bxslider { display: flex; overflow: hidden; height: 210px; }
.section--ticker .sd-box > .bxslider > li { flex: 0 0 350px; margin-right: 1px; }
.section-main__tab .js-tab-type1-con .bxslider-default > .bxslider > li { position: relative; border-radius: 20px; overflow: hidden; box-sizing: border-box; border: 1px solid #e2e8ef; display: block; }
.section-main__tab .js-tab-type1-con .bxslider-default > .bxslider > li > a img { width: 100%; }
.section-main__tab .js-tab-type1-con .bxslider-default > .bxslider > li .hoverItem { display: none; }
/* 메인 빅배너 이미지가 받아지기 전에는 영역 높이가 15px 뿐이라, 아래 영역이 위로 붙어 그려졌다가 이미지(800)가 들어오면 통째로
   밀려 내려갔다(운영 CLS 0.32). 준비 전(ul 직계)과 bxslider 가 높이를 정하기 전(.bx-viewport 에 height 미지정) 동안만
   최소 높이를 잡는다 — 고정 높이가 아니라 실제 이미지가 들어오면 그 높이를 따른다. 이벤트 띠(1050x120)도 같다. */
.section-main__bnr > .bxslider > li:first-child,
.section-main__bnr .bx-viewport:not([style*="height"]) { min-height: 800px; }
.section__line-brn .bxslider-default > .bxslider > li + li { display: none; }
.section__line-brn .bxslider-default > .bxslider > li:first-child,
.section__line-brn .bx-viewport:not([style*="height"]) { min-height: 120px; }
/* 빅배너 좌우 화살표: bxslider 가 .prev/.next 안에 <a> 를 넣기 전(칸이 빈 동안)에만 같은 모양을 그린다 */
.section-main__bnr #main-counter .controls:empty::before { content: ''; display: block; width: 6px; height: 12px; padding: 10px; margin: 0 10px; background: url('https://cdn.hackersut.com/www/images/main/2025/main_renew/main_bnr_arrow.png') 0 center / 30% no-repeat; }
.section-main__bnr #main-counter .next:empty::before { transform: scale(-1); }
/* 위치 표시 점: 서버가 배너 수만큼 그린 .bx-preinit-pager 를 보여 주다가, bxslider 가 ul 을 .bx-wrapper 로 감싸면 숨긴다.
   크기·간격·색은 준비 후 .bx-pager 와 같다(카드 8px 회색, 이벤트 띠 10px 흰색 반투명). */
.section-main__tab .js-tab-type1-con .bxslider-default { position: relative; }
.section-main__tab .js-tab-type1-con .bx-preinit-pager { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; }
.section-main__tab .js-tab-type1-con .bx-preinit-pager span { display: block; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: #d6d8db; }
.section-main__tab .js-tab-type1-con .bx-preinit-pager span.on { background: #77787a; }
.section__line-brn .bxslider-default { position: relative; }
.section__line-brn .bx-preinit-pager { position: absolute; top: 14px; right: 30px; z-index: 2; display: flex; }
.section__line-brn .bx-preinit-pager span { display: block; width: 10px; height: 10px; margin: 0 3px; border-radius: 50%; background: #fafafa; opacity: 0.6; }
.section__line-brn .bx-preinit-pager span.on { opacity: 1; }
/* 준비되면(ul 이 .bx-wrapper 로 감싸이면) 자리표시를 숨긴다 — 위 영역별 display 규칙보다 구체적이어야 하므로 영역을 붙여 맨 뒤에 둔다 */
.section-main__tab .js-tab-type1-con .bxslider-default > .bx-wrapper ~ .bx-preinit-pager,
.section__line-brn .bxslider-default > .bx-wrapper ~ .bx-preinit-pager { display: none; }
/* 시스템 소개 탭: 지연 로딩 빈 자리 이미지(1x1)가 1120 정사각형으로 잡혔다가 실제 이미지(1120x660)로 줄며 아래 영역 전체가
   460 당겨졌다. 탭 이미지 5장 모두 1120x660 고정 디자인 이미지라 항상 그 비율로 잡는다 — 빈 자리일 때만 잡으면 실제 이미지로
   바뀌는 순간(그림을 다 풀기 전 한 프레임) 직전 1x1 비율로 돌아가 정사각형이 한 번 더 깜빡인다. 탭 이미지를 바꾸면 비율도 맞춘다. */
.section--system .container--wide > .js-tab-type1-con .in > img { aspect-ratio: 1120 / 660; }
/* 해커스TV 썸네일: 지연 로딩 전 자리표시(정사각 blank.png) 동안만 실제 썸네일(290x163) 비율로 자리를 잡는다.
   썸네일은 어드민 데이터라 실제 이미지가 들어오면 규칙이 빠지고 원본 비율을 그대로 따른다. */
.section--tv__sd-box .hackersTV_sli_col01 img.lazy[src$="/blank.png"] { aspect-ratio: 290 / 163; }
/* 지연 로딩(jquery.lazyload, effect fadeIn)은 실제 이미지로 바꿀 때 hide() 후 fadeIn() 하는데, 이 사이트의 jQuery 1.11 은
   페이드가 도는 동안(약 0.4초) 내내 display:none 을 유지하다가 끝에 표시한다. 그동안 이미지 자리가 사라져 아래 영역 전체가
   올라갔다 내려왔다. 페이드 중(style 에 display:none 과 opacity 가 함께 있을 때)에만 자리는 남기고 지금처럼 보이지는 않게 한다.
   페이드 시작 전(hide 직후, opacity 없음)에는 걸리지 않으므로 jQuery 의 숨김 판정·페이드 동작은 그대로다. #main = 메인 전용. */
#main img.lazy[style*="display: none"][style*="opacity"] { display: inline !important; visibility: hidden; }
/* 빈 자리 이미지(1x1)로 시작해 실제 크기로 커지며 아래를 밀던 화면 흐름 안의 고정 디자인 이미지 — 처음부터 실제 크기로 잡는다
   (빈 자리일 때만 잡으면 실제 이미지로 바뀌는 순간 한 프레임 1x1 로 돌아가 다시 출렁인다). 템플릿에 주소가 고정된 이미지라
   크기도 고정이다. 이미지를 바꾸면 이 크기도 함께 바꾼다(서비스 3·푸터 8, 총 11개). */
#main .section--service img.lazy[data-original$="/con09.jpg"] { width: 900px; height: 276px; }
#main .section--service img.lazy[data-original$="/con09_2.png"],
#main .section--service img.lazy[data-original$="/con09_3.png"] { width: 130px; height: 133px; }
#main img.lazy[data-original*="/footer_logo_2025.jpg"] { width: 2560px; height: 220px; }
#main img.lazy[data-original$="/footer_logo.png"] { width: 181px; height: 32px; }
#main img.lazy[data-original*="/footer_icon0"] { width: 32px; height: 32px; }
#main img.lazy[data-original$="/footer_img.jpg"] { width: 326px; height: 430px; }
.section-main__bnr .bx-controls { display: none; } 
.section-main__bnr #main-counter { position: absolute; display: flex; align-items: center; background: rgba(255, 255, 255, 0.8); border-radius: 30px; padding: 5px 10px; bottom: 60px; left: 480px; font-size: 16px; } 
.section-main__bnr #main-counter .current { color:#222; } 
.section-main__bnr #main-counter .controls a { font-size: 0; width: 6px; height: 12px; background: url('https://cdn.hackersut.com/www/images/main/2025/main_renew/main_bnr_arrow.png') 0 center / 30% no-repeat; margin: 0 10px; display: block; padding: 10px; } 
.section-main__bnr #main-counter .next a { transform: scale(-1); } 

.section-main__bnr-btn { position: absolute; top: 263px; left: 460px; width: 290px; height: 79px; z-index: 2; } 

.section-main__tab { width: 525px; position: absolute; top: 60px; left: 1280px; z-index: 2; }
.section-main__tab .js-tab-type1 { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px; } 
.section-main__tab .js-tab-type1 li.on a { color: #d50057; } 
.section-main__tab .js-tab-type1 li a { display: flex; align-items: center; font-size: 15px; color: #555; } 
.section-main__tab .js-tab-type1 li:not(:last-of-type) a::after { background: #dcdcdc; width: 1px; height: 11px; content: ''; display: block; margin: 0 10px; } 
.main-tab__bannerarea { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; } 
.section-main__tab .js-tab-type1-con .bnr { width: calc(100%/2 - 5px); margin-bottom: 10px; border-radius: 20px; overflow: hidden; position: relative; } 
.section-main__tab .js-tab-type1-con .bx-wrapper .bx-pager { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; } 
.section-main__tab .js-tab-type1-con .bx-wrapper .bx-pager.bx-default-pager a { border-radius: 50%; background: #d6d8db; width: 8px; height: 8px; } 
.section-main__tab .js-tab-type1-con .bx-wrapper .bx-pager.bx-default-pager a.active { background: #77787a; } 
.section-main__tab .bnr_more { display: block; } 

.section-main__tab .js-tab-type1-con .bx-wrapper li { position: relative; } 
.section-main__tab .js-tab-type1-con .bx-wrapper .bxslider > li { border-radius: 20px; overflow: hidden; box-sizing: border-box; border: 1px solid #e2e8ef; display: block; } 
.section-main__tab .js-tab-type1-con .bx-wrapper .bxslider > li> a img { width: 100%; } 
.section-main__tab .js-tab-type1-con .bx-wrapper li .hoverItem { position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(60, 65, 70, 0.9); color: #fff; z-index: 3; display: none; }
.bannerItem { width: 254px; height: 283px; display: block; border-radius: 20px; box-sizing: border-box; padding: 25px; text-align: left; }
.bannerItem .col01 { font-size: 16px; display: flex; color: #222222; align-items: center; font-weight: 500; }
.bannerItem .col01 .col01__tag-item { font-size: 12px; background: #222222; color: #fff; margin-right: 10px; border-radius: 20px; padding: 5px 10px; }
.bannerItem .col02 { margin-top: 10px; font-size: 18px; color: #222; font-weight: 500; }
.bannerItem .col03 { margin-top: 5px; font-size: 23px; font-weight: bold; color: #222; line-height: 1.2;}
.bannerItem .col04 { color: #97999b; font-size: 11px; margin-top: 15px; }

.hoverItem__inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } 
.section-main__tab .hoverItem ul { width: 85%; margin: 20px auto; } 
.section-main__tab .hoverItem li:not(:last-of-type) { border-bottom: 1px solid #676768; } 
.section-main__tab .hoverItem li { position: relative; } 
.section-main__tab .hoverItem li::after { position: absolute; top:50%; transform: translateY(-50%); right: 0; background: url('https://cdn.hackersut.com/www/images/main/2025/main_renew/hoverItem_icon.png')0 0 no-repeat; content: ''; width: 8px; height: 12px; } 
.section-main__tab .hoverItem li a { display: grid; grid-template-columns: 1fr 3fr; color: #fff; padding: 10px 0; align-items: center; font-size: 16px; } 
.section-main__tab .hoverItem li a span { background: #fff; color: #111; border-radius: 20px; padding: 5px; } 
.section-main__tab .hoverItem li a p { text-align: left; margin-left: 10px; } 
.hoverItem__showBtn { background: #f9f9f9; width: 90%; margin: 0 auto 10px; padding: 10px 0; position: relative; border-radius: 10px; font-weight: 600; display: block; font-size: 16px; color: #222;} 
.section-main .rightBan-wrap { position: absolute; right: 620px; top: 100px; z-index: 3; }
.section-main .rightBan-wrap .right_con1 > li { margin-bottom: 6px; } 
.section-main .rightBan-wrap .right_con2 { width:100%; padding:0 10px; border:1px solid #ccc; box-sizing:border-box; border-radius:8px; background-color:#fff; margin:25px 0; } 
.section-main .rightBan-wrap .right_con2 li { border-bottom:1px solid #eee; } 
.section-main .rightBan-wrap .right_con2 li:last-child { border-bottom:none; } 
.section-main .rightBan-wrap .right_con2 a { display:block; width:100%; padding:10px 0; color:#555; font-size: 13px; } 
.section-main .rightBan-wrap .right_con2 a img { width:100%; } 


.section__line-brn .sd-box { position: relative; box-shadow: 0px 22px 24px 0px rgba(0, 0, 0, 0.16); } 

.section__line-brn .bx-wrapper li { position: relative; border-radius: 10px; overflow: hidden;} 
.section__line-brn .bx-wrapper .bx-pager { position: absolute; top: 14px; right: 30px; z-index: 2; display: flex; } 
.section__line-brn .bx-wrapper .bx-pager.bx-default-pager a { border-radius: 50%; background: #fafafa; z-index: 2; opacity: 0.6; } 
.section__line-brn .bx-wrapper .bx-pager.bx-default-pager a.active { background: #fafafa; opacity: 1; } 

.section--system { margin-top: 130px; } 
.section--system .container--wide > .js-tab-type1 { width: 1050px; margin: 0 auto; display: flex; align-items: center; } 
.section--system .container--wide > .js-tab-type1 li:nth-of-type(1) { font-weight: bolder; color: #111; background: unset; margin-right: 25px; font-size: 40px; letter-spacing: -1px } 
.section--system .container--wide > .js-tab-type1 li { background: #f6f6f6; border-radius: 20px; margin:0 5px 20px 0px; } 
.section--system .container--wide > .js-tab-type1 li a { padding: 8px 20px; display: block; color: #777; font-size: 16px; } 
.section--system .container--wide > .js-tab-type1 li.on { border: 1px solid transparent; background-image: linear-gradient(#fff, #fff), 
linear-gradient(90deg,rgba(252, 82, 175, 1) 0%, rgba(213, 84, 202, 1) 50%, rgba(165, 100, 242, 1) 100%); background-origin: border-box; background-clip: content-box, border-box; } 
.section--system .container--wide > .js-tab-type1 li.on a { color: #222; } 
.section--system .container--wide > .js-tab-type1-con { background: #fff url('https://cdn.hackersut.com/www/images/main/2025/main_renew/re_250429/con03_inner_new.jpg')center center no-repeat; } 
.section--system .container--wide > .js-tab-type1-con .in { width: 1120px; margin: 0 auto; position: relative; } 
.section--system .container--wide > .js-tab-type1-con .in > img { width: 100%; border-radius: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 20px 20px rgba(0, 0, 0, 0.12); } 
.section--system .container--wide > .js-tab-type1-con img { width: 100%; } 

#section--system_tab4 .js-tab-type1 { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; left: 25px; } 
#section--system_tab4 .js-tab-type1 a { color: #666666; margin-bottom: 25px; display: flex; align-items: center; font-size: 15px; font-size: 16px; } 
#section--system_tab4 .js-tab-type1 a::before { content: ''; background: #c8cacb; width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 5px; } 
#section--system_tab4 .js-tab-type1 li.on a { color: #000000; } 
#section--system_tab4 .js-tab-type1 li.on a::before { background: #000000; } 

#section--system_tab5 .sd-box { position: absolute; top: 230px; right: 40px; } 
#section--system_tab5 .sd-box .bx-pager { display: flex; align-items: center; justify-content: center; } 
#section--system_tab5 .sd-box .bx-pager a { background: #cccccc; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; } 
#section--system_tab5 .sd-box .bx-pager .bx-pager-item:last-of-type a { margin-right: 0; } 
#section--system_tab5 .sd-box .bx-pager a.active { background: #000000; } 

.section--ticker { overflow: hidden; } 
.section--ticker { margin-top: 140px; } 
.section--ticker h3 { font-size: 26px; font-weight: bold; color: #222; text-align: left; } 
.section--ticker .sd-box { margin-top: 30px; overflow: hidden; } 
.section--ticker .sd-box ul li { height: 210px; } 
.section--ticker .sd-box .bx-wrapper { max-width: 100% !important; } 
.section--ticker .sd-box .bx-wrapper li { position: relative; } 
.section--ticker .sd-box .bx-wrapper li .hover__event { position: absolute; top:0; left:0; width: 100%; height: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2; display: none; } 
.section--ticker .sd-box .bx-wrapper li .hover__event::before { content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(197, 91, 141, 1) 0%, rgba(192, 108, 181, 1) 50%, rgba(162, 108, 195, 1) 100%); opacity: 0.7; z-index: -1; } 
.section--ticker .sd-box .bx-wrapper li .hover__event p { font-size: 32px; color: #fff; text-align: left; position: absolute; top: 30px; left: 30px; letter-spacing: -1.5px; } 

/*��������-��������*/
.section--notice { padding:90px 0 130px; } 
.section--notice__wrap { display: flex; width: 100%; justify-content: space-between; } 
.section--notice__wrap >div { width: 47%; } 
.section--notice > .main_inner > div { width:500px; float:left; } 
.section--notice > .main_inner > div:nth-child(1) { margin-right:50px; } 
.section--notice .notice_title { width:100%; position:relative; } 
.section--notice .notice_title a { position:absolute; right:0; top:5px; } 
.section--notice .notice_title h3 { font-size:26px; color:#222; padding-bottom:10px; text-align: left; border-bottom: 1px solid #666666; } 
.section--notice .notice_from > li { padding:15px 0; border-bottom:1px solid #eeeeee; overflow:hidden; text-align: left; } 
.section--notice .notice_from .form_desc > li { float:left; line-height:26px; } 
.section--notice .notice_from .form_desc > li:nth-child(1) span { display:block; width:51px; height:26px; text-align:center; border:1px solid #45474d; line-height:26px; border-radius:15px; margin-right:15px; font-weight:bold; } 
.section--notice .notice_from .form_desc > li:nth-child(1) span.noti_color { background: #ffeff6; color: #222; border: none; font-size: 13px; } 
.section--notice .notice_from .form_desc > li:nth-child(2) a { display:block; width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; color:#000; float:left; } 
.section--notice .notice_from .form_desc > li:nth-child(2) > img { float:left; margin-left:3px; vertical-align:bottom; } 
.section--notice .notice_from .form_desc > li:nth-child(3) { float:right; text-align:right; font-size:15px; color: #888; } 
/*��������-��������*/

/* ��Ÿ������ ���ξ� */
.section--teachers { background: #eff1f2; padding-top: 65px; overflow: hidden; } 
.section--teachers .js-tab-type1 { width: 1050px; margin: 0 auto 30px; display: flex; align-items: center; } 
.section--teachers .js-tab-type1 li:nth-of-type(1) { font-weight: bolder; color: #111; background: unset; margin-right: 25px; font-size: 40px; letter-spacing: -1px; } 
.section--teachers .js-tab-type1 li { background: #e7e9ea; border-radius: 20px; margin:0 5px 20px 0px; } 
.section--teachers .js-tab-type1 li a { padding: 8px 20px; display: block; color: #222; font-size: 16px; } 
.section--teachers .js-tab-type1 li.on { border: 1px solid transparent; background-image: linear-gradient(#eff1f2, #eff1f2), 
linear-gradient(90deg,rgba(252, 82, 175, 1) 0%, rgba(213, 84, 202, 1) 50%, rgba(165, 100, 242, 1) 100%); background-origin: border-box; background-clip: content-box, border-box; } 
.section--teachers .js-tab-type1-con .in { width: 1120px; margin: 0 auto; overflow: hidden; } 
.section--teachers .js-tab-type1-con .bx-wrapper { margin:0 auto; }
.section--teachers .js-tab-type1-con .bx-viewport { height: 391px !important; }
.section--teachers .js-tab-type1-con .bxslider { display: flex; flex-wrap: nowrap; overflow: hidden; height: 391px; }
.section--teachers .js-tab-type1-con li {width: 255px !important; flex-shrink: 0; transition: all 1s ease-in-out; height: 391px; }
.section--teachers .js-tab-type1-con li:hover .hover__effect { scale: 1.1; transform: translateY(10px); }
.section--teachers .js-tab-type1-con img { width: 100%; }
.section--teachers .js-tab-type1-con li img.hover__effect { height: 391px; object-fit: contain; object-position: top; }
.section--teachers .js-tab-type1-con li .pos_r img.slider-lazy-image { height: 100px; object-fit: contain; }
.section--teachers .js-tab-type1-con li .pos_r { min-height: 100px; }
.star-teacher__sd-box { position: relative; } 

.star-teacher__slide { height: 380px; } 
.star-teacher__slide .col01 { width: 300px; } 
.star-teacher__slide .teacher__slide--badge { position: relative; } 
.star-teacher__slide .title { position: absolute; background: linear-gradient(90deg, rgba(177, 47, 231, 1) 0%, rgba(209, 25, 171, 1) 50%, rgba(247, 0, 102, 1) 97%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 16px; font-weight: bold; top: 26px; left: 5px; width: 67px; } 
.star-teacher__slide .name { position: absolute; text-align: left; top: 20px; left: 90px; color: #444444; font-size: 16px; } 
.star-teacher__slide .name b { font-size: 26px; font-weight: bold; color: #222222; } 
.star-teacher__slide .col02 { display: flex; width: 60%; } 
.star-teacher__slide .col02 >div { width: calc(100%/4); } 
.star-teacher__slide .col03 { text-align: left; margin-top: 150px; } 
.star-teacher__slide .img-area { position: absolute; right: 100px; bottom: 0; } 
.star-teacher__slide .img-area:hover .hover__effect { scale: 1.1; transform: translateY(10px); } 
.section--teachers .js-tab-type1-con .bx-controls-direction a { font-size: 0; width: 50px; height: 50px; background: url('https://cdn.hackersut.com/www/images/main/2025/main_renew/con06_control.png') 0 0 /contain no-repeat; display: block; position: absolute; top: 50%; transform: translateY(-50%); } 
.section--teachers .js-tab-type1-con .bx-controls-direction a.bx-prev { left: -80px; } 
.section--teachers .js-tab-type1-con .bx-controls-direction a.bx-next { transform: scale(-1); right: -80px; top:42%; } 
.section--teachers .js-tab-type1-con li .sys_f { position: absolute; } 
.section--teachers .js-tab-type1-con li .sys_f.title { background: linear-gradient(90deg, rgba(177, 47, 231, 1) 0%, rgba(209, 25, 171, 1) 50%, rgba(247, 0, 102, 1) 97%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 16px; font-weight: bold; top: 20px; left: 0px; width: 67px; } 
.section--teachers .js-tab-type1-con li .sys_f.name { font-size: 26px; font-weight: bold; color: #222222; top: 16px; left: 80px; } 
.section--teachers .js-tab-type1-con li .sys_f.desc { color: #444444; font-size: 16px; top: 57px; left: 80px; text-align: left; } 
.section--teachers .js-tab-type1-con li .sys_f.descs_title { color: #444444; font-size: 14px; top: 0px; left: 30%; text-align: left; } 

.section--tv { margin-top: 130px; position: relative; background: #fff; overflow: hidden; } 

.section--tv .bg-effect { background: #fff url('https://cdn.hackersut.com/www/images/main/2025/main_renew/con07_bg.png') no-repeat 0 0/contain; animation: deco-particle 3s ease-in-out alternate infinite 5s; position: absolute; top: -230px; left: 32%; width: 1050px; height: 500px; } 

@-webkit-keyframes deco-particle { 
 from { -webkit-transform: translateY(45%); transform: translateY(45%); } 
to { -webkit-transform: translateY(55%); transform: translateY(55%); } 
 }

@keyframes deco-particle { 
 from { -webkit-transform: translateY(45%); transform: translateY(45%); } 
to { -webkit-transform: translateY(55%); transform: translateY(55%); } 
 }


.hackersTV__title { text-align: left; color: #111; } 
.hackersTV__title .col01 { display: grid; grid-template-columns: 3fr 1fr; align-items:end; margin-bottom: 10px; } 
.hackersTV__title .col01 h3 { font-size: 40px; font-weight: bold; letter-spacing: -1.5px; color: #222; } 
.hackersTV__title .col01 a { text-align: right; font-weight: 500; font-size: 14px; color: #222; } 
.hackersTV__title .col02 { font-size: 18px; letter-spacing: -1.5px; color: #222; }
.hackersTV__title .col02 .hackersTV__title--source { font-size: 12px; letter-spacing: -0.5px; color: #888; margin-top: 6px; } 
.section--tv__sd-box { margin-top: 20px; position: relative; min-height: 518px; z-index: 2; } 
.section--tv__sd-box { text-align: left; color: #111; } 

.section--tv__sd-box .slider-container { overflow: hidden; position: relative; width: 100%; } 
.section--tv__sd-box .slider-container ul { display: flex; transition: transform 0.5s ease; padding: 0; margin: 0; justify-content: space-around; gap:20px; transition: 1s all ease; padding: 0 10px; } 
.section--tv__sd-box .slider-container li { width: calc((100% - 20px * 2) / 3); margin-top: 20px; list-style: none; box-sizing: border-box; border-radius: 20px; padding-bottom: 50px; padding: 20px 0 70px; flex:none; transition: all ease-out 1s; } 

.section--tv__sd-box .hackersTV_sli_col01 { text-align: center; padding: 0 20px; } 
.section--tv__sd-box .hackersTV_sli_col01 img { width: 100%; } 
.section--tv__sd-box .hackersTV_sli_col02 { font-size: 22px; font-weight: bold; margin-top: 30px; color: #222; padding: 0 20px; letter-spacing: -1.5px; } 

.section--tv__sd-box .hackersTV_sli_col03 { margin-top: 14px; color: #555; padding: 0 20px; font-size: 15px; letter-spacing: -1.5px; } 
.section--tv__sd-box .hackersTV_sli_col04 { margin-top: 20px; padding: 0 20px; } 
.section--tv__sd-box .hackersTV_sli_col04 span { background: #f4f6f7; color: #678ed7; padding: 5px 10px; border-radius: 10px; display: inline-block; } 

.section--tv__sd-box li.hover__event { position: relative; } 
.section--tv .pseudo-element { background: #fff url('https://cdn.hackersut.com/www/images/main/2025/main_renew/re_250508/con07_hover.png') 0 0 / contain no-repeat; height: 520px; opacity: 1; position: absolute; width: 340px; top: 70px; right: 10px; filter: drop-shadow(0 0px 21px rgba(109, 148, 165, 0.34)); border-radius: 20px; } 


.section--tv__sd-box li.hover__event .hackersTV_sli_col02 p:nth-of-type(1) { position: relative; display: inline-block; } 
.section--tv__sd-box li.hover__event .hackersTV_sli_col02 p:nth-of-type(1)::after { position: absolute; top: 0; right: -17px; background: url('https://cdn.hackersut.com/www/images/main/2025/main_renew/hackertv_new.png')0 0 no-repeat; width: 15px; height: 15px; content: ''; } 

.section--tv__sd-box .slide-control { font-size: 0; width: 50px; height: 50px; background: url('https://cdn.hackersut.com/www/images/main/2025/main_renew/con06_control.png') 0 0 /contain no-repeat; display: block; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } 
.section--tv__sd-box .slide-control.slide-prev { left: -80px; } 
.section--tv__sd-box .slide-control.slide-next { transform: scale(-1); right: -80px; top:42%; } 

.section--interview__title { text-align: left; color: #111; display: flex; align-items:end; margin-bottom: 30px; justify-content: space-between; } 
.section--interview__title >div { display: flex; align-items: end; } 
.section--interview__title >div h3 { font-size: 40px; font-weight: bold; letter-spacing: -1.5px; color: #222; } 
.section--interview__title >div p { color: #888; margin-bottom: 5px; margin-left: 10px; font-size: 12px; }
.section--interview__title> a { font-weight: 500; font-size: 14px; color: #222; margin-bottom: 5px; } 
.section--interview-wrap { display: flex; justify-content: space-between; align-items: center; } 
.section--interview-box { position: relative; width: calc(100%/3 - 10px); } 
.section--interview-box img { width: 100%; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.12)); } 
.section--interview-box .pub_vid_box { position: absolute; top: 167px; left: 49%; width: 306px; height: 169px; transform: translateX(-50%); border-radius: 5px; overflow: hidden; cursor: pointer; } 

.section--service { margin: 100px auto 130px; } 
.section--service__wrap { display: flex; justify-content: space-between; } 
.section--service__right a { display: block; } 
.section--service__right a img { border-radius: 20px 20px 0 20px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.08),0 10px 20px rgba(0, 0, 0, 0.10); } 
.section--service__right a:nth-of-type(1) { margin-bottom: 10px; } 

map { cursor: pointer; } 

.js-tab-type1-con { display: none; } 
.js-tab-type1-con.on { display: block; }