/* pc webinar 버전 */
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


:root {
    --content-text:#525252;
    --content-text-hover:#9F9F9F;
    --point-color:#0BA8A4;
    --input-border:#C6C6C6;
    --border-color:#323232;
    --scroll-bg :#F2F2F2;
    --scroll-bar :#DFDFDF;
    --success-color :#008ED1;
    --fail-color :#EB0600;
    --tab-line-color:#9F9F9F;
    --tab-active-color:#343434;
    --modal-scroll-bg :#F3F3F3;
    --modal-scroll-bar :#C8C8C8;

    --ui-color-type1: #0F0F0F;
    --ui-color-type2: #0F0F0F;
    --ui-line-color: #1E1E1E;

    --topWrap-height: 60px;
    --footerWrap-height:60px;
    --leftWrap-width:75px;
    --rightWrap-width:300px;
    --childView-width:450px;

    
}

/* init css */
* {
    margin: 0px;
    padding: 0px;
    text-decoration:none;
    box-sizing:border-box;
}
ul, ol, li {
    list-style-type:none; 
}
html, body {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight:300;
    font-size:14px;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    color:var(--content-text);
}
table { border-collapse:collapse; border-spacing:0; width:100%; }
input:focus {outline: none;}
textarea:focus {outline: none;}
select:focus {outline: none;}
button:focus {outline: none;}
a, a:focus, a:hover { text-decoration:none; outline: none; color: var(--content-text); } 
a:hover { color: var(--content-text-hover); }

/* init css */

/* 공통 */
/* media */
@media (max-width:576px){
    html{font-size:12px}
}
@media (min-width:577px) and (max-width:992px){
    html{font-size:14px}
}
@media (min-width:993px){
    html{font-size:16px}
}
/* media */

input[type="text"],  input[type="password"]{
    border:1px solid var(--input-border);
    padding:6px 0 5px 0;
    text-indent:5px;
    color:#575757;
}
input[type="checkbox"] {
    border:1px solid var(--input-border);
    margin-right:5px;
}
input:read-only {
    border:0;
    background-color: #eee;
    border:1px solid var(--input-border);
}
input::placeholder {
    color: #949494;
}
label {
    margin-right:15px;
}
select {
    font-size:0.75rem;
    border:0;
    padding:1px 5px 1px;
    color:#575757;
    background:#272727;
}
textarea {
    font-family: inherit;
    font-size:12px;
    border:1px solid var(--input-border);
    padding:5px;
    color:#575757;
}
input[type="text"].type01 {
    width:80px;
}
.btn {
    display:inline-block;
    font-size:13px;
    font-weight:300;
}
.btn.off {
    color:#B6B6B6 !important;
    background:#E2E2E2 !important;
}
.btn-line {
    text-decoration:underline;
    font-weight:400;
}
table td, table th {
    text-align:center;
    padding:15px 0;
    border-bottom:1px solid #CECECE;
}
table.table-list thead th {
    font-size:13px;
    font-weight:500;
    border-top:1px solid;
    border-bottom:1px solid;
}
table.table-list tr td.desc-wrap {
    max-width:100px;               
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
table.table-read {
    width:90%;
    margin:0 auto;
    border-top:1px solid;
}
table.table-read td {
    text-align:left;
    padding-left:10px;
    font-weight:400;
}
table.table-read td:first-child {
    background:#f7fbfb;
    text-indent:10px;
}
table.table-read td:last-child {
    padding-left:20px;
}
table.tbody-scroll {
    font-size:12px;
    border-collapse: separate;
}
.modify-scroll::-webkit-scrollbar {
    width:5px;
}
.modify-scroll::-webkit-scrollbar-thumb {
    background-color: #595959;
}
.modify-scroll::-webkit-scrollbar-track {
    background-color: none;
}


/* 공통 */


/* 본문 */
body {
  margin:0;
  background:#000;
  box-sizing:border-box;
}
#topWrap {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height: var(--topWrap-height);
    background:var(--ui-color-type1);
    border-bottom:1px solid var(--ui-line-color);
}
#mainWrap {
    position:absolute;
    left:0;
    top: var(--topWrap-height);
    width:100%;
    height: calc(100% - (var(--topWrap-height) + var(--footerWrap-height)));
    overflow:hidden;
}
#centerWrap{
    position:absolute;
    display:flex;
    justify-content:space-between;
    left: var(--leftWrap-width);
    top:0;
    width: calc(100% - (var(--leftWrap-width) + var(--rightWrap-width)));
    height:100%;
}

#centerWrap #view1{
    position:absolute;
    width:calc(100% - var(--childView-width));
    height:100%;
    overflow:hidden;
}
#centerWrap #childViewWrap{
    position:absolute;
    top:0;
    right:0;
    width:var(--childView-width);
    height:100%;
}
#view2, #view3, #view4{
    width:100%;
    height:calc(100%/3);
    overflow:hidden;
}
#view3{
    border-top:1px solid var(--ui-line-color);
    border-bottom:1px solid var(--ui-line-color);
}
#footerWrap {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height: var(--footerWrap-height);
    background: var(--ui-color-type1);
    border-top:1px solid var(--ui-line-color);
}
.gutter {
    position: absolute;
    width: 4px;
    height:100%;
    cursor: col-resize;
    background-color: var(--ui-line-color);
    z-index: 100;
}
.gutter:hover {
    background-color: #2F2F2F;
}

