@font-face {
      font-family: "gulim";
      src:  local("gulim"),
  url(fonts/gulim.ttf);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;  /*모든 속성의 마진값, 패딩값이 0으로 설정되어 있음*/
  box-sizing: border-box;
  font-size: 100%;  /*모든 폰트 사이즈 동일, 기본값이 16픽셀 */
  font-family: gulim; 
  scroll-behavior: smooth;

}

html, body{
  height:  100%;
  /*background-color: *//*RGB(213, 210, 210); *//*#d4ccc9;*/
  background-color: #cbd1d4;
  filter: saturate(66%);
  overflow: hidden;
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;  
}

#dark_body{
	background-color: #050012 /*E5E8EE*/;
}
.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
mobile{
	display: none;
}

/*lang*/
 
#index_lang{
	height:  15px;
	position: absolute;
	top : 483px;
	left: 3px; 
	align-self: flex-start;
	flex-shrink: 0;
	z-index: -1;
}
#index_lang button{
	font-size: 9pt;
	width: 30px;  
	border: none;
} 
#index_en{
 	background: #eeee66; 
 	position: absolute;
 	height: 15px;  
 	top: -9px;
 	left: 3px;
 	opacity: 0.5;
 	transition: all 1s ease-in-out;
 	border-radius: 5px;
 	box-shadow: 0 0 2px 2px #050012 inset; 
} 
#index_en:hover{
 	background: palevioletred;  
 	cursor: pointer; 
 	filter: brightness(1.3);
} 
  
#main_lang{
	height:  15px;
	position: absolute; 
	left: 3px;
	z-index: -1;
	top: calc(483px - 15px / 2); 
 	align-self: flex-start;
	display: flex;
	flex-direction: row;
}

#main_lang button{ 
 	width: 30px;   
	border-radius: 5px;  
	
 	opacity: .7; 
}

#main_en{
  	border: 1px solid gray; 
 }
#main_en:hover{ 
 		cursor: pointer; 
}
 
.daylang{
  background:rgba(0,10,255,1);
  border: 1px solid rgba(0,0,0,0.3);
}
.nightlang{
  background: #FFD866;
  border: 1px solid rgba(250,250,250,0.3);

}
.daylang:hover{
    background: rgb(245,225,180);
}
.nightlang:hover{
  background:rgba(10,30,255,1);
}

#lang{
	height:  15px;
	position: absolute; 
	top: 621px;
	z-index: -1;
	left: 3px;
	align-self: flex-start;

}  

#lang button{ 
	font-size: 9pt;
	width: 30px;
	height: 15px;
	border-radius: 5px;  
  opacity: 0.5;
}

 

/*index.html*/
 
.content{
	width: 483px;
	height: 483px; 
	overflow: hidden;
	background-size: cover;
	padding-bottom: 45px; 

}
 
 #callbutton button{
 	border: none; 
 	box-shadow: 0 2px 5px 0px #7d7c78 inset, 0 0 3px 3px rgba(205,205,205,.2) inset;
 	width:calc( 483px / 1.3);
 	font-size: 9pt; 
 	font-style:italic ;
 	color: #777;
 	text-shadow: 0 2px 5px 0px rgba(25,240,250,0.9) inset;
 	position: relative; 
 	top: 0;
 	z-index: -1;
 	left: 50%; 
 	word-break: break-all;
 background: hsla(0, 0%, 100%, 1);

background: linear-gradient(225deg, hsla(0, 0%, 100%, 0) 0%, hsla(36, 35%, 1%, 0.9) 54%, hsla(28, 5%, 59%, 1) 100%);

background: -moz-linear-gradient(225deg, hsla(0, 0%, 100%, 0) 0%, hsla(36, 53%, 1%, 0.9) 54%, hsla(38, 5%, 59%, 1) 100%);

background: -webkit-linear-gradient(225deg, hsla(0, 0%, 100%, 0) 0%, hsla(36, 35%, 91%, 0.9) 54%, hsla(38, 5%, 59%, 0) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#D2D0CD", GradientType=1 );
  	animation: shine 17s ease infinite alternate;
 	transform: translateX(-50%); 
 	padding: 5px 0px;
 	background-size: 300% 100%;
 }

 #callbutton button > p{
 	 	font-size: 7pt; 
 	 	font-style: normal;
 	 	word-break: break-all;
 
 }
  @keyframes shine {
    0% { background-position: 0% 0%; }  
    100% { background-position: 300% 100%; }
}
default, load{ 
	position: absolute; 
	width: 483px;
	height: 483px; 
	top:  calc(50vh - 483px / 2);
	left: 50%;
	padding:  0vw;
	/*border-style: double;*/
	transform:  translateX(-50%);
	display: flex; 
	flex-direction: column;
	margin: 0;
	text-align: center; 

}
 
 

