/* 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) 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:#fd434d;
    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;
    background:url('../images/icon-top-menu.svg') 50% 50% no-repeat;
}

.logo {
    width:6.75rem;
    height:1.25rem;
    background:url('../images/logo.webp') 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') 50% 50% no-repeat;
    background-size:contain;
    
}

.icon-join {
    width:0.75rem;
    height:0.75rem;
    text-align:center;
    background:url('../images/icon-join.webp') 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) 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, #fff7f7 30%, #f6f6f6);
    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:#fe6255;
    border: 1px solid #e43e45;
    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 #ffccce;
}

.menu > li.menu-game {
    background:linear-gradient(135deg, #fffcf9, #ffcfc480 40%, #fffcf9 70%);
    border:1px solid #e43e45;
    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') 50% 50% no-repeat;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.menu .icon-history-sport > i {
    background:url('../images/icon-snb/icon-history-sport.webp') 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, #fe434c, #eea175);
    border:1px solid #fe434c;
}

.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:-10px;
    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.svg) 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: #fd434d;
    border-radius: 10in;
}

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

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

.bottom > button.btn-btm-excharge i {
    background:url('../images/btn-btm-excharge.webp') 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:9rem;
    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, #ff424c, #fd7d5a)
}

/* 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;
}

/* 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, #ff424c, #fd7d5a);
    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, #ff424c, #fd7d5a);
    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') 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:386px;
    margin-top:-174px;

    background:url('../images/bg-main-even.webp') 50% top no-repeat transparent;
    background-size:100%;
    z-index:200;
}

.game-slot .img-game-char {
    bottom:0;
    left:-2rem;

    max-width:310px;
}

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

/* holdem */
.game-holdem {
    height:366px;
    margin-top:-130px;

    background:url('../images/bg-main-odd.webp') 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') 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:61%;
    transform: translateY(-50%);
}
/* game sport */
.game-sport {
    height:332px;
    margin-top:-124px;

    background:url('../images/bg-main-odd.webp') 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:55%;
    transform: translateY(-50%);
}

/* board-list */
.contents-bottom {
    padding:2rem 5% 1rem;
    background: linear-gradient(to bottom, #fd7d5a, #ff424c);
}

.board-change {
    display:none;
}

.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:#ff424c;
    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) 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, #ff1723, #FF8601);
    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) 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') 50% 50% no-repeat; 
    background-size:contain;
}
i.icon-quick-2 {
    background: url('../../images/renewal/contents/icon-quick-2.webp') 50% 50% no-repeat; 
    background-size:contain;
}
i.icon-quick-3 {
    background: url('../../images/renewal/contents/icon-quick-3.webp') 50% 50% no-repeat; 
    background-size:contain;
}
i.icon-quick-4 {
    background: url('../../images/renewal/contents/icon-quick-4.webp') 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, #ff1723 50%, #FF8601);
    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 #fe434e, 0 10px 10px #00000030;
    border-radius:2rem;

    overflow:hidden;
    margin-bottom:-2rem;
}

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

.img-banner-slot {
    position:absolute;
    right:-1rem;
    bottom:0;

    width:92%;
    max-width:892px;
    height:100%;
    background:url('../images/banner-main-slot.webp') right bottom no-repeat;
    background-size:contain;

    animation-duration:1s;
    animation-name: fade-game-char;
}

.img-banner-casino {
    position:absolute;
    right:-1rem;
    bottom:0;

    width:92%;
    max-width:892px;
    height:100%;
    background:url('../images/banner-main-casino.webp') 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') 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, #ff424c, #fd7d5a);
    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') 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') 1rem 50% no-repeat #fff;
    border:1px solid #fe434e;
    border-radius:10in;
}

/* game-list-base */
.game-list {
    padding: 5rem 0 10rem;
    background: linear-gradient(to bottom, #fd7d5a, #ff424c);
}

.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') 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') 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%);
    }
}

/* holdem */
.list-games-area.holdem .visual {
  position:relative;
  display:block;
  width:90%;
  max-width:860px;
  min-height:65vw;
  max-height:758px;
  margin:0 5%;
  background:url('../images/bg-holdem-sub.webp') 50% 50% no-repeat;
  background-size:contain;
}

.list-games-area.holdem .visual > a {
  position:absolute;
  left:50%;
  bottom:16%;
  transform: translateX(-50%);            
  
  width:100%;
  max-width:36vw;
  height:10vw;
  
  background:url('../images/btn-holdem-sub.webp') 50% 50% no-repeat;
  background-size:contain;
}

.list-games-area.holdem .swiper {
  padding:5%;
  margin:0 5%;
  background: linear-gradient(#fd4453, #bd1e2ad6);
  
  clip-path: polygon(0.5rem 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0.5rem 100%, 0 calc(100% - 0.5rem), 0 0.5rem);
}

.list-games-area.holdem .swiper img {
  width:100%;
}