@charset "utf-8";
/* CSS Document */
body,html { height: 100%;margin: 0;}
html { overflow: hidden;}
body {font-family: 'Kanit', sans-serif;
    height: 100%;
    margin: 0;
    background-color: #333;
  }
  canvas {
     position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: 100%; 
  }
    #play,.play #play1 { position: fixed; bottom:3vw; left: 50%; transform: translateX(-50%); text-indent: -9999px; width: 60px; height: 60px; background-color: #FFF; border-radius: 50%; cursor: pointer; z-index: 9; transition: all .4s ease 0s;}
    .play #play {transform: translateX(-50%) scale(0);}
    .play.end #play {transform: translateX(-50%) scale(1);}
    #play:before { content: ""; display: block; width: 50px; height: 50px; border-radius: 50%; box-sizing: border-box; border: 1px solid #000; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}

.play #play1 { z-index: 99;}
    
    .loading #load { width: 45vw; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%);}
    .loading #load:before { content: ""; display: block; width: 45vw; height: 45vw; background-image: url("../img/Spinner-1s-200px.svg"); background-position: center; background-repeat: no-repeat; background-size: 45vw;}
    .loading #load #process { margin-top: 0em; text-align: center; color: rgba(27,223,3,1.00); font-size: 8vw;}
    
    #videoWrap { position: fixed; bottom: 0; right: 0; z-index: 2; width: 100%; height: 100%; overflow: hidden; transition: all .4s ease 0s; transform-origin: 100% 100%;}
    .play #videoWrap {bottom: 2vw; right: 2vw; transform: scale(.2); border-radius: .6em; border: 2vw solid rgba(27,223,3,1.00);}
    video { width: 100%; height: 100%; object-fit: cover; object-position: center;}
    
    /*.flash #videoWrap:after { content: ""; display: block; width: 100%; height: 100%; background-color:rgba(27,223,3,1.00); position: absolute; top:0; left: 0; opacity: 1;}*/
    .end #videoWrap { transform: scale(0);}

h1 { width: 100%; position: fixed; top:50%; left: 0; transform: translateY(-50%); text-align: center; color: rgba(27,223,3,1.00); font-size: 12vw; z-index: 2; transition: all .4s ease 0s; font-weight: 500; margin: 0; }
.play h1 { opacity: 0;}

.ios #ex { width: 80px; height: 80px; position: fixed; top:0; right:0; cursor: pointer; z-index: 9; background-image: url("../img/flip.svg"); background-size: 30px; background-position: center; background-repeat: no-repeat;}
    
    @media (orientation: landscape){
          .loading #load { width: 20vw;}
    .loading #load:before {  width: 20vw; height: 20vw; background-size: 20vw;}
    .loading #load #process {  font-size: 4vw;}
        h1 { font-size: 8vw;}
        }