@charset "utf-8";

/* ------------------------------------------------------------------
    delta v component > digital.css
    version : 20260331
* ------------------------------------------------------------------ */

/* section */
.cmpnt-digital__section{width:100%;max-width:1120px;margin:0 auto}

/* curtain slider */
.cmpnt-digital .cmpnt-digital__curtain-wrap{margin:0 auto;width:100%;display:flex;}
.cmpnt-digital .cmpnt-digital__curtain{position:relative;background:#ccc;width:17%;cursor:pointer;overflow:hidden;transition:all 0.6s ease;}
.cmpnt-digital .cmpnt-digital__curtain-img{height:760px;position:relative;}
.cmpnt-digital .cmpnt-digital__curtain-img img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.cmpnt-digital .cmpnt-digital__curtain-cont{position:absolute;bottom:0;left:0;z-index:10;padding:80px 42px 88px;width:100%;display:flex;flex-direction:column;}

.cmpnt-digital .cmpnt-digital__text-wrap{display:flex;flex-direction:column;justify-content:flex-start;gap:26px;width:100%;}
.cmpnt-digital .cmpnt-digital__text-wrap .cmpnt-digital__curtain-title{min-height:80px;font-size:30px;font-weight:600;line-height:40px;text-align:center;z-index:1;}
.cmpnt-digital .cmpnt-digital__text-wrap .cmpnt-digital__curtain-desc{display:none;animation:fade-out 2s ease-in;}
.cmpnt-digital .cmpnt-digital__text-wrap .cmpnt-digital__curtain-desc + .cmpnt-digital__plus-icon{margin-top:66px;}
.cmpnt-digital .cmpnt-digital__plus-icon{display:block;position:relative;bottom:0;left:50%;width:24px;height:24px;transform:translate(-50%, 0);margin-top:26px;animation:fade-in 1s;}

.cmpnt-digital .cmpnt-digital__plus-icon:before, 
.cmpnt-digital__plus-icon:after{content: '';width:24px;height:2px;position:absolute;left:50%;top:50%;transition:all 0.6s ease;transform:translate(-50%, -50%);}
.cmpnt-digital .cmpnt-digital__curtain-cont.text-white .cmpnt-digital__plus-icon:before, 
.cmpnt-digital .cmpnt-digital__curtain-cont.text-white .cmpnt-digital__plus-icon:after{background:#fff;}
.cmpnt-digital .cmpnt-digital__plus-icon:after{transform:translate(-50%, -50%) rotate(90deg);z-index:-1;}

.cmpnt-digital .cmpnt-digital__curtain.active{width:66%;}
.cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__curtain-cont{padding:80px 80px 96px;}
.cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__curtain-title{min-height:auto;text-align:left;}
.cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__curtain-desc{display:block;animation:fade-in 2s ease-out;} 
.cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__plus-icon{display:none;animation:fade-out 1s;}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media print, screen and (min-width: 1024px) and (max-width: 1420px) {
    .cmpnt-digital .cmpnt-digital__curtain{width:20%;}
    .cmpnt-digital .cmpnt-digital__curtain-cont{padding-right:20px;padding-left:20px;}
    .cmpnt-digital .cmpnt-digital__curtain.active{width:60%;}
    .cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__curtain-cont{padding-right:40px;padding-left:40px;}
}

@media screen and (min-width:0) and (max-width:1023px){
    /* curtain slider */
    .cmpnt-digital .cmpnt-digital__curtain-wrap{width:100%;flex-direction:column;}
    .cmpnt-digital .cmpnt-digital__curtain, .cmpnt-digital .cmpnt-digital__curtain.active{width:100%;}
    .cmpnt-digital .cmpnt-digital__curtain-img{height:100px;transition:height 0.6s ease;}
    .cmpnt-digital .cmpnt-digital__curtain-img img{height:auto;aspect-ratio:18/25;}
    
    .cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__curtain-img{height: 500px;}
    .cmpnt-digital .cmpnt-digital__curtain-cont{bottom:50%;padding:0 15px;flex-direction:row;transform:translateY(50%);}
    .cmpnt-digital .cmpnt-digital__text-wrap{width:80%;gap:10px;align-items:flex-start;}
    .cmpnt-digital .cmpnt-digital__text-wrap .cmpnt-digital__curtain-title{font-size:19px;line-height:24px;min-height:auto;text-align:left;}
    .cmpnt-digital .cmpnt-digital__text-wrap .cmpnt-digital__curtain-desc{font-size:14px;line-height:21px;}
    .cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__curtain-cont{padding:100px 15px 35px;bottom:0;transform:none;}
    .cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__text-wrap{width:100%;}
    .cmpnt-digital .cmpnt-digital__plus-icon{margin-top:0;position:absolute;left:auto;right:15px;bottom:50%;transform:translateY(50%);}
    .cmpnt-digital .cmpnt-digital__plus-icon:before, .cmpnt-digital .cmpnt-digital__plus-icon:after{width:16px;height:2px;}

}

@media print, screen and (min-width: 768px) and (max-width: 1023px) {
    .cmpnt-digital .cmpnt-digital__curtain.active .cmpnt-digital__curtain-img{height: 700px;}
}