@charset "utf-8";

/* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */

/* tag reset */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;          
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
html { width:100%; height:100%; }
body,code { font-size:14px; font-family:"Pretendard", "맑은 고딕","malgun gothic","돋움","dotum",sans-serif; color:var(--font-color-base); background:#fff; }
body {}
body#popup { min-width:0; }
li { list-style:none; }
img,fieldset { border:none; /*vertical-align:top;*/ }

/*
    <img> 에 width/height 를 적어 두면 브라우저가 미리 자리를 잡아 줍니다.
    다만 폭만 CSS 로 정한 곳에서는 세로가 원본 값 그대로 굳어 버리므로,
    기본값을 auto 로 풀어 둡니다. 세로를 직접 정한 규칙이 항상 이깁니다.
*/
img { height: auto; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
input,select,textarea { font-size:100%; font-family:"Pretendard", "맑은 고딕","malgun gothic","돋움","dotum",sans-serif; color:var(--font-color-base); vertical-align:middle; border-radius:0; box-sizing:border-box; }
button { font-family:"Pretendard", "맑은 고딕","malgun gothic","돋움","dotum",sans-serif; overflow:visible; padding:0; margin:0; border:0; cursor:pointer; background:none; }
hr.layout { display:none; }
a { text-decoration:none; color:var(--font-color-base); }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
#content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; }
#content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; }
#content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; }

#progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; filter:alpha(opacity=40); opacity:0.3; background-color:#000; }
#progressPaybarView { position:fixed; z-index:100; top:50%; left:0; right:0; transform:translateY(-50%); }
#progressPaybarView h3 { font-size:32px; color:#444b59; }
#progressPaybarView .box { width:586px; margin:0 auto; padding:67px 0; text-align:center; background:#fff; }
#progressPaybarView .box .txt { margin:8px 0 36px; font-size:15px; line-height:26px; color:#667084; }

/* contents */
#skipNavigation {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;}
#skipNavigation p, #skipNavigation ul, #skipNavigation ul li {height:0;}
#skipNavigation p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;}
#skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;}

.displaynone { display:none; }
.blind { display: block; overflow: hidden; position: absolute; font-size: 1px; line-height: 0; color: transparent; text-indent: -150%; white-space: nowrap;}

/* IE Not Supoorted */
:root {
    --width: 100%;
    --width-min: 320px; /* 레이아웃 최소 너비 */
    --width-max: 580px; /* 중앙 레이아웃 최대 너비: 테스트 후 500px로 되돌리면 관련 요소도 함께 복구 */

    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px; 
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-18: 18px;
    --radius-20: 20px; 
    --radius-30: 30px;

/* 브랜드 컬러 변경 부분 */
    --font-color-base:#000;                            /* 기본 base color */
    --font-color-heading:#000;                         /* 기본 타이틀 color */
    --point-color-primary:#FFCC00;                     /* 브랜드 포인트 color */
    --point-color-secondary:#959595;                   /* 브랜드 포인트 2번째 color */
    --point-font-color-primary:#fff;                   /* 브랜드 포인트 컬러 배경일 때 폰트 컬러 */
    --font-color-warn:#f00;                            /* warn color */
    --font-color-success:#0985df;                      /* success 완료 color */

    
    --mono-ff : #fff;
    --mono-00 : #000;
    --mono-1-66 : #666666;  
    --mono-2-95 : #959595;  
    --mono-3-c9 : #c9c9c9;  
    --mono-4-dd : #dddddd;  
    --mono-5-f6 : #f6f6f6; 
    
    --swiper-theme-color:#FFCC00;                         /* swiper theme color */
    --swiper-pagination-color:#FFCC00;                    /* swiper pagination color */
    --swiper-pagination-progressbar-bg-color:#dddddd;     /* swiper pagination-progressbar-bg color */
    --swiper-pagination-bullet-inactive-color :#fff;      /* swiper pagination bullet color */
    --swiper-pagination-bullet-inactive-opacity: 0.4;     /* swiper pagination bullet inactive opacity color */
    --swiper-pagination-bullet-width : 6px;
    --swiper-pagination-bullet-height : 6px;
    --swiper-pagination-bottom : 20px;
        
}

/* 중앙 레이아웃 너비 연동
   지점별 CSS에 남아 있는 500px 고정값보다 이 공통 변수를 우선 적용합니다. */
#wrap .branchMainBanner .bannerCont ul li .bnr_img,
#wrap .branchMainBanner .bannerCont ul li .bnr_img .branchMainBanner__media,
#wrap .branchMainBanner .bannerCont ul li .bnr_img > div,
#wrap .branchMainBanner .bannerCont ul li .bnr_img div[style*="overflow: hidden"],
#wrap .event_price_hero__inner,
#wrap .barogEventVisual,
#wrap .barogEventBranchMenu,
#wrap .ons_mainBanner .mainBnrMedia,
body .barogBottomNav .barogBottomNav__inner,
body .bottomNav .bottomNav__inner {
    max-width: var(--width-max) !important;
}

@media all and (min-width:768px) {
    /* 기존 500px 레이아웃의 좌우 5px 여백은 유지하면서 중앙 폭과 함께 확장 */
    #wrap .branchTabMenu[data-branch-tab-scroll-count] .branchTabMenu__list {
        width: calc(100% - 10px);
    }
}

/* 지점 팝업 슬라이드 하단 페이지 표시(점). 재생/일시정지 버튼은 제거했습니다. */
.branchMainBanner .branchMainBanner__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    margin-top: 12px;
    box-sizing: border-box;
}

.branchMainBanner .branchMainBanner__controls .swiper-pagination {
    position: static;
    display: flex;
    flex: 0 1 auto;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 0;
    transform: none;
}

/* progressbar */
.swiper-pagination-progressbar {
    --swiper-pagination-color: #FFCC00;
}

/* bullets */
.swiper-pagination-bullets {
    --swiper-pagination-color: #fff;
}

/* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */