#portfolio .visual{background:url(/portfolio/img/visual.jpg) center top no-repeat;}

#portfolio .sub-tit{margin-bottom:120px;}

#portfolio .sub-tit article .heading{padding:0;text-align:center;}
#portfolio .sub-tit article .heading:after{display:none;}
#portfolio .sub-tit article .heading h3{font-size:1em;font-weight:700;color:#444444;}
#portfolio .sub-tit article .heading h3 b{color:#4166d8;font-weight:inherit;}

#portfolio .sub-tit article .content{position:relative;margin-top:90px;padding:0 20px;}
#portfolio .sub-tit article .content .list{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;}
#portfolio .sub-tit article .content .list .item{position:relative;background-color:#ffffff;cursor:pointer;box-sizing:border-box;transition:box-shadow ease 250ms;}
#portfolio .sub-tit article .content .list .item:before{content:"";display:block;padding-bottom:44.3%;}
#portfolio .sub-tit article .content .list .item:after{content:"";display:block;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;border:1px solid #d4d4d4;box-sizing:border-box;transition:border ease 250ms;}
#portfolio .sub-tit article .content .list .item .logo{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-size:100%;background-repeat:no-repeat;background-position:center center;filter:saturate(0) brightness(0);opacity:0.17;transition:all ease 500ms;}
#portfolio .sub-tit article .content .list .item .logo_active{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-size:100%;background-repeat:no-repeat;background-position:center center;filter:saturate(0) brightness(0);opacity:0;transition:all ease 500ms;}
#portfolio .sub-tit article .content .list .item:hover,
#portfolio .sub-tit article .content .list .item.active{box-shadow:1px 1px 5px rgba(0,0,0,0.4);}
#portfolio .sub-tit article .content .list .item:hover .logo,
#portfolio .sub-tit article .content .list .item.active .logo{filter:saturate(1) brightness(1);opacity:1;}
#portfolio .sub-tit article .content .list .item:hover .logo_active,
#portfolio .sub-tit article .content .list .item.active .logo_active{filter:saturate(1) brightness(1);opacity:1;}
#portfolio .sub-tit article .content .list .item.has_active:hover .logo,
#portfolio .sub-tit article .content .list .item.has_active.active .logo{opacity:0;}
#portfolio .sub-tit article .content .list .item:hover:after,
#portfolio .sub-tit article .content .list .item.active:after{border:1.5px solid #4166d8;}
#portfolio .sub-tit article .content .list.obj{opacity:0;padding-top:50px;transition:all ease 500ms 200ms;}
#portfolio .sub-tit article .content .list.obj.run{opacity:1;padding-top:0;}


#portfolio_view{position:fixed;z-index:9999999;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:#FFFFFF;display:none;}
#portfolio_view:before{content:"";display:block;position:absolute;z-index:2;left:0;top:0;width:100%;height:32px;background-color:#4166d8;opacity:0;}
#portfolio_view:after{content:"";display:block;position:absolute;z-index:0;left:0;bottom:0;width:100%;height:50vh;max-height:480px;background-color:#f4f4f4;}
#portfolio_view .close{position:absolute;z-index:4;right:15px;top:calc(32px + 15px);margin:0;padding:0;border:0;width:50px;border-radius:50%;background-color:rgba(255,255,255,0.5);font-size:0;color:transparent;background-image:url(/portfolio/img/close.png);background-size:50%;background-repeat:no-repeat;background-position:center center;}
#portfolio_view .close:before{content:"";display:block;padding-bottom:100%;}
#portfolio_view .decoration{position:absolute;z-index:1;left:100%;top:50%;transform:translate(calc(-50% - 50px - 1em),-50%) rotate(-90deg);transform-origin:center center;font-size:16px;font-weight:400;color:#676767;line-height:1;letter-spacing:0.2em;white-space:nowrap;text-transform:uppercase;box-sizing:border-box;}
#portfolio_view .decoration b{font-weight:700;}
#portfolio_view .content{position:absolute;z-index:3;left:0;bottom:0;width:100%;height:calc(100% - 32px);overflow:auto;box-sizing:border-box;}
#portfolio_view .content .content_inner{position:relative;margin:0 auto;padding:90px 30px;max-width:calc(1280px + 60px);box-sizing:border-box;}
#portfolio_view .content .info{position:relative;display:flex;flex-wrap:nowrap;flex-direction:row;font-size:20px;opacity:0;}
#portfolio_view .content .info .logo{position:relative;max-width:250px;flex-shrink:0;display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:center;}
#portfolio_view .content .info .logo img{position:relative;display:block;width:auto;}
#portfolio_view .content .info .titles{position:relative;flex-grow:1;border-left:3px solid #e4e4e4;padding:0 30px;margin-left:30px;display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:center;}
#portfolio_view .content .info .titles .ko{position:relative;margin:0;padding:0;font-size:2.4em;font-weight:700;color:#444444;line-height:1.2;white-space:nowrap;letter-spacing:-0.02em;}
#portfolio_view .content .info .titles .en{position:relative;margin:0;padding:0;font-size:1em;font-weight:400;color:#a9a9a9;line-height:1.2;white-space:nowrap;text-transform:uppercase;letter-spacing:-0.005em;}
#portfolio_view .content .info .titles .ko + .en{margin-top:0.5em;}
#portfolio_view .content .info .works{position:relative;max-width:500px;display:flex;flex-wrap:nowrap;flex-direction:column;row-gap:0.7em;}
#portfolio_view .content .info .works .item{position:relative;font-size:1.05em;color:#000000;line-height:1.4;display:flex;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;}
#portfolio_view .content .info .works .item .title{position:relative;margin:0;padding:0;padding-left:0.8em;font-size:1.23em;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;flex-grow:0;flex-shrink:0;}
#portfolio_view .content .info .works .item .title:before{content:"";display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);border:0.23em solid transparent;border-left-width:0.4em;border-left-color:#4166d8;}
#portfolio_view .content .info .works .item .text{position:relative;margin:0;padding:0;padding-left:1.2em;margin-top:0.2em;font-size:1em;font-weight:500;flex-grow:1;word-break:keep-all;}
#portfolio_view .content .info .works .item .text:before{content:"";display:block;position:absolute;top:0.2em;left:0.6em;width:1px;height:1em;background-color:#000000;}
#portfolio_view .content .image{position:relative;margin-top:120px;opacity:0;}
#portfolio_view .content .image > div{position:relative;display:block;max-width:100%;margin:0 auto;text-align:center;}
#portfolio_view .content .image > div img{display:block;max-width:100%;margin:0 auto;}
#portfolio_view .content .image > div[data-image]{display:block;}
#portfolio_view .content .image > div[data-image-mobile]{display:none;max-width:600px;width:100%;}
#portfolio_view.active:before{animation:ani_portfolio_view_bar ease 1000ms 50ms forwards;}
#portfolio_view.active .content .info{animation:ani_portfolio_view_content_info ease 750ms 200ms forwards;}
#portfolio_view.active .content .image{animation:ani_portfolio_view_content_image ease 1000ms 400ms forwards;}

