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



.dynamic {
  width: 100%;
  height: 30px;
  background-color: #020d19;
}

.dynamicMenuContainer {
  margin-right: 50px;
}

.dynamicMenu {
  color: #f7f8f9;
  font-size: 12px;
  font-family: 'PT Serif', serif;
  float: right;
  letter-spacing: 1px;
  margin: 0;
  margin-top: 8px;
  padding: 0 15px;
  opacity: 0.8;
}

.header {
  max-width: 1920px;
  height: auto;
  background-color: #161616;
  text-align: center;
}

.nav {
  width: 100%;
  height: 80px;
  background: url("./mainMenu_v2.jpg") no-repeat center;
}

.top {
  width: 25px;
  height: 2px;
  background-color: #f7f8f9;
  float: left;
  opacity: 0.8;
  margin-top: 7px;
}

.topred {
  width: 2px;
  height: 2px;
  background-color: #ca2128;
  float: left;
  margin-top: 7px;
}

.menu {
  max-width: 7%;
  height: auto;
  margin-left: 30px;
  float: left;
}

.logoSpace {
  max-width: 410px;
  height: 80px;
  width: 20%;
  float: left;
}

.singleMenu {
  text-decoration: none;
  color: #f7f8f9;
  opacity: 0.9;
}

.singleMenu:hover {
  color: yellow;
}

.nav ul {
  width: 35%;
  float: left;
}

.nav ul li {
  display: inline-block;
  color: white;
  letter-spacing: 1px;
  font-size: 14px;
  font-family: 'PT Serif', serif;
}

.leftMenu {
  text-align: center;
  width: 30%;
  display: inline-block;
}

.leftItem {
  padding-left: 5%;
  padding-top: 15px;
}

#leftFirst {
  margin-left: 0%;
}

.rightMenu {
  text-align: center;
  width: 35%;
  display: block;
}

.rightItem {
  padding-right: 5%;
  padding-top: 15px;
  text-align: center;
}

#itemSpace {
  max-width: 1%;
}

#itemSpace2 {
  width: 15%;
}




#preorder {
  padding-right: 0%;
}

#menuTop2 {
  margin-top: 25px;
}



.mainSection {
  background: url("./69.jpg") no-repeat center;
  max-width: 100%;
  height: 850px;
}

.mainRow {
  width: 100%;
  height: auto;
  display: inline-block;
}

.mainTitle {
  width: 823px;
  height: 200px;
  background: url("./mainTitleFrame.png") no-repeat;
  margin-left: 30px;
  margin-top: 460px;
}



.slideBox {
  width: 100%;
  height: 160px;
  background: url("./slidebg.png");
  margin-top: 30px;
  text-align: center;
}

.barContainer {
  display: inline-block;
  margin-top: 75px;
}

.slideBar {
  width: 130px;
  height: 10px;
  background-color: #f7f8f9;
  opacity: 0.8;
  float: left;
  margin: 0 10px;
}

#activateBar {
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
               radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

.newsSectionMain {
  max-width: 1920px;
  height: 960px;
  background: url("./newbg.jpg") no-repeat center;
  text-align: center;
}

.sectionTitle {
  width: 300px;
  height: auto;
  display: inline-block;
}

.sectionTitleText {
  font-size: 25px;
  color: #fff;
  font-family: 'PT Serif', serif;
  margin: 0;
  margin-top: 15px;
  letter-spacing: 1px;
  opacity: 0.8;
}

.outframeContainer {
  max-width: 1920px;
  height: auto;
  text-align: center;
}

.outframe {
  display: inline-block;
  max-width: 1280px;
  height: 465px;
  background: url("./outframe.png") no-repeat;
  text-align: center;
  padding-right: 10px;
  margin-top: 130px;
}

.singleNews {
  background: url("./newSingleFrame.png") no-repeat;
  width: 402px;
  height: 422px;
  text-align: center;
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  box-shadow: 2px 2px 2px #161616;
}

