@charset "utf-8";

@font-face {
    font-family: 'Recipekorea';
    src: url('Recipekorea.otf') format('opentype'),
         url('Recipekorea.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* m_txt */
.m_txt{}
.m_txt h4{font-size: 20px; font-weight: 800; color:#000; margin-bottom: 15px;}
.m_txt h3{font-family: 'Recipekorea'; font-weight: 400; color:#000; font-size: 52px;}
.m_txt p{font-size: 18px; font-weight: 500; color:#666666; line-height: 1.6em; margin-top: 20px;}

@media  all and (max-width:1280px) {
    .m_txt h3{font-size: 46px;}
}
@media  all and (max-width:1024px) {
    .m_txt h4{font-size: 19px;}
    .m_txt h3{font-size: 42px;}
    .m_txt p{font-size: 17px; margin-top: 17px;}
}
@media  all and (max-width:768px) {
    .m_txt h4{margin-bottom: 11px;}
    .m_txt h3{font-size: 38px;}
}
@media  all and (max-width:500px) {
    .m_txt h4{font-size: 18px;}
    .m_txt h3{font-size: 35px;}
    .m_txt p{font-size: 16px; margin-top: 14px;}
}

/* mVisual */
#mVisual{height: 920px; width: 100%; position: relative; overflow: hidden;}
#mVisual .daisy{position: absolute; left: 20%; bottom: 0; z-index: 10;}
#mVisual .daisy img{max-width: 20vw; min-width: 180px;}
#mVisual .visual{height: 100%;}

/* waves animation styling */
#mVisual .waves-container {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 180px; /* 너무 과하지 않고 안정감 있는 높이로 재조정 (220px -> 180px) */
    min-height: 120px;
    max-height: 220px;
    z-index: 5;
    pointer-events: none;
}

#mVisual .waves {
    position: relative;
    width: 100%;
    height: 100%;
    transform: scaleY(1.35); /* 세로 비율을 적절히 조절하여 부드럽고 균형 잡힌 물결 형성 (1.7 -> 1.35) */
    transform-origin: bottom;
}

#mVisual .parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; /* 조금 더 우아하게 흘러가도록 움직임 튜닝 */
}
#mVisual .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 9s;
}
#mVisual .parallax > use:nth-child(2) {
    animation-delay: -4s;
    animation-duration: 14s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}


#mVisual .visual > div{height: 100%;}
#mVisual .visual > div > div{height: 100%;}
#mVisual .visual .mv{height: 100%;}
#mVisual .visual .mv .img{height: 100%;}
#mVisual .visual .mv .img img{width: 100%; height: 100%; object-fit: cover;}
#mVisual .visual .mv .inner{height: 100%; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; top: 0; display: flex; flex-direction: column; justify-content: center;}
#mVisual .visual .mv .inner .txt{display: flex; flex-direction: column; position: absolute; right:0; top: 50%; transform: translateY(-50%);}
#mVisual .visual .mv .inner .txt h4{font-size: 40px; font-weight: 800; color:#ffc937;}
#mVisual .visual .mv .inner .txt h3{font-size: 64px; font-weight: 800; color:#fff; margin: 10px 0 20px;}
#mVisual .visual .mv .inner .txt p{font-size: 22px; font-weight: 500; color:#fff; line-height: 1.7em;}
#mVisual .visual .mv .inner .progress{display: flex; align-items: center; margin-top: 70px; gap:20px;}
#mVisual .visual .mv .inner .progress .now{color:var(--color1); font-size: 18px; font-weight: 700;}
#mVisual .visual .mv .inner .progress .gague{width: 186px; background: rgba(255,255,255,0.1); border-radius: 1.5px; height: 3px; position: relative;}
#mVisual .visual .mv .inner .progress .gague .bar{background-color:var(--color1); height: 3px; width: 0; position: absolute; left: 0; top: 0; transition: none;}
#mVisual .visual .mv .inner .progress .gague .bar.active { animation: gaugeProgressAnimation 3s linear forwards; }
#mVisual .visual .mv .inner .progress .gague .bar.paused { animation-play-state: paused; }

@keyframes gaugeProgressAnimation {
    0% { width: 0; }
    100% { width: 100%; }
}
#mVisual .visual .mv .inner .progress .all{font-size: 18px; color:#fff; opacity: 0.3; font-weight: 700;}
#mVisual .visual .mv .inner .progress .play_btn{}
#mVisual .visual .mv .inner .progress .play_btn > div{display: none; cursor: pointer;}
#mVisual .visual .mv .inner .progress .play_btn > div.on{display: block;}
#mVisual .visual .mv .inner .progress .play_btn > div img{height: 14px;}

