@import url("https://fonts.googleapis.com/css?family=Prompt:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=thai");

@import url("https://fonts.googleapis.com/css?family=Mitr:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=thai");

@import url("https://fonts.googleapis.com/css?family=Asap:400,700|Roboto");



body {

	font-family: "Prompt",sans-serif;

	margin:0;

	padding:0;

	overflow-x:hidden;

	color:#fff;

}

ul{

	list-style:outside none none;

	margin:0;

	padding:0

}

a:link{

	text-decoration:none;

	outline:0 !important;

}

a:visited{

	text-decoration:none;

	outline:0 !important;

}

a:hover{

	text-decoration:none;

	outline:0 !important;

}

a:active{

	text-decoration:none;

	outline:0 !important;

}

/**

*  Particles JS

**/

#particles-js {

	position: absolute;

	width: 100%;

	height: 900px;

	top: 0px;

	background-image: url('');

	background-repeat: repeat;

	background-size: cover;

	background-position: 50% 50%;

	z-index: 2;

	pointer-events: none;

}

.text_admin_talk {

	color: white;

	-weibkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);

	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);

	font-size: 36px;

	padding-top: 0.5em;

	font-weight: 300;

	letter-spacing: 1px;

}

/**

* Header Box Wrapper

**/

.warpper-table {

	width:1200px;

	border-spacing: 0;

    border-collapse: collapse;

}

.wrapper {

    width: 100%;

	min-width: 1200px;

    height: 2289px;

    background-image: url(../../images/bg_body.jpg);

    background-position: top center;

    background-repeat: no-repeat;

    position: relative;

    z-index: 1;

}

.change {

	position:absolute;

	width:100%;

	min-width: 1200px;

	height: 2289px;

	background-repeat:no-repeat;

	background-position:center top;

	background-image: url(../../images/bg_body1.jpg);

	z-index:1;

	-webkit-animation: 5s change infinite linear;

	-moz-animation:  5s change infinite linear;

    -o-animation:  5s change infinite linear;

    -ms-animation: 5s change infinite linear;

	animation: 5s change infinite linear;

	animation-timing-function: ease-in-out;

}

@-webkit-keyframes change {

	0% {opacity: 1;}

	25% {opacity: 0;}

	50% {opacity: 1;}

	75% {opacity: 0;}

	100% {opacity: 1;}

}

@keyframes change {

	0% {opacity: 1;}

	25% {opacity: 0;}

	50% {opacity: 1;}

	75% {opacity: 0;}

	100% {opacity: 1;}

}

.header_table {

    width: 1200px;

    position: relative;

    z-index: 2;

    margin: -164em auto;

}

.header_img {

    width: 1200px;

	height: 0;

    position: absolute;

    z-index: 3;

}

.header_img>div {

	position: absolute;

}

.header_logo {

	background: url(../../images/logo.png);

	width: 353px;

	height: 529px;

	position: absolute;

	z-index: 1;

	top: 3em;

    left: 30em;

	-webkit-animation: 3s logo infinite linear;

	-moz-animation:  3s logo infinite linear;

	animation: 3s logo infinite linear;

}

@-webkit-keyframes logo {

	0%{transform:scale(1)}

	20%{transform:scale(1.05)}

	30%{transform:scale(.93)}

	45%{transform:scale(1.04)}

	60%{transform:scale(1)}

}

@keyframes logo {

	0%{transform:scale(1)}

	20%{transform:scale(1.05)}

	30%{transform:scale(.93)}

	45%{transform:scale(1.04)}

	60%{transform:scale(1)}

}

.header_btn {

	-webkit-animation: 2s shinyEffect infinite linear;

	-moz-animation:  2s shinyEffect infinite linear;

	animation: 2s shinyEffect infinite linear;

}

.header_btn2 {

	-webkit-animation: 10s icoBig2 infinite linear;

	-moz-animation:  10s icoBig2 infinite linear;

	animation: 10s icoBig2 infinite linear;

}

@keyframes heartBeatEffect {

  0% {

    transform: scale(0.98);

  }

  40% {

    transform: scale(1);

  }

  80% {

    transform: scale(1);

  }

  100% {

    transform: scale(1);

  }

}

@-webkit-keyframes icoBig2{

	0%{-webkit-transform:scale(1);transform:scale(1)}

	20%{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}

	100%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}

}

