@charset "utf-8";

.over_hidden {overflow-x:hidden}
.main #header {background:transparent;transition: transform .3s, background .3s; opacity: 1;}
.main #header.on {opacity: 1; transition: transform .3s, background .3s, opacity .3s;}
.main #header.init_bg {background:transparent;backdrop-filter:none}
.main #header .inner {background:transparent;transition:height .3s ease, background .3s ease;}
.main #header .inner.open {background:transparent}
.main #header .inner .logo a{display:block;width:188px;height:80px;background:url("/2025/img/common/logo_wh.png") no-repeat 0 center;background-size:188px auto;color:transparent;font-size:1px;}
.main #header .inner .gnbPlace a, .main #header .inner .gnb ul .gnb_li .depth1{color: #fff;}

.main #header .inner .gnbPlace > a i {display: inline-block; position: relative; width: 12px; height: 12px; margin-left: 10px; border: 1px solid #fff; transition: all 0.3s; vertical-align: top;}
.main #header .inner .gnbPlace > a i:after{content:''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('/2025/img/icon/icon-select-arrow-wh.png'); background-repeat: no-repeat; background-position: center; transition: all 0.3s; background-size:8px}
.main #header.down .inner .gnbPlace > a i {display: inline-block; position: relative; width: 12px; height: 12px; margin-left: 10px; border: 1px solid #282828; transition: all 0.3s; vertical-align: top;}
.main #header.down .inner .gnbPlace > a i:after{content:''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('/2025/img/icon/icon-select-arrow-bk.png'); background-repeat: no-repeat; background-position: center; transition: all 0.3s; background-size:8px}
.main #header .inner.open .gnbPlace > a {color:#282828}
.main #header .inner.open .gnbPlace > a i {display: inline-block; position: relative; width: 12px; height: 12px; margin-left: 10px; border: 1px solid #282828; transition: all 0.3s; vertical-align: top;}
.main #header .inner.open .gnbPlace > a i:after{content:''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('/2025/img/icon/icon-select-arrow-bk.png'); background-repeat: no-repeat; background-position: center; transition: all 0.3s; background-size:8px}

