/* common */
* { box-sizing: border-box } 
.event-wrap { overflow: hidden; width: 100%; } 
.inner_w { width: 2560px; position: relative; text-align: center; left: 50%; transform: translateX(-50%); margin: 0; } 
.inner { width: 1000px; margin: 0 auto; } 
.p_r { position: relative; } 
.p_c { position: absolute; left:50%; transform: translateX(-50%); } 

/* evt_main */
.evt_main { height: 840px; background: #000; margin-top: -110px;}
.evt_main .video_area {display: none; position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;}
.evt_main .video_area.active {display: block;}
.evt_main .video_area video {display: block; border: 0; outline: none; box-shadow: none; background: transparent; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;}
.evt_main .video_area video:focus {outline: none;}
.evt_main .main_cont { width: 1000px; position: absolute; left: 50%; top: 180px; transform: translateX(-50%); z-index: 2;}
.evt_main .main_cont a{ position: absolute;left: 8.5%;width: 80%;display: block;bottom: 15%;}
.evt_main .main_cont img{width: 100%;}

.evt_btn{position: absolute; height: 10%; width: 90%; max-width: 690px; font-size: 0; background: none !important;}
.evt_btn01{ left: 30.5%; top: 37%; width: 19.3%; height: 25%;}
.evt_btn02{ left: 50.3%; top: 37%; width: 19.3%; height: 25%;}
.evt_btn03{ left: 30.5%; top: 65%; width: 19.3%; height: 25%;}
.evt_btn04 {left: 50.3%; top: 65%; width: 19.3%; height: 25%;}

/* video_pop */
.video_pop_bg {display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; z-index: 11;}
.video_pop_wrap {display: none; max-width: 950px; width: 50%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12;}
.video_pop_wrap a {display: block; width: 35px; height: 35px; position: absolute; right: 0; top: -35px;}
.video_pop_wrap a::before {content: ''; display: block; width: 80%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.video_pop_wrap a::after {content: ''; display: block; width: 80%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg);}
.video_pop_wrap video {width: 100%;}
.video_pop_bg.active {display: block;}
.video_pop_wrap.active {display: block;}

/* cont03 : teacher slider Comp is 1024px wide, real layout is 2560px  ->  comp value x 2.5
   Tune the variables below to move/resize the whole block */
.cont03 .teacher_slide_wrap {
    --active-w: 471px;      /* source image size 471 x 598 */
    --active-h: 598px;
    --off-scale: 0.75;      /* inactive image scale */
    --gap: 30px;            /* space between images */
    --anchor-x: 1370px;     /* left edge of the active image, relative to .inner_w */
    --row-top: 540px;       /* top of the image row */
    --dur: 0.6s;            /* slide transition duration */
    /* hover area for autoplay pause = the whole image row */
    position: absolute; left: var(--anchor-x); top: var(--row-top); right: 0; height: var(--active-h);
}

/* image track (items are positioned by js, left only) */
.cont03 .teacher_track { position: absolute; left: 0; top: 0; width: var(--active-w); height: 100%; }
.cont03 .teacher_item { position: absolute; top: 50%; width: calc(var(--active-w) * var(--off-scale)); height: calc(var(--active-h) * var(--off-scale)); margin-top: calc(var(--active-h) * var(--off-scale) / -2); opacity: 0.3; transition: left var(--dur) ease, width var(--dur) ease, height var(--dur) ease, margin-top var(--dur) ease, opacity var(--dur) ease; }
.cont03 .teacher_item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cont03 .teacher_item.active { width: var(--active-w); height: var(--active-h); margin-top: calc(var(--active-h) / -2); opacity: 1; z-index: 2; }

/* next button : pill background + thin line arrow */
.cont03 .teacher_next { position: absolute; left: calc(var(--active-w) - 37px); top: 50%; transform: translateY(-50%); z-index: 5; width: 74px; height: 42px; padding: 0; border: 0; border-radius: 999px; background: #5a5a5a; font-size: 0; color: transparent; cursor: pointer; transition: background 0.25s; }
.cont03 .teacher_next:hover { background: #6e6e6e; }
.cont03 .teacher_next::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 1px; background: #ededed; }
.cont03 .teacher_next::after { content: ''; position: absolute; left: calc(50% + 17px); top: 50%; width: 9px; height: 9px; border-top: 1px solid #ededed; border-right: 1px solid #ededed; transform: translate(-100%, -50%) rotate(45deg); }

/* teacher name + career (left of the active image) */
.cont03 .teacher_info { position: absolute; left: -608px; bottom: 37px; }
.cont03 .teacher_text { display: none; align-items: flex-end; gap: 40px; }
.cont03 .teacher_text.active { display: flex; }
.cont03 .teacher_info .t_name { font-size: 48px; font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.cont03 .teacher_info .t_career { padding-bottom: 6px; text-align: left; }
.cont03 .teacher_info .t_career li { position: relative; padding-left: 10px; font-size: 18px; line-height: 1.6; color: #b9b9b9; white-space: nowrap; }
.cont03 .teacher_info .t_career li::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; border-radius: 50%; background: #b9b9b9; }

/* divider line under the row */
.cont03 .teacher_line { position: absolute; left: -620px; right: 0; top: 100%; height: 1px; background: linear-gradient(to right, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%); }

.cont03 .apply_btn{bottom:11%}

/* cont04 : job curriculum vertical scroll area (based on cont04.jpg height 1133px) */
.cont04 .scroll_wrap {
    --card-h: 235px;        /* height of one card */
    --card-gap: 15px;       /* gap between cards (auto scroll step = 235 + 15 = 250) */
    --view-h: 750px;        /* visible scroll area height */
    position: absolute; left: 1183px; top: 142px; width: 700px; height: var(--view-h);
    padding-right: 45px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #e9e9e9 rgba(255, 255, 255, 0.08);
}
.cont04 .scroll_wrap ul { display: flex; flex-direction: column; gap: var(--card-gap); }
.cont04 .scroll_wrap li { flex: 0 0 auto; height: var(--card-h); }
.cont04 .scroll_wrap li img { display: block; width: 100%; height: 100%; }

/* custom scrollbar (chrome/edge/safari ; firefox uses scrollbar-color above) */
.cont04 .scroll_wrap::-webkit-scrollbar { width: 10px; }
.cont04 .scroll_wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 5px; }
.cont04 .scroll_wrap::-webkit-scrollbar-thumb { background: #e9e9e9; border-radius: 5px; }
.cont04 .scroll_wrap::-webkit-scrollbar-thumb:hover { background: #fff; }

/* proposal button : position and size only (circle graphic is baked into cont04.jpg) */
.evt_btn05 { left: 30%; bottom: 3%; width: 13%; height: 28%; cursor: pointer;}

/* cont05 : hidden by default, slides down when evt_btn05 adds .active
   max-height is set by js from scrollHeight because the image height is unknown up front */
.cont05 { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s ease, opacity 0.4s ease; }
.cont05.active { opacity: 1; }

/* cont05 : proposal preview slider (based on cont05.jpg height 1785px)
   one slide = one image, 2 slides in an infinite loop */
.cont05 .slide_wrap { position: absolute; left: 770px; top: 285px; width: 1012px; height: 290px; }
.cont05 .slide_view { overflow: hidden; width: 100%; height: 100%; }
.cont05 .slide_view ul { display: flex; width: 100%; height: 100%; }
.cont05 .slide_view li { flex: 0 0 100%; width: 100%; height: 100%; }
.cont05 .slide_view li img { display: block; width: 100%; height: 100%; }

/* prev / next controls (outside the slide area, CSS arrows) */
.cont05 .slide_btn { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: none; font-size: 0; color: transparent; cursor: pointer; }
.cont05 .slide_btn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-top: 2px solid #919191; border-right: 2px solid #919191; }
.cont05 .slide_prev { left: -72px; }
.cont05 .slide_next { right: -72px; }
.cont05 .slide_prev::before { transform: translate(-50%, -50%) rotate(-135deg); }
.cont05 .slide_next::before { transform: translate(-50%, -50%) rotate(45deg); }

/* apply form : two-column rows hold 2 form_col, single rows hold 1 */
.cont05 .apply_form { position: absolute; left: 770px; top: 737px; width: 1012px; text-align: left; }
.cont05 .form_title { margin-bottom: 23px; font-size: 36px; font-weight: 800; color: #222; letter-spacing: -0.02em; }
.cont05 .form_row { display: flex; gap: 40px; margin-bottom: 10px; }
.cont05 .form_col { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.cont05 .form_col > label { flex: 0 0 92px; font-size: 22px; font-weight: 500; color: #333; }

/* input / select common : border #66A8FF / placeholder #9D9D9D / typed value #333 */
.cont05 .apply_form input[type="text"],
.cont05 .apply_form input[type="tel"],
.cont05 .apply_form input[type="email"],
.cont05 .apply_form select { width: 100%; height: 70px; padding: 0 24px; border: 1px solid #66A8FF; border-radius: 8px; background: #fff; font-size: 22px; color: #333; font-family: inherit; }
.cont05 .apply_form input::placeholder { color: #9D9D9D; }
.cont05 .apply_form input:focus,
.cont05 .apply_form select:focus { outline: none; border-color: #3d8bff; }

/* select arrow #919191 drawn with CSS
   native arrow is removed and drawn on select_box::after (select cannot hold pseudo elements)
   grey before choosing, switched to #333 by the .selected class added from js */
.cont05 .select_box { position: relative; flex: 1 1 0; min-width: 0; }
.cont05 .select_box select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 60px; color: #9D9D9D; cursor: pointer; }
.cont05 .select_box select.selected { color: #333; }
.cont05 .select_box::after { content: ''; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid #919191; border-bottom: 2px solid #919191; transform: rotate(45deg); pointer-events: none; }

/* notice box : height 200 / background #D6DDE3 / scrollbar #9FACB8
   p + p gap is 1.6em (one line height) so the blank lines of the source text are kept */
.cont05 .notice_box { height: 200px; margin-top: 35px; padding: 26px 30px; overflow-y: auto; border-radius: 8px; background: #D6DDE3; scrollbar-width: thin; scrollbar-color: #9FACB8 transparent; }
.cont05 .notice_box::-webkit-scrollbar { width: 8px; }
.cont05 .notice_box::-webkit-scrollbar-track { background: transparent; }
.cont05 .notice_box::-webkit-scrollbar-thumb { background: #9FACB8; border-radius: 4px; }
.cont05 .notice_box p { font-size: 18px; line-height: 1.6; color: #333; }
.cont05 .notice_box p + p { margin-top: 0.1em; }

/* agreement checkboxes (native box hidden, check mark drawn with CSS) */
.cont05 .agree_area { margin-top: 42px; }
.cont05 .agree_all { display: flex; align-items: center; }
.cont05 .agree_item { display: flex; align-items: center; margin-top: 14px; padding-left: 8px; }
.cont05 .agree_area input[type="checkbox"] { flex: 0 0 auto; width: 28px; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; border: 1px solid #66A8FF; border-radius: 4px; background: #fff; cursor: pointer; position: relative; }
.cont05 .agree_area .agree_item input[type="checkbox"] { width: 24px; height: 24px; }
.cont05 .agree_area input[type="checkbox"]:checked { border-color: #66A8FF; background: #66A8FF; }
.cont05 .agree_area input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 50%; top: 47%; width: 40%; height: 20%; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -50%) rotate(-45deg); }
.cont05 .agree_area label { margin-left: 14px; font-size: 22px; color: #333; cursor: pointer; }
.cont05 .agree_area .agree_item label { font-size: 19px; color: #666; }

/* bottom buttons : position and size only (graphics are baked into cont05.jpg) */
.evt_btn06 { left: 775px; top: 1560px; width: 500px; height: 7%; cursor: pointer;}
.evt_btn07 {left: 1280px; top: 1560px; width: 500px; height: 7%; cursor: pointer;}

/* cont06 : job based AI result slider (based on cont06.jpg height 1158px)
   one slide = one image (title + Before + After all included)
   the job name row on top doubles as the pagination */
.cont06 .job_slide_wrap {
    --slide-w: 1030px;      /* width of one slide */
    --slide-h: 655px;       /* height of one slide */
    --gif-w: 540px;         /* the "540x300 video" spot */
    --gif-h: 300px;
    --gif-x: 450px;         /* gif position from the slide top-left */
    --gif-y: 143px;
    position: absolute; left: 770px; top: 358px; width: var(--slide-w);
}

/* job name tabs = pagination */
.cont06 .job_tab { display: flex; justify-content: center; align-items: center; gap: 46px; }
.cont06 .job_tab button { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: 22px; font-weight: 600; color: #fff; white-space: nowrap; cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.cont06 .job_tab button.active { color: #31A9FF; border-bottom-color: #31A9FF; }

/* prev / next controls (both sides of the tab row, CSS arrows) */
.cont06 .job_btn { position: absolute; top: 0; z-index: 3; width: 40px; height: 40px; margin-top: -8px; padding: 0; border: 0; background: none; font-size: 0; color: transparent; cursor: pointer; }
.cont06 .job_btn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.cont06 .job_prev { left: -20px; }
.cont06 .job_next { right: -20px; }
.cont06 .job_prev::before { transform: translate(-50%, -50%) rotate(-135deg); }
.cont06 .job_next::before { transform: translate(-50%, -50%) rotate(45deg); }

/* slide area */
.cont06 .job_view { overflow: hidden; width: var(--slide-w); height: var(--slide-h); margin-top: 107px; }
.cont06 .job_list { display: flex; height: 100%; }
.cont06 .job_list li { position: relative; flex: 0 0 var(--slide-w); width: var(--slide-w); height: 100%; }
.cont06 .job_list li > img { display: block; width: 100%; height: 100%; }
.cont06 .job_list .job_gif { position: absolute; left: var(--gif-x); top: var(--gif-y); width: var(--gif-w); height: var(--gif-h); object-fit: cover; }

/* cont07 : 5 step learning process bars (based on cont07.jpg height 1245px)
   bars are bottom aligned, width fixed at 260, only height differs per step
   left / bottom values are meant to be tuned against the background image */
.cont07 .step_ani_wrap {
    --step-w: 260px;        /* width of one bar */
    --step-gap: 4px;        /* gap between bars */
    --ani-dur: 0.6s;        /* appear duration of one bar */
    --ani-step: 0.35s;      /* delay until the next bar (0.35 x 4 + 0.6 = 2s) */
    --ani-move: 40px;       /* distance it rises from below */
    position: absolute; left: 630px; bottom: 0;
}
.cont07 .step_list { display: flex; align-items: flex-end; gap: var(--step-gap); }
.cont07 .step_list li { flex: 0 0 var(--step-w); width: var(--step-w); opacity: 0; transform: translateY(var(--ani-move)); }
.cont07 .step_list li img { display: block; width: 100%; height: 100%; }

/* bar height per step */
.cont07 .step_list li:nth-child(1) { height: 466px; }
.cont07 .step_list li:nth-child(2) { height: 548px; }
.cont07 .step_list li:nth-child(3) { height: 625px; }
.cont07 .step_list li:nth-child(4) { height: 694px; }
.cont07 .step_list li:nth-child(5) { height: 779px; }

/* appear one by one on scroll (rise slightly + fade in) */
.cont07 .step_ani_wrap.on .step_list li { animation: step-rise var(--ani-dur) ease-out forwards; }
.cont07 .step_ani_wrap.on .step_list li:nth-child(1) { animation-delay: 0s; }
.cont07 .step_ani_wrap.on .step_list li:nth-child(2) { animation-delay: calc(var(--ani-step) * 1); }
.cont07 .step_ani_wrap.on .step_list li:nth-child(3) { animation-delay: calc(var(--ani-step) * 2); }
.cont07 .step_ani_wrap.on .step_list li:nth-child(4) { animation-delay: calc(var(--ani-step) * 3); }
.cont07 .step_ani_wrap.on .step_list li:nth-child(5) { animation-delay: calc(var(--ani-step) * 4); }

@keyframes step-rise {
    from { opacity: 0; transform: translateY(var(--ani-move)); }
    to   { opacity: 1; transform: translateY(0); }
}

/* deco : starts after the bars finish (2s), blinks on a 1.3s loop */
.cont07 .step_deco { position: absolute; left: -25%; top: 0; opacity: 0; pointer-events: none; }
.cont07 .step_ani_wrap.on .step_deco { animation: deco-blink 1.3s ease-in-out 2s infinite; }

@keyframes deco-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}

/* AI diagnosis button : position and size only (graphic is baked into cont07.jpg) */
.evt_btn09 { left: 770px; top: 475px; width: 355px; height: 95px; border-radius: 999px; cursor: pointer; z-index: 99;}

.cont11 .apply_btn{ position: absolute; bottom: 22%; left: 30.5%; width: 90%; max-width: 800px;}
.cont11 .apply_btn img{ width: 100%;}

/* cont01 : vertical slider, 3 slides, height 1222px each
   position:sticky cannot be used here because .event-wrap has overflow:hidden,
   which turns it into the scroll container and stops sticky from ever engaging.
   The pinned feel comes from js holding the wheel instead (see ui.js),
   and the wheel is released at the last slide so the page moves on to cont02. */
.cont01 {
    --design-w: 2560px;     /* design width of one slide */
    --design-h: 1222px;     /* design height of one slide */
    --view-h: 900px;        /* displayed height (fits a normal viewport) */
    --scale: 0.7365;        /* 900 / 1222 : keeps the image ratio (2560 -> 1885 wide) */
    --pager-right: 98px;    /* pagination distance from the right edge */
    --pg-gap: 28px;         /* gap between pagination markers */
    --dur: 0.7s;            /* vertical slide transition */
    position: relative; height: var(--view-h); background: #000; overflow: hidden;
}
.cont01 .inner_w { height: var(--view-h); overflow: hidden; }
/* the whole slide block is laid out at design size and scaled down as one piece,
   so the background image, step markers, dot and pagination all keep their relative spots.
   transform does not affect layout, so js keeps working with the design height. */
.cont01 .slide_wrap { position: relative; width: var(--design-w); height: var(--design-h); transform: scale(var(--scale)); transform-origin: top center; }

/* slide track : stacked li, moved by translateY in px from js
   (percentage translateY resolves against the track height, so px is used to stay exact) */
.cont01 .cont01_list { position: relative; width: 100%; transition: transform var(--dur) cubic-bezier(0.65, 0, 0.35, 1); }
.cont01 .cont01_list > li { position: relative; width: 100%; height: var(--design-h); }
.cont01 .cont01_list .slide_bg { display: block; width: 100%; height: 100%; }

/* slide 1 : 4 step markers pop in one by one (total 1.5s)
   0.3s stagger x 3 + 0.6s duration = 1.5s
   the overshoot easing gives the bouncy feel */
.cont01 .ani01 {
    /* CENTER x of each step label, in the 2560 design space.
       The label sits centered inside ani01_N.png, so centering the image on this
       value removes any dependence on the image width. Adjust these 4 numbers only. */
    --ani1-x: 726px;
    --ani2-x: 977px;
    --ani3-x: 1201px;
    --ani4-x: 1426px;
    --ani-bottom: 55px;
    --pop-dur: 0.6s;
    --pop-step: 0.3s;
}
/* translateX(-50%) centers the image on the value above.
   It is repeated inside the keyframes because an animation on transform
   would otherwise drop the centering while it runs. */
.cont01 .ani01 img { position: absolute; bottom: var(--ani-bottom); transform: translateX(-50%); opacity: 0; }
.cont01 .ani01 img:nth-child(1) { left: var(--ani1-x); }
.cont01 .ani01 img:nth-child(2) { left: var(--ani2-x); }
.cont01 .ani01 img:nth-child(3) { left: var(--ani3-x); }
.cont01 .ani01 img:nth-child(4) { left: var(--ani4-x); }
.cont01 .cont01_list > li.on .ani01 img { animation: pop-in var(--pop-dur) cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.cont01 .cont01_list > li.on .ani01 img:nth-child(1) { animation-delay: 0s; }
.cont01 .cont01_list > li.on .ani01 img:nth-child(2) { animation-delay: calc(var(--pop-step) * 1); }
.cont01 .cont01_list > li.on .ani01 img:nth-child(3) { animation-delay: calc(var(--pop-step) * 2); }
.cont01 .cont01_list > li.on .ani01 img:nth-child(4) { animation-delay: calc(var(--pop-step) * 3); }

@keyframes pop-in {
    from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.85); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* slide 2 : the dot at the end of the line blinks while the slide is active
   left / top are the CENTER of the dot in the 2560 design space (translate -50% -50%),
   so the values do not depend on the image size. Adjust these 2 numbers only.
   Only opacity is animated here, so the centering transform stays untouched. */
.cont01 .ani02_dot {
    --dot-x: 1792px;
    --dot-y: 642px;
    --dot-size: 100px;      /* the source png is bigger than the design spot, so pin the size */
    position: absolute; left: var(--dot-x); top: var(--dot-y);
    width: var(--dot-size); height: var(--dot-size);
    transform: translate(-50%, -50%); opacity: 0;
}
.cont01 .cont01_list > li.on .ani02_dot { animation: dot-blink 1.2s ease-in-out infinite; }

@keyframes dot-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* pagination : right center, keyword shows only on the active item */
.cont01 .cont01_pager { position: absolute; right: var(--pager-right); top: 50%; transform: translateY(-50%); z-index: 5; }
.cont01 .cont01_pager li + li { margin-top: var(--pg-gap); }
.cont01 .cont01_pager button { display: flex; align-items: center; justify-content: flex-end; gap: 20px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cont01 .cont01_pager .pg_txt { font-family: inherit; font-size: 18px; color: #fff; white-space: nowrap; opacity: 0; transition: opacity 0.3s; }
.cont01 .cont01_pager .pg_dot { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; background: none; transition: all 0.3s; }
.cont01 .cont01_pager li.active .pg_txt { opacity: 1; }
.cont01 .cont01_pager li.active .pg_dot { width: 10px; height: 50px; border: 0; border-radius: 5px; background: #fff; }

/* sticky top menu
   position:fixed is used instead of sticky : .event-wrap has overflow:hidden and
   .inner_w has a transform, either of which stops sticky / re-anchors fixed children.
   The markup therefore sits outside .event-wrap so the viewport stays its containing block.
   Hidden until evt_main is scrolled past, then slides down (js toggles .active). */
.sticky_menu {
    /* the bar is position:fixed, so it works in viewport px.
       The x2.5 design scale used for the sections must NOT be applied here. */
    --bar-h: 65px;                              /* bar height */
    --bar-top: 0px;                             /* raise this if the site header stays fixed */
    --bar-bg: rgba(10, 11, 12, 0.45);           /* #0A0B0C at 45% */
    --menu-gap: 40px;                           /* gap between menu items */
    --menu-size: 15px;                          /* menu font size */
    --menu-right: 60px;                         /* distance of the last item from the right edge */
    --menu-line: rgba(255, 255, 255, 0.5);      /* divider colour */
    --menu-line-h: 12px;                        /* divider height */
    position: fixed; left: 0; top: var(--bar-top); z-index: 10;
    width: 100%; height: var(--bar-h);
    background: var(--bar-bg);
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
}
.sticky_menu.active { transform: translateY(0); opacity: 1; visibility: visible; }
.sticky_menu .menu_inner { display: flex; justify-content: flex-end; align-items: center; gap: var(--menu-gap); width: 100%; height: 100%; padding-right: var(--menu-right); }
.sticky_menu a { position: relative; font-family: inherit; font-size: var(--menu-size); font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; }
.sticky_menu a:hover { opacity: 0.7; }
/* divider sits in the middle of the gap : half the gap to the left of every item but the first */
.sticky_menu a + a::before { content: ''; position: absolute; left: calc(var(--menu-gap) / -2); top: 50%; width: 1px; height: var(--menu-line-h); margin-top: calc(var(--menu-line-h) / -2); background: var(--menu-line); }

/* right side quick banner
   Same reason as the sticky menu : the markup sits outside .event-wrap.
   .event-wrap has overflow:hidden, which WOULD clip an absolutely positioned child,
   so keeping it outside also protects the default (non fixed) state.
   Viewport px are used here, the x2.5 section scale does not apply. */
.quick_banner {
    --qb-w: 210px;              /* banner width */
    --qb-right: 30px;           /* distance from the right edge */
    --qb-top: 700px;            /* start position while it still scrolls with the page */
    --qb-fixed-top: 100px;      /* top offset once it is fixed (bar height + margin) */
    position: absolute; right: var(--qb-right); top: var(--qb-top); z-index: 9;
    width: var(--qb-w);
}
/* js adds .fixed once evt_main is scrolled past, so the banner follows the screen */
.quick_banner.fixed { position: fixed; top: var(--qb-fixed-top); }
.quick_banner.hide { display: none; }
.quick_banner a { display: block; }
.quick_banner img { display: block; width: 100%; }

/* close button sits just above the banner, drawn with CSS */
.quick_close {position: absolute;  right: 12%;  top: 0;  width: 24px;  height: 24px;  padding: 0;  border: 0;  background: none;  font-size: 0;  color: transparent;  cursor: pointer;}
.quick_close::before, .quick_close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; background: #fff; }
.quick_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.quick_close::after { transform: translate(-50%, -50%) rotate(-45deg); }