@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
/*####################
CSS Variables
######################*/
:root{

  /* font style */
  --font-default:"Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
   /* var color : basic */
  --bg:#0b1020; --panel:#101a34; --panel2:#0f1730; --text:#e8ecff; --muted:#b9c2ea; --brand:#7c5cff; --brand2:#22d3ee; --line:rgba(255,255,255,.12); --shadow: 0 14px 38px rgba(0,0,0,.35); --radius: 18px; --radius2: 26px; --max: 1280px;
}


/*####################
Base Styles
######################*/
html, body, div, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, sup, sub, address, cite, img, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, select, input, textarea, button, a{margin:0; padding:0; border:0; box-sizing:border-box; font-family:var(--font-default);}
body{background-image:url(../img/bg-visionx.jpg); background-size:contain; background-repeat:no-repeat; background-color:#041425; color:var(--text); line-height:1.55;}
span{box-sizing:border-box;}
table{border-collapse:collapse;}
a img{border:0;}
input{outline:0;}
*::before,
*::after{margin:0; padding:0; border:0; box-sizing:border-box; font-family:var(--font-default);}
a{color:inherit; text-decoration:none;}
/* placeholder */
::-webkit-input-placeholder{color:#aaa; font-size:inherit; font-weight:300;}
::placeholder{color:#aaa; font-size:inherit; font-weight:300;}

/* scroll style */
::-webkit-scrollbar-track{background-color:transparent;}
::-webkit-scrollbar{width:8px; height:8px; background-color:transparent;}
::-webkit-scrollbar-thumb{background-color:rgb(255 255 255 / 16%);}
.zero-scroll::-webkit-scrollbar{width:0; height:0;}
.disabled{pointer-events:none !important;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}


/*####################
Header & Navigation
######################*/
header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(11,16,32,.55); border-bottom:1px solid var(--line); transition: all 0.5s;}
.nav{display:flex; justify-content:center; max-width:var(--max); margin:0 auto; padding:0 16px;}
.nav-logo{display:flex; align-items:center; transition: all 0.5s;}
.nav-logo .brand{display:flex; width:0; overflow:hidden; transition: all 0.5s; cursor:pointer;}
body.sticky .nav-logo{flex-grow:1;}
body.sticky .nav-logo .brand{width:120px;}
.brand img, .brandLarge img{width:100%; display:block;}
.nav-wrapper{display:flex; justify-content:center; align-items:center; padding:20px 0; transition: all 0.5s;}
nav ul{display:flex; gap:14px; list-style:none; padding:0; margin:0; flex-wrap:wrap; justify-content:center;}
nav a{font-size:18px; color:var(--muted); padding:8px 10px; border-radius:8px;}
nav a:hover{background:rgba(255,255,255,.06); color:var(--text);}


/*####################
Buttons
######################*/
.ctaRow{display:flex; gap:8px; align-items:center;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:14px; font-weight:700; font-size:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer;}
.btn:hover{background:rgba(255,255,255,.07);}
.btn.primary{border:0; background: linear-gradient(135deg, var(--brand), rgba(124,92,255,.55)); box-shadow: 0 10px 26px rgba(124,92,255,.25);}
.btn.primary:hover{filter:brightness(1.03);}


/*####################
Logo Section
######################*/
.logoSection{display:flex; justify-content:center; align-items:center; gap:32px; padding:80px 0 40px 0;}
.brandLarge{display:inline-flex; justify-content:center; align-items:center; max-width:320px;}
.logoSection h3{padding:8px; border-top:1px solid #fff; border-bottom:1px solid #fff; font-size:56px;}


/*####################
Hero Section
######################*/
.hero{padding:40px 0 24px;}
.heroGrid{display:grid; gap:16px; grid-template-columns: 1.2fr .8fr; align-items:stretch;}
.card{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius: var(--radius2); box-shadow: var(--shadow); overflow:hidden;}
.heroCard{padding:24px;}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted);}
.kdot{width:8px; height:8px; border-radius:99px; background:var(--brand2);}
h1{margin:12px 0 10px; font-size:40px; font-weight:500; line-height:1.15; letter-spacing:-1.2px;}
.subtitle{color:var(--muted); font-size:16px; margin:0 0 18px;}
.heroMeta{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top:18px;}
.meta{padding:16px; border-radius: var(--radius); background: rgba(16,26,52,.62); border:1px solid var(--line);}
.meta .label{font-size:12px; color:var(--muted); font-weight:800;}
.meta .value{margin-top:8px; font-size:15px; font-weight:400;}


/*####################
Countdown Timer
######################*/
.sideCard{padding:24px;}
.count{display:grid; gap:8px;}
.countTitle{font-weight:400; letter-spacing:-0.32px; font-size:16px;}
.tick-flip:nth-last-child(3n+4){margin-right:16px;}
.tick-flip:nth-last-child(3n+4)::before{content:','; position:absolute; right:-20px; display:inline-flex;}
.tick-countdown{display:flex; gap:16px; justify-content:center;}
.tick-group{display:flex; flex-direction:column; gap:8px;}
.tick-countdown .tick-flip{box-shadow:0 0 40px rgba(0,0,0,.4); font-size:38px;}
.tick-group>span[data-view]{font-size:12px; text-align:center; opacity:0.5;}
.note{color:var(--muted); font-size:13px; margin-top:16px;}


/*####################
Content Sections
######################*/
section{padding:32px 0;}
.sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 16px;}
.sectionTitle h2{margin:0; font-size:22px; letter-spacing:-0.44px;}
.sectionTitle p{margin:0; color:var(--muted); font-size:14px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.list{padding:16px 24px; border-radius: var(--radius2); border:1px solid var(--line); background: rgba(16,26,52,.55);}
.list h3{margin:0 0 10px; font-size:16px; letter-spacing:-0.16px;}
.list ul{margin:0; padding-left:16px; color:var(--muted);}
.list li{margin:8px 0;}


/*####################
Program Tabs
######################*/
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0;}
.tab{border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); padding:10px 12px; border-radius: 999px; font-weight:500; cursor:pointer; user-select:none; font-size:14px;}
.tab.active{background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(34,211,238,.18)); color: var(--text); border-color: rgba(124,92,255,.4);}


