/* PC 폭 대응 (2026-09-28): 이 파일은 PC 홈페이지(yudeung.com)에서 옮겨온 것이라 폰 레이아웃이
   `@media (max-width: …)` 안에 들어 있다. 앱은 PC 에서도 480px 기둥으로 보여주므로(pc-frame.css)
   그 쿼리들에 `, (min-width: 600px)` 를 덧붙여 폰 규칙이 PC 폭에서도 켜지게 했다.
   320px 이하 초소형 폰 전용 쿼리만 그대로 둔다. */
/* ============================================================
   주요프로그램 / 체험마당 및 부대행사 / 추천코스  (정적 이식)
   출처: yudeung.com 의 아래 CSS를 '원본 <link> 로드 순서 그대로' 병합한 뒤
        실제 사용 중인 규칙만 남기고 #subCont 로 스코프한 것.
        css/2023/common -> 2025/common -> 2025/layouts -> 2025/main
        -> css/2023/sub -> 2025/sub -> 2025/style
   주의:
   - 순서를 바꾸면 미디어쿼리(모바일 폰트 크기 등)가 데스크톱 규칙에 덮인다.
   - :root 변수는 앱 전역(--black 등)을 덮지 않도록 #subCont 에만 정의.
   - swiper 라이브러리 CSS는 레이아웃에서 이미 로드되므로 제외.
   - url()은 원본 CSS 위치 기준 절대경로로 변환.
   - line-height 에 !important 부여: 앱 reset.css 의
     body{line-height:1.6em!important} 가 12px 기준 19.2px 고정값으로
     상속돼 큰 글자가 줄상자를 뚫고 겹치는 문제를 막기 위함.
   ============================================================ */
#subCont{--layoutwidth:1520px;--black:#333;--white:#FFF;--blue:#3c61e9;--txt-blue:#3757cd;--dark_blue:#2d2e41;--skyblue:#e9edf9;--navy:#313362;--puple_1:#E93ED8;--yellow:#FFE310;--scroll-progress:0;}

/* 원본 사이트는 body 폰트 크기를 지정하지 않아 브라우저 기본값 16px 를 쓴다.
   앱 reset.css 는 body{font-size:12px} 라서, 모바일 미디어쿼리의 em 기반
   크기(0.75em, 1.25em ...)가 그대로 축소돼 버린다. 기준을 16px 로 맞춘다. */
#subCont { font-size: 16px; }

/* 원본 2025/css/sub.css 의
     #subCont{padding-top:200px;padding-bottom:200px;color:#fff;word-break:keep-all;background-color:#2C292D}
   중 color/word-break 가 이식 과정에서 누락돼, 색 지정이 없는 요소(.txt_2, h1 등)가
   앱 reset.css 의 body{color:#000} 을 상속받아 어두운 배경에서 검은 글씨로 보였음.
   배경색은 앱의 퍼플 그라데이션을 살리려고 일부러 넣지 않음. */
#subCont { color: #fff; word-break: keep-all; }

/* 개별 규칙이 line-height 를 지정하지 않은 요소용 기본값
   (specificity 가 낮아 위의 구체 규칙들이 우선한다) */
#subCont, #subCont * { line-height: 1.45 !important; }
#subCont .drop-list .list {display:none;
	position:absolute;
	top: 45px;
	left:0;
	width:100%;
	border:1px solid rgb(255 255 255 / 20%);
	background-color:#232323;}
#subCont .drop-list .item {padding: 12px 20px;
	border-top: 1px solid rgb(255 255 255 / 20%);
	float: none;
	margin-right: 0;}
#subCont .drop-list .item:first-child {border-top: 0;}
#subCont .col_yellow {color:var(--yellow)!important}
#subCont .inner {width:auto;padding-left:3.75rem;padding-right:3.75rem;max-width:var(--layoutwidth);margin:auto}
#subCont .f_mon {font-family:'Montserrat'}
@media (max-width: 1420px), (min-width: 600px) {
  #subCont .inner {width:auto}
}
@media (max-width: 1220px), (min-width: 600px) {
  #subCont .inner {padding-left:30px!important;padding-right:30px!important}
}
@media (max-width: 1024px), (min-width: 600px) {
  #subCont .inner {padding-left:24px!important;padding-right:24px!important}
}
@media screen and (max-width:320px) {
  #subCont .inner {width:calc(100% - 10px)}
}
#subCont header .inner {display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:0 30px}
@media (max-width: 1024px), (min-width: 600px) {
  #subCont header .inner {padding:0 20px}
}
#subCont .vs_area .tit {font-size:4rem;font-weight:900;color:#fff;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;width:80%;margin:0 auto}
#subCont .ntc_area .swiper-slide {border:1px solid #fff3;background-color:#313131;border-radius:10px;padding:20px;backdrop-filter:blur(10px)}
#subCont .ntc_area .swiper-slide:hover {background-color:#935acc;box-shadow:1px 1px 30px #935acc;transition:.2s}
#subCont .ntc_area .swiper-slide h4 {color:#fff;line-height:1.4 !important}
#subCont .ntc_area .swiper-slide p {color:#fff;opacity:.5;margin-top:5px}
#subCont .intro_area .tbox .top {justify-content:space-between;margin-bottom:50px!important}
#subCont .intro_area .tbox .top .txt_1 {font-size:1.2rem;font-weight:600}
#subCont .intro_area .tbox .top .txt_2 {font-size:1.8rem}
#subCont .intro_area .tbox .bottom .txt_1 {color:#fff;text-align:left}
#subCont .intro_area .tbox {position:relative;z-index:2;text-align:center;max-width:1100px;width:100%}
#subCont .intro_area .txt_1 {font-size:1.8rem;margin-bottom:15px;font-weight:300;letter-spacing:.05em;opacity:0;transform:translateX(-100px);letter-spacing:-.07em}
#subCont .intro_area .txt_2 {font-size:6.5rem;color:#fff;margin-bottom:20px;font-weight:700;letter-spacing:.02em;opacity:0;transform:translateY(50px);text-shadow:0 0 20px #ffffff4d}
#subCont .intro_area .bottom .txt_1 img {margin-right:10px}
#subCont .intro_area .bottom .txt_1 img, #subCont .intro_area .bottom .txt_3 img {width:30px}
#subCont .vdo_area .inner {width:1400px}
#subCont .vdo_area .tbox {color:#fff;font-weight:300}
#subCont .vdo_area .tbox h1 {margin-bottom:50px}
#subCont .vdo_area .tbox p {opacity:.5}
#subCont .vdo_area .tbox>div.flexBox {align-items:center;gap:0 30px}
#subCont .vdo_area .tag_list .swiper {width:100%;height:auto}
#subCont .vdo_area .tag_list .swiper-wrapper {align-items:center}
#subCont .vdo_area .tag_list .swiper-slide {color:#fff;font-weight:400;white-space:nowrap;display:flex;align-items:center;justify-content:center;padding:0 15px;flex-shrink:0;width:auto}
#subCont .evt_sd .swiper {width:100%;height:auto;padding:20px 20px 20px 0}
#subCont .evt_sd .swiper-slide {background:#ffffff1a;border-radius:15px;padding:30px;backdrop-filter:blur(10px);border:1px solid #fff3;transition:all .3s ease;height:auto}
#subCont .evt_sd .swiper-slide:hover {transform:translateY(-5px);background:#ffffff26;box-shadow:0 10px 30px #0000004d}
#subCont .evt_sd .swiper-slide .img {width:100%;height:320px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px;margin-bottom:15px}
#subCont .evt_sd .swiper-slide .tbox h3 {color:#fff;font-size:18px;font-weight:600;margin-bottom:10px}
#subCont .evt_sd .swiper-slide .tbox p {color:#fffc;line-height:1.5 !important}
#subCont .evt_sd .swiper-slide .tbox .date {font-weight:600;font-size:1.5rem;opacity:.5;margin-top:20px}
#subCont .evt_sd .swiper-slide .tbox h3 {font-size:1.5rem}
#subCont .evt_sd .swiper-slide:nth-child(odd) .tbox h3 {color:#ff5cef}
#subCont .evt_sd .swiper-slide:nth-child(even) .tbox h3 {color:#5cdeff}
#subCont .evt_sd .swiper-slide:nth-child(3n) .tbox h3 {color:#b8eb42}
#subCont .evt_sd .swiper-pagination {margin-left: 200px; position:relative!important;margin-top:20px!important;height:8px!important;background:#fff3!important;border-radius:10px!important;overflow:hidden!important;display:block!important;visibility:visible!important;opacity:1!important;z-index:10!important}
#subCont .txt_1 {font-size:1.4rem}
#subCont .txt_2 {font-size:2.5rem}
@media (max-width: 1280px), (min-width: 600px) {
  #subCont .intro_area .txt_1, #subCont .intro_area .txt_3 {font-size:1.5rem}
  #subCont .intro_area .tbox .bottom .txt_2 {font-size:4rem;margin-top:80px;line-height:1.2 !important}
  #subCont .intro_area .tbox .top {flex-wrap:wrap}
  #subCont .vdo_area .inner {width:100%}
  #subCont .vdo_area .tbox p {font-size:16px;margin-top:10px}
}
@media (max-width:1024px), (min-width: 600px) {
  #subCont .vs_area .tit {width:90%;flex-direction:column;line-height:1.2 !important;text-align:center}
}
@media (max-width: 768px), (min-width: 600px) {
  #subCont .vs_area .tit {text-align:center}
  #subCont .evt_sd .swiper-slide .img {height:220px}
}
@media (max-width: 480px), (min-width: 600px) {
  #subCont .vs_area .tit {font-size:3rem;letter-spacing:-.05em}
  #subCont .txt_1 {font-size:1.2rem}
  #subCont .txt_2 {font-size:2rem}
  #subCont .vdo_area .tag_list .swiper-slide {font-size:12px;padding:0 10px}
  #subCont .evt_sd .swiper {padding:0 10px}
  #subCont .evt_sd .swiper-slide {padding:15px}
  #subCont .evt_sd .swiper-slide .img {height:150px}
  #subCont .evt_sd .swiper-slide .tbox h3 {font-size:16px}
  #subCont .evt_sd .swiper-slide .tbox p {font-size:13px}
}
#subCont .sub-1-1 .sec-1 .inner {position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;}
#subCont .sub-1-1 .sec-1 .inner .img {position: relative;
    width: 585px;
    z-index: 99;}
