@charset "utf-8";

/****************************************************************************************************************************************
hero 시작
*****************************************************************************************************************************************/
.hero {position: relative; overflow: hidden;}
.swiper-pagination-bullet {width: 12px; height: 12px; background:rgba(40, 40, 40, 0.7) !important; border-radius: 50%; opacity: 0.7 !important; outline: none;}
.swiper-pagination-bullet-active {background:var(--red-bg) !important; opacity: 1 !important}
.hero img {width: 100%;}

/* caption */
.caption {position: absolute; left: 130px; top:50%; transform: translateY(-50%); z-index: 9; text-align: left;}
.caption > h3 {font-size: 44px; font-weight: 600; color:var(--secondary);}
.caption > p {margin:20px 0; font-size: 16px; font-weight: 500; color:var(--secondary);}

/****************************************************************************************************************************************
main 공통 시작
*****************************************************************************************************************************************/
section {position: relative; margin:30px auto; padding:0; width: 100%; overflow: hidden;}
section.sec-bg {padding:30px 0; background: linear-gradient(50deg, #e8e8e8 2%, #fcfcfc 106%);}

.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: left; font-size: 18px; font-weight: 600;}

.view-more {margin:0 0 0 5px; padding:0; width:100px; line-height: 34px; text-align: center; font-size: 15px; font-weight: 500; color:var(--red-color); background: var(--bg-layer1); border: 1px var(--red-bg) solid; border-radius: 5px;}

.swiper-nav {display: flex; justify-content:flex-end; align-items: center; gap:5px;}

.top-prev2,
.top-next2,
.top-prev3,
.top-next3 {position: relative; top:0; left:unset; right:unset; margin:0; padding: 0; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: 500; color:var(--border1-font); border: 1px var(--border1-color) solid; border-radius: 50%; opacity: 1; cursor: pointer !important; pointer-events:unset !important;
  transition: opacity 0.3s;
}

.top-prev2::after,
.top-next2::after,
.top-prev3::after,
.top-next3::after {font-size: 15px; color:var(--border1-font);}

.top-prev3,
.top-next3 {display: none;}

@media (hover: hover) and (pointer: fine) {
    .top-prev2:hover,
    .top-next2:hover,
	.top-prev3:hover,
    .top-next3:hover {color:var(--border1-font-hover); border: 1px var(--border1-color-hover) solid;}
    .top-prev2:hover::after,
    .top-next2:hover::after,
	.top-prev3:hover::after,
    .top-next3:hover::after {color:var(--border1-font-hover);}

    .view-more:hover {color: var(--red-color-hover);}
}


/****************************************************************************************************************************************
main-game 시작
*****************************************************************************************************************************************/
ul.main-game {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap: 15px; justify-content:center; align-items: center;}
ul.main-game > li {position: relative; width: calc(100% / 5 - 15px); transition: transform 0.3s ease; cursor: pointer;}

.game-info {position: absolute; left:20px; bottom:15px;}
.game-info > h2 {margin-bottom:3px; font-size:15px; font-weight: 600; color:var(--color);}
.game-info > p {font-size:13px; font-weight: 500; color:var(--gray-color);}

@media (hover: hover) and (pointer: fine) {
	ul.main-game > li:hover {transform: scale(1.05);}
}

/****************************************************************************************************************************************
라이브스포츠 시작
*****************************************************************************************************************************************/
.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-layer1); border-radius: 10px; cursor: pointer;}
.card-hd {position: relative; margin:0 auto 5px auto; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.live-name {font-size: 13px; font-weight: bold;}
.live-box {padding:3px 3px; font-size: 13px;color:var(--green-color); background: rgba(49, 238, 136, 0.1);}
.live-box > svg {margin-right:3px; font-size: 13px;}

.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-img > img {height: 48px;}
.team-txt {margin-top:10px; font-size: 13px; font-weight: bold;}

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

.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; border-radius: 5px}
.card-item > span:nth-child(2) {color: var(--red-color);}
.red-item {background: rgba(252, 60, 60, 0.15);}
.gray-item {background: rgba(154, 154, 154, 0.15);}


