@charset "utf-8";
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:none}ins,mark{background-color:#ff9;color:#000}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range:U+1F00-1FFF
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range:U+0370-03FF
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}
@font-face{
  font-family:'Roboto';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
@font-face{
  font-family:'Material Icons';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2')
}
.material-icons{
  font-family:'Material Icons';
  font-weight:normal;
  font-style:normal;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased
}
.no-display{
  opacity:0
}
img{display:block;width:100%;vertical-align:top}
body{font-family:Roboto,sans-serif}
#gnav-b{
  display:none
}
#head{
  box-sizing:border-box;
  display:block;
  height:80px;
  width:100%;
  position:fixed;
  z-index:5;
  background-color:rgba(0,0,0,0.3)
}
#head-title{
  display:inline-block;
  padding:15px 30px;
  line-height:20px;
  font-size:18px;
  font-weight:100;
  color:#fff
}
#head-title div{
  line-height:30px;
  font-size:30px;
  font-weight:400
}
#gnav{
  display:inline-block;
  right:0
}
#gnav-i{
  height:48px;
  width:48px;
  padding:16px;
  cursor:pointer;
  user-select:none;
  position:fixed;
  top:0;
  right:0
}
#gnav-i i{
  font-size:48px;
  color:#fff;
  position:absolute;
  transition:opacity .3s ease
}
#gnav-i i:last-child{
  opacity:0
}
#gnav-b:checked ~ #gnav-ul{
  transform:translateX(-100vw)
}
#gnav-b:checked ~ #gnav-i i:last-child{
  opacity:1
}
#gnav-b:checked ~ #gnav-i i:first-child{
  opacity:0
}
#gnav-ul{
  background-color:rgba(0,0,0,0.3);
  width:100%;
  font-size:0;
  position:absolute;
  top:80px;
  right:-100vw;
  transition:transform .3s ease
}
#gnav-ul li{
  box-sizing:border-box;
  display:inline-block;
  width:32.5%;
  height:80px
}

#gnav-ul li a{
  display:block;
  line-height:80px;
  font-size:19px;
  text-decoration:none;
  text-align:center;
  color:#f0f0f0;
  transition:color .3s ease
}
#gnav-ul li a:hover{
  color:#9f9f9f
}
#visual{
  display:block;
  height:380px;
  background-image:url("../i/sb.png");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover
}
#visual-title{
  background-color:rgba(0,0,0,0.3);
  font-size:64px;
  text-align:center;
  line-height:380px;
  color:#fff
}
#main{
  padding:1%
}
#main-title{
  max-width:320px;
  margin:60px auto 30px;
  font-size:27px;
  line-height:70px;
  font-weight:100;
  text-align:center
}
#main-title .bottom-bar{
  height:5px;
  width:10%;
  margin:0 auto;
  background-color:#136b56;
  position:relative
}
#main-title .bottom-bar::before,
#main-title .bottom-bar::after{
  display:inline-block;
  content:"";
  height:1px;
  width:70px;
  text-align:center;
  background-color:#999;
  position:absolute;
  bottom:2px
}
#main-title .bottom-bar::before{left:100%}
#main-title .bottom-bar::after{right:100%}
.main-404{
  font-size:22px;
  text-align:center;
  margin:30px auto 300px
}
.download{
  text-align:center
}
.download-text{
  max-width:600px;
  margin:30px auto;
  font-size:16px;
  line-height:20px
}
.download-commit{
  max-width:460px;
  margin:30px auto
}
.download-text,
.download-commit{
  background-color:rgba(0, 0, 0, 0)
}
input, button, textarea, select {
  margin:0;
  padding:0;
  background:none;
  border-radius:10px;
  border:3px solid #136b56;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none
}
.download-commit textarea{
  width:100%;
  max-width:85%;
  min-width:85%;
  max-height:150px;
  min-height:150px;
  height:150px;
  margin:10px 0;
  padding:10px;
  font-size:18px
}
.download-commit button{
  display:block;
  width:70%;
  font-size:25px;
  padding:20px;
  margin:0 auto;
  cursor:pointer;
  transition:color .3s ease,background-color .3s ease
}
.download-commit button:hover{
  color:#fefefe;
  background-color:#136b56
}
.download-button{
  display:none;
  max-width:460px;
  margin:30px auto
}
.download-button a{
  display:block;
  width:70%;
  font-size:25px;
  margin:10px auto;
  padding:20px 0;
  font-size:25px;
  border-radius:40px;
  border:3px solid #136b56;
  text-decoration:none;
  color:#136b56
}
.about{
  max-width:960px;
  margin:0 auto
}
.about-title1,
.about-title2{
  font-size:23px;
  line-height:30px;
  margin:10px 0;
  padding-left:20px;
  font-weight:100
}
.about-title1 span{
  display:inline-block
}
.about-text{
  padding-left:10px;
  margin:20px 0 30px;
  font-size:18px;
  line-height:24px
}
.about-link{
  margin:20px;
  list-style-type:none
}
.about a{
  font-size:18px;
  line-height:24px;
  text-decoration:none;
  color:#136b56
}

#go-top{
  line-height:48px;
  width:60px;
  font-size:48px;
  text-align:center;
  cursor:pointer;
  position:fixed;
  right:30px;
  bottom:0px;
  background-color:#136b56;
  color:#fff;
  transition:all .3s ease
}
#foot{
  padding:30px;
  border-top:3px solid #136b56;
  border-bottom:3px solid #136b56;
  background-color:#010101;
  color:#fff
}
.foot-link a{
  color:#136b56
}
/*
@media screen and (min-width:480px) and (max-width:599px){


} */
@media screen and (min-width:600px) and (max-width:959px){
  #gnav-ul{
    width:100%;
  }
}
@media screen and (min-width:960px) and (max-width:1279px){
  #gnav-i{
    display:none
  }
  #gnav-b:checked ~ #gnav-ul{
    transform:translateX(0vw)
  }
  #gnav-ul{
    width:70%;
    right:0;
    top:0;
    background-color:rgba(0,0,0,0)
  }
  #gnav-ul li{
    box-sizing:border-box;
    display:inline-block;
    width:16%
  }
}
@media screen and (min-width:1280px){
  #gnav-i{
    display:none
  }
  #gnav-b:checked ~ #gnav-ul{
    transform:translateX(0vw)
  }
  #gnav-ul{
    width:70%;
    right:0;
    top:0;
    background-color:rgba(0,0,0,0)
  }
  #gnav-ul li{
    box-sizing:border-box;
    display:inline-block;
    width:16%
  }
}