@media all and (max-width:1280px) {
    #mVisual{height: 100vh;}
    #mVisual .visual .mv .inner .txt h4{font-size: 36px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 56px; margin: 5px 0 15px;}
    #mVisual .visual .mv .inner .txt p{font-size: 20px; line-height: 1.6em;}
    #mVisual .visual .mv .inner .progress{margin-top: 60px; gap:15px;}
    #mVisual .visual .mv .inner .progress .now{font-size: 17px;}
    #mVisual .visual .mv .inner .progress .all{font-size: 17px;}
    #mVisual .waves-container {
        height: 95px;
        min-height: 70px;
    }
    #mVisual .waves {
        transform: scaleY(1.15);
    }
}
@media all and (max-width:1024px) {
    #mVisual .visual .mv .inner .txt h4{font-size: 32px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 52px;}
    #mVisual .visual .mv .inner .txt p{font-size: 19px;}
    #mVisual .visual .mv .inner .progress .now{font-size: 16px;}
    #mVisual .visual .mv .inner .progress .gague{width: 150px;}
    #mVisual .visual .mv .inner .progress .all{font-size: 16px;}
}
@media  all and (max-width:768px) {
    #mVisual{height: 88vh;}
    #mVisual .daisy{left: auto; right: 3%;}
    #mVisual .daisy img{min-width: 150px;}
    #mVisual .visual .mv .img img{object-position: 32% center;}
    #mVisual .visual .mv .inner .txt{right: auto; left:0;} 
    #mVisual .visual .mv .inner .txt h4{font-size: 28px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 46px;}
    #mVisual .visual .mv .inner .txt p{font-size: 18px;}
    #mVisual .waves-container {
        height: 80px;
        min-height: 55px;
    }
    #mVisual .waves {
        transform: scaleY(1.1);
    }
}
@media  all and (max-width:500px) {
    #mVisual .visual .mv .inner .txt h4{font-size: 24px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 38px;}
    #mVisual .visual .mv .inner .txt p{font-size: 17px;}
    #mVisual .visual .mv .inner .progress .gague{width: 120px;}
}


/* sec1 */
#sec1{padding: 160px 0 140px; overflow: hidden; position: relative;}
#sec1 .daisy{position: absolute; bottom: 12%; left: 3%;}
#sec1 .daisy img{}
#sec1 .s-inner{display: flex; align-items: center;}
#sec1 .s-inner .l_cont{width: 32.8125%;}
#sec1 .s-inner .l_cont .m_txt{}
#sec1 .s-inner .l_cont .arrow{display: flex; align-items: center; margin-top: 40px; gap:20px;}
#sec1 .s-inner .l_cont .arrow > div{font-family: 'SUIT', sans-serif; font-size: 40px; font-weight: 500; color:#ee53c4; cursor: pointer;}
#sec1 .s-inner .r_cont{width: calc(100% - 32.8125%); overflow: visible;}
#sec1 .s-inner .r_cont .list{width: 140%; overflow: hidden;}

/* slick slide margin & overflow override */
#sec1 .s-inner .r_cont .list .slick-list {
    overflow: visible; /* 물방울 그림자가 다음 영역으로 자연스럽게 튀어나가도록 허용 */
}

#sec1 .s-inner .r_cont .list .box{
    width: 380px; /* 물방울이 커짐에 따라 슬라이드 박스 가로폭을 380px로 추가 확대 */
    text-align: center;
    position: relative;
    padding: 20px 0;
    overflow: visible;
    margin-right: 20px;
}

#sec1 .s-inner .r_cont .list .box a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 360px; /* 기존 330px -> 360px로 한 단계 더 확대 */
    height: 360px; /* 기존 330px -> 360px로 한 단계 더 확대 */
    margin: 0 auto;
    text-decoration: none;
    overflow: visible;
    padding: 20px 0;
}

/* bg-blobs container */
#sec1 .s-inner .r_cont .list .box .bg-blobs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px; /* 기존 290px -> 320px로 한 단계 더 확대 */
    height: 320px; /* 기존 290px -> 320px로 한 단계 더 확대 */
    z-index: 1;
    pointer-events: none;
}

#sec1 .s-inner .r_cont .list .box .blob {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 1. 메인 100% 오파시티 물방울 */
#sec1 .s-inner .r_cont .list .box .blob-main {
    background-color: var(--blob-color);
    z-index: 2;
}