#subCont .sub-1-1 .sec-1 .inner .img::after {display: block;
    content: "";
    width: 145px;
    height: 133px;
    background: url(https://yudeung.com/images/main/frm-1.png) no-repeat;
    position: absolute;
    top: -50px;
    left: -50px;}
#subCont .sub-1-1 .sec-1 .inner .tbox {width: calc(100% - 700px);
    margin-left: auto;}
#subCont .sub-1-1 .sec-1 .inner .tbox .top {padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba( 255 255 255 / 10%);}
#subCont .sub-1-1 .sec-1 .inner .tbox .top p {background: url("https://yudeung.com/images/sub/logo.png") left center no-repeat;
    padding: 20px 0 20px 130px;}
#subCont .sub-1-1 .sec-1 .inner .tbox .top h2 {font-family: 'Giants';}
#subCont .sub-1-1 .sec-1 .inner .tbox .top h2 span, #subCont .sub-1-1 .sec-2 h3 span {color: #f9b000;}
#subCont .sub-1-1 .sec-2 .inner {display: flex;
    flex-wrap: wrap;
    align-items: center;}
#subCont .sub-1-1 .sec-2 .item {width: 50%;
    padding: 80px 50px;
    z-index: 9;}
#subCont .sub-1-1 .sec-2 .item .img {margin: 30px auto;}
#subCont .sub-1-1 .sec-2 .item h3 {text-align: center;
    font-family: 'Giants';
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba( 255 255 255 / 10%);}
#subCont .sub-1-2 .top > .tbox {position: absolute;
    bottom: -50px;
    left: 100px;
    border-radius: 20px;
    width: 420px;
    padding: 40px;}
#subCont .sub-1-2 .top > .tbox.n-1 {background: url("https://yudeung.com/images/main/event-info-bg-1.png") center / cover no-repeat;}
#subCont .sub-1-2 .top > .tbox.n-2 {background: url("https://yudeung.com/images/main/event-info-bg-3.png") center / cover no-repeat;}
#subCont .sub-1-2 .top > .tbox h3 {font-family: 'Giants';}
#subCont .sub-1-2 .top > .tbox h3::before {display: block;
    content: "";
    width: 64px;
    height: 42px;
    background: url(https://yudeung.com/images/sub/logo.png) center / contain no-repeat;
    position: absolute;
    right: 20px;
    top: 20px;}
#subCont .sub-1-2 .img {border-radius: 10px;
    overflow: hidden;}
#subCont .sub-1-2 .img > img {width: 100%;}
#subCont .sub-1-2  .txt {width: 550px;
    margin: 50px 0 0 auto;}
#subCont .sub-1-3 .top .img {border-radius: 10px;
    overflow: hidden;
    margin-bottom: 50px;}
#subCont .sub-1-3 .top .img img {width: 100%;}
#subCont .sub-1-3 .top .tbox {display: flex;
    flex-wrap: wrap;}
#subCont .sub-1-3 .top .tbox h2 {width: 450px;
    font-family: 'Giants';}
#subCont .sub-1-3 .top .tbox p {width: calc(100% - 550px);
    margin-left: auto;}
#subCont .sub-1-3 .bottom .sd-wrap.n-1 {padding: 0 0 80px 0;}
#subCont .sub-1-3 .bottom .sd-wrap.n-2, #subCont .sub-1-3 .bottom .sd-wrap.n-3 {padding: 80px 0;}
#subCont .swiper-button-next.n-1 {right: 0;}
#subCont .swiper-button-prev.n-1 {left: 0;}
#subCont .sub-1-3 .bottom .list .item {background: #474857;
    padding: 20px;
    
    border-radius: 10px;
    cursor: pointer;}
#subCont .sub-1-3 .bottom .list .item .img {border-radius: 10px;
    overflow: hidden;}
#subCont .sub-1-3 .bottom .list .item .img img {width: 100%;}
#subCont .sub-1-3 .bottom .list .item .tbox {margin-top: 20px;}
#subCont .sub-1-3 .bottom .list .item .tbox h4 {font-family: 'Giants';
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba( 255 255 255 / 30%);}
#subCont .sub-1-3 .bottom .list .info > div {display: flex;
    flex-wrap: wrap;}
#subCont .sub-1-3 .bottom .list .info > div:not(:last-child) {margin-bottom: 10px;}
#subCont .sub-1-3 .bottom .list .info > div b {position: relative;
    width: 70px;
    font-size: 14px;}
#subCont .sub-1-3 .bottom .list .info > div b::after {display: block;
    content: "";
    width: 2px;
    height: 15px;
    background: url(https://yudeung.com/images/sub/dot-line.png) center / contain no-repeat;
    position: absolute;
    top: 5px;
    right: 10px;}
#subCont .sub-1-3 .bottom .list .info > div p {font-size: 14px;}
#subCont .sub-1-3 .bottom .list .info > div p {width: calc(100% - 80px);}
#subCont .sub-1-4 .cbox > h3.tit, #subCont .sub-2-3 .item h3.tit {position: relative;
    padding-left: 40px;
    margin-bottom: 20px;}
#subCont .sub-1-4 .cbox h3.tit::before, #subCont .sub-2-3 .cbox h3.tit::before {position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: "";
    width: 23px;
    height: 30px;
    background: url(https://yudeung.com/images/sub/tit-bg.png) center / contain no-repeat;}
#subCont .sub-1-4 .cbox.n-1 > div {display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 20px;
    text-align: center;}
#subCont .sub-1-4 .cbox.n-1 > div > div {width: calc((100% - 20px)/2);}
#subCont .sub-1-4 .cbox.n-1 > div img {width: 100%;}
#subCont .sub-1-4 .cbox.n-1 > div p {margin-top: 20px;
    font-size: 18px;}
#subCont .sub-1-4 .cbox.n-2 {margin-top: 50px;}
#subCont .sub-1-4 .cbox.n-2 .item {padding: 50px;}
#subCont .sub-1-4 .cbox.n-2 .top, #subCont .sub-1-4 .cbox.n-2 .bottom {gap: 0 20px;}
#subCont .sub-1-4 .cbox.n-2 .top .item {width: calc((100% - 20px)/2);}
#subCont .sub-1-4 .cbox.n-2 .bottom .item {width: calc((100% - 40px)/3);}
#subCont .sub-1-4 .cbox.n-2 .item > div, #subCont .sub-1-4 .cbox.n-2 .item > div p {display: flex;
    flex-wrap: wrap;
    gap: 0 10px;}
#subCont .sub-1-4 .cbox.n-2 .item > div b {font-weight: 600;}
#subCont .sub-1-4 .cbox.n-2 .item h3 {text-transform: uppercase;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba( 255 255 255 / 30%);}
#subCont .sub-1-4 .cbox.n-2 .item.orange {background: #ec6707;}
#subCont .sub-1-4 .cbox.n-2 .item.yellow {background: #f9b000;}
#subCont .sub-1-4 .cbox.n-2 .item.blue {background: #0069b4;}
#subCont .sub-1-4 .cbox.n-2 .item.turquoise {background: #009ba4;}
#subCont .sub-1-4 .cbox.n-2 .item.black {background: #000;}
#subCont .sub-2-1 .inner {display: flex;
    flex-wrap: wrap;}
#subCont .sub-2-1 .img {width: calc(100% - 660px);}
#subCont .sub-2-1 .img img {width: 100%;}
#subCont .sub-2-1 .tbox {width: 610px;
    margin-top: 30px;
    margin-left: 50px;}
#subCont .sub-2-2 .img {border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba( 255 255 255 / 50%);}
#subCont .sub-2-2 .img img {width: 50%;
    border-radius: 20px;}
#subCont .sub-2-3 .cbox.n-1 .btn-wrap {display: flex;
    flex-wrap: wrap;
    width: 450px;
    justify-content: end;
    margin-bottom: 20px;
    margin-left: auto;
    gap: 0 20px;}
#subCont .sub-2-3 .cbox.n-1 .btn-wrap .btn {width: calc((100% - 20px)/2);}
#subCont .sub-2-3 .cbox.n-1 .btn-wrap .btn.map {background-color: #06be34;}
#subCont .sub-2-3 .cbox.n-1 .btn-wrap .btn.map span {color: #fff;
    background: url("https://yudeung.com/images/sub/link-arrow-w.png") left center / 15px no-repeat;}
#subCont .sub-2-3 .img {border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba( 255 255 255 / 50%);}
#subCont .sub-2-3 .img img {width: 100%;
    border-radius: 20px;}
#subCont .sub-2-3 .cbox.n-2 {margin-top: 50px;}
#subCont .sub-2-3 .cbox.n-2 .item:not(:last-child) {margin-bottom: 50px;}
#subCont .sub-2-3 .cbox.n-2 .item.n-4 .img {margin-bottom: 20px;}
#subCont.sub-2-5 .item:not(:last-child) {margin-bottom: 50px;}
#subCont.sub-2-5 .item .tit {display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
    border-radius: 20px;}
#subCont.sub-2-5 .item .tit h4 {margin-left: auto;
    font-family: 'Giants';
    font-weight: 400;}
#subCont.sub-2-5 .item.n-1 .tit {background: url("https://yudeung.com/images/main/tour-bg-2.png") center / cover no-repeat;}
#subCont.sub-2-5 .item li:first-child, #subCont.sub-2-5 .item li:last-child {background-color: #181820;}
#subCont.sub-2-5 .item.n-2 .tit {background: url("https://yudeung.com/images/main/tour-bg-3.png") center / cover no-repeat;}
#subCont.sub-2-5 .item.n-3 .tit {background: url("https://yudeung.com/images/main/event-info-bg-1.png") center / cover no-repeat;}
#subCont.sub-2-5 .item .tit > div {display: inline-block;
    background: rgba(255 255 255 / 30%);
    border-radius: 10px;
    padding: 10px 30px;}
