/* header start */
header {
    position: fixed;
    width: 100%;
    height: 100px;
    min-width: 1400px;
    z-index: 999;
    top: 0;
    left: 0;

    /* ❌ transition: all .3s;  지우기 */
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out;

    background-color: transparent;
    border-bottom: 1px solid transparent;

    transform: translateZ(0);
    will-change: background-color, border-color;
}

header.on {
    background-color: #fff;
    border-bottom-color: #ccc;
}
header .logo h1{
    position: absolute;
    width:163px;
    height:80px;
    top:10px;
    left:0;
    transition:all .3s ease-in-out;
    background: url(../img/logo_w.png) 50% 50% no-repeat;
    background-size: 163px;
    z-index: 9999;
}
header .logo h1.on{
    background: url(../img/logo.png) 50% 50% no-repeat;
    background-size: 163px;
}
header .logo h1 a{
    display: block;
    width:163px;
    height:80px;
}
header:hover{background-color: #fff; transition: all .3s ease-in-out;}
header:hover .logo h1{background: url(../img/logo.png) 50% 50% no-repeat; background-size:163px; transition:all .3s ease-in-out;}


.pos{position: relative;}
.bar{
    width:0;
    height: 3px;
    background-color: #a4293d;
    position: absolute;
    left: 0;
    bottom: 10px;
}
nav{
    width:100%;
    max-width:1400px;
    min-width:1400px;
    margin:0 auto;
    z-index: 999;
    position: relative;
}
.gnb{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-right: 90px;
}
.gnb > li > .gnb_wrap > a.on{color:#333;}

.gnb > li > .gnb_wrap > a{
    color:#fff;
    font-size:20px;
    font-weight: 600;
    height:100px;
    line-height: 100px;
    position: relative;
    transition:all .3s ease-in-out;
}
.gnb > li > .gnb_wrap > a::after{content:'';
    display:block;
    width:0;
    height:2px;
    position: absolute;
    bottom:-10px;
    left:50%;
    background-color: #a4293d;
    transform: translateX(-50%);
    transition: all .3s ease-in-out;
}
header:hover .gnb li .gnb_wrap a{color:#333;}
header .gnb li .gnb_wrap a:hover{color:#a4293d;}
header .gnb .gnb_wrap a.active {color: #a4293d!important;}



header .tel{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:0;
}
header .tel a{
    display: inline-block;
    background-color: #a4293d;
    padding:5px 20px;
    border-radius: 5px;
    color:#ffff;
    font-size:20px;
    font-weight: 600;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
header .tel a::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:0;
    height:100%;
    background-color: #d4af37;
    transition: all .3s ease-in-out;
    z-index: -1;
}
header .tel a:hover::before{width:100%;}


/* header end */

/* image_show_wrap 공통 */
section .image_show_wrap,
section .image_show_wrap2{
    position: relative;
    top: 0px;
    left: 0%;
    width: 100%;
}
section .image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
section .image_show_wrap2{animation-duration: 1.4s;}

section .show_img01{animation-name: show_img01;}
@keyframes show_img01{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img02{animation-name: show_img02;}
@keyframes show_img02{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img03{animation-name: show_img03;}
@keyframes show_img03{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img04{animation-name: show_img04;}
@keyframes show_img04{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img05{animation-name: show_img05;}
@keyframes show_img05{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
section .show_img06{animation-name: show_img06;}
@keyframes show_img06{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
section .show_img07{animation-name: show_img07;}
@keyframes show_img07{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
section .show_img08{animation-name: show_img08;}
@keyframes show_img08{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
/* image_show_wrap 공통 */

/* image 확대 공통 */
.clip-animation {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    animation: clipExpand 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
}
@keyframes clipExpand {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
/* image 확대 공통 */

/* 에니메이션 공통 */
.spin{animation: spin 30s linear infinite;}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.blink {animation: blink 1.5s infinite;}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
/* 에니메이션 공통 */

/* 공통 */
.logo_banner{
    background: linear-gradient(180deg,#3A3330 0%,#1F1A18 100%);
    padding:10px 0;
    position: relative;
    overflow: hidden;
}
/* 좌우 페이드 (고급 브랜드 느낌) */
.logo_banner::before,
.logo_banner::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.logo_banner::before{
    left:0;
    background:linear-gradient(90deg,#1F1A18 0%,rgba(31,26,24,0) 100%);
}

.logo_banner::after{
    right:0;
    background:linear-gradient(-90deg,#1F1A18 0%,rgba(31,26,24,0) 100%);
}

.logo_banner .swiper-wrapper {transition-timing-function: linear;}
.logo_banner .swiper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.logo_banner .swiper-slide {
    width:100%;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    transition: all .3s ease-in-out;
}
.logo_banner .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.logo_banner .swiper-slide img[src*="logo_r"]{
    filter: drop-shadow(0 0 6px rgba(180,30,40,0.5));
}
/* 리듬 */
.logo_banner .swiper-slide:nth-child(3n){
    opacity:1;
}

/* hover */
.logo_banner .swiper-slide:hover{
    opacity:1;
    transform:scale(1.08);
}

.logo_banner .swiper-slide:hover img{
    filter:drop-shadow(0 0 10px rgba(255,255,255,.25));
}
/* 공통 */





/* visual start */
.visual{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.visual .video{
    position: relative;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    width:100%;
    height:0;
    padding-top:56.25%;
}

.visual .video iframe{
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    pointer-events: none;
}

/* 영상 위 어두운 오버레이 */
.visual .video iframe::after{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* THREE 리본 캔버스 */
#canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: transparent !important;
    pointer-events: none;
}

/* Burning overlay 캔버스 (CodePen 방식) */
#fire-overlay{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999999999; /* 텍스트/박스 위 */
    background: transparent;
}

.visual .visual_tit{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    color: #fff;
    text-align: center;
    pointer-events: none;
}

.visual .visual_tit h2{
    font-size: 5rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.8);
    letter-spacing: 5px;
    color: #a4293d;
}
.visual .visual_tit h2 img{
    width:30vw;
    min-width: 450px
}

.visual .visual_tit p{
    font-size: 1.5rem;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
}

.visual .visual_box{
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    border: 3px solid #a4293d;
    border-top: 0;
    z-index: 99;
    pointer-events: none;
}

.visual .visual_box::before{
    content: '';
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    height: 102%;
    border: 3px solid #a4293d;
    border-top: 0;
    z-index: 99;
}
/* visual end */



/* 공통 설정: 폰트 스타일 및 쪼개진 글자 기본 세팅 */
#section1,
#section2,
#section3,
#section4,
#section5,
#section6,
#section7,
#section8,
#section9{padding:120px 0;}


/* title */
section > .title{position: relative;}

.steak-title {
    color: #a4293d;
    font-size: 4.5rem;
    font-weight: 900;
    text-align: center;
}
.E-title {
    color: #a4293d;
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
}
.splitting .char {
    display: inline-block;
    transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1);
    transition-delay: calc(0.1s + var(--char-index) * 0.05s);
}

/* 1. Enter: 위에서 아래로 툭 떨어짐 (가장 깔끔) */
.effect-1[data-scroll='out'] .char { opacity: 0; transform: translateY(-100%); }
.effect-1[data-scroll='in'] .char { opacity: 1; transform: translateY(0); }

/* 2. Slide: 왼쪽에서 오른쪽으로 슥 밀려옴 */
.effect-2[data-scroll='out'] .char { opacity: 0; transform: translateX(-150px); }
.effect-2[data-scroll='in'] .char { opacity: 1; transform: translateX(0); }

/* 3. Flipping: 카드 뒤집히듯 180도 회전 */
.effect-3[data-scroll='out'] .char { transform: rotateY(180deg); opacity: 0; }
.effect-3[data-scroll='in'] .char { transform: rotateY(0deg); opacity: 1; }

/* 4. Scaling: 작았다가 팍 커지면서 나타남 */
.effect-4[data-scroll='out'] .char { transform: scale(0); opacity: 0; }
.effect-4[data-scroll='in'] .char { transform: scale(1); opacity: 1; }

/* 5. Turning: 옆으로 세워져 있다가 정면으로 돌아옴 */
.effect-5[data-scroll='out'] .char { transform: rotateY(90deg); }
.effect-5[data-scroll='in'] .char { transform: rotateY(0deg); }

/* 6. Folding: 바닥에서 위로 접혀 올라옴 */
.effect-6[data-scroll='out'] .char { transform: rotateX(90deg); transform-origin: bottom; opacity: 0; }
.effect-6[data-scroll='in'] .char { transform: rotateX(0deg); opacity: 1; }

/* 7. Zipping: 지퍼처럼 지그재그로 나타남 (홀수 위, 짝수 아래) */
.effect-7[data-scroll='out'] .char:nth-child(odd) { transform: translateY(-100%); opacity: 0; }
.effect-7[data-scroll='out'] .char:nth-child(even) { transform: translateY(100%); opacity: 0; }
.effect-7[data-scroll='in'] .char { transform: translateY(0); opacity: 1; }

/* 8. Spinning: 한 바퀴 빙글 돌면서 등장 */
.effect-8[data-scroll='out'] .char { transform: rotate(360deg) scale(0); opacity: 0; }
.effect-8[data-scroll='in'] .char { transform: rotate(0) scale(1); opacity: 1; }

/* 9. Perspective: 먼 곳에서 나에게로 날아옴 (임팩트 최고) */
.effect-9 { perspective: 1000px; }
.effect-9[data-scroll='out'] .char { opacity: 0; transform: translate3d(0, 50px, -800px); }
.effect-9[data-scroll='in'] .char { opacity: 1; transform: translate3d(0, 0, 0); }


section > .title .line_left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    left: -15%;
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    opacity: 0;
    transition: all 1s ease-out;
}
section > .title .line_left.active{
    opacity: 1;
    transform: translateX(0%);
}

section > .title .line_right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    right: -15%;
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    transform: translateX(50%);
    opacity: 0;
    transition: all 1s ease-out;
}
section > .title .line_right.active{
    opacity: 1;
    transform: translateX(0%);
}

section > .title .line{
    background-color: #a4293d;
    height: 0.1vw;
    width: 100%;
    margin: 0% 0% 0.4% 0%;
}

/****************************************************************************** section ******************************************************************************/
/* section1 */
#section1{
    position: relative;
    padding:120px 0 0 0;
}
#section1  .brand_story{margin-top:120px;}
#section1  .brand_story h2{
    font-size:48px;
    line-height:1.5;
    color:#000;
    text-align: center;
    margin-bottom:10px;
}
#section1  .brand_story .inner > p{
    font-size:24px;
    color:#333;
    text-align: center;
    line-height:40px;
}
#section1  .brand_story ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap:20px;
    margin-top:30px;
}
#section1  .brand_story ul li{
    width:33.333%;
    overflow: hidden;
}
#section1  .brand_story ul li .img{
    background-color: #000;
    overflow: hidden;
}
#section1  .brand_story ul li:nth-of-type(1) .img{border-radius: 30px 0 0 0;}
#section1  .brand_story ul li:nth-of-type(3) .img{border-radius: 0 0 30px 0;}
#section1  .brand_story ul li .img img{transition: all .3s ease-in-out;}
#section1  .brand_story ul li:hover .img img{transform: scale(1.1); opacity: .8;}

#section1  .brand_story ul li .tit h3{
    font-size:32px;
    color:#a4293d;
    text-align: center;
    padding:10px 0;
}
#section1  .brand_story ul li .tit p{
    font-size:18px;
    color:#a4293d;
    text-align: center;
}


#section1 .youtube{
    margin-top:120px;
    background: url(../img/section1/section1_bg.jpg) no-repeat 50% fixed;
    background-size: cover;
    padding:120px 0;
    position: relative;
}
#section1 .youtube::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.4);
}
#section1 .youtube .inner > ul{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap:40px;
    margin-bottom:40px;
}
#section1 .youtube .inner > ul li{position: relative; width:50%;}
#section1 .youtube .inner > ul li .list{position: relative;}
#section1 .youtube .inner > ul li .list h3{text-align: center;}
#section1 .youtube .inner > ul li .list h3 img{width:450px;}
#section1 .youtube .inner > ul li .list p{
    font-size:24px;
    font-weight: 800;
    color:#fff;
    text-align: center;
    line-height:32px;
    padding:30px 0;
}
#section1 .youtube .inner > ul li .list span{
    display: block;
    color:#fff;
    font-size:20px;
    text-align: center;
    line-height:32px;
}
#section1 .youtube .inner > ul li .video {
    width: 100%;
    height: 0;
    overflow: hidden;
    border:3px solid #a4293d;
    padding-top: 56.25%;
    position: relative;
    border-radius: 10px;
}
#section1 .youtube .inner > ul li .video iframe {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    transition: all .3s ease-in-out;
    pointer-events: none;
}

