/* 전체보기, 비교분석, 고객유형 상단 탭 */ #blog-list .blog-category { padding: 0 0 70px 0; } #blog-list .blog-category-ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } #blog-list .blog-category-ul li a { position: relative; display: flex; align-items: center; gap: 6px; text-align: center; padding: 12px 18px; margin: 0; font-size: 16px; white-space: nowrap; font-weight: 500; letter-spacing: 0; border-radius: 10px; background: #f4f4f4; color: #999; border: 2px solid #f4f4f4; } #blog-list .blog-category-ul li.on a { position: relative; font-weight: 500; background: #fff; color: #444; border-color: #444; } #blog-list .blog-category-ul li a small { font-size: 14px; font-weight: 600; color: #ccc; } #blog-list .blog-category-ul li.on a small { color: #888; } /* 검색영역 */ #blog-list .blog-search { text-align: center; padding: 0 0 60px 0; } #blog-list .blog-search-group { display: flex; align-items: center; justify-content: space-between; gap: 0 12px; } #blog-list .blog-search-view { display: flex; align-items: center; justify-content: center; gap: 0 12px; } /* 조회순, 최신순 드랍다운 */ #blog-list .blog-selectbox-wrap { display: flex; align-items: center; gap: 0; } #blog-list .blog-selectbox { position: relative; width: 120px; user-select: none; -webkit-user-select: none; -ms-user-select: none; overflow: hidden; } #blog-list .blog-selectbox-title { height: 60px; line-height: 60px; padding: 0 22px; background: #fff; border-radius: 10px; position: relative; color: #aaa; font-size: 17px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; cursor: pointer; text-align: center; text-indent: -15px; border: 2px solid #ddd; border: none; } #blog-list .blog-selectbox-title:after { content: ''; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; transform: translateY(-70%) rotate(45deg); transition: all 100ms; } #blog-list .blog-selectbox-option { opacity: 0; visibility: hidden; overflow: hidden; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 2px solid #444; border-radius: 10px; z-index: 10; margin: 0 0 0 0; padding: 10px; transition: all 100ms; } #blog-list .blog-selectbox-option li { position: relative; height: 46px; line-height: 46px; padding: 0 16px; white-space: nowrap; border-radius: 6px; cursor: pointer; font-size: 17px; color: #999; } #blog-list .blog-selectbox-option li:first-child { margin: 0; } #blog-list .blog-selectbox-option li.on, #blog-list .blog-selectbox-option li:hover { color: #222; font-weight: 500; } #blog-list .blog-selectbox.active { overflow: visible; } #blog-list .blog-selectbox.active .blog-selectbox-option { opacity: 1; visibility: visible; margin: 0; } #blog-list .blog-selectbox.active .blog-selectbox-title { color: #444; } #blog-list .blog-selectbox.active .blog-selectbox-title::after { transform: translateY(-30%) rotate(225deg); border-color: #aaa; } #blog-list .list-type { display: flex; align-items: center; justify-content: center; gap: 0; } #blog-list .list-type button { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 2px solid #ddd; border-radius: 0; background: #fff; color: #ddd; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 10px; border: none; } #blog-list .list-type button.on { background: #fff; border-color: #444; color: #444; } #blog-list .list-type button span { display: block; width: 18px; height: 3px; background: #ddd; box-shadow: 0 -8px #ddd, 0 8px #ddd; } #blog-list .list-type button.on span { display: block; width: 18px; height: 3px; background: #444; box-shadow: 0 -8px #444, 0 8px #444; } /* 네 칸 아이콘 */ #blog-list .list-type button.list-type-grid span { position: relative; display: block; width: 18px; height: 18px; box-shadow: none; background: none; } #blog-list .list-type button.list-type-grid span::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; background: #ddd; box-shadow: 12px 0 #ddd, 0 12px #ddd, 12px 12px #ddd; } #blog-list .list-type button.list-type-grid.on span::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; background: #444; box-shadow: 12px 0 #444, 0 12px #444, 12px 12px #444; } #blog-list .list-type button.list-type-grid.on span::before { border-color: #888; } /* 포스트 */ #blog-list .list-link { display: flex; align-items: flex-start; gap: 30px; position: relative; overflow: hidden; padding: 0; margin: 0 0 60px 0; } #blog-list .list-image { position: relative; flex: 0 0 170px; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; } #blog-list .list-image img { width: 100%; height: 100%; opacity: 0.8; transition: all 200ms; } #blog-list .list-link:hover .list-image img { opacity: 1; transform: scale(1.02); } #blog-list .list-link:hover .list-subject { color: #000; } #blog-list .list-link:hover .list-contents { color: #333; } #blog-list .list-meta { flex: 1 1 auto; } #blog-list .list-subject { display: block; font-size: 22px; font-weight: 500; margin: 0; color: #444; word-break: keep-all; } #blog-list .list-contents { text-overflow: ellipsis; font-size: 18px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #666; white-space: normal; line-height: 1.6; margin: 10px 0 15px 0; } #blog-list .list-icon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #blog-list .list-icon div { padding: 6px 15px; background: #f4f4f4; border-radius: var(--border-radius-8); font-size: 15px; color: #bbb; border: 1px solid #f4f4f4; letter-spacing: 0; } #blog-list .list-icon div.list-visited { color: #fff; background: #fff; border-color: #fff; } #blog-list .list-link:visited .list-icon div.list-visited { color: #bbb; background: #f4f4f4; border-color: #f4f4f4; } #blog-list .list-icon div.list-hit { display: flex; align-items: center; gap: 5px; } #blog-list .list-icon div.list-hit span { display: block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.67 34.88'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ccc;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cg id='_레이어_1-2' data-name='레이어 1'%3E%3Cpath class='cls-1' d='M31.04,8.2l6.5-6.5c.39-.39.39-1.02,0-1.41s-1.02-.39-1.41,0l-7.17,7.17c-2.37-.75-4.94-1.24-7.63-1.24C9.55,6.22,0,15.33,0,17.56c0,1.45,4.08,5.82,10.17,8.69l-6.92,6.92c-.39.39-.39,1.02,0,1.41.2.2.45.29.71.29s.51-.1.71-.29l7.49-7.49c2.78,1.07,5.89,1.8,9.18,1.8,11.78,0,21.33-9,21.33-11.33,0-1.64-4.73-6.56-11.62-9.35ZM21.33,23.64c-1.59,0-3.03-.61-4.11-1.61-.24-.22-.47-.47-.67-.73-.01-.01-.02-.03-.03-.04-.2-.26-.38-.53-.54-.82-.46-.86-.73-1.84-.73-2.89,0-3.36,2.72-6.08,6.08-6.08,1.04,0,2.03.26,2.89.73.29.16.56.34.82.54.01.01.03.02.04.03.26.2.5.43.73.67,1,1.08,1.61,2.53,1.61,4.11,0,3.36-2.72,6.08-6.08,6.08Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 20px; } #blog-list .list-icon div.list-comment { display: flex; align-items: center; gap: 5px; } #blog-list .list-icon div.list-comment span { display: block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12 2C6.48 2 2 5.94 2 10.8c0 2.66 1.36 5.04 3.5 6.64V22l4.2-2.3c.75.13 1.53.2 2.3.2 5.52 0 10-3.94 10-8.8S17.52 2 12 2z'/%3E%3C/svg%3E") no-repeat center / 18px; } /* 포스트 - 갤러리형 */ #blog-list .list-grid { display: flex; gap: 30px; flex-wrap: wrap; } #blog-list .list-grid .list-item { flex: 0 0 calc(25% - (30px * 3 / 4)); } #blog-list .list-grid .list-link { display: block; margin: 0; } #blog-list .list-grid .list-meta { text-align: left; padding: 20px 10px; } #blog-list .list-grid .list-subject { font-size: 20px; font-weight: 500; margin: 0; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; min-height: 60px; color: #444; } #blog-list .list-grid .list-icon { display: flex; align-items: center; gap: 8px; position: absolute; right: 18px; top: 16px; } #blog-list .list-grid .list-contents { display: none; } #blog-list .list-grid .list-new { display: none; } #blog-list .list-grid .list-category { display: none; } #blog-list .list-grid .list-regdt { display: none; } #blog-list .list-grid .list-visited { display: none; } #blog-list .list-grid .list-hit, #blog-list .list-grid .list-comment { background: #fff; color: #ccc; border: none; } #blog-list .list-btn-share { position: absolute; top: 12px; left: 12px; width: 42px; height: 42px; line-height: 42px; text-align: center; font-size: 0; border-radius: 10px; background: #fff url('/assets/playdev/img/free-icon-link-7046086.png') no-repeat center / 18px; } #blog-list .list-btn-share:hover { background: #000 url('/assets/playdev/img/free-icon-link-7046086_w.png') no-repeat center / 18px; } #blog-list .list-grid .list-btn-share { top: 15px; left: 15px; width: 48px; height: 48px; line-height: 48px; background-size: 20px; } #blog-list .list-grid .list-btn-share:hover { } #blog-list .blog-selectbox-page-num { width: 160px; } #blog-list .blog-selectbox-page-num .blog-selectbox-title, .blog-selectbox-page-num .blog-selectbox-option li { white-space: nowrap; } #blog-list .blog-selectbox-page-num .blog-selectbox-option { display: none; } #blog-list .blog-selectbox-page-num.active .blog-selectbox-option { display: block; } #blog-list .list-empty { text-align: center; color: #ccc; padding: 100px 0 200px 0; font-size: 17px; }