@charset "UTF-8";

/****arrows****/
.slick-arrow {
    top: calc(50% - 40px);
    display: flex;
    place-items: center;
    place-content: center;
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 50%;
    background: #15171b;
    box-shadow: 10px 10px 10px rgba(44, 48, 67, .3);
    transform: none;
    transition: background-color .4s ease-in-out;
    z-index: 50;
}

.slick-arrow:focus {
    background: #15171b;
}

.slick-arrow::before,
.slick-arrow:focus::before {
    content: '';
    position: relative;
    display: block;
    width: 17.136px;
    height: 22.856px;
    background: url(../../images/common/icon_arrow_next_white.svg) center no-repeat;
    background-size: contain;
    opacity: 1;
    filter: invert(0);
    transition: opacity .4s ease-in-out, filter .4s ease-in-out;
}

.slick-arrow:hover {
    background: #15171b;
}

.slick-arrow.slick-disabled {
    background: #fff;
    cursor: auto;
}

.slick-arrow.slick-disabled::before {
    opacity: .25;
    filter: invert(1);
}

.slick-prev {
    left: 0;
}

.slick-prev::before {
    transform: scaleX(-1);
}

.slick-next {
    right: 0;
}

/****dots****/
.slick-dots {
    position: relative;
    bottom: auto;
    display: flex;
    place-items: center;
    place-content: center;
}

.slick-dots li {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 25px;
    border-radius: 50%;
    background: #44464e;
    transition: background-color .4s ease-in-out;
    overflow: visible;
    flex: 0 0 auto;
    counter-increment: dot-number;
}

.slick-dots li::before {
    content: counter(dot-number, decimal-leading-zero);
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 25px;
    line-height: 1;
    color: #44464e;
    font-family: 'Poppins-EB';
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .4s ease-in-out;
}

.slick-dots li.slick-active {
    background: none;
}

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

.slick-dots li button {
    display: none;
}

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

    /****dots****/
    .slick-dots li {
        margin: 0 12.5px;
    }

    .slick-dots li::before {
        font-size: 18px;
    }
}

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

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

    /****arrows****/
    .slick-arrow {
        top: calc(50% - 25px);
        width: 50px;
        height: 50px;
    }

    .slick-arrow::before {
        width: 10.71px;
        height: 14.285px;
    }
}



/****IOS樣式****/
@supports (-webkit-touch-callout: none) {}