/* 2. 서브 낮은 오파시티 물방울 (뒤배경) */
#sec1 .s-inner .r_cont .list .box .blob-sub {
    background-color: var(--blob-color);
    opacity: 0.25;
    z-index: 1;
}

/* 진료 과목별 테마 컬러 및 개별 고유 애니메이션 정의 */
#sec1 .s-inner .r_cont .list .box.box1 { 
    --blob-color: #ffbe38; 
}
#sec1 .s-inner .r_cont .list .box.box1 .blob-main { animation: blob-anim-1-main 24s linear infinite; }
#sec1 .s-inner .r_cont .list .box.box1 .blob-sub { animation: blob-anim-1-sub 28s linear infinite; }

#sec1 .s-inner .r_cont .list .box.box2 { 
    --blob-color: #f37321; 
}
#sec1 .s-inner .r_cont .list .box.box2 .blob-main { animation: blob-anim-2-main 26s linear infinite; }
#sec1 .s-inner .r_cont .list .box.box2 .blob-sub { animation: blob-anim-2-sub 32s linear infinite; }

#sec1 .s-inner .r_cont .list .box.box3 { 
    --blob-color: #bfa5d7; 
}
#sec1 .s-inner .r_cont .list .box.box3 .blob-main { animation: blob-anim-3-main 28s linear infinite; }
#sec1 .s-inner .r_cont .list .box.box3 .blob-sub { animation: blob-anim-3-sub 34s linear infinite; }

#sec1 .s-inner .r_cont .list .box.box4 { 
    --blob-color: #8dc63f; /* 연두 */
}
#sec1 .s-inner .r_cont .list .box.box4 .blob-main { animation: blob-anim-4-main 25s linear infinite; }
#sec1 .s-inner .r_cont .list .box.box4 .blob-sub { animation: blob-anim-4-sub 30s linear infinite; }

#sec1 .s-inner .r_cont .list .box.box5 { 
    --blob-color: #29abe2; /* 하늘 */
}
#sec1 .s-inner .r_cont .list .box.box5 .blob-main { animation: blob-anim-5-main 27s linear infinite; }
#sec1 .s-inner .r_cont .list .box.box5 .blob-sub { animation: blob-anim-5-sub 33s linear infinite; }

#sec1 .s-inner .r_cont .list .box.box6 { 
    --blob-color: #f173ac; /* 핑크 */
}
#sec1 .s-inner .r_cont .list .box.box6 .blob-main { animation: blob-anim-6-main 23s linear infinite; }
#sec1 .s-inner .r_cont .list .box.box6 .blob-sub { animation: blob-anim-6-sub 29s linear infinite; }

/* 호버 시 물방울 역동적 피드백 */
#sec1 .s-inner .r_cont .list .box a:hover .blob-main {
    transform: scale(1.08);
}
#sec1 .s-inner .r_cont .list .box a:hover .blob-sub {
    transform: scale(1.15) rotate(15deg);
}

/* 콘텐츠 배치 */
#sec1 .s-inner .r_cont .list .box a .img{
    position: relative;
    z-index: 3;
    margin-bottom: 20px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#sec1 .s-inner .r_cont .list .box a:hover .img {
    transform: translateY(-12px) scale(1.05);
}
#sec1 .s-inner .r_cont .list .box a .img img{
    margin: 0 auto;
    height: 180px; /* 요청하신 대로 치아 일러스트 크기를 180px로 대폭 확대 */
    object-fit: contain;
}
#sec1 .s-inner .r_cont .list .box a p{
    font-size: 24px; 
    font-weight: 700; 
    color:#fff; 
    text-align: center;
    position: relative;
    z-index: 3;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------
   12가지의 고유한 왜곡 및 회전 궤적 물방울 애니메이션 (Slick Fluid Blobs)
   ---------------------------------------------------- */

/* Box 1: 영유아 구강검진 (극적인 물방울/조약돌 왜곡) */
@keyframes blob-anim-1-main {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
    50% { border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; transform: rotate(180deg) scale(1.04); }
    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(360deg); }
}
@keyframes blob-anim-1-sub {
    0% { border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; transform: rotate(0deg) scale(1.05); }
    50% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(-180deg) scale(0.95); }
    100% { border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; transform: rotate(-360deg) scale(1.05); }
}

