@charset "utf-8";

/****************************************************************************************************************************************
로그인 전 메인
*****************************************************************************************************************************************/
.before-main {position: relative; margin:-130px auto 0 auto; padding:0; width: 100%; height: calc(var(--vh, 1vh) * 100); background: url("../img/before-main/slide-bg.jpg") center no-repeat; background-size:cover; overflow: hidden;}
.before-main .swiper-slide {position: relative; margin:0 auto; padding:0; width: 100%; height: 100%; z-index: 2;}

.swiper-pagination-bullet {margin:0 8px !important; width: 20px; height: 20px; background:#222a3f; border-radius: 50%; opacity: 1 !important; outline: none;}
.swiper-pagination-bullet-active {opacity: 1 !important; width: 50px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 #fff,0 0 10px #16bdf9,0 0 30px #1681c0; transition: all .5s;}
.before-main .swiper-pagination  {bottom:35px !important;}

/* 슬라이드 */
.girl {position: absolute; top:130px; left:0; right:0; margin: 0 auto; text-align: center; transition: all .5s; animation: bounce 3s ease-in-out infinite;}
@keyframes bounce {
    0% {transform: translate(0)}
    50% {transform: translateY(10px)}
    to {transform: translate(0)}
} 

.girl-1 {opacity: 0;}
.girl-2 {opacity: 0;}
.girl-3 {opacity: 0;}

.swiper-slide-active .girl-1 {opacity: 1;}
.swiper-slide-active .girl-2 {opacity: 1;}
.swiper-slide-active .girl-3 {opacity: 1;}

/* slide-icon */
.slide-icon {position: absolute; top:160px; left:0; right: 0; z-index: 1; margin:0 auto; padding:0; width: 100%; text-align: center;}
.slide-icon > img {object-fit:contain; animation: spin 60s linear infinite;}
@keyframes spin {
  from {transform: rotate(0deg);}
  to   {transform: rotate(360deg);}
}


/* caption */
.caption {opacity: 0; position: absolute; bottom:100px; left:0; right:0; z-index: 999; margin:0 auto; width: 100%; height: auto; text-align: center; transition: all .3s;}
.center-txt {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
.center-txt > h3 {line-height:1.2; font-size:40px; font-weight: 700; font-family: "Red Hat Display", sans-serif; text-shadow: 0 4px 10px rgba(0,0,0,0.4);}
.center-txt > h4 {line-height:1.2; color:#fff; font-size:80px; font-weight: 700; font-family: "Red Hat Display", sans-serif; text-shadow: 0 4px 10px rgba(0,0,0,0.4);}

.swiper-slide-active .caption {opacity: 1;}
.swiper-slide-active .slide-up {animation: slideUp 0.5s forwards;}
@keyframes slideUp {
    0% {transform: translateY(50px);}
    100% {transform: translateY(0);}
}

.swiper-slide-active .slide-down {animation: slideDown 0.5s forwards;}
@keyframes slideDown {
    0% {transform: translateY(-50px)}    
    100% {transform: translateY(0)}
}


/* 모바일 로그인 */
.mo-MainLogin {display: none;}

/****************************************************************************************************************************************
로그인 후 메인
*****************************************************************************************************************************************/
.after-main {position: relative; margin:0 auto; height: 480px; background:url('../Img/Main/hero-bg.jpg') center no-repeat; background-size: cover;}
.swiper-container {width: 100%;}

.after-cap {opacity: 0; position: absolute; top: 50%; left: 100px; transform: translate(-500px, -50%); z-index: 9; padding: 0 15px; width:100%; display: flex; flex-direction: column; justify-content: center; align-items:flex-start; transition: all 0.6s ease; transition-delay: 0.2s;}
.after-cap > h3 {color:#fff; font-size: 65px; font-weight: 600; font-family: "Red Hat Display",'serif';}
.after-cap > p {color:#676768; font-size: 30px; font-weight: 500; letter-spacing: -0.5px; font-family: "Red Hat Display",'serif';}

.hero-img {opacity: 0; width: 100%; transition: opacity 0.5s ease;}
.hero-img > img {opacity: 0; position: absolute; right: 100px; bottom: -300px; transform: scale(0.5); transition: all 0.5s ease; transition-delay: 0s;}

.swiper-slide-active .after-cap {opacity: 1; transform: translate(0, -50%);}
.swiper-slide-active .hero-img {opacity: 1;}
.swiper-slide-active .hero-img > img {opacity: 1; bottom: 0; transform: scale(1);}

/****************************************************************************************************************************************
section 공통
*****************************************************************************************************************************************/
.main-tit {position: relative; margin:0 auto; padding:0 20px; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.main-tit > h3,
.main-tit > h3 > span {font-size: 30px; font-weight: 900; font-family: "Red Hat Display", 'serif';}
.main-tit > h3 {color:#6d747b;}
.main-tit > h3 > span {color:#16bdf9;}

.main-tit > button {position: relative; font-size: 18px; font-weight: 500; color:#16bdf9; background: none; border: none; cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    .main-tit > button:hover {color:#fff;}
}


/****************************************************************************************************************************************
section card
*****************************************************************************************************************************************/
section {position: relative; margin:0 auto; padding:40px 0; width: 100%;}

.card-list::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 9; width: 250px; background: linear-gradient(90deg, #0c0e17, transparent);}
.card-list::after {content: ""; position: absolute; right: 0; top: 0; bottom: 0; z-index: 9; width: 250px; background: linear-gradient(-90deg, #0c0e17, transparent);}

.card-list .swiper-wrapper {transition-timing-function: linear;}
.card-list .swiper-slide {margin:30px 0; transition: all 0.4s ease-out;}

.cardBox {position: relative; margin:0 auto; padding:15px 15px; width: 100%; text-align: center; background: #171d26; border: 1px solid #161c24; border-radius: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.3); cursor: pointer;  transition: all 0.5s;}

.card-tit {margin:10px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center;}
.large-tit {font-size: 20px; font-weight: 600; color: #6d747b;}
.small-tit {padding-left: 10px; font-size: 18px; font-weight: 400; color: #6d747b;}

.cardImg {position:relative; margin:30px 0; height: 185px; display: flex; justify-content: center; align-items: center; transform: scale(0.7); transition: all .3s;}
.cardImg > img {max-width: 100%; filter: grayscale(.7) brightness(.7);}

.description {padding:0 15px; height: 50px; font-size: 12px; color: #6d747b;}
.cardBox > button {margin:20px 0; padding:5px 0; width: 100%; color: #16bdf9; background: #1b222c; border: 1px solid #0d4a6b; border-radius: 20px;}

@media (hover: hover) and (pointer: fine) {
    .cardBox:hover {background: #0b0e18;}
    .cardBox:hover .large-tit {color: #fff; text-shadow: 0 0 0 #16bdf9, 0 0 10px #16bdf9, 0 0 30px #16bdf9; transition: all .1s;}
    .cardBox:hover .small-tit {color: #fff; text-shadow: 0 0 0 #fff; transition: all .1s;}

    .cardBox:hover .cardImg {transform: scale(0.8);}
    .cardBox:hover .cardImg > img {filter: grayscale(0) brightness(1);}
    .cardBox:hover .description {color: #6d747b;}
    .cardBox:hover > button {color: #000; background: #16bdf9;}
}

/* .mo-mainCard */
.mo-mainCard {display: none;}

/****************************************************************************************************************************************
메인 카지노 및 슬롯 및 미니게임
*****************************************************************************************************************************************/
.casino-swiper {position: relative; margin:20px 0 0 0; overflow: hidden;}
.slot-swiper {position: relative; margin:20px 0 0 0; overflow: hidden;}
.mini-swiper {position: relative; margin:20px 0 0 0; overflow: hidden;}

.slide-list {position: relative; margin:0; padding:0; width: 100%;  border: 1px solid #a1a1a1; filter: brightness(.6); transition: all .4s; cursor: pointer; overflow: hidden;}
.slide-list > .casino-bg {position: relative; width: 100%; transition: all .4s;}
.slide-list > .casino-logo  {position:absolute; left:10px; top:50%; transform: translateY(-50%); width: 60%;}
.slide-list > .casino-tit {position: absolute; left: 0; right:0; bottom:0; z-index: 1; padding:20px 5px 10px 5px; width: 100%; text-align: center; font-size: 22px; font-weight: 600; color: #d7d7d7; background: linear-gradient(0deg, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0) 100%);}

/* 미니게임 */
.mini-logo {position: absolute; left: 0; right:0; bottom:10px; z-index: 1; padding:0 20px; width: 100%; text-align: center; font-size: 22px; font-weight: 600; color: #d7d7d7;}

@media (hover: hover) and (pointer: fine) {
    .slide-list:hover {border: 1px solid #16bdf9; filter: brightness(1);}
    .slide-list:hover > .casino-bg {transform: scale(1.05);}
}

/****************************************************************************************************************************************
main footer
*****************************************************************************************************************************************/
.mainbox-wrap {position: relative; margin:20px auto; padding:0 20px; width: 100%; display: flex; gap:10px; justify-content: center;}

.main-box {position: relative; display: flex; margin:0; width: calc(100% / 5 - 10px); height: 470px; background: #1c222c; border: 1px solid #32383f; border-radius: 30px;}

/* box */
.box-inner {position: relative; margin:0 auto; padding:15px 15px; width: 100%;} 
.box-tit {position: relative; margin: 20px auto; padding:0 0 0 14px; width: 100%; text-align: left;}
.box-tit > h3 {font-size: 18px; font-weight: 600; color: #16bdf9;}
.box-tit > p {letter-spacing: 1px; color: #fff;}

ul.box-list {position:relative; margin:0 auto; padding:0; width: 100%; height: 323px; overflow-y: auto;}
ul.box-list > li {position:relative; margin:0 auto; padding:10px 10px; width: 100%; display: flex; justify-content:space-between; align-items: center; border: 1px solid transparent; border-top: 1px solid #32383f; border-bottom: 1px solid #0e1018; cursor: pointer;}
ul.box-list > li > .box-name {flex: 1; text-align: left; font-size: 13px; font-weight: 500; color:#fff;}
ul.box-list > li > .box-money {flex: 2; text-align: right; font-size: 16px; font-weight: 500; color: #fff;}
ul.box-list > li > .box-time {flex: 1; text-align: right; font-size: 13px; font-weight: 500; color: #9b9d9f;}
ul.box-list > li > .box-list {flex: 2; text-align: left; font-size: 13px; font-weight: 500; color: #fff;}
ul.box-list > li > .box-admin {flex: 1; text-align: right; font-size: 13px; font-weight: 500; color: #9b9d9f;}

ul.sns-banner {position: relative; margin:0; padding:0; width: 100%; display: flex; flex-direction: column; justify-content: center; gap:5px;}
ul.sns-banner > li {position: relative; margin:0; padding:0; width: 100%; background: #16181e; border: 1px solid #2f354d; border-radius: 20px; transition: all 0.3s; cursor: pointer;}
ul.sns-banner > li > a {margin:0; padding:20px 20px; width: 100%; display: flex; align-items: center; overflow: hidden;}
ul.sns-banner > li > a > img {width: 70px;}
ul.sns-banner > li > a > span {margin-left:20px; font-size: 18px; font-weight: 700; color:#9b9d9f;}

@media (hover: hover) and (pointer: fine) {
    ul.box-list > li:hover {background: #0c0e17;}
    ul.sns-banner > li:hover {box-shadow: 0 0 10px #16bdf9;}
    ul.sns-banner > li:hover > a > span {color:#fff;}
}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 800px) {
    /* 로그인전 메인 */
    .before-main {margin:0; height: calc(var(--vh, 1vh) * 100); max-height: calc(var(--vh, 1vh) * 100); overflow: hidden;}
    .mo-MainLogin {display: flex; flex-direction: column; align-items: center; position: fixed; bottom:120px; left:0; right:0; z-index: 999; margin:0 auto; width: 100%; text-align: center;}
    .mo-MainLogin > button {margin:5px auto; padding:13px 30px; width: 300px; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: 1px; color:#fff; background: linear-gradient(135deg, #1681c0 30%, #16bdf9 70%); border-radius: 30px;}

    .before-main .swiper-pagination {bottom:75px !important;}

    /* girl */
    .girl {top:90px;}

    /* caption */
    .caption {bottom: unset; top:80px;}
    .center-txt > h3 {font-size: 20px;}
    .center-txt > h4 {font-size: 38px; letter-spacing: -1px;}

    /* slide-icon */
    .slide-icon {left:0; top:60px; width: 180%;}

    /* 로그인 후 */
    .after-main {height: 300px;}

    .after-cap {left:0; right:0; align-items: center;}
    .after-cap > h3 {font-size: 28px;  font-weight: 900; text-shadow: 0 2px 1px rgba(0,0,0,0.6);}
    .after-cap > p {font-size: 14px; font-weight: 600; color:#fff; text-shadow: 0 2px 1px rgba(0,0,0,0.6);}

    .hero-img > img {left:0; right:0; height: 100%; margin:0 auto; text-align: center;}

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

    .after-main .swiper-pagination-bullet {margin:0 3px !important; width: 12px; height: 12px;}
    .after-main .swiper-pagination-bullet-active {width: 23px; height: 12px;}

    /* main 공통 */
    section {padding:30px 0 0 0;} 
    
    .main-tit {padding:0 10px;}
    .main-tit > h3,
    .main-tit > h3 > span {font-size: 24px;}
    .main-tit > button {font-size: 14px;}

    /* main-card */
    .main-card {display: none;}
    .mo-mainCard {display: block; padding:20px 0 0 0;}
    ul.mo-card {position: relative; margin:0; padding:0 10px; width: 100%; display: flex; gap:10px; flex-wrap: wrap; justify-content: center;}
    ul.mo-card > li {position: relative; margin:0 auto; padding:15px 15px; width: calc(100% / 2 - 10px); height: 180px; text-align: left; background: linear-gradient(130deg, #0d4a6b, #052d42 80%); border: 1px solid #1681c0; box-shadow: 0 0 10px rgba(0, 0, 0, .4), 0 0 40px rgba(0, 0, 0, .267), inset 0 0 50px rgba(0, 0, 0, .267); overflow: hidden;}
    ul.mo-card > li:last-child {width: 100%;}
    ul.mo-card > li > h3 {font-size: 30px; font-weight: 600; color:#16bdf9;}
    ul.mo-card > li > h3 > span {margin-left:2px; font-size: 14px; color: #c7c7c7;}
    ul.mo-card > li > p {margin:10px 0; font-size: 12px; color: #c7c7c7;}
    ul.mo-card > li > button {padding:5px 10px; font-size: 12px; color:#fff; background: #16bdf9; border-radius: 50px;}
    .moCard-bg {position: absolute; top: 42px; right: -42px; z-index: 1; opacity: .1; width: 175px;}
    .moCard-bg > img {width: 100%;}

    /* 메인 카지노 및 슬롯 */
    .main-casino,
    .main-slot,
    .main-mini {display: none;}

    /* main footer */
    .notice-box,
    .event-box {display: none;}

    .mainbox-wrap {margin:10px 0 0 0; padding:0 10px; flex-direction: column; align-items: center; justify-content: flex-start;}
    .main-box {width: 100%; height: auto; border-radius: 20px;}
    .sns-box {background: transparent; border: none; border-radius: 0;}
    .snsBox-inner {padding:0;}

    .box-tit {margin:0 0 10px 0;}
    ul.box-list {height: 150px;}

    ul.sns-banner {gap: 10px;}
    ul.sns-banner > li {background: #1c222c; border: 1px solid #32383f;}
    ul.sns-banner > li > a > img {width: 50px;}
    ul.sns-banner > li > a > span {color:#fff;}
}/* 미디어쿼리문 끝 */

@media (max-width: 600px) {
    ul.mo-card > li {width: 100%;}

    /* .model > img {transform:scale(0.8)} */
}

@media (max-width: 400px) {
    /* 로그인 후 */
    .after-main {height: 202px;}
    .swiper-slide {height: 200px;}
}/* 미디어쿼리문 끝 */