body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  padding: 0;
  margin: 0;
}

p {
  color: #fff;
  padding: 0;
  margin: 0;
}

.pageContainer {
  max-width: 100%;
  height: 1080px;
  background: url("./image/main_bg.jpg") no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-color: #5f6880;
  text-align: center;
  padding-bottom: 120px;
}

.globalNav {
  width: 45px;
  margin: 20px 0 0 20px;
  position: fixed;
  z-index: 9;
}

.navLine {
  width: 40px;
  height: 2px;
  background-color: #fff;
  float: left;
  margin: 4px 0;
}

.navDot {
  width: 2px;
  height: 2px;
  background-color: #ca2128;
  float: left;
  margin: 4px 0;
}

.mainLogo {
  display: inline-block;
  text-align: center;
  margin-top: 120px;
}

.mainLogo2 {
  margin-top: 30px;
  width: 270px;
  position: relative;
  z-index: 10;
}

.mainNavbar {
  width: 100%;
  height: 65px;
  position: fixed;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);
  background: url("./image/header_bg.png");
  box-shadow: 2px 2px 5px #161616;
}

.mainNavbarContainer {
  width: 100%;
position: fixed;
}

.mainNavbarMenu {
  font-size: 18px;
  font-family: 'Anton', sans-serif;
  display: inline-block;
  float: left;
  text-align: left;
  width: 150px;
  padding-top: 20px;
  letter-spacing: 1px;
}

#navFirst {
  margin-left: 50px;
}

.mainNavLogo {
  float: left;
  margin-left: 280px;
  margin-top: 10px;
  margin-right: 30px;
}

#mainNavLogo {
  margin-left: 295px;
  width: 140px;
}

.mainNavMenuContainer {
  width: 75%;
  display: inline-block;
  padding-top: 10px;
}


#menucolumnNav {
  margin-left: 365px;
}

.menucolumnNav {
  display: inline-block;
  float: left;
  vertical-align: text-top;
  width: 150px;
  text-align: left;
  margin-top: -17px;
}

#downloadMenu {
  margin-left: -20px !important;
}


.subMenu2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 1.5px;
  margin-top: -5px;
}

.subMenu2 a {
  text-decoration: none;
  color: #fff;
}

.subMenu2 a:hover {
  text-decoration: none;
  color: #ffff99;
}

.bulletMenuContainer {
  position: fixed;
  z-index: 10;
  margin-left: 80%;
  margin-top: 15px;
}

.bulletSignin {
  width: 35px;
  height: 35px;
  background: url("./image/menu_signin.png");
  display: inline-block;
  margin: 0 3px;
}

.bulletSignup {
  width: 35px;
  height: 35px;
  background: url("./image/menu_signup.png");
  display: inline-block;
  margin: 0 3px;
}

.bulletShop {
  width: 35px;
  height: 35px;
  background: url("./image/menu_shop.png");
  display: inline-block;
  margin: 0 3px;
}

.bulletGame {
  width: 35px;
  height: 35px;
  background: url("./image/menu_game.png");
  display: inline-block;
  margin: 0 3px;
}

.bulletLanguage {
  width: 35px;
  height: 35px;
  background: url("./image/menu_language.png");
  display: inline-block;
  margin: 0 3px;
}

.bulletMainnav {
  float: right;
  margin-right: 5%;
}

#bulletLanguage {
  display: inline-block;
}

#bulletShop {
  display: inline-block;
}

#bulletGame {
  display: inline-block;
}

#bulletSignin {
  margin: 15px 0 0 20px;
}


.dropdown-menu {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  color: #fff !important;
  min-width: 100px !important;
  font-size: 14px !important;
  background: transparent !important;
  margin-left: -15px !important;
}

.dropdown-menu>li>a {
  color: #fff !important;
  padding: 5px 20px !important;
}

.dropdown-menu>li>a:hover {
  color: #ffff99 !important;
  border-bottom: 1px solid #ffff99 !important;
  background: transparent !important;
  padding: 5px 20px !important;
  transition: 1s;
}

.mainDropdown {
  width: 1920px;
  height: 250px;
  position: absolute;
  transition: 1s;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7) !important;
  display: inline-block;
  background: url("./image/megamenu_bg.png") !important;
  box-shadow: 2px 2px 6px #161616 !important;
}



.slider-container {
  width: 1300px;
  display: inline-block;
  position: relative;
  z-index: 10;
}

.flexbox-slider {
  margin-top: 40px;
}

.flexbox-slider {
  display: flex;
  max-width: 1300px;
  height: 455px;
  visibility: hidden;
}

.flexbox-slider .flexbox-slide {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  width: 20%;
  height: 455px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  visibility: visible;
}

.flexbox-slider .flexbox-slide:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 1300px;
  height: 455px;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 2;
  opacity: 0;
}

.flexbox-slider .flexbox-slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: auto;
  min-width: 100%;
  min-height: 455px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.flexbox-slider .flexbox-slide .text-block {
  position: absolute;
  left: 30px;
  bottom: 0px;
  max-width: 400px;
  padding: 20px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 4;
  visibility: hidden;
}

.flexbox-slider:hover .flexbox-slide:hover {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 1060px;
}

.flexbox-slider.flexbox-slider-1 .flexbox-slide .text-block {
  bottom: 0px;
}

.flexbox-slider.flexbox-slider-1:hover .flexbox-slide:hover .text-block {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  bottom: 0px;
  opacity: 1;
  visibility: visible;
}

.slideNo1 {
  background: url("./image/main_banner_1.jpg");
  width: 1300px;
  height: 455px;
}

.slideNo2 {
  background: url("./image/main_banner_2.jpg");
  width: 1300px;
  height: 455px;
}

.slideNo3 {
  background: url("./image/main_banner_3.jpg");
  width: 1300px;
  height: 455px;
}

.slideNo4 {
  background: url("./image/main_banner_4.jpg");
  width: 1300px;
  height: 455px;
}

.slideNo5 {
  background: url("./image/main_banner_5.jpg");
  width: 1300px;
  height: 455px;
}

.slideBox {
  width: 60px;
  height: 455px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  box-shadow: 2px 2px 2px #000;
  float: left;
}

.menuIcon {
  width: 40px;
  height: 40px;
  background: url("./image/signin_icon.png");
  display: inline-block;
  margin-top: 190px;
}

.menuIcon2 {
  width: 40px;
  height: 40px;
  background: url("./image/signup_icon.png");
  display: inline-block;
  margin-top: 190px;
}

.menuIcon3 {
  width: 40px;
  height: 40px;
  background: url("./image/shop_icon.png");
  display: inline-block;
  margin-top: 190px;
}

.menuIcon4 {
  width: 40px;
  height: 40px;
  background: url("./image/game_icon.png");
  display: inline-block;
  margin-top: 190px;
}

.menuIcon5 {
  width: 40px;
  height: 40px;
  background: url("./image/home_icon.png");
  display: inline-block;
  margin-top: 190px;
}

.textContainer {
  display: inline-block;
  margin-right: 20%;
  margin-top: 150px;
  height: 100%;
  float: right;
}

.slideTitle {
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  text-align: center;
}

.slideSub {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 21px;
  text-align: center;
}

.button {
  width: 250px;
  height: 50px;
  border: 3px solid #fff;
  background: transparent;
  border-radius: 10px;
  display: inline-block;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-top: 25px;
}

.button:hover {
  width: 250px;
  height: 50px;
  border: 3px solid #ffff99;
  background-color: ;
  border-radius: 10px;
  display: inline-block;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-top: 25px;
}

/*footer*/

.footer {
  width: 100%;
  height: 65px;
  position: fixed;
  bottom: 0;
  z-index: 5;
}

.collapseIcon {
}

.glyphicon {
  top: 20px !important;
}

