/* 프로그래스바 슬라이드 */

/*슬라이드 높이*/

#main_slide .slide-area
{height:650px;}

.slide-bg 
{width: 100%; height: 575px; overflow: hidden; position: absolute; top: 0; left: 0;}

.slide-bg > div{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 575px;
    transform: scale(1); 
}

#main_slide .slick-list {width: 100%;}

#main_slide .slide-area 
{position: relative; overflow: hidden;}

.slick-active .slide-bg > div
{animation-name: slideBg; animation-duration: 5s; animation-fill-mode: forwards;}

@keyframes slideBg{
    0% {transform: scale(1);}
    100%{transform: scale(1.2);}
}


/*메인슬라이드-텍스트*/
#main_slide {position: relative;}

#main_slide .slick-caption 
{position: absolute; top: 52%; width: 100%; text-align: center; color: #fff;  transform: translateY(-50px); z-index: 20;}

#main_slide .slide_txtarea {
    max-width: 1420px;
    margin: 0 auto;
}
#main_slide .slide_txtarea h2 
{ overflow: hidden; font-size: 50px; font-weight: 400; margin: 0;  transition: all 0.5s; text-align: left; line-height: 1.5em;}

#main_slide .slick-active  .slide_txtarea span
{display: block; animation-name: slidetit; animation-duration: 1.5s; transform: translateY(200px); animation-fill-mode: forwards;}

#main_slide .slide_txtarea p span 
{font-size: 24px; font-weight: 700; letter-spacing: -0.02em;}

#main_slide .slide_txtarea h2 span{animation-delay: 0.5s;}


@keyframes slidetit{
    0% {transform: translateY(200px);}
    100% {transform: translateY(0px);}
}


/* 메인 슬라이드-이미지 */
#main_slide .slide-img{
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    padding-right: 5%;
    width: 100%;
    z-index: 30;
}


/*메인슬라이드-컨트롤버튼*/
.slide-btn-pause,#main_slide .slick-arrow 
{color: #121212;  font-family: 'Line Awesome Free'; font-weight: 900; font-size: 1.8em;}

.slide-btn-pause:hover,.slick-arrow:hover {color: #f97741  !important;}

.slick-prev::before{content: '\f30a';}
.slick-next::before{content: '\f30b';}
.slide-play::before {content: "\f04b";}
.slide-pause::before {content: "\f04c";}
.slide-btn-pause {display: none;}
.slide-btn-pause.active {display: block;}
#main_slide .slick-arrow {cursor: pointer;background-size: cover;}





/* 인디케이터-페이징 */
.slide_indicator 
{display: flex; position: absolute; bottom: -0%;width: 100% ; max-width: 1420px;  left: 50%; transform: translateX(-50%); color: #121212; align-items: center; column-gap: 40px;}

.pagingInfo
{display: flex; align-items: center; width: 300px; margin-right:30px; font-family: 'Montserrat';font-weight: 700; column-gap: 20px;}

.pagingInfo p:last-child {opacity: 0.5;}

.pro_bg
{background: rgba(0, 0, 0, 0.2); flex-grow: 1;}

.pro-bar 
{background: #e9002c; flex-grow: 1;}

.pro-ani 
{width: 0; height: 3px; animation-name: proBar; animation-duration: 5s; animation-iteration-count: 1; width: 100%;}

@keyframes proBar {
    0% {width: 0;}
    100% {width: 100%;}
}




@media screen and (max-width: 1200px) {

    #main_slide .slide-img{
        padding-right: 0;
        justify-content: flex-end;
        bottom: 100px;
    }
    
    #main_slide .slide-img img{
        width: 60%;
    }

    #main_slide .slide_txtarea h2{
        font-size: 40px;
    }

}

/* 반응형 - 태블릿 */

@media screen and (max-width: 1024px) {

    #main_slide .slick-caption{
        top: 40%;
    }

    #main_slide .slide-area{
        height: 450px;
    }

    .slide_indicator{
        bottom: -10%;
    }


    #main_slide .slide-img{
        bottom: 0px;
    }

    .slide-bg {
        height: 400px;
    }

    .slide-bg > div{
        height: 450px;
    }

    .pagingInfo{
        width: 200px;
    }

    #main_slide .slide_txtarea p 
    {font-size: 1em !important; word-break: keep-all;}



}




/* 반응형 - 태블릿 - 세로 */

@media screen and (max-width: 768px) {

    #main_slide .slide_txtarea p {line-height: 1.5;}


    #main_slide .slide-area{
        height: 380px;
    }

    .slide-bg > div{
        height: 300px;
        background-position: right;
    }

    #main_slide .slick-caption{
        top: 48%;
    }

}




/* 반응형 - 모바일 */

@media screen and (max-width: 575px) {
    

    .slide_indicator{
        column-gap: 20px;
    }

    #main_slide .slide_txtarea p span {font-size: 1em;}
    #main_slide .slide_txtarea h2 {font-size: 1.6em; word-break: keep-all; padding: 0 1%;}

    #main_slide .slide_txtarea h2 br{
        display: none;
    }
    .slide_indicator {padding: 5px 30px;}
    .pagingInfo {margin-right: 0;}

    .slide_indicator{
        bottom: -8%;
    }

    #main_slide .slide-img{
        bottom: 50px;
    }

    #main_slide .slide-img img{
        width: 100%;
    }

}