::selection {
  background-color: #aaa;
  color: #fff;
}

::-moz-selection {
  background-color: #aaa;
  color: #fff;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}
#draw{
  margin-top: 10px;
}
#draw svg{
  background-color: #fff;
}

#tjLogo {
  width: 40px!important;
  height: 40px!important;
}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(../fonts/glyphicons-halflings-regular.eot);
  src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.glyphicon-asterisk:before {
  content: "\2a"
}

.glyphicon-plus:before {
  content: "\2b"
}

.glyphicon-euro:before, .glyphicon-eur:before {
  content: "\20ac"
}

.glyphicon-minus:before {
  content: "\2212"
}

.glyphicon-cloud:before {
  content: "\2601"
}

.glyphicon-envelope:before {
  content: "\2709"
}

.glyphicon-pencil:before {
  content: "\270f"
}

.glyphicon-glass:before {
  content: "\e001"
}

.glyphicon-music:before {
  content: "\e002"
}

.glyphicon-search:before {
  content: "\e003"
}

.glyphicon-heart:before {
  content: "\e005"
}

.glyphicon-star:before {
  content: "\e006"
}

.glyphicon-star-empty:before {
  content: "\e007"
}

.glyphicon-user:before {
  content: "\e008"
}

.glyphicon-film:before {
  content: "\e009"
}

.glyphicon-th-large:before {
  content: "\e010"
}

.glyphicon-th:before {
  content: "\e011"
}

.glyphicon-th-list:before {
  content: "\e012"
}

.glyphicon-ok:before {
  content: "\e013"
}

.glyphicon-remove:before {
  content: "\e014"
}

.glyphicon-zoom-in:before {
  content: "\e015"
}

.glyphicon-zoom-out:before {
  content: "\e016"
}

.glyphicon-off:before {
  content: "\e017"
}

.glyphicon-signal:before {
  content: "\e018"
}

.glyphicon-cog:before {
  content: "\e019"
}

.glyphicon-trash:before {
  content: "\e020"
}

.glyphicon-home:before {
  content: "\e021"
}

.glyphicon-file:before {
  content: "\e022"
}

.glyphicon-time:before {
  content: "\e023"
}

.glyphicon-road:before {
  content: "\e024"
}

.glyphicon-download-alt:before {
  content: "\e025"
}

.glyphicon-download:before {
  content: "\e026"
}

.glyphicon-upload:before {
  content: "\e027"
}

.glyphicon-inbox:before {
  content: "\e028"
}

.glyphicon-play-circle:before {
  content: "\e029"
}

.glyphicon-repeat:before {
  content: "\e030"
}

.glyphicon-refresh:before {
  content: "\e031"
}

.glyphicon-list-alt:before {
  content: "\e032"
}

.glyphicon-lock:before {
  content: "\e033"
}

.glyphicon-flag:before {
  content: "\e034"
}

.glyphicon-headphones:before {
  content: "\e035"
}

.glyphicon-volume-off:before {
  content: "\e036"
}

.glyphicon-volume-down:before {
  content: "\e037"
}

.glyphicon-volume-up:before {
  content: "\e038"
}

.glyphicon-qrcode:before {
  content: "\e039"
}

.glyphicon-barcode:before {
  content: "\e040"
}

.glyphicon-tag:before {
  content: "\e041"
}

.glyphicon-tags:before {
  content: "\e042"
}

.glyphicon-book:before {
  content: "\e043"
}

.glyphicon-bookmark:before {
  content: "\e044"
}

.glyphicon-print:before {
  content: "\e045"
}

.glyphicon-camera:before {
  content: "\e046"
}

.glyphicon-font:before {
  content: "\e047"
}

.glyphicon-bold:before {
  content: "\e048"
}

.glyphicon-italic:before {
  content: "\e049"
}

.glyphicon-text-height:before {
  content: "\e050"
}

.glyphicon-text-width:before {
  content: "\e051"
}

.glyphicon-align-left:before {
  content: "\e052"
}

.glyphicon-align-center:before {
  content: "\e053"
}

.glyphicon-align-right:before {
  content: "\e054"
}

.glyphicon-align-justify:before {
  content: "\e055"
}

