@import url('https://fonts.googleapis.com/css?family=Kanit:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body {
  font-family: 'Kanit', sans-serif !important;
}

.image-19-icon {
  position: relative;
  width: 132px;
  height: 19px;
  object-fit: cover;
}
.marketplace {
  position: relative;
  text-transform: uppercase;
}
.image-19-parent,
.marketplace-wrapper {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.marketplace-wrapper {
  text-decoration: none;
  border-radius: var(--br-5xs);
  background: linear-gradient(90deg, #23a9d0, #07d078);
  width: 170px;
  flex-shrink: 0;
  padding: var(--padding-3xs) var(--padding-6xl);
  box-sizing: border-box;
  justify-content: center;
  color: white;
}
.image-19-parent {
  align-self: stretch;
  background-color: var(--color-gray-300);
  padding: var(--padding-3xs);
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}
.appicon-tsxast-black-1 {
  position: relative;
  width: 61px;
  height: 48px;
  object-fit: cover;
}
.div {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: inline-block;
}
.a {
  text-decoration: none;
  position: relative;
  width: 85px;
  height: 24px;
  color: inherit;
}
.frame-wrapper,
.parent {
  justify-content: flex-start;
}
.parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 31px;
}
.frame-wrapper {
  color: var(--color-white);
}
.appicon-tsxast-black-1-parent,
.frame-container,
.frame-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.frame-container {
  justify-content: flex-start;
  gap: 43px;
}
.appicon-tsxast-black-1-parent {
  align-self: stretch;
  background-color: var(--color-gray-500);
  /* overflow: hidden; */
  padding: var(--padding-3xs);
  justify-content: space-between;
  z-index: 99999;
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  z-index: 999999;
}
.logo-tsx-2-icon {
  position: relative;
  width: 381px;
  height: 300px;
  object-fit: cover;
}
.new-summoner-soleta,
.welcome-to-chronicles {
  position: relative;
  text-shadow: 0 4px 8px #000;
}
.welcome-to-chronicles {
  font-size: 24px;
}
.new-summoner-soleta-has-arrive-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
  width: 100%;
}
.image-12-icon {
  position: relative;
  width: 216px;
  height: 73px;
  object-fit: cover;
}
.image-12-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  /* width: 100%; */
}
.image-14-icon,
.image-15-icon {
  position: relative;
  width: 139px;
  height: 41px;
  object-fit: cover;
}
.image-15-icon {
  width: 140px;
}
.frame-parent2,
.image-14-parent,
.logo-tsx-2-parent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.image-14-parent {
  flex-direction: row;
  gap: var(--gap-3xs);
}
.frame-parent2,
.logo-tsx-2-parent {
  flex-direction: column;
}
.frame-parent2 {
  gap: var(--gap-5xs);
  /* width: 100%; */
}
.logo-tsx-2-parent {
  flex: 1;
  gap: 18px;
  width: 100%;
}
.vector-icon {
  width: 18px;
  height: 33px;
}
.facebook,
.vector-icon {
  position: relative;
}
.vector-parent {
  text-decoration: none;
  flex: 1;
  border-radius: var(--br-4xs);
  background-color: var(--color-gray-400);
  /* height: 90px; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* gap: var(--gap-6xs); */
  color: inherit;
}
.vector-icon1,
.vector-icon2,
.vector-icon3 {
  position: relative;
  width: 47px;
  height: 33px;
}
.vector-icon2,
.vector-icon3 {
  width: 43px;
}
.vector-icon3 {
  width: 39px;
}
.frame-parent3 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-6xs);
}
.banner-new-ma-696x348-1-icon {
  position: relative;
  width: 361px;
  height: 180px;
  object-fit: cover;
}
.banner-gacha-20230905-2-696x34-icon {
  position: relative;
  width: 364px;
  height: 183px;
  object-fit: cover;
}
.wrapper {
  border-radius: 4px;
  background-color: #4ecaff;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  padding: var(--padding-3xs);
  align-items: center;
  justify-content: center;
}
.server {
  flex: 1;
  position: relative;
  color: var(--color-black);
}
.frame-parent4 {
  align-self: stretch;
  border-radius: 6px;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  padding: var(--padding-3xs);
  align-items: center;
  justify-content: center;
  gap: var(--gap-3xs);
}
.banner-new-ma-696x348-1-parent,
.instance-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* width: 100%; */
}
.banner-new-ma-696x348-1-parent {
  border-radius: var(--br-4xs);
  background-color: rgba(0, 0, 0, 0.54);
  padding: var(--padding-3xs);
  gap: var(--gap-xs);
  color: var(--color-white);
  width: 100%;
}
.instance-parent {
  gap: 16px;
  font-size: var(--font-size-xs);
  color: var(--color-darkgray);
  /* width: 100%; */
}
.frame-div,
.frame-parent1 {
  /* overflow: hidden; */
  /* flex-shrink: 0; */
  display: flex;
  flex-direction: row;
  align-items: center;
}
.frame-parent1 {
  max-width: 1712px;
  width: 100%;
  justify-content: flex-start;
  gap: 17px;
  /* padding: 0 210px; */
}
.frame-div {
  align-self: stretch;
  min-height: 835px;
  padding: 25px 25px;
  box-sizing: border-box;
  justify-content: center;
  z-index: 1;
  font-size: 40px;
  color: var(--color-white);
  margin-top: 50px;
  padding-top: 120px;
  overflow: hidden;
}
.container,
.group {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.container {
  gap: var(--gap-3xs);
  font-size: var(--font-size-base);
}
.group {
  gap: 14px;
}
.frame-wrapper1 {
  margin: 0 !important;
  position: absolute;
  top: 68px;
  left: 0;
  background-color: var(--color-gray-500);
  width: 1920px;
  overflow: hidden;
  display: none;
  flex-direction: row;
  padding: var(--padding-5xl) 56px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  z-index: 2;
  font-size: var(--font-size-xl);
}
.frame-group {
  align-self: stretch;
  /* height: 893px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background-image: url(../public/x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  color: var(--color-darkgray);
}
.image-20-icon {
  position: relative;
  width: 277px;
  height: 20px;
  object-fit: cover;
}
.chinesegamer-international-cor {
  align-self: stretch;
  position: relative;
  display: inline-block;
  /* height: 13px; */
  flex-shrink: 0;
}
.chinesegamer-international-cor-parent,
.image-20-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.chinesegamer-international-cor-parent {
  align-self: stretch;
  gap: var(--gap-5xs);
}
.image-20-parent {
  flex: 1;
  gap: 29px;
}
.vector-icon4 {
  position: relative;
  width: 17px;
  height: 11px;
}
.english-parent,
.frame-parent5 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.english-parent {
  background-color: var(--color-black);
  border: 1px solid var(--color-gray-200);
  box-sizing: border-box;
  width: 154px;
  flex-shrink: 0;
  padding: var(--padding-3xs);
  align-items: center;
  justify-content: space-between;
  color: var(--color-dimgray);
}
.frame-parent5 {
  align-self: stretch;
  background-color: var(--color-gray-300);
  padding: var(--padding-5xl);
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-6xs);
  font-size: var(--font-size-xs);
  color: var(--color-gray-100);
}
.frame-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  font-size: var(--font-size-base);
  color: var(--color-white);
  
}
.frame-parent,
.text {
  position: relative;
}
.instance-root,
.text-wrapper {
  display: flex;
  justify-content: flex-start;
}
.text-wrapper {
  background-color: var(--color-black);
  border: 1px solid var(--color-gray-200);
  box-sizing: border-box;
  width: 154px;
  overflow: hidden;
  flex-direction: row;
  padding: var(--padding-3xs);
  align-items: center;
}
.instance-root {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  text-align: left;
  font-size: var(--font-size-xs);
  color: var(--color-dimgray);
  
}

