/* Scalable canvas */

* {
  border: 0; margin: 0; padding: 0;
  overflow: hidden;
}

div.fullWidth {
  
  width: 100%;
  height: 100%;
}

div.fullWidth canvas {
  /* max-height: 90vh;
  min-height: 90vh; */

  /* min-width: 360px; */
  
  position: absolute; 
  top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  
  /* min-width: 360px; 
  min-height: 100%;  */
  /* width: 50.85vh; */
  /* width: auto;
  height: 100%; */
  /* width: auto;
  height: 100%; */

}

/* body {
  background-color: #2B2F37;
  width: 100%;
  height: 100%;
} */


/* Logo */

div#loadingBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: calc(50% - 12.5%);
  left: 0%;
  margin-top: -10px;
  text-align: center;;
  overflow: hidden;
  /* border: 2px solid red; */
}

div#loadingBox2 {
  top: 60%;
  width: 100%;
  height: 20%;
  position: fixed;
  margin-top: -10px;
  text-align: center;
  overflow: hidden;
}

div#loadingBox3 {
  top: 60%;
  width: 100%;
  height: 100%;
  position: fixed;
  text-align: center;
  overflow: hidden;
}


/*화면 해상도에 따른 코드 분류*/
/* @media(max-width:2080px) { div#loadingBox2 { transform: scale( 1.4 );  }
                           div#loadingBox { transform: scale( 4.0 );  }

@media(max-width:720px) { div#loadingBox2 { transform: scale( 1.0 );  }
                          div#loadingBox { transform: scale( 1.0 );  } */

img#logo {
	
  padding-top: 0%;
  
  width: 232;
  height: 240;
 
  /*max-width: 100%;
  height: auto;*/
  content: url("logo.gif");
  /*height: calc(100% - 25px);*/
  /* border: 2px solid blue; */  
}

.playButton {
	position: relative;
	left: 50%;
	top:  50%;
	transform: translate(-50%, -50%);
	width: 148px;
	height: 202px;
	border-radius: 10px;
	color: #fdfdfd00;
	background-color: #fdfdfd00;
}

.playButton:hover {
    color: #fdfdfd00;;
    background-color: #fdfdfd00;
}
div.ImgBtn{
  position: absolute;
  left: 0px;
  top:0px;
}

input {
  position: absolute;
  top: 50px;
  left: 40px;
}

Progress bar 

div#bgBar {
  position: absolute;
  width: 200px;
  margin-left: -105px;
  left: 50%;
  height: 5px;
  display: block;
  background-color: rgb(120, 245, 18);
}

div#progressBar {
  left: 50%;
  position: absolute;
  margin-left: -105px;
  height: 7px;
  background-color: #2796C4;
  border-radius: 2px;
  /* border: 2px solid red; */
}

div#bgBar {
  border-radius: 2px;
}

p#loadingInfo {
  color: #e6e6e6;
  letter-spacing: 1px;
  position: absolute;
  width: 100%;
  font-family: "Monaco", sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  margin-top: 15px;
}

div#lodingbackground
{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
}

/* ios clipboard */
.clipboard_btn {
	position: relative;
  top:  53.55%;
  left: 0.2%;
	width: 188px;
	height: 61px;
	border-radius: 10px;
  background-color: #fdfdfd00;
  text-align: center;
  transform: scale(1.0);
}

.clipboard_btnC {
	position: relative;
	top:  53.55%;
	width: 188px;
	height: 61px;
	border-radius: 10px;
  background-color: #fdfdfd00;
  text-align: center;
  transform: scale(0.9);
}


.clipboard_background {
	position: relative;
	left: 50%;
	top:  50%;
	transform: translate(-50%, -50%);
	width: 492px;
	height: 206px;
	border-radius: 10px;
  background-color: #fdfdfd00;
  text-align: center;
}

.clipboardbase {
	position: relative;
	left: 50%;
	top:  50%;
	transform: translate(-50%, -50%);
	background-color: #fdfdfd00;
}

/* .clipboard:hover {
    color: #fdfdfd00;;
    background-color: #fdfdfd00;
} */