/* @file  extra.css
* @description 自定义样式 header + footer
* @author yangjh060729@gmail.com 2018-04-28
*/

@import url('https://statics3.seeedstudio.com/assets/lib/font-awesome/css/font-awesome.min.css');

/* font face */
/*OpenSans*/
@font-face {
  font-family: 'OpenSans';
  src: url('https://statics3.seeedstudio.com/assets/fonts/OpenSans-Regular.ttf');
}

/*OpenSans-ExtraBold*/
@font-face {
  font-family: 'OpenSans-Semibold';
  src: url('https://statics3.seeedstudio.com/assets/fonts/OpenSans-Semibold.ttf');
}

/* font color */
.c-9e {
  color: #9e9e9e;
}

/* font size */
.f14 {
  font-size: 1.16rem;
}

/* common style */
.clear:after {
  display: block;
  content: '';
  clear: both;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.hide {
  display: none;
}

/* header */
.md-header {
  height: 11.6rem;
}

.header-wrap-box {
  width: 100%;
  background-color: #fff;
}

.header-content-wrap {
  width: 100%;
  max-width: 122rem;
  height: 6rem;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  display: -webkit-flex;
}

.header-content-wrap .logo-box {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-content-wrap .logo-box .logo-img {
  width: 13rem;
  margin-top: 0;
  vertical-align: middle;
}

.header-wrap-box .nav-tab-list {
  flex: 9;
  padding-left: 4rem;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
}

.md-header-nav__title {
  padding-left: 1rem;
}

.md-container {
  padding-top: 12rem;
}

.md-sidebar[data-md-state='lock'] {
  top: 12rem;
}

.md-main__inner {
  padding-top: 0;
}

.nav-tab-list li.nav-tab-item {
  width: 7.1rem;
  font-size: 1.17rem;
  cursor: pointer;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

.nav-tab-list li .title-h2 {
  font-family: 'OpenSans-Semibold';
  font-size: 1.3rem;
  color: #3c3c3c;
  margin: 0;
}

.language {
  position: absolute;
  right: 4rem;
  top: 1.5rem;
  font-size: 1.3rem;
}

.language a {
  color: #fff;
  cursor: pointer;
}

.language a:hover {
  opacity: 0.7;
}

.mLanguage {
  display: none;
}

/* footer */

.md-footer {
  font-family: 'OpenSans', Helvetica, Arial, sans-serif;
  width: 100%;
  background-color: #fff;
  clear: both;
}

.be-footer {
  height: 0.3rem;
  width: 100%;
  background-color: #f7f7f7;
}

.md-footer .footer--info {
  max-width: 122rem;
  width: 100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap;
  padding-top: 3.3rem;
  padding-bottom: 3.3rem;
}

.footer--info .block {
  -webkit-flex: 1;
  line-height: 2.4rem;
  text-align: center;
  margin-bottom: 1rem;
}

.footer--info .search {
  -webkit-flex: 2;
}

.footer--info .block ul {
  display: inline-block;
}

.footer--info .block ul li {
  text-align: left;
}

.footer--info .block a {
  display: inline-block;
  color: #9e9e9e;
  font-size: 1.35rem;
}

.footer--info .block a:hover {
  color: #3c3c3c;
}

.footer--info .title {
  color: #00936d;
  font-size: 1.8rem;
}

.footer--info .sign-text {
  line-height: 1.6rem;
}

.footer--info .sign {
  margin: 0.8rem 0 1.6rem 0;
}

.footer--info .foot-sns-li {
  display: -webkit-flex; /* Safari */
  display: flex;
}

.footer--info .social a {
  color: #fff;
}

.footer--info .social a:hover {
  color: #fff;
}

.footer--info .sns__ico {
  margin-right: 0.83rem;
  color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  text-align: center;
  line-height: 2.5rem;
}

.footer--info .sns--facebook {
  background-color: #3b599c;
}

.footer--info .sns--twitter {
  background-color: #00b1ea;
}

.footer--info .sns--youtube {
  background-color: #e62117;
}

.footer--info .sns--google-plus {
  background-color: #ff3523;
}

.footer--info .sns--instagram {
  background-color: rgb(0, 109, 187);
}

.footer--info .sns--youtube:hover {
  background-color: #cc2a1c;
}

.footer--info .sns--facebook:hover {
  background: #253863;
}

.footer--info .sns--twitter:hover {
  background: #008dbb;
}

.footer--info .sns--google-plus:hover {
  background: #cc2a1c;
}

.footer--info .sns--instagram:hover {
  background: #194868;
}

.footer--copyright {
  line-height: 4rem;
  color: #9c9c9c;
  height: 4rem;
  width: 100%;
}

.copyrightDetail {
  max-width: 122rem;
  width: 100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-flex-wrap: wrap;
  padding-left: 5rem;
  padding-right: 5rem;
  box-sizing: border-box;
  background-color: #f7f7f7;
}

.footer-list {
  -webkit-flex: 1;
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: flex-end;
}

.footer-list .site-map {
  box-sizing: border-box;
}

.footer-list .policy {
  padding-left: 10rem;
  box-sizing: border-box;
}

@media only screen and (max-width: 44.9375em) {
  .md-header {
    height: 9rem;
  }

  .header-content-wrap {
    height: 4rem;
  }

  .header-content-wrap .logo-box {
    width: 8rem;
  }

  .header-content-wrap .logo-box .logo-img {
    width: 6rem;
  }

  .header-wrap-box .nav-tab-list {
    padding-left: 0;
  }

  .nav-tab-list li.nav-tab-item {
    width: 5rem;
    font-size: 0.8rem;
  }

  .md-header-nav__title {
    /* display: inline; */
  }

  .language {
    right: 2rem;
  }

  .mLanguage {
    display: block;
  }

  .md-container {
    padding-top: 9rem;
  }

  .copyrightDetail {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }

  .footer--copyright {
    line-height: 3rem;
  }

  .copyrightText {
    order: 2;
    text-align: center;
  }

  .footer-list {
    justify-content: center;
    order: 1;
  }
}


.language{
  top: 1rem;
  width: 5rem;
  height: auto;
  max-height: 3rem;
  overflow: hidden;
  text-align: center;
  border-radius: 3px;
  transition: ease-in max-height .3s;
  background: #5c8531;
  box-shadow: 0 2px 5px #8cbc59;
}
.language:hover{
  max-height: initial;   
}

.language>a:first-child {
  display: block!important;
  color: #fff;
  cursor: pointer;
  height: 3rem;
  line-height: 3rem;
  box-sizing: border-box;
}
.language>a:nth-child(n+2) {
  display: block!important;
  color: #fff;
  cursor: pointer;
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: ease all .2s;
}
.language:hover>a{
  height: 3rem;
  line-height: 3rem;
  opacity: 1;
}
.language>a:hover{
  background: #8cbc59;
}
.md-container .md-content a[title^='Edit']{display: none!important;}



/*

Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

*/
.md-clipboard:before{
    color:rgba(255,255,255,0.8)!important;
    opacity:0.8!important;
}
pre{
  background: #282c34!important;
}
pre > code {
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em!important;
  color: #abb2bf!important;
  background: #282c34!important;
  font-family: "Sans Mono", "Consolas", "Courier", monospace!important;
}

.hljs-comment,
.hljs-quote {
  color: #5c6370!important;
  font-style: italic!important;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd!important;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75!important;
}

.hljs-literal {
  color: #56b6c2!important;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #98c379!important;
}

.hljs-built_in,
.hljs-class .hljs-title {
  color: #e6c07b!important;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66!important;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee!important;
}

.hljs-emphasis {
  font-style: italic!important;
}

.hljs-strong {
  font-weight: bold!important;
}

.hljs-link {
  text-decoration: underline!important;
}

/* for block of numbers */
.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  text-align: center;
  color: #ccc;
  /* border-right: 1px solid #CCC; */
  vertical-align: top;
  padding-right: 15px!important;

  /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
  padding-left: 10px;
}

@media only screen and (max-width: 76.1875em){
  .md-sidebar--primary{
      left: -33rem;
      width: 33rem;
  }
  [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary{
    transform: translateX(33rem);
  }
  .md-nav--primary .md-nav__link{
    white-space: normal;
  }
}
.bread-active{
  color: #fff;
}
/* .md-sidebar {
  width: 34.2rem;
}

.md-grid {
  max-width: 142rem;
  
} */

@media only screen and (min-width: 76.25em){
  .md-sidebar {
    width: 34.2rem;
  }
  
  .md-grid {
    max-width: 142rem;
    
  }
  .md-content {
      margin-left: 34.2rem;
  }
  .md-sidebar--secondary {
    margin-left: 142rem;
  }
}
@media only screen and (min-width: 60em){
  .md-content {
      margin-right: 34.2rem;
  }
}