.glyphicon-option-horizontal {
  float: left;
  margin-left: 30px;
  font-size: 30px;
  display: block;
}

.glyphicon-option-vertical {
  float: left;
  margin-left: 30px;
  font-size: 30px;
  display: block;
}

.footerContent {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  height: 65px;
}

.logoContainer {
  display: inline-block;
  float: left;
  margin: 5px 0 0 100px;
}

.logoContainer img {
  width: 150px;
}

.socialContainer {
  display: inline-block;
  text-align: center;
  float: right;
  margin: 10px 300px 0 0;
}

.facebook {
  width: 35px;
  height: 35px;
  margin: 0 5px;
  display: inline-block;
  background: url("./image/fb_icon.png");
}

.facebook:hover {
  width: 35px;
  height: 35px;
  background: url("./image/fb_icon_hover.png");
}

.twitter {
  width: 35px;
  height: 35px;
  margin: 0 5px;
  display: inline-block;
  background: url("./image/twitter_icon.png");
}

.twitter:hover {
  width: 35px;
  height: 35px;
  background: url("./image/twitter_icon_hover.png");
}

.youtube {
  width: 35px;
  height: 35px;
  margin: 0 5px;
  display: inline-block;
  background: url("./image/youtube_icon.png");
}

.youtube:hover {
  width: 35px;
  height: 35px;
  display: inline-block;
  background: url("./image/youtube_icon_hover.png");
}

.extraMenuContainer {
  float: left;
  margin-top: 20px;
  margin-left: 30px;
}

a .extraMenu {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 0 15px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 300;
}

a .extraMenu:hover {
  color: #ffff99;
}

#extraMenu {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.copyright {
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 300;
  display: inline-block;
  padding-left: 15px;
}

/*global menu*/

.modal-dialog {
  width: 100% !important;
  display: contents;
}

.pageContainerGlobal {
  max-width: 100%;
  height: 970px;
  background: url("./image/global_menu_bg.jpg") no-repeat;
  background-position: center;
  text-align: center;
}

.globalNav2 {
  width: 42px;
  padding: 20px 0 0 20px;
  position: fixed;
  margin-top: 20px;
}

.lineLeft {
  transform: rotateY(0deg) rotate(45deg);
  float: left;
  display: flex;
  transition: 0.5s;
}

.lineRight {
  transform: rotateY(0deg) rotate(-45deg);
  float: left;
  transition: 0.5s;
  display: flex;
  margin-top: -2px;
}

.navLine2 {
  width: 40px;
  height: 2px;
  background-color: #fff;
  float: left;
}

.navDot2 {
  width: 2px;
  height: 2px;
  background-color: #ca2128;
  float: left;
}

.menuContainer {
  width: 1300px;
  margin-top: 60px;
  display: inline-block;
}

.menucolumn {
  width: 200px;
  height: 300px;
  display: inline-block;
  vertical-align: text-top;
}

.mainMenu {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  padding-bottom: 5px;
  vertical-align: top;
}

.subMenu {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
  margin-top: -5px;
}

.subMenu a {
  text-decoration: none;
  color: #fff;
}

.subMenu a:hover {
  text-decoration: none;
  color: #ffff99;
}

/*signin*/

.pageContainerSignin {
  max-width: 100%;
  height: 1080px;
  background: url("./image/signin_bg.jpg") no-repeat;
  background-position: center;
  text-align: center;
  background-attachment: fixed;
}

.pageContainerSignup {
  max-width: 100%;
  height: 1200px;
  background: url("./image/signin_bg.jpg") no-repeat;
  background-position: center;
  text-align: center;
  background-attachment: fixed;
}

.signinForm {
  width: 600px;
  height: auto;
  display: inline-block;
}

.pageTitle {
  padding-top: 120px;
}

.pageTitleText {
  font-family: 'Anton', sans-serif;
  font-size: 35px;
  letter-spacing: 1px;
}

.inputContainer {
  position: relative;
  z-index: 4;
  width: 600px;
  display: inline-block;
}

.mainInput {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  width: 600px;
  height: 40px;
  margin-top: 15px;
}

.birthdayText {
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: left;
  width: 100%;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.birthdayInput {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  width: 200px;
  height: 40px;
  margin-top: -15px;
  float: left;
}

.birthdayInput2 {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  width: 185px;
  height: 40px;
  margin-top: -15px;
  float: left;
  margin-left: 15px;
}

.mainCheck {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 21px !important;
  clear: both;
}

#mainCheck {
  margin-top: 15px;
}

.checkboxText {
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  float: left;
  margin-top: 20px;
  margin-left: 5px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
}

#signupCheckbox {
  font-size: 14px;
  margin-top: 23px;
}

#signupCheckbox2 {
  font-size: 14px;
  margin-top: 17px;
}

.document {
  text-decoration: none;
  color: #ca2128;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
}

.birthdayInput::placeholder {
  font-size: 14px;
}

.birthdayInput2::placeholder {
  font-size: 14px;
}

::placeholder {
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
}

input[type=text], select {
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  outline: none;
}

input[type=text]:focus, select:focus {
  border: 1px solid #f2ee7f;
}

.signinButton {
  position: relative;
  z-index: 10;
  display: inline-block;
  margin-top: 55px;
  width: 265px;
  height: 65px;
  background: url("./image/signin_button_bg.png");
}

.signinButton p {
  color: #f6d987;
  letter-spacing: 1px;
  font-size: 24px;
  font-family: 'Roboto Condensed', sans-serif;
  margin-top: 16px;
}

.signinButton:hover {
  background: url("./image/signin_button_bg_hover.png");
}

.signinButton p:hover {
  color: #ffff99;
}

.forgotPw {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  text-decoration: none;
  margin-top: 30px;
  letter-spacing: 1px;
  font-weight: 300;
}

.or {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  margin-top: 15px;
}

.socialLogin {
  position: relative;
  z-index: 10;
  display: inline-block;
}

.facebookLogin {
  width: 360px;
  height: 35px;
  background: url("./image/facebook.png");
}

.googleLogin {
  width: 360px;
  height: 35px;
  background: url("./image/google.png");
  margin-top: 15px;
}

/*shop*/

.pageContainerShop {
  max-width: 100%;
  height: auto;
  background: url("./image/shop_bg.jpg") no-repeat;
  background-position: center;
  text-align: center;
  padding-bottom: 50px;
}

.packageContainer {
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 5;
}

