@charset "UTF-8";
/********************************************************
메인 슬라이드 효과용 2025-07-09
********************************************************/

.delay-150ms { animation-delay: 0.15s; }
.delay-200ms { animation-delay: 0.20s; }
.delay-250ms { animation-delay: 0.25s; }
.delay-300ms { animation-delay: 0.30s; }
.delay-350ms { animation-delay: 0.35s; }
.delay-400ms { animation-delay: 0.40s; }
.delay-450ms { animation-delay: 0.45s; }
.delay-500ms { animation-delay: 0.50s; }
.delay-550ms { animation-delay: 0.55s; }
.delay-600ms { animation-delay: 0.6s; }
.delay-650ms { animation-delay: 0.65s; }
.delay-700ms { animation-delay: 0.7s; }
.delay-750ms { animation-delay: 0.75s; }
.delay-800ms { animation-delay: 0.8s; }
.delay-850ms { animation-delay: 0.85s; }
.delay-900ms { animation-delay: 0.9s; }
.delay-950ms { animation-delay: 0.95s; }

.delay-1500ms { animation-delay: 1.5s; }
.delay-2500ms { animation-delay: 2.5s; }
.delay-3500ms { animation-delay: 3.5s; }
.delay-4500ms { animation-delay: 4.5s; }
.delay-5500ms { animation-delay: 5.5s; }

.delay-1s { animation-delay: 1s; }
.delay-2s { animation-delay: 2s; }
.delay-3s { animation-delay: 3s; }
.delay-4s { animation-delay: 4s; }
.delay-5s { animation-delay: 5s; }

.responsive-wrapper {
  position: relative;
  width: 100%;
  height:100%;
  overflow: hidden;
}

.ani-content{
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content: center;    
}

.ani-object {
    display:flex;
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio: 16 / 9; /* 기준 비율 유지 */    
}
.ani-m-slide01-over{
    position:absolute;
    opacity:1;
    right:0;
    top:0;
    z-index:1;
    width:auto !important;
    max-width:fit-content;
    transform:translateY(0%);
} 
.ani-m-slide01-object{
    position:absolute;
    bottom:0;
    right:0;
    width:auto !important;
    max-width:fit-content;  
} 
.ani-text{
    display:flex;
    flex-direction:column;
    position:absolute;
    padding-left:10vw;
    z-index:1;
}
.ani-text img{
    display:inline-block;
    width:auto !important;
    height:auto !important;
    max-width:fit-content;
}

.ani-m-slide01-txt1{margin-top:0;}
.ani-m-slide01-txt2{margin-top:-20px;}
.ani-m-slide01-txt3{margin-top:-30px;}
.ani-m-slide01-txt4{margin-top:-10px;}

.ani-m-slide01-txt1,.ani-m-slide01-txt2,.ani-m-slide01-txt3,.ani-m-slide01-txt4{
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.25));
}


.m-slide03-object{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:1;
}
.m-slide03-object > img{
    display:block;
    width:100%;
}

/* 커스텀 Alert 사용법 Alert.render('메시지') */
#dialogoverlay{display: none;opacity: .8;position: fixed;top: 0px;left: 0px;background: #242424;width: 100%;z-index: 1001;}
#dialogbox{display: none;position: fixed;background: #fff;border-radius:2px;width: 90%;max-width: 550px;z-index: 1002;box-shadow: 0px 0px 20px rgba(0,0,0,.7);top: 30%;}
/* #dialogbox{filter: blur(.0px);backface-visibility: hidden;-webkit-font-smoothing: subpixel-antialiased; transform-origin: 0% 0; transform:perspective(1px) translateY(-30.4%) translateZ(0) scale(1.0);} */

#dialogbox > div{background:#FFF;margin: 3px;}
#dialogbox > div > #dialogboxhead{background-color: #242424;font-size: 1.1em;padding:5px 10px;color: #fff;}
#dialogbox > div > #dialogboxbody{background-color: #f5f5f5;padding:20px;color: #3c3b3b;font-size: 1.15em;}
#dialogbox > div > #dialogboxfoot{background-color: #f5f5f5;padding:10px;text-align:right;}
#dialogboxfoot button{padding:5px 20px;border: 1px solid #ccc;}


@media(max-width:1360px){
    .ani-text{
        padding-left:5vw;
        z-index:1;
    }
    .ani-m-slide01-over{
        max-width:45%;
    }
    .ani-m-slide01-object{
        max-width:75%;
    }
    .ani-text img.ani-m-slide01-txt1{width:20% !important; margin-top:0;}
    .ani-text img.ani-m-slide01-txt2{width:40% !important; margin-top:-5px;}
    .ani-text img.ani-m-slide01-txt3{width:50% !important; margin-top:-10px;}
    .ani-text img.ani-m-slide01-txt4{width:35% !important; margin-top:-5px;}

}