.category_box_area {width: 100%; max-width: 960px; min-width: 480px; margin: 0 auto; text-align: center; vertical-align: top;}
.category_box_area .box {box-sizing: border-box; width: 23%; min-width: 170px; min-height: 170px; padding-bottom: 23%; margin: 0.5%; display: inline-block; background-color: #f8f8f8; border: 1px solid #dbdbdb; position: relative; vertical-align: top;}
.category_box_area .box .container {position: absolute; width: 100%; top: 0px; bottom: 0px; background: none;}
.category_box_area .box .container .logo {position: absolute; top: 5%; left: 2%; right: 2%; bottom: 60%; text-align: center; background-size: contain; background-position: center center; background-repeat: no-repeat;}
.category_box_area .box .container .text {position: absolute; top: 50%; left: 5%; right: 5%; bottom: 5%; text-align: center; font-weight: bold; font-size: 16px;}
.category_box_area .box .container .text p {font-weight: normal; padding-top: 8px; color: #8e8e8e; font-size: 12px;}

@media screen and (max-width: 900px) {
    .category_box_area { min-width: 1px }
    .category_box_area .box .container .text {top: 48%; font-size: 15px;}
    .category_box_area .box .container .text p {padding-top: 7px; font-size: 11px;}
}

@media screen and (max-width: 800px) {
    .category_box_area .box .container .text {top: 46%; font-size: 14px;}
    .category_box_area .box .container .text p {padding-top: 5px; font-size: 10px;}
}

@media screen and (max-width: 740px) {
    .category_box_area .box {width: 30%; padding-bottom: 30%;}
    .category_box_area .box .container .text {top: 50%; font-size: 16px;}
    .category_box_area .box .container .text p {padding-top: 8px; font-size: 12px;}
}

@media screen and (max-width: 700px) {
    .category_box_area .box .container .text {top: 48%; font-size: 15px;}
    .category_box_area .box .container .text p {padding-top: 7px; font-size: 11px;}
}

@media screen and (max-width: 640px) {
    .category_box_area .box .container .text {top: 46%; font-size: 14px;}
    .category_box_area .box .container .text p {padding-top: 5px; font-size: 10px;}
}

@media screen and (max-width: 550px) {
    .category_box_area .box {width: 47%; padding-bottom: 47%;}
    .category_box_area .box .container .text {top: 50%; font-size: 16px;}
    .category_box_area .box .container .text p {padding-top: 8px; font-size: 12px;}
}

@media screen and (max-width: 500px) {
    .category_box_area .box .container .text {top: 48%; font-size: 15px;}
    .category_box_area .box .container .text p {padding-top: 7px; font-size: 11px;}
}

@media screen and (max-width: 400px) {
    .category_box_area .box .container .text {top: 46%; font-size: 14px;}
    .category_box_area .box .container .text p {padding-top: 5px; font-size: 10px;}
}