.glyphicon-list:before {
  content: "\e056"
}

.glyphicon-indent-left:before {
  content: "\e057"
}

.glyphicon-indent-right:before {
  content: "\e058"
}

.glyphicon-facetime-video:before {
  content: "\e059"
}

.glyphicon-picture:before {
  content: "\e060"
}

.glyphicon-map-marker:before {
  content: "\e062"
}

.glyphicon-adjust:before {
  content: "\e063"
}

.glyphicon-tint:before {
  content: "\e064"
}

.glyphicon-edit:before {
  content: "\e065"
}

.glyphicon-share:before {
  content: "\e066"
}

.glyphicon-check:before {
  content: "\e067"
}

.glyphicon-move:before {
  content: "\e068"
}

.glyphicon-step-backward:before {
  content: "\e069"
}

.glyphicon-fast-backward:before {
  content: "\e070"
}

.glyphicon-backward:before {
  content: "\e071"
}

.glyphicon-play:before {
  content: "\e072"
}

.glyphicon-pause:before {
  content: "\e073"
}

.glyphicon-stop:before {
  content: "\e074"
}

.glyphicon-forward:before {
  content: "\e075"
}

.glyphicon-fast-forward:before {
  content: "\e076"
}

.glyphicon-step-forward:before {
  content: "\e077"
}

.glyphicon-eject:before {
  content: "\e078"
}

.glyphicon-chevron-left:before {
  content: "\e079"
}

.glyphicon-chevron-right:before {
  content: "\e080"
}

.glyphicon-plus-sign:before {
  content: "\e081"
}

.glyphicon-minus-sign:before {
  content: "\e082"
}

.glyphicon-remove-sign:before {
  content: "\e083"
}

.glyphicon-ok-sign:before {
  content: "\e084"
}

.glyphicon-question-sign:before {
  content: "\e085"
}

.glyphicon-info-sign:before {
  content: "\e086"
}

.glyphicon-screenshot:before {
  content: "\e087"
}

.glyphicon-remove-circle:before {
  content: "\e088"
}

.glyphicon-ok-circle:before {
  content: "\e089"
}

.glyphicon-ban-circle:before {
  content: "\e090"
}

.glyphicon-arrow-left:before {
  content: "\e091"
}

.glyphicon-arrow-right:before {
  content: "\e092"
}

.glyphicon-arrow-up:before {
  content: "\e093"
}

.glyphicon-arrow-down:before {
  content: "\e094"
}

.glyphicon-share-alt:before {
  content: "\e095"
}

.glyphicon-resize-full:before {
  content: "\e096"
}

.glyphicon-resize-small:before {
  content: "\e097"
}

.glyphicon-exclamation-sign:before {
  content: "\e101"
}

.glyphicon-gift:before {
  content: "\e102"
}

.glyphicon-leaf:before {
  content: "\e103"
}

.glyphicon-fire:before {
  content: "\e104"
}

.glyphicon-eye-open:before {
  content: "\e105"
}

.glyphicon-eye-close:before {
  content: "\e106"
}

.glyphicon-warning-sign:before {
  content: "\e107"
}

.glyphicon-plane:before {
  content: "\e108"
}

.glyphicon-calendar:before {
  content: "\e109"
}

.glyphicon-random:before {
  content: "\e110"
}

.glyphicon-comment:before {
  content: "\e111"
}

.glyphicon-magnet:before {
  content: "\e112"
}

.glyphicon-chevron-up:before {
  content: "\e113"
}

.glyphicon-chevron-down:before {
  content: "\e114"
}

.glyphicon-retweet:before {
  content: "\e115"
}

.glyphicon-shopping-cart:before {
  content: "\e116"
}

.glyphicon-folder-close:before {
  content: "\e117"
}

.glyphicon-folder-open:before {
  content: "\e118"
}

.glyphicon-resize-vertical:before {
  content: "\e119"
}

.glyphicon-resize-horizontal:before {
  content: "\e120"
}

.glyphicon-hdd:before {
  content: "\e121"
}

.glyphicon-bullhorn:before {
  content: "\e122"
}

.glyphicon-bell:before {
  content: "\e123"
}

.glyphicon-certificate:before {
  content: "\e124"
}

