@charset "utf-8";
/* 메인 게시판 */
.bbs_title_wrap {display:flex;justify-content:space-between;align-items:flex-start;}
.bbs_title_wrap h2 {flex:1;margin:0;}
#bbs h2 {margin-bottom:36px;font-size:1.88rem;color:#020202;font-weight:400;margin:0;}
#bbs h2 a {color:#000;}
#bbs h2:after {content:'';display:block;width:40px;height:2px;margin:20px 0 15px;background:#D5D5D5;}

.bbs_title_wrap .btn_more {font-size:0.8125rem;font-weight:700;color:#71717a;border:1px solid #e4e4e7;background:#ffffff;border-radius:20px;padding:5px 14px;line-height:1.4;letter-spacing:0.5px;display:inline-flex;align-items:center;gap:4px;transition:all 0.25s ease;text-decoration:none;margin-top:4px;}
.bbs_title_wrap .btn_more span {font-size:1rem;font-weight:800;line-height:1;color:#a1a1aa;transition:color 0.2s;}
.bbs_title_wrap .btn_more:hover {color:#09090b;border-color:#09090b;background:#f8fafc;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.bbs_title_wrap .btn_more:hover span {color:#09090b;}

@media all and (max-width:767px){
  #bbs h2 {margin:20px 0 0 0;font-size:1.38rem;}
  #bbs h2:after {content:'';display:block;width:30px;height:1px;margin:15px 0 15px;background:#D5D5D5;}
  .bbs_title_wrap .btn_more {font-size:0.75rem;padding:4px 10px;margin-top:20px;}
}


/* 메인 텍스트1 */
#main_texts1, section#main_texts1 {display:block !important;overflow:hidden !important;position:relative !important;width:100% !important;max-width:100% !important;height:335px !important;margin:0 !important;padding:0 !important;}
.main_texts1 .txt {position:relative !important;width:100% !important;height:100% !important;overflow:hidden !important;margin:0 !important;padding:0 !important;}
.main_texts1 .txt strong {display:inline-block !important;vertical-align:middle !important;position:absolute !important;font-size:120px !important;font-weight:700 !important;line-height:120px !important;word-break:keep-all !important;word-wrap:break-word !important;white-space:nowrap !important;will-change:transform !important;pointer-events:none !important;user-select:none !important;}
.main_texts1 .txt strong.txt_01 {left:0 !important;right:auto !important;top:40px !important;color:#131313 !important;opacity:0.1 !important;}
.main_texts1 .txt strong.txt_02 {left:auto !important;right:0 !important;top:160px !important;color:transparent !important;-webkit-text-stroke:1.5px #131313 !important;text-stroke:1.5px #131313 !important;opacity:0.25 !important;}

@media (max-width:768px) {
  #main_texts1, section#main_texts1 {height:170px !important;}
  .main_texts1 .txt strong {font-size:50px !important;line-height:50px !important;}
  .main_texts1 .txt strong.txt_01 {left:0 !important;right:auto !important;top:30px !important;}
  .main_texts1 .txt strong.txt_02 {left:auto !important;right:0 !important;top:80px !important;-webkit-text-stroke:1px #131313 !important;text-stroke:1px #131313 !important;}
}


/* 메인 ROOMS */
.room_section {
  background: url(../img/main_room.png) 0 0 no-repeat;
}
@media (min-width: 1920px) {
  .room_section {background-position:calc(50% - 760px) 0;}
}
@media (max-width: 768px) {
  .room_section {background-size:200px auto;background-position:0 0;}
}


/* 메인 갤러리 */
#gallery {padding:80px 0 60px 0;overflow:hidden;}

@media (max-width:768px) {
  #gallery {padding:60px 0 40px 0;overflow:hidden;}
}


/* 메인 배너 */
#banner {padding:27px 0;overflow:hidden;border-top:1px solid #e5e5e5;background:#fff}
.banner .swiper-slide img {opacity:1;transition:0.3s;}
.banner .swiper-slide:hover img {opacity:0.5;}
.banner .swiper-pagination {margin-top:20px;position:relative;}
.banner .swiper-pagination .swiper-pagination-bullet {width:12px;height:12px;background-color:#fff;opacity:1;border:1px solid #0880e8;}
.banner .swiper-pagination .swiper-pagination-bullet-active {background-color:#0880e8;}
.banner .owl-item {display:flex;justify-content:center;align-items:center;padding:0 20px;}
.banner .owl-item img {width:60%;opacity:1;transition:0.3s;}
.banner .owl-item img:hover {opacity:0.5;}
.banner .owl-nav, .banner .owl-dots {margin-top:5px;text-align:center;}
.banner .owl-dot {display:inline-block;margin:0 5px;width:12px;height:12px;border-radius:50%;background-color:#ddd !important;}
.banner .owl-dot.active {background-color:#0880e8 !important;}


@media (max-width:768px) {
  #banner {padding:20px 0;overflow:hidden;}
}


/* Footer */
#footer {background:#27272A;padding:0 0 40px 0;color:#A6A6A6;border-top:1px solid #e5e5e5;}
#footer .footer-top {background:#27272A;padding:40px 0 0 0;}

#footer .footer-top .footer-logo {position:relative;padding-bottom:20px;}

#footer .footer-top p a:link {color:#eee;}
#footer .footer-top p a:visited {color:#eee;}
#footer .footer-top p a:hover {color:#eee;}
#footer .footer-top p a:active {color:#eee;}

#footer .footer-top .footer-contact {margin-bottom:15px;}
#footer .footer-top .footer-contact p {line-height:20px;}
#footer .footer-top .footer-contact p span {display:inline-block;margin-right:20px;line-height:1.8em;}

#footer .footer-top .footer-contact .policy {font-size:0.81rem;font-weight:bold;color:#FFF;line-height:1.8em;margin-bottom:15px;}

#footer .footer-top .footer-right {position:relative;margin-bottom:0px;text-align:right;}
#footer .footer-top .footer-right input[type=text] {border:0;padding:10px 8px;width:65%;background:#F5F5F5;}
#footer .footer-top .footer-right button[type=submit] {background:var(--color-secondary);border:0;width:35%;padding:10px 0;text-align:center;color:#fff;transition:0.3s;cursor:pointer;}
#footer .footer-top .footer-right button[type=submit]:hover {background:var(--color-primary1);}

#footer .footer-top .footer-right input[type=text]:focus{
-webkit-box-shadow:0 0 0 #9ed4ff;-moz-box-shadow:0 0 0 #9ed4ff;box-shadow:0 0 0 #9ed4ff;border:0px solid #558ab7 !important;}

/* 푸터 계좌안내 모던 카드 */
.footer_account_card {background:rgba(255, 255, 255, 0.04);border:1px solid rgba(255, 255, 255, 0.12);border-radius:12px;padding:15px 18px;backdrop-filter:blur(8px);transition:all 0.3s ease;text-align:left;margin-bottom:15px;box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);display:inline-block;width:100%;max-width:340px;box-sizing:border-box;}
.footer_account_card:hover {background:rgba(255, 255, 255, 0.07);border-color:rgba(255, 255, 255, 0.22);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.3);}
.footer_account_card .account_header {margin-bottom:10px;}
.footer_account_card .account_badge {display:inline-flex;align-items:center;gap:5px;background:rgba(255, 255, 255, 0.08);color:#cbd5e1;font-size:0.75rem;font-weight:700;padding:3px 9px;border-radius:6px;border:1px solid rgba(255, 255, 255, 0.12);letter-spacing:-0.02em;}
.footer_account_card .bank_info {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.footer_account_card .bank_logo {height:20px;max-width:110px;object-fit:contain;}
.footer_account_card .account_num {font-size:1.00rem;font-weight:800;color:#ffffff;letter-spacing:0.5px;}
.footer_account_card .account_holder {display:flex;align-items:center;gap:6px;font-size:0.8125rem;}
.footer_account_card .holder_label {color:#71717a;font-weight:600;}
.footer_account_card .holder_name {color:#e4e4e7;font-weight:700;}

#footer .footer-top .social-links {margin-top:15px;}
#footer .footer-top .social-links a {display:inline-block;background:#4A4E55;color:#eee;line-height:1;margin-right:5px;border-radius:50%;width:34px;height:34px;transition:0.3s;display:inline-flex;align-items:center;justify-content:center;}
#footer .footer-top .social-links a i {line-height:0;font-size:1.00rem;}
#footer .footer-top .social-links a:hover {background:var(--color-primary1);color:#fff;}

#footer .copyright {font-size:0.75rem;padding-top:0px;}


@media all and (max-width:1024px) {
  #footer {background:#27272A;padding:0 0 30px 0;color:#A6A6A6;}
  #footer .footer-top {background:#27272A;padding:30px 0 0 0;}

  #footer .footer-top .footer-right {margin-bottom:20px;text-align:left;}
  #footer .footer-top p {font-size:0.75rem;}

  #footer .footer-top .footer-contact {margin-bottom:20px;}
  #footer .footer-top .footer-contact p {line-height:18px;}
  #footer .footer-top .footer-contact p span {display:inline-block;margin-right:10px;line-height:1.6em;}

  .footer_account_card {max-width:100% !important;width:100% !important;display:block !important;}
}


/* ==========================================================================
   플로팅 퀵 메뉴바 (TOP - 카톡상담 - 페이스북 - 인스타그램 - 유튜브 - DOWN)
   ========================================================================== */
.quick_bar {
    position: fixed !important;
    right: 10px;
    bottom: 30px;
    width: 76px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.06);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99999 !important;
    box-sizing: border-box;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}
.quick_bar:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22), 0 6px 12px rgba(0, 0, 0, 0.08);
}
/* 닫힌 상태: 본체는 오른쪽으로 숨김 */
.quick_bar.closed {
    transform: translateX(calc(100% + 10px));
}
/* 좌측 탭 토글 버튼 (닫기: >, 열기: <) */
.quick_toggle_btn {
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 46px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    outline: none;
    transition: all 0.2s ease;
    z-index: 10;
}
.quick_toggle_btn:hover {
    background: #ffffff;
    color: #0f172a;
    box-shadow: -6px 0 14px rgba(0, 0, 0, 0.12);
}
.quick_toggle_btn i {
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    transition: transform 0.35s ease;
}
/* 닫혔을 때 아이콘이 왼쪽 화살표(<)로 회전 */
.quick_bar.closed .quick_toggle_btn i {
    transform: rotate(180deg);
}

.quick_scroll_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px 0;
    color: #64748b !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}
.quick_scroll_btn:hover {
    color: #0f172a !important;
    transform: scale(1.06);
}
.quick_scroll_btn i {
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
}
.quick_scroll_btn .quick_text {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-top: 2px;
    line-height: 1;
}
.quick_bar_divider {
    width: 38px;
    height: 1px;
    background: #e2e8f0;
    margin: 3px 0;
}
.quick_item_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px 0;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.quick_icon_wrap {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quick_icon_wrap img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 6px;
    filter: grayscale(100%) contrast(120%) opacity(0.75);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick_label {
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    margin-top: 3px;
    letter-spacing: -0.03em;
    white-space: nowrap;
    line-height: 1.1;
    transition: all 0.2s ease;
}

/* 마우스 호버 시 원래 CI 컬러로 전환 및 활성화 */
.quick_item_btn:hover .quick_icon_wrap img {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.14);
}
.quick_item_btn.quick_kakao:hover .quick_label {
    color: #d97706;
    font-weight: 800;
}
.quick_item_btn.quick_facebook:hover .quick_label {
    color: #1877F2;
    font-weight: 800;
}
.quick_item_btn.quick_instagram:hover .quick_label {
    color: #d6249f;
    font-weight: 800;
}
.quick_item_btn.quick_youtube:hover .quick_label {
    color: #dc2626;
    font-weight: 800;
}

@media (max-width: 768px) {
    .quick_bar {
        right: 5px;
        bottom: 20px;
        width: 58px;
        border-radius: 12px;
        padding: 6px 0;
    }
    .quick_bar.closed {
        transform: translateX(calc(100% + 5px));
    }
    .quick_toggle_btn {
        left: -19px;
        width: 19px;
        height: 40px;
        border-radius: 8px 0 0 8px;
    }
    .quick_toggle_btn i {
        font-size: 11px;
    }
    .quick_bar_divider {
        width: 32px;
        margin: 2px 0;
    }
    .quick_icon_wrap {
        width: 22px;
        height: 22px;
    }
    .quick_icon_wrap img {
        width: 20px;
        height: 20px;
    }
    .quick_label {
        font-size: 9px;
        margin-top: 2px;
    }
    .quick_scroll_btn .quick_text {
        font-size: 9.5px;
    }
}


/* footer bar를 policy로 변경 추가*/
.policy span {position:relative;margin-right:24px;}
.policy span::after {content: '';position:absolute;margin:0px 12px;width:1px;height:12px;background:#dcdcdc;top:5px;}
@media all and (max-width:1024px) {
  /* footer bar */
  .policy span {position:relative;margin-right:14px;}
  .policy span::after {content: '';position:absolute;margin:0px 7px;width:1px;height:10px;background:#dcdcdc;top:5px;}
}


/* --------------------------------------사이드뷰 관련 추가-------------------------------------- */


/* 상단 헤더 / 메인 메뉴바 최상위 레이어 보정 (스크롤 시 본문 가림 원천 방지) */
#topbar, #header, .header, #navbar, .navbar, .navbar ul, .navbar .dropdown ul {z-index:999999 !important;}

/* 사이드뷰 팝업 / 레이어 / 최신글 / 게시판 하단 여백 통합 처리 */
main#sub {position:relative;z-index:auto !important;overflow:visible !important;}
/* section {position:relative;z-index:auto !important;overflow:visible !important;} */

section:hover, section:focus-within, section:has(.sv_on) {z-index:999 !important;}
#footer {position:relative;z-index:auto !important;}

/* 사이드뷰 팝업 레이어 계층 */
.sv_wrap {position:relative;z-index:1;}

/* 팝업이 켜진 작성자 영역만 최상위 승격 (아래 게시물 작성자 이름 침범 방지) */
.sv_wrap:hover, .sv_wrap:focus-within, .sv_wrap:has(.sv_on) {z-index:99999 !important;}
.sv_wrap .sv, .sv_wrap .sv_on {position:absolute !important;z-index:999999 !important;}


/* 퀵메뉴(fixed) 최상위 승격 (뷰포트 화면 최상단 레이어 탈출) */
.quick_bar, .quick {position:fixed !important;z-index:99999999 !important;}

/* 카드형 게시판/최신글 아이템 승격 */
.portfolio-item, .portfolio-item_mov_new, .webzine_item {position:relative;z-index:1;}
.portfolio-item:hover, .portfolio-item:focus-within, .portfolio-item:has(.sv_on), .portfolio-item_mov_new:hover, .portfolio-item_mov_new:focus-within, .portfolio-item_mov_new:has(.sv_on), .webzine_item:hover, .webzine_item:focus-within, .webzine_item:has(.sv_on) {z-index:9999 !important;}

/* 메인 인덱스 웹진 최신글 박스 overflow 및 z-index 보정 */
#bbs, .bbsmain, .bbs1, .bbs2, .webzine_list, .webzine_text, .webzine_info {overflow:visible !important;}


 /* 폰트사이즈 보정 */
#main1, #footer_main, #customer, #footer {font-size:0.875rem;}








.journey-panel {position:relative;overflow:hidden;padding:0 0 80px 0;}
.journey-panel:before {content:"";position:absolute;left:-12%;right:-12%;top:360px;height:430px;}
.journey-panel:after {content:"";position:absolute;left:-18%;right:-18%;bottom:-115px;height:520px;}
.journey-title {position:relative;z-index:2;text-align:center;max-width:620px;margin:0 auto 70px;}
.journey-kicker {display:inline-flex;align-items:center;justify-content:center;width:54px;height:32px;border-radius:8px;background:var(--color-secondary);color:#fff;font-size:1.06rem;margin-bottom:22px;}
.journey-title h2 {margin:0;color:#111827;font-size:2.38rem;line-height:1.28;font-weight:800;letter-spacing:0;}
.journey-title p {margin:18px auto 0;color:#5f6b7a;font-size:1.06rem;line-height:1.65;word-break:keep-all;}

.journey-track {position:relative;z-index:2;max-width:1040px;margin:0 auto;padding:120px 0 10px;--plane-progress:0px;}
.journey-line {position:absolute;top:0;bottom:0;left:50%;width:18px;transform:translateX(-50%);background:linear-gradient(to bottom, rgba(218,228,240,0), #c9dcff 8%, #c9dcff 92%, rgba(218,228,240,0));}
.journey-plane {position:absolute;top:var(--plane-progress);left:50%;z-index:3;width:76px;height:76px;color:#9ca8b7;transform:translate(-50%, -26%);filter:drop-shadow(0 10px 14px rgba(0,0,0,.14));transition:top .18s ease-out,color .25s ease;}
.journey-plane svg, .journey-plane img {display:block;width:100%;height:100%;object-fit:contain;}
.journey-plane-icon {transform:scaleY(-1);transform-origin:center;transition:transform .35s ease;}
.journey-track.is-scroll-up .journey-plane-icon {transform:scaleY(1);}
.journey-step {position:relative;z-index:4;width:45%;min-height:188px;margin:0 0 72px;padding:32px 38px;border-radius:8px;background:#fff;color:#071844;box-shadow:0 18px 50px rgba(12,22,44,.08);transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;}
.journey-step:nth-of-type(odd) {margin-right:auto;}
.journey-step:nth-of-type(even) {margin-left:auto;}
.journey-step:after {display:none;}
.journey-step-icon {position:absolute;right:28px;top:22px;z-index:1;width:110px;height:110px;border-radius:50%;border:10px solid rgba(7,24,68,.04);background:linear-gradient(135deg, rgba(7,24,68,.04), rgba(7,24,68,0));display:flex;align-items:center;justify-content:center;color:rgba(7,24,68,.15);font-size:3.25rem;line-height:1;pointer-events:none;}
.journey-step-icon i {display:block;line-height:1;}
.journey-step span {position:relative;z-index:2;display:block;margin-bottom:34px;font-size:1.00rem;font-weight:800;letter-spacing:0;color:inherit;}
.journey-step h3 {position:relative;z-index:2;margin:0 0 16px;color:inherit;font-size:1.56rem;line-height:1.35;font-weight:800;letter-spacing:0;}
.journey-step p {position:relative;z-index:2;margin:0;color:inherit;font-size:1.00rem;line-height:1.62;word-break:keep-all;}
.journey-step.active {background:#013781;color:#fff;box-shadow:0 24px 54px rgba(0,19,73,.24);transform:translateY(-4px);}
.journey-step.active:after {border-color:rgba(255,255,255,.06);background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));}
.journey-step.active .journey-step-icon {border-color:rgba(255,255,255,.06);background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));color:rgba(255,255,255,.14);}
.journey-track.is-active .journey-plane {color:#6f7d8e;}

@media all and (max-width:1024px) {
  .compensation-journey {padding:50px 0;}
  .journey-panel {padding:62px 20px 70px;}
  .journey-title {margin-bottom:56px;}
  .journey-title h2 {font-size:2.00rem;}
  .journey-track {padding-top:95px;}
  .journey-line {width:14px;}
  .journey-plane {width:62px;height:62px;}
  .journey-step {width:100%;min-height:170px;margin:0 0 44px;padding:28px 30px;}
  .journey-step:nth-of-type(odd), .journey-step:nth-of-type(even) {margin-left:0;margin-right:0;}
  .journey-step span {margin-bottom:28px;}
}

@media all and (max-width:768px) {
  .compensation-journey {padding:38px 0;}
  .compensation-journey .container {padding-left:0;padding-right:0;}
  .journey-panel {border-radius:8px;padding:54px 20px 58px;}
  .journey-title h2 {font-size:1.63rem;}
  .journey-title p {font-size:.94rem;}
  .journey-track {padding-top:82px;}
  .journey-step-icon {position:absolute;right:22px;top:22px;z-index:1;width:90px;height:90px;border-radius:50%;border:10px solid rgba(7,24,68,.04);background:linear-gradient(135deg, rgba(7,24,68,.04), rgba(7,24,68,0));display:flex;align-items:center;justify-content:center;color:rgba(7,24,68,.15);font-size:3.25rem;line-height:1;pointer-events:none;}
  .journey-step {min-height:154px;margin-bottom:36px;padding:25px 22px;}
  .journey-step h3 {font-size:1.25rem;}
  .journey-step p {font-size:.88rem;}
}