flexbox{
	display: flex;
	width: 322px;
	height: 483px; 
	position: absolute; 
	left: 50%;
	padding:  0vw; 
	transform:  translateX(-50%);
	flex-direction: column;
	justify-content: center;  
}
 
   
 
 
/*main*/

#lamp{
	display: block;
	min-width: 16px;
	min-height: 16px;
 	position: absolute;
	bottom: 0px;
	width: 100%;
	font-family: Times;
	z-index: 2;
	height: 20px;
 } 
.daylamp{
  background: rgb(240,242,244); 
  box-shadow: 0px -5px 7px rgba(255,255,255,0.8); 
 
}

.nightlamp{
  background: rgb(148,148,141);
	box-shadow: 0px -5px 7px rgba(204,216,229,0.6); 
 
}
  
layer{
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
	 
}
.nightshift{
	 background: /*rgba(234,187,145,.3);*/ #0A0B0B;
}

.nightbox{
	/*color: #afa371;*/
	/*box-shadow: 1px 1px 1px #afa371;*/
}
default p{
	font-size: 10pt;
	font-family: Times;
	line-height: 2;
	position: relative;
	width: 350px;
	transform: translateX(-50%);
	left:  50%;
	text-align: left;
	letter-spacing: 1px; 
	padding:  15px 0px;

}

#mags{
	/*width: 322px;*/  
	height:  483px;
	/*margin: 118px 0px;*/
	transform: translateX(-50%);
	left:  50%;
	position: relative;
	background-size: cover;
	display: grid;
	grid-template-rows: 3fr 2fr 3fr 19px;
	grid-template-columns: 9fr 10fr 9fr;


 }
   
  
 
.daylink:hover{
	background: rgba(100, 100, 102,0.3);
	box-shadow: 0px 0px 25px 15px #cbd1d4 inset;

}
.nightlink:hover{
	background: rgba(102,102,105,0.5);
	box-shadow: 0px 0px 25px 15px #0a0b0b inset;

} 
 
.links:hover{
	cursor: pointer;
/*	opacity: 0;
*/
  }
 .links{
 	background: rgba(110, 120, 132,0.1);
 }

 .dream_day:hover{
 	background: url('room_day.png');
	background-size:  483px 483px;
	background-position: top left;
  }
 .puzzle_day:hover{
 	background: url('room_day.png');
	background-size:  483px 483px;
	background-position: top right;
 }
 .car_day:hover{
 	background: url('room_day.png');
	background-size:  483px 483px;
	background-position: left 199px;
 }
 .callme_day:hover{
 	background: url('room_day.png');
	background-size:  483px 483px;
	background-position: right 199px;
 }
  .shower_day:hover{
 	background: url('room_day.png');
	background-size:  300% 300%;
	background-position: right 199px;
 }
 .dream_night:hover{
 	background: url('room_night.png');
	background-size:  483px 483px;
	background-position: top left;
 }
 .puzzle_night:hover{
 	background: url('room_night.png');
	background-size:  483px 483px;
	background-position: top right;
 }
 .car_night:hover{
 	background: url('room_night.png');
	background-size:  483px 483px;
	background-position: left 199px;
 }
 .callme_night:hover{
 	background: url('room_night.png');
	background-size:  483px 483px;
	background-position: right 199px;
 }
  .shower_night:hover{
 	background: url('room_night.png');
	background-size:  300% 300%;
	background-position: right 199px;
 }

 
 #stage{
 	background: rgba(255,255,255,0.5);
 	display: grid;
 	grid-template-rows: 6fr 1fr;
 	z-index: 3;
 }
 .daystage{
 	box-shadow: 0 0 25px #fff;
 }
  .nightstage{
 	box-shadow: 0 0 25px    rgba(255,255,255,0.6);
 }
  
 #sentence{
 	font-family: gulim;
 	font-style: italic;
 	font-size: 11pt;
 	word-break: keep-all;
  	place-self: center;
 	margin-top: 6pt;
 	padding: 5px;
 	color: rgba(0,0,255,0.9);
 }
 #column_index{
 	display: flex;
 	flex-direction: row;
 	justify-content: space-evenly;
 	place-self:  center stretch;
 	flex-grow: 1;
 	color: #CF23EA;

 }
 #row_index_grid{
  	display: grid;
   }
 #row_index{

 	display: flex;
 	flex-direction: column; 
 	align-items: flex-end; 
 	justify-content: space-evenly;
 	 	color: #CFD;

 }  
 .puzzle_index span{
 	font-size: 8pt;
 	transform: scaleX(0.7);
 	font-family: sans-serif;
 	text-align: center;
 	font-style: italic;
 } 
 #text_puzzle{
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 	flex-shrink: 0; 
  font-size: 9pt;
 	text-align: center; 

 } 