/* Box 2: 충치치료 (대각선 찌그러짐) */
@keyframes blob-anim-2-main {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
    50% { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; transform: rotate(180deg) scale(1.04); }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg); }
}
@keyframes blob-anim-2-sub {
    0% { border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%; transform: rotate(0deg) scale(1.05); }
    50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(-180deg) scale(0.95); }
    100% { border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%; transform: rotate(-360deg) scale(1.05); }
}

/* Box 3: 보철치료 (세로형 왜곡 비대칭) */
@keyframes blob-anim-3-main {
    0% { border-radius: 50% 50% 30% 70% / 50% 30% 70% 50%; transform: rotate(0deg); }
    50% { border-radius: 30% 70% 70% 30% / 30% 40% 60% 70%; transform: rotate(180deg) scale(1.04); }
    100% { border-radius: 50% 50% 30% 70% / 50% 30% 70% 50%; transform: rotate(360deg); }
}
@keyframes blob-anim-3-sub {
    0% { border-radius: 60% 40% 50% 50% / 50% 30% 70% 50%; transform: rotate(0deg) scale(1.05); }
    50% { border-radius: 50% 50% 30% 70% / 50% 30% 70% 50%; transform: rotate(-180deg) scale(0.95); }
    100% { border-radius: 60% 40% 50% 50% / 50% 30% 70% 50%; transform: rotate(-360deg) scale(1.05); }
}

/* Box 4: 교정치료 (가로형 찌그러진 오뚜기) */
@keyframes blob-anim-4-main {
    0% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: rotate(0deg); }
    50% { border-radius: 70% 30% 30% 70% / 30% 70% 30% 70%; transform: rotate(180deg) scale(1.04); }
    100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: rotate(360deg); }
}
@keyframes blob-anim-4-sub {
    0% { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; transform: rotate(0deg) scale(1.05); }
    50% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: rotate(-180deg) scale(0.95); }
    100% { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; transform: rotate(-360deg) scale(1.05); }
}

/* Box 5: 예방치료 (한쪽이 뾰족한 해파리) */
@keyframes blob-anim-5-main {
    0% { border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%; transform: rotate(0deg); }
    50% { border-radius: 50% 50% 70% 30% / 50% 30% 70% 50%; transform: rotate(180deg) scale(1.04); }
    100% { border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%; transform: rotate(360deg); }
}
@keyframes blob-anim-5-sub {
    0% { border-radius: 30% 70% 30% 70% / 50% 60% 40% 50%; transform: rotate(0deg) scale(1.05); }
    50% { border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%; transform: rotate(-180deg) scale(0.95); }
    100% { border-radius: 30% 70% 30% 70% / 50% 60% 40% 50%; transform: rotate(-360deg) scale(1.05); }
}

/* Box 6: 보존치료 (독특한 유기체 찌그러짐) */
@keyframes blob-anim-6-main {
    0% { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; transform: rotate(0deg); }
    50% { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; transform: rotate(180deg) scale(1.04); }
    100% { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; transform: rotate(360deg); }
}
@keyframes blob-anim-6-sub {
    0% { border-radius: 60% 40% 30% 70% / 50% 30% 70% 50%; transform: rotate(0deg) scale(1.05); }
    50% { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; transform: rotate(-180deg) scale(0.95); }
    100% { border-radius: 60% 40% 30% 70% / 50% 30% 70% 50%; transform: rotate(-360deg) scale(1.05); }
}

