.question-tip-layer {
  width: 279px;
  padding: 36px 26px 22px 25px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}
.question-tip-layer .ques-hd {
  font-size: 12px;
  color: #787d81;
}
.question-tip-layer .experience {
  color: #1588cc;
}
.question-tip-layer .credit {
  color: #fd7822;
}
.question-tip-layer .ques-bd {
  position: relative;
  text-align: left;
}
.question-tip-layer .ques-bd a {
  color: #000;
  font-size: 14px;
  line-height: 26px;
}
.question-tip-layer .ques-bd a:hover {
  color: #f01000;
}
.question-tip-layer .ques-bd .icon-ques-revert {
  color: #1589c9;
  font-size: 15px;
  margin-right: 5px;
}
.question-tip-layer .ques-bd li {
  display: none;
  margin-top: 11px;
}
.question-tip-layer .ques-bd .curr {
  display: block;
}
.question-tip-layer .ques-bd .ques-title {
  max-height: 52px;
  display: inline-block;
  overflow: hidden;
}
.question-tip-layer .ques-bd .change-ques {
  color: #b5b9bc;
  display: block;
  text-align: right;
  margin: 11px 85px 0 0;
}
.question-tip-layer .ques-bd .change-ques:hover {
  color: #f11401;
}
.question-tip-layer .ques-bd .to-answer {
  position: absolute;
  bottom: 0px;
  right: 0;
  color: #35b454;
}
.question-tip-layer .ques-bd .to-answer:hover {
  color: #f11401;
}
.question-tip-layer .close-ques-layer {
  color: #b4bbbf;
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
}
.wrap {
  position: relative;
  overflow: hidden;
  margin-top: 41px;
}
#study-section {
  height: auto;
}
.submenulist {
  padding-bottom: 1px;
  background-color: #000;
}
/*layout*/
.cmain-container {
  position: relative;
  /*overflow:hidden;*/
  height: 100%;
  min-height: 600px;
  background: #000;
}
.cwrap-autoheight {
  position: absolute;
  top: 0;
  bottom: 0px;
}
.aticle-container {
  left: 0;
  width: 400px;
  overflow-y: auto;
  background: #edf1f2;
}
.editor-container {
  background: #000;
  left: 400px;
  right: 700px;
}
.result-container {
  right: 0;
  width: 700px;
  background-color: #fff;
  bottom: 0px;
  z-index: 900;
}
.editor-drag-wrap,
.result-drag-wrap {
  position: absolute;
  width: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}
