@charset "utf-8";

/* main {
  background: url(../images/615/bg.png) no-repeat top left / contain;
} */

.menuContainer .title .title_selectedBox li button{padding-left: 30px;}

input[type="text"],
textarea {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    background-color: transparent;
}

/* 전체 컨텐츠 박스 */
.splitContent,
.content,
.contents {
    width: 100%;
    height: 630px;
    /* background-color: #fff; */
    overflow: hidden;
}

.content {
    position: relative;
}

.alert .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px;
    width: 440px;
}

.alert.on {
    display: block;
}

/* 불러오기 버튼 */
.importBtn {
    width: 75px;
    height: 70px;
    background-color: #5c8ff3;
    font-size: 12px;
    color: #fff;
    line-height: 75px;
    border-radius: 15px;
    text-align: center;
    position: absolute;
    top: 18px;
    left: 10px;
    box-shadow: 0 5px 15px rgba(29, 66, 144, 0.3);
}

/* .splitScreen .importBtn {top: 68px;} */

.importBtn::before {
    content: '';
    background: url(../images/415/ic_import.png) no-repeat center/contain;
    width: 58px;
    height: 51px;
    position: absolute;
    top: 0;
    left: 10px;
}

.importBtn::after {
    content: '불러오기';
    color: #fff;
    position: absolute;
    width: 100%;
    top: 49px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 10px;
}

.PC .importBtn.hover {
    background-color: #4b6db0;
}