@media  all and (max-width:1280px) {
    #sec1{padding: 140px 0 120px;}
    #sec1 .s-inner .l_cont{width: 40%;}
    #sec1 .s-inner .l_cont .arrow{margin-top: 35px;}
    #sec1 .s-inner .l_cont .arrow > div{font-size: 36px;}
    #sec1 .s-inner .r_cont{width: 60%;}
    #sec1 .s-inner .r_cont .list .box{width: 360px; margin-right: 15px;}
    #sec1 .s-inner .r_cont .list .box a{width: 340px; height: 340px; padding: 15px 0;}
    #sec1 .s-inner .r_cont .list .box .bg-blobs{width: 300px; height: 300px;}
    #sec1 .s-inner .r_cont .list .box a .img{margin-bottom: 18px;}
    #sec1 .s-inner .r_cont .list .box a .img img{height: 170px;}
    #sec1 .s-inner .r_cont .list .box a p{font-size: 23px;}
}
@media  all and (max-width:1024px) {
    #sec1{padding: 120px 0 100px;}
    #sec1 .s-inner .l_cont .arrow{margin-top: 32px;}
    #sec1 .s-inner .l_cont .arrow > div{font-size: 32px;}
    #sec1 .s-inner .r_cont .list .box{width: 330px; margin-right: 15px;}
    #sec1 .s-inner .r_cont .list .box a{width: 310px; height: 310px; padding: 15px 0;}
    #sec1 .s-inner .r_cont .list .box .bg-blobs{width: 270px; height: 270px;}
    #sec1 .s-inner .r_cont .list .box a .img{margin-bottom: 15px;}
    #sec1 .s-inner .r_cont .list .box a .img img{height: 155px;}
    #sec1 .s-inner .r_cont .list .box a p{font-size: 21px;}
}
@media  all and (max-width:768px) {
    #sec1{padding: 110px 0 90px;}
    #sec1 .daisy{position: absolute; bottom:3%; left: 3%;}
    #sec1 .daisy img{width: 25vw;}
    #sec1 .s-inner{flex-direction: column;}
    #sec1 .s-inner .l_cont{width: 100%;}
    #sec1 .s-inner .l_cont .m_txt p br{display: none;}
    #sec1 .s-inner .l_cont .arrow{margin-top: 28px; display: none;}
    #sec1 .s-inner .l_cont .arrow > div{font-size: 30px;}
    #sec1 .s-inner .r_cont{width: 100%; margin-top: 30px;}
    #sec1 .s-inner .r_cont .list .box{width: 380px; margin-right: 20px;}
    #sec1 .s-inner .r_cont .list .box a{width: 360px; height: 360px; padding: 20px 0;}
    #sec1 .s-inner .r_cont .list .box .bg-blobs{width: 320px; height: 320px;}
    #sec1 .s-inner .r_cont .list .box a .img{margin-bottom: 20px;}
    #sec1 .s-inner .r_cont .list .box a .img img{height: 180px;}
    #sec1 .s-inner .r_cont .list .box a p{font-size: 24px;}
}
@media  all and (max-width:500px) {
    #sec1{padding: 90px 0 70px;}
    #sec1 .s-inner .l_cont .arrow{margin-top: 25px;}
    #sec1 .s-inner .l_cont .arrow > div{font-size: 28px;}
    #sec1 .s-inner .r_cont{margin-top: 25px;}
    #sec1 .s-inner .r_cont .list .box{width: 300px; margin-right: 15px;}
    #sec1 .s-inner .r_cont .list .box a{width: 280px; height: 280px; padding: 15px 0;}
    #sec1 .s-inner .r_cont .list .box .bg-blobs{width: 250px; height: 250px;}
    #sec1 .s-inner .r_cont .list .box a .img{margin-bottom: 15px;}
    #sec1 .s-inner .r_cont .list .box a .img img{height: 140px;}
    #sec1 .s-inner .r_cont .list .box a p{font-size: 19px;}
}

/* sec2 */
#sec2{background: #fdfbf4 url(/images/main/sec2_bg.webp) no-repeat bottom center / 100% auto; padding: 120px 0 140px; position: relative;}
#sec2 .daisy{position: absolute; right: 10%; top: -2%;}
#sec2 .s-inner{}
#sec2 .s-inner .m_txt{text-align: center;}
#sec2 .s-inner .cont{margin-top: 40px; display: flex; gap:30px; overflow: visible;}
#sec2 .s-inner .cont li{
    aspect-ratio: 1 / 1; 
    border-radius: 20px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}

#sec2 .s-inner .cont.js-ready li {
    opacity: 0;
    transition: transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.7s ease;
}

#sec2 .s-inner .cont.js-ready li:nth-child(1){
    transform: translateX(110%) rotate(5deg) scale(0.92);
    z-index: 1;
}
#sec2 .s-inner .cont.js-ready li:nth-child(2){
    transform: scale(0.92);
    z-index: 2;
    transition-delay: 0.1s;
}
#sec2 .s-inner .cont.js-ready li:nth-child(3){
    transform: translateX(-110%) rotate(-5deg) scale(0.92);
    z-index: 3;
    transition-delay: 0.2s;
}

