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

/*슬라이드 높이*/
.slide-bg,
#main_slide .slide-area
{height: 707px;}

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

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

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

.slick-active .slide-bg
{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: 47%; width: 100%; text-align: center; padding: 0 15%; color: #fff; text-shadow: 5px 0px 10px rgb(0, 0, 0, .85); transform: translateY(-50px); z-index: 20;}

#main_slide .slide_txtarea span {animation-name: slidetit; animation-duration: 1.5s; transform: translateY(100px); animation-fill-mode: forwards;}
#main_slide .slide_txtarea h2
{overflow: hidden; font-size: 56px; font-weight: 500; transition: all 0.5s;}
#main_slide .slide_txtarea h2 span {animation-delay: 0.5s; font-weight: 600;}
#main_slide .slide_txtarea h2 span strong{font-weight: 700; font-size: 62px;}
#main_slide .slide_txtarea p
{font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 40px; margin-bottom: 30px;}


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


/*메인슬라이드-컨트롤버튼*/
/* .slide-btn-pause,#main_slide .slick-arrow
{color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0, 0.6); font-family: 'Line Awesome Free'; font-weight: 900; font-size: 1.8em;} */

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

.slick-prev {width: 16px; height: 20px; background: url(../prev.png)no-repeat top center;}
.slick-next {width: 16px; height: 20px; background: url(../next.png)no-repeat top center;}
.slide-pause {width: 13px; height: 20px; background: url(../pause.png)no-repeat top center;}
.slide-play {width: 16px; height: 20px; background: url(../play.png)no-repeat top center;}

/* .slick-prev::before{content: '\f104';}
.slick-next::before{content: '\f105';}
.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;}



/*메인슬라드-페이지네이션*/
#main_slide .slick-dots
{position: absolute; right: 0; bottom: 30px; left: 0; z-index: 15; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-right: 15%; margin-left: 15%; list-style: none;}

#main_slide .slick-dots li
{height: 12px; width: 12px; border-radius: 100%; margin-right: 5px; background: #ddd !important;}

#main_slide .slick-dots li button
{font-size: 0; text-indent: -9999px; opacity: 0;}

#main_slide .slick-dots li::before
{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; border-radius: 100%; opacity: 0; border: 1px solid #fff;}

#main_slide .slick-dots .slick-active
{background: #f3090e !important;height: 7px;width: 7px;position: relative;margin: 2px 10px 0;}

#main_slide .slick-dots .slick-active::before {opacity: 1;}

#main_slide .slick-dots li:hover {cursor: pointer;}




/* 인디케이터-페이징 */
.slide_indicator
{display: flex; position: absolute; bottom: 0%; width: 580px; max-width: 90%; left: 50%; transform: translateX(-50%); color: #fff; align-items: center; column-gap: 20px; background-color: #e6c518; padding: 20px 100px; border-radius: 30px 30px 0 0;}

.pagingInfo
{display: flex; align-items: center; flex-grow: 1;margin-right:30px; font-family: 'Montserrat';font-weight: 700;}

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

.pro_bg
{background: rgba(255, 255, 255, 0.5); flex-grow: 1; margin: 0 10px;}

.pro-bar
{background: #fff; 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%;}
}


/* 스크롤 다운 */
.scroll_down
{position: absolute; left: 50%; transform: translateX(-50%); text-align: center; bottom: 80px; color: #fff;}

.scroll_down i
{display: block; animation-name: scrollArrow; animation-duration: 1s;transform: translateY(0px);animation-iteration-count: infinite;}

@keyframes scrollArrow{
    0% {transform: translateY(0px);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(0px);}
}




/* 반응형 - 태블릿 */

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

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

    .slide-bg, #main_slide .slide-area {height: 500px;}
    #main_slide .slide_txtarea p span {font-size: 24px; line-height: 30px; margin-bottom: 15px;}
    #main_slide .slide_txtarea h2 {font-size: 40px; word-break: keep-all;}
    #main_slide .slide_txtarea h2 span strong {font-size: 50px;}

}




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

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

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



}




/* 반응형 - 모바일 */

@media screen and (max-width: 575px) {
    #main_slide .slide-area,.slide-bg {height: 450px;}
    #main_slide .slide_txtarea p span {font-size: 20px; margin-bottom: 0;}
    #main_slide .slide_txtarea h2 {font-size: 28px;}
    #main_slide .slide_txtarea h2 span strong {font-size: 40px;}
    .slide_indicator {padding: 5px 30px;}
    .pagingInfo {margin-right: 0;}


}
