main .work_content {margin-top: 2em; display: grid; grid-template-columns: repeat(3, 1fr); gap:1em;}
main .work_content li {position: relative;}
main .work_content li a {display: flex;}
main .work_content li .img,
main .work_content li .img img {width: 100%;}
main .work_content li .txt {position: absolute; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 1em; background: var(--thumbHover); color:#fff; opacity: 0; transition: opacity 0.2s;}
main .work_content li .txt p {font-size: 1.5em;}
main .work_content li .txt h4 {font-size: clamp(20px,1.4vw,26px); margin: .5em 0; text-align: center;}
main .work_content li:hover .txt {opacity: 1;}

main .work_content .myorder{position:absolute;z-index:99;bottom:0;left:0;width:100%;padding:.8em;background:#ffffff;opacity:.9;font-size:11px;}
main .work_content .myorder input{border:1px solid #ddd;text-align:right;line-height:1.7em;width:80px;}

@media (max-width:1500px) {
    main .work_content li .txt h4 {font-size: clamp(20px,1.2vw,26px);  margin: .3em 0;}
}


@media (max-width:1200px) {
    main .work_content { grid-template-columns: repeat(2, 1fr);}
}

@media (max-width:768px) {
    main .work_content { grid-template-columns: repeat(1, 1fr); margin-top: 4em;}
    main .work_content li .txt h4 {font-size: 2.6em;}

    /* main .sub_category_wrap {overflow-x: scroll;}
    main .sub_category_wrap > ul {min-width: 840px;} */
}

@media (max-width:500px) {
    /* main .sub_category_wrap > ul {min-width: 540px;} */
}