#subCont.sub-2-5 .item .tit > div p {font-family: 'Giants';
    font-size: 18px;}
#subCont.sub-2-5 .item .tit > div p::before, #subCont.sub-2-5 .item .tit > div p::after {display: inline-block;
    content: "";
    width: 9px;
    height: 9px;
    background: url(https://yudeung.com/images/common/star.png) center / contain no-repeat;
    margin: 0 10px;
    transform: translateY(-3px);}
#subCont.sub-2-5 .item ul {display: flex;
    flex-wrap: wrap;
    gap: 20px 60px;
    background: #474857;
    padding: 40px;
    border-radius: 20px;
    margin-top: 20px;}
#subCont.sub-2-5 .item ul li {position: relative;
    background: #2f3042;
    padding: 10px 30px;
    border-radius: 10px;}
#subCont.sub-2-5 .item ul li::after {display: block;
    content: "";
    width: 30px;
    height: 11px;
    background: url("https://yudeung.com/images/sub/arr.png") center / contain no-repeat;
    position: absolute;
    right: -45px;
    top: 50%;
    transform: translateY(-50%);}
#subCont.sub-2-5 .item ul li:last-child::after {display: none;}
#subCont.sub3 .list, #subCont.sub4 .list {display: flex;
    flex-wrap: wrap;
    gap: 20px;}
#subCont.sub3 .list .item, #subCont.sub4 .list .item {display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc((100% - 20px) / 2);
    background: #474857;
    padding: 20px;
    border-radius: 10px;}
#subCont.sub3 .list .item .tbox, #subCont.sub4 .list .item .tbox {width: 100%;}
#subCont.sub3 .list .item .tbox .tit, #subCont.sub4 .list .item .tbox .tit {display: flex;
    flex-wrap:wrap;
    align-items: center;
    margin-bottom: 10px;}
#subCont.sub3 .list .item .tbox .tit .badge-1, #subCont.sub4 .list .item .tbox .tit .badge-1 {padding: 0px 10px;
    border-radius: 50px;
    font-size: 14px;}
#subCont.sub3 .list .item:nth-child(1) .tbox .tit .badge-1, #subCont.sub3 .list .item:nth-child(6) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(1) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(6) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(11) .tbox .tit .badge-1, #subCont.sub3 .list .item:nth-child(11) .tbox .tit .badge-1 {background-color: #d62849;}
#subCont.sub3 .list .item:nth-child(2) .tbox .tit .badge-1, #subCont.sub3 .list .item:nth-child(7) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(2) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(7) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(12) .tbox .tit .badge-1 {background-color: #f9b000;}
#subCont.sub3 .list .item:nth-child(3) .tbox .tit .badge-1, #subCont.sub3 .list .item:nth-child(8) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(3) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(8) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(13) .tbox .tit .badge-1 {background-color: #009ba4;}
#subCont.sub3 .list .item:nth-child(4) .tbox .tit .badge-1, #subCont.sub3 .list .item:nth-child(9) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(4) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(9) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(14) .tbox .tit .badge-1 {background-color: #813b9c;}
#subCont.sub3 .list .item:nth-child(5) .tbox .tit .badge-1, #subCont.sub3 .list .item:nth-child(10) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(5) .tbox .tit .badge-1, #subCont.sub4 .list .item:nth-child(10) .tbox .tit .badge-1 {background-color: #23222e;}
#subCont.sub3 .list .item .tbox .tit, #subCont.sub4 .list .item .tbox .tit {display: block;}
#subCont.sub3 .list .item .tbox .tit .badge-1, #subCont.sub4 .list .item .tbox .tit .badge-1 {padding: 5px 10px;}
#subCont.sub3 .list .item .tbox .tit b, #subCont.sub4 .list .item .tbox .tit b {font-family: 'Giants';
    font-size: 17px;
    font-weight: 400;
    margin-top: 10px;
    
    display: block;}
#subCont.sub3 .list .item .tbox .badge-2, #subCont.sub4 .list .item .tbox .badge-2, #subCont.sub4 .list .item .tbox .badge-3 {display: block;
    width: 100%;
    font-size: 14px;
    background-color: #5e6071;
    background-repeat: no-repeat;
    padding: 5px 20px 2px 50px;
    border-radius: 50px;
    margin-bottom: 10px;}
#subCont.sub3 .list .item .tbox .badge-2 {background-image: url(https://yudeung.com/images/sub/light.png);
    background-size: 18px;
    background-position: 20px 5px;}
#subCont.sub4 .list .item .tbox .badge-2 {background-image: url(https://yudeung.com/images/sub/date.png);
    background-size: 18px;
    background-position: 20px 5px;}
#subCont.sub4 .list .item .tbox .badge-3 {background-image: url(https://yudeung.com/images/sub/map.png);
    background-size: 15px;
    background-position: 20px 5px;}
#subCont.sub3 .list .item .tbox .txt, #subCont.sub4 .list .item .tbox .txt {font-size: 14px;
    min-height: 80px;}
#subCont.sub3 .list .item .sd-wrap, #subCont.sub4 .list .item .sd-wrap {width: calc(100%);
    padding-bottom: 0;}
#subCont.sub3 .list .item .sd-wrap .swiper-slide, #subCont.sub4 .list .item .sd-wrap .swiper-slide {cursor: pointer;
    border-radius: 10px;
    overflow: hidden;}
#subCont.sub3 .list .item .sd-wrap .swiper-slide > div, #subCont.sub4 .list .item .sd-wrap .swiper-slide > div {padding-top: calc(300/400 * 100%);
    position: relative;}
