@charset "utf-8";
/* graph부분에 그래프 들어가면 css에 border:1px solid #f00 다 지우기 */
/* Common */
.clear_fix {*zoom:1}
.clear_fix:after {content: ""; display: block; clear: both}
button {background:none;}
#wrap {font-family:CGC; letter-spacing: -0.5px;}
.selectbox select {width:150px; border-radius:5px; border:1px solid #ccc; height:30px; cursor: pointer;}

/* top */
.top {box-shadow:2px 2px 4px #00000030; height:65px; background:#100f2b; box-sizing: border-box; position: relative;}
.top p {color:#fff; font-size:23px; font-weight:600; text-align:center; line-height:65px;}
.top .toptxt {position:absolute; right:10px; top:12px; display: flex;}
.top .toptxt h1 {font-size:20px; color:#fff; background:url(../media/main_menu_icon03a.png) no-repeat 0 center; padding:12px 0 12px 50px;}
button.stopbtn {padding:0; margin:0 0 0 10px;}


/* contwrp */
.contwrp {background:#271d4f; height:calc(100vh - 65px); box-sizing: border-box; padding:20px; position: relative;}
.contwrp h4 {font-size:24px; font-weight:700; color:#fff; margin-bottom:10px;}
.contwrp h5 {font-size:18px; font-weight:500; color:#fff; margin:10px 0;}
.contop_box01 {width:410px;}
.contop_box01 .flexbox {display:flex;}
.contwrp .top_btnwrp button {border-radius:10px; padding:5px 0; font-size:14px; font-weight:500; color:#fff; background:rgb(84, 123, 209); width:121px; box-sizing: border-box;}
.contwrp .top_btnwrp > div {display: flex; justify-content: space-between}
.contwrp .top_btnwrp button.on, .contwrp .top_btnwrp button:hover {background:rgb(195, 66, 255); transition: 0.5s;}
.contop_box01 .flexbox .left {position: relative;}

.contwrp .color_wrap {position: relative;}
.colballwrp {display: flex; justify-content: space-evenly; margin-top:30px;}
.contwrp .color_wrap .colball01, .contwrp .color_wrap .colball02 {display:flex;}
.contwrp .colballwrp span {vertical-align:middle; display:inline-block; margin-left:10px; font-weight:15px; font-weight:500; color:#fff; line-height:25px;}
.contwrp .flexbox .right {margin-left:10px;}
.color_select .statxt {font-size:15px; font-weight:300; color:#fff; line-height:140%; margin-top:15px; position: relative; padding-left:17px;}
.color_select .statxt span {position:absolute; left:0; top:0;}
.color_select {margin-top:45px;}

.grapwrp {margin-left:10px; width:100%;}




.contop {margin-bottom:20px;}
.contop, .contbottom {display:flex; justify-content: space-between}
.contop .menu {background-color:#100f2b; height:318px; box-sizing: border-box; padding:10px; width:150px; border-radius:10px; overflow:auto;}
.contop .menu li button {display:block; text-align:center; color:#fff; font-size:14px; font-weight:500; padding:10px 0; width: 100%;}
.contop .menu li {margin-bottom:5px;}
.contop .menu li:last-child {margin-bottom:0;}
.contop .menu li.on button {background:#007eff; border-radius:10px;}
.contop .menu::-webkit-scrollbar { width: 5px;} 
.contop .menu::-webkit-scrollbar-thumb { background-color: #525252; border-radius:5px; }

.contop .graph {height:356px; background:#fff; border-radius:10px;}

.contbottom .grwp {height:calc(100vh - 515px); width:410px; box-sizing: border-box;}
.contbottom .mapwp {height:calc(100vh - 515px); width:724px; box-sizing: border-box;}
.contbottom .imgwp {height:calc(100vh - 515px); width:724px; box-sizing: border-box;}
/* .contbottom .grwp {height:calc(100vh - 515px); width:410px; box-sizing: border-box;}
.contbottom .mapwp {height:calc(100vh - 515px); width:724px; box-sizing: border-box;}
.contbottom .imgwp {height:calc(100vh - 515px); width:724px; box-sizing: border-box;} */

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
  
  input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #C6C6C6;
    cursor: pointer;  
  }
  
  input[type=range]::-webkit-slider-thumb:hover {
    background: #f7f7f7;
  }
  
  input[type=range]::-webkit-slider-thumb:active {
    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  }
  
  input[type="number"] {
    color: #8a8383;
    width: 50px;
    height: 30px;
    font-size: 20px;
    border: none;
  }
  
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button {  
     opacity: 1;
  }
  
  input[type="range"] {
    -webkit-appearance: none; 
    appearance: none;
    height: 2px;
    width: 250px;
    position: absolute;
    background-color: #C6C6C6;
    pointer-events: none;
    top:50px;
    left:0
  }
  
  #startRange {
    height: 0;
    z-index: 1;
  }

  #hueCanvas {width:250px; height:25px; margin-top:10px; border-radius:50px;}

  .contwrp .color_wrap .ok_color {width:25px; height:25px; border-radius:50%; border:1px solid #fff; background:#a7a7a7;}







/* 
.image {
    width: 100%;
    height: 93%;
}

 */