@charset "UTF-8";
/*전역 변수*/
:root{
    --font-sans: "Noto Sans KR";
    --color00:#ffffff;
    --color01:#FF002E;
    --color02:#181515;
    --container-width:1440px;
    --container-padding:40px;
    --fix-button-height: 70px;
}
body{font-family: var(--font-sans) , sans-serif;}
.wrap{width: 100%;overflow: clip;height: 100vh;overflow-y: auto;overflow-x: hidden}
br.mo{display: none;}
br.pc{display: inline;}
.container{width: 100%;max-width:var(--container-width); margin: 0 auto;}
.header-site{position: fixed;width: 100%;display: flex;align-items: center;justify-content: flex-start;padding: 1.875rem 7.5rem;z-index: 10;}
.header-site .fix-logo{display: block;width: 13.75rem;height: auto;}
.header-site .fix-logo > img{display: block;width: 100%;}

.section-hero{position: relative;height: 100vh;overflow: hidden;}
.section-hero .hero-bg{width: 100%;height: 100%;}
.section-hero .hero-bg  img{display: block;width: 100%;height: 100%;object-fit: cover;object-position: center;}
.section-hero .text-box{position: absolute;    bottom: 40.8%;right: 5.6%;display: flex;flex-direction: column;align-items: flex-end;}
.section-hero .text-box h1{font-weight: 700;font-size: 3.96vw;line-height: 120%;letter-spacing: -0.04em;color: var(--color00);}
.section-hero .button-box{position: absolute;bottom: 7%;right: 8.33%;}
.section-hero .line-button{width: 290px;height: 69px;display: flex;justify-content: center;align-items: center;border-bottom:7px solid;background-color: var(--color00);border-color: var(--color01);color: var(--color01);font-weight: 700;font-size: 30px;line-height: 100%;letter-spacing: 0;text-align: center; transition: background-color 0.2s, color 0.2s; }
@media (hover: hover) { .section-hero .line-button:hover { background-color: var(--color01); color: var(--color00); } }

.section-001{background-image: url("../images/bg-section001.jpg");background-position: top center;background-size: cover;padding:110px 0 140px;position: relative;height: 100vh;display: flex;flex-direction: column;justify-content: center;}
.section-001 .video-wrapper {padding: 0 var(--container-padding);margin: 0 auto;display: flex;justify-content: center;}
.section-001 .video-inner {position: relative;width: 860px;height: auto;aspect-ratio: 16 / 9;box-shadow: 0 0 20px 0 #000000CC;}
.section-001 #yt-player {display: block;width: 100%;height: 100%;pointer-events: none;}
.section-001 #yt-player iframe {width: 100%;height: 100%;border: 0;display: block;}

.section-001 .video-wrapper .btn_sound {position: absolute;top: 10px;right: 20px;z-index: 10;width: 50px;aspect-ratio: 5 / 5;border: none;outline: 0;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);transform: translateY(100%);}
.section-001 .video-wrapper .blind {overflow: hidden;position: absolute;clip: rect(0, 0, 0, 0);width: 1px;height: 1px;margin: -1px;}
.section-001 .video-wrapper .btn_sound::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 0;display: block;width: 80%;height: 80%;background: url("../images/sound_sprites@2x.png") no-repeat left center;background-size: auto 100%;pointer-events: none;}
.section-001 .video-wrapper .btn_sound.mute::after {background-position: right center;}


