@charset "utf-8";

/****************************************************************************************************************************************
hero section
*****************************************************************************************************************************************/
.hero {position: relative; margin:0; padding: 0; width: 100%;}
.hero-inner {position: relative; margin:0 auto; padding:0; width: 100%;}
.hero-inner > img {width: auto; height: 450px;  object-fit: cover; object-position: center top;}


/****************************************************************************************************************************************
section 공통
*****************************************************************************************************************************************/
section {position: relative; margin:50px auto; padding:0; width: 100%;}


/****************************************************************************************************************************************
main-tit 공통
*****************************************************************************************************************************************/
.main-tit {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:20px; justify-content: center; align-items: center;}
.main-tit > img {max-width: 100%;}
.tit-txt {position: relative;}
.tit-txt > h3 {position: relative;margin:0 auto; padding:0; width: 100%; text-align: center; font-size: 28px; font-weight: 600; font-family: 'GmarketSans'; color: #ddbf90; letter-spacing: 0.5px;}
.tit-txt > p {margin:5px auto 0 auto; padding:0; width: 100%; text-align: center; font-size: 18px; font-weight: 600; font-style: italic; font-family: 'GmarketSans'; color: #cf9f54; letter-spacing: 0.5px;}

ul.main-game {position: relative; margin:20px auto 0 auto; padding:0; width: 100%; display: flex; gap:40px; justify-content: center; align-items: center;}
ul.main-game > li {position: relative; margin:0 auto; padding:0; width: 100%; cursor: pointer;}
ul.main-game > li > img {width: 100%; height: auto;}

@media (hover: hover) and (pointer: fine) {
    ul.main-game > li > img:hover {animation: main_img 2s ease-in-out; transform-origin: 90% 100%;}
}

@keyframes main_img {
	0%   {transform:rotate(0deg) scaleY(1.1);}
	20%  {transform:rotate(-1deg) scaleY(1.05);}
	35%  {transform:rotate(2deg) scaleY(1);}
	50%  {transform:rotate(-1deg);}	
	65%  {transform:rotate(1deg);}	
	80%  {transform:rotate(-1deg);}		
	100% {transform:rotate(0deg);}									
}


/****************************************************************************************************************************************
main-border
*****************************************************************************************************************************************/
.mainBo-inner {position: relative; margin:0 auto; padding:0 15px; width: 1400px; display: flex; gap:40px; justify-content: center;}
.board-group {position: relative; width:100%;}

.board-hd {position: relative; margin:0 auto; padding:0; width: 100%; height: 40px; line-height: 40px; text-align: left; font-size: 18px; font-weight: 500; font-family: 'GmarketSans'; color: #ddbf90; letter-spacing: 0.5px; border-bottom: 1px #ddbf90 solid;}

.mainBo-con {position:relative; margin:15px auto 0 auto; padding:0; width:100%; height:160px; overflow: hidden;}
.mainBo-con > table {margin:0 auto 20px auto; padding:0; width: 100%;}
.mainBo-con > table th,
.mainBo-con > table td {padding:0 5px; height: 32px; font-weight:500;}
.mainBo-con > table th {width:74%; text-align: left; font-size: 16px; color:#81bef7; cursor: pointer;}
.mainBo-con > table th > span {display: block; width:220px;text-align: left; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; overflow: hidden;}
.mainBo-con > table td {text-align: right; width: 26%; font-size: 13px; color: #c4b670;}

/* 메인 실시간 입출금 */
.realtime-con {position:relative; margin:15px auto 0 auto; padding:0; width:100%; height:160px; overflow: hidden;}
.newsticker {position: relative; overflow: hidden;}
.newsticker > ul {position: relative; margin:0 auto; padding:0; width: 100%; height:100%; overflow: hidden;}
.newsticker > ul > li {padding:0 5px; height: 32px; display: flex; align-items:center; justify-content: space-between; cursor: pointer;}
.newsticker > ul > li > span {display: inline-block; margin:0 auto; padding:0; width: calc(100% / 3)}
.name {color: #fff4dd; text-align: left;}
.amount {padding:0 10px !important; color: #ffc000; text-align: right;}
.date {color: #c4b670; text-align: right;}



/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1460px) {
    .mainBo-inner {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1024px) {
    .hero-inner > img {height: 300px;}

	ul.main-game,
	.mainBo-inner {gap:20px; flex-direction: column; justify-content: flex-start; align-items: center;}
	ul.main-game > li > img {width:unset; max-width: 100%;}

	.newsticker > ul > li > span {width: 100%;}
	.name,
	.date {flex-grow: 2; flex-shrink: 2;}
	.amount {flex-grow: 1;}
	.date {letter-spacing: -1px;}
}/* 미디어쿼리문 끝 */


@media (max-width: 767px) {
    .main-tit > img {display: none;}
	.tit-txt > h3 {font-size: 24px; letter-spacing: -1px;}
	.tit-txt > p {font-size: 15px;}
}/* 미디어쿼리문 끝 */


/****************************************************************************************************************************************
🔴 이하 이식 추가
*****************************************************************************************************************************************/

/* 히어로 — 원본은 2560×470 장식 사진을 높이 450 으로 잘라 썼다(좌우가 잘려도 되는 그림).
   업체 배너(브랜드 slides.json)는 글자·건물이 든 **완성 이미지**라 자르면 안 된다 → 폭 100%·원본 비율.
   브랜드 배너가 없을 때만 원본 사진(.hero-default)을 원본 방식 그대로 쓴다. */
.hero-inner {overflow: hidden;}
.hero-inner > img.hero-default {display: block; margin: 0 auto;}
.hero-inner .swiper-container {position: relative; width: 100%; overflow: hidden;}
.hero-inner .swiper-slide img,
.hero-inner > a > img,
.hero-inner > img.hero-brand {display: block; width: 100%; height: auto;}
.hero-inner .swiper-pagination-bullet-active {background: #ddbf90;}
/* 원본 히어로 아래 파란 띠(사진에 그려져 있던 것)를 배너에도 같은 자리로 둔다. */
.hero::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, rgba(0,140,255,0), #1d8fff 20%, #1d8fff 80%, rgba(0,140,255,0));}

/* 게임 카드 — 원본은 3장(카지노·슬롯·파워볼) 고정이라 flex 100% 로 1/3 씩 나눴다.
   🔴 카지노전용(미니게임 OFF) 테넌트는 2장이라 한 장이 670px 로 늘어나 410px 원본 그림이 뭉개진다.
      장수와 상관없이 원본 크기(≈430px)를 넘지 않게 상한만 둔다(3장일 때는 원본과 같다). */
ul.main-game > li {max-width: 430px;}

/* 공지 칸 — 공지가 없을 때 안내 한 줄 */
.mainBo-con > table th.empty {color: #8a8a8a; cursor: default;}
/* 공지 카테고리·고정핀 */
.mainBo-con > table th em.cate {margin-right: 4px; font-style: normal; color: #ddbf90;}
.mainBo-con > table th i.ri-pushpin-fill {margin-right: 4px; color: #ffc000;}
.board-hd .board-more {float: right; font-size: 13px; color: #c4b670; cursor: pointer;}

/* 실시간 입출금 티커(live-ticker.js) 행 — 코어는 [배지][아이디][금액][시각] 4칸을 만든다.
   원본 행은 [아이디][금액][날짜] 3칸이라 배지는 감추고, 클래스 없는 아이디 칸에 원본 .name 색을 준다. */
.newsticker .w10-tk-tag {display: none;}
.newsticker > ul > li > span:not([class]) {color: #fff4dd; text-align: left;}

@media (max-width: 1024px) {
    .hero-inner > img.hero-default {height: 300px; width: auto; max-width: none; position: relative; left: 50%; transform: translateX(-50%);}
    ul.main-game > li {max-width: 100%;}
    .board-group {width: 100%;}
    /* 원본 모바일 규칙(.name·.date 가 늘어날 몫 2)은 클래스 없는 티커 아이디 칸에 안 걸려 시각 칸이 눌려
       "2분 전" 이 세로로 쪼개졌다(390px 실측). 아이디 칸에 같은 몫을 주고 시각은 한 줄로 둔다. */
    .newsticker > ul > li > span:not([class]) {flex-grow: 2; flex-shrink: 2;}
    .newsticker > ul > li > span.date {flex: 0 0 auto; width: auto; white-space: nowrap;}
}