* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  font-size: 10px;
}

body {
  font-size: 1.6rem;
}

body {
  background-color: #ebeff0;
}

body {
  font-family: "NotoSansKR";
}

:lang(en-us) body {
  font-family: "NotoSansKR";
}

:lang(zh-tw) body {
  font-family: "NotoSansTC";
}

:lang(zh-cn) body {
  font-family: "NotoSansSC";
}

:lang(ko-kr) body {
  font-family: "NotoSansKR";
}

:lang(vi-vn) body {
  font-family: "NotoSansKR";
}

.off {
  display: none !important;
}

.div-for-placeholder {
  position: relative;
}

input + .placeholder {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

input:focus + .placeholder,
input:valid + .placeholder {
  display: none;
}

.block-section {
  overflow: hidden;
  margin: 0.9rem auto;
  background-color: white;
  border: 1px solid #d7dadf;
  border-left: none;
  border-right: none;
}

section {
  border: 1px solid #d6d9de;
  background-color: white;
}

.section1 {
  overflow: hidden;
  border-top: none;
}

:lang(en-us) .section1 {
  background: url(../../img/main/locale/en-us/bg1.png) no-repeat left top/100%
    white;
}

:lang(zh-tw) .section1 {
  background: url(../../img/main/locale/zh-tw/bg1.png) no-repeat left top/100%
    white;
}

:lang(zh-cn) .section1 {
  background: url(../../img/main/locale/zh-cn/bg1.png) no-repeat left top/100%
    white;
}

:lang(ko-kr) .section1 {
  background: url(../../img/main/locale/ko-kr/bg1.png) no-repeat left top/100%
    white;
}

:lang(vi-vn) .section1 {
  background: url(../../img/main/locale/vi-vn/bg1.png) no-repeat left top/100%
    white;
}

.section1 .main-rolling-wrap {
  margin-top: 8.4rem;
  position: relative;
  text-align: center;
}

.swiper-container,
.swiper-container * {
  z-index: 0;
}

.swiper-container img {
  vertical-align: top;
}

.section1 .main-rolling-wrap .swiper-container img {
  width: 100%;
  max-width: 568px;
}

.section1 .main-rolling-wrap .swiper-pagination-bullet {
  width: 1.2rem;
  height: 1.2rem;
  background-color: white;
  opacity: 0.4;
}

.section1 .main-rolling-wrap .swiper-pagination-bullet-active {
  width: 1.2rem;
  height: 1.2rem;
  background-color: white;
  opacity: 1;
}

.section1 .main-rolling-wrap .control-panel {
  position: absolute;
  bottom: 2.5rem;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 3rem;
}

.section1 .main-rolling-wrap .btn-play,
.section1 .main-rolling-wrap .btn-stop {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../../img/main/btn-play.png) no-repeat center/.8rem 0.9rem
    rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  font-size: 0;
}

.section1 .main-rolling-wrap .btn-stop {
  background: url(../../img/main/btn-stop.png) no-repeat center/.7rem 0.9rem
    rgba(0, 0, 0, 0.3);
}

.section1 .main-rolling-wrap .slide-info {
  display: block;
  width: 6.3rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 7.5rem;
  margin-left: 0.5rem;
  text-align: center;
  font-family: Roboto;
  font-size: 1.2rem;
  font-weight: normal;
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

.section1 .main-rolling-wrap .slide-info .realindex {
  font-weight: bold;
  color: white;
}

.section1 .swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 2rem;
}
/* 
.section1 .main-rolling-wrap .banner-mask {
    height: 7.1rem;
    background-image: url(../../img/main/banner-mask.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    border: 0.1rem solid #f3f5f6;
    border-top: none;
} */

.section1 .btn-login {
  display: block;
  width: 33rem;
  height: 5.5rem;
  margin: 2.5rem auto;
  text-decoration: none;
  text-align: center;
  line-height: 5.5rem;
  background-color: #4b46fa;
  border-radius: 5rem;
  font-size: 2rem;
  font-weight: 500;
  color: white;
  box-shadow: 0 10px 10px rgba(75, 70, 250, 0.5);
}

.section1 .player-info {
  width: 33rem;
  display: flex;
  align-items: center;
  margin: 0 auto;
  font-size: 1.7rem;
  font-weight: 500;
  color: #434343;
}

.section1 .player-info.notice {
  justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: 2.3rem;
}

.section1 .player-info .nickname {
  flex: 1;
}

.section1 .player-info .coupon {
  display: flex;
  align-items: center;
  width: 9.6rem;
  height: 4rem;
  background: url(../../img/main/bg-coupon.png) center/cover no-repeat;
  padding-left: 3.1rem;
  text-align: center;
  text-decoration: none;
  font-family: NotoSansCJKkr;
  font-size: 1.3rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.125rem;
  text-align: center;
  color: #fff;
}

