@charset "utf-8";

/****** 공통 ******/

/* 탭 */
.tab-wrapper {overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; text-align:center;}
.tab-wrapper::-webkit-scrollbar {display:none;}
.tab-scroll {display:inline-flex; cursor:grab; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.tab-scroll, .tab-item, .tab-item > a {user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-user-drag:none;}
.tab-wrapper:active .tab-scroll {cursor:grabbing;}
.tab-wrapper.typeA .tab-scroll {border:1px solid #DDE1EB!important; border-radius:10px; overflow:hidden;}
.tab-wrapper.typeA .tab-item > a {display:block; color:#000; padding:20px 40px; font-size:20px; white-space:nowrap; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; line-height:1.1; transition:none;}
.tab-wrapper.typeA .tab-item+.tab-item>a {border-left:1px solid #DDE1EB; background:#fff;}
.tab-wrapper.typeA .tab-item.active a {background:var(--blue); color:#fff;}

.subpart .titWrap h1 {font-size:clamp(30px, 4vw, 70px); text-align:center; color:#000; margin-bottom:50px;}
.subpart.production .titWrap > p {margin-top:30px; color:var(--base2); opacity:0.5; text-align:center;}

.portfolio .subpart {padding:120px 0; background:var(--bg1); border-bottom:1px solid var(--border);}

/* 버튼 */
.btnWrap.txt_center {text-align:center;}
.btnWrap .plus_btn {background:var(--base2); color:#fff; font-weight:600; padding:25px 100px; border-radius:3rem; font-size:clamp(20px,1.7vw,24px);}
.btnWrap .plus_btn:hover {color:#ffeb3b;}

/****** 제작실적 ******/
.subpart .port_wrap {margin-top:70px;}
.port_wrap .port_list {display:grid; grid-template-columns:repeat(3, 1fr); gap:70px;}
.port_wrap .port_list li {text-align:center;}
.port_wrap .port_list li .img_bx {position:relative; overflow:hidden; border-radius:clamp(10px, 1.2vw, 20px); transition:all 0.3s; box-shadow:rgba(0, 0, 0, 0.1) 20px 20px 20px; aspect-ratio:1/1;  background:#fff;}
.port_wrap .port_list li .img_bx:hover {box-shadow:rgba(0, 0, 0, 0.3) 30px 30px 20px;}
.port_wrap .port_list li img {width:100%; height:auto;}
.port_wrap .port_list li .img_bx .btn {position:absolute; display:flex; top:50%; left:50%; transform:translate(-50%,-50%); gap:10px;}
.port_wrap .port_list li .img_bx .btn a {display:block; width:100px; height:100px; border-radius:50%; background:#fff; text-indent:-9999px; opacity:0; transition:all 0.2s;}
.port_wrap .port_list li .img_bx .btn a.view:hover {background:var(--blue) url(/images/portfolio/i-eyeW.png) no-repeat center / 36px;}
.port_wrap .port_list li .img_bx .btn a.conne:hover {background:var(--blue) url(/images/portfolio/i-homeW.png) no-repeat center / 36px;}
.port_wrap .port_list li:hover .img_bx .btn a {opacity:1;}
.port_wrap .port_list li .img_bx .btn a.view {background:#fff url(/images/portfolio/i-eye.png) no-repeat center / 36px;}
.port_wrap .port_list li .img_bx .btn a.conne {background:#fff url(/images/portfolio/i-home.png) no-repeat center / 36px;}
.port_wrap .port_list li .txt {margin-top:20px;}
.port_wrap .port_list li .txt p {font-weight:600; font-size:clamp(16px,1.5vw,20px); color:#000; transition:all 0.3s;  line-height:1.2; letter-spacing:-.5px;}
.port_wrap .port_list li:hover .txt p {color:var(--blue);}
.port_wrap .port_list li .txt dl {font-size:14px; color:var(--base2); margin-top:10px; opacity:.7;word-break: break-all;}
.portfolio .btnWrap {margin-top:50px;}

/* 카테고리 */
.category {display:flex; justify-content:center; margin-top:20px !important;}
.category li:first-child a {border-radius:10px 0 0 10px;}
.category li:last-child a {border-radius:0 10px 10px 0;}
.category li+li {margin-left:-1px;}
.category a {display:block; color:#000; padding:20px 40px; font-size:clamp(16px, 1vw, 20px); font-weight:500; line-height:1; background:#fff; border:1px solid #DDE1EB;}
.category a:hover {background:var(--base3); color:#fff; border-color:var(--base3);}
.category .active {background:var(--blue); color:#fff; border-color:var(--blue);}

/****** 제작실적 뷰페이지 ******/
.port_view .inner {display:flex; gap:100px; position:relative;}
.port_view .port_img {border-radius:clamp(10px, 1.2vw, 20px); overflow:hidden; box-shadow:rgba(53, 81, 196, 0.15) 30px 30px 30px;}
.port_view .port_img img {width:100%; max-width:970px;}
.port_view .left {width:60%; max-width:970px;}
.port_view .right {width:40%; }
.port_view .right .txt_bx {position:sticky; top:50px;}
.port_view .right dl {color:var(--base2); line-height:1; position:relative;}
.port_view .right dl dd {margin-top:10px;}
.port_view .right h1 {font-size:40px; color:#000; margin-top:30px; padding-bottom:50px; position:relative;}
.port_view .right h1:before {content:""; display:block; width:50px; height:2px; background:#000; position:absolute; left:0; bottom:0;}
.port_view .right h1+p {color:var(--base2); line-height:1.8; margin-top:50px; 
display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.port_view .right .btnWrap {flex-direction:column; justify-content:flex-start; align-items:flex-start;}
.port_view .right .btnWrap a {padding:20px 40px; font-size:17px; font-weight:700; border-radius:3rem;}
.port_view .right .btnWrap a:hover {padding:20px 50px;}
.port_view .right .btnWrap a+a {margin-top:0;}
.port_view .right .btnWrap a:after {display:none;}
.port_view .btnWrap2 {position:absolute; right:0; bottom:10px; width:200px;}
.port_view a.prev_page {position:relative; font-size:32px; padding-bottom:10px; padding-right:60px; font-weight:700; color:#000; }
.port_view a.prev_page:before, a.prev_page:after {content:""; display:block; position:absolute; transition:all 0.3s;}
.port_view a.prev_page:before {width:178px; height:2px; background:#000; bottom:-7px; left:0;}
.port_view a.prev_page:after {width:25px; height:2px; background:#000; transform:rotate(45deg); right:-5px; bottom:2px;}
.port_view a.prev_page:hover {color:var(--blue);}
.port_view a.prev_page:hover:before {width:200px; background:var(--blue);}
.port_view a.prev_page:hover:after {right:-27px; background:var(--blue);}


/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
	/****** 공통 ******/
	.subpart .titWrap h2 {font-size:50px; margin-bottom:40px;}	
	.tab-wrapper.typeA .tab-item > a {font-size:18px; padding:15px 35px;}

	/****** 제작실적 ******/
	.portfolio .subpart {padding:100px 0;}
	/* 카테고리 */
	.category a {padding:1.7vw 2vw;}

	/****** 제작실적 뷰페이지 ******/
	.port_view .inner {gap:80px;}
	.port_view .right h1 {font-size:30px; margin-top:25px; padding-bottom:40px;}
	.port_view .right h1+p {margin-top:40px;}
	.port_view .port_img {box-shadow:rgba(0, 0, 0, 0.2) 15px 25px 25px 15px;}
	.port_view .right .btnWrap {margin-top:60px;}
	.port_view a.prev_page {font-size:24px;}
	.port_view a.prev_page:before {width:150px;}
	.port_view a.prev_page:hover:before {width:172px; background:var(--blue);}
	.port_view .left {width:calc(60% - 80px);}
	.port_view .right {width:40%;}
}


/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
	/****** 공통 ******/
	.btnWrap .plus_btn {background:var(--base2); color:#fff; padding:15px 70px; border-radius:3rem; font-size:20px;}
	.port_wrap .port_list {gap:50px;}
	.subpart .port_wrap {margin-top:50px;}
	.tab-wrapper.typeA .tab-item > a {font-size:16px;}	

	.subpart .titWrap h2 {font-size:30px;}

	/****** 제작실적 ******/
	.port_wrap .port_list {grid-template-columns:repeat(2, 1fr);}
	.portfolio .subpart {padding:80px 0;}  
	.portfolio .btnWrap {margin-top:50px;}
	
	/* 카테고리 */
	.category {display:grid; grid-template-columns:repeat(2,1fr); gap:5px;}
	.category a {padding:4vw 1vw; border-radius:10px !important; text-align:center;}
	.category li:first-child {grid-column:span 2;}

	/****** 제작실적 뷰페이지 ******/
	.port_view .right h1 {font-size:26px; padding-bottom:30px;}
	.port_view .right h1+p {margin-top:30px;}
	.port_view .inner {flex-direction:column; gap:50px;}
	.port_view .left {width:100%;}
	.port_view .right {width:100%;}
	.port_view .right .btnWrap {margin-top:40px;}
	.port_view a.prev_page {font-size:20px;}
	.port_view a.prev_page:before {width:136px;}
	.port_view a.prev_page:hover:before {width:158px; background:var(--blue);}
	.port_view .right .btnWrap > a {padding:16px 30px; font-size:16px;}
}


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) {
	/****** 공통 ******/
	.tab-wrapper.typeA .tab-item > a {padding:13px 25px; font-size:15px;}
	.btnWrap .plus_btn {padding:12px 60px; font-size:18px;}
	.subpart .titWrap h2 {margin-bottom:30px; font-size:24px;}	  

	/****** 제작실적 ******/
	.portfolio .btnWrap {margin-top:40px;}
	.portfolio .subpart {padding:60px 0;}
	.port_wrap .port_list {grid-template-columns:repeat(1, 1fr); gap:40px;}
	.subpart.production .titWrap > p {margin-top:25px;}

	.port_wrap .port_list li .img_bx {aspect-ratio:initial;}
	.port_view .port_img {box-shadow:rgba(0, 0, 0, 0.2) 10px 20px 20px 10px;}
	.port_wrap .port_list li .img_bx .btn a {width:80px; height:80px; opacity:1;}
	.port_wrap .port_list li .img_bx .btn a.view {background:#fff url(/images/portfolio/i-eye.png) no-repeat center / 25px;}
	.port_wrap .port_list li .img_bx .btn a.view:hover {background:var(--blue) url(/images/portfolio/i-eyeW.png) no-repeat center / 25px;}
	.port_wrap .port_list li .img_bx .btn a.conne {background:#fff url(/images/portfolio/i-home.png) no-repeat center / 25px;}
	.port_wrap .port_list li .img_bx .btn a.conne:hover {background:var(--blue) url(/images/portfolio/i-homeW.png) no-repeat center / 25px;}

	/****** 제작실적 뷰페이지 ******/
	.port_view a.prev_page {padding-bottom:6px;}
	.port_view .btnWrap2 {width:170px; left:30px;}
	.port_view .right {padding-bottom:70px;}
	.port_view .right h1+p {-webkit-line-clamp: initial;}
	.port_view .right .btnWrap {flex-direction:row;}
	
}