/****************************************************************************************************************************************
인기게임 시작
*****************************************************************************************************************************************/
ul.popular-game {position: relative; margin: 0 auto; padding:0; width: 100%; display: flex; gap:10px; flex-wrap: wrap; justify-content:space-between;}
ul.popular-game > li {width: calc(100% / 5 - 10px); cursor: pointer;}

.popular-img {position: relative; border-radius: 5px; overflow: hidden; aspect-ratio: 342 / 511; background:#0e0f13;}
.popular-img > img {width: 100%; height: 100%; object-fit: cover; display: block;}
.hover-icon {display: flex; justify-content: center; align-items: center; position: absolute; top:0; left:0; right:0; bottom:0; padding:10px 10px; width: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility:hidden;}
.hover-icon > .btn-playGo {margin:0; padding:0; width:80%; height:36px; display:flex; justify-content: center; align-items: center; font-weight: 500; color:var(--white-color); background: var(--red-bg); border-radius: 5px; opacity: 0; transition: transform 0.3s ease;}
.hover-icon > .btn-playGo > svg {margin-right:5px; font-size: 15px; color:var(--white-color);}

.popular-info {position: relative; margin:0 auto; padding:5px 0; text-align: left;}
.popular-info > h2 {font-size:16px; font-weight: 500; color:var(--color);}
.popular-info > p {font-size:13px; font-weight: 500; color:var(--gray-color);}

@media (hover: hover) and (pointer: fine) {
	ul.popular-game > li:hover .hover-icon {opacity: 1; visibility: visible; transition:0.3 ease-in;} 
	ul.popular-game > li:hover .btn-playGo {opacity: 1;}
}

/****************************************************************************************************************************************
메인이벤트 시작
*****************************************************************************************************************************************/
.main-event {position: relative;}
/* 이벤트 = 3영역 이미지 → 단일 텍스트 리스트 박스 */
.main-event-box {position: relative; width:100%; border:1px solid var(--border3-color); border-radius:10px; overflow:hidden;}
ul.main-event-list {margin:0; padding:0; list-style:none;}
ul.main-event-list > li {display:flex; justify-content:space-between; align-items:center; gap:15px; padding:15px 22px; border-bottom:1px solid var(--border3-color); cursor:pointer; transition:background .2s;}
ul.main-event-list > li:last-child {border-bottom:none;}
ul.main-event-list > li > .me-title {font-size:15px; font-weight:500; color:var(--color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
ul.main-event-list > li > .me-date {font-size:13px; font-weight:500; color:var(--gray-color); white-space:nowrap; flex-shrink:0;}
ul.main-event-list > li.me-empty {justify-content:center; color:var(--gray-color); cursor:default; padding:30px 22px;}

@media (hover: hover) and (pointer: fine) {
	ul.main-event-list > li:not(.me-empty):hover {background: var(--bg-layer3);}
	ul.main-event-list > li:not(.me-empty):hover > .me-title {text-decoration: underline;}
}


/****************************************************************************************************************************************
카지노와 슬롯페이지 시작
*****************************************************************************************************************************************/
/* tab-tit */
ul.tab-tit {position: relative; margin:0; padding:20px 0 10px 0; display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
ul.tab-tit > li {margin:0; padding:6px 20px; font-weight: 500; color: var(--color); background: var(--bg-layer3); border-radius: 25px; cursor: pointer;}
ul.tab-tit > li.active {color: var(--white-color); background: var(--red-bg);}

/* tab-con */
.tab-con {position: relative; margin: 0 auto; padding:10px 0; width: 100%; background: var(--bg-layer1);}

.tabGame-list {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap:10px; justify-content: center;}
.tab-item {position: relative; margin:0; padding:0; width: calc(100% / 6 - 10px);}
.tab-item > p {margin:0 auto; padding:8px 5px; width: 100%; text-align: center; font-weight: 600; color:var(--color);}

.list-wrap {position: relative; margin: 0; padding:0; width: 100%; background: var(--black-color); border-radius: 10px; overflow:hidden; cursor: pointer;}
.list-wrap::before {content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 150%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4),transparent);transform: skewX(-20deg); transition: all 0.2s;}
.list-wrap > .game-img {transition: all 0.2s;  transform: scale(1)}
.list-wrap > .game-logo {position: absolute; left:0; right:0; bottom:20px; margin:0 auto; text-align: center; width: 70%;}

.playGo-btn {opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 10%; z-index: 5; margin: auto; width: 120px; height: 40px; font-weight: 600; color: var(--white-color); background: linear-gradient(180deg, #ff6365, #cc2124); border-radius: 20px; transition: 0.3s;}

@media (hover: hover) and (pointer: fine) {
	ul.tab-tit > li:hover {filter: brightness(90%);}

    .list-wrap:hover > .game-img {opacity: 0.8; transform: scale(1.1);}
    .list-wrap:hover::before {animation: shine 1s ease 0s;}
    .list-wrap:hover:hover .playGo-btn {opacity: 1;}
}

@keyframes shine {
    0% {left: -200%;}
    100% {left: 250%;}     
}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1360px) { 
	/* hero  */
	.caption {left:20px;}
}/* 미디어쿼리문 끝 */

@media (max-width:1136px) {
	/* 공통 */
	section {margin:0 0 5px 0;}
	section.sec-bg {padding:0 0 30px 0;}

	/* hero */
	.hero {height: 220px;}
	.hero img {height:100%;}
	.caption > h3 {font-size: 38px; letter-spacing: -0.5px;}
	.caption > p {margin:5px 0 0 0;}
}/* 미디어쿼리문 끝 */

@media (max-width:992px) {
	/* 공통 */
	.view-more {line-height:28px; font-size: 13px;}
	.top-prev3,
	.top-next3 {display: flex;}

	/* main-game */
	ul.main-game {flex-wrap: wrap; gap:5px;}
	ul.main-game > li {margin:5px 0; width: calc(100% / 2 - 5px);}
	ul.main-game > li.main-game-event {display: none;}

	/* popular-game */
	ul.popular-game {margin:0 -5px; width:calc(100% + 10px); justify-content:center;}
	ul.popular-game > li {width: calc(100% / 4 - 10px);}

	.hover-icon > .btn-playGo {width: 90%; font-size: 14px;}
	.hover-icon > .btn-playGo > svg {font-size: 14px;}

	/* main-event */
	.main-event-list img {width: 100%;}

	/* 카지노 슬롯페이지 */
	.tab-item {width: calc(100% / 4 - 10px);}
}/* 미디어쿼리문 끝 */


@media (max-width:767px) {
	/* hero */
	.hero {height: 200px;}
	.hero img {object-fit: cover; object-position: 50% center;}
	.caption > h3 {font-size: 30px;}
	.caption > p {font-size: 14px;}  

	.swiper-pagination-bullet {width: 8px; height: 8px;}
	.swiper-horizontal >.swiper-pagination-bullets, 
	.swiper-pagination-bullets.swiper-pagination-horizontal, 
	.swiper-pagination-custom, 
	.swiper-pagination-fraction {bottom: 5px;}

	/* popular-game */
	ul.popular-game > li {width: calc(100% / 2 - 10px);}
	.popular-img > img {width: 100%;}

	/* 카지노 슬롯페이지 */
	.tab-item {width: calc(100% / 3 - 10px);}

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

@media (max-width:639px) {
	/* hero */	
	.hero {height: 180px;}
	.hero img {object-position: 65% center;}
	.caption {left:10px;}
	.caption > h3 {font-size: 28px; color:var(--white-color); text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);}
	.caption > p {color:var(--white-color); text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);}

	/* main-event */
	.main-event-info {left:20px;}
	.main-event-info > h2 {margin:5px 0;}
	.main-event-info > button {padding:5px 20px; font-size: 13px;} 

	/* 카지노 슬롯페이지 */
	.tab-item {width: calc(100% / 2 - 10px);}
	.list-wrap > .game-logo {bottom:10px;}
}

@media (max-width:480px) { 
	/* 공통 */
	.view-more {width: 70px;}

	/* main-game */
	.game-info {left:13px;}
	.game-info > h2 {margin:0;}
	.game-info > p {display: none;}
}