.main #header .inner .head_util .link_wrap .btn_selct{color: #fff;}
.main #header .inner .head_util .link_wrap .btn_selct:after{background: url(../images/common/link_arr_wh.svg) no-repeat 0 0;}
.main .btn_menu.mopen {background: url("/2025/img/icon/menu_ico_cbk.svg") no-repeat center center;}
.main .btn_menu {display:inline-block;width:40px;height:40px;color:transparent;font-size:1px;vertical-align:middle;z-index:51;background:url("/2025/img/icon/menu_ico_wh.svg") no-repeat center center;background-size:40px 40px;color:transparent}
.gnb_open  .main .btn_menu {background: url("/2025/img/icon/menu_ico_bk.svg") no-repeat center center }
.main .btn_menu .line{background-color: #fff;}
.main #header .inner .gnb ul .gnb_li .smenu{transition: all  .3s; opacity: 0;}
.main #header .inner .gnb ul .gnb_li .smenu.active{transition: all .3s;}
.main .breadcrumb {position:relative;color:#f3f6fb; z-index:7}
.main .breadcrumb li:last-child {color:#fff}
.main .breadcrumb li:after {background:url(../images/common/breadcrumb_arr_wh.svg);background-size:8px 8px;width:8px;height:8px;}

.main #header.down {background: rgba(255, 255, 255, .8);backdrop-filter: blur(12px);}
.main #header.down .logo a,
.gnb_open .main #header .inner .logo a {display:block;width:188px;height:80px;background:url("/2025/img/common/logo_bk.png") no-repeat 0 center;background-size:188px auto;color:transparent;font-size:1px;}
.gnb_open .main #header {background:#fff}
.main #header.down .inner .head_util .link_wrap .btn_selct,
.gnb_open .main #header .inner .head_util .link_wrap .btn_selct{color: #121418;}
 .main #header.down .inner .gnbPlace a, .main #header.down .inner .gnb ul .gnb_li .depth1,
.gnb_open .main #header .inner .gnb ul .gnb_li .depth1  {color:#24272d;}
.gnb_open .main #header .inner .gnb ul li .depth1:hover {text-decoration:none;color:#08cee8} 
.main #header.down .inner .head_util .link_wrap .btn_selct:after,
.gnb_open .main #header .inner .head_util .link_wrap .btn_selct:after {background:url(../images/common/link_arr.svg) no-repeat 0 0;}
.main #header.down  .btn_menu .line,
.gnb_open .main .btn_menu .line {background-color:#121418;}
body.mopen .main #header {transition:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:#fafafa} 
body.mopen #header.down .btn_menu .line,
body.mopen .main .btn_menu .line{background-color:#fff;}
body.mopen .main #header .inner.open,
body.mopen.gnb_open  .main #header .inner.open {background:#fafafa}
body.mopen.gnb_open  #header .inner .logo a {display:block;width:188px;height:80px;background:url("/2025/img/common/logo_bk.png") no-repeat 0 center;background-size:188px auto;color:transparent;font-size:1px;}
.main #header.down .btn_menu {display:inline-block;width:40px;height:40px;color:transparent;font-size:1px;vertical-align:middle;z-index:51;background:url("/2025/img/icon/menu_ico_bk.svg") no-repeat center center;background-size:40px 40px;color:transparent}
body.gnb_open .main .btn_menu.mopen {background: url("/2025/img/icon/menu_ico_cbk.svg") no-repeat center center;}
.mopen .main #header.down .btn_menu {background: url("/2025/img/icon/menu_ico_cbk.svg") no-repeat center center;}
.main #header .inner .top_call {background: url('/2025/img/main/quick-top-call_01.png') center center / 100% 100% no-repeat;}

.head_util .member {display:flex;gap:15px;margin-right: 30px;}
.head_util .member a {color: #fff;font-size:13px;font-weight: 700;}
.main #header.down .member a {color: #24272d;}
.gnb_open .main .member a {color: #24272d;}
body.mopen .member a {color: #24272d;}
body.mopen .main #header .inner .gnbPlace a  {color:#24272d;}
body.mopen .main #header .inner .gnbPlace > a i { border: 1px solid #282828;}
body.mopen .main #header .inner .gnbPlace > a i:after {content:''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('/2025/img/icon/icon-select-arrow-bk.png'); background-repeat: no-repeat; background-position: center; transition: all 0.3s; background-size:12px}


/* quick-call */
.main #header .gnb-call {display:flex !important; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px; margin-right:20px; align-self:center; height:auto;}
.main #header .gnb-call .quickTit {display:block; font-size:clamp(6px, 0.8vw, 12px); font-weight:500; color:#08CEE8; font-family:'NEXON Lv2 Gothic', sans-serif; text-align:right; white-space:nowrap; line-height:1;}
.main #header .gnb-call h2 {font-size:clamp(13px, 1.15vw, 22px); font-weight:800; color:#fff !important; font-family:'Manrope', sans-serif; line-height:20px; text-align:right; white-space:nowrap; margin:0; padding:0;}
.main #header.down .gnb-call .quickTit,
.gnb_open .main #header .gnb-call .quickTit,
body.mopen .gnb-call .quickTit {color:#08CEE8;}
.main #header.down .gnb-call h2,
.gnb_open .main #header .gnb-call h2,
body.mopen .gnb-call h2 {color:#121418 !important;}


.index-wr{width:100%; background:#1d1f22;}
#mainHero {position: relative; z-index: 9; height: 640px;}
#mainHero .swiper-slide{overflow:hidden;}
#mainHero:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 100px; background: linear-gradient(0deg, rgb(29, 31, 34, 1) 15%, transparent);pointer-events : none; }
.main-slide {height: 100%; background: #04050a;}
.main-slide img {display: block; width: 100%;}
.main-slide .pc-show {max-width: 1920px; height: 100%; margin: 0 auto;}
.banner-txt {width: 100%; height: 100%; background-position: 50% center; background-repeat: no-repeat; font-family: 'Manrope'; font-weight: 300; font-size: 25px; color: #fff; cursor:pointer; background-size:cover !important;}
.banner-txt .container {display: flex; flex-direction: column; align-items: start; justify-content: center; width: 100%; height: 100%;}
.banner-txt h3 {margin-bottom: 10px; font-family: 'Manrope'; font-size: 60px; color: #fff; line-height: 1.2;}
.banner-more {position: relative; min-width: 230px; margin-top: 53px; margin-bottom: 25px; padding: 18px 40px; border-radius: 30px; background: #fff; font-size: 14px; color: #222; box-sizing: border-box; transition: all 0.2s;}
.banner-more:after {content:''; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 27px; height: 16px; background-image: url('/img/main/main_banner_arrow.png'); background-repeat: no-repeat; background-position: center; transition: all 0.2s;}
.banner-more:hover {background-color: rgba(255,255,255,0.7);}
.banner-more:hover:after {right: 30px;}

.main-slide .my_video_auto_0-dimensions.vjs-fluid:not(.vjs-audio-only-mode){ height:100%;}
.main-slide .swiper-slide .view {position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat 50% 50%; background-size:cover; OVERFLOW:HIDDEN; cursor: pointer;}
.main-slide .swiper-slide video {position:absolute; top:50%; left:50%; width:auto; min-width:100%; min-height:100%; transform: translateX(-50%) translateY(-51%);}
.main-slide .swiper-slide video[poster] {width:100%;}
.main-slide .swiper-slide video.w-100 {width:100%;}

.main-slide-controller {position: absolute; bottom: 90px; left: 0; right: 0; z-index: 10; max-width: 1920px; pointer-events:none;}
.main-slide-controller .container {display: flex; align-items: center; position: relative; padding: 0;}
.slide-timer {position: relative; width: 50px; height: 50px; margin-right: 30px; border-radius: 100%; background: rgba(0, 0, 0, 0.07); transition: left 0.5s;}
.btn-control {position: absolute; left: 0; top: 0; z-index: 1; width: 50px; height: 50px; border:0; text-indent: -9999px; transition: .4s ease; pointer-events: auto;}
.btn-control:after {content:''; position: absolute; top: 50%; left: 50%; width: 0; height: 16px; border-color: transparent transparent transparent #fff; border-style: double; border-width: 0 0 0 14px; transform: translate(-50%, -50%); transition: .17s linear;}
.btn-control.is-pause:after {height: 0; margin-left: 2px; border-style: solid; border-width: 9px 0 9px 14px;}
.slide-timer .progress {width: 50px; height: 50px; overflow: visible; transform: rotate(-90deg); transition: .4s ease;}
.slide-timer .progress .top {fill: transparent; stroke: #fff; stroke-width: 3; stroke-dashoffset: 201px; stroke-dasharray: 201px; stroke-linecap: round;}
.slide-timer .progress .bottom {fill: transparent; stroke: rgba(255, 255, 255, 0.5); stroke-width: 3; stroke-dasharray: 201px;}
.main-prev, .main-next {position: inherit; left: auto; right: auto; width: 50px; height: 50px; margin-top: 0; transition: left 0.5s; border: 2px solid #fff; border-radius: 100%;  pointer-events: auto;}
.main-prev {background: rgba(0, 0, 0, 0.07) url('/img/main/main_banner_prev.png') no-repeat center;}
.main-next {margin-left: 10px; background: rgba(0, 0, 0, 0.07) url('/img/main/main_banner_next.png') no-repeat center;}
.main-slide-controller .fraction {margin-left: 15px; width: auto; font-family: 'Manrope'; font-weight: 300; font-size: 20px; color: rgba(255, 255, 255, 0.7); text-shadow: 0px 0px 5px rgb(135 135 135 / 45%);}
.main-slide-controller .fraction > * {padding: 0 3px;}
.main-slide-controller .fraction .current-num {color: #fff;}
.main-port-slide-prev, .main-port-slide-next {margin-top:-27px !important;}

/* ���� ���޴� */
#mainQuick {padding: 40px 0 80px; overflow:unset; color:#fff;}
#mainQuick .container {display: flex; justify-content: center;}
/* [시트 ①] 배너 바로 밑 고정 퀵메뉴 — 조회 버튼 4개(왼쪽) + 지점/본원 대표번호(오른쪽).
   [HP-MO-261023-021 ①] 흰 박스 + 회색 버튼이 어두운 메인 배경에서 떠 보인다는 지적 →
   배경을 걷어내고 모바일과 같은 원형 아이콘으로 바꿔 배경에 그대로 얹는다(요청자 시안). */
/* PC 에서만 — 모바일 퀵메뉴(responsive.css @media max-width:1280)는 지금 모습 그대로 둔다 */
/* [HP-MO-261023-049] 배너~조회줄 상단 여백 절반, 메뉴4+대표번호를 한 묶음으로 중앙 정렬 */
@media (min-width:1281px) {
#mainQuick{display:block; padding:22px 0 40px;}
#mainQuick .container{display:flex; align-items:center; justify-content:center; gap:36px; padding:0; background:none; border-radius:0; box-shadow:none; width:auto; max-width:100%; margin:0 auto;}
#mainQuick .mQuick-list{gap:40px; justify-content:center; padding-left:0; flex:0 0 auto;}
#mainQuick .mQuick-list > li.pcQuick-4{flex:0 0 auto;}
#mainQuick .mQuick-list > li.pcQuick-4 > a{flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; width:auto; height:auto; padding:0; background:none; color:#fff; font-size:16px; font-weight:700; white-space:nowrap;}
#mainQuick .mQuick-list > li.pcQuick-4 > a:hover .pq-ico{transform:translateY(-4px);}
#mainQuick .pq-ico{display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:62px; height:62px; margin:0; padding:0; border-radius:50%; background:#08cee8; color:#121418; transition:transform .18s;}
#mainQuick .pq-ico svg{width:28px; height:28px; display:block;}
#mainQuick .pq-ico-kakao{background:#FEE500;}
#mainQuick .pq-txt{display:block; width:auto; margin:0; padding:0; background:none; line-height:1.2;}
/* 대표번호 — 메뉴와 세로 중심 맞춤, 앞 빈 공간 축소 */
#mainQuick .quick-call{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; margin:0; padding:0 0 0 28px; text-align:left; color:#fff;}
#mainQuick .quick-call:before{height:48px; margin-top:-24px;}
#mainQuick .pq-tel-label{display:block; font-size:15px; font-weight:400; color:#9aa0a8; font-family:'NEXON Lv2 Gothic'; letter-spacing:-0.02em; line-height:1.2;}
#mainQuick .pq-tel{display:block; margin-top:6px; font-size:36px; font-weight:800; color:#fff; font-family:'Manrope','NEXON Lv2 Gothic Bold'; line-height:1.1; letter-spacing:-0.01em;}
}

/* [HP-MO-261026-064] 는 아이콘 메뉴(#mainQuick)를 배너 하단 그라데이션 위로 끌어올려
   #game-fix-bar(하단 고정 QUICK MENU 바)와의 겹침을 피하려 했으나, 오히려 배너 자체를
   침범해 배너 클릭이 막히는 문제를 냈다(HP-MO-261027-002 ①). #mainQuick 을 원래 위치
   (배너 아래, 정상 문서 흐름)로 되돌린다. #game-fix-bar 는 같은 티켓 ②로 화면 오른쪽
   세로형으로 옮겨 애초에 #mainQuick 과 가로로 겹칠 일이 없어진다. */

.mQuick-list {display: flex; justify-content: space-evenly;}
.mQuick-list > li > a {display:flex; position: relative;  width: 100%; height: 100%;  font-weight: 300; font-size: 14px; text-align: center;  color:#fff;    flex-direction: column; padding:0 20px;font-family:'NEXON Lv2 Gothic Bold'; }
.mQuick-list > li > a > span {background-repeat: no-repeat; background-position: center top; background-size: auto 48px !important; width:100%; padding-top:48px; display:block; margin-bottom:10px;}
.mQuick-list > li.summer-quick > a{padding-top:58px;}
.mQuick-list > li.summer-quick > a > img{position:absolute; top: -21px; left:50%; margin:0 auto; width: 92px; margin-left: -45px;}


.bubble {display:block; position: absolute; z-index: 1; padding: 5px 12px 5px; border-radius: 20px; font-style: normal; font-weight: 800; font-size: 12px; color: #1d1f22; -webkit-animation: flash 2s infinite;}
.bubble:after {content:''; display: block; width: 0; height: 0; border-right: 13px solid transparent; position: absolute; z-index: -1;}
.bubble {right: -33px; top: -25px; background-color: #08cee8; text-align: center;}
.bubble:after {bottom: -6px; left: 12px; border-top: solid 8px #08cee8;}
.bubble.rightQuick {right: -8px; top: -17px; background-color: #08cee8; text-align: center;width:80px;padding: 2px 12px 2px;}
.bubble.rightQuick:after {bottom: -7px;left: unset; right:10px;border-top: solid 8px #092833;}

.quickBubble.bubble {right: -33px; top: -57px;font-weight: 800;font-family: 'NEXON Lv2 Gothic Bold';font-size: 13px;padding: 6px 16px; /*background-color: #282828;color: #ffffff; */}
.quickBubble.bubble:after {bottom: -6px; left: 12px; /* border-top: solid 8px #282828; */}
.quickBubble.bubble img {position: absolute;top: 0;right: 0;transform: translate(45%, -50%);}


.mQuick-list .bubble-vct {right: -15px; background: #0074e0;}
.mQuick-list .bubble-vct:after {border-top-color: #0074e0;}
.quick-call {display: flex; justify-content: center; flex-direction: column; position: relative; margin-left: 20px; padding-left: 40px; font-family: 'Manrope', 'NEXON Lv2 Gothic Bold'; font-weight: 300;}
.quick-call:before {content:''; position: absolute; top: 50%; left: 0; width: 1px; background: #efefef; opacity:0.2; height:40px; margin-top:-20px; display:block;}
.quick-call span {font-size: 12px;color:#08cee8;font-family:'NEXON Lv2 Gothic Bold'; font-weight:900}
.quick-call p {font-size: 14px;font-family:'NEXON Lv2 Gothic Bold'; }
.quick-call h2 {font-size: 40px;font-family: 'Manrope'; font-weight:900; line-height:1;}

.main-col{display:block; position:relative; color:#fff; width:100%; }
.main-col:after {display:block; content:""; position:absolute; width:900px; height:600px; z-index:1; top:0px; left:0px; margin-left:-900px; background:#1d1f22}
.main-col-tit {display:flex; padding-bottom:40px;align-items: center;}
.main-col-tit p {font-size:17px; opacity:0.5; display:block; margin-top:20px;}
.main-col-tit span{font-size:15px; color:#08cee8;font-weight:300;font-family: 'Codec-Cold'; display:block; margin-bottom:5px;}
/* [시트 ⑮] AI 크리에이터로 성장 — 포트폴리오와 '합격으로 책임지는 교육' 사이 섹션 */
.main-aicreator .main-col-tit{justify-content:space-between;}
.main-aicreator .mainAi-all{display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:600; color:#08cee8;}
.main-aicreator .mainAi-all i{font-style:normal; transition:translate .2s ease;}
.main-aicreator .mainAi-all:hover i{translate:3px 0;}
.mainAi-list{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.mainAi-item > a{display:flex; flex-direction:column; height:100%; padding-bottom:22px; border:1px solid #3f444a; border-radius:12px; background:#262a2f; overflow:hidden; color:#fff;}
.mainAi-thumb{display:block; aspect-ratio:305/220; overflow:hidden;}
.mainAi-thumb img{width:100%; height:100%; object-fit:cover; transition:scale .5s ease;}
.mainAi-item > a:hover .mainAi-thumb img{scale:1.05;}
.mainAi-name{display:block; margin:20px 22px 0; font-size:20px; font-weight:800; letter-spacing:-0.03em;}
.mainAi-desc{display:block; margin:10px 22px 0; font-size:15px; line-height:1.6; color:#9c9c9c;}
.mainAi-more{display:inline-flex; align-items:center; gap:6px; margin:16px 22px 0; font-size:14px; font-weight:600; color:#08cee8;}
.mainAi-more i{font-style:normal; transition:translate .2s ease;}
.mainAi-item > a:hover .mainAi-more i{translate:3px 0;}
@media (max-width:1280px){
	.mainAi-list{grid-template-columns:repeat(2, 1fr); gap:14px;}
	.mainAi-name{margin:16px 16px 0; font-size:17px;}
	.mainAi-desc{margin:8px 16px 0; font-size:13px;}
	.mainAi-more{margin:12px 16px 0;}
	.main-aicreator .mainAi-all{font-size:13px;}
}
@media (max-width:480px){
	.mainAi-list{grid-template-columns:1fr;}
}
.main-col-tit h3{font-size:32px;font-family:'NEXON Lv2 Gothic Bold';display:block; letter-spacing:-0.05em;}

.main-tab{position:relative; padding-left:20px;}
.main-tab ul {position:relative; display:flex; }
.main-tab ul  li a {color:#fff;word-break: auto-phrase;font-family:'NEXON Lv2 Gothic Bold'; padding-left:20px; font-size:16px; opacity:0.5}
.main-tab ul  li a.active{opacity:1}

.main-port-cont{ position:relative;}
.main-port-slide .swiper-slide a {color:#fff; border-radius:24px; overflow:hidden; display:block; width:100%; position:relative;}
.main-port-slide .swiper-slide a em {display:block; background-size:cover !important; background-position:50% !important; background-repeat:no-repeat !important; padding-bottom:140%; }
.main-port-slide .swiper-slide a .main-port-info{display:block; position:absolute; bottom:-150px; left:0px;z-index:2; padding:20px; transition: all 0.5s; width:100%;}
.main-port-slide .swiper-slide a:hover .main-port-info{bottom:0}
.main-port-slide .swiper-slide a .main-port-info:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 150px; background: linear-gradient(0deg, rgb(29, 31, 34, 1) 30%, transparent); opacity:0.7}

.main-port-slide.main-port-pr .swiper-slide a em, .main-port-slide.main-port-team .swiper-slide a em, .main-port-slide.main-port-plan .swiper-slide a em {padding-bottom:56.5%;}
.main-port-slide.main-port-emoji .swiper-slide a{background:#fff;}
.main-port-slide.main-port-emoji .swiper-slide a em {padding-bottom:100%;}

div.main-col + div.main-col{margin-top:120px;}

.main-lesson-slide{margin-top:-30px;}
.main-lesson-slide .swiper-slide a p {display:block; margin-bottom:10px;}
.main-lesson-slide .swiper-slide a p img{width:100%;transition: all 0.5s;}
.main-lesson-slide .swiper-slide a:hover p img{width:100%;margin-top:-20px;}
.main-lesson-slide .swiper-slide a .main-lesson-info span{font-size:16px; color:#08cee8; display:block; margin-bottom:5px;}
.main-lesson-slide .swiper-slide a .main-lesson-info h3{font-size:17px; width:60%; color:#fff;line-height:1.4; letter-spacing:-0}

.main-col .edu-step-prev, .main-col .edu-step-next{z-index:2;margin-top:-27px !important;}
.main-video-cont{display:block; background:#000; position:relative; overflow:hidden; height:42.5vw; margin:120px 0}
.main-video-bg {display: block; position: absolute; width: 100%; height: 100%;}
.main-video-bg video {height: 100%; left: 50%; -o-object-fit: cover;  object-fit: cover; position: absolute;  top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; opacity: 1;}
.main-video-bg:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 200px; background: linear-gradient(0deg, rgb(29, 31, 34, 1) 15%, transparent);}
.main-video-bg:before {content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 200px; background: linear-gradient(-180deg, rgb(29, 31, 34, 1) 15%, transparent);}

.main-hot-contents{text-align:center;}
.main-fa .main-col-tit, .main-hot-contents .main-col-tit {display:flex; padding-bottom:40px;align-items: center;    flex-direction: column;}
.main-hot-item{display:flex; flex-direction: column; gap:20px;}
.main-hot-item ul {display:flex; gap:20px;}
.main-hot-item ul li{/* height: 320px; */height: unset;display:block;  border-radius:24px; overflow:hidden;transition: all 0.5s;text-align: center;}
.main-hot-item ul.col2 li{width: calc(100% / 2 - 20px);}
.main-hot-item ul.col3 li{width: calc(100% / 3 - 20px);}
.main-hot-item ul li a {display:flex;; width:100%; position:relative; height:100%;z-index:1; align-items: center;}
.main-hot-item ul li:hover {margin-top:-27px !important;}
.main-hot-item ul li a em {display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background-size: cover !important; background-position:50% !important; background-repeat:no-repeat !important;z-index:-1;}
.main-hot-item ul li a h3{display:block; width:100%;}
.main-hot-item ul li a h3 img{margin:0 auto;}
.main-hot-item ul li.gamejam a h3 img{margin-left:-300px;}
.main-hot-item ul li .card-box {height: 320px;border-radius: 24px;overflow: hidden;margin-bottom: 12px;}
.main-hot-item ul li .card-box a {display: flex;width: 100%;height: 100%;position: relative;z-index: 1;align-items: center;}
.main-hot-item span{font-size: 15px;color: #08cee8;    font-weight: 700;}
.main-hot-item p{font-size: 15px;    letter-spacing: 1px; color:#ffffff; text-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 0 0 8px rgba(255, 255, 255, 0.3), 0 0 23px rgba(255, 255, 255, 0.3);}

.main-fa{display:block; width:100%; text-align:center;}
.main-fa-item{width:1200px; margin:0 auto;}
.main-fa-video video{ border-radius:12px; overflow:hidden; width:100%;}

.main-programming-port ul{display:flex; gap:20px;}
.main-programming-port ul li {width: calc(100% / 2 - 20px);}
.main-programming-port ul li a {display:block; width:100%; padding:130px 40px; background:#fff; border-radius:24px; overflow:hidden; position:relative; z-index:1;transition: all 0.5s;}
.main-programming-port ul li a:hover {margin-top:-20px;}
.main-programming-port ul li a .main-pr-tit{display:flex;flex-direction: column; font-size:30px;font-family:'NEXON Lv2 Gothic Bold'; font-weight:900; letter-spacing:-0.05em;}
.main-programming-port ul li a .main-pr-tit span{font-size:15px; letter-spacing:0}
.main-programming-port ul li:last-child a{text-align:right;}
.main-programming-port ul li a em {z-index:-1; position:absolute; top:0px; left:0px; width:100%; height:100%; background-size:cover !important;}

.main-inv-btn{padding-top:30px; text-align:center;}
.main-inv-btn  a{display:inline-block; align-items: center; justify-content: center; height: 50px; line-height: 50px; padding: 0 40px; font-size:15px; color: #333; background-color: #08cee8; border-radius: 12px; transition: background-color 0.4s; white-space: nowrap;  font-family:'NEXON Lv2 Gothic Bold'; margin-top:10px; font-weight:bold;}

.popCsk {font-family: Pretendard;position: absolute;display:block;z-index: 10;max-width:350px;right:10%;top:10%;);}
.popCsk img {border-radius: 10px 10px  0 0;max-width:100%;height: auto;object-fit:cover;}
.popCsk a {display:flex;}
.popCsk ul {display:flex;border: solid 1px #dedede;border-radius: 0 0 10px 10px;background:#ffffff;}
.popCsk li {width:50%;text-align:center;display:flex; justify-content:center;align-items:center;font-size:14px;padding:10px;}
.popCsk li:first-of-type {border-right: solid 1px #dedede;}

/* [2026-10-15] 색반전(mix-blend-mode:difference) 제거 — 사용자 지시.
   원 요청 HP-IM-261007-246(박기찬, 게임-부평): '밝은 배너 위 상단 텍스트가 안 보인다 →
   흰 글자 + 뒷배경에 따라 색반전'. 구현상 #header 전체에 blend 를 걸어야 해서
   헤더 안 지점선택 드롭다운까지 반전돼 배너가 비쳐 보이는 부작용이 있었다.
   HP-IM-261007-323(로고를 opacity:0 으로 숨기고 #footer::before 로 복제해 그리던 보정)도
   반전이 없으면 로고가 사라지므로 함께 제거한다. */

/* [2026-10-15] 색반전 대신 옅은 검정 배경 — 사용자 지시.
   배너가 흰색일 때 상단 흰 글자가 안 보이던 원 문제(HP-IM-261007-246)를
   반전 없이 해결한다. 헤더 뒤에만 위→아래로 옅어지는 어두운 층을 깔아
   배너 자체는 건드리지 않는다. 스크롤 후(.down, 흰 배경)·메뉴 열림에는 적용하지 않는다. */
body:not(.gnb_open):not(.mopen) .main #header:not(.down) {position:fixed;}
body:not(.gnb_open):not(.mopen) .main #header:not(.down)::before {
	content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1;
	pointer-events:none;
	background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.44) 60%, rgba(0,0,0,.18) 88%, rgba(0,0,0,0) 100%);
}

/* [2026-10-15] HP-IM-261015-110 (한대희, 게임-강남) 상단 카테고리 가시성.
   옅은 검정 층만으로는 밝은 배너(벚꽃·화이트톤 슬라이드)에서 흰 글자가 여전히 묻혀
   "웹툰&웹소설·기업맞춤형교육" 이 안 보였다. 배너는 건드리지 않고
   (1) 글자 높이 구간까지 어두운 층을 유지하고 (2) 글자 자체에 어두운 그림자를 준다.
   스크롤 후(.down, 흰 배경)·전체메뉴 열림 상태에는 적용하지 않는다. */
body:not(.gnb_open):not(.mopen) .main #header:not(.down) .inner .gnb ul .gnb_li .depth1,
body:not(.gnb_open):not(.mopen) .main #header:not(.down) .inner .gnbPlace > a,
body:not(.gnb_open):not(.mopen) .main #header:not(.down) .gnb-call .quickTit,
body:not(.gnb_open):not(.mopen) .main #header:not(.down) .gnb-call h2 {
	text-shadow:0 1px 3px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.5);
}

/* [HP-MO-261023-021 ③] 메인 상단 카테고리를 웹툰 홈페이지처럼 흰 배경 + 항상 고정으로.
   배너 위에 투명하게 얹혀 있다 보니 밝은 배너에서 흰 글자가 묻혔고, 그동안 색반전 →
   어두운 층 → 글자 그림자로 덧대 왔다(HP-IM-261007-246·HP-IM-261015-110).
   배경을 흰색으로 두면 그 보정이 모두 필요 없어진다. 모바일(≤1280)은 지금 그대로 둔다. */
@media (min-width:1281px) {
	.main #header,
	.main #header.init_bg,
	.main #header.up,
	.main #header.down {background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 1px 0 rgba(0,0,0,.08);}
	/* 스크롤해도 위로 숨지 않고 그대로 붙어 있는다 */
	.main #header.up {transform:none;}
	/* 흰 배경이 깔렸으니 어두운 층과 글자 그림자는 걷어낸다 */
	body:not(.gnb_open):not(.mopen) .main #header:not(.down)::before {display:none;}
	body:not(.gnb_open):not(.mopen) .main #header:not(.down) .inner .gnb ul .gnb_li .depth1,
	body:not(.gnb_open):not(.mopen) .main #header:not(.down) .inner .gnbPlace > a,
	body:not(.gnb_open):not(.mopen) .main #header:not(.down) .gnb-call .quickTit,
	body:not(.gnb_open):not(.mopen) .main #header:not(.down) .gnb-call h2 {text-shadow:none;}
	/* 글자·아이콘은 스크롤 후(.down) 상태와 같은 어두운색으로 */
	.main #header .inner .logo a {background-image:url("/2025/img/common/logo_bk.png");}
	.main #header .inner .gnbPlace a,
	.main #header .inner .gnb ul .gnb_li .depth1 {color:#24272d;}
	.main #header .inner .gnbPlace > a i {border-color:#282828;}
	.main #header .inner .gnbPlace > a i:after {background-image:url('/2025/img/icon/icon-select-arrow-bk.png');}
	.main #header .inner .head_util .link_wrap .btn_selct {color:#121418;}
	.main #header .inner .head_util .link_wrap .btn_selct:after {background:url(../images/common/link_arr.svg) no-repeat 0 0;}
	.main .btn_menu {background:url("/2025/img/icon/menu_ico_bk.svg") no-repeat center center; background-size:40px 40px;}
	.main .btn_menu .line {background-color:#121418;}
	.main .head_util .member a {color:#24272d;}
	.main #header .gnb-call h2 {color:#121418 !important;}
	/* 흰 헤더가 배너를 덮지 않도록 헤더 높이만큼 내려 준다 */
	.wrap.main {padding-top:80px;}
}