.sidebar{ border-radius:8px; position:relative; margin:0px; display: flex; flex-direction: column; }
.sidebar>.item{

  width:100%; 

  display:flex; 
  justify-content:center; 
  align-items:center; 
  background:#000;
  background-size:100%;
  background-repeat:no-repeat;
  background-size:100%;
  border:solid 1px #000;
  box-shadow: 0px 0px 10px #000;
  
  vertical-align:middle; 
  padding-bottom:10px;
}

.sidebar>.item:hover .fristTxt{color: #77f4ff;}
.sidebar>.item:hover .secondTxt{color: #e3ff28;}
.sidebar>.item:active .fristTxt{color: #b4ff00;}
.sidebar>.item:active .secondTxt{color: #fff;}

.sidebar>.item a{width:100%;  color:#fff; position:relative; display: flex; flex-direction: column;}
.sidebar>.item a>div:first-child{width:100%; background: url('../images/common/MAIN-MENU-01.png?v=1'); background-size: 100%;}
.sidebar>.item a>div:last-child{width:100%; background: url('../images/common/MAIN-MENU-02.png?v=1'); background-size: 100%; background-position: 100% 100%;}

.sidebar>.item a .info{width:100%; background: url('../images/common/MAIN-MENU-BACKGROUND.png') 0% center no-repeat; background-size: 400%; padding: .5rem 0rem;}
.sidebar>.item a .info.ja-jp,.sidebar>.item a .info.ko-kr{padding:0rem;}
.sidebar>.item a .info.ja-jp>div{line-height: 1.5;}
.sidebar>.item a .info.ko-kr>div{line-height: 1.6;}
.sidebar>.item a .info.th-th>div{line-height: 1.25;}
/*.sidebar>.item a .info.fr-fr>div{line-height: 1.3;}
.sidebar>.item a .info.de-de>div{line-height: 1.4;}
.sidebar>.item a .info.es-mx>div{line-height: 1.4;}*/

.sidebar>.item a .info.en-us{padding: .3rem 0rem;}
/*.sidebar>.item a .info.fr-fr{padding: .2rem 0rem;}
.sidebar>.item a .info.de-de{padding: .1rem 0rem;}
.sidebar>.item a .info.es-mx{padding: 0rem 0rem;}
.sidebar>.item a .info.pt-br{padding: .1rem 0rem;}*/
.sidebar>.item a .info.ja-jp .secondTxt,.sidebar>.item a .info.ko-kr .secondTxt{font-size: .95rem;}
/*.sidebar>.item a .info.th-th .secondTxt{font-size: .9rem;}*/
/*.sidebar>.item a .info.fr-fr .secondTxt{font-size: .9rem;}
.sidebar>.item a .info.de-de .secondTxt{font-size: .9rem;}
.sidebar>.item a .info.es-mx .secondTxt{font-size: .9rem;}
.sidebar>.item a .info.pt-br .secondTxt{font-size: .9rem;}*/
.sidebar>.item:hover a .info{background-position: 33.33% center;}
.sidebar>.item:active a .info{background-position:66.66% center;}
.sidebar>.item:hover a>div:first-child{background-position: 0% 33.33%;}
.sidebar>.item:active a>div:first-child{background-position: 0% 66.66%;}
.sidebar>.item:hover a>div:last-child{background-position: 0% 66.66%;}
.sidebar>.item:active a>div:last-child{background-position: 0% 33.33%;}
.sidebar>.item a.cnLetterSpacing{line-height:24px;}
.sidebar>.item a.enLetterSpacing{line-height:19px;}
.sidebar>.item .fristTxt{font-size:1.2rem; color:#9f9dff; text-shadow:0px 0px 2px #000;}
.sidebar>.item .secondTxt{font-size:1rem; font-weight:400; color:#8f8fa2; word-wrap:break-word;}

.sidebar .item:last-child{margin-bottom:0px;}

.sidebar>.item a{color:#fff; text-align:center;}
.sidebar .subclass{width:600px; background:#000; color:#fff; text-align:center; position:absolute; top:0px; left:120%; padding:0px 1.2rem 1.2rem 1.2rem; margin-left:1.2rem; border-radius:8px; z-index:-1; opacity:0; transition:all 500ms;}
.sidebar .subclass.show{z-index:1000; left:100%; opacity:1;} 

.sidebar .subclass .container{
  width:100%;
  height:100%;
  padding:0px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-align: center;
  width:100%;
  height:100%;
border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
}

.back{
  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
}


.front:after{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .2;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform:translateZ(60px) scale(0.94);
    transform:translateZ(60px) scale(1);
    position: absolute;
    width: 100%;
    height:100%;
    font-size: .65em;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;

}

.inner.enLetterSpacing{
  font-size: .5rem !important;
}

.inner p{margin-bottom:0px; }

.container .back{
    background-image: url('../images/nav/OPTION-BACK.gif');
    background-size:100%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container .front{
    background-color:#000;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 1.4rem;
  margin-bottom: 2rem;
  padding: 1rem;
   word-break:keep-all  !important;
  color:#95fffe;
  text-shadow:0 0 5px #000,0 0 10px #000,0 0 15px #000,0 0 20px #000;
  position: relative; 
}

.ja-jp .front .inner p{
  font-size: 1.1rem; letter-spacing: 1px !important;
}
.th-th .back .inner p{font-weight:0; line-height: 1.2;}

.front .inner p:after{
  content: '';
  box-shadow: 1px 1px 1px #000;
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #c6ff00;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}


.back .inner p{font-weight:0; color:#ccff00; text-shadow: 1px 1px 1px #000; word-break:keep-all  !important;}
.back .inner .go{color:#43fffd;}
.back:active .inner p{font-weight:0; color:#fff; text-shadow: 1px 1px 1px #000;}
.back:active .inner .go{color: #b4ff00;}
.sidebar .RC .front{background-image:url('../images/nav/SERIESOPTION-RC.png') ! important;}
.sidebar .ER .front{background-image:url('../images/nav/SERIESOPTION-ER.png') ! important;}
.sidebar .EP .front{background-image:url('../images/nav/SERIESOPTION-EP.png') ! important;}
.sidebar .GM .front{background-image:url('../images/nav/SERIESOPTION-GM.png') ! important;}
.sidebar .CS .front{background-image:url('../images/nav/SERIESOPTION-CS.png') ! important;}
.sidebar .VZ .front{background-image:url('../images/nav/SERIESOPTION-VZ.png') ! important;}
.sidebar .VR .front{background-image:url('../images/nav/SERIESOPTION-VR.png') ! important;}
.sidebar .VE .front{background-image:url('../images/nav/SERIESOPTION-VE.png') ! important;}
.sidebar .CB .front{background-image:url('../images/nav/SERIESOPTION-CB.png') ! important;}
.sidebar .RU .front{background-image:url('../images/nav/SERIESOPTION-RU.png') ! important;}
.sidebar .EG .front{background-image:url('../images/nav/SERIESOPTION-EG.png') ! important;}
.sidebar .HF .front{background-image:url('../images/nav/SERIESOPTION-HF.png') ! important;}
.sidebar .FM .front{background-image:url('../images/nav/SERIESOPTION-FM.png') ! important;}
.sidebar .AT .front{background-image:url('../images/nav/SERIESOPTION-AT.png') ! important;}
.sidebar .ML .front{background-image:url('../images/nav/SERIESOPTION-ML.png') ! important;}
.sidebar .LU .front{background-image:url('../images/nav/SERIESOPTION-LU.png') ! important;}
.sidebar .SL .front{background-image:url('../images/nav/SERIESOPTION-SL.png') ! important;}
.sidebar .SF .front{background-image:url('../images/nav/SERIESOPTION-SF.png') ! important;}
.sidebar .LH .front{background-image:url('../images/nav/SERIESOPTION-LH.png') ! important;}
.sidebar .CR .front{background-image:url('../images/nav/SERIESOPTION-CR.png') ! important;}
.sidebar .CC .front{background-image:url('../images/nav/SERIESOPTION-CC.png') ! important;}
.sidebar .NV .front{background-image:url('../images/nav/SERIESOPTION-NV.png') ! important;}
.sidebar .FW .front{background-image:url('../images/nav/SERIESOPTION-FW.png') ! important;}
.sidebar .AP .front{background-image:url('../images/nav/SERIESOPTION-AP.png') ! important;}
.sidebar .LE .front{background-image:url('../images/nav/SERIESOPTION-LE.png') ! important;}
.sidebar .SJ .front{background-image:url('../images/nav/SERIESOPTION-SJ.png') ! important;}
.sidebar .VD .front{background-image:url('../images/nav/SERIESOPTION-VD.png') ! important;}
.sidebar .BF .front{background-image:url('../images/nav/SERIESOPTION-BF.png') ! important;}
.sidebar .TH .front{background-image:url('../images/nav/SERIESOPTION-TH.png') ! important;}
.sidebar .BX .front{background-image:url('../images/nav/SERIESOPTION-BX.png') ! important;}
.sidebar .JS .front{background-image:url('../images/nav/SERIESOPTION-JS.png') ! important;}
.sidebar .SW .front{background-image:url('../images/nav/SERIESOPTION-SW.png') ! important;}
.sidebar .BI .front{background-image:url('../images/nav/SERIESOPTION-BI.png') ! important;}
.sidebar .MT .front{background-image:url('../images/nav/SERIESOPTION-MT.png') ! important;}
.sidebar .SP .front{background-image:url('../images/nav/SERIESOPTION-SP.png') ! important;}
.sidebar .FR .front{background-image:url('../images/nav/SERIESOPTION-FR.png') ! important;}
.sidebar .PL .front{background-image:url('../images/nav/SERIESOPTION-PL.png') ! important;}
.sidebar .LC .front{background-image:url('../images/nav/SERIESOPTION-LC.png') ! important;}
.sidebar .GC .front{background-image:url('../images/nav/SERIESOPTION-GC.png') ! important;}
.sidebar .HN .front{background-image:url('../images/nav/SERIESOPTION-HN.png') ! important;}

@media (min-width: 992px) and (max-width: 1200px) {
  .sidebar .subclass{width:500px !important;}
  .sidebar .back .inner{transform:translateZ(60px) scale(0.8) !important;}
  .sidebar .secondTxt{font-size:.8rem !important; letter-spacing: 0px !important;}
}