/* 포트폴리오 내 탭메뉴 */
#lnb.portfolio{ margin-top: 20px; }
#lnb.portfolio .hexagen{ max-width: 100%; }
#lnb.portfolio ul{ flex-wrap: wrap; }
#lnb.portfolio ul li{ width: calc(100% / 7); margin-right: 0 !important; }
#lnb.portfolio ul li a{ font-size: 2rem; }

@media screen and (max-width: 1600px){
	#lnb.portfolio ul li a{ font-size: 1.8rem; }
}

@media screen and (max-width: 1250px){
	#lnb.portfolio ul li a{ font-size: 1.7rem; }	
}

@media screen and (max-width: 900px){
	#lnb.portfolio ul{ gap: 10px 0; overflow: hidden; }
	#lnb.portfolio ul li{ max-width: 100%; width: calc(100% / 3); position: relative; }
	#lnb.portfolio ul li::after{ content: ""; width: 100vw; height: 1px; background: #D9D9D9; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); }
	#lnb.portfolio ul li:nth-of-type(1)::after, #lnb.portfolio ul li:nth-of-type(2)::after, #lnb.portfolio ul li:nth-of-type(3)::after{ display: none; }
	#lnb.portfolio ul li a{ font-size: 1.5rem; }
}


/* 포트폴리오 */
#portfolio2{ padding-top: 20px !important; }
#portfolio2 section:not(:last-of-type){ margin-bottom: 20px !important; }
#portfolio2 .filter-box .search{ display: flex; justify-content: flex-end; margin-bottom: 20px; }
#portfolio2 .filter-box .search .hexagen{ width: 100%; --width: 16px; --position: -8px; --border: rgba(0, 0, 0, 0.1); }
#portfolio2 .filter-box .search > div{ position: relative; }
#portfolio2 .filter-box .search .line{ width: 100%; }
#portfolio2 .filter-box .search input, #portfolio2 .filter-box .search button{ height: 35px; font-family: var(--baseFont); font-size: 1.4rem; color: #1F1F1F; letter-spacing: -0.02em; border: none; }
#portfolio2 .filter-box .search .input{ max-width: calc(100% - 65px); width: 305px; position: relative; margin-right: 10px; }
#portfolio2 .filter-box .search .input input{ width: 100%; font-weight: 300; border: 1px solid rgba(0, 0, 0, 0.1); outline: none; padding: 0 20px; padding-right: 55px; }
#portfolio2 .filter-box .search .input button{ width: 55px; height: 100%; position: absolute; top: 0; right: 0; background: none; outline: none; padding: 0; }
#portfolio2 .filter-box .search .button{ width:75px; --border: var(--mainColor); }
#portfolio2 .filter-box .search .button button{ width: 100%; background: var(--mainColor); font-weight: 700; color: #fff; line-height: 1; outline: none; }
#portfolio2 .filter-box .search .button button::after{ content: "\e936"; display: inline-block; font-family: "xeicon"; font-weight: normal; font-style: normal; margin-left: 5px; position: relative; }

#portfolio2 .filter-box .search .button.on{ --border: #DDD; }
#portfolio2 .filter-box .search .button.on button{ background: #fff; border: 1px solid #DDD; color: var(--mainColor); }
#portfolio2 .filter-box .search .button.on button::after{ top: 1px; transform: rotate(-180deg); }

#portfolio2 .filter-box .filter .hexagen{ width: 100%; --width: 22px; --position: -11px; --border: rgba(0, 0, 0, 0.1); }
#portfolio2 .filter-box .filter *{ font-size: 1.7rem; line-height: 1; }
#portfolio2 .filter-box .filter .line{ width: 100%; display: flex; }
#portfolio2 .filter-box .filter .form-box .line:not(:last-of-type){ margin-bottom: 7px; }  
#portfolio2 .filter-box .filter .title{ width: 220px; }
#portfolio2 .filter-box .filter .title .hexagen{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--mainColor); --bg: #F8F8F8; }
#portfolio2 .filter-box .filter .title p{ font-weight: 700; color: #fff; letter-spacing: -0.02em; text-align: center; padding: 19px; }
#portfolio2 .filter-box .filter .ul{ width: calc((100% - 220px)); padding: 7px 30px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
#portfolio2 .filter-box .filter .form-box .line:last-of-type .ul{ border-bottom: 0; }
#portfolio2 .filter-box .filter .ul ul{ display: flex; flex-wrap: wrap; gap: 18px; }
#portfolio2 .filter-box .filter .ul ul li input{ display: none; }
#portfolio2 .filter-box .filter .ul ul li input + label{ display: inline-block; padding: 10px 20px; font-weight: 400; color: #999; background: #fff; border: 1px solid #DDD; border-radius: 600px; cursor: pointer; }
#portfolio2 .filter-box .filter .ul ul li input:checked + label{ background: var(--mainColor); border: 1px solid var(--mainColor); color: #fff; }