@keyframes ani_portfolio_view_bar{
	from{width:0;opacity:0;}
	to{width:100%;opacity:1;}
}

@keyframes ani_portfolio_view_content_info{
	from{opacity:0;}
	to{opacity:1;}
}

@keyframes ani_portfolio_view_content_image{
	from{opacity:0;padding-top:100px;}
	to{opacity:1;padding-top:0;}
}

@media all and (max-width:1400px){
	#portfolio_view:before{z-index:1;height:50px;}
	#portfolio_view .close{right:0;top:0;border-radius:0;background-color:transparent;filter:invert(1);}
	#portfolio_view .decoration{z-index:2;left:0;top:0;transform:none;padding:0 30px;color:#FFFFFF;height:50px;display:flex;flex-wrap:nowrap;flex-direction:row;align-items:center;}
	#portfolio_view .content{height:calc(100% - 50px);}
	#portfolio_view .content .content_inner{padding:70px 30px;}
	#portfolio_view .content .info{flex-wrap:wrap;font-size:18px;}
	#portfolio_view .content .info .titles .ko{font-size:2.2em;}
	#portfolio_view .content .info .works{flex-shrink:0;width:100%;max-width:100%;margin-top:30px;}
	#portfolio_view .content .image{margin-top:80px;}
}

@media all and (max-width:1000px){
	#portfolio_view:after{height:200px;}
	#portfolio_view .decoration{font-size:12px;padding:0 15px;}
	#portfolio_view .content .content_inner{padding:50px 15px;}
	#portfolio_view .content .info{font-size:16px;justify-content:center;}
	#portfolio_view .content .info .logo{max-width:100%;}
	#portfolio_view .content .info .logo img{max-height:35px;}
	#portfolio_view .content .info .titles{border:0;padding:0;margin:0;flex-shrink:0;width:100%;max-width:100%;margin-top:40px;text-align:center;}
	#portfolio_view .content .info .titles .ko{font-size:2em;}
	#portfolio_view .content .info .works{margin-top:40px;padding-top:35px;}
	#portfolio_view .content .info .works:before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);display:block;margin:0;padding:0;height:2px;width:65px;background-color:#e4e4e4;}
	#portfolio_view .content .image{margin-top:60px;}
	#portfolio_view .content .image div[data-image]{display:none;}
	#portfolio_view .content .image div[data-image-mobile]{display:block;}
}

@media all and (max-width:600px){
	#portfolio_view .decoration{flex-direction:column;align-items:flex-start;justify-content:center;row-gap:5px;}
	#portfolio_view .close{background-size:40%;}
	#portfolio_view .content .info{font-size:14px;}
	#portfolio_view .content .info .titles{margin-top:35px;}
	#portfolio_view .content .info .works{margin-top:35px;padding-top:30px;}
	#portfolio_view .content .image{margin-top:40px;}
}

@media all and (max-width:400px){
	#portfolio_view .content .info{font-size:13px;}
	#portfolio_view .content .info .titles{margin-top:30px;}
	#portfolio_view .content .info .works{margin-top:30px;padding-top:25px;}
}