@charset "utf-8";

html { font-size: 62.5%; }
html, body { width: 100%; height: 100%; }
body { overflow-y: scroll; font-family: 'SpoqaHanSansNeo', 'Malgun Gothic', 'AppleGothicNeoSD', 'Apple SD 산돌고딕 Neo', 'Droid sans', 'dotum', '돋움', sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; color: #333; font-size: 1.4rem; letter-spacing: -0.05em; line-height: 1.9rem; font-weight: 400; }
body:before { content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 0; }
body, div, h1, h2, h3, h4, h5, h6, form, fieldset, p, button, iframe, tr, tbody, thead, table, th, td, b, span, strong, dl, dt, dd, ul, ol, li, label { margin: 0; padding: 0; box-sizing: border-box; word-wrap: break-word; }
article, aside, details, figcaption, figure, footer, header, main, hgroup, nav, section, summary { display: block; margin: 0; padding: 0; box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, dt { font-weight: normal; }
img, fieldset, iframe, button { border: 0 none; }
dl, dt, dd, ul, ol, li { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { border-collapse: collapse; font-weight: normal; }
legend, caption { width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -9999px; }
legend { display: none; }
abbr { text-decoration: none; }
hr { border: 0; border-top: 1px solid #ccc; margin: 4.0rem 0; }
em, u, cite, i { font-style: normal; }
strong, b { font-weight: normal; }
label { cursor: pointer; }
button { outline: 0; border: 0; background: transparent; box-sizing: border-box; color: #333; font-family: 'SpoqaHanSansNeo', sans-serif; text-decoration: none; letter-spacing: 0; cursor: pointer; }
input, textarea, select { box-sizing: border-box; font-family: 'SpoqaHanSansNeo', sans-serif; }
object, embed { position: absolute; }
img { display: block; max-width: 100%; }

.po-rel { position: relative; }
.f-left { float: left;}
.f-right { float: right;}
.clfix { *zoom: 1; }
.clfix:before, .clfix:after { content: ""; display: table; line-height: 0; }
.clfix:after { clear: both; }
.need-design { width: 100%; height: 200px; padding-top: 9rem; background: var(--point-color-08); font-size: 2rem; font-weight: 700; text-align: center; }

.scroll-no { overflow: hidden; }
.scroll-no .base-wrap { position: fixed; }
.none { padding: 1.9rem 0 1.7rem !important; font-size: 1.4rem !important; color: #222 !important; font-weight: 300 !important; text-align: center !important; line-height: 1; border-bottom: 1px solid #e9e9e9; }
.none:before, .none:after { display: none !important; }
.hide { position: absolute !important; width: 0 !important; height: 0 !important; z-index: -1 !important; color: transparent !important; line-height: 0 !important; padding: 0 !important; top: -999999px; left: -999999px; font-size: xx-small !important; }
.hidden { visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; }
.dp-none { display: none !important; }
.dp-block { display: block !important; }

.bg-gray { background: #fafafa; }

a { outline: 0; outline-offset: 1px; box-sizing: border-box; text-decoration: none; }
a:link, a:visited, a:hover { color: #333; }
a, a:link, a:visited { text-decoration: none; }

.va-t { vertical-align: top !important; }
.va-m { vertical-align: middle !important; }
.va-n { vertical-align: inherit !important}
.va-tb {vertical-align: text-bottom !important; }

/*s:COLOR & Font VAR*/
:root{
  --main-color-01 : #6dc6d6; /*home-bg*/
  --main-color-02 : #212266;/*primary*/
  --main-color-03 :#181949;/*active*/
  --main-color-04 : #b43a6b;/*secondary*/
  --main-color-05 : #00c8b4;/*월간키우고,키우GO톡*/
  --main-color-06 : #1199a6;/*연금포트폴리오 구독*/
  
  --point-color-01: #cc6a93;/*point*/
  --point-color-02: #e22d72;/*(arrow) 상승*/
  --point-color-03: #1c4fde;/*(arrow) 하락*/
  --point-color-04:	#c2c2c2;/*input border*/
  --point-color-05:	#666;/*input text*/
  --point-color-06:	#b7b7b7;/*placeholder*/
  --point-color-07:	#f5f5f5;/*disabled/read-only bg*/
  --point-color-08:	#eee;/*disabled/read-only border*/
  --point-color-09:	#fff1f1;/*error bg*/
  --point-color-10:	#bd527e;/*error description text*/

  --text-color-00: #111;/*타이틀/본문*/
  --text-color-01: #333;/*타이틀/본문*/
  --text-color-02: #666;/*서브1*/
  --text-color-03: #999;/*서브2*/
  --text-color-04: #212266;/*본문 강조*/
  --text-color-05: #2758df;/*(number) 하락*/
  --text-color-06: #e33779;/*(number) 상승*/
  --text-color-07: #eb6c9c;/*(종목) 주식*/
  --text-color-08: #fc8c9a;/*(종목) 채권*/
  --text-color-09: #ffba00;/*(종목) 대체*/

  --font-family-number: 'Inter', 'SpoqaHanSansNeo';/*number, 날짜*/
}
/*e:COLOR & Font VAR*/


/* Font */
.fc-gray { color: #666 !important; }
.fc-gray2 { color: #999 !important; }
.fc-gray3 { color: #333 !important; }
.fc-blue { color: #212266 !important; }
.fc-blue2 { color: #2758df !important; }
.fc-red { color: #e33779 !important; }
.fc-red2 { color: #eb6c9c !important; }
.fc-red3 { color: #fc8c9a !important; }
.fc-magenta { color: #b43a6b; }
.fc-yellow { color: #ffba00 !important; }
.roboto, .ft-inter { font-family: var(--font-family-number) !important; }
.fs10 { font-size: 1rem !important; }
.fs12 { font-size: 1.2rem !important; }
.fs13 { font-size: 1.3rem !important; }
.fs14 { font-size: 1.4rem !important; }
.fs15 { font-size: 1.5rem !important; }
.fs16 { font-size: 1.6rem !important; }
.fs17 { font-size: 1.7rem !important; }
.bold-s { font-weight: 500 !important; }
.bold { font-weight: 700 !important; }

/* Text */
.txt-c, .txt-c td, .txt-c th { text-align: center !important; }
.txt-l, .txt-l td, .txt-l > th { text-align: left !important; }
.txt-r, .txt-r td, .txt-r th { text-align: right !important; }

.ellp { position: relative; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
.ellipsis1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; }
.ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }

.txt-ess { display: inline-block; position: relative; top: .3rem; left: .2rem; margin-right: .2rem; color: #ff6200; font-size: 1.2rem; font-weight: 400; }
.txt-error { margin-top: .8rem; color: var(--point-color-10); font-size: 1.0rem; }
.txt-exp { margin-top: .5rem; color: var(--text-color-02); font-size: 1.2rem; }
.txt-small { margin-top: .2rem; color: var(--text-color-02); font-size: 1rem; }

.text-12 { color: var(--text-color-02); font-size: 1.2rem; }
.text-12-2 { color: var(--text-color-03); font-size: 1.2rem; }
.text-14 { color: var(--text-color-02);font-size: 1.4rem; }
.text-16 { color: var(--text-color-01); font-size: 1.6rem; line-height: 2.1rem; }
.text-17 { color: var(--text-color-01); font-size: 1.7rem; line-height: 2.8rem; }

.rate-increase { color: #ff0000; }
.rate-decrease { color: #0033ff; }

.rate-increase, .rate-decrease, .num, .date { font-family: var(--font-family-number); }

/* Title */
.wrap-tit { display: table; position: relative; width: 100%; padding: 3rem 0 4rem; text-align: center; }
.wrap-tit .tit-pg { color: var(--text-color-01); font-size: 1.8rem; font-weight: 500; letter-spacing: -0.1em; line-height: 2.5rem; }
.wrap-tit .stit { margin-top: 1rem; color: var(--text-color-03); font-size: 1.4rem; }
.tit-gnb { font-size: 1.7rem; letter-spacing: -0.05em; line-height: 1; font-weight: 500; }
.tit-gnb-sm { color: #fff; font-size: 1.4rem; letter-spacing: -0.05em; line-height: 1.2; }
.tit-gnb-sm.on { font-weight: 700; }

.tit-18 { font-size: 1.8rem; letter-spacing: -0.07em; line-height: 2.3rem; font-weight: 700; word-break: keep-all; }
.tit-16 { font-size: 1.6rem; letter-spacing: -0.07em; line-height: 2.1rem; font-weight: 500; }
.tit-15 { font-size: 1.5rem; letter-spacing: -0.07em; line-height: 2.0rem; font-weight: 500; }
.tit-14 { font-size: 1.4rem; letter-spacing: -0.07em; line-height: 2.0rem; font-weight: 700; }
.tit-cont { margin-bottom: 2rem; padding: 4rem 0 1rem; border-bottom: 1px solid var(--point-color-05); font-size: 1.4rem; color: var(--text-color-00); font-weight: 500; }

.head-title-area { display: flex; align-items: center; justify-content: space-between; }
.head-title-area .page-title { font-size: 2rem; color: var(--text-color-00); font-weight: 700; }
.head-title-area .page-title-md { font-size: 1.7rem; line-height: 2.8rem; color: var(--text-color-00); font-weight: 500; }
.head-title-area .page-title2 { margin-top: .5rem; font-size: 1.3rem; color: var(--text-color-02); }
.head-title-area .section-title { font-size: 1.7rem; color: var(--text-color-00); font-weight: 700; } 

.section-title-area { padding-bottom: 2rem; text-align: center; }
.section-title-area .section-title { font-size: 1.7rem; color: var(--text-color-01); font-weight: 700;}
.section-title-area .info-txt { margin-top: 1rem; font-size: 1.3rem; color: var(--text-color-02); }
.section-title-area.type2 .section-title { font-weight: 400; }
.section-title-area.type2 .info-txt { color: var(--text-color-03); }
.section-title-area.type3 .section-title {  font-size:1.4rem; color: var(--text-color-00); }
.section-title-area.type3 .info-txt,
.section-title-area.type4 .info-txt { margin-top: .8rem; color: #888; }
.section-title-area.type4 { padding-bottom: 1rem; text-align: left; }
.section-title-area.type4 .section-title { font-weight: 500; }


/* Width */
.w10 { width: 10%; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

/* Height */
.h23 { height: 23rem; }
.h32 { height: 32rem; }

/* Margin */
.mg-n { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mt-5 { margin-top: .5rem !important; }
.mt-8 { margin-top: .8rem !important; }
.mt1 { margin-top: 1rem !important; }
.mt1-5 { margin-top: 1.5rem !important; }
.mt2 { margin-top: 2rem !important; } 
.mt2-8 { margin-top: 2.8rem !important; }
.mt3 { margin-top: 3rem !important; } 
.mt4 { margin-top: 4rem !important; } 
.mt5 { margin-top: 5rem !important; } 
.mt6 { margin-top: 6rem !important; } 
.mt9 { margin-top: 9rem !important; } 
.mb-5 { margin-bottom: .5rem !important; }
.mb1 { margin-bottom: 1rem !important; }
.ml1 { margin-left: 1rem !important; }
.ml1-4 { margin-left: 1.4rem !important; }
.ml1-5 { margin-left: 1.5rem !important; }
.mr1 { margin-right: 1rem !important; }

/* Padding */
.pd-n { padding: 0 !important; }
.pd1-4 { padding: 1.4rem !important; }
.pt0 { padding-top: 0 !important; }
.pt1 { padding-top: 1rem !important; }
.pt3 { padding-top: 3rem !important; }
.pt5 { padding-top: 5rem !important; }
.pt8 { padding-top: 8rem !important; }
.pb0 { padding-bottom: 0 !important; }
.pb1 { padding-bottom: 1rem !important; }
.pb1-5 { padding-bottom: 1.5rem !important; }
.pb3 { padding-bottom: 3rem !important; }
.pl2 { padding-left: 2rem !important; }

/* Border */
.bd-n { border: 0 !important; }
.bdl-n { border-left: 0 !important; }
.bdr-n { border-right: 0 !important; }
.bdb-n { border-bottom: 0 !important; }
.bdt-n { border-top: 0 !important; }

.bdb-blue { border-bottom: 1px solid #212266; }

/* display */
.dp-flex-between { display: flex; justify-content: space-between; }
.flex-box .inner { display: flex; width: 100%; text-align: center; }
.flex-box.line-type .box { position: relative; padding: 1rem; border-left: 1px solid #f5f5f5; }
.flex-box.line-type .box:first-child { border-left: 0; }
.flex-box.col3 .box { width: 33.3%; }
.al-fl-start{ justify-content: flex-start; }
.al-items-c { align-items: center; }

.form-tit { display: flex; justify-content: space-between; margin-bottom: .8rem; color: var(--text-color-01); font-size: 1.2rem; font-weight: 500; }
.form-tit span { color: var(--text-color-02);font-size: 1rem; }
.form-tit-desc { margin-top: .8rem; color: var(--point-color-10); font-size: 1.4rem; }

/* input */
input:not([type=radio]):not([type=checkbox]) { -webkit-appearance: none; -webkit-border-radius: 0; }
input:not([type=radio]):not([type=checkbox]) { flex: 0 1 auto; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; width: 100%; height: 3.6rem; padding: 0 .8rem; background: none; color: var(--text-color-02);font-size: 1.4rem; line-height: 1; }
input:not([type=radio]):not([type=checkbox])::-webkit-input-placeholder { color: var(--point-color-06); font-size: 1.4rem; letter-spacing: -1px; }
input:not([type=radio]):not([type=checkbox]):-ms-input-placeholder { color: var(--point-color-06); font-size: 1.4rem; letter-spacing: -1px; }
input:not([type=radio]):not([type=checkbox])::placeholder { color: var(--point-color-06); font-size: 1.4rem; letter-spacing: -1px; }
input:not([type=radio]):not([type=checkbox]):-moz-read-only { color: var(--text-color-02);}
input:not([type=radio]):not([type=checkbox]):read-only { color: var(--text-color-02);}
input:not([type=radio]):not([type=checkbox]):disabled { color: var(--text-color-03); }
input:not([type=radio]):not([type=checkbox]):disabled::-webkit-input-placeholder { color: var(--point-color-08); }
input:not([type=radio]):not([type=checkbox]):disabled::-ms-input-placeholder { color: var(--point-color-08); }
input:not([type=radio]):not([type=checkbox]):disabled::placeholder { opacity: 1; color: var(--point-color-08); }
input:not([type=radio]):not([type=checkbox]):focus { outline: none; }
input.placeholder-c::-webkit-input-placeholder{ text-align: center; }
input.placeholder-c::-ms-input-placeholder{ text-align: center; }
input.placeholder-c::placeholder { padding-left: 30px; text-align: center; }

input[type = "text"]::-ms-clear { display: none!important; }
input[type = "search"]::-webkit-search-cancel-button { display: none !important; }
input[type = "number"]::-webkit-outer-spin-button,
input[type = "number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #bbb; letter-spacing: -0.07em; }

.input-area { display: flex; display: -webkit-flex; display: -ms-flexbox; align-items: center; -webkit-align-items: center; -ms-flex-align: center; 
  justify-content: center; -webkit-justify-content: center; -ms-flex-pack: center; flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; 
  justify-content: left; -webkit-justify-content: left; -ms-flex-pack: left; position: relative; }
.input-area input[type="text"], .input-area input[type="number"] { padding-right: 3rem; border: 1px solid var(--point-color-04); border-radius: 0.3rem; }
.input-area input[type="text"]:read-only, .input-area input[type="number"]:read-only { border: 1px solid var(--point-color-08); background: var(--point-color-07); }
.input-area input[type="text"]:disabled, .input-area input[type="number"]:disabled { border: 1px solid var(--point-color-08); background: #fff }
.input-area button span { overflow: hidden; position: absolute; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); width: 0; height: 0; margin: -1px; border: 0; padding: 0; }
.input-area button span th, .input-area button span td { width: 0 !important; height: 0 !important; overflow: hidden !important; line-height: 0 !important; font-size: 0 !important; padding: 0 !important; }
.input-area .btn-delete { display: none; position: absolute; right: 0; width: 2.4rem; height: 2.4rem; margin-right: .3rem; background: url(../images/icon_input_delete.png) no-repeat 100% 50%; background-size: 100% auto; }
.input-area .btn-calendar { position: absolute; right: 0; width: 1.6rem; height: 1.6rem; margin: 0 .8rem; background: url(../images/icon_calendar.png) no-repeat 100% 50%; background-size: 100% auto; }
.input-area input[type="text"].error, .input-area input[type="number"].error { background: var(--point-color-09); }
.input-area input[type="text"].line, .input-area input[type="number"].line { border-radius: 0; border-width: 0 0 1px 0; }
.input-area .input-price { /*color: #333 !important; font-family: 'Roboto'; font-size: 1.8rem !important; font-weight: 700; text-align: right;*/ }
.input-area .input-price:disabled { /*color: #ddd !important;*/ }
.input-area .readonly-on { border: 1px solid var(--point-color-04); background: #fff !important; }

/* Radio Check Box */
.input-check { display: inline-block; position: relative; vertical-align: top; }
.input-check:not(:last-child) { margin-right: 1.7rem; }

.input-check input[type="radio"], .input-check input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; opacity: 0; }
.input-check input[type="radio"] + label, .input-check input[type="checkbox"] + label { display: inline-block; padding: 1px 0 1px 22px; color: var(--text-color-01); line-height: 1; vertical-align: top; }
.input-check input[type="radio"] + label:before, .input-check input[type="checkbox"] + label:before { content: ""; position: absolute; top: 0; left: 0; }
.input-check input[type="radio"].on, .input-check input[type="checkbox"].on { border: 1px solid #777; outline: 1px dotted #000; }
.input-check input[type="radio"] + label:before { width: 1.6rem; height: 1.6rem; background: #fff url(../images/icon_radio_off_normal.png) no-repeat 50% 50%; background-size: 100% auto; }
.input-check input[type="radio"]:checked + label:before { background: url(../images/icon_radio_on_normal.png) no-repeat 50% 50%; background-size: 100% auto; }
.input-check input[type="radio"]:disabled + label { color: var(--text-color-03); }
.input-check input[type="radio"]:disabled + label:before { background: url(../images/icon_radio_off_disable.png) no-repeat 50% 50%; background-size: 100% auto; }
.input-check input[type="radio"]:checked:disabled + label:before { background: url(../images/icon_radio_on_disable.png) no-repeat 50% 50%; background-size: 100% auto; }

.input-check input[type="checkbox"] + label { line-height: 1.6; }
.input-check input[type="checkbox"] + label:before { top: 3px; width: 1.6rem; height: 1.6rem; background: #fff url(../images/icon_check_off_nomal.png) no-repeat 50% 50%; background-size: 100% auto; }
.input-check input[type="checkbox"]:checked + label:before { background: #fff url(../images/icon_check_on_nomal.png) no-repeat 50% 50%; background-size: 100% auto; }
.input-check input[type="checkbox"]:disabled + label { color: var(--text-color-03); }
.input-check input[type="checkbox"]:disabled + label:before { background: #fff url(../images/icon_check_off_disable.png) no-repeat 50% 50%; background-size: 100% auto; }
.input-check input[type="checkbox"]:checked:disabled + label:before { background: #fff url(../images/icon_check_on_disable.png) no-repeat 50% 50%; background-size: 100% auto; }
.input-check.read-only:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: #fff; opacity: 0; }
.input-check + .select { margin-left: 20px; }

/* select */
select { display: inline-block; position: relative; vertical-align: middle; width: 100%; height: 3.6rem; padding: 0 .8rem; border-radius: 0.3rem; border: 1px solid var(--point-color-04); 
  background: #fff url(../images/icon_arrow_ash_normal.png) no-repeat calc(100% - .9rem) 50%; background-size: .9rem auto; color: var(--text-color-01); font-size: 1.4rem;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
select::-ms-expand { display: none; }
select optgroup, select option { height: 3.8rem; color: var(--text-color-02);font-size: 1.2rem; }
select[disabled = "disabled"] { border: 1px solid var(--point-color-08); background: var(--point-color-07) url(../images/icon_dropdown_disable.png) no-repeat 100% 50%; color: var(--text-color-03); cursor: not-allowed; }
select option.active { color: var(--text-color-01); font-weight: 700; }
select.type { width: auto; padding-right: 2rem; border: none; background: url(../images/icon_arrow_grey_normal.png) no-repeat 100% 50%; background-size: 1rem auto; color: #28295f; font-size: 1.2rem; font-weight: 500; }

/* textarea */
textarea { -webkit-appearance: none; -webkit-border-radius: 0; width: 100%; height: 15rem; padding: .8rem 1rem; font-size: 1.5rem; color: #222; border: 1px solid #ccc; border-radius: 0.3rem; }
textarea.inp-base { font-size: 1.6rem; font-family: 'SpoqaHanSansNeo', sans-serif; line-height: 2.0rem; padding: .7rem 0 0; overflow-y: hidden; }
textarea.w-mode { height: 15rem !important; overflow-y: scroll}

/* Button */
.btn { display: inline-block; vertical-align: middle; word-break: keep-all; cursor: pointer; }
.btn span { display: inline-block; /*line-height: 1;*/ }
.btn.on { font-weight: 700; }
.btn:disabled { cursor: default; }

/* Bottom Button */
.btn-wraps { position: relative; display: flex; justify-content: space-between; width: 100%; }
.btn-wraps button { flex: 1 50%; }
.btn-wraps button:first-child { margin-left: 0; }
.btn-wraps button span { display: inline-block; }
.btn-wraps.type button { flex: none; }
.btn-wraps.type button:first-child { width: 38%; }
.btn-wraps.type button:last-child { width: calc( 100% - 38% ); }
.btn.primary { width: 100%; min-width: 0; height: 4.6rem; padding-bottom: .5rem; background: var(--text-color-04); color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 4.6rem; text-align: center; }
.btn.primary:active { background-color: var(--main-color-03); }
.btn.primary:disabled { border: none; background-color: #8b8ca4 !important; color:#696a8b; }
.btn.primary.btn-gray { border: none; background: var(--point-color-08); color: var(--text-color-01); }
.btn.primary.btn-gray:active { border: none; background-color: var(--text-color-03); color: var(--text-color-01); }
.btn.primary.btn-gray:disabled { border: none; background-color: #ddd !important; color:var(--text-color-03); }

.btn-wraps-pd { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 0 1.6rem 2.4rem; }
.btn-wraps-pd button:first-child { width: 38%; margin-right: .8rem; }
.btn-wraps-pd button:last-child { width: calc( 62% - .8rem); }
.btn-wraps-pd button:first-child:last-child { width: 100%; margin-right: 0; }
.btn.btn-gradient-gray, 
.btn.btn-gradient-cyan { height: 4.8rem; line-height: 4.8rem; color: #fff; border-radius: .6rem; font-size: 1.5rem; font-weight: 500; }
.btn.btn-gradient-gray { background-color: #bbb; background: linear-gradient(106deg, #bbb 0%, #afafaf 100%); box-shadow: 0 .6rem 1.2rem rgba(170,170,170,.4); }
.btn.btn-gradient-cyan { background-color: var(--main-color-06); background: linear-gradient(98deg, var(--main-color-06) 0%, #097FBD 100%); box-shadow: 0 .6rem 1.2rem rgba(9,127,189,.4); }
.btn.btn-gradient-gray.md, 
.btn.btn-gradient-cyan.md { height: 4rem; line-height: 4rem; }
.btn.btn-gradient-gray:disabled,
.btn.btn-gradient-cyan:disabled { opacity: .5; }

.btn-wrap-sticky { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10; }
.btn-wrap-sticky:after { content: ''; display: block; clear: both; }

/* Secondary Button */
.btn-wrap { position: relative; display: flex; justify-content: space-between; width: 100%; }
.btn-wrap button { margin-left: .6rem; flex: 1 50%; }
.btn-wrap button:first-child { margin-left: 0; }
.btn-wrap.st-icon .f-left { color: var(--text-color-01); font-size: 1.4rem; font-weight: 500; }
.btn-wrap.st-icon .f-right { color: var(--main-color-03); font-size: 1.2rem; }

.btn.secondary { min-width: 0; min-height: 3.6rem; padding: 0 .8rem; border: 1px solid var(--point-color-04); border-radius: 0.3rem; background-color: #fff; color: var(--text-color-02);font-size: 1.2rem; }
.btn.secondary.disabled, .btn.secondary:disabled { border: 1px solid #ededed; color: #ddd; }
.btn.secondary.disabled.on { border: 1px solid #ededed; background-color: #fafafa; color: #a1a3c9; font-weight: normal; }
.btn.secondary.btn-red { border: 1px solid var(--point-color-02); color: var(--point-color-02); }
.btn.secondary.btn-red.disabled, .btn.btn-red:disabled { border: 1px solid #ededed; color: #ffdbe8; }
.btn.secondary.btn-blue { border: 1px solid var(--point-color-03); color: var(--point-color-03);}
.btn.secondary.btn-blue.disabled, .btn.btn-blue:disabled { border: 1px solid #ededed; color: #d7e1fc; }
.btn.secondary.btn-navy { border: 1px solid var(--main-color-03); color: var(--main-color-03);}
.btn.secondary.btn-navy.on { background-color: var(--main-color-03); color: #fff;}
.btn.secondary.btn-navy.disabled, .btn.btn-navy:disabled { border: 1px solid #ededed; color: #a1a3c9; }
.btn.secondary.btn-navy2 { border: 1px solid var(--text-color-03); background-color: #fafafa; color: #888; }
.btn.secondary.btn-navy2.on { border: 1px solid #28295f; background-color: #fff; color: var(--main-color-03); }
.btn.secondary.btn-navy2.disabled, .btn.btn-navy2:disabled { border: 1px solid #ededed; color: #a1a3c9; }
.btn.secondary.btn-navy3 { border: 1px solid #28295f; background-color: #fff; color: var(--main-color-03); font-size: 1.4rem; font-weight: 700; }
.btn.secondary.btn-wine { border: 1px solid var(--main-color-04); color: var(--main-color-04); }
.btn.secondary.btn-wine.on { background-color: var(--main-color-04); color: #fff; } 
.btn.secondary.btn-wine.disabled, .btn.secondary.btn-wine:disabled { border: 1px solid #ededed; color: #e4a3be; }
.btn.secondary.btn-pink.on { border: 1px solid var(--main-color-04); color: var(--main-color-04); }
.btn.secondary.btn-pink { border: 1px solid #eedfe5; color: #e4a3be; }
.btn.secondary.more { width: auto; border: none; background: transparent; }

.btn .icon { display: inline-block; width: 1.6rem; height: 1.6rem; margin-right: .6rem; vertical-align: text-bottom; }
.btn .icon.right { float: right; }
.btn .icon.close { background: url(../images/icon_close.png) no-repeat 0 0; background-size: 100% auto;}
.btn .icon.dropdown { width: .6rem; height: .6rem; transform: translateY(100%); background: #fff url(../images/icon_dropdown_normal.png) no-repeat 100% 80%; background-size: .6rem .6rem; }
.btn .icon.arrow { width: 1rem; height: .6rem; margin: 1.4rem .2rem 0 .4rem; vertical-align: middle; background: url(../images/icon_arrow_ash_normal.png) no-repeat 50% 50%; background-size: 100% auto; }
.btn.open .icon.arrow { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); }
.btn .icon.arrow-right { width: .53rem; height: .86rem; margin-top:-.2rem; margin-left: .6rem; background: url(../images/icon_arrow_right.png) no-repeat 0 0; background-size: 100% auto; vertical-align: middle; }
.btn .icon.arrow-right2 { width: .6rem; height: 1.2rem; margin-top: 3px; margin-right: 0; background: url(../images/icon_flick_02.png) no-repeat 0 0; background-size: 100% auto; }
.btn .icon.arrow-wh { position:relative; width: 2rem; height: .2rem; margin-left: 1rem; background-color: #fff; vertical-align: middle; }
.btn .icon.arrow-wh::after { content: ''; position: absolute; right: 0; bottom: 0; display: inline-block; width: 1rem; height: .2rem; transform: rotate(45deg); transform-origin: 100%; background-color: #fff; }
.btn .icon.icon-star { display: inline-block; width: 1.5rem; height: 1.5rem; margin: -.1rem 0 0 .5rem; vertical-align: middle; background: url(../images/pension/icon-favorites.png) no-repeat 0 0; background-size: 100% auto; }

.btn-icon { display: inline-block; width: 3.6rem; height: 3.6rem; border: 1px solid var(--point-color-04); border-radius: 0.3rem; background-color: #fff; vertical-align: middle; }
.btn-icon:before { content: ""; display: inline-block; width: 2rem; height: 2rem; vertical-align: top; }
.btn-icon.bdr-wine { border: 1px solid var(--main-color-04); }
.btn-icon.bg-navy { background-color: var(--main-color-03); }
.btn-icon.close:before { background: url(../images/icon_close.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.refresh:before { background: url(../images/icon_inquiry_normal.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.refresh.disabled:before { background: url(../images/icon_inquiry_disable.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.chart:before { background: url(../images/icon_chart_normal.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.chart.on:before { background: url(../images/icon_chart_pressed.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.chart.disabled:before { background: url(../images/icon_chart_off_disable.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.filter:before { background: url(../images/icon_filter_normal.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.filter.on:before { background: url(../images/icon_filter_pressed.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.filter.disabled:before { background: url(../images/icon_filter_disable.png) no-repeat 0 0; background-size: 100% auto; }
.btn-icon.ellp:before { background: url(../images/icon_ellp.png) no-repeat 0 0; background-size: 100% auto; vertical-align: -22px; }
.btn-icon.search:before { background: url(../images/icon_search_grey_normal.png) no-repeat 0 0; background-size: 100% auto; vertical-align: -7px; }
.btn.more { width: 100%; height: 4.3rem; font-size: 1.2rem; text-align: left; line-height: 4.3rem; }
.btn.more .icon { margin-top: 2rem; }

/* Button ETC */
.paging-more { margin-top: 3rem; text-align: center; }
.icon-outlink::after { content:''; display: inline-block; width: 2.8rem; height: 2.8rem; margin-top:-.5rem; background: url(../images/icon_link_mobile.png) no-repeat 0 0; background-size: contain; vertical-align: middle; }
.btn.icon-arrow::after { display: inline-block; width: 2rem; height: 2rem; margin: -.2rem 0 0 .5rem; content: ''; vertical-align: middle; background: url(../images/icon_arrow20_right_white.png) no-repeat 0 0; background-size: 100% auto; }
.btn.btn-cyan-r { display: inline-block; height: 4rem; border-radius: 2rem; padding:0 3.6rem;  line-height: 4rem; border: 0; background-color: var(--main-color-05); color: #fff; box-shadow: 0px .3rem 1.2rem rgba(54, 172, 193, .4); text-align: center; font-size: 1.4rem; font-weight: 500; }
.btn.btn-bk-r { min-width: 9.6rem; height: 3rem; padding: 0 1rem; border-radius: 3rem; color: #fff; font-size: 1.4rem; background:#000; }
.btn.btn-cyan { height: 6rem; padding: 0 1rem; border:0; line-height: 6rem; border-radius: .6rem; color: #fff; background-color: #00c8b4; box-shadow: 0 .4rem 1rem rgba(0,200,180,.4); font-size: 1.8rem; text-align: center; font-weight: 500; }
.btn.btn-faq { padding: .4rem 1.4rem .4rem 4.8rem; border: 2px solid var(--text-color-00); border-radius: 4rem; min-height: 4rem; color: var(--text-color-00); background: #fff url(../images/talk/icon-m-faq.png) no-repeat 1.4rem 50%; background-size: 2.6rem auto; }
.btn.btn-faq strong, .btn.btn-faq span { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.btn.btn-faq span { margin-top: .2rem; font-size: 1rem; }
.btn.btn-line-r { height: 3rem; line-height: 2.8rem; padding: 0 1.2rem; border: 1px solid #eee; border-radius: 4rem; font-size: 1.2rem; color: var(--text-color-02); }

/* popup 버튼 */
.modal-footer { position: relative; display: flex; justify-content: space-between; width: 100%; }
.modal-footer button { flex: 1 50%; }
.modal-footer button:first-child { margin-left: 0; }
.modal-footer button span { display: inline-block; }
.modal-footer.type button { flex: none; }
.modal-footer.type button:first-child { width: 38%; }
.modal-footer.type button:last-child { width: calc( 100% - 38% ); }

.btn.pop.primary { min-width: 0; height: 4.6rem; padding: 0 .5rem; background: var(--text-color-04); color: #fff; font-size: 1.6rem; font-weight: 700; text-align: center; line-height: 1; }
.btn.pop.primary:active { background-color: var(--main-color-03); }
.btn.pop.primary:disabled { border: none; background-color: #8b8ca4 !important; color:#696a8b; }
.btn.pop.primary:first-child { border-bottom-left-radius: .5rem; }
.btn.pop.primary:last-child { border-bottom-right-radius: .5rem; }
.btn.pop.primary.btn-gray { border: none; background: var(--point-color-08); color: var(--text-color-01); }
.btn.pop.primary.btn-gray:active { border: none; background-color: #ddd; color: var(--text-color-01); }
.btn.pop.primary.btn-gray:disabled { border: none; background-color: #ddd !important; color:var(--text-color-03); }

.modal-footer.pd { padding: 0 1.6rem; justify-content: center; }
.modal-footer.pd .btn:first-child { margin-right: .8rem; }
.modal-footer.pd .btn:first-child:last-child { flex: 0 auto; min-width: 12.8rem; margin: 0; }
.modal-footer.pd .btn.pop { width: auto; height: 4rem; line-height: 4rem; }

/* 슬라이드 형태 버튼 */
.btn-switch { display: inline-block; position: relative; }
.btn-switch > span { display: inline-block; position: relative; vertical-align: top; font-size: 1.4rem; line-height: 1.8rem; text-align: left; }
.btn-switch .icon-checked { display: inline-block; overflow: hidden; position: relative; width: 4rem; height: 2rem; margin-left: .6rem; background: #fff url(../images/btn_switch_off_normal.png) no-repeat 50% 50%; background-size: 100% auto; vertical-align: top; transition: background .2s ease; }
.btn-switch.checked .icon-checked { background: url(../images/btn_switch_on_normal.png) no-repeat 50% 50%; background-size: 100% auto; transition: background .2s ease; }
.btn-switch:disabled .icon-checked { background: url(../images/btn_switch_off_disable.png) no-repeat 50% 50%; background-size: 100% auto; transition: background .2s ease; }
.btn-switch.checked:disabled .icon-checked { background: url(../images/btn_switch_on_disable.png) no-repeat 50% 50%; background-size: 100% auto; transition: background .2s ease; }
.btn-switch + .btn-switch { margin: 0 0 0 10px; }

/* btn check form */
.btn-form-group { position: relative; display: flex; justify-content: space-between; width: 100%;}
.btn-form-group .btn-check { flex: 1 30%; }
.btn-form-group .btn-check input[type="radio"] { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; opacity: 0; }
.btn-form-group .btn-check input[type="radio"] + label { display: block; height: 3.6rem; border-width: 1px 0 1px 0; border-style: solid; border-color: var(--point-color-04); color: var(--text-color-02);font-size: 1.2rem; text-align: center; line-height: 3.4rem; }
.btn-form-group .btn-check:first-child input[type="radio"] + label { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; border-left-width: 1px; }
.btn-form-group .btn-check:last-child input[type="radio"] + label { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; border-right-width: 1px; }
.btn-form-group .btn-check input[type="radio"]:disabled + label { color: #ddd; }
.btn-form-group .btn-check input[type="radio"]:checked:disabled + label { color: #e4e4f5; }
.btn-form-group .btn-check.on input[type="radio"] + label { border: 1px solid var(--main-color-03); color: var(--main-color-03); font-weight: 700; }
.btn-form-group.type .btn-check input[type="radio"] + label { border-color: var(--text-color-03); background-color: #fafafa; color: #888; }
.btn-form-group.type .btn-check.on input[type="radio"] + label { border: 1px solid #28295f; background-color: #fff; color: var(--main-color-03); font-weight: 700; }

.btn-form-group.indi { position: relative; display: flex; justify-content: space-between; width: 100%;}
.btn-form-group.indi .btn-check { flex: 1 30%; }
.btn-form-group.indi .btn-check input[type="radio"] { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; opacity: 0; }
.btn-form-group.indi .btn-check input[type="radio"] + label { display: block; position: relative; height: 3.6rem; padding-left: .8rem; border-radius: 5px; border-width: 1px; border-style: solid; border-color: var(--point-color-04); color: var(--text-color-02);font-size: 1.2rem; text-align: left; line-height: 3.6rem; }
.btn-form-group.indi .btn-check.st01 input[type="radio"] + label:after { content: ""; display: inline-block; position: absolute; top: .8rem; right: .6rem; width: .4rem; height: 1.6rem; background: url(../images/togge_indicator_a_1_normal.png) no-repeat; background-size: 100% auto;}
.btn-form-group.indi .btn-check.st02 input[type="radio"] + label:after { content: ""; display: inline-block; position: absolute; top: .8rem; right: .6rem; width: .4rem; height: 1.6rem; background: url(../images/togge_indicator_b_1_normal.png) no-repeat; background-size: 100% auto;}
.btn-form-group.indi .btn-check input[type="radio"]:checked + label { border: 1px solid var(--main-color-03); color: var(--main-color-03); font-weight: 700; }

/* Tab 1Depth */
.tab-container { position: relative; }
.tab-container > .tab-list-wrap { position: absolute; width: 100%; height: 4rem; background-color: #fff; z-index: 1; }
.tab-container > .tab-list-wrap.fixed { position: fixed; width: 100%; height: 4rem; background-color: #fff; z-index: 1; }
.tab-container > .tab-list-wrap .tab-list-group { overflow: hidden; }
.tab-container > .tab-list-wrap .tab-list-group .tab-list { display: flex; display: -webkit-flex; display: -ms-flexbox; position: relative; z-index: 1; }
.tab-container > .tab-list-wrap .tab-list-group .tab-list li { flex: 1; -webkit-flex: 1; -ms-flex: 1; position: relative; height: 4rem; }
.tab-container > .tab-list-wrap .tab-list-group .tab-list li a { display: block; height: inherit; border-bottom: 1px solid var(--point-color-04); color: var(--text-color-03); font-size: 1.4rem; text-align: center; text-decoration: none; line-height: 3.8rem; letter-spacing: 0; }
.tab-container > .tab-list-wrap .tab-list-group .tab-list li.on a { border-bottom: 2px solid var(--text-color-04); background: #fff; color: var(--main-color-03); font-weight: 700; }
.tab-container .tab-panel { height: 100%; padding-top: 4rem; background-color: #fff; }
.tab-container .tab-panel .tab-content { display: none; }
.tab-container .tab-panel .tab-content.on { display: block; }
.tab-container > .tab-list-wrap.finance { position: fixed; width: 100%; margin-left: -1.4rem; background: #fff; z-index: 1;}
.tab-container > .tab-list-wrap .tab-list-group .tab-list li.tabsmn1 { flex-basis: 36%; }
.tab-container > .tab-list-wrap .tab-list-group .tab-list li.tabsmn2 { flex-basis: 36%; }
.tab-container > .tab-list-wrap .tab-list-group .tab-list li.tabsmn3 { flex-basis: 28%; }

/* Tab 2Depth */
.tab-container .inner-tab-list { display: flex; display: -webkit-flex; display: -ms-flexbox; position: relative; border-bottom: 1px solid #cdcdcd; z-index: 1; }
.tab-container .inner-tab-list li { flex: 1; -webkit-flex: 1; -ms-flex: 1; position: relative; height: 4rem; }
.tab-container .inner-tab-list li a { display: block; color: var(--text-color-03); font-size: 1.2rem; text-align: center; line-height: 3.8rem; text-decoration: none; }
.tab-container .inner-tab-list li.on a { border-bottom: 2px solid var(--text-color-04); background: #fff; color: var(--main-color-03); font-weight: 700; }
.tab-container .inner-tab-content { display: none; }
.tab-container .inner-tab-content.on { display: block; }
.tab-container .inner-tab-panel { margin-top: 40px; }

/* Tab 1Depth Type Cyan */
.tab-container.tab-type-cyan > .tab-list-wrap { height: auto; }
.tab-container.tab-type-cyan > .tab-list-wrap .tab-list-group,
.tab-container.tab-type-cyan > .tab-list-wrap .tab-list-group .tab-list li { height: 5rem; }
.tab-container.tab-type-cyan > .tab-list-wrap .tab-list-group .tab-list li a { border-bottom: 1px solid #ddd; line-height:5rem; color: var(--text-color-03); font-size: 1.6rem; }
.tab-container.tab-type-cyan > .tab-list-wrap .tab-list-group .tab-list li.on a { border-bottom: 3px solid var(--main-color-05); font-weight: 700; color: var(--text-color-01); }
.tab-container.tab-type-cyan > .tab-panel { padding-top: 8rem; }

/* Tab 2Depth Type Cyan */
.tab-container.type-inner-cyan > .tab-panel { padding-top: 0; }
.tab-container.type-inner-cyan .tab-list-wrap { position:relative; overflow: hidden; height: auto; padding-bottom: 2rem; }
.inner-contents:not(.full) .tab-container.type-inner-cyan .tab-list-wrap {width: calc(100% + 3.2rem); margin-left: -1.6rem; }
.tab-container.type-inner-cyan .tab-list-group { overflow: visible; padding: 0 1.6rem; }
.tab-container.type-inner-cyan .tab-list-group .tab-list{ display: block; text-align: center; line-height: 3; font-size: 0;}
.tab-container.type-inner-cyan .tab-list-group .tab-list li { flex: auto; display: inline-block; width: auto; height: auto; margin-right: .6rem; border: 0; }
.tab-container.type-inner-cyan .tab-list-group .tab-list li a { display: block; height: 3.6rem; padding:0 1.5rem; border-bottom: 0; border-radius: 3.6rem; line-height: 3.6rem; font-size:1.3rem; color: var(--text-color-03); background-color: #f5f5f5; align-items: center; font-weight: 500; white-space: nowrap; letter-spacing: -.26px; }
.tab-container.type-inner-cyan .tab-list-group .tab-list li:last-child { margin-right: 0; }
.tab-container.type-inner-cyan .tab-list-group .tab-list li.on a { border: 0; background-color: var(--main-color-05); color: #fff; font-weight: inherit; box-shadow: 0 4px 8px rgba(0,200,180,.4); }

.tab-type-box-01 { 
  margin: 2.4rem 0 0;
}
.tab-type-box-01.tab-container .tab-panel {
	padding-top: 6rem;
}
.tab-container.tab-type-box-01 > .tab-list-wrap .tab-list-group .tab-list li a {
  border-bottom: 0;
  color: #666;
  font-size: 1.3rem;
  font-weight: 400;
}
.tab-container.tab-type-box-01 > .tab-list-wrap .tab-list-group .tab-list li.on a {
  color: #fff;
  background: #212266;
  border-radius: .4rem;
  font-weight: 700;
}
.tab-container.tab-type-box-01 .tab-list-group {
  border: .1rem solid #999;
  border-radius: .4rem;
  height: 4.1rem;
  
}

.testbed-kind-swiper {
	border:.1rem solid  #ccc;
	padding: 1.8rem .8rem 1.6rem;
	border-radius: .4rem;
}

.testbed-kind-swiper li {
	display: flex;
	
	justify-content: space-between;
}
.testbed-kind-swiper li:first-child {
	margin-top: 0;
}
.testbed-kind-swiper li {
	margin-top: 1.1rem;
}
.testbed-kind-swiper li span {
	color: #666;
}
.testbed-kind-swiper li strong,
.testbed-kind-swiper li span {
	font-size: 1.2rem;
}


.testbed-kind-swiper li strong {
	font-weight: 700;
	color: #333;
}

.testbed-pagination  {
  height: .8rem; position: relative;
  text-align: center; line-height: 0;
  margin: 1rem 0 2rem;
}
.testbed-pagination span {
  width: .6rem; height: .6rem;
  background: #ddd;
}
.testbed-pagination span.swiper-pagination-bullet-active {
  background: #bd527e;
}
.testbed-data-wrap {
  width: 100%; height: 48rem;
  position: relative; overflow: hidden;
  z-index: 60;
}
.testbed-data-wrap .testbed-fixed {
    width: 44vw; 
    position: absolute;
    left: 0; top: 0;
    z-index: 60;
    padding-right: 10px;
    background: #fff;
    box-shadow: 1rem 0 2rem -.7rem rgba(0,0,0,0.3);

}
.testbed-fixed dl {
  width: 47vw;
}
.testbed-fixed dl:nth-child(2) {
  border-top: 1px solid #999;
}
.testbed-fixed dl dt {
  height: 3rem; line-height: 3rem;
  font-weight: 700;
  color: #222;
  font-size: 1.2rem;
  padding: 0 0 0 1rem;

}

.testbed-fixed dl dd {
  height: 3rem; line-height: 3rem;
  font-size: 1.2rem;
  color: #666;
  padding: 0 0 0 1rem;
}

.textbed-data {
  width:40vw; height: 100%;
  position: absolute;
  right: 0; top: 0;
  z-index: 50;


}
.data-list {
  
  background: #f5f7fd;
}


.data-list dl:nth-child(2) {
  border-top: 1px solid #999;
}
.data-list dl dt {
  height: 3rem; line-height: 3rem;
  font-weight: 700;
  color: #222;
  font-size: 1.2rem;
  padding: 0 0 0 1rem;

}
.data-list dl dd {
  height: 3rem; line-height: 3rem;
  font-size: 1.2rem;
  color: #666;
  padding: 0 0 0 1rem;
}
/* tab swiper */
.tab-container > .type-more { overflow: hidden; }
.tab-container > .type-more ul.swiper-wrapper { white-space: nowrap;}
.tab-container > .type-more .shadow-left,
.tab-container > .type-more .shadow-right { display: none; position: absolute; top: 0; bottom: -.5rem; width: 3.5rem; z-index: 10; pointer-events: none; background: transparent linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); }
.tab-container > .type-more .shadow-right { right: -.5rem; }
.tab-container > .type-more .shadow-left { left: -.5rem; transform: rotate(180deg); }

/* tab sub */
.tab-type-bk.tab-container > .tab-list-wrap,
.tab-type-bk.tab-container > .tab-list-wrap .tab-list-group .tab-list li { height: 4.6rem; }
.tab-type-bk.tab-container .tab-panel { padding-top: 4.6rem; }
.tab-type-bk.tab-container > .tab-list-wrap .tab-list-group .tab-list li { flex: auto; border-bottom: 1px solid #eee; text-align: center; }
.tab-type-bk.tab-container > .tab-list-wrap .tab-list-group .tab-list li a { display: inline-block; color: #c3c3c3; border-color: transparent; line-height: 4.6rem; font-size: 1.3rem; transition: all .1s; }
.tab-type-bk.tab-container > .tab-list-wrap .tab-list-group .tab-list li.on a { border-color: var(--text-color-01); color: var(--text-color-01); font-weight: 500; }

.tab-type-bk2.tab-container > .tab-list-wrap .tab-list-group .tab-list li a { color: #888; border-color: transparent; line-height: 4rem; transition: all .1s; }
.tab-type-bk2.tab-container > .tab-list-wrap .tab-list-group .tab-list li.on a { border-color: var(--text-color-01); color: var(--text-color-00); font-weight: 400; }
.tab-type-bk2.tab-container > .tab-list-wrap .tab-list-group .tab-list li { padding: 0 1rem; border-bottom: 0; }
.tab-type-bk2.tab-container > .tab-list-wrap .tab-list-group .tab-list li:first-child { padding-left: 1.6rem; }
.tab-type-bk2.tab-container > .tab-list-wrap .tab-list-group .tab-list li:last-child { padding-right: 1.6rem; }

/* list */
.dot-list { margin: 1rem 0 1rem .6rem; }
.dot-list > li { position: relative; margin-top: .5rem; padding-left: 7px; color: var(--text-color-01); font-size: 1.2rem; letter-spacing: -.2px; }
.dot-list > li:before { content: ''; display: inline-block; position: absolute; left: 0; top: 8px; width: 2px; height: 2px; margin-top: -1px; border-radius: 3px; background-color: var(--text-color-04); }
.dot-list > li .color-red { color: var(--main-color-04); }
.dot-list.fc-gray > li { color: var(--text-color-02);}
.dot-list.fc-gray2 > li { padding-left: 1rem; color: var(--text-color-03); }
.dot-list.fc-gray2 > li::before { background-color: var(--text-color-03); width: .4rem; height: .4rem; }
.dot-list.fs14 li { font-size: 1.4rem; }
.dot-list.fs14 li ~ li { margin-top: 1.5rem; }
.dot-list.fs14 li .dash-list > li { color: var(--text-color-02);}
.dot-list.fs10 li { color: var(--text-color-03); font-size: 1rem; }
.dot-list.fs10 > li:before { content: ''; display: inline-block; position: absolute; left: 0; top: 8px; width: 2px; height: 2px; margin-top: -1px; border-radius: 50%; background-color: var(--text-color-03); }

.dash-list { margin-left: .4rem; }
.dash-list > li { position: relative; padding-left: 10px; color: var(--text-color-03); font-size: 1.2rem; letter-spacing: -.2px; }
.dash-list > li:before { content: '-'; display: inline-block; position: absolute; left: 0; top: -1px; width: 4px; height: 4px; }
.dash-list > li .color-red { color: var(--point-color-01); }

.star-list > li { position: relative; padding-left: 9px; color: var(--text-color-02);font-size: 1.2rem; letter-spacing: -.2px; }
.star-list > li:before { content: '*'; display: inline-block; position: absolute; left: 0; top: 1px; }

.info-list { margin-left: .4rem; }
.info-list > li { position: relative; padding-left: 15px; color: var(--text-color-03); font-size: 1.2rem; letter-spacing: -.2px; }
.info-list > li:first-child { margin-top: 1.6rem; }
.info-list > li:before { content: ''; display: inline-block; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: url(../images/icon_info_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.info-list > li.color-red { color: var(--point-color-01); }
.info-list > li.color-red:before { background: url(../images/icon_info_02.png) no-repeat 50% 50%; background-size: 100% auto; }

.tip-group { margin: 2rem 0 1.4rem; }
p.tip-text { position: relative; line-height: 2rem; padding-left: 3.5rem; font-size: 1rem; color: #777; }
p.tip-text + p { margin-top: .2rem; }
p.tip-text .ic { position: absolute; top: .1rem; left: 0; display: block; padding: 0 .5rem; height: auto; line-height: 1.8rem; border-radius: .3rem; font-size: .9rem; letter-spacing: 0; color: #fff; background-color: #ddd; }
p.tip-text .ic::after { content: ''; position: absolute; top: 50%; right: -.2rem; display: block; width: .5rem; height: .5rem; margin-top:-.25rem; transform: rotate(45deg); background-color: #ddd; }

.form-group { display: flex; flex-wrap: nowrap; }
.form-group .btn { flex: 0 0 13rem; height: 3.6rem; border-width: 1px; border-radius: .3rem 0 0 .3rem; color: var(--text-color-01); font-size: 1.4rem; font-weight: 500; }
.form-group .btn .icon.dropdown { margin-top: 0.2rem; }
.form-group .input-area { flex-grow: 1; }
.form-group .input-area input:first-child { border-width: 1px 1px 1px 0; border-radius: 0 .3rem .3rem 0; }
.form-group.type .input-area { flex: 1; }
.form-group.type .input-area input:first-child { border-width: 1px 0 1px 1px; border-radius: .3rem 0 0 .3rem; }
.form-group.type .btn { flex: 0 0 6rem; height: 3.6rem; border-width: 1px; border-radius: 0 .3rem .3rem 0; background-color: #fafafa; color: var(--text-color-02);font-size: 1.2rem; line-height: 3.4rem; text-align: center; }
.form-group.type select { flex: 1; }
.form-group.type select { border-width: 1px 0 1px 1px; border-radius: .3rem 0 0 .3rem; }
.form-group.type .btn-icon.ellp { flex: 0 0 6rem; height: 3.6rem; border-width: 1px; border-radius: 0 .3rem .3rem 0; background-color: #fafafa; }
.form-group.type .btn-icon.search { flex: 0 0 3.6rem; height: 3.6rem; border-width: 1px; border-radius: 0 .3rem .3rem 0; }
.form-group .btn.large { flex: 0 0 100%; }

.grade-flag { display: inline-block; padding: .3rem .5rem .2rem; border: 1px solid #36acc1; border-radius: 1rem; color: #36acc1; font-size: .8rem; font-weight: 500; line-height: 1; }
.grade-flag.red { border: 1px solid #eb636f; color: #eb636f; }
.grade-flag.purple { border: 1px solid #696a8b; color: #696a8b; padding: .2rem .5rem; }
.grade-flag.purple2 { border: 1px solid #9583c5; color: #9583c5; }
.grade-flag.orange { border: 1px solid #f39262; color: #f39262; }

/*금융투자상품 위험등급 (펀드_6가지)*/
.grade-flag.risk1 { border: 1px solid #e54c2b; color: #e54c2b; } /* 매우높은위험*/
.grade-flag.risk2 { border: 1px solid #e54c2b; color: #e54c2b; } /* 높은위험 */
.grade-flag.risk3 { border: 1px solid #ff6e05; color: #ff8433; } /* 다소높은위험 */
.grade-flag.risk4 { border: 1px solid #f39262; color: #ffc500; } /* 보통위험 */
.grade-flag.risk5 { border: 1px solid #f39262; color: #ffc500; } /* 낮은위험 */ 
.grade-flag.risk6 { border: 1px solid #6dc98d; color: #a4ce50; } /* 매우낮은위험 */

/*금융투자상품 위험등급 (일반_5가지)*/
.grade-flag.type1 {border: 1px solid #e54c2b; color: #e54c2b; } /* 초고위험*/ 
.grade-flag.type2 {border: 1px solid #e54c2b; color: #e54c2b; } /* 고위험 */  
.grade-flag.type3 {border: 1px solid #ff6e05; color: #ffc500; } /* 중위험 */
.grade-flag.type4 {border: 1px solid #f39262; color: #ffc500; } /* 저위험 */  
.grade-flag.type5 {border: 1px solid #f39262; color: #a4ce50; } /* 초저위험 */  

.badge-event { display: inline-block; width: 6.4rem; height: 2.4rem; border-radius: 2rem; line-height: 2.2rem; text-align: center; font-weight: 700; font-size: 1.2rem; box-sizing: border-box; vertical-align: middle; }
.badge-event.ing { border: 1px solid var(--text-color-01); color: var(--text-color-01); }
.badge-event.done { border: 1px solid #eee; color: #aaa; background-color: #eee; }

.rate-flag { display:inline-block; min-width: 6.3rem; height: 2rem; padding: 0 .7rem; line-height: 2rem; color: #fff; border-radius: 2rem; font-size: 1.1rem; font-family: var(--font-family-number); }
.rate-flag::before { content: ''; display: inline-block; width: 0; height: 0; margin-right: .4rem; margin-top: -.2rem; border-style: solid; border-width: 0 .3rem .4rem .3rem; border-color: transparent transparent #fff transparent; vertical-align: middle; }
.rate-flag.increase { background-color: #dc0d00; }
.rate-flag.decrease { background-color: #0800db; }
.rate-flag.decrease:before { border-width: .4rem .3rem 0 .3rem; border-color: #fff transparent transparent transparent; }

.ptf-flag { display: inline-block; min-width: 4.2rem; height: 2.4rem; padding: 0 .5rem; line-height: 2.4rem; color: #fff; border-radius: 2rem; font-size: 1.1rem; font-weight: 400; text-align: center; background-color: var(--main-color-06); }
.ptf-flag.type2 { background-color: #ffd743; }
.ptf-flag.type3 { background-color: #5ed6ca; }
.ptf-flag.type4 { background-color: #c2c2c2; }
.ptf-flag.type5 { background-color: #e12600; }
.ptf-flag.type6 { background-color: #0043e1; }

.tendency-flag { display: inline-block; height: 2rem; margin: -.2rem 0 0 .4rem; padding: 0 .8rem; border-width: 1px; border-style: solid; line-height: 1.8rem; border-radius: 2rem; font-size: 1rem; font-weight: 700; text-align: center; vertical-align: middle; }
.tendency-flag.type1 { border-color: #d60000; color: #d60000; }
.tendency-flag.type2 { border-color: #ff873e; color: #ff873e; }
.tendency-flag.type3 { border-color: #63c7aa; color: #63c7aa; }
.tendency-flag.type4 { border-color: #4d7aff; color: #4d7aff; }
.tendency-flag.type5 { border-color: #50951c; color: #50951c; }


/* Table Detail */
.table-detail { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.table-detail table { width: 100%; }
.table-detail table caption { display: none; overflow: hidden; position: absolute; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); width: 0; height: 0; margin: -1px; border: 0; padding: 0; }
.table-detail table tbody th { padding: .3rem .8rem; background: var(--point-color-07); color: var(--text-color-02);font-size: 1.2rem; text-align: left; line-height: 1.2; }
.table-detail table tbody th .sm { display: block; font-size: 1rem; }
.table-detail table tbody td { padding: 1rem; border-bottom: 1px solid var(--point-color-08); background-color: #fff; color: var(--text-color-01); font-size: 1.4rem; vertical-align: middle; word-break: break-all; }
.table-detail table tbody tr:last-child td { border-bottom: none; }
.table-detail table tbody td.rate { color: var(--main-color-04); font-size: 1.2rem; }
.table-detail.right table tbody td { text-align: right; font-size: 1.2rem; }

/* Table List */
.table-list.line { border-top: 1px solid var(--point-color-08); border-bottom: 1px solid var(--point-color-08); }
.table-list table { width: 100%; }
.table-list table caption { display: none; overflow: hidden; position: absolute; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); width: 0; height: 0; margin: -1px; border: 0; padding: 0; }
.table-list table thead th { padding: .6rem 0; border-bottom: 1px solid var(--point-color-08); background-color: #fafafa; color: var(--text-color-02);font-size: 1.2rem; }
.table-list table tbody td { /*padding: .5rem .7rem;*/ padding: 5px 7px; border-left: 1px solid var(--point-color-08); background-color: #fff; color: var(--text-color-01); font-size: 1.4rem; vertical-align: middle; word-break: break-all; }
.table-list table tbody td:first-child { border-left: 0; }
.table-list table tbody tr:nth-child(even) td { background: #fafafa; }
.table-list table tbody td.bdr { border-right: 1px solid var(--text-color-03); }
.table-list table tfoot tr td { padding: 1.3rem .8rem 3rem; border-top: 2px solid var(--text-color-01); color: var(--text-color-02);font-size: 1.2rem; text-align: right; }
.table-list table tfoot tr td .num { margin-left: .7rem; color: var(--text-color-01); font-family: var(--font-family-number); font-size: 1.4rem; font-weight: 700; }
.table-list.small table tbody td { color: var(--text-color-03); font-size: 1.2rem; }
.table-list.small table tfoot tr td { color: var(--text-color-03); }
.table-list.small table tfoot tr td .num { color: var(--text-color-03); }

.table-container.type-data { border-top: 1px solid #000; }
.table-container.type-data table { width: 100%; }
.table-container.type-data td,
.table-container.type-data th { padding: .9rem .5rem; border-bottom: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; font-size: 1.3rem; text-align: center; }
.table-container.type-data thead th { border-bottom: 0; font-size: 1.3rem; font-weight: 600;}
.table-container.type-data td:first-child,
.table-container.type-data th:first-child { border-left: 1px solid #e7e7e7; }
.table-container.type-data tbody tr:first-child td,
.table-container.type-data tbody tr:first-child th { border-top: 1px solid #e7e7e7; }
.table-container.type-data tfoot th, 
.table-container.type-data tfoot td { background-color: #fafafa; border-right: 0; font-size: 1.3rem; text-align: center; }
.table-container.type-data tfoot td:last-child { border-right: 1px solid #e7e7e7; }
.table-container.type-data .al-l { text-align: left; padding: .9rem; }

.table-container.type-detail { border-top: 1px solid #ddd; }
.table-container.type-detail table { width: 100%; }
.table-container.type-detail th, .table-container.type-detail td { padding: 1rem; border-right: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1.2rem; }
.table-container.type-detail th { background-color: #fafafa; color: var(--text-color-02); }
.table-container.type-detail td { color: var(--text-color-01); }
.table-container.type-detail tbody th, .table-container.type-detail tbody td { text-align: left; }
.table-container.type-detail th:last-child, .table-container.type-detail td:last-child { border-right: 0; }
.table-container.type-detail.al-c tbody td { text-align: center; padding-left: 1rem; }
.table-container.fixed-scroll { overflow: auto; }
.table-container.fixed-scroll table { table-layout: fixed; border-collapse: separate; }
.table-container .fixed-item { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; box-shadow: 0.3rem 0 0.3rem 0.1rem rgba(0,0,0,.02); }

/* 아코디언 */
.accordion-container { margin-top: 2rem; }
.accordion-container .accordion .accordion-head button { position: relative; width: calc(100% - 3rem); height: 4.4rem; margin-left: 1.5rem; border-bottom: 1px solid #ddd; font-size: 1.2rem; text-align: left; }
.accordion-container .accordion .accordion-head button:after { content: ''; position: absolute; right: .7rem; top: 2rem; width: .93rem; height: .56rem; background: url(../images/icon_arrow_grey_normal.png) no-repeat 50% 50%; background-size: 100% auto; }
.accordion-container .accordion.on > .accordion-head > button:after { transform: rotate(180deg); }
.accordion-container .accordion .accordion-head button:after span { overflow: hidden; position: absolute; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); width: 0; height: 0; margin: -1px; border: 0; padding: 0; }
.accordion-container .accordion .accordion-head button:after span th, .accordion-container .accordion .accordion-head button:after span td { width: 0 !important; height: 0 !important; 
  overflow: hidden !important; line-height: 0 !important; font-size: 0 !important; padding: 0 !important; }
.accordion-container .accordion .accordion-body { display: none; }
.accordion-container .accordion.on > .accordion-body { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 2rem 1.4rem; background: #f9f9f9; }
.accordion-container .accordion-body { display: -webkit-flex; display: -ms-flexbox; display: flex; }
.accordion-container .accordion-body .accordion-body-contents { -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.accordion-container:not(.type-information) .accordion-body .accordion-body-contents .dot-list { margin: .5rem 0 0 0; }
.accordion-container:not(.type-information) .accordion-body .accordion-body-contents .dot-list > li { margin-top: 0; color: var(--text-color-02);}
.accordion-container:not(.type-information) .accordion-body .accordion-body-contents .dot-list > li:before { background-color: var(--text-color-02);}
.accordion-container .accordion-body .accordion-body-contents .txt-blue { margin-top: .5rem; color: var(--text-color-04); font-family: var(--font-family-number); font-size: 1.2rem; font-weight: 500; }
.accordion-container .accordion-body .accordion-body-contents .txt-blue a { color: var(--text-color-04); letter-spacing: 0; }

/* Arrow */
.arrow .triangle { display: inline-block; width: 0; height: 0; margin-right: .3rem; border-style: solid; border-width: .6rem; }
.arrow.up .triangle { border-color: transparent transparent var(--point-color-02) transparent; vertical-align: .1rem; }
.arrow.down .triangle { border-color:var(--point-color-03) transparent transparent transparent; vertical-align: -.5rem; }
.arrow.left .triangle { border-color: transparent var(--point-color-02) transparent transparent; vertical-align: -.2rem; }
.arrow.right .triangle { border-color: transparent transparent transparent var(--point-color-03); vertical-align: -.2rem; }

.input-group { display: flex; align-items: center; margin: 0 0 10px;}
.input-group .input-check { margin: 0 1.7rem 0 0;}
.input-group .right { max-width: 60%;}
.input-group .right input[type=text] { display: inline-block; width: auto; height: 80%; margin-top: 10px; }
.input-group .right i { margin-left: 10px;}

.sub-txt01 { color: #666; font-size: 1.2rem;}

/* graph area */
.graph-area .graph-temp {background: #ccc; height: 30rem; line-height:30rem; text-align: center; color: #fff; font-weight: 700; }

/* 등급 마크 */
.mark-rating {display: inline-block; width: 9.5rem; height: 1.6rem; line-height: 0; background-image: url(../images/common/mark_rating.png); background-repeat: no-repeat; background-position: 0 0; background-size: auto 10.1rem; }
.mark-rating.grade01 { background-position: 0 -1.7rem; }
.mark-rating.grade02 { background-position: 0 -3.4rem; }
.mark-rating.grade03 { background-position: 0 -5.1rem; }
.mark-rating.grade04 { background-position: 0 -6.8rem; }
.mark-rating.grade05 { background-position: 0 -8.5rem; }
.mark-rating.sm { width: 8rem; height: 1.4rem; background-image: url(../images/common/mark_rating_sm.png); background-size: 8rem auto; }
.mark-rating.sm.grade01 { background-position: 0 -1.5rem; }
.mark-rating.sm.grade02 { background-position: 0 -3rem; }
.mark-rating.sm.grade03 { background-position: 0 -4.5rem; }
.mark-rating.sm.grade04 { background-position: 0 -6rem; }
.mark-rating.sm.grade05 { background-position: 0 -7.5rem; }

/* toast popup */
.toast-popup { opacity: 0; visibility: hidden; position: fixed; left: 1.6rem; right: 1.6rem; bottom: 9.2rem; padding: 1.4rem; background-color: var(--text-color-01); border-radius: .4rem; transition: all .3s; color: #fff; text-align: center; transform: translateY(1.5rem); z-index: 3100; }
.toast-popup.on { opacity: 1; visibility: visible; transform: translateY(0); }

/* custom switch */
.custom-switch { overflow: hidden; display: inline-block; vertical-align: top; }
.custom-switch input[type=checkbox] { position: absolute; width:1px; height: 1px; opacity: 0; }
.custom-switch label { position: relative; display: inline-block; width: 5.6rem; height: 2.4rem; border-radius: 3rem; background-color: #bbb; vertical-align: top; }
.custom-switch label::after { content: ''; position:absolute; top: .2rem; left: .2rem; display: block; width: 2rem; height: 2rem; background-color: #fff; transition: all .15s ease-in-out; border-radius: 100%; }
.custom-switch label::before { content: 'OFF'; position:absolute; top: 0; left: 0; display: block; width: 100%; height: 2.4rem; line-height: 2.4rem; padding: 0 1.2rem; text-align: right; color: #fff; font-size: 1.1rem; box-sizing: border-box; font-weight: 300; }
.custom-switch input:checked + label { background-color: #202c40; }
.custom-switch input:checked + label::before { content: 'ON'; display: block; color: #fff; font-size: 1.1rem; text-align: left; }
.custom-switch input:checked + label::after { background-color: #fff; left: calc( 100% - 2.2rem ); }
.custom-switch input:disabled + label { opacity: .5; }

/* tooltip */
.tooltip-container { position: relative; overflow:hidden; display: inline-block; vertical-align: middle; }
.tooltip-container .btn-tooltip { width: 2.4rem; height: 2.4rem; border-radius: 100%; border: 1px solid #ccc; background-color: #fafafa; vertical-align: middle; }
.tooltip-container .btn-tooltip::before { display: inline; content:'?'; color: #ccc; font-weight: 700; }
.tooltip-container .tooltip-body { visibility: hidden; opacity: 0; position: absolute; z-index: 100; top: 100%; left: 0; width: calc( 100vw - 3.2rem ); margin-top: .5rem; transition: opacity .2s ease-in; text-align: left; }
.tooltip-container .tooltip-content { display: inline-block; padding: .6rem .8rem; line-height: 1.3; color: #fff; font-size: .9rem; background-color: #333; transform: translate(0, -1rem); transition: transform .2s ease-in;  }
.tooltip-container.right .tooltip-body { top: 0; right: 2.9rem; left: auto; width: calc( 100vw - 6.1rem ); margin-top: 0; text-align: right; }
.tooltip-container.right .tooltip-content { transform: translate(1rem, 0); }
.tooltip-container.on { overflow: visible; }
.tooltip-container.on .tooltip-body { display: inline-block; visibility: visible; opacity: 1; }
.tooltip-container.on .tooltip-content { transform: translate(0); }


.slide-pop-text {
  display: flex;
  flex-direction: row;
  margin: 2rem 0;
  justify-content: flex-end;
}
.slide-pop-text  a.pop {
  display: flex;
  align-items: center;
}
.slide-pop-text  a.pop::before {
  content: '';
  width: 1.4rem; height: 1.4rem;
  display: block;
  margin-right: .4rem;
  background-image: url(../images/icon_tooltip.svg);

}


/* .dimm {
  width: 100vw; height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, .5);
  left: 0; top: 0;
  z-index: 100;
} */

.slide-pop {
  width: 100vw; 
  position:fixed;
  left: 0; bottom: 0;
  z-index: 200;
  transform: translate3d(0, 100%, 0);
}
.slide-pop.off {
	animation: slideDown	0.25s cubic-bezier(.3,0,.3,1) forwards;
}
.slide-pop.on {
	animation: slideUp	0.5s cubic-bezier(.3,0,.3,1) forwards;
}

.slide-pop .top {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom: .1rem solid #999;
  background: #fff;
  padding: 1.4rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.slide-pop .top > h2 {
  line-height: 2.6rem;
  font-size: 2rem;
  font-weight: 700;
}
.slide-pop .mid {
  padding: 2.4rem 1.6rem;
  background: #fff;
}
.slide-pop .bottom {
  background: #fff;
}


body.off {
	height: 100vh;
	overflow: hidden;
}

@keyframes slideUp {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translateZ(0)
  }
}
@keyframes slideDown {
	from {
		transform: translateZ(0)
	  }
	  to {
		transform: translate3d(0, 100%, 0);
	  }
}