/* Tailwind preflight 대체 (border 기본값) */ *, *::before, *::after { border-style: solid; border-width: 0; border-color: #e5e7eb; box-sizing: border-box; } /* 리스트 기본 불릿 제거 */ ul, ol { list-style: none; } /* 버튼 기본 스타일 제거 */ button { border: none; background: none; padding: 0; margin: 0; outline: none; cursor: pointer; font: inherit; color: inherit; } /* clearfix */ .cf::after, .cf::before { content: ''; display: table; clear: both; } .cf { zoom: 1; } /* 기본 img 반응형 */ img { max-width: 100%; height: auto; } /* ============================================ 한국건설직업전문학교 - 리뉴얼 CSS (스코프 분리 적용) ============================================ ★ 구조 설명 ★ ───────────────────────────────────────────── [그룹 A] 전 페이지 공통 (헤더·푸터·퀵메뉴·GNB) → .renew 없이 적용 [그룹 B] 리뉴얼 페이지 전용 (콘텐츠 영역) → 반드시 .renew 하위로 스코프 ★ 적용 방법 ★ ───────────────────────────────────────────── 리뉴얼 완료 페이지 → 미완료 페이지 → (변경 없음) ============================================ */ /* ============================================ [그룹 A] 전 페이지 공통 — 헤더·푸터·퀵메뉴·GNB ============================================ */ /* ── GNB ── */ .gnb-a{position:relative} .gnb-a::after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:#3A4FC9;transition:all .3s;transform:translateX(-50%)} .gnb-a:hover::after,.gnb-item.active .gnb-a::after{width:70%} .gnb-item.active .gnb-a{color:#3A4FC9} .gnb-item[data-menu='6'] .gnb-a{color:#15161B} .gnb-text{color:#15161B;transition:color .2s} .gnb-text:hover{color:#3A4FC9} .gnb-item.active .gnb-text{color:#3A4FC9} /* Nav bar가 mega menu 위에 올라오도록 레이어링 */ .sticky.top-0>.inner{position:relative;z-index:2;background:#fff} .sticky.top-0{z-index:1000} .sticky.top-0 .inner{position:relative;z-index:1001} /* ── GNB Wrap (상세: 히어로 지나면 숨김) ── */ .gnb-wrap{position:sticky;top:0;z-index:50;transition:transform .35s cubic-bezier(.4,0,.2,1)} .gnb-wrap.hide{transform:translateY(-100%);pointer-events:none} /* ★ Mega Menu ── */ .mega-panel{ position:fixed;left:0;right:0;z-index:999 !important; background:#fff;border-bottom:1px solid #e8e8e8; box-shadow:0 8px 30px rgba(0,0,0,.08); max-height:0;overflow:hidden;opacity:0; transform:translateY(-8px); transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease,transform .3s cubic-bezier(.4,0,.2,1); pointer-events:none; } .mega-panel.open{max-height:400px;opacity:1;transform:translateY(0);pointer-events:auto} .mega-content{display:none;padding:24px 0} .mega-content.active{display:block;padding:19.5px 0} .mega-link{display:flex;align-items:center;gap:14px;padding:12px 20px 12px 25px;border-right:1.2px solid #F0F0F0;transition:background .2s;height:auto;box-sizing:border-box} .mega-link:last-child{border-right:none} .mega-link:hover{background:#f8f9fb} .mega-icon{width:45px;height:45px;display:flex;align-items:center;justify-content:center;background:#f0f2f8;color:#2d3a6e;flex-shrink:0;border-radius:0} .mega-course-grid{display:flex;gap:0;min-height:200px} .mega-col{flex:1;padding:0 24px} .mega-col:first-child{padding-left:0} .mega-col-divider{width:1px;background:#e8e8e8;flex-shrink:0} .mega-cat-title{font-size:16px;font-weight:800;color:#18182a;padding-bottom:12px;margin-bottom:16px;border-bottom:2.5px solid #2D3A6E} .mega-course{display:flex;align-items:center;gap:0;padding:9px 0;font-size:17px;font-weight:400;color:#555555;transition:color .15s;border-bottom:1px solid transparent} .mega-course:hover{border-bottom:1.5px solid #d0d0d0;font-weight:500} .mega-course span:not(.mega-tag){max-width:470px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block} .mega-tag{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;padding:3px 12px;flex-shrink:0;letter-spacing:-0.01em;margin-right:8px} .tag-national{background:#2d3a6e;color:#fff} .tag-unemployed{background:#1e2d45;color:#fff} .tag-general{background:#fff;color:#555555;border:1.3px solid #CCCCCC} /* ── Mobile Menu ── */ .mob-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease} .mob-acc.open .mob-acc-body{max-height:500px} .mob-acc.open .mob-acc-arrow{transform:rotate(180deg)} .mob-sub{display:flex;align-items:center;gap:8px;padding:12px 16px 12px 24px;font-size:16px;color:#555;background:#f9f9fb;border-bottom:1px solid #f0f0f0} .mob-sub:hover{background:#eef0f5;color:#2d3a6e} /* ── Quick Float (우측 퀵메뉴) ── */ .quick-float{position:fixed;top:55%;right:0;z-index:50;transform:translateY(-50%);display:flex;flex-direction:column;border-radius:0;overflow:hidden;box-shadow:0px 4px 15px rgba(0,0,0,0.15)} .quick-float a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100px;height:100px;text-align:center;font-size:13px;font-weight:700;transition:all .25s;line-height:1.2} .quick-float a svg{width:28px;height:28px;flex-shrink:0} .quick-float a:hover{filter:brightness(1.1)} .qf-counsel:hover{background:#3A4FC9 !important} .qf-fee:hover{background:#4E4E62 !important} /* ★ Mobile Floating CTA (하단 고정 바) ── */ .floating-bar{ position:fixed;bottom:0;left:0;right:0;z-index:9999; display:none;align-items:center;justify-content:center; height:56px;background:#DA2027; box-shadow:0 -4px 16px rgba(0,0,0,.12); opacity:0;pointer-events:none;transition:opacity .4s ease; } .floating-bar.show{opacity:1;pointer-events:auto} .floating-bar a{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:15px;font-weight:800;width:100%;height:100%;text-decoration:none} @media(max-width:1023px){.floating-bar{display:flex}.quick-float{display:none!important}#sTop{bottom:100px!important;right:16px!important;left:auto!important;z-index:9998!important}} @media(min-width:1024px){.floating-bar{display:none!important}} /* ── Logo ── */ .logo-link{ display:inline-block; width:271px; height:54px; background:url(/images/common/renewal/logo.png) center / contain no-repeat; text-indent:-9999em; overflow:hidden; } @media(max-width:768px){ .logo-link{width:200px;height:40px} } /* ✅ 이걸로 교체 */ .sticky.top-0::after{ content:''; position:absolute; bottom:-8px; left:0; right:0; height:8px; background:linear-gradient(to bottom, rgba(0,0,0,.06), transparent); pointer-events:none; z-index:999; } /* 취업현황 빈 상태 */ #employee .employee-list { overflow: visible; } #employee .employee-list .noting { overflow: visible; margin-bottom: 60px; } #employee .employee-empty { position: relative; width: 100%; height: 220px; background: #f1f4f9; overflow: visible; } #employee .employee-empty .empty-text { position: absolute; bottom: 20px; right: 30px; z-index: 1; font-size: 16px; color: #888; line-height: 1.8; text-align: right; } #employee .employee-empty .empty-img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 65%; max-height: 420px; } #employee .employee-list li.noting { height: auto !important; min-height: 220px; overflow: visible; margin-bottom: 40px; padding: 0 !important; } /* ── Top Bar (모바일 숨김) ── */ .top-bar{} @media(max-width:768px){.top-bar{display:none!important}} /* ── Footer ── */ .footer-quick span{font-size:14px!important} .footer-quick svg{width:17px!important;height:17px!important} .footer-quick a{padding:14px 0!important;gap:6px!important} @media(max-width:768px){ .footer-links{gap:14px!important} .footer-links a{font-size:14px!important} .footer-info strong{font-size:15px!important} .footer-info p{font-size:14px!important;line-height:24px!important} .footer-channels{flex-wrap:wrap;gap:7px!important} .footer-copy{font-size:13px!important} } @media(max-width:480px){ .footer-links{flex-direction:column;gap:10px!important} } /* ── 공통 유틸 (전역) ── */ .font-eng{font-family:'Outfit','Noto Sans KR',sans-serif} /* ============================================ [그룹 B] 리뉴얼 페이지 전용 — .renew 스코프 ============================================ ★ 아래 모든 스타일은 하위에서만 적용됩니다. ★ 리뉴얼 안 된 페이지(about.asp 등)에는 영향 없음! ============================================ */ /* ── 전역 리셋 (헤더·푸터 포함 모든 요소에 필요) ── */ *{margin:0;padding:0;box-sizing:border-box} .inner{max-width:1180px;margin:0 auto;padding:0 20px} a{text-decoration:none;color:inherit} /* ── body 타이포그래피만 .renew 스코프 제한 ── */ /* ★ font-family, font-size, line-height 등은 기존 페이지 레이아웃을 깨뜨리므로 제한 */ .renew{font-family:'Noto Sans KR',sans-serif;color:#333;overflow-x:hidden;font-size:15px;line-height:1.6} /* ── Hero ── */ .renew .hero-slider{position:relative;overflow:hidden} .renew .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;z-index:0;pointer-events:none} .renew .hero-slide.active{opacity:1;z-index:1;pointer-events:auto} @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes pulse-subtle{0%,100%{opacity:1}50%{opacity:.6}} /* ── Scroll Reveal ── */ .renew .sr{ opacity:0; transform:translateY(32px) scale(0.97); transition: opacity .9s cubic-bezier(.34,1.56,.64,1), transform .9s cubic-bezier(.34,1.56,.64,1); } .renew .sr.v{opacity:1;transform:translateY(0) scale(1)} .renew .sr-d1{transition-delay:.12s} .renew .sr-d2{transition-delay:.24s} .renew .sr-d3{transition-delay:.36s} .renew .sr-d4{transition-delay:.48s} .renew .sr-d5{transition-delay:.60s} .renew .sr-d6{transition-delay:.72s} .renew .sr-left{opacity:0;transform:translateX(-30px) scale(0.97);transition:opacity .9s cubic-bezier(.34,1.56,.64,1),transform .9s cubic-bezier(.34,1.56,.64,1)} .renew .sr-left.v{opacity:1;transform:translateX(0) scale(1)} .renew .sr-right{opacity:0;transform:translateX(30px) scale(0.97);transition:opacity .9s cubic-bezier(.34,1.56,.64,1),transform .9s cubic-bezier(.34,1.56,.64,1)} .renew .sr-right.v{opacity:1;transform:translateX(0) scale(1)} /* ── Cards ── */ .renew .c-card{transition:all .35s cubic-bezier(.34,1.56,.64,1)} .renew .c-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,.12)} .renew .c-card:hover .c-thumb{transform:scale(1.05)} .renew .c-thumb{transition:transform .6s cubic-bezier(.34,1.56,.64,1)} /* ── Background Patterns ── */ .renew .noise::after{content:'';position:absolute;inset:0;opacity:.02;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .renew .dot-pat{background-image:radial-gradient(circle,#dcdcdc 1px,transparent 1px);background-size:20px 20px} .renew .cross-pat{background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 18v4M18 20h4' stroke='%23e8e8e8' stroke-width='.8' fill='none'/%3E%3C/svg%3E")} .renew .line-pat{background-image:linear-gradient(rgba(232,232,232,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(232,232,232,.4) 1px,transparent 1px);background-size:50px 50px} .renew .blueprint-pat{background-image: linear-gradient(rgba(36,54,162,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(36,54,162,.03) 1px,transparent 1px), linear-gradient(rgba(36,54,162,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(36,54,162,.015) 1px,transparent 1px); background-size:100px 100px,100px 100px,20px 20px,20px 20px} .renew .diag-pat{background-image:repeating-linear-gradient(135deg,transparent,transparent 49px,rgba(38,33,97,.025) 49px,rgba(38,33,97,.025) 50px)} /* ── Decorative Elements ── */ .renew .deco-circle-fill{position:absolute;border-radius:50%;pointer-events:none;opacity:.06} .renew .deco-circle-ring{position:absolute;border-radius:50%;pointer-events:none;border:3px solid;opacity:.08} .renew .deco-circle-ring::before{content:'';position:absolute;inset:10px;border-radius:50%;border:2.5px solid;opacity:.7} .renew .deco-circle-ring::after{content:'';position:absolute;inset:22px;border-radius:50%;border:2px solid;opacity:.5} .renew .deco-tri{position:absolute;width:0;height:0;pointer-events:none;opacity:.06} .renew .deco-diamond{position:absolute;pointer-events:none;opacity:.05;transform:rotate(45deg)} .renew .deco-x-bold{position:absolute;width:20px;height:20px;pointer-events:none;opacity:.1} .renew .deco-x-bold::before,.renew .deco-x-bold::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:4px;transform-origin:center} .renew .deco-x-bold::before{transform:translate(-50%,-50%) rotate(45deg)} .renew .deco-x-bold::after{transform:translate(-50%,-50%) rotate(-45deg)} .renew .deco-dots-bold{position:absolute;display:flex;gap:10px;pointer-events:none;opacity:.12} .renew .deco-dots-bold span{width:8px;height:8px;border-radius:50%;display:block} .renew .deco-line-group{position:absolute;pointer-events:none;opacity:.07} .renew .deco-line-group span{display:block;height:3px;margin-bottom:5px} .renew .deco-zigzag-bold{position:absolute;pointer-events:none;opacity:.08} /* Deco Color fills */ .renew .deco-navy-fill .deco-circle-fill{background:#2d3a6e} .renew .deco-navy-fill .deco-circle-ring{border-color:#2d3a6e} .renew .deco-navy-fill .deco-circle-ring::before,.renew .deco-navy-fill .deco-circle-ring::after{border-color:#2d3a6e} .renew .deco-navy-fill .deco-tri{border-bottom-color:#2d3a6e} .renew .deco-navy-fill .deco-diamond{background:#2d3a6e} .renew .deco-navy-fill .deco-x-bold::before,.renew .deco-navy-fill .deco-x-bold::after{background:#2d3a6e} .renew .deco-navy-fill .deco-dots-bold span{background:#2d3a6e} .renew .deco-navy-fill .deco-line-group span{background:#2d3a6e} .renew .deco-gray-fill .deco-circle-fill{background:#A0A8B8} .renew .deco-gray-fill .deco-circle-ring{border-color:#A0A8B8} .renew .deco-gray-fill .deco-circle-ring::before,.renew .deco-gray-fill .deco-circle-ring::after{border-color:#A0A8B8} .renew .deco-gray-fill .deco-tri{border-bottom-color:#A0A8B8} .renew .deco-gray-fill .deco-diamond{background:#A0A8B8} .renew .deco-gray-fill .deco-x-bold::before,.renew .deco-gray-fill .deco-x-bold::after{background:#A0A8B8} .renew .deco-gray-fill .deco-dots-bold span{background:#A0A8B8} .renew .deco-gray-fill .deco-line-group span{background:#A0A8B8} @media(max-width:768px){.renew .deco-circle-fill,.renew .deco-circle-ring,.renew .deco-tri,.renew .deco-diamond,.renew .deco-x-bold,.renew .deco-dots-bold,.renew .deco-line-group,.renew .deco-zigzag-bold{opacity:.03!important;transform:scale(.6)}} /* ── Ticker ── */ .renew .ticker-wrap{overflow:hidden} .renew .ticker-track{display:flex;animation:marquee 35s linear infinite;width:max-content} .renew .ticker-wrap:hover .ticker-track{animation-play-state:paused} .renew .no-sb::-webkit-scrollbar{display:none}.renew .no-sb{-ms-overflow-style:none;scrollbar-width:none} /* ── 공지사항 우측 컬럼 ── */ .renew .notice-grid > .flex.flex-col{justify-content:space-between} /* ── Scrollbar (리뉴얼 페이지만) ── */ .renew ::-webkit-scrollbar{width:5px;height:5px} .renew ::-webkit-scrollbar-thumb{background:#302e4d;border-radius:3px} /* ── Bento ── */ .renew .bento-card{transition:all .35s cubic-bezier(.34,1.56,.64,1)} .renew .bento-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.08)} /* ── Partner Ticker ── */ @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .renew .partner-track{display:flex;gap:80px;align-items:center;animation:ticker 25s linear infinite;width:max-content} .renew .partner-track:hover{animation-play-state:paused} .renew .partner-logo{max-height:58px;max-width:140px;width:auto;height:auto;object-fit:contain;filter:grayscale(100%) opacity(0.45);transition:filter .3s ease} .renew .partner-logo:hover{filter:grayscale(0%) opacity(1)} /* ── Portfolio ── */ .renew .port-thumb{overflow:hidden} .renew .port-thumb img,.renew .port-thumb .port-bg{transition:transform .5s ease-in-out} .renew .port-thumb:hover img,.renew .port-thumb:hover .port-bg{transform:scale(1.08)} .renew .port-carousel{overflow:hidden} .renew .port-track{display:flex;transition:transform .5s ease-in-out} .renew .port-slide{flex:0 0 100%;min-width:0} .renew .img-cover{object-fit:cover;width:100%;height:100%;display:block} /* ── Benefit Strip ── */ .renew .benefit-strip{display:flex;align-items:stretch;overflow:hidden;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1)} .renew .benefit-strip .b-cell{flex:1;text-align:center;padding:24px 12px;position:relative;transition:background .3s} .renew .benefit-strip .b-cell:not(:last-child)::after{content:'';position:absolute;right:0;top:18%;height:64%;width:1px;background:rgba(255,255,255,0.12)} .renew .benefit-strip .b-cell:hover{background:rgba(255,255,255,0.04)} .renew .benefit-strip .b-val{font-family:'Roboto','Noto Sans KR',sans-serif;font-weight:800;font-size:38px;line-height:1;color:#DA2027} @media(min-width:768px){.renew .benefit-strip .b-val{font-size:44px}} @media(max-width:480px){.renew .benefit-strip{flex-direction:column}.renew .benefit-strip .b-cell:not(:last-child)::after{right:15%;top:auto;bottom:0;height:1px;width:70%}.renew .benefit-strip .b-cell{padding:14px 12px}} /* ── Step Flow ── */ .renew .step-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px} .renew .step-flow .s-dot{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0} .renew .step-flow .s-dot.on{background:#DA2027;box-shadow:0 2px 8px rgba(218,32,39,.3)} .renew .step-flow .s-dot.off{background:#4a6aaf} .renew .step-flow .s-arrow{color:rgba(255,255,255,.3);font-size:11px;margin:0 2px} .renew .step-flow .s-lbl{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);margin-left:5px;white-space:nowrap} .renew .step-flow .s-item{display:flex;align-items:center;padding:6px 0;position:relative} .renew .step-flow .s-tip{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;background:rgba(0,0,0,.85);color:#fff;font-size:12px;padding:6px 12px;white-space:nowrap;z-index:5} .renew .step-flow .s-item:hover .s-tip{display:block} @media(max-width:639px){.renew .step-flow{flex-direction:column;align-items:flex-start;gap:0;padding-left:20px;border-left:2px solid rgba(255,255,255,.1)}.renew .step-flow .s-item{padding:8px 0}} /* ── WHY Card ── */ .renew .why-card .why-icon{ transform:translateY(8px);opacity:0; transition:all .45s cubic-bezier(.34,1.56,.64,1); } .renew .why-card:hover .why-icon{transform:translateY(0);opacity:1} .renew .why-card .why-num{transition:all .35s cubic-bezier(.34,1.56,.64,1)} .renew .why-card:hover .why-num{transform:scale(.85);opacity:.4} @media(max-width:1023px){ .renew .why-card.v .why-icon{transform:translateY(0)!important;opacity:1!important} .renew .why-card.v .why-num{transform:scale(.85)!important;opacity:.4!important} } /* ── D-Day Badge ── */ @keyframes badge-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} .renew .dday-badge{animation:badge-bounce 2s ease-in-out infinite} /* ============================================ [그룹 B] RESPONSIVE — 리뉴얼 페이지 전용 ============================================ */ /* --- Tablet (1024px 이하) --- */ @media(max-width:1023px){ .renew .sec4-title{font-size:28px!important;line-height:40px!important} .renew .sec4-stats p[style*="font-size:36px"]{font-size:30px!important;line-height:30px!important} .renew .sec6-title,.renew .sec8-title{font-size:32px!important;line-height:44px!important} .renew .campus-quick-btns{flex-wrap:wrap} .renew .campus-quick-btns>*{flex:1;min-width:120px} .renew .step-grid{grid-template-columns:repeat(2,1fr)!important} .renew #cScroll{grid-template-columns:repeat(2,1fr)!important;gap:16px!important} .renew #cScroll .c-card{width:100%!important;height:auto!important} .renew #cScroll .c-card .relative.overflow-hidden{width:100%!important} } /* 수강후기 폼 반응형 수정 */ #reviewCreate, #reviewCreate tbody, #reviewCreate tr, #reviewCreate td, #reviewCreate th { box-sizing: border-box; } #reviewCreate select, #reviewCreate input[type="text"], #reviewCreate textarea.review-content { max-width: 100%; width: 100%; box-sizing: border-box; } /* 수강생인터뷰 리스트 반응형 수정 */ #subInterview .interview ul.table-img-board { display: flex; flex-wrap: wrap; } #subInterview .interview ul li { width: calc(25% - 15px); } #subInterview .interview ul li .interview-thumbnail img { width: 100%; display: block; } @media screen and (max-width: 1540px) { #subInterview .interview ul li { width: 32%; margin-right: 2%; } #subInterview .interview ul li:nth-of-type(3n+3) { margin-right: 0; } } /* --- Mobile (768px 이하) --- */ @media(max-width:768px){ #employee .employee-empty { height: 180px; } #employee .employee-empty .empty-text { position: relative; bottom: auto; right: auto; text-align: center; padding: 20px 10px 0; font-size: 14px; } #employee .employee-empty .empty-img { max-width: 100%; max-height: 300px; } #employee .employee-list li.noting { min-height: 180px; } #subInterview .interview ul li .interview-summary { height: auto; overflow: visible; display: block; -webkit-line-clamp: unset; text-overflow: unset; } .renew .inner{ padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; } .location{ overflow:hidden !important; width:100% !important; } .location .inner{ width:100% !important; max-width:100% !important; } .location .sub-title span{ padding:0 20px !important; } #mapArea, #mapArea #map{ width:100% !important; height:300px !important; } #directionMap.inner{ padding:0 16px !important; margin:0 !important; } .direction-text li{ padding:10px 0 !important; } div#directionMap.inner{ padding:0 24px 60px 24px !important; margin:0 auto !important; max-width:100% !important; width:100% !important; } /* 제휴문의 카드 모바일 세로 배치 */ ul.contact-ico-area{ flex-wrap:wrap !important; flex-direction:column !important; gap:0 !important; margin:30px 0 50px !important; } ul.contact-ico-area li{ width:100% !important; flex:none !important; min-height:140px !important; display:flex !important; align-items:center !important; padding:20px 24px !important; } ul.contact-ico-area li p{ font-size:15px !important; line-height:1.6 !important; } ul.contact-ico-area li p strong{ font-size:17px !important; margin-bottom:6px !important; display:block !important; } #subInterview .interview ul li { width: 49%; margin-right: 2%; } #subInterview .interview ul li:nth-of-type(3n+3) { margin-right: 2%; } #subInterview .interview ul li:nth-of-type(4n+4) { margin-right: 2%; } #subInterview .interview ul li:nth-of-type(2n+2) { margin-right: 0; } /* 제휴문의 폼 모바일 */ #contact_list th{ display:block !important; width:auto !important; } #contact_list td{ display:block !important; width:100% !important; } /* 제휴문의 + 취업연계 입력폼 모바일 강제 */ #contact_list td input[type="text"]{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } #counsel_list td input[type="text"], #counsel_list td select{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } #counsel_list th, #contact_list th{ white-space:nowrap !important; } #reviewCreate, #reviewCreate tbody, #reviewCreate tr { display: block; width: 100%; } #reviewCreate td, #reviewCreate th { display: block; width: 100% !important; } #reviewCreate td { padding-bottom: 10px; } /* 취업현황 리스트 전체 너비 */ .employee-list{ width:100% !important; } .employee-list .noting{ text-align:center !important; width:100% !important; } /* 히어로 배너 */ .renew .hero-slider{height:520px!important} .renew .hero-slide .inner{padding:0 20px!important} .renew .hero-slide h1{font-size:30px!important;line-height:42px!important} .renew .hero-slide p[class*="text-[17px]"]{font-size:15px!important;line-height:24px!important} .renew .hero-slide .max-w-lg{max-width:100%!important} .renew .hero-slide a[style*="border-radius"]{font-size:14px!important;padding:10px 18px!important} .renew .hero-slide div[style*="width:256px"]{width:auto!important;font-size:14px!important;height:38px!important;padding:0 16px!important} /* 과정 카드 */ .renew #cScroll{ display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;gap:14px!important; padding-bottom:12px!important;grid-template-columns:none!important } .renew #cScroll::-webkit-scrollbar{display:none} .renew #cScroll{-ms-overflow-style:none;scrollbar-width:none} .renew #cScroll .c-card{ flex:0 0 85%!important;width:85%!important;height:auto!important;scroll-snap-align:center } .renew #cScroll .c-card .relative.overflow-hidden{width:100%!important;height:200px!important} .renew #cScroll .c-card img{width:100%!important} .renew #cScroll .c-card h5{font-size:17px!important;line-height:24px!important} .renew #cScroll .c-card p{font-size:16px!important} .renew #cScroll .c-card span[class*="font-medium"]{font-size:15px!important} .renew #cScroll .c-card .absolute span{font-size:12px!important;padding:4px 8px!important} /* 공지사항 섹션 */ .renew .notice-grid{grid-template-columns:1fr!important} .renew .notice-grid>div:first-child{padding:20px!important} .renew .notice-grid>.flex.flex-col{width:100%!important;padding:0!important} .renew .notice-grid>.flex.flex-col>a{height:auto!important} .renew .notice-grid a span[style*="max-width"]{max-width:calc(100vw - 140px)!important;font-size:15px!important} .renew .notice-grid strong[style*="color:#302E4D"]{font-size:14px!important} /* WHY HANKOOK */ .renew .sec4-wrap{padding:48px 0 52px!important} .renew .sec4-wrap .inner>.sr{align-items:center!important;text-align:center} .renew .sec4-wrap .inner>.sr>div:first-child{text-align:center} .renew .sec4-title{font-size:26px!important;line-height:36px!important} .renew .sec4-sub{font-size:16px!important} .renew .sec4-stats{gap:20px!important;flex-wrap:wrap;justify-content:center} .renew .sec4-stats p[style*="font-size:36px"]{font-size:28px!important;line-height:28px!important} .renew .sec4-stats p[style*="font-size:14px"]{font-size:13px!important} .renew .sec4-stats p[style*="font-size:24px"]{font-size:18px!important} .renew .why-card{padding:28px 20px!important} .renew .why-card h5{font-size:18px!important} .renew .why-card p{font-size:16px!important} /* 포토스토리 & 리뷰 */ .renew .sec5-title-eng{font-size:22px!important} .renew .sec5-title-kr{font-size:17px!important} /* 국비지원 */ .renew .sec6-title{font-size:28px!important;line-height:40px!important} .renew .sec6-sub-eng{font-size:15px!important} .renew .sec6-sub-desc{font-size:17px!important} .renew .sec6-pills{flex-wrap:wrap} .renew .sec6-pills>div{flex:1;min-width:100px;padding:16px 18px!important} .renew .sec6-pills p[style*="font-size:36px"]{font-size:28px!important} .renew .sec6-pills p[style*="font-size:22px"]{font-size:18px!important} .renew .sec6-pills p[style*="font-size:13px"]{font-size:12px!important} .renew .step-grid{grid-template-columns:1fr!important} .renew .step-grid h4{font-size:18px!important} .renew .step-grid p[style*="font-size:15px"]{font-size:14px!important} /* 파트너 */ .renew .sec7-title-eng{font-size:17px!important} .renew .sec7-title-kr{font-size:26px!important} .renew .partner-logo{max-height:42px!important;max-width:120px!important} /* 캠퍼스 안내 */ .renew .sec8-wrap{padding:48px 0 44px!important} .renew .sec8-title{font-size:28px!important;line-height:40px!important} .renew .sec8-sub{font-size:17px!important} .renew .campus-quick-btns{flex-direction:row;flex-wrap:wrap;width:100%;gap:8px!important} .renew .campus-quick-btns>*{width:100%!important;min-height:48px;justify-content:center;border-radius:10px!important} .renew .campus-quick-btns>div:first-child{width:100%!important;border-radius:10px!important;padding:20px!important;flex-direction:column;align-items:center;gap:8px!important} .renew .campus-quick-btns>div:first-child svg{width:26px!important;height:26px!important} .renew .campus-quick-btns>div:first-child>div{text-align:center} .renew .campus-quick-btns>div:first-child p:first-child{font-size:12px!important} .renew .campus-quick-btns>div:first-child p:last-child{font-size:22px!important} .renew .campus-quick-btns>a{flex:1!important;width:auto!important;min-width:0!important;border-radius:10px!important;padding:18px 16px!important;flex-direction:column!important;gap:6px!important} .renew .campus-quick-btns>a svg,.renew .campus-quick-btns>a img{width:26px!important;height:26px!important} .renew .campus-quick-btns>a span{font-size:14px!important} .renew .campus-grid{grid-template-columns:repeat(2,1fr)!important} .renew .campus-card h4{font-size:16px!important} .renew .campus-card p[style*="font-size:14px"]{font-size:14px!important} .renew .campus-card p[style*="font-size:19px"]{font-size:18px!important} /* CTA */ .renew .sec6-cta{flex-direction:column!important;text-align:center;gap:14px!important} .renew .sec6-cta p{font-size:16px!important} .renew .sec6-cta a{font-size:16px!important;width:100%;justify-content:center} /* 리뷰 카드 */ .renew .rv-card{padding:20px!important} .renew .rv-card p[style*="font-size:16px"]{font-size:16px!important;line-height:26px!important} .renew .rv-card .font-bold[style*="font-size:18px"]{font-size:18px!important} .renew .rv-card p[style*="font-size:14px"]{font-size:15px!important} } /* --- Small Mobile (480px 이하) --- */ @media(max-width:480px){ .renew .hero-slider{height:500px!important} .renew .hero-slide h1{font-size:26px!important;line-height:36px!important} .renew #cScroll .c-card{flex:0 0 90%!important;width:90%!important} .renew #cScroll .c-card .relative.overflow-hidden{height:180px!important} .renew #cScroll .c-card .p-\[24px\]{padding:14px!important} .renew #cScroll .c-card h5{font-size:14px!important} .renew .sec4-title{font-size:22px!important;line-height:32px!important} .renew .sec4-stats .w-\[1px\]{display:none} .renew .sec6-title,.renew .sec8-title{font-size:24px!important;line-height:34px!important} .renew .sec6-pills>div{padding:12px 14px!important} .renew .sec6-pills p[style*="font-size:36px"]{font-size:24px!important} .renew .campus-grid{grid-template-columns:1fr!important} .renew .campus-card{padding:18px!important} .renew .rv-card .flex.items-center{flex-wrap:wrap;gap:8px!important} .renew .sec7-title-kr{font-size:22px!important} } /* ============================================ [그룹 B] 교육과정 상세 페이지 — .renew 스코프 ============================================ */ /* ── Section Title (상세 공통) ── */ .renew .sec-title{font-size:clamp(32px,4.5vw,40px);font-weight:900;letter-spacing:-0.03em;line-height:1.2} .renew .sec-label{font-size:15px;font-weight:700;letter-spacing:0.15em;margin-bottom:12px;display:flex;align-items:center;gap:10px} .renew .sec-label::before{content:'';width:3px;height:18px;background:#5B8FFF;display:inline-block;flex-shrink:0} /* ── Hero Split ── */ .renew .hero-top { position: relative; overflow: visible; background: #42414E; } .renew .hero-bg-blur { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .renew .hero-bg-blur img{width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.45);transform:scale(1.15)} .renew .hero-top .inner{position:relative;z-index:2} .renew .hero-layout{display:flex;align-items:stretch;gap:0;min-height:464px} .renew .hero-layout .hero-text{flex:1;display:flex;align-items:center;padding:clamp(40px,6vw,150px) 0} .renew .hero-layout .hero-right-img{width:547px;flex-shrink:0;overflow:hidden} /* 변경 — 최대 높이 제한 추가 */ .renew .hero-layout{display:flex;align-items:stretch;gap:0;height:464px} .renew .hero-layout .hero-right-img{ width:547px;flex-shrink:0;overflow:hidden /* overflow:hidden이 핵심 */ } .renew .hero-layout .hero-right-img img{ width:100%;height:100%;object-fit:cover;display:block } @media(max-width:1279px){.renew .hero-layout .hero-right-img{width:42%}} /* ✅ 이걸로 교체 */ @media(max-width:1023px){ .renew .hero-layout{flex-direction:column;height:auto !important} .renew .hero-layout .hero-right-img{width:100%;height:280px} .renew .hero-layout .hero-text{padding:40px 0 !important} .renew .hero-layout .hero-text h1{font-size:28px !important;line-height:38px !important} } .renew .hero-infobar{background:#fff;position:relative;z-index:2} .renew .info-label{font-size:15px;font-weight:700;color:#5B8FFF;margin-bottom:4px} .renew .info-val{font-size:20px;font-weight:800;color:#1A1A2E;font-family:'Outfit','Noto Sans KR',sans-serif} /* ── Tab Bar ── */ .renew .tab-bar{position:sticky;top:70px;z-index:47;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(232,232,232,.7);border-left:none;border-right:none;transition:top .35s} .renew .tab-bar.gnb-hidden{top:0} .renew .tab-bar-inner{padding:6px 0} .renew .tab-btn{position:relative;padding:18px 24px;font-size:17px;font-weight:700;color:#888;cursor:pointer;transition:color .2s;white-space:nowrap;background:none;border:none} .renew .tab-btn::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:0;height:2px;background:#262161;transition:width .3s} .renew .tab-btn.active{color:#262161} .renew .tab-btn.active::after{width:60%} .renew .tab-btn:hover{color:#262161} .renew .tabs-scroll{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:center} .renew .tabs-scroll::-webkit-scrollbar{display:none} .renew .tab-bar-line{width:90%;max-width:1080px;height:1px;background:rgba(232,232,232,.6);margin:0 auto} /* ── Curriculum Vertical Tabs ── */ .renew .curr-vtab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:18px 24px;cursor:pointer;border:none;background:transparent;transition:all .25s;outline:none;border-bottom:1px solid rgba(255,255,255,.08)} .renew .curr-vtab .curr-num{font-size:15px;font-weight:800;font-family:'Outfit',sans-serif;color:rgba(255,255,255,.3);transition:color .25s;flex-shrink:0} .renew .curr-vtab .curr-label{font-size:16px;font-weight:700;color:rgba(255,255,255,.5);transition:color .25s;white-space:normal;line-height:1.5} .renew .curr-vtab.active{background:#DA2027} .renew .curr-vtab.active .curr-num{color:rgba(255,255,255,.7)} .renew .curr-vtab.active .curr-label{color:#fff} .renew .curr-vtab:not(.active):hover{background:rgba(255,255,255,.05)} .renew .curr-panel{animation:fadeTabIn .3s ease} @keyframes fadeTabIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}} .renew .curr-row{display:flex;align-items:flex-start;border-bottom:1px solid #e8e8e8} .renew .curr-row:last-child{border-bottom:none} .renew .curr-row-title{width:200px;flex-shrink:0;font-size:16px;font-weight:800;color:#1A1A2E;padding-right:24px;line-height:1.8} .renew .curr-row-items{flex:1;display:flex;flex-direction:column} .renew .curr-row-item{padding:10px 0;font-size:16px;color:#555;border-bottom:1px solid #f0f0f0;line-height:1.8} .renew .curr-row-item:last-child{border-bottom:none} @media(max-width:1023px){.renew .curr-vtab{padding:14px 20px;min-width:max-content}.renew .curr-vtab .curr-label{font-size:15px;white-space:nowrap}} @media(max-width:767px){.renew .curr-row{flex-direction:column;gap:8px}.renew .curr-row-title{width:100%}.renew .hero-infobar .grid{grid-template-columns:1fr !important;}} /* ── Curriculum Accordion ── */ .renew .acc-item{border-bottom:1px solid #e8e8e8} .renew .acc-btn{width:100%;display:flex;align-items:center;padding:24px 0;cursor:pointer;border:none;background:none;text-align:left;gap:16px;transition:opacity .2s} .renew .acc-btn:hover{opacity:.7} .renew .acc-num{font-size:15px;font-weight:800;font-family:'Outfit',sans-serif;color:#5B8FFF;flex-shrink:0;width:36px} .renew .acc-title-text{flex:1;font-size:18px;font-weight:800;color:#1A1A2E} .renew .acc-arrow{width:24px;height:24px;flex-shrink:0;transition:transform .3s;color:#999} .renew .acc-item.open .acc-arrow{transform:rotate(180deg)} .renew .acc-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.46,.45,.94)} .renew .acc-item.open .acc-body{max-height:600px} .renew .acc-inner{padding:0 0 28px 52px} .renew .acc-sub{font-size:16px;font-weight:800;color:#1A1A2E;margin-bottom:12px} .renew .acc-list{margin-bottom:20px} .renew .acc-list-item{padding:6px 0;font-size:16px;color:#666;line-height:1.8;padding-left:14px;position:relative} .renew .acc-list-item::before{content:'·';position:absolute;left:0;color:#5B8FFF;font-weight:800} /* ── Curriculum Desktop vs Mobile ── */ .renew .curr-mob{display:none} @media(max-width:767px){.renew .curr-desktop{display:none!important}.renew .curr-mob{display:block}} .renew .cm-item{border-bottom:1px solid rgba(255,255,255,.1)} .renew .cm-btn{width:100%;display:flex;align-items:center;padding:20px 0;cursor:pointer;border:none;background:none;text-align:left;gap:14px} .renew .cm-btn .cm-num{font-size:15px;font-weight:800;font-family:'Outfit',sans-serif;color:rgba(255,255,255,.35);flex-shrink:0;transition:color .3s} .renew .cm-btn .cm-title{flex:1;font-size:16px;font-weight:700;color:rgba(255,255,255,.55);transition:color .3s} .renew .cm-btn .cm-arrow{width:20px;height:20px;flex-shrink:0;transition:transform .3s;color:rgba(255,255,255,.3)} .renew .cm-item.open{border-left:4px solid #DA2027;padding-left:16px} .renew .cm-item.open .cm-num{color:#DA2027} .renew .cm-item.open .cm-title{color:#fff} .renew .cm-item.open .cm-arrow{transform:rotate(180deg);color:#DA2027} .renew .cm-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.46,.45,.94)} .renew .cm-item.open .cm-body{max-height:800px} .renew .cm-inner{background:#fff;padding:clamp(16px,3vw,24px);margin:4px 0 12px} /* ── Gallery ── */ .renew .asym-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:240px 240px;gap:8px} .renew .asym-grid .g-main{grid-row:1/3;overflow:hidden;position:relative} .renew .asym-grid .g-main img,.renew .asym-grid .g-sm img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s} .renew .asym-grid .g-sm{overflow:hidden;position:relative} .renew .asym-grid .g-main:hover img,.renew .asym-grid .g-sm:hover img{transform:scale(1.05)} @media(max-width:767px){.renew .asym-grid{grid-template-columns:1fr;grid-template-rows:280px 180px 180px}.renew .asym-grid .g-main{grid-row:auto}} /* ── Counter / Stats ── */ .renew .counter-val{font-family:'Outfit','Noto Sans KR',sans-serif;font-weight:800} .renew .stat-num{font-size:clamp(48px,6vw,64px);font-family:'Outfit','Noto Sans KR',sans-serif;font-weight:900;line-height:1} /* ── Glow Card ── */ .renew .glow-card{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:transform .3s,box-shadow .3s} .renew .glow-card::before{content:'';position:absolute;top:var(--y,50%);left:var(--x,50%);width:280px;height:280px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(91,143,255,.2) 0%,transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:0} .renew .glow-card:hover::before{opacity:1} .renew .glow-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(91,143,255,.1)} .renew .glow-card>*{position:relative;z-index:2} @keyframes glowSweep{0%{left:-30%;top:50%;opacity:0}15%{opacity:.8}50%{left:50%;top:40%;opacity:.6}85%{opacity:.8}100%{left:130%;top:50%;opacity:0}} @media(max-width:1023px){ .renew .glow-card:hover::before{opacity:0} .renew .glow-card:hover{transform:none;box-shadow:none} .renew .inst-card.v::before{animation:glowSweep 1.8s cubic-bezier(.25,.46,.45,.94) forwards;width:200px;height:200px;background:radial-gradient(circle,rgba(91,143,255,.25) 0%,rgba(218,32,39,.08) 40%,transparent 70%)} .renew .inst-card.sr-d1.v::before{animation-delay:0s} .renew .inst-card.sr-d2.v::before{animation-delay:.2s} .renew .inst-card.sr-d3.v::before{animation-delay:.4s} .renew .inst-card.sr-d4.v::before{animation-delay:.6s} .renew .inst-card.v{transform:translateY(-2px);box-shadow:0 8px 30px rgba(91,143,255,.08);transition:transform .6s,box-shadow .6s} } /* ── Instructor ── */ .renew .inst-circle{width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.12);flex-shrink:0;transition:border-color .3s} .renew .inst-circle img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15);transition:filter .3s} .renew .inst-card{text-align:center} .renew .inst-card .inst-circle{margin:0 auto 20px} @media(max-width:768px){ .renew .inst-grid{grid-template-columns:1fr!important;gap:12px!important} .renew .inst-card{display:flex!important;align-items:center;gap:20px;text-align:left!important;padding:20px!important} .renew .inst-card .inst-circle{margin:0!important;width:72px;height:72px;flex-shrink:0} .renew .inst-card .inst-info{flex:1;min-width:0} } /* ── Form Input ── */ .renew .form-input{width:100%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);color:#fff;font-size:16px;padding:16px 20px;outline:none;transition:border .2s;font-family:'Noto Sans KR',sans-serif} .renew .form-input::placeholder{color:rgba(255,255,255,.35)} .renew .form-input:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)} /* ── Animations (상세) ── */ @keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.6}} .renew .pulse-badge{animation:pulse-badge 2s ease-in-out infinite} @keyframes glowLine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .renew .glow-line{height:2px;background:linear-gradient(90deg,transparent,#5B8FFF,transparent);background-size:200% 100%;animation:glowLine 3s ease infinite} /* ============================================ [그룹 B] 커뮤니티 페이지 — .renew 스코프 ============================================ */ /* ── Page Hero Banner ── */ .renew .page-hero{position:relative;overflow:hidden;background:#262161;padding:clamp(60px,8vw,100px) 0} .renew .page-hero .bg-blur{position:absolute;inset:0} .renew .page-hero .bg-blur img{width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.45);transform:scale(1.15)} /* ── Sub Tabs ── */ .renew .sub-tab{font-size:16px;font-weight:700;color:#999;padding:16px 28px;position:relative;transition:color .2s;cursor:pointer;white-space:nowrap} .renew .sub-tab.active{color:#262161} .renew .sub-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:#262161} .renew .sub-tab:hover{color:#262161} /* ── Notice Table ── */ .renew .notice-row{display:grid;grid-template-columns:80px 1fr 120px;align-items:center;padding:20px 0;border-bottom:1px solid #f0f0f0;transition:background .15s;cursor:pointer} .renew .notice-row:hover{background:#fafafe} .renew .notice-row .n-num{font-size:15px;font-weight:600;color:#bbb;text-align:center;font-family:'Outfit',sans-serif} .renew .notice-row .n-title{font-size:16px;font-weight:600;color:#1A1A2E;display:flex;align-items:center;gap:10px} .renew .notice-row .n-title .n-tag{font-size:13px;font-weight:700;padding:2px 10px;flex-shrink:0} .renew .notice-row .n-date{font-size:15px;color:#bbb;text-align:right;font-family:'Outfit',sans-serif} .renew .notice-head{display:grid;grid-template-columns:80px 1fr 120px;padding:16px 0;border-bottom:2px solid #262161;font-size:15px;font-weight:800;color:#262161} @media(max-width:767px){ .renew .notice-head{display:none} .renew .notice-row{grid-template-columns:1fr;gap:6px;padding:18px 0} .renew .notice-row .n-num{display:none} .renew .notice-row .n-date{text-align:left;font-size:15px} } /* ── Review Card ── */ .renew .review-card{padding:32px 0;border-bottom:1px solid #f0f0f0;transition:background .15s} .renew .review-card:first-child{border-top:2px solid #262161} .renew .review-card:hover{background:#fafafe} .renew .review-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px} .renew .review-name{font-size:16px;font-weight:800;color:#1A1A2E;display:flex;align-items:center;gap:10px} .renew .review-course-tag{font-size:14px;font-weight:700;color:#3A4FC9;padding:2px 12px;background:#f0f2f8;display:inline-flex;align-items:center;gap:4px} .renew .review-date{font-size:15px;color:#bbb;font-family:'Outfit',sans-serif;display:flex;align-items:center;gap:5px} .renew .review-body{font-size:16px;color:#555;line-height:1.9} .renew .review-stars{display:flex;gap:2px} .renew .review-stars svg{width:16px;height:16px;fill:#FFB800} .renew .review-write-btn{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800;color:#fff;background:#DA2027;padding:12px 28px;transition:opacity .2s;cursor:pointer;border:none} .renew .review-write-btn:hover{opacity:.85} @media(max-width:767px){ .renew .review-header{flex-direction:column;align-items:flex-start;gap:6px} .renew .review-card{padding:24px 0} } /* ── Pagination ── */ .renew .pg-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#999;border:1px solid #e8e8e8;transition:all .2s;font-family:'Outfit',sans-serif} .renew .pg-btn:hover{border-color:#262161;color:#262161} .renew .pg-btn.active{background:#262161;color:#fff;border-color:#262161} .renew .pg-arrow{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #e8e8e8;color:#ccc;transition:all .2s} .renew .pg-arrow:hover{border-color:#262161;color:#262161} @media(max-width:768px){ .renew .pg-btn,.renew .pg-arrow{width:36px;height:36px;font-size:14px} .renew .pg-arrow svg{width:15px;height:15px} .renew .paging-wrap{gap:3px;flex-wrap:wrap} .renew .paging-wrap a,.renew .paging-wrap strong{min-width:36px;height:36px;padding:0 8px;font-size:14px} .renew .search-wrap{max-width:100%} .renew .search-select{width:90px;padding:10px 12px;font-size:14px} .renew .search-input{padding:10px 12px;font-size:14px} } @media(max-width:480px){ .renew .pg-btn,.renew .pg-arrow{width:32px;height:32px;font-size:13px} .renew .pg-arrow svg{width:13px;height:13px} .renew .paging-wrap{gap:2px} .renew .paging-wrap a,.renew .paging-wrap strong{min-width:32px;height:32px;padding:0 5px;font-size:13px} } /* ── Search ── */ .renew .search-wrap{display:flex;gap:0;max-width:480px;margin:0 auto} .renew .search-select{padding:4px 32px 4px 16px;border:1.5px solid #e8e8e8;border-right:none;font-size:15px;font-weight:600;color:#1A1A2E;background:#fff url("data:image/svg+xml,%3Csvg fill='none' stroke='%23999' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;outline:none;appearance:none;cursor:pointer;width:120px;font-family:'Noto Sans KR',sans-serif} .renew .search-input{flex:1;padding:4px 16px;border:1.5px solid #e8e8e8;border-right:none;font-size:15px;outline:none;font-family:'Noto Sans KR',sans-serif} .renew .search-input::placeholder{color:#ccc} .renew .search-input:focus{border-color:#262161} .renew .search-btn{width:52px;display:flex;align-items:center;justify-content:center;background:#262161;border:none;cursor:pointer;transition:opacity .2s} .renew .search-btn:hover{opacity:.85} /* ── CTA Bar ── */ .renew .community-cta{background:#262161;padding:48px 0} /* ── Paging (ASP) ── */ .renew .paging-wrap{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:48px} .renew .paging-wrap a{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;font-size:15px;font-weight:600;color:#999;border:1px solid #e8e8e8;transition:all .2s;font-family:'Outfit','Noto Sans KR',sans-serif;text-decoration:none} .renew .paging-wrap a:hover{border-color:#262161;color:#262161} .renew .paging-wrap strong{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;font-size:15px;font-weight:700;background:#262161;color:#fff;border:1px solid #262161;font-family:'Outfit','Noto Sans KR',sans-serif} /* ============================================ [그룹 B] 국비제도안내 페이지 — .renew 스코프 ============================================ */ /* ── Section Title ── */ .renew .sup-sec-title{font-size:28px;font-weight:900;color:#1A1A2E;letter-spacing:-0.02em} .renew .sup-sec-label{font-size:32px;font-weight:900;color:#262161;display:flex;align-items:center;gap:12px} .renew .sup-sec-label::before{content:'';width:5px;height:28px;background:#5B8FFF;display:inline-block;flex-shrink:0} /* ── Intro Split ── */ .renew .intro-split{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:460px;overflow:hidden;position:relative} .renew .intro-img{position:relative;overflow:hidden} .renew .intro-img img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease} .renew .intro-img:hover img{transform:scale(1.04)} .renew .intro-img .img-overlay{display:none} .renew .intro-text{display:flex;flex-direction:column;justify-content:center;padding:52px 56px;background:#fff;position:relative} .renew .intro-text::before{content:'';position:absolute;right:-1px;top:20%;height:60%;width:4px;background:linear-gradient(180deg,#5B8FFF,#262161)} .renew .intro-deco{position:absolute;top:24px;right:32px;display:flex;gap:4px} .renew .intro-deco span{width:3px;height:28px;background:#e8e8e8} .renew .intro-deco span:nth-child(2){background:#5B8FFF;height:20px;margin-top:8px} .renew .intro-deco span:nth-child(3){background:#262161;height:24px;margin-top:4px} @media(max-width:767px){ .renew .intro-split{grid-template-columns:1fr;min-height:auto} .renew .intro-img{height:320px} .renew .intro-text{padding:36px 24px} .renew .intro-text::before{display:none} } /* ── BG Decorations ── */ .renew .bg-dots{position:absolute;width:180px;height:180px;opacity:.04;background-image:radial-gradient(circle,#262161 1.5px,transparent 1.5px);background-size:18px 18px;pointer-events:none} .renew .bg-stripe{position:absolute;width:300px;height:300px;opacity:.025;pointer-events:none;background:repeating-linear-gradient(45deg,#262161,#262161 1px,transparent 1px,transparent 12px)} .renew .bg-circle-deco{position:absolute;border-radius:50%;pointer-events:none;border:2px solid rgba(91,143,255,.08)} .renew .bg-gradient-accent{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(100px);opacity:.06;pointer-events:none} /* ── Benefit Infographic ── */ .renew .benefit-layout{display:flex;align-items:center;gap:24px} .renew .benefit-capsule{display:flex;align-items:center;gap:0;background:#e8ecf4;border-radius:999px;padding:28px 36px;flex-shrink:0;position:relative} .renew .benefit-bubble{width:180px;height:180px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;box-shadow:0 2px 20px rgba(38,33,97,.06);padding:0 12px} .renew .benefit-bubble-label{font-size:15px;font-weight:700;color:#5B8FFF;margin-bottom:2px;width:100%;text-align:center} .renew .benefit-bubble-num{font-family:'Outfit','Noto Sans KR',sans-serif;font-size:34px;font-weight:900;color:#262161;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;width:100%;text-align:center;display:flex;align-items:baseline;justify-content:center;gap:2px} .renew .benefit-bubble-num .b-unit{font-size:17px;font-weight:800} .renew .benefit-bubble-desc{font-size:14px;font-weight:600;color:#999;margin-top:4px;width:100%;text-align:center} .renew .countup{display:inline-block;min-width:2.2ch;text-align:center} .renew .benefit-capsule-plus{font-family:'Outfit',sans-serif;font-size:28px;font-weight:300;color:rgba(38,33,97,.25);width:40px;text-align:center;flex-shrink:0} .renew .benefit-eq{font-family:'Outfit',sans-serif;font-size:40px;font-weight:900;color:#262161;flex-shrink:0;width:48px;text-align:center} .renew .benefit-results{display:flex;align-items:stretch;gap:16px;flex:1} .renew .benefit-result-card{flex:1;background:#fff;border:3px solid #262161;border-radius:24px;padding:40px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;transition:transform .3s,box-shadow .3s} .renew .benefit-result-card:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(38,33,97,.1)} .renew .benefit-result-card.accent{border-color:#DA2027} .renew .benefit-result-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative} .renew .benefit-result-icon::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px dashed rgba(91,143,255,.15)} .renew .benefit-result-card.accent .benefit-result-icon::after{border-color:rgba(218,32,39,.12)} .renew .benefit-result-label{font-size:16px;font-weight:700;color:#262161;margin-bottom:6px} .renew .benefit-result-card.accent .benefit-result-label{color:#DA2027} .renew .benefit-result-num{font-family:'Outfit','Noto Sans KR',sans-serif;font-size:clamp(34px,4vw,44px);font-weight:900;color:#262161;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap} .renew .benefit-result-card.accent .benefit-result-num{color:#DA2027} .renew .benefit-result-unit{font-size:18px;font-weight:800;margin-left:2px} .renew .benefit-results-plus{font-family:'Outfit',sans-serif;font-size:28px;font-weight:300;color:#ccc;flex-shrink:0;display:flex;align-items:center} @media(max-width:1100px){ .renew .benefit-layout{flex-wrap:wrap;gap:0;justify-content:center} .renew .benefit-capsule{flex-shrink:1} .renew .benefit-eq{width:100%;text-align:center;padding:12px 0} .renew .benefit-results{min-width:280px;width:100%} } @media(max-width:680px){ .renew .benefit-layout{flex-direction:column;gap:0;align-items:stretch} .renew .benefit-capsule{border-radius:28px;padding:24px 16px;justify-content:center;gap:0} .renew .benefit-bubble{width:140px;height:140px;padding:0 8px} .renew .benefit-bubble-num{font-size:26px} .renew .benefit-bubble-num .b-unit{font-size:14px} .renew .benefit-bubble-label{font-size:13px} .renew .benefit-capsule-plus{width:30px;font-size:24px} .renew .benefit-eq{font-size:28px;text-align:center;width:100%;padding:10px 0} .renew .benefit-results{flex-direction:column;gap:10px} .renew .benefit-result-card{min-height:160px;padding:28px 20px} .renew .benefit-results-plus{justify-content:center;font-size:22px;padding:4px 0} } /* ── Target Cards ── */ .renew .target-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .renew .target-card{background:#fff;border:1.5px solid #f0f0f0;text-align:center;overflow:hidden;transition:all .3s;padding:44px 24px 40px} .renew .target-card:hover{border-color:#262161;box-shadow:0 8px 30px rgba(38,33,97,.08);transform:translateY(-3px)} .renew .target-circle{width:120px;height:120px;border-radius:50%;background:linear-gradient(145deg,#eaecf5 0%,#d8dced 100%);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;position:relative;overflow:hidden} .renew .target-circle img{width:100%;height:100%;object-fit:contain} .renew .target-circle::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px dashed rgba(91,143,255,.15)} .renew .target-info h4{font-size:18px;font-weight:800;color:#1A1A2E;margin-bottom:10px;line-height:1.4} .renew .target-info p{font-size:15px;color:#888;line-height:1.7} @media(max-width:900px){.renew .target-grid{grid-template-columns:repeat(2,1fr);gap:16px}} @media(max-width:500px){.renew .target-grid{grid-template-columns:1fr;gap:14px}} /* ── Circle Benefits ── */ .renew .circle-benefits{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} .renew .circle-benefit{width:200px;height:200px;border-radius:50%;background:linear-gradient(145deg,#e8ecf4 0%,#d4d9ea 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;position:relative;transition:transform .3s,box-shadow .3s} .renew .circle-benefit:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(38,33,97,.12)} .renew .circle-benefit .cb-tag{font-size:13px;font-weight:800;color:#fff;background:#262161;padding:2px 14px;border-radius:20px;margin-bottom:8px;display:inline-block} .renew .circle-benefit .cb-tag.dual{background:#5B8FFF} .renew .circle-benefit .cb-title{font-size:16px;font-weight:800;color:#1A1A2E;line-height:1.4;margin-bottom:2px} .renew .circle-benefit .cb-num{font-family:'Outfit','Noto Sans KR',sans-serif;font-size:20px;font-weight:900;color:#262161} .renew .circle-sep{font-family:'Outfit',sans-serif;font-size:28px;color:#ccc;font-weight:300;flex-shrink:0} @media(max-width:900px){.renew .circle-benefits{gap:16px}.renew .circle-benefit{width:160px;height:160px;padding:12px}.renew .circle-benefit .cb-title{font-size:14px}.renew .circle-benefit .cb-num{font-size:17px}.renew .circle-benefit .cb-tag{font-size:12px}} @media(max-width:500px){.renew .circle-benefits{flex-direction:column;gap:12px}.renew .circle-benefit{width:180px;height:180px}.renew .circle-sep{transform:rotate(90deg)}} /* ── Target Detail ── */ .renew .target-detail{background:#f9f9fb;border-left:4px solid #262161;padding:36px 40px;margin-bottom:24px} .renew .target-detail h4{font-size:18px;font-weight:900;color:#262161;margin-bottom:12px} .renew .target-detail h5{font-size:17px;font-weight:800;color:#1A1A2E;margin:16px 0 8px} .renew .target-detail p,.renew .target-detail li{font-size:16px;color:#555;line-height:1.9} .renew .target-detail ul{list-style:none;padding:0} .renew .target-detail ul li{padding:4px 0 4px 16px;position:relative} .renew .target-detail ul li::before{content:'·';position:absolute;left:0;color:#5B8FFF;font-weight:800;font-size:18px} .renew .target-note{font-size:15px;color:#999;line-height:1.8;padding:16px 0 16px 20px;position:relative} .renew .target-note::before{content:'*';position:absolute;left:6px;color:#5B8FFF} /* ── Step Timeline ── */ .renew .step-timeline{display:flex;align-items:flex-start;position:relative;padding:0 20px} .renew .step-timeline::before{content:'';position:absolute;top:48px;left:calc(10% + 48px);right:calc(10% + 48px);height:2.5px;background:linear-gradient(90deg,#e8e8e8 0%,#262161 50%,#DA2027 100%)} .renew .step-item{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1} .renew .step-circle{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2.5px solid #e8e8e8;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;margin-bottom:20px} .renew .step-circle .step-num{font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;color:#fff;background:#262161;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:-4px;right:-4px} .renew .step-item.active .step-circle{border-color:#262161;background:#262161;box-shadow:0 6px 28px rgba(38,33,97,.25)} .renew .step-item.active .step-circle svg{color:#fff !important} .renew .step-item:last-child .step-circle{border-color:#DA2027;background:#DA2027;box-shadow:0 6px 28px rgba(218,32,39,.25)} .renew .step-item:last-child .step-circle svg{color:#fff !important} .renew .step-item:last-child .step-circle .step-num{background:#DA2027} .renew .step-title{font-size:17px;font-weight:800;color:#1A1A2E;margin-bottom:4px;line-height:1.5} @media(max-width:767px){ .renew .step-timeline{flex-direction:column;gap:0;padding:0;align-items:stretch} .renew .step-timeline::before{display:none} .renew .step-item{flex-direction:row;text-align:left;gap:20px;padding:24px 20px 24px 0;border-left:2.5px solid #e8e8e8;margin-left:38px;padding-left:32px;align-items:center} .renew .step-item:last-child{border-left-color:#DA2027} .renew .step-item::before{display:none} .renew .step-circle{display:flex;width:76px;height:76px;flex-shrink:0;margin-bottom:0;position:relative;left:-72px;margin-right:-48px} .renew .step-circle svg{width:32px !important;height:32px !important} .renew .step-circle .step-num{width:24px;height:24px;font-size:13px;top:-3px;right:-3px} .renew .step-title{font-size:18px;flex:1} } /* ── CTA Button ── */ .renew .btn-outline{display:inline-flex;align-items:center;gap:8px;padding:15px 34px;border:2px solid #262161;font-size:17px;font-weight:800;color:#262161;transition:all .25s;position:relative;overflow:hidden} .renew .btn-outline::before{content:'';position:absolute;inset:0;background:#262161;transform:translateX(-101%);transition:transform .3s ease} .renew .btn-outline:hover{color:#fff} .renew .btn-outline:hover::before{transform:translateX(0)} .renew .btn-outline span,.renew .btn-outline svg{position:relative;z-index:1} /* ── 홍보 배너 ── */ .renew .banner-promo{flex:1;min-height:134px;display:block} .renew .banner-promo img{width:100%;height:100%;object-fit:cover} @media(max-width:768px){ .renew .banner-promo{flex:none;height:auto;min-height:0} .renew .banner-promo img{height:auto;object-fit:contain} } /* 상담 폼 select 화살표 */ .renew select.form-input{ appearance: none !important; -webkit-appearance: none !important; padding-right: 40px !important; background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 16px !important; } /* 상담 폼 select 옵션 글자색 + 너비 통일 */ .renew select.form-input option{ color: #333 !important; background: #fff !important; } .renew select.form-input{ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 상담 폼 동의 박스 스타일 제거 */ .renew .agreebox{ background: transparent !important; border: none !important; padding-top: 30px; } /* ============================================ 기존 layout.css 충돌 방지 (리뉴얼 전용) ============================================ */ /* ── 전체 레이아웃: 사이드바 구조 해제 ── */ body { background: #fff !important; } #wrap { background: #fff !important; display: block !important; overflow: visible !important; } #container { width: 100% !important; float: none !important; background: #fff !important; margin-top: 0 !important; } #content { background: #fff !important; } /* ── 기존 좌측 사이드바 숨김 ── */ #fixedSidebar { display: none !important; } /* ── 기존 #header, #nav, #gnb 숨김 (리뉴얼 헤더 사용) ── */ #header { display: none !important; } #nav { display: none !important; } #gnb { display: none !important; } #siteMap { display: none !important; } /* ── 기존 #rightquick 숨김 (리뉴얼 .quick-float 사용) ── */ #rightquick { display: none !important; } /* ── 기존 #footer 숨김 (리뉴얼 푸터 사용) ── */ #footer { display: none !important; } #footerBtn { display: none !important; } /* ── 기존 .inner 충돌 방지 ── */ .top-bar .inner { width: 100% !important; max-width: 1180px !important; float: none !important; } header#hdr .inner { width: 100% !important; max-width: 1180px !important; float: none !important; } /* ── 기존 select/input 글로벌 스타일 방지 ── */ .form-input { min-width: 0 !important; margin: 0 !important; height: auto !important; } #form select { min-width: 0 !important; margin: 0 !important; } /* 기존 서브페이지 .inner 패딩 충돌 방지 */ #whyHankook ul.inner { padding: 0; } #aboutAcademy .inner { padding: 0; } #jobConsulting .inner .job-center { padding: 0; } #whyHankook ul li:nth-of-type(2n+1) { clear: left; } /* 모바일: 로고를 GNB 바 가운데 배치 */ .gnb-logo { display: none; } @media(max-width:1023px){ header#hdr { display: none !important; } /* 데스크톱 그리드 해제 → flex 복원 */ .sticky.top-0 > .inner{ display: flex !important; align-items: center !important; } .gnb-logo { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 45px; background: url(/images/common/renewal/logo.png) 50% 50% no-repeat; background-size: auto 25px; text-indent: -9999em; } #mobBtn { width: 40px !important; height: 40px !important; margin-left: -8px; } #mobBtn img { width: 20px !important; height: 20px !important; } } /* 서브페이지 탭메뉴 가로 스크롤 */ #subMenuBar { width: 100vw !important; margin-left: calc(-50vw + 50%) !important; padding: 0 !important; } #subMenuBar ul { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; justify-content: center; padding: 0 !important; margin: 0 !important; } #subMenuBar ul li { float: none !important; flex-shrink: 0 !important; white-space: nowrap !important; } #subMenuBar ul::-webkit-scrollbar { display: none; } #subMenuBar .inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; } #subMenuBar ul.submenuw01 { width: auto !important; min-width: 100% !important; } /* 리뉴얼 페이지 폼 요소 충돌 방지 */ .search-wrap select, .search-wrap input[type="text"] { min-width: 0 !important; margin: 0 !important; height: auto !important; box-sizing: border-box !important; } /* 수강후기 등록 버튼 오른쪽 정렬 */ .search-wrap { position: relative; } .review-write-btn { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; } /* 강사소개 리스트 가운데 정렬 */ ul.academy-teacher { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; /* ★ 여기를 다시 center로 돌려놓기! */ float: none !important; width: 100% !important; } ul.academy-teacher li{ float:none !important; } ul.academy-teacher li:nth-of-type(4n+4) { margin-right: 40px !important; } /* 모바일 화면에서 강사 리스트 2열 배치 설정 */ @media screen and (max-width: 768px) { /* 부모 컨테이너 설정 (기존과 동일하게 유지) */ ul.academy-teacher { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; float: none !important; width: 100% !important; } /* 자식 li 요소 설정 (선택자를 조금 더 강력하게!) */ #subTeacher .inner ul.academy-teacher li { width: 48% !important; /* 안전하게 48%로 설정 */ margin: 0 0 30px 0 !important; /* ★ 핵심: 좌, 우, 위 여백을 0으로 강제 초기화! (아래 여백만 30px) */ clear: none !important; /* 혹시 모를 PC용 줄바꿈(clear) 속성 무력화 */ } } /* 강사소개 모달 스크롤 */ .teacherDim .teacherPop .teacherCareer{ max-height:300px !important; overflow-y:auto !important; } .teacherDim .teacherPop .teacherCareer::-webkit-scrollbar{ width:6px !important; } .teacherDim .teacherPop .teacherCareer::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3) !important; border-radius:3px !important; } .teacherDim .teacherPop .teacherCareer::-webkit-scrollbar-track{ background:rgba(255,255,255,.1) !important; } @media screen and (max-width: 768px) { .teacherDim .teacherPop { width: 95%; height: auto; overflow: hidden; margin: 0; top: auto; bottom: 80px; /* ★ 0이었던 값을 80px로 수정해 보세요! ★ */ left: 2.5%; } } /* 검색창 너비 통일 */ .search-wrap { max-width: 480px !important; width: 480px !important;} /* 제휴문의 카드 가로 정렬 */ ul.contact-ico-area{ display:flex !important; flex-wrap:nowrap !important; justify-content:center !important; width:100% !important; max-width:1180px !important; margin:0 auto 70px !important; } ul.contact-ico-area li{ float:none !important; flex:1 !important; } /* 테이블 캡션 숨김 (기존 사이트 동일) */ caption{ display:none !important; } /* 제휴문의 폼 인풋 패딩 + 글자크기 + 폰트 통일 */ #contact_list input[type="text"], #contact_list textarea{ padding:0 12px !important; font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } #contact_list input[type="text"]::placeholder, #contact_list textarea::placeholder{ font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } /* 제휴문의 문의사항 영역 */ .content-box label, .content-box textarea{ font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } .content-box textarea{ padding:12px !important; } .content-box textarea::placeholder{ font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } /* 제휴문의 테이블 너비 조절 */ #contact_list{ width:100% !important; max-width:700px !important; } #contact_list th{ width:120px !important; } #contact_list input[type="text"]{ width:100% !important; min-width:0 !important; } /* 채용정보 테이블 전체 너비 */ .table-board-job{ width:100% !important; } .table-board-header{ width:100% !important; } /* 취업상담 폼 스타일 */ #counsel_list{ width:100% !important; } #counsel_list th label{ font-size:16px !important; } #counsel_list input[type="text"], #counsel_list select{ padding:0 12px !important; font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } #counsel_list input[type="text"]::placeholder{ font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } /* 취업상담 문의사항 영역 */ .counsel-table .content-box label, .counsel-table .content-box textarea{ font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } .counsel-table .content-box textarea{ padding:12px !important; } .counsel-table .content-box textarea::placeholder{ font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } /* 취업상담 입력폼 + 셀렉트 너비 통일 */ #counsel_list input[type="text"], #counsel_list select{ width:574px !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } /* 제휴문의 + 취업연계신청 폼 스타일 (취업상담과 통일) */ #contact_list{ width:100% !important; } #contact_list th{ width:170px !important; } #contact_list th label{ font-size:16px !important; } #contact_list input[type="text"]{ width:574px !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding:0 12px !important; font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } #contact_list input[type="text"]::placeholder{ font-size:16px !important; font-family:'Noto Sans KR',sans-serif !important; } /* 제휴문의 + 취업연계신청 폼 스타일 */ #contact_list, .counsel-table #contact_list{ width:100% !important; max-width:100% !important; } /* 공지사항 상세 테이블 + 이전/다음글 + 목록버튼 */ .table-board-view{ width:100% !important; } .prev_next{ width:100% !important; } /* 공지사항 상세 — 목록버튼 */ .full-btn-g.table-btn{ margin:0 auto !important; padding:0 50px !important; white-space:nowrap !important; } /* 모바일 페이지네이션 줄바꿈 방지 */ @media(max-width:768px){ .paging-wrap { flex-wrap: wrap !important; gap: 4px !important; } .pg-btn, .pg-arrow { width: 32px !important; height: 32px !important; font-size: 13px !important; } /* 검색창 모바일 */ .search-wrap { max-width: 100% !important; width: 100% !important; } /* 수강후기: 검색 + 버튼 세로 배치 */ .review-write-btn { position: static !important; transform: none !important; width: 100% !important; justify-content: center !important; margin-top: 12px !important; } /* 포토스토리 검색폼만 패딩 */ #photoGallery ~ .mt-10 form#fmPaging, section > .inner > .mt-10 > form#fmPaging { padding: 0 !important; } .sub-tab { padding: 14px 16px !important; font-size: 14px !important; flex-shrink: 0 !important; white-space: nowrap !important; } /* 공지사항 상세 — 모바일 대응 */ .table-board-view, .prev_next{ table-layout:fixed !important; word-break:break-all !important; } .prev_next td{ max-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } } /* GNB 바 레이아웃 */ .sticky.top-0 > .inner{ position: relative; } /* GNB 바 — 데스크톱 그리드 센터 정렬 */ @media(min-width:1024px){ .sticky.top-0 > .inner{ display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; } .sticky.top-0 > .inner > div:last-of-type{ justify-self: end !important; } nav#gnbNav{ margin-left: -100px; } } /* 4월 2일 클래스명 정리 */ /* ── Top Bar ── */ .top-bar { background: #262161; color: #fff; } .top-bar .inner { display: flex; align-items: center; justify-content: space-between; height: 45px; } .top-bar .campus-list { display: flex; align-items: center; } .top-bar .campus-list li a { display: inline-flex; align-items: center; height: 45px; padding: 0 15px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.6); transition: color .2s; } .top-bar .campus-list li.on a { font-weight: 700; color: #262161; background: #fff; } .top-bar .campus-list li a:hover { color: rgba(255,255,255,0.9); } .top-bar .top-contact { display: flex; align-items: center; gap: 16px; } .top-bar .top-contact a { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.6); transition: color .2s; } .top-bar .top-contact a:hover { color: rgba(255,255,255,0.9); } .top-bar .campus-list li.on a:hover { color: #262161; } .top-bar .top-contact .tel strong { color: #fff; font-weight: 700; } @media(max-width:768px) { .top-bar { display: none !important; } } /* ── Header ── */ #hdr { background: #fff; } .hdr-inner { display: flex; align-items: center; justify-content: center; height: 94px; } /* ── GNB BAR ── */ .gnb-bar { background: #fff; position: sticky; top: 0; z-index: 50; } .gnb-inner { display: flex; align-items: center; height: 70px; position: relative; } #gnbNav { display: flex; align-items: center; } .gnb-a { font-size: 18px; font-weight: 800; color: #15161B; padding: 6px 12px; letter-spacing: -0.01em; white-space: nowrap; } #mobBtn { width: 50px; height: 50px; flex-shrink: 0; } #mobBtn img { margin-top: 3px; } /* ── GNB 데스크탑 센터 정렬 ── */ @media (min-width: 1024px) { .gnb-inner { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; } #gnbNav { justify-content: center; } .gnb-right { justify-self: end; } } /* ── GNB 우측 버튼 ── */ .gnb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .inquiry-btn { font-size: 14px; font-weight: 700; color: #262161; } .tuition-btn { font-size: 15px; font-weight: 700; color: #fff; background: #262161; padding: 12px 22px; border-radius: 4px; } .tuition-btn:hover { opacity: .9; } /* ── Mega Link 타이틀/설명 ── */ .mega-link-title { color: #243256; font-size: 16px; font-weight: 700; display: block; margin-bottom: 5px; white-space: nowrap; } .mega-link-desc { color: #9CA3AF; font-size: 14.5px; font-weight: 400; white-space: nowrap; } .mega-4col-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .mega-5col-grid { display: grid; grid-template-columns: repeat(5, 1fr); } #mobOvl { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9998; display: none;} #mobOvl.hidden { display: none; } @media (min-width: 1024px) { .inquiry-btn { display: none; } } /* ── 모바일 ── */ @media (max-width: 1023px) { #hdr { display: none; } #gnbNav { display: none; } .tuition-btn { display: none; } .inquiry-btn { display: inline-flex; } } /* mob-menu 풀 높이 */ .mob-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 100%; background: #fff; box-shadow: 0 0 30px rgba(0,0,0,.15); overflow-y: auto; transform:translateX(100%);transition:transform .3s ease;z-index:10000} .mob-menu.open{transform:translateX(0)} .mob-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #f0f0f0; } .mob-menu-title { font-size: 18px; font-weight: 800; color: #1A1A2E; } .mob-nav { padding: 16px; display: flex; flex-direction: column; } .mob-nav-link { padding: 14px 16px; font-size: 18px; font-weight: 800; color: #1A1A2E; border-bottom: 1px solid #f0f0f0; } .mob-nav-link:hover { background: #f8f9fb; } .mob-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 18px; font-weight: 800; color: #1A1A2E; border-bottom: 1px solid #f0f0f0; text-align: left; } .mob-tuition { margin-top: 20px; padding-top: 16px; border-top: 1px solid #f0f0f0; } .mob-tuition a { display: flex; align-items: center; justify-content: center; background: #262161; color: #fff; font-size: 17px; font-weight: 800; padding: 14px; } .mob-acc-arrow { width: 16px; height: 16px; flex-shrink: 0; color: #9CA3AF; } /* ── Footer Quick Bar ── */ .ft-quick-bar { background: #2A2A38; } /* bg-navy-500 */ .ft-quick-inner { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; } .ft-quick-link { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 0; overflow: hidden; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.6); border-right: 1px solid rgba(255,255,255,0.06); transition: color .3s, background .3s; } .ft-quick-link:last-child { border-right: none; } .ft-quick-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #5B8FFF; /* 기본: 파란색 */ transform: scaleX(0); transform-origin: left; transition: transform .3s; } .ft-quick-link:hover { color: #fff; background: rgba(255,255,255,0.04); } .ft-quick-link:hover::before { transform: scaleX(1); } .ft-quick-link svg { flex-shrink: 0; color: inherit; } /* 시간표 조회만 빨간색 라인 */ .ft-quick-link.accent::before { background: #DA2027; } .ft-quick-link:hover { color: #fff; background: rgba(255,255,255,0.04); } .ft-quick-link:hover::before { transform: scaleX(1); } .ft-quick-link svg { flex-shrink: 0; color: inherit; } .ft-quick-link span { font-size: 14px; /* 글자 크기를 14px로 줄임 */ letter-spacing: -0.5px; /* 자간을 줄임 (숫자는 원하는 만큼 조절 가능!) */ } /* ── Footer Main ── */ .ft-main { background: #15161B; padding: 40px 0 80px; } .ft-links { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } .ft-links a { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.4); transition: color .2s; } .ft-links a:hover { color: #fff; } .ft-link-em { font-weight: 700 !important; color: rgba(255,255,255,0.6) !important; } .ft-body { display: flex; align-items: flex-start; gap: 24px; } .ft-info { flex: 1; font-style: normal; } .ft-info strong { display: block; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 6px; } .ft-info p { font-size: 14.5px; font-weight: 300; color: rgba(255,255,255,0.5); line-height: 24px; } .ft-channels { display: flex; gap: 7px; } .ft-ch-btn { display: flex; align-items: center; justify-content: center; width: 51px; height: 39px; border-radius: 6px; font-size: 14px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); transition: background .2s; } .ft-ch-btn:hover { background: rgba(255,255,255,0.12); } .ft-ch-main { background: #FEE500 !important; border-color: #FEE500 !important; color: #3C1E1E !important; } .ft-ch-main:hover { filter: brightness(1.08); } .ft-copy { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.2); line-height: 24px; margin-top: 28px; text-align: center; } /* ── Footer Responsive ── */ @media(max-width:768px) { .ft-body { flex-direction: column; gap: 20px; } .ft-channels { flex-wrap: wrap; gap: 7px; } .ft-links { gap: 14px; } .ft-links a { font-size: 14px; } .ft-info strong { font-size: 15px; } .ft-info p { font-size: 14px; line-height: 24px; } .ft-copy { font-size: 13px; } } @media(max-width:480px) { .ft-links { flex-direction: column; gap: 10px; } } /* ── Hero Slider ── */ .hero-slider { position: relative; height: clamp(320px, 45vw, 520px); overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; z-index: 0; pointer-events: none; } .hero-slide.active { opacity: 1; z-index: 1; pointer-events: auto; } .hero-bg { position: absolute; inset: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-img-pc { display: block; } .hero-img-mo { display: none; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,26,46,0.88) 0%, rgba(26,26,46,0.65) 30%, rgba(45,58,110,0.08) 65%, rgba(26,26,46,0.70) 100%); } .hero-grid-deco { position: absolute; inset: 0; opacity: 0.03; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 60px 60px; } .hero-content { position: relative; height: 100%; display: flex; align-items: center; } .hero-text { max-width: 520px; z-index: 10; } .hero-badge { display: inline-flex; align-items: center; justify-content: center; width: 256px; height: 43px; border-radius: 21px; font-size: 16px; font-weight: 700; color: #fff; background: rgba(91,143,255,0.15); border: 1px solid #5B8FFF; } .hero-title { font-size: 45px; font-weight: 900; color: #fff; line-height: 52px; letter-spacing: -0.03em; margin-top: 20px; } .hero-desc { font-size: 17px; font-weight: 700; color: #fff; line-height: 26px; letter-spacing: 0.01em; margin: 16px 0 24px; max-width: 380px; } .hero-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #fff; background: #2E3B76; border-radius: 8px; padding: 10px 20px; transition: opacity .2s; box-shadow: 0 4px 12px rgba(0,0,0,.2); } .hero-btn:hover { opacity: .85; } .hero-btn svg { width: 26px; height: 28px; transition: transform .2s; } .hero-btn:hover svg { transform: translateX(2px); } /* 슬라이드 닷 */ .hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 10; } .sdot { width: 32px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.3); transition: background .3s; } .sdot.on { background: #fff; } /* 이전/다음 화살표 */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 55px; height: 55px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; display: none; align-items: center; justify-content: center; transition: background .2s; } .hero-arrow:hover { background: rgba(255,255,255,0.2); } .hero-arrow svg { width: 24px; height: 24px; } .hero-arrow-prev { left: 32px; } .hero-arrow-next { right: 32px; } /* ── Hero Responsive ── */ @media(min-width: 768px) { .hero-img-pc { display: block; } .hero-img-mo { display: none; } .hero-arrow { display: flex; } } @media(max-width: 767px) { .hero-img-pc { display: none; } .hero-img-mo { display: block; } .hero-title { font-size: 30px !important; line-height: 42px !important; } .hero-desc { font-size: 15px !important; } .hero-badge { width: auto; font-size: 14px; height: 38px; padding: 0 16px; } } @media(max-width: 480px) { .hero-title { font-size: 26px !important; line-height: 36px !important; } } /* ── Quick Menu Bar ── */ .qm-bar { background: #fff; border-bottom: 1px solid #E8E8E8; height: 65px; display: none; } @media(min-width: 768px) { .qm-bar { display: block; } } .qm-inner { display: flex; align-items: center; height: 100%; gap: 16px; } /* gap 줄이고 */ .qm-label { font-size: 17px; font-weight: 500; color: #15161B; letter-spacing: 0.02em; white-space: nowrap; } .qm-links { display: flex; align-items: center; gap: 35px; } .qm-link { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 500; color: #4B5563; transition: opacity .2s; } .qm-link:hover { opacity: .7; } .qm-link img { width: 25px; height: 25px; } .qm-divider { width: 1px; height: 26px; background: #E8E8E8; flex-shrink: 0; margin: 0 20px; } /* 구분선 좌우 여백 */ .qm-campus { display: flex; align-items: center; gap: 22px; } .qm-ctab { font-size: 18px; font-weight: 500; color: #9CA3AF; transition: color .2s; } .qm-ctab.on { font-weight: 700; color: #2436A2; } .qm-ctab:hover { color: #2436A2; } .qm-phone { font-size: 22px; font-weight: 700; color: #262161; white-space: nowrap; } /* ── Courses Section ── */ .cs-section { padding: 80px 0; background: #fff; position: relative; overflow: hidden; } .cs-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .cs-label-eng { font-size: 22px; font-weight: 300; color: #3A4FC9; letter-spacing: 0.05em; display: block; } .cs-label-kr { font-size: 17px; font-weight: 700; color: #1A1A2E; margin-top: 2px; display: block; } .cs-more { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: #496FC2; transition: opacity .2s; } .cs-more:hover { opacity: .7; } .cs-more svg { width: 16px; height: 16px; } /* 카드 그리드 */ .cs-grid { display: grid; grid-template-columns: repeat(4, 280px); gap: 16px; row-gap: 70px; justify-content: center; padding-bottom: 8px; } /* 카드 */ .c-card { width: 280px; height: 396px; display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; overflow: hidden; transition: all .35s cubic-bezier(.34,1.56,.64,1); } .c-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0,0,0,.12); } .c-card:hover .c-thumb { transform: scale(1.05); } /* 썸네일 */ .cs-thumb { position: relative; height: 180px; width: 280px; overflow: hidden; flex-shrink: 0; } .c-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.34,1.56,.64,1); } /* 뱃지 */ .cs-badge { position: absolute; top: 12px; font-size: 15px; font-weight: 700; color: #fff; padding: 4px 10px; } .cs-badge-type { left: 12px; font-size: 16px; background: #DA2027; box-shadow: 0 5px 20px rgba(218,32,39,0.5); } .cs-badge-cate { right: 12px; background: #2C3869; } /* 카드 본문 */ .cs-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .cs-period { font-size: 15px; font-weight: 500; color: #496FC2; letter-spacing: -0.03em; } .cs-name { font-size: 18px; font-weight: 700; color: #1A1A1F; line-height: 25px; margin: 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 236px; } .cs-desc { font-size: 15px; color: #9CA3AF; line-height: 18px; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cs-divider { width: 100%; height: 1px; background: #F3F4F6; margin-bottom: 12px; } .cs-more-link { font-size: 15px; font-weight: 500; color: #496FC2; margin-top: auto; transition: opacity .2s; } .c-card:hover .cs-more-link { opacity: .8; } /* ── Courses Responsive ── */ @media(max-width: 1023px) { .cs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; row-gap: 16px !important; } .c-card { width: 100% !important; height: auto !important; } .cs-thumb { width: 100% !important; } } @media(max-width: 768px) { .cs-section { padding: 48px 0; } .cs-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px !important; padding-bottom: 12px; scroll-padding-left: 12px; padding-left: 12px; } .cs-grid::-webkit-scrollbar { display: none; } .c-card { flex: 0 0 85%; width: 85% !important; height: auto !important; scroll-snap-align: start; } .cs-thumb { width: 100% !important; height: 200px !important; } } @media(max-width: 480px) { .c-card { flex: 0 0 90%; width: 90% !important; } .cs-thumb { height: 180px !important; } } /* ── Notice Section ── */ .nt-section { background: #F3F4F6; padding: 96px 0; position: relative; overflow: hidden; } .nt-grid { display: grid; grid-template-columns: 53% 1fr; gap: 24px; width: 100%; } /* 공지 박스 */ .nt-box { background: #fff; padding: 24px 28px 28px; overflow: hidden; min-width: 0; } .nt-box-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .nt-box-title { font-size: 17px; font-weight: 700; color: #333; } .nt-more-btn { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; background: #F5F5F5; border-radius: 5px; transition: background .2s; } .nt-more-btn:hover { background: #E5E7EB; } .nt-more-btn svg { width: 12px; height: 12px; color: rgba(156,163,175,0.5); } .nt-box-line { height: 1.2px; background: #302E4D; margin-bottom: 6px; } /* 공지 리스트 */ .nt-row { display: flex; align-items: center; padding: 13px 0; border-bottom: 0.72px solid #E8E8E8; transition: opacity .2s; } .nt-row.last { border-bottom: none; } .nt-row:hover .nt-title { color: #3A4FC9; } .nt-cat { font-size: 16px; font-weight: 700; color: #302E4D; flex-shrink: 0; } .nt-divider { width: 1.2px; height: 22px; background: #DCDCDC; flex-shrink: 0; margin: 0 12px; } .nt-title { font-size: 17px; font-weight: 400; color: #374151; flex: 1; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* ← 이게 핵심! flex 자식 넘침 방지 */ transition: color .2s; } .nt-date { font-size: 15px; color: #9CA3AF; letter-spacing: -0.02em; flex-shrink: 0; margin-left: auto; } /* 우측 사이드 */ .nt-side { display: flex; flex-direction: column; gap: 20px; } /* 홍보 배너 */ .nt-banner { display: block; position: relative; overflow: hidden; } .nt-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .nt-banner:hover img { transform: scale(1.02); } /* 관련 기관 */ .nt-org { border: 1.2px solid #E8E8E8; } .nt-org-head { display: flex; align-items: center; background: #E8E8E8; height: 49px; padding: 0 20px; } .nt-org-head h4 { font-size: 17px; font-weight: 700; color: #333; letter-spacing: 0.01em; } .nt-org-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; } .nt-org-link { display: flex; align-items: center; justify-content: center; height: 63px; padding: 0 16px; border-right: 1.2px solid #E8E8E8; border-bottom: 1.2px solid #E8E8E8; transition: background .2s; } .nt-org-link:hover { background: #EFF6FF; } .nt-org-link:nth-child(3n) { border-right: none; } .nt-org-link:nth-child(4), .nt-org-link:nth-child(5), .nt-org-link:nth-child(6) { border-bottom: none; } .nt-org-link img { height: 28px; width: auto; object-fit: contain; } /* ── Notice Responsive ── */ @media(max-width: 1023px) { .nt-grid { grid-template-columns: 1fr !important; } } @media(max-width: 768px) { .nt-section { padding: 48px 0 !important; } .nt-box { padding: 20px !important; } .nt-date { display: none !important; } .nt-org-grid { grid-template-columns: repeat(2, 1fr) !important; } .nt-org-link { border-right: 1.2px solid #E8E8E8 !important; border-bottom: 1.2px solid #E8E8E8 !important; } .nt-org-link:nth-child(3n) { border-right: 1.2px solid #E8E8E8 !important; } .nt-org-link:nth-child(2n) { border-right: none !important; } .nt-org-link:nth-child(5), .nt-org-link:nth-child(6) { border-bottom: none !important; } .nt-org-link:nth-child(4) { border-bottom: 1.2px solid #E8E8E8 !important; } } /* ── WHY Section ── */ .why-section { position: relative; overflow: hidden; } .why-wrap { background: #1F1C38; padding: 68px 0 72px; position: relative; } .why-grid-deco { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 60px 60px; } .why-top-line { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #2d3a6e, #4a6aaf, #DA2027); } /* 헤더 */ .why-header { display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; } @media(min-width: 1024px) { .why-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .why-label { display: block; font-size: 17px; font-weight: 600; color: #5B8FFF; letter-spacing: 0.1em; margin-bottom: 4px; } .why-title { font-size: 30px; font-weight: 800; color: #fff; line-height: 52px; } .why-title-em { color: #5B8FFF; } /* 통계 */ .why-stats { display: flex; align-items: center; gap: 28px; } .why-stat { text-align: center; } .why-stat-num { font-size: 36px; font-weight: 800; color: #fff; line-height: 1; } .why-stat-unit { font-size: 24px; font-weight: 800; color: #5B8FFF; } .why-stat-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.3); margin-top: 4px; } .why-stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); flex-shrink: 0; } /* 카드 그리드 */ .why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; } /* 카드 */ .why-card { position: relative; padding: 34px 24px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); transition: background .3s; } .why-card:hover { background: rgba(255,255,255,0.12); } .why-icon-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; } .why-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 45px; font-weight: 900; color: rgba(255,255,255,0.1); font-family: 'Outfit', sans-serif; } .why-icon { width: 48px; height: 48px; position: relative; z-index: 1; transition: all .45s cubic-bezier(.34,1.56,.64,1); transform: translateY(8px); opacity: 0; } .why-card:hover .why-icon { transform: translateY(0); opacity: 1; } .why-card:hover .why-num { transform: scale(.85); opacity: .4; } .why-card-title { font-size: 18px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 8px; } .why-card-desc { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 25px; text-align: center; } .why-card-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .5s; } .why-card:hover .why-card-line { transform: scaleX(1); } /* 모바일에서만 스크롤 리빌로 아이콘 표시 */ @media(max-width: 1023px) { .why-card.v .why-icon { transform: translateY(0) !important; opacity: 1 !important; } .why-card.v .why-num { transform: scale(.85) !important; opacity: .4 !important; } } /* ── WHY Responsive ── */ @media(max-width: 1023px) { .why-cards { grid-template-columns: repeat(2, 1fr) !important; } .why-header { align-items: center !important; text-align: center; } .why-stats { justify-content: center; } } @media(max-width: 768px) { .why-wrap { padding: 48px 0 52px; } .why-header { align-items: center !important; text-align: center; } .why-title { font-size: 26px !important; line-height: 36px !important; } .why-label { font-size: 16px !important; } .why-stats { gap: 20px; flex-wrap: wrap; justify-content: center; } .why-stat-num { font-size: 28px !important; } .why-cards { grid-template-columns: 1fr !important; } /* 1열로 변경 */ .why-card { padding: 28px 20px !important; } .why-card-title { font-size: 18px !important; } .why-card-desc { font-size: 16px !important; } } @media(max-width: 480px) { .why-title { font-size: 22px !important; line-height: 32px !important; } .why-stat-divider { display: none; } } /* ── Photo Story + Review Section ── */ .pv-section { position: relative; overflow: hidden; padding: 80px 0; background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(238,238,240,0.90) 35%, rgba(232,234,240,0.88) 100%); } /* 헤더 */ .pv-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; } .pv-label-eng { display: block; font-size: 22px; font-weight: 200; color: #2436A2; letter-spacing: 0.026em; font-family: 'Outfit', sans-serif; } .pv-label-kr { display: block; font-size: 17px; font-weight: 700; color: #15161B; margin-top: 4px; } .pv-more-links { display: flex; gap: 12px; } .pv-more-link { font-size: 14.5px; font-weight: 700; transition: opacity .2s; } .pv-more-link:hover { opacity: .7; text-decoration: underline; } /* 바디 레이아웃 */ .pv-body { display: flex; flex-direction: column; gap: 24px; } @media(min-width: 1024px) { .pv-body { flex-direction: row; } } /* 포토스토리 */ .pv-port { width: 100%; } @media(min-width: 1024px) { .pv-port { width: 60%; } } .pv-port-link { display: block; position: relative; overflow: hidden; aspect-ratio: 16/10; } .pv-port-link:hover .img-cover { transform: scale(1.05); } .img-cover { object-fit: cover; width: 100%; height: 100%; display: block; transition: transform .7s ease; } .pv-port-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); } .pv-new-badge { position: absolute; top: 16px; left: 16px; background: #DA2027; color: #fff; font-size: 15px; font-weight: 700; padding: 4px 10px; } .pv-port-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; } .pv-port-title { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 4px; letter-spacing: 0.01em; } .pv-port-date { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.6); } /* 프로그레스 바 */ .pv-progress-bg { height: 3px; background: rgba(160,168,184,0.2); margin-top: 12px; } .pv-progress-bar { height: 100%; background: #2D3A6E; transition: width .5s ease; } /* 수강후기 */ .pv-review { width: 100%; overflow: hidden; max-height: 510px; } @media(min-width: 1024px) { .pv-review { width: 40%; } } .pv-review-track { display: flex; flex-direction: column; gap: 16px; transition: transform .45s ease-in-out; } /* 리뷰 카드 */ .rv-card { background: #fff; border: 1px solid #F3F4F6; box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 24px; } .rv-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .rv-avatar { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; font-weight: 700; flex-shrink: 0; } .rv-name { font-size: 18px; font-weight: 700; color: #18182A; } .rv-course { font-size: 14px; font-weight: 500; color: #9CA3AF; } .rv-stars { margin-left: auto; font-size: 15.6px; font-weight: 500; color: #FBBF24; flex-shrink: 0; } .rv-body { font-size: 16px; color: #4B5563; line-height: 26px; letter-spacing: 0.01em; } /* ── PV Responsive ── */ @media(max-width: 768px) { .pv-section { padding: 48px 0; } .pv-label-eng { font-size: 18px !important; } .pv-label-kr { font-size: 15px !important; } .pv-more-links { display: none; } } /* ── Support System Section ── */ .ss-section { position: relative; overflow: hidden; padding: 56px 0; background: #F5F5F5; } /* 헤더 */ .ss-header { display: flex; flex-direction: column; gap: 20px; margin-bottom: 38px; } @media(min-width: 1024px) { .ss-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .ss-label { display: block; font-size: 17px; font-weight: 600; color: #4A6AAF; letter-spacing: 0.1em; margin-bottom: 8px; } .ss-title { font-size: 38px; font-weight: 800; color: #18182A; line-height: 52px; letter-spacing: -0.01em; } .ss-desc { font-size: 17px; font-weight: 500; color: #9CA3AF; margin-top: 10px; } /* Pills */ .ss-pills { display: flex; align-items: stretch; flex-shrink: 0; } .ss-pill { background: #2D3A6E; padding: 18px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,0.1); } .ss-pill-last { border-right: none; } .ss-pill-num { font-size: 36px; font-weight: 800; color: #fff; line-height: 1; } .ss-pill-unit { font-size: 22px; font-weight: 800; color: #5B8FFF; } .ss-pill-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.4); margin-top: 3px; } /* Steps Grid */ .ss-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } /* Step Card */ .ss-step { position: relative; background: #fff; border: 1px solid #E8E8E8; overflow: hidden; transition: background .3s; } .ss-step-navy:hover { background: #eeeef2; } .ss-step-red:hover { background: #fef2f2; } .ss-step-top-line { position: absolute; top: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .4s; } .ss-step:hover .ss-step-top-line { transform: scaleX(1); } .ss-step-left-line { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .ss-step-inner { padding: 24px 24px 24px 28px; } .ss-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .ss-step-num { font-size: 39px; font-weight: 800; line-height: 1; user-select: none; } .ss-step-divider { width: 1px; height: 28px; background: #E8E8E8; flex-shrink: 0; } .ss-step-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid; flex-shrink: 0; } .ss-step-title { font-size: 20px; font-weight: 700; color: #18182A; margin-bottom: 4px; } .ss-step-desc { font-size: 15px; font-weight: 500; color: #9CA3AF; line-height: 24px; margin-bottom: 14px; } /* Tags */ .ss-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; } .ss-tag { font-size: 14px; font-weight: 700; padding: 3px 10px; } .ss-tag-navy { background: rgba(74,106,175,0.06); border: 1.37px solid rgba(74,106,175,0.1); color: #18182A; } .ss-tag-red { background: rgba(218,32,39,0.06); border: 1.37px solid rgba(218,32,39,0.1); color: #DA2027; } .ss-tag-box { padding: 2px 12px; } .ss-tag-box-red { background: rgba(218,32,39,0.06); border: 1.37px solid rgba(218,32,39,0.1); } .ss-tag-box-num { display: block; font-size: 20px; font-weight: 700; line-height: 22px; color: #DA2027; } .ss-tag-box-label { display: block; font-size: 14px; font-weight: 700; color: #9CA3AF; } /* CTA */ .ss-cta { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; } @media(min-width: 640px) { .ss-cta { flex-direction: row; } } .ss-cta-text { font-size: 15px; color: #9CA3AF; } .ss-cta-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #fff; background: #2A2A38; padding: 10px 30px; height: 42px; border-radius: 4px; transition: all .2s; } .ss-cta-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15); transform: translateY(-2px); } .ss-cta-btn svg { width: 14px; height: 14px; transition: transform .2s; } .ss-cta-btn:hover svg { transform: translateX(4px); } /* ── SS Responsive ── */ @media(max-width: 1023px) { .ss-steps { grid-template-columns: repeat(2, 1fr) !important; } } @media(max-width: 768px) { .ss-section { padding: 48px 0; } .ss-title { font-size: 28px !important; line-height: 40px !important; } .ss-desc { font-size: 15px !important; } .ss-pills { flex-wrap: wrap; } .ss-pill { flex: 1; min-width: 80px; padding: 14px 16px !important; } .ss-pill-num { font-size: 28px !important; } .ss-pill-unit { font-size: 18px !important; } .ss-cta { text-align: center; } .ss-cta-btn { width: 100%; justify-content: center; } } @media(max-width: 480px) { .ss-steps { grid-template-columns: 1fr !important; } .ss-title { font-size: 24px !important; line-height: 34px !important; } } /* ── Partners Section ── */ .pt-section { background: #fff; border-bottom: 1px solid #E8E8E8; position: relative; overflow: hidden; padding: 38px 0; } .pt-header { margin-bottom: 24px; text-align: center; } .pt-label-eng { display: block; font-size: 18px; font-weight: 300; color: #9CA3AF; letter-spacing: 0.026em; text-transform: uppercase; font-family: 'Outfit', sans-serif; } .pt-label-kr { display: block; font-size: 32px; font-weight: 700; color: #15161B; margin-top: 4px; } .pt-ticker { position: relative; } .pt-fade-left { position: absolute; left: 0; top: 0; bottom: 0; width: 96px; z-index: 10; background: linear-gradient(90deg, white 10%, transparent); } .pt-fade-right { position: absolute; right: 0; top: 0; bottom: 0; width: 96px; z-index: 10; background: linear-gradient(270deg, white 10%, transparent); } .pt-track-wrap { overflow: hidden; padding: 12px 0; } /* ── PT Responsive ── */ @media(max-width: 768px) { .pt-label-eng { font-size: 15px !important; } .pt-label-kr { font-size: 26px !important; } .partner-logo { max-height: 42px !important; max-width: 120px !important; } } @media(max-width: 480px) { .pt-label-kr { font-size: 22px !important; } } /* ── Contact Us Section ── */ .cu-section { position: relative; overflow: hidden; background: #F5F5F5; border-top: 1px solid #E8E8E8; padding: 72px 0 68px; } /* 헤더 */ .cu-header { display: flex; flex-direction: column; gap: 20px; margin-bottom: 38px; } @media(min-width: 1024px) { .cu-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .cu-label { display: block; font-size: 17px; font-weight: 600; color: #4A6AAF; letter-spacing: 0.1em; margin-bottom: 8px; } .cu-title { font-size: 38px; font-weight: 800; color: #18182A; line-height: 52px; letter-spacing: -0.01em; } .cu-desc { font-size: 17px; font-weight: 500; color: #9CA3AF; margin-top: 10px; } /* 우측 버튼 그룹 */ .cu-btns { display: flex; align-items: stretch; flex-shrink: 0; } .cu-tel { display: flex; align-items: center; gap: 12px; width: 225px; background: #2A2A38; padding: 12px 20px; } .cu-tel-label { font-size: 13px; font-weight: 500; color: #9CA3AF; } .cu-tel-num { font-size: 21.6px; font-weight: 700; color: #fff; letter-spacing: 0.01em; } .cu-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; transition: filter .2s; } .cu-btn-navy { width: 138px; background: #2D3A6E; color: #fff; } .cu-btn-navy:hover { filter: brightness(1.1); } .cu-btn-kakao { width: 124px; background: #FFE812; color: #3C1E1E; } .cu-btn-kakao:hover { filter: brightness(0.95); } /* 캠퍼스 그리드 */ .cu-grid { display: grid; grid-template-columns: repeat(4, 1fr); } /* 캠퍼스 카드 */ .cu-card { position: relative; background: #fff; border: 1px solid #E8E8E8; padding: 24px; transition: background .3s; overflow: hidden; } .cu-card:hover { background: #eeeef2; } .cu-card-line { position: absolute; top: 0; left: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .3s; } .cu-card:hover .cu-card-line { transform: scaleX(1); } .cu-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .cu-card-head svg { width: 15.5px; height: 15.5px; flex-shrink: 0; } .cu-card-name { font-size: 16px; font-weight: 700; color: #15161B; } .cu-card-addr { font-size: 14px; color: #9CA3AF; letter-spacing: -0.02em; line-height: 1.6; margin-bottom: 10px; } .cu-card-tel { font-size: 19px; font-weight: 500; color: #020202; } .cu-btn-wrap { display: flex; } /* ── CU Responsive ── */ @media(max-width: 1023px) { .cu-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media(max-width: 768px) { .cu-section { padding: 48px 0 44px !important; } .cu-title { font-size: 28px !important; line-height: 40px !important; } .cu-desc { font-size: 15px !important; } .cu-btns { flex-direction: column; width: 100%; gap: 8px; } /* 대표전화 — 전체 너비 */ .cu-tel { width: 100% !important; border-radius: 10px !important; padding: 16px 20px !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; } .cu-tel-label { font-size: 12px !important; } .cu-tel-num { font-size: 22px !important; } /* 온라인상담 + 카카오톡 — 나란히 */ .cu-btn-wrap { display: flex; gap: 8px; width: 100%; } .cu-btn { flex: 1; min-height: 72px; border-radius: 10px !important; flex-direction: column !important; gap: 6px !important; } .cu-btn span { font-size: 14px !important; } } @media(max-width: 480px) { .cu-grid { grid-template-columns: 1fr !important; } .cu-card { padding: 18px !important; } .cu-title { font-size: 24px !important; line-height: 34px !important; } } .hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 32px; } .hero-tag { display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; padding: 8px 20px; } .hero-tag-primary { background: #DA2027; color: #fff; font-weight: 800; } .hero-tag-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); } .hero-course-title { font-size: 48px; font-weight: 900; color: #fff; line-height: 58px; letter-spacing: -0.035em; margin-bottom: 24px; } .hero-course-desc { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 480px; } @media(max-width: 1023px) { .hero-right-img { position: static; width: 100%; height: 280px; } .hero-layout { flex-direction: column; height: auto; } .hero-text { padding: 40px 0; } .hero-course-title { font-size: 28px !important; line-height: 38px !important; } } @media(max-width: 768px) { .hero-course-title { font-size: 24px !important; line-height: 34px !important; } .hero-course-desc { font-size: 15px !important; } .hero-tag { font-size: 13px !important; padding: 6px 14px !important; } } /* ── Info Bar ── */ .ib-section { background: #fff; } .ib-inner { padding-top: 40px !important; padding-bottom: 44px !important; } .ib-wrap { display: flex; flex-direction: column; gap: 32px; } @media(min-width: 1024px) { .ib-wrap { flex-direction: row; } } /* 그리드 */ .ib-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 32px; align-items: start; } @media(min-width: 640px) { .ib-grid { grid-template-columns: repeat(3, 1fr); } } .ib-item {} .ib-label { font-size: 15px; font-weight: 700; color: #5B8FFF; margin-bottom: 4px; } .ib-val { font-size: 20px; font-weight: 800; color: #1A1A2E; font-family: 'Outfit', 'Noto Sans KR', sans-serif; } .ib-val-sm { font-size: 18px; font-family: 'Noto Sans KR', sans-serif; } .ib-val-lh { line-height: 1.7; } /* 버튼 */ .ib-btns { width: 100%; display: flex; flex-direction: column; gap: 12px; } @media(min-width: 1024px) { .ib-btns { width: 240px; flex-shrink: 0; } } .ib-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; padding: 16px; transition: opacity .2s; } .ib-btn svg { width: 20px; height: 20px; } .ib-btn-primary { background: #DA2027; color: #fff; font-weight: 800; } .ib-btn-primary:hover { opacity: .9; } .ib-btn-outline { border: 1.5px solid #E8E8E8; color: #1A1A2E; } .ib-btn-outline:hover { background: #F9F9F9; } /* ── IB Responsive ── */ @media(max-width: 767px) { .ib-grid { grid-template-columns: 1fr !important; } } /* ── Tab Spacer ── */ .tb-spacer { height: 20px; background: #fff; } /* ── Recommend Section ── */ .rc-section { background: #fff; padding: 110px 0; } .rc-header { text-align: center; margin-bottom: 64px; } .rc-label { justify-content: center; color: #5B8FFF; } .rc-title { color: #1A1A2E; } .rc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } /* 카드 */ .rc-card { position: relative; cursor: default; transition: transform .3s; } .rc-card:hover { transform: translateY(-8px); } .rc-card:hover .rc-char { transform: translateY(-8px); } .rc-card-inner { padding: 40px; border: 1.5px solid #E8E8E8; background: #fff; transition: box-shadow .3s; } .rc-card:hover .rc-card-inner { box-shadow: 0 20px 40px rgba(0,0,0,.08); } .rc-card-navy { border-left: 5px solid #262161; } .rc-card-red { border-left: 5px solid #DA2027; } .rc-badge { display: inline-block; font-size: 15px; font-weight: 700; padding: 6px 16px; margin-bottom: 24px; color: #fff; } .rc-badge-navy { background: #262161; } .rc-badge-red { background: #DA2027; } .rc-card-title { font-size: 24px; font-weight: 900; color: #1A1A2E; line-height: 1.4; margin-bottom: 16px; } .rc-card-desc { font-size: 16px; color: #888; line-height: 1.8; } /* 캐릭터 이미지 */ .rc-char { position: absolute; right: -12px; bottom: 0; width: 250px; height: 320px; display: none; align-items: flex-end; justify-content: center; z-index: 10; pointer-events: none; transition: transform .3s; } .rc-char img { width: 100%; height: 100%; object-fit: contain; } @media(min-width: 768px) { .rc-char { display: flex; } } /* ── RC Responsive ── */ @media(max-width: 768px) { .rc-section { padding: 100px 0; } .rc-grid { grid-template-columns: 1fr !important; gap: 20px; } .rc-card-title { font-size: 20px !important; } .rc-card-inner { padding: 28px !important; } .rc-header { margin-bottom: 60px; } } /* ── Curriculum & Result Section ── */ .cr-section { background: #262161; padding: 110px 0; } .cr-header { text-align: center; margin-bottom: 64px; } .cr-label { justify-content: center; color: #5B8FFF; } .cr-title { color: #fff; } .cr-sub { font-size: 16px; color: rgba(255,255,255,.4); margin-top: 16px; } /* Stats Grid */ .rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-bottom: 56px; } .rs-item { text-align: center; } .rs-num-wrap { display: flex; align-items: baseline; justify-content: center; gap: 8px; } .rs-num { color: #fff; } .rs-dot { width: 8px; height: 8px; background: #5B8FFF; border-radius: 50%; flex-shrink: 0; margin-bottom: 12px; } .rs-label { font-size: 18px; font-weight: 700; color: #fff; margin-top: 12px; } .rs-desc { font-size: 16px; color: rgba(255,255,255,.4); margin-top: 4px; } /* Banner */ .rs-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; border: 1px solid rgba(255,255,255,.12); } .rs-banner svg { width: 20px; height: 20px; flex-shrink: 0; } .rs-banner-text { font-size: 16px; font-weight: 700; color: #fff; } .rs-banner-em { color: #5B8FFF; } /* ── CR Responsive ── */ @media(max-width: 768px) { .cr-section { padding: 60px 0; } .cr-header { margin-bottom: 40px; } .rs-grid { grid-template-columns: 1fr !important; gap: 32px; } .rs-banner { flex-direction: column; text-align: center; gap: 8px; } } @media(max-width: 640px) { .rs-grid { grid-template-columns: 1fr !important; } } /* ── Point Section ── */ .pt2-section { background: #fff; padding: 110px 0; } .pt2-header { text-align: center; margin-bottom: 64px; } .pt2-label { justify-content: center; color: #5B8FFF; } .pt2-title { color: #1A1A2E; } .pt2-title-em { color: #DA2027; } .pt2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .pt2-card { padding: 40px; background: #fff; border: 1.5px solid #E8E8E8; transition: transform .3s; } .pt2-card:hover { transform: translateY(-8px); } .pt2-card-navy { border-top: 4px solid #262161; } .pt2-card-red { border-top: 4px solid #DA2027; } .pt2-num { font-size: 15px; font-weight: 900; color: #5B8FFF; letter-spacing: 0.15em; margin-bottom: 24px; } .pt2-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .pt2-icon svg { width: 24px; height: 24px; } .pt2-card-title { font-size: 24px; font-weight: 900; color: #1A1A2E; margin-bottom: 16px; } .pt2-card-desc { font-size: 16px; color: #777; line-height: 1.8; } /* ── Gallery Section ── */ .gl-section { background: #262161; padding: 110px 0; } .gl-header { text-align: center; margin-bottom: 64px; } .gl-label { justify-content: center; color: #5B8FFF; } .gl-title { color: #fff; } .gl-sub { font-size: 16px; color: rgba(255,255,255,.4); margin-top: 16px; } /* ── Responsive ── */ @media(max-width: 768px) { .pt2-section { padding: 60px 0; } .pt2-grid { grid-template-columns: 1fr !important; gap: 20px; } .pt2-card { padding: 28px !important; } .pt2-header { margin-bottom: 40px; } .gl-section { padding: 60px 0; } .gl-header { margin-bottom: 40px; } } @media(max-width: 640px) { .pt2-grid { grid-template-columns: 1fr !important; } } /* ── Instructor Section ── */ .in-section { background: #262161; padding: 110px 0; } .in-header { text-align: center; margin-bottom: 64px; } .in-label { justify-content: center; color: #5B8FFF; } .in-title { color: #fff; } .in-sub { font-size: 16px; color: rgba(255,255,255,.4); margin-top: 16px; } /* ── Review Section ── */ .rv2-section { background: #fff; padding: 110px 0; } .rv2-header { text-align: center; margin-bottom: 64px; } .rv2-label { justify-content: center; color: #5B8FFF; } .rv2-title { color: #1A1A2E; } .rv2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .rv2-card { padding: 32px; border: 1.5px solid #E8E8E8; border-left: 5px solid #262161; } .rv2-stars { font-size: 16px; color: #F59E0B; margin-bottom: 20px; } .rv2-quote { font-size: 18px; font-weight: 700; color: #1A1A2E; margin-bottom: 16px; } .rv2-body { font-size: 16px; color: #777; line-height: 1.8; } .rv2-author { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #E8E8E8; } .rv2-avatar { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 900; flex-shrink: 0; } .rv2-name { font-size: 15px; font-weight: 700; color: #1A1A2E; } .rv2-more { text-align: center; margin-top: 48px; } .rv2-more-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #1A1A2E; padding: 16px 32px; border: 1.5px solid #E8E8E8; transition: opacity .2s; } .rv2-more-btn:hover { opacity: .7; } .rv2-more-btn svg { width: 20px; height: 20px; } .rv2-card-red { border-left-color: #DA2027; } /* ── Responsive ── */ @media(max-width: 768px) { .in-section { padding: 60px 0; } .in-header { margin-bottom: 40px; } .rv2-section { padding: 60px 0; } .rv2-header { margin-bottom: 40px; } .rv2-grid { grid-template-columns: 1fr !important; gap: 20px; } .rv2-card { padding: 24px !important; } } /* ── Page Hero ── */ .ph-content { position: relative; z-index: 10; text-align: center; } .ph-eng { font-size: 16px; font-weight: 700; color: #5B8FFF; letter-spacing: 0.2em; margin-bottom: 16px; } .ph-title { font-size: clamp(34px,5vw,50px); font-weight: 900; color: #fff; letter-spacing: -0.03em; } .ph-desc { font-size: 17px; color: rgba(255,255,255,.55); margin-top: 16px; } /* ── Sub Tab Bar ── */ .sp-tab-bar { background: #fff; border-bottom: 1px solid #E8E8E8; } .sp-tab-wrap { display: flex; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Intro Section ── */ .sp-intro-section { padding: 80px 0; position: relative; overflow: hidden; background: url('/images/sub/renewal/support/bg_pattern.jpg') center center/cover no-repeat; } .sp-intro-header { text-align: center; margin-bottom: 48px; } .sp-intro-deco-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; } .sp-deco-bar-blue { width: 3px; height: 20px; background: #5B8FFF; display: inline-block; } .sp-deco-bar-navy { width: 3px; height: 20px; background: #262161; display: inline-block; } .sp-intro-desc { font-size: 17px; color: #888; max-width: 700px; margin: 12px auto 0; line-height: 1.8; } .sp-br-md { display: none; } @media(min-width: 768px) { .sp-br-md { display: block; } } .sp-intro-split-wrap { max-width: 1180px; margin: 0 auto; } .sp-intro-label { font-size: 15px; font-weight: 700; color: #5B8FFF; letter-spacing: 0.1em; margin-bottom: 8px; } .sp-intro-title { font-size: 28px; font-weight: 900; color: #1A1A2E; line-height: 1.3; margin-bottom: 20px; } .sp-intro-body { font-size: 17px; color: #555; line-height: 2; } .sp-intro-btn-wrap { margin-top: 32px; } /* ── Benefit Section ── */ .sp-benefit-section { background: #F7F8FC; padding: 100px 0; position: relative; overflow: hidden; } .sp-benefit-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 8px; } .sp-benefit-sub { font-size: 16px; color: #999; } /* ── Target Section ── */ .sp-target-section { padding: 100px 0; position: relative; overflow: hidden; } .sp-target-label { font-size: 15px; font-weight: 700; color: #5B8FFF; letter-spacing: 0.08em; margin-bottom: 12px; } .sp-target-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } @media(min-width: 768px) { .sp-target-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .sp-target-title { font-size: 30px !important; } .sp-target-sub { font-size: 15px; color: #999; } .sp-target-note { font-size: 15px; color: #bbb; margin-top: 32px; } /* ── Step Section ── */ .sp-step-section { background: #fff; padding: 0 0 100px; position: relative; overflow: hidden; } .sp-step-title { margin-bottom: 8px; } .sp-step-desc { font-size: 17px; color: #888; margin-bottom: 64px; } .btn-outline svg { width: 18px; height: 18px; } /* ── Responsive ── */ @media(max-width: 768px) { .sp-intro-section { padding: 48px 0; } .sp-benefit-section { padding: 60px 0; } .sp-target-section { padding: 60px 0; } .sp-step-section { padding: 0 0 60px; } .sp-step-desc { margin-bottom: 40px; } } /* ── 참여불가 박스 ── */ .sp-benefit-divider { border-bottom: 1px solid #E0E0E0; margin-top: 12px; } .sp-exclude-box { background: #F9F9FB; padding: 20px 28px; border-radius: 8px; } .sp-exclude-list { list-style: none; padding: 0; } .sp-exclude-list li { font-size: 15px; color: #888; line-height: 2; padding-left: 16px; position: relative; } .sp-exclude-list li::before { content: '·'; position: absolute; left: 0; color: #ccc; } /* ── Notice List Section ── */ .nl-section { background: #fff; padding: 80px 0 100px; } .nl-header { text-align: center; margin-bottom: 48px; } .nl-deco { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; } .nl-deco-blue { width: 3px; height: 20px; background: #5B8FFF; display: inline-block; } .nl-deco-navy { width: 3px; height: 20px; background: #262161; display: inline-block; } .nl-title { font-size: 28px; font-weight: 900; color: #1A1A2E; } .nl-count { font-size: 16px; color: #999; margin-top: 8px; } .nl-count-num { font-weight: 700; color: #262161; } .nl-empty { text-align: center; padding: 80px 0; font-size: 16px; color: #999; } /* ── Responsive ── */ @media(max-width: 768px) { .nl-section { padding: 48px 0 60px; } .nl-header { margin-bottom: 32px; } } /* ── Review List Bottom ── */ .rl-bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; } @media(min-width: 640px) { .rl-bottom { flex-direction: row; } } /* ── Photo Story List ── */ .ps-total { font-size: 15px; color: #bbb; margin-top: 12px; } .ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ps-card { display: block; border: 1.5px solid #E8E8E8; overflow: hidden; transition: transform .3s; } .ps-card:hover { transform: translateY(-4px); } .ps-thumb { height: 220px; overflow: hidden; } .ps-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .ps-card:hover .ps-thumb img { transform: scale(1.05); } .ps-body { padding: 20px; } .ps-title { font-size: 16px; font-weight: 700; color: #1A1A2E; line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } .ps-card:hover .ps-title { color: #2563EB; } .ps-meta { display: flex; align-items: center; gap: 16px; font-size: 15px; color: #bbb; } .ps-hit { display: flex; align-items: center; gap: 4px; } .ps-empty { grid-column: 1 / -1; text-align: center; padding: 80px 0; font-size: 16px; color: #999; } /* ── PS Responsive ── */ @media(max-width: 1023px) { .ps-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media(max-width: 640px) { .ps-grid { grid-template-columns: 1fr !important; gap: 20px; } .ps-thumb { height: 200px; } } /* ── Interview List ── */ .iv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .iv-card { overflow: hidden; } .iv-thumb { display: block; overflow: hidden; aspect-ratio: 1/1; } .iv-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; } .iv-card:hover .iv-thumb img { transform: scale(1.05); } .iv-body { padding: 16px; } .iv-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .iv-name { font-size: 15px; font-weight: 700; color: #1A1A2E; } .iv-lecture { font-size: 14px; color: #9CA3AF; } .iv-summary { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .iv-more { font-size: 14px; font-weight: 700; color: #262161; transition: opacity .2s; } .iv-more:hover { opacity: .7; } .iv-empty { grid-column: 1 / -1; text-align: center; padding: 80px 0; font-size: 16px; color: #999; } /* ── IV Responsive ── */ @media(max-width: 1023px) { .iv-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media(max-width: 768px) { .iv-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; } } @media(max-width: 480px) { .iv-grid { grid-template-columns: 1fr !important; } } .g-sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .g-sm-cell { overflow: hidden; } .g-sm-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Curriculum Desktop Layout ── */ /* 1. 모바일(기본 화면)에서는 숨김 처리: display: none; */ .curr-desktop-wrap { display: none; overflow: hidden; border: 1px solid rgba(255,255,255,.1); } /* 2. PC 화면(1024px 이상)에서는 다시 나타나게: display: flex; 추가 */ @media(min-width:1024px) { .curr-desktop-wrap { display: flex; flex-direction: row; } } /* 아래부터는 기존 코드와 동일하게 유지하시면 됩니다. */ .curr-tab-list { width: 100%; flex-shrink: 0; background: rgba(0,0,0,.25); } @media(min-width:1024px) { .curr-tab-list { width: 260px; } } .curr-tab-scroll { display: flex; flex-direction: row; overflow-x: auto; } @media(min-width:1024px) { .curr-tab-scroll { flex-direction: column; overflow-x: visible; } } .curr-content { flex: 1; background: #fff; position: relative; } .curr-deco-bg { position: absolute; bottom: 16px; right: 16px; pointer-events: none; opacity: .07; z-index: 0; } .curr-panel { padding: clamp(24px,3vw,40px); position: relative; z-index: 1; } .curr-panel.hidden { display: none; } .curr-panel-inner { display: flex; flex-direction: column; gap: 16px; } @media(min-width:640px) { .curr-panel-inner { flex-direction: row; align-items: flex-start; gap: 32px; } } .curr-panel-title { font-size: 22px; font-weight: 900; color: #1A1A2E; flex-shrink: 0; } /* ── Instructor Include ── */ .inst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .inst-card { padding: 36px 16px; } .inst-name { color: #fff; font-size: 17px; font-weight: 900; margin-bottom: 4px; } .inst-title { font-size: 15px; font-weight: 700; color: #DA2027; margin-bottom: 4px; } .inst-desc { font-size: 15px; color: rgba(255,255,255,.4); } @media(max-width: 768px) { .inst-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; } } @media(max-width: 480px) { .inst-grid { grid-template-columns: 1fr !important; } } .hero-layout { display: flex; justify-content: space-between; /* 텍스트는 왼쪽, 이미지는 오른쪽 끝으로 밀어냅니다 */ align-items: center; /* 필요에 따라 세로 중앙 정렬을 맞춰줍니다 */ } /* 수강후기 폼 영역 가운데 정렬 및 너비 설정 */ .review-table { width: 100% !important; max-width: 800px !important; /* 폼이 너무 넓어지지 않게 최대 너비 설정 (원하는 사이즈로 조절하세요!) */ margin: 0 auto !important; /* ★ 가운데 정렬의 핵심! */ box-sizing: border-box !important; } /* 폼 안의 테이블(입력칸들)도 꽉 차게 설정 */ .review-table table, #fmReview table { width: 100% !important; } @media (max-width: 768px) { .renew #cScroll { /* 1. 잘림 방지: 강제로 왼쪽부터 시작하도록 정렬 */ justify-content: flex-start !important; /* 2. 여백 추가 (기존 0 !important를 덮어쓰기 위해 더 큰 우선순위나 동일하게 선언 후 원하는 값 입력) */ padding-left: 20px !important; scroll-padding-left: 20px !important; } } @media(max-width:768px){ .cs-grid{ padding-left: 0 !important; scroll-padding-left: 0 !important; } .cs-grid .c-card{ scroll-snap-align: start !important; } .cs-grid .c-card:first-child{ margin-left: 12px !important; } }