/* 게시판 상단 */
.board_top {
 display:flex;
 justify-content:space-between;
 margin-bottom:64px;
}
.board_top .tabs {
 display:flex;
 gap:8px;
}
.board_top .tabs a {
 display:block;
 font-size:17px;
 color:#464c53;
 font-weight:500;
 line-height:56px;
 padding:0 24px;
 border-radius:28px;
 letter-spacing:-0.51px;
}
.board_top .tabs .on a {
 color:#fff;
 background:#000;
}
.board_top .search_area .flex {
 position:relative;
 width:420px;
 max-width:100%;
 height:56px;
 background:#fff;
 border-radius:28px;
 overflow:hidden;
 border:#040404 1px solid;
}
.board_top .search_area .text {
 width:100%;
 height:100%;
 padding:0 56px 0 24px;
 border:none;
 border-radius:28px;
 letter-spacing:-0.51px;
}
.board_top .search_area .text::placeholder {
 color:#8a949e;
}
.board_top .search_area .btn {
 position:absolute;
 top:0;
 right:0;
 width:56px;
 height:100%;
 background:url("/images/btn_search.svg") no-repeat 50% 50%;
 font-size:0;
}
/* 게시판 하단 */
.board-pagination {
 margin-top:80px;
}
.board-pagination .pagination {
 display:flex;
 justify-content:center;
 gap:8px;
}
.board-pagination .pagination .page-link {
 display:block;
 width:40px;
 line-height:40px;
 aspect-ratio:1/1;
 color:#58616a;
 font-weight:500;
 text-align:center;
 border-radius:50%;
 letter-spacing:-0.34px;
}
.board-pagination .pagination .page-link .arrow {
 display:block;
 width:inherit;
 aspect-ratio:1/1;
 background-repeat:no-repeat;
 background-position:50% 50%;
}
.board-pagination .pagination .page-link .one {
 background-image:url("/images/arrow_one.svg");
}
.board-pagination .pagination .page-link .two {
 background-image:url("/images/arrow_two.svg");
}
.board-pagination .pagination .page-link .next,
.board-pagination .pagination .page-link .last {
 transform:scaleX(-1);
}
.board-pagination .pagination .active .page-link {
 color:#fff;
 background:#000;
}
.board-pagination .pagination .arw_item .page-link {
 background:none !important;
}
.justify-between {
 justify-content:space-between;
}
.items-center {
 align-items:center;
}
/* 포트폴리오 블로그 문의하기 상단 */
.svisual {
 height:290px;
 margin-bottom:80px;
}
.svisual .bg_box {
 height:100%;
 border-radius:20px;
 background:no-repeat 50% 50% / cover;
}
.svisual .canvas_bg {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 object-fit:cover;
}
.svisual.g03 .bg_box {
 background-image:url("/images/svisual03.avif");
}
.svisual.g04 .bg_box {
 background-image:url("/images/svisual04.avif");
}
.svisual.g05 .bg_box {
 background-image:url("/images/svisual05.avif");
}
.svisual .inner {
 position:relative;
 height:inherit;
 display:flex;
 flex-direction:column;
 justify-content:center;
 z-index:1;
 padding:0 60px;
 max-width:1600px;
}
.svisual .location {
 display:flex;
 gap:22px;
 font-size:14px;
 color:#fff;
 line-height:24px;
 margin-bottom:32px;
}
.svisual .location a {
 color:#fff9;
}
.svisual .location span {
 position:relative;
 text-transform:uppercase;
}
.svisual .location span:before {
 content:"";
 position:absolute;
 top:0;
 left:-22px;
 width:22px;
 height:100%;
 background:url("/images/arrow_aside.svg") no-repeat 50% 50%;
}
.svisual .title {
 font-size:54px;
 color:#fff;
 font-weight:600;
 line-height:1.15;
 letter-spacing:-1.62px;
}
.svisual .h2 {
 font-size:20px;
 color:#fff;
 font-weight:400;
 line-height:1.6;
 letter-spacing:-0.6px;
 margin-top:12px;
 opacity:0.9;
 text-shadow:#0006 0 0 10px;
}
/* 포트폴리오 블로그 하단 */
.view_btm {
 display:flex;
 justify-content:space-between;
 margin-top:60px;
 padding-top:80px;
 border-top:#8a949e33 1px solid;
}
.view_btm .btn {
 display:flex;
 justify-content:center;
 align-items:center;
 height:44px;
 line-height:44px;
 font-size:16px;
 border-radius:22px;
}
.view_btm .btn:before {
 content:"";
 display:block;
 width:24px;
 aspect-ratio:1/1;
 background-repeat:no-repeat;
 background-position:50% 50%;
 background-size:contain;
 transform:translateZ(0);
 -webkit-transform:translateZ(0);
 will-change:transform;
}
.view_btm .btn_list {
 gap:8px;
 width:140px;
 color:#fff;
 font-weight:600;
 background:#000;
}
.view_btm .btn_list:before {
 background-image:url("/images/arrow_list.svg");
}
.view_btm .right {
 display:flex;
 gap:12px;
}
.view_btm .right .btn {
 gap:6px;
 width:130px;
 color:#58616a;
 font-weight:500;
 background:#e6e8ea;
}
.view_btm .right .btn_link_copy,
.view_btm .right .btn_share {
 font-size:0;
 gap:0;
 width:44px;
}
.view_btm .btn_link_copy:before {
 background-image:url("/images/icon_link_copy.svg");
}
.view_btm .btn_share:before {
 background-image:url("/images/icon_share.svg");
}
/* .view_btm .btn_link_copy.slim,
.view_btm .btn_share.slim {font-size:0; gap:0; width:44px;} */
.view_btm .like input {
 position:absolute;
 top:0;
 left:0;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border:0;
}
.view_btm .like span {
 display:flex;
 align-items:center;
 border:#cdd1d5 1px solid;
 height:44px;
 padding:0 20px;
 border-radius:22px;
 transition:0.2s linear;
}
.view_btm .like i {
 position:relative;
 width:24px;
 aspect-ratio:1/1;
}
.view_btm .like i:before,
.view_btm .like i:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-repeat:no-repeat;
 background-position:50% 50%;
 background-size:contain;
 transition:0.2s linear;
 transform:translateZ(0);
 -webkit-transform:translateZ(0);
 will-change:transform;
}
.view_btm .like i:before {
 background-image:url("/images/icon_heart.svg");
 opacity:1;
}
.view_btm .like i:after {
 background-image:url("/images/icon_heart_checked.svg");
 opacity:0;
}
.view_btm .like p {
 font-size:16px;
 color:#1e2124;
 font-weight:500;
 line-height:1.65;
 line-height:1;
 padding-left:6px;
}
.view_btm .like strong {
 font-weight:500;
 padding-left:4px;
}
.view_btm .like:hover span {
 background:#f5f5f5;
}
.view_btm .like.checked span i:before {
 opacity:0;
}
.view_btm .like.checked span i:after {
 opacity:1;
}