.a-001 {
    width: 470px !important
}

.nav-custom .navbar{
padding: 0;
    background-color: #ffffff00 !important;
}


.nav-custom  .nav-link{
  color: white !important;
}


    #redirectSelect {
        width: 130px !important
    }

@media (min-width: 1200px) {}
@media (min-width: 992px)and (max-width:1199px) {}
@media (min-width: 768px)and (max-width:991px) {
  .frame-group {
  background-image: url(../public/bg-main-sm.png);
}}
@media (min-width: 576px)and (max-width:767px) {
  .frame-group {
  background-image: url(../public/bg-main-sm.png);
}}
@media (max-width: 575px) {
  .banner-new-ma-696x348-1-parent, .instance-parent {
  
    width: 100%;
}
    .a-001 {
    width: 100%
}

  .frame-group {
  background-image: url(../public/bg-main-sm.png);
}

  .wrapper {
    display:none
  }
  .vector-parent {
    min-height: 88px;
  }
}
.section--footer{
    height:240px;
    background:#1b1919
}
.section--footer .container{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%
}
@media (orientation: portrait){
    .section--footer{height:325px}
}
@media (max-width: 700px){
    .section--footer{height:325px}
}
@media (max-width: 700px){
    .section--autoheight{height:auto;height:2919px}
    .section--autoheight .section__background{position:absolute;top:0;left:0}
    .section--autoheight .section__background img{object-position:top center}
    .section--autoheight .section__content{position:relative;padding:100px 0 140px;position:absolute;padding:0}
}
@media (orientation: portrait){.section--autoheight{height:auto;height:2919px}
    .section--autoheight .section__background{position:absolute;top:0;left:0}
    .section--autoheight .section__background img{object-position:top center}
    .section--autoheight .section__content{position:relative;padding:100px 0 140px;position:absolute;padding:0}
}

.frame1 .btn-logo{
    background:url("/images/bg.webp");
    width:179px;
    height:202px;
    position:absolute;
    top:35px;
    left:47%}
@media (max-width: 700px){
    .frame1 .btn-logo{
        top:50px;
        left:0;
        right:unset;
        transform:scale(0.7);
        transform-origin:top
    }
}
@media (orientation: portrait){
    .frame1 .btn-logo{
        top:50px;
        left:0;
        right:unset;
        transform:scale(0.7);
        transform-origin:top
    }
}




/*----------------------------FOOTER---------------------------------*/
#footer{
    width: 100%;
    background: #000000;
}
#footer-content{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 20px;;
}
.vtc-logo{
    margin: 0 auto;
    width: 40%;
}
.vtc-logo img{
    display: block;
    margin: 0 auto;
}
.footer-text{
    color: #ffffff;
    line-height: 20px;
}
.footer-text a{
    color: #ffffff;
    text-decoration: none;
}
.footer-text a:hover{
    color: #ffffff;
    text-decoration: underline;
}
@media only screen and (min-width : 1200px) {
    .footer-text{
        line-height: 24px;
    }
    #footer-content {
        display: flex;
        flex-direction: row;
        text-align: left;
        justify-content: center;
        align-items: center;
        width: 73%;
        margin: 0 auto;
    }
}