.pro-list {margin-top: 0px;width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;}
.pro-list li {margin: 7px;vertical-align: top;position: relative;width: 24%;}
.pro-list li a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 5; }
.pro-list li >div { overflow: hidden; position: relative; margin: 0; z-index: 0; }
.pro-list li .img img {position: relative;width: 100%;height: 240px;object-position: 50% 0;object-fit: cover;z-index: 1;display: block;/* -webkit-transition: all 8s linear; */-o-transition: all 8s linear;/* transition: all 8s linear; */}
.pro-list li:after { position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom,rgb(0 0 0 / 12%) 0%,rgb(0 0 0 / 9%) 63%,rgb(0 0 0 / 33%) 100%); opacity: .5; top: 0; left: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; content: ""; }
.pro-list li .info { overflow: overlay; position: absolute; background: linear-gradient(to bottom,rgb(0 0 0 / 0%) 0%,rgb(0 0 0 / 29%) 63%,rgb(0 0 0 / 17%) 100%); -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.pro-list li .info .price { position: absolute; padding: 5px 15px; background: rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); top: -39px; left: 0; }
.pro-list li .info .price font { margin: 0 10px; display: inline-block; font-weight: 300; color: #fff; }
.pro-list li .info .price font.old { color: rgb(255 255 255 / .4); }
.pro-list li .info h3 { height: 30px; line-height: 160%; letter-spacing: .05em; font-weight: 100; font-size: 19px; color: #fff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.pro-list li .info h3 span{
    margin-left: 15px;
}
.pro-list li .info .titleBox { position: absolute; margin: 1.2em 3em 1.2em; display: none; text-align: right; top: 110px; right: 0; bottom: 0; z-index: 1; z-index: unset; }
.pro-list li .info .titleBox h4 { text-align: right; font-size: 30px; color: #fff; }
.pro-list li .info .titleBox p { text-align: right; color: #656565; }
.pro-list li .info article { display: contents; letter-spacing: 0.5px; font-size: 16px; color: #bdbdbd; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.pro-list li .info .titleBox p:after { position: absolute; width: 100%; height: 5px; background: rgb(255 255 255 / 26%); display: block; bottom: 46px; transition: all ease-in-out .3s; transform: rotate(180deg); content: ""; }
.pro-list li .info .project-zoom { overflow: hidden; position: absolute; padding: 0 0 0 30px; width: 80%; opacity: 0; bottom: 0; left: 15px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
.pro-list li .project-zoom::before { position: absolute; width: 2px; height: 0; background-color: #fff; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; top: 0; left: 10px; opacity: 0; content: ""; }

.pro-list li:hover:after { background: linear-gradient(to bottom,rgb(0 0 0 / 12%) 0%,rgb(27 27 27 / 39%) 63%,rgb(0 0 0 / 61%) 100%); opacity: .7; }
.pro-list li:hover .info { background: linear-gradient(to bottom,rgb(0 0 0 / 0%) 0%,rgb(0 0 0 / 9%) 63%,rgb(0 0 0 / 65%) 100%); }
.pro-list li:hover .img img { -webkit-transform: scale(1.4); transform: scale(1.4); }
.pro-list li:hover .info .titleBox { letter-spacing: 4.2px; }
.pro-list li:hover .project-zoom { opacity: 1; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
.pro-list li:hover .project-zoom::before { height: 100%; opacity: 1; }

/* album-info */
#album-info {-moz-column-count: 3;-moz-column-gap: 15px;-webkit-column-count: 3;-webkit-column-gap: 15px;column-count: 3;column-gap: 15px;}
#album-info .album_box { margin: 0 0 15px; }
#describe{
    overflow: overlay;
}
#describe .tx-box{
    width: 80%;
    margin: 20px auto 70px;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #d4d4d4;
    display: flex;
}
#describe .tx-box .case-title {
    width: 30%;
    padding: 0;
    margin: 0;
}
#describe .tx-box .txt{
    width: 80%;
}
.case-title h4 {
    padding: 0;
    margin: 0 0 40px 0;
    font-size: 17px;
    line-height: 28px;
    font-weight: 400;
}
.case-title h3 {
    padding: 0;
    margin: 0;
    font-size: 24px;
    line-height: 36px;
    font-weight: 100;
}
.tx-content {
    margin: 0 0 40px 0%;
    padding: 0;
}
.tx-content p{
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 180%;
}
.pattern {
    margin: 15px 0 0 0;
    padding: 35px 0 0 0;
    line-height: 36px;
    border-top: 1px solid #d4d4d4;
}
.pattern ul li {
    letter-spacing: 1px;
}
@media screen and (max-width: 1660px) {
.pro-list li{
    width: 23.5%;
}
.pro-list li .img img{
    height: 180px;
}
}
@media screen and (max-width: 1280px) {
	#album-info { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
.pro-list li{
    width: 31.5%;
}
.pro-list li .img img{
    height: 180px;
}
}
@media screen and (max-width: 980px) {
	#album-info { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
#describe .tx-box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
#describe .tx-box .case-title,#describe .tx-box .txt{
    width: 100%;
}
.tx-content{
    margin: 30px 0 20px 0%;
}
.pro-list li{
    width: 47.5%;
}
.pro-list li .img img{
    height: 210px;
}
}
@media screen and (max-width: 690px) {
	#album-info { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
.pro-list li{
    width: 100%;
}
.pro-list li .img img{
    height: 250px;
}
.case-title h4{
    margin: 0 0 5px 0;
}
}
@media screen and (max-width: 480px) {

.pro-list li .img img{
    height: 190px;
}
}