@charset "utf-8";
@import url('./layout-2026.css?v=20260930-layout-cover');

/* *********************************
	main
********************************* */
body { overflow:visible; }
.wrap { overflow:visible; }
.main_wrap { position:relative; overflow-x:clip; background:#000; }

/* common */
.btn_blu { display:inline-block; padding:0 25px; height:60px; line-height:60px; font-size:22px; color:var(--white); font-weight:var(--pr_smb); border:1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.14); box-sizing:border-box;}
    .btn_blu:after { content:""; display:inline-block; margin-left:25px; width:28px; height:4px; vertical-align:super; background:url('../images/common/btn_blu.svg') no-repeat; }
    .main_wrap .btn_blu { margin-top:40px; }
.motion img { position:absolute; }

/* ******* content ******* */
.main_wrap .bg_video { position:relative; overflow:hidden; width:100%; height:100vh; min-height:800px; }
.main_wrap .bg_video video { position:absolute; top:0; left:0; width:100%; height:100%; min-width:100%; min-height:100%; object-fit:cover; object-position:bottom center; }

.btn_enter { opacity:0; visibility:hidden; position:absolute; right:0px; bottom:0px; padding:0 35px; height:68px; line-height:68px; font-size:24px; color:var(--white); font-weight:var(--pr_smb); border:1px solid rgba(255, 255, 255, 0.06); background:var(--gold01); box-sizing:border-box;}
    .btn_enter.fixed { position:fixed; }
    .btn_enter:after { content:""; display:inline-block; margin-left:25px; width:28px; height:4px; vertical-align:super; background:url('../images/common/btn_blu.svg') no-repeat; }
        .btn_enter { transition:opacity .4s ease,visibility .4s ease; }
        .btn_enter.current { opacity:1; visibility:visible; }

