@charset "utf-8";

/****************************************************************************************************************************************
before-intro 시작
*****************************************************************************************************************************************/
.before-intro {position: relative; z-index: 1; margin:0; padding:20px 20px; display: flex; justify-content: center; align-items: center;} 

/* video */
.video-wrap {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden;}
.video {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; filter: brightness(0.4);}

/* intro-caption */
.intro-caption {position: fixed; left: 0; right: 0; bottom: 200px; margin: 0 auto; width: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.intro-logo {max-width: 100%;}

.intro-caption > h3 {margin:30px auto 0 auto; text-align:center; font-size:36px; font-weight: 500; color: #d6a5ff; font-family: "Inter", sans-serif;}
.intro-caption > p {margin:10px auto 30px auto; text-align:center; font-size:16px; color: #fff; font-family: "Inter", sans-serif;}
.intro-caption > button {margin: 0 auto; padding: 18px 32px; width: 60%; font-size: 14px; font-weight: 700; font-family: "Inter", sans-serif; color: #fff; background: #8600f7; border: 1px solid #7d2cc5; border-radius: 30px;}

/****************************************************************************************************************************************
로그인후 메인페이지 시작
*****************************************************************************************************************************************/
/* Main hero */
.main-hero,
.slide {position: relative; height: 505px;}
.main-hero .slide_img {position: relative; top: 50%; left: 0; right:0; height:100%; transform: translateY(-50%);}
.main-hero .slide_img > div {position: relative; width: 100%; height: 100%;}

.caption {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin:0; padding:0 15px; width:1200px;}
.caption_inner > h4 {margin:0 auto 5px auto; font-size:70px; font-weight:700; color:#fff; text-shadow: 1px 1px 3px #000;}
.caption_inner > p {margin:0; font-size: 24px; font-weight:400; color:rgba(255,255,255,0.9); text-shadow: 1px 1px 3px #000;}
.caption_inner > .btn-play {margin:20px 0 0 0; padding:10px 20px; display:flex; justify-content: center; align-items: center; font-size:16px; font-weight: 500; color:#ae61fb; background:#030303; border: 1px #515151 solid; border-radius: 5px;}
.caption_inner > .btn-play > img {margin-right:5px; width: 24px; filter: invert(57%) sepia(96%) saturate(4907%) hue-rotate(248deg) brightness(92%) contrast(101%);}

.ani-img {position: absolute; z-index:1; animation: ani-img 1s ease infinite alternate;}
@keyframes ani-img {
    0% {transform: translateY(-3%);}
    100% {transform: translateY(3%);}
}

.csino-ani {top: 10px; left: 11%; }
.csino-ani > img {width: 200px;}

.slot-ani {right: 0; bottom: -26px;}
.slot-ani > img {width: 500px;}

.sport-ani {right: 20px; bottom: 0;}
.sport-ani > img {width: 300px;}

@media (hover: hover) and (pointer: fine) {
    .caption_inner > .btn-play:hover {color:#fff;}
    .caption_inner > .btn-play:hover > img {filter: brightness(0) invert(1);}
}

/* slick arrow */
.slick-prev,
.slick-next {z-index: 99;}
.slick-prev {left:10px;}
.slick-prev::before {content: '\f2fd'; font-size: 30px; font-family: "remixicon"; font-weight: 500;}

.slick-next {right:80px;}
.slick-next::before {content: '\f301'; font-size: 30px; font-family: "remixicon"; font-weight: 500;}

/****************************************************************************************************************************************
main-game 시작
*****************************************************************************************************************************************/
.main-game {position: relative; margin: 0 auto; padding:50px 0; width: 100%;}
ul.game-link {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:80px; justify-content: center; align-items: center;}
ul.game-link > li {position: relative; width: calc(100% / 3); transition: all 0.2s;}
ul.game-link > li > img {transition: all 0.25s ease-in-out 0.045s;}
ul.game-link > li > .game-tit {position: absolute; bottom: 0; z-index: 8; padding: 30px 0 15px 0; width: 100%; display: flex; align-items: center; justify-content: center; background:url('../img/main/tab-link-game-tit.png') center center no-repeat; background-size: 100% 100%; transition: all 0.2s;}
ul.game-link > li > .game-tit > span {color: #7a4500;font-size: 24px; font-weight:600;}

@media (hover: hover) and (pointer: fine) {
    ul.game-link > li:hover > img {transform: scale(1.145); filter: brightness(109%) drop-shadow(5px 5px 6px rgba(0,0,0,0.25)); animation: link-img 1s ease-in 0s infinite alternate;}
    ul.game-link > li:hover > .game-tit {transform: skew(14deg, -14deg); bottom: 20px; filter: brightness(115%) drop-shadow(5px 5px 6px rgba(0, 0, 0, 0.5));}
}


@keyframes link-img {
    0% { transform: translateY(0%);}
    100% { transform: translateY(5%);}
}

/****************************************************************************************************************************************
latest news 시작
*****************************************************************************************************************************************/
.latest-news {position: relative; margin: 0 auto; padding:0 0 50px 0; width: 100%;}
.latest-inner {position: relative; margin:0 auto; padding: 30px 35px; width: 1430px; display: flex; gap:20px; justify-content: center; background: #0d0e0e; border-radius: 12px;}

/* news-menu */
ul.news-menu {order: 2; position: relative; margin:0; padding:0; width: calc(25% - 20px);}
ul.news-menu > li {margin:10px auto; padding:15px 20px; width:100%; text-align: left; background: #000; border:1px #323232 solid; border-radius: 10px; cursor: pointer;}
ul.news-menu > li > h3 {font-size: 16px; font-weight: 600; color: #868686;}
ul.news-menu > li > p {display:none}
ul.news-menu > li.active {background: #272727;}
ul.news-menu > li.active > h3 {color: #8601f6;}
ul.news-menu > li.active > p {display:block; margin-top:5px; font-size:13px; color:#adadad;}
ul.news-menu > li.active > p > span {margin-left:10px;}

/* news-con */
.news-con {order: 1; position: relative; margin:0 auto; padding:0; width:calc(100% - 25%);}

.news-list {display:none; justify-content: center; position: relative; margin:0 auto; padding:0; width: 100%; height: 100%;}
.news-list.active {display: flex;}

.new-txt,
.new-img {position: relative; padding:10px 0; width: calc(100% / 2);}
.new-img > img {width: 100%; height: 100%; border-radius: 10px; overflow: hidden;}

.new-txt {position: relative; padding-right: 15px;}
.new-hd {position: relative; margin:0; padding:0; width: 100%; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: #fff;}

.new-ft > img {display:block; margin:25px 0 10px 0;height: 24px;}
.new-ft > h3 {position: relative; margin-bottom: 15px; font-size: 32px; font-weight: 600; color:#868686;}
.new-ft > p {position: relative; margin-bottom: 15px; font-size: 12px; font-weight: 500; color:#868686;}

.new-ft > button {margin:20px 0 0 0; padding:10px 20px; display:flex; justify-content: center; align-items: center; font-size:16px; font-weight: 500; color:#ae61fb; background:#000; border: 1px #ae61fb solid; border-radius: 5px;}
.new-ft > button > img {margin-right:5px; width: 24px; filter: invert(57%) sepia(96%) saturate(4907%) hue-rotate(248deg) brightness(92%) contrast(101%);}

@media (hover: hover) and (pointer: fine) {
    .new-ft > button:hover {color:#fff; background: #868686; border-color:#868686;}
    .new-ft > button:hover > img {filter: brightness(0) invert(1);}
}

/****************************************************************************************************************************************
메인게임리스트 시작
*****************************************************************************************************************************************/
.main-slot {position:relative; margin:0 auto; padding:0 0 50px 0; width: 100%;}

.main-tit {padding:0; line-height: 40px; text-align:left; font-size:22px; font-weight: 700; color:#868686;}

/* main-gameList */
.main-gameList {position: relative; width:100%;}
.main-gameList .slick-slide {margin:30px 10px;}
.main-item {position: relative; margin:30px 0; height: 250px; background:#000; border-radius: 10px; overflow: hidden; cursor: pointer;}
.main-item > img {width:100%; transition:transform 0.7s ease-out; border-radius: 10px; overflow: hidden;}

.item-con {position: absolute; top: 0; left: 0; padding:0 20px; width: 100%; height: 145%; text-align: left; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 40%, transparent 60%); transform: translateY(-10%); transition: transform .85s cubic-bezier(0.23,1,0.32,1);}
.item-txt {position:relative; transform: translateY(210px);}
.item-txt > p {margin-bottom:5px; opacity: 1; transform: translate(0px, 0px); font-size: 13px; color:#fff; visibility:hidden;} 
.item-txt > h3 {opacity: 1; transform: translate(0px, 0px); font-size: 22px; color:#fff; visibility:hidden; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.item-txt > button {opacity: 0; transform: translate(0px, 0px); margin:20px 0 0 0; padding:10px 20px; visibility:hidden; display:flex; justify-content: center; align-items: center; font-size:16px; font-weight: 500; color:#ae61fb; background:#000; border: 1px #ae61fb solid; border-radius: 5px;}
.item-txt > button > img {margin-right:5px; width: 24px; filter: invert(57%) sepia(96%) saturate(4907%) hue-rotate(248deg) brightness(92%) contrast(101%);}

.item-txt > p {animation:fadeInUp 1s both 0.3s; visibility:visible;}
.item-txt > h3 {animation:fadeInUp 1s both 0.5s; visibility:visible;}
.item-txt > button {opacity: 0; animation:fadeInUp 1s both 0.5s; visibility:visible;}

.main-gameList .slick-prev,
.main-gameList .slick-next {display:inline-block; position: absolute; top: -23px; bottom: 0; z-index:2; cursor: pointer;}
.main-gameList .slick-prev {right: 70px !important; left: unset !important;}
.main-gameList .slick-next {right: 15px;}
.main-gameList .slick-prev::before,
.main-gameList .slick-next::before {font-family: "remixicon"; padding: 5px 5px; text-align: center; font-size: 25px; color: #fff; border: 1px #fff solid;}
.main-gameList .slick-prev::before {content: "\ea64";}
.main-gameList .slick-next::before {content: "\ea6e";}


@media (hover: hover) and (pointer: fine) {
    .main-item:hover {box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);}
    .main-item:hover > img {transform:scale(1.1)}
    .main-item:hover > .item-con {transform: translateY(-30%);}

    .main-item:hover > p  {transform: translateY(0, 210px);}
    .main-item:hover > h3 {transform: translateY(0, 210px);}
    .main-item:hover > button {opacity: 1; transform: translateY(0, 210px);}

    .item-txt > button:hover {color:#fff; background: #868686; border-color:#868686;}
    .item-txt > button:hover > img {filter: brightness(0) invert(1);}
}


/****************************************************************************************************************************************
main-border section
*****************************************************************************************************************************************/
.main-border {position: relative; margin:0 auto; padding:0; width: 100%;}
.mainBo-inner {position: relative; margin:0 auto; padding:0 15px; width: 1430px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px;}
.board-group {position: relative;}
.board-hd {margin:0 auto; padding: 0 20px; width: 100%; line-height: 50px; text-align: left; font-size: 16px; font-weight: 500; background: #222;}

.mainBo-con {margin:0 auto; padding:20px 30px; width:100%; height:320px; background: rgba(0,0,0,0.5); 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: 44px; font-weight:500;}
.mainBo-con > table th {width:74%; text-align: left; font-size: 16px; 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: #8d8d8d;}

ul.real-list {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
ul.real-list > li {position: relative; margin:0; padding:0; width:100%; height: 44px; display: flex; align-items:center; justify-content: space-between; cursor: pointer;}
ul.real-list > li > span {flex: 1; text-align: left; font-size: 16px; color:#fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.real-list > li > span.amount {flex: 0 0 40%; text-align: right; color: #707070;}
ul.real-list > li > span.amount > b {color: #8601f6;}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width:1900px) {
    .csino-ani {left:3%;}
    .csino-ani > img {width: 150px;}
}/* 미디어쿼리문 끝 */


@media (max-width:1480px) {
    .caption {padding: 0 0 0 150px; width: 100%;}

    /* 최신뉴스 */
    .latest-inner {width: 100%;}
    .new-img > img {height: 100%;}

    /* 메인게임리스트 */    
    .item-txt > h3 {letter-spacing: -0.5px;}
    .item-txt > button {padding:8px 15px; font-size: 14px;}
    .item-txt > button > img {width: 20px;}

    /* 메인공지 */
    .mainBo-inner {width: 100%; gap: 20px;}
}/* 미디어쿼리문 끝 */

@media (max-width:1200px) {
    .latest-inner {flex-direction: column;}
    ul.news-menu {order: 1; width: 100%;}
    .news-con {order: 2;  width: 100%;}    
}/* 미디어쿼리문 끝 */

@media (max-width: 992px) {
    /* before-intro */
    .intro-caption {padding:0 20px; width:100%; transform: translate(0px, 30%);}
    .intro-caption > img {width: 80%;}
    .intro-caption > h3 {margin:15px auto 0 auto; font-size: 30px;}

    /* 로그인후 메인페이지 */
    .main-hero {margin-top: 50px;}
    .slick-dotted.slick-slider {margin-bottom:0;}

    .caption {padding:0 20px; top:40%;}
    .caption_inner {margin:0 auto; padding:20px 20px; text-align: center; background: rgba(0,0,0,0.6);}
    .caption_inner > h4 {margin:0 auto 10px auto; font-size: 34px; text-align: center;}
    .caption_inner > p {font-size: 16px; text-align: center;}
    .caption_inner > .btn-play {margin:20px auto 0 auto; font-size: 14px;}
    .caption_inner > .btn-play > img {width: 18px;}

    .csino-ani,
    .slot-ani,
    .sport-ani {display: none;}

    .slick-dots li button {padding:3px;}

    .main-hero .slick-dots {bottom:20px; margin: 15px auto; padding: 0; text-align: center;}
    .main-hero .slick-dots li {display: inline-block; margin:0 4px; width: unset; height: unset;}
    .main-hero .slick-dots li button {text-shadow: none;color: transparent;background: #ccc; border: none; width: 3px; height: 3px; border-radius: 50%; font-size: 0;}
    .main-hero .slick-dots li button:before {display: none;}
    .main-hero .slick-dots li:hover button {background: #fff;}
    .main-hero .slick-dots li.slick-active button {width:18px; background: #fff; border-radius: 25px;}

    ul.game-link {gap:20px;}
    ul.game-link > li > .game-tit > span {font-size: 20px;}

    .main-item:hover {box-shadow:unset;}
    .main-item:hover > img {transform:unset;}
    .item-con,
    .main-item:hover > .item-con {transform: translateY(0); height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, transparent 100%);}
    .item-txt {transform: translateY(130px);}
    .item-txt > h3 {font-size: 18px;}
    .item-txt > button {margin: 10px 0 0 0;}

    .main-gameList .slick-dots {bottom:-30px; margin: 15px auto; padding: 0; text-align: center;}
    .main-gameList .slick-dots li {display: inline-block; margin:0 4px; width: unset; height: unset;}
    .main-gameList .slick-dots li button {text-shadow: none;color: transparent;background: #ccc; border: none; width: 3px; height: 3px; border-radius: 50%; font-size: 0;}
    .main-gameList .slick-dots li button:before {display: none;}
    .main-gameList .slick-dots li:hover button {background: #fff;}
    .main-gameList .slick-dots li.slick-active button {width:18px; background: #fff; border-radius: 25px;}

    /* 메인공지 */
    .main-border {margin:20px auto;}
    .mainBo-inner {grid-template-columns: repeat(1, 1fr);}
    .board-group {width: 100%;}
    .board-hd {height: 46px; line-height: 46px; font-size: 16px;}
    .mainBo-con {padding: 10px 10px; height: 200px;}

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

@media (max-width:800px) {
    .caption_inner > .btn-play {font-size: 13px;}
    .caption_inner > .btn-play > img {width: 14px;}

    ul.game-link {flex-direction: column; gap: 0;}
    ul.game-link > li {margin:20px auto; width: 100%;}

    /* 최신뉴스 */
    ul.news-menu {order:2;}
    .news-con {order: 1;}

    .new-img {display: none;}
    .new-txt {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:640px) { 
    .caption {padding:0 10px;}
    .caption_inner > p {font-size: 14px; letter-spacing: -1px;}

    /* 최신뉴스 */
    .new-ft > img {margin: 20px 0 5px 0;}
    .new-ft > h3 {margin-bottom:10px; font-size: 28px; letter-spacing: -1px;}

    .new-ft > button {margin-top:10px; padding:8px 15px; font-size: 14px;}
    .new-ft > button > img {width: 20px;}

    ul.news-menu > li {padding:10px 15px;}

    /* 메인게임리스트 */
    .main-slot, 
    .main-casino {padding:30px 0 50px 0}

    .tit-chip {top:-50px;}
    .tit-chip > img {width: 45px;}

    .main-tit {padding:10px 0 0 0; font-size: 20px;}
}/* 미디어쿼리문 끝 */