.singleNews2 {
  background: url("./newSingleFrame_2.png") no-repeat;
  width: 402px;
  height: 422px;
  text-align: center;
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  box-shadow: 2px 2px 2px #161616;
}

.singleNews3 {
  background: url("./newSingleFrame_3.png") no-repeat;
  width: 402px;
  height: 422px;
  text-align: center;
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  box-shadow: 2px 2px 2px #161616;
}

.newsImage {
  margin-top: 25px;
}

.newsMainText {
  font-size: 18px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  text-align: left;
  width: 80%;
  margin-left: 10%;
}

.newsText {
  font-size: 14px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  text-align: left;
  width: 80%;
  margin-left: 10%;
}

.newsDate {
  font-size: 14px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  margin-top: 40px;
  text-align: left;
  width: 80%;
  margin-left: 10%;
}



.viewallButton {
  margin-top: 80px;
}

.mediaSection {
  max-width: 1920px;
  height: 1105px;
  text-align: center;
  background: url("./mediabg.jpg") no-repeat center;
}

.mediaFrameContainer {
  max-width: 1920px;
  text-align: center;
  height: auto;
}

.mediaRow {
  display: inline-block;
  max-width: 1280px;
  height: auto;
  margin-top: 80px;
}

.mediaRow2 {
  display: inline-block;
  max-width: 1280px;
  height: auto;
  margin-top: -20px;
  margin-right: 32px;
}

.mediaContent {
  width: 612px;
  height: 422px;
  background: url("./mediaFrame.jpg") no-repeat;
  float: left;
  margin-right: 10px;
  box-shadow: 2px 2px 2px #161616;
}

.mediaContent2 {
  width: 612px;
  height: 422px;
  background: url("./mediaFrame.jpg") no-repeat;
  float: left;
  margin-left: 10px;
  box-shadow: 2px 2px 2px #161616;
}

.mediaContent3 {
  clear: both;
  width: 1240px;
  height: 423px;
  background: url("./screenFrame.jpg") no-repeat;
  box-shadow: 2px 2px 2px #161616;
  margin-top: 40px;
}

.trailerImage {
  margin-top: 14px;
  opacity: 0.8;
}

.mediaTitleBox {
  position: absolute;
  z-index: 9;
  width: 591px;
  height: 50px;
  background-color: #000;
  margin-left: 10px;
  margin-top: 355px;
  opacity: 0.8;
}

.trailerTitle {
  font-size: 20px;
  color: #fff;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  margin-top: 0px;
  margin-top: 10px;

}

.screenshotImage {
  margin-top: 20px;
  opacity: 0.8;
}

.mediaTitleBox2 {
  position: absolute;
  z-index: 9;
  width: 1210px;
  height: 50px;
  background-color: #000;
  margin-left: 15px;
  margin-top: 350px;
  opacity: 0.8;
}

.number {
  font-family: 'PT Serif', serif;
  color: #f7f8f9;
  font-size: 14px;
  margin: 0;
  margin-top: 20px;
}

.blueline {
  margin-top: -15px;
}

.mainText {
  font-family: 'PT Serif', serif;
  font-size: 40px;
  color: #f7f8f9;
  letter-spacing: 2px;
  padding-top: 30px;
  padding-left: 80px;
}

.mainSubText {
  font-size: 21px;
  opacity: 0.8;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 2px;
  padding-left: 80px;
  margin-top: -40px;

}


.footer {
  background: url("./footerbg.jpg") no-repeat center;
  max-width: 1920px;
  height: 200px;
}

/*game*/

.categorySection {
  width: 1920px;
  height: 300px;
  background: url("./game/categoryBanner.jpg");
  text-align: center;

}

.categorySectionShop {
  width: 1920px;
  height: 300px;
  background: url("./game/shopbanner.jpg");
  text-align: center;

}

.categorySectionNews {
  width: 1920px;
  height: 300px;
  background: url("./game/newsbanner.jpg");
  text-align: center;

}

.categoryRow {
  max-width: 1280px;
  display: inline-block;
  height: auto;
  text-align: center;

}

