/* #win-properties
  .container
  .pcostumes
  li.selected
  .costume-details
  a.icon-brush.edit {
  display: none;
} */
html, body {
  overflow: hidden !important;
  touch-action: manipulation;
  /* background-color: #E5F0FE !important; */
  background: linear-gradient(180deg, #0681F4 0, rgba(94,177,255,0.7100) 29px, rgba(188,235,252,0) 100px);
}
.white{
  background: #FFFFFF !important;
}
* {
  -webkit-tap-highlight-color:rgba(255,255,255,0);
}
*:not(input, textarea) {
  user-select: none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -webkit-touch-callout: none;
}
canvas, .draggable, #win-code, #win-tools {
  transform: translateZ(0);
}
input, button, select, textarea {
    outline: none;
    -webkit-appearance: none;
    border-radius: 0;
  }
  .projectName.focusInput{
    border:1px solid rgba(255,112,67,1);
  }
  #ide-header{
    height:68px;
  }
  #win-properties .container .tab-container a.add {
    display: none;
  }
  
  #bm-addCostBtn {
    padding: 10px 15px;
    border: 2px dashed #9d9c9c;
    color: #9d9c9c;
    display: block;
    border-radius: 4px;
    margin: 15px 0;
    font-size: 14px;
    font-weight: bold;
  }
  
  #bm-costModal, #bm-audioModal {
    display: none;
    width: 90%;
    height: 90%;
    border-radius: 8px;
    background:#718088;
  }
  
  #bm-audioModal .media-header,
  #bm-costModal .media-header {
    position: absolute;
    left: 0;
    right: 0;
    /* padding: 10px 20px; */
    height:45px;
    line-height:45px;
    z-index: 2;
    width: 100%;
    font-size:14px;
    /* background:rgba(236,239,241,1); */
    border:1px solid rgba(207,216,220,1);
    border-radius:15px 15px 0px 0px;
    background-color: #D9F1FF;
    /* -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4); */
    /* background:#718088; */
  }
  
  #bm-audioModal .media-header .big-title,
  #bm-costModal .media-header .big-title,
  #bm-costModal .media-header .small-title {
    color: #fff;
  }
  #bm-audioModal .media-header .big-title,
  #bm-costModal .media-header .big-title {
    /* font-size: 18px; */
    display:block;
    /* margin-left: 16px; */
    text-align:center;
    height:100%;
    /* color:rgba(96,125,128,1); */
    color: #0084FF;
    font-weight:bold;
  }
  
  #bm-audioModal.modal a.close-modal,
  #bm-costModal.modal a.close-modal {
    top: 15px;
    right:18px;
  }
  #bm-audioModal.modal a.close-modal:hover,
  #bm-costModal.modal a.close-modal:hover {
    opacity: 0.8;
  }
  #bm-audioModal.modal a.close-modal:active,
  #bm-costModal.modal a.close-modal:active {
    opacity: 0.9;
  }
  .bm-container {
    height: calc(100% - 37.6px);
    margin-top: 37.6px;
  }
  
  .bm-selector, .bm-audio-selector {
    color: white;
    position: absolute;
    left: 0;
    top: 45px;
    bottom: 0;
    width: 112px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
    border-left:1px solid #BAD2F5;
    border-right:1px solid #BAD2F5;
    /* -moz-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4); */
  }
  .bm-audio-selector .bm-audio-chooseBlock,
  .bm-selector .bm-chooseBlock {
    position: relative;
    height:40px;
    cursor: pointer;
    overflow:hidden;
    color:rgba(96,125,139,1);
    /* font-weight:600; */
    line-height:40px;
    /* text-align:center; */
    font-size:12px;
    padding-left:16px;
    /* border-bottom:1px solid #fff; */
  }
  .bm-audio-selector .bm-audio-chooseBlock:hover,
  .bm-selector .bm-chooseBlock:hover{
    background:rgba(38,50,56,0.1);
  }
  .bm-audio-selector .bm-audio-chooseBlock:active,
  .bm-selector .bm-chooseBlock:active{
    background:rgba(38,50,56,0.2);
  }
  .bm-audio-selector .bm-audio-chooseBlock .bm-audio-blockName,
  .bm-selector .bm-chooseBlock .bm-blockName {
    /* position: absolute;
    left: 50px; */
    font-size: 12px;  
    color: #8FACBF;
    /* color:rgba(96,125,139,1); */
  }
  .bm-audio-selector .bm-audio-chooseBlock .icon,
  .bm-selector .bm-chooseBlock .icon {
    /* visibility: hidden; */
    display:none;
  }
  .bm-audio-selector .audioBox.selected .bm-audio-chooseBlock .icon,
  .bm-selector .blockBox.selected .bm-chooseBlock .icon {
    /* visibility: visible; */
    position: absolute;
    right:16px;
    width:16px;
    height:16px;
    display:block;
    top:12px;
    float:left;
    background:url("../img/ui/expand.png") no-repeat center center;
    background-size:100% 100%;
    /* margin:12px 10px 0 50px; */
  }
  
  ul {
    list-style-type: none;
  }
  
  .bm-audio-selector ul li,
  .bm-selector ul li {
    height:40px;
    line-height:40px;
    text-align:center;
    cursor: pointer;
    font-size: 12px;
    color: #5C6063;
    /* color:rgba(96,125,139,1); */
  }
  
  .bm-audio-selector .audioBox ul li,
  .bm-selector .blockBox ul li {
    display: none;
  }
  
  .bm-audio-selector .audioBox.selected ul li,
  .bm-selector .blockBox.selected ul li {
    display: block;
  }
  
  .bm-audio-selector ul li.selected,
  .bm-selector ul li.selected {
    /* background-color: #0084FF; */
    background-color: #fff;
    color: #0084FF;
    /* border-left:2px solid #FD5F41; */
    /* margin-left:2px; */
    /* color:rgba(253,95,65,1); */
  }
  .bm-audio-selector ul li:hover,
  .bm-selector ul li:hover{
    background:rgba(244,245,247,1);
  }
  .bm-audio-selector ul li:active,
  .bm-selector ul li:active{
    background:rgba(249,250,250,1);
  }
  #win-assets .asset-actions a.looks-tab{
    display:none;
  }
  
  .bm-audio-selector ul li.selected span,
  .bm-selector ul li.selected span{
    /* border-left:2px solid #FD5F41;
    padding-left:12px; */
    /* background:rgba(255,255,255,1); */
  }

  .box-search{
    width: 284px;
    height: 36px;
    margin-top: 9px;
    border-radius: 6px;
    float: right;
    margin-right: 22.5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #D2D8DB;
    position: relative;
    font-family: PingFang SC;
    font-size: 12px;
    color: #37474F;
  }

  .search-border{
    border: 1px solid #70BAFF;
  }

  .box-search .serachInput{
    border: none;
    width: 212px;
    height: 22px;
    margin-left: 14px;
    color: #8FACBF;
    font-size: 12px;
    font-weight: normal;
    font-family: PingFang SC;
    font-size: 12px;
  }

  .box-search .serachInput::placeholder{
    color: #8FACBF;
  }

  .box-search .tosearch{
    background:url("../img/ui/vector.svg") no-repeat center center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    right: 14px;
  }

  .box-search .toclear{
    background:url("../img/ui/clear.svg") no-repeat center center;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-left: 7px;
  }
  
  .bm-content, .bm-audio-content {
    position: absolute;
    background: #fff;
    top: 45px;
    bottom: 170px;
    left: 112px;
    right: 0;
    /* -moz-box-shadow: inset 1px -2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px -2px 4px rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px -2px 4px rgba(0, 0, 0, 0.1); */
  }
  
  .audio-pushBox ul li,
  .bm-container .audio-chooseBox ul li,
  .pushBox ul li,
  .bm-content .chooseBox ul li {
    display: inline-block;
    position: relative;
    vertical-align: top;
    color:rgba(55,71,79,1);
    width: 74px;
    height: 96px;
    margin: 12px 12px 0 0;
    text-align: center;
    font-size:12px;
    /* padding: 20px; */
    cursor: pointer;
    background:rgba(255,255,255,1);
    border-radius:9px;
    border:1px solid rgba(207,216,220,1);
  }
  .audio-chooseBox ul li,
  .audio-pushBox ul li{
    background-color: #ECF8FF !important;
  }
  
  .bm-container .audio-chooseBox ul li.selected,
  .bm-content .chooseBox ul li.selected,
  .bm-audio-content .audio-chooseBox ul li:hover,
  .bm-content .chooseBox ul li:hover {
    border:2px solid #0084FF !important;
    background:#FFFFFF !important;
    /* background: white; */
  }

  .bm-container .audio-chooseBox ul li.selected span,
  .bm-content .chooseBox ul li.selected span,
  .bm-audio-content .audio-chooseBox ul li:hover span,
  .bm-content .chooseBox ul li:hover span {
    color: #0084FF;
  }
  
  .bm-audio-content .audio-chooseBox,
  .bm-content .chooseBox {
    height: 100%;
  }
  .audio-pushBox ul li img,
  .pushBox ul li img,
  .bm-content .chooseBox ul li img,
  .bm-audio-content .audio-chooseBox ul li img {
    /* width: 80px; */
    height: 42px;
    /* max-width:62px; */
    /* margin-bottom: 2px; */
    display:block;
    margin:10px auto 12px auto;
  }
  .bmAudioTime{
    margin-bottom:8px;
  }
  .inBoxAry ul{
    margin-left:18px;
  }
  .audio-chooseBox ul, 
  .chooseBox ul {
    display: none;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-left:12px;
    padding-bottom:12px;
  }
  
  .bm-audio-content .audio-chooseBox ul.selected,
  .bm-content .chooseBox ul.selected {
    display: block;
  }
  
  .bm-container .audio-pushBox,
  .bm-container .pushBox {
    height: 170px;
    background: white;
    position: absolute;
    bottom: 0;
    left: 112px;
    right: 0;
    /* width: 100%; */
    /* background:rgba(236,239,241,1); */
    /* padding-left:10px; */
    z-index:100;
    border: none;
    border-top: 1px solid #BAD2F5;
    border-radius:0px 0px 9px 0px;
  }
  
  .audio-pushBox .pushBtnBox,
  .pushBox .pushBtnBox {
    /* width: 200px; */
    position: absolute;
    left:0;
    bottom:0;
    height:66px;
    width:100%;
    /* right: 0;
    height: 100%;
    display: inline-block; */
    /* border-top:1px solid #CFD8DC; */
  }
  
  .audio-pushBox .pushBtnBox button,
  .pushBox .pushBtnBox button {
    display: block;
    /* width: 115px; */
    font-size: 12px;
    /* height:40px; */
    border: 0px;
    font-weight: 600;
    border-radius: 24px;
    text-align: center;
    padding: 10px 40px;
    margin: 0;
    /* line-height: 40px; */
    position: absolute; 
    right: 0;
    color:#fff;
    /* margin-left:-57.5px; */
  }
  
  #onAddBtn, #audioAdd {
    background:#FF6C3E;
    bottom:12px;
    margin-right:18px;
    /* box-shadow:0px 3px 0px 0px rgba(215,67,20,0.4); */
  }
  
  #cancelBtn, #audioCancel {
    bottom: 12px;
    margin-right:160px;
    background:#9EBFD3;
    /* box-shadow:0px 3px 0px 0px rgba(38,50,56,0.6); */
  }
  
  .inBoxAry, .audio-inBoxAry {
    /* width: calc(100% - 200px); */
    /* display: inline-block; */
    height: 100%;
    overflow: auto;
  }
   
  .bm-audio-content .audio-pushBox ul li,
  .bm-content .pushBox ul li {
    background: none;
  }
  
  body #win-tools.showannotations #win-annotation .actions {
    display: none;
  }
  
  #bm-audio {
    padding: 6px;
    position: fixed;
    font-weight: 600;
    margin-top: -5px;
    margin-left: 181px;
    font-size: 14px;
    color: #333;
  }
  
  #bm-audio-voice.stop:before {
    content: "\e091";
    font-family: "icomoon";
  }
  
  #bm-audio-voice.play:before {
    content: "\e08d";
    font-family: "icomoon";
  }
  
  #win-tools.showannotations #win-annotation .stepBlock {
    height: calc(98% - 64px);
    padding: 0px 10px;
    overflow-y: auto;
  }
  
  #win-tools.showannotations #win-annotation .stepBlock .step-content {
    font-size: 14px;
    line-height: 22px;
  }
  
  #win-tools.showannotations #win-annotation .stepBlock .step-video {
      overflow:auto;
      margin: 0;
  }
  
  #win-tools.showannotations #win-annotation .stepBtn button {
    background-image: linear-gradient(#ffaa31, #fd9500);
    border: 1px solid #ffaa31;
    padding: 4px 12px;
    margin-top: 12px;
  }
  
  #win-tools.showannotations #win-annotation #stepPrev {
    margin-left: 12px;
  }
  
  #win-tools.showannotations #win-annotation .stepBtn #stepNext {
    position: absolute;
    right: 12px;
    background-image: linear-gradient(#9b9b9b, #828282);
    border: 1px solid #9b9b9b;
  }
  
  #win-tools.showannotations #win-annotation .stepBtn #stepNext.canClick {
    background-image: linear-gradient(#ffaa31, #fd9500);
    border: 1px solid #ffaa31;
  }
  
  #ide-header .complete a {
    cursor: pointer;
    height: 100%;
    display: inline-block;
    color: #aaa;
    text-align: center;
    font-weight: 400;
    padding: 0 15px;
    cursor: pointer;
    height: 100%;
    line-height: 45px;
  }
  
  #ide-header .complete.canComplete a {
    color: #fff;
    background-color: #f37f12;
  }
  
  
  #win-editor:not(.docked) #win-code.hastools .code {
    background: #fff;
  }
  
  #win-editor:not(.docked) #win-code .blockview {
    background: #fff;
  }
  
  #win-tools.showannotations .tutorialtabs {
    background: #f8f5f0;
  }
  
  #win-assets .background li,
  #win-assets .actors li {
    position: relative;
    /* background: #fff; */
    background-color: rgba(247,250,255,1);
    border-radius:4px;
    margin-right:12px; 
    /* margin-bottom:16px; */
    margin-top:12px;
    border:1px solid rgba(240,240,240,1);
  }
  
  #win-assets .background li.selected,
  #win-assets .actors li.selected {
    background-color: #FFFFFF;
    /* background:rgba(236,239,241,1); */
    /* border:2px solid #FF7043; */
    /* border: 2px solid rgba(0,132,255,1); */
    border: 2px solid #0084FF;
    /* border-radius: 20px; */
  }
  /* .looks-tab.icon-cog-2{
    display:none;
  } */
  #win-assets .actors li.selected .bmEdit span{
    /* background:rgba(255,87,34,1);
    color:#fff;
    height:18px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #0084FF;
  }
  #win-assets.strip .actors li .bmEdit span{
    color: #fff;
    font-size: 14px;
  }


  #win-assets .stage .edit{
    color:rgba(55,71,79,1);
    line-height:20px;
    padding-top:0;
  }
  #win-assets .stage.selected .edit{
    /* padding-top:0;
    background:rgba(255,87,34,1);
    color:#fff;
    height:18px; */
  }
  #win-assets .actors .middle img.main{
    max-height:50px;
  }
  #win-assets.actors:not(.strip) .actors-tab {
    /* background:#fff; */
    background-color: #F6FBFF;
    padding-left:16px;
  }
  
  #win-assets .background li.selected .edit span:after,
  #win-assets .actors li.selected .edit span:after {
    color: white;
  }
  
  #stage-buttons {
    /* background-color: #e0e0e0; */
    /* height: 92px; */
  
  }
  
#win-tools .palette .tools-code .blocks {
background-color: #fff5e5;
}

