@charset "utf-8";

body 
{
	margin:0px;
	padding:0px;
	border: 0px;
	background: #ffffff;

	-webkit-text-size-adjust: 100%;
	overflow-y:scroll;
    overflow-x:hidden;
}

div, input, video, img, table, tr, td
{
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-text-size-adjust:none;

	position: relative;
}

img, video
{
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}

.HIDDEN
{
	display: none;
}

.NO_MOUSE
{
	pointer-events:none; 
}

.BTN
{
	cursor: pointer;
}

.NO_SEL
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.TRANSPARENT
{
	opacity: 0;
}

.ABS
{
	display: block;
	position: absolute;
}

.fit
{
	width: 100%;
	height: auto;
}

/**********************************/

@font-face 
{
    font-family: sf_bold;
    src: url(../assets/sf_bold.ttf);
}

@font-face 
{
    font-family: sf_medium;
    src: url(../assets/sf_medium.ttf);
}

@font-face 
{
    font-family: sf_regular;
    src: url(../assets/sf_regular.ttf);
}

@font-face 
{
    font-family: sf_light;
    src: url(../assets/sf_light.ttf);
}

/**********************************/
/**********************************/
/**********************************/

#wrapper
{
	width:100vw;
	height:100vh;
}

#bg
{
	width: 100%;
	height: 100%;
  	background-repeat: no-repeat;
}

#input_con
{
	overflow: visible;
}

#input_input
{
	font-family: "sf_regular";
	text-align: left;
	vertical-align: middle;
	color:#ffffff;	

    border-radius: 5px;
  	border: 2px solid #ffffff;

  	box-sizing: border-box;
  	background-color: #000000;
}

#input_btn
{
	font-family: "sf_regular";
	text-align: center;
	vertical-align: middle;
	color:#ffffff;

    border-radius: 5px;
  	border: 2px solid #ffffff;

  	box-sizing: border-box;
  	background-color: #000000;
}

#input_required
{
	font-family: "sf_regular";
	text-align: center;
	vertical-align: middle;
	color:#525252;

	background-color:#363636;  
    border-radius: 5px;
  	border: 0px solid #ffffff;
}

#input_request
{
	font-family: "sf_medium";
	text-align: left;
	color: #ff00c6;

  	-webkit-filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.7))
}

#input_request:hover
{
	text-decoration: underline;
}







/*******************/

#pop_con
{
	display: block;
	position: fixed;

	width: 100vw;
	height: 100vh;

	left: 0px;
	top: 0px;
}

#pop_bg
{
	width: 100%;
	height: 100%;
	background-color:rgba(0, 0, 0, 0.8); 
}

#pop_panel
{
	background-color:#ffffff;
   	border-radius: 5px;
	border: 2px solid #ff0000;
	box-sizing: border-box;

	font-family: "sf_regular";
	text-align: center;	
	color: #000000;

	background-position: center;
  	background-repeat: no-repeat;
}

#pop_txt1
{
}

#pop_txt2
{
}

.pop_txt3
{
	color: #ff0000;
}

#pop_line
{
	background: #000000;
}

#pop_qr
{	
	background-repeat: no-repeat;
	background-position: center;
}

#pop_close_btn
{
}

#pop_close, #pop_close_r
{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

#pop_close
{
	background-image: url("../assets/p1.png");
}

#pop_close_r
{
	background-image: url("../assets/p1r.png");
	opacity: 0;
}


















/********************************************************/
/********************************************************/
/********************************************************/

@media screen and (min-width: 641px) 
{
	#bg
	{
		background-image: url("../assets/p0.png");
		background-position: 50% 50%;
  		background-size: cover;	
	}

	#input_con
	{
		left: 50%;
		top: 50%;
	}

	#input_input
	{
		width: 392px;
		height: 50px;

		left: -290px;
		top: -25px;
		padding-left: 30px;

		font-size: 22px;
		line-height: 50px;
	}

	#input_required
	{
		width: 116px;
		height: 30px;

		right: -90px;
		top: 50%;
		margin-top: -15px;

		font-size: 22px;
		line-height: 30px;
	}

	#input_btn
	{
		width: 148px;
		height: 50px;

		left: 120px;
		top: -25px;

		font-size: 22px;
		line-height: 50px;
	}

	#input_request
	{
		width: 200px;
		height: 40px;

		left: -258px;
		top: 28px;

		font-size: 22px;
		line-height: 40px;
	}





	/*******************/

	#pop_panel
	{
		width: 472px;
		height: 408px;

		left: 50%;
		margin-left: -236px;
		top: 50%;
		margin-top: -204px;
	}

	#pop_txt1
	{
		width: 100%;
		left: 0px;
		top: 46px;

		font-size: 26px;
		line-height: 26px;
		font-weight: bold;
	}

	#pop_txt2
	{
		width: 100%;
		left: 0px;
		top: 100px;

		font-size: 22px;
		line-height: 28px;
		font-weight: bold;
	}

	#pop_line
	{
		width: 260px;
		height: 2px;

		left: 50%;
		margin-left: -130px;
		top: 85px;
	}

	#pop_qr
	{
		background-image: url("../assets/p3.png");

		width: 333px;
		height: 174px;

		left: 50%;
		margin-left: -165px;
		top:186px;
	}

	#pop_close_btn
	{
		width: 50px;
		height: 50px;

		right: -18px;
		top: -18px;
	}
}




/********************************************************/
/********************************************************/
/********************************************************/

@media screen and (max-width: 640px) 
{
	#bg
	{
		background-image: url("../assets/m_p0.png");
		background-position: 50% 50%;
		background-size: 640px 1200px;
	}

	#input_con
	{
		left: 50%;
		top: 50%;
	}

	#input_input
	{
		width: 280px;
		height: 62px;

		left: -212px;
		top: -174px;
		padding-left: 30px;

		font-size: 22px;
		line-height: 62px;
	}

	#input_required
	{
		width: 102px;
		height: 40px;

		left: -45px;
		top: -163px;

		font-size: 22px;
		line-height: 40px;
	}

	#input_btn
	{
		width: 110px;
		height: 62px;

		left: 82px;
		top: -174px;

		font-size: 23px;
		line-height: 62px;
	}

	#input_request
	{
		width: 200px;
		height: 40px;

		left: -190px;
		top: -110px;

		font-size: 22px;
		line-height: 40px;
	}





	/*******************/

	#pop_panel
	{
		width: 510px;
		height: 444px;

		left: 50%;
		margin-left: -255px;
		top: 50%;
		margin-top: -222px;
	}

	#pop_txt1
	{
		width: 100%;
		left: 0px;
		top: 60px;

		font-size: 26px;
		line-height: 26px;
		font-weight: bold;
	}

	#pop_txt2
	{
		width: 100%;
		left: 0px;
		top: 106px;

		font-size: 22px;
		line-height: 28px;
		font-weight: bold;
	}

	#pop_line
	{
		width: 280px;
		height: 2px;

		left: 50%;
		margin-left: -140px;
		top: 90px;
	}

	#pop_qr
	{
		background-image: url("../assets/p3.png");

		width: 360px;
		height: 188px;

		left: 50%;
		margin-left: -180px;
		top:204px;
	}

	#pop_close_btn
	{
		width: 50px;
		height: 50px;

		right: -18px;
		top: -18px;
	}
}