@charset "utf-8";

/****************************************************************************************************************************************
hero 시작
*****************************************************************************************************************************************/
.hero {position: relative; margin:0; padding:0; width: 100%; height:327px; background: url('../img/main/main-hd.png') center no-repeat; background-size: cover; overflow: hidden;}
html[data-theme="light"] .hero {background: url('../img/main/w-main-hd.png') center no-repeat; background-size: cover;}

.hero-inner {position: relative; margin:0 auto; padding:15px 15px; width: 1280px; height: 100%; display: flex; justify-content: space-between; align-items: center;}

/* caption */
.caption {position: relative; margin:0; padding:0; width: 478px; text-align: left;}
.caption > h3 {font-size: 38px; font-weight: 700; color:var(--color);}
.caption > button {margin-top:10px; padding:10px 40px; font-size:16px; font-weight: 600; color:#fff; background: var(--blue-color); border-radius: 5px;}

/* righ-hero */
.righ-hero {position: relative; margin:0; padding:0; text-align: right; width: 660px;}

.hero-search {display:none; align-items: center; position: relative; margin:0; padding:0; width: 100%; height: 50px; background: var(--bg-layer2); border: 1px var(--bg-layer4) solid; border-radius: 5px;}
.hero-search > svg {width: 40px; font-size:20px; color:var(--bg-layer4);}
.hero-search > input {padding:0 10px 0 0; width:calc(100% - 40px); height: 100%; color:var(--board-green) ;font-weight: 600; background: none; border:none;}
.hero-search > input::placeholder {color:var(--placeholder-color);}

.now-play {display:none; position: relative; margin:10px auto; padding:0; width: 100%; font-size: 16px; font-weight: 600; color:var(--color);}
.now-play > svg {margin-right:5px; font-size: 14px; color:var(--secondary);}

ul.hero-img {position: relative; margin:0; padding:0; display: flex; justify-content: flex-end; align-items: center; gap:10px;}
ul.hero-img > li {position: relative; padding: 2px 2px; width: calc(100% / 2 - 10px); border-radius: 6px; transform: translateY(0px); transition: 0.3s; cursor: pointer;}
ul.hero-img > li:nth-child(1) {background: linear-gradient(0deg, transparent, #0179fe 100%);}
ul.hero-img > li:nth-child(2) {background: linear-gradient(0deg, transparent, #00CA51 100%);}

ul.hero-img > li > img {width: 100%;}

dl.hero-txt {position:relative; margin: 0; padding:10px 10px; width: 100%; height: 40px; display: flex; justify-content: space-between; align-items: center; background: var(--bg-layer3);}
dl.hero-txt > dt {font-weight: 600; color:var(--color);}
dl.hero-txt > dt > svg {margin-right:5px; color:var(--secondary);}
dl.hero-txt > dd {display: flex; justify-content: center; align-items: center; font-weight: 600; color:var(--color);}
dl.hero-txt > dd > svg {margin-right:5px; font-size:5px; color:var(--green-color);}
html[data-theme="light"] dl.hero-txt {background: var(--bg-white);}
@media (hover: hover) and (pointer: fine) {
	.caption > button:hover {filter: brightness(0.8);}
    ul.hero-img > li:hover {transform: translateY(-10px);}
}

/****************************************************************************************************************************************
main 공통 시작
*****************************************************************************************************************************************/
section {position: relative; margin:30px auto; padding:15px 15px; width: 1280px; overflow: hidden;}

.main-tit {position: relative; margin:10px auto; padding:0; width: 100%; height: 35px; display: flex; justify-content: space-between; align-items: center;}
.main-tit > h3 {text-align: center; font-size: 16px; font-weight: 600; flex:1;}

.main-tit-2 {position: relative; margin:10px auto; padding:0; width: 100%; height: 35px; display: flex; align-items: center;}
.main-tit-2 > h3 {text-align: left; font-size: 16px; font-weight: 600;}

/****************************************************************************************************************************************
week-game 시작
*****************************************************************************************************************************************/
.swiper-nav {display: flex; justify-content:flex-end; align-items: center; gap:5px;}
.spots-nav {display: none;}

.top-prev1,
.top-next1,
.top-prev3,
.top-next3,
.top-prev4,
.top-next4,
.top-prev5,
.top-next5,
.top-prev6,
.top-next6,
.top-prev7,
.top-next7 {position: relative; top:0; left:unset; right:unset; margin:0; padding: 0; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: 500; color:var(--color); background:var(--bg-layer4); border-radius: 5px; opacity: 1; cursor: pointer !important; pointer-events:unset !important;
  transition: opacity 0.3s;
}
.top-prev1::after,
.top-next1::after,
.top-prev3::after,
.top-next3::after,
.top-prev4::after,
.top-next4::after,
.top-prev5::after,
.top-next5::after,
.top-prev6::after,
.top-next6::after,
.top-prev7::after,
.top-next7::after {font-size: 15px; color:var(--color);}

/* 스켈레톤 로딩 */
@keyframes skeleton-pulse {
    0% {background-position: 200% 0;}
    100% {background-position: -200% 0;}
}
.game-skeleton {aspect-ratio: 3 / 4; border-radius: 10px; background: linear-gradient(90deg, var(--bg-layer2) 25%, var(--bg-layer3) 50%, var(--bg-layer2) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.5s ease-in-out infinite;}
.game-skeleton-row {display: flex; gap: 8px;}
.game-skeleton-row > div {flex: 1;}

.week-game-list {position:relative; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: var(--game-thumb-ratio, 3 / 4); display: flex; align-items: center; justify-content: center; background: var(--bg-layer2);}
.week-game-list img {max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;}
.week-game-list .vendor-logo {position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 80%; max-height: 48px; object-fit: contain; z-index: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));}
.week-game-list.no-img img {display: none;}
.week-game-list.no-img::before {content: '\f11b'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 32px; color: var(--secondary); opacity: 0.4;}
.week-game-title {margin: 4px 0 0; width: 100%; line-height: 1.3; text-align: center; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color);}
.hover-icon {display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top:0; left:0; right:0; bottom:0; padding:18px 10px; width: 100%; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden;}
.hover-icon > p {margin:0 auto; width:100%; line-height: 1; text-align: center; font-size: 12px; font-weight: 600; color:var(--white-color);}
.hover-icon > .play-icon {margin:10px 0 0; padding:30px 30px; width:40px; height:40px; display:flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.3); border-radius: 50%; opacity: 0; transform: scale(0.85); transition: transform 0.3s ease;}
.hover-icon > .play-icon > svg {color:var(--color); opacity: 0.8; font-size: 32px;}

@media (hover: hover) and (pointer: fine) {
	.top-prev1:hover,
    .top-next1:hover,
    .top-prev3:hover,
    .top-next3:hover,
    .top-prev4:hover,
    .top-next4:hover,
    .top-prev5:hover,
    .top-next5:hover,
    .top-prev6:hover,
    .top-next6:hover 
    .top-prev7:hover,
    .top-next7:hover {filter: brightness(90%);}

    .week-game-list:hover .hover-icon {opacity: 1; visibility: visible; transition:0.3 ease-in;} 
    .week-game-list:hover .hover-icon > .play-icon {transform: scale(1); opacity: 1;}
}

/****************************************************************************************************************************************
recent-game 시작
*****************************************************************************************************************************************/
ul.tab-tit {position: relative; margin:0 0 0 20px; padding: 0; display: flex; align-items: center; gap: 15px;}
ul.tab-tit > li {margin:0 auto; padding:5px 0; font-size: 13px; font-weight: 500; color: var(--secondary); border-bottom: 2px transparent solid; cursor: pointer;}
ul.tab-tit > li.active {color:var(--primary);  border-bottom: 2px var(--green-color) solid;}

/* tab-con */
.tab-con {position: relative; margin: 0 auto; padding:10px 0; width: 100%; overflow: hidden;}

.tab-slide {position: relative; cursor: pointer;}
.tab-slide-thumb {position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: var(--popular-thumb-ratio, 3 / 4); display: flex; align-items: center; justify-content: center; background: var(--bg-layer2);}
.tab-slide-thumb img {max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 6px;}
.tab-slide-thumb .hover-icon {border-radius: 8px;}
.tab-slide.no-img .tab-slide-thumb img {display: none;}
.tab-slide.no-img .tab-slide-thumb::before {content: '\f11b'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 32px; color: var(--secondary); opacity: 0.4;}
.tab-txt-1 {margin:4px auto 0; width:100%; line-height:1.2; text-align: left; font-size:11px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tab-txt-2 {margin:0 auto; width:100%; line-height:1.2; text-align: left; font-size:11px; color:var(--green-color); font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

@media (hover: hover) and (pointer: fine) {
    ul.tab-tit > li:hover {color:var(--primary);}
    .tab-slide-thumb:hover .hover-icon {opacity: 1; visibility: visible; transition:0.3s ease-in;}
    .tab-slide-thumb:hover .hover-icon > .play-icon {transform: scale(1); opacity: 1;}
}

/****************************************************************************************************************************************
main-game 시작
*****************************************************************************************************************************************/
ul.top-game {position:relative; margin: 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap:10px;}
ul.top-game > li {position:relative; margin: 0; padding:30px 20px; width: calc(100% / 3 - 10px); height: 170px; display: flex; justify-content: space-between; border-radius: 10px; cursor: pointer;}
ul.top-game > li:nth-child(1) {background: linear-gradient(-45deg, rgb(44, 80, 64), var(--bg-layer1) 75%);}
ul.top-game > li:nth-child(2) {background: linear-gradient(-45deg, rgb(88, 46, 89), var(--bg-layer1) 75%);}
ul.top-game > li:nth-child(3) {background: linear-gradient(-45deg, rgb(65, 46, 89), var(--bg-layer1) 75%);}

html[data-theme="light"] ul.top-game > li:nth-child(1) {background: linear-gradient(-45deg, rgb(191, 249, 220), var(--bg-layer1) 75%);}
html[data-theme="light"] ul.top-game > li:nth-child(2) {background: linear-gradient(-45deg, rgb(249, 175, 246), var(--bg-layer1) 75%);}
html[data-theme="light"] ul.top-game > li:nth-child(3) {background: linear-gradient(-45deg, rgb(221, 175, 249), var(--bg-layer1) 75%);}

ul.top-game > li > img {position:absolute; right:20px; top:0; height: 120%;}
.mainGame-txt {display: flex; flex-direction: column; justify-content: space-between;}
.mainGame-txt > h3 {font-size: 20px; font-weight: 600;}
.mainGame-txt > h3 > svg {margin-right: 5px; font-size: 20px; color: var(--green-color);}
.mainGame-txt > p {width:240px; text-align: left; font-size: 15px; font-weight: 600;}

@media (hover: hover) and (pointer: fine) {
    ul.top-game > li:nth-child(1):hover {background: linear-gradient(-45deg, #32a76b, var(--bg-layer1) 75%);}
    ul.top-game > li:nth-child(2):hover {background: linear-gradient(-45deg, #c44dbe, var(--bg-layer2) 75%);}
    ul.top-game > li:nth-child(3):hover {background: linear-gradient(-45deg, #a247da, var(--bg-layer2) 75%);}

    html[data-theme="dark"] ul.top-game > li:hover {filter: brightness(110%);}
}

/****************************************************************************************************************************************
라이브스포츠 시작
*****************************************************************************************************************************************/
.live-spots {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px;}
.card-list {position: relative; margin:0 auto; padding:15px 15px; width:100%; display: flex; flex-direction: column; align-items: center; gap:10px; background: var(--bg-layer3); cursor: pointer;}
.card-hd {position: relative; margin:0 auto 5px auto; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; font-weight: 500; color:var(--color);}

.card-body {position: relative; margin:0 auto 5px auto; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.card-match {margin:0 auto; padding:0; width: 100%; text-align: center;}
.team-txt {margin-top:10px; font-size: 13px; font-weight: bold; color:var(--color-white);}

.card-score {margin:0 auto; padding:0; width: 100%; text-align: center;}
.score-txt {font-size: 30px; font-weight: bold; color:var(--color-white);}

.card-ft {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px;}
.card-item {margin:0 auto; padding:10px 5px; width: 100%; display: flex; justify-content: center; align-items: center; gap:5px; background: rgb(231, 44, 81, 0.25); border-radius: 5px}
.card-item > span {color:var(--color-white);}
.card-item > span:nth-child(2) {color:#ff0000;}

/* pay */
ul.main-pay {position: relative; margin:20px auto; padding:0 30px; width: 100%; height: 96px; display: flex; justify-content: space-between; align-items: center; background: var(--bg-layer1); border-radius: 10px;}
ul.main-pay > li {margin:0; width: calc(100% / 3); text-align: center; font-size: 24px; font-weight: bold; letter-spacing: -1px;}
ul.main-pay > li:nth-child(1) {text-align: left;}
ul.main-pay > li:nth-child(3) {margin-right:30px; text-align: right;}

ul.main-pay > li > span {font-size: 24px; font-weight: bold; color:var(--green-color);}
ul.main-pay > li.pay-img > img {height: 24px;}
ul.main-pay > li.coin-img > img {margin-right:-10px; width: 24px;}

/****************************************************************************************************************************************
검색 시작
*****************************************************************************************************************************************/
.search-wrap {position: relative; margin:20px auto; padding:0 10px; width: 100%; height: 45px; display: flex; gap:10px; justify-content: flex-start; align-items: center; background: var(--bg-layer1); border: 1px var(--board-1) solid; border-radius: 10px; transition: outline 0.2s;}
.search-wrap:focus-within {outline: 1px solid var(--board-green);}
.search-wrap > input {flex: 1; background: none; border: none; font-size: 15px; font-weight: 600; color:var(--color);}
.search-wrap > input::placeholder {color:var(--placeholder-color); font-weight: 500;}
.search-wrap > input:focus {outline: none;}
.search-wrap > svg {font-size:16px; color:var(--secondary);}


/****************************************************************************************************************************************
카지노와 슬롯페이지 시작
*****************************************************************************************************************************************/
.game-table {position: relative; margin:0; padding:0; width: calc(100% + 14px); display: flex; flex-wrap: wrap; gap:14px;}
.game-table-list {width: calc(100% / 8 - 14px);}

@media (min-width: 0px) { 
    .game-table {width: calc(100% + 8px); gap:8px;}
    .game-table-list {width: calc(100% / 3 - 8px);}
 }
@media (min-width: 630px) { 
    .game-table {width: calc(100% + 8px); gap:8px;}
    .game-table-list {width: calc(100% / 4 - 8px);}

}
@media (min-width: 992px) {  
    .game-table {width: calc(100% + 8px); gap:8px;}
    .game-table-list {width: calc(100% / 7 - 8px);}
}

@media (min-width: 1280px) { 
    .game-table {width: calc(100% + 14px); gap:14px;}
    .game-table-list {width: calc(100% / 8 - 14px);}

 }

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1600px) {    
    .hero-inner {width: 100%;}
    section {width: 100%; margin:10px auto; padding:0 15px;}    
}/* 미디어쿼리문 끝 */

@media (max-width:1310px) { 
    /* live-sports */
    .spots-nav {display: flex;}
    ul.main-pay {justify-content: center;}
    ul.main-pay > li:nth-child(1),
    ul.main-pay > li:nth-child(2) {display: none;}
    ul.main-pay > li:nth-child(3) {margin:0 auto; width:100%; text-align: center;}
    ul.main-pay > li.coin-img > img {margin:0 2px;}
}/* 미디어쿼리문 끝 */

@media (max-width:1150px) {
    /* hero */
    .hero {height: auto;}
    .hero-inner {padding:15px 15px; flex-direction: column; justify-content:center; align-items: center;}
    .caption,
    .righ-hero {margin:0 auto; width: 100%; text-align: center;}
    .caption {padding:20px 0; margin-bottom:20px;}

    .hero-search {display: flex;}
    .now-play {display: block; margin:20px auto; text-align: left; font-size: 20px;}
    .now-play > svg {font-size: 20px;}

    ul.hero-img {justify-content: center;}

}/* 미디어쿼리문 끝 */

@media (max-width:992px) {
   ul.top-game {flex-wrap: wrap;}
   ul.top-game > li {width: 100%;}   
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    /* hero */
    .hero,
    html[data-theme="light"] .hero {background-position: top left;}
    .hero-inner {padding:10px 10px;}
    .caption > h3 {font-size: 26px;} 
    
    /* top-game */    
    .mainGame-txt > p {font-size: 13px;}
}/* 미디어쿼리문 끝 */

@media (max-width:639px) {
    .tab-con {width: 300%;}
}/* 미디어쿼리문 끝 */

@media (max-width:580px) {
    /* tab */
    ul.tab-tit {gap:10px; margin:0 0 0 15px;}

    /* top-game */
    ul.top-game > li {padding:15px 10px; height: 130px;}
    ul.top-game > li > img {right:-5px;}
    .mainGame-txt > h3,
    .mainGame-txt > h3 > svg {font-size: 14px; font-weight: bold;}
    .mainGame-txt > h3 > svg {margin-right:2px;}
}/* 미디어쿼리문 끝 */