.glyphicon-thumbs-up:before {
  content: "\e125"
}

.glyphicon-thumbs-down:before {
  content: "\e126"
}

.glyphicon-hand-right:before {
  content: "\e127"
}

.glyphicon-hand-left:before {
  content: "\e128"
}

.glyphicon-hand-up:before {
  content: "\e129"
}

.glyphicon-hand-down:before {
  content: "\e130"
}

.glyphicon-circle-arrow-right:before {
  content: "\e131"
}

.glyphicon-circle-arrow-left:before {
  content: "\e132"
}

.glyphicon-circle-arrow-up:before {
  content: "\e133"
}

.glyphicon-circle-arrow-down:before {
  content: "\e134"
}

.glyphicon-globe:before {
  content: "\e135"
}

.glyphicon-wrench:before {
  content: "\e136"
}

.glyphicon-tasks:before {
  content: "\e137"
}

.glyphicon-filter:before {
  content: "\e138"
}

.glyphicon-briefcase:before {
  content: "\e139"
}

.glyphicon-fullscreen:before {
  content: "\e140"
}

.glyphicon-dashboard:before {
  content: "\e141"
}

.glyphicon-paperclip:before {
  content: "\e142"
}

.glyphicon-heart-empty:before {
  content: "\e143"
}

.glyphicon-link:before {
  content: "\e144"
}

.glyphicon-phone:before {
  content: "\e145"
}

.glyphicon-pushpin:before {
  content: "\e146"
}

.glyphicon-usd:before {
  content: "\e148"
}

.glyphicon-gbp:before {
  content: "\e149"
}

.glyphicon-sort:before {
  content: "\e150"
}

.glyphicon-sort-by-alphabet:before {
  content: "\e151"
}

.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152"
}

.glyphicon-sort-by-order:before {
  content: "\e153"
}

.glyphicon-sort-by-order-alt:before {
  content: "\e154"
}

.glyphicon-sort-by-attributes:before {
  content: "\e155"
}

.glyphicon-sort-by-attributes-alt:before {
  content: "\e156"
}

.glyphicon-unchecked:before {
  content: "\e157"
}

.glyphicon-expand:before {
  content: "\e158"
}

.glyphicon-collapse-down:before {
  content: "\e159"
}

.glyphicon-collapse-up:before {
  content: "\e160"
}

.glyphicon-log-in:before {
  content: "\e161"
}

.glyphicon-flash:before {
  content: "\e162"
}

.glyphicon-log-out:before {
  content: "\e163"
}

.glyphicon-new-window:before {
  content: "\e164"
}

.glyphicon-record:before {
  content: "\e165"
}

.glyphicon-save:before {
  content: "\e166"
}

.glyphicon-open:before {
  content: "\e167"
}

.glyphicon-saved:before {
  content: "\e168"
}

.glyphicon-import:before {
  content: "\e169"
}

.glyphicon-export:before {
  content: "\e170"
}

.glyphicon-send:before {
  content: "\e171"
}

.glyphicon-floppy-disk:before {
  content: "\e172"
}

.glyphicon-floppy-saved:before {
  content: "\e173"
}

.glyphicon-floppy-remove:before {
  content: "\e174"
}

.glyphicon-floppy-save:before {
  content: "\e175"
}

.glyphicon-floppy-open:before {
  content: "\e176"
}

.glyphicon-credit-card:before {
  content: "\e177"
}

.glyphicon-transfer:before {
  content: "\e178"
}

.glyphicon-cutlery:before {
  content: "\e179"
}

.glyphicon-header:before {
  content: "\e180"
}

.glyphicon-compressed:before {
  content: "\e181"
}

.glyphicon-earphone:before {
  content: "\e182"
}

.glyphicon-phone-alt:before {
  content: "\e183"
}

.glyphicon-tower:before {
  content: "\e184"
}

.glyphicon-stats:before {
  content: "\e185"
}

.glyphicon-sd-video:before {
  content: "\e186"
}

.glyphicon-hd-video:before {
  content: "\e187"
}

.glyphicon-subtitles:before {
  content: "\e188"
}

.glyphicon-sound-stereo:before {
  content: "\e189"
}

.glyphicon-sound-dolby:before {
  content: "\e190"
}