#subCont.sub3 .list .item .sd-wrap .swiper-slide > div > img, #subCont.sub4 .list .item .sd-wrap .swiper-slide > div > img {position: absolute;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;}
#subCont .sub-1-3 .sd-wrap .swiper-pagination-bullet-active::after, #subCont.sub3 .sd-wrap .swiper-pagination-bullet-active::after, #subCont.sub4 .sd-wrap .swiper-pagination-bullet-active::after {display: none;}
#subCont .sub-1-3 .sd-wrap .swiper-horizontal>.swiper-pagination-bullets, #subCont .sub-1-3 .sd-wrap .swiper-pagination-bullet, #subCont .sub-1-3 .sd-wrap .swiper-pagination-horizontal.swiper-pagination-bullets
.sub-1-3 .sd-wrap .swiper-pagination-bullet, #subCont .sub-1-3 .sd-wrap .swiper-pagination-bullet-active, #subCont.sub3 .sd-wrap .swiper-horizontal>.swiper-pagination-bullets, #subCont.sub3 .sd-wrap .swiper-pagination-bullet, #subCont.sub3 .sd-wrap .swiper-pagination-horizontal.swiper-pagination-bullets
.sub3 .sd-wrap .swiper-pagination-bullet, #subCont.sub3 .sd-wrap .swiper-pagination-bullet-active, #subCont.sub4 .sd-wrap .swiper-horizontal>.swiper-pagination-bullets, #subCont.sub4 .sd-wrap .swiper-pagination-bullet, #subCont.sub4 .sd-wrap .swiper-pagination-horizontal.swiper-pagination-bullets
.sub4 .sd-wrap .swiper-pagination-bullet, #subCont.sub4 .sd-wrap .swiper-pagination-bullet-active {margin: 0 5px !important;}
#subCont .sub-1-3 .sd-wrap .swiper-pagination-bullet, #subCont.sub3 .sd-wrap .swiper-pagination-bullet, #subCont.sub4 .sd-wrap .swiper-pagination-bullet {padding: 5px;}
#subCont .sub-1-3 .sd-wrap .swiper-pagination, #subCont.sub3 .sd-wrap .swiper-pagination, #subCont.sub4 .sd-wrap .swiper-pagination {bottom: 0 !important;}
@media screen and (max-width: 1280px), (min-width: 600px) {
  #subCont .sub-2-1 .inner .img {width: 40%;}
  #subCont .sub-2-1 .inner .img img {width: 100%;}
  #subCont .sub-2-1 .inner .tbox {width: calc(100% - 45%);
        margin-left: auto;
        margin-top: 0;}
}
@media screen and (max-width: 1024px), (min-width: 600px) {
  #subCont .sub-1-1 .sec-1 .inner .img, #subCont .sub-1-1 .sec-1 .inner .img img {width: 100%;}
  #subCont .sub-1-1 .sec-1 .inner .tbox .top p {padding: 5px 0 5px 80px;
        background-size: 60px;}
  #subCont .sub-1-1 .sec-1 .inner .tbox .top h2 {padding-left: 80px;}
  #subCont .sub-1-1 .sec-1 .inner .img::after {display: none;}
  #subCont .sub-1-1 .sec-1 .inner .tbox {width: 100%;
        margin-top: 20px;}
  #subCont .sub-1-1 .sec-2 .item {width: 100%;
        padding: 40px 0 80px 0;}
  #subCont .sub-1-1 .sec-2 .item .img {width: 100%;}
  #subCont .sub-1-2 .top > .tbox {width: auto;
        left: 20px;
        padding: 40px 80px 40px 40px;}
  #subCont .sub-1-2 .txt {width: 100%;
        margin: 80px auto 0 auto;}
  #subCont.sub3 .list .item, #subCont.sub3 .list .item .tbox, #subCont.sub3 .list .item .sd-wrap, #subCont.sub4 .list .item, #subCont.sub4 .list .item .tbox, #subCont.sub4 .list .item .sd-wrap {width: 100%;}
  #subCont.sub3 .list .item .sd-wrap, #subCont.sub4 .list .item .sd-wrap {margin-top: 20px;}
  #subCont .sub-1-4 .cbox.n-2 .item {padding: 20px;}
  #subCont .sub-1-4 .cbox.n-1 > div, #subCont .sub-1-4 .cbox.n-2 .bottom {gap: 20px 0;}
  #subCont .sub-1-4 .top > .btn-wrap, #subCont .sub-1-4 .cbox.n-1 > div > div, #subCont .sub-1-4 .cbox.n-2 .bottom .item {width: 100%;}
  #subCont .sub-1-4 .cbox.n-2 .item > div p {font-size: 12px;
        gap: 0 2px;}
  #subCont .sub-1-4 .cbox.n-2 .item h3 {font-size: 14px;}
  #subCont .sub-1-3 .bottom .list .item {height: auto;}
  #subCont .sub-1-3 .top .tbox h2 {width: 80%;}
  #subCont .sub-1-3 .top .tbox p {width: 100%;
        margin-left: auto;
        margin-top: 20px;}
  #subCont .sub-1-3 .inner {padding: 0;}
}
@media screen and (max-width: 768px), (min-width: 600px) {
  #subCont .sub-1-2 .top > .tbox {width: auto;
        padding: 20px 80px 20px 22px;}
  #subCont .sub-1-2 .top > .tbox h3 {font-size: 16px;}
  #subCont .sub-1-2 .top > .tbox h3::before {width: 42px;}
  #subCont .sub-1-3 .bottom .sd-wrap.n-1, #subCont .sub-1-3 .bottom .sd-wrap.n-2, #subCont .sub-1-3 .bottom .sd-wrap.n-3 {padding: 60px 0;}
  #subCont .sub-2-1 .inner .img {width: 100%;}
  #subCont .sub-2-1 .inner .tbox {width: 100%;
        margin-top: 30px;}
  #subCont .sub-2-3 .img {padding: 0;
        border-radius: 10px;}
  #subCont .sub-2-3 .img img {border-radius: 10px;}
  #subCont.sub-2-5 .item .tit > div {padding: 0 20px;}
  #subCont .sub-2-3 .item.n-1 table {width: 920px;}
  #subCont .sub-2-3 .item.n-2 table td {text-align: left;}
  #subCont .sub-2-3 .cbox.n-1 .btn-wrap {width: 100%;}
  #subCont.sub-2-5 .item .tit h4 {width: 100%;
        margin-top: 10px;}
  #subCont.sub-2-5 .item ul {padding: 20px;
        gap: 10px 40px;}
  #subCont.sub-2-5 .item:not(:last-child) {margin-bottom: 20px;}
  #subCont.sub-2-5 .item ul li {padding: 5px 10px;
        font-size: 14px;}
  #subCont.sub-2-5 .item ul li::after {width: 23px;
        height: 11px;
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);}
}
#subCont.sub1_1 .sec_1 {text-align:center}
#subCont .sub1_2 .sec_1 {position:relative;margin-bottom:100px}
#subCont.sub1_1 .sec_1 .tbox {opacity:0;transform:translateY(50px)}
#subCont.sub1_1 .sec_1 .imgbox {opacity:0;transform:translateY(50px) scale(0.9);border-radius:20px;overflow:hidden}
#subCont.sub1_1 .sec_1 .imgbox img {width:100%}
#subCont.sub1_1 .sec_1::before {content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 20%,#8b5cf61a 0%,transparent 50%),radial-gradient(circle at 70% 80%,#ec48991a 0%,transparent 50%);z-index:-1;will-change:transform}
#subCont.sub1_1 .sec_1 .txt_1 {font-weight:600;font-size:1.5rem}
#subCont.sub1_1 .sec_1 .txt_2 img {width:30px;margin-right:10px}
#subCont.sub1_1 .sec_1 .txt_2 {font-size:1.5rem;font-weight:300}
#subCont.sub1_1 .sec_1 h1 {font-size:3.5rem}
#subCont.sub1_1 .sec_1 .imgbox {border-radius:10px;margin:50px auto;will-change:transform;transform-origin:center center}
#subCont.sub1_1 .sec_2 .rbox .list {position:relative;display:flex;flex-direction:column;gap:50px 0}
#subCont.sub1_1 .sec_2 .rbox .list::before {position:absolute;top:0;left:-50px;display:block;content:"";width:1px;height:100%;background-color:#fff3}
#subCont.sub1_1 .sec_2 .rbox .list li {position:relative}
#subCont.sub1_1 .sec_2 .rbox .list li::before {display:block;content:"";width:80px;height:80px;background:url(https://yudeung.com/2025/images/sub/star.png) center / cover no-repeat;position:absolute;top:-34px;left:-89px;transform-origin:center center;transition:transform .3s ease}
#subCont.sub1_1 .sec_2 .rbox .list li.rotating::before {animation:rotateStar 3s linear infinite}
#subCont.sub1_1 .sec_2 .rbox .list li img {width:100%;margin-bottom:30px;border-radius:20px;overflow:hidden}
#subCont.sub1_1 .sec_2 .rbox .list li img:hover {transition:.2s;box-shadow:1px 1px 40px #8551ffcc}
#subCont.sub1_1 .sec_2 .rbox .list li .tbox p {font-weight:200;margin-top:20px}
#subCont.sub1_1 .sec_2 .rbox .list li {opacity:0;transform:translateY(50px)}
#subCont .sub1_2 .sec_1 .bd_box {position:relative;display:flex;flex-wrap:wrap;justify-content:center;z-index:99;margin:80px auto}
#subCont .sub1_2 .sec_1 .bd_box .box {border-radius:100px;text-align:center;padding:50px;width:550px}
#subCont .sub1_2 .sec_1 .bd_box .box.n_1 img {width:50px}
#subCont .sub1_2 .sec_1 .bd_box .box.n_2 img {width:30px;margin:10px auto}
#subCont .sub1_2 .sec_1 .bd_box .box.n_1 {background:linear-gradient(135deg,#a18fff,#7f5af0,#c084fc,#a21caf);position:relative;box-shadow:0 0 40px 10px #a21caf66 0 0 80px 20px #805af033;animation:glow-purple 2.5s ease-in-out infinite alternate}
#subCont .sub1_2 .sec_1 .bd_box .box.n_2 {background-color:#fff;margin-left:-50px}
#subCont .sub1_2 .sec_1 .bd_box .box.n_2 p {color:#333}
#subCont .sub1_2 .sec_1 .bd_box .box p.fw600 {font-size:1.3rem}
#subCont .sub1_2 .sec_1 .bd_box .box.n_2 p.fw600 {background:linear-gradient(90deg,#a18fff,#7f5af0,#c084fc,#a21caf);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-weight:700;text-shadow:0 0 10px #a18fff,0 0 20px #7f5af0,0 0 30px #c084fc;animation:glow-purple-text 2s infinite alternate}
#subCont .sub1_2 .sec_2 .tbox:first-child {margin-bottom:50px}
#subCont .sub1_2 .sec_2 .tbox {border:1px solid #fff3;border-radius:20px;padding:80px}
#subCont .sub1_2 .sec_2 .tbox .top {align-items:center;gap:0 20px;margin-bottom:50px}
#subCont .sub1_2 .sec_2 .tbox .bottom {gap:0 100px;flex-wrap:wrap}
#subCont .sub1_2 .sec_2 .tbox .bottom img {width:140px;height:140px}
#subCont .sub1_2 .sec_2 .tbox .bottom > div {width:calc(100% - 240px)}
#subCont .sub1_2 .sec_2 .tbox .bottom .name {margin-top:30px;text-align:right}
#subCont .sub1_2 .sec_1 .tbox {opacity:0;transform:translateY(50px)}
#subCont .sub1_2 .sec_1 .bd_box {opacity:0;transform:translateY(80px) scale(0.9)}
#subCont .sub1_2 .sec_1 .bd_box .box {opacity:0;transform:translateY(50px)}
#subCont .sub1_2 .sec_1 .sub1_2_img {opacity:0;transform:translateY(100px) scale(0.8);will-change:transform;max-width:100%;height:auto;display:block;margin:0 auto;visibility:hidden}
#subCont .sub1_2 .sec_2 .tbox {opacity:0;transform:translateY(60px);transition:all .4s cubic-bezier(0.25,0.46,0.45,0.94);cursor:pointer;position:relative;overflow:hidden}
#subCont .sub1_2 .sec_2 .tbox::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,#ffffff1a,transparent);transition:left .6s ease;z-index:1}
#subCont .sub1_2 .sec_2 .tbox:hover::before {left:100%}
#subCont .sub1_2 .sec_2 .tbox:hover {transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #00000026}
#subCont .sub1_2 .sec_2 .tbox .top {opacity:0;transform:translateX(-30px);transition:all .3s ease}
#subCont .sub1_2 .sec_2 .tbox:hover .top {transform:translateX(0)}
#subCont .sub1_2 .sec_2 .tbox .bottom {opacity:0;transform:translateX(30px);transition:all .3s ease}
#subCont .sub1_2 .sec_2 .tbox:hover .bottom {transform:translateX(0)}
#subCont .sub1_2 .sec_2 .tbox .bottom img {opacity:0;transform:scale(0.8) rotate(-5deg);transition:all .4s cubic-bezier(0.34,1.56,0.64,1)}
#subCont .sub1_2 .sec_2 .tbox:hover .bottom img {transform:scale(1.05) rotate(0deg)}
#subCont .sub1_2 .sec_2 .tbox .bottom > div {opacity:0;transform:translateY(20px);transition:all .3s ease}
#subCont .sub1_2 .sec_2 .tbox:hover .bottom > div {transform:translateY(0)}
#subCont .sub1_2 .sec_2 .tbox:hover h1 {text-shadow:0 0 20px #ffd7004d;transition:all .3s ease}
#subCont .sub1_2 .sec_2 .tbox:hover .name {transition:all .3s ease}
#subCont .historySwiper .swiper-slide {padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:auto;border:1px solid red}
#subCont .historySwiper .swiper-slide .img {margin-bottom:20px}
#subCont .historySwiper .swiper-slide .img img {width:100%;max-width:300px;height:auto;border-radius:15px;box-shadow:0 10px 30px #0000004d}
#subCont .historySwiper .swiper-slide .tbox h4 {font-size:24px;font-weight:700;color:#ffd700;margin-bottom:15px;text-shadow:0 0 20px #ffd70080}
#subCont .historySwiper .swiper-slide .tbox .info {color:#fff;font-size:14px;line-height:1.6 !important}
#subCont .historySwiper .swiper-slide .tbox .info div {margin-bottom:10px}
#subCont .historySwiper .swiper-slide .tbox .info b {color:#ffd700;font-weight:600;display:block;margin-bottom:5px}
#subCont .historySwiper .swiper-slide .tbox .info p {color:#ccc;font-weight:300}
#subCont .historySwiper .swiper-wrapper {display:flex;flex-direction:row;width:auto;will-change:transform;position:relative}
#subCont .historySwiper .swiper-slide {flex-shrink:0;width:400px;margin-right:30px;opacity:1;visibility:visible}
#subCont .historySwiper .swiper-slide:last-child {margin-right:0}
#subCont .historySwiper .swiper-slide[style*="display: none"] {display:none!important;opacity:0;visibility:hidden;width:0;margin:0}
@media (max-width: 1024px), (min-width: 600px) {
  #subCont .historySwiper .swiper-slide {width:300px;margin-right:20px}
}
@media (max-width: 768px), (min-width: 600px) {
  #subCont .historySwiper .swiper-slide {width:250px;margin-right:15px}
  #subCont .historySwiper .swiper-slide .img {height:200px}
  #subCont .historySwiper .swiper-slide .tbox h4 {font-size:18px}
  #subCont .historySwiper .swiper-slide .tbox .info {font-size:12px}
}
@media (max-width: 768px), (min-width: 600px) {
  #subCont .historySwiper .swiper-slide {padding:20px}
  #subCont .historySwiper .swiper-slide .tbox h4 {font-size:20px}
  #subCont .historySwiper .swiper-slide .tbox .info {font-size:12px}
}
#subCont header .inner {padding: 0;}
#subCont .sub-2-3 .cbox.n-1 .btn-wrap {flex-wrap: inherit;
    width: auto;}
