.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:30px;}
.portfolio_list .list{position:relative; width:calc((100% - 30px) / 2); background:var(--greenBg); border-radius:var(--borderR20); overflow:hidden;}
.portfolio_list .list .checkbox{position:absolute; left:10px; top:10px; z-index:5; }
.portfolio_list .list a{display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; transition:background 0.3s;}
.portfolio_list .list .thumb{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio: 765/450; background:var(--black); overflow:hidden; border-radius:var(--borderR20);}
.portfolio_list .list .thumb .c-bg{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5; z-index:1;}
.portfolio_list .list .thumb .c-bg img{display:block; width:100%; height:100%; object-fit:cover;}
.portfolio_list .list .thumb .c-logo{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:43.137%; max-width:330px; height:20%; max-height:90px; transform-origin:center center; transition:transform 0.3s;}
.portfolio_list .list .thumb .c-logo img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.portfolio_list .list .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:0.889rem; font-weight:700; line-height:24px; color:var(--white); white-space:nowrap;}
.portfolio_list .list .desc{display:flex; flex-direction:column; align-items:flex-start; padding:45px 50px; box-sizing:border-box; }
.portfolio_list .list .desc .sector{display:block; font-size:1rem; font-weight:600; line-height:162.5%; letter-spacing:var(--letter-spacing-default); color:var(--main); transition:color 0.3s;}
.portfolio_list .list .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;}
.portfolio_list .list .desc .text_box{margin:10px 0 0; font-size:1rem; line-height:162.5%; letter-spacing:var(--letter-spacing-default); color:var(--basic); word-break:keep-all; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:color 0.3s, opacity 0.3s;}
.portfolio_list .list .desc .arrow_btn{margin:20px 0 0; flex-shrink:0;}
.portfolio_list .list .thumb .c-bg img{transition:transform 0.5s ease;}
.portfolio_list .list a:hover .thumb .c-bg img{transform:scale(1.15);}
.portfolio_list .list a:hover{background:var(--main);}
.portfolio_list .list a:hover .desc .sector{color:var(--white);}
.portfolio_list .list a:hover .desc h4{color:var(--white);}
.portfolio_list .list a:hover .desc .text_box{color:var(--white); opacity:0.7;}
.portfolio_list .list a:hover .arrow_btn i::before{transform:translate(0, 0);}
.portfolio_list .list a:hover .arrow_btn i::after{transform:translate(10px, -10px);}

/*********** View *************/
.bbs-content:has(.portfolio_view) .title-area{display:none;}
.bbs-content:has(.portfolio_view) .subpad{padding-top:0;}
.portfolio_view{width: 100%;}
.portfolio_view .view_visual{position:relative; display:flex; align-items:center; justify-content:center; height: var(--vh); min-height: 100vh; background:var(--black); overflow:hidden;}
.portfolio_view .view_bg{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5; z-index:1; overflow:hidden;}
.portfolio_view .view_bg img{display:block; width:100%; height:100%; object-fit:cover; animation:subtop-bg-zoom 6.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;}
.portfolio_view .view_intro{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:60px; max-width:1560px; width: 90%; box-sizing:border-box;}
.portfolio_view .view_intro_top{display:flex; flex-direction:column; align-items:center; gap:30px; width:100%;}
.portfolio_view .view_logo{display:flex; align-items:center; justify-content:center; transform-origin:center center; opacity:0; animation:subtop-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;}
.portfolio_view .view_logo.is-text{max-width:100%;}
.portfolio_view .view_logo img{display:block; max-width:330px; max-height:60px; width:auto; height:auto; object-fit:contain;}
.portfolio_view .view_logo.is-text .view_title{color:var(--white); text-align:center; word-break:keep-all;}

.portfolio_view .view_summary{font-size:1.222rem; line-height:160%; letter-spacing:var(--letter-spacing-default); color:var(--white); text-align:center; word-break:keep-all; opacity:0; animation:subtop-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s forwards; text-wrap: balance;}
.portfolio_view .view_home_btn{background: var(--white); opacity:0; animation:subtop-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;}
.portfolio_view .view_home_btn::after{border-color: var(--white); transition: none;}
.portfolio_view .view_home_btn:hover::after{border-color: var(--sub);}
.portfolio_view .view_home_btn i::before{background-image: url('/img/arrow_w.png');}
.portfolio_view .view_home_btn i::after{background-image: url('/img/arrow.png');}