.categoryTitle {
  width: 839px;
  height: 109px;
  background: url("./game/titleBox.png");
  margin-top: 100px;
  margin-left: -450px;
}

.categoryText {
  font-size: 30px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 2px;
  padding-top: 30px;
  margin-left: -600px;
}

#categoryAccount {
  margin-left: -300px;
}

.astelliaSection {
  max-width: 1920px;
  height: 1260px;
  background: url("./game/whats.jpg") no-repeat center;
  text-align: center;

}

.whatsAstelliaContainer {
 margin-top: 60px;
 max-width: 1280px;
 text-align: center;
 display: inline-block;
}

.whatsAstellia {
  width: 1280px;
  height: 550px;
  background: url("./game/whatsFrame.png") no-repeat center;
  text-align: center;
  display: inline-block;
}

.whatsAstelliaInside {
  width: 1242px;
  height: 513px;
  background: url("./game/whatsFrameInside.png") no-repeat;
  margin-left: 20px;
  margin-top: -10px;
  box-shadow: 2px 2px 2px #161616;
}



.whatsTitle {
  padding-top: 40px;
  font-size: 30px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  opacity: 0.9;
}

.whatsDescription {
  max-width: 90%;
  margin-left: 5%;
  margin-top: -5px;
  font-size: 14px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  opacity: 0.9;
  text-align: left;
  line-height: 20px;
}

#featureFrame {
  margin-top: 0;
  margin-top: 20px;
  width: 1280px;
  padding-right: 0px;
}

#singleFeature {
  margin-left: 19px;
}

.myVideo {
  z-index: -100;
  margin-top: -890px;
  margin-bottom: -10px;
}

#myVideo {
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  position: relative;
}

.classSection {
  max-width: 1920px;
  height: auto;
  text-align: center;
  top: 0;

}

.classContent {
  z-index: 99;
}

.classHanger {
  max-width: 1920px;
  height: 68px;
  background: url("./titlehanger.png") no-repeat center;
  z-index: 99;
}

.classFrame {
  display: inline-block;
  max-width: 548px;
  height: auto;
  text-align: center;
}

.iconContainer {
  display: inline-block;
}

.classIcon {
  float: left;
  padding: 30px 10px 0 10px;
}

.classIconText {
  font-size: 14px;
  color: #f7f8f9;
  letter-spacing: 1px;
  margin-top: 0px;
  margin-top: 5px;
  font-family: 'PT Serif', serif;
}

.classContentTitleText {
  font-family: 'PT Serif', serif;
  font-size: 30px;
  color: #f7f8f9;
  letter-spacing: 1px;
  padding-top: 50px;
}

.classContentDescription {
  width: 450px;
  height: auto;
  display: inline-block;
  text-align: left;
  margin-top: -30px;
}

.classContentDescriptionText {
  font-family: 'PT Serif', serif;
  font-size: 16px;
  color: #f7f8f9;
  letter-spacing: 1px;
}

#classIconTextHover {
  color: #f7ec8f;
}

.classButton {
  margin-top: 60px;
}

.frameInside {
  width: 548px;
  height: 567px;
  background: url("./game/classFrame.png");
  margin-top: 250px;
  margin-left: -630px;
  z-index: 100;
  box-shadow: 2px 2px 2px #161616;
}

.astelSection {
  max-width: 1920px;
  height: 960px;
  background: url("./game/astelbg.jpg") no-repeat center;
  text-align: center;
}

.astelRow {
  clear: both;
  max-width: 1280px;
  height: auto;
  text-align: center;
  display: inline-block;
}


.astelOutframe {
  width: 1280px;
  height: 695px;
  background: url("./game/astelFrame.png");
  display: inline-block;
  margin-top: 70px;
  text-align: center;
}

.astelInside {
  width: 1237px;
  height: 650px;
  background: url("./game/astelInside.png");
  display: inline-block;
  margin-top: 20px;
  text-align: center;
}

