@charset "utf-8";

:root{
    --color1: #6c8446;
    --color2: #465024;
    --color3: #f9f9e7;
    --color4: #717171;
    --color5: #0d0d0d;
}
.p-Part{padding: 16rem 0;}

@media (max-width: 1280px) {
    .p-Part{padding: 14rem 0;}
}
@media (max-width: 980px) {
    .p-Part{padding: 12rem 0;}
}
@media (max-width: 768px) {
    .p-Part{padding: 10rem 0;}
}
@media (max-width: 480px) {
    .p-Part{padding: 8rem 0;}
}

#mVisual{position: sticky; top: 0; z-index: 0;}
#mVisual .visual{height: 100vh; min-height: 640px;}
#mVisual .visual > div{height: 100%;}
#mVisual .visual > div > div{height: 100%;}
#mVisual .visual .mv{width: 100%; height: 100%;}
@keyframes visualZoomOut {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
#mVisual .visual .mv .img{width: 100%; height: 100%; overflow: hidden;}
#mVisual .visual .mv .img img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.15);}
#mVisual .visual .mv.slick-active .img img{animation: visualZoomOut 3s ease-out forwards;}
#mVisual .visual .mv .inner{height: 100%; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#mVisual .visual .mv .inner .txt{text-align: center; text-shadow: 1px 1px 10px rgba(0,0,0,0.6);}
#mVisual .visual .mv .inner .txt h3{color: #fff; font-size: 50px; line-height: 1.3em;font-family: 'Nanum Myeongjo'; font-weight: normal;}
#mVisual .visual .mv .inner .txt p{font-size: 20px; color: #fff; margin-top: 25px; line-height: 1.6em; word-break: keep-all;;}
#mVisual .visual .mv .inner .btn_box{margin-top: 55px; display: flex; align-items: center; gap:30px;}
#mVisual .visual .mv .inner .btn_box .btn{font-size: 16px;}
#mVisual .visual .mv .inner .btn_box .btn a{display: block;}
#mVisual .visual .mv .inner .btn_box .btn.btn1 a{color: #000; background: #fff; line-height: 48px; border-radius: 40px; padding: 0 50px 0 30px; position: relative;}
#mVisual .visual .mv .inner .btn_box .btn.btn1 a::after{content: '→'; font-family: 'SUIT',sans-serif; position: absolute; top: 50%; transform: translateY(-50%); right:20px; font-weight: 600;}
#mVisual .visual .mv .inner .btn_box .btn.btn2 a{color: #fff;}

.progress_wrap{ position: absolute; bottom: 40px; right: 10%;  width: 200px; height: 3px; background: rgba(255,255,255,0.3); overflow: hidden; z-index: 100; }
.progress_bar{ width: 100%; height: 100%; position: relative; }
.progress_bar span{ position: absolute; left: 0; top: 0; display: block; height: 100%; background: #fff; transition: left 0.4s ease; }



@media (max-width: 1280px) {
    #mVisual .visual{height: 95vh;}
    #mVisual .visual .mv .inner .txt h3{font-size: 4.5rem;}
    #mVisual .visual .mv .inner .txt p{font-size: 1.8rem;}
    .progress_wrap{right: 5%;  width: 18rem; height: 0.3rem;}
}
@media (max-width: 768px) {
    #mVisual .visual{height: 100vh;}
    #mVisual .visual .mv .inner .txt h3{font-size: 4rem;}
}
@media (max-width: 480px) {
    #mVisual .visual .mv .inner .txt h3{font-size: 3rem;}
    #mVisual .visual .mv .inner .txt p{font-size: 1.6rem;margin-top: 2rem;}
    .progress_wrap{right: auto; transform: translatex(-50%); left: 50%;  width: 15rem; bottom: 3rem; height: 2px;}
}

#m_company{
    text-align: center;
    background: #f7f8f8;
    position: relative; /* sticky 제거 */
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
#m_company h3{margin: 9rem 0 6rem; font-size: 3rem; color: var(--color5);}
#m_company p{font-size: 2rem; line-height: 3.5rem;color: var(--color5);}
.split_txt{overflow: hidden;}
.split_txt span{ display: inline-block; transform: translateY(100%); opacity: 0; }
.split_txt.on span{ animation-name: splitUp; animation-duration: .6s; animation-timing-function: ease; animation-fill-mode: forwards; animation-delay: var(--delay); }
@keyframes splitUp{
    0%{ transform: translateY(100%); opacity: 0;}
    100%{transform: translateY(0);opacity: 1;}
}

@media screen and (max-width:1280px){
    #m_company img{width: 20rem;}
    #m_company h3{font-size: 3.5rem;}
    #m_company p{font-size: 2rem; line-height: 3.5rem;}
}
@media screen and (max-width:480px){
    #m_company img{width: 16rem;}
    #m_company h3{font-size: 3rem; margin: 7rem 0 4rem;}
    #m_company p{font-size: 1.7rem; line-height: 3rem;}
}


#m_brand{ position: relative; z-index: 2; background: #fff; }
#m_brand ul li{display: flex; align-items: center;align-items: stretch;}
#m_brand ul li:nth-child(even) .img{order: 2;}
#m_brand ul li:nth-child(even) .txt{order: 1; background: #f8f8f8;}
#m_brand ul li .img{ position: relative; width: 50%; flex-shrink: 0; overflow: hidden;}
#m_brand ul li .img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
#m_brand ul li .txt{background: #f9f9e7; width:50%; height: 100%; padding-left: 10rem;}
#m_brand ul li .txt h3{color: var(--color5);font-size: 3rem;}
#m_brand ul li .txt p{color: var(--color5); font-size: 2rem; line-height: 3rem;margin: 30rem 0 3rem;}
#m_brand ul li .txt a{ position: relative; display: inline-flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; color: #fff; background: var(--color1); overflow: hidden; z-index: 1; font-size: 2rem; font-weight: normal; transition: 0.3s;}
#m_brand ul li .txt a:hover{background: #50544a; transition: 0.3s;}

@media screen and (max-width:1280px){
    #m_brand ul li .txt{padding-left: 7rem;}
    #m_brand ul li .txt h3{font-size: 3rem;}
    #m_brand ul li .txt p{font-size: 2rem; line-height: 3rem; margin: 20rem 0 3rem;}
}
@media screen and (max-width:980px){
    #m_brand ul li .txt{padding-left: 4rem;}
    #m_brand ul li .img{width: 50%;}
    #m_brand ul li .txt{width: 50%;}
    #m_brand ul li .txt p{font-size: 1.8rem;}
}
@media screen and (max-width:768px){
    #m_brand ul li{flex-wrap: wrap;}
    #m_brand ul li:nth-child(even) .img{order: 1;}
    #m_brand ul li:nth-child(even) .txt{order: 2;}
    #m_brand ul li .img{width: 100%;height: 40rem;}
    #m_brand ul li .txt{width: 100%;}
    #m_brand ul li .txt p{margin: 10rem 0 3rem;}
}
@media screen and (max-width:480px){
    #m_brand ul li .img{height: 30rem;}
    #m_brand ul li .txt{padding-left: 3rem;}
    #m_brand ul li .txt h3{font-size: 2.5rem;}
    #m_brand ul li .txt p{ margin: 4rem 0 3rem;font-size: 1.6rem; line-height: 3rem;}
    #m_brand ul li .txt a{padding: 1rem 2rem; font-size: 1.7rem;}
}


#m_product{text-align: center; overflow: hidden; position: relative;z-index: 10; background: #fff;}
#m_product h3{ color: var(--color5); font-size: 3rem; margin-bottom: 7rem; }
#m_product ul{ margin: 0; padding: 0; }
#m_product ul li a{display: block;}
#m_product ul li img{display: block;width: 100%;object-fit: cover;}
#m_product .product_progress{position: relative;width: calc(100%/3);height: 4px;margin: 6rem auto 0;background: #d5d5d5;}
#m_product .product_progress span{ position: absolute; left: 0; top: 0; height: 100%; background: var(--color1); transition: left 0.4s ease;}

@media screen and (max-width:1280px){
    #m_product h3{font-size: 3rem; margin-bottom: 5rem; }
}
@media screen and (max-width:768px){
    #m_product h3{ margin-bottom: 3rem; }
    #m_product .product_progress{height: 3px; margin: 3rem auto 0;width: calc(100%/2);}
}

#m_last{background: var(--color3); text-align: center; position: relative; z-index: 10;}
#m_last h3{color: var(--color5); font-size: 3.5rem; line-height: 5rem; margin-bottom: 7rem;}
#m_last .vid{width:100%;aspect-ratio:16 / 9;overflow:hidden;}
#m_last .vid iframe{width:100%; height:100%; display:block;pointer-events:none;}

@media screen and (max-width:1280px){
    #m_last h3{font-size: 3.5rem; line-height: 5.5rem; margin-bottom: 5rem;}
}
@media screen and (max-width:480px){
    #m_last h3{font-size: 3rem; line-height: 5rem; margin-bottom: 3rem;}
}