@keyframes portfolioViewScrollFadeUp { 0% { opacity: 0; transform: translateX(-50%) translateY(40px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
.portfolio_view .view_scroll { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; animation: portfolioViewScrollFadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s forwards; }
.portfolio_view.is-admin .view_bg img{animation:none; transform:scale(1);}
.portfolio_view.is-admin .view_logo,.portfolio_view.is-admin .view_summary,.portfolio_view.is-admin .view_home_btn{animation:none; opacity:1; transform:none;}
.portfolio_view.is-admin .view_scroll{animation:none; opacity:1; transform:translateX(-50%);}
.portfolio_view.is-admin .view_scroll img{animation:none; transform:none;}
@media (prefers-reduced-motion:reduce){.portfolio_view .view_bg img{animation:none; transform:scale(1);}.portfolio_view .view_logo,.portfolio_view .view_summary,.portfolio_view .view_home_btn{animation:none; opacity:1; transform:none;}.portfolio_view .view_scroll{animation:none; opacity:1; transform:translateX(-50%);}}
.portfolio_view .view_scroll img { display: block; width: 17px; height: auto; animation: scrollDownAnim 1.5s ease-in-out infinite; }
.portfolio_view .view_scroll img:nth-child(2) { animation-delay: 0.15s; margin-top: -5px; }

@keyframes scrollDownAnim {
    0%, 100% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
}



.portfolio_view .view_info{display:flex; flex-direction:column; align-items:center; gap:35px; box-sizing:border-box; background:var(--white);}
.portfolio_view .view_info_box{display:flex; align-items:flex-start; padding-bottom:80px; border-bottom:1px solid var(--border); box-sizing:border-box;}
.portfolio_view .view_tit{flex-shrink:0; width:580px; padding-right:50px; box-sizing:border-box;}
.portfolio_view .view_tit .catname{font-size:1.111rem; font-weight:600; line-height:166.67%; letter-spacing:var(--letter-spacing-default); color:var(--main); margin-bottom: 20px;}
.portfolio_view .view_tit .subject{font-size:2.222rem; font-weight:700; line-height:115%; letter-spacing:var(--letter-spacing-heading); color:var(--black); word-break:keep-all;}
.portfolio_view .view_detail{flex:1; min-width:0; padding-left:50px; box-sizing:border-box;}
.portfolio_view .view_desc{font-size:1.111rem; line-height:166.67%; letter-spacing:var(--letter-spacing-default); color:var(--basic); word-break:keep-all;}
.portfolio_view .view_desc img{max-width:100%; height:auto !important;}
.portfolio_view .view_meta{margin:30px 0 0; display:flex; flex-direction:column; gap:5px;}
.portfolio_view .view_meta .meta_row{display:flex; gap:20px; align-items:flex-start;}
.portfolio_view .view_meta .meta_row dt{flex-shrink:0; width:80px; font-size:1.111rem; font-weight:600; line-height:166.67%; color:var(--black);}
.portfolio_view .view_meta .meta_row dd{flex:1; min-width:0; font-size:1.111rem; line-height:166.67%; letter-spacing:var(--letter-spacing-default); color:var(--black); opacity:0.7; word-break:keep-all;}
.portfolio_view .view_list_btn{display:flex; align-items:center; justify-content:center; width:100px; height:100px; border-radius:100px; background:var(--main); text-decoration:none; overflow:hidden; position:relative; box-sizing:border-box;}
.portfolio_view .view_list_btn::before{content:''; display:block; width:20px; height:20px; box-sizing:border-box; background:var(--black); border-radius:50%; position:absolute; left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%) scale(0); opacity:0; transition:transform .3s ease-out, opacity .3s ease-out;}
.portfolio_view .view_list_btn:hover::before{transform:translate(-50%,-50%) scale(15); opacity:1; transition:transform .4s ease-out, opacity .2s ease-out;}
.portfolio_view .view_list_btn::after{content:''; display:block; width:20px; height:20px; background:url('/img/list_ico.png') no-repeat center/contain; position:relative; z-index:2;}






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


.portfolio_view .view_tit{width:40%;}


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


/*********** List *************/
.portfolio_list{gap:20px;}
.portfolio_list .list{width:calc((100% - 20px) / 2);}
.portfolio_list .list .thumb .c-logo{transform:scale(0.88);}
.portfolio_list .list .desc{padding:25px 30px;}


/*********** View *************/
.portfolio_view .view_intro{gap:50px;}
.portfolio_view .view_intro_top{gap:20px;}
.portfolio_view .view_logo img{transform:scale(0.88);}
.portfolio_view .view_summary br{display: none;}



.portfolio_view .view_scroll { bottom: 30px;}


.portfolio_view .view_info{gap:25px;}
.portfolio_view .view_info_box{padding-bottom:60px; flex-wrap: wrap; gap:30px;}
.portfolio_view .view_tit{width:100%; padding: 0;}
.portfolio_view .view_tit .catname{margin-bottom: 15px;}
.portfolio_view .view_detail{flex:auto; padding: 0;}
.portfolio_view .view_meta{margin:20px 0 0;}
.portfolio_view .view_list_btn{width:80px; height:80px; }



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


/*********** List *************/
.portfolio_list{gap:10px;}
.portfolio_list .list{width:100%; border-radius:var(--borderR10);}
.portfolio_list .list .thumb{border-radius:var(--borderR10);}
.portfolio_list .list .thumb .c-logo{transform:scale(0.72);}
.portfolio_list .list .desc{padding:20px 25px;}
.portfolio_list .list .desc h4{font-size:1.333rem; letter-spacing: var(--letter-spacing-default);}
.portfolio_list .list .desc .text_box{margin:6px 0 0;}
.portfolio_list .list .desc .arrow_btn{margin:15px 0 0;}
.portfolio_list .list a:hover .arrow_btn i::after{transform:translate(8px, -8px);}


/*********** View *************/
.portfolio_view .view_intro{gap:30px;}
.portfolio_view .view_intro_top{gap:15px;}
.portfolio_view .view_logo img{transform:scale(0.72);}

.portfolio_view .view_scroll img { width: 13px; height: auto;}



.portfolio_view .view_info{gap:20px;}
.portfolio_view .view_info_box{padding-bottom:40px; gap:20px;}
.portfolio_view .view_tit .catname{margin-bottom: 10px;}
.portfolio_view .view_meta{margin:15px 0 0;}
.portfolio_view .view_meta .meta_row{gap:10px;}
.portfolio_view .view_meta .meta_row dt{width:60px;}
.portfolio_view .view_list_btn{width:60px; height:60px; }
.portfolio_view .view_list_btn::after{width:16px; height:16px;}


}