#win-tools.puzzle .palette .tools-code .blocks {
    top: 10px !important;  
}
  
  #win-assets.actors .actors-tab {
    box-shadow: none;
  }
  #stage-buttons #bm-addactor {
    font-size: 16px;
    margin-left: 8px;
    line-height: 20px;
    background: white;
    margin-top: 8px;
    padding-left: 10px;
    border-radius: 10px;
    color:#505050;
  }
  
  #win-assets .tab-content{
    margin-top: 0px;
    padding-top: 0px;
  }
  
  #win-tools .tutorialtabs a.blocks.active , 
  #win-tools .tutorialtabs a.costumes.active,
  #win-tools .tutorialtabs a.voices.active,
  #win-tools .palette .tools-code .categories .tabs .tab.active{
    background-color: #ea7257;
    border-color: #ea7257;
  }
  
  #win-tools .tutorialtabs a.voices, 
  #win-tools .tutorialtabs a.costumes, 
  #win-tools .tutorialtabs a.blocks,
  #win-tools .palette .tools-code .categories .tabs .tab{
    background-color: #e49d89;
    border-color: #e49d89;
  
  }
  #win-tools .palette .tools-code .categories,
  #win-tools.pin .palette .tools-code .categories ul,
  #win-tools .palette,
  #win-tools .toolsshow{
    background-color: #fff;
  }
  #win-tools.pin .palette .tools-code .categories ul{
    background:rgba(236,239,241,1);
  }
  #win-tools .tutorialtabs a.blocks.active,
  #win-tools .tutorialtabs a,
  #win-tools .palette .tools-code .categories .tabs .tab,
  #win-tools .palette .tools-code .categories .tabs .tab a.pin{
    color: #260404;
  }
  
  
  
  #win-tools .palette .tools-code .blocks h2{
    color: #0a0a0a;
  }
  
  .stepBlock pre{
    overflow: hidden;
    background-color: #555;
    box-shadow: inset 0px 0px 20px #000;
    border-radius: 10px;
    padding: 8px 16px;
    display: block;
    position: relative;
    margin-bottom: 7px;
  }
  
  .stepBlock pre img{
    max-width: 90%;
    max-height: 250px;
    cursor: pointer;
    float: none;
    display: block;
    margin-bottom: -18px;
  }
  
  .lead_play {
    display: inline-block;
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #36b670),color-stop(100%, #30a264));
    background-image: -moz-linear-gradient(#36b670,#30a264);
    background-image: -webkit-linear-gradient(#36b670,#30a264);
    background-image: linear-gradient(#36b670,#30a264);
    color: #fff;
    line-height: 34px;
    font-size: 14px;
    text-decoration: none;
    padding: 2px 20px;
    width: 100%;
    text-align: center;
  }
  
  .lead_play:before{
    content: "\e11e";
    font-size: 21px;
    font-family: "icomoon";
    vertical-align: top;
    margin-right: 8px;
  }
  
  .lead_play:hover{
    color: #fff;
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3fc67c),color-stop(100%, #36b670));
    background-image: -moz-linear-gradient(#3fc67c,#36b670);
    background-image: -webkit-linear-gradient(#3fc67c,#36b670);
    background-image: linear-gradient(#3fc67c,#36b670);
  }
  
  #bm-saveproj{
    width: 40%;
    padding: 20px;
    display: none;
  }
  
  .proj-title{
    font-size: 22px;
  }
  
  .proj-box{
    width: 60%;
    margin-left: 20%;
  }
  
  .proj-name{
    padding: 10px 0px;
  }
  
  .proj-name input{
    width: 100%;
    height: 30px;
  }
  
  .proj-content {
    padding: 10px 0px;
  }
  
  .proj-name p,.proj-content p {
    margin-bottom: 6px;
  }
  
  .proj-button button{
    display: inline-block;
    width: 30%;
    font-size: 20px;
    border: 0px;
    font-weight: 400;
    border-radius: 24px;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 36px;
  }
  
  .proj-save {
    float: right;
      background: #fb7b59;
      top: 34px;
  }
  
  .proj-cancel{
    float: left;
    color: #5f5f5f;
    background: #dedede;
    bottom: 34px;
  
  }
  .choice-chooser.guideAdd {
    font-size: 29px;
    line-height: 33px;
    width: 200px;
  }
  body .layui-layer-page .layui-layer-content {
    overflow: inherit;
  }
  body .tip_bg {
    background: rgba(0,0,0,0);
  }
  #bmProgress.newLoading{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #fff;
    z-index: 5000;
  }
  #bmProgress .newLoading img {
    width: 380px;
  }
  
  /* #bmProgress.newLoading > div {
      background-position: center center;
      background-repeat: no-repeat;
      position: absolute;
      font-size: 20pt;
      vertical-align: middle;
      text-align: center;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin-top: 0;
      margin-left: 0;
      background-image:url("/ide/imgs/loading/loading.gif")
  } */
  #bmProgress.newLoading .actor {
    /* background-position: top 40% center;
    background-repeat: no-repeat; */
    position: absolute;
    width: 100%;
    /* height: 100%; */
    max-width: 380px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* background-image: url('/ide/imgs/loading/loading.gif'); */
  }
  
  /* #bmProgress.newLoading .text {
    background-position: bottom 33% center;
    background-repeat: no-repeat;
    background-size: 40%;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('/ide/imgs/loading/loadText.gif');
  } */
  
  #win-tools .palette .tools-code .categories ul li {
      width: 45px;
      font-size: 12px;
      /* margin: 5px; */
  }
  
  #win-tools .palette .tools-code .categories ul {
      /* width: 60px; */
      display: inherit;
      padding-bottom:10px;
  }
  
  #win-tools {
      width: 260px;
  }
  #win-tools .palette .tools-code.hassearch .blocks {
      width: initial !important;
      display: inline-block;
      top: 0;
      left: 44px;
      background:#fff;
      height: 100%;
      overflow: auto;
      /* border-right:1px solid rgba(207,216,220,1); */
  }
  
  #win-tools .palette .tools-code.hascat .categories {
      border-right:1px solid rgba(207,216,220,1);
      display: inline-block;
      height:100%;
      width:45px;
      overflow: auto;
      background:rgba(236,239,241,1);
  }
  
  #win-code.hastools .code {
      left: 260px;
  }
  #win-code.mintools .code {
      left: 0px;
  }
  .showActor img {
      position: absolute;
      top: 1.25rem;
      pointer-events: none;
      right: 1.25rem;
      user-select: none;
      opacity: 0.5;
      z-index: 1;
  }
  
  .showActor .actor {
      max-width: 48px;
      max-height: 48px;
  }

  .showActor .box {
      max-width: 56px;
      max-height: 56px;
  }
  
  #control-canvas {
      background-color: #e0e0e0;
  } 
  
  #control-canvas a {
      float: right;
      line-height: 34px;
      padding-right: 10px;
      font-size: 24px;
      color: #9d9c9c;
  }
  
  /* .icon-full-screen:before {
      content: "\e049";
  }
  
  .icon-half-screen:before {
      font-family: 'icomoon';
      content: "\e049";
  }
  
  .icon-min-screen:before {
      font-family: 'icomoon';
      content: "\e049";
  } */
  
  a#stagecmd-run{
      float: left;
      background-image: linear-gradient(#36b670,#30a264);
      color: #fff;
      line-height: 34px;
      margin-left: 0px;
      font-size: 14px;
      width: 100px;
      text-align: center;
  }

  a#stagecmd-stop {
      float: left;
      background-image: linear-gradient(#d7431e,#c13c1b);    
      color: #fff;
      line-height: 34px;
      margin-left: 0px;
      font-size: 14px;
      width: 100px;
      text-align: center;
  }
  
  #stage-resize-handle {
      display: none;
  }
  
  #stage-buttons .pointerpos {
      float: left;
      /* position: absolute; */
      /* right:178px; */
      /* margin:0 auto; */
      margin-top:4px;
      font-size:12px;
      color:rgba(96,125,139,1);
  }
  
  .actor-info label {
      float: left;
  }
  .actor-info label:nth-child(n+2) {
      margin-left: 5px;
  }
  .actor-info {
      position: absolute;
      margin-top: 34px
  }
  
  /* IDE改版样式 */
  .center{
    -webkit-display:flex;
    -moz-display:flex;
    -o-display:flex;
    -ms-display:flex;
    display: flex;
  
    -webkit-justify-content:center;
    -moz-justify-content:center;
    -o-justify-content:center;
    -ms-justify-content:center;
    justify-content: center;
  
    
    -webkit-align-items:center;
    -moz-align-items:center;
    -o-align-items:center;
    -ms-align-items:center;
    align-items: center;
  }
  /* 头部样式 */
  #ide-header{
    position: relative;
  }
  #ide-header .tutorialtabs{
    position: absolute;
    bottom:0;
    left:10px;
    background-color: #F6FBFF;
    border-top-right-radius: 9px;
    border-top-left-radius: 9px;
    border: 1px solid #bad2f4;
  }
  #ide-header .tutorialtabs .img_a_par{
    float:left;
    width:90px;
    height:50px;
    line-height:40px;
    color: #86B1F1;
    /* background:#E5EAEC;
    border-radius:15px 15px 0px 0px;
    color:rgba(96,125,128,1);
    border-right:1px solid rgba(207,216,220,1);
    border-top:1px solid rgba(207,216,220,1); */
  }
  #ide-header .tutorialtabs .img_a_par .text{
    line-height: 12px;
  }
  #ide-header .tutorialtabs .img_a_par  .tab-active{
    border: none;
    height: 3px;
    width: 25px;
    background-color: #2F9BFF;
    display: none;
    position: absolute;
    top: 75%;
    left: 35%;
    border-radius: 40px;
  }
  .projectName{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    font-size:12px;
    font-weight:800;
    color:rgba(96,125,139,1);
    line-height:58px;
    width:120px;
    text-align: center;
    border:1px solid rgba(207,216,220,1);
    border-radius: 50px;
    height:30px;
    line-height:28px;
    text-align:center;
  }
  .projectName:hover{
    /* border:0; */
  }
  .projectName .proNameTxt{
      text-overflow:ellipsis;
      display:block;
      width:118px;
      height:100%;
      float:left;
      border:0;
      /* background:#ECEFF1; */
      text-align:center;
      /* border:1px solid rgba(207,216,220,1); */
      border-radius: 50px;
      color:#607D8B; 
  }
  .projectName .proNameTxt:hover{
    border:0;
    background:rgba(236,239,241,1);
    /* border-bottom:1px solid #ccc; */
  }
  
  .projectName .imgBg{
    position: absolute;
    display:block;
    /* float:left; */
    /* margin-top:5px; */
    width:18px;
    height:18px;
    background:url("../img/ui/proName.png") no-repeat center center;
    background-size:100% 100%;
    right:5px;
    top:4px;
  }
  .img_a_par .imgBg{
    display:block;
    float:left;
    /* width:18px;
    height:18px; */
  }
  #ide-header .tutorialtabs a{
      padding-top: 3px;
      width: 100%;
      height: 100%;
      position: relative;
      display:block;
      font-size:18px;
      float:left;
      color: #426292;
      text-align: center;
      /* display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
      -webkit-justify-content: center;
      -o-justify-content: center;
      -moz-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
      -o-align-items: center;
      -moz-align-items: center; */
  }
  #ide-header .tutorialtabs .imgBg{
    margin:12px 4px 0 20px;
  }
  /* #ide-header .img_a_par:first-child{
    border-left:1px solid rgba(207,216,220,1);
  } */
  #ide-header .img_a_par.active > a, #ide-header .img_a_par.canClick:hover >a{
    color: #2F9BFF !important;
    /* background:#ffffff; */
    /* border-left:1px solid rgba(207,216,220,1); */
    /* border-top:1px solid rgba(207,216,220,1); */
    /* border-right:1px solid rgba(207,216,220,1); */
    /* border-radius:9px 9px 0px 0px; */
  }
  #ide-header .img_a_par.active .tab-active, #ide-header .img_a_par.canClick:hover .tab-active{
    display: block !important;
  }
  /* 舞台区 */
  #win-stage{
      border-radius:9px;
      /* border: 1px solid #bad2f4; */
      /* background:rgba(247,247,247,1); */
      /* border:1px solid rgba(207,216,220,1); */
      z-index:501;
  }
  #stage-canvas{
    margin:0 auto;  
    /* border:1px solid rgba(207,216,220,1);
    border-radius:8px; */
    /* border:1px solid #A6BDD9; */
    /* border-radius: 15px; */
  }
  #stage-canvas canvas{
    /* border-radius:8px; */
  }
  .stage_left{
    float:right;
    margin-top:7px;
  }
  #stage-buttons{
    /* position: fixed; */
    right:10px;
    top:0;
    /* height:60px; */
    height: 48px;
    line-height:40px;
    background-color: #F6FBFF;
    /* background:rgba(247,247,247,1); */
    z-index:501;
  }
  #player-button{
    width: 100%;
    position: absolute;
    top: -48px;
    /* height:60px; */
    height: 48px;
    line-height:40px;
    background-color: #FFFFFF;
    /* background:rgba(247,247,247,1); */
    z-index:501;
  }
  .winStageTop{
    top: 48px !important;
  }
  .winStageScale{
    /* scale: 0.88 !important; */
    transform: scale(0.88) !important;
  }
  .winStageBorder{
    border: none !important;
  }
  #stage-buttons.minScreenSty a.stagecmd-run {
    left: 5px;
  }
  #stage-buttons.minScreenSty a.stagecmd-run,
  #stage-buttons.minScreenSty a.stagecmd-stop,
  #stage-buttons.minScreenSty .submitBtnBox,
  #stage-buttons.minScreenSty .submitProductBtn{
    width:26px;
    border-radius: 50px;
  }
  #stage-buttons.minScreenSty .runConBtn,#stage-buttons.minScreenSty .submitBtn{
    width:26px;
  }
  #stage-buttons.minScreenSty .icon-play{
    margin-left:9px;
  }
  #stage-buttons.minScreenSty .icon-stop{
    margin-left:8px;
  }
  #stage-buttons.minScreenSty .submitBtnBox{
    left:34px;
  }
  #stage-buttons.minScreenSty .submitProductBtn{
    left:34px;
  }
  #stage-buttons.minScreenSty .subImg{
    margin-left:6px;
  }
  #stage-buttons.minScreenSty .playFont{
    display:none;
  }
  .playFont{
    /* float:left; */
  }
  #stage-buttons a.stagecmd-run,#stage-buttons a.stagecmd-stop,.submitBtnBox, .submitProductBtn{
    position: absolute;
    left:0;
    width:85px;
    height:30px;
    background:#fff;
    border-radius:50px;
    /* box-shadow:2px 2px 0px 0px rgba(38,50,56,0.04); */
    /* margin-right:8px; */
    /* margin-top:18px; */
    margin-top: 8px;
    line-height:30px;
    border:1px solid rgba(207,216,220,1);
    font-size:13px;
    font-weight:400;
    float:left;
    color:#fff;
    cursor: pointer;
  }
  #stage-buttons a.stagecmd-run{
    left: 26px;
    box-shadow: none;
    border: none;
    background: rgba(255,112,67,1);
  }
  #stage-buttons a.stagecmd-run p,
  #stage-buttons .submitProductBtn p{
    font-size: 14px;
    font-weight:400;
  }
  #stage-buttons .submitBtnBox{
    left:70px;
    display: none;
  }
  .runConBtn,.submitBtn{
    width:71px;
    height:24px;
    background:rgba(255,112,67,1);
    border-radius: 30px;
  }
  .runConBtn{
    background: #FF6C3E !important;
    text-align: center;
    width: 85px;
    height: 30px;
    line-height: 30px;
  }
  .submitBtn img{
     width:14px;
     float:left;
     margin-right:2px;
     margin-left:10px;
     margin-top:6px;
  }
  .submitProductBtn{
    display: none;
    left: 120px;
    font-size: 14px;
    font-weight:400;
    background: #188BF6;
  }
  .projectName span{
    display:block;
    float:left;
  }
  .headerMainUl{
    position: absolute;
    right:0;
    top:0;
    height:100%;
  }
  .headerMainUl li{
     height:100%;
     line-height:58px;
     float:left;
     /* width:110px; */
     font-size:14px;
     color:#E67857;
     padding:0 10px;
  }
  .headerMainUl li:last-child{
    margin-right:10px;
  }
  .headerMainUl li img{
    display:block;
    float:left;
    margin-left:15px;
    margin-right:5px;
    width:14px;
    height:14px;
  }
  .headerMainUl li span{
    display:block;
    float:left;
  }
  .header-wrapper li .imgBg{
    width:18px;
    display:block;
    height:18px;
    margin:20px 5px 0 0;
  }
  .headerMainUl li:hover{
     color:#EB5C2E;
  }
  /* #win-stage .stage_left .state-icon-panel.active{
    background-color: rgba(215,224,234,1);
  } */
  #win-stage .stage_left .state-icon-panel{
      width:30px;
      height:30px;
      /* margin-right:-4px; */
      margin-top:3px;
      border: 1px solid rgba(198,205,214,1);
      border-radius: 10px;
      /* background-color:#ECEFF1; */
      background-color: #ffffff;
      display: inline-block;
      margin-right: 7px;
  }
  /* #win-stage .stage_left .state-icon-panel > a{
    width: 14px;
    height: 14px;
  } */
  #win-stage .stage_left .state-icon-panel.no-right-border{
    margin-right: 0;
    border-right: none;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
  }
  #win-stage .stage_left a#stagecmd-grid{
    margin-right:4px;
    /* margin-left: 13px; */
  }
  .stage_left a:hover{
    border:0;
    border-left:0;
    border-right:0;
    background-color:rgba(38,50,56,0.1) !important;
    /* width:18px; */
  }
  .stage_left a:active{
    background-color:rgba(38,50,56,0.2) !important;
    /* width:18px; */
  }
  /* #stagecmd-minmax{
    margin-left:8px;
  } */
