/* 오피스키퍼 블로그 스타일 */
@charset "utf-8";
.cate-tab {display:flex; justify-content:center; align-items:center; gap:0 4rem;}
.cate-tab__wrap {position:relative;}
.cate-tab__wrap::before {position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100vw; height:1px; background-color:#d1d5db; content:"";}
.cate-tab__item.active > a, .cate-tab__item > a:hover {font-weight:700;}
.cate-tab__item.active > a::before, .cate-tab__item > a:hover::before {opacity:1;}
.cate-tab__item > a {display:inline-block; position:relative; padding-bottom:1rem; font-size:1.8rem; font-weight:400; letter-spacing:-0.054rem;}
.cate-tab__item > a::before {position:absolute; bottom:0; left:0; opacity:0; width:100%; height:2px; background-color:#1668e3; transition:0.14s; content:"";}
.cate-tab__mobile {display:none; position:relative;}
.cate-tab__mobile .nice-select {width:100%; height:52px; padding:0 24px; border:1px solid #ddd; border-radius:6px; background-color:#fff; font-size:16px; color:#1f2937; line-height:52px; transition:0.24s, outline-offset 0s; float:none;}
.cate-tab__mobile .nice-select:hover {border:1px solid #1668e3;}
.cate-tab__mobile .nice-select::placeholder {color:#1f2937;}
.cate-tab__mobile .nice-select:focus {outline:2px solid #1668e3; outline-offset:-2px;}
.cate-tab__mobile .nice-select.open::after {transform:translateY(-50%) rotate(180deg);}
.cate-tab__mobile .nice-select::after {right:30px; transform:translateY(-50%); transform-origin:center; width:12px; height:6px; margin-top:0; border:none; background:url(/html/images/common/select_arrow.svg) no-repeat center/contain; transition:0.28s;}
.cate-tab__mobile .nice-select .list {width:100%; max-height:340px; overflow:auto; margin-top:8px; border:1px solid #1668e3; border-radius:6px; background:#fff; box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.25);}
.cate-tab__mobile .nice-select .option {display:flex; align-items:center; height:52px; padding:0 24px; font-size:16px; font-weight:300; color:#21203c;}
.cate-tab__mobile .nice-select .option:hover, .cate-tab__mobile .nice-select .option.focus {background-color:rgba(22, 104, 227, 0.06);}
.cate-tab__mobile .nice-select .option.disabled, .cate-tab__mobile .nice-select .option.disabled:not(:hover) {background-color:#f3f4f6 !important;}

.blog__top {overflow:visible;}
.blog__top .swiper-wrapper {display:grid; gap:2rem; grid-template-rows:1fr; grid-template-columns:1.86fr 1fr;}
.blog__top-dot {display:none;}
.blog__top-thumb {max-height:25rem; overflow:hidden; border-radius:1.6rem; transition:0.24s;}
.blog__top-thumb:first-child {max-height:none; grid-row:span 2;}
.blog__top-thumb:hover {box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.25);}
.blog__top-thumb img {width:100%; height:100%; object-fit:cover;}
.blog__search {position:relative; max-width:100%; width:59rem; overflow:hidden; margin:6.4rem auto 2rem; text-align:center;}
.blog__search input {width:100%; height:4.6rem; padding-left:100px; padding-right:130px; margin:0; border:none; border-radius:50rem; background-color:#1668e3; font-size:1.6rem; font-weight:200; color:#fff; text-align:center;}
.blog__search input::placeholder {opacity:0.6; color:#fff; text-align:center; transition:0.14s;}
.blog__search input::selection {background-color:#0042a6;}
.blog__search input:focus {outline:none;}
.blog__search input:focus::placeholder {color:transparent;}
.blog__search input:-webkit-autofill, .blog__search input:-webkit-autofill:hover, .blog__search input:-webkit-autofill:focus, .blog__search input:-webkit-autofill:active {-webkit-box-shadow:0 0 0px 1000px #1668e3 inset; box-shadow:0 0 0px 1000px #1668e3 inset; transition:background-color 5000s ease-in-out 0s; -webkit-text-fill-color:#fff;}
.blog__search input:autofill, .blog__search input:autofill:hover, .blog__search input:autofill:focus, .blog__search input:autofill:active {-webkit-box-shadow:0 0 0px 1000px #1668e3 inset; box-shadow:0 0 0px 1000px #1668e3 inset; transition:background-color 5000s ease-in-out 0s; -webkit-text-fill-color:#fff;}
.blog__search-btn {position:absolute; top:0; right:0; width:8.8rem; height:4.6rem; padding:0; margin:0; border:none; border-radius:50rem; background:#1668e3; font-size:1.4rem; font-weight:600; color:#fff; letter-spacing:-0.014rem; transition:0.24s;}
.blog__search-btn:hover {background:linear-gradient(90deg, #1668e3 0%, rgba(237, 254, 255, 0.2) 100%); box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);}
.blog__search-clear {position:absolute; top:50%; right:10rem; transform:translateY(-50%); opacity:0; visibility:hidden; font-size:1.6rem; color:#fff; transition:0.14s;}
.blog__search-clear--active {opacity:0.6; visibility:visible;}
.blog__tag {display:flex; justify-content:center; margin-bottom:6.4rem;}
.blog__tag > p {height:100%; padding-right:2.4rem; margin-right:2.4rem; border-right:1px solid #ddd; font-size:1.6rem; font-weight:200; color:#aaa;}
.blog__tag-list {display:flex; align-items:center; flex-wrap:wrap; gap:1rem 2.4rem;}
.blog__tag-list > li > a {font-size:1.6rem; font-weight:300; color:#aaa;}
.blog__list {display:flex; flex-wrap:wrap; margin:6.4rem 0 4rem; gap:4.2rem 4rem;}
.blog__list--mb {margin-bottom:0;}
.blog__list-item {display:flex; flex-direction:column; width:calc(33.3333333333% - 2.67rem); overflow:hidden; border:1px solid #ddd; border-radius:1.6rem; transition:0.24s;}
.blog__list-item:hover {transform:translateY(-5px); box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.25);}
.blog__list-item:hover .blog__list-title {text-decoration:underline; text-underline-offset:3px;}
.blog__list-thumb {position:relative; height:auto; overflow:hidden; padding-top:62.5%;}
.blog__list-thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover;}
.blog__list-item.old .blog__list-thumb img {object-fit:contain;}
.blog__list-con {flex-grow:1; padding:4rem;}
.blog__list-info {display:flex; justify-content:space-between; align-items:center; margin-bottom:2.4rem;}
.blog__list-cate {font-size:1.6rem; font-weight:700; color:#1668e3;}
.blog__list-date {font-size:1.4rem; color:#aaa;}
.blog__list-title {min-height:6rem; margin-bottom:0 !important; font-size:2rem; font-weight:700; letter-spacing:-0.06rem; line-height:1.5; text-align:left !important;}
.blog__list-desc {margin-top:1rem; font-size:1.6rem; font-weight:500; color:#555; letter-spacing:-0.048rem; line-height:1.5; text-align:left !important;}
.blog__list-logo {display:flex; align-items:center; height:3.2rem; margin-bottom:2rem;}
.blog__list-logo img {max-height:100%;}
.blog__view-top {position:relative; overflow:hidden; margin-bottom:6.4rem; border-radius:1.6rem;}
.blog__view-mobile {display:none;}
.blog__view-info {display:flex; justify-content:space-between; align-items:flex-end; position:relative; padding-bottom:2rem;}
.blog__view-info::before {position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100vw; height:1px; background-color:#d1d5db; content:"";}
.blog__view-info .right {display:flex; align-items:center; flex-shrink:0; margin-left:3rem; gap:0 2.4rem;}
.blog__view-info .right > p {display:flex; align-items:center; font-size:1.4rem; color:#aaa; letter-spacing:-0.042rem; line-height:1.4; gap:0 0.8rem;}
.blog__view-cate {display:block; margin-bottom:0.8rem; font-size:1.6rem; font-weight:700; color:#1668e3; line-height:1.4;}
.blog__view-title {margin-bottom:0 !important; font-size:2.8rem; font-weight:700; letter-spacing:-0.084rem; line-height:1.2; text-align:left !important;}
.blog__view-con {padding-top:6.4rem; font-size:1.8rem; font-weight:400; letter-spacing:-0.054rem; line-height:1.6;}
.blog__view-writer {margin-top:3.2rem; font-size:0; text-align:center;}
.blog__view-writer > span {display:inline-block; position:relative; width:9.4rem; height:9.4rem; overflow:hidden; margin-bottom:1rem; border:1px solid #000; border-radius:50%;}
.blog__view-writer > span img {width:100%; height:100%; object-fit:cover;}
.blog__view-writer > p {font-size:1.8rem; letter-spacing:-0.054rem; line-height:1.4;}
.blog__view-writer > p .name {margin-left:0.5rem; font-weight:600;}
.blog__view-tag {display:flex; align-items:center; flex-wrap:wrap; margin-top:3.2rem; gap:0.8rem 2.4rem;}
.blog__view-tag span, .blog__view-tag a {display:inline-block; position:relative; font-size:1.8rem; font-weight:300; letter-spacing:-0.054rem; line-height:1.5;}
.blog__view-tag span::before, .blog__view-tag a::before {margin-right:-2px; content:"# ";}
.blog__view-btn {margin-top:3.2rem;}

@media (max-width: 1024px) {
.blog__list {gap:40px 30px;}
.blog__list-item {width:calc(33.3333333333% - 20px);}
.blog__list-con {padding:3rem;}
}

@media (max-width: 768px) {
.cate-tab__wrap {display:none;}
.cate-tab__mobile {display:block;}
.cate-tab__mobile-wrap {display:flex; flex-wrap:wrap; gap:1.6rem;}
.cate-tab__mobile-wrap .cate-tab__mobile {width:calc(50% - 1.2rem);}

.blog__top {padding:0 16px;}
.blog__top .swiper-wrapper {display:flex; gap:0;}
.blog__top-thumb {position:relative; max-height:none; padding-top:62.5%;}
.blog__top-thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.blog__top-dot {display:flex; margin-top:24px;}
.blog__search {margin:80px auto 20px;}
.blog__search input {height:46px; padding-left:24px; font-size:16px; text-align:left;}
.blog__search input::placeholder {text-align:left;}
.blog__search-btn {width:88px; height:46px; font-size:16px;}
.blog__search-clear {right:100px; font-size:16px;}
.blog__tag {max-width:calc(100% - 20px); margin:0 auto 80px;}
.blog__tag > p {padding-right:16px; margin-right:16px; font-size:14px;}
.blog__tag-list {gap:8px 16px;}
.blog__tag-list > li > a {font-size:14px;}
.blog__list {margin-top:40px; gap:40px 24px;}
.blog__list-item {width:calc(50% - 12px);}
.blog__list-con {padding:24px 20px;}
.blog__view-top {display:none;}
.blog__view-mobile {display:block; position:relative; overflow:hidden; margin-bottom:40px; border-radius:1.6rem;}
.blog__view-info {display:block; padding-bottom:20px;}
.blog__view-info .right {margin-top:12px; margin-left:0; gap:0 24px;}
.blog__view-info .right > p {font-size:14px; gap:0 8px;}
.blog__view-cate {margin-bottom:8px; font-size:16px;}
.blog__view-title {font-size:24px;}
.blog__view-con {padding-top:40px; font-size:16px;}
.blog__view-writer {margin-top:40px;}
.blog__view-writer > span {width:94px; height:94px;}
.blog__view-writer > p {font-size:18px;}
.blog__view-tag {margin-top:40px; gap:8px 24px;}
.blog__view-tag span, .blog__view-tag a {font-size:18px;}
.blog__view-btn {margin-top:40px; text-align:center;}
}

@media (max-width: 480px) {
.cate-tab__mobile-wrap .cate-tab__mobile {width:100%;}

.blog__list-item {width:100%;}
.blog__list-con {padding:32px;}
.blog__list-info {margin-bottom:24px;}
.blog__list-cate, .blog__list-date {font-size:16px;}
.blog__list-title {min-height:56px; margin-bottom:10px; font-size:20px;}
.blog__list-desc {font-size:16px;}
}