#section1 .youtube .video_shorts{margin-top:60px; position: relative;}
#section1 .youtube .video_shorts ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap:20px;
}
#section1 .youtube .video_shorts ul li{
    position: relative;
    width:25%;
    height:0;
    padding-top:42%;
    overflow: hidden;
    border-radius: 10px;
}
#section1 .youtube .video_shorts ul li iframe{
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    pointer-events: none;
}
/* section1 */



/* section2 */
#section2{
    background: url(../img/section2/section2_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    padding: 120px 0 0 0;
}

#section2 .vision{
    margin:120px 0 200px 0;
    position: relative;
}

#section2 .vision .vision_text{
    transform: translateY(100%);
    text-align: center;
    opacity: 0;
    transition: all 1s ease-in-out;
    width:100%;
}
#section2 .vision.active .vision_text{
    transform: translateY(0%);
    opacity: 1;
}

#section2 .vision .vision_text h4{
    font-size:1.5vw;
    color:#333;
}
#section2 .vision .vision_text h4 strong{
    font-size:1.5vw;
    color:#a4293d;
    font-weight: 700;
}
#section2 .vision .vision_text h2{
    display: inline-block;
    font-size:2.5vw;
    color:#000;
    margin:30px 0;
    padding-bottom:10px;
    border-bottom:3px solid #a4293d;
}
#section2 .vision .vision_text h3{
    font-size:1.8vw;
    color:#a4293d;
    margin-bottom:20px;
}
#section2 .vision .vision_text p{
    font-size:1vw;
    line-height:1.5;
    color:#333;
    padding:10px 0;
    font-weight: 500;
}


#section2 .vision .left_img{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left:-50%;
    width: 40vw;
    aspect-ratio: 1 / 1;   /* ✅ 핵심: 정사각형 기준 */
    opacity: 0;
    transition: all 1s ease-in-out;
}
#section2 .vision.active .left_img{
    left:-15%;
    opacity: 1;
}

