/*
.arizonia-regular {
  font-family: "Arizonia", cursive;
  font-weight: 400;
  font-style: normal;
}

Bilbo Swash Caps: CSS class
.bilbo-swash-caps-regular {
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;
}

Carattere: CSS class
.carattere-regular {
  font-family: "Carattere", cursive;
  font-weight: 400;
  font-style: normal;
}

Yesteryear: CSS class
.yesteryear-regular {
  font-family: "Yesteryear", cursive;
  font-weight: 400;
  font-style: normal;
}
*/


/*===================================
공통
====================================*/
* {  -webkit-font-smoothing: antialiased;}
html {
  scroll-behavior: smooth;
}
/*서브공통랩*/
:root {
    --gold: #B8860B;
    --gold2: #E3B358;
    --gold3: #886100;
    --gold4: #e9bb55;
    --gold-bg: #fdf8ed;
    --gold-bd: rgba(184,134,11,0.35);
    --text-g: #555;
    --text-m: #999;
    --text-l: #ddd;
    --bd: rgba(0,0,0,0.1);
    --bg: #ffffff;
    --bg-s: #f8f6f3;
    --gold-dim: rgba(184,134,11,0.18);
    --text: #1a1a1a;
    --dark: #0e0c09;
    --dark2: #1a1710;
    --dark3: #252118;
    --dark4: #302e2a;
    --dark5: #555;
	  --bd-dark:  #cccccc;
	  --bg-s2:     #eee;
	 --bg-c:     #fdfdfd;
		--red:      #cc2222;
	  --green:    #2a7a4f;
		 --radius:   3px;
		 --radius2:   3px;
		 --radius3:   7px;

}


.sub_section { margin-bottom: 6rem;}
.sub_header { margin-bottom: 4.5rem;   text-align:Center;  } 

.sub_label {
    font-family: "Oswald", 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    display: inline-block;
    font-size: clamp(13px, 2.5vw, 18px);
    letter-spacing: 0.45em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.7rem;
}

.sub_title2 {
    font-size: clamp(24px, 6.5vw, 48px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 1.2rem;
}
.sub_title2 em { font-style:normal; font-weight:800; color: var(--gold); }
.sub_lead {
    font-size: clamp(20px, 7.5vv, 30px);
    color: var(--text-g);
    line-height: 1.6;
}

.sub_divider {
    width: clamp(70px, 6.5vw, 200px); height: 1px;
    background: var(--gold);
	margin-top:clamp(30px,6.5vw, 70px);
	margin-left:auto;
	margin-right:auto;
	margin-bottom:clamp(30px, 6.5vw, 70px);
}


/*===================================
.edu_reveal
====================================*/

.edu_reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.85s cubic-bezier(0.19,1,0.22,1), transform 0.85s cubic-bezier(0.19,1,0.22,1);
}
.edu_reveal.visible { opacity: 1; transform: translateY(0); }











x

.wrap-about * {font-size: clamp(14px, 1.1vw, 18px);}

/* ─── 섹션 + 앵커 오프셋 ─── */
.wrap-about.sec,
.wrap-about .sec { padding-top:clamp(40px, 7.5vw, 120px);  }
.wrap-about .sec-anchor {
  visibility: hidden; pointer-events: none;
scroll-margin-top:470px;
}


.wrap-about .s-divider { height: 1px; background: var(--bd); margin: 56px 0 0; }




/* ─── 섹션 헤더 ─── */

