@charset "utf-8";

/* 설계하기 */
.ui-popup .ui-pop-head-desc { position: relative; margin-top: 3rem; padding: 7.6rem 0 8.3rem; text-align: center; }
.ui-popup .ui-pop-head-desc.target::before { content: ''; position: absolute; top: 0; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; background: url(../images/simple/icon_target.png) no-repeat 50% 50%; background-size: 100% auto; }
.ui-popup .ui-pop-head-desc.price::before { content: ''; position: absolute; top: 0; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; background: url(../images/simple/icon_price.png) no-repeat 50% 50%; background-size: 100% auto; }
.ui-popup .ui-pop-head-desc.cycle::before { content: ''; position: absolute; top: 0; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; background: url(../images/simple/icon_cycle.png) no-repeat 50% 50%; background-size: 100% auto; }
.ui-popup .ui-pop-head-desc.amount::before { content: ''; position: absolute; top: 0; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; background: url(../images/simple/icon_amount.png) no-repeat 50% 50%; background-size: 100% auto; }
.ui-popup .ui-pop-head-desc.account::before { content: ''; position: absolute; top: 0; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; background: url(../images/simple/icon_account.png) no-repeat 50% 50%; background-size: 100% auto; }
.ui-popup .ui-pop-head-desc.operation::before { content: ''; position: absolute; top: 0; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; background: url(../images/simple/icon_operation.png) no-repeat 50% 50%; background-size: 100% auto; }
.ui-popup .ui-pop-head-desc.acutselt::before { content: ''; position: absolute; top: 0; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; background: url(../images/simple/icon_acut_select.png) no-repeat 50% 50%; background-size: 100% auto; }
.ui-popup .ui-pop-head-desc .ui-pop-title { color: #333; font-size: 1.6rem; font-weight: 500; letter-spacing:-.05rem; line-height:2.1rem; }
.ui-popup .ui-pop-head-desc .ui-pop-desc { color: #666; font-size: 1.4rem; line-height: 2.7rem; }

.pop-box-txt { padding: 1.5rem 1.6rem; border-radius: .5rem; background-color: #f7f7fa; }
.pop-box-txt dl { display: flex; flex-wrap: wrap; }
.pop-box-txt dl dt { width: 30%; color: #666; font-size: 1.4rem; }
.pop-box-txt dl dd { width: 70%; color: #181949; font-size: 1.4rem; font-weight: 500; text-align: right; }
.pop-box-txt dl dt ~ dt, .pop-box-txt dl dd ~ dd { margin-top: 1rem; }
.pop-box-txt dl dd.price { font-family: var(--font-family-number); }
.pop-box-txt.gray dl dd { color: #333; }

/* 금융회사 선택 */
.finance-list ul { display: flex; flex-wrap: wrap; }
.finance-list ul li { flex-basis: 33.33%; }
.finance-list a { display: block; position: relative; margin-top: 1.6rem; padding-top: 4rem; color: #333; font-size: 1.4rem; line-height: 3.6rem; text-align: center; }
.finance-list a:after { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 3.4rem; height: 3.4rem; margin-left: -1.7rem; }

/* 출금계좌 선택 */
.with-container { display: flex; flex-direction: column; justify-content: center; }
.with-container .with-box { display: block; position: relative; width: calc(100% - 2.8rem); margin: 0 auto; padding: 2rem 8rem 2rem 4.7rem; border-bottom: 1px solid #ddd; background-color: #fff; }
.with-container .with-box:last-child { border-bottom: none; }
.with-container .with-box .title { margin-bottom: .5rem; color: #333; font-size: 1.4rem; font-weight: 500; }
.with-container .with-box .sub { color: #666; font-size: 1.2rem; }
.with-container .with-box::before { content:''; position: absolute; top: 50%; right: 0; width: 2.1rem; height: 2.1rem; margin-top: -1.05rem; 
    background: url(../images/icon_check_normal.png) no-repeat center center; background-size: 80% auto; }
.with-container .with-box.active { width: 100%; padding: 2rem 9.4rem 2rem 6.1rem; background-color: #f2f3f7; }
.with-container .with-box.active::before { right: 1.4rem; background: url(../images/icon_check.png) no-repeat center center; background-size: 80% auto; }
.with-container .with-box.bank::after { content:''; position: absolute; top: 50%; left: .4rem; width: 3.3rem; height: 3.3rem; margin-top: -1.65rem; }
.with-container .with-box.bank.active::after { left: 1.8rem; }

/* 은행 */
.bank-002:after { background: url(../images/finance/bank/bank_kdb.png) no-repeat center center; background-size: 100% auto; } /* 002 산업은행  */
.bank-003:after { background: url(../images/finance/bank/bank_ibk.png) no-repeat center center; background-size: 100% auto; } /* 003 기업은행 */
.bank-004:after { background: url(../images/finance/bank/bank_kb.png) no-repeat center center; background-size: 100% auto; } /* 004 국민은행 */
.bank-007:after { background: url(../images/finance/bank/bank_sh.png) no-repeat center center; background-size: 100% auto; } /* 007 수협은행 */
.bank-011:after { background: url(../images/finance/bank/bank_nh.png) no-repeat center center; background-size: 100% auto; } /* 011 농협은행 */
.bank-020:after { background: url(../images/finance/bank/bank_woori.png) no-repeat center center; background-size: 100% auto; } /* 020 우리은행 */
.bank-023:after { background: url(../images/finance/bank/bank_sc.png) no-repeat center center; background-size: 100% auto; } /* 023 SC제일은행 */
.bank-027:after { background: url(../images/finance/bank/bank_citi.png) no-repeat center center; background-size: 100% auto; } /* 027 한국씨티은행 */
.bank-031:after { background: url(../images/finance/bank/bank_daegu.png) no-repeat center center; background-size: 100% auto; } /* 031 대구은행 */
.bank-032:after { background: url(../images/finance/bank/bank_bnk.png) no-repeat center center; background-size: 100% auto; } /* 032 부산은행 */
.bank-034:after { background: url(../images/finance/bank/bank_kwangju.png) no-repeat center center; background-size: 100% auto; } /* 034 광주은행 */
.bank-035:after { background: url(../images/finance/bank/bank_jeju.png) no-repeat center center; background-size: 100% auto; } /* 035 제주은행 */
.bank-037:after { background: url(../images/finance/bank/bank_junbuk.png) no-repeat center center; background-size: 100% auto; } /* 037 전북은행 */
.bank-039:after { background: url(../images/finance/bank/bank_bnk.png) no-repeat center center; background-size: 100% auto; } /* 039 경남은행 */
.bank-045:after { background: url(../images/finance/bank/bank_kfcc.png) no-repeat center center; background-size: 100% auto; } /* 045 새마을금고중앙회 */
.bank-048:after { background: url(../images/finance/bank/bank_cu.png) no-repeat center center; background-size: 100% auto; } /* 048 신협 */
.bank-050:after { background: url(../images/finance/bank/bank_sb.png) no-repeat center center; background-size: 100% auto; } /* 050 저축은행 */
.bank-054:after { background: url(../images/finance/bank/bank_hsbc.png) no-repeat center center; background-size: 100% auto; } /* 054 HSBC은행 */
.bank-055:after { background: url(../images/finance/bank/bank_deutsche.png) no-repeat center center; background-size: 100% auto; } /* 055 도이치은행 */
.bank-057:after { background: url(../images/finance/bank/bank_jp.png) no-repeat center center; background-size: 100% auto; } /* 057 제이피모간체이스은행 */
.bank-060:after { background: url(../images/finance/bank/bank_boa.png) no-repeat center center; background-size: 100% auto; } /* 060 BOA은행 */
.bank-064:after { background: url(../images/finance/bank/bank_sj.png) no-repeat center center; background-size: 100% auto; } /* 064 산림조합중앙회 */
.bank-071:after { background: url(../images/finance/bank/bank_kpost.png) no-repeat center center; background-size: 100% auto; } /* 071 우체국 */
.bank-081:after { background: url(../images/finance/bank/bank_hana.png) no-repeat center center; background-size: 100% auto; } /* 081 하나은행 */
.bank-088:after { background: url(../images/finance/bank/bank_shinhan.png) no-repeat center center; background-size: 100% auto; } /* 088 신한은행 */
.bank-089:after { background: url(../images/finance/bank/bank_kbank.png) no-repeat center center; background-size: 100% auto; } /* 089 케이뱅크 */
.bank-090:after { background: url(../images/finance/bank/bank_kakao.png) no-repeat center center; background-size: 100% auto; } /* 090 카카오뱅크 */
/* 증권 */
.bank-209:after { background: url(../images/finance/security/security_yuanta.png) no-repeat center center; background-size: 100% auto; } /* 209 유안타증권 */
.bank-218:after { background: url(../images/finance/security/security_kb.png) no-repeat center center; background-size: 100% auto; } /* 218 KB증권 */
.bank-224:after { background: url(../images/finance/security/security_bnk.png) no-repeat center center; background-size: 100% auto; } /* 224 BNK투자증권 */
.bank-225:after { background: url(../images/finance/security/security_ibk.png) no-repeat center center; background-size: 100% auto; } /* 225 IBK투자증권 */
.bank-227:after { background: url(../images/finance/security/security_ktb.png) no-repeat center center; background-size: 100% auto; } /* 227 KTB투자증권 */
.bank-238:after { background: url(../images/finance/security/security_mirae.png) no-repeat center center; background-size: 100% auto; } /* 238 미래에셋대우 */
.bank-240:after { background: url(../images/finance/security/security_samsung.png) no-repeat center center; background-size: 100% auto; } /* 240 삼성증권 */
.bank-243:after { background: url(../images/finance/security/security_true.png) no-repeat center center; background-size: 100% auto; } /* 243 한국투자증권 */
.bank-247:after { background: url(../images/finance/security/security_nh.png) no-repeat center center; background-size: 100% auto; } /* 247 NH투자증권 */
.bank-261:after { background: url(../images/finance/security/security_kyobo.png) no-repeat center center; background-size: 100% auto; } /* 261 교보증권 */
.bank-262:after { background: url(../images/finance/security/security_hi.png) no-repeat center center; background-size: 100% auto; } /* 262 하이투자증권 */
.bank-263:after { background: url(../images/finance/security/security_hmsec.png) no-repeat center center; background-size: 100% auto; } /* 263 현대차증권 */
.bank-264:after { background: url(../images/finance/security/security_kiwoom.png) no-repeat center center; background-size: 100% auto; } /* 264 키움증권 */
.bank-265:after { background: url(../images/finance/security/security_ebest.png) no-repeat center center; background-size: 100% auto; } /* 265 이베스트투자증권 */
.bank-266:after { background: url(../images/finance/security/security_sk.png) no-repeat center center; background-size: 100% auto; } /* 266 에스케이증권 */
.bank-267:after { background: url(../images/finance/security/security_daeshin.png) no-repeat center center; background-size: 100% auto; } /* 267 대신증권 */
.bank-269:after { background: url(../images/finance/security/security_hanwha.png) no-repeat center center; background-size: 100% auto; } /* 269 한화투자증권 */
.bank-270:after { background: url(../images/finance/security/security_hana.png) no-repeat center center; background-size: 100% auto; } /* 270 하나금융투자 */
.bank-278:after { background: url(../images/finance/security/security_shinhan.png) no-repeat center center; background-size: 100% auto; } /* 278 신한금융투자 */
.bank-279:after { background: url(../images/finance/security/security_db.png) no-repeat center center; background-size: 100% auto; } /* 279 DB금융투자 */
.bank-280:after { background: url(../images/finance/security/security_eugene.png) no-repeat center center; background-size: 100% auto; } /* 280 유진투자증권 */
.bank-287:after { background: url(../images/finance/security/security_meritz.png) no-repeat center center; background-size: 100% auto; } /* 287 메리츠증권 */
.bank-288:after { background: url(../images/finance/security/security_kakaopay.png) no-repeat center center; background-size: 100% auto; } /* 288 카카오페이증권 */
.bank-290:after { background: url(../images/finance/security/security_bookuk.png) no-repeat center center; background-size: 100% auto; } /* 290 부국증권 */
.bank-291:after { background: url(../images/finance/security/security_shinyoung.png) no-repeat center center; background-size: 100% auto; } /* 291 신영증권 */
.bank-292:after { background: url(../images/finance/security/security_cape.png) no-repeat center center; background-size: 100% auto; } /* 292 케이프투자증권 */
.bank-294:after { background: url(../images/finance/security/security_foss.png) no-repeat center center; background-size: 100% auto; } /* 294 한국포스증권 */

.finance-list.active { position: relative; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-list.active a { margin-top: 0; padding-top: 0; padding-left: 2.3rem; text-align: left; letter-spacing: -.1rem; }
.finance-list.active a:after { top: 7px; left: 0; width: 2rem; height: 2rem; margin-left: 0; }
.finance-list.active .icon.dropdown { position: absolute; top: .8rem; right: -.6rem; }

/* 매주 모으기 */
.roll-date-wrap { display: flex; justify-content: center; align-items: center; position: relative; height: 22.5rem; }
.roll-date-wrap .active { position: fixed; width: 100%; height: 4.5rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff; z-index: 3005; }
.roll-date-wrap .active dl { display: flex; flex-direction: row; width: 100%; color: #bd527e; font-size: 1.8rem; line-height: 4.3rem; text-align: center; }
.roll-date-wrap .active dt { width: 40%; }
.roll-date-wrap .active dd { width: 60%; }
.roll-date-wrap .rolling { position: absolute; right: 0; top: 0; width: 60%; color: #999; font-size: 1.2rem; text-align: center; z-index: 3004; }
.roll-date-wrap .rolling > ul > li { height: 4.5rem; line-height: 4.5rem; }
.roll-date-wrap .rolling > ul > li:first-child, .roll-date-wrap .rolling > ul > li:last-child, .roll-date-wrap .rolling > ul > li.disable { color: #ddd; font-size: 1.2rem; }

/* 자동투자 일자변경 */
.rolling-wrap { display: flex; justify-content: center; align-items: center; position: relative; }
.rolling-wrap .active { position: fixed; width: 100%; height: 4.5rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff; z-index: 3005; }
.rolling-wrap .active dl { display: flex; flex-direction: row; width: 100%; color: #bd527e; font-size: 1.8rem; line-height: 4.3rem; text-align: center; }
.rolling-wrap .active dt { width: 40%; }
.rolling-wrap .active dd { width: 60%; }
.rolling-wrap .rolling-left { width: 40%; height: 13.5rem; overflow-y: auto; }
.rolling-wrap .rolling-left > ul > li { height: 4.5rem; line-height: 4.5rem; text-align: center; }
.rolling-wrap .rolling-right { width: 60%; height: 22.5rem; color: #999; font-size: 1.2rem; text-align: center; z-index: 3004; overflow-y: auto; }
.rolling-wrap .rolling-right > ul > li { height: 4.5rem; line-height: 4.5rem; }
.rolling-wrap .rolling-right > ul > li:first-child, .rolling-wrap .rolling-right > ul > li:last-child, .rolling-wrap .rolling-right > ul > li.disable { color: #ddd; font-size: 1.2rem; }

/* 기간선택 */
.period-tit { height: 2.5rem; line-height: 2.1rem; padding-left: 1rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fafafa; font-size: 1.2rem; font-weight: 500; }
.period-wrap { display: flex; justify-content: center; align-items: center; position: relative; height: 18rem; }
.period-wrap .period { height: 17.5rem; overflow-y: auto; z-index: 3004; }
.period-wrap .period > ul > li { height: 3.5rem; line-height: 3.5rem; color: #999; font-size: 1.2rem; text-align: center; }
.period-wrap .period > ul > li:first-child, .period-wrap .period > ul > li:last-child, .period-wrap .period > ul > li.disable { color: #ddd; font-size: 1.2rem; }
.period-wrap .active { position: fixed; width: 100%; height: 3.5rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff; z-index: 3005; }
.period-wrap .active dl { display: flex; flex-direction: row; width: 100%; color: #bd527e; font-size: 1.8rem; line-height: 3rem; text-align: center; }
.period-wrap .active dt { width: 40%; }
.period-wrap .active dd { width: 30%; }
.period-select { padding: 1rem; border-top: 1px solid #ddd; }

/* 투자성향분석 */
.txt-box { padding: 1rem; border-radius: .5rem; background-color: #fafafa; color: #999; font-size: 1rem; }
.analy-wrap { position: relative; height: 21.5rem; margin-bottom: 1.4rem; padding-top: 19.5rem; color: #333; font-size: 1.2rem; font-weight: 500; text-align: center; }
.analy-wrap::before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 19rem; height: 17.4rem; margin-left: -9.5rem; background: url(../images/simple/img_analy.png) no-repeat center center; background-size: 100% auto; }

.info-not-box { margin-top: 2rem; padding: 2rem 1rem; border-radius: .5rem; background-color: #fafafa; color: #333; font-size: 1.2rem; }
.info-not-box .tit { margin-bottom: 1.5rem; color: #333; font-size: 1.4rem; font-weight: 500; }
.info-not-box p ~ p { margin-top: 1rem; }

.btn-wrap-col { display: flex; flex-direction: column; width: 100%; }
.btn-wrap-col button ~ button { margin-top: .8rem; }
.btn-wrap-col.lrg button { height: 5.2rem; line-height: 1.5rem; }

.top-step-list { display: flex; align-items: center; justify-content: flex-end; height: 3rem; padding: 0 1.4rem; background-color: #fafafa; }
.top-step-list ol { display: flex; margin-left: 1rem; margin-top: -.5rem; }
.top-step-list ol li a { display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: #ddd; color: #fff; font-family: var(--font-family-number); font-size: 1rem; font-weight: 500; text-align: center; line-height: 1.6rem; }
.top-step-list ol li a.on { background-color: #212266; }
.top-step-list ol li ~ li { margin-left: .4rem; }
.top-step-list.type1 { justify-content: space-between; align-items: center; padding: 1.4rem; height: 6.4rem; }
.top-step-list.type2 { justify-content: space-between; align-items: center; padding: 1.4rem; height: 8.5rem; }

.invest-result-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: calc(100% - 11rem); overflow-y: auto; }
.wrap-tit-invest { width: 100%; text-align: center; }
.wrap-tit-invest .extra { color: #333; font-size: 1.8rem; line-height: 2.8rem; letter-spacing: -.1rem; }
.wrap-tit-invest .strong { margin-top: 1.2rem; font-size: 1.8rem; font-weight: 700; }
.wrap-tit-invest .strong.type1 { color: #6dc98d; }
.wrap-tit-invest .strong.type2 { color: #6083e8; }
.wrap-tit-invest .strong.type3 { color: #9583c5; }
.wrap-tit-invest .strong.type4 { color: #f39262; }
.wrap-tit-invest .strong.type5 { color: #eb6c9c; }
.invest-wrap { position: relative; margin-top: 4rem; padding-top: 15rem; color: #333; font-size: 1.4rem; text-align: center; }
.invest-wrap::before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 24.7rem; height: 13.1rem; margin-left: -12.35rem; }
.invest-wrap.type1::before { background: url(../images/robo/m-diagram-1.png) no-repeat center center; background-size: 100% auto; }
.invest-wrap.type2::before { background: url(../images/robo/m-diagram-2.png) no-repeat center center; background-size: 100% auto; }
.invest-wrap.type3::before { background: url(../images/robo/m-diagram-3.png) no-repeat center center; background-size: 100% auto; }
.invest-wrap.type4::before { background: url(../images/robo/m-diagram-4.png) no-repeat center center; background-size: 100% auto; }
.invest-wrap.type5::before { background: url(../images/robo/m-diagram-5.png) no-repeat center center; background-size: 100% auto; }

.result-box { position: relative; width: 100%; margin: 3rem 0; /*padding-top: 6.6rem;*/ padding-top: 3.6rem; text-align: center; }
.result-box:before { content:''; position: absolute; /*top: 0;*/ top: -30px; left: 50%; width: 5rem; height: 5rem; margin-left: -2.5rem; border-radius: 50%; background-color: #f7f7fa; }
.result-box.complete:before { background: #f7f7fa url(../images/icon_check.png) no-repeat center center; background-size: 2.4rem auto; }
.result-box .result-title { color: #666; font-size: 1.4rem; }
.result-box .result-strong { display: block; margin-top: 1.4rem; color: #212266; font-size: 1.8rem; font-weight: 700; line-height: 2.5rem; }
.result-box .result-add-text { margin-top: .9rem; color: #333; font-size: 1.8rem; }

/* 투자대상 선택 */
.text-header { width: 100%; padding: 1.6rem; background-color: #fafafa; color: #666; font-size: 1.4rem; text-align: center; }
/* .finance-container { display: flex; flex-direction: column; justify-content: center; } */
.finance-container .finance-box { display: block; position: relative; width: calc(100% - 2.8rem); margin: 0 auto; padding: 2rem 8rem 2rem 0; border-bottom: 1px solid #ddd; background-color: #fff; }
.finance-container .finance-box::after { content:''; position: absolute; top: 50%; right: 0; width: 2.1rem; height: 2.1rem; margin-top: -1.05rem; background: url(../images/icon_check_normal.png) no-repeat center center; background-size: 80% auto; }
.finance-container .finance-box.active { width: 100%; padding: 2rem 9.4rem 2rem 1.4rem; background-color: #f2f3f7; }
.finance-container .finance-box.active::after { right: 1.4rem; background: url(../images/icon_check.png) no-repeat center center; background-size: 80% auto; }
.finance-container .finance-box .header-cont { margin-bottom: 1.4rem; color: #999; font-size: 1rem; }
.finance-container .finance-box .header-cont .grade-flag { margin-right: .6rem; }
.finance-container .finance-box .header-cont .line { display: inline-block; width: 1px; height: .8rem; margin: 0 .5rem; background-color: #999; }
.finance-container .finance-box .title { margin-bottom: .5rem; color: #333; font-size: 1.4rem; font-weight: 700; }
.finance-container .finance-box .sub { color: #666; font-size: 1.2rem; }

.text-content { margin: 2rem 1.4rem; padding: 1.4rem 1rem; border-radius: .5rem; background-color: #fafafa; color: #666; font-size: 1.2rem; }
.text-content .tit { margin-bottom: 1rem; color: #333; font-weight: 500;}
.text-content dl { display: flex; flex-wrap: wrap; width: 100%; }
.text-content dl dt { width: 20%; }
.text-content dl dd { width: 80%; }

/* 도전현황상세 */
.txt-right-wrap { display: flex; justify-content: flex-end; margin: 1rem 0; color: #696a8b; font-size: 1.2rem; }
.txt-right-wrap .txt { display: inline-block; margin-left: .5rem; color: #333; }
.txt-right-wrap .price { margin: 0 .2rem 0 .5rem; font-family: var(--font-family-number); color: #212266; font-size: 1.4rem; font-weight: 500; }
.icon-reset:before { content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; background: url(../images/icon_reset_01.png) no-repeat 50% 50%; background-size: 100% auto; vertical-align: middle; }
.sel-amount { margin: .8rem 0;}
.sel-amount > a { display: inline-block; color: #36acc1; font-family: var(--font-family-number); font-size: 1.2rem; }
.sel-amount > a:last-child { color: #696a8b; }
.sel-amount > a:last-child::after { background: none; }
.sel-amount .line { display: inline-block; width: 1px; height: 1rem; margin: 0 .8rem; background-color: #36acc1; }
.account-box { padding: 1rem; border: 1px solid #c2c2c2; border-radius: 0.15rem; }
.account-box .title { color: #333; font-size: 1.4rem; font-weight: 500; }
.account-box .sub-tit { margin-top: .5rem; color: #666; font-size: 1.2rem; }

.switch-wrap .btn-switch { display: flex; justify-content: space-between; width: 100%; margin-bottom: 1.4rem; }
.switch-wrap .btn-switch .tit { color: #333; font-size: 1.6rem; font-weight: 500; }
.switch-wrap.oper { height: 4rem; margin-top: 2rem; padding: 1rem; border-radius: .5rem; background-color: #f7f7fa; }
.switch-wrap.oper .btn-switch .tit { font-size: 1.4rem; }

.sell-box { display: flex; flex-direction: column; margin-top: 2rem; padding: 1.4rem; border-radius: 0.15rem; background-color: #f7f7fa; color: #666; font-size: 1.2rem; text-align: center; }
.sell-box .tit { margin: 1rem 0; color: #333; font-size: 1.6rem; }
.sell-box .price-wrap { display: flex; justify-content: space-between; align-items: center; /*width: 75%;*/ width: 80%; margin: 0 auto; }
.sell-box .price-wrap .txt-label { color: #333; font-size: 1rem; font-weight: 700; }
.sell-box .price-wrap .input-area { /*width: 73%;*/ width: 70%; border: none; background-color: #fff; }

.txt-box-cont .header { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; color: #333; font-size: 1.4rem; font-weight: 700; }
.txt-box-cont { padding: 1.5rem 1.6rem; border-radius: .5rem; background-color: #f7f7fa; }
.txt-box-cont dl { display: flex; flex-wrap: wrap; font-size: 1.4rem; }
.txt-box-cont dl dt { width: 50%; color: #666; }
.txt-box-cont dl dd { width: 50%; color: #333; font-weight: 500; text-align: right; }
.txt-box-cont dl dt ~ dt, .txt-box-cont dl dd ~ dd { margin-top: 1rem; }
.txt-box-cont.fs12 dl dt, .txt-box-cont.fs12 dl dd { font-size: 1.2rem; }
.txt-box-cont.type { margin-top: 2rem; padding: 1rem; color: #666; font-size: 1.2rem; }
.txt-box-cont dl dt.type2 { width: 37%; } 
.txt-box-cont dl dd.type2 { width: 63%; } 

.txt-box-cont2 { margin-top: .8rem; padding: 1.5rem 1.6rem; border-radius: .5rem; background-color: #fff; }
.txt-box-cont2 dl { display: flex; flex-wrap: wrap; }
.txt-box-cont2 dl dt { width: 30%; color: #666; font-size: 1rem; font-weight: 500; }
.txt-box-cont2 dl dd { width: 70%; color: #b43a6b; font-size: 1.2rem; text-align: right; }
.txt-box-cont2 dl dt ~ dt, .txt-box-cont2 dl dd ~ dd { margin-top: 1rem; }

.info-view { padding: 1.4rem; background-color: #fafafa; color: #666; font-size: 1.2rem; }
.info-view ol li ~ li { margin-top: 1rem; }
.info-view > ol > li > ul > li { color: #666; font-size: 1.2rem; }

/* 계좌 비밀번호 */
.keypad { padding: 0; background: #eaeaea; }
.keypad-psw { display: flex; justify-content: center; align-items: center; padding-top: 3rem; }
.keypad-psw input[type = "password"] { flex: 0 1 auto; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; width: 6.3rem; height: 7.5rem; margin-left: .9rem; border: 1px solid #999; border-radius: 0.5rem; background-color: #fff; text-align: center; }
.keypad-psw input[type = "password"]:last-child { margin-left: none; }
.keypad-psw > span { display: flex; justify-content: center; align-items: center; flex: 0 1 auto; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; width: 6.3rem; height: 7.5rem; margin-left: .9rem; border: 1px solid #999; border-radius: 0.5rem; background-color: #fff; text-align: center; }
.keypad-psw > span:last-child { margin-left: none; }
.keypad-error { margin-top: 1.5rem; color: #bd527e; font-size: 1.2rem; text-align: center; }
.keypad-wrap { display: flex; flex-flow: row wrap; margin-top: 1.5rem; }
.keypad-wrap button { flex: 1 0 32%; width: 8rem; height: 7rem; margin: .1rem; line-height: 7rem; background-color: #5a6aa4; color: #fff; font-size: 3.5rem; text-align: center; }
.keypad-wrap button:disabled { cursor: default; border: 1px solid #ededed; color: #ddd; }
.keypad-wrap button.delete, .keypad-wrap button.reset { display: flex; justify-content: center; align-items: center; }
.keypad-wrap button.reset::before { content:''; width: 1.5rem; height: 1.5rem; background: url(../images/icon_reset_01.png) no-repeat center center; background-size: 100% auto; }
.keypad-wrap button.delete::before { content:''; width: 2.4rem; height: 1.7rem; background: url(../images/icon_key_del.png) no-repeat center center; background-size: 100% auto; }
.keypad-wrap button.f-type { font-size: 3.2rem; letter-spacing: -.05em; }

/* 목표해지 */
.target-term { position: relative; padding-left: 5rem; }
.target-term::before { content:''; position: absolute; top: 0; left: 0; width: 4.2rem; height: 4.2rem; background: url(../images/simple/icon_term.png) no-repeat center center; background-size: 100% auto; }
.target-term .tit { padding-top: .2rem; color: #333; font-size: 1.6rem; font-weight: 700; }
.target-term .sub { padding-top: .3rem; color: #666; font-size: 1.2rem; }

.progress-area { margin-top: 1rem; padding: 1.4rem 1rem; border-radius: .2rem; background-color: #f7f7fa; }
.progress-area .txt-plan { display: flex; justify-content: space-between; }
.progress-area .txt-plan .left { color: #666; font-size: 1.4rem; }
.progress-area .txt-plan .left strong { display: inline-block; margin-right: .1rem; color: #212266; font-weight: 700; }
.progress-area .txt-plan .right { color: #333; font-size: 1.4rem; text-align: right; }
.progress-area .txt-plan .right .price { font-family: var(--font-family-number); color: #333; font-size: 1.6rem; font-weight: 500; }
.progress-area .txt-plan .right .rate { margin-top: .2rem; font-family: var(--font-family-number); font-size: 1.2rem; }
.progress-area .txt-plan .right .rate.up { color: #e22d72; }
.progress-area .txt-plan .right .rate.down { color: #1c4fde; }
.progress-area .txt-plan .right .rate .triangle { display: inline-block; width: .8rem; height: .8rem; margin-right: .3rem; }
.progress-area .txt-plan .right .rate.up .triangle { background: url(../images/arrow-up.png) no-repeat center center; background-size: 100% auto; }
.progress-area .txt-plan .right .rate.down .triangle { background: url(../images/arrow-down.png) no-repeat center center; background-size: 100% auto; }
/*
.progress-area .txt-plan .right .rate .triangle { display: inline-block; width: 0; height: 0; margin-right: .3rem; border-style: solid; border-width: .6rem; }
.progress-area .txt-plan .right .rate.up { color: #e22d72; }
.progress-area .txt-plan .right .rate.up .triangle { border-color: transparent transparent #e22d72 transparent; vertical-align: .1rem; }
.progress-area .txt-plan .right .rate.down { color: #1c4fde; }
.progress-area .txt-plan .right .rate.down .triangle { border-color:#1c4fde transparent transparent transparent; vertical-align: -.5rem; }
.progress-area .txt-plan .right .rate.left { color: #e22d72; }
.progress-area .txt-plan .right .rate.left .triangle { border-color: transparent #e22d72 transparent transparent; vertical-align: -.2rem; }
.progress-area .txt-plan .right .rate.right { color: #1c4fde; }
.progress-area .txt-plan .right .rate.right .triangle { border-color: transparent transparent transparent #1c4fde; vertical-align: -.2rem; }
*/
.progress-area .progress { display: flex; position: relative; height: 2rem; margin: 1rem 0 .5rem; border-radius: .5rem; background-color: #eee; }
.progress-area .progress .active { display: inline-block; width: 100%; height: 2rem; padding-right: .6rem; border-radius: .5rem; background-color: #212266; color: #fff; font-family: var(--font-family-number); font-size: 1.2rem; line-height: 2rem; text-align: right; }
.progress-area .progress em { display: inline-block; margin-left: .5rem; font-family: var(--font-family-number); font-size: 1.2rem; line-height: 2rem; }
.progress-area .txt-extra { color: #666; font-size: 1rem; text-align: right; }
.progress-area .title { margin-bottom: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid #ddd; color: #333; font-size: 1.4rem; }
.progress-area .header { margin-bottom: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid #ddd; }
.progress-area .header .tit { margin-bottom: .5rem; color: #333; font-size: 1.6rem; font-weight: 500; }
.progress-area .header .stit { color: #666; font-size: 1.2rem; }

.progress-header { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #ddd; }
.progress-header h3 { color: #333; font-size: 1.6rem; letter-spacing: -0.07em; line-height: 2.1rem; font-weight: 500; }
.progress-header.first { margin-top: 0; padding-top: 0; border-top: none; }
.progress-header.simple { position: relative; height: 4.2rem; padding-left: 5rem; }
.progress-header.simple .tit { line-height: 4.2rem; }
.progress-header.simple::before { content:''; position: absolute; left: 0; top: 0; width: 4.2rem; height: 4.2rem; background: url(../images/simple/tit_img.png) no-repeat center center; background-size: 100% auto; }
.progress-header.simple.bag::before { background: url(../images/simple/tit_bag.png) no-repeat center center; background-size: 100% auto; }
.progress-header.simple.money::before { background: url(../images/simple/tit_money.png) no-repeat center center; background-size: 100% auto; }

.progress-box { position: relative; margin-top: 1.6rem; padding: 1.4rem 1rem; border: 1px solid #ddd; border-radius: .5rem; }

/* 완료 */
.finish { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: .5rem; background-color: rgba(51,51,51,.85); z-index: 1; }
.finish .close { position: absolute; right: 1rem; top: 1rem; width: 1.8rem; height: 1.8rem; background: url(../images/simple/btn_close_white.png) no-repeat center center; background-size: 100% auto; }
.finish .cont { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; padding-top: 4.6rem; }
.finish .cont::before { content:''; position: absolute; left: 50%; top: 30%; width: 2.16rem; height: 3.23rem; margin-left: -1.08rem; background: url(../images/simple/icon_finish.png) no-repeat center center; background-size: 100% auto; }
.finish .cont .stit { color: #fff; font-size: 1.2rem; }
.finish .cont .tit { margin-top: .9rem; color: #fff; font-size: 1.6rem; font-weight: 500; }
.finish .cont2 { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 2rem; overflow-y: auto; }
.finish .cont2 .txt { color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.5; }

/* 도전현황 상세보기 */
.stock-status { padding: 1.5rem; border-radius: .5rem; background-color: #28295f; }
.stock-status .title { padding-bottom: 1rem; border-bottom: 1px solid #9090b2; color: #fff; font-size: 1.4rem; font-weight: 500; }
.stock-status dl { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 1rem; line-height: 2.5rem; }
.stock-status dl dt { width: 40%; color: #a1a3c9; font-size: 1.4rem; }
.stock-status dl dd { width: 60%; color: #fff; font-size: 1.4rem; text-align: right; }
.stock-status dl dd strong { font-family: var(--font-family-number); font-weight: 700; }
.stock-status dl dd strong.rate { color: #ffdbe8; }
.stock-topline { margin-top: .5rem; border-top: 1px solid #999; }
.stock-detail.last { border-bottom: 1px solid #999; }
.stock-detail { display: flex; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #eee; }
.stock-detail .date { color: #999; font-family: var(--font-family-number); font-size: 1.2rem; }
.stock-detail .date span { margin-left: .5rem; }
.stock-detail .cont { text-align: right; }
.stock-detail .cont .shape { color: #e22d72; font-size: 1.2rem; }
.stock-detail .cont .price { color: #e22d72; font-size: 1.4rem; }
.stock-detail .cont .price span { font-family: var(--font-family-number); font-weight: 500; }
.stock-detail .cont.blue .shape, .stock-detail .cont.blue .price { color: #1c4fde; }

.link-page { display: block; position: relative; color: #333; font-size: 1.2rem; letter-spacing: 0; }
.link-page::after { content:''; position: absolute; right: 0; top: .3rem; width: .6rem; height: 1.2rem; background: url(../images/icon_flick_02.png) no-repeat center center; background-size: 100% auto; }
.link-page2 { display: block; position: relative; margin-top: 1rem; padding-right: 1rem; color: #333; font-size: 1.2rem; text-align: right; }
.link-page2::after { content:''; position: absolute; right: 0; top: .5rem; width: .53rem; height: .86rem; background: url(../images/arrow_right.png) no-repeat center center; background-size: 100% auto; }

/* 목표설계 */
.target-step-tit { height: 3.3rem; padding: 0 1.4rem; background-color: #696a8b; color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 3.3rem; }
.target-step-tit .label { display: inline-block; height: 1.8rem; padding: 0 .4rem; margin-right: .5rem; border-radius: .9rem; border: 1px solid #ebebfa; color: #ebebfa; font-weight: 400; line-height: 1.6rem; }
.target-step { display: flex; width: 100%; height: 6.5rem; padding: 1rem 1.6rem 0; background-color: #fafafa; text-align: center; }
.target-step .step-cont { position: relative; width: 20%; }
.target-step .step-cont::before { content:''; display: inline-block; position: absolute; top: 2.5rem; left: 50%; width: .66rem; height: .66rem; margin-left: -.33rem; border-radius: 50%; background-color: #ddd; z-index: 2; }
.target-step .step-cont::after { content:''; display: inline-block; position: absolute; top: 2.8rem; left: 50%; width: 100%; border-bottom: 1px solid #ddd; z-index: 1; }
.target-step .step-cont:nth-child(3):after { border-bottom: 1px dotted #ddd; }
.target-step .step-cont.on:nth-child(3):after { border-bottom: 1px dotted #a1a3c9; }
.target-step .step-cont:last-child:after, .target-step .step-cont.on:last-child:after { border-bottom: none; }
.target-step .tooltip { height: 1.7rem; background-color: #fafafa; }
.target-step .tooltip.on { position: relative; height: 1.7rem; margin: 0 .4rem; border-radius: .5rem; background-color: #696a8b; font-family: var(--font-family-number); color: #fff; font-size: 1rem; line-height: 1.7rem; z-index: 0; }
.target-step .tooltip.on::after { content:''; display: inline-block; position: absolute; top: 6px; left: 50%; width: 10px; height: 5px; margin-left: -5px; border-top: 5px solid #696a8b; border-right: 5px solid #696a8b; transform: rotate(135deg); z-index: -1; }
.target-step .txt { padding-top: 1.6rem; color: #999; font-size: 1rem; }
.target-step .step-cont.on::before { background-color: #a1a3c9; }
.target-step .step-cont.on::after { border-bottom: 1px solid #a1a3c9; }
.target-step .step-cont.on .txt { color: #696a8b; }
.target-step .step-cont.bdr-n::after { border-bottom: 1px solid #ddd; }
.step-title { margin: 3rem 0 3rem; color: var(--text-color-01); font-size: 1.6rem; text-align: center; line-height: 1.4; font-weight: 500; }
.step-title-wrap { margin: 3rem 0 3rem; }
.step-title-wrap .step-title { margin-bottom: 0; }
.step-title-wrap .desc { color: var(--text-color-02); font-size: 1.4rem; margin-top: 1rem; text-align: center; }

.range-circle-wrap { display: flex; justify-content: center; align-items: center; }
.range-circle-wrap .circle { display: flex; justify-content: center; align-items: center; width: 20rem; height: 20rem; padding: 3rem; border-radius: 50%; background-color: #f7f7fa; color: #181949; font-size: 1.6rem; font-weight: 500; line-height: 1.5em; text-align: center; }

.slider-range-wrap { width: 100%; padding: 0 1.5rem 3rem .5rem; }
.ui-slider { position: relative; height: 2.5rem; margin-top: 1.5rem; padding-top: 1.15rem; }
.ui-slider-range { position: absolute; width: 100%; height: .2rem; border-radius: .1rem; background: #ddd; }	
.ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min { background: #212266; }
.ui-slider-handle { position: absolute; z-index: 2; width: 1.6rem; height: 1.6rem; margin-top: -.7rem; cursor: default; -ms-touch-action: none; touch-action: none; border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px 3px rgba(0, 0, 0,.22); }
.ui-slider-handle em { display: inline-block; position: absolute; top: .4rem; left: .4rem; width: .8rem; height: .8rem; border-radius: 50%; background-color: #212266; }

.ui-slider-txt { width: 100%; padding-right: 1rem; color: #999; font-size: 1.2rem; }
.ui-slider-txt ul li { position: relative; }
.ui-slider-txt ul li span { display: inline-block; position: absolute; text-align: center; line-height: 1.2; }
.ui-slider-txt ul li:first-child span { left: 0; text-align: left; }
.ui-slider-txt ul li:nth-child(2) span { left: 25%; }
.ui-slider-txt ul li:nth-child(3) span { left: 50%; }
.ui-slider-txt ul li:nth-child(4) span { left: 75%; }
.ui-slider-txt ul li:last-child span { left: 100%; text-align: right; }
.ui-slider-txt.item3 ul li:nth-child(2) span { left: 50%; }
.ui-slider-txt.item4 ul li:nth-child(2) span { left: 33%; }
.ui-slider-txt.item4 ul li:nth-child(3) span { left: 66%; }

/* 목표설계 개발 소스에 있는 css 이관 */
.ui-stipl #drawChart_01 .highcharts-background { fill:#fafafa; }
.ui-stipl .ui-slider-handle { outline : none; width : 1.8rem; height : 1.8rem; margin-top : -0.9rem; }
.ui-stipl .ui-slider-handle em{ top : 0.5rem; left : 0.5rem; }
.ui-stipl #result_popup .port-graph-wrap2 .graph-desc dl dt { width : 60%; }
.ui-stipl #result_popup .port-graph-wrap2 .graph-desc dl dd { width : 40%; }
.ui-stipl button span{ cursor : pointer; }
.ui-stipl .text-content2 dl dt { width: 10px; }	
.ui-stipl .text-content2 dl dd { width: calc(100% - 10px); }
.ui-stipl .range-box{ background-color : transparent; }
.ui-stipl .range-box .slider-row .tit-lb_{ color: #666; font-size: 1.2rem; padding: .3rem 0 0 0; width: 50px; }
.ui-stipl .range-box .slider-row .tit-lb.st1::before{ background-color : transparent; }
.ui-stipl .range-box .slider-row .slider-range-wrap { width: calc(100% - 120px); }
.ui-stipl .range-box input.numper:not([type=radio]):not([type=checkbox]) { display: inline-block; width: 5rem; height: 2rem; margin: 3px 0 0 25px; padding: 0 .5rem; border: 1px solid #212266; border-radius: .2rem; color: #666; font-family: var(--font-family-number); font-size: 1.3rem; font-weight: 700; line-height: 2rem; text-align: center; }

/* 금융비중 설문 color style */
.ui-stipl .range-box.slider-color-type .slider-row { margin-top: 3rem }
.ui-stipl .range-box.slider-color-type .slider-type1 { margin-top: 0; }
.range-box.slider-color-type { margin-top: 0; padding-top: 1rem; }
.range-box.slider-color-type .slider-type1 .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min,
.range-box.slider-color-type .slider-type1 .ui-slider-handle em { background: #20c198; }
.range-box.slider-color-type .slider-type1 input:not([type=radio]):not([type=checkbox]) { border-color: #20c198; color: #20c198; -webkit-text-fill-color: #20c198; }
.range-box.slider-color-type .slider-type2 .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min,
.range-box.slider-color-type .slider-type2 .ui-slider-handle em { background: #f38a11; }
.range-box.slider-color-type .slider-type2 input:not([type=radio]):not([type=checkbox]) { border-color: #f38a11; color: #f38a11; -webkit-text-fill-color: #f38a11; }
.range-box.slider-color-type .slider-type3 .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min,
.range-box.slider-color-type .slider-type3 .ui-slider-handle em { background: #1592e6; }
.range-box.slider-color-type .slider-type3 input:not([type=radio]):not([type=checkbox]) { border-color: #1592e6; color: #1592e6; -webkit-text-fill-color: #1592e6; }

.range-box.slider-color-type .slider-type4 .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min,
.range-box.slider-color-type .slider-type4 .ui-slider-handle em { background:#999; }
.range-box.slider-color-type .slider-type4 input:not([type=radio]):not([type=checkbox]) { border-color: #999; color: #999; -webkit-text-fill-color:#999; }


.range-box.slider-color-type .total .numper { width: 4.8rem; line-height: 1.8rem; color: #212266; font-size: 1.3rem; font-weight: 700; border-color: #212266; }
.range-box.slider-color-type .total em { font-weight: 500; }
.range-box.slider-color-type .input-price:disabled { opacity: 1; }
.ui-stipl .toast-popup { bottom: 6rem; background-color: #212266; }

/* 포트폴리오 유형 */
.swiper-slide.ptfo { width: 28rem !important; }
.portfolio-type { position: relative; width: 28rem; height: 300px; padding: 1rem; border-radius: .5rem; background-color: #f7f7fa; }
.portfolio-type.pink { background-color: #fcf5f8; }
.portfolio-type.blue { background-color: #f2f9fa; }
.portfolio-type.active { border: 1px solid #181949; }
.portfolio-type .txt-box { position: absolute; bottom: 5rem; width: 26rem; height: 6.9rem; padding: .7rem 1rem; border-radius: .5rem; background-color: #fff; }
.portfolio-type .txt-box dl { display: flex; width: 100%; flex-wrap: wrap; }
.portfolio-type .txt-box dl dt { width: 30%; color: #666; font-size: 1rem; font-weight: 500; line-height: 1.5; }
.portfolio-type .txt-box dl dd { width: 70%; color: #b43a6b; font-size: 1.2rem; text-align: right; line-height: 1.5; }
.portfolio-type .txt-box dl dd span { display: block; font-size: 1rem; }
.portfolio-type .btn-area { position: absolute; bottom: 1rem; left: 50%; margin-left: -3.5rem; text-align: center; }
.portfolio-type .btn-area .btn { width: 7rem; height: 3rem; }
.portfolio-type.active .btn-area .btn { font-weight: 700; }
.portfolio-type .header { display: flex; justify-content: space-between; height: 3rem; border-bottom: 1px solid #ddd; }
.portfolio-type .header .title { position: relative; padding-left: 2.6rem; color: #333; font-size: 1.6rem; font-weight: 500; }
.portfolio-type .header .title::before { content:''; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; }
.portfolio-type .header .title.type1::before { background: url(../images/robo/icon_type1.png) no-repeat center center; background-size: 100% auto; }
.portfolio-type .header .title.type2::before { background: url(../images/robo/icon_type2.png) no-repeat center center; background-size: 100% auto; }
.portfolio-type .header .title.type3::before { background: url(../images/robo/icon_type3.png) no-repeat center center; background-size: 100% auto; }

.sign { display: inline-block; height: 1.4rem; padding: 0 .5rem; border-radius: .15rem; background-color: #cc6a93; color: #fff; font-size: 1rem; line-height: 1.4rem; }

.list-check { margin-top: 1.4rem; }
.list-check li { position: relative; margin-top: .7rem; padding-left: 1.4rem; color: #333; font-size: 1.2rem; }
.list-check li::before { content:''; position: absolute; left: 0; top: 7px; width: .9rem; height: .7rem; background: url(../images/icon_check.png) no-repeat center center; background-size: 100% auto; }
.list-delete { margin-top: 1.4rem; }
.list-delete li { position: relative; margin-top: 1rem; padding-left: 1.4rem; color: #999; font-size: 1.2rem; }
.list-delete li::before { content:''; position: absolute; left: 0; top: 6px; width: .9rem; height: .9rem; background: url(../images/icon_delete.png) no-repeat center center; background-size: 100% auto; }

.step-tit { margin-top: 4rem; color: #333; font-size: 1.6rem; font-weight: 500; text-align: center; }
.step-desc { margin-top: .5rem; color: #666; font-size: 1.4rem; text-align: center; }
.step-desc .txt-tag { font-size: 1.2rem; }
.step-desc .txt-tag + .txt-tag { margin-left: 1rem; white-space: nowrap; }
.etf-wrap { margin-top: 2rem;}
.etf-wrap .etf-cont:disabled { filter: grayscale(.8); }
.etf-wrap .etf-cont:disabled::after {
	content:'';
	display: block;
	width: 100%; height: 100%;
	background: rgba(0,0,0, .2);
	position: absolute; 
	left: 0; top: 0;
}
.etf-wrap .etf-cont { position: relative; width: 100%; padding: 1.4rem 2.9rem 1.4rem 8rem; border-radius: .5rem; border: 1px solid #999; text-align: left; }
.etf-wrap .etf-cont .tit { width: auto; color: #333; font-size: 1.4rem; font-weight: 500; }
.etf-wrap .etf-cont .desc { color: #666; font-size: 1.2rem; }
.etf-wrap .etf-cont .txt-r { flex: 1; }
.etf-wrap .etf-cont ~ .etf-cont { margin-top: 1.7rem; }
.etf-wrap .etf-cont::before { content:''; position: absolute; left: 2rem; top: 2rem; width: 4rem; height: 4rem; }
.etf-wrap .etf-cont.krw::before { background: url(../images/robo/icon_krw.png) no-repeat center center; background-size: 100% auto; }
.etf-wrap .etf-cont.dollar::before { background: url(../images/robo/icon_doller.png) no-repeat center center; background-size: 100% auto; }

.etf-wrap .etf-cont.on { border: 2px solid #181949; }
.etf-wrap .etf-cont.on.krw::before { background: url(../images/robo/icon_krw_on.png) no-repeat center center; background-size: 100% auto; }
.etf-wrap .etf-cont.on.dollar::before { background: url(../images/robo/icon_doller_on.png) no-repeat center center; background-size: 100% auto; }

.etf-wrap.type2 .etf-cont { margin-top: 1.5rem; padding: 1.5rem 1.5rem 1.2rem 5rem; letter-spacing: -.07rem; }
.etf-wrap.type2 .etf-cont:first-child { margin-top: 0; }
.etf-wrap.type2 .etf-cont::before { left: 1.5rem; top: 1.2rem; width: 2.8rem; height: 2.8rem; background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%; }
.etf-wrap .etf-cont.etf-ko::before { background-image: url(../images/robo/icon-korea-etf.png) }
.etf-wrap .etf-cont.etf-overseas::before { background-image: url(../images/robo/icon-overseas-etf.png) }
.etf-wrap .etf-cont.etf-global::before { background-image: url(../images/robo/icon-global-etf.png) }
.etf-wrap .txt-tag { display: inline-block; border-radius: 3rem; height:2.2rem; line-height: 2.2rem; padding: 0 .8rem; background-color: #f5f5f5; font-size: 1rem; color: var(--text-color-01); }
.etf-wrap .txt-tag  + .txt-tag { margin-left: .6rem; }
.step-tit-ptf { margin-top: 2rem; font-size: 1.4rem; font-weight: 500; text-align: center; }
@media (max-width: 340px) { 
    .etf-wrap.type2 .etf-cont .tit,
    .etf-wrap .etf-cont .desc { letter-spacing: -.1rem; }
}
@media (max-width: 330px) { 
    .etf-wrap.type2 .etf-cont { padding: 1.5rem 1rem 1.2rem 4.2rem; }
    .etf-wrap.type2 .etf-cont::before { left: 1.2rem; width: 2.4rem; height: 2.4rem; }
}

/* loading */
.loding-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 70%; background-color: rgba(255,255,255,.5); z-index: 10000; }
.loding-wrap .loding { width: 4.83rem; height: 5rem; background: url(../images/loading.png) no-repeat center center; background-size: 100% auto; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
.loding-wrap .loding.rotating { -webkit-animation: spin 1s linear infinite; -o-animation: spin 1s linear infinite; animation:spin 1s linear infinite reverse; }
.loding-wrap .load-text { margin-top: 1.5rem; color: #333; font-size: 1.4rem; text-align: center; }
.loding-wrap .load-text strong { margin-bottom: .5rem; color: #212266; font-weight: 700; vertical-align: middle; }

/* 달성가능성 */
.attain-tit { margin-top: 4rem; color: #333; font-size: 1.8rem; font-weight: 500; text-align: center; }
.attain-desc { margin-top: 1rem; color: #666; font-size: 1.4rem; text-align: center; }
.attain-graph-wrap { display: flex; justify-content: center; align-items: center; margin: 3rem 0 1rem; }
.attain-graph-wrap .circle-chart { display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; position: relative; width: 23.33rem; height: 23.33rem; text-align: center; 
    /*border: 1.33rem solid transparent; border-radius: 50%;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #e22d72, #f096b8);
    background-origin: border-box;
    background-clip: content-box, border-box;*/
}
.attain-graph-wrap .circle-chart .txt-cont { z-index: 1;}
.attain-graph-wrap .circle-chart .txt-cont .extra { display: inline-block; height: 1.6rem; padding: 0 .7rem; border-radius: .8rem; background-color: #b43a6b; color: #fff; font-size: 1rem; line-height: 1.6rem; }
.attain-graph-wrap .circle-chart .txt-cont .tit { margin: 1rem 0 1.4rem; color: #333; font-family: var(--font-family-number); font-size: 3rem; font-weight: 700; }
.attain-graph-wrap .circle-chart .txt-cont .tit-desc { color: #333; font-size: 1.4rem; font-weight: 500; }
.attain-graph-wrap .circle-chart::after { content:''; position: absolute; left: 0; top: 0; width: 23.33rem; height: 23.33rem; background: url(../images/robo/circle_0.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per10::after { background: url(../images/robo/circle_10.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per20::after { background: url(../images/robo/circle_20.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per30::after { background: url(../images/robo/circle_30.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per40::after { background: url(../images/robo/circle_40.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per50::after { background: url(../images/robo/circle_50.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per60::after { background: url(../images/robo/circle_60.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per70::after { background: url(../images/robo/circle_70.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per80::after { background: url(../images/robo/circle_80.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per90::after { background: url(../images/robo/circle_90.png) no-repeat center center; background-size: 100% auto; }
.attain-graph-wrap .circle-chart.per100::after { background: url(../images/robo/circle_100.png) no-repeat center center; background-size: 100% auto; }

.attain-wrap { display: flex; justify-content: center; align-items: center; margin: 3rem 0 1rem; }
.attain-wrap .circle-chart { display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; width: 23.3rem; height: 23.3rem; text-align: center; 
    border: 1.33rem solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #e22d72, #f096b8);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.attain-wrap .circle-chart .extra { height: 1.6rem; padding: 0 1rem; border-radius: .8rem; background-color: #b43a6b; color: #fff; font-size: 1rem; line-height: 1.6rem; }
.attain-wrap .circle-chart .tit { margin: .9rem 0 1.4rem; color: #333; font-family: var(--font-family-number); font-size: 3rem; font-weight: 700; }
.attain-wrap .circle-chart .tit-desc { color: #333; font-size: 1.4rem; font-weight: 500; }

.tip-wrap { position: relative; margin-bottom: .5rem; padding-left: 2.1rem; color: #333; font-size: 1.4rem; }
.tip-wrap .tip { font-family: var(--font-family-number); font-weight: 500; }
.tip-wrap::before { content:''; position: absolute; left: 0; top: 2px; width: 1.5rem; height: 1.5rem; background: url(../images/icon_tip.png) no-repeat center center; background-size: 100% auto; }

/* 포트폴리오 */
.port-title { padding: .7rem 0 1.7rem; color: #333; font-size: 1.6rem; font-weight: 700; border-bottom: 1px solid #ddd; }
.port-graph-wrap { display: flex; justify-content: space-between; margin: 2rem 0; }
.port-graph-wrap .graph { width: 20%; }
.port-graph-wrap .graph .indicate { width: 2.03rem; height: 2.5rem; margin: 0 auto; }
.port-graph-wrap .graph .graph-line { height: .6rem; margin: .6rem 0; }
.port-graph-wrap .graph .text { color: #333; font-size: 1rem; font-weight: 500; text-align: center; }
.port-graph-wrap .graph:first-child .graph-line { border-top-left-radius: .3rem; border-bottom-left-radius: .3rem; }
.port-graph-wrap .graph:last-child .graph-line { border-top-right-radius: .3rem; border-bottom-right-radius: .3rem; }
.port-graph-wrap .graph.type1 .indicate.on { background: url(../images/robo/graph_indi01.png) no-repeat center center; background-size: 100% auto; }
.port-graph-wrap .graph.type2 .indicate.on { background: url(../images/robo/graph_indi01.png) no-repeat center center; background-size: 100% auto; }
.port-graph-wrap .graph.type3 .indicate.on { background: url(../images/robo/graph_indi04.png) no-repeat center center; background-size: 100% auto; }
.port-graph-wrap .graph.type4 .indicate.on { background: url(../images/robo/graph_indi02.png) no-repeat center center; background-size: 100% auto; }
.port-graph-wrap .graph.type5 .indicate.on { background: url(../images/robo/graph_indi02.png) no-repeat center center; background-size: 100% auto; }
.port-graph-wrap .graph.type6 .indicate.on { background: url(../images/robo/graph_indi03.png) no-repeat center center; background-size: 100% auto; }
.port-graph-wrap .graph.type1 .graph-line { background-color: #e54c2b; }
.port-graph-wrap .graph.type2 .graph-line { background-color: #e54c2b; }
.port-graph-wrap .graph.type3 .graph-line { background-color: #ff8433; }
.port-graph-wrap .graph.type4 .graph-line { background-color: #ffc500; }
.port-graph-wrap .graph.type5 .graph-line { background-color: #ffc500; }
.port-graph-wrap .graph.type6 .graph-line { background-color: #a4ce50; }

.port-title-sub { padding: 3rem 0 1rem; color: #333; font-size: 1.4rem; font-weight: 700; }
.port-graph-wrap2 { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 2rem; border-radius: .5rem; background-color: #fafafa; }
.port-graph-wrap2 .graph-desc { padding-left: 4rem; }
.port-graph-wrap2 .graph-desc dl { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; color: #999; font-size: 1.2rem; line-height: 1.7; }
.port-graph-wrap2 .graph-desc dl dt { position: relative; width: 70%; padding-left: 1.5rem; }
.port-graph-wrap2 .graph-desc dl dt > span { position: absolute; left: 0; top: 5px; width: 1rem; height: 1rem; border-radius: .1rem; }
.port-graph-wrap2 .graph-desc dl dd { width: 30%; font-weight: 700; text-align: right; }

.graph-yield { margin-top: 1rem; }
.graph-yield ul ~ ul { margin-top: .6rem; }
.graph-yield ul { display: flex; justify-content: space-between; width: 100%; height: 2rem; border-radius: .5rem; background-color: #f5f5f5; }
.graph-yield ul li { position: relative; }
.graph-yield ul li.tit-term { width: 14%; background-color: #eee; color: #666; font-size: 1rem; text-align: center; }
.graph-yield ul li > span { display: inline-block; height: 2rem; }
.graph-yield ul li > em { display: inline-block; position: absolute; font-family: var(--font-family-number); color: #000; font-size: 1.2rem; line-height: 2rem; }
.graph-yield ul li.left-minus { width: 43%; }
.graph-yield ul li.left-minus > span { float: right; border-radius: .5rem 0 0 .5rem; background-color: #8da7ee; }
.graph-yield ul li.left-minus > em { left: .8rem; }
.graph-yield ul li.right-plus { width: 43%; }
.graph-yield ul li.right-plus > span { border-radius: 0 .5rem .5rem 0; background-color: #f096b8; }
.graph-yield ul li.right-plus > em { right: .8rem; }

.graph-row { height: 2rem; border-radius: .3rem; background-color: #f5f5f5; }
.graph-row dl { display: flex; width: 100%; height: 2rem; }
.graph-row dt { width: 32%; padding-left: 1rem; border-radius: .3rem 0 0 .3rem; background-color: #eee; color: #666; font-size: 1rem; line-height: 2rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-row dd { display: flex; width: 68%; }
.graph-row dd span { display: inline-block; position: relative; height: 2rem; border-radius: 0 .3rem .3rem 0; background-color: #e22d72; text-align: right; }
.graph-row dd span.st1 { background-color: #e6558c; }
.graph-row dd span.st2 { background-color: #ea7da6; }
.graph-row dd span.st3 { background-color: #eda5c1; }
.graph-row dd span.st4 { background-color: #efb9cd; }
.graph-row dd span.st5 { background-color: #f2d7e1; }
.graph-row dd span em { position: absolute; right: .5rem; font-family: var(--font-family-number); color: #fff; font-size: 1.2rem; line-height: 2rem; }
.graph-row dd em { padding-left: .5rem; font-family: var(--font-family-number); font-size: 1.2rem; line-height: 2rem; }
.graph-row ~ .graph-row { margin-top: .66rem; }
.graph-row-wrap.type dt { width: 15%; }
.graph-row-wrap.type dd { width: 85%; }
.graph-row-wrap.type2 .graph-row { background-color: #f5e9ee; }
.graph-row-wrap.type2 .graph-row dd span { border-radius: .3rem; }
.graph-row-wrap.type2 dt { width: 23%; padding-left: 0; background-color: #f7f7fa; }
.graph-row-wrap.type2 dd { width: 77%; }

.row-graph { display: flex; width: 100%; height: 2rem; text-align: left; }
.row-graph .tit { width: 23%; color: #666; font-size: 1rem; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-graph .graph { width: 77%; }
.row-graph ~ .row-graph { margin-top: .66rem; }

.transfer-wrap { margin-top: 2rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; }
.transfer-cont-wrap { display: none; margin-top: 2rem; background-color: #fafafa; }
.transfer-cont-wrap .header { display: flex; justify-content: space-between; height: 3rem; padding: 0 1.5rem; background-color: #eee; line-height: 3rem; color: #666; font-size: 1.2rem; }
.transfer-cont-wrap .header span:first-child { text-align: left; }
.transfer-cont-wrap .header span:nth-child(2) { text-align: center; }
.transfer-cont-wrap .header span:last-child { text-align: right; }
.transfer-cont-wrap .list-cont { padding: 0 .5rem; }
.transfer-cont-wrap .list-cont li { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #eee; background-color: #fff; color: #333; font-size: 1.4rem; line-height: 1.2; }
.transfer-cont-wrap .list-cont li span { display: inline-block; }
.transfer-cont-wrap .list-cont .tit { width: 20%; padding-left: .5rem; }
.transfer-cont-wrap .list-cont .sub { width: 60%; }
.transfer-cont-wrap .list-cont .rate { width: 20%; padding-right: 1rem; font-family: var(--font-family-number); text-align: right; }
.transfer-cont-wrap .list-cont .fc1 { color: #eb6c9c; }
.transfer-cont-wrap .list-cont .fc2 { color: #f39262; }
.transfer-cont-wrap .list-cont .fc3 { color: #9583c5; }
.transfer-cont-wrap .list-cont .fc4 { color: #6dc98d; }
.transfer-cont-wrap .list-cont .fc5 { color: #eedd1a; }
.transfer-cont-wrap .footer { display: flex; justify-content: space-between; height: 4.5rem; padding: 0 1rem; border-top: 2px solid #333; line-height: 4.5rem; }
.transfer-cont-wrap .footer span:first-child { color: #666; font-size: 1.4rem; }
.transfer-cont-wrap .footer span:last-child { color: #333; font-family: var(--font-family-number); font-size: 1.6rem; font-weight: 700; text-align: right; }

.yield-box { display: flex; flex-direction: column; margin-top: 1.4rem; padding: 1.4rem; border-radius: 0.15rem; background-color: #fcf5f8; color: #333; font-size: 1.2rem; text-align: center; }
.yield-box .top-wrap { display: flex; justify-content: space-between; align-items: center; width: 85%; margin: 0 auto 1.3rem; }
.yield-box .top-wrap .lb-tit { color: #333; font-size: 1rem; font-weight: 700; }
.yield-box .top-wrap .cont-area { width: 73%; padding: .6rem 0 .7rem; border-radius: 0.15rem; background-color: #fff; color: #666; font-size: 1rem; line-height: 1; }
.yield-box .top-wrap .cont-area strong { display: inline-block; margin: 0 .3rem 0 .5rem; color: #333; font-size: 1.6rem; font-weight: 500; }

.port-box { display: flex; justify-content: space-between; padding: 1rem 0; border: 1px solid #ddd; border-radius: .5rem; }
.port-box dl { width: 50%; padding: 0 1rem; }
.port-box dl dt { color: #666; font-size: 1rem; font-weight: 500; }
.port-box dl dd { margin-top: .5rem; color: #333; font-size: 1.4rem; font-weight: 500; text-align: right; }
.port-box dl + dl { border-left: 1px solid #eee;}
.port-box2 { margin-top: 1.6rem; padding: 1.5rem; border: 1px solid #ddd; border-radius: .5rem; }
.port-box2 .title { color: #333; font-size: 1.4rem; }

/* 가입하기 */
.robo-join-header { position: relative; padding: 4rem 0 3rem .8rem; background-color: #f6f8fe; }
.robo-join-header::after { content:''; position: absolute; right: 0; top: 43px; width: 10.4rem; height: 10.4rem; background: url(../images/robo/visual_robo.png) no-repeat center center; background-size: 100% auto; }
.robo-join-header.main::after { content:''; position: absolute; right: 0; top: 45px; width: 12.8rem; height: 12rem; background: url(../images/robo/visual_status.png) no-repeat center center; background-size: 100% auto; }
.robo-join-header.simple::after { content:''; position: absolute; right: 0; top: 3.36rem; width: 12.46rem; height: 11.6rem; background: url(../images/simple/visual_status.png) no-repeat center center; background-size: 100% auto; }
.robo-join-header .title { width: calc(100% - 13rem); color: #181949; font-size: 1.8rem; font-weight: 500; line-height: 1.3; }
.robo-join-header .title-desc { width: calc(100% - 13rem); margin-top: 1rem; color: #333; font-size: 1.2rem; }

.robo-join-header2 { padding: 0 .8rem 3rem; background-color: #f6f8fe; }
.robo-join-header2 .txt-box { width: 100%; padding: 1rem; background-color: #a1a3c9; color: #fff; font-size: 1.4rem; line-height: 1; text-align: center; }
.robo-join-header2 .txt-box strong { color: #212266; font-family: var(--font-family-number); font-weight: 500; }
.robo-join-header2 .txt-box.no { background-color: #eee; color: #999; }
.robo-join-header2 .txt-box.type { display: flex; justify-content: space-between; }
.robo-join-header2 .txt-box.type > span:first-child strong { margin: 0 .2rem; }
.robo-join-header2 .txt-box.type > span:last-child em { font-family: var(--font-family-number); font-weight: 500; }

.portfolio-list { padding: 2rem 0; border-bottom: 1px solid #ddd; }
.portfolio-list:first-child { padding: 0 0 2rem; }
.portfolio-list:last-child { border-bottom: none; }
.portfolio-list .header { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.portfolio-list .header .tit { color: #333; font-size: 1.6rem; font-weight: 500; }
.portfolio-list .header .date { color: #999; font-family: var(--font-family-number); font-size: 1.2rem; }
.portfolio-list .content { padding: 1rem; border-radius: .5rem; background-color: #f7f7fa; }
.portfolio-list .content .extra { margin-bottom: .5rem; }
.portfolio-list .content .extra .grade-flag { margin-right: .5rem; }
.portfolio-list .content .extra .txt { color: #999; font-size: 1rem; }
.portfolio-list .content .extra .line { display: inline-block; width: 1px; height: .8rem; margin: 0 .5rem; background-color: #999; vertical-align: middle; }
.portfolio-list .content .subj { margin-bottom: 1.2rem; color: #333; font-size: 1.4rem; }
.portfolio-list .content .price-wrap dl { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid #ddd; }
.portfolio-list .content .price-wrap .lb-tit { color: #666; font-size: 1.4rem; }
.portfolio-list .content .price-wrap .price { color: #333; font-size: 1.4rem; }
.portfolio-list .content .price-wrap .price strong { font-family: var(--font-family-number); font-size: 1.6rem; font-weight: 500; }
.portfolio-list .btn-wrap { margin-top: 1rem; }
.portfolio-list.blank { display: flex; justify-content: center; align-items: center; position: relative; height: 10rem; padding-top: 4rem; border-radius: .5rem; border: 1px dotted #ddd; background-color: #fafafa; color: #999; font-size: 1.2rem; }
.portfolio-list.blank .ico-add { box-sizing: border-box; display: block; position: absolute; top: 3rem; width: 1.4rem; height: 1.4rem; transform: scale(var(--ggs,1)); }
.portfolio-list.blank .ico-add::after, .portfolio-list.blank .ico-add::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 1.4rem; height: 2px; background: #999; border-radius: 5px; top: .6rem; left: 0; }
.portfolio-list.blank .ico-add::after { width: 2px; height: 1.4rem; top: 0; left: .6rem; }

/* 설계내역 상세보기 */
.detail-header { padding: 2rem 1.4rem; background-color: #a1a3c9; }
.detail-header .name { color: #fff; font-size: 1.6rem; }
.detail-header .goal { margin-top: .8rem; color: #fff; font-size: 1.4rem; }
.detail-header .goal strong { display: inline-block; height: 2.4rem; margin-right: .3rem; padding: 0 .8rem; border-bottom: 1px solid #212266; background-color: #ebebfa; color: #212266; font-size: 1.4rem; font-weight: 500; line-height: 2.4rem; }

.pro-desc .extra { margin-bottom: .5rem; }
.pro-desc .extra .grade-flag { margin-right: .5rem; }
.pro-desc .extra .txt { color: #999; font-size: 1rem; }
.pro-desc .extra .line { position: relative; margin-right: 1rem; }
.pro-desc .extra .line::after { content:''; display: inline-block; position: absolute; right: -6px; top: 0; width: 1px; height: .8rem; background-color: #999; vertical-align: middle; }
.pro-desc .subj { margin-bottom: 1.2rem; color: #333; font-size: 1.6rem; font-weight: 700; }

.visual { display: flex; justify-content: center; align-items: center; width: 12.4rem; height: 12.4rem; margin: 5rem auto 3rem; border-radius: 50%; background-color: #f7f7fa; }
.visual.video::before { content:''; width: 8.8rem; height: 5.5rem; background: url(../images/robo/img_video.png) no-repeat center center; background-size: 100% auto; }
.img-cust { width: 4.13rem; height: 3.9rem; margin: 0 auto 1.7rem; background: url(../images/robo/img_cust.png) no-repeat center center; background-size: 100% auto; }

.custom { display: flex; flex-direction: column; align-items: center; position: relative; margin-top: 10rem; padding-top: 6rem; text-align: center; }
.custom::before { content:''; position: absolute; top: 0; width: 4.13rem; height: 3.9rem; }
.custom.complete::before { background: url(../images/robo/img_cust_com.png) no-repeat center center; background-size: 100% auto; }
.custom.fail::before { background: url(../images/robo/img_cust_fail.png) no-repeat center center; background-size: 100% auto; }
.custom .tit { margin-bottom: 1.2rem; color: #333; font-size: 1.6rem; font-weight: 500; }
.custom .tit-desc { color: #666; font-size: 1.4rem; }

.seal-area { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-self: center; text-align: center; }
.seal-area ul li { font-size: 1.4rem; }
.seal-area ul li ~ li { margin-top: 1.3rem; }
.seal-area ul li:first-child { font-size: 1.2rem; }
.seal-area ul li:last-child > span { position: relative; margin-left: 2rem;}
.seal-area ul li:last-child > span:after { content:''; position: absolute; right: -3rem; top: -.4rem; width: 2.56rem; height: 2.56rem; background: url(../images/robo/seal.png) no-repeat center center; background-size: 100% auto; }
.seal-img { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-self: center; text-align: center; }
.seal-img::after { content:''; display: inline-block; width: 24.6rem; height: 6rem; padding-top: 2rem; background: url(../images/robo/seal_kiwoom.png?20240108) no-repeat center center; background-size: 100% auto; }

.table-title { height: 3.2rem; background-color: #bbbbbb; color: #fffefe; font-size: 1.4rem; font-weight: 700; line-height: 3.0rem; text-align: center; }

/* 포트폴리오 */
.ptfro-tit-wrap { display: flex; justify-content: space-between; margin-bottom: 1.4rem; padding: 0 .3rem; }
.ptfro-tit-wrap .tit { color: #333; font-size: 1.4rem; font-weight: 700; }
.ptfro-tit-wrap .date { color: #999; font-family: var(--font-family-number); font-size: 1.2rem; letter-spacing: 0; }
.ptfro-content { padding: 1rem; border-radius: .5rem; border: 1px solid #f5f5f5; background-color: #fff; }
.ptfro-content .tit-lab { display: inline-block; height: 1.2rem; margin-bottom: .7rem; padding: 0 .5rem; border-radius: .15rem; background-color: #e22d72; color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.2rem; text-align: center; }
.ptfro-content .tit-lab.st1 { background-color: #eb6c9c; }
.ptfro-content .tit-lab.st2 { background-color: #fc8c9a; }
.ptfro-content .tit-lab.st3 { background-color: #ffa3b2; }
.ptfro-content .tit-lab.st4 { background-color: #fcbebf; }
.ptfro-content .title { font-size: 1.4rem; font-weight: 500; }
.ptfro-content .box-wrap { display: flex; width: 100%; height: 9rem; margin-top: 1rem; }
.ptfro-content .box-wrap .box-left { width: 70%; height: 9rem; margin-right: .56rem; padding: 1rem; background-color: #f7f7fa; }
.ptfro-content .box-wrap .box-right { width: 30%; height: 9rem; padding: 1rem 1rem 0; background-color: #f6f8fe; }
.ptfro-content .box-wrap dl { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.ptfro-content .box-wrap dl dt { width: 40%; color: #666; font-size: 1.2rem; }
.ptfro-content .box-wrap dl dd { width: 60%; color: #333; font-size: 1.2rem; text-align: right; }
.ptfro-content .box-wrap dl dd span { font-family: var(--font-family-number); font-weight: 700; }
.ptfro-content .box-wrap dl dd span.minus { color: #2758df; }
.ptfro-content .box-wrap dl dd span.plus { color: #e33779; }
.ptfro-content .box-wrap .box-left dl dt, .ptfro-content .box-wrap .box-left dl dd { height: 2.3rem; line-height: 2.3rem; }
.ptfro-content .box-wrap .box-right { display: flex; flex-direction: column; align-items: center; }
.ptfro-content .box-wrap .box-right .graph { width: 5.1rem; height: 5.1rem; margin-bottom: .3rem; /*border-radius: 50%; border: 12px solid #e22d72;*/ }
.ptfro-content ~ .ptfro-content { margin-top: 1.4rem; }

/* 진단하기 */
.share-box { display: flex; flex-direction: column; margin-top: 1.4rem; padding: 1.4rem; border-radius: 0.15rem; background-color: #fcf5f8; color: #333; font-size: 1.2rem; text-align: center; }
.share-box .txt-cont { display: inline-block; height: 2.9rem; margin: 0 1rem; padding: 0 .7rem; border-radius: 0.15rem; background-color: #fff; color: #212266; font-size: 1.4rem; font-weight: 500; line-height: 2.9rem; }
.share-box div ~ div { margin-top: .7rem; }

.graph-box { display: flex; flex-direction: column; padding: 2rem; border-radius: 0.5rem; background-color: #f6f8fe; color: #333; font-size: 1.2rem; text-align: center; }
.graph-box .txt { margin-top: 1.4rem; }
.graph-box .txt strong { color: #212266; }
.graph-box .txt strong em { font-family: var(--font-family-number); font-weight: 500; }
.graph-box ~ .graph-box { margin-top: 1.5rem; }
.graph-box.gray { background-color: #f7f7fa; }
.graph-box.gray .inbox { display: flex; flex-direction: column; margin-top: 1.5rem; padding: 1rem 1.4rem 1.4rem; border-radius: 0.15rem; background-color: #fff; color: #333; font-size: 1.2rem; text-align: center; }
.graph-box.gray .inbox .txt-cont { display: inline-block; height: 2.9rem; margin-right: .8rem; padding: 0 .7rem; border-radius: 0.15rem; border: 1px solid #ddd; background-color: #fafafa; color: #212266; font-size: 1.4rem; line-height: 2.7rem; vertical-align: middle; }
.graph-box.gray .inbox .txt-cont em { font-family: var(--font-family-number); font-weight: 500; }
.graph-box.white { border: 1px solid #f5f5f5; background-color: #fff; }
.graph-box.white .share-box { margin: 1.5rem 0 0; }
.graph-box dl { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; color: #333; font-size: 1.4rem; line-height: 1.5; }
.graph-box dl dt { width: 40%; text-align: left;}
.graph-box dl dd { width: 60%; text-align: right; }
.graph-box dl dd strong { font-family: var(--font-family-number); font-weight: 700; }
.graph-box dl dd strong.red { color: #e33779; }
.graph-box .inbox { margin-top: 1rem; padding: 1.4rem; border-radius: 0.15rem; background-color: #fff; }
.graph-box .inbox dl { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; color: #666; font-size: 1.2rem; line-height: 1.7; }
.graph-box .inbox dl dt { width: 50%; text-align: left;}
.graph-box .inbox dl dd { width: 50%; text-align: right; }

.yield { margin-top: .2rem; font-family: var(--font-family-number); font-size: 1.2rem; }
.yield .triangle { display: inline-block; width: 0; height: 0; margin-right: .3rem; border-style: solid; border-width: .6rem; }
.yield.up { color: #e22d72; }
.yield.up .triangle { border-color: transparent transparent #e22d72 transparent; vertical-align: .1rem; }
.yield.down { color: #1c4fde; }
.yield.down .triangle { border-color:#1c4fde transparent transparent transparent; vertical-align: -.5rem; }
.yield.left { color: #e22d72; }
.yield.left .triangle { border-color: transparent #e22d72 transparent transparent; vertical-align: -.2rem; }
.yield.right { color: #1c4fde; }
.yield.right .triangle { border-color: transparent transparent transparent #1c4fde; vertical-align: -.2rem; }

.icon-wrap { display: flex; justify-content: center; align-items: center; }
.icon-wrap .arrow-down { width: 2.73rem; height: 1.46rem; margin: 1.4rem 0; background: url(../images/icon_down.png) no-repeat center center; background-size: 100% auto; }

.diagno-wrap { display: flex; justify-content: center; }
.diagno-wrap .inbox { flex: 1; position: relative; width: 49%; height: 15.5rem; border-radius: .5rem; border: 1px solid #ddd; background-color: #fff; color: #666; font-size: 1.2rem; }
.diagno-wrap .inbox .title { height: 3rem; border-radius: .5rem .5rem 0 0; background-color: #696a8b; color: #fff; font-size: 1.4rem; line-height: 2.8rem; text-align: center; }
.diagno-wrap .inbox .cont { padding-top: 5.5rem; text-align: center; }
.diagno-wrap .inbox .cont .strong-red { font-family: var(--font-family-number); font-size: 1.4rem; font-weight: 700; color: #b43a6b; }
.diagno-wrap .inbox .cont button { position: absolute; bottom: 1.4rem; left: 50%; width: 6.5rem; height: 2.4rem; margin-left: -3.25rem; line-height: 2.2rem; }
.diagno-wrap .inbox ~ .inbox { margin-left: 2%; }
.diagno-wrap .inbox .cont::before { content:''; position: absolute; top: 4.3rem; left: 50%; width: 3.6rem; height: 3.6rem; margin-left: -1.8rem; }
.diagno-wrap .inbox .cont.nogood::before { background: url(../images/robo/icon_nogood.png) no-repeat center center; background-size: 100% auto; }
.diagno-wrap .inbox .cont.good::before { background: url(../images/robo/icon_good.png) no-repeat center center; background-size: 100% auto; }
.diagno-wrap .inbox .cont.excellent::before { background: url(../images/robo/icon_excellent.png) no-repeat center center; background-size: 100% auto; }
.diagno-wrap .inbox .cont.report::before { background: url(../images/robo/icon_report.png) no-repeat center center; background-size: 100% auto; }

/* ADVISOR */
.advisor-box { border-radius: .5rem; border: 1px solid #ddd; background-color: #fff; color: #666; font-size: 1.2rem; }
.advisor-box .title { height: 3rem; padding-left: 1rem; border-radius: .5rem .5rem 0 0; background-color: #696a8b; color: #fff; font-size: 1.4rem; line-height: 3rem; }
.advisor-box .content { padding: 0 1rem 0 .5rem; }
.advisor-box ~ .advisor-box { margin-top: 2rem; }
.advisor-box.color1 .title { background-color: #36acc1; }
.advisor-box.color2 .title { background-color: #181949; }
.advisor-cutm { position: relative; padding: 0 9rem 2.3rem 0; font-size: 1.4rem; }
.advisor-cutm:after { content:''; position: absolute; right: 0; top: 1rem; width: 7.4rem; height: 7.16rem; background: url(../images/robo/img_advisor.png) no-repeat center center; background-size: 100% auto; }
.advisor-cutm .tit { color: #333; font-weight: 700; }
.advisor-cutm .desc { margin-top: 1rem; color: #666; }
.advisor-tit { height: 3rem; padding-left: 1rem; background-color: #fafafa; color: #333; font-size: 1.2rem; font-weight: 700; line-height: 3rem; }
.advisor-desc { height: 3rem; padding-left: 1rem; background-color: #fafafa; color: #666; font-size: 1.2rem; line-height: 3rem; }

/* Calendar */
.calendar { padding: 2rem 1rem; }
.calendar table { width: 100%; }
.calendar table > thead > tr > th { color: #333; font-size: 1.2rem; font-weight: 500; }
.calendar table > tbody > tr > td { height: 4.5rem; color: #333; font-family: var(--font-family-number); font-size: 1.6rem; text-align: center; }
.calendar table > tbody > tr > td.off { color: #999; }
.calendar .active { display: inline-block; width: 3rem; height: 3rem; border-radius: 50%; background-color: #212266; color: #fff; line-height: 3rem; }
.calendar.semina { padding: 0; }
.calendar.semina table > thead > tr > th { height: 3rem; border-bottom: 1px solid #ddd; color: #333; font-size: 1.2rem; font-weight: 500; }
.calendar.semina table > tbody > tr > td { height: 2.6rem; color: #333; font-family: var(--font-family-number); font-size: 1.2rem; text-align: center; line-height: 2.6rem; }
.calendar.semina table > tbody > tr.day > td:first-child { color: #b43a6b; }
.calendar.semina table > tbody > tr.day > td:last-child { color: #36acc1; }
.calendar.semina table > tbody > tr.cont > td { height: 3.5rem; padding: 0 .2rem; border-bottom: 1px solid #eee; vertical-align: top; }
.calendar.semina table > tbody > tr.cont > td .box { width: 100%; padding: .26rem .4rem; border-radius: .3rem; color: #fff; font-size: .8rem; line-height: 1; text-align: left; }
.calendar.semina table > tbody > tr.cont > td .online { background-color: #a1a3c9; }
.calendar.semina table > tbody > tr.cont > td .offline { background-color: #212266; }
.calendar-year { display: flex; justify-content: center; height: 2.5rem; }
.calendar-year strong { margin: 0 1.4rem; color: #333; font-family: var(--font-family-number); font-size: 1.6rem; font-weight: 700; line-height: 2.5rem; }
.calendar-year .btn { display: inline-block; width: .53rem; height: .86rem; padding-top: 2.5rem; text-indent: -99999px; }
.calendar-year .btn.prev { background: url(../images/academy/arrow_left_date.png) no-repeat center center; background-size: 100% auto; }
.calendar-year .btn.next { background: url(../images/academy/arrow_right_date.png) no-repeat center center; background-size: 100% auto; }

.exp-semina { margin-top: .8rem; color: #666; font-size: 1.2rem; text-align: right; }
.exp-semina span { display: inline-block; width: 1rem; height: 1rem; margin-right: .3rem; border-radius: .1rem; }
.exp-semina span.offline { background-color: #212266; }
.exp-semina span.online { margin-left: 1.5rem; background-color: #a1a3c9; }
.exp-select { text-align: right; }
.exp-select span { display: inline-block; width: 1rem; height: 1rem; margin-right: .3rem; border-radius: .1rem; }
.exp-select span.on { background-color: #333; }
.exp-select span.off { margin-left: 1rem; background-color: #999; }
.advs-inner { padding: 3rem 1.4rem; }
.advs-inner .tit { margin-bottom: 1rem; color: #666; font-size: 1.4rem; }
.advs-inner .tit2 { margin-bottom: 1.5rem; color: #333; font-size: 1.4rem; font-weight: 700; }
.advs-inner .time-wrap { display: flex; justify-content: space-between; width: 100%; }
.advs-inner .time-wrap ~ .time-wrap { margin-top: .76rem; }
.advs-inner .time-wrap li { display: flex; justify-content: space-between; width: 33.3333%; }
.advs-inner .time-wrap li .btn { width: 100%; margin-right: .7rem; border: 1px solid #eee; font-size: 1.4rem; line-height: 1; }
.advs-inner .time-wrap li .btn.on { color: #fff; border: 0; background-color: #212266; }
.advs-inner .tel-select { display: flex; justify-content: space-between; height: 4.4rem; padding-top: 1.2rem; border-bottom: 1px solid #eee; }
.advs-inner .tel-select:last-child { border-bottom: 0; }
.advs-inner .tel-select span:first-child { font-family: var(--font-family-number); }
.advs-inner .tel-select span:last-child { color: #333; font-size: 1.2rem; }
.advs-inner.topline { border-top: .8rem solid #fafafa; }

/* 운용지시 */
.oper-tit-wrap { display: flex; justify-content: space-between; margin-bottom: 2rem; }
.oper-tit-wrap .title { color: #333; font-size: 1.6rem; font-weight: 700; }
.oper-tit-wrap .btn { height: 2rem; padding: 0 .5rem; line-height: 2rem; letter-spacing: -0.05em; }
.core-title { margin: 3rem 1.4rem 0; color: #333; font-size: 1.4rem; font-weight: 700; }
.oper-tit { color: #333; font-size: 1.4rem; font-weight: 500; }
.oper-stit { margin-top: .2rem; color: #666; font-size: 1.2rem; }
.oper-switch { position: relative; padding: 1.7rem 0 1.7rem 4.5rem; border-bottom: 1px solid #ddd; }
.oper-switch::before { content:''; position: absolute; left: 0; top: 1.5rem; width: 4rem; height: 4rem; }
.oper-switch.gold::before { background: url(../images/robo/icon_gold.png) no-repeat center center; background-size: 100% auto; }
.oper-switch.esg::before { background: url(../images/robo/icon_esg.png) no-repeat center center; background-size: 100% auto; }
.oper-switch.comm::before { background: url(../images/robo/icon_comm.png) no-repeat center center; background-size: 100% auto; }
.oper-switch.untact::before { background: url(../images/robo/icon_untact.png) no-repeat center center; background-size: 100% auto; }
.oper-switch.bio::before { background: url(../images/robo/icon_bio.png) no-repeat center center; background-size: 100% auto; }
.oper-switch.robot::before { background: url(../images/robo/icon_robot.png) no-repeat center center; background-size: 100% auto; }
.oper-switch .btn-switch { width: 100%; }
.oper-switch .btn-switch > span { width: calc(100% - 5rem); }
.oper-switch.last { padding: 1.7rem 0 0 4.5rem; border-bottom: 0; }

.oper-box { margin-top: 3rem; padding: 1rem; border-radius: .5rem; background-color: #f5f5f5; color: #666; font-size: 1.2rem; }
.oper-box .title { position: relative; margin-bottom: 1rem; padding: .1rem 0 1rem 2.7rem; border-bottom: 1px solid #ddd; color: #333; font-size: 1.4rem; font-weight: 500; }
.oper-box .title::before { content:''; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; }
.oper-box .title.gold::before { background:#fff url(../images/robo/icon_gold_s.png) no-repeat center center; background-size: 100% auto; }
.oper-box .title.esg::before { background:#fff url(../images/robo/icon_esg_s.png) no-repeat center center; background-size: 100% auto; }
.oper-box .title.comm::before { background:#fff url(../images/robo/icon_comm_s.png) no-repeat center center; background-size: 100% auto; }
.oper-box .title.untact::before { background:#fff url(../images/robo/icon_untact_s.png) no-repeat center center; background-size: 100% auto; }
.oper-box .title.bio::before { background:#fff url(../images/robo/icon_bio_s.png) no-repeat center center; background-size: 100% auto; }
.oper-box .title.robot::before { background:#fff url(../images/robo/icon_robot_s.png) no-repeat center center; background-size: 100% auto; }
.oper-box.mg { margin: 1.4rem; }
.oper-box .btn-switch { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.core-top-txt { padding: 1.5rem; background-color: #fafafa; color: #666; font-size: 1.2rem; }
.core-crcl-wrap { display: flex; justify-content: center; margin: 2rem 0 3rem; }
.core-crcl-wrap .circle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 11.7rem; height: 11.7rem; border-radius: 50%; background-color: rgba(235,235,250,.7); 
    color: #666; font-size: 1.2rem; text-align: center; }
.core-crcl-wrap .circle .tit { margin-bottom: .3rem; color: #696a8b; font-family: var(--font-family-number); font-size: 1.4rem; font-weight: 700; letter-spacing: 0; }
.core-crcl-wrap .circle.active { color: #fff; background-color: rgba(105,106,139,.7); z-index: 1; }
.core-crcl-wrap .circle.active .tit { color: #fff; }
.core-crcl-wrap .circle ~ .circle { margin-left: -1rem; }

.oper-manage { display: flex; justify-content: space-between; padding: 1.7rem 0; border-bottom: 1px solid #ddd; }
.oper-manage.last { border-bottom: 0; }
.oper-manage > div { width: calc(100% - 6rem); }
.oper-manage .btn-num { display: inline-block; position: relative; right: 1.2rem; height: 2rem; padding: 0 1rem; border-radius: 1rem; background-color: #696a8b; color: #fff; font-size: 1.2rem; line-height: 2rem; }
.oper-manage .btn-num::after {content:''; position: absolute; right: -1.2rem; top: .4rem; width: .6rem; height: 1.2rem; background:#fff url(../images/icon_flick_02.png) no-repeat center center; background-size: 100% auto; }

/* 운용금지종목 */
.oper-txt-box { padding: 1.4rem; border-radius: .5rem; background-color: #f7f7fa; color: #333; font-size: 1.6rem; text-align: center; line-height: 1.3; }
.oper-txt-box strong { color: #212266; font-family: var(--font-family-number); font-weight: 700; }

.pro-cont { display: flex; justify-content: space-between; width: 100%; padding: 1rem 0; border-bottom: 1px solid #ddd; color: #666; font-size: 1rem; }
.pro-cont .date { width: 17%; color: #666; font-family: var(--font-family-number); font-size: 1.2rem; }
.pro-cont .subj { width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-cont .subj strong { display: block; color: #333; font-size: 1.4rem; font-weight: 500; }
.pro-cont .btn { width: 15%; }
.pro-cont2 { display: flex; justify-content: space-between; width: 100%; height: 4.1rem; border-bottom: 1px solid #ddd; }
.pro-cont2 .subj { width: 85%; color: #666; font-size: 1rem; line-height: 4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-cont2 .subj strong { display: inline-block; margin-right: 1.4rem; color: #333; font-size: 1.4rem; font-weight: 500; }
.pro-cont2 .btn { width: 15%; height: 3rem; margin-top: .56rem; line-height: 2.8rem; }
.pro-cont2:last-child { border-bottom: 0; }

.pad-search { padding: 2rem 1.4rem; }
.pad-oper { padding: 2rem 1.4rem 0; background-color: #fff; }
.pad-oper2 { padding: .1rem 1.4rem 2rem; background-color: #fff; }

.add-area { display: flex; justify-content: center; align-items: center; position: relative; height: 6.4rem; margin-top: 1.4rem; padding-top: 2.5rem; border-radius: .5rem; border: 1px dotted #ddd; background-color: #fafafa; color: #999; font-size: 1.2rem; }
.add-area .ico-add { box-sizing: border-box; display: block; position: absolute; top: 1.5rem; width: 1.4rem; height: 1.4rem; transform: scale(var(--ggs,1)); }
.add-area .ico-add::after, .add-area .ico-add::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 1.4rem; height: 2px; background: #999; border-radius: 5px; top: .6rem; left: 0; }
.add-area .ico-add::after { width: 2px; height: 1.4rem; top: 0; left: .6rem; }

/* 구독형 로보 포트폴리오 */
.efb-main-header { padding: 1.8rem 0 1.5rem; background-color: #f7f7fa; text-align: center; }
.efb-main-header .title { color: #666; font-size: 1.4rem; }
.efb-main-header .title-desc { margin-top: .5rem; color: #bd527e; font-size: 1.2rem; }
.efb-main-header .link-type { display: inline-block; position: relative; border-bottom: 1px solid #181949; color: #181949; font-size: 1.4rem; font-weight: 700; }
.efb-main-header .link-type::after { content: ""; position: absolute; right: 0; top: 0; padding-bottom: .5rem; border-bottom: 1px solid #181949; }
.efb-main-header .link-type .arrow .triangle { margin-left: .3rem; border-color:#181949 transparent transparent transparent; vertical-align: -.5rem; }
.efb-main-header .link-type.off { border-bottom: 0; }
.efb-main-header .link-type.off .arrow .triangle { margin-left: .3rem; border-color:#999 transparent transparent transparent; vertical-align: -.5rem; }

.icn-face { display: inline-block; width: 2rem; height: 2rem; margin: 0 .5rem 0 .7rem; vertical-align: -.5rem; background: url(../images/port/icon_face_type.png) no-repeat center center; background-size: 100% auto; }
.icn-face.type1 { background: url(../images/port/icon_face_type1.png) no-repeat center center; background-size: 100% auto; }
.icn-face.type2 { background: url(../images/port/icon_face_type2.png) no-repeat center center; background-size: 100% auto; }
.icn-face.type3 { background: url(../images/port/icon_face_type3.png) no-repeat center center; background-size: 100% auto; }

.efb-tit-wrap { display: flex; justify-content: space-between; margin-top: 1rem; }
.efb-tit-wrap .title { color: #333; font-size: 1.4rem; font-weight: 700; }
.efb-tit-wrap .btn-form-group { width: 7.2rem; margin-left: 1rem; }
.efb-tit-wrap .btn-form-group .btn-check input[type="radio"] + label { height: 2rem; line-height: 1.9rem; }
.efb-date { color: #999; font-size: 1rem; text-align: right; letter-spacing: 0; }

/* Range Style */
.range-style { margin-top: 1.6rem; padding: 0 .8rem 2rem; }
.range-style .slider-range-wrap { width: 95%; margin: 0; padding: 0; }

.arrow_box { display: inline-block; position: relative; width: 5rem; height: 2rem; margin-bottom: .53rem; border: 1px solid #999; border-radius: .3rem; background: #fff; color: #999; font-size: 1.2rem; line-height: 2rem; text-align: center; }
.arrow_box::after { content: ""; position: absolute; top: 1.8rem; left: 50%; width: .4rem; height: .26rem; margin-left: -.2rem; z-index: 1; background: url(../images/bg_arrow.png) no-repeat center center; background-size: 100% auto; }
.arrow_box.pos1 { left: 0%; }
.arrow_box.pos1::after { left: 20%; }
.arrow_box.pos2 { left: 25%; margin-left: -1.7rem; }
.arrow_box.pos3 { left: 50%; margin-left: -1.7rem; }
.arrow_box.pos4 { left: 75%; margin-left: -1.7rem; }
.arrow_box.pos5 { left: 100%; margin-left: -2.5rem; }
.arrow_box.pos5::after { left: 70%; }

.range-style .ui-slider { height: 2rem; margin-top: 0; padding-top: 0; }
.range-style .ui-slider-range-rud { position: absolute; top: 0; width: 106%; height: 2rem; z-index: 1; }
.range-style .ui-slider-range-rud span { display: inline-block; position: absolute; top: .7rem; width: .6rem; height: .6rem; border-radius: 50%; background-color: rgba(245,245,245,.4); }
.range-style .ui-slider-range-rud span:nth-child(1) { left: 2%; }
.range-style .ui-slider-range-rud span:nth-child(2) { left: 25%; }
.range-style .ui-slider-range-rud span:nth-child(3) { left: 49%; }
.range-style .ui-slider-range-rud span:nth-child(4) { left: 73%; }
.range-style .ui-slider-range-rud span:nth-child(5) { left: 96%; }
.range-style .ui-slider-range { position: relative; width: 106%; height: 2rem; background: url(../images/port/range_bar.png) no-repeat center center; background-size: 100% auto; z-index: 0; }
.range-style .ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min { background: transparent; }
.range-style .ui-slider-handle { position: absolute; top: 0; z-index: 2; width: 1.83rem; height: 1.83rem; margin-top: .05rem; cursor: default; -ms-touch-action: none; touch-action: none; 
    border-radius: 50%; background-color: #fff; box-shadow: 0 0 10px 3px rgba(0, 0, 0,.22); }
.range-style .slider-txt { display: flex; justify-content: space-between; width: 106%; margin-top: .5rem; }
.range-style .slider-txt span { color: #999; font-size: 1rem; text-align: center; }
.range-style .slider-txt span:first-child { left: 0; }
.range-style .slider-txt span:nth-child(2) { left: 50%; margin-left: -.5rem; }
.range-style .slider-txt span:last-child { left: 100%; margin-left: -1rem; text-align: right; }

.range-risk-box { margin-top: 2rem; padding: 1.4rem 1rem; border-radius: .5rem; background-color: #fcf5f8; }
.range-risk-box .txt-box { padding: 1rem; background-color: #fff; color: #666; font-size: 1.4rem; text-align: center; }
.range-risk-box .txt-box strong { margin-right: .2rem; color: #212266; font-weight: 500; }
.range-risk-box .slider-circle-wrap { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 3rem; }
.range-risk-box .slider-circle-wrap .circle { display: flex; justify-content: center; align-items: center; width: 6rem; height: 6rem; border-radius: 50%; background-color: rgba(228,163,190,1); 
    color: #fff; font-size: 1.2rem; font-weight: 700; text-align: center; letter-spacing: 0; }
.range-risk-box .slider-circle-wrap .circle:nth-child(2) { background-color: rgba(228,163,190,.4); }
.range-risk-box .slider-circle-wrap .circle.small { width: 4.7rem; height: 4.7rem; line-height: 1.3; }
.range-risk-box .slider-circle-wrap .circle.large { width: 7rem; height: 7rem; }
.range-risk-box .slider-range-wrap { margin-top: .5rem; padding: 0 3.5rem 0 2.3rem; }
.range-risk-box .ui-slider { margin-top: 0; }
.range-risk-box .ui-slider-range { height: .23rem; background: #212266; }
.range-risk-box .slider-txt { padding: 0 1rem; }
.range-risk-box .slider-txt ul { display: flex; justify-content: space-between; }
.range-risk-box .slider-txt ul li { color: #666; font-weight: 500; font-size: 1rem; text-align: center; line-height: 1.5; }

.range-box { margin-top: 1.2rem; padding: 2rem .7rem; border-radius: .5rem; background-color: #f7f7fa; }
.range-box .range-area { display: flex; height: 2.4rem; }
.range-box .range-area span:first-child { border-radius: .5rem 0 0 .5rem; }
.range-box .range-area span:last-child { border-radius: 0 .5rem .5rem 0; }
.range-box .range-area .st1 { background-color: #e22d72; }
.range-box .range-area .st2 { background-color: #fc8c9a; }
.range-box .range-area .st3 { background-color: #ffcc40; }
.range-box .range-area .st4 { background-color: #6dc98d; }
.range-box .range-area .st5 { background-color: #9583c5; }
.range-box .range-label { display: flex; flex-wrap: wrap; /*margin-top: .4rem;*/ margin-top: .7rem; }
.range-box .range-label .tit-lb { flex: 1 1 33.3333%; position: relative; /*padding: .3rem 0 0 1.5rem;*/ padding-left: 1.5rem; color: #666; font-size: 1.2rem; }
.range-box .range-label .tit-lb::before { content: ""; position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; border-radius: .2rem; }
.range-box .range-label .tit-lb.st1 { color: #e22d72; }
.range-box .range-label .tit-lb.st1::before { background-color: #e22d72; }
.range-box .range-label .tit-lb.st2 { color: #fc8c9a; }
.range-box .range-label .tit-lb.st2::before { background-color: #fc8c9a; }
.range-box .range-label .tit-lb.st3 { color: #ffcc40; }
.range-box .range-label .tit-lb.st3::before { background-color: #ffcc40; }
.range-box .range-label .tit-lb.st4 { color: #6dc98d; }
.range-box .range-label .tit-lb.st4::before { background-color: #6dc98d; }
.range-box .range-label .tit-lb.st5 { color: #9583c5; }
.range-box .range-label .tit-lb.st5::before { background-color: #9583c5; }
.range-box .slider-row { display: flex; margin-top: 1rem; }
.range-box .slider-row .tit-lb { position: relative; width: 22%; padding: .3rem 0 0 1.5rem; color: #666; font-size: 1.2rem; }
.range-box .slider-row .tit-lb::before { content: ""; position: absolute; left: 0; top: 8px; width: 1rem; height: 1rem; border-radius: .2rem; }
.range-box .slider-row .tit-lb.st1::before { background-color: #e22d72; }
.range-box .slider-row .tit-lb.st2::before { background-color: #fc8c9a; }
.range-box .slider-row .tit-lb.st3::before { background-color: #ffcc40; }
.range-box .slider-row .slider-range-wrap { width: calc(78% - 5rem); padding: 0; }
.range-box .slider-row .slider-range-wrap .ui-slider { margin-top: 0; }
.range-box .numper { display: inline-block; width: 4.4rem; height: 2rem; margin: .3rem 0 0 .6rem; padding: 0 .5rem; border: 1px solid #ddd; border-radius: .2rem; background-color: #fafafa; color: #666; font-family: var(--font-family-number); font-size: 1.2rem; font-weight: 500; line-height: 2rem; text-align: center; }
.range-box .total { display: flex; justify-content: flex-end; margin-top: 1rem; color: #333; font-size: 1.2rem; }
.range-box .total .numper { color: #333; }
.range-box .total em { padding-top: .3rem; }
.range-box .btm-price { display: flex; justify-content: center; align-items: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #ddd; }
.range-box .btm-price .tit-lb { margin-right: .6rem; color: #333; font-size: 1rem; font-weight: 700; }
.range-box .btm-price .input-area { width: 40%; height: 2.9em; }
.range-box .btm-price .input-area .input-price { padding: 0 1.4rem 0 .8rem; border: 0; background-color: #fff; font-size: 1.6rem !important; font-weight: 500; }
.range-box .btm-price .input-area em { position: absolute; right: .3rem; color: #666; font-size: 1rem; }

/* 유의사항 */
.notice-box { padding: 1.4rem 0 0; border-radius: .5rem; background-color: #f7f7fa; }
.notice-box .header { position: relative; margin: 0 1rem; padding: 0 0 1rem 2rem; border-bottom: 1px solid #ddd; color: #333; font-size: 1.4rem; font-weight: 500; }
.notice-box .header:before { content: ''; position: absolute; left: 0; top: 2px; width: 1.4rem; height: 1.4rem; background: url(../images/icon_info_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.notice-box ol { margin: 1rem; }
.notice-box ol li { margin-top: .5rem; color: #666; font-size: 1.4rem; }
.notice-box .footer { display: flex; justify-content: center; align-items: center; position: relative; height: 5rem; margin-top: 2.6rem; border-radius: 0 0 .5rem .5rem; background-color: #212266; }
.notice-box .footer .link-service { position: relative; padding-right: 1.1rem; color: #fefefe; font-size: 1.2rem; font-weight: 500; }
.notice-box .footer .link-service::after { content: ''; position: absolute; right: 0; top: 5px; width: .6rem; height: 1rem; background: url(../images/arrow_right_white.png) no-repeat 50% 50%; background-size: 100% auto; }
.notice-box .footer .extra { display: inline-block; position: absolute; top: -1rem; left: 1rem; height: 2rem; padding: 0 1rem 0 2.8rem; border-radius: 1rem; background-color: #696a8b; color: #fefefe; font-size: 1.2rem; line-height: 2rem; }
.notice-box .footer .extra:before { content: ''; position: absolute; left: 8px; top: 3px; width: 1.36rem; height: 1.36rem; background: url(../images/icon_tip_white.png) no-repeat 50% 50%; background-size: 100% auto; }

/* 투자정보확인서 */
.invest-infor { padding: 1.5rem 1.4rem; background-color: #f6f8fe; color: #666; font-size: 1.2rem; }
.invest-infor strong { display: block; margin-top: .5rem; color: #333; font-size: 1.4rem; font-weight: 500; }
.invest-infor .grade-area { margin-top: 1.6rem; padding: 1rem; border-radius: .5rem; background-color: #fff; color: #333; font-size: 1rem; font-weight: 700; }
.invest-infor .grade-area .grade { display: flex; justify-content: center; align-items: center; }
.invest-infor .grade-area .grade .icn-face:first-child { margin-left: 1.5rem; }
.invest-infor .grade-area .grade .icn-face { width: 2rem; height: 2rem; background: url(../images/icon_face_type1.png) no-repeat 50% 50%; background-size: 100% auto; }
.invest-infor .grade-area .grade .icn-face.st1 { background: url(../images/icon_face_type2.png) no-repeat 50% 50%; background-size: 100% auto; }
.invest-infor .grade-area .grade .icn-face.st2 { background: url(../images/icon_face_type3.png) no-repeat 50% 50%; background-size: 100% auto; }
.invest-infor .grade-area .btn-area { display: flex; justify-content: center; align-items: center; margin-top: .86rem; }
.invest-infor .grade-area .btn-area .btn { height: 2.5rem; border: 1px solid #ddd; background-color: #fafafa; color: #212266; font-size: 1.4rem; font-weight: 500; line-height: 2.3rem; }

.infor-title { width: 100%; height: 3rem; padding-left: 1.4rem; background-color: #fafafa; color: #666; font-family: var(--font-family-number); font-size: 1.2rem; font-weight: 700; line-height: 2.8rem; }
.infor-btn { display: flex; flex-wrap: wrap; }
.infor-btn .btn { margin: .3rem; background-color: #fff; }
.infor-btn .btn.on { border: 1px solid #28295f; color: #181949; }
.infor-btn.type1 .btn { flex: 1 1 31.5%; }
.infor-btn.type2 .btn { flex: 1 1 48%; }
.infor-btn.type3 .btn { flex: 1 1 23%; }
.infor-check { display: flex; flex-direction: column; }
.infor-check .input-check { margin-top: 1.4rem; }
.infor-check .input-check input[type="checkbox"] + label { color: #666; font-size: 1.2rem; }
.result-txt-box { margin-top: 1.4rem; padding: 1rem 1.5rem; border-radius: .5rem; background-color: #f7f7fa; color: #696a8b; font-size: 1.2rem; text-align: center; }
.accordian-info dt { margin-top: 1rem; color: #333; font-size: 1.2rem; font-weight: 500; }
.accordian-info dd { margin-top: .7rem; color: #666; font-size: 1.2rem; }
.accordian-info dt:first-child { margin-top: 0; }

/* 아카데미 */
.tit-pg-curs { padding: 2rem 0 2.4rem; color: #333; font-size: 1.6rem; text-align: center; }
.course { position: relative; height: 9.1rem; padding: 2.4rem 0 0 8rem; border-radius: .5rem; border: 1px solid #999;}
.course .tit { color: #333; font-size: 1.4rem; font-weight: 500; }
.course .tit-desc { margin-top: .3rem; color: #666; font-size: 1.2rem; }
.course .extra { position: absolute; right: 0; top: .4rem; height: 1.6rem; padding: 0 .5rem; border-radius: .8rem 0 0 .8rem; background-color: #a1a3c9; color: #fff; font-size: 1rem; line-height: 1.6rem; }
.course .extra strong { font-family: var(--font-family-number); font-weight: 500; }
.course:after { content: ''; position: absolute; left: 2rem; top: 2rem; width: 4.2rem; height: 5.06rem; }
.course.rank1:after { background: url(../images/academy/img_curs01.png) no-repeat 50% 50%; background-size: 100% auto; }
.course.rank2:after { background: url(../images/academy/img_curs02.png) no-repeat 50% 50%; background-size: 100% auto; }
.course.rank3:after { background: url(../images/academy/img_curs03.png) no-repeat 50% 50%; background-size: 100% auto; }
.course.on { border: 2px solid #181949; }
.course ~ .course { margin-top: 1.6rem; }

.lesson-wrap { display: flex; }
.lesson-wrap .lesson-cont { width: 100%; }
.lesson-wrap .lesson-cont.pd { padding: 2rem 1.4rem 0; }
.lesson-wrap .lesson-cont .text-hide { white-space: nowrap; height: 0; overflow: hidden; }

/* 초보자 코스 */
.acdemy-head-desc { display: flex; justify-content: space-between; height: 4.4rem; padding: .46rem 1.4rem; background-color: #fafafa; color: #666; font-size: 1.4rem; line-height: 3.4rem; }
.acdemy-head-desc .txt { width: calc(100% - 4rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acdemy-head-desc .icn-book { display: inline-block; width: 1.3rem; height: 1.6rem; padding-top: 3.5rem; background: url(../images/academy/icon_book.png) no-repeat 50% 50%; background-size: 100% auto; }
.acdemy-head-desc .icn-book.on { display: inline-block; width: 1.3rem; height: 1.6rem; padding-top: 3.5rem; background: url(../images/academy/icon_bookon.png) no-repeat 50% 50%; background-size: 100% auto; }
.top-graph { display: flex; justify-content: center; align-items: center; }
.top-graph .circle-chart { display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; position: relative; width: 3.53rem; height: 3.53rem; text-align: center; }
.top-graph .circle-chart .txt-cont { color: #333; font-family: var(--font-family-number); font-weight: 700; font-size: 1rem; z-index: 1; }
.top-graph .circle-chart::after { content:''; position: absolute; left: 0; top: 0; width: 3.53rem; height: 3.53rem; background: url(../images/robo/circle_100.png) no-repeat center center; background-size: 100% auto; }

.level-tit-area { display: flex; justify-content: center; padding: 1rem 0; }
.level-tit-area .tit { height: 1.8rem; padding: 0 .7rem; border-radius: .9rem; background-color: #a1a3c9; color: #fff; font-family: var(--font-family-number); font-size: 1.2rem; font-weight: 500; text-align: center; line-height: 1.8rem; }
.level-tit-area .tit.on { background-color: #696a8b; }
.level-wrap { position: relative; }
.level-wrap::before { content: ""; position: absolute; left: 1rem; top: 5%; width: 1rem; height: 90%; border-left: 1px solid #ced0e4; }
.level-wrap .level { position: relative; padding-left: 2.7rem; }
.level-wrap .level .tit { color: #999; font-family: var(--font-family-number); font-size: 1.2rem; font-weight: 500; letter-spacing: 0; }
.level-wrap .level .desc { color: #999; font-size: 1.4rem; }
.level-wrap .level.on .tit { color: #212266; }
.level-wrap .level.on .desc { color: #333; }
.level-wrap .level::after { content: ""; position: absolute; left: 0; top: 1.7rem; width: 2rem; height: 2rem; }
.level-wrap .level.chart::after { background: url(../images/academy/icon_level_chart.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.chart.on::after { background: url(../images/academy/icon_level_chart_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.check::after { background: url(../images/academy/icon_level_check.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.check.on::after { background: url(../images/academy/icon_level_check_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.quest::after { background: url(../images/academy/icon_level_quest.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.quest.on::after { background: url(../images/academy/icon_level_quest_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.tip::after { background: url(../images/academy/icon_level_tip.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.tip.on::after { background: url(../images/academy/icon_level_tip_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.write::after { background: url(../images/academy/icon_level_write.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level.write.on::after { background: url(../images/academy/icon_level_write_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level .box { position: relative; padding: .7rem; border-radius: .5rem; border: 2px solid #fff; }
.level-wrap .level .box.active { border: 2px solid #181949; z-index: 0; }
.level-wrap .level .box.active::before { content: ""; position: absolute; left: -4px; top: 23px; width: .26rem; height: .36rem; z-index: 1; background: url(../images/academy/bg_level_arrow.png) no-repeat 50% 50%; background-size: 100% auto; }
.level-wrap .level .box.active::after { content: ""; position: absolute; right: 10px; top: 21px; width: .53rem; height: .86rem; z-index: 1; background: url(../images/icon_arrow_right.png) no-repeat 50% 50%; background-size: 100% auto; }

/* Quick Menu */
.quick-menu { display: flex; justify-content: space-evenly; align-items: center; position: fixed; left: 50%; bottom: 1.5rem; width: 14.8rem; height: 3.6rem; margin-left: -7.4rem; border-radius: 1.8rem; background-color: rgba(51,51,51,.85); z-index: 1; }
.quick-menu .menu1 { width: 1.33rem; height: 1.6rem; background: url(../images/academy/quick_menu_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.quick-menu .menu1.on { width: 1.33rem; height: 1.6rem; background: url(../images/academy/quick_menu_01on.png) no-repeat 50% 50%; background-size: 100% auto; }
.quick-menu .menu2 { width: 1.26rem; height: 1.6rem; background: url(../images/academy/quick_menu_02.png) no-repeat 50% 50%; background-size: 100% auto; }
.quick-menu .menu2.on { width: 1.26rem; height: 1.6rem; background: url(../images/academy/quick_menu_02on.png) no-repeat 50% 50%; background-size: 100% auto; }
.quick-menu .menu3 { width: 1.46rem; height: 1.53rem; background: url(../images/academy/quick_menu_03.png) no-repeat 50% 50%; background-size: 100% auto; }
.quick-menu .menu3.on { width: 1.46rem; height: 1.53rem; background: url(../images/academy/quick_menu_03on.png) no-repeat 50% 50%; background-size: 100% auto; }

/* Lesson */
.result-lesson { display: flex; flex-direction: column; justify-content: center; align-items: center; /*height: 85%;*/ height: 80%; color: #333; font-size: 1.6rem; font-weight: 500; }
.result-lesson::before { content: ""; width: 2.8rem; height: 4.1rem; padding-bottom: 1.9rem; background: url(../images/academy/img_lesson_com.png) no-repeat 50% 50%; background-size: 100% auto; }
.lesson-box { position: relative; padding: .7rem 0 1rem 4.4rem; border-radius: .5rem; border: 2px solid #181949; }
.lesson-box .tit { color: #212266; font-family: var(--font-family-number); font-size: 1.2rem; font-weight: 500; letter-spacing: 0; }
.lesson-box .desc { color: #333; font-size: 1.4rem; }
.lesson-box::before { content: ""; position: absolute; left: 1rem; top: 1.7rem; width: 2rem; height: 2rem; background: url(../images/academy/icon_level_quest_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.lesson-box::after { content: ""; position: absolute; right: 10px; top: 23px; width: .53rem; height: .86rem; z-index: 1; background: url(../images/icon_arrow_right.png) no-repeat 50% 50%; background-size: 100% auto; }
.lesson-box.chart::before { background: url(../images/academy/icon_level_chart_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.lesson-box.write::before { background: url(../images/academy/icon_level_write_on.png) no-repeat 50% 50%; background-size: 100% auto; }

/* Quiz */
.title-quiz { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 2rem 0; color: #333; font-size: 1.6rem; font-weight: 500; }
.title-quiz::before { content: ""; width: 5rem; height: 5rem; padding-bottom: 1.5rem; background: url(../images/academy/icon_quiz.png) no-repeat 50% 50%; background-size: 100% auto; }
.title-quiz.ans::before { background: url(../images/academy/icon_quiz_ans.png) no-repeat 50% 50%; background-size: 100% auto; }
.title-quiz.wrong::before { background: url(../images/academy/icon_quiz_wrong.png) no-repeat 50% 50%; background-size: 100% auto; }
.quiz-txt-box { padding: 2rem; border-radius: .5rem; background-color: #f7f7fa; color: #212266; font-size: 1.4rem; font-weight: 500; text-align: center; }
.quiz-btn-wrap { display: flex; flex-direction: column; margin-top: 4rem; }
.quiz-btn-wrap .btn ~ .btn { margin-top: 1.4rem; }

.chart-wrap { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.chart-wrap .chart-box { display: flex; flex-direction: column; align-items: center; width: 49%; padding: 1.4rem; border-radius: .5rem; border: 2px solid #fff; background-color: #fff; text-align: center; }
.chart-wrap .chart-box .chart { width: 10rem; height: 7rem; margin-bottom: 1rem; background-color: #eee; }
.chart-wrap .chart-box.on { border: 2px solid #28295f; color: #181949; font-weight: 700; }

.icn-wrong-area { display: flex; justify-content: center; align-items: center; padding: 2rem; }
.icn-wrong-area::before { content: ""; width: 5rem; height: 5rem; padding-bottom: 1.5rem; background: url(../images/academy/icon_quiz_wrong.png) no-repeat 50% 50%; background-size: 100% auto; }

/* 북마크 */
.bookmark-wrap { display: flex; justify-content: space-between; margin-top: 2rem; }
.bookmark-wrap .bookmark { width: 49%; border-radius: .5rem; border: 1px solid #e8e8e8; background-color: #fff; font-size: 1rem; }
.bookmark-wrap .bookmark .acdemy-head-desc { height: 2rem; padding: 0 .6rem; }
.bookmark-wrap .bookmark .acdemy-head-desc .txt { width: calc(100% - 1rem); font-size: 1rem; line-height: 2rem; }
.bookmark-wrap .bookmark .acdemy-head-desc .icn-book.on { width: .6rem; height: .76rem; padding-top: 2rem; }
.bookmark-wrap .bookmark .content { padding: .9rem .6rem; }
.book-terms { padding: 0 1.5rem; }
.book-terms .link-page { height: 4rem; border-bottom: 1px solid #ddd; line-height: 4rem;}
.book-terms .link-page::after { top: 1.4rem; }

/* 아카데미 설정 */
.acdm-set-wrap .acdm-set { border-bottom: .8rem solid #fafafa; }
.acdm-set-wrap .acdm-set button { display: flex; justify-content: space-between; position: relative; width: 100%; height: 4.6rem; padding: 0 1.4rem; }
.acdm-set-wrap .acdm-set button span { color: #333; font-size: 1.2rem; line-height: 4.6rem; }
.acdm-set-wrap .acdm-set button i { color: #999; font-size: 1.2rem; line-height: 4.6rem; }
.acdm-set-wrap .acdm-set button i.icon-checked { padding-top: 2.5rem; }
.acdm-set-wrap .acdm-set .link-page { padding: 0 2.4rem 0 1.4rem; }
.acdm-set-wrap .acdm-set .link-page::after { content:''; position: absolute; right: 1.4rem; top: 1.7rem; width: .6rem; height: 1.2rem; background: url(../images/icon_flick_02.png) no-repeat center center; background-size: 100% auto; }
.acdm-set-wrap .acdm-set .graph { padding-right: 4rem; }
.acdm-set-wrap .acdm-set .icn-graph { display: inline-block; position: absolute; top: .5rem; right: 2.5rem; width: 3.5rem; height: 3.5rem; background: url(../images/academy/icon_graph.png) no-repeat 50% 50%; background-size: 100% auto; }

/* 학습과정 변경 */
.graph-course { display: flex; justify-content: space-between; width: 100%; }
.graph-course .tit-lab { color: #e22d72; font-size: 1.4rem; font-weight: 500; }
.graph-course .txt-per { color: #333; font-size: 1.4rem; font-weight: 500; }
.graph-course-bar { height: 1.4rem; margin: .5rem 0 1.4rem; border-radius: .7rem; background-color: #ddd; }
.graph-course-bar .range { display: inline-block; height: 1.4rem; border-radius: .7rem; background-color: #e22d72; }

/* 하루 학습목표량 */
.tit-pg-learn { padding: 2rem 0 2.4rem; color: #333; font-size: 1.6rem; text-align: center; }
.learn-cont { position: relative; height: 8.4rem; padding: 2rem 0 0 8.5rem; border-radius: .5rem; border: 1px solid #999; }
.learn-cont .tit { color: #333; font-size: 1.4rem; font-weight: 500; }
.learn-cont .tit-desc { margin-top: .3rem; color: #666; font-size: 1.2rem; }
.learn-cont ~ .learn-cont { margin-top: 1.6rem; }
.learn-cont:after { content: ''; position: absolute; left: 1.5rem; top: 2rem; width: 5rem; height: 4.3rem; }
.learn-cont.st1:after { background: url(../images/academy/img_learn_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.learn-cont.st2:after { background: url(../images/academy/img_learn_02.png) no-repeat 50% 50%; background-size: 100% auto; }
.learn-cont.st3:after { background: url(../images/academy/img_learn_03.png) no-repeat 50% 50%; background-size: 100% auto; }
.learn-cont.on { border: 2px solid #181949; }

/* 예정된 웹세미나 */
.web-smn-cont { display: flex; align-items: center; position: relative; min-height: 12.7rem; padding: 0 1rem; border-radius: .5rem; border: 1px solid #999; }
.web-smn-cont .txt-cont { width: 100%; }
.web-smn-cont .txt-cont .extra { position: absolute; top: .4rem; right: 0; height: 1.6rem; padding: 0 .6rem; color: #fff; font-size: 1rem; border-radius: .8rem 0 0 .8rem; background-color: #a1a3c9; line-height: 1.6rem; }
.web-smn-cont .txt-cont .extra strong { font-family: var(--font-family-number); font-weight: 500; }
.web-smn-cont .txt-cont .tit { color: #333; font-size: 1.4rem; font-weight: 500; }
.web-smn-cont .txt-cont .tit-desc { margin-top: .2rem; color: #666; font-size: 1.2rem; }
.web-smn-cont .txt-cont .date-info { margin-top: .5rem; padding: .5rem .8rem; border-radius: .5rem; background-color: #f7f7fa; color: #666; font-size: 1rem; }
.web-smn-cont .txt-cont .date-info .time { padding-left: 1rem; }
.web-smn-cont ~ .web-smn-cont { margin-top: 1.6rem; }

/* centerCrop */
.centerCrop { display: flex; align-items: center; position: relative; width: 6.3rem; height: 8.6rem; margin-right: 1.6rem; background: url(../images/academy/photo_blank.png) no-repeat 50% 50%; background-size: 100% auto; 
    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    -webkit-transform: translate(50%,50%); 
    -ms-transform: translate(50%,50%); 
    transform: translate(50%,50%);*/}
.centerCrop img { position: absolute; top: 50%; left: 50%; /*width: auto; height: 100%;*/
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%);
}
.centerCrop.st { background: url(../images/academy/photo_blank2.png) no-repeat 50% 50%; background-size: 100% auto; }
.centerCrop img.portrait { width: 100% !important; height: auto !important;}
.centerCrop img.landscape { width: auto !important; height: 100% !important;}

/* 완료된 웹세미나 */
.web-mov-cont { display: flex; padding: 2rem 0; border-bottom: 1px solid #ddd; }
.web-mov-cont:first-child { padding: 0 0 2rem; }
.web-mov-cont video { width: 12.7rem; height: 7.1rem; margin-right: 1.6rem; }
.web-mov-cont .txt-cont { width: 100%; }
.web-mov-cont .txt-cont .tit { margin-top: -.4rem; color: #333; font-size: 1.4rem; }
.web-mov-cont .txt-cont .tit-desc { height: 4rem; margin-top: .2rem; color: #666; font-size: 1.2rem; }
.web-mov-cont .txt-cont .date-info { display: flex; justify-content: space-between; color: #999; font-size: 1rem; }

/* 오프라인 세미나 */
.offline-cont { position: relative; margin: 1rem 1.1rem; padding: 4.3rem 1rem 2rem; border-radius: .5rem; background-color: #f7f7fa; color: #666; font-size: 1rem; text-align: center; }
.offline-cont .extra { position: absolute; top: 1.4rem; right: 0; height: 1.6rem; padding: 0 .6rem; color: #fff; font-size: 1rem; border-radius: .8rem 0 0 .8rem; background-color: #a1a3c9; line-height: 1.6rem; }
.offline-cont .extra strong { font-family: var(--font-family-number); font-weight: 500; }
.offline-cont .title { color: #333; font-size: 1.6rem; font-weight: 500; }
.offline-cont .desc { margin-top: .5rem; color: #666; font-size: 1.4rem; font-weight: 500; }
.offline-cont .centerCrop { width: 6.3rem; height: 8.6rem; margin: 2rem auto .6rem; }
.offline-cont .location { margin: 1.6rem 0 1.4rem; padding: 1rem; border-radius: .5rem; background-color: #fff; color: #666; text-align: left; }
.offline-cont .location dl { display: flex; flex-wrap: wrap; }
.offline-cont .location dl dt { width: 12%; font-size: 1.2rem; }
.offline-cont .location dl dd { width: 88%; font-size: 1.1rem; }
.offline-cont .location dl dd span { font-size: 1rem; }
.offline-cont .location .lct-link { margin: 1rem 0 0 3.5rem; }
.offline-cont .location .lct-link a { position: relative; margin-right: 3rem; color: #181949; font-size: 1.2rem; }
.offline-cont .location .lct-link a::after { content: ""; position: absolute; right: -10px; top: .5rem; width: .53rem; height: .86rem; background: url(../images/icon_arrow_right.png) no-repeat 50% 50%; background-size: 100% auto; }

/* 세미나 참석신청 */
.smn-cont { display: flex; flex-direction: column; position: relative; padding: 1.6rem 1rem 1.2rem; border-radius: .5rem; background-color: #f7f7fa; }
.smn-cont .extra { position: absolute; top: 1.5rem; right: 0; height: 1.6rem; padding: 0 .6rem; color: #fff; font-size: 1rem; border-radius: .8rem 0 0 .8rem; background-color: #a1a3c9; line-height: 1.6rem; }
.smn-cont .extra strong { font-family: var(--font-family-number); font-weight: 500; }
.smn-cont .lct-info { color: #212266; font-size: 1.4rem; font-weight: 500; }
.smn-cont .photo-info { display: flex; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid #ddd; }
.smn-cont .photo-info .centerCrop { width: 6.3rem; height: 8.6rem; margin-right: 1.6rem; background: url(../images/academy/photo_blank2.png) no-repeat 50% 50%; background-size: 100% auto; }
.smn-cont .photo-info .txt-cont { width: 100%; }
.smn-cont .photo-info .txt-cont .tit { color: #333; font-size: 1.4rem; font-weight: 500; }
.smn-cont .photo-info .txt-cont .tit-desc { color: #666; font-size: 1.2rem; }
.smn-cont .photo-info .txt-cont .name { margin-top: .5rem; padding: .4rem .8rem; border-radius: .5rem; background-color: #fff; color: #666; font-size: 1rem; }

/* 목표설계 */
.target-visual { width: 100%; height: 23.9rem; padding: 4rem .8rem 0; background: url(../images/robo/target_visual.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-visual .title { color: #181949; font-size: 1.8rem; font-weight: 500; line-height: 1.5; }
.target-visual .txt-desc { margin-top: .5rem; color: #333; font-size: 1.2rem; }
.target-visual .btn-add-target { display: flex; justify-content: center; align-items: center; width: 100%; height: 3.6rem; line-height: 3.6rem; margin-top: 2.3rem; border-radius: .5rem; border: 1px solid #ddd; background-color: #fafafa; color: #333; font-size: 1.2rem; cursor: pointer; }
.target-visual .btn-add-target::before { content: ""; width: 1.4rem; height: 1.4rem; margin-right: .6rem; background: url(../images/robo/icon_plus.png) no-repeat 50% 50%; background-size: 100% auto; }
@media (min-width: 341px) and (max-width: 360px) { 
    .target-visual { height: 23rem; }
}
@media (min-width: 321px) and (max-width: 340px) { 
    .target-visual { height: 22rem; padding: 3rem .8rem 0; }
}
@media (min-width: 301px) and (max-width: 320px) { 
    .target-visual { height: 21rem; padding: 2rem .8rem 0; }
}
@media (min-width: 281px) and (max-width: 300px) { 
    .target-visual { height: 20rem; padding: 2rem .8rem 0; }
}
@media (max-width: 280px) { 
    .target-visual { height: 18.6rem; padding: 1rem .8rem 0; }
}
.target-wrap .tit-area { padding: 2rem .8rem; background-color: #fff; color: #666; font-size: 1.4rem; }
.target-wrap .tit-area .tit { margin-bottom: 1rem; color: #333; font-size: 1.4rem; font-weight: 700; }
.target-wrap .target-link { display: flex; position: relative; padding: 1.5rem 3rem 1.5rem 1.4rem; border-top: .8rem solid #fafafa; }
.target-wrap .target-link::after { content:''; position: absolute; right: 1.4rem; top: 50%; width: .6rem; height: 1.2rem; margin-top: -.6rem; background: url(../images/icon_flick_02.png) no-repeat center center; background-size: 100% auto; }
.target-wrap .target-link .tit { display: flex; flex: 0 0 auto; align-items: center; width: auto; margin-right: 2rem; color: #333; font-size: 1.4rem; }
.target-wrap .target-link .tag-area span { color: #a1a3c9; font-size: 1.2rem; }
.target-wrap .target-link .tag-area span ~ span { margin-left: .8rem; }

/* 목표리스트 */
.tag-wrap { padding-bottom: 1.6rem; margin-left: -.4rem; }
.tag-wrap span { display: inline-block; height: 2rem; margin: .1rem .4rem; padding: 0 .5rem; border-radius: .3rem; background-color: #696a8b; color: #fff; font-size: 1.2rem; line-height: 2rem; }
.tag-wrap.type { margin: 0 1rem; }
.target-area { position: relative; width: 100%; height: 16rem; border-radius: .5rem; background-color: #f6f8fe; }
.target-area ~ .target-area { margin-top: 1rem; }
.target-area .extra { position: absolute; top: 1.3rem; left: 0; height: 2.2rem; padding: 0 .5rem; border-radius: 0 1.1rem 1.1rem 0; background-color: #fff; color: #696a8b; font-size: 1.2rem; line-height: 2.2rem; }
.target-area .extra strong { margin-left: .4rem; color: #212266; font-family: var(--font-family-number); font-size: 1.4rem; font-weight: 500; }
.target-area .txt-cont { position: absolute; top: 5rem; left: 1.4rem; }
.target-area .txt-cont .stit { width: 18rem; color: #212266; font-size: 1.2rem; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-area .txt-cont .tit { width: 18rem; margin-top: 1.4rem; color: #333; font-size: 2.5rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
    @media (min-width: 341px) and (max-width: 360px) { 
        .target-area .txt-cont .stit, .target-area .txt-cont .tit { width: 17rem; }
    }
    @media (min-width: 321px) and (max-width: 340px) { 
        .target-area .txt-cont .stit, .target-area .txt-cont .tit { width: 15rem; }
    }
    @media (min-width: 281px) and (max-width: 320px) { 
        .target-area .txt-cont .stit, .target-area .txt-cont .tit { width: 13rem; }
    }
    @media (max-width: 280px) { 
        .target-area .txt-cont .stit, .target-area .txt-cont .tit { width: 10rem; }
    }
.target-area .img { position: absolute; right: 1.4rem; top: 1.26rem; width: 13.5rem; height: 13.5rem; }
.target-area .img.travel1 { background: url(../images/img/travel1.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.travel2 { background: url(../images/img/travel2.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.travel3 { background: url(../images/img/travel3.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.travel4 { background: url(../images/img/travel4.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.money1 { background: url(../images/img/money1.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.money2 { background: url(../images/img/money2.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.money3 { background: url(../images/img/money3.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.money4 { background: url(../images/img/money4.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.money5 { background: url(../images/img/money5.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.car1 { background: url(../images/img/car1.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.car2 { background: url(../images/img/car2.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.car3 { background: url(../images/img/car3.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.car4 { background: url(../images/img/car4.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.school1 { background: url(../images/img/school1.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.school2 { background: url(../images/img/school2.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.school3 { background: url(../images/img/school3.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.school4 { background: url(../images/img/school4.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.home1 { background: url(../images/img/home1.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.home2 { background: url(../images/img/home2.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.home3 { background: url(../images/img/home3.png) no-repeat 50% 50%; background-size: 100% auto; }
.target-area .img.home4 { background: url(../images/img/home4.png) no-repeat 50% 50%; background-size: 100% auto; }

/* 메인 화면 */
.design-visual .title { color: #333; font-size: 2rem; font-weight: 500; line-height: 1.4; }
.design-visual .txt-desc { margin-top: 1.4rem; color: #666; font-size: 1.2rem; }
.design-visual .title .point { position: relative; margin-left: -.3rem; color: #212266; }
.design-visual .title .point::before { content:''; position: absolute; left: 50%; top: -.3rem; margin-left: -.15rem; width: .3rem; height: .3rem; border-radius: 50%; background-color: #212266; }

/* 심플투자 */
.simple-visual { width: 100%; min-height: 23.9rem; padding: 4rem .8rem 0; background-color: #f6f8fe; }
.simple-visual::after { content:''; position: absolute; right: 3.13rem; top: 2.36rem; width: 9.06rem; height: 14.5rem; background: url(../images/simple/visual_list.png) no-repeat center center; background-size: 100% auto; }
.simple-visual .title { width: 22rem; color: #181949; font-size: 1.8rem; font-weight: 500; line-height: 1.5; }
.simple-visual .txt-desc { width: 22rem; margin-top: .5rem; color: #333; font-size: 1.2rem; }
@media (min-width: 281px) and (max-width: 320px) { 
    .simple-visual .title, .simple-visual .txt-desc { width: 18rem; }
}
@media (max-width: 280px) { 
    .simple-visual .title, .simple-visual .txt-desc { width: 16rem; }
}
.simple-visual .btn-add-target { display: flex; justify-content: center; align-items: center; width: 100%; height: 3.6rem; margin-top: 2.3rem; border-radius: .5rem; border: 1px solid #ddd; background-color: #fafafa; color: #333; font-size: 1.2rem; line-height: 3.6rem; cursor: pointer; }
.simple-visual .btn-add-target::before { content: ""; width: 1.4rem; height: 1.4rem; margin-right: .6rem; background: url(../images/robo/icon_plus.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-visual-txt { height: 6.6rem; padding: 2.3rem .9rem 0rem; color: #333; font-size: 1.4rem; font-weight: 700; }

.swiper-slide.simple { width: 24rem !important; }
.simple-cont { position: relative; width: 24rem; height: 13.9rem; border-radius: .5rem; background-color: #fff; }
.simple-cont .extra { position: absolute; top: 1.3rem; left: 0; height: 2.2rem; padding: 0 .5rem; border-radius: 0 1.1rem 1.1rem 0; background-color: #fff; color: #696a8b; font-size: 1.2rem; line-height: 2.2rem; }
.simple-cont .extra strong { margin-left: .4rem; color: #212266; font-family: var(--font-family-number); font-size: 1.4rem; font-weight: 500; }
.simple-cont .txt-cont { position: absolute; top: 4.5rem; left: 1.4rem; width: 12rem; }
.simple-cont .txt-cont .stit { color: #212266; font-size: 1.2rem; font-weight: 500; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.simple-cont .txt-cont .tit { margin-top: 1rem; color: #333; font-size: 2rem; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.simple-cont .img { position: absolute; right: 1.4rem; top: 2.4rem; width: 9rem; height: 9rem; }
.simple-cont .img.present { background: url(../images/img/present.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.ipad { background: url(../images/img/ipad.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.hotel { background: url(../images/img/hotel.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.ples { background: url(../images/img/ples.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.beam { background: url(../images/img/beam.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.earphone { background: url(../images/img/earphone.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.bag { background: url(../images/img/bag.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.chair { background: url(../images/img/chair.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.notebook { background: url(../images/img/notebook.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.molding { background: url(../images/img/molding.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.train { background: url(../images/img/train.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.jeju { background: url(../images/img/jeju.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.se-asia { background: url(../images/img/se-asia.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.tuition { background: url(../images/img/tuition.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.employ { background: url(../images/img/employ.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.loan { background: url(../images/img/loan.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.academy { background: url(../images/img/academy.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.websemina { background: url(../images/img/websemina.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont .img.semina { background: url(../images/img/semina.png) no-repeat 50% 50%; background-size: 100% auto; }

.swiper-slide.home { width: 28.73rem !important; }
.simple-cont.home { width: 28.73rem; height: 13.53rem; }
.simple-cont.blue { background-color: #f6f8fe; }
.simple-cont.pink { background-color: #fcf5f8; }
.simple-cont.green { background-color: #e6f5ea; }
.simple-cont.line { border: 1px solid #ddd; }
.simple-cont .extra.bg { background-color: #ebebfa; }

.swiper-slide.type { width: 13rem !important; }
.simple-cont.type { width: 13rem; height: 17.66rem; padding-top: 12.5rem; border: 1px solid #ddd; text-align: center; }
.simple-cont.type ~ .simple-cont.type { margin-left: 4%; }
.simple-cont.type .btn { height: 3rem; line-height: 2.8rem; }
.simple-cont.type .img { left: 50%; top: 2rem; margin-left: -4.5rem; }
.simple-cont.type .img.money-s1000000 { background: url(../images/img/money-s1000000.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont.type .img.money-s2000000 { background: url(../images/img/money-s2000000.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont.type .img.money-s3000000 { background: url(../images/img/money-s3000000.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont.type .img.money-s5000000 { background: url(../images/img/money-s5000000.png) no-repeat 50% 50%; background-size: 100% auto; }
.simple-cont.type .img.money-s10000000 { background: url(../images/img/money-s10000000.png) no-repeat 50% 50%; background-size: 100% auto; }

.simple-cont .txt-home { position: absolute; top: 1.4rem; left: 1.4rem; width: 17rem; color: #333; font-size: 1.2rem; }
.simple-cont .txt-home p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.simple-cont .txt-home p:last-child { margin-top: .5rem; }
.simple-cont .slide-btn { position: relative; top: 9.76rem; left: 1.4rem; height: 2.33rem; padding: 0 1.9rem 0 .8rem; border: 1px solid #999; border-radius: 1.1rem; background-color: #fff; color: #999; font-size: 1.2rem; font-weight: 500; line-height: 2rem; }
.simple-cont .slide-btn::after { content:''; position: absolute; right: .8rem; top: .6rem; width: .53rem; height: .86rem; background: url(../images/home/arrow_gray.png) no-repeat 50% 50%; background-size: 100% auto; }

.input-box { width: 100%; height: 3.6rem; padding: 0 .8rem; border: 1px solid #c2c2c2; border-radius: 0.3rem; background-color: #fff; line-height: 3.4rem; color: #333; font-size: 1.4rem; font-weight: 500; }
.input-box .input-area { float: left; width: 13rem; height: 3.4rem; line-height: 3.4rem; }
.input-box .input-area input[type = "text"] { padding-left: 0; border: none; text-align: right; }
.input-box .arrow-right { display: inline-block; width: .53rem; height: .86rem; margin-left: .6rem; margin-right: .6rem; background: url(../images/icon_arrow_right.png) no-repeat 0 0; background-size: 100% auto; vertical-align: 0; }

.stit-area { display: flex; justify-content: space-between; margin: 1.5rem 0 .8rem; }
.stit-area .tit { color: #333; font-size: 1.2rem; font-weight: 500; }
.stit-area .desc { color: #666; font-size: 1rem; }

.btn-lrg { position: relative; display: flex; justify-content: space-between; align-items: center; }
.btn-lrg .btn { width: 100%; padding: 1rem; border-radius: .3rem; border: 1px solid #999; }
.btn-lrg .btn .left { width: 80%; color: #333; font-size: 1.2rem; text-align: left; }
.btn-lrg .btn .right { width: 20%; color: #181949; font-size: 1.2rem; text-align: right; vertical-align: middle; }
.btn-lrg .btn .right .icon { margin-right: 0; }

/* CMS 이용약관 */
.termsbox { height: 15rem; margin-top: 2rem; padding: 1rem; border: 1px solid #c2c2c2; overflow: auto; }
.termsbox .tit { margin: 1rem 0; font-size: 1.4rem; letter-spacing: -0.07em; line-height: 2.0rem; font-weight: 700; }
.termsbox .tit:first-child { margin-top: 0; }
.termsbox ol li ol { margin-left: 1rem; }

/* 성과보고서 */
.report-link .btn-wrap .btn { display: flex; justify-content: space-between; align-items: center; color: #333; }
.report-link .btn-wrap .btn span:last-child { color: #666; font-size: 1rem; }
.report-link .btn-wrap .btn span:last-child em { font-family: var(--font-family-number); }
.report-link .btn-wrap .btn span:last-child .arrow-right2 { margin-left: .5rem; }
.report-link .btn-wrap ~ .btn-wrap { margin-top: .8rem; }

.report-head { height: 8.13rem; padding: 1rem 1.4rem; background-color: #fafafa; }
.report-head ul li:first-child { color: #666; font-size: 1.4rem; }
.report-head ul li:first-child strong { color: #333; font-weight: 500; }
.report-head ul li:last-child { display: flex; justify-content: space-between; height: 4rem; margin-top: .5rem; }
.report-head ul li:last-child .tit { position: relative; padding-left: 8.5rem; color: #023770; font-size: 1.8rem; font-weight: 700; 
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.report-head ul li:last-child .tit::before { content:''; position: absolute; left: 0; width: 7.9rem; height: 2.6rem; background: url(../images/robo/logo_kiwoogo.png) no-repeat 50% 50%; background-size: 100% auto; }
.report-head ul li:last-child .date { min-width: 7rem; color: #666; font-size: 1rem; text-align: right; }
.report-head ul li:last-child em { font-family: var(--font-family-number); }

/* 목표진행 신호등 */
.traffic-box { display: flex; flex-direction: column; justify-content: center; padding: 2rem 1rem; border-radius: .5rem; background-color: #f7f7fa; text-align: center; }
.traffic-box .icn-area { display: flex; justify-content: space-between; width: 17.76rem; margin: 0 auto; }
.traffic-box .icn-area .icn { display: inline-block; width: 5rem; height: 5rem; }
.traffic-box .icn-area .icn.st1 { background: url(../images/robo/traffic_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.traffic-box .icn-area .icn.st1.on { background: url(../images/robo/traffic_01_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.traffic-box .icn-area .icn.st2 { background: url(../images/robo/traffic_02.png) no-repeat 50% 50%; background-size: 100% auto; }
.traffic-box .icn-area .icn.st2.on { background: url(../images/robo/traffic_02_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.traffic-box .icn-area .icn.st3 { background: url(../images/robo/traffic_03.png) no-repeat 50% 50%; background-size: 100% auto; }
.traffic-box .icn-area .icn.st3.on { background: url(../images/robo/traffic_03_on.png) no-repeat 50% 50%; background-size: 100% auto; }
.traffic-box .txt-box { margin-top: 1.6rem; padding: 1.4rem; border-radius: .5rem; background-color: #fff; color: #333; font-size: 1.4rem; }
.traffic-box .txt-box strong { color: #6dc98d; font-family: var(--font-family-number); font-weight: 500; }
.traffic-box .tit-perct { margin-top: 1.4rem; color: #333; font-size: 1rem; font-weight: 700; }
.traffic-box .tit-perct .rate { display: inline-block; height: 2.9rem; margin-left: .8rem; padding: 0 1.26rem; border-radius: .3rem; background-color: #fff; color: #48bc70; font-family: var(--font-family-number); font-size: 1.8rem; font-weight: 500; line-height: 2.9rem; vertical-align: middle; }
.traffic-box .tit-perct .rate strong { font-size: 2rem; }

/* 코멘트 */
.cmt-box { display: flex; flex-direction: column; padding: 2rem 1rem; border-radius: 0.5rem; background-color: #f6f8fe; color: #333; font-size: 1.2rem; text-align: center; }
.cmt-box .ps-info { text-align: left; margin-bottom: 1rem; }
.cmt-box .ps-info strong { font-weight: 500; }
.cmt-box .inbox { padding: 1.6rem; border-radius: 0.15rem; background-color: #fff; color: #333; font-size: 1.4rem; }
.cmt-box .inbox ~ .inbox { margin-top: 1.4rem; }
.cmt-box .inbox .txt { margin-top: 1rem; }
.cmt-box .inbox .txt strong { color: #181949; font-family: var(--font-family-number); font-weight: 500; }
.cmt-box .inbox .prgrs-area { position: relative; margin-bottom: 1.5rem; }
.cmt-box .inbox .prgrs-area .topper { display: flex; justify-content: space-between; color: #999; font-family: var(--font-family-number); font-size: 1rem; }
.cmt-box .inbox .prgrs-area .progress { display: flex; position: relative; height: 2rem; border-radius: .5rem; background-color: #eee; }
.cmt-box .inbox .prgrs-area .progress .active { display: inline-block; width: 100%; height: 2rem; padding-right: .6rem; border-radius: .5rem; background-color: #212266; color: #fff; font-family: var(--font-family-number); font-size: 1.2rem; line-height: 2rem; text-align: right; }
.cmt-box .inbox .prgrs-area .arwline { position: relative; width: 8rem; color: #b43a6b; font-size: 1rem; }
.cmt-box .inbox .prgrs-area .arwline::before { content:''; position: absolute; top: -20px; left: 38px; width: 1px; height: 2rem; background-color: #b43a6b; }
.cmt-box .inbox .prgrs-area .arwline p { line-height: 1.2; }
.cmt-box .btm-txt { margin-top: 2rem; color: #181949; font-size: 1.4rem; }
.cmt-box .btm-txt strong { font-family: var(--font-family-number); font-weight: 500; }

.cmt-graph-wrap { display: flex; }
.cmt-graph-wrap > div { flex: 1 1 50%; }
.cmt-graph-wrap .cmt-graph { display: flex; justify-content: center; position: relative; margin-top: 2.5rem; }
.cmt-graph-wrap .cmt-graph .graph-rate { display: flex; justify-content: space-around; align-items: flex-end; position: relative; width: 11.8rem; border-bottom: 1px solid #ddd; }
.cmt-graph-wrap .cmt-graph .graph-rate .graph { position: relative; width: 3rem; border-radius: .3rem .3rem 0 0; background-color: #ebebfa; }
.cmt-graph-wrap .cmt-graph .graph-rate .graph span { position: absolute; top: -20px; left: 6px; color: #666; font-family: var(--font-family-number); font-size: 1rem; font-weight: 500; }
.cmt-graph-wrap .cmt-graph .graph-rate .graph.st1 { background-color: #5ebdcd; }
.cmt-graph-wrap .cmt-graph .graph-rate .graph.st2 { background-color: #696a8b; }
.cmt-graph-wrap .cmt-graph .graph-rate .graph.st1 span,
.cmt-graph-wrap .cmt-graph .graph-rate .graph.st2 span { color: #212266; }
.cmt-graph-wrap .txt-wrap { display: flex; justify-content: center; }
.cmt-graph-wrap .txt-wrap > div { display: flex; justify-content: flex-end; width: 11.8rem; margin-top: .2rem; color: #333; font-size: 1.2rem; }
.cmt-graph-wrap .txt-wrap > div span { color: #666; font-size: 1rem; font-weight: 500; }
.cmt-graph-wrap .txt-wrap > div span:first-child { color: #212266; }
.cmt-graph-wrap .txt-wrap > div span:last-child { margin-left: 2rem; }

/* 막대 그래프 */
.graph-rod-wrap { display: flex; justify-content: center; align-items: flex-end; position: relative; height: 12rem; border-bottom: 1px solid #ddd; }
.graph-rod-wrap .graph { position: relative; width: 3rem; height: 10rem; border-radius: .3rem .3rem 0 0; background-color: #eee; }
.graph-rod-wrap .graph span { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 1rem; border-radius: .3rem .3rem 0 0; background-color: #8da7ee; }
.graph-rod-wrap .box { position: absolute; left: 2rem; top: 0; padding: .5rem; border-radius: .3rem; background-color: #696a8b; color: #fff; font-size: 1.2rem; text-align: right; }
.graph-rod-wrap .box span { display: block; font-family: var(--font-family-number); font-weight: 500; }
.graph-rod-wrap .txt { position: absolute; right: 2rem; top: 0; color: #333; font-size: 1.2rem; text-align: left; }
.graph-rod-wrap .txt span { display: block; font-family: var(--font-family-number); font-weight: 500; }
.graph-rod-wrap .txt::before { content:''; position: absolute; top: 10px; left: -22px; width: 20px; height: 1px; background-color: #ddd; }
.graph-txt { margin-top: .5rem; color: #999; font-size: 1rem; text-align: center; }
.graph-txt strong { font-family: var(--font-family-number); }

/* 투자목표 적립률 */
.graph-rate-wrap { display: flex; justify-content: center; position: relative; margin-top: 2.5rem; }
.graph-rate-wrap .graph-rate { display: flex; justify-content: space-evenly; align-items: flex-end; position: relative; width: 21rem; border-bottom: 1px solid #ddd; }
.graph-rate-wrap .graph-rate .graph { position: relative; width: 3rem; border-radius: .3rem .3rem 0 0; background-color: #eee; }
.graph-rate-wrap .graph-rate .graph span { display: inline-block; position: absolute; width: 100%; border-radius: 0; }
.graph-rate-wrap .graph-rate .graph.st1 { background-color: #6083e8; }
.graph-rate-wrap .graph-rate .graph.st1 .con1 { background-color: #8da7ee; }
.graph-rate-wrap .graph-rate .graph.st2 { background-color: #fadae6; }
.graph-rate-wrap .graph-rate .graph.st2 .con1 { background-color: #eb6c9c; }
.graph-rate-wrap .graph-rate .graph.st2 .con2 { background-color: #f091b5; }
.graph-rate-wrap .graph-rate .graph.st2 .con3 { background-color: #f5b6ce; }
.graph-rate-wrap .desc { position: absolute; width: auto; }
.graph-rate-wrap .desc ul { color: #999; font-size: 1.2rem; line-height: 1.7; }
.graph-rate-wrap .desc ul li { position: relative; color: #666; font-size: 1.2rem; }
.graph-rate-wrap .desc ul li > span { position: absolute; right: 0; top: 5px; width: 1rem; height: 1rem; border-radius: .1rem; }
.graph-rate-wrap .desc.st1 ul li { padding-right: 1.5rem; text-align: right; }
.graph-rate-wrap .desc.st1 { left: 5px; top: 50px; }
.graph-rate-wrap .desc.st1 ul li > span { right: 0; }
.graph-rate-wrap .desc.st2 ul li { padding-left: 1.5rem; }
.graph-rate-wrap .desc.st2 { right: 15px; top: 15px; }
.graph-rate-wrap .desc.st2 ul li > span { left: 0; }

.total-txt-wrap, .total-box-wrap { display: flex; justify-content: center; }
.total-txt-wrap > div, .total-box-wrap > div { display: flex; justify-content: space-evenly; width: 21rem; }
.total-txt-wrap > div { margin-top: .7rem; color: #333; font-size: 1.2rem; }
.total-box-wrap > div { margin-top: .3rem; }
.total-box-wrap > div span { padding: .5rem .7rem; border-radius: .3rem; border: 1px solid #bbb; background-color: #fcfcfc; color: #212266; font-family: var(--font-family-number); font-weight: 500; font-size: 1.4rem; }

.amount-cont-wrap { margin-top: 2rem; }
.amount-cont-wrap .header { display: flex; justify-content: space-between; height: 3rem; padding: 0 1.5rem; background-color: #eee; line-height: 3rem; color: #666; font-size: 1.2rem; }
.amount-cont-wrap .header span:first-child { width: 45%; text-align: left; }
.amount-cont-wrap .header span:nth-child(2) { width: 20%; text-align: center; }
.amount-cont-wrap .header span:last-child { width: 35%; text-align: right; }
.amount-cont-wrap .list-cont { padding: 0 .7rem; }
.amount-cont-wrap .list-cont li { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #eee; background-color: #fff; color: #333; font-size: 1.4rem; line-height: 1.2; }
.amount-cont-wrap .list-cont li span { display: inline-block; }
.amount-cont-wrap .list-cont .tit { width: 45%; }
.amount-cont-wrap .list-cont .rate { width: 20%; font-family: var(--font-family-number); text-align: right; }
.amount-cont-wrap .list-cont .price { width: 35%; font-family: var(--font-family-number); text-align: right; }
.amount-cont-wrap .footer { display: flex; justify-content: space-between; height: 4.5rem; padding: 0 .7rem; border-top: 2px solid #333; line-height: 4.5rem; }
.amount-cont-wrap .footer span:first-child { width: 45%; color: #666; font-size: 1.4rem; }
.amount-cont-wrap .footer span:nth-child(2) { width: 20%; color: #333; font-family: var(--font-family-number); font-size: 1.6rem; font-weight: 700; text-align: right; }
.amount-cont-wrap .footer span:last-child { width: 35%; color: #333; font-family: var(--font-family-number); font-size: 1.6rem; font-weight: 700; text-align: right; }

/* 투자목표별 현황 */
.status-rate { position: relative; margin-top: 1.5rem; }
.status-rate .tit-area { display: flex; justify-content: space-between; margin-bottom: .5rem; }
.status-rate .tit-area .stit { width: 60%; color: #333; font-size: 1.4rem; }
.status-rate .tit-area .rate { position: relative; width: 40%; padding-right: 2.3rem; color: #666; font-size: 1.2rem; text-align: right; }
.status-rate .tit-area .rate strong { margin-left: .5rem; color: #333; font-family: var(--font-family-number); font-size: 1.4rem; font-weight: 500; }
.status-rate .tit-area .rate::after { content:''; position: absolute; top: 2px; right: 0; width: 1.6rem; height: 1.6rem; }
.status-rate .tit-area .rate.icn1::after { background: url(../images/robo/traffic_sm_01.png) no-repeat 50% 50%; background-size: 100% auto; }
.status-rate .tit-area .rate.icn2::after { background: url(../images/robo/traffic_sm_02.png) no-repeat 50% 50%; background-size: 100% auto; }
.status-rate .tit-area .rate.icn3::after { background: url(../images/robo/traffic_sm_03.png) no-repeat 50% 50%; background-size: 100% auto; }
.status-rate .progress { display: flex; position: relative; height: 2rem; border-radius: .5rem; background-color: #eee; }
.status-rate .progress .active { display: inline-block; width: 100%; height: 2rem; padding-right: .6rem; border-radius: .5rem; background-color: #212266; color: #fff; font-family: var(--font-family-number); font-size: 1.2rem; line-height: 2rem; text-align: right; }

/* 총 자산 포트폴리오 분산투자 */
.txt-cont-box { margin-top: 2rem; border-radius: .5rem; border: 1px solid #ddd; background-color: #fff; color: #666; font-size: 1.2rem; }
.txt-cont-box .title { height: 3rem; padding-left: 1rem; border-radius: .5rem .5rem 0 0; background-color: #6dc98d; color: #fff; font-size: 1.4rem; line-height: 2.8rem; letter-spacing: 0; }
.txt-cont-box .content { position: relative; padding: 1.4rem 1rem; }
.txt-cont-box .content dl { display: flex; position: relative; width: calc(100% - 6rem); padding-left: .7rem; font-size: 1.4rem; }
.txt-cont-box .content dl::before { content: ''; display: inline-block; position: absolute; left: 0; top: 10px; width: 2px; height: 2px; margin-top: -1px; border-radius: 3px; background-color: #212266; }
.txt-cont-box .content dl dt { width: 15%; color: #666; }
.txt-cont-box .content dl dd { width: 85%; color: #333; }
.txt-cont-box .content dl ~ dl { margin-top: .7rem; }
.txt-cont-box .content .round { display: flex; justify-content: center; align-items: center; position: absolute; right: 1rem; top: 1.4rem; width: 5rem; height: 5rem; border-radius: 50%; border: 3px solid #48bc70; color: #48bc70; font-family: var(--font-family-number); font-weight: 700; font-size: 1.4rem; }
.txt-cont-box .content .round strong { font-size: 1.9rem; }
.txt-cont-box.color1 .title { background-color: #8da7ee; }
.txt-cont-box.color2 .title { background-color: #eb6c9c; }
.txt-cont-box.color1 .content .round { border: 3px solid #6083e8; color: #6083e8; }
.txt-cont-box.color2 .content .round { border: 3px solid #e22d72; color: #e22d72; }

/* 목표별 포트폴리오 분산투자 */
.ptfro-range-box .stit { margin: 1rem 0 .5rem; color: #333; font-size: 1.4rem; }
.ptfro-range-box .range-area { display: flex; height: 2rem; }
.ptfro-range-box .range-area span:first-child { border-radius: .5rem 0 0 .5rem; }
.ptfro-range-box .range-area span:last-child { border-radius: 0 .5rem .5rem 0; }
.ptfro-range-box .range-area .st1 { background-color: #6dc98d; }
.ptfro-range-box .range-area .st2 { background-color: #8da7ee; }
.ptfro-range-box .range-area .st3 { background-color: #eb6c9c; }
.ptfro-range-box .range-perct { display: flex; margin-top: .3rem; }
.ptfro-range-box .range-perct span { font-family: var(--font-family-number); color: #666; font-size: 1.2rem; text-align: center; }
.ptfro-range-box .range-label { display: flex; justify-content: flex-end; margin-top: 1rem; }
.ptfro-range-box .range-label .tit-lb { position: relative; padding: .3rem 0 0 3.5rem; color: #666; font-size: 1.2rem; }
.ptfro-range-box .range-label .tit-lb::before { content: ""; position: absolute; left: 0; top: 8px; width: 1rem; height: 1rem; margin-left: 2rem; border-radius: .2rem; }
.ptfro-range-box .range-label .tit-lb.st1::before { background-color: #6dc98d; }
.ptfro-range-box .range-label .tit-lb.st2::before { background-color: #8da7ee; }
.ptfro-range-box .range-label .tit-lb.st3::before { background-color: #eb6c9c; }

/* 포트폴리오 시세 시뮬레이션 */
.ptfro-legend { display: flex; justify-content: flex-end; }
.ptfro-legend .tit-lb { position: relative; padding: .3rem 0 0 3.5rem; color: #666; font-size: 1.2rem; letter-spacing: 0; }
.ptfro-legend .tit-lb::before { content: ""; position: absolute; left: 0; top: 7px; width: 1rem; height: 1rem; margin-left: 2rem; border-radius: .2rem; }
.ptfro-legend .tit-lb.st1::before { background-color: #ff5555; }
.ptfro-legend .tit-lb.st2::before { background-color: #55afff; }

/* 포트폴리오 세부 구성 */
.table-row { display: flex; width: 100%; min-height: 4.2rem; }
.table-row:nth-child(even) { background-color: #fff; }
.table-row:nth-child(odd) { background-color: #fafafa; }
.table-row > div { padding: .2rem .7rem; color: #333; font-size: 1.4rem; vertical-align: middle; word-break: break-all; }
.table-row .tit { display: flex; align-items: center; justify-content: center; width: 50px; color: #eb6c9c; text-align: center; }
.table-row .sub { display: flex; align-items: center; width: calc(100% - 190px); border-left: 1px solid #eee; text-align: left; vertical-align: middle; }
.table-row .per { width: 60px; border-left: 1px solid #999; text-align: right; }
.table-row .price { width: 80px; border-left: 1px solid #eee; text-align: right; }

.table-row-head { display: flex; width: 100%; background-color: #fafafa; }
.table-row-head > div { color: #666; font-size: 1.2rem; vertical-align: middle; word-break: break-all; }
.table-row-head > div > p { padding: .6rem 0; }
.table-row-head .tit { display: flex; align-items: center; justify-content: center; width: 50px; }
.table-row-head .sub { display: flex; align-items: center; justify-content: center; width: calc(100% - 190px); }
.table-row-head .per { width: 60px; text-align: center; }
.table-row-head .price { width: 80px; text-align: center; }
.table-row-head .per p:first-child, .table-row-head .price p:first-child { border-bottom: 1px solid #eee; }
.table-row-foot { width: 100%; padding: 1.3rem .8rem 3rem; border-top: 2px solid #333; color: #666; font-size: 1.2rem; text-align: right; }
.table-row-foot .num { margin-left: .7rem; color: #333; font-family: var(--font-family-number); font-size: 1.4rem; font-weight: 700; }

/* MP 수익률 확인 컨텐츠(공통) */
.content-wrap.mprates-wrap .contents-title{ padding: 1.6rem 0; font-size: 1.6rem; font-weight: 700; color: var(--text-color-01); line-height: 1; }
.tab-container.type-gbi-view > .tab-panel { margin-top: -1px; padding: 2.1rem 1.3rem 3rem; border: 1px solid #eee; border-radius: .5rem; }
.tab-container.type-gbi-view > .tab-panel .tab-panel { padding-top:2rem; }
.tab-container.type-gbi-view .tab-list-wrap { position: relative; height: auto; }
.tab-container.type-gbi-view > .tab-list-wrap .tab-list-group .tab-list li a { border: 1px solid #eee; border-right:0 ;border-radius: .5rem .5rem 0 0; background-color: #fbfbfb; font-size: 1.3rem; color: #888; font-weight: 500; }
.tab-container.type-gbi-view > .tab-list-wrap .tab-list-group .tab-list li.on a { border-color:#eee; border-right: 0; border-bottom:0; background-color: #fff; color: var(--text-color-01); }
.tab-container.type-gbi-view > .tab-list-wrap .tab-list-group .tab-list li:last-child{ border-right: 0; }
.tab-container.type-gbi-view > .tab-list-wrap .tab-list-group .tab-list li:last-child a { border-right: 1px solid #eee; }
.tab-container.type-inner .tab-list-group .tab-list{ display: flex; }
.tab-container.type-inner .tab-list-group .tab-list li { flex: 1; height: auto; margin-right: .6rem; border: 0; }
.tab-container.type-inner .tab-list-group .tab-list li a { display: flex; flex-direction: column; height: 5rem; padding:0 .1rem; border-bottom: 0; border-radius: .7rem; line-height:1.3; font-size:1.2rem; color: #888; background-color: #f5f5f5; align-items: center; justify-content: center; font-weight: 500; }
.tab-container.type-inner .tab-list-group .tab-list li a span { display: block; }
.tab-container.type-inner .tab-list-group .tab-list li.on a { border: 0; background-color: #3a73cf; color: #fff; }
.tab-container.type-inner .tab-list-group .tab-list li:last-child{ margin-right:0; border-right: 0; }
.sorting-group.type-bar { display: flex; padding: .2rem; border-radius: 2.8rem; background-color: #f4f4f4; }
.sorting-group.type-bar button { display: block; width: 100%; height:2.4rem; line-height: 2.4rem;  border-radius: 2.24rem; text-align: center; font-weight:500; color: #888; font-size: 1.2rem; border: 0;background-color: transparent; }
.sorting-group.type-bar li { flex: 1; height: auto; }
.sorting-group.type-bar li.on button { color: var(--text-color-01); background-color: #fff; }
.content-wrap.mprates-wrap .graph-area { position: relative; margin: 4rem 0 0; }
.content-wrap.mprates-wrap .graph-area .chart-label p { position: absolute; top: -1.7rem; right: 0; z-index: 9; font-size: 1.2rem; }
.content-wrap.mprates-wrap .graph-area .chart-label p:first-child { left: 0; right: auto; }
.content-wrap.mprates-wrap .table-container.type-data { margin-top: 3rem; }
.content-wrap.mprates-wrap .summary-t { color: #666; font-size: 1.1rem; }
.content-wrap.mprates-wrap .summary-d { color: #888; font-size: 1.1rem; font-family: var(--font-family-number); }
.content-wrap.mprates-wrap .data-infomation { margin: .7rem 0 0; font-size: 1rem; color: #777; text-align: right; }
.content-wrap.mprates-wrap .rate-increase, .content-wrap.mprates-wrap .rate-decrease { font-weight: 600; }

.content-wrap.mprates-wrap .info-container { padding: 1.6rem 0; }
.content-wrap.mprates-wrap .info-container .info-title{ display: block; margin-bottom: .5rem; font-size: 1.2rem; font-weight: 700; }
.content-wrap.mprates-wrap .info-container .default-list.star-list li { font-size: 1rem; color: #777; }

.graph-area + .graph-controls { margin-top: 3rem; }
.graph-controls .inp-flex-case { display: flex; justify-content: space-between; }
.graph-controls .inp-flex-case .inp-flex { padding-right: .5rem; }
.graph-controls .inp-flex-case .inp-flex:last-child { padding-right: 0; }
.graph-controls .inp-flex-case .inp-check { position: relative; }
.graph-controls .inp-flex-case .inp-check label { position:relative; display: inline-block; min-height: 2rem; line-height: 1.15; padding: .8rem 0 0 2.2rem; vertical-align: middle; font-size: .9rem; color: #555; font-weight: 600; letter-spacing: -.1rem; }
.graph-controls .inp-flex-case .inp-check label::before, 
.graph-controls .inp-flex-case .inp-check label::after { content:''; position: absolute; top: 0; left: 0; box-sizing:border-box; display: block; width: 1.8rem; height: 1.8rem; }
.graph-controls .inp-flex-case .inp-check label::before { border: 1px solid #c6c6c6; border-radius: 0.3rem; background-color: #fff;  }
.graph-controls .inp-flex-case .inp-check > input[type="checkbox"] { position: absolute; left: 0; top: 0; appearance: none; -webkit-appearance: none; opacity: 0; }
.graph-controls .inp-flex-case .inp-check > input[type="checkbox"]:checked + label::after { z-index: 1; background: url(../images/icon_check02.png) no-repeat 50% 50%; background-size:1.1rem auto; }
.graph-controls .inp-flex-case .inp-check > input[type="checkbox"]:disabled + label { color: #b7b7b7; }
.graph-controls .inp-flex-case .inp-check > input[type="checkbox"]:disabled + label::before { border-color: #eee; background-color: #fafafa; }
.graph-controls .inp-flex-case .inp-check > input[type="checkbox"]:disabled:checked + label:after { opacity: .2; }
.graph-controls .inp-flex-case .inp-check [class^=tag-dot] { display: block; position: absolute; top: 0; left: 2.2rem; width: 1.6rem; } 
.graph-controls .inp-flex-case .inp-check [class^=tag-dot]::before { content: ''; display: block; border-top: .2rem solid; } 
.graph-controls .inp-flex-case .inp-check [class^=tag-dot]::after { content: ''; position:absolute; top:50%; left: 50%; display: block; width: .8rem; height: .8rem; transform: translate(-50%, -50%); } 
.graph-controls .inp-flex-case .inp-check .tag-dot1::before { border-color: #f30808; }
.graph-controls .inp-flex-case .inp-check .tag-dot1::after { background-color: #f30808; border-radius: 100%; }
.graph-controls .inp-flex-case .inp-check .tag-dot2::before { border-color: #089df3; }
.graph-controls .inp-flex-case .inp-check .tag-dot2::after { background-color: #089df3; width: .7rem; height: .7rem; transform: translate(-50%, -50%) rotate(-45deg); }
.graph-controls .inp-flex-case .inp-check .tag-dot3::before { border-color: #0cd9d2; }
.graph-controls .inp-flex-case .inp-check .tag-dot3::after { background-color: #0cd9d2; transform: translate(-50%, -50%); }
.graph-controls .inp-flex-case .inp-check .tag-dot4::before { border-color: #1bcf12; }
.graph-controls .inp-flex-case .inp-check .tag-dot4::after { width: 0; height: 0; border-width: .9rem .5rem .9rem .5rem; border-style: solid; border-color: transparent transparent #1bcf12 transparent; transform: translate(-50%, -80%); }
.graph-controls .inp-flex-case .inp-check .tag-dot5::before { border-color: #ccc; }
.graph-controls .inp-flex-case .inp-check .tag-dot5::after { width: 0; height: 0; border-width: .9rem .5rem .9rem .5rem; border-style: solid; border-color: #ccc transparent transparent transparent; transform: translate(-50%, -20%); }

/* 상품정보 상세 */
.product-summary .tit-18 { word-break: normal; }
.product-summary .type { margin-top: 1rem; }
.product-summary .type .tit-type { margin-right: 1rem; color: var(--text-color-03); }
.product-summary .detail-box { display: table; width: 100%; margin-top: 1rem; border: 1px solid #e1e3e6; text-align: center; }
.product-summary .detail-box dl { display: table-cell; width: 25%; padding: 1rem .2rem; border-left: 1px solid #e1e3e6; }
.product-summary .detail-box dl:first-child { border-left: 0; }
.product-summary .detail-box dt { margin-bottom: .5rem; font-size: 1.1rem; color: var(--text-color-03); }
.product-summary .detail-box dd { font-weight: 700; }
.product-summary .detail-box dd .mark-rating { margin-top: .3rem; }
.tit-label { display: inline-block; min-width: 6rem; height: 2rem; line-height: 2rem; margin-top: 1.5rem; padding: 0 1.2rem; border-radius: 2rem; background-color: #8d939a; font-size: 1.2rem; color: #fff; text-align: center; }
.tit-label:first-child { margin-top: 0; }
.rates-area { display: flex; width: 100%; margin-top: 1.3rem; background-color: #f8f8f8; text-align: right; justify-content: space-around; }
.rates-area dl { padding: .7rem 1.4rem; }
.rates-area dt { color: var(--text-color-02); }
.rates-area strong { font-weight: 700; }
.data-information { margin: .7rem 0 0; font-size: 1rem; color: #777; text-align: right; }
.view-detail-list {margin-top: 1rem; }
.view-detail-list li { position: relative; display: table; margin-top: .4rem; padding-left: .7rem; color: var(--text-color-02); font-size: 1.4rem; }
.view-detail-list li:before { content: ''; position: absolute; left: 0; top: .8rem; display: inline-block; width: .3rem; height: .3rem; border-radius: 100%; background-color: var(--text-color-03); }
.view-detail-list li:first-child { margin-top: 0; }
.view-detail-list li > p { display: table-cell; }
.view-detail-list li > .tit { display: table-cell; width: 7.5rem; vertical-align: top; }

/* 월간키우GO */
.contents-unit-box { overflow: hidden; padding: 2.5rem 2rem; border-radius: 1.2rem; position:relative; z-index: 1; background-color: #fff; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.08); }
.contents-unit-box + .contents-unit-box { margin-top: 2rem; }
.contents-unit-box .title-area { margin-bottom: 1.5rem; }
.contents-unit-box .title-area .title { line-height: 1.6; font-size: 1.4rem; font-weight: 500; color: var(--text-color-01); }
.contents-unit-box .title-area .title.icon-comment::before { content: ''; display: inline-block; width: 2.7rem; height: 2.5rem; margin-right: .8rem; background: url(../images/icon_talk.png) no-repeat 0 0; background-size: 100% auto; vertical-align: middle; }
.contents-unit-box .summary { line-height: 1.6; font-size: 1.4rem; color: var(--text-color-02); }
.contents-unit-box .summary strong { color: var(--text-color-01); font-weight: 500; }
.contents-unit-box .summary + .summary { margin-top: 2rem; }
.inner-contents.magazine-market-wrap, .inner-contents.magazine-posting-wrap, .inner-contents.magazine-news-wrap, .inner-contents.magazine-event-wrap, .inner-contents.magazine-rebalancing { padding-top: 4rem; padding-bottom: 4rem; }

/* 월간키우GO - Landing */
.magazine-visual-wrap .bg-wrap { padding-top: 8.33vw; min-height:111.11vw; background: url(../images/img/bg_mgz_visual.png) no-repeat 50% 100%; background-size: 100% auto; }
.magazine-visual-wrap .visual-title { color: #fff; text-align: center; }
.magazine-visual-wrap .visual-title .title-sub { display: block; font-size: 1.5rem; font-weight: 500; }
.magazine-visual-wrap .visual-title .title-main { display: block; margin-top: 1rem; font-size: 2.6rem; font-weight: 600; line-height: 3.7rem; }
.magazine-visual-wrap .btn-wrap { padding: 3rem 2rem; }
.magazine-visual-wrap .btn-wrap .btn { width: 100%; }
.gbi-mgz .landing-tit { padding-bottom: 2rem; text-align: center; }
.gbi-mgz .landing-tit > span { display: inline-block; padding: 0 3rem; line-height: 1.45; position: relative; font-size: 1.8rem; font-weight: 500; text-align: left; }
.gbi-mgz .landing-tit > span::before, .gbi-mgz .landing-tit > span::after { display: inline-block; width: 1.9rem; height: 1.5rem; content:''; position: absolute; top: -.2rem; vertical-align: top; background: url(../images/icon_quotation.png) no-repeat 50% 0; background-size: 100% auto; }
.gbi-mgz .landing-tit > span::before { left: 0; transform: rotate(180deg); }
.gbi-mgz .landing-tit > span::after { right: 0; }
.mgz-landing-info { position: relative; text-align: center; }
.mgz-landing-info .txt-main { line-height: 1.58 ; padding: 4rem 0 2rem; font-size: 1.4rem; font-weight: 500; }
.mgz-landing-info .speech-bubble { display: inline-block; margin: 0 1.5rem; padding: 1.6rem; position:relative; border-radius: 1.2rem; background-color: #f5f5f5; font-size: 1.2rem; color: var(--text-color-02); }
.mgz-landing-info .speech-bubble::after { display: inline-block; width: 1.6rem; height: 1.6rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%) rotate(45deg); content: ''; background-color: #f5f5f5; }
.mgz-landing-info:after { display: block; height: 66.67vw; margin: 0 auto; content: ''; background-size: contain; background-repeat: no-repeat; background-position: 50% 100%; }
.mgz-landing-info.info1::after { background-image: url(../images/img/img_robo1.png); }
.mgz-landing-info.info2::after { background-image: url(../images/img/img_robo2.png); }
.mgz-landing-info.info3::after { background-image: url(../images/img/img_robo3.png); }
@media (min-width: 360px) {
    .mgz-landing-info:after { width: 32.8rem; height: 24rem; }
}
.gbi-mgz .info-container { padding-top: 2rem; padding-bottom: 4rem; }
.gbi-mgz .info-container .info-title { margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 500; }

/* 월간키우GO - LIST */
.magazine-list-wrap { padding: 2rem 1.6rem 4rem; }
.magazine-list-wrap li { margin-top: 2rem; }
.magazine-list-wrap li:first-child { margin-top: 0; }
.magazine-list-wrap li a { display: block; overflow: hidden; min-height: 12rem; padding: 4.3rem 3.5rem 3rem 7.2rem; position: relative; border-radius: 1.2rem; box-shadow: 0 .6rem 1rem rgba(0,0,0,.08); background: #fff url(../images/icon_magazine.png) 2.5rem 43% no-repeat; background-size: 4rem auto; font-family: var(--font-family-number); }
.magazine-list-wrap li a::after { content: ''; display: block; width:.8rem; height: .8rem; position: absolute; top: 4.7rem; right: 2.6rem; border: .2rem solid #c8c8c8; border-left: 0; border-bottom: 0; transform: rotate(45deg); }
.magazine-list-wrap li a .list-title { display: block; font-size: 1.7rem; color: var(--text-color-01); font-weight: 700; }
.magazine-list-wrap li a .list-info { display:block; margin-top: 1rem; color: var(--text-color-02); font-size: 1.2rem; }
.magazine-list-wrap li a .list-info .col { margin-left: 6rem; vertical-align: middle; }
.magazine-list-wrap li a .list-info .hits .num { margin-left: 1rem;}
.magazine-list-wrap li a .list-info .col:first-child { margin-left: 0; }

/* 월간키우GO - 이달의 자산배분 */
.text-bubble { padding: 2.2rem 0; position: relative; line-height: 1.7; text-align: center; background-color: #fff; border-radius: 1.2rem 1.2rem 1.2rem 0; box-shadow: inset -.8rem .8rem 1.6rem rgba(0,0,0,.03), 0 .6rem 1rem rgba(0,0,0,.06); font-size: 1.2rem; color: var(--text-color-01); }
.text-bubble::after,
.text-bubble::before { content: ''; display: block; height: .4rem; width: 2rem; position: absolute; top: 1rem; right: 1rem; border-radius: 2rem; background-color: #fff; }
.text-bubble::after { width: 8rem; right: 3.6rem; }

.magazine-portfolio-list { padding-bottom: 4rem; }
.magazine-market-wrap { padding-top: 4rem; background-color: #fafafa; }
.magazine-rebalancing .contents-unit-box { padding-bottom: 4rem; }

/* 월간키우GO - 이달의 자산관리 */
.magazine-posting-wrap.inner-contents { padding-top: 0; }
.magazine-posting-wrap .posting-header .title { font-size:1.6rem; color: var(--text-color-01); }
.magazine-posting-wrap .posting-header .title .cate { display: block; margin-bottom: 1.5rem; font-size: 1.7rem; font-weight: 700; }
.magazine-posting-wrap .posting-body { padding: 3rem 0; }
.magazine-posting-wrap .posting-body .img-wrap { margin-top: 1.5rem; text-align: center; }
.magazine-posting-wrap .posting-body .img-wrap img { display: inline-block; max-width: 100%; height: auto; margin-bottom: 1rem; vertical-align: top; }
.magazine-posting-wrap .posting-body .img-wrap img:last-child { margin-bottom: 0; }
.magazine-posting-wrap .posting-body .img-wrap:first-child { margin-top: 0; }
.magazine-posting-wrap .posting-bottom { padding: 3rem 0; border-radius: 1.2rem; box-shadow: 0px .6rem 1rem rgba(0,0,0,.08); text-align: center; }
.magazine-posting-wrap .posting-bottom .text { font-size: 1.4rem; color: var(--text-color-01); font-weight: 500; }
.magazine-posting-wrap .posting-bottom .text em { color: var(--main-color-05); font-weight: 700; }
.magazine-posting-wrap .posting-bottom .btn { margin-top: 1.5rem; }

/* 월간키우GO - 언론에 나온 키우GO */
.magazine-news-wrap { background-color: #fafafa; }
.magazine-news-wrap .news-list-wrap li {margin-top: 2rem;}
.magazine-news-wrap .news-list-wrap li:first-child {margin-top: 0;}
.magazine-news-wrap .news-list-wrap li a { display: block; padding: 2rem; position: relative; background-color: #fff; border-radius: 1.2rem; box-shadow: 0px .6rem 1rem rgba(0,0,0,.08); }
.magazine-news-wrap .news-list-wrap li .list-title { line-height: 1.4; font-size: 1.6rem; color: var(--text-color-01); }
.magazine-news-wrap .news-list-wrap li .list-info { display: block; margin-top: 1rem; line-height:1; font-size: 1.2rem; color: var(--text-color-02); }
.magazine-news-wrap .news-list-wrap li .list-info .col { position: relative; padding-left: .5rem; }
.magazine-news-wrap .news-list-wrap li .list-info .col::before { content: ''; display: inline-block; width: 1px; height: 1rem; margin-right: .7rem; background-color: #d8d8d8; }
.magazine-news-wrap .news-list-wrap li .list-info .col:first-child { margin-left: 0; padding-left: 0;}
.magazine-news-wrap .news-list-wrap li .list-info .col:first-child::before { display: none; }

/* 월간키우GO - 진행중인 이벤트 */
.magazine-event-wrap .event-list-wrap li { margin-top: 3rem; }
.magazine-event-wrap .event-list-wrap li:first-child { margin-top: 0; }
.magazine-event-wrap .event-list-wrap li .thumbnail { overflow:hidden; display:block; position:relative; border-radius: 1.2rem; }
.magazine-event-wrap .event-list-wrap li .thumbnail img { width: 100%; }
.magazine-event-wrap .event-list-wrap li .title-wrap { display: block; overflow: hidden; text-overflow: ellipsis; margin-top: 1.5rem; white-space: nowrap; }
.magazine-event-wrap .event-list-wrap li .title-wrap .title { margin-left: .3rem; font-size: 1.6rem; color: var(--text-color-01); vertical-align: middle; }
.magazine-event-wrap .event-list-wrap li.done .thumbnail::after { content:''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: rgba(0,0,0,.26); }
.magazine-event-wrap .event-list-wrap li.done .title-wrap .title { color: #aaa; }

/* 키우GO 톡 */
.inner-contents.talk-visual-wrap { padding-top: 4rem; }
.talk-visual-wrap .head-title-area { margin-bottom: 2.4rem; }
.talk-visual-wrap .page-title { position: relative; }
.talk-visual-wrap .label-talk { position:absolute; top: -1rem; right: -4rem; overflow:hidden; display: inline-block; width: 3.8rem; height: 2rem; line-height: 2rem; background: url(../images/talk/icon-m-bubble.png) no-repeat 0 0; background-size: 100% auto; text-indent: -999px;}
.talk-visual-wrap  .right-area { max-width: 50%; }
.talk-visual-wrap  .right-area .btn-faq { max-width: 100%; }
.talk-banner { margin-bottom: 4rem; }
.talk-banner .swiper-slide a { display: block; text-align: center; cursor: pointer; }
.talk-banner .swiper-slide .item { border-radius: 1.2rem; }
.talk-banner .swiper-slide .item img { display: inline-block; border-radius: 1.2rem; }
.talk-banner .slide-control-button-group { z-index: 10; position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: inline-block; padding: 0 .6rem 0 1rem; border-radius: 3rem; background-color: rgba(255,255,255,.5); line-height:2.4rem; }
.talk-banner .slide-control-button-group .swiper-pagination { position: static; display:inline-block; width: auto; margin-right: .4rem; font-size: 1.2rem; font-weight: 500; color: #555; font-family: var(--font-family-number); vertical-align: top; }
.talk-banner .slide-control-button-group .slide-button-pause {background: url(../images/talk/icon-pause.png) no-repeat 0 50%; }
.talk-banner .slide-control-button-group .slide-button-start {background: url(../images/talk/icon-play.png) no-repeat 0 50%; }
.talk-banner .slide-control-button-group .slide-button-pause, 
.talk-banner .slide-control-button-group .slide-button-start { position: static; width: 1.6rem; height: 2.4rem; overflow: hidden; background-size: contain; vertical-align: top; }
.talk-banner .slide-control-button-group .slide-button-pause span, 
.talk-banner .slide-control-button-group .slide-button-start span { visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; }

.notice-list-wrap li { margin-top: 1.5rem; }
.notice-list-wrap li a { display: block; padding: 2rem; border-radius: 1.2rem; background-color: #fff; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.14) }
.notice-list-wrap .list-title { line-height:2.6rem; padding-left: 2.8rem; color: var(--text-color-01); font-size: 1.6rem; }
.notice-list-wrap .list-label { display: block; line-height:2rem; margin-bottom: .6rem; padding-left: 2.8rem; font-size: 1.3rem; font-weight: 500; color: rgba(0,200,180,.7); text-indent: -2.8rem; }
.notice-list-wrap .list-label:before { content: ''; display: inline-block; width: 2rem; height:2rem; margin-right: .8rem; background-size: contain; background-repeat: no-repeat; background-position: 0 0; vertical-align: middle; }
.notice-list-wrap .list-label.icon-notice:before { background-image: url(../images/talk/icon-m-notice.png); }
.notice-list-wrap .list-label.icon-mgz:before { background-image: url(../images/talk/icon-m-mic.png); }
.notice-list-wrap .list-label.icon-news:before { background-image: url(../images/talk/icon-m-news.png); }
.notice-list-wrap .list-label.icon-vod:before { background-image: url(../images/talk/icon-m-play.png); }
.notice-list-wrap .list-label.icon-ptf:before { background-image: url(../images/talk/icon-m-piegraph.png); }

.notice-view-container { border-top: 1px solid #111 ;}
.notice-view-container .title-area { display: flex; padding: 2.4rem 1.64rem; border-bottom: 1px solid #eee; justify-content: space-between; }
.notice-view-container .title-area .head-title { line-height: 1.9rem; color: var(--text-color-01); font-size: 1.5rem; font-weight: 500; }
.notice-view-container .title-area .info { padding-left: 1rem; line-height: 1.9rem; color: #888; font-size: 1.3rem; font-family: 'Inter', 'SpoqaHanSansNeo'; }
.notice-view-container .board-view { padding: 2.4rem 1.6rem; border-bottom: 1px solid #eee; line-height: 2.2rem; font-size: 1.4rem; color: var(--text-color-02); }

/* faq accordion */
.accordion-container.type-gbi-faq { margin-top: 0; }
.accordion-container.type-gbi-faq .accordion { overflow: hidden; margin-bottom: 1.5rem; padding: 0; border-radius: 1.2rem; border-bottom: 0; background-color: #fff; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.08); }
.accordion-container.type-gbi-faq .accordion .accordion-head button { position: relative; width: 100%; height: auto; margin-left: 0; padding: 1.9rem 5.2rem 1.9rem 4.8rem; border-bottom: 0; line-height:2.4rem; font-size: 1.5rem; font-weight: 500; color: var(--text-color-00); transition: color .2s; }
.accordion-container.type-gbi-faq .accordion .accordion-head button:before { position: absolute; top: 1.8rem; left: 1.6rem; content: ''; display: inline-block; width: 2.4rem; height: 2.4rem; margin-right: .5rem; background: url(../images/talk/icon-question.png) no-repeat 0 0; background-size: 100% auto; vertical-align: middle; }
.accordion-container.type-gbi-faq .accordion .accordion-head button:after { position: absolute; top: 2rem; right: 2rem; content: ''; display: block; width: 1rem; height: 1rem; border-width: 0 .2rem .2rem 0; border-style: solid; border-color: #c8c8c8; background: none; transform-origin: center; transform: rotate(45deg); }
.accordion-container.type-gbi-faq .accordion.on .accordion-body { padding: 0 1.6rem 1.6rem; border: 0; background-color: #fff; }
.accordion-container.type-gbi-faq .accordion.on .accordion-body-contents { padding: 1.6rem; background-color: #fafafa; border-radius: 0 1.6rem 1.6rem 1.6rem; }
.accordion-container.type-gbi-faq .accordion.on .accordion-body-contents, 
.accordion-container.type-gbi-faq .accordion.on .accordion-body-contents p { color: var(--text-color-02); font-size: 1.4rem; line-height: 2.2rem; }
.accordion-container.type-gbi-faq .accordion.on .accordion-head button { padding-bottom: 1.3rem; color: #00c8b4; text-decoration: underline; }
.accordion-container.type-gbi-faq .accordion.on .accordion-head button::after { transform: translateY(50%) rotate(-135deg); }

.link-list-container { margin-top: 2rem; }
.link-list-container li { position:relative; margin-bottom: 1.5rem; box-shadow: 0 .4rem 1rem rgba(0,0,0,.08); border-radius: 1.2rem; }
.link-list-container a, .link-list-container button { display: block; width: 100%; padding: 1.8rem 5.2rem 1.8rem 2.4rem; text-align: left; }
.link-list-container .tit { line-height:2.4rem; font-size: 1.5rem; color: var(--text-color-01); font-weight: 500; }
.link-list-container li::after { position: absolute; top: 50%; right: 2rem; content: ''; display: block; width: 1rem; height: 1rem; border-width: 0 .2rem .2rem 0; border-style: solid; border-color: #c8c8c8; transform-origin: center; transform: translateY(-50%) rotate(-45deg); }

.gbi-tlk .info-cs { padding-top: 2.4rem; }
.gbi-tlk .info-cs .tel-info { padding: 1.8rem 1rem; background-color: #f8f8f8; border-radius: 1.2rem; text-align: center; }
.gbi-tlk .info-cs .tel-info a { position:relative; display: inline-flex; padding-left: 4.8rem; min-height: 4rem; align-items: center; }
.gbi-tlk .info-cs .tel-info a:before { position:absolute; top: 50%; left: 0; content: ''; display: inline-block; width: 4rem; height: 4rem; margin-top:-2rem; background: url(../images/talk/icon-phone.png) no-repeat 0 0; background-size: 100% auto; vertical-align: middle; }
.gbi-tlk .info-cs .tel-info .tit { font-size: 1.6rem; font-weight: 500; color: var(--text-color-00); vertical-align: middle; word-break: keep-all; }
.gbi-tlk .info-cs .tel-info .text { flex: auto; margin-left: 3vw; padding-left: 3vw; border-left: 1px solid #ddd; line-height: 1.5; text-align: left; vertical-align: middle; }
.gbi-tlk .info-cs .tel-info .text .num { display:block; font-size: 1.5rem; font-weight: 500; color: var(--text-color-00); }
.gbi-tlk .info-cs .tel-info .text .time { display:block; font-size: 1.3rem; color: #888; }

/* 연금 포트폴리오 구독 서비스 */
.txt-hl { text-decoration: underline; font-weight: 500; }
.txt-hl-cyan { text-decoration: underline; color: var(--main-color-06); font-size: inherit; }
.txt-hl-cyan2 { color: var(--main-color-06); font-weight: 500; }
.psn-visual-wrap { position:relative; margin-bottom: 9rem; padding: 3rem 2.4rem 11.9rem; border-radius: 0 0 3.2rem 3.2rem; background-color: var(--main-color-06); background: linear-gradient(180deg, #09BD9A 0%, #09ABBD 100%) 0% 0% no-repeat; }
.psn-visual-wrap p { color: #fff; }
.psn-visual-wrap .text1 { line-height: 3.2rem; font-size: 2.2rem; font-weight: 500; }
.psn-visual-wrap .text2 { margin-top: 1.6rem; line-height: 2rem; font-size: 1.3rem; }
.psn-visual-wrap .btn-join { height:3.2rem; line-height: 3.2rem; margin-top: 1.6rem; padding: 0 1.6rem; background-color: #fff; font-size: 1.4rem; font-weight: 500; color: var(--main-color-06); border-radius: 6rem; }
.psn-visual-wrap::after { position: absolute; left: 0; right: 0; bottom: -6.1rem; content: ''; display: block; height: 18rem; background: url(../images/pension/main-visual.png) no-repeat 100% 0; background-size: 36rem auto; }
.psn-desc-wrap { overflow: hidden; }
.psn-desc-wrap .text { line-height: 1.65; font-size: 1.5rem; word-break: keep-all; }
.psn-desc-wrap .img { width: 20rem; height: 16rem; margin: 2rem auto 1rem; background-repeat: no-repeat; background-position: 50% 0; background-size: contain; }
.psn-desc-wrap .img.img-psn1 { background-image: url(../images/pension/info-image-1.png); }
.psn-desc-wrap .img.img-psn2 { background-image: url(../images/pension/info-image-2.png?202412); }
.psn-desc-wrap .img.img-psn3 { background-image: url(../images/pension/info-image-3.png); }
.psn-desc-wrap .img.img-psn4 { background-image: url(../images/pension/info-image-4.png); }
.psn-desc-wrap .btn-wrap { justify-content: end; }
.psn-desc-wrap .btn-link { margin: 0 -.6rem -.6rem 0; padding: 1rem; color: #80bece; }
.psn-desc-wrap .btn-link .icon { position:relative; display:inline-block; width:1.8rem; height: 1.8rem; margin-left: .6rem; margin-right: 0; border-radius: 100%; background-color: #80bece; vertical-align: text-bottom; }
.psn-desc-wrap .btn-link .icon::after { position:absolute; top: .5rem; left: .43rem; content:''; display:inline-block; width:.5rem; height: .5rem; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(-45deg); }
.psn-desc-wrap .txt-hl-cyan { text-decoration: none; }
.psn-desc-wrap .swiper-container { overflow:visible; padding-bottom: 6rem; }
.psn-desc-wrap .swiper-wrapper { justify-content: stretch; }
.psn-desc-wrap .swiper-slide { width: 78vw; height: auto; padding: 4rem 2rem 2.5rem; border-radius: 1.6rem; background-color: #fff; box-shadow: 0 .6rem 1.6rem rgba(0,0,0,0.08); }
.psn-desc-wrap .swiper-container .slide-control-button-group .swiper-pagination-bullets { width: 100%; margin-top: 2.5rem; }
.psn-desc-wrap .slide-control-button-group .swiper-pagination-bullets .swiper-pagination-bullet { width: .8rem; height: .8rem; margin-right: .8rem; opacity: 1; background-color: #ddd; }
.psn-desc-wrap .slide-control-button-group .swiper-pagination-bullets .swiper-pagination-bullet-active { width: .8rem; height: .8rem; border-radius:100%; background-color: var(--text-color-01); }
.modal-icon-wrap { width: 6.4rem; height: 6.4rem; margin: 0 auto; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }
.modal-icon-wrap.img-rebalancing { background-image: url(../images/pension/icon-balance.png); }
.modal-icon-wrap.img-cancel { background-image: url(../images/pension/icon-cancel.png); }
.modal-icon-wrap.img-star { width: 4.4rem; height: 4.4rem; background-image: url(../images/pension/img-star.png); }
.modal-img-wrap.survey-img { height: 15.6rem; margin: 0 auto; background-repeat: no-repeat; background-position: 50% 0; background-size: auto 16.7rem; }
.modal-img-wrap.survey-img.survey-none { background-image: url(../images/pension/img-survey-none.png); background-size: auto 15.6rem; }
.modal-img-wrap.survey-img.survey1 { background-image: url(../images/pension/img-survey1.png); }
.modal-img-wrap.survey-img.survey2 { background-image: url(../images/pension/img-survey2.png); }
.modal-img-wrap.survey-img.survey3 { background-image: url(../images/pension/img-survey3.png); }
.modal-img-wrap.survey-img.survey4 { background-image: url(../images/pension/img-survey4.png); }
.modal-img-wrap.survey-img.survey5 { background-image: url(../images/pension/img-survey5.png); }
.survey-type-wrap { text-align: center; line-height: 2rem; }
.survey-type-wrap .title { margin-bottom: 1.5rem; line-height: 2.4rem; font-weight: 500; font-size: 1.8rem; letter-spacing: -.12rem; }
.survey-type-wrap .title strong { font-weight: inherit; text-decoration: underline; } 
.survey-type-wrap .survey-type.survey1  { color: #e61e18; }
.survey-type-wrap .survey-type.survey2 { color: #ff873e; }
.survey-type-wrap .survey-type.survey3 { color: #63c7aa; }
.survey-type-wrap .survey-type.survey4 { color: #4d7aff; }
.survey-type-wrap .survey-type.survey5 { color: #50951c; }
.result-complete-wrap .ico-wrap { display: inline-block; width: 10rem; height:10rem; margin: 0 auto; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; }
.result-complete-wrap .ico-wrap.ico-complete { background-image: url(../images/pension/img-complete.png); }
.result-complete-wrap .ico-wrap.ico-cancel { background-image: url(../images/pension/img-cancel.png); }
.result-complete-wrap .text-main { margin-top: 1.8rem; font-size: 1.8rem; line-height: 2.8rem; }

.txt-cont-list + .txt-cont-list { margin-top: 3rem; }
.txt-cont-list dl { display: flex; flex-wrap: wrap; font-size: 1.4rem; }
.txt-cont-list dl dt { display: flex; width: 34%; margin-top: 3rem; color: #888; font-weight: 500; align-items: center; justify-content: flex-start; }
.txt-cont-list dl dd { width: 66%; margin-top: 3rem; text-align: right; }
.txt-cont-list dl dt:first-child, .txt-cont-list dl dd:nth-child(2) { margin-top: 0; }

.btn-box-rebalancing { padding: 1.8rem; border-radius: 4rem; background-color: #f8f8f8; }
.btn-box-rebalancing dl dt { width: 60%; }
.btn-box-rebalancing dl dd { width: 40%; }
.btn-box-rebalancing .ico-rebalancing { padding-left: 2.8rem; color: var(--text-color-01); background: url(../images/pension/icon-bell.png) no-repeat 0 0; background-size: 2rem auto; font-weight: 500; }

.psn-my-wrap .btn-my-add { width: 100%; padding: 8rem 1.6rem 3rem; border-radius: 1.6rem; background: #f5f5f5 url(../images/pension/icon-add.png) no-repeat 50% 3rem; background-size: 3.6rem auto; }
.psn-my-wrap .btn-my-add span { line-height: 1.4rem; color: var(--text-color-02); }
.psn-banner-mp { display: block; min-height: 12.8rem; margin-bottom: 2.4rem; padding: 2rem; background: #46dfbb url(../images/pension/img-banner1.png) no-repeat 90% 50%; background-size: auto 12.8rem; }
.psn-banner-mp .banner-txt { display: block;  line-height: 2.4rem; color: #fff; font-weight: 500; font-size: 1.5rem; }
.psn-banner-mp .banner-tag { display: inline-block; height: 2.8rem;  margin-top: 1.2rem; padding:0 1.5rem; border: 1px solid rgba(255,255,255,.88); line-height: 2.6rem; border-radius: 2rem; font-size: 1.2rem; color: #fff; font-weight: 500; }

.myptf-box { margin-top: 3rem; padding: 3rem 1.6rem; border-radius: 1.6rem; box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.1); background-color: #fff; }
.list-myptf { margin-top: 2.6rem; }
.list-myptf li { display: flex; justify-content: space-between; margin-top: .8rem; padding: .6rem 0; border-bottom: 1px solid #eee; }
.list-myptf li:first-child { margin-top: 0; }
.list-myptf li .p-name { display: flex; flex: 1; padding: .2rem 1rem; font-size: 1.2rem; text-align: left; color: var(--text-color-02); align-items: center; }
.list-myptf li .num { padding: .2rem 0; text-align: right; font-weight: 500; font-size: 1.2rem; color: var(--text-color-01); }
.myptf-box .graph-yaxis-label { position: relative; min-height: 1rem; margin: 0 .9rem 0 5.6rem; line-height: 1; }
.myptf-box .graph-yaxis-label span { position: absolute; top: 0; color: var(--text-color-02); font-size: .9rem; font-family: var(--font-family-number); transform: translateX(-50%); }
.myptf-box .graph-yaxis-label .step2 { left: 20%; }
.myptf-box .graph-yaxis-label .step4 { left: 40%; }
.myptf-box .graph-yaxis-label .step6 { left: 60%; }
.myptf-box .graph-yaxis-label .step8 { left: 80%; }
.myptf-box .graph-yaxis-label .step10 { left: 100%; }
.myptf-box .graph-yaxis-label .step0 { left: 0; }

.gbi-dsc .img-box { height: 18rem; margin: 2rem 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: auto 100%; }
.gbi-dsc .img-box.bg1 { background-image: url(../images/pension/img-algorithm1.png); }
.gbi-dsc .img-box.bg2 { background-image: url(../images/pension/img-algorithm2.png); }
.gbi-dsc .img-box.bg3 { background-image: url(../images/pension/img-algorithm3.png); }
.gbi-dsc .img-box.bg4 { background-image: url(../images/pension/img-algorithm4.png); }
.gbi-dsc p { color: var(--text-color-02); line-height: 2.2rem; word-break: keep-all; }

.accordion-container.type-information { margin-top: 0; }
.accordion-container.type-information .accordion .accordion-head button { width: auto; margin: 0; padding: 0 2.6rem 0 0; border: 0; font-size: 1.5rem; }
.accordion-container.type-information .accordion .accordion-head button::after { top: 50%; right: 0; width: 2rem; height: 2rem; margin-top: -.9rem; background: url(../images/pension/icon-open.png) no-repeat; background-size: 2rem; }
.accordion-container.type-information .accordion.on .accordion-body { padding: 0; background-color: #fff; }

/* 투자성향 설문 */
.survey-step-tit { display: flex; flex-direction: column; min-height: 7.8rem; padding: .5rem 2rem; }
.survey-step-tit .title { font-size: 1.6rem; line-height: 2.4rem; letter-spacing: -.04rem; font-weight: 500; color: var(--text-color-00); }
.progress-step-bar { height: .2rem; background-color: #eee; }
.progress-step-bar .bar { height: .2rem; background-color: #1199a6; }
.btn-select-group { min-height: calc(100vh - 13.6rem); padding: 2rem 2rem 3rem; background-color: #f5f5f5; }
.btn-select-group button { position: relative; width: 100%; margin-bottom: 1rem; padding: 1.8rem; border: .2rem solid transparent; background-color: #fff; border-radius: .6rem; font-size: 1.3rem; text-align: left; letter-spacing: -.03rem; color: var(--text-color-02); }
.btn-select-group button:last-child { margin-bottom: 0; }
.btn-select-group button.on { padding-left: 3.8rem; border-color: var(--main-color-06); color: var(--main-color-06); box-shadow: 0 .6rem 1.2rem rgba(17,153,166,.16); font-weight: 400; }
.btn-select-group button.on::before { content: ''; position: absolute; top: 2.1rem; left: 2.5rem; display: block; width: .5rem; height: 1rem; border: .2rem solid var(--main-color-06); border-top: 0; border-left: 0; transform: rotate(45deg); transform-origin: top; }
.btn-select-group button:disabled { opacity: .5; }
.btn-select-group .slider-color-type { padding: 2rem; border-radius: .6rem; background-color: #fff; }
.btn-select-group .slider-color-type .input-price { width: 5rem; height: 2.6rem; margin: 0.2rem 0 0 2rem; padding: 0 .5rem; border-radius: .2rem; }
.btn-select-group .ui-slider-range { height: .4rem; }
.btn-select-group .ui-slider-handle { width: 2rem; height: 2rem; }
.btn-select-group .ui-slider-handle em { width: 1.2rem; height: 1.2rem; }
.btn-select-group .range-box .slider-row { margin: .5rem 0 2rem; }
.btn-select-group .range-box .slider-row .slider-range-wrap{ width: calc( 100% - 6rem ) }
.btn-select-group .range-box.slider-color-type .total em { line-height: 2.4rem; font-size: 1.4rem; }
.btn-select-group .range-box.slider-color-type .total .numper { width: 5rem; height: 2.6rem; line-height: 2.4rem; font-size: 1.4rem; }
.btn-select-group .range-box.slider-color-type .bold-s { font-size: 1.2rem; }

/* 수익률 */
.psn-banner-ptf { display: block; min-height: 12.8rem; padding: 2rem; background: #c7a5ff url(../images/pension/img-banner2.png) no-repeat 100% 50%; background-size: auto 12.8rem; }
.psn-banner-ptf .banner-txt { display: block; line-height: 2.4rem; color: #fff; font-weight: 500; font-size: 1.5rem; }
.psn-banner-ptf .banner-tag { display: inline-block; min-height: 2.8rem;  margin-top: 1.2rem; padding:0 1.6rem; border: 1px solid rgba(255,255,255,.88); line-height: 2.6rem; border-radius: 2rem; font-size: 1.2rem; color: #fff; font-weight: 500; }
.tooltip-info-rate { position: absolute; right: 0; top: -2rem;}
.period-toggle { text-align: center; }
.period-toggle ul { display: inline-block; height: 3.1rem; background-color: #f3f3f3; border-radius: 2rem; }
.period-toggle li { position:relative; display: inline-block; min-width: 6rem; border-radius: 2rem; vertical-align: top; }
.period-toggle li label { display: block; height: 3.1rem; line-height: 3.1rem; color: var(--text-color-03); font-size: 1.2rem; transition: all .1s; }
.period-toggle li input[type=radio] { position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0; }
.period-toggle li input[type=radio]:checked + label { background-color: #fff; color: var(--text-color-01); box-shadow: 0 .1rem .3rem rgba(0,0,0,.12); border-radius: 2rem; }
.graph-indicator { text-align: center; }
.graph-indicator ul { display: inline-block; }
.graph-indicator li { position:relative; overflow: hidden; display: inline-block; vertical-align: top; }
.graph-indicator li label { display: block; padding: 0 1rem; line-height: 1.8rem; font-size: 1.3rem; font-weight: 500; color: #ddd; transition: all .1s; }
.graph-indicator li:first-child label { padding-left: 0; }
.graph-indicator li:last-child label { padding-right: 0; }
.graph-indicator li label .icon { position:relative; display: inline-block; width: 1.8rem; height:1.8rem; border-radius: 100%; margin-right: .6rem; background-color: #ddd; vertical-align: middle; transition: all .1s; }
.graph-indicator li label .icon::before,
.graph-indicator li label .icon::after { content: ''; position:absolute; top: 50%; left: 50%; display: block; width: 1rem; height: .2rem; background-color: #fff; transform: translate(-50%, -50%); }
.graph-indicator li label .icon::after { width: .2rem; height: 1rem; }
.graph-indicator li input[type=checkbox]{ position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0; }
.graph-indicator li input[type=checkbox]:checked + label .icon:after { display: none; }
.graph-indicator li.tag1 input[type=checkbox]:checked + label { color: #3bcb9f; }
.graph-indicator li.tag1 input[type=checkbox]:checked + label .icon { background-color: #3bcb9f; }
.graph-indicator li.tag2 input[type=checkbox]:checked + label { color: #f24830; }
.graph-indicator li.tag2 input[type=checkbox]:checked + label .icon { background-color: #f24830; }
.graph-indicator li.tag3 input[type=checkbox]:checked + label { color: #6ecede; }
.graph-indicator li.tag3 input[type=checkbox]:checked + label .icon { background-color: #6ecede; }
.graph-indicator li .label { margin-left: 2rem; font-size: 1.2rem; font-weight: 500; }
.graph-indicator li:first-child .label{ margin-left: 0; }
.graph-indicator li .label::before { content: ''; display: inline-block; width: 1rem; height: 1rem; border-radius: 100%; margin-right: .3rem; }
.graph-indicator li .label.kwg::before { background-color: #f24830; }
.graph-indicator li .label.benchmark::before { background-color: #3bcb9f; }
.graph-indicator li .label.kospi::before { background-color: #6ecede; }
.graph-indicator li .label.kwg { color: #f24830; }
.graph-indicator li .label.benchmark { color: #3bcb9f; }
.graph-indicator li .label.kospi { color: #6ecede; }

.accordion-container.type-gbi-comment { margin-top: 0; }
.accordion-container.type-gbi-comment .accordion { overflow: hidden; margin-bottom: 1.5rem; padding: 0; border-radius: 1.2rem; border-bottom: 0; background-color: #fff; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.08); }
.accordion-container.type-gbi-comment .accordion:last-child { margin-bottom: 0; }
.accordion-container.type-gbi-comment .accordion .accordion-head button { position: relative; width: 100%; height: auto; margin-left: 0; padding: 1.6rem 5.2rem 1.6rem 5.1rem; border-bottom: 0; line-height:2.4rem; font-size: 1.4rem; font-weight: 500; color: var(--text-color-00); transition: color .2s; }
.accordion-container.type-gbi-comment .accordion .accordion-head button:before { position: absolute; top: 1.6rem; left: 1.6rem; content: ''; display: inline-block; width: 2.7rem; height: 2.5rem; margin-right: .5rem; background: url(../images/pension/icon-talk.png) no-repeat 0 0; background-size: 100% auto; vertical-align: middle; }
.accordion-container.type-gbi-comment .accordion .accordion-head button:after { position: absolute; top: 2rem; right: 2rem; content: ''; display: block; width: 1rem; height: 1rem; border-width: 0 .2rem .2rem 0; border-style: solid; border-color: #c8c8c8; background: none; transform-origin: center; transform: rotate(45deg); }
.accordion-container.type-gbi-comment .accordion.on .accordion-body { padding: .5rem 1.6rem 3rem; border: 0; background-color: #fff; }
.accordion-container.type-gbi-comment .accordion.on .accordion-body-contents, 
.accordion-container.type-gbi-comment .accordion.on .accordion-body-contents p { color: var(--text-color-02); font-size: 1.4rem; line-height: 2.2rem; }
.accordion-container.type-gbi-comment .accordion.on .accordion-head button::after { transform: translateY(50%) rotate(-135deg); }
.accordion-container.type-gbi-comment .accordion.on .accordion-body-contents p + p { margin-top: 3rem; }

/* 키우GO 운용보고서 */
select.icon-cal { position: relative; height: 3rem; width: auto; min-width: 10rem; max-width: 12rem; line-height: 2.8rem; margin-left: .6rem; padding: 0 2.3rem 0 3rem; border: 1px solid #ddd; border-radius: 3rem; font-size: 1.1rem; color: #000; background: url(../images/icon-dropdown.png) no-repeat calc(100% - 1rem) 50%, url(../images/icon-calander.png) no-repeat .9rem 50%; background-size: .7rem auto, 1.6rem auto; }
.txt-cont-list2 dl { display: flex; flex-wrap: wrap; font-size: 1.3rem; }
.txt-cont-list2 dt { width: 40%; margin-top: 1.4rem; color: #666; font-weight: 400; }
.txt-cont-list2.bullet dt::before { content: ''; display: inline-block; width: .3rem; height: .3rem; margin: -.2rem .5rem 0 0; background-color: #ddd; vertical-align: middle; }
.txt-cont-list2 dd { width: 60%; margin-top: 1.4rem; text-align: right; }
.txt-cont-list2 dt:first-child,
.txt-cont-list2 dd:nth-child(2) { margin-top: 0; }
.summary-box { padding: 2rem; background-color: #f5f5f5; border-radius: .6rem; font-size: 1.2rem; }
.summary-box + .summary-box { margin-top: 2rem; }
.summary-box .tit { margin-bottom: 1rem; font-size: 1.3rem; font-weight: 700; }
.summary-box p { color: var(--text-color-02); }
.accordion-container.type-info > .accordion { margin-top: 2rem; }
.accordion-container.type-info > .accordion.on > .accordion-body { display: block; padding: 2rem 0 0; background-color: #fff; }
.accordion-container.type-info > .accordion > .accordion-head button { width: 100%; height: auto; margin-left: 0; padding: 2rem 1.8rem 1rem 0; border-bottom: 1px solid #666; font-size: 1.4rem; color: var(--text-color-00); font-weight: 500; letter-spacing: -.03rem; }
.accordion-container.type-info > .accordion > .accordion-head button::after { content: ''; top: 2.5rem; display: inline-block; width: 0; height: 0; border-style: solid; border-width: .7rem .5rem 0 .5rem; border-color: #ddd transparent transparent transparent; vertical-align: middle; }
.accordion-container.type-info > .accordion > .accordion-head .info-txt { display: none; }
.accordion-container.type-info > .accordion.on > .accordion-head .info-txt { display: inline; margin-left: .4rem; font-size: 1rem; color: var(--text-color-02) }
.accordion-container.type-info .star-list li { letter-spacing: 0; }
.accordion-container.type-unit .accordion:first-child { margin-top: 0; }
.accordion-container.type-unit .accordion { margin-top: 1rem; border: 1px solid #eee; border-radius: .6rem; }
.accordion-container.type-unit .accordion .accordion-head button { width: 100%; height: auto; margin: 0; padding:1.5rem 4.5rem 1.5rem 1.6rem; border-bottom: 0; font-weight: 500; font-size: 1.4rem; }
.accordion-container.type-unit .accordion .accordion-head button::after { top: 1.8rem; right: 2rem; width: 1rem; height: 1rem; background: none; border: 2px solid #c8c8c8; border-top: 0; border-left: 0; transform: rotate(45deg); }
.accordion-container.type-unit .accordion.on .accordion-head button::after { transform: translateY(.5rem) rotate(225deg); }
.accordion-container.type-unit .accordion .accordion-body { padding: 0 1.6rem; background-color: transparent; }
.accordion-container.type-unit .item-list li { padding: 1.5rem 0 2rem; border-top: 1px solid #eee; }
.accordion-container.type-unit .item-list .top-area { padding-bottom: 2rem; }
.accordion-container.type-unit .item-list .top-area .txt-sub { display: block; margin-bottom: 1rem; color: var(--text-color-02); font-size: 1.2rem; }
.accordion-container.type-unit .item-list .top-area .tit { display: block; color: var(--text-color-00); font-weight: 500; }
.accordion-container.type-unit .item-list .top-area .tit .ptf-flag { margin-right: .4rem; }
.icon-indicator { display: inline-block; width: 1.3rem; height: 1.3rem; margin-right: .4rem; border-radius: 100%; vertical-align: middle; }
.icon-indicator.type1 { background-color: #36acc1; }
.icon-indicator.type2 { background-color: #ffe689; }
.icon-indicator.type3 { background-color: #9ceae2; }
.icon-indicator.type4 { background-color: #7ce683; }
.icon-indicator.type5 { background-color: #ebebeb; }
.bullet-list > li { margin-top: 1rem; font-size: 1.2rem; color: #666; letter-spacing: 0; }
.bullet-list > li:first-child { margin-top: 0; }
.bullet-list ul > li,
.bullet-list ul > li:first-child { margin-top: .5rem; }
.bullet-list.num > li { margin-top: .5rem; padding-left: 1.5rem; text-indent: -1.5rem; }
.bullet-list.indent1-3 > li { padding-left: 1.3rem; text-indent: -1.3rem; }
.bullet-list.indent7 > li { padding-left: .7rem; text-indent: -.7rem; }
.bullet-list li.indent9 { padding-left: .9rem; text-indent: -.9rem; }
.comingsoon-box { width: 26.6rem; height: 26.6rem; padding: .7rem 1.3rem 1.9rem; background: url(../images/icon-report.png) no-repeat 50% 5.1rem, url(../images/img-bg-circle.png) no-repeat 0 0; background-size: 4.8rem, contain; color: #fff; }
.comingsoon-box .txt1 { display: inline-block; margin-bottom: .7rem; padding: 10.4rem 0 1rem; font-size: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.comingsoon-box .txt2 { line-height: 1.6; font-weight: 300; }

/* 온라인 설명의무 */
.explanation-duty .dot-list {
    padding:0;
    margin:0.6rem 0 0 0;
}
.explanation-duty .dot-list li {
    color:#616161;
    font-size:1.3rem;
    line-height:1.8rem;
    margin-top:0.3rem;
}
.explanation-duty .dot-list li:before {
    width:0.3rem;
    height:0.3rem;
    background-color:#bbb;
}
.explanation-duty .dot-list.type2 {
    padding:0;
    margin:0.6rem 0 1rem 0;
}
.explanation-duty .dot-list.type2 li {
    padding-left:10px;    
}
.explanation-duty .modal-con .dot-list.type2 li:before {
    position:absolute;
    top:1.0rem;
    width:5px;
    height:1px;
}

.explanation-duty .radio-group-wrap {
    display:flex;
    gap:0.6rem;    
}
.explanation-duty .radio-wrap {
    position:
    relative;
    flex:1;
    width: 100%;
    margin-right: 0;
}
.explanation-duty .radio-wrap input[type=radio] + label::before {
   top: 1.1rem;
   left:1rem;
}
.explanation-duty .radio-wrap input[type=radio] + label {
    display:
    flex;
    align-items: center;
    position:
    relative;
    width:100%;
    min-height: 4rem;
    border:1px solid #999;
    border-radius:0.4rem;
    padding: 0.5rem 3rem 0.5rem 3.4rem;
    font-size: 1.4rem;
    line-height:1.8rem;
    letter-spacing: -0.09rem;
    color:#666;
    transition:
    all 0.2s;
}
.explanation-duty .radio-wrap input[type=radio] + label i {
    position:relative;
    width:1.5rem;
    height:1.5rem;
    margin-right:0.6rem;
    transition:all 0.2s;    
}
.explanation-duty .radio-wrap input[type=radio] + label i:before,
.explanation-duty .radio-wrap input[type=radio] + label i:after {
    display:block;
    position:absolute;
    content:"";
    width:1px;
    background-color:#ddd;
    transition:all 0.2s;
} 
.explanation-duty .radio-wrap input[type=radio] + label i:before {
    height: 0.6rem;
    transform: rotate(-45deg);
    left: 0.3rem;
    top: 0.6rem;    
}
.explanation-duty .radio-wrap input[type=radio] + label i:after {
    height: 1.3rem;
    transform: rotate(45deg);
    left: 0.9rem;
    top: 0rem;
}

.explanation-duty .radio-wrap input[type=radio]:checked + label i:before,
.explanation-duty .radio-wrap input[type=radio]:checked + label i:after {
    background-color:#212266;
}
.explanation-duty .content.divider {
    border-bottom:0.5rem solid #eee;
}
.explanation-duty .content.bg-gray {
    background-color:#f7f7f7;
}
.explanation-duty .content h3 {
    font-size:1.6rem;
    line-height:2.3rem;
    margin-top:0.5rem;
    color:#212121;
    word-break:keep-all;
}
.explanation-duty .content h4.c-gray {
    color: #616161;
    font-size:1.4rem;
    line-height:2.2rem;
}
.explanation-duty .content h3+h4 {
    margin-top:0.8rem;
}

.explanation-duty [data-toggle-con] {
    display:none;
}
.explanation-duty [data-toggle-con][aria-hidden=false] {
    display:block;
} 
.explanation-duty .toggle-btn {
    border-bottom:1px solid #616161;
    font-size:1.2rem;
    line-height:1.4rem;
    display:inline-block;
}
.explanation-duty .toggle {
    text-align:center;
}
.explanation-duty .slide-control-button-group {
    position:absolute;
    left:0;
    bottom:0;
    padding-bottom:2rem;
    top:auto;
    width:100%;
    transform:none;
    display:flex;
    justify-content: center;
}
.explanation-duty .slide-control-button-group .swiper-pagination {
    margin-top:0;
}
.explanation-duty .slide-control-button-group .swiper-pagination .swiper-pagination-bullet {
    width:0.6rem;
    height:0.6rem;
    border-radius:1rem;
    background-color:#c3c3c3;
    font-size:0;
    line-height:0;
    transition:all 0.2s;
}
.explanation-duty .slide-control-button-group .swiper-pagination .swiper-pagination-bullet-active {
    width:1.8rem;
}
.explanation-duty .content .con-header {
    margin-bottom:2.6rem;
}
.explanation-duty .content h2 {
    font-size:1.6rem;
    line-height:2rem;
    letter-spacing: -0.0135rem;
    font-weight:600;
}
.explanation-duty .content h2 + p, .explanation-duty .content h2 + p + p {
    font-size:1.4rem;
    line-height:1.8rem;
    margin-top:0.4rem;
    color:#666;
    letter-spacing: -0.0105rem;
}
.explanation-duty .content .answer-txt {
    margin-top:10px;
    font-size: 16px;
}
.explanation-duty .content .answer-txt > span {
    color:#e22d72;
}
.explanation-duty .content .answer-txt > span.complete {
    color:#181949
}
.explanation-duty .ui-pop-content {
    padding:0;
}
.explanation-duty .content .con-header p {
    color:#616161;
    font-size:1.4rem;
    line-height:2.2rem;
}
.explanation-duty .bx-options .header.bar::before {
    display:none;
}
.explanation-duty .content .con-box-header {
    display:flex;
    justify-content: center;
    align-items: center;
    padding:0.8rem 0.5rem 0.9rem;
    border-radius:0.3rem 0.3rem 0 0;
    border:1px solid #deecfb;
    background-color:#f2f8ff;
    color:#212266;
    font-size:1.4rem;
    line-height:2rem;
}
.explanation-duty .content .con-box-list {
    display:flex;
    border:1px solid #ddd;
    border-top:0;
    border-radius:0 0 0.3rem 0.3rem;
    
}
.explanation-duty .content .flex-box {
    display:flex;
}
.explanation-duty .content .flex-box + .flex-box {
    margin-top:1rem;
}
.explanation-duty .content .flex-box .con-box {
    flex:1;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
}
.explanation-duty .content .flex-box .dot-list {
    margin-top:0;
}
.explanation-duty .content .flex-box .dot-list li {
    color:#333;
    font-size:1.4rem;
    line-height:2rem;
    letter-spacing: -0.105rem;
}
.explanation-duty .content .flex-box .dot-list li:first-child {
    margin-top:0;
}
.explanation-duty .content .flex-box .con-box + .con-box {
    margin-left:0.6rem;
}
.explanation-duty .content .flex-box .con-box-body {
    word-break:keep-all;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 0.8rem 1.5rem 1.1rem;
    border: 1px solid #ddd;
    border-top: 0;
    border-radius: 0 0 0.3rem 0.3rem;
    min-height: 3.6rem;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: -0.105rem;
    color: #333;    
}
.explanation-duty .content .flex-box .con-box-body.display-block {
    display:block;
}
.explanation-duty .content .flex-box .con-box-body .underline {
    text-decoration:underline;
}
.explanation-duty .content .flex-box .con-box-body.txt-l {
    align-items: flex-start;
    text-align:left;
}
.explanation-duty .content .con-box-item {
    flex:1;
    padding:1.2rem;
}
.explanation-duty .content .con-box-item:nth-child(2) {
    border-left:1px solid #ddd;
    margin-top:0;
}
.explanation-duty .content .con-box-item h4 {
    font-size:1.4rem;
    line-height:2rem;
    color:#333;
    font-weight:600;
}
.explanation-duty .content .con-box-item .inner-item {
    position:relative;
    padding-left:0.9rem;
    font-size:1.4rem;
    line-height:1.8rem;
    color:#616161;
}
.explanation-duty .content .con-box-item .inner-list.bold .inner-item {
    color:#333;
    font-weight:600;
}
.explanation-duty .content .con-box-item .inner-item + .inner-item {
    margin-top:0.2rem;
}
.explanation-duty .content .con-box-item .inner-item:before {
    display:block;
    position:absolute;
    content:"";
    left:0;
    top:0.8rem;
    width:0.3rem;
    height:0.3rem;
    border-radius:50%;
    background-color:#bbb;
}
.explanation-duty .content .con-box-item .inner-item p {
    margin-top:0.4rem;
    font-size:1.3rem;
    line-height:1.8rem;
    color:#616161;
    font-weight:400;
}
.explanation-duty .content .con-box-item .inner-list.type2 {
    margin-top:0.4rem;
}
.explanation-duty .content .con-box-item .inner-list.type2 .inner-item {
    padding-left:1rem;
    font-size:1.3rem;
    font-weight:400;
    line-height:1.8rem;
    color:#616161;
}
.explanation-duty .content .con-box-item .inner-list.type2 .inner-item:before {
    display:block;
    position:absolute;
    left:0;
    top:1rem;
    width:0.5rem;
    height:0.1rem;
    background-color:#616161;    
}

.explanation-duty .content .ask-list + .notice {
    margin-top:2.4rem
}
.explanation-duty .content .ask {
    font-size:1.4rem;
    line-height:2rem;
    margin-bottom:1rem;
    word-break:keep-all;
}
.explanation-duty .content .ask-item {
    margin-top:2rem;
}
.explanation-duty .content .ask-item:first-child {
    margin-top:0;
}
.explanation-duty .content .ask-item .error {
    color:#fc1717;
    font-size: 1.2rem;
    margin-top:0.5rem
}
.explanation-duty .danger-list {
    border-top:1px solid #ccc;
}
.explanation-duty .danger-item {
    display: flex;
    padding: 1.2rem 1.2rem 1.2rem 0.8rem;
    border-bottom: 1px solid #ddd;
    min-height: 6.4rem;
}
.explanation-duty .danger-item .danger-chart {
    flex:7.2rem;
    display:flex;
    align-items: flex-start;
}
.explanation-duty .danger-item .danger-text {
    flex:calc(100% - 7.2rem);
    font-size:1.2rem;
    line-height:1.6rem;
    color:#616161;
    letter-spacing: -0.09rem;
}
.explanation-duty .danger-item .danger-text .dot-list {
    margin:0;
}
.explanation-duty .danger-item .danger-text .dot-list li {
    margin:0;
    font-size:1.2rem;
    line-height:1.8rem;
    color:#616161;
}
.explanation-duty .danger-item .danger-text .dot-list li:before {
    width:0.3rem;
    height:0.3rem;
    background-color:#bbb;
}
.explanation-duty .content-inner h4 {
    font-size:1.8rem;
    line-height:2.2rem;
    color:#212121;
    font-weight:600;
    margin-bottom:1.1rem;
}
.explanation-duty .danger-box + .dot-list {
    margin-top:2rem;
}
.explanation-duty .danger-box + .dot-list li {
    margin-top:0.6rem;
}
.explanation-duty .bx-options .header .title {
    text-align:left;
    padding:0 1.4rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.explanation-duty .bx-options .header .title .paging {
    font-size:1.2rem;
    line-height:1.8rem;
    color:#616161;
    font-weight:400;
}
.explanation-duty .bx-options .header .title .paging em {
    font-weight:600;    
    color:var(--point-color-10);
}
.explanation-duty .pay-box .pay-title {
    flex:1;
    color:#616161;
    font-size:1.4rem;
    line-height:2.4rem;
}
.explanation-duty .pay-box .pay-quantity {
    text-align:right;
    flex:1;
    color:#212121;
    font-size:1.4rem;
    line-height:2.4rem;
}
.explanation-duty .pay-item {
    display:flex;
    margin-top:0.2rem;
}
.explanation-duty .pay-item:first-child {
    margin-top:0;
}
.explanation-duty .pay-total {
    padding-top:1.6rem;
    margin-top:1rem;
    border-top:1px solid #eee;
    font-weight:600;
}
.explanation-duty .pay-total-inner {
    display:flex;
}
.explanation-duty .pay-box .pay-total .pay-title,
.explanation-duty .pay-box .pay-total .pay-quantity {
    line-height:1;
}
.explanation-duty .icon-wrap {
    display:flex;
    align-items:center;
    justify-content: flex-start;
    font-size:1.8rem;
    font-weight:600;
    line-height:2.2rem;
    margin-bottom:1rem;
}
.explanation-duty .icon-wrap .icon {
    display:inline-block;
    width:3rem;
    height:3rem;
    margin-right:0.8rem;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
}
.explanation-duty .floating-wrap {
    position:absolute;
    right:0;
    bottom:0;
    z-index:2990;
}
.explanation-duty .floating {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-end;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:10;
    padding:6.6rem 1.6rem 13rem;
    visibility:hidden;
    opacity:0;
    transition:all 0.2s 0.2s;
}
.explanation-duty .floating-wrap .floating-dimm {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:-1;
}
.explanation-duty .floating-btn-wrap {
    display:flex;
    flex-direction: column;
    align-items:flex-end;
    gap:1.4rem;
    text-align:right;
}
.explanation-duty .floating-item {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    font-size:1.4rem;
    line-height:1.6rem;
    color:#fff;
}
.explanation-duty .floating-item a {
    display:inline-block;
    position:relative;
    margin-left:1rem;
}
.explanation-duty .floating-item a i {
    display:block;
    width:4.6rem;
    height:4.6rem;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
}
.explanation-duty .floating-item a span {
    display:inline-flex;
    position:absolute;
    width:calc(100% - 0.3rem);
    bottom:0;
    left:50%;
    font-size:0.7rem;
    line-height:1;
    padding:0.2rem 0.7rem;
    background-color:#212266;
    border-radius:1rem;
    color:#fff;
    transform:translateX(-50%);
    zoom:0.9
}
.explanation-duty .floating-item1 a i {background-image:url(../images/sti/floating-dictionary.png)}
.explanation-duty .floating-item2 a i {background-image:url(../images/sti/floating-chat.png)}
.explanation-duty .floating-item3 a i {background-image:url(../images/sti/floating-guide.png)}
.explanation-duty .floating-item4 a i {background-image:url(../images/sti/floating-calc.png)}
.explanation-duty .floating-item5 a i {background-image:url(../images/sti/floating-center.png)}
.explanation-duty .floating-item6 a i {background-image:url(../images/sti/floating-counsel.png)}
.explanation-duty .floating-item7 a i {background-image:url(../images/sti/floating-center2.png)}
.explanation-duty .floating-item8 a i {background-image:url(../images/sti/floating-counsel2.png)}
.explanation-duty .floating-control {
    display:block;
    position:absolute;
    z-index:9999;
    right:1.4rem;
    bottom:5.8rem;
    margin-top:1rem;
    width:6rem;
    height:6rem;
    margin-right:-0.5rem;
}
.explanation-duty .floating-control i {
    display:block;
    width:100%;
    height:100%;
    background:url(../images/sti/floating-plus.png) no-repeat center center;
    background-size:contain;
}
.explanation-duty .floating-wrap.active {
    position:relative;
    z-index:9999;
}
.explanation-duty .floating-wrap.active .floating {
    visibility:visible;
    opacity:1;
}
.explanation-duty .floating-wrap.active .floating-control i {background-image:url(../images/sti/floating-close.png)}
.explanation-duty .icon-wrap .icon.ic_risk_01 {
    background-image:url(../images/sti/ic_risk_01.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_02 {
    background-image:url(../images/sti/ic_risk_02.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_03 {
    background-image:url(../images/sti/ic_risk_03.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_04 {
    background-image:url(../images/sti/ic_risk_04.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_05 {
    background-image:url(../images/sti/ic_risk_05.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_06 {
    background-image:url(../images/sti/ic_risk_06.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_07 {
    background-image:url(../images/sti/ic_risk_07.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_08 {
    background-image:url(../images/sti/ic_risk_08.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_09 {
    background-image:url(../images/sti/ic_risk_09.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_10 {
    background-image:url(../images/sti/ic_risk_10.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_11 {
    background-image:url(../images/sti/ic_risk_11.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_12 {
    background-image:url(../images/sti/ic_risk_12.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_13 {
    background-image:url(../images/sti/ic_risk_13.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_14 {
    background-image:url(../images/sti/ic_risk_14.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_15 {
    background-image:url(../images/sti/ic_risk_15.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_16 {
    background-image:url(../images/sti/ic_risk_16.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_17 {
    background-image:url(../images/sti/ic_risk_17.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_18 {
    background-image:url(../images/sti/ic_risk_18.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_19 {
    background-image:url(../images/sti/ic_risk_19.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_20 {
    background-image:url(../images/sti/ic_risk_20.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_21 {
    background-image:url(../images/sti/ic_risk_21.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_22 {
    background-image:url(../images/sti/ic_risk_22.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_23 {
    background-image:url(../images/sti/ic_risk_23.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_24 {
    background-image:url(../images/sti/ic_risk_24.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_25 {
    background-image:url(../images/sti/ic_risk_25.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_26 {
    background-image:url(../images/sti/ic_risk_26.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_27 {
    background-image:url(../images/sti/ic_risk_27.png);
}
.explanation-duty .icon-wrap .icon.ic_risk_28 {
    background-image:url(../images/sti/ic_risk_28.png);
}

.explanation-duty .icon-wrap .icon.ic_rights_01 {
    background-image:url(../images/sti/ic_rights_01.png);
}
.explanation-duty .icon-wrap .icon.ic_rights_02 {
    background-image:url(../images/sti/ic_rights_02.png);
}
.explanation-duty .icon-wrap .icon.ic_rights_03 {
    background-image:url(../images/sti/ic_rights_03.png);
}
.explanation-duty .icon-wrap .icon.ic_rights_04 {
    background-image:url(../images/sti/ic_rights_04.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_01 {
    background-image:url(../images/sti/ic_disadvantage_01.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_02 {
    background-image:url(../images/sti/ic_disadvantage_02.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_03 {
    background-image:url(../images/sti/ic_disadvantage_03.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_04 {
    background-image:url(../images/sti/ic_disadvantage_04.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_05 {
    background-image:url(../images/sti/ic_disadvantage_05.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_06 {
    background-image:url(../images/sti/ic_disadvantage_06.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_07 {
    background-image:url(../images/sti/ic_disadvantage_07.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_08 {
    background-image:url(../images/sti/ic_disadvantage_08.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_09 {
    background-image:url(../images/sti/ic_disadvantage_09.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_10 {
    background-image:url(../images/sti/ic_disadvantage_10.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_11 {
    background-image:url(../images/sti/ic_disadvantage_11.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_12 {
    background-image:url(../images/sti/ic_disadvantage_12.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_13 {
    background-image:url(../images/sti/ic_disadvantage_13.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_14 {
    background-image:url(../images/sti/ic_disadvantage_14.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_15 {
    background-image:url(../images/sti/ic_disadvantage_15.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_16 {
    background-image:url(../images/sti/ic_disadvantage_16.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_17 {
    background-image:url(../images/sti/ic_disadvantage_17.png);
}
.explanation-duty .icon-wrap .icon.ic_disadvantage_18 {
    background-image:url(../images/sti/ic_disadvantage_18.png);
}
.explanation-duty .modal-con,
.explanation-duty .modal-con .dot-list li {
    font-size:1.4rem;
    color:#616161;
    line-height:2rem;
}
.explanation-duty .modal-con .dot-list li:before {
    top:0.9rem;
}
.explanation-duty.ui-popup .ui-pop-content.bottom-use {
    position:relative;
    margin-bottom:0;
}
.explanation-duty .swiper-container {
    position: static;
    height: calc(100% - 4rem);
    margin-bottom: 0;
}
.explanation-duty .swiper-wrapper {
    height:100%;
}
.explanation-duty .swiper-slide {
    height:auto;
    overflow-y:auto;
}





/*new 온라인설명의무*/
.explanation-duty .dot-list > li.dot-none {
    margin-left: -7px;
}
.explanation-duty .dot-list > li.dot-none:before {
    display: none;
    margin-left: -7px;
}
.explanation-duty .scroll-area {
    height:calc(100vh - 13.2rem);
    overflow-y: auto;
}
.explanation-duty .list-area > li {
    padding: 1.5rem 1.4rem
}
.explanation-duty .top-step-list.type1 {
    height:3rem;
    background:#fff;
    border-bottom: 1px solid #ddd;
}
.explanation-duty .tb01 {
    font-size: 1.2rem;
}
.explanation-duty .tb01 th {
    color:#666;
    text-align: left;
    vertical-align: top;
}
.explanation-duty .tb01 th, .explanation-duty .tb01 td {
    padding:0.5rem 0
}
.explanation-duty .bx-options.active .content {
    z-index: 101;
}

/*old*/
.risk-grade3 {
display: flex;
justify-content: flex-start;
flex-direction: column;
position: relative;
z-index: 10;
width: 24rem;
height: 13rem;
padding-top:7.5rem;
text-align:center;
margin:0 auto;
}
.risk-grade3 .small-text {
letter-spacing: -0.6px;
}
.risk-grade3 .sub-grade {
font-size: 2rem;
line-height: 1.2;
color: #777;
letter-spacing: -0.58px;
}
.risk-grade3.degree5 {
    margin-top:2rem;
    margin-bottom:1.5rem;
}
.risk-grade3.degree5 .small-text {
font-size: 2rem;
line-height: 1.2;
margin-bottom:0;
}
.risk-grade3:before {
    display: block;
    content: '';
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.risk-grade3.degree5.grade1:before {
background: url('../../resources/images/sti/icon-risk-grade3-degree5-grade1.png') no-repeat center center;
background-size: contain;
}
.risk-grade3.degree5.grade2:before {
background: url('../../resources/images/sti/icon-risk-grade3-degree5-grade2.png') no-repeat center center;
background-size: contain;
}
.risk-grade3.degree5.grade3:before {
background: url('../../resources/images/sti/icon-risk-grade3-degree5-grade3.png') no-repeat center center;
background-size: contain;
}
.risk-grade3.degree5.grade4:before {
background: url('../../resources/images/sti/icon-risk-grade3-degree5-grade4.png') no-repeat center center;
background-size: contain;
}
.risk-grade3.degree5.grade5:before {
background: url('../../resources/images/sti/icon-risk-grade3-degree5-grade5.png') no-repeat center center;
background-size: contain;
}



.risk-grade4 {
    position: relative;
    height: 7.2rem;
}
.risk-grade4 .small-text {
letter-spacing: -0.6px;
}
.risk-grade4.degree5 .small-text {position: absolute;font-size: 1.2rem;line-height: 1.2;
margin-bottom:0;}
.risk-grade4:before {
    display: block;
    content: '';
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.risk-grade4.degree5.grade1:before {
background: url('../../resources/images/sti/icon-risk1-grade3-degree5-grade1.png?20231221') no-repeat center center;
background-size: contain;
}
.risk-grade4.degree5.grade2:before {
background: url('../../resources/images/sti/icon-risk1-grade3-degree5-grade2.png?20231221') no-repeat center center;
background-size: contain;
}
.risk-grade4.degree5.grade3:before {
background: url('../../resources/images/sti/icon-risk1-grade3-degree5-grade3.png?20231221') no-repeat center center;
background-size: contain;
}
.risk-grade4.degree5.grade4:before {
background: url('../../resources/images/sti/icon-risk1-grade3-degree5-grade4.png?20231221') no-repeat center center;
background-size: contain;
}
.risk-grade4.degree5.grade5:before {
background: url('../../resources/images/sti/icon-risk1-grade3-degree5-grade5.png?20231221') no-repeat center center;
background-size: contain;
}
.risk-grade4.degree5.grade6:before {
background: url('../../resources/images/sti/icon-risk1-grade3-degree5-grade6.png?20231221') no-repeat center center;
background-size: contain;
}



.risk-stick-grade {
    display:block;
    position:relative;
    width:4.8rem;
    height:3rem;
}
.risk-stick-grade:before {
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    content:"";
    background-repeat:no-repeat;
    background-position:top center;
    background-size:contain;
}
.risk-stick-grade:after {
    display: block;
    position: relative;
    left: 0;
    top: 2.3rem;
    width: 100%;
    font-weight: 600;
    font-size:1.2rem;
    content: "";
}
.risk-stick-grade.degree5.grade1:before {
    background-image: url('../../resources/images/sti/icon-risk-stick-grade-degree5-grade1.png?20231208')
}
.risk-stick-grade.degree5.grade1:after {
    content:"매우낮은위험";
}
.risk-stick-grade.degree5.grade2:before {
    background-image: url('../../resources/images/sti/icon-risk-stick-grade-degree5-grade2.png?20231208')
}
.risk-stick-grade.degree5.grade2:after {
    content:"낮은위험";
}
.risk-stick-grade.degree5.grade3:before {
    background-image: url('../../resources/images/sti/icon-risk-stick-grade-degree5-grade3.png?20231208')
}
.risk-stick-grade.degree5.grade3:after {
    content:"보통위험";
}
.risk-stick-grade.degree5.grade4:before {
    background-image: url('../../resources/images/sti/icon-risk-stick-grade-degree5-grade4.png?20231208')
}
.risk-stick-grade.degree5.grade4:after {
    content:"다소높은위험";
}
.risk-stick-grade.degree5.grade5:before {
    background-image: url('../../resources/images/sti/icon-risk-stick-grade-degree5-grade5.png?20231208')
}
.risk-stick-grade.degree5.grade5:after {
    content:"높은위험";
}
.risk-stick-grade.degree5.grade6:before {
    background-image: url('../../resources/images/sti/icon-risk-stick-grade-degree5-grade6.png?20231208')
}
.risk-stick-grade.degree5.grade6:after {
    content:"매우높은위험";
}