#gutter1 {
    left: calc(100% - (var(--childView-width) + var(--rightWrap-width)));
}
#gutter2 {
    left: calc(100% - var(--rightWrap-width));

}
#canvas {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

#rightWrap{
    position:absolute;
    right:0;
    top:0;
    width:var(--rightWrap-width);
    height:100%;
    background:var(--ui-color-type2);
    border-left:1px solid var(--ui-line-color);
}


/* convex */
#convexWrap{
    width:100%;
    height:165px;
    overflow-y:auto;
}
ul.convexList{
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    padding:0 0.8rem;
    border-bottom:1px solid #272727;
}
ul.convexList:hover{
    background:#191919;
}
ul.convexList.on{
    background:#222222;
}
ul.convexList li {
    font-size:0.8rem;
    color:#8B8B8B;
    padding:0.3rem 0;
}
ul.convexList li .material-icons{
    font-size:1rem;
}

ul.convexList li:nth-child(1){
    width:10%;
}
ul.convexList li:nth-child(2){
    width:70%;
}
ul.convexList li:nth-child(3){
    width:10%;
    text-align:right;
}
ul.convexList li:nth-child(4){
    width:10%;
    text-align:right;
}

/* frame */
#frameWrap{
    width:100%;
    height:165px;
    overflow-y:auto;
}
.titleWrap{
    font-size:0.6rem;
    font-weight:600;
    letter-spacing:0.03rem;
    color:#A6A6A6;
    border-bottom:1px solid #353535;
    background:#2E2E2E;
    padding:0.4rem 0.7rem;
}
ul.frameList{
    display:flex;
    justify-content:space-between;
    padding:0 0.8rem;
    border-bottom:1px solid #272727;
}
ul.frameList:hover{
    background:#191919;
}
ul.frameList li {
    font-size:0.75rem;
    color:#8B8B8B;
    padding:0.2rem 0;
}
ul.frameList li p{
    cursor:pointer;
}
ul.frameList li span {
    font-size:0.6rem;
}
ul.frameList li:first-child{
    width:90%;
    cursor:pointer;
}
ul.frameList a{
    cursor:pointer;
    font-size:1rem;
    margin-top:0.5rem;
}
.circle{
    display:inline-block;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#fff;
    margin-top:5px;
    background:#575757;
}
.circle.blue{
    background:#50AAEF;
}
#frameTagWrap{
    width:100%;
    height:165px;
    overflow-y:auto;
}
ul.headWrap,
ul.tagList{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#1D1D1D;
    padding:0.15rem 0.5rem;
    border-bottom:1px solid #272727;
}
ul.tagList{
    background:none;
    padding:0.3rem 0.5rem;
}
ul.headWrap li, 
ul.tagList li{
    font-size:0.8rem;
    text-align:center;
    color:#8B8B8B;
}
ul.headWrap li:nth-child(1),
ul.tagList li:nth-child(1){
    width:10%;
}
ul.headWrap li:nth-child(2),
ul.tagList li:nth-child(2){
    width:30%;
}
ul.headWrap li:nth-child(3),
ul.tagList li:nth-child(3){
    width:40%;
}
ul.headWrap li:nth-child(4),
ul.tagList li:nth-child(4){
    width:20%;
}

#convexTagWrap {
    width:100%;
    height:165px;
    overflow-y:auto;
}







/* left button */
#leftWrap {
    position:absolute;
    left:0;
    top:0;
    width:var(--leftWrap-width);
    height:100%;
    background:var(--ui-color-type2);
    border-right:1px solid var(--ui-line-color);
}
#leftWrap ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    margin-top:1rem;
    /* background:red; */
}
#leftWrap ul li{
    margin-top:0.5rem;
    text-align:center;
}
#leftWrap ul li a{
    position:relative;
    display:inline-block;
    font-size:1.7rem;
    cursor:pointer;
    padding:0.3rem;
    border-radius:0.2rem;
    color:#333333;
}
#leftWrap ul li a:hover{
    color:#555555;
}
#leftWrap ul li a.on{
    color:#898989;
    background:#000000;
    border-top:1px solid #060606;
    border-left:1px solid #060606;
    border-right:1px solid #1E1E1E;
    border-bottom:1px solid #1E1E1E;
}
#topWrap ul{
    display:flex;
}
#topWrap ul li#logoWrap{
    padding:1.4rem 0 0 1.2rem;
}


#resultPointers {
    width:100%;
    font-size:0.6rem;
    color:#606060;
    height:200px;
    padding:0.8rem;
    overflow-x:hidden;
    overflow-y:auto;
}

/* 에니메이션 */

@keyframes progressAnimation {
    0% {
        background-position: 50px 50px;
    }
    100% {
        background-position: 0 0;
    }
}
@keyframes color-effect {
    0% {
        color:#ffffff;
      }
    50% {
        color:#A50034;
    }
    100% {
        color:#ffffff;
    }
}
@keyframes light-effect {
    0% {
        opacity: 1;
      }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

/* 에니메이션 */