.wrap-about  .s-eye {  text-align:Center;
    font-family: "Oswald",sans-serif;
 font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.s-tit {; text-align:Center; font-size: clamp(18px, 4.5vw, 40px);
  letter-spacing: -0.05em; font-weight: 700; color: var(--text); letter-spacing: -.03em; margin-bottom: 6px; }
.s-sub { font-size: clamp(16px, 4.5vw, 22px); color: var(--text-m);  line-height: 1.65;  text-align:center;
padding-bottom:50px; }


/* ─── anav-wrap ─── */
.anav-wrap {
   position:relative;
  background:#fff;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bd);
  transition: top .3s;
  z-index:99;
}

.anav-wrap.scroll { 
  position: fixed; 
  top: 110px;  
  left: 258px;
  width:calc(100% - 354px);
}



.anav {justify-content:Center;
  display: flex; height: 100%;  margin: 0 auto; padding: 0 16px;
  overflow-x: auto; scrollbar-width: none;
}
.anav::-webkit-scrollbar { display: none; }
.anav a {  font-size: clamp(14px, 1.1vw, 18px); line-height:2;
  flex-shrink: 0; display: flex; align-items: center;
  padding: 13px 20px;  font-weight: 600; color: var(--text-m);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all .18s; white-space: nowrap;
  position: relative; bottom: -1px;
}
.anav a:hover { color: var(--text-g); }
.anav a.on { color: var(--text); border-bottom-color: var(--gold); font-weight: 700; }



@media (max-width: 1024px) {

.anav-wrap.scroll { 
  top: 95px;  
  left: 0px;
  width:100%;
}
.anav a {
  padding: 13px 10px; 
}
}



/*===================================
1 협회안내  - 1 협회안내
====================================*/
/* ─── 협회안내  ─── */

.intro_inwrrap {
color:#fff; 
background-image:url('/images/sub/intro_bg.gif');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
background-color:rgba(0,0,0,0.4);
padding-block:clamp(40px, 6.5vw, 90px);
padding-inline:clamp(3% ,2.5vw, 5%);
background-blend-mode: color;
}

/* ─── 협회안내 인용 ─── */

.intro_inwrrap .quote { text-align:center;   }
.intro_inwrrap .quote .q { font-size: clamp(24px,2.8vw,46px); color:var(--gold4);
font-weight: 700;  letter-spacing: -.02em; line-height: 1.3; margin-bottom: 6px; }

/* ─── 본문 ─── */
.intro_inwrrap  .bp { color:#fff ;  padding-block: clamp(30px, 2.5vw, 40px); line-height: 1.6; text-align:Center; }
.intro_inwrrap .sign {text-align:center; font-weight:700; padding-top:30px;}


/* ─── 3열 키워드 ─── */
.intro_inwrrap .grid3 { padding-block: clamp(30px, 2.5vw, 70px);
display:flex; flex-wrap:wrap; gap:20px 4%; justify-content:center;
}
.intro_inwrrap .kw {
  border: 1px solid var(--bd);
  border-radius: 50%;
  max-width: 300px;
  flex: 1;
  aspect-ratio: 1/1;
  padding: 20px 16px;
  text-align: center;
  background: rgba(255,255,255,0.9);
  transition: background .18s, transform .45s ease; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.intro_inwrrap .kw:hover {
  background: rgba(255,255,255,1);
  transform: translateY(-10px);  
}

.intro_inwrrap .kw-en { font-size: 10.5px; font-weight: 600;
    font-family: "Oswald",sans-serif; font-size:clamp(19px, 2.5vw,26px);  
letter-spacing: .12em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
.intro_inwrrap .kw-t  {font-size:clamp(14px, 2.5vw,18px);  line-height: 1.4; font-weight: 300; color: var(--text); margin-bottom: 7px; }
.intro_inwrrap .kw-d  { color: var(--text-m); line-height: 1.4;  display:none;}



/* ─── 배경 카드 ─── */
.wrap-about  .bc { text-align:Center;  padding: 15px 18px; line-height: 1.85;  padding-bottom:clamp(30px, 5.5vw, 80px)}

.wrap-about .system_grid.icon_grid  {border-bottom:1px solid #ddd;}
.wrap-about .system_grid.icon_grid .system_icon svg {width:clamp(60px, 3.5vw, 120px); height:clamp(60px, 3.5vw, 120px);stroke:var(--gold); opacity:0.4;
stroke-width:1.5;}
.wrap-about .system_grid.icon_grid .system_name {font-family: 'Pretendard', sans-serif !important; font-weight:700;
font-size:clamp(19px, 2.5vw,24px); letter-spacing:-0.01rem; color:var(--gold);}




/* ─── 비전 히어로 ─── */
.wrap-about .vh {  padding-block:clamp(50px, 2.5vw, 80px);  margin-top:30px;
text-align:Center; position: relative; overflow: hidden;  
background-image: url('/images/sub/intro_bg2.gif');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: rgba(0,0,0,0.4);
  background-blend-mode: color;
  padding-block:clamp(50px, 5.5vw, 110px);
  }

.wrap-about .vh-txt {  font-weight: 700;
font-size: clamp(19px, 3.5vw,34px);
  letter-spacing: -0.01rem;
color: #fff; line-height: 1.4; letter-spacing: -.02em; }
.wrap-about .vh-sub { margin-top: 12px; font-size: clamp(17px, 2.5vw,24px); color:var(--text-l); line-height: 1.6; }




/* ─── 3열 핵심가치 ─── */
.wrap-about .vgrid { display: grid;  margin-top:30px;
text-align:center; grid-template-columns: repeat(3,1fr); gap: 12px 2%; margin-bottom: 44px; }
.wrap-about .vc { border: 1px solid var(--bd); border-radius: var(--radius); padding: 52px 30px; background: #fff; transition: all .18s; }
.wrap-about .vc:hover { border-color: var(--gold-bd); box-shadow: 0 4px 18px rgba(184,134,11,.08); transform: translateY(-2px); }
.wrap-about .v-num { font-size: clamp(12px, 2.5vw, 18px);   border-radius:50%; margin-left:auto; margin-right:auto;
background:var(--gold-bg);     font-family: "Oswald",sans-serif;  aspect-ratio: 1/1; width:clamp(26px, 2.5vw, 50px); display:flex; flex-wrap:wrap;
justify-content:center; align-items:center;
font-weight: 700; letter-spacing: .1em; color: var(--gold); margin-bottom: 10px; }
.wrap-about .v-en  { font-size: clamp(18px, 2.5vw, 28px);   font-weight: 700; 
 font-family: "Oswald",sans-serif;   text-transform:uppercase;
color: var(--text); letter-spacing: .06em; margin-bottom: 4px; }
.wrap-about .v-ko  { font-size: clamp(16px, 2.5vw, 22px);  font-weight: 600; color: var(--text-m); margin-bottom: 10px; }
.wrap-about .v-d   {  color: var(--text-g); line-height: 1.65; }


/* ─── 미션 리스트 ─── */
.wrap-about .mlist { display: flex; flex-wrap:wrap; gap: 15px 15px ; margin-top:30px; justify-content: space-between; }
.wrap-about  .mi { display: flex; width:calc(50% - 10px);
align-items: flex-start; gap: 14px; padding: 46px 2%; 
border: 1px solid var(--bd); border-radius: var(--radius); background: #eee; transition: border-color .18s; }
.wrap-about  .mi:nth-child(1),
.wrap-about  .mi:nth-child(4) {background:var(--gold-bg)}
.wrap-about   .mi:hover { border-color: var(--gold-bd); }

.wrap-about  .mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 6px; }
.wrap-about  .mt {  font-size: clamp(18px, 2.5vw, 24px);  font-weight: 600;  margin-bottom: 4px; }
.wrap-about .md { color: var(--text-g); line-height: 1.65; }


/* ─── 타임라인 ─── */
.wrap-about .tl-era { margin-bottom: 38px; }
.wrap-about .tl-badge {font-size: clamp(14px, 2.5vw, 22px);  
margin-left:auto; margin-right:auto; display:block;  width:80%; max-width:500px;
margin-bottom:30px;
text-align:Center;  gap: 8px;  font-weight: 700; color: var(--gold); 
padding: 9px 14px; background: var(--gold-bg); border: 1px solid var(--gold-bd); border-radius: 99px;
}


.wrap-about  .tl-list { display: flex; flex-direction: column;     width:100%; max-width:900px;  padding:30px 0px;
margin-left:auto; margin-right:auto;}
.wrap-about  .tl-list .tli { display: flex; position: relative;  gap: 0px 30px;}
.wrap-about .tli::before { content: ''; position: absolute; left: 205px; top: 10px; height:100px; bottom: 0; width: 1px; background: var(--bd); }
.wrap-about .tli:last-child::before { display: none; }
.wrap-about .tld { width: 168px; flex-shrink: 0; padding: 13px 14px 13px 0;
 font-family: "Oswald",sans-serif; font-size:clamp(17px, 2.5vw, 27px);
font-weight: 700; text-align: right; line-height: 1.3; }

.wrap-about .tldw { flex-shrink: 0; display: flex; flex-direction: column; 
align-items: center; padding-top: 17px; position: relative; z-index: 1; }
.wrap-about .tldt { width: 19px; height: 19px; border-radius: 50%; margin-top:5px;
border:6px solid #fff;  flex-shrink: 0; transition: background .15s;   background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.wrap-about .tlb { flex: 1; padding: 11px 0 11px 16px; }
.wrap-about .tlb p { color: var(--text-g); line-height: 1.6;  padding-top:6px;}

/* ─── 반응형 ─── */
@media (max-width: 600px) {
.intro_inwrrap .grid3 {flex-direction:column;}
.intro_inwrrap .grid3 .kw {width:50%; min-width:200px; margin-left:auto; margin-right:auto;}
.wrap-about .vgrid{ grid-template-columns: 1fr; }
.wrap-about .mlist {gap:10px;}
.wrap-about  .mi { width:100%;  padding-inline:30px;}



.wrap-about  .tl-list .tli {  gap: 0px 10px;}
.wrap-about .tli::before {  left: 125px;  }
.wrap-about .tld { width: 108px;  }
.wrap-about .tldw { flex-shrink: 0; display: flex; flex-direction: column; 
align-items: center; padding-top: 17px; position: relative; z-index: 1; }
.wrap-about .tldt { width: 17px; height: 17px; ; margin-top:3px;
border:4px solid #fff;   }

.wrap-about .tlb p {  padding-top:4px;}

}





/*===================================
1 협회안내  - 2 차별화
====================================*/

.Differentiated .hero2 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-inline:8vw;
    overflow: hidden;
	padding-block:clamp(40px, 6.5vw, 90px);
background-image:url('/img/coffeebg.gif') ;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
background-color: rgba(93, 76, 54, 0.7);
background-blend-mode: multiply;
}


.Differentiated .hero-title {
font-size: clamp(29px, 6.5vw, 68px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
    letter-spacing: -0.01em;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 1s 0.4s forwards;
}

.Differentiated .hero-title em {
    color: var(--gold); font-style:normal;
	font-weight:800;
}

.Differentiated .hero-tagline {
font-size: clamp(17px, 1.1vw, 22px);
    color: var(--text-gray);
    line-height: clamp(1, 1.1vw, 2);
    opacity: 0;
    animation: fadeUp 1s 0.6s forwards;
}

.Differentiated .hero-line {
    position: absolute;
    right: 8vw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    animation: fadeIn 1.5s 1s forwards;
}

.Differentiated .hero-line-bar {
    width: 1px;
    height: 120px;
    background: var(--accent-gold2);
}

.Differentiated .hero-line-text {
    font-family: "Oswald", sans-serif;
    font-size: clamp(11px, 2.5vw, 15px);
	font-weight:600;
	text-transform:uppercase;
    letter-spacing: 0.35em;
    color: var(--accent-gold2);
    writing-mode: vertical-rl;
}

/* ── INTRO SECTION ── */
.Differentiated .intro { border:1px solid #ddd;
display:flex; flex-wrap:wrap;
  justify-content: stretch;
}

.Differentiated .intro .intitle {flex:2; background:var(--dark2); 
padding-block:clamp(25px, 2.5vw, 60px);
padding-inline:clamp(2rem, 6.5vw, 4rem); }

.Differentiated .intro-label {
    font-family: "Oswald", sans-serif;
	font-size:clamp(17px, 2vw, 20px);
    letter-spacing: 0.4em;
    color: var(--accent-gold2);
    margin-bottom: 1.5rem;

}

.Differentiated .intro-headline {
	font-size:clamp(27px, 3vw, 43px);
    font-weight: 300;
    line-height: 1.2;
	letter-spacing:-0.04em;
    color: var(--text-light);
}

.Differentiated .intro-headline em {
    font-style: normal; font-weight:600;
    color: var(--gold);
}

.Differentiated  .intro-body {
 flex:3;
padding-block:clamp(25px, 2.5vw, 60px);
padding-inline:clamp(2rem, 6.5vw, 4rem); }


.Differentiated  .intro-body p {font-size: clamp(14px, 1.1vw, 18px);
  color: var(--text-g);
  line-height: 1.5;}


.Differentiated .intro-body p + p { margin-top: 1.5rem; }


/* ── PROMISE SECTION ── */
.Differentiated .promise { 
    padding-block:clamp(40px, 6.5vw, 160px);
}

.Differentiated .promise-header {
padding-inline:clamp(2rem, 6.5vw, 4rem);
    margin-bottom: 1rem;  
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.Differentiated .promise-title {
    font-size: clamp(35px, 6.5vw, 70px);
    font-weight: 300; letter-spacing: -0.04em;
    line-height: 1.1;
}

.Differentiated .promise-title em { font-weight:600; font-style: normal; color: var(--gold); }
.Differentiated .promise-subtitle {
    font-size: clamp(15px, 3.5vw, 26px);
    color: var(--text-dark-gray);
    max-width: 200px;
    text-align: right;
    line-height: 1.3;
}


.Differentiated .promise-grid {
    display: grid; margin-top:50px;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
	background:#ddd;
	outline:1px solid #ddd;
	border-bottom:1px solid #ddd;
}

.Differentiated .promise-card {
	background:#fff;  
padding-inline:clamp(1rem, 6.5vw, 3rem);
padding-block:clamp(2rem, 6.5vw, 4rem);

    position: relative;
    transition: var(--transition-fast);
    cursor: default;
}

.Differentiated .promise-card::before {
    content: ''; 
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--accent-gold2), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.Differentiated .promise-card:hover::before { transform: scaleX(1); }
.Differentiated .promise-card:hover { background: var(--glass-white); }

.Differentiated .promise-num {
    font-family: "Oswald", sans-serif;
    font-size:clamp(14px, 2.5vw, 18px);
    letter-spacing: 0.3em;
    color: var(--gold); border-radius:60px;
    background:var(--gold-bg);
 padding:10px 30px;
    margin-bottom: 2.5rem;
	width:fit-content;
    display: block;
}

.Differentiated .promise-en {
    font-size:clamp(19px, 5.5vw, 36px);
    font-weight: 600; min-height:clamp(50px, 2.5vw, 100px);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    font-family: "Oswald", sans-serif;

}

.Differentiated .promise-ko {
    font-size:clamp(18px, 2.5vw, 26px);
    color: var(--gold);
    letter-spacing: -0.0.5em;
    margin-bottom: 2rem;
	font-weight:700;
    display: block;
}

.Differentiated .promise-desc {
font-size: clamp(14px, 1.1vw, 18px);
    color: var(--text-dark-gray);
    line-height: 2;
}


/* ── CATEGORY MARQUEE ── */
.Differentiated .marquee-wrap {
    padding: 6vh 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    overflow: hidden;
}

.Differentiated .marquee-track {
    display: flex;
    gap: 0;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
}

.Differentiated .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    padding: 0 3rem;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    letter-spacing: 0.15em;
    color: var(--text-dark-gray);
}

.Differentiated  .marquee-item span { font-size: clamp(2.2rem, 5vw, 3.8rem);
color: var(--accent-gold2);  }

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── CTA STRIP ── */
.Differentiated  .cta-strip {
padding-inline:clamp(1rem, 6.5vw, 6rem);
padding-block:clamp(4rem, 6.5vw, 8rem);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4rem;
	position:relative;
	background-image: url('/img/inb02.gif');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


.Differentiated  .cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8); 
  pointer-events: none;
}

.Differentiated  .cta-strip > * {
  position: relative;
  z-index: 1;
}
.Differentiated  .cta-text {
    font-size: clamp(23px, 5.5vw, 50px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.3;
}


.cta-text em {
    font-style: normal;
	font-weight:700;
    color: var(--gold);
}

.Differentiated  .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 2.5rem;
    border: 2px solid var(--gold);
    color: var(--gold);
	background:#fff;
    text-decoration: none;
font-weight:700;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    transition: var(--transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.Differentiated  .cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 0;
}

.Differentiated  .cta-btn:hover::before { transform: scaleX(1); }
.Differentiated  .cta-btn:hover { color: #fff; }
.Differentiated  .cta-btn span { position: relative; z-index: 1; }

.cta-arrow {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    transition: transform 0.3s ease;
}
.cta-btn:hover .cta-arrow { transform: translateX(4px); }

/* ── FOOTER STRIP ── */
.Differentiated  .footer-strip {
    padding: 3rem 8vw;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Differentiated  .footer-brand {
    font-family: "Oswald", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--text-dark-gray);
}

.footer-copy {
    font-size: 0.7rem;
    color: var(--text-dark-gray);
    letter-spacing: 0.05em;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
   .Differentiated   .intro {flex-direction:column; }


    .Differentiated  .promise-grid { grid-template-columns: 1fr; }
    .Differentiated  .promise-card { border-right: none; border-bottom: 1px solid var(--glass-border); }
    .Differentiated  .promise-card:last-child { border-bottom: none; }
   .Differentiated   .promise-header { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .Differentiated  .promise-subtitle { text-align: left; }
   .Differentiated  .cta-strip { grid-template-columns: 1fr; }
    .Differentiated  .hero-line { display: none; }
}






/*===================================
1 협회안내  - 3 조직도
====================================*/

.sub_org_inner { width:100%; 
 letter-spacing:-1px; 
}

.sub_org_inner  h3.top_txt  {color:#fff; padding-block:clamp(60px,6.5vw, 110px); margin-bottom:50px;
background-image:url('/images/sub/inbg.jpg'); background-size:cover;
 background-attachment: fixed;
}


.sub_org_inner .section-label {
    color:var(--gold); display:block; margin-bottom:3rem;
}

.sub_org_inner .org-mobile, 
.sub_org_inner .org-desktop { width:100%; max-width:1300px; margin:0 auto; }
.sub_org_inner .org-desktop { display:block; }
.sub_org_inner .org-mobile  { display:none;  }
.sub_org_inner .org-wrap    { width:100%; overflow-x:auto; }

@media (max-width:860px) {
    .sub_org_inner .org-desktop { display:none; }
    .sub_org_inner .org-mobile  { display:block; }
}
.sub_org_inner .org-mobile .org-wrap { width:100%; overflow-x:auto; }

.sub_org_inner .reveal { opacity:0; transform:translateY(14px); transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1); }
.sub_org_inner .reveal.visible { opacity:1; transform:translateY(0); }







/*===================================
1 협회안내  - 4 전문가/협업
====================================*/
 .network-area-sub .list-area {display:flex; gap:0px; padding-top:clamp(30px, 6.6vw, 100px);   padding-left:6%; padding-right:6%;  justify-content: space-between;
 width:100%;  padding-bottom:0; flex-wrap:wrap; gap:30px;}
.network-area-sub .list-area div {color:#fff; overflow:hidden;    position:relative;
width:calc(50% - 20px); display:flex;   aspect-ratio: 3/2.5;
padding-inline:clamp(30px, 2.5vw, 60px);
padding-block:clamp(20px, 2.5vw, 70px);
flex-direction:column;    justify-content:flex-end;  }
.network-area-sub .list-area div p.img {width:100%;   
background:rgba(255,255,255,0.5); z-index:1; height:100%; position:absolute; top:0; left:0; margin-bottom:30px;
object-fit:cover; width:100%; height:100%;     background-repeat:no-repeat;
background-position:center center; 
  background-size: cover;}
.network-area-sub .list-area div p.img.inimg01 {background-image: url(/img/mp_img01.jpg);}
.network-area-sub .list-area div p.img.inimg02 {background-image: url(/img/mp_img02.jpg);}
.network-area-sub .list-area div p.img.inimg03 {background-image: url(/img/mp_img03.jpg?ver=2026);}
.network-area-sub .list-area div p.img.inimg04 {background-image: url(/img/mp_img04.jpg?ver=2026);  }


.network-area-sub .list-area div h5 {position:relative; z-index:3; border-radius:50px; 
width:fit-content; text-align:Center; line-height:1.4;  margin-top:10px;
padding-block:10px;
padding-inline:clamp(15px, 2.5vw, 26px);
font-size:clamp(13px, 2.5vw, 16px); background:var(--accent-light-gold4); color:#fff; }
.network-area-sub .list-area div h4 {position:relative; z-index:3;  font-size:clamp(21px, 2.5vw, 32px); padding-top:16px; margin:0; padding-left:0;  }
.network-area-sub .list-area div p.txt {position:relative; z-index:3;  font-size:clamp(17px, 2.5vw, 20px);    color:rgba(255,255,255,0.7)}

.network-area-sub .list-area div:before  {position:absolute; content:''; width:100%; height:300px;
z-index:2;bottom:0; left:0;
}


.network-area .list-area  div.link,
.network-area-sub .list-area div.link {cursor:pointer;}

.network-area .list-area  div.link:after ,
.network-area-sub .list-area div.link:after {
content:'';
position:absolute; z-index:3;
width:clamp(47px, 5.5vw, 100px);
height:clamp(47px,5.5vw, 100px);
background-color:var(--gold);
top:0; right:0px;
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'%23fff'%20class%3D'size-6'%3E%3Cpath%20d%3D'M11.47%203.841a.75.75%200%200%201%201.06%200l8.69%208.69a.75.75%200%201%200%201.06-1.061l-8.689-8.69a2.25%202.25%200%200%200-3.182%200l-8.69%208.69a.75.75%200%201%200%201.061%201.06l8.69-8.689Z'%20%2F%3E%3Cpath%20d%3D'm12%205.432%208.159%208.159c.03.03.06.058.091.086v6.198c0%201.035-.84%201.875-1.875%201.875H15a.75.75%200%200%201-.75-.75v-4.5a.75.75%200%200%200-.75-.75h-3a.75.75%200%200%200-.75.75V21a.75.75%200%200%201-.75.75H5.625a1.875%201.875%200%200%201-1.875-1.875v-6.198a2.29%202.29%200%200%200%20.091-.086L12%205.432Z'%20%2F%3E%3C%2Fsvg%3E");
background-size: auto 40%;
background-repeat: no-repeat;
background-position: center center;
}


.network-area-sub .list-area  > div:nth-child(1):before  {
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(15, 66, 47, 0.7) 100%)
}

.network-area-sub .list-area  > div:nth-child(2):before  {
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(57, 45, 35, 0.7) 100%)
}


.network-area-sub .list-area  > div:nth-child(3):before  {
    background: 
  linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(98, 50, 9, 0.7) 100%)
}

.network-area-sub .list-area  > div:nth-child(4):before  {
    background: 
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(134, 62, 0, 0.7) 100%)
}



@media (max-width: 1024px) {
.network-area-sub .list-area div {width:100%;
  aspect-ratio: 6/3;
}
.network-area-sub .list-area div p.img.inimg04 { background-position:top 75% center; }


}


@media (max-width: 768px) {
.network-area-sub .list-area {
  gap: 10px;
}

.network-area-sub .list-area div {
  aspect-ratio: 5/6;
}

.network-area-sub .list-area div.link:after {
width:60px; height:60px;

}

}






/*===================================
2 교육사업안내 - 1 교육운영방식
====================================*/




.stage_section_title {
	text-align:center;
	font-size:clamp(18px, 4.5vw, 40px);
    letter-spacing: -0.05em;
	font-weight:700;
    color: var(--gold); display: block; margin-bottom: 2rem;
}



/* 운영 */
.system_grid {
   display: grid;
    grid-template-columns: repeat(3, 1fr); 
    background: var(--bd);
     outline: 1px solid var(--bd);
    margin-bottom: 5rem;
	gap:1px;
}

.system_card { text-align:Center;
    background: var(--bg);
	box-sizing:border-box;
    padding: 2.8rem 2.2rem; 
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}
.system_card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--gold), var(--gold2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.19,1,0.22,1);
}
.system_card:hover::before { transform: scaleX(1); }
.system_card:hover { background: var(--gold-bg); }

.system_badge {
    font-size: 0.8rem; letter-spacing: 0.25em;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
    background: var(--gold-bg); width:fit-content; padding:10px 30px; border-radius:50px;
	color:var(--gold); display: block; margin-bottom: 1rem; margin-left:auto; margin-right:auto;
}
.system_card:hover > .system_badge {background: var(--gold); color:#fff;}

.system_name {
    font-size: clamp(20px, 5.4vw, 33px);
    font-weight: 400; 
    color: var(--text); margin-bottom: 1rem;
	letter-spacing:0;
/*     font-family: "Oswald", sans-serif; */

  font-family: "Oswald", sans-serif;
  font-weight: 600;

}
.system_desc { font-size: 0.9rem; color: var(--text-g); line-height: 2; }

.system_ko {
    font-size: clamp(20px, 1.4vw, 24px); color: var(--gold);
    display: block;  line-height:1.3; padding-bottom:10px;  font-weight:700;
}


/* 4단계 로드맵 */
.stages_wrap { position: relative; }

.stages_track {
    position: absolute;
    top: 52px;
    left: calc(12.5%); right: calc(12.5%);
    height: 1px; z-index: 0;
}
.stages_track_fill {
    position: absolute;
    top: 45px; left: 0; height: 100%; width: 0%;
    background: linear-gradient(to right, var(--gold), var(--gold2));
    transition: width 1.2s cubic-bezier(0.19,1,0.22,1);
}
.stages_track_fill.active { width: 100%; }

.stages_grid { position:relative; 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0; position: relative; z-index: 1;
}

.stage_item { 
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 0 1rem;
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.stage_item.visible { opacity: 1; transform: translateY(0); }

.stage_dot_wrap { position: relative; margin-bottom: 1.8rem; }

.stage_dot {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--bd); background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
    transition: border-color 0.4s ease, background 0.4s ease;
}
.stage_item.visible .stage_dot { border-color: var(--gold); background: var(--gold-bg); }

.stage_dot_inner {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--bd); transition: background 0.4s ease;
}
.stage_item.visible .stage_dot_inner { background: var(--gold);  }


/* .arizonia-regular {
  font-family: "Arizonia", cursive;
  font-weight: 400;
  font-style: normal;
}

Bilbo Swash Caps: CSS class
.bilbo-swash-caps-regular {
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;
}

Carattere: CSS class
.carattere-regular {
  font-family: "Carattere", cursive;
  font-weight: 400;
  font-style: normal;
}

Yesteryear: CSS class
.yesteryear-regular {
  font-family: "Yesteryear", cursive;
  font-weight: 400;
  font-style: normal;
}
 */

.stage_big_num {
  font-family: "Carattere", cursive;
    font-size: 4.5rem; font-weight: 300;
    color: rgba(184,134,11,0.08); line-height: 1;
    margin-bottom: 0.3rem;
    transition: color 0.5s ease;
}
.stage_item.visible .stage_big_num { color: rgba(184,134,11,0.15); }

.stage_num {
    font-size: 0.58rem; letter-spacing: 0.3em;
    color: var(--text-m); margin-bottom: 0.6rem; display: block;
    transition: color 0.4s ease;
}
.stage_item.visible .stage_num {
    font-size: 0.8rem; letter-spacing: 0.25em;
    background: var(--gold-bg); width:fit-content; padding:10px 30px; border-radius:50px;
	color:var(--gold); display: block; margin-bottom: 1rem; margin-left:auto; margin-right:auto;
font-family: "Oswald", sans-serif;
  font-weight: 600;

}

.stage_en {
    font-family: "Oswald", sans-serif;
	font-weight:600;
font-size: clamp(20px, 5.4vw, 36px);
   font-weight: 700;
    color: var(--text); margin-bottom: 0.8rem; line-height: 1.2;
}
.stage_desc {font-size: 0.9rem;
  color: var(--text-g);
  line-height: 2; word-break: keep-all; }




/*===================================
2 교육사업안내 - 2 맞춤형 프로세스
====================================*/


/* 반응형 */
@media (max-width: 860px) {
    .system_grid { grid-template-columns: 1fr; }
    .stages_grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
    .stages_track { display: none; }
}
@media (max-width: 520px) {
    .stages_grid { grid-template-columns: 1fr; }
    .edu_inner { padding: 3rem 5vw 5rem; }
}







/* ── 세로 타임라인 ── */
.proc_inner .timeline {
    position: relative;
   margin-left:clamp(0%, 5.5vw, 22rem);


}

/* 왼쪽 수직선 */
.proc_inner .timeline::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--bd);
    z-index: 0;
}

.proc_inner  .timeline_fill {
    position: absolute;
    left: 26px;
    top: 0;
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, var(--gold), var(--gold2));
    z-index: 1;
    transition: height 1.8s cubic-bezier(.19,1,.22,1);
}

.proc_inner .step {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0 2.5rem;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .6s ease, transform .6s ease;
}
.proc_inner .step.visible { opacity:1; transform:translateX(0); }

/* 도트 열 */
.proc_inner .step_dot_col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.proc_inner .step_dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--bd);
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative; z-index: 2;
    transition: border-color .4s, background .4s, box-shadow .4s;
    margin-top: 4px;
}

