@charset "utf-8";
/* Business */
.main-visual-wrap { background: url("../../img/sub/business/visual_img_01.png"); background-size: cover; background-position: center; }

/* 포트폴리오 */
.portfolio-wrap { width: 100%; }
.portfolio-wrap .category-select { text-align: center; height: 50px; }
.portfolio-wrap .category-select ul { display: inline-block; white-space: nowrap; height: 70px; overflow-x: auto; cursor: pointer; }
.portfolio-wrap .category-select ul li { margin-right: 3px; display: inline-block; }
.portfolio-wrap .category-select ul li:last-child { margin-right: 0; }
.portfolio-wrap .category-select ul li a { border: 1px solid #ccc; border-radius: 5px; height: 50px; display: inline-block;  padding:  0 20px; color: #999; font-weight: bold; line-height: 48px; font-size: 1.2rem; transition: border-color .25s ease, color .25s ease, background .25s ease; }
.portfolio-wrap .category-select ul li a.en { font-size: 1.3rem; }
.portfolio-wrap .category-select ul li:hover a { color: #fff; border-color: #0056d7; background: #0056d7; }
.portfolio-wrap .category-select ul li.select a { background: #0056d7; border-color: #0056d7; color: #fff; }

.portfolio-wrap .project-list { margin-top: 50px; position: relative; text-align: center; }
.portfolio-wrap .project-list ul { display: inline-block; width: 100%; }
.portfolio-wrap .project-list ul li { width: 300px; height: 300px; margin-right: 30px; transition: width .5s ease; display: inline-block; margin-bottom: 30px; }
/* .portfolio-wrap .project-list ul li:nth-child(5n) { margin-right: 0; } */
.portfolio-wrap .project-list ul li:last-child { margin-right: 0; }
.portfolio-wrap .project-list ul li a { display: block; height: 100%; width: 100%; background-color: #2e2f33; position: relative; overflow: hidden; border-radius: 5px; }
.portfolio-wrap .project-list ul li a .thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: 100%; height: 100%; z-index: 1; }
.portfolio-wrap .project-list ul li a .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; }
.portfolio-wrap .project-list ul li a:hover .thumbnail img { -webkit-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); }
.portfolio-wrap .project-list ul li a .info { position: absolute; z-index: 2; width: 100%; height: 100%; text-align: center; color: #fff; top: 100%; left: 0; padding: 60px 10px; opacity: 0; transition: top .5s ease, opacity .5s ease; background: rgba(0,0,0,0.7); word-break: keep-all;}
.portfolio-wrap .project-list ul li a .info .project-name { font-size: 2.2rem; font-weight: bold; display: block; margin-bottom: 10px; line-height: 1.5;}
.portfolio-wrap .project-list ul li a .info .project-name .en { font-size: 2.2rem;  line-height: 26px; font-weight: normal; margin-left: 5px; }
.portfolio-wrap .project-list ul li a .info .project-name.sm { font-size: 1.9rem; }
.portfolio-wrap .project-list ul li a .info .exp { font-size: 1.3rem; display: block; line-height: 20px; padding: 0 30px; overflow: hidden; display: -webkit-box; white-space: normal; word-break: keep-all; -webkit-line-clamp: 5; -webkit-box-orient: vertical; height: calc(1em * 2 * 4); }
.portfolio-wrap .project-list ul li a .info img { width: 38px; margin-top: 20px; display: none; }
.portfolio-wrap .project-list ul li a:hover .info { top: 0; opacity: 1; }

@media all and (max-width: 1040px)
{
	.portfolio-wrap .category-select ul li a { height: 40px; line-height: 38px; }
	.portfolio-wrap .project-list ul li { width: calc(33.33% - 30px); height:0; padding-bottom: 25%; position: relative; margin-right: 15px;  margin-bottom: 20px; }
	.portfolio-wrap .project-list ul li:nth-child(3n) { margin-right: 0; }
	.portfolio-wrap .project-list ul li a { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}
}
@media all and (max-width: 680px)
{
	.portfolio-wrap .project-list ul li a .info { display: none; }
}
@media all and (max-width: 580px)
{
	.portfolio-wrap .category-select {overflow: hidden;}
	.portfolio-wrap .category-select ul { padding: 0 30px; width:100%; overflow:auto; }
	.portfolio-wrap .category-select ul li:last-child {margin-right:30px;}
}

.partner-type-select-area { height: 320px; background: url("../../img/sub/business/partner_bg.png"); background-size: cover; background-position: center; margin-bottom: 60px; }
.partner-type-select-area .type-select { width: 1170px; margin: 0 auto; }
.partner-type-select-area .type-select li { float: left; width: 25%; height: 65px; }
.partner-type-select-area .type-select li a { display: block; text-align: center; height: 100%; line-height: 65px; background: #f8f9fa; font-size: 1.5rem; font-weight: 800; border-right: 1px solid #dee3eb; transition: color .25s ease, background .25s ease; }
.partner-type-select-area .type-select li a.en { font-size: 1.8rem; }
.partner-type-select-area .type-select li:last-child a { border-right: none; }
.partner-type-select-area .type-select li a:hover { background: #003384; color: #fff; }
.partner-type-select-area .type-select li.select a { background: #003384; color: #fff; font-weight: 600; }

@media all and (max-width: 1260px)
{
    .partner-type-select-area .type-select {width:100% !important;}
}
@media all and (max-width: 780px)
{
	.partner-type-select-area { height: 55px; }
}

.partner-wrap { text-align: center; }
.partner-wrap ul li { display: inline-block; margin: 20px 30px; vertical-align: top; filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); opacity: 0.8; transition: opacity .25s ease,filter .25s ease,width .25s ease; }
.partner-wrap ul li:hover { opacity: 1; filter: grayscale(0); -webkit-filter: grayscale(0); }
@media all and (max-width: 640px)
{
	.partner-wrap ul li img { width: 120px; }
}
@media all and (max-width: 480px)
{
	.partner-wrap ul li { margin: 10px 5px; }
}