/* 角色区
*/
#win-assets{
    /* background:#fff; */
    /* background-color: #E5F0FE; */
    background-color: #F6FBFF;
    border-radius: 9px;
    /* border-radius:20px; */
    padding-bottom:60px;
    bottom: 10px;
    /* border:1px solid rgba(207,216,220,1); */
    border: 1px solid #BAD2F5;
}
#win-assets.strip{
    border:none;
    border-radius:0;
}
   .assets_pro_box{
     position: relative;
     height:42px;
     border-bottom:1px solid rgba(207,216,220,1);
     overflow: hidden;
     font-size:14px;
     background-color: #FFFFFF;
     /* margin-bottom:10px; */
     /* background:rgba(247,248,249,1); */
     /* overflow: auto; */
   }
   .assets_imgBox{
     /* width:55px; */
     width:10%;
     height:100%;
     float:left;
   }
   .li_box{
     width:90%;
     /* margin-left:55px; */
     float:left;
   }
   .assets_pro_box li{
     float:left;
     width:33%;
     margin-top:6px;
     color:#98AAB3;
     position: relative;
     /* min-width:100px; */
   }
   .assets_pro_box li.assets_name{
     width:40%;
     /* min-width:100px; */
   }
   .assets_pro_box li input{
     background-color: #EEF7FE !important;
   }
   .assets_pro_box li.assets_x{
     width:30%;
  }
  .assets_pro_box li.assets_y{
     width:30%;
  }
   .assets_pro_box li.assets_direc input{
     /* width:50%; */
   }
   .assets_pro_box li.assets_direc span{
     top:-2px;
   }
   .assets_pro_box li.assets_direc{
     line-height:30px;
     /* width:50%; */
   }
   .assets_pro_box li.assets_font{
     width:40%;
   }
   .assets_pro_box li span{
     position: absolute;
     top:6px;
     right:20%;
     display:block;
     font-size:12px;
     /* height:100%; */
     /* line-height:55px; */
     float:left;
     /* width:30%; */
     /* text-align:center; */
     /* line-height:30px; */
     /* margin-right:8px; */
   }
   .assets_pro_box li input{
    font-size:12px;
    height:29px;
    /* background:rgba(255,255,255,1); */
    border-radius:100px;
    border:0;
    float:left;
    line-height:29px;
    width:90%;
    margin:0 auto;
    color:#2C415E;
    border: 1px solid #BAD2F5;
    /* border:1px solid rgba(207,216,220,1); */
    /* margin-top:12px; */
    /* padding-left:10px; */
   }
   
   .bmEdit span, #win-assets .actors .edit, .bmEdit input{
     display:block;
     height:20px;
     position: absolute;
     bottom:0;
     left:0;
     line-height:20px;
     text-align:center;
     width:100%;
     font-size:12px;
   }
   .assets_pro_box.expandUl{
     height:81px;
   }
   /* 编辑区
    */
  #win-editor{
    background:rgba(255,255,255,1);
    border-radius:0px 0px 9px 9px;
    border:1px solid #bad2f4;
    border-top: none;
    z-index:510;
  }
  #win-editor.docked{
    border:none;
  }
  #win-tools{
    z-index:501;
  }
  #win-tools .palette{
     background:#fff;
  }
  #win-tools .palette .tools-code .categories{
    background:#fff;
    width:45px;
  }
  #win-tools .palette .tools-code .categories ul li{
    height:45px;
    font-size:12px;
    color:#666;
    text-align:center;
    margin-bottom:-2px;
    /* margin-left:1px; */
    
  }
  #win-tools .palette .tools-code .categories ul li .cirColor{
    width:14px;
    height:14px;
    border-radius:50px;
    margin:6px auto;
    background:rgba(247,79,32,1);
  }

  #win-tools .palette .tools-code .categories ul li img{
    max-width: 14px;
    max-height: 14px;
    border-radius:50px;
    margin:6px auto;
  }
  #win-tools .palette .tools-code .categories ul .events .cirColor{
    background:#FFCF3D;
  }
  #win-tools .palette .tools-code .categories ul .animation .cirColor{
      background:#3CD8FF;
  }
  #win-tools .palette .tools-code .categories ul .flow .cirColor{
     background:#FF7E3D;
      /* border-left:6px solid #db5800 */
  }
  #win-tools .palette .tools-code .categories ul .motion .cirColor{
    background:#3D75FE;
  }
  #win-tools .palette .tools-code .categories ul .looks .cirColor{
    background:#38B642;
  }
  
  #win-tools .palette .tools-code .categories ul .sensing .cirColor{
    background:#26E349;
  }
  
  #win-tools .palette .tools-code .categories ul .sound .cirColor{
    background:#925CFF;
  }

  #win-tools .palette .tools-code .categories ul .music .cirColor{
    background:#22CC9C;
  }
  
  #win-tools .palette .tools-code .categories ul .operator .cirColor{
    background:#E25AFF;
  }
  
  #win-tools .palette .tools-code .categories ul .pen .cirColor{
    background:#22CC9C;
  }
  
  #win-tools .palette .tools-code .categories ul .physics .cirColor{
    background:#F9423E;
  }
  #win-tools .palette .tools-code .categories ul .ar .cirColor{
    background:#3236C1;
  }
  #win-tools .palette .tools-code .categories ul .variables .cirColor{
    background:#47AB9E;
  }
  
  #win-tools .palette .tools-code .categories ul .functions .cirColor{
    background:#FF6680;
  }
  #win-tools .palette .tools-code .categories ul li.selected{
    /* background:rgb(255, 255, 255); */
    /* border-left:3px solid #F74F20; */
    /* border:1px solid rgba(207,216,220,1); */
    background-color: #D2E5FB;
    border-bottom:1px solid rgba(207,216,220,1);
    border-left: 3px solid #0084FF;
    /* border-top:1px solid rgba(207,216,220,1); */
  }
  #win-tools .palette .tools-code .categories ul li.selected:nth-child(2){
    /* background-color:#F4F5F6; */
    /* border-left:3px solid #F74F20; */
    /* border-bottom:1px solid #FFCCBC; */
    border-top:0;
  }
  #win-tools .palette .tools-code .categories ul li:hover{
    /* background-color:#F4F5F6; */
    /* border-left:3px solid #F74F20; */
    /* border-bottom:1px solid #FFCCBC;
    border-top:1px solid #FFCCBC; */
  }
  #win-assets .tab-content li.addactor {
      display: inline-block;
      position: relative;
  }

  #win-assets .tab-content li.addactor .addactor-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(45, 50, 59, 0.7);
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    display: none;
  }

  #win-assets .tab-content li.addactor:hover .addactor-hover{
    display: flex;
  }

  #win-assets .tab-content li.addactor .addactor-hover .hover-item {
    width: 60px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 6px;
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    color: #2C415E;
  }

  #win-assets .tab-content li.addactor .addactor-hover .hover-one:hover{
    background: #EEF7FE;
  }

  #win-assets .tab-content li.addactor .addactor-hover .hover-two:hover{
    background: #EEF7FE;
  }

  #win-assets .tab-content li .middle {
    height:46px;
    width: 100% !important;
  }
  #win-tools .toolsshow{
    width:12px;
    height:45px;
    background:rgba(207,216,220,1);
    border-radius:0px 8px 8px 0px;
    opacity:0.8;
    border:0;
    margin-top:-20px;
    right:-12px;
  }
  #win-tools .toolsshow:after{
    font-size:5px;
    margin-top:-5px;
    left:-2px;
    color:#fff
  }
  #win-code.mintools #win-tools a.toolsshow:after{
    left:0;
  }
  #win-assets .tab-content li.addactor {
      display: inline-block;
  }
  
  .assets_pro_box input[disabled]:hover {
      background-color: #ddd;
  }
  
  #win-paint {
      left: 140px;
      right: 440px;
      top:68px;
      bottom:10px;
  }
  #win-paint .tool-options>div {
      padding: 0;
      border: 0;
      margin-left: 1px;
  }
  #win-costumes {
      /* position: static;
      top: 64px;
      left: 10px;
      width: 830px;
      height: 536px; */
  }
  #win-costumes #costumes,#win-voices .voicesLeft{
      position: absolute;
      top: 68px;
      left: 10px;
      bottom: 127px;
      width:130px;
      background: #FFFFFF;
      /* width: 159px;
      height: 601px; */
      /* background: rgba(248,248,248,1); */
      border-radius: 0px 0px 0px 8px;
      /* border:1px solid rgba(216,216,216,1); */
      border-left:1px solid rgba(207,216,220,1);
      /* border-top:1px solid rgba(207,216,220,1); */
      border-bottom:1px solid rgba(207,216,220,1);
      cursor: pointer;
      overflow: auto;
  }
  .voicesRight{
    position: absolute;
    left:140px;
    bottom:10px;
    top:58px;
    border:1px solid rgba(207,216,220,1);
    border-radius:0 8px 8px 0; 
  }
  /* .editorLeftSib .costume, #addCostume { */
  .editorLeftSib .costume {
      position: relative;
      margin: 5px 10px 15px;
      width:105px;
      height:127px;
      /* background:rgba(255,255,255,1); */
      border-radius:15px;
      /* border:6px solid rgba(255,201,192,1); */
      border:1px solid rgba(207,216,220,1);
      background-color: #ECF8FF;
  }
  .editorLeftSib .costume .costume-id{
    margin: 7px 0 0 7px;
    color: #0084FF;
  }
  .editorLeftSib .costume.select .costume-id{
    margin-top: 5px;
  }
  
  #win-costumes #costumes .costume .costume-img {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
      /* width:128px;
      height:127px;
      background:rgba(255,255,255,1);
      border-radius:4px;
      border:6px solid rgba(255,201,192,1); */
  }
  .editorLeftSib .costume .costume-name {
      position: absolute;
      left:0;
      bottom:0;
      width:124px;
      height:30px;
      /* background:rgba(180,180,180,1); */
      border-radius:0px 0px 2px 2px;
      line-height:30px;
      text-align:center;
      width:100%;
      color:rgba(55,71,79,1);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  .editorLeftSib .costume .costume-close {
      height:20px;
      width: 20px;
      position: absolute;
      top: 5px;
      right: 8px;
      display:none;
      /* background: rgba(247,79,32,1); */
  }
  .editorLeftSib .costume.light .costume-close{
    display:block;
  }
  .editorLeftSib .costume.light .costume-name{
    background:rgba(255,87,34,1);
  }
  .editorLeftSib .costume.light{
    border:2px solid rgba(255,87,34,1);
  }
  #win-costumes #costumes #saveCostume {
      position: relative;
      /* left: 10px; */
      width:105px;
      height:30px;
      background:#339DFF;
      border-radius:100px;
      font-size:12px;
      color:rgba(255,255,255,1);
      line-height:30px;
      text-align: center;
      margin:18px auto 12px auto;
      cursor: pointer;
      box-shadow:0px 3px 0px 0px rgba(215,67,20,0.4);
  }
  #win-paint .tools li.selected{
    border: 3px solid #0084FF !important;
  }
  
  .visHidden, .fullHidden {
      /* visibility:hidden !important;     */
      display:none !important;
  }
  
  .editorLeftSib .costume-img img {
      width: 41px;
      height: 43px;
      max-height: 60px;
      max-width: 80px;
      margin: 22px auto 0px;
      display: block;
  }
  
  #win-costumes #costumes .costume.select .costume-img {
      /* background: rgba(255,201,192,1); */
  }
  .editorLeftSib .costume.select{
    background-color: #FFFFFF;
    border: 3px solid #0084FF;
  }
  .editorLeftSib .costume.select .costume-name{
    /* background:rgba(255,87,34,1); */
  }
  .editorLeftSib  #addCostume span{
      display:block;
      text-align:center;
      color:rgba(84,110,122,1);
  }
  #win-paint{
    border:1px solid rgba(207,216,220,1);
    border-top: none;
    border-radius:0 0px 9px 0; 
  }
  .voicesRight{
    background:#fff;
  }
  .audioTime{
    margin-top:10px;
    text-align:center;
    color:#666;
    font-size:12px;
  }
  .selectImg, .selectAudio{
    /* margin-top:22px; */
    font-size:12px;
    margin-left:14px;
    /* border-left:4px solid #546E7A; */
    padding-left:5px;
    color:rgba(96,125,128,1);
    /* margin-bottom:16px; */
    line-height:66px;
  }
  
  .audio-pushBox .audio-inBoxAry ul li,
  .pushBox .inBoxAry ul li{
    background:#fff;
  }
  
  .sibDialog{
    position: fixed;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.7);
    left:0;
    top:0;
    z-index:4998;
  }
  .helpPage{
    position: absolute;
    left:50%;
    top:50%;
    width: 60%;
    max-height: 100%;
    /* max-height: 80%; */
    border-radius:15px;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .knowBtnHelp{
    position: absolute;
    bottom: -22px;
    left:50%;
    width:180px;
    height:45px;
    line-height:45px;
    text-align:center;
    transform: translateX(-50%);
    /* padding:5px 28px; */
    background:rgba(255,112,67,1);
    box-shadow:0px 3px 0px 0px rgba(215,67,20,0.8);
    border-radius:23px;
    font-size:18px;
    font-weight:600;
    color:#fff;
    letter-spacing: 2px;
    cursor: pointer;
  }
  .titleDialog{
    position: relative;
    background:#0084FF;
    height:51px;
    line-height:51px;
    /* padding-left:14px; */
    text-align:center;
    font-size:18px;
    color:#fff;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    text-shadow:2px 2px 0px rgba(222,44,0,0.1);
    font-weight:400;
    box-shadow:0px 5px 0px 0px rgba(38,50,56,0.04);
  }
  .closeDialog{
    position: absolute;
    /* width: 38px;
    height: 38px; */
    width: 28px;
    height: 28px;
    /* mask: url(../img/ui/cloVideo.png) no-repeat;
    -webkit-mask: url(../img/ui/cloVideo.png) no-repeat;
    -moz-mask:url(../img/ui/cloVideo.png) no-repeat;
    -o-mask: url(../img/ui/cloVideo.png) no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    -moz-mask-size: 100% 100%;
    -o-mask-size: 100% 100%;
    background-color: #FFFFFF; */
    background: url(../img/ui/cloVideo.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .helpPage .close:hover{
    opacity: 0.8;
  }
  .helpCon{
    overflow:hidden;
    color:#333;
    position: relative;
  }
  .helpCon .content{
    font-size:18px;
    /* padding:5px 0; */
    color:#263238;
    line-height:30px;
    margin-top:10px;
  }
  .helpCon img{
    /* width:100%; */
    border-radius: 6px;
  }
  .submitAnsCon{
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-260px;
    margin-top:-140px;
    width:480px;
    height:280px;
    background:#fff;
    border-radius: 6px;
    font-size:14px;
  }
  .fontCon{
    text-align:center;
    margin-top:24px;
    margin-bottom:35px;
    color:#333;
  }
  .redCon{
    color:#F74F20;
    text-align:center;
  }
  .btnStyle{
    width: 115px;
    font-size: 14px;
    height:40px;
    border-radius: 24px;
    text-align: center;
    line-height: 40px;
    position: absolute; 
    background:rgba(247,79,32,1);
    color:#fff;
    bottom:40px;
    cursor: pointer;
  }
  .btnStyle:hover{
    opacity: 0.8;
  }
  .btnStyle:hover{
    opacity: 0.9;
  }
  .btnSave{
    left:86px;
  }
  .btnCancel{
    right:86px;
    background:rgba(147,146,146,1);
  }
  .saveSuccessInfo{
    position: fixed;
    /* width:160px;
    height:50px; */
    left:50%;
    top:50%;
    /* margin-left:-80px;
    margin-top:-25px; */
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    /* background:url("../img/ui/save.png") no-repeat center center; */
    /* background-size:100% 100%; */
    z-index:4999;
    /* line-height:45px; */
    text-align:center;
    color:#fff;
    font-size:12px;
    background:rgba(38,50,56,0.76);
    box-shadow:0px 4px 8px 0px rgba(38,50,56,0.08);
    border-radius:12px;
  }
  .saveSuccessInfo img{
    width:20px;
    margin:0 auto;
    padding-top:18px;
    padding-bottom:8px;
  }
  .saveSuccessInfo p{
    padding:0 40px 20px 40px;
    line-height: 20px;
  }
  #win-code.mintools #win-tools{
    width:0;
  }
  .bm-audio-content .audio-chooseBox ul,.audio-inBoxAry ul{
    /* margin-left:40px; */
  }
  .bm-audio-content .audio-chooseBox{
    margin-top:12px;
  }
  .bm-audio-content .audio-chooseBox ul li,.audio-pushBox .audio-inBoxAry ul li{
    position: relative;
    width:74px;
    height:96px;
    border:1px solid rgba(207,216,220,1);
    margin:0 12px 12px 0;
  }
  .bm-audio-content .audio-chooseBox ul li img,.audio-pushBox ul li img{
    width:16px;
    height:16px;
    margin-top:20px;
  }
  .audio-inBoxAry{
    margin:18px 0 12px 12px;
  }
  .bm-audio-content .audio-chooseBox ul li .audioLiSelect,.bm-content .chooseBox ul li img.audioLiSelect{
    display:none;
  }
  .bm-audio-content .audio-chooseBox ul li.selected .audioLiSelect,.bm-content .chooseBox ul li.selected img.audioLiSelect{
    display:block;
  }
  .bm-audio-content .audio-chooseBox ul li .audioLiSelect,.bm-content .chooseBox ul li .audioLiSelect{
    position: absolute;
    right:6px;
    top:6px;
    width:14px;
    height:14px;
    margin-top:0;
  }
  .audio-pushBox .audio-inBoxAry li .audioLiSelect,.bm-container .pushBox .inBoxAry ul li img.audioLiSelect{
    display:none;
  }
  /* .audio-pushBox .audio-inBoxAry li.selected .audioLiSelect{
    display:block;
  } */
  .audio-pushBox .audio-inBoxAry li:hover,
  .audio-pushBox .audio-inBoxAry li:active{
    background-color: #ECF8FF;
    border: 2px solid #0084FF !important;
    /* border:2px solid rgba(255,112,67,1); */
  }
  /* .audio-pushBox .audio-inBoxAry li:active{
    background:rgba(236,239,241,1);
    border:2px solid rgba(255,112,67,1);
  } */
  /*
   引导样式 
  
  */
  .twoHidden{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .hoverBtn:hover{
    opacity: 0.9;
  }
  .hoverBtn:active{
    opacity: 0.7;
  }
  .hidden{
    display:none !important;
  }
  .guideDialog{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:5999;
    color:#fff;
  }
  .guideCon{
    position: fixed;
    left:0;
    bottom:0;
    height:135px;
    width:100%;
    background:rgba(38,50,56,0.84);
    font-size:28px;
    z-index:5999;
    color:#fff;
    box-shadow:0px -6px 0px 0px rgba(38,50,56,0.08);
    border-top:2px solid #607D8B;
  }
  .guideCen{
   position: relative;
   width:60%;
   height:100%;
   line-height:30px;
   /* text-align:center; */
   margin:0 auto;
   font-size:18px;
  }
  .perleft,.nextImg,.audioBg,.perright{
    position: absolute;
  }
  .guide_fontCon,.fontConAni{
    width:80%;
    /* height:100%; */
    margin:0 auto;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    /* text-align:center; */
  }
  .perleft{
    left:-250px;
    bottom:0px;
    width:250px;
  }
  .perright{
    right:-250px;
    bottom:0px;
    width:250px;
  }
  .nextImg{
    right:-10px;
    bottom:20px;
    width:45px;
    height:45px;
    background:url("../img/ui/next1.png") no-repeat center center;
    background-size:100% 100%;
    animation:myBackground 0.4s infinite;
    -webkit-animation:myBackground 0.4s infinite;
    -o-animation:myBackground 0.4s infinite;
    -moz-animation:myBackground 0.4s infinite;
  }
  @keyframes myBackground{
    from { 
      background:url("../img/ui/next1.png") no-repeat center center;
      background-size: cover
    }
    to { 
      background:url("../img/ui/next2.png") no-repeat center center;
      background-size: cover
    }
  }
  .audioBg{
    left:-10px;
    top:20px;
    width:30px;
    height:30px;
    background:url("../img/ui/audio1.png") no-repeat center center;
    background-size:100% 100%;
  }
  .audioBg:hover{
    background:url("../img/ui/audio1_hover.png") no-repeat center center;
    background-size:100% 100%;
  }
  .audioBg:active{
    background:url("../img/ui/audio1_active.png") no-repeat center center;
    background-size:100% 100%;
  }
  #win-tools .deletemask span {
      margin-left: 45%;
      background: url(../img/ui/deleteBlock.png) no-repeat center center;
      width: 54px;
      height: 70px;
  }
  
  /* 视频相关 */
  .psVideo{
      /* width: 720px; */
      width:60%;
      min-height:100px;
      /* height: 400px; */
      position: absolute;
      /* margin:  0 auto; */
      text-align: center;
      transition: all .5s;
      overflow: hidden;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      min-width:720px;
      border-radius: 9px;
      /* max-width:960px; */
  }
  
  .my-psVideo{
      position: relative;
      margin: 60px auto 0;
      width: 100%;
      /* height: 560px; */
      cursor: pointer;
      transition: all .5s;
      background: black;
  }
  .controlPlay {
      /* display: inline-block; */
      float:left;
      width: 30px;
      height: 30px;
      margin: -6px 10px;
      /* background-color:green; */
  }
  .videoTimeBx{
    float:left;
    font-size:12px;
    line-height:20px;
    font-family:ArialMT;
  }
  .full{
      margin: 0 auto;
      width: 100%;
      height: 100%;
      background: black;
      border-radius: 0 !important;
  }
  .psVideo-play-one{
      width: 70px;
      height: 70px;
      background: url("../player/playone.png") no-repeat;
      opacity: .7;
      background-size:cover;
      position: absolute;
      bottom: 70px;
      right: 60px;
      cursor: pointer;
  }
  
  .psVideo-play-top{
    background:rgba(255,120,78,1);
      position: absolute;
      width: 100%;
      height: 60px;
      /* top: 26px; */
      line-height:60px;
      z-index: 1;
      border-radius: 9px 9px 0 0;
  }
  .videoHeaTitle{
    font-size:24px;
    font-weight:bold;
    color:rgba(255,255,255,1);
    text-shadow:2px 2px 0px rgba(222,44,0,0.1);
  }
  /* .psVideo-play-top div{
      width: 56px;
      height: 36px;
      float: right;
      margin-left: 33px;
  } */
  .heaSibStyle{
    position: absolute;
    top:8px;
    width: 45px;
    height: 45px;
  }
  
  .psVideo-play-top .reset{
    right:47px;
  }
  .psVideo-play-top .bypass{
    right:30px;
  }
  .psVideo-play-footer{
      position: absolute;
      width: 100%;
      height: 36px;
      bottom: 0;
  }
  .psVideo-shade{
      position: absolute;
      height: 75px;
      width: 100%;
      bottom: 0px;
      /* background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6)); */
      transition: opacity .3s;
      /* background: rgba(7,7,7,0.6); */
      background:linear-gradient(180deg,rgba(38,50,56,0) 0%,rgba(38,50,56,1) 100%);
  }
  .psVideo-shade-full{
      bottom: 0;
  }
  .psVideo-shade-on{
      opacity: 1;
  }
  .psVideo-shade-off{
      opacity: 0;
  }
  .psVideo-play-footer .psVideo-play-btn{
      width: 30px;
      height: 30px;
      float: left;
      margin-left: 3%;
      margin-top: -5px;
      cursor: pointer;
      z-index: 3;
  }
  
  
  .psVideo-time{
      float: left;
      /* display: inline-block; */
      font-size: 15px;
      line-height: 23px;
      color: white;
      margin-left: 14px;
      z-index: 2;
  }
  .psVideo-dan{
      position: absolute;
      margin-left: 230px;
      margin-top: -1px;
      z-index: 10;
      transition: all .5s;
  }
  .psVideo-dan-input{
      height: 25px;
      background: rgba(245, 245, 245, .8);
      line-height: 25px;
      width: 200px;
      float: left;
      border-right: 1px solid cadetblue;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
      outline: none;
      text-indent: 2px;
  }
  .psVideo-dan-btn{
      display: inline-block;
      height: 25px;
      font-size: 15px;
      width: 50px;
      text-align: center;
      line-height: 25px;
      float: left;
      color: #454545;
      font-weight: bold;
      background: rgba(245, 245, 245, .9);
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;
      cursor: pointer;
  }
  .psVideo-dan-value{
      position: absolute;
      z-index: 20;
      color: white;
      font-size: 25px;
      font-weight: bold;
      white-space:nowrap;
      animation: danOnFull 7s linear;
      transform: translateX(-100%);
  }
  .psVideo-dan-value-full{
      position: absolute;
      z-index: 20;
      color: white;
      font-size: 25px;
      font-weight: bold;
      white-space:nowrap;
      animation: danOnFull 10s linear;
      transform: translateX(-100%);
  }
  @keyframes danOn {
      from {left: 100%; transform: translateX(0)}
      to {left: 0; transform: translateX(-100%)}
  }
  @keyframes danOnFull {
      from {left: 100%; transform: translateX(0)}
      to {left: 0; transform: translateX(-100%)}
  }
  .psVideo-dan-input-full{
      width: 300px;
  }
  .psVideo-dan-full{
      margin-left: calc(50% - 175px);
  }
  .psVideo-right-btn{
      float: right;
      margin-right: 3%;
      z-index: 4;
      margin-top:-5px;
  }
  .psVideo-btn{
      width: 30px;
      height: 30px;
      float: right;
      margin-left: 18px;
      cursor: pointer;
      /* line-height:33px; */
  }
  
  .set-list{
      display: none;
      width:75px;
      height:110px;
      background:rgba(38,50,56,0.8);
      position: absolute;
      bottom: 30px;
      left: -24px;
      opacity: .7;
      border-radius: 9px;
  }
  .videoSpeedTitle{
    font-size:12px;
    color:#fff;
    line-height:30px;
  }
  .konge1{
      display: none;
      position: absolute;
      width: 200px;
      height: 17px;
      bottom: 23px;
      left: -85px;
      text-align: center;
      z-index: 4;
  }
  .videoSet:hover .set-list,
  .videoSet:hover .konge1{
      display: block;
  }
  .play-speed{
      color: white;
      font-weight: bolder;
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      text-align: center;
  }
  .play-speed-list{
      padding-top: 5px;
      font-weight: bolder;
      font-size: 17px;
      color: azure;
      text-align: center;
  }
  .play-speed-list span{
      margin-left: 15px;
      margin-right: 15px;
  }
  .play-speed-list span:hover{
      color: #7969ff;
  }
  .set-list .speed.moren{
      color: #FF6824;
  }
  .setListTitle{
    font-weight:600;
    color:#fff;
    width:100%;
    padding-top:15px;
    font-size:12px;
    text-align:center;
  }
  .set-list .speed {
      /* margin-top: 3px; */
      height:24px;
      font-size:12px;
      color:#fff;
      line-height:24px;
  }
  .set-list .speed:hover{
    background:rgba(38,50,56,0.5);
    font-weight:600;
  }
  .huazhi{
      width: 50px;
      font-size: 15px;
      line-height: 23px;
      color: white;
  }
  
  .psVideo-progress{
      width: 100%;
      background: rgba(255,255,255,0.4);
      height: 2px;
      position: absolute;
      bottom: 50px;
      /* left: 2.5%; */
      cursor: pointer;
      transition: bottom 0.1s;
      border-radius: 3px;
  }
  .psVideo-progress:hover{
      height: 6px;
      bottom: 48px;
  }
  .psVideo-progress .psVideo-timeBar {
      height: 100%;
      position: absolute;
      top: 0;
      display: block;
      z-index: 2;
      width: 0;
      background: #FF6824;
      border-radius:3px;
  }
  #soundBtn:hover .sound-list,
  #soundBtn:hover .konge{
       display: block;
  }
  .sound-list{
      display: none;
      position: absolute;
      width: 20px;
      height: 85px;
      bottom: 35px;
      left: 4px;
      text-align: center;
      background:rgba(38,50,56,0.8);
      border-radius: 10px;
      font-size:12px;
  }
  .konge{
      display: none;
      position: absolute;
      width: 30px;
      height: 17px;
      bottom: 23px;
      left: -6px;
      text-align: center;
      z-index: 4;
  }
  .sound-number{
      position: relative;
      width: 100%;
      text-align: center;
      height: 20px;
      padding-top:5px;
      line-height: 20px;
      font-size: 15px;
      color: white;
  }
  .volume{
      position: relative;
      margin: auto;
      margin-top: 8px;
      width: 3px;
      height: 70px;
      background: #FF6824;
      border-radius: 2px;
      overflow: hidden;
  }
  .volumeBar {
      display: block;
      width: 100%;
      height: 40px;
      position: absolute;
      background-color: white;
      z-index: 2;
  }
  .video-now,
  .video-now:hover{
      height: 30px;
      font-size: 20px;
      line-height: 25px;
      background: rgba(139,288,255,.3);
      color: #6956ff;
  }
  footer{
      width: 100%;
      height: 30px;
      text-align: center;
      color: darkcyan;
      font-size: 20px;
      line-height: 30px;
      margin-top: 10px;
      top: 0;
  }
  .psVideo-loading{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -30px;
      margin-left: -35px;
      width: 70px;
      height: 60px;
      z-index: 30;
  }
  .psVideo-loading span{
      display: inline-block;
      width: 10px;
      height: 0;
      position: absolute;
      background: rgba(96, 191, 242, 0.53);
      top: 50%;
      margin-top: 0;
      left: 0;
  }
  .psVideo-loading span:nth-child(1){
      animation: span1 1s linear infinite;
  }
  .psVideo-loading span:nth-child(2){
      height: 30px;
      top: 50%;
      margin-top: -15px;
      margin-left: 20px;
      animation: span2 1s linear infinite;
  }
  .psVideo-loading span:nth-child(3){
      height: 60px;
      top: 50%;
      margin-top: -30px;
      margin-left: 40px;
      animation: span3 1s linear infinite;
  }
  @keyframes span1 {
      0%{height: 0; margin-top: 0}
      50%{height: 50px; margin-top: -25px}
      100%{height: 0; margin-top: 0}
  }
  @keyframes span2 {
      0%{height: 30px; margin-top: -15px}
      25%{height: 60px; margin-top: -30px}
      50%{height: 30px; margin-top: -15px}
      75%{height: 0; margin-top: 0}
      100%{height: 30px; margin-top: -15px}
  }
  @keyframes span3 {
      0%{height: 60px; margin-top: -30px}
      50%{height: 0; margin-top: 0}
      100%{height: 60px; margin-top: -30px}
  }
  
  #speed {
      color: white;
  }
  
  #slmVideoLayer {
      background: rgba(38,50,56,0.86);
      height: 100%;
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 4999;
  }
  
  
  #videoEnd {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 99999;
      left: 0;
      top: 0;
  }
  
  #videoEnd img{
      position: fixed;
  }
  #win-assets .actors li{
    width:75px;
    height:93px;
    /* border-radius:9px; */
    /* border:1px solid rgba(207,216,220,1); */
    /* width:70px;
    height:80px; */
    border-radius: 15px;
    border:2px solid #BAD2F5;
  }
  .ansClose{
    position: absolute;
    right:20px;
    top:20px;
  }
  .videoStopBig,.task_videoStopBig{
    width:120px;
    height:120px;
    background:rgba(38,50,56,0.8);
    z-index:101;
    border-radius: 100px;
    cursor: pointer;
  }
  .idedialog{
    width:300px;
    height:190px;
    background:rgba(255,255,255,1);
    box-shadow:0px 9px 18px 0px rgba(38,50,56,0.18),0px 3px 0px 0px rgba(207,216,220,1);
    border-radius:18px;
    margin-right:0;
    padding:0;
  }
  .idedialog .delspan{
     display:block;
     font-size:30px;
     font-family:MicrosoftYaHei-Bold;
     font-weight:bold;
     color:rgba(55,71,79,1);
     text-align:center;
     text-shadow:2px 2px 0px rgba(38,50,56,0.04);
     margin:36px 0 12px 0;
  }
  .idedialog .delCon{
    text-align:center;
    font-size:12px;
    margin-bottom:24px;
    line-height:23px;
  }
  .idedialog .buttonbar a{
    font-size:12px;
    color:#fff;
    float:left;
    width: 114px;
    height: 41px;
    text-align:center;
    background:rgba(255,112,67,1);
    border-radius:21px;
  }
  .idedialog .buttonbar a#confirmRight{
    margin:0 12px 0 34px;
  }
  .idedialog .buttonbar a#confirmLeft{
    background:rgba(55,71,79,1);
    box-shadow:0px 3px 0px 0px rgba(38,50,56,0.6);
  }
  
  /* 造型 声音 删除弹框 */
  .deleteDiaL{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:999;
    background:rgba(38,50,56,0.86);	
  }
  .delConBox{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    width:270px;
    height:190px;
    background:rgba(255,255,255,1);
    box-shadow:0px 9px 18px 0px rgba(38,50,56,0.18),0px 3px 0px 0px rgba(207,216,220,1);
    border-radius:18px;
  }
  .delTitleCon p:first-child{
    font-size:30px;
    text-shadow:2px 2px 0px rgba(38,50,56,0.04);
    color:rgba(55,71,79,1);
    font-weight:bold;
    text-align:center;
    margin:36px 0 12px 0;
  }
  .delTitleCon p:nth-child(2){
    font-size:12px;
    color:rgba(96,125,139,1);
    text-align:center;
    line-height:23px;
    margin-bottom:24px;
  }
  .delBtnCon .sibStyle{
    width:90px;
    height:30px;
    background:rgba(255,112,67,1);
    box-shadow:0px 3px 0px 0px rgba(215,67,20,0.4);
    border-radius:15px;
    float:left;
    text-align:center;
    line-height:30px;
    color:#fff;
    font-size:12px;
    cursor: pointer;
  }
  .delBtnCon .confirmBtn{
    margin:0 12px 0 40px;
  }
  .delBtnCon .cancelBtn{
    background:rgba(55,71,79,1);
    box-shadow:0px 3px 0px 0px rgba(38,50,56,0.6);
  }
  .firmDiaStyle{
    width:360px;
    height:258px;
    background:rgba(255,255,255,1);
    box-shadow:0px 9px 18px 0px rgba(38,50,56,0.18),0px 3px 0px 0px rgba(207,216,220,1);
    border-radius:18px;
  }
  .firmDiaStyle .disConBox{
    overflow: hidden;
    height:152px;
    background:rgba(255,120,78,1);
    border-radius:9px 9px 0px 0px;
  }
  .firmDiaStyle .disConBox .delspan{
    font-size:30px;
    font-weight:bold;
    color:rgba(255,255,255,1);
    text-shadow:2px 2px 0px rgba(38,50,56,0.04);
  }
  .firmDiaStyle .disConBox .delCon{
    font-size:12px;
    color:rgba(255,224,178,1);
    line-height:23px;
  }
  .firmDiaStyle .buttonbar a{
    width:135px;
    height:45px;
    border-radius:23px;
    font-size:18px;
    text-align:center;
    line-height:32px;
  }
  .firmDiaStyle.idedialog .buttonbar{
    margin-top:24px;
  }
  /* .taskExplain{
    cursor: pointer;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    top:18px;
    width:108px;
    height:36px;
    background:rgba(255,209,128,1);
    box-shadow:3px 3px 0px 0px rgba(38,50,56,0.04);
    border-radius:12px;
    border:2px solid rgba(254,209,129,1);
    z-index:9999;
    font-size:12px;
    font-weight:bold;
  color:rgba(93,64,55,1);
  line-height:32px;
  padding-left:32px;
  } */
  .taskExplain {
    cursor: pointer;
    position: absolute;
    left:5%;
    top:38px;
    min-width: 7em;
    min-height: 50px;
    max-width: calc(100% - 120px);
    background:#309CFF;
    border-radius:8px;
    border: 1px solid #1986e9;
    z-index:9999;
    font-size:14px;
    font-weight:bold;
    color:rgba(255,255,255,1);
    line-height:50px;
    display: flex;
    align-items: center;
    padding: 10px 14px 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .taskExplain-pack-up {
    width: 98px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .task-expand{
    width: 14px;
    height: 15px;
    cursor: pointer;
  }
  .task-expand-packup{
    background: url(../img/ui/packup.png) no-repeat center;
    background-size: 100%;
  }
  .task-expand-spread{
    background: url(../img/ui/spread.png) no-repeat center;
    background-size: 100%;
  }
  .taskExplain .tip{
    height: 3em;
    position: absolute;
    top: -2em;
    left: -1px;
    line-height: initial;
  }
  .taskExplain .tip > img{
    height: 100%
  }
  .taskExplain .task-content{
    font-weight: 400;
    color: rgba(255,255,255,1);
    line-height: 1.5em;
    /* width: 363px; */
    text-overflow: ellipsis;
    margin-left: 9px;
    margin-right: 14px;
    flex: 1;
    overflow: hidden;
    /* white-space: nowrap; */
  }
  .taskExplain .play-panel{
    width:25px;
    height:25px;
    background:rgba(255,255,255,1);
    border-radius:4px;
    background: url(../img/ui/play.svg) no-repeat center;
    background-size: 100%;
  }
  .taskExplain .play-panel.pause{
    background: url(../img/ui/pause.svg) no-repeat center;
    background-size: 100%;
  }
  
  .task1{
    position: absolute;
    left:2px;
    top:4px;
    width:24px;
  }
  .task2{
    position: absolute;
    right:4px;
    top:8px;
    width:14px;
  }
  .taskExplain:hover{
    /* border:2px solid rgba(254,170,64,1); */
  }
  .blockview .waterMark{
    display: none;
    position: absolute;
    bottom:18px;
    left:18px;
    width:108px;
  }
  .projectName.disablea{
    border:0;
  }
  
  #leadBlockLayer{
      width: 100%;
      height: 100%;
      top: 0;
      position: fixed;
      z-index: 1003;
  }

  #leadBlockDragLayer {
      position: relative;
  }
  
  #leadBlockDragLayer div{
      position: absolute;
      z-index: 1004;
  }
  #leadBlockDragLayer div img{
      pointer-events: none;
  }
  
  .tipFinger{
      position: absolute;
      left: 50px;
      top: 10px;
  }
  
  /* 任务说明视频样式 */
  .task_videoBox{
    position: relative;
     width:100%;
     height: 100%;
     border-bottom-left-radius:15px;
     border-bottom-right-radius:15px;
     overflow: hidden;
  }
  .task_videoBox .my-psVideo{
    width:100%;
    margin:0;
  }
  .helpPage .reset{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right:47px;
      width:24px;
      height:24px;
  }
  .helpPage .closeDialog{
      /* right: -20px; */
      /* top: -56px; */
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
  }
  
  /* answer.css */
  /* body{
      background:rgba(245,245,245,1);
  } */
  /* .hidden{
      display:none;
  } */
  li{
      list-style-type:none;
  }
  .answerDiv{
      position: fixed;
      left:0;
      top:0;
      z-index:997;
      width:100%;
      height:100%;
      background:rgba(38,50,56,0.86);
      /* padding-bottom:20px; */
      overflow: auto;
  }
  .headerTitle{
      position: fixed;
      left:0;
      top:0;
      width:100%;
      height:60px;
      line-height:60px;
      background:rgba(68,138,255,1);
      box-shadow:0px 5px 0px 0px rgba(38,50,56,0.04),0px 3px 0px 0px rgba(43,122,255,1);
  }
  .ans_per{
      position: absolute;
      left:-200px;
      top:50%;
      margin-top:-151px;
      width:164px;
  }
  .ans_return img{
      float:left;
      margin-top:35px;
      margin-right:10px;
      width:12px;
  }
  .ansHeader{
      background:rgba(255,120,78,1);
      height:60px;
      color:#fff;
      line-height:60px;
      position: relative;
      font-size:24px;
      font-weight:bold;
      text-align:center;
      border-radius: 8px 8px 0 0;
      box-shadow:0px 5px 0px 0px rgba(38,50,56,0.04);
  }
  .ans_headerCen{
      margin:0 auto;
      text-align:center;
      width:200px;
  }
  .ans_headerCen p{
      font-size:32px;
      font-weight:bold;
      float:left;
  }
  .ans_headerCen img{
      float:left;
      margin:28px 16px 0 0;
  }
  .ans_return p{
      float:left;
  }
  .ans_return{
      position: absolute;
      right:20px;
      top:0;
      cursor: pointer;
  }
  .ansCon{
      position: absolute;
      width:650px;
      /* min-height:100px; */
      /* height:470px; */
      left:50%;
      top:60px;
      bottom:85px;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      /* overflow: auto; */
      box-shadow:0px 9px 18px 0px rgba(38,50,56,0.18),0px 3px 0px 0px rgba(207,216,220,1);
      border-radius:9px;
      background:#fff;
  }
  .ans_stamp{
      margin:24px 0 10px 50px;
  }
  .ans_con{
      width:100%;
      min-height:100px;
      position: relative;
      background:#fff;
  }
  .ans_boxImg{
      width:240px;
      margin:0 auto;
      position: relative;
      /* float:left; */
  }
  .itemImg{
      width:100%;
      border:1px solid #ddd;
      border-radius: 5px;
  }
  .scaleImg{
      width:20px;
      height:20px;
      position:absolute;
      right:8px;
      bottom:8px;
      background:rgba(38,50,56,0.8) url("../img/ui/scaleImg1.png") no-repeat center center;
      background-size:14px 14px;
      border-radius: 30px;
      cursor: pointer;
      display:none;
  }
  .ansMapImg{
      display:block;
      /* width:100%; */
      /* height:100%; */
  }
  .ans_img_box{
      width:300px;
      float:left;
      border:1px solid rgba(236,239,241,1);
      border-radius: 9px;
      /* padding:5px; */
  }
  .ans_img_box .signMap{
     position: absolute;
     left:8px;
     top:8px;
     width:27px;
     height:27px;
     text-align:center;
     line-height:27px;
     background:rgba(255,204,128,1);
     color:#fff;
     font-size:14px;
     box-shadow:3px 3px 0px 0px rgba(38,50,56,0.04);
     border-radius: 50px;
  }
  .ans_titleBox{
      /* width:610px; */
      min-height:50px;
      border-radius:6px;
      border:2px solid rgba(255,224,178,1);
      background:rgba(255,251,237,1);
      box-shadow:2px 3px 0px 0px rgba(38,50,56,0.04);
      margin:10px 14px 18px 14px;
      overflow: hidden;
      /* display:flex; */
      /* align-items: center; */
  }
  .ans_con{
      position: absolute;
      min-height:100px;
      /* width:100%; */
      background:#fff;
      /* height:410px; */
      overflow: auto;
      bottom:40px;
      top:78px;
      border-radius: 0 0 8px 8px;
      padding-bottom:10px;
  }
  .ansHeaTP{
      text-shadow:2px 2px 0px rgba(222,44,0,0.1);
  }
  .pageNum{
      position: absolute;
      left:18px;
      top:18px;
      width:54px;
      height:24px;
      background:rgba(255,158,128,1);
      /* box-shadow:0px 4px 0px 0px rgba(184,204,255,1); */
      border-radius:12px;
      font-size:12px;
      line-height:24px;
      text-align:center;
      font-weight:600;
      color:rgba(255,120,78,1);
  }
  .ans_whyImg{
      width:42px;
      position: absolute;
      left:14px;
      top:0;
  }
  .curPage{
      color:rgba(255,120,78,1);
  }
  .totalPage{
      color:rgba(255,243,224,1);
      font-size:14px;
  }
  .ans_title{
      font-size:15px;
      color:#263238;
      /* margin:30px 60px; */
      line-height:24px;
      padding:20px 18px 20px 54px;
      /* float:left; */
  }
  .paddingStyle{
      padding:0px 18px 20px 54px
  }
  .ans_boxImg{
      margin:20px 0 12px 54px;
  }
  .shadowDiv{
      position: absolute;
      width:100%;
      left:0;
      top:0;
      right:0;
      bottom:0;
      /* background:rgba(0,0,0,0.7); */
      /* display:none; */
      z-index:1;
  }
  .ans_ul_box{
      overflow: hidden;
      margin:0 14px;
  }
  .ans_ul_box li{
      cursor: pointer;
      /* margin-right:12px; */
      margin-bottom:12px;
  }
  .ans_ul_box li.ansLi_list{
      margin-right:0;
  }
  .ans_ul_box li.ansLi_list{
      position: relative;
      /* width:96%; */
      height:42px;
      line-height:42px;
      font-size:14px;
      color:#37474F;
      /* margin:12px auto; */
      border-radius:24px;
      border:1px solid rgba(236,239,241,1);
  }
  .ans_ul_box li.ansLi_list span:first-child{
      display:block;
      width:27px;
      height:27px;
      color:#fff;
      font-size:14px;
      line-height:27px;
      text-align:center;
      margin:6px 20px 0 8px;
      background:rgba(255,204,128,1);
      box-shadow:3px 3px 0px 0px rgba(38,50,56,0.04);
      float:left;
      border-radius: 50px;
  }
  .ans_ul_box li.ansLi_list:hover{
      /* background:rgba(232,232,232,1); */
      /* border-radius:33px; */
      /* box-shadow:0px 2px 4px 0px rgba(0,0,0,0); */
      border:2px solid rgba(255,209,128,1);
  }
  .ansBtn{
      position: absolute;
      bottom:-30px;
      left:50%;
      transform: translateX(-50%);
      /* width:180px; */
      /* height:45px; */
      text-align:center;
      /* line-height:45px; */
      background:rgba(255,112,67,1);
      border-radius:23px;
      color:#fff;
      font-size:18px;
      cursor: pointer;
      font-weight:bold;
      padding:16px 46px;
      box-shadow:0px 3px 0px 0px rgba(215,67,20,0.4);
  }
  .ansBtn.disabled{
      background:rgba(255,158,128,1);
      box-shadow:0px 1px 0px 0px rgba(255,110,63,1);
      color:rgba(255,255,255,1);
  }
  .ansBtn.disabled:hover{
      box-shadow:0px 1px 0px 0px rgba(255,110,63,1);
  }
  .ansBtn:hover{
      box-shadow:0px 2px 0px 0px rgba(215,67,20,0.6);
  }
  .ansBtn:active{
      box-shadow:0px 1px 0px 0px rgba(215,67,20,0.6);
  }
  .ans_img_box{
      position: relative;
  }
  .ans_img_box:hover{
      border:2px solid rgba(255,209,128,1);
  }
  .ans_ul_box .ans_img_box.select{
      border:2px solid rgba(255,171,64,1);
      background:rgba(255,251,237,1);
  }
  .ans_ul_box .ans_img_box.selectError{
      border:2px solid rgba(255,138,128,1);
      background:rgba(255,235,238,1);
  }
  .ans_ul_box .ans_img_box.selectError .signMap{
      background:rgba(255,138,128,1);
  }
  .ans_ul_box .ans_img_box.selectCorrect{
      border:2px solid rgba(129,199,132,1);
      background:rgba(241,248,233,1);
  }
  .ans_ul_box .ans_img_box.selectCorrect .signMap{
      background:rgba(129,199,132,1);
  }
  .ans_ul_box .ansLi_list.select{
      border:2px solid rgba(255,171,64,1);
      background:rgba(255,251,237,1);
      /* line-height:50px; */
   }
   .ans_ul_box .ansLi_list.selectError{
      border:2px solid rgba(255,138,128,1);
      background:rgba(255,235,238,1);
   }
   .ans_ul_box .ansLi_list.selectError span:first-child{
      background:rgba(255,138,128,1);
   }
   .ans_ul_box .ansLi_list.selectError span:first-child{
      background:rgba(255,138,128,1);
   }
   .ans_ul_box .ansLi_list.selectCorrect span:first-child{
      background:rgba(129,199,132,1);
   }
   .ans_ul_box .ansLi_list.selectCorrect{
      background:rgba(241,248,233,1);
      border:2px solid rgba(129,199,132,1);
   }
   .ans_img_box{
       width:300px;
       height:225px;
   }
  .ans_img_box:nth-of-type(odd){
      margin-right:12px;
      /* margin-bottom:30px; */
  }
  /* .ans_img_box:nth-child(1){
     margin-bottom:30px;
  }
  .ans_img_box:nth-child(2){
      margin-bottom:30px;
   } */
  /* .ans_img_box:nth-child(3){
      margin-bottom:0px;
  } */
  .ansinfoBox{
      position: fixed;
      left:50%;
      top:80%;
      /* margin-left:-282px; */
      /* margin-top:-55px; */
      /* width:563px; */
      /* height:100px; */
      background:rgba(38,50,56,0.76);
      border-radius: 14px;
      transform: translate(-50%,-50%);
      opacity: 0;
  }
  .ansinfoBox img{
      display:block;
      /* float:left; */
      /* margin-left:150px; */
      /* margin-right:10px; */
      margin:24px auto 12px auto;
      width:30px;
  }
  .ansinfoBox .ansInfoData{
      font-size:14px;
      font-weight:bold;
      /* line-height:100px; */
      text-shadow:1px 1px 0px rgba(38,50,56,0.2);
      color:#fff;
      padding:0 50px 30px 50px;
  }
  .ans_comboBox{
      /* width:230px; */
      /* height:109px; */
      position: absolute;
      /* line-height:109px; */
      /* background:url("../img/ui/starBg.png") no-repeat center center; */
      /* background-size:173px 109px; */
      top:50%;
      left:70%;
      transform: translateY(-50%);
      /* font-size:44px; */
      /* color:rgba(240,83,79,1); */
      /* font-weight:bold; */
      z-index:2;
  }
  .ansLiImg{
      border-radius: 9px;
      /* margin:40px auto 0 auto; */
  }
  .comboxNum{
      margin-left:40px;
  }
  .ans_subRight{
      width:42px;
      position: absolute;
      right:0px;
      top:-2px;
  }
  .ans_img_box .ans_subRight{
      right:0;
      top:0;
  }
  .scaleDialog{
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.7);
      position: fixed;
      z-index:1000;
      left:0;
      top:0;
  }
  .scaleDiaImg{
      position: absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      max-width:1000px;
  }
  .scaleClose{
      position: absolute;
      right:0;
      top:0;
      opacity: 0.8;
      width:80px;
      height:80px;
      background:#2F2F2F url("../img/ui/ansClose.png") no-repeat center center;
      background-size:30px 30px;
  }
  /* .ansInfo{
      position: absolute;
      left:50%;
      top:50%;
      width:570px;
      height:120px;
      line-height:130px;
      text-align:center;
      border-radius: 15px;
      background:#333;
      margin-left:-285px;
      margin-top:-65px;
      font-size:24px;
      color:#fff;
  }
  .ansInfo img{
      float:left;
  }
  .ansInfo p{
      float:left;
  } */
  
  /*舞台区代码运行成功提示*/
  .stageSuccDia, .analysisDia{
      position: fixed;
      width:100%;
      height:100%;
      background:rgba(0, 0,0, 0.7);
      z-index:99999;
      left:0;
      top:0;
  }
  .stageDiaCon{
      width:360px;
      height:345px;
      box-shadow:0px 9px 18px 0px rgba(38,50,56,0.18),0px 3px 0px 0px rgba(207,216,220,1);
      border-radius:18px;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-180px;
      margin-top:-172.5px;
      background:#fff;
  }
  .sDH{
      width:100%;
      height:102px;
      line-height:102px;
      text-align:center;
      font-size:30px;
      color:#fff;
      font-weight:bold;
      background:#FF7A45;
      font-family:MicrosoftYaHei-Bold;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      text-shadow:2px 2px 0px rgba(38,50,56,0.04);
  }
  .stageImg{
      position:absolute;
      left:50%;
      top:-40px;
      margin-left:-84.5px;
  }
  .sDC{
      font-size:18px;
      color:#263238;
      padding-top:20px;
  }
  .sucConBox img{
      width:24px;
  }
  .sucConBox{
     height:100%;
     width:180px;
     background:rgba(236,239,241,1);
     border-radius:9px;
     font-size:24px;
     color:rgba(38,50,56,1);
     float:left;
     margin-left:12px;
  }
  .stageCodeNumBox{
      height:48px;
      line-height:48px;
      margin:0 40px 12px 40px;
      overflow: hidden;
  }
  .stageCodeNumBox img,.stageCodeNumBox p{
      float:left;
  }
  .stageCodeNumBox img{
      width:24px;
      margin-top:12px;
      margin-left:12px;
      float:left;
  }
  .stageCodeNumBox .codeNumP{
      font-size:24px;
      color:rgba(38,50,56,1);
      float:right;
      margin-right:12px;
  }
  .stageSBtn, .analysisBtn{
      width:210px;
      height:45px;
      line-height:45px;
      text-align:center;
      background:rgba(255,112,67,1);
      box-shadow:0px 4px 0px 0px rgba(215,67,20,0.8);
      border-radius:23px;
      color:#fff;
      font-size:18px;
      margin:36px auto 0 auto;
      cursor: pointer;
      font-weight:bold;
  }
  
  /*学习完成弹出框*/
  .studeEndCon{
      position: absolute;
      left:50%;
      top:50%;
      width:645px;
      min-height:100px;
      box-shadow:0px 2px 4px 0px rgba(0,0,0,0.1);
      border-radius:16px;
      background:#fff;
      transform: translate(-50%,-50%);
  }
  .stuOverBg{
      position: absolute;
      left:50%;
      width:288px;
      margin-left:-144px;
      top:-28px;
  }
  .jewel_light{
      width:60px;
      position:absolute;
      left:50%;
      margin-left:-25px;
      top:-52px;
      z-index:2;
  }
  .studeReport{
      margin-top:48px;
  }
  .studeReport .stuRCon{
      /* width:400px; */
      min-height:100px;
      margin:0 18px;
  }
  .stuUlBox{
      /* background:#f7f7f7; */
      /* margin-top:24px; */
      overflow: hidden;
      border-radius: 8px;
  }
  .stuUlBox li img{
      width:24px;
      display:inline-block;
      margin-top:4px;
  }
  .stuUlBox li{
      width:143px;
      height:60px;
      /* width:72px;
      height:72px; */
      text-align:center;
      float:left;
      font-size:12px;
      color:#535353;
      margin-top:10px;
      margin-right:12px;
      border-radius: 9px;
      background:rgba(236,239,241,1);
  }
  .stuUlBox li:last-child{
      margin-right:0;
  }
  .stuUlBox li p:first-child{
      font-size:21px;
      color:rgba(55,71,79,1);
      margin:12px 0 6px 0;
  }
  .stuUlBox li p:nth-child(2){
      /* padding:6px 50px 12px 50px; */
      color:rgba(96,125,139,1);
      font-size:12px;
  }
  .stuUlBox .stuNumP{
      font-size:16px;
      color:#FF7A44;
      margin:0 0 3px 0;
  }
  .lTitleFont{
      width:120px;
      height:30px;
      background:rgba(207,216,220,1);
      border-radius:9px 9px 0px 0px;
  }
  .lTitleFont{
      float:left;
      text-align:center;
      line-height:30px;
      color:rgba(84,110,122,1);
      font-weight:bold;
      font-size:12px;
  }
  .stuTime{
      float:right;
      height:26px;
      /* margin:14px 0 10px 0; */
      /* background:#F7F7F7; */
      border-radius:8px;
      line-height:30px;
      font-size:12px;
      color:rgba(96,125,139,1);
  }
  .stuTime p,.stuTime img{
      float:left;
  }
  .stuTime img{
      margin-top:6px;
      margin-left:16px;
  }
  .stuTime .stuTimeP{
      /* margin:0 18px 0 8px; */
  }
  .knowReview{
      background:#F7F7F7;
      margin-bottom:12px;
      /* padding:4px 8px 10px 18px; */
      border-radius:0px 9px 9px 9px;
      background:rgba(236,239,241,1);
  }
  .knowReviewCon{
      font-size:12px;
      color:#535353;
      line-height:16px;
  }
  .knowTitle{
      overflow: hidden;
      margin-bottom:5px;
  }
  .knowTitle img{
      float:left;
      margin-right:8px;
  }
  .knowTitle p{
      float:left;
      font-size:12px;
  }
  .stuClose{
      position:absolute;
      right:15px;
      top:10px;
      cursor: pointer;
      width:16px;
      height:16px;
  }
  .courseReport{
      width:210px;
      height:45px;
      background:rgba(255,112,67,1);
      box-shadow:0px 5px 0px 0px rgba(215,67,20,0.8);
      border-radius:23px;
      margin:24px auto 36px auto;
      font-size:18px;
      font-weight:bold;
      color:rgba(255,255,255,1);
      text-align:center;
      line-height:45px;
      cursor: pointer;
  }
  .courseReport:hover{
      background:rgba(255,112,67,1);
      box-shadow:0px 2px 0px 0px rgba(215,67,20,0.6);
  }
  .courseReport:active{
      background:rgba(239,94,48,1);
      box-shadow:0px 1px 0px 0px rgba(215,67,20,0.6);
  }
  .stuEnd_per{
      position: absolute;
      bottom:-0px;
      left:-80px;
      width:100px;
  }
  .pageBreakUl{
      position: absolute;
      left:0;
      top:17px;
  }
  .pageBreakBox{
      position: absolute;
      left:0;
      top:0;
      width:100%;
      margin:0 auto;
      overflow: hidden;
      min-height:60px;
      z-index:9999;
  }
  .pageBreakBox li{
      width:24px;
      height:24px;
      line-height:24px;
      text-align:center;
      font-size:14px;
      color:rgba(255,120,78,1);
      background:#fff;
      float:left;
      margin-left:10px;
      border-radius: 50px;
      cursor: pointer;
  }
  .pageBreakBox li:hover{
      background:rgba(251,233,231,1);
  }
  .pageBreakBox .skip{
      position: absolute;
      top:18px;
      right:18px;
      color:#fff;
      font-size:12px;
      cursor: pointer;
      width:75px;
      height:24px;
      border-radius:12px;
      border:1px solid rgba(254,209,127,1);
      line-height:24px;
      text-align:center;
  }
  .pageBreakBox .skip:hover{
      border:1px solid rgba(254,209,127,1);
      background:rgba(254,209,127,0.1);
  }
  .pageBreakBox .skip:active{
      border:1px solid rgba(254,209,127,1);
      background:rgba(254,209,127,0.2);
  }
  .pageBreakBox .pageNumBtn.select{
      background:rgba(255,158,128,1);
      color:rgba(255,120,78,1);
  }
  /* 测试完成学习报告 */
  .knowReview{
      background:rgba(236,239,241,1);
      border-radius:0px 9px 9px 9px;
      padding-top:24px;
      overflow: hidden;				
  }
  .styleKnowL{
      float:left;
      width:50%;
      overflow: hidden;
      padding-bottom:18px;
  }
  .styleKnowL li{
      overflow: hidden;
  }
  .styleKnowL p{
      float:left;
      font-size:12px;
      line-height:18px;
      max-width: 250px;
  }
  .styleKnowL p:first-child{
      width:18px;
      height:18px;
      line-height:18px;
      text-align:center;
      background:rgba(207,216,220,1);
      color:rgba(96,125,139,1);
      margin-right:9px;
      border-radius: 50px;
  }
  .styleKnowL p:nth-child(2){
      color:rgba(38,50,56,1);
  }
  .leftKnow li,.rightKnow li{
      margin-left:24px;
      margin-bottom:12px;
  }
  .analysisBtn:hover{
      box-shadow: 0px 2px 0px 0px rgba(215,67,20,0.8);
  }
  
  /* bgImg.css */
  
  /* tab切换 */
  input:focus
  {
    border:2px solid rgba(254,152,18,1);
  }
  .BtnSibStyle:hover{
    background:rgba(255,112,67,1);
    box-shadow:0px 1px 0px 0px rgba(215,67,20,0.6);
  }
  .BtnSibStyle:active{
    background:rgba(239,94,48,1);
    box-shadow:0px 1px 0px 0px rgba(215,67,20,0.6);
  }
  .hoverBtn:hover{
    opacity: 0.9;
  }
  .hoverBtn:active{
    opacity: 0.8;
  }
  .clearfix:before{
    content: '';
    display:table;
  }
  .center{
        display: -webkit-box;  
        display: -moz-box;    
        display: -ms-flexbox; 
        display: -webkit-flex;  
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
  }
  .positionCenter{
      position: absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
  }
  /*滚动条样式开始*/
  .blocks::-webkit-scrollbar,  
  #costumes::-webkit-scrollbar,
  .actors.tab-content::-webkit-scrollbar{
    width: 8px;  
    height: 1px;
  }
  .blocks::-webkit-scrollbar-thumb, 
  #costumes::-webkit-scrollbar-thumb,
  .bm-selector::-webkit-scrollbar-thumb,
  .bm-audio-selector::-webkit-scrollbar-thumb,
  .actors.tab-content::-webkit-scrollbar-thumb,
  .categories::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #cecece;
  }
  .blocks::-webkit-scrollbar-track,
  #costumes::-webkit-scrollbar-track,
  .bm-selector::-webkit-scrollbar-track,
  .categories::-webkit-scrollbar-track,
  .bm-audio-selector::-webkit-scrollbar-track,
  .actors.tab-content::-webkit-scrollbar-track,
  .ans_con::-webkit-scrollbar-track
   {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #F7F7F7
  }
  /*滚动条样式结束*/
  
  .categories::-webkit-scrollbar,
  .bm-selector::-webkit-scrollbar, 
  .bm-audio-selector::-webkit-scrollbar{
    width: 2px;
  }
  .ans_con::-webkit-scrollbar{
    width:5px;
  }
  .ans_con::-webkit-scrollbar-thumb{
    background:rgba(38,50,56,0.12);
    border-radius:2px;
  }
  .blockBox .imgBg{
      background:url("../img/ui/code_img.svg") no-repeat center center;
      background-size:100% 100%;
      width: 20px;
      height: 13px;
    }
    .blockBox.active .imgBg{
      background:url("../img/ui/code_img_active.svg") no-repeat center center;
      background-size:100% 100%;
    }
    .costumesBox .imgBg{
      background:url("../img/ui/custome_img.svg") no-repeat center center;
      background-size:100% 100%;
      width: 14px;
      height: 14px;
    }
    .costumesBox.active .imgBg{
      background:url("../img/ui/custome_img_active.svg") no-repeat center center;
      background-size:100% 100%;
    }
    .costumesBox.active > a{
      color: #0B4FD5 !important;
    }
    .voicesBox .imgBg{
      background:url("../img/ui/vioce_img.svg") no-repeat center center;
      background-size:100% 100%;
      width: 16px;
      height: 13px;
    }
    .voicesBox.active .imgBg{
      background:url("../img/ui/vioce_img_active.svg") no-repeat center center;
      background-size:100% 100%;
    }
    .voicesBox.active > a{
      color: #0B4FD5 !important;
    }
    /* .blockBox:hover .imgBg{
      background-image:url("../img/ui/code_hover.png") no-repeat center center;
      background-repeat: no-repeat;
      background-position: center center;
      background-size:100% 100%;
    }
    .costumesBox:hover .imgBg{
      background-repeat: no-repeat;
      background-position: center center;
      background:url("../img/ui/custome_hover.png");
      background-size:100% 100%;
    }
    .voicesBox:hover .imgBg{
      background:url("../img/ui/vioce_hover.png") no-repeat center center;
      background-size:100% 100%;
    } */
    /* 导航栏按钮 */
    .toMake .imgBg{
      background:url("../img/ui/toMake.png") no-repeat center center;
      background-size:100% 100%;
    }
    .slm_help .imgBg{
      background:url("../img/ui/help.png") no-repeat center center;
      background-size:100% 100%;
    }
    .slm_submit .imgBg{
      background:url("../img/ui/submit.png") no-repeat center center;
      background-size:100% 100%;
    }
    .headerMainUl .slm_submit.disabled span{
      opacity: 0.5;
    }
    .slm_returnCourse .imgBg{
      background:url("../img/ui/return.png") no-repeat center center;
      background-size:100% 100%;
    }
    .toMake:hover .imgBg{
      background:url("../img/ui/toMake_hover.png") no-repeat center center;
      background-size:100% 100%;
    }
    .slm_help:hover .imgBg{
      background:url("../img/ui/help_hover.png") no-repeat center center;
      background-size:100% 100%;
    }
    .slm_submit:hover .imgBg{
      background:url("../img/ui/submit_hover.png") no-repeat center center;
      background-size:100% 100%;
    }
    .slm_returnCourse:hover .imgBg{
      background:url("../img/ui/return_hover.png") no-repeat center center;
      background-size:100% 100%;
    }
  
  
  
    .projectName:hover .imgBg{
      background:url("../img/ui/proName.png") no-repeat center center;
      background-size:100% 100%;
    }
    .projectName .imgBg.disable{
      background:url("../img/ui/proName.png") no-repeat center center;
      background-size:100% 100%;
    }
    /* #stagecmd-grid{
      background:url("../img/ui/grid.png") no-repeat center center;
      background-size:18px;
    } */
    .stage_left .icon-grid-2{
      background:url("../img/ui/grid.svg") no-repeat center center;
      background-size:14px;
    }
    .stage_left .icon-grid-2.active{
      background:url("../img/ui/grid.svg") no-repeat center center;
      background-size:14px;
    }
    .stage_left .icon-half-screen {
      background:url("../img/ui/max.svg") no-repeat center center;
      background-size:14px;
  }
  .stage_left .icon-half-screen.active {
    background:url("../img/ui/max.svg") no-repeat center center;
    background-size:14px;
  }
  /* #stagecmd-min {
      background:url("../img/ui/min.png") no-repeat center center;
      background-size:18px;
  } */
  .stage_left .icon-min-screen {
    background:url("../img/ui/min.svg") no-repeat center center;
    background-size:14px;
  }
  .stage_left .icon-min-screen.active {
    background:url("../img/ui/min.svg") no-repeat center center;
    background-size:14px;
  }
  #stagecmd-zoomin {
      background:url("../img/ui/min.png") no-repeat center center;
      background-size:18px;
  }
  .maximize.icon-full-screen{
      background:url("../img/ui/screen.svg") no-repeat center center;
      /* background-size:18px; */
      background-size:14px;
  }
  .maximize.icon-full-screen.active{
    background:url("../img/ui/screen_active.svg") no-repeat center center;
    background-size:14px;
  }
  .minimize.icon-contract{
      background:url("../img/ui/full_screen.png") no-repeat center center;
      background-size:18px;
  }
  
  .icon-play{
      display:block;
      width:10px;
      height:10px;
      background:url("../img/ui/star.png") no-repeat center center;
      background-size:100% 100%;
      margin:8px 4px 0 12px;
      float:left;
  }
  .icon-stop{
      display:block;
      width:10px;
      height:10px;
      background:url("../img/ui/pause.png") no-repeat center center;
      background-size:100% 100%;
      margin:8px 4px 0 12px;
      float:left;
  }
  .delete{
    width:14px;
    height:14px;
    background:url("../img/ui/close.png") no-repeat center center;
    background-size:100% 100%;
    border-radius: 10px;
  }
  .editorLeftSib .costume.select .costume-close.delete{
    width:14px;
    height:14px;
    background-image:url("../img/ui/close.png") no-repeat center center;
    background-size:100% 100%;
    border-radius: 10px;
    display:block;
  }
  .expandImg{
      display:block;
      width:20px;
      height: 20px;
      margin:11px auto 0 auto;
      cursor: pointer;
  }
  .expandImg.expand{
    transform: rotate(180deg);
  }
  .expandImg:hover{
    opacity: 0.8;
  }
  .expandImg:hover{
    opacity: 0.8;
  }
  #win-assets .actors .middle .icon-plus-2{
    width:14px;
    height:14px;
    background:url("../img/ui/add.png") no-repeat center center;
    background-size:100% 100%;
    margin-top:16px;
  }
  .addActorImg{
    width:20px;
    height:20px;
    background:url("../img/ui/add.svg") no-repeat center center;
    background-size:100% 100%;
    margin:35px auto 10px auto;
  }
  .headerMainUl li:active{
    opacity: 0.8;
  }
  .stage_left a:hover{
    opacity: 0.8;
  }
  .stage_left a:active{
    opacity: 0.9;
  }
  #win-code .toolsshow:hover{
    opacity: 1;
  }
  #stage-buttons a.stagecmd-stop:hover,.submitBtnBox:hover{
    border:1px solid rgba(96,125,139,1);
    /* background:rgba(255,112,67,1); */
  }
  #stage-buttons a.stagecmd-stop:active,.submitBtnBox:active{
    border:1px solid rgba(96,125,139,1);
    /* background:rgba(239,94,48,1); */
  }
  #bm-costModal.modal a.close-modal,#bm-audioModal a.close-modal{
    width:16px;
    height:16px;
    background-color: #96BBE6;
    -webkit-mask-image: url("../img/ui/closeImg1.png");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-image: url("../img/ui/closeImg1.png");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;
    /* background:url("../img/ui/closeImg1.png") no-repeat center center;
    background-size:100% 100%; */
  }
  
  
  /* 视频背景图 */
  .controlPlay#rewind{
    background-size:24px 24px;
    background-image: url("../img/ui/rewind1.png");
    background-position: center center;
    background-repeat: no-repeat;
  }
  .controlPlay#fastForward{
    /* background: url("../img/ui/fastForward1.png") no-repeat center center; */
    background-size:24px 24px;
    background-image: url("../img/ui/fastForward1.png");
    background-position: center center;
    background-repeat: no-repeat;
  }
  /* .controlPlay#rewind:hover{
    background: url("../img/ui/rewind2.png") no-repeat;
  }
  .controlPlay#fastForward:hover{
    background: url("../img/ui/fastForward2.png") no-repeat;
  } */
  .psVideo-play-top .reset,.helpPage .reset{
    background-size:24px 24px;
    background-image: url(../img/ui/reset1.png);
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  .psVideo-play-top .bypass{
    /* margin-top: 6px; */
    background-size:24px 24px;
    background-image:  url(../img/ui/bypass1.png);
    background-position: center center;
    background-repeat: no-repeat;
    /* background: url(../img/ui/bypass1.png) no-repeat center center; */
  }
  
  /* .psVideo-play-top .reset:hover{
    background: url(../img/ui/reset2.png) no-repeat;
  }
  
  .psVideo-play-top .bypass:hover{
    background: url(../img/ui/bypass2.png) no-repeat;
  } */
  .psVideo-stop{
    background-size:24px 24px;
    background-image:  url("../img/ui/play1.png");
    background-position: center center;
    background-repeat: no-repeat;
  }
  .psVideo-play{
    background-size:24px 24px;
    background-image:  url("../img/ui/stop1.png");
    background-position: center center;
    background-repeat: no-repeat;
    /* background: url("../img/ui/stop1.png") no-repeat;
    background-size:100% 100%; */
  }
  /* .psVideo-stop:hover{
    background: url("../img/ui/play2.png") no-repeat;
  }
  .psVideo-play:hover{
    background: url("../img/ui/stop2.png") no-repeat;
  } */
  .videoAll{
    /* background: url("../img/ui/full1.png") no-repeat; */
    background-size:24px 24px;
    background-image:  url("../img/ui/full.png");
    background-position: center center;
    background-repeat: no-repeat;
  }
  .videoAll.exitFullBg{
    background-image:  url("../img/ui/full1.png");
  }
  /* .videoAll:hover{
    background: url("../img/ui/full2.png") no-repeat;
  } */
  .videoSet{
   position: relative;
   margin-right:12px;
   /* background: url("../img/ui/speed1.png") no-repeat;
   background-size:cover; */
  }
  /* .videoSet:hover{
   background: url("../img/ui/speed2.png") no-repeat;
  } */
  .videoSound{
    background-size:24px 24px;
    background-image:  url("../img/ui/voice1.png");
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    /* background-size:cover; */
  }
  /* .videoSound:hover{
    background: url("../img/ui/voice2.png") no-repeat;
  } */
  .jinyin{
    position: relative;
    /* background-size:cover; */
    background-size:24px 24px;
    background-image:   url("../img/ui/voice3.png");
    background-position: center center;
    background-repeat: no-repeat;
  }
  .videoStopBig,.task_videoStopBig{
    cursor: pointer;
    background-size:64px 64px;
    background-image:  url("../img/ui/bigPlay.png");
    background-position: 32px center;
    background-repeat: no-repeat;
  }
  .videoStopBig.stopPlayImg,.task_videoStopBig.stopPlayImg{
    background-image:  url("../img/ui/bigStop.png");
  }
  
  
  
  
  /* 视频滑过样式 */
  .videoBtnHover:hover{
    width:30px;
    height:30px;
    background-color:rgba(255,255,255,0.2);
    border-radius:9px;
  }
  .videoBtnHover:active{
    opacity: 0.8;
  }
  .videoBtnDisabled{
    opacity: 0.3;
  }
  .videoHeaBtnHover:hover{
    width:45px;
    height:45px;
    background-color:rgba(38,50,56,0.1);
    border-radius: 50px;
  }
  .videoHeaBtnHover:active{
    background-color:rgba(38,50,56,0.2);
  }
  .resetBtnHover:hover{
    opacity: 0.8;
  }
  .resetBtnHover:active{
    opacity: 0.9;
  }
  .idedialog .buttonbar a#confirmRight:hover{
    background:rgba(255,112,67,1);
    box-shadow:0px 1px 0px 0px rgba(215,67,20,0.4);
  }
  .idedialog .buttonbar a#confirmLeft:hover{
    background:rgba(55,71,79,1);
    box-shadow:0px 1px 0px 0px rgba(38,50,56,0.6);
  }
  .idedialog .buttonbar a#confirmRight:active{
    background:rgba(239,94,48,1);
    box-shadow:0px 1px 0px 0px rgba(215,67,20,0.6);
  }
  .idedialog .buttonbar a#confirmLeft:active{
    background:rgba(45,58,64,1);
    box-shadow:0px 1px 0px 0px rgba(38,50,56,1);
  }
  
  .confirmBtn:hover{
    background:rgba(255,112,67,1);
            box-shadow:0px 1px 0px 0px rgba(215,67,20,0.4);
  }
  .confirmBtn:active{
    background:rgba(239,94,48,1);
            box-shadow:0px 1px 0px 0px rgba(215,67,20,0.6);
  }
  .cancelBtn:hover{
    background:rgba(55,71,79,1);
            box-shadow:0px 1px 0px 0px rgba(38,50,56,0.6);
  }
  .cancelBtn:active{
    background:rgba(45,58,64,1);
            box-shadow:0px 1px 0px 0px rgba(38,50,56,1);
  }
  
  /* dialog.css */
  .windowDiaL{
      position: fixed;
      left:0;
      top:0;
      right:0;
      bottom:0;
      z-index:999;
      background:rgba(38,50,56,0.86);
    }
    .diaConL{
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      width:360px;
      /* height:260px; */
      box-shadow:0px 9px 18px 0px rgba(38,50,56,0.18),0px 3px 0px 0px rgba(207,216,220,1);
      border-radius:18px;
      background:rgba(255,255,255,1);
    }
    .diaConBox{
      background:rgba(255,120,78,1);
      border-radius:9px 9px 0px 0px;
      overflow: hidden;
      /* height:152px; */
      text-align:center;
    }
    .diaConBox div:last-child{
      margin-bottom:36px;
    }
    .titleL{
      font-size:30px;
      font-weight:bold;
      color:rgba(255,255,255,1);
      text-shadow:2px 2px 0px rgba(38,50,56,0.04);
      margin:45px 0 18px 0;
    }
    .qustionL{
      font-size:14px;
      color:#fff;
      line-height:22px;
    }
    .lastCon{
      font-size:12px;
      color:rgba(255,224,178,1);
      margin-top:6px;
      line-height:22px;
    }
    .diaConBtnBox .sibStyle{
      width:135px;
      height:45px;
      background:rgba(255,112,67,1);
      box-shadow:0px 4px 0px 0px rgba(215,67,20,0.8);
      border-radius:23px;
      font-size:18px;
      font-weight:bold;
      color:rgba(255,255,255,1);
      text-align:center;
      line-height:45px;
      float:left;
      cursor: pointer;
    }
    .diaConBtnBox .confirmBtn{
      margin:24px 12px 36px 40px;
    }
    .diaConBtnBox .cancelBtn{
      background:rgba(55,71,79,1);
      box-shadow:0px 4px 0px 0px rgba(38,50,56,0.8);
      border-radius:23px;
      margin-top:24px;
    }
    .diaConBtnBox .startCouse{
      width:180px;
      margin:24px 90px;
    } 
    
    .diaConBtnBox .cancelBtn:hover{
      box-shadow:0px 2px 0px 0px rgba(38,50,56,0.8);
    }
    .diaConBtnBox .cancelBtn:active{
      background:rgba(45,58,64,1);
      box-shadow:0px 1px 0px 0px rgba(38,50,56,0.8);
    }
    .diaConBtnBox .confirmBtn:hover{
      box-shadow:0px 2px 0px 0px rgba(215,67,20,0.8);
    }
    .diaConBtnBox .confirmBtn:active{
      background:rgba(239,94,48,1);
      box-shadow:0px 1px 0px 0px rgba(215,67,20,0.8);
    }
    
    /*我要提问*/
    .myAskDialog{
      display:none;
      position: fixed;
      right:0;
      bottom:30px;
      z-index:999;
      width:80px;
      min-height:60px;
    }
    .myAskDialog .askInfoImg{
      position:absolute;
      bottom:60px;
      right:4px;
      width:300px;
      max-width: none;
      display:block;
    }
    .myAskBox{
      position:absolute;
      right:0;
      bottom:0px;
      width:195px;
      height:60px;
      background:linear-gradient(180deg,rgba(255,111,65,1) 0%,rgba(255,87,33,1) 100%);
      box-shadow:5px 3px 6px 0px rgba(38,50,56,0.08);
      border-radius:33px 0px 0px 33px;
      /* overflow: hidden; */
      cursor: pointer;
    }
    .myAskBox:hover{
      background:linear-gradient(180deg,rgba(255,111,63,1) 0%,rgba(243,81,30,1) 100%);
      box-shadow:5px 3px 6px 0px rgba(38,50,56,0.08);
    }
    .myAskBox:active{
      background:linear-gradient(180deg,rgba(244,82,30,1) 0%,rgba(229,74,27,1) 100%);
      box-shadow:3px 2px 5px 0px rgba(38,50,56,0.08);
    }
    .myAskBox .teaImg{
      float:left;
      width: 48px;
      height: 48px;
      border: 3px solid rgba(255, 255, 255, 1);
      border-radius: 50%;
      margin: 6px 6px;
    }
    .myAskDialog .leftCon{
      height:100%;
      width:135px;
      float:left;
      line-height:60px;
    }
    .ask_con{
      font-size:18px;
      font-family:"AlibabaPuHuiTiH";
      color:rgba(255,255,255,1);
      margin:0 5px 0 4px;
    }
    .ask_con,.myAskImg{
      float:left;
    }
    .myAskImg{
     width:18px;
     margin-top:20px;
    }
    .askCloseBox{
      float:right;
      width:18px;
      height:60px;
      background:rgba(191,54,12,0.16);
      /* opacity:0.16; */
    }
    .askCloseBox img{
     display: block;
     width:18px;
     margin-top:20px;
    }
    .myAskBox.tTiny .askImgShade{
       position: absolute;
       left:0;
       top:0;
       width:60px;
       height:60px;
       /* background:pink; */
    }
    .tTiny{
      width:60px;
      right:15px;
      border-radius:33px;
    }
    /*ask 弹出框*/
    #stage-canvas .mbox.ask .prompts.outside{
      height:60px;
      border-radius: 6px;
    }
    #stage-canvas .mbox.ask .prompts{
       bottom:18px;
       left:10%;
       right:10%;
       background:rgba(38,50,56,0.8);
    }
    #stage-canvas .mbox.ask.input .prompt.input>span input{
      height:32px;
      float: left;
      margin-left: 12px;
      width: 75%;
      border: 0;
      padding: 0;
    }
    #stage-canvas .mbox.ask.input .prompt.input>span{
      right:0px;
      left:0px;
    }
    #stage-canvas .mbox.ask.input .prompt.input span:first-child{
      border-radius: 24px;
      background: #fff;
      height: 36px;
      border: 2px solid rgba(255,112,67,1);
    }
    #stage-canvas .mbox.ask.input .prompt.input a{
      right:-4px;
    }
    #stage-canvas .mbox.ask.input .prompt.input a{
      width:75px;
      height:27px;
      /* background:rgba(255,112,67,1); */
      box-shadow:0px 3px 0px 0px rgba(215,67,20,0.8);
      border-radius:18px;
      border:0;
      margin-top:3px;
      background:rgba(255,112,67,1) url("../img/ui/askCur.png") no-repeat center center;
      background-size:24px 24px;
    }
    #stage-canvas .mbox.ask.input .prompt.input a:hover{
      box-shadow:0px 1px 0px 0px rgba(215,67,20,0.8);
    }
    /* .prompts.outside .askCurImg{
      position: absolute;
      right:38px;
      top:18px;
      width:24px;
      height:24px;
      background:url("../img/ui/askCur.png") no-repeat center center;
      background-size:100% 100%;
    } */
    #stage-canvas .mbox.ask.input .prompt.input a:active{
      background:rgba(239,94,48,1) url("../img/ui/askCur.png") no-repeat center center;
      box-shadow:0px 1px 0px 0px rgba(215,67,20,0.6);
      background-size:24px 24px;
    }
  
