@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 all and (min-width:481px)
{


*,
::before,
::after {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

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

.video_filter {
	width: 100vw;
	height: 100vh;
	display: inline-block;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	z-index: 2;
}

#content {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
}
.login {
	width: 1400px;
	height: auto;
	margin: 100px auto 0 auto;
}
.login .logo {
  margin: 0 auto;
  width: 480px;
  height: 200px;
}
.joinus {
	width: 1400px;
	height: auto;
	margin: 20px auto 0 auto;
}
.joinus .logo {
  margin: 0 auto;
  width: 480px;
  height: 200px;
}

.content img.englogo {position:relative; z-index:5;}
.content img.light {position:relative; z-index:7; left:-595px; top:145px;  
    -webkit-animation: example2 3s infinite; /* Safari 4+ */
    -moz-animation:    example2 3s infinite; /* Fx 5+ */
    -o-animation:      example2 3s infinite; /* Opera 12+ */
    animation:         example2 3s infinite; /* IE 10+, Fx 29+ */}
.content img.kor {position:relative; z-index:9; left:250px; top:-170px;}

/* 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;
	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 10px auto; 
	padding:0px 0px; 
	display:block;
}
#footer .f_banner {
	width:1400px;
	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: 480px;
	height: 140px;
	display: inline-block;
	background-size: contain;
	border: 0;
}
#footer .f_btm {
	width:1400px;
	display:inline-block; 
	border-bottom:1px solid rgba(255, 255, 255, 0.2);
	padding:15px 0 15px 0; 
	color:#666666;
	font-size: 16px;
}
#footer .f_btm img {
	margin:0 auto;
}
#footer .f_btm address{
	display:block;
	font-style:normal; 
	color:#dddddd;
	font-size:0.875em;
	font-family: "Gotham-Book",sans-serif; 
	text-align: center;
}
#footer_slider {
   overflow:hidden;
   position:relative;
   border:0px solid red;
   width:1400px;  /* À̹ÌÁö º¸¿©Áö´Â ºä ºÎºÐ*/
   height:80px;
   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: 60px;
	opacity: 0.7;
}

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


#contents .introArealogin {
	margin: 0 auto; 
	width: 480px; 
	height: auto; 
	display: flex;
	flex-direction: column;
	z-index: 9; 
	box-sizing: border-box; 
	text-align: center; 
	padding: 40px;
	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 20px auto;
}
#contents .introArealogin span.telegram1 {
	margin:20px auto 0px auto;
}
.introArealogin input.loginid{
	display:inline-block; 
	background:#222222; 
	width:calc(400px - 0px); 
	height:50px; 
	line-height:50px; 
	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:18px; 
	text-align: center;
}
.introArealogin input.loginid::placeholder {
	color:#ffffff; 
	font-size:18px; 
	letter-spacing:-1px; 
}
.introArealogin input.loginpass{
	display:inline-block; 
	background:#222222; 
	width:calc(400px - 0px); 
	height:50px; 
	line-height:50px; 
	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:18px; 
	text-align: center;
}
.introArealogin input.loginpass::placeholder {	
	color:#ffffff; 
	font-size:18px; 
	letter-spacing:-1px; 
}
.introArealogin .loginb {
	width:400px; 
	height:60px; 
	background:url(/play/images/button_login1.png) 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 .loginb:hover { background:url(/play/images/button_login1_on.gif) center center no-repeat; -webkit-transition: all 0.3s; -moz-transition: all 0.3s;transition: all 0.3s;}

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

.introArealogin .buts .join {float: left; margin:0px 10px 0px 0px; width:190px; height:60px; background:url(/play/index/images/button_join.png) no-repeat; display: inline-block;}
.introArealogin .buts .join:hover {background:url(/play/index/images/button_join_on.gif) no-repeat;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s;transition: all 0.3s;}
.introArealogin .buts .idpw {float: right; margin:0px 0px 0px 10px; width:190px; height:60px; background:url(/play/index/images/button_id.png) no-repeat; display: inline-block;}
.introArealogin .buts .idpw:hover {background:url(/play/index/images/button_id_on.gif) no-repeat;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s;transition: all 0.3s;}
.introArealogin .buts .cancel {float: right; margin:0px 0px 0px 10px; width:190px; height:60px; background:url(/play/index/images/button_cancel.png) no-repeat; display: inline-block;}
.introArealogin .buts .cancel:hover {background:url(/play/index/images/button_cancel_on.gif) no-repeat;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s;transition: all 0.3s;}
.introArealogin .buts .idpw1 {float:left; margin:0px 10px 0px 0px; width:190px; height:60px; background:url(/play/index/images/button_id.png) no-repeat; display: inline-block;}
.introArealogin .buts .idpw1:hover {background:url(/play/index/images/button_id_on.gif) no-repeat;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s;transition: all 0.3s;}



.introArealogin input.logincode{
	display:inline-block; 
	background:#222222; 
	width:calc(400px - 0px); 
	height:50px; 
	line-height:50px; 
	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:18px; 
	text-align: center;
}
.introArealogin input.logincode::placeholder {
	color:#ffffff; 
	font-size:18px; 
	letter-spacing:-1px; 
}
.introArealogin input.joinid {
	display:inline-block; 
	background:#222222; 
	width:calc(400px - 0px); 
	height:50px; 
	line-height:50px; 
	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:18px; 
	text-align: center;
}
.introArealogin input.joinid::placeholder {
	color:#ffffff; 
	font-size:18px; 
	letter-spacing:-1px; 
}
select.bankselect1{
	display:inline-block; 
	background:#222222; 
	width:calc(400px - 0px); 
	height:50px; 
	line-height:50px; 
	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:18px; 
	text-align: center;
}
select.bankselect1 option{
	color: #ffffff;
}
select.bankselect1::placeholder {
	color:#666666;
}



.introArealogin li {
	float: left;
	display: inline-block;
	margin: 0px 0px 5px 0px;
}

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

.introArealogin li:nth-child(2n+0) {
	width: 70%;
	display: inline-block;
}
.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:16px; 
	text-align: left;
}
.introArealogin li  input.joinid::placeholder {
	color:#999999; 
	font-size:16px; 
	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:16px; 
	text-align: left;
}
.introArealogin li  input.joinpw::placeholder {
	color:#999999; 
	font-size:16px; 
	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;
}


}