@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : common.css
	Company : HanaTI
 	Author : Keonmu, RYU 2019-01 
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, color/font, align, backgroun etc 
--------------------------------------------------------------------------------------------------------------------------------------------*/
.hide {position:absolute;overflow:hidden; width:1px; height:1px; clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);z-index:-1;border:0;}
/* 2024 웹접근성 */
.a11y { display: block !important; padding: 0 !important; margin: 0 !important; position: absolute !important; overflow: hidden !important; height: 1px !important; width: 1px !important; border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; word-break: initial !important; word-wrap: initial !important; }
/* .hide {position:absolute; left:-9999px; top:-9999px; overflow:hidden; width:0; height:0; font-size:0 !important; line-height:0 !important;} */
/* hide {display:block !important; overflow:hidden; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; border:0 !important; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}*/ /* NEW */
.ps_relative {position:relative;}
.ps_fixed {position:fixed !important;}
.roboto {letter-spacing:-0.5px; font-family:'Roboto';}
.transparent {background:transparent !important;}

.pointer {cursor:pointer !important;}

/* Display */
.dis_inline {display:inline !important;}
.dis_inBlock {display:inline-block !important; *display:inline; *zoom:1;}
.dis_block {display:block !important;}
.dis_none {display:none !important;}
.flex {display:flex; flex:1 1 0;}

/* Float */
.fl {float:left !important;}
.fr {float:right !important;}
.cb {clear:both !important;}

.clearfix {*zoom:1;}
.clearfix:after {content:""; display:block; clear:both;}


/* Overflow */
.overHidden {overflow:hidden;}
.scroll {overflow:auto;}
.scrollX {overflow-x:scroll;}
.scrollY {overflow-y:scroll;}


/* Margin */
.inner_24 {margin-left:1.2rem !important; margin-right:1.2rem !important;}
.gut_24 {margin-left:-1.2rem !important; margin-right:-1.2rem !important;}

.mar0    {margin:0px !important;}
.mar_t0  {margin-top:0px !important;}
.mar_t3  {margin-top:0.15rem !important;}
.mar_t5  {margin-top:0.25rem !important;}
.mar_t6  {margin-top:0.3rem !important;}
.mar_t8  {margin-top:0.4rem !important;}
.mar_t10 {margin-top:0.5rem !important;}
.mar_t12 {margin-top:0.6rem !important;}
.mar_t15 {margin-top:0.75rem !important;}
.mar_t16 {margin-top:0.8rem !important;}
.mar_t20 {margin-top:1rem !important;}
.mar_t25 {margin-top:1.25rem !important;}
.mar_t30 {margin-top:1.5em !important;}
.mar_t35 {margin-top:1.75rem !important;}
.mar_t40 {margin-top:2rem !important;}
.mar_t45 {margin-top:2.25rem !important;}
.mar_t50 {margin-top:2.5rem !important;}
.mar_t60 {margin-top:3rem !important;}
.mar_t100 {margin-top:5rem !important;}

.mar_r0  {margin-right:0px !important;}
.mar_r3  {margin-right:0.15rem !important;}
.mar_r5  {margin-right:0.25rem !important;}
.mar_r10 {margin-right:0.5rem !important;}
.mar_r15 {margin-right:0.75rem !important;}
.mar_r20 {margin-right:1rem !important;}
.mar_r30 {margin-right:1.5rem !important;}

.mar_b0  {margin-bottom:0px !important;}
.mar_b3  {margin-bottom:0.15rem !important;}
.mar_b5  {margin-bottom:0.5rem !important;}
.mar_b6  {margin-bottom:0.3rem !important;}
.mar_b8  {margin-bottom:0.4rem !important;}
.mar_b10 {margin-bottom:0.5rem !important;}
.mar_b12 {margin-bottom:0.6rem !important;}
.mar_b15 {margin-bottom:0.75rem !important;}
.mar_b16 {margin-bottom:0.8rem !important;}
.mar_b20 {margin-bottom:1rem !important;}
.mar_b25 {margin-bottom:1.25rem !important;}
.mar_b30 {margin-bottom:1.5rem !important;}
.mar_b35 {margin-bottom:1.75rem !important;}
.mar_b40 {margin-bottom:2rem !important;}
.mar_b45 {margin-bottom:2.25rem !important;}
.mar_b50 {margin-bottom:2.5rem !important;}
.mar_b100 {margin-bottom:5rem !important;}

