.ani_effect{position:relative; top:50px; opacity:0; transition:all 0.5s linear;}
.ani_effect.action{ top:0; opacity:1; transition:all 0.2s linear; transition-delay:0s;}



/*********** List *************/
.portfolio_list{display:flex; flex-wrap:wrap; gap:28px;}
.portfolio_list .list{position:relative; width:calc((100% - 84px) / 4);}
.portfolio_list .list .checkbox{position:absolute; left:10px; top:10px; z-index:5; }
.portfolio_list .list a{display: block; }
.portfolio_list .list a.link_no{cursor: default;}
.portfolio_list .list a .thumb{position: relative; background: var(--main); aspect-ratio: 369/217; border-radius: var(--borderR20); overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap:10px; transition: all .3s linear;}
.portfolio_list .list a:hover .thumb{background: rgba(32,88,64,.8);}
.portfolio_list .list a .thumb .stage{position:absolute; right:10px; top:10px; z-index:3; padding:0 12px; border-radius:100px; background:rgba(255,255,255,0.1); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); font-family:var(--eng); letter-spacing: 0.2pt; font-size:14px; font-weight:700; line-height:24px; color:var(--white); white-space:nowrap;}
.portfolio_list .list a .thumb .c-logo{aspect-ratio: 369/100; max-width: 309px; width: 90%; transform: translateY(25px); transition: all .3s linear;}
.portfolio_list .list a:hover .thumb .c-logo{transform: translateY(0);}
.portfolio_list .list a .thumb .c-logo img{display: block; width: 100%; height: 100%; object-fit: contain;}
.portfolio_list .list a .thumb .hover{opacity: 0; visibility: hidden;  transform: translateY(25px); transition: all .3s linear;}
.portfolio_list .list a:hover .thumb .hover{opacity: 1; visibility: visible; transform: translateY(0);}
.portfolio_list .list a .desc{padding:20px 0 0; box-sizing:border-box; }
.portfolio_list .list a .desc h4{margin:3px 0 0; font-size:1.444rem; font-weight:700; line-height:138.46%; letter-spacing:var(--letter-spacing-heading); color:var(--black); word-break:keep-all; transition:color 0.3s;}








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

/*********** List *************/
.portfolio_list{gap:20px;}
.portfolio_list .list{width:calc((100% - 40px) / 3);}


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

/*********** List *************/
.portfolio_list{gap:10px;}
.portfolio_list .list{width:calc((100% - 10px) / 2);}


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

/*********** List *************/
.portfolio_list .list a .thumb{border-radius: var(--borderR10); gap:5px;}
.portfolio_list .list a .thumb .stage{font-size:12px;}
.portfolio_list .list a .thumb .c-logo{transform: translateY(20px);}
.portfolio_list .list a .thumb .hover{transform: translateY(20px);}





}