.proc_inner .step.visible .step_dot {
    border-color: var(--gold);
    background: var(--gold-bg);
    box-shadow: 0 0 0 4px rgba(184,134,11,0.08);
}

.proc_inner .step_dot_inner {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bd);
    transition: background .4s;
}
.step.visible .step_dot_inner { background: var(--gold); }

/* 스텝 사이 간격 라인 공간 */
.proc_inner .step_spacer {
    flex: 1;
    min-height: 36px;
}

/* 콘텐츠 열 */
.proc_inner .step_content {
    padding-bottom: 3.5rem;
}

.proc_inner .step_meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.proc_inner .step_num {
    transition: color .4s;
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  background: var(--gold-bg);
  width: fit-content;
  padding: 10px 30px;
  border-radius: 50px;
  color: var(--gold);
  margin-bottom: 1rem;
font-family: "Oswald", sans-serif;
  font-weight: 600;

}




}
.proc_inner .step.visible .step_num { color: var(--gold); }

.proc_inner .step_en {
    font-family: "Oswald", sans-serif;
  font-size: 1rem;
    color: var(--text-g);
}

.proc_inner .step_title {
    font-size: clamp(20px, 1.5vw, 30px);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.proc_inner .step_desc {
	font-size: 0.9rem;
	 color: var(--text-g);
	 line-height: 2;
    line-height: 2.05;
    margin-bottom: 1.2rem;
}

/* 마지막 스텝 하위 항목 */
.proc_inner .step_sub_list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.proc_inner .step_sub_item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--bd);
    background: var(--bg-s);
    transition: border-color .25s, background .25s;
}
.proc_inner .step_sub_item:hover { border-color: var(--gold-bd); background: var(--gold-bg); }

