*{padding: 0;margin:0;text-decoration: none;box-sizing: border-box;}

.text-center{text-align: center;}

.container{width:1360px;overflow: auto;margin:0 auto;}
.foot{margin-top:50px;background-color: #eee;text-align: center;padding:30px 0;}
.foot p{font-size:14px;line-height: 30px;}
.foot p a{color:#000;text-decoration: underline;}
.head{height:60px;background-color: #96b97d;min-width: 1360px;overflow: hidden;}
.logo{padding-top: 10px;width:160px;text-align: center;margin-left:10px;float:left}
.add-text{font-size:30px;line-height: 25px; color:#fff;letter-spacing: -2px;}
.add-text a{color:#fff}
.editor-text{font-size:16px;color:#fff;line-height: 20px;letter-spacing: 1px;}
.editor-text  a{color:#fff}

.lang{float:right;margin-right: 50px;padding-top:14px}
.lang:hover{cursor: pointer;}
.lang img{width:30px;float:left;}
.lang-text{color:#fff;float:left;padding-top:5px}
.lang-select{display:none;position: absolute;top:65;right: 5px;width:305px;background-color: #fff;height:145px;border:1px solid #ddd;border-radius: 5px;z-index:888;box-shadow: 0 2px 10px rgba(0, 0, 0, .12);}
.lang-select a{display: inline-block; float:left; padding-left:15px;color:#000;margin-top:20px;width:100px;font-size:16px;color:#328bff}

.nav{float: left;line-height: 60px;height: 60px;margin-left: 60px;}
.nav a{color:#fff;font-size:22px;margin-left:30px}
.nav a.now{border-bottom:2px solid #fff}

.bg-success{background-color: #96b97d;}
.bg-danger{background-color: #c24d17;}

@-webkit-keyframes scale {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1; }
    45% {
      -webkit-transform: scale(0.1);
              transform: scale(0.1);
      opacity: 0.7; }
    80% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1; } }
  @keyframes scale {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1; }
    45% {
      -webkit-transform: scale(0.1);
              transform: scale(0.1);
      opacity: 0.7; }
    80% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1; } }

.ball-pulse > div:nth-child(1) {
    -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}

.ball-pulse > div:nth-child(2) {
    -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 
}

.ball-pulse > div:nth-child(3) {
    -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
    animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 
}

.ball-pulse > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block; 
}
.loading-cover{position: absolute;width:100%;height: 100%;background-color: #96b97d;z-index: 999;top:0}
.loading{width:300px;text-align: center;margin:0 auto;margin-top:300px}
.loader{margin-top:10px}
.loading .big-text{font-size:50px;; color:#fff;letter-spacing: -3px;line-height: 1;}
.loading .small-text{font-size:30px;color:#fff;line-height: 0.8;}

.content{overflow: hidden;margin-top:10px;}
.left{width:200px;float:left;height:600px;border:1px solid #ccc;margin-left:15px;display: none;}
.main{width:1350px;margin:0 auto;overflow: hidden;}

.editor-container{float:left;width:1350px;overflow: hidden;}
.help{border:2px solid #ccc;float:left;width:675px;height:570px;overflow: hidden;margin-left:10px}

.input{width:663px;border-radius: 5px; border:1px solid #ccc;float:left;}
.input-title{height:30px;line-height:30px;padding-left:10px;background-color: #ccc;width:663px;border-top-right-radius: 5px;border-top-left-radius: 5px;}


.intro-container{width:100%;margin:0 auto}
.intrologo{text-align: center;margin-top:30px}
.intrologo img{width:80px}
.intro-container h1{font-size: 52px;font-weight: 500;margin-top:20px;text-align: center;line-height: 1.6;}
.intro-container h1 b{color:#96b97d}

.intro-container .intro-content{margin-top:8px;margin-bottom:50px;font-size: 25px;color:#555;text-align: center;}

.intro-container .open-line{text-align: center;margin:80px 0}
.intro-container .open-btn{cursor: pointer; width:300px;color:#fff;background-color: #96b97d;text-align: center;font-size: 30px;line-height: 2.5;border-radius: 10px;margin:100px auto;padding:10px 20px}
.intro-container .open-btn:hover{background-color: #b2d39b;}
.intro-container .goal{width:1000px;line-height: 1.8;font-size: 20px;margin:0 auto;}

.intro-image{width:100%;overflow: hidden;margin:0 auto;background-color: #109927;text-align: center;padding:100px 0}
.intro-image img{position: relative;top:-2px}
.intro-container .function-title{font-size: 40px;font-weight: bold; color:#96b97d;margin-bottom:15px;text-align: center;margin-bottom:50px;}

.output{margin-top:10px;border:1px solid #ccc;border-radius: 5px;width:1350px;float: left;}
.output .output-title{height:30px;line-height:30px;padding-left:10px;background-color: #ccc;width:1349px;border-top-right-radius: 5px;border-top-left-radius: 5px;}
.output .output-zone{float:right;height: 30px;padding-right: 15px;text-align: right;position: relative;}
.output .output-zone span{height: 30px;line-height: 30px;display: block;float:right;}
.output .output-zone .font-size{width:30px;border:none;outline: none;text-align: center;float:right;height: 20px;margin-top: 5px;}
.output-zone .zone-title{font-size: 13px;line-height: 30px;}
.output-zone .save-as{border:none;outline: none;margin-right: 15px;background-color: #fff;margin-top:3px;padding:4px 5px;cursor: pointer;min-width:99px}
.output-zone .saveimg{display:none;position: absolute;width:101px;left:-1px;top:-60px;background-color:#fff;text-align: center;border:1px solid #96b97d;}
.output-zone .saveimg div{cursor: pointer;}
.output-zone .saveimg div:hover{background-color:#96b97d ;}
.output-zone .saveimg .save-as-png{border-bottom:1px solid #ccc;}


.size-minus{cursor: pointer;font-size: 32px;padding:0 5px;background-color: #ccc;border: none;outline: none;float:right;height: 27px;line-height: 27px;}
.size-add{cursor: pointer;font-size: 20px;padding:0 5px;background-color: #ccc;border: none;outline: none;float:right;height: 30px;line-height: 30px;}
.show{width:1350px;height: 500px;font-size:30px;overflow:auto;}

.type-list{overflow: hidden;border-bottom:2px solid #96b97d;padding-bottom:8px}
.type-box{ padding:5px ; width:58px;font-size:12px;text-align: center;height: 58px;float: left;background-color: #fff;margin-left:8px;margin-top:8px;border:2px solid #ddd}
.type-box:hover{border-color:#96b97d;cursor: pointer;}
.type-box img{width:45px;height:45px}

.help-content{height:480px;overflow: auto;}

.help-content t{float:left;cursor:pointer; display: block;background-color: #eee;font-size:25px;min-width: 35px;min-height: 35px;text-align: center;line-height: 35px;padding-top:9px;margin-left:5px;border-radius: 5px;}
.help-content t:hover{background-color:#96b97d ;}
.help-content t.now{background-color:#96b97d ;}
.help-content .catagory .block{overflow: hidden;padding-top: 5px;padding-bottom:5px;border-bottom:1px solid #ccc;}
.help-content .catagory .block t{margin-bottom:10px;}
.help-content .catagory .bblock t{padding-bottom:5px;margin-left:10px;padding-left:5px;padding-right: 5px;}
.help-content .catagory .zero-margin mjx-container{margin-top:0;margin-bottom: 0;}
.clear{clear: both;}
.help-content .block-info{margin-bottom:8px;padding-left:12px}
.help-content .block-info input{height:25px;line-height: 25px;outline: #96b97d;border:1px solid #999;padding-left:2px;width:80px;text-align: center;font-size:15px;border-radius: 4px;}
.help-content .block-title{font-size:18px;margin-left:8px;margin-bottom: 10px;color:#c10000}

.head-function{float:right;margin-right: 15px;}
.head-function span{background-color:#fff;padding:2px 5px;border-radius: 3px;cursor: pointer;font-size: 14px;margin-left: 5px;}
.head-function span:hover{background-color: #96b97d;color:#fff;}



.latex-editor{position:relative;z-index:1;border:1px solid #ccc;}
.latex-editor .base{white-space: nowrap; font-weight: 400; font-family: "Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace";padding:10px;padding-top:10px; font-size:18px;outline:none;background-color:rgba(255,255,255,0)}
.latex-editor textarea{width:100%;height:100%;border:none; resize: none;position:absolute ; z-index:2;top:0;left:0;color:rgba(0,0,0,0);caret-color:#000;text-decoration: none; font-weight: 400; font-family: "Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace"}
.latex-editor .latex-show{width:100%;height:100%;position:absolute ; z-index:1;top:0;left:0;overflow-y: auto; overflow-x: auto; }

.latex-editor .token_blackslash{color:#999} 
.latex-editor .not_backslash{color:#ff9d0c} 
.latex-editor .backslash{color:#999}          
.latex-editor .bracket0{color:#ef29d4}
.latex-editor .bracket1{color:#109927}
.latex-editor .bracket2{color:#ff9d0c}
.latex-editor .not_bracket{color:#ff0000}     
.latex-editor .sign{color: #109927;}          
.latex-editor .num{color:#000}
.latex-editor .block_token{color: #c24d17;}
.latex-editor .token{color:#333}
.latex-editor .command_token{color:#0374d8}
.latex-editor .character{color:#c24d17}


.latex-editor .tips{position:absolute;top:-1000px;left:-1000px;width:300px;height:200px;border:1px solid #ccc;background-color:#fff;z-index:3;overflow-y: scroll;}
.latex-editor .tip-line{padding-left:5px;padding-top:2px;padding-bottom: 2px;line-height: 30px;cursor: pointer;}
.latex-editor .tips .now{background-color:#acd4fd;color:#333;}
.latex-editor .tip-name{display: inline-block;}
.latex-editor .tip-name .token{color:#f70000}
.latex-editor .tip-img{float:right;height:30px;justify-content: center;display: flex;align-items: center;flex-direction: column;margin-right:15px;color:#666;font-size:16px;}

.left-lable{float:left;margin-right: 15px;}


#editor{width:663px;height:570px;}
#show-content{padding-bottom:30px;padding-top:30px;min-height: 400px;}

.tutorial{overflow: hidden;}
.text-green{color:#109927}
.text-red{color:#fb0202}

.height100{height: 100px !important;}

.t-left{float:left;width:320px;background-color:#eaf5e2;min-height: 1000px;padding-left:10px;padding-top:100px;}
.t-left a{color:#444;font-size: 18px;background: url("/images/tbook.png") 0 2px/22px 22px no-repeat;padding-left:23px;display: block;margin-bottom:10px}
.t-left a:hover{color:#109927;}
.t-left a.now{color:#109927;}


.t-right{float:left;width:1000px;padding-left:50px;padding-top:30px;}
.t-right h1{text-align: left;font-size:32px;border-bottom:1px solid #ccc;padding-bottom:10px;padding-left: 10px;}
.t-right .t-content{margin-top:20px;margin-bottom: 10px;font-size: 18px;color:#444;padding-left:10px}
.t-right code{background-color: #eee;padding:5px 5px;color:#333;margin-bottom:10px}
.t-right code.block-code{display: block;padding:15px}

.t-right l{background-color: #eee;padding:2px 8px;}
.t-right .title1{font-size:24px;margin-bottom:20px;font-weight: bold;margin-top:100px}
.t-right .title2{font-size:20px;margin-bottom:5px;font-weight: bold;}
.t-right p{line-height: 1.85;margin-bottom:10px}
.t-editor{height: 160px;margin-bottom:25px}
.t-editor .t-code{width:455px;height:160px;float: left;}
.t-editor .t-show{width:455px;height:160px;float: left;border:1px solid #ccc;margin-left:15px;overflow: auto;}


.t-editor-small{height: 120px;}
.t-editor-small .t-code{height: 120px;}
.t-editor-small .t-show{height: 120px;}

.t-editor-large{height: 200px;}
.t-editor-large .t-code{height: 200px;}
.t-editor-large .t-show{height: 200px;}

.t-editor-largeX{height: 250px;}
.t-editor-largeX .t-code{height: 250px;}
.t-editor-largeX .t-show{height: 250px;}

.symbol-title {font-size: 25px;padding-left:7px;font-weight: bold;margin-bottom: 0;border-bottom: 1px solid #ccc;margin-top:30px}

.symbols-box{width:400px;background-color: #fff;border:1px solid #ccc;position: absolute;overflow: auto;display: none;background-color: #fff;z-index:2}
.symbols-box .operation{height: 38px;border-top:1px solid #ccc;overflow: hidden;}
.symbols-box .operation div{float:left;width:50%;text-align: center;line-height: 38px;cursor: pointer;}
#symbol-code{height:150px;border:none;border-bottom:1px solid #ccc;width:100%}
#symbol-show{height: 150px;width:100%;font-size: 28px;}

.helplist{overflow: hidden;float:left;background-color: #ccc;width:675px;border-top-left-radius: 5px;border-top-right-radius: 5px;margin-left:10px;height: 31px;}
.helplist div{float:left;padding:5px 20px; border:2px solid #ccc;cursor: pointer;font-size:14px}
.helplist div.now{background-color: #fff;}
.helplist div:hover{color:#109927}
.select-img{margin-top:5px}
.select-img button{font-size:16px;outline: none;border:1px solid #ccc;padding:8px 12px;background-color: #fff;cursor: pointer;}
.select-img button:hover{color: #109927;}
.past-zone{border:1px dashed #ccc;width:100%;height: 160px;margin:5px auto;text-align: center;color:#999;font-size:20px;margin-bottom:0}
.past-img{text-align: center;margin-top:7px}
.past-img img{max-width: 550px;max-height: 110px;}

#convert-editor{height:190px}
#convert-result{height: 170px;overflow: auto;}

.frame_ocr{width:100%;overflow: hidden;height: 565px;}