.intro {position: fixed;top: 0; left: 0;width: 100vw;height: 100vh;height: calc(var(--vh) * 100);background: #000;background-image: url(/static/img/intro_pc_bg.png);background-repeat: no-repeat;background-position: center;background-size: contain;display: flex;align-items: center;justify-content: center;z-index: 9999;opacity: 1;transition: opacity 1s ease;}
.intro_logo img {width: 390px;opacity: 0;animation: fadeInOut 2.5s ease forwards;}

@keyframes fadeInOut {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.intro.hide {opacity: 0;pointer-events: none;}

.main_top {width: 100%; height: 100vh; height: calc(var(--vh) * 100); background: #000; display: flex; align-items: center; position: relative; overflow: hidden;}
.main_top .key_visual{width: 100%; max-width: 510px;margin-left: 240px;bottom: 200px; position: absolute;}
.main_top .key_visual .tit{color: #BF9E73; font-size: 50px; font-family: 'Escoredream'; font-weight: 800;position: relative; z-index: 9;}
.main_top .key_visual .tit span{opacity: 0;transform: translateY(50px); transition: all; width: 510px; height: 60px; text-align: justify; display: block;margin-bottom: 10px;}
.main_top .key_visual .tit span:after{content: ''; display: inline-block; width: 100%;}
.main_top .key_visual .tit span:last-child{margin-bottom: 0;}
.main_top .key_visual .desc{opacity: 0; transform: translateY(50px); transition: all; color: #F7F0ED; font-size: 24px;font-weight: 400; margin-top: 30px; text-align: left;position: relative; z-index: 9; }
.main_top .scroll-down{position: absolute; bottom:95px; color: #BF9E73; left: 50%; transform: translateX(-50%); font-size: 1rem; font-weight: 400; animation:move 1.5s infinite linear;}

@keyframes move{
    0%,100%{
        transform:translate(-50%,-50%);
    }
    50%{
        transform:translate(-50%,-70%);
    }
}

.main_top .scroll-down::before{content: ''; background: url(/static/img/ico_scroll_down.png) no-repeat; background-size: cover; width: 30px; height: 30px; position: absolute; left: 50%; transform: translateX(-50%); margin-top: -37px;}

.main_ov {position: relative; overflow: hidden;width: 100%;}
.xScroll {display: flex;width: max-content;height: 100dvh;height: calc(var(--vh) * 100);}
.main_ov .container{overflow-x: hidden;}
.main_ov .main_cont {display: flex;align-items: center;min-width: 100vw;height: 100vh;height: calc(var(--vh) * 100); font-size: 1.5rem;font-weight: 700;line-height: 1.4;}
.main_ov .main_cont .xScroll{width: max-content;}
.main_ov .main_cont .cont_item{width:100vw;height: 100dvh; font-size: 3rem; color: #fff; position: relative; padding: 140px 0 0 260px; overflow: hidden;}
.main_ov .main_cont .cont_item.inception{background: #FF5C00;}
.main_ov .main_cont .cont_item.first{background: #1A1A6C;}
.main_ov .main_cont .cont_item.growth{background: #BF9E73;}
.main_ov .main_cont .cont_item.trial{background: #000000;}
.main_ov .main_cont .cont_item.return{background: #F7F0ED;}
.main_ov .main_cont .cont_item .cont_tit{color: #fff; font-size: 60px;}
.main_ov .main_cont .cont_item .cont_tit span{font-size: 40px;}
.main_ov .cont_tit_list{position: absolute;top: 143px; left: 260px; width: 100%}
.main_ov .cont_tit_list div{position: absolute; font-weight: bold; opacity: 0; font-size: 62px;color: #fff;}
.main_ov .cont_tit_list div span{font-size: 38px;}
.main_ov .cont_tit_list div.on{opacity: 1;}
.main_ov .cont_tit_list .tit1961,
.main_ov .cont_tit_list .tit1988
{color: #000;}
.main_ov .cont_tit_list .tit1989{color: #E60012;}
.main_ov .cont_tit_list .tit2025{color: #BF9E73;}
.main_ov .main_cont .cont_item h3{font-size: 24px; margin-top: 90px;}
.main_ov .main_cont .cont_item p{font-size: 18px; font-weight: 300;margin-top: 15px; line-height: 1.4;}
.main_ov .main_cont .cont_item.inception .cont_txt{position: relative; z-index: 9;}
.main_ov .main_cont .cont_item.inception .cont_txt p{width: 600px;}
.main_ov .main_cont .cont_item.inception .cont_txt p br{display: none;}
.main_ov .main_cont .cont_item.inception .cont_img{display: flex; justify-content: right; align-items: baseline;position: absolute; right: 200px; bottom: 30px; gap: 40px; width: 45vw;}
.main_ov .main_cont .cont_item.inception .cont_img img{display: block;}
.main_ov .main_cont .cont_item.inception .cont_img p{margin-top: 10px; max-width: 400px;}
.main_ov .main_cont .cont_item.inception .cont_img p br{display: none;}
.main_ov .main_cont .cont_item.inception .cont_img .mo{display: none;}
.main_ov .main_cont .cont_item.inception .cont_img .pc{display: block; position: relative; bottom: 20px;}

.main_ov .main_cont .cont_item.first .cont_box{display: flex; width: 100%; justify-content: space-between;}
.main_ov .main_cont .cont_item.first .cont_box .lt_cont{position: relative; padding-right: 150px;}
.main_ov .main_cont .cont_item.first .cont_box .lt_cont h3{font-size: 70px;font-family: "neutronic-hangeul-cond-heavy", sans-serif;font-weight: 900;font-style: normal;color: #BF9E73;}
.main_ov .main_cont .cont_item.first .cont_box .lt_cont h3 br{display: none;}
.main_ov .main_cont .cont_item.first .cont_box .lt_cont img{position: absolute; right: 0; max-width: 300px;margin-top: 40px;}
.main_ov .main_cont .cont_item.first .cont_box .rt_cont{position: relative; bottom: 0;margin-top: 80px;}
.main_ov .main_cont .cont_item.first .cont_box .rt_cont .swiper{max-width: 800px;}
.main_ov .main_cont .cont_item.first .cont_box .rt_cont > img{max-height: 170px;margin-left: 200px;}
.main_ov .main_cont .cont_item.first .cont_box .rt_cont .soga_font{color: #BF9E73; font-size: 15px;}
.main_ov .main_cont .cont_item.first .cont_box .rt_cont .swiper .thumb img{width: 100%; object-fit: cover; aspect-ratio: 6 / 9;}

.main_ov .main_cont .cont_item.growth h3{margin-top: 90px;}
.main_ov .main_cont .cont_item.growth .cont_box{display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-right: 200px;}

.main_ov .main_cont .cont_item.growth .cont_box .ct_cont{max-width: 400px;}
.main_ov .main_cont .cont_item.growth .cont_box .lt_cont .soga_font{padding-left: 200px;}
.main_ov .main_cont .cont_item.growth .cont_box .lt_cont .soga_font span{display: block; font-size: 15px; margin-top: -7px;}
.main_ov .main_cont .cont_item.growth .cont_box .lt_cont .soga_font:last-child{margin-top: 10px;}
.main_ov .main_cont .cont_item.growth .cont_box .ct_cont img{display: block; width: 100%;}
.main_ov .main_cont .cont_item.growth .cont_box .ct_cont span{display: block;}
.main_ov .main_cont .cont_item.growth .cont_box .rt_cont{max-width: 400px;}
.main_ov .main_cont .cont_item.growth .cont_box .rt_cont img{display: block; width: 100%;}
.main_ov .main_cont .cont_item.growth .soga_font {color: #81694B;}
.main_ov .main_cont .cont_item.growth .rt_cont h3{margin-top: 10px;}

.main_ov .main_cont .cont_item.trial{width: 3600px; color: #E60012;}
.main_ov .main_cont .cont_item.trial .cont_box{align-items: normal; display: flex; justify-content: space-between; margin-top: 100px;}
.main_ov .main_cont .cont_item.trial .cont_box h3{font-size: 24px; margin-top: 10px;}
.main_ov .main_cont .cont_item.trial .cont_box .lt_cont{text-align: left; margin-top: 100px; position: relative;}
.main_ov .main_cont .cont_item.trial .cont_box .lt_cont::after{content: ''; background: url('/static/img/trial_img01_pc.png') no-repeat; width: 100%;max-width: 530px;background-size: cover;height: 69px;position: absolute;top: -92px;left: 0;}
.main_ov .main_cont .cont_item.trial .cont_box .lt_cont p{ margin-bottom: 50px;}
.main_ov .main_cont .cont_item.trial .cont_box .lt_cont img{padding-left: 200px;}
.main_ov .main_cont .cont_item.trial .cont_box .ct_cont{position: relative;}
.main_ov .main_cont .cont_item.trial .cont_box .ct_cont img{scale: 1.2; position: relative; left: 180px;top: -170px; height: 47vh;height: calc(var(--vh) * 47);}
.main_ov .main_cont .cont_item.trial .cont_box .rt_cont{display: flex; margin-top: 120px; align-items: center;  flex-direction: column;  text-align: center;color: #BF9E73; padding-left: 600px; padding-right: 600px;}
.main_ov .main_cont .cont_item.trial .cont_box .rt_cont h3{font-size:70px; font-family: "neutronic-hangeul-cond-heavy", sans-serif; font-style: normal; font-weight: 900;  color: #BF9E73; }
.main_ov .main_cont .cont_item.trial .cont_box .rt_cont h3 br{display: none;}
.main_ov .main_cont .cont_item.trial .cont_box .rt_cont p{font-weight: 500; font-size: 20px;}
.main_ov .main_cont .cont_item.trial .cont_box .rt_cont p span{font-size: 18px; display: block;margin: 10px 0 50px 0; font-weight: 300;}
.main_ov .main_cont .cont_item.trial .cont_box .rt_cont > span{font-size: 26px; color: #fff; display: block;}
.main_ov .main_cont .cont_item.trial .cont_box .ct_cont .innocence{width: 230px; height: 120px;position: absolute;top: 532px; left: 256px; background-size: contain;opacity: 0; transform: translate(-80px, -50px) rotate(8deg); transition: none;}

.main_ov .main_cont .cont_item.return{padding-right: 260px;}
.main_ov .main_cont .cont_item.return h3{color: #FF5C00;margin-top: 0;}
.main_ov .main_cont .cont_item.return p{color: #BF9E73;}
.main_ov .main_cont .cont_item.return p br{display: none;}
.main_ov .main_cont .cont_item.return p br.pc_on{display: block;}
.main_ov .main_cont .cont_item.return .top_cont{display: flex; gap: 100px; margin-top: 100px;}
.main_ov .main_cont .cont_item.return .return_pc{color: #BF9E73; font-size: 18px; font-weight: 300;margin-top: 120px;margin-left: 200px;}
.main_ov .main_cont .cont_item.return .top_cont > div{width: 50%;}
.main_ov .main_cont .cont_item.return .top_cont img{max-height: 700px; object-fit: cover;}
.main_ov .main_cont .cont_item.return .cont_box h3{font-family: "Escoredream";font-weight: 900;}
/* .main_ov .main_cont .cont_item.return .cont_box .top_cont img{opacity: 1;} */

.soga_font{font-family: "zw-songganggasa", sans-serif; font-weight: 400; font-size: 16px; font-style: normal; }


.main_ov .year{ position: absolute;bottom: 50px; left: 260px; gap: 40px; font-size: 2rem; font-weight: 400; color: #fff; display: flex; justify-content: space-between; flex-direction: column;}
.main_ov .year span{margin-left: 15px; opacity: 0.35; cursor: pointer; font-size: 20px; transition: color 0.3s;}
.main_ov .year span.m-r{padding-right: 260px;}
.main_ov .year span.dark_bg{color: #000;}
.main_ov .year .last_year.on1{font-weight:400; opacity: 0.35;}
.main_ov .year .last_year.on1 + .last_year{font-weight: bold; opacity: 1;}
.main_ov .year span:nth-of-type(4).on1 ~ div:nth-of-type(1) > div{background-color: #BF9E73;}

.main_ov .year .progress{ position: absolute; bottom: 0; left: 0; width: 1px; height: 100%; background-color:rgba(255,255,255, 0.2);}
.main_ov .year .progress .progress_bar{width: 0%; height: 100%; background-color: #fff;}
.main_ov .year .on{font-weight: bold; opacity: 1;}
.main_ov .year:has(span[data-year="2025"].on) span {color: #BF9E73;}

.main_dt{background: #F7F0ED; padding: 150px 0;}
.main_dt .inner{display: flex;align-items: end; justify-content:space-around;}
.main_dt .txt{color: #BF9E73; text-align: center;margin-bottom: 50px;font-weight: 400; line-height: 1.4; display: none;}
.main_dt .img{text-align: center;}
.main_dt .return_cont{margin-bottom: 80px; width: 40%;}
.main_dt .return_cont li{font-size: 22px; display: flex; align-items: center;justify-content: space-between;position: relative; padding: 34px 0 27px;padding-right: 20px;}
.main_dt .return_cont li:last-child{margin-bottom:0;padding-bottom: 34px;}
.main_dt .return_cont li:last-child::after{content: '';background: url('/static/img/return_bar.png') no-repeat; width: 100%; height: 7px;position: absolute;bottom: 0;background-size: cover;}
.main_dt .return_cont li::before{content: '';background: url('/static/img/return_bar.png') no-repeat; width: 100%; height: 7px;position: absolute;top: 0; background-size: cover;}
.main_dt .return_cont li div:first-child{color: #CCA16B;font-family: 'Escoredream'; padding-left: 20px;}

.pc_main_hs{height: 100vh; height: calc(var(--vh) * 100); width: 100%; overflow: hidden;padding-top: 120px; position: relative;}
/* .main_hs .container{height: 100%;} */
.pc_main_hs .pc_history .pc_hs_tit {font-size: 22px;font-weight:400;color: #BF9E73; text-align: left;position: sticky; left: 50%;top: 0; background-color: #F7F0ED;}
.pc_main_hs .pc_history .pc_hs_tit span{display: block; font-size: 54px; font-family: 'Escoredream';font-weight: 900;margin-top: 75px; padding-bottom: 45px;}
.pc_main_hs .pc_history .pc_hs_wrap{width:100%;position: relative;}
.pc_main_hs .container{position: relative;}
.pc_main_hs .container::after{content: '';width: 100%;height: 1px;background: #BF9E73;position: absolute;bottom: 95px;}
.pc_main_hs .pc_history .pc_hs_wrap .cont_item img{max-width: 220px;}
.pc_main_hs .pc_history .pc_hs_item{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;width: 25%;}
.pc_main_hs .pc_history .pc_hs_item div{margin-top: 35px;padding-top:33px;text-align: center; color: #BF9E73; font-size: 50px; position: relative; font-family: "Escoredream";}
.pc_main_hs .pc_history .pc_hs_item div::before{content: '';width: 10px;height: 10px;border-radius: 10px;background: #BF9E73;position: absolute;left: 50%;transform: translateX(-50%);top: -4px;}
.pc_main_hs .pc_history .pc_hs_item img{min-height: 280px; object-fit: contain;}
.pc_main_hs .pc_history .pc_hs_item.w-254 img{max-width: 254px;}
.pc_main_hs .pc_main_hs{padding-top: 0; height: 100%; overflow: inherit; position: relative;}
.pc_main_hs .pc_hs_cont{position: relative;}
.pc_main_hs .pc_history .pc_hs_progress_wrap{position: absolute; bottom: -30px; width: 100%; height: 4px; background: #eee;}
.pc_main_hs .pc_history .pc_hs_progress_wrap .pc_hs_progress_bar{width: 0%; height: 100%; background-color: #000;}

.after_pc_hs_space {
  width: 100%;
  height: 0;
}

.after_mobile_hs_space {
    display: none;
    opacity: 0;
}


.pc_hs_year::before{content: ''; width: 100%; height: 1px; background: #BF9E73; position: absolute;}
.pc_hs_year::after{content: ''; width: 10px; height: 10px; border-radius: 10px; background: #BF9E73 ; position: absolute;left: 50%; transform: translateX(-50%);top: -4px;}
.pc_hs_year div{ padding: 10px; width: 100%;text-align: center; color: #BF9E73; font-size: 50px;}
.pc_hs_year div.on{opacity: 1;}
.pc_hs_year span { transition: color 0.3s, font-weight 0.3s;}
.pc_hs_year span.active { color: #BF9E73;font-weight: 700;}
.pc_hs_item.active .pc_hs_year { color: #BF9E73; opacity: 1;transform: scale(1.05); }
.pc_hs_progress_area { position: absolute; bottom: 0; left: 50%;transform: translateX(-50%);width: 90%; height: 2px;display:flex;justify-content: space-between;align-items: center;z-index: 20;}
.pc_hs_segment {position: relative; flex: 1; height: 4px; background: rgba(0,0,0,0.1); }
.pc_hs_segment_fill {position: absolute; top: 0; left: 0; height: 100%;width: 0%; background: #BF9E73; transition: width 0.2s linear;}
.pc_hs_segment.active:last-child .pc_hs_segment_fill::after{content: '';width: 10px;height: 10px;background-color:#BF9E73 ;position: absolute;right: 0;}
.pc_hs_segment_year {position: absolute;top: -35px;left: 50%;transform: translateX(-50%); font-size: 16px;color: #aaa;font-weight: 500;transition: color 0.3s ease, transform 0.3s ease; white-space: nowrap;}
.pc_hs_segment .pc_hs_segment_year { display: none; color: #BF9E73;  transform: translateX(-50%) scale(1.2); font-weight: 700; }
.pc_main_hs { position: relative; width: 100%; }
.pc_main_hs .pc_hs_tit {font-family: 'Escoredream'; position: relative; top: 0; background: #fff; z-index: 10; font-size: 20px; margin-bottom: 20px; padding: 10px 0; }
.pc_main_hs .pc_hs_tit div{opacity: 0; position: absolute;transition: none; top: 0; left: 0;}
.pc_hs_tit > div:last-child{transition: opacity 0.4s ease;}
.pc_main_hs .pc_hs_tit div.on{opacity: 1;position: relative; font-family: "gotham", sans-serif;}
.pc_main_hs .pc_hs_tit .pc_hs_tit_last{color: #fff; font-weight: bold;}
.pc_main_hs .pc_hs_tit .pc_hs_tit_last .txt{color: #BF9E73; font-family: "gotham", sans-serif;}
.pc_main_hs .pc_hs_tit .pc_hs_tit_last .new_badge{height: auto; background: #FF5C00;display: inline-block; position: absolute; min-width: 95px; margin-top: -90px; left: 294px; font-size: 20px; padding: 6px 16px; border-radius: 20px;}
.pc_main_hs .pc_hs_tit .pc_hs_tit_last .btn{display: flex; flex-direction: column; margin-top: -45px; padding: 20px 0; font-size: 16px; font-weight: 300;}
.pc_main_hs .pc_hs_tit .pc_hs_tit_last .bot_btn{position: absolute; margin-top: 0; width: auto;}
.pc_main_hs .pc_hs_tit .pc_hs_tit_last .bot_btn a{height: 45px; width: 250px; font-family: 'Pretendard';}
.pc_main_hs .pc_hsScroll { display: flex; }
.pc_main_hs .pc_hs_item { position: relative; }
.pc_main_hs .pc_hs_item img { display: block; max-width: 300px; }
.pc_main_hs .pc_hs_item .hs_year{font-family: "Escoredream"; font-weight: 400;}
.pc_main_hs .pc_hs_item.active .hs_year { color: #BF9E73; font-weight: 400; transform: translateX(-50%) scale(1.1); }
.pc_main_hs .pc_hs_progress_area { position: relative; margin-top: 20px; }
.pc_main_hs .pc_hs_progress_bar { position: relative; width: 100%; height: 4px; background: rgba(0,0,0,0.1); border-radius: 2px; }
.pc_main_hs .pc_hs_fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #BF9E73; border-radius: 2px; }
.pc_main_hs .pc_hs_progress_circle { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #BF9E73; transform: translate(-50%, -50%); transition: left 0.1s linear; }
.pc_main_hs .pc_hs_year_labels { display: none; justify-content: space-between; margin-top: 8px; font-size: 14px; color: #999; }
.pc_main_hs .pc_hs_year_labels span.active { color: #BF9E73; font-weight: 700;}
.pc_hs_year{position: absolute; left: 50%; transform: translateX(-50%); width: 100%;margin-top: 20px;}



.pc_main_hs{display: block;}
.main_hs.mo_hs{display: none;}

.pc_hs_item { flex: 0 0 auto; transform-origin: center center; }
.pc_hs_item img {width: 100%;display: block; }

.pc_main_hs .pc_history .pc_hs_item img{ max-width: 200px;height: inherit;}
.pc_main_hs .pc_history .pc_hs_item:last-child{padding-right: 50px;}
.pc_main_hs .pc_history .pc_hsScroll{gap: 20px;align-items: center;box-sizing: content-box; display: flex; flex-wrap: nowrap;}

.bot_btn{display: none;}
.bot_btn .btn{width: 100%; margin-top: 120px; gap: 20px; flex-direction: column;padding: 30px;}
.bot_btn .btn a{width: 100%; border-radius: 100px; background: #BF9E73;height: 62px;color: #fff;display: flex; align-items: center;justify-content: center;font-size: 1.25rem;}
.bot_btn .btn a.gray{background: #585858;}
.bot_btn .btn a::after{content: ''; background: url('/static/img/ico_arrow.png') no-repeat; width: 32px; height: 8px; position: relative;margin-left: 20px;}

.floating_top {position: fixed;right: 20px;bottom: 62px;width: 48px;height: 48px;border-radius: 50%;border: none;background: #F7F0ED;font-size: 22px;font-weight: bold;cursor: pointer;opacity: 0;visibility: hidden;z-index: 999;}
.floating_top.show {opacity: 1;visibility: visible;}

.btn.main_ov_btn{display: none;}
.mo_slide{display: none;}

.mute{
    position: absolute;
    width: 95%;
    margin: 0 auto;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.mute_btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url('/static/img/ico_sound_off.png') no-repeat;
    background-size: cover;
    background-position: center;
    border: none;
    padding: 0;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
}
.mo_mute{
    position: absolute;
    top: 60px;
    right: 15px;
}

.mute_btn.on {
    background: url('/static/img/ico_sound_on.png') no-repeat;
    background-size: cover;
    background-position: center;
    border: none;
    padding: 0;
}