.blocksBox{
    position: absolute;
    left:0px;
    top:0;
    bottom:8px;
    overflow: auto;
    height: 100%;
    /* width:100%; */
    right:0;
    border-right:1px solid rgba(207,216,220,1);
}

#win-editor.docked .blocksBox{
    border-right: none;
}
    
#win-tools .palette .tools-code .blocks .valueSwitch, #win-tools .palette .tools-code .blocks .hasSwitch{
    display: inline-block;
}
#win-tools .palette .tools-code .blocks .valueSwitch {
    margin-right: 8px;
    margin-bottom: 6px;
    width:16px;
    height:16px;
    background:rgba(236,239,241,1);
    border-radius:4px;
    border:1px solid rgba(207,216,220,1);
}
#win-tools .palette .tools-code .blocks .valueSwitch:hover {
    border:1px solid rgba(255,87,34,1);
}
#win-tools .palette .tools-code .blocks .valueSwitch:active,
#win-tools .palette .tools-code .blocks .valueSwitch.select:active {
    background:rgba(255,110,64,1);
}
#win-tools .palette .tools-code .blocks .valueSwitch.select {
    border: 0;
    background:url("../img/ui/valueSwitch.svg") no-repeat center rgba(255,110,64,1);
}

#stage-canvas .mbox.ask .prompts.outside {
    display: block;
    padding: 8px;
    height: 54px;
}

