@charset "utf-8";

#shopCate{display:flex;justify-content:space-between;align-items:flex-start;position:relative;max-width:var(--mainsize);margin:0 auto;padding:180px 0 260px}
#shopCate .tit_area{position:sticky;top:0}
#shopCate .tit_area p{font-size:92px;font-weight:800;color:#000}
#shopCate .tit_area div{word-break:keep-all}
#shopCate ul{display:flex;flex-wrap:wrap;gap:45px;position:relative;width:60%}
#shopCate ul li{overflow:hidden;width:calc(50% - 22.5px);display:block}
#shopCate ul li:nth-child(odd){transform:translateY(130px)}
#shopCate ul li:nth-child(odd).aos-animate{transform:translateY(80px)}
#shopCate ul li a{display:block;position:relative;height:100%}
#shopCate ul li a:before{opacity:.5;display:block;content:"";position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background:rgb(1,1,1);background:linear-gradient(0deg, rgba(1,1,1,1) 0%, rgba(0,0,0,0) 60%);transition:all .25s}
#shopCate ul li p{position:absolute;bottom:0;z-index:1;padding:35px 45px;font-size:26px;font-weight:700;color:#fff}
#shopCate ul li img{width:100%;transition:all .6s}

@media(hover:hover){
#shopCate ul li:hover img{transform:scale(1.1)}    
#shopCate ul li:hover a:before{opacity:.7}
}

@media(max-width:1520px){
#shopCate{padding:180px 20px 260px}
}
@media(max-width:1024px){
#shopCate{padding:120px 20px 200px}    
#shopCate .tit_area p{font-size:62px}
#shopCate ul{gap:20px;width:70%}
#shopCate ul li{width:calc(50% - 10px)}
#shopCate ul li p{padding:20px 25px;font-size:20px}
}
@media(max-width:768px){
#shopCate{display:block;padding:60px 20px 80px}
#shopCate .tit_area{position:relative;margin-bottom:30px}
#shopCate .tit_area p{font-size:46px}
#shopCate ul{display:grid;grid-template-columns:repeat(3, 1fr);gap:15px;width:100%}
#shopCate ul li{width:auto}
#shopCate ul li:nth-child(odd){transform:translateY(50px)}
#shopCate ul li:nth-child(odd).aos-animate{transform:translateY(0)}
#shopCate ul li p{font-size:18px}
}
@media(max-width:580px){
#shopCate .tit_area p{font-size:38px}   
#shopCate ul{gap:12px}
#shopCate ul li p{padding:10px 15px;font-size:16px;font-weight:600}   
}
@media(max-width:380px){
#shopCate ul{grid-template-columns:repeat(2, 1fr)}
}