#sec2 .s-inner .cont.js-ready.active li{
    opacity: 1;
}
#sec2 .s-inner .cont.js-ready.active li:nth-child(1){
    transform: translateX(0) rotate(1.5deg) scale(1);
    transition-delay: 0s;
}
#sec2 .s-inner .cont.js-ready.active li:nth-child(2){
    transform: translateX(0) rotate(-1.5deg) scale(1);
    transition-delay: 0.1s;
}
#sec2 .s-inner .cont.js-ready.active li:nth-child(3){
    transform: translateX(0) rotate(1.5deg) scale(1);
    transition-delay: 0.2s;
}
#sec2 .s-inner .cont li a{width: 100%; height: 100%; display: block; position: relative; padding: 60px 50px;}
#sec2 .s-inner .cont li:nth-child(1) a{background-color: #ffc939; color:#000;}
#sec2 .s-inner .cont li:nth-child(2) a{background-color: #2a8ac1; color:#fff;}
#sec2 .s-inner .cont li:nth-child(3) a{background-color: #3e7261; color:#fff;}
#sec2 .s-inner .cont li a .txt{}
#sec2 .s-inner .cont li a .txt h4{opacity: 0.8; font-size: 20px; font-weight: 500;}
#sec2 .s-inner .cont li a .txt h3{font-size: 42px; margin-top: 5px; font-weight: 800;}
#sec2 .s-inner .cont li a .img{position: absolute; bottom: 0; right: 0;}
#sec2 .s-inner .cont li a .img img{}

@media all and (max-width:1400px) {
    #sec2{padding: 100px 0 120px;}
    #sec2 .s-inner .cont li a{padding: 50px 40px;}
    #sec2 .s-inner .cont li a .img img{max-height: 17vw;}
    #sec2 .s-inner .cont li a .txt h4{font-size: 19px;}
    #sec2 .s-inner .cont li a .txt h3{font-size: 37px;}
}
@media  all and (max-width:1280px) {
    #sec2 .s-inner .cont li a{padding: 45px 35px;}
    #sec2 .s-inner .cont li a .txt h4{font-size: 18px;}
    #sec2 .s-inner .cont li a .txt h3{font-size: 34px;}
}
@media all and (max-width:1024px) {
    #sec2{padding: 90px 0 110px; background-size: 250% auto;}
    #sec2 .s-inner .cont{flex-direction: column; align-items: center; gap: 0;}
    #sec2 .s-inner .cont li{max-width: 340px; margin: 0;}
    #sec2 .s-inner .cont li a .img img{max-height: 100%;}
    #sec2 .s-inner .cont li:nth-child(1) a .img img{max-height: 200px}
    #sec2 .s-inner .cont li:nth-child(2) a .img img{max-height: 220px;}
    #sec2 .s-inner .cont li:nth-child(3) a .img img{max-height: 180px;}
}
@media all and (max-width:768px) {
    #sec2{padding: 80px 0 100px;}
    #sec2 .s-inner .cont li a{padding: 40px 30px;}
    #sec2 .s-inner .cont li a .txt h4{font-size: 17px;}
    #sec2 .s-inner .cont li a .txt h3{font-size: 30px;}
    #sec2 .daisy{right: 5%;}
    #sec2 .daisy img{width: 25vw;}
}
@media all and (max-width:500px) {
    #sec2{padding: 70px 0 90px;}
    #sec2 .s-inner .cont li{max-width: 310px;}
    #sec2 .s-inner .cont li:nth-child(1) a .img img{max-height: 180px}
    #sec2 .s-inner .cont li:nth-child(2) a .img img{max-height: 200px;}
    #sec2 .s-inner .cont li:nth-child(3) a .img img{max-height: 165px;}
    #sec2 .s-inner .cont li a .txt h4{font-size: 16px;}
    #sec2 .s-inner .cont li a .txt h3{font-size: 27px;}
}

/* sec3 */
#sec3{padding: 140px 0;}
#sec3 .s-inner{display: flex; align-items: center;}
#sec3 .s-inner .l_cont{width: 37.5%;}
#sec3 .s-inner .l_cont .m_txt{margin-bottom: 50px;}
#sec3 .s-inner .l_cont .info_box{}
#sec3 .s-inner .l_cont .info_box h4{font-family: 'Recipekorea'; font-size: 18px; color:#000; background-color: var(--color1); display: inline-block; font-weight: 400; padding: 15px 30px 10px; border-radius: 60px; margin-bottom: 12px;}
#sec3 .s-inner .l_cont .info_box .tel{font-family: 'Recipekorea'; font-size: 30px; color:#000;}
#sec3 .s-inner .l_cont .info_box dl{display: flex; align-items: center;}
#sec3 .s-inner .l_cont .info_box dl + dl{margin-top: 10px;}
#sec3 .s-inner .l_cont .info_box dl dt{font-size: 18px; color:#000; font-weight: 800; width: 80px;}
#sec3 .s-inner .l_cont .info_box dl dd{width: calc(100% - 80px); font-size: 18px; color:#000000;}
#sec3 .s-inner .l_cont .info_box + .info_box{margin-top: 30px;}
#sec3 .s-inner .l_cont .info_box + .info_box h4{color:#fff; background-color: var(--color2);}
#sec3 .s-inner .r_cont{width: calc(100% - 37.5%); border-radius: 20px; overflow: hidden;}
#sec3 .s-inner .r_cont .box{position: relative;}
#sec3 .s-inner .r_cont .box .img{width: 100%;}
#sec3 .s-inner .r_cont .box .img img{width: 100%; object-fit: cover;}
#sec3 .s-inner .r_cont .box .txt{position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.4); padding: 20px 30px; display: flex; align-items: center; justify-content: space-between;}
#sec3 .s-inner .r_cont .box .txt h4{font-size: 24px; color:#fff;}
#sec3 .s-inner .r_cont .box .txt .arrow{display: flex; align-items: center; gap:10px;}
#sec3 .s-inner .r_cont .box .txt .arrow > div{font-size: 24px; font-family: 'SUIT', sans-serif; color:#000; width: 46px; height: 46px; border-radius: 100%; background-color: #fff; display: flex; align-items: center;justify-content: center; cursor: pointer;}