.proc_inner .step_sub_badge {
    font-size: 0.9rem;
    color: var(--gold);
    white-space: nowrap;
    padding-top: 0.15rem;
    flex-shrink: 0;
}

.proc_inner .step_sub_text {
    font-size: 0.9rem;
    color: var(--text-g);
    line-height: 1.9;
}

/* 카드 강조 (마지막 스텝 전체) */
.proc_inner .step_card {
    border: 1px solid var(--gold-bd);
    background: var(--gold-bg);
    padding: 2rem 2rem 2rem;
    margin-top: 0.5rem;
}

/* 반응형 */
@media (max-width: 640px) {
   .proc_inner  .timeline::before { left: 18px; }
    .proc_inner .timeline_fill { left: 18px; }
   .proc_inner  .step { grid-template-columns: 36px 1fr; gap: 0 1.4rem; }
    .proc_inner .step_dot { width: 22px; height: 22px; }
   .proc_inner  .step_dot_inner { width: 6px; height: 6px; }
    .proc_inner .step_sub_item { flex-direction: column; gap: 0.4rem; }
}





.edu_section_detail_list .hero {
		height:auto;
		position: relative;
		overflow: hidden;
		padding-inline:clamp(30px, 2.5vw, 110px);
		padding-block:clamp(30px, 2.5vw, 110px);
		display: flex;
		flex-direction: column;
		background-color: rgba(0,0,0,0.7);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: cover;
		background-blend-mode: multiply;
}

.edu_section_detail_list .hero.int01 {
background-image: url('/img/onin04.jpg?ver=2026');
}

.edu_section_detail_list .hero.int02 {
background-image: url('/img/onin05.jpg?ver=2026');
}
.edu_section_detail_list .hero.int03 {
background-image: url('/img/onin02.jpg?ver=2026');
}

.edu_section_detail_list .hero.int04 {
background-image: url('/img/onin01.jpg?ver=2026');
}
.edu_section_detail_list .hero.int05 {
background-image: url('/img/onin07.jpg?ver=2026');
}

.edu_section_detail_list .hero.int06 {
background-image: url('/img/onin06.jpg?ver=2026');
}



.edu_section_detail_list .hero_content { position: relative; z-index: 2; width:94%; margin-left:auto; margin-right:auto; }

.edu_section_detail_list .hero_category {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom:clamp(20px, 2.5vw, 30px);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}

.edu_section_detail_list .hero_cat_line { width:clamp(28px, 2.5vw, 60px); height: 1px; background: var(--gold); }
.edu_section_detail_list .hero_cat_text {
    font-size: clamp(14px, 2.5vw, 18px);  letter-spacing: 0.45em;
    color: var(--gold); text-transform: uppercase;
}

.edu_section_detail_list .hero_en {
/*   font-family: "Yesteryear", cursive;
  font-weight: 400; */
  font-family: "Oswald", sans-serif;
  font-weight: 600; 
    font-size: clamp(46px, 5vw, 120px);
    color: #fff;
    line-height: 0.9;
    margin-bottom: 0.4rem;
}

.edu_section_detail_list .hero_ko { padding-top:15px;
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 600;
	color:#ffff;
	line-height:1.3;
    margin-bottom: 2.5rem;
}

.edu_section_detail_list .hero_quote {
width:fit-cotent; display:inline-block;
background:var(--gold);
color:#fff; 
padding-inline:20px;
padding-block:6px;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    line-height: 1.7;
}

/* ══ BODY ══ */
.edu_section_detail_list .body_wrap {
    max-width: 1400px;
	width:98%;
    margin: 0 auto;
}

.edu_section_detail_list .overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--bd);
    border: 1px solid var(--bd);
    margin: 5rem 0;
}

.edu_section_detail_list .overview_left {
    background: var(--bg);
    padding: 3.5rem 3rem;
}


 .edu_section_detail_list .overview_right {
    background: var(--bg-s);
    padding: 3.5rem 3rem;
}

.edu_section_detail_list .overview_left,
 .edu_section_detail_list .overview_right {
 padding-inline:clamp(30px, 2.5vw,3.5rem);
 padding-block:3rem;}


.edu_section_detail_list .sec_label  {border-bottom:1px solid #ddd; }
.sec_label {  padding-bottom:10px;
display:flex; gap: 10px 20px; flex-wrap:wrap;color: var(--gold);  align-items: end; margin-bottom: 1.4rem;
}
 .sec_label .en{
  font-family:"Oswald", sans-serif; 
    font-size:clamp(20px, 2.5vw, 30px);  
}
 .sec_label .ko{ 
  font-family:'Pretendard','Noto Sans KR',sans-serif; opacity:0.8;
  letter-spacing:-0.02em;  font-weight:700;     font-size:clamp(16px, 2.5vw, 25px);  
}

 .sec_label .ko:before{    content: "·";
    display: inline-block;
    margin: 0px 20px 0px 0px}

.edu_section_detail_list  .overview_text {
    font-size: clamp(14px, 1.1vw, 18px);
    color: var(--text-g); line-height: 1.5;
}

/* 핵심 특징 */
.edu_section_detail_list .features { display: flex; flex-direction: column; gap: 1.6rem;  }

.edu_section_detail_list  .feature_item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.2rem;
    align-items: flex-start;
}

.edu_section_detail_list .feature_dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold); margin-top: 0.55rem; flex-shrink: 0;
}

.edu_section_detail_list .feature_title {
   font-size: clamp(14px, 1.1vw, 18px);  font-weight: 700;
    color: var(--text); margin-bottom: 0.1rem;
    letter-spacing: 0.02em;
}
.edu_section_detail_list .feature_desc {font-size: clamp(14px, 1.1vw, 18px);  color: var(--text-g); line-height: 1.9; }

/* ── 교육과정 인포박스 ── */
.edu_section_detail_list .info_grid {
display:flex; 
    gap: 1px;
    background: var(--dark);
    border: 1px solid var(--dark2);
    margin-bottom: 5rem;
}

.edu_section_detail_list .info_box {
    background: var(--dark4);
    padding: 2.4rem 2rem; flex:1;
    text-align: center;
    position: relative;
	display:flex;  flex-direction:column;
    transition: background .3s;
	justify-content: space-between;
}

.edu_section_detail_list .info_box:nth-child(2n-1) {background: var(--dark3);}
.edu_section_detail_list .info_box:hover {background: var(--dark5);}
.edu_section_detail_list .info_box::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity .3s;
}

.edu_section_detail_list .info_box:hover::after { opacity: 1; }

.edu_section_detail_list .info_box .info_label {
font-size: clamp(13px, 1.1vw, 16px);  letter-spacing: 0.4em;
    color: var(--gold2); display: block; margin-bottom: 1rem;
}

.edu_section_detail_list  .info_value {
font-size: clamp(22px, 3vw, 28px);
    font-weight: 800; color: #fff;
    line-height: 1.25; margin-bottom: 0.4rem;
}
.edu_section_detail_list  .info_value2 {
font-size: clamp(17px, 3vw, 21px);
}