.row {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

.carousel {
  width: 1320px;
  overflow: hidden;
  height: 1480px;
  display: inline-block;
  margin-top: -200px;
}

.carousel .item {
  margin: 0px;
  padding: 0px;
  display: inline-block;
  background-size: 100%;
  box-shadow: none !important;
}

.controls {
  position: absolute;
  display: block;
  top: 500px;
  width: 1280PX;
  z-index: 10;
  font-size: 80px;
}

.controls a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.controls .previous {
  float: left;
  background: url("./image/left.png");
  width: 35px;
  height: 45px;
  transition: 0.5s;
}

.controls .previous:hover {
  background: url("./image/left_hover.png");
}

.controls .next {
  float: right;
  background: url("./image/right.png");
  width: 35px;
  height: 45px;
  transition: 0.5s;
}

.controls .next:hover {
  background: url("./image/right_hover.png");
}

.deluxe {
  width: 560px;
  height: 1260px;
  background: url("./image/deluxe.png");
  margin-top: 200px !important;
}

.value {
  width: 560px;
  height: 1260px;
  background: url("./image/value.png");
  margin-top: 200px !important;
}

.standard {
  width: 560px;
  height: 1260px;
  background: url("./image/standard.png");
  margin-top: 200px !important;
}

.subscription {
  width: 520px;
  height: 1260px;
  background: url("./image/subscription.png");
  display: inline-block;
}

.packageBox {
  margin-top: 250px;
  width: 250px;
}

.packageName {
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  color: #000;
  letter-spacing: 1px;
}

.packagePrice {
  font-family: 'Anton', sans-serif;
  font-size: 45px;
  color: #000;
  letter-spacing: 1px;
}

.packageItem {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  color: #000;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 20px;
  margin-top: 15px;
}

.shopFaq {
  clear: both;
  font-size: 18px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  padding-top: 10px;
  letter-spacing: 1px;
  text-decoration: underline;
  color: #000;
}

.shopFaq:hover {
  color: #ffff99;
}


.deluxeButton {
  display: inline-block;
  width: 245px;
  height: 60px;
  background: transparent;
  border-width: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #871623;
  letter-spacing: 1px;
  background: url("./image/deluxe_button.png");
  margin-top: 30px;
}

.deluxeButton:hover {
  transition: 0.5s;
  color: #cf0021;
  background: url("./image/deluxe_button_hover.png");
}



.valueButton {
  display: inline-block;
  width: 245px;
  height: 60px;
  background: transparent;
  border-width: 0px;
  background: url("./image/value_button.png");
  margin-top: 10px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: #0f3260;
  font-weight: 700;
  margin-top: 30px;
}

.valueButton:hover {
  color: #256dcb;
  transition: 0.5s;
  background: url("./image/value_button_hover.png");
}


.standardButton {
  display: inline-block;
  width: 245px;
  height: 60px;
  background: transparent;
  border-width: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: #115306;
  font-weight: 700;
  background: url("./image/standard_button.png");
  margin-top: 10px;
  margin-top: 30px;
}

.standardButton:hover {
  color: #27ad10;
  transition: 0.5s;
  background: url("./image/standard_button_hover.png");
}


.subscriptionButton {
  display: inline-block;
  width: 245px;
  height: 60px;
  background: transparent;
  background: url("./image/subscription_button.png");
  margin-top: 10px;
  border-width: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: #580501;
  font-weight: 700;
}

.subscriptionButton:hover {
  background: url("./image/subscription_button_hover.png");
  color: #83440c;
}

.subscriptionDesc {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 700;
  width: 55%;
  display: inline-block;
  text-align: left;
}



.carousel .item {
  display: block;
  position: absolute;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.4;
}

.carousel .item.active {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.carousel .item.transition {
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

a.tip {
  text-decoration: none
}

a.tip:hover {
  position: relative
}

a.tip span {
  display: none
}

a.tip:hover span {
  font-family: 'Roboto Condensed', sans-serif;
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  font-weight: 300;
  padding: 7px;
  display: block;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.8);
  left: 100%;
  width: 280px;
  position: absolute;
  text-align: center;
  text-decoration: none;
}

/*benacash*/

.pageContainerBenacash {
  max-width: 100%;
  height: 1080px;
  background: url("./image/benacash_bg.jpg") no-repeat;
  background-position: center;
  text-align: center;
  padding-bottom: 50px;
  background-attachment: fixed;
}

.benacashContainer {
  width: 1400px;
  display: inline-block;
  margin-top: 20px;
}

.benacashPackage {
  width: 229px;
  height: 420px;
  background: url("./image/bena_500.jpg");
  display: inline-block;
}

.benacashPackage:hover {
  background: url("./image/bena_500_hover.jpg");
  transition: 1s;
}

.benacashPackage2 {
  width: 229px;
  height: 420px;
  background: url("./image/bena_1000.jpg");
  display: inline-block;
}

.benacashPackage2:hover {
  background: url("./image/bena_1000_hover.jpg");
  transition: 1s;
}

.benacashPackage3 {
  width: 229px;
  height: 420px;
  background: url("./image/bena_2500.jpg");
  display: inline-block;
}

.benacashPackage3:hover {
  background: url("./image/bena_2500_hover.jpg");
  transition: 1s;
}

.benacashPackage4 {
  width: 229px;
  height: 420px;
  background: url("./image/bena_5000.jpg");
  display: inline-block;
}

.benacashPackage4:hover {
  background: url("./image/bena_5000_hover.jpg");
  transition: 1s;
}

.benacashPackage5 {
  width: 229px;
  height: 420px;
  background: url("./image/bena_6000.jpg");
  display: inline-block;
}

.benacashPackage5:hover {
  background: url("./image/bena_6000_hover.jpg");
  transition: 1s;
}

.benacashPackage6 {
  width: 229px;
  height: 420px;
  background: url("./image/bena_10000.jpg");
  display: inline-block;
}

.benacashPackage6:hover {
  background: url("./image/bena_10000_hover.jpg");
  transition: 1s;
}

.benacashFaq {
  margin-top: 20px;
  padding-bottom: 190px;
}

.benacashFaqText {
  font-size: 21px;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 1px;
  font-weight: 700;
  text-decoration: underline;
}

.benacashFaqText:hover {
  color: #ffff99;
}

.benacashPrice {
  font-family: 'Anton', sans-serif;
  font-size: 45px;
  letter-spacing: 1px;
  margin-top: 15px;
}

.benacashText {
  font-family: 'Anton', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  margin-top: -20px;
}

.gemImage {
  width: 180px;
  display: inline-block;
}

.benacashButton {
  width: 170px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  font-size: 21px;
  font-family: 'Roboto Condensed', sans-serif;
  margin-top: 40px;
  display: inline-block;
}

.benacashButton:hover {
  border: 2px solid #ffff99;
  color: #ffff99;
}


/*shop FAQ*/

.pageContainerfaq {
  max-width: 100%;
  height: auto;
  background: url("./image/faq_bg.jpg") no-repeat;
  background-position: center;
  text-align: center;
  background-attachment: fixed;
  padding-bottom: 50px;
}

.shopIconContainer {
  width: 120px;
  display: inline-block;
}

.shopPackage {
  width: 35px;
  height: 35px;
  background: url("./image/faq_shop_icon.png");
  display: inline-block;
}

.shopPackage:hover {
  background: url("./image/faq_shop_icon_hover.png");
  transition: 1s;
}

.shopSubscription {
  width: 35px;
  height: 35px;
  background: url("./image/faq_subscription_icon.png");
  display: inline-block;
}

.shopSubscription:hover {
  background: url("./image/faq_subscription_icon_hover.png");
  transition: 1s;
}

.shopBenacash {
  width: 35px;
  height: 35px;
  background: url("./image/faq_benacash_icon.png");
  display: inline-block;
}

.shopBenacash:hover {
  background: url("./image/faq_benacash_icon_hover.png");
  transition: 1s;
}

.shopfaqContainer {
  width: 60%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  margin-top: 10px;
  box-shadow: 1px 1px 2px #383b3f;
}

.singlefaq {
  height: 40px;
}

.faqQuestion {
  text-align: left;
  margin-top: 15px;
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1px;
  height: 50px;
  margin-left: 30px;
}

.faqAnswer {
  text-align: left;
  font-family: 'Roboto Condensed', sans-serif;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 16px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1px;
  margin-top: -20px;
  padding: 10px 30px;
}

.faqSpace {
  width: 20px;
}

.glyphicon-menu-down {
  float: right;
  font-size: 20px;
  margin-right: 30px;
  margin-top: -20px;
}

.glyphicon-menu-up {
  float: right;
  font-size: 20px;
  margin-right: 30px;
  margin-top: -20px;
}



/*account myinfo*/

.pageContainerAccountMain {
  max-width: 100%;
  height: 1080px;
  background: url("./image/account_main_bg.jpg") no-repeat;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  padding-bottom: 120px;
}

#accountFooter {
  margin-top: 140px;
}

.accountMenu {
  width: 1300px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  margin-top: 15px;
}

.accountTab {
  display: inline-block;
}

.accountTabMenu {
  display: inline-block;
  padding: 30px 20px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  opacity: 0.9;
  font-weight: 400;
}

.accountTabMenu:hover {
  font-size: 18px;
  opacity: 1;
  color: #ffff99;
}

.tabActive {
  opacity: 1;
  font-weight: 700;
  color: #ffff99;
}

.accountMainMenu {
  width: 1300px;
  height: auto;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.65);
  margin-top: -15px;
  padding: 20px 0;
}


