/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* WORKS BODY 
------------------------------------------------------------ */

body {
  background: transparent;
  overflow: hidden;
}

/* TV WRAP
------------------------------------------------------------ */

#wrap {
  display: block;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

/* TV WINDOW
------------------------------------------------------------ */

#tv-box {
  display: block;
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100dvh;
  margin: 0 auto;
  padding: 0;
}

#tv-movie {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  -ms-transform : translate(-50%,-50%);
      transform : translate(-50%,-50%);
  z-index: 3;
  width: 58%;
  height: 80%;
  margin: 0 auto;
  padding: 0;
  background: 50% 50% / cover no-repeat url(../image/design/06/hiroshi.gif);
}

#tv-frame{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: 50% 50% / 100% 96% no-repeat url(../image/design/07/tv.gif);
}

/* TV CHANNEL 
------------------------------------------------------------ */

.channel {
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  -ms-transform : translateY(-50%);
      transform : translateY(-50%);
  z-index: 5;
  width: 8vw;
  height: auto;
}

#left-side {
  left: 2%;
}

#right-side {
  right: 2%;
}

.channel > span {
  display: block;
  width: 8vw;
  height: 8vw;
  background: 50% 50% / 90% no-repeat url(../image/design/07/button.png);
  margin: 25% 0;
  cursor: pointer;
}

.channel > span:hover {
  background: 50% 50% / 100% no-repeat url(../image/design/07/button.png);
}

/* FOR PORTRAIT
------------------------------------------------------------ */

@media screen and (orientation: portrait) {

 #tv-box {
   height: 50dvh;
   margin: 30% auto 0;
 }

 #tv-movie {
   width: 90%;
 }

 #tv-frame{
   background: 50% 50% / 140% 96% no-repeat url(../image/design/07/tv.gif);
 }

 .channel {
   position: absolute;
   top: 110%;
   width: 50%;
   height: 10vw;
   text-align: center;
 }

 #left-side {
   left: 1%;
 }

 #right-side {
   left: 49%;
 }

 .channel > span {
   display: inline-block;
   width: 10vw;
   height: 10vw;
   margin: 0 4%;
 }

}