@keyframes icoBig2{

	0%{transform:scale(1)}

	20%{opacity:0;transform:scale(1.3)}

	100%{opacity:0;transform:scale(1)}

}

/* Prelaoder */



#preloader {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 9999;

  overflow: hidden;

  background: #000;

}



#preloader:before {

  content: "";

  position: fixed;

  top: calc(50% - 30px);

  left: calc(50% - 30px);

  border: 6px solid #f2f2f2;

  border-top: 6px solid #007bff;

  border-radius: 50%;

  width: 60px;

  height: 60px;

  -webkit-animation: animate-preloader 1s linear infinite;

  animation: animate-preloader 1s linear infinite;

}



@-webkit-keyframes animate-preloader {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}



@keyframes animate-preloader {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }



  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

/**

* Status Server Box

**/

.box-status-online {

    text-align: center;

    color: #9cff18;

    font-family: 'Asap',sans-serif;

    font-size: 2em;

    font-weight: 600;

    letter-spacing: 1px;

}

.box-status-offline {

    text-align: center;

    color: #ff814a;

    font-family: 'Asap',sans-serif;

    font-size: 2em;

    font-weight: 800;

    letter-spacing: 1px;

}

.box-status-player {

    text-align: center;

    color: #5eeeff;

    font-family: 'Asap',sans-serif;

    font-size: 2em;

    font-weight: 600;

    letter-spacing: 1.5px;

}

.box-status-account {

    text-align: center;

    color: #ffafe2;

    font-family: 'Asap',sans-serif;

    font-size: 2em;

    font-weight: 600;

    letter-spacing: 1.5px;

	margin-top: 5px;

}

.box-status-charall {

    text-align: center;

    color: #f36fee;

    font-family: 'Asap',sans-serif;

    font-size: 2em;

    font-weight: 600;

	margin-bottom: 15px;

}

/**

* Notice List

 **/

.icon-notice {

	background:url('../../images/icon/news.png') no-repeat;

	margin-top: 5px;

	margin-left: 3px;

}

.icon-event {

	background: url('../../images/icon/event.png') no-repeat;

	margin-top: 5px;

	margin-left: 3px;

}

.icon-update {

	background: url('../../images/icon/update.png') no-repeat;

	margin-top: 5px;

	margin-left: 3px;

}

.notice-list ul li {

	padding: 0 0 7px 55px;

	border-bottom: 1px dashed #e9e9e9;

	font-family:'Prompt',sans-serif;

	font-size:12px;

	font-weight:300;

	color:#000;

	-webkit-transition: .3s all;

	-moz-transition: .3s all;

	-ms-transition: .3s all;

	transition: .3s all;

}

.notice-list ul li:hover {

	padding: 0 0 7px 65px;

	border-bottom: 1px dashed #e9e9e9;

	font-family:'Prompt',sans-serif;

	font-size:12px;

	font-weight:300;

	color:#37375e;

	-webkit-transition: .3s all;

	-moz-transition: .3s all;

	-ms-transition: .3s all;

	transition: .3s all;

}

.notice-list ul li a {

	font-family:Tahoma;

	font-size:12px;

	color:#009a71;

	-webkit-transition: .3s all;

	-moz-transition: .3s all;

	-ms-transition: .3s all;

	transition: .3s all;

}

.notice-list ul li a:hover {

	font-family:Tahoma;

	font-size:12px;

	color:#50fff5;

	text-decoration: none;

	-webkit-transition: .3s all;

	-moz-transition: .3s all;

	-ms-transition: .3s all;

	transition: .3s all;

}

.notice-list ul li p {

	float:right;

	color:#b5a7a7;

	font-family:Tahoma;

	font-size:10px;

	padding-right:0px;

	padding-top: 2px;

}

/**

* Allnews Event Box

**/

.allnews-row {

    margin-right: 0px;

    margin-left: 10px;

}

.allnews-col {

    position: relative;

    min-height: 1px;

    padding-right: 8px;

    padding-left: 8px;

    float: left;

    width: 50%;

}

.allnews-box {

	margin-top:5px;

    width: 320px;

    height: 265px;

    position: relative;

    padding: 10px;

    margin-bottom: 0.5em;

    background-color: #fff;

    border: none;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

	-webkit-transform: translateY(0);

	transform: translateY(0);

	-webkit-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	transition: all .2s ease-in-out;

}