#section2 .vision .left_img .img_wrap{
    position: relative;
    width:100%;
    height:100%;
}
#section2 .vision .left_img .img_wrap .img_c,
#section2 .vision .left_img .img_wrap .img_t,
#section2 .vision .left_img .img_wrap .img_i{
    position:absolute;
    inset:0;               /* ✅ top/left/width 대신 한방 */
    display:flex;
    align-items:center;
    justify-content:center;
}

#section2 .vision .left_img .img_wrap img{
    width:100%;
    height:100%;
    object-fit: contain;   /* ✅ 원본 비율 유지하면서 박스에 맞춤 */
    display:block;
}

#section2 .vision .left_img .img_wrap .img_t img{
    transform-origin:center;
    animation: left_spin 18s linear infinite;
}
@keyframes left_spin{
    from{ transform: rotate(0deg) scale(1.15);}
    to{ transform: rotate(360deg) scale(1.15);}
}

#section2 .vision .left_img .img_wrap .img_i img{
    animation: img_zoom 5s ease-in-out infinite alternate;
}

@keyframes img_zoom{
    from{ transform: scale(1);}
    to{ transform: scale(0.9);}
}



#section2 .vision .right_img{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:-50%;
    width: 40vw;
    aspect-ratio: 1 / 1;   /* ✅ 핵심: 정사각형 기준 */
    opacity: 0;
    transition: all 1s ease-in-out;
}
#section2 .vision.active .right_img{
    right:-15%;
    opacity: 1;
}

#section2 .vision .right_img .img_wrap{
    position: relative;
    width:100%;
    height:100%;
}
#section2 .vision .right_img .img_wrap .img_c,
#section2 .vision .right_img .img_wrap .img_t,
#section2 .vision .right_img .img_wrap .img_i{
    position:absolute;
    inset:0;               /* ✅ top/left/width 대신 한방 */
    display:flex;
    align-items:center;
    justify-content:center;
}

#section2 .vision .right_img .img_wrap img{
    width:100%;
    height:100%;
    object-fit: contain;   /* ✅ 원본 비율 유지하면서 박스에 맞춤 */
    display:block;
}

#section2 .vision .right_img .img_wrap .img_t img{
    transform-origin:center;
    animation: right_spin 18s linear infinite;
}
@keyframes right_spin{
    from{ transform: rotate(360deg) scale(1.15);}
    to{ transform: rotate(0deg) scale(1.15);}
}

#section2 .vision .right_img .img_wrap .img_i img{
    animation: img_zoom 5s ease-in-out infinite alternate;
}

@keyframes img_zoom{
    from{ transform: scale(1);}
    to{ transform: scale(0.9);}
}
/* section2 */




/* section3 */
#section3{
    background: url(../img/section3/section3_bg.jpg) no-repeat 50% fixed;
    background-size: cover;
}
#section3 .title h2{color:#fff;}
#section3 .title p{color:#fff;}
#section3 .title .line{background-color:#fff;}

/* ===== SECTION3 / SYSTEM SCROLL CAROUSEL (TRACK 방식) ===== */
#section3 .system{position: relative; }
#section3 .system h2{
    font-size:48px;
    color:#fff;
    text-align: center;
    margin:120px 0 -120px 0;
}
#section3 .system .system_tit{
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
#section3 .system .system_tit h2{
    font-size:4vw;
    color:#fff;
    text-align: center;
}


/* ===== SECTION3 / SYSTEM SCROLL CAROUSEL (TRACK + COLOR FRAME) ===== */
#section3 .system_track{
    position: relative;
    height: 390vh;
}

#section3 .system_card{
    position: relative;
    width: 100%;
    height: 100vh;
    perspective: 1000px;
    overflow: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}

/* ✅ 카드 프레임: 여기서 여백/색이 보임 */
#section3 .system_card .card{
    position: absolute;
    left: 50%;
    top: 50%;

    /* ✅ 폭은 3가지 중 가장 작은 값 사용
        1) 1400px
        2) 화면폭(92vw)
        3) 화면높이 제한(78vh)을 16:9로 환산한 폭 */
    width: min(1400px, 92vw, calc(78vh * 16 / 9));

    /* ✅ 카드 자체를 항상 16:9로 */
    aspect-ratio: 16 / 9;

    border-radius: 16px;
    overflow: hidden;

    /* ✅ padding 제거(이미지 영역 안 깎임) */
    padding: 0;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(20px);

    will-change: transform, filter, opacity;
}

/* ✅ 프레임 색을 "여백"처럼 보이게 (이미지 위에 색 입히는 거 아님) */
#section3 .system_card .card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    pointer-events:none;

    /* 프레임 두께 = 18px */
    box-shadow: inset 0 0 0 18px var(--frame-color, rgba(255,255,255,0.12));
    z-index: 2;
}

/* 이미지 꽉 */
#section3 .system_card .card .img{
    position:absolute;
    inset:0;
    z-index:0;
}
#section3 .system_card .card .img img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
}


/* 텍스트 오버레이는 이미지 위 */
#section3 .system_card .card .tit{
    position: absolute;
    left: 5%;
    top: 10%;
    width:100%;
    z-index: 3;
    color: #fff;
}

#section3 .system_card .card .tit h3{
    font-size: 48px;
}
#section3 .system_card .card .tit h4{
    font-size:32px;
    padding:20px 0;
}
#section3 .system_card .card .tit p{
    font-size: 18px;
    font-weight: 500;
}

/* 텍스트 가독성용: 왼쪽만 어둡게 */
#section3 .system_card .card .img::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%);
    pointer-events:none;
}
/* section3 */



/* section4 */
#section4{
    background:url(../img/section4/section4_bg1.jpg) no-repeat 50% fixed;
    background-size: cover;
    position: relative;
}
#section4 .title h2{color:#fff;}
#section4 .title p{color:#fff;}
#section4 .title .line{background-color:#fff;}

#section4 .logic{margin-top:120px; position: relative;}
#section4 .logic .logic_title{
    transition: all 1s ease-in-out;
    opacity: 0;
    transform: translateY(100%);
    position: relative;
    z-index: 9;
}
#section4 .logic .logic_title.active{
    transform: translateY(0);
    opacity: 1;
}
#section4 .logic .logic_title h2{
    font-size:1.5vw;
    line-height:1.5;
    color:#fff;
    text-align: center;
    
}


#section4 .logic .logic_list{margin:120px 0; position: relative; z-index: 9;}
#section4 .logic .logic_list ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
#section4 .logic .logic_list ul li{
    width:33.333%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#section4 .logic .logic_list ul li .left_text{
    transition: all 1s ease-in-out;
    transform: translateX(-20%);
    opacity: 0;
}
#section4 .logic .logic_list ul li .left_text.active{
    transform: translateX(0%);
    opacity: 1;
}
#section4 .logic .logic_list ul li .right_text{
    transition: all 1s ease-in-out;
    transform: translateX(20%);
    opacity: 0;
}
#section4 .logic .logic_list ul li .right_text.active{
    transform: translateX(0%);
    opacity: 1;
}

#section4 .logic .logic_list ul li .left_text h3{
    font-size:32px;
    color:#a4293d;
    text-align: left;
}
#section4 .logic .logic_list ul li .left_text p{
    font-size:18px;
    color:#fff;
    text-align: left;
    line-height:1.5;
    margin-top:20px;
}
#section4 .logic .logic_list ul li .right_text h3{
    font-size:32px;
    color:#a4293d;
    text-align: right;
}
#section4 .logic .logic_list ul li .right_text p{
    font-size:18px;
    color:#fff;
    text-align: right;
    line-height:1.5;
    margin-top:20px;
}


