/* 커스텀 */
/* 좌측 사이드 바 */
/* 좌측 사이드바 배경 */
#csmenu {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0);
  visibility:hidden;
  z-index: 10000;
  transition:visibility .5s, background-color .5s;
  -webkit-transition:visibility .5s, background-color .5s;
}
#csmenu.active {
  background-color:rgba(0,0,0,0.5);
  visibility:visible;
}

/* 좌측 사이드바 */
.left-side-bar {
  position:fixed;
  top:0;
  right:-250px;
  width:250px;
  height:100%;
  background-color:#fff;
  transition:right 0.5s;
  -webkit-transition:right 0.5s;
}
#csmenu.active > .left-side-bar {
  right:0 !important;
}
.left-side-bar > .menu-1 ul > li > a {
  display: block;
  line-height: 56px;
  padding: 0 16px 0 20px;
  color: #3f3f3f;
  background-color: #fff;
  font-size:1.6rem;
  border-bottom:1px #e0e0e0 solid;
}

.left-side-bar > .menu-1 ul > li.title {
  background:#303030;
  padding: 0 16px 0 20px;
  color: #fff;
  line-height:130px;
  font-size:2rem;
  margin-bottom: 10px;
}
.left-side-bar > .menu-1 ul > li.active > ul > li > a {
  background-color: #f1f6fb;
}

.left-side-bar > .menu-1 ul > li.mem > a {
 background-color: #f5f5f5;
}
/* 혼자가 아닌 a 에 +를 붙혀준다 */
.left-side-bar > .menu-1 ul > li > a:not(:only-child)::after {
  content:"\e93f";
  font-family: "xeicon";
  float:right;
  color: #c0c0c0;
}
/* 엑티브가 있는 메뉴(펼쳐진 메뉴)에 a에 - 를 붙혀준다 */
.left-side-bar > .menu-1 ul > li.active > a:not(:only-child)::after {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
.left-side-bar > .menu-1 > ul ul {
  display:none;
  background-color:#cfcfcf;
}
.left-side-bar > .menu-1 > ul ul ul {
  background-color:#dfdfdf;
}
.left-side-bar > .menu-1 ul > li.active > ul {
  display:block;
}


@media only screen and (max-width:640px) {
  .left-side-bar > .menu-1 ul > li.title  {
    line-height: 25vw;
    font-size: 6.5vw;
  }
  .left-side-bar > .menu-1 ul > li > a {
    font-size: 4.5vw;
    line-height: 9vw;
  }
}