.edu_section_detail_list .info_sub { font-size: clamp(12px, 1.1vw, 15px); color:#fff; opacity:0.5; line-height: 1.7; }

/* ── 시험 안내 ── */
.edu_section_detail_list .exam_wrap {
    border: 1px solid var(--bd);
    margin-bottom: 5rem;
    overflow: hidden;
}

.edu_section_detail_list .exam_header {
    background: var(--gold);
    padding: 1.8rem 2.4rem;
    display: flex; align-items: end; flex-wrap:wrap; gap: 1.5rem;
}
.edu_section_detail_list .exam_header_label {
font-size: clamp(12px, 1.1vw, 15px); line-height:1.3;
 letter-spacing: 0.4em; color:rgba(255,255,255,0.6);
}
.edu_section_detail_list .exam_header_title {
font-size: clamp(22px, 3vw, 28px);
 color: #fff; font-weight: 700; line-height:1.3;
}

.edu_section_detail_list .exam_body {
   display:flex; flex:wrap:wrap;
    gap: 1px;
    background: var(--bd);
}

.edu_section_detail_list .exam_cell {
flex:1;
    background: var(--bg);
    padding: 2.2rem 2.4rem;
}

.edu_section_detail_list .exam_cell_label {
font-size: clamp(13px, 1.1vw, 15px); position:relative; padding-bottom:30px;
  letter-spacing: 0.2em;
    color: var(--text-m); display: block; margin-bottom: 1rem;
}

.edu_section_detail_list .exam_cell_label:before  {content:''; position:absolute; bottom:15px; left:0;
width:40px; height:1px; background:var(--gold)}


.edu_section_detail_list .exam_cell_value {
font-size: clamp(14px, 1.1vw, 18px);
    color: var(--text); line-height: 2;
}
.edu_section_detail_list .exam_cell_value strong { color: var(--gold); font-weight: 400; }

.edu_section_detail_list .exam_note {
    background: var(--bg-s);
    padding: 1.2rem 2.4rem;
font-size: clamp(13px, 1.1vw, 16px);
    color: var(--text-m);
    line-height: 1.9;
    border-top: 1px solid var(--bd);
}

/* ── 자격 + 추천대상 2열 ── */
.edu_section_detail_list .bottom_grid {
    display: flex;
	flex-wrap:wrap;
    gap: 1px;
    background-color: var(--bd);
    border: 1px solid var(--bd);
    margin-bottom: 5rem;


}

.edu_section_detail_list .bottom_cell {flex:1; background: var(--bg); padding: 3rem 2.8rem; }

.edu_section_detail_list .cert_list {
    display: flex; flex-direction: column; gap: 1rem;
    margin-top: 1rem;
}

.edu_section_detail_list .cert_item {
    display: flex; align-items: center; gap: 1rem;
    padding:0.7rem 1.2rem;
    border: 1px solid var(--bd);
    background: var(--bg-s);
    transition: border-color .25s, background .25s;
}
.cert_item:hover { border-color: var(--gold-bd); background: var(--gold-bg); }

.cert_img_detail img {width:100%;}

.edu_section_detail_list .cert_badge {
font-size: clamp(14px, 1.1vw, 18px);
    color: var(--gold); border: 1px solid var(--gold-bd);
    padding: 0.25rem 0.8rem; white-space: nowrap; flex-shrink: 0;
    background: var(--gold-bg);
}

.edu_section_detail_list .cert_name {font-size: clamp(14px, 1.1vw, 18px);
 color: var(--text); }
.edu_section_detail_list .cert_name span { font-size: clamp(13px, 1.1vw, 15px);color:var(--text-m);}


.edu_section_detail_list .target_list {
    display: flex; flex-direction: column; gap: 0;
    margin-top: 1rem;
}

.edu_section_detail_list  .target_row {
    display: flex; align-items: flex-start; gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1.6px dashed var(--bd);
font-size: clamp(14px, 1.1vw, 18px);
	
	color: var(--text-g); line-height: 1.8;
}
.edu_section_detail_list .target_row:last-child { border-bottom: none; }

.edu_section_detail_list .target_arrow {
    margin-top: 0.3rem; flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'none'%20viewBox%3D'0%200%2024%2024'%20stroke-width%3D'2.5'%20stroke%3D'%23B8860B'%20class%3D'size-6'%3E%3Cpath%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20d%3D'm8.25%204.5%207.5%207.5-7.5%207.5'%20%2F%3E%3C%2Fsvg%3E");
background-size:  50% auto;
background-repeat: no-repeat;
background-position: center center;
width:clamp(16px, 1.1vw, 23px); height:clamp(16px, 1.1vw, 23px);
background-color: var(--gold-bg);
display:flex;
border: 1px solid var(--gold-bd);

}

/* ══ CTA ══ */
.edu_section_detail_list .cta_wrap {
    position: relative; overflow: hidden;
    padding: 5rem 6vw;
    text-align: center;
background-color: rgba(93, 88, 83, 0.9);

background-image: url('/img/bottoming.gif?ver=2026');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  background-blend-mode: soft-light


}
.edu_section_detail_list .cta_wrap::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(184,134,11,0.12), transparent 70%);
    pointer-events: none;
}

.edu_section_detail_list .cta_label {
     font-family:"Oswald", "Pretendard", sans-serif; 
font-size: clamp(14px, 1.1vw, 18px);
letter-spacing: 0.45em;
    color: var(--gold2); display: block; margin-bottom: 1.5rem;
}

.edu_section_detail_list .cta_title {
	font-size: clamp(24px, 6.1vw, 68px);
    font-weight: 800; 
    color: #fff; margin-bottom: 0.8rem; line-height: 1.2;
}

.edu_section_detail_list .cta_sub {
font-size: clamp(14px, 1.1vw, 18px);
    color: rgba(255,255,255,0.9);
    margin-bottom: 3rem; line-height: 1.9;
}

.edu_section_detail_list .cta_btn {
    display: inline-flex; align-items: center; gap: 1rem;
    background: var(--gold);
    color:#fff;
font-size: clamp(14px, 1.1vw, 18px);
 font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1.1rem 7rem 1.1rem 3rem;
    border: none; cursor: pointer;
    text-decoration: none;
    position: relative; z-index: 1;
    transition: background .25s, transform .2s, box-shadow .25s;
    overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'none'%20viewBox%3D'0%200%2024%2024'%20stroke-width%3D'1.5'%20stroke%3D'%23fff'%20class%3D'size-6'%3E%3Cpath%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20d%3D'M17.25%208.25%2021%2012m0%200-3.75%203.75M21%2012H3'%20%2F%3E%3C%2Fsvg%3E");
background-size: auto 30px;
background-repeat: no-repeat;
background-position: right  2rem center;


}




/*===================================
2 교육사업안내 - 3 위탁/단체교육안내
====================================*/

.cur_inner .r5 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .85s cubic-bezier(.19,1,.22,1), transform .85s cubic-bezier(.19,1,.22,1);
}
.cur_inner .r5.on { opacity:1; transform:translateY(0); }

/* ── 섹션 공통 ── */
.cur_inner .sec { margin-bottom: 7rem; }

.cur_inner .int {text-align:Center;}
.cur_inner .sec_label {justify-content: center; width:fit-content; background:var(--gold);
border-radius:30px; padding:10px 30px;margin-left:auto; margin-right:auto;}
.cur_inner  .sec_label {margin-bottom: 0.5rem;}
.cur_inner   .sec_label .en{ color:#fff;
    font-size:clamp(20px, 2.5vw, 20px);  }
.cur_inner  .sec_label .ko{ color:#fff; opacity:1;
   font-size:clamp(16px, 2.5vw, 20px);  }

.cur_inner .sec_title {
text-align: center;
  font-size: clamp(26px, 4.5vw, 40px);
  letter-spacing: -0.05em;
  font-weight: 300;
  color: #000;
  display: block;
  margin-bottom: 1rem;
}

.cur_inner  .sec_title em { ; font-style:normal; font-weight:700; color: var(--gold); }

.cur_inner  .courses_grid { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background:#555;
    border: 1px solid var(--bd);
    margin-top: 3rem;
}

.cur_inner .course_card {
  padding: 2.4rem 1.6rem 6rem 2.4rem;
    position: relative;
    overflow: hidden;
    transition: background .3s ease;
    cursor: default;
background-color:rgba(0,0,0,0.7);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
background-blend-mode: multiply;}

.cur_inner  .courses_grid .course_card:nth-child(1) {background-image:url('/img/onin04.jpg?ver=2026');} /*커피바리스타*/
.cur_inner  .courses_grid .course_card:nth-child(2){background-image:url('/img/onin05.jpg');} /*와인소믈리에*/
.cur_inner  .courses_grid .course_card:nth-child(3) {background-image:url('/img/onin02.jpg');}/*수제맥주*/
.cur_inner  .courses_grid .course_card:nth-child(4){background-image:url('/img/onin01.jpg');}/*티칵테일*/
.cur_inner  .courses_grid .course_card:nth-child(5) {background-image:url('/img/onin07.jpg');}/*바쉐프*/
.cur_inner  .courses_grid .course_card:nth-child(6) {background-image:url('/img/onin06.jpg');}/*바쉐프*/




.cur_inner .course_card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--gold), var(--gold2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.cur_inner .course_card:hover::after { transform: scaleX(1); }
 .cur_inner .course_card:hover { background-color:rgba(0,0,0,0.5);}

.cur_inner .course_idx {
    font-size:clamp(12px, 2.5vw, 14px);
    letter-spacing: 0.25em;
    color:var(--gold); border-radius:50px;
	width:fit-content;
	padding:7px 20px; 
	background:var(--gold-bg);
    display: block;
    margin-bottom: 1.4rem;
    transition: color .3s;
}
.cur_inner .course_card:hover .course_idx { color: var(--gold); }

.cur_inner .course_icon {
   font-family: "Oswald", sans-serif;;
    font-size:clamp(25px, 2.5vw, 36px);
    font-weight: 700;
      color: var(--gold2);
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.cur_inner .course_ko {
    font-size:clamp(18px, 2.5vw, 24px);
    color: #fff;
    display: block;
	padding-top:10px;
    margin-bottom: 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.4);
}

.cur_inner .course_desc {
font-size: clamp(14px, 1.1vw, 18px);
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}


.cur_inner  .target_grid {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--bd);
   outline: 1px solid var(--bd);
    margin-top: 3rem;
}

.cur_inner .target_block { 
    background: var(--bg); box-sizing:border-box;
    padding: 3rem 2.8rem;
}
.cur_inner .target_block:nth-child(2) {background:#f2f2f2;}
.cur_inner  .target_type {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.cur_inner  .target_badge {
    font-size:clamp(15px, 2.5vw, 18px);
    color: var(--gold);
    border: 1px solid var(--gold-bd);
    padding: 0.3rem 0.7rem;
    background: var(--gold-bg);
}

.cur_inner  .target_name {
    font-size:clamp(17px, 2.5vw, 22px);
	font-weight:600;
}


.cur_inner .target_items { display: flex; flex-direction: column; gap: 0; }

.cur_inner .target_item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.4rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--bd);
    align-items: flex-start;
}
.cur_inner .target_item:last-child { border-bottom: none; padding-bottom: 0; }

.cur_inner .target_item_label {
  font-size: clamp(14px, 1.1vw, 18px);
    color: var(--gold);
    white-space: nowrap;
    padding-top: 0.1rem;
    min-width: 110px;
}

.cur_inner .target_item_desc {
  font-size: clamp(14px, 1.1vw, 18px);
    color: var(--text-g);
    line-height: 1.6;
}

/* ══ 교육 장소 ══ */
.cur_inner .venue_grid {
    display: grid; border-bottom:1px solid var(--bd);
    grid-template-columns: 1fr 1fr;
    gap: 1px;
	margin-left:-1px;
    background: var(--bd);
    outline: 1px solid var(--bd);
    margin-top: 3rem;
}

.cur_inner .venue_card { 
    background: var(--bg);
    padding: 3rem 2.8rem;
    position: relative;
    overflow: hidden;
    transition: background .3s;
}
.cur_inner .venue_card:hover { background: var(--gold-bg); }

.cur_inner .venue_card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--gold), var(--gold2));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.cur_inner .venue_card:hover::before { transform: scaleY(1); }

.cur_inner .venue_num {
font-size: clamp(13px, 2.5vw, 17px);
  letter-spacing: 0.25em; 
    color: var(--text-m);
    display: block;
    margin-bottom: 1.2rem;
    transition: color .3s;
}

.venue_card:hover .venue_num { color: var(--gold); }

.cur_inner .venue_name {
   font-family: "Oswald", sans-serif;;
font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.cur_inner .venue_ko {
font-size: clamp(18px, 2.5vw, 24px);
    color: var(--gold);
    display: block;
    margin-bottom: 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--bd);
}

.venue_desc {
  font-size: clamp(14px, 1.1vw, 18px);    color: var(--text-g);
    line-height: 1.5;
}

/* ── 반응형 ── */
@media (max-width: 1000px) {
.cur_inner  .venue_grid,
.cur_inner  .courses_grid,
.cur_inner .target_grid { grid-template-columns: 1fr; }
}






/*===================================
3 교육분야 공동랩퍼 - 틀 코딩
====================================*/

