@charset "utf-8";

.empty_board {
    text-align: center;
}

.gall_slide .swiper-slide {
    position: relative;
    overflow: hidden;
}

.gall_slide .swiper-slide img {
    display: block;
    width: 100%;
    border-radius: 8px;
    transition: 0.3s ease;
}

.gall_slide .swiper-slide .textBox {
    border-radius: 8px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    transition: 0.3s ease;
}

.gall_slide .swiper-slide .textBox .slide_title_big {
    width: 90%;
    /* text-align: center; */
    /* font-size: 2.2em; */
    font-size: 1.2em;
    position: absolute;
    display: block;
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    word-break:keep-all;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    opacity: 1;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, .5);
}

.gall_slide .swiper-slide .textBox .textBoxIn {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, 0);
    width: 80%;
    background-color: rgb(240 251 255 / 80%);
    border-radius: 8px;
    padding: 40px 20px 40px 20px;
    opacity: 0;
    transition: 0.3s ease;
}

.gall_slide .swiper-slide .textBox .textBoxIn .slide_title_small {
    /* font-size: 2em; */
    font-size: 1em;
    margin-bottom: 20px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gall_slide .swiper-slide .textBox .textBoxIn .slide_text {
    font-size: 1.3em;
    color: #333;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover:hover) {
    .gall_slide .swiper-slide:hover .textBox {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
    }

    .gall_slide .swiper-slide:hover img {
        transform: scale(1.3);
    }

    .gall_slide .swiper-slide:hover .textBox .slide_title_big {
        opacity: 0;
    }

    .gall_slide .swiper-slide:hover .textBox .textBoxIn {
        opacity: 1;
    }
}

@media (hover:none) {
    .gall_slide .swiper-slide .textBox {
        background-color: rgba(0, 0, 0, 0);
        border-radius: 8px;
    }

    .gall_slide .swiper-slide .textBox .slide_title_big {
        opacity: 0;
    }

    .gall_slide .swiper-slide .textBox .textBoxIn {
        opacity: 1;
    }
}

.swiper_wrap {
    width: 100%;
    position: relative;
}

.gall_slide_btn {
    position: absolute;
    top: 50%;
}

.gall_slide_btn.gall_slide_prev {
    left: -1%;
}

.gall_slide_btn.gall_slide_next {
    right: -1%;
}