@charset "utf-8";

.digital{    width: 99vw;
    margin-left: calc(-50vw + 50.8%);}
/* 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:16.666665%;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%);    object-fit: cover;}
.cmpnt-digital .cmpnt-digital__curtain-cont{position:absolute;bottom:0;left:0;z-index:10;padding:80px 25px 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{font-family: 'HyundaiSansHeadMedium';min-height:80px;font-size:30px;font-weight:500;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.66667%;}
.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;
    }
}

/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
    
    /* 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;}

}