/* 슬라이드 버튼 */
#portfolio2 .filter-box .filter .form-box{ padding: 40px; background: #F8F8F8; border-radius: 10px; margin-bottom: 20px; display: none; }
#portfolio2 .filter-box .filter .center{ margin-top: 25px; display: flex; justify-content: center; }
#portfolio2 .filter-box .filter .center .hexagen{ width: 90px; height: 45px; --width: 18px; --position: -10px;  --bg: #F8F8F8; --border: #DDD; border: 1px solid #DDD; background: #fff; cursor: pointer; transition: all 0.5s; }
#portfolio2 .filter-box .filter .center .hexagen::before, #portfolio2 .filter-box .filter .center .hexagen::after, #portfolio2 .filter-box .filter .center .hexagen .line::before, #portfolio2 .filter-box .filter .center .hexagen .line::after{ transition: all 0.5s; }
#portfolio2 .filter-box .filter .center .button, #portfolio2 .filter-box .filter .center button{ width: 100%; height: 100%; padding: 0; cursor: pointer; }
#portfolio2 .filter-box .filter .center button{ border: none; background: none; font-family: var(--Montserrat); font-size: 1.3rem; font-weight: 700; color: var(--mainColor); line-height: 1; }
#portfolio2 .filter-box .filter .center .hexagen:hover{ background: var(--mainColor); border: 1px solid var(--mainColor); --border: var(--mainColor); }
#portfolio2 .filter-box .filter .center .hexagen:hover button{ color: #fff; }


/* 대표 슬라이드 */
#portfolio2 .slide{ position: relative; }
#portfolio2 .slide .figure-wrap .slick-list{ margin-right: -10px; }
#portfolio2 .slide .figure{ position: relative; overflow: hidden; border-radius: 10px; margin-right: 10px; }
#portfolio2 .slide .figure::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 10; }
#portfolio2 .slide .figure::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, #000); opacity: 0.6; position: absolute; top: 0; left: 0; z-index: 10; }
#portfolio2 .slide .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 325px; }
#portfolio2 .slide .figure figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#portfolio2 .slide .figure .text{ position: absolute; top: calc(50% - 25px); left: 0; right: 0; z-index: 50; transform: translateY(-50%); padding: 0 20px; text-align: center; }
#portfolio2 .slide .figure .text *{ color: #fff; }
#portfolio2 .slide .figure .text p{ max-width: 1000px; font-size: 4rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; margin: 0 auto; } 
#portfolio2 .slide .figure .text .link{ display: inline-block; position: relative; margin-top: 20px; }
#portfolio2 .slide .figure .text .link svg{ width: auto; height: auto; }
#portfolio2 .slide .figure .text .link span{ font-size: 1.5rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#portfolio2 .slide .figure .text .link a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#portfolio2 .slide .btn{ position: absolute; bottom: 20px; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; align-items: center; gap: 0 30px; }
#portfolio2 .slide .btn button{ background: none; border: none; padding: 0; }
#portfolio2 .slide .btn button img{ margin-top: -4px; }
#portfolio2 .slide .btn > button{ padding: 10px; }
#portfolio2 .slide .btn .slick-dots{ display: flex !important; gap: 10px; }
#portfolio2 .slide .btn .slick-dots li button{ width: 10px; height: 10px; border-radius: 990px; background: #fff; opacity: 0.3; transition: all 0.5s; }
#portfolio2 .slide .btn .slick-dots li.slick-active button{ width: 40px; opacity: 1; }


