@charset "utf-8";

.main_projects { overflow: clip; }
.main_projects .gallery { align-items: flex-start; gap: 44px 2.5%; }
.main_projects .gallery li { flex: 0 0 31.666%; }
.main_projects .gallery a { border-radius: 10px; }
.main_projects .gallery img { aspect-ratio: 4 / 5; transition: scale .65s cubic-bezier(.22, 1, .36, 1); }
.main_projects .gallery li:nth-child(3n + 2) img { aspect-ratio: 4 / 3; }
.main_projects .gallery li:nth-child(3n) img { aspect-ratio: 1 / 1; }
.main_projects .gallery a:hover img { scale: 1.035; }
.main_projects .caption { opacity: 1; padding: 30px 24px; background: linear-gradient(0deg, rgba(20, 13, 43, .88), rgba(20, 13, 43, 0) 70%); }
.main_projects .gallery.is_masonry, .portfolio_gallery .gallery_list.is_masonry { position: relative; display: flex; }
.main_projects .gallery.is_masonry > li, .portfolio_gallery .gallery_list.is_masonry > li { position: absolute; width: 31.666%; margin: 0; translate: 0 var(--column-shift, 0px); }
.portfolio_gallery .title_area { text-align: left; }
.portfolio_gallery .filter_list { justify-content: flex-start; }
.portfolio_gallery .gallery_list { align-items: flex-start; }
.portfolio_gallery .pic { border-radius: 10px; }
.portfolio_gallery .banner.raum_square { aspect-ratio: 1 / 1; }
.portfolio_gallery .banner.hoban { aspect-ratio: 9 / 16; }
.portfolio_gallery .banner.godeok_wine { aspect-ratio: 4 / 5; }
.portfolio_gallery .banner.godeok_navy, .portfolio_gallery .banner.daebul_square { aspect-ratio: 1 / 1; }
.portfolio_gallery .shorts img { transition: scale .65s cubic-bezier(.22, 1, .36, 1); }
.portfolio_gallery .shorts:hover img, .portfolio_gallery .shorts:focus-visible img { scale: 1.07; }
.portfolio_gallery .gallery_list.is_masonry > .report { flex-direction: column; }
.portfolio_gallery .gallery_list.is_masonry .report_photo { width: 100%; flex-basis: auto; aspect-ratio: 16 / 9; }
.portfolio_gallery .gallery_list.is_masonry .report_numbers { flex-wrap: wrap; }
.portfolio_gallery .gallery_list.is_masonry .report_numbers > div { flex: 0 0 45%; }
.portfolio_gallery .gallery_list.is_masonry .report_numbers dd { font-size: 36px; }
.projects_gallery .title_area { text-align: left; padding-right: 180px; }
.projects_gallery .view_switch { position: absolute; top: 8px; right: var(--padding); display: flex; gap: 4px; padding: 5px; border: 1px solid #dcd3ed; border-radius: 2em; }
.projects_gallery .view_switch button { padding: 9px 16px; border-radius: 2em; color: #786e86; font-size: 15px; transition: background-color .25s, color .25s; }
.projects_gallery .view_switch button[aria-pressed="true"] { background: #6d3bff; color: #fff; }
.projects_gallery .filter_list { justify-content: flex-start; }
.projects_gallery.is_list .gallery_list { display: flex; flex-direction: column; gap: 0; counter-reset: project; }
.projects_gallery.is_list .card { flex-basis: auto; width: 100%; overflow: visible; border-top: 1px solid #dcd3ed; border-radius: 0; background: transparent; box-shadow: none; counter-increment: project; }
.projects_gallery.is_list .card:last-child { border-bottom: 1px solid #dcd3ed; }
.projects_gallery.is_list .card a { position: relative; display: flex; flex-direction: row; align-items: center; gap: 24px; padding: 36px 20px; transition: background-color .3s, padding .3s; }
.projects_gallery.is_list .card a::before { content: counter(project, decimal-leading-zero); flex: 0 0 4%; color: #786e86; font-family: var(--font2); font-size: 16px; }
.projects_gallery.is_list .card a:hover, .projects_gallery.is_list .card a:focus-visible { padding-left: 32px; background: #ebe4fa; }
.projects_gallery.is_list .card img { display: none; }
.projects_gallery.is_list .badge { order: 2; margin: 0 0 0 auto; background: transparent; white-space: nowrap; }
.projects_gallery.is_list h3 { margin: 0; font-size: 30px; }
.projects_gallery.is_list .link { order: 3; margin: 0; white-space: nowrap; }
.projects_gallery .hover_preview { position: fixed; z-index: 90; top: 0; left: 0; width: 22%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.projects_gallery .hover_preview.is_visible { opacity: 1; visibility: visible; }

@media (max-width: 1100px) {
.projects_gallery.is_list h3 { font-size: 24px; }
.projects_gallery.is_list .card a { gap: 16px; padding-right: 12px; padding-left: 12px; }
.projects_gallery.is_list .link { font-size: 14px; }
}
@media (max-width: 768px) {
.main_projects .gallery { gap: 24px 4%; }
.main_projects .gallery li { flex-basis: 48%; }
.main_projects .gallery.is_masonry > li, .portfolio_gallery .gallery_list.is_masonry > li { width: 48%; translate: none; }
.main_projects .gallery img { aspect-ratio: 4 / 5; }
.main_projects .caption { position: static; padding: 16px 12px; background: #fff; }
.portfolio_gallery .gallery_list.is_masonry > .report { width: 100%; }
.portfolio_gallery .gallery_list.is_masonry .report_numbers dd { font-size: 32px; }
.projects_gallery .title_area { padding-right: 0; }
.projects_gallery .view_switch { position: static; width: fit-content; margin-bottom: 24px; }
.projects_gallery .view_switch button { font-size: 14px; }
.projects_gallery.is_list .card a { flex-wrap: wrap; gap: 10px 12px; padding: 24px 0; }
.projects_gallery.is_list .card a::before { flex-basis: 8%; }
.projects_gallery.is_list h3 { flex: 0 0 86%; font-size: 20px; }
.projects_gallery.is_list .badge { margin-left: 11%; padding: 0; font-size: 13px; }
.projects_gallery.is_list .link { margin-left: auto; font-size: 13px; }
.projects_gallery.is_list .card a:hover, .projects_gallery.is_list .card a:focus-visible { padding-left: 0; }
.projects_gallery .hover_preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.main_projects .gallery.is_masonry > li, .portfolio_gallery .gallery_list.is_masonry > li { translate: none; }
.main_projects .gallery img, .portfolio_gallery .shorts img { transition: none; }
.main_projects .gallery a:hover img, .portfolio_gallery .shorts:hover img { scale: none; }
.projects_gallery .hover_preview { display: none; }
}