html, body {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1024px;
  min-height: 768px; }

body {
  background-color: #1C2242;
  color: #f0f0f0;
  overflow: hidden; }

.l-wrapper {
  width: 100%;
  height: inherit;
  min-width: 1024px;
  min-height: 768px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden; }
  .l-wrapper .l-main, .l-wrapper .l-nav_container {
    height: inherit; }
  .l-wrapper .l-main {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative; }
    .l-wrapper .l-main .l-mainContets {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      display: block;
      -webkit-transition: 0.5s ease-in-out;
      transition: 0.5s ease-in-out;
      margin: 20px;
      opacity: 0;
      -webkit-transform-origin: right top;
              transform-origin: right top;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg); }
      .l-wrapper .l-main .l-mainContets.isSelected {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 1; }
        .l-wrapper .l-main .l-mainContets.isSelected .m-contents-title {
          width: 100%; }
      .l-wrapper .l-main .l-mainContets .m-contents-title {
        display: block;
        -webkit-transition: 4s ease-in-out;
        transition: 4s ease-in-out;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 0px;
        font-family: 'mSimpleRoundFont';
        font-size: 2em; }
  .l-wrapper .l-nav_container {
    width: 230px;
    min-width: 230px;
    z-index: 200; }