.glyphicon-sound-5-1:before {
  content: "\e191"
}

.glyphicon-sound-6-1:before {
  content: "\e192"
}

.glyphicon-sound-7-1:before {
  content: "\e193"
}

.glyphicon-copyright-mark:before {
  content: "\e194"
}

.glyphicon-registration-mark:before {
  content: "\e195"
}

.glyphicon-cloud-download:before {
  content: "\e197"
}

.glyphicon-cloud-upload:before {
  content: "\e198"
}

.glyphicon-tree-conifer:before {
  content: "\e199"
}

.glyphicon-tree-deciduous:before {
  content: "\e200"
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

:before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

body {
  background-color: #fff;
  color: #000;
  width: 100%;
  margin: 0;
  font-size: 20px;
  line-height: inherit!important;
  font-family: microsoft YaHei;
}

a {
  font-size: 20px;
}

.bg-white {
  background-color: #fff!important;
}

.bg-black {
  background-color: #000!important;
}

.bg-gray {
  background-color: #aaa!important;
}

.bg-lgray {
  background-color: #ddd!important;
}

.bg-dark {
  background-color: #444!important;
}

.pointer {
  cursor: pointer
}

.text-white {
  color: #fff!important;
}

.text-black {
  color: #000!important;
}

.text-gray {
  color: #aaa!important;
}

.text-dark {
  color: #444!important;
}

.display-none {
  display: none!important;
}

.display-block {
  display: block!important;
}

.relative {
  position: relative
}

.overflow-hidden {
  overflow: hidden
}

.mb-m {
  margin-bottom: 5px
}

.pb-none {
  padding-bottom: 0px!important
}

.fill-div {
  width: 100%;
  height: 100px
}

#header {
  background-color: #000;
  color: #fff;
  padding: 40px;
  text-align: center;
  padding-bottom: 20px;
}

#title {
  margin: 0 auto;
  font-size: 80px;
  font-weight: bold;
}

#smallTitle, .small-text {
  font-weight: bold;
  font-size: 20px;
}

.border-btn {
  color: #fff;
  border: 3px solid #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
}

.border-btn:hover {
  background-color: #333!important;
  box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
}

.border-btn:active {
  background-color: #777!important;
}

#viewProject {
  width: 160px;
  position: absolute;
  top: 60px;
  right: 30px;
}

.part {
  padding: 80px 14%;
}

.part.intro {
  padding-top: 0!important;
  padding-bottom: 0!important;
}

.part-title {
  margin-bottom: 40px;
  font-size: 50px;
  text-align: center;
  font-weight: bold;
}

.part-title.hassmall {
  margin-bottom: 10px;
}

.part-title.small {
  font-size: 20px;
  margin-bottom: 10px;
  word-break: break-all;
}

.part-title.smaller {
  font-size: 20px;
  margin-bottom: 20px;
}

#copyBtn {
  width: 170px;
  margin: 20px auto 0 auto;
}

/*function*/

.api-item, .func-item {
  width: 31.333333%;
  margin: 0 1%;
  float: left;
  background-color: #444;
  color: #fff;
  padding: 20px;
  min-height: 368px;
}

.api-item {
  transition: background-color .3s linear;
  -webkit-transition: background-color .3s linear;
}

.func-item {
  min-height: 0px;
  width: 23%;
  height: auto;
  text-align: center;
  background-color: transparent;
  padding: 5px;
}

.func-img {
  width: 80%;
  border-radius: 10px;
  border: 2px solid #000;
}

.func-img:hover {
  background-color: #888;
}

.func-text {
  font-weight: bold;
  margin-top: 10px;
  font-size: 23px;
  color: #222;
}

/*end function*/

.api-item-title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

.api-item:hover {
  background-color: #000;
}

.api-item-text {
  font-size: 15px;
  text-align: center;
  margin: 5px 0;
  color: #aaa;
}

.api-item-ltitle {
  background-color: #666;
  padding: 3px 10px;
  font-size: 18px;
  margin: 10px 0;
}

.api-content-wrapper {
  min-height: 174px;
}

.api-content {
  margin: 3px 0;
  word-break: break-all;
}