.astelBanner {
  background: url("./game/servant.jpg");
  max-width: 1210px;
  height: 430px;
  margin-left: 15px;
  margin-top: 20px;
}

.astelTabContainer {
  max-width: 1210px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.75);
  margin-top: -121px;
  margin-left: 15px;
  text-align: center;
}

.astelTabText {
  display: inline-block;
}

.astelTextContainer {
  max-width: 1210px;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.75);
  margin-top: 1px;
  margin-left: 15px;
  text-align: center;
}

.tabText {
  font-size: 16px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  float: left;
  padding: 0 20px;
}

#tabTextHover {
  color: #afd5fb;
}

.astelClassText {
  width: 900px;
  font-size: 16px;
  color: #afd5fb;
  display: inline-block;
  line-height: 20px;
  text-align: left;

}

.astelDescription {
  width: 900px;
  font-size: 14px;
  color: #f7f8f9;
  line-height: 22px;
  display: inline-block;
  text-align: left;
  margin-top: 40px;
  letter-spacing: 1px;
}

/*shop*/

.shopSection {
  max-width: 1920px;
  height: 2500px;
  background: url("./game/shopbg.jpg");
  text-align: center;
}

.packageContainer {
  max-width: 1200px;
  height: auto;
  display: inline-block;
  margin-top: 50px;
}

.packageContent {
  width: 1200px;
  height: 1850px;
  background-color: #ebebeb;
  border: 1px solid #c9cccf;
  display: inline-block;
  box-shadow: 2px 2px 2px #161616;
}

.packageInframe {
  width: 1190px;
  height: 1840px;
  background-color: #f7f8f9;
  border: 1px solid #c9cccf;
  display: inline-block;
  margin-top: 5px;
  opacity: 0.9;
}

.packageImageTable {
  max-width: 1080px;
  height: auto;
  text-align: center;
  margin-left: 55px;
  margin-top: 60px;
}

.packageimage {
  width: 270px;
  height: 230px;
  text-align: center;
  float: left;
}



.packageimage2 {
  display: block;
  width: 250px;
  height: auto;
  text-align: center;
  float: left;
  margin-left: 18px;
}

.packageName {
  font-size: 21px;
  color: #161616;
  font-family: 'PT Serif', serif;
  margin: 0;
  margin-top: -10px;
  letter-spacing: 1px;
}

.packagePrice {
  font-size: 28px;
  font-style: italic;
  color: #161616;
  font-family: sans-serif;
  margin: 0;
  letter-spacing: 1px;
}

.packageButton {
  margin-top: 20px;
}


.timeFrame {
  background: url("./game/timeFrame.png") no-repeat;
  width: 426px;
  height: 64px;
  position: absolute;
  z-index: 89;
  margin-top: -1px;
  margin-left: -1px;
}

.time {
  font-size: 18px;
  font-family: 'PT Serif', serif;
  color: #f7f8f9;
  text-align: left;
  margin-left: 60px;
  letter-spacing: 1px;
}



.packageDescription {
  width: 1080px;
  height: 430px;
  text-align: center;
  margin-left: 55px;
}



.packageDescription2 {
  width: 1080px;
  height: 430px;
  text-align: center;
  margin-left: 55px;
}

.tableTitle {
  clear: both;
  width: 256px;
  height: 40px;
  background: url("./game/tabletitle.png") no-repeat;
  margin-left: 56px;
  margin-top: 450px;
}

.tableTitle2 {
  width: 256px;
  height: 40px;
  background: url("./game/tabletitle.png") no-repeat;
  margin-left: 56px;
  margin-top: 55px;
}


.tableTitleText {
  font-size: 18px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  text-align: left;
  margin-left: 20px;
  padding-top: 6px;
}

.tablerow {
  width: 1080px;
height: 85px;
}

.packageItem {
  width: 270px;
  background-color: #e5eaee;
}

.goldPackage {
  width: 270px;
  background-color: #ebe5d7;
}

.platinumPackage {
  width: 270px;
  background-color: #cfd6e9;
}

