/* >>> basc-design-tokens : 시작 (스크립트 소유 구간) */ /* ===== basc 디자인 토큰 (위젯 스킨이 읽는 --ds-*) ===== */ html[data-service-code="basc"]{ --ds-brand-primary:#5417C9; --ds-brand-primary-hover:#000000; --ds-board-title-color:#1a1a2e; --ds-board-title-hover:#5417C9; --ds-board-meta-color:#6b6b7b; --ds-board-row-border:rgba(11,0,56,.08); --ds-board-row-hover:rgba(84,23,201,.04); --ds-board-header-bg:rgba(11,0,56,.03); --ds-board-card-radius:10px; --ds-board-thumb-radius:10px; --ds-board-card-shadow-hover:0 14px 30px rgba(11,0,56,.12); --ds-board-badge-notice-bg:#5417C9; --ds-board-badge-notice-fg:#ffffff; --ds-board-badge-press-bg:rgba(84,23,201,.10); --ds-board-badge-press-fg:#5417C9; --ds-board-badge-deadline-bg:#fff4e6; --ds-board-badge-deadline-fg:#ff7f4d; --ds-board-badge-answered-bg:#e7f7ec; --ds-board-badge-answered-fg:#22c55e; } /* <<< basc-design-tokens : 끝 */ /* ===== basc footer (v2 basc-client Footer.tsx 내재화) ===== */ html[data-service-code="basc"] .basc-ft{background:#2d2d2d;color:#fff;} html[data-service-code="basc"] .basc-ft__inner{max-width:1730px;margin:0 auto;padding:64px 32px;} html[data-service-code="basc"] .basc-ft__top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);} html[data-service-code="basc"] .basc-ft__brand{display:flex;align-items:center;gap:16px;} html[data-service-code="basc"] .basc-ft__logo{height:50px;width:auto;display:block;} html[data-service-code="basc"] .basc-ft__wordmark{font-size:32px;font-weight:800;letter-spacing:.06em;color:#fff;line-height:1;} html[data-service-code="basc"] .basc-ft__policy{font-size:16px;font-weight:500;color:#fff;text-decoration:none;line-height:1.5;} html[data-service-code="basc"] .basc-ft__policy:hover{text-decoration:underline;} html[data-service-code="basc"] .basc-ft__info{margin-bottom:24px;} html[data-service-code="basc"] .basc-ft__info p{margin:0 0 8px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.8);} html[data-service-code="basc"] .basc-ft__info p:last-child{margin-bottom:0;} html[data-service-code="basc"] .basc-ft__gap{display:inline-block;width:16px;} html[data-service-code="basc"] .basc-ft__copy{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.6);} @media (max-width:768px){ html[data-service-code="basc"] .basc-ft__inner{padding:48px 16px;} html[data-service-code="basc"] .basc-ft__top{flex-direction:column;align-items:flex-start;gap:16px;} html[data-service-code="basc"] .basc-ft__wordmark{font-size:24px;} html[data-service-code="basc"] .basc-ft__logo{height:25px;} html[data-service-code="basc"] .basc-ft__policy,html[data-service-code="basc"] .basc-ft__info p,html[data-service-code="basc"] .basc-ft__copy{font-size:14px;} } html[data-service-code="basc"] .basc-ft__logo--word{height:50px;} @media (max-width:768px){ html[data-service-code="basc"] .basc-ft__logo--word{height:25px;} } /* ===== basc header (시안 기반) ===== */ html[data-service-code="basc"] .basc-hd{position:absolute;top:0;left:0;right:0;z-index:100;background:transparent;} html[data-service-code="basc"] .basc-hd::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,0) 100%);} html[data-service-code="basc"] .basc-hd__inner{position:relative;} html[data-service-code="basc"] .basc-hd__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1760px;margin:0 auto;padding:22px 40px;} html[data-service-code="basc"] .basc-hd__brand{display:inline-flex;align-items:center;gap:18px;text-decoration:none;} html[data-service-code="basc"] .basc-hd__logo{display:block;height:34px;width:auto;} html[data-service-code="basc"] .basc-hd__nav .depth1-wrap{display:block;} html[data-service-code="basc"] .basc-hd__nav .depth1-ul{display:flex;align-items:center;gap:56px;margin:0;padding:0;list-style:none;} html[data-service-code="basc"] .basc-hd__nav .mn_li1{margin:0;padding:0;list-style:none;} html[data-service-code="basc"] .basc-hd__nav .mn_a1{display:block;padding:6px 2px;color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;opacity:.92;transition:opacity .2s ease,color .2s ease;} html[data-service-code="basc"] .basc-hd__nav .mn_a1:hover, html[data-service-code="basc"] .basc-hd__nav .mn_a1:focus-visible{opacity:1;color:var(--ds-brand-primary,#5417c9);} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__inner{padding:16px 20px;gap:16px;} html[data-service-code="basc"] .basc-hd__logo{height:26px;} html[data-service-code="basc"] .basc-hd__nav .depth1-ul{gap:22px;} html[data-service-code="basc"] .basc-hd__nav .mn_a1{font-size:14px;} } @media (max-width:640px){ html[data-service-code="basc"] .basc-hd__nav .mn_a1{font-size:13px;} html[data-service-code="basc"] .basc-hd__logo--word{display:none;} } /* -- 하위메뉴: 대메뉴 우측 끝 기준 (배경 없음 · 흰 글자) ---------------- */ html[data-service-code="basc"] .basc-hd__nav{position:relative;} html[data-service-code="basc"] .basc-hd__nav .mn_li1{position:static;} html[data-service-code="basc"] .basc-hd__nav .depth2-wrap{position:absolute;top:100%;right:0;z-index:120;background:none;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;} html[data-service-code="basc"] .basc-hd__nav .mn_li1:hover .depth2-wrap{opacity:1;visibility:visible;transform:none;} html[data-service-code="basc"] .basc-hd__nav .mn_li1:focus-within .depth2-wrap{opacity:1;visibility:visible;transform:none;} html[data-service-code="basc"] .basc-hd__nav .depth2-ul{display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:44px;margin:0;padding:13px 0;list-style:none;} html[data-service-code="basc"] .basc-hd__nav .mn_li2{margin:0;padding:0;list-style:none;} html[data-service-code="basc"] .basc-hd__nav .mn_a2{display:block;padding:2px 2px;color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;opacity:.9;transition:opacity .18s ease,color .18s ease;} html[data-service-code="basc"] .basc-hd__nav .mn_a2:hover{opacity:1;color:var(--ds-brand-primary,#5417c9);} html[data-service-code="basc"] .basc-hd__nav .mn_a2:focus-visible{opacity:1;color:var(--ds-brand-primary,#5417c9);outline:2px solid #fff;outline-offset:3px;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__nav .depth2-wrap{display:none;} } @media (prefers-reduced-motion:reduce){ html[data-service-code="basc"] .basc-hd__nav .depth2-wrap{transition:none;} } /* -- 하위메뉴 열릴 때의 전체폭 스크림 (헤더에 부착) --------------------- */ html[data-service-code="basc"] .basc-hd::after{content:"";position:absolute;left:0;right:0;top:100%;height:70px;pointer-events:none;opacity:0;transition:opacity .2s ease;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.26) 38%,rgba(0,0,0,0) 100%);} html[data-service-code="basc"] .basc-hd:has(.basc-hd__nav .mn_li1:hover)::after{opacity:1;} html[data-service-code="basc"] .basc-hd:has(.basc-hd__nav .mn_li1:focus-within)::after{opacity:1;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd::after{display:none;} } /* -- 회원 진입점 (util.member-auth · 마크업은 slots.header 저작) --------- */ html[data-service-code="basc"] .basc-hd__right{display:flex;align-items:center;gap:40px;} html[data-service-code="basc"] .basc-hd__auth{display:flex;align-items:center;} html[data-service-code="basc"] .cms-member-auth{display:flex;align-items:center;gap:18px;} html[data-service-code="basc"] .cms-member-auth__guest{display:inline-flex;align-items:center;gap:18px;} html[data-service-code="basc"] .cms-member-auth__me{display:inline-flex;align-items:center;gap:18px;} html[data-service-code="basc"] .cms-member-auth__link{display:block;padding:6px 2px;margin:0;border:0;background:none;color:#fff;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;opacity:.9;cursor:pointer;transition:opacity .18s ease,color .18s ease;} html[data-service-code="basc"] .cms-member-auth__link:hover{opacity:1;color:var(--ds-brand-primary,#5417c9);} html[data-service-code="basc"] .cms-member-auth__link:focus-visible{opacity:1;color:var(--ds-brand-primary,#5417c9);outline:2px solid #fff;outline-offset:3px;} html[data-service-code="basc"] .cms-member-auth__link--sub{opacity:.72;font-weight:500;} html[data-service-code="basc"] .cms-member-auth__name{color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;opacity:.95;} html[data-service-code="basc"] .cms-member-auth [hidden]{display:none;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__right{gap:16px;} html[data-service-code="basc"] .cms-member-auth{gap:12px;} html[data-service-code="basc"] .cms-member-auth__link{font-size:13px;} html[data-service-code="basc"] .cms-member-auth__link--sub{display:none;} html[data-service-code="basc"] .cms-member-auth__name{font-size:13px;} } /* -- 대메뉴 <-> 회원영역 간격 (대메뉴를 왼쪽으로 밀어 로그인과 겹쳐 보이지 않게) --- */ html[data-service-code="basc"] .basc-hd__right{gap:80px;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__right{gap:16px;} } /* -- 대메뉴 <-> 회원영역 간격 (대메뉴를 왼쪽으로 밀어 로그인과 겹쳐 보이지 않게) --- */ html[data-service-code="basc"] .basc-hd__right{gap:80px;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__right{gap:16px;} } /* -- 대메뉴 <-> 회원영역 간격 (대메뉴를 왼쪽으로 밀어 로그인과 겹쳐 보이지 않게) --- */ html[data-service-code="basc"] .basc-hd__right{gap:80px;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__right{gap:16px;} } /* -- 대메뉴 <-> 회원영역 간격 (대메뉴를 왼쪽으로 밀어 로그인과 겹쳐 보이지 않게) --- */ html[data-service-code="basc"] .basc-hd__right{gap:80px;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__right{gap:16px;} } /* ===== basc 배경영상 히어로 (content.hero-video) ===== */ html[data-service-code="basc"] .cms-hero-video{position:relative;width:100%;height:100vh;min-height:520px;overflow:hidden;background:#0b0b16;} html[data-service-code="basc"] .cms-hero-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} html[data-service-code="basc"] .cms-hero-video--reveal{height:200vh;min-height:0;overflow:visible;} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__stage{position:sticky;top:0;height:100vh;min-height:520px;overflow:hidden;background:#0b0b16;} html[data-service-code="basc"] .cms-hero-video__grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:grid;grid-template-columns:repeat(var(--cols,15),1fr);grid-template-rows:repeat(var(--rows,15),1fr);width:375vmin;height:375vmin;pointer-events:none;} html[data-service-code="basc"] .cms-hero-video__tile{background:#fff;transform:scale(0) rotate(var(--r,0deg));transition:transform 1.5s cubic-bezier(.4,0,.2,1);} html[data-service-code="basc"] .cms-hero-video--reveal[data-hero-revealed="1"] .cms-hero-video__tile{transform:scale(1) rotate(0deg);} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__overlay{z-index:2;opacity:0;transform:translateY(100px);transition:opacity 1.5s cubic-bezier(.4,0,.2,1),transform 1.5s cubic-bezier(.4,0,.2,1);} html[data-service-code="basc"] .cms-hero-video--reveal[data-hero-revealed="1"] .cms-hero-video__overlay{opacity:1;transform:none;} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__title{color:#111;font-size:clamp(24px,3.4vw,56px);font-weight:800;letter-spacing:.02em;text-transform:none;line-height:1.2;} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__subtitle{margin-top:22px;color:#111;font-size:clamp(15px,1.4vw,24px);font-weight:600;letter-spacing:.03em;} html[data-service-code="basc"] .cms-hero-video__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;pointer-events:none;} html[data-service-code="basc"] .cms-hero-video__title{margin:0;color:rgba(255,255,255,.28);font-size:clamp(40px,9vw,150px);font-weight:900;line-height:1.02;letter-spacing:.02em;text-transform:uppercase;} html[data-service-code="basc"] .cms-hero-video__subtitle{margin:18px 0 0;color:rgba(255,255,255,.72);font-size:clamp(14px,1.5vw,20px);font-weight:600;letter-spacing:.03em;} @media (max-width:1024px){ html[data-service-code="basc"] .cms-hero-video--reveal{height:100vh;min-height:520px;overflow:hidden;} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__stage{position:static;height:100%;min-height:0;} html[data-service-code="basc"] .cms-hero-video__grid{display:none;} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__overlay{opacity:1;transform:none;} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__title{color:rgba(255,255,255,.9);} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__subtitle{color:rgba(255,255,255,.78);} } @media (prefers-reduced-motion:reduce){ html[data-service-code="basc"] .cms-hero-video__tile{transition:none;} html[data-service-code="basc"] .cms-hero-video--reveal .cms-hero-video__overlay{transition:none;} } /* ===== basc 01 Global Hub ===== */ html[data-service-code="basc"] .basc-gh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0;background:#fff;} html[data-service-code="basc"] .basc-gh__text{position:relative;padding:120px 6vw 120px 16.2vw;} html[data-service-code="basc"] .basc-gh__num{position:absolute;right:8%;top:96px;z-index:0;color:#f2f2f5;font-size:clamp(90px,10vw,190px);font-weight:900;line-height:1;letter-spacing:-.02em;} html[data-service-code="basc"] .basc-gh__label{position:relative;z-index:1;display:inline-block;margin:0 0 26px;padding-bottom:10px;border-bottom:2px solid #1a1a2e;color:#1a1a2e;font-size:17px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .basc-gh__title{position:relative;z-index:1;max-width:31vw;margin:0 0 30px;color:#1a1a2e;font-size:clamp(22px,2.1vw,32px);font-weight:800;line-height:1.45;letter-spacing:-.02em;word-break:keep-all;} html[data-service-code="basc"] .basc-gh__body{position:relative;z-index:1;max-width:30vw;margin:0;color:#3a3a4a;font-size:clamp(14px,1.05vw,16px);font-weight:500;line-height:1.85;letter-spacing:-.01em;word-break:keep-all;} html[data-service-code="basc"] .basc-gh__figure{position:relative;align-self:stretch;min-height:520px;background:#0e0e14;overflow:hidden;} html[data-service-code="basc"] .basc-gh__img{display:block;width:100%;height:100%;object-fit:cover;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-gh{grid-template-columns:1fr;} html[data-service-code="basc"] .basc-gh__text{padding:72px 24px;order:2;} html[data-service-code="basc"] .basc-gh__num{right:24px;top:40px;} html[data-service-code="basc"] .basc-gh__figure{order:1;min-height:280px;aspect-ratio:16/10;} } /* ===== basc 02 Digital Archive ===== */ html[data-service-code="basc"] .basc-da{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:#fff;padding:clamp(56px,9.1vw,175px) 0 calc(48px + 5vw);} html[data-service-code="basc"] .basc-da__text{grid-area:1/1;background:#2d2d2d;padding:clamp(64px,5.2vw,100px) 4vw clamp(72px,6.25vw,120px) 16.2vw;} html[data-service-code="basc"] .basc-da__label{display:inline-block;margin:0 0 30px;padding-bottom:14px;border-bottom:2px solid #fff;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .basc-da__title{max-width:31vw;margin:0 0 34px;color:#fff;font-size:clamp(22px,2.1vw,32px);font-weight:800;line-height:1.45;letter-spacing:-.02em;word-break:keep-all;} html[data-service-code="basc"] .basc-da__body{max-width:30vw;margin:0;color:rgba(255,255,255,.82);font-size:clamp(14px,1.05vw,16px);font-weight:500;line-height:2.05;letter-spacing:-.01em;word-break:keep-all;} html[data-service-code="basc"] .basc-da__media{grid-area:1/2;align-self:stretch;display:flex;transform:translateY(5vw);} html[data-service-code="basc"] .basc-da__media > [data-cms-widget-key]{flex:1;min-width:0;position:relative;} html[data-service-code="basc"] .cms-yt-embed{position:absolute;inset:0;background:#000;overflow:hidden;} html[data-service-code="basc"] .cms-yt-embed__poster{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;} html[data-service-code="basc"] .cms-yt-embed__thumb{display:block;width:100%;height:100%;object-fit:contain;} html[data-service-code="basc"] .cms-yt-embed__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:clamp(68px,6.5vw,125px);transition:transform .2s ease;} html[data-service-code="basc"] .cms-yt-embed__icon{display:block;width:100%;height:auto;} html[data-service-code="basc"] .cms-yt-embed__poster:hover .cms-yt-embed__badge{transform:translate(-50%,-50%) scale(1.06);} html[data-service-code="basc"] .cms-yt-embed__poster:focus-visible .cms-yt-embed__badge{transform:translate(-50%,-50%) scale(1.06);} html[data-service-code="basc"] .cms-yt-embed__poster:focus-visible{outline:3px solid #fff;outline-offset:-3px;} html[data-service-code="basc"] .cms-yt-embed__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-da{grid-template-columns:1fr;padding:0 0 56px;} html[data-service-code="basc"] .basc-da__text{grid-area:auto;padding:64px 24px;order:1;} html[data-service-code="basc"] .basc-da__title{max-width:none;} html[data-service-code="basc"] .basc-da__body{max-width:none;} html[data-service-code="basc"] .basc-da__media{grid-area:auto;align-self:auto;display:block;transform:none;order:2;} html[data-service-code="basc"] .basc-da__media > [data-cms-widget-key]{position:static;} html[data-service-code="basc"] .cms-yt-embed{position:relative;inset:auto;width:100%;aspect-ratio:16/10;} } /* ===== basc 03 NOTICE ===== */ html[data-service-code="basc"] .basc-nt{background:#fff;padding:96px 0 120px;} html[data-service-code="basc"] .basc-nt__head{margin:0 16.2vw clamp(28px,2.55vw,49px);padding:0;text-align:center;} html[data-service-code="basc"] .basc-nt__label{display:inline-block;margin:0 0 26px;padding-bottom:12px;border-bottom:2px solid #1a1a2e;color:#1a1a2e;font-size:17px;font-weight:800;letter-spacing:.02em;} html[data-service-code="basc"] .basc-nt__title{margin:0 0 26px;color:#1a1a2e;font-size:clamp(24px,2.4vw,36px);font-weight:800;line-height:1.35;letter-spacing:-.02em;word-break:keep-all;} html[data-service-code="basc"] .basc-nt__desc{max-width:58vw;margin:0 auto;color:#3a3a4a;font-size:clamp(14px,1.05vw,16px);font-weight:500;line-height:1.75;letter-spacing:-.01em;word-break:keep-all;} html[data-service-code="basc"] .basc-nt__body{position:relative;margin:0 16.2vw;padding:0;} html[data-service-code="basc"] .basc-nt__body > [data-cms-widget-key]{margin:-32px -24px;} html[data-service-code="basc"] .basc-nt .widget-ssr-board-list{margin:-8px 0 -16px;} html[data-service-code="basc"] .basc-nt .cms-icon[data-icon="image"]{display:none;} html[data-service-code="basc"] .basc-nt .cms-board-badge{display:none;} html[data-service-code="basc"] .basc-nt .cms-board-pagination{display:none;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-nt{padding:64px 0 72px;} html[data-service-code="basc"] .basc-nt__head{margin:0 0 40px;padding:0 20px;} html[data-service-code="basc"] .basc-nt__body{margin:0;padding:0 20px;} html[data-service-code="basc"] .basc-nt__body > [data-cms-widget-key]{margin:0;} html[data-service-code="basc"] .basc-nt .widget-ssr-board-list{margin:0;} } /* >>> basc-mobile-header : 시작 (스크립트 소유 구간) */ /* ===== basc 모바일 헤더(아이콘 + 햄버거 + 전체메뉴) ===== */ html[data-service-code="basc"] .basc-hd__burger{display:none;} html[data-service-code="basc"] .allmenu{display:none;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-hd__nav{display:none;} html[data-service-code="basc"] .basc-hd__right{gap:14px;} html[data-service-code="basc"] .basc-hd__burger{display:block;width:30px;height:30px;padding:0;border:0;background:transparent no-repeat center/24px 24px;cursor:pointer;} html[data-service-code="basc"] .basc-hd__burger{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M3%2012h18'%2F%3E%3Cpath%20d%3D'M3%2018h18'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .basc-hd__logo--word{display:block;} @media (max-width:400px){ html[data-service-code="basc"] .basc-hd__logo{height:22px;} html[data-service-code="basc"] .basc-hd__right{gap:10px;} } html[data-service-code="basc"] .cms-member-auth{gap:12px;} html[data-service-code="basc"] .cms-member-auth__link{width:26px;height:26px;padding:0;overflow:hidden;text-indent:-999px;white-space:nowrap;background:transparent no-repeat center/22px 22px;opacity:.95;} html[data-service-code="basc"] .cms-member-auth__link--sub{display:block;opacity:.95;} html[data-service-code="basc"] .cms-member-auth__name{display:none;} html[data-service-code="basc"] .cms-member-auth__guest .cms-member-auth__link:first-child{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4'%2F%3E%3Cpath%20d%3D'M10%2017l5-5-5-5'%2F%3E%3Cpath%20d%3D'M15%2012H3'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .cms-member-auth__link--sub{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'7'%20r%3D'4'%2F%3E%3Cpath%20d%3D'M19%208v6'%2F%3E%3Cpath%20d%3D'M22%2011h-6'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .cms-member-auth__me .cms-member-auth__link:not(.cms-member-auth__logout){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .cms-member-auth__logout{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'%2F%3E%3Cpath%20d%3D'M16%2017l5-5-5-5'%2F%3E%3Cpath%20d%3D'M21%2012H9'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .allmenu{display:block;position:fixed;inset:0;z-index:300;visibility:hidden;opacity:0;transition:opacity .22s ease,visibility .22s;} html[data-service-code="basc"] .allmenu.is-open{visibility:visible;opacity:1;} html[data-service-code="basc"] .allmenu-backdrop{position:absolute;inset:0;background:rgba(4,0,20,.72);} html[data-service-code="basc"] .allmenu-panel{position:absolute;inset:0;display:flex;flex-direction:column;padding:22px 20px 40px;background:#0b0038;color:#fff;overflow-y:auto;} html[data-service-code="basc"] .allmenu-close{align-self:flex-end;width:40px;height:40px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;} html[data-service-code="basc"] .allmenu-close svg{width:26px;height:26px;} html[data-service-code="basc"] .allmenu-cols{display:flex;flex-direction:column;gap:22px;margin-top:8px;} html[data-service-code="basc"] .am-side{display:flex;flex-wrap:wrap;gap:8px;} html[data-service-code="basc"] .am-cat{padding:9px 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;text-decoration:none;} html[data-service-code="basc"] .am-cat.is-active{background:#fff;border-color:#fff;color:#5417C9;} html[data-service-code="basc"] .am-mega .sb-mega{display:none;} html[data-service-code="basc"] .am-mega .sb-mega.is-active{display:block;} html[data-service-code="basc"] .sb-mega-eyebrow{display:none;} html[data-service-code="basc"] .sb-mega-title{margin:0 0 14px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;} html[data-service-code="basc"] .mega-cols{display:flex;flex-direction:column;gap:0;} html[data-service-code="basc"] .mega-box{border-bottom:1px solid rgba(255,255,255,.14);} html[data-service-code="basc"] .mega-box-head{display:block;padding:15px 2px;color:rgba(255,255,255,.92);font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;} html[data-service-code="basc"] .mega-box-head:hover{color:#fff;} html[data-service-code="basc"] .mega-bullets{margin:0 0 12px;padding:0 0 0 2px;list-style:none;} html[data-service-code="basc"] .mega-bullets a{display:block;padding:9px 0;color:rgba(255,255,255,.72);font-size:14px;text-decoration:none;} html[data-service-code="basc"] .mega-bullets a:hover{color:#fff;} } @media (prefers-reduced-motion:reduce){ html[data-service-code="basc"] .allmenu{transition:none;} } /* <<< basc-mobile-header : 끝 */ /* >>> basc-subpage+apply : 시작 (스크립트 소유 구간) */ /* ===== basc 서브페이지 공통(히어로 + 페이지 타이틀) ===== */ html[data-service-code="basc"] .basc-sub,html[data-service-code="basc"] .basc-page{margin-left:calc(-1 * var(--basc-bleed,32px));margin-right:calc(-1 * var(--basc-bleed,32px));} html[data-service-code="basc"] .basc-sub{margin-top:calc(-1 * var(--basc-bleed,32px));} html[data-service-code="basc"] .basc-sub{position:relative;width:auto;height:600px;background:#0b0038;} html[data-service-code="basc"] .basc-sub__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;} html[data-service-code="basc"] .basc-sub::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.3);} html[data-service-code="basc"] .basc-sub__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;max-width:1500px;width:90%;margin:0 auto;padding-bottom:28px;} html[data-service-code="basc"] .basc-sub__title{margin:0 0 22px;color:#fff;font-size:80px;font-weight:800;line-height:1.1;letter-spacing:-.03em;text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);} html[data-service-code="basc"] .basc-sub__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.28);} html[data-service-code="basc"] .basc-sub__path{display:flex;align-items:center;gap:12px;margin:0;color:rgba(255,255,255,.92);font-size:15px;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.5);} html[data-service-code="basc"] .basc-sub__path a{color:inherit;text-decoration:none;opacity:.9;} html[data-service-code="basc"] .basc-sub__path a:hover{opacity:1;text-decoration:underline;} html[data-service-code="basc"] .basc-sub__nav{position:relative;flex:0 0 auto;} html[data-service-code="basc"] .basc-sub__nav-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:200px;height:52px;padding:0 20px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;cursor:pointer;list-style:none;transition:background-color .18s ease,border-color .18s ease;} html[data-service-code="basc"] .basc-sub__nav-btn::-webkit-details-marker{display:none;} html[data-service-code="basc"] .basc-sub__nav-btn::marker{content:"";} html[data-service-code="basc"] .basc-sub__nav-btn{background:rgba(10,4,42,.34) no-repeat right 20px center/16px 16px url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209l6%206%206-6'%2F%3E%3C%2Fsvg%3E");padding-right:48px;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);} html[data-service-code="basc"] .basc-sub__nav-btn:hover{background-color:rgba(10,4,42,.5);border-color:#fff;} html[data-service-code="basc"] .basc-sub__nav[open] .basc-sub__nav-btn{background-color:rgba(10,4,42,.5);border-color:rgba(255,255,255,.75);border-bottom-color:transparent;border-radius:26px 26px 0 0;} html[data-service-code="basc"] .basc-sub__nav[open] .basc-sub__nav-btn{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%2015l-6-6-6%206'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .basc-sub__nav-list{position:absolute;right:0;top:100%;z-index:20;min-width:100%;box-sizing:border-box;margin:0;padding:6px;list-style:none;background:rgba(10,4,42,.74);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.75);border-top:0;border-radius:0 0 22px 22px;box-shadow:0 22px 46px rgba(4,0,20,.35);} html[data-service-code="basc"] .basc-sub__nav-list a{display:block;padding:12px 18px;border-radius:14px;color:rgba(255,255,255,.9);font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease;} html[data-service-code="basc"] .basc-sub__nav-list a:hover{background:rgba(255,255,255,.16);color:#fff;} html[data-service-code="basc"] .basc-sub__nav-list a[aria-current="page"]{background:rgba(255,255,255,.2);color:#fff;font-weight:800;} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html[data-service-code="basc"] .basc-sub__nav-btn{background-color:rgba(10,4,42,.6);} html[data-service-code="basc"] .basc-sub__nav-list{background:rgba(10,4,42,.9);} } html[data-service-code="basc"] .basc-sub__path span{flex:0 0 auto;width:8px;height:12px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.75)'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .basc-sub__path a:first-child{width:20px;height:18px;overflow:hidden;text-indent:-999px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'rgba(255%2C255%2C255%2C.92)'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2010.5%2012%203l9%207.5'%2F%3E%3Cpath%20d%3D'M5%209.8V21h14V9.8'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .basc-page{width:auto;padding:120px max(5%,calc((100% - 1500px) / 2));} html[data-service-code="basc"] .basc-pt{width:100%;text-align:center;margin-bottom:64px;} html[data-service-code="basc"] .basc-pt__sub{margin:0 0 8px;color:#0B0038;font-size:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;} html[data-service-code="basc"] .basc-pt__title{margin:0;font-size:48px;font-weight:800;line-height:1.5;color:#1a1a2e;} html[data-service-code="basc"] .basc-pt__title span{display:inline-block;padding-bottom:16px;border-bottom:2px solid #0B0038;position:relative;z-index:1;} html[data-service-code="basc"] .basc-pt__rule{height:1px;margin-top:-2px;background:#cbd5e0;} /* ===== basc 교육신청 (form.authored + basc.atc-apply) ===== */ html[data-service-code="basc"] .basc-apply__wrap{max-width:1000px;margin:0 auto;} html[data-service-code="basc"] .basc-apply [hidden]{display:none;} html[data-service-code="basc"] .af-intro{margin-bottom:0;} html[data-service-code="basc"] .af-course{border-top:2px solid #5417C9;border-bottom:2px solid #5417C9;padding:36px 40px;margin-bottom:40px;text-align:center;background:#fff;} html[data-service-code="basc"] .af-course__label{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 12px;color:#5417C9;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;} html[data-service-code="basc"] .af-course__label span{width:32px;height:1px;background:#5417C9;opacity:.5;} html[data-service-code="basc"] .af-course__name{margin:0;color:#1a1a2e;font-size:30px;font-weight:900;letter-spacing:-.02em;line-height:1.3;} html[data-service-code="basc"] .af-lead{margin:0;color:#6b6b7b;font-size:16px;font-weight:500;line-height:1.9;text-align:center;} html[data-service-code="basc"] .af-form{display:grid;gap:96px;} html[data-service-code="basc"] .af-sec__hd{display:flex;align-items:flex-end;gap:24px;padding-bottom:20px;margin-bottom:32px;border-bottom:1px solid rgba(11,0,56,.08);} html[data-service-code="basc"] .af-sec__num{flex:0 0 auto;color:#5417C9;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:68px;font-weight:900;line-height:1;letter-spacing:-.02em;} html[data-service-code="basc"] .af-sec__txt{flex:1 1 auto;min-width:0;} html[data-service-code="basc"] .af-sec__title{margin:0;color:#1a1a2e;font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.3;} html[data-service-code="basc"] .af-sec__desc{margin:0;color:#6b6b7b;font-size:16px;font-weight:500;line-height:1.7;} html[data-service-code="basc"] .af-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;} html[data-service-code="basc"] .af-stack{display:grid;gap:24px;} html[data-service-code="basc"] .af-grid + .af-stack{margin-top:24px;} html[data-service-code="basc"] .af-label{display:block;margin:0 0 8px;color:#1a1a2e;font-size:14px;font-weight:700;letter-spacing:-.01em;} html[data-service-code="basc"] .af-req{color:#e53e3e;font-style:normal;margin-left:4px;} html[data-service-code="basc"] .af-input{display:block;width:100%;box-sizing:border-box;height:45px;padding:0 12px;background:#fff;color:#1a1a2e;border:1px solid rgba(11,0,56,.15);border-radius:6px;font-family:inherit;font-size:14px;line-height:1.4;transition:border-color .15s ease,box-shadow .15s ease;} html[data-service-code="basc"] .af-input::placeholder{color:#a0a0b0;} html[data-service-code="basc"] .af-input:hover{border-color:#5417C9;} html[data-service-code="basc"] .af-input:focus{outline:none;border-color:#5417C9;box-shadow:0 0 0 2px #CCCCFF;} html[data-service-code="basc"] .af-select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235417C9'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209l6%206%206-6'%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px 18px;} html[data-service-code="basc"] .af-textarea{height:auto;min-height:96px;padding:16px;line-height:1.6;resize:vertical;} html[data-service-code="basc"] .af-help{margin:8px 0 0;color:#6b6b7b;font-size:12px;line-height:1.6;} html[data-service-code="basc"] .af-tablebox{border:1px solid rgba(11,0,56,.08);border-radius:6px;overflow:hidden;} html[data-service-code="basc"] .af-table{width:100%;border-collapse:collapse;} html[data-service-code="basc"] .af-table th{background:rgba(11,0,56,.03);color:#1a1a2e;font-size:14px;font-weight:800;text-align:left;padding:11px 14px;} html[data-service-code="basc"] .af-table td{color:#3a3a4a;font-size:14px;padding:13px 14px;border-top:1px solid rgba(11,0,56,.08);vertical-align:top;} html[data-service-code="basc"] .af-table__key{color:#1a1a2e;font-weight:600;} html[data-service-code="basc"] .af-table__c1{width:25%;} html[data-service-code="basc"] .af-table__c3{width:22%;} html[data-service-code="basc"] .af-note{background:#fff;border:1px solid rgba(11,0,56,.08);border-left:3px solid #5417C9;border-radius:6px;padding:14px 20px;} html[data-service-code="basc"] .af-note__title{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding-left:22px;color:#1a1a2e;font-size:14px;font-weight:800;background-repeat:no-repeat;background-position:left center;background-size:14px 14px;} html[data-service-code="basc"] .af-note--phone .af-note__title{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235417C9'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'2'%20width%3D'14'%20height%3D'20'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M12%2018h.01'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .af-note--pen .af-note__title{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235417C9'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2020h9'%2F%3E%3Cpath%20d%3D'M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .af-note__title em{color:#5417C9;font-style:normal;font-weight:800;} html[data-service-code="basc"] .af-note__body{margin:0;color:#3a3a4a;font-size:14px;font-weight:500;line-height:1.7;text-align:justify;} html[data-service-code="basc"] .af-note__body strong{color:#1a1a2e;font-weight:800;} html[data-service-code="basc"] .af-disclaimer{margin:0;color:#3a3a4a;font-size:14px;font-weight:500;line-height:1.7;} html[data-service-code="basc"] .af-agree{padding:16px 0;border-top:1px solid rgba(11,0,56,.08);} html[data-service-code="basc"] .af-agree--boxed{border-bottom:1px solid rgba(11,0,56,.08);} html[data-service-code="basc"] .af-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;} html[data-service-code="basc"] .af-check input{position:absolute;width:1px;height:1px;opacity:0;margin:0;} html[data-service-code="basc"] .af-check__box{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border:1px solid rgba(11,0,56,.25);border-radius:4px;background:#fff no-repeat center/12px 12px;transition:background-color .15s ease,border-color .15s ease;} html[data-service-code="basc"] .af-check input:checked + .af-check__box{background-color:#5417C9;border-color:#5417C9;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206L9%2017l-5-5'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .af-check input:focus-visible + .af-check__box{box-shadow:0 0 0 2px #CCCCFF;border-color:#5417C9;} html[data-service-code="basc"] .af-check__txt{color:#1a1a2e;font-size:14px;font-weight:600;line-height:1.7;} html[data-service-code="basc"] .af-check__txt em{color:#e53e3e;font-style:normal;} html[data-service-code="basc"] .af-error{margin:0;padding:12px 16px;background:#fff5f5;border:1px solid #feb2b2;border-radius:6px;color:#c53030;font-size:14px;font-weight:600;} html[data-service-code="basc"] .af-submit{display:flex;justify-content:center;padding-top:8px;} html[data-service-code="basc"] .af-submit__btn{min-width:260px;height:60px;padding:0 56px;border:0;border-radius:999px;background:#5417C9;color:#fff;font-family:inherit;font-size:16px;font-weight:900;letter-spacing:.02em;cursor:pointer;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;} html[data-service-code="basc"] .af-submit__btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 10px 30px rgba(11,0,56,.25);} html[data-service-code="basc"] .af-submit__btn:active{transform:translateY(0);} html[data-service-code="basc"] .af-submit__btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;} html[data-service-code="basc"] .af-gate,html[data-service-code="basc"] .af-done{max-width:640px;margin:0 auto;padding:56px 32px;border:1px solid rgba(11,0,56,.08);border-radius:10px;background:#fff;text-align:center;} html[data-service-code="basc"] .af-gate__title,html[data-service-code="basc"] .af-done__title{margin:0 0 10px;color:#1a1a2e;font-size:22px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .af-gate__body,html[data-service-code="basc"] .af-done__body{margin:0;color:#6b6b7b;font-size:15px;font-weight:500;line-height:1.8;} html[data-service-code="basc"] .af-gate__btn{display:inline-block;margin-top:24px;padding:0 40px;height:52px;line-height:52px;border-radius:999px;background:#5417C9;color:#fff;font-size:15px;font-weight:800;text-decoration:none;transition:background-color .2s ease;} html[data-service-code="basc"] .af-gate__btn:hover{background:#000;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-sub{height:500px;} html[data-service-code="basc"] .basc-sub__title{font-size:44px;margin-bottom:16px;} html[data-service-code="basc"] .basc-sub__foot{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:16px;} html[data-service-code="basc"] .basc-sub__path{font-size:13px;gap:8px;} html[data-service-code="basc"] .basc-sub__nav-btn{min-width:0;height:46px;font-size:14px;} html[data-service-code="basc"] .basc-sub__nav-list{left:0;right:auto;} html[data-service-code="basc"] .basc-page{padding:80px max(5%,calc((100% - 1500px) / 2));} html[data-service-code="basc"] .basc-pt{margin-bottom:48px;} html[data-service-code="basc"] .basc-pt__sub{font-size:14px;} html[data-service-code="basc"] .basc-pt__title{font-size:26px;} html[data-service-code="basc"] .basc-pt__title span{padding-bottom:12px;} html[data-service-code="basc"] .af-intro{margin-bottom:0;} html[data-service-code="basc"] .af-course{padding:28px 20px;margin-bottom:32px;} html[data-service-code="basc"] .af-course__name{font-size:20px;} html[data-service-code="basc"] .af-course__label span{width:20px;} html[data-service-code="basc"] .af-lead{font-size:14px;line-height:1.8;} html[data-service-code="basc"] .af-form{gap:64px;} html[data-service-code="basc"] .af-sec__hd{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:16px;margin-bottom:24px;} html[data-service-code="basc"] .af-sec__num{font-size:36px;} html[data-service-code="basc"] .af-sec__title{font-size:18px;} html[data-service-code="basc"] .af-sec__desc{font-size:12px;} html[data-service-code="basc"] .af-grid{grid-template-columns:1fr;} html[data-service-code="basc"] .af-table th,html[data-service-code="basc"] .af-table td{padding:10px 12px;font-size:13px;} html[data-service-code="basc"] .af-table__c1{width:30%;} html[data-service-code="basc"] .af-table__c3{width:25%;} html[data-service-code="basc"] .af-submit__btn{width:100%;min-width:0;padding:0 24px;} } @media (prefers-reduced-motion:reduce){ html[data-service-code="basc"] .af-submit__btn,html[data-service-code="basc"] .af-input,html[data-service-code="basc"] .af-check__box{transition:none;} html[data-service-code="basc"] .af-submit__btn:hover{transform:none;} } /* <<< basc-subpage+apply : 끝 */ /* >>> basc-tenant-register : 시작 (스크립트 소유 구간) */ /* ===== basc 입주기업등록 — 교육신청 규칙 재사용 + 이 페이지 전용 몇 개 ===== */ html[data-service-code="basc"] .af-grid--tight{gap:20px 24px;} /* -- 제작 분야: 체크박스 격자 ------------------------------------------- */ html[data-service-code="basc"] .af-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;} html[data-service-code="basc"] .af-pick__item{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid rgba(11,0,56,.15);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s ease,background-color .15s ease;} html[data-service-code="basc"] .af-pick__item:hover{border-color:#5417C9;} html[data-service-code="basc"] .af-pick__item input{position:absolute;width:1px;height:1px;opacity:0;margin:0;} html[data-service-code="basc"] .af-pick__box{flex:0 0 auto;width:18px;height:18px;border:1px solid rgba(11,0,56,.25);border-radius:4px;background:#fff no-repeat center/12px 12px;transition:background-color .15s ease,border-color .15s ease;} html[data-service-code="basc"] .af-pick__txt{color:#1a1a2e;font-size:14px;font-weight:600;letter-spacing:-.01em;} html[data-service-code="basc"] .af-pick__item input:checked ~ .af-pick__box{background-color:#5417C9;border-color:#5417C9;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206L9%2017l-5-5'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .af-pick__item:has(input:checked){border-color:#5417C9;background:rgba(84,23,201,.05);} html[data-service-code="basc"] .af-pick__item input:focus-visible ~ .af-pick__box{box-shadow:0 0 0 2px #CCCCFF;border-color:#5417C9;} /* -- 반복 칸 + 「항목 추가」 ---------------------------------------------- */ html[data-service-code="basc"] .af-slot{display:grid;gap:20px;padding:22px 24px;border:1px solid rgba(11,0,56,.08);border-radius:8px;background:#fff;} html[data-service-code="basc"] .af-slot--row{grid-template-columns:160px minmax(0,1fr);align-items:start;} html[data-service-code="basc"] .af-slot__no{grid-column:1/-1;margin:0;color:#5417C9;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:12px;font-weight:800;letter-spacing:.18em;} html[data-service-code="basc"] .af-add{width:100%;padding:15px;border:1px dashed rgba(84,23,201,.45);border-radius:8px;background:rgba(84,23,201,.04);color:#5417C9;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;} html[data-service-code="basc"] .af-add:hover{background:rgba(84,23,201,.09);border-color:#5417C9;} html[data-service-code="basc"] .af-add:focus-visible{outline:2px solid #5417C9;outline-offset:2px;} /* -- 토글 칸 — 체크하면 상세가 열린다 (CSS 만 · JS 0) --------------------- */ html[data-service-code="basc"] .af-toggle{padding:18px 20px;border:1px solid rgba(11,0,56,.08);border-radius:8px;background:#fff;} html[data-service-code="basc"] .af-toggle .af-help{margin-top:6px;padding-left:28px;} html[data-service-code="basc"] .af-reveal{display:none;margin-top:18px;padding-top:18px;border-top:1px solid rgba(11,0,56,.08);} html[data-service-code="basc"] .af-toggle:has(> .af-check input[type="checkbox"]:checked) .af-reveal{display:block;} /* -- 로고 안내 콜아웃 ---------------------------------------------------- */ html[data-service-code="basc"] .af-note--link .af-note__title{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235417C9'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2013a5%205%200%200%200%207.5.5l3-3a5%205%200%200%200-7-7l-1.8%201.8'%2F%3E%3Cpath%20d%3D'M14%2011a5%205%200%200%200-7.5-.5l-3%203a5%205%200%200%200%207%207l1.8-1.8'%2F%3E%3C%2Fsvg%3E");} @media (max-width:1024px){ html[data-service-code="basc"] .af-pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} html[data-service-code="basc"] .af-pick__item{padding:11px 12px;} html[data-service-code="basc"] .af-pick__txt{font-size:13px;} html[data-service-code="basc"] .af-slot{padding:16px;gap:16px;} html[data-service-code="basc"] .af-slot--row{grid-template-columns:1fr;} html[data-service-code="basc"] .af-toggle{padding:14px 16px;} } @media (prefers-reduced-motion:reduce){ html[data-service-code="basc"] .af-pick__item,html[data-service-code="basc"] .af-add,html[data-service-code="basc"] .af-pick__box{transition:none;} } /* <<< basc-tenant-register : 끝 */ /* >>> basc-notice-listview : 시작 (스크립트 소유 구간) */ /* ===== basc 공지사항 목록(LISTVIEW) — 홈 섹션 + 목록 페이지 공용 ===== */ html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-list.skin-listview-list{position:relative;display:block;margin:0;padding:0;list-style:none;border-top:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item.skin-listview-item{position:relative;display:flex;align-items:center;margin:0;padding:24px 34px;border-bottom:1px solid rgba(11,0,56,.10);overflow:visible;background:none;transition:background-color .18s ease;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > div{display:grid;grid-template-columns:minmax(0,1fr) 120px 240px;align-items:center;gap:0 24px;min-width:0;flex:1 1 auto;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > div > p{display:none;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > div > strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1a1a2e;font-size:17px;font-weight:600;letter-spacing:-.01em;transition:color .18s ease;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > div > div{display:flex;align-items:center;gap:6px;justify-content:flex-start;color:#8a8a99;font-size:15px;font-weight:500;transition:color .18s ease;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .cms-icon[data-icon="image"]{display:none;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .cms-board-badge{display:none;} /* -- 호버: 보라 행 + 흰 글자 ------------------------------------------- */ html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item.skin-listview-item:hover{background:#5417C9;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item:hover > a > div > strong{color:#fff;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item:hover > a > div > div{color:rgba(255,255,255,.72);} /* -- 호버: 그 글의 이미지를 크게 --------------------------------------- */ html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > img{position:absolute;right:154px;top:50%;z-index:2;pointer-events:none;height:auto;width:auto;aspect-ratio:auto;max-height:200px;max-width:224px;border-radius:10px;object-fit:contain;box-shadow:0 18px 40px rgba(4,0,20,.34);opacity:0;transform:translate(50%,-50%) scale(.96);transition:opacity .18s ease,transform .18s ease;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item:hover > a > img{opacity:1;transform:translate(50%,-50%) scale(1);} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > img[src=""]{display:none;} /* -- 홈 섹션은 5줄까지만 ------------------------------------------------ */ html[data-service-code="basc"] .basc-nt .skin-listview-item:nth-child(n+6){display:none;} /* -- 목록 페이지 전용 — 헤더 중복 감춤 · 툴바 여백 ----------------------- */ html[data-service-code="basc"] .basc-board--notice .cms-board-header{display:none;} html[data-service-code="basc"] .basc-board--notice .skin-listview-pagination,html[data-service-code="basc"] .basc-board--notice .cms-board-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:48px;} html[data-service-code="basc"] .basc-nt .skin-listview-pagination,html[data-service-code="basc"] .basc-nt .cms-board-pagination{display:none;} @media (max-width:1024px){ html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item.skin-listview-item{padding:18px 16px;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > div{grid-template-columns:1fr;gap:6px;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > div > strong{white-space:normal;font-size:15px;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > div > div{position:static;transform:none;justify-content:flex-start;font-size:13px;margin-top:6px;} html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > img{display:none;} } @media (prefers-reduced-motion:reduce){ html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item,html[data-service-code="basc"] :is(.basc-nt, .basc-board--notice) .skin-listview-item > a > img{transition:none;} } /* <<< basc-notice-listview : 끝 */ /* >>> basc-news-board : 시작 (스크립트 소유 구간) */ /* ===== basc BASC 소식 목록(공지사항·뉴스·갤러리) ===== */ html[data-service-code="basc"] .basc-board__lead,html[data-service-code="basc"] .basc-board__list{max-width:1000px;margin-left:auto;margin-right:auto;} html[data-service-code="basc"] .basc-board__lead{margin-top:0;margin-bottom:40px;color:#6b6b7b;font-size:16px;font-weight:500;line-height:1.9;text-align:center;} /* -- 툴바 --------------------------------------------------------------- */ html[data-service-code="basc"] .basc-board .cms-board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 28px;background:none !important;border:0 !important;border-bottom:1px solid rgba(11,0,56,.08) !important;border-radius:0 !important;padding:0 0 18px !important;} html[data-service-code="basc"] .basc-board .cms-board-toolbar-total{order:1;color:#6b6b7b;font-size:15px;font-weight:600;} html[data-service-code="basc"] .basc-board .cms-board-search select{display:none !important;} html[data-service-code="basc"] .basc-board .cms-board-toolbar-total-num{color:#5417C9;font-weight:800;} html[data-service-code="basc"] .basc-board .cms-board-sort{display:flex;align-items:center;gap:16px;} html[data-service-code="basc"] .basc-board .cms-board-sort-link{color:#6b6b7b;font-size:14px;font-weight:600;letter-spacing:-.01em;text-decoration:none;} html[data-service-code="basc"] .basc-board .cms-board-sort-link:hover{color:#1a1a2e;} html[data-service-code="basc"] .basc-board .cms-board-sort-link--active{color:#5417C9;font-weight:800;} /* -- 중복 헤더·깨진 아이콘 감춤 ----------------------------------------- */ html[data-service-code="basc"] .basc-board .cms-board-header{display:none;} html[data-service-code="basc"] .basc-board .cms-icon[data-icon="image"]{display:none;} html[data-service-code="basc"] .basc-board .cms-board-badge-new,html[data-service-code="basc"] .basc-board .cms-board-badge-updated{display:none;} /* -- 뉴스: 썸네일 상시 노출 행 목록(LISTVIEW) ---------------------------- */ html[data-service-code="basc"] .basc-board--press .skin-listview-list.skin-listview-list{display:block;margin:0;padding:0;list-style:none;border-top:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .basc-board--press .skin-listview-item.skin-listview-item{display:flex;align-items:flex-start;gap:26px;margin:0;padding:26px 4px;border-bottom:1px solid rgba(11,0,56,.10);background:none;} html[data-service-code="basc"] .basc-board--press .skin-listview-item > a > img{flex:0 0 auto;width:220px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:rgba(11,0,56,.05);transition:opacity .18s ease;} html[data-service-code="basc"] .basc-board--press .skin-listview-item:hover > a > img{opacity:.9;} html[data-service-code="basc"] .basc-board--press .skin-listview-item > a > div{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1 1 auto;} html[data-service-code="basc"] .basc-board--press .skin-listview-item > a > div > strong{display:block;color:#1a1a2e;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .18s ease;} html[data-service-code="basc"] .basc-board--press .skin-listview-item:hover > a > div > strong{color:#5417C9;} html[data-service-code="basc"] .basc-board--press .skin-listview-item > a > div > p{margin:0;color:#6b6b7b;font-size:14px;font-weight:500;line-height:1.7;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} html[data-service-code="basc"] .basc-board--press .skin-listview-item > a > div > div{display:flex;align-items:center;gap:6px;color:#8a8a99;font-size:14px;font-weight:500;} html[data-service-code="basc"] .basc-board--press .skin-listview-item:not(:has(img))::before{content:"";flex:0 0 auto;width:220px;aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,rgba(84,23,201,.08),rgba(84,23,201,.03));} /* -- 카드 격자 ---------------------------------------------------------- */ html[data-service-code="basc"] .basc-board .skin-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px;margin:0;padding:0;list-style:none;} html[data-service-code="basc"] .basc-board--gallery .skin-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px;} html[data-service-code="basc"] .basc-board .skin-photo-card{margin:0;padding:0;list-style:none;background:none;border:0;} html[data-service-code="basc"] .basc-board .cms-board-item-link{display:flex;flex-direction:column;gap:16px;text-decoration:none;} html[data-service-code="basc"] .basc-board :is(.skin-photo-card,.skin-press-card,.skin-movie-card) .cms-board-item-link img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:rgba(11,0,56,.05);display:block;} html[data-service-code="basc"] .basc-board--gallery .skin-photo-card .cms-board-item-link img{aspect-ratio:1/1;} html[data-service-code="basc"] .basc-board--gallery .skin-photo-card .cms-board-item-link:not(:has(img))::before{aspect-ratio:1/1;} html[data-service-code="basc"] .basc-board :is(.skin-photo-card,.skin-press-card,.skin-movie-card) .cms-board-item-link:hover img{opacity:.92;} html[data-service-code="basc"] .basc-board :is(.skin-photo-card,.skin-press-card,.skin-movie-card) .cms-board-item-link:not(:has(img))::before{content:"";display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:linear-gradient(135deg,rgba(84,23,201,.10),rgba(84,23,201,.03));} html[data-service-code="basc"] .basc-board .skin-photo-body{display:flex;flex-direction:column;gap:8px;padding:0;} html[data-service-code="basc"] .basc-board .skin-photo-body{color:#1a1a2e;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.5;} html[data-service-code="basc"] .basc-board .cms-board-item-link:hover .skin-photo-body{color:#5417C9;} /* -- 페이지네이션 ------------------------------------------------------- */ html[data-service-code="basc"] .basc-board .skin-photo-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:56px;} html[data-service-code="basc"] .basc-board .skin-photo-pagination a,html[data-service-code="basc"] .basc-board .skin-photo-pagination span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(11,0,56,.08);border-radius:6px;color:#6b6b7b;font-size:14px;font-weight:600;text-decoration:none;} html[data-service-code="basc"] .basc-board .skin-photo-pagination a:hover{border-color:#5417C9;color:#5417C9;} html[data-service-code="basc"] .basc-board .skin-photo-pagination [aria-current="page"]{background:#5417C9;border-color:#5417C9;color:#fff;} /* -- 빈 목록 ------------------------------------------------------------ */ html[data-service-code="basc"] .basc-board .cms-board-empty,html[data-service-code="basc"] .basc-board .widget-ssr-board-list:empty{display:block;padding:80px 20px;text-align:center;color:#6b6b7b;font-size:15px;} @media (max-width:1024px){ html[data-service-code="basc"] .basc-board__lead{font-size:14px;margin-bottom:28px;} html[data-service-code="basc"] .basc-board__lead,html[data-service-code="basc"] .basc-board__list{max-width:none;} html[data-service-code="basc"] .basc-board--press .skin-listview-item.skin-listview-item{flex-direction:column;gap:14px;} html[data-service-code="basc"] .basc-board--press .skin-listview-item > a > img{width:100%;} html[data-service-code="basc"] .basc-board .skin-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;} html[data-service-code="basc"] .basc-board--gallery .skin-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));} html[data-service-code="basc"] .basc-board .cms-board-toolbar{gap:12px;} html[data-service-code="basc"] .basc-board .skin-photo-body{font-size:15px;} } @media (max-width:560px){ html[data-service-code="basc"] .basc-board .skin-photo-grid,html[data-service-code="basc"] .basc-board--gallery .skin-photo-grid{grid-template-columns:1fr;} } /* <<< basc-news-board : 끝 */ /* >>> basc-recruitment-list : 시작 (V2026_08_28_01) recruitment.list 위젯의 표현. 마크업은 shared-widget-prerender 의 renderers/recruitmentList.ts + markup/recruitmentMarkup.ts 가 낸다(클래스만 부여). 레거시 basc-client 교육 안내 화면의 값 그대로. */ /* 안내문 — 게시판 lead 와 같은 톤이되 폭은 카드 그리드에 맞춰 넓게 둔다. */ html[data-service-code="basc"] .basc-recruit__lead{margin:0 0 40px;color:#6b6b7b;font-size:16px;font-weight:500;line-height:1.9;text-align:center;} /* 카드 그리드 — 992+ 4열 / 768~991 3열 / 767- 1열. 레거시 SimpleGrid 와 같은 분기. */ html[data-service-code="basc"] .rc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:40px;} /* 카드 — a 태그 하나가 카드 전체다(레거시 NextLink 감싸기와 동일 구조). */ html[data-service-code="basc"] .rc-card{display:block;text-decoration:none;background-color:#fff;border:1px solid rgba(11,0,56,.08);border-radius:10px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease,filter .25s ease;} html[data-service-code="basc"] .rc-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(11,0,56,.08);} html[data-service-code="basc"] .rc-card:focus-visible{outline:2px solid var(--ds-brand-primary,#5417C9);outline-offset:2px;} /* 모집이 끝난 카드는 «있지만 물러난» 상태로 보여야 한다(레거시 PERIOD_OVER 처리). */ html[data-service-code="basc"] .rc-card--closed{opacity:.7;filter:brightness(.9);} /* 썸네일 — 정사각. 이미지가 없어도 자리와 높이는 그대로 지킨다. */ html[data-service-code="basc"] .rc-card-thumb{position:relative;display:block;width:100%;aspect-ratio:1 / 1;overflow:hidden;background-color:#edf2f7;border-bottom:1px solid rgba(11,0,56,.08);} html[data-service-code="basc"] .rc-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} html[data-service-code="basc"] .rc-card-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a0aec0;font-size:14px;font-weight:500;} /* 상태 pill — 좌상단. 색은 상태가 정하고 글자는 항상 흰색. */ html[data-service-code="basc"] .rc-pill{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.2);} html[data-service-code="basc"] .rc-pill-ico{flex:0 0 auto;display:block;} html[data-service-code="basc"] .rc-pill--open{background-color:#16a34a;} html[data-service-code="basc"] .rc-pill--upcoming{background-color:#2563eb;} html[data-service-code="basc"] .rc-pill--full{background-color:#dc2626;} html[data-service-code="basc"] .rc-pill--closed{background-color:#1f2937;} html[data-service-code="basc"] .rc-pill--finished{background-color:#475569;} /* 본문 — 제목 2줄 고정 + 아래 세 줄은 값이 없어도 «자리» 를 지킨다(카드 높이 균일). */ html[data-service-code="basc"] .rc-card-body{display:block;padding:16px;} html[data-service-code="basc"] .rc-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;color:#1a1a2e;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.45;} html[data-service-code="basc"] .rc-card-period{display:block;margin-top:8px;color:#8a8a96;font-size:12px;font-weight:500;} html[data-service-code="basc"] .rc-card-schedule{display:block;margin-top:4px;color:#1a1a2e;font-size:12px;font-weight:700;} html[data-service-code="basc"] .rc-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;} html[data-service-code="basc"] .rc-card-count{color:#1a1a2e;font-size:12px;font-weight:700;} html[data-service-code="basc"] .rc-card-price{flex:0 0 auto;color:#dc2626;font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1;} html[data-service-code="basc"] .rc-card-price--free{color:#eda600;} /* 값이 없는 줄 — 지우지 않고 «보이지만 않게» 둔다. display:none 이면 카드마다 높이가 달라진다. */ html[data-service-code="basc"] .rc-slot-empty{visibility:hidden;} /* 더보기 — 브랜드색 outline. 누르면 다음 페이지 카드가 이어붙는다. */ html[data-service-code="basc"] .rc-more-wrap{display:flex;justify-content:center;margin-top:40px;} html[data-service-code="basc"] .rc-more{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 40px;border:1px solid var(--ds-brand-primary,#5417C9);border-radius:6px;background-color:transparent;color:var(--ds-brand-primary,#5417C9);font-size:16px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .2s ease,opacity .2s ease;} html[data-service-code="basc"] .rc-more:hover{background-color:rgba(84,23,201,.06);} html[data-service-code="basc"] .rc-more:disabled{cursor:default;opacity:.6;} /* 0건 — 목록 자리를 비워두지 않고 이유를 적는다. */ html[data-service-code="basc"] .rc-empty{padding:96px 24px;border:1px dashed rgba(11,0,56,.08);border-radius:10px;color:#8a8a96;font-size:16px;text-align:center;} @media (max-width:991px){ html[data-service-code="basc"] .rc-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:767px){ html[data-service-code="basc"] .rc-grid{grid-template-columns:minmax(0,1fr);column-gap:12px;row-gap:32px;} html[data-service-code="basc"] .basc-recruit__lead{font-size:14px;margin-bottom:28px;} html[data-service-code="basc"] .rc-card-body{padding:12px;} html[data-service-code="basc"] .rc-card-title{font-size:14px;} html[data-service-code="basc"] .rc-more-wrap{margin-top:32px;} } /* <<< basc-recruitment-list : 끝 */ /* >>> basc-recruitment-detail : 시작 (V2026_08_28_02) recruitment.detail 위젯의 표현. 마크업은 renderers/recruitmentDetail.ts 가 낸다. */ html[data-service-code="basc"] .rc-detail{max-width:1000px;margin:0 auto;} /* 상단 2단 — 좌 이미지 / 우 정보. 768 미만에서는 세로로 쌓는다. */ html[data-service-code="basc"] .rc-detail-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start;margin-bottom:40px;} /* 대표 이미지 — 정사각. 없으면 자리만 남긴다. */ html[data-service-code="basc"] .rc-detail-thumb{position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;border:1px solid rgba(11,0,56,.08);border-radius:14px;background-color:#edf2f7;} html[data-service-code="basc"] .rc-detail-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} html[data-service-code="basc"] .rc-detail-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a0aec0;font-size:14px;font-weight:500;} /* 우측 — 뱃지 / 제목 / 정보표 / CTA 를 세로로. CTA 는 칸 맨 아래에 붙는다. */ html[data-service-code="basc"] .rc-detail-info{display:flex;flex-direction:column;min-height:100%;} html[data-service-code="basc"] .rc-detail-badges{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;} html[data-service-code="basc"] .rc-price-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .rc-price-badge--free{background-color:#dcfce7;color:#166534;} html[data-service-code="basc"] .rc-price-badge--paid{background-color:#fee2e2;color:#991b1b;} html[data-service-code="basc"] .rc-detail-cat{color:#6b6b7b;font-size:12px;font-weight:600;} html[data-service-code="basc"] .rc-detail-title{margin:0 0 20px;color:#1a1a2e;font-size:30px;font-weight:900;line-height:1.35;letter-spacing:-.01em;} /* 정보표 — dt 라벨 / dd 값. 한 줄에 좌우로 벌린다. */ html[data-service-code="basc"] .rc-detail-facts{margin:0;padding:20px;border:1px solid rgba(11,0,56,.08);border-radius:10px;} html[data-service-code="basc"] .rc-fact{display:flex;align-items:center;justify-content:space-between;gap:16px;} html[data-service-code="basc"] .rc-fact + .rc-fact{margin-top:12px;} html[data-service-code="basc"] .rc-fact-label{margin:0;color:#6b6b7b;font-size:14px;font-weight:500;} html[data-service-code="basc"] .rc-fact-value{margin:0;color:#1a1a2e;font-size:14px;font-weight:700;text-align:right;} /* 카운트다운·상태는 «읽는 즉시 판단되는» 값이라 색으로 구분한다. */ html[data-service-code="basc"] .rc-dday{font-weight:800;} html[data-service-code="basc"] .rc-dday--urgent{color:#dc2626;} html[data-service-code="basc"] .rc-dday--normal{color:#16a34a;} html[data-service-code="basc"] .rc-dday--over{color:#6b6b7b;} html[data-service-code="basc"] .rc-status{font-weight:800;} html[data-service-code="basc"] .rc-status--open{color:#16a34a;} html[data-service-code="basc"] .rc-status--closed{color:#dc2626;} /* 신청 CTA — 알약형 큰 버튼. 신청 불가면 링크가 아니라 span 이 온다(같은 모양, 흐리게). */ html[data-service-code="basc"] .rc-detail-cta{margin-top:auto;padding-top:20px;} html[data-service-code="basc"] .rc-apply{display:flex;align-items:center;justify-content:center;width:100%;height:60px;border-radius:999px;background-color:var(--ds-brand-primary,#5417C9);color:#fff;font-size:17px;font-weight:900;text-decoration:none;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;} html[data-service-code="basc"] a.rc-apply:hover{background-color:#000;transform:translateY(-1px);box-shadow:0 10px 30px rgba(84,23,201,.25);} html[data-service-code="basc"] .rc-apply--disabled{opacity:.5;cursor:not-allowed;} /* 탭 상자 */ html[data-service-code="basc"] .rc-detail-tabs{padding:28px;margin-bottom:24px;border:1px solid rgba(11,0,56,.08);border-radius:14px;background-color:#fff;} html[data-service-code="basc"] .rc-tablist{display:flex;gap:24px;border-bottom:1px solid rgba(11,0,56,.08);} html[data-service-code="basc"] .rc-tab{appearance:none;padding:0 2px 12px;border:0;border-bottom:2px solid transparent;background-color:transparent;color:#6b6b7b;font-size:15px;font-weight:600;cursor:pointer;transition:color .15s ease,border-color .15s ease;} html[data-service-code="basc"] .rc-tab:hover{color:var(--ds-brand-primary,#5417C9);} html[data-service-code="basc"] .rc-tab.is-active{color:var(--ds-brand-primary,#5417C9);border-bottom-color:var(--ds-brand-primary,#5417C9);} html[data-service-code="basc"] .rc-panel{padding-top:20px;} html[data-service-code="basc"] .rc-intro{color:#1a1a2e;font-size:15px;line-height:1.8;} html[data-service-code="basc"] .rc-intro p{margin:0 0 .8em;} html[data-service-code="basc"] .rc-intro-empty{margin:0;color:#6b6b7b;font-size:14px;} /* 후기 */ html[data-service-code="basc"] .rc-reviews-head{margin-bottom:12px;color:#1a1a2e;font-size:14px;font-weight:800;} html[data-service-code="basc"] .rc-reviews{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;} html[data-service-code="basc"] .rc-review{padding:20px;border:1px solid rgba(11,0,56,.08);border-radius:10px;background-color:#fff;} html[data-service-code="basc"] .rc-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;} html[data-service-code="basc"] .rc-review-author{color:#1a1a2e;font-size:14px;font-weight:700;} html[data-service-code="basc"] .rc-review-date{color:#6b6b7b;font-size:12px;} html[data-service-code="basc"] .rc-review-body{margin:0;color:#1a1a2e;font-size:14px;line-height:1.7;} html[data-service-code="basc"] .rc-reviews-empty{padding:48px 24px;border:1px dashed rgba(11,0,56,.08);border-radius:10px;color:#6b6b7b;font-size:14px;text-align:center;} /* 목록으로 */ html[data-service-code="basc"] .rc-detail-foot{display:flex;justify-content:center;padding-top:8px;} html[data-service-code="basc"] .rc-back{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 48px;border:1px solid rgba(11,0,56,.08);border-radius:999px;color:#1a1a2e;font-size:16px;font-weight:700;text-decoration:none;transition:border-color .2s ease,color .2s ease;} html[data-service-code="basc"] .rc-back:hover{border-color:var(--ds-brand-primary,#5417C9);color:var(--ds-brand-primary,#5417C9);} /* 못 불러온 경우 */ html[data-service-code="basc"] .rc-detail--empty{padding:96px 24px;border:1px solid rgba(11,0,56,.08);border-radius:14px;text-align:center;} html[data-service-code="basc"] .rc-detail-empty-text{margin:0 0 20px;color:#6b6b7b;font-size:16px;} @media (max-width:767px){ html[data-service-code="basc"] .rc-detail-top{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:32px;} html[data-service-code="basc"] .rc-detail-title{font-size:22px;margin-bottom:16px;} html[data-service-code="basc"] .rc-detail-facts{padding:16px;} html[data-service-code="basc"] .rc-apply{height:54px;font-size:16px;} html[data-service-code="basc"] .rc-detail-tabs{padding:20px;} html[data-service-code="basc"] .rc-tablist{gap:16px;} html[data-service-code="basc"] .rc-review{padding:16px;} html[data-service-code="basc"] .rc-back{height:54px;padding:0 32px;} } /* <<< basc-recruitment-detail : 끝 */ /* >>> basc-recruitment-apply : 시작 (V2026_08_28_03) 저작 신청서 본체 규칙(af 계열)에는 손대지 않는다. 위젯이 새로 넣은 것만 칠한다. ★이 블록 안에는 그 계열의 선택자를 «글자로도» 쓰지 않는다 — 아래 검증이 추가분에 그 문자열이 섞였는지로 사고를 잡기 때문이다(주석도 같이 걸린다). */ /* ① 위젯 래퍼 2겹을 레이아웃에서 지운다 — 신청 대상 카드가 원본처럼 소개 영역의 자식이 된다. */ html[data-service-code="basc"] [data-cms-widget-key="recruitment.apply"], html[data-service-code="basc"] .rc-apply-root{display:contents;} /* ② 신청 불가 안내 — 폼 위에 먼저 눈에 들어와야 한다. */ html[data-service-code="basc"] .rc-apply-blocked{padding:28px 24px;margin-bottom:32px;border:1px solid #fecaca;border-radius:12px;background-color:#fef2f2;text-align:center;} html[data-service-code="basc"] .rc-apply-blocked__title{margin:0 0 8px;color:#991b1b;font-size:18px;font-weight:800;} html[data-service-code="basc"] .rc-apply-blocked__reason{margin:0 0 20px;color:#6b6b7b;font-size:14px;font-weight:600;} /* ③ 이메일 인증 코드 모달 — 짧은 확인 하나라 화면을 떠나지 않는다. hidden 속성이 붙어 있으면 브라우저 기본 display:none 이 이긴다(별도 규칙 불요). */ html[data-service-code="basc"] .rc-otp{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;} html[data-service-code="basc"] .rc-otp__backdrop{position:absolute;inset:0;background-color:rgba(11,0,56,.55);} html[data-service-code="basc"] .rc-otp__panel{position:relative;width:100%;max-width:420px;padding:32px;border-radius:16px;background-color:#fff;box-shadow:0 24px 60px rgba(11,0,56,.28);} html[data-service-code="basc"] .rc-otp__title{margin:0 0 12px;color:#1a1a2e;font-size:22px;font-weight:900;letter-spacing:-.01em;} html[data-service-code="basc"] .rc-otp__body{margin:0 0 8px;color:#6b6b7b;font-size:14px;line-height:1.7;} html[data-service-code="basc"] .rc-otp__email{margin:0 0 20px;color:var(--ds-brand-primary,#5417C9);font-size:14px;font-weight:800;word-break:break-all;} html[data-service-code="basc"] .rc-otp__label{display:block;margin-bottom:8px;color:#1a1a2e;font-size:13px;font-weight:700;} /* 코드 6자리 — 자간을 벌려 한 글자씩 확인되게 한다. */ html[data-service-code="basc"] .rc-otp__input{width:100%;height:56px;padding:0 16px;border:1px solid rgba(11,0,56,.16);border-radius:10px;background-color:#fff;color:#1a1a2e;font-size:24px;font-weight:800;letter-spacing:.4em;text-align:center;} html[data-service-code="basc"] .rc-otp__input:focus{border-color:var(--ds-brand-primary,#5417C9);outline:2px solid rgba(84,23,201,.18);outline-offset:1px;} html[data-service-code="basc"] .rc-otp__msg{min-height:20px;margin:10px 0 0;color:#dc2626;font-size:13px;line-height:1.5;} html[data-service-code="basc"] .rc-otp__actions{display:flex;flex-direction:column;gap:8px;margin-top:20px;} html[data-service-code="basc"] .rc-otp__btn{appearance:none;height:48px;border:1px solid rgba(11,0,56,.16);border-radius:999px;background-color:#fff;color:#1a1a2e;font-size:15px;font-weight:700;cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease;} html[data-service-code="basc"] .rc-otp__btn:hover{border-color:var(--ds-brand-primary,#5417C9);color:var(--ds-brand-primary,#5417C9);} html[data-service-code="basc"] .rc-otp__btn--primary{border-color:var(--ds-brand-primary,#5417C9);background-color:var(--ds-brand-primary,#5417C9);color:#fff;font-weight:900;} html[data-service-code="basc"] .rc-otp__btn--primary:hover{background-color:#000;border-color:#000;color:#fff;} html[data-service-code="basc"] .rc-otp__btn--quiet{border-color:transparent;color:#6b6b7b;} html[data-service-code="basc"] .rc-otp__btn:disabled{opacity:.6;cursor:default;} /* 모달이 열린 동안 뒤 화면이 같이 스크롤되지 않게. init 이 body 에 이 클래스를 붙인다. */ html[data-service-code="basc"] body.rc-otp-open{overflow:hidden;} @media (max-width:767px){ html[data-service-code="basc"] .rc-otp__panel{padding:24px;} html[data-service-code="basc"] .rc-otp__title{font-size:19px;} html[data-service-code="basc"] .rc-otp__input{height:52px;font-size:20px;} html[data-service-code="basc"] .rc-apply-blocked{padding:20px 16px;margin-bottom:24px;} } /* <<< basc-recruitment-apply : 끝 */ /* >>> basc-atc-intro : 시작 「ATC소개」(/atc/intro) — 문서형(document) 판. 앞선 판은 «구획마다 색 패널» 이었다. 이번엔 반대로 간다: 색 판을 전부 걷고 왼쪽에 구획 이름, 오른쪽에 내용을 두는 «2단 문서» 로 통일한다. 행마다 가로선 하나로만 나뉘고, 소리내는 곳은 맨 위 워드마크 하나뿐이다. ⇒ 정보를 찾으러 온 사람이 왼쪽 열만 훑어 원하는 항목으로 바로 내려갈 수 있다. ★골격은 소개 4면과 같다: 흰 바탕 · .basc-pt 는 .basc-page 직계 · 본문 1000px. 왼쪽 열이 폭을 먹어도 «선» 은 1000px 를 그대로 가로지르므로 면의 폭은 다른 면과 같다. ★구획 이름은 sticky 다 — 표·제원처럼 긴 행에서 이름이 화면에 남아 있어야 길을 잃지 않는다. 규율: !important 없음 · background 축약형 없음 · ::before/::after 없음. */ html[data-service-code="basc"] .basc-atc .atc-in{max-width:1000px;margin-left:auto;margin-right:auto;} /* ── 머리 ── 이 면에서 유일하게 크게 소리내는 곳. 이름 자체가 그림이 된다. */ html[data-service-code="basc"] .atc-open{padding-bottom:56px;margin-bottom:0;} html[data-service-code="basc"] .atc-open__abbr{margin:0;color:#0B0038;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:132px;font-weight:900;letter-spacing:.01em;line-height:.86;} html[data-service-code="basc"] .atc-open__full{margin:18px 0 0;color:var(--ds-brand-primary,#5417C9);font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;} html[data-service-code="basc"] .atc-open__head{margin:40px 0 0;color:#1a1a2e;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.45;text-wrap:balance;} html[data-service-code="basc"] .atc-open__sub{margin:18px 0 0;color:#6b6b7b;font-size:17px;font-weight:500;line-height:1.85;} /* ── 문서 본체 ── 행 하나가 구획 하나. 왼쪽 이름 / 오른쪽 내용. */ html[data-service-code="basc"] .atc-doc{border-top:2px solid #0B0038;} html[data-service-code="basc"] .atc-row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:56px;padding:52px 0;border-bottom:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .atc-row:last-child{border-bottom:2px solid #0B0038;} html[data-service-code="basc"] .atc-row__k{min-width:0;align-self:start;} html[data-service-code="basc"] .atc-row__t{position:sticky;top:32px;margin:0;color:#0B0038;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.5;} html[data-service-code="basc"] .atc-row__v{min-width:0;} /* ── 내용 공통 ── */ html[data-service-code="basc"] .atc-lead{margin:0 0 22px;color:#1a1a2e;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.6;text-wrap:balance;} html[data-service-code="basc"] .atc-p{margin:0;color:#3a3a4a;font-size:16px;font-weight:500;line-height:1.95;} html[data-service-code="basc"] .atc-p + .atc-p{margin-top:16px;} html[data-service-code="basc"] .atc-note{margin:28px 0 0;padding-left:18px;border-left:2px solid var(--ds-brand-primary,#5417C9);color:#3a3a4a;font-size:15px;font-weight:500;line-height:1.8;} /* ── 흐름 ── 문서형이라 레일 대신 한 줄로 흘린다. 화살표는 실제 span. */ html[data-service-code="basc"] .atc-seq{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0 0;} html[data-service-code="basc"] .atc-seq__s{color:var(--ds-brand-primary,#5417C9);font-size:15px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .atc-seq__s--end{color:#0B0038;} html[data-service-code="basc"] .atc-seq__a{flex:0 0 auto;width:14px;height:14px;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235417C9'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E");} /* ── 정의목록(교육 방향) ── */ html[data-service-code="basc"] .atc-list{margin:0;} html[data-service-code="basc"] .atc-list__row{padding:22px 0;border-top:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .atc-list__row:first-child{border-top:0;padding-top:0;} html[data-service-code="basc"] .atc-list__k{margin:0 0 8px;color:#1a1a2e;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.45;} html[data-service-code="basc"] .atc-list__v{margin:0;color:#6b6b7b;font-size:15px;font-weight:500;line-height:1.8;} /* ── 교육 과정 ── 표가 아니라 «단계» 로 그린다. 근거는 이 면의 다른 구획에 있다 — 교육 방향이 «기초 → 심화 → 프로젝트형으로 이어지는 단계 설계» 라고 말하는데 정작 과정은 평평한 표였다. 말과 그림이 어긋난 자리라 세로 레일로 단계를 보인다. 그 문장에 들지 않은 두 과정(Storyboard Pro · 재직자)은 억지로 줄 세우지 않고 아래 따로 묶는다. 레일은 «각 칸의 왼쪽 선» 이라 마지막 칸까지 이어지고 그 내용 끝에서 멈춘다. (마지막 칸만 선을 투명하게 두면 STEP 3 만 빠진 것처럼 보인다 — 실측 지적으로 되돌렸다.) 도착 표시는 선이 아니라 «채운 배지» 가 맡는다. 가상요소 없이 실제 테두리만 쓴다. */ html[data-service-code="basc"] .atc-track__cap{margin:0 0 22px;color:#0B0038;font-size:13px;font-weight:800;letter-spacing:.06em;} html[data-service-code="basc"] .atc-track__cap--alt{margin-top:48px;} html[data-service-code="basc"] .atc-track{margin:0;padding:0;list-style:none;} html[data-service-code="basc"] .atc-track__i{position:relative;padding:0 0 30px 30px;border-left:2px solid rgba(84,23,201,.25);} html[data-service-code="basc"] .atc-track__i--end{padding-bottom:0;} html[data-service-code="basc"] .atc-track__lv{display:inline-block;margin:0 0 10px;padding:5px 11px;border-radius:999px;background-color:rgba(84,23,201,.09);color:var(--ds-brand-primary,#5417C9);font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1;} html[data-service-code="basc"] .atc-track__i--end .atc-track__lv{background-color:var(--ds-brand-primary,#5417C9);color:#fff;} html[data-service-code="basc"] .atc-track__t{margin:0 0 8px;color:#1a1a2e;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.4;} html[data-service-code="basc"] .atc-track__b{margin:0;color:#6b6b7b;font-size:15px;font-weight:500;line-height:1.75;} /* 전문 · 맞춤 과정 — 단계에 들지 않는 둘. 레일 없이 나란히. */ html[data-service-code="basc"] .atc-alt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin:0;padding:0;list-style:none;} html[data-service-code="basc"] .atc-alt__i{min-width:0;padding-top:20px;border-top:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .atc-alt__t{margin:0 0 8px;color:#1a1a2e;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.4;} html[data-service-code="basc"] .atc-alt__b{margin:0;color:#6b6b7b;font-size:14px;font-weight:500;line-height:1.75;} /* 대상 — 「대상」 은 옛 표의 열 이름이다. 값 앞에 작게 붙여 뜻을 분명히 한다. */ html[data-service-code="basc"] .atc-track__who,html[data-service-code="basc"] .atc-alt__who{display:flex;align-items:baseline;gap:8px;margin:12px 0 0;color:#0B0038;font-size:14px;font-weight:700;letter-spacing:-.01em;} html[data-service-code="basc"] .atc-who__k{flex:0 0 auto;color:var(--ds-brand-primary,#5417C9);font-size:11px;font-weight:800;letter-spacing:.1em;} /* ── 제원(교육 환경) ── 색 판 없이 선만으로. */ html[data-service-code="basc"] .atc-spec{margin:0;} html[data-service-code="basc"] .atc-spec__row{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:28px;padding:18px 0;border-top:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .atc-spec__row:first-child{border-top:0;padding-top:0;} html[data-service-code="basc"] .atc-spec__k{margin:0;color:#0B0038;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.5;} html[data-service-code="basc"] .atc-spec__sub{display:inline-block;margin-left:7px;color:var(--ds-brand-primary,#5417C9);font-size:13px;font-weight:600;letter-spacing:0;} html[data-service-code="basc"] .atc-spec__v{margin:0;color:#3a3a4a;font-size:15px;font-weight:500;line-height:1.7;} /* ── 실적 ── 수치만 한 줄로. 위에 가는 선을 둘러 «집계» 임을 보인다. */ html[data-service-code="basc"] .atc-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;margin:28px 0 0;padding:26px 0 0;border-top:1px solid rgba(11,0,56,.14);list-style:none;} html[data-service-code="basc"] .atc-fig{min-width:0;} html[data-service-code="basc"] .atc-fig__n{display:flex;align-items:baseline;gap:3px;margin:0;color:#0B0038;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:42px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;} html[data-service-code="basc"] .atc-fig__u{color:var(--ds-brand-primary,#5417C9);font-size:15px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .atc-fig__l{margin:9px 0 0;color:#6b6b7b;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.5;} /* ── 자격 인증 ── 별도 구획이던 것을 운영 실적 안으로 흡수했다(같은 사실을 두 번 말하던 자리). 구획이 아니라 문장이 됐으므로 크기를 낮춘다. */ html[data-service-code="basc"] .atc-cert{margin:14px 0 0;color:#0B0038;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.7;} html[data-service-code="basc"] .atc-cert strong{font-weight:900;} @media (max-width:1024px){ html[data-service-code="basc"] .atc-open{padding-bottom:40px;} html[data-service-code="basc"] .atc-open__abbr{font-size:84px;} html[data-service-code="basc"] .atc-open__head{margin-top:28px;font-size:25px;} html[data-service-code="basc"] .atc-open__sub{font-size:15px;} html[data-service-code="basc"] .atc-row{grid-template-columns:minmax(0,1fr);row-gap:20px;padding:36px 0;} html[data-service-code="basc"] .atc-row__t{position:static;font-size:17px;} html[data-service-code="basc"] .atc-lead{font-size:18px;margin-bottom:18px;} html[data-service-code="basc"] .atc-p{font-size:15px;line-height:1.9;} html[data-service-code="basc"] .atc-list__k{font-size:16px;} html[data-service-code="basc"] .atc-list__v{font-size:14px;} html[data-service-code="basc"] .atc-track__cap{margin-bottom:18px;} html[data-service-code="basc"] .atc-track__cap--alt{margin-top:36px;} html[data-service-code="basc"] .atc-track__i{padding:0 0 24px 22px;} html[data-service-code="basc"] .atc-track__t{font-size:17px;} html[data-service-code="basc"] .atc-track__b{font-size:14px;} html[data-service-code="basc"] .atc-alt{grid-template-columns:minmax(0,1fr);row-gap:20px;} html[data-service-code="basc"] .atc-alt__t{font-size:16px;} html[data-service-code="basc"] .atc-alt__b{font-size:13px;} html[data-service-code="basc"] .atc-spec__row{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:16px 0;} html[data-service-code="basc"] .atc-figs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px;padding-top:22px;} html[data-service-code="basc"] .atc-fig__n{font-size:36px;} html[data-service-code="basc"] .atc-cert{margin:14px 0 0;color:#0B0038;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.7;} html[data-service-code="basc"] .atc-note{font-size:14px;margin-top:24px;} } @media (max-width:767px){ html[data-service-code="basc"] .atc-open__abbr{font-size:64px;} html[data-service-code="basc"] .atc-open__head{font-size:22px;} html[data-service-code="basc"] .atc-figs{grid-template-columns:minmax(0,1fr);gap:20px;} } /* <<< basc-atc-intro : 끝 */ /* >>> basc-location : 시작 「오시는길」(/about/location). 정보가 주소 한 줄뿐이라 장치를 늘리지 않는다 — 제목 · 주소 · 지도 셋. ★구조 규칙: .basc-pt 는 .basc-page 의 «직계» 다(입주기업등록·교육 안내와 동일). 1000px 상자 안에 넣으면 제목 아래 실선(.basc-pt__rule)만 짧게 잘려 이 면 하나가 좁아 보인다. 따라서 1000px 로 묶는 것은 제목 아래 «본문» 뿐이다. 재사용: .basc-sub(히어로·브레드크럼·서브내비) · .basc-page(폭·여백) · .basc-pt(가운데 제목). 지도는 content.map 위젯(SSR iframe)이 낸다 — 이 블록은 그 «틀» 만 잡는다. 규율: !important 없음 · background 축약형 없음 · 가상요소 content 없음. */ /* 본문 폭 — 다른 본문 면(.basc-apply__wrap / .basc-board__list / .rc-detail)과 같은 1000px. */ html[data-service-code="basc"] .basc-loc .loc-in{max-width:1000px;margin-left:auto;margin-right:auto;} /* 주소 — 이 면의 «사실» 이라 지도보다 먼저 놓고, 굵은 윗선으로 표처럼 세운다. */ html[data-service-code="basc"] .loc-info{margin:0 0 40px;} html[data-service-code="basc"] .loc-info__row{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);column-gap:32px;align-items:baseline;padding:26px 0;border-top:2px solid #0B0038;border-bottom:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .loc-info__k{margin:0;color:var(--ds-brand-primary,#5417C9);font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;} html[data-service-code="basc"] .loc-info__v{margin:0;color:#1a1a2e;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.6;} /* 지도 — 위젯이 iframe 을 100% 로 채운다. 높이는 위젯 props(minHeight)가 정한다. */ html[data-service-code="basc"] .loc-map{overflow:hidden;border:1px solid rgba(11,0,56,.14);background-color:#f5f4f9;line-height:0;} @media (max-width:767px){ html[data-service-code="basc"] .loc-info__row{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:20px 0;} html[data-service-code="basc"] .loc-info__v{font-size:17px;} } /* <<< basc-location : 끝 */ /* >>> basc-greeting : 시작 「인사말」(/about/greeting). 이 면은 편지다 — 장치를 «늘리지 않고 덜어낸다». 앞선 판의 2단 배치·왼쪽 막대·색 강조를 걷어내고 한 단으로 폈다. 남긴 것은 셋뿐: 가운데 머리(짧은 브랜드 선 + 헤드라인) · 왼쪽으로 흐르는 본문 · 가운데 맺음. 가운데 정렬은 «머리와 맺음» 에만 쓴다. 긴 한글 문단을 가운데로 모으면 줄머리가 흔들려 안 읽힌다. ★골격은 다른 소개 면과 같다: 흰 바탕 한 장 · .basc-pt 는 .basc-page 직계 · 본문 1000px. 재사용: .basc-sub · .basc-page · .basc-pt. 규율: !important 없음 · background 축약형 없음 · ::before/::after 없음. */ html[data-service-code="basc"] .basc-greet .gr-in{max-width:1000px;margin-left:auto;margin-right:auto;} /* 머리 — 편지의 제목. 짧은 브랜드 선은 실제 요소다. */ html[data-service-code="basc"] .gr-top{margin-bottom:72px;text-align:center;} html[data-service-code="basc"] .gr-rule{display:block;width:40px;height:3px;margin:0 auto 28px;background-color:var(--ds-brand-primary,#5417C9);} html[data-service-code="basc"] .gr-head{margin:0;color:#0B0038;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.55;text-wrap:balance;} /* 본문 — 인사말은 빽빽하면 안 읽힌다. 행간을 크게 열어 두고 문단 사이도 넉넉히. */ html[data-service-code="basc"] .gr-hello{margin:0 0 32px;color:#1a1a2e;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.85;} html[data-service-code="basc"] .gr-p{margin:0;color:#3a3a4a;font-size:17px;font-weight:500;line-height:2.05;} html[data-service-code="basc"] .gr-p + .gr-p{margin-top:26px;} html[data-service-code="basc"] .gr-p--em{color:#0B0038;font-weight:700;} /* 인용 — 글이 인용한 «현장의 질문». 막대나 따옴표 없이 여백과 크기만으로 떼어 놓는다. */ html[data-service-code="basc"] .gr-quote{margin:68px 0;padding:0;text-align:center;} html[data-service-code="basc"] .gr-quote__p{margin:0;color:var(--ds-brand-primary,#5417C9);font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.65;text-wrap:balance;} /* 맺음 — 가는 선 하나로 편지가 끝났음을 보인다. */ html[data-service-code="basc"] .gr-end{margin-top:76px;padding-top:46px;border-top:1px solid rgba(11,0,56,.14);text-align:center;} html[data-service-code="basc"] .gr-pledge{margin:0;color:#0B0038;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.75;} html[data-service-code="basc"] .gr-wait{margin:16px 0 0;color:#6b6b7b;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.7;} @media (max-width:1024px){ html[data-service-code="basc"] .gr-top{margin-bottom:52px;} html[data-service-code="basc"] .gr-rule{margin-bottom:22px;} html[data-service-code="basc"] .gr-head{font-size:24px;line-height:1.5;} html[data-service-code="basc"] .gr-hello{margin-bottom:26px;font-size:17px;} html[data-service-code="basc"] .gr-p{font-size:15px;line-height:1.95;} html[data-service-code="basc"] .gr-p + .gr-p{margin-top:20px;} html[data-service-code="basc"] .gr-quote{margin:48px 0;} html[data-service-code="basc"] .gr-quote__p{font-size:19px;} html[data-service-code="basc"] .gr-end{margin-top:56px;padding-top:34px;} html[data-service-code="basc"] .gr-pledge{font-size:18px;} html[data-service-code="basc"] .gr-wait{font-size:15px;} } @media (max-width:767px){ html[data-service-code="basc"] .gr-head{font-size:21px;} html[data-service-code="basc"] .gr-quote__p{font-size:17px;} html[data-service-code="basc"] .gr-pledge{font-size:17px;} } /* <<< basc-greeting : 끝 */ /* >>> basc-history : 시작 「설립목적/연혁」(/about/history). 기업·대학 설립목적 면의 어법: ① 미션을 이미지 패널 위에 선언하고 ② 역할을 격자로 벌리고 ③ 협력 구조를 «표가 아니라 조직도» 로 그리고 ④ 시설을 «층별 단면» 으로 쌓고 ⑤ 지표를 짙은 패널에 모아 면을 닫는다. ★골격은 인사말·비전·오시는길과 같다: 흰 바탕 한 장 · .basc-pt 는 .basc-page 직계 · 본문 1000px. 패널의 색·이미지는 «본문 폭 안» 에만 깔린다 — 전폭으로 빼면 이 면만 넓어 보인다. ★미션 패널의 사진은 삽화다(설명이 글에 있으므로 alt 는 비운다). ★조직도·층별 단면의 선은 전부 «실제 요소» 다(가상요소 content 금지 규약 · 캔버스 hit-test 보존). 규율: !important 없음 · background 축약형 없음 · ::before/::after 없음. */ html[data-service-code="basc"] .basc-hist .hs-in{max-width:1000px;margin-left:auto;margin-right:auto;} html[data-service-code="basc"] .hs-sec{min-width:0;} html[data-service-code="basc"] .hs-sec + .hs-sec{margin-top:96px;} /* ── 미션 패널 ── 사진을 판 전체에 깔고 그 위에 선언을 얹는다. ★판 규격(높이 400px)은 «고정» 이다. 사진 원비율에 판을 맞추면 사진마다 면의 리듬이 달라진다 — 사진을 object-fit:cover 로 채워 넣고, 넘치는 부분은 잘리게 둔다. 투명도는 «그렇게 잘려 보이는 영역» 의 실제 픽셀로 재서 흰 글씨 최악 대비 4.5:1 을 넘는 가장 큰 값으로 정한다. 사진을 바꾸면 이 값을 다시 잰다. ★어둡게 덮는 일은 «겹치는 span» 이 아니라 «바탕색 + 사진 투명도» 로 한다. 바탕색은 옛 오버레이와 «같은 색» 이어야 한다 — 남색 토큰(#0B0038)을 쓰면 파랑이 더 섞여 화면이 보랏빛으로 돈다. 그래서 옛 veil 값 그대로 #090020 을 쓴다. 오버레이를 올리면 캔버스에서 그 span 이 먼저 잡혀 정작 바꿔야 할 사진을 못 고른다. ★투명도는 사진 밝기에 맞춰 정한다. 추상 렌더(어두움)는 .34 로 충분했지만 이 사진은 밝아서 그 값이면 손과 지구본이 묻힌다 — .46 으로 올려 «보이되 흰 글씨가 읽히는» 선을 잡았다. 사진을 밝은 것으로 바꾸면 이 값을 낮추고, 어두운 것으로 바꾸면 올린다. */ html[data-service-code="basc"] .hs-mission{position:relative;overflow:hidden;min-height:400px;display:flex;align-items:flex-end;background-color:#090020;} html[data-service-code="basc"] .hs-mission__photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.42;} html[data-service-code="basc"] .hs-mission__in{position:relative;z-index:1;width:100%;padding:56px 48px;} html[data-service-code="basc"] .hs-mission__eyebrow{margin:0 0 18px;color:#a488ff;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgba(6,0,26,.7);} html[data-service-code="basc"] .hs-mission__head{margin:0;color:#fff;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.45;text-wrap:balance;text-shadow:0 2px 12px rgba(6,0,26,.75);} html[data-service-code="basc"] .hs-mission__body{margin:22px 0 0;max-width:62ch;color:rgba(255,255,255,.9);font-size:16px;font-weight:500;line-height:1.9;text-shadow:0 1px 8px rgba(6,0,26,.75);} /* ── 역할 ── 2×2 헤어라인 격자. 상자도 모서리 둥글림도 쓰지 않는다. */ html[data-service-code="basc"] .hs-lead{margin:56px 0 0;color:#1a1a2e;font-size:17px;font-weight:700;letter-spacing:-.01em;} html[data-service-code="basc"] .hs-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;margin-top:16px;} html[data-service-code="basc"] .hs-role{padding:30px 0;border-top:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .hs-role__t{margin:0 0 10px;color:#1a1a2e;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.45;} html[data-service-code="basc"] .hs-role__b{margin:0;color:#6b6b7b;font-size:15px;font-weight:500;line-height:1.8;} /* ── 구획 머리 ── */ html[data-service-code="basc"] .hs-head{margin-bottom:36px;} html[data-service-code="basc"] .hs-rule{display:block;width:40px;height:3px;margin-bottom:20px;background-color:var(--ds-brand-primary,#5417C9);} html[data-service-code="basc"] .hs-h2{margin:0;color:#1a1a2e;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.35;text-wrap:balance;} html[data-service-code="basc"] .hs-say{margin:12px 0 0;color:#6b6b7b;font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.7;text-wrap:balance;} html[data-service-code="basc"] .hs-p{margin:0;color:#3a3a4a;font-size:16px;font-weight:500;line-height:1.95;} /* ── 조직도 ── 표로 적으면 «누가 누구와 붙어 있는지» 가 안 보인다. 허브 + 세 기둥으로 그린다. 연결선은 전부 실제 span 이다. 다리는 3등분 격자의 각 칸 가운데로 내려간다. */ html[data-service-code="basc"] .hs-org{margin-top:48px;} html[data-service-code="basc"] .hs-org__hub{display:block;width:200px;margin:0 auto;padding:16px 0;background-color:var(--ds-brand-primary,#5417C9);color:#fff;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:22px;font-weight:900;letter-spacing:.06em;text-align:center;} html[data-service-code="basc"] .hs-org__wire{display:block;} html[data-service-code="basc"] .hs-org__stem{display:block;width:1px;height:26px;margin:0 auto;background-color:rgba(11,0,56,.28);} html[data-service-code="basc"] .hs-org__bar{display:block;height:1px;margin:0 16.667%;background-color:rgba(11,0,56,.28);} html[data-service-code="basc"] .hs-org__legs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));} html[data-service-code="basc"] .hs-org__legs span{display:block;width:1px;height:26px;margin:0 auto;background-color:rgba(11,0,56,.28);} html[data-service-code="basc"] .hs-org__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;} html[data-service-code="basc"] .hs-org__col{min-width:0;padding:24px 20px;border:1px solid rgba(11,0,56,.14);background-color:#fff;text-align:center;} html[data-service-code="basc"] .hs-org__k{margin:0 0 10px;color:#0B0038;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.45;} html[data-service-code="basc"] .hs-org__v{margin:0;color:#6b6b7b;font-size:14px;font-weight:500;line-height:1.7;} /* ── 협력 네트워크 ── 세 갈래 기관 목록. 연회색 판 위에 올려 조직도와 층을 나눈다. */ html[data-service-code="basc"] .hs-net{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px;margin-top:56px;padding:40px 40px 44px;background-color:#f5f4f9;} html[data-service-code="basc"] .hs-net__col{min-width:0;} html[data-service-code="basc"] .hs-net__t{margin:0 0 4px;padding-bottom:14px;border-bottom:2px solid #0B0038;color:#0B0038;font-size:15px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .hs-net__list{margin:0;padding:0;list-style:none;} html[data-service-code="basc"] .hs-net__list li{padding:13px 0;border-bottom:1px solid rgba(11,0,56,.14);color:#3a3a4a;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.6;} html[data-service-code="basc"] .hs-net__sub{display:block;margin-top:5px;color:#8a8a96;font-size:13px;font-weight:500;line-height:1.55;} /* ── 층별 단면 ── 5F 가 위, 3F 가 아래. 건물을 그대로 세워 «어디에 무엇이 있는지» 를 보인다. */ html[data-service-code="basc"] .hs-bldg{margin:0 0 14px;color:var(--ds-brand-primary,#5417C9);font-size:14px;font-weight:800;letter-spacing:.06em;} html[data-service-code="basc"] .hs-floors{border:1px solid rgba(11,0,56,.16);} html[data-service-code="basc"] .hs-floor{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;border-bottom:1px solid rgba(11,0,56,.16);} html[data-service-code="basc"] .hs-floor:last-child{border-bottom:0;} html[data-service-code="basc"] .hs-floor__no{align-self:stretch;display:flex;align-items:center;justify-content:center;background-color:#0B0038;color:#fff;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:26px;font-weight:900;letter-spacing:.02em;} html[data-service-code="basc"] .hs-floor__txt{min-width:0;padding:26px 28px;} html[data-service-code="basc"] .hs-floor__t{margin:0 0 6px;color:#1a1a2e;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.4;} html[data-service-code="basc"] .hs-floor__b{margin:0;color:#6b6b7b;font-size:15px;font-weight:500;line-height:1.7;} html[data-service-code="basc"] .hs-common{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:baseline;margin-top:20px;padding:20px 28px 0 0;border-top:2px solid #0B0038;} html[data-service-code="basc"] .hs-common__k{margin:0;color:var(--ds-brand-primary,#5417C9);font-size:14px;font-weight:800;letter-spacing:.02em;text-align:center;} html[data-service-code="basc"] .hs-common__v{margin:0;padding-left:28px;color:#3a3a4a;font-size:15px;font-weight:500;line-height:1.7;} /* ── 지표 ── 짙은 판 위에 모아 면을 닫는다. */ html[data-service-code="basc"] .hs-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:48px 40px;background-color:#0B0038;list-style:none;} html[data-service-code="basc"] .hs-fig{min-width:0;} html[data-service-code="basc"] .hs-fig__n{display:flex;align-items:baseline;gap:4px;margin:0;color:#fff;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:56px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;} html[data-service-code="basc"] .hs-fig__u{color:#a488ff;font-size:17px;font-weight:800;letter-spacing:-.01em;} html[data-service-code="basc"] .hs-fig__l{margin:14px 0 0;color:rgba(255,255,255,.86);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.5;} html[data-service-code="basc"] .hs-fig__s{display:block;margin-top:5px;color:rgba(255,255,255,.5);font-size:13px;font-weight:500;line-height:1.5;} @media (max-width:1024px){ html[data-service-code="basc"] .hs-sec + .hs-sec{margin-top:68px;} html[data-service-code="basc"] .hs-mission{min-height:0;} html[data-service-code="basc"] .hs-mission__in{padding:40px 28px;} html[data-service-code="basc"] .hs-mission__eyebrow{margin-bottom:14px;} html[data-service-code="basc"] .hs-mission__head{font-size:25px;} html[data-service-code="basc"] .hs-mission__body{font-size:15px;margin-top:18px;} html[data-service-code="basc"] .hs-lead{margin-top:40px;font-size:16px;} html[data-service-code="basc"] .hs-roles{grid-template-columns:minmax(0,1fr);column-gap:0;} html[data-service-code="basc"] .hs-role{padding:24px 0;} html[data-service-code="basc"] .hs-role__t{font-size:17px;} html[data-service-code="basc"] .hs-role__b{font-size:14px;} html[data-service-code="basc"] .hs-head{margin-bottom:28px;} html[data-service-code="basc"] .hs-h2{font-size:25px;} html[data-service-code="basc"] .hs-say{font-size:16px;} html[data-service-code="basc"] .hs-p{font-size:15px;line-height:1.9;} /* 조직도 — 좁으면 가로 세 기둥이 뭉갠다. 허브 아래 한 줄씩 쌓는다. */ html[data-service-code="basc"] .hs-org{margin-top:36px;} html[data-service-code="basc"] .hs-org__hub{width:100%;font-size:19px;padding:14px 0;} html[data-service-code="basc"] .hs-org__bar{margin:0 auto;width:1px;height:0;} html[data-service-code="basc"] .hs-org__legs{grid-template-columns:minmax(0,1fr);} html[data-service-code="basc"] .hs-org__legs span:nth-child(2),html[data-service-code="basc"] .hs-org__legs span:nth-child(3){display:none;} html[data-service-code="basc"] .hs-org__cols{grid-template-columns:minmax(0,1fr);row-gap:12px;} html[data-service-code="basc"] .hs-org__col{padding:18px 16px;text-align:left;} html[data-service-code="basc"] .hs-net{grid-template-columns:minmax(0,1fr);row-gap:32px;margin-top:44px;padding:28px 24px 32px;} html[data-service-code="basc"] .hs-floor{grid-template-columns:76px minmax(0,1fr);} html[data-service-code="basc"] .hs-floor__no{font-size:20px;} html[data-service-code="basc"] .hs-floor__txt{padding:20px 18px;} html[data-service-code="basc"] .hs-floor__t{font-size:17px;} html[data-service-code="basc"] .hs-floor__b{font-size:14px;} html[data-service-code="basc"] .hs-common{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:18px 0 0;} html[data-service-code="basc"] .hs-common__k{text-align:left;} html[data-service-code="basc"] .hs-common__v{padding-left:0;font-size:14px;} html[data-service-code="basc"] .hs-figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px;padding:36px 28px;} html[data-service-code="basc"] .hs-fig__n{font-size:44px;} html[data-service-code="basc"] .hs-fig__u{font-size:15px;} html[data-service-code="basc"] .hs-fig__l{font-size:14px;} } @media (max-width:767px){ html[data-service-code="basc"] .hs-mission__head{font-size:22px;} html[data-service-code="basc"] .hs-h2{font-size:23px;} html[data-service-code="basc"] .hs-figs{grid-template-columns:minmax(0,1fr);row-gap:26px;} html[data-service-code="basc"] .hs-fig__n{font-size:40px;} } /* <<< basc-history : 끝 */ /* >>> basc-vision : 시작 「비전」(/about/vision). 설립목적 면과 같은 밀도로: ① 비전을 이미지 패널 위에 선언하고 ② «순환 구조» 를 말이 아니라 순환 그림으로 그리고 ③ 전략 3축을 나란히 세우고 ④ 핵심 가치를 표어 패널 + 설명 행으로 나눈다. ★골격은 다른 소개 면과 같다: 흰 바탕 한 장 · .basc-pt 는 .basc-page 직계 · 본문 1000px. 패널의 색·이미지는 «본문 폭 안» 에만 깔린다(전폭 금지). ★이미지는 시설 사진이 아니라 추상 렌더다 — alt 를 비운 장식 배경으로만 쓰고, 바탕색 위 투명도로 대비를 만든다. 바탕색은 옛 오버레이와 «같은 색» 이어야 한다 — 남색 토큰(#0B0038)을 쓰면 파랑이 더 섞여 보랏빛이 돈다. ★판 규격(높이 400px)은 «고정» 이다. 사진 원비율에 판을 맞추면 사진마다 면의 리듬이 달라진다 — 사진을 object-fit:cover 로 채워 넣고, 넘치는 부분은 잘리게 둔다. 투명도는 «그렇게 잘려 보이는 영역» 의 실제 픽셀로 재서 흰 글씨 최악 대비 4.5:1 을 넘는 가장 큰 값으로 정한다. 사진을 바꾸면 이 값을 다시 잰다. file 18 은 .42(최악 5.2:1) — 1.5:1 사진이라 세로 40%가 잘린다. file 10(코일)=비전 선언 · file 5(맞닿는 손·네트워크)=핵심 가치 표어. 뜻이 맞는 자리에만 놓는다. ★순환 화살표는 실제 span 이다(가상요소 content 금지 · 캔버스 hit-test 보존). 회전으로 방향을 만든다. ★01·02·03 은 원문에 있는 번호라 살린다. 신청 폼의 68px 거대 숫자와는 다른 크기로 둔다. 규율: !important 없음 · background 축약형 없음 · ::before/::after 없음. */ html[data-service-code="basc"] .basc-vision .vs-in{max-width:1000px;margin-left:auto;margin-right:auto;} html[data-service-code="basc"] .vs-sec{min-width:0;} html[data-service-code="basc"] .vs-sec + .vs-sec{margin-top:96px;} /* ── 비전 선언 ── 면의 첫 마디. 어두운 추상 배경 + 베일 위에 한글이 서고 영문이 받는다. */ html[data-service-code="basc"] .vs-decl{position:relative;overflow:hidden;min-height:400px;display:flex;align-items:flex-end;background-color:#06001A;} /* ★어둡게 덮는 일은 «겹치는 span» 이 아니라 «바탕색 + 이미지 투명도» 로 한다. 오버레이를 올리면 캔버스에서 그 span 이 먼저 잡혀 정작 바꿔야 할 이미지를 못 고른다. 판을 남색으로 칠하고 이미지를 그 위에 옅게 얹으면 같은 그림이면서 이미지가 직접 눌린다. */ html[data-service-code="basc"] .vs-decl__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.42;} html[data-service-code="basc"] .vs-decl__in{position:relative;z-index:2;width:100%;padding:56px 48px;} html[data-service-code="basc"] .vs-decl__eyebrow{margin:0 0 20px;color:#a488ff;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;} html[data-service-code="basc"] .vs-decl__head{margin:0;color:#fff;font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.4;text-wrap:balance;} html[data-service-code="basc"] .vs-decl__en{margin:22px 0 0;color:rgba(255,255,255,.72);font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:17px;font-weight:600;line-height:1.6;} /* ── 구획 머리 ── */ html[data-service-code="basc"] .vs-hd{margin-bottom:36px;} html[data-service-code="basc"] .vs-rule{display:block;width:40px;height:3px;margin-bottom:20px;background-color:var(--ds-brand-primary,#5417C9);} html[data-service-code="basc"] .vs-h2{margin:0;color:#1a1a2e;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.35;} html[data-service-code="basc"] .vs-say{margin:10px 0 0;color:#6b6b7b;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:16px;font-weight:600;letter-spacing:.02em;} html[data-service-code="basc"] .vs-p{margin:0;color:#3a3a4a;font-size:16px;font-weight:500;line-height:1.95;} /* ── 순환 구조 ── «순환» 이라고 쓰여 있으면 줄로 늘어놓지 말고 실제로 돌려야 한다. 3×3 격자에 네 마디를 모서리에 두고 화살표가 시계 방향으로 잇는다. 마지막 화살표가 처음으로 돌아간다. */ html[data-service-code="basc"] .vs-cycle{display:grid;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);grid-template-rows:auto 84px auto;grid-template-areas:"n1 a1 n2" "a4 mid a2" "n4 a3 n3";margin-top:48px;} html[data-service-code="basc"] .vs-cycle__n{display:flex;align-items:center;justify-content:center;min-width:0;padding:30px 24px;border:1px solid rgba(11,0,56,.16);background-color:#fff;} html[data-service-code="basc"] .vs-cycle__n--1{grid-area:n1;} html[data-service-code="basc"] .vs-cycle__n--2{grid-area:n2;} html[data-service-code="basc"] .vs-cycle__n--3{grid-area:n3;} html[data-service-code="basc"] .vs-cycle__n--4{grid-area:n4;} html[data-service-code="basc"] .vs-cycle__t{margin:0;color:#0B0038;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.45;text-align:center;} html[data-service-code="basc"] .vs-cycle__a{display:block;align-self:center;justify-self:center;width:32px;height:32px;background-repeat:no-repeat;background-position:center;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235417C9'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h13'%2F%3E%3Cpath%20d%3D'M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E");} html[data-service-code="basc"] .vs-cycle__a--1{grid-area:a1;} html[data-service-code="basc"] .vs-cycle__a--2{grid-area:a2;transform:rotate(90deg);} html[data-service-code="basc"] .vs-cycle__a--3{grid-area:a3;transform:rotate(180deg);} html[data-service-code="basc"] .vs-cycle__a--4{grid-area:a4;transform:rotate(270deg);} html[data-service-code="basc"] .vs-cycle__mid{grid-area:mid;align-self:center;justify-self:center;display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin:0;border-radius:50%;background-color:var(--ds-brand-primary,#5417C9);color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em;} /* ── 전략 3축 ── 원문의 01·02·03 을 그대로 쓰되 나란히 세운다. */ html[data-service-code="basc"] .vs-plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;margin:64px 0 0;padding:0;list-style:none;} html[data-service-code="basc"] .vs-plan__i{min-width:0;padding-top:24px;border-top:2px solid #0B0038;} html[data-service-code="basc"] .vs-plan__no{display:block;margin-bottom:14px;color:var(--ds-brand-primary,#5417C9);font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:34px;font-weight:900;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums;} html[data-service-code="basc"] .vs-plan__t{margin:0 0 12px;color:#1a1a2e;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.45;} html[data-service-code="basc"] .vs-plan__b{margin:0;color:#6b6b7b;font-size:15px;font-weight:500;line-height:1.8;} /* ── 핵심 가치 ── 표어는 패널로 세우고, 뜻풀이는 행으로 내린다. */ html[data-service-code="basc"] .vs-motto{position:relative;overflow:hidden;min-height:240px;display:flex;align-items:center;background-color:#06001A;} html[data-service-code="basc"] .vs-motto__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.36;} html[data-service-code="basc"] .vs-motto__in{position:relative;z-index:2;width:100%;padding:48px;text-align:center;} html[data-service-code="basc"] .vs-motto__kr{margin:0;color:#fff;font-size:32px;font-weight:900;letter-spacing:-.02em;line-height:1.4;} html[data-service-code="basc"] .vs-motto__en{margin:14px 0 0;color:#a488ff;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;} html[data-service-code="basc"] .vs-vals{margin:56px 0 0;} html[data-service-code="basc"] .vs-val{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);column-gap:36px;padding:30px 0;border-top:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .vs-val:last-child{border-bottom:1px solid rgba(11,0,56,.14);} html[data-service-code="basc"] .vs-val__k{margin:0;} html[data-service-code="basc"] .vs-val__kr{display:block;color:#0B0038;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.4;} html[data-service-code="basc"] .vs-val__en{display:block;margin-top:5px;color:var(--ds-brand-primary,#5417C9);font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;} html[data-service-code="basc"] .vs-val__b{margin:0;color:#6b6b7b;font-size:15px;font-weight:500;line-height:1.85;} @media (max-width:1024px){ html[data-service-code="basc"] .vs-sec + .vs-sec{margin-top:68px;} html[data-service-code="basc"] .vs-decl{min-height:0;} html[data-service-code="basc"] .vs-decl__in{padding:40px 28px;} html[data-service-code="basc"] .vs-decl__eyebrow{margin-bottom:14px;} html[data-service-code="basc"] .vs-decl__head{font-size:26px;} html[data-service-code="basc"] .vs-decl__en{font-size:15px;margin-top:16px;} html[data-service-code="basc"] .vs-hd{margin-bottom:28px;} html[data-service-code="basc"] .vs-h2{font-size:25px;} html[data-service-code="basc"] .vs-say{font-size:15px;} html[data-service-code="basc"] .vs-p{font-size:15px;line-height:1.9;} /* 순환 — 좁으면 네모 배치가 뭉갠다. 한 줄로 펴고 마지막 되돌이 화살표는 감춘다. */ html[data-service-code="basc"] .vs-cycle{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"n1" "a1" "n2" "a2" "n3" "a3" "n4";margin-top:36px;} html[data-service-code="basc"] .vs-cycle__n{padding:20px 16px;} html[data-service-code="basc"] .vs-cycle__t{font-size:16px;} html[data-service-code="basc"] .vs-cycle__a{width:24px;height:24px;margin:12px 0;transform:rotate(90deg);} html[data-service-code="basc"] .vs-cycle__a--2,html[data-service-code="basc"] .vs-cycle__a--3{transform:rotate(90deg);} html[data-service-code="basc"] .vs-cycle__a--4,html[data-service-code="basc"] .vs-cycle__mid{display:none;} html[data-service-code="basc"] .vs-plan{grid-template-columns:minmax(0,1fr);row-gap:28px;margin-top:44px;} html[data-service-code="basc"] .vs-plan__no{font-size:26px;margin-bottom:10px;} html[data-service-code="basc"] .vs-plan__t{font-size:17px;margin-bottom:10px;} html[data-service-code="basc"] .vs-plan__b{font-size:14px;} html[data-service-code="basc"] .vs-motto{min-height:0;} html[data-service-code="basc"] .vs-motto__in{padding:36px 24px;} html[data-service-code="basc"] .vs-motto__kr{font-size:23px;} html[data-service-code="basc"] .vs-motto__en{font-size:13px;} html[data-service-code="basc"] .vs-vals{margin-top:40px;} html[data-service-code="basc"] .vs-val{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:24px 0;} html[data-service-code="basc"] .vs-val__kr{font-size:18px;} html[data-service-code="basc"] .vs-val__b{font-size:14px;} } @media (max-width:767px){ html[data-service-code="basc"] .vs-decl__head{font-size:22px;} html[data-service-code="basc"] .vs-h2{font-size:23px;} html[data-service-code="basc"] .vs-motto__kr{font-size:19px;} } @media (prefers-reduced-motion:reduce){ html[data-service-code="basc"] .vs-cycle__a{transition:none;} } /* <<< basc-vision : 끝 */

비밀번호 찾기