@charset "utf-8";

/* 새창열기 html 초기화 */
html { min-width: inherit; }


/* 새창 차트 */
.open-new .info-area { text-align: right; padding-top: 10px; padding-right: 20px; }
.open-new .info-area .info { font-size: 1.3rem; color: #a75656; font-weight: 500;}
.open-new .info-area .info img { width: 20px; height: 20px; }
.open-new .chart .chart-type-select { position: relative; z-index: 2; padding-bottom: 10px; padding: 5px;}
.open-new .chart .chart-type-select button { border: none; background: #ddd; border-radius: 4px; height: 30px; outline: 0; padding: 0 10px; line-height: 30px; letter-spacing: 0; font-weight: bold; font-size: 1.1rem; opacity: 0.3; transition: opacity .25s ease; margin:0 1px;}
.open-new .chart .chart-type-select button:hover { opacity: 1; }
.open-new .chart .chart-type-select button.select { opacity: 1; background: #ddd; }
.open-new .chart .chart-type-select button img { width: 20px; height: 20px; margin-top: 5px; }
.open-new .head-area { width: 100%; position: relative; padding: 10px 80px 7px 15px; border-bottom: 1px solid #e0e0e0;}
.open-new .head-area .title h2.ellipsis { font-size: 1.5rem; color: #000; font-weight: 600; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%; }
.open-new .head-area .title h2.ellipsis img { width: 23px; height: 23px; display: inline-block; margin-right: 7px; }
.open-new .head-area .title h2.ellipsis:hover ~ span.full { display: block; }
.open-new .head-area .title span.full { display: none; position: absolute; left: 40px; top: 37px; background: rgba(16,21,78,0.85); color: #fff; max-width: 95%; font-size: 1.3rem; font-weight: 500; line-height: 18px; border-radius: 3px; padding: 5px 10px; z-index: 10;}
.open-new .head-area .title span.full:after { position: absolute; top: -7px; left: 10px; content: ''; width:0; height:0; border-left: 6px solid transparent; border-right: 6px solid transparent;  z-index: 1; border-bottom: 7px solid rgba(16,21,78,0.85);}

.open-new .head-area .tool { position: absolute; top: 8px; right: 15px; }
.open-new .head-area .tool a { display: inline-block; width: 26px; height: 26px; background: #eaeaea; border-radius: 50%; transition: background .25s ease; position: relative; }
.open-new .head-area .tool a img { width: 16px; height: 16px; opacity: .3; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: opacity .25s ease; }
.open-new .head-area .tool a:hover { background: #DEDEDE; }
.open-new .head-area .tool a:hover img { opacity: .8; }



/* scroll custom style */
::-webkit-scrollbar {
  width: 5px;  /* 세로축 스크롤바 길이 */
  height: 5px;  /* 가로축 스크롤바 길이 */
}
::-webkit-scrollbar-track {
  background-color: lightblue;
}
::-webkit-scrollbar-track-piece {
  background-color: #eee;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #ccc;
}
::-webkit-scrollbar-button {
  background-color: #eee;
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button:start {
  background-color: #eee; /* Top, Left 방향의 이동버튼 */
  border-radius: 5px 5px 0 0;
}
::-webkit-scrollbar-button:end {
  background-color: #eee; /* Bottom, Right 방향의 이동버튼 */
  border-radius: 0 0 5px 5px;
}