.legenaryPackage {
  width: 270px;
  background-color: #efd5de;
}

.packageItem2 {
  width: 270px;
  background-color: #e9eef2;
}

.goldPackage2 {
  width: 270px;
  background-color: #eeebe6;
}

.platinumPackage2 {
  width: 270px;
  background-color: #dfe3ee;
}

.legenaryPackage2 {
  width: 270px;
  background-color: #f1e8eb;
}

.itemTitle {
  width: 260px;
  font-size: 16px;
  color: #383b3f;
  font-family: 'PT Serif', serif;
  text-align: left;
  margin-left: 20px;
}

.itemDescription {
  width: 260px;
  font-size: 12px;
  color: #696f78;
  font-family: sans-serif;
  text-align: left;
  margin-top: -10px;
  margin-left: 20px;
}

.faqContainer {
  max-width: 1200px;
  height: auto;
  display: inline-block;
  margin-top: 50px;
}

.faqInContent {
  width: 1200px;
  height: 430px;
  background-color: #ebebeb;
  border: 1px solid #c9cccf;
  display: inline-block;
  box-shadow: 2px 2px 2px #161616;
}

.faqInframe {
  width: 1190px;
  height: 420px;
  background-color: #f7f8f9;
  border: 1px solid #c9cccf;
  display: inline-block;
  margin-top: 5px;
  opacity: 0.9;
}

.faqDescription {
  max-width: 1080px;
  height: 430px;
  text-align: center;
  margin-left: 55px;
  padding-top: 10px;
}

.faqContent {
  max-width: 1080px;
  height: 45px;
  border: 1px solid #c9cccf;
  background: rgba(233,233,233,1);
background: -moz-linear-gradient(left, rgba(233,233,233,1) 0%, rgba(203,201,201,0.58) 60%, rgba(215,222,225,0.3) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(233,233,233,1)), color-stop(60%, rgba(203,201,201,0.58)), color-stop(100%, rgba(215,222,225,0.3)));
background: -webkit-linear-gradient(left, rgba(233,233,233,1) 0%, rgba(203,201,201,0.58) 60%, rgba(215,222,225,0.3) 100%);
background: -o-linear-gradient(left, rgba(233,233,233,1) 0%, rgba(203,201,201,0.58) 60%, rgba(215,222,225,0.3) 100%);
background: -ms-linear-gradient(left, rgba(233,233,233,1) 0%, rgba(203,201,201,0.58) 60%, rgba(215,222,225,0.3) 100%);
background: linear-gradient(to right, rgba(233,233,233,1) 0%, rgba(203,201,201,0.58) 60%, rgba(215,222,225,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#d7dee1', GradientType=1 );
box-shadow: 2px 2px 2px #c9cccf;
margin-top: 10px;
}

.faqText {
  font-size: 16px;
  text-align: left;
  font-family: 'PT Serif', serif;
  margin: 0;
  margin-left: 20px;
  margin-top: 10px;
}

/*news*/

.newsSection {
  max-width: 1920px;
  height: 1700px;
  background: url("./game/newsbg.jpg") no-repeat center;
  text-align: center;
}

.newsRow {
  clear: both;
  max-width: 1280px;
  height: auto;
  text-align: center;
  display: inline-block;
}

.newsTabContainer {
  width: 1280px;
  height: auto;
  margin-top: 50px;
}

.newstabActivated {
  width: 205px;
  height: 42px;
  background: url("./game/newstab_hover.png");
  float: left;
}

.newstabAnnouncement {
  width: 205px;
  height: 42px;
  background: url("./game/newstab.png");
  float: left;
  margin-left: -20px;
}

.newstabEvent {
  width: 205px;
  height: 42px;
  background: url("./game/newstab_v2.png");
  float: left;
  margin-left: 5px;
}

.newstabUpdate {
  width: 205px;
  height: 42px;
  background: url("./game/newstab.png");
  float: left;
  margin-left: -20px;
}

.searchBar {
  float: right;
}

.tabText {
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  font-size: 12px;
  margin: 0;
  margin-left: 50px;
  margin-top: 12px;
  opacity: 0.8;
}

#textActivated {
  color: #f9eea0;
  opacity: 1;
}