#section4 .logic .logic_list ul li .center_img{
    text-align: center;
    position: relative;
}
#section4 .logic .logic_list ul li .center_img::before{
    content: '';
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background: url(../img/section4/circle_w.png) no-repeat 50% 50%;
    background-size: cover;
    width:460px;
    height:460px;
    z-index: 9;
    animation: logic_spin 20s linear infinite;
}
@keyframes logic_spin {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to   { transform: translate(-50%, -50%) rotate(0deg); }
}


/* left_img */
#section4 .logic .left_img{
    position: absolute;
    top: -10%;
    left: -35%;
    width: 10vw;
    transition: all 1.5s ease-in-out;
    opacity: 0;
}
#section4 .logic.active .left_img{
    top: 0%;
    left: -5%;
    width: 32vw;
    opacity: 1;
}

#section4 .logic .left_img .img_wrap{position: relative;}

#section4 .logic .left_img .img_wrap .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    animation: moveSide 3s ease-in-out infinite;
}
@keyframes moveSide {
    0%, 100% { margin-left: 0; }
    50% { margin-left: 20px; } /* 이미지와 연기가 세트로 같이 움직임 */
}


/* 2. 연기: 이미지와 같이 좌우로 움직이면서 + 혼자 상하로도 움직임 */
#section4 .logic .left_img .img_wrap .smoke {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    animation: moveSide 3s ease-in-out infinite, moveUp 2s ease-in-out infinite;
}

@keyframes moveUp {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-30px); }
}




/* =========================
    SECTION4 - logic_drag (Final structure)
   ========================= */
/* logic_drag base */
#section4 .logic_drag {
    position: relative;
    width: 100%;
    height: 46vw;
    overflow: hidden;
}

/* wrap layout */
#section4 .logic_drag_wrap {
    width: 100%;
    height: 100%;
    display: flex;
}

#section4 .logic_drag_panel {
    position: relative;
    height: 100%;
    overflow: hidden;
    flex: 1;
    width: auto;
    transition: flex 0.6s;
}

/* bg */
#section4 .logic_drag_bg {
    position: absolute;
    inset: -2vw;
    z-index: 0;
}

#section4 .logic_drag_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
                translate 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* dim on bg */
#section4 .logic_drag_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
}

/* content */
#section4 .logic_drag_content {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 32vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    opacity: 0;
    transform: translateY(-45%);
    transition: opacity 0.5s, transform 0.5s;
}

#section4 .logic_drag_panel.is-left .logic_drag_content {
    left: 5vw;
}

#section4 .logic_drag_panel.is-right .logic_drag_content {
    right: 5vw;
}


#section4 .logic_drag_content .tit{
    padding:30px 0;
    border-bottom:1px solid #fff;
    text-align: center;
}
#section4 .logic_drag_content .tit h3{
    font-size:2.5vw;
    color:#fff;
    font-family: 'Shilla_CultureB-Bold';
}
#section4 .logic_drag_content .tit h3 strong{
    font-size:2.5vw;
    color:#a4293d;
    font-family: 'Shilla_CultureB-Bold';
}
#section4 .logic_drag_content .tit h4{
    font-size:1.5vw;
    color:#fff;
    margin-bottom:10px;
}
#section4 .logic_drag_content .tit p{
    font-size:1vw;
    color:#ccc;
    line-height:1.5;
}



/* center overlay */
#section4 .logic_drag_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    pointer-events: none;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

#section4 .logic_drag_center .logic_drag_center_wrap{position: relative;}

#section4 .logic_drag_center .logic_drag_center_wrap .logic_drag_center_in{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
    text-align: center;
}

#section4 .logic_drag_center .logic_drag_center_wrap .logic_drag_center_in .logic_drag_center_tt01{
    font-size:2vw;
    color:#fff;
    font-family: 'Shilla_CultureB-Bold';
}
#section4 .logic_drag_center .logic_drag_center_wrap .logic_drag_center_in .logic_drag_center_tt02{
    padding:10px 0 20px 0;
    font-size:3vw;
    color:#fff;
    font-family: 'Shilla_CultureB-Bold';
}
#section4 .logic_drag_center .logic_drag_center_wrap .logic_drag_center_in .logic_drag_center_tt02 span{
    font-size:3vw;
    color:#a4293d;
    font-family: 'Shilla_CultureB-Bold';
}
#section4 .logic_drag_center .logic_drag_center_wrap .logic_drag_center_in .logic_drag_center_tt03{
    font-size:1.5vw;
    color:#fff;
    line-height:1.5;
}

/* ✅ split overlay (must be on top + must receive events) */
#section4 .logic_drag_split {
    position: absolute;
    inset: 0;
    z-index: 9999;
    background: transparent;
    pointer-events: auto;
    cursor: url("../img/section4/con04_drag.png") 60 35, auto !important;
    /* 60 35 좌표 */
}



#section4 .logic_drag.is-left-active .logic_drag_panel.is-left .logic_drag_bg::after {opacity: 1;}
#section4 .logic_drag.is-left-active .logic_drag_panel.is-left .logic_drag_bg img {transform: scale(1.08);}
#section4 .logic_drag.is-left-active .logic_drag_panel.is-left .logic_drag_content {opacity: 1; transform: translateY(-50%);}
#section4 .logic_drag.is-left-active .logic_drag_center {transform: translate(-50%, -50%) translateX(10vw);}
#section4 .logic_drag.is-right-active .logic_drag_panel.is-right .logic_drag_bg::after {opacity: 1;}
#section4 .logic_drag.is-right-active .logic_drag_panel.is-right .logic_drag_bg img {transform: scale(1.08);}
#section4 .logic_drag.is-right-active .logic_drag_panel.is-right .logic_drag_content {opacity: 1; transform: translateY(-50%);}
#section4 .logic_drag.is-right-active .logic_drag_center {transform: translate(-50%, -50%) translateX(-10vw);}


/* panel width animation base */
#section4 .logic_drag_panel {
    flex: 1;
    width: auto;
    transition: flex 1s cubic-bezier(0.22, 1, 0.36, 1);
}
#section4 .logic_drag.is-left-active .logic_drag_panel.is-left {flex: 1.06;}
#section4 .logic_drag.is-left-active .logic_drag_panel.is-right {flex: 0.94;}

#section4 .logic_drag.is-right-active .logic_drag_panel.is-right {flex: 1.06;}
#section4 .logic_drag.is-right-active .logic_drag_panel.is-left {flex: 0.94;}




/* padding-bottom 영역 안에 딱 붙게 */
#section4 .bottom_text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: #090d00;
    overflow: hidden; /* ★ 중요: 삐져나가는 글자 숨기기 */
    display: flex;
    align-items: center;
}

#section4 .bottom_text .rolling_wrap {
    display: flex; /* span들을 가로로 나열 */
    white-space: nowrap; /* 줄바꿈 방지 */
    /* 롤링 애니메이션 추가: 20초 동안 왼쪽으로 무한 이동 */
    animation: rolling 40s linear infinite; 
}

#section4 .bottom_text span {
    display: inline-block;
    font-size: 48px;
    padding: 0 40px; /* 글자 사이 간격 확보 */
    color: rgba(255, 255, 255, 0.25);
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
    font-weight: 700;    
    /* 기존 배경 애니메이션 유지 */
    background: url(../img/section4/animated-text-fill.png) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aitf 80s linear infinite;
    
    border-top: 4px double rgba(255, 255, 255, 0.25);
    border-bottom: 4px double rgba(255, 255, 255, 0.25);
}

