@charset "utf-8";

/*2022-01-11 ios bounce 문제로 fixed형태로 header 변경*/
header{position:fixed;z-index:999;top:0;left:0;width:100%; height:48px;}
.mo_card header{position:relative;}
#wrap{padding-top:48px;}
#wrap.mo_card{padding-top:0;}
#bandBannerCms{margin-top:-48px;}

.wrap { min-height:100%; } /* 2021-11-28 Q10071: min-height 추가 */
/* 2021-08-30 Q10112 : header 추가 */
.header{position:relative; z-index:999; width:100%; background-color:#fff;}
.header h1{text-align:center;}
.header h1:not(.a11y) { height:48px; padding: 0px 16px 0px 18px;}
.header h1 .tit{ display:inline-block;overflow:hidden; max-width:calc(100vw - 116px); padding:13px 0; text-overflow:ellipsis; white-space:nowrap;}
.header h1 .tit .date{margin-right:4px;} /* 2021-12-01 Q10112 : 날짜영역 추가 */
.header h1 .logo{display:block; height:100%; padding: 12px 0; margin-left: 30px;/*background:url(/docfiles/resources/mo/images/com/logo/logo_black.png) no-repeat 50% 50%; background-size:118px 24px;*/} /*2022-07-11 Q20016 넥슨 CI로고 스플래쉬 영상 비활성화 */
.header h1 .logo.small {background-size: 92px 18px;} /* 2023-02-09 GGU477 추가 */
/* .header h1 .logo {display: inline-block; width: 187px; height: 100%; background: url(/docfiles/resources/mo/images/com/logo/mo_logo_light.gif) no-repeat 50% 50%; background-size: 100%; } */ /*2022-07-11 Q20016 넥슨 CI로고 스플래쉬 영상 비활성화 */
.header .btn_Menu{position:absolute; top:8px; left:16px; width:32px; height:32px; background:url(/docfiles/resources/mo/images/com/icon/w32/ico_menu.png) no-repeat 50% 50%; background-size:32px 32px;}
.header .btn_prev{position:absolute; top:8px; left:8px; width:32px; height:32px; background:url(/docfiles/resources/mo/images/com/icon/w32/ico_arrowB_back.png) no-repeat 50% 50%; background-size:32px 32px;}
.header .btn_close{position:absolute; top:8px; right:8px; width:32px; height:32px; background:url(/docfiles/resources/mo/images/com/icon/w32/ico_x_b.png) no-repeat 50% 50%; background-size:32px 32px;}
.header .btn_custom{position:absolute; top:8px; right:8px; overflow:hidden; width:32px; height:32px; border:1px solid rgba(0,0,0,0.64); border-radius:100%; background-color:#fff;}
.header .btn_custom img{width:32px;}
.fixed .header{position:fixed; top:0; right:0; left:0; border-bottom:1px solid rgba(0,0,0,0.12);} /* Q10048 211001 라인 추가 */

/* 2024-04-29 헤더 로고 변경  */
.header h1 .logo_img{ position: relative; display:block; width: 140px; height: 40px; margin: 0 auto;} 
.header h1 a .logo_img > .logo_AoC { position: absolute; top: 0; left: 0; width: 140px; height: 40px; opacity: 1; background-image: url(/docfiles/resources/mo/images/com/logo/logo_AoC.svg); background-repeat:no-repeat; background-position: 0 50%; background-size: auto 40px; transition: opacity 50ms cubic-bezier(0.65, 0, 0.35, 1);}
.header h1 a .logo_img > .logo_HC { position: absolute; right: 0; bottom: 3.94px; width: 71.25px; height: 14px; background-image: url(/docfiles/resources/mo/images/com/logo/logo_HC.svg);  background-repeat:no-repeat; background-position:50% 50%; background-size: auto 14px; transition: all 100ms cubic-bezier(0.25, 0.25, 0.75, 0.75);}
.fixed .header h1 a .logo_img > .logo_AoC { opacity: 0; transition: opacity 100ms cubic-bezier(0.25, 0.25, 0.75, 0.75); }
.fixed .header h1 a .logo_img > .logo_HC { right: 17.86px; bottom: 8px; width: 122.14px; height: 24px;  background-size: auto 24px; transition: all 200ms cubic-bezier(0.65, 0, 0.35, 1); }

/* 2024-03-15 GGU282 - [기타] 보이는 ARS 프로세스 신규 제작(MO) 추가 */
#wrap.landing_intro {padding-top:56px;}
.landing_intro .header {border-bottom:1px solid rgba(0,0,0,0.16);}
.landing_intro .header h1:not(.a11y) { display:block;height:55px; padding: 12px 0; margin-left:0; background:url(/docfiles/resources/mo/images/com/logo/logo_black.png) no-repeat 50% 50%; background-size:118px 24px; } /* 2024-05-10 GGU282 - 수정 */
.landing_intro .header .btn_Menu {top:12px;}
.landing_intro .header .btn_prev {top:12px;}
.landing_intro .header .btn_close {top:12px;}
.landing_intro .header .btn_custom {top:12px;}

/* progress */
.header .bar {position:relative;width:100%;height:4px;margin:0 auto;border-radius:16px;background:#fff;}
.header .navi {position:absolute;top:0;left:0;display:block;height:4px;border-radius:16px;background:#000;}
.header .bar_container {width:calc(100% - 44px);height:48px;padding:22px 0 22px 44px;}

.sub_container { min-height:100%; padding-bottom:64px; } /* 2021-11-28 Q10071: min-height 추가 */
.sub_common_certi .content { padding:24px 24px 0;}
.sub_footer { height:64px; }

/* 주소 검색 */
.sub_find_address .content { padding:24px 24px 0; }
.sub_find_address .sch_result { margin-top:24px; }
.sub_find_address .sch_result [class^="p1_"] + [class^="p2_"] { margin-top:12px; }
.sub_find_address .detail_wrap { display:flex; display:-webkit-flex; flex-direction:column; padding-top:18px; padding-bottom:17px; border-bottom:1px solid rgba(0, 0, 0, 0.08);}
.sub_find_address .detail_wrap p + p { margin-top:4px; }
.sub_find_address .road_name { padding-right:6px; padding-left:6px; border-radius:16px; color:#fff; }

/* popup open */
.modal-open header[data-header="dropdown"],
.modal-open header[data-header="cardDtl"],
.modal-open header.card-detail,
.modal-open header[data-header="dropdownOpt"] { z-index: 1001; }

/* 전체 메뉴 */
.menu_pop .home,
.menu_pop .close {width:32px;height:32px;}
.menu_pop .home > a,
.menu_pop .close > a { display:block; width:32px;height:32px; }
.menu_pop .home > a {  background:url(/docfiles/resources/mo/images/com/icon/w32/ico_home.png) no-repeat 50% 50%; background-size:100% 100%; }
.menu_pop .close > a { background:url(/docfiles/resources/mo/images/com/icon/w32/ico_x_b.png) no-repeat 50% 50%; background-size:100% 100%; }
.menu_pop .menu_top{position:relative;display:flex;align-items:center;justify-content:space-between;height:64px;padding:16px;}
.menu_pop .home img , .menu_pop .close img{display:none;}
.menu_pop{position:fixed;z-index:1005;top:0;display:none;overflow-y:auto;width:100%;height:100%;background:#fff;transition:transform .25s;transform:translateX(-101%);}
.menu_pop.active{transition:transform .25s;transform:translateX(0);}

.menu_pop .menu_all,
.menu_pop .menu_con{ position:absolute; z-index:100; top:64px; bottom:0;overflow-y:auto; width:100%; height:100%; padding-bottom:64px; background:#fff;}
.menu_pop .menu_in{position:relative;padding:11px 24px 20px;}
.menu_pop .menu_in nav{padding-bottom:48px;border-bottom:1px solid #ebebeb;}
.menu_pop .menu_in nav a{display:block;}
.menu_pop .menu_in nav a + a{margin-top:44px;}
.menu_pop .menu_in nav .app{margin-top:16px;}
.menu_pop .menu_btm{padding:32px 24px;background:rgba(0,0,0,.02);}
.menu_pop .menu_btm > ul{display:flex;padding:24px 0;border-bottom:1px solid #ebebeb;}
.menu_pop .menu_btm > ul > li{text-align:center;}
.menu_pop .menu_btm > ul > li + li{margin-left:34px;}
.menu_pop .menu_btm > ul > li .img{display:inline-block;width:56px;height:56px;}
.menu_pop .menu_btm > ul > li .img img{max-width:100%;}
.menu_pop .other{margin-top:24px;}
.menu_pop .other a + a{margin-left:16px;}

/* 2022-02-04 Q10112 : 메뉴(lnb) 펼쳐졌을때 뒤에 스크롤막기 */
body.menu-open .menu_pop.active{overflow:hidden;}
body.menu-open #container{display:none;}
body.menu-open .menu_pop .menu_top{z-index:100;}
body.menu-open .menu_pop .lnb_bg{position:absolute; z-index:99; top:0; left:0; width:100%; height:100%;}

.link_customer a{display:block;margin-top:28px;}
/* s : 2022-07-12 GGU442 */
.chat_banner{position:relative;display:block;padding:18px 0 18px 20px;margin-top:20px;border-radius:8px;background:rgba(0,0,0,.08);} /* 2023-02-07 Q10962 웹접근성 임시조치 */
.chat_banner .textbico_small{background-position:right 95%;}
.chat_box{position:absolute;top:15px;right:60px;display:flex;align-items:center;justify-content:center;width:40px;height:24px;border-radius:8px 8px 0 8px;background:#fff;}
/* .chat_box span{display:block;width:4px;height:4px;border-radius:100%;background:#0070f0;margin:0 4px}
.chat_box:before{content:'';display:block;width:4px;height:4px;border-radius:100%;background:#0070f0;opacity:.3}
.chat_box:after{content:'';display:block;width:4px;height:4px;border-radius:100%;background:#0070f0;opacity:.6} */
.chat_img{position:absolute;right:0;bottom:0;width:48px;height:48px;}
.chat_img img{position:absolute;right:20px;bottom:0;max-width:100%;}
/* e : 2022-07-12 GGU442 */
.main_banner .app_in , .menu_in .app_in{display:flex;}
.main_banner .app_thumb , .menu_in .app_thumb{width:48px;height:48px;margin-right:16px;}
.menu_in .app_thumb img{width:100%;}

/* APP 3.0 지원 */
/* .isApp3 .sub_container { padding-top:48px; } 2021-12-16 Q10071: 여백 이슈로 인해 임시 주석처리 */
/* 2021-12-07 Q10112 : 공통일때 삭제하기 우선 어카운트만 css 재설정함 */

body.modal-open{ position:fixed;overflow:hidden; width:100%;} /*2023-03-30 Q11067 IOS스크롤막기(position:fixed; width:100%;추가)*/

/*
 * Dark Mode
*/
@media (prefers-color-scheme:dark) {
    .header { background-color:#333; /*box-shadow:0 16px 20px 0 rgba(0,0,0,0.16); */}
    /* .header h1 .logo { background-size: 118px 24px; background-image:url(/docfiles/resources/mo/images/com/logo/logo_white.png)} */
    .header h1 a .logo_img > .logo_AoC { background-image: url(/docfiles/resources/mo/images/com/logo/logo_AoC_wht.svg);}
    .header h1 a .logo_img > .logo_HC { background-image: url(/docfiles/resources/mo/images/com/logo/logo_HC_wht.svg);}
    .header .btn_Menu { background-image:url(/docfiles/resources/mo/images/com/icon/w32/ico_menu_wht.png); }
    .header .btn_prev {background-image:url(/docfiles/resources/mo/images/com/icon/w32/ico_arrowB_back_wht.png); }
    .header .btn_close { background-image:url(/docfiles/resources/mo/images/com/icon/w32/ico_x_b_wht.png); }
    .fixed .header{border-bottom-color:transparent;}

    .landing_intro .header {border-bottom-color:rgba(255,255,255,0.16);} /* 2024-03-15 GGU282 - [기타] 보이는 ARS 프로세스 신규 제작(MO) 추가 */
    .landing_intro .header h1:not(.a11y) {background-image:url(/docfiles/resources/mo/images/com/logo/logo_white.png);} /* 2024-05-10 GGU282 - [기타] 보이는 ARS 프로세스 신규 제작(MO) 추가 */

    .menu_pop,
    .menu_pop .menu_all, .menu_pop .menu_con { background-color:#333; }
    .menu_pop .home > a { background-image:url(/docfiles/resources/mo/images/com/icon/w32/ico_home_wht.png); }
    .menu_pop .close > a { background-image:url(/docfiles/resources/mo/images/com/icon/w32/ico_x_b_wht.png); }
    .menu_pop .chat_banner { background-color:rgba(255,255,255,0.04);}
    .menu_pop .menu_btm {background-color:rgba(255,255,255,0.02);}
    .menu_pop .menu_in nav {border-bottom-color:rgba(255,255,255,0.08);}
    .menu_pop .menu_btm > ul {border-bottom-color:rgba(255,255,255,0.08);}
}

/* s : 2022-06-02 GGCN45 : [메인]GNB 내 CI 로고 앱 스플레쉬 영상 교체 요청의 건 : 기존로고 사용시 주석처리 */
/* 2022-06-23 Q20016 두들 비활성화 */
/* .header h1 .logo {
    background-image: url(/docfiles/resources/mo/images/com/logo/logo_hyundaicard_202206.gif) !important;
    background-size: 100% auto !important;
}
@media (prefers-color-scheme:dark) {
    .header h1 .logo {
        background-image: url(/docfiles/resources/mo/images/com/logo/logo_hyundaicard_dark_202206.gif) !important;
    }
} */
/* //2022-06-23 Q20016 두들 비활성화 */
/* e : 2022-06-02 GGCN45 : [메인]GNB 내 CI 로고 앱 스플레쉬 영상 교체 요청의 건 : 기존로고 사용시 주석처리 */

/* 2022-07-12 GGU442 챗봇 스타일 */
.quick {position: fixed; z-index: 21; right: 20px; bottom: 80px; transition: bottom 0.3s ease-in-out, padding 0.3s ease-in-out; } /* 2023-02-07 Q10962 웹접근성 임시조치 */
.quick .chatbot { position:relative;display:table; border-radius:50%; table-layout:fixed; }
.quick .chatbot:not(.ui-draggable-dragging) {transition: top 0.4s ease-out, left 0.4s ease-out;}
.quick .chatbot .commentBox { position:absolute; top:0; right:0; bottom:0;display:block; overflow:hidden; width:55px; height:55px; padding: 0; border: 1px solid #323232; border-radius:50px; background-color:#fff; transition:all 0.3s ease-in-out, box-shadow 1.5s linear; }
.quick .chatbot .commentBox .txt {display:none;}
.quick .chatbot.on .commentBox { right:0;left:auto; width:290px; height:100%;}
.quick .chatbot.on .commentBox .txt { position:absolute; top:50%; right:60px; left:30px;display:block; width:190px; line-height:normal; margin-top:0; color:#000; -ms-transform:translate(0,-50%); transform:translate(0,-50%); text-align:left; white-space:normal; font-size:14px;}
/* 2022-10-26 Q20093 (메인) MO웹 내 챗봇 이미지 원복 요청의 건 11/1 부터 기존 헨리로 교체  */
.quick .chatbot .inner { position:relative; top:0; right: 0;display:block; width:55px; height:55px; border-radius:50%; background: url(/docfiles/resources/mo/images/com/icon/others/icon_henry.png) no-repeat; background-size: contain; }
/* 2022-10-24 Q20093 긴급(메인)MO웹 내 챗봇 이미지 수정 요청의 건 11/1 부터 기존 헨리로 재교체 예정  */
/* .quick .chatbot .inner {display:block; position:relative; width:55px; height:55px; border-radius:50%; background: url(/docfiles/resources/mo/images/com/icon/others/icon_henry02.png) no-repeat; background-size: contain; top:0; right: 0; } */
.quick .removeChat {position: absolute;z-index: 10;top: -34px;right:0;width: 30px;height: 30px;border:0 none;border-radius: 50%;background: url(/docfiles/resources/mo/images/com/icon/others/icon_x.png) no-repeat center center / 30px auto;box-shadow: none;}



/* 2023-02-10 GGCP31 userSkip 추가 */
#userSkip { position: relative; z-index: 3000; }
#userSkip a { position: absolute; top: -200px; left: 0; width: 140px; border: 1px solid #0070f0; background-color: #000; text-align: center; }
#userSkip span { display: inline-block; line-height: 20px; padding: 2px 6px 0 0; color: #fff; white-space: nowrap; font-size: 14px; }

/* 2023-07-11 GGCP31 메인 팝업 스타일 수정. 한시적으로 적용 
2023-07-17 메인팝업 종료로 해당 CSS 주석처리
#popConfirmNotice .layer_head h1 { display: none; }
.main-popup-type1 h3 { font-size: 20px; line-height: 26px; font-weight: bold; text-align: left; }
.modal_pop .main-popup-type1 .layer_btn .box_btn a { border-radius: 8px; border: 0; }
.modal_pop .main-popup-type1 .layer_btn { position: relative; padding: 20px 0 0; }
*/

/*2023-09-12 Q11066: 공지 팝업 내용 이미지로 작업*/
.main-popup-type1.pc {display: none;}
.main-popup-type1.mo {display: block; text-align: left !important;}
/* .main-popup-type1.mo .layer_btn {margin-bottom: -18px;} */
.main-popup-type1.mo .box_btn {float: right !important;width: fit-content !important;}
.modal_pop.modal_alert.modal_notice .layer_head {padding-top: 32px;}


/* 2023-09-26 GGCP31 당구장 표기(※) 추가 */
.useinfo [class^="bul_"][class*="list"] > li.dg_txt {padding-left: 18px;}
.useinfo [class^="bul_"][class*="list"] > li.dg_txt:before { position:absolute; top:0; left:1px; display:inline-block; background: none;content:'※';}
.useinfo ul.dg_list {position: relative;}
.useinfo ul.dg_list > li { position: relative;padding-left: 18px;}
.useinfo ul.dg_list > li:before { position:absolute; top:0; left:1px; display:inline-block;content:'※';}
.useinfo ul.dg_list > li + li {margin-top: 8px;}

/* 2024-03-26 Q20542 단기카드대출(현금서비스) 이용내역 팝업 */
#pointCancleBtn > button{height: 24px;line-height: 14px;padding: 6px 10px;}

/* 2024-04-03 Q20542 내정보관리_내 자산서비스 개인정보 열람 제공내역 */
.flt_none > .divr_txt{float: none !important;}

/* 2024-06-21 Q20542 M혜택_M포인트 교환 서브메인 페이지 및 Gift 카드 구매 UI개선 건 */
.form_items .mpoint_box{ padding: 0 !important;background:#f5f5f5 !important;}

.mpoint_box > dl.list_box.row2{padding: 15px 20px;}
.radio_box.type04 label{height: 64px;}
.radio_box.type04 label:before{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #ebebeb;border-radius:8px;content:'';}
.radio_box.type04 input:checked + label{color:#000;}
.radio_box.type04 input:checked + label:before{border-width:1px;border-color:#000;color:#000;}
.radio_box.col.chk.type04 input + label:after{ position:absolute; top:20px; right:12px; width:24px; height:24px; opacity:0.2; background:url(/docfiles/resources/mo/images/com/icon/w24/ico_check_b.png) no-repeat 50% 50%; background-size:24px 24px;content:'';}
.radio_box.col.chk.type04 input:checked + label:after{ position:absolute; top:20px; right:12px; width:24px; height:24px; opacity: 1; background:url(/docfiles/resources/mo/images/com/icon/w24/ico_check_b.png) no-repeat 50% 50%; background-size:24px 24px;content:'';}

/* 2024-10-25 GGCP31 카카오페이지 로고 추가 */
.kakao_process .header h1 { padding: 0; }
.kakao_process .header h1 .logo { display: block; height: 100%; padding: 12px 0; margin: 0 auto; background: url(/docfiles/resources/mo/images/com/logo/logo_black.png) no-repeat 50% 50%; background-size: 118px 24px; }