@charset "utf-8";

/* 내용관리 */
#container {
    padding-top: 0px;
}

#ctt {
    background: #fff
}

.ctt_admin {
    text-align: right
}

#ctt header h1 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#ctt_con {
    margin: 80px auto;
    padding: 0px 10px;
    max-width: 1440px;
    width: 100%;
}

#ctt_con img {
    max-width: 100%;
    height: auto
}

.ctt_img {
    text-align: center
}

/* ======================================================
   대전대성고등학교 - IB교육 공통 스타일
   key color : #1346d4
   prefix    : ib-  (그누보드 에디터/스킨 충돌 방지)
   ====================================================== */

.ib-page { font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:#1e293b; line-height:1.7; }
.ib-page *,.ib-page *::before,.ib-page *::after { box-sizing:border-box; }
.ib-page img { max-width:100%; display:block; }
.ib-blind { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------- 페이지 헤더 ---------- */
.ib-hd { text-align:center; margin-bottom:50px; }
.ib-hd__tag { display:inline-block; background:#1346d4; color:#ffffff; font-size:12px; font-weight:700; letter-spacing:1.5px; padding:5px 16px; border-radius:20px; margin-bottom:16px; }
.ib-hd__title { font-size:30px; font-weight:800; color:#15224a; letter-spacing:-1px; margin:0 0 10px; }
.ib-hd__sub { font-size:15px; color:#6b7280; margin:0; word-break:keep-all; }
.ib-hd__bar { width:52px; height:4px; background:#1346d4; border-radius:2px; margin:18px auto 0; }

/* 본문 블록 간 간격 */
.ib-block { margin-bottom:56px; }
.ib-block:last-child { margin-bottom:0; }
.ib-sub-tit { font-size:21px; font-weight:800; color:#15224a; margin:0 0 18px; padding-left:14px; border-left:4px solid #1346d4; }

/* ---------- 대성IB : 인트로 ---------- */
.ib-intro { display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; align-items:center; }
.ib-intro__visual { background:linear-gradient(150deg,#1346d4 0%,#0d3299 100%); border-radius:18px; padding:48px 28px; color:#ffffff; text-align:center; box-shadow:0 14px 30px rgba(19,70,212,0.25); }
.ib-intro__emblem { width:88px; height:88px; margin:0 auto 18px; border-radius:50%; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; font-size:40px; }
.ib-intro__visual h3 { font-size:22px; font-weight:800; margin:0 0 6px; }
.ib-intro__visual p { font-size:13px; opacity:.85; margin:0; }
.ib-intro__visual .ib-intro__loc { margin-top:10px; font-size:12px; opacity:.65; }
.ib-intro__txt h2 { font-size:26px; font-weight:800; color:#15224a; line-height:1.4; margin:0 0 18px; }
.ib-intro__txt p { color:#475569; margin:0 0 14px; word-break:keep-all; }
.ib-vision { margin-top:26px; background:#f4f7fb; border:1px solid #dce4f0; border-left:5px solid #1346d4; border-radius:10px; padding:22px 24px; }
.ib-vision strong { display:block; color:#1346d4; font-size:16px; margin-bottom:10px; }
.ib-vision p { color:#334155; font-size:14.5px; line-height:1.9; margin:0; }

/* ---------- IB란 : 3카드 ---------- */
.ib-cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ib-card { background:#ffffff; border:1px solid #e3e9f2; border-radius:16px; padding:32px 26px; text-align:center; transition:transform .2s, box-shadow .2s, border-color .2s; }
.ib-card:hover { transform:translateY(-5px); box-shadow:0 16px 30px rgba(19,70,212,0.12); border-color:#b9c9ec; }
.ib-card__ico { width:64px; height:64px; margin:0 auto 18px; border-radius:16px; background:#eef3fd; color:#1346d4; display:flex; align-items:center; justify-content:center; font-size:28px; }
.ib-card h3 { font-size:17px; font-weight:800; color:#15224a; margin:0 0 10px; }
.ib-card p { font-size:14px; color:#64748b; margin:0; word-break:keep-all; }

/* 하이라이트 배너 */
.ib-highlight { margin-top:26px; display:flex; align-items:center; gap:24px; background:linear-gradient(135deg,#15224a 0%,#1346d4 100%); border-radius:16px; padding:34px 36px; color:#ffffff; }
.ib-highlight__ico { flex-shrink:0; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; font-size:30px; }
.ib-highlight h3 { font-size:19px; font-weight:800; margin:0 0 8px; }
.ib-highlight p { font-size:14.5px; opacity:.92; margin:0; word-break:keep-all; }
.ib-highlight p b { color:#ffd966; }

/* ---------- IB 학습자상 (아이콘 img) ---------- */
.ib-learner { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.ib-learner__item { background:#ffffff; border:1px solid #e3e9f2; border-radius:14px; padding:24px 12px; text-align:center; transition:transform .2s, box-shadow .2s; }
.ib-learner__item:hover { transform:translateY(-4px); box-shadow:0 12px 22px rgba(19,70,212,0.1); }
.ib-learner__ico {width: 150px;height: 150px;margin:0 auto 14px;}
.ib-learner__ico img { width:100%; height:100%; object-fit:contain; }
.ib-learner__en { font-size:14px; font-weight:800; color:#1346d4; margin-bottom:4px; }
.ib-learner__ko { font-size:13px; color:#475569; }

/* ---------- DP 교육과정 ---------- */
.ib-dp { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.ib-dp__text h3 { font-size:19px; font-weight:800; color:#15224a; margin:0 0 14px; }
.ib-dp__text p { color:#475569; font-size:14.5px; margin:0 0 14px; word-break:keep-all; }
.ib-dp__list { list-style:none; margin:18px 0 0; padding:0; }
.ib-dp__list li { position:relative; padding:9px 0 9px 26px; font-size:14px; color:#334155; border-bottom:1px dashed #dce4f0; word-break:keep-all; }
.ib-dp__list li:last-child { border-bottom:0; }
.ib-dp__list li::before { content:"\2713"; position:absolute; left:0; top:9px; width:18px; height:18px; line-height:18px; text-align:center; font-size:11px; background:#1346d4; color:#fff; border-radius:50%; }

.ib-dp__subjects { background:#f4f7fb; border:1px solid #dce4f0; border-radius:16px; padding:28px; }
.ib-dp__subjects h4 { font-size:16px; font-weight:800; color:#15224a; margin:0 0 16px; }
.ib-subject { display:flex; align-items:center; gap:14px; background:#ffffff; border:1px solid #e3e9f2; border-radius:10px; padding:13px 16px; margin-bottom:10px; }
.ib-subject__num { flex-shrink:0; width:28px; height:28px; border-radius:8px; background:#1346d4; color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ib-subject__name { font-weight:700; color:#15224a; font-size:15px; }
.ib-subject__detail { margin-left:auto; font-size:12.5px; color:#94a3b8; }
.ib-dp__core { margin-top:22px; padding-top:22px; border-top:2px dashed #cdd9ec; }
.ib-dp__core h4 { margin-bottom:14px; }
.ib-chips { display:flex; flex-wrap:wrap; gap:10px; }
.ib-chip { background:#eef3fd; color:#1346d4; border:1px solid #c5d5f5; font-size:13px; font-weight:700; padding:8px 16px; border-radius:24px; }

/* ---------- 핵심과정 3카드 ---------- */
.ib-core3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ib-core { background:#ffffff; border:1px solid #e3e9f2; border-radius:18px; overflow:hidden; box-shadow:0 6px 16px rgba(21,34,74,0.06); }
.ib-core__head { padding:30px 24px 24px; text-align:center; color:#ffffff; }
.ib-core__head--tok { background:linear-gradient(140deg,#1346d4 0%,#0d3299 100%); }
.ib-core__head--ee { background:linear-gradient(140deg,#2a6cd0 0%,#1346d4 100%); }
.ib-core__head--cas { background:linear-gradient(140deg,#0f7a8c 0%,#0d5f9e 100%); }
.ib-core__abbr { font-size:36px; font-weight:900; letter-spacing:1px; line-height:1; }
.ib-core__full { font-size:13px; opacity:.85; margin-top:8px; }
.ib-core__ko { display:inline-block; margin-top:12px; font-size:14px; font-weight:700; background:rgba(255,255,255,0.18); padding:5px 16px; border-radius:20px; }
.ib-core__body { padding:24px; }
.ib-core__body p { font-size:14px; color:#475569; margin:0; word-break:keep-all; line-height:1.8; }

/* ---------- 이수안내 : 단계 ---------- */
.ib-steps { display:flex; gap:14px; flex-wrap:wrap; counter-reset:ibstep; margin-bottom:46px; }
.ib-step { position:relative; flex:1 1 165px; background:#ffffff; border:1px solid #e3e9f2; border-radius:14px; padding:26px 18px 22px; text-align:center; box-shadow:0 4px 10px rgba(19,70,212,0.05); }
.ib-step__num { width:40px; height:40px; margin:0 auto 14px; border-radius:50%; background:#1346d4; color:#fff; font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.ib-step h4 { font-size:15px; font-weight:800; color:#15224a; margin:0 0 8px; word-break:keep-all; }
.ib-step p { font-size:13px; color:#64748b; margin:0; word-break:keep-all; }
.ib-step:not(:last-child)::after { content:"\203A"; position:absolute; top:50%; right:-11px; transform:translateY(-50%); font-size:26px; color:#b9c9ec; z-index:1; }

.ib-infogrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:46px; }
.ib-info { background:#f4f7fb; border:1px solid #dce4f0; border-radius:14px; padding:22px 22px; }
.ib-info h4 { font-size:15px; font-weight:800; color:#1346d4; margin:0 0 10px; }
.ib-info p { font-size:13.5px; color:#475569; margin:0; line-height:1.8; }

/* 비교표 */
.ib-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:46px; }
.ib-compare { width:100%; border-collapse:collapse; min-width:620px; font-size:14px; }
.ib-compare th,.ib-compare td { border:1px solid #dce4f0; padding:15px 16px; text-align:center; vertical-align:middle; word-break:keep-all; }
.ib-compare thead th { color:#ffffff; font-weight:700; font-size:15px; }
.ib-compare thead th:nth-child(1) { background:#15224a; }
.ib-compare thead th:nth-child(2) { background:#1346d4; }
.ib-compare thead th:nth-child(3) { background:#64748b; }
.ib-compare tbody th { background:#eef3fd; color:#15224a; font-weight:700; }
.ib-compare tbody td:nth-child(2) { background:#f6f9fe; color:#15224a; font-weight:500; }
.ib-compare tbody td:nth-child(3) { color:#64748b; }

/* 학교 유형 */
.ib-types { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.ib-type { background:#ffffff; border:1px solid #e3e9f2; border-radius:16px; padding:28px 24px; text-align:center; transition:transform .2s; }
.ib-type--active { border:2px solid #1346d4; box-shadow:0 14px 30px rgba(19,70,212,0.16); transform:translateY(-4px); }
.ib-type__badge { display:inline-block; font-size:12px; font-weight:700; padding:4px 14px; border-radius:20px; background:#eef3fd; color:#1346d4; margin-bottom:14px; }
.ib-type--active .ib-type__badge { background:#1346d4; color:#fff; }
.ib-type h3 { font-size:18px; font-weight:800; color:#15224a; margin:0 0 12px; }
.ib-type__desc { font-size:13.5px; color:#64748b; margin:0 0 18px; word-break:keep-all; min-height:60px; }
.ib-type__items { list-style:none; margin:0; padding:18px 0 0; border-top:1px dashed #dce4f0; text-align:left; }
.ib-type__items li { position:relative; padding:7px 0 7px 18px; font-size:13px; color:#475569; word-break:keep-all; }
.ib-type__items li::before { content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:#1346d4; }






/*입학안내 자주하는 질문*/
.ib-qna-wrap {max-width: 1440px;margin: 0 auto;}
 
/* 섹션 타이틀 */
.ib-qna-page-title { font-size: 22px; font-weight: 700; color: #1a2f5e; margin-bottom: 32px; letter-spacing: -0.02em; }
 
/* 아코디언 아이템 */
.ib-qna-item {background: #ffffff;border: 1px solid #e4e8f0;border-radius: 10px;margin-bottom: 20px;overflow: hidden;transition: box-shadow 0.2s;padding: 40px;display: flex;flex-wrap: wrap;gap: 0px 15px;}
.ib-qna-item.open {box-shadow: 0 4px 16px #1a2f5e14;border-color: #c8d2e8;}
 
/* 질문 버튼 */
.ib-qna-q {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.ib-qna-q:hover { background: #f4f6fc; }
.ib-qna-item.open .ib-qna-q { background: #f4f6fc; }
 
.ib-qna-q-badge {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #1a2f5e;
  color: #ffffff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ib-qna-item.open .ib-qna-q-badge { background: #3a5bbf; }
 
.ib-qna-q-text {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  color: #1a2f5e;
  line-height: 1.6;
  word-break: keep-all;
  width: 100%;
}
 
.ib-qna-q-arrow {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 3px;
  transition: transform 0.25s;
  fill: none;
  stroke: #888888;
  stroke-width: 2;
}
.ib-qna-item.open .ib-qna-q-arrow { transform: rotate(180deg); stroke: #3a5bbf; }
 
/* 답변 영역 */
.ib-qna-a-wrap {
  transition: max-height 0.35s ease;
  width: 100%;
}
.ib-qna-item.open .ib-qna-a-wrap { max-height: 2000px; }
 
.ib-qna-a {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.ib-qna-a-badge {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #eef2fc;
  color: #3a5bbf;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ib-qna-a-text {
  flex: 1;
  font-size: 16px;
  color: #666;
  line-height: 1.7;
  word-break: keep-all;
}
.ib-qna-a-text img { width: 100%; margin-top: 14px; border-radius: 6px; }
 
/* 구분선 */
.ib-qna-a-divider {height: 1px;background: #eef0f6;margin: 20px 0px;}
 
@media (max-width: 600px) {
  .ib-qna-q { padding: 0; gap: 12px; }
  .ib-qna-q-text { font-size: 16px; }
  .ib-qna-a-divider { margin: 16px 0; }
  .ib-qna-a-text { font-size: 14px; }
  .ib-qna-item { padding: 20px; }
}




/* ======================================================
   반응형 (본문 전체)
   ====================================================== */
@media (max-width: 1024px) {
  #ctt_con { margin: 50px auto; }
  .ib-learner { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 900px) {
  /* 인트로 1단 */
  .ib-intro { grid-template-columns: 1fr; gap: 28px; }
  /* 3카드 → 세로 */
  .ib-cards3 { grid-template-columns: 1fr; }
  /* 하이라이트 배너 세로 정렬 */
  .ib-highlight { flex-direction: column; text-align: center; padding: 28px 24px; }
  /* 학습자상 3열 */
  .ib-learner { grid-template-columns: repeat(3, 1fr); }
  /* DP 1단 */
  .ib-dp { grid-template-columns: 1fr; gap: 28px; }
  /* 핵심과정 1단 */
  .ib-core3 { grid-template-columns: 1fr; }
  /* 이수안내 정보박스 2열 */
  .ib-infogrid { grid-template-columns: repeat(2, 1fr); }
  /* 학교유형 1단 */
  .ib-types { grid-template-columns: 1fr; }
  .ib-type__desc { min-height: 0; }
  .ib-type--active { transform: none; }
}

@media (max-width: 600px) {
  #ctt_con { margin: 36px auto; padding: 0 16px; }

  /* 헤더 */
  .ib-hd { margin-bottom: 36px; }
  .ib-hd__title { font-size: 24px; }
  .ib-hd__sub { font-size: 14px; }

  /* 블록 간격 */
  .ib-block { margin-bottom: 40px; }
  .ib-sub-tit { font-size: 18px; }

  /* 인트로 */
  .ib-intro__visual { padding: 36px 22px; }
  .ib-intro__txt h2 { font-size: 21px; }
  .ib-vision { padding: 18px 18px; }

  /* 카드 */
  .ib-card { padding: 26px 22px; }

  /* 학습자상 2열 */
  .ib-learner { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ib-learner__ico {width: 100px;height: 100px;}

  /* DP 교과목 */
  .ib-dp__subjects { padding: 22px 18px; }
  .ib-subject { gap: 10px; padding: 11px 13px; }
  .ib-subject__detail { display: none; } /* 좁은 화면에서 부가설명 숨김 */

  /* 핵심과정 카드 */
  .ib-core__abbr { font-size: 30px; }

  /* 이수안내 단계 → 세로 + 아래 화살표 */
  .ib-steps { gap: 28px 14px; margin-bottom: 36px; }
  .ib-step { flex: 1 1 100%; }
  .ib-step:not(:last-child)::after {
    content: "\2304";
    top: auto; right: 50%; bottom: -24px;
    transform: translateX(50%);
  }

  /* 정보박스 1열 */
  .ib-infogrid { grid-template-columns: 1fr; margin-bottom: 36px; }

  /* 표 여백 */
  .ib-compare th, .ib-compare td { padding: 12px 10px; font-size: 13px; }
}