/* 롤링 애니메이션: 전체 덩어리를 왼쪽으로 밀어줌 */
@keyframes rolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* ★ 절반 지점에서 다시 시작하면 무한 반복처럼 보임 */
}

/* 기존 배경 애니메이션 */
@keyframes aitf {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
/* section4 */



/* section5 */
#section5 {
    background: url(../img/section5/section5_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
}

#section5 .title h2 {color: #fff;}
#section5 .title p {color: #fff;}
#section5 .title .line {background-color: #fff;}


/* =======================
3D Carousel (NO click / NO hover pause)
   ======================= */
#section5 .menu_slide {
    isolation: isolate;
    contain: paint;
}
#section5 .carousel_scene,
#section5 .carousel_a3d {
    display: grid;
}

#section5 .carousel_scene {
    position: relative;
    overflow: hidden;
    perspective: 35em;
    height: 520px;
    clip-path: inset(0);
    transform: translateZ(0);
}

#section5 .carousel_a3d {
    place-self: center;
    transform-style: preserve-3d;
    animation: carousel_ry 32s linear infinite;

    /* ✅ 상호작용 완전 제거 (클릭/드래그/호버 등) */
    pointer-events: none;
}

@keyframes carousel_ry {
    to {
        rotate: y 1turn;
    }
}

/* 카드 */
#section5 .carousel_card {
    --w: 17.5em;
    --ba: 1turn / var(--n);

    grid-area: 1 / 1;
    width: var(--w);
    aspect-ratio: 7 / 10;

    border-radius: 1.5em;
    backface-visibility: hidden;

    transform:
        rotateY(calc(var(--i) * var(--ba)))
        translateZ(calc(-1 * (.5 * var(--w) + .5em) / tan(.5 * var(--ba))));

    position: relative;
    overflow: hidden;

    /* ✅ 커서/호버 효과 제거 */
    cursor: default;
    background-color: #000;
    transform-style: flat; /* preserve-3d 필요 없음 */
}

/* 이미지 */
#section5 .carousel_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: none;       /* ✅ 소수점 Z 제거 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 접근성: 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
    #section5 .carousel_a3d {
        animation-duration: 128s;
    }
}


#section5 .main_menu_contant{margin-top:-120px;}
#section5 .main_menu_contant .inner > h3{
    font-size:48px;
    color:#fff;
    text-align: center;
    font-weight: 300;
    padding:30px 0;
    margin:60px 0;
    transition: all 1s ease-in-out;
    transform: translateY(100%);
    opacity: 0;
}
#section5 .main_menu_contant .inner > h3 strong{
    font-size:48px;
    color:#a4293d;
    font-weight: 500;
}
#section5 .main_menu_contant.active .inner > h3{
    transform: translateY(0);
    opacity: 1;
}



#section5 .main_menu_contant .menu_tab{
    display: flex;
    align-items: center;
    gap:20px;
    justify-content: space-between;
}
#section5 .main_menu_contant .menu_tab li{width:20%;}
#section5 .main_menu_contant .menu_tab li a{
    display: block;
    font-size:18px;
    color:#333;
    text-align: center;
    padding:15px 0;
    border-radius: 100px;
    background-color: #fff;
}
#section5 .main_menu_contant .menu_tab li:last-child a{border-right:1px solid #ccc;}

#section5 .main_menu_contant .menu_tab li:first-child a.on{background-color: #a4293d; color:#fff;}
#section5 .main_menu_contant .menu_tab li a:hover{background-color: #a4293d; color:#fff;}
#section5 .main_menu_contant .menu_tab li a.active0{background-color: #a4293d; color:#fff;}
#section5 .main_menu_contant .menu_tab li a.active1{background-color: #a4293d; color:#fff;}
#section5 .main_menu_contant .menu_tab li a.active2{background-color: #a4293d; color:#fff;}
#section5 .main_menu_contant .menu_tab li a.active3{background-color: #a4293d; color:#fff;}
#section5 .main_menu_contant .menu_tab li a.active4{background-color: #a4293d; color:#fff;}


#section5 .main_menu_contant .swiper {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    margin:60px 0;
    border:1px solid #000;
    background-color: #fff;
    padding:0 10px;
}
#section5 .main_menu_contant .swiper .swiper-wrapper{
    display: flex;
    align-items: top;
}
#section5 .main_menu_contant .swiper-slide {
    width:100%;
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    overflow: hidden;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#section5 .main_menu_contant .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease-in-out;
}
#section5 .main_menu_contant .swiper-button-prev,
#section5 .main_menu_contant .swiper-container-rtl .swiper-button-next {
    left: 0px;
    right: auto;
    width:20px;
    color:#000
}
#section5 .main_menu_contant .swiper-button-next,
#section5 .main_menu_contant .swiper-container-rtl .swiper-button-prev {
    right: 0px;
    left: auto;
    width:20px;
    color:#000
}
#section5 .main_menu_contant .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size:34px;}
#section5 .main_menu_contant .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{font-size:34px;}

#section5 .main_menu_contant .swiper-button-next,
#section5 .main_menu_contant .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
    background-size: 50px 50px;
    border:1px solid #000;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    transition: all .3s ease-in-out;
}
#section5 .main_menu_contant .swiper-button-next:hover{background-color: #a4293d; color:#fff;}
#section5 .main_menu_contant .swiper-button-prev:hover{background-color: #a4293d; color:#fff;}

#section5 .main_menu_contant .swiper-slide .img{
    width:100%;
    height:100%;
    overflow: hidden;
    transition: all .3s ease-in-out;
    position: relative;
}
#section5 .main_menu_contant .swiper-slide .img::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
}
#section5 .main_menu_contant .swiper-slide .tit{height:50px; position: relative; line-height:50px}
#section5 .main_menu_contant .swiper-slide .tit p{
    font-size:18px;
    color:#333;
    text-align: center;
}

#section5 .main_menu_contant .arrow{
    position: absolute;
    width:150px;
    bottom:65px;
    right:95px;
}

/* section5 */



/* section6 */
#section6 {
    position: relative;
    background: url(../img/section6/section6_bg.jpg) no-repeat 50% fixed;
    background-size: cover;
    padding:120px 0 0 0;
    overflow: hidden;
}
#section6 .title h2 {color: #fff;}
#section6 .title p {color: #fff;}
#section6 .title .line {background-color: #fff;}

#section6 .competition {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

#section6 .competition .inner {height: 100%;}

#section6 .competition ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

#section6 .competition ul li { width: 50%; height: 100%; position: relative; }


#section6 .competition .competition_tit_wrap{
    position: relative;
    height:100%;
}
#section6 .competition .competition_tit_wrap .competition_tit{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    transition: all 1s ease-in-out;
    left:-100%;
    opacity: 0;
}
#section6 .competition .competition_tit_wrap.active .competition_tit{
    opacity: 1;
    left:0;
}


#section6 .competition .competition_tit_wrap .competition_tit h3{
    font-size:1.5vw;
    color:#fff;
    text-align: left;
}
#section6 .competition .competition_tit_wrap .competition_tit h2{
    font-size:2.5vw;
    color:#fff;
    text-align: left;
    line-height:1.2;
    padding:20px 0;
}
#section6 .competition .competition_tit_wrap .competition_tit h2 strong{
    font-size:2.5vw;
    color:#f2bf18;
}
#section6 .competition .competition_tit_wrap .competition_tit p{
    font-size:20px;
    color:#fff;
    text-align: left;
}

