@charset "utf-8";

/****************************************************************************************************************************************
main-hero 시작
*****************************************************************************************************************************************/
.main-slide {position: relative; z-index: 1; margin:0 auto; padding:0; width:100%; height:476px; text-align:center; background: url('../img/main/banner-bg.jpg') top center no-repeat; background-size: cover; overflow: hidden;}
.main-slide:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/main/stars-bg.png') bottom center; background-size: cover; 
    animation: starsAnim 0.7s ease infinite;
}

@keyframes starsAnim {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}

.slide-inner {position:relative; margin:0 auto; padding:0 15px; width:1560px; height: 100%; text-align: center;}
.slide-wrap {position: relative; width:100%; height:100%; display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap;}

/* slide-banner */
.slide-banner {position: absolute;left: 0; bottom: 0; z-index: 9; width: 100%; height: 100%;}
.slide-banner div {position: absolute; bottom: 0;}
.slide-banner div img {position: relative; width: 100%;}
.slide-banner img {position: absolute; bottom: 0;}

/* left-img */
.light {width: 32.76%; left: -20%; bottom: -15% !important; animation:LightAnim 15s ease infinite;}
@keyframes LightAnim {
    0% {opacity: 0;}
    8% {opacity: 0;}
    13% {opacity: 1;}
    97% {opacity: 1;}
    100% {opacity: 0;}
}

.light > img {animation: LightImg 1s ease infinite;}
@keyframes LightImg {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}

.glow-left {width: 38.34%; left: 4%; animation: LightAnim 15s ease infinite;}
.glow-left > img {animation: LightImg 1s ease infinite;}

.casino-items {width: 38.53%; left: -4.5%; transform-origin: bottom center; animation: casinoAnim 15s ease infinite;}
@keyframes casinoAnim {
    0% {opacity: 0; transform: scale(0.5);}
    4% {opacity: 0; transform: scale(0.5);}
    10% {opacity: 1; transform: scale(1);}
    95% {opacity: 1; transform: scale(1);}
    100% {opacity: 0; transform: scale(1);}
}

.girl-left {width: 20%; left: -3%; animation: girlLeftAnim 15s ease infinite;}
@keyframes girlLeftAnim {
    0% {opacity: 0; transform: translateX(15%);}
    2% {opacity: 0; transform: translateX(15%);}
    10% {opacity: 1; transform: translateX(0);}
    95% {opacity: 1; transform: translateX(0);}
    100% {opacity: 0; transform: translateX(0);}
}

.girl-right {width: 18.5%; left: 19%; animation: girlRightAnim 15s ease infinite;}
@keyframes girlRightAnim{
    0% {opacity: 0; transform: translateX(-15%);}
    2% {opacity: 0; transform: translateX(-15%);}
    10% {opacity: 1; transform: translateX(0);}
    95% {opacity: 1; transform: translateX(0);}
    100% {opacity: 0; transform: translateX(0);}
}

.girl-center {width: 15%; left: 10%; animation: girlCenterAnim 15s ease infinite;}
@keyframes girlCenterAnim {
    0% {opacity: 0; transform: translateY(15%);}
    6% {opacity: 1; transform: translateY(0);}
    95% {opacity: 1; transform: translateY(0);}
    100% {opacity: 0; transform: translateY(0);}
}

/* right-img */
.glow-right {width: 38.53%; right: 5%; animation: LightAnim 15s ease infinite;}
.glow-right img {animation: LightImg 1s ease infinite;}

.candy-slot {width: 18%; right: 19%; bottom:-5%; left: auto; z-index: 99; animation: candySlotAnim 15s ease infinite;}
@keyframes candySlotAnim {
    0% {opacity: 0; transform: translateX(15%);}
    8% {opacity: 1; transform: translateX(0);}
    95% {opacity: 1; transform: translateX(0);}
    100% {opacity: 0; transform: translateX(0);}
}

.money-slot {width: 27%; right: 0; left: auto; animation: moneySlotAnim 15s ease infinite;}
@keyframes moneySlotAnim {
    0% {opacity: 0; transform: translateX(-15%);}
    8% {opacity: 1; transform: translateX(0);}
    95% {opacity: 1; transform: translateX(0);}
    100% {opacity: 0; transform: translateX(0);}
}

