body {
    overflow: auto;
}
body::-webkit-scrollbar {
    width:8px;
    height: 8px;
    background-color: red;
}
body::-webkit-scrollbar-corner {
    background-color: rgba(200,200,200,.5);
    border-radius: 20px;
}
body::-webkit-scrollbar-thumb {
    background-color: rgba(100,100,100,.8);
    border-radius: 20px;
}
body::-webkit-scrollbar-button:vertical:decrement {
    width: 16px;
    height: 16px;
    /* border-radius: 100%; */
    background-color: red;
}
body::-webkit-scrollbar-button:vertical:increment {
    width: 16px;
    height: 16px;
    /* border-radius: 100%; */
    background-color: red;
}


:root[color-theme='light'] {
    --background: #fff;
    --boxColor: #000;
    --bs-body-bg:#696969;
  }
  
  :root[color-theme='dark'] {
    --background: #000;
    --boxColor: #fff;
    /* --bs-body-bg:#696969; */
  }
  /*background: var(--background);*/

section[name=mainArea] {
  padding-bottom: 100px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.div-area {
    width:200px; height:300px;
    /* border: 1px dashed rgba(100,100,100,.8); */
    transition: all 0.1s;
    /* border-radius: 15%; */
}
.div-area .div-card {
    width:200px; height:300px;
    /* background-image: url("../img/tym-ci.png"); */
    /* background-image: url("../upload/2023/20230112_cliptToImg_1.png"); */
    background-size: cover;
    /* border: 1px solid rgba(255,100,100,.6); */
}
.div-area .overlay {
    position: absolute;
    width:200px; height:300px;
    /* background: linear-gradient(#e66465, #9198e5); */
    background: linear-gradient(105deg,
    transparent 40%, 
    rgba(255,219,112,.8) 45%,
    rgba(132,50,255,.6) 50%,
    transparent 54%);
    filter: brightness(1.2) opacity(0.8);
    mix-blend-mode: color-dodge;
    background-size: 200% 150%;
    background-position:100%;
    transition: all 0.1s;
}
.div-area .overlay2 {
    position: absolute;
    width:200px; height: 300px;
    background: radial-gradient(circle closest-side at 50% 50%,red,blue,white);
    transition: all 0.1s;
    /* background-position: center; */
    background-size: cover;
    /* background-position:10% 100px; */
    opacity: 50%;
}
  
  /*커스텀*/
  /* @import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined'); */
  /*
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');
  }
  
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  
  .material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  */
  /*reset*/
  /*html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}*/
  /*article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}*/
  /*body { line-height: 1;}*/
  /*ol, ul { list-style: none;}*/
  /*blockquote, q { quotes: none;}*/
  /*blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}*/
  /*table { border-collapse: collapse;	border-spacing: 0;}*/
  /*reset*/
  .material-symbols-outlined {
      font-family: 'Material Icons Outlined';
      font-weight: 400;
      animation: icon-spin 4s infinite linear !important;
      cursor: pointer;
      color: rgba(100,100,100,.5);
      font-size: 32px;
      /*background: red;*/
  }

  .popDiv{
	border:1px solid #c1bfbf;
	background-color:#ffffff;
	padding: 20px 0;
    z-index: 999;
    position: absolute;
    top:50px;
    width: 90%;
    margin:0px auto;
    left: 50%;
    transform: translate(-50%, 0%);
}
.popDiv > table{
	width: 90%;
	height: 90%;
	margin: 20px auto 50px auto;
}
  
  .hoverSpin:hover {animation: icon-spin 4s infinite linear !important;}
  /*.hoverSpin:active {animation: dash 4s infinite linear !important;}*/
  
  @keyframes icon-spin {
      0% {
          -webkit-transform: rotate(0);
          transform: rotate(0)
      }
      
      100% {
          -webkit-transform: rotate(359deg);
          transform: rotate(359deg)
      }
  }
  
  .animated-line {
      stroke-dasharray: 8;
      stroke-dashoffset: 10;
      animation: dash 5s linear infinite;
  }
  
  @keyframes dash {
      from {
          stroke-dashoffset: 100;
      }
      
      to {
          stroke-dashoffset: 20;
      }
  }
  
  #svgTopLogo { color:rgba(100,100,100,.8); text-decoration: none; transition: transform .4s ease-in-out; }
  #svgTopLogo:hover {transform: rotate(-40deg); color: rgba(255,100,100,.6);}
  
  .icon { color: #4154f1; text-decoration: none; color:rgba(100,100,100,.8); text-decoration: none; transition: transform .4s ease-in-out;}
  .icon:hover {
      /*animation-name : beat;*/
      /*animation-duration : 1.5s;*/
      transform: rotate(30deg); 
      color: rgba(255,100,100,.6); /*filter: blur(.5px) invert(16%) sepia(89%) saturate(6054%) hue-rotate(358deg) brightness(97%) contrast(113%);*/
  }
  /*.icon2:hover ~ .icon {    transform: rotate(30deg);     color: rgba(255,100,100,.6); }*/
  /* +인접, >넥스트, ~ */
  /*rgba(100,120,255,.8) #08C18A 8, 193, 138 */
  .iconA {color: rgba(100,100,100,.8);  text-decoration: none; fill: rgba(8, 193, 138,.8)}
  .iconA:hover > .icon {    transform: rotate(30deg);     color: rgba(255,100,100,.6); fill: rgba(193, 8, 138,.8)}
  .iconA:hover + .icon {    transform: rotate(30deg);     color: rgba(255,100,100,.6); }
  
  .click-point { cursor: pointer; }
  
  .btn-primary { background: rgba(8, 193, 138,.6); color: rgb(255, 255, 255); }
  
  @keyframes beat {
      0% {
        transform: scale(1);/* rotate(0deg);*/
        /*background-color:rgb(255,80,90);*/
      }
      50% {
        transform: scale(0.5);/* rotate(-15deg);*/
        /*background-color:rgb(255,255,0);*/
      }
      100% {
        transform: scale(1);/* rotate(0deg);*/
        /*background-color:rgb(255,80,90);*/
      }
  }
  
  .none {display:none !important; 
      /* transition */
      transition: left 0.3s;
  }
  
  body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul {
      font-family:'맑은 고딕','Malgun Gothic','돋움',Dotum,Helvetica, Applegothic,Sans-serif !important;
      margin:0;
      padding:0;
  }
  
  
  *, ::after, ::before {
      box-sizing: border-box;
  }
  
  .header {
      transition: all 0.8s;
      z-index: 999;
      height: 50px;
      box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
      /*background-color: #fff;*/
      padding-left: 20px;
  }
  
  .d-flex {
      display: flex !important;
  }
  
  .fixed-top {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1080;
  }
  
  .sidebar {
      position: fixed;
      top: 50px;
      left: 0;
      bottom: 0;
      width: 300px;
      z-index: 996;
      transition: all 0.3s;
      padding: 10px;
      box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
      overflow-y: auto;
      /*background-color: rgba(255,255,255,.5);*/
      /*scrollbar-width: thin;*/
      /*scrollbar-color: #aab7cf transparent;*/
  }

  .nav-item .nav-link { background-color: rgba(255,255,255,.6); margin:2px; border-top:1px #ffffff solid;}
  .nav-tabs .nav-link.active{border-top:1px #e55 solid; color:rgb(49, 47, 47);}

  .nav-body{padding-left:40px;background-color:rgba(220,220,220,.4);box-shadow:3px 3px 3px 1px silver inset;}
    
      .sidebar {
          background-color: rgba(255,255,255,.9);
          scrollbar-width: thin;
          scrollbar-color: #aab7cf transparent;
      }
      #footer {
          background-color: rgba(255,255,255,.5);
      }

  :root[data-bs-theme='dark'] 
  {
    /* #tabTop .nav-link { background-color: rgba(255,255,255,.6);} */

    .nav-body{padding-left:40px;box-shadow:3px 3px 3px 1px rgba(100,100,100,.3) inset;}
    
      .sidebar {
          background-color: rgba(10,10,10,.5);
          scrollbar-width: thin;
          scrollbar-color: #aab7cf transparent;
      }
      #footer {
          background-color: rgba(10,10,10,.5) ;
      }
  }
  :root[data-bs-theme='light'] 
  {
    /* #tabTop .nav-link { background-color: rgba(255,255,255,.6);} */
    .nav-body{padding-left:40px;background-color:rgba(220,220,220,.4);box-shadow:3px 3px 3px 1px silver inset;}
    
      .sidebar {
          background-color: rgba(255,255,255,.9);
          scrollbar-width: thin;
          scrollbar-color: #aab7cf transparent;
      }
      #footer {
          background-color: rgba(255,255,255,.5);
      }
  }
  .modeIcon {}
  :root[data-bs-theme='dark'] { 
      .mi-light { fill:rgba(255,255,255,.8); } .mi-dark { fill:rgba(255,255,100,.8); }
      .header { background-color: var(--bs-body-bg) !important; }
  }
  :root[data-bs-theme='light'] { 
      .mi-light { fill:rgba(255,100,100,.8); } .mi-dark { fill:rgba(255,200,200,.8); }
      .header { background-color: #696969 !important; }
  }
  
  /*@media (prefers-color-scheme: dark) {*/
      
  /*}*/
  
  aside {
      display: block;
  }
  
  .sidebar::-webkit-scrollbar {
      width: 5px;
      height: 8px;
      background-color: #fff;
  }
  
  #main, #footer {
      transition: all 0.3s;
  }
  
  /*_('#headerLogo').classList.toggle('toggle-sidebar');*/
  @media (max-width: 1199px) {
      .toggle-sidebar .sidebar {
          left: 0;
      }
      .sidebar {
          left: -300px;
      }
      /*#headerLogo { display:block !important; };*/
      #footer { width:100%; }
  }
  
  @media (min-width: 1200px) {
      #main, #footer {
          margin-left: 300px;
          padding-left:10px;
          padding-right:10px;
      }
      
      .toggle-sidebar #main, .toggle-sidebar #footer {
          margin-left: 0;
          width:100%;
      }
      .toggle-sidebar .sidebar {
          left: -300px;
      }
      
      #footer { width:calc(100% - 300px); }
      
      /*#headerLogo { display:block !important; };*/
  }
  
  #main { margin-top:50px;  }
  
  .pop-now .btn-pop-now {
      /*position: fixed;*/
      /*bottom: 1rem;*/
      /*left: 1rem;*/
      /*z-index: 999999;*/
      box-shadow: 0 1px 20px 1px #ff3e1d;
  }
  .btn-danger {
      color: #fff;
      background-color: #ff3e1d;
      border-color: #ff3e1d;
      box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 62, 29, 0.4);
  }
  
  .tab-content {
      margin: 10px;
  }
  
  .nav-tabs { --bs-nav-tabs-border-width: none; }
  
  .back-to-top.active {
      visibility: visible;
      opacity: 1;
  }
  .back-to-top {
      position: fixed;
      visibility: hidden;
      opacity: 0;
      right: 15px;
      bottom: 100px;
      z-index: 99999;
      background: #4154f1;
      width: 40px;
      height: 40px;
      border-radius: 4px;
      transition: all 2s;
  }
  .back-to-top:active {
      bottom: 200px;
      animation: icon-spin 4s infinite linear !important;
      /*transition: all 2s;*/
  }
  /*visited*/
  
  .switch-area {   }
  .switch-area .switch {  position: absolute;  appearance: none;  -webkit-appearance: none;  -moz-appearance: none;}
  .switch-area input { border: 0px solid #d3d5db; }
  .switch-area .switch-label {
    position: relative;  cursor: pointer;  display: inline-block;  width: 58px;  height: 28px;
    background: #fff;  border: 2px solid #daa;  border-radius: 20px;  transition: 0.2s;
  }
  .switch-area .switch-label:hover {  background: #efefef;}
  .switch-area .on {
        position: absolute;
        top: 4px;  left: 3px;
        display: inline-block;
        width: 20px;  height: 20px;
        border-radius: 20px;  background: #daa;  transition: 0.2s;
  }
  /* checking style */
  .switch-area .switch:checked+.switch-label {
    background: #c44;  border: 2px solid #c44;
  }
  .switch-area .switch:checked+.switch-label:hover {
    background: #e55;
  }
  .switch-area input[type="checkbox"] + label:before {
      display: none !important;   /* main.css랑 충돌나서.. 해당라인 넣음.*/
  }
  /* move */
  .switch-area .switch:checked+.switch-label .on {
    left: 34px;  background: #fff;  box-shadow: 1px 2px 3px #00000020;
  }
  
  /* 윈도우 테마 ㅡㅡ; */
  /*:root[color-theme='dark'] {*/
  /*@media (prefers-color-scheme: dark) {*/
  /*    .sidebar {*/
  /*        background-color: rgba(10,10,10,.5);*/
  /*        scrollbar-width: thin;*/
  /*        scrollbar-color: #aab7cf transparent;*/
  /*    }*/
  /*    #footer {*/
  /*        background-color: rgba(10,10,10,.5);*/
  /*    }*/
  /*}*/
  
  
  /*.z-span { position:absolute; top:0;left:0; z-index:2;}*/
  
.xLayout {
	        /*font-family: 'NanumSquareRound',sans-serif;*/
            color:  #555;
          border: 10px solid rgba(black, .1);
          border-radius: 10px;
          display: grid;
        }
        .xLayout .item {
            cursor: pointer;
            text-align:center;
          /*display: flex;*/
          /*justify-content: center;*/
          align-items: center;
          padding: 10px;
          box-sizing: border-box;
          position: relative;
          font-size: 14px;
          color: rgba(255,0,0,0.5);
          font-weight: 900;
          text-shadow: 3px 0 0 rgba(white, .5);
        }
        .xLayout .item::before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            border: 2px solid  #555;
            border-radius: 10px;
            box-sizing: border-box;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            /*z-index: -1;*/
          }
         .xLayout .item::after {
            content: "";
            width: 10px;
            height: 50%;
            background: white;
            position: absolute;
            top: 16px;
            left: 16px;
            border-radius: 100px;
            opacity: .3;
            /*z-index: -1; */
        }
        
        .xLayout {
          display: grid;
          /*width: 330px;
          grid-template-rows: repeat(2, 100px);
          grid-template-columns: repeat(3, 1fr);
          grid-auto-rows: 100px;*/
          margin-bottom: 50px;
        }
        .xLayout .item:nth-child(1) {
          grid-column: 1 / 8;
            background: rgba(8, 193, 138,.3);
            border-radius:10px;
        }
        /* .xLayout .item:nth-child(3) {
          grid-column: span 2;
         } */
         
         /* :last-child */
         .xLayout .item:nth-child(2n+3) {
         	grid-column: span 6;
         	color: rgba(80,80,80,0.5);
         	justify-content: flex-start;	/*왼쪽정렬?*/
         }
        
        .xLayout .item.self {
            background: rgba(255,0,0,0.2);
            border-radius: 10px;
        }
        .xLayout .disp {
            text-align:left;
        }
        .chkLabel {
            cursor:pointer;
        }
	.dtArea { }
	.dt { }