#section6 .competition .competition_tit_wrap .competition_tit .txt{margin-top:30px;}
#section6 .competition .competition_tit_wrap .competition_tit .txt span{
    font-size:24px;
    color:#fff;
    text-align: center;
}




#section6 .competition .card_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    /* overflow: hidden; 을 주면 올라오는게 잘릴 수 있으니 부모 섹션에서 제어 */
}

#section6 .competition .card_wrap .card {
    position: absolute;
    left: 0;
    width: 100%;
    height: 400px; /* 카드 높이 */
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    background: #fff;
    will-change: transform;
    /* 초기 상태: JS가 실행되기 전에는 화면 아래에 짱박아둠 */
    transform: translateY(150vh); 
    padding:30px;
}

/* ★ 계단식 최종 목적지 (이미지처럼 차곡차곡) */
#section6 .competition .card_wrap .card01 {top:5%; z-index: 1; background: url(../img/section6/card_bg1.png) no-repeat 50% 50%; background-color: #fff;}
#section6 .competition .card_wrap .card02 {top:15%; z-index: 2; background: url(../img/section6/card_bg2.png) no-repeat 50% 50%; background-color: #fff;}
#section6 .competition .card_wrap .card03 {top:25%; z-index: 3; background: url(../img/section6/card_bg3.png) no-repeat 50% 50%; background-color: #fff;}
#section6 .competition .card_wrap .card04 {top:35%; z-index: 4; background: url(../img/section6/card_bg4.png) no-repeat 50% 50%; background-color: #fff;}

#section6 .competition .card_wrap .card .card_list{
    display: flex;
    flex-direction: column;
    height:100%;
}

#section6 .competition .card_wrap .card .card_list .list_top{height:40%;}
#section6 .competition .card_wrap .card .card_list .list_bottom{height:60%;}


#section6 .competition .card_wrap .card .card_list .list_top h4{
    font-size:1.2vw;
    color:#000;
    text-align: left;
    padding-top:10px;
}
#section6 .competition .card_wrap .card .card_list .list_top h4 img{width:35px; vertical-align: middle;}
#section6 .competition .card_wrap .card .card_list .list_bottom h3{
    font-size:1.5vw;
    color:#000;
    text-align: left;
}
#section6 .competition .card_wrap .card .card_list .list_bottom p{
    font-size:18px;
    color:#333;
    text-align: left;
    margin-top:20px;
}

#section6 .competition .competition_logo{
    position: absolute;
    top:5%;
    left:-100%;
    width:100%;
    height:100%;
    transition: all 1s ease-in-out;
    opacity: 0;
}
#section6 .competition.active .competition_logo{
    opacity: 1;
    left:0;
}

#section6 .competition .competition_logo .img_1{
    position: absolute;
    top:0;
    left:0;
}
#section6 .competition .competition_logo .img_2{
    position: absolute;
    top:0;
    left:0;
    animation: scaleOpa 2s infinite;
}
#section6 .competition .competition_logo .img_1 img{width:400px;}
#section6 .competition .competition_logo .img_2 img{width:400px;}

@keyframes scaleOpa {
    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}




/* 좌우 롤링 텍스트 */
#section6 .competition .left_rol,
#section6 .competition .right_rol{
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    overflow: hidden;
    z-index: 30;
    pointer-events: none;
}

#section6 .competition .left_rol{
    left: 20px;
}

#section6 .competition .right_rol{
    right: 20px;
}

#section6 .competition .left_rol .roll_box,
#section6 .competition .right_rol .roll_box{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 110px;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    overflow: visible;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

#section6 .competition .left_rol .roll_track,
#section6 .competition .right_rol .roll_track{
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}

#section6 .competition .left_rol .roll_track img,
#section6 .competition .right_rol .roll_track img{
    display: block;
    width: 1600px;
    height: auto;
    max-width: none;
    flex-shrink: 0;
}

#section6 .competition .left_rol .roll_track{
    animation: leftTextRoll 20s linear infinite;
}

#section6 .competition .right_rol .roll_track{
    animation: rightTextRoll 20s linear infinite;
}

@keyframes leftTextRoll{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-1600px);
    }
}

@keyframes rightTextRoll{
    0%{
        transform: translateX(-1600px);
    }
    100%{
        transform: translateX(0);
    }
}









#section6 .competition_slide {
    position: relative;
    min-height: 400px;
    margin-top: -200px;
}

#section6 .competition_slide .swiper {
    width: 100%;
    padding: 40px 0;
    overflow: visible;
}

#section6 .competition_slide .swiper .swiper-wrapper {
    align-items: center;
}

#section6 .competition_slide .swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    position: relative;
}

#section6 .competition_slide .swiper .swiper-slide a {
    display: block;
    width: 84%; /* 기본은 살짝 작게 */
    padding: 24px 12px;
    background: #fff;
    border: 2px solid #fff;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all .3s ease-in-out;
    transform: translateZ(0);
    transform-origin: center center;
    will-change: width, padding, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 기본 텍스트 */
#section6 .competition_slide .swiper .swiper-slide a h3 {
    font-size: 22px;
    transition: all .3s ease-in-out;
    border-bottom:1px solid #ccc;
    padding-bottom:15px
}

#section6 .competition_slide .swiper .swiper-slide a span {
    display: block;
    margin-top: 25px;
    font-size: 18px;
    transition: all .3s ease-in-out;
}

#section6 .competition_slide .swiper .swiper-slide a p {
    margin-top: 8px;
    font-size: 18px;
    transition: all .3s ease-in-out;
}

#section6 .competition_slide .swiper .swiper-slide a p strong {
    font-weight: 700;
    color:#a4293d;
}

/* prev / next */
#section6 .competition_slide .swiper .swiper-slide-prev,
#section6 .competition_slide .swiper .swiper-slide-next {
    z-index: 2;
}

#section6 .competition_slide .swiper .swiper-slide-prev a,
#section6 .competition_slide .swiper .swiper-slide-next a {
    width: 92%;
    padding: 28px 14px;
    transform: scale(1);
}

#section6 .competition_slide .swiper .swiper-slide-prev a h3,
#section6 .competition_slide .swiper .swiper-slide-next a h3 {
    font-size: 26px;
}

#section6 .competition_slide .swiper .swiper-slide-prev a span,
#section6 .competition_slide .swiper .swiper-slide-next a span {
    font-size: 20px;
}

#section6 .competition_slide .swiper .swiper-slide-prev a p,
#section6 .competition_slide .swiper .swiper-slide-next a p {
    font-size: 20px;
}
#section6 .competition_slide .swiper .swiper-slide-prev a p strong,
#section6 .competition_slide .swiper .swiper-slide-next a p strong{
    color:#a4293d;
}

/* active */
#section6 .competition_slide .swiper .swiper-slide-active {
    z-index: 3;
}

#section6 .competition_slide .swiper .swiper-slide-active a {
    width: 100%; /* 슬라이드 칸 안에서만 최대화 */
    padding: 34px 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    transform: scale(1);
    border-radius: 15px;
}

#section6 .competition_slide .swiper .swiper-slide-active a h3 {
    font-size: 34px;
}

#section6 .competition_slide .swiper .swiper-slide-active a span {
    font-size: 26px;
}

#section6 .competition_slide .swiper .swiper-slide-active a p {
    font-size: 26px;
}
#section6 .competition_slide .swiper .swiper-slide-active a p strong{
    font-size:30px;
    color:#a4293d;
    animation: activeBlink 1s infinite;
}
@keyframes activeBlink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

