@charset "utf-8";

* {word-break: normal !important; font-family: 'notokr' !important;}
.fullPopup {display: none;}

.c333 {color: #333 !important;}
.Pl0 {padding-left: 0px;}
.Pl20 {padding-left: 20px;}
.Pl25 {padding-left: 25px;}
.Pl27 {padding-left: 27px;}
.Pl35 {padding-left: 35px;}

.titDep2 {font-weight: bold !important; font-size: 20px !important; position: relative;}
.titDep2.fwb {font-weight: bold !important;}

/* 상단 Back 버튼 */
.topBackBtnWrap {width: 100%;
}

.topBackBtnWrap .topBackBtn {width: max-content; height: 60px; display: flex; justify-content: flex-start; align-items: center; padding-left: 15px;}
.topBackBtnWrap img {width: auto; height: 20px; margin-right: 15px;}
.topBackBtnWrap span {font-size: 18px;}


/* 채권이란? */
.tblH.bondInfoTable th {width: 28% !important;}
.tblH.bondInfoTable td span {font-size: 11px;}
.tblH.bondInfoTable th,
.tblH.bondInfoTable td {font-size: 12px;}

.tblH.bondInfoTable tr:first-child th:nth-child(1),
.tblH.bondInfoTable tr:first-child td:nth-child(3) {border-top: 1px solid #000;}
.tblH.bondInfoTable tr:last-child td:nth-child(1),
.tblH.bondInfoTable tr:last-child td:nth-child(3) {border-bottom: 1px solid #ccc;}
.tblH.bondInfoTable tr:first-child td:nth-child(2) {border-top: 1px solid #0c5cff;}
.tblH.bondInfoTable tr:last-child td:nth-child(2) {border-bottom: 1px solid #0c5cff;}
.tblH.bondInfoTable td:nth-child(2) {border-left: 1px solid #0c5cff; border-right: 1px solid #0c5cff; box-sizing: border-box; background: #e6eeff;}

/* 채권분류, 채권용어 */
.listDepInfo01 {margin-top: 5px; color: #666; font-size: 14px;}
.listDepInfo02 {margin-top: 5px; color: #666; position: relative; font-size: 14px;}
.listDepInfo03 {margin-top: 5px; color: #666; position: relative; font-size: 14px;}

.listDepInfo02.Pl25::before {content: "예)"; clear: both; position: absolute; left: 0; color: #666;}
.listDepInfo02.Pl35::before {content: "예)"; clear: both; position: absolute; left: 10px; color: #666;}
.listDepInfo03.Pl20::before {content: "▶"; clear: both; position: absolute; left: 0; color: #666;}
.listDepInfo03.Pl27::before {content: "▶"; clear: both; position: absolute; left: 8px; color: #666;}

.tblH.bondClassTable {border-top: 1px solid #000;}
.tblH.bondClassTable th {width: 33% !important;}
.tblH.bondClassTable th span {color: #0c5cff; font-size: 11px;}
.tblH.bondClassTable td {text-align: left !important; padding-left: 10px; box-sizing: border-box; font-size: 12px;}



/* 단기사채 */
.rightArrow {position: absolute; right: 30px; top: 113px; width: 13px;}
.wrapTitle {width: 100%; text-align: center; font-size: 22px; font-weight: bold; color: #000;}

.shortBondListWrap .imgList {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; margin-top: 40px;}
.shortBondListWrap .imgList li {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.shortBondListWrap .imgList div {box-sizing: border-box;}
.shortBondListWrap .imgList div img {width: 50px;}
.shortBondListWrap .imgList span:nth-child(2) {font-size: 12px; margin-top: 10px; margin-bottom: 1px; font-weight: bold; color: #0c5cff;}
.shortBondListWrap .imgList span:nth-child(3) {font-weight: bold; color: #333;}
.shortBondListWrap .imgList span .Qmark {width: 15px; margin-left: 5px; margin-top: 3px; position: relative;}
.shortBondListWrap .QtextImgBox {position: relative; width: 100%; display: none;}
.shortBondListWrap .QtextImgBox .QtextImg {position: absolute; width: 175px; right: 20px;}


.depTitBox {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 15px; height: 25px;}
.depTitBox .depTit {font-size: 18px; font-weight: bold; color: #333;}
.depTitBox .depBtn {color: #fff; background: #00297c; padding: 4px 20px; border-radius: 8px;}

.depTxtBox {background: #f7f7f7; padding:  5px 15px; margin-top: 20px; border-radius: 8px; margin-bottom: 10px;}
.depTxtBox .listDep1 {color: #666; font-size: 12px; padding-left: 8px; margin: 4px 0;}
.depTxtBox .listDep1::before {width: 2px; height: 2px;}

.shortBondListWrap .inputCheckBox {display: flex; width: 70%; align-items: center; height: 100%;}
.shortBondListWrap .inputCheckBox #checkBox {background: url('/MTS/img/bond/uncheck.png') no-repeat; background-size: cover;}
.shortBondListWrap .inputCheckBox #checkBox:checked {background: url('/MTS/img/bond/check.png') no-repeat; background-size: cover; margin-right: 5px;}
.shortBondListWrap .inputCheckBox label {font-size: 16px; font-weight: bold; color: #333; line-height: auto !important;}

.shortBondListWrap .optionBox {width: 80px; height: auto; position: relative; text-align: center; font-size: 12px;}
.shortBondListWrap .optionBox .optionLabel {position: absolute; top: 0; left: 0; width: 100%; z-index: 10; border: 1px solid #ccc; border-radius: 5px; background: #ebebeb; padding: 4px; display: flex; justify-content: center; align-items: center;}
.shortBondListWrap .optionBox .optionLabel img {width: 10px; padding-top: 6px; padding-left: 4px;}
.shortBondListWrap .optionBox .optionList {position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 30px 5px 0; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none;}
.shortBondListWrap .optionBox.show .optionList {display: block;}
.shortBondListWrap .optionBox .optionList li {padding: 4px; margin-bottom: 5px; border-radius: 5px; /* background: #ebebeb; */}
.shortBondListWrap .optionBox .optionList li:hover {background: #ebebeb;}


/* .shortBondListWrap .bondListWrap {width: 100%; margin-top: 10px; display: none;} */
.shortBondListWrap .bondListWrap {width: 100%; margin-top: 10px;}
.shortBondListWrap .bondListWrap.on {display: block;}
.shortBondListWrap .bondListWrap .bondListItem {width: 100%; background: #f7f7f7; border-radius: 10px; padding: 10px 10px; margin-bottom: 12px;}

.stackLine {float: left; width: 50%;}
.stackLine .stack {background: #fff; border-radius: 10px; width: 60px; height: 20px; display: flex; justify-content: center; align-items: center; float: left; font-size: 10px; border: 1px solid #666; margin-right: 5px; color: #666;}
.stackLine .stack.yellow {border-color: #febf00; color: #febf00;}
.stackLine .stack.lowRisk {border-color: #0c5cff; color: #0c5cff;}
.stackLine .stack.middleRisk {border-color: #078e0a; color: #078e0a;}
.stackLine .stack.highRisk {border-color: #e60f33; color: #e60f33;}
.stackLine .stack.color_green {border-color: #00b050; color: #008000;}
.stackLine .stack.color_lightGreen {border-color: #92D000; color: #92D000;}
.stackLine .stack.color_yellow {border-color: #ffcd50; color: #ffcd50;}
.stackLine .stack.color_lightorange {border-color: #f4900a; color: #f4900a;}
.stackLine .stack.color_orange {border-color: #ff6c00; color: #ff6c00;}
.stackLine .stack.color_red {border-color: #FF0000; color: #FF0000 ;}

.otcTxtField {width: calc(100% - 90px) !important; height: 100% !important; padding: 4px 8px !important; font-size: 12px;}
.otcSellTxtField {width: 90% !important; height: 80% !important; padding: 4px !important; font-size: 11px; background: #ebebeb !important; letter-spacing: -0.1em; border-radius: 4px; border-color: #c7c7c7 !important;}
.sellDateField {width: 75% !important; height: 80% !important; padding: 4px !important; font-size: 11px; background: #ebebeb !important; letter-spacing: -0.1em; border-radius: 4px; border-color: #c7c7c7 !important;}
.recruitment {float: right; width: 50%; height: 20px; display: flex; justify-content: flex-end; align-items: center;}
.recruitment span.on {font-size: 10px; color: #0c5cff;}
.recruitment span.off {font-size: 10px; color: #666;}

.recruitment.on span.off {display: none;}
.recruitment.off span.on {display: none;}

.itemNameLine {clear: both;}
.itemNameLine p {font-weight: bold; padding-top: 15px; color: #0a0a0a; font-size: 18px;}
.itemNameTopLine {clear: both;}
.itemNameTopLine p {font-weight: bold; padding-top: 15px; color: #0a0a0a; font-size: 18px;}

.percentLine {margin-top: 10px; margin-bottom: 10px;}
.percentLine p {font-weight: bold; text-align: right; color: red; font-size: 18px;}

.dateLine {width: 100%; display: flex; justify-content: space-around; align-items: center; font-size: 12px; color: #666;}
.dateLine .dateLeft {font-size: 15px;}
.dateLine .dateLeft b {color: #333; font-weight: bold;}
.dateLine.itemThree {justify-content: space-around;}
.dateLine.itemTwo {justify-content: space-between;}
.dateLine span {text-align: center; word-break: keep-all; padding: 0 3px;}
.dateLine span b {color: #333; font-weight: bold; margin-left: 1px;}
.dateLine span.line {display: inline-block; width: 1px; height: 10px; background: #999; margin-top: 1px; padding: 0;}

.footerNotice .listDep1 {margin-top: 5px; font-size: 14px; color: #666;}


/* 단기사채 채권리스트 _ 230504 */
.shortTermBondItemWrap .bondListWrap {margin-top: 30px;}
.shortTermBondItemWrap .bondListWrap .bondListItem {background: none;}
.shortTermBondItemWrap .imgList {padding: 0; margin-top: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 22px;}
.shortTermBondItemWrap .imgList li {width: 50%;display: flex; justify-content: center; align-items: center; flex-direction: column;}
.shortTermBondItemWrap .imgList li img {width: 40px;}
.shortTermBondItemWrap .imgList li span {color: #666;}
.shortTermBondItemWrap .imgList li span:nth-child(2) {margin-top: 15px; font-size: 16px; font-weight: bold;}
.shortTermBondItemWrap .imgList li.percentBox .point {color: #ff0000;}
.shortTermBondItemWrap .imgList li.dateBox .point {color: #000;}
.shortTermBondItemWrap .imgList li .point {font-size: 22px;}


.shortTermBondItemWrap .depTitBox {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px; height: 25px;}
.shortTermBondItemWrap .depTitBox .depTit {font-size: 18px; font-weight: bold; color: #333;}


.shortTermBondItemWrap .switch {position: relative; display: inline-block; width: 70px; height: 30px; margin-top: -3px;}
.shortTermBondItemWrap .switch input {opacity: 0; width: 0; height: 0;}
.shortTermBondItemWrap .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ebebeb; -webkit-transition: .4s; transition: .4s; border: 1px solid #ccc;}
.shortTermBondItemWrap .slider:before {position: absolute; content: ""; height: 100%; width: 52%; left: 0; bottom: 0; background-color: #77797e; -webkit-transition: .4s; transition: .4s;}
.shortTermBondItemWrap input:checked + .slider {background-color: #ebebeb;}
.shortTermBondItemWrap input:focus + .slider {box-shadow: 0 0 1px #ebebeb;}
.shortTermBondItemWrap input:checked + .slider:before {left: 48%;}


.shortTermBondItemWrap .sliderItem {position: absolute; top: 0; height: 100%; font-size: 10px; display: flex; justify-content: center; align-items: center; color: #fff;}
.shortTermBondItemWrap .sliderTxt01 {left: 8px;}
.shortTermBondItemWrap .sliderTxt02 {color: #999; right: 8px;}
.shortTermBondItemWrap input:checked ~ .sliderTxt01 {color: #999;}
.shortTermBondItemWrap input:checked ~ .sliderTxt02 {color: #fff;}

.shortTermBondItemWrap .slider.round {border-radius: 15px;}
.shortTermBondItemWrap .slider.round:before {border-radius: 15px;}


.shortTermBondItemWrap .depContentBox .valueTit {color: #666666; font-size: 14px; margin-top: 15px;}
.shortTermBondItemWrap .depContentBox .valueTit:nth-child(1) {margin-top: 0;}
.shortTermBondItemWrap .depContentBox .valueDefault {color: #0a0a0a; font-weight: bold; font-size: 18px; text-align: center; display: flex; justify-content: flex-start; align-items: center;}
.shortTermBondItemWrap .depContentBox .valueTotal {color: #0c5cff; font-weight: bold; font-size: 18px;}
.shortTermBondItemWrap .depContentBox .valuePlus {color: #ff0000; font-weight: bold; font-size: 18px;}

.shortTermBondItemWrap .depContentBox {width: 100%; background: #f7f7f7; margin-top: 15px; display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 25px 20px; border-radius: 10px;}
.shortTermBondItemWrap .depContentBox input#NumDefault {outline: none; border: none; background: none; width: 65%; height: auto; padding: 5px; text-align: right; color: #0a0a0a; font-weight: bold; font-size: 18px;}
input#NumDefault2{outline: none; border: none; background: none; width: 65%; height: auto; padding: 5px; text-align: right; color: #0a0a0a; font-weight: bold; font-size: 18px;}
.shortTermBondItemWrap .rangeBox {width: 100%;}
.shortTermBondItemWrap .rangeLabelBox {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.shortTermBondItemWrap .rangeLabelBox .valMin,
.shortTermBondItemWrap .rangeLabelBox .valHalf,
.shortTermBondItemWrap .rangeLabelBox .valMax {font-size: 12px;}

.shortTermBondItemWrap .buyBond_quat {width: 85% !important; height:28px !important; padding:6px 8px !important;}
.shortTermBondItemWrap .amountSlider {-webkit-appearance: none; width: 100%; height: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; border-radius: 3px; margin-top: 10px;}
.shortTermBondItemWrap .amountSlider:hover {opacity: 1;}
.shortTermBondItemWrap .amountSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 10px; height: 10px;background: #fff; cursor: pointer; border: 2px solid #0c5cff; border-radius: 50%;}
.shortTermBondItemWrap .amountSlider::-moz-range-thumb { width: 10px; height: 10px;background: #fff; cursor: pointer; border: 2px solid #0c5cff; border-radius: 50%;}


.shortTermBondItemWrap table {margin-top: 20px; color: #333;}
.shortTermBondItemWrap table .tableTit {font-size: 20px; font-weight: bold; padding-bottom: 10px; padding-left: 0;}

.shortTermBondItemWrap table th {width: 50%; height: 25px; text-align: left; font-weight: normal; padding-left: 10px;}
.shortTermBondItemWrap table td {width: 50%; height: 25px; text-align: right; padding-right: 10px;}
.shortTermBondItemWrap table td.redPoint {color: #ff0000;}

.shortTermBondItemWrap table .dashLine {height: 30px;}
.shortTermBondItemWrap table .dashLine span {display: block; border-top: 1px dashed #ccc;}

.shortTermBondItemWrap .btnWrap {width: 100%; margin-top: 20px;}
.shortTermBondItemWrap .btnWrap button {width: calc(50% - 2%); height: 50px; border-radius: 5px; color: #fff; font-size: 18px; font-weight: bold;}
.shortTermBondItemWrap .btnWrap button.back {margin-right: 1%; background: #999;}
.shortTermBondItemWrap .btnWrap button.buy {background: #ff0000;}


/* x버튼, 툴팁 */
.tooltipBox {position: relative; width: 100%; display: none;}
.tooltipBox .tooltipText::after {content: ""; position: absolute; border-style: solid; bottom: 100%; border-width: 4px 4px 8px; border-color: transparent transparent #ebebeb transparent;
}
.tooltipBox .tooltipText.tooltipLeft::after {left: 5px;}
.tooltipBox .tooltipText.tooltipRight::after {right: 5px;}

.tooltipBoxOtc .tooltipText {position: absolute; width: 60vw; top: 7px; background: #e0e0e0; border-radius: 5px; padding: 3px; font-size: 10px;}
.tooltipBoxOtc .tooltipText {max-width: 215px; left: 63px; text-align: left;}
.toolBtnParents .tooltipOtc:hover ~ .tooltipBoxOtc {display: block;}

.shortTermBondWrap .tooltipBox .tooltipText {position: absolute; max-width: 154px; top: 7px; right: 20px; background: #ebebeb; border-radius: 5px; padding: 3px; font-size: 10px; word-break: keep-all;}
.shortTermBondItemWrap .tooltipBox .tooltipText {position: absolute; width: 36vw; top: 7px; background: #ebebeb; border-radius: 5px; padding: 3px; font-size: 10px;}

.shortTermBondItemWrap .tooltipBox01 .tooltipText {max-width: 273px; left: calc(50% + 50px);}
.shortTermBondItemWrap .toolBtnParents .tooltip01:hover ~ .tooltipBox01 {display: block;}

.shortTermBondItemWrap .tooltipBox02 .tooltipText {max-width: 173px; left: 68px;}
.shortTermBondItemWrap .toolBtnParents .tooltip02:hover ~ .tooltipBox02 {display: block;}

.shortTermBondItemWrap .tooltipBox03 .tooltipText {max-width: 173px; left: 75px;}
.shortTermBondItemWrap .toolBtnParents .tooltip03:hover ~ .tooltipBox03 {display: block;}

.shortTermBondItemWrap .tooltipBox04 .tooltipText {max-width: 133px; right: -20px; text-align: left;}
.shortTermBondItemWrap .toolBtnParents .tooltip04:hover ~ .tooltipBox04 {display: block;}


.shortTermBondItemWrap .toolBtnParents {position: relative;}
.shortTermBondItemWrap .toolBtnParents .tooltipChild {position: absolute; width: 14px; height: 14px;}
.shortTermBondItemWrap .toolBtnParents .tooltipChild:after {position: absolute; content: '';}

.shortTermBondItemWrap .toolBtnParents .xBtn {width: 15px; height: 15px; right: -20px; top: 6px; background: url('/MTS/img/bond/x.png'); background-size: 100%;}

.shortTermBondItemWrap .toolBtnParents .tooltip01 {left: 20vw; top: 6px; background: url('/MTS/img/bond/Qmark.png'); background-size: 100%;}
.shortTermBondItemWrap .toolBtnParents .tooltip01:hover:after {width: 45vw; height: 14vw; left: 0; top: 15px; background: url('/MTS/img/bond/tooltipText01.png') no-repeat; background-size: 100%;}

.shortTermBondItemWrap .toolBtnParents .tooltip02 {left: 20vw; top: 6px; background: url('/MTS/img/bond/Qmark.png'); background-size: 100%;}
.shortTermBondItemWrap .toolBtnParents .tooltip02:hover:after {width: 45vw; height: 14vw; left: 0; top: 15px; background: url('/MTS/img/bond/tooltipText03.png') no-repeat; background-size: 100%;}

.shortTermBondItemWrap .toolBtnParents .tooltip03 {left: 88px; top: 6px; background: url('/MTS/img/bond/Qmark.png'); background-size: 100%;}

.shortTermBondItemWrap .toolBtnParents .tooltip04 {right: -8px; top: 4px; background: url('/MTS/img/bond/Qmark.png'); background-size: 100%;}
.shortTermBondItemWrap .toolBtnParents .tooltip04:hover:after {width: 30vw; height: 10vw; right: -0; top: 15px; background: url('/MTS/img/bond/tooltipText02.png') no-repeat; background-size: 100%;}
.shortTermBondItemWrap .depBtn {color: #fff; background: #00297c; padding: 4px 20px; border-radius: 8px;}

/* 하단 버튼 */
.btnWrap {width: 100%; margin-top: 20px;}
.btnWrap button {width: calc(50% - 2%); height: 45px; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; background: #999;}
.btnWrap button.back {margin-right: 1%;}
.btnWrap button.buy {background: #ff0000;}
.btnWrap button.calc{width: 100%;}


/* 230703 단기사채 구분 탭 ( 다올발행 / 타사발행 )*/
.bondTypeTab {width: 100%; height: 33px; line-height: 33px; margin-top: 40px; font-size: 0;}
.bondTypeTab li {display: inline-block; width: 50%; height: 100%;}
.bondTypeTab li a {display: inline-block; width: 100%; height: 100%; text-align: center; color: #999; border-bottom: 2px solid #ebebeb; font-size: 13px; font-weight: bold;}
.bondTypeTab li.on a {color: #0c5cff; border-bottom: 2px solid #0c5cff;}



/*장외채권*/
/* 230703 테이블 스타일 */
.otcBondsCalcWrap table {width: 100%;}
.otcBondsCalcWrap table th {background: #f7f7f7; border-bottom: 1px solid #fff;}
.otcBondsCalcWrap table th.thTit {font-weight: bold; border-top: 1px solid #d1d1d1;}
.otcBondsCalcWrap table td {background: #fff; border-bottom: 1px solid #f7f7f7; text-align: right; padding-right: 15px;}
.otcBondsCalcWrap table.grid th {border-bottom: 1px solid #ececec;}
.otcBondsCalcWrap table.grid td {border-bottom: 1px solid #ececec; text-align: right; border-right: 1px solid #ececec; padding: 0;}
.otcBondsCalcWrap table.grid td.total {background: #f7f7f7; text-align: center;}
.otcBondsCalcWrap table td:last-child {border-right: none;}
.otcBondsCalcWrap table th,
.otcBondsCalcWrap table td {height: 30px; line-height: 30px; font-weight: normal; font-size: 13px;}
.otcBondsCalcWrap table tr:first-child th,
.otcBondsCalcWrap table tr:first-child td {border-top: 1px solid #d1d1d1;}
.otcBondsCalcWrap table tr:last-child th,
.otcBondsCalcWrap table tr:last-child td {border-bottom: 1px solid #d1d1d1;}


.otcBondsListWrap .imgList {width: 100%; display: flex; justify-content: space-around; align-items: flex-end;}
.otcBondsListWrap .imgList li {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.otcBondsListWrap .imgList li .point {font-size: 20px;}
.otcBondsListWrap .imgList li.percentBox .point {color: #f00;}
.otcBondsListWrap .imgList li.dateBox .point {color: #000;}
.otcBondsListWrap .imgList div {box-sizing: border-box;}
.otcBondsListWrap .imgList span {color: #666;}
.otcBondsListWrap .imgList span:nth-child(2) {margin-top: 15px; font-size: 14px;}
.otcBondsListWrap .imgList span:nth-child(3) {font-weight: bold; color: #333;}
.otcBondsListWrap .imgList span .Qmark {width: 15px; margin-left: 5px; margin-top: 3px; position: relative;}

/* 230725 - 장외채권 추가 퍼블 */
.otcBondsWrap {background: #fff !important; display: flex; flex-direction: column;}
.otcBondsWrap .imgList {padding: 0; margin-top: 30px; width:100%; display: flex; justify-content: space-around; align-items: flex-end; }
.otcBondsWrap .imgList li {width: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.otcBondsWrap .imgList li .point {font-size: 20px;}
.otcBondsWrap .imgList li.percentBox .point {color: #f00;}
.otcBondsWrap .imgList li.dateBox .point {color: #000;}
.otcBondsWrap .imgList div {box-sizing: border-box;}
.otcBondsWrap .imgList span {color: #666;}
.otcBondsWrap .imgList li img {width: 40px;}
.otcBondsWrap .imgList li span:nth-child(2) {font-weight: normal; margin-top: 15px; font-size: 14px;}
.otcBondsWrap .imgList li span:nth-child(3) {font-weight: bold; color: #333;}

.otcBondsWrap .bondListWrap {margin-top: 30px;}
.otcBondsWrap .bondListWrap .bondListItem {background: none;}

.otcBondsWrap .depTitBox {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px; height: 28px;}
.otcBondsWrap .depTitBox .depTit {font-size: 18px; font-weight: bold; color: #333;}
.otcBondsWrap .depTitBox .depBtn {color: #fff; background: #00297c; padding: 4px 20px; border-radius: 8px;}

.otcBondsWrap .depTxtBox {background: #f7f7f7; padding:  5px 15px; margin-top: px; border-radius: 8px; margin-bottom: 10px;}
.otcBondsWrap .depTxtBox .listDep1 {color: #666; font-size: 12px; padding-left: 8px; margin: 4px 0;}
.otcBondsWrap .depTxtBox .listDep1::before {width: 2px; height: 2px;}

.otcBondsWrap .depTitBox .switch {position: relative; display: inline-block; width: 120px; height: 100%;}
.otcBondsWrap .depTitBox .switch2 {position: relative; display: inline-block; width: 120px; height: 100%;}
.otcBondsWrap .depTitBox .switch input {opacity: 0; width: 0; height: 0;}
.otcBondsWrap .depTitBox .switch2 input {opacity: 0; width: 0; height: 0;}
.otcBondsWrap .depTitBox .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ebebeb; -webkit-transition: .4s; transition: .4s; border: 1px solid #ccc;}
.otcBondsWrap .depTitBox .slider:before {position: absolute; content: ""; height: 100%; width: 52%; left: 0; bottom: 0; background-color: #77797e; -webkit-transition: .4s; transition: .4s;}
.otcBondsWrap .depTitBox input:checked + .slider {background-color: #ebebeb;}
.otcBondsWrap .depTitBox input:focus + .slider {box-shadow: 0 0 1px #ebebeb;}
.otcBondsWrap .depTitBox input:checked + .slider:before {left: 48%;}

.otcBondsWrap .depTitBox .sliderItem {position: absolute; top: 0; width: 50%; height: 100%; font-size: 11px; display: flex; justify-content: center; align-items: center; color: #fff;}
.otcBondsWrap .depTitBox .sliderTxt01 {left: 0;}
.otcBondsWrap .depTitBox .sliderTxt02 {color: #999; right: 0;}
.otcBondsWrap .depTitBox input:checked ~ .sliderTxt01 {color: #999;}
.otcBondsWrap .depTitBox input:checked ~ .sliderTxt02 {color: #fff;}

.otcBondsWrap .depTitBox .slider.round {border-radius: 15px;}
.otcBondsWrap .depTitBox .slider.round:before {border-radius: 15px;}

.otcBondsWrap .otcTable {width: 100%; margin-top: 10px; display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 0 0; border-radius: 10px;}

.otcBondsWrap .otcTable table {color: #000; border-spacing: 0 2px;}

.otcBondsWrap .otcTable table tr {height: 25px; margin: 5px 0 !important;}
.otcBondsWrap .otcTable table th {width: 50%; height: 25px; text-align: left; font-weight: normal;}
.otcBondsWrap .otcTable table td {width:50%; height: 25px; text-align: right !important;}
.otcBondsWrap .otcTable table td.redPoint {color: #ff0000;}

.otcBondsWrap .otcTable input {width: 40vw !important; height: 28px !important; padding: 6px 8px !important; margin-bottom: 5px; font-size: 13px; background: #fff !important; letter-spacing: -0.01em; border-radius: 2px; border-color: #c7c7c7 !important; text-align: right !important; color: #000;}
.otcBondsWrap .otcTable .infoTxt {color: #666; font-size: 12px; letter-spacing: -0.05em;}


/* 230802 - 추가 */
.otcBondsWrap .otcTable input[type="date"] {
	width: 40vw !important;
	background: transparent;
	-webkit-appearance: none;
	/* padding: 6px 25px 6px 8px !important; */
}
.otcBondsWrap .otcTable input.android[type="date"] {
	margin-bottom: 0 !important;
}
.otcBondsWrap .otcTable input[type="date"]::-webkit-date-and-time-value {
	text-align: right !important;
	position: absolute;
    right: 62px;
}
.otcBondsWrap .otcTable input.android[type="date"]::-webkit-date-and-time-value {
    position: absolute;
    right: 40px;
    text-align: right !important;
}

.otcBondsWrap .otcTable input[type="date"]::-webkit-inner-spin-button,
.otcBondsWrap .otcTable input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
    position: relative; z-index: 20;
    /* display: none;
    -webkit-appearance: none; */
}

.otcBondsWrap .otcTable input[type="date"]::after {
	content: ''; position: absolute; display: block; width: 24px; height: 24px; right:  40px; z-index: 10; background: url('/MTS/img/bond/calendar.png') no-repeat 50% 50%; background-size: 60%;
}

/* .otcBondsWrap .otcTable input[type="date"] {text-align: right;}
.otcBondsWrap .otcTable input[type="date"]::-webkit-calendar-picker-indicator,
.otcBondsWrap .otcTable input[type="date"]::-webkit-inner-spin-button {
    display: none;
    appearance: none;
}

.otcBondsWrap .otcTable input[type="date"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0); 숨긴다
  opacity: 1;
  display: block;
  background: url('/MTS/img/bond/calendar.png') no-repeat 98% 50%; 대체할 아이콘
  background-size: 15px;
  width: 18px;
  height: 25px;
  border-width: thin;
}
 */
.otcBondsListWrap .imgList {padding: 0 22px; margin-top: 40px;}
.otcBondsListWrap .imgList li {width: 50%;}
.otcBondsListWrap .imgList div img {width: 50px;}
.otcBondsListWrap .imgList span:nth-child(2) {font-weight: bold; color: #0c5cff;}
.otcBondsListWrap .depTitBox {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px; height: 28px;}
.otcBondsListWrap .depTitBox .depTit {font-size: 18px; font-weight: bold; color: #333;}
.otcBondsListWrap .depTitBox .depBtn {color: #fff; background: #00297c; padding: 4px 20px; border-radius: 8px;}

.otcBondsListWrap .depTxtBox {background: #f7f7f7; padding:  5px 15px; margin-top: 20px; border-radius: 8px; margin-bottom: 10px;}
.otcBondsListWrap .depTxtBox .listDep1 {color: #666; font-size: 12px; padding-left: 8px; margin: 4px 0;}
.otcBondsListWrap .depTxtBox .listDep1::before {width: 2px; height: 2px;}

.otcBondsListWrap .inputCheckBox {display: flex; align-items: center; height: 100%;}
.otcBondsListWrap .inputCheckBox #checkBox {width: 15px; height: 15px; background: url('/MTS/img/bond/check.png') no-repeat; background-size: cover; margin-right: 5px;}
.otcBondsListWrap .inputCheckBox #checkBox:checked {background: url('/MTS/img/bond/uncheck.png') no-repeat; background-size: cover;}
.otcBondsListWrap .inputCheckBox label {font-size: 14px; font-weight: bold; color: #333; line-height: auto !important;}

.otcBondsListWrap .bondListWrap {width: 100%; margin-top: 10px;}
.otcBondsListWrap .bondListWrap .bondListItem {width: 100%; background: #f7f7f7; border-radius: 10px; padding: 10px 10px; margin-bottom: 12px;}
.otcBondsListWrap .optionBoxWrap {height: 100%;}
.otcBondsListWrap .optionBox {display: inline-block; width: 62px; height: 100%; position: relative; text-align: center; font-size: 10px;}
.otcBondsListWrap .optionBox .optionLabel {position: absolute; top: 0; left: 0; width: 100%; z-index: 10; border: 1px solid #ccc; border-radius: 5px; background: #ebebeb; padding: 4px; display: flex; justify-content: center; align-items: center;}
.otcBondsListWrap .optionBox .optionLabel img {width: 8px; padding-top: 6px; padding-left: 2px;}
.otcBondsListWrap .optionBox .optionList {position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 30px 5px 0; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none;}
.otcBondsListWrap .optionBox.show .optionList {display: block;}
.otcBondsListWrap .optionBox .optionList li {padding: 4px; margin-bottom: 5px; border-radius: 5px; /* background: #ebebeb; */}
.otcBondsListWrap .optionBox .optionList li:hover {background: #ddd;}

/*모의투자-매수 옵션박스*/
.otcBondsWrap .opBuyBox {width: 80px; height: auto; position: relative; text-align: center; font-size: 12px;}
.otcBondsWrap .opBuyBox .opBuyLabel {position: absolute; top: 0; left: 0; width: 100%; z-index: 10; border: 1px solid #ccc; border-radius: 5px; background: #ebebeb; padding: 4px; display: flex; justify-content: center; align-items: center;}
.otcBondsWrap .opBuyBox .opBuyLabel img {width: 10px; padding-top: 6px; padding-left: 4px;}
.otcBondsWrap .opBuyBox .opBuyList {position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 30px 5px 0; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none;}
.otcBondsWrap .opBuyBox.show .opBuyList {display: block;}
.otcBondsWrap .opBuyBox .opBuyList li {padding: 4px; margin-bottom: 5px; border-radius: 5px; /* background: #ebebeb; */}
.otcBondsWrap .opBuyBox .opBuyList li:hover {background: #ebebeb;}
/*모의투자-매도 옵션박스*/
.otcBondsWrap .opSellBox {width: 80px; height: auto; position: relative; text-align: center; font-size: 12px;}
.otcBondsWrap .opSellBox .opSellLabel {position: absolute; top: 0; left: 0; width: 100%; z-index: 10; border: 1px solid #ccc; border-radius: 5px; background: #ebebeb; padding: 4px; display: flex; justify-content: center; align-items: center;}
.otcBondsWrap .opSellBox .opSellLabel img {width: 10px; padding-top: 6px; padding-left: 4px;}
.otcBondsWrap .opSellBox .opSellList {position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 30px 5px 0; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none;}
.otcBondsWrap .opSellBox.show .opSellList {display: block;}
.otcBondsWrap .opSellBox .opSellList li {padding: 4px; margin-bottom: 5px; border-radius: 5px; /* background: #ebebeb; */}
.otcBondsWrap .opSellBox .opSellList li:hover {background: #ebebeb;}

.otcBondsWrap .tableOptionBox {width: 82px; height: 100%; position: relative; text-align: center; font-size: 13px;}
.otcBondsWrap .tableOptionBox .tableOptionLabel {position: absolute; top: 0; left: 0; width: 100%; z-index: 10; border: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 4px; display: flex; justify-content: center; align-items: center;}
.otcBondsWrap .tableOptionBox .tableOptionLabel img {width: 8px; padding-top: 6px; padding-left: 2px;}
.otcBondsWrap .tableOptionBox .tableOptionList {position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 30px 5px 0; background: #fff; border: 1px solid #ccc; border-radius: 4px; display: none;}
.otcBondsWrap .tableOptionBox	.show .tableOptionList {display: block;}
.otcBondsWrap .tableOptionBox .tableOptionList li {padding: 4px; margin-bottom: 5px; border-radius: 5px; /* background: #ebebeb; */}
.otcBondsWrap .tableOptionBox .tableOptionList li:hover {background: #ddd;}

.footerNotice .footerTit {font-size: 14px; font-weight: 600; margin: 30px 0 8px; color: #333;}
.footerNotice .listDep1 {margin-top: 5px; font-size: 12px; color: #666;}
.footerNotice .listDep2 {margin-top: 5px; font-size: 12px; color: #666; list-style: none; padding-left: 12px;}
.footerNotice .listDep2:before {content: ''; width: 0; height: 0;}


/* 테이블 내 옵션 박스 */
.tableOptionBox.otcTable {width: 86px;}
.tableOptionBox.otcTable .tableOptionLabel {justify-content: flex-start; padding: 0; padding-left: 2px; margin-top: 2px;}
.tableOptionBox.otcTable .tableOptionLabel img {padding: 6px 4px 0;}
.tableOptionBox.otcTable .tableOptionList {top: 2px; text-align: left; padding: 0; padding-top: 20px; padding-bottom: 2px;}
.tableOptionBox.otcTable .tableOptionList li {padding: 0; padding-left: 2px; margin-bottom: 0;}
.tableOptionBox.otcTable .tableOptionList li:hover {background: none;}
/* .tableOptionBox.otcTable .tableOptionList li a {color: #000;} */

.otcBondsWrap table {margin-top: 20px; color: #333;}
.otcBondsWrap table .tableTit {font-size: 20px; font-weight: bold; padding-bottom: 10px; padding-left: 0;}

.otcBondsWrap table th {width: auto; height: 25px; text-align: left; font-weight: normal; padding-left: 10px;}
.otcBondsWrap table td {width: auto; height: 25px; text-align: right; padding-right: 10px;}
/* .otcBondsWrap table td.redPoint {color: #ff0000;}  */

.otcBondsWrap table .dashLine {height: 30px;}
.otcBondsWrap table .dashLine span {display: block; border-top: 1px dashed #ccc;}

.tableOptionBox .opBuyList li,
.tableOptionBox .opSellList li {color: #000 !important;}
.tableOptionBox .opBuyList li.off,
.tableOptionBox .opSellList li.off {color: #999 !important;}
.tableOptionBox .opBuyList li.on,
.tableOptionBox .opSellList li.on {color: #000 !important;}

.tableOptionBox.opBuyBox {z-index: 10;}
.tableOptionBox.opSellBox {z-index: 5;}
/* 하단 버튼 */
.otcBondsWrap .btnWrap {width: 100%; margin-top: 20px; display: flex; justify-content: space-between; padding: 0px 0px 25px;}
.otcBondsWrap .btnWrap button {width: calc(50% - 2%); height: 45px; border-radius: 5px; color: #fff; font-size: 18px; font-weight: bold; background: #999;}
.otcBondsWrap .btnWrap button.back {margin-right: 2%;}
.otcBondsWrap .btnWrap button.buy {background: #ff0000;}
.otcBondsWrap .btnWrap button.calc{width: 100%; background: #0553a8;}

/* x버튼, 툴팁 */
.toolBtnParents {position: relative;}
.toolBtnParents .tooltipChild {position: absolute; width: 14px; height: 14px;}
.toolBtnParents .tooltipChild:after {position: absolute; content: '';}

.toolBtnParents .tooltipOtc {left: 64px; top: 9px;  background: url('/MTS/img/bond/Qmark.png'); background-size: 100%;}
.tooltipBox {position: relative; width: 100%; display: none;}
.tooltipBox .tooltipText::after {content: ""; position: absolute; border-style: solid; bottom: 100%; border-width: 4px 4px 8px; border-color: transparent transparent #ebebeb transparent;
}
.tooltipBox .tooltipText.tooltipLeft::after {left: 5px;}
.tooltipBox .tooltipText.tooltipRight::after {right: 5px;}

.tooltipBoxOtc .tooltipText {position: absolute; width: 60vw; top: 7px; z-index: 100;  background: #e0e0e0; border-radius: 5px; padding: 3px; font-size: 10px;}

.tooltipBoxOtc .tooltipText {max-width: 215px; left: 63px; text-align: left;}
.toolBtnParents .tooltipOtc:hover ~ .tooltipBoxOtc {display: block;}

/* 로딩 */
.loading{display:none;overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;font-size:0;text-indent:100%;background:rgba(0, 0, 0, 0.1)}
.loading[aria-hidden=false]{display:block}
.loadingParagraph{position:absolute;top:50%;left:50%;outline:0;transform:scale(.5);width:27.77vw;height:27.77vw;margin-top:-13.885vw;margin-left:-13.885vw;}
.loadingParagraph > div{width: 1.27vw;height: 4.33vw;background:#154fbe;opacity:0.2;position: absolute;top: 9.72vw;left: 12.5vw;animation: loading-fade 1s infinite linear;}
.loadingParagraph .bar1 {transform: rotate(0deg) translate(0,-11.11vw);animation-delay: 0s;}
.loadingParagraph .bar2 {transform: rotate(15deg) translate(0,-11.11vw);animation-delay: 0.041s;}
.loadingParagraph .bar3 {transform: rotate(30deg) translate(0,-11.11vw);animation-delay: 0.082s;}
.loadingParagraph .bar4 {transform: rotate(45deg) translate(0,-11.11vw);animation-delay: 0.123s;}
.loadingParagraph .bar5 {transform: rotate(60deg) translate(0,-11.11vw);animation-delay: 0.164s;}
.loadingParagraph .bar6 {transform: rotate(75deg) translate(0,-11.11vw);animation-delay: 0.205s;}
.loadingParagraph .bar7 {transform: rotate(90deg) translate(0,-11.11vw);animation-delay: 0.246s;}
.loadingParagraph .bar8 {transform: rotate(105deg) translate(0,-11.11vw);animation-delay: 0.287s;}
.loadingParagraph .bar9 {transform: rotate(120deg) translate(0,-11.11vw);animation-delay: 0.32s;}
.loadingParagraph .bar10 {transform: rotate(135deg) translate(0,-11.11vw);animation-delay: 0.369s;}
.loadingParagraph .bar11 {transform: rotate(150deg) translate(0,-11.11vw);animation-delay: 0.41s;}
.loadingParagraph .bar12 {transform: rotate(165deg) translate(0,-11.11vw);animation-delay: 0.451s;}
.loadingParagraph .bar13 {transform: rotate(180deg) translate(0,-11.11vw);animation-delay: 0.492s;}
.loadingParagraph .bar14 {transform: rotate(195deg) translate(0,-11.11vw);animation-delay:0.533s}
.loadingParagraph .bar15 {transform: rotate(210deg) translate(0,-11.11vw);animation-delay:0.574s}
.loadingParagraph .bar16 {transform: rotate(225deg) translate(0,-11.11vw);animation-delay:0.615s}
.loadingParagraph .bar17 {transform: rotate(240deg) translate(0,-11.11vw);animation-delay:0.656s}
.loadingParagraph .bar18 {transform: rotate(255deg) translate(0,-11.11vw);animation-delay:0.697s}
.loadingParagraph .bar19 {transform: rotate(270deg) translate(0,-11.11vw);animation-delay:0.738s}
.loadingParagraph .bar20 {transform: rotate(285deg) translate(0,-11.11vw);animation-delay:0.779s}
.loadingParagraph .bar21 {transform: rotate(300deg) translate(0,-11.11vw);animation-delay:0.82s}
.loadingParagraph .bar22 {transform: rotate(315deg) translate(0,-11.11vw);animation-delay:0.861s}
.loadingParagraph .bar23 {transform: rotate(330deg) translate(0,-11.11vw);animation-delay:0.902s}
.loadingParagraph .bar24 {transform: rotate(345deg) translate(0,-11.11vw);animation-delay:1s}

@keyframes loading-fade {
    0% {
        background-color: #154fbe;
        opacity:1;
    }
    100% {
        background-color: transparent;
        opacity:1;
    }
}