@charset "utf-8";

.portfolio-v2-wrapper {background:#16181f; overflow:hidden;}

.portfolio-v2-heading {text-align:center; color:#fff; padding:280px 0 165px;}
.portfolio-v2-heading h2 {font-size:100px; font-weight:800; line-height:1.33em; letter-spacing:-.02em;}
.portfolio-v2-heading p {font-size:18px; line-height:1.6em; letter-spacing:-.02em;}

.portfolio-v2-grid .items {margin:-27px;}
.portfolio-v2-grid .items:after {content:""; display:block; clear:both;}
.portfolio-v2-grid .item {float:left; width:20%; padding:27px; transition-timing-function:ease-in-out !important; transition-duration:.6s !important;}
.portfolio-v2-grid .item:nth-child(2) .card,
.portfolio-v2-grid .item:nth-child(4) .card {margin-top:35%;}
.portfolio-v2-grid .card {display:block; position:relative; overflow:hidden; color:#fff;}
.portfolio-v2-grid .card .img {position:relative;}
.portfolio-v2-grid .card .img img {display:block; width:100%; transition:.2s;}
.portfolio-v2-grid .card .img:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); opacity:0; transition:.2s;}
.portfolio-v2-grid .card .icon {position:absolute; top:50px; left:50px; color:#fff; font-size:16px; font-weight:300; line-height:1.6em; letter-spacing:-.03em;}
.portfolio-v2-grid .card .icon strong {font-weight:500; font-size:1.25em;}
.portfolio-v2-grid .card .icon .bar {margin:23px 0 15px; width:30px; height:1px; background:#fff;}
.portfolio-v2-grid .card .text {position:absolute; left:0; bottom:0; width:100%; padding:50px;}
.portfolio-v2-grid .card .text .arrow {display:block; width:22px; height:22px; background:url("/images/sub/port_arrow.svg") 50% 50% no-repeat; background-size:contain; margin-bottom:17px;}
.portfolio-v2-grid .card .text .ko {font-size:20px; font-weight:500; line-height:1.4em; margin-bottom:7px;}
.portfolio-v2-grid .card .text .en {font-size:30px; font-weight:700; line-height:1.167em;}
.portfolio-v2-grid .card .more {opacity:0; transform:translateX(50%) rotate(180deg); transition:.4s cubic-bezier(.175,.885,.32,1.275); position:absolute; top:50px; right:50px; width:120px; height:120px; font-size:18px; line-height:1.389em; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#9ec04b; border-radius:100%;}
.portfolio-v2-grid .card .text .arrow,
.portfolio-v2-grid .card .text .ko,
.portfolio-v2-grid .card .text .en {opacity:0; transform:translateY(15px); transition:.3s;}
.portfolio-v2-grid .card:hover .img img {transform:scale(1.02);}
.portfolio-v2-grid .card:hover .img:after {opacity:1;}
.portfolio-v2-grid .card:hover .text .arrow {opacity:1; transform:translateY(0); transition-delay:.2s;}
.portfolio-v2-grid .card:hover .text .ko {opacity:1; transform:translateY(0); transition-delay:.3s;}
.portfolio-v2-grid .card:hover .text .en {opacity:1; transform:translateY(0); transition-delay:.4s;}
.portfolio-v2-grid .card:hover .more {opacity:1; transform:translateX(0) rotate(0); transition-delay:.2s;}

.portfolio-v2-show #header {z-index:100000;}
.portfolio-v2-show .fancybox-wrap {top:220px !important;}
.portfolio-v2-show .fancybox-skin {background:none; /* box-shadow:0 0 20px rgba(0,0,0,.4); */}
.portfolio-v2-show .fancybox-inner {max-height:calc(100vh - 220px) !important;}
.portfolio-v2-show .fancybox-overlay {background:#16181f;}

.portfolio-v2-close {position:absolute; right:0; top:-43px; margin-bottom:16px; width:28px; height:28px; background:url("/images/sub/close.svg") 50% 50% no-repeat; background-size:contain;}

.port-view-award {position:sticky; position:-webkit-sticky; top:0; display:flex; align-items:center; margin-bottom:28px; text-align:left; color:#fff; font-size:16px; font-weight:300; line-height:1.6em; letter-spacing:-.03em;}
.port-view-award img {min-width:66px; margin-right:20px;}
.port-view-award strong {font-weight:500; font-size:1.25em;}

.port-view-mo {display:none;}

.port-view-float {position:fixed; bottom:0; left:0; width:100%; padding:15px 0; display:flex; justify-content:center; background:rgba(0,0,0,.5);}
.port-view-float .btn {margin:0 5px; padding:0 25px; width:240px; height:60px; color:#fff; font-size:16px; line-height:1.2em; display:flex; align-items:center; justify-content:space-between;}
.port-view-float .btn:after {content:""; width:14px; height:14px; background:url("/images/sub/btn_arrow.svg") 50% 50% no-repeat; background-size:contain; transition:.2s;}
.port-view-float .btn.type1 {background:#ef5632;}
.port-view-float .btn.type2 {background:#16181f;}
.port-view-float .btn:hover::after {transform:translateX(6px)}

.portfolio-v2-list {color:#fff; padding:250px 30px 200px;}
.portfolio-v2-list .search-area {text-align:center; margin-bottom:105px;}
.portfolio-v2-list .search-area h2 {font-size:100px; font-weight:800; line-height:1.33em; letter-spacing:-.02em; margin-bottom:50px;}
.portfolio-v2-list .search-area .form {position:relative; max-width:600px; margin:0 auto;}
.portfolio-v2-list .search-area .form .input {display:block; width:100%; height:60px; background:none; border:1px solid #686868; color:#fff; font-size:18px; font-weight:600; padding:0 70px 0 25px; border-radius:60px;}
.portfolio-v2-list .search-area .form .input::-webkit-input-placeholder {color:#686868; font-weight:400;}
.portfolio-v2-list .search-area .form .input:-moz-placeholder {color:#686868; font-weight:400;}
.portfolio-v2-list .search-area .form .input::-moz-placeholder {color:#686868; font-weight:400;}
.portfolio-v2-list .search-area .form .input:-ms-input-placeholder {color:#686868; font-weight:400;}
.portfolio-v2-list .search-area .form .input:placeholder-shown {color:#686868; font-weight:400;}
.portfolio-v2-list .search-area .form .submit {position:absolute; top:0; right:0; width:68px; height:100%; background:url("/images/bbs/icon_search.svg") 50% 50% no-repeat; border:0;}
.portfolio-v2-list .search-area .keywords {margin-top:17px; color:#454545; font-size:17px; line-height:1.5em;}
.portfolio-v2-list .search-area .keywords ul {display:flex; justify-content:center; flex-wrap:wrap; margin:-3px -12px;}
.portfolio-v2-list .search-area .keywords ul li {padding:3px 12px;}
.portfolio-v2-list .search-area .keywords ul li a:hover {color:#fff; text-decoration: underline;}
.portfolio-v2-list .list-area {max-width:1720px; margin:0 auto;}
.portfolio-v2-list .list-area ul {display:flex; flex-wrap:wrap; margin:0 -10px;}
.portfolio-v2-list .list-area ul li.none {width:100%; text-align:center; padding:70px 0;}
.portfolio-v2-list .list-area ul li {position:relative; width:25%; text-align:center; padding:0 10px; margin-bottom:60px;}
.portfolio-v2-list .list-area ul li .img {margin-bottom:15px; position:relative; padding-bottom:72.29%; overflow:hidden;}
.portfolio-v2-list .list-area ul li .img > img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:.4s;}
.portfolio-v2-list .list-area ul li .img:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3); opacity:0; transition:.4s;}
.portfolio-v2-list .list-area ul li .img .line-1 {content:""; position:absolute; top:0; left:0; width:0; height:4px; background:#e2fba5; transition:.4s; z-index:2;}
.portfolio-v2-list .list-area ul li .img .line-2 {content:""; position:absolute; top:0; right:0; width:4px; height:0; background:#e2fba5; transition:.4s; z-index:2;}
.portfolio-v2-list .list-area ul li .img .line-3 {content:""; position:absolute; bottom:0; left:0; width:0; height:4px; background:#e2fba5; transition:.4s; z-index:2;}
.portfolio-v2-list .list-area ul li .img .line-4 {content:""; position:absolute; bottom:0; left:0; width:4px; height:0; background:#e2fba5; transition:.4s; z-index:2;}
.portfolio-v2-list .list-area ul li .icon {position:absolute; top:20px; left:20px; text-align:left; color:#fff; font-size:16px; font-weight:300; line-height:1.6em; letter-spacing:-.03em;}
.portfolio-v2-list .list-area ul li .icon strong {font-weight:500; font-size:1.25em;}
.portfolio-v2-list .list-area ul li .icon .bar {margin:23px 0 15px; width:30px; height:1px; background:#fff;}
.portfolio-v2-list .list-area ul li .cate {color:#686868; font-size:17px; line-height:1.33em; margin-bottom:6px;}
.portfolio-v2-list .list-area ul li .tit {color:#fff; font-size:18px; line-height:1.33em;}
.portfolio-v2-list .list-area ul li .btn {position:absolute; bottom:30px; right:30px; width:48px; height:48px; transform:translateX(20px); opacity:0; transition:.4s; background:#4a21ef url("/images/bbs/icon_home.svg") 50% 50% no-repeat; border-radius:100%; z-index:2;}
.portfolio-v2-list .list-area ul li .mobile-link {display:none;}
.portfolio-v2-list .list-area ul li .more {opacity:0; transform:translateX(50%) rotate(180deg); transition:.4s cubic-bezier(.175,.885,.32,1.275); position:absolute; z-index:2; top:50%; left:50%; margin:-50px 0 0 -50px; width:100px; height:100px; font-size:18px; line-height:1.389em; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#9ec04b; border-radius:100%;}
.portfolio-v2-list .list-area ul li a:hover .img > img {transform:scale(1.075);}
.portfolio-v2-list .list-area ul li a:hover .img .line-1,
.portfolio-v2-list .list-area ul li a:hover .img .line-3 {width:100%;}
.portfolio-v2-list .list-area ul li a:hover .img .line-2,
.portfolio-v2-list .list-area ul li a:hover .img .line-4 {height:100%;}
.portfolio-v2-list .list-area ul li a:hover .img:after {opacity:1;}
.portfolio-v2-list .list-area ul li:hover .btn {transform:translateX(0); opacity:1;}
.portfolio-v2-list .list-area ul li a:hover .more {opacity:1; transform:translateX(0) rotate(0); transition-delay:.2s;}
.portfolio-v2-list .paginate {margin-top:60px;}
.portfolio-v2-list .paginate a, .portfolio-v2-list .paginate strong {color:#fff; font-family:"Pretendard",sans-serif; font-size:15px;}
.portfolio-v2-list .paginate a.direction.prev {margin-right:10px;}
.portfolio-v2-list .paginate a.direction.next {margin-left:10px;}

@media (max-width: 1920px) {
	.portfolio-v2-grid .item {width:25%}
}

@media (max-width: 1600px) {
	.portfolio-v2-heading {padding:200px 0 120px;}
	.portfolio-v2-heading h2 {font-size:85px;}
	.portfolio-v2-heading p {font-size:16px;}

	.portfolio-v2-grid .items {margin:-16px;}
	.portfolio-v2-grid .item {padding:16px;}
	.portfolio-v2-grid .card .icon {top:30px; left:30px;}
	.portfolio-v2-grid .card .text {padding:30px;}
	.portfolio-v2-grid .card .text .ko {font-size:18px;}
	.portfolio-v2-grid .card .text .en {font-size:26px;}
	.portfolio-v2-grid .card .more {width:90px; height:90px; font-size:15px; top:30px; right:30px;}

	.portfolio-v2-list {padding-top:200px;}
	.portfolio-v2-list .search-area h2 {font-size:85px;}
	.portfolio-v2-list .list-area ul li .more {width:80px; height:80px; font-size:15px; margin:-40px 0 0 -40px;}


	
}

@media (max-width: 1024px) {
	.portfolio-v2-heading {padding:130px 0 90px;}
	.portfolio-v2-heading h2 {font-size:65px;}
	.portfolio-v2-heading p {font-size:15px;}

	.portfolio-v2-grid .items {margin:-10px;}
	.portfolio-v2-grid .item {padding:10px;}
	.portfolio-v2-grid .card .icon {top:20px; left:20px; transform:scale(.7); transform-origin:top left;}
	.portfolio-v2-grid .card .text {padding:16px 20px;}
	.portfolio-v2-grid .card .text .arrow {width:16px; height:16px;}
	.portfolio-v2-grid .card .text .ko {font-size:16px;}
	.portfolio-v2-grid .card .text .en {font-size:22px;}
	.portfolio-v2-grid .card .text .arrow, 
	.portfolio-v2-grid .card .text .ko, 
	.portfolio-v2-grid .card .text .en {opacity:1; transform:none;}

	.portfolio-v2-show .fancybox-wrap {top:170px !important;}
	.portfolio-v2-show .fancybox-inner {max-height:calc(100vh - 170px) !important;}

	.port-view-award {margin-bottom:20px; font-size:14px;}
	.port-view-award img {min-width:50px; margin-right:15px;}

	.portfolio-v2-close {width:24px; height:24px; top:-38px;}

	.port-view-float {padding:10px 0;}
	.port-view-float .btn {width:220px; height:50px;}

	.portfolio-v2-list {padding:130px 30px 140px;}
	.portfolio-v2-list .search-area {margin-bottom:60px;}
	.portfolio-v2-list .search-area h2 {font-size:65px; margin-bottom:30px;}
	.portfolio-v2-list .search-area .form {max-width:480px;}
	.portfolio-v2-list .search-area .form .input {height:52px;}
	.portfolio-v2-list .search-area .keywords {font-size:15px;}
	.portfolio-v2-list .list-area ul li {margin-bottom:40px;}
	.portfolio-v2-list .list-area ul li .icon {top:15px; left:15px; transform:scale(.7); transform-origin:top left;}
	.portfolio-v2-list .list-area ul li .cate {font-size:14px; word-break:break-all;}
	.portfolio-v2-list .list-area ul li .tit {font-size:16px;}
	.portfolio-v2-list .list-area ul li .btn {transform:none; opacity:1; right:12px; bottom:12px; width:42px; height:42px; background-size:44%;}
	.portfolio-v2-list .paginate {margin-top:40px;}

	
	
}


@media (max-width: 900px) {
	.portfolio-v2-grid .item {width:33.33333333%;}
	.portfolio-v2-grid .item:nth-child(4) .card {margin-top:0;}

	.portfolio-v2-list .list-area ul li {width:33.33333333%;}
}

@media (max-width: 760px) {
	.portfolio-v2-heading {padding:130px 0 85px;}
	.portfolio-v2-heading h2 {font-size:50px; line-height:1em; margin-bottom:10px;}
	.portfolio-v2-heading p {font-size:13px;}

	.portfolio-v2-grid .items {margin:-5px;}
	.portfolio-v2-grid .item {width:50%; padding:5px;}
	.portfolio-v2-grid .item:nth-child(2) .card {margin-top:0;}
	.portfolio-v2-grid .card .icon {top:18px; left:18px; width:140%; transform:scale(.6);}
	.portfolio-v2-grid .card .text {padding:16px 18px;}
	.portfolio-v2-grid .card .text .arrow {width:14px; height:14px; margin-bottom:10px;}
	.portfolio-v2-grid .card .text .ko {font-size:15px; margin-bottom:5px;}
	.portfolio-v2-grid .card .text .en {font-size:17px;}
	.portfolio-v2-grid .card .text .arrow, 
	.portfolio-v2-grid .card .text .ko, 
	.portfolio-v2-grid .card .text .en {opacity:1; transform:none;}
	.portfolio-v2-grid .card .more {width:60px; height:60px; font-size:12px; top:16px; right:16px;}

	.portfolio-v2-show .fancybox-wrap {top:130px !important;}
	.portfolio-v2-show .fancybox-inner {max-height:calc(100vh - 130px) !important;}

	.portfolio-v2-close {width:20px; height:20px; top:-28px;}

	.port-view-award {margin-bottom:10px; font-size:12px;}
	.port-view-award img {min-width:44px; max-width:44px; margin-right:10px;}

	.port-view-pc {display:none;}
	.port-view-mo {display:block;}

	.port-view-float {padding:8px 12px;}
	.port-view-float .btn {width:50%; height:40px; font-size:13px; padding:0 13px; margin:0 3px;}
	.port-view-float .btn:after {width:12px; height:12px;}

	.portfolio-v2-list {padding:130px 0 80px;}
	.portfolio-v2-list .search-area {margin-bottom:30px; padding:0 16px;}
	.portfolio-v2-list .search-area h2 {font-size:50px; margin-bottom:25px;}
	.portfolio-v2-list .search-area .form {max-width:300px;}
	.portfolio-v2-list .search-area .form .input {height:42px; font-size:14px; padding:0 50px 0 20px;}
	.portfolio-v2-list .search-area .form .submit {width:50px; background-size:18px;}
	.portfolio-v2-list .search-area .keywords {font-size:13px; margin-top:10px;}
	.portfolio-v2-list .search-area .keywords ul {margin:-3px -6px;}
	.portfolio-v2-list .search-area .keywords ul li {padding:3px 6px;}
	.portfolio-v2-list .list-area ul {margin:0 -5px;}
	.portfolio-v2-list .list-area ul li {width:50%; padding:0 5px; margin-bottom:35px;}
	.portfolio-v2-list .list-area ul li .img {margin-bottom:10px;}	
	.portfolio-v2-list .list-area ul li .img .line-1,
	.portfolio-v2-list .list-area ul li .img .line-3 {height:3px;}
	.portfolio-v2-list .list-area ul li .img .line-2,
	.portfolio-v2-list .list-area ul li .img .line-4 {width:3px;}
	.portfolio-v2-list .list-area ul li .icon {top:10px; left:10px; width:140%; transform:scale(.6);}
	.portfolio-v2-list .list-area ul li .cate {font-size:13px; margin-bottom:3px;}
	.portfolio-v2-list .list-area ul li .tit {font-size:15px;}
	.portfolio-v2-list .list-area ul li .btn {display:none;}
	.portfolio-v2-list .list-area ul li .mobile-link {display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
	.portfolio-v2-list .list-area ul li .more {width:60px; height:60px; font-size:12px; margin:-30px 0 0 -30px;}
	.portfolio-v2-list .paginate {margin-top:20px;}
	.portfolio-v2-list .paginate a, .portfolio-v2-list .paginate strong {font-size:14px;}

	
}