@charset "euc-kr";

/* =============================================================================
   fair_main_wk.css  -  2026 KNU job fair : main page renewal
   Loaded ONLY by /default_wk.asp . Every rule is scoped under .wk-main
   so it never affects the live default.asp / fair_main.css.
   ============================================================================= */

.wk-main{background:#fff;color:#222;font-family:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;letter-spacing:-.02em;}
.wk-main *{box-sizing:border-box;}
.wk-main img{max-width:100%;vertical-align:top;}
.wk-main a{text-decoration:none;color:inherit;}

/* ---------- Hero ----------
   All art lives in /images/.
     main_slide_bg.png         - ONLY this one scales: it is a background and
                                 always covers the whole 590px band, full-bleed
                                 like the red nav / yellow ribbon.
     main_slide_bg_middle.png  - a real image, drawn at its natural pixel size,
     main_slide_image.png        pinned dead-centre. Never resized by viewport;
                                 if it is taller than the band it is cropped
                                 equally top/bottom by overflow:hidden. */
.wk-hero{
	position:relative;
	width:100%;
	height:590px;
	overflow:hidden;
	background:url(/images/main_slide_bg.png) center bottom no-repeat;
	background-size:cover;
	font-size:0;                       /* kill inline-img whitespace */
}
.wk-hero__mid,
.wk-hero__img{
	position:absolute;
	left:50%;
	transform:translateX(-50%);       /* fixed, always horizontally centred */
	width:auto;
	height:auto;                       /* natural size, no viewport scaling */
	max-width:none;
	max-height:none;
}
.wk-hero__mid{top:50%;transform:translate(-50%,-50%);z-index:1;}
.wk-hero__img{bottom:0;z-index:2;}    /* 590px tall -> bottom-centre, sits on the ribbon */

/* ---------- Event place ribbon ---------- */
.wk-place{background:#ffe14c;}
.wk-place__inner{
	width:1260px;margin:0 auto;padding:18px 20px;                 /* +3px top & bottom */
	text-align:center;font-size:18px;font-weight:700;color:#242424;
}
.wk-place__label{font-weight:400;margin-right:12px;}   /* label light (400); venue text stays bold (700) */

/* ---------- Section shell ---------- */
.wk-sec{padding:82px 0;}
.wk-sec--program{background:#fff;}
.wk-sec--story{background:#f6f4ef;}
.wk-sec__inner{width:1260px;margin:0 auto;text-align:center;}

.wk-badge{
	display:inline-block;padding:8px 22px;border-radius:999px;
	background:#2b2b2b;color:#fff;font-size:15px;font-weight:700;
}
.wk-sec__title{
	margin:22px 0 48px;font-size:30px;line-height:1.45;font-weight:400;color:#3a3a3a;
}
.wk-sec__title b{font-weight:800;color:#111;}
.wk-sec__title b:last-of-type{color:#DA1F28;}   /* 2nd bold phrase in each heading -> red */

/* ---------- Program cards ----------
   Each card: a fixed 130x130 person illustration
   (/images/main_icon_01..04.png) standing in front of a rounded blob
   painted from /images/second_bg.png, bottom-aligned BEHIND the figure.
   Hovering the thumb swaps that blob to /images/second_bg_ov.png. */
.wk-programs{
	display:flex;gap:16px;justify-content:center;
	list-style:none;margin:0;padding:0;
}
.wk-prog{flex:0 0 200px;min-width:0;}   /* fixed width + tight gap: cards sit close together */
.wk-prog__link{display:block;text-align:center;}

.wk-prog__thumb{
	display:block;                      /* <span> is inline by default; force block so height applies */
	position:relative;
	height:150px;                       /* fixed box: keeps the abs. figure from escaping upward */
	background:url(/images/second_bg.png) center bottom no-repeat;
	/* blob drawn at its natural size, pinned bottom-centre, BEHIND the <img> */
}
.wk-prog__thumb img{
	position:absolute;
	left:50%;bottom:0;                  /* bottom-centre, standing on the blob */
	transform:translateX(-50%);
	width:130px;height:130px;           /* fixed 130x130, never viewport-scaled */
	max-width:none;
	object-fit:contain;
}
.wk-prog__link:hover .wk-prog__thumb,
.wk-prog__thumb:hover{
	background-image:url(/images/second_bg_ov.png);
}

.wk-prog__name{
	display:inline-flex;align-items:center;gap:6px;
	margin:20px 0 10px;font-size:19px;font-weight:800;color:#1c1c1c;
}
.wk-prog__name::after{
	content:"";flex:none;
	width:15px;height:15px;
	background:url(/images/Layer_1.png) center/contain no-repeat;   /* -> Layer_1on.png on hover */
}
.wk-prog__link:hover .wk-prog__name::after{
	background-image:url(/images/Layer_1on.png);
}
.wk-prog__desc{
	display:block;max-width:200px;margin:0 auto;   /* narrow -> wraps to ~2 lines like the target */
	font-size:14px;line-height:1.6;color:#9a9a9a;
}
.wk-prog__link:hover .wk-prog__name{color:#da2128;}

/* ---------- Participating-company logo strip ----------
   One row of logos in an overflow-hidden viewport. The script at the
   bottom of default_wk.asp shifts the track left by one cell every few
   seconds and recycles the first item to the end. */
.wk-sec--partners{padding:60px 0;background:#fff;}
.wk-sec--partners .wk-sec__inner{margin-bottom:24px;}
.wk-partners{width:100%;}                 /* full-bleed: strip runs edge to edge */
.wk-partners__viewport{overflow:hidden;}
.wk-partners__track{
	display:flex;align-items:stretch;flex-wrap:nowrap;
	list-style:none;margin:0;padding:0;
	will-change:transform;
}
.wk-partners__item{
	flex:0 0 240px;                 /* one cell; the script shifts by this width */
	padding:0 12px;
}
.wk-partners__card{
	display:flex;flex-direction:column;
	height:100%;
	border:1px solid #e5e5e5;border-radius:10px;
	background:#fff;overflow:hidden;
	box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.wk-partners__logo{
	flex:1 1 auto;
	display:flex;align-items:center;justify-content:center;
	min-height:112px;padding:18px 22px;
}
.wk-partners__logo img{
	max-width:100%;max-height:60px;width:auto;height:auto;
	object-fit:contain;
}
.wk-partners__name{
	display:block;
	border-top:1px solid #ededed;background:#f7f7f7;
	padding:12px 12px;
	text-align:center;font-size:13px;color:#555;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Story cards ----------
   The row spans the same ~850px as the program row above and is centred
   the same way, so notice's left edge lines up with the first program
   card and faq's right edge with the last one.
   notice 535px + faq 285px, ~30px gap between them.
   Both cards share one fixed height so notice stays the same size no
   matter how many notices the include prints (even zero). */
.wk-story{
	display:flex;justify-content:space-between;align-items:flex-start;
	width:100%;max-width:850px;margin:0 auto;
}
.wk-card{border-radius:22px;padding:32px 34px;text-align:left;height:191px;}
.wk-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.wk-card__head h3{margin:0;font-size:24px;font-weight:800;}
.wk-card__more img,.wk-card__go img{display:block;}

.wk-card--notice{flex:0 0 535px;background:#2e2e2e;color:#fff;overflow:hidden;}
.wk-card--notice .wk-card__head h3{color:#fff;}
.wk-card--notice .notice-list{list-style:none;margin:0;padding:0;}
.wk-card--notice .notice-list li{border-top:1px solid rgba(255,255,255,.14);}
.wk-card--notice .notice-list li:first-child{border-top:0;}
.wk-card--notice .notice-list li a{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:14px 2px;color:#dcdcdc;font-size:15px;
}
.wk-card--notice .notice-list li a .tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wk-card--notice .notice-list li a .date{flex:none;color:#9a9a9a;font-size:13px;}
.wk-card--notice .notice-list li a:hover .tit{text-decoration:underline;}

.wk-card--faq{
	position:relative;
	flex:0 0 285px;                 /* +30px toward the notice card; ~30px gap remains */
	background:#da2128;color:#fff;
	overflow:hidden;
}
.wk-card--faq .wk-card__head h3{color:#fff;}
.wk-card--faq .wk-card__desc{
	position:relative;z-index:1;
	margin:0 0 16px;font-size:15px;line-height:1.5;color:#ffd7d5;
}
.wk-card--faq .wk-card__go{position:relative;z-index:1;display:inline-block;}   /* in flow, right under the text */
/* seated person, bottom-right, drawn at a fixed height */
.wk-card--faq .wk-card__figure{
	position:absolute;right:0;bottom:0;
	width:auto;height:132px;max-width:none;
	pointer-events:none;
}

/* ---------- narrow viewport (site base width is 1260) ---------- */
@media all and (max-width:1260px){
	.wk-place__inner,.wk-sec__inner{width:100%;}
	.wk-place__inner,.wk-sec__inner{padding-left:20px;padding-right:20px;}
	.wk-programs{flex-wrap:wrap;}
	.wk-prog{flex:1 1 42%;}
	.wk-story{flex-wrap:wrap;}
	.wk-card{flex:1 1 100%;}
}