#textAnnouncement {
  margin-left: 0;
  margin-left: 30px;
}

#textUpdate {
  margin-left: 0;
  margin-left: 65px;
}

.searchBarImage {
  background: transparent;
  border: transparent;
  width: 402px;
  height: 42px;
  background: url("./game/searchBar.png");
}

.newsImage {
  float: left;
  margin: 0;
  margin-top: 30px;
  margin-left: 30px;
}

.newsTextContainer {
  float: left;
  margin-left: 60px;
  margin-top: 50px;

}

.newsTextDate {
  font-size: 14px;
  text-align: left;
  font-family: 'PT Serif', serif;
  margin: 0;
  color: #f7f8f9;
  float: left;
}



.newsTextCategory {
  font-size: 14px;
  text-align: left;
  font-family: 'PT Serif', serif;
  margin: 0;
  color: #f7f8f9;
  float: left;
  margin-left: 15px;
}

.newsTextTitle {
  clear: both;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  font-size: 18px;
  letter-spacing: 1px;
  margin-top: 30px;
  max-width: 750px;
  text-align: left;
}

.newsTextContent {
  max-width: 750px;
  font-family: 'PT Serif', serif;
  color: #f7f8f9;
  text-align: left;
  font-size: 14px;
}


.newsRow2 {
  width: 1280px;
  height: 1380px;
  text-align: center;
  display: inline-block;
  background: url("./game/newFramebg.png");
  margin-top: 20px;
}

.singleNewsFrame {
  max-width: 1260px;
  height: 252px;
  background: url("./game/singleNewsFrame.png");
  margin-left: 10px;
  margin-top: 20px;
}

/*megamenu*/

.popupMenuSection {
  max-width: 1920px;
  height: 960px;
  background: url("./game/megamenubg.jpg");
}

.menu2 {
  max-width: 150px;
  height: auto;
  margin-left: 30px;
  margin-top: 60px;
  float: left;
}


.menuTop2 {
  transform: rotate(45deg);
  float: left;

}

.menuTop3 {
  transform: rotate(-45deg);
  float: left;
  margin-left: -31px;

}

.logoWrapper {
  max-width: 1920px;
  text-align: center;
  height: auto;
}

.megaLogo {
  display: inline-block;
  margin-top: 20px;
  width: 220px;
}

.megamenuSection {
  clear: both;
  max-width: 1920px;
  height: auto;
  text-align: center;
}

.megamenuContainer {
  max-width: 1100px;
  height: auto;
  display: inline-block;
  margin-left: 80px;
  margin-top: 20px;
}

.megaTextTitle {
  font-size: 21px;
  font-family: 'PT Serif', serif;
  color: #f7f8f9;
  margin-top: 80px;
  letter-spacing: 1px;
  opacity: 0.85;
}

.megaTextMenu {
  font-family: 'PT Serif', serif;
  color: #f7f8f9;
  font-size: 16px;
  line-height: 24px;
  margin-top: -5px;
  opacity: 0.85;
}

.megaTextTitleSmall {
  font-family: 'PT Serif', serif;
  color: #f7f8f9;
  font-size: 16px;
  margin: 0;
  margin-top: 30px;
  opacity: 0.85;
  letter-spacing: 1px;
}

.singleMegamenu {
  width: 330px;
  height: 290px;
  background: url("./game/megamenuFrame.png") no-repeat;
  padding: 5px 5px;
  float: left;
}

.singleMegamenuSmall {
  width: 330px;
  height: 97px;
  background: url("./game/megamenuFrameSmall.png") no-repeat;
  padding: 5px 5px;
  float: left;
}

/*account*/

.accountInfoSection {
  max-width: 1920px;
  height: 990px;
  background: url("./game/accountInfobg.jpg");
  text-align: center;
}