#subCont .sub-2-3 .cbox.n-1 .btn-wrap .btn.map.kakao {background-color: #fbe100;
    span {
        filter: invert(1); 
    }}
#subCont .evt_sd .swiper {position: relative;}
#subCont .evt_sd .swiper .evt_controls .swiper-button-prev, #subCont .evt_sd .swiper .evt_controls .swiper-button-next {position: absolute;}
#subCont .evt_sd .swiper .evt_controls .swiper-button-prev {left: 70px;
    top: 260px;}
#subCont .evt_sd .swiper .evt_controls .swiper-button-next {right: -100px;
    top: 260px;}
#subCont .evt_sd .swiper-slide .img {overflow: hidden;
    position: relative;}
#subCont .evt_sd .swiper-slide .img img {position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;}
@media (max-width: 768px), (min-width: 600px) {
  #subCont .ntc_area .swiper-slide {border-radius: 0;}
}
#subCont .ntc_area .swiper-slide h4 {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#subCont .ntc_area .swiper-slide p {line-height: 1 !important; font-size: 14px;}
#subCont #floatingApply .inner {width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    background: #000c;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: transform .4s cubic-bezier(.55,0,.1,1)}
#subCont #floatingApply .event_info .date {display: block;
    font-weight: 700;
    font-size: min(1.6666666667vw,26.6666666667px);
    line-height: 1 !important;
    margin-top: min(.2083333333vw,3.3333333333px)}
#subCont #floatingApply .event_info .date span {font-size: 18px;
    font-weight: 400;
    color: #fff;}
