.cms_allprod {width: 1750px; margin: 0 auto; font-size: 0; text-align: center;}
.cms_allprod * {max-width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

.cms_allprod .c {display: inline-block; position: relative; width: 20%; padding-top: 44%; vertical-align: top; text-decoration: none;}

.cms_allprod .c img {position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;}
.cms_allprod .c .bg {position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; background: rgba(44,39,41,0.30); z-index: 2; transition: background-color ease-out 0.3s;}
.bureau .cms_allprod .c:hover .bg,
.mobile .cms_allprod .c.on .bg {background: rgba(255,255,255,0.85);}

.cms_allprod .c .txt {position: absolute; display: block; width: 100%; left: 0; top: calc(50% - 50px); padding: 0 20px; color: #fff; text-align: left; z-index: 10; transition: color ease-out 0.3s;}
.mobile .cms_allprod .c .txt {padding-bottom: 46px;}
.bureau .cms_allprod .c:hover .txt,
.mobile .cms_allprod .c.on .txt {color: #2C2729;}

.cms_allprod .c .txt .t {display: flex; height: 45px; font-size: 20px; font-weight: 400; line-height: 25px; align-items: center; justify-content: center; text-align: center;}

.cms_allprod .c .txt p {width: 196px; margin: 20px auto 0; font-size: 14px; font-weight: 300; line-height: 20px; color: #2C2729; opacity: 0; transition: opacity ease-out 0.3s;}
.mobile .cms_allprod .c .txt p {min-height: 140px;}
.bureau .cms_allprod .c:hover .txt p,
.mobile .cms_allprod .c.on .txt p {opacity: 1;}

.cms_allprod .c .txt .btncont {position: absolute; width: 100%; height: 46px; left: 0; bottom: 0; padding: 0 20px; opacity: 0; transition: opacity ease-out 0.3s;}
.bureau .cms_allprod .c:hover .txt .btncont,
.mobile .cms_allprod .c.on .txt .btncont {opacity: 1;}
.cms_allprod .c .txt .btncont .btn {display: flex; height: 46px; width: 246px; margin: 0 auto 0; padding: 0 20px; border: 1px solid #2C2729; color: #2C2729; background: rgba(255,255,255,0.3); font-size: 12px; font-weight: 400; line-height: 14px; align-items: center; justify-content: center; text-align: center; border-radius: 23px;}
.bureau .cms_allprod .c .txt .btncont {display: none;}



@media screen and (max-width: 1180px) {
.cms_allprod .c .txt .t {font-size: 18px;}
.mobile .cms_allprod .c .txt {top: calc(42% - 50px);}
.mobile .cms_allprod .c .txt p {min-height: 180px;}
}
@media screen and (max-width: 1100px) {
.cms_allprod .c .txt .t {font-size: 16px;}
}
@media screen and (max-width: 1024px) {
.mobile .cms_allprod .c .txt {top: calc(30% - 50px);}
.mobile .cms_allprod .c .txt p {min-height: 200px;}
}
@media screen and (max-width: 960px) {
.cms_allprod .c {width: 33.33%; padding-top: 60%;}
.cms_allprod .c img {object-fit: cover;}
.mobile .cms_allprod .c .txt p {min-height: 140px;}
}
@media screen and (max-width: 680px) {
.bureau .cms_allprod .c .txt {top: calc(40% - 50px);}
.mobile .cms_allprod .c .txt p {min-height: 180px;}
}
@media screen and (max-width: 600px) {
.cms_allprod .c {width: 50%; padding-top: 70%;}
.mobile .cms_allprod .c .txt p {min-height: 140px;}
}
@media screen and (max-width: 480px) {
.cms_allprod .c {width: 100%; padding-top: 100%;}
.mobile .cms_allprod .c .txt p {min-height: 140px;}
.cms_allprod .c .txt .t {font-size: 22px;}
}
@media screen and (max-width: 350px) {
.cms_allprod .c {padding-top: 120%;}
}