/* txt-slide */
.txt-slide {position: relative; padding-top:50px; width:100%;}
.slide-logo {position: relative; cursor: pointer;}
.slide-logo img {animation: heartbeat 1.5s ease-in-out infinite both;}
@keyframes heartbeat {
    0% {transform: scale(1); transform-origin: center center; animation-timing-function: ease-out;}
    10% {transform: scale(0.91); animation-timing-function: ease-in;}
    17% {transform: scale(0.98); animation-timing-function: ease-out;}
    33% {transform: scale(0.87); animation-timing-function: ease-in;}
	45% {transform: scale(1); animation-timing-function: ease-out;}
}

/* center-slider */
.center-slider {margin:45px auto 0 auto; padding:0;}
.slick-dotted.slick-slider {margin-bottom:0;}
.caption {position: relative; z-index: 1; margin: 0 auto; padding: 20px 15px; width:750px; background: rgba(0, 0, 0, 0.57);
    -webkit-mask-image: linear-gradient(90deg,transparent 0%,transparent 5%,#000 25%,#000 75%,transparent 95%,transparent 100%);
    mask-image: linear-gradient(90deg,transparent 0%,transparent 5%,#000 25%,#000 75%,transparent 95%,transparent 100%);
    border-top: 1px solid rgba(156, 152, 143, 0.4);
    border-bottom: 1px solid rgba(156, 152, 143, 0.4);
    transition: transform .6s ease-in-out;
    display: none;
}
.slick-active > .caption {display: block;}

.caption > h3 {font-size: 30px; font-weight: 500; color: #f4efd4;}
.caption > h5 {font-size: 24px; font-weight: 500; color: #e8a31e;}
.caption > h3:nth-child(1) {animation: bannerText01 6s ease 1 forwards;}
@keyframes bannerText01 {
    0% {opacity: 0; transform: scale(0);}
    10% {opacity: 1; transform: scale(1.1);}
    20% {opacity: 1; transform: scale(1);}
    95% {opacity: 1; transform: scale(1);}
    100% {opacity: 0; transform: scale(0);}
}
.caption > h5:nth-child(2) {animation: bannerText02 6s ease 1 forwards;}
@keyframes bannerText02 {
    0% {opacity: 0; transform: scale(0);}
    3% {opacity: 0; transform: scale(0);}
    13% {opacity: 1; transform: scale(1.1);}
    23% {opacity: 1; transform: scale(1);}
    95% {opacity: 1; transform: scale(1);}
    100% {opacity: 0; transform: scale(0);}
}
.caption > h5:nth-child(3) {animation: bannerText03 6s ease 1 forwards;}
@keyframes bannerText03 {
    0% {opacity: 0; transform: scale(0);}
    6% {opacity: 0; transform: scale(0);}
    16% {opacity: 1; transform: scale(1.1);}
    26% {opacity: 1; transform: scale(1);}
    95% {opacity: 1; transform: scale(1);}
    100% {opacity: 0; transform: scale(0);}
}

.slick-dots {bottom: -20px !important; display: flex !important; align-items: center; justify-content: center; z-index: 11;}
.slick-dots li {display: inline-block; margin: 0 5px; padding: 1px; width: 30px !important; height: 4px !important; border-radius: 3px !important; background:rgba(255, 255, 255, 0.5) !important; transition: 0.2s; cursor: pointer;}
.slick-dots li.slick-active {width: 40px !important; height: 6px !important; background: #de4628 !important;  opacity: 1 !important;}
.slick-dots li button {display: none;}

@media (hover: hover) and (pointer: fine) {
    .slick-dots li:hover {background:#fff !important;}
}

/****************************************************************************************************************************************
quick-menu 시작
*****************************************************************************************************************************************/
ul.quick-menu {position:relative; padding: 0; width:1200px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap:29px;}
ul.quick-menu > li {position:relative; margin:0; width: calc(100% / 3 - 29px); height: 72px; transition: 0s; cursor: pointer;}
.quick-btn {position:relative; margin-left: 29px; width: calc(100% - 29px); height: 100%; display: flex; align-items: center; justify-content:space-between; flex-wrap: nowrap;
    border: solid 1px #614822;
    background: linear-gradient(180deg, #261e12, #17110b);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}

.quick-btn::before {content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 1px; background: #392b19;}
.quick-btn::after {content: ''; position: absolute; top: -1px; left: -29px; transform: rotateY(180deg); width: 29px; height: calc(100% + 2px); background: url('../img/main/toggle-bg.png'); background-size: 100% 100%;}
.first-quick {margin:0 29px 0 0;}
.first-quick::after {content: ''; position: absolute; top: -1px; left:unset; right: -29px; transform: rotateY(0deg); width: 29px; height: calc(100% + 2px);background: url('../img/main/toggle-bg.png'); background-size: 100% 100%;}

.quick-icon {position: relative; z-index: 1; margin-left: 25px; margin-right: -25px; width: 152px; height: 120px; display: flex; justify-content: center; align-items: center;}
.quick-icon::before {content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: url('../img/main/icon-bg.png'); background-size: 100% 100%;}
.first-quick .quick-icon {margin-left: -25px; margin-right: 25px;}

.quick-tit {font-size: 23px; font-weight: 500; color:#ffd989;}
.quick-tit > svg {margin:0 10px; padding:0; font-size: 24px; opacity:0;}

ul.quick-menu > li.active .quick-icon img {animation: quick-icon 2s ease infinite;}
@keyframes quick-icon {
    0% {transform: scale(1);}
    50% {transform: scale(0.95);}
    100% {transform: scale(1);}
}
ul.quick-menu > li.active .quick-tit {color:#ff8b2d}
ul.quick-menu > li.active .quick-tit > svg {opacity: 1; animation: quickSvg 1s ease infinite;}
@keyframes quickSvg {
    0% {transform: translateY(0);}
    50% {transform: translateY(-3px);}
    100% {transform: translateY(0);}
}

@media (hover: hover) and (pointer: fine) {
	ul.quick-menu > li:hover .quick-tit {color:#ff8b2d}
}

/****************************************************************************************************************************************
game-provider 시작
*****************************************************************************************************************************************/
.game-provider {position: relative; margin:50px auto 30px auto; padding:0; width:100%;}
.game-type {display: none; position: relative; margin:0 auto; padding:0; width:100%;}
.game-type.active {display: block;}

.provider-list {position: relative; left: -8px; margin:30px auto; padding:0; width: calc(100% + 16px); display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.g-btn {position: relative; z-index: 1; display: inline-block; margin: 0 7px 20px 7px; padding: 5px 5px; width: 242px;
    background-color: #5e4322;
    background-image: linear-gradient(to bottom left, #f5cc7f, #96653b, #b79453);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 1);
    animation: g-btn 0.8s ease 1 backwards;
    transform-origin: bottom center;
    transition: 0.3s;
}
@keyframes g-btn {
    0% {opacity: 0;transform: translateY(50px) scale(0.5);}
    50% {opacity: 1; transform: translateY(-20px) scale(1);}
    100% {opacity: 1; transform: translateY(0) scale(1);}
}

.off {opacity: 0.5;}

.g-btn::before, 
.g-btn::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 10px; background-image: linear-gradient(#97663c, #58341c); transition: 0.3s;}
.g-btn::after {background-image: linear-gradient(#f3dbac,#ba975e); opacity: 0;}

.g-box {position: relative; z-index: 1; padding: 8px 9px; width: 100%; background: #301605; border-radius: 8px; overflow: hidden;transition: 0.3s;}
.g-box::before {content: ''; position: absolute; left: -10%; right: 0; bottom: -20%;margin: 0 auto; width: 120%;height: 50%; background: radial-gradient(rgba(108, 74, 40, 0.8), rgba(149, 112, 76, 0.15), rgba(108, 74, 40, 0), rgba(108, 74, 40, 0));}
.g-box::after {content: ''; position: absolute; left: 0; bottom: 0; z-index: 4; width: 100%; height: 100%; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75); border-radius: 8px;}

.g-con {position: relative; background: #000; border-radius: 8px; box-shadow: 0 1px 1px #6c4829; overflow: hidden}
.g-con > img {width: 100%; transition: 0.5s;}
.g-con > button {opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 4; margin: auto; width: 100px; height: 35px; font-weight: 600; color:#000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(180deg, #ffce6b,#ffbd3f);
    border: solid 1px #ffd273;
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(234, 209, 163, 0.5), 0 1px 2px rgba(0, 0, 0, 1), inset 0 0 0 1px #1d160e;
    transform: scale(0);
}

.g-brand {position: relative; z-index: 3; transition: 0.5s;}
.g-logo {position: relative; z-index: 3; margin: -40px auto 0; width: 60px; height: 60px; line-height:56px; border-radius: 50%; background: linear-gradient(180deg,#f7dfb1, #b9975e, #f7dfb1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); transition: 0.3s;}
.g-logo::before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; margin: auto; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; background: #301605;}
.g-logo > img {filter: drop-shadow(0 0 10px rgba(210, 126, 70, 0.6));} 

.g-info {position: relative; left: 0; top: 0; z-index: 3; margin: 5px 0 -2px 0; width: 100%;}
.g-info > .g-name {display: inline-block; width: 100%; font-size: 16px; font-weight: 500; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 1);}
.g-info > .en-text {display: inline-block; width: 100%; font-size: 13px; font-weight: 500; color: #ffd989; text-shadow: 0 1px 2px rgba(0, 0, 0, 1);}
.glass {position: absolute; bottom: 0; left: 0; z-index: 1; width: 200%; height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.1));
    transform-origin: bottom left;
    transform: rotate(-48deg);
    transition: 0.3s;
}

@media (hover: hover) and (pointer: fine) {
	.g-btn:hover {z-index: 2; margin-top: -20px; margin-bottom: -20px; box-shadow: 0 0 10px rgba(234, 209, 163, 0.5);}
	.g-btn:hover::after {opacity: 1;}
    .g-btn:hover .g-box {background: #503624;}
	.g-btn:hover .g-con {box-shadow: 0 1px 1px #ae845f, 0 2px 5px rgba(0, 0, 0, 0.5);}
	.g-btn:hover .g-con > img {transform: scale(1.1); opacity: 0.5;}
	.g-btn:hover .g-con > button {opacity: 1;; transform: scale(1);}

    .g-btn:hover .g-logo {margin:15px auto 0 auto;}
    .g-btn:hover .g-brand::before {content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;z-index: -1; margin: auto; width:100%; height: 7px;
        border-top: solid 1px rgba(255, 255, 255, 0.15);
        border-bottom: solid 1px rgba(255, 255, 255, 0.15);
        transition: 0.5s;
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5%, black 25%, black 75%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    }

	.g:hover .glass {transform: rotate(0deg); opacity: 0;}
}

/****************************************************************************************************************************************
메인 Board 시작
*****************************************************************************************************************************************/
.main-border {position:relative; margin:0 auto; padding:40px 0 90px 0; width:100%; background: #1c1302; border-top: 1px #2d2315 solid; border-bottom: 1px #2d2315 solid;}
.main-border::before {content: ''; position:absolute; top:0; width:100%; height:100%; background: url('../img/main/board-bg.png') top center; background-size: cover; mix-blend-mode: screen;}
.main-border::after {content: ''; position:absolute; width: calc(100% + 60px); left: -30px; box-shadow: inset 0 0 30px rgba(0, 0, 0, 1);}

.mainBo-inner {position: relative; margin:0 auto; padding:0; width:1560px; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap:15px;}

.mainbo-list {position: relative; margin:0; padding:0; width: calc(100% / 3 - 15px);}
.mainBo-hd {position: relative; padding: 0 15px 0 0; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.4); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.5);}
.mainBo-icon {height:50px; display: flex; justify-content: flex-end; align-items: center;}
.mainBo-tit {
    position: relative; margin: 0; font-size: 24px; color: #d6d6d6;
    background-image: -webkit-linear-gradient(#fdf9af, #e5b75b);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mainBo-con {position: relative; margin:0 auto; padding:0; width: 100%;}
.mainBo-con > table {margin:18px auto 0 auto; padding:0; width: 100%;}
.mainBo-con > table td {padding:0 10px; height: 48px; font-weight:500; border-bottom: solid 1px rgba(255, 255, 255, 0.1);}
.mainBo-con > table td.td-name,
.mainBo-con > table td.td-money,
.mainBo-con > table td.td-con {text-align: left;}
.mainBo-con > table td.td-con > a {display:block; font-weight:500; color:#ccccf0; overflow-x: hidden;}
.mainBo-con > table td.td-date {width: 26%; text-align: right; color: #beaf91;}

@media (hover: hover) and (pointer: fine) { 
    .mainBo-con > table td.td-con > a:hover {color:#eaeaff;}
}

/****************************************************************************************************************************************
 미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1590px) {
    /* main-slide */
    .slide-inner {width: 100%;}    

    /* main-border */
	.mainBo-inner {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:1320px) {
    /* game-provider */
    .g-btn {width: calc(20% - 15px);}
    .g-info > .g-name,
    .g-info > .en-text {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}/* 미디어쿼리문 끝 */

@media (max-width:1300px) {
    /* main-slide */
    .main-slide {height: 40vw; max-height: 400px;} 
    .slide-logo img {width: 50vw; max-width: 320px;}

    .txt-slide {padding-top:15px}
    .center-slider {margin:15px auto 0 auto;}
    .caption {padding: 10px 5px; margin-bottom:10px;}

    /* quick-menu */
    ul.quick-menu {width: 100%;}
    ul.quick-menu > li {height: 60px;}
    .quick-tit {font-size: 20px;}
    .quick-tit > svg {margin:0 5px;}
    .quick-icon {width:100px; height:80px;} 
    
    /* main-border */
    .main-border {padding:40px 0;}
    .mainBo-inner {gap:25px;}
    .mainbo-list {width:100%; max-width: 740px;}
    .mainBo-order1 {order: 1;}
    .mainBo-order2 {order: 2;}
    .mainBo-order3 {order: 3;}

    .mainBo-con > table td.td-con > a {width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1024px) {
    /* game-provider */
    .g-btn {width: calc(25% - 15px);}
}

@media (max-width:1050px) { 
    /* quick-menu */
    .quick-tit {font-size:18px; letter-spacing: -1px;}
 }/* 미디어쿼리문 끝 */


@media (max-width:900px) {  
    /* main-slide */
    .caption {width: 100%;}
    .caption > h3 {font-size: 3.4vw;}  
    .caption > h5 {font-size: 2.6vw;} 
    .slick-dots {bottom:-10px !important;}

    /* quick-menu */
    .quick-icon {margin-left: 0;}
    .first-quick .quick-icon {margin-right: 0;}   
    .quick-tit {padding-right:3px; font-size: 15px;}
    .quick-tit > svg {font-size: 16px;}

    /* game-provider */
    .game-provider {margin:20px auto}
}/* 미디어쿼리문 끝 */


@media (max-width:767px) { 
    /* main-slide */
    .slide-inner {padding:0;}
    .caption {padding: 5px 5px; margin-bottom:0;}
    .center-slider {margin: 5px auto 0 auto;}   

    /* quick-menu */
    ul.quick-menu {gap:10px;}
    ul.quick-menu > li {width: calc(100% / 3 - 10px);}
    
    .quick-btn {margin:0; width:100%;}
    .first-quick {margin:0;}

    .quick-btn::before,
    .quick-btn::after {display: none;}

    .quick-icon {width: 80px; height: 62px; margin-right: -10px;}
    .quick-tit {padding-left:10px;}
    .first-quick .quick-icon {margin-left: -10px;}
    .first-quick .quick-tit {padding-right:10px;}

    /* game-provider */
    .g-btn {width: calc(33.3% - 15px);}
    .g-info > .g-name {font-size: 14px;}
    .g-info > .en-text {font-size: 12px;}

    /* main Board */
    .mainBo-con > table td.td-con > a {width: 400px;}
}/* 미디어쿼리문 끝 */


@media (max-width:639px) {     
    /* main-slide */
    .slick-dotted.slick-slider {margin-bottom: 20px;}
    .slick-dots li {margin:0 3px; width: 15px;}
    .slick-dots li.slick-active {width: 20px; height: 2px;}
    
    /* quick-menu */
    ul.quick-menu {padding-top:15px; gap:5px;}
    ul.quick-menu > li {width: calc(100% / 2 - 5px); height: 45px;}
    .quick-icon {width: 55px; height: 35px;}
    .quick-tit {padding:0 0 0 5px; font-size: 14px;}
    .quick-tit > svg {font-size: 14px;}
    .first-quick .quick-tit {padding-right:5px;}
   
    /* main Board */
    .mainBo-hd {padding:0;}
    .mainBo-hd > .mainBo-icon > img {max-width: 65px;}
    .mainBo-hd > .mainBo-tit {font-size: 18px;}

    .mainBo-con > table td {padding:0; height: 45px; font-size: 12px; letter-spacing: -1px;}
    .mainBo-con > table td.td-con > a {width:200px; font-size: 13px;}
}/* 미디어쿼리문 끝 */

@media (max-width:500px) {   
    /* game-provider */
    .g-btn {margin: 7px 6px; padding: 2px; width: calc(50% - 12px); box-shadow: 0 2px 5px rgba(0, 0, 0, 1);}
}/* 미디어쿼리문 끝 */