.accountSingleMenu {
  width: 620px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin: 1px;
  border: 1px solid rgba(0, 0, 0, 0);
}

.accountSingleMenu:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #ffff99;
}

.accountSingleMenu2 {
  width: 1246px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.3);
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0);
}

.accountSingleMenu2:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #ffff99;
}

.accountMenuContainer {
  float: left;
}

.accountMenuContainer2 {
  float: left;
  width: 50%;
}

.accountMenuTitle {
  font-family: 'Anton', sans-serif;
  font-size: 21px;
  text-align: left;
  margin: 10px 0 0 15px;
  letter-spacing: 1px;
}

#passwordMenu {
  margin-top: 20px;
}

.accountMenuSub {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  text-align: left;
  margin: 5px 0 0 15px;
  font-weight: 300;
  letter-spacing: 1px;
}

.gemIcon {
  display: inline-block;
  float: left;
  margin-left: 15px;
  margin-top: 3px;
}

.accountMenuSubNews {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  text-align: left;
  margin: 5px 0 0 15px;
  font-weight: 300;
  letter-spacing: 1px;
}

.editIcon {
  width: 35px;
  height: 35px;
  background: url("./image/edit_icon.png");
  float: right;
  margin: 20px 20px 0 0;
}

.editIcon:hover {
  background: url("./image/edit_icon_hover.png");
}

.buyIcon {
  width: 35px;
  height: 35px;
  background: url("./image/buy_icon.png");
  float: right;
  margin: 20px 20px 0 0;
}

.buyIcon:hover {
  background: url("./image/buy_icon_hover.png");
}

.deletionIcon {
  width: 35px;
  height: 35px;
  background: url("./image/deletion_icon.png");
  float: right;
  margin: 20px 20px 0 0;
}

.deletionIcon:hover {
  background: url("./image/deletion_icon_hover.png");
}

.downIcon {
  width: 35px;
  height: 35px;
  background: url("./image/down_icon.png");
  float: right;
  margin: 20px 20px 0 0;
}

.downIcon:hover {
  background: url("./image/down_icon_hover.png");
}

.activationIcon {
  width: 35px;
  height: 35px;
  background: url("./image/activation_icon.png");
  float: right;
  margin: 20px 20px 0 0;
}

.activationIcon:hover {
  background: url("./image/activation_icon_hover.png");
}

#languageCheck {
  margin: 5px 0 0 15px;
}

.mainCheck2 {
  width: 15px;
  height: 15px;
  float: left;
  margin-top: 21px;
  clear: both;
}

.languageContainer {
  display: inline-block;
}

.languageOption {
  width: 280px !important;
  border-radius: none !important;
  color: #fff;
  background: transparent;
  height: 40px;
  float: left;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 1px;
  box-shadow: none !important;
  display: inline-block;
  margin-top: 15px;
}

.langOption {
  background-color: rgba(0, 0, 0, 1) !important;
  background: None;
  color: #fff;
  border: none !important;
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 1px;
  padding: 10px 0 !important;
}

.form-control {
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 1px solid #fff !important;
}

/*account purchase*/

.pageContainerAccountPurchase {
  max-width: 100%;
  height: 1080px;
  background: url("./image/purchase_bg.jpg") no-repeat;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
}

.purchaseTitleText {
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}



.accountMainMenu2 {
  width: 1300px;
  height: 545px;
  margin-top: -15px;
  background-color: rgba(0, 0, 0, 0.7);
  display: inline-block;
}

.searchContainer {
  border-bottom: 1px solid #fff;
  width: 250px;
  height: 25px;
  display: inline-block;
  float: right;
  margin: 40px 65px 30px 0;
}

.searchBar {
  background: transparent;
  border: none;
}

.fa {
  margin-left: -50px;
}

.searchBar::placeholder {
  font-size: 14px;
  letter-spacing: 1px;
}

.tableWrapper {
  padding-top: 60px;
}

.purchaseContainer {
  width: 90%;
  margin-left: 5%;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 300;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
}



.tableControl {
  display: inline-block;
  margin-top: 30px;
}

.tableControl .previous {
  float: left;
  background: url("./image/tableleft.png");
  width: 20px;
  height: 26px;
  margin: 0 15px;
}

.tableControl .previous:hover {
  transition: 0.5s;
  background: url("./image/tableleft_hover.png");
}

.tableControl .next {
  float: right;
  background: url("./image/tableright.png");
  width: 20px;
  height: 26px;
  margin: 0 15px;
}

.tableControl .next:hover {
  transition: 0.5s;
  background: url("./image/tableright_hover.png");
}

/*account coupon*/

.pageContainerAccountCoupon {
  width: 100%;
  height: 1080px;
  background: url("./image/coupon_bg.jpg") no-repeat;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
}

.couponInputContainer {
  width: 1300px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.7);
  display: inline-block;
  margin-top: -15px;
}

.couponInput {
  background: transparent;
  border: none;
  width: 600px;
  height: 30px;
  border-bottom: 1px solid #fff;
  display: inline-block;
  margin-top: 30px;
}

.couponInput::placeholder {
  text-align: center;
  letter-spacing: 1px;
}

.couponContainer {
  width: 1300px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.redeemButton {
  width: 35px;
  height: 35px;
  background: url("./image/next_icon.png");
  display: inline-block;
  margin-top: 20px;
}

.redeemButton:hover {
  background: url("./image/next_icon_hover.png");
}

.couponHistoryRow {
  display: inline-block;
  margin-top: 10px;
}

.couponHistoryCard {
  width: 300px;
  height: 120px;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  vertical-align: text-top;
}

.couponHistoryCard:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.couponName {
  font-family: 'Anton', sans-serif;
  text-align: left;
  font-size: 18px;
  line-height: 24px;
  height: 40%;
  letter-spacing: 1px;
  padding-top: 15px;
  margin-left: 15px;
  word-wrap: break-word;
}

.couponName:hover {
  color: #ffff99;
}

.couponDesc {
  font-size: 12px;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: left;
  height: 20px;
  margin-top: 25px;
  margin-left: 15px;
}

.couponDesc:hover {
  color: #ffff99;
}

.couponDate {
  font-size: 12px;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: 1px;
  text-align: left;
  height: 20px;
  margin-top: -15px;
  margin-left: 15px;
}

.seeMore {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: underline;
  padding: 30px 0;
}

/*account 2nd step*/

.pageContainerAccount2step {
  width: 100%;
  height: 1080px;
  background: url("./image/2step_bg.jpg") no-repeat;
  background-position: center;
  background-attachment: fixed;
  padding-bottom: 120px;
  text-align: center;
}


.stepContainer {
  width: 100%;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  margin-top: -20px;
}

.singleStep {
  display: inline-block;
  vertical-align: text-top;
  margin-top: -60px;
  padding: 0 15px;
}

.stepTitle {
  font-family: 'Anton', sans-serif;
  font-size: 21px;
  padding-top: 25px;
  letter-spacing: 1px;
}


.stepSub {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: -8px;
}

.singleArrow {
  color: #fff;
  display: inline-block;
  font-size: 55px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  padding: 0 20px;
}

.stepFeatureContainer {
  width: 100%;
}

.stepFeature {
  display: inline-block;
  width: 250px;
  margin: 25px 10px 0 20px;
  vertical-align: text-top;
}

.stepFeatureTitle {
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  margin-top: 5px;
}

.stepFeatureSub {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  margin-top: -5px;
}

#accountMenu2step {
  height: auto;
  padding-bottom: 0px;
}

#accountMainMenu2step {
  height: auto;
  padding-bottom: 40px;
}