/* 버튼 */
#section6 .competition_slide .swiper .swiper-button-prev,
#section6 .competition_slide .swiper .swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto;
    width: 20px;
    color: #fff;
}

#section6 .competition_slide .swiper .swiper-button-next,
#section6 .competition_slide .swiper .swiper-container-rtl .swiper-button-prev {
    right: 10px;
    left: auto;
    width: 20px;
    color: #fff;
}

#section6 .competition_slide .swiper .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    font-size: 30px;
    transition: all 0.3s ease-in-out;
}

#section6 .competition_slide .swiper .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 30px;
    transition: all 0.3s ease-in-out;
}

#section6 .competition_slide .swiper .swiper-button-next,
#section6 .competition_slide .swiper .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
    background-size: 50px 50px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #a4293d;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

#section6 .competition_slide .swiper .swiper-button-next:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#section6 .competition_slide .swiper .swiper-button-next:hover::after {
    color: #a4293d;
    transform: translateX(5px);
}

#section6 .competition_slide .swiper .swiper-button-prev:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#section6 .competition_slide .swiper .swiper-button-prev:hover::after {
    color: #a4293d;
    transform: translateX(-5px);
}





#section6 .bottom{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
}
#section6 .bottom img{width:100%; opacity: .5;}

/* section6 */




/* section7 */
#section7{
    background: url(../img/section7/section7_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    position: relative;
}

#section7 .record_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 29vw;
    border-radius: 15px;
    background-color: #fff;
    border: 1px solid #a4293d;
    overflow: hidden;
    margin: 6% 0% 6% 0%;
}

#section7 .record_box .circle{
    position: relative;
    z-index: 1;
}
#section7 .record_box .circle .tit{
    position: absolute;
    top:58%;
    left:50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: end;
}
#section7 .record_box .circle .tit h3{
    font-size:72px;
    color:#fff;
    text-align: left;
}
#section7 .record_box .circle .tit p{
    font-size:32px;
    color:#fff;
    text-align: left;
    font-weight: 300;
    margin-bottom:10px;
}




/* 보여주는 창 */
#section7 .record_box .text_wrap{
    position: absolute;
    width: 100%;
    overflow: hidden;
    left: 0;
}

/* 움직이는 트랙 */
#section7 .record_box .text_wrap .text{
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;          /* 내용만큼 길어지게 */
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite;
}

/* 이미지: 절대 width:100% 주면 안됨 */
#section7 .record_box .text_wrap .text img{
    display: block;
    flex-shrink: 0;
    height: 80px;
    width: auto;
}

/* 트랙이 2번 반복되어 있으니 절반(-50%)만 이동하면 무한 자연 루프 */
@keyframes marquee{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}



#section7 .record_box .tit_left{
    position: absolute;
    top:40px;
    left:40px;
}
#section7 .record_box .tit_left p{
    font-size:28px;
    color:#000;
    text-align: left;
}
#section7 .record_box .tit_left p strong{
    font-size:28px;
    color:#a4293d;
}

#section7 .record_box .tit_right{
    position: absolute;
    bottom:40px;
    right:40px;
}
#section7 .record_box .tit_right p{
    font-size:18px;
    color:#000;
    text-align: right;
    line-height:32px;
}
#section7 .record_box .tit_right p strong{
    font-size:18px;
    color:#a4293d;
}



/* 전체 기준 */
#section7 .record_list{
    position: relative;
    width: 100%;
}

#section7 .record_list > ul{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2; /* 기본 콘텐츠는 중간 레이어 */
}
#section7 .record_list > ul li{
    position: relative;
    height:100%;
}

/* 이미지 카드 */
#section7 .record_list .img{
    border-radius: 0 25px 25px 0;
    overflow: hidden;
    height: 100%;;
}
#section7 .record_list .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#section7 .record_list .tit{
    position: absolute;
    top: 60px;
    left: 30%;
    transition: all 1s ease-in-out;
    opacity: 0;
}
#section7 .record_list.active .tit{
    left: 5%;
    opacity: 1;   
}

#section7 .record_list .tit h3{
    font-size:26px;
    color:#000;
    text-align: right;
}
#section7 .record_list .tit p{
    font-size:20px;
    color:#333;
    text-align: right;
    margin-top:10px;
    line-height:32px;
}




/* ===== 마퀴 공통 ===== */
#section7 .record_list .text_wrap_up,
#section7 .record_list .text_wrap_down{
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}


#section7 .record_list .text_wrap_up{ padding-left: 18vw; }
#section7 .record_list .text_wrap_down{ padding-left: 10vw; }


#section7 .record_list .text_wrap_up{
    top: 55%;
    z-index: 1;                  /* 이미지 아래(under) */
}
#section7 .record_list .text_wrap_down{
    top: 85%;
    z-index: 3;                  /* 이미지 위(over) */
    /* 여기 숫자가 '잘리는 시작점'임 */
    --cut: 10vw;  /* ← 이미지 중간쯤 위치로 조절 (예: 32vw~45vw) */
    clip-path: inset(0 0 0 var(--cut)); /* 왼쪽 var(--cut) 만큼 숨김 */
    overflow: hidden;
}

/* 트랙 */
#section7 .record_list .text_wrap_up .text,
#section7 .record_list .text_wrap_down .text{
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
}

/* 이미지(큰 타이틀 띠) */
#section7 .record_list .text_wrap_up .text img,
#section7 .record_list .text_wrap_down .text img{
    display: block;
    flex-shrink: 0;
    height: clamp(64px, 6.5vw, 120px); /* 띠 높이 */
    width: auto;                       /* ★ width:100% 금지 */
}

/* 방향 반대로 */
#section7 .record_list .text_wrap_up .text{
    animation: marqueeLeft 40s linear infinite;
}
#section7 .record_list .text_wrap_down .text{
    animation: marqueeRight 44s linear infinite;
}

/* 너는 (text3,text4)을 2번 반복해놨으니 -50%가 자연 루프 */
@keyframes marqueeLeft{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marqueeRight{
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* section7 */




/* section8 */
#section8 .partner{margin-top:120px;}
#section8 .partner > h2{
    font-size:5vw;
    text-align: center;
    color: #000;
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out;
}
#section8 .partner.active > h2{
    opacity: 1;
    transform: translateY(0);
}




#section8 .partner ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top:60px;
    border: 5px solid #a4293d;
    border-right:0;
}
#section8 .partner ul li{
    position: relative;
    width:25%;
    border-right: 5px solid #a4293d;
    overflow: hidden;
}

#section8 .partner ul li::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.6);
}
#section8 .partner ul li .img img{
    display: block;
    width:100%;
    height:100%;
    object-fit:cover;
}
#section8 .partner ul li > h3{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size:2vw;
    color:#fff;
    text-align: center;
    width:100%;
    z-index: 9;
    transition: all .3s ease-in-out;
}


#section8 .partner ul li .box_overlay{
    position: absolute;
    top:0;
    left:0;
    transform: translateY(-100%);
    transition: all .3s ease-in-out;
    background-color: #a4293d;
    width:100%;
    height:100%;
}
#section8 .partner ul li:hover .box_overlay{transform: translateY(0);}
#section8 .partner ul li:hover > h3{opacity: 0;}


#section8 .partner ul li .box_overlay .tit{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
}
#section8 .partner ul li .box_overlay .tit h3{
    font-size:1.5vw;
    color:#fff;
    text-align: center;
    margin-bottom:20px;
}
#section8 .partner ul li .box_overlay .tit p{
    font-size:1vw;
    color:#fff;
    text-align: center;
}