.editor-drag-wrap {
  z-index: 900;
}
.result-drag-wrap {
  background-color: #fff;
}
.editor-drager,
.result-drager {
  position: absolute;
  color: #fff;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
  cursor: e-resize;
}
.editor-drager span,
.result-drager span {
  position: absolute;
  width: 10px;
  height: 30px;
  top: 50%;
  left: 0;
  margin-top: -15px;
  text-align: center;
}
.result-drager {
  color: #333;
}
.result-triggers {
  position: absolute;
  right: 30px;
  top: 10px;
  z-index: 901;
}
.mr10 {
  margin-right: 10px;
}
.ace-tomorrow-night {
  background: #37343a;
}
.editor-item.visible-hid {
  visibility: hidden;
}
.result-toggle i {
  display: inline-block;
  vertical-align: -2px;
  width: 13px;
  height: 13px;
  margin-right: 3px;
}
.result-toggle:link,
.result-toggle:visited {
  display: inline-block;
  height: 29px;
  line-height: 29px;
  padding: 0 10px;
  text-align: center;
  cursor: pointer;
  background-color: #e5e5e5;
  border-radius: 3px;
}
.result-toggle-width {
  visibility: hidden;
}
.result-toggle:hover {
  background-color: #666;
  color: #fff;
}
.result-toggle:hover i {
  background-position: 0 -23px;
}
.result-wrap {
  padding: 0 15px;
  height: 100%;
}
#viewPort-content {
  height: 100%;
}
@media only screen and (max-width: 1224px) {
  /* Styles */
  #editor-content {
    width: 100%;
  }
  #viewPort {
    width: 0;
  }
  #view-resultBtn {
    display: block;
    margin-left: -100px;
  }
  #view-zoomOut {
    display: none;
  }
}
/* 澶т簬 1224px*/
@media only screen and (min-width: 1224px) {
  #view-resultBtn {
    display: none !important;
  }
}
/*editor*/
.editor-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 50px;
}
.editor-tab {
  position: relative;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #c1c1c1;
  overflow: hidden;
}
.editor-tab .editor-op {
  display: none;
  width: 50px;
  height: 50px;
  position: absolute;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  color: #787d82;
}
.editor-tab .editor-op:hover {
  color: #f5f3f3;
}
.editor-tab .editor-left {
  left: 0;
  top: 0;
}
.editor-tab .editor-right {
  right: 0;
  top: 0;
}
.editor-tab .editor-view {
  margin-left: 0px;
  margin-right: 0px;
  height: 50px;
  overflow: hidden;
}
.editor-tab .editor-view ul {
  position: relative;
  width: 2000px;
}
.editor-tab.js-hasop .editor-op {
  display: block;
}
.editor-tab.js-hasop .editor-view {
  margin-left: 50px;
  margin-right: 50px;
}
@media only screen and (max-width: 1216px) {
  .editor-tab .editor-right {
    right: 160px;
  }
  .editor-tab.js-hasop .editor-op {
    display: block;
  }
  .editor-tab.js-hasop .editor-view {
    margin-right: 210px;
  }
}
.editor-tab span {
  padding: 0 20px;
  font-size: 18px;
}
.editor-tab li {
  float: left;
}
.editor-tab li a {
  display: block;
  padding: 0 30px;
  color: #787d82;
}
.editor-tab li:hover a {
  color: #fff;
}
.editor-tab li.ui-tabs-active a {
  background: #1D1F21;
  color: #fff;
}
.editor-item {
  visibility: visible;
  width: 100%;
  position: absolute !important;
  top: 50px;
  bottom: 0;
}
.editor li {
  position: absolute;
  top: 49px;
  right: 0;
  bottom: 50px;
  left: 0;
  background: #000000;
}
.editor-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #14191e;
}
.editor-btn-inner {
  padding: 10px;
}
.editor-btn-inner .code-btn-submit,
.editor-btn-inner .code-btn-reset {
  color: #fff;
}
.editor-btn-inner .code-btn-submit {
  background: #52488f;
}
.editor-btn-inner .code-btn-reset {
  background: #3d3842;
}
.code-btn-save {
  margin-right: 10px;
}
.code-btn-submit:link,
.code-btn-submit:active,
.code-btn-reset:link,
.code-btn-reset:active {
  height: 30px;
  width: 120px;
  line-height: 30px;
  text-align: center;
  background-color: #00b33b;
  color: #fff;
  webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -ms-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.code-btn-submit:hover {
  background-color: #2ee66b;
}
.code-btn-reset:link,
.code-btn-reset:active {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  background-color: #14191e;
  color: #fff;
  border: 1px solid #363c40;
}
.code-btn-reset:hover {
  background-color: #363c40;
}
.editor-commit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  z-index: 88;
  color: #b5b9bc;
  text-align: center;
  font-size: 16px;
}
.editor-commit p {
  margin: 35px 0;
  max-height: 150px;
  overflow: visible;
  padding: 0 50px 0 40px;
  text-align: left;
}
.editor-commit .status {
  width: 25px;
  line-height: 25px;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: 5px;
}
.editor-commit .success .status {
  color: #00b33b;
  font-size: 24px;
}
.editor-commit .fail .status {
  color: #b5b9bc;
  font-size: 24px;
}
.editor-commit .operate {
  cursor: pointer;
}
.editor-commit .suColor {
  font-size: 14px;
  color: #00b33b;
}
.editor-commit .suColor:hover {
  color: #2ee66b;
}
.editor-commit .faColor {
  color: #ff6650;
}
.editor-commit .close {
  position: absolute;
  right: 20px;
  top: 45px;
  width: 22px;
  height: 22px;
  color: #86898b;
}
.editor-commit .close:hover {
  color: #f8f8f8;
}
/*panel*/
.code-panel {
  overflow-y: auto;
  background: #edf1f2;
  overflow-x: hidden;
}
.panel-list {
  padding: 0 10px;
  overflow-y: auto;
}
.code-panel .pic-code {
  display: block;
  margin: 0 auto;
  width: 107px;
  height: 28px;
  background: url(../img/asset_code.png) 0 -106px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  font: 18px/28px Microsoft YaHei;
}
.code-panel .publish .shot-btn,
#qa_side .shot-btn {
  background-position: 0 -408px;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
}
.code-panel .publish .shoted,
#qa_side .shoted {
  background-position: 0 -476px;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
}
.publish {
  position: relative;
}
.publish .shot {
  text-align: center;
}
.publish .shot .icon-x {
  width: 24px;
  height: 24px;
  position: absolute;
  right: -10px;
  top: -10px;
  background: url(../img/icon.png) 0 -53px;
  cursor: pointer;
}
.publish .shot-btn {
  position: relative;
  margin-bottom: 4px;
  width: 120px;
  height: 88px;
  cursor: pointer;
  background: #cccccc url(../img/code-shot.png);
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
}
.publish .shot-btn.shoted {
  background-position: left bottom;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
}
.publish .shot-btn button {
  float: right;
  display: none;
}
.publish .shot-btn.off {
  cursor: default;
  background: none;
}
.publish .shot-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 68px;
}
.publish .shot-time {
  padding: 3px 4px;
  background-color: #000;
  color: #fff;
}
.publish .form {
  margin-left: 125px;
}
.publish .form textarea {
  margin-bottom: 3px;
  display: block;
  width: 100%;
  height: 66px;
  border: 1px solid #cdcdcd;
  resize: none;
}
.view-editor-box {
  position: relative;
  background: #232c31;
}
.view-editor-box .run_area {
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #13191d;
}
.view-editor-box .run {
  float: left;
  margin: 5px 0 0 5px;
}
#qa_code {
  margin-right: 420px;
}
#qa_side {
  width: 420px;
  float: right;
  margin-right: -420px;
  background: #fff;
  position: relative;
}
#qa_side .publish {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 0;
}
/*side*/
.repl {
  padding: 5px;
}
.list-li {
  position: relative;
  padding: 10px 0 6px;
  min-height: 70px;
  font-size: 12px;
}
#J_replyList .list-li {
  padding: 0 10px;
}
.list-user {
  width: 40px;
  height: 40px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 10px;
  line-height: 16px;
}
.list-con {
  margin-left: 50px;
}
.list-text {
  margin-top: -3px;
  line-height: 1.6;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
  min-height: 37px;
  _height: 37px;
  padding-right: 10px;
}
#question .list-text {
  margin-right: 35px;
}
.list-pic {
  position: relative;
  margin: 5px 0;
}
.list-time {
  position: absolute;
  bottom: 0;
  left: 165px;
  width: 53px;
  height: 20px;
  line-height: 20px;
  background: url(../img/mod_question.png);
  text-align: right;
  cursor: pointer;
}
.list-time:hover {
  opacity: 0.8;
}
.list-time span {
  font-size: 12px;
  padding-right: 2px;
}
.list-time .arrow {
  width: 0px;
  height: 0px;
  border: 5px solid;
  border-color: transparent transparent transparent #fff;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  *vertical-align: middle;
}
.list-sub {
  color: #999999;
}
.list-sub strong {
  color: #c9394a;
}
.list-sub ul li {
  float: left;
}
.list-sub ul a {
  padding: 0 7px;
}
.list-sub ul a.expand {
  border: none;
}
.list-sub ul a.detail {
  padding-right: 0;
}
.qa-reply {
  clear: both;
  margin-top: 9px;
  border-bottom: none;
}
.qa-reply .list-user {
  left: 5px;
  top: 7px;
}
.qa-reply .list-con {
  margin-left: 30px;
}
.list-texts {
  margin-top: -4px;
  min-height: 46px;
}
.qa-replylist li {
  border-bottom: 1px solid #E5E5E5;
  padding: 7px 10px;
  word-break: break-all;
  word-wrap: break-word;
}
.panel-list-qa {
  overflow-y: auto;
}
.codeicon {
  display: block;
  width: 118px;
  height: 28px;
  text-indent: -200%;
  overflow: hidden;
}
.codeicon.jsp {
  background: url(../img/code_icon.png) no-repeat;
  width: 88px;
  height: 28px;
}
.list-sub {
  padding-top: 4px;
}
.ka {
  font-size: 16px;
  font-weight: bold;
  margin-right: 15px;
}
#interact-other {
  overflow: auto;
}
.interact-con {
  clear: both;
}
#masker {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 35px;
  display: none;
}