#stage-canvas .mbox .prompt.input #limitFont {
    float: right;
    position: relative;
    height: 36px;
    line-height: 36px;
    margin-right: 85px;
    color: #90A4AE;
}

/* virtualKey */
.virtualKey {
  width: 100%;
  padding: 24px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  z-index: 999;
  font-size:18px;
  font-family:PingFangSC-Semibold,PingFang SC;
  font-weight:600;
  color:rgba(255,255,255,1);
  line-height:48px;
  text-align: center;
  display: flex;
  align-items: flex-end;
}
.virtualKey-layout-left, .virtualKey-layout-right {
  position: relative;
  width: 50%;
  bottom:0;
  display: flex;
  flex-direction: column-reverse;
}
.virtualKey-layout-left {
  justify-content: flex-start;
}
.virtualKey-layout-right {
  justify-content: flex-end;
  /* display: none; */
}
.virtualKey-line {
  display: flex;
  position: relative;
  height: 48px;
  width: 156px;
  margin-bottom: 6px;
}
.virtualKey-line:first-child {
  margin-bottom: 0px;
}
.virtualKey-layout-left .virtualKey-line {
  flex-direction: row;
  align-self: flex-start;
}
.virtualKey-layout-right .virtualKey-line {
  flex-direction: row;
  align-self: flex-end;
}
.virtualKey-key {
  width:48px;
  height:48px;
  background-color:rgba(55,71,79,0.82);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  box-shadow:0px 2px 6px 0px rgba(38,50,56,0.16);
  border-radius:6px;
}
.virtualKey-key-extra {
  margin-left: 6px;
  width: 65px;
  font-size: 15px;
}
.virtualKey-style-leftArrow {
  background-image: url('../img/ui/virtualKey-leftArrow.png');
}
.virtualKey-style-downArrow {
  background-image: url('../img/ui/virtualKey-downArrow.png');
}
.virtualKey-style-rightArrow {
  background-image: url('../img/ui/virtualKey-rightArrow.png');
}
.virtualKey-style-upArrow {
  background-image: url('../img/ui/virtualKey-upArrow.png');
}
.virtualKey-mod-monopolize-center {
  margin: 0 auto;
}
.virtualKey-mod-monopolize-bottom {
  width:156px;
  height:48px;
  background:rgba(55,71,79,0.82);
  box-shadow:0px 2px 6px 0px rgba(38,50,56,0.16);
  border-radius:6px;
}
.virtualKey-mod-left {
  position: absolute;
  left: 0;
}
.virtualKey-mod-center {
  margin: 0 auto;
}
.virtualKey-mod-right {
  position: absolute;
  right: 0;
}
.virtualKey-mobile {
  padding: 6px !important;
  line-height:40px !important;
  font-size: 15px !important;
}
.virtualKey-mobile .virtualKey-line {
  height: 40px;
  width: 130px;
  margin-bottom: 5px;
}
.virtualKey-mobile .virtualKey-key {
  width: 40px;
  height: 40px;
  background-size: 25px 25px;
}
.virtualKey-mobile .virtualKey-key-extra {
  margin-left: 5px;
}
.virtualKey-mobile .virtualKey-mod-monopolize-bottom {
  width:130px;
  height:40px;
}
/*virtualKey end*/
/*h5-adapt*/
.h5-adapt #win-assets .delete {
  box-sizing: content-box !important;
  border-radius: 0 !important;
  border-left: 14px solid rgba(0,0,0,0) !important;
  border-bottom: 14px solid rgba(0,0,0,0) !important;
}
.h5-adapt .bm-content .chooseBox ul li:hover {
  border:1px solid rgba(207,216,220,1);
}

