/*
Theme Name: Colibri WP Child
Theme URI: https://colibriwp.com/go/colibri-theme/
Template: colibri-wp
Author: Extend Themes
Author URI: https://colibriwp.com/
Description: A beautiful, very customizable, multipurpose theme that you can use to create amazing websites through drag and drop. It comes with a pre-designed home page, 5 header designs and over 35 ready-to-use content blocks that you can easily customize. You can also design your own custom blocks by combining more than 25 drag and drop components. It offers lots of customization options (video background, slideshow background, header content types, etc) to help you create a website that stands out in no time. It is also designed with responsiveness, to work on mobile devices right out of the box. It is the only theme you will ever need! CHECK OUT THE DEMOS: https://colibriwp.com/go/demos
Tags: entertainment,food-and-drink,portfolio,one-column,two-columns,right-sidebar,grid-layout,custom-header,custom-menu,custom-logo,full-width-template,theme-options,translation-ready,featured-images,threaded-comments
Version: 1.0.140.1760913197
Updated: 2025-10-19 22:33:17

/* ==============================================
   Process Section - Selling & Buying 공통 스타일
   ============================================== */

#ssre-selling-process,
#ssre-buying-process {
    padding: 60px 20px;
    background-color: #f8f9fa;
}

#ssre-selling-process .selling-process-container,
#ssre-buying-process .selling-process-container {
    max-width: 900px;
    margin: 0 auto;
}

#ssre-selling-process .selling-process-header,
#ssre-buying-process .selling-process-header {
    text-align: center;
    margin-bottom: 60px;
}

#ssre-selling-process .selling-process-title,
#ssre-buying-process .selling-process-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

#ssre-selling-process .selling-process-subtitle,
#ssre-buying-process .selling-process-subtitle {
    font-size: 1.125rem;
    color: #6c757d;
    margin: 0;
    font-weight: 400;
}

#ssre-selling-process .selling-process-steps-wrapper,
#ssre-buying-process .selling-process-steps-wrapper {
    position: relative;
    padding-left: 0;
}

/* Vertical connecting line */
#ssre-selling-process .selling-process-steps-wrapper::before,
#ssre-buying-process .selling-process-steps-wrapper::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 60px;
    bottom: 60px;
    width: 2px;
    background-color: #d1d5db;
    z-index: 0;
}

#ssre-selling-process .selling-process-step,
#ssre-buying-process .selling-process-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 50px;
    padding-left: 80px;
}

#ssre-selling-process .selling-process-step:last-child,
#ssre-buying-process .selling-process-step:last-child {
    margin-bottom: 0;
}

#ssre-selling-process .selling-process-number,
#ssre-buying-process .selling-process-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1d7ad9;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(29, 122, 217, 0.25);
}

#ssre-selling-process .selling-process-content,
#ssre-buying-process .selling-process-content {
    flex: 1;
    text-align: left;
}

#ssre-selling-process .selling-process-title-wrapper,
#ssre-buying-process .selling-process-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

#ssre-selling-process .selling-process-icon,
#ssre-buying-process .selling-process-icon {
    font-size: 1.25rem;
    color: #1d7ad9;
    flex-shrink: 0;
}

#ssre-selling-process .selling-process-step-title,
#ssre-buying-process .selling-process-step-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
}

#ssre-selling-process .selling-process-step-description,
#ssre-buying-process .selling-process-step-description {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 768px) {
    #ssre-selling-process,
    #ssre-buying-process {
        padding: 40px 15px;
    }

    #ssre-selling-process .selling-process-header,
    #ssre-buying-process .selling-process-header {
        margin-bottom: 40px;
    }

    #ssre-selling-process .selling-process-title,
    #ssre-buying-process .selling-process-title {
        font-size: 2rem;
    }

    #ssre-selling-process .selling-process-subtitle,
    #ssre-buying-process .selling-process-subtitle {
        font-size: 1rem;
    }

    #ssre-selling-process .selling-process-step,
    #ssre-buying-process .selling-process-step {
        padding-left: 65px;
        margin-bottom: 40px;
    }

    #ssre-selling-process .selling-process-steps-wrapper::before,
    #ssre-buying-process .selling-process-steps-wrapper::before {
        left: 19px;
        top: 50px;
        bottom: 50px;
    }

    #ssre-selling-process .selling-process-number,
    #ssre-buying-process .selling-process-number {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }

    #ssre-selling-process .selling-process-icon,
    #ssre-buying-process .selling-process-icon {
        font-size: 1.125rem;
    }

    #ssre-selling-process .selling-process-step-title,
    #ssre-buying-process .selling-process-step-title {
        font-size: 1.25rem;
    }

    #ssre-selling-process .selling-process-step-description,
    #ssre-buying-process .selling-process-step-description {
        font-size: 0.938rem;
    }
}

