/* Font */

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url(../../../fonts/Pretendard-Black.subset.woff2) format('woff2'), url(../../fonts/Pretendard-Black.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url(../../fonts/Pretendard-ExtraBold.subset.woff2) format('woff2'), url(../../fonts/Pretendard-ExtraBold.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url(../../fonts/Pretendard-Bold.subset.woff2) format('woff2'), url(../../fonts/Pretendard-Bold.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url(../../fonts/Pretendard-SemiBold.subset.woff2) format('woff2'), url(../../fonts/Pretendard-SemiBold.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url(../../fonts/Pretendard-Medium.subset.woff2) format('woff2'), url(../../fonts/Pretendard-Medium.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url(../../fonts/Pretendard-Regular.subset.woff2) format('woff2'), url(../../fonts/Pretendard-Regular.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url(../../fonts/Pretendard-Light.subset.woff2) format('woff2'), url(../../fonts/Pretendard-Light.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url(../../fonts/Pretendard-ExtraLight.subset.woff2) format('woff2'), url(../../fonts/Pretendard-ExtraLight.subset.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url(../../fonts/Pretendard-Thin.subset.woff2) format('woff2'), url(../../fonts/Pretendard-Thin.subset.woff) format('woff');
}

@font-face {
    font-family: 'GyeonggiTitle';
    src: url(../../fonts/GyeonggiTitle-Bold.otf) format('opentype');
    font-style: normal;
}

/*-------- css reset -------*/

* {
    margin: 0;
    padding: 0;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td,
tr {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: middle;
}

ol,
ul,
li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

body {
    font-size: 16px;
    font-family: "돋움", 'Dotum', 'Helvetica Neue BD', 'Malgun Gothic', 'Pretendard', sans-serif;
}

fieldset {
    border: medium none;
}

a {
    text-decoration: none;
    cursor: pointer;
}

em {
    font-style: normal;
}

html {
    overflow-x: auto;
    overflow-y: auto;
}

button {
    border: none;
    cursor: pointer;
}

button:hover,
button:active {
    transition: all 0s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.pointer {
    cursor: pointer;
}

/* css reset end */

/* mobile layout */

/* top */

.top {
    position: fixed;
    top: -24px;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem;
    width: calc(100% - 1.5rem);
    height: 4.25rem;
    background: url(../images/bg-header.webp?2) 50% top no-repeat;
    background-size: contain;
    z-index: 1000;
}

.btn-top-event {
    position: absolute;
    top: 2.25rem;
    left: 50%;
    width: 3.5rem;
    height: 3.5rem;
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 900;
    font-size: 0.875rem;
    letter-spacing: -0.5px;
    background: #417aeb;
    border-radius: 10in;
    transform: translateX(-50%);
}

.btn-top-menu {
    display: inline-flex;
    gap: 0.5rem;
    padding-top: 0.625rem;
}

.btn-side-menu {
    width: 1.25rem;
    height: 1.25rem;
    padding-top: 3rem;
    background: url('../images/icon-top-menu.svg') 50% 50% no-repeat;
}

.logo {
    width: 6.75rem;
    height: 3.25rem;
    background: url('../images/news-logo.png?2') 50% 50% no-repeat;
    background-size: contain;
}

.btn-top-member {
    display: inline-flex;
    gap: 0.75rem;
    padding-top: 0.625rem;
}

.btn-top-member>button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Pretendard';
    font-size: 0.875rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.3px;
    background: none;
}

.btn-top-member>button>i {
    font-style: normal;
    width: 1rem;
    height: 1rem;
}

.btn-top-member>button>i>img {
    width: 100%;
}

.btn-top-member .icon-user {
    width: 1rem;
    height: 1rem;
    background: url('../images/icon-user.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

.icon-join {
    width: 0.75rem;
    height: 0.75rem;
    text-align: center;
    background: url('../images/icon-join.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

.btn-top-logout {
    padding: 0.425rem;
    background: #ffffff30 !important;
    border-radius: 10in;
}

.btn-top-logout>i {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    background: url(../images/btn-top-logout.webp?2) 60% 50% no-repeat;
    background-size: 0.875rem;
}

/* side menu */

.nav-gnb {
    position: fixed;
    top: 0;
    left: -100vw;
    padding: 0.875rem;
    width: 0;
    max-width: 56vw;
    height: calc(100vh - 1.75rem);
    z-index: 10;
    background: linear-gradient(to bottom, #f7f8ff 30%, #F7F6F6);
    box-shadow: inset -4px 0 3px #e2e2e2;
    border-right: 2px solid #fff;
    transition: all 0.3s;
    z-index: 2000;
    overflow-y: auto;
}

.nav-gnb-active {
    left: 0;
    width: 100vw;
}

.nav-gnb-active .btn-side-menu {
    filter: brightness(0.7);
}

.side-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.side-login-after {
    margin-bottom: 0.875rem;
}

.side-login-after>div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.side-login-after>div>div {
    font-family: 'Pretendard';
    font-size: 1rem;
    font-weight: 700;
    color: #393939;
}

.side-login-after>div>div>p:last-child {
    font-size: 0.875rem;
    color: #9c9896;
    font-weight: 500;
}

.side-login-after>table {
    width: 100%;
    font-family: 'Pretendard';
    font-size: 0.875rem;
}

.side-login-after>table th span {
    display: inline-block;
    width: 100%;
    line-height: 1.5rem;
    color: #fff;
    font-size: 0.875rem;
    background: #5584fe;
    border: 1px solid #3e85e4;
    border-radius: 10in;
}

.side-login-after>table tr+tr th,
.side-login-after>table tr+tr td {
    padding-top: 0.25rem;
}

.side-login-after>table td {
    padding-right: 0.5rem;
    text-align: right;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 0.425rem;
    margin-bottom: 0.75rem;
}

.menu>li {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    border-bottom: 1px solid #3e6ce4;
}

.menu>li.menu-game {
    background: linear-gradient(135deg, #f9faff, #c4d1ff80 40%, #f9faff 70%);
    border: 1px solid #3e6ce4;
    border-radius: 0.25rem;
}

/*.menu>li:nth-child(4) {
    margin-bottom: 0.75rem;
}*/

.menu>li:last-child {
    border-bottom: none;
}

.menu>li span {
    color: #727272;
    font-size: 0.875rem;
    font-family: 'Pretendard';
    font-weight: 500;
}

.menu>li.menu-game span {
    color: #393939;
    font-weight: 800;
}

.menu li>a {
    display: inline-flex;
    padding: 0 0.425rem;
    width: 100%;
    align-items: center;
}

.menu li>a i {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain !important;
    margin-right: 0.5rem;
}

.menu .icon-notice>i {
    background: url('../images/icon-snb/icon-notice.webp?2') 50% 50% no-repeat;
}

.menu .icon-live>i {
    background: url('../images/icon-snb/icon-live.webp?2') 50% 50% no-repeat;
}

.menu .icon-slot>i {
    background: url('../images/icon-snb/icon-slot.webp?2') 50% 50% no-repeat;
}

.menu .icon-holdem>i {
    background: url('../images/icon-snb/icon-holdem.webp?2') 50% 50% no-repeat;
}

.menu .icon-sport>i {
    background: url('../images/icon-snb/icon-sport.webp?2') 50% 50% no-repeat;
}

.menu .icon-attend > i {
    background: url(../images/icon-snb/icon-attend.webp?14) 50% 50% no-repeat;
}

.menu .icon-request-charge>i {
    background: url('../images/icon-snb/icon-request-charge.webp?2') 50% 50% no-repeat;
}

.menu .icon-request-excharge>i {
    background: url('../images/icon-snb/icon-request-excharge.webp?2') 50% 50% no-repeat;
}

.menu .icon-event>i {
    background: url('../images/icon-snb/icon-event.webp?2') 50% 50% no-repeat;
}

.menu .icon-coupon>i {
    background: url('../images/icon-snb/icon-coupon.webp?2') 50% 50% no-repeat;
}

.menu .icon-history-request>i {
    background: url('../images/icon-snb/icon-history-request.webp?2') 50% 50% no-repeat;
}

.menu .icon-history-point>i {
    background: url('../images/icon-snb/icon-history-point.webp?2') 50% 50% no-repeat;
}

.menu .icon-promotion>i {
    background: url('../images/icon-snb/icon-promotion.webp?2') 50% 50% no-repeat;
}

.menu .icon-mode-pc>i {
    background: url('../images/icon-snb/icon-mode-pc.webp?2') 50% 50% no-repeat;
}

.menu .icon-question>i {
    background: url('../images/icon-snb/icon-question.webp?2') 50% 50% no-repeat;
}

.menu .icon-msg>i {
    background: url('../images/icon-snb/icon-msg.webp?2') 50% 50% no-repeat;
}

.menu .icon-chat>i {
    background: url('../images/icon-snb/icon-chat.webp?2') 50% 50% no-repeat;
}

.menu .icon-roulette>i {
    background: url('../images/icon-snb/icon-roulette.webp?2') 50% 50% no-repeat;
}

.menu .icon-faq>i {
    background: url('../images/icon-snb/icon-faq.webp?2') 50% 50% no-repeat;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.nav-btn>button {
    height: 2.625rem;
    text-align: center;
    color: #fff;
    font-size: 0.875rem;
    font-family: 'Pretendard';
    font-weight: 600;
}

.nav-btn .btn-login {
    flex-grow: 1;
    width: 100%;
    background: linear-gradient(to bottom, #363636, #0f0f0f);
    border: 1px solid #868686;
}

.nav-btn .btn-mypage {
    width: 100%;
    background: linear-gradient(to right, #436dfe, #7592E8);
    border: 1px solid #436efe;
}

.nav-btn .btn-logout {
    width: 100%;
    background: linear-gradient(to bottom, #363636, #0f0f0f);
    border: 1px solid #868686;
}

/* footer */

.footer {
    padding-bottom: 10rem;
}

/* bottom */

.bar-quick-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    width: 100%;
}

.bar-quick-menu>div:first-child,
.bar-quick-menu>div:last-child {
    background: linear-gradient(to bottom, #fa7958, #f5444b);
}

.bottom {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6.9% 2.1vh;
    width: 86.2%;
    max-width: 390px;
    background: url(../images/bg-quick-sevice.webp) 50% bottom no-repeat;
    background-size: contain;
    z-index: 1000;
}

.bottom>button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    text-align: center;
    background: none;
}

.bottom>button>i {
    width: 3.25rem;
    height: 3.25rem;
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.5px;
    background: #417aeb;
    border-radius: 10in;
}

.bottom>button.btn-btm-charge i {
    background: url('../images/btn-btm-charge.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

.bottom>button.btn-btm-home i {
    background: url('../images/btn-btm-home.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

.bottom>button.btn-btm-excharge i {
    background: url('../images/btn-btm-excharge.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

.bottom>button>span {
    font-family: 'Pretendard';
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    background: none;
}

/*contents*/

.contents {
    height: 100%;
}

/* event area */

.banner-area {
    position: relative;
}

.banner-area .img-banner-char {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-indeX: 10;
}

.banner-area .swiper {
    position: absolute;
    top: 50%;
    right: 2.425rem;
    transform: translateY(-50%);
    width: 15rem;
    height: 10rem;
    z-index: 10;
}

.banner-area .swiper-slide {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.banner-area .swiper img {
    max-width: 100%;
    max-height: 116px;
    margin-top: -8%;
}

.banner-area div.swiper-pagination {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
}

.banner-area div.swiper-pagination span.swiper-pagination-bullet {
    width: 0.375rem;
    height: 0.375rem;
    background: #717171;
    opacity: 1;
    transition: all 0.1s;
    border-radius: 10in;
    margin: 0.125rem;
}

.banner-area div.swiper-pagination span.swiper-pagination-bullet-active {
    width: 1.25rem;
    background: linear-gradient(to top, #2c4890, #417aeb)
}

/* game */

.game-area {
    display: flex;
    flex-direction: column;
}

.game-area>div {
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 3.25rem;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* game title */

.title-game {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.title-game>div:first-child {
    line-height: 100%;
    color: #363636;
    font-size: 0.875rem;
    font-family: 'Pretendard';
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 4vw;
}

.title-game>div:first-child>p:first-child {
    line-height: 1.875rem;
    font-size: 1.875rem;
    letter-spacing: -0.5px;
    color: transparent;
    background: linear-gradient(to right, #2c4890, #417aeb);
    background-clip: text;
    margin: 1rem 0 0.625rem;
}

.title-game>div:first-child>p:first-child>span {
    font-weight: 900;
}

.title-game>div:first-child>p:last-child {
    font-size: 0.875rem;
    color: #363636;
}

.title-game>button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 0;
    width: 120px;
    max-width: 12rem;
    height: 2.425rem;
    min-height: 2.425rem;
    color: #fff;
    font-size: 0.875rem;
    font-family: 'Pretendard';
    font-weight: 600;
    overflow: hidden;
    background: linear-gradient(to right, #2c4890, #417aeb);
    clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 calc(100% - 1rem), 0 1rem);
}

div.title-right {
    align-items: flex-end !important;
    text-align: right;
}

/* game img set */

.bg-game-section {
    position: relative;
    width: 100%;
    z-index: 0;
}

.img-game-char {
    position: absolute;
    width: 100%;
    max-width: 254px;
    z-index: 10;
}

/* game live */

.game-live {
    height: 420px;
    margin-top: -190px;
    background: url('../images/bg-main-odd.webp?2') 50% top no-repeat transparent;
    background-size: 100%;
    z-index: 100;
}

.game-live .img-game-char {
    right: -3rem;
    max-width: 284px;
}

.game-live .title-game {
    left: 5%;
    top: 46%;
    transform: translateY(-50%);
}

/* game slot */

.game-slot {
    height: 346px;
    margin-top: -174px;
    background: url('../images/bg-main-even.webp?2') 50% top no-repeat transparent;
    background-size: 100%;
    z-index: 200;
}

.game-slot .img-game-char {
    bottom: -30px;
    left: -2rem;
    max-width: 310px;
}

.game-slot .title-game {
    right: 5%;
    top: 62%;
    transform: translateY(-50%);
}

/* holdem */

.game-holdem {
    height: 366px;
    margin-top: -130px;
    background: url('../images/bg-main-odd.webp?2') 50% top no-repeat transparent;
    background-size: 100%;
    z-index: 250;
}

.game-holdem .img-game-char {
    right: -1.25rem;
    max-width: 300px;
}

.game-holdem .title-game {
    left: 5%;
    top: 46%;
    transform: translateY(-50%);
}

/* game mini */

.game-mini {
    height: 382px;
    margin-top: -152px;
    background: url('../images/bg-main-even.webp?2') 50% top no-repeat transparent;
    background-size: 100%;
    z-index: 300;
}

.game-mini .img-game-char {
    bottom: 1.5rem;
    left: -3em;
    max-width: 320px;
}

.game-mini .title-game {
    right: 5%;
    top: 57%;
    transform: translateY(-50%);
}

/* game sport */

.game-sport {
    height: 332px;
    margin-top: -94px;
    background: url('../images/bg-main-odd.webp?2') 50% top no-repeat transparent;
    background-size: 100%;
    z-index: 400;
    overflow: hidden;
}

.game-sport .img-game-char {
    bottom: -5rem;
    right: -2rem;
    max-width: 320px;
}

.game-sport .title-game {
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

/* board-list */

.contents-bottom {
    padding: 2rem 5% 1rem;
    background: linear-gradient(to bottom, #417aeb, #2c4890);
}

.board-change {
    display: ;
}

.board-list {
    padding: 0.625rem 1rem;
    background: #fff;
    border-radius: 0.75rem;
}

.board-list>li,
.board-list>div {
    display: flex;
    line-height: 2rem;
    gap: 5vw;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 0.875rem;
    color: #363636;
    letter-spacing: -0.5px;
}

.board-list>li>a {
    display: inline-block;
    max-width: 60%;
    color: #363636;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.board-list>div>span:first-child {
    width: 10%;
    text-align: center;
}

.board-list>li>span:last-child,
.board-list>div>span:last-child {
    color: #b8b8b8;
    margin-left: auto;
}

.board-list>div>span:last-child {
    color: #2c4890;
    font-weight: 900;
}

.board-list>li+li+li+li+li+li {
    display: none;
}

/* nobice */

.board-notice {
    margin-bottom: 2rem;
}

.board-notice>p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 600;
}

.board-notice>p>i {
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon-board-notice.webp?2) 50% 50% no-repeat;
    background-size: contain;
    filter: brightness(2);
    margin: 0 auto 0 0.425rem;
    ;
}

.board-notice>p>a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 1.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 500;
    background: linear-gradient(to right, #2c4890, #417aeb);
    border-radius: 10in;
}

.board-top-rank {
    margin-bottom: 2rem;
}

.board-top-rank>p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 600;
}

.board-top-rank>p>i {
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon-board-Top.webp?2) 50% 50% no-repeat;
    background-size: contain;
    filter: brightness(2);
    margin: 0 auto 0 0.425rem;
    ;
}

/* service menu */

.service-menu-area {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.service-menu-area>div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2vw;
}

.service-menu-area>div>button {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.75rem 0.25rem;
    width: 44vw;
    max-width: calc(50% - 0.312rem);
    background: #fff;
    border-radius: 0.5rem;
}

.service-menu-area>div>button>i {
    width: 2rem;
    height: 2rem;
}

i.icon-quick-1 {
    background: url('../../images/renewal/contents/icon-quick-1.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

i.icon-quick-2 {
    background: url('../../images/renewal/contents/icon-quick-2.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

i.icon-quick-3 {
    background: url('../../images/renewal/contents/icon-quick-3.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

i.icon-quick-4 {
    background: url('../../images/renewal/contents/icon-quick-4.webp?2') 50% 50% no-repeat;
    background-size: contain;
}

.service-menu-area>div>button>div {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    color: #363636;
    font-size: 0.75rem;
    font-family: 'Pretendard';
    font-weight: 600;
    letter-spacing: -1px;
}

.service-menu-area>div>button>div>span:last-child {
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(to right, #2c4890 50%, #417aeb);
    color: transparent;
    background-clip: text;
}

/* footer */

.footer {
    padding-top: 2rem;
}

.footer>button {
    display: block;
    width: 84%;
    height: 2rem;
    text-align: center;
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 600;
    font-size: 0.875rem;
    background: linear-gradient(#363636, #272727);
    border: 1px solid #272727;
    margin: 0 auto;
    clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.footer>p {
    font-size: 0.625rem;
    color: #fff;
    text-align: center;
    font-family: 'Pretendard';
    font-weight: 600;
    margin-top: 1rem;
}

/* sub page */

/* slot-banner */

.banner-game {
    position: relative;
    display: block;
    height: 100%;
    min-height: 574px;
    box-shadow: 0 6px 0 #437bfe, 0 10px 10px #00000030;
    border-radius: 2rem;
    overflow: hidden;
    margin-bottom: -2rem;
}

.banner-game {
    background: url('../images/bg-sub-main.webp?2') 50% top no-repeat;
    background-size: cover;
}

.img-banner-slot {
    position: absolute;
    right: 1rem;
    bottom: -62px;
    width: 92%;
    max-width: 892px;
    height: 100%;
    background: url('../images/banner-main-slot.webp?4') right bottom no-repeat;
    background-size: contain;
    animation-duration: 1s;
    animation-name: fade-game-char;
}

.img-banner-casino {
    position: absolute;
    right: -1rem;
    bottom: -102px;
    width: 110%;
    max-width: 900px;
    height: 110%;
    background: url('../images/banner-main-casino.webp?4') right bottom no-repeat;
    background-size: contain;
    animation-duration: 1s;
    animation-name: fade-game-char;
}

.img-banner-holdem {
    position: absolute;
    right: -1rem;
    bottom: 0;
    width: 86%;
    max-width: 892px;
    height: 100%;
    background: url('../images/banner-main-holdem.webp?2') right bottom no-repeat;
    background-size: contain;
    animation-duration: 1s;
    animation-name: fade-game-char;
}

@keyframes fade-game-char {
    0% {
        opacity: 0;
        right: -100vw;
    }
    100% {
        opacity: 1;
        right: -1rem;
    }
}

/* game title */

.banner-game .title-game {
    position: absolute;
    top: 7rem;
    left: 2rem;
    line-height: 100%;
    color: #363636;
    font-family: 'Pretendard';
    font-weight: 600;
    white-space: nowrap;
    animation-duration: 1s;
    animation-name: move-game-title;
}

@keyframes move-game-title {
    0% {
        left: -100vw;
        opacity: 0;
    }
    100% {
        left: 2rem;
        opacity: 1;
    }
}

.banner-game .title-game>p:first-child {
    line-height: 1rem;
    letter-spacing: -0.5px;
    font-size: 0.875rem;
    color: #363636;
}

.banner-game .title-game>p:nth-child(2) {
    line-height: 100%;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: transparent;
    background: linear-gradient(to right, #2c4890, #417aeb);
    background-clip: text;
    margin: 0.875rem 0 0.25rem;
}

.banner-game .title-game>p:nth-child(2)>span {
    font-weight: 900;
}

.banner-game .title-game>p:last-child {
    font-size: 0.875rem;
    color: #363636;
}

/* game banner btns */

.btn-banner-move {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    width: 90%;
}

.btn-banner-move button {
    width: 2.425rem;
    height: 2.425rem;
    background: url('../images/img-arrow.webp?2') 50% 50% no-repeat #fff;
    border-radius: 10in;
    box-shadow: 0 0 0 4px #ffffff75, inset 0 -1px 1px #00000030;
}

.btn-banner-move button:first-child {
    transform: scaleX(-1);
}

/* game banner serarch */

.bar-game-serarch {
    position: absolute;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    width: 90%;
}

.bar-game-serarch input {
    width: 100%;
    height: 2.425rem;
    text-align: center;
    font-size: 1rem;
    font-family: 'Pretendard';
    font-weight: 600;
    background: url('../../images/renewal/contents/icon-serarch.webp?2') 1rem 50% no-repeat #fff;
    border: 1px solid #437bfe;
    border-radius: 10in;
}

/* game-list-base */

.game-list {
    padding: 5rem 0 10rem;
    background: linear-gradient(to bottom, #417aeb, #2c4890);
}

.game-list-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    font-family: 'Pretendard';
    font-weight: 500;
    color: #fff;
    margin-bottom: 1.875rem;
}

.game-list-title>p:first-child {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    width: 100%;
    font-size: 1.425rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.game-list-title>p:first-child>span:first-child {
    flex: 1;
    height: 1rem;
    background: url('../images/img-game-title.webp?2') right 50% no-repeat;
    background-size: contain;
}

.game-list-title>p:first-child>span:last-child {
    flex: 1;
    height: 1rem;
    background: url('../images/img-game-title.webp?2') right 50% no-repeat;
    background-size: contain;
    transform: scaleX(-1);
}

.list-games-area>ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.425rem;
    padding: 0 5%;
    width: 90%;
}

.list-games-area>ul>li {
    flex-grow: 1;
    max-width: calc(32.5% - 0.125rem);
}

.list-games-area>ul>li img {
    width: 100%;
}

@media (orientation: portrait) {
    .top {
        left: 50%;
        transform: translateX(-50%);
        height: 5rem;
        filter: drop-shadow(0 0.25rem 0.25rem #00000040);
    }
    .bottom {
        padding: 0 9.4% 1.25rem;
        max-width: 100%;
        margin: 0 auto;
        filter: drop-shadow(0 -0.125rem 0.125rem #00000030);
    }
}

@media (orientation: landscape) {
    body {
        background: #edf2fa;
    }
    .wrap-mobile {
        max-width: 393px;
        margin: 0 auto;
    }
    .top {
        left: 50%;
        transform: translateX(-50%);
        padding: 0 1rem;
        max-width: calc(393px - 2rem);
    }
    .nav-gnb {
        display: none;
        max-width: 26vw;
        overflow-y: scroll;
        opacity: 0;
    }
    .nav-gnb-active {
        display: block;
        left: calc(30vw - 1.75rem);
        opacity: 1;
    }
    .bar-quick-menu {
        justify-content: center;
    }
    .bottom {
        padding: 0 3.25% 1.25rem;
        max-width: calc(393px - 6.5%);
    }
}