.allnews-box:hover {

	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

	-webkit-transform: translateY(-5px);

	transform: translateY(-5px);

	-webkit-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	transition: all .2s ease-in-out;

}

figure {

    margin: -10px 0 0 -10px;

}

figure {

	width: 320px;

    height: 200px;

	padding: 0;

	background: transparent;

	overflow: hidden;

	-webkit-border-radius: 6px 6px 0 0;

	border-radius: 6px 6px 0 0;

}

.boximg-shine {

	margin-bottom: 5px;

}

.boximg-shine figure {

	position: relative;

}

.boximg-shine figure::before {

	position: absolute;

	top: 0;

	left: -75%;

	z-index: 2;

	display: block;

	content: '';

	width: 50%;

	height: 100%;

	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);

	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);

	-webkit-transform: skewX(-25deg);

	transform: skewX(-25deg);

}

.boximg-shine figure:hover::before {

	-o-animation: shine .75s ease-in-out;

	-ms-animation: shine .75s ease-in-out;

	-moz-animation: shine .75s ease-in-out;

	-webkit-animation: shine .75s ease-in-out;

	animation: shine .75s ease-in-out;

}

@-webkit-keyframes shine {

	100% {

		left: 125%;

	}

}

@keyframes shine {

	100% {

		left: 125%;

	}

}

.allnews-text-harder {

    font-size: 16px;

    font-weight: 300;

	letter-spacing:1px;

    color: #000;

	padding: 5px;

	overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    text-overflow: '...';

}

.allnews-text {

	font-size:14px;

	font-weight: 400;

	letter-spacing:0.8px;

	color: #636363;

	padding: 5px;

	overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    text-overflow: '...';

}

.allnews-time {

	font-family: Tahoma;

	font-size:11px;

	color:#c3c3c3;

	padding: 5px;

}

.allnews-botton {

	padding: 5px;

}

.btn-view {

    color: #ff5757;

    background-color: #fff;

    border-color: #e8e8e8;

    letter-spacing: 0.5px;

    font-weight: 400;

}

.btn-view:hover {

    color: #333;

    background-color: #e8e8e8;

    border-color: #e8e8e8;

}

.btn-view:focus, .btn-view.focus {

    color: #ff5757;

    background-color: #fff;

    border-color: #e8e8e8;

    outline: 0 !important;

}

.btn-view:active, .btn-view.active {

    color: #ff5757;

    background-color: #fff;

    border-color: #e8e8e8;

}

.btn:active, .btn.active {

    background-image: none;

    outline: 0 !important;

    -webkit-box-shadow: none;

    box-shadow: none;

}

.allnews-time span {

	font-family: Tahoma;

	float:right;

}

.status-event {

    display: inline;

    padding: .2em .8em .3em .8em;

    font-size: 85%;

    font-weight: 300;

    line-height: 1em;

    color: #fff;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    white-space: nowrap;

    vertical-align: baseline;

    -webkit-border-radius: 50em;

    border-radius: 50em;

    -webkite-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);

    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);

    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);

}

.bg-notice {

    background-color: #2495cc;

}

.bg-update {

    background-color: #65a72a;

}

.bg-event {

    background-color: #fd973f;

}

.bg-promotion {

    background-color: #ff6b6b;

}

/**

* Login Form

**/

label {

    display: inline-block;

    max-width: 100%;

    margin-bottom: 2px;

    font-weight: 300;

    letter-spacing: 0.5px;

    color: #fff;

}

label-modal {

    display: inline-block;

    max-width: 100%;

    margin-bottom: 2px;

    font-weight: 400;

    letter-spacing: 0.5px;

    color: #000;

}



.form-login {

    display: block;

    width: 100%;

    height: 34px;

    padding: 6px 12px;

    font-size: 14px;

    font-weight: 300;

    letter-spacing: 0.5px;

    line-height: 1.42857143;

    color: #fffa22;

    background-color: #141414;

    background-image: none;

    border: 1px solid #000;

    border-radius: 4px;

    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;

    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

}

.form-login:focus {

    border-color: #000;

    outline: 0 !important;

    -webkit-box-shadow: 0 0 4px #000;

    box-shadow: 0 0 4px #000;

}

.form-login::-moz-placeholder {

	color: #b5b5b5;

	opacity: 1;

}

.form-login:-ms-input-placeholder {

	color: #b5b5b5;

}