/* sec01 : HERO */
.main_wrap .sec01 { overflow:hidden; position:relative; min-height:650px; height:100vh; height:100svh;  background:#272727; }
.main_wrap .sec01 .inner { z-index:3; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:1068px; text-align:center; }
 
    .sec01 .num_area { position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; transform:translateY(100%); }
        .sec01 .num_area .year_line { position:absolute; top:50%; left:50%; transform:translateX(-62%); display:inline-block; max-width:200px; width:0; height:2px; background:var(--white); opacity:0.4; transform-origin:center; transition:width 3s ease-out; }
        .sec01 .year_txt { display:flex; height:172px; }
            .sec01 .year_txt:first-child { transform:translateX(360px); transition:transform 1.2s ease; }
        .sec01 .year_chagne { visibility:hidden; opacity:0; transform:translateX(-360px); transition:transform 1.2s ease, opacity .4s ease .1s, visibility .3s ease .1s; }

        .sec01 .year_txt .year_digit { margin-left:-12px; }
        .sec01 .year_txt .year_digit:first-child { margin-left:0; }
        .sec01 .num_area .year_digit { overflow:hidden; }
            .sec01 .year_txt .year_digit,
            .sec01 .year_txt .year_track,
            .sec01 .year_txt .year_track i { display:block; height:172px; line-height:172px; font-style:normal; }
            .sec01 .year_txt span,
            .sec01 .year_txt .year_digit,
            .sec01 .year_txt .year_track i { font-family:var(--font-v); font-size:172px; color:var(--white); line-height:172px; }
        .sec01 .year_txt span:first-child { margin-right:7px; }

        /* currnet action */
        .sec01.current .year_txt:first-child { transform:translateX(0); }
        .sec01.current .year_chagne { visibility:visible; opacity:1; transform:translateX(0); }
        .sec01.current .num_area .year_line { width:100%; transition:width 3s ease-out; transition-delay:0.5s; }
        .sec01.current .num_area { transform:translateY(0); transition:transform 1.2s cubic-bezier(0.22,1,0.36,1); transition-delay:4s; }

    .sec01 h2,
    .sec01 p,
    .sec01 a { opacity:0; }
    .sec01 h2 { margin-top:30px; font-size:36px; color:var(--white); }
    .sec01 h2 strong { font-size:36px; color:var(--white); font-weight:var(--pr_smb); }
    .sec01 h2 strong .pc_blo { display:inline-block; font-size:36px; color:var(--white); font-weight:var(--pr_smb); }
    .sec01 p { margin-top:15px; font-size:26px; color:var(--white); word-break:keep-all; }
    .sec01 .scroll_area { z-index:3; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; padding-bottom:70px; color:var(--white); font-size:20px; font-weight:var(--pr_li); }
    .sec01 .scroll_area span { position:absolute; bottom:0px; left:50%; transform:translateX(-50%); display:inline-block; overflow:hidden; width:1px; height:60px; background:rgba(255,255,255,0.2); box-sizing:border-box; }
    .sec01 .scroll_area span:before { content:''; position:absolute; top:0; left:0; width:100%; height:60%; background:#fff; opacity:1; animation:scroll_bar 1.5s ease-in-out infinite alternate; }
    @keyframes scroll_bar {
        0% { transform:translateY(0); }
        100% { transform:translateY(65%); }
    }
    .sec01 .bg_video:before { content:""; z-index:3; position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('../images/main/bg_sec01.png') center repeat; background-size:cover; /*mix-blend-mode:screen;*/ }

/* sec02 : FOUNDER STORY */
.main_wrap .sec02_scroll { position:relative; height:calc(100vh + 2000px); }
.main_wrap .sec02 { --line_x:0%; --line_y:0%; overflow:hidden; position:sticky; top:0; height:100vh; min-height:0; background:url('../images/main/bg_sec0202_pc.png') center; background-size:cover; }

.main_wrap .sec02 .con01,
.main_wrap .sec02 .con02 { position:absolute; top:0; left:0; width:100%; height:100%; visibility:hidden; }

.main_wrap .sec02 .con01 { visibility:hidden; isolation:isolate; background:#fff url('../images/main/bg_sec0201.png') center; background-size:cover; }
.main_wrap .sec02:before { content:''; position:absolute; top:50%; left:0%; z-index:1; width:var(--line_x); height:1px; background:rgba(255,255,255,0.05); transform:translate(0,-50%); pointer-events:none; }
.main_wrap .sec02:after { content:''; position:absolute; top:0%; left:50%; z-index:1; width:1px; height:var(--line_y); background:rgba(255,255,255,0.05); transform:translate(-50%,0); pointer-events:none; }
.main_wrap .sec02 .con01 .inner { position:absolute; top:50%; left:50%; z-index:2; transform:translate(-50%,-50%); max-width:879px; width:100%; text-align:center; }
/*.main_wrap .sec02 .con01 .inner { z-index:2; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:879px; width:100%; text-align:center; }*/
    .sec02 .letter_area { padding:0 60px; height:520px; background:url('../images/main/sec02_letter_pc.png') center no-repeat; background-size:cover; box-sizing:border-box; }
    .sec02 .letter_area p { position:relative; top:50%; transform:translateY(-50%); font-family:var(--font-k); font-size:22px; color:var(--txt01); line-height:1.8; }
    .sec02 .letter_area p strong { display:block; margin-top:15px; font-family:var(--font-k); color:var(--txt01); font-size:24px; font-weight:700; }
    .sec02 .quote_txt { margin-top:15px; color:var(--gray01); }

.main_wrap .sec02 .con02 { z-index:2; }
.main_wrap .sec02 .con02 .inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
    .sec02 h2 { font-size:42px; color:var(--white); font-weight:var(--pr_b); }
    .sec02 h2 span { display:block; margin-bottom:10px; font-size:20px; color:var(--gold01); font-weight:var(--pr_b); }
    .sec02 p { margin:30px 0 0; font-size:22px; color:var(--gray01); }
    .sec02 .img01 { right:0%; top:-11%; max-width:690px; width:50vw; }
    .sec02 .img02 { z-index:2; right:-1%; bottom:-12%; max-width:156px; width:25vw; }
    .sec02 .img03 { z-index:1; right:9%; bottom:-21%; max-width:210px; width:45vw; }

/* sec03 : 100 YEAR HISTORY */
.main_wrap .sec03_scroll { position:relative; height:calc(100vh + 2500px); }
.main_wrap .sec03 { position:sticky; top:0; width:100%; height:100vh; min-height:0; overflow:hidden; }
.main_wrap .sec03 .con01 { position:absolute; top:0; left:0; width:100%; height:100%; }
.main_wrap .sec03 .con02 { position:absolute; top:0; left:0; width:100%; height:100%; background:#4D4D4D url('../images/main/bg_sec0302.png') center no-repeat; background-size:cover; }

    .sec03 .bg_video:before { content:""; z-index:3; position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('../images/main/bg_sec0301.png') center repeat; background-size:cover; mix-blend-mode:screen; opacity:0.8; }
    .sec03 .con01 h2 { z-index:4; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; font-size:60px; font-weight:var(--pr_b); line-height:1.4; }
        .sec03 .con01 h2 { color:var(--txt01); }
        .sec03 .con01 h2 span { font-size:60px; font-weight:var(--pr_b); color:var(--gold01); }
    .sec03 .con02 { background:#4D4D4D url('../images/main/bg_sec0302.png') center no-repeat; background-size:cover; width:100%; height:100%; }
        .sec03 .con02 .inner { z-index:2; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; text-align:center; }   
        .sec03 .con02 p,
        .sec03 .con02 p strong { font-size:52px; color:var(--white); font-weight:var(--pr_li); line-height:1.4; }
        .sec03 .con02 p strong { display:block; font-weight:var(--pr_smb); }
        @keyframes float {
            0% { margin-top:0; }
            50% { margin-top:-2%; }
            100% { margin-top:0; }
        }
        .sec03 .con02 .gallery img { position: absolute; }
            .sec03 .gallery .gall01 { top:-5%; left:30%; max-width:255px; width:13vw; /* animation:float 3.5s ease-in-out infinite; animation-delay:0.2s;*/ }
            .sec03 .gallery .gall02 { top:15%; right:20%; max-width:372px; width:18vw; /* animation:float 3.5s ease-in-out infinite; animation-delay:1.2s; */ }
            .sec03 .gallery .gall03 { top:38%; right:-8%; max-width:375px; width:18vw; /* animation:float 3.5s ease-in-out infinite; animation-delay:0.8s; */ }
            .sec03 .gallery .gall04 { top:67%; right:23%; max-width:336px; width:15vw; /* animation:float 3.5s ease-in-out infinite; animation-delay:0.2s; */ }
            .sec03 .gallery .gall05 { top:72%; left:35%; max-width:202px; width:10vw; /* animation:float 3.5s ease-in-out infinite; animation-delay:0.4s; */ }
            .sec03 .gallery .gall06 { top:57%; left:15%; max-width:276px; width:11vw; /* animation:float 3.5s ease-in-out infinite; animation-delay:0.2s; */ }
            .sec03 .gallery .gall07 { top:17%; left:-5%; max-width:424px; width:25vw; /* animation:float 3.5s ease-in-out infinite; animation-delay:0.6s; */ }
       
@media (max-width:850px) {
    
    .btn_blu { padding:0 20px; height:48px; line-height:48px; font-size:16px; }
    .btn_blu:after { vertical-align:middle; margin-left:10px; width:18px; background-size:100% auto; }

    .btn_enter { padding:0 15px; height:40px; line-height:40px; font-size:14px; }
    .btn_enter:after { vertical-align:middle; margin-left:10px; width:18px; background-size:100% auto; }
    
    /* ******* main ******* */
    .main_wrap .bg_video { width:100%; min-height:100vh; min-height:100svh;}

    .main_wrap .sec01 { min-height:100vh; min-height:100svh;height:100vh; height:100dvh; }
        .sec01 .num_area { position:absolute; top:0; height:250px; flex-direction:column; transform:translateY(0); } /* top:10% */
        .sec01 .num_area .year_line { transform:translate(-50%,-50%); max-width:none; max-height:50px; width:1px; height:0; transition:height 1.2s ease; }
        .sec01 .year_txt { height:80px; }
            .sec01 .year_txt:first-child { transform:translateY(85px); }
        .sec01 .year_chagne { transform:translateY(-85px); }

        .sec01 .year_txt .year_digit { margin-left:-8px; }
            .sec01 .year_txt .year_digit,
            .sec01 .year_txt .year_track,
            .sec01 .year_txt .year_track i { height:80px; line-height:80px; }
            .sec01 .year_txt span,
            .sec01 .year_txt .year_digit,
            .sec01 .year_txt .year_track i { font-size:82px; line-height:82px; }
        .sec01 .year_txt span:first-child { margin-right:3px; }
        /* current */
        .sec01.current .year_txt:first-child { transform:translateY(0); }
        .sec01.current .year_chagne { transform:translateY(0); }
        .sec01.current .num_area .year_line { width:1px; height:100%; transition:height 3s ease-out; transition-delay:0.5s;}
        
    .sec01 h2 { margin:0 30px 10px; font-size:33px; }
    .sec01 h2 strong .pc_blo { display:none; }
    .sec01 p { margin:0 50px; font-size:20px; }
    .sec01 .scroll_area { font-size:14px; }
        
    .main_wrap .sec02_scroll { height:calc(100dvh + 2500px); }
    .main_wrap .sec02 { min-height:100vh; min-height:100svh;height:100vh; height:100dvh; }
        .sec02 .letter_area { margin:0 auto; padding:0px; max-width:360px; width:100%; height:395px; background:url('../images/main/sec02_letter_mo.png') center no-repeat; }
        .sec02 .letter_area p { margin:0 auto; width:250px; font-size:14px; word-break:keep-all; }
        .sec02 .letter_area p strong { font-size:14px;}
        .sec02 .quote_txt { margin:0px auto; width:250px;font-size:14px; word-break:keep-all; } 

        .main_wrap .sec02 { background:url('../images/main/bg_sec0202_mo.png') center; background-size:cover; }
        .main_wrap .sec02 .con02 .inner { top:45%; padding:0 20px 50vw; box-sizing:border-box; }
        .sec02 h2 { font-size:24px; }
        .sec02 h2 span { margin-bottom:8px; font-size:16px; }
        .sec02 p { margin-top:18px; font-size:16px; }
        .sec02 .img01,
        .sec02 .img02,
        .sec02 .img03 { display:none; }

    .main_wrap .sec03_scroll { height:calc(100dvh + 2500px); }
    .main_wrap .sec03 { height:100vh; height:100dvh; }
    .main_wrap .sec03 .con01 { height:100%; }
    .main_wrap .sec03 .con02 { height:100%; }
        .sec03 .con01 h2,
        .sec03 .con01 h2 span { font-size:30px; }
        .sec03 .con01 h2 { transform:translate(-50%, -100%) !important; }
        .sec03 .con02 p, 
        .sec03 .con02 p strong { font-size:28px; }
        .main_wrap .btn_blu { margin-top:25px; }

        .sec03 .gallery .gall01 { top:-1%; left:19%; width:24vw; }
        .sec03 .gallery .gall02 { top:7%; right:7%; width:32vw; }
        .sec03 .gallery .gall03 { top:38%; right:-8%; width:33vw; }
        .sec03 .gallery .gall04 { top:67%; right:-1%; width:42vw; }
        .sec03 .gallery .gall05 { top:91%; left:39%; width:22vw; }
        .sec03 .gallery .gall06 { top:74%; left:4%; width:29vw; }
        .sec03 .gallery .gall07 { top:17%; left:-5%; }

}