.study-sidebar {
  width: 399px;
  border: 1px solid #b1b1b1;
  border-left: none;
}
h1.code-head {
  border-bottom: 1px solid #d0d6d9;
  font-size: 16px;
  font-weight: 600;
  font-family: "微软雅黑";
  line-height: 20px;
  color: #14191e;
  padding: 16px 0px;
  margin: 0 15px;
}
.code-description {
  color: #14191e;
  word-break: break-all;
}
.code-desc {
  padding: 0 15px 15px;
  word-break: break-all;
  overflow: hidden;
}
.code-desc img {
  max-width: 100%;
}
.code-desc p {
  line-height: 1.6;
  color: #1f2426;
  padding: 5px 0;
}
.code-desc strong,
.code-tips strong {
  font-weight: bold;
}
.code-pic {
  text-align: center;
}
.code-description img {
  clear: both;
  max-width: 400px;
}
.code-tips {
  position: relative;
  z-index: 1;
  padding: 15px 15px;
  background: #d0d6d9;
}
.code-tips-title {
  height: 24px;
  line-height: 24px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #14191e;
}
.code-tips ul {
  clear: both;
}
.code-tips ul li em {
  border: 1px solid #cecece;
  background: #fff;
  padding: 0 5px;
  text-align: center;
  height: 19px;
  line-height: 19px;
  margin-left: 8px;
}
.code-qa {
  margin: 10px auto 0;
}
.code-qa pre {
  white-space: pre-wrap;
}
.code-qa dl {
  background: #fff;
  padding: 3px 15px;
}
.code-qa dl dt b {
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  background: #c9394a;
  display: inline-block;
  color: #fff;
  margin-right: 9px;
}
.code-qa dl dt {
  color: #868686;
  font-size: 14px;
  cursor: pointer;
}
.code-qa dl dd {
  color: #5e5e5e;
  font-size: 12px;
  line-height: 24px;
  padding: 10px 0;
}
.code-show {
  clear: both;
  margin-top: 7px;
  border: 1px solid #e1e2e3;
  background: #fff;
}
.marker {
  padding: 1px 5px;
  display: inline;
  border: 1px solid #ddd;
  background: #fff;
  margin: 0 4px;
  font-family: Georgia, "Times New Roman", Times, serif;
  border-radius: 2px;
}
pre.code {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  border: 1px solid #ddd;
  background: #fff;
  padding: 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.6em;
  border-radius: 2px;
}
abbr {
  cursor: help;
  border-bottom: 1px dotted;
}
.imgview-mask {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 999998;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.75;
  filter: alpha(opacity=75);
  text-align: center;
  display: none;
}
.show-img a {
  position: absolute;
  width: 40px;
  height: 40px;
  right: -40px;
  top: -40px;
  background: url(../img/index-close.png) no-repeat -10px -10px;
}
.show-img a:hover {
  background-position: -10px -78px;
}
.show-img {
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 50% ;
  margin: -50px 0 0 -100px;
  background: #fff;
  z-index: 999999;
  text-align: center;
}
.imgbox {
  text-align: center;
}
/*course ques layer*/
.editor-container .question-tip-layer {
  position: absolute;
  bottom: 112px;
  left: 20px;
  z-index: 1385;
  display: none;
}
/*judge box*/
.barWrap .judgeDown {
  position: static;
  float: right;
}
.barWrap .downLead {
  display: none;
}
.barWrap .judegebox {
  top: -214px;
  right: -181px;
  z-index: 910;
}
.barWrap .arrowR {
  background: url(../img/judge2.png) no-repeat -83px -18px;
  width: 14px;
  height: 10px;
  top: 201px;
  left: 194px;
}
.co {
  line-height: 1.6em;
  color: #14191e;
}
.co strong,
.co b {
  font-weight: bold;
}
.co em {
  font-style: italic;
}
.co sub {
  vertical-align: sub;
  font-size: smaller;
}
.co sup {
  vertical-align: super;
  font-size: smaller;
}
.co ol,
.co ul {
  display: block;
  margin: 1em 0;
  padding: 0 40px;
  font-size: 13px;
  list-style-type: decimal;
}
.co ul {
  list-style-type: disc;
}
.co blockquote {
  font-style: italic;
  font-family: Georgia, Times, "Times New Roman", serif;
  padding: 2px 8px 2px 10px;
  border-left: 3px solid #98a1a6;
}
.co a {
  color: #0782C1;
}
.co h1,
.co h2,
.co h3,
.co h4,
.co h5,
.co h6 {
  font-weight: normal;
  line-height: 1.2em;
}
.co h1 {
  margin: 0.67em 0;
  font-size: 22px;
}
.co h2 {
  margin: 0.83em 0;
  font-size: 20px;
}
.co h3 {
  margin: 1em 0;
  font-size: 18px;
}
.co h4 {
  margin: 1.33em 0;
  font-size: 16px;
}
.co h5 {
  margin: 1.67em 0;
  font-size: 14px;
}
.co hr {
  border: 0px;
  border-top: 1px solid #ccc;
}
.co img.right {
  border: 1px solid #ccc;
  float: right;
  margin-left: 15px;
  padding: 5px;
}
.co img.left {
  border: 1px solid #ccc;
  float: left;
  margin-right: 15px;
  padding: 5px;
}
.co pre {
  white-space: pre-wrap;
  /* CSS 2.1 */
  word-wrap: break-word;
  /* IE7 */
  background:#ccc;
     padding: 10px;
	 font-family:'微软雅黑';
	 cursor:pointer;
}
.codeTip{
	position:absolute;
	background:red;
	color:white;
	padding:4px 6px;
	font-size:12px;
}
.co .marker {
  background: #EEEEEE;
  border: 1px solid #CCCCCC;
  margin: 0 5px;
  padding: 0 6px;
  font-size: 13px;
  font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
}
.co .code {
  padding: 5px 10px;
  background: #eee;
  font-size: 13px;
  border: 1px solid #ccc;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  word-break: break-word;
  display: block;
  font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
}
.co p {
  margin: 0.5em 0;
  font-size: 12px;
}
.task-step {
  position: relative;
  background-color: #c8cdd2;
  height: 2px;
  margin: 10px 0 20px;
}
.task-finished-bar {
  background-color: #4cd964;
  height: 2px;
}
.task-step span {
  position: absolute;
  top: 0;
  font-size: 12px;
  border-radius: 50%;
  text-align: center;
  background-color: #fff;
}
.task-step .step-finished {
  width: 18px;
  height: 18px;
  line-height: 18px;
  margin: -8px 0 0 -9px;
  background-color: #4cd964;
  color: #fff;
}
.task-step .step-current {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 2px solid #4cd964;
  color: #4cd964;
  margin: -11px 0 0 -11px;
}
.task-step .step-unfinished {
  width: 14px;
  height: 14px;
  line-height: 14px;
  border: 2px solid #c8cdd2;
  color: #c8cdd2;
  margin: -7px 0 0 -8px;
}
.step-message {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 10px 0;
  background: #05792d;
  background: rgba(5, 121, 45, 0.7);
  color: #fff;
  z-index: 89;
}
.step-message i {
  font-size: 16px;
  disply: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 20px;
}
.step-message span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}
.othercode-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.othercode-avator {
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
}
.othercode-avator img {
  border-radius: 50%;
}
.othercode-nick {
  display: inline-block;
  vertical-align: middle;
  line-height: 40px;
  padding: 0 20px;
}
.othercode-nick:link,
.othercode-nick:visited {
  font-size: 12px;
  color: #14191e;
}
.othercode-nick:hover {
  color: #f01400;
}
.otherscode-code {
  display: inline-block;
  height: 30px;
  width: 120px;
  vertical-align: middle;
  background: url(../img/code-sprite.png) no-repeat 0 0;
}
.otherscode-code:hover {
  background-position: 0 -40px;
}
.otherscode-list-bottom {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
.otherscode-list-bottom .list-praise em {
  float: none;
}
.otherscode-time {
  margin-right: 15px;
}
.otherscode-list-bottom .icon {
  vertical-align: -2px;
}
.othercode-nice {
  color: #8fc21f;
  display: inline-block;
  vertical-align: middle;
  height: 16px;
  line-height: 16px;
  padding-left: 17px;
  margin-left: 20px;
  background: url(../img/code-sprite.png) no-repeat 0 -165px;
}
@media only screen and (max-width: 1200px) {
  .aticle-container {
    width: 320px;
    min-width: 320px;
  }
  .editor-container {
    left: 320px;
    right: 130px;
    min-width: 480px;
  }
  .result-container {
    min-width: 130px;
  }
  .course-menu {
    width: 720px;
  }
}
.aotorun {
    display: none;
    width: 90px;
    height: 30px;
}
.aotorun input {
    margin-top: 8px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 1px;
}
.aotorun label {
    color: #fff;
    cursor: pointer;
    line-height: 32px;
}
input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-appearance: none!important;
  border-radius: 0!important;
}
textarea {-webkit-appearance: none!important;}