#portfolio2 .thumbnail-list{ display: flex; flex-wrap: wrap; gap: 10px; }
#portfolio2 .thumbnail-list li{ width: calc((100% - 30px) / 4); position: relative; }
#portfolio2 .thumbnail-list li:nth-of-type(4n){ margin-right: 0; }
#portfolio2 .thumbnail-list li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 71.5%; border-radius: 10px; }
#portfolio2 .thumbnail-list li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#portfolio2 .thumbnail-list li p{ font-size: 1.9rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.5; position: absolute; bottom: 17px; left: 0; right: 0; z-index: 5; padding: 0 25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#portfolio2 .thumbnail-list li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

@media screen and (max-width: 1600px){
	#lnb.portfolio ul li a{ font-size: 1.8rem; }

	#portfolio2 .filter-box .filter .ul ul{ gap: 10px 15px; }
	#portfolio2 .filter-box .filter .button .hexagen{ font-size: 2rem; }

	#portfolio2 .slide .figure .text p{ font-size: 3.5rem; }

	#portfolio2 .thumbnail-list li p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1250px){
	#portfolio2{ padding-top: 60px; }
	#portfolio2 .filter-box .filter *{ font-size: 1.6rem; }
	#portfolio2 .filter-box .filter .title{ width: 180px; }
	#portfolio2 .filter-box .filter .ul{ width: calc(100% - 180px); padding: 7px 20px 14px; }
	#portfolio2 .filter-box .filter .ul ul li input + label{ padding: 8px 15px; }

	#portfolio2 .filter-box .filter .button .hexagen{ font-size: 1.8rem; padding: 15px; }
	#portfolio2 .filter-box .filter .form-box{ padding: 20px; }
	#portfolio2 .filter-box .filter .center{ margin-top: 15px; }

	#portfolio2 .slide .figure figure{ padding-bottom: 250px; }
	#portfolio2 .slide .figure .text p{ font-size: 3rem; }
	#portfolio2 .slide .figure .text .link{ margin-top: 10px; }
	#portfolio2 .slide .btn{ gap: 0 20px; }
	
	#portfolio2 .thumbnail-list li p{ font-size: 1.7rem; padding: 0 15px; }
}

@media screen and (max-width: 1200px){
	#portfolio2 .thumbnail-list li{ width: calc((100% - 20px) / 3); }
}

@media screen and (max-width: 900px){
	#portfolio2 .filter-box .filter .hexagen{ --width: 15px; --position: -8px; }
	#portfolio2 .filter-box .filter .line{ flex-direction: column; }
	#portfolio2 .filter-box .filter .line:not(:last-of-type){ margin-bottom: 20px; }
	#portfolio2 .filter-box .filter .title{ width: 100%; }
	#portfolio2 .filter-box .filter .title p{ padding: 10px; }
	#portfolio2 .filter-box .filter .ul{ width: 100%; padding: 10px 15px; }
	#portfolio2 .filter-box .filter .ul ul{ gap: 10px; }

	#portfolio2 .filter-box .filter .button .hexagen{ font-size: 1.7rem; }

	#portfolio2 .slide .figure .text p{ font-size: 2.5rem; }

	#portfolio2 .thumbnail-list li{ width: calc((100% - 10px) / 2); }
}

@media screen and (max-width: 700px){
	#lnb.portfolio ul{ gap: 10px 0; overflow: hidden; }
	#lnb.portfolio ul li{ max-width: 100%; width: calc(100% / 3); position: relative; }
	#lnb.portfolio ul li::after{ content: ""; width: 100vw; height: 1px; background: #D9D9D9; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); }
	#lnb.portfolio ul li:nth-of-type(1)::after, #lnb.portfolio ul li:nth-of-type(2)::after, #lnb.portfolio ul li:nth-of-type(3)::after{ display: none; }
}


/* 포트폴리오 - 상세 페이지 */
#view2 .page-title{ margin-bottom: 55px; }
#view2 #lnb{ padding-bottom: 20px; }
#view2 .total .hexagen{ --width: 22px; --position: -11px; --border: var(--mainColor); }

#view2 .title-box{ padding: 30px 40px; background: var(--mainColor); color: #fff; border-radius: 5px; }
#view2 .title-box .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; }
/* h1 추가 -재호 */
#view2 .title-box h5, h1{ /* width: calc(100% - 120px); */ width: 100% !important; font-size: 2.2rem; font-weight: 500; }
#view2 .title-box span{ display: inline-block; font-size: 1.7rem; font-weight: 400; padding: 3px 0; }

