@charset "UTF-8";

.case {
    max-width: 1720px;
    margin: 90px auto 0 auto;
}

/****案例介紹****/
.case__box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: space-between;
    margin: 100px auto 0 auto;
}

.case__box__item {
    margin: 60px 0 0 0;
}

.case__box__item:nth-child(3n + 1),
.case__box__item:nth-child(3n + 2) {
    width: calc(50% - 15px);
}

.case__box__item:nth-child(3n + 1) .c-product__pic,
.case__box__item:nth-child(3n + 2) .c-product__pic {
    padding: 114.4% 0 0 0;
}

.case__box__item:nth-child(3n + 3) .c-product__pic {
    padding: 57% 0 0 0;
}

.case__box__item:nth-child(1),
.case__box__item:nth-child(2) {
    margin: 0;
}

/****查看更多****/
.case__back {
    display: block;
    width: 100%;
    padding: 200px 0;
    text-align: center;
}

.case__back__bt {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    font-size: 45px;
    line-height: 1;
    color: var(--titleColor);
    font-family: "Italiana";
}

.case__back__bt::before {
    content: 'VIEW MORE';
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    transition: transform .4s ease-in-out;
}

.case__back__bt::after {
    content: '';
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 0 0 25px;
    border-radius: 50%;
    background: var(--mainColor);
    overflow: hidden;
    transition: transform .4s ease-in-out;
    flex: 0 0 auto;
}

.case__back__bt:hover::before {
    transform: translateX(45px);
}

.case__back__bt:hover::after {
    transform: translateX(calc(-5.2em - 25px));
}

@media screen and (min-width: 992px) {

    /****案例介紹****/
    .case__box__item:nth-child(6n + 1) {
        width: calc(50% - 15px);
        margin: 0;
    }

    .case__box__item:nth-child(6n + 1) .c-product__pic {
        padding: 114.6% 0 0 0;
    }

    .case__box__item:nth-child(6n + 2) {
        width: calc(50% - 15px);
        margin: 250px 0 0 0;
    }

    .case__box__item:nth-child(6n + 2) .c-product__pic {
        padding: 114.6% 0 0 0;
    }

    .case__box__item:nth-child(6n + 3) {
        width: 85%;
        max-width: 1140px;
        margin: 25px 15% 0 0;
    }

    .case__box__item:nth-child(6n + 4) {
        width: calc(50% - 25px);
        max-width: 555px;
        margin: 25px 0 0 auto;
    }

    .case__box__item:nth-child(6n + 4) .c-product__pic {
        padding: 114.6% 0 0 0;
    }

    .case__box__item:nth-child(6n + 5) {
        width: calc(50% - 25px);
        max-width: 555px;
        margin: 25px 0 0 25px;
    }

    .case__box__item:nth-child(6n + 5) .c-product__pic {
        padding: 114.6% 0 0 0;
    }

    .case__box__item:nth-child(6n + 6) {
        margin: 25px 0 0 0;
    }

    .case__box__item:nth-child(6n + 6) .c-product__pic {
        padding: 57% 0 0 0;
    }
}

@media screen and (max-width: 991px) {
    .case {
        margin: 75px auto 0 auto;
    }

    /****案例介紹****/
    .case__box {
        margin: 60px auto 0 auto;
    }

    /****查看更多****/
    .case__back {
        padding: 100px 0 130px 0;
    }

    .case__back__bt {
        font-size: 30px;
    }
}

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

@media screen and (max-width: 575px) {
    .case {
        margin: 45px auto 0 auto;
    }

    /****案例介紹****/
    .case__box {
        margin: 55px auto 0 auto;
    }

    .case__box__item:nth-child(3n + 1),
    .case__box__item:nth-child(3n + 2) {
        width: 100%;
    }

    .case__box__item:nth-child(3n + 3) .c-product__pic {
        padding: 114.4% 0 0 0;
    }

    .case__box__item:nth-child(1) {
        margin: 0;
    }

    .case__box__item:nth-child(2) {
        margin: 60px 0 0 0;
    }

    /****查看更多****/
    .case__back {
        padding: 90px 0;
    }

    .case__back__bt {
        font-size: 17px;
    }

    .case__back__bt::after {
        width: 15px;
        height: 15px;
        margin: 0 0 0 15px;
    }

    .case__back__bt:hover::before {
        transform: translateX(30px);
    }

    .case__back__bt:hover::after {
        transform: translateX(calc(-5.2em - 15px));
    }
}

/****觸控螢幕****/
@media (any-hover: none) {

    .case__back__bt:hover::before,
    .case__back__bt:hover::after {
        transform: none;
    }
}

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