#section8 .partner .partner_bottom{
    margin-top:120px;
    position: relative;
}
#section8 .partner .partner_bottom h2{
    font-size:2vw;
    color:#a4293d;
    text-align: center;
}
#section8 .partner .partner_bottom span{
    display: block;
    font-size:1.8vw;
    color:#333;
    text-align: center;
    margin-top:30px;
}

#section8 .partner .partner_bottom .txt{
    transition: all 1s ease-in-out;
    opacity: 0;
    transform: translateY(100%);
    margin-top:60px;
}
#section8 .partner .partner_bottom.active .txt{
    opacity: 1;
    transform: translateY(0);
}
#section8 .partner .partner_bottom.active .txt p{
    font-size:1.5vw;
    text-align: center;
    color:#000;
}

#section8 .partner .partner_bottom .food_img1{
    position: absolute;
    top: -225px;
    left: -25%;
    width: 32vw;
    transition: all 1s ease-in-out;
    opacity: 0;
}
#section8 .partner .partner_bottom.active .food_img1{
    top: -125px;
    left: -5%;
    opacity: 1;
}


#section8 .partner .partner_bottom .food_img2{
    position: absolute;
    bottom: -330px;
    right: -25%;
    width: 30vw;
    transition: all 1s ease-in-out;
    opacity: 0;
}
#section8 .partner .partner_bottom.active .food_img2{
    bottom: -230px;
    right: -5%;
    opacity: 1;
}

/* section8 */




/* section9 */
#section9{
    background: url(../img/section9/section9_bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    position: relative;
}
#section9::before{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.6);
}
#section9 .title h2 {color: #fff;}
#section9 .title p {color: #fff;}
#section9 .title .line {background-color: #fff;}

#section9 .inquiry{margin-top:120px;}
#section9 .inquiry ul{
    display: flex;
    flex-wrap: nowrap;
    align-items: top;
    justify-content: space-between;
    gap:200px;
}
#section9 .inquiry ul li{position: relative;}
#section9 .inquiry ul li:nth-of-type(1){width:35%;}
#section9 .inquiry ul li:nth-of-type(2){width:65%;}

#section9 .inquiry ul li .tit{
    opacity: 0;
    transition: all 1s ease-in-out;
    transform: translateX(-100%);
}
#section9 .inquiry.active ul li .tit{
    opacity: 1;
    transform: translateX(0);
}
#section9 .inquiry ul li .tit > span{
    display: block;
    font-size:1vw;
    color:#ccc;
    text-align: left;
}
#section9 .inquiry ul li .tit h2{
    font-size:3vw;
    color:#fff;
    text-align: left;
    padding:20px 0 40px 0;
}
#section9 .inquiry ul li .tit p{
    font-size:20px;
    color:#fff;
}
#section9 .inquiry ul li .img{
    margin-top:30px;
    position: relative;
    z-index: 1;
}


#section9 .inquiry .text_wrap{
    position:absolute;
    left:0;
    bottom:10%;
    width:100%;
    overflow:hidden;
    z-index: 0;
}

#section9 .inquiry .text_wrap .text{
    display:flex;
    width:max-content;
    animation:textRoll 25s linear infinite;
}

#section9 .inquiry .text_wrap .text img{
    display:block;
    width:auto;
    height:100px; /* 원하는 높이 */
    flex-shrink:0;
}

/* 무한 롤링 */
@keyframes textRoll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}


#section9 .inquiry .AWbbs_input_table .textarea{display: none;}
#section9 .inquiry .personal_content{display: none;}

#section9 .inquiry .form{
    transition: all 1s ease-in-out;
    opacity: 0;
    transform: translateX(100%);
}
#section9 .inquiry.active .form{
    opacity: 1;
    transform: translateX(0);
}
#section9 .inquiry .form .consult_cont{
    margin:0;
    border:0;
    padding:20px;
    border:1px solid #fff;
    border-radius: 10px;
}
#section9 .inquiry .form .consult_cont table tr{border:0;}
#section9 .inquiry .form .consult_cont table tr:nth-of-type(4) input{width:33%;}
#section9 .inquiry .form .consult_cont table tr:nth-of-type(4) select{width:30%;}
#section9 .inquiry .form .consult_cont table th{
    font-size:16px;
    color:#fff;
    font-weight: 300;
}
#section9 .inquiry .form .consult_cont table td{color:#fff;}
#section9 .inquiry .form .AWbbs_input_table{
    border: 0 !important;
    padding: 0 !important;
}

#section9 .inquiry .form .only_chk{color:#fff; font-weight: 300;}
#section9 .inquiry .form .only_chk.font input[type=checkbox] + label{line-height:1.5!important;}
#section9 .inquiry .form .AWbbs_input_table .top10{position: relative; margin: 0 !important;}
#section9 .inquiry .form .AWbbs_input_table .top10 .personal{
    position: absolute;
    top:22px;
    right:0;
    display: block;
    font-size:16px;
    color:#fff;
    font-weight: 300;
    transition: all .3s ease-in-out;
}
#section9 .inquiry .form .only_chk.font input[type=checkbox]:checked + label::before{background-color: #a4293d!important;}
#section9 .inquiry .form .AWbbs_input_table .top10 .personal:hover{color:#a4293d;}

#section9 .inquiry .form .AW-mem-btn button{
    width:100%;
    background-color: #fff;
    color:#a4293d;
    transition: all .3s ease-in-out;
    border-radius: 10px;
}
#section9 .inquiry .form .AW-mem-btn button:hover{
    background-color: #000;
    color:#fff;
}



#section9 .inquiry .personal_content{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
}
#section9 .inquiry .personal_content .personal_content_list{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:1200px;
    height:800px;
    padding:40px;
    background-color: #fff;
    border-radius: 20px;
}
#section9 .inquiry .personal_content .personal_content_list h3{
    font-size:32px;
    color:#000;
    text-align: center;
}
#section9 .inquiry .personal_content .personal_content_list .tit{
    width:100%;
    height:600px;
    overflow: auto;
    margin-top:30px;
}
#section9 .inquiry .personal_content .personal_content_list .tit p{
    font-size:16px;
    line-height:1.5!important;
    color:#333;
    font-weight: 300;
    padding:10px 0;
}

#section9 .inquiry .personal_content .personal_content_list .close{
    display: block;
    position: absolute;
    top:40px;
    right:40px;
    font-size:24px;
    color:#000;
    font-weight: 700;
}
/* section9 */

/****************************************************************************** section ******************************************************************************/
/* footer */
.footer{
    padding:30px 0;
    background-color: #4f4f4f;
}
.footer ul{
    display: flex;
    gap:40px;
}
.footer ul li .img img{width:170px;}
.footer ul li p{
    font-size:14px;
    line-height: 28px;
    color:#ccc;
    text-align: left;
    font-weight: 400;
}
.footer ul li span{
    display: block;
    font-size:13px;
    color:#fff;
    text-align: left;
    margin-top:10px;
    font-weight: 400;
}
/* footer */
/* ------------------------------------- section ------------------------------------- */


/* top_btn */
.topbtn{
    position: fixed;
    bottom:170px;
    right:60px;
    z-index:9999;
    width:50px;
    height:50px;
    border-radius: 40px;
    background-color:  #a4293d;
    transition: all 0.5s ease;
    opacity: 0;
}
.topbtn.on{opacity: 1;}

.topbtn img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:30px;
}

.topbtn:hover{
    transition: all 0.5s ease;
    background-color: #151515;
}
/* top_btn */