/* 화면 나누기 버튼 */
.splitBtn {
    width: 64px;
    height: 52px;
    background-image: url(../images/415/btn_split_d.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 210px;
    right: 10px;
    z-index: 1;
}

.PC .splitBtn.hover {
    background-image: url(../images/415/btn_split_h.png);
}

/* 화면 합치기 버튼 */
.splitBtn.on {
    background-image: url(../images/415/btn_split_ond.png);
}

.PC .splitBtn.on.hover {
    background-image: url(../images/415/btn_split_onh.png);
}

/* 그래프 화면일때 화면 버튼 위치 변경 */
.splitBtn.move {
    bottom: 124px;
}

.graphContent {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    /* background-color: #fff; */
    display: none;
}

.graphContent.on {
    display: block;
}

/* 테이블 컨테이너 */
.tableContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tableContainer.on .graphChoiceBox {
    visibility: visible;
}

.tableContainer.on .deleteBtnBox {
    display: none;
}

.tableContainer.on input[type="text"],
.tableContainer.on textarea {
    pointer-events: none;
}

.tableContainer.on .cellMaxInput input[type="text"] {
    pointer-events: auto;
}

/* 막대그래프 표 타이틀 */
.graphTitle {
    display: inline-block;
    position: relative;
    width: 452px;
    height: 55px;
    font-size: 0;
    border: 2px solid #145ea4;
    border-radius: 10px;
    margin-top: 25px;
    margin-bottom: 30px;
}

.graphTitle input[type="text"] {
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 25px;
    background-color: #fff;
    color: #083185;
    border-radius: 10px;
    font-family: "GmarketM";
}

.graphTable .cellBox .cell span {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 막대그래프 표 */
.graphTable {
    font-size: 0;
    display: flex;
    height: 165px;
    position: relative;
    margin-right: 0px;
    border: 2px solid #11a38b;
    border-radius: 12px 12px 5px 12px;
    /* overflow: hidden; */
}

.graphTable .cellBox {
    width: 80px;
    height: 100%;
}
.graphTable .cellBox:nth-child(n+2) {
    border-left: 2px solid #11a38b;
}

.graphTable .cellBox.Side {
    width: 100px;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

.graphTable .cellBox .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
}
.graphTable .cellBox .cell:first-child {
    border-bottom: 2px solid #11a38b;
}

.graphTable .cellBox .cell textarea,
.graphTable .cellBox .cell input[type="text"],
.graphTable .cellBox .cell span {
    font-size: 15px;
    text-align: center;
    width: 100%;
    height: 100%;
    font-family: "TmoneyEB";
}

.graphTable .cellBox .cell textarea,
.graphTable .cellBox .cell input[type="text"] {
    width: 95%;
}

.graphTable .cellBox .cell textarea {
    resize: none;
    overflow: hidden;
    height: auto;
    max-height: 40px;
    min-height: 20px;
    overflow-y: auto;
    word-break: keep-all;
    cursor: auto;
}
.graphTable .cellBox .cell textarea::-webkit-scrollbar {
    width: 5px;
}
.graphTable .cellBox .cell textarea::-webkit-scrollbar-thumb {
    height: 10%;
    background: #acb2db;
    border-radius: 10px;
}
.graphTable .cellBox .cell textarea::-webkit-scrollbar-track {
    background: #e7e9f6;
    border-radius: 10px;
}

/* 표 첫번째 cellBox 스타일 */
/* .graphTable .cellBox:nth-of-type(1) .cell {
    border-left: 2px solid #11a38b;
} */

/* .graphTable .cellBox:nth-of-type(1) .cell.Title {
    border-radius: 10px 0 0 0;
} */

.graphTable .cellBox:nth-of-type(1) .cell.Data {
    border-radius: 0 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.graphTable .cellBox:nth-of-type(1) .cell.Data>input {
    height: auto;
}

.graphTable .cellBox:nth-of-type(1) .cell.Data .unitBox {
    display: flex;
    align-items: center;
    height: auto;
    justify-content: center;
    height: 0;
    visibility: hidden;
}

.graphTable .cellBox:nth-of-type(1) .cell.Data .unitBox input {
    display: block;
    pointer-events: none;
    width: 65px;
}

.graphTable .cellBox:nth-of-type(1) .cell.Data .unit {
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    width: 0;
}

/* !단위 선택 했을때 .addUnit 클래스 붙이기 */
/* .graphTable .cellBox .cell.Data.addUnit { flex-direction: column; } */
.graphTable .cellBox .cell.Data .unitBox.on {
    display: flex;
    align-items: center;
    height: auto;
    visibility: visible;
}

.graphTable .cellBox .cell.Data .unit {
    visibility: visible;
    width: 100%;
    justify-content: flex-start;
}

/* .graphTable .cellBox .cell.Data.addUnit input { text-align: right; } */

/* 단위표시 값 입력후 체크버튼 클릭시 */
/* .graphTable .cellBox .cell.Data.addUnit.Check .unitBox input { display: block; width: 45px; } */

.graphTable .cellBox .cell.Title {
    background-color: #7fcdc0;
}

/* .graphTable .cellBox .cell.Title:nth-of-type(1) {
    border-top: 2px solid #11a38b;
} */

.graphTable .cellBox .cell.Data {
    background-color: #fff;
    height: 51px;
}

.graphTable .cellBox .cell.Ratio {
    background-color: #CBEBE6;
    border-top: 2px solid #11a38b;
}

.graphTable .cellBox .cell.Ratio input[type="text"] {
    pointer-events: none;
}

/* 합계 cellBox 스타일 */
.cellBox.Sum {
    width: 100px;
}

.graphTable .cellBox.Sum .cell.Title {
    border-radius: 0 10px 0 0;
    position: relative;
}
/* .graphTable .cellBox.Sum .cell.Title::before {
    content: '';
    background: #7fcdc0;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: -11px;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    outline: 1px solid red;
} */

.graphTable .cellBox.Sum .cell.Ratio {
    border-radius: 0 0 5px 0;
}

/* !표 내용 삭제 버튼, 클릭시 해당 data-target값의 input value 비우기 */
.deleteBtnBox {
    width: 35px;
    height: 116px;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.deleteBtnBox.off {
    display: none;
}

.deleteBtn {
    width: 35px;
    height: 38px;
    background-image: url(../images/415/btn_delete.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.PC .deleteBtn.hover {
    background-image: url(../images/415/btn_delete_h.png);
}

/* 하단 서브 메뉴 */
.subMenuContainer {
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../images/415/submenubg_1.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/* 막대그래프 표 설정 */
.tableControlBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 45px;
}

.tableControlBox .tableControl {
    display: flex;
    width: 340px;
    height: 130px;
    gap: 10px;
}

.tableControlBox .tableControl .unitControlBox,
.tableControlBox .tableControl .cellControlBox,
.tableControlBox .tableControl .sumControlBox,
.graphControlBox .graphControl .cellControlBox {
    border-radius: 15px;
    background-color: #DFECFF;
    box-shadow: 0 3px 3px rgb(80 97 124 / 60%);
}

/* 칸 설정 */
.tableControl .cellControlBox {
    width: 160px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.tableControl .cellControlBox span {
    display: block;
    width: 90%;
    margin-bottom: 20px;
}

.cellControlBox .cellControl {
    display: flex;
    width: 85px;
    justify-content: space-between;
}

.cellControlBox>span,
.cellControl>button {
    color: #004A99;
}

.cellControlBox>span {
    font-family: "TmoneyEB";
    font-size: 20px;
}

/* 칸 추가, 삭제 버튼 */
.cellControl>button {
    font-size: 45px;
    width: 38px;
    height: 38px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'TmoneyR';
    box-shadow: 0px 0px 7px rgb(0 74 153 / 20%);
    padding-bottom: 2px;
}
.cellControl>button.inactive {
    opacity: 0.5;
    filter: grayscale(0.7);
    pointer-events: none;
}

.PC .cellControl>button.hover {
    background-color: #004A99;
    color: #fff;
}

/* 선택 박스 공통 스타일 */
.tableControl .controlS>div {
    font-size: 0;
}

.tableControl .controlS>div span {
    color: #004A99;
    font-family: "TmoneyEB";
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 3px;
}

.tableControl .controlS .checkboxS {
    content: '';
    border: 2px solid #004A99;
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background-color: #fff;
}

.tableControl .controlS .checkboxS.on {
    background-color: #004A99;
}

.tableControl .controlS .checkboxS.on::after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 7px;
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* 단위 표시 설정 */
.unitControlBox {
    width: 160px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.unitControlBox div {
    font-size: 0;
}

/* 단위 입력창 */
.unitControlBox .unitInput {
    width: 123px;
    margin-top: 15px;
}

.unitControlBox .unitInput input[type="text"] {
    width: 80px;
    height: 30px;
    background-color: #fff;
    border: 2px solid #145ea4;
    border-radius: 7px;
    text-align: center;
    font-size: 17px;
    box-sizing: border-box;
    font-family: "TmoneyEB";
}

/* 단위 추가 버튼 */
.unitCheckBtn {
    width: 30px;
    height: 30px;
    font-family: 'TmoneyR';
    line-height: 9px;
    box-shadow: 0px 0px 7px rgb(0 74 153 / 20%);
    background-color: #fff;
    border-radius: 7px;
    position: relative;
}

.unitCheckBtn::after {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 11px;
    width: 8px;
    height: 14px;
    border: solid #004A99;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.PC .unitCheckBtn.hover {
    background-color: #004A99;
    color: #fff;
}

.PC .unitCheckBtn.hover::after {
    border: solid #fff;
    border-width: 0 3px 3px 0;
}

/* 그래프로 나타내기 버튼 */
.changeBtnBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.graphChangeBtn,
.tableChangeBtn {
    width: 130px;
    height: 70px;
    font-size: 23px;
    background: #066658;
    color: #fff;
    border-radius: 15px;
    font-family: "GmarketM";
    position: relative;
    margin-top: 15px;
}

.graphChangeBtn::before,
.tableChangeBtn::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -6px;
    left: 0;
    border-radius: 15px;
    background: #007e6b;
    /* z-index: -1; */
}

.graphChangeBtn>span,
.tableChangeBtn>span {
    position: absolute;
    display: block;
    top: calc(50% - 1px); left: 0;
    transform: translateY(-50%);
    width: 100%;
}
.graphChangeBtn>span>span,
.tableChangeBtn>span>span {
    color: #ffe9a8;
}

/* .graphChangeBtn::after {
    content: '그래프로\A나타내기';
    position: absolute;
    top: calc(50% - 3px);
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 110px;
    text-align: center;
    white-space: pre;
} */

.PC .graphChangeBtn.hover,
.PC .tableChangeBtn.hover {
    background: #066658;
}

.PC .graphChangeBtn.hover::before,
.PC .tableChangeBtn.hover::before {
    visibility: hidden;
}

.PC .graphChangeBtn.hover>span,
.PC .tableChangeBtn.hover>span {
    top: calc(50% + 3px);
}

/* 막대그래프 화면 */
.graphContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.graphWrap {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.graphContainer .graphTitle {
    margin-top: 25px;
    margin-bottom: 30px;
}

/* 띠그래프 */
.graphBox.stick {
    width: 900px;
    margin-top: 20px;
}
.graphBox.stick .graphLine{
    display: block;
    width: 900px;
    height: 40px;
    background: url(../images/615/stickGraph.svg) no-repeat center 20px/100%;
    position: relative;
    font-size: 18px;
    font-family: "GmarketM";
}
.graphBox.stick .graphLine div {
    position: absolute;
    top: 0;
    left: calc(var(--left));
    transform: translateX(-50%);
}

.graphBox.stick .graphLine div:nth-child(1) {--left: 0%;}
.graphBox.stick .graphLine div:nth-child(2) {--left: 10%;}
.graphBox.stick .graphLine div:nth-child(3) {--left: 20%;}
.graphBox.stick .graphLine div:nth-child(4) {--left: 30%;}
.graphBox.stick .graphLine div:nth-child(5) {--left: 40%;}
.graphBox.stick .graphLine div:nth-child(6) {--left: 50%;}
.graphBox.stick .graphLine div:nth-child(7) {--left: 60%;}
.graphBox.stick .graphLine div:nth-child(8) {--left: 70%;}
.graphBox.stick .graphLine div:nth-child(9) {--left: 80%;}
.graphBox.stick .graphLine div:nth-child(10) {--left: 90%;}
.graphBox.stick .graphLine div:nth-child(11) {--left: 100%;}
.graphBox.stick .graphLine div:nth-child(11)::after {
    content: '(%)';
    position: absolute;
    top: 0; left: 100%;
}

.cellWrap {
    width: 900px;
    border: 2px solid #575757;
    margin-top: 10px;
    display: flex;
}

.cellWrap>div {
    border-right: 1px solid #575757;
    height: auto;
    min-height: 65px;
    background: #b8da89;
    font-family: "TmoneyEB";
    color: #364069;
    font-size: 20px;
    line-height: 25px;
    position: relative;
    opacity: 0;
    display: none;
}
.cellWrap>div.on { display: block; }

.cellWrap>div:nth-child(2) {background: #aac4e6;}
.cellWrap>div:nth-child(3) {background: #fad1d9;}
.cellWrap>div:nth-child(4) {background: #fecd85;}
.cellWrap>div:nth-child(5) {background: #c3e2f7;}
.cellWrap>div:nth-child(6) {background: #d7bcd8;}
.cellWrap>div.noBorder,
.cellWrap>div:last-child { border: none;}

.cellWrap>div .DataBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* flex-wrap: wrap; */
    flex-direction: column;
    padding: 8px 0;
    word-break: keep-all;
    opacity: 0;
}

.cellWrap>div .DataBox.line {
    position: absolute;
    top: 100%; left: 50%;
    width: 400px; height: 34px;
    align-items: flex-end;
    justify-content: flex-start;
    padding:  0 0 0 50px;
    flex-direction: row;
}
.cellWrap>div .DataBox.line::before {
    content: '';
    width: 50px; height: 25px;
    background: url(../images/615/stickLine_gr.svg) no-repeat left bottom/45px;
    position: absolute;
    top: 2px; left: 0;
}
.cellWrap>div:nth-child(2) .DataBox.line::before {
    background: url(../images/615/stickLine_bl.svg) no-repeat left bottom/45px;
}
.cellWrap>div:nth-child(3) .DataBox.line::before {
    background: url(../images/615/stickLine_pi.svg) no-repeat left bottom/45px;
}
.cellWrap>div:nth-child(4) .DataBox.line::before {
    background: url(../images/615/stickLine_or.svg) no-repeat left bottom/45px;
}
.cellWrap>div:nth-child(5) .DataBox.line::before {
    background: url(../images/615/stickLine_sk.svg) no-repeat left bottom/45px;
}
.cellWrap>div:nth-child(6) .DataBox.line::before {
    background: url(../images/615/stickLine_pu.svg) no-repeat left bottom/45px;
}

.cellWrap>div .DataBox.line.reverse {
    left: auto; right: 50%;
    padding-left: 0;
    padding-right: 50px;
    justify-content: flex-end;
}
.cellWrap>div .DataBox.line.reverse::before {
    transform: rotateY(180deg);
    left: auto; right: 0;
}

.cellWrap>div .DataBox.line2 {
    height: 64px;
}
.cellWrap>div .DataBox.line2::before {
    height: 55px;
}
.cellWrap>div .DataBox.line3 {
    height: 94px;
}
.cellWrap>div .DataBox.line3::before {
    height: 85px;
}
.cellWrap>div .DataBox.line4 {
    height: 124px;
}
.cellWrap>div .DataBox.line4::before {
    height: 115px;
}
.cellWrap>div .DataBox.line5 {
    height: 154px;
}
.cellWrap>div .DataBox.line5::before {
    height: 145px;
}
.cellWrap>div .DataBox.line6 {
    height: 184px;
}
.cellWrap>div .DataBox.line6::before {
    height: 175px;
}

.cellWrap>div .DataBox.line span {
    background: rgba(255, 255, 255, 0.4); 
    z-index: 7;
    display: inline-block;
}

.cellWrap>div .DataBox>span:nth-child(1) {
    max-width: 100%;
    margin-bottom: 2px;
}

/* 실험용 */
.cellWrap>div:nth-child(1) {width: 25%;}
.cellWrap>div:nth-child(2) {width: 10%;}
.cellWrap>div:nth-child(3) {width: 20%;}
.cellWrap>div:nth-child(4) {width: 10%;}
.cellWrap>div:nth-child(5) {width: 11%;}
.cellWrap>div:nth-child(6) {width: 24%;}


.graphBox .cellBar .cellBox .cellTitle textarea {
    width: 100%;
    max-height: 36px;
    overflow-y: auto;
    /* overflow: hidden; */
    resize: none;
    font-size: 13px;
    font-family: 'TmoneyEB';
    text-align: center;
    word-break: keep-all;
    cursor: auto;
}


/* 화면 나누기 */
.splitContent.splitScreen .graphBox .ZERO {
    font-size: 10px;
}


/* 하단 서브 메뉴 공통 */
.graphContent.Graph .subMenuContainer {
    height: 115px;
}

.graphControlBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 45px;
}

.graphControlBox .graphControl .cellControlBox {
    width: 160px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/* 표로 나타내기 버튼 */
.graphContent.Graph .graphChangeBtn,
.graphContent.Graph .tableChangeBtn {
    width: 230px;
    height: 50px;
    text-align: center;
}
.graphContent.Graph .tableChangeBtn {
    width: 130px;
}

.graphContent.Graph .graphChangeBtn>span, 
.graphContent.Graph .tableChangeBtn>span {
    top: calc(50% - 6px);
}

.PC .graphContent.Graph .graphChangeBtn.hover>span, 
.PC .graphContent.Graph .tableChangeBtn.hover>span {
    top: 50%;
}


/********************* 그래프 순서대로 나오기 ********************************/
.graphBox .cellGraph .cell.hide {
    display: none;
}

/* 기본 */
.graphContainer .graphTitle {
    visibility: hidden;
}

.graphBox {
    visibility: hidden;
}


/* 순서대로 나오기 */
.graphContainer .graphTitle.SHOWING {
    visibility: visible;
}

.graphBox.SHOWING {
    visibility: visible;
}


/********************* 화면 분할 했을때 ********************************/

/* 화면 분할 */
.splitContent.splitScreen {
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

.splitContent.splitScreen .content:nth-of-type(1)::after {
    content: "";
    width: 1px;
    height: 100%;
    border: 3px dashed #ABC6FF;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -1px;
}

.splitContent.splitScreen .content:nth-of-type(1) .subMenuContainer::after {
    content: "";
    width: 1px;
    height: 100%;
    border: 3px dashed #fff;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -1px;
    z-index: 2;
}

/* 화면분할시 표 스타일 조정 */
.splitContent.splitScreen .graphTable {
    height: 150px;
    margin-right: 0px;
}

.splitContent.splitScreen .graphTable .cellBox.Side {
    width: 70px;
}

.splitContent.splitScreen .graphTable .cellBox {
    width: 56px;
}

.splitContent.splitScreen .graphTable .cellBox .cell {
    height: 50px;
}

.splitContent.splitScreen .graphTable .cellBox textarea::-webkit-scrollbar {
    width: 3px;
}

.splitContent.splitScreen .graphTable .cellBox.Sum {
    width: 60px;
}

/* .splitContent.splitScreen .graphTable .cellBox .cell.Title {
    height: 50px;
} */

.splitContent.splitScreen .graphTable .cellBox .cell.Data {
    height: calc(100% - 100px);
}



.splitContent.splitScreen .graphTable .cellBox .cell textarea,
.splitContent.splitScreen .graphTable .cellBox .cell input[type="text"] {
    width: 98%;
    max-height: 28px;
    min-height: 15px;
}
.splitContent.splitScreen .graphTable .cellBox .cell.Data input[type="text"],
.splitContent.splitScreen .graphTable .cellBox .cell.Data .unitBox {
    width: 85%;
}

.splitContent.splitScreen .graphTable .cellBox .cell textarea,
.splitContent.splitScreen .graphTable .cellBox .cell input[type="text"],
.splitContent.splitScreen .graphTable .cellBox .cell span {
    font-size: 11px;
}

/* .splitContent.splitScreen .graphTable .cellBox .cell textarea {
    margin-top: 10px;
} */

/* .splitContent.splitScreen .graphTable .cellBox .cell.Data { text-align: center; height: auto; } */
.splitContent.splitScreen .graphTable .cellBox .cell.Data.addUnit .unit {
    text-align: center;
    justify-content: center;
    height: auto;
}

.splitContent.splitScreen .deleteBtnBox {
    height: 98px;
}

.splitContent.splitScreen .deleteBtn {
    width: 28px;
    height: 31px;
    margin-bottom: 0;
}

/* .splitContent.splitScreen .deleteBtn:first-of-type {
    margin-bottom: 15px;
} */

/* 화면분할시 표 서브메뉴 스타일 조정 */
.splitContent.splitScreen .subMenuContainer .tableControlBox,
.graphChoiceBox {
    padding: 0 15px;
}

.splitContent.splitScreen .subMenuContainer .graphChoiceBox .drawBtnBox {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 110px;
}

.splitContent.splitScreen .subMenuContainer .graphChoiceBox .drawBtnBox .drawBtn {
    width: 110px;
    height: 60px;
    font-size: 19px;
}

/* 화면분할시 그래프 스타일 조정 */
/* 띠그래프 */
.splitContent.splitScreen .graphBox.stick {
    width: 550px;
}

.splitContent.splitScreen .graphBox.stick .graphLine {
    width: 550px; height: 44px;
    font-size: 16px;
}

.splitContent.splitScreen .graphBox.stick .cellWrap {
    width: 100%;
    /* margin: 10px auto 0; */
}

.splitContent.splitScreen .graphBox.stick .cellWrap>div {
    font-size: 14px;
    line-height: 16px;
}

.splitContent.splitScreen .graphBox.stick .cellWrap>div .DataBox.line {
    padding-bottom: 3px;
}


/* 화면분할시 그래프 서브메뉴 스타일 조정 */
.splitContent.splitScreen .subMenuContainer .graphControlBox {
    padding: 0 15px;
}

/* 불러오기 팝업 */
.popup .contents {
    height: 380px;
}

.lodeList {
    width: 660px;
    height: 325px;
    padding: 10px 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.lodeList li {
    width: 96%;
    margin-left: 6px;
    background: #fff;
}

.lodeList::-webkit-scrollbar {
    width: 8px;
}

.lodeList::-webkit-scrollbar-thumb {
    height: 10%;
    background: #38BAA4;
    border-radius: 3px;
}

.lodeList::-webkit-scrollbar-track {
    background: #e7e9f6;
    border-radius: 10px;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}

/* 원그래프 */

.svgBox {
    position: absolute;
    top: 122px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
}
.svgBox::before {
    content: '';
    width: 342px; height: 342px;
    background: url(../images/615/circleGraph.svg) no-repeat center/contain;
    position: absolute;
    top: 4px; left: 4px;
    z-index: 2;
}
.graphBox.circle .graphLine{
    width: 350px; height: 350px;
    position: absolute;
    font-size: 18px;
    font-family: "GmarketM";
}
.graphBox.circle .graphLine div {
    position: absolute;
    line-height: 18px;
}
.graphBox.circle .graphLine div:nth-child(1) {
    top: -18px; left: 50%;
    transform: translateX(-50%);
}
.graphBox.circle .graphLine div:nth-child(2) {
    top: calc(50% + 2px); left: 100%;
    transform: translateY(-50%);
}
.graphBox.circle .graphLine div:nth-child(3) {
    top: 100%; left: 50%;
    transform: translateX(-50%);
}
.graphBox.circle .graphLine div:nth-child(4) {
    top: calc(50% + 2px); left: -24px;
    transform: translateY(-50%);
}

.svg {
    transform: rotate(-90deg);
}
.svg path {
    stroke: #231f20;
}

.rotateBox {
    position: absolute;
    left: calc(50% - 50px);
    transform: rotate(0deg);
    font-size: 14px;
    top: 20px;
    height: 155px;
    transform-origin: 50% 100%;
    display: none;
}

.rotateBox.on {
    display: block;
}

.rotateBox>i {
    display: flex;
    width: 100px;
    height: 105px;
    justify-content: center;
    flex-direction: column;
    padding: 0 10px;
    word-break: keep-all;
}

.rotateBox span {
    font-family: "TmoneyEB";
    color: #3A446A;
}
.rotateBox span:first-child {margin-bottom: 2px;}

.rotateCircleBox {
    position: absolute;
    left: calc(50% - 4px);
    transform: rotate(0deg);
    font-size: 12px;
    top: 5px;
    height: 170px;
    transform-origin: 50% 100%;
    width: 8px;
}

.rotateCircleBox>i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
}

.rotateBox.overText {
    top: -30px;
    height: 205px;
    left: calc(50% + 10px);
}
.rotateBox.overText.line2Text {
    left: calc(50% + 15px);
}

.rotateBox.overText.reverse {
    left: calc(50% - 250px);
}
.rotateBox.overText.reverse.line2Text {
    left: calc(50% - 100px);
}

.rotateBox.overText.reverse>i {
    justify-content: flex-end;
}

.rotateBox.overText>i {
    width: 240px;
    position: relative;
    height: auto;
    padding: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.rotateCircle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -12px;
    width: 8px;
    height: 8px;
    display: none;
    border-radius: 50%;
}

.rotateCircle1 {background-color: #b8da89;}
.rotateCircle2 {background-color: #aac4e6;}
.rotateCircle3 {background-color: #fad1d9;}
.rotateCircle4 {background-color: #fecd85;}
.rotateCircle5 {background-color: #c3e2f7;}
.rotateCircle6 {background-color: #d7bcd8;}

.rotateBox.overText .rotateCircle {
    display: block;
}

.rotateBox.overText.reverse .rotateCircle {
    left: auto;
    right: -12px;
}

.rotateBox.line2Text > i { width: 85px; display: inline-block; font-size: 0; }
.rotateBox.line2Text > i span { font-size: 12px; }

.lineSvg {
    position: absolute;
    top: -122px;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
    pointer-events: none;
}

.svg path { opacity: 0; }
.lineSvg line { opacity: 0; }
.rotateBox { opacity: 0; }
.opacityOn { transition: opacity 0.5s; opacity: 1 !important;}
/* 모바일 */

.IOS .popup.listPopup .contents {
    background: #d0e6e2;
}

.Mobile .cellControl>button {
    padding-top: 5px;
}

.Mobile.ANDROID .cellControl>button {
    padding-top: 8px;
}


/* 가이드 */
.guide_flexBox .guide_bottomBox .guide_rightBox p{
    letter-spacing: -0.1px;
}