/*####################
Tables
######################*/
.tableWrap{overflow:auto; border-radius: var(--radius2); border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; min-width: 740px; background: rgba(16,26,52,.55);}
th, td{padding:14px; border-bottom:1px solid rgba(255,255,255,.10); vertical-align:top;}
th{font-size:12px; letter-spacing:0.72px; text-transform:uppercase; color:var(--muted); text-align:left;}
td{font-size:14px; color:var(--text);}
tr:last-child td{border-bottom:none;}
.tag{display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:var(--muted);}


/*####################
FAQ
######################*/
details{border:1px solid var(--line); border-radius: var(--radius2); background: rgba(16,26,52,.55); padding:14px 16px;}
details + details{margin-top:10px;}
summary{cursor:pointer; font-weight:400;}
details p{color:var(--muted); margin:10px 0 0;}


/*####################
Footer
######################*/
footer{padding:30px 0 40px; color:var(--muted); border-top:1px solid var(--line); background: rgba(0,0,0,.15);}
.footGrid{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between;}


/*####################
Utility Classes
######################*/
.pillRow{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0;}
.pill{padding:0px 10px; font-size:13px; color:var(--muted);}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.accent{background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,211,238,.14)); border:1px solid rgba(255,255,255,.12);}
.highlight-brand2{color:var(--brand2);}
.apply-wrapper{margin-top:14px; display:grid; gap:10px;}
.apply-desc{color:var(--muted); font-size:14px;}
.apply-btn-group{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.col-time{width:140px;}
.col-place{width:160px;}
.col-instructor{width:170px;}
.note-cell{color:var(--muted);}
.mt-12{margin-top:12px;}
.map-desc{color:var(--muted); font-size:14px;}
.map-btn-group{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.footer-title{font-weight:950; color:var(--text);}
.footer-copyright{font-size:13px; margin-top:6px;}
.footer-btn-group{display:flex; gap:10px; flex-wrap:wrap;}
#apply h3{margin:0 0 8px;}
.partnerLogos{display:flex; gap:32px; flex-wrap:wrap; align-items:center; padding:16px 0;}
.partnerLogos img{height:48px; width:auto;}
.institutionLogos{display:flex; gap:32px; flex-wrap:wrap; align-items:center; padding:16px 0;}
.institutionLogos img{height:48px; width:auto;}
.mt-12{margin-top:12px;}
.map-desc{color:var(--muted); font-size:14px;}
.map-btn-group{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.footer-title{font-weight:950; color:var(--text);}
.footer-copyright{font-size:13px; margin-top:6px;}
.footer-btn-group{display:flex; gap:10px; flex-wrap:wrap;}
#apply h3{margin:0 0 8px;}


/*####################
Responsive Design
######################*/
@media (max-width:1280px){
  .tick-countdown .tick-flip{font-size:2.6vw;}
  .logoSection h3{font-size:48px;}
  .brandLarge{width:280px}
}
@media (max-width:900px){
   .heroGrid{grid-template-columns:1fr;}
   .grid2{grid-template-columns:1fr;}
   .tick-countdown .tick-flip{font-size:38px;}
   .logoSection{flex-direction:column;}
   .logoSection h3{font-size:40px;}
}

@media (max-width:768px){
   .nav-wrapper{padding:16px 0;}
   nav a{font-size:15px; padding:6px 8px;}
   body.sticky .nav-logo .brand{width:100px;}
   .logoSection{padding:60px 0 30px 0;}
   .tick-flip, .tick-text-inline{font-size:26px;}
   .tick-countdown{gap:16px;}
}

@media (max-width:700px){
   .heroMeta{grid-template-columns:1fr;}
   .partnerLogos{gap:24px;}
   .partnerLogos img{height:32px;}
}

@media (max-width:520px){
   .nav{padding:0 12px;}
   .nav-wrapper{padding:14px 0;}
   nav ul{gap:8px;}
   nav a{font-size:14px; padding:6px 8px;}
   body.sticky .nav-logo .brand{width:80px;}
   .logoSection{gap:6vw; padding:50px 0 20px 0;}
   .logoSection h3{font-size:7.5vw;}
   .brandLarge{max-width:48vw;}
   h1{font-size:28px;}
   .tick-countdown{gap:8px;}
   .tick-countdown .tick-flip{font-size:6vw;}
   .tick-group>span[data-view]{font-size:11px;}
}