#view2 .content-box{ border: 1px solid #DDD; border-radius: 5px; padding: 40px; }

#view2 .table *{ font-size: 1.6rem; }
#view2 .table table{ border-radius: 5px; overflow: hidden; }
#view2 .table table tr{ border-bottom: 1px solid #fff; }
#view2 .table table th{ width: 375px; font-weight: 500; letter-spacing: -0.02em; padding: 0 40px; text-align: left; }
#view2 .table .td{ border: 1px solid #DDD; border-left: none; overflow: hidden; }
#view2 .table table tr:first-of-type .td{ border-radius: 0 5px 0 0; }
#view2 .table table tr:last-of-type .td{ border-radius: 0 0 5px 0; }
#view2 .table table tr:not(:first-of-type) .td{ border-top: none; }
#view2 .table table tr:only-of-type .td{ border-radius: 0 5px 5px 0; border-top: 1px solid #DDD; }
#view2 .table .td > *{ width: 100%; padding: 25px 20px; }

#view2 .file-box{ margin-top: 30px; }
#view2 .file-box .flex-box{ display: flex; justify-content: space-between; }
#view2 .file-box table th{ color: #fff; background: var(--mainColor); }
#view2 .file-box input{ border: none; outline: none; }
#view2 .file-box .td{ width: 100%; }
#view2 .file-box .td a{ display: inline-block; } 
#view2 .file-box .file{ width: 225px; background: var(--mainColor); color: #fff; }
#view2 .file-box table tr:first-of-type .file{ border-radius: 5px 5px 0 0; }
#view2 .file-box table tr:last-of-type .file{ border-radius: 0 0 5px 5px; }
#view2 .file-box table tr:only-of-type .file{ border-radius: 5px; }
#view2 .file-box .file input{ display: none; }
#view2 .file-box .file label{ display: inline-block; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; cursor: pointer; }

#view2 .file-box ul{ display: flex; justify-content: center; margin-top: 40px; }
#view2 .file-box ul li:not(:last-of-type){ margin-right: 20px; }
#view2 .file-box ul li a{ display: inline-block; font-size: 1.7rem; font-weight: 700; background: var(--mainColor); color: #fff; letter-spacing: -0.02em; line-height: 1.3; padding: 17px 80px; }
#view2 .file-box ul li .border a{ background: none; font-weight: 400; color: #222; padding: 17px 40px; border: 1px solid var(--border); }

#view2 .link-box{ margin-top: 100px; position: relative; }
#view2 .link-box .border{ position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); }
#view2 .link-box .border a{ display: inline-block; font-size: 1.7rem; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.3; background: #fff; font-weight: 400; color: var(--mainColor); padding: 17px 40px; border: 1px solid var(--border); transition: all 0.5s; }
#view2 .link-box ul{ display: flex; justify-content: space-between; }
#view2 .link-box ul li{ width: calc((100% - 305px) / 2); position: relative; }
#view2 .link-box ul li:first-of-type{ text-align: right; padding-left: 50px; }
#view2 .link-box ul li:last-of-type{ padding-right: 50px; }
#view2 .link-box ul li::before{ position: absolute; top: 50%; transform: translateY(-50%); font-family: "xeicon"; font-size: 3.6rem; font-weight: normal; color: #AAA; font-style: normal; transition: color 0.5s; }
#view2 .link-box ul li:first-of-type::before{ content: "\e93c"; left: 0; }
#view2 .link-box ul li:last-of-type::before{ content: "\e93f"; right: 0; }
#view2 .link-box ul li span{ font-family: var(--Montserrat); font-size: 2.2rem; font-weight: 700; color: #AAA; transition: color 0.5s; }
#view2 .link-box ul li p{ font-size: 1.7rem; font-weight: 400; color: #666; margin-top: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#view2 .link-box ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#view2 .border-title{ border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; padding: 20px 0; margin-bottom: 30px; }
#view2 .border-title h4{ font-size: 2.8rem; font-weight: 700; color: #222; letter-spacing: -0.02em; text-align: center; }

