@charset "utf-8";

/****************************************************************************************************************************************
popup_window
*****************************************************************************************************************************************/
.popup_window {position: absolute; top:50%; transform: translateY(-50%); z-index: 99999; margin: 0; padding: 0; width: 100%; text-align: center; font-size: 0;}
.popup_window_box {position: relative; z-index: 999999; display: inline-block; vertical-align:top; margin:5px auto; padding:0; width: 20%; max-width:379px; border: 2px #fff solid;}

.popup_window_inner {position: relative; margin:0 auto; padding:10px 10px; width: 100%; text-align: center; background: #81d7d0; border: 5px #46a89c solid;}

.popup_window_tit {position: relative; margin:20px auto; padding:0 15px; width:100%; text-align: center; font-size: 26px; font-weight: 500; letter-spacing: -1px; color:#000;}

.popup_window_con {position: relative; margin:5px auto; padding:20px 15px; text-align: center; color:#fff; background: #005853;}
.popup_window_con p {font-weight: 500;}
.popup_window_con p img,
.popup_window_con img {margin:0 auto; padding:0; width:100%; overflow: hidden;}

.popup_window_close {position: relative; margin:0 auto; padding:5px 15px; width:100%; text-align: right; background:#d5d5d5; border: 5px #cbcbcb solid;}
.popup_window_checkbox {display: inline-block; margin: 0 5px 2px 0; width: 15px; height: 15px; vertical-align: text-bottom; background: #fff; border-radius:2px;}
.popup_window_close > span {font-weight: 400; color:#454545;}
.popup_window_close > a {margin-left:10px; font-weight: 600; color:#000; cursor: pointer;}

@media (max-width: 1280px) {
    .popup_window_box {position: absolute; left: 50%; width:90%;transform: translateX(-50%);margin:50px 5px;}
}

/****************************************************************************************************************************************
hero section
*****************************************************************************************************************************************/
.hero {position: relative; margin: -45px 0 0; padding: 45px 0 0; width: 100%; height: 410px; overflow: hidden;}
.hero::before {content: ''; position: absolute; left: 0;top: 10px; width: 100%; height: 110%; background: linear-gradient(180deg, rgba(195, 224, 228, 1.0), rgba(195, 224, 228, 1.0), rgba(195, 224, 228, 0)); box-shadow: 0 -2px 5px rgba(51, 119, 113, 0.5); border-radius: 120px 120px 0 0;}
.hero::after {content: ''; position: absolute; left: 0; z-index: -1; bottom: -11%; width: 100%; height: 12%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));} 

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

/* banner-title */
.banner-title {position: absolute; left: 0; top: 25px; z-index: 8; margin: 0 auto; padding: 0 0 10px; width: 100%; text-align: center; font-family: 'GmarketSans';}
.banner-title::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 50%; max-width: 100px; height: 2px; background: linear-gradient(to right, #81d8d0, #02c9b7);border-radius: 2px;}

/* mobile-support */
.mobile-support {position: absolute; left: 0; bottom: 15px; z-index: 8; width: 100%; display: flex; justify-content: center; align-items: center;}
.mobile-support > .icon-panel {margin: 0 7px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); background: linear-gradient(#ff826e, #d54a34); border-radius: 8px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);}
.mobile-support > span {font-weight: 600;}

/* circle-bg */
.circle-bg {position: absolute; left: 0; right: 0; top: 48.75%; transform: translateY(-50%);  margin: 0 auto; width: 41.96%; min-width: 600px; height: 164.39%;}
.circle-bg > .circle {position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); border-radius: 50%; box-shadow: 0 0 10px rgba(51, 119, 113, 0.1);}
.circle-bg > .c-01 {animation: c-01 1.5s ease infinite;}
@keyframes c-01 {
    0% {background: rgba(255, 255, 255, 0.1);}
    20% {background: rgba(255, 255, 255, 0.1);}
    35% {background: rgba(255, 255, 255, 0.5);}
    50% {background: rgba(255, 255, 255, 0.1);}
    100% {background: rgba(255, 255, 255, 0.1);}
}

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

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


/* hero-banner */
.hero-banner {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.hero-banner > img {position: relative; width: 100%;}
    
/* dealer-left */
.dealer-left {width: 10.84%; position: absolute; bottom: 0; left: -1.5%; animation: bannerLeftChar 12s ease infinite;}
@keyframes bannerLeftChar {
    0% {opacity: 0; transform: translateX(25%);}
    5% {opacity: 0; transform: translateX(25%); }
    15% {opacity: 1; transform: translateX(0);}
    95% {opacity: 1; transform: translateX(0);}
    100% {opacity: 0;transform: translateX(0);}
}

.chip-02 {width: 19.36%; position:absolute; bottom: auto; top: 19%; left: -10%; animation: chip02Anim 12s ease infinite;}
@keyframes chip02Anim {
    0% {opacity: 0; transform: translate(100%, 100%);}
    16% {opacity: 0; transform: translate(100%, 100%);}
    24% {opacity: 1; transform: translate(0, 0);}
    95% {opacity: 1; transform: translate(0, 0);}
    100% {opacity: 0; transform: translate(0, 0);}
}

.chip-02 .d-img {animation: chip02ImgAnim 10s linear infinite;}
@keyframes chip02ImgAnim {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(45deg);}
    100% {transform: rotate(0deg);}
}

.dealer-right {width: 10.49%; position: absolute; bottom: 0; left: 18%; animation: bannerRightChar 12s ease infinite;}
@keyframes bannerRightChar {
    0% {opacity: 0;transform: translateX(-25%);}
    5% {opacity: 0;transform: translateX(-25%);}
    15% {opacity: 1; transform: translateX(0);}
    95% {opacity: 1;transform: translateX(0);}
    100% {opacity: 0;transform: translateX(0); }
}

.chip-03 {width: 26.67%; position: absolute; bottom: auto; right: -24%; top: 14%; animation: chip03Anim 12s ease infinite;}
@keyframes chip03Anim {
    0% {opacity: 0; transform: translate(-100%, 100%);}
    16% {opacity: 0; transform: translate(-100%, 100%);}
    24% {opacity: 1; transform: translate(0, 0);}
    95% {opacity: 1; transform: translate(0, 0); }
    100% {opacity: 0; transform: translate(0, 0);}
}

.chip-03 .d-img {animation: chip03ImgAnim 8s linear infinite;}
@keyframes chip03ImgAnim {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(90deg);}
    100% {transform: rotate(0deg);}
}

.casino-table {width: 27.97%; position: absolute; bottom: 0; left: 6%; animation: casinoTableAnim 12s ease infinite;}
@keyframes casinoTableAnim {
    0% {opacity: 0; transform: translateY(25%);}
    12% {opacity: 0; transform: translateY(25%);}
    18% {opacity: 1; transform: translateY(-5%);}
    28% {opacity: 1; transform: translateY(0);}
    95% {opacity: 1; transform: translateY(0);}
    100% {opacity: 0; transform: translateY(0);}
}

.table-glow {width: 62.76%; position: absolute; bottom: auto; right: -10%; top: 3%; animation: glowAnim 1s ease infinite;}
.roulette {width: 17.48%; position: absolute; bottom: -8%; left: -2%; animation: rouletteAnim 12s ease infinite;}
@keyframes rouletteAnim {
    0% {opacity: 0; transform: translateY(25%);}
    10% {opacity: 0; transform: translateY(25%);}
    16% {opacity: 1; transform: translateY(-5%);}
    26% {opacity: 1; transform: translateY(0);}
    95% {opacity: 1; transform: translateY(0);}
    100% {opacity: 0; transform: translateY(0);}
}

.roulette .d-img {animation: rouletteImgAnim 8s ease infinite;}
@keyframes rouletteImgAnim {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(-15deg);}
    100% {transform: rotate(0deg);}
}

.rose {width: 19.3%; position: absolute; bottom: 0; left: 6.75%; animation: bannerFrontChar 12s ease infinite;}
@keyframes bannerFrontChar {
    0% {opacity: 0; transform: translateY(15%);}
    10% {opacity: 1;transform: translateY(0);}
    95% {opacity: 1; transform: translateY(0);}
    100% {opacity: 0; transform: translateY(0); }
}

.rose .shine {width: 28.99%; position: absolute; bottom: 0; left: 0; right: 44%; top: 45%; margin: 0 auto; animation: glowAnim 0.5s ease infinite;}
@keyframes glowAnim {
    0% {opacity: 1.0;}
    50% {opacity: 0.5;}
    100% {opacity: 1.0;}
}

.chip-01 {width: 4.89%; position: absolute; bottom: 10%; left: -9.5%; animation: chip01Anim 12s ease infinite;}
@keyframes chip01Anim {
    0% {opacity: 0; transform: translate(100%, -100%);}
    16% {opacity: 0; transform: translate(100%, -100%);}
    24% {opacity: 1;transform: translate(0, 0);}
    95% {opacity: 1; transform: translate(0, 0);}
    100% {opacity: 0; transform: translate(0, 0);}
}

.chip-01 .d-img {animation: chip01ImgAnim 10s linear infinite;}
@keyframes chip01ImgAnim {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(-45deg);}
    100% {transform: rotate(0deg);}
}

/* slot  */
.coins-left {width: 163.87%; position: absolute; bottom: 29%; right: -10%; transform-origin: bottom right; animation: bannerCoinsAnim 12s ease infinite;}

@keyframes bannerCoinsAnim {
    0% {opacity: 0; transform: scale(0.5);}
    16% {opacity: 0;transform: scale(0.5);}
    22% {opacity: 1; transform: scale(1.1);}
    30% {opacity: 1; transform: scale(1.0);}
    95% {opacity: 1; transform: scale(1.0);}
    100% {opacity: 0; transform: scale(1.0);}
}

.slot-left {width: 12.59%; position: absolute; bottom: 22%; right: 17.25%; animation: bannerLeftChar 12s ease infinite;}
.slot-left .d-img {z-index: 1;}
.coins-right {width: 145.93%; position: absolute; bottom: auto; left: -14.5%; top: -22%; transform-origin: bottom left; animation: bannerCoinsAnim 12s ease infinite;}
.slot-right {width: 13.85%; position: absolute; bottom:0; right: -2.6%; animation: bannerRightChar 12s ease infinite;}
.slot-right .d-img {z-index: 1;}
.wheel {width: 13.99%; right: 20.25%; position: absolute; bottom: -19%; z-index: 4; transform-origin: bottom right; animation: wheelAnim 12s ease infinite;}
@keyframes wheelAnim {
    0% {opacity: 0; transform: scale(0.75);}
    8% {opacity: 0; transform: scale(0.75);}
    18% {opacity: 1; transform: scale(1.0);}
    95% {opacity: 1; transform: scale(1.0);}
    100% {opacity: 0; transform: scale(1.0);}
}

.wheel .d-img {animation: wheelImgAnim 2s ease infinite;}
@keyframes wheelImgAnim {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(30deg);}
    40% {transform: rotate(-15deg);}
    60% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
}

.slot-center {width: 20.98% !important; position: absolute !important; bottom: 3%; right: 4.25%; animation: bannerFrontChar 12s ease infinite;}
.gem {width: 5.25%; position: absolute; bottom: 10%; right: -8%; animation: gemAnim 12s ease infinite;}
@keyframes gemAnim {
    0% {opacity: 0; transform: translate(-100%, -100%);}
    16% {opacity: 0; transform: translate(-100%, -100%);}
    24% {opacity: 1; transform: translate(0, 0);}
    95% {opacity: 1; transform: translate(0, 0);}
    100% {opacity: 0; transform: translate(0, 0);}
}

.gem .d-img {animation: gemImgAnim 10s linear infinite;}
@keyframes gemImgAnim {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(90deg);}
    100% {transform: rotate(0deg);}
}

/* banner-mask */
.banner-mask {position: absolute; left: 50%; bottom: -20%; transform: translateX(-50%); z-index: 5; width: 600%; height: 50%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5%, rgba(0, 0, 0, 1.0) 10% 95%, rgba(0, 0, 0, 0) 100%);
}

/* swiper */
.swiper-container {position: relative; width: 100%; height: 100%;}
.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 {width: 100%; font-size: 28px; font-weight: 100;}
.swiper-slide > .caption > h4 {width: 100%; font-size: 36px; font-weight: 600;}

.swiper-slide-active > .caption  {opacity: 1;}

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

.swiper-pagination-bullet {width: 12px; height: 12px; background-color: #ccc; border: solid 2px rgba(255, 255, 255, 0.75); border-radius: 50%; opacity: 1 !important; outline: none;}
.swiper-pagination-bullet-active {background-color: #222222; opacity: 1 !important;}


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

ul.cate-list {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:10px; justify-content: center; align-items: center;}
ul.cate-list > li {position: relative; width: calc(100% / 2); height: 90px; display: flex; justify-content: center; align-items: center; transition: 0.3s; cursor: pointer;}
ul.cate-list > li > .cate-bg {position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(180deg, #b5faf4, #81d8d0); border: solid 1px #84d3cc; border-radius: 25px; box-shadow: 0 7px 0 rgba(0, 161, 146, 0.3); transition: 0.3s; overflow: hidden;}
ul.cate-list > li > .cate-bg::before {content:''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #43e6d6, #21a397); opacity: 0;}

ul.cate-list > li.active > .cate-bg {border:1px #1a9b8f solid; box-shadow: 0 7px 0 rgba(0, 161, 146, 0.5);}
ul.cate-list > li.active > .cate-bg::before {opacity: 1;}

ul.cate-list > li > img {margin-right: 20px; max-height: 65px;}

.cate-txt {min-width:200px; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;}
.cate-kr {font-size: 30px; font-weight: 500; color: #000;}
.cate-en {font-weight: 300; letter-spacing: 1px; color: #000;}
ul.cate-list > li > i {display: none; position: absolute;  right: 30px; font-size: 40px; color: #81fff4; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); transform: translateY(-10%); transition: 0.3s;}
ul.cate-list > li.active > i {display: inline-block;}
ul.cate-list > li.active .cate-kr {color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);}
ul.cate-list > li.active .cate-en {color: #b0fff8;}

@media (hover: hover) and (pointer: fine) {
    ul.cate-list > li:hover > .cate-bg {border:1px #1a9b8f solid; box-shadow: 0 7px 0 rgba(0, 161, 146, 0.5);}
    ul.cate-list > li:nth-child(2):hover > .cate-bg {box-shadow: 0 4px 0 rgba(0, 161, 146, 0.5);}
    ul.cate-list > li:hover > .cate-bg::before {opacity: 1;}

    ul.cate-list > li:hover > i {display: inline-block;}
    ul.cate-list > li:hover .cate-kr {color: #ffffff;}
    ul.cate-list > li:hover .cate-en {color: #b0fff8;}

} 

/****************************************************************************************************************************************
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: 20px; flex-wrap: wrap; justify-content: center; align-items: center;}
ul.game-list > li {position: relative; margin:20px 0; width: 216px; max-width: 216px; transition: 0.3s; animation: scBtn 1s ease 1 forwards; cursor: pointer;}
@keyframes scBtn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

ul.game-list > li::after {content: ''; position: absolute; left: 0; right: 0; bottom: -15%; margin: 0 auto; width: 100%; height: 15%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); border-radius: 15px 15px 0 0; animation: scBtnShadow 1s ease 1 forwards;}
@keyframes scBtnShadow {
    0% {transform: translateY(40%); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

ul.sport-list > li {width: 100%; max-width: 640px;}


/* g-logo */
.g-logo {position: absolute; left: -2px; top: -2px; z-index: 3; width: 92px; height: 92px; background: url('../img/bg/sc-corner.png'); background-size: 100% 100%;}
.g-circle {position: absolute; left: 0; top: 0; width: 77.78%; height: 77.78%; display:flex; justify-content: center; align-items: center; border-radius: 50%; transition: 0.3s;}
.g-circle::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 1px 1px 0 #81d8d0;}
.g-circle > img {opacity: 0; animation: scZoomIn 0.5s ease 0.3s 1 forwards;}

ul.slot-list > li .g-circle::before {box-shadow: inset 1px 1px 0 #f6c52d;}
ul.sport-list > li .g-circle:before {box-shadow: inset 1px 1px 0 #23a650;}

/* g-panel */
.g-panel {position: relative; background: #2290b8; border-radius: 0 15px 15px 15px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); transition: 0.3s; overflow: hidden;}
.g-panel::before,
.g-panel::after {content:''; position:absolute; left: 0; bottom: 0;width: 100%; height: 100%;}
.g-panel::before {opacity: 0.25; background: url('../img/bg/casino-bg.png'); background-size: contain; transform-origin: top center;}
.g-panel::after {background: linear-gradient(180deg, rgba(129, 249, 241, 0), rgba(129, 249, 241, 1.0));}

ul.slot-list > li .g-panel {background: #ff861a;}
ul.slot-list > li .g-panel::after {background: linear-gradient(180deg, rgba(254, 245, 91, 0), rgba(254, 245, 91, 1.0));}

ul.sport-list > li .g-panel {background: #16813b;}
ul.sport-list > li .g-panel::after {background: linear-gradient(180deg, rgba(113, 201, 101, 0), rgba(151, 255, 137, 1.0));}

.g-img {position: relative; z-index: 2; opacity: 0; width: 100%; animation: scBtnChar 1s ease 1 forwards;}
@keyframes scBtnChar {
    0% {opacity: 0; transform: translateX(10%);}
    100% {opacity: 1; transform: translateX(0);}
}

/* g deco */
.g-deco {position: absolute; width: 100%; height: 100%;}
.g-deco img {position: absolute; transition: 0.5s;}
.g-deco .g-card {width: 32.83%; position: absolute; left: 19%; bottom: 26.75%; transform-origin: bottom left; transition: 0.5s;}
.g-deco .g-chip {width: 102.24%;  position: absolute; right: -2.5%; top: 31%; transition: 0.5s;}
.g-deco .g-chip-o {width: 23.45%;  position: absolute; left: 7.75%; bottom: 22%; z-index: 4; transition: 0.5s;}

/* g footer */
.g-footer {position: absolute; left: 0; bottom: 0; z-index: 3; padding: 0 0 0 2%; width: 100%; height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.g-footer::before,
.g-footer::after {content: ''; position: absolute; top: -52%; right: -37%; width: 150%; height: 150%; background: #fff; border-radius: 50%; transform-origin: top right; transform: rotate(-7deg); animation: scFooterAnim 0.5s ease 1 forwards;}
@keyframes scFooterAnim {
    0% {transform: rotate(-20deg);}
    100% {transform: rotate(-7deg);}
}

.g-footer::before {box-shadow: 0 0 20px rgba(79, 255, 239, 0.75);}
.g-footer::after {background: transparent; background: linear-gradient(173deg, rgba(79, 255, 239, 0.5) 0 5%, rgba(79, 255, 239, 0) 30%, rgba(79, 255, 239, 0) 100%);}
.g-footer .kr-text,
.g-footer .en-text {opacity: 0; display: inline-block; width: 100%; transition: 0.3s; animation: scZoomIn 0.5s ease 0.3s 1 forwards;}

ul.slot-list > li .g-footer:before {box-shadow: 0 0 20px rgba(254, 245, 91, 0.75);}
ul.slot-list > li .g-footer:after {background: transparent; background: linear-gradient(173deg, rgba(255, 222, 52, 0.5) 0 5%, rgba(255, 222, 52, 0) 30%, rgba(255, 222, 52, 0) 100%);}

ul.sport-list > li .g-footer:before {box-shadow: 0 0 20px rgba(219, 255, 79, 0.75);}
ul.sport-list > li .g-footer:after {background: transparent; background: linear-gradient(173deg, rgba(55, 255, 37, 0.5) 0 5%, rgba(55, 255, 37, 0) 30%, rgba(55, 255, 37, 0) 100%);}


@keyframes scZoomIn {
    0% {opacity: 0; transform: scale(0.5);}
    100% {opacity: 1; transform: scale(1.0);}
}

.g-footer .kr-text {font-size: 18px; font-weight: 700; color: #107f75;}
.g-footer .en-text {font-size: 12px; color: #999; text-transform: uppercase;}

ul.slot-list > li .g-footer .kr-text {color: #a55200;}

ul.sport-list > li .g-footer .kr-text {padding-right: 20px; text-align: right; color: #077f26;}
ul.sport-list > li .g-footer .en-text {padding-right: 20px; text-align: right;}

.play-btn {opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 10%; z-index: 5; margin: auto; width: 120px; height: 40px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.75); transform: scale(0.5); border-radius: 22px;}

.btn-casino {background: linear-gradient(180deg, #46c8bb, #229389); border: solid 1px #7aeae0;}
.btn-slot {background: linear-gradient(#ffb610, #ca4100); border: solid 1px #f58a07;}

@keyframes rotatingAnim {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@media (hover: hover) and (pointer: fine) {
    ul.game-list > li:hover { transform: translateY(-5%);}
    ul.game-list > li:hover::after {width: 96%; height: 10%; transform: translateY(30%); filter: blur(2px);}

    ul.game-list > li:hover .g-circle {background: #d5f9fb; transform: translate(-10%, -10%);}
    ul.slot-list > li:hover .g-circle {background: #fcf8d0;}
    ul.game-list > li:hover .g-circle::before {animation: rotatingAnim 1s linear infinite;}

    ul.game-list > li:hover .g-panel {background: #81d8d0;}
    ul.slot-list > li:hover .g-panel {background: #ffc626;}

    ul.game-list > li:hover .g-panel::before {opacity: 0.5; transform: scale(1.1);}
    ul.game-list > li:hover .g-panel::after {height: 175%;}
    ul.game-list > li:hover .g-deco .g-card {transform: rotate(-15deg);}
    ul.game-list > li:hover .g-deco .g-chip {transition-delay: 0.1s; transform: scale(1.1) rotate(5deg);}
    ul.game-list > li:hover .g-deco .g-chip-o {transition-delay: 0.1s; transform: translate(-25%, 15%) rotate(-5deg);}

    ul.game-list > li:hover .g-footer::before {background: #e4fdff;}
    ul.slot-list > li:hover .g-footer:before {background: #fcfadd;}

    ul.game-list > li:hover .g-footer .kr-text {color: #0b9488;}
    ul.slot-list > li:hover .g-footer .kr-text {color: #a57800;}

    ul.game-list > li:hover .g-footer .en-text {color: #000;}
    ul.game-list > li:hover .play-btn {opacity: 1.0; transform: scale(1.0);}
}

/****************************************************************************************************************************************
메인 Board 시작
*****************************************************************************************************************************************/
.main-border {position:relative; z-index: 2; margin: 20px auto; padding: 0 0 50px 0; width: 100%;}
.main-border::before {content: ''; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(rgba(195, 224, 228, 0), rgba(195, 224, 228, 1.0), rgba(195, 224, 228, 1.0)); border-radius: 0 0 120px 120px; box-shadow: 0 2px 5px rgba(51, 119, 113, 0.5);}
.main-border::after {content: ''; position: absolute; left: 0; top: -1%; z-index: -1; width: 100%; height: 12%; background: linear-gradient(rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0));}

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

.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: #daf3f4; box-shadow: 0 2px 3px rgba(51, 119, 113, 0.5);}
.board-hd > h3 {position: relative; margin-right: 15px; padding-right: 15px; font-size: 16px; font-weight: 500; display: flex; align-items: center;} 
.board-icon {margin-right: 10px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: linear-gradient(#46c8bb, #229389); border-radius: 8px; border: solid 2px #e6feff;}
.board-icon > i {font-size: 18px; color: #a2fff7; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.board-more {position: relative; font-weight: 500; color:#5f868a; cursor: pointer;}
.board-more > i {display: inline-block; font-size: 16px; transition: 0.3s;}

.customer-hd {position: relative;  padding: 0 0 0 112px; width: 100%; height: 56px;}
.customer-icon {position: absolute; left: 10px; bottom: 0;}
.customer-tit {font-size: 26px; font-family: 'GmarketSans'; font-weight: 600; color:#000;}

@media (hover: hover) and (pointer: fine) {
    .board-more:hover {color: #000;}
    .board-more: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:#575757; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; overflow: hidden;}
.mainBo-con > table td {text-align: right; width: 26%; color: #5f868a;}

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

/* 메인 실시간 입출금 */
.main-finance {position: relative;}
.finance-badge {position: absolute; left: 0; right: 0; top: -5px; z-index: 3; margin: 0 auto;width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, #46c8bb, #229389); border: solid 1px #68dcd1; border-radius: 50%;}

.finance-hd {position: relative; margin:0 auto; padding:0; width: 100%; height: 80px; display: flex; justify-content: center; align-items: center;}
.finance-hd::before,
.finance-hd::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 150px; background: #a6e7e1; border: solid 1px #19d7cc; border-radius: 25px;}
.finance-hd::after {opacity: 0.4; background: url('../img/main-bg.jpg'); background-size: 560px; border: none;}

.finance-hd > button {position:relative; z-index: 1; width: calc(100% / 2);font-size: 20px; color: #000; font-weight: 700; background: none; border:none}
.finance-hd > button::after {content: ''; position: absolute; left: 0; right: 0; bottom: -5px; margin: 0 auto; width: 50%; max-width: 0; height: 3px; background: #00e9ff; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); transition: 0.3s;}
.finance-hd > button.active {color: #fff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 10px #0dffe9;}
.finance-hd > button.active::after {max-width: 20px;}


.realtime-con {position: relative; z-index: 2; margin: 0 auto; padding:10px 15px 15px 15px; width: calc(100% - 20px); height: 286px; background: #fff; border-radius: 25px; box-shadow: 0 2px 3px rgba(59, 119, 113, 0.25); 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-bottom: solid 1px rgba(152, 177, 223, 0.25);}
.newsticker > ul > li span {display:inline-block; color: #000;}
.newsticker > ul > li span.amount {color: #0080ab; text-align: right; letter-spacing: -1px; font-size: 15px; font-weight: 700;}
.newsticker > ul > li span.date {color: #777; text-align: right; font-size: 13px; font-weight: 500;}
.tag {display:inline-block; margin-right: 5px; padding: 0 0 1px; width: 30px; height: 20px; line-height: 20px; text-align: center; color: #fff !important; font-size: 12px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); border-radius: 5px;}
.red-tag {background: linear-gradient(180deg, #ff826e, #d54a34); box-shadow: 0 0 0 2px rgba(255, 183, 172, 0.5);}
.yellow-tag {background: linear-gradient(180deg, #ffbc26, #d47702); box-shadow: 0 0 0 2px rgba(255, 212, 117, 0.5);}

@media (hover: hover) and (pointer: fine) {
    .finance-hd > button:hover {color: #fff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 10px #0dffe9;}
    .newsticker > ul > li:hover {background:#f7f7f7;} 
}

/* 메인 제휴문의 */
.customer-con {position: relative;}
.cs-panel {margin:0 0 15px 0; padding: 10px 10px; width: 100%; display: flex; align-items: center; background:#fff; box-shadow: 0 2px 3px rgba(59, 119, 113, 0.25);border-radius: 15px;}
.cs-icon {margin: 0 20px 0 0; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, #25c0cf, #1c8eb9); box-shadow: 0 0 0 3px rgba(36, 190, 206, 0.25); border-radius: 10px;}
.cs-icon > i {font-size: 30px; color: #d5fbff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
.cs-info {font-size: 22px; font-weight: 700; color: #075a78;}

.quick-sns {position: relative; margin: 20px 0 0;}
.quick-hd { margin:0 auto; padding: 10px 0; width: 100%; text-align: center; font-size: 20px; font-weight: 700; color: #18645d; background: linear-gradient(90deg, rgba(107, 200, 203, 0), rgba(107, 200, 203, 0.3), rgba(107, 200, 203, 0));}

ul.main-sns {position: relative; margin:20px auto 0 auto; padding:0; width: 100%; display: flex; gap:20px; justify-content: center; align-items: center;}
ul.main-sns > li {position:relative;}
ul.main-sns > li > i {font-size: 48px; color:#49a7a3; cursor: pointer;}


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

    .circle-bg {min-width: initial;}  
    
    .mainBo-con {padding:0;}
    .mainBo-con > table th > span {width: 240px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1300px) {   
    /* main-border  */
    .main-border {margin:15px 0;}
    .mainBo-inner {gap: 20px;}
    .board-group {width: calc(100% / 3 - 20px);}
}

@media (max-width: 1200px) {
    /* hero */
    .hero {height:300px;}

    .banner-title {top:10px;}
    .banner-title > span {font-size: 12px;}

    .swiper-slide > .caption {margin-top:-20px;}
    .swiper-slide > .caption > h3 {font-size: 24px;}
    .swiper-slide > .caption > h4 {font-size: 32px;}

    /* cate */
    ul.cate-list > li {height: 80px;}
    ul.cate-list > li > img {margin-right: 20px; max-height: 54px;}
    ul.cate-list > li > i {right:20px; font-size: 30px;}

    .cate-txt{margin-right: 20px; min-width: auto;}
    .cate-kr {font-size: 22px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 1024px) {
    /* hero */
    .hero {margin:118px 0 0 0; padding:0; height: 250px;}
    .hero::before {top:0; border-radius: 0; box-shadow: none;}
    .circle-bg {width: 45.96%;}

    /* cate */
    .category-inner {padding:30px 15px 5px 15px;}
    ul.cate-list > li {height: 60px; justify-content: center;}
    ul.cate-list > li > img {margin-right: 15px; max-height: 40px;}
    ul.cate-list > li > i {font-size: 25px;}
    .cate-kr {font-size: 18px;}

    /* mainBo */
    .mainBo-inner {align-items: center; flex-direction: column;}
    .board-group {width: 100%; max-width: 600px;}
    .main-finance {order: 1;}
    .main-notice {order: 2; margin-bottom:15px; border-bottom: dashed 1px #7eb0c2;}
    .main-customer {order: 3;}
}/* 미디어쿼리문 끝 */


@media (max-width: 767px) {
    /* hero */
    .hero {height: 180px;}
    .circle-bg {width: 90%;}
    .mobile-support {display: none;}

    .banner-title::after {max-width: 60px;}
    .banner-title > span {font-size: 11px; letter-spacing: -1px;}

    .swiper-slide > .caption {margin-top:0;}
    .swiper-slide > .caption > h3 {font-size: 18px; font-weight: 200;}
    .swiper-slide > .caption > h4 {font-size: 28px;}    

    /* 카테고리 */
    ul.cate-list > li > img {margin-right: 10px;}
    ul.cate-list > li > i {right:10px;}  
    
    /* game-list */
    ul.game-list {gap:10px;}
    ul.game-list > li {width: calc(100% / 3 - 10px);}

    ul.sport-list {gap:0;}
    ul.sport-list > li {width:100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 639px) {
    .category-inner {padding:30px 5px 5px 5px;}

    ul.cate-list {gap:5px}
    ul.cate-list > li {padding:0 5px; height: 50px;}   
    ul.cate-list > li > img {margin-right:5px; height:30px;}

    ul.cate-list > li > i,
    ul.cate-list > li.active > i,
    .cate-en {display:none;} 

    .cate-txt {margin-right:0}
    .cate-kr {font-size: 14px; letter-spacing: -1px;} 

    /* game-list */
    ul.game-list > li {margin:5px 0;}
    .g-logo {width: 55px; height: 55px;}
    .g-circle > img {max-width: 23px; max-height: 40px;}
    .g-img {left:5px;}

    .g-footer {height: 60px;}
    .g-footer .kr-text {font-size: 14px; letter-spacing: -1px;}
    .g-footer .en-text {font-size: 10px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 567px) {
    .hero {height: 150px;}

    /* casino */
    .dealer-left {width: 14.84%;}
    .dealer-right {width: 14.49%}
    .rose {width: 25.3%;}
    .roulette {width: 27.48%;}
    .casino-table {width: 33.97%;}

    /* slot */
    .slot-center {width: 27.98% !important;}
    .slot-left {width: 16.59%; right: 20.25%;}
    .slot-right {width: 18.85%;}
    .wheel {width: 22.99%;}

    /* game-list */
    .g-footer {height: 50px;}
     ul.sport-list > li .g-footer {height: 60px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 460px) { 
    /* game-list */
    .g-footer {height: 40px;} 
    ul.sport-list > li .g-footer {height: 50px;}

    /* main-bo */
    .finance-badge {width: 70px; height: 70px;}
    .finance-hd > button {font-size: 18px;}
    .mainBo-con > table th > span {width: 210px;}
    ul.main-sns > li > i {font-size: 40px;}
}/* 미디어쿼리문 끝 */