.form-login::-webkit-input-placeholder {

	color: #b5b5b5;

}

.form-login::-ms-expand {

	background-color: transparent;

	border: 0;

}

.form-login[disabled],

.form-login[readonly],

fieldset[disabled] .form-login {

	background-color: #ebf7ff;

	opacity: 1;

}

.form-login[disabled],

fieldset[disabled] .form-login {

	cursor: not-allowed;

}

textarea.form-login {

	height: auto;

}

.list-group-item {

  	padding: 4.8px 10px;

	font-size: 14px;

	font-weight: 300;

}

a.list-group-item {

	color: #555;

	-webkit-transition:all .5s ease-in-out;

	transition:all .5s ease-in-out

	outline: 0 !important;

}

a.list-group-item:hover {

	color: #ff4b4b;

	text-decoration: none;

	background-color: #f5f5f5;

	padding-left: 15px;

	-webkit-transition:all .5s ease-in-out;

	transition:all .5s ease-in-out

}

a.list-group-item:focus {

	color: #ff4b4b;

	text-decoration: none;

	background-color: #f5f5f5;

	padding-left: 15px;

	outline: 0 !important;

}

.badge-online {

    display: inline-block;

    min-width: 10px;

    padding: 4px 11px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    background-color: #0da249;

    border-radius: 10px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

}

.badge-offline {

    display: inline-block;

    min-width: 10px;

    padding: 4px 11px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    background-color: #f34343;

    border-radius: 10px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

}

.badge-cash {

    display: inline-block;

    min-width: 10px;

    padding: 3px 8px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    background-color: #21a4f1;

    border-radius: 10px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

}

.badge-log {

    display: inline-block;

    min-width: 10px;

    padding: 3px 8px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    background-color: #ff9800;

    border-radius: 10px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

}

.badge-old {

    display: inline-block;

    min-width: 10px;

    padding: 3px 8px;

    font-size: 12px;

    font-weight: 300;

    line-height: 1;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    background-color: #808080;

    border-radius: 10px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

}

/**

* Button Login From

**/

.btn-submit {

    color: #fff;

    background-color: #55d465;

    border-color: #55d465;

    letter-spacing: 0.5px;

    font-weight: 300;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

}

.btn-submit:hover {

    color: #fff;

    background-color: #3dbb4d;

    border-color: #3dbb4d;

}

.btn-submit:focus, .btn-submit.focus {

    color: #fff;

    background-color: #2ac13d;

    border-color: #2ac13d;

    outline: 0 !important;

}

.btn-submit:active, .btn-submit.active {

    color: #fff;

    background-color: #2ac13d;

    border-color: #2ac13d;

}

.btn-reset {

    color: #333;

    background-color: #eaeaea;

    border-color: #eaeaea;

	letter-spacing: 0.5px;

    font-weight: 300;

    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.15);

}

.btn-reset:hover {

    color: #333;

    background-color: #e6e6e6;

    border-color: #e6e6e6;

}

.btn-reset:focus, .btn-reset.focus {

    color: #333;

    background-color: #e6e6e6;

    border-color: #e6e6e6;

    outline: 0 !important;

}

.btn-reset:active, .btn-reset.active {

    color: #333;

    background-color: #e2e2e2;

    border-color: #e2e2e2;

}

.btn-register {

    color: #fff;

    background-color: #75d3ff;

    border-color: #75d3ff;

    letter-spacing: 0.5px;

    font-weight: 300;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

}

.btn-register:hover {

    color: #fff;

    background-color: #5fccff;

    border-color: #5fccff;

}

.btn-register:focus, .btn-register.focus {

    color: #fff;

    background-color: #51c1f5;

    border-color: #51c1f5;

    outline: 0 !important;

}

.btn-register:active, .btn-register.active {

    color: #fff;

    background-color: #51c1f5;

    border-color: #51c1f5;

}

.btn:active, .btn.active {

    background-image: none;

    outline: 0 !important;

    -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.125);

    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.125);

}

.btn-save {

    color: #ff8581;

    background-color: #fff;

    border-color: #ffb3b1;

    border-width: 1px;

    letter-spacing: 0.5px;

	-webkit-transition: .5s all;

    transition: .5s all;

}

.btn-save:hover {

    color: #fff;

    background-color: #ef706d;

    border-color: #ef706d;

    border-width: 1px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);

	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);

}