#view2 .recommend-wrap .slick-track{ margin: 0; }
#view2 .recommend-wrap .slick-list{ margin-right: -10px; }
#view2 .recommend-wrap .recommend{ margin-right: 10px; }
#view2 .recommend{ position: relative; }
#view2 .recommend figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 71.5%; border-radius: 10px; }
#view2 .recommend figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#view2 .recommend p{ font-size: 1.9rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; position: absolute; bottom: 15px; left: 0; right: 0; z-index: 10; padding: 0 25px; }
#view2 .recommend a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (hover: hover){
	#view2 .link-box .border:hover a{ background: var(--mainColor); color: #fff; }
	#view2 .link-box ul li:hover::before{ color: var(--mainColor); }
	#view2 .link-box ul li:hover span{ color: var(--mainColor); }
}

@media screen and (max-width: 1500px){
	#view2 .table table th{ width: 250px; }

	#view2 .link-box ul li span{ font-size: 2rem; }

	#view2 .border-title h4{ font-size: 2.4rem; }
	#view2 .recommend p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1250px){
	#view2 section:not(:last-of-type){ margin-bottom: 50px !important; }
	#view2 .page-title{ margin-bottom: 30px; }
	#view2 .title-box{ padding: 20px 40px; }
	/* h1추가 재호 */
	#view2 .title-box h5, h1{ font-size: 2rem; }

	#view2 .content-box{ padding: 30px 40px; }

	#view2 .table .td > *{ padding: 20px 15px; }

	#view2 .file-box{ margin-top: 15px; }
	/* #view2 .file-box .td{ width: calc(100% - 190px); } */
	#view2 .file-box .file{ width: 180px; }
	#view2 .file-box .file label{ font-size: 1.6rem; }

	#view2 .file-box ul{ margin-top: 20px; }
	#view2 .file-box ul li a{ padding: 15px 50px; }
	#view2 .file-box ul li a{ font-size: 1.6rem; }

	#view2 .link-box{ margin-top: 50px; }
	#view2 .link-box .border a{ padding: 15px 30px; }
	#view2 .link-box ul{ position: relative; }
	#view2 .link-box ul::after{ content: ""; width: 1px; height: 20px; background: #DDD; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	#view2 .link-box ul li{ width: calc((100% - 200px) / 2); }
	#view2 .link-box ul li span{ font-size: 1.8rem; }
	#view2 .link-box ul li p{ font-size: 1.6rem; margin-top: 5px; }

	#view2 .border-title{ padding: 15px 0; }
	#view2 .border-title h4{ font-size: 2.2rem; }
	#view2 .recommend p{ font-size: 1.7rem; padding: 0 15px; }
}

@media screen and (max-width: 1000px){
	#view2 .title-box{ padding: 20px 25px; }
	/* h1추가 재호 */
	#view2 .title-box h5, h1{ font-size: 1.9rem; }
	#view2 .title-box span{ font-size: 1.6rem; }

	#view2 .content-box{ padding: 25px; }

	#view2 .table table th{ width: 150px; padding: 0 25px; font-size: 1.5rem; }
	#view2 .table .td > *{ padding: 15px; font-size: 1.5rem; }

	/* #view2 .file-box .td{ width: calc(100% - 130px); } */
	#view2 .file-box ul{ padding-left: 100px; }
	#view2 .file-box .file{ width: 120px; }
	#view2 .file-box .file label{ font-size: 1.5rem; }

	#view2 .link-box .border{ top: -50px; left: calc(50% - 85px); transform: translate(-50%, -100%); }
	#view2 .link-box ul li{ width: calc((100% - 50px) / 2); }
}

@media screen and (max-width: 900px){
	#view2 .border-title h4{ font-size: 2rem; }
}

@media screen and (max-width: 800px){
	#view2 .total .hexagen{ --width: 17px; --position: -8px; }
	#view2 .title-box{ padding: 12px 20px; }

	#view2 .content-box{ padding: 20px; }

	#view2 .table table th{ width: 105px; padding: 0 20px; }

	/* #view2 .file-box .td{ width: calc(100% - 110px); } */
	#view2 .file-box .file{ width: 100px; }
	#view2 .file-box ul{ margin-top: 15px; padding-left: 120px; }
	#view2 .file-box ul li a{ padding: 13px 30px; }

	#view2 .link-box .border{ left: calc(50% - 55px); }
	#view2 .link-box .border a{ padding: 11px 30px; }
}