/* =========================================================
   2026 리뉴얼 - MAIN
========================================================= */
:root{ --main_hero_h: 1050px; --main_panel_w: 1300px; }
#container{ position: relative; margin-top: 110px; padding-top:700px; overflow: visible; padding-bottom: 0 !important;}
.main_visual{ position: absolute; left: 0; top: 0; width: 100%; height: var(--main_hero_h); z-index: 0; overflow: hidden; margin-top: -80px;}
.main_visual_swiper{ width: 100%; height: 100%; }
.main_visual_swiper .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.main_title{ position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; z-index: 2; }
.main_title h1{ font-family: 'NexonLv1Gothic', sans-serif; font-size: 40px; font-weight: 400; line-height: 1.4; color: #fff; letter-spacing: -0.5px; text-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 20px rgba(0,0,0,0.2);    opacity:0; transform:translateY(40px); filter:blur(6px); animation:main_title_show 1.2s ease-out forwards;}
@keyframes main_title_show{
  0%{ opacity:0; transform:translateY(40px); filter:blur(6px); }
  100%{ opacity:1; transform:translateY(0); filter:blur(0); }
}

.main_title .bold{ font-weight: 700; font-family: 'NexonLv1Gothic', sans-serif; }
.main_visual_ctrl{ position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 2; display: none;}
.main_visual_ctrl_inner{ display: flex; align-items: center; gap: 10px; }
.main_visual_fraction{ display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 86px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,0.6); box-shadow: 0 2px 8px rgba(0,0,0,0.18); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); font-size: 16px; line-height: 1; color: #111; }
.main_visual_fraction .main_visual_current{ font-weight: 700; }
.main_visual_fraction .main_visual_sep{ display: inline-block; margin: 0 6px; color: rgba(0,0,0,0.5); font-weight: 400; }
.main_visual_fraction .main_visual_total{ color:#202020; }
.main_visual_btn{ width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background-color: rgba(255,255,255,0.6); background-repeat: no-repeat; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.main_visual_btn:focus-visible{ outline: 2px solid #111; outline-offset: 2px; }
.main_visual_btn--prev{ background-image: url("../img/main/icon_swiper_prev.png"); }
.main_visual_btn--next{ background-image: url("../img/main/icon_swiper_next.png"); }
.main_visual_btn--stop{ background-image: url("../img/main/icon_swiper_pause.png"); }
.main_visual_btn--play{ background-image: url("../img/main/icon_swiper_play.png"); }
.main_visual_btn--play{ display:none; }
.main_visual_btn--stop.is_on{ display:inline-block; }
.main_visual_btn--play.is_on{ display:inline-block; }
.main_panel{ position: relative; z-index: 3; max-width: var(--main_panel_w); margin: -200px auto 0; padding: 0 24px; }
.main_panel_box{ border-top-right-radius:20px; border-top-left-radius:20px; overflow:hidden; background-color: #fff; }
.main_panel_grid{ display: grid; grid-template-columns: 1.15fr 0.95fr; }
.main_board{ padding:35px; }
.main_board_head,
.main_video_head{ display:flex; justify-content:space-between;}
.main_video_head{padding:0 0 10px;}
.main_tabs{ display:inline-flex; gap:18px;}
.main_tab{ appearance:none; border:0; background:transparent; padding: 0 2px 20px 0; font-size:19px; font-weight:600; color:#666; position:relative; cursor:pointer; font-family: 'Escoredream';}
.main_tab::after{content: '';}
.main_tab.is_active{ color:#6b4df5; }
.main_tab.is_active::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:3px; border-radius:3px; background:#6b4df5; }
.main_tab:focus-visible{ outline:2px solid #111; outline-offset:3px; border-radius:6px; }
.main_more{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#eef0f6; position:relative; }
.main_more::before,
.main_more::after{ content:""; position:absolute; background:#666; }
.main_more::before{ width:12px; height:2px; }
.main_more::after{ width:2px; height:12px; }
.main_more:focus-visible{ outline:2px solid #111; outline-offset:3px; }
.main_board_body{ display:flex; flex-direction:column; gap:12px; }
.main_list{ margin:0; padding:15px 0 0 0; list-style:none; border-top:1px solid #333333;   min-height: 210px;}
.main_item{ }
.main_link{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px; padding:7px 2px; color:#222; text-decoration:none;}
.main_txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-family: 'Pretendard'; font-weight: 300;}
.main_txt:before{content: '·'; margin-right: 5px;}
.main_date{ font-size:13px; color:#939393;  font-family: 'Pretendard'; font-weight: 400;}
.main_link:focus-visible{ outline:2px solid #111; outline-offset:3px; border-radius:8px; }
  /* 하단 퀵링크 */
.main_quick{ display:grid; grid-template-columns: repeat(4, 1fr); border-radius: 10px; border:1px solid #e0e0e0; }
.main_quick_link{ display:flex; align-items:center; gap:10px; padding:12px 12px; background:#fafafa; text-decoration:none; color:#222; min-height:56px; justify-content:space-between; border-right: 1px solid #ccc;}
.main_quick_link:first-child{ border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.main_quick_link:last-child{border-right: 0;  border-radius: 10px;}
.main_quick_ico{flex:0 0 auto; }
.main_quick_txt{ font-size:14px; color:#000; font-weight: 700; }
.main_quick_link:focus-visible{ outline:2px solid #111; outline-offset:3px; }
.main_video{ padding: 35px; display:flex; flex-direction:column; }
.main_video_tit{ font-size:19px; font-weight:600; color:#222; font-family: 'Escoredream';}
.main_video_thumb{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; text-decoration:none; position:relative; max-height: 280px;}
.main_video_img{ flex:1 1 auto; border-radius:15px; min-height:260px; overflow:hidden; }
.main_video_img img{display: block; object-fit: cover; width: 100%; height: 100%;}
.main_video_thumb:focus-visible{ outline:2px solid #111; outline-offset:4px; border-radius:16px; }



.main_program{ max-width: var(--main_panel_w); margin: 30px auto 0; padding: 0 60px; }
.main_program_list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.main_program_card{ position: relative;   transition:transform .3s ease, box-shadow .3s ease;}
.main_program_link{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: #f3f4f8; border-radius: 15px; padding: 30px 18px; text-decoration: none; color: #111; box-shadow: 0 10px 22px rgba(0,0,0,0.08); }
.main_program_link:focus-visible{ outline: 2px solid #111; outline-offset: 3px; }
.main_program_item:nth-child(1) .main_program_link{background:#2791e2;}
.main_program_item:nth-child(2) .main_program_link{background:#8b69d8;}
.main_program_item:nth-child(3) .main_program_link{background:#31989b;}
.main_program_item:nth-child(4) .main_program_link{background:#4f59a5;}
.main_program_ico{ position:relative; width:130px; height:130px; display:flex; align-items:center; justify-content:center; }

.main_program_ico::before{ content:""; position:absolute; width:130px; height:130px; border-radius:50%; z-index:0;}
.main_program_item:nth-child(1) .main_program_ico::before{background:#2FA7E8;}
.main_program_item:nth-child(2) .main_program_ico::before{background:#A27EE0;}
.main_program_item:nth-child(3) .main_program_ico::before{background:#3BADAF;}
.main_program_item:nth-child(4) .main_program_ico::before{background:#5F6BB7;}
.main_program_ico img{ position:relative; z-index:1; max-width:90px; max-height:90px; }
.main_program_link{color:#fff;}
  /* 텍스트 */
.main_program_txt{ min-width: 0; padding-right: 8px; }
.main_program_tit{ display: block; font-size: 18px; line-height: 1.25; font-weight: 600; font-family: 'Escoredream';}
.main_program_more{ position: absolute; left: 18px; bottom: 18px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 6px 14px rgba(0,0,0,0.12); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }  
.main_program_more::before,
.main_program_more::after{ content:""; position: absolute; background: #8b5cf6; border-radius: 2px; }  
.main_program_more::before{ width: 12px; height: 2px; }
.main_program_more::after{ width: 2px; height: 12px; }
.main_program_more:focus-visible{ outline: 2px solid #111; outline-offset: 3px; }
.main_program_ico{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.main_program_link:hover{ box-shadow: 0 14px 26px rgba(0,0,0,0.10); }
.main_program_more:hover{ box-shadow: 0 10px 18px rgba(0,0,0,0.14); }
/* 1번 카드 */
.main_program_item:nth-child(1) .main_program_more::before,
.main_program_item:nth-child(1) .main_program_more::after{ background:#2791e2; }

/* 2번 카드 */
.main_program_item:nth-child(2) .main_program_more::before,
.main_program_item:nth-child(2) .main_program_more::after{ background:#8b69d8; }

/* 3번 카드 */
.main_program_item:nth-child(3) .main_program_more::before,
.main_program_item:nth-child(3) .main_program_more::after{ background:#31989b; }
/* 4번 카드 */
.main_program_item:nth-child(4) .main_program_more::before,
.main_program_item:nth-child(4) .main_program_more::after{ background:#4f59a5; }
.main_program_card:hover{ transform:translateY(-8px); box-shadow:0 14px 30px rgba(0,0,0,0.18); }

.main_family{ background:#cbdaf0; margin-top: 50px; }
.main_family_link{ position: relative; overflow: hidden; }
.main_family_txt{ position: relative; z-index: 2; font-family: 'Pretendard'; font-weight: 600; line-height: 1.3;}
.main_family_inner{ max-width: var(--main_panel_w); margin: 0 auto; padding: 50px; }
.main_family_list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(5, 220px); gap: 20px; justify-content: center; align-items: center; }
.main_family_item{ margin:0; padding:0; }
.main_family_link{ position: relative; display:flex; align-items:center; justify-content:center; width: 100%; height: 80px; padding:20px; border-radius: 10px; background:#fff; text-decoration:none; color:#111; font-size: 15px; font-weight: 700;  box-shadow: 0 8px 18px rgba(0,0,0,0.10); overflow:hidden; text-align:center; font-family: 'Pretendard';}
.main_family_link:focus-visible{ outline: 2px solid #111; outline-offset: 3px; }
.main_family_link--mjc img{ display:block; width: auto; }
.main_family_link--smartcare::after,
.main_family_link--eclass::after,
.main_family_link--icampus::after,
.main_family_link--library::after{ content:""; position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-repeat:no-repeat; background-position:center; background-size: auto; pointer-events:none; z-index: 1; }
.main_family_link--smartcare::after{ width:52px; height:52px; background-image:url("../img/main/icon_smartcare.png"); }
.main_family_link--eclass::after{ width:62px; height:53px; background-image:url("../img/main/icon_eclass.png"); }
.main_family_link--icampus::after{ width:61px; height:60px; background-image:url("../img/main/icon_icampus.png"); }
.main_family_link--library::after{ width:55px; height:49px; background-image:url("../img/main/icon_library.png"); }
.main_family_link:hover{ box-shadow: 0 10px 22px rgba(0,0,0,0.13); }


@media (max-width: 1300px){
  .main_panel{ padding: 0 18px; }
  .main_program{ padding: 0 18px; }
  .main_family_inner{ padding: 30px 18px; }
  .main_family_list{ grid-template-columns: repeat(5, minmax(0, 200px)); gap: 14px; }
}
@media screen and (max-width:1299px){
  #container{ margin-top: 70px; } 
}

@media (max-width: 1024px){
  .main_title{top: 10%}
  .main_visual_ctrl{ top: 18%; }
  .main_panel{ margin-top: -40px; }
  .main_panel_grid{ grid-template-columns: 1fr; }
  .main_video_img{ min-height: 240px; }
  .main_quick{ grid-template-columns: repeat(2, 1fr); }
  .main_quick_link{ border-right: 0; }
  .main_quick_link:first-child{ border-top-left-radius:0; border-bottom-left-radius:0;}
  .main_quick_link:last-child{border-radius:0;}
  .main_quick_link:nth-child(odd){ border-right: 1px solid #ccc; }
  .main_quick_link:nth-child(-n+2){ border-bottom: 1px solid #ccc; }
  .main_program{ margin-top: 36px; }
  .main_program_list{ grid-template-columns: repeat(2, 1fr); }
  .main_family{ margin-top: 36px; }
  .main_family_list{ grid-template-columns: repeat(3, minmax(0, 220px)); }
  .main_family_link{ height: 74px; padding: 16px; font-size: 14px; }
}

@media (max-width: 768px){
  .main_title h1{ font-size: 24px; }
  .main_visual_ctrl{ top: 20%; }
  .main_visual_btn{ width: 36px; height: 36px; }
  .main_visual_fraction{ height: 32px; min-width: 78px; font-size: 14px; }
  .main_panel{margin-top:-300px;}
  .main_board{ padding: 14px 14px 16px; }
  .main_video{ padding: 14px 14px 16px; }
  .main_tabs{ gap: 12px; }
  .main_tab{ font-size: 15px; padding: 10px 2px; }
  .main_txt{ font-size: 13px; }
  .main_date{ font-size: 11px; }
  .main_program_ico img{ max-width: 100px; max-height: 80px; }
  .main_program_link{ padding: 16px; }
  .main_family_inner{ padding: 26px 16px; }
  .main_family_list{ grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
  .main_family_link{ height: 70px; padding: 14px; }
}
@media (max-width: 560px){
  .main_panel{ padding: 0 14px; }
  .main_program{ padding: 0 14px; }
  .main_program_list{ grid-template-columns: 1fr; }
  .main_program_link{ min-height: 96px; }
  .main_family_list{ grid-template-columns: 1fr; }
  .main_family_link{ height: 66px; font-size: 13px; }
  .main_quick{ grid-template-columns: 1fr; }
  .main_quick_link{ border-right: 0 !important; border-bottom: 1px solid #ccc; }
  .main_quick_link:last-child{ border-bottom: 0; }
}
@media (max-width: 478px){
  .main_title{ top: 7%; }
  .main_panel{margin-top:-400px;}
}
@media (max-width: 420px){
  .main_title h1{ font-size: 20px; line-height: 1.35; }
  .main_family_link{ padding: 12px; }
  .main_family_link--smartcare{ font-size: 13px; }
  .main_family_link--smartcare::after,
  .main_family_link--eclass::after,
  .main_family_link--icampus::after,
  .main_family_link--library::after{ background-size: 70%; }

}