/* top_big_box a ↓ */
.top_big_box a {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: .2s;
    overflow: hidden;
    padding: 14px;
}

.top_big_box a:hover {
    box-shadow: 0 5px 12px #0003;
}

.top_big_box a .img-box {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 0 10px #00000015;
}

.top_big_box a .text-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 15px;
    color: #6c6c6c;
    font-weight: 400;
}

.top_big_box a .text-box h3 {
    font-size: 20px;
    color: #222;
    font-weight: 600;
    text-align: center;
}

.top_big_box a .img-box::before {
    padding-top: 68%;
}

/* hot_big_box a ↓ */
.hot_big_box a .img {
    padding: 0 30px;
}

.hot_big_box a .img-box {
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #9f9f9f44;
}

.hot_big_box a .img-box img {
    transition: .4s;
}

.hot_big_box a:hover .img-box img {
    transform: scale(1.1);
}

.hot_big_box a .img-box::before {
    padding-top: 100%;
}

.hot_big_box a h3 {
    color: #222;
    text-align: center;
    font-size: 16px;
    font-weight: 450;
}

.hot_big_box a:hover h3 {
    color: #088f95;
}

/* all_big_box a ↓ */
.all_big_box a .img-box {
    border-radius: 6px;
    box-shadow: 0 2px 8px #00000026;
    overflow: hidden;
    transition: .3s;
    margin-bottom: 12px;
}

.all_big_box a .img-box::before {
    padding-top: 190%;
}

.all_big_box a:hover .img-box {
    box-shadow: 0 5px 12px #0003
}

.all_big_box a h3 {
    color: #222;
    font-size: 16px;
}

@media screen and (min-width:770px) {
    .top_big_box a {
        width: calc((100% - 60px) / 4);
    }

    .hot_big_box a {
        width: calc((100% - 250px) / 6);
    }

    .all_big_box a {
        width: calc((100% - 100px) / 6);
    }
}

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

    main .big-box,
    .big-box.hot_big_box {
        gap: 15px 10px;
    }

    .top_big_box a,
    .hot_big_box a,
    .all_big_box a {
        width: calc((100% - 10px) / 2);
    }

    .all_big_box a h3 {
        text-align: center;
    }

}