@media (max-width: 480px) {
    #ssre-selling-process .selling-process-title,
    #ssre-buying-process .selling-process-title {
        font-size: 1.75rem;
    }

    #ssre-selling-process .selling-process-step,
    #ssre-buying-process .selling-process-step {
        padding-left: 55px;
        margin-bottom: 35px;
    }

    #ssre-selling-process .selling-process-steps-wrapper::before,
    #ssre-buying-process .selling-process-steps-wrapper::before {
        left: 16px;
    }

    #ssre-selling-process .selling-process-number,
    #ssre-buying-process .selling-process-number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    #ssre-selling-process .selling-process-icon,
    #ssre-buying-process .selling-process-icon {
        font-size: 1rem;
    }

    #ssre-selling-process .selling-process-step-title,
    #ssre-buying-process .selling-process-step-title {
        font-size: 1.125rem;
    }

    #ssre-selling-process .selling-process-title-wrapper,
    #ssre-buying-process .selling-process-title-wrapper {
        gap: 10px;
    }
}

/* Management Process - 기존 스타일 상속 */
#ssre-management-process {
    padding: 60px 20px;
    background-color: #f8f9fa;
}

#ssre-management-process .selling-process-container {
    max-width: 900px;
    margin: 0 auto;
}

#ssre-management-process .selling-process-header {
    text-align: center;
    margin-bottom: 60px;
}

#ssre-management-process .selling-process-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

#ssre-management-process .selling-process-subtitle {
    font-size: 1.125rem;
    color: #6c757d;
    margin: 0;
    font-weight: 400;
}

#ssre-management-process .selling-process-steps-wrapper {
    position: relative;
    padding-left: 0;
}

#ssre-management-process .selling-process-steps-wrapper::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 60px;
    bottom: 60px;
    width: 2px;
    background-color: #d1d5db;
    z-index: 0;
}

#ssre-management-process .selling-process-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 50px;
    padding-left: 80px;
}

#ssre-management-process .selling-process-step:last-child {
    margin-bottom: 0;
}

#ssre-management-process .selling-process-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1d7ad9;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(29, 122, 217, 0.25);
}

#ssre-management-process .selling-process-content {
    flex: 1;
    text-align: left;
}

#ssre-management-process .selling-process-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

#ssre-management-process .selling-process-icon {
    font-size: 1.25rem;
    color: #1d7ad9;
    flex-shrink: 0;
}

#ssre-management-process .selling-process-step-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
}

#ssre-management-process .selling-process-step-description {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 768px) {
    #ssre-management-process {
        padding: 40px 15px;
    }

    #ssre-management-process .selling-process-header {
        margin-bottom: 40px;
    }

    #ssre-management-process .selling-process-title {
        font-size: 2rem;
    }

    #ssre-management-process .selling-process-subtitle {
        font-size: 1rem;
    }

    #ssre-management-process .selling-process-step {
        padding-left: 65px;
        margin-bottom: 40px;
    }

    #ssre-management-process .selling-process-steps-wrapper::before {
        left: 19px;
        top: 50px;
        bottom: 50px;
    }

    #ssre-management-process .selling-process-number {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }

    #ssre-management-process .selling-process-icon {
        font-size: 1.125rem;
    }

    #ssre-management-process .selling-process-step-title {
        font-size: 1.25rem;
    }

    #ssre-management-process .selling-process-step-description {
        font-size: 0.938rem;
    }
}

@media (max-width: 480px) {
    #ssre-management-process .selling-process-title {
        font-size: 1.75rem;
    }

    #ssre-management-process .selling-process-step {
        padding-left: 55px;
        margin-bottom: 35px;
    }

    #ssre-management-process .selling-process-steps-wrapper::before {
        left: 16px;
    }

    #ssre-management-process .selling-process-number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    #ssre-management-process .selling-process-icon {
        font-size: 1rem;
    }

    #ssre-management-process .selling-process-step-title {
        font-size: 1.125rem;
    }

    #ssre-management-process .selling-process-title-wrapper {
        gap: 10px;
    }
}

/* ==============================================
   Contact Information & Office Hours Cards - Left Aligned
   ============================================== */

#ssre-contact-info,
#ssre-office-hours {
    padding: 20px;
    margin-bottom: 30px;
}

#ssre-contact-info .contact-card-container,
#ssre-office-hours .contact-card-container {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 960px;
    margin: 0; /* 왼쪽 정렬 */
    text-align: left; /* 왼쪽 정렬 */
}

