.l-btn,.l-con{position:absolute;-webkit-user-select:none}.l-btn,.l-connect{text-align:center}h3{margin:10px}.l-btn{width:100px;left:50%;top:0;background-color:#ccc;border-radius:0 0 5px 5px;margin-left:-50px;cursor:pointer;opacity:0;-webkit-transition:opacity .5s}.l-btn-show{top:510px;opacity:1}.l-con{width:690px;height:390px;border:5px solid #ccc;background-color:rgba(0,0,0,.8);z-index:10;color:#fff;padding:5px 5px 100px;overflow-y:scroll}.l-con pre{margin:0;word-wrap:break-word;letter-spacing:1px}.l-connect,.l-console{position:absolute;width:710px;left:50%;margin-left:-355px}.l-console{top:50%;margin-top:-250px;height:510px;-webkit-transition:top .5s,-webkit-transform 1s;-webkit-transition-timing-function:cubic-bezier(0,1,1,1)}.l-console-hide{margin-top:0;top:-510px}.l-con-err{color:red}.l-btn-err{-webkit-animation-name:btn-error;-webkit-animation-duration:.4s;-webkit-animation-iteration-count:infinite}@-webkit-keyframes btn-error{0%{color:#000}100%{color:red}}.l-connect{top:50%;margin-top:-250px;height:260px;-webkit-transition:top .5s;padding-top:250px;z-index:11;background:#fff;font-size:20px;border:5px solid transparent;color:#0096d6}.l-connect .ip,.l-connect .port{padding:0 5px;border:1px solid #0096d6}.l-connect input{height:24px;font-size:inherit}.l-connect .ip{width:170px;color:#0096d6}.l-connect .port{width:80px;color:#0096d6}.l-connect .connect{border:1px solid #0096d6;height:26px;vertical-align:top;outline:0;cursor:pointer;background-color:#0096d6;color:#fff;line-height:20px}.l-connect-action{-webkit-transition:-webkit-transform 1s;border:5px solid #ccc;-webkit-transform:rotateY(90deg)}.l-console-action{-webkit-transition-timing-function:ease;-webkit-transform:rotateY(-90deg)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track-piece{background-color:#323232}::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:5px}