@charset 'UTF-8';

/* --------------------------------------------------------------- *
 * @version : 2.5
 * @date : 2022.05.03
 * @description : 키움증권 마이데이터 모바일 UI/UX CSS
 *
 *  [Table of contents]
 *  Font-face
 *  Page - Normalize
 *  Helper Class
 *  UI Components  
 *  Third party libraries
 *  Page - layout
 *  Page - Elements
 *  Page - ETC
 * --------------------------------------------------------------- */

:root {
    --min-width: 360px;  
    --main-padding: 1.6rem;
    --border-radius: 1.6rem;
    --border-radius-sm: 0.8rem;
    --box-shadow: 0.2rem 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    --box-shadow2: 0 0.7rem 0.9rem 0 rgba(238, 238, 238, 0.3);
    --box-shadow3: 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.12);
    --box-shadow4: 0 0.2rem .8rem 0 rgba(0, 0, 0, 0.08);
    
    --text-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);

    /* Color */
    --c-white: #FFF;
    --c-gray-100: #FAFAFA;
    --c-gray-200: #F5F5F5;
    --c-gray-300: #EEE;
    --c-gray-400: #DDD;
    --c-gray-500: #CCC;
    --c-gray-600: #BBB;
    --c-gray-700: #888;
    --c-gray-800: #616161;
    --c-gray-900: #999999;
    --c-gray-1000: #f7f7f7;
    --c-gray-1100: #646464;
    --c-gray-1200: #f2f2f2;
    --c-gray-1300: #666;
    --c-gray-1300: #888;
    --c-black: #1E1E1E;
    --c-black-200: #212121;
    --c-black-300: #333333;
    --c-black-400: #222222;
    
    --c-primary: #181949;

    --c-num-red: #E6367E;
    --c-num-red-2: #e22d72;
    --c-num-blue: #3C3E90;

    /* Color Set */
    --c-red: #B43A6B;
    --c-pink:#E22D72;
    --c-pink-200:#FF5394;
    --c-lightpink: #fff3fe;
    --c-salmon: #FE6966;
    --c-orange: #FF6E35;
    --c-orange-200: #FF5353;
    --c-tangerine: #ff9900;    
    --c-yellow: #FFCF11;
    --c-yellow-200: #ffea98;
    --c-green: #62C626;
    --c-blue:#2E82CA;
    --c-blue-200: #528ee2;
    --c-blue-300: #1c4fde;
    --c-lightblue: #eff6ff;
    --c-mint: #53BBA5;
    --c-purple: #7551AA;
    --c-darkblue:#4152A2;
    --c-darkblue-200: #5676cd;
    --c-navy:#353d4a;
    --c-navy-2:#32349a;

    --gradient1 : linear-gradient(136deg, #30b596 -5%, #2e7cb8 101%);
    --gradient2 : linear-gradient(136deg, #527dc9 -5%, #3556b2 106%);
    --gradient3 : linear-gradient(136deg, #4e4ac8 -5%, #8934b2 104%);

    /* Font Size */
    --fs-xs: 1rem;
    --fs-sm: 1.2rem;
    --fs-sm-2: 1.3rem;
    --fs-df: 1.4rem;
    --fs-md: 1.6rem;
    --fs-lg: 1.8rem;
    --fs-xl: 2rem;
    --fs-2xl: 2.4rem;
    --fs-2xl-2: 2.8rem;
    --fs-3xl: 3rem;
    --fs-4xl: 3.4rem;
    --fs-5xl: 4.4rem;
    --fs-5xl-2: 4.6rem;
    --fs-6xl: 4.8rem;
}

/* --------------------------------------------------------------- *
 *  Font-face
 * --------------------------------------------------------------- */
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 300;
    font-display: swap;
    src: local('Spoqa Han Sans Neo Light'),
        url('../font/SpoqaHanSansNeo-Light.woff2') format('woff2'),
        url('../font/SpoqaHanSansNeo-Light.woff') format('woff');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    font-display: swap;
    src: local('Spoqa Han Sans Neo Regular'),
        url('../font/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
        url('../font/SpoqaHanSansNeo-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    font-display: swap;
    src: local('Spoqa Han Sans Neo Medium'),
        url('../font/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
        url('../font/SpoqaHanSansNeo-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    font-display: swap;
    src: local('Spoqa Han Sans Neo Bold'),
        url('../font/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
        url('../font/SpoqaHanSansNeo-Bold.woff') format('woff');
}

/* 22.09.01 */
@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    font-display: swap;
    src: local('Roboto Regular'),
        url('../font/Roboto-Regular.woff2') format('woff2'),
        url('../font/Roboto-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    font-display: swap;
    src: local('Roboto Medium'),
        url('../font/Roboto-Medium.woff2') format('woff2'),
        url('../font/Roboto-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    font-display: swap;
    src: local('Roboto Bold'),
        url('../font/Roboto-Bold.woff2') format('woff2'),
        url('../font/Roboto-Bold.woff') format('woff');
}

@font-face { 
    font-family: 'NanumPenScript-Regular';
    src: local('NanumPenScript-Regular'),
    url('../font/NanumPenScript-Regular.woff2') format('woff2'),
    url('../font/NanumPenScript-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

/* --------------------------------------------------------------- *
 *  Page - Normalize
 * --------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch !important;
}

html {
    font-size: 62.5%;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    width: 100vw;
    min-width: var(--min-width);
    min-height: 100vh;
    font-family: 'Spoqa Han Sans Neo', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--c-black);
    letter-spacing: -0.03rem;
    /* overflow: auto; */
}
body.fixed { position: fixed; }
/* body.fixed .page-wrapper.main, body.fixed .sub main { overflow-y: hidden !important; } */ /* 220818 */

:focus { outline: none; }
::placeholder { color: var(--c-gray-500); }

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, q,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
figure, figcaption, footer, header, hgroup,
menu, nav, section, summary,
mark, audio, video {
	margin: 0;
	padding: 0;
    border: 0;
}

img,
video {
    width: 100%;
    vertical-align: middle;
}

a:not([class]) { text-decoration-skip-ink: auto; }
a { -webkit-tap-highlight-color: transparent; }
a.non-style { text-decoration: none; color: #1E1E1E;}
ul,
ol { list-style: none; }

em,
address { font-style: normal; }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    color: var(--c-black);
    line-height: normal;
    margin: 0;
}

/* --------------------------------------------------------------- *
 *  Helper Class
 * --------------------------------------------------------------- */
.sr-only {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: -1px;
}
.ellipsis {
    display: block !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.ellipsis2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
}

.cancel-line { 
    text-decoration: line-through;
    color: var(--c-gray-800); 
} 

.cursor-pointer {
    cursor: pointer;
}
.border-1 {border-width: 1px !important;}
.border-gray { border-color: var(--c-gray-700) !important; }
.border-light-gray { border-color: var(--c-gray-300) !important; }
.border-lightgray { border-color: var(--c-gray-300) !important; }
.border-lightgray2 { border-color: var(--c-gray-400) !important; }
.border-purple { border-color: #9091b1 !important; }
.border-navy { border-color: var(--c-primary) !important; }

.border-top { border-top: 1px solid var(--c-gray-300); }
.border-bottom { border-bottom: 1px solid var(--c-gray-300); }
.border-left { border-left: 1px solid var(--c-gray-300); }
.border-right { border-right: 1px solid var(--c-gray-300); }
.border-top-black { border-top: 1px solid var(--c-black); }
.border-top-alpha { border-top: 1px solid rgba(0,0,0,0.15); }
.border-left-alpha { border-left: 1px solid rgba(0,0,0,0.15); }
[class*='py'].border + [class*='py'].border { border-top: 1px solid var(--c-gray-300); }
.border-n { border: 0 none !important; }
.box-shadow { box-shadow: var(--box-shadow) !important; }
.box-shadow2 { box-shadow: var(--box-shadow2) !important; }
.box-shadow3 { box-shadow: var(--box-shadow3) !important; }

.text-shadow { text-shadow: var(--text-shadow) !important; }

.fc-white { color: var(--c-white) !important; } 
.fc-black { color: var(--c-black) !important; }
.fc-black2 { color: var(--c-black-200) !important; }
.fc-black3 { color: var(--c-black-300) !important; }
.fc-black4 { color: var(--c-black-400) !important; }
.fc-gray-l { color: var(--c-gray-600) !important; }
.fc-gray { color: var(--c-gray-700) !important; }
.fc-gray-d { color: var(--c-gray-800) !important; }
.fc-gray-2 { color: var(--c-gray-900) !important; }
.fc-gray-3 { color: var(--c-gray-400) !important; }
.fc-gray-3 { color: var(--c-gray-1300) !important; }
.fc-primary { color: var(--c-primary) !important; }

.fc-pink { color: var(--c-pink) !important; }
.fc-pink-2 { color: var(--c-pink-200) !important; }
.fc-red { color: var(--c-red) !important; }
.fc-blue { color: var(--c-blue) !important; }
.fc-blue-2 { color: var(--c-blue-200) !important; }
.fc-blue-3 { color: var(--c-blue-300) !important; }
.fc-darkblue { color: var(--c-darkblue) !important; }
.fc-darkblue-2 { color: var(--c-darkblue-200) !important; }
.fc-green { color: var(--c-green) !important; }
.fc-mint { color: var(--c-mint) !important; }
.fc-purple { color: var(--c-purple) !important; }
.fc-orange { color: var(--c-orange) !important; }
.fc-orange2 { color: var(--c-orange-200) !important; }
.fc-yellow { color: var(--c-yellow) !important; }
.fc-yellow2 { color: var(--c-yellow-200) !important; }
.fc-tangerine { color: var(--c-tangerine) !important; }
.fc-navy {color: var(--c-navy) !important;}

.fc-num-red { color: var(--c-num-red) !important; }
.fc-num-blue { color: var(--c-num-blue) !important; }

.opacity-02 { opacity: 0.2; }
.opacity-04 { opacity: 0.4; }
.opacity-07 { opacity: 0.7; }

.bg-white { background-color: var(--c-white) !important; }
.bg-white2 { background-color: var(--c-gray-100) !important; }
.bg-primary { background-color: var(--c-primary) !important; }
.bg-pink { background-color: var(--c-pink) !important; }
.bg-gray-l { background-color: var(--c-gray-200) !important; }
.bg-gray { background-color: var(--c-gray-300) !important; }
.bg-gray-d { background-color: var(--c-gray-500) !important; }
.bg-gray-n { background-color: var(--c-gray-1000) !important; }
.bg-blue { background-color: var(--c-blue) !important; } 
.bg-blue-2 { background-color: var(--c-blue-200) !important; } 
.bg-purple { background-color: var(--c-purple) !important; }
.bg-black-02 { background: rgba(0, 0, 0, 0.2) !important; }
.bg-purple-02 { background-color:var(--c-red) !important;}
.bg-lightpink { background-color: var(--c-lightpink); }
.bg-lightblue { background-color: var(--c-lightblue); }

/* Extra Color Set */ 
.bg-ex-red { background-color: #f56c6c !important; }
.bg-ex-purple2 { background-color: #644591 !important; }
.bg-ex-purple3 { background-color: #353967 !important; }
.bg-ex-gray { background-color: #7e8692 !important; }
.bg-ex-brown { background-color: #8a7256 !important; }
.bg-ex-blue { background-color: #4b5ac1 !important; }
.bg-ex-blue3 { background-color: #2969ba !important; }
.bg-ex-blue4 { background-color: #f3f5fa !important; }
.bg-ex-blue5 { background-color: #f2f7fc !important; }
.bg-ex-blue6 { background-color: #f4f7fb !important; }
.bg-ex-green { background-color: #51ae55 !important; }
.bg-ex-green2 { background-color: #708a56 !important; }
.bg-ex-green3 { background-color: #59c39b !important; }
.bg-ex-green4 { background-color: #f7ffe8 !important; }
.bg-ex-pink { background-color: #ffeef4 !important; }
.bg-ex-navy { background-color: #353d4a !important; }
.bg-ex-mint { background-color: #30b0ac !important; }
.bg-ex-black { background-color: #2d2f38 !important; }
.bg-ex-pink-l { background-color: #faf2f2 !important; }
.bg-ex-yellow-l { background-color: #fef7ea !important; }
.bg-ex-green-l { background-color: #f2faf6 !important; }
.bg-ex-blue-l { background-color: #eaf3fe !important; }
.bg-ex-blue-l2 { background-color: #e9efff !important; }

.bg-ex-card1 { background-color: #49b3db !important; }
.bg-ex-card2 { background-color: #4988db !important; }
.bg-ex-card3 { background-color: #4966db !important; }
.bg-ex-card4 { background-color: #713dcb !important; }

.bg-gradient {background: linear-gradient(to right, #373398, #e22d72);}

.score_up { color: var(--c-pink) !important; }
.score_down { color: var(--c-navy-2) !important; }

.fs-xs { font-size: var(--fs-xs) !important; }
.fs-sm { font-size: var(--fs-sm) !important; }
.fs-sm-2 { font-size: var(--fs-sm-2) !important; }
.fs-df { font-size: var(--fs-df) !important; }
.fs-md { font-size: var(--fs-md) !important; }
.fs-lg { font-size: var(--fs-lg) !important; }
.fs-xl { font-size: var(--fs-xl) !important; }
.fs-2xl { font-size: var(--fs-2xl) !important; }
.fs-2xl-2 { font-size: var(--fs-2xl-2) !important; }
.fs-3xl { font-size: var(--fs-3xl) !important; }
.fs-4xl { font-size: var(--fs-4xl) !important; }
.fs-5xl { font-size: var(--fs-5xl) !important; }
.fs-5xl-2 { font-size: var(--fs-5xl-2) !important; }
.fs-6xl { font-size: var(--fs-6xl) !important; }

.fw-l { font-weight: 300 !important; }
.fw-r { font-weight: 400 !important; }
.fw-m { font-weight: 500 !important; }
.fw-b { font-weight: 700 !important; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.position-right-center {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    z-index: 1;
}

.overflow-hidden { overflow: hidden; }
.overflow-unset { overflow: unset !important; }
.overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.overflow-x::-webkit-scrollbar { display: none; }
.overflow-y { overflow-y: auto !important; }

.d-none { display: none !important; }
.d-inline-block {display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.d-flex-start {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
}
.d-flex-center {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.d-flex-between {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.justify-content-between {justify-content: space-between !important;}
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }

.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-shrink0 { flex-shrink: 0 !important; }
.flex-shrink1 { flex-shrink: 1 !important; }

.line-height-1 { line-height: 1; }
.line-height-ex { line-height: 1.33 !important; }
.line-height-md { line-height: 1.5; }
.line-height-2 { line-height: 2; }

.bdrs8 { border-radius: 8px !important; }
.bdrs10 { border-radius: 10px !important; }
.bdrs16 { border-radius: 16px !important; }
.bdrs20 { border-radius: 20px !important; }

.p0 { padding: 0 !important; }
.p5 { padding: 0.5rem !important; }
.p10 { padding: 1rem !important; }
.p16 { padding: 1.6rem !important; }
.p20 { padding: 2rem !important; }
.p25 { padding: 2.5rem !important; }
.p30 { padding: 3rem !important; }
.p40 { padding: 4rem !important; }
.p50 { padding: 5rem !important; }

.pt0 { padding-top: 0 !important; }
.pt5 { padding-top: 0.5rem !important; }
.pt8 { padding-top: 0.8rem !important; }
.pt10 { padding-top: 1rem !important; }
.pt15 { padding-top: 1.5rem !important; }
.pt16 { padding-top: 1.6rem !important; }
.pt20 { padding-top: 2rem !important; }
.pt24 { padding-top: 2.4rem !important; }
.pt25 { padding-top: 2.5rem !important; }
.pt30 { padding-top: 3rem !important; }
.pt40 { padding-top: 4rem !important; }
.pt50 { padding-top: 5rem !important; }
.pt60 { padding-top: 6rem !important; }
.pt80 { padding-top: 8rem !important; }
.pt90 { padding-top: 9rem !important; }
.pt110 { padding-top: 11rem !important; }

.pb0 { padding-bottom: 0 !important; }
.pb5 { padding-bottom: 0.5rem !important; }
.pb10 { padding-bottom: 1rem !important; }
.pb15 { padding-bottom: 1.5rem !important; }
.pb16 { padding-bottom: 1.6rem !important; }
.pb20 { padding-bottom : 2rem !important; }
.pb24 { padding-bottom : 2.4rem !important; }
.pb25 { padding-bottom : 2.5rem !important; }
.pb26 { padding-bottom : 2.6rem !important; }
.pb30 { padding-bottom : 3rem !important; }
.pb32 { padding-bottom : 3.2rem !important; }
.pb40 { padding-bottom: 4rem !important; }
.pb50 { padding-bottom: 5rem !important; }
.pb60 { padding-bottom: 6rem !important; }
.pb65 { padding-bottom: 6.5rem !important; }
.pb72 { padding-bottom: 7.2rem !important; }
.pb90 { padding-bottom: 9rem !important; }
.pb115 { padding-bottom: 11.5rem !important; }

.pl0, .px0 { padding-left: 0 !important; }
.pl4 { padding-left: 0.4rem !important; }
.pl5 { padding-left: 0.5rem !important; }
.pl10, .px10 { padding-left: 1rem !important; }
.pl15 { padding-left: 1.5rem !important; }
.pl20, .px20 { padding-left: 2rem !important; }
.px16 { padding: 0 1.6rem !important; }
.px24 { padding: 0 2.4rem !important; }
.px24-2 { padding-left: 2.4rem !important; padding-right: 2.4rem !important;}
.pl30, .px30 { padding-left: 3rem !important; }
.pl45 { padding-left: 4.5rem !important; }
.pl55 { padding-left: 5.5rem !important; }

.pr0, .px0 { padding-right: 0 !important; }
.pr5 { padding-right: 0.5rem !important; }
.pr10, .px10 { padding-right: 1rem !important; }
.pr20, .px20 { padding-right: 2rem !important; }
.pr25, .px25 { padding-right: 2.5rem !important; }
.pr30, .px30 { padding-right: 3rem !important; }
.pr28 { padding-right: 2.8rem !important; }
.px32 { padding: 0 3.2rem !important; }

/* 상하단 여백이 있는 Content box */
.py0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.py0 + .py0 { margin-top: 2rem; }
.py2 { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
.py3 { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
.py10 {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}
.py13 {
    padding-top: 1.3rem !important;
    padding-bottom: 1.3rem !important;
}
.py15 {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}
.py16 {
  padding-top: 1.6rem !important;
  padding-bottom: 1.6rem !important;
}
.py17 {
  padding-top: 1.7rem !important;
  padding-bottom: 1.7rem !important;
}
.py20 {
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
}
.py24 {
    padding-top: 2.4rem !important;
    padding-bottom: 2.4rem !important;
}
.py25 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
.py28 {
    padding-top: 2.8rem !important;
    padding-bottom: 2.8rem !important;
}
.py30 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.py37 {
    padding-top: 3.7rem !important;
    padding-bottom: 3.7rem !important;
}
.py40 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.py50 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
.py60 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}
.px-padding {
    padding-left: var(--main-padding) !important;
    padding-right: var(--main-padding) !important;
}
.px-padding2 { padding: 0.3rem var(--main-padding) 0.7rem;}
.d-flex.px-padding::after,
.d-flex.px-padding2::after {
    content: '';
    flex: 0 0 var(--main-padding);
    width: 100%;
}

.m0 { margin: 0 !important; }
.m0a { margin: 0 auto !important; }

.mt0 { margin-top: 0 !important; }
.mt3 { margin-top: 0.3rem !important; }
.mt4 { margin-top: 0.4rem !important; }
.mt5 { margin-top: 0.5rem !important; }
.mt8 { margin-top: 0.8rem !important; }
.mt9 { margin-top: 0.9rem !important; }
.mt10 { margin-top: 1rem !important; }
.mt12 { margin-top: 1.2rem !important; }
.mt13 { margin-top: 1.3rem !important; }
.mt14 { margin-top: 1.4rem !important; }
.mt15 { margin-top: 1.5rem !important; }
.mt16 { margin-top: 1.6rem !important; }
.mt20 { margin-top: 2rem !important; }
.mt24 { margin-top: 2.4rem !important; }
.mt25 { margin-top: 2.5rem !important; }
.mt28 { margin-top: 2.8rem !important; }
.mt30 { margin-top: 3rem !important; }
.mt32 { margin-top: 3.2rem !important; }
.mt34 { margin-top: 3.4rem !important; }
.mt38 { margin-top: 3.8rem !important; }
.mt40 { margin-top: 4rem !important; }
.mt48 { margin-top: 4.8rem !important; }
.mt50 { margin-top: 5rem !important; }
.mt60 { margin-top: 6rem !important; }
.mt70 { margin-top: 7rem !important; }
.mt80 { margin-top: 8rem !important; }
.mt100 { margin-top: 10rem !important; }

.mb0 { margin-bottom: 0 !important; }
.mb2 { margin-bottom: 0.2rem !important; }
.mb3 { margin-bottom: 0.3rem !important; }
.mb5 { margin-bottom: 0.5rem !important; }
.mb7 { margin-bottom: 0.7rem !important; }
.mb10 { margin-bottom: 1rem !important; }
.mb12 { margin-bottom: 1.2rem !important; } /* 240724 css 추가 */
.mb15 { margin-bottom: 1.5rem !important; }
.mb20 { margin-bottom: 2rem !important; }
.mb25 { margin-bottom: 2.5rem !important; }
.mb30 { margin-bottom: 3rem !important; }
.mb40 { margin-bottom: 4rem !important; }
.mb45 { margin-bottom: 4.5rem !important; }
.mb50 { margin-bottom: 5rem !important; }
.mb60 { margin-bottom: 6rem !important; }
.mb90 { margin-bottom: 9rem !important; }

.ml0 { margin-left: 0 !important; }
.ml5 { margin-left: 0.5rem !important; }
.ml6 { margin-left: 0.6rem !important; }
.ml10 { margin-left: 1rem !important; }
.ml12 { margin-left: 1.2rem !important; }
.ml15 { margin-left: 1.5rem !important; }
.ml16 { margin-left: 1.6rem !important; }
.ml20 { margin-left: 2rem !important; }
.ml46 { margin-left: 4.6rem !important; }
.ml53 { margin-left: 5.3rem !important; }

.mr4 { margin-right: 0.4rem !important; }
.mr5 { margin-right: 0.5rem !important; }
.mr6 { margin-right: 0.6rem !important; }
.mr8 { margin-right: 0.8rem !important; }
.mr10 { margin-right: 1rem !important; }
.mr15 { margin-right: 1.5rem !important; }
.mr16 { margin-right: 1.6rem !important; }
.mr25 { margin-right: 2.5rem !important; }

.mx10 { margin-right: 1rem !important; margin-left: 1rem !important;}
.ml-auto, .mx-auto { margin-left: auto !important; }
.mr-auto, .mx-auto { margin-right: auto !important; }

.w-full {
    margin-left: calc(-1 * var(--main-padding));
    margin-right: calc(-1 * var(--main-padding));
}
.w-full-20 {
    margin-left: -2rem;
    margin-right: -2rem;
}

.w12 { width: 1.2rem !important; }
.w18 { width: 1.8rem !important; }
.w20 { width: 2rem !important; }
.w30 { width: 3rem !important; }
.w40 { width: 4rem !important; }
.w45 { width: 4.5rem !important; }
.w48 { width: 4.8rem !important; }
.w50 { width: 5rem !important; }
.w55 { width: 5.5rem !important; }
.w60 { width: 6rem !important; }
.w68 { width: 6.8rem !important; }
.w70 { width: 7rem !important; }
.w76 { width: 7.6rem !important; }
.w80 { width: 8rem !important; }
.w90 { width: 9rem !important; }
.w100 { width: 10rem !important; }
.w110 { width: 11rem !important; }
.w130 { width: 13rem !important; }
.w140 { width: 14rem !important; }
.w150 { width: 15rem !important; }
.w155 { width: 15.5rem !important; }
.w180 { width: 18rem !important; }
.w200 { width: 20rem !important; }
.w220 { width: 22rem !important; }
.w230 { width: 23rem !important; }
.w240 { width: 24rem !important; }
.w280 { width: 28rem !important; }
.w290 { width: 29rem !important; }

.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.mw-50 { min-width: 50% !important; }

.h30 { height: 3rem !important; }
.h34 { height: 3.4rem !important; }
.h36 { height: 3.6rem !important; }
.h40 { height: 4rem !important; }
.h48 { height: 4.8rem !important; }
.h50 { height: 5rem !important; }
.h60 { height: 6rem !important; }
.h66 { height: 6.6rem !important; }
.h70 { height: 7rem !important; }
.h72 { height: 7.2rem !important; }
.h80 { height: 8rem !important; }
.h85 { height: 8.5rem !important; }
.h90 { height: 9rem !important; }
.h100 { height: 10rem !important; }
.h110 { height: 11rem !important; }
.h130 { height: 13rem !important; }
.h150 { height: 15rem !important; }
.h160 { height: 16rem !important; }
.h180 { height: 18rem !important; }
.h200 { height: 20rem !important; }
.h300 { height: 30rem !important; }

.h-40 { height: 40% !important; }
.h-50 { height: 50% !important; }
.h-100 { height: 100% !important; }
.h-100vh { height: 100vh !important; }

.x-h260 { max-height: 26rem !important; }
.x-h280 { max-height: 28rem !important; }

.mh-a { min-height: auto !important; }

.no-gap > * { margin: 0 !important; } 

.divide-bar::before {
    content: '';
    display: inline-block;
    width: 0.1rem;
    height: 0.8em;
    background-color: #ddd;
    margin: 0 0.8em;
}
.divide-bar2::before {
    content: '';
    display: inline-block;
    width: 0.1rem;
    height: 1.1rem;
    background-color: #ccc;
    margin: 0 0.4rem;
    vertical-align: middle;
}
.letter-zero {
    letter-spacing: 0.10rem !important;
}
.letter0 {
    letter-spacing: 0 !important;
}
.text-underline {
    text-decoration: underline !important;
}
.position-right {
    position: absolute !important;
    right: 1.6rem;
}
.vertical-middle {
    vertical-align: middle;
}
  
/* @media (prefers-color-scheme: dark) {
    body { background-color: #1e1e1e; color: #fff; }
} */

/* --------------------------------------------------------------- *
 *  UI Components
 * --------------------------------------------------------------- */
 /* Typography */
.main-title {
    font-size: var(--fs-xl);
    font-weight: 500;
    letter-spacing: -0.05rem;
    line-height: 1.6;
}

/* sub link */
.sub-link,
.text-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
}
a.sub-link.disabled,
a.text-link.disabled {
    color: var(--c-gray-400) !important;
    cursor: not-allowed;
    pointer-events: none;
}
a.sub-link:link,
a.sub-link:visited,
a.text-link:link,
a.text-link:visited { color: inherit; }
.text-link.underline { text-decoration: underline; }
.text-link.custom-underline::before {
    content: '';
    position: absolute;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 1px;
    background-color: var(--c-black);
}
.sub-link.sub-icon-link { padding-right: 1em; }
.sub-link.sub-icon-link.d-block,
.sub-link.sub-icon-link.d-flex { width: 100%; }
.sub-link.sub-icon-link::after,
.sub-link.sub-icon-more::after {
    content: '';
    position: absolute;
    top: calc(50% - 0.5em);
    right: 0;
    width: 1em;
    height: 1em;
    background: url(../new_images/icons/ico_arrow_right.svg) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}
.sub-link.sub-icon-link.depth::after {
    background-image: url('../new_images/icons/ico_arrow_right_gray.png');
}
.sub-link.sub-icon-link.depth.po-r::after {
    right: 1.5rem;
}
.sub-link.sub-icon-link.fc-white::after,
.sub-link.sub-icon-more.fc-white::after { 
    -webkit-filter: brightness(100);
    filter: brightness(100);
}
.sub-link.sub-icon-link.fc-gray::after,
.sub-link.sub-icon-more.fc-gray::after { 
    -webkit-filter: opacity(20%);
    filter: opacity(20%);
}
.sub-link.sub-icon-link.fs-sm.fc-gray::after,
.sub-link.sub-icon-more.fs-sm.fc-gray::after { 
    filter: none;
}
.sub-link.sub-icon-link.d-block::after,
.sub-link.sub-icon-link.d-flex::after {
    top: calc(50% - 0.9rem);
    width: 1.8rem;
    height: 1.8rem;
}
.sub-link.sub-icon-link.left::after {  /* 22.08.23 */
    left: 0;
    transform: rotate(180deg); 
}
.sub-link.sub-icon-link.fw-b::after { background-image: url(../new_images/icons/ico_arrow_right2.svg); }
.sub-link.sub-icon-more {
    font-size: var(--fs-sm);
    font-weight: 400;
    padding: 0.6rem 1.4em;
}
.sub-link.sub-icon-link-padding::after {
    right: 2.4rem;
}
.sub-link.sub-icon-more::after {
    top: calc(50% - 0.6em);
    width: 1.2em; 
    height: 1.2em;
    transform: rotate(90deg);
}
.sub-link.sub-icon-more.down::after { transform: rotate(270deg); }
.sub-link.chk-type {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 7.8rem;
    font-size: var(--fs-df);
    font-weight: 500;
    letter-spacing: -0.05rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--c-black);
    background-color: transparent;
    border: 0;
    border-radius: var(--border-radius-sm);
    padding: 1.5rem var(--main-padding); 
}
.sub-link.chk-type.selected,
.sub-link.chk-type:active { background-color: var(--c-gray-200); }
.sub-link.chk-type.selected::after,
.sub-link.chk-type:active::after {
    content: '';
    position: absolute;
    top: calc(50% - 0.5em);
    right: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../new_images/icons/ico_checked.svg) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}
.copy-link {
    display: inline-block;
    color: var(--c-gray-700);
    text-decoration: none;
}
.copy-link:after {
    content: '';
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    background: url(../new_images/icons/ico_copy.png) no-repeat;
    background-size: cover;
    vertical-align: middle;
    margin: -0.2rem 0 0 0.6rem;
}

.text-link[class*='text-icon-'] {
    display: inline-flex;
    align-items: center;
}
.text-link[class*='text-icon-']::before {
    content: '';
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
[class*='icon-add']::before { background-image: url(../new_images/icons/ico_add.svg); }
[class*='btn-dashed']::before { background-image: url(../new_images/icons/ico_plus_round.svg); }
.text-link.text-icon-won::before { background-image: url(../new_images/icons/ico_won_round.svg); }
[class*='icon-refresh']::before { background-image: url(../new_images/icons/ico_refresh.svg); }

.icon-reset::before {
    content: '';
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin-right: .4rem;
    background: url('../new_images/icons/icon_reset.png') no-repeat center / 1.8rem 1.8rem;
}
/* GRID BOX */
.grid-box { 
    display: grid;
    width: 100%;
}
.grid-box.col-2 { grid-template-columns: repeat(2, minmax(50%, 1fr)); }
.grid-box.col-3 { grid-template-columns: repeat(3, minmax(33.3%, 1fr)); }
.grid-box.col-4 { grid-template-columns: repeat(4, minmax(25%, 1fr)); }
.grid-box.col-5 { grid-template-columns: repeat(5, minmax(20%, 1fr)); }

.grid-box.col-2 > *:nth-child(2n + 1),
.grid-box.col-3 > *:nth-child(3n + 1),
.grid-box.col-4 > *:nth-child(4n + 1),
.grid-box.col-5 > *:nth-child(5n + 1) { margin-left: 0 !important; } 

.grid-box.col-2 > *:nth-child(n + 3),
.grid-box.col-3 > *:nth-child(n + 4),
.grid-box.col-4 > *:nth-child(n + 5),
.grid-box.col-5 > *:nth-child(n + 6) { margin-top: 1rem; }


/* 2023-10-16 dash 추가  */
.grid-box.col-2-persnal { grid-template-columns:1fr 2.1rem 1fr; }
.grid-box.col-2-persnal .dash-line{position: relative; display: block;}
.grid-box.col-2-persnal .dash-line:after{content:""; display: block; position: absolute; left: 50%; bottom: 2rem; transform:translateX(-50%); width: .7rem; height: .2rem; background: var(--c-black);}
.grid-box.col-2-persnal .list-bullet{position: relative;}
.grid-box.col-2-persnal .list-bullet ul{position: absolute; left: 1.3rem; bottom: 1.2rem;}
.grid-box.col-2-persnal .list-bullet ul:after{content:"";display: block;clear: both;}
.grid-box.col-2-persnal .list-bullet ul li{float: left; font-size: 1.2rem; margin-right: .3rem; color: var(--c-gray-600);}
.grid-box.col-2-persnal .list-bullet ul.active li{color: var(--c-black);}

/* Bullet */
.bullet,
.bullet-list > li {
    position: relative;
    font-size: var(--fs-sm);
    color: var(--c-gray-700);
}
.bullet::before,
.bullet-list > li::before {
    content: '';
    position: absolute;
    left: 0;    
    background-color: var(--c-gray-600);
    background-repeat: no-repeat;
    background-size: cover;
}
.bullet-list.type-02 > li {
    position: relative;
    font-size: var(--fs-sm);
    color: var(--c-gray-700);
    line-height: 2rem;
}
.bullet-list.type-03 > li {
    position: relative;
    font-size: var( --fs-default);
    color: var(--c-gray-700);
    line-height: 2rem;
}
.bullet-list.type-02 > li::before {
    content: '';
    position: absolute;
    left: 0;    
    background-color: var(--c-gray-600);
    background-repeat: no-repeat;
    background-size: cover;
}
.bullet.type-04::before,
.bullet-list.type-04 > li::before {
    background-color: #666;
}
.bullet.bullet-dot2::before {
    background-color: var(--c-white);
}
.bullet-list > li::before
.bullet-list.fs-df > li { font-size: var(--fs-df); }

.bullet-list ul,
.bullet-list + .bullet-list,
.bullet-list > li + li,
.bullet-list + [id*='collapse_'] > .bullet-list { margin-top: 0.7rem; }

.bullet.bullet-dot,
.bullet-list.bullet-dot > li,
.bullet-list.bullet-dash > li { padding-left: 0.8em; }
.bullet.bullet-noti,
.bullet-list.bullet-noti > li { padding-left: 1.3em; }
.bullet.bullet-noti2,
.bullet-list.bullet-noti2 > li  { padding-left: 1.8em; }
.bullet.bullet-check,
.bullet-list.bullet-check > li  { padding-left: 2.5em;color: var(--c-black); }

.bullet.bullet-dot::before,
.bullet-list.bullet-dot > li::before {
    top: 0.5em;
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    border-radius: 50%;
}
.bullet-list.bullet-dash > li::before,
.bullet.bullet-dash::before {
    top: 0.6em;
    width: 0.4em;
    height: 1px;
    background: var(--c-gray-700);
}

.bullet.bullet-noti::before,
.bullet-list.bullet-noti > li::before {
    top: 0.2em;
    width: 1em;
    height: 1em;
    background-image: url(../new_images/icons/ico_noti.svg);
    border-radius: 50%;
}
.bullet.bullet-noti.fc-pink::before,
.bullet-list.bullet-noti > li.fc-pink::before { background-color: var(--c-pink); }

.bullet.bullet-noti2::before,
.bullet-list.bullet-noti2 > li::before {
    width: 1.5em;
    height: 1.3em;
    background-color: transparent;
    background-image: url(../new_images/icons/ico_noti2.svg);
}
.bullet.bullet-noti2.fc-pink::before,
.bullet-list.bullet-noti2 > li.fc-pink::before { background-image: url(../new_images/icons/ico_noti2.svg); }

.bullet.bullet-check::before,
.bullet-list.bullet-check > li::before {
    width: 1.7em;
    height: 1.2em;
    background-color: transparent;
    background-image: url(../new_images/icons/ico_checked.svg);
}

/* custom-badge */
.custom-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.8rem;
    height: 1.8rem;
    font-size: var(--fs-xs);
    background-color: var(--c-pink);
    color: var(--c-white);
    line-height: 1;
    border-radius: 50%;
    text-align: center;
}
.custom-badge.badge-lg {
    width: 3rem;
    height: 3rem;
    font-size: var(--fs-md);
}
.custom-badge.badge-lg2 {
    width: 3.2rem;
    height: 3.2rem;
    font-size: var(--fs-sm);
}

/* custom-label */
.custom-label {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--c-gray-400);
    border: 1px solid var(--c-gray-400);
    border-radius: 50px;
    padding: 0.1rem 0.6rem;
}
.custom-label.small-size { 
    padding: 0 0.6rem !important;
}
.custom-label.label-xs { width: 2rem; height: 2rem; }
.custom-label.fs-sm { padding: 0.12rem 0.7rem; }
.custom-label.fs-df { padding: 0.13rem 0.8rem; }
.custom-label.label-square { border-radius: 4px; }
.custom-label.label-tag { 
    font-size: 1rem;
    padding: 0.4rem 1.2rem;
    color: var(--c-gray-800) !important;
}
.custom-label.c-primary { 
    color: var(--c-primary);
    border-color: var(--c-primary);
}
.custom-label.c-pink { 
    color: var(--c-pink);
    border-color: var(--c-pink);
}
.custom-label.c-salmon { 
    color: var(--c-salmon);
    border-color: var(--c-pink);
}
.custom-label.c-orange { 
    color: var(--c-orange);
    border-color: var(--c-orange);
}
.custom-label.c-orange2 { 
    color: var(--c-orange-200);
    border-color: var(--c-orange-200);
}
.custom-label.c-yellow { 
    color: var(--c-yellow);
    border-color: var(--c-yellow);
}
.custom-label.c-green { 
    color: var(--c-green);
    border-color: var(--c-green);
}
.custom-label.c-blue { 
    color: var(--c-blue);
    border-color: var(--c-blue);
}
.custom-label.c-blue-2 { 
    color: var(--c-blue-200);
    border-color: var(--c-blue-200);
}
.custom-label.c-blue-3 {
    color: var(--c-white);
    border-color: var(--c-blue-300);
    background-color: var(--c-blue-300);
  }
.custom-label.c-blue-d { 
    color: var(--c-darkblue);
    border-color: var(--c-darkblue);
}
.custom-label.c-blue-d-2 {
    color: var(--c-darkblue-200);
    border-color: #ebebfa;
}
.custom-label.c-purple { 
    color: var(--c-purple);
    border-color: var(--c-purple);
}
.custom-label.c-mint { 
    color: var(--c-mint);
    border-color: var(--c-mint);
}
.custom-label.c-white { 
    color: var(--c-white);
    border-color: var(--c-white);
}
.custom-label.c-lavendar {
    color: #9091b1;
    border-color: #9091b1;
}
.custom-label.c-lavendar-2 {
    color: #8b8ca4;
    border-color: #ebebfa;
}
.custom-label.c-primary-bg { 
    color: var(--c-white);
    background-color: var(--c-primary);
}
.label-solid {
    color: var(--c-gray-700);
    background-color: var(--c-gray-400);
    border: 1px solid var(--c-gray-400);
}
.label-solid.c-primary {
    color: var(--c-white);
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}
.label-solid.c-custom-red {
    color: var(--c-white);
    background-color: #ed3442;
    border-color: #ed3442;
}
.label-solid.c-custom-blue {
    color: var(--c-white);
    background-color: #49b3db;
    border-color: #49b3db;
}
.label-solid.c-custom-mint {
    color: var(--c-white);
    background-color: var(--c-mint);
    border-color: var(--c-mint);
}
.label-solid.c-custom-purple {
    color: var(--c-white);
    background-color: var(--c-purple);
    border-color: var(--c-purple);
}
.label-solid.c-salmon {
    color: var(--c-white);
    background-color: var(--c-salmon);
    border-color: var(--c-salmon);
}
.label-solid.c-pink {
    color: var(--c-white);
    background-color: var(--c-pink);
    border-color: var(--c-pink);
}
.label-solid.c-yellow {
    color: var(--c-white);
    background-color: var(--c-yellow);
    border-color: var(--c-yellow);
}
.label-solid.c-green {
    color: var(--c-white);
    background-color: var(--c-green);
    border-color: var(--c-green);
}
.label-solid.c-blue {
    color: var(--c-white);
    background-color: var(--c-blue);
    border-color: var(--c-blue);
}
.label-solid.c-purple {
    color: var(--c-white);
    background-color: var(--c-purple);
    border-color: var(--c-purple);
}
.label-solid.c-lavendar {
    color: var(--c-white);
    background-color: #9091b1;
    border-color: #9091b1;
}
.label-solid.c-gray {
    min-width: var(--c-white);
    color: #fff;
    background-color: #616161;
    border-color: #616161;
}
.label-solid.bg-ex-gray {
    min-width: var(--c-white);
    color: #fff;
    background-color: #7e8692;
    border-color: #7e8692;
}
.label-solid.c-blue-l {
    min-width: 4rem;
    color: #2e82ca;
    background-color: #2e82ca15;
    border: 0;
    padding: 0.3rem 0.8rem;
}
.label-solid.c-red-l {
    min-width: 4rem;
    color: #e22d72;
    background-color: #e22d7215;
    border: 0;
    padding: 0.3rem 0.8rem;
}
.label-solid.c-gray-l {
    min-width: 4rem;
    color: #888;
    background-color: var(--c-gray-300);
    border: 0;
}
.label-solid.c-gray-2 {
    padding: .2rem .8rem .2rem;
    background-color: var(--c-gray-200) !important;
    border: 0;
    color: var(--c-gray-800);
}
.label-solid.c-white-alpha {
    color: var(--c-white);
    background-color: rgba(255, 255, 255, 0.3);
    border-color: transparent;
}
.label-solid.c-black-alpha {
    color: var(--c-white);
    background-color: rgba(0, 0, 0, 0.3);
    border-color: transparent;
}


/* 위험도 1 ~ 7단계, 채권에서는 5단계 사용안함  */
/*
    2023.12.07
    # 금융상품 투자등급 위험도 변경에 따른 색상 수정

    # 기존
    .custom-label.c-risk1 { color: #e22d72; border-color: #e22d72; }
    .custom-label.c-risk2 { color: #ff6e35; border-color: #ff6e35; }
    .custom-label.c-risk3 { color: #ffcf11; border-color: #ffcf11; }
    .custom-label.c-risk4 { color: #62c626; border-color: #62c626; }
    .custom-label.c-risk5 { color: #26b9c6; border-color: #26b9c6; }
    .custom-label.c-risk6 { color: #2e82ca; border-color: #2e82ca; }
    .custom-label.c-risk7 { color: #8469f6; border-color: #8469f6; }
    .custom-label.label-solid.c-risk1 { color: var(--c-white); background-color: #e22d72; border-color: #e22d72; }
    .custom-label.label-solid.c-risk2 { color: var(--c-white); background-color: #ff6e35; border-color: #ff6e35; }
    .custom-label.label-solid.c-risk3 { color: var(--c-white); background-color: #ffcf11; border-color: #ffcf11; }
    .custom-label.label-solid.c-risk4 { color: var(--c-white); background-color: #62c626; border-color: #62c626; }
    .custom-label.label-solid.c-risk5 { color: var(--c-white); background-color: #26b9c6; border-color: #26b9c6; }
    .custom-label.label-solid.c-risk6 { color: var(--c-white); background-color: #2e82ca; border-color: #2e82ca; }
    .custom-label.label-solid.c-risk7 { color: var(--c-white); background-color: #8469f6; border-color: #8469f6; }
 */
.custom-label.c-risk1 { color: #e22d72; border-color: #e22d72; }
.custom-label.c-risk2 { color: #e22d72; border-color: #e22d72; }
.custom-label.c-risk3 { color: #ff6e35; border-color: #ff6e35; }
.custom-label.c-risk4 { color: #ffcf11; border-color: #ffcf11; }
.custom-label.c-risk5 { color: #ffcf11; border-color: #ffcf11; }
.custom-label.c-risk6 { color: #62c626; border-color: #62c626; }
.custom-label.c-risk7 { color: #8469f6; border-color: #8469f6; }
.custom-label.label-solid.c-risk1 { color: var(--c-white); background-color: #e22d72; border-color: #e22d72; }
.custom-label.label-solid.c-risk2 { color: var(--c-white); background-color: #e22d72; border-color: #e22d72; }
.custom-label.label-solid.c-risk3 { color: var(--c-white); background-color: #ff6e35; border-color: #ff6e35; }
.custom-label.label-solid.c-risk4 { color: var(--c-white); background-color: #ffcf11; border-color: #ffcf11; }
.custom-label.label-solid.c-risk5 { color: var(--c-white); background-color: #ffcf11; border-color: #ffcf11; }
.custom-label.label-solid.c-risk6 { color: var(--c-white); background-color: #62c626; border-color: #62c626; }
.custom-label.label-solid.c-risk7 { color: var(--c-white); background-color: #8469f6; border-color: #8469f6; }

/* 조회 라벨 */
.custom-label.c-check1 {color: #ff5353; background-color: var(--c-white); border: 1px solid #ff5353;}
.custom-label.c-check2 {color: #007eff; background-color: var(--c-white); border: 1px solid #007eff;}
.custom-label.c-check3 {color: #53bba5; background-color: var(--c-white); border: 1px solid #53bba5;}
.custom-label.c-check4 {color: #62c626; background-color: var(--c-white); border: 1px solid #62c626;}

/* 부동산 연결/추가 케이스 라벨 */
.custom-label.label-square.c-estate1 {vertical-align: bottom; color: var(--c-white); background-color: #4bb986; border-color: #4bb986;}
.custom-label.label-square.c-estate2 {vertical-align: bottom; color: #212121; background-color: #ffcf11; border-color: #ffcf11}
.custom-label.label-square.c-estate3 {vertical-align: bottom; color: var(--c-white); background-color: #fd6966; border-color: #fd6966;}

/* 대출카드보험 사각형 라벨 */
.custom-label.label-square.c-flag1 {
    background-color: #e0f5fb;
    color: #007e9a;
    border-color: #e0f5fb;
}
.custom-label.label-square.c-flag2 {
    background-color: #ffede1;
    color: #de6700;
    border-color: #ffede1;
}
.custom-label.label-square.c-flag3 {
    background-color: #fbecfb;
    color: #7f0082;
    border-color: #fbecfb;
}
.custom-label.label-square.c-flag4 {
    background-color: #fff8e4;
    color: #8d6c00;
    border-color: #fff8e4;
}
.custom-label.label-square.c-flag5 {
    background-color: #ecfeec;
    color: #008e00;
    border-color: #ecfeec;
}
.custom-label.label-square.c-flag6 {
    background-color: #faffdb;
    color: #425e00;
    border-color: #faffdb;
}
.custom-label.label-square.c-flag7 {
    background-color: #ececff;
    color: #000044;
    border-color: #ececff;
}
.custom-label.label-square.c-flag8 {
    background-color: #dff6f2;
    color: #00775d;
    border-color: #dff6f2;
}
.custom-label.label-square.c-flag9 {
    background-color: #f3ebff;
    color: #38008b;
    border-color: #f3ebff;
}
.custom-label.label-square.c-flag10 {
    background-color: #ffe9e9;
    color: #8b0000;
    border-color: #ffe9e9;
}
.custom-label.label-square.c-flag11 {
    background-color: #e9f5ff;
    color: #004a70;
    border-color: #e9f5ff;
}
.custom-label.label-square.c-flag12 {
    background-color: #ebedff;
    color: #000f92;
    border-color: #ebedff;
}
.custom-label.label-square.c-flag13 {
    background-color: #ffeff5;
    color: #8e007b;
    border-color: #ffeff5;
}

/* 국내/해외 구분  */
.custom-label.domestic { color: var(--c-white); background-color: #e0b75c; min-width: 3.4rem; border: 0; padding: 0.3rem 0.8rem; }
.custom-label.oversea { color: var(--c-white); background-color: #899ae3; min-width: 3.4rem; border: 0; padding: 0.3rem 0.8rem; }

/* BUTTON */
.btn-box {
    position: relative;
    display: flex;
    width: 100%;
}
.btn-box.fixed-bottom { position: fixed; bottom: 0; z-index: 1; }
.btn-box.text-center { justify-content: center; }
.btn-box > .btn-footer,
.btn-box.flex-column > .btn { margin: 0; }
.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 7.8rem;
    height: 4.2rem;
    font-size: var(--fs-df);
    font-weight: 500;
    letter-spacing: -0.05rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--c-black);
    background-color: var(--c-gray-300);
    border: 0;
    border-radius: var(--border-radius-sm);
    padding: 0.5rem var(--main-padding);
    margin-left: 5px;
}
.btn:first-of-type { margin-left: 0 !important; }
.btn:disabled {
    color: var(--c-white);
}
.btn.btn-transparent { background-color: transparent; }
.btn.btn-block { width: 100%; }
.btn.btn-footer {
    width: 100%;
    height: 5.6rem;
    background-color: var(--c-gray-400);
    border-radius: 0;
    color: var(--c-black);
    font-size: var(--fs-lg);
}
.btn.btn-xs {
    min-width: auto;
    height: 2.4rem;
}
.btn.btn-sm {
    min-width: 5rem;
    height: 3.6rem;
    font-size: var(--fs-sm);
}
.btn.btn-xs {
    padding: 0;
    min-width: 4.6rem;
    height: 2.4rem;
    font-size: var(--fs-sm);
}
.btn.btn-lg { height: 5.4rem; }

.btn.btn-border { 
    background-color: var(--c-white);
    border: 1px solid var(--c-gray-400);
}
.btn.btn-round {
    font-size: var(--fs-md);
    border-radius: 50px;
    margin-left: 1rem; 
}
.btn.btn-round.btn-transparent { 
    height: 3.4rem;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--c-white);    
    font-size: var(--fs-df);
    font-weight: 300;
}
.btn.btn-sm.btn-round { 
    font-size: var(--fs-sm);
    font-weight: 400;
    min-width: 6rem; 
}
.btn.btn-dashed { 
    border: 1px dashed var(--c-gray-500);
    background-color: var(--c-gray-200);
}

/* BUTTON Color */
.btn.btn-primary {
    color: var(--c-white);
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}
.btn.btn-border.btn-primary { 
    color: var(--c-primary);
    background-color: var(--c-white);
    border-color: var(--c-primary);
}

/* BUTTON Disabled */
.btn-border:disabled,
.btn.btn-transparent:disabled { color: var(--c-gray-500); }
.btn-footer:disabled {
    color: #999;
    background-color: var(--c-gray-500);
}
.btn-primary:disabled {
    background-color: #8b8ca4;
    color: #a1a2c9;
}

.btn-dDay {
    background-color: var(--c-num-red-2);
    color: var(--c-white);
}

/* ICON BUTTON */
.btn[class*='btn-icon']::before {
    content: '';
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    margin-right: 0.4em;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.btn.btn-icon-only {
    min-width: auto;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    vertical-align: bottom;
}
.btn.btn-icon-only::before { 
    width: 2.4rem;
    height: 2.4rem;
}
.btn.btn-xs.btn-icon-only::before { 
    width: 1.2rem;
    height: 1.2rem;
}
.btn.btn-sm.btn-icon-only::before { 
    width: 1.6rem;
    height: 1.6rem;
}
.btn-icon-only.btn-icon-close::before { background-image: url(../new_images/icons/ico_close_s.svg); }
.btn-icon-only.btn-icon-close2::before { background-image: url(../new_images/icons/ico_close_round.svg); }
.btn-icon-only.btn-icon-search::before { background-image: url(../new_images/icons/ico_search.svg); }
.btn-icon-only.btn-icon-search-b::before { background-image: url(../new_images/icons/icon_search_24_b.png); }
.btn-icon-only.btn-icon-delete::before { background-image: url(../new_images/icons/ico_delete.svg); }
.btn-icon-only.btn-icon-edit::before { background-image: url(../new_images/icons/ico_edit.svg); }
.btn-icon-only.btn-icon-plus::before { 
    background-image: url(../new_images/icons/ico_close_s.svg);
    transform: rotate(45deg);
}
.btn-icon-only.btn-icon-arrow-right::before { 
    width: 1.8rem;
    height: 1.8rem;
    background-image: url(../new_images/icons/ico_arrow_right.svg); 
}
.btn-icon-only.btn-icon-arrow-down::before {
    background-image: url(../new_images/icons/ico_arrow_right.svg); 
    transform: rotate(90deg);
}
.btn > .btn-icon-link {
    position: relative;
    padding-right: 1em;
}
.btn > .btn-icon-link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../new_images/icons/ico_arrow_right.svg);
    transform: translate(0,-50%);
}
.btn-icon-only.btn-icon-filter {
    width: 3.4rem;
    height: 3.4rem;
    border: 0.1rem solid var(--c-gray-300);
    border-radius: var(--border-radius-sm);
}
  
.btn-icon-only.btn-icon-filter::before {
background-image: url("../new_images/icons/icon_filter_24.png");
}
.btn.btn-icon-box::before { 
    width: 1.2em;
    height: 1.2em;
    background-image: url(../new_images/icons/ico_box.svg);
}
.btn.btn-icon-connect {
    padding: 0 .8rem;
    border-radius: 1.6rem;
    background-color: var(--c-white);
    color: #212266;
    font-size: 1.3rem;
}
.btn.btn-icon-connect::before {
    margin: 0;
    background-image: url(../new_images/icons/ico_add2.svg);
}

.btn.setting_on {
    background-color: var(--c-primary);
    color: var(--c-white);
}
.btn.cancel_on {
    background-color: var(--c-white);
    color: var(--c-primary);
    border: 0.01rem solid var(--c-primary);
}
.btn.disable_on {
    background-color: var(--c-white);
    color: var(--c-gray-800);
    border: 0.01rem solid var(--c-gray-400);
}

/* Go to top */
.btn-go-top {
    position: fixed;
    z-index: 1; /* datepicker inline 위로 */
    bottom: 4rem;
    right: 1.4rem;
    display: none;
    width: 4rem;
    height: 4rem;
    background-image: url(../new_images/icons/ico-go-top.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

/* FORM */
.form-box {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.form-box.flex-column { align-items: flex-start; }
.form-label {
    display: inline-block;
    white-space: nowrap;
    margin-right: 10px;
}

/* Custom-input */
input.custom-input {
    position: relative;
    height: 4.2rem;
    border: none;
    border-bottom: 1px solid var(--c-gray-400);
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    margin-left: 5px;
    padding: 0;
    font-size: var(--fs-md);
}
input.custom-input:first-of-type { margin-left: 0; }
input.custom-input:active,
input.custom-input:focus {
    border-bottom-color: var(--c-black);
    outline: 0;
    transition: border 0.2s ease-in-out;
}
input.custom-input:disabled {
    color: var(--c-gray-400);
    background-color: var(--c-white);
    border-bottom-color: var(--c-gray-300);
}
.input-unit.error,
.input-unit.error:focus,
input.custom-input:required,
input.custom-input.error,
input.custom-input.error:focus{ border-bottom: 1px solid #B43A6B; }

.input-unit.error2,
.input-unit.error2:focus,
input.custom-input2:required,
input.custom-input.error2,
input.custom-input.error2:focus{ border-bottom: 1px solid #ff5353; }
input.custom-input.input-block { width: 100%; }

input.custom-input.calendar.calendar-roll {
    height: auto;
    margin-top: .5rem;
    width: 100%;
}
input.custom-input.calendar.calendar-roll,
input.custom-input.calendar.calendar-roll::placeholder{
    font-size: 1.5rem;
    font-weight: 500;
}
.error {color: var(--c-orange);}

/* Input + Clear */
.input-clear {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.input-clear > button {
    position: absolute;
    right: 0;
    display: none;
    width: 30px;
    height: 30px;
    font-size: 0;
    background: url(../new_images/icons/ico_close_round.svg) no-repeat;
    background-size: 1.6rem 1.6rem;
    background-position: 50% 50%;
    border: 0;
}
.input-clear .icon-delete + button {
    position: static;
    background-image: url("../new_images/icons/Ico_delete.svg");
}
.input-unit input.custom-input { border: none; }
.input-unit.w-100 > .input-clear { width: 100%; }
.input-unit > .input-clear input.custom-input:active, 
.input-unit > .input-clear input.custom-input:focus { border: none; }

/* Input + Unit */
.input-unit {
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--c-gray-400);
    padding-right: 5px;
}
.input-unit > .custom-input {
    text-align: right;
    border: 0; 
}
.input-unit > .txt-unit { 
    white-space: nowrap;
    margin-left: 0.5rem;
    font-size: var(--fs-md);
}
.input-unit > .custom-input::-webkit-input-placeholder,
.input-unit > .custom-input::placeholder { text-align: left; }
.input-unit.input-block,
.input-unit.input-block > .custom-input { width: 100%; }
.input-unit-amount {
    align-self: flex-end;
    margin-top: 5px;
    color: var(--c-gray-700);
    font-size: var(--fs-sm);
}

input.custom-input.calendar {    
    background: url(../new_images/icons/ico_calendar.svg) no-repeat;
    background-size: 1.6rem 1.6rem;
    background-position: calc(100% - 1rem) 50%;
}
input.custom-input.calendar:active,
input.custom-input.calendar:focus { border-color: var(--c-gray-400); }
input.custom-input.calendar:disabled {
    color: var(--c-gray-600);
    border-bottom: 1px solid var(--c-gray-300);
    opacity: 0.5;
}

/* SELECT */
.custom-select {
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: 4.2rem;
    overflow: hidden;
    vertical-align: bottom;
}

.custom-select::after {
    position: absolute;
    content: '';
    top: calc(50% - 0.8rem);
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../new_images/icons/ico_arrow_right2.svg) no-repeat;
    transform: rotate(90deg);
}
.custom-select select {
    width: inherit;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-black);
    border-radius: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 3rem;    
    font-size: var(--fs-md);
    color: var(--fc-black);
}
.custom-select.disabled::after { opacity: 0.3; }
.custom-select select:disabled {
    border-color: var(--c-gray-300);
    color: var(--c-gray-400);
}
.custom-select.select-block{ width: 100%; }

.custom-select2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    height: 4.2rem;
    border-bottom: 1px solid var(--c-black);
    cursor: pointer;
}
.custom-select2::after {
    position: absolute;
    content: '';
    top: calc(50% - 0.8rem);
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../new_images/icons/ico_arrow_right2.svg) no-repeat;
    transform: rotate(90deg);
}
.custom-select2 select { display: none; }
.custom-select2 .selected-item {
    width: 100%;
    font-size: var(--fs-md);
    color: var(--fc-black);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 3rem;
}
.custom-select2.select-block { width: 100%; }
.custom-select2.disabled {
    border-color: var(--c-gray-400);
    color: var(--c-gray-500);
}
.custom-select2.disabled::after { opacity: 0.3; }
.custom-select2.no-border { border-bottom: 0; }

/* Radio & Checkbox */
.custom-check,
.custom-radio {
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.custom-check + .custom-check,
.custom-radio + .custom-radio { margin-left: 1.7rem; }
.custom-check.reverse label, 
.custom-radio.reverse label {
    justify-content: space-between;
    flex-direction: row-reverse;
}
.custom-check.reverse i, 
.custom-radio.reverse i { margin-left: 10px; }
.custom-check.check-vertical, 
.custom-radio.radio-vertical { 
    width: 100%; 
    margin-left: 0 !important;
}
.custom-check.check-vertical + .custom-check.check-vertical,
.custom-radio.radio-vertical + .custom-radio.radio-vertical { margin-top: 1.6rem; }

.custom-check input[type=checkbox],
.custom-radio input[type=radio] {
    position: absolute;
    top: calc(50% - 0.8rem);
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
    -webkit-appearance: none;
    appearance: none;
    visibility: hidden;
    cursor: pointer;
}
.custom-check label,
.custom-radio label {
    display: flex;
    align-items: center;
    max-width: 100%;
    width: inherit;
    font-size: var(--fs-df);
    font-weight: 400;
    color: var(--c-gray-700);
    white-space: normal;
    word-break: keep-all;
    word-wrap: break-word;
    transition: all .2s ease-in-out;
}
.custom-check input:checked + label,
.custom-radio input:checked + label,
.custom-check input:checked:disabled + label,
.custom-radio input:checked:disabled + label { color: var(--c-primary); }
.custom-check input:disabled + label,
.custom-radio input:disabled + label,
.custom-check input:checked:disabled + label,
.custom-radio input:checked:disabled + label { opacity: 0.4; }

.custom-check i,
.custom-radio i {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    width: 2.2rem;
    height: 2.2rem;
    background-color: var(--c-white);
    border: 1px solid var(--c-gray-400);
    border-radius: 50%;
    transition: all .1s ease-in-out;
    margin-right: 0.5rem;
}

.custom-radio i { border-radius: 50%; }

.custom-check i::before,
.custom-check i::after {
    content: '';
    position: absolute;
    background-color: var(--c-gray-400);
    transform: rotate(-50deg);
    top: 0.9rem;
}
.custom-check i::before {
    left: 0.6rem;
    width: 0.2rem;
    height: 0.5rem;
    border-radius: 2px 2px 0 0;
}
.custom-check i::after {
    left: 0.7rem;
    width: 0.9rem;
    height: 0.2rem;
    border-radius: 0 2px 2px 0;
}
.custom-check input:checked + label i {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}
.custom-check input:checked + label i::before,
.custom-check input:checked + label i::after { background-color: var(--c-white); }
.custom-check input:checked + label i::before { animation: check-left .2s ease backwards; }
.custom-check input:checked + label i::after { animation: check-right .2s ease .13s backwards; }

.custom-check input:disabled + label i::before,
.custom-check input:disabled + label i::after { background-color: var(--c-gray-400); }

.custom-check input:checked:disabled + label i::before,
.custom-check input:checked:disabled + label i::after { background-color: var(--c-white); }

.custom-radio i::before {
    content: '';
    position: absolute;
    top: calc(50% - 0.5rem);
    left: calc(50% - 0.5rem);
    width: 1rem;
    height: 1rem;
    background-color: var(--c-gray-400);
    border-radius: 50%;
}
.custom-radio input:checked + label i {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}
.custom-radio input:checked + label i::before { background-color: var(--c-white); }

.custom-check.no-box i { border: 0; background-color: transparent; margin-top: 0; }
.custom-check.no-box i::before { height: 9px; border-radius: 0; }
.custom-check.no-box i::after { top: 9px; width: 15px; border-radius: 0; }
.custom-check.no-box input:checked + label { color: var(--c-primary); }
.custom-check.no-box input:checked + label i { background-color: var(--c-white); }
.custom-check.no-box.bg-none input:checked + label i { background-color: transparent; }
.custom-check.no-box input:checked + label i::before,
.custom-check.no-box input:checked + label i::after { background-color: var(--c-primary); }
.custom-check.fs-sm i {
    width: 1.6rem;
    height: 1.6rem;
}
.custom-check.fs-sm i::before { height: 5px; border-radius: 0; }
.custom-check.fs-sm i::after { top: 9px; width: 12px; border-radius: 0; }

/* 버튼타입 */
.custom-check.btn-type + .custom-check.btn-type,
.custom-radio.btn-type + .custom-radio.btn-type { margin-left: 0.7rem; }
.custom-check.btn-type label {
    flex-direction: row-reverse;
    justify-content: space-between;
    min-height: 4.8rem;
    background-color: var(--c-white);
    border: 1px solid var(--c-gray-400);
    border-radius: var(--border-radius-sm);
    padding: 1rem var(--main-padding);
}
.custom-check.btn-type i { 
    display: block;
    margin: 0;
    background-color: transparent;
    border: 0;
}
.custom-check.btn-type i::before,
.custom-check.btn-type i::after {
    content: '';
    position: absolute;
    background-color: var(--c-gray-400);
    transform: rotate(-50deg);
}
.custom-check.btn-type i::before {
    top: 9px;
    left: 3px;
    width: 0.2rem;
    height: 0.9rem;
    border-radius: 2px 2px 0 0;
}
.custom-check.btn-type i::after {
    top: 10px;
    left: 4px;
    width: 1.5rem;
    height: 0.2rem;
    border-radius: 0 2px 2px 0;
}
.custom-check.btn-type input:checked + label {
    border-color: var(--c-primary);
    color: var(--c-primary);
    font-weight: 700;
}
.custom-check.btn-type input:checked + label i {
    background-color: transparent;
}
.custom-check.btn-type input:checked + label i::before,
.custom-check.btn-type input:checked + label i::after { background-color: var(--c-primary); }
.custom-check.btn-type input:checked + label i::before { animation: check-left .2s ease backwards; }
.custom-check.btn-type input:checked + label i::after { animation: check-right .2s ease .15s backwards; }

.custom-radio.btn-type label {
    justify-content: center;
    min-height: 4.8rem;
    background-color: var(--c-white);
    border: 1px solid var(--c-gray-300);
    border-radius: var(--border-radius-sm);
    padding: 1rem 0.5rem;
    
    transform: translateZ(0); /* 22.09.15, 구버전 앱 폐지 후 삭제 */
}
.custom-radio.btn-type input + label i { display: none; }
.custom-radio.btn-type input:checked + label {
    font-weight: 500;
    color: var(--c-white);
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}
.custom-check.btn-type.text-left label,
.custom-radio.btn-type.text-left label { justify-content: flex-start; }

/* 주소 2열 타입 */
.custom-adress{
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: auto;
    width: 15rem;
    border-bottom: 1px solid var(--c-gray-400);
}
.custom-adress:last-child{
    float: left;
    margin-left: 1.2rem;
}
.custom-adress .custom-input{
    width: 100%;
    border-bottom: none;
}



/* 버튼 + 체크 타입 */
.custom-check.btn-type3 label,
.custom-radio.btn-type3 label {
    padding: var(--main-padding);
    border: 1px solid var(--c-gray-400);
    border-radius: 0.8rem;
    color: var(--c-gray-700);
}
.custom-check.btn-type3 label i,
.custom-radio.btn-type3 label i { margin-right: 1rem; }
.custom-check.btn-type3 input:checked + label,
.custom-radio.btn-type3 input:checked + label { border-color: var(--c-primary); }
.custom-check.btn-type3 + .custom-check.btn-type3,
.custom-radio.btn-type3 + .custom-radio.btn-type3 { margin-top: 1.4rem; }

@keyframes check-left {
    0% {
        background-color: transparent;
        height: 0;
    }
}
@keyframes check-right {
    0% {
        background-color: transparent;
        width: 0;
    }
}

/* 버튼타입2 */
.custom-radio.btn-type2 label,
.custom-check.btn-type2 label {
    justify-content: center;
    min-width: 6rem;
    min-height: 3.6rem;
    /* 22.09.16 구버전 폐지 후 복구 */
    /* background-color: var(--c-white);
    border: 1px solid var(--c-gray-300); */

    /* 22.09.16 구버전 폐지 후 삭제 */
    background: linear-gradient(var(--c-white), var(--c-white));
    box-shadow: 0 0 1px 1px var(--c-gray-300);
    overflow: hidden;

    border-radius: 1.8rem;
    padding: 0.7rem 1.3rem 0.8rem;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--fc-black);
}
.custom-radio.btn-type2 input + label i,
.custom-check.btn-type2 input + label i { display: none; }
.custom-radio.btn-type2 input:checked + label,
.custom-check.btn-type2 input:checked + label {
    font-weight: 500;
    color: var(--c-white);

    /* 22.09.16 구버전 폐지 후 복구 */
    /* background-color: var(--c-gray-800);
    border: 1px solid var(--c-gray-800); */

    /* 22.09.16 구버전 폐지 후 삭제 */
    background: linear-gradient(var(--c-gray-800), var(--c-gray-800));
    box-shadow: 0 0 1px 1px var(--c-gray-800);
}
.custom-radio.btn-type2 + .custom-radio.btn-type2,
.custom-check.btn-type2 + .custom-check.btn-type2 { margin-left: 0.6rem; }

.custom-radio.btn-type2.btn-list label,
.custom-check.btn-type2.btn-list label {
  min-height: 3.4rem;
  padding: 0.5rem 1rem 0.5rem 1.6rem;
}

.custom-radio.btn-type2.btn-list label::after,
.custom-check.btn-type2.btn-list label::after {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("../new_images/icons/icon_swap_24.png") no-repeat center/2.4rem 2.4rem;
}

.custom-radio.btn-type2.btn-list input:checked + label::after,
.custom-check.btn-type2.btn-list input:checked + label::after {
  background-image: url("../new_images/icons/icon_swap_white24.png");
}

.btn-type2.even-space { padding: 0.3rem; }
.btn-type2.even-space + .btn-type2.even-space { margin-left: 0; }

/* 22.09.16 정렬 토글버튼 => 활성화 */
.custom-check.btn-type2.btn-sort-toggle input + label, 
.custom-check.btn-type2.btn-sort-toggle input:checked + label {
    color: var(--c-white);
    /* 22.09.16 구버전 폐지 후 복구 */
    /* background-color: var(--c-gray-800);
    border: 1px solid  var(--c-gray-800); */

    /* 22.09.16 구버전 폐지 후 삭제 */
    background: linear-gradient(var(--c-gray-800), var(--c-gray-800));
    box-shadow: 0 0 1px 1px var(--c-gray-800);
}
.custom-check.btn-sort-toggle input + label i {  /* 22.08.25 */
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 0 0 0.5rem;
    background-image: url(../new_images/icons/ico_arrow_right.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    transition: transform 0.5s linear;
    transform-style: preserve-3d;
    background-color: transparent;
    border-color: transparent;
    filter:invert(1) brightness(1);

    box-shadow: none;
}
.custom-check.btn-sort-toggle i::before,
.custom-check.btn-sort-toggle i::after { content: none; }
.custom-check.btn-sort-toggle input:checked + label i { transform: rotate(-90deg); }

/* 22.09.16 정렬 토글버튼 => 비활성화 */
.custom-check.btn-sort-toggle.off input + label,
.custom-check.btn-sort-toggle.off input:checked + label {
    opacity: 1;
    color: var(--fc-black);
    /* 22.09.16 구버전 폐지 후 복구 */
    /* background-color: var(--c-white);
       border: 1px solid var(--c-white);
    */
    background: linear-gradient(var(--c-white), var(--c-white));
    box-shadow: 0 0 1px 1px var(--c-gray-300);
}
.custom-check.btn-sort-toggle.off input + label i,
.custom-check.btn-sort-toggle.off input:checked + label i { filter:invert(1) brightness(0); }

/* custom switch */
.custom-switch {
    position: relative;
    display: inline-block;
    width: 4.2rem;
    height: 2.4rem;
    min-width: 4.2rem;
    background: var(--c-gray-500);
    border-radius: 30px;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: 0.3s cubic-bezier(0.21, 0.61, 0.35, 1);
}
.custom-switch::before {
    content: '';
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--c-white);
    transition: 0.3s cubic-bezier(0.21, 0.61, 0.35, 1);
}
.custom-switch:checked { background-color: #ffd428; }
.custom-switch:checked:before {
    left: auto;
    right: 0.2rem;
}
.custom-switch2 {
    position: relative;
    display: inline-block;
    font-size: 0;
    background: rgba(0, 0, 0, 0.2);   
    border-radius: 3rem;
    border: 0; 
    padding: 3px;
}
.custom-switch2 input {
    width: 0;
    -webkit-appearance: none;
    appearance: none;
}
.custom-switch2 span {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--c-white);
    padding: 0.6rem 1rem;
}
.custom-switch2 input:not(:checked) ~ span:nth-of-type(1),
.custom-switch2 input:checked ~ span:nth-of-type(2) {
    color: var(--c-black);
    background-color: var(--c-white);
    border-radius: 3rem;
}

/* Table */
.custom-table {
    position: relative;
    width: 100%;
}
.table-layout-fixed { table-layout: fixed; }
.custom-table::before,
.custom-table::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--c-gray-400);
}
.custom-table.no-border-top::before,
.custom-table.no-border-bottom::after {
    height: 0;
}

.custom-table::after {
    top: auto;
    bottom: 0;    
}
.custom-table caption {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.custom-table th,
.custom-table td {
    min-height: 39px;
    font-weight: 400;
    font-size: var(--fs-sm);
    color: var(--c-black);
    border: solid var(--c-gray-300);
    border-width: 0 1px 1px 0;
    text-align: center;
    word-break: keep-all;
    padding: 0 14px;
    padding: 11px 10px;
}
.custom-table.fs-df th,
.custom-table.fs-df td { font-size: var(--fs-df); }
.custom-table th {
    color: var(--c-gray-700);
    background-color: var(--c-gray-100);
}
.custom-table thead th { min-height: 27px; }
.custom-table th:last-child,
.custom-table td:last-child { border-right: 0; }
.custom-table tfoot th,
.custom-table tfoot td {
    color: var(--c-black);
    font-weight: 700;
    background-color: #f3f9ff;
    border-bottom: 0;
}
.custom-table.table-striped tbody tr:nth-child(even) td { background-color: var(--c-gray-100); }
.custom-table.list-type tr th,
.custom-table.list-type tr td { border-right: none; }
.custom-table.list-type tbody tr th { background-color: var(--c-white); }
.custom-table th.text-left { text-align: left; }

.custom-table.dark th, 
.custom-table.dark td {
    color: var(--c-gray-900);
}
.custom-table.dark th {
    background-color: #212121;
}

.custom-table.dark td {
    background-color: #111;
}

/* table cell 문자 생략 처리 */
.custom-table .ellipsis {
    display: table !important;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

.custom-table .ellipsis p {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table + overflow-x */
.table-overflow-x {
    display: inline-flex;
    width: 100%;
}
.table-overflow-x > .custom-table { 
    width: auto;
    flex-shrink: 0;
    border-right: 1px solid var(--c-gray-300);;
}
.table-overflow-x > div {
    width: 100%;
    overflow-x: auto;
}
.table-overflow-x > div > .custom-table { min-width: 100%; }

/* Tab */
.tab-overflow {
    position: relative;
    overflow-x: auto;

}

/* modulebox top / right bg */
.tab-bg{
    
}
.tab-bg::after{
    content:"";
    display: block;
    position: absolute;
    right: -20px;
    top: -1px;
    z-index: 10;
    background: url(../new_images/views/fpr/bg_tabs.png) repeat -10px bottom; 
    width: 45px;
    height: 64px;
}



.tab-overflow::-webkit-scrollbar { display: none; }
.tab-overflow > .tab-head {
    width: max-content;
    min-width: 100%;
}
.tab-head {
    position: relative;
    display: flex;
    padding: 0 var(--main-padding);
}
.tab-head::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid var(--c-gray-400);
}
.tab-head .tab-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-basis: 80px;
    min-height: 4rem;
    font-weight: 400;
    color: var(--c-gray-700);
    font-size: var(--fs-md);
    border-bottom: 0.2rem solid transparent;
    text-align: center;
    white-space: pre;
    word-break: keep-all;
    padding: 1rem;;
}
.tab-head .tab-btn.is-selected {
    font-weight: 500;
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}
.tab-head.tab-block .tab-btn { flex-grow: 1; }
.tab-panel {
    position: relative;
    display: none;
    padding: 2rem var(--main-padding);
}
.tab-panel.is-selected { display: block; }

/* Tab-head 고정 */
.sticky-tab {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: var(--c-white);
    width: 100%;    
}

/* Sub-tab-head */
.tab-head.tab-sub .tab-btn {
    flex-basis: 40px;
    border-bottom: 0.1rem solid transparent;
    padding: 0 1rem;
}
.tab-head.tab-sub .tab-btn:first-child { padding-left: 0;}
.tab-head.tab-sub .tab-btn div {
    padding: 2rem 0 1rem; 
    border-bottom: 0.1rem solid transparent;
    font-size: var(--fs-df);
}
.tab-head.tab-sub .tab-btn.is-selected div {
    font-weight: 500;
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

/* Tab-head Btn-type */
.tab-head.btn-type { padding: 0; }
.tab-head.btn-type::before { content: none; }
.tab-head.btn-type .tab-btn {
    flex-grow: 1;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: var(--c-gray-300);    
    color: var(--c-gray-800);
    font-size: var(--fs-df);
    font-weight: 400;
}
.tab-head.btn-type .tab-btn:first-child {
    border-top-left-radius: var(--border-radius-sm);
    border-bottom-left-radius: var(--border-radius-sm);
}
.tab-head.btn-type .tab-btn:last-child {
    border-right: 1px solid var(--c-gray-300);
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}
.tab-head.btn-type .tab-btn.is-selected {
    background-color: #49525e;
    border-color: #49525e;
    color: var(--c-white);
    font-weight: 500;
}

/* Tab-head Btn-type2 */
.tab-head.btn-type2 { margin: 1rem 0; }
.tab-head.btn-type2::before { content: none; }
.tab-head.btn-type2 .tab-btn {
     min-width: 6rem;
    min-height: 3.6rem;
    /* background-color: var(--c-white);
    border: 1px solid var(--c-gray-300); *//* 22.09.15, 구버전 앱 폐지 후 반영 */
    box-shadow: 0 0 1px 1px var(--c-gray-300); /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    border-radius: 1.8rem;
    overflow: hidden; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    font-size: var(--fs-sm);
    color: var(--fc-black);
    padding: 0.7rem 1.3rem 0.8rem;
    
    z-index: 100; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    transform: translateZ(0); /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    will-change: transform; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    isolation: isolate; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
}
.tab-head.btn-type2 .tab-btn + .tab-btn { margin-left: 0.6rem; }
.tab-head.btn-type2 .tab-btn.is-selected {
    margin-top: 0;
    color: var(--c-white);
    font-weight: 400;
    line-height: 1.5;
    /* background-color: var(--c-gray-800) !important;
    border: 1px solid var(--c-gray-800); *//* 22.09.15, 구버전 앱 폐지 후 반영 */
    border-bottom: none; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    background: linear-gradient(var(--c-gray-800), var(--c-gray-800)); /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    box-shadow: 0 0 1px 1px var(--c-gray-800); /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    
    z-index: 100; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    transform: translateZ(0); /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    will-change: transform; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
    isolation: isolate; /* 22.09.15, 구버전 앱 폐지 후 삭제 */
}
.tab-head.box {
    padding: .4rem;
    background-color: #f2f2f2;
    border-radius: .8rem;
}

.tab-head.box::before {
    content: none;
}

.tab-head.box .tab-btn {
    border: none;
    border-radius: .6rem;
    color: #999;
    font-weight: 400;
}

.tab-head.box .tab-btn.is-selected {
    background-color: var(--c-white);
    color: #181949;
    font-weight: bold;
}


/* Dimmed */
.dimmed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
    backdrop-filter: blur(0.2rem);
    -webkit-backdrop-filter: blur(0.2rem);
    z-index: 499;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--c-black);
    background-color: transparent;
    border: 0;
}
.tooltip::after {
    content: '';
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../new_images/icons/ico_tooltip.svg) no-repeat center center;
    background-color: var(--c-gray-600);
    background-size: 1.6rem auto;
    border-radius: 50%;
    vertical-align: middle;
    margin: -0.15em 0 0 0.5rem;
}
.tooltip > h3 { 
    display: inline !important;
    vertical-align: middle;
}
.tooltip-box {
    position: fixed;
    left: 50%;
    top: 50%;
    width: calc(100% - 60px);
    font-size: var(--fs-sm);
    font-weight: 400;
    white-space: normal;
    text-align: left;
    color: var(--c-gray-700);
    background-color: var(--c-white);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translate(-50%, 0);
    transition: all 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
    pointer-events: none;
    padding: 1.8rem 2rem;
    z-index: 501;
}
.tooltip-box.is-open {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.tooltip-box .title {
    font-weight: 500;
    color: var(--c-black);
    margin-bottom: 0.5rem;
}
.tooltip-box .tooltip-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;    
    background: url(../new_images/icons/ico_close.svg) center center no-repeat;
    background-size: 10px auto;
    font-size: 0;
    border: 0;
    pointer-events: auto;
}
.tooltip-box > p:not(.title) {
    position: relative;
    line-height: 1.5;
    padding-left: 10px;
}
.tooltip-box > p:not(.title)::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    background-color: var(--c-gray-600);
    border-radius: 50%;
}

/* Toast */
.toast-popup {
    display: none;
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    min-height: 4rem;
    background: rgba(24, 25, 73, 0.9);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.1);
    z-index: 900;
}
.toast-popup p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-df);
    line-height: 1.5;
    color: var(--c-white);
}

/* Modal popup */
.modal-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    width: calc(100% - 6rem);
    max-height: calc(100vh - 3rem);
    background-color: var(--c-white);
    border-radius: 8px;
    opacity: 0;
    transform: translate(-50%, 0);
    transition: all 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
    overflow: hidden;
    pointer-events: none;
    padding: 0;
    z-index: 500;
}
.modal-popup.is-open { 
    opacity: 1; 
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.modal-popup.is-open .modal-body { 
    overflow-y: auto;
    word-break: keep-all;
}
.modal-popup .modal-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5.6rem;
    border-bottom: 1px solid var(--c-gray-400);
}
.modal-popup h1 {
    max-width: calc(100% - 5em);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 auto;
}
.modal-popup .modal-header .modal-prev,
.modal-popup .modal-header .modal-close {
    position: absolute;
    width: 4.2rem;
    height: 4.2rem;
    font-size: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: 50% 50%;
    border: 0;
    padding: 0;
}
.modal-popup .modal-header .modal-prev {
    order: -1;
    left: 0.6rem;
    background-image: url(../new_images/icons/ico_previous.svg);
}
.modal-popup .modal-header .modal-close {
    right: 0.8rem;
    background-image: url(../new_images/icons/ico_close_s.svg);
    background-size: 1.4rem 1.4rem;
    margin-top: 0.7rem;
}
.modal-popup .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 2rem var(--main-padding);
    word-break: keep-all;
}

/* Full popup */
.modal-popup.popup-full {
    width: 100%;
    height: 100vh;
    max-height: 100%;
    border-radius: 0;
    top: 100%;
    padding-top: env(safe-area-inset-top);
    padding-top: constant(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}
.popup-full.is-open{
    top: 50%;
}
.modal-popup.popup-full h1 {
    font-size: var(--fs-lg);
    font-weight: 500;
    text-align: center;
}
.modal-popup.popup-full .modal-header .modal-close {
    right: 0.6rem;
    background-image: url(../new_images/icons/ico_close.svg);
    background-size: 2rem 2rem;
}
.modal-popup.popup-full + .dimmed { display: none; }
.modal-popup.popup-full .modal-body { padding: 0; }

.modal-popup.popup-full ~ .modal-popup.popup-alert,
.modal-popup.popup-alert.popup-select { z-index: 510; }
.modal-popup.popup-full ~ .modal-popup.popup-alert + .dimmed,
.modal-popup.popup-alert.popup-select + .dimmed { z-index: 509; }

/* Bottomsheet */
.modal-popup.bottomsheet {
    top: 100%;
    width: 100%;
    background: var(--c-white);
    border-radius: 2rem 2rem 0 0;
}
.modal-popup.bottomsheet.is-open { transform: translate(-50.1%, -100%); }
.modal-popup.bottomsheet.no-handle::before { content: none; }
.modal-popup.bottomsheet::before {
    content: '';
    position: absolute;
    top: 0.7rem;
    left: calc(50% - 2.2rem);
    width: 4.4rem;
    height: 0.3rem;
    background-color: var(--c-gray-400);
    border-radius: 0.2rem;
}
.modal-popup.bottomsheet .modal-header { min-height: 6.8rem; }
.modal-popup.bottomsheet .modal-header h1 { margin-top: 0.7rem; }
.modal-popup.bottomsheet .modal-body { min-height: 13rem; }

.modal-popup.popup-full ~ .modal-popup.bottomsheet,
.modal-popup.bottomsheet.popup-select { z-index: 510; }
.modal-popup.popup-full ~ .modal-popup.bottomsheet + .dimmed,
.modal-popup.bottomsheet.popup-select + .dimmed { z-index: 509; }

/* Accordion */
.accordion {
    position: relative;
    /* background-color: var(--c-white); */
    border-bottom: 1px solid var(--c-gray-300);
}
.accordion .fold-head {
    position: relative;  
    display: flex;
    justify-content: space-between;
    align-items: center;  
    word-break: break-all;
    padding: 1.2rem 2.5rem 1.2rem 0;
}
.accordion .fold-head .btn-fold {
    position: absolute;  
    right: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: none;
    border: 0;
    font-size: 0;
    overflow: hidden; 
}
.accordion-wrap.flow-fold {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.accordion-wrap.flow-fold .fold-body::-webkit-scrollbar { -webkit-appearance: none; display: none; }

.accordion-wrap.flow-fold .btn-fold,
.accordion .fold-head .btn-fold2 {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    background: none;
    border: 0;
    font-size: 0;
    overflow: hidden; 
}
.accordion .fold-head .btn-fold::before,
.accordion-wrap .fold-button .btn-fold::before,
.accordion .fold-head .btn-fold2::before {
    position: absolute;
    content: '';
    top: calc(50% - 0.9rem);
    right: 0;
    width: 1.8rem;
    height: 1.8rem;
    transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
    background: url(../new_images/icons/ico_arrow_right.svg) no-repeat;
    background-size: contain;
    background-position: 50% 100%;
    transform: rotate(90deg);
}
.accordion .fold-head .btn-fold.fc-white::before {
    -webkit-filter: brightness(100);
    filter: brightness(100);
}
.accordion.is-open .fold-head .btn-fold::before,
.accordion-wrap.flow-fold.is-open .fold-button .btn-fold::before,
.accordion .fold-head .btn-fold2.is-open::before {
    transform: rotate(270deg); 
}
.accordion.is-open .fold-head::after,
.accordion-wrap.flow-fold.is-open .fold-button .btn-fold::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;    
    background-color: var(--c-gray-600);
}
.accordion.is-open .fold-head.line-none::after {
    content: none;
}
.accordion-wrap.flow-fold.is-open .fold-button .btn-fold::after { background-color: transparent; }
.accordion .fold-body {
    display: none;
    transform-origin: top center;
}
.accordion-wrap.flow-fold .fold-body {
    overflow-y: hidden;
    overflow-x: auto;
    max-height: 4.4rem;
    white-space: nowrap;
}
.accordion-wrap.flow-fold .fold-body.is-open {
    -webkit-transition: max-height 5s ease-out;
    transition: max-height 5s ease-out;
    overflow: hidden;
    max-height: 100rem;
    white-space: normal;
}
.accordion-wrap.no-border .fold-head::after { content: none; }
.accordion-wrap.no-border .fold-body { padding-top: 0; }
.accordion-wrap.no-border .accordion + .accordion { border: 0; }
.accordion-wrap.no-border .accordion { border: 0; }

.accordion-wrap.type-block .btn-fold {
    width: 100%;
    height: 100%;
}
.accordion.type-inline { border-bottom: 0; }
.accordion.type-inline .fold-head {
    display: inline-flex;
    padding: 0 2.5rem 0 0;
}
.accordion.type-inline .fold-head::after { content: none; }
.accordion.type-inline .btn-fold { width: 100%; }

.accordion-wrap.no-border {border: 0 !important;}
.accordion.is-open .fold-head.no-border::after { background-color: transparent; }

/* iframe */
.iframe-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}
.custom-iframe {
    position: absolute;
    width: 0;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
}

.iframe-terms {
    width: calc(100% - 40px);
    overflow: hidden;
    overflow-y: auto;
    margin: 0 auto;
}

/* no-data images */
.no-data { 
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding-top: 15rem;
    padding-bottom:3rem;
    text-align: center;
}
.no-data::after { 
    position: absolute;
    content: '';
    top: 3rem;    
    width: 8rem;
    height: 8rem;    
    background: url(../new_images/icons/ico_nodata.svg) no-repeat; 
    background-size: contain;
}
.no-data.d-flex-center {
    padding-top: 0;
}
.no-data.d-flex-center::before { 
    content: '';
    flex: 0 0 auto;
    width: 8rem;
    height: 8rem;
    margin: 3rem auto;
    background: url(../new_images/icons/ico_nodata.svg) no-repeat; 
    background-size: contain;
}
.no-data.d-flex-center::after {
    content: none;
}
/* 데이터 없을 경우 이미지 작은 버전 */
.no-data-sm {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding-top: 8.5rem;
    padding-bottom: 4rem;
    text-align: center;
}
.no-data-sm::after {
    position: absolute;
    content: '';
    top: 3rem;
    width: 4rem;
    height: 4rem;
    background: url(../new_images/icons/icon_nodata_sm.svg) no-repeat;
    background-size: contain;
}
/* Loader */
.loader-box {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: grid;
    place-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 900;
}
.loader {
    width: 70px;
    text-align: center;
    margin: 35px auto;
}
.loader > i {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #3c3e90;
    border-radius: 100%;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.loader i:nth-child(1) {
    background-color: #e6367e;
    animation-delay: -0.32s; 
    margin-right: 5px;
}
.loader i:nth-child(2) {
    background-color: #913a87;
    animation-delay: -0.16s; 
    margin-right: 5px;
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/* --------------------------------------------------------------- *
 *  Third party libraries
 * --------------------------------------------------------------- */

/* swiper.css 포함 부분. 개발에 swiper.css 반영 이후 삭제 */
/* Swiper - origin */
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper { transform: translate3d(0px, 0, 0); }
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
    position: relative;
    transition-property: transform;
}
.swiper-pagination {
    position: relative;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: var(--c-black);
    opacity: .2;
}
.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
    left: 0;
    width: 100%;
}
/* fade effect */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
}

/* Swiper - custom */
.custom-swiper .sub-link .box-shadow { margin-bottom: 5px; }
.custom-swiper .swiper-wrapper.border-radius { 
    margin: 5px 0;
    border-radius: var(--border-radius);
}
.custom-swiper .swiper-pagination.custom-bullet {
    position: absolute;
    bottom: unset;
}
.custom-swiper .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    vertical-align: middle;
    margin: 0 2px;
}
.custom-swiper .swiper-pagination-bullet:only-child { display: none; }
.custom-swiper .swiper-pagination-bullet-active {
    width: 18px;
    background-color: var(--c-primary);
    border-radius: 3px;
}
.swiper-pagination.bullet-white .swiper-pagination-bullet { opacity: 0.4; }
.swiper-pagination.bullet-white .swiper-pagination-bullet-active { background-color: var(--c-white) }
.swiper-pagination.bullet-gray .swiper-pagination-bullet { background-color: var(--c-gray-700); opacity: 0.3; }
.swiper-pagination.bullet-gray .swiper-pagination-bullet-active { background-color: var(--c-gray-700); }


.swiper-pagination.swiper-pagination-fraction {
    position: absolute;
    bottom: 2.5rem;
    left: unset;
    right: 3rem;
    width: initial;
    font-size: var(--fs-xs);
    color: var(--c-white);
    padding: 0.4rem 1rem;
}
.swiper-pagination.swiper-pagination-fraction::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3rem;
    z-index: -1;
}
.swiper-pagination.swiper-pagination-fraction.fraction-left {
    left: 1.6rem; 
    bottom: 1.6rem; 
    right: auto;
}

/* 달력 커스텀 스타일 */
.datepicker { 
    font-family: 'Spoqa Han Sans Neo', sans-serif; 
    border-radius: 8px;
}
.datepickers-container > .datepicker { 
    top: 50% !important;
    left: 50% !important;    
    padding: 1rem 1.5rem;
    transform: translate(-50%, -40%);
    z-index: 500;
    transition: all 0.6s cubic-bezier(0.21, 0.61, 0.35, 1) 0.1s;
    opacity: 0;    
    display: none;
}
.datepicker.active {
    position: fixed;
    display: block;
    left: 0;
    transform: translate(-50%, -50%);
    opacity: 1;
}
.datepicker--days-names { margin-bottom: 1.5rem; }
.datepicker--cells { 
    border-top: 1px solid #efefef; 
    padding-top: 1rem; 
}
.datepicker--pointer { display: none; }
.datepicker--cell.-focus- { background: var(--c-white); }
.datepicker--nav { 
    min-height: 5rem; 
    border-bottom: 0; 
}
.datepicker--nav-title { 
    font-size: var(--fs-2xl);
    font-weight: 500; 
    color: var(--c-black); 
}
.datepicker--years, .datepicker--cells-years, .datepicker--cells-months, .datepicker--cells-days { height: auto; }
.datepicker--cell-year, .datepicker--cell-month { 
    width: 25%;
    height: 7rem;
    font-size: var(--fs-lg);
    font-weight: 500; 
}
.datepicker--cell-day { 
    height: 6rem;
    font-size: var(--fs-df);
    font-weight: 500; 
}
.datepickers-container .datepicker--cell.-selected-::after,
.datepickers-container .datepicker--cell.-selected-.-current-::after {
    position: absolute;
    content: '';
    display: block;
    background: var(--c-primary);  
    border-radius: 50px;    
    z-index: -1;
}
.datepickers-container .datepicker--cell.datepicker--cell-month.-selected-::after,
.datepickers-container .datepicker--cell.datepicker--cell-month.-selected-.-current-::after {
    position: absolute;
    content: '';
    top: calc(50% - 2.5rem);
    left: calc(50% - 2.5rem);
    display: block;
    background: var(--c-primary);  
    border-radius: 50px;    
    z-index: -1;
}
.datepickers-container .datepicker--cell.datepicker--cell-day.-selected-::after,
.datepickers-container .datepicker--cell.datepicker--cell-day.-selected-.-current-::after {
    position: absolute;
    content: '';
    top: calc(50% - 2rem);
    left: calc(50% - 2rem);
    display: block;
    background: var(--c-primary);  
    border-radius: 50px;    
    z-index: -1;
}

.datepicker--years .datepicker--cell.-selected-::after,
.datepicker--years .datepicker--cell.-selected-.-current-::after,
.datepicker--months .datepicker--cell.-selected-::after,
.datepicker--months .datepicker--cell.-selected-.-current-::after {
    width: 5rem;
    height: 5rem;
}
.datepicker--days .datepicker--cell.-selected-::after,
.datepicker--days .datepicker--cell.-selected-.-current-::after {
    width: 4rem;
    height: 4rem;
}
.datepicker--cell.-selected-,
.datepicker--cell.-selected-.-current- { 
    color: var(--c-white); 
    background: var(--c-white); 
}
.datepicker--cell.datepicker--cell-day.-other-month-.-selected- { display: none; }
.datepicker--cell.datepicker--cell-day.-weekend-.fc-red.-selected-,
.datepicker--cell.datepicker--cell-day.-weekend-.fc-blue.-selected- { color: var(--c-white) !important; }
.datepicker--day-name { 
    font-size: var(--fs-df); 
    color: #616161; 
}
.datepicker--day-name.-weekend-:first-child { color: var(--c-red); }
.datepicker--day-name.-weekend-:last-child { color: var(--c-blue); }
.datepicker--days .datepicker--cell-day.-disabled- { color: var(--c-gray-600) !important; }

/* Datepicker - Modal */
.datepickers-container > .datepicker { z-index: 601 !important; }
.datepickers-container > .datepicker + .dimmed { 
    z-index: 600; 
    display: none; 
}
.datepickers-container > .datepicker.active + .dimmed{ display: block; pointer-events: none; }
.datepicker--cell-month.-focus-,
.datepicker--cell-day.-focus- { background-color: transparent !important; }

/* Datepicker - Month */
.datepicker-month .datepicker {
    width: 100%;
    color: var(--c-black);
    border-width: 0;
}
.datepicker-month .datepicker--nav { display: none; } 
.datepicker-month .datepicker--nav-title { pointer-events: none; }
.datepicker-month .datepicker--days-names { margin: 0.3rem 0 0.5rem; }
.datepicker-month .datepicker--day-name {
    height: 3rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: inherit;
}
.datepicker-month .datepicker--day-name.-weekend- { color: var(--c-darkblue); }
.datepicker-month .datepicker--day-name.-weekend-:last-child { color: var(--c-orange); }
.datepicker-month .datepicker--cell-day {
    justify-content: flex-start;
    flex-direction: column;
    height: 6rem;
    line-height: 3rem;
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--c-gray-800);
}
.datepicker-month .datepicker--cell-day.-disabled- { color: var(--c-gray-400) !important; }
.datepicker-month .datepicker--cells { border-top: 0; padding-top: 0; }
.datepicker-month .datepicker--cell.-selected-,
.datepicker-month .datepicker--cell.-selected-.-current- {
    color: var(--c-white) !important;
    background-color: transparent !important;
}
.datepicker-month .datepicker--cell.-current- { 
    color: var(--c-black); 
}
.datepicker-month .datepicker--cell.-current-::before {
    content: '';
    position: absolute;
    top: calc(50% - 3rem);
    width: 3rem;
    height: 3rem;
    background-color: var(--c-gray-400);
    border-radius: 50%;
    z-index: -1;
}
.datepicker-month .datepicker--cell-day.-selected-::before {
    content: '';
    position: absolute;
    top: calc(50% - 3rem);
    width: 3rem;
    height: 3rem;
    background-color: var(--c-primary);
    border-radius: 50%;
    z-index: -1;
}
.datepicker-month .datepicker--cell-day.-other-month-,
.datepicker-month .datepicker--cell-year.-other-decade- { visibility: hidden; }
.datepicker-month .datepicker--cell-day.-other-month- .date-price,
.datepicker-month .datepicker--cell-year.-other-decade- .date-price { color: var(--c-gray-700); }
.datepicker-month .datepicker--cell-day .date-price {
    width: 100%;
    font-size: 1rem;
    color: var(--c-gray-700);
    line-height: 1.3rem;
    text-overflow: ellipsis;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    margin-top: 0.7rem;
}

/** Chart **/
.chart-wrapper { position: relative; }
.chart-wrapper .highcharts-container  { margin: 0 auto; }

/* Bar chart */
.barchart-box {
    position: relative;
	display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    white-space: nowrap;
}
.barchart-box > *:not(.barchart) { flex-shrink: 0; }
.barchart {
    --borderRadius: 10px;
    display: inline-flex;
    width: 100%;
    height: 8px;
    background-color: var(--c-gray-300);
    border-radius: var(--borderRadius);
    margin: 4px 0;
}
.barchart.barchart-lg {
    --borderRadius: 6px; 
    height: 40px;
}
.barchart i {
    position: relative;
    height: 100%;
    background-color: var(--c-violet);
    /* border-radius: var(--borderRadius); */
}
.barchart i:first-child {
    border-top-left-radius: var(--borderRadius);
    border-bottom-left-radius: var(--borderRadius);
}
.barchart i:last-child {
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
}
.barchart.barchart-tip { margin-top: 1.3rem; }
.barchart.barchart-tip i::before {
    content: '';
    position: absolute;
    top: -1.3rem;
    right: -0.5rem;
    width: 1rem;
    height: 1rem;
    background-color: inherit;
    background-image: url(../new_images/icons/ico_barchart_tip.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate3d(0, 0, 0);
}

/* bar chart new version */
.horizon_bar_box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}  
.horizon_bar_box .bar_chart {
    width: 25.6rem;
    height: 1.6rem;
    background-color: var(--c-gray-1200);
    border-radius: 8px;
}  
.horizon_bar_box .bar_chart i {
    display: block;
    height: 100%;
    border-radius: 8px;
}

/* Bar chart - Rainbow (DSR) */
.barchart-rainbow {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 120px;
    margin: 1rem 0;
}
.barchart-rainbow::before {
    content: '';
    position: absolute;
    top: 35px;
    width: 100%;
    height: 40px;
    background: linear-gradient(90deg, #2e82ca, #62c626 18%, #ffcf11 42%, #ff6e35 64%, #fe6966 82%, #e22d72);
    border-radius: 0.6rem;
}
.barchart-rainbow li.target-data {
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    line-height: 1.3;
    transform: translateX(-100%);
    z-index: -1;
}
.barchart-rainbow li.target-data::before {
    content: '';
    position: absolute;
    top: 3.5rem;
    right: 0;
    bottom: 32px;
    width: 1px;
    background: repeating-linear-gradient(var(--target-color), var(--target-color) 2px, transparent 2px, transparent 4px);
}
.barchart-rainbow li.target-data.data-risk1 { --target-color: #ff6b58; }
.barchart-rainbow li.target-data.data-risk2 { --target-color: #eb406f; }
.barchart-rainbow li.target-data span {
    word-break: keep-all;
    font-size: var(--fs-xs);
    color: var(--target-color);
}
.barchart-rainbow li.target-data em { 
    font-size: var(--fs-sm);
    color: var(--c-gray-700);
}
.barchart-rainbow li.user-data {
    position: absolute;
    left: 0;
    display: inline-flex;
    transform: translateX(-50%);
    transition: all 1s ease-in-out;
}
.barchart-rainbow li.user-data span { white-space: nowrap; }
.barchart-rainbow li.user-data em { font-size: 0; }

/* 차트 범례 */
.chart-legend-box { 
    display: flex;
    justify-content: center;
}
.chart-legend-box > li { 
    display: flex; 
    align-items: center;
}


.chart-legend-box.flow {
    flex-wrap: wrap;
    white-space: normal;    
    justify-content: flex-start;
}
.chart-legend-box.flow .chart-legend { margin-bottom: 0.5rem; }
.chart-legend-box.flow .chart-legend > .d-block { margin-left: 1.2rem; } 
.chart-legend-box.flex-column > li + li { margin-top: 0.5rem; }

.chart-legend { display: block; }
.chart-legend { 
    position: relative;
    display: block !important;
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
    margin-right: 1rem;
}
.chart-legend::before {
    content: '';
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background-color: var(--c-black);
    border-radius: 50%;
    margin-right: 0.5rem;
}
.chart-legend:last-of-type { margin-right: 0; }

/* 범례 전용 색상 */
.chart-legend.legend-red::before { background-color: #f36b7f; }
.chart-legend.legend-pink::before { background-color: #fbe0dc; }
.chart-legend.legend-green::before { background-color: #81b3a3; }
.chart-legend.legend-blue::before { background-color: #3040c4; }
.chart-legend.legend-blue2::before { background-color: #d0e4f1; }
.chart-legend.legend-yellow::before { background-color: #f8cf61; }
.chart-legend.legend-gray::before { background-color: #dcdfe4; }
.chart-legend.legend-green2::before { background-color: #59c39b; }

.chart-legend.legend-square::before {
    content: '';
    display: inline-block;
    width: 1.2rem; 
    height: 1.2rem; 
    border-radius: 0.2rem; 
    margin-right: 0.6rem;
}
.chart-legend-text { 
    display: inline-flex;
    font-size: var(--fs-sm);
    overflow: hidden;
    margin-right: 5px;
}
.legend-dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    margin-right: 0.5rem;
}

/* 차트 툴팁 */
.chart-tooltip { 
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    text-align: center;
    color: var(--c-gray-700);
    background-color: #ffffff80;
    border: 1px solid var(--c-gray-600);
    border-radius: 0.5rem;
    padding: 0 1.3rem;
    padding: 0.5rem 0.8rem;
}
.chart-tooltip::before,
.chart-tooltip::after { 
    content: '';
    position: absolute;
    width: 0; 
    height: 0;
}
.chart-tooltip::before {     
    bottom: -6px;
    left: calc(50% - 4px);
    border-top: 6px solid var(--c-gray-600);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.chart-tooltip::after { 
    bottom: -4px;
    left: calc(50% - 3px);
    border-top: 5px solid var(--c-white);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}
.chart-tooltip.blue {
    display: flex;
    flex-direction: column;
    color: var(--c-white);
    background-color: var(--c-primary);
    padding: 1.1rem 1.3rem;
}
.chart-tooltip.blue::before {
    bottom: -6px;
    left: calc(50% - 4px);
    width: 0; 
    height: 0;
    border-top: 6px solid var(--c-primary);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.chart-tooltip.blue::after { content: none; }
.chart-tooltip.blue > span { color: #a4a4ff; }

/* 툴팁 이동용 */
.chart-tooltip.tooltip-flow {
    left: 0;
    transform: translateX(-100%);
    padding: 0.5rem 1.3rem;
    margin-bottom: 0.5rem;
}
.chart-tooltip.tooltip-flow::before,
.chart-tooltip.tooltip-flow::after { content: none;}

/* --------------------------------------------------------------- *
 *  Page - layout
 * --------------------------------------------------------------- */

/* Page wrapper */
.page-wrapper {
    position: relative;
    display: grid;
    grid-template-rows: min-content min-content min-content auto min-content;
    grid-template-areas: 'page-banner' 'page-inform' 'page-header' 'page-main' 'page-footer';
    width: 100%;
    height: 100vh;
    min-height: 100vh;

    padding-top: env(safe-area-inset-top);
    padding-top: constant(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}
.page-wrapper > *:not(.btn-go-top) { width: 100vw; }
.page-wrapper > .page-banner { grid-area: page-banner; }
.page-wrapper > .page-inform { grid-area: page-inform; }
.page-wrapper > header { grid-area: page-header; }
.page-wrapper > footer { grid-area: page-footer; }
.page-wrapper > main { grid-area: page-main; }
.page-wrapper.main {
    background-color: var(--c-gray-100);
    overflow: hidden;
    overflow-y: auto;
}
.page-wrapper.main .module-box { padding: 2rem var(--main-padding); }
.page-wrapper.sub > main,
.page-wrapper.fixed > main { 
    overflow: hidden;
    overflow-y: auto;
}
.page-wrapper.sub > header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--c-gray-300);
    padding: 0.8rem;
}
.page-wrapper.sub > header h1 {
    max-width: calc(100% - 80px);
    font-size: var(--fs-lg);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 auto;
}
.page-wrapper.sub > header .sub-prev,
.page-wrapper.sub > header .sub-close {
    position: absolute;
    width: 4.2rem;
    height: 4.2rem;
    font-size: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: 50% 50%;
    border: 0;
    padding: 0;
}
.page-wrapper.sub > header .sub-prev {
    order: -1;
    left: 0.6rem;
    background-image: url(../new_images/icons/ico_previous.svg);
}
.page-wrapper.sub > header .sub-close { 
    right: 0.6rem;
    background-image: url(../new_images/icons/ico_close.svg); 
}

/* Module box */
.module-group {
    display: flex;
    flex-direction: column;
}
.module-box {
    position: relative;
    padding: 3rem var(--main-padding);
}
.module-box-type-02 {
    position: relative;
    padding: 1.6rem;
}
.module-border { border-top: 10px solid var(--c-gray-200); }
.module-border-bottom { border-bottom: 10px solid var(--c-gray-200); }
.module-box.module-header { padding: 4rem 3rem; }

/* Page banner box */
.page-banner { margin-bottom: -1rem; }

/* Page inform box */
.page-inform {
    transition: opacity 0.1s ease-out;
    padding: 2rem var(--main-padding) 0;
}
.page-inform > .inform-box, 
.custom-inform-box {
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4.8rem;
    background-color: #eff2fb;
    border: 1px solid #dee6fe;
    border-radius: 12px;
    padding: 0 0.8rem 0 var(--main-padding);
}
.custom-inform-box { height: auto; min-height: 4.8rem; padding: 0 0.8rem 0 0; }
.page-inform.hide { opacity: 0; }
.page-inform > .inform-box a {
    color: var(--c-black);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 2.2rem;
}
.custom-inform-box .sub-link { 
    color: var(--c-black);
    padding: 1.6rem 0.8rem 1.6rem 4.4rem; 
}
.page-inform > .inform-box a::before,
.custom-inform-box .sub-link::before {
    content: '';
    position: absolute;
    top: calc(50% - 0.8rem);
    left: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../new_images/icons/ico_alarm.png) no-repeat;
    background-size: cover;
    margin-right: 0.5rem;
}
.page-inform > .inform-box button {
    width: 3rem;
    height: 3rem;
    font-size: 0;
    flex-shrink: 0;
    background: url(../new_images/icons/ico_close_round.svg) no-repeat;
    background-size: 1.6rem 1.6rem;
    background-position: 50% 50%;
    border: 0;
    padding: 0;
}

/* --------------------------------------------------------------- *
 *  Page - Elements
 * --------------------------------------------------------------- */
a.btn-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: 3.6rem;
    color: var(--c-gray-800);
    font-size: var(--fs-sm);
    text-decoration: none;
    text-align: center;
    border: 1px solid var(--c-gray-300);
    border-radius: 3.6rem;
    padding: 0.8rem 1.2rem;
}
a.btn-link + a.btn-link { margin-left: 1rem; }
a.btn-link.gray {
    background-color: var(--c-gray-800);
    color: var(--c-white);
}

 /* Card box with radius */
.card-box {
    position: relative;
    background-color: var(--c-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 2rem;
    
    transform: translateZ(0); /* 22.09.15, 구버전 앱 폐지 후 삭제 */
}
.card-box-purple {
    position: relative;
    background-color: #eeeef9;
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 3rem;
}
.card-box-sm {
    position: relative;
    background-color: var(--c-white);
    border-radius: var(--border-radius-sm);    
    padding: 1rem;

    overflow: hidden; /* 22.09.16 구버전 앱 폐지 후 삭제 */
}
[class*=card-box].card-dot {
    background-color: var(--c-gray-200);
    border: 1px dashed var(--c-gray-500);
}
[class*=card-box].card-border {  border: 1px solid var(--c-gray-400); }
[class*=card-box].card-border.border-blue {
    background-color: #f2f8ff;
    border-color: #deecfb;
}
[class*=card-box].card-border.border-blue .data-list.border-sm { border-color: #deecfb !important; }
[class*=card-box].card-border.border-gray-l {
    background-color: var(--c-gray-100);
    border-color: var(--c-gray-300);
}
[class*=card-box].card-border.border-primary {
    border-color: var(--c-primary);
}
.card-box > .card-footer {
    position: relative;
    width: calc(100% + 4rem);
    background: rgba(0, 0, 0, 0.15);
    padding: 1.8rem 2rem;
    margin: 2rem 0 -2rem -2rem;
}
.card-box-sm.purple-border {
    border: 2px solid #999be8;
    padding: 1.5rem;
}
.card-box-sm.purple-border > h5 {
    position: relative;
    display: inline-block;
    font-size: var(--fs-md);
    font-weight: 500;
    box-shadow: inset 0 -10px 0 #999be870;
}
.card-box [class*=card-box-bg] {
    position: absolute;
    right: 0;
    bottom: 0;
}
.card-box-sm.card-border.card-divide-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;        
    padding-left: 0;
    padding-right: 0;
    height: 5.4rem;
}
.card-box.icon {
    flex: 1;
    position: relative;
    padding: 1.6rem;
    border-radius: .8rem;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.card-box.icon[class*=gradient] {
    width: 10.4rem;
    height: 10.6rem;
}
.card-box.icon.gradient1 {
    background: var(--gradient1);
}
.card-box.icon.gradient2 {
    background: var(--gradient2);
}
.card-box.icon[class*=gradient] img {
    width: 2.8rem;
    height: 2.8rem;
}
.card-box.icon.gradient2.ty2::before {
    background: url(../new_images/icons/ico_reduction2.png) no-repeat;
    background-size: 3.2rem auto;
    background-position: center;
}

.card-box.icon.gradient2.ty3::before {
    background: url(../new_images/icons/ico_reduction3.png) no-repeat;
    background-size: 3.2rem auto;
    background-position: center;
}

.card-box.icon.gradient2.ty4::before {
    background: url(../new_images/icons/ico_reduction4.png) no-repeat;
    background-size: 3.2rem auto;
    background-position: center;
}

.card-box.icon.gradient3 {
    background: var(--gradient3);
}

.card-box > .calendar {
    background: url(../new_images/icons/ico_calendar2.svg) no-repeat;
    background-size: 2.4rem auto;
    background-position: 0 center;
}

/* bg - img로 변경 */
.text-box.icon[class*=gradient] img {
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1.3rem;
}

 /* Divide box */
.divide-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border-radius: 7px;
}
.divide-box > li {
    position: relative;
    width: 100%;
    padding: 1rem;
}
.divide-box > li + li::before {
    content: '';
    position: absolute;
    top: calc(50% - 11px);
    left: 0;
    width: 1px;
    height: 22px;
    background: var(--c-gray-400);
}
.divide-box.bg-gray {
    background: var(--c-gray-200);
    padding: 1rem 0;
}
.divide-box.divide-full > li { padding: 0; }
.divide-box.divide-full > li + li::before {
    top: 0;
    height: 100%;
    background: var(--c-gray-200);
}

/* Head box */
.head-box {
    width: 100%;
    color: var(--c-gray-800);
    text-align: center;
    border: 1px solid var(--c-gray-400);
    border-radius: 0.6rem;
    overflow: hidden;
}
.head-box + .head-box { margin-left: 0.8rem; }
.head-box dt {
    font-size: var(--fs-xs);
    background-color: var(--c-gray-200);
    padding: 0.6rem 0 0.4rem;
}
.head-box dd { padding: 0.8rem 0; }

/*금액 우측정렬*/
.form-amount {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--c-gray-400);
}
.form-amount .custom-input {
    text-align: right;
    border: 0;
    background-color: transparent;
}
.form-amount .custom-input + .unit {
    white-space: nowrap;
    padding: 0 9px 0 6px;
}
.form-amount .custom-input:disabled + .unit {
    color: var(--c-gray-400);
    height: 40px;
    line-height: 40px;
}
.form-amount .custom-input::-webkit-input-placeholder,
.form-amount .custom-input::placeholder { text-align: left; }
.form-amount:focus-within { border-bottom: 1px solid var(--c-black); }
.form-amount.error { border-color: var(--c-orange); }
.form-amount input.custom-input:required,
.form-amount input.custom-input.error,
.form-amount input.custom-input.error:focus { border-bottom: none; }

/* 금액표시 */
.number-unit {
    display: inline-flex;
    align-items: baseline;
    font-weight: 500;
}
.number-unit > .front { margin-right: 0.25em; }
.number-unit > .number { letter-spacing: -0.05rem; }
.number-unit > .unit { margin-left: 0.2em; }

 /* 아이콘 타이틀 */
.icon-title {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
}
.icon-title.reverse { grid-template-columns: 1fr min-content; }
.icon-title > *:first-child { margin-right: 0.5rem; }
.icon-title .icon16 {
    width: 1.6rem;
    height: 1.6rem;
}
.icon-title .icon12 {
    width: 1.2rem;
    height: 1.2rem;
}
.icon-title .icon16 {
    width: 1.6rem;
    height: 1.6rem;
}
.icon-title .icon20 {
    width: 2rem;
    height: 2rem;
}
.icon-title .icon24 {
    width: 2.4rem;
    height: 2.4rem;
}
.icon-title .icon30 {
    width: 3rem;
    height: 3rem;
}
.icon-title .icon32 {
    width: 3.2rem;
}
.icon-title .icon35 {
    width: 3.5rem;
    height: 3.5rem;
}
.icon-title .icon38 {
    width: 3.8rem;
    height: 3.8rem;
}
.icon-title .icon40 {
    width: 4rem;
    height: 4rem;
}
.icon-title .icon44 {
    width: 4.4rem;
    height: 4.4rem;
}
.icon-title .icon48 {
    width: 4.8rem;
    height: 4.8rem;
}
.icon-title .icon50 {
    width: 5rem;
    height: 5rem;
}
.icon-title .icon60 {
    width: 6rem;
    height: 6rem;
}

.main-title .icon24 {
    width: 2.4rem;
    height: 2.4rem; 
}

/* Icon with Deco */
.deco-icon { 
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 0;
}
.deco-icon::before {
    display: inline-block;
    content: '';
    background-position: 0 0;
    background-repeat: no-repeat;
}
.deco-icon.icon-16::before {
    width: 1.6rem;
    height: 1.6rem;
    background-size: cover;
}
.deco-icon.icon-20::before {
    width: 2rem;
    height: 2rem;
    background-size: cover;
}
.deco-icon.icon-30::before {
    width: 3rem;
    height: 3rem;
    background-size: cover;
}
.deco-icon.icon-40::before {
    width: 4rem;
    height: 4rem;
    background-size: cover;
}
.deco-icon.icon-44::before {
    width: 4.4rem;
    height: 4.4rem;
    background-size: cover;
}
.deco-icon.icon-48::before {
    width: 4.8rem;
    height: 4.8rem;
    background-size: cover;
}
.deco-icon.icon-50::before {
    width: 5rem;
    height: 5rem;
    background-size: cover;
}
.deco-icon.icon-60::before {
    width: 6rem;
    height: 6rem;
    background-size: cover;
}
.deco-icon.icon-70::before {
    width: 7rem;
    height: 7rem;
    background-size: cover;
}
.deco-icon.ico-arrow-w::before { background-image: url(../new_images/icons/ico_arrow_right_w.svg); }
.deco-icon.ico-arrow-next::before { background-image: url(../new_images/icons/ico_arrow_next.svg); }

.deco-icon.ico-fund01::before { background-image: url(../new_images/views/inve/ico_fund01.svg); }
.deco-icon.ico-fund02::before { background-image: url(../new_images/views/inve/ico_fund02.svg); }
.deco-icon.ico-fund03::before { background-image: url(../new_images/views/inve/ico_fund03.svg); }
.deco-icon.ico-fund04::before { background-image: url(../new_images/views/inve/ico_fund04.svg); }
.deco-icon.ico-autolog01::before { background-image: url(../new_images/views/inve/ico_autolog01.svg); }
.deco-icon.ico-autolog02::before { background-image: url(../new_images/views/inve/ico_autolog02.svg); }
.deco-icon.ico-autolog03::before { background-image: url(../new_images/views/inve/ico_autolog03.svg); }

.deco-icon.ico-insu01::before { background-image: url(../new_images/views/insu/ico_insu01.svg); }
.deco-icon.ico-insu02::before { background-image: url(../new_images/views/insu/ico_insu02.svg); }
.deco-icon.ico-insu03::before { background-image: url(../new_images/views/insu/ico_insu03.svg); }
.deco-icon.ico-insu11::before { background-image: url(../new_images/views/insu/ico_insu11.svg); }
.deco-icon.ico-insu12::before { background-image: url(../new_images/views/insu/ico_insu12.svg); }

/* data-list */
.data-list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr max-content;
}
.data-list.reverse { grid-template-columns: max-content 1fr; }
.data-list.list-block { grid-template-columns: 1fr; }
.data-list.border { padding: 2rem 0; }
.data-list.border-sm { padding: 1rem 0; }
.data-list.border + .data-list.border,
.data-list.border-sm + .data-list.border-sm { border-top: 1px solid var(--c-gray-300); }
.data-list dt,
.data-list dd {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    font-size: var(--fs-df);
    color: var(--c-gray-800);
    white-space: normal;
    overflow: hidden;
    padding: 0.4rem 0;
}
.data-list dt { 
    color: var(--c-gray-700); 
    padding-right: 1rem;
}
.data-list dd { 
    align-items: flex-end;
    text-align: right;
}

.data-list dt.valign-bottom,
.data-list dd.valign-bottom { justify-content: flex-end; }

.data-list .flex-row { 
    justify-content: flex-start;
    align-items: center;
}

.data-list.padding-20 dt,
.data-list.padding-20 dd { padding-top: 2rem; }

.data-list.fc-white dt { opacity: 0.8; }
.data-list.fc-white dt,
.data-list.fc-white dd { color: var(--c-white) }

/* data-list-block */
.data-list-block {
    width: 100%;
    border-bottom: 1px solid var(--c-gray-400);
}
.data-list-block > li > .data-list {
    padding: 0.6rem 1.6rem;
    background-color: var(--c-gray-100);
    border-top: 1px solid var(--c-gray-400);
    color: var(--c-black);
}
.data-list-block ul  {
    width: 100%;
    border-top: 1px solid var(--c-gray-300);
    padding: 0.9rem 1.6rem 0.9rem 2.4rem;
}

/* order-list */
ol.order-list { counter-reset: order-count; }
ol.order-list > li .order-count { display: inline-block; }
ol.order-list > li .order-count::before {
    position: relative;    
    content: counter(order-count);
    counter-increment: order-count;
    margin-right: 1rem;
}
ol.order-list > li .order-count.count-round::before {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.7em;
    height: 1.7em;
    font-size: 0.85em;
    line-height: 1;
    color: var(--c-white);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    margin-right: 0.6rem;
}
ol.order-list > li .order-count.count-round.white::before {
    color: var(--c-gray-700);
    background-color: var(--c-white);
}
ol.order-list > li .order-count.count-round ~ * { color: var(--c-white); }
ol.order-list > li .order-count.count-round:not(.white) ~ * { opacity: 0.5; }
ol.order-list > li .order-count.count-top5 {
    position: absolute;
    top: 0;
    width: 3rem;
    height: 4.4rem;
    font-size: var(--fs-md);
    font-weight: 700;
}
ol.order-list > li .order-count.count-top5::before {
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    background: url(../new_images/icons/ico_top5.svg) no-repeat;
    background-size: contain;
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 0.6rem;
}

ol.order-list.count-step > li {     
    position: relative;    
    padding-left: 7rem;
    min-height: 10rem;
}
ol.order-list.count-step > li::after {
    content: counter(order-count);
    counter-increment: order-count;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
    font-weight: bold;
    color: var(--c-black);
    background-color: var(--c-gray-100);
    border: 2px solid var(--c-primary);
    border-radius: 50%;    
}
ol.order-list.count-step > li::before {
    content: '';
    position: absolute;
    left: 2.5rem;
    width: 2px;
    height: 100%;
    background-color: var(--c-primary); 
}
ol.order-list.count-step > li:last-child,
ol.order-list.count-step > li:last-child::before { min-height: auto; }

ul.count-step > li {     
    position: relative;    
    padding-left: 2rem;
    min-height: 7rem;
}
ul.count-step > li::after {
    position: absolute;
    top: 0.6rem;
    left: 0;
    content: '';
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--c-primary);
    background-color: var(--c-white);
    border-radius: 50%;
}
ul.count-step > li::before {
    content: '';
    position: absolute;
    top: 0.6rem;
    left: 0.4rem;
    width: 2px;
    height: 100%;
    border: 1px dotted #eee;
}
ul.count-step > li:last-child,
ul.count-step > li:last-child::before { border: 0; }


.list-inline { display: inline-flex; }
.list-inline > li + li { margin-left: 1.2rem }
.list-inline > li:nth-child(1) .box-color { background-color: #49b3db !important; }
.list-inline > li:nth-child(2) .box-color { background-color: #4988db !important; }
.list-inline > li:nth-child(3) .box-color { background-color: #4966db !important; }
.list-inline > li:nth-child(4) .box-color { background-color: #713dcb !important; }
.list-inline > li:nth-child(1) .box-color2 { background-color: #595e89 !important; }
.list-inline > li:nth-child(2) .box-color2 { background-color: #7c6bc4 !important; }
.list-inline > li:nth-child(3) .box-color2 { background-color: #8a7256 !important; }
.list-inline > li:nth-child(4) .box-color2 { background-color: #708a56 !important; }
.list-inline > li:nth-child(5) .box-color2 { background-color: #4b5ac1 !important; }

.swiper-wrapper > .swiper-slide:nth-child(1) .box-color2 { background-color: #595e89 !important; }
.swiper-wrapper > .swiper-slide:nth-child(2) .box-color2 { background-color: #7c6bc4 !important; }
.swiper-wrapper > .swiper-slide:nth-child(3) .box-color2 { background-color: #8a7256 !important; }
.swiper-wrapper > .swiper-slide:nth-child(4) .box-color2 { background-color: #708a56 !important; }
.swiper-wrapper > .swiper-slide:nth-child(5) .box-color2 { background-color: #4b5ac1 !important; }
.swiper-wrapper > .swiper-slide:nth-child(6) .box-color2 { background-color: #545e67 !important; }

/* 계좌상세 on/off */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--c-gray-100);
    border-top: 1px solid var(--c-gray-300);
    padding: 10px 12px;
}
.detail-header + .detail-block { padding-top: 1.5rem; }
.detail-block + .detail-block { padding-top: 2.5rem }
.detail-block .detail-collapse {
    overflow: hidden;
    margin-top: 1rem;
}
.detail-block .detail-footer {
    text-align: center;
    border-top: 1px solid var(--c-gray-400);
    margin-top: 1rem;
}

/* Arrow Up/Down */
.arrow-up,
.arrow-down,
.number-up,
.number-down { 
    position: relative;
    font-weight: 700;
}
.arrow-up,
.number-up { color: var(--c-num-red); }
.arrow-down,
.number-down { color: var(--c-num-blue); }
.arrow-up::before,
.arrow-down::before {
    content: '';
    display: inline-block;
    border-right: 0.5rem solid transparent;
    border-left: 0.5rem solid transparent;
    margin: 0 0.5rem 0.1rem 0;
}
.arrow-up::before { border-bottom: 0.8rem solid var(--c-num-red); }
.arrow-down::before { border-top: 0.8rem solid var(--c-num-blue); }
.number-up::before,
.number-down::before { display: inline-block; }
.number-up::before { 
    content: '+';
    color: var(--c-num-red);
}
.number-down::before { 
    content: '-'; 
    color: var(--c-num-blue);
}
.number-up.differ::before, 
.number-down.differ::before {
    content: '';
} 
.number-up.differ .number::before {
    content: '+';
}
.number-down.differ .number::before {
    content: '-';
}
.number-up .percent::before {
    content: '(+';
    color: var(--c-num-red);
}
.number-up .percent::after {
    content: ')';
    color: var(--c-num-red);
}
.number-down .percent::before { 
    content: '(-'; 
}
.number-down .percent::after { 
    content: ')'; 
}
.number-even::before { 
    content: ''; 
    color: var(--c-gray);
}
.number-up.fc-white::before,
.number-down.fc-white::before,
.number-even.fc-white::before { color: var(--c-white); }
.number-up.fc-yellow::before,
.number-down.fc-yellow::before,
.number-even.fc-yellow::before { color: var(--c-yellow); }
.number-up.fc-green::before,
.number-down.fc-green::before,
.number-even.fc-green::before { color: #53bba5; }

/* Main Sticky Tab */
.sticky-wrap > main > .tab-head.main-tab.is-pinned { border-radius: 0; }
.sticky-wrap > main > .tab-head.main-tab .tab-btn {
    align-items: center;
    flex-basis: unset;
    flex-grow: 0;
    height: 4.7rem;
    padding: 0;
}
.sticky-wrap > main > .tab-panel { 
    display: block;
    padding: 0 var(--main-padding) 3rem;
}
/* .sticky-wrap > main > .tab-panel:last-child { min-height: 100vh; } */
.sticky-wrap > main > .tab-panel > .module-box { padding: 2rem 0; }
.sticky-wrap > main > .tab-panel > .module-box + .module-box { padding-top: 0; }

 /* --------------------------------------------------------------- *
 *  Page - ETC
 * --------------------------------------------------------------- */
 /* 약관 */
.policy-terms {
    font-size: var(--fs-sm);
    margin: 20px 0;
}
.policy-terms h3 { font-size: var(--fs-md); }
.policy-terms h4 { margin-top: 20px; }
.policy-terms h4 + p,
.policy-terms ol { margin-top: 10px }
.policy-terms > ol li{
    margin-top: 5px;
    margin-left: 10px;
}

/** Home **/
/* 홈 - MY 자산 */
/* .card-box.home-assets {
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
    color: var(--c-white);
    background-image: linear-gradient(122deg, #3859c7 -19%, #9b009b 116%);
    box-shadow: var(--box-shadow);
    padding: 2rem;
}
.card-box.home-assets .asset-count {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.6rem;
    height: 2.6rem;
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: 1rem;
}
.card-box.home-assets .asset-count.asset-add {
    background: url(../new_images/icons/ico_plus_white.svg) no-repeat;
    background-size: 1rem 1rem;
    background-position: 50% 50%;
}
.card-box.home-assets .asset-count.asset-add::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--c-white);
    border-radius: 50%;
    opacity: 0.15;
}
.card-box.home-assets .asset-count + p { font-size: var(--fs-sm); } */

/* 홈 - MY 자산 - NEW */
.card-box.home-assets {
    position: relative;
    color: var(--c-white);
    background-image: linear-gradient(122deg, #3859c7 -19%, #9b009b 116%);
    box-shadow: var(--box-shadow);
}
.card-box.home-assets > .card-body {
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
}
.card-box.home-assets > .card-body > a > p { opacity: 0.8; }
.card-box.home-assets > .card-footer { margin-top: 2rem; }
.card-box.home-assets .asset-count {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.6rem;
    height: 2.6rem;
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: 1rem;
}
.card-box.home-assets .asset-count.asset-add {
    background: url(../new_images/icons/ico_plus_white.svg) no-repeat;
    background-size: 1rem 1rem;
    background-position: 50% 50%;
}
.card-box.home-assets .asset-count.asset-add::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--c-white);
    border-radius: 50%;
    opacity: 0.15;
}
.card-box.home-assets .asset-count + p { font-size: var(--fs-sm); }

/* 홈 - 금융 시뮬레이션 */
.home-simul {
    background-color: var(--c-primary);
    border-radius: 0;
    overflow: visible;
    padding-bottom: 11rem;
    margin-bottom: 3.5rem;
}
.home-simul .home-grid-box-2 {
    position: absolute;
    bottom: -3rem;
    left: 2rem;
    right: 2rem;
    width: auto;
    padding: 0; 
}
.home-simul .home-grid-box-2 > .sub-link:nth-child(1),
.home-simul .home-grid-box-2 > .sub-link:nth-child(2) { border-top: 0; }
.home-simul .home-grid-box-2 > .sub-link {
    justify-content: flex-start;
    height: 5.8rem;
    padding-left: 1.5rem;
}
.home-simul .home-grid-box-2 > .sub-link::before {
    content: '';
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem
}
.home-simul .home-grid-box-2 > .sub-link.icon-interest::before { background: url(../new_images/views/home/ico_simul01.svg); }
.home-simul .home-grid-box-2 > .sub-link.icon-annu::before { background: url(../new_images/views/home/ico_simul02.svg); }
.home-simul .home-grid-box-2 > .sub-link.icon-dsr::before { background: url(../new_images/views/home/ico_simul03.svg); }
.home-simul .home-grid-box-2 > .sub-link.icon-deduct::before { background: url(../new_images/views/home/ico_simul04.svg); }
.home-grid-box-2 > a:active { background-color: var(--c-gray-300); }

.home-grid-box-2 {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(50%, 1fr));
}
.home-grid-box-2 > .sub-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 5.3rem;
    border-top: 1px solid var(--c-gray-400);
    border-right: 1px solid var(--c-gray-400);
}
.home-grid-box-2 > .sub-link:nth-child(even) { border-right: 0; }

/* 홈 - 투자 리포트 */
.link-home-report {
    position: relative;
    display: inline-block;
    width: 12.6rem;
    height: 15.6rem;
    text-decoration: none;
    line-height: 1.33;
    color: var(--c-white);
    /* background-color: #49b3db; */
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    border-top-right-radius: 0.4rem;
    flex-shrink: 0;
    padding: 1.8rem;
    overflow: hidden; /* 22.09.16 */
}
.link-home-report::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../new_images/views/home/img_report_logo.svg) no-repeat;
    background-position: 0 100%;
    opacity: 0.05;
}
.link-home-report:nth-child(1) { background-color: #49b3db; }
.link-home-report:nth-child(2) { background-color: #4988db; }
.link-home-report:nth-child(3) { background-color: #4966db; }
.link-home-report:nth-child(4) { background-color: #713dcb; }
.link-home-report + .link-home-report { margin-left: 1.2rem; }
.link-home-report > p {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 5px;
}
.link-home-report > i {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 400;
    font-style: normal;
    opacity: 0.6;
}

/* 홈 - Fixed banner 2 */
.home-fixed-banner2 { margin-bottom: -3rem; }
.home-fixed-banner2 .card-box {
    color: var(--c-white);
    background-repeat: no-repeat;
    background-size: 16rem 16rem;
    background-position: calc(100% - 2rem) calc(100% - 5rem);
    padding-bottom: 11rem;
    overflow: hidden;
    z-index: 1;
}
.home-fixed-banner2 .card-box::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5rem;
    background-color: rgba(0, 0, 0, 0.15);
}
.home-fixed-banner2 .swiper-slide:nth-of-type(1) .card-box { 
    background-color: #7551aa;
    background-image: url(../new_images/views/home/img_fix2_banner01.png); 
}
.home-fixed-banner2 .swiper-slide:nth-of-type(2) .card-box { 
    background-color: #4b5ac1;
    background-image: url(../new_images/views/home/img_fix2_banner02.png); 
}
.home-fixed-banner2 .swiper-slide:nth-of-type(3) .card-box { 
    background-color: #8a7256;
    background-image: url(../new_images/views/home/img_fix2_banner03.png); 
}
.home-fixed-banner2 .swiper-slide:nth-of-type(4) .card-box { 
    background-color: #95af54;
    background-image: url(../new_images/views/home/img_fix2_banner04.png); 
}
.home-fixed-banner2 .card-box > i.sub-title {
    position: relative;
    display: inline-block;
    font-style: normal;
    font-size: var(--fs-sm);
    letter-spacing: -0.06rem;
    padding: 0.7rem 1.3rem;
    margin-bottom: 0.8rem;
}
.home-fixed-banner2 .card-box > i.sub-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3rem;
    z-index: -1;
}
.home-fixed-banner2 .card-box > h4 { 
    font-size: var(--fs-2xl);
    font-weight: 500;
    letter-spacing: -0.06rem;
    line-height: 1.25;
    margin-bottom: 1rem;
}
.home-fixed-banner2 .card-box > p {
    line-height: 1.29;
    opacity: 0.8;
}
.home-fixed-banner2.swiper-container-horizontal > .swiper-pagination-bullets {
    display: inline-block;
    bottom: 3.5rem;
}
.home-fixed-banner2 .swiper-pagination-bullet { opacity: 0.5; }
.home-fixed-banner2 .swiper-pagination-bullet-active { background-color: var(--c-white); }

/* 자산분석 리포트 메인 */
.main-assets-report > .main-header {
    background-color: #524d6c;
    color: var(--c-white);
    padding: 4rem calc(2 * var(--main-padding)) 9.5rem !important;
}
.main-assets-report > .tab-head.main-tab {
    justify-content: space-between;
    background-color: var(--c-gray-100);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding-top: 1.2rem;
    margin-top: -5.5rem;
}

/* 뱅킹 - 여유자금 */
[class*="surplus-bank"]{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: url(../new_images/views/bank/bg_circle.png) no-repeat 0 0;
    background-size: contain;
}
.surplus-bank01{
    width: 14rem;
    height: 14rem;
}
.surplus-bank02{
    top: calc(50% + 65px);
    left: calc(50% + 105px);
    width: 7rem;
    height: 7rem;
}
.surplus-bank03{
    top: calc(50% - 15px);
    left: calc(50% - 110px);
    width: 5.5rem;
    height: 5.5rem;
}
.surplus-bank04{
    top: calc(50% - 76px);
    left: calc(50% + 89px);
    width: 4rem;
    height: 4rem;
} 
/* 새 디자인 22.08.30 */
[class*="surplus-rank"]{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
[class*="surplus-rank"]::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background: url(../new_images/views/bank/bg_circle.png) no-repeat 0 0;
    background-size: contain;
}
[class*="surplus-rank"] img, 
[class*="surplus-rank"] span { position: relative; }
.surplus-rank01{
    width: 13rem;
    height: 13rem;
    animation: fadeIn 0.6s;
}
.surplus-rank02{
    width: 10rem;
    height: 10rem;
    animation: fadeIn 1.2s;
}
.surplus-rank03{
    width: 8.2rem;
    height: 8.2rem;
    animation: fadeIn 1.8s;
}
.surplus-rank04{
    width: 6.4rem;
    height: 6.4rem;
    animation: fadeIn 2.4s;
}
.surplus-rank05{
    width: 5rem;
    height: 5rem;
    animation: fadeIn 3s;
}
.surplus-rank06{
    width: 4rem;
    height: 4rem;
    animation: fadeIn 3.6s;
}
.surplus-rank02::before { opacity: 0.9; }
.surplus-rank04::before { opacity: 0.7; }
.rank-position {
    position: absolute;
    top: 50%;
    left: 50%;
}
.surplus-rank01.rank-position { transform: translate(-50%, calc(-50% - 1rem)); }
.surplus-rank02.rank-position { transform: translate(calc(-50% - 11.5rem), calc(-50% - 8rem)); }
.surplus-rank03.rank-position { transform: translate(calc(-50% + 11rem), calc(-50% + 8.5rem)); }
.surplus-rank04.rank-position { transform: translate(calc(-50% + 10rem), calc(-50% - 8rem)); }
.surplus-rank05.rank-position { transform: translate(calc(-50% - 11rem), calc(-50% + 8rem)); }
.surplus-rank06.rank-position { transform: translate(calc(-50% + 14rem), -50%); }

@keyframes fadeIn { 0% { opacity: 0; margin-top: 2rem; } 100% { opacity: 1; margin-top: 0; } }


/* 투자 - 관심종목리포트 썸네일 */
.thumnail-report {
    width: 10rem;
    height: 5.6rem;
    background-color: var(--c-gray-200);
    overflow: hidden;
}
.thumnail-report img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.float-loading {
    position: fixed;
    top: -50px;
    left: calc(50% - 22px);
    width: 44px !important;
    height: 44px;
    font-size: 0;
    /* color: var(--c-white);
    background-color: var(--c-white);
    box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.25); */
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 1000;
}
.float-loading::before {
    content: '';
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    background: url(../images/icons/icon_refresh_blue.png) no-repeat;
    background-size: 20px 20px;
    background-position: 50% 50%;
    animation: float-loading infinite linear 1s;
}
/* .float-loading.show::before { animation: float-loading infinite linear 1s; } */

@keyframes float-loading {
    100% { transform: rotate(360deg); }
}

/* 설문조사항목 범위 슬라이더( Custom-slider-vertical) */
.custom-slider {
    --slider-size: 100%;
    position: relative;
    display: flex;
    align-items: center;
    width: 3rem;
    height: var(--slider-size);
    touch-action: none;
}
.custom-slider::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 1rem;
    height: 100%;
    background-color: #ddd;
    border-radius: 10px;
    transform: translateX(-50%);
}
.custom-slider > .slider { margin-left: calc(50% - 0.5rem); }
.custom-slider > .slider i {
    position: absolute;
    width: 1rem;
    background-color: #17a2b8;
}
.custom-slider > .slider i:nth-child(1) {
    top: 0;
    background-color:#e22d72;
}
.custom-slider > .slider i:nth-child(2) {
    top: 25%;
    bottom: 50%;
    background-color:#dd9252;
}
.custom-slider > .slider i:nth-child(3) {
    top: 50%;
    bottom: 25%;
    background-color:#48aa9e;
}
.custom-slider > .slider i:nth-child(4) {
    bottom: 0;
    background-color:#dcdfe4;
}
.custom-slider input {
    position: absolute;
    top: 0;
    width: var(--slider-size);
    height: 3rem;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    transform: rotate(90deg) translate(-0.3rem, -3rem);
    transform-origin: top left;
}
.custom-slider input::-webkit-slider-thumb {
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 50%;
    box-shadow: 0 0.3rem 0.6rem 0 rgba(0, 0, 0, 0.36);    
    -webkit-appearance: none;
    pointer-events: auto;
}

/* 자동차 상세 메인  */
.car-main-bg {
    position: relative;
    background-color: #f4f6fd;
    padding: 10.5rem var(--main-padding) 3rem;
    margin-left: calc(-1 * var(--main-padding));
    margin-right: calc(-1 * var(--main-padding));
}
.car-main-img {
    position: absolute;
    top: 0;
    right: 0;
}
.car-sub-img {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

/* 부동산 수정 헤더 bg  */
.lan-edit-bg::after {
    content: '';
    position: absolute;
    width: 12rem;
    height: 12rem;    
    top: 1rem; 
    right: -4rem;    
    background: url(../new_images/views/lan/img_location.svg) no-repeat;
}

/* 	보유종목 분석 */
.stock-weather-legend { 
    display: flex; 
    justify-content: flex-start;
    align-items: center;
    height: 1.8rem; 
}
.stock-weather-legend>li>img { 
    width: 1.8rem;
    height: 1.8rem; 
}
.stock-weather-legend>li>span { 
    display: block;
    width: 2rem; 
    height: 1.2rem; 
}
.stock-weather-legend>li:nth-child(2)>span { 
    margin-left: 0.5rem;    
    border-top-left-radius: 1.6rem;
    border-bottom-left-radius: 1.6rem;
    overflow: hidden; /* 22.09.15 구버전 앱 폐지 후 삭제 */
}
.stock-weather-legend>li:nth-child(6)>span { 
    margin-right: 0.5rem; 
    border-top-right-radius: 1.6rem;
    border-bottom-right-radius: 1.6rem;
    overflow: hidden; /* 22.09.15 구버전 앱 폐지 후 삭제 */
}

/* 22.09.15 구버전 앱 폐지 후 삭제 */
.weather-gray { background: linear-gradient(#c3cdd6, #c3cdd6); }
.weather-sky-blue { background:linear-gradient(#b2defd, #b2defd); }
.weather-yellow { background:linear-gradient(#fee54e, #fee54e); }
.weather-orange { background:linear-gradient(#fda355, #fda355); }
.weather-red { background:linear-gradient(#fc7352, #fc7352); }

/* 22.09.15 구버전 앱 폐지 후 복구 */
/* .weather-gray { background-color: #c3cdd6;}
.weather-sky-blue { background-color: #b2defd; }
.weather-yellow { background-color: #fee54e; }
.weather-orange { background-color: #fda355;  }
.weather-red { background-color: #fc7352;  } */

.stock-weather-box { 
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(50%, 1fr));
}
.stock-weather-box > *:nth-child(even) { margin-left: 0.2rem; }
.stock-weather-box > *:nth-child(n + 3) { margin-top: 0.2rem; }
.card-box.card-weather {
    position: relative;
    border-radius: 0;
    padding: 2rem 1rem;
    width: 100%;
    height: 16.7rem;
    align-self: flex-start;
}
/* tabs type */
.stock-weather-box.tab-head::before { height: 0; border-bottom: 0; }
.stock-weather-box.tab-head .tab-btn.is-selected { border-bottom: 0; }
.stock-weather-box.tab-head .tab-btn { 
    border-bottom: 0;
    white-space: normal; 
}

/* 22.09.15 구버전 앱 폐지 후  복구 */
/* .stock-weather-box .tab-btn .card-weather { border: 1px solid transparent; }
.stock-weather-box .tab-btn.is-selected .card-weather { border-color: #000; } */

/* 22.09.15 구버전 앱 폐지 후 삭제 */
.stock-weather-box .tab-btn .card-weather { box-shadow: 0 0 1px 1px rgba(0,0,0,0); }
.stock-weather-box .tab-btn.is-selected .card-weather {box-shadow: 0 0 1px 1px #000; }

.stock-weather-box .tab-btn:first-child .card-weather, 
.stock-weather-box:not(.tab-head) .card-weather:first-child { 
    border-top-left-radius: 1.2rem; 
    overflow: hidden; /* 22.09.15 구버전 앱 폐지 후 삭제 */
}
.stock-weather-box .tab-btn:nth-child(2) .card-weather,
.stock-weather-box:not(.tab-head) .card-weather:nth-child(2) { 
    border-top-right-radius: 1.2rem; 
    overflow: hidden; /* 22.09.15 구버전 앱 폐지 후 삭제 */
}
.stock-weather-box .tab-btn:nth-child(3) .card-weather,
.stock-weather-box:not(.tab-head) .card-weather:nth-child(3) { 
    border-bottom-left-radius: 1.2rem; 
    overflow: hidden; /* 22.09.15 구버전 앱 폐지 후 삭제 */
}
.stock-weather-box .tab-btn:last-child .card-weather,
.stock-weather-box:not(.tab-head) .card-weather:last-child { 
    border-bottom-right-radius: 1.2rem; 
    overflow: hidden; /* 22.09.15 구버전 앱 폐지 후 삭제 */
}
/* .card-box.card-weather:first-child { border-top-left-radius: 1.2rem; }
.card-box.card-weather:nth-child(2) { border-top-right-radius: 1.2rem; }
.card-box.card-weather:nth-child(3) { border-bottom-left-radius: 1.2rem; }
.card-box.card-weather:last-child { border-bottom-right-radius: 1.2rem; } */

/* 대출한도 비교 */
.custom-gradients { position: relative; }
.custom-gradients::before, 
.custom-gradients::after { 
    content: '';
    position: absolute;
    top: 0;
    display: block;
    width: 6.4rem;
    height: 100%;
}
.custom-gradients::before { left: 0; background-image: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)); }
.custom-gradients::after { right: 0; background-image: linear-gradient(to left, #fff 30%, rgba(255,255,255,0)); }

/* 투자 - 인증서 */
.border-level {
    border-width: 2px 0 0 0;
    border-style: solid none none;
}
.border-level.unique {border-color: #383b42;}
.border-level.level1-1 {border-color: #798393;}
.border-level.level1-2 {border-color: #596d92;}
.border-level.level2-1 {border-color: #44808a;}
.border-level.level2-2 {border-color: #357360;}
.border-level.level3 {border-color: #3c52a0;}
.border-level.level4 {border-color: #623187;}
.border-level.level5 {border-color: #6e5c5a;}
.border-level.level6 {border-color: #8f8451;}

.inve-cert, .cert-content {
    position: relative;
    display: grid;
    height: 100%;
    padding: 0;
}
.inve-cert { grid-template-rows: auto 1fr; }
.cert-content {
    grid-template-rows: 1fr auto;
    background-color: #292c34;
    padding: 3rem 2rem;
}
.cert-content-bg {
    background:#13161e url(../new_images/views/inve/img_inve_cert_bg.png) no-repeat;
    background-size: cover;
}
.inve-cert .fc-num-blue { color:  #7f82fd !important; }
.inve-cert .data-list dt, 
.inve-cert .data-list dd { color: inherit !important; }

.ff-number { font-family: 'Roboto',sans-serif;}
.ff-nanum { font-family: 'NanumPenScript-Regular'; }
.fc-cert-yellow { color: #ecd6ae; }
.fc-cert-gray-l { color: var(--c-gray-200); }
.fc-cert-gray-l>.fc-num-blue { color:  #7f82fd !important; }

/* Home page - Reload & floating icon (임시) */
.main-reload {
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    height: 22px;
    font-size: 0;
    color: transparent;
    background-color: transparent;
    border: 0;
    pointer-events: all;
    padding: 0;
}
.main-reload::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../new_images/icons/ico_refresh.svg) no-repeat;
    background-size: 14px 14px;
    background-position: 50% 50%;
}
.main-reload.start { pointer-events: none; }
.main-reload.start::before { animation: float-loading infinite linear 1s; }
.main-reload > span {
    font-size: var(--fs-sm);
    color: var(--c-black);
    margin-right: 7px;
    display: none;
}
.main-reload.start > span { display: block; }
.main-reload.gray > span {color: var(--c-gray-700);}
.main-reload i { font-style: normal; }

/* 다른 금융 */
.text-link.text-icon-info::before { background-image: url(../new_images/icons/ico_info.svg); width: 1.3rem;  height: 1.3rem; }
.card-box.home-assets.others {
    position: relative;
    color: var(--c-white);
    background-image: linear-gradient(128deg, #4c70b9 0%, #6989c9 100%);
    box-shadow: var(--box-shadow);    
}
.card-box.home-assets.others .logo { position:absolute; top:0; left:0; width: 15.2rem; }
.card-box.home-assets.others .info-text { position: relative; text-align: center; padding-top: 4rem; background-color: rgba(72, 8, 184, 0.2); }
.card-box.home-assets.others .card-body { background-color: rgba(72, 8, 184, 0.2) }
.card-box.home-assets.others .card-footer { 
    margin-top: 0; 
    margin-bottom: 0; 
    padding-left: 4rem; 
    padding-right: 4rem;
    padding-bottom:2.2rem; 
    background: transparent; 
    }
.main-reload.fc-white::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 22px;
    background: url(../new_images/icons/ico_refresh_01.svg) no-repeat;
    filter:brightness(200%);
    background-size: 11px 11px;
    background-position: 50% 50%;
}
.main-reload.fc-white span { color: var(--c-white) !important;  }

.icon-excalmation-bank { width: 1.6rem; height: 1.6rem; 
    background: url(../new_images/icons/icon_excalmation_bank.png) no-repeat 0 0; 
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}
.sub-text-unit { 
    display: inline-flex;
    color: #ff5353;
}
.btn-red{ 
    background: #bd527e;
    color: #fff;
}
.text-c{
    text-align: center;
}

/* 보험비교 서비스 */
.insurance-compare h3 {
    font-size:2.2rem;
    margin-top:-0.2rem;
    letter-spacing:-0.06rem;  
    line-height:1.25;      
}
.insurance-compare .module-box p {
    color:#999;
    font-size:1.1rem;
    letter-spacing:-0.04rem; 
    line-height:1.25;      
}
.insurance-compare.page-wrapper.main .module-box {
    padding-top:3rem;
    padding-bottom:3rem;
}
.insurance-compare .module-box1 > div {
    height:calc(76vw + 80px);
}
.insurance-compare .box1-img {
    position:absolute;
    overflow:hidden;
    width:100%;
    height:76vw;
}
.insurance-compare .module-box1 img {
    transform:scale(1.02);
    transform-origin:left top;
}
.insurance-compare .module-box2 {
    background-color:#f2f4fc;
}
.insurance-compare .module-box2 img {
    padding:0 2.8rem
}
.insurance-compare .module-box3 {
    background:linear-gradient(to bottom, #f9defc 44%,#f0c6f5 100%);
}
.insurance-compare .module-box4 img {
    padding:0 1.8rem
}
.insurance-compare .module-box5 {
    background-color:#fbe9fd
}
.insurance-compare .module-box6 {
    padding:1.8rem 2rem;
}
.insurance-compare .module-box6 p {
    font-size:1.1rem;
    letter-spacing:-0.04rem;
}
.insurance-compare .bottom-sheet {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    padding:4.2rem 1.6rem 1.8rem;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 11%)
}
.insurance-compare .bottom-sheet span {
    color: #4152a2;
}


/* 카드이벤트 detail 2023-03-13 */
.card-event-detail .module-box1 {
    padding:2rem var(--main-padding)
}
.card-event-detail .module-box1 h2 {font-size:2.6rem;line-height:3.2rem;font-weight:500;}
.card-event-detail .module-box h3 {
    font-size:2.2rem;
    line-height: 1.2;
}
.card-event-detail .card-list {
    display:flex;
    flex-direction: column;
    gap:4rem;
}
.card-event-detail .card-item {
    display:flex;
    padding-right:1.4rem;
}
.card-event-detail .card-item .card-img {
    display:flex;
    justify-content: center;
    align-items: center;
    flex:6rem;
    width:6rem;
    height:4.5rem;            
    margin-right:0.3rem;
    }
.card-event-detail .card-item .card-img img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}
.card-event-detail .card-item .card-name {
    flex:calc(100% - 11.6rem);
    padding-right:2.8rem
}
.card-event-detail .card-item .card-name p {
    font-size:var(--fs-sm);
    line-height:1.7rem;
    color:var(--c-gray-70);
    word-break:keep-all;
    
}
.card-event-detail .card-item .card-name h4 {
    margin-top:0.5rem;
    letter-spacing:0;
    font-size:var(--fs-md);
    line-height:2rem;
    color: var(--c-black);
    word-break:keep-all;
    
}
.card-event-detail .card-item .card-name p + h3 {
    margin-top:0.6rem;
}
.card-event-detail .card-item .card-anchor {
    flex:5.6rem;
    min-width:5.6rem;
    height:3.6rem;
    padding:0;
    background-color:#f2f2f2;
    font-size:var(--fs-df);
}
.card-event-detail .module-box3 ol {
    margin-top:1.7rem;
}
.card-event-detail .module-box3 li {
    letter-spacing:0;
    margin-top:0.9rem;
}
.card-event-detail .custom-table th,
.card-event-detail .custom-table td {
    text-align:left;
    padding-left:1.6rem;
    vertical-align:top;
}
.card-event-detail .custom-table td {
    padding-top:1.3rem;
    color:#212121;
}
.card-event-detail .bullet-list > li {
    font-weight:200;
    word-break: keep-all;
    letter-spacing: -0.02rem;
}
.card-event-detail .bullet-list > li + li {
    margin-top:1.5rem;
}
.card-event-detail .module-box4 {
    padding-bottom:3.5rem;
}
.card-event-detail .module-box4 h3 {
    margin-top:30px;
}
.card-event-detail .module-box4 h3 + p {
    margin-top:0.7rem;
}
.card-event-detail .module-box4 h4 {
    margin-top:2.8rem;
}
.card-event-detail .module-box4 h4 + p {
    margin-top:0.5rem;
}
.card-event-detail .module-box5 h3 {
    margin-top:3.1rem;
}
.card-event-detail .module-box5 .bullet-list {
    margin-top:1.7rem;
}
/* card-event popup */
.card-event-detail.modal-popup .modal-body {
    padding:1.6rem;
    padding-bottom:3rem;
}
.card-event-detail.modal-popup .card-list {
    gap:2rem;
}
.card-event-detail.modal-popup .card-item {
    align-items: center;
    padding-right:0;
}
.card-event-detail.modal-popup .card-item .card-img {
    flex:2.8rem;
    margin-right:2.4rem;
}
.card-event-detail.modal-popup .card-item .card-anchor {
    display:flex;
    height:auto;
    align-items: center;
    text-decoration: none;
    background-color:transparent;
}
.card-event-detail.modal-popup .card-item .card-name {
    flex:calc(100% - 6.8rem);
}
.card-event-detail.modal-popup .card-item .card-name h4 {
    margin-top:0;
    font-size:var(--fs-df);
}
.card-event-detail.modal-popup .card-item .arrow {
    position:relative;
    flex:1.6rem;
    width:0.6rem;
    min-width:0.6rem;
    height:1.6rem;
    background-color:transparent;
}
.card-event-detail.modal-popup .card-item .arrow:before,
.card-event-detail.modal-popup .card-item .arrow:after {
    display:block;
    position:absolute;
    left:1rem;
    width:0.1rem;
    height:0.8rem;
    background:var(--c-black);
    content:"";
}
.card-event-detail.modal-popup .card-item .arrow:before {
    transform:rotate(-45deg);

}
.card-event-detail.modal-popup .card-item .arrow:after {
    top:0.6rem;
    transform:rotate(45deg);
}


.card-event-main .tab-overflow.w-full {
    mask-image:linear-gradient(to right, black 0%,black 80%, transparent 95%);
    -webkit-mask-image:linear-gradient(to right, black 0%, black 80%, transparent 95%)
}
.card-event-main .tab-overflow.w-full.end {
    mask-image:linear-gradient(to right, #000 0%, #000 100%);
    -webkit-mask-image:linear-gradient(to right, #000 0%, #000 100%);
}
.card-event-main .fold-body {
    mask-image:linear-gradient(to right, black 0%,black 85%, transparent 95%);
    -webkit-mask-image:linear-gradient(to right, black 0%, black 85%, transparent 95%);
}
.card-event-main .fold-body .custom-check:last-of-type {
    margin-right:2rem
}
.card-event-main .card-wrap .card-border {
    padding:1.7rem 1.8rem;
}
.card-event-main .card-wrap > li .icon-title {
    display:flex;
    align-items: center;
    border-radius:2rem;
}
.card-event-main .card-wrap .card-box {
    margin-top:0.7rem;
}
.card-event-main .card-wrap .card-img {
    width:3.8rem;
    height:6rem;
}
.card-event-main .card-wrap .card-text {
    flex:1;
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding-left:1rem;
    padding-right:1.5rem;
    height:8rem;
}
.card-event-main .card-wrap .card-text .fs-lg {    
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.2;
    margin-bottom:0.4rem;
    word-break:break-all;
}
.card-event-main .card-wrap .card-text .fs-sm.fc-gray {
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.3;
    word-break:break-all;
}
.card-event-main .card-wrap .bedge {
    background-color:#ff4390;
    border-radius:5rem;
    color:#fff;
    letter-spacing:-0.3px;
    line-height:1;
    font-weight:700;
    min-width:7.6rem;
    padding:1rem 0.5rem;
    text-align: center;
}
.card-event-main .module-group {
    position:relative;
}
.select-type-01 {
    width: 100%; 
   margin-top: 3rem;
}
.select-type-01 label {
    margin-bottom: 1rem;
    display: block;
    color: var(--c-gray-600);
}
.select-type-01 select {
    width: 100%; height: 3.6rem;
    border: 1px solid var( --c-gray-500);
    border-radius: 4px;
}

.sub-sm-text { 
   font-size: var(--fs-sm);
   margin: 12px 0 20px;
}

.select-type-02 {
    position: relative;
    width: 100%;
    padding: 1.3rem 1.6rem;
    border: 0.1rem solid var(--c-gray-300);
    border-radius: var(--border-radius-sm);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("../new_images/icons/icon_arrow_down16.png") no-repeat center right 1.6rem/1.6rem 1.6rem;
}

.sub-md-text { 
    font-size: var(--fs-md);
    margin: 20px 0;
}
.design-check-list li:first-child {
    margin-top: 15px;
}
.design-check-list li {
    margin-bottom: 15px;
}
.design-check-list li i { 
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    width: 2rem;
    height: 1.6rem;
    margin-right: 0.5rem;
}
.design-check-list li i::before {
    left: 0.6rem;
    width: 0.2rem;
    height: 0.5rem;
    border-radius: 2px 2px 0 0;
}
.design-check-list li i::after{
    left: 0.7rem;
    width: 0.9rem;
    height: 0.2rem;
    border-radius: 0 2px 2px 0;
}
.design-check-list li i::before,
.design-check-list li i::after
{
    content: '';
    position: absolute;
    background-color: var(--c-primary);
    transform: rotate(-50deg);
    top: 0.9rem;
}

.sub-link-type01{
    font-size: var(--fs-df);
    text-decoration: none;
    display: inline-block;
    color: var(--c-black);
    font-weight: 500;
}
.sub-link-type01::after {
    content:'>';
    margin-left: 5px;
}

/* 다른금융 */
.finance-box {
    border-radius: .8rem !important;
    margin-top: 1.6rem;
    padding: 1.6rem;
}
.finance-box .sub-link.sub-icon-link::after {
    background-image: url('../new_images/icons/ico_arrow12.png');
    background-position: .2rem 50%;
}
.finance-list {
    margin-top: 1.6rem;
}
/* .finance-list > a {
    width: calc((100% - 2rem) / 3);
} */
.finance-list > a > div[class*="gradient"] {
    padding: 1.6rem 1rem 1.6rem 0.8rem;
}
.finance-list > a > div[class*="gradient"] > img {
    margin-bottom: .8rem;
}
.finance-list > a > div[class*="gradient"] > p {
    margin-left: .5rem;
}
.finance-list > a > div[class*="gradient"] > p:first-of-type {
    font-size: 1.3rem;
}
/* 금용상품 - 신용카드 */
.card-event-header {
    display: block !important;
    position: relative;
    background-color: #ebf7f9;
}
.card-event-header::before {
    content: '';
    position: absolute;
    top: -.3em;
    right: 0;
    width: 10rem;
    height: 7.9rem;
    background: url('../new_images/views/fpr/img_card.png') no-repeat center / 10rem 7.9rem;
    z-index: 2;
}
.card-event-header::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 12rem;
    height: 5.7rem;
    background: url('../new_images/views/fpr/bg_pink.png') no-repeat center / 12rem 5.7rem;
    z-index: 1;
}
.card-event-header > h2 {
    position: absolute;
    left: 1.6rem;
    bottom: .4rem;
}
.card-event-header > span {
    position: absolute;
    bottom: 1rem;
    right: 9rem;
    font-size: var(--fs-md);
    color: #181949;
    font-weight: 500;
    z-index: 10;
}
.page-wrapper.sub .card-event-header2 {
    display: flex;
    justify-content: space-between;
    height: 5.6rem;
    padding: 1rem 1.6rem;
    background-color: #f1f1f1;
  }
  
  .card-event-header2 .tab-head {
    display: block;
    padding: 0;
    border: 0.1rem solid #eee;
    background-color: #fafafa;
    border-radius: 1.8rem;
  }
  
  .card-event-header2 .tab-head::before {
    content: none;
  }
  
  .card-event-header2 .tab-head .tab-btn::after {
    content: "";
    display: block;
    clear: both;
  }
  
  .card-event-header2 .tab-head .tab-btn {
    float: left;
    min-height: 1.8rem;
    padding: 0.8rem 1.5rem;
    font-size: var(--fs-sm);
    color: #999;
  }
  
  .card-event-header2 .tab-head .tab-btn:nth-child(1):before {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.4rem;
    background: url("../new_images/views/fpr/icon_tab_gift.png") no-repeat center/1.8rem 1.8rem;
  }
  
  .card-event-header2 .tab-head .tab-btn:nth-child(2):before {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.4rem;
    background: url("../new_images/views/fpr/icon_tab_dia.png") no-repeat center/1.8rem 1.8rem;
  }
  
  .card-event-header2 .tab-head .tab-btn.is-selected {
    padding: 0.5rem 1.5rem;
    margin-top: 0.3rem;
    border-radius: 1.8rem;
    background-color: #212266;
    color: #fff;
    font-weight: 400;
  }
  
  .card-event-header2 .tab-head .tab-btn.is-selected:nth-child(1):before {
    background-image: url("../new_images/views/fpr/icon_tab_gift_active.png");
  }
  
  .card-event-header2 .tab-head .tab-btn.is-selected:nth-child(2):before {
    background-image: url("../new_images/views/fpr/icon_tab_dia_active.png");
  }
  
  .card-event-header2 > h2 {
    width: 7.7rem;
    height: 2.4rem;
  }
  
  .card-event-header2 > h2 > a {
    display: inline-block;
    height: 100%;
  }
  
  .card-event-header2 > h2 > a > img {
    vertical-align: baseline;
  }
  
  .card-event-wrap > .tab-panel {
    padding: 0;
  }
.card-event-wrap .top-banner-wrap {
    position: relative;
    height: 9rem;
}
.card-event-wrap .top-banner-wrap .card-img img {
    height: 9rem;
}
.card-event-wrap .top-banner-wrap .card-txt {
    padding: 2.1rem 2rem;
    background-color: #696a8b;
}
.card-event-wrap .top-banner-wrap .card-txt img {
    width: 3rem;
    height: 4.8rem;
}
.card-event-wrap .top-banner-wrap .card-txt .text {
    margin-left: 1.6rem;
    color: var(--c-white);
    font-size: var(--fs-sm);
}
.card-event-wrap .top-banner-wrap .card-txt .text > span {
    display: block;
    padding-top: .4rem;
    margin-bottom: .2rem;
    font-size: var(--fs-df);
    font-weight: 400;
    opacity: 0.8;
}
.card-event-wrap .top-banner-wrap .card-txt .text > strong {
    font-size: var(--fs-lg);
    font-weight: 500;
}
.card-event-wrap .top-banner-wrap .swiper-pagination {
    position: absolute;
    bottom: 1.6rem;
    right: 1.6rem;
    padding: .5rem 1.2rem;
    opacity: 0.8;
}
.card-event-wrap .top-banner-wrap .swiper-pagination::before {
    background-color: #fff;
    opacity: 0.2;
    border-radius: 1.3rem;
}
.card-event-wrap .card-wrap .box-head {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
    border: 1px solid var(--c-gray-300);
    border-radius: .8rem; 
    background-color: var(--c-gray-100);
}
.card-event-wrap .card-wrap .box-head ul {
    display: flex;
    flex-wrap: wrap;
}
.card-event-wrap .card-wrap .box-head .more-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.4rem;
    width: 1.8rem;
    height: 1.8rem;
    background: url('../new_images/icons/btn_fold.png') no-repeat center / 1.8rem 1.8rem;
}
.card-event-wrap .card-wrap .box-head .more-btn.down {
    background-image: url('../new_images/icons/btn_more.png');
}
.card-event-wrap .card-wrap .box-head .more-cont > li {
    margin-top: 1.6rem;
}
.card-event-wrap .card-wrap .box-head::after,
.card-event-wrap .filter-box .filter-list::after {
    content: '';
    display: block;
    clear: both;
}
.card-event-wrap .card-wrap .box-head .tab-btn,
.card-event-wrap .filter-box .filter-list li {
    font-size: var(--fs-df);
    color: #666;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.card-event-wrap .filter-box .filter-list li {
    float: left;
}
.card-event-wrap .card-wrap .box-head .tab-btn {
    width: calc((100% - 2.8rem) / 3);
    padding-right: 1rem;
}
.card-event-wrap .filter-box .filter-list li {
    width: 33.3%;
    padding-right: 1.4rem;
}
.card-event-wrap .card-wrap .box-head .tab-btn:nth-child(3n + 1) {
    padding-left: 1.7rem;
}
.card-event-wrap .filter-box .filter-list li:nth-child(3n + 1) {
    padding-left: 2rem;
}
.card-event-wrap .card-wrap .box-head .tab-btn:nth-child(n + 4),
.card-event-wrap .filter-box .filter-list li:nth-child(n + 4) {
    margin-top: 1.6rem;
}
.card-event-wrap .card-wrap .box-head .tab-btn:not(:nth-child(3n + 1)),
.card-event-wrap .filter-box .filter-list li:not(:nth-child(3n + 1)) {
    position: relative;
}
.card-event-wrap .card-wrap .box-head .tab-btn:not(:nth-child(3n + 1)) {
    padding-left: 1rem;
}
.card-event-wrap .filter-box .filter-list li:not(:nth-child(3n + 1)) {
    padding-left: 1.4rem;
}
.card-event-wrap .card-wrap .box-head .tab-btn:not(:nth-child(3n + 1))::after,
.card-event-wrap .filter-box .filter-list li:not(:nth-child(3n + 1))::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0.1rem;
    height: 1rem;
    background-color: var(--c-gray-300);
}
.card-event-wrap .card-wrap .box-head .tab-btn.is-selected,
.card-event-wrap .filter-box .filter-list li.active {
    color: #212266;
    font-weight: bold;
}
.card-event-wrap .list-wrap::after {
    content: '';
    display: block;
    clear: both;
}
.card-event-wrap .list-item {
    float: left;
    width: 33.3%;
    height: 16rem;
    font-size: 1.2rem;
    text-align: center;
}
.card-event-wrap .list-item a {
    display: inline-block;
    height: 100%;
    text-decoration: none;
}
.card-event-wrap .list-item:nth-child(n + 4) {
    margin-top: 2rem;
}
.card-event-wrap .list-item img {
    width: 6rem;
    height: 9.4rem;
}
.card-event-wrap .list-item span {
    display: block;
    width: 9rem;
    margin: .4rem auto 0;
    color: var(--c-black-300);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.card-event-wrap .list-item strong {
    display: block;
    height: 1.7rem;
    margin-top: 1rem;
    font-size: var(--fs-df);
    font-weight: bold;
    color: var(--c-pink);
}
.card-event-wrap .evnet-cont {
    padding: 3rem 0 0;
}
.card-event-wrap .evnet-cont .img_wrap {
    width: 32.8rem;
    height: 5.2rem;
    margin-bottom: 2rem;
}
.card-event-wrap .evnet-cont .img_wrap img {
    width: 100%;
    height: 100%;
}
.card-event-wrap .popular-cont {
    padding: 0;
}
.card-event-wrap .popular-cont .module-box:first-child {
    background-color: #f4f7fd;
}
.card-event-wrap .popular-cont .list-inline li + li {
    margin-left: 2.6rem;
}
.card-event-wrap .popular-cont .sub-link {
    width: 12rem;
}
.card-event-wrap .popular-cont .ranking-tit img {
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: bottom;
}
.card-event-wrap .popular-cont .ranking-tit span {
    font-size: var(--fs-df);
    color: var(--fc-black);
}
.card-event-wrap .popular-cont .cont {
    text-align: center;
}
.card-event-wrap .popular-cont .cont img {
    width: 12rem;
    height: 19rem;
    margin-top: 1rem;
}
.card-event-wrap .popular-cont .cont .txt {
    margin-top: 1.6rem;
    font-size: var(--fs-df);
    color: var(--c-black-300);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card-event-wrap .popular-cont .cont button {
    width: 12rem;
    color: #fff;
    background-color: var(--c-pink);
    line-height: 3rem;
    border: none;
    border-radius: 1.7rem;
    margin-top: 1rem;
    font-size: 1.3rem;
    font-weight: bold;
}
.card-event-wrap .card-company-cont .card-list {
    border-bottom: 1px solid var(--c-gray-400);
    padding: 2rem 0 2rem 1.5rem;
}
.card-event-wrap .card-company-cont .card-list:first-child {
    border-top: 10px solid var(--c-gray-200);
}
.card-event-wrap .card-company-cont .card-list a {
    display: flex;
    text-decoration: none;
    color: inherit;
}
.card-event-wrap .card-company-cont .card-list a img {
    width: 6rem;
    height: 9.4rem;
}
.card-event-wrap .card-company-cont .card-list a div {
    margin-left: 2.5rem;
}
.card-event-wrap .card-company-cont .card-list a h4 {
    font-size: var(--fs-md);
    color: var(--fc-black);
}
.card-event-wrap .card-company-cont .card-list a ul {
    margin-top: 1rem;
}
.card-event-wrap .card-company-cont .card-list a ul::after {
    content: '';
    display: block;
    clear: both;
}
.card-event-wrap .card-company-cont .card-list a ul li {
    float: left;
}
.card-event-wrap .card-company-cont .card-list a ul li + li {
    margin-left: 1rem;
}
.card-event-wrap .card-company-cont .card-list a ul li img {
    width: 1.5rem;
    height: 1.5rem;
}
.card-event-wrap .card-company-cont .card-list a ul li span {
    font-size: var(--fs-sm);
    color: var(--c-gray-700);
}
.card-event-wrap .card-company-cont .card-list a p {
    margin-top: 1rem;
    font-size: var(--fs-sm);
    color: var(--c-gray-700);
}
.card-event-wrap .card-company-cont .card-list a strong {
    display: inline-block;
    margin-top: 1rem;
    font-size: var(--fs-df);
    color: var(--c-pink);
    font-weight: bold;
}
.card-event-wrap .card-company-cont .no-data-sm {
    padding-bottom: 1.6rem;
} 
.card-event-wrap .filter-box {
    border: 1px solid var(--c-gray-300);
    border-top-left-radius: .8rem;
    border-top-right-radius: .8rem;
}
.card-event-wrap .filter-box > p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    width: calc(100% - 3.2rem);
    height: .1rem;
    background-color: var(--c-gray-300);
}
.card-event-wrap .filter-box > p {
    position: relative;
    font-size: var(--fs-sm);
    color: #999;
    padding: 1.6rem 1.6rem 1.6rem 3.7rem;
    margin-top: 2rem;
}
.card-event-wrap .filter-box > p::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
    width: 1.3rem;
    height: 1.3rem;
    background: url('../new_images/icons/ico_info_gray.png') no-repeat center / 1.3rem 1.3rem;
}
.card-event-wrap .filter-box .swiper-container {
    padding-top: 2rem;
}
.card-event-wrap .filter-box .swiper-container .swiper-pagination {
    padding-top: 3rem;
}
.card-event-wrap .filter-box .swiper-container .radio-wrap {
    position: relative;
    padding: 0 2rem 1.5rem;
    margin-bottom: 2rem;
}
.card-event-wrap .filter-box .swiper-container .radio-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2rem;
    width: calc(100% - 4rem);
    height: .1rem;
    background-color: var(--c-gray-300);
}
.card-event-wrap .select-wrap {
    position: relative;
    height: 4.6rem;
    padding: .9rem 5.5rem 0.9rem 1rem;
    margin-bottom: 3rem;
    border: 1px solid #eee;
    border-top: none;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
    background-color: #f4f7fd;
    white-space: nowrap;
}
.card-event-wrap .select-wrap ul {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
}
.card-event-wrap .select-wrap li {
    display: inline-block;
    position: relative;
    padding: 0.4rem 2.8rem 0.4rem 1rem;
    border: 1px solid var(--c-gray-300);
    border-radius: 1.3rem;
    background-color: #fff;
    color: #212266;
    font-size: var(--fs-sm);
    box-shadow: rgba(0, 0, 0, 0.1);
}
.card-event-wrap .select-wrap li button {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    background: url('../new_images/icons/icon_del_s.svg') no-repeat center / 1.2rem 1.2rem;
}
.card-event-wrap .select-wrap li + li {
    margin-left: 0.6rem;
}
.card-event-wrap .select-wrap .btn-reset {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.6rem;
    height: 4.5rem;
    border: none;
    border-left: 1px solid var(--c-gray-300);
    border-bottom-right-radius: .8rem;
    background: #fff url('../new_images/icons/ico_refresh02.png') no-repeat center / 2rem 2rem;
}
/* 조각투자 연결하기 버튼 */
.piece-link {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 1.3rem 1.2rem 1.2rem;
    text-decoration: none;
    color: inherit;
}
.piece-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-sm);
    background-color: var(--c-mint);
    opacity: .1;
}
.piece-link > p, .piece-link > button {
    line-height: 1.5rem;
    font-size: var(--fs-sm);
    color: #353d4a;
    font-weight: 500;
}
.piece-link > p {
    display: inline-block;
}
.piece-link > p::before {
    content: '';
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .6rem;
    background: url('../new_images/views/mydoth/ico_bank_point.png') no-repeat center / 1.6rem 1.6rem;
    vertical-align: bottom;
}
.piece-link > button {
    padding: 0;
    border: none;
    background-color: inherit;
}
.piece-link > button::before {
    content: '';
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .4rem;
    background: url('../new_images/icons/ico_add_12.png') no-repeat center / 1.2rem 1.2rem;
    vertical-align: middle;
}
/* 테이블 thead 값 없는 경우 */
.thead-hidden {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
/* 개인정보 이용 동의 */
.privacy-agree-wrap table {
    width: 100%;
    margin-top: 3rem;
}
.privacy-agree-wrap table tbody {
    position: relative;
}
.privacy-agree-wrap table tbody::before,
.privacy-agree-wrap table tbody::after {
    content: '';
    position: absolute;
    width: 100%;
}
.privacy-agree-wrap table tbody::before {
    border-top: .1rem solid #52b1ce;
}
.privacy-agree-wrap table tbody::after {
    border-bottom: .1rem solid #52b1ce;
    opacity: .3;
}
.privacy-agree-wrap table tbody .custom-th {
    padding: .8rem 0 .8rem .8rem;
    background-color: #52b1ce;
    font-size: var(--fs-sm);
    color: #fff;
}
.privacy-agree-wrap table.custom-border tbody tr + tr .custom-th,
.privacy-agree-wrap table tbody tr + tr td:last-child {
    position: relative;
}
.privacy-agree-wrap table.custom-border tbody tr + tr .custom-th::before,
.privacy-agree-wrap table tbody tr + tr td:last-child::before {
    content: '';
    position: absolute;
    top: 0;
}
.privacy-agree-wrap table.custom-border tbody tr + tr .custom-th::before {
    left: .8rem;
    width: calc(100% - 1.6rem);
    border-top: .1rem solid #fff;
}
.privacy-agree-wrap table tbody tr + tr td:last-child::before {
    right: 0;
    width: 100%;
    border-top: .1rem solid #ddd;
}
.privacy-agree-wrap .add-icon::before,
.privacy-agree-wrap .add-icon span::before {
    content: '';
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: middle;
}
.privacy-agree-wrap .add-icon.icon-person::before {
    margin-right: .3rem;
    background: url('../new_images/views/auth/icon_table_person.png') no-repeat center / 100%;
}
.privacy-agree-wrap .add-icon.icon-folder::before {
    background: url('../new_images/views/auth/icon_table_01.png') no-repeat center / 100%;
}
.privacy-agree-wrap .add-icon.icon-info::before {
    background: url('../new_images/views/auth/icon_table_01.png') no-repeat center / 100%;
}
.privacy-agree-wrap .add-icon.icon-folder span::before {
    background: url('../new_images/views/auth/icon_table_folder.png') no-repeat center / 100%;
}
.privacy-agree-wrap .add-icon.icon-info span::before {
    background: url('../new_images/views/auth/icon_table_info.png') no-repeat center / 100%;
}
/* 조각투자 바로가기 버튼 */
.quick-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 6.4rem;
    height: 4.6rem;
    padding: 0;
    background-color: #f2f2f2;
    border: 0;
    border-radius: var(--border-radius-sm);
    font-size: var(--fs-sm);
    color: #353d4a;
    font-weight: 500;
}
/* 데이터 없을 경우 패딩값 */
.no-data.pt {
    padding-top: 17rem;
    padding-bottom: 3rem;
}
.no-data.pt::after {
    top: 6rem;
}
/* li + li 일 때 border 값 추가 */
.piece-service-list > li + li {
    border-top: .1rem solid var(--c-gray-300);
}
.piece-service-list > li:not(:last-child) {
    padding-bottom: 2rem;
}


/* 2023-09-14 TS combo chart */
.d-flex-end{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
}
#chart-combo{
    position: relative;
}
.not-event:after{
    content:'';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.combochart-text{
    color: #17469f;
    text-decoration: underline;
}
/* 보험 상세 */
.ins_details #tab_ins_01 .data-list dd:first-of-type,
.ins_details #tab_ins_02 .data-list dd:first-of-type {
    width: 24rem;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.list-select {
    margin: 0 -.8rem;
}
.list-select a {
    display: block;
    padding: 2.1rem .8rem;
    font-size: 1.6rem;
    color: #1e1e1e;
    text-decoration: none;
    border-radius: .8rem;
}
.list-select a:active, 
.list-select a.is-active {
    background-color: #fafafa;
}

.fixed-footer {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.9rem 2rem;
    margin: auto -1.6rem -3rem;
}

/* 프리미엄 카드 */
.card-premium {
display: block;
color: var(--c-white);
background-color: #111;
}

.card-premium .custom-btn label {
display: flex;
justify-content: center;
align-items: center;
height: 4.2rem;
font-size: 1.4rem;
color: #666;
line-height: 100%;
letter-spacing: -0.035rem;
background-color: #333;
border-radius: 0.6rem;
}

.card-premium .custom-btn input[type=checkbox],
.card-premium .custom-btn input[type=radio] {
position: absolute;
top: calc(50% - 0.8rem);
left: 0;
width: 1.6rem;
height: 1.6rem;
-webkit-appearance: none;
appearance: none;
visibility: hidden;
cursor: pointer;
}

.card-premium .custom-btn input[type=checkbox]:checked + label,
.card-premium .custom-btn input[type=radio]:checked + label {
color: #dcc096;
background-color: #000;
border: 0.1rem solid rgba(220, 192, 150, 0.8);
border-radius: 0.6rem;
}

.card-premium > .module-box {
padding-top: 4rem;
}

.card-premium > .module-box > .title {
font-size: 2.2rem;
font-weight: 500;
}

.card-premium > .module-box > .title strong {
display: block;
margin: 0.2rem 0 0;
font-size: 2.8rem;
}

.card-premium > .module-box > .title strong::after {
content: "";
display: inline-block;
width: 2.8rem;
height: 2.8rem;
margin-left: 0.4rem;
vertical-align: -0.4rem;
background: url("../new_images/views/card/ico_title.png") no-repeat 0 0/100%;
}

.card-premium .card-event {
    padding: 0.6rem 0;
    margin-top: 1.2rem;
    border: 0.1rem solid #91576e;
    border-radius: 0.4rem;
    background-color: #461024;
    font-size: var(--fs-sm);
    color: #ff639e;
    font-weight: 500;
}

.card-premium .swiper-card-premium {
position: relative;
margin: 0 -1.6rem 3rem;
padding: 4rem 0 0;
}

.card-premium .swiper-card-premium .swiper-slide {
width: 21.6rem;
}

.card-premium .swiper-card-premium .swiper-button-prev,
.card-premium .swiper-card-premium .swiper-button-next {
position: absolute;
z-index: 2;
top: 16rem;
width: 2rem;
height: 2rem;
background-repeat: no-repeat;
background-position: 50%;
background-size: 1.2rem 2rem;
}

.card-premium .swiper-card-premium .swiper-button-prev {
left: 6rem;
background-image: url("../new_images/views/card/btn_swiper_prev.png");
}

.card-premium .swiper-card-premium .swiper-button-next {
right: 6rem;
background-image: url("../new_images/views/card/btn_swiper_next.png");
}

.card-premium .swiper-card-premium .card-wrap {
text-align: center;
}

.card-premium .swiper-card-premium .card-name,
.card-premium .swiper-card-premium .card-description,
.card-premium .swiper-card-premium .card-event {
opacity: 0;
transition: opacity 0.5s;
}

.card-premium .swiper-card-premium .card-img {
position: relative;
display: block;
width: 16.4rem;
height: 26rem;
margin: 0 auto;
transform-style: preserve-3d;
transition: transform 1s;
}

.card-premium .swiper-card-premium .card-img::before {
content: "";
position: absolute;
z-index: 5;
left: -6.8rem;
top: -3.4rem;
width: 14rem;
height: 14rem;
opacity: 0;
background: url("../new_images/views/card/img_light.png") no-repeat 0 0/100%;
}

.card-premium .swiper-card-premium .card-img::after,
.card-premium .swiper-card-premium .card-img img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden !important;
}

.card-premium .swiper-card-premium .swiper-slide:not(.swiper-slide-active) .card-img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 16.4rem;
height: 26rem;
transform: rotateY(0deg);
background-color: var(--c-black-200);
border-radius: 1.6rem;
}

.card-premium .swiper-card-premium .card-img img {
position: relative;
transform: rotateY(-180deg);
}

.card-premium .swiper-card-premium .card-name {
margin: 2rem 0 0;
font-size: 2rem;
letter-spacing: -0.05rem;
font-weight: 700;
}

.card-premium .swiper-card-premium .card-description {
margin: 0.6rem 0 0;
font-size: 1.4rem;
letter-spacing: -0.035rem;
color: var(--c-gray-900);
}

.card-premium .swiper-card-premium .swiper-slide-active .card-name,
.card-premium .swiper-card-premium .swiper-slide-active .card-description {
opacity: 1;
}

.card-premium .swiper-card-premium .swiper-slide-active .card-event {
    opacity: 0.9;
}

.card-premium .swiper-card-premium .swiper-slide-active .card-img {
transform: rotateY(180deg);
}

.card-premium .swiper-card-premium .swiper-slide-active .card-img::before {
animation: cardLight 0.1s 1 0.5s forwards;
}

@keyframes cardLight {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
.card-premium .card-options-wrap {
position: relative;
min-height: 6.4rem;
padding: 1.5rem 0 1rem;
margin: 0 0 4rem;
}

.card-premium .card-options-wrap::before, .card-premium .card-options-wrap::after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 0.1rem;
background-image: linear-gradient(to right, rgba(136, 136, 136, 0) -5%, rgba(194, 161, 116, 0.8) 50%, rgba(136, 136, 136, 0) 108%);
}

.card-premium .card-options-wrap::before {
top: 0;
}

.card-premium .card-options-wrap::after {
bottom: 0;
}

.card-premium .card-options-wrap .btn-option-view {
font-size: 1.6rem;
line-height: 2.1rem;
letter-spacing: -0.04rem;
color: #dcc096;
background: none;
border: 0;
}

.card-premium .card-options-wrap .btn-option-view::after {
content: "";
position: absolute;
left: 50%;
bottom: 1rem;
width: 1.4rem;
height: 1.4rem;
transform: translateX(-50%);
background: url("../new_images/views/card/icon_arrow.png") no-repeat 0 0/100%;
}

.card-premium .card-options {
display: none;
margin: 1.6rem 0 0;
padding: 2rem;
border-radius: 1rem;
background-color: #1e1e1e;
}

.card-premium .card-options .title span,
.card-premium .card-options .sub-title {
margin: 0 0 0 1rem;
font-size: 1.2rem;
color: #999;
letter-spacing: 0.03rem;
}

.card-premium .card-options .title {
margin: 0 0 0.8rem;
font-size: 1.4rem;
color: #ddd;
letter-spacing: 0.035rem;
}

.card-premium .card-options .sub-title {
display: block;
margin: 1.6rem 0 0.8rem;
}

.card-premium .card-options .option-list {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: start;
align-items: center;
}

.card-premium .card-options .option-list + .title {
margin-top: 4rem;
}

.card-premium .card-options .option-item {
flex-grow: 1;
width: 14rem;
}

.card-premium .card-options .option-item.full {
width: 100%;
}

.card-premium .card-options .selected-options {
display: flex;
justify-content: space-between;
gap: 0.4rem;
margin: 2rem 0 0;
padding: 2rem 0 0;
border-top: 0.1rem solid #444;
}

.card-premium .card-options .selected-options ul {
overflow-x: auto;
display: flex;
gap: 0.4rem;
}

.card-premium .card-options .selected-options li {
flex: 0 0 auto;
height: 3.6rem;
padding: 1rem 1.2rem 1.1rem;
font-size: 1.2rem;
letter-spacing: -0.03rem;
white-space: nowrap;
border-radius: 1.8rem;
background-color: #8f806b;
}

.card-premium .card-options .selected-options .btn-reset {
width: 3.6rem;
height: 3.6rem;
padding: 1rem;
background: none;
border: 0.1rem solid #666;
border-radius: 0.6rem;
}

.card-premium .card-options .selected-options .btn-reset::before {
content: "";
display: inline-block;
width: 1.6rem;
height: 1.6rem;
background: url("../new_images/views/card/icon_reset.png") no-repeat 0 0/100%;
}

.card-premium .card-options .selected-options.hide {
display: none;
}

.card-premium .card-options-wrap.is-open {
padding-bottom: 4.7rem;
}

.card-premium .card-options-wrap.is-open .btn-option-view::after {
bottom: 1.5rem;
transform: translateX(-50%) rotate(180deg);
}

.card-premium .card-options-wrap.is-open .card-options {
display: block;
}

.card-premium .premium-check {
  display: block;
  margin-bottom: 1.5rem;
}
.card-premium .premium-check input {
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}
.card-premium .premium-check input:checked + label {
  color: #ff639e;
}
.card-premium .premium-check input:checked + label i {
  border-color: #91576e;
  background-color: #461024;
}
.card-premium .premium-check input:checked + label i::before, .card-premium .premium-check input:checked + label i::after {
  background-color: #ff639e;
}
.card-premium .premium-check label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 400;
  color: #999;
  font-size: var(--fs-df);
  transition: all 0.1s ease-in-out;
}
.card-premium .premium-check label i {
  display: inline-block;
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.5rem;
  background-color: #2f2f2f;
  border: 0.1rem solid #5d5d5d;
  border-radius: 0.4rem;
}
.card-premium .premium-check label i::before, .card-premium .premium-check label i::after {
  content: "";
  position: absolute;
  width: 0.2rem;
  background-color: #666;
}
.card-premium .premium-check label i::before {
  top: 0.6rem;
  left: 0.4rem;
  height: 0.5rem;
  transform: rotate(-50deg);
}
.card-premium .premium-check label i::after {
  top: 0.3rem;
  right: 0.4rem;
  height: 0.7rem;
  transform: rotate(50deg);
}

.card-premium .card-list-wrap .card-item {
padding: 4rem 2rem 2rem;
border-radius: 1rem;
background-color: #333;
}

.card-premium .card-list-wrap .card-item + .card-item {
margin-top: 1.2rem;
}

.card-premium .card-list-wrap .card-img {
display: block;
width: 12.8rem;
height: 8rem;
margin: 0 auto 3rem;
}

.card-premium .card-list-wrap .card-img img {
width: 8rem;
height: 12.8rem;
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%);
}

.card-premium .card-list-wrap .card-name {
margin: 0 0 0.4rem;
font-size: 1.8rem;
letter-spacing: -0.045rem;
color: #f7f7f7;
font-weight: 700;
text-align: center;
}

.card-premium .card-list-wrap .card-description {
font-size: 1.2rem;
letter-spacing: -0.03rem;
color: #999;
text-align: center;
}

.card-premium .card-list-wrap .card-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
margin: 1rem 0 0;
font-size: 0;
}
.card-premium .card-list-wrap .card-badges +  .card-badges {
    margin-top: .6rem;
}
.card-premium .card-list-wrap .card-badges .badge {
flex: 0 0 auto;
padding: 0.2rem 0.6rem 0.3rem;
margin: 0.6rem 0 0;
font-size: 1.2rem;
letter-spacing: -0.03rem;
color: #ddd;
font-weight: 500;
text-align: center;
border: 0.1rem solid #bbb;
border-radius: 0.4rem;
}

.card-premium .card-list-wrap .card-badges .badge.pink {
    margin-top: 0;
    border-color: #ff5394;
    color: #ff5394;
}

.card-premium .card-list-wrap .btn-comparing {
display: block;
margin: 1.2rem auto 0;
padding: 1.2rem;
font-size: 1.4rem;
letter-spacing: -0.035rem;
color: #dcc096;
font-weight: 700;
background: none;
border: 0;
}

.card-premium .card-list-wrap .btn-comparing::after {
content: "";
display: inline-block;
width: 1.6rem;
height: 1.6rem;
margin: 0 0 0 0.5rem;
vertical-align: -0.2rem;
background: url("../new_images/views/card/ico_plus.png") no-repeat 0 0/100%;
}

.card-premium .card-list-wrap .bullet-list {
margin: 1.2rem 0 0;
padding: 2rem 0 0;
border-top: 0.1rem solid #444;
}

.card-premium .card-list-wrap .bullet-list li {
color: #999;
}

.card-premium .card-list-wrap .bullet-list li::before {
width: 0.3rem;
height: 0.3rem;
background-color: currentColor;
}

.card-premium .card-list-wrap .bullet-list li + li {
margin-top: 1rem;
}

.card-premium .card-list-wrap .btn-detail-view {
width: 100%;
height: 5rem;
margin: 3rem 0 0;
padding: 1.6rem;
font-size: 1.4rem;
letter-spacing: -0.035rem;
color: #fff;
font-weight: 500;
background-color: #666;
border-radius: 1rem;
border: 0;
}

.card-premium .no-data {
padding: 10.8rem 0 8rem;
}

.card-premium .no-data::after {
top: 4rem;
width: 5.6rem;
height: 5.6rem;
background: url("../new_images/views/card/icon_noresult_dark.png") no-repeat 0 0/100%;
}

.card-premium .no-data p {
color: var(--c-gray-500);
}

.card-premium .no-data .btn-reset {
width: 16.4rem;
height: 4.4rem;
margin: 2rem 0 0;
font-size: 1.2rem;
color: var(--c-gray-600);
background-color: #111;
border-radius: 0.6rem;
border: solid 0.1rem #666;
}

.card-premium .no-data .btn-reset::before {
content: "";
display: inline-block;
width: 1.2rem;
height: 1.2rem;
margin: 0 0.8rem 0 0;
vertical-align: -0.2rem;
background: url("../new_images/views/card/icon_reset_s.png") no-repeat 0 0/100%;
}

.card-premium .banner {
margin: 2rem 0 0;
}

.card-premium .banner > a {
position: relative;
display: block;
padding: 2.4rem 2rem;
text-decoration: none;
background: #2b2c4a;
border-radius: 1rem;
}

.card-premium .banner > a::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 13rem;
height: 9rem;
background: url("../new_images/views/card/img_banner_rmd.png") no-repeat 0 0/100%;
}

.card-premium .banner .description {
font-size: 1.2rem;
letter-spacing: -0.03rem;
color: #bbb;
}

.card-premium .banner .content {
margin: 0.6rem 0 0;
font-size: 1.6rem;
letter-spacing: -0.04rem;
color: #fff;
font-weight: 700;
}

.card-premium .info_wrap {
padding: 3rem 1.6rem 6rem;
}

.card-premium .info_wrap > h4 {
padding-bottom: 1.6rem;
margin-bottom: 1.6rem;
font-size: 1.6rem;
color: var(--c-gray-500);
font-weight: 500;
border-bottom: 0.1rem solid var(--c-black-300);
}

.card-premium .info_wrap .bullet-dot li::before {
opacity: 0.4;
background-color: var(--c-gray-600);
}

.card-premium .info_wrap .bullet-dot li + li {
margin-top: 1.6rem;
}

.card-premium .sub-link.sub-icon-more {
    font-size: var(--fs-sm);
    font-weight: 400;
    padding: 0.6rem 1.4em;
    color: var(--c-gray-500);
}

.card-premium .border-top {
    border-top: 1px solid var(--c-black-300);
}

.card-premium .sub-link.sub-icon-link::after, .sub-link.sub-icon-more::after {
    content: '';
    position: absolute;
    top: calc(50% - 0.5em);
    right: 0;
    width: 1em;
    height: 1em;
    background: url(../new_images/icons/ico_arrow_right_gray.png) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

.modal-popup.card-premium-comparing-s {
opacity: 1;
transform: translate(-50%, -5rem);
pointer-events: auto;
}

.modal-popup.card-premium-comparing-s .modal-header {
width: 100%;
height: 5rem;
padding: 0 2rem;
min-height: auto;
justify-content: start;
color: var(--c-white);
background-color: #8f806b;
border-bottom: 0;
}

.modal-popup.card-premium-comparing-s .modal-header .title {
font-size: 1.4rem;
letter-spacing: -0.035px;
font-weight: 500;
}

.modal-popup.card-premium-comparing-s .modal-header .title .card-count {
display: inline-block;
width: 2.4rem;
height: 1.8rem;
padding: 0.2em 0.5em 0.1em 0.4em;
margin: 0 0 0 0.6rem;
font-size: 1.2rem;
line-height: 1;
letter-spacing: -0.03rem;
text-align: center;
background-color: #5d4d37;
border-radius: 0.9em;
}

.modal-popup.card-premium-comparing-s .modal-header .btn-open,
.modal-popup.card-premium-comparing-s .modal-header .btn-close {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: none;
border: 0;
}

.modal-popup.card-premium-comparing-s .modal-header .btn-open::after,
.modal-popup.card-premium-comparing-s .modal-header .btn-close::after {
content: "";
position: absolute;
top: 1.6rem;
right: 2rem;
width: 1.4rem;
height: 1.4rem;
background: url("../new_images/views/card/icon_arrow_up.png") no-repeat 0 0/100%;
}

.modal-popup.card-premium-comparing-s .modal-header .btn-open::after {
transform: rotate(180deg);
}

.modal-popup.card-premium-comparing-s .modal-header .btn-close {
display: none;
}

.modal-popup.card-premium-comparing-s .modal-body {
padding: 2.4rem 3rem 2rem;
color: var(--c-white);
background-color: #333;
}

.modal-popup.card-premium-comparing-s .comparing-list {
display: flex;
gap: 4.4rem;
text-align: center;
}

.modal-popup.card-premium-comparing-s .comparing-list li {
position: relative;
margin:auto;
}

.modal-popup.card-premium-comparing-s .comparing-list .card-img {
display: block;
width: 12.8rem;
height: 8rem;
margin: 0 auto;
text-align: left;
box-shadow: 0 0.3rem 0.6rem 0 rgba(0, 0, 0, 0.5);
}

.modal-popup.card-premium-comparing-s .comparing-list .card-img img {
width: 8rem;
height: 12.8rem;
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%);
}

.modal-popup.card-premium-comparing-s .comparing-list .card-name {
margin: 1.6rem 0 0;
font-size: 1.4rem;
letter-spacing: -0.035rem;
color: #eee;
}

.modal-popup.card-premium-comparing-s .comparing-list .btn-del {
position: absolute;
right: -1.4rem;
top: -1.4rem;
width: 4rem;
height: 4rem;
padding: 0;
background: url("../new_images/views/card/btn_del.png") no-repeat 50% 50%/2rem;
border: 0;
}

.modal-popup.card-premium-comparing-s .comparing-list .btn-addition {
display: flex;
justify-content: center;
align-items: center;
width: 12.8rem;
height: 8rem;
margin: 0 auto;
background: none;
border: 0.1rem solid #444;
border-radius: 0.6rem;
}

.modal-popup.card-premium-comparing-s .comparing-list .btn-addition::before {
content: "";
width: 2.6rem;
height: 2.6rem;
background: url("../new_images/views/card/ico_plus_gray.png") no-repeat 0 0/100%;
}

.modal-popup.card-premium-comparing-s .comparing-list .btn-addition ~ .card-name {
font-size: 1.4rem;
letter-spacing: -0.035rem;
color: #999;
}

.modal-popup.card-premium-comparing-s .btn.btn-primary {
height: 6rem;
font-size: 1.6rem;
letter-spacing: -0.04rem;
background-color: #222;
}

.modal-popup.card-premium-comparing-s.is-open .modal-header .btn-open {
display: none;
}

.modal-popup.card-premium-comparing-s.is-open .modal-header .btn-close {
display: block;
}

.modal-popup .card-premium-event {
    margin: 0 -1.6rem;
}
  
.modal-popup .card-premium-event a {
    display: flex;
    align-items: center;
    padding: 1rem 1.6rem 1rem 2rem;
    font-size: 1.4rem;
    letter-spacing: -0.035rem;
    color: var(--c-white);
    text-decoration: none;
    background-color: var(--c-primary);
}
  
.modal-popup .card-premium-event a::before, .modal-popup .card-premium-event a::after {
    content: "";
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
}
  
.modal-popup .card-premium-event a::before {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    background-image: url("../new_images/views/card/img_event.png");
}
  
.modal-popup .card-premium-event a::after {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: auto;
    background-image: url("../new_images/views/card/icon_arrow_white.png");
}

.modal-popup.card-premium-comparing .title {
font-size: var(--fs-xl);
}

.modal-popup.card-premium-comparing .modal-body {
padding: 0 1.6rem;
background-color: #111;
}

.modal-popup.card-premium-comparing .comparing-list {
display: flex;
justify-content: space-between;
margin: 2rem 0 0;
padding: 3rem 1.8rem;
text-align: center;
background-color: #1e1e1e;
border-radius: 1rem;
}

.modal-popup.card-premium-comparing .comparing-list li {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 12.8rem;
}

.modal-popup.card-premium-comparing .comparing-list li + li::before {
content: "";
position: absolute;
left: -1.8rem;
top: 3.2rem;
width: 0.1rem;
height: 14rem;
background-image: linear-gradient(174deg, rgba(136, 136, 136, 0) 0, rgba(194, 161, 116, 0.5) 50%, rgba(136, 136, 136, 0) 100%);
}

.modal-popup.card-premium-comparing .comparing-list .card-img {
display: block;
width: 12.8rem;
height: 8rem;
margin: 0 auto;
text-align: left;
box-shadow: 0 0.3rem 0.6rem 0 rgba(0, 0, 0, 0.5);
}

.modal-popup.card-premium-comparing .comparing-list .card-img img {
width: 8rem;
height: 12.8rem;
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%);
}

.modal-popup.card-premium-comparing .comparing-list .card-name {
overflow: hidden;
order: -1;
height: 3.8rem;
margin: 0 0 1.6rem;
font-size: 1.4rem;
letter-spacing: -0.035rem;
font-weight: 500;
color: #dcc096;
}

.modal-popup.card-premium-comparing .comparing-list .btn-del {
position: absolute;
right: -1.4rem;
top: 4rem;
width: 4rem;
height: 4rem;
padding: 0;
background: url("../new_images/views/card/btn_del.png") no-repeat 50% 50%/2rem;
border: 0;
}

.modal-popup.card-premium-comparing .comparing-list .btn-addition {
display: flex;
justify-content: center;
align-items: center;
width: 12.8rem;
height: 8rem;
margin: 0 auto;
background: none;
border: 0.1rem solid #444;
border-radius: 0.6rem;
}

.modal-popup.card-premium-comparing .comparing-list .btn-addition::before {
content: "";
width: 2.6rem;
height: 2.6rem;
background: url("../new_images/views/card/ico_plus_gray.png") no-repeat 0 0/100%;
}

.modal-popup.card-premium-comparing .comparing-list .btn-addition ~ .card-name {
font-size: 1.4rem;
letter-spacing: -0.035rem;
font-weight: 500;
color: var(--c-gray-900);
}

.modal-popup.card-premium-comparing .comparing-list .btn-footer {
width: 8.7rem;
height: 3.6rem;
margin: 3rem 0 0;
font-size: 1.2rem;
letter-spacing: -0.03rem;
color: var(--c-gray-600);
border: solid 0.1rem #666;
border-radius: 0.6rem;
background: none;
}

.modal-popup.card-premium-comparing .comparing-list .btn-footer.btn-add {
color: #dcc096;
border-color: #8f806b;
}

.modal-popup.card-premium-comparing .card-info-table {
margin: 2rem 0 4rem;
}

.modal-popup.card-premium-comparing .card-info-table table {
table-layout: fixed;
width: 100%;
border-bottom: 0.1rem solid var(--c-black-300);
}

.modal-popup.card-premium-comparing .card-info-table tbody {
font-size: 1.4rem;
letter-spacing: -0.035rem;
text-align: center;
vertical-align: center;
}

.modal-popup.card-premium-comparing .card-info-table tbody th {
height: 4rem;
padding: 1rem 0;
color: var(--c-gray-700);
font-weight: 500;
border-style: solid;
border-color: var(--c-black-300);
border-width: 0.1rem 0;
}

.modal-popup.card-premium-comparing .card-info-table tbody td {
font-size: 1.3rem;
height: 7.8rem;
padding: 2.9rem 0;
color: var(--c-gray-400);
white-space: pre-line;
}

.modal-popup.card-premium-comparing .card-info-table tbody td + td {
border-left: 0.1rem solid var(--c-black-400);
}

.modal-popup.card-premium-comparing .card-info-table tbody td .bullet-list li {
font-size: 1.3rem;
letter-spacing: -0.035rem;
color: var(--c-gray-400);
text-align: left;
padding-left: 0.9em;
}

.modal-popup.card-premium-comparing .card-info-table tbody td .bullet-list li::before {
width: 0.3rem;
height: 0.3rem;
margin-left: 0.5rem;
background-color: var(--c-gray-400);
}

.modal-popup.card-premium-comparing .modal-footer .btn.btn-primary {
height: 6rem;
background-color: #8f806b;
}

.modal-popup.card-premium-list {
background-color: var(--c-black-300);
}

.modal-popup.card-premium-list::before {
top: 0.8rem;
height: 0.4rem;
background-color: #666;
}

.modal-popup.card-premium-list .modal-header {
border: 0;
}

.modal-popup.card-premium-list .modal-header .title {
font-size: 2rem;
letter-spacing: -0.1rem;
color: var(--c-white);
}

.modal-popup.card-premium-list .modal-body {
max-height: 38rem;
}

.modal-popup.card-premium-list .card-list > li .btn-card-add {
display: flex;
width: 100%;
padding: 2rem;
text-align: left;
background-color: var(--c-black);
border: 0;
border-radius: 0.8rem;
}

.modal-popup.card-premium-list .card-list > li + li {
margin: 0.8rem 0 0;
}

.modal-popup.card-premium-list .card-list .card-content {
padding: 0.4rem 0 0;
}

.modal-popup.card-premium-list .card-list .card-img {
flex: 0 0 auto;
width: 6rem;
margin: 0 2rem 0 0;
}

.modal-popup.card-premium-list .card-list .card-name {
margin: 0 0 1rem 0;
font-size: 14px;
letter-spacing: -0.035rem;
color: var(--c-gray-300);
}

.modal-popup.card-premium-list .card-list .bullet-list li {
color: var(--c-gray-900);
}

.modal-popup.card-premium-list .card-list .bullet-list li + li {
margin: 0.6rem 0 0;
}

.modal-popup.card-premium-list .card-list .bullet-list li::before {
opacity: 0.4;
}

.modal-popup.card-premium-list .modal-footer .btn.btn-primary {
height: 6rem;
background-color: #8f806b;
}

.modal-popup.card-premium-detail .title {
font-size: var(--fs-xl);
}

.modal-popup.card-premium-detail .modal-body {
padding: 0 1.6rem;
background-color: #111;
}

.modal-popup.card-premium-detail .card-item {
    margin: 2rem 0 1rem;
    padding: 3rem 2rem 1rem;
    text-align: center;
    background-color: var(--c-black);
    border-radius: 1rem;
}

.modal-popup.card-premium-detail .card-item .card-img {
display: block;
width: 14rem;
margin: 0 auto 2rem;
}

.modal-popup.card-premium-detail .card-item .card-name {
font-size: 2rem;
letter-spacing: -0.05rem;
color: var(--c-white);
font-weight: 700;
}

.modal-popup.card-premium-detail .card-item .card-description {
margin: 0.6rem 0 0;
font-size: 1.4rem;
letter-spacing: -0.035rem;
color: var(--c-gray-900);
text-align: center;
}

.modal-popup.card-premium-detail .card-item .card-btns {
display: flex;
gap: 1.2rem;
margin: 2.4rem 0 0;
font-size: 0;
}

.modal-popup.card-premium-detail .card-item .card-btns button {
width: 50%;
height: 5rem;
font-size: 1.4rem;
letter-spacing: -0.035rem;
font-weight: 500;
background: none;
border: 0.1rem solid;
border-radius: 1rem;
}

.modal-popup.card-premium-detail .card-item .card-btns .btn-sharing {
color: var(--c-gray-600);
border-color: #666;
}

.modal-popup.card-premium-detail .card-item .card-btns .btn-comparing {
color: #dcc096;
border-color: #8f806b;
}

.modal-popup.card-premium-detail .card-item .card-btns .btn-comparing::after {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
margin-left: 0.6rem;
background: url("../new_images/views/card/ico_plus_gold.png") no-repeat 0 0/100%;
}

.modal-popup.card-premium-detail .card-item .card-btn {
    margin: 2rem 0 -1rem;
}
  .modal-popup.card-premium-detail .card-item .card-btn .btn-apply {
    width: 100%;
    height: 5rem;
    background-color: #666;
    color: var(--c-white);
}

.modal-popup.card-premium-detail .card-item .card-benfit-list {
    margin: 4rem 0 0;
}

.modal-popup.card-premium-detail .card-item .card-benfit-list li {
padding: 2rem 0;
font-size: 1.6rem;
letter-spacing: -0.04rem;
color: var(--c-gray-400);
font-weight: 500;
text-align: left;
}

.modal-popup.card-premium-detail .card-item .card-benfit-list li::before {
content: "";
display: inline-block;
width: 3rem;
height: 3rem;
margin-right: 0.6rem;
vertical-align: -0.9rem;
background: url("../new_images/views/card/ico_card_ck.png") no-repeat 0 0/100%;
}

.modal-popup.card-premium-detail .card-item .card-benfit-list li + li {
border-top: 0.1rem solid #444;
}

.modal-popup.card-premium-detail .card-item .card-benfit-list li strong {
color: #dcc096;
font-weight: 500;
}
.modal-popup.card-premium-detail .card-toggle-wrap .toggle-head {
    position: relative;
    width: 100%;
    height: 4.2rem;
    margin-top: 3rem;
  border-radius: 0.6rem;
    background-color: var(--c-black-300);
}
.modal-popup.card-premium-detail .card-toggle-wrap .toggle-head span {
    width: 50%;
}
.modal-popup.card-premium-detail .card-toggle-wrap .toggle-head span::after {
    content: "이벤트";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 50%;
    height: calc(100% - 0.4rem);
    background-color: #000;
    border: 0.1rem solid #dcc096;
    border-radius: 0.6rem;
    color: #dcc096;
    transition: 0.4s;
    z-index: 10;
}
.modal-popup.card-premium-detail .card-toggle-wrap .toggle-head .chk-box:checked ~ span::after {
    content: "카드정보";
    transform: translate(100%, -50%);
    border-color: rgba(187, 187, 187, 0.8);
    color: #bbb;
}
.modal-popup.card-premium-detail .card-toggle-wrap .toggle-head .toggle-list {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    color: #666;
}
.modal-popup.card-premium-detail .card-toggle-wrap .toggle-head .toggle-list li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .tit {
    display: block;
    margin: 3rem 0 1.6rem;
    font-size: var(--fs-lg);
    color: #dcc096;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .accordion {
    border-bottom: 0.1rem solid #333;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .accordion:first-child {
    border-top: 0.1rem solid #333;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .accordion.is-open .fold-head:after {
    content: none;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .accordion.is-open .fold-head .btn-fold:before {
    transform: rotate(270deg);
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .fold-head {
    display: block;
    padding: 1.6rem 0 1.6rem 0;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .fold-head .btn-fold {
    top: 0;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .fold-head .btn-fold::before {
    top: calc(50% - 0.6rem);
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("../new_images/views/card/icon_arrow_white.png");
    transform: rotate(90deg);
    opacity: 0.8;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .fold-body {
    padding-bottom: 2.4rem;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .fold-body .bullet-list > li {
    color: #999;
}
.modal-popup.card-premium-detail .card-toggle-wrap .card-info-wrap .fold-body .bullet-list > li::before {
    opacity: 0.4;
} 
.modal-popup.card-premium-detail .card-info-list {
    margin-top: 4.2rem;
}

.modal-popup.card-premium-detail .card-info-list li {
display: flex;
}

.modal-popup.card-premium-detail .card-info-list li + li {
margin: 4rem 0 0;
}

.modal-popup.card-premium-detail .card-info-list li .title,
.modal-popup.card-premium-detail .card-info-list li .txt {
font-size: 1.6rem;
letter-spacing: -0.04rem;
}

.modal-popup.card-premium-detail .card-info-list li .title {
flex: 0 0 auto;
width: 8rem;
padding-right: 2rem;
font-weight: 500;
color: #dcc096;
}

.modal-popup.card-premium-detail .card-info-list li .txt {
color: var(--c-gray-400);
white-space: pre-line;
}

.modal-popup.card-premium-detail .card-info-list li .description {
display: block;
margin: 0.4rem 0 0;
font-size: 1.2rem;
letter-spacing: -0.03rem;
color: var(--c-gray-900);
}

.modal-popup.card-premium-detail .card-info-list li .description + .txt {
margin-top: 3rem;
}

.modal-popup.card-premium-detail .info_wrap {
padding: 0 0 4rem;
margin: 4rem 0 0;
}

.modal-popup.card-premium-detail .info_wrap::before {
content: "";
display: block;
height: 0.8rem;
margin: 0 -1.6rem 4rem;
background-color: var(--c-black-300);
}

.modal-popup.card-premium-detail .info_wrap > h4 {
padding-bottom: 1.6rem;
margin-bottom: 1.6rem;
font-size: 1.6rem;
color: var(--c-gray-500);
font-weight: 500;
border-bottom: 0.1rem solid var(--c-black-300);
}

.modal-popup.card-premium-detail .info_wrap .bullet-dot > li + li {
margin-top: 1.6rem;
}

.modal-popup.card-premium-detail .info_wrap .bullet-dot > li::before {
opacity: 0.4;
background-color: var(--c-gray-600);
}

.modal-popup.card-premium-detail .info_wrap .bullet-dot > li strong {
color: var(--c-gray-500);
font-weight: 500;
}

.modal-popup.card-premium-detail .info_wrap .bullet-dash > li::before {
background: var(--c-gray-500);
}

.modal-popup.card-premium-detail .modal-footer .btn.btn-primary {
height: 6rem;
background-color: #8f806b;
}

.modal-popup.card-premium-share .share_wrap {
display: flex;
padding: 0.12rem 0;
}

.modal-popup.card-premium-share .share_wrap li {
flex-grow: 1;
text-align: center;
}

.modal-popup.card-premium-share .share_wrap li button {
font-size: 1.4rem;
letter-spacing: -0.033rem;
border: 0;
background: none;
}

.modal-popup.card-premium-share .share_wrap li button::before {
content: "";
display: block;
margin: 0 auto 0.8rem;
width: 4.8rem;
height: 4.8rem;
border-radius: 100%;
color: var(--c-black-300);
background-repeat: no-repeat;
background-size: 100%;
}

.modal-popup.card-premium-share .share_wrap li button.ico_sms::before {
background-image: url("../new_images/views/card/ic_envelope_48.png");
}

.modal-popup.card-premium-share .share_wrap li button.ico_kakao::before {
background-image: url("../new_images/views/card/ic_talk_48.png");
}

.modal-popup.card-premium-share .share_wrap li button.ico_other::before {
background-image: url("../new_images/views/card/ic_etc_48.png");
}

.modal-popup.card-premium-share .modal-footer .btn.btn-primary {
background-color: #212266;
}

.banner.card-banner-wrap {
    position: relative;
    padding: 2.1rem 2rem;
    background-color: #696a8b;
}

.card-premium .banner.card-banner-wrap {
    border-radius: 1rem;
}

.card-premium-detail .banner.card-banner-wrap,
.card-premium-comparing .banner.card-banner-wrap {
    margin : 0 -1.6rem;
}

.banner.card-banner-wrap .card-img {
    width: 3rem;
    height: 4.8rem;
}
.banner.card-banner-wrap .text {
    margin-left: 1.6rem;
    color: var(--c-white);
    font-size: var(--fs-sm);
}
.banner.card-banner-wrap .text > span {
    display: block;
    padding-top: .4rem;
    margin-bottom: .2rem;
    font-size: var(--fs-df);
    font-weight: 400;
    opacity: 0.8;
}
.banner.card-banner-wrap .text > strong {
    font-size: var(--fs-lg);
    font-weight: 500;
}
.banner.card-banner-wrap .swiper-pagination {
    position: absolute;
    bottom: 1.6rem;
    right: 1.6rem;
    padding: .5rem 1.2rem;
    opacity: 0.8;
}
.banner.card-banner-wrap .swiper-pagination::before {
    background-color: #fff;
    opacity: 0.2;
    border-radius: 1.3rem;
}
/* Datepicker - Month */
.calendar-box {
    padding: 0;
    position: relative;
    background: var(--c-white);
    width: 100%;
    z-index: 99;
    border-bottom: 0.5rem solid var(--c-gray-200);
  }
  
  .calendar-box.fixed {
    position: fixed;
    top: 12rem;
  }
  
  .datepicker-month2 {
    max-width: 36rem;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content {
    width: 100%;
    color: var(--c-black);
    border-width: 0;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-header {
    background: none;
    border: none;
    padding: 0;
    margin: 2rem 0;
    text-align: left;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-prev .ui-icon {
    width: 1.8rem;
    height: 1.8rem;
    background: url(../new_images/icons/ico_arrow_right.svg) no-repeat 0 0;
    transform: rotate(180deg);
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-next .ui-icon {
    width: 1.8rem;
    height: 1.8rem;
    background: url(../new_images/icons/ico_arrow_right.svg) no-repeat 0 0;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-title {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-size: 1.4rem;
    color: #222222;
    margin: 0 0 0 2rem;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-title:after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: -2rem;
    width: 1em;
    height: 1em;
    background: url(../new_images/icons/ico_arrow_right.svg) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transform: rotate(90deg);
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year,
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
    display: inline-block;
    color: #222222;
  }
  
  .datepicker-month2 .ui-datepicker-prev.ui-corner-all {
    display: block;
    border: 5px solid #000;
    top: -2rem;
  }
  
  .datepicker-month2 .ui-datepicker-next.ui-corner-all {
    display: block;
    border: 5px solid #000;
    top: -2rem;
    font-size: 1.4rem;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar {
    table-layout: fixed;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar thead th {
    padding: 0;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar thead th span {
    display: block;
    height: 3rem;
    line-height: 3rem;
    font-size: var(--fs-sm);
    color: var(--c-black);
    font-weight: 700;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar thead th.ui-datepicker-week-end span {
    color: var(--c-darkblue);
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar thead th.ui-datepicker-week-end:first-child span {
    color: var(--c-orange);
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td {
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: none;
    border: none;
    text-align: center;
    height: 6rem;
    width: 6rem;
    vertical-align: middle;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td a {
    background: none;
    border: none;
    text-align: center;
    width: 3rem;
    height: 3rem;
    line-height: 2.5rem;
    margin: 0 auto;
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--c-gray-800);
    border-radius: 3rem;
    letter-spacing: -1px;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td a.ui-state-highlight {
    color: var(--c-black);
    background-color: var(--c-gray-400);
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: var(--c-primary);
    color: var(--c-white) !important;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td.approval {
    position: relative;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td .date-price {
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 100%;
    font-size: 1rem;
    color: var(--c-gray-700);
    line-height: 1.3rem;
    text-overflow: ellipsis;
    text-align: center;
    overflow: hidden;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    margin-top: 0.3rem;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td.ui-state-disabled {
    text-align: center;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-calendar tbody td.ui-state-disabled span {
    background: none;
    border: none;
    text-align: center;
    height: 6rem;
    line-height: 6rem;
    font-size: var(--fs-lg);
    font-weight: 500;
  }
  
  .datepicker-month2 .ui-widget.ui-widget-content .ui-datepicker-buttonpane {
    display: none;
  }
  
  .credit-cont > li,
  .credit-card-list > li {
    display: flex;
    align-items: center;
    padding: 3rem 0;
    border-bottom: 0.1rem solid var(--c-gray-300);
  }
  
  .credit-card-list.bt > li {
    border-top: 0.1rem solid var(--c-gray-300);
    border-bottom: none;
  }
  
  .credit-cont .text-wrap,
  .credit-card-list .text-wrap {
    width: 15.7rem;
    margin-left: 0.8rem;
  }
  
  .credit-cont .text-wrap > p,
  .credit-card-list .text-wrap > p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .credit-cont > li > p,
  .credit-card-list > li > p {
    width: 11.8rem;
    margin-left: auto;
    font-size: var(--fs-lg);
    font-weight: 700;
    text-align: right;
  }
  
  .icon-calendar {
    display: inline-block;
    position: relative;
  }
  
  .icon-calendar::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -2.5rem;
    width: 1.6rem;
    height: 1.6rem;
    background: url("../new_images/icons/ico_calendar.svg") no-repeat center right 0/1.6rem 1.6rem;
  }
  
  .card-history {
    padding-top: 0rem;
  }
  
  .card-history.fold {
    padding-top: 22rem;
  }
  
  .grid-not {
    display: block;
    height: auto;
  }
  
  .page-wrapper.sub.grid-not header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
  }
  
  .credit-box-tab {
    position: fixed;
    left: 0;
    top: 5.6rem;
    width: 100%;
    z-index: 100;
    background-color: #fff;
  }
  
  .credit-box {
    padding-top: 6.5rem;
  }

.speach_bubble_deposit {
    position: relative;
}

.speach_bubble_deposit::after {
    content: '';
    position: absolute;
    top: -3.3rem;
    right: -4rem;
    width: 5.2rem;
    height: 3.3rem;
    background: url('../new_images/views/loan/img_speach_deposit.png') no-repeat 0 0 / 100% 100%;
}
.list-active {
    margin: 0 -.8rem;
}
.list-active > li a {
    padding: 0 .8rem;
    border-radius: 0.8rem;
}
.list-active > li a:active {
    background-color: var(--c-gray-100);
}

.loan_list_box {
  height: 169px;
}

.loan_list {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  transition: 0.5s;
}

.loan_list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20rem;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 23%, #0c0c0c 94%);
  pointer-events: none;
  opacity: 0;
  transition: 0.5s;
}

.loan_list::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 20rem;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 23%, #0c0c0c 94%);
  pointer-events: none;
  opacity: 0;
  transition: 0.5s;
}

.loan_list button {
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 5.2rem;
  height: 6.8rem;
  padding: 0;
  background: url("../new_images/icons/ico_close2.png") no-repeat center/2rem 2rem;
  border: 0;
  font-size: 0;
  transition: 0.5s;
}

.loan_list h4 {
  opacity: 0;
  position: fixed;
  top: 6rem;
  left: 1.6rem;
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--c-white);
  transition: 0.5s;
}

.loan_list ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 3.6rem;
  transition: 0.5s;
}

.loan_list ul li {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: calc(100% - 6.4rem);
  height: 11.3rem;
  margin-top: -11.3rem;
  margin-left: 3.2rem;
  padding: 1.6rem;
  background-color: var(--c-white);
  border-radius: 1.2rem;
  pointer-events: auto;
  transition: 0.5s;
}

.loan_list ul li .d-flex-start::before {
  content: "";
  position: absolute;
  top: 2.3rem;
  left: 1.6rem;
  display: inline-block;
  flex-shrink: 0;
  align-self: center;
  width: 2.2rem;
  height: 2.2rem;
  background-color: var(--c-white);
  border: 1px solid var(--c-gray-400);
  border-radius: 50%;
  transition: all 0.1s ease-in-out;
  margin-right: 0.5rem;
  opacity: 0;
  transition: 0.5s;
}

.loan_list ul li .d-flex-start::after {
  content: "";
  position: absolute;
  top: 2.9rem;
  left: 2.2rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--c-gray-400);
  border-radius: 50%;
  opacity: 0;
  transition: 0.5s;
}

.loan_list ul li .fs-md {
  position: relative;
  top: -0.1rem;
}

.loan_list ul li .ml46 {
  position: relative;
  top: -0.2rem;
}

.loan_list ul li .fs-sm {
  transition: 0.5s;
}

.loan_list ul li.active {
  width: 100%;
  z-index: 3;
  margin-left: 0;
  transform: translateY(1.6rem);
  background: #f2f3f7;
}

.loan_list ul li.prev1 {
  z-index: 2;
  width: calc(100% - 3.2rem);
  margin-left: 1.6rem;
  transform: translateY(0.8rem);
  background: #dce1e8;
}

.loan_list ul li.prev1::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0;
  width: 100%;
  border-top: 0.1rem solid var(--c-white);
}

.loan_list ul li.prev2 {
  z-index: 1;
  background: #cdd4de;
}

.loan_list ul li.prev2::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0;
  width: 100%;
  border-top: 0.1rem solid var(--c-white);
}

.loan_list ul li:nth-child(1) {
  margin-top: 0;
}

.loan_list .icon_myloan {
  position: absolute;
  top: 2.47rem;
  right: 3.2rem;
  z-index: 4;
  height: 2.8rem;
  padding: 0 0.8rem;
  background-color: var(--c-white);
  border: 0.1rem solid #bec3c8;
  border-radius: 0.8rem;
  line-height: 2.6rem;
  font-size: 1.1rem;
  color: var(--c-gray-700);
  pointer-events: none;
  opacity: 1;
  transition: 0.5s;
}

.loan_list .icon_myloan::before {
  content: "";
  position: absolute;
  bottom: -0.4rem;
  left: calc(50% - 0.3rem);
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--c-white);
  border-bottom: 0.1rem solid #bec3c8;
  border-right: 0.1rem solid #bec3c8;
  transform: rotate(45deg);
}

.loan_list .icon_myloan::after {
  content: "";
  position: absolute;
  bottom: -3.1rem;
  left: calc(50% - 1.2rem);
  width: 2.4rem;
  height: 2.4rem;
  background: url("../new_images/icons/icon_myloan_list.png") no-repeat center/2.4rem 2.4rem;
}

.loan_list .icon_myloan strong {
  color: var(--c-red);
}

.loan_list .icon-arrow-down {
  opacity: 1;
  transition: 0.5s;
  pointer-events: none;
}

.loan_list.active {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  pointer-events: auto;
}

.loan_list.active::before,
.loan_list.active::after,
.loan_list.active button,
.loan_list.active h4,
.loan_list.active ul li .d-flex-start::before,
.loan_list.active ul li .d-flex-start::after {
  opacity: 1;
}

.loan_list.active ul {
  overflow: auto;
  height: calc(100% - 10.9rem);
  padding: 0 1.6rem 2.4rem;
}

.loan_list.active ul li {
  width: 100%;
  height: 11rem;
  margin: 0 0 1.2rem 0;
  padding: 1.4rem 1.6rem 1.4rem 5.4rem;
  background-color: var(--c-white);
}

.loan_list.active ul li.active {
  transform: translateY(0);
}

.loan_list.active ul li.active .d-flex-start::before {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}

.loan_list.active ul li.active .d-flex-start::after {
  background-color: var(--c-white);
}

.loan_list.active ul li .fs-sm {
  margin-top: 0.3rem;
}

.loan_list.active .icon_myloan,
.loan_list.active .icon-arrow-down {
  opacity: 0;
}

.footer_fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

.mydata .module-box2 {
    height: calc(100vh - 31rem);
    min-height: calc(100vh - 31rem);
}

.credit_score .divide-box > li + li:before {
    height: 98px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-gray-300);
}

/* 240723 css 수정 */
.module-box.position-relative .position-absolute.d-flex-center {
    left: 50%;
    transform: translateX(-50%);
    top: 169px;
    z-index: 10;
}
.module-box.position-relative .position-absolute.btn-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 38px;
    justify-content: center;
  }
/* *********** */

  .module-box.position-relative .position-absolute .btn-icon-refresh {
    cursor: pointer;
}

  .module-box.position-relative .position-absolute .btn-icon-refresh.refresh:before {
      animation: loading forwards linear 1s;
  }

  @keyframes loading {
      100% {transform: rotate(360deg);}
  }
  
  /* 240723 css 수정 */
  .chart-gauge .difference_box {
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  /* *********** */
  
  .credit_score.sub .divide-box > li + li::before {
    height: 9.8rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-gray-300);
  }
  .progress_down {
    position: relative;
    margin-top: 5.6rem;
    margin-bottom: 2.4rem;
    height: 20.3rem;
    background: url('../../resources/new_images/views/cmg/score_progress_down.png') no-repeat top center;
    background-size: auto 100%;
  }
  ul.assetcons {
    position: relative;
  }
  ul.assetcons:before {
    content: '';
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
    background: url('../../resources/new_images/views/cmg/img_blueplus.png') no-repeat 0 0;
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .readmoreWrap .more_wrap .grid-box {
    grid-template-columns: 64px calc(100% - 129px) 65px;
  }
  .readmoreWrap .more_wrap .grid-box img + div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .h-100vh.d-flex.justify-content-between {
    gap: 2.4rem 2rem;
  }
  
.guage_box {
    position: relative;
    width: 24.5rem;
    height: 24.5rem;
    margin: 4.5rem auto 0;
  }
  .guage_bg {
    position: relative;
    width: 24.5rem;
    height: 24.5rem;
    margin: 4.5rem auto 0;
  
    background: url('../../resources/new_images/views/cmg/start_gauge.png') 0 0 no-repeat;
    background-size: 100% auto;
    box-shadow: inset .1rem .1rem .1rem 0 rgba(255, 255, 255, 0.4);
  }
  .guage_box .guage {
    position: absolute;
    left: 0;
    top: 0;
    width: 24.5rem;
    height: 24.5rem;
    display: block;
    background: url('../../resources/new_images/views/cmg/end_gauge.png') 0 0 no-repeat;
    background-size: 100% auto;
    overflow: hidden;
  
    animation: guage 2s 1s ease-in-out forwards;
    box-shadow: inset .1rem .1rem .1rem 0 rgba(255, 255, 255, 0.4);
    clip-path: polygon(50% 0%, 0 0, 0 33%, 0 100%, 50% 100%);
  }
  
  
  @keyframes guage {
    0% { clip-path: polygon(50% 0%, 0 0, 0 33%, 0 100%, 50% 100%); } 
    3% { clip-path: polygon(55% 0%, 50% 50%, 50% 100%, 0% 100%, 0% 0%); } 
    5% { clip-path: polygon(60% 0%, 50% 50%, 50% 100%, 0% 100%, 0% 0%); } 
    10% { clip-path: polygon(70% 0%, 50% 50%, 50% 100%, 0% 100%, 0% 0%); } 
    15% { clip-path: polygon(80% 0%, 50% 50%, 50% 100%, 0% 100%, 0% 0%); } 
    20% { clip-path: polygon(90% 0%, 50% 50%, 50% 100%, 0% 100%, 0% 0%); } 
    25% { clip-path: polygon(100% 0%, 50% 50%, 50% 100%, 0% 100%, 0% 0%); } 
    30% { clip-path: polygon(100% 10%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    35% { clip-path: polygon(100% 20%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    40% { clip-path: polygon(100% 30%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    45% { clip-path: polygon(100% 40%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0) } 
    50% { clip-path: polygon(100% 50%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    60% { clip-path: polygon(100% 60%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    70% { clip-path: polygon(100% 70%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    80% { clip-path: polygon(100% 80%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    90% { clip-path: polygon(100% 90%, 50% 50%, 50% 100%, 0% 100%, 0% 0%, 100% 0); } 
    100% { clip-path: polygon(100% 100%, 50% 50%, 33% 100%, 0% 100%, 0% 0%, 100% 0%); }
  }
  
  .needle {
    width: 3.3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  
  .needle img {
    display: block;
    animation: needle 2s 1s linear forwards;
    transform: rotate(-60deg);
  }
  
  div.guage_box div.score {
    position: absolute;
    width: 9.2rem;
    height: 9.2rem;
    top: 0;
    opacity: 0;
    transition: opacity 2.5s;
    animation-delay: 1s;
  }
  
  div.guage_box div.th_score {
    left: -2rem;
    animation-name: th_score;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
  }
  
  div.guage_box div.st_score {
    right: -2rem;
    animation-name: st_score;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  
  div.guage_box div.score img {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  @keyframes th_score {
    0% { opacity: 0; }
    40% { opacity: 1; }
    55% { opacity: 1; }
    100% { opacity: 0; }
  }
  
  @keyframes st_score {
    0% { opacity: 0; }
    50% { opacity: 0; }
    90% { opacity: 1; }
    100% { opacity: 1; }
  }
  
  @keyframes needle {
    0% {transform: rotate(-60deg);}
    50% {transform: rotate(10deg);}
    100% {transform: rotate(85deg);}
  }
  
  /* 240724 해당 주석 아래로 전부 수정하였으니 적용 부탁드립니다. */
  .linechart_tooltip {
    padding: 0 .5rem;
    background-color: var(--c-black);
    box-shadow: 0 .2rem .6rem 0 rgba(40, 75, 145, 0.2);
    border-radius: .4rem;
    color: var(--c-white);
    line-height: 3.4rem;
  } 
  div.tab-wrap {
    position: relative;
  }
  
  div.tab-wrap ul.chart_tab {
    position: static;
    display: block;
    padding: 0;
  }
  div.tab-wrap ul.chart_tab:before {
    display: none;
  }
  div.tab-wrap ul.chart_tab li {
    position: absolute;
    display: block;
    min-height: auto;
    padding: 0;
    width: 1rem;
    height: 1.7rem;
    border: 0 none;
    cursor: pointer;
    top: 38%;
    left: 0;
    z-index: 10;
  }
  div.tab-wrap ul.chart_tab li + li {
    right: 0;
    left: auto;
  }
  
  div.tab-wrap ul.chart_tab li.active {
    display: block;
  }
  
  div.tab-wrap ul.chart_tab li.hidden {
    display: none;
  }
  
  div.tab-wrap ul.chart_tab img {
    display: block;
    width: 100%;
    height: 100%;
  }
  div.tab-panel.chart_con {
    display: block;
    padding: 0;
  }
  
  div.tab-panel.chart_con.hidden {
    display: none;
  }
  
  div.tab-wrap div#chart-line span.chart_score {
    position: relative;
    max-width: 5.9rem;
    min-width: 5.1rem;
    left: .5rem;
    top: .4rem;
    display: block !important;
    box-shadow: 0 .2rem .6rem 0 rgba(40, 75, 145, 0.2);
    color: #1e1e1e;
    text-align: center;
    border-radius: .2rem;
    background-color: #fff;
    padding: .6rem 0;
    box-sizing: border-box;
  }
  
  div.tab-wrap div#chart-line span.chart_score:before {
    content: '';
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    top: -2.1rem;
    background-color: #fff;
    border-radius: 50%;
    border: .3rem solid #1e1e1e;
  }
  
  div.tab-wrap div#chart-line span.chart_score.min:before {
    border-color: var(--c-navy-2);
  }
  div.tab-wrap div#chart-line span.chart_score.max:before {
    border-color: var(--c-num-red-2);
  }
  
  div#chart-line .highcharts-axis-labels.highcharts-axis-labels.highcharts-xaxis-labels {
    transform: translateY(.5rem);
  }
  
  #chart-line{
    position: relative;
  }
  #chart-line.countOne::after{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
  }
  #chart-line .highcharts-label {
      position: relative;
      left: -.1rem;
      width: 6rem;
      height: 6rem;
  }
  #chart-line .highcharts-label > span {
      left: 0 !important;
      top: 0 !important;
  }
  #chart-line.countOne .line_box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 12.8rem;
  }
  #chart-line.countOne .line{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 1rem;
    z-index: 7;
    width: .1rem;
    height: 12.8rem;
    border: .1rem dashed #000;
    text-indent: -9999px;
  }
  #chart-line.countOne .toolOne{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background: #000;
    color: #fff;
    font-size: 1.1rem;
    display: inline-block;
    letter-spacing: .05rem;
    padding: .8rem .5rem;
    min-width: 4.8rem;
    text-align: center;
    border-radius: .3rem;
  
  }
  #chart-line.countOne .toolOne:before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-48%);
    background-color: #fff;
    top: -2.2rem;
    border-radius: 50%;
    width: 1.4rem;
    height: 1.4rem;
    border: .3rem solid #1e1e1e;
  }
  .agreement-grade {
    position: relative;
  }
  .agreement-grade h3 .num {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-right: .6rem;
    color: #fff;
    line-height: 1.9rem;
    text-align: center;
    background-color: var(--c-num-blue);
    border-radius: 50%;
  }
  .agreement-grade .step {
    width: 197.5px;
    margin-top: 1rem;
  }
  .agreement-grade .step img {
    width: 100%;
    height: auto;
  }
  .agreement-grade .qr {
    position: absolute;
    width: 5.7rem;
    top: .25rem;
    right: 1rem;
  }
  .agreement-grade .desc {
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.2px;
  }
  .agreement-grade .desc i {
    display: inline-block;
    font-style: normal;
  }
  .identifi table {
    width: 100%;
    border-bottom: 1px solid #8a8a8a;
  }
  .identifi table caption {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    font-size: 1px;
    line-height: 0;
  }
  .identifi tbody tr > * {
    padding: .8rem 1rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    text-align: left;
    border-top: 1px solid #8a8a8a;
  }
  .identifi tbody th {
    background-color: #dee3ec;
    font-weight: normal;
  }
  .identifi .inner-table {
    margin-top: .2rem;
    margin-bottom: .2rem;
    text-align: center;
    border: 1px solid #8a8a8a;
    border-top: 0 none;
  }
  .identifi .inner-table dt {
    padding: 0.75rem;
    background-color: #dee3ec;
    border-top: 1px solid #8a8a8b;
  }
  .identifi .inner-table dd {
    padding: 0.75rem;
    background-color: #fff;
  }
  .identifi .agreement .label {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    width: 65px;
    text-align: center;
    border-radius: 1rem;
    background-color: #1998e9;
  }
  .identifi .logo-group {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.5rem 1rem;
    border-top: 1px solid #d6d6d6;
  }
  .identifi .logo-group .logo {
    width: 6.5rem;
  }
  .identifi .logo-group .logo img {
    max-width: 100%;
    height: auto;
  }
    .page-wrapper.sub > header.position_fixed {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
    }
    .pt56 {
        padding-top: 5.6rem;
    }
    /* 연말정산 */
    .toggle_wrap .toggle_head {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
      }
      .toggle_wrap .toggle_head li {
        position: relative;
      }
      .toggle_wrap .toggle_head li input {
        width: 1px;
        height: 1px;
        appearance: none;
      }
      .toggle_wrap .toggle_head li input:checked + label {
        background-color: #212266;
        color: #fff;
        border: 0 none;
      }
      .toggle_wrap .toggle_head li label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 4.2rem;
        border: 0.1rem solid #ddd;
        background-color: #fff;
        border-radius: 0.8rem;
        color: #999;
        font-size: 1.4rem;
        transition: all 0.2s ease-in-out;
      }
      .toggle_wrap .toggle_body {
        display: none;
        padding: 2.4rem 0.8rem;
        border-bottom: 0.1rem solid #eee;
      }
      .toggle_wrap .toggle_body > li + li {
        margin-top: 2.8rem;
      }
      .toggle_wrap .toggle_body .count_num {
        display: flex;
        border: 0.1rem solid #ddd;
        border-radius: 0.8rem;
        background-color: #fff;
        overflow: hidden;
      }
      .toggle_wrap .toggle_body .count_num > button {
        display: block;
        width: 3.2rem;
        height: 3.2rem;
        padding: 0;
        border: 0 none;
        background-color: #fff;
        background-position: center center;
        background-size: 1.2rem 1.2rem;
        background-repeat: no-repeat;
        font-size: 0;
        line-height: 0;
      }
      .toggle_wrap .toggle_body .count_num > button.minus {
        background-image: url("../new_images/views/yet/icon_minus.png");
      }
      .toggle_wrap .toggle_body .count_num > button.plus {
        background-image: url("../new_images/views/yet/icon_plus_2.png");
      }
      .toggle_wrap .toggle_body .count_num span {
        display: block;
        width: 5rem;
        padding: 0 0.8rem;
        text-align: right;
        font-weight: normal;
        line-height: 3.2rem;
        border-left: 0.1rem solid #ddd;
        border-right: 0.1rem solid #ddd;
      }
      .toggle_wrap .toggle_body .count_num.disabled span {
        color: #ccc;
      }
      
      .label_change {
        flex-direction: row-reverse;
        align-items: center;
        gap: 0.6rem;
      }
      .label_change label {
        position: relative;
        display: block;
        width: 4rem;
        height: 2.4rem;
        color: #1e1e1e;
        font-size: 1.2rem;
        line-height: 2.4rem;
        text-align: right;
      }
      .label_change label span {
        display: none;
      }
      .label_change .custom-switch:checked {
        background-color: #212266;
      }
      .label_change .custom-switch:checked + label span:not(.defalut) {
        display: block;
      }
      .label_change .custom-switch:checked + label span.default {
        display: none;
      }
      .label_change .custom-switch:not(:checked) + label span.default {
        display: block;
      }
      
      .note {
        padding-top: 0.8rem;
        font-size: 1.2rem;
        color: #888;
      }
      
      .text-center.yearend {
        padding-top: 7.2rem;
      }
      .text-center.yearend img {
        display: block;
        margin: 0 auto;
        width: 32.8rem;
      }
      
      .yearend.fixed {
        min-height: auto;
        height: auto;
      }
      .yearend.fixed > header,
      .yearend.fixed > main,
      .yearend.fixed > footer {
        grid-area: auto;
      }
      .yearend.fixed > header {
        position: fixed;
        left: 0;
        top: 0;
        background-color: #fff;
        z-index: 1;
      }
      .yearend.fixed > main {
        margin: 5.6rem 0;
      }
      .yearend.fixed > footer {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
      }
      .yearend .form-box .note {
        margin-top: 0.8rem;
        font-size: 1.2rem;
        line-height: 1.6rem;
        color: #888;
      }
      .yearend .custom-radio.btn-type label {
        min-height: 4.2rem;
        color: #999;
        border-color: #ddd;
      }
      .yearend .custom-radio.btn-type input:checked + label {
        background-color: #212266;
      }
      .yearend .border-light-gray.border {
        border-bottom: 0.1rem solid #000;
      }
      .yearend .px16-2 {
        padding-left: 1.6rem !important;
        padding-right: 1.6rem !important;
      }
      .yearend .module-box > .bg-white2 {
        background-position: top 3.2rem right 2.4rem;
        background-repeat: no-repeat;
        background-size: 8rem 11.2rem;
      }
      .yearend .module-box > .bg-white2.refund {
        background-image: url("../new_images/views/yet/img_result_happy.png");
      }
      .yearend .module-box > .bg-white2.payment {
        background-image: url("../new_images/views/yet/img_result_sad.png");
      }
      .yearend .module-box > .bg-white2 .btn-icon-refresh.refresh:before {
        animation: loading forwards linear 1s;
      }
      .yearend button.edit {
        position: relative;
        display: inline-block;
        vertical-align: top;
        border: 0;
        font-size: 0;
        line-height: 0;
        padding: 0;
        margin-left: 0.6rem;
        width: 1.6rem;
        height: 1.9rem;
        background: url("../new_images/views/yet/icon_edit.png") no-repeat center center;
        background-size: 1.6rem 1.6rem;
      }
      .yearend .section {
        padding: 2rem;
        border: 0.1rem solid #eee;
        border-radius: 1.6rem;
      }
      .yearend .section .tit span {
        color: #212266;
      }
      .yearend .section dd > ul > li {
        padding: 1.6rem 0;
      }
      .yearend .section dd > ul > li:last-child {
        padding-bottom: 0;
      }
      .yearend .section dd > ul > li + li {
        border-top: 0.1rem solid #eee;
      }
      .yearend .section dd > ul > li.accordion .btn-fold::before {
        width: 1.2rem;
        height: 2.4rem;
        top: 50%;
        transform: translateY(-50%) rotate(0);
        background: url("../new_images/views/yet/icon_arrow_up.png") no-repeat center center;
        background-size: 1.2rem auto;
      }
      .yearend .section dd > ul > li.accordion.is-open .btn-fold::before {
        top: 0;
        transform: translateY(0) rotate(180deg);
      }
      .yearend .section dd > ul > li.accordion .fold-body {
        padding: 1.6rem 1.2rem;
      }
      .yearend .section.total {
        border: 0.2rem solid #616161;
      }
      .yearend .section.total .tit span {
        color: #1e1e1e;
        font-size: 2.2rem;
      }
      .yearend .total_box.btn-box a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 5.1rem;
        padding: 0 3.2rem 0 1.2rem;
        border-radius: 1.2rem;
        background-color: #eff2fb;
      }
      .yearend .total_box.btn-box a.coin {
        padding: 0 3.9rem 0 4.8rem;
        background-position: left 2rem center;
        background-repeat: no-repeat;
        background-image: url("../new_images/views/yet/icon_coin.png");
        background-size: 2rem 2rem;
      }
      .yearend .total_box.btn-box a::after {
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 0.7rem;
        height: 1.2rem;
        background-image: url("../new_images/views/yet/icon_arrow_right.png");
      }
      .yearend .custom-swiper .swiper-pagination-bullet-active {
        background-color: #888;
      }
      
      .tooltip_wrap {
        position: relative;
      }
      .tooltip_wrap .tooltip2 {
        position: relative;
        display: inline-block;
        text-decoration: none;
        color: #888;
        background-color: transparent;
        border: 0;
        line-height: 1.6rem;
      }
      .tooltip_wrap .tooltip2 img {
        display: inline-block;
        vertical-align: top;
        width: 1.6rem;
        height: 1.6rem;
        margin-left: 0.6rem;
      }
      .tooltip_wrap .tooltip2.is-open::before, .tooltip_wrap .tooltip2.is-open::after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 0;
        height: 0;
      }
      .tooltip_wrap .tooltip2.is-open::before {
        z-index: 7;
        right: 0;
        bottom: -1.5rem;
        border-style: solid;
        border-width: 0 0.8rem 0.8rem 0.8rem;
        border-color: transparent transparent #fff transparent;
      }
      .tooltip_wrap .tooltip2.is-open::after {
        z-index: 5;
        right: -0.2rem;
        bottom: -1.6rem;
        border-style: solid;
        border-width: 0 1rem 1rem 1rem;
        border-color: transparent transparent #ccc transparent;
      }
      .tooltip_wrap .tooltip-box2 {
        z-index: -1;
        opacity: 0;
        position: absolute;
        display: block;
        width: 100%;
        left: 0;
        top: 3.2rem;
        padding: 1.6rem;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 1rem;
        border: 0.1rem solid #ddd;
        box-sizing: border-box;
        transition: all 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);
      }
      .tooltip_wrap .tooltip-box2.is-open {
        opacity: 1;
        z-index: 6;
      }
      .tooltip_wrap .tooltip-box2 .tooltip-close {
        position: absolute;
        right: 1.6rem;
        top: 1.6rem;
        width: 1rem;
        height: 1rem;
        padding: 0;
        background: url("../new_images/icons/ico_close.png") no-repeat center center;
        background-size: 100% 100%;
        font-size: 0;
        line-height: 0;
        border: 0;
        background-color: transparent;
      }
      
      .no-data2 {
        position: relative;
        padding-top: 6.4rem;
        padding-bottom: 2.4rem;
        text-align: center;
      }
      .no-data2:before {
        position: absolute;
        content: "";
        display: block;
        width: 2.8rem;
        height: 2.8rem;
        top: 2.4rem;
        left: 50%;
        transform: translateX(-50%);
        background: url("../new_images/icons/ico_nodata.png") no-repeat;
        background-size: contain;
      }
      
      .divide_bar {
        position: relative;
        display: inline-block;
      }
      .divide_bar:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 0.1rem;
        height: 1.2rem;
        background-color: #ddd;
        margin: 0 0.8em 0.3rem;
      }
      
      .more_people .tit {
        color: #888;
        font-weight: 500;
        letter-spacing: 0;
      }
      .more_people .tit > a {
        color: #888;
      }
      .more_people .tit > span {
        color: #888;
        letter-spacing: 0;
      }
      .more_people .tit .btn_wrap {
        display: flex;
        gap: 0.4rem;
      }
      .more_people .tit button {
        display: inline-block;
        border: 0.1rem solid #ddd;
        background-color: #fff;
        border-radius: 0.8rem;
        font-size: 1.2rem;
        font-weight: 500;
        color: #333;
      }
      .more_people .tit button + button {
        vertical-align: top;
      }
      .more_people .tit button.add_person {
        padding: 0.6rem 1.2rem 0.5rem 2.6rem;
        background: url("../new_images/views/yet/icon_plus.png") no-repeat left 1.2rem center;
        background-size: 1.2rem 1.2rem;
        background-color: #fff;
      }
      .more_people .tit button.del_person {
        width: 3.6rem;
        height: 3rem;
        font-size: 0;
        line-height: 0;
        background: url("../new_images/views/yet/icon_delete.png") no-repeat center center;
        background-size: 1.2rem 1.2rem;
      }

/* 연말정산 */
.asset.text-center {
padding-top: 10rem;
}
.asset.text-center img {
width: 28.8rem;
}

.asset .modal-body h2.fw-m {
font-size: 1.8rem;
}
.asset .modal-body h2.fw-m + p {
margin-top: 1rem;
font-size: 1.4rem;
}
.asset .modal-body .btn_list {
margin-top: 2rem;
}
.asset .modal-body .btn_list li + li {
margin-top: 0.8rem;
}
.asset .modal-body .btn_list button {
display: flex;
width: 100%;
height: 6.3rem;
align-items: center;
padding-left: 1.6rem;
border: 0.1rem solid #eee;
font-weight: 500;
color: #888;
font-size: 1.4rem;
border-radius: 1.6rem;
background: url("../new_images/views/asset/icon_arrow_right.png") no-repeat top 2.5rem right 1.8rem;
background-size: 0.7rem 1.2rem;
}
.asset .modal-body .text_box {
margin-top: 2rem;
padding: 1.6rem 1.8rem;
background-color: #fafafa;
font-size: 1.2rem;
border-radius: 0.8rem;
line-height: 1.6rem;
}
.asset .modal-body .text_box span {
font-weight: bold;
color: #b43a6b;
}
.asset .module-box.moudule-border {
border-top: 0.8rem solid #f5f5f5;
}
.asset .module-box .bg_info_list {
margin-top: 2.8rem;
padding: 1.9rem 2.4rem;
background-color: #f8f8f8;
color: #888;
font-size: 1.2rem;
line-height: 1.8rem;
}
.asset .module-box .bg_info_list li {
position: relative;
padding-left: 0.8rem;
}
.asset .module-box .bg_info_list li::before {
content: "";
display: block;
position: absolute;
width: 0.4rem;
height: 0.4rem;
left: 0;
top: 0.6rem;
border-radius: 50%;
background-color: #e0e0e0;
}
.asset .module-box .bg_info_list li + li {
margin-top: 1.3rem;
}
.asset .module-box.loading {
margin-top: 9rem;
text-align: center;
}
.asset .module-box.loading .timer {
padding: 9.4rem 0 2.4rem;
background: url("../new_images/views/asset/icon_loading.png") no-repeat center top/8rem 8rem;
color: #ff5353;
font-weight: 500;
font-size: 2rem;
}
.asset .module-box.loading h2 {
font-weight: 500;
font-size: 2rem;
line-height: 2.4rem;
}
.asset .module-box.loading .wait {
margin-top: 1.3rem;
font-size: 1.4rem;
font-weight: 500;
color: #616161;
}
.asset .current_list + .current_list {
margin-top: 3rem;
padding-top: 3rem;
border-top: 0.1rem solid #eee;
}
.asset .current_list dt {
margin-bottom: 1rem;
font-weight: bold;
font-size: 1.6rem;
}
.asset .current_list dd {
font-size: 1.4rem;
color: #616161;
}
.asset .current_list dd + dt {
margin-top: 2.8rem;
}
.asset .current_list dd.point {
font-weight: bold;
font-size: 1.6rem;
color: #2e82ca;
}
.asset .user_info {
display: flex;
height: 9.4rem;
justify-content: center;
flex-direction: column;
padding: 0 2rem;
background-color: #f7f7f7;
border-radius: 0.8rem;
}
.asset .user_info li {
display: flex;
justify-content: space-between;
padding-left: 2.2rem;
line-height: 2.3rem;
background-position: left center;
background-repeat: no-repeat;
background-size: 1.6rem 1.6rem;
background-image: url("../new_images/views/asset/icon_document.png");
color: #1e1e1e;
font-size: 1.6rem;
font-weight: 500;
}
.asset .user_info li .tit {
font-size: 1.4rem;
color: #888;
font-weight: normal;
}
.asset .user_info li .tit a {
font-size: inherit;
color: #888;
font-weight: normal;
}
.asset .user_info li .tooltip-box {
padding: 3rem 2rem 2rem;
}
.asset .user_info li .tooltip-box .tooltip-close {
top: 0.5rem;
}
.asset .user_info li .tooltip-box p {
padding-left: 0;
}
.asset .user_info li .tooltip-box p::before {
display: none;
}
.asset .user_info li + li {
margin-top: 0.8rem;
background-image: url("../new_images/views/asset/icon_user.png");
}
.asset .user_apply {
margin-top: 3rem;
}
.asset .user_apply > dt {
margin-bottom: 2rem;
padding-left: 4rem;
font-weight: 500;
font-size: 1.8rem;
line-height: 3.2rem;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 3.2rem 3.2rem;
}
.asset .user_apply > dt.woori {
background-image: url("../new_images/views/asset/icon_bank_woori.png");
}
.asset .user_apply > dt.kiwoom {
background-image: url("../new_images/views/asset/icon_bank_kiwoom.png");
}
.asset .user_apply > dt.sh {
background-image: url("../new_images/views/asset/icon_bank_sh.png");
}
.asset .user_apply > dt.ci {
    background-image: url("../new_images/views/asset/icon_bank_ci.png");
}
.asset .user_apply > dt.flex {
display: flex;
justify-content: space-between;
padding-left: 0;
}
.asset .user_apply > dt.flex span {
font-weight: normal;
font-size: 1.6rem;
}
.asset .user_apply .first_info li {
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 1.4rem;
}
.asset .user_apply .first_info li + li {
margin-top: 0.5rem;
}
.asset .user_apply .first_info li .tit {
color: #888;
font-size: 1.4rem;
font-weight: normal;
}
.asset .user_apply .second_info dt {
margin: 3.6rem 0 1.8rem;
color: #212121;
font-weight: 500;
font-size: 1.6rem;
}
.asset .user_apply .second_info th {
text-align: left;
}
.asset .user_apply .second_info td {
text-align: right;
color: #212121;
}
.asset .user_apply .second_info td .more {
padding-right: 1.7rem;
background-color: transparent;
border: 0;
background: url("../new_images/views/asset/icon_arrow_right_s.png") no-repeat right center;
background-size: 1.6rem 1.6rem;
font-size: 1.2rem;
line-height: 1.6rem;
}
.asset .no_result {
margin-top: 15rem;
padding-top: 10.7rem;
background: url("../new_images/views/asset/icon_error.png") no-repeat center top;
background-size: 8rem 8rem;
color: #212121;
font-weight: 500;
text-align: center;
font-size: 2rem;
}
.banner_list {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
}
.banner_list li {
    width: 100%;
}
.banner_list a.card-box.icon {
    width: 100%;
    padding: 1.6rem 1rem 1.6rem 0.8rem;
}
.banner_list .fc-white {
    margin-left: 0.5rem;
    font-size: 1.3rem;
}
.banner_list .fc-white + p {
    margin-left: 0.5rem;
}
.banner_list img {
    margin-bottom: 0.8rem;
}
.yearend .refund_baaner {
    position: relative;
    margin-top: 3rem;
    padding: 1.6rem;
    background-color: #eff2fb;
    border-radius: 1.6rem;
}
.yearend .refund_baaner .add {
    position: absolute;
    left: 1.6rem;
    top: -1rem;
    padding: 0 0.6rem;
    background-color: #212266;
    border-radius: 0.6rem;
    color: #fff;
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 400;
}
.yearend .refund_baaner a {
    text-decoration: none;
}
.yearend .refund_baaner p a {
    display: block;
    background-color: #fbfcff;
    border-radius: 0.8rem;
    font-weight: 500;
    color: #1e1e1e;
    font-size: 1.6rem;
    line-height: 2.2rem;
}
.yearend .refund_baaner p a .link {
    position: relative;
    display: inline-block;
    padding: 1.2rem 1.2rem 1.2rem 3.8rem;
    background: url("../new_images/views/yet/icon_refund.png") no-repeat top 1.4rem left 1.2rem;
    background-size: 2rem 2rem;
}
.yearend .refund_baaner p a .link::after {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.6rem;
    background: url("../new_images/views/yet/icon_refund_btn.png") no-repeat 0 0/100% 100%;
}
.yearend .refund_baaner p a.first {
    padding: 2.5rem 0 2.5rem 3.8rem;
    font-size: 1.4rem;
    line-height: 2rem;
    background: url("../new_images/views/yet/icon_refund2.png") no-repeat center left 1.2rem;
    background-size: 2rem 2rem;
    background-color: #fbfcff;
}
.yearend .refund_baaner div {
    position: relative;
    margin-top: 1.6rem;
    font-size: 0;
    line-height: 0;
}
.yearend .refund_baaner div::before {
    content: "";
    position: absolute;
    display: block;
    background-color: #d9deec;
    width: 0.1rem;
    height: 1.6rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.yearend .refund_baaner div a {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    text-align: center;
    color: #333;
    font-size: 1.4rem;
    line-height: 2rem;
    box-sizing: border-box;
}
.popup_naver .modal-body {
    padding: 5rem 0;
}
.popup_naver .modal-body .img_wrap img {
    display: block;
    width: 11.4rem;
    height: 11.4rem;
    margin: 0 auto;
}

.loan_info {
    padding-bottom: 22rem;
    background: url("../new_images/views/loan/img_naverpay2.png") no-repeat bottom center/32.8rem 18rem;
}
.loan_info li {
    padding-left: 2.6rem;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 2rem 2rem;
}
.loan_info li:nth-child(1) {
    background-image: url("../new_images/views/loan/icon_loan_pen.png");
}
.loan_info li:nth-child(2) {
    background-image: url("../new_images/views/loan/icon_loan_thunder.png");
}
.loan_info li:nth-child(3) {
    background-image: url("../new_images/views/loan/icon_loan_card.png");
}

/* .custom-label {
    border: 0 none;
  } */
  .custom-label.c-light-red {
    color: #fff;
    font-size: 1rem;
    background-color: #e58583;
  }
  .custom-label.c-mint-2 {
    background-color: #75b99a;
    color: #fff;
    font-size: 1rem;
  }
  
  .custom-swiper.loading_slide {
    padding-bottom: 3rem;
  }
  .custom-swiper.loading_slide img {
    display: block;
    width: 32rem;
    margin: 2rem auto 0;
  }
  .custom-swiper.loading_slide .swiper-pagination.custom-bullet {
    bottom: 0;
  }
  
  .check_list label {
    background: url("../../resources/new_images/views/asset/icon_arrow_right_s.png") no-repeat center right/1.6rem 1.6rem;
  }
  
  .bg_notice {
    margin-top: 3rem;
    padding: 2rem 1.5rem;
    background-color: #fafafa;
    border-radius: 0.8rem;
  }
  .bg_notice dt {
    margin-bottom: 1.2rem;
    color: #1e1e1e;
    font-size: 1.6rem;
    line-height: 1;
  }
  .bg_notice p {
    color: #616161;
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
  .bg_notice .btn_wrap {
    margin-top: 1rem;
  }
  .bg_notice .btn_wrap a {
    display: inline-block;
    padding-right: 1.6rem;
    color: #888;
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-decoration: underline;
    background: url("../new_images/views/asset/icon_arrow_gray.png") no-repeat right center/1.6rem 1.6rem;
  }
  .bg_notice .btn_wrap a + a {
    margin-left: 1rem;
  }
  
  .connect_list {
    padding: 3rem 2.4rem;
    background-color: #fafafa;
    border-radius: 0.8rem;
  }
  .connect_list dt {
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
  .connect_list .custom-check {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0;
  }
  .connect_list .custom-check li input:checked + label i {
    background-color: transparent;
  }
  .connect_list .custom-check li i {
    width: 1.6rem;
    height: 1.6rem;
  }
  .connect_list .custom-check li i:before {
    left: 0.25rem;
    width: 0.2rem;
    height: 5px;
    top: 0.6rem;
  }
  .connect_list .custom-check li i:after {
    top: 6px;
    width: 10px;
    left: 0.4rem;
    height: 0.2rem;
  }
  .connect_list .custom-check li p {
    color: #212121;
  }
  
  .fido {
    padding-bottom: 32rem;
    background: url("../new_images/views/asset/img_fast.png") no-repeat center bottom/32.8rem 28rem;
  }
  
  .fixed_notice {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 5.6rem;
    padding: 0 1.6rem 1.4rem;
    background-color: #fff;
  }
  
  .company_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-top: 2rem;
  }
  .company_list li {
    position: relative;
  }
  .company_list li input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    appearance: none;
  }
  .company_list li input:checked + label {
    background: url("../new_images/icons/chk_checked.png") no-repeat top 0.8rem right 1.1rem/2.4rem 2.4rem;
    background-color: #fff;
    border: 0.1rem solid #181949;
  }
  .company_list li label {
    display: block;
    width: 100%;
    padding: 2.7rem 0;
    border: 0.1rem solid #fafafa;
    background-color: #fafafa;
    border-radius: 1rem;
    text-align: center;
  }
  .company_list li label img {
    display: block;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 0.8rem;
  }
  .company_list li label span {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
  
  .certifi_list li button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6rem;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem;
    border-radius: 0.8rem;
    background-color: #fff;
    border: 0.1rem solid #eee;
    box-sizing: border-box;
  }
  .certifi_list li button img {
    display: block;
    width: 4rem;
    height: 4rem;
  }
  .certifi_list li button .name {
    font-size: 1.4rem;
  }
  .certifi_list li button .wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 4rem;
  }
  .certifi_list li + li {
    margin-top: 1rem;
  }
  
  .connecting_box .custom-swiper {
    padding-bottom: 3rem;
  }
  .connecting_box .custom-swiper .swiper-slide img {
    display: block;
    width: 29.6rem;
    height: 17rem;
    margin: 0 auto;
  }
  .connecting_box .custom-swiper .swiper-pagination.custom-bullet {
    bottom: 0;
  }
  .connecting_box .custom-swiper .swiper-pagination.custom-bullet .swiper-pagination-bullet-active {
    background-color: #1e1e1e;
  }
  
  .consumption_list .consumption li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8.8rem;
    padding: 2rem 1.6rem;
    background-color: #fafafa;
    border-radius: 1rem;
    box-sizing: border-box;
  }
  .consumption_list .consumption li > div {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    height: 4.8rem;
  }
  .consumption_list .consumption li img {
    display: block;
    width: 4.8rem;
    height: 4.8rem;
  }
  .consumption_list .consumption li .category {
    font-weight: 600;
    font-size: 1.4rem;
    color: #212121;
    line-height: 1;
  }
  .consumption_list .consumption li .category span {
    display: block;
    margin-top: 0.4rem;
    font-weight: normal;
    font-size: 1.2rem;
    color: #8d94a0;
  }
  .consumption_list .consumption li .price {
    display: block;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 600;
    color: #353d4a;
  }
  .consumption_list .consumption li .price .badge {
    position: absolute;
    display: inline-block;
    right: 1.6rem;
    top: 1.2rem;
    padding: 0 0.6rem;
    background-color: #efefef;
    border-radius: 0.85rem;
    color: #bebebe;
    font-size: 0.9rem;
    line-height: 1.7rem;
  }
  
  .recommand_list {
    display: none;
  }
  
  .border_accordion {
    border-bottom: none;
  }
  .border_accordion .fold-head {
    padding-top: 0;
    padding-bottom: 0;
  }
  .border_accordion .fold-head::after {
    display: none;
  }
  
  .btn_banner {
    margin-top: 1rem;
  }
  .btn_banner button {
    display: block;
    padding: 0;
    border: 0 none;
    background: none;
  }
  
  .inline.select-type-01 select {
    width: 12rem;
  }
  .inline.select-type-01 label {
    display: inline-block;
  }
  
  .icon-title.badge_red:after, .icon-title.badge_mint:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0.9rem;
    padding: 0 0.6rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1.7rem;
    border-radius: 0.85rem;
  }
  .icon-title.badge_red {
    padding-right: 3.8rem;
  }
  .icon-title.badge_red:after {
    content: "휴면";
    background-color: #e58583;
  }
  .icon-title.badge_mint {
    padding-right: 4.8rem;
  }
  .icon-title.badge_mint:after {
    content: "미청구";
    background-color: #75b99a;
  }
  
  .badge {
    padding: 0 0.6rem;
    margin-left: 0.5rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1.7rem;
    border-radius: 0.85rem;
  }
  .badge.badge_red {
    background-color: #e58583;
  }
  .badge.badge_mint {
    background-color: #75b99a;
  }
  
  .sticky-wrap.sticky_new main .tab-head.btn-type3 {
    gap: 2.5rem;
  }
  .sticky-wrap.sticky_new main .tab-head.btn-type3 .tab-btn {
    align-items: center;
    padding: 1rem 0;
    gap: 0.6rem;
  }
  .sticky-wrap.sticky_new main .tab-head.btn-type3 .tab-btn span {
    font-size: 1.4rem;
  }
  .sticky-wrap.sticky_new main .tab-panel {
    padding-bottom: 0;
  }
  
  .badge_wrap {
    position: relative;
    padding-right: 4.2rem;
    margin-right: 0.5rem;
  }
  .badge_wrap .badge {
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
  }
  
  .badge_wrap_position > .ellipsis {
    position: relative;
    padding-right: 4.4rem;
  }
  .badge_wrap_position > .ellipsis.badge_red::after, .badge_wrap_position > .ellipsis.badge_mint::after {
    display: inline-block;
    position: absolute;
    margin-left: 0.5rem;
    padding: 0 0.6rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1.7rem;
    border-radius: 0.85rem;
  }
  .badge_wrap_position > .ellipsis.badge_red::after {
    content: "휴면";
    background-color: #e58583;
  }
  .badge_wrap_position > .ellipsis.badge_mint::after {
    content: "미청구";
    background-color: #75b99a;
  }
  
  .text_loading > span:nth-child(2) {
    animation: loading01 1.4s 0s infinite;
  }
  .text_loading > span:nth-child(3) {
    animation: loading02 1.4s 0s infinite;
  }
  @keyframes loading01 {
    0% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes loading02 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  .fs-xl-2 {
    font-size: 2.2rem !important;
  }
  
  .fc-red-2 {
    color: #ff5353 !important;
  }
  
  .c-grey-l {
    background-color: #eaeaf8;
    color: #393a55;
  }
  .c-grey-l.label-solid {
    min-width: 4rem;
    padding: 0.3rem 0.8rem;
  }

  .c-yellow-2 {
    border: 0 none;
    padding: 0.3rem 0.8rem;
    background-color: #fff9a8;
    color: #373303;
  }

  .no-header .modal-body {
    height: calc(100vh - 5.6rem);
  }

  .account_detail {
    display: flex;
    justify-content: space-between;
    margin-top: 1.7rem;
    padding-left: 5rem;
  }
  .account_detail .left {
    padding-right: 0.5rem;
    overflow: hidden;
  }
  .account_detail .left span {
    display: block;
    font-size: 1.2rem;
    color: #888;
    line-height: 1.5rem;
    letter-spacing: -0.03rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .account_detail .right {
    display: flex;
    gap: 1.6rem;
    height: 3.1rem;
    align-items: center;
  }
  .account_detail .right .custom-label {
    min-width: 3.4rem;
    height: 2rem;
  }
  .account_detail .right .btn {
    width: 5.8rem;
    height: 3.1rem;
    font-weight: normal;
    font-size: 1rem;
    letter-spacing: 0;
  }
  .bullet-list.bullet-dot .kdic {
  padding-left: 4.9rem;
  background: url("../new_images/views/loan/img_kdic.png") no-repeat left 1rem top;
  background-size: 3.3rem 2.4rem;
  line-height: 2.4rem;
}