@font-face {
font-family: "Gotham-Black";
src:url(/play/font/Gotham-Black.eot);
src: url(/play/font/Gotham-Black.woff);
}
@font-face {
font-family: "Gotham-Book";
src:url(/play/font/Gotham-Book.eot);
src: url(/play/font/Gotham-Book.woff);
}

@media (max-width:480px)
{


body {
  margin: 0;
  font-family: "Dosis", sans-serif;
  font-size: 62.5%;
  background-color: #201c29;
}

video {
	position: fixed; 
	left: 50%; 
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.video_filter {
	width: 100vw;
	height: 100vh;
	display: inline-block;
	background: rgba(0, 0, 0, 0.25);
	position: absolute;
	z-index: 2;
}
.container {
	padding: 0px 0px 210px 0px;
}
#content {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  /*
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  */
  display: flex;
  z-index: 3;
  position: relative;
  overflow-y: scroll;
}
.login {
	width: 100%;
	height: auto;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	padding: 0px 10px;
}
.login .logo {
  margin: 0 auto;
  text-align: center;
}
.login .logo img {
  width: 355px;
  height: auto;
  margin: 0 auto;
}
.joinus {
	width: 100%;
	height: auto;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	padding: 0px 10px;
}
.joinus .logo {
  margin: 0 auto;
}
.joinus .logo img {
  width: 355px;
  height: auto;
  margin: 0 auto;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
    0%   {opacity: 1;}
	25%  {opacity: 0.5;}
    50%  {opacity: 1;}
	75%  {opacity: 0.75;}  
    100% {opacity: 1;}
}

/* Standard syntax */
@keyframes example2 {
    0%   {opacity: 1;}
	25%  {opacity: 0.5;}
    50%  {opacity: 1;}
	75%  {opacity: 0.75;}  
    100% {opacity: 1;}
}

.content a {
  text-decoration: none;
  color: #ab49de;
}

section {
  padding: 3em 1em;
  font: normal 1rem "Montserrat", sans-serif;
  color: #201c29;
  background-color: #fefefe;
}
section h2 {
  margin-bottom: 1em;
}

/* ǪÅÍ */
#footer {
	/*position: absolute;*/
	bottom: 0;
	/*position: relative;*/
	position: fixed;
	width:100%;
	clear:both; 
	display:inline-block; 
	margin:0 auto; 
	text-align:center; 
	padding-bottom:0px; 
	z-index: 10;
}
#footer .footer_area{
	width:100%; 
	margin:0 auto 0px auto; 
	padding:0px 0px; 
	display:block;
}
#footer .f_banner {
	width:100%;
	display:inline-block; 
	border-bottom:1px solid rgba(255, 255, 255, 0.2);
	padding:5px 0px 5px 0px; 
}
#footer .domain{
	background: url('/play/images/bottom_domain.gif') center center no-repeat;
	width: 100%;
	height: 100px;
	display: inline-block;
	background-size: contain;
	border: 0;
}
#footer .f_btm {
	width:100%;
	display:inline-block; 
	border-bottom:1px solid rgba(255, 255, 255, 0.2);
	padding:10px 0 10px 0; 
	color:#666666;
}
#footer .f_btm img {
	margin:0 auto;
}
#footer .f_btm address{
	display:block;
	font-style:normal; 
	color:#dddddd;
	font-size:12px;
	font-family: "Gotham-Book",sans-serif; 
	text-align: center;
}
#footer_slider {
   overflow:hidden;
   position:relative;
   border:0px solid red;
   width:100%;  /* À̹ÌÁö º¸¿©Áö´Â ºä ºÎºÐ*/
   height:60px;
   padding: 10px 0px;
   box-sizing: border-box;
   margin: auto;
}
.image-box {
   width:5280px; /* ¿øº»+Ŭ·ÐÀÇ ÃÑ ÇÕ*/
   height:100%;
   display:flex;
   flex-wrap:nowrap;
   animation: bannermove 50s linear infinite;
	filter: grayscale(0%);
}
.image-box img {
	height: 40px;
	opacity: 0.7;
}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}
/* ǪÅÍ */


#contents .introArealogin {
	margin: 0 auto; 
	width: 355px; 
	height: auto; 
	display: flex;
	flex-direction: column;
	z-index: 9; 
	box-sizing: border-box; 
	text-align: center; 
	padding: 20px;
	background: rgba(0,0,0,0.5);
	border-radius: 10px;
}
#contents .introAreajoin {
	position:relative; 
	margin:auto; 
	width:600px; 
	height:600px; 
	z-index:9; 
	top:500px;
}
#contents .introArealogin span.telegram {
	margin:10px auto 10px auto;
}
#contents .introArealogin span.telegram1 {
	margin:10px auto 0px auto;
}
#contents .introArealogin span.telegram img, #contents .introArealogin span.telegram1 img{
	width: 100%;
}

