@charset "utf-8";

/* .main-visual-wrap { background: url("../../img/sub/business/visual_img_01.png"); background-size: cover; background-position: center; } */
.main-visual-wrap { background-color: var(--dark-color); }

/* 포트폴리오 */
.portfolio-wrap { width: 100%; margin: 0 auto; padding: 0 50px;}
.portfolio-wrap .category { text-align: center; overflow: hidden; height: 50px; margin-top: 60px;}
.portfolio-wrap .category ul { display: block; white-space: nowrap; overflow-x: auto; height: 80px; }
.portfolio-wrap .category ul li { margin-right: 3px; display: inline-block; }
.portfolio-wrap .category ul li:last-child { margin-right: 0; }
.portfolio-wrap .category ul li a { border: 1px solid #999; border-radius: 5px; height: 50px; display: inline-block;  padding: 0 20px; color: #999; font-weight: 600; line-height: 48px; font-size: 1.4rem; transition: border-color .25s ease, color .25s ease; font-family: 'Rajdhani';}
.portfolio-wrap .category ul li:hover a,
.portfolio-wrap .category ul li.on a { background: var(--main-blue); border-color: var(--main-blue); color: #fff; }



.portfolio-wrap .project-list { margin-top: 50px; overflow: hidden; position: relative; transition: height .5s ease; }
.portfolio-wrap .project-list ul { display: inline-block; width: 100%; text-align: center;  }
.portfolio-wrap .project-list ul li  { position: relative; height: 0; width: 15%; padding-bottom: 15%; display: inline-block; margin: 0 25px 25px 0; transition: width .5s ease; cursor: pointer; }
.portfolio-wrap .project-list ul li .item-wrap { display: block; height: 100%; width: 100%; background-color: #2e2f33; position: relative; overflow: hidden; border-radius: 5px; position: absolute; top:0; left: 0; }
.portfolio-wrap .project-list ul li .item-wrap .thumbnail { height: 100%; width: 100%; }
.portfolio-wrap .project-list ul li .item-wrap .thumbnail img { width: 100%; height: 100%; transition: transform 0.5s ease-out; transform: scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -webkit-transform: scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -moz-transform: scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform-origin: 50%; -webkit-transform-origin: 50%; }
.portfolio-wrap .project-list ul li .item-wrap:hover .thumbnail img { transform: scale3d(1.1,1.1,1) rotate3d(0,0,0,0.01deg); -webkit-transform: scale3d(1.1,1.1,1) rotate3d(0,0,0,0.01deg); -moz-transform: scale3d(1.1,1.1,1) rotate3d(0,0,0,0.01deg); }
.portfolio-wrap .project-list ul li .item-wrap .info { background-color: rgba(2,3,23,0.7); backdrop-filter: blur(5px); position: absolute; z-index: 2; width: 100%; height: 100%; text-align: center; color: #fff; top: 100%; left: 0; opacity: 0; transition: top .5s ease, opacity .5s ease; }
.portfolio-wrap .project-list ul li .item-wrap .info .item { width: 100%; position: absolute; top:55%; left: 50%; transform: translate(-50%,-50%); }
.portfolio-wrap .project-list ul li .item-wrap .info .item img { width: 30px; height: 30px; }
.portfolio-wrap .project-list ul li .item-wrap .info .item .tit { width: 100%; font-size: 1.4rem; font-weight: 600; padding-top: 20px;}
.portfolio-wrap .project-list ul li .item-wrap:hover .info { top: 0; opacity: 1; }

@media all and (max-width: 1024px)
{
	.portfolio-wrap .project-list ul li { margin: 0 10px 10px 0; display: inline-block; }
	.portfolio-wrap .project-list ul li .item-wrap .info .item img { width: 20px; height: 20px; }
	.portfolio-wrap .project-list ul li .item-wrap .info .item .tit { font-size: 1.1rem; }
}
@media all and (max-width: 780px)
{
	.portfolio-wrap { padding: 0 20px; }
	.portfolio-wrap .category { height: 40px; overflow: hidden; margin-top: 40px; }
	.portfolio-wrap .category ul { height: 70px; overflow: auto; }
	.portfolio-wrap .category ul li a { height: 40px; line-height: 38px; }

	.portfolio-wrap .project-list ul li  { width: 23%; padding-bottom: 23%; text-align: center; position: relative; margin-right: 10px;  margin-bottom: 10px; }
}
@media all and (max-width: 420px)
{
	.portfolio-wrap .category ul li:last-child {margin-right:30px;}
	.portfolio-wrap .project-list ul li { width: calc(33.33% - 10px); padding-bottom: 33%; float: left; margin-right: 15px; }
	.portfolio-wrap .project-list ul li:nth-child(3n) { margin-right: 0; }
}