#ssre-contact-info .contact-card-title,
#ssre-office-hours .contact-card-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 30px 0;
    line-height: 1.2;
    text-align: left; /* 왼쪽 정렬 */
}

#ssre-contact-info .contact-card-item,
#ssre-office-hours .contact-card-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}

#ssre-contact-info .contact-card-item:last-child,
#ssre-office-hours .contact-card-item:last-child {
    margin-bottom: 0;
}

#ssre-contact-info .contact-card-icon,
#ssre-office-hours .contact-card-icon {
    font-size: 1.5rem;
    color: #1d7ad9;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    margin-top: 2px;
}

#ssre-contact-info .contact-card-content,
#ssre-office-hours .contact-card-content {
    flex: 1;
}

#ssre-contact-info .contact-card-label,
#ssre-office-hours .contact-card-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

#ssre-contact-info .contact-card-text,
#ssre-office-hours .contact-card-text {
    font-size: 1rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}

/* Hover effect */
#ssre-contact-info .contact-card-item:hover .contact-card-icon,
#ssre-office-hours .contact-card-item:hover .contact-card-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    #ssre-contact-info,
    #ssre-office-hours {
        padding: 15px;
        margin-bottom: 20px;
    }

    #ssre-contact-info .contact-card-container,
    #ssre-office-hours .contact-card-container {
        padding: 30px 24px;
        border-radius: 12px;
    }

    #ssre-contact-info .contact-card-title,
    #ssre-office-hours .contact-card-title {
        font-size: 1.75rem;
        margin-bottom: 24px;
    }

    #ssre-contact-info .contact-card-item,
    #ssre-office-hours .contact-card-item {
        gap: 16px;
        margin-bottom: 24px;
    }

    #ssre-contact-info .contact-card-icon,
    #ssre-office-hours .contact-card-icon {
        font-size: 1.25rem;
    }

    #ssre-contact-info .contact-card-label,
    #ssre-office-hours .contact-card-label {
        font-size: 1rem;
    }

    #ssre-contact-info .contact-card-text,
    #ssre-office-hours .contact-card-text {
        font-size: 0.938rem;
    }
}

@media (max-width: 480px) {
    #ssre-contact-info .contact-card-container,
    #ssre-office-hours .contact-card-container {
        padding: 24px 20px;
    }

    #ssre-contact-info .contact-card-title,
    #ssre-office-hours .contact-card-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    #ssre-contact-info .contact-card-item,
    #ssre-office-hours .contact-card-item {
        gap: 14px;
        margin-bottom: 20px;
    }

    #ssre-contact-info .contact-card-icon,
    #ssre-office-hours .contact-card-icon {
        font-size: 1.125rem;
        width: 20px;
    }
}


/* ==========================
   Header / Navigation Layout Fix
   ========================== */

/* 전체 네비게이션 컨테이너를 1200px로 중앙 정렬 */
.h-navigation .h-section-grid-container,
.h-navigation .h-section-fluid-container,
#navigation {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* 내부 3컬럼(로고, 메뉴, 전화번호)을 균등하게 정렬 */
.h-navigation .h-row {
  justify-content: space-between !important;
  align-items: center !important;
}

/* 로고 이미지 정렬 (중앙에 맞게) */
.h-navigation [data-placeholder-provider="navigation-logo"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 !important;
}

/* 메뉴 영역 중앙 정렬 */
.h-navigation [data-placeholder-provider="navigation-menu"] {
  display: flex !important;
  justify-content: center !important;
  flex: 2 !important;
}

/* 전화번호(커스텀 섹션) 오른쪽 정렬 */
.h-navigation [data-placeholder-provider="navigation-custom"] {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex: 1 !important;
}

/* 반응형 - 모바일에서는 전체 폭 100% */
@media (max-width: 1024px) {
  #navigation,
  .h-navigation .h-section-grid-container,
  .h-navigation .h-section-fluid-container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}


/* ==========================
   Remove black side gaps
   ========================== */

/* 전체 페이지 배경색을 헤더와 동일한 흰색으로 설정 */
body,
.h-page,
#page,
.h-section.h-navigation,
#navigation {
  background-color: #ffffff !important;
}

/* 네비게이션 영역이 전체 폭을 차지하도록 강제 */
#navigation {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box;
  border: none !important;
}

/* 내부 컨텐츠는 1200px로 중앙 정렬 */
#navigation .h-section-grid-container,
#navigation .h-section-fluid-container,
#navigation .h-row-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 반응형 */
@media (max-width: 1024px) {
  #navigation .h-section-grid-container,
  #navigation .h-section-fluid-container,
  #navigation .h-row-container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}