@charset "UTF-8";



#works{padding-top: 5%;}
#works .section-title{margin-bottom: 2%;}
.tab-list {display:flex;justify-content:center;padding:0 20px;margin-bottom:40px;max-width: 1200px;margin: 0 auto;}
.tab-list li {width:100%;max-width:150px;height:40px;display:flex;align-items:center;justify-content:center;border-top:solid 1px #1f1f1f;border-left:solid 1px #1f1f1f;border-right:solid 1px #1f1f1f;cursor:pointer;font-size:14px;margin-right:10px;transition:all 0.3s ease;}
.tab-list li:last-child {margin-right:0;}
.tab-list li:hover {background-color:#1f1f1f;color:#fff;}
.tab-list li.active {background-color:#1f1f1f;color:#fff;}

.works-list {grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:120px;display:none;}
.works-list.active {display:grid;}
.works-list li {position:relative;aspect-ratio:4/3;overflow:hidden;}
.works-list li img {width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease;}
.works-list li:hover img {transform:scale(1.1);}
.works-list li .info {width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;background-color:rgba(0,0,0,0.6);color:#fff;position:absolute;top:0;left:0;opacity:0;transition:all 0.6s ease;}
.works-list li:hover .info {opacity:1;}
.works-list li .info .name {font-size:clamp(13px,2.5vw,16px);margin-bottom:5px;}
.works-list li .info .detail {font-size:clamp(16px,2.5vw,20px)}

@media screen and (max-width:767px){
#works{padding-top:10%;}
#works .section-title{margin-bottom:5%;}
.tab-list{display:flex;flex-wrap:wrap;justify-content:center;padding:0;margin:0 auto 8%;gap:2%;}
.tab-list li{width:31%;max-width:none;height:40px;margin-right:0;margin-bottom:2%;font-size:12px;}
.works-list{grid-template-columns:1fr;gap:5%;margin-bottom:18%;}
.works-list.active{display:grid;}
.works-list li{aspect-ratio:4/3;}
.works-list li img{transform:none;}
.works-list li:hover img{transform:none;}
.works-list li .info{opacity:1;background-color:rgba(0,0,0,0.45);}
.works-list li .info .name{font-size:13px;margin-bottom:2%;}
.works-list li .info .detail{font-size:16px;}
}