.btn-save:focus {

    color: #bb4b48;

    background-color: #ffafad;

    border-color: #ec9492;

    border-width: 1px;

    outline: 0 !important;

	-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);

	-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.45);

    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.45);

}

.btn-save:active {

    color: #fff;

    background-color: #ff9491;

    border-color: #ff9491;

    border-width: 1px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);

}

/**

* Alert Group

**/

.oliangstudio-alert {

    padding: 9px;

    margin-bottom: 5px;

    border: 1px solid transparent;

    border-radius: 4px;

	font-size: 12px;

    font-weight: 300;

    letter-spacing: 0.5px;

}

.oliangstudio-alert-warning {

    color: #90723d;

    background-color: #fcf8e3;

    border-color: #faebcc;

}

.oliangstudio-alert-success {

    color: #3c763d;

    background-color: #dff0d8;

    border-color: #d6e9c6;

}

.oliangstudio-alert-danger {

    color: #db2828;

    background-color: #ffe8e6;

    border-color: #ffa5a5;

}

.oliangstudio-alert-plain {

    background: #f8f8f8;

    border-color: #d1d1d1;

    color: #8c8c8c

}

.carousel {

    margin-bottom: 0;

	margin-top: 15px;

    padding: 0 40px 30px 40px;

}

.carousel-control {

    left: 23px;

    height: 30px;

    width: 30px;

	font-size: 21px;

    line-height: 26px;

    background: none repeat scroll 0 0 #000000;

    border: 1px solid #000;

    border-radius: 23px 23px 23px 23px;

    margin-top: 50px;

}

.carousel-control.right {

	right: 15px;

}

.carousel-indicators {

	right: 50%;

	top: auto;

	bottom: 0px;

	margin-right: -19px;

}

.carousel-indicators li {

	background: #e4e4e4;

}

.carousel-indicators .active {

    background: #000000;

    border: solid 1px #ffffff;

}

.box-costume {

    width: 120px;

    height: 120px;

    padding: 5px;

    float: left;

	margin-left: 35px;

	margin-right: -30px;

}

.img-costume {

}

/**

* Modal

**/

.modal-body {

	padding: 0px 15px 0px;

}

.modal-lg {

	width: 900px;margin: 100px auto 0;

}

.modal-old {

	width: 813px;

	margin: 8em auto;

}

.modal-body2 .close {

  margin-top: -11px;

}

.modal-body2 {

	padding: 5px;

}

.modal-header {

	border-bottom: none;

}

.modal-header .close {

	margin-top: -10px;

}

.modal-open {

  overflow:hidden;

  overflow-y:scroll;

  padding-right:0 !important;

}

.modal.fade .modal-dialog {

   -webkit-transform: scale(0.9);

   -moz-transform: scale(0.9);

   -ms-transform: scale(0.9);

   transform: scale(0.9);

   top: 300px;

   opacity: 0;

   -webkit-transition: all .2s linear;

   -moz-transition: all .2s linear;

   transition: all .2s linear;

}



.modal.fade.in .modal-dialog {

   -webkit-transform: scale(1);

   -moz-transform: scale(1);

   -ms-transform: scale(1);

   transform: scale(1);

   -webkit-transform: translate3d(0, -300px, 0);

   transform: translate3d(0, -300px, 0);

   opacity: 1;

}

.close {

	float: right;

	font-size: 30px;

	font-weight: normal;

}

.close:hover, .close:focus {

	outline: 0 !important;

}

.panel2 {

    margin-bottom: 20px;

    background-color: #fff;

    border: 1px solid transparent;

    border-radius: 4px;

    -webkit-box-shadow: none;

    box-shadow: none;

}

.panel-modal {

    border-color: #fff;

}

.help-block {

    display: block;

    margin-top: 5px;

    margin-bottom: 10px;

    font-size: 12px;

    font-weight: 300;

    letter-spacing: 0.5px;

    color: #3c64ff;

}

.table > thead > tr > th {

    vertical-align: bottom;

    color: #ff7736;

	 font-size: 16px;

    font-weight: 400;

    letter-spacing: 0.5px;

    border-bottom: 1px solid #f9f9f9;

}

.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {

    padding: 8px;

    line-height: 1.42857143;

    vertical-align: middle;

    font-size: 12px;

    border-top: 1px solid #f9f9f9;

}