.line {
  width: 80%;
  margin-left: 10%;
  height: 1px;
  background-color: #696f78;
  margin-top: 15px;
}

.process2step {
  display: inline-block;
}

.hide-me[aria-expanded="true"] {
  display: none;
}

.process2step2 {
  display: inline-block;
  clear: both;
}

.message2step {
  width: 80%;
  margin-left: 10%;
  background-color: rgba(202, 33, 40, 0.5);
  height: auto;
  border-radius: 5px;
  margin-top: 10px;
}

.message2stepText {
  padding: 10px;
}

.codeInput {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #696f78;
  width: 400px;
  height: 30px;
  margin-top: 10px;
  text-align: center
}

.codeInput::placeholder {
  font-size: 14px;
  letter-spacing: 1px;
}

.buttons2step {
  display: inline-block;
  clear: both;
  margin-top: 15px;
}

.nextIcon {
  width: 35px;
  height: 35px;
  background: url("./image/next_icon.png");
  margin: 0 5px;
  display: inline-block;
}

.nextIcon:hover {
  background: url("./image/next_icon_hover.png");
}

.cancelIcon {
  width: 35px;
  height: 35px;
  background: url("./image/cancel_icon.png");
  margin: 0 5px;
  display: inline-block;
}

.cancelIcon:hover {
  background: url("./image/cancel_icon_hover.png");
}

.deactivationIcon {
  width: 35px;
  height: 35px;
  background: url("./image/deactivation_icon.png");
  margin: 0 5px;
  display: inline-block;
}

.deactivationIcon:hover {
  background: url("./image/deactivation_icon_hover.png");
}

.success2step {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  margin-top: 20px;
}

.modal-dialog2 {
  width: 900px !important;
  margin-top: 250px !important;
  display: inline-block !important;
}

.modal-content2 {
  width: 900px;
  height: 300px;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 0px !important;
  background: url("./image/windowFrame.png");
}

.modalText {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 21px;
  margin-top: 80px;
  font-weight: 300;
  letter-spacing: 1px;
}

.modalButtonContainer {
  margin-top: 40px;
}

.space1 {
  display: inline-block;
  width: 20px;
}

/*NEWS*/

.pageContainerNews {
  max-width: 100%;
  height: 2000px;
  background: url("./image/news_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.mainNewsContainer {
  width: 1400px;
  display: inline-block;
  margin-top: 15px;
}

.mainNewsLeft {
  float: left;
  margin-left: 5px;
}

.mainNewsRight {
  float: right;
  margin-right: 5px;
}

.newsTitlebg {
  width: 100%;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  margin-top: 290px;
}

.newsTitlebg2 {
  width: 100%;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  margin-top: 105px;
}

.mainNewsInfoWrapper {

}

.mainNewsDate {
  display: inline-block;
  float: left;
  font-size: 14px;
  font-family: 'Roboto Condensed', sans-serif;
  margin-left: 20px;
  margin-top: -5px;
}

.mainNewsType {
  display: inline-block;
  float: left;
  font-size: 14px;
  font-family: 'Roboto Condensed', sans-serif;
  margin-left: 10px;
  margin-top: -5px;
}

.mainNews1 {
  width: 690px;
  height: 360px;
  background: url("./image/mainnews_1.jpg");
  background-size: cover;
  box-shadow: 2px 2px 2px #383b3f;
}

.mainNews2 {
  width: 690px;
  height: 175px;
  background: url("./image/mainnews_2.jpg");
  background-size: cover;
  box-shadow: 2px 2px 2px #383b3f;
}

.mainNews3 {
  width: 690px;
  height: 175px;
  background: url("./image/mainnews_3.jpg");
  background-size: cover;
  box-shadow: 2px 2px 2px #383b3f;
}

#mainNews2 {
  margin-top: 10px;
}


.newsTitleText {
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
  float: left;
  text-align: left;
  width: 100%;
}

.newsTitleText2 {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  display: inline-block;
  text-align: left;
  width: 100%;
  margin-left: 20px;
  margin-top: 5px;
}


.newsTitleText:hover {
  color: #ffff99;
}

.newsInfoWrapper {
  display: inline-block;
  width: 950px;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
}

.newsDate {
  display: inline-block;
  float: left;
  font-size: 14px;
  font-family: 'Roboto Condensed', sans-serif;
  margin-top: -5px;

}

.newsDate:hover {
  color: #ffff99;
}

.newsType {
  display: inline-block;
  float: left;
  margin-left: 20px;
  font-size: 14px;
  font-family: 'Roboto Condensed', sans-serif;
  margin-top: -5px;
}

.newsType:hover {
  color: #ffff99;
}

.newsText {
  float: left;
  text-align: left;
  width: 940px;
  height: 90px;
  font-size: 16px;
  font-weight: 300;
  font-family: 'Roboto Condensed', sans-serif;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.newsText:hover {
  color: #ffff99;
}

.newsNumber {
  display: inline-block;
  padding: 20px 20px 0 20px;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Roboto Condensed', sans-serif;
}

.newsNumber:hover {
  color: #ffff99;
}

.numberActive {
  color: #ffff99;
  font-weight: 700;
}

.newsContainer {
  display: inline-block;
  width: 1400px;
  height: 650px;
  margin-top: 5px;
}

.newsFunctionBar {
  width: 100%;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.7);
}

.newsFunctionLeft {
  float: left;
  margin-left: 20px;
}

.newsActive {
  font-weight: 700;
  color: #ffff99;
}

.newsFunctionRight {
  float: right;
  margin-right: 80px;
}

.newsOption {
  display: inline-block;
  margin: 25px 10px 0 10px;
  font-size: 18px;
  letter-spacing: 1px;
  font-family: 'Roboto Condensed', sans-serif;
}

.newsOption:hover {
  color: #ffff99;
}

.descendingIcon {
  width: 35px;
  height: 35px;
  background: url("./image/descending_icon.png");
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: 20px;
}

.descendingIcon:hover {
  background: url("./image/descending_icon_hover.png");
}

.ascendingIcon {
  width: 35px;
  height: 35px;
  background: url("./image/ascending_icon.png");
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: 20px;
}

.ascendingIcon:hover {
  background: url("./image/ascending_icon_hover.png");
}

.newsCardContainer {
  width: 1400px;
  height: 230px;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.newsCardContainer:hover {
  background: rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.newsCardController {
  width: 1400px;
  height: 70px;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}


.newsCard1 {
  width: 400px;
  height: 200px;
  background: url("./image/mainnews_1.jpg");
  background-size: cover;
  background-position: center;
  float: left;
  margin: 15px 0 0 10px;
  display: inline-block;
}

.newsCard2 {
  width: 400px;
  height: 200px;
  background: url("./image/mainnews_2.jpg");
  background-size: cover;
  background-position: center;
  float: left;
  margin: 15px 0 0 10px;
  display: inline-block;
}

.newsCard3 {
  width: 400px;
  height: 200px;
  background: url("./image/mainnews_3.jpg");
  background-size: cover;
  background-position: center;
  float: left;
  margin: 15px 0 0 10px;
  display: inline-block;
}

.newsCard4 {
  width: 400px;
  height: 200px;
  background: url("./image/mainnews_4.jpg");
  background-size: cover;
  background-position: center;
  float: left;
  margin: 15px 0 0 10px;
  display: inline-block;
}




/*NEWS SINGLE PAGE*/

.pageContainerNewsSingle {
  max-width: 100%;
  height: auto;
  background: url("./image/single_news_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
}

.singleNewsContainer {
  display: inline-block;
  width: 1400px;
  background-color: rgba(0, 0, 0, 0.7);
  margin-top: 100px;
}

.singleNewsWrapper {
  display: inline-block;
  width: 1400px;
  background-color: rgba(0, 0, 0, 0.1);
}

.singleTitleContent {
  width: 1000px;
  display: inline-block;
}

.singleNewsContents {
  width: 1000px;
  padding-top: 30px;
  padding-bottom: 50px;
  display: inline-block;
}

.newsInfoGroup {
  margin-top: 0px;
  margin-left: 20px;
}

.newsInfoWrapper2 {
  width: 100%;
  height: 60px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
}

#singleTitle {
  font-size: 40px;
  margin-top: 25px;
}

#singleDate {
  margin-left: -20px;
}

.singleNewsMainImage {
  width: 1000px;
  height: 350px;
  background: url("./image/mainnews_1.jpg");
  background-size: cover;
  background-position: center;
  display: inline-block;
}

.singleNewsText {
  text-align: left;
  padding: 20px 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
}

.backtotheList {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-top: 30px;
  text-decoration: underline;
}

.fire {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
}

#particles-js {
  max-width: 100%;
  height: 100%;
}