@media  all and (max-width:1400px) {
    #sec3 .s-inner .l_cont .m_txt{margin-bottom: 40px;}
}
@media  all and (max-width:1280px) {
    #sec3{padding: 120px 0;}
    #sec3 .s-inner .l_cont .m_txt{margin-bottom: 40px;}
    #sec3 .s-inner .l_cont .info_box .tel{font-size: 27px;}
    #sec3 .s-inner .l_cont .info_box h4{font-size: 17px; padding: 13px 25px 8px;}
    #sec3 .s-inner .l_cont .info_box dl dt{font-size: 17px; width: 75px;}
    #sec3 .s-inner .l_cont .info_box dl dd{font-size: 17px; width: calc(100%- 75px);}
    #sec3 .s-inner .l_cont .info_box + .info_box{margin-top: 25px;}
    #sec3 .s-inner .r_cont .box .txt{padding: 17px 25px;}
    #sec3 .s-inner .r_cont .box .txt h4{font-size: 22px;}
    #sec3 .s-inner .r_cont .box .txt .arrow > div{width: 42px; height: 42px; font-size: 22px;}
}
@media  all and (max-width:1024px) {
    #sec3{padding: 110px 0;}
    #sec3 .s-inner{flex-direction: column;}
    #sec3 .s-inner .l_cont{width: 100%;}
    #sec3 .s-inner .l_cont .m_txt{margin-bottom: 35px;}
    #sec3 .s-inner .l_cont .info_box{width: 50%; display:inline-block; float: left;}
    #sec3 .s-inner .l_cont .info_box + .info_box{margin-top: 0;}
    #sec3 .s-inner .l_cont .info_box .tel{font-size: 25px;}
    #sec3 .s-inner .r_cont{width: 100%; clear: both; margin-top: 40px;}
    #sec3 .s-inner .r_cont .box .txt{padding:14px 20px;}
    #sec3 .s-inner .r_cont .box .txt h4{font-size: 20px;}
    #sec3 .s-inner .r_cont .box .txt .arrow > div{width: 40px; height: 40px; font-size: 21px;}
}
@media  all and (max-width:768px) {
    #sec3{padding: 95px 0;}
    #sec3 .s-inner .l_cont .m_txt{margin-bottom: 30px;}
    #sec3 .s-inner .l_cont .info_box h4{font-size: 16px; padding: 11px 22px 6px;}
    #sec3 .s-inner .l_cont .info_box .tel{font-size: 23px;}
    #sec3 .s-inner .l_cont .info_box dl dt{font-size: 16px; width: 70px;}
    #sec3 .s-inner .l_cont .info_box dl dd{font-size: 16px; width: calc(100%- 70px);}
    #sec3 .s-inner .r_cont .box .txt{padding:12px 18px;}
    #sec3 .s-inner .r_cont .box .txt h4{font-size: 18px;}
    #sec3 .s-inner .r_cont .box .txt .arrow{gap:8px}
    #sec3 .s-inner .r_cont .box .txt .arrow > div{width: 38px; height: 38px; font-size: 20px;}
}
@media  all and (max-width:500px) {
    #sec3{padding: 80px 0;}
    #sec3 .s-inner .l_cont .m_txt{margin-bottom: 25px;}
    #sec3 .s-inner .l_cont .info_box{width: 100%; float:none;}
    #sec3 .s-inner .l_cont .info_box + .info_box{margin-top: 20px;}
}