.manageAccountSection {
  max-width: 1920px;
  height: 892px;
  background: url("./game/managebg.jpg");
  text-align: center;
}

.accountHistorySection {
  max-width: 1920px;
  height: 989px;
  background: url("./game/historybg.jpg");
  text-align: center;
}

.categorySectionAccountInfo {
  width: 1920px;
  height: 300px;
  background: url("./game/accountInfoBanner.jpg");
  text-align: center;

}

.accountInfoContainer {
  max-width: 1200px;
  height: auto;
  display: inline-block;
  text-align: center;
  margin-top: 80px;
}


.accountInfoOutframe {
  width: 1040px;
  height: 140px;
  background-color: #ebebeb;
  border: 1px solid #c9cccf;
  box-shadow: 2px 2px 2px #c9cccf;
  float: left;
  margin-left: 10px;
  margin-top: 20px;
}

.accountInfoInframe {
  width: 1030px;
  height: 130px;
  background-color: #f7f8f9;
  border: 1px solid #c9cccf;
  margin-top: 5px;
  margin-left: 5px;
  opacity: 0.9;
}

.accountInfoOutframe2 {
  width: 1040px;
  height: 330px;
  background-color: #ebebeb;
  border: 1px solid #c9cccf;
  box-shadow: 2px 2px 2px #c9cccf;
  float: left;
  margin-left: 10px;
  margin-top: 20px;
}

.accountInfoInframe2 {
  width: 1030px;
  height: 320px;
  background-color: #f7f8f9;
  border: 1px solid #c9cccf;
  margin-top: 5px;
  margin-left: 5px;
  opacity: 0.9;
}

.accountInfoOutframeSmall {
  width: 140px;
  height: 140px;
  background-color: #ebebeb;
  border: 1px solid #c9cccf;
  box-shadow: 2px 2px 2px #c9cccf;
  float: left;
  margin-top: 20px;
}

.accountInfoInframeSmall {
  width: 130px;
  height: 130px;
  background-color: #f7f8f9;
  border: 1px solid #c9cccf;
  margin-top: 5px;
  margin-left: 5px;
  opacity: 0.9;
}

.accountInfoText {
  font-family: 'PT Serif', serif;
  font-size: 10px;
  margin-top: 55px;
}

.accountInfoInputWrapper {
  width: 340px;
  float: left;
}

.accountInfoInputWrapper2 {
  width: 690px;
  float: left;
}

.packageAccountImage {
  width: 280px;
  height: 140px;
  background-color: #ebebeb;
  margin-left: 30px;
  margin-top: 20px;
}



.accountInfoTitle {
  font-family: 'PT Serif', serif;
  font-size: 14px;
}

.accountInfoTextInside {
  font-size: 16px;
  color: #383b3f;
  font-family: 'PT Serif', serif;
  margin: 0;
  margin-top: 20px;
}

.accountInfoInput {
  background-color: #ebebeb;
  border: 1px solid #c9cccf;
  width: 310px;
  height: 40px;
  margin-left: 5px;
}

.accountInfoInput2 {
  background-color: #ebebeb;
  border: 1px solid #c9cccf;
  width: 650px;
  height: 40px;
}

/* Signup */

.signupSection {
  max-width: 1920px;
  height: 950px;
  background: url("./game/signupbg.jpg");
  text-align: center;
}

.signTitleWrapper {
  padding-top: 20px;
}

.signTitle {
  font-size: 24px;
  font-family: 'PT Serif', serif;
  color: #f7f8f9;
  letter-spacing: 3px;
  font-weight: 400;
  opacity: 0.9;
}

.lineWrapper {
  margin-top: -25px;
}

.signupContainer {
  display: inline-block;
  max-width: 500px;
  height: auto;
}

.signupWrapper {
  width: 485px;
  height: 616px;
  margin-top: 15px;
  background: url("./game/signupFrame.png");
  box-shadow: 2px 2px 2px #161616;
}