.count_particles {
  display: none;
}

canvas {
  top: 0;
  display: inline-block;
}

/*game_sidenavbar*/

.gameNavbar {
 position: fixed;
 z-index: 10;
 margin-top: 400px;
 margin-left: 30px;
 float: left;
}

.navPoint {
  width: 15px;
  height: 15px;
  border-radius: 7.5px;
  background-color: #fff;
  margin: 15px 0;
}

.navPoint:hover {
  background-color: #ffff99;
}


.navPoint p {
  margin-left: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.navPoint p:hover {
  color: #ffff99;
}


.activeGame {
  background-color: #ffff99;
}

#activeGameText {
  color: #ffff99;
}

/*game_astellia*/

.pageContainerGame {
  width: 100%;
  height: 1080px;
  background: url("./image/game_astellia_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  position: absolute;
  background-attachment: fixed;
}

#gamePageLogo {
  margin-top: 30px;
}

.gameContentContainer {
  width: 850PX;
  margin-left: 15%;
  text-align: left;
  margin-top: 110px;
}

.gameContentText {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.slider-container2 {
  width: 850px;
  display: block;
  margin-left: 15%;
  box-shadow: 2px 2px 2px #000;
}

.flexbox-slider2 {
  margin-top: 25px;
}

.flexbox-slider2 {
  display: flex;
  max-width: 850px;
  height: 185px;
  visibility: hidden;
}

.flexbox-slider2 .flexbox-slide2 {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  width: 33%;
  height: 185px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.5);
}

.flexbox-slider2 .flexbox-slide2:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 850px;
  height: 185px;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 2;
  opacity: 0;
}

.flexbox-slider2 .flexbox-slide2 img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: auto;
  min-width: 100%;
  min-height: 185px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.flexbox-slider2 .flexbox-slide2 .text-block {
  position: absolute;
  left: 30px;
  bottom: 0px;
  max-width: 400px;
  padding: 20px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 4;
  visibility: hidden;
}

.flexbox-slider2:hover .flexbox-slide2:hover {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 768px;
}

.flexbox-slider2.flexbox-slider-1 .flexbox-slide2 .text-block {
  bottom: 0px;
}

.flexbox-slider2.flexbox-slider-1:hover .flexbox-slide:hover .text-block {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  bottom: 0px;
  opacity: 1;
  visibility: visible;
}

.featureNo1 {
  background: url("./image/feature1.png") no-repeat;
  width: 770px;
  height: 185px;
}

.featureNo2 {
  background: url("./image/feature2.png") no-repeat;
  width: 770px;
  height: 185px;
}

.featureNo3 {
  background: url("./image/feature3.png") no-repeat;
  width: 770px;
  height: 185px;
}

.featureMenu {
  transform: rotate(-90deg);
  color: #fff;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  width: 100px;
  margin-left: -30px;
  margin-top: 80px;
}


.slideBox2 {
  width: 40px;
  height: 185px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  box-shadow: 2px 2px 2px #000;
  float: left;
}

.menuIcon {
  width: 40px;
  height: 40px;
  background: url("./image/signin_icon.png");
  display: inline-block;
  margin-top: 90px;
}

.menuIcon2 {
  width: 40px;
  height: 40px;
  background: url("./image/signup_icon.png");
  display: inline-block;
  margin-top: 90px;
}

.menuIcon3 {
  width: 40px;
  height: 40px;
  background: url("./image/shop_icon.png");
  display: inline-block;
  margin-top: 90px;
}



.textContainer2 {
  display: inline-block;
  width: 350px;
  margin-right: 30px;
  margin-top: 30px;
  float: right;
}


.slideTitle2 {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  text-align: left;
}

.slideSub2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  text-align: left;
}

/*game_class*/

.pageContainerClass {
  max-width: 100%;
  height: 1080px;
  background: url("./image/class_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.classCardContainer {
  position: relative;
  z-index: 5;
  display: inline-block;
  width: 1000px;
  margin-top: 40px;
}

.classCard1 {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_warrior.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.classCard1:hover {
  transition: 1s;
  background: url("./image/class_card_warrior_hover.jpg");
}

.warriorActive {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_warrior_hover.jpg");
}

.classCard2 {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_archer.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.classCard2:hover {
  transition: 1s;
  background: url("./image/class_card_archer_hover.jpg");
}

.archerActive {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_archer_hover.jpg");
}

.classCard3 {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_scholar.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.classCard3:hover {
  transition: 1s;
  background: url("./image/class_card_scholar_hover.jpg");
}

.scholarActive {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_scholar_hover.jpg");
}

.classCard4 {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_assassin.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.classCard4:hover {
  transition: 1s;
  background: url("./image/class_card_assassin_hover.jpg");
}

.assassinActive {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_assassin_hover.jpg");
}

.classCard5 {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_mage.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.classCard5:hover {
  transition: 1s;
  background: url("./image/class_card_mage_hover.jpg");
}

.mageActive {
  width: 160px;
  height: 400px;
  background: url("./image/class_card_mage_hover.jpg");
}




.classCardText {
  display: inline-block;
  position: relative;
  z-index: 5;
  width: 800px;
  margin-top: 100px;
}

.className {
  font-family: 'Anton', sans-serif;
  font-size: 35px;
  letter-spacing: 1px;
}

.classDesc {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  margin-top: -5px;
}

.pageContainerClassArcher {
  max-width: 100%;
  height: 1080px;
  background: url("./image/class_archer_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.pageContainerClassScholar {
  max-width: 100%;
  height: 1080px;
  background: url("./image/class_scholar_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.pageContainerClassAssassin {
  max-width: 100%;
  height: 1080px;
  background: url("./image/class_assassin_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.pageContainerClassMage {
  max-width: 100%;
  height: 1080px;
  background: url("./image/class_mage_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

/*Astels*/

.pageContainerAstel {
  max-width: 100%;
  height: 1080px;
  background: url("./image/astel_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
  overflow: hidden;
}


.astelCardContainer {
  position: relative;
  z-index: 5;
  display: inline-block;
  width: 1200px;
  margin-top: 40px;
}

.carousel-indicators li {
  width: 15px;
  height: 15px;
}

.astelImage {
  position: fixed;
  z-index: 2;
  float: right;
  display: inline-block;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 1s;
 left: 1150px;
 top: -50px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:1500px; top:-50px;}
  90%  {left:1140px; top:-50px;}
  100% {left:1150px; top:-50px;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:1500px; top:-50px;}
  90%  {left:1140px; top:-50px;}
  100% {left:1150px; top:-50px;}
}

.astelCard1 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/seika.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.astelCard1:hover {
  transition: 1s;
  background: url("./image/astels/seika_hover.jpg");
}

.seikaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/seika_hover.jpg");
}

.astelCard2 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/glacier.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.glacierActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/glacier_hover.jpg");
}

.astelCard2:hover {
  transition: 1s;
  background: url("./image/astels/glacier_hover.jpg");
}

.astelCard3 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/venecia.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.veneciaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/venecia_hover.jpg");
}

.astelCard3:hover {
  transition: 1s;
  background: url("./image/astels/venecia_hover.jpg");
}

.astelCard4 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/ignagon.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.ignagonActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/ignagon_hover.jpg");
}

.astelCard4:hover {
  transition: 1s;
  background: url("./image/astels/ignagon_hover.jpg");
}

.astelCard5 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/enakir.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.enakirActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/enakir_hover.jpg");
}

.astelCard5:hover {
  transition: 1s;
  background: url("./image/astels/enakir_hover.jpg");
}

.astelCard6 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/aida.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.aidaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/aida_hover.jpg");
}

.astelCard6:hover {
  transition: 1s;
  background: url("./image/astels/aida_hover.jpg");
}

.astelCard7 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/grimoire.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.grimoireActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/grimoire_hover.jpg");
}

.astelCard7:hover {
  transition: 1s;
  background: url("./image/astels/grimoire_hover.jpg");
}

.astelCard8 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/braga.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.bragaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/braga_hover.jpg");
}

.astelCard8:hover {
  transition: 1s;
  background: url("./image/astels/braga_hover.jpg");
}

.astelCard9 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/eligos.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.eligosActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/eligos_hover.jpg");
}

.astelCard9:hover {
  transition: 1s;
  background: url("./image/astels/eligos_hover.jpg");
}

.astelCard10 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/rota.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.rotaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/rota_hover.jpg");
}


.astelCard10:hover {
  transition: 1s;
  background: url("./image/astels/rota_hover.jpg");
}

.astelCard11 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/aquarius.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.aquariusActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/aquarius_hover.jpg");
}