.text_puzzle_day{
 	background: url('room_day_c.png');
	background-size:  483px 483px;
	background-position: center 199px;
	filter: saturate(40%);
 
 }
 .text_puzzle_night{

 	background: url('room_night_c.png');
	background-size:  483px 483px;
	background-position: center 199px;
  
 }
 .puzzle_piece:hover{ 
 	background: rgba(200,200,200,0.5);

 }


.room_top_day{
  filter: saturate(50%) blur(1px);
 	background: url('room_day_c.png');
	background-size:  483px 483px;
	background-position:top center ;
 
 }
 .room_top_night{

 	background: url('room_night_c.png');
	background-size:  483px 483px;
	background-position:top center ;
	filter:   blur(1px)
 
 }
 .room_left_day{

 	background: url('room_day_c.png');
	background-size:  483px 483px;
	background-position: center left;
	filter: saturate(50%) blur(1px);
 
 }
 .room_left_night{

 	background: url('room_night_c.png');
	background-size:  483px 483px;
	background-position: center left;
	filter:   blur(1px)
 
 }
 .room_right_day{

 	background: url('room_day_c.png');
	background-size:  483px 483px;
	background-position: center right;
	filter: saturate(20%) blur(1px);
 
 }
 .room_right_night{

 	background: url('room_night_c.png');
	background-size:  483px 483px;
	background-position: center right;
	filter:   blur(1px);
 
 }
 .dayimage{
/*  background-image: url('room_day.png');   
*/ 		 /*background: rgba(210, 225, 220, .4); */
 box-shadow:  /* 0px 0px 10px 10px RGBA(35, 39, 42,0.2) inset, */0px 0 20px 20px RGBA(253, 253, 253,0.5) inset;
 
 }
 .nightimage{
 	 /*background-image: url('room_night.png'); */
 	/*background: #343438;*/
  box-shadow:  0px 0px 10px 10px RGBA(225, 249, 252,0.1) inset,0px 0 20px 20px #0A0B0B inset;
 

 } 
 
.roomimage{
	border:1px solid black;
}
.roomimage:hover{
	cursor: pointer;
}
 


/*light switch*/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 16px; 
  top: 2px;
}
.nightswitch{
	color: rgba(234, 236, 249,0.5);
}
.dayswitch{
	border-color: rgba(0,0,0,0.2);
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
input:checked + .slider {
  background-color: #333333;

}

input:focus + .slider {
  box-shadow: 0 0 1px gold;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background-color: #111;
	border: 1px solid rgba(234, 236, 249,0.5);
	box-shadow: 0 0 1px rgba(234, 236, 249,0.5);
}
/*progress bar*/
#index_loading{
	position: absolute;
	left: 50%; 

	top: 50%;
	transform: translate(-50%,-50%);
/*	margin-top:  calc(50vh - (483px - 19px) / 6.8 * 0.4 - 7.5px);
*/	display: flex;
	flex-direction: column;
	z-index: 3;
}  

@keyframes phonecolor {
    0% { background-position: 0% 0%; } 
    50% { background-position: 130% 100%; }
    100% { background-position: 0% 100%; }
}
#myProgress {
  width: calc(483px / 1.3) ;
  background-color: transparent;
  border-radius: 1px;

}

#myBar {
  width: 1px;
  height: 3px;
  background-color: transparent;
  border-radius: 1px;
  box-shadow: 0px 2px 2px 1px white inset;
  opacity: .5;
}

/* The slider */
.slider {
  position: absolute;
  border-style: double; 
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  border: 1px gray;
  border-style: double;
  content: "";
  height: 12px;
  width: 8px;
  left: 1px;
  bottom: 0px;
  background-color: #eee;
  -webkit-transition: .4s;
  transition: .4s;
} 
 
