@import url(reset.css);
@import url(common.css?ver=20250701);
/* body{
	touch-action:none;
} */
.ml4{margin-left: 4px !important;}
.ml8{margin-left: 8px !important;}
.mt12{margin-top: 12px !important;}
.mt16{margin-top: 16px !important;}
.mt48{margin-top: 48px !important;}
.bg-gray {background-color: #f3f5f7 !important;}
.line-divider.sty01 { width: calc(100% + 32px); margin: 40px -16px;}
.line-divider { height: 10px; background-color: #f3f3f7; margin: 32px -24px 40px; display: block; position: relative; width: calc(100% + 48px);}
.sm-text, .order-date {font-size: 13px; color: #888; margin-top: 4px; line-height: 20px;}
.invest-content .md-title strong{font-size: 22px; line-height: 30px; display: block; margin-bottom: 16px;}
.invest-content .md-title .sm-text { margin: 8px 0; font-size: 14px; line-height: 20px;}
.contents{word-break: keep-all;}
.list-refer{position: relative;font-size: 14px; color: #929292; line-height: 20px; padding-left: 14px;}
.list-refer::before{content: '※'; position: absolute; left: 0;  top: 0; font-size: 12px;}
.list-refer.ft12{margin-top: 8px;}
.list-refer.ft12{ font-size: 12px; line-height: 18px; padding-left: 16px;}
.chk-box .form-group [type="checkbox"]+label::after{top:28px}
/* .list-refer.ft12::before{top: -1px;} */
/* 호가·체결 탭 */
.tabs.box-wrap{position: absolute; top: 0; left: 0; z-index: 9; height: 32px;}
.tabs.box-wrap ul{padding:0; border: none; }
.tabs.box-wrap li{background-color: #f3f5f7; border-radius: 6px 6px 0 0; border: 1px #f3f5f7 solid; border-bottom: none !important;}
.tabs.box-wrap li button{font-size: 13px; color: var(--color-92); line-height: 32px; }
.tabs.box-wrap li.on{background-color: #fff; border: var(--line-dc);}
.tabs.box-wrap ul li::after,
.tabs.box-wrap ul li.on::after{content: none;}
/* 본인확인 */
.service-info{background-color: #fff; padding: 32px 0px 40px;}
.service-info .service-text{font-size: 22px; line-height: 30px; font-weight: 700;}
.service-info .text-sm{line-height: 20px; color: var(--color-76); margin-top: 8px;}
.agree-content{padding:0;}
.agree-box{padding:0; background-color: #fff;}
.chk-sub .dl-list dl{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; flex-direction: column;}
.chk-sub .dl-list dl dt{font-size: 14px; font-weight: 700; line-height: 14px; color: #2e343a;margin-bottom: 8px;}
.chk-sub .dl-list dl dd{width: 100%;}
.chk-sub .dl-list dl dd input{border: none; line-height: 52px; font-size: 16px; padding: 0;}
.chk-sub .dl-list.input-wrap{position:relative;}
.chk-sub .dl-list.input-wrap dd::after{content: ''; width: 100%; height:1px; background-color: #dcdee0; position: absolute; left: 0; bottom: 1px;}
.chk-sub .dl-list.input-wrap dd.active::after{background-color:#2e343a; height: 2px;}
.chk-sub .dl-list.input-wrap .input-sub{height: 52px; display: flex; align-items: center; width: 100%;}
.chk-sub .dl-list.input-wrap .input-sub .password-dot+.password-dot{margin-left: 6px;}
.chk-sub .dl-list.input-wrap .input-sub .password-dot{width: 10px; height: 10px;}
.chk-sub .dl-list.input-wrap + .input-wrap{margin-top: 32px;}
.agree-content .form-group + .form-group{border-top: var(--line-ed);}
.chk-box .form-group + .form-group{border-top: none; margin-top: 10px;}
.chk-box .form-group{padding: 0;}
.chk-box .form-group:last-child{border: none;}
.id-list .form-group{min-height: 70px; display: flex; align-items: center;}
.id-list .form-group  a{font-size: 16px; line-height: 22px; padding:24px 0; width: 100%;}
/* .agree-content .form-group:first-child{margin-top: -24px;} */
/* .agree-content .form-group:last-child{margin-bottom: 16px;} */
/* 주식계좌 연결 완료 */
.agree-content.chk-box{margin-bottom: 40px;}
.chk-box .form-group .apply-area{position: relative; cursor: pointer; padding: 19px 20px; display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: var(--color-1e); font-weight: 700; line-height: 16px; border: var(--line-40); border-radius: 8px; box-shadow: 4px 4px 4px 0px #0000000a;}
/* .chk-box .form-group .apply-area.fail{box-shadow:0 0 0 1px var(--color-ed) inset; border: var(--line-red);} */
.chk-box .form-group .apply-area .txt-right{font-size: 14px; line-height: 14px; color:var(--color-1e); font-weight: 400; display: flex; align-items: center;}
.chk-box .form-group .apply-area .txt-right::after{content:''; width:14px; height:14px; display:inline-block; background-color: #404048; -webkit-mask: url(/inc/naver/img/icon/ic-Check.svg) no-repeat center; -webkit-mask-size: 14px auto; border:none; margin-left: 2px;}
.chk-box .form-group .apply-area.fail{background: #f7f9fa; border-color: #f7f9fa; box-shadow: none; color: #c8cacc;}
.chk-box .form-group .apply-area.fail .txt-right::after{content: none;}
.chk-box .form-group .apply-area.fail .txt-right{color: var(--color-ed);}
.chk-box .form-group .apply-area.fail button{color: var(--color-9292);}
.chk-box .form-group .apply-area.fail .txt-right .btn-tooltip::after{margin-left: 2px;}
.page-info.left{text-align: left; margin: 24px 20px 30px;}
.page-info{background-color: #f3f5f7; border-radius: 8px; padding: 24px; margin: 0;}
.page-info .tit{font-size: 16px; line-height: 20px; color: var(--color-1e); font-weight: 700;}
.page-info .list-bar li{font-size: 14px; line-height: 20px;}
.page-info .list-bar li::before{top: 8px;}
.page-info .tit + .list-bar{margin-top: 16px;}
.agree-content [type="checkbox"]:disabled + label{background: #f7f9fa; border-color: #f7f9fa; box-shadow: none; color: #c8cacc;}
/* .agree-content .fail{z-index: 2; position: absolute; right: 10px; top: 50%; width: 50px; height: 56px;transform: translateY(-8px);} */
.agree-content .fail{position: relative;}
.agree-content .fail >.tooltip-cont > .btn-tooltip{z-index: 2; position: absolute; right: 10px; top: 50%; width: 50px; height: 56px; transform: translateY(9px);}
.agree-content .fail >.tooltip-cont .tooltip-view.right{top: 35px;}
.agree-content .fail button{color: var(--color-9292); }
.agree-content .fail button span{margin-right: 2px; display: inline-block; }
.agree-content [type="checkbox"]:disabled+label::after{content: none;}
.tooltip-cont.f18 button{line-height: 18px;}

/* 구매 */
.rate-container{position: relative; width: 100%; height: 100%;}
.contents.over-hidden>.rate-container{height: calc(100vh - 281px); height: calc(100svh - 281px);}
.rate-container .stock-total{margin:18px 20px; display: flex !important; align-items: flex-start; justify-content: space-between;}
.rate-container .stock-total .btn-search{background: url(/inc/naver/img/icon/ic-search.svg) no-repeat; background-size: 20px 20px; width: 20px; height: 20px;}
.rate-container .stock-total .title{font-size: 18px; line-height: 24px; font-weight: 700; margin-bottom: 3px; height: 24px; overflow: hidden; width: calc(100% - 20px);}
.rate-container .stock-total .title.mid-font{font-size: 15px;}
.rate-container .stock-total .title.max-font{font-size: 13px; line-height: 12px; align-items: center; display: flex; /* display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; */}
.rate-container .stock-total .info{display: flex; align-items: center; flex-direction: row; position: inherit;}
.rate-container .stock-total .info span{font-weight: 400;}
.rate-container .stock-total .info span + span.ico{margin-left: 4px;}
.rate-container .stock-total .info .price{font-size: 22px; line-height: 22px; font-weight: 700; }
.rate-container .stock-total .info .total{position: absolute; right: 0; font-size: 12px; line-height: 12px; color: #404048;}
.label-txt{font-size: 12px; color: #aaa; line-height: 17px; font-weight: 400; margin-bottom: 3px; display: flex; align-items: center; }
.label-txt>span + span{margin-left: 9px; position: relative;}
.label-txt>span + span::before{content: ''; height: 10px; width: 1px; display: block; background-color: #dcdee0; left: -5px; top: 50%; transform: translateY(-50%); position: absolute;}
.stock-info .label{display: inline;overflow: hidden; vertical-align: top; margin-top: 1px;}
.label[class*="case"]{border-radius: 3px; font-size: 10px; font-weight: 400; padding: 0 4px; height: 18px; line-height: 17px; flex: none; display: inline-block;}
.label.case{color: #929292;border: var(--line-dc);}
.stock-title + div.label{margin-left: 4px;}
.label  + .label{margin-left: 2px;}
.over-hidden .stock-total > div:first-child{width: 100%;}
/* .over-hidden .stock-total > div:last-child{width: 20px;height: 20px; display: flex;} */
.label.case1{border-radius: 3px; font-size: 10px; color: #929292;font-weight: 400; padding: 0 4px; border: var(--line-dc); height: 17px; line-height: 16px; flex: none; display: inline-block;}
.label.case2{color: var(--color-ed); border: 1px #ed3738 solid; background-color: #fff;}
.label.case3{color: #0083d1;  border: 1px #0083d1 solid;  background-color: #fff;}
.tooltip-label-cont{display: inline-block; line-height: initial; font-size: 12px; vertical-align: middle;}
[class*="tooltip-label"]{height: 18px; border-radius: 3px; padding: 0 4px; line-height: 18px; font-size: 10px; display: inline-block;}
.tooltip-label{color: #0a7df3; background-color: #f0faff;}
.tooltip-label2{background-color: #fff4e5; color: #ff9900;}
.tooltip-label3{color: var(--color-ed); background-color: #fff5f5;}
/* .tooltip-label4{background-color: #000;}
.tooltip-label5{color:#1E1E23; background-color: #f5f5f5;} */
.label-cont .tooltip-view{border-radius: 4px; padding: 8px; gap: 0; min-width: auto;}
.btn-trigger[class*="tooltip-label"]{margin-left: 4px;}
.tooltip-view span + span{margin-left: 4px;}
.bottom-btn-content{padding:20px 0;}
.bottom-btn-content .total{text-align: right; font-size: 20px; line-height: 26px; font-weight: 700; margin-bottom: 10px; word-break: break-all;}
.bottom-btn-content .total.mid-font{font-size: 18px; letter-spacing: -0.5px;}
.bottom-btn-content .total.max-font{font-size: 16px; line-height: 16px;}
.btn-refresh{width: 24px; height: 24px; background: url(/inc/naver/img/icon/ic-Refresh-L.svg) no-repeat center; background-size: 20px 20px;}
.btn-refresh2{width: 60px; height: 60px; background: var(--color-1e); -webkit-mask: url(/inc/naver/img/icon/ic-Refresh-L.svg) no-repeat center; -webkit-mask-size: 20px 20px; }
.rate-container [class^=stock-]{line-height: 20px; position: relative; font-weight: 700;}
.rate-container [class^=stock-title]{line-height: 22px;}
.rate-container .stock-steady{padding-left: 0;}
.rate-container .stock-upper{color: #f24538;}
.rate-container .stock-lower{color: #0083D1;}
.rate-container [class^=stock-] .ico::before{content: ''; display: inline-block; position: relative; }
.rate-container .stock-increase .ico::before{background: url(/inc/naver/img/icon/ic_ArrowPlus.svg) no-repeat; background-size: 12px 12px; width: 12px; height: 10px;}
.rate-container .stock-decrease .ico::before{background: url(/inc/naver/img/icon/ic_ArrowMinus.svg) no-repeat; background-size: 12px 12px; width: 12px; height: 12px;}
.rate-container .stock-upper .ico::before{content: ''; display: inline-block; position: relative; background: url(/inc/naver/img/icon/ic_ArrowPlusMore.svg) no-repeat; background-size: 12px 12px; width: 12px; height: 12px; top: 1px;}
.rate-container .stock-lower .ico::before{content: ''; display: inline-block; position: relative; background: url(/inc/naver/img/icon/ic_ArrowMinusMore.svg) no-repeat; background-size: 12px 12px; width: 12px; height: 12px; top: 2px;}
.rate-container .stock-upper .ico-after::after,
.price-list .stock-upper .ico-after::after{content: ''; display: inline-block; position: relative; background: url(/inc/naver/img/icon/ic_ArrowPlusMore.svg) no-repeat; background-size: 12px 12px; width: 12px; height: 12px; top: 1px;}
.rate-container .stock-lower .ico-after::after,
.price-list .stock-lower .ico-after::after{content: ''; display: inline-block; position: relative; background: url(/inc/naver/img/icon/ic_ArrowMinusMore.svg) no-repeat; background-size: 12px 12px; width: 12px; height: 12px; top: 2px;}
.summary-list{margin:0;}
.summary-cell+.summary-cell{border-top: var(--line-ed); margin: 20px 0 0; padding-top: 20px;}
[hidden]+.summary-cell{border-top: 0; margin: 0; padding: 0;}
.summary{text-align: center; border-top: var(--line-ed); margin: 20px 0 0; padding-top: 20px;}
.summary dl,
.summary-cell dl{display: flex; align-items: center; justify-content: space-between; position: relative;}
.summary-cell dl+dl{margin-top: 10px;}
.summary dl+dl{margin-top: 8px;}
.summary dl dt{color: #888; font-weight: 400;}
.summary-cell dl dt{align-items: center; text-align: left; color: var(--color-76); line-height: 22px; display: flex;}
.summary-cell dl dd{text-align: right;}
.summary-list .summary-cell ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.summary-list .summary-cell ul li .desc-text{color: #aaa;}
.summary-list .form-group [type="radio"] + label{width: 100%;}
.summary-list .form-group [type="checkbox"] + label{width: 100%;}
.summary-area .check-total{padding:20px 0 10px;display: flex;align-items: center; justify-content: space-between; position: sticky; top: 84px; background: #fff; z-index: 1;}
.summary-area .check-total .wrap-btn{margin-top: 0;}
.summary-area .check-total .form-group [type="checkbox"] + label{color: var(--color-aa);}
.summary-area .check-total .form-group [type="checkbox"]:checked + label,
.summary-area .check-total .form-group [type="checkbox"]:checked + label .stock-total{color: var(--color-09);}
.section-inner .stock-total{font-size: 16px; margin: 0;}
.section-inner .flex-between{display: flex;justify-content: space-between; align-items: center;}
.section-inner .summary-list .summary-cell .flex-between ul.stock-list li{width: 100%; line-height: 14px; font-size: 14px;}
/* .btn-bottom-area{border-top: var(--line-ed); margin: 0 20px;} */
.btn-bottom-area{margin-top: 16px;}
.list-asterisk{color: #aaa;}
.btn-bottom-area .list-asterisk{padding-left: 12px; }
.btn-bottom-area .list-asterisk::before{color: #aaa; content: '※'; font-size: 10px; top: 1px;}
.btn-bottom-area .info-txt{line-height: 20px; color: #aaa; margin:0 20px; text-align: left; padding: 16px 0px 40px;}
.btn-bottom-area .wrap-btn-fixed + .info-txt{padding-top: 0; margin-top: -4px;}
.section-inner .summary-list .summary-cell .flex-between ul.al-right li{text-align: right; font-size: 12px; line-height: 12px;color: #aaa;}
.section-inner .summary-list .summary-cell .flex-between ul.al-right li strong{text-align: right; font-size: 14px; line-height: 14px;}
.section-inner .summary-list .summary-cell .flex-between ul{display: flex; flex-wrap: nowrap; justify-content: center; flex-direction: column;}
/* 내역 정렬 */
.pop-content > .list-wrap{ margin: 20px 0 0px;}
.pop-content > .list-wrap dd{max-width: calc(100% - 100px); text-align: right;}
.dl-list dl{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.dl-list dl + dl{margin-top: 12px;}
.dl-list dl dt{ color: var(--color-9292);}
.dl-list dl dt,
.dl-list dl dd{font-size: 16px;line-height: 24px;}
.pop-content > .list-wrap.type1{ margin: 17px 0 24px;}
.list-wrap.type1 dl dt,
.list-wrap.type1 dl dd{color: var(--color-1e); }
.list-wrap.type1 dl dd strong{font-size: 16px;}
.list-wrap.type1 .sub-list{padding-left: 10px; margin-top: 10px; border-left: 4px #edeff2 solid; }
/* 종목 찾기 */

/* .contents.last{
    height: var(--app-height, 100vh); overflow: hidden;
  }
html, body{overscroll-behavior: none; overflow: hidden;} */
.search-wrap{position: relative;}
.search-wrap .btn-search,
.search-wrap input{width: 100%; border: none; height: 56px; padding: 16px 40px 16px 48px; background-color: #f3f5f7; border-radius: 10px;  text-align: left; color: #aaa; font-size: 16px; outline: none;}
.search-wrap+.title-wrap{margin-top: 40px;}
.search-form input{font-size: 16px; font-weight: 700; position: fixed;}
.search-wrap .btn-search::before,
.search-wrap::before{content: ''; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); width: 20px; height: 20px; display: block; background: #1e1e23; -webkit-mask: url(/inc/naver/img/icon/ic-search.svg); -webkit-mask-size:20px auto;}
.pop-content .search-wrap input{background: #f3f5f7; padding: 16px 40px 16px 16px;}
.search-wrap input{color: var(--color-1e);}
.search-wrap input:not(:valid)~.btn-clear,
.input-bg-wrap input:not(:valid)~.btn-clear{display: none;}
.select-form2 li.on button.btn-clear::after{content: none;}
.search-wrap input::placeholder{color: #aaa;}
.search-wrap .btn-search{line-height: 1;}
.search-content .over-scroll.select{margin-top: 16px;}
/* input 숫자 컨트롤 */
.order-wrap .input-control-wrap .input-control{margin-top: 0px; width: 100%;}
.order-wrap .input-control-wrap .label-text{ display: none; font-size: 14px; min-width: 42px; text-align: left;}
.order-wrap .stop-active .input-control-wrap .label-text{display: block;}
.order-wrap .stop-active .input-control-wrap input[type="text"],
.order-wrap .stop-active .input-control-wrap .input-control
{font-size: 12px !important;}
.order-wrap .form-group [type="checkbox"]:checked+label {
    color: var(--color-1e);
}
.order-wrap .input-control-wrap{display: flex; align-items: center; margin-top: 10px; justify-content: space-between;}
.input-control-wrap .input-control.active{box-shadow: 0 0 0 2px #404048 inset;}
.wrap-btn-input{width: 100%; margin-bottom: 10px;}
.wrap-btn-input .chk-toggle{ margin-bottom: 10px;}
.input-control{margin-top: 10px; padding: 3px 10px; justify-content: space-between; display: flex; align-items: center; background-color: #f3f5f7; border-radius: 6px; font-weight: 700; height: 40px;}
.input-control button{min-width: 14px;height: 34px;}
.input-control .minus{background: url(/inc/naver/img/icon/ic-minus.svg) no-repeat center; width: 14px;}
.input-control .plus{background: url(/inc/naver/img/icon/ic-plus.svg) no-repeat center; width: 14px; margin-left: 4px;}
.input-control input{border: none; background-color: transparent; text-align: right; line-height: 34px; font-weight: 700; padding:0 0 0 0px;}
.input-control input[type="text"]:disabled,
.input-control input[type="text"]:read-only{ color: #1e1e23 !important; padding:0 0 0 0px;}
.input-control span{display: inline-block; line-height: 34px;}
.input-control button[type='button']:disabled{opacity: .1; background-color: transparent !important;}
.input-control-wrap[disabled] .input-control,
.input-control-wrap[disabled] .input-control input{color: #c8cacc !important;opacity:1; }
.input-control-wrap[disabled] .input-control button{opacity: .1; background-color: transparent !important;}

.pop-content .flex-between.control{align-items: center; padding: 12px 0px; border-bottom: var(--line-ed);}
.pop-content .flex-between.control .wrap-btn-input{margin:0 8px; min-width: 120px;}
.pop-content .flex-between.control .wrap-btn-input .center{display: flex; align-items: center;}
.pop-content .flex-between.control .wrap-btn-input .center input{font-size: 18px; line-height: 24px; width: 45px;}
.pop-content .flex-between.control .stock-text{min-width: 92px; font-size: 16px; font-weight: 700; line-height: 22px; }
.pop-content .flex-between.control .stock-number{text-align: right; min-width: 90px; font-size: 20px; line-height: 26px; color: var(--color-09);}
@media screen and (max-width:356px){
    .pop-content .flex-between.control .stock-number{min-width: 61px;}
}
@media screen and (max-width:320px){
    .pop-content .flex-between.control .stock-text{min-width: auto;}
}

/* 구매 > 호가 */
.bid-content{display: flex; min-height: 100%; width: 100%;}
.price-list{height: calc(100vh - 281px);height: calc(100svh - 281px); overflow-y: auto; border-right: var(--line-ed); padding: 63px 0 30px;}
.price-list.sign-wrap{height: calc(100vh - 250px);height: calc(100svh - 250px); padding: 63px 0 0px;}
.price-list [vhidden] > div,
.price-list [vhidden] > p{display: none;}
.price-list [class^='check']{display: grid;grid-template-columns: 1fr 62px;grid-column-gap: inherit;position: relative;height: calc(10% - -3px);align-items: center;overflow: hidden;flex-shrink: 0; }
.price-list [class^='check'] + [class^='check']{border-top: 1px #fff solid;}
.price-list .column{height: 100%;}
.price-list .price-per{padding: 6px;}
.price-list .rate-bar{padding: 4px;}
.price-list .price-per{text-align: right; padding-right: 10px;}
.price-list .rate-wrap{width: 100%; height: 100%; position: relative;}
.price-list .rate-wrap .rate-bar{min-height: 100%; display: flex; align-items: center; background: #0000000a;font-size: 12px;text-align: left; max-width: 100% !important; color: var(--color-40);position: absolute; top: 0;}
.price-list .buy-check .rate-bar{right: initial;text-align: left;}
.price-list .column .check:nth-child(-n+13){background: #f0faff; }
.price-list .column .check:nth-child(n+14){background: #fff5f5; }
.price-list .column .sell-check{color: var(--color-ed);}
.price-list .column .buy-check{color: var(--color-0a);}
.price-list .per{font-size: 10px;line-height: 10px; margin-top: 2px;}
.price-list [class^='check'].on::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;box-shadow: 0 0 0 1px #404048 inset;}
.price-list .price-per .price{font-size: 14px; line-height: 14px; color: inherit; font-weight: 700;}
.price-list [class^='fixed-']{background: #ffffff; position: absolute; left: 0; width: 160px; z-index: 3; border-right: var(--line-ed);border-top: var(--line-ed);}
.price-list [class^='name-']{display: flex; justify-content: space-between; align-items: center; line-height: 30px; padding: 0 12px; font-size: 12px; color: #2e343a;}
.price-list .fixed-top{top: 32px; border-top:none;}
.price-list .fixed-bottom{ bottom: 0; position: fixed !important;}
.price-list [class^='name-'].stock-upper .price{color: var(--color-ed); font-weight: 700;}
.price-list [class^='name-'].stock-lower .price{color: var(--color-0a); font-weight: 700;}
.price-list [class^='name-']{border-bottom: var(--line-ed);}
.price-list .name-vi.stock-lower{border-bottom: none;}
.price-list, 
.bid-content .tab-content{ width: 160px;}
.bid-content section + section{padding: 0 20px; width: 100%;  position:relative;}
/* 25.06.10.  매수매도 입력란 오른쪽 스트롤 추가*/
.bid-content section + section{height: auto;}
.bid-content section .order-wrap{height: calc(100% - 90px); overflow-y: auto;}
.full-pop .bid-content section .order-wrap{height: 100%;}
/* 25.06.10.  매수매도 입력란 오른쪽 스트롤 추가*/
.price-list [class*='present-']{color: var(--color-1e);}
.price-list .rate-label{position: absolute; left: 4px; top: 50%; transform: translateY(-6px); width: 12px; height: 12px;}
.price-list .rate-label [class^='price-']{display: block;width: 12px;height: 12px;font-size: 0px; text-indent: -999px;}
.price-list .rate-label .price-high{background: url(/inc/naver/img/icon/ic-High.svg) no-repeat center; background-size: 12px auto;}
.price-list .rate-label .price-row{background: url(/inc/naver/img/icon/ic-Low.svg) no-repeat center; background-size: 12px auto;}
.price-list .rate-label .price-market{background: url(/inc/naver/img/icon/ic-Market.svg) no-repeat center; background-size: 12px auto;}
.order-wrap + .bottom-btn-content{position: fixed; bottom: 0; right: 0; width: calc(100% - 162px); padding: 5px 20px 20px; background-color: #fff;}
.full-pop .price-list .fixed-top{top: 0px;border-top:var(--line-ed);}
.full-pop .price-list{padding-top: 32px; height: calc(100vh - 186px); height: calc(100svh - 186px);}
.pop-content .price-list .column .check{background: #fff5f5;}
.pop-content .price-list .column .check.newClass{background: #f0faff !important;}
.input-control-wrap + .flex-end{margin: 16px 0 10px;}
.input-control-wrap + .flex-end .form-group [type="checkbox"] + label{font-size: 14px; line-height: 14px; font-weight: 700;}
.input-control-wrap + .flex-end .form-group [type="checkbox"] + label::before{margin-right: 4px;}
/* 24.07.17 vi발동 및 상하한가 표시 */
.price-list .stock-upper[vhidden],
.price-list .stock-down[vhidden],
.price-list .vi-on[vhidden],
.price-list .vi-on[vhidden]{display: flex; justify-content: center; align-items: center;}
.price-list .stock-upper[vhidden]::before,
.price-list .vi-on[vhidden]::before{color: #fff; background-color: #ED3738; font-size: 10px; line-height: 10px; padding:5px 16px; border-radius: 4px; text-align: center; max-height: 20px;}
.price-list .stock-upper[vhidden]::before{content: '상한가';}
.price-list .vi-on[vhidden]::before{content: 'VI발동'}
.price-list .stock-down[vhidden]::before{content: '하한가';color: #fff; background-color: #0a7df3 ; font-size: 10px; line-height: 10px; padding:5px 16px; border-radius: 4px; text-align: center; max-height: 20px;}

.price-list .on.stock-upper[vhidden]::before,
.price-list .on.stock-down[vhidden]::before,
.price-list .on.vi-on[vhidden]::before{width: auto; position: relative; box-shadow: none;}

/* 체결 */
.sign-list{background-color: #f3f5f7;}
.sign-list .list-view .sign-check{display: flex; justify-content: space-between; align-items: center; height: 38px;}
.sign-list .list-view .sign-check + .sign-check{border-top: 1px #fff solid;}
.sign-list .list-view .sign-check p{text-align: right; font-size: 12px; padding: 12px 13px 12px 3px; min-width: 50px; }
.sign-list .list-view .sign-check .price{width: 100%; font-size: 14px; line-height: 14px; font-weight: 700;}
/* 구매수량 선택 */
.order-wrap{display: flex;flex-direction: column;justify-content: flex-start; height: 100%;}
.order-wrap .atmo-area.summary{border: none; padding:0; margin-top: 16px;}
.order-wrap .atmo-area.summary dl.flex-top{align-items: flex-start;}
.order-wrap .atmo-area.summary dl dt{color: var(--color-1e); font-size: 14px;min-width: 55px; text-align: left; line-height: 14px;}
.order-wrap .atmo-area.summary dl + dl{margin-top: 16px;}
.order-wrap .atmo-area.summary a{text-align: right; display: block;}
.order-wrap .atmo-area.summary .stock-number{font-size: 14px; line-height: 14px; font-weight: 700; display: block;}
.order-wrap .atmo-area.summary .price{font-size: 12px; line-height: 12px; color: var(--color-92); margin-top: 4px; word-break: break-all; /* position: absolute; right: 10px; top: 15px; */}
.order-wrap .atmo-area.summary + .atmo-area{border-top: var(--line-dc);padding-top: 16px;margin-top: 24px;}
.order-wrap .atmo-area.summary + .atmo-area .icon-arr-right{display: inline-block;}
.order-wrap .atmo-area .icon-arr-right::after{content: ''; width: 8px; height: 14px; display: inline-block; background: #1e1e23; -webkit-mask: url(/inc/naver/img/icon/ic-Arrow-right.svg) no-repeat 50% center; -webkit-mask-size: 6px auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.present{color:#404048 !important;}
.increase{color:#ED3738 !important;}
.decrease{color:#0a7df3 !important;}
/* S 25.04.10 추가 */
.order-wrap .balance-area .icon-arr-right::after{content: ''; width: 8px; height: 14px; display: inline-block; background: #1e1e23; -webkit-mask: url(/inc/naver/img/icon/ic-Arrow-right.svg) no-repeat 50% center; -webkit-mask-size: 6px auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.refresh-area{ z-index: 10; position: absolute; width: calc(100% - 1px); height: calc(100% - 64px); background: rgb(255 255 255 / 70%); display: flex; align-items: center; justify-content: center; top: 64px;}

/* 수정, 취소 */
.wrap-btn-fixed .info-txt{margin: 0 auto; font-size: 14px; line-height: 20px; color: var(--color-92);}
.select-area{position: sticky; top: 0; left: 0; z-index: 2; background: #fff; white-space: nowrap; margin: 0 -20px; width: calc(100% - -40px);}
.select-area .wrap-btn,
.over-scroll .wrap-btn{display: -webkit-flex; display: flex; align-items: center; justify-content: flex-start; padding: 20px;}
/* .select-area .wrap-btn.select{padding-right: 0;} */
.select-area .wrap-btn.select + .wrap-btn{padding-left: 0;}
.rate-container .select-area .select,
.over-scroll.select{overflow: hidden; overflow-x: scroll;}
.rate-container .select-area .select::-webkit-scrollbar,
.over-scroll::-webkit-scrollbar{display: none;}
.over-scroll .wrap-btn{width: auto; display: inline-flex; white-space: nowrap;}
.select-area .division{width: auto; margin: 0;}
.stock-list .summary-cell{padding: 24px 0; margin: 0;}
.stock-list .summary-cell ul{width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: column;}
.stock-list li.stock-name{display: flex; justify-content: space-between;align-items: center;}
.stock-list li.stock-name strong{font-size: 16px; line-height: 22px;}
.stock-list li.stock-name .order{font-size: 12px; line-height: 12px; color: #aaa;}
.stock-list li.date{color: #aaa; font-size: 14px; line-height: 14px;}
.stock-list li.date span + span{margin-left: 4px;}
.stock-list li.ic-arr{font-size: 16px; line-height: 20px; text-align: right; padding-right: 12px; background: url(/inc/naver/img/icon/ic-Arrow-right2.svg) no-repeat center right; background-size: 6px auto;}
.stock-list li + li{margin-top: 8px;}
.stock-list a[disabled] .stock-info .stock-title,
.stock-list a[disabled] .stock-info span,
.stock-list a[disabled] .ic-arr{color: #aaa !important;}
.stock-list .summary-cell  label ul{width: calc(100% - 30px);}
.stock-list label li.ic-arr{background: none; padding-right: 0;}
.stock-list .form-group [type="checkbox"] + label{ display: flex; align-items: flex-start;}
.stock-list .form-group [type="checkbox"]:checked+label{color: var(--color-1e);}
.stock-list .form-group [type="checkbox"]:disabled+label .stock-title,
.stock-list .form-group [type="checkbox"]:disabled+label,
.stock-list .form-group [type="checkbox"]:disabled+label .ic-arr{color: #aaa !important;}
.stock-list li.stock-info{font-size: 16px; line-height: 20px; }
/* .stock-list li.stock-info strong{ display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;} */
.stock-list li.stock-info strong + span{margin-left: 4px;}
.pop-content .multi-box{ background-color: #f3f5f7; border-radius: 8px; padding: 0 20px;}
.pop-content .multi-box ul{min-height: 80px; padding: 16px 0;}
.pop-content .multi-box ul li:first-child{display: flex; justify-content: space-between; align-items: flex-start;}
.pop-content .multi-box ul li:first-child [class^='stock-']{width: calc(100% - 95px);}
.pop-content .multi-box ul li .stock-name{font-size: 16px; line-height: 24px; margin: 0;}
.pop-content .multi-box ul li [class^='color-']{font-size: 14px; line-height: 24px; display: block;}
.pop-content .multi-box ul li .price{font-size: 16px; line-height: 22px; margin: 0;}
.pop-content .multi-box ul li strong{font-size: 16px; line-height: 22px; margin: 0; display: block;}
.pop-content .multi-box ul li .desc{font-size: 12px; line-height: 17px;  color: #767676; font-weight: 400;}
.pop-content .multi-box + .multi-box{margin-top: 8px;}
.pop-content .multi-box ul li + li{text-align: right; margin-top: 8px;}
.pop-content .multi-box ul .price span + span::before{content: '·'; margin: 0 2px;}
/* .pop-content .multi-box{ background-color: #f3f5f7; border-radius: 8px; padding: 0 20px; font-size: 15px; line-height: 22px;}
.pop-content .multi-box ul{min-height: 80px; padding: 20px 0;display: flex; justify-content: space-between; align-items: center;}
.pop-content .multi-box ul .stock-name,
.pop-content .multi-box ul .price{font-size: 16px; line-height: 22px; margin-top: 0;}
.pop-content .multi-box ul li [class^='color-']{font-size: 14px; line-height: 14px; display: block; margin-bottom: 4px;}
.pop-content .multi-box + .multi-box{margin-top: 8px;}
.pop-content .multi-box ul li:first-child{width: calc(100% - 150px);}
.pop-content .multi-box ul li + li{text-align: right;}
.pop-content .multi-box ul .price span + span::before{content: '·'; margin: 0 2px;} */
.pop-content .list-wrap + .dl-list{margin-top: 20px;}
.check-total label .stock-total{color: #1e1e23;}
.check-view a{display: flex;}
.check-view .check-total a{align-items: center;}
.check-view .stock-list a::before{margin-top: 1px;}
.check-view .check-total a::before,
.check-view .stock-list a::before{content: ''; width: 22px; height: 22px; display: inline-block; border-radius: 50%; background: url(/inc/naver/img/icon/ic-Default.svg) no-repeat center; background-size: 22px auto; border: none; margin-right: 8px;}
.check-view .check-total a.on::before,
.check-view .stock-list a.on::before{background: url(/inc/naver/img/icon/ic-Checked.svg) no-repeat center; background-size: 22px auto;}
.check-view .check-total a.on .stock-total{color:  var(--color-09);}
.check-view .stock-list .summary-cell ul{width: calc(100% - 28px);}
.check-view .stock-list li.ic-arr{font-size: 16px; line-height: 20px; text-align: right; padding-right: 0px; background: none; background-size: 6px auto;}
.stock-list li.ic-arr strong span+span::before {content: '·'; margin: 0 2px;}
.check-view .stock-list a[disabled]::before,
.check-view .stock-list a[disabled].on::before{background: url(/inc/naver/img/icon/ic-Disabled.svg) no-repeat center; background-size: 22px auto;}
.rate-container .btn-sm.bg-point,
.rate-container .btn-sm.btn-point{text-shadow: none !important; font-weight: 700;}
.rate-container .form-group [type="checkbox"]+label::before{margin-top: 1px;}
.section-inner.rate-container .stock-info.flex{display: flex; justify-content: space-between; align-items: flex-start;}
.section-inner.rate-container .stock-info.flex .label-text{word-break: keep-all; font-size: 14px; line-height: 22px; color: #aaa; font-weight: 400; margin-left: 4px;}
/* 팝업 주문 수정 시 */
.slide-content.wid-full .pop-header .btn-close{right: 20px;}
.slide-content .bid-content{height: calc(100% - 74px);}
.slide-content .order-wrap{width: calc(100% - 162px); padding: 0 20px 0 18px; justify-content: space-between;height: 100%; overflow-y: auto;}
.slide-content .rate-container{position: sticky; top: 0px; z-index: 9; background: #fff;}
.slide-content .rate-container .stock-total{margin: 0px 20px 20px;}
.slide-content .form-group.flex-end{margin-top: 12px;}
.slide-content .price-list{height: 100%;}
/* 거래내역 */
.order-list-area .flex-between{border-bottom: 1px #bbb solid;}
.order-list-area .over-scroll{margin: 13px 0 30px;}
.order-list-area .over-scroll .wrap-btn{justify-content: flex-start;}
.filter-date-view{ font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.filter-date-view .btn-date-close{width: 24px; height:24px; margin-left: 4px; background: url(/inc/naver/img/icon/ic-Delete.svg) no-repeat center; background-size:20px 20px;}
.select-area .filter-date-view{margin:0 20px 20px;}
.check-total .filter{height: 34px;}
.pro-info-inner.trade-list{word-break: keep-all;}
.pro-info-inner .trade-cell.add-list{display: none; border-top: none; padding: 0;} 
.pro-info-inner .trade-cell:last-child{padding-bottom: 0;}
.pro-info-inner .trade-cell dl+dl{margin-top: 12px;}
.pro-info-inner .trade-cell dl{display: flex; align-items: center; justify-content: space-between; font-size: 16px; height: 24px;}
.pro-info-inner .trade-cell dt{color: #929292;}
.pro-info-inner .pro-info-tit{padding: 20px 0 24px; display: block; border-bottom: 1px #edeff2 solid; margin-bottom: 24px;}
.pro-info-inner .pro-info-tit .stock-name{display: block; font-size: 22px; line-height: 22px; margin:10px 0 8px;}
.pro-info-inner .trade-cell+.trade-cell{margin-top: 12px;}
.slide-content .pro-info-inner .pro-info-tit{padding: 10px 0 16px; word-break: break-all; display: block; border-bottom: 1px #edeff2 solid; margin-bottom: 20px;}
.slide-content .pro-info-inner .pro-info-tit .stock-name{display: block; font-size: 18px; line-height: 18px;}
/* 내 주식 */
.stock-list li .ic-arr{font-size: 16px; line-height: 16px; text-align: right; padding-right: 12px; position:relative; display: block; /* background: url(/inc/naver/img/icon/ic-Arrow-right2.svg) no-repeat center right; background-size: 6px auto; */}
.stock-list li .ic-arr::after{content: ''; position: absolute; width: 6px; height: 19px; top: 50%; right: 0; display: block; transform: translateY(-50%); background-color: #929292; -webkit-mask: url(/inc/naver/img/icon/ic-Arrow-right2.svg) no-repeat center; -webkit-mask-size: 6px auto;}
.stock-list .color-cancel li .ic-arr::after,
.stock-list .color-unsigned li .ic-arr::after{background-color: #aaa;}
/* .stock-list .stock-info{display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start;} */
.my-stock{ text-align: left; padding: 32px 4px 0px;}
.my-stock-wrap .filter-wrap{display: flex; margin: 0px; padding:20px 0 16px; align-items: center; }
.my-stock-wrap .filter-wrap .stock-total{ margin:0; font-size: 16px; line-height: 34px;}
.my-stock-wrap .filter-wrap .filter{line-height: 34px;}
.my-stock-wrap .filter-wrap.flex-end{padding-top: 20px; padding-bottom: 10px;}
.my-stock .cell-tit-area{font-weight: 700; line-height: 20px;column-gap: 2px; display: flex; flex-direction: column; justify-content: space-between;}
.my-stock .cell-tit-area .text-sm{color: var(--color-76); line-height: 14px; font-weight: 400;}
.my-stock .cell-tit-area .price-wrap{font-size: 24px; line-height: 32px; display: flex; justify-content: space-between;}
.my-stock .cell-tit-area .price-wrap .md-text{font-size: 14px; line-height: 14px; color: #aaa; font-weight:400; margin-bottom: 2px;}
.my-stock .cell-tit-area .price-wrap .icon-arr-right::after{background-color: #222; margin-left: 4px; right: auto; width: 14px;}
.my-stock .cell-tit-area + .summary-cell{padding-top: 24px; border-top: var(--line-ed);}
.my-stock .cell-tit-area + .summary-cell dl dt{line-height: 20px;}
/* .my-stock .cell-tit-area .ico+span{margin-left: 4px;} */
.my-stock .summary-cell dl + dl{ margin-top: 4px;}
.my-stock .cell-tit-area .price-wrap + [class^=stock-] span{font-weight: 400;}
.my-stock-wrap .price-cont{display: flex; justify-content: space-between; align-items: flex-end;}
.my-stock-wrap .price-cont .count{font-size: 14px; line-height: 14px; color: #aaa;}
.my-stock-wrap .price-cont .price{display: flex; flex-direction: column; align-content: flex-end; text-align: right; }
.my-stock-wrap .price-cont .price p{font-size: 14px; line-height: 14px; font-weight: 400; margin-bottom: 4px;}
.my-stock-wrap .price-cont .price .ic-arr{font-size: 16px; line-height: 20px;}
.my-stock-wrap .my-stock::after{content: ''; display: block; content: ''; display: block; width: calc(100% - -56px); height: 10px; background-color: #f2f4f6; margin: 32px -32px 0 -32px;}
.summary-area .check-total,
.summary-area .filter-wrap{border-bottom: var(--line-ed);}
.stock-list .stock-info .stock-title{color: var(--color-1e);}
.my-stock-wrap .color-cancel .stock-title{color: #aaa;}
.my-stock-wrap .color-cancel .price{color: #aaa; text-decoration: line-through;}
.my-stock-wrap .color-unsigned .price{color: #1e1e23;}
.my-stock-wrap .stock-list li.summary-cell ul .stock-info.flex{display: flex; justify-content: space-between;}
.my-stock-wrap .stock-list li.summary-cell ul .stock-info.flex .name{ line-height: 22px; display: inherit;}
.my-stock-wrap .stock-list li.summary-cell ul .stock-info .label-text{color: #aaa; word-break: keep-all; font-weight: 400; margin-left: 4px;}
.stock-info .label-text span+span::before {content: '·'; margin-right: 2px;}
.rate-container .stock-list li.stock-info,
.my-stock-wrap .stock-list li.stock-info{font-size: 0; line-height: 0;}
.rate-container .stock-list .stock-info .stock-title,
.my-stock-wrap .stock-list .stock-info .stock-title{font-size: 16px;}
/* 이체 */
.transfer-area .title-wrap{padding:10px 0 16px; border-bottom: var(--line-ed); margin-bottom: 24px;}
.tabs.round-box{position: sticky; padding: 20px 0; top: 0; left: auto; height: 82px; width: calc(100% - -40px); margin: 0 -20px;}
.tabs.round-box ul{padding: 3px; background: #f7f9fa; border-radius: 20px; border: 1px #f3f5f7 solid; max-width: 322px; width: calc(100% - 24px); text-align: center; margin: 0 auto;}
.tabs.round-box ul li.on::after{content: none;}
.tabs.round-box ul li button{font-size: 14px; line-height: 34px; width: 100%; font-weight: 700; color: var(--color-1e);}
.tabs.round-box ul li.on button{background: #fff; border-radius: 16px; box-shadow: 2px 2px 6px 0px #0000000a;}
.transfer-area .summary-cell ul{display: flex; flex-wrap: nowrap; justify-content: flex-start; flex-direction: column;}
.transfer-area .summary-cell li.stock-name{font-size: 16px; line-height: 16px;}
.transfer-area .summary-cell li.stock-number{margin:6px 0  8px; color: var(--color-76); font-size: 14px; line-height: 14px;}
.transfer-area .summary-cell li.price{color: var(--color-40);font-size: 14px; line-height: 14px;}
.transfer-area .summary-cell li + li{margin-top: 0;}
.transfer-area .summary-cell+.summary-cell{border-top: var(--line-ed); margin: 24px 0 0; padding-top: 24px; }
.transfer-area .summary-cell[hidden]:first-child+.summary-cell{border: none; margin: 0; padding: 0;}
.transfer-area .summary-cell:last-child{margin-bottom: 40px;}
.content-trade{ text-align: center; position: inherit;}
.content-trade .acount-num{background-color: #f3f5f7;padding:20px;}
.content-trade .acount-num a{display: flex; align-content: center;}
.content-trade .acount-num .bank-logo{width: 30px; height:30px;}
.content-trade .acount-num .select-form{text-align: left; font-size: 12px; line-height: 12px;margin-left: 8px; width: calc(100% - 40px);}
.content-trade .acount-num .select-form strong{font-size: 14px; line-height: 14px; display: block; margin-bottom: 6px; width: calc(100% - 20px);}

.section-inner{height: 100%;}
.trade-info.transfer{height: calc(50% - 74px); display: flex; align-items: center; flex-direction: column; justify-content: center;}
.content-trade .input-btn-wrap {position: absolute; bottom: 70px;}
.content-trade{height: 100%;}
@media screen and (max-height: 568px){
.content-trade + .wrap-btn-fixed{padding-bottom: 50px;}
.content-trade .input-btn-wrap{bottom: 90px;}
}
@media screen and (max-width: 375px) and (max-height: 812px){
    .price-list .price-per .price{font-size: 13px; line-height: 12px;}
}

.quick-btn-wrap{padding: 0 20px;}
.trade-info .output{font-size: 36px; line-height: 36px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: #dcdee0;}
.trade-info .output + .label-text{color: #c8cacc;}
.trade-info .output.active{color: var(--color-1e);}
.trade-info .output.active + .label-text{color: #dcdee0;}
.trade-info .info-text{font-size: 36px; line-height: 44px; color: #dcdee0; margin-bottom: 8px;}
@media screen and (max-width: 320px){
    .trade-info .info-text{font-size: 24px; line-height: 32px; }
}
@media screen and (max-width: 320px) and (max-height: 568px){
    .price-list .price-per .price{font-size: 12px; line-height: 10px;}
    .price-list .price-per, .price-list .rate-bar {padding: 0px 4px;}
    .price-list .per{font-size: 8px; line-height: 7px;  margin-top: 2px;}
    .price-list .rate-wrap .rate-bar {font-size: 12px; line-height: 10px;}
    .price-list .vi-on[vhidden]::before {font-size: 12px;line-height: 10px; padding: 4px 20px;}
    .bid-content section + section { padding: 0 10px;}
    .order-wrap + .bottom-btn-content{padding: 10px;}
    .bottom-btn-content .total {font-size: 18px; line-height: 16px;} 
    .filter-date-view {font-size: 14px;}  
}
/* 계산기 */
.wid-full .pop-content{border-top: var(--line-ed);}
.calculator{display: grid; grid-template-columns: 1fr 4fr; height: 100%; max-height: 501px; position:relative;}
.calculator .bid-view{height: 100%;overflow: hidden;}
.calculator .price-list{width: auto;position: relative;padding: 0; height: calc(100% - 31px)}
.pop-content .input-btn-wrap{position: relative; bottom: 0;}
.pop-content .input-buttons{width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0; padding: 0;}

.slide-content.wid-full{visibility: inherit; position: absolute;}
.pop-content .calculator{height: 100vh; height: 100svh;}
/* 계산기-호가 */
.pop-content .price-list [class^='check']{display: block; grid-template-columns: none; grid-column-gap: inherit; align-content: center; position: relative; height: 36px; align-items: start; overflow: hidden; flex-shrink: 0;}
.calculator .price-list [class^='fixed-']{border-right: none; position: sticky; width: 100%; height: 30px; }
.calculator .price-list .fixed-top{top: 0;}
.calculator .price-list .fixed-bottom{bottom: 0; width: calc(20% - 1px);}
.calculator .input-buttons{border-top: var(--line-ed);}
.calculator .input-buttons .btns{ border-right:var(--line-ed); border-bottom:var(--line-ed); margin-bottom: 0;}
.calculator .price-list .price-per{text-align: right; padding-right: 6px; position: absolute; width: 100%; z-index: 2;}
.calculator .price-list .rate-wrap .rate-bar{right: 0;}
.calculator .price-list .price-per .price{font-size: 12px;}
.calculator .price-list [class^='check'].on::before{content: none;}
.calculator .btn-delete{margin-right: 0;}
.calculator .calc-area{height: 100%;}
.calculator .calc-area .input-control-wrap dl{display: flex; align-items: center;}
.calculator .calc-area .input-control-wrap + .input-control-wrap{margin-top: 8px;}
.calculator .calc-area .input-control-wrap dl dt{font-size: 16px; line-height: 16px; min-width: 60px; text-align: right; padding-right: 12px;}
.calculator .calc-area .input-control-wrap dl dd{width: 100%;}
.calculator .calc-area .input-control-wrap dl dd .input-control{margin-top: 0;}
.calculator .price-list [class^='name-']{font-size: 12px; padding: 0px 6px;}
.calculator .wrap-btn.btn-calc{padding: 16px 20px;}
.calculator .wrap-btn.btn-calc .bg-gray{width: 100px;}
.calculator .input-buttons .del{grid-row: 4; grid-column: 3;}
.calculator .input-buttons .reset{grid-row: 1; grid-column: 4; background-color: #f7f9fa;}
.calculator .input-buttons .btn-right{background-color: #f7f9fa; grid-row: 1; grid-column: 4; grid-area: 2 / 4 / 5; display: grid;}
.calculator .input-buttons .upper{}
.calculator .input-buttons .lower{}
.calculator .input-buttons .per1{grid-row: 2; grid-column: 4; background-color: #f7f9fa;}
.calculator .input-buttons .per2{grid-row: 3; grid-column: 4; background-color: #f7f9fa;}
.calculator .input-buttons .per3{grid-row: 4; grid-column: 4; background-color: #f7f9fa;}
.calculator .input-buttons .btns  .btn-text{font-size: 16px; line-height: 20px;}
/* .calculator .input-buttons button{height: 100%; min-height: 60px;} */
.calculator .input-buttons .right button{font-size: 14px; font-weight: 700;}
.calculator .amount-view{text-align: center;display: grid;align-items: center;border-right: var(--line-ed); /* grid-template-rows: repeat(2, minmax(60px, auto)); */}
.calculator .amount-view .left-btns{height: 100%; background-color: #f7f9fa;}
.calculator .amount-view .left-btns button{height: 100%; width: 100%;font-size: 14px; line-height: 14px; font-weight: 700; }
.calculator .amount-view .left-btns button em{display: block;}
.calculator .amount-view .left-btns .btn-txt{font-size: 16px; line-height: 20px; font-weight: 700; }
.calculator .amount-view .left-btns + .left-btns{border-top: var(--line-ed);}
.calculator .flex-column .calc-area .control-wrap{padding: 20px;}
.calculator .flex-column .calc-area{display: flex; flex-direction: column !important; justify-content: space-between;}
.pop-content .input-btn-wrap{height: 100%;}
.pop-content .input-buttons{min-height: 197px; max-height: 236px; height: 100%;}
.pop-content .input-buttons button { height: 100%; min-height: 48px; max-height: 60px;}
/* 검색 */
.search-screen{ height: var(-app-height, 100);}
.search-content{padding: 10px 0px; position: -webkit-sticky; position: sticky; top: 0; left: 0; background-color: #fff; z-index: 11;}
.search-content .search-wrap{margin:0 20px 10px;}
/* .search-list{padding: 30px 0px;} */
.search-content .title-wrap{margin: 20px 20px 0; position:relative; justify-content: space-between; font-size: 18px; line-height: 24px;}
.search-content .btn-line-option{font-size: 14px; border-bottom: 1px solid #bbb; color: #929292; overflow: initial; display: inline-flex;}
.search-list .list-stock{margin-top: auto; padding-bottom: 90px;
    overflow-y: auto;}
.search-list .list-stock li{display: flex; align-items: center;}
.search-list .list-stock li + li{margin-top: 20px;}
.search-list .list-stock a{display: flex; align-items: center; width: 100%;}
.stock-icon{width: 56px; height: 56px; text-align: center; line-height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.stock-icon+.stock-name{margin: 0 8px; flex: 1; width: calc(100% - 180px);}
.search-list .stock-name{font-size: 16px; line-height: 24px; word-break: break-word;}
.search-list .stock-name .stock-title{font-weight: 700;}
.search-list .stock-icon span{width: 100%; height: 100%; font-size: 16px; color: #fff; font-weight: 700; line-height: 1; overflow: hidden; z-index: 1; position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--color-1e); border-radius: 50%;}
.stock-icon img, .comm-icon img{object-fit: cover; width: 100%; height: 100%; z-index: 1; -webkit-clip-path: circle(50%); clip-path: circle(50%); max-width: initial; flex-shrink: 0;}
.stock-icon{width: 48px; height: 48px; line-height: 48px;}
/* setting */
.setting-wrap.chk-box{margin-bottom: 30px;}
.setting-wrap.dl-list dl{padding: 24px 0; margin-top: 0;}
.setting-wrap.dl-list dl dt{color: var(--color-1e); line-height: 24px; margin: 0;}
.setting-wrap.dl-list dl + dl{border-top: var(--line-ed);}
/* notice */
.list-notice{padding: 0 16px;}
.list-notice li+li{border-top: var(--line-ee); min-height: 100px;}
.list-notice li[hidden]+li{border-top: none;}
.list-notice li .list-title{padding-right: 40px; line-height: 24px; color: var(--color-1e);}
.list-notice li a{padding: 24px 0; display: block; font-size: 16px; position: relative;}
.list-notice .link-arrow::after{right: 0;}
.list-notice li .date{font-size: 14px; color: #aaa; margin-top: 8px;}
.list-notice .link-arrow::after{right: 0;}
.link-arrow::after{content: ''; width: 24px; height: 24px; display: inline-block; background: #aaa; -webkit-mask: url(/inc/naver/img/icon/ic-Arrow-right2.svg) no-repeat center; -webkit-mask-size: 8px auto; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.notice-view{padding: 0px 20px 40px;}

.view .view-img{margin-bottom: 24px;}
.view .view-img img{border-radius: 16px; width: 100%; height: auto;}
.view .view-content p{font-size: 16px; line-height: 32px;}
.notice-view .title-box{padding: 24px 0 16px; position: sticky; top: 0px; z-index: 1; background: #fff;}
.notice-view .title-box .view-title{font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--color-1e) !important;}
.notice-view .title-box .date{font-size: 14px; color: #aaa;}
.view-content table{table-layout: fixed !important;}
.notice-view .view-content table{table-layout: initial !important; width: 100% !important;}
.view-content table img{max-width: 100% !important;}
.view-content{font-size: 16px; color: #767678; margin-top: 16px;}
.btn-bottom-area .file-download{margin:24px 20px 40px; padding-top: 24px; border-top: 1px solid #eee;}
.btn-bottom-area .file-download li a{display: block; font-size: 15px; color: #2e9cf4; text-decoration: underline; line-height: 20px;}
.btn-bottom-area .file-download li+li{margin-top: 16px;}
/* 유의사항 */
.care-wrap{margin: 0 -20px;}
.care-wrap .wrap-btn{white-space: nowrap; padding: 16px 0; border: none;}
.care-wrap .care-cont{margin:16px 20px 40px;}
.care-wrap .care-cont .list-asterisk{margin-top:4px;}
.care-wrap .care-cont .list-bar li{font-size: 16px; line-height: 24px;}
.care-wrap .care-cont .list-bar li+li {margin-top: 8px;}
.care-wrap .title{margin:0px 0 40px;}
.care-wrap .title h2{font-size: 22px; line-height: 30px;}
.care-wrap .care-dl dt{font-size: 18px; line-height: 18px; color: var(--color-1e);font-weight: 700;}
.care-wrap .care-dl dd{margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--color-76);}
.care-wrap .care-dl dl + dl{margin-top: 32px;}
.care-wrap .list-asterisk{display: block;}
.tabs.scroll-left{width: 100%; margin: 0 auto; border-bottom: none; overflow-x: auto; overflow-y: hidden; padding: 0 20px; position: sticky; top: 0px; height: 66px; display: flex; align-items: center;}
.tabs.scroll-left{scrollbar-width: none; -ms-overflow-style:none;}
.tabs.scroll-left::-webkit-scrollbar{display: none;}
.tabs.scroll-left li{width: auto;}
.tabs.scroll-left li + li{margin-left: 6px;}
.tabs.scroll-left ul li button{width: auto; height: 34px; line-height: 18px; font-size: 16px; color: var(--color-76); padding: 8px 14px; border-radius: 40px; background-color: #f3f5f7; font-weight: 400;}
.tabs.scroll-left ul li.on button{color: #fff; background-color: #2e343a;   font-weight: 700;   }
.tabs.scroll-left ul li.on::after{content: none;}
.tabs.scroll-left + .section{margin-top: 8px;}
/* 자주 하는 질물 */
.over-scroll{overflow: hidden; overflow-x: scroll; margin: 24px 0 0;}
.over-scroll::-webkit-scrollbar{display: none;}
.over-scroll .wrap-btn{width: auto; display: inline-flex; white-space: nowrap; padding: 0 16px;}
.over-scroll [class^="wrap-btn"] [hidden] + [class^="btn-"]{margin-left: 8px;}
/* .flex-wrap{margin: 16px 12px 0;}
.flex-wrap .wrap-btn{display: flex; flex-wrap: wrap;}
.flex-wrap .wrap-btn button{margin: 4px !important;} */
.list-qna li{background-color: #fff; padding: 0 20px;}
.list-qna.accordion li{border-top: var(--line-f5);}
.list-qna.accordion li:last-child{border-bottom: var(--line-f5);}
.list-qna li.on{background-color: #f3f5f7;}
.list-qna li .title{font-size: 16px; line-height: 24px; position: relative; padding-left: 20px; word-break: keep-all;}
.list-qna li .title::before{content: 'Q'; font-size: 17px; font-weight: 700; position: absolute; left: 0; top: 0;}
.list-qna li a{padding: 32px 0; display: block; border-top: var(--line-e6);}
.list-qna.accordion li a{border-top: none;}
.list-qna .list-sub{margin: 16px 0 0 24px; display: none; font-size: 15px; line-height: 20px; color: #767678; word-break: keep-all;}
.notice-wrap{padding: 26px 16px 60px; background-color: #f3f5f7;}
.notice-wrap.bottom{padding-bottom: 150px;}
.notice-wrap.bottom2{padding: 24px 16px 60px; margin-top: 60px;}
.notice-wrap .foot-logo{width: 72px; height: 14px; background: url(/inc/img/logo.svg); background-size: 72px auto; margin-left: auto; margin-bottom: 20px;}
.notice-wrap .foot-text{font-size: 13px; color: #aaa; word-break: keep-all; line-height: 20px;}
.notice-wrap .foot-text+.foot-text{margin-top: 16px;}
.notice-wrap h2{font-size: 15px; color: #aaa;}
.wrap-btn-notice{display: flex; align-items: center; justify-content: center; margin-top: 32px;}
.wrap-btn-notice [class^="btn-"]{font-size: 14px; line-height: 18px; padding: 14px 0 15px 0; color: #767678; font-weight: 400; background-color: transparent;}
.wrap-btn-notice .title-wrap{margin-bottom: 16px;}
.search-content.division{border-bottom: 10px solid #f3f5f7; width: auto; margin: 0; padding-bottom: 16px; top: 0px;}
.list+.footer{margin-top: 0; background-color: #fff; flex: initial;}

/* 종료 팝업 이벤트 */
.slide-content.banner-cont{padding: 0 0 20px;}
.slide-content.banner-cont .wrap-btn{margin: 30px 20px 0;}
.banner-cont .header-pop{margin: 0px 20px;}
.banner-wrap .txtarea{display: none;}
.banner-wrap.active .txtarea{display: block;}
.banner-wrap li{ display: none;}
.banner-wrap li:first-child{ display: block;}
.banner-wrap li.first{ display: block;}
.banner-wrap.active{margin: 10px 20px 0;}
.banner-wrap.active li{display: block; }
.banner-wrap.active li + li{margin-top: 8px;}
.banner-wrap.active a{padding: 20px; display: flex; justify-content: space-between; align-items: center; background-color: #f3f5f7; position: relative; border-radius: 8px; }
.banner-wrap.active a img{width: 48px; height: 48px; border-radius: 8px 0 0 8px;}
.banner-wrap a .img-sm,
.banner-wrap.active a .img-lg{display: block;}
.banner-wrap a .img-lg,
.banner-wrap.active a .img-sm{display: none;}
.banner-wrap.active a::after{content: ''; position: absolute; width: 40px; height: 40px; top: 50%; right: 3px; background: #929292; -webkit-mask: url(/inc/naver/img/icon/ic-Arrow-right2.svg) no-repeat center; -webkit-mask-size: 6px auto; display: block; margin: auto; z-index: 1; transform: translateY(-50%); }
.banner-wrap.active a .txtarea{width: calc(100% - 58px); padding-right: 16px;}
.banner-wrap.active a .tit{display: block; font-size: 14px; line-height: 18px; font-weight: 700;}
.banner-wrap.active a .date{display: block; font-size: 12px; line-height: 12px; color: #767678; margin-top: 4px;}
.banner-wrap.active a p+p{margin-top: 6px;}
/* 플로팅 이벤트 */
.layer-pop.float-pop{width: 100%; height: auto; bottom: 0px; z-index: 5; display: initial; top: auto;  padding-bottom: 30px;}
.float-pop .float-content{margin: 0 16px; display: flex; align-items: center; border-radius: 8px;}
.float-pop .pop-content{width: 100%; height: 60px; padding: 12px 0 12px 16px; color: #fff;}
.float-pop .eventarea{height: 100%;  display: flex; align-items: center;}
.float-pop .eventarea img{width: 38px; height: 38px;}
.float-pop .eventarea img + strong{margin-left: 8px;}
.float-pop .btn-close-pop{width: 24px; height: 40px; -webkit-mask: url(/inc/naver/img/icon/ic-Close.svg) no-repeat center; -webkit-mask-size: 21.28px auto; background-color: #fff; display: block; margin: auto; flex: none; margin-right: 15px;}
.loading-circle{width: 50px; height: 50px; border-radius: 50%; position:relative; background-color: #333;}
.loading-circle::after{content: ''; width: 100%; height: 10px; background-color: red; border-radius: 50%; position: absolute;bottom: 0;}
.btn-bottom-area .float-banner + [class^="wrap-btn"] + .info-txt{margin-bottom: 80px;}
/* 아이폰 se */
@media screen and (max-width:320px){
    .trade-info{
        height: calc(100vh - 402px); }

    .trade-info .info-text{
        font-size: 20px;     line-height: 32px; }

    .input-buttons{
        padding: 10px 32px;     grid-gap: 0 calc(33.33% - 48px); }

    .calculator .input-buttons button,
    .input-buttons button,
    .input-buttons .btn-delete{
        height: 32px; }
    
    .calculator .wrap-btn.btn-calc{
        padding: 12px 20px; }
    .trade-info.transfer{
        height: calc(100vh - 390px); }

    .trade-info.transfer+.label-round{
        margin-bottom: 16px; }
        .quick-btn-wrap .btn-sm{
            height: 32px;         line-height: 32px;         padding: 0 6px;         font-size: 13px;     }
}

/* 브릿지 페이지 */
.page-last-logo .page-top::before {
    content: ''; width: 56px; height: 56px; border-radius: 50%; display: block; background: url(/inc/naver/img/logo-korea-blue.svg) no-repeat center; background-size: 56px auto; margin: auto auto 20px; position: relative;
}
.loading-ani{margin:32px 0 60px; display: flex; justify-content: center; align-items: center;}
.loading-ani span{display: inline-block; width: 8px; height: 8px; border-radius: 50%; animation: ani 1s linear infinite; background-color: #767678;}
.loading-ani span:nth-child(1){animation-delay: 0s;}
.loading-ani span:nth-child(2){animation-delay: 0.2s; margin:0 6px;}
.loading-ani span:nth-child(3){animation-delay: 0.4s;}
@keyframes ani{
    0%, 100%{
        opacity: 0.2; }
    50%{
        opacity: 1; }
}

/* 해외주식 */
.h-auto{overflow-y: auto; height: 100%;}
.section-top {margin: 0; background-color: #fff; position: relative;}
.section-top  .section-inner{padding: 0 20px; height: auto;}
.section-inner.pro-box {padding: 0 16px;}
.section-inner.list{padding: 0 20px;}
.form-content .form-group [type="radio"] + label { display: flex; align-items: center;}
.section-inner > .form-content{margin-top: 24px;}
.form-content {margin-top: 32px;}
.form-content em.plus {color: #f24538; margin-right: 3px;}
.form-content .plus-text {color: #767678; font-size: 14px; line-height: 20px; margin: 24px 0 56px ; word-break: keep-all;}
.form-content dl+dl {margin-top: 40px;}
.form-content dt {font-size: 16px; line-height: 16px; font-weight: 700;}
.form-content dd {display: flex; align-items: center; margin-top: 16px; justify-content: space-between;}
.form-content dd .form-group {width: 50%;}
.form-group [type="radio"] + label { display: flex;  align-items: center;}
.chk-list li .form-group [type="radio"] + label {line-height: 22px;}

.list-info {margin-bottom: 60px;}
.list-info>ul>li {padding: 20px;}
.list-info>ul>li+li {border-top: var(--line-ee);}
.list-info.accordion {border-top: var(--line-e6); background-color: #f7f7f7; padding-bottom: 32px; flex: 1; margin-bottom: 0;}
/* .list-info.accordion>ul {border-bottom: var(--line-e6);} */
.list-info.accordion li {padding: 0;}
.list-info.accordion li .title {padding: 20px 32px; font-size: 16px; font-weight: 700; color: #000; position: relative; line-height: 24px; border-bottom: var(--line-e6);}
.list-info.accordion li .title::after {content: ''; width: 24px; height: 24px; background: url(/inc/img/arrow-bottom.svg) no-repeat center; background-size: 14px auto; display: block; position: absolute; right: 32px; top: 20px;}
.list-info.accordion li.on .title::after {transform: rotate(180deg);}
.list-info.accordion li.on .title{border-bottom:none;}
.list-info.accordion>ul>li+li {border-top: var(--line-e6);}
.list-info.accordion li [class^="list-text"] {font-size: 15px; color: #666;}
.list-info.accordion li [class^="list-bar"] li {padding-left: 7px; font-size: 14px; line-height: 20px;}
.list-info.accordion li [class^="list-bar"] li::before {top: 8px;}
.list-info.accordion .list-sub {padding: 32px 24px 0; border-top: var(--line-e6); display: none; word-break: keep-all;}
.list-info.accordion .list-sub dt {font-size: 15px; font-weight: 700;}
.list-info.accordion .list-sub dd {font-size: 15px; margin-top: 4px; color: #666;}
.list-info.accordion .list-sub dd+dd {margin-top: 16px;}
.list-bar li>[class^="list-bull"] li {padding-left: 8px;margin-top: 4px !important;font-size: 12px !important; line-height: 18px !important; color: #929292;}
.list-bar li>[class^="list-bull"] li::before {top: 6px; background: #929292;}
/* .list-bar li>[class^="list-bull"] li + li{margin-top: 4px !important;} */
.bg-white .list-info.accordion{border-top: var(--line-ee); background-color: #fff;}
.list-info .list-text-ul li+li {margin-top: 8px; line-height: 26px;}
.list-info .list-text+dl,
.list-info .list-sub dl+dl {margin-top: 24px;}
.list-info .list-dl {margin-top: 24px;}
.list-info .list-dl dl+dl {margin: 16px 0 0;}
.top-content.list {padding: 32px 20px 40px; background-color: #fff;}
.top-content.list .text-cont-md{font-size: 16px; line-height: 24px; color: #767678;}
.top-content.list .text-cont-md h3{color: #1e1e23; font-size: 20px; line-height: 28px; margin-bottom: 20px;}
.top-content.list .title-wrap + .text-cont-md{margin-top: 40px;}
.top-content.list .title-wrap[hidden] + .text-cont-md{margin-top: 0px;}
.top-content.list  .text-cont-md .date{font-size: 12px; line-height: 18px; color: #929292; font-weight: 400;}
/* 투자성향 분석 pagination / progress bar */
.pagination{position: fixed; top: 15px; right: 16px; background: #f7f7f7; padding: 6px 8px; align-items: flex-start; justify-content: space-between; display: flex; border-radius: 40px; font-size: 12px; line-height: 14px; color: #888; width: 40px; font-weight: 700; flex: 1; z-index: 100;}
.pagination em{color:#1E1E23;}
.pagination em, 
.pagination span{width: 8px;}
.progress{appearance: none; height: 2px; width: 100%; position: fixed; top: 50px; left: 0; z-index: 1;}
.progress::-webkit-progress-bar{background-color: #fff;}
.progress::-webkit-progress-value{background-color: #09aa5c;}
.progress + .form-content{margin-top: 24px;}
.pro-box .form-content{margin-bottom: 120px;}
.form-content > .title-wrap{padding: 0 8px;}
.form-content > .title-area{padding: 0 8px; display: block;}
.form-content > .title-area .title{font-size: 15px; line-height: 22px;}
.form-content.list{padding: 0 8px; margin-top: 32px; margin-bottom: 50px;}
.form-content.list dt .sm-text{font-weight: 400;}
.wrap-btn-sticky.pd-lr{position: fixed; width: calc(100% - 40px); left: auto; margin: 0 auto; padding: 0 0 20px;}
.h-auto .chk-list {margin-top: 32px; margin-bottom: 50px;}
.h-auto .chk-list li+li{margin-top: 8px;}
.h-auto .chk-list .form-group [type="radio"]+label,
.h-auto .chk-list .form-group [type="checkbox"]+label {position: relative; cursor: pointer; padding: 23px 50px 23px 20px; display: block; font-size: 16px; color: var(--color-1e); font-weight: 700; line-height: 22px; border: var(--line-dc); border-radius: 8px; box-shadow: 4px 4px 4px 0px #0000000a; width: 100%;}
.h-auto .chk-list .form-group{display: flex; align-items: center; position: relative; min-height: 28px; width: 100%;}
.h-auto .chk-list .form-group strong{font-size: 15px; line-height: 22px; color:#1E1E23; display: block;}
.h-auto .chk-list .form-group strong + .sm-text{line-height: 20px; font-size: 13px; color: #929292;  margin-top: 4px; font-weight: 400;}
.h-auto .section-top .pro-box{padding: 0 20px;}
.h-auto .section-top .pro-box .form-content{margin-top: 32px; margin-bottom: 120px;}
.h-auto .section-top .pro-box .title-wrap{margin-bottom: 20px;}
.h-auto .section-top .pro-box .chk-list{margin-top: 0px;}
.h-auto .section-top .form-content .form-group [type="checkbox"] + label::before,
.h-auto .section-top .form-content .form-group [type="radio"] + label::before{content: none;}
.h-auto .section-top .form-content .form-group [type="checkbox"] + label::after,
.h-auto .section-top .form-content .form-group [type="checkbox"]:checked + label::after,
.h-auto .section-top .form-content .form-group [type="radio"] + label::after,
.h-auto .section-top .form-content .form-group [type="radio"]:checked + label::after{content: ''; width: 14px; height: 14px; display: inline-block; background: url(/inc/naver/img/icon/ic-Check_on.svg) no-repeat center; background-size: 14px auto; border: none; position: absolute; top: 30px; right: 20px;}
.h-auto .chk-list .form-group [type="radio"]:checked+label, 
.h-auto .chk-list .form-group [type="checkbox"]:checked+label {color: var(--color-09);     box-shadow: 0 0 0 1px var(--color-09) inset;     border: var(--line-09); }
.h-auto .chk-list .form-group [type="checkbox"]:checked+label strong{color: var(--color-09);}
.h-auto .chk-list .form-group [type="checkbox"]:checked+label .sm-text{color: #2e343a;}
.h-auto .section-top .form-content .form-group [type="checkbox"] + label::after,
.h-auto .section-top .form-content .form-group [type="radio"] + label::after{background: url(/inc/naver/img/icon/ic-Check.svg) no-repeat center; background-size: 14px auto;}
.h-auto .chk-right  .form-group [type="checkbox"] + label::before,
.h-auto .chk-right  .form-group [type="radio"] + label::before{content: none;}
.h-auto .chk-right  .form-group [type="checkbox"] + label::after,
.h-auto .chk-right  .form-group [type="radio"] + label::after{background-color:#ccc;}
.h-auto .form-content > .title-wrap{padding: 0 4px;}
.h-auto .form-content > .title-area{padding: 0 4px; display: block; }
.h-auto .form-content > .title-area + .chk-right{margin-top: 20px;}
.h-auto .form-content > .title-area .title{font-size: 20px; line-height: 28px; margin-bottom: 20px;}
.h-auto .form-content {margin-top: 32px; margin-bottom: 50px; padding:0;}
.h-auto .form-content dt{padding: 0 4px; font-size: 18px; line-height: 24px;}
.h-auto .form-content dt .sm-text{font-weight: 400;}
.h-auto .form-content.list .form-group [type="radio"] + label{ width: 100%; border: 1px solid #dcdee0; font-size: 14px; line-height: 14px; text-align: center; justify-content: center; padding:0; height: 48px; border-radius: 8px; color: #929292; font-weight: 700;}
.h-auto .form-content.list .form-group [type="radio"]:checked + label{ background-color: #fff;  color: #09aa5c; border: 2px solid #09aa5c;}
.h-auto .form-content.list .form-group [type="radio"] + label::after,
.h-auto .form-content.list .form-group [type="radio"] + label::before,
.h-auto .form-content.list .form-group [type="radio"]:checked + label::after,
.h-auto .form-content.list .form-group [type="radio"]:checked + label::before{content: none;}
.h-auto .form-content.list .form-group + .form-group {margin-left: 8px;}
.h-auto .list>.form-content{margin-top: 32px; margin-bottom: 50px;}
.h-auto .list>.form-content dt{padding: 0 4px; }
.h-auto .list>.form-content dt .sm-text{font-weight: 400;}
.h-auto .list>.form-content .form-group [type="radio"] + label{ width: 100%; border: 1px solid #dcdee0; font-size: 14px; line-height: 14px; text-align: center; justify-content: center; padding:0; height: 48px; border-radius: 8px; color: #929292; font-weight: 700;}
.h-auto .list>.form-content .form-group [type="radio"]:checked + label{ background-color: #fff;  color:#09aa5c; border: 2px solid #09aa5c;}
.h-auto .list>.form-content .form-group [type="radio"] + label::after,
.h-auto .list>.form-content .form-group [type="radio"] + label::before,
.h-auto .list>.form-content .form-group [type="radio"]:checked + label::after,
.h-auto .list>.form-content .form-group [type="radio"]:checked + label::before{content: none;}
.h-auto .list>.form-content .form-group + .form-group {margin-left: 8px;}
.title-wrap .title{font-size: 22px; color: #1e1e23; font-weight: 700; line-height: 30px; word-break: keep-all;}
.info-area .title-wrap .title{font-size: 20px;}
.text-cont-md + .list-type2{margin-top: 24px;}
.list-type2 dd strong[class^="level"]{background: none !important;}
.propensity-list [class^="level"].active span{color: inherit !important;}
.page-cont-wid {width: calc(100% - 64px); border-top: var(--line-dd); margin: 32px auto ;}
.page-cont-wid .list-type1 dl{padding: 14px 0;}
.page-cont-wid .list-type1 dl dd{width: calc(100% - 100px);}
.page-cont-wid .list-type1 dl dd .color-red{text-align: right; display: inline-block;}
.top-content .propensity-area {margin: 48px 0 0;}
.propensity-area .title{font-size: 20px; font-weight: 700; line-height: 28px;}
.propensity-area .propensity-list{background-color: #f7f7f7; border-radius: 16px; padding: 24px 20px; margin: 16px 0 0; display: flex; justify-content: center; position: relative;}
.propensity-area .propensity-list ul{background-color: #fff; min-width: 90px; flex-direction: column; align-items: center; justify-content: center; display: flex; border-radius: 4px;}
.propensity-area .propensity-list ul li:first-child div{border-radius: 4px 4px 0 0;}
.propensity-area .propensity-list ul li:last-child div{border-radius: 0 0 4px 4px;}
.propensity-area .propensity-list ul li{display: block; width: 100%;}
.propensity-area .propensity-list ul li div{color: #000; position: relative; text-align: center; border: 1px solid; font-size: 13px; padding: 8px; line-height: 16px; border-color: #e6e6e6;}
.propensity-area .propensity-list .stage-six ul li div{font-size: 12px; padding: 8px; line-height: 16px;}
.propensity-area .propensity-list ul li .level-text span{color: #888; font-weight: 400 !important; line-height: 20px;}
.propensity-area .propensity-list ul li+li[class^="level"]>div{margin-top: -1px; border-top: none;}
.propensity-area .propensity-list ul li:last-child div{border-bottom: 1px #e6e6e6 solid;}
.propensity-area .propensity-list ul li.active div{margin-bottom: 0px; border-top: 1px solid !important;}
.propensity-area .propensity-list ul li.active + li.active div{margin-bottom: 0; margin-top: -1px;}
.propensity-area .propensity-list ul li strong{display: block; font-size: 13px; line-height: 20px;}
.propensity-list li[class^="level"] .level-tip{display: none;}
.propensity-list li[class^="level"] .level-tip.on{display: block;}
.propensity-area .propensity-list .tip .level-tip{position: absolute; right: 0; top: 50%; color: #fff; font-size: 10px; line-height: 14px; border-radius: 14px; padding: 3px 6px; transform: translate(88px, -12px);}
.propensity-area .propensity-list .tip .point {display: block; position: absolute; border-top-right-radius: 30%; transform: rotate(153deg) skewX(324deg) scale(1, 0.866) translate(0px, -4px); width: 10px; height: 0px; left: -4px; top: 50%; background-color: inherit;}
.propensity-area .propensity-list .tip .point::before {content: ''; width: 6px; height: 6px; position: absolute; transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); /* border-top-right-radius: 30%; */background-color: inherit;}
.propensity-area .propensity-list .tip .my-active.on{display: block;}
.propensity-area .propensity-list .tip .my-active {display: none; position: absolute; right: calc(50% + 58px); transform: translateY(-12px); top: 50%; background-color: #1e1e23; font-size: 10px; line-height: 14px; border-radius: 20px; padding: 3px 6px; color: #fff !important; min-width: 70px; border: none;}
/* 부적합확인서 위험도 */
.propensity-area .propensity-list > .my-active {display: block; position: absolute; right: calc(50% + 58px); transform: translateY(-12px); top: 50%; background-color: #1e1e23; font-size: 10px; line-height: 14px; border-radius: 20px; padding: 3px 6px; color: #fff !important; min-width: 70px; border: none;}
.propensity-area .propensity-list > .level-tip {position: absolute; right: calc(50% + -132px); top: 50%; color: #fff; font-size: 10px; line-height: 14px; border-radius: 14px; padding: 3px 6px;}
.level6.level-tip {background: #F34B55;}
.level5.level-tip {background: #F88004;}
.level4.level-tip {background: #F88004;}
.level3.level-tip {background: #14AE5C;}
.level2.level-tip {background: #0094FF;}
.level1.level-tip {background: #2B4EB6;}
.propensity-area .propensity-list ul + .my-active .point {display: block; position: absolute; border-top-right-radius: 30%; transform: rotate(333deg) skewX(324deg) scale(1, 0.866) translate(0px, -5px); width: 10px; height: 0px; right: -8px; left: auto; top: 50%; background-color: inherit;}
.propensity-area .propensity-list ul + .my-active .point::before {content: ''; width: 6px; height: 6px; position: absolute; transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); border-top-right-radius: 30%; background-color: inherit;}
.propensity-area .propensity-list > .level-tip .point {display: block; position: absolute; border-top-right-radius: 30%; transform: rotate(153deg) skewX(324deg) scale(1, 0.866) translate(10px, -1px); width: 10px; height: 0px; left: 0px; top: 50%; background-color: inherit;}
.propensity-area .propensity-list > .level-tip .point::before {content: ''; width: 6px; height: 6px; position: absolute; transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); /* border-top-right-radius: 30%; */background-color: inherit;}

/* 투자성향 5단계 */
.propensity-area .propensity-list .my-active.level1,
.propensity-area .propensity-list .level-tip.level1{top: calc(100% - 20%); transform: translateY(2px);}
.propensity-area .propensity-list .my-active.level2,
.propensity-area .propensity-list .level-tip.level2{top: calc(100% - 40%); transform: translateY(12px);}
.propensity-area .propensity-list .my-active.level3,
.propensity-area .propensity-list .level-tip.level3{top: calc(100% - 60%); transform: translateY(22px);}
.propensity-area .propensity-list .my-active.level4,
.propensity-area .propensity-list .level-tip.level4{top: calc(100% - 80%); transform: translateY(32px);}
.propensity-area .propensity-list .my-active.level5,
.propensity-area .propensity-list .level-tip.level5{top: 0; transform: translateY(42px);}
.propensity-area .propensity-list .my-active .point{display: block; position: absolute; border-top-right-radius: 30%; transform: rotate(333deg) skewX(324deg) scale(1, 0.866) translate(0px, -3px); width: 10px; height: 0px; right: -4px; left: auto; top: 50%; background-color: inherit;}
.propensity-area .propensity-list .my-active .point::before {content: ''; width: 6px; height: 6px; position: absolute; transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); border-top-right-radius: 30%; background-color: inherit;}
.propensity-area .propensity-list .row-area {background-color: #fff; flex-direction: row; align-items: stretch; justify-content: center; display: flex; flex: 1; width: 100%; min-width: 220px; margin-top: 32px; border-radius: 4px;}
.propensity-area .propensity-list .stage-six .row-area{width: 99.6%;}
.propensity-area .propensity-list .stage-six .row-area li{width: 16.6%;}
.propensity-area .propensity-list .row-area li{width: 20%;}
.propensity-area .propensity-list .row-area li div{color: #888;}
.propensity-area .propensity-list .row-area li:first-child div{border-radius: 4px 0 0 4px;}
.propensity-area .propensity-list .row-area li:last-child div{border-radius: 0 4px 4px 0;}
.propensity-area .propensity-list .row-area li:first-child div,
.propensity-area .propensity-list .row-area li+li>div{border-right: none; border-bottom: 1px solid; border-color: #e6e6e6; height:100%; align-items: center; display: flex; justify-content: center;}
.propensity-area .propensity-list .row-area li:last-child div{border-right: 1px solid; border-color: #e6e6e6;}
.propensity-area .propensity-list .row-area li.active div{border-right: 1px solid;}
.propensity-area .propensity-list .row-area li[class^="level"]+li[class^="level"]>div{border-top: 1px solid; border-color: #e6e6e6; margin-top: 0;}
.row-area.level4.active .level5 >div,
.row-area.level3.active .level4 >div,
.row-area.level2.active .level3 >div,
.row-area.level1.active .level2 >div{border-left: none;}
.propensity-area .propensity-list .row-area .my-active {display: none;}
.propensity-area .propensity-list .row-area.level1 .level1 .my-active,
.propensity-area .propensity-list .row-area.level2 .level2 .my-active,
.propensity-area .propensity-list .row-area.level3 .level3 .my-active,
.propensity-area .propensity-list .row-area.level4 .level4 .my-active,
.propensity-area .propensity-list .row-area.level6 .level6 .my-active,
.propensity-area .propensity-list .row-area.level5 .level5 .my-active {display: block;}
.propensity-area .propensity-list .row-area .my-active {position: absolute; left: 50%; top: 50%; color: #fff; font-size: 10px; line-height: 14px; border-radius: 14px; padding: 3px 6px; transform: translate(-33px, -58px); background-color: #1e1e23; width: 70px; height: 20px;}
.propensity-area .propensity-list .row-area .my-active .point {display: block;    position: absolute;    border-top-right-radius: 0;    width: 0px;    height: 0px;    left: 50%;    top: auto;    bottom: 0;    transform: translate(-3px, 0px);}
.propensity-area .propensity-list .row-area  .point::before {content: '';    width: 0;    height: 0;    position: absolute;    transform: none;    border-top-right-radius: 0;    display: block;    border-top: 5px solid #1e1e23;    border-left: 3px solid transparent;    border-right: 3px solid transparent;    background: none;}
.pop-content .propensity-area .propensity-list .row-area li { width: 16.6%;}
.pop-content .propensity-area .propensity-list .row-area .my-active{width: 36px; transform: translate(-18px, -58px);}
.propensity-area .propensity-list .row-area li div{padding: 5px; min-height: 52px;}
.pro-wrap{margin-top: 32px; margin-bottom: 40px; text-align: left;}
.pro-wrap div[class*="-content"] + div[class*="-content"]{margin-top: 48px; }
.pro-wrap div[class*="-content"] + div[class*="-content"] .title-wrap .title{font-size: 20px; line-height: 28px; }
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level1 + .my-active{width: calc(16.6% - 7px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level2 + .my-active{width: calc(33.2% - 15px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level3 + .my-active{width: calc(49.8% - 23px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level4 + .my-active{width: calc(83% - 34px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level5 + .my-active{width: calc(83% - 34px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level6 + .my-active{width: calc(100% - 44px);}
.pro-wrap .propensity-area .propensity-list.group-area .my-active .line-icon{white-space:nowrap;}
.pro-wrap .propensity-area .propensity-list.group-area .my-active .line-icon::before{content: ''; width: 100%; border: 1px #ddd solid; position: absolute; bottom: -12px; left: 0; height: 10px; border-bottom: none; border-radius: 2px 2px 0px 0px;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area + .my-active{position: absolute; left: 22px; right: auto; transform: translate(0%, -46px); top: 50%; background-color: transparent; font-size: 12px; line-height: 20px; border-radius: 0; padding: 0; color: #888 !important; width: calc(100% - 43px); text-align: center;}
.pro-wrap .propensity-area .text-cont-md{margin-top: 20px; font-size: 16px; line-height: 24px; color: #767678;}
.group-area .level1.active >li:nth-child(2) div,
.group-area .level1.active >li:nth-child(3) div,
.group-area .level1.active >li:nth-child(4) div,
.group-area .level1.active >li:nth-child(5) div,
.group-area .level2.active >li:nth-child(3) div,
.group-area .level2.active >li:nth-child(4) div,
.group-area .level2.active >li:nth-child(5) div,
.group-area .level3.active >li:nth-child(4) div,
.group-area .level3.active >li:nth-child(5) div,
.group-area .level4.active >li:nth-child(5) div{font-weight: 400; border-color: #e6e6e6 !important; color: #888 !important; background: #fff;}
.group-area .level3.active >li:nth-child(4) div{border-right: 1px solid #e6e6e6 !important;}
.group-area .stage-six .level1.active >li:nth-child(6) div,
.group-area .stage-six .level2.active >li:nth-child(6) div,
.group-area .stage-six .level3.active >li:nth-child(6) div,
.group-area .stage-six .level5.active >li:nth-child(6) div,
.group-area .stage-six .level4.active >li:nth-child(6) div{font-weight: 400; border-color: #e6e6e6 !important; color: #888 !important; background: #fff;}
.group-area .stage-six .level4.active >li:nth-child(5) div{font-weight: 700; border-color: #F88004 !important; color: #F88004 !important; background: #F880041a;}

.level5 .level5 div,
.alone-area .level5.active .level5 div,
.level5.active div{font-weight: 700; border-color: #F34B55 !important; color: #F34B55 !important; background: #F34B551a;}
.level5 .level-tip {background: #F34B55;}

.level4 .level4 div,
.alone-area .level4.active .level4 div,
.level4.active div{font-weight: 700; border-color: #F88004 !important; color: #F88004 !important; background: #F880041a;}
.level4 .level-tip {background: #F88004;}

.level3 .level3 div,
.alone-area .level3.active .level3 div,
.level3.active div{font-weight: 700; border-color: #14AE5C !important; color: #14AE5C !important; background: #14AE5C1a;}
.level3 .level-tip {background:#14AE5C;}

.level2 .level2 div,
.alone-area .level2.active .level2 div,
.level2.active div{font-weight: 700; border-color: #0094FF !important; color: #0094FF !important; background: #0094FF1a;}
.level2 .level-tip {background: #0094FF;}

.level1 .level1 div,
.level1.active div,
.alone-area .level1.active .level1 div,
.level1.active .level1{font-weight: 700; border-color: #2B4EB6 !important; color: #2B4EB6 !important; background: #2B4EB61a;}
.level1 .level-tip {background: #2B4EB6;}

.stage-six .level6.active div{font-weight: 700; border-color: #F34B55 !important; color: #F34B55 !important; background: #F34B551a;}
.stage-six .level5.active div{font-weight: 700; border-color: #F88004 !important; color: #F88004 !important; background: #F880041a;}
.pop-content .alone-area .level6.active .level6 div{font-weight: 700; border-color: #F34B55 !important; color: #F34B55 !important; background: #F34B551a;}
.pop-content .alone-area .level5.active .level5 div{font-weight: 700; border-color: #F88004 !important; color: #F88004 !important; background: #F880041a;}
.pop-content .alone-area ul li div{font-size: 12px;}


/* 6단계 */
.propensity-area .propensity-list .stage-six{width: 100%;}
.propensity-area .propensity-list.stage-six .my-active.level1,
.propensity-area .propensity-list.stage-six .level-tip.level1{top: calc(100% - 17%); transform: translateY(2px);}
.propensity-area .propensity-list.stage-six .my-active.level2,
.propensity-area .propensity-list.stage-six .level-tip.level2{top: calc(100% - 34%); transform: translateY(12px);}
.propensity-area .propensity-list.stage-six .my-active.level3,
.propensity-area .propensity-list.stage-six .level-tip.level3{top: calc(100% - 51%); transform: translateY(22px);}
.propensity-area .propensity-list.stage-six .my-active.level4,
.propensity-area .propensity-list.stage-six .level-tip.level4{top: calc(100% - 68.3%); transform: translateY(5px);}
.propensity-area .propensity-list.stage-six .my-active.level5,
.propensity-area .propensity-list.stage-six .level-tip.level5{top: calc(100% - 68.3%); transform: translateY(5px);}
.propensity-area .propensity-list.stage-six .my-active.level6,
.propensity-area .propensity-list.stage-six .level-tip.level6{top: 0; transform: translateY(42px);}

.propensity-list .stage-six .level6 .level6 div,
.propensity-list .stage-six .level6.active div{font-weight: 700; border-color: #F34B55 !important; color: #F34B55 !important; background: #F34B551a;}
.propensity-list .stage-six .level6.active li.level6 div{border-left: none;}
.level6 .level-tip {background: #F34B55;}
.propensity-list .stage-six .level4 .level5 div,
.propensity-list .stage-six .level5.active div{font-weight: 700; border-color:#F88004 !important; color: #F88004 !important; background: #F880041a;}
.level5 .level-tip {background: #F88004;}

.propensity-list .stage-six .level4 .level4 div,
.propensity-list .stage-six .level4 .level5 div,
.propensity-list .stage-six .level4.active div{font-weight: 700; border-color: #F88004 !important; color: #F88004 !important; background: #F880041a;}
.level4 .level-tip {background:#F88004;}

.propensity-list .stage-six .level3 .level3 div,
.propensity-list .stage-six .level3.active div{font-weight: 700; border-color: #14AE5C !important; color: #14AE5C !important; background: #14AE5C1a;}
.level3 .level-tip {background: #14AE5C;}

.propensity-list .stage-six .level2 .level2 div,
.propensity-list .stage-six .level2.active div{font-weight: 700; border-color: #0094FF !important; color: #0094FF !important; background: #0094FF1a;}
.level2 .level-tip {background: #0094FF;}

.propensity-list .stage-six .level1 .level1 div,
.propensity-list .stage-six .level1.active .level1{font-weight: 700; border-color: #2B4EB6 !important; color: #2B4EB6 !important; background: #2B4EB61a;}
.level1 .level-tip {background: #2B4EB6;}

.level1-text{color: #2B4EB6 !important;}
.level2-text{color: #0094FF !important;}
.level3-text{color: #14AE5C !important;}
.level4-text{color: #F88004 !important;}
.level5-text{color: #F88004 !important;}
.level6-text{color: #F34B55 !important;}
.new-group .level1.active >li:nth-child(1) div,
.new-group .level1.active >li:nth-child(2) div,
.new-group .level1.active >li:nth-child(3) div,
.new-group .level1.active >li:nth-child(4) div,
.new-group .level1.active >li:nth-child(5) div,
.new-group .level2.active >li:nth-child(1) div,
.new-group .level2.active >li:nth-child(2) div,
.new-group .level2.active >li:nth-child(3) div,
.new-group .level2.active >li:nth-child(4) div,
.new-group .level3.active >li:nth-child(1) div,
.new-group .level3.active >li:nth-child(2) div,
.new-group .level3.active >li:nth-child(3) div,
.new-group .level4.active >li:nth-child(1) div,
.new-group .level4.active >li:nth-child(2) div,
.new-group .level5.active >li:nth-child(1) div{font-weight: 400; border-color: #e6e6e6 !important; color: #888 !important; background: #fff;}

.propensity-area .propensity-list.new-group .level1.active >li:nth-child(6) div,
.propensity-area .propensity-list.new-group .level2.active >li:nth-child(5) div,
.propensity-area .propensity-list.new-group .level3.active >li:nth-child(4) div,
.propensity-area .propensity-list.new-group .level4.active >li:nth-child(3) div,
.propensity-area .propensity-list.new-group .level5.active >li:nth-child(2) div{border-top-style: solid; border-top-width: 1px;}
.propensity-area .propensity-list.new-group ul li+li[class^="level"]>div {margin-top: auto;}
.propensity-area .propensity-list.new-group .column-area.level1 + .my-active{width: calc(20% - 8px) !important;}
.propensity-area .propensity-list.new-group .column-area.level2 + .my-active{width: calc(40% - 18px) !important;}
.propensity-area .propensity-list.new-group .column-area.level3 + .my-active{width: calc(60% - 28px) !important;}
.propensity-area .propensity-list.new-group .column-area.level4 + .my-active{width: calc(80% - 38px) !important;}
.propensity-area .propensity-list.new-group .column-area.level5 + .my-active{width: calc(100% - 48px);}
.propensity-area .propensity-list.new-group .column-area.level6 + .my-active{width: calc(100% - 54px);}
.propensity-area .propensity-list.new-group .my-active .line-icon{white-space:nowrap;}
.propensity-area .propensity-list.new-group .my-active .line-icon::before{content: ''; width: 100%; border: 1px #ddd solid; position: absolute; bottom: -12px; left: 0; height: 10px; border-bottom: none; border-radius: 2px 2px 0px 0px;}
.propensity-area .propensity-list.new-group .column-area + .my-active{position: absolute; left: 24px; right: auto; transform: translate(0%, -46px); top: 50%; background-color: transparent; font-size: 12px; line-height: 20px; border-radius: 0; padding: 0; color: #888 !important; width: calc(100% - 48px); text-align: center;}

.propensity-area .text-wrap{margin-top: 20px;}
.propensity-area .text-wrap .title{font-size: 16px; color: #767678; line-height: 24px;}
.propensity-area .text-wrap .text-cont-md{margin-top: 8px;color: #767678; font-size: 16px; line-height: 24px;}

.alone-area .row-area.active div{font-weight: 400; border-color: #e6e6e6 !important; color: #888 !important; background: #fff;}
.level1.active >li:nth-child(1) div,
.level2.active >li:nth-child(2) div,
.level3.active >li:nth-child(3) div,
.level5.active >li:nth-child(5) div,
.level4.active >li:nth-child(4) div{border-right: 1px solid !important;}

.stage-six .level1.active >li:nth-child(1) div,
.stage-six .level2.active >li:nth-child(2) div,
.stage-six .level3.active >li:nth-child(3) div,
.stage-six .level4.active >li:nth-child(4) div,
.stage-six .level4.active >li:nth-child(5) div,
.stage-six .level5.active >li:nth-child(6) div{border-right: 1px solid !important;}
.stage-six .level5.active >li:nth-child(6) div{border-left: none;}
.stage-six .level6.active >li:nth-child(5) div{border-right: 1px solid;}
/* 투자성향 3단계 */
.propensity-area .propensity-list.short .my-active.level1,
.propensity-area .propensity-list.short .level-tip.level1{top: calc(100% - 33%); transform: translateY(-15px);}
.propensity-area .propensity-list.short .my-active.level2,
.propensity-area .propensity-list.short .level-tip.level2{top: calc(100% - 66%); transform: translateY(12px);}
.propensity-area .propensity-list.short .my-active.level3,
.propensity-area .propensity-list.short .level-tip.level3{top: calc(100% - 90%); transform: translateY(20px);}
.propensity-list.short .level3.active div{font-weight: 700; border-color: #F34B55 !important; color: #F34B55 !important; background: #F34B551a;}
.propensity-list.short .level3 .level-tip{background: yellow;}
.propensity-list.short .level2.active div{font-weight: 700; border-color: #F88004 !important; color: #F88004 !important; background: #F880041a;}
.propensity-list.short .level2 .level-tip{background: blue;}
.propensity-list.short .level1.active div{font-weight: 700; border-color: #14AE5C !important; color: #14AE5C !important; background: #14AE5C1a;}
.propensity-list.short .level1 .level-tip{background: violet;}
.propensity-list.short .level3.level-tip{background: #F34B55;}
.propensity-list.short .level2.level-tip{background: #F88004;}
.propensity-list.short .level1.level-tip{background: #14AE5C;}
.short .level3-text{color: #F34B55 !important;}
.short .level2-text{color: #F88004 !important;}
.short .level1-text{color: #14AE5C !important;}
.list-wrap .dl-wrap  dt{font-size: 20px; line-height: 28px;margin-bottom: 20px;}
.list-wrap .dl-wrap .list-bar li{font-size: 14px; line-height: 20px;}
.list-wrap .dl-wrap .list-bar li .list-bull li{font-size: 12px; line-height: 18px;}
.modal-content.pop1 .pop-info-tit{line-height: 24px; margin-bottom: 16px;}
.modal-content [class^="pop"] .info-tit{font-size: 13px; color: #666; margin-bottom: 4px;}
.modal-content [class^="pop"] .list-bar li{position: relative; color: #888; padding-left: 7px; font-size: 13px; line-height: 20px;}
.modal-content [class^="pop"] .list-bar li::before{content: ''; width: 4px; height: 1px; border-radius: 50%; display: inline-block; background-color: #666; position: absolute; left: 0; top: 8px;}
.modal-content.pop2{display: none;}
.modal-content.active{display: block;}
.title-wrap + .list-type2 {margin-top: 20px; margin-bottom: 16px;}
.list-type2 dd {color: #888;}
.list-type2 dd .info-blue  {color: #0083D1 !important; font-weight: 700;}
.list-type2 dd .info-red {color: #f24538 !important; font-weight: 700;}
.list-type2{margin-top: 32px; margin-bottom: 16px;}
.list-type2 dl { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-bottom: var(--line-ee); font-size: 15px; line-height: 22px;}
.list-type2.flex-top dl{align-items: flex-start; font-size: 16px; line-height: 24px;}
.list-type2.flex-top dt{font-weight: 700;}
.list-type2.flex-top dd{margin-top: 0; color: #929292; font-size: 14px; line-height: 24px;}
.list-type2.flex-top dd .color-blue{color: #09aa5c !important;}
.list-type2.flex-top dl+dl{margin-top: 0;}
.list-type2.flex-top dt .sm-text{font-size: 14px; line-height: 20px; font-weight: 400; color: #888; margin-top: 8px;}
.list-type2 dl:first-child {border-top: var(--line-ee);}
.list-type2 dt {min-width: 90px; color: #1e1e23; text-align: left;}
.list-type2.short{text-align: right;margin-top: 0;}
.list-type2.short dl + dl{border-top: var(--line-ee);}
.list-type2.short dl {border: none; padding: 16px 0;}
.list-type2.short dl:first-child {padding-top: 0; margin-top: 0;}
/* 투자성향별 상품안내 */
.scroll-table{overflow: auto; margin: 16px 0px 40px 16px; padding-right: 16px; height: calc(100% - 108px);}
.scroll-table table{width: auto; font-size: 12px; table-layout: fixed; word-break: keep-all; border-spacing: 0; border-collapse: separate;}
.scroll-table table tbody tr:last-child td{border-bottom: 1px solid #ddd !important;}
.scroll-table table tbody tr:last-child th{border-bottom: 1px solid #ddd !important;}
.scroll-table table tbody tr th{position: sticky; position: -webkit-sticky; left: 0; background-color: #fff;}
.scroll-table table th{background-color: #f7f7f7;  padding: 10px 12px; text-align: center; border-bottom: none !important; position: sticky; position: -webkit-sticky; top: 0;}
.scroll-table table td{background-color: #fff;  padding: 10px 8px; text-align: center; border-bottom: none !important;}
.scroll-table table th,
.scroll-table table td{line-height: 16px; border: var(--line-dd); border-left: none !important; white-space: nowrap;}
.scroll-table table th:first-child,
.scroll-table table td:first-child{border-left: 1px solid #ddd !important;}
.scroll-table table th:first-child{text-align: left; border-left: 1px solid #ddd;}
.scroll-table table tr.sticky th:first-child{position: sticky; position: -webkit-sticky; top: 0; left: 0; }
.scroll-table table tr.sticky2 th{position: sticky; position: -webkit-sticky; top: 37px; }
.scroll-table table tr.sticky2 th:first-child{text-align: center; border-left: none !important;}
.scroll-table table .bd{font-weight: bold;}
.scroll-table table tbody tr.grade-1 th{color: #F34B55;}
.scroll-table table tbody tr.grade-1 th::before{content: '';position: absolute; width: 100%; height: 100%; top: -1px; left: 0; border: 3px #F34B55 solid !important; }
.scroll-table table tbody tr.grade-1 td{border: 1px #F34B5580 solid; background-color: #F34B551a; border-bottom: 1px #F34B5580 solid !important;}
.scroll-table table tbody tr.grade-2 th::before{content: '';position: absolute; width: 100%; height: 100%; top: -1px; left: 0; border: 3px #F88004 solid !important; }
.scroll-table table tbody tr.grade-2 th{ color: #F88004;}
.scroll-table table tbody tr.grade-2 td{border: 1px #F8800480 solid; background-color: #F880041a; border-top: none !important; border-bottom: 1px #F8800480 solid !important;}
.scroll-table table tbody tr.grade-3 th{color: #F88004}
.scroll-table table tbody tr.grade-3 th::before{content: '';position: absolute; width: 100%; height: 100%; top: -1px; left: 0; border: 3px #F88004 solid !important; }
.scroll-table table tbody tr.grade-3 td{border: 1px #F8800480 solid; background-color: #F880041a; border-top: none !important; border-bottom: 1px #F8800480 solid !important;}
.scroll-table table tbody tr.grade-4 th{color: #14AE5C;}
.scroll-table table tbody tr.grade-4 th::before{content: '';position: absolute; width: 100%; height: 100%; top: -1px; left: 0; border: 3px #14AE5C solid !important; }
.scroll-table table tbody tr.grade-4 td{border: 1px #14AE5C80 solid; background-color: #14AE5C1a; border-top: none !important; border-bottom: 1px #14AE5C80 solid !important;}
.scroll-table table tbody tr.grade-5 th{color: #0094FF;}
.scroll-table table tbody tr.grade-5 th::before{content: '';position: absolute; width: 100%; height: 100%; top: -1px; left: 0; border: 3px #0094FF solid !important; }
.scroll-table table tbody tr.grade-5 td{border: 1px #0094FF80 solid; background-color: #0094FF1a; border-top: none !important; border-bottom: 1px #0094FF80 solid !important;}
.scroll-table table tbody tr.grade-6 th{color: #2B4EB6;}
.scroll-table table tbody tr.grade-6 th::before{content: '';position: absolute; width: 100%; height: calc(100% + 2px); top: -1px; left: 0; border: 3px #2B4EB6 solid !important; }
.scroll-table table tbody tr.grade-6 td{border: 1px #2B4EB680 solid; background-color: #2B4EB61a; border-top: none !important; border-bottom: 1px #2B4EB680 solid !important;}
/* 투자성향별 상품안내 팝업용 */
.section-inner.pop-content{padding: 16px 24px 32px;}
.section-inner.pop-content .pop-info-tit{text-align: left;}
.section-inner.pop-content .propensity-area{margin: 16px 0 48px;}
.section-inner.pop-content .propensity-area .propensity-list{margin: 0 -8px 0;}
.pop-content .scroll-table table th,
.pop-content .scroll-table table td{white-space: inherit; color: #1e1e23; line-height: 20px;}
.pop-content .scroll-table{overflow: auto; margin: 0 ; padding-right: 0; height: auto;}
.pop-content .scroll-table table{width: 100%; font-size: 12px; table-layout: fixed; word-break: keep-all; border-spacing: 0; border-collapse: separate;}
.pop-content .scroll-table table th:first-child{text-align: center;}
.info-area .flex-wrap{display: flex; justify-content: center; align-items: center;  margin: -8px 0 24px;}
.info-area .flex-wrap span[class^="level"]{font-size: 12px; line-height: 12px; display: inline-block; margin-bottom: 4px; padding: 6px 8px; border-radius: 10px; font-weight: 700;}
.info-area .flex-wrap > div{position:relative;  text-align: center;}
.info-area .flex-wrap div strong{display: block; font-size: 24px; line-height: 32px;}
.info-area .flex-wrap .high + .low{padding-left: 30px;}
.info-area .flex-wrap .high + .low::before{content: '~'; padding:0 2px; display: inline-block; position: absolute; left: 4px; top: 50%;  transform: translateY(-2px);}
.invest-content .label{ font-weight: 700; line-height: 14px; height: auto;}
.info-area .flex-wrap span[class^="level1-"],
.invest-content .label.level1{color: #2B4EB6 !important; background-color: #2B4EB61a !important; border: none;}
.info-area .flex-wrap span[class^="level2-"],
.invest-content .label.level2{color: #0094FF !important; background-color: #0094FF1a !important; border: none;}
.info-area .flex-wrap span[class^="level3-"],
.invest-content .label.level3{color: #14AE5C !important; background-color: #14AE5C1a !important; border: none;}
.info-area .flex-wrap span[class^="level4-"],
.invest-content .label.level4{color: #F88004 !important; background-color: #F880041a !important; border: none;}
.info-area .flex-wrap span[class^="level5-"],
.invest-content .label.level5{color: #F88004 !important; background-color: #F880041a !important; border: none;}
.info-area .flex-wrap span[class^="level6-"],
.invest-content .label.level6{color: #F34B55 !important; background-color: #F34B551a !important; border: none;}
.invest-content .chk-list2 .form-link [type="checkbox"] + label{color:#1E1E23;}
.invest-content .chk-list2 .form-link .text i{font-style: normal;}
.invest-content .chk-list2 .form-link .text-none,
.invest-content .chk-list2 .form-link .text{word-break: keep-all; color: #0083d1; padding-right: 16px; font-weight: 700;}
.invest-content .chk-list2 li+li{margin-top: 8px;}
/* .invest-content .chk-list2 li{background-color: #f7f7f7; border-radius: 16px; padding: 22px 24px; min-height: 67px; display: flex; align-items: center;} */
.invest-content .chk-list2 .form-group {display: flex; align-items: center; position: relative; min-height: 28px; width: 100%;}
.chk-list2 .form-group [type="checkbox"]+label::before{background: url(/inc/naver/img/icon/ic-Check.svg) no-repeat center;     background-size: 14px auto;}
.chk-list2 .form-group [type="checkbox"]:checked+label::before{background: url(/inc/naver/img/icon/ic-Check_on.svg) no-repeat center;     background-size: 14px auto;}

.chk-list2 .form-group [type="checkbox"]+label {position: relative; cursor: pointer; padding: 23px 50px 23px 20px; display: flex; align-items: center; justify-content: flex-start; font-size: 16px; color: var(--color-1e); font-weight: 700; line-height: 22px; border: var(--line-dc); border-radius: 8px; box-shadow: 4px 4px 4px 0px #0000000a; width: 100%;}
.chk-list2 .form-group [type="checkbox"]:checked+label { color: var(--color-09); box-shadow: 0 0 0 1px var(--color-09) inset; border: var(--line-09);}
.chk-list2 .form-group [type="checkbox"]+label::before{}
.chk-list2 .form-group.form-link [type="checkbox"]:checked+label::after{background:#1E1E23;}
.chk-list2 .form-group.form-link [type="checkbox"]+label::after {content: ''; width: 16px; height: 16px; display: inline-block; background: #777; -webkit-mask: url(/inc/img/newimg/ico-arrow-rightB.svg) no-repeat center; -webkit-mask-size: 7.3px auto; position: absolute; right: 24px; top: 50%; transform: translateY(-8px);  z-index: 0;}
.chk-title .form-group.form-link [type="checkbox"]:checked+label::after{background:#1E1E23;}
.chk-title .form-group.form-link [type="checkbox"]+label::after {content: ''; width: 16px; height: 16px; display: inline-block; background: #777; -webkit-mask: url(/inc/img/newimg/ico-arrow-rightB.svg) no-repeat center; -webkit-mask-size: 7.3px auto; position: absolute; right: 24px; top: 50%; transform: translateY(-8px);  z-index: 0;}
.invest-content{margin-top: 16px;}
.invest-content .info-area{margin-bottom: 24px;}
.invest-content .grade-list{text-align: center; background: #f7f9fa; padding:24px 32px;border-radius: 16px;}
.invest-content .grade-list ul li{width: 87px; display: flex; flex-direction: column; align-items: center;}
.invest-content .grade-list ul li + li{margin-left: 4%;}
.invest-content .grade-list ul li::before{content: ''; position: relative; width: 60px; height: 60px; border-radius: 50px; display: block; margin-bottom: 8px;}
/* 예금자비보호 */
.invest-content .grade-list ul li.i-unprot::before{background: url(/inc/img/icon-unprot.svg) no-repeat center; background-size: 100% auto;}
/* 원금손실가능 */
.invest-content .grade-list ul li.i-loss::before{background: url(/inc/img/icon-loss.svg) no-repeat center; background-size: 100% auto;}
/* 자기책임원칙 */
.invest-content .grade-list ul li.i-self::before{background: url(/inc/img/icon-rule.svg) no-repeat center; background-size: 100% auto;}
/* 예금자보호 */
.invest-content .grade-list ul li.icon-prot::before{background: url(/inc/img/icon-prot.svg) no-repeat center; background-size: 100% auto;}
/* 원금보장 */
.invest-content .grade-list ul li.icon-principal::before{background: url(/inc/img/icon-principal.svg) no-repeat center; background-size: 100% auto;}
.invest-content .grade-list ul{display: flex; justify-content: center; font-size: 13px; line-height: 19px; color:#1E1E23;}
.invest-content .grade-list dd{color: #888; font-size: 13px; line-height: 20px; margin-top: 4px;}
.invest-content .chk-list{margin: 20px 0 40px; display: block !important;}
.invest-content .chk-list .btn-chk.arr-right{position: relative; cursor: pointer; padding: 23px 50px 23px 20px; display: block; font-size: 16px; color: var(--color-1e); font-weight: 700; line-height: 22px; border: var(--line-dc); border-radius: 8px; box-shadow: 4px 4px 4px 0px #0000000a; width: 100%;text-align: left;}
.invest-content .chk-list .btn-chk.arr-right::after {
    content: ''; width: 16px; height: 16px; display: inline-block; background: #777; -webkit-mask: url(/inc/img/newimg/ico-arrow-rightB.svg) no-repeat center; -webkit-mask-size: 7.3px auto; position: absolute; right: 24px; top: 50%; transform: translateY(-8px); z-index: 0;
}
.invest-content .form-group.form-link span i.active::after{background-color: #aaa;}
.invest-content .form-group.form-link span i::after{content: ''; width: 8px; height: 24px; display: inline-block; background: #0083d1; -webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 6px auto; position: absolute; right: 0; top: 50%; transform: translateY(-12px); z-index: 0;}
.invest-content .form-group.form-link span i.active{color: #aaa; font-weight: 400;}
.invest-content .list-wrap dt{margin-bottom: 4px;}
/* .invest-content .list-wrap dd, */
/* .invest-content .list-wrap li{font-size: 15px; line-height: 26px; color: #666;} */
.invest-content .info-area .trade-list{margin: 0 0 40px 0;}

.invest-content .info-area.list-mg{margin-bottom: 40px;}
.invest-content .info-area.list-mg + .btn-wrap-box{margin-top: -36px !important;}
.invest-content .info-area.list-mg .btn-wrap-box{margin-top: 32px !important;}
.invest-content .info-area.list-mg .list-bar + .list-asterisk{margin-top: 4px;}
.invest-content .chk-list .form-link [type="checkbox"] + label{color:#1E1E23;}
.invest-content .chk-list .form-link .text i{font-style: normal;}
.invest-content .chk-list .form-link .text-none,
.invest-content .chk-list .form-link .text{word-break: keep-all; color: #0083d1; padding-right: 16px; font-weight: 700;}
.invest-content .list-tooltip li + li{margin-top: 24px;}
.invest-content .list-tooltip li .tooltip-cont{display: flex; height: 40px; align-items: center;}
.invest-content .list-tooltip li .btn-tooltip{font-size: 16px; font-weight: 700; line-height: 23px; display: flex; align-items: center; width: 100%; height: 40px; background: none;}
.invest-content .list-tooltip li .btn-tooltip::after{content: ''; width: 20px; height: 20px; background: url(/inc/img/newimg/ico-qmark.svg) no-repeat center; display: block; margin-left: 4px; position: relative; }
.invest-content .list-tooltip li .btn-tooltip::before{content: ''; width: 40px; height: 40px;  border-radius: 50px; display: block; margin-right: 16px; position: relative; right: 0; top: 0; z-index: 0;}
/* 자료열람요구권 */
.invest-content .list-tooltip li.i-tip-arr  .btn-tooltip::before{background: url(/inc/img/img-tip-arr.png) no-repeat center; background-size: 100% auto;}
/* 위법계약해지권 */
.invest-content .list-tooltip li.i-tip-law  .btn-tooltip::before{background: url(/inc/img/img-tip-law.png) no-repeat center; background-size: 100% auto;}
/* 청약철회권 */
.invest-content .list-tooltip li.i-tip-cancel  .btn-tooltip::before{background: url(/inc/img/img-tip-cancel.png) no-repeat center; background-size: 100% auto;}
/* 장부열람권 */
.invest-content .list-tooltip li.i-tip-key  .btn-tooltip::before{background: url(/inc/img/img-tip-key.png) no-repeat center; background-size: 100% auto;}
.invest-content .list-tooltip li .btn-tooltip{font-weight: 400;}
.info-area.list-mg .list-wrap dd + dd,
.info-area.list-mg .list-wrap li + li {margin-top: 16px;}
.info-area.list-mg .list-wrap dl dd li + li {margin-top: 8px;}
.info-area.list-mg .list-wrap dl dt {margin-bottom: 8px;}
.bg-gray-box {background-color: #f7f7f7; border-radius: 16px; margin:24px 0 0; padding: 24px 24px; text-align: center;}
.bg-gray-box.type-left{text-align: left;}
.bg-gray-box.sm-text2{padding: 16px; text-align: left; color:#1E1E23; margin: 0;}
.bg-gray-box .title {font-weight: 700; line-height: 18px;}
.bg-gray-box ul {margin-top: 24px; display: flex; justify-content: center;}
.bg-gray-box ul li{position: relative; display: flex; flex-direction: column; align-items: center; width: 33%;}
.bg-gray-box ul li em{font-style: normal; font-size: 11px; display: block;}
.bg-gray-box ul li span{font-size: 15px; color:#1E1E23; font-weight: 700; width: 60px; height: 60px; background-color: #fff; border: 1px solid #eee; border-radius: 50px; display: block; line-height: 58px; margin-bottom: 8px;}
.bg-gray-box ul li + li::before {content: ''; width: 6px; height: 24px; display: inline-block; background: #aaa; -webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 6px auto; position: absolute; left: -3px; top: 18px;}
.bg-gray-box01.list-wrap .list-bar{background-color: #f7f7f7; border-radius: 16px; margin:24px 0 0; padding: 24px 24px; display: flex; flex-direction: column;}
.bg-gray-box01.list-wrap .list-bar li{ font-size: 13px; line-height: 19px;}
/* table */
/* 세로가 2개 이하일때 */
.table-area .tblinview-st1 table{width: 100%; table-layout: fixed; word-break: keep-all; border-spacing: 0; border-collapse: separate;}
.table-area .tblinview-st1 .radius1 th:first-child {border-radius: 4px 0 0 0; border-left: 1px solid #ddd !important;}
.table-area .tblinview-st1 .radius1 th:last-child {border-radius: 0 4px 0 0;}
.table-area .tblinview-st1 .radius2 th:first-child {border-radius: 0 0 0 4px;}
.table-area .tblinview-st1 .radius2 td:last-child {border-radius: 0 0 4px 0;}
.table-area .tblinview-st1 .radius2 td {border-left: none !important;}
.table-area .tblinview-st1 .radius1 th {border-left: none !important; border-bottom: none !important;}
.table-area .tblinview-st1 th {background-color: #eee; font-weight: 700;}
.table-area .tblinview-st1 td {text-align: center;}
.table-area .tblinview-st1 th,
.table-area .tblinview-st1 td{padding: 10px 12px; font-size: 14px; line-height: 20px; border: var(--line-dc); color: #1e1e23;}
/* 세로가 2개 이상일때 */
.table-area .tblinview-st1.length td:first-child {border-left: 1px solid #dcdee0 !important;}
.table-area .tblinview-st1.length .radius1 th:first-child {border-radius: 4px 0 0 0; border-left: 1px solid #dcdee0 !important;}
.table-area .tblinview-st1.length .radius1 th:last-child {border-radius: 0 4px 0 0;}
.table-area .tblinview-st1.length .radius1 td:last-child {border-radius: 0 4px 0 0;}
.table-area .tblinview-st1.length .radius2 td:first-child {border-radius: 0 0 0 4px; border-left: 1px solid #dcdee0 !important;}
.table-area .tblinview-st1.length .radius2 td:last-child {border-radius: 0 0 4px 0;}
.table-area .tblinview-st1.length .radius2 th,
.table-area .tblinview-st1.length .radius2 td{border-bottom: 1px solid #dcdee0 !important;}
.table-area .tblinview-st1.length tr{word-break: break-all;}
.table-area .tblinview-st1.length td{border-left: none !important; border-bottom: none !important;}
.table-area .tblinview-st1.length th {border-bottom: none !important; text-align: center;}
.table-area .tblinview-st1.length td {text-align: left;}
.table-area.mt16 .tblinview-st1.length td {text-align: center;}
.table-area .tblinview-st1.length table.ac tr td{text-align: center;}
.table-area .tblinview-st1.length table.al-left tr th,
.table-area .tblinview-st1.length table.al-left tr td{text-align: left;}
.table-area .tbl-asterisk {font-size: 12px; text-align: right;  display: block; line-height: 20px; margin-top: 8px; color: #888;}
.tbl-type {width: 100%;}
.tbl-type th,
.tbl-type td {padding: 10px; font-size: 12px; line-height: 20px; border: var(--line-dd);}
.tbl-type th {background-color: #eee; text-align: left;}
.tbl-type td {text-align: left;}
.tbl-type tr>td:nth-child(3) {text-align: center;}
.table-area1{border-top: 1px solid #eee;}
.tbl-type1{width: 100%; font-size: 14px; line-height: 18px; color: #1e1e23;}
.tbl-type1 th{color: #888; font-size: 14px; font-weight: 400; text-align: left;}
.tbl-type1 th, .tbl-type1 td{ padding: 16px 0 16px; border-bottom: 1px solid #eee;}
.cont-text .cont-info-txt{font-size: 16px; line-height: 24px; color: #767678;}
.cont-text .cont-info-txt + .list-asterisk{margin-top: 24px; padding-left: 14px; font-weight: 400;}
.h-auto .trade-cell+.trade-cell {margin-top: 8px;}
.h-auto .trade-cell+.trade-cell.add-list {margin-top: 0px;}
.h-auto .trade-info { text-align: center; height: calc(100vh - 476px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
.h-auto .trade-info.transfer {height: calc(100vh - 542px);}
.h-auto .trade-info.transfer+.label-round {margin-bottom: 48px;}
.h-auto .trade-info .info-text { font-size: 36px; line-height: 44px; color: #d8d8d8; margin-bottom: 8px;}
.h-auto .trade-info .output { font-size: 36px; line-height: 44px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;}
.h-auto .trade-info .price {font-size: 13px; color: #888; margin-top: 8px;}
.h-auto .trade-list {word-break: keep-all;}
.h-auto .trade-list .pop-info-txt { font-size: 20px; font-weight: 700; text-align: left; display: block; position: relative; padding-bottom: 24px;}
.h-auto .trade-list .pop-info-txt.left {font-size: 18px;}
.h-auto .trade-list .pop-info-txt2 {font-size: 16px;}
.h-auto .trade-list a.pop-info-txt {padding-right: 30px;}
.h-auto .trade-list a.pop-info-txt::after { content: ''; width: 24px; height: 24px; display: inline-block; background: #222; -webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 8px auto; position: absolute; right: 0; top: 2px;}
.h-auto .trade-list a.pop-info-txt.icon-del::after {content: none;}
.h-auto .trade-list .list-bar .list-won li {position: relative; padding-left: 8px; margin-top: 0px;}
.h-auto .trade-list .list-bar .list-won li::before { content: ''; width: 2px; height: 2px; background-color: #666; position: absolute; left: 0; top: 50%; transform: translateY(-2px);}
.h-auto .trade-cell.add-list {display: none; border-top: none; padding: 0;}
.h-auto .trade-cell.add-list + .wrap-btn{ margin-top: 0;}
.h-auto .trade-cell.add-list + .wrap-btn .more-view{ margin-top: 16px;}
.h-auto .trade-cell:last-child {padding-bottom: 0;}
.h-auto .trade-cell dl { display: flex; align-items: center; justify-content: space-between; padding: 8px 0;}
.h-auto .trade-cell dt {color: #666; }
.h-auto .trade-cell dd {color: #222; font-size: 15px; line-height: 22px; font-weight: 700; text-align: right;}
.h-auto .trade-cell .d-day {color: #aaa; margin-right: 6px; font-weight: 400;}
.h-auto .trade-cell .d-day.days {color: #f24538; font-weight: 700;}
.h-auto .pop-text-cont + .trade-cell {margin-top: 32px;}
.h-auto .pop-text-cont + .trade-cell p.color-gray{font-size: 13px; line-height: 19px; font-weight: 400;}
.h-auto .list-wrap+.list-wrap {margin-top: 24px;}
.h-auto .slide-content .list-wrap+.list-wrap {margin-top: 20px;}
.h-auto .list-wrap dt {font-weight: 700; font-size: 16px; line-height: 22px; margin-bottom: 12px;}
.h-auto .list-wrap dd {font-size: 16px; line-height: 22px; color: #767678;}
.h-auto .list-wrap dd .list-bar.sm{margin-top: 4px;}
.h-auto .list-wrap dd .list-bar.sm li{font-size: 12px; line-height: 18px; color: #767678; padding-left: 8px;}
.h-auto .pop-content  .list-wrap dd .list-bar.sm li::before{background-color: #767678; top: 8px;}
.h-auto .trade-list.list .list-wrap dd {position: relative; color: #666; font-size: 15px; line-height: 26px;}
.h-auto .trade-list.list .list-wrap dd p.list-asterisk{display: block; line-height: 20px; margin-top: 4px;}
.h-auto .trade-list.list .list-wrap dd table{color: #222;}
.h-auto .pop-info-tit.chk .link-arr::after { content: ''; width: 24px; height: 24px; display: inline-block; background: #222; -webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 8px auto; position: absolute; right: 0; top: 2px;}
/* 약관동의 */
.h-auto .agree-list .chk-top {margin: 14px 16px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.h-auto .agree-list .chk-top label {color: #222; line-height: 24px; font-weight: 700; padding-left: 30px;}
.h-auto .agree-list .chk-top .form-group [type="checkbox"]+label::before{position: absolute; top: 1px; left: 0;}
.h-auto .agree-list .chk-top .form-group [type="checkbox"]:checked+label {color: #222; line-height: 24px;}
.h-auto .agree-list .chk-top [class*="-text"]{padding:0 5px 0px 30px; word-break: keep-all; font-size: 14px; line-height: 20px; color: #767678;}
.h-auto .agree-list .chk-top .form-group {width: calc(100% - 10px);}
.h-auto .agree-content .agree-list .chk-top + .chk-top{margin-top: 24px;}
.h-auto .agree-check {padding: 14px 16px 14px 24px; border-top: var(--line-f5);}
.h-auto .agree-check li {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.h-auto .agree-check li+li {margin-top: 8px;}
.h-auto .agree-check .flex-box {width: 100%; padding: 8px 0 8px 32px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 9px;}
.h-auto .agree-check .form-group [type="checkbox"]+label {font-size: 14px; line-height: 20px; color: #767678; padding-left: 29px; display: block;}
.h-auto .agree-check .form-group [type="checkbox"]+label::before {content: ''; width: 14px; height: 14px; display: inline-block; /* background: url(/inc/naver/img/icon/ic-Check.svg) no-repeat center; background-size: 14px auto; */ -webkit-mask: url(/inc/naver/img/icon/ic-Check.svg) no-repeat center; -webkit-mask-size: 14px auto; background-color: #dcdee0; border: none; margin-right: 8px; margin-left: 4px; background-image: none;position: absolute; left: 4px; top: 3px;}
.h-auto .agree-check .form-group [type="checkbox"]:checked+label::before {background-color: #1e1e23;}
.h-auto .agree-check .form-group [type="checkbox"] {width: 28px; height: 28px;}
.h-auto .agree-box .dl-list dt{font-size: 14px; line-height: 23px; color: #666; height: auto;}
.h-auto .bd-detail-area .agree-box .dl-list dt{height: 63px; line-height: 63px;}
.h-auto .agree-box .dl-list dd{line-height: 23px; padding: 20px 0; word-break: break-all;  overflow:hidden; width: 100%; min-height: 63px;}
.h-auto .agree-box {background-color: #fff;}
.h-auto .agree-box+.agree-box {margin-top: 8px; margin-bottom: 40px;}
.h-auto .agree-box .chk-text .sm-text + .sm-text{margin-top: 8px; line-height: 20px;}
.h-auto .agree-box .form-group.form-link {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; position: relative;}
.h-auto .agree-box .form-group.form-link label {width: calc(100% + 24px); line-height: 24px; z-index: 1; padding-right: 20px;}
.h-auto .agree-box .form-group.form-link::after {content: ''; width: 16px; height: 16px; display: inline-block; background: #777; -webkit-mask: url(/inc/img/newimg/ico-arrow-rightB.svg) no-repeat center; -webkit-mask-size: 7.3px auto; position: absolute; right: 0;top: 4px;  z-index: 0;}
.h-auto .agree-box .agree-check .form-group.form-link::after {content: ''; width: 12px; height: 12px; display: inline-block; background: #777; -webkit-mask: url(/inc/img/newimg/ico-arrow-rightB.svg) no-repeat center; -webkit-mask-size: 5.5px auto; position: absolute; right: 0;top: 4px;  z-index: 0;}
.h-auto .agree-check .form-group.form-link label { line-height: 20px;}
.h-auto .agree-box .sm-text-area{padding:16px 8px;}
.h-auto .agree-box .sm-text-area .md-text{color: #222; margin-bottom: 12px;}
.h-auto .chk-sub .agree-check .btn-text-link {margin: 0; width: calc(100% - 16px);}
.h-auto .chk-sub .btn-text-link {font-size: 15px; color: #888; display: block; position: relative; text-align: left; width: 100%;}
.h-auto .chk-sub .agree-link { padding: 16px;}
.h-auto .chk-sub .btn-link::after {-webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 6px auto;}
.h-auto .chk-sub .btn-text-link::after {content: ''; width: 24px; height: 24px; display: inline-block; background: #aaa; -webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 6px auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.h-auto .chk-sub .list {font-size: 15px; color: #888; line-height: 24px; padding: 0 16px 16px;}
.h-auto  .agree-content.list .agree-box+.agree-box {margin-top: 32px;}
.h-auto  .agree-content .agree-check {padding: 0 12px 0px 12px; border-top: none; margin-top: 16px;}
.h-auto  .agree-content .agree-box+.agree-box .agree-list .chk-top{padding-top: 32px; margin-top: 32px; border-top: 1px solid #f4f4f4;}
.h-auto  .agree-content .agree-list .chk-top {margin: 0 12px;}
.h-auto  .agree-content .chk-title{margin: 0 0 32px; padding: 0;}
.h-auto  .agree-content .chk-title .form-group [type="checkbox"]+label {position: relative; cursor: pointer; padding: 23px 50px 23px 20px; display: flex; align-items: center; justify-content: flex-start; font-size: 16px; color: var(--color-1e); font-weight: 700; line-height: 22px; border: var(--line-dc); border-radius: 8px; box-shadow: 4px 4px 4px 0px #0000000a; width: 100%;}
.h-auto  .agree-content .chk-title .form-group [type="checkbox"]+label::before {background: url(/inc/naver/img/icon/ic-Check.svg) no-repeat center;     background-size: 14px auto; }
.h-auto  .agree-content .chk-title  .form-group [type="checkbox"]:checked+label{color: var(--color-09); box-shadow: 0 0 0 1px var(--color-09) inset; border: var(--line-09);}
.h-auto  .agree-content .chk-title  .form-group [type="checkbox"]:checked+label::before {background: url(/inc/naver/img/icon/ic-Check_on.svg) no-repeat center; background-size: 14px auto;}
.h-auto  .agree-content .center-area{margin-top: 32px;}
.h-auto  .agree-content .center-area .info-text{font-size: 16px; line-height: 23px; color: #222;}
.h-auto  .agree-content .form-content.chk-list{display: flex; flex-wrap: wrap; background: #f7f7f7; border-radius: 12px; padding: 20px 16px; margin: 16px 16px 0;}
.h-auto  .agree-content .form-content.chk-list .form-group{width: 50%;}
.h-auto  .agree-content .form-content.chk-list .form-group{margin-bottom: 20px;}
.h-auto  .agree-content .form-content.chk-list .form-group:last-child{margin-bottom: 0px;}
.h-auto  .agree-box .dl-list .chk-list{margin: 0;}
.h-auto  .agree-box .dl-list{height: auto; border: 1px solid #f4f4f4; display: flex; align-items: normal; flex-direction: column; background-color: #f7f7f7; border-radius: 16px;}
.h-auto  .agree-box .dl-list .des-text{width: 100%; padding: 16px 0px 0; margin-top: 16px; font-size: 13px; line-height: 19px; color: #666; border-top: 1px solid #ececec;}
.h-auto  .agree-box .dl-list .des-text li{padding: 0 0 0 7px; min-height: auto;}
.h-auto  .agree-box .chk-sub + .chk-sub{margin-top: 16px;}
.h-auto  .agree-box .dl-list + .dl-list{margin-top: 8px;}
.h-auto  .service-info + .agree-content{padding-top: 0;}
.h-auto  .chk-list .chk-sub + .chk-sub{margin-top: 16px;}
/* .h-auto  .agree-content .title-wrap{margin-bottom: 16px;}
.h-auto  .agree-content .title-wrap h2 {font-size: 16px; line-height: 23px;} */
.h-auto  .agree-content .agree-box-area + .agree-box-area{margin-top: 40px;}
.h-auto  .agree-content .flex-box.flex{margin-bottom: 16px; display: flex;}
.h-auto  .agree-box .dl-list .masking.agree,
.h-auto  .agree-box .dl-list .ar{display: flex; justify-content: flex-end; align-items: center;}
.h-auto  .agree-box .line-none .dl-list{border: none;}
.h-auto  .agree-content .form-content.chk-list .form-group [type="checkbox"]+label{font-size: 14px;}
.h-auto  .agree-content .info-text-area{margin: 12px 0 0 4px;}
.list-mg{margin-top: 48px;}
/* .chk-list li+li{margin-top: 8px;}
.chk-list li{background-color: #f7f7f7; border-radius: 16px; padding: 22px 24px; min-height: 67px; display: flex; align-items: center;}
.chk-list .form-group{display: flex; align-items: center; position: relative; width: 100%;}
.chk-list .form-group strong{font-size: 15px; line-height: 22px; color: #222;}
.chk-list .form-group strong + .sm-text{line-height: 20px;} */
/* .chk-list .form-group [type="radio"]+label,
.chk-top .form-group [type="checkbox"]+label,
.chk-list .form-group [type="checkbox"]+label {position: relative; cursor: pointer; font-weight: 700; padding: 3px 15px 2px 36px; display: block; font-size: 16px; width: calc(100% + 20px); line-height: 23px; color: #222;}
.chk-top .form-group [type="checkbox"]+label::before,
.chk-list .form-group [type="checkbox"]+label::before{z-index: 1;}
.chk-top .form-group [type="checkbox"]+label::after,
.chk-list .form-group [type="checkbox"]+label::after{content: ''; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #bbb; background-color: #fff; display: block; position: absolute; top: 0; left: 0;}
.chk-top .form-group [type="checkbox"]:checked+label::before,
.chk-list .form-group [type="checkbox"]:checked+label::before{background-color: #222;}
.chk-top .form-group [type="checkbox"]:checked+label::after,
.chk-list .form-group [type="checkbox"]:checked+label::after{background-color: #ffe300; border-color: #ffe300;}
.chk-list .form-group [type="checkbox"]+label::before,
.chk-top .form-group [type="checkbox"]+label::before,
.chk-top .form-group [type="checkbox"]+label::after,
.chk-list .form-group [type="checkbox"]+label::after{transform: translateY(0px);} */
/* .chk-box .form-group [type="checkbox"]+label::before, 
.chk-box .form-group [type="checkbox"]+label::after{top: 50%; transform: translateY(-14px);} */
/* .form-group [type="checkbox"] + label::before {content: ''; width: 28px; height: 28px; display: inline-block; border-radius: 50%; background-color: #bbb; position: absolute; left: 0; top: 0; -webkit-mask: url(/inc/img/newimg/ico-check.svg) no-repeat center; -webkit-mask-size: 17px auto; border: none;} */

/* 약관 */
/* 약관 상세 */
.terms-wrap {padding: 16px; height: initial;}
.terms-tit {display: flex; justify-content: space-between; margin-bottom: 16px;}
.terms-tit2 {font-size: 20px; margin: 16px 0 8px;}
.terms-tit3 {font-size: 15px; font-weight: 700; margin: 16px 0 8px;}
.terms-tit .title-inner {font-size: 17px; word-break: keep-all;}
.terms-tit img {width: 90px; height: 90px;}
.terms-txt {font-size: 15px;}
.tblinview {width: 100%; table-layout: fixed; word-break: keep-all;}
.tblinview th,
.tblinview td {border: var(--line-ee); padding: 8px;}
.terms-strong {font-size: 15px; display: block; margin: 8px 0;}
.img-gap {margin: 8px 0;}
/* 약관 상세 end */
/* 구매약관 동의 */
.all-check {border: 1px solid #333; padding: 10px; display: flex; justify-content: space-between; font-weight: 700;}
.btn-link {display: block; position: relative; width: 24px; height: 24px;}
.btn-link::after {content: ''; width: 24px; height: 24px; display: inline-block; background: #aaa; -webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 8px auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.terms-box {padding: 16px; background-color: #f7f7f7; margin-top: 40px;}
.contents >.terms-box {margin-top: 0px;}
.terms-box h2.terms-title {font-weight: 700; font-size: 14px; line-height: 22px;}
.terms-list {margin-top: 4px;}
.terms-list li {position: relative; color: #666; padding-left: 7px; font-size: 13px;}
.terms-list li::before {content: ''; width: 2px; height: 2px; border-radius: 50%; display: inline-block; background-color: #666; position: absolute; left: 0; top: 7px;}
.terms-list li+li {margin-top: 2px;}
.terms-import {padding: 24px 16px 0; flex: 1; font-size: 16px; line-height: 32px;}
.terms-import iframe {width: 100%; min-width: 100%; max-width: 100%;  border: none; }
.ios .terms-import iframe{max-width: inherit;}
.terms-import iframe.auto-frame {height: calc(100vh + -240px) !important}
[id^="layer-pop-terms"] .tab-content {-webkit-flex: 1; flex: 1;  height: initial;}
/* 이해 여부 확인 */
.question-area{margin: 16px 4px 0; word-break: keep-all;}
.question-area [class^="wrap-btn"] [class^="btn-"]{border-radius: 8px;}
.question-area [class^="wrap-btn"] .btn-col.on{border: 2px solid #09AA5C;;}
.question-area .content {color: #222; font-size: 16px; line-height: 24px;}
.question-area .content + .content{margin-top: 48px;}
.question-area .content dt em{display: block; font-weight: 700; font-size: 14px; color: #767678; margin-bottom: 4px;}
.question-area .content dd{margin-top: 20px;}
.question-area .content [class^="wrap-btn"] .btn-col{height: 48px; color: #929292;}
.question-area .content dt .list-asterisk{margin-top: 8px; color: #929292; font-size: 12px; line-height: 18px;}
.question-area .content dt .list-asterisk::before {content: '※'; font-size: 10px; top: 2px;}
.question-area .content dt .list-asterisk+.list-asterisk{margin-top: 4px;}
.question-area .content dd .text-view{margin-top: 8px; font-size: 14px; line-height: 20px;}
.question-area .content dd .text-view p{display: flex; position: relative; padding-left: 18px;}
.question-area .content dd .text-view .default{color: #09AA5C;}
.question-area .content dd .text-view .yes{color: #aaa;}
.question-area .content dd .text-view .no{color: #ED3738;}
.question-area .content dd .text-view p::before{content: ''; position: absolute; width: 14px; height: 14px; border-radius: 10px; display: inline-block; left: 0; top: 3px; background: #09AA5C; -webkit-mask: url(/inc/naver/img/icon/icon-point.svg) no-repeat center; -webkit-mask-size: 14px auto;}
.question-area .content dd .text-view p.yes::before{background: #aaa; -webkit-mask: url(/inc/naver/img/icon/icon-check.svg) no-repeat center; -webkit-mask-size: 14px auto;}
.question-area .content dd .text-view p.no::before{background:url(/inc/naver/img/icon/icon-warning.svg) no-repeat center; background-size: 14px auto;}
.question-area .text-cont-xs{margin:40px 20px 40px; text-align: center; font-size: 14px; color: #1e1e23; line-height: 20px;}
.btn-wrap-box{display: flex; justify-content: space-between; align-items: center; margin-top: 24px; margin-bottom: 60px;}
.btn-wrap-box button + button{margin-left: 8px;}
.btn-wrap-box button{width: 100%; background-color: #f7f7f7; padding: 20px; border-radius: 8px; text-align: left;  line-height: 18px; font-size: 14px; font-weight: 700;}
.btn-wrap-box button strong{font-weight: 700;}
.btn-wrap-box button p + p{margin-top: 4px;}
.btn-wrap-box button::after{content: ''; width: 24px; height: 24px; display: inline-block; background: #aaa; -webkit-mask: url(/inc/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 6px auto; position: absolute; right: 20px; top: 50%;  transform: translateY(-12px);}
.info-txt .list-asterisk::before{color: #aaa; content: '※'; font-size: 10px; top: 1px;}
.info-txt .list-asterisk.color-red::before{color: #ED3738; content: '※'; font-size: 10px; top: 2px;}

/*25.05.22. KRX NXT */
.calc-area .wrap-btn.select{position:relative;}
.calc-area .wrap-btn.select + .wrap-btn{margin-top: 10px; position: relative;}
/* .calc-area .wrap-btn .on-sort{margin-right: 6px} */
.xs-text{font-size:12px; white-space: nowrap; display: block;}
.calc-area .wrap-btn button{white-space: nowrap;}
.sort-select{position:absolute; bottom: 0px; left: 0; height:15px; width:calc(50% - 3px);display: flex; justify-content: flex-end;}
.on-sort::before{ content:''; position:absolute; bottom: 0px; right: 0; height:15px; width:calc(50% - 3px); display: block; background: #dccee0; -webkit-mask:url(/inc/naver/img/icon/ic-select.svg) no-repeat center; -webkit-mask-size: 6px auto; height:15px; width: 15px; }
.on-sort.on::before{background: #09AA5C;}
.sort-select .sort-box {width: calc(100% + 30px); border:1px solid #09AA5C; border-radius: 6px; padding: 0; background-color: #fff;   z-index: 12; -webkit-box-shadow: 4px 4px 4px #00000008; box-shadow: 4px 4px 4px #00000008; position: absolute; left: calc(50% + 15px); top: 23px; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.sort-select .sort-box ul{display: flex; flex-direction: column;}
.sort-select .sort-box ul li{font-size: 14px; flex-wrap: wrap; 
    display: block; position: relative; width: 100%; text-align: center; padding: 14px 5px;}
    .sort-list ul li.on{background-color: #f7f9fa; }
.sort-list ul li.on button[class^="select"] {font-weight: bold;}
.sort-list ul li + li{border-top: 1px solid #edeff2;}
.sort-list ul li:first-child{border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.sort-list ul li:last-child{
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}
/* 해외주식 */
.inner-tabs{position: sticky; margin-bottom: 16px; top: 0; z-index: 4; background: #fff;}
.inner-tabs ul {height: 100%; display: -webkit-flex; display: flex; border-bottom: var(--line-ee);}
.inner-tabs ul li button {font-size: 14px; text-align: center; line-height: 34px; display: block; margin: auto; color: #767678;}
.inner-tabs ul li.on button {font-weight: 700; color: #1E1E23;}

/* .inner-content {display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; height: 100%; flex: 1;} */
.inner-tabs ul li {width: 50%;}
.inner-tabs ul li.on {position: relative;}
.inner-tabs ul li.on::after {content: ''; width: calc(100% - 0px); height: 2px; background-color: #1E1E23; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);}
.global-input .input-sub{font-size:14px; visibility: hidden; position: absolute; white-space: nowrap;}
.dl-list+.dl-list.add-line{padding-top: 20px; margin-top: 20px; border-top: 1px #edeff2 solid; }
.xs-price{font-size: 12px; color: #929292; line-height: 12px;}
.tooltip-right{position: relative;}
.tooltip-right .tooltip-view.right{bottom:30px; right: 0; max-width: 80%;}
.tooltip-right .xs-text{color: #929292; margin-bottom: 2px;}
.wrap-btn.select.line{border: none; display: -webkit-flex; display: flex; border-bottom: var(--line-ee); position: sticky; margin-bottom: 16px; top: 0; z-index: 4; background: #fff;}
.wrap-btn.select.line button{border: none; width: 50%; font-size: 14px; text-align: center; line-height: 34px; display: block; margin: auto; color: #767678; font-weight: 400;}
.wrap-btn.select.line button.on{font-weight: 700; color: #1E1E23 !important;}
.wrap-btn.select.line button.on::after {content: ''; width: calc(100% - 0px); height: 2px; background-color: #1E1E23; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);}

.input-date-wrap .date-picker{margin-top: 16px;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    background-color: #f3f5f7;
    border-radius: 6px;
    font-weight: 700;
    height: 40px;
    text-align: right;}
.input-date-wrap .date-picker .form-input{width: 100%}
.input-date-wrap .date-picker .form-input .input-type{
    font-size: 14px;
    text-align: right;
    background: url(/inc/naver/img/icon/ic-Calendar-sm.svg) no-repeat right 0px center;
    padding: 0 8px 0 0;
}