.astelCard11:hover {
  transition: 1s;
  background: url("./image/astels/aquarius_hover.jpg");
}

.astelCard12 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/archer.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.archerActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/archer_hover.jpg");
}

.astelCard12:hover {
  transition: 1s;
  background: url("./image/astels/archer_hover.jpg");
}

.astelCard13 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/canceria.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.canceriaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/canceria_hover.jpg");
}

.astelCard13:hover {
  transition: 1s;
  background: url("./image/astels/canceria_hover.jpg");
}

.astelCard14 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/capricorn.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.capricornActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/capricorn_hover.jpg");
}

.astelCard14:hover {
  transition: 1s;
  background: url("./image/astels/capricorn_hover.jpg");
}

.astelCard15 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/corvus.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.corvusActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/corvus_hover.jpg");
}

.astelCard15:hover {
  transition: 1s;
  background: url("./image/astels/corvus_hover.jpg");
}

.astelCard16 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/cygnus.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.cygnusActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/cygnus_hover.jpg");
}

.astelCard16:hover {
  transition: 1s;
  background: url("./image/astels/cygnus_hover.jpg");
}

.astelCard17 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/draco.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.dracoActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/draco_hover.jpg");
}

.astelCard17:hover {
  transition: 1s;
  background: url("./image/astels/draco_hover.jpg");
}

.astelCard18 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/kukuma.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.kukumaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/kukuma_hover.jpg");
}

.astelCard18:hover {
  transition: 1s;
  background: url("./image/astels/kukuma_hover.jpg");
}

.astelCard19 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/leo.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.leoActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/leo_hover.jpg");
}

.astelCard19:hover {
  transition: 1s;
  background: url("./image/astels/leo_hover.jpg");
}

.astelCard20 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/link.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.linkActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/link_hover.jpg");
}

.astelCard20:hover {
  transition: 1s;
  background: url("./image/astels/link_hover.jpg");
}

.astelCard21 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/lira.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.liraActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/lira_hover.jpg");
}

.astelCard21:hover {
  transition: 1s;
  background: url("./image/astels/lira_hover.jpg");
}

.astelCard22 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/miho.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.mihoActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/miho_hover.jpg");
}

.astelCard22:hover {
  transition: 1s;
  background: url("./image/astels/miho_hover.jpg");
}

.astelCard23 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/papilia.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.papiliaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/papilia_hover.jpg");
}

.astelCard23:hover {
  transition: 1s;
  background: url("./image/astels/papilia_hover.jpg");
}

.astelCard24 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/pisces.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.piscesActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/pisces_hover.jpg");
}

.astelCard24:hover {
  transition: 1s;
  background: url("./image/astels/pisces_hover.jpg");
}

.astelCard25 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/ram.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.ramActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/ram_hover.jpg");
}

.astelCard25:hover {
  transition: 1s;
  background: url("./image/astels/ram_hover.jpg");
}

.astelCard26 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/scorpio.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.scorpioActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/scorpio_hover.jpg");
}

.astelCard26:hover {
  transition: 1s;
  background: url("./image/astels/scorpio_hover.jpg");
}

.astelCard27 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/serpens.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.serpensActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/serpens_hover.jpg");
}


.astelCard27:hover {
  transition: 1s;
  background: url("./image/astels/serpens_hover.jpg");
}

.astelCard28 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/sirius.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.siriusActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/sirius_hover.jpg");
}


.astelCard28:hover {
  transition: 1s;
  background: url("./image/astels/sirius_hover.jpg");
}

.astelCard29 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/taurus.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.taurusActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/taurus_hover.jpg");
}

.astelCard29:hover {
  transition: 1s;
  background: url("./image/astels/taurus_hover.jpg");
}

.astelCard30 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/tetrino.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.tetrinoActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/tetrino_hover.jpg");
}

.astelCard30:hover {
  transition: 1s;
  background: url("./image/astels/tetrino_hover.jpg");
}

.astelCard31 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/tioka.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.tiokaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/tioka_hover.jpg");
}

.astelCard31:hover {
  transition: 1s;
  background: url("./image/astels/tioka_hover.jpg");
}

.astelCard32 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/unicorn.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.unicornActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/unicorn_hover.jpg");
}

.astelCard32:hover {
  transition: 1s;
  background: url("./image/astels/unicorn_hover.jpg");
}

.astelCard33 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/ursa.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.ursaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/ursa_hover.jpg");
}


.astelCard33:hover {
  transition: 1s;
  background: url("./image/astels/ursa_hover.jpg");
}

.astelCard34 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/virgo.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.virgoActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/virgo_hover.jpg");
}

.astelCard34:hover {
  transition: 1s;
  background: url("./image/astels/virgo_hover.jpg");
}

.astelCard35 {
  width: 150px;
  height: 292px;
  background: url("./image/astels/vulpecula.jpg");
  box-shadow: 2px 2px 2px #161616;
  display: inline-block;
  margin: 0 3px;
}

.vulpeculaActive {
  width: 150px;
  height: 292px;
  background: url("./image/astels/vulpecula_hover.jpg");
}

.astelCard35:hover {
  transition: 1s;
  background: url("./image/astels/vulpecula_hover.jpg");
}



.astelTextContainer {
  width: 1200px;
  display: inline-block;
  position: relative;
  z-index: 9;
  top: 30px;
}

#astelTitle {
  margin-top: 40px;
}

.astelName {
  font-family: 'Anton', sans-serif;
  font-size: 35px;
  letter-spacing: 1px;
  display: inline-block;
  width: 200px;
  vertical-align: text-top;
}

.astelDesc {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  margin-top: -5px;
  display: inline-block;
  text-align: left;
  width: 900px;
  vertical-align: text-top;
}

.astelSlide {
  width: 1400px !important;
  position: relative !important;
  display: inline-block !important;
  z-index: 5;
}

.carousel-control.left {
  background: none !important;
  height: auto !important;
  width: 35px !important;
  height: 45px !important;
  background: url("./image/left.png");
}

.carousel-control.right {
  background: none !important;
  height: auto !important;
  width: 30px !important;
  height: 30px !important;
}