@media (max-width: 768px) and (max-aspect-ratio: .7/1),(max-width: 768px) and (min-aspect-ratio: 1.4/1),(max-width: 600px), (min-width: 600px) {
  #subCont .event_info .date {font-weight: 400;
        margin-top: min(2.2222222222vw,17.0666666667px);
        display: block;
        text-transform: uppercase}
}
@media (max-width: 768px), (min-width: 600px) {
  #subCont #floatingApply .inner {padding: 0 !important;}
  #subCont .sub-2-3 .cbox.n-1 .btn-wrap {width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;}
  #subCont .sub-2-3 .cbox.n-1 .btn-wrap .btn {width: 100% !important;}
  #subCont.sub1_1 .sec_1 .txt_1 {font-size: 0.75em;}
  #subCont.sub1_1 .sec_1 .txt_2 {font-size: 0.875em;}
  #subCont.sub1_1 .sec_1 h1 {font-size: 1.25em;}
}
#subCont .vs_area .tit, #subCont .vs_korean_text, #subCont .vs_theme, #subCont .vs_description {line-height: 1 !important;}
#subCont .prg_list {display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:30px;margin-top:50px;padding:0 20px}
#subCont .prg_list .item {border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #0000004d;transition:all .3s ease;position:relative;opacity:0;transform:translateY(50px)}
#subCont .prg_list .item:hover {transform:translateY(-5px);box-shadow:0 20px 40px #0006 0 0 30px #8b5cf64d 0 0 60px #ec489933}
#subCont .prg_list .item .img {position:relative;padding-top: calc(324/433 * 100%);overflow:hidden;background-color:oklch(0.24 0 0 / 0.5)}
#subCont .prg_list .item .img .swiper {position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;}
#subCont .prg_list .item .img .swiper .swiper-slide div {height: 100%;}
#subCont .prg_list .item .img .swiper .swiper-slide img {height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all .3s ease;}
#subCont .prg_list .item:hover .img img {transform:scale(1.05)}
/* 뱃지: 카드 이미지 위 좌상단 오버레이 */
#subCont .prg_list .item .img .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
#subCont .prg_list .item .tbox {padding:25px;text-align:left}
#subCont .prg_list .item .tit {margin-bottom:15px}
#subCont .prg_list .item .tit span {display:inline-block;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;margin-bottom:10px}
#subCont .prg_list .item:nth-child(1) .badge, #subCont .prg_list .item:nth-child(7n) .badge {background:linear-gradient(135deg,#8b5cf6,#ec4899)}
#subCont .prg_list .item:nth-child(2) .badge, #subCont .prg_list .item:nth-child(8n) .badge {background:linear-gradient(135deg,#f97316,#f59e0b)}
#subCont .prg_list .item:nth-child(3) .badge, #subCont .prg_list .item:nth-child(9n) .badge {background:linear-gradient(135deg,#10b981,#059669)}
#subCont .prg_list .item:nth-child(4) .badge, #subCont .prg_list .item:nth-child(10n) .badge {background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
#subCont .prg_list .item:nth-child(5) .badge, #subCont .prg_list .item:nth-child(11n) .badge {background:linear-gradient(135deg,#ef4444,#dc2626)}
#subCont .prg_list .item:nth-child(6) .badge, #subCont .prg_list .item:nth-child(12n) .badge {background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
#subCont .prg_list .item .tit h3 {font-size:20px;font-weight:700;color:#fff;line-height:1.4 !important;padding-left:0}
#subCont .prg_list .item .info {color:#e5e7eb}
#subCont .prg_list .item .info .date {font-size:14px;font-weight:600;color:#b697ff;margin-bottom:8px}
#subCont .prg_list .item .info .date + .date {color: #fff;}
#subCont .prg_list .item .info .desc {font-size:14px;line-height:1.6 !important;margin:0;color:#d1d5db}
#subCont .prg_list .item .info .txt {font-size:14px;line-height:1.6 !important;margin:0;color:#d1d5db}
#subCont .prg_list .item .info .desc li {color:#d1d5db}
@media (max-width: 768px), (min-width: 600px) {
  #subCont .prg_list {grid-template-columns:1fr;gap:20px;margin-top:30px;padding:0}
  #subCont .prg_list .item .img {height:150px}
  #subCont .prg_list .item .tbox {padding:20px}
  #subCont .prg_list .item .tit h3 {font-size:18px;color:#fff}
}
#subCont .star_tit {position:relative;padding-left:40px}
#subCont .star_tit::before {position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;content:"";width:23px;height:30px;background:url(https://yudeung.com/images/sub/tit-bg.png) center / contain no-repeat}
@keyframes drg {
	0%,100%{transform:translateX(0)}
	50%{transform:translateX(15px)}
}
@keyframes arr {
	0%,100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(5px);
	}
}
@keyframes starTwinkle {
    0%,100%{opacity:.6;transform:scale(1)}
    50%{opacity:1;transform:scale(1.1)}
}
@keyframes menuPulse {
    0%{transform:translate(-50%,-50%) scale(0.8);opacity:.6}
    50%{transform:translate(-50%,-50%) scale(1.2);opacity:.3}
    100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}
}
@keyframes menuPulseActive {
    0%{transform:translate(-50%,-50%) scale(0.9);opacity:.8}
    50%{transform:translate(-50%,-50%) scale(1.3);opacity:.4}
    100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}
}
@keyframes ddayPulse {
    0%,100%{transform:scale(1);filter:brightness(1)}
    50%{transform:scale(1.02);filter:brightness(1.1)}
}
@keyframes starFloat {
    0%,100%{transform:translateY(0px)}
    50%{transform:translateY(-15px)}
}
@keyframes snsPulse {
    0%{transform:translate(-50%,-50%) scale(0.8);opacity:.8}
    50%{transform:translate(-50%,-50%) scale(1.2);opacity:.4}
    100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}
}
@keyframes explode {
    0%{opacity:0;transform:translate(-50%,-50%) scale(0.1) rotate(0deg)}
    15%{opacity:1;transform:translate(-50%,-50%) scale(0.5) rotate(3deg)}
    35%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(-2deg)}
    60%{opacity:1;transform:translate(-50%,-50%) scale(1.5) rotate(1deg)}
    80%{opacity:.8;transform:translate(-50%,-50%) scale(1.2) rotate(0deg)}
    100%{opacity:.3;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
}
@keyframes sparkle {
    0%,100%{opacity:0;transform:scale(0)}
    50%{opacity:1;transform:scale(1)}
}
@keyframes particleExplode {
    0%{opacity:1;transform:translate(0,0) scale(1)}
    100%{opacity:0;transform:scale(0)}
}
@keyframes vs_img_2 {
    0%{opacity:.2}
    50%{opacity:.8}
    100%{opacity:.2}
}
@keyframes starParallax1 {
    0%{transform:translateY(0px) translateX(0px);opacity:.1}
    25%{transform:translateY(-40px) translateX(25px);opacity:.2}
    50%{transform:translateY(-25px) translateX(-15px);opacity:.1}
    75%{transform:translateY(-50px) translateX(20px);opacity:.2}
    100%{transform:translateY(0px) translateX(0px);opacity:.1}
}
@keyframes starParallax2 {
    0%{transform:translateY(0px) translateX(0px);opacity:.2}
    25%{transform:translateY(-35px) translateX(-20px);opacity:.1}
    50%{transform:translateY(-20px) translateX(30px);opacity:.2}
    75%{transform:translateY(-45px) translateX(-15px);opacity:.1}
    100%{transform:translateY(0px) translateX(0px);opacity:.2}
}
@keyframes sparkle_1 {
    0%{opacity:.1;filter:brightness(1)}
    25%{opacity:.3;filter:brightness(1.2)}
    50%{opacity:.6;filter:brightness(1.5)}
    75%{opacity:.3;filter:brightness(1.2)}
    100%{opacity:.1;filter:brightness(1)}
}
@keyframes sparkle_2 {
    0%{opacity:.05;filter:brightness(0.8)}
    20%{opacity:.2;filter:brightness(1.1)}
    40%{opacity:.4;filter:brightness(1.3)}
    60%{opacity:.2;filter:brightness(1.1)}
    80%{opacity:.1;filter:brightness(0.9)}
    100%{opacity:.05;filter:brightness(0.8)}
}
@keyframes hexagonFloat1 {
    0%,100%{transform:translateY(0px) rotate(0deg) scale(1)}
    50%{transform:translateY(-5px) rotate(60deg) scale(1.1)}
}
@keyframes hexagonFloat2 {
    0%,100%{transform:translateY(0px) rotate(0deg) scale(1)}
    50%{transform:translateY(-8px) rotate(-60deg) scale(1.2)}
}
@keyframes hexagonFloat3 {
    0%,100%{transform:translateY(0px) rotate(0deg) scale(1)}
    50%{transform:translateY(-10px) rotate(120deg) scale(1.3)}
}
@keyframes introGradientWave {
    0%{background-position:0 50%}
    25%{background-position:100% 50%}
    50%{background-position:100% 100%}
    75%{background-position:0 100%}
    100%{background-position:0 50%}
}
@keyframes twinkle {
    0%{opacity:.3}
    50%{opacity:.8}
    100%{opacity:.4}
}
@keyframes shootingStar {
    0%{transform:translateX(-200px) translateY(-200px) rotate(40deg);opacity:0}
    5%{opacity:1}
    95%{opacity:1}
    100%{transform:translateX(120vw) translateY(120vh) rotate(40deg);opacity:0}
}
@keyframes borderGlowPink {
    0%{background:linear-gradient(0deg,#ff96c8,#ff6b9d,#ff96c8,#ff6b9d) border-box;filter:brightness(1)}
    25%{background:linear-gradient(90deg,#ff6b9d,#ff96c8,#ff6b9d,#ff96c8) border-box;filter:brightness(1.3)}
    50%{background:linear-gradient(180deg,#ff96c8,#ff6b9d,#ff96c8,#ff6b9d) border-box;filter:brightness(1.5)}
    75%{background:linear-gradient(270deg,#ff6b9d,#ff96c8,#ff6b9d,#ff96c8) border-box;filter:brightness(1.3)}
    100%{background:linear-gradient(360deg,#ff96c8,#ff6b9d,#ff96c8,#ff6b9d) border-box;filter:brightness(1)}
}
@keyframes borderGlowGreen {
    0%{background:linear-gradient(0deg,#96ff96,#6bff6b,#96ff96,#6bff6b) border-box;filter:brightness(1)}
    25%{background:linear-gradient(90deg,#6bff6b,#96ff96,#6bff6b,#96ff96) border-box;filter:brightness(1.3)}
    50%{background:linear-gradient(180deg,#96ff96,#6bff6b,#96ff96,#6bff6b) border-box;filter:brightness(1.5)}
    75%{background:linear-gradient(270deg,#6bff6b,#96ff96,#6bff6b,#96ff96) border-box;filter:brightness(1.3)}
    100%{background:linear-gradient(360deg,#96ff96,#6bff6b,#96ff96,#6bff6b) border-box;filter:brightness(1)}
}
@keyframes borderGlowYellow {
    0%{background:linear-gradient(0deg,#ffff96,#ffff6b,#ffff96,#ffff6b) border-box;filter:brightness(1)}
    25%{background:linear-gradient(90deg,#ffff6b,#ffff96,#ffff6b,#ffff96) border-box;filter:brightness(1.3)}
    50%{background:linear-gradient(180deg,#ffff96,#ffff6b,#ffff96,#ffff6b) border-box;filter:brightness(1.5)}
    75%{background:linear-gradient(270deg,#ffff6b,#ffff96,#ffff6b,#ffff96) border-box;filter:brightness(1.3)}
    100%{background:linear-gradient(360deg,#ffff96,#ffff6b,#ffff96,#ffff6b) border-box;filter:brightness(1)}
}
@keyframes borderGlowPurple {
    0%{background:linear-gradient(0deg,#c896ff,#9d6bff,#c896ff,#9d6bff) border-box;filter:brightness(1)}
    25%{background:linear-gradient(90deg,#9d6bff,#c896ff,#9d6bff,#c896ff) border-box;filter:brightness(1.3)}
    50%{background:linear-gradient(180deg,#c896ff,#9d6bff,#c896ff,#9d6bff) border-box;filter:brightness(1.5)}
    75%{background:linear-gradient(270deg,#9d6bff,#c896ff,#9d6bff,#c896ff) border-box;filter:brightness(1.3)}
    100%{background:linear-gradient(360deg,#c896ff,#9d6bff,#c896ff,#9d6bff) border-box;filter:brightness(1)}
}
@keyframes mapRevealUltraSmooth {
    0%{mask:linear-gradient(to right,black 0%,transparent 0%);-webkit-mask:linear-gradient(to right,black 0%,transparent 0%)}
    1%{mask:linear-gradient(to right,black 0%,transparent 1%);-webkit-mask:linear-gradient(to right,black 0%,transparent 1%)}
    2%{mask:linear-gradient(to right,black 0%,transparent 2.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 2.5%)}
    3%{mask:linear-gradient(to right,black 0%,transparent 4%);-webkit-mask:linear-gradient(to right,black 0%,transparent 4%)}
    4%{mask:linear-gradient(to right,black 0%,transparent 5.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 5.5%)}
    5%{mask:linear-gradient(to right,black 0%,transparent 7%);-webkit-mask:linear-gradient(to right,black 0%,transparent 7%)}
    6%{mask:linear-gradient(to right,black 0%,transparent 8.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 8.5%)}
    7%{mask:linear-gradient(to right,black 0%,transparent 10%);-webkit-mask:linear-gradient(to right,black 0%,transparent 10%)}
    8%{mask:linear-gradient(to right,black 0%,transparent 11.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 11.5%)}
    9%{mask:linear-gradient(to right,black 0%,transparent 13%);-webkit-mask:linear-gradient(to right,black 0%,transparent 13%)}
    10%{mask:linear-gradient(to right,black 0%,transparent 14.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 14.5%)}
    12%{mask:linear-gradient(to right,black 0%,transparent 17%);-webkit-mask:linear-gradient(to right,black 0%,transparent 17%)}
    14%{mask:linear-gradient(to right,black 0%,transparent 19.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 19.5%)}
    16%{mask:linear-gradient(to right,black 0%,transparent 22%);-webkit-mask:linear-gradient(to right,black 0%,transparent 22%)}
    18%{mask:linear-gradient(to right,black 0%,transparent 24.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 24.5%)}
    20%{mask:linear-gradient(to right,black 0%,transparent 27%);-webkit-mask:linear-gradient(to right,black 0%,transparent 27%)}
    22%{mask:linear-gradient(to right,black 0%,transparent 29.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 29.5%)}
    24%{mask:linear-gradient(to right,black 0%,transparent 32%);-webkit-mask:linear-gradient(to right,black 0%,transparent 32%)}
    26%{mask:linear-gradient(to right,black 0%,transparent 34.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 34.5%)}
    28%{mask:linear-gradient(to right,black 0%,transparent 37%);-webkit-mask:linear-gradient(to right,black 0%,transparent 37%)}
    30%{mask:linear-gradient(to right,black 0%,transparent 39.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 39.5%)}
    32%{mask:linear-gradient(to right,black 0%,transparent 42%);-webkit-mask:linear-gradient(to right,black 0%,transparent 42%)}
    34%{mask:linear-gradient(to right,black 0%,transparent 44.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 44.5%)}
    36%{mask:linear-gradient(to right,black 0%,transparent 47%);-webkit-mask:linear-gradient(to right,black 0%,transparent 47%)}
    38%{mask:linear-gradient(to right,black 0%,transparent 49.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 49.5%)}
    40%{mask:linear-gradient(to right,black 0%,transparent 52%);-webkit-mask:linear-gradient(to right,black 0%,transparent 52%)}
    42%{mask:linear-gradient(to right,black 0%,transparent 54.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 54.5%)}
    44%{mask:linear-gradient(to right,black 0%,transparent 57%);-webkit-mask:linear-gradient(to right,black 0%,transparent 57%)}
    46%{mask:linear-gradient(to right,black 0%,transparent 59.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 59.5%)}
    48%{mask:linear-gradient(to right,black 0%,transparent 62%);-webkit-mask:linear-gradient(to right,black 0%,transparent 62%)}
    50%{mask:linear-gradient(to right,black 0%,transparent 64.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 64.5%)}
    52%{mask:linear-gradient(to right,black 0%,transparent 67%);-webkit-mask:linear-gradient(to right,black 0%,transparent 67%)}
    54%{mask:linear-gradient(to right,black 0%,transparent 69.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 69.5%)}
    56%{mask:linear-gradient(to right,black 0%,transparent 72%);-webkit-mask:linear-gradient(to right,black 0%,transparent 72%)}
    58%{mask:linear-gradient(to right,black 0%,transparent 74.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 74.5%)}
    60%{mask:linear-gradient(to right,black 0%,transparent 77%);-webkit-mask:linear-gradient(to right,black 0%,transparent 77%)}
    62%{mask:linear-gradient(to right,black 0%,transparent 79.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 79.5%)}
    64%{mask:linear-gradient(to right,black 0%,transparent 82%);-webkit-mask:linear-gradient(to right,black 0%,transparent 82%)}
    66%{mask:linear-gradient(to right,black 0%,transparent 84.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 84.5%)}
    68%{mask:linear-gradient(to right,black 0%,transparent 87%);-webkit-mask:linear-gradient(to right,black 0%,transparent 87%)}
    70%{mask:linear-gradient(to right,black 0%,transparent 89.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 89.5%)}
    72%{mask:linear-gradient(to right,black 0%,transparent 92%);-webkit-mask:linear-gradient(to right,black 0%,transparent 92%)}
    74%{mask:linear-gradient(to right,black 0%,transparent 94.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 94.5%)}
    76%{mask:linear-gradient(to right,black 0%,transparent 97%);-webkit-mask:linear-gradient(to right,black 0%,transparent 97%)}
    78%{mask:linear-gradient(to right,black 0%,transparent 98.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 98.5%)}
    80%{mask:linear-gradient(to right,black 0%,transparent 99%);-webkit-mask:linear-gradient(to right,black 0%,transparent 99%)}
    85%{mask:linear-gradient(to right,black 0%,transparent 99.5%);-webkit-mask:linear-gradient(to right,black 0%,transparent 99.5%)}
    90%{mask:linear-gradient(to right,black 0%,transparent 99.8%);-webkit-mask:linear-gradient(to right,black 0%,transparent 99.8%)}
    95%{mask:linear-gradient(to right,black 0%,transparent 99.9%);-webkit-mask:linear-gradient(to right,black 0%,transparent 99.9%)}
    100%{mask:linear-gradient(to right,black 0%,transparent 100%);-webkit-mask:linear-gradient(to right,black 0%,transparent 100%)}
}
@keyframes rotateStar {
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}
@keyframes glow-purple {
    0%{box-shadow:0 0 40px 10px #a21caf66 0 0 80px 20px #805af033;filter:brightness(1) saturate(1.2)}
    100%{box-shadow:0 0 80px 30px #a21cafb3 0 0 120px 40px #805af066;filter:brightness(1.15) saturate(1.5)}
}
@keyframes glow-purple-text {
    0%{text-shadow:0 0 10px #a18fff,0 0 20px #7f5af0,0 0 30px #c084fc;filter:brightness(1) saturate(1.2)}
    100%{text-shadow:0 0 20px #a18fff,0 0 40px #7f5af0,0 0 60px #c084fc;filter:brightness(1.2) saturate(1.5)}
}
@keyframes shootingStar2 {
    0%{transform:translateX(-200px) translateY(-200px) rotate(40deg);opacity:0}
    5%{opacity:1}
    95%{opacity:1}
    100%{transform:translateX(120vw) translateY(120vh) rotate(40deg);opacity:0}
}
@keyframes expandWidth {
    0%{width:0}
    100%{width:100%}
}
@keyframes fadeInAndFlow {
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes flowText {
    0%{transform:translateX(100vw)}
    100%{transform:translateX(-100%)}
}

/* ── 앱 전용 보정 ─────────────────────────────────────────── */
/* 앱 전역의 .swiper-slide:not(.swiper-slide-active){opacity:0} 무력화 */
#subCont .swiper-slide:not(.swiper-slide-active) { opacity: 1; }

/* 원본은 GSAP이 인라인 스타일로 진입 애니메이션을 처리한다.
   앱에는 그 스크립트가 없어 opacity:0 상태로 굳어버리므로 여기서 되돌린다.

   [중요] 기본값을 '보이는 상태'로 둔다.
   JS가 죽거나 IntersectionObserver가 안 돌아도(구형 WebView 등)
   콘텐츠가 통째로 사라지지 않게 하기 위함. 애니메이션 시작 상태는
   JS가 #subCont 에 .reveal-ready 를 붙였을 때만 적용된다. */
#subCont .prg_list .item,
#subCont.sub1_1 .sec_1 .tbox,
#subCont.sub1_1 .sec_1 .imgbox {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#subCont.reveal-ready .prg_list .item:not(.reveal-in),
#subCont.reveal-ready .sec_1 .tbox:not(.reveal-in),
#subCont.reveal-ready .sec_1 .imgbox:not(.reveal-in) {
  opacity: 0;
  transform: translateY(50px);
}


/* 상단 sec_1 의 .imgbox 는 내용이 비어 있는데 margin:50px auto 로
   위아래 100px 의 빈 공간만 만들고 있어 숨김 처리 */
#subCont .sec_1 .imgbox { display: none; }

/* 원본의 #subCont{padding-top:200px;padding-bottom:200px} 이 이식되지 않아
   앱 서브 헤더에 본문이 붙어 있었음. 데스크톱 값(200px)은 모바일에 과해 축소.
   .sec_1 아래 여백은 위에서 숨긴 .imgbox(margin:50px auto)가 만들던 간격을 대체. */
/* 서브 헤더 고정.
   program.css 는 프로그램 3개 페이지에서만 로드되므로 다른 페이지엔 영향 없음.
   고정되면 부모 .sub_container.inner 의 좌우 패딩을 못 받으므로 헤더가 직접 갖는다. */
.sub_container > header.sub_hd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  z-index: 100;
  overflow: visible;
  margin-top: calc(-1 * var(--safe-top));
  padding-top: var(--safe-top);
  height: auto;
  min-height: 67px;
}
/* layouts.css 의 그라데이션은 .inner 를 요구하므로 여기서 자립적으로 다시 그린다 */
.sub_container > header.sub_hd::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: var(--hd-grad);
}

/* 헤더가 흐름에서 빠지므로 본문이 그 높이(67px)만큼 올라온다 -> 보정 + 상단 여백 */
#subCont { padding-top: 99px; }
#subCont .sec_1 { margin-bottom: 36px; }


/* 존 소개 항목 (구성 / 연출 / 메시지) — 라벨 폭 고정으로 값이 걸어내려 정렬되게 */
#subCont .prg_list .item .info .zone_spec .row {
  display: flex;
  gap: 10px;
}
#subCont .prg_list .item .info .zone_spec .row + .row {
  margin-top: 6px;
}
#subCont .prg_list .item .info .zone_spec .lb {
  flex: none;
  min-width: 46px;
  color: #b697ff;
  font-weight: 700;
}
#subCont .prg_list .item .info .zone_spec .vl {
  flex: 1;
}

/* ============================================================
   열린관광 (opentour) — 주요프로그램 카드 스타일 위에 얹는 추가분
   ============================================================ */
#subCont .sec_1 .tbox .txt_2 b {
  color: #ffe310;
  font-weight: 700;
}
#subCont .prg_list .item .info .ot_facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
#subCont .prg_list .item .info .ot_facilities li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 5px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
#subCont .prg_list .item .info .ot_facilities li img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
#subCont .prg_list .item .info .ot_more {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
#subCont .prg_list .item .info .ot_more em {
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}
#subCont .ot_source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 28px auto 8px;
  padding: 14px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}


/* 원본 데스크톱 CSS 의 장식 글로우가 left:-50%; width:200% 인데 .sec_1 에
   position 기준이 없어 화면 밖으로 크게 삐져나가 좌우 스크롤을 만들었음 */
#subCont.sub1_1 .sec_1 {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   교통안내 (traffic) — 표 중심
   ============================================================ */
#subCont .tf_maplinks {
  display: flex;
  gap: 8px;
  /* 상단 히어로를 걷어내 고정 헤더 바로 아래에 붙으므로 여백을 준다 */
  margin-top: 16px;
  margin-bottom: 22px;
}
#subCont .tf_map {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
#subCont .tf_map .tf_logo {
  flex: none;
}
/* 각 지도 서비스의 브랜드 컬러를 그대로 쓴다 */
#subCont .tf_map.is_kakao {
  background: #fee500;
  border-color: #fee500;
  color: #191919;
}
#subCont .tf_map.is_naver {
  background: #03c75a;
  border-color: #03c75a;
  color: #fff;
}
#subCont .tf_sec + .tf_sec {
  margin-top: 34px;
}
#subCont .tf_tit {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  word-break: keep-all;
}
#subCont .tf_hint {
  display: none; /* 가로 스크롤 없이 화면 폭에 맞춘다 */
}
#subCont .tf_scroll {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
#subCont .tf_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.86);
}
#subCont .tf_table th,
#subCont .tf_table td {
  padding: 7px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  line-height: 1.4;
  /* 긴 주소·노선명이 열을 밀어내지 않도록 줄바꿈 허용 */
  word-break: break-word;
  overflow-wrap: anywhere;
}
#subCont .tf_table th {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
#subCont .tf_table tr:last-child td {
  border-bottom: 0;
}
/* 주차번호 / 셔틀번호 뱃지 (노선별 고유색) */
#subCont .tf_table td.is_num {
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#subCont .tf_table .tf_num {
  display: inline-block;
  height: auto;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
}
#subCont .tf_table .tf_bus {
  width: 32px;
}
/* 주차번호는 원형이라 같은 폭이면 셔틀 뱃지보다 커 보인다 */
#subCont .tf_table .tf_ic {
  width: 24px;
}
/* 운행일(셔틀 운행일지 / 차 없는 거리 통제) 강조.
   원본의 #535582 는 이 앱의 보라 배경에 묻혀서 테마색으로 대체 */
#subCont .tf_table td.is_on {
  background: var(--purple);
  color: #fff;
  font-weight: 700;
}
/* 시내버스 번호 칩 */
#subCont .tf_table td.is_busno {
  padding: 8px 6px;
  text-align: left;
}
#subCont .tf_table .tf_busno {
  display: inline-block;
  margin: 2px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
#subCont .tf_table th:last-child,
#subCont .tf_table td:last-child {
  border-right: 0;
}

/* ---- 2026-09-29: 홈페이지 교통안내(/info/transport) 구조에 맞춘 추가 요소 ---- */
/* 지도 링크 3개: 카카오·네이버는 한 줄에 둘, 카카오T 셔틀 예약은 다음 줄 전체 폭 */
#subCont .tf_maplinks {
  flex-wrap: wrap;
}
#subCont .tf_map.is_shuttle {
  flex: 1 1 100%;
}
/* 교통종합안내도 (홈페이지 2026_traffic.webp) */
#subCont .tf_guide {
  margin-bottom: 26px;
}
#subCont .tf_guide_img {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #fff;
}
#subCont .tf_guide_img img {
  display: block;
  width: 100%;
  height: auto;
}
#subCont .tf_guide_link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #ffb3f5;
}
/* 표 위 요약 (운영일·운행시간·통제 일자·시내버스 안내) */
#subCont .tf_notes {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#subCont .tf_note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.55;
}
#subCont .tf_note + .tf_note {
  margin-top: 6px;
}
#subCont .tf_note dt {
  flex: none;
  min-width: 52px;
  font-weight: 700;
  color: #ffb3f5;
  white-space: nowrap;
}
#subCont .tf_note dd {
  flex: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  word-break: keep-all;
}
/* 그 외 임시주차장 번호(P18~P25) 글자 뱃지 */
#subCont .tf_table .tf_pbadge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
/* 표 본문의 그룹 머리글(진입 방면·구분·통제 구간)은 줄바꿈 허용 */
#subCont .tf_table tbody th {
  white-space: normal;
  word-break: keep-all;
  font-weight: 600;
}
/* 차량 통제 구간 1~3: 왼쪽 색 띠로 구분 */
#subCont .tf_table th.is_zone {
  text-align: left;
  padding-left: 9px;
}
#subCont .tf_table th.is_zone.z1 { box-shadow: inset 3px 0 0 #ff9f43; }
#subCont .tf_table th.is_zone.z2 { box-shadow: inset 3px 0 0 #4fc3f7; }
#subCont .tf_table th.is_zone.z3 { box-shadow: inset 3px 0 0 #2fbf71; }
/* 표 아래 출처 */
#subCont .tf_source {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

/* ============================================================
   숙박정보 (stay) — 분류 탭 + 목록
   ============================================================ */
/* 분류 탭은 가로 스크롤 (세로 스크롤은 부모에게 넘긴다) */
#subCont .tab_area_scroll {
  width: 100%;
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#subCont .tab_area_scroll::-webkit-scrollbar {
  display: none;
}
#subCont .tab_area {
  display: flex;
  gap: 8px;
  /* 상단 히어로를 걷어낸 페이지에서 고정 헤더에 붙지 않도록 */
  margin-top: 16px;
  /* .on 글로우가 가로 스크롤 컨테이너에 잘리지 않도록 */
  padding: 4px 0 6px;
  margin-bottom: 14px;
  /* 탭 갯수만큼 가로를 균등 분할 (3개면 1/3씩) */
  width: 100%;
}
/* 흰 칩(비활성)이 네이비 칩(활성)보다 도드라져 선택 상태가 안 읽혔다.
   메인 프로그램 탭과 같은 규칙 — 비활성은 반투명, 활성은 퍼플 채움 */
#subCont .tab_area > button {
  /* flex:1 + min-width:0 → 갯수와 무관하게 100% 를 똑같이 나눠 갖는다 */
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50px;
  /* inline-flex + align-items:center 라 높이는 height 로 직접 준다.
     line-height 로 높이를 만들면 .tb_num 같은 자식 폰트에 따라 흔들린다. */
  height: 52px;
  line-height: 1.2;
  padding: 0 12px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
/* 이름이 길면 칩을 밀지 말고 말줄임 */
#subCont .tab_area > button .tb_name {
  overflow: hidden;
  text-overflow: ellipsis;
}
#subCont .tab_area > button.on {
  color: #fff;
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 2px 10px rgba(233, 62, 216, 0.45);
}
/* 갯수는 이름보다 한 단계 약하게 — 라벨이 '맛집 12' 로 붙어 읽히던 문제 */
#subCont .tab_area > button .tb_num {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}
#subCont .tab_area > button.on .tb_num {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
}
#subCont .stay_item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  align-items: flex-start;
}
#subCont .stay_item + .stay_item {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
#subCont .stay_item .st_img {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
#subCont .stay_item .st_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#subCont .stay_item .st_body {
  flex: 1;
  min-width: 0;
}
#subCont .stay_item .st_body h3 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  word-break: keep-all;
}
#subCont .stay_item .st_desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#subCont .stay_item .st_addr {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  word-break: keep-all;
}
#subCont .stay_item .st_tel {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
#subCont .tab_empty {
  display: block;
  padding: 30px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   앱 서브페이지 공통 (traffic / stay / opentour)
   #subCont .inner 는 원본 사이트 레이아웃 값(width:calc(100% - 10px),
   padding !important 등)이 얽혀 있어 쓰지 않는다. 자체 래퍼를 쓴다.
   ============================================================ */
