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

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

.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:30%; width: 100%; text-align: left; padding: 0 19%; color: #fff; /*text-shadow: 0 2px 4px rgb(0, 0, 0, .5);*/ transform: translateY(-50px); z-index: 20;}

/* #main_slide:hover .slide_txtarea h2 {text-shadow: 0 0 20px rgba(255,255,255,1);} */

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

#main_slide .slide_txtarea p span
{font-family: 'Pretendard'; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #3fb54b; margin-bottom: 20px;}

#main_slide .slide_txtarea h2 {overflow: hidden; font-size: 48px; font-weight: 600; margin: 0; /*text-shadow: 0 0 10px rgba(255,255,255,0.5);*/ transition: all 0.5s; color: #222; margin-bottom: 25px;}
#main_slide .slide_txtarea h2 span{animation-delay: 0.5s; }
#main_slide .slide_txtarea h3 span{animation-delay: 0.7s; font-size: 18px; line-height: 28px; color: #333; font-weight: 400;}

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


/*메인슬라이드-컨트롤버튼*/
.slide-btn-pause, #main_slide .slick-arrow {background: url(../pause.png)no-repeat top center; width: 10px; height: 13px; text-indent: -9999px;}
.slick-prev {background: url(../prev.png)no-repeat top center !important; width: 8px; height: 15px;}
.slick-next {background: url(../next.png)no-repeat top center !important; width: 8px; height: 15px;}

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

.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: 25%; width: 420px; max-width: 90%; left: 19%; color: #3fb54b; align-items: center; column-gap: 20px;}

.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; color: #fff;}

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

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

}




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

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

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

  #main_slide .slick-caption {top: 25%; padding: 0 15%;}
  #main_slide .slide_txtarea h2 {font-size: 36px; margin-bottom: 15px;}
  #main_slide .slide_txtarea h3 span {font-size: 16px; line-height: 24px; word-break: keep-all;}

  .slide_indicator {bottom: 18%; left: 15%;}

}




/* 반응형 - 모바일 */

@media screen and (max-width: 575px) {
    #main_slide .slick-caption {padding: 0 10%;}
    #main_slide .slide_txtarea h3 span {width: 80%;}
    #main_slide .slide_txtarea h2 {font-size: 28px;}
    .slide_indicator {left: 10%;}
    .pagingInfo {margin-right: 0;}


}

@media screen and (max-width: 575px) {
    #main_slide .slick-caption {padding: 0 5%;}
    .slide_indicator {left: 5%;}


}