a.btn-round, .btn-round {
  color: #000;
}
/* 钢琴键 */
#pianoKeys {
    position: absolute;
    z-index: 9999;
    background-image: url("../img/piano/pianoBackground.png");
    width: 352px;
    height: 154px;
}

#pianoKeys .pianoTop{
    position: absolute;
    top: 29px;
    height: 24px;
    display: flex;
    width: 100%;
}

#pianoKeys .pianoTop p{
    position: absolute;
    left: 158px;
    top: 4px;
    font-size: 14px;
    font-family: HelveticaNeue;
    line-height: 14px;
    color:rgba(255,255,255,1);
}


#pianoKeys .pianoBottom{
    position: absolute;
    bottom: 17px;
    left: 14px;
    height: 72px;
    display: flex;
    width: 320px;
    overflow: hidden;
}

#pianoKeys .whiteKey{
    background: rgba(255,255,255,1);
    width: 40px;
    height: 72px;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid rgba(38,137,83,1);
    position: absolute;
}

#pianoKeys .blackKey{
    background: rgba(55,71,79,1);
    width: 32px;
    height: 40px;
    border-radius:0px 0px 4px 4px;
    border:1px solid rgba(38,137,83,1);
    position: absolute;
}

#pianoKeys .pianoKey.select{
    background: rgba(251,233,231,1);
}