/* ------------------------------ PC Guide ------------------------------ */
@media screen and (max-width:1520px){
/* 게시판 상단 */
	.board_top {margin-bottom:60px; flex-direction:column; gap:20px;}
	.board_top .tabs {justify-content:center;}
	.board_top .tabs a {font-size:16px;}
	.board_top .search_area {display:flex; justify-content:center;}
/* 게시판 하단 */
	.board-pagination {margin-top:60px;}
}

/* ------------------------------ PC Guide ------------------------------ */
@media screen and (max-width:1280px){
/* 포트폴리오 블로그 문의하기 상단 */
	.svisual {height:220px; margin-bottom:60px;}
	.svisual .bg_box {border-radius:16px;}
	.svisual .location {gap:18px; font-size:13px; line-height:20px; margin-bottom:24px;}
	.svisual .location span:before {left:-18px; width:18px;}
	.svisual .title {font-size:44px;}
	.svisual .h2 {font-size:18px; margin-top:10px;}
/* 포트폴리오 블로그 하단 */
	.view_btm {margin-top:50px; padding-top:60px;}
	.view_btm .btn {height:40px; line-height:40px; font-size:15px;}
	.view_btm .btn:before {width:20px;}
	.view_btm .btn_list {gap:6px; width:120px;}
	.view_btm .right {gap:10px;}
	.view_btm .right .btn {gap:4px; width:120px;}
	.view_btm .btn_link_copy.slim,
	.view_btm .btn_share.slim {width:40px;}
	.view_btm .like span {height:40px; padding:0 16px;}
	.view_btm .like i {width:20px;}
	.view_btm .like p {font-size:15px; padding-left:4px;}
	.view_btm .like strong {padding-left:2px;}
/* 게시판 상단 */
	.board_top {margin-bottom:40px; gap:20px;}
	.board_top .tabs {gap:4px;}
	.board_top .tabs a {font-size:15px; line-height:50px; padding:0 24px;}
	.board_top .search_area .flex {height:50px;}
	.board_top .search_area .text {padding:0 50px 0 20px;}
	.board_top .search_area .btn {width:50px;}
/* 게시판 하단 */
	.board-pagination {margin-top:40px;}
	.board-pagination .pagination {gap:6px;}
	.board-pagination .pagination .page-link {width:36px; line-height:36px;}
}

