/* ==========================================================================
   AI B2B mobile (2026-08-25)

   RESPONSIVE RULE
   Design width is 750px, so 1vw = 7.5px.
   Every size is written as clamp( value@320 , vw , value@750 ) :
     vw       = V / 7.5
     min@320  = V * 0.42667
     max@750  = V
   Comments are kept ASCII on purpose : this file kept getting re-saved in
   CP949 and the Korean comments were destroyed, so it stays ASCII only.

   HEIGHT RULE
   Section heights are NOT hard coded. Every background image is width:100%
   with auto height, so a section grows and shrinks with the viewport and
   with its own text. Slider viewports use aspect-ratio so they always match
   one slide exactly. Elements that sit at the end of a section are anchored
   with bottom so a taller text block above them cannot push them out.

   Design heights for reference (px @750) :
   evt_main 791 / cont01 1385 / cont02 1475 / cont03 294 / cont04 1370
   cont05 1375 / cont06 2313 / cont07 1850 / cont08 1891 / cont09 1340
   cont10 1190 / cont11 1215 / cont12 625
   ========================================================================== */

/* common */
* { box-sizing: border-box }
.event-wrap { max-width: 750px; min-width: 320px; width: 100%; margin: 0 auto; position: relative; background: #000; }
.event-wrap section { position: relative; }
.event-wrap section > img { display: block; width: 100%; }
.p_r { position: relative; }
.p_c { position: absolute; left: 50%; transform: translateX(-50%); }

/* every hotspot button : position and size only, graphics live in the jpg */
.evt_btn, .apply_btn { position: absolute; padding: 0; border: 0; background: none; font-size: 0; color: transparent; cursor: pointer; background: none !important;}

/* --------------------------------------------------------------------------
   sticky top menu (viewport px, the 750 design scale does not apply)
   -------------------------------------------------------------------------- */
.sticky_menu {
    --bar-h: 50px;
    --bar-bg: rgba(10, 11, 12, 0.45);
    --menu-gap: 26px;
    --menu-size: 13px;
    --menu-right: 20px;
    --menu-line: rgba(255, 255, 255, 0.5);
    --menu-line-h: 10px;
    position: fixed; left: 0; top: 0; z-index: 20;
    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; }
.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); }

/* --------------------------------------------------------------------------
   evt_main : bottom CTA hotspot
   -------------------------------------------------------------------------- */
.evt_main > a { display: block; position: absolute; left: 50%; width: 89%; bottom: clamp(25.6px, 8vw, 60px); height: clamp(56.5px, 17.67vw, 132.5px); transform: translateX(-50%);}

/* --------------------------------------------------------------------------
cont01 : vertical slider, 3 slides, one slide fills the section
   aspect-ratio keeps the viewport exactly one slide tall at any width
   -------------------------------------------------------------------------- */