#pianoKeys .pianoTop img{
    position: absolute;
}

#pianoKeys .pianoKey p{
    margin: 52px auto 0;
    text-align: center;
    font-size: 9px;
    font-family: HelveticaNeue;
    color: rgba(55,71,79,1);
    line-height: 9px;
}

.deletemask-tools{
  opacity: 0;
  z-index: 50001;
  position: absolute;
}

#win-code .code canvas {
    background-color: #f9f9f9;
}
#confirm.firmDelStyle{
  width: 409px;
  height: 340px;
}
#confirm.firmDelStyle .ide-confirmdel {
  background: url(../img/ui/del.png) no-repeat;
  width: 77px;
  height: 88px;
  background-size: 100% 100%;
  margin: 52px auto 0;
}
#confirm.firmDelStyle .delspan{
  margin-top: 29px;
  font-size: 24px;
  margin-bottom: 0;
}
#confirm.firmDelStyle .delCon{
  font-size: 14px;
  background: url(../img/ui/del-bg.png) no-repeat;
  background-size: cover;
  line-height: 50px;
  height: 50px;
}
#confirm.firmDelStyle .buttonbar{
  display: flex;
  -webkit-justify-content: space-around;
  -o-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  -o-align-items: center;
  -moz-align-items: center;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
}
#confirm.firmDelStyle .buttonbar a{
  padding: 0 !important;
  margin: 0;
  width: 150px;
  height: 48px;
  text-align: center;
  font-size: 19px;
  line-height: 48px;
  border-radius: 24px;
}
#confirm.firmDelStyle .buttonbar #confirmRight,
#confirm.firmDelStyle .buttonbar #confirmRight:hover,
#confirm.firmDelStyle .buttonbar #confirmRight:active{
  background: #188BF6;
  color: #FFFFFF;
  box-shadow: none;
}
#confirm.firmDelStyle .buttonbar #confirmLeft,
#confirm.firmDelStyle .buttonbar #confirmLeft:hover,
#confirm.firmDelStyle .buttonbar #confirmLeft:active{
  background: #C2D2E1;
  color: #FFFFFF;
  box-shadow: none;
}