.introArealogin input.loginid{
	display:inline-block; 
	background:#222222; 
	width: 315px; 
	box-sizing: border-box;
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	margin-bottom:5px; 
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	border-radius:5px;
	color:#ffffff; 
	font-size:14px; 
	text-align: center;
}
.introArealogin input.loginid::placeholder {
	color:#ffffff; 
	font-size:14px; 
	letter-spacing:-1px; 
}
.introArealogin input.loginpass{
	display:inline-block; 
	background:#222222; 
	width: 315px; 
	box-sizing: border-box;
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	margin-bottom:5px; 
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	border-radius:5px;
	color:#ffffff; 
	font-size:14px; 
	text-align: center;
}
.introArealogin input.loginpass::placeholder {	
	color:#ffffff; 
	font-size:14px; 
	letter-spacing:-1px; 
}
.introArealogin .loginb {
	width:315px; 
	height:47px; 
	background:url(/play/index/images/button_login1_on.gif) center center no-repeat; 
	display:inline-block; 
	background-size:contain;
	-webkit-transition: all 0.3s; 
	-moz-transition: all 0.3s;
	transition: all 0.3s; margin-top: 20px; /* Ç÷¹ÀÌ ¼öÁ¤ */
}

.introArealogin .buts {
	width: 100%;
	height: 60px;
	display: inline-block;  margin-top: 20px; /* Ç÷¹ÀÌ ¼öÁ¤ */
}

.introArealogin .buts .join {float: left; margin:0px 5px 0px 0px; width:155px; height:49px; display: inline-block; background:url(/play/index/images/button_join_on.gif) no-repeat; background-size: contain;}
.introArealogin .buts .idpw {float: right; margin:0px 0px 0px 0px; width:155px; height:49px; display: inline-block; background:url(/play/index/images/button_id_on.gif) no-repeat; background-size: contain;}
.introArealogin .buts .cancel {float: right; margin:0px 0px 0px 0px; width:155px; height:49px; display: inline-block; background:url(/play/index/images/button_cancel_on.gif) no-repeat; background-size: contain;}
.introArealogin .buts .idpw1 {float: left; margin:0px 5px 0px 0px; width:155px; height:49px; display: inline-block; background:url(/play/index/images/button_id_on.gif) no-repeat; background-size: contain;}

.introArealogin input.logincode{
	display:inline-block; 
	background:#222222; 
	width: 315px; 
	box-sizing: border-box;
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	margin-bottom:5px; 
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	border-radius:5px;
	color:#ffffff; 
	font-size:14px; 
	text-align: center;
}
.introArealogin input.logincode::placeholder {
	color:#ffffff; 
	font-size:14px; 
	letter-spacing:-1px; 
}
.introArealogin input.joinid {
	display:inline-block; 
	background:#222222; 
	width: 315px; 
	box-sizing: border-box;
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	margin-bottom:5px; 
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	border-radius:5px;
	color:#ffffff; 
	font-size:14px; 
	text-align: center;
}
.introArealogin input.joinid::placeholder {
	color:#ffffff; 
	font-size:14px; 
	letter-spacing:-1px; 
}
select.bankselect1{
	display:inline-block; 
	background:#222222; 
	width: 315px; 
	box-sizing: border-box;
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	margin-bottom:5px; 
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	border-radius:5px;
	color:#ffffff; 
	font-size:14px; 
	text-align: center;
}
select.bankselect1 option{
	color:#ffffff; 
	font-size:14px; 
	letter-spacing:-1px; 
}
select.bankselect1::placeholder {
	color:#666666;
}

.introArealogin ul {
	width: 100%;
	display: inline-block;
	margin: 0;
	padding: 0;
	float: left;
}

.introArealogin li {
	display: inline-block;
	margin: 0px 0px 5px 0px;
	width: 100%;
	height:40px; 
	line-height:40px;
	box-sizing: border-box;
	color: #ffffff;
	font-size: 14px;
	padding: 0px 0px 0px 0px;
}
.introArealogin li:nth-child(2n+1) {
	display: inline-block;
	margin: 0px 0px 0px 0px;
	width: 100%;
	height:30px; 
	line-height:30px;
	box-sizing: border-box;
	color: #ffffff;
	font-size: 16px;
	padding: 0px 0px 0px 0px;
}

.introArealogin li:nth-child(2n+0) {
	width: 100%;
	display: inline-block;
}
.introArealogin li:last-child {
	width: 100%;
	display: inline-block;
	margin: 0px 0px 20px 0px;
}

.introArealogin li  input.joinid {
	display:inline-block; 
	background:#222222; 
	width:calc(100% - 0px); 
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	box-sizing: border-box;
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	border-radius:0px;
	color:#ffffff; 
	font-size:14px; 
	text-align: left;
}
.introArealogin li  input.joinid::placeholder {
	color:#999999; 
	font-size:14px; 
	letter-spacing:-1px; 
}
.introArealogin li  input.joinpw {
	display:inline-block; 
	background:#222222; 
	width:calc(100% - 0px); 
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	box-sizing: border-box;
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	border-radius:0px;
	color:#ffffff; 
	font-size:14px; 
	text-align: left;
}
.introArealogin li  input.joinpw::placeholder {
	color:#999999; 
	font-size:14px; 
	letter-spacing:-1px; 
}

select.bankselect{
	background-color:#222222; 
	width:100%; 
	height:40px; 
	line-height:40px; 
	padding:0px 10px; 
	box-shadow:inset 0px 11px 8px -10px #000000, inset 0px -11px 8px -10px #000000; 
	border:1px solid #e3bd88; 
	color:#999999;
	font-size:16px; 
	text-align: left;
}
select.bankselect option{
	color: #ffffff;
}
select.bankselect::placeholder {
	color:#666666;
}

}