.api-content-result, .api-test-btn {
  float: right;
  background-color: #aaa;
  padding: 0 5px;
  font-size: 18px;
  cursor: pointer;
}

.api-content-result:active, .api-test-btn:active {
  background-color: #888;
}

.api-test-wrapper {}

.api-test-input {
  height: 24px;
  position: relative;
  top: -5px;
  width: 70%;
  background-color: #ddd;
  outline: none;
  border: 1px solid #444;
  padding-left: 5px;
}

.api-test-input:focus {
  border: 1px solid #fff;
}

.api-test-btn {
  width: 25%;
  text-align: center;
}

/*footer*/

#footer {
  text-align: center;
  padding: 50px 0 40px 0;
  color: #888;
}

.link {
  cursor: pointer
}

.link:hover {
  text-decoration: underline;
  color: #888;
}

.wechat-public {
  position: relative;
  cursor: pointer
}

.wechat-public:hover {
  color: #888;
}

.wechat-img {
  display: none;
  position: absolute;
  height: 200px;
  top: -210px;
  left: -10px;
}

.split-icon {
  font-size: 20px;
  font-weight: bold;
}

#copyright {
  font-size: 12px;
  margin-top: 5px;
}

#footerLink {
  font-size: 16px;
}

.d-show {
  display: none;
}

.relate-link {
  text-decoration: underline;
  margin: 0 5px;
  font-size: 25px;
  float: left;
  cursor: pointer;
}

.relate-link:hover {
  color: #aaa;
}

.mb-install.part-title {
  margin-bottom: 30px;
}

.mb-install#copyBtn {
  margin-bottom: 20px;
}

.demo-code {
  font-family: Consolas, 'Courier New', monospace;
  width: 330px;
  margin: 0 auto;
  background-color: #222;
  padding: 10px;
  border-radius: 3px;
  margin-top: 5px;
  overflow-x: auto;
}

.font-size-bigger.part-title {
  font-size: 25px;
}

#tryInput {
  margin: 10px 0;
  margin-top: 20px;
  outline: none;
  border: 1px solid #222;
  padding: 5px;
  font-size: 18px;
  border-radius: 5px;
  width: 450px;
  text-align: center;
  background-color: #eee;
}

#tryInput.unloaded {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
}

#tryResult {
  /* min-height: 66px; */
}

#spell {
  font-size: 23px;
}

#stroke {
  padding-top: 5px;
}

#strokeOrder {
  padding-top: 5px;
}

#trad {
  padding-top: 5px;
}

#spark {
  padding-top: 5px;
}

/*end footer*/

@media screen and (max-width:1000px) {
  #header {
    padding: 20px;
    padding-bottom: 10px;
  }
  #tryInput {
    width: 98%;
    font-size: 16px;
  }
  #tryResult {
    min-height: 47px;
  }
  #spell {
    font-size: 16px;
  }
  #stroke {
    font-size: 16px;
    padding-top: 5px;
  }
  #title {
    font-size: 30px;
  }
  #smallTitle {
    font-size: 15px;
  }
  #viewProject {
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 10px;
    padding: 7px;
    border-width: 2px;
  }
  #viewProjectLink {
    text-decoration: none;
  }
  .func-item {
    padding: 10px;
  }
  .func-img {
    width: 100%;
  }
  .func-text {
    font-size: 13px;
  }
  .api-content-wrapper {
    min-height: 0;
  }
  .api-content, .api-content-result, .api-test-btn {
    font-size: 15px;
  }
  .part {
    padding: 15px;
  }
  .part-title {
    font-size: 25px;
    margin-bottom: 15px;
  }
  .part-title.small {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .border-btn {
    font-size: 10px;
  }
  #copyBtn {
    width: 110px;
  }
  .api-item {
    float: none;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    height: auto;
    min-height: 0px;
  }
  .api-item-title {
    font-size: 20px;
  }
  .d-show {
    display: block;
  }
  .d-hide {
    display: none;
  }
  #footer {
    padding: 10px 0;
  }
  .wechat-img {
    left: -30px;
  }
  #footerLink {
    font-size: 12px;
  }
  .relate-link {
    font-size: 15px;
  }
  .demo-code {
    font-size: 14px;
  }
}