/* ------------------------------ Tablet PC ------------------------------ */
@media screen and (max-width:1023px){
/* 포트폴리오 블로그 문의하기 상단 */
	.svisual {height:180px; margin-bottom:40px;}
	.svisual .inner {padding:0 40px;}
	.svisual .bg_box {border-radius:12px;}
	.svisual .location {gap:16px; font-size:12px; margin-bottom:20px;}
	.svisual .location span:before {left:-16px; width:16px;}
	.svisual .title {font-size:36px;}
	.svisual .h2 {font-size:16px; margin-top:8px;}
/* 포트폴리오 블로그 하단 */
	.view_btm {margin-top:40px; padding-top:40px;}
	.view_btm .btn {height:36px; line-height:36px; font-size:14px;}
	.view_btm .btn:before {width:18px;}
	.view_btm .btn_list {gap:4px; /* width:120px; */}
	.view_btm .btn_link_copy.slim,
	.view_btm .btn_share.slim {width:36px;}
	.view_btm .like span {height:36px; padding:0 14px;}
	.view_btm .like i {width:18px;}
	.view_btm .like p {font-size:14px;}
/* 게시판 상단 */
	.board_top {margin-bottom:30px; gap:16px;}
	.board_top .tabs {gap:2px;}
	.board_top .tabs a {font-size:14px; line-height:45px; padding:0 20px;}
	.board_top .search_area .flex {height:46px;}
	.board_top .search_area .text {padding:0 46px 0 16px;}
	.board_top .search_area .btn {width:46px;}
/* 게시판 하단 */
	.board-pagination {margin-top:30px;}
	.board-pagination .pagination {gap:4px;}
	.board-pagination .pagination .page-link {width:32px; line-height:32px;}
}

/* ------------------------------ Mobile ------------------------------ */
@media screen and (max-width:767px){
/* 포트폴리오 블로그 문의하기 상단 */
	.svisual {height:140px; margin-bottom:20px;}
	.svisual.g03 .bg_box {background-image:url('/images/svisual03_m.avif');}
	.svisual.g04 .bg_box {background-image:url('/images/svisual04_m.avif');}
	.svisual.g05 .bg_box {background-image:url('/images/svisual05_m.avif');}
	.svisual .inner {padding:0 20px;}
	.svisual .bg_box {border-radius:10px;}
	.svisual .location {gap:12px; font-size:11px; margin-bottom:15px;}
	.svisual .location span:before {left:-12px; width:12px; background-size:8px;}
	.svisual .title {font-size:28px;}
	.svisual .h2 {font-size:13px; margin-top:4px;}
/* 포트폴리오 블로그 하단 */
	.view_btm {margin-top:30px; padding-top:30px;}
	.view_btm .btn {height:30px; line-height:30px; font-size:13px;}
	.view_btm .btn:before {width:14px;}
	.view_btm .btn_list {gap:2px; width:90px;}
	.view_btm .right {gap:6px;}
	.view_btm .right .btn {gap:2px; width:90px;}
	.view_btm .btn_link_copy.slim,
	.view_btm .btn_share.slim {width:30px;}
	.view_btm .like span {height:30px; padding:0 10px;}
	.view_btm .like i {width:14px;}
	.view_btm .like p {font-size:13px;}
/* 게시판 상단 */
	.board_top {margin-bottom:20px; gap:10px;}
	.board_top .tabs {gap:2px; justify-content:flex-start; overflow:auto;}
	.board_top .tabs a {flex:1 1 auto; font-size:13px; line-height:40px; padding:0 16px; white-space:nowrap;}
	.board_top .search_area form {display:block; width:100%;}
	.board_top .search_area .flex {height:40px; width:100%;}
	.board_top .search_area .text {padding:0 40px 0 12px;}
	.board_top .search_area .btn {width:40px; background-size:30px;}
/* 게시판 하단 */
	.board-pagination {margin-top:20px;}
	.board-pagination .pagination {gap:2px;}
	.board-pagination .pagination .page-link {width:28px; line-height:28px;}
}