.d	color: blue;
}
.nightbutton{
	background:linear-gradient(180deg, #444d4d,#333);
 	color: #ffde0a;
}
 
  

/*mobile*/
@media ( max-width: 414px ) {

	body{ 
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		filter: saturate(100%);

	}
	 
	mobile{ 
		position: absolute;
		width: 100vw;
		height: calc(var(--vh, 1vh) * 100);
		top: 0;
		left: 0; 
		display: grid;
		grid-template-rows: 15px calc(var(--vh, 1vh) * 100 - 15px); 

	}
	frame_top{
		display: grid;
		grid-template-columns: auto 15px;
 	}
	
	frame_top_left{
		background-image: url('0/13.jpg');
		box-shadow: 0 -10px 35px 5px white;
		z-index: 4;
		border-bottom: 1px solid hsla(240, 2%, 36%, 1);
		filter: saturate(0%);

	}
	frame_top_right{
		background: hsla(240, 2%, 36%, 1);
		box-shadow: 0 0 2px 3px rgba(245,235,255,0.3) inset;
		border-left:1px solid hsla(240, 2%, 36%, 1);
		border-bottom: 1px solid hsla(240, 2%, 36%, 1);
	}
	frame_bottom{
		display: grid;
		grid-template-columns: auto 15px;
		height: calc(var(--vh, 1vh) * 100 - 15px);
	}
	frame_bottom_left{
 		display: grid; 
		grid-template-rows: 3fr 2fr;
	}
	frame_bottom_right{
		background-image: url('0/29.jpg'); 
		background-position: top right;
		/*box-shadow: -3px 0 25px 5px hsla(240, 2%, 36%, 1) ;*/
		border-left:  1px solid hsla(240, 2%, 36%, 1);
		z-index: 4;
		filter: saturate(10%);
	}
	sky{

 	background: hsla(240, 2%, 36%, 1);

background: linear-gradient(90deg, hsla(240, 2%, 36%, 1) 0%, hsla(240, 27%, 21%, 1) 25%, hsla(240, 6%, 14%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(240, 2%, 36%, 1) 0%, hsla(240, 27%, 21%, 1) 25%, hsla(240, 6%, 14%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(240, 2%, 36%, 1) 0%, hsla(240, 27%, 21%, 1) 25%, hsla(240, 6%, 14%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#5A5A5D", endColorstr="#272744", GradientType=1 );display: flex;
	perspective: 100px;
  -webkit-perspective-origin: top center;
	perspective-origin: top center;
	background-size: 155% 200%; 
	box-shadow: 0px -6px 5px 0px rgba(213, 195, 102,0.1) inset;
	animation: star 15s ease infinite alternate;

  }
 


 	numbertocall{
 		width: 125px; 
 		font-size: 18pt;
 		color: pink;
 		opacity: 0.6; 
  	bottom: 10px; 
  	transform-style: preserve-3d;
  	text-shadow: 0 0 1px #CCEEFF, 0 0 1px #0000FF;
 		transform: translateX(-50%)scaleX(3.0)rotateX(45deg);
 		text-align: center;
    position: relative;
    left: 50%; 
		word-wrap: break-word;
		letter-spacing: 5px;
		place-self: center;
		font-family: serif;
		  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;  

 	} 

	beach{
 		background: hsla(50, 5%, 44%, 1);

background: linear-gradient(90deg, hsla(50, 5%, 44%, 1) 0%, hsla(38, 5%, 59%, 1) 25%, hsla(60, 1%, 34%, 1) 100%);

background: -moz-linear-gradient(90deg, hsla(50, 5%, 44%, 1) 0%, hsla(38, 5%, 59%, 1) 25%, hsla(60, 1%, 34%, 1) 100%);

background: -webkit-linear-gradient(90deg, hsla(50, 5%, 44%, 1) 0%, hsla(38, 5%, 59%, 1) 25%, hsla(60, 1%, 34%, 1) 100%);

   	align-items: center;
	perspective: 80px;
  -webkit-perspective-origin: top center;
	perspective-origin: top center;
 	}
	
	beach_sand{
		position: absolute;
		transform-style: preserve-3d; 
 		transform: scaleX(3.0)rotateX(45deg);
 		background: hsla(51, 39%, 70%, 1);
background: hsla(51, 39%, 70%, 1);

background: radial-gradient(circle, hsla(51, 39%, 70%, 1) 0%, hsla(88, 9%, 73%, 1) 3%, hsla(0, 0%, 100%, 0) 8%);

background: -moz-radial-gradient(circle, hsla(51, 39%, 70%, 1) 0%, hsla(88, 9%, 73%, 1) 3%, hsla(0, 0%, 100%, 0) 8%);

background: -webkit-radial-gradient(circle, hsla(51, 39%, 70%, 1) 0%, hsla(88, 9%, 73%, 1) 3%, hsla(0, 0%, 100%, 0) 8%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#D0C795", endColorstr="#bac0b3", GradientType=1 );
      background-size: 1% 1%; 
  	  animation: sand 10s forwards infinite;
		width: 100%;
		height:calc(40% + 200px);
		bottom: 0;
		opacity: 0.7;
	}

 #keypad_numbers{  
 	position: relative;
 	left: 50px;
 	height: calc((var(--vh, 1vh) * 100 - 15px) / 5 * 2 - 30px);
 	width: calc((100vw - 15px));
 	margin: 15px 0px;
 	display: grid;
 	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
 	align-items: stretch;
 	justify-content: space-evenly;

 }
 #keypad_numbers button:not(#makecall){ 
 	text-shadow: 0 0 3px #FFFFFF, 0 0 1px #0000FF;
  background: transparent; 
 	margin-bottom: 5px;
 	margin-right: 50px;
 	padding: 5px;
  font-family: serif;
 	font-style: italic;
 	border: none; 
 	text-align: left;
  }
 #keypad_numbers button:hover{ 
 	color: #a89f82;
 }
 #row1, #row2, #row3, #row4, #row5{
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 }
 #row1 button{/*
 	height: 20px ;*/
 
 	transform: scaleX(3);
 	color: #646462;
 }
 #row2 button{
 /*	height: 35px ;*/
 /*	margin-left: 7px;*/
 	margin-top: 5px;
 	transform: scaleX(3.2);
 	color: #696967;
 }
 #row3 button{
/* 	height: 40px ;
*/ /*	margin-left: 7px;*/

 	transform: scaleX(3.8);
 	color: #7a7a77;
 }
 #row4 button{
 
 	transform: scaleX(4);
 	color: #8b8986;

 }
  #row5 button{
