@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=East+Sea+Dokdo&display=swap&subset=korean');

.swiper-container {
    width: 100%;
}
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        min-height: 1px;
    }
        .swiper-wrapper.auto .swiper-slide {
            width: 100%;
        }
            .swiper-slide img {
                position: relative;
                z-index: 2;
                width: 100%;
            }
            
            .swiper-slide .bg {
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
                .swiper-slide .bg-img {
                    background-size: cover;
                    z-index: 2;
                }
                .swiper-slide .overlay-color {
                    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);*/
                    z-index: 3;
                }
            
            .swiper-slide .txt-area {
                display: table;
                position: absolute;
                top: 55%;
                left: 0px;
                width: 100%;
                z-index: 4;
            }
            @media (max-width: 1100px) {
                .swiper-slide .txt-area {
                    top: 50%;
                }
            }
                .swiper-slide .txt-wrap {
                    display: table-cell;
                    text-align: left;
                    vertical-align: middle;
                }
                @media (max-width: 1100px) {
                    .swiper-slide .txt-wrap {
                        font-size: 0.9rem;
                    }
                }
                @media (max-width: 800px) {
                    .swiper-slide .txt-wrap {
                        font-size: 0.5rem;
                    }
                }
                @media (max-width: 640px) {
                    .swiper-slide .txt-wrap {
                        font-size: 0.4rem;
                    }
                }
                    .swiper-slide .txt-wrap span {
                        display: block;
                        font-family: 'Noto Sans KR', sans-serif;
                    }
                        .swiper-slide .txt-wrap .txt-1 {
                            color: #FFF;
                            font-size: 1.8em;
                            font-weight: 500;
                            opacity: 0;
                        }
                        .swiper-slide .txt-wrap .txt-2 {
                            color: #FFF;
                            font-size: 3.5em;
                            font-weight: 600;
                            /* background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent); */
                            opacity: 0;
                        }
                            .swiper-slide .txt-wrap .txt-2 b {
                                font-weight: 500;
                                font-family: 'Noto Sans KR', sans-serif;
                            }
                        
                        .swiper-slide.slide-index-1 .txt-wrap .txt-1,
                        .swiper-slide.slide-index-1 .txt-wrap .txt-2 {
                            /* padding-left: 5%; */
                            text-align: center;
                        }                        
                            
                        .swiper-slide-active.slide-index-1 .txt-wrap .txt-1 {
                            -webkit-animation-name: toright-type1;
                            animation-name: toright-type1;
                            animation-duration: 4s;
                        }
                        .swiper-slide-active.slide-index-1 .txt-wrap .txt-2 {
                            -webkit-animation-name: toright-type1;
                            animation-name: toright-type1;
                            animation-duration: 2.5s;
                        }
                        
                        .swiper-slide.slide-index-2 .txt-wrap .txt-1,
                        .swiper-slide.slide-index-2 .txt-wrap .txt-2 {
                            /* padding-right: 5%; */
                            text-align: center;
                        }                        
                        .swiper-slide.slide-index-2 .txt-wrap .txt-2 {
                            /* background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent); */
                        }
                            
                        .swiper-slide-active.slide-index-2 .txt-wrap .txt-1 {
                            -webkit-animation-name: toleft-type1;
                            animation-name: toleft-type1;
                            animation-duration: 4s;
                        }
                        .swiper-slide-active.slide-index-2 .txt-wrap .txt-2 {
                            -webkit-animation-name: toleft-type1;
                            animation-name: toleft-type1;
                            animation-duration: 2.5s;
                        }
                        
                        .swiper-slide-active .txt-wrap .txt-1,
                        .swiper-slide-active .txt-wrap .txt-2,
                        .swiper-slide-prev .txt-wrap .txt-1,
                        .swiper-slide-prev .txt-wrap .txt-2 {
                            opacity: 1;
                        }
            
            .swiper-pagination * {
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }
                .swiper-container-horizontal > .swiper-pagination-bullets, 
                .swiper-pagination-custom, 
                .swiper-pagination-fraction {
                    bottom: 30px !important;
                }
                @media (max-width: 1100px) {
                    .swiper-container-horizontal > .swiper-pagination-bullets, 
                    .swiper-pagination-custom, 
                    .swiper-pagination-fraction {
                        bottom: 10px !important;
                    }
                }
                    .swiper-pagination-bullet {
                        width: 12px !important;
                        height: 12px !important;
                        opacity: 1 !important;
                        border-radius: 12px !important;
                        background: none !important;
                        background-color: rgba(255, 255, 255, 0.7) !important;
                        margin: 0px 5px !important;
                    }
                    .swiper-pagination-bullet-active {
                        width: 30px !important;
                        background-color: rgba(0, 0, 0, 0.7) !important;
                        opacity: 0.8 !important;
                    }
                    
.empty_li {
    width: 100%;
    text-align: center;
}
                
                
@keyframes toright-type1 {
    0%, 50% {
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes toright-type1 {
    0%, 50% {
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toleft-type1 {
    0%, 50% {
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes toleft-type1 {
    0%, 50% {
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}