.edu_section_detail_list .cta_btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--gold2), var(--gold));
    opacity: 0;
    transition: opacity .3s;
}
.edu_section_detail_list .cta_btn:hover::before { opacity: 1; }
.edu_section_detail_list .cta_btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(184,134,11,0.35); }
.edu_section_detail_list .cta_btn span { position: relative; z-index: 1; }
.edu_section_detail_list .cta_btn_arrow { position: relative; z-index: 1; font-size: 0.75rem; transition: transform .25s; }
.edu_section_detail_list .cta_btn:hover .edu_section_detail_list .cta_btn_arrow { transform: translateX(4px); }

/* ── reveal ── */
.r { opacity:0; transform:translateY(20px); transition: opacity .85s cubic-bezier(.19,1,.22,1), transform .85s cubic-bezier(.19,1,.22,1); }
.r.on { opacity:1; transform:translateY(0); }
.r2 { opacity:0; transform:translateY(20px); transition: opacity .85s cubic-bezier(.19,1,.22,1) .1s, transform .85s cubic-bezier(.19,1,.22,1) .1s; }
.r2.on { opacity:1; transform:translateY(0); }
.r3 { opacity:0; transform:translateY(20px); transition: opacity .85s cubic-bezier(.19,1,.22,1) .2s, transform .85s cubic-bezier(.19,1,.22,1) .2s; }
.r3.on { opacity:1; transform:translateY(0); }

/* ── 반응형 ── */
@media (max-width: 900px) {
    .edu_section_detail_list .overview { grid-template-columns: 1fr; }
	.edu_section_detail_list .bottom_cell ,
    .edu_section_detail_list .info_grid,
	.edu_section_detail_list .exam_body { flex-direction:column;}
    .edu_section_detail_list .exam_body { grid-template-columns: 1fr; }
    .edu_section_detail_list .bottom_grid { grid-template-columns: 1fr; }
    .edu_section_detail_list .bottom_cell{width:100%; flex: 0 0 100%}


}
@media (max-width: 560px) {

}




/*===================================
온라인접수
====================================*/

/* ── 진행률 바 (신설) ── */
#reg-progress-strip {
  position: sticky;
  background:var(--dark3);
  top: 0px;
  z-index: 200;
  width:100%;
  padding: 15px 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: top .3s ease;
  border-radius:var(--radius2);
}

#reg-progress-strip.is-stuck {
position:fixed;
  top: 130px;
  width:calc(92% - 200px)
}

#reg-progress-strip .pg-label {
  font-size:clamp(13px, 1.5vw, 16px);
  font-weight: 600;
  color:#fff;
  white-space: nowrap;
  letter-spacing: .03em;
}
#reg-progress-strip .pg-bar-bg {
  flex: 1;
  height: 3px;
  background: var(--bg-c);
  border-radius: 99px;
  overflow: hidden;
}
#reg-progress-strip .pg-bar-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 99px;
  width: 0%;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
#reg-progress-strip .pg-pct {
  font-size:clamp(13px, 1.5vw, 16px);
  font-weight: 700;
  color: var(--gold);
  min-width: 30px;
  text-align: right;
}

/* ── 필수항목 안내 ── */
 .notice_alert {
	overflow:hidden;
  text-align: right; padding-top:60px;
  font-size: clamp(12px, 2.5vw, 16px);
  color: var(--text-m) ;
}


 .ness_icon { color: var(--red); font-weight: 700; }



/* ── Step h4 헤더 ── */
.findjob_area3 h4 {
  display: flex ;
  align-items: center ;
  gap: 10px  20px;
  font-size:clamp(17px, 2.5vw, 30px) ;
  font-weight: 700 ;
  color: var(--text) ;
  letter-spacing: -.02em ;
  margin-top:clamp(30px, 2.5vw, 60px);
  padding-bottom: 20px ;
}
.findjob_area3 h4 span {
  font-weight: 700 ;
  color:var(--gold2);
border:2px solid var(--gold2);
  font-size:clamp(12px, 2.5vw, 17px) ;
  padding-block:clamp(2px, 2.5vw, 15px) ;
  line-height:1;
  border-radius:30px;
  letter-spacing: .14em ;
  padding-inline:20px;
  text-transform: uppercase ;
}

/* ── 교육분야 칩 영역 ── */
.findjob_area3 .inform_tag_wrap {
  background: #fff ;
  border: 1px solid var(--bd) ;
  border-radius: var(--radius) ;
  padding: 20px ;
  margin-bottom: 16px ;
}
.findjob_area3 .inform_tag_wrap .field {
  display: block ;
  border: none ;
  background: none ;
  padding: 0 ;
  border-radius: 0 ;
  gap: 0 ;
}
.findjob_area3 .field__head { margin-bottom: 12px ; }
.findjob_area3 .field__label {
  font-size:clamp(14px, 2.5vw, 18px);
  font-weight: 600 ;
}
.findjob_area3 .field__body {
  display: flex ;
  flex-wrap: wrap ;
  gap: 8px ;
}

/* ── 칩 ── */
.findjob_area3 .chip {
  position: relative ;
  display: inline-flex ;
  align-items: center ;
  padding-block:9px;
  padding-inline:clamp(14px, 1.5vw, 28px);
  border-radius:var(--radius3);
  border: 1px solid var(--bd) ;
  background: var(--bg-s) ;
  cursor: pointer ;
  user-select: none ;
  transition: all .15s ;
  font-size:clamp(14px, 1.5vw, 17px);
  font-weight: 500 ;
  color: var(--text-g) ;
}
.findjob_area3 .chip:hover {
  border-color: var(--bd-dark) ;
  color: var(--text) ;
}

.findjob_area3 .chip span {
  color: inherit ;
  font-weight: inherit ;
  white-space: nowrap ;
}

.findjob_area3 .chip input[type="radio"] {
  position: absolute ;
  opacity: 0 ;
  inset: 0 ;
  cursor: pointer ;
  margin: 0 ;
  width: 100% ;
  height: 100% ;
}
.findjob_area3 .chip:has(input:checked) {
  border-color: var(--gold) ;
  background: var(--gold-bg) ;
  color: var(--gold) ;
  font-weight: 600 ;
  box-shadow: 0 0 0 2px var(--gold-bd) ;
}
.findjob_area3 .chip:has(input:checked) span {
  color: var(--gold) ;
  font-weight: 600 ;
}

/* ── 테이블 재정의 ── */
.findjob_area3 .tb_base2 {
  width: 100% ;
  border-collapse: separate ;
  border-spacing: 0 ;
  background: #fff ;
  border: 1px solid var(--bd) ;
  border-radius: var(--radius) ;
  overflow: hidden ;
  margin-bottom: 16px ;
  table-layout: auto ;
}
.findjob_area3 .tb_base2 thead { display: none ; }
.findjob_area3 .tb_base2 th {
font-size: clamp(14px, 2.5vw, 18px);
  padding: 13px 16px ;
  background: var(--bg-s2) ;
  border-bottom: 1px solid var(--bd) ;
  border-right: 1px solid var(--bd) ;
  font-weight: 600 ;
  color: #1a1a1a ;
  letter-spacing:-0.02rem;
  text-align: left ;
  vertical-align: middle ;
  white-space: nowrap ;
}
.findjob_area3 .tb_base2 td {
font-size: clamp(14px, 2.5vw, 18px);

  padding: 11px 14px ;
  border-bottom: 1px solid var(--bd) ;
  vertical-align: middle ;
  background: #fff ;
}
.findjob_area3 .tb_base2 tr:last-child th,
.findjob_area3 .tb_base2 tr:last-child td { border-bottom: none ; }
.findjob_area3 .tb_base2 th span[style] { color: var(--red) ; font-weight: 600 ; }

/* ── 모든 text input ── */
.findjob_area3 .tb_base2 input[type="text"],
.findjob_area3 .tb_base2 input.type-text1 {
  height:clamp(35px, 2.5vw, 50px);
  border: 1px solid var(--bd) ;
  border-radius:var(--radius2);
  padding: 0 12px ;
	font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 400 ;
  color: var(--text) ;
  background: var(--bg-c) ;
  outline: none ;
  transition: border-color .18s, background .18s, box-shadow .18s ;
  box-shadow: none ;
  width: 90% !important;
  max-width: 90% !important ;
  display: block ;
  appearance: none ;
  -webkit-appearance: none ;
}
.findjob_area3 .tb_base2 input[type="text"]:focus,
.findjob_area3 .tb_base2 input.type-text1:focus {
  border-color: var(--gold) ;
  background: var(--gold-bg) ;
  width: 90% !important;
  max-width: 90% !important ;
  box-shadow: 0 0 0 3px rgba(184,134,11,.08) ;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

}
.findjob_area3 .tb_base2 input[type="text"]::placeholder,
.findjob_area3 .tb_base2 input.type-text1::placeholder {
  width: 90% !important;
  max-width: 90% !important ;
  color: var(--text-m) ;
  font-weight: 300 ;
    width:auto;
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;


}

/* ── 우편번호 input (짧게) ── */
.findjob_area3 #zip1 {
  display: inline-block ;
  width: 110px ;
  vertical-align: middle ;
}

/* ── 우편번호 검색 버튼 ── */
.findjob_area3 input[type="button"][onclick*="openKakaoAddress"] {
  display: inline-flex ;
  align-items: center ;
  height: 44px ;
  padding: 0 26px ;
  border: 1px solid var(--bd-dark) ;
  border-radius: 10px ;
  background:var(--dark) ;
font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 600 ;
  color: #fff ;
  cursor: pointer ;
  vertical-align: middle ;
  margin-left: 8px ;
  border:none;
  box-shadow: none ;
  width: auto ;
  transition: all .15s ;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
border:1px solid var(--dark)
}
.findjob_area3 input[type="button"][onclick*="openKakaoAddress"]:hover {
  border-color: var(--gold) ;
  color: var(--gold) ;
  background: var(--gold-bg) ;


}

.findjob_area3 #address1,
.findjob_area3 #address2 {
  margin-top: 8px ;
  display: block ;
}

.findjob_area3 td input[type="radio"][name="sex"] { display: none ; }
.sex-btn-wrap { display: flex; gap: 8px; }
.sex-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
	height: clamp(35px, 2.5vw, 50px);
  padding: 0 24px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg-s);
	font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 500;
  color: var(--text-g);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  min-width: 72px;
}
.sex-btn:hover { border-color: var(--bd-dark); color: var(--text); }
.sex-btn.on {
  border-color: var(--gold) ;
  color: var(--gold) ;
  background: var(--gold-bg) ;
  font-weight: 600;
}
.sex-pip {
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: .45;
  transition: opacity .15s;
}
.sex-pip::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0; transform: scale(.2);
  transition: all .15s;
}
.sex-btn.on .sex-pip { opacity: 1; }
.sex-btn.on .sex-pip::after { opacity: 1; transform: scale(1); }

/* ── 파일 첨부 커스텀 ── */
#photo_file { display: none ; }
.custom-file-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.custom-file-lbl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bd-dark);
  border-radius: 10px;
  background: #fff;
font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 600;
  color: var(--text-g);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
  font-family: 'Pretendard', sans-serif;
}
.custom-file-lbl:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); }
.custom-file-nm { font-size: 13px; color: var(--text-m); }
.custom-file-nm.on { color: var(--text-g); font-weight: 500; }
.file-hint { font-size: 11.5px; color: var(--text-m); margin-top: 6px; }