#subCont .pg_inner {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* 본문은 고정된 상단바 높이만큼 내린다 (고정 자체는 layouts.css 에서 처리) */
#subCont {
  padding-top: 67px;
}

/* 음식점정보 (food) — 사진 없이 텍스트 중심 */
#subCont .food_item {
  padding: 14px 0;
}
#subCont .food_item .st_body h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
#subCont .food_item .fd_price {
  font-size: 12px;
  font-weight: 700;
  color: #ffe310;
}
#subCont .food_item .fd_menu {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  word-break: keep-all;
}

/* ============================================================
   2026 :: 프로그램 카드 톤 통일 (/2026/program, /2026/program/festival)
   메인 탭 칩과 같은 밝은 반투명 표면 + 퍼플 포인트로 맞춘다.
   원본 이식 CSS 의 nth-child 무지개 뱃지를 여기서 덮어쓴다.
   ============================================================ */
#subCont .prg_list .item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
#subCont .prg_list .item:hover {
  border-color: rgba(233, 62, 216, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
#subCont .prg_list .item .img .badge,
#subCont .prg_list .item .tbox .tit .badge,
#subCont .prg_list .item .tbox .tit .badge-1,
#subCont .prg_list .item .tbox .tit > span {
  background: linear-gradient(135deg, #8b5cf6, var(--purple));
  box-shadow: 0 4px 12px rgba(233, 62, 216, 0.28);
  color: #fff;
}
/* 일정 뱃지(.badge-2)는 포인트가 아니라 정보 — 탭 칩과 같은 반투명 톤 */
#subCont .prg_list .item .tbox .badge-2 {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
#subCont .prg_list .item .info .date {
  color: #f6a9ef;
}

