/* =============================================================================
   전역 리셋 및 기본 설정
   ============================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

/* =============================================================================
   SVG 아이콘 시스템 (Font Awesome 대체)
   ============================================================================= */
.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    overflow: visible;
}

/* SVG 스핀 애니메이션 (fa-spin 대체) */
@keyframes svg-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.svg-spin {
    animation: svg-spin 1s linear infinite;
}

/* 다크 테마 SVG 아이콘 색상 처리 */
[data-theme='dark'] img[src$='.svg'] {
    filter: brightness(0) invert(1);
}

/* 특정 SVG는 색상 반전 제외 (컬러 아이콘) */
[data-theme='dark'] img[src*='hart.svg'],
[data-theme='dark'] img[src*='logo'] {
    filter: none;
}

/* =============================================================================
   메인 컨테이너
   ============================================================================= */
.main-container {
    width: 1920px;
    height: 4257px;
    position: relative;
    background: white;
}

/* =============================================================================
   상단 헤더 (우측 상단)
   ============================================================================= */
.header-signup {
    width: 40.30px;
    height: 12px;
    left: 1311.19px;
    top: 1582.50px;
    position: absolute;
    color: #00AFFA;
    font-size: 11.25px;
    font-weight: 350;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-divider1 {
    width: 1px;
    height: 13px;
    left: 1363.48px;
    top: 1582px;
    position: absolute;
    background: #D9D9D9;
}

.header-login {
    width: 30.22px;
    height: 12px;
    left: 1376.48px;
    top: 1582.50px;
    position: absolute;
    color: #333333;
    font-size: 11.06px;
    font-weight: 350;
    line-height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-divider2 {
    width: 1px;
    height: 13px;
    left: 1418.70px;
    top: 1582px;
    position: absolute;
    background: #D9D9D9;
}

.header-customer {
    width: 53.30px;
    height: 35px;
    left: 1431.70px;
    top: 1571px;
    position: absolute;
}

.customer-text {
    width: 40.50px;
    height: 14px;
    left: 0px;
    top: 10px;
    position: absolute;
    color: #333333;
    font-size: 11.25px;
    font-weight: 350;
    line-height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.customer-arrow {
    width: 8px;
    height: 5px;
    left: 45.30px;
    top: 15px;
    position: absolute;
}

/* =============================================================================
   로고 섹션
   ============================================================================= */
.logo-bg {
    width: 82px;
    height: 42px;
    left: 435px;
    top: 1616.50px;
    position: absolute;
    overflow: hidden;
}

.logo-bg::before {
    content: '';
    width: 82px;
    height: 41.14px;
    left: 0px;
    top: 0.50px;
    position: absolute;
    background: #5F0080;
}

.logo-syncle {
    width: 62.23px;
    height: 23.94px;
    left: 537px;
    top: 1625.53px;
    position: absolute;
    text-align: center;
    color: #00AFFA;
    font-size: 16.88px;
    font-weight: 500;
    line-height: 23.94px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-divider {
    width: 1px;
    height: 14px;
    left: 610.23px;
    top: 1630.53px;
    position: absolute;
    background: #E2E2E2;
}

.logo-howmuch {
    width: 62.23px;
    height: 23.94px;
    left: 621.23px;
    top: 1625.53px;
    position: absolute;
    text-align: center;
    color: #B5B5B5;
    font-size: 16.88px;
    font-weight: 350;
    line-height: 23.94px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =============================================================================
   검색 컨테이너
   ============================================================================= */
.search-container {
    width: 400px;
    height: 48px;
    left: 760.23px;
    top: 85px;
    position: absolute;
    background: white;
    box-shadow: 0px 0px 0px 2px #F7F7F7 inset;
    overflow: hidden;
    border-radius: 6px;
    outline: 1px #00AFFA solid;
    outline-offset: -1px;
}

.search-placeholder {
    width: 138.87px;
    height: 19px;
    left: 15px;
    top: 14.50px;
    position: absolute;
    color: #999999;
    font-size: 15px;
    font-weight: 350;
    display: flex;
    align-items: center;
}

.search-icon {
    width: 16.48px;
    height: 16.48px;
    left: 775.83px;
    top: 94.60px;
    position: absolute;
    outline: 1.70px #00AFFA solid;
    outline-offset: -0.85px;
    border-radius: 50%;
}

/* =============================================================================
   우측 아이콘들
   ============================================================================= */
.user-icon {
    width: 18.61px;
    height: 24px;
    left: 1404.70px;
    top: 1626px;
    position: absolute;
    outline: 1.70px #333333 solid;
    outline-offset: -0.85px;
}

.user-icon::after {
    content: '';
    width: 5.57px;
    height: 5.57px;
    left: 6.52px;
    top: 30.34px;
    position: absolute;
    outline: 1.70px #333333 solid;
    outline-offset: -0.85px;
    border-radius: 50%;
}

.heart-icon {
    width: 25.72px;
    height: 21.59px;
    left: 1454.10px;
    top: 1627px;
    position: absolute;
    outline: 1.70px #333333 solid;
    outline-offset: -0.85px;
}

/* =============================================================================
   네비게이션 바
   ============================================================================= */
.nav-bar {
    width: 1920px;
    height: 56px;
    left: 0px;
    top: 142px;
    position: absolute;
    background: white;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.07);
}

.category-menu {
    width: 84.13px;
    height: 56px;
    left: 435px;
    top: 0px;
    position: absolute;
}

.category-icon {
    width: 16px;
    height: 14px;
    left: 435px;
    top: 163px;
    position: absolute;
    background: #333333;
}

.category-text {
    width: 54.33px;
    height: 20px;
    left: 465px;
    top: 160px;
    position: absolute;
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;
}

.nav-menu {
    width: 600px;
    height: 56px;
    left: 653.36px;
    top: 142px;
    position: absolute;
}

.nav-item1 {
    width: 65px;
    height: 19px;
    left: 696px;
    top: 160.50px;
    position: absolute;
    text-align: center;
    color: #333333;
    font-size: 14.88px;
    font-weight: 500;
    line-height: 20px;
}

.nav-item2 {
    width: 85px;
    height: 19px;
    left: 837px;
    top: 159.50px;
    position: absolute;
    text-align: center;
    color: #333333;
    font-size: 14.88px;
    font-weight: 500;
    line-height: 20px;
}

.nav-item3 {
    width: 54.33px;
    height: 19px;
    left: 1001.30px;
    top: 160px;
    position: absolute;
    text-align: center;
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.nav-item4 {
    width: 59.56px;
    height: 19px;
    left: 1148.67px;
    top: 160px;
    position: absolute;
    text-align: center;
    color: #333333;
    font-size: 14.88px;
    font-weight: 500;
    line-height: 20px;
}

.register-office {
    width: 127.39px;
    height: 32px;
    left: 1357.59px;
    top: 154px;
    position: absolute;
    border-radius: 18px;
    outline: 1px #EEEEEE solid;
    outline-offset: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-highlight {
    color: #00AFFA;
    font-size: 11.78px;
    font-weight: 500;
    line-height: 16px;
}

.register-normal {
    color: #666666;
    font-size: 11.78px;
    font-weight: 350;
    line-height: 16px;
}

/* =============================================================================
   메인 배너
   ============================================================================= */
.main-banner {
    width: 1900px;
    height: 370px;
    left: 10px;
    top: 198px;
    position: absolute;
    overflow: hidden;
}

.main-banner img {
    width: 1900px;
    height: 370px;
    left: 0px;
    top: 0px;
    position: absolute;
}

.banner-pause {
    width: 28px;
    height: 28px;
    left: 1313px;
    top: 316px;
    position: absolute;
    background: rgba(0, 0, 0, 0.50);
    overflow: hidden;
    border-radius: 20px;
}

.pause-icon1 {
    width: 2.50px;
    height: 8px;
    left: 10px;
    top: 10px;
    position: absolute;
    background: white;
}

.pause-icon2 {
    width: 2.50px;
    height: 8px;
    left: 15.50px;
    top: 10px;
    position: absolute;
    background: white;
}

.banner-controls {
    width: 126px;
    height: 32px;
    left: 1345px;
    top: 314px;
    position: absolute;
    background: rgba(0, 0, 0, 0.50);
    overflow: hidden;
    border-radius: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.slide-current {
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.slide-divider {
    width: 1px;
    height: 8px;
    background: rgba(255, 255, 255, 0.50);
    margin: 0 3px;
}

.slide-total {
    color: rgba(255, 255, 255, 0.70);
    font-size: 14px;
    font-weight: 350;
    line-height: 20px;
}

.slide-viewall {
    color: white;
    font-size: 13.12px;
    font-weight: 350;
    line-height: 20px;
    margin-left: 10px;
}

.slide-arrow {
    width: 5.41px;
    height: 8.94px;
    background: white;
    margin-left: 5px;
}

/* =============================================================================
   섹션 제목들
   ============================================================================= */
.section-title1 {
    width: 251.83px;
    height: 22px;
    left: 834px;
    top: 700px;
    position: absolute;
    text-align: center;
    color: #999999;
    font-size: 15.50px;
    font-weight: 350;
    line-height: 22px;
}

.popular-section-title {
    width: 362px;
    height: 50px;
    left: 779px;
    top: 642.50px;
    position: absolute;
}

.popular-section-title .section-text {
    width: 294px;
    height: 36px;
    left: 32px;
    top: 9px;
    position: absolute;
    text-align: center;
    color: #333333;
    font-size: 26.69px;
    font-weight: 500;
    line-height: 36px;
}

.popular-section-title .section-arrow {
    width: 13.67px;
    height: 22.62px;
    left: 337.32px;
    top: 15.11px;
    position: absolute;
    background: #333333;
}

.deadline-section-title {
    width: 362px;
    height: 50px;
    left: 779px;
    top: 1319.50px;
    position: absolute;
}

.deadline-section-title .section-text {
    width: 294px;
    height: 36px;
    left: 32px;
    top: 9px;
    position: absolute;
    text-align: center;
    color: #333333;
    font-size: 26.69px;
    font-weight: 500;
    line-height: 36px;
}

.deadline-section-title .section-arrow {
    width: 13.67px;
    height: 22.62px;
    left: 337.32px;
    top: 15.11px;
    position: absolute;
    background: #333333;
}

.promo-text {
    width: 275.28px;
    height: 22px;
    left: 822px;
    top: 1377px;
    position: absolute;
    text-align: center;
    color: #999999;
    font-size: 15.25px;
    font-weight: 350;
    line-height: 22px;
}

/* =============================================================================
   첫 번째 상품 그리드
   ============================================================================= */
.product-grid1 {
    width: 1050px;
    height: 496px;
    left: 435px;
    top: 749px;
    position: absolute;
    overflow: hidden;
}

/* 첫 번째 상품 카드들 */
.product1-card1 {
    width: 249px;
    height: 473px;
    left: 0px;
    top: 0px;
    position: absolute;
}

.product1-card2 {
    width: 249px;
    height: 496px;
    left: 267px;
    top: 0px;
    position: absolute;
}

.product1-card3 {
    width: 249px;
    height: 473px;
    left: 534px;
    top: 0px;
    position: absolute;
}

.product1-card4 {
    width: 249px;
    height: 473px;
    left: 801px;
    top: 0px;
    position: absolute;
}

/* 첫 번째 그리드 상품 이미지들 */
.product1-card1 img,
.product1-card2 img,
.product1-card3 img,
.product1-card4 img {
    width: 249px;
    height: 320px;
    left: 0px;
    top: 0px;
    position: absolute;
    border-radius: 4px;
}

/* 첫 번째 그리드 장바구니 버튼들 */
.product1-card1 .cart-button,
.product1-card2 .cart-button,
.product1-card3 .cart-button,
.product1-card4 .cart-button {
    width: 249px;
    height: 36px;
    left: 0px;
    top: 326px;
    position: absolute;
    border-radius: 4px;
    outline: 1px #DDDDDD solid;
    outline-offset: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-icon {
    width: 16.82px;
    height: 14.95px;
    outline: 1.22px #333333 solid;
    outline-offset: -0.61px;
    margin-right: 8px;
}

.cart-text {
    color: #222222;
    font-size: 15.12px;
    font-weight: 350;
    line-height: 29px;
}

/* 첫 번째 그리드 상품 정보들 */
.product1-card1 .product-title {
    width: 201.36px;
    height: 19px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.50px;
    font-weight: 350;
    line-height: 23px;
}

.product1-card2 .product-title {
    width: 230.58px;
    height: 42px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.12px;
    font-weight: 350;
    line-height: 23px;
}

.product1-card3 .product-title {
    width: 154.61px;
    height: 19px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.75px;
    font-weight: 350;
    line-height: 23px;
}

.product1-card4 .product-title {
    width: 143.59px;
    height: 19px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.25px;
    font-weight: 350;
    line-height: 23px;
}

/* 공통 가격 스타일 */
.original-price {
    position: absolute;
    top: 404px;
    color: #B5B5B5;
    font-size: 14px;
    font-weight: 350;
    text-decoration: line-through;
    line-height: 18px;
}

.discount {
    position: absolute;
    top: 423px;
    color: #FA622F;
    font-weight: 700;
    line-height: 24px;
}

.sale-price {
    position: absolute;
    top: 423px;
    color: #222222;
    font-weight: 700;
    line-height: 24px;
}

/* 첫 번째 그리드 개별 가격 위치 */
.product1-card1 .original-price { width: 57.54px; left: 0px; }
.product1-card1 .discount { width: 36.36px; left: 0px; font-size: 16px; }
.product1-card1 .sale-price { width: 66.99px; left: 43.16px; font-size: 15.88px; }

.product1-card2 .original-price { width: 55.51px; left: 0px; }
.product1-card2 .discount { width: 35.36px; left: 0px; font-size: 16px; }
.product1-card2 .sale-price { width: 58.20px; left: 42.16px; font-size: 13.88px; }

.product1-card3 .original-price { width: 49.33px; left: 0px; }
.product1-card3 .discount { width: 33.62px; left: 0px; font-size: 15.62px; }
.product1-card3 .sale-price { width: 56.73px; left: 40.42px; font-size: 15.62px; }

.product1-card4 .original-price { width: 55.22px; left: 0px; }
.product1-card4 .discount { width: 35.36px; left: 0px; font-size: 16px; }
.product1-card4 .sale-price { width: 62.90px; left: 42.16px; font-size: 14.88px; }

/* 쿠폰 배지들 */
.product1-card2 .coupon-badge,
.product1-card3 .coupon-badge,
.product1-card4 .coupon-badge {
    height: 31px;
    left: 8px;
    top: 8px;
    position: absolute;
    background: #00AFFA;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    line-height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
}

.product1-card2 .coupon-badge { width: 95.27px; font-size: 13.23px; }
.product1-card3 .coupon-badge { width: 79.97px; font-size: 13.56px; }
.product1-card4 .coupon-badge { width: 95.27px; font-size: 13.23px; }

/* 특가 표시 */
.product1-card3 .special-price {
    width: 249px;
    height: 37px;
    left: 0px;
    top: 283px;
    position: absolute;
    background: rgba(0, 0, 0, 0.40);
    color: white;
    font-size: 15.25px;
    font-weight: 500;
    line-height: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =============================================================================
   두 번째 상품 그리드
   ============================================================================= */
.product-grid2 {
    width: 1050px;
    height: 496px;
    left: 435px;
    top: 1426px;
    position: absolute;
    overflow: hidden;
}

/* 두 번째 상품 카드들 */
.product2-card1 {
    width: 249px;
    height: 496px;
    left: 0px;
    top: 0px;
    position: absolute;
}

.product2-card2 {
    width: 249px;
    height: 496px;
    left: 267px;
    top: 0px;
    position: absolute;
}

.product2-card3 {
    width: 249px;
    height: 496px;
    left: 534px;
    top: 0px;
    position: absolute;
}

.product2-card4 {
    width: 249px;
    height: 496px;
    left: 801px;
    top: 0px;
    position: absolute;
}

/* 두 번째 그리드 상품 이미지들 */
.product2-card1 img,
.product2-card2 img,
.product2-card3 img,
.product2-card4 img {
    width: 249px;
    height: 320px;
    left: 0px;
    top: 0px;
    position: absolute;
    border-radius: 4px;
}

/* 두 번째 그리드 장바구니 버튼들 */
.product2-card1 .cart-button,
.product2-card2 .cart-button,
.product2-card3 .cart-button,
.product2-card4 .cart-button {
    width: 249px;
    height: 36px;
    left: 0px;
    top: 326px;
    position: absolute;
    border-radius: 4px;
    outline: 1px #DDDDDD solid;
    outline-offset: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 두 번째 그리드 상품 정보들 */
.product2-card1 .product-title {
    width: 229.47px;
    height: 42px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.38px;
    font-weight: 350;
    line-height: 23px;
}

.product2-card2 .product-title {
    width: 233.45px;
    height: 42px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.12px;
    font-weight: 350;
    line-height: 23px;
}

.product2-card3 .product-title {
    width: 230.90px;
    height: 42px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.50px;
    font-weight: 350;
    line-height: 23px;
}

.product2-card4 .product-title {
    width: 234.59px;
    height: 42px;
    left: 0px;
    top: 372px;
    position: absolute;
    color: #222222;
    font-size: 15.25px;
    font-weight: 350;
    line-height: 23px;
}

/* 두 번째 그리드 개별 가격 위치 */
.product2-card1 .original-price { width: 65.14px; left: 0px; }
.product2-card1 .discount { width: 33.09px; left: 0px; font-size: 15.38px; }
.product2-card1 .sale-price { width: 76.42px; left: 39.89px; font-size: 15.88px; }

.product2-card2 .original-price { width: 57.33px; left: 0px; }
.product2-card2 .discount { width: 35.09px; left: 0px; font-size: 16px; }
.product2-card2 .sale-price { width: 66.64px; left: 41.89px; font-size: 15.88px; }

.product2-card3 .original-price { width: 63.08px; left: 0px; }
.product2-card3 .discount { width: 33.62px; left: 0px; font-size: 15.62px; }
.product2-card3 .sale-price { width: 77.25px; left: 40.42px; font-size: 16px; }

.product2-card4 .original-price { width: 57.37px; left: 0px; }
.product2-card4 .discount { width: 36.29px; left: 0px; font-size: 16px; }
.product2-card4 .sale-price { width: 69.94px; left: 43.09px; font-size: 16px; }

/* 두 번째 그리드 쿠폰 배지들 */
.product2-card1 .coupon-badge { width: 79.97px; font-size: 13.56px; }
.product2-card2 .coupon-badge { width: 94.31px; font-size: 13.56px; }
.product2-card3 .coupon-badge { width: 100.59px; font-size: 13.34px; }
.product2-card4 .coupon-badge { width: 76.50px; font-size: 13.12px; }

.product2-card1 .coupon-badge,
.product2-card2 .coupon-badge,
.product2-card3 .coupon-badge,
.product2-card4 .coupon-badge {
    height: 31px;
    left: 8px;
    top: 8px;
    position: absolute;
    background: #00AFFA;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    line-height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
}

/* 특가 표시 */
.product2-card2 .special-price {
    width: 249px;
    height: 37px;
    left: 0px;
    top: 283px;
    position: absolute;
    background: rgba(0, 0, 0, 0.40);
    color: white;
    font-size: 15.75px;
    font-weight: 500;
    line-height: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =============================================================================
   다음 버튼들
   ============================================================================= */
.next-btn1 {
    width: 60px;
    height: 60px;
    left: 1515px;
    top: 939px;
    position: absolute;
    transform: rotate(180deg);
    transform-origin: top left;
    background: white;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
}

.next-btn1::after {
    content: '';
    width: 10px;
    height: 18px;
    left: 25px;
    top: 21px;
    position: absolute;
    background: #333333;
    transform: rotate(180deg);
}

.next-btn2 {
    width: 60px;
    height: 60px;
    left: 1515px;
    top: 1616px;
    position: absolute;
    transform: rotate(180deg);
    transform-origin: top left;
    background: white;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
}

.next-btn2::after {
    content: '';
    width: 10px;
    height: 18px;
    left: 25px;
    top: 21px;
    position: absolute;
    background: #333333;
    transform: rotate(180deg);
}

/* =============================================================================
   실시간 인기 업체 섹션
   ============================================================================= */
.realtime-popular-title {
    width: 252.95px;
    height: 34px;
    left: 833.63px;
    top: 2016px;
    position: absolute;
    text-align: center;
    color: #222222;
    font-size: 27.02px;
    font-weight: 500;
    line-height: 31px;
}

.realtime-popular-subtitle {
    width: 209.95px;
    height: 19px;
    left: 855.13px;
    top: 2058px;
    position: absolute;
    text-align: center;
    color: #848F9A;
    font-size: 15.12px;
    font-weight: 350;
    line-height: 22px;
}

/* 인기 업체 카드들 */
.popular-offices {
    width: 1050px;
    height: 361px;
    left: 435px;
    top: 2095px;
    position: absolute;
    overflow: hidden;
}

.popular-card1 {
    width: 190px;
    height: 361px;
    left: 0px;
    top: 0px;
    position: absolute;
    overflow: hidden;
    border-radius: 10px;
    background: #F7F7F7;
}

.popular-card1 img {
    width: 190px;
    height: 234px;
    left: 0px;
    top: 0px;
    position: absolute;
}

.popular-rank {
    width: 15.20px;
    height: 38px;
    left: 12px;
    top: 256.50px;
    position: absolute;
    color: #222222;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popular-title {
    width: 130.47px;
    height: 35px;
    left: 39px;
    top: 247.98px;
    position: absolute;
    color: #222222;
    font-size: 13.34px;
    font-weight: 350;
    line-height: 19px;
}

.popular-discount {
    width: 29.47px;
    height: 16px;
    left: 39px;
    top: 286.98px;
    position: absolute;
    color: #FA622F;
    font-size: 13.67px;
    font-weight: 700;
    line-height: 19.04px;
}

/* =============================================================================
   전체보기 버튼
   ============================================================================= */
.viewall-button {
    width: 516px;
    height: 56px;
    left: 702px;
    top: 2508px;
    position: absolute;
    border-radius: 3px;
    outline: 1px #DDDDDD solid;
    outline-offset: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.viewall-text {
    color: black;
    font-size: 15px;
    font-weight: 350;
    line-height: 20px;
    margin-right: 10px;
}

.viewall-arrow {
    width: 5px;
    height: 10px;
    outline: 1px #333333 solid;
    outline-offset: -0.50px;
}

/* =============================================================================
   실시간 로그인된 공유오피스 섹션
   ============================================================================= */
.realtime-offices-title {
    width: 347px;
    height: 34px;
    left: 786px;
    top: 2707.50px;
    position: absolute;
    text-align: center;
    color: #222222;
    font-size: 27.02px;
    font-weight: 500;
    line-height: 31px;
}

.realtime-offices-subtitle {
    width: 209.95px;
    height: 19px;
    left: 845px;
    top: 2750.50px;
    position: absolute;
    text-align: center;
    color: #848F9A;
    font-size: 15.12px;
    font-weight: 350;
    line-height: 22px;
}