.section1 .player-info .exclamation-icon {
  min-width: 2.2rem;
  min-height: 2.2rem;
  margin-right: 0.8rem;
  background: url(../../img/main/shop-ex-icon.png) no-repeat center/contain;
}

.section1 .player-info .notice-msg {
  font-weight: 400;
}

.section1 .player-info .icon-vip {
  width: 6.5rem;
  height: 5.7rem;
  margin-left: -0.5rem;
  margin-right: 0.5rem;
  background: url(../../img/main/icon-vip/vip1_.png) no-repeat center
    bottom/contain;
}

.section1 .player-info .icon-vip.vip1 {
  background: url(../../img/main/icon-vip/vip1.png) no-repeat center
    bottom/contain;
}

.section1 .player-info .icon-vip.vip2 {
  background: url(../../img/main/icon-vip/vip2.png) no-repeat center
    bottom/contain;
}

.section1 .player-info .icon-vip.vip3 {
  background: url(../../img/main/icon-vip/vip3.png) no-repeat center
    bottom/contain;
}

.section1 .player-info .icon-vip.vip4 {
  background: url(../../img/main/icon-vip/vip4.png) no-repeat center
    bottom/contain;
}

.section1 .player-info .icon-vip.vip5 {
  background: url(../../img/main/icon-vip/vip5.png) no-repeat center
    bottom/contain;
}

.section1 .player-info .icon-vip.vip6 {
  background: url(../../img/main/icon-vip/vip6.png) no-repeat center
    bottom/contain;
}

.section1 .player-info .icon-vip.vip7 {
  background: url(../../img/main/icon-vip/vip7.png) no-repeat center
    bottom/contain;
}

.section1 .info-wrap .wcoin-wrap,
.section1 .info-wrap .wpoint-wrap {
  width: 33rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  background-color: #060826;
  border-radius: 5rem;
  margin: 0 auto;
  margin-bottom: 1rem;
  font-family: Roboto;
  font-size: 1.3rem;
  font-weight: normal;
  color: white;
}

.section1 .info-wrap .wpoint-wrap {
  margin-bottom: 2.5rem;
}

.section1 .info-wrap .wcoin-wrap .wcoin,
.section1 .info-wrap .wpoint-wrap .wpoint {
  flex: 1;
  text-align: right;
  padding-right: 2rem;
  font-size: 1.8rem;
  font-weight: 500;
  color: #f5c42d;
}

.section1 .info-wrap .wpoint-wrap .wpoint {
  color: #73bbff;
}

.section1 .info-wrap .wcoin-wrap::before,
.section1 .info-wrap .wpoint-wrap::before {
  content: "";
  display: block;
  width: 3.8rem;
  height: 3.8rem;
  background: url(../../img/main/wcoin.png) no-repeat center/contain;
  padding: 0 1rem 0 0.5rem;
}

.section1 .info-wrap .wpoint-wrap::before {
  background: url(../../img/main/wpoint.png) no-repeat center/contain;
}

.section2,
.section3,
.section4 {
  overflow: hidden;
  margin-top: 0.9rem;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.3rem 1.5rem 1.5rem;
  font-size: 2.3rem;
  font-weight: bold;
  color: #313131;
}

.section-title a {
  font-size: 1.2rem;
  font-weight: 500;
  color: #404040;
  text-decoration: none;
}

.section2 .notice-list {
  padding: 0 1.5rem 2.5rem;
  list-style: none;
}

.section2 .notice-list li {
  height: 6.5rem;
  border-top: 1px solid #e5e5e5;
}

.section2 .notice-list li:last-child {
  border-bottom: 1px solid #e5e5e5;
}

.section2 .notice-list li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  gap: 0.8rem;
}

.section2 .notice-list li .title {
  width: calc(100vw - 3rem);
  font-size: 1.5rem;
  font-weight: 500;
  color: #313131;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.section2 .notice-list li .date {
  font-size: 1.2rem;
  font-weight: normal;
  color: #afb3c5;
}

.section3 .tab-servicegame {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}

.section3 .tab-servicegame a {
  font-size: 1.5rem;
  font-weight: 500;
  padding: 0.5em 1em;
  text-decoration: none;
  background-color: #ebeff0;
  color: #959595;
  border-radius: 1em;
}

.section3 .tab-servicegame a.sel {
  background-color: #313131;
  color: white;
}

.section3 .slots,
.section3 .tables {
  padding-bottom: 1.5rem;
}

.section3 .swiper-slide {
  width: 16.2rem;
}

.section3 .swiper-slide img {
  width: 100%;
}

.section4 .shop-items {
  padding-bottom: 4.9rem;
}

