.index-category {
    transform: translateY(10%);
    overflow: visible;
    width: 100%
}

@media (min-width: 48em) {
    .index-category {
        transform:translateY(15%)
    }
}

@media (min-width: 62em) and (orientation: landscape) {
    .index-category {
        transform:translateY(-10%)
    }
}

@media (min-width: 48em) and (max-width: 68.6875em) and (orientation: portrait) {
}

@media (min-width: 68.75em) {
    .index-category {
        transform:translateY(8%);
    }
}

.category-stage {
    text-align: center;
    position: relative;
    overflow: visible
}

@media (min-width: 36em) and (max-width: 68.6875em) {
    .category-stage.wrap {
        width:100%
    }
}

@media (min-width: 36em) and (max-width: 61.9375em) and (orientation: landscape) {
}

.category-stage>a {
    /* box-shadow:0 10px 40px -16px rgba(0,0,0,0.6); */
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    transition: all .35s ease;
    width: 30%;
    display: block;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
    transition: transform .25s ease
}

@media (min-width: 48em) {
    .category-stage>a {
        padding:10px 0
    }
}

.category-stage>a .category-area {
    transition: transform .4s ease
}

.category-stage>a:nth-of-type(1) {
    left: 0;
    transform: scale(0.74) translate(0, -50%);
    z-index: 1
}

.category-stage>a:nth-of-type(1) .category-area {
    transform: translate(-60%, -50%)
}

@media (min-width: 48em) {
    .category-stage>a:nth-of-type(1) .category-area {
        transform:translate(-70%, -50%)
    }
}

.category-stage>a:nth-of-type(2) {
    left: 30%;
    transform: scale(0.86) translate(-50%, -50%);
    z-index: 6
}

.category-stage>a:nth-of-type(2) .category-area {
    transform: translate(-60%, -50%)
}

@media (min-width: 48em) {
    .category-stage>a:nth-of-type(2) .category-area {
        transform:translate(-70%, -50%)
    }
}

.category-stage>a:nth-of-type(4) {
    left: 70%;
    transform: scale(0.86) translate(-50%, -50%);
    z-index: 6
}

.category-stage>a:nth-of-type(4) .category-area {
    transform: translate(-40%, -50%)
}

@media (min-width: 48em) {
    .category-stage>a:nth-of-type(4) .category-area {
        transform:translate(-30%, -50%)
    }
}

.category-stage>a:nth-of-type(5) {
    right: 0;
    transform: scale(0.74) translate(0, -50%);
    transform-origin: right 0;
    z-index: 1
}

.category-stage>a:nth-of-type(5) .category-area {
    transform: translate(-40%, -50%)
}

@media (min-width: 48em) {
    .category-stage>a:nth-of-type(5) .category-area {
        transform:translate(-30%, -50%)
    }
}

.category-stage>a:nth-of-type(3) {
    position: relative;
    margin: 0 auto;
    z-index: 22;
    transform-origin: 50% 50%
}

.desktop .category-stage>a:hover {
    z-index: 36
}

.desktop .category-stage>a:hover .category-area {
    transform: translate(-50%, -50%)
}

@media (min-width: 48em) {
    .desktop .category-stage>a:hover .category-area {
        transform:translate(-50%, -50%)
    }
}

.desktop .category-stage>a:hover:nth-of-type(1) {
    transform: scale(1.125) translate(-20%, -50%)
}

.desktop .category-stage>a:hover:nth-of-type(2) {
    transform: scale(1.125) translate(-50%, -50%)
}

.desktop .category-stage>a:hover:nth-of-type(4) {
    transform: scale(1.125) translate(-50%, -50%)
}

.desktop .category-stage>a:hover:nth-of-type(5) {
    transform: scale(1.125) translate(20%, -50%)
}

.desktop .category-stage>a:hover:nth-of-type(3) {
    transform: scale(1.125)
}

.desktop .category-stage.anm-0>a:nth-of-type(1) {
    transform: scale(1.125) translate(0, -50%);
    z-index: 99
}

.desktop .category-stage.anm-0>a:nth-of-type(2) {
    transform: scale(1) translate(-20%, -50%);
    z-index: 89
}

.desktop .category-stage.anm-0>a:nth-of-type(2) .category-area {
    transform: translate(-50%, -50%)
}

@media (min-width: 48em) {
    .desktop .category-stage.anm-0>a:nth-of-type(2) .category-area {
        transform:translate(-50%, -50%)
    }
}

.desktop .category-stage.anm-0>a:nth-of-type(3) {
    transform: scale(0.86) translate(30%, 0);
    z-index: 79
}

.desktop .category-stage.anm-0>a:nth-of-type(4) {
    transform: scale(0.74) translate(-30%, -50%);
    z-index: 69
}

.desktop .category-stage.anm-0>a:nth-of-type(5) {
    transform: scale(0.64) translate(0, -50%);
    z-index: 59
}

.desktop .category-stage.anm-4>a:nth-of-type(1) {
    transform: scale(0.64) translate(0, -50%);
    z-index: 59
}

.desktop .category-stage.anm-4>a:nth-of-type(2) {
    transform: scale(0.74) translate(-70%, -50%);
    z-index: 69
}

.desktop .category-stage.anm-4>a:nth-of-type(3) {
    transform: scale(0.86) translate(-30%, 0);
    z-index: 79
}

.desktop .category-stage.anm-4>a:nth-of-type(4) {
    transform: scale(1) translate(-70%, -50%);
    z-index: 89
}

.desktop .category-stage.anm-4>a:nth-of-type(4) .category-area {
    transform: translate(-50%, -50%)
}

@media (min-width: 48em) {
    .desktop .category-stage.anm-4>a:nth-of-type(4) .category-area {
        transform:translate(-50%, -50%)
    }
}

.desktop .category-stage.anm-4>a:nth-of-type(5) {
    transform: scale(1.125) translate(0, -50%);
    z-index: 99
}

.category-area {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.category-area h6 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.25em;
    color: #fff
}

@media (min-width: 48em) {
    .category-area h6 {
        font-size:1rem
    }
}

@media (min-width: 87.5em) {
    .category-area h6 {
        font-size:1.125rem
    }
}

@media (min-width: 98.75em) {
    .category-area h6 {
        font-size:1.375rem
    }
}

@media (min-width: 137.5em) {
    .category-area h6 {
        font-size:1.5rem
    }
}

.category-area span {
    font-size: 0.75rem;
    line-height: 1.25em;
    color: #fff;
    opacity: 0.6;
    margin: 0 auto;
    display: block;
    transform: scale(0.9)
}

@media (min-width: 68.75em) {
    .category-area span {
        transform:scale(1.125)
    }
}

@media (min-width: 98.75em) {
    .category-area span {
        transform:scale(1.25)
    }
}

@media (min-width: 137.5em) {
    .category-area span {
        transform:scale(1.375)
    }
}

.category-area .icon-category {
    width: 45%;
    max-width: 110px;
    margin: 0 auto
}

@media (max-width: 47.9375em) and (orientation: landscape) {
    .category-area .icon-category {
        width:40%
    }
}

@media (min-width: 87.5em) {
    .category-area .icon-category {
        width:80%;
        max-width: 140px
    }
}

@media (min-width: 98.75em) {
    .category-area .icon-category {
        max-width:190px
    }
}

@media (min-width: 137.5em) {
    .category-area .icon-category {
        max-width:220px
    }
}

@media (min-width: 48em) {
    .category-area {
        width:60%
    }
}