/* ==============================================
    base
 ============================================== */
:root {
    --theme: #992835;
    --theme-rgb: 153,40,53;

    --theme-light: #FF6077;
    --theme-light-rgb: 255,96,119;

    --header-h: 4.75rem;
    --full-h: calc(var(--vh) * 100);
}

.debug { position: fixed; left: 0; bottom: 0; margin: 1.5rem; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(3px); color: #00ffe1; z-index: 99999; display: block; padding: 0.5em 1em; font-size: 2rem; display: none; }

/* ==============================================
    layout
 ============================================== */
/* header ================== */
.header { padding: 1.5rem 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; background-color: rgba(255,255,255,0.7); z-index: 99; transition: 0.3s; box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.07); }
.header_inner { display: flex; justify-content: space-between; align-items: center; }
.header_logo { height: 1.5em; }
.header_logo path { transition: 0.25s; }
.header_gnb { font-size: 1.125em; }
.header_gnb_list { display: flex; justify-content: flex-start; align-items: center; gap: 2em; }
.header_gnb_link { padding: 0.3125em 0.625em; text-transform: uppercase; font-weight: 500; position: relative; display: inline-block; vertical-align: top; transition: 0.25s; }
.header_gnb_link::after { content: ""; width: 0.3125em; height: 0.3125em; -webkit-border-radius: 9999px; -moz-border-radius: 9999px; border-radius: 9999px; background-color: currentColor; display: inline-block; position: absolute; right: 0; top: 0; margin-top: -0.3125em; transition: 0.15s; opacity: 0; }
.header_gnb_link:hover, .header_gnb_link.is-active { color: var(--theme); }
.header_gnb_link:hover::after, .header_gnb_link.is-active::after { margin-top: 0; opacity: 1; }
.header.is-white { background-color: rgba(255,255,255,0); color: #fff; --logo-main: #fff; --logo-accent: var(--theme-light); box-shadow: none; }
.header.is-white .header_gnb_link:hover,
.header.is-white .header_gnb_link.is-active { color: var(--theme-light); }
.header_gnb_btn { font-size: 1.875em; position: relative; display: none; }
.header_gnb_btn .fa-times { display: none; color: #fff; }
.header_gnb_btn .fa-bars { display: block; }
.header_gnb_btn.open .fa-times { display: block; }
.header_gnb_btn.open .fa-bars { display: none; }

/* footer ================== */
.footer { padding: 5rem 0; background-color: var(--theme); color: #fff; }
.footer_inner { display: grid; grid-template-columns: 1.25fr 2fr 1fr; align-items: center; }
.footer_logo { grid-area: logo; height: 1.5em; --logo-main: #fff;  --logo-accent: var(--theme-light); }
.footer_copyright { font-size: 1em; font-weight: 200; margin-top: 1rem; }
.footer_info { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem 3rem; }
.footer_info_data { line-height: 1.4; font-size: 0.9375em; display: inline-flex; gap: 0.5em; }
.footer_info_data b { font-weight: 400; }
.footer_info_data span { opacity: 0.7; }
.footer_info_data.full { grid-column: 1 / -1; }
.footer_fnb_list { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.footer_fnb_item { display: flex; align-items: center; }
.footer_fnb_link { font-size: 1.125em; text-transform: uppercase; transition: 0.15s; opacity: 0.6; }
.footer_fnb_link:hover { opacity: 1; }

/* scroll_motion ================== */
.scroll_motion { display: flex; justify-content: center; align-items: center; flex-direction: column; position: fixed; left: 50%; transform: translateX(-50%); bottom: 5%; z-index: 99; }
.scroll_motion_mouse { width: 1.75rem; height: 3rem; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; border: 2px solid #fff; position: relative; overflow: hidden; animation: scrollMouse 1.25s linear infinite; }
.scroll_motion_mouse::after { content:""; width: 0.15rem; height: 0.5rem; background-color: #fff; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; animation: scrollBall 1.25s linear infinite; top: 0.3rem; opacity: 1; }
.scroll_motion_txt { font-size: 0.9375rem; margin-top: 0.5rem; animation: scrollTxt 1.25s linear infinite; }
@keyframes scrollMouse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10%); }
}
@keyframes scrollBall {
    0%, 100% { top: 0.3rem; opacity: 0; }
    10% { opacity: 1; }
    80% { top: 65%; opacity: 0; }
}
@keyframes scrollTxt {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10%); }
}

/* cursor ================== */
.mf-cursor {position: fixed; top: 0; left: 0; z-index: 250; direction: ltr; contain: layout style size; pointer-events: none; transition: opacity 0.3s, color 0.4s;}
.mf-cursor::before {content: ''; position: absolute; top: -24px; left: -24px; display: block; width: 48px; height: 48px; transform: scale(0.2); background: var(--theme-light); border-radius: 50%; transition: transform 0.25s ease-in-out, opacity 0.1s;}
.mf-cursor.-inverse {color: #fff;}
.mf-cursor.-exclusion {mix-blend-mode: exclusion;}
.mf-cursor.-exclusion::before {background: #fff;}
.mf-cursor.-toggle::before {background-color: #000; color: #fff; transform: scale(1.3);}
.mf-cursor.-pointer::before {transform: scale(1.45);}
.mf-cursor.-menu::before {transform: scale(1.4);}
.mf-cursor.-text::before {opacity: 0.85; transform: scale(1.7);}
.mf-cursor.-text.-active::before {transform: scale(1.6); transition-duration: 0.2s;}
.mf-cursor.-text.-gallery::before {opacity: 1; background-color: #fff; transform: scale(2);}
.mf-cursor.-text.-gallery .mf-cursor-text {color: #000; font-weight: 600; }
.mf-cursor.-project::before {opacity: 1; background-color: #000; transform: scale(2.5);}
.mf-cursor.-project .mf-cursor-text {color: #fff;}
.mf-cursor.-box::before {transform: scale(1.15); opacity: 0.2; background-color: #fff;}
.mf-cursor.-icon::before {transform: scale(1.5);}
.mf-cursor.-icon.-active::before {transform: scale(1.4);}
.mf-cursor.-hidden::before {transform: scale(0);}
.mf-cursor-text {position: absolute; top: -18px; left: -18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transform: scale(0) rotate(10deg); opacity: 0; color: #fff; font-size: 16px; line-height: 20px; text-align: center; transition: opacity 0.4s, transform 0.3s;}
.mf-cursor.-text .mf-cursor-text, .mf-cursor.-icon .mf-cursor-text {opacity: 1; transform: scale(1);}
.mf-cursor-media {position: absolute; width: 400px; height: 400px; margin: -200px 0 0 -200px;}
.mf-cursor-media img, .mf-cursor-media video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; width: 100%; height: 100%; transform: translateZ(0);}
.mf-cursor-media-box {position: relative; width: 100%; height: 100%; overflow: hidden; transform: scale(0) translateZ(0); padding: 1px; opacity: 0; border-radius: 50%; transition: transform 0.35s, opacity 0.2s 0.2s;}
.mf-cursor.-media .mf-cursor-media-box {opacity: 1; transform: scale(0.696); transition-duration: 0.4s, 0.4s; transition-delay: 0s, 0s;}


/* ==============================================
    style
 ============================================== */
.ctt_admin { display: none; }

/* 공통 유틸 */
body { font-family: 'Archivo', 'S-CoreDream', sans-serif; }
.en { font-family: 'Archivo', sans-serif; letter-spacing: 0; }
.fullHeight { height: var(--full-h); }
.white { background-color: #fff; color: #000; }
.page { margin-top: var(--header-h); padding: 4rem 0 6rem; }
.home { background-color: #000; color: #fff; overflow-x: hidden; }
.home section { overflow: hidden; }
.content { margin-top: 0; padding: 0; }
.hidden .line { overflow: hidden; }
.bug { width: 100%; height: 8rem; position: relative; }
.media + .bug { margin-bottom: -2px; }

/* 컨테이너 */
.container { width: 100%; max-width: 1440px; margin: auto; padding: 0 1.5rem; }
.container-full { max-width: 100%; padding: 0 2.5rem; }
.container-xl { max-width: 1660px; }
.container-md { max-width: 1280px; }

/* 로고 */
.logo_svg { width: auto; height: 100%; max-height: 4.75rem; }
.logo_main { fill: var(--logo-main, #222); }
.logo_accent { fill: var(--logo-accent, var(--theme)); }

/* ==============================================
    about
 ============================================== */
.about_visual { display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; background: no-repeat center/cover; font-weight: 600; }
.about_visual-1 { background-image: url(../img/about_visual_01.jpg); }
.about_visual-2 { background-image: url(../img/about_visual_02.jpg); }
.about_visual-3 { background-image: url(../img/about_visual_03.jpg); }
.about_visual-4 { background-image: url(../img/about_visual_04.jpg); position: relative; }
.about_visual-4::before { content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.1) 50%);}
.about_visual .line { overflow: hidden; }
.about_visual b .word { display: inline-block; padding: 0 0.7rem; position: relative; -webkit-text-fill-color: rgba(255, 255, 255, 0.1); background-image: linear-gradient(#fff, #fff); -webkit-background-clip: text; background-repeat: no-repeat; background-size: 0 100%; }
.about_visual b.on::before { width: 100%; height: 65%; }
.about_visual .word { opacity: 0; transform: translateY(100%); }
.about_visual_headline { font-size: 2.25em; line-height: 1.5; }
.about_visual_headline i { height: 0.75em; display: block; }
.about_visual_headline-big { font-size: 4.25em; line-height: 1.2; }

.about_why { background-color: rgba(var(--theme-rgb),0.45); padding-bottom: 6rem; }
.about_why { background: linear-gradient(to bottom, rgba(0,0,0,1) , rgba(var(--theme-rgb),0.45) 60%); }
.about_why_item { margin-bottom: 3rem; perspective: 300px; }
.about_why_box { display: flex; justify-content: space-between; background-color: #fff; -webkit-border-radius: 1.5rem;-moz-border-radius: 1.5rem;border-radius: 1.5rem; padding: 3.5rem 5.5rem; transform-origin: center top; position: relative; filter: brightness(1); gap: 3rem; }
.about_why_txt { display: flex; flex-direction: column; flex-grow: 1; }
.about_why_txt b { font-size: 8em; font-style: italic; -webkit-text-stroke: 1px var(--theme); color: transparent;  font-family: "Libre Baskerville", serif; font-weight: 400; margin-bottom: 0.5em; }
.about_why_txt h4 { font-size: 2.5em; margin-bottom: 1rem; font-weight: 600; color:rgba(var(--theme-rgb),0.8); }
.about_why_txt h5 { font-size: 1.125em; font-weight: 600; margin-bottom: 1.5rem; color: #666;  }
.about_why_txt p { font-size: 1.2em; line-height: 1.6; font-weight: 500; color: #444; }
.about_why_img { width: 40%; align-self: flex-end; flex-shrink: 0; }
.about_why_img img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; }

.about_ceo { background: linear-gradient(to bottom, rgba(var(--theme-rgb),0.45), rgba(var(--theme-rgb),1)); padding: 6rem 0;}
.about_ceo_inner { display: grid; grid-template-columns: 1.25fr 2fr; gap: 4rem; align-items: center; }
.about_ceo_img { border-radius: 1.5rem; overflow: hidden; }
.about_ceo_img img { width: 100%; height: 100%; object-fit: cover; }
.about_ceo_txt { color: #fff; }
.about_ceo_headline { font-size: 3em; font-weight: 600; line-height: 1.4; margin-bottom: 2.5rem; }
.about_ceo_headline .line { overflow: hidden; }
.about_ceo_desc { font-size: 1.25em; line-height: 1.8; margin-bottom: 1.875rem; }
.about_ceo_sign { font-size: 1.125em; font-weight: 500; }

/* ==============================================
    project
 ============================================== */
.project_modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0,0,0,0.6); display: none; overflow-y: scroll; }
.project_modal_preview { width: 100%; aspect-ratio: 16/8.5; }
.project_modal_preview img { width: 100%; height: 100%; object-fit: cover; }
.bo_view-project { text-align: center; }
.bo_view-project .bo_title_box { margin: 0; padding: 4rem 0; }
.bo_view_tags { display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin-bottom: 2rem; }
.bo_view_tags span { font-size: 1.125em; height: 1.8em; line-height: 1; padding: 2px 1em 0; border-radius: 999px; display: inline-flex; justify-content: center; align-items: center; background-color: #f3f3f3; color: #555; }
.project_modal_inner { width: 94%; padding: 3rem 0; position: relative; display: flex; justify-content: center; align-items: flex-start; transform: translateY(15%); opacity: 0; transition: 0.7s; margin: auto; }
.project_modal_content { max-width: 1280px; width: 100%; background-color: #fff; -webkit-border-radius: 1.5em;-moz-border-radius: 1.5em;border-radius: 1.5em; overflow: hidden; }
.project_modal_content .bo_preview { padding-top: 55.65%; }
.project_modal_content .bo_view { width: 86%; margin: auto; }
.project_modal_close { position: sticky; top: 4rem; transform: translateX(-100%); -webkit-border-radius: 999px; margin-left: -1rem; -moz-border-radius: 999px;border-radius: 999px; }
.project_modal_close img { width: 2.5rem; }
.project_modal.is-open .project_modal_inner { transform: translateY(0); opacity: 1; }

/* ==============================================
    recruit
 ============================================== */
.recruit_headline { line-height: 1.3; }
.recruit_headline b { font-size: 1.25em; text-transform: uppercase; color: rgba(var(--theme-rgb), 0.8); letter-spacing: 0.2rem; font-weight: 800; }
.recruit_headline h2 { font-size: 3.75em; font-weight: 600; margin-top: 0.5em; }

.recruit_visual { --ovh: 0%; --ovw: 75%; text-align: center; background: url(../img/recruit_visual_01.jpg) no-repeat center/cover; }
.recruit_visual_box { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.recruit_visual_desc { font-size: 2.25em; line-height: 1.5; font-weight: 600; }
.recruit_visual_headline { font-size: 4.25em; font-weight: 600; line-height: 1.4; }
.recruit_visual_box-black { color: #000; }
.recruit_visual_box-black .line { overflow: hidden; }
.recruit_visual_box-white { color: #fff; position: absolute; left: 0; top: 0; clip-path: inset(calc(100% - var(--ovh)) 0 0 0); }
.recruit_visual_box-overlay { width: var(--ovw); height: var(--ovh); position: absolute; left: 0; right: 0; bottom: 0;  background: rgba(0,0,0,0.6); margin: auto; color: #fff; overflow: hidden; }

.recruit_talent { overflow: hidden; }
.recruit_talent_inner { width: 100%; height: 100%; display: flex; position: relative; align-items: center; justify-content: flex-start; }
.recruit_headline-talent { width: 30%; padding: 0 3%; }
.recruit_talent_list { display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0; border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%);  }
.recruit_talent_list::before { content:""; display: block; padding-bottom: 100%; }
.recruit_talent_item { transform-origin: center bottom; position: absolute; height: 50%; }
.recruit_talent_item:nth-child(1) { transform: rotate(0deg); }
.recruit_talent_item:nth-child(2) { transform: rotate(30deg); }
.recruit_talent_item:nth-child(3) { transform: rotate(60deg); }
.recruit_talent_item:nth-child(4) { transform: rotate(90deg); }
.recruit_talent_item:nth-child(5) { transform: rotate(120deg); }
.recruit_talent_box { box-shadow: 0 0 1rem 0.5rem rgba(0,0,0,0.1); background-color: #fff; border-radius: 1.25rem; overflow: hidden; }
.recruit_talent_img img { width: 100%; height: 100%; object-fit: cover; }
.recruit_talent_txt b { color: rgba(var(--theme-rgb), 0.6); letter-spacing: 0.2em; font-weight: 800; text-transform: uppercase; display: block; }
.recruit_talent_txt h5 { line-height: 1.3; font-weight: 700; color: #333; }
.recruit_talent_txt p { line-height: 1.5; font-weight: 500; color: #666; }

/* 사이즈 */
.recruit_talent { --boxH: calc(var(--full-h) * 0.6); }
.recruit_talent_list { width: calc(var(--full-h) * 3.25); top: calc(((var(--full-h) - var(--boxH)) / 2) + (var(--header-h)/2)); }
.recruit_talent_item { width: calc(var(--boxH) * 0.78); }
.recruit_talent_box { height: var(--boxH); }
.recruit_talent_img { height: calc(var(--boxH) * 0.52); }
.recruit_talent_txt { height: calc(var(--boxH) * 0.48); }

.recruit_talent_txt { font-size: calc((var(--boxH) * 0.78) * 0.037); padding: 1.5em; }
.recruit_talent_txt b { font-size: 0.875em; margin-bottom: 0.75em; }
.recruit_talent_txt h5 { font-size: 1.25em; line-height: 1.3; margin-bottom: 0.5em; }
.recruit_talent_txt p { font-size: 1em; }

.recruit_talent_last_box { position: relative; overflow: visible; }
.recruit_talent_last_bg,
.recruit_talent_last_txt { width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.recruit_talent_last_bg { border-radius: 1.25rem; overflow: hidden; background: url(../img/recruit_talent_img_last.jpg) no-repeat center/cover;}
.recruit_talent_last_txt { display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; text-align: center; }
.recruit_talent_last_txt h3 { font-weight: 700; font-size: 3em; margin-bottom: 2rem; }
.recruit_talent_last_txt p { font-weight: 500; font-size: 1.75em; line-height: 1.4; }


.recruit_welfare { text-align: center; padding-top:  var(--header-h); background-color: #262828; color: #fff; margin-top: calc(-1 * var(--full-h)); }
.recruit_welfare_inner { padding: 8rem 0; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3rem; }
.recruit_headline-welfare b { color: rgba(var(--theme-light-rgb), 0.5); }
.recruit_welfare_box { flex-grow: 1; display: block; width: 100%; }
.recruit_welfare_list { width: 100%; height: 100%; position: relative; }
.recruit_welfare_item { width: 30%; max-width: 270px; aspect-ratio: 1 / 1; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem 1.5rem; flex-shrink: 0; border: 1px solid #888; background-color: rgba(65,65,65,0.8); }
.recruit_welfare_icon { aspect-ratio: 1 / 1; width: 30%; display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 55px;  }
.recruit_welfare_icon img { width: 100%; height: 100%; object-fit: contain; }
.recruit_welfare_txt {  padding-top: 1.5em; }
.recruit_welfare_txt h5 { font-size: 1.25em; margin-bottom: 0.5em; font-weight: 600; }
.recruit_welfare_txt p { color: #ccc; font-size: 1.125em; line-height: 1.6; word-break: keep-all; font-weight: 500; }
.recruit_welfare_item { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.recruit_move { padding: 12rem 0 10rem; background: url(../img/recruit_move_bg.jpg) no-repeat center/cover; color: #fff; text-align: center; }
.recruit_move_title { font-size: 2.875em; font-weight: 600; line-height: 1.4; }
.recruit_move_title b { display: block; }
.recruit_move_btns { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 3rem; }
.recruit_move_btns .btn { font-size: 1.125em; line-height: 2.75; padding: 0 2rem; display: inline-flex; -webkit-border-radius: 9999px;-moz-border-radius: 9999px;border-radius: 9999px; justify-content: center; align-items: center; }
.recruit_move_btns .btn:hover { background-color: #000; border-color: #000; }

/* ==============================================
    contact
 ============================================== */
.contact_inner { display: grid; grid-template-columns: 0.35fr 0.65fr; position: relative; align-items: flex-start; column-gap: 6rem; justify-content: space-between; }
.contact_left,
.contact_right { padding: 8rem 0 4rem; }
.contact_left { position: sticky; top: 0; display: flex; flex-direction: column; }
.contact_left::before { content:""; background: url(../img/contact_left_bg.jpg) no-repeat center/cover; display: block; top: 0; bottom: 0; height: 100%; position: absolute; z-index: -1; width: 40vw; right: -3rem; }

.contact_headline { margin-bottom: 3rem; }
.contact_headline_title { font-size: 2.5em; line-height: 1.3; margin-bottom: 2rem; font-weight: 600; }
.contact_headline_title span { color: var(--theme); }
.contact_headline_desc { font-size: 1.125em; line-height: 1.5; color: #666; }
.contact_headline_desc b { font-weight: 600;  }

.contact_progress { position: relative; margin-bottom: auto; }
.contact_progress_line { width: 3px; height: 100%; background-color: #bbb; position: absolute; left: 0.9375rem; top: 0; transition: 0.4s; }
.contact_progress_line span { width: 3px; background-color: var(--theme); display: block; }
.contact_steps { display: flex; flex-direction: column; row-gap: 2rem; position: relative; }
.contact_step { display: flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.contact_step_num { font-size: 1em; width: 2em; height: 2em; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; display: inline-flex; justify-content: center; align-items: center; font-weight: 600; background-color: #bbb; color: #fff; transition: 0.3s; }
.contact_step_txt { font-size: 1.25em; font-weight: 500; color: #aaa; margin-top: -0.1em; }
.contact_step.is-done .contact_step_num { background-color: var(--theme); }
.contact_step.is-done .contact_step_txt { color: var(--theme); }

.contact_info { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem;  }
.contact_info p { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.contact_info p i { font-size: 1.25em; color: #999; }
.contact_info p span { font-size: 1.125em; color: #666;  }
.contact_info p:last-child { grid-column: 1 / -1; }

.contact_form { display: flex; flex-direction: column; row-gap: 5rem; justify-content: flex-start; align-items: flex-start; }
.contact_form_group { font-size: 1.125em; width: 100%; }
.contact_form_title { font-size: 1.5em; font-weight: 500; color: #666; margin-bottom: 2rem; }
.contact_form_field { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 0.5em 0.5em; }

.contact_check { }
.contact_check input { display: none; }
.contact_check input + label { display: flex; justify-content: center; align-items: center; color: #777; border-radius: 0.625rem; padding: 0.625em 1.125em; border: 1px solid #bbb; }
.contact_check input:not(:disabled) + label:hover { border-color: var(--theme); color: var(--theme); }
.contact_check input:checked + label { background-color: var(--theme); border-color: var(--theme); color: #fff !important; }

.contact_check input[name="wr_4_chk[]"] + label,
.contact_check input[name="wr_5_chk[]"] + label,
.contact_check input[name="wr_6_chk[]"] + label { width: 100%; }


.contact_form_field .field_style,
.contact_form_field textarea { padding: 0.75em 0.625em; border: 1px solid #bbb; -webkit-transition: 0.3s;-moz-transition: 0.3s;-ms-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s; }
.contact_form_field .field_style:focus-visible,
.contact_form_field textarea:focus-visible { border-color: var(--theme); box-shadow: 0 0 0 0.2em rgba(var(--theme-rgb),0.2); }

.contact_form_submit { margin-top: 2rem; display: flex; justify-content: space-between; align-items: flex-start; }
.contact_form_submit .chk_box { font-size: 1.125em; }
.contact_form_submit .chk_box .privacy_open { font-size: 0.8125em; cursor: pointer; background-color: #777; color: #fff; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; display: inline-block; padding: 0.5em 1em; vertical-align: middle; font-weight: 500; }
.contact_form_submit .btn_submit { font-size: 1.375em; font-weight: 500; padding: 1rem 2.5rem; }

.contact_check input:disabled + label,
.contact_form_field .field_style:disabled,
.contact_form_field textarea:disabled,
.contact_form_submit .btn_submit:disabled { opacity: 0.4; cursor: default; }
.contact_form_submit .btn_submit:disabled { filter: grayscale(1); }

.privacy_modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0,0,0,0.5); display: none; }
.privacy_modal_inner { background-color: #fff; width: 90%; max-width: 600px; margin: auto; border-radius: 1.25rem; overflow: hidden; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.privacy_modal_title { padding: 0.75em 1.125em; font-size: 1.375em; font-weight: 600; border-bottom: 1px solid #eee; }
.privacy_modal_content { font-size: 0.9375em; padding: 1rem 1.25rem; line-height: 1.5; max-height: calc(80 * var(--vh)); overflow-y: scroll; color: #666; background-color: #f7f7f7; }
.privacy_close { position: absolute; top: 0; right: 0; height: 3.3em; aspect-ratio: 1/1; display: inline-flex; justify-content: center; align-items: center; }
.privacy_close img { filter: invert(1); width: 35%; }

/* ==============================================
    intro
 ============================================== */
.intro { --logo-main: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; background-color: #000; }
.intro .logo_svg { overflow: hidden; max-width: 500px; width: 65%; }
.intro .logo_path { transform-box: fill-box; transform-origin: 50% 50%; }

/* hero ====================================== */
.hero_circle { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/index_hero.jpg) no-repeat center/cover; z-index: 5; will-change: clip-path; }
.hero_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); backdrop-filter: blur(0.1rem); }
.hero_content { height: 100%; display: flex; justify-content: center; align-items: center; position: relative; text-align: center; }
.hero_headline { font-size: 6em; line-height: 1; font-weight: 600; }
.hero .line { overflow: hidden; }
.hero_sub { font-size: 1.375em; line-height: 1.8; margin-top: 6rem; }
/* hero-set */
.hero_circle { clip-path: circle(120% at 50% 50%); }

/* mission ====================================== */
.mission_content { height: 100%; display: flex; justify-content: center; align-items: center; position: relative; text-align: center; }
.mission_lines { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mission_line { width: 100vw; height: 3px; margin-top: -1.5px; }
.mission_keywords { display: inline-flex; flex-direction: column; align-items: center; }
.mission_keyword { display: inline-block; font-size: 5.5em; text-transform: uppercase; font-weight: 600; }
.mission_keyword svg { height: 1em; width: auto; }
.mission_slogans { position: absolute; top: 100%; left: 50%; transform: translate(-50%,-100%); }
.mission_slogan { font-size: 3.5em; font-weight: 700; line-height: 1.4; }
/* mission-set */
.mission_line { background: linear-gradient(to left, rgba(var(--theme-rgb),0), rgba(var(--theme-rgb),1), rgba(var(--theme-rgb),0)); }
.mission_line-1 { transform: translateX(100%) scaleX(1) rotate(0); }
.mission_line-2 { transform: translateX(-100%) scaleX(1); }
.mission_keywords { gap: 15rem; }
.mission_keyword { text-align: center; opacity: 0; }
.mission_keyword-1 { transform: translateY(-150%) }
.mission_keyword-2 { transform: translateY(150%) }
.mission_inner { transform: translateY(0) scale(1); opacity: 1; }

/* process ====================================== */
.process { text-align: center; position: relative; transition: background-color 0.8s; }
.process_pin { height: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background-color: transparent; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); will-change: transform; overflow: visible !important; }
.process_circle { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; clip-path: circle(25% at 50% 50%); }
.process_circle_bg { position: absolute; width: 100vw; height: 100%; background-image: url(../img/process_circle.jpg); background-size: cover; background-position: center; animation: process_circle_bg forwards infinite 10s linear; }
@keyframes process_circle_bg {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.process_circle_txt { width: 50%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: absolute; transition: opacity .8s; }
.process_circle_txt svg { width: 96%; position: absolute; animation: rotate forwards infinite 15s linear; }
.process_circle_txt svg textPath { font-size: 2.625em; font-weight: 300; letter-spacing: -0.03em; fill: rgba(var(--theme-rgb),0.4); }
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.process_inner { display: flex; justify-content: center; align-items: center; flex-direction: column; font-weight: 500; position: relative; d }
.process_headline { font-size: 3.25em; margin-bottom: 2rem; }
.process_content { font-size: 4.25em; display: flex; justify-content: center; align-items: center; font-weight: 600; overflow: hidden; }
.process_content b { font-size: 1.25em; line-height: 1; color: var(--theme); margin-top: -0.2em; }
.process_box { line-height: 1.4; height: 1.4em; overflow: hidden; margin: 0 1.5rem; }
.process_list { display: flex; flex-direction: column; }
.process_item { padding-bottom: 5rem; white-space: nowrap; }
.process_item p { padding-top: 0.125em; }
/* process-set */
.process_circle { transform:translateY(-30%); opacity: 0; }
.process_headline { transform:translateY(-50%); opacity: 0; }
.process_box { width: 0; opacity: 0; }

/* brand ====================================== */
.brand .container { height: 100%; }
.brand_content { height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; }
.brand_txt { width: 100%; }
.brand_txt > * {  mix-blend-mode: difference;  }
.brand_headline { font-size: 6em; font-weight: 700; margin-bottom: 2rem; }
.brand_sub { font-size: 1.875em; font-weight: 600; line-height: 1.6; transition: opacity 0.3s; }
.brand_headline,
.brand_sub { -webkit-text-fill-color: rgba(255, 255, 255, 0.1); background-image: linear-gradient(#fff, #fff); -webkit-background-clip: text; background-repeat: no-repeat; background-size: 0 100%; }
.brand_more { font-size: 1.125em; border: 1px solid #fff; -webkit-border-radius: 999px;-moz-border-radius: 999px; border-radius: 999px; padding: 0.875em 1.25em; margin-top: 4rem; opacity: 0; font-weight: 500; }
.brand_more:hover { background-color: var(--theme-light); border-color: var(--theme-light); }
.brand_image { position: absolute; overflow: hidden; }
.brand_image img { height: 100%; border-radius: 1rem; }
.brand_image-1 { right: 56%; top: -50%; height: 44.45%; max-height: 404px; }
.brand_image-2 { left: 65%; top: -20%; height: 33.26%; max-height: 302px; }
.brand_image-3 { right: 70%; top: 20%; height: 33.26%; max-height: 302px; }
.brand_image-4 { left: 65%; top: 60%; height: 33.26%; max-height: 302px; }
.brand_image-5 { right: 47%; top: 100%; height: 59.35%; max-height: 540px; }

/*.brand_image-1 { right: 56%; top: -50%; height: 44.45%; max-height: 25.25rem; }
.brand_image-2 { left: 65%; top: -20%; height: 33.26%; max-height: 18.875rem; }
.brand_image-3 { right: 70%; top: 20%; height: 33.26%; max-height: 18.875rem; }
.brand_image-4 { left: 65%; top: 60%; height: 33.26%; max-height: 18.875rem; }
.brand_image-5 { right: 47%; top: 100%; height: 59.35%; max-height: 33.75rem; }*/
/* brand-set */
.brand { opacity: 0; }

/* stats ====================================== */
.stats { position: relative; --logo-main: #fff; --logo-accent: var(--theme-light); }
.stats .container { height: 100%; }
.stats_content { height: 100%; display: flex; flex-direction: column; justify-content: space-around; position: relative; }
.stats_map { width: 65%; max-width: 930px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.stats_map_img { width: 100%; opacity: 0.1; }
.stats_map_maker-1 { left: 21%; top: 51%; --transition-delay: 0s; }
.stats_map_maker-2 { left: 42%; top: 37%; --transition-delay: 0.8s; }
.stats_map_maker-3 { right: 38%; bottom: 46%; --transition-delay: 0.6s; }
.stats_map_maker-4 { right: 30%; top: 17%; --transition-delay: 0.3s; }
.stats_map_maker-5 { left: 34%; bottom: 20%; --transition-delay: 0.4s; }
.stats_map_maker { position: absolute; font-size: 2em; perspective: 5rem; }
.map_maker_icon { transform: translate(-50%,-50%); position: absolute; left: 50%; bottom: 0; animation: stats_map_maker 1.1s var(--transition-delay) cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes stats_map_maker {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    15%     { transform: translate(-50%,-62%) scale(1.04); }
    28%     { transform: translate(-50%,-80%) scale(1.08); }
    43%     { transform: translate(-50%,-65%) scale(1.05); }
    60%     { transform: translate(-50%,-54%) scale(1.02); }
    78%     { transform: translate(-50%,-50%) scale(1); }
}
.map_maker_circle { -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; display: inline-block; transform-style: preserve-3d; transform: rotateX(-60deg); width: 1.5rem; height: 1.5rem; background-color: var(--theme-light); opacity: 0.6; }
.stats_headline { font-size: 5em; font-weight: 600; }
.stats_headline span { color: var(--theme-light); }
.stats_headline .logo_svg { width: auto; height: 1.125em; }
.stats_list { display: flex; gap: 5rem; line-height: 1.4; position: relative; }
.stats_item { font-size: 0.75em; border-top: 2px solid var(--theme); padding-top: 1rem; }
.stats_item:last-child { margin-left: auto; font-size: 1em; text-align: right; padding-top: 0.5rem; }
.stats_number { font-size: 7em; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; }
.stats_number_box { position: relative; }
.stats_number_box span { font-weight: 700; visibility: hidden; height: 0; display: inline-block; user-select: none; pointer-events: none; }
.stats_number_box strong { font-weight: 700; position: absolute; left: 0; top: 0; width: 100%; text-align: right; }
.stats_number small { font-size: 0.625em; margin-left: 0.25em; }
.stats_desc { font-size: 1rem; color: #aaa; font-weight: 400; line-height: 1.6; }
.stats_desc b { color: #fff; }

/* project ====================================== */
.project { position: relative; }
.project_inner { display: flex; width: 165%; height: 100%; }
.project_box-headline { width: 65%; display: flex; justify-content: center; align-items: center; }
.project_headline { font-size: 7em; line-height: 1.3; font-weight: 600; overflow: hidden; -webkit-text-fill-color: rgba(0, 0, 0, 0.1); background-image: linear-gradient(#000, #000); -webkit-background-clip: text; background-repeat: no-repeat; background-size: 0 100%; }
.project_box-intro { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; padding: 0 2.5rem; top: calc(-12.5 * var(--vh)); }
.project_images { display: flex; flex-direction: column; gap: 2.5rem; position: relative; }
.project_images-1 { top: -30%; }
.project_images-2 { top: -70%; }
.project_images-3 { top: -30%; }
.project_images-4 { top: -60%; }
.project_image { width: 100%; padding-top: 140%; background: no-repeat center/cover; position: relative; -webkit-border-radius: 1rem;-moz-border-radius: 1rem;border-radius: 1rem; overflow: hidden; color: #fff; }
.project_link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); display: flex; justify-content: center; align-items: center; transition: 0.3s; }
.project_subject { line-height: 1.4; font-size: 1.875em; font-weight: 500; overflow: hidden; }
.project_subject span { transform: translateY(100%); transition: 0.3s; display: block; }
.project_tag { position: absolute; right: 0; bottom: 0; margin: 1rem; }
.project_tag span { font-size: 0.8125em; border: 1px solid #fff; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; padding: 0.4em 0.625em; line-height: 1; display: inline-block; margin-left: 0.5em; }
.project_link:hover { background-color: rgba(0,0,0,0.6); }
.project_link:hover .project_subject span { transform: translateY(0); }

/* projects ====================================== */
.projects { background-color: #fff; color: #000; }
.projects_list { height: 100%; display: flex; align-items: center; padding: var(--header-h) 1.5rem 0; }
.projects_item { width: 80%; height: 100%; flex-shrink: 0; padding: 2rem 1.5rem; }
.projects_ratio { width: 100%; height: 100%; -webkit-border-radius: 2.5rem;-moz-border-radius: 2.5rem; border-radius: 2rem; overflow: hidden; position: relative; }
.project_img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s; }
.projects_link { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; transition: 0.4s; color: #fff; }
.projects_subject { font-size: 5em; line-height: 1.4; font-weight: 600; overflow: hidden; }
.projects_tag { position: absolute; left: 0; bottom: 0; margin: 3rem; overflow: hidden; padding-top: 0.5em; }
.projects_tag span { border: 1px solid #fff; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; padding: 0.5em 1em; line-height: 1; display: inline-block; margin-left: 1em; }
.projects_item.is-active .projects_link { background-color: rgba(0,0,0,0.3); }
.projects_ratio:hover .project_img { transform: scale(1.2); }

/* partner ====================================== */
.partner { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; color: #000; gap: 1rem; height: auto; padding: 8rem 0; }
.partner_list { width: 130%; margin-left: -5%; display: grid; grid-template-columns: repeat(10,1fr) }
.partner_list:last-child { grid-template-columns: repeat(11,1fr) }
.partner_item { padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: center; }
.partner_item img { width: auto; height: 84%; max-height: 3.25rem; filter: grayscale(1); }

/* media ====================================== */
.media { text-align: center; padding-top: 3rem; position: relative; }
.media_item { padding: 0 1rem; }
.media_ratio { width: 100%; aspect-ratio: 16/9; -webkit-border-radius: 1.25rem;-moz-border-radius: 1.25rem;border-radius: 1.25rem; overflow: hidden;}
.media_ratio iframe { width: 100%; height: 100%; }
.media .swiper-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 1.5em; height: 1.5em; background-color: var(--theme); -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; z-index: 5; cursor: pointer; font-size: 2rem; display: inline-flex; justify-content: center; align-items: center; color: #fff;}
.media .swiper-button-lock { opacity: 0; pointer-events: none; }
.media .swiper-btn-prev { left: 0; }
.media .swiper-btn-next { right: 0; }
.media .swiper-scrollbar { width: 60%; position: static; height: 0.375rem; margin: 1rem auto 0; background-color: #ececec;}
.media .swiper-scrollbar-drag { background-color: var(--theme); }
.media_more { font-size: 1.125em; border: 1px solid #000; -webkit-border-radius: 999px;-moz-border-radius: 999px; border-radius: 999px; padding: 0.875em 1.25em; margin-top: 3rem; font-weight: 500; color: #000; }
.media_more:hover { background-color: var(--theme); border-color: var(--theme); color: #fff; }

/* inquiry ====================================== */
.inquiry { background-color: #000; }
.inquiry_box { width: 100%; background-color: transparent;  }
.inquiry_box-intro { position: relative; background-color: #fff; }
.inquiry_split { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #fff; color: #000; }
.inquiry_split p { font-size: 15vw; font-weight: 600; }
.inquiry_split-1 { clip-path: inset(0 0 calc(50% + 1px) 0); }
.inquiry_split-2 { clip-path: inset(calc(50% - 1px) 0 0 0); position: absolute; top: 0; left: 0; }
.inquiry_box-content { text-align: center; display: flex; justify-content: center; align-items: center; margin-top: calc(30 * var(--vh)); color: #fff; }
.inquiry_sub { font-size: 4em; line-height: 1.3; font-weight: 600; }
.inquiry_move { font-size: 1.25em;  -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; display: inline-flex; gap: 0.5em; font-weight: 600; color: #fff; padding: 1em 1.875em; border: 1px solid #fff; background-color: transparent; margin-top: 5rem;}
.inquiry_move:hover { border-color: #000; background-color: #000; }