@charset "utf-8";
/* CSS Document */

#colorBox{margin: 90px 0;position: relative;}
#colorBox .img{width: 629px;float: left;height: 493px;}
#colorBox .img img{display: none;}
#colorBox .controlBox{position: absolute;right: 0;width: 354px;height: 647px;padding: 77px 0 0 0;box-sizing:border-box;top: -77px;background: url(../images/custom/mobile_bg.png) no-repeat center;}
#colorBox .controlBox>.pos_box{background: url(../images/custom/control_bg.jpg) no-repeat left top /308px;width: 308px;height: 493px;position: relative;background-color: #160933;margin-left: 20px;}
#colorBox .controlBox .circle{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);border-radius: 50%;}
#colorBox .controlBox .colorCircle{width: 215px;height: 215px;cursor: pointer;z-index: 1;}
#colorBox .controlBox .hideCircle{width: 190px;height: 190px;cursor: default;z-index: 2;}
#colorBox .controlBox .square{width: 147px;position: absolute;height: 5px;left: 88px;bottom: 59px;}
#colorBox .controlBox .square.bottom{bottom: 18px;left: 109px;width: 139px;}
#colorBox .controlBox .square .controlPoint{width: 20px;height: 20px;box-sizing:border-box;border: 1px solid #ccc;position: absolute;left: 0;}
#colorBox .controlBox .square .theme-green .back-bar{height: 5px}
#colorBox .controlBox .square .theme-green .back-bar .pointer-label{opacity: 0;display: none}
#colorBox .controlBox .square .slider-container .scale{opacity: 0;display: none}
#colorBox .controlBox .square .theme-green .back-bar .pointer{top: -7px;width: 14px;height: 14px;border-radius: 50%;}