.section4 .item-padding {
  padding: 0.7rem 2.7rem 2.7rem;
  background-image: url(../../img/main/shop-card-bg.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}
.section4 .item-container {
  position: relative;
  width: 1.5rem;
  height: 24rem;

  padding: 0.7rem 2.7rem 2.7rem;
}
.section4 .swiper-container {
  padding: 0 1.5rem;
  overflow: visible;
}
.section4 .swiper-slide {
  width: 15rem;
}

.section4 .link-container {
  width: 15rem;
  height: 16rem;
  border-radius: 1rem;
  border: 2px solid #bfbfbf;
  transition: border 0.3s, background-color 0.3s;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.section4 .link-container.active {
  border: 2px solid #959595;
  background-color: #f7f7f7;
}

.section4 .link-container:first-child .xsolla {
  width: 6.3rem;
}

.section4 .link-container:first-child .razer-gold {
  width: 11.3rem;
}

.section4 .link-container:first-child .cocos {
  width: 6.6rem;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
}

nav.dark {
  background-color: rgba(0, 0, 0, 0.5);
}

nav > a {
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 500;
  color: white;
}

nav .btn-menu {
  width: 2rem;
  height: 1.8rem;
  background: url(../../img/main/menu.png) no-repeat center/contain;
}

nav .sub-btn.on {
  color: #58d7fc;
}

nav .btn-lang {
  position: relative;
}

nav select {
  width: 1.9rem;
  height: 1.9rem;
  opacity: 0;
}

nav .lang::before {
  position: absolute;
  content: "";
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  background: url(../../img/main/language.png) no-repeat center/contain;
  pointer-events: none;
}

.sidemenu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  overflow: auto;
  transition: left 0.3s ease-out;
}

.sidemenu.hide {
  left: -100%;
  transition: left 0.3s ease-out;
}

.sidemenu .title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6rem;
  padding: 2.3rem;
  font-size: 2.3rem;
  font-weight: bold;
  color: #464646;
}

.sidemenu .title-bar .x-close {
  width: 2.1rem;
  height: 1.9rem;
  background: url(../../img/main/x-close.png) no-repeat center/contain;
}

.sidemenu .menus {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between;
    height: 43rem; */
  gap: 2.2rem;
  padding: 2.5rem 2.2rem 2.8rem 2.2rem;
  border-bottom: 1px solid #d6d9de;
}

.sidemenu .menus > a {
  display: block;
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: 500;
  color: #1b1b1b;
}

.sidemenu .menus > a.on {
  color: #0464db;
}

.sidemenu .menus > .coupon {
  display: flex;
  position: relative;
  align-items: center;
  height: 5.5rem;
  padding: 1.2rem 1.2rem;
  background-color: #1572e8;
  border-radius: 0.7rem;
  font-size: 2.2rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.11;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

.sidemenu .menus > .coupon img {
  width: 5.8rem;
  height: 3.1rem;
  margin-right: 1.9rem;
}

.sidemenu .logout {
  display: block;
  padding: 0 2.2rem;
  text-decoration: none;
  height: 6rem;
  line-height: 6rem;
  font-size: 2rem;
  font-weight: 500;
  color: #626262;
  border-bottom: 1px solid #d6d9de;
}

.sidemenu .download,
.sidemenu .sns-channels {
  padding: 2.5rem 2.2rem 2.2rem 2.2rem;
  border-bottom: 1px solid #d6d9de;
}

.sidemenu .download-title,
.sidemenu .sns-title {
  font-size: 2rem;
  font-weight: 500;
  color: #626262;
}

.sidemenu .download-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.6rem;
}

.sidemenu .btn-playstore,
.sidemenu .btn-appstore {
  width: 15rem;
  height: 4.5rem;
  text-decoration: none;
  font-size: 0;
  background: url(../../img/main/btn-googleplay.png) no-repeat center/contain;
}

.sidemenu .btn-appstore {
  background: url(../../img/main/btn-appstore.png) no-repeat center/contain;
}

/* .sidemenu .btn-playstore::before{
    content: "";
    display: block;
    width: 4.2rem;
    height: 4.6rem;
    background: url(../../img/main/icon-playstore.png) no-repeat center/contain;
    margin-right: 1.8rem;
}

.sidemenu .btn-appstore::before{
    content: "";
    display: block;
    width: 3.8rem;
    height: 4.8rem;
    background: url(../../img/main/icon-appstore.png) no-repeat center/contain;
    margin-right: 2.5rem;
} */

.sidemenu .sns-icons {
  margin-top: 1.9rem;
  display: flex;
}

.sidemenu .icon-facebook,
.sidemenu .icon-line {
  display: block;
  width: 4.1rem;
  height: 4.1rem;
  margin-right: 1rem;
  background: url(../../img/main/icon-facebook.png) no-repeat center/contain;
  font-size: 0;
}

.sidemenu .icon-line {
  background: url(../../img/main/icon-line.png) no-repeat center/contain;
}

.sidemenu .sidemenubanner img {
  width: 100%;
  vertical-align: top;
}