.btn-save {

    color: #ff8581;

    background-color: #fff;

    border-color: #ffb3b1;

    border-width: 1px;

    letter-spacing: 0.5px;

	-webkit-transition: .5s all;

    transition: .5s all;

}

.btn-save:hover {

    color: #fff;

    background-color: #ef706d;

    border-color: #ef706d;

    border-width: 1px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);

	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);

}

.btn-save:focus {

    color: #bb4b48;

    background-color: #ffafad;

    border-color: #ec9492;

    border-width: 1px;

    outline: 0 !important;

	-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);

	-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.45);

    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.45);

}

.btn-save:active {

    color: #fff;

    background-color: #ff9491;

    border-color: #ff9491;

    border-width: 1px;

	-webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);

    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);

}

.btn:active {

    background-image: none;

    outline: 0 !important;

    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .20);

}

.swal2-container.swal2-shown {

	background: linear-gradient(to right, #9655ff, #657ef9);

}

/**

* Form Ranking

**/

.box-news {

    width: 600px;

    margin: 0 auto;

}

.box-guild {

    width: 600px;

    margin: 0 auto;

	margin-top:1em;

}

.box-rank {

    width: 270px;

    margin: 0 auto;

}

.nav-tabs {

	border-bottom: 1px solid #eee;

	margin-left: 1em;

    width: 90%;

}

.nav > li > a {

    position: relative;

    display: block;

    padding: 3px 15px;

	font-weight: 300;

    color: #1f96ff;

}

.nav-tabs > li > a:hover {

    border-color: #eee #eee #eee;

	color:red;

}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {

    color: #555;

	font-weight: 400;

    cursor: default;

    background-color: #fff;

    border: 1px solid #eee;

    border-bottom-color: transparent;

}

.nav > li > a:hover, .nav > li > a:focus {

    text-decoration: none;

    background-color: transparent;

}

/**

* Guild War Box

**/

.guild-row {

	margin-top: 0.2em;

	margin-left: 0em;

}

.guild-box {

    width: 245px;

    height: 90px;

    margin-top: 1.2em;

    margin-left: 0.6em;

    float: left;

    background-color: #232323;

    border: solid 1px #424242;

    border-radius: 6px;

    color: #fff;

}

.guild-bgem {

	position:relative;

	background:url('../../images/flag.png') no-repeat;

	width:50px;height:101px;

	float: left;

	margin-top: -1.2em;

	margin-left: 0.5em;

	margin-right: 0.3em;

}

.guild-bgem .icon-em {

	position: absolute;

	width: 24px;

	height:24px;

	background:#ccc;

	border: 1px solid #612711;

    top: 3em;

    left: 1em;

}

.guild-textcastle {

	margin-top: 1.5em;

    padding: 2px;

    font-size: 11px;

    color: #8eff6a;

}

.guild-textcastle span {

	color: #fff;

}

.guild-textname {

  padding: 1px;

	font-size: 11px;

	color: #6fdeff;

}

.guild-textname span {

	color: #fff;

}

.guild-textmaster {

  padding: 1px;

	font-size: 11px;

	color: #fff256;

}

.guild-textmaster span {

	color: #fff;

}

.no-castle {

    margin: 10.5em auto auto 16.8em;

    width: 421px;

	-webkit-animation: 3s castle_r infinite linear;

	-moz-animation:  3s castle_r infinite linear;

	-o-animation:  3s castle_r infinite linear;

	-ms-animation: 3s castle_r infinite linear;

	animation: 3s castle_r infinite linear;

}

@keyframes castle_r {

	0% { opacity:0; }

	50% { opacity:1; }

	100% { opacity:0; }

}

.rank-box {

	color:#000;

	width: 90%;

    margin: 0 auto;

}

.rank-number {

  font-size: 11px;

  color:#000;

  background-color: #fff;

  border: solid 1px rgba(0, 0, 0, 0.10);

  padding: .50em;

  border-radius: 3px 0 0 3px;

  width: 100%;

  letter-spacing:0.5px;

  margin: 0 auto;

}

.rank-name {

  font-size: 11px;

  color:#000;

  background-color: #fff;

  border: solid 1px rgba(0, 0, 0, 0.10);

  padding: .50em;

  border-radius: 0px;

  letter-spacing:0.5px;

  width: 100%;

  margin: 0 auto;

}

.rank-point {

  font-size: 11px;

  color:#000;

  background-color: #fff;

  border: solid 1px rgba(0, 0, 0, 0.10);

  padding: .50em;

  border-radius: 0 3px 3px 0;

  width: 100%;

  letter-spacing:0.5px;

  margin: 0 auto;

}

.table-rank {

  width: 100%;

  max-width: 100%;

  margin-top:1em;

}

.table-rank > thead > tr > th,

.table-rank > tbody > tr > th,

.table-rank > tfoot > tr > th,

.table-rank > thead > tr > td,

.table-rank > tbody > tr > td,

.table-rank > tfoot > tr > td {

  padding: 2px;

  line-height: 1.25;

  vertical-align: middle;

  border-top: 0;

}

.table-rank > thead > tr > th {

  vertical-align: bottom;

  border-bottom: 0;

	color: #464646;

	font-size: 12px;

	font-weight: 400;

	letter-spacing: 0.5px;

}

.table-rank > caption + thead > tr:first-child > th,

.table-rank > thead:first-child > tr:first-child > th,

.table-rank > caption + thead > tr:first-child > td,

.table-rank > thead:first-child > tr:first-child > td {

  border-top: 0;

}

.table-rank > tbody + tbody {

  border-top: 0;

}

.table-rank .table-rank {

  background-color: transparent;

}

.show-reloadbox {

  padding: 15px;

  border-radius: 4px;

  color: #db2828;

  background-color: #ffe8e6;

  border-color: #ffa5a5;

  width: 96%;

  margin: 0 auto;

  margin-top: 5em;

  font-family: Tahoma;

  font-size: 12px;

}

@keyframes castle_r {

	0% { opacity:0; }

	50% { opacity:1; }

	100% { opacity:0; }

}

/* Footer Form */

.alice_box {

    display: block;

    position: fixed;

    width: 194px;

    bottom: 10em;

    right: 0;

    z-index: 10000;

}

.alice_row {

	position:relative;

	width:100%;

	height:0;

	}

.btn_body {

	position:absolute;

	width: 100%;

	height:0;

	padding-bottom: 16em;

	background-image:url(../../images/btn_back_top.png);

	background-size:100% auto;

	right: 0;

	bottom: 0;

	z-index:3;

	-webkit-animation: 2s top_wing infinite linear;

	-moz-animation:  2s top_wing infinite linear;

	-o-animation:  2s top_wing infinite linear;

	-ms-animation: 2s top_wing infinite linear;

	animation: 2s top_wing infinite linear;

	}

.btn_contact {

	position:absolute;

	width: 100%;

	height:0;

	padding-bottom: 3em;

	background-image:url(../../images/btn_contact.png);

	background-repeat:no-repeat;

	background-size:100% auto;

	top: 0;

	z-index:3;

	-webkit-animation: 2s top_wing infinite linear;

	-moz-animation:  2s top_wing infinite linear;

	-o-animation:  2s top_wing infinite linear;

	-ms-animation: 2s top_wing infinite linear;

	animation: 2s top_wing infinite linear;

	}



@-webkit-keyframes top_wing {

	0%{transform: translate(0,20px)}

	50%{transform: translate(0,-10px)}

	100%{transform: translate(0,20px)}

}	

@keyframes top_wing {

	0%{transform: translate(0,20px)}

	50%{transform: translate(0,-10px)}

	100%{transform: translate(0,20px)}

}

.footer_menu_box {

    display: block;

    margin-top: -1.5em;

    margin-left: 2.5em;

    font-weight: 400;

    letter-spacing: 0.5px;

    color: #fff;

}

.footer_menu_box li {

	padding-top:5px;

}

.footer_menu_box li a {

	color:#333;

	-webkit-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	transition: all .2s ease-in-out;

}

.footer_menu_box li a:hover {

	color:#005aff;

	padding-left:10px;

	font-weight: 400;

	-webkit-transition: all .2s ease-in-out;

	-moz-transition: all .2s ease-in-out;

	transition: all .2s ease-in-out;

}



/* Scrollbar */

body::-webkit-scrollbar { width:5px; height:5px; background-color:#fff;}

body::-webkit-scrollbar-track {background-color:#fff;}

body::-webkit-scrollbar-thumb {background: #eee;}



@media(max-width:1170px){

body,html{

	width:1200px;

	}

}