@charset "utf-8";

/****************************************************************************************************************************************
game-banner 시작
*****************************************************************************************************************************************/
.game-banner {position: relative; margin:0 auto 20px auto; padding:0; width: 100%; border-radius: 5px; overflow: hidden;}
.game-banner > .gameBanner-img {width: 100%;}

/****************************************************************************************************************************************
section 시작
*****************************************************************************************************************************************/
section {position: relative; margin:10px auto 20px auto; padding:0; width: 100%; text-align: center;}

/* main-tit */
.main-tit {position: relative; margin:20px auto 10px auto; padding:0 10px; width: 100%; height: 48px; display: flex; justify-content: space-between; align-items: center; gap:5px; background:linear-gradient(90deg, #001854 10%, #3f91fd 100%); border-radius: 8px;}
.main-tit > h3 {text-align: left;}
.main-tit > h3 > img {margin-right:5px; width: 40px;}
.main-tit > h3 > span {font-size:22px; font-weight: bold;}
.main-tit > .btn-more {position: relative; margin:0; padding:8px 20px; font-weight: 600; color:#000; background:linear-gradient(90deg,#fff 0, #c5972a 100%); border-radius: 20px;}
.main-tit > .btn-search {position: relative; margin:0; padding:8px 20px; display: flex; justify-content: center; align-items: center; gap: 5px; font-weight: 600; color:#000; background:linear-gradient(90deg,#fff 0, #c5972a 100%); border-radius: 20px;}

/* bg-list */
.bg-list {position: relative; margin:0 auto; padding:20px 20px 30px 20px; width: 100%; background: #001343; border-radius: 8px;}
.bg-list-2 {position: relative; margin:0 auto; padding:20px 20px 30px 20px; width: 100%; background: #000a22; border-radius: 8px;}

.sub-tit {position: relative; margin:0 auto 20px auto; padding:5px 10px; width: 100%; display: flex; justify-content: center; align-items: center; gap:5px;}
.sub-tit > img {margin:0 5px; width: 50px;}
.sub-tit > span {font-size: 28px;}

/* online-casinoList */
ul.online-casinoList {position: relative; margin:0; padding:0; width:100%; display: flex; justify-content:center; align-items: center; gap: 20px;}
ul.online-casinoList > li {position: relative; margin:0; padding:0; width: calc(100% / 6); border-radius: 5px; overflow: hidden; transition: 0.2s; cursor: pointer;}
ul.online-casinoList > li > img {width: 100%;}
.btn-hover {display: none; position: absolute; top:0; left:0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); transition: 0.2s;}
.btn-hover > button {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); padding:5px 5px; min-width: 100px; border-radius: 5px; transition: 0.2s;}

/* main-game */
.main-game {position: relative; margin:10px 0; padding:0; width: 100%; display: flex; justify-content: center; gap: 20px;}
.main-game > .big-game {flex: 1; position: relative; border-radius: 5px; overflow: hidden;}
.main-game > .big-game > img {width: 100%;}
.main-game > .big-game > p {position: absolute; bottom: 0; left:0; right:0; z-index: 2; margin:0 auto; padding:5px 8px; width:100%; text-align: left; color:#fff; background: rgba(0, 0, 0, 0.5);}

ul.maingame-list {flex: 2; position: relative; margin:0 -10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
ul.maingame-list > li {position: relative; margin:0; padding:0; width: calc(100% / 4 - 20px); border-radius: 5px; overflow: hidden; cursor: pointer;}
ul.maingame-list > li > p {position: absolute; bottom: 0; left:0; right:0; z-index: 2; margin:0 auto; padding:5px 8px; width:100%; text-align: left; color:#fff; background: rgba(0, 0, 0, 0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
ul.maingame-list > li > img {width: 100%;}

.provider-zone {position: absolute; left:0; top:0; margin:0; padding:2px 5px 5px 5px; background: rgba(0,0,0,0.5); border-radius: 5px;}
.dot-online {display: inline-block; width: 8px; height: 8px; background: #1f1; border: 1px solid #1f1; border-radius: 100%; animation: blinker 1s linear infinite;}
.text-online {display: inline-block; font-size: 13px; font-weight: 600;}

@keyframes blinker {
    50% {opacity: 0.4}
}

@media (hover: hover) and (pointer: fine) {
    .main-tit > .btn-more:hover, 
    .main-tit > .btn-search:hover {filter: brightness(0.9);}

    ul.online-casinoList > li:hover .btn-hover,
    .main-game > .big-game:hover .btn-hover,
    ul.maingame-list > li:hover .btn-hover {display: block;}
}

/****************************************************************************************************************************************
게임공통 시작
*****************************************************************************************************************************************/
/* provider-tit */
.provider-tit {position:relative; margin:20px 0; padding:10px 10px; width: 100%; height: 90px; display: flex; justify-content: flex-start; align-items: center; gap:10px; background: #000e32;}
.provider-tit > img {height:70px;}
.provider-tit > span {font-size: 26px; font-weight: 500;}

ul.game-list {position: relative; margin: 0 -20px 0 0; display: flex; flex-wrap: wrap; justify-content:flex-start; gap: 20px;}
ul.game-list > li {position: relative; margin:0; padding:0; width: calc(100% / 6 - 20px); border-radius: 5px; overflow: hidden; cursor: pointer;}
ul.game-list > li > img {width: 100%; aspect-ratio: 29 / 26; object-fit: cover;}
/* 배너 카드 위 벤더 로고 (TVBET·El Casino 전용 — 뷰가 키를 골라 img.vendor-logo 를 넣는다) */
ul.game-list > li > img.vendor-logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: auto; height: auto; aspect-ratio: auto; max-width: 70%; max-height: 30px; object-fit: contain; padding: 4px 8px; box-sizing: border-box; background: rgba(0, 0, 0, .6); border-radius: 4px;}
ul.game-list > li > p {position: absolute; bottom: 0; left:0; right:0; z-index: 2; margin:0 auto; padding:5px 8px; width:100%; text-align: left; color:#fff; background: rgba(0, 0, 0, 0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.game-neme {position: absolute; bottom: 0; left:0; right:0; z-index: 2; margin:0 auto; padding:5px 8px; width:100%; display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.5);}
.game-neme > span {width: calc(100% - 30px); color:#fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.game-neme > button {background: none; border: none;}
.game-neme > button > i.normal, .game-neme > button > svg.normal {color:#fff; font-size: 20px;}
.game-neme > button > i.active, .game-neme > button > svg.active {display: none; color:#fe4141; font-size: 20px;}
ul.game-list > li.active > .game-neme > button > i.normal, ul.game-list > li.active > .game-neme > button > svg.normal {display: none;}
ul.game-list > li.active > .game-neme > button i.active, ul.game-list > li.active > .game-neme > button svg.active {display: block;}
ul.maingame-list > li.active > .game-neme > button > i.normal, ul.maingame-list > li.active > .game-neme > button > svg.normal {display: none;}
ul.maingame-list > li.active > .game-neme > button i.active, ul.maingame-list > li.active > .game-neme > button svg.active {display: block;}

/* 스포츠게임 */
ul.sport-game {position: relative; margin: 0 -20px 0 0; display: flex; flex-wrap: wrap; justify-content:flex-start; gap: 20px;}
ul.sport-game > li {position: relative; margin:0; padding:0; width: calc(100% / 2 - 20px); border-radius: 5px; box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.2); overflow: hidden; cursor: pointer;}
ul.sport-game > li > img {width: 100%;}

@media (hover: hover) and (pointer: fine) {
   ul.game-list > li:hover .btn-hover {display: block;}
   ul.sport-game > li:hover {filter: brightness(0.7);}
}

/****************************************************************************************************************************************
popular-lottery 시작
*****************************************************************************************************************************************/
.popular-lottery {position: relative; margin:20px auto; padding:0; width: 100%;}

ul.lotto-cardList {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; flex-wrap: wrap; justify-content:flex-start; align-items: stretch; gap:20px;}
ul.lotto-cardList > li {position: relative; margin:0; padding:0; width: calc(100% / 4 - 20px); display: flex; flex-direction: column; justify-content: space-between;border: 1px #132e56 solid; border-radius: 5px; overflow: hidden; cursor: pointer;}
ul.lotto-cardList > li.cursor-stop {opacity: 0.5; cursor: not-allowed;}
ul.lotto-cardList > li.cursor-stop .card-btn {cursor: not-allowed !important;}

.card-theme {position: relative; margin:0; padding:5px 10px; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:8px;}
.skyblue-bg {background: url('../img/lotto/skyblue-bg.png'); background-size: cover;}
.purple-bg {background: url('../img/lotto/purple-bg.png'); background-size: cover;}
.blue-bg {background: url('../img/lotto/blue-bg.png'); background-size: cover;}
.red-bg {background: url('../img/lotto/red-bg.png'); background-size: cover;}
.orange-bg {background: #fd7e15;}
.darkblue-bg {background: #3d57c5;}
.green-bg {background: #27a844;}
.pink-bg {background: #e93e8c;}

.card-theme > img {width: 40px; height: 40px;}
.card-theme > span {font-size: 16px; font-weight: 500;}

.card-item {position: relative; margin:0; padding:10px 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap:5px}
.card-detail {flex:1 1 0; margin:0; text-align: left;}
.ani-count {font-size: 14px; font-weight: 600; animation: blink 0.5s steps(2, jump-none) infinite;}
@keyframes blink  {
    0% {color: #ff5151;}
    100% {color:#fff;}
}
.card-detail-txt {margin-top:3px; display:flex; justify-content: flex-start; align-items: center; gap:3px; font-size: 13px; font-weight: 400;}
.card-detail-txt > i {font-size: 16px;}
.card-btn {margin:0; padding:8px 20px; border-radius: 5px;}

@media (hover: hover) and (pointer: fine) {
   ul.lotto-cardList > li:hover {box-shadow: 0 0 7px 0 #fccc00;}
   ul.lotto-cardList > li.cursor-stop:hover {box-shadow:unset !important;}
   ul.lotto-cardList > li.cursor-stop:hover .card-btn {filter: unset !important;}
}

/****************************************************************************************************************************************
lottery-results 시작
*****************************************************************************************************************************************/
.result-tit {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:10px;}
.result-tit > img {width: 32px; border-radius: 50%; border: 1px #fff solid;}
.result-tit > span {font-size:20px; font-weight: 600;}

ul.result-item {position: relative; margin:15px 0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap:20px;}
ul.result-item > li {flex: 1; position: relative; margin:0 auto; padding:20px 5px; width: calc(100% / 2); background: #3f91fd; border-radius: 5px;}
ul.result-item > li:nth-child(2) {flex: 2;}
ul.result-item > li > h3 {margin-bottom:5px; font-size: 16px; font-weight: 600; color:#000;}
ul.result-item > li > p {font-size: 22px; font-weight: 600; color:#000; letter-spacing: 2px;}
ul.result-item > li > p > span {margin:0 5px;}

/* tab-total */
.tab-total {position: relative; margin:20px auto; padding:0; width:100%;}

.tab-scroll {position: relative;}
ul.total-tab {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
ul.total-tab > li {display: block; margin: 0; padding: 5px 15px; font-size: 16px; font-weight:600; color:#fff; background: #001854; border: 1px #fff solid; border-radius: 5px; cursor: pointer;}
ul.total-tab > li.active {color:#000; background: #fff;}

/* tab-con */
.results-con {display: none; position: relative; margin:10px auto; padding:0; width: 100%;}
.results-con.active {display: block;}

.tb-scroll {position: relative;}

.tb-results {position: relative; margin:0 0 20px 0; padding:0; width: 100%;}
.tb-results > thead {position: sticky; top:0; z-index: 1;}
.tb-results > thead > tr {background: #000a22; border-bottom: 1px solid #1f283d;}
.tb-results > tbody > tr {background: #000a22; border-bottom: 1px solid #1f283d;}
.tb-results th,
.tb-results td {padding:10px 15px; text-align: center; font-weight: 600; color:#fff;}
.tb-results td > img {width: 22px; border-radius: 50%;}
.tb-results td > span {margin:0 5px; text-align: left; color:#fff;}
.tb-results td > .color-box {margin:0 5px; padding:3px 5px; font-size: 12px; color:#fff; border-radius: 5px;}
.blue-box {background:#2196f3;}
.red-box {background:#f44336;}
.yellow-box {background:#ffeb3b;}
.green-box {background:#4caf50;}

.txt-left {display:flex; justify-content: flex-start; align-items: center;}
.td-left {text-align: left !important;}
.non-data {cursor: default !important;}

/* 내부 슬라이드 */
ul.inner-menu {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center;}
ul.inner-menu > li {position: relative; margin:0 auto; padding:10px 10px; width: calc(100% / 6); height: 64px; display: flex; justify-content: center; flex-direction: column; border-bottom: 1px #3f91fd solid; cursor: pointer;}
ul.inner-menu > li.active {border-bottom: 2px #fff solid;}

.inner-wrap {position: relative; overflow: hidden; transition: height 0.3s;}
.inner-track {display: flex; transition: transform 0.3s;}
.inner-con {position: relative; margin:0 auto; padding:0; flex: 0 0 100%;}

/* lotto-rule */
ul.lotto-rule {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px;}
ul.lotto-rule > li {position: relative; margin:0; padding:15px 10px; width:calc(100% / 4 - 10px); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 15px; font-weight: 600; background:#000a22; border: 1px #133c86 solid; border-radius: 5px; cursor: pointer;}
ul.lotto-rule > li > img {margin-bottom: 5px;}

/* lotto-hd */
.lotto-wrap {position: relative; margin:20px auto; padding:0 15px; width: 1200px;}
.lotto-hd {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.back-lotto {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:10px; cursor: pointer;}
.back-lotto > i,
.back-lotto > svg,
.back-lotto > span {font-size: 18px;}
.back-lotto > i, .back-lotto > svg {margin-top: 3px;}

.dateTime {position: relative;}
.dateTime > input {padding:5px 10px; font-size: 15px; color:#fff; background:#001854; border: 1px #fff solid; border-radius: 5px;}
.dateTime > input[type="date"]::-webkit-calendar-picker-indicator {filter: invert(1); cursor: pointer;}

/* lotto-tit */
.lotto-tit {position: relative; margin:10px auto; padding:0; width: 100%; text-align: left; font-size: 18px; font-weight: 600;}

/* payout-rate */
.payout-rate {position:relative; margin:20px auto; padding:0; width:100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap:15px;} 
.rate-itemGroup {position: relative; margin:0; padding:20px 20px; width: calc(100% / 2 - 15px); background:#0c2973 url('../img/lottery/thai-bg.png') center no-repeat; background-size: cover; border-radius: 10px;}
.rate-tit {margin:0 auto; padding:0; width: 100%; text-align: center; font-size: 28px; font-weight: 600;}
.rate-item {position: relative; margin:20px auto; width: 320px; text-align: center; border: 2px #fff solid; border-radius: 8px;}
.rateitem-tit {padding:8px 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border-bottom: 2px #fff solid;}
.rateitem-tit > span {font-size: 18px; font-weight: 600;}
.rateitem-tit > span:first-child {text-align: left;}
.rateitem-tit > span:last-child {text-align: right;}

.rate-inner {position: relative; margin:0 auto; padding:5px 15px; text-align: center; background: rgba(0,0,0,0.5);}
ul.rate-itemList {position: relative; margin:10px auto; padding:10px 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border: 2px #fff solid; border-radius: 8px;}
ul.rate-itemList > li {width: calc(100% / 2); font-size:16px; font-weight:bold; color:#fff;}
ul.rate-itemList > li:nth-child(odd) {text-align: left;}
ul.rate-itemList > li:nth-child(even) {text-align: right;}

/* rule */
ul.rule-tab {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
ul.rule-tab > li {display: block; margin: 0; padding: 5px 15px; font-size: 16px; font-weight:600; color:#fff; background: #001854; border: 1px #fff solid; border-radius: 5px; cursor: pointer;}
ul.rule-tab > li.active {color:#000; background: #fff;}

/* rule-con */
.rule-con {display: none; position: relative; margin:20px auto; padding:15px 20px; width: 100%; text-align: left; background: #fff; border: 10px #3f91fd solid; border-radius: 4px; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);}
.rule-con.active {display: block;}
.rule-con > h3 {position: relative; margin:0 auto; padding:0; width: 100%; text-align: left; font-size: 18px; font-weight: 600; color:#212121;}
.rule-con > p {position: relative; margin:0 auto; padding:0; width: 100%; text-align: left; font-size: 16px; color:#212121;}
.rule-con > dl {position: relative; margin:5px auto; padding:0; width: 100%; text-align: left;}
.rule-con > dl > dt { font-size: 16px; color:#212121;}
.rule-con > dl > dd {display: list-item; list-style: disc; margin-left: 20px; font-size: 16px; color:#212121;}

@media (hover: hover) and (pointer: fine) {
   .tb-results > tbody > tr:hover {background: #616161;}   
   ul.lotto-rule > li:hover {box-shadow: 0 0 4px #fff;}

   .back-lotto:hover,
   .back-lotto:hover > i,
   .back-lotto:hover > svg {filter: brightness(0.9);} 
}

/****************************************************************************************************************************************
poker 시작
*****************************************************************************************************************************************/
.poker-bg {width: 100%; max-height: 550px; line-height: 0; object-fit: cover;}
.poker-logo,
.esport-logo {position: absolute; top: 50px; right: 0;  left: 0; margin:0 auto; width: 150px !important; text-align: center;
    animation: poker-logo 3s ease-in-out infinite alternate;    
}

@keyframes poker-logo {
    0% {transform: scale(1.2);}
    100% {transform: scale(1);}
}

.poker-c1 {position: absolute; left: 15%; top: 10%; max-width: 100% !important; 
    animation: poker-c1 2s ease-in-out infinite alternate;    
}
@keyframes poker-c1 {
    0% {transform: scale(1.2);}
    100% {transform: scale(1);}
}
.poker-c2 {position: absolute; left: 25%; top: 28%; max-width: 100% !important;  
    animation: poker-c2 2s ease-in-out infinite alternate;    
}
@keyframes poker-c2 {
    0% {transform: scale(0.8);}
    100% {transform: scale(1.3);}
}

.poker-c3 {position: absolute; right: 15%; top: 10%; max-width: 100% !important;  
    animation: poker-c3 2s ease-in-out infinite alternate;    
}
@keyframes poker-c3 {
    0% {transform: scale(0.7);}
    100% {transform: scale(1.2);}
}

.poker-c4 {position: absolute; right: 25%; top: 25%; max-width: 100% !important; 
    animation: poker-c4 2s ease-in-out infinite alternate;    
}
@keyframes poker-c4 {
    0% {transform: scale(1.2);}
    100% {transform: scale(1);}
}

.poker-palayBtn {position: absolute; left: 0; right: 0; bottom: 20%; margin:0 auto; width: 195px; height: 50px; text-align: center;}
.poker-palayBtn::after {content: ""; position: absolute; left: 0; top: 0; width: calc(100% + 1px); height: calc(100% + 1px);
    background: linear-gradient(60deg, #fb0, #765c14, #5f4a11, #d3af4a, #f8dc91, #ffe9ad, #dac695);
    background-position: 0 50%;
    background-size: 300% 300%;
    border-radius: 9px;
    animation: poker-palayBtn  3s infinite;
}
@keyframes poker-palayBtn  {
    50% {background-position: 100% 50%;}
}
.poker-palayBtn > button {position:relative; z-index: 1; width: 193px; height: 48px; text-align: center; font-size: 16px; font-weight: 900; letter-spacing: 1.5px; color: #fff; background: linear-gradient(180deg, #bb6bff, #3f2793 27.48%, #291a88 125.64%); border-radius: 7px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);}

/* e-sport */
.esport-1 {position: absolute; left: 5%; top: 5%; animation: esport 2s ease;}
.esport-2 {position: absolute; left: 8%; top: 15%; animation: esport 3s ease;}
.esport-3 {position: absolute; left: 11%; top: 25%; animation: esport 4s ease;}
@keyframes esport  {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@media (hover: hover) and (pointer: fine) {
   .poker-palayBtn > button:hover {color:#dcd3ff;}
}

/****************************************************************************************************************************************
card game 시작
*****************************************************************************************************************************************/
.card-game {position: relative; margin:10px 0; padding:0; width: 100%;}

.card-tit {position: relative; margin:20px 0; padding:10px 10px; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap:10px; background: #000e32; border-radius: 8px;}
.card-tit > img {width: 70px;}
.card-tit > p {font-size:22px; font-weight: 600; color:#fff;}

/****************************************************************************************************************************************
main-bottom 시작
*****************************************************************************************************************************************/
.main-bt-logo {position: relative; margin:20px auto; padding:20x 10px; width: 100%; text-align: center;}

.bt-text-box {position: relative; margin:20px auto; padding:15px 30px; width: 100%; text-align: left; background: #001343; border-radius: 5px;}
.bt-text-box > h3 {margin:30px 0; font-size: 28px; font-weight: 600;}
.bt-text-box > h4 {margin:30px 0; font-size: 14px;}
.bt-text-box > p {margin:15px 0; font-size: 14px;}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1400px) {
    /* lotto */
    ul.lotto-cardList > li {width: calc(100% / 3 - 20px);}
}/* 미디어쿼리문 끝 */

@media (max-width:1230px) {
    .lotto-wrap {padding:0; width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:960px) {
    /* main-tit */
    .main-tit {margin:15px auto 10px auto; height: 35px;}
    .main-tit > h3 {display: flex; align-items: center;}
    .main-tit > h3 > img {width: 30px;}
    .main-tit > h3 > span {font-size: 16px;}
    .main-tit > .btn-more,
    .main-tit > .btn-search {padding:3px 10px; font-size: 13px;}

    /* sub-tit */
    .sub-tit {padding:5px 0;}
    .sub-tit > img {width: 40px;}
    .sub-tit > span {font-size: 24px;}
    
    /* provider-tit */
    .provider-tit,
    .card-tit {margin:10px 0; padding:5px 10px; height: auto;}
    .provider-tit > img,
    .card-tit > img {width:auto; height: 40px;}
    .provider-tit > span,
    .card-tit > span {font-size: 18px;}

    /* casino */
    .bg-list,
    .bg-list-2 {padding:0; background: transparent; border-radius: 0;}
    ul.online-casinoList {flex-wrap: wrap; justify-content: flex-start; gap:10px;}
    ul.online-casinoList > li {width: calc(100% / 3 - 10px);}

    /* main-game */
    .main-game {flex-wrap: wrap;}
    .main-game > .big-game {flex:unset; margin:0; width:100%;}
    ul.maingame-list {flex:unset; margin:0 -5px; gap:10px;}
    ul.maingame-list > li {width: calc(100% / 2 - 10px);}

    /* game-list */
    ul.game-list {flex:unset; margin:0; width: 100%; gap:10px; justify-content: center;}
    ul.game-list > li {width: calc(100% / 2 - 10px);}

    /* sports */
    ul.sport-game {margin:0; gap:25px; flex-wrap: wrap; justify-content: center;}
    ul.sport-game > li {width:100%;}

    /* lotto */
    ul.lotto-cardList {margin:0 -5px; justify-content: center; gap:10px;}
    ul.lotto-cardList > li {width: calc(100% / 2 - 10px); background: #000a22;}

    ul.result-item {flex-wrap: wrap;}
    ul.result-item > li,
    ul.result-item > li:nth-child(2) {flex:unset; width:100%;}

    .tb-scroll {margin:0 0 20px 0; padding:0 0 10px 0; overflow-x: auto;}
    .tb-results {margin: 0;width: 970px;}

    /* lotto-rule */
    ul.lotto-rule {flex-wrap: wrap;}
    ul.lotto-rule > li {width: calc(100% / 2 - 10px);}

    /* 내부 슬라이드 */
    ul.inner-menu {position: relative; display: block; justify-content: unset; align-items: unset; background: #00113b; border: 2px #0c2973 solid; border-radius: 5px; cursor: pointer;}
    ul.inner-menu::before {content: "\f107"; position: absolute; right: 10px; top: 22px; z-index: 1; transform: translateY(-50%); font-family: "Font Awesome 6 Free"; color:#fff; font-weight: 900; transition: transform 0.3s;}
    ul.inner-menu > li {display: none; width:100%; text-align: left; border: none; border-radius: 0;}
    ul.inner-menu > li.active {display: block; border-bottom: unset; cursor: pointer;}
    ul.inner-menu > li > p {display: none;}
    ul.inner-menu.open::before {color:#000;}
    ul.inner-menu.open > li {display: block; color:#000; background: #fff;}
    ul.inner-menu.open > li:hover {background: #d8dde8;}
    ul.inner-menu.open::before {transform: translateY(-50%) rotate(180deg);}

    /* 닫힐 때 확실하게 다시 active만 */
    ul.inner-menu:not(.open) > li:not(.active) {
        display: none;
    }
    
    ul.rule-tab > li {padding:5px 10px; font-size: 14px;}

    .inner-wrap {overflow: unset; transition:unset !important;}
    .inner-track {display: block; transition: unset !important;}
    .inner-con {display: none; flex: unset !important; padding-bottom:10px; overflow-x: auto; opacity: 0;
        transition: opacity 0.3s;}
    .inner-con.active {display: block; opacity: 1;}
}/* 미디어쿼리문 끝 */

@media (max-width:850px) {
    /* poker */
    .poker-logo,
    .poker-c1,
    .poker-c2,
    .poker-c3,
    .poker-c4 {display:none;}

    .poker-bg {height: 400px; max-height: unset;}

    .esport-1,
    .esport-2,
    .esport-3 {display:none;}

    /* main-footer */
    .bt-text-box {padding:15px 0;}
    .bt-text-box > h3 {font-size: 20px;}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    .rate-itemGroup {width: 100%;}
    .rate-item {width: 100%;}
    .rate-tit {font-size: 20px;}
    ul.rate-itemList > li {font-size: 14px;}

    .tab-scroll {overflow-x: auto;}
    ul.rule-tab {margin:20px 0 10px 0; width: 710px;}
}/* 미디어쿼리문 끝 */

@media (max-width:639px) {
    /* main-tit */
    .main-tit {padding:0;}
    .main-tit > h3 > img {margin-right: 0; width: 25px;}
    .main-tit > .btn-more,
    .main-tit > .btn-search {letter-spacing: -1px;}

    /* sub-tit */
    .sub-tit {padding:5px 0;}
    .sub-tit > img {width: 30px;}
    .sub-tit > span {font-size: 20px; letter-spacing: -1px;}

    /* casino */
    ul.online-casinoList {margin:0 -5px; width: auto; justify-content: center;}
    ul.online-casinoList > li {width: calc(100% / 2 - 10px);}

    /* lotto */
    .card-theme {padding:0 5px; gap:5px;}
    .card-theme > img {width: 20px; height: 20px;}
    .card-theme > span {text-align: left; font-size: 11px;}

    .card-item {flex-wrap: wrap;}
    .card-detail,
    .card-btn {width: 100%; flex: unset;}
    .ani-count,
    .card-detail-txt {margin:0 auto; text-align: center; font-size: 11px;}

    .result-tit > span {font-size: 18px;}

    .tab-scroll {margin:0 0 20px 0; padding-bottom:5px; overflow-x: auto;}
    ul.total-tab {width: 640px;}   
}/* 미디어쿼리문 끝 */