@charset "utf-8";

div#sp-icon,ul#menu  {
    display: block;
}
nav ul li:hover {
    background-color: #ffaa77;
}
nav {
  position: fixed;
  top: 87px;
  right: 0;
  width: 300px;
  height: 100%;
  background-color: #E3F8FF;
  transition: all 0.2s;
  transform: translate(300px);
  z-index: 999;
  /*border-left: 1px solid #C6C6C6;*/
  border-top: none;
  }
nav.open {
  transform: translate(0); 
}

nav ul {
  margin: 0px auto 0;
  padding: 0px 0px  0px  0px;
  list-style-type: none;
  width: 100%;
}

nav ul li:nth-child(1){
    /*border-left: 1px solid #C6C6C6;*/
}
nav ul li {
    padding: 30px 0 30px 40px;
    /*border-left: 1px solid #C6C6C6;*/
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
nav ul li:hover {
    background-color: #ffcfb2;
}
nav ul li a {
  display: block;
  text-align: left;
  text-decoration: none;
  color: #000000;
}
nav ul li a img {
    margin-right: 15px;
    margin-top: -8px;
}
/* -- div#sp-icon -------------------------------------------------------------------------------- */
div#sp-icon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 40px;
  top: 16px;
  z-index: 10000;
  background-color: #ffffff;
  /* color: #FFFFFF; */
}
div#sp-icon {
    /*border: 1px solid #C6C6C6;*/
}
div#sp-icon:hover {
  cursor: pointer;
  opacity: 0.7;
}
div#sp-icon span, div#sp-icon span:before, div#sp-icon span:after {
  display: inline-block;
  width: 25px;
  height: 3px;
  background: #FF6000;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.3s;
}
div#sp-icon span {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
div#sp-icon span:before {
  content: "";
  transform: translateY(-10px) rotate(0deg);
}
div#sp-icon span:after {
  content: "";
  transform: translateY(10px) rotate(0deg);
}
div.sp-open span {
  background: transparent !important;
}
div.sp-open span:before {
  transform: rotate(45deg) !important;
}
div.sp-open span:after {
  transform: rotate(-45deg) !important;
}

.backnum{
    display: block;
    padding: 50px 0;
    text-align: center;
    background-color: black;
    color: #FFFFFF;
}
.backnum a{
    color: #FFFFFF;
}