.signupWrapper2 {
  width: 485px;
  height: 488px;
  margin-top: 15px;
  background: url("./game/signinFrame.png");
  box-shadow: 2px 2px 2px #161616;
}

.inputWrapper {
  padding-top: 40px;
}

.inputLabel {
  font-size: 14px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  text-align: left;
  margin: 0;
  margin-left: 42px;
  margin-top: 10px;
}

.signInput {
  width: 400px;
  height: 29px;
  background: transparent;
  border: transparent;
  background: url("./game/signinput.png");
  margin: 0;
  margin-top: -15px;
}

.dateInput {
  width: 135px;
  height: auto;
  float: left;
}

.dateInputWrapper {
  margin-left: 40px;
}

.inputLabel_date {
  font-size: 14px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  text-align: left;
  margin: 0;
  margin-top: 10px;
}

.signInput_date {
  width: 128px;
  height: 29px;
  background: transparent;
  border: transparent;
  background: url("./game/signinput_date.png");
  margin: 0;
  margin-top: -15px;
}

.checkboxWrapper {
  clear: both;
  padding-top: 15px;
}

.checkContainer {
  text-align: left;
  font-size: 10px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
  margin-left: 40px;
}

.checkbox {
  width: 30px;
}

.signupButton {
  margin-top: 40px;
}

.signOption {
  font-size: 12px;
  color: #f7f8f9;
  font-family: 'PT Serif', serif;
  letter-spacing: 1px;
}

.socialLogin {
  display: inline-block;
}

.google {
  width: 160px;
  height: 25px;
  background-color: #ca2128;
  float: left;
  margin: 0 5px;
}

.facebook {
  width: 160px;
  height: 25px;
  background-color: blue;
  float: left;
  margin: 0 5px;
}

.lineWrapper2 {
  margin-top: 0px;
  opacity: 0.8;
}


@media only screen and (max-width: 1680px) {
  #news {
    margin-right: 50px;
  }

}

@media only screen and (max-width: 1490px) {
  #news {
    margin-right: 80px;
  }

}

@media only screen and (max-width: 1400px) {
  .leftMenu {
    display: none;
  }

  .rightMenu {
    display: none;
  }

  .logoSpace {
    margin-left: 23%;
    width: 37%;
  }

}


@media only screen and (max-width: 1280px) {
  .outframeContainer {
    margin-left: 0px;
}

.mediaSection {
  max-width: 1280px;
  height: 1105px;
  text-align: center;
  background: url("./mediabg.jpg") no-repeat center;
}

.outframe  {
  width: 90%;
}





}





@media only screen and (max-width: 900px) {
  .mainTitle {

    text-align: center;
    width: 90%;
    margin-left: 5%;
    height: 150px;
    background: url("./mainTitleFrame.png") no-repeat;
  }



  .mainText {
    padding-left: 0px;
  }

  .mainSubText {
    padding-left: 0px;
  }

  .outframe {
    margin-top: 0px;
    margin-top: 50px;
  }

  .singleNews {
    float: none;
    margin-top: 10px;
  }

  .singleNews2 {
    float: none;
    margin-top: 10px;
  }

  .singleNews3 {
    float: none;
    margin-top: 10px;
  }

  .outframe {
    height: 1310px;
    background: url("./outframe.png");
  }

  .newsSection {
    height: 1600px;
    background: url("./newsbg.jpg") no-repeat center top;
  }

  .viewallButton {
    margin-top: 50px;
  }


}

@media only screen and (max-width: 600px) {
  .mainText {
    font-size: 30px;
    color: #f7f8f9;
    letter-spacing: 2px;
    padding-top: 30px;
  }

  .mainSubText {
    font-size: 18px;
    opacity: 0.8;
    color: #f7f8f9;
    font-family: 'PT Serif', serif;
    letter-spacing: 2px;
    margin-top: -30px;

  }

  .menu {
    max-width: 150px;
    width: 8%
    height: auto;
    margin-left: 10px;
    float: left;
  }
}