/* slide */
.idx_top_wrap { position: relative; width: 100%; margin: 0 auto; z-index: -1; }
.idx_bg_wrap { position: relative; width: 100%; z-index: 0; }
.idx_bg { margin: 0; padding: 0; list-style: none; }
.idx_bg > li { position: relative; height: 1000px; overflow: hidden; }
.bg_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bg_img img {  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.0); }
.bg_img img.pos3 { object-position: right bottom; }

.bg_img img.zoom { animation: bgZoomOut 4s ease-in-out forwards; }
@keyframes bgZoomOut {
    0% { transform: scale(1.15); /* 바뀔 때 확 커진 상태로 시작 */ }
    100% { transform: scale(1.0);  /* 서서히 원래 크기로 줄어듦 */ }
}

.idx_top_text { position: absolute; bottom: 440px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1540px; padding: 0 20px; text-align: center; color: #fff; z-index: 10; }
.idx_top_text span { display: block; line-height: 140%; }
.idx_top_text span.top { font-size: 7.5rem; font-family: 'Manse'; letter-spacing: -6px; }
.idx_top_text span strong { font-weight: 900; }
.idx_top_text span.bottom { font-size: 2rem; }
.idx_bg_pager { position: absolute; bottom: 370px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1540px; padding: 0 20px; text-align: center; font-size: 0; z-index: 9999; }
.idx_bg_pager a { display: inline-block; width: 30px; height: 12px; background: #fff; margin-right: 10px; border-radius: 5px; }
.idx_bg_pager a.active { width: 90px; height: 12px; background: #f95d4c; }

@media all and (max-width: 1200px) {
	.idx_bg > li { height: 550px; }
	.idx_top_text { bottom: 160px; }
	.idx_top_text span.top { font-size: 5.5rem; line-height: 105%; letter-spacing: -3px; }
	.idx_top_text span.bottom { margin-top: 7px; font-size: 1.6rem; }
	.idx_bg_pager { bottom: 100px; }
	.idx_bg_pager a { width: 9px; height: 9px; }
	.idx_bg_pager a.active { width: 60px; height: 9px; }
}

@media all and (max-width: 768px) {
    .bg_img img { object-position: 33% 50%; }    
    .bg_img img.pos2 { object-position: 30% 50%; }    
    .bg_img img.pos3 { object-position: 50% 50%; }
	.idx_bg > li { height: 380px; }
	.idx_top_text { bottom: 120px; }
	.idx_top_text span.top { font-size: 3.5rem; letter-spacing: -1px; }
	.idx_top_text span.bottom { font-size: 1.4rem; }
	.idx_bg_pager { bottom: 60px; }
}

/* h2 */
#indexArea h2 { position: relative; margin-bottom: 20px; font-size: 1.7rem; font-weight: 400; color: #999; }
#indexArea h2 strong { margin-right: 7px; font-family: 'Paperozi'; font-weight: 500; font-size: 3.2rem; color: #222; line-height: 130%; }
#indexArea h2 button { float: right; width: 31px; height: 31px; vertical-align: sub; background: #f95d4c url("/img/index/ico-more.png") no-repeat 50% 50%; border-radius: 50%; cursor: pointer; }

@media all and (max-width: 1200px) {
  #indexArea h2 { font-size: 1.5rem;}
  #indexArea h2 strong { display: block; margin-right: 0; font-size: 2.5rem; }
  #indexArea h2 button { float:inherit; position: absolute; right:0; top:10px;}
}

/* 공지사항 */
.notice-wrap { width: 100%; max-width: 1400px; margin: 80px auto 0; }
.notice { width: 100%; font-size: 0; }
.notice li { position: relative; display: inline-block; width: calc(25% - 30px); margin-left: 40px; font-size: 1.6rem; border: 1px dashed #ccc; border-radius: 25px; vertical-align: top; outline: 10px solid #fff; transition: all 0.3s ease-in-out; }
.notice li a { display: table; width: 100%; min-height: 290px; padding: 22px; }
.notice li:first-child { margin-left: 0; }
.notice li span.cate1, .notice li span.cate2, .notice li span.cate3 { display: table; margin-bottom: 10px; padding: 3px 10px; font-family: 'Pretendard'; font-size: 1.7rem; font-weight: 400; color: #fff; border-radius: 25px; }
.notice li span.cate1 { background: #49a83a; }
.notice li span.cate2 { background: #f8a53a; }
.notice li span.cate3 { background: #578fe3; }
.notice li strong { display: block; margin-top: 5px; font-size: 1.9rem; font-weight: 500; line-height: 150%; }
.notice li span.con { display: block; margin-top: 7px; font-size: 1.6rem; opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.notice li span.date { position: absolute; bottom: 24px; letter-spacing: 0; }
.notice li button { display: block; position: absolute; right: 24px; bottom: 24px; width: 41px; height: 41px; background: #fff url("/img/index/ico-arr.png") no-repeat 53% 50%; border-radius: 50%; cursor: pointer; opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.notice li:hover { background: #f95d4c; border-style: solid; border-color: #fff; outline-color: #feeeee; color: #fff; transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(248, 93, 75, 0.15); }
.notice li:hover span.con { opacity: 0.75; transform: translateY(0); pointer-events: auto; }
.notice li:hover button { opacity: 1; transform: translateY(0); pointer-events: auto; }

@media all and (max-width: 1420px) {
    .notice-wrap { padding: 0 20px; }
}

@media all and (max-width: 1200px) {
  .notice-wrap { margin-top:50px; padding: 0 20px; }
  .notice li { width: calc(50% - 15px); margin-left: 30px; margin-bottom: 25px; font-size: 1.5rem;}
  .notice li a { min-height: 170px; }
  .notice li:nth-child(2n+1) { margin-left: 0; }
  .notice li strong { font-size: 1.6rem; line-height: 130%;}
  .notice li span.con { margin-top: 5px; font-size: 1.5rem;}
  /* 모바일/태블릿에서는 호버 여부와 상관없이 내용과 버튼을 완전히 숨김 */
  .notice li span.con,
  .notice li button,
  .notice li:hover span.con,
  .notice li:hover button { display: none !important; }
}

@media all and (max-width: 768px) {
  .notice li { width: 100%; margin-left: 0; }
  .notice li:last-child { margin-bottom: 0; }
  .notice li a { min-height: auto; padding: 17px; }
  .notice li span.cate1, .notice li span.cate2, 
  .notice li span.cate3 { margin-bottom: 7px; padding: 3px 7px; font-size: 1.5rem;}
  .notice li span.date  { display: none; position:relative; bottom:initial; margin-top: 7px; color: #999; font-size: 1.4rem;}
}

/* 사업안내 */
.idx-business-wrap { position: relative; width: 100%; max-width: 1400px; height: 580px; margin: 140px auto 120px; outline: 60px solid #f5f7f8; background: #f5f7f8; border-radius: 20px; }
.idx-business-wrap h2 { width: 100%; text-align: center; }
.idx-business-wrap h2 strong { display: block; }
.idx-business-wrap h2 strong b { font-weight: 600; }
.idx-business-wrap ul { width: 30%; margin-top: 10px; }
.idx-business-wrap ul.left { float: left; }
.idx-business-wrap ul.left ul li img.img { display: inline-block; }
.idx-business-wrap ul.right { float: right; }
.idx-business-wrap ul li { position: relative; width: 100%; margin-bottom: 30px; padding-left: 80px; font-size: 0; border: 1px dashed #ccc; border-radius: 25px; outline: 10px solid #f5f7f8; transition: all 0.3s ease-in-out; vertical-align: top; background-color: #fff; background-repeat: no-repeat; background-position: 37px 50%;}
.idx-business-wrap ul li a { display: block; width: 100%; height: 138px; padding: 29px 25px 0 35px; position: relative; }
.idx-business-wrap ul li a::after { content: ''; position: absolute; top: 29px; left: 35px; width: 75px; height: 75px; background-size: contain; background-repeat: no-repeat; background-position: left center; opacity: 0; transition: opacity 0.4s ease; }
.idx-business-wrap ul li:last-child { margin-bottom: 0; }
.idx-business-wrap ul li img { display: inline-block; transition: opacity 0.4s ease; vertical-align: top; }
.idx-business-wrap ul li span { display: inline-block; width: 100%; padding-left: 15px; font-size: 1.6rem; vertical-align: top; }
.idx-business-wrap ul li span strong { display: inline-block; position: relative; padding-top: 25px; font-weight: 500; font-size: 2rem; line-height: 135%; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; }
.idx-business-wrap ul li span strong::before { content: ''; position: absolute; left: -4px; bottom: -2px; width: calc(100% - 31px); height: 28px; background-color: transparent; border-radius: 6px; z-index: -1; transition: background-color 0.3s ease; }
.idx-business-wrap ul li span span { display: block; width: 100%; padding-left: 0; margin-top: 5px; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); }
.idx-business-wrap ul li span button { display: inline-block; width: 25px; height: 25px; margin-left: 6px; vertical-align: top; background: #f95d4c url("/img/index/ico-arr-s.png") no-repeat 10px 50%; border-radius: 50%; position: relative; z-index: 2; }
.idx-business-wrap ul.right li:nth-child(3) span button { background-color: #f8a439; }
.idx-business-wrap ul.right li:nth-child(3):hover span button { background-color: #fff; }

.idx-business-wrap ul li:hover { background-color:#f95d4c; color: #fff; border-color: #f85d4b; outline-color: #f5e7e6; transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(248, 93, 75, 0.15); }
.idx-business-wrap ul li:hover span strong { transform: translateY(-24px); }
.idx-business-wrap ul li:hover span span { opacity: 1; transform: translateY(-22px); pointer-events: auto; }
.idx-business-wrap ul li:hover span button { background: #fff url("/img/index/ico-arr-s-on.png") no-repeat 10px 50%;}

.idx-business-wrap ul.left li:nth-child(1) { background-image:url("/img/index/business1.png"); }
.idx-business-wrap ul.left li:nth-child(2) { background-image:url("/img/index/business2.png"); }
.idx-business-wrap ul.left li:nth-child(3) { background-image:url("/img/index/business3.png"); }
.idx-business-wrap ul.left li:nth-child(1):hover { background-image:url("/img/index/business1-on.png"); }
.idx-business-wrap ul.left li:nth-child(2):hover { background-image:url("/img/index/business2-on.png"); }
.idx-business-wrap ul.left li:nth-child(3):hover { background-image:url("/img/index/business3-on.png"); }
.idx-business-wrap ul.right li:nth-child(1) { background-image:url("/img/index/business4.png"); }
.idx-business-wrap ul.right li:nth-child(2) { background-image:url("/img/index/business5.png"); }
.idx-business-wrap ul.right li:nth-child(3) { background-image:url("/img/index/business6.png"); }
.idx-business-wrap ul.right li:nth-child(1):hover { background-image:url("/img/index/business4-on.png"); }
.idx-business-wrap ul.right li:nth-child(2):hover { background-image:url("/img/index/business5-on.png"); }
.idx-business-wrap ul.right li:nth-child(3):hover { background-image:url("/img/index/business6-on.png"); }
.idx-business-wrap div.tel { position: absolute; left: 50%; top: 100px; transform: translate(-50%, 0%); width: 440px; height: 475px; padding: 40px; color: #777; background: url("/img/index/business-bg.png") no-repeat 50% bottom; z-index: 9; }
.idx-business-wrap div.tel strong { display: block; font-size: 3.3rem; font-weight: 500; font-family: 'Manse'; color: #2f64f1; line-height: 120%; }
.idx-business-wrap div.tel span { display: block; margin-top: 15px; font-size: 2rem; font-weight: 600; color: #222; }
.idx-business-wrap div.tel span.tel { color: #f85d4b; margin-top: 2px; font-size: 3.3rem; font-weight: bold; font-family: 'Paperozi'; line-height: 120%; }

@media all and (max-width: 1420px) {
    .business-wrap { padding: 0 20px; }
}

@media all and (max-width: 1200px) {
  .idx-business-wrap { height: auto; margin: 40px auto 50px; outline: none; padding: 40px 20px; border-radius: 0; }
  .idx-business-wrap ul { display: block; width: 48.5%; }
  .idx-business-wrap ul li {  margin-bottom: 25px; }
  .idx-business-wrap ul li a { display: block; width: 100%; height: 120px; padding: 22px 25px 15px 35px; position: relative; }
  .idx-business-wrap div.tel { position: static; display: flow-root; transform: none; top: auto; left: auto; width: 100%; height: auto !important; transform: translateY(30px) !important; margin-bottom: 30px;padding: 25px; color: rgba(255, 255, 255, 0.5); font-size: 1.5rem; background: #2f64f1 none; border-radius: 25px; }
  .idx-business-wrap div.tel strong { font-size: 2.7rem; color: #fff; }
  .idx-business-wrap div.tel span { font-size:1.5rem; font-weight: 500; color: #fff; }
  .idx-business-wrap div.tel span.tel { color: #fff; margin-top: 2px; font-size: 2.5rem; font-weight: 600; letter-spacing: 0;}
}

@media all and (max-width: 768px) {
  .idx-business-wrap ul { width: 100%; float: none; }
  .idx-business-wrap ul li { height: auto; margin-bottom: 15px; }
  .idx-business-wrap ul li a { height: auto; padding: 20px; }
  .idx-business-wrap ul li img { width: 60px; }
  .idx-business-wrap ul li span { width: calc(100% - 60px); }  
  .idx-business-wrap ul li span strong { font-size: 1.6rem; padding-top: 5px; transform: none !important; }
  .idx-business-wrap ul li span span { opacity: 1 !important; transform: none !important; pointer-events: auto !important; font-size: 1.4rem; color: #777; }
  .idx-business-wrap ul li span button { width: 20px; height: 20px; margin-left: 4px; background-position: 8px 50%; background-size: 5px; }
  .idx-business-wrap ul li:hover span strong { transform: none !important; }
  .idx-business-wrap ul li:hover span span { transform: none !important; }
  .idx-business-wrap div.tel { padding: 20px; font-size: 1.4rem; color: rgba(255, 255, 255, 0.7);}
  .idx-business-wrap div.tel span.tel { font-size: 2.2rem; color: #fffc00;}
}

/* 후원안내 */
.idx-sponsor-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding-bottom: 50px; background: url("/img/index/sponsor-bg1.png") no-repeat 57% bottom; }
.idx-sponsor-wrap .idx-sponsor { display: inline-block; }
#indexArea .idx-sponsor-wrap h2 { display: block; margin-bottom: 12px; }
.idx-sponsor-wrap h2 > span { padding: 4px 10px; font-size: 1.7rem; color: #fff; background: #3769e4; border-radius: 25px; vertical-align: middle; }
.idx-sponsor-wrap h2 strong { display: inline-block; vertical-align: middle; }
.idx-sponsor-wrap h2 strong span { font-weight: 600; color: #3769e4; }
.idx-sponsor-wrap .idx-sponsor .text { display: inline-block; }
.idx-sponsor-wrap .idx-sponsor .text p:first-child { margin-bottom: 10px; font-size: 2rem; font-weight: 500; }
.idx-sponsor-wrap .idx-sponsor .text p:first-child span { color: #3769e4; }
.idx-sponsor-wrap .idx-sponsor .text p:last-child { margin-top: 10px; font-size: 1.5rem; font-weight: 400; color: #777; }
.idx-sponsor-wrap .bank { float: right; display: block; padding: 25px 35px; color: #fff; background: #3769e4 url("/img/index/sponsor-bg2.png") no-repeat right bottom; vertical-align: top; border-radius: 25px; }
.idx-sponsor-wrap .bank span { display: block; font-size: 1.9rem; }
.idx-sponsor-wrap .bank strong { display: block; width: 100%; margin: 4px 0 11px; padding-bottom: 8px; color: #fffc00; font-weight: 600; font-size: 2.2rem; font-family: 'Paperozi'; border-bottom: 1px dashed #698feb; letter-spacing: 0; }

@media all and (max-width: 1420px) {
  .sponsor-wrap { padding: 0 20px 50px; background-size: 35%; }
}

@media all and (max-width: 1200px) {
  .idx-sponsor-wrap { padding: 0 20px 40px; background: none; }
  .idx-sponsor-wrap h2 > span { display: table;}
  .idx-sponsor-wrap .idx-sponsor .text p { font-size: 1.6rem; }
  .idx-sponsor-wrap .idx-sponsor .text p br { display: none; }
  .idx-sponsor-wrap .idx-sponsor .text p:first-child { margin-bottom: 5px; font-size: 1.9rem; }
  .idx-sponsor-wrap .idx-sponsor .text p:last-child { margin-top: 5px; }
  .idx-sponsor-wrap .bank { float: none; display: block; margin-top: 20px; width: 100%; }
}

@media all and (max-width: 768px) {
  .idx-sponsor-wrap h2 > span { padding: 5px 10px; font-size: 1.5rem; font-weight: 600; }
  .idx-sponsor-wrap .idx-sponsor .text p:first-child { font-size: 1.6rem;  }
  .idx-sponsor-wrap .bank { padding: 20px 20px; font-size: 1.5rem; line-height: 140%; }
  .idx-sponsor-wrap .bank span { font-size: 1.7rem; font-weight: 500;}
  .idx-sponsor-wrap .bank strong {color: #fffc00; margin: 7px 0 11px; padding-bottom: 10px;} 
}
  
/* 일자리상품안내 */
.idx-product-wrap { position: relative; width: 100%; min-height: 1000px; padding-top: 60px; background: #c7e6e8 url("/img/index/product-bg.png") no-repeat 50% 50%/cover; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; }
.idx-product-wrap h2 { width: 100%; text-align: center; }
.idx-product-wrap h2 strong { display: block; }
.idx-product-wrap .text { position: absolute; bottom: 435px; left: max(0px, calc(50% - 700px)); font-size: 1.6rem; color: #333; }
.idx-product-wrap .text span { display: block; font-size: 2.7rem; font-family: 'Manse'; line-height: 120%; }
.idx-product { position: relative; width: 100%; max-width: 1400px; height: 745px; margin: 40px auto 0; text-align: right; }
.idx-product li { position: relative; display: inline-block; margin-left: 17px; border-radius: 45px; vertical-align: top; border: 2px solid #fff; outline: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), outline 0.3s ease, box-shadow 0.3s ease; }
.idx-product li a { display: block !important; width: 100% !important; height: 100% !important; position: relative; }
.idx-product li span { display: flex; flex-direction: column; align-items: flex-end; position: absolute; right: 28px; top: 50%; color: #fff; font-size: 1.6rem; text-align: right; opacity: 0; transform: translateY(calc(-50% + 15px)); z-index: 2; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.idx-product li span b { display: block; font-size: 2.2rem; font-family: 'Paperozi'; font-weight: 500; margin-bottom: 4px; }
.idx-product li span::after { content: ''; display: block; width: 41px; height: 41px; background: #f95d4c url("/img/index/ico-arr-w.png") no-repeat 53% 50%; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.idx-product li img { display: block; width: 100%; height: auto; border-radius: 42px; }
.idx-product li:nth-child(1) { margin: 20px 0 0 0; }
.idx-product li:nth-child(2) { margin-top: 150px; }
.idx-product li:nth-child(6) { margin-top: -70px; }
.idx-product li:nth-child(7) { margin-top: -70px; }
.idx-product li:nth-child(8) { margin-top: -70px; }
.idx-product li:nth-child(9) { position: absolute; right: 347px; bottom: 155px; }
.idx-product li:nth-child(10) { position: absolute; right: 347px; bottom: 0; }
.idx-product li:nth-child(11) { position: absolute; right: 0; bottom: 0; }
.idx-product li:nth-child(11)::before { content: url('/img/index/product11-2.png'); position: absolute; left: 52%; bottom: -60px; transform: translate(-50%, 0%); z-index: 10; pointer-events: none; }
.idx-product li a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease; border-radius: 40px; z-index: 1; }
.idx-product li:hover { transform: translateY(-8px); outline: 5px solid #f95d4c; box-shadow: 0 8px 24px rgba(249, 93, 76, 0.25); }
.idx-product li:hover a::after { opacity: 1; }
.idx-product li:hover span { opacity: 1; transform: translateY(-50%); }

@media all and (max-width: 1420px) {
    .idx-product-wrap { background: #c7e6e8 url("/img/index/product-bg-m.png") no-repeat left bottom/contain }
    .idx-product-wrap .text { display: none; }
    .idx-product { transform: scale(0.95) !important; }
    .idx-product li:nth-child(1) { margin: 0 0 0 0; }
    .idx-product li:nth-child(2) { margin-top: 0; }
    .idx-product li:nth-child(5) { margin-top: 30px; }
    .idx-product li:nth-child(6) { margin-top: -30px; }
    .idx-product li:nth-child(7) { margin-top: -30px; }
    .idx-product li:nth-child(8) { margin-top: -30px; }
}

@media all and (max-width: 1200px) {
    .idx-product-wrap { min-height: auto; padding: 40px 20px 10% 20px; }
    .idx-product-wrap .text { display: none; }
    .idx-product { height: auto; margin-top: 0; text-align: right; font-size: 0; }
    .idx-product li { display: inline-block; position: static !important; width: calc(33.333% - 16px) !important; max-width: 180px; margin: 0 8px 16px 8px !important; background: #fff; border-radius: 25px; }
    /* 이미지 고정 높이 및 object-fit 적용 */
    .idx-product li img { height: 100px !important; object-fit: cover !important; border-radius: 25px 25px 0 0 !important; }    
    .idx-product li:nth-child(11)::before { display: none; }
    .idx-product li a { display: flex !important; flex-direction: column !important; align-items: center; }
    .idx-product li img { order: 1; }
    .idx-product li span { order: 2; padding-bottom: 5px; }
    .idx-product li:hover { transform: none !important; outline: 5px solid #f95d4c !important; box-shadow: 0 8px 24px rgba(249, 93, 76, 0.25) !important; }
    .idx-product li a::after, .idx-product li:hover a::after { display: none !important; }
    .idx-product li:hover span { transform: none !important; }
    .idx-product li span { position: static !important; display: block !important; width: 100%; margin-top: 10px; opacity: 1 !important; color: #333 !important; text-align: center !important; align-items: center !important; pointer-events: auto !important; transform: none !important; }
    .idx-product li span b { font-size: 1.8rem !important; margin-bottom: 0 !important; color: #000; }
    .idx-product li span::after { display: none !important; }
}

@media all and (max-width: 768px) {
  .idx-product { width: 100%; }
  .idx-product li  {width: calc(33.333% - 10px) !important; margin: 0 5px 16px 5px !important; border-radius: 15px; }
  .idx-product li img {height: 70px !important; border-radius: 15px 15px 0 0 !important;}
  .idx-product li span { font-size: 1.4rem !important; }
  .idx-product li span b { font-size: 1.6rem !important; }
  .idx-product li span::after { width: 30px; height: 30px; background-size: 12px; }
}

/* 배너 */
.banner-wrap { width: 100%; max-width: 1400px; margin: 50px auto; }
.banner-wrap h2 { text-align: center; margin-bottom: 30px; }
.banner-wrap h2 strong { display: block; }
.banner-box { position: relative; padding-left: 140px; }
.banner-controls { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; z-index: 10; }
.banner-controls button { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer; outline: none; line-height: 0; }
.banner-controls button img { display: block; vertical-align: middle; }
.banner-slider li { display: inline-block; width: auto !important; padding: 4px 10px; border: 1px dashed #ccc; border-radius: 20px; background: #fff; }
.banner-slider li img { display: block; width: auto; height: auto; border-radius: 15px; }

@media all and (max-width: 1420px) {
  .banner-wrap { padding: 0 20px 0; }
}

@media all and (max-width: 1200px) {
  .banner-wrap { padding: 0 20px; }
  .banner-box { padding-left: 0; padding-top: 50px; }
  .banner-controls { left: 50%; top: 0; transform: translateX(-50%); }
  .banner-slider li img { height: 37px; }

}

@media all and (max-width: 768px) {
  .banner-wrap h2 strong { font-size: 2.2rem; }
}

/* =========================================================
   팝업 컨테이너
========================================================= */
#modalContainer {
    position: fixed;
    top: 120px;
    left: 20px;
    right: 20px;
    z-index: 10000;
    display: none; /* ★숨김처리 (데이터가 있을 때만 JS에서 fadeIn으로 띄움) */
    grid-template-columns: repeat(
        auto-fill,
        minmax(400px, 400px)
    );
    gap: 20px;
    align-items: start;
    align-content: start;
    padding: 10px 10px 40px;
    box-sizing: border-box;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   개별 팝업
========================================================= */

.modal-card {
	position: relative;
	width: 400px;
	max-width: 400px;
	background: var(--card-bg, #fff);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
	box-sizing: border-box;
	animation:
		popupSlideIn
		0.35s
		cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =========================================================
   팝업 등장 효과
========================================================= */

@keyframes popupSlideIn {
	from {
		opacity: 0;
		transform: translateY(-30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


/* =========================================================
   미디어 영역
========================================================= */

.media-box {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #111;
	overflow: hidden;
}


.media-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.media-box iframe,
.media-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: none;
}


/* =========================================================
   이미지 링크
========================================================= */

.image-link-wrapper {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}


.image-link-wrapper::after {
	content: '자세히 보기';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 12px;
	letter-spacing: 1px;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}


.image-link-wrapper:hover::after {
	opacity: 1;
}


/* =========================================================
   확대보기 버튼
========================================================= */

.btn-zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	z-index: 10;
	transition: all 0.2s;
}


.btn-zoom:hover {
	background: rgba(0, 0, 0, 0.9);
	transform: scale(1.08);
}


/* =========================================================
   Footer
========================================================= */

.card-footer {
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fafafa;
	border-top: 1px solid #eee;
	box-sizing: border-box;
}


/* =========================================================
   오늘은 그만보기
========================================================= */

.btn-check {
	font-size: 13px;
	color: var(--text-muted, #777);
	cursor: pointer;
	background: none;
	border: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.btn-check:hover {
	color: #000;
}

/* =========================================================
   닫기
========================================================= */

.btn-close {
	padding: 8px 16px;
	background: #1f2937;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.btn-close:hover {
	background: #374151;
}

/* =========================================================
   이미지 확대보기
========================================================= */

#imageZoomOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.92);
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
}

.image-zoom-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#zoomImage {
	max-width: 95vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   확대보기 닫기
========================================================= */

.image-zoom-close {
	position: absolute;
	top: 20px;
	right: 25px;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 34px;
	line-height: 40px;
	cursor: pointer;
	z-index: 10;
	transition: all 0.2s;
}


.image-zoom-close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: rotate(90deg);
}


/* =========================================================
   모바일
========================================================= */

@media (max-width: 768px) {

	#modalContainer {
		top: 80px;
		left: 10px;
		right: 10px;
		grid-template-columns: 1fr;
		gap: 15px;
		max-height: calc(100vh - 90px);
		padding: 5px 5px 20px;
	}


	.modal-card {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
}