/* ============================================================
   2026 :: 추천코스(/2026/program/course) 코스 화살표
   원본은 li::after 를 right:-30px 로 띄워서, 줄 끝 항목의 화살표가
   ul 패딩(20px)을 넘어 박스 밖으로 삐져나왔다.
   flex-wrap 은 줄바꿈 지점을 알 수 없으므로 grid 로 열을 고정하고
   각 줄 마지막 칸(nth-child)의 화살표를 지운다.
   ============================================================ */
#subCont.sub-2-5 .item ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 세로 간격 / 화살표(30px)가 들어갈 가로 간격 */
  gap: 16px 46px;
}
#subCont.sub-2-5 .item ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: keep-all;
}
/* 줄 끝 칸에는 다음으로 이어지는 화살표가 없다 */
#subCont.sub-2-5 .item ul li:nth-child(3n)::after {
  display: none;
}
@media (max-width: 768px), (min-width: 600px) {
  #subCont.sub-2-5 .item ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 34px;
  }
  #subCont.sub-2-5 .item ul li::after {
    right: -28px;
  }
  #subCont.sub-2-5 .item ul li:nth-child(3n)::after {
    display: block;
  }
  #subCont.sub-2-5 .item ul li:nth-child(2n)::after {
    display: none;
  }
  #subCont.sub-2-5 .item ul li:last-child::after {
    display: none;
  }
}

/* 카드 안 행동 유도 버튼 (예매·예약 등 외부 링크) */
#subCont .prg_list .item .prg_cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 0 18px;
  line-height: 40px;
  border-radius: 50px;
  background: var(--purple);
  box-shadow: 0 4px 14px rgba(233, 62, 216, 0.35);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
#subCont .prg_list .item .prg_cta svg {
  flex: none;
}

/* 교통안내: 전화번호 링크, 본문 머리글 칸 줄바꿈 (2026-09-29 리플렛 반영) */
#subCont .tf_table a.tf_tel {
  color: #ffb3f5;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
#subCont .tf_table tbody th {
  text-align: left;
}
#subCont .tf_table tbody th {
  min-width: 78px;
}

/* ============================================================
   교통안내도 크게보기 레이어 (핀치 줌, Swiper Zoom) — 2026-09-29
   #subCont 밖(body 직속)에 있어서 접두어 없이 쓴다. PC 에서도 화면 전체를 덮는다
   ============================================================ */
html.tf_zoom_lock,
html.tf_zoom_lock body {
  overflow: hidden;
}
.tf_zoom {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5000; /* 하단 탭바(300)·헤더(200) 위 */
  background: rgba(8, 6, 20, 0.96);
}
.tf_zoom.is_open {
  display: block;
}
.tf_zoom .swiper,
.tf_zoom .swiper-wrapper,
.tf_zoom .swiper-slide {
  width: 100%;
  height: 100%;
}
/* 전역 .swiper-slide:not(.swiper-slide-active){opacity:0} 대비 */
.tf_zoom .swiper-slide {
  opacity: 1 !important;
}
.tf_zoom .swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.tf_zoom .swiper-zoom-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}
.tf_zoom_close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tf_zoom_bar {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  white-space: nowrap;
}
.tf_zoom_bar span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf_zoom_bar button {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

/* 교통안내 상단 링크 3개(카카오지도·네이버지도·카카오T 셔틀)를 한 줄에 같은 크기로 (2026-09-30).
   폭이 좁아 아이콘을 글자 위에 두고, 글자는 두 줄까지 가운데 정렬 */
#subCont .tf_maplinks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#subCont .tf_map,
#subCont .tf_map.is_shuttle {
  flex: none;
  flex-direction: column;
  gap: 5px;
  min-height: 64px;
  padding: 10px 6px;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
}
/* 일본어·중국어처럼 띄어쓰기 없는 문구는 keep-all 이면 안 끊겨 버튼 가장자리에 닿는다 -> 넘칠 때만 끊는다 */
#subCont .tf_map span {
  overflow-wrap: anywhere;
  padding: 0 2px;
}