.mar_l0  {margin-left:0px !important;}
.mar_l1  {margin-left:1px !important;}
.mar_l2  {margin-left:2px !important;}
.mar_l5  {margin-left:0.25rem !important;}
.mar_l10 {margin-left:0.5rem !important;}
.mar_l15 {margin-left:0.75rem !important;}
.mar_l20 {margin-left:1rem !important;}
.mar_l25 {margin-left:1.25rem !important;}
.mar_l30 {margin-left:1.5rem !important;}
.mar_l45 {margin-left:2.25px !important;}
.mar_l60 {margin-left:3rem !important;}
.mar_auto {margin:auto !important;}

/* Padding */
.pd0  {padding:0px !important;}
.pd5  {padding:0.25rem !important;}
.pd10 {padding:0.5rem !important;}
.pd20 {padding:1rem !important;}
.pd30 {padding:1.5rem !important;}

.pd_t0  {padding-top:0px !important;}
.pd_t3  {padding-top:3px !important;}
.pd_t5  {padding-top:0.25rem !important;}
.pd_t6  {padding-top:0.3rem !important;}
.pd_t8  {padding-top:0.4rem !important;}
.pd_t10 {padding-top:0.5rem !important;}
.pd_t12 {padding-top:0.6rem !important;}
.pd_t15 {padding-top:0.75rem !important;}
.pd_t20 {padding-top:1rem !important;}
.pd_t25 {padding-top:1.25rem !important;}
.pd_t30 {padding-top:1.5rem !important;}
.pd_t35 {padding-top:1.75rem !important;}
.pd_t40 {padding-top:2rem !important;}
.pd_t45 {padding-top:2.25rem !important;}
.pd_t50 {padding-top:2.5rem !important;}
.pd_t55 {padding-top:2.75rem !important;}
.pd_t60 {padding-top:3rem !important;}
.pd_t70 {padding-top:3.5rem !important;}

.pd_r0  {padding-right:0.15rem !important;}
.pd_r3  {padding-right:0.15rem !important;}
.pd_r5  {padding-right:0.25rem !important;}
.pd_r10 {padding-right:0.5rem !important;}
.pd_r15 {padding-right:0.75rem !important;}
.pd_r20 {padding-right:1rem !important;}

.pd_b0  {padding-bottom:0px !important;}
.pd_b2  {padding-bottom:2px !important;}
.pd_b5  {padding-bottom:0.25rem !important;}
.pd_b6  {padding-bottom:0.3rem !important;}
.pd_b8  {padding-bottom:0.4rem !important;}
.pd_b10 {padding-bottom:0.5rem !important;}
.pd_b12 {padding-bottom:0.6rem !important;}
.pd_b15 {padding-bottom:0.75rem !important;}
.pd_b20 {padding-bottom:1rem !important;}
.pd_b25 {padding-bottom:1.25rem !important;}
.pd_b30 {padding-bottom:1.5rem !important;}
.pd_b35 {padding-bottom:1.75rem !important;}
.pd_b40 {padding-bottom:2rem !important;}
.pd_b45 {padding-bottom:2.25rem !important;}
.pd_b50 {padding-bottom:2.5rem !important;}

.pd_l0  {padding-left:0px !important;}
.pd_l3  {padding-left:3px !important;}
.pd_l5  {padding-left:0.25rem !important;}
.pd_l10 {padding-left:0.5rem !important;}
.pd_l15 {padding-left:0.75rem !important;}
.pd_l20 {padding-left:1rem !important;}
.pd_l25 {padding-left:1.25rem !important;}
.pd_l30 {padding-left:1.5rem !important;}
.pd_l40 {padding-left:2rem !important;}
.pd_l50 {padding-left:2.5rem !important;}

/* Border Style */
.bor_tnone {border-top:0px !important;}
.bor_rnone {border-right:0px !important;}
.bor_bnone {border-bottom:0px !important;}
.bor_lnone {border-left:0px !important;}
.bor_none  {border:none !important;}

