@import url('sub.css'); 

.product_all {display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; margin-top:100px;}
.product_all figure {position:relative; display:flex; align-items:center; flex-direction:column; border-radius:var(--borderR30); border:1px solid var(--border); aspect-ratio:375/453; background:var(--white); background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%); overflow:hidden; transition:all 0.5s ease-out;}
.product_all figure a {position:relative; height:100%;}
.product_all figure dl {position:relative; display:flex; flex-direction:column; align-items:center; width:100%;}
.product_all figure dl dt {position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.product_all figure dl dt img {display:block; width:100%; height:100%; object-fit:cover;}
.product_all figure dl dd {width:100%; text-align:center; display:block;}
.product_all figure dl dd h4 {padding:0 10px; color:var(--black); transition:all 0.5s ease-out; box-sizing:border-box;
display: -webkit-box;       /* 플렉스 박스 형태 지정 */
  -webkit-line-clamp: 3;      /* 보여줄 줄 수 (예: 3줄) */
  -webkit-box-orient: vertical;/* 정렬 방향 설정 */
  overflow: hidden;           /* 넘치는 부분 숨기기 */
  word-break: normal; width: 100%; }

.product_all figure .hover {position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; opacity:0; transition:all 0.5s ease-out;}
.product_all figure .hover .txt_wrap {position:absolute; width:100%; text-align:center; top:100%; z-index:10; color:var(--white); opacity:0; transition:all 0.5s ease-out; padding:0 3%; box-sizing:border-box;}
.product_all figure .hover .txt_wrap .fs18 {margin:8px 0;}
.product_all figure .hover .txt_wrap .more_btn {text-align:center; margin-top:15px;}
.product_all figure .hover .txt_wrap .more_btn span {position:relative; display:flex; justify-content:center; gap:0 10px; align-items:center; color:var(--white);}
.product_all figure .hover .txt_wrap .more_btn span::after {color:var(--white); font-size:20px; font-family:var(--icon); content:"\e5c8"}

.product_all figure:hover {border-color:rgba(232,55,63,0.8);}
.product_all figure:hover .hover {opacity:1; background:rgba(232,55,63,0.8);}
.product_all figure:hover .hover .txt_wrap {top:50%; transform:translateY(-50%); opacity:1;}
.product_all figure:hover dl dd h4 {opacity:0;}

.product_all.third_cat {grid-template-columns:repeat(4, 1fr); margin-top:0;}
.product_all.third_cat figure {background:var(--white); aspect-ratio:375/523; }
.product_all.third_cat figure a img {transition:all 0.5s ease-out;}
.product_all.third_cat figure:hover {border:1px solid var(--border);}
.product_all.third_cat figure:hover dl dt img {opacity:0.5;}
.product_all.third_cat figure:hover dl dd h4 {color:var(--main); opacity:1;}


/*******************************************************************************
    @media 1400px
*******************************************************************************/
@media all and (max-width:1400px){

.product_all.third_cat {gap:20px;}
.product_all.third_cat figure dl dd h4 {font-size:1.122rem;}

}



/*******************************************************************************
    @media  ~ 1100px     
*******************************************************************************/
@media all and (max-width:1100px){

/* 리스트 */
.product_all.third_cat {grid-template-columns:repeat(3, 1fr);}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

.product_all {gap:20px; margin-top:70px;}
.product_all figure .hover .txt_wrap .more_btn {margin-top:10px;}
.product_all figure .hover .txt_wrap .more_btn span::after {font-size:18px;}

.product_all.third_cat {grid-template-columns:repeat(3, 1fr);}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:768px){

.product_all {gap:10px; margin-top:50px; grid-template-columns:repeat(2, 1fr);}
.product_all figure dl {gap:5px 0;}
.product_all figure .hover .txt_wrap .more_btn {margin-top:10px;}
.product_all figure .hover .txt_wrap .more_btn span::after {font-size:16px;}

.product_all.third_cat {gap: 10px;}
.product_all.third_cat {grid-template-columns:repeat(2, 1fr);}

}


/*******************************************************************************
    @media ~ 400px             
*******************************************************************************/
@media all and (max-width:400px){

.product_all {grid-template-columns:repeat(1, 1fr);}
.product_all figure {aspect-ratio:auto;}
.product_all figure dl dd {padding-bottom:20px;}
.product_all figure {aspect-ratio:auto;}

.product_all.third_cat {grid-template-columns:repeat(1, 1fr);}
.product_all.third_cat figure{aspect-ratio:auto;}

}


/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){


}