@charset "utf-8";

/****************************************************************************************************************************************
hero section
*****************************************************************************************************************************************/
.hero {position: relative; margin: -45px 0 0; padding: 45px 0 0; width: 100%; height: 460px; background: #030006; overflow: hidden;}
.hero::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../Img/main/banner-bg.jpg') top center no-repeat;}

.hero-inner {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%;}

/* hero-banner */
.hero-banner {position: absolute; top:0; left:0; right:0; width: 100%; height: 100%;}
.hero-banner > img {position: absolute; bottom:0;}

/* circle배경 */
.circle-bg {position: absolute; left: 0; right: 0; top: 48.75%; transform: translateY(-50%); margin: 0 auto; width: 33%; min-width: 500px; height: 150%;}
.circle-bg .circle {position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background: rgba(48, 19, 105, 0.1); border-radius: 50%; box-shadow: 0 0 10px rgba(8, 3, 19, 0.15);}
.circle-bg .c-01 {animation: c-01 1.5s ease infinite;}
@keyframes c-01 {
    0% {background: rgba(48, 19, 105, 0.2);}
    20% {background: rgba(48, 19, 105, 0.2);}
    35% {background: rgba(48, 19, 105, 0.5);}
    50% {background: rgba(48, 19, 105, 0.2);}
    100% {background: rgba(48, 19, 105, 0.2);}
}

.circle-bg .c-02 {width: 66.67%; height: 66.67%; animation: c-02 1.5s ease infinite;}
@keyframes c-02 {
    0% {background: rgba(48, 19, 105, 0.2);}
    10% {background: rgba(48, 19, 105, 0.2);}
    25% {background: rgba(48, 19, 105, 0.5);}
    40% {background: rgba(48, 19, 105, 0.2);}
    100% {background: rgba(48, 19, 105, 0.2);}
}

.circle-bg .c-03 {width: 33.34%; height: 33.34%; animation: c-03 1.5s ease infinite;}
@keyframes c-03 {
    0% {background: rgba(48, 19, 105, 0.2);}
    15% {background: rgba(48, 19, 105, 0.5);}
    30% {background: rgba(48, 19, 105, 0.2);}
    100% {background: rgba(48, 19, 105, 0.2);}
}


/* 이미지 */
.slot-cen {width:19.2%; left:180px; bottom: 0; z-index: 1; animation: slot-cen 12s ease infinite;}
@keyframes slot-cen {
	0% {bottom:-5%; opacity:0;}
	10% {bottom:0; opacity:1;}
	95% {bottom:0; opacity:1;}
	100% {bottom:0; opacity:0;}
}
.slot-left {width:10%; left:90px; transform: translateX(90px); animation:slot-left 12s ease infinite;}
@keyframes slot-left {
	0% {left:5%;opacity:0;}
	10% {left:5%;opacity:0;}
	18% {left:0; opacity:1;}
	95% {left:0; opacity:1;}
	100% {left:0; opacity:0;}
}
.slot-right {width:16%; left:420px; transform: translateX(420px); animation:slot-right 12s ease infinite;}
@keyframes slot-right {
	0% {left:-5%;opacity:0;}
	10% {left:-5%;opacity:0;}
	18% {left:0; opacity:1;}
	95% {left:0; opacity:1;}
	100% {left:0; opacity:0;}
} 


.giri-cen {width:16%; right:220px; z-index: 2; animation: slot-cen 12s ease infinite;}
@keyframes slot-cen {
    0% {bottom:-5%; opacity:0;}
	10% {bottom:0; opacity:1;}
	95% {bottom:0; opacity:1;}
	100% {bottom:0; opacity:0;}

}
.giri-left {width: 11.47%; right:420px; z-index: 1; transform: translateX(-420px); animation:giri-left 12s ease infinite;}
@keyframes giri-left {
	0% {right:-5%;opacity:0;}
	10% {right:-5%;opacity:0;}
	18% {right:0; opacity:1;}
	95% {right:0; opacity:1;}
	100% {right:0; opacity:0;}
} 
.giri-right {width:10%; right:100px; z-index: 1; transform: translateX(-100px); animation:giri-right 12s ease infinite;}
@keyframes giri-right {
	0% {right:5%;opacity:0;}
	10% {right:5%;opacity:0;}
	18% {right:0; opacity:1;}
	95% {right:0; opacity:1;}
	100% {right:0; opacity:0;}
}

.roulette {width:17.5%; right:480px; transform: translateX(-480px); animation:roulette 12s ease infinite;}
@keyframes roulette {
    0% {right:-5%;opacity:0;}
	15% {right:-5%;opacity:0;}
	25% {right:0; opacity:1;}
	95% {right:0; opacity:1;}
	100% {right:0; opacity:0;}
}
.slot {right:5px; width: 12%; transform: translateX(-5px); animation:slot 12s ease infinite;}
@keyframes slot {
	0% {right:5%;opacity:0;}
    15% {right:5%;opacity:0;}
	25% {right:0; opacity:1;}
	95% {right:0; opacity:1;}
	100% {right:0; opacity:0;}
}


/* swiper */
.swiper-container {position: relative; width: 100%; height: 380px;}
.swiper-slide > .caption {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 9; opacity: 0; transition:1.2s; margin: 0 auto; width: 100%; text-align: center;}
.swiper-slide > .caption > h3 {position: absolute; top: -110px; opacity: 0; transition: 0.4s; width: 100%; font-size: 48px; font-weight: 100;}
.swiper-slide > .caption > h4 {position: absolute; bottom: -110px; opacity: 0; transition: 0.8s 0.4s; width: 100%; font-size: 48px; font-weight: 600;}

.swiper-slide-active > .caption  {opacity: 1;}
.swiper-slide-active > .caption > h3 {top: -70px; opacity: 1;}
.swiper-slide-active > .caption > h4 {bottom: -70px; opacity: 1;}

.swiper-pagination {left:0; right:0;}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {bottom:0 !important;}

.swiper-pagination-bullet {width: 14px; height: 14px; background:#0c1724; border:2px #526182 solid; border-radius: 50%; opacity: 0.7 !important; outline: none;}
.swiper-pagination-bullet-active {background: #673ab7; border-color: #9164e1; opacity: 1 !important}


/****************************************************************************************************************************************
category section
*****************************************************************************************************************************************/
.category {position: relative; margin:0 auto; padding:0; width: 100%;}
.category-inner {position: relative; margin:0 auto; padding: 30px 15px; width: 1430px;}

ul.cate-list {position: relative; margin:0 auto; padding:0; width:80%; display: flex; gap:15px; justify-content: center; align-items: center;}
ul.cate-list > li {position: relative; padding:0 10px; width: calc(100% / 2 - 15px); height: 100px; display: flex; justify-content: center; align-items: center; background: #14172c; border:1px #343434 solid; border-radius: 5px; transition: 0.3s; overflow: hidden; cursor: pointer;
    filter: grayscale(100%);
}
ul.cate-list > li:first-child {background:#170d03 url('../Img/main/cate-casino.png') no-repeat 50%; background-size: cover;}
ul.cate-list > li:last-child {background:#0c0e27 url('../Img/main/cate-slot.png') no-repeat 50%; background-size: cover;}
ul.cate-list > li > .txt-panel {margin-left:100px; text-align: left;}

ul.cate-list2 > li:first-child {background:#170d03  no-repeat 50%; background-size: cover;}
ul.cate-list2 > li:last-child {background:#0c0e27  no-repeat 50%; background-size: cover;}
ul.cate-list2 > li > .txt-panel {margin-left:100px; text-align: left;}

.txt-panel > .cate-kr {margin-bottom:5px; color: #fff; font-size: 28px; font-weight: 600; text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;}
.txt-panel > .cate-en {color: #aaa; font-size: 16px;  text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;}

ul.cate-list > li:first-child.active {filter: grayscale(0); border: 1px solid #765437;}
ul.cate-list > li:last-child.active {filter: grayscale(0); border: 1px solid #0e6ab9;}
ul.cate-list > li.active > .txt-panel > .cate-kr {color: #ffe65c;}
ul.cate-list > li.active > .txt-panel > .cate-en {color: #fff;}


@media (hover: hover) and (pointer: fine) {
    ul.cate-list > li:first-child:hover {filter: grayscale(0); border: 1px solid #765437;}
    ul.cate-list > li:last-child:hover {filter: grayscale(0); border: 1px solid #0e6ab9;}    
    ul.cate-list > li:hover > .txt-panel > .cate-kr {color: #ffe65c;}
    ul.cate-list > li:hover > .txt-panel > .cate-en {color: #fff;}
}

/****************************************************************************************************************************************
game-list section
*****************************************************************************************************************************************/
.basic-sec {position: relative; margin:0 auto; padding:0; width: 100%;}

.game-view{display: none; position: relative; margin:0 auto; padding:15px 0; width:100%;}
.game-view.active {display: block;}

ul.game-list {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap: 15px; justify-content: center; align-items: center; flex-wrap: wrap;}
ul.game-list > li {position: relative; margin:0; padding:0; display: flex; background:url('../img/main/game-bg2.jpg') center no-repeat; background-size: cover; 
    overflow: hidden; cursor: pointer;
    transition: 0.6s;
}
ul.casino-list > li {width: calc(100% / 5 - 15px); height: 240px;}
ul.slot-list > li {width: calc(100% / 6 - 15px); height: 198px;}

.game-logo {position:absolute; top:40px; left:15px; z-index: 1; margin:0; text-align: left; opacity: 0; animation: gameLogo 0.5s ease 0.3s 1 forwards;
    transition: 0.6s;
}
.game-logo > img {margin:0 0 2px 0;}
.game-logo > .game-tit {font-size: 18px; font-weight: 500; color:#ffeb3b; text-shadow:#000 1px 1px 1px;}
@keyframes gameLogo {
    0% {opacity: 0; transform: scale(0.5);}
    100% {opacity: 1;transform: scale(1.0);}
}

.game-item {position: absolute; top:2px; bottom:2px; right:0; opacity: 0; margin: 2px 0; animation: 1s ease 0s 1 normal forwards running gameItem; overflow: hidden;
    transition: 0.6s;
}

ul.casino-list > li .game-item {height: 235px;}
ul.slot-list > li .game-item {height: 193px;}

@keyframes gameItem {
    0% {opacity: 0;transform: translateX(10%);}
    100% {opacity: 1; transform: translateX(0);}
}

@media (hover: hover) and (pointer: fine) {
    ul.game-list > li:hover > .game-logo  {top:60px; transition: 0.6s;}
    ul.game-list > li:hover > .game-item {right:-25px; transition: 0.6s;}
}


/****************************************************************************************************************************************
메인 Board 시작
*****************************************************************************************************************************************/
.main-border {position:relative; z-index: 2; margin: 30px 0 0; padding: 50px 0; width: 100%; background: #202045; border-radius: 100px; overflow: hidden;}
.mainBo-inner {position: relative; margin:0 auto; padding:0 15px; width: 1430px; text-align: center; display: flex; gap:40px; justify-content: center;}
.board-group {position: relative; width: calc(100% / 3 - 40px);}

.board-hd {position: relative; margin: 0 0 10px; padding: 0 15px; width: 100%; height: 50px; display: flex; justify-content:space-between; align-items: center; background: #2e2a5f; border: 1px #524ba5 solid;}
.board-hd > h3 {position: relative; margin-right: 15px; padding-right: 15px; font-weight: 500; display: flex; align-items: center;} 
.board-hd > h3 > i {margin:3px 5px 0 0; font-size: 18px; color: #fef57c;}
.board-hd > .hd-icon {position: relative; font-weight: 500; cursor: pointer;}
.board-hd > .hd-icon > i {display: inline-block; margin-right:5px; font-size:18px; color: #fef57c; transition: 0.3s;}

@media (hover: hover) and (pointer: fine) {
    .board-hd > .hd-icon:hover {color: #fef57c;}
    .board-hd > .hd-icon:hover > i {transform: rotate(180deg);}
}

/* 메인 공지사항 및 메인 이벤트 */
.mainBo-con {position: relative; margin:0 auto; padding:0 15px; width: 100%;}
.mainBo-con > table {margin:0 auto 20px auto; padding:0; width: 100%;}
.mainBo-con > table th,
.mainBo-con > table td {padding:0 5px; height: 35px; font-weight:500;}
.mainBo-con > table th {width:74%; text-align: left; cursor: pointer;}
.mainBo-con > table th > span {display: block; width:280px;text-align: left; color:#fff; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; overflow: hidden;}
.mainBo-con > table td {text-align: right; width: 26%; color: #6b798f;}

@media (hover: hover) and (pointer: fine) {
    .mainBo-con > table tr:hover th > span {color: #d5beff;}
    .mainBo-con > table tr:hover td {color: #744ac0;}
}

/* 메인 실시간 입출금 */
.main-finance {position: relative;}
.finance-hd {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; border: 1px #524ba5 solid;}
.finance-hd > button {width: calc(100% / 2); height: 50px; color: #fff; font-weight: 700; background: #2e2a5f; border:none}
.finance-hd > button.exchange {border-right: 1px #524ba5 solid;}
.finance-hd > button.active {background: #5c479e;}

.realtime-con {position: relative; margin:0 auto; padding: 6px 6px; width: 100%; height: 280px; background: #191932; border: 1px #2d2b40 solid; overflow: hidden;}
.newsticker {display:none; opacity: 0;position: relative; animation: realtimeAnim 0.5s ease 1 forwards; overflow: hidden;}
@keyframes realtimeAnim {
    0% {opacity: 0; transform: scale(0.5);}
    100% {opacity: 1;transform: scale(1.0);}
}
.newsticker.active {display: block;}

.newsticker > ul {position: relative; margin:0 auto; padding:0; width: 100%; height:100%; overflow: hidden;}
.newsticker > ul > li {padding:0 5px; width:100%; height: 46px; display: flex; align-items:center; justify-content: space-between; cursor: pointer; transition: 0.3s; border-top: dashed 1px rgba(152, 177, 223, 0.25);}
.newsticker > ul > li > span {font-size: 15px; font-weight: 500;}
.newsticker > ul > li > span:nth-child(1) {color: #fff; text-align: center;}
.newsticker > ul > li > span:nth-child(2) {color: #57d5ff; text-align: right; font-size: 18px; letter-spacing: -1px;}
.newsticker > ul > li > span:nth-child(3) {color: #9fb3ca; text-align: right;}
.tag {display:inline-block; margin-right: 10px; padding: 0; width: 36px; line-height: 20px; border-radius: 2px; font-size: 12px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
.blue-tag {background: linear-gradient(180deg, #48c1ee, #2156c0); box-shadow: 0 0 10px rgba(0, 48, 182, 1.0);}
.red-tag {background: linear-gradient(180deg, #f67fa5, #fe0e4f); box-shadow: 0 0 10px rgba(254, 20, 84, 0.5);}

@media (hover: hover) and (pointer: fine) {
    .newsticker > ul > li:hover {background:#293b54;} 
}

/* 메인 제휴문의 */
.customer-con {position: relative;}
.cs-panel {margin: 10px 0; padding: 5px 10px; width: 100%; display: flex; align-items: center;}
.cs-icon {position:relative; margin: 0 15px 0 0; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 18px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); color: #fff; background:#673ab7; border: 1px #673ab7 solid; border-radius: 50%;}
.cs-icon > i {position:relative; z-index: 1; font-size: 26px; color:#fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
.cs-info {font-size:18px; font-weight: 500; color: #fff;}


.quick-sns {position: relative; margin: 15px 0 0;}
.quick-hd {padding: 10px 0; margin: 0 0 15px;  width: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(0deg, rgba(107, 200, 203, 0), rgba(41, 52, 72, 1.0), rgba(107, 200, 203, 0));}
.quick-hd > img {margin-right: 10px; filter: drop-shadow(0 0 10px rgba(0, 133, 225, 1.0));}
.quick-hd > h3 {font-size: 26px; font-weight: 700;}

ul.main-sns {position: relative; margin:20px auto 0 auto; padding:0; width: 100%; display: flex; justify-content: center;}
ul.main-sns > li {position:relative; margin:0 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; gap:5px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); cursor: pointer;}
ul.main-sns > li > i {font-size:18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);}
ul.main-sns > li:nth-child(1) {color:#000; background: linear-gradient(#fee267, #ffa722);}
ul.main-sns > li:nth-child(2) {color:#fff; background: linear-gradient(#7777d1, #4f52c5);}
ul.main-sns > li:nth-child(3) {color:#fff; background-image: linear-gradient(#ff688c, #ff1a4c);}
ul.main-sns > li:nth-child(4) {color:#fff; background: linear-gradient(#48c1ee, #2156c0);}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1460px) {
    .hero-inner,
    .category-inner,
    ul.cate-list,
    .mainBo-inner {width: 100%;}
    .hero {height:400px;}
    .swiper-container {height: 300px;}

    .slot-right {left: 380px; transform: translateX(380px);}
    .giri-cen {right:195px;}
    .giri-left {right:350px; transform: translateX(-350px);}
    .roulette {right: 400px; transform: translateX(-400px);}

    .swiper-slide > .caption > h3 {top: -100px; font-size:40px;}
    .swiper-slide > .caption > h4 {bottom: -100px; font-size:40px;}
    .swiper-slide-active > .caption > h3 {top: -60px;}
    .swiper-slide-active > .caption > h4 {bottom: -60px;}
    
}/* 미디어쿼리문 끝 */

@media (max-width: 1200px) {
    .slot-cen {width:22%; left:80px;}
    .slot-left {width:13%; left:-20px; transform: translateX(0px);}
    .slot-right {width:21%; left: 240px; transform: translateX(240px);}

    .giri-cen {width:21%; right:100px;}
    .giri-left {width:15%; right:240px; transform: translateX(-240px);}
    .giri-right {width:13%; right:-20px; transform: translateX(0px);}

    .roulette,
    .slot {display: none !important;}

    ul.casino-list > li {width: calc(100% / 4 - 15px); border: 2px rgb(255, 193, 7, 0.7) solid;}
    ul.slot-list > li {width: calc(100% / 5 - 15px); border: 2px rgb(255, 193, 7, 0.7) solid;}

    .main-border {margin:15px 0; padding:0; background: none; border-radius: 0;}
    .mainBo-inner {gap: 20px;}
    .board-group {width: calc(100% / 3 - 20px);}
}/* 미디어쿼리문 끝 */

@media (max-width: 1024px) {
    .hero {margin:87px 0 0 0; padding:0; height: 300px;}
    .swiper-container {height: 250px;}

    .mainBo-inner {flex-wrap: wrap;}
    .board-group {width: 100%;}
}/* 미디어쿼리문 끝 */


@media (max-width: 992px) {
    .hero {height: 300px;}
    .swiper-container {height: 200px;}

    .slot-right {left: 200px; transform: translateX(200px);}

    .giri-cen {right:80px;}
    .giri-left {right:200px; transform: translateX(-200px);}

    .swiper-slide > .caption > h3 {top: -80px; font-size:30px;}
    .swiper-slide > .caption > h4 {bottom: -80px; font-size:30px;}
    .swiper-slide-active > .caption > h3 {top: -40px;}
    .swiper-slide-active > .caption > h4 {bottom: -40px;}

    .txt-panel > .cate-kr {font-size: 20px;}

    ul.casino-list > li {width: calc(100% / 3 - 15px);}
    ul.slot-list > li {width: calc(100% / 4 - 15px);}

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

@media (max-width: 767px) {
    .hero {height: 200px;} 
    .swiper-container {height: 170px;}

    .slot-cen {left:30px;}
    .slot-right {left: 100px; transform: translateX(100px);}

    .giri-cen {right:40px;}
    .giri-left {right:100px; transform: translateX(-100px);}

    .swiper-slide > .caption > h3 {top: -80px; font-size:28px;}
    .swiper-slide > .caption > h4 {bottom: -80px; font-size:20px;}
    .swiper-slide-active > .caption > h3 {top: -40px;}
    .swiper-slide-active > .caption > h4 {bottom: -40px;}

    .category-inner {padding:20px 0 5px 0;}
    ul.cate-list {gap:5px;}
    ul.cate-list > li {height: 65px;}
    ul.cate-list > li > .txt-panel {margin:0 auto; padding:0 0 5px 0; text-align: center;}
    .txt-panel > .cate-kr {margin:0; font-size: 18px;}
    .txt-panel > .cate-en {font-size: 12px;}
    

    ul.game-list {gap:5px;}
    ul.casino-list > li {width: calc(100% / 2 - 5px); height: 200px;}
    ul.casino-list > li .game-item {right:-15px; height: 200px;}

    ul.slot-list > li {width: calc(100% / 2 - 5px); height: 190px;}
    ul.slot-list > li .game-item {right:-15px; height: 180px;}

    .game-logo {top:unset; bottom: 20px;}
    .game-logo > img {width:70%;}

    .kr-txt {font-size: 14px; letter-spacing: -1px;}
    .en-txt {padding:0; font-size: 10px; letter-spacing: -1px;}

    .mainBo-con {padding:0;}
    .newsticker > ul > li .name,
    .newsticker > ul > li > span:nth-child(3) {font-size: 12px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 500px) {
    .hero {height: 150px;}
    .swiper-container {height: 140px;}

    .circle-bg {min-width: 300px;}

    .slot-cen {left:20px; width:28%;}
    .slot-left {left:-30px; width:20%;}
    .slot-right {left: 65px; width:28%; transform: translateX(65px);}

    .giri-cen {right:20px; width:26%;}
    .giri-left {right:70px; width:19%; transform: translateX(-70px);}
    .giri-right {width: 17%;} 

    .swiper-slide > .caption > h3 {top: -60px; font-size:28px; font-weight: bold; text-shadow: #000 1px 1px 1px;}
    .swiper-slide > .caption > h4 {bottom: -60px; font-size:18px; text-shadow: #000 1px 1px 1px;}
    .swiper-slide-active > .caption > h3 {top: -35px;}
    .swiper-slide-active > .caption > h4 {bottom: -35px;}

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


@media (max-width: 360px) {
    .circle-bg {min-width: 200px;}

    .mainBo-con > table th > span {width: 230px;}
}/* 미디어쿼리문 끝 */