/* 	height: 55px;
*/ 	/*margin-left: 11px;*/
 	transform: scaleX(4.2);
 	color: #969491;

 } 

#row1 > .number2{
	margin-left: -1px; 
 	margin-top: 3px;

}
#row2 > .number1{
	margin-left: -4px;
	margin-top: 5px;
}

#row2 > .number3{
	margin-left: 5px;
	margin-top: -2px;
}
 #row4 > .number1{
 	width: 18px;
 	margin-left: -8px; 
 	margin-top: 17px;
  }
   #row4 > .number2{
 	width: 15px;
 	margin-left: -1px; 
 	margin-top: 1px;
  }
  
  #row4 > .number3{
 	width: 15px;
 	margin-left:17px; 
 	margin-top: 1px;
  }
 #row3 > .number2{
 	width: 30px;
 	margin-top: 3px;
 }
 #row5 > .number3{
	margin-top: 3px;
	margin-left: 3px;
*/ 	position: relative;
 	/*left: 50px;*/
 }
 #makecall{
 	text-shadow: 0 0 3px #FFFF00, 0 0 1px #0000FF;
  background: transparent; 
 	margin-bottom: 5px;
 	margin-right: 50px;
 	padding: 5px;
  font-family: serif;
 	font-style: italic;
 	border: none; 
 	text-align: left;

  	 
 } 
 #callbutton{
 	 	transform: scaleX(1.2); 	
 }
 #callbutton button{
 	border: none; 
 	box-shadow: 0 2px 5px 0px #7d7c78 inset, 0 0 3px 3px rgba(205,205,205,.2) inset;
 	width: 60vw;
 	font-size: 9pt;
 	color: #888;
 	text-shadow: 0 2px 5px 0px rgba(25,240,250,0.9) inset;
 	position: absolute; 
 	top: 0;
 	z-index: -1;
 	left: 50%;
 	background: rgba(255,255,255,0.3);
 	transform: translateX(-50%); 
 	padding: 5px 0px;
 }
 @keyframes star {
    0% { background-position: 0% 0%; }  
    100% { background-position: 100% 100%; }
}
 @keyframes sand {
    0% { background-position: 0% 0%; } 
    50% { background-position: 130% 100%; }
    100% { background-position: 0% 100%; }
}

/*hide desktop elements*/
	layer{
	display: none;
	}	 
}