@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: 20px; height: 20px; 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:12px}
.main #header.down .inner .gnbPlace > a i {display: inline-block; position: relative; width: 20px; height: 20px; 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:12px}
.main #header .inner.open .gnbPlace > a {color:#282828}
.main #header .inner.open .gnbPlace > a i {display: inline-block; position: relative; width: 20px; height: 20px; 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:12px}




.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;}




.index-wr{width:100%; background:#1d1f22;}
#mainHero {position: relative; z-index: 9; height: 640px;}
#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 .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:52%; left:50%; width: 100%; 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;}
.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:-35px; left:50%; margin:0 auto; width:110px; margin-left:-55px;}

.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;}
.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;}
.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 {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;display:block;  border-radius:24px; overflow:hidden;transition: all 0.5s;}
.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-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;}