.app_platform #win-tools .palette .tools-code .blocks{
  overflow-x: auto;
  overflow-y: auto;
}
#costumes.costumesbottom{
  bottom: 127px!important;
}
.costumebg{
  position: absolute;
  bottom: 0;
  width: 130px;
  height: 127px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -ms-flex-direction: column;
  align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -ms-flex-pack: center;
  background: #F6FBFF;
  border-radius: 0px 0px 0px 7px;
}
.costumebg>.addCostumeBtn{
  background: #FFFFFF;
  border: 1px solid #CFD8DC;
  border-radius: 12px;
  width: 104px;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #0156A4;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -ms-flex-pack: center;
}
.costumebg>.addCostumeBtn:hover,
.costumebg>.addCostumeBtn:active{
  border: 1px solid #0084FF;
  color: #0084FF;
}
.costumebg>.addCostumeBtn>img{
  width: 16px;
  height: 16px;
  margin-right: 7px;
}
.costumebg>.addCostumeBtn.bottomBtn{
  margin-top: 13px;
}

.virk-zoom-in {
  animation: virk-zoom-in 0.1s forwards;
}
.virk-zoom-out {
  animation: virk-zoom-out 0.1s forwards;
}
@keyframes virk-zoom-in {
  0% { transform: scale(1); }
  100% { transform: scale(0.8); }
}
@keyframes virk-zoom-out {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

/* 隐藏舞台区缩放按钮，仅保留全屏按钮 */
#stagecmd-min {
  display: none !important;
}
#stagecmd-half {
  display: none !important;
}

.live-reset {
  width: 86px;
  height: 32px;
  line-height: 32px;
  position: absolute;
  right: 18px;
  border-radius: 16px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  background: #39A0FF;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-reset img {
  width: 18px;
  margin-left: 3px;
}
.reset-btn-header{
  position: absolute;
  right: 0;
  top:50%;
  transform: translate(-50%,-50%);
  /* width: 65px;
  height: 24px; */
  width: 94px;
  height: 32px;
  background: #39A0FF;
  border-radius: 16px;
  line-height: 32px;
  text-align: center;
}
.reset-btn-title{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  display: inline-block;
}
.reset-btn-img{
  background: url(../img/ui/reset.png) no-repeat;
  width: 14px;
  height: 11px;
  margin-left: 2px;
  display: inline-block;
  background-size: contain;
}

#var-create, #func-create,#list-create,#list-edit{
  height: auto !important;
  width: 440px;
  background: #FFFFFF;
  box-shadow: 0px 14px 29px 0px rgba(120, 151, 192, 0.4);
  border-radius: 19px;
  overflow: hidden;
}

#var-create input,#func-create input,#list-create input{
  background: #F3F3F3;
  border: 1px solid #E6E6E6;
}


.pop-title{
  font-size: 21px !important;
  font-family: PingFang SC;
  font-weight: 600 !important;
  color: #333333;
  text-align: center;
  margin-top: 44px;
}

.pop-section{
  width: 342px;
  margin: 10px auto !important;
}

.pop-input{
  margin-top: 10px !important;
}

#var-create hr{
  width: 335px;
}

#var-create .section label:nth-child(1) input{
  margin-top: 10px;
}

.varradio,.varreset{
  /* appearance: auto; */
  /* margin: 10px 0 0 0 !important; */
  position: relative !important;
  top: 5px !important;
}

.varreset,.varradio{
  width: 18px;
  height: 18px;
  background-color: initial;
  cursor: default;
  appearance: none;
  box-sizing: border-box;
  margin: 3px 3px 3px 4px;
  padding: initial;
  border: initial;
}

.varreset:checked{
  background: url("../img/ui/checkbox.png") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.varradio:checked{
  background: url("../img/ui/radio.png") no-repeat center center !important;
  background-size: 100% 100% !important;
}

.varradio{
  width: 15px;
  height: 15px;
  border-radius: 50%;
}


#var-create .section .revalue{
  margin-top: 10px;
}

.pop-button{
  margin-right: 47px !important;
  float: right;
  padding-right: 0 !important;
}

.pop-button a{
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #188BF6;
  line-height: 28px;
  margin-bottom: 36px !important;
  margin-left: 10px !important;
}

.pop-button .cancelBtn{
  background: #FFFFFF !important;
  color: #188BF6 !important;
  border: 1px solid #188BF6;
}

.pop-button .createBtn{
  background: #188BF6 !important;
  color: #FFFFFF !important;
}

#func-create .addBtn{
  width: 90px;
  height: 33px;
  background: #188BF6;
  border-radius: 8px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 18px;
}
.list-show{
  position: absolute;
  width: 100%;
  height: 85%;
  z-index: 1000;
  font-size: 100px; 
}

.list-all {
  width: 6.5em;
  height: 12.66em;
  background: hsla(215, 100%, 95%, 1);
  border: .06em solid hsla(0, 0%, 0%, 0.15);
  border-radius: .33em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .15em;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.list-large{
  /* top: 65px;
  left: 42px; */
}

.list-header{
  background: hsla(0, 100%, 100%, 1);
  border-bottom: .06em solid hsla(0, 0%, 0%, 0.15);
  text-align: center;
  /* height: 1.33em; */
  min-height: 1.33rem;
  font-weight: bold; 
  color: hsla(225, 15%, 40%, 1);
  width: 100%;
  line-height: 1.5em;
  font-size: .8em;
}

.list-content{
  position: relative;
  width: 100%;
  overflow-y: auto;
  flex: 1;
}

.list-content::-webkit-scrollbar {
  width: 4px;
}
.list-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,0,0,0.2);
}
.list-content::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}


.list-footer{
  background: hsla(0, 100%, 100%, 1);
  border-bottom: .06em solid hsla(0, 0%, 0%, 0.15);
  text-align: center;
  min-height: 1.33em;
  font-weight: bold;
  color: hsla(225, 15%, 40%, 1);
  width: 100%;
  line-height: 1.5em;
  font-size: .8em;
}

.list-item {
  width: 100%;
  height: 1.67em;
  display: flex;
  flex-direction: row;
  align-items: center;
  transform: translateZ(0);
}

.list-index{
  font-weight: bold;
  color: hsla(225, 15%, 40%, 1);
  height: 22px;
  line-height: 24px;
  text-align: center;
  font-size: .6em;
  min-width: 15%;
  /* width: 15%; */
}

.list-none{
  font-weight: bold;
  color: hsla(225, 15%, 40%, 1);
  text-align:center;
  width:100%;
  height: 1.47em;
  line-height: 1.47em;
  font-size: .8em;
}

.list-value {
  background: rgb(252, 102, 44);
  width: 4.67em;
  text-align: left;
  color: white;
  margin: 0 .2em;
  border-radius: 2px;
  border: 1px solid hsla(0, 0%, 0%, 0.15);
  height: 1.47em;
  line-height: 1.47em;
}

.list-text{
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
  width: 4.67em;
  margin-left: 5%;
  white-space: pre;
  font-size: .8em;
}

.var-show{
  position: absolute;
  width: 100%;
  height: 85%;
  z-index: 1000;
  font-size: 100px;
}

.var-item{
  background: hsla(215, 100%, 95%, 1);
  border: 0.1em solid hsla(0, 0%, 0%, 0.15);
  border-radius: 0.4em;
  font-size: 0.12em;
  /* height: 25px; */
  padding: 0.25em;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 1001;
}

.var-name{
  font-weight: bold;
  text-align: center;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0.5em;
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.var-value{
  color: #ffffff;
  text-align: center;
  min-width: 3.3em;
  background: #47AB9E;
  border-radius: 2px;
  white-space: pre-wrap;
  height: 1.3em;
  line-height: 1.4em;
}
.proj-run{
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70px;
  background-image: url(../img/ui/bottom_play.png);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
}

.player-control{
  cursor: pointer;
  width: 85px;
  height: 34px;
  line-height: 36px;
  background-color: #FF763D;
  color: #FFFFFF;
  border-radius: 30px;
  margin: 10px 40px;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 10px;
  text-align: center;
}
.play-run{
  background-image: url('../img/ui/star.png');
}

.play-stop{
  background-image: url('../img/ui/pause.png');
}

#science-result{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2000;
  background: url('../img/sciencegif/mask.png');
}
#science-result img{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  max-width: 450px;
}