.section-001 .text-box{display: flex;align-items: flex-end;gap: 20px;max-width: 1200px;margin:50px auto 0; padding:0 var(--container-padding);}
.section-001 .text-box .left{flex-shrink: 0;}
.section-001 .text-box .right{flex-shrink: 0;text-align: right;}
.section-001 .text-box p{font-weight: 700;font-size: 40px;line-height: 1.2;letter-spacing: -0.04em;color: var(--color00);}
.section-001 .text-box .bar{flex: 1;margin-bottom: 22px;height: 2px;background-color:#FF002E;}
.section-001 .fix-button{position: absolute;bottom:0;left: 0;width: 100%;}
.section-001 .fix-button.is-fixed{position: fixed;bottom:0;left: 0;width: 100%;z-index: 100;}
.section-001 .fix-button .button{display: flex;width: 100%;height: var(--fix-button-height);background-color: var(--color01);color:var(--color00);justify-content: center;align-items: center;font-weight: 700;font-size: 34px;line-height: 100%;letter-spacing: 0;text-align: center;}

.section-002 {background-color: #000;color: #fff;display: grid;grid-template-columns: 481fr 420fr 539fr;grid-template-areas:"top  top  top""img1 img2 img3""bot  bot  bot";padding:100px 0 ;}
.section-002 .red { color: #e3000f; }
.section-002 .top-text {grid-area: top;padding: 0 160px 40px;text-align: left;}
.section-002 .bottom-text {grid-area: bot;padding: 60px 120px 0;display: flex;justify-content: flex-end;}
.section-002 .bottom-text .text-inner {text-align: left;}
.section-002 .img-box { overflow: hidden; line-height: 0; }
.section-002 .img-box img {width: 100%;object-fit: cover;display: block;}
.section-002 .img-box--1 { grid-area: img1; aspect-ratio: 481 / 395;}
.section-002 .img-box--2 { grid-area: img2; aspect-ratio: 420 / 395; }
.section-002 .img-box--3 { grid-area: img3; aspect-ratio: 539 / 395;}
.section-002 .heading {font-size: 42px;font-weight: 800;line-height: 1.35;margin-bottom: 28px;letter-spacing: -0.02em;word-break: keep-all;}
.section-002 .desc {font-weight: 400;font-style: normal;font-size: 22px;line-height: 145%;letter-spacing: -0.02em;color: rgba(255, 255, 255, 0.8);white-space: nowrap;}
.section-002 .desc strong { font-weight: 700; }


/* ===== SECTION 003 ===== */
.section-003 { background-color: #262626; background-image: url("../images/bg-section003.jpg"); background-position: center bottom; background-size: cover; background-repeat: no-repeat; color: var(--color00); overflow: clip;padding: 80px 0 116px;}
.section-003 .container { max-width: 1220px;padding: 0 50px;}
.section-003 .red { color: var(--color01); }
.section-003 .tit { font-weight: 800; font-size: clamp(1.5rem, 2.92vw, 2.625rem); line-height: 1.4; letter-spacing: -0.02em;margin-bottom: 40px; word-break: keep-all; }
.section-003 .card { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; }
.section-003 .card .img-price { overflow: hidden; border-radius: 10px; }
.section-003 .card .img-box { line-height: 0; }
.section-003 .card .img-box img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.4s ease; }
.section-003 .card:hover .img-box img { transform: scale(1.04); }
.section-003 .card .price { background-color: var(--color01); color: var(--color00); text-align: center;    padding: 2px 0 4px;font-weight: 700;font-size: 30px; letter-spacing: -0.01em; }
.section-003 .card .desc { text-align: center; padding: 20px 16px 8px; font-size: 20px; line-height: 1.2; color: #ffffff; word-break: keep-all; }
.section-003 .card .sub { text-align: center; font-size: 13px; color: rgba(255,255,255,0.8); padding-bottom: 4px; }
.section-003 .card-list { display: flex; gap: 30px; margin-bottom: 52px; }
.section-003 .card-list .card { flex: 1; }
.section-003 .card-swiper { display: none; }
.section-003 .btn-box { text-align: center; margin-bottom: 10px; }
.section-003 .button { display: inline-flex; justify-content: center; align-items: center; width: 290px; height: 69px; background-color: var(--color00); color: var(--color01); font-weight: 700; font-size: 30px; text-decoration: none; letter-spacing: -0.01em; border-bottom: 7px solid #ff002e; transition: background-color 0.2s, color 0.2s; }
@media (hover: hover) { .section-003 .button:hover { background-color: var(--color01); color: var(--color00); } }
.section-003 .note { text-align: left; font-size: 13px; color: rgba(255,255,255,0.8); margin-bottom: 40px; }
.section-003 .note.center { text-align: center;}
.section-003 .text-box { display: flex; align-items: flex-end; gap: 20px; max-width: var(--container-width); margin: 0 auto;}
.section-003 .text-box .left { flex-shrink: 0; }
.section-003 .text-box .right { flex-shrink: 0; }
.section-003 .text-box p { font-weight: 700; font-size: 40px; line-height: 1.3; letter-spacing: -0.02em; color: var(--color00); }
.section-003 .text-box .right p { text-align: right;}
.section-003 .text-box .bar{flex: 1;margin-bottom: 22px;height: 2px;background-color: var(--color01); }

/* ===== FOOTER ===== */
.site-footer {background: var(--color02);width: 100%;padding:25px 120px calc(var(--fix-button-height) + 40px);}
.site-footer .footer-logo-wrap > img{width: 200px;height: auto;display: block}
.site-footer .footer-inner {max-width: var(--container-width);width: 100%;margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-start;}
.site-footer .footer-info :is(.footer-addr,.footer-copy) {font-weight: 350;font-size: 17px;line-height: 145%;letter-spacing: -2%;color:rgba(255, 255, 255, 0.5);}

@media (max-width: 1440px) and (min-width: 940px){
    :root{
        --fix-button-height: 60px;
    }
    .header-site{padding: 30px var(--container-padding);}
    .header-site .fix-logo{width: 150px;}
    .section-001{padding:60px 0 70px;}
    .section-001 .text-box{margin:30px auto 0;}
    .section-001 .text-box p{font-size: 32px;}
    .section-001 .fix-button .button{font-size: 28px;}

    .section-002 .heading { font-size: 36px; }
    .section-002 .desc { font-size: 18px; }

    .section-003 .tit { font-size: 28px; }
    .section-003 .text-box p { font-size: 32px; }

    .site-footer .footer-logo-wrap > img{width: 135px;}
    .site-footer .footer-info :is(.footer-addr,.footer-copy) {font-size: 14px;}

}
@media (max-width: 1280px) {
    .section-001 .img-box .img-inner {width: 740px;}
}
@media (max-width: 939px){
    :root{
        --container-padding:4.26vw;
        --fix-button-height: 56px;
    }
    .header-site{padding: 24px 32px;transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;}
    .header-site.is-scrolled{padding: 15px 32px;background-color: rgba(0,0,0,0.55);box-shadow: 0 2px 16px rgba(0,0,0,0.35);}
    .header-site .fix-logo{width: 137px;}
    .section-hero .text-box{width:100%;top: clamp(100px, 35.7vw, 150px);bottom: auto;right: auto;left: 0;align-items: flex-start;}
    .section-hero .text-box h1{width: 100%;font-size: clamp(40px, calc(37.91px + 0.435vw), 42px);font-weight: 700;line-height: 120%;letter-spacing: -0.04em;padding: 0 45px;z-index: 1;}
    .section-hero .text-box::before{content: '';position:absolute;display: block;width: 100%;height: 20px;background: #FF002E;bottom:-5px;left:0;}
    .section-hero .button-box{display: none;}
    .section-001{padding:120px 0 140px;height: auto;display: block;}
    .section-001 .text-box{flex-direction: column;row-gap: 33px;align-items: flex-start;margin:80px auto 0;}
    .section-001 .text-box p{font-size: 32px;}
    .section-001 .text-box .bar{display: none;}
    .section-001 .text-box .right{text-align: left;}
    .section-001 .text-box .right p{text-decoration: underline;text-decoration-color: #FF002E;text-decoration-thickness: 7px;text-underline-offset: -1px;text-decoration-skip-ink: none;}
    br.mo{display: inline;}
    br.pc{display: none;}
    .section-001 .fix-button{position: fixed;bottom:0;left:0;width:100%;z-index: 100;}
    .section-001 .fix-button .button{font-size: 28px;}
    .section-001 .video-inner {width: 100%;aspect-ratio: 1 / 1;}

    .section-002 .heading { font-size: 32px; }
    .section-002 .desc { font-size: 20px; }
    .section-002 { display: flex; flex-direction: column; padding:0;}
    .section-002 .top-text    { order: 1; }
    .section-002 .img-box--1  { order: 2; }
    .section-002 .img-box--2  { display: none; }
    .section-002 .bottom-text { order: 3; justify-content: flex-start; }
    .section-002 .img-box--3  { order: 4; }
    .section-002 .top-text,
    .section-002 .bottom-text {text-align: left;padding: 50px var(--container-padding) 40px;}

    .section-003{padding:70px 0 120px;}
    .section-003 .container { padding: 0; }
    .section-003 .tit { text-align: center; font-size: 32px; margin-bottom: 40px; padding: 0 var(--container-padding); }
    .section-003 .card-list { display: none; }
    .section-003 .card-swiper { display: block; margin-bottom: 36px; }
    .section-003 .card-swiper .swiper-slide { width: 76%; }
    .section-003 .card .desc { font-size: 22px; }
    .section-003 .btn-box { padding: 0 var(--container-padding);margin-bottom: 20px; }
    .section-003 .button { display: inline-flex; justify-content: center; align-items: center; width: 242px; height: 58px; font-size: 26px; border-bottom-width: 6px; }
    .section-003 .note { padding: 0 var(--container-padding) 0; text-align: center; line-height: 1.6; }
    .section-003 .text-box { flex-direction: column; align-items: flex-start; padding: 0px var(--container-padding) 0; gap: 16px; }
    .section-003 .text-box .bar { display: none; }
    .section-003 .text-box .left p { font-size: 32px;  font-weight: 800;}
    .section-003 .text-box .right p { font-size: 32px; font-weight: 800; text-align: left; }
    .section-003 .text-box .right p .underline { text-decoration: underline; text-decoration-color: var(--color01); text-decoration-thickness: 7px; text-underline-offset: -1px; text-decoration-skip-ink: none; }

    .site-footer {padding:24px 32px calc(var(--fix-button-height) + 24px);}
    .site-footer .footer-inner{flex-direction: column;row-gap: 30px;align-items: flex-start;}
    .site-footer .footer-logo-wrap > img{width: 129px;}
    .site-footer .footer-info :is(.footer-addr,.footer-copy) {font-size: 14px;}
}

@media (max-width: 480px){
    :root{
        --container-padding:8.33vw;
        --fix-button-height: 11.67vw;
    }
    .header-site{padding: 5vw 6.67vw;}
    .header-site.is-scrolled{padding: 2vw 6.67vw;}
    .header-site .fix-logo {width: 28.542vw;}

    .section-hero .text-box h1{font-size: 8.33vw;padding: 0 9.375vw;}
    .section-001{padding:25vw 0 29.17vw;}
    .section-001 .text-box{row-gap: 6.88vw;margin:6.25vw auto 0;}
    .section-001 .text-box p{font-size: 6.4vw;}

    .section-001 .fix-button .button{font-size: 5.83vw;}
    .section-002 .top-text,
    .section-002 .bottom-text {padding: 13vw var(--container-padding) 8.33vw;}
    .section-002 .heading { font-size: 6.4vw; }
    .section-002 .desc { font-size: 4.17vw; }
    .section-002 .heading { margin-bottom: 6.4vw; }

    .section-003{padding:13vw 0 ;}
    .section-003 .tit { font-size: 6.4vw; }
    .section-003 .card .price { font-size: 5vw; }
    .section-003 .card .desc { font-size: 4.58vw; }
    .section-003 .button { width: 60.42vw; height: 14.38vw; font-size: 6.25vw; border-bottom-width: 1.46vw; }
    .section-003 .note { text-align: center;font-size: 2.917vw;  }
    .section-003 .text-box { padding: 15vw var(--container-padding) 0; gap: 3.33vw; }
    .section-003 .text-box .left p { font-size: 6.4vw; }
    .section-003 .text-box .right p { font-size: 6.4vw;}

    .site-footer {padding:5vw 6.67vw calc(var(--fix-button-height) + 5vw);}
    .site-footer .footer-inner{row-gap: 6.25vw;}
    .site-footer .footer-logo-wrap > img{width: 26.88vw;}
    .site-footer .footer-info :is(.footer-addr,.footer-copy) {font-size: 2.92vw;}

}