/* sec4 */
#sec4{position: relative;}
#sec4 .map{}
#sec4 .map .root_daum_roughmap .wrap_controllers{display: none;}
#sec4 .map .root_daum_roughmap .cont .section.lst{display: none;}
#sec4 .s-inner{position: absolute; height: 100%; left: 50%; transform: translateX(-50%); top: 0; display: flex; align-items: center; z-index: 99; pointer-events: none;}
#sec4 .s-inner .map_info{width: 420px; background-color: var(--color2); border-radius: 20px; padding: 40px 35px;}
#sec4 .s-inner .map_info  .top{text-align: center;}
#sec4 .s-inner .map_info  .top h3{font-family: 'Recipekorea'; color:#fff; font-weight: 400; margin-bottom: 10px; font-size: 40px;}
#sec4 .s-inner .map_info  .top h4{color:#ffb839; font-size: 20px; font-weight: 700; margin-bottom: 10px;}
#sec4 .s-inner .map_info  .top p{font-weight: 500; color:#fff; font-size: 18px;}
#sec4 .s-inner .map_info  .list{margin-top: 25px; padding-top: 25px; border-top: 1px dashed rgba(255,255,255,0.2);}
#sec4 .s-inner .map_info  .list li{display: flex; align-items: center; gap:20px;}
#sec4 .s-inner .map_info  .list li + li{margin-top: 20px;}
#sec4 .s-inner .map_info  .list li .icon{background: #fff; border-radius: 10px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;}
#sec4 .s-inner .map_info  .list li .icon img{}
#sec4 .s-inner .map_info  .list li .txt{color:#fff;}
#sec4 .s-inner .map_info  .list li .txt h3{font-weight: 800; font-size: 18px;}
#sec4 .s-inner .map_info  .list li .txt h3 span{color:#ffb839;}
#sec4 .s-inner .map_info  .list li .txt h4{font-weight: 800; font-size: 16px;}
#sec4 .s-inner .map_info  .list li .txt p{font-size: 16px; font-weight: 400; margin-top: 8px;}

@media  all and (max-width:1280px) {
    #sec4 .s-inner .map_info .top h3{font-size: 36px;}
    #sec4 .s-inner .map_info .top h4{font-size: 19px;}
    #sec4 .s-inner .map_info .top p{font-size: 17px;}
    #sec4 .s-inner .map_info .list{margin-top: 20px; padding-top: 20px;}
    #sec4 .s-inner .map_info .list li .icon{width: 52px; height: 52px;}
    #sec4 .s-inner .map_info .list li .icon img{width: 30px;}
}
@media  all and (max-width:1024px) {
    
}
@media  all and (max-width:768px) {
    #sec4 .root_daum_roughmap .wrap_map{height: 60vw !important;}
    #sec4 .s-inner{position: static; width: 100%; height: auto; transform: translate(0);}
    #sec4 .s-inner .map_info{width: 100%; border-radius: 0; padding: 60px 3% 80px;}
    #sec4 .s-inner .map_info .top{text-align: left;;}
    #sec4 .s-inner .map_info .top h3{font-size: 32px;}
    #sec4 .s-inner .map_info .top h4{font-size: 18px;}
    #sec4 .s-inner .map_info .list li{gap:15px;}
    #sec4 .s-inner .map_info .list li .txt h3{font-size: 17px;}
    #sec4 .s-inner .map_info .list li .icon{width: 48px; height: 48px;}
    #sec4 .s-inner .map_info .list li .icon img{width: 28px;}
    #sec4 .s-inner .map_info .list li .txt p{margin-top: 5px;}
}
@media  all and (max-width:500px) {
    #sec4 .root_daum_roughmap .wrap_map{height: 70vw !important;}
    #sec4 .s-inner .map_info{padding: 55px 3% 70px;}
}

/* daisy floating idle animations */
.daisy {
    will-change: transform;
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* smooth lag-follow parallax */
}

.daisy img {
    display: block;
    will-change: transform;
}

#mVisual .daisy img {
    animation: daisy-float-mv 6s ease-in-out infinite;
}
#sec1 .daisy img {
    animation: daisy-float-s1 7s ease-in-out infinite;
}
#sec2 .daisy img {
    animation: daisy-float-s2 8s ease-in-out infinite;
}

@keyframes daisy-float-mv {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes daisy-float-s1 {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-3.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes daisy-float-s2 {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
    100% { transform: translateY(0) rotate(0deg); }
}