.course-info-main{margin:0px 30px;max-width:none;}.course-info-main .content-wrap{width:100%;padding-right:0px;}.js-tri{display:none;}.js-tri .icon-menu{font-size:36px;}.js-tri.open{background:#eee;color:#ffffff;border-radius:5px;}#header{position:relative;top:45px;}.footer{float:left;clear:both;}@media all and (min-width:1024px){#studyMain>.wrap{width:100%;}}@media all and (min-width:1024px) and (max-width:1228px){#js-aticle-container{width:25% !important;min-width:0px;}#js-editor-container{left:25% !important;min-width:0px;width:45% !important;}#js-result-container{width:30% !important;}}@media all and (max-width:1023px){.js-tri{display:block;}body{width:100%;overflow-x:hidden;}.section-list{-webkit-transition:right .6s ease;-o-transition:right .6s ease;transition:right .6s ease;}.section-list{width:0px;}.section-list>*{display:none;}.section-list .operator{display:none !important;}#studyMain>.wrap{overflow:visible;}#js-aticle-container{position:relative;min-height:300px;top:0px;width:100% !important;left:0px;}#js-editor-container{position:relative;min-height:200px;top:0px;width:100% !important;left:0px !important;}#js-result-container{position:relative;right:auto !important;bottom:auto !important;left:0px !important;top:0px;width:100% !important;min-height:200px;background:#eee;}.cmain-container{height:auto !important;min-height:300px;background:none;}.result-drag-wrap,.section-list .operator{display:none;}.result-wrap{padding:0px;}}@media all and (max-width:850px){.course-subcontainer,.course-left,.course-menu{width:100%;}}@media all and (max-width:520px){.aticle-container,.editor-container{min-width:0px;}h1.code-head{margin:0px;padding:16px 6px 16px 6px;}#J_EditorReset,#js-pl-submit,.course-discuss-btn{width:90px !important;}.code-btn-submit{width:70px !important;}.course-menu li{width:80px;}}.n-follow a i{position:relative;left:0px;top:0px;}.n-follow a .off_{display:none;}.n-follow a.on .on_{display:none;}.n-follow a.on .off_{display:block;}.n-follow a.on{color:#ffffff;}.wpr0{width:100%;padding:50px 10px 10px 10px;box-sizing:border-box;height:105px;background:#000000;position:relative;z-index:999;}.js-tri{position:absolute;right:10px;top:52px;color:#a5a2a2;}.J-chaptername{cursor:text;color:#a5a2a2!important;}

.course-btn, .course-discuss-btn {
    width: 120px;
    height: 40px;
    background-color: #00b33b;
    text-align: center;
    font: 14px/40px "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", Tahoma, Arial, STHeiti, sans-serif;
    color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
}
.r {
    float: right;
}