.cont01 { overflow: hidden; background: #000; }
.cont01 .slide_wrap { position: relative; width: 100%; aspect-ratio: 750 / 1385; overflow: hidden; }
/* horizontal track : three slides sit side by side, each 100% wide.
   js moves by whole percentages so it never depends on image load timing. */
.cont01 .cont01_list { display: flex; flex-direction: row; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.cont01 .cont01_list > li { flex: 0 0 100%; width: 100%; height: 100%; }
.cont01 .cont01_list .slide_bg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   cont02 : 4 solution card hotspots over cont02.jpg
   -------------------------------------------------------------------------- */
.cont02 .evt_btn {
    --card-x: 6%;
    --card-w: 88%;
    left: var(--card-x); width: var(--card-w);
    height: clamp(88.9px, 27.87vw, 209px);
}
.cont02 .evt_btn01 {top: clamp(179.8px, 56.2vw, 421.5px);}
.cont02 .evt_btn02 {top: clamp(284.6px, 88.93vw, 667px);}
.cont02 .evt_btn03 {top: clamp(392.5px, 122.67vw, 920px);}
.cont02 .evt_btn04 {top: clamp(497.3px, 155.4vw, 1165.5px);}

/* --------------------------------------------------------------------------
   cont04 : teacher slider
   The photo is 421 wide in the design. Only the active one is shown, the
   name / career block below it is plain text so it may wrap on small screens,
   which is why nothing here has a fixed height.
   -------------------------------------------------------------------------- */
.cont04 .teacher_slide_wrap {
    --photo-w: clamp(157.9px, 49.33vw, 370px);      /* active photo width */
    --photo-off-w: clamp(126.3px, 39.47vw, 296px);  /* side photo = 80% of active */
    --photo-bottom: clamp(160px, 50vw, 375px);      /* bottom line all photos sit on */
    --side-x: clamp(142.1px, 44.4vw, 333px);        /* centre gap : (370 + 296) / 2 */
    --side-opacity: 0.6;
    --arrow-y: 53.5%;                               /* vertical centre of the active photo */
    --arrow-w: clamp(33.3px, 10.4vw, 78px);
    --arrow-h: clamp(20.5px, 6.4vw, 48px);
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
/* the track spans the whole section so every percentage below shares one basis.
   It used to be left:50% with the photo width, which made the arrow maths
   resolve against the photo instead of the section and pinned both arrows
   to the middle. */
.cont04 .teacher_track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* only active / prev / next are rendered, js just assigns the classes.
   bottom is shared, so the smaller side photos line up with the active one. */
.cont04 .teacher_item { display: none; position: absolute; left: 50%; bottom: var(--photo-bottom); width: var(--photo-off-w); opacity: var(--side-opacity); transition: opacity 0.4s ease, width 0.4s ease; }
.cont04 .teacher_item img { display: block; width: 100%; }
.cont04 .teacher_item.active { display: block; z-index: 3; width: var(--photo-w); opacity: 1; transform: translateX(-50%); }
.cont04 .teacher_item.prev,
.cont04 .teacher_item.next { display: block; z-index: 1; }
.cont04 .teacher_item.prev { transform: translateX(calc(-50% - var(--side-x))); }
.cont04 .teacher_item.next { transform: translateX(calc(-50% + var(--side-x))); }

/* prev / next : dark pill with a line arrow, centred on the edges of the active photo */
.cont04 .teacher_prev,
.cont04 .teacher_next { position: absolute; top: var(--arrow-y); z-index: 5; width: var(--arrow-w); height: var(--arrow-h); margin-top: calc(var(--arrow-h) / -2); padding: 0; border: 0; border-radius: 999px; background: rgba(20, 20, 20, 0.72); font-size: 0; color: transparent; cursor: pointer; }
.cont04 .teacher_prev { left: calc(50% - var(--photo-w) / 2); transform: translateX(-50%); }
.cont04 .teacher_next { left: calc(50% + var(--photo-w) / 2); transform: translateX(-50%); }
/* shaft */
.cont04 .teacher_prev::before,
.cont04 .teacher_next::before { content: ''; position: absolute; left: 50%; top: 50%; width: 42%; height: 1px; background: #fff; transform: translate(-50%, -50%); }
/* head */
.cont04 .teacher_prev::after,
.cont04 .teacher_next::after { content: ''; position: absolute; top: 50%; width: 22%; height: 22%; border-top: 1px solid #fff; border-right: 1px solid #fff; }
.cont04 .teacher_prev::after { left: 29%; transform: translateY(-50%) rotate(-135deg); }
.cont04 .teacher_next::after { right: 29%; transform: translateY(-50%) rotate(45deg); }

/* name on the left, career list on the right, aligned on one row */
.cont04 .teacher_info { position: absolute; left: 0; top: clamp(434.3px, 135.73vw, 1018px); width: 100%; padding: 0 clamp(21.3px, 6.67vw, 50px); }
.cont04 .teacher_text { display: none; }
.cont04 .teacher_text.active { display: flex; justify-content: center; align-items: center; gap: clamp(12.8px, 4vw, 30px); }
.cont04 .teacher_info .t_name { font-size: clamp(14.9px, 4.67vw, 35px); font-weight: 800; color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.cont04 .teacher_info .t_career { text-align: left; }
.cont04 .teacher_info .t_career li { position: relative; padding-left: clamp(5.1px, 1.6vw, 12px); font-size: clamp(7.3px, 2.27vw, 17px); line-height: 1.65; color: #d5d5d5; white-space: nowrap; }
.cont04 .teacher_info .t_career li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 2px; height: 2px; border-radius: 50%; background: #d5d5d5; }

/* bottom CTA (the gradient pill graphic is baked into cont04.jpg) */
.cont04 .apply_btn { left: 6.5%; transform: none; width: 87%; bottom: clamp(41.8px, 13.07vw, 98px); height: clamp(42.7px, 13.33vw, 100px); }

/* --------------------------------------------------------------------------
   cont05 : horizontal card scroll, 3 cards (2 jobs per card image)
   The card image is 650 wide in the design.
   -------------------------------------------------------------------------- */
.cont05 .scroll_wrap {
    --card-w: clamp(277.3px, 86.67vw, 650px);
    --card-gap: clamp(8.5px, 2.67vw, 20px);
    --side-pad: clamp(21.3px, 6.67vw, 50px);
    overflow-x: auto; overflow-y: hidden; width: 100%;
    padding: 0 var(--side-pad);
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cont05 .scroll_wrap::-webkit-scrollbar { display: none; }
.cont05 .scroll_wrap ul { display: flex; gap: var(--card-gap); width: max-content; }
.cont05 .scroll_wrap li { flex: 0 0 var(--card-w); width: var(--card-w); scroll-snap-align: center; }
.cont05 .scroll_wrap li img { display: block; width: 100%; }
.cont05 .evt_btn05{  bottom: 5%; width: 90%; height: 12%; left: 50%; transform: translateX(-50%);}
/* --------------------------------------------------------------------------
   cont06 : proposal preview slider + apply form
   This section is laid out in normal flow, NOT absolutely, because the form
   text wraps differently per viewport and the section has to grow with it.
   -------------------------------------------------------------------------- */
/* hidden by default, slides down when evt_btn05 (in cont05) adds .active.
   max-height is set by js from scrollHeight because the height is unknown up front. */
.cont06 { background: #fff; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s ease, opacity 0.4s ease; }
.cont06.active { opacity: 1; }

/* preview slider, 4 slides, slide is 613 wide in the design */
.cont06 .slide_wrap { position: relative; width: clamp(261.5px, 81.73vw, 613px); margin: 0 auto; }
.cont06 .slide_view { overflow: hidden; width: 100%; }
.cont06 .slide_view ul { display: flex; width: 100%; }
.cont06 .slide_view li { flex: 0 0 100%; width: 100%; }
.cont06 .slide_view li img { display: block; width: 100%; }
.cont06 .slide_btn { position: absolute; top: 50%; z-index: 3; width: clamp(17.1px, 5.33vw, 40px); height: clamp(17.1px, 5.33vw, 40px); margin-top: clamp(-20px, -2.67vw, -8.5px); padding: 0; border: 0; background: none; font-size: 0; color: transparent; cursor: pointer; }
.cont06 .slide_prev { left: clamp(-42.7px, -5.87vw, -18.2px); }
.cont06 .slide_next { right: clamp(-42.7px, -5.87vw, -18.2px); }
.cont06 .slide_btn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; border-top: 2px solid #919191; border-right: 2px solid #919191; }
.cont06 .slide_prev::before { transform: translate(-50%, -50%) rotate(-135deg); }
.cont06 .slide_next::before { transform: translate(-50%, -50%) rotate(45deg); }

/* apply form */
.cont06 .apply_form { width: 86.67%; margin: clamp(34.1px, 10.67vw, 80px) auto 0; text-align: left; }
.cont06 .form_title { margin-bottom: clamp(10.7px, 3.33vw, 25px); font-size: clamp(13.7px, 4.27vw, 32px); font-weight: 800; color: #222; letter-spacing: -0.02em; }
.cont06 .form_row { display: flex; flex-direction: column; gap: clamp(5.1px, 1.6vw, 12px); margin-bottom: clamp(5.1px, 1.6vw, 12px); }
.cont06 .form_col { display: flex; align-items: center; }
.cont06 .form_col > label { flex: 0 0 clamp(51.2px, 16vw, 120px); font-size: clamp(9.4px, 2.93vw, 22px); font-weight: 500; color: #333; }

/* input / select : border #66A8FF, placeholder #9D9D9D, typed value #333 */
.cont06 .apply_form input[type="text"],
.cont06 .apply_form input[type="tel"],
.cont06 .apply_form input[type="email"],
.cont06 .apply_form select { width: 100%; height: clamp(29.9px, 9.33vw, 70px); padding: 0 clamp(10.2px, 3.2vw, 24px); border: 1px solid #66A8FF; border-radius: clamp(3.4px, 1.07vw, 8px); background: #fff; font-family: inherit; font-size: clamp(9.4px, 2.93vw, 22px); color: #333; }
.cont06 .apply_form input::placeholder { color: #9D9D9D; }
.cont06 .apply_form input:focus,
.cont06 .apply_form select:focus { outline: none; border-color: #3d8bff; }

/* select arrow #919191, drawn on the wrapper because select cannot hold pseudo elements */
.cont06 .select_box { position: relative; flex: 1 1 0; min-width: 0; }
.cont06 .select_box select { appearance: none; -webkit-appearance: none; padding-right: clamp(25.6px, 8vw, 60px); color: #9D9D9D; }
.cont06 .select_box select.selected { color: #333; }
.cont06 .select_box::after { content: ''; position: absolute; right: clamp(11.1px, 3.47vw, 26px); top: 50%; width: clamp(5.1px, 1.6vw, 12px); height: clamp(5.1px, 1.6vw, 12px); margin-top: clamp(-9px, -1.2vw, -3.8px); border-right: 2px solid #919191; border-bottom: 2px solid #919191; transform: rotate(45deg); pointer-events: none; }

/* notice box : background #D6DDE3, scrollbar #9FACB8
   p + p keeps the blank lines of the source text */
.cont06 .notice_box { height: clamp(85.3px, 26.67vw, 200px); margin-top: clamp(14.9px, 4.67vw, 35px); padding: clamp(11.1px, 3.47vw, 26px) clamp(12.8px, 4vw, 30px); overflow-y: auto; border-radius: clamp(3.4px, 1.07vw, 8px); background: #D6DDE3; scrollbar-width: thin; scrollbar-color: #9FACB8 transparent; }
.cont06 .notice_box::-webkit-scrollbar { width: 6px; }
.cont06 .notice_box::-webkit-scrollbar-track { background: transparent; }
.cont06 .notice_box::-webkit-scrollbar-thumb { background: #9FACB8; border-radius: 3px; }
.cont06 .notice_box p { font-size: clamp(7.7px, 2.4vw, 18px); line-height: 1.6; color: #333; }
.cont06 .notice_box p + p { margin-top: 0.2em; }

/* agreement checkboxes */
.cont06 .agree_area { margin-top: clamp(17.9px, 5.6vw, 42px); }
.cont06 .agree_all,
.cont06 .agree_item { display: flex; align-items: center; }
.cont06 .agree_item { margin-top: clamp(6px, 1.87vw, 14px); padding-left: clamp(3.4px, 1.07vw, 8px); }
.cont06 .agree_area input[type="checkbox"] { position: relative; flex: 0 0 auto; width: clamp(11.9px, 3.73vw, 28px); height: clamp(11.9px, 3.73vw, 28px); margin: 0; appearance: none; -webkit-appearance: none; border: 1px solid #66A8FF; border-radius: clamp(1.7px, 0.53vw, 4px); background: #fff; cursor: pointer; }
.cont06 .agree_area .agree_item input[type="checkbox"] { width: clamp(10.2px, 3.2vw, 24px); height: clamp(10.2px, 3.2vw, 24px); }
.cont06 .agree_area input[type="checkbox"]:checked { background: #66A8FF; }
.cont06 .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); }
.cont06 .agree_area label { margin-left: clamp(6px, 1.87vw, 14px); font-size: clamp(9.4px, 2.93vw, 22px); color: #333; cursor: pointer; }
.cont06 .agree_area .agree_item label { font-size: clamp(8.1px, 2.53vw, 19px); color: #666; }

/* the two CTA graphics live in cont06_2.jpg, so the buttons are hotspots
   anchored to the bottom : a taller form above cannot move them */
.cont06 .evt_btn06,
.cont06 .evt_btn07 { left: 8%; width: 84%; height: clamp(56.5px, 17.67vw, 132.5px); border-radius: 999px;}
.cont06 .evt_btn06 { bottom: clamp(94.9px, 29.67vw, 222.5px);}
.cont06 .evt_btn07 { bottom: clamp(27.7px, 8.67vw, 65px); }

/* --------------------------------------------------------------------------
   cont07 : job result slider, 6 slides (Before / After image is 508 wide)
   The tab row is the pagination. Prev / next arrows are removed on mobile.
   -------------------------------------------------------------------------- */
/* cont07.jpg holds only the heading, the tabs + slider flow below it.
   The section grows with its content, no fixed height needed. */
.cont07 { background: #000; padding-bottom: clamp(21.3px, 6.67vw, 50px); }
.cont07 .job_slide_wrap {
    --gif-w: 90.5%;             /* of the slide width */
    --gif-top: 58.5%;           /* of the slide height */
    width: 90%; margin: 0 auto;
}
/* tabs : fixed 3 x 2 grid, each cell has its own underline
   (grey by default, blue when active) */
.cont07 .job_tab { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(10.2px, 3.2vw, 24px); row-gap: clamp(10.2px, 3.2vw, 24px); width: 100%; margin: clamp(17.1px, 5.33vw, 40px) 0 clamp(25.6px, 8vw, 60px); padding: 0; }
.cont07 .job_tab li { width: 100%; }
.cont07 .job_tab button { display: block; width: 100%; padding: 0 0 clamp(6px, 1.87vw, 14px); border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); background: none; font-family: inherit; font-size: clamp(9.4px, 2.93vw, 22px); font-weight: 600; color: #aaa; white-space: nowrap; cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.cont07 .job_tab button.active { color: #31A9FF; border-bottom-color: #31A9FF; }

.cont07 .job_view { width: 100%; overflow: hidden; }
.cont07 .job_list { display: flex; width: 100%; transition: transform 0.5s ease; }
.cont07 .job_list > li { position: relative; flex: 0 0 100%; width: 100%; }
.cont07 .job_list > li > img { display: block; width: 100%; }
/* the gif drops into the blank "After" area of each slide */
.cont07 .job_list .job_gif { position: absolute; left: 50%; top: var(--gif-top); width: var(--gif-w); height: auto; transform: translateX(-50%); }

/* --------------------------------------------------------------------------
   cont11 : roadmap slider, 2 slides (slide is 741 wide, nearly full width)
   -------------------------------------------------------------------------- */
/* horizontal auto slider, 2 slides, infinite loop (slide is ~741 wide) */
.cont11 .slide_wrap { position: relative; width: clamp(288px, 90vw, 741px); margin: 0 auto; }
.cont11 .slide_view { overflow: hidden; width: 100%; }
.cont11 .slide_view ul { display: flex; width: 100%; }
.cont11 .slide_view li { flex: 0 0 100%; width: 100%; }
.cont11 .slide_view li img { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   cont12 : bottom CTA hotspot
   -------------------------------------------------------------------------- */
.cont12 .apply_btn {    left: 6%;
    width: 87%;
    bottom: clamp(36.3px, 11.33vw, 85px);
    height: clamp(56.5px, 17.67vw, 132.5px);
}

/* --------------------------------------------------------------------------
   shared pagination (cont01 / cont05 / cont11)
   active is a wide pill, the rest are small dots.
   Colours come from two variables so a light section can flip them.
   -------------------------------------------------------------------------- */
.slide_pager {
    --pg-dot: clamp(6px, 1.87vw, 14px);
    --pg-pill-w: clamp(34.1px, 10.67vw, 80px);
    --pg-gap: clamp(7.7px, 2.4vw, 18px);
    --pg-on: #fff;
    --pg-off: rgba(255, 255, 255, 0.35);
    display: flex; justify-content: center; align-items: center; gap: var(--pg-gap);
}
.slide_pager button { display: block; width: var(--pg-dot); height: var(--pg-dot); padding: 0; border: 0; border-radius: 999px; background: var(--pg-off); font-size: 0; color: transparent; cursor: pointer; transition: width 0.3s ease, background 0.3s ease; }
.slide_pager li.active button { width: var(--pg-pill-w); background: var(--pg-on); }

/* cont01 : the slider fills the section, so the pager floats over its bottom */
.cont01 .slide_pager { position: absolute; left: 0; bottom: clamp(21.3px, 6.67vw, 50px); width: 100%; z-index: 3; }

/* cont05 : sits in normal flow between the cards and the CTA image */
.cont05 .slide_pager { margin: clamp(17.1px, 5.33vw, 40px) 0; }

/* cont11 : white section, so the pager is black and the section gets bottom room */
.cont11 { background: #fff; padding-bottom: 10%; }
.cont11 .slide_pager {
    --pg-on: #000;
    --pg-off: rgba(0, 0, 0, 0.25);
    margin-top: clamp(17.1px, 5.33vw, 40px);
}