.bor_solid {border:1px solid #eeeeee !important;}
.bor_solid_t {border-top:1px solid #eeeeee !important;}
.bor_solid_r {border-right:1px solid #eeeeee !important;}
.bor_solid_b {border-bottom:1px solid #eeeeee !important;}
.bor_solid_l {border-left:1px solid #eeeeee !important;}

.bor_dotted {border:1px dotted #ddd;}

/*----- Font Style -----*/
/*Font Uppercase*/
.upCase {text-transform:uppercase}

/* IME Mode */
.ime_en {ime-mode:inactive;}
.ime_ko {ime-mode:active;}

/* Font Size */
.fs0 {font-size:0px;}
.fs12 {font-size:0.6rem !important;}
.fs13 {font-size:0.65rem !important;}
.fs14 {font-size:0.7rem !important;}
.fs15 {font-size:0.75rem !important;}
.fs16 {font-size:0.8rem !important;}
.fs18 {font-size:0.9rem !important;}

/* Color */
.gold {color:#c5a143 !important;}
.black {color:#111111 !important;}
.d_black {color:#000000 !important;}
.l_black {color:#333333 !important;}
.grey {color:#666666 !important;}
/* 2024 웹접근성 색상 수정 */
.m_grey {color:#757575 !important;}
.l_grey {color:#7c7c7c !important;}
.white  {color:#ffffff !important;}
.red {color:#dc231e !important;}
.orange {color:#ee6723 !important;}
.purple {/*color:#7c35aa !important;*/ color:#018288 !important;}
.green {color:#009178 !important;}
.bg_green {background:#16a077 !important;}

.bg_darkgray {background:#556b79 !important;}
.bg_gray {background:#f9f9fb !important;}
.bg_eeeeee {background:#eeeeee !important;}
.bg_white {background:#ffffff !important;}
.blue {color:#1F38FF;}

.line {text-decoration:underline;}


/* Line Height */
.lh11 {line-height:11px !important;}
.lh12 {line-height:0.6rem !important;}
.lh13 {line-height:0.65rem !important;}
.lh14 {line-height:0.7rem !important;}
.lh16 {line-height:0.8rem !important;}
.lh20 {line-height:1rem !important;}
.lh24 {line-height:1.2rem !important;}

.lh15p {line-height:1.5 !important;}
.lh16p {line-height:1.6 !important;}


/* Font Weight */
.fb {font-weight:bold !important;}
.fm {font-weight:500 !important;}
.fn {font-weight:normal !important;}

/* Text Align */
.l {text-align:left !important;}
.c {text-align:center !important;}
.r {text-align:right !important;}
.justify {text-align:justify !important;}

.l5 {text-align:left !important; padding-left:0.25rem !important;}
.l10 {text-align:left !important; padding-left:0.5rem !important;}
.l15 {text-align:left !important; padding-left:0.75rem !important;}
.r5 {text-align:right !important; padding-right:0.3125rem !important;}
.r10 {text-align:right !important; padding-right:0.625rem !important;}
.r15 {text-align:right !important; padding-right:0.9375rem !important;}

.t {vertical-align:top !important;}
.m {vertical-align:middle !important;}
.b {vertical-align:bottom !important;}


/* word-break */
.keepall {word-break:keep-all;}
.breakall {word-break:break-all;}


/* width */
.w_auto {width:auto !important;}
.w100 {width:100px !important;}
.w110 {width:110px !important;}
.w120 {width:120px !important;}
.w130 {width:130px !important;}
.w140 {width:140px !important;}
.w150 {width:150px !important;}
.w160 {width:160px !important;}
.w170 {width:170px !important;}
.w180 {width:180px !important;}
.w190 {width:190px !important;}
.w200 {width:200px !important;}
.w320 {width:320px !important;}

.w10p {width:10% !important;}
.w20p {width:20% !important;}
.w30p {width:30% !important;}
.w40p {width:40% !important;}
.w50p {width:50% !important;}
.w60p {width:60% !important;}
.w70p {width:70% !important;}
.w80p {width:80% !important;}
.w90p {width:90% !important;}
.w100p {width:100% !important;}

.sp20 {clear:both; height:1rem; font-size:0; line-height:0;}
.sp30 {clear:both; height:1.5rem; font-size:0; line-height:0;}
.sp50 {clear:both; height:2.5rem; font-size:0; line-height:0;}
.sp60 {clear:both; height:3rem; font-size:0; line-height:0;}

/* flex */
.flex_column {flex-direction:column !important;}
.flex_wrap {flex-wrap:wrap !important;}
.flex_start {justify-content:flex-start !important;}
.flex_center {justify-content:center !important;}
.flex_end {justify-content:flex-end !important;}
.flex_around {justify-content:space-around !important;}
.flex_between {justify-content:space-between !important;}
.flex_evenly {justify-content:space-evenly;}
.cross_start {align-items:flex-start;}
.cross_center {align-items:center !important;}
.cross_end {align-items:flex-end !important;}
.cross_around {align-items:space-around !important;}
.cross_between {align-items:space-between !important;}
.cross_evenly {align-items:space-evenly !important;}

.service_notify {padding:0 1.2rem;}
.service_notify .txt_wrap {display:flex; flex-flow:column; justify-content:center; align-items:center; height:calc(100vh - 5.8rem);}
.service_notify .txt_wrap .tit {display:flex; position:relative; flex-direction:column; justify-content:flex-end; padding-top:11rem; text-align:center;}
.service_notify .txt_wrap .tit:before {content:''; display:block; position:absolute; top:0; left:50%; width:12.35rem; height:9.45rem; background:url('https://sb.hanasavings.com/smartstatic/img/img_app.png') no-repeat center top; background-size:contain; transform:translateX(-50%);}
.service_notify .txt_wrap .tit h2 {font-size:1rem; font-weight:500; line-height:1.3rem; letter-spacing:-1px;} 
.service_notify .txt_wrap .tit h2 > em {font-style:normal; color:#009178;}
.service_notify .txt_wrap .tit p {margin-top:0.4rem; font-size:0.7rem;  color:#666666; line-height:1rem;}
.service_notify .txt_wrap .tit p:first-child{font-size:0.8rem; margin-bottom:0.25rem}
.service_notify .txt_wrap .tit p:first-child > span{font-size:1.2rem; font-weight:500; color:#3691EE}


.product.coupon .info_list > li .info_txt {padding:0 1.2rem;height:3.65rem;}
.product.coupon .info_list > li .info_txt p > button {display:flex;align-items:center;justify-content:space-between;line-height:3.65rem;width:100%;background-color:transparent;font-size:0.8rem; color:#000000;}
.product.coupon .info_list > li .info_txt p > button::after {content:'';background:url('../img/btn_down.png') center no-repeat;background-size:1.2rem auto;width:1.2rem;height:1.2rem;}
.product.coupon .info_list > li.active .info_txt p > button::after {background:url('../img/btn_up_green.png') center no-repeat;background-size:1.2rem auto;}
.product.coupon .info_list > li.active .info_txt p > button {font-weight:500; color:#009178;}

.list_number_circle .txt .bullet_bar li::before{display: none;}
.list_number_circle .txt .bullet_bar li{margin-top: 0.3rem; color: #666;}

/*예담상환_안내팝업*/
.in_popup{position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(34, 34, 34, 0.6); z-index: 999; overflow-y: auto; }
.in_popup_inner {position: fixed; bottom: 0; width: 100%; background-color: #fff; border-top-left-radius: 24px; border-top-right-radius: 24px; }
.in_popup .in_wrap {border-top-left-radius: 24px; border-top-right-radius: 24px; }
.in_title{height:3.4rem; padding:1.1rem 0 0; text-align:center;}
.in_title h2 {display:inline-block; font-size:0.8rem; font-weight: 500; line-height:1.1rem; color:#000000; text-align:center;}
.in_popup_inner button.btn_regipop_close {position:absolute; top:0.9rem; left:0.8rem; z-index:1; width:1.6rem; height:1.6rem; text-indent:-9999px; text-indent:-9999px; background:url('../img/btn_header_close.png') 50% 50% no-repeat; background-size:1.6rem auto;}
.in_popup_con{position: relative; padding: 0 1.2rem; color: #666; line-height: 1.6;}
.in_popup_con p{margin-bottom: 1rem;}
.in_popup_con .list_popup {margin-bottom: 0.5rem;}
.in_popup_con .list_popup li{margin-bottom: 0.5rem; position:relative; padding-left:0.6rem; color:#000; line-height:1rem; word-break:break-all;}
.in_popup_con .list_popup li:after {content:''; display:block; position:absolute; left:0; top:0.4rem; width:4px; height:4px; border-radius:2px; background:#cccccc;}
.in_popup_inner .btn_wrap.double_mix.btn_con{padding: 0 1.2rem 1rem;}