/* ══════════════════════════════════
   개인정보 동의 (신설)
══════════════════════════════════ */
.consent-section {
  margin-top: 32px;
}
.consent-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd);
}
.consent-section-title span {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.consent-card {
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
  font-family: 'Pretendard', sans-serif;
}
.consent-head {
  padding: 13px 18px;
  background: var(--bg-s);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.consent-head-title {
  font-size: clamp(16px, 2.5vw, 17px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  flex: 1;
  line-height: 1.4;
  padding:10px 0px;
}


.consent-badge {
  font-size: clamp(13px, 2.5vw, 15px);
  font-weight: 700;
  padding: 3px 19px;
  border-radius: 99px;
  border: 1px solid var(--red);
  color: var(--red);
  background: #fff5f5;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .03em;
}
.consent-body {
  padding: 15px 18px;
  font-size: 14px;
  color: var(--text-g);
  line-height: 1.85;
  background: #fff;
}
.consent-body ol { padding-left: 16px; }
.consent-body li { margin-bottom: 5px; }
.consent-body b { color: var(--text); font-weight: 600; }
.consent-sub {
  margin-top: 3px;
  padding-left: 12px;
  font-size: 11.5px;
  color: var(--text-m);
  border-left: 2px solid var(--bd);
}
.consent-footer {
  padding: 13px 18px;
  background: var(--bg-s);
  border-top: 1px solid var(--bd);
}
.consent-notice {
  font-size: 12px;
  color: var(--text-g);
  margin-bottom: 10px;
  line-height: 1.6;
}
.agree-row { display: flex; gap: 8px; }
.agree-btn {
  flex: 1;
  height: auto;
  padding-block:16px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: #fff;
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 600;
  color: var(--text-m);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all .15s;
  letter-spacing: -.01em;
}
.agree-btn:hover { border-color: var(--bd-dark); color: var(--text-g); }
.agree-btn.yes { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); font-weight: 700; }
.agree-btn.no  { border-color: var(--red);  color: var(--red);  background: #fff5f5;      font-weight: 600; }
.cb-ico {
  width: 16px; height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: .7;
  transition: opacity .15s;
}
.agree-btn.yes .cb-ico,
.agree-btn.no  .cb-ico { opacity: 1; }

/* ── 하단 버튼 ── */
.findjob_area3  .btn-down {
  display: flex ;
  gap: 10px ;
  margin-top: 48px ;
  list-style: none ;
  padding: 0 ; flex-wrap:wrap;
}




.findjob_area3  .btn-down  a{ flex: 1 ; 
  display: flex ;
  align-items: center ;
  justify-content: center ;
  width: 100% ;
  height:clamp(50px, 4.5vw, 80px);
  padding-inline:10px;
  border-radius: var(--radius) ;
  font-weight: 700 ;
  text-decoration: none ;
  transition: all .18s ;
  position: relative ;
  overflow: hidden ;
  color: transparent ;
  border: none ;
  font-size:clamp(20px, 2.5vw, 26px);
  font-weight: 700;
}


.findjob_area3  .btn-down  a{
 color: #fff;
  background:#777; 
  border-radius: var(--radius);
}
.findjob_area3  .btn-down  a:hover{ background: #ddd;}
.findjob_area3 .btn-down .confirm {
 color: #fff;
  background: var(--gold) !important;
  border-bottom: 2px solid var(--gold) !important;
}

.findjob_area3  .btn-down .confirm:hover{ background:var(--gold3) !important; }




/* ── 반응형 테이블 ── */
@media (max-width: 1024px) {

#reg-progress-strip.is-stuck {
  width: calc(92% - 0px);
}
.findjob_area3 .tb_base2 input[name="zip1"] {width:calc(100% - 150px) !important}


  .findjob_area3 .tb_base2,
  .findjob_area3 .tb_base2 tbody,
  .findjob_area3 .tb_base2 tr,
  .findjob_area3 .tb_base2 th,
  .findjob_area3 .tb_base2 td { display: block ; width: 100% ; }
  .findjob_area3 .tb_base2 { border: none ; background: transparent ; }
  .findjob_area3 .tb_base2 tbody { display: flex ; flex-direction: column ; gap: 10px ; }
  .findjob_area3 .tb_base2 tr {
    display: flex ; flex-direction: column ;
    border: 1px solid var(--bd) ; border-radius: var(--radius) ; overflow: hidden ;
  }
  .findjob_area3 .tb_base2 th {
    width: 100% ; border-right: none ;
    border-bottom: 1px solid var(--bd) ; padding: 10px 14px ;
  }
  .findjob_area3 .tb_base2 td {
    width: 100% ; border-bottom: none ; padding: 12px 14px ;
  }
  #zip1 { width: 100% ; }
  .findjob_area3 > ul li { flex: none ; }
  .agree-row { flex-direction: column; }
  .sex-btn-wrap { gap: 8px; }

.findjob_area3  ul li {flex:0 0 100%}

}

@media (max-width: 480px) {
  #reg-progress-strip { padding: 10px 16px; }
}



/*===================================
게시판 부분 
====================================*/

/* ══════════════════════════════════
  세부 - 서칭창
══════════════════════════════════ */

  /* ── 헤더 검색창 ── */
    .board-header {
	--font-size:clamp(15px, 1.5vw, 18px) !important;
	--font-family: 'Noto Sans KR', sans-serif !important;
	}
    .board-header * { font-size:var(--font-size); line-height:1.6; font-family:var(--font-family) ;}
  .board-header {
    text-align: center;
  }
   .board-header  .search-wrap {
    max-width: 840px; width:100%; overflow:hidden;
	margin-left:auto; margin-right:auto;
    display: flex;
    align-items: center;
	border:2px solid #1a1a1a;
    border-radius:var(--radius);
    gap: 10px;
  }

   .board-header .search-select-wrap {
    display: flex; padding-left:20px; width:20%;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .search-select-wrap svg {
    color: #bbb; width:20px; height:20px;
    flex-shrink: 0;
  }
  .search-select {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Noto Sans KR', sans-serif;
    color: #555; font-weight:600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }
    .board-header  .search-divider {
    width: 1px;
    height: 30px;
    background: #e8e8e8;
    flex-shrink: 0;
  }
.board-header form {width:100%;}
    .board-header  .search-input {
   width:calc(80% - 80px); box-sizing:border-box;
    border: none; font-size:var(--font-size);
    outline: none; font-family:var(--font-family) ;
    color: #111;
    padding: 20px 10px;
    background: transparent;
  }

    .board-header  .search-input::placeholder { color: #d0d0d0; 
	font-family:var(--font-family) ; font-weight:500; font-size:var(--font-size);}

     .board-header .search-btn {
    background: #111;
    border: none;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
	font-size:80px;
    transition: background 0.15s, transform 0.1s;
    color: #fff;
  }
     .board-header .search-btn svg {width:40%; height:40%;}
    .board-header  .search-btn:hover {
    background: #333;
    transform: scale(1.05);
  }

  @media (max-width: 650px) {

  .search-select-wrap svg {
  width:15px; height:15px;
  }
    .board-header  .search-divider {
    height: 20px;
  }

     .board-header .search-btn {
    width: 53px;
    height: 53px;
  }


	}



  /* ── 모바일 ── */
  @media (max-width: 480px) {

	}


/* ══════════════════════════════════
  세부 - 포탈카운트다운
══════════════════════════════════ */

  .count-bar {
	 color:var(--text-g); padding-top:30px;
    margin-bottom: 14px;
  }

  .count-bar b { color:var(--text);font-weight: 600; }

/* ══════════════════════════════════
  세부 - 리스트
══════════════════════════════════ */

  /* ── 보드 등록 내용없음 ── */
.no_list_board {background:#eee; padding:60px 30px; font-size:clamp(20px, 2.5vw, 30px);
text-align:Center;
color:#777;}


  /* ── 본문 ── */
  .board-body {
    padding-block:clamp(30px, 2.5vw, 60px);
  }

  /* ── 포스트 리스트 ── */
   .board-body  .post-list {
    display: flex;
	border-top:2px solid #000;
    flex-direction: column;
    gap: 10px;
	padding:0px 10px;
  }

   .board-body .post-item {
    padding-block: clamp(16px,2.5vw, 30px);
	padding-inline:2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 5%;
    cursor: pointer;
	border-top:1px solid #ddd;
    transition: box-shadow 0.18s, transform 0.18s;
    text-decoration: none;
    color: inherit;
  }
   .board-body .post-item svg {vertical-align:middle;}


   .board-body  .post-item:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    transform: translateY(-2px);
  }

   .board-body .post-num {
   font-family: "Oswald", sans-serif;
	 font-size: clamp(20px, 2.5vw, 28px);
    font-weight:500;
   }
    .board-body  .post-left {
    display: flex;  position:relative;
    flex-direction: column;
    gap:clamp(2px, 1.5vw, 10px);
    flex: 1;
    min-width: 0;
  }
    .board-body  .post-left:before{content:'';
	position:absolute; right:1%; top:50%;
	transform:translateY(-50%);
	width:clamp(20px, 2.5vw, 60px);
     height:clamp(20px, 2.5vw, 60px);
			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'%23000'%20class%3D'size-6'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M12%202.25c-5.385%200-9.75%204.365-9.75%209.75s4.365%209.75%209.75%209.75%209.75-4.365%209.75-9.75S17.385%202.25%2012%202.25Zm4.28%2010.28a.75.75%200%200%200%200-1.06l-3-3a.75.75%200%201%200-1.06%201.06l1.72%201.72H8.25a.75.75%200%200%200%200%201.5h5.69l-1.72%201.72a.75.75%200%201%200%201.06%201.06l3-3Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
			background-size: auto 80%;
			background-repeat: no-repeat;
			background-position: center center;
     opacity:0.2;
			}

    .board-body  .post-left:hover:before {opacity:1;}


    .board-body  .post-title {
   font-size: clamp(17px, 2.5vw, 22px);
    font-weight: 600; 
    letter-spacing: -0.02em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.8;
  }


    .board-body  .post-title svg {width:20px; height:20px;}

    .board-body  .post-title .notice_n_icon{
		font-size: clamp(13px, 2.5vw, 17px);
		  font-weight: 600;
		  background: var(--gold);
		  width: fit-content;
		  padding: 6px 20px;
		  border-radius: 50px;
		  color: #fff; line-height:1;
	}


     .board-body  .post-meta {
    display: flex;
    align-items: center;
    gap:clamp(14px, 2.5vw, 20px);
  }

  .board-body .meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color:var(--text-m);
    white-space: nowrap;
  }

      .board-body  .meta-item svg {
	  vertical-align:middle;
    flex-shrink: 0;
	width:clamp(13px, 2.5vw, 20px);
	height:clamp(13px, 2.5vw, 20px);
    color:var(--text-m);
  }

.list_admin_icon_mode {width:100%;padding:10px 15px; background:#f8f8f8; align-items:center;   display:flex; flex-wrap:wrap; gap:10px 30px;}
.list_admin_icon_mode h2 {font-size:15px;}

.list_admin_icon_mode  dl {display:flex; color:#666; font-size:15px; flex-wrap:wrap;  align-items:center; gap:4px 4px;  }
.list_admin_icon_mode dl ,
.list_admin_icon_mode dl dt ,
.list_admin_icon_mode dl dd { white-space:nowrap; }
.list_admin_icon_mode a {background:#333; color:#fff; font-size:14px; border-radius:2px; padding:2px 10px;}

.all_select_board {width:100%; display:flex;  align-items:center;  gap:10px; padding-bottom:20px;  }

  /* ── 모바일 ── */
  @media (max-width: 650px) {
.list_admin_icon_mode h2  {width:100%;}
	}



  /* ── 페이지네이션 ── */
  .board-body .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px; 
  }

    .board-body .page-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    color: #aaa;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.12s;
    background: #fff;
  }

    .board-body .page-btn:hover { color: #111; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

   .board-body  .page-btn.active {
    background: #111;
    color: #fff;
    font-weight: 600;
  }


.write-row { overflow:hidden; width:100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 18px; gap:10px;
  }
 .write-row  a{
 text-align:Center;
	justify-content: center;
	 max-width:100px;
border:2px solid #000; 
    border-radius:var(--radius);
    padding-block:6px;
	padding-inline:clamp(20px, 2.5vw,60px);


    font-size: clamp(14px, 2.5vw,18px);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s;
  }
.write-row  a.ok {background:#333; color:#fff;}
 .write-row  a.ok:hover { background: #000; }




/* ══════════════════════════════════
  세부 - 뷰어
══════════════════════════════════ */
  .view-body .view-title-card {
    background: #f6f6f6;
    border-radius: var(--radius);
	 padding-inline:3%;
	padding-block:clamp(28px, 2.5vw, 60px);
	margin-bottom: 16px;
  }

    .view-body .view-title {
    font-size: clamp(23px, 2.5vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.5;
    margin-bottom: 14px;
  }


  /* ── 상세 정보 카드 ── */
     .view-body  .view-info-card {
    background: #fff; border:1px solid #ddd;
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 10px;
    overflow: hidden;
  }
     .view-body  .info-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
  }

      .view-body  .info-row:last-child { border-bottom: none; }

      .view-body  .info-label {
    width: 110px;
    flex-shrink: 0;
    padding: 14px 18px;
    font-weight: 600;
    color: #999;
    background: #fafafa;
    display: flex;
    align-items: center;
    border-right: 1px solid #f0f0f0;
  }

  .info-value {
    flex: 1;
    padding: 14px 18px;
    font-size: 13px;
    color: #444;
    display: flex;
    align-items: center;
  }


  .view-content-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 30px;
    margin-bottom: 10px;
    min-height: 200px;
    color: #333;
    line-height: 1.9;
  }

  .view-content-card  img {max-width:100%;}



    .view-body .view-nav-card {
	border-top:2px solid #ddd;
    overflow: hidden;
    margin-bottom: 20px;
  }

     .view-body  .nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background 0.12s;
  }

      .view-body .nav-item:last-child { border-bottom: none; }
     .view-body  .nav-item:hover { background: #fafafa; }

      .view-body .nav-label {
    font-weight: 500;
    color:var(--text-g);
	width:16%;
    max-width: 130px;
    flex-shrink: 0;
  }

       .view-body .nav-title {
    color:var(--text-m);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }





/* ══════════════════════════════════
  세부 - 뷰어
══════════════════════════════════ */


table.boardReg_new {border:1px solid #ddd; border-top:2px solid #000; margin-top:20px;}
table.boardReg_new,
table.boardReg_new thead,
table.boardReg_new tbody,
table.boardReg_new tr,
table.boardReg_new th,
table.boardReg_new td {display:flex; flex-wrap:wrap; }


#tx_trex_container {width:100%;}
table.boardReg_new th,
table.boardReg_new td {padding-block:10px;}

table.boardReg_new  tr {width:100%; justify-content: stretch;}

table.boardReg_new td {padding-inline:clamp(10px, 2.5vw, 25px); flex:1;  align-items: center; gap:5px;}

table.boardReg_new th { justify-content: stretch;
width: 150px;
  flex-shrink: 0;
  padding: 14px 18px;
  font-weight: 600;
  color: #999;
  background: #fafafa;
  display: flex;
  align-items: center;
  border-right: 1px solid #f0f0f0;
}


table.boardReg_new tr{
  display: flex; 
  border-bottom: 1px solid #f0f0f0;
}


/* ── 모든 text input ── */
table.boardReg_new td select,
table.boardReg_new td input[type="text"],
table.boardReg_new td input.type-text1 {
  height:clamp(35px, 2.5vw, 50px);
  border: 1px solid var(--bd) ;
  border-radius:var(--radius2);
  padding: 0 12px ;
	font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 400 ;
  color: var(--text) ;
  background: var(--bg-c) ;
  outline: none ;
  transition: border-color .18s, background .18s, box-shadow .18s ;
  box-shadow: none ;
  max-width: 90% ;
  display: block ;
}
table.boardReg_new td input[type="text"],
table.boardReg_new td input.type-text1 
  {appearance: none ;
  -webkit-appearance: none ;
}


table.boardReg_new td input[type="text"]:focus,
table.boardReg_new td input.type-text1:focus {
  border-color: var(--gold) ;
  background: var(--gold-bg) ;
  max-width: 90%;
  box-shadow: 0 0 0 3px rgba(184,134,11,.08) ;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

}
table.boardReg_new td input[type="text"]::placeholder,
table.boardReg_new td input[type="text"]:placeholder {
  max-width: 90%  ;
  color: var(--text-m) ;
  font-weight: 300 ;
    width:auto;
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}




  /* ── 모바일 ── */
  @media (max-width: 650px) {
table.boardReg_new th {width:100%;}
	}


/* ══════════════════════════════════
  교육운영사례
══════════════════════════════════ */
.gallerynew03  {display:flex; gap:25px 25px; flex-wrap:wrap;}
.gallerynew03 .list {width: calc(33.33% - 19px);   border:1px solid #ddd; border-radius:var(--radius);
    transition: box-shadow 0.18s, transform 0.18s;
}

.gallerynew03 .list .img {width:100%; aspect-ratio:4/3}
.gallerynew03 .list .img img {width:100%;height:100%; object-fit:cover;}

.gallerynew03 .list:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    transform: translateY(-2px);
  }

.gallerynew03 .list .tit-area {
display:flex; flex-wrap:wrap; gap:10px 0px;
flex-direction:column;
padding-block:clamp(10px, 5.5vw, 30px);
padding-inline:clamp(15px, 5.5vw, 30px);
}

.gallerynew03 .list .tit-area h3 {font-weight:600; flex:1;  min-height: 50px;
letter-spacing:-0.02rem; margin-bottom:auto; line-height:1.4; font-size:clamp(19px, 2.5vw, 26px);}
.gallerynew03 .list .tit-area h4 {font-weight:300;  margin-top:auto; padding-left:0;
color:var(--text-g); line-height:1; font-size:clamp(16px, 5.5vw, 18px);}
.gallerynew03 .list .tit-area h4 span.edu-company {padding-bottom:3px;  line-height:1.3;padding-bottom:10px;
font-weight:400;
display:block; }
.gallerynew03 .list .tit-area h4 br {display:none;}


  @media (max-width: 900px) {
.gallerynew03 .list {width: calc(50% - 19px);  
}
	}
  @media (max-width: 650px) {
.gallerynew03 .list {width:100%;}  


	}
/*===================================
04. 교육문의 - 03. 담당자연락처
====================================*/

  :root {
    --navy: #1a2744;  
	--navy-mid: #243258;
  }


  /* ── Grid layout ── */
  .contact_grid {  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  }

   .contact_grid  .contact_cards {	border: 1px solid #ddd;
    box-shadow: 0 2px 16px rgba(26,39,68,0.06);
    transition: box-shadow 0.25s, transform 0.25s;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

   .contact_grid  .contact_cards:hover {
    box-shadow: 0 8px 32px rgba(26,39,68,0.12);
    transform: translateY(-2px);
  }



    .contact_image_panel .image_overlay,
   .contact_grid  .contact_card {
    padding-block:clamp(40px, 2.5vw, 60px);
    padding-inline:clamp(20px, 2.5vw, 60px);

  }

    .contact_grid  .card_label { 
	font-family: "Oswald", sans-serif;
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }

    .contact_grid .card_title {
    font-size:clamp(20px, 2.5vw, 30px);
    font-weight: 700;
    margin-bottom: 28px;
    padding-bottom: 34px; line-height:1.5;
    border-bottom: 1px solid rgba(26,39,68,0.07);
  }

.contact_image_panel .image_overlay .card_label{color:#fff;}
.contact_image_panel .image_overlay .card_title {color:var(--gold);}

    .contact_grid   .contact_item { 
    display: flex;  padding:8px 0px;
    align-items: center;
    gap: 10px 25px;
    text-decoration: none;
    transition: color 0.2s;
  }
     .contact_grid  .contact_item:last-child { margin-bottom: 0; }

      .contact_grid .contact_icon {
    width: 46px; height: 46px;
    border-radius: 7px;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
     .contact_grid  .contact_icon svg {
    width: 18px; height: 18px;
    stroke: #fff;
  }

      .contact_grid .contact_text {
    display: flex; flex-wrap:wrap;
    gap: 0px 10px;  align-items: center;
  }
    .contact_grid  .c_sub { 	font-size: clamp(16px, 2.5vw, 20px);
    color: var(--text-m); font-weight:700;
  }
    .contact_grid   .contact_text .c_val {
    font-weight: 300; 
color: var(--text-s);
	font-size: clamp(16px, 2.5vw, 20px);
  }


  /* ── Hours badge ── */
      .contact_grid .hours_badge {
    display: flex; 	height:60px;
    align-items: center;
    gap: 6px;
    background: rgba(200,169,110,0.12);
    color: #8a6a30;
	font-size: clamp(13px, 2.5vw, 16px);
    font-weight: 500;
    padding: 7px 22px;
    border-radius: 6px;
    margin-top: 16px;
  }
        .contact_grid .hours_dot {
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 50%;
  }

  /* ── Image panel ── */
  .contact_image_panel {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: var(--navy-mid);
    display: flex;
    flex-direction: column;
  }

  .contact_image_panel img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.55;
  }

    .contact_image_panel .image_overlay {
z-index:2;
    background: linear-gradient(to top, rgba(26,39,68,0.92) 0%, transparent 100%);
	height:auto; display:flex; flex-wrap:wrap; flex-direction:column; height:100%; 
  }

     .contact_image_panel  .overlay_desc {
    color: rgba(255,255,255,0.6);
    line-height: 1.7; margin-bottom:auto;
  }

  /* ── CTA Button ── */
    .contact_image_panel  .cta_btn {
    display:flex;
    align-items: center;
	justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
    background: var(--gold);
    font-weight: 700;
	border-radius:var(--radius);
    padding-inline:5%;
	height:60px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
  }

    .contact_image_panel  .cta_btn svg {width:30px; height:30px;}

  .cta_btn:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
  }

  @media (max-width: 780px) {
    .contact_grid { grid-template-columns: 1fr; }


  }