.carousel-indicators {
  position: relative !important;
  bottom: 0px !important;
  margin-top: 10px !important;
}

/*media*/

.pageContainerMedia {
  max-width: 100%;
  height: 1080px;
  background: url("./image/media_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.videoContainer {
  width: 1250px;
  display: inline-block;
  margin-top: 10px;
}

.cinematicTrailer {
  width: 600px;
  height: 300px;
  background: url("./image/cinematic_trailer.jpg");
  display: inline-block;
  margin: 0 5px;
  box-shadow: 2px 2px 2px #000;
}

.gameTrailer {
  width: 600px;
  height: 300px;
  background: url("./image/game_trailer.jpg");
  display: inline-block;
  margin: 0 5px;
  box-shadow: 2px 2px 2px #000;
}

.videoContent {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 250px;
}

.videoText {
  display: inline-block;
  float: left;
  letter-spacing: 2px;
  margin: 15px 0 0 20px;
  font-size: 14px;
  font-family: 'Anton', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}

.videoPlay {
  width: 25px;
  height: 25px;
  background: url("./image/video_play.png");
  border: none;
  display: inline-block;
  float: right;
  position: relative;
  z-index: 5;
  margin: 15px 20px 0 0;
}

.videoPlay:hover {
  background: url("./image/video_play_hover.png");
}

.imageSlideContainer {
  width: 1230px !important;
  display: inline-block;
  margin-top: -25px;
}

.imageSlideBox {
  position: relative;
  z-index: 5;
  display: inline-block;
  width: 1220px;
  margin-top: 40px;
}

.mediaImage1 {
  width: 100%;
  height: 280px;
  background: url("./image/ancientForest.jpg");
  display: inline-block;
  box-shadow: 2px 2px 2px #000;
  background-position: center;
}

.mediaImage2 {
  width: 100%;
  height: 280px;
  background: url("./image/arauForest.jpg");
  display: inline-block;
  box-shadow: 2px 2px 2px #000;
  background-position: center;
}

.mediaImage3 {
  width: 100%;
  height: 280px;
  background: url("./image/crimsonRockValley.jpg");
  display: inline-block;
  box-shadow: 2px 2px 2px #000;
  background-position: center;
}

.mediaImage4 {
  width: 100%;
  height: 280px;
  background: url("./image/dogviBlackMarket.jpg");
  display: inline-block;
  box-shadow: 2px 2px 2px #000;
  background-position: center;
}

.mediaImage5 {
  width: 100%;
  height: 280px;
  background: url("./image/elieMeadow.jpg");
  display: inline-block;
  box-shadow: 2px 2px 2px #000;
  background-position: center;
}

#mediaContent {
  margin-top: 230px;
}

/*avalon*/

.pageContainerAvalon {
  max-width: 100%;
  height: 1080px;
  background: url("./image/avalon_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.avalonTrailer {
  width: 600px;
  height: 300px;
  background: url("./image/avalon_trailer.jpg");
  display: inline-block;
  margin: 0 5px;
  box-shadow: 2px 2px 2px #000;
}

.avalonTextarea {
  width: 580px;
  height: 300px;
  display: inline-block;
  margin-left: 20px;
  float: right;
}

#avalonContent {
  margin-top: 190px;
}

.avalonTitle {
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
  text-align: left;
}

.avalonDesc {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  text-align: left;
  margin-top: -5px;
}

.wikiLink {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: underline;
  text-align: left;
  margin-top: 15px;
  position: relative;
  z-index: 5;
}

.wikiLink:hover {
  color: #ffff99;
}

.imagesTitleBox {
  width: 1200px;
  display: inline-block;
  margin-top: 40px;
}

.imagesTitle {
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  text-align: left;
}

#avalonSlide {
  margin-top: -35px;
}

/*dungeon*/

.pageContainerDungeon {
  max-width: 100%;
  height: 1080px;
  background: url("./image/dungeon_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.dungeonTrailer {
  width: 600px;
  height: 300px;
  background: url("./image/dungeon_trailer.jpg");
  display: inline-block;
  margin: 0 5px;
  box-shadow: 2px 2px 2px #000;
}

/*colosseum*/

.pageContainerColosseum {
  max-width: 100%;
  height: 1080px;
  background: url("./image/colosseum_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.colosseumTrailer {
  width: 600px;
  height: 300px;
  background: url("./image/colosseum_trailer.jpg");
  display: inline-block;
  margin: 0 5px;
  box-shadow: 2px 2px 2px #000;
}

/*download*/

.pageContainerDownload {
  max-width: 100%;
  height: 1080px;
  background: url("./image/download_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.downiconContainer {
  width: 1200px;
  display: inline-block;
  height: 140px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 15px;
}

.downLauncher {
  width: 50px;
  height: 50px;
  background: url("./image/launcher_download.png");
  display: inline-block;
  margin-top: 25px;
}

.downLauncherText {
  font-size: 18px;
  font-family: 'Roboto Condensed', sans-serif;
  text-decoration: underline;
  margin-top: 10px;
}

.downLauncher:hover {
  background: url("./image/launcher_download_hover.png");
}

.downLauncherText:hover {
  color: #ffff99;
}

.systemContainer {
  width: 1200px;
  height: 350px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
}

.systemTable {
  width: 100%;
}

.systemTitle {
  background-color: rgba(0, 0, 0, 0.5);
  height: 40px;
}

.systemTitle2 {
  background-color: rgba(0, 0, 0, 0.1);
  height: 40px;
}

.systemTitle3 {
  background-color: rgba(0, 0, 0, 0.3);
  height: 40px;
}

.systemTitleText {
  font-size: 18px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}

.systemText {
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;
}

/*ccp*/

.pageContainerCcp {
  max-width: 100%;
  height: 1300px;
  background: url("./image/ccp_bg.jpg") no-repeat;
  background-position: center;
  padding-bottom: 120px;
  text-align: center;
  background-attachment: fixed;
}

.ccpInputContainer {
  width: 900px;
  height: auto;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 40px 0;
  position: relative;
  z-index: 5;
  margin-top: 20px;
  box-shadow: 2px 2px 4px #161616;
}

.ccpShort {
  background: transparent;
  border: none;
  border-bottom: 1px solid #f7f8f9;
  height: 35px;
  width: 40%;
  display: inline-block;
  margin: 0 2%;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
}


.ccpShort::placeholder {
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;
  padding-left: 5px;
}

.ccpLong {
  background: transparent;
  border: none;
  border-bottom: 1px solid #f7f8f9;
  height: 35px;
  width: 84%;
  display: inline-block;
  margin: 0 10px;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
}

.ccpLong::placeholder {
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;
  padding-left: 5px;
}

.ccpMemo {
  width: 84%;
  background: transparent;
  border: 1px solid #f7f8f9;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
}

.ccpMemo::placeholder {
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;
  padding-left: 5px;
}

.ccpButton {
  display: inline-block;
  width: 245px;
  height: 60px;
  background: transparent;
  border-width: 0px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #f6f6f6;
  letter-spacing: 1px;
  background: url("./image/ccp_button.png");
  margin-top: 30px;
}

.ccpButton:hover {
  transition: 0.5s;
  color: #ecd0a3;
  background: url("./image/ccp_button_hover.png");
}

.ccpDescContainer {
  width: 900px;
  height: auto;
  display: inline-block;
  position: relative;
  z-index: 5;
  margin-top: 20px;
}

.ccpDesc {
  width: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
  height: 50px;
}

.ccpTitleText {
  font-family: 'Anton', sans-serif;
  font-size: 21px;
  letter-spacing: 1px;
  padding-top: 10px;
  text-align: left;
  padding-left: 20px;
}

.ccpSubText {
  background-color: rgba(0, 0, 0, 0.5);
  height: auto;
  text-align: left;
  padding: 15px 30px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 300;
}
