@import url('/css/font.css');
@import url('/css/all.min.css');
@import url('/css/reset.min.css');


:root {/* --mainBg: #292526;--navBg: #1d1a1b; */--btnNormal: #fec882;--btnGradi: linear-gradient(180deg,#fec882,#ff9f6c);--txtNormal: #fec882;--dividerGradi: linear-gradient(90deg,transparent 2%,#94897a 50%,transparent 98%);--borderRadius: 5px;--btnViolet: linear-gradient(96deg,#d10ded 7.04%,#2b1c88 50%,#d10ded 93%),linear-gradient(96deg,#9b1fda -71.14%,#d10ded 7.04%)200% 100%;--btnViolet2: #d10ded;--btnViolet3: rgba(61,5,87,.8);--ffEng: 'Blinker', sans-serif;--ffKor: 'Nanum Gothic', sans-serif;
--navWidth : 250px;
--bodyBgColor: #292526;--textActive: #fffaf3;--textInactive: #94897a;--textGold: #e9cda9;--textIconGold: #ccab80;--textIconInactive: #d4c5b1;--textDark: #322e2f;--mainActiveColor: #fec882;--mainActiveColorRGB: 254,200,130;--secondaryActiveColor: #ff9f6c;--mainActiveHoverColor: #b9fe82;    --secondaryActiveHoverColor: #6cffb8;
    --white: #fffaf3;
    --error: #f50;
    --success: #0fa810;
    --yellow: #fde036;
    --liveColor: #fe5151;
    --bonusPrimaryColor: #b9fe82;
    --bonusSecondaryColor: #6cffb8;
    --bonusBorderColor: #ffb800;
    --bonusTextColor: #e7cfb2;
    --mainActiveGradient: linear-gradient(180deg,#fec882,#ff9f6c);
    --mainActiveHoverGradient: linear-gradient(180deg,#b9fe82,#6cffb8);
    --asideNavBg: #2a2829;
    --menuActiveColor: #fff;
    --buttonMain: #fec882;
    --buttonText: #fff;
    --buttonDisabled: #c3ccd9;
    --mainColor: #072443;
    --menuSectionBorder: #c3ccd9;
    --red: red;
    --textContactLinkColor: #f5ca8c;
    --tablePendingBg: #f6eee2;
    --tableSuccess: #59d68b;
    --tableError: #fe5151;
    --tableErrorBg: #ffefec;
    --inputColor: #4e4842;
    --inputFocus: #d4c5b1;
    --inputDisabled: #4e4842;
    --inputDisabledBg: #e1d6c8;
    --inputBackgroundForm: #fffaf3;
    --inputPlaceholderColor: #d4c5b1;
    --inputErrorColor: #fe5151;
    --inputErrorBg: #ffefec;
    --dropDownTextColor: #6e82a2;
    --dropDownTextActiveColor: #edf1f3;
    --producerIconBg: #231f1f;
    --promoCountBgColor: #fa5926;
    --cookieBar: rgba(0,0,0,.7);
    --textPageHeading: #fec882;
    --textPageText: #d4c5b1;
    --textPageTextRevert: #322e2f;
    --textPageLink: #fec882;
    --textPageListElements: #fec882;
    --textPageTableHeadingBg: #322e2f;
    --textPageTableHeading: #fec882;
    --textPageTableBody: #d4c5b1;
    --textPageTableBodyBg: rgba(78,72,66,.6);
    --textPageTableBodyBorder: #292526;
    --transactionPositive: #6cffb8;
    --transactionNegative: #ff8484;
    --bonusAvailableBg: #403b38;
    --gameBoxContentBg: #020304;
    --gameBoxControlsBg: #010301;
    --latestWinnersText: #aaa8a9;
    --cabinetScrollbarMobileBg: #4e4842;
    --cabinetScrollbarMobile: #d4c5b1;
    --cabinetMenuLastButtonBg: #44403c;
    --modalShadow: 0 5px 180px hsla(34,98%,75%,.3);
    --modalShadowBgRGB: 41,37,38;
    --modalScrollBarThumbRGB: 254,200,130;
    --registrationPopupBg: rgba(0,0,0,.53);
    --registrationPopupItemBg: #2a2526;
    --registrationPopupTitle: #fec882;
    --registrationPopupText: #fff;
    --verificationPhoneBg: #4e4842;
    --verificationPhoneBgMobile: #322e2f;
    --verificationPhoneBorderColor: #fec882;
    --verificationPhoneTextColor: #fff;
    --verificationPhoneMainColor: #fec882;
    --footerSeoTextHidden: $footerSeoTextHidden;
    --eventHeading: $eventHeading;
    --mainPlayIconGradientColor: #fec882;
    --secondPlayIconGradientColor: #ff9f6c;
    --latestWinnerGameText: #d4c5b1;
    --mobileSidePadding: 18px;
    --lossLimitCardBackground: $lossLimitCardBackground;
    --lossLimitBackground: $lossLimitBackground;
    --limitsAccent: #64af5c;
    --limitsAccentHover: $accentMain;
    --limitsButton: #fe5151;
    --limitsButtonHover: #fe0e0e;
    --limitsButtonDisabled: $theme_1;
    --limitsPlaceholder: $theme_7;
    --limitsText: $theme_6;
    --headerClockBg: rgba(50,46,47,.3);
    --headerClockColor: #94897a;
    --headerClockColorDesktop: #94897a;
    --casinoPlaceholderPrimary: #322e2f;
    --casinoPlaceholderSecondary: #292526;
    --notificationModal: #fffaf3;
    --notificationModalBg: #292526;
    --notificationModalSuccessRgb: 108,255,184;
    --notificationModalFailRgb: 239,44,23;
    --notificationModalNoticeRgb: 254,200,130;
    --siteNavLink: #94897a;
    --siteNavLinkHover: #fec882;
    --siteNavLinkActive: #fffaf3;
    --siteNavLinkDropdownBg: #292526;
    --casinoFavouritesInner: #584f42;
    --casinoFavouritesOuter: #94897a;
    --casinoFavoritedInner: #fec882;
    --casinoFavoritedOuter: #94897a;
    --cashierModalBackgroundMain: #292526;
    --cashierModalBackgroundSecondary: #3a3534;
    --cashierModalNotFound: #fec882;
    --cashierModalSelectedTabsBackground: #3a3534;
    --cashierBonusItemBg: #3d393a;
    --cashierTextColorMain: #fffaf3;
    --cashierTextColorSecondary: #fec882;
    --cashierInputColor: #322e2f;
    --cashierNotActiveTabColor: #94897a;
    --cashierNotActiveTabBackground: rgba(58,53,52,.4);
    --cashierScrollbarThumb: #4a4544;
    --cashierScrollbarThumbHover: #d4c5b1;
    --cashierScrollbarTrack: #3c3736;
    --cashierBoxShadowMain: rgba(0,0,0,.25);
    --cashierPaymentMethodGroupItem: #e6e6e6;
    --cashierPaymentMethodGroupItemBg: hsla(35,11%,53%,.1);
    --cashierPaymentMethodGroupItemHover: #322e2f;
    --cashierPaymentMethodGroupItemBgHover: #d4c5b1;
    --cashierPaymentMethodGroupItemBorder: hsla(35,11%,53%,.1);
    --cashierPaymentMethodAccordionBg: hsla(35,11%,53%,.1);
    --cashierErrorIconColor: #ff7c7a;
    --cashierButtonBoxShadow: 0 5px 40px rgba(0,0,0,.2);
    --cashierLoaderDots: #fec882;
    --cashierBonusListArrow: #fffaf3;
    --cashierBonusListArrowBg: #3a3534;
    --seoFooterAccent: #fec882;
    --seoFooterShadowRGB: 41,37,38;
    --seoFooterMobileShadowRGB: 41,37,38
}



.decor {position: relative}

.decor div:after,.decor div:before,.decor:after,.decor:before {content: "";display: block}

.decor div {position: relative;transform: rotate(45deg)}

.decor--figure-1 {height: 17px;width: 63px}

.decor--figure-1:before {border-color: #fffaf3;border-style: solid;border-width: 1px 0;box-sizing: border-box;height: 9px;left: 18px;position: absolute;top: 4px;width: 20px}

.decor--figure-1:after {background: #fec882;height: 1px;left: 0;position: absolute;top: 8px;width: 39px}

.decor--figure-1 div {border: 1px solid #fffaf3;height: 13px;left: 48px;position: absolute;top: 2px;transform: rotate(-45deg);width: 13px}

.decor--figure-1 div:before {border-color: #fec882;border-style: solid;border-width: 1px 0 0 1px;height: 11px;left: -6px;position: absolute;top: -6px;width: 11px}

.decor--reverse {transform: rotate(180deg)}

.decor--reverse.decor--figure-5:before {bottom: 0;top: auto}

.decor--reverse.decor--figure-5:after {bottom: auto;top: 0}

.decor--filled-square-between-lines,.decor--small-square-between-lines {align-items: center;display: flex;justify-content: space-between;width: 30px}

.decor--filled-square-between-lines:after,.decor--filled-square-between-lines:before,.decor--small-square-between-lines:after,.decor--small-square-between-lines:before {height: 1px;opacity: .4;width: 8px}

.decor--filled-square-between-lines:before,.decor--small-square-between-lines:before {background: linear-gradient(90deg,transparent,#fffaf3)}

.decor--filled-square-between-lines:after,.decor--small-square-between-lines:after {background: linear-gradient(270deg,transparent,#fffaf3)}

.decor--filled-square-between-lines div {border: 1px solid #fec882;height: 8px;width: 8px}

.decor--filled-square-between-lines div:before {background: #fec882;height: 2px;left: 2px;position: absolute;top: 2px;width: 2px}

.decor--small-square-between-lines div {background: #fec882;height: 3px;width: 3px}




@font-face {font-display: block;font-family: casinoIcon;font-style: normal;font-weight: 400;src: url(/css/ff_font.ttf) format("truetype"),url(/app/ff_font.woff) format("woff"),url(/app/ff_font.svg) format("svg")}

[class*=" icon-"],[class^=icon-] {font-family: casinoIcon!important;font-weight: normal;}


.icon-aviator-title:before {content: "\e900"}

.icon-bitcoin:before {content: "\e901"}

.icon-blocked:before {content: "\e902"}

.icon-card:before {content: "\e903"}

.icon-category_all:before {content: "\e904"}

.icon-category_all_tables:before {content: "\e905"}

.icon-category_baccarat:before {content: "\e906"}

.icon-category_blackjack:before {content: "\e907"}

.icon-category_bonus_buy:before {content: "\e908"}

.icon-category_cards:before {content: "\e909"}

.icon-category_drops_and_wins:before {content: "\e90a"}

.icon-category_fast_games:before {content: "\e90b"}

.icon-category_favorites:before {content: "\e90c"}

.icon-category_halloween:before {content: "\e90d"}

.icon-category_hits:before {color: #94897a;content: "\e90e"}

.icon-category_jackpot:before {content: "\e90f"}

.icon-category_lobby:before {content: "\e910"}

.icon-category_lobby_live:before {content: "\e911"}

.icon-category_new:before {content: "\e912"}

.icon-category_other:before {content: "\e913"}

.icon-category_poker:before {content: "\e914"}

.icon-category_popular:before {content: "\e915"}

.icon-category_popular_slots:before {content: "\e916"}

.icon-category_roulette:before {content: "\e917"}

.icon-category_slots:before {content: "\e918"}

.icon-category_winter:before {content: "\e919"}

.icon-check:before {content: "\e91a"}

.icon-chevron:before {content: "\e91b"}

.icon-coin:before {content: "\e91c"}

.icon-coronal:before {content: "\e91d"}

.icon-crash:before {content: "\e91e"}

.icon-date:before {content: "\e91f"}

.icon-dealer:before {content: "\e920"}

.icon-eye-active:before {content: "\e921"}

.icon-emoji-smile:before {content: "\e922"}

.icon-category_game_shows:before {color: #94897a;content: "\e923"}

.icon-gift:before {content: "\e924"}

.icon-hamburger:before {content: "\e925"}

.icon-heart:before {content: "\e926"}

.icon-horn:before {content: "\e927"}

.icon-info:before {content: "\e928"}

.icon-joystick:before {content: "\e929"}

.icon-key:before {content: "\e92a"}

.icon-logo:before {content: "\e92b"}

.icon-lottery:before {content: "\e92c"}

.icon-medal:before {content: "\e92d"}

.icon-pig-bank:before {content: "\e92e"}

.icon-promo:before {content: "\e92f"}

.icon-puzzle:before {content: "\e930"}

.icon-search:before {content: "\e931"}

.icon-see:before {content: "\e932"}

.icon-star:before {content: "\e933"}

.icon-support:before {content: "\e934"}

.icon-tournament:before {content: "\e935"}

.icon-vector:before {content: "\e936"}

.icon-verification-check:before {color: #87ffc6;content: "\e937"}

.icon-verification-warning:before {color: #ff7c7a;content: "\e938"}

.icon-vip:before {content: "\e939"}

.icon-withdraw:before {content: "\e93a"}

.icon-wreath:before {content: "\e93b"}

.icon-aviator:before {content: "\e93c"}

.icon-aviator-proppeller:before {content: "\e93d"}






body {background: #fff; font-size: 1.5em; font-family: var(--ffKor);}


/* header */
header {height: 70px; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; box-shadow: 0 0 16px #d6d6d6; width: calc(100% - 20px); position: fixed; z-index: 15;}
    header .sideWrap {display: flex; align-items: center;}
    header ul {height: 70px; display: flex; position: relative;}
    header ul li {align-items: center; display: flex; justify-content: center; font-weight: bold; font-size: 0.95rem; font-family: var(--ffKor); padding: 0 10px; cursor: pointer; position: relative;}
    
    header ul li:hover{ color: #f73d3c;}
    header ul li:hover:after{ content: ''; position: absolute; bottom: 0; height: 0.5rem; width: 50%; background: #f73d3c; border-radius: 10px; pointer-events: none;}
    header ul li .new { position: absolute; right: 0; top: 0.425rem; background: #f73d3c; color: #fff; padding: 0.25rem 0.25rem 0.2rem 0.25rem; font-weight: 400; font-size: 10px; border-radius: 0.3125rem; -webkit-animation: .4s newAnimation ease-in-out infinite alternate; animation: .4s newAnimation ease-in-out infinite alternate;}
    
    @keyframes newAnimation {
        from {opacity: .3}
    }

    header .divider {align-items: center; display: flex; justify-content: space-between; width: 30px; padding: 0 5px; pointer-events: none;}
    header .divider:before {background: linear-gradient(90deg,transparent,#999);}
    header .divider:after {background: linear-gradient(270deg,transparent,#999);}
    header .divider:before,
    header .divider:after {height: 1px; opacity: .4; width: 8px;content: ""; display: block;}

    header .divider div {border: 1px solid #555; height: 8px; width: 8px; position: relative; transform: rotate(45deg); box-sizing: border-box;}
    header .divider div:before {background: #555; height: 2px; left: 2px; position: absolute; top: 2px; width: 2px; content: ""; display: block;}
    header .divider div:after {content: ""; display: block;}

    header .logo {font-family: var(--ffEng); font-weight: bold; font-size: 40px; width: 200px; cursor: pointer;}
    header .logo b {color: #f73d3c;}
    header .logo img {width: 100%; vertical-align: middle;}
    
    header ul li img {height: 35px;}
    header ul li span {color: #f73d3c;}
    

    /* header .logo:before {position: absolute; border: 2px solid #fff; content: ""; height: 122px; transform: rotate(-80deg); top: -28px; left: 60px;} */
    header .navBtn_icon {display: flex; align-items: center;}
    header .navBtn_icon .box {box-shadow: 0 0 7px rgba(0,0,0,.25); border-radius: 5px; padding: 3px 7px; margin: 0 3px; font-size: 11px; display: flex; align-items: center; flex-direction: row; word-break: keep-all; border: 1px solid #ccc; position: relative; overflow: hidden; cursor: pointer; }
    header .navBtn_icon .box img {width: 30px; transition: all .3s ease;}
    header .navBtn_icon .box .tooltip { font-size: 13px; font-family: var(--ffKor); font-weight: bold; color: #555; word-break: break-all; display: flex; justify-content: center; align-items: center; text-align: center; transition: all .3s ease;}
    header .navBtn_icon .box .tooltip::after {content: "신청";}
    header .navBtn_icon .box:hover {transform: scale(1.2); transition: all .3s ease;}
    header .navBtn_icon .box:hover img {transform: scale(1.2); transition: all .5s ease;}




    header .navBtn_txt {display: flex; font-size: 13px; font-family: var(--ffKor); word-break: keep-all; padding-left: 20px;}
    header .navBtn_txt .box {color: #fff; padding: 0px 10px; border-radius: 3px; margin: 0 2px; border: 1px solid #8ea627; font-weight: bold; cursor: pointer; height: 30px; display: flex; align-items: center; background: linear-gradient(130deg, #4e86f0 25%, #2956a7 26%, #4e86f0 75%, #2956a7 76%); transition: all .3s ease; background-size: 200% 100%;}
    header .navBtn_txt .box:hover {background-position: 100% 100%; transition: all .3s ease;}
   
    header .navBtn_txt .google {background: #fff; color: #000; padding: 0px 10px 0px 5px; font-size: 12px;}
    header .navBtn_txt .google img {height: 25px;}

    header .navBtn_txt {display: flex; align-items: center;}
    header .navBtn_txt .user { font-size: 13px; font-weight: 900; color: #555; display: flex; align-items: center; margin-right: 3px;}
    header .navBtn_txt .user .fa-user-large {font-size: 11px;}
    header .navBtn_txt .user .fa-sort-down {position: relative; top: -2px; font-size: 11px;}

    header .navBtn_txt .user div {position: relative;}
    header .navBtn_txt .user .info:first-child {margin-right: 20px;}
    header .navBtn_txt .user .info:first-child:after {content: ''; position: absolute; border-left: 1px solid #f73d3c; height: 25px; top: -5px; right: -10px;}
    
    header .navBtn_txt .user .info {cursor: pointer;}
    header .navBtn_txt .user .info:hover .info_nav {display: flex;}
    header .navBtn_txt .user .info_nav {position: absolute; flex-direction: column; height: auto; z-index: 11; padding-top: 28px; display: none;}
    header .navBtn_txt .user .info_nav li {background: #fff; padding: 1rem; border: 1px solid #aaa; border-width: 0 1px 1px 1px;}
    .info_nav li:hover:after{bottom: 2px; height: 0.25rem; width: 70%;}

    header .navBtn_txt .user .wallet {font-size: 11px; margin-right: 5px;}
    header .navBtn_txt .user .wallet div {padding: 2px 0;}
    header .navBtn_txt .user .wallet b {font-weight: 900; font-size: 12px; }
    header .navBtn_txt .user .refresh {cursor: pointer; transition: all .3s ease; margin: 0; background: none; color: #000; border-color: #ccc;}
    header .navBtn_txt .user .refresh .fa-rotate {margin-right: 3px;}
    header .navBtn_txt .user .refresh:hover .fa-rotate {transition: all .3s ease; transform: rotate(180deg); color:#f73d3c;}


    .header_line { background: linear-gradient(90deg,transparent,#fec882 50%,transparent); height: 1px; margin-top: -1px; position: relative; z-index: 10;}

    /* nav */
    nav {position: fixed; height: calc(100% - 54px); top: 54px; width: 300px; background: #ececec; z-index: 11; box-shadow: -2px 0 15px rgba(0,0,0,0.5); border-left: 1px solid #ccc; overflow: auto; right: -100%; transition: all .3s ease;}
    nav.active {right: 0; transition: all .3s ease;}
    nav .user {font-family: var(--ffKor); color: #555;}
    nav .user .info {font-size: 17px; padding: 1rem;}
    nav .wallet {color: #322e2f; font-size: 15px; text-align: center;}
    nav .wallet div {margin: 0 1rem -1px 1rem; padding: 0.5rem;border: 1px solid #94897a; background: #fff; color: #322e2f; box-sizing: border-box; cursor: pointer;}
    nav .wallet div:first-child {border-radius: 7px 7px 0 0;}
    nav .wallet div:last-child {border-radius: 0 0 7px 7px;}
    nav .wallet b {font-family: var(--ffEng); font-size: 30px;}
    nav .wallet div:hover,
    nav .wallet div.active {background: linear-gradient(180deg,#fec882,#ff9f6c); color: #322e2f;}
    nav .wallet div.refresh {font-size: 13px;}
    
    
    nav .divider {align-items: center; display: flex; justify-content: space-between; width: 30px; padding: 0 5px; pointer-events: none;}
    nav .divider:before {background: linear-gradient(90deg,transparent,#999);}
    nav .divider:after {background: linear-gradient(270deg,transparent,#999);}
    nav .divider:before,
    nav .divider:after {height: 1px; opacity: .4; width: 8px;content: ""; display: block;}
    
    nav .divider div {border: 1px solid #555; height: 8px; width: 8px; position: relative; transform: rotate(45deg); box-sizing: border-box;}
    nav .divider div:before {background: #555; height: 2px; left: 2px; position: absolute; top: 2px; width: 2px; content: ""; display: block;}
    nav .divider div:after {content: ""; display: block;}
    
    
    
    nav .navBtn_txt {font-size: 13px; font-family: var(--ffKor); word-break: keep-all;}
    nav .navBtn_txt .box_wrap {display: flex; margin: 10px 1rem 0 1rem;}
    nav .navBtn_txt .box {color: #fff; padding: 0px 10px; border-radius: 3px; margin: 0 2px; border: 1px solid #8ea627; font-weight: bold; cursor: pointer; height: 30px; display: flex; align-items: center; justify-content: center; background: linear-gradient(130deg, #4e86f0 25%, #2956a7 26%, #4e86f0 75%, #2956a7 76%); transition: all .3s ease; background-size: 200% 100%; width: 100%;}
    
    
    nav .navBtn_txt .box:hover {background-position: 100% 100%; transition: all .3s ease;}
    
    nav .navBtn_txt .google {background: #fff; color: #000; padding: 0px 10px 0px 5px; font-size: 12px;}
    nav .navBtn_txt .google img {height: 25px;}
    
    
    nav dl {margin: 1rem; background: #fff; border-radius: 7px; border: 1px solid #ccc; text-align: center; padding: 0.2rem 0 0.5rem 0;}
    nav dl dt {font-size: 15px; color: #2956a7; font-weight: bold; display: flex; align-items: center;padding: 0.5rem 1rem 0.2rem 1rem;}
    nav dl dd {font-size: 13px; color: #555; display: inline-flex; justify-content: center; width: 45%; box-sizing: border-box; background: #f7f7f7; margin-bottom: 5px; border: 1px solid #eee; padding: 0.5rem 1rem; position: relative;}
    
    nav dl dd:hover {color: #fff; cursor: pointer; transition: all .3s ease; background: #f73d3c}
    
    nav dl dt div {height: 25px;}
    nav dl dt div img {height: 100%;}

    nav dl dd .new { position: absolute; right:0.2rem; top: 0.2rem; background: #f73d3c; color: #fff; padding: 0.25rem 0.25rem 0.2rem 0.25rem; font-weight: 400; font-size: 9px; border-radius: 0.3125rem; -webkit-animation: .4s newAnimation ease-in-out infinite alternate; animation: .4s newAnimation ease-in-out infinite alternate;}
    

/* main */
main {font-weight: 900; position: relative; top: 70px;}
    .slider img {width: 100%;}

    /* mainBtn */
        .mainBtn {padding: 2.3333rem 2.5rem; padding-bottom: 0; display: flex; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 120rem; margin: auto; margin-bottom: 1.875rem; flex-wrap: wrap}
        .mainBtn > div {box-shadow: 0 0 25px rgba(0,0,0,.4); background: #ececec; height: 300px; border-radius: 15px;}
        .mainBtn .row1 {height: 150px; padding: 0 1%; width: 29.333%; margin: 1%; cursor: pointer;}

        .mainBtn .row1 .title {display: flex; align-items: center; position: relative; height: 100%;}
        .mainBtn .row1 .img {height: 100%; position: absolute; right: 0; z-index: 0; overflow: hidden;}
        .mainBtn .row1 .img img {height: 100%; }
        .mainBtn .row1 .img img.ss_tiger {height: 150%; }


        .mainBtn .row1 .txt {display: flex; flex-direction: column;font-size: 20px; font-family: var(--ffKor); z-index: 1; text-shadow: 1px 1px 2px #fff;}
        .mainBtn .row1 .txt span {font-size: 45px; padding-bottom: 10px; font-family: var(--ffEng); text-shadow: 1px 1px 2px #fff;}
        .mainBtn .row1.mypage .txt b {color: #2956a7;}
        .mainBtn .row1.guild .txt b {color: #f73d3c;}
        .mainBtn .row1.top .txt b {color: #f4a200;}
        .mainBtn .row1 .cont {background: #ececec; width: 90%; position: absolute; padding: 20px 5%; left: 0; top: 135px; display: none; border-radius: 0 0 15px 15px; z-index: 0; box-shadow: 0px 10px 10px rgba(0,0,0,.4); flex-wrap: wrap;}

        .mainBtn .row1:hover {transform: scale(1.05); transition: all .3s ease; z-index: 10;}
        .mainBtn .row1.guild:hover .cont {display: flex;}
        .mainBtn .row1:hover .img {height: 100%; position: absolute; right: 0; z-index: 1; transform: scale(1.1); transition: all .3s ease;}
        .mainBtn .row1.guild:hover .txt {display: flex; flex-direction: column; align-items: baseline;}
        .mainBtn .row1.guild:hover .txt span {font-size: 45px; padding-bottom: 10px;}
        .mainBtn .row1.guild:hover .title {height: 100%; padding: 0; justify-content: left;}
        
        .mainBtn .row1.active {transform: scale(1.05); transition: all .3s ease; z-index: 10;}
        .mainBtn .row1.active .cont {display: flex;}
        .mainBtn .row1.active .img {height: 100%; position: absolute; right: 0; z-index: 1; transform: scale(1.1); transition: all .3s ease;}
        .mainBtn .row1.active .txt {display: flex; flex-direction: column; align-items: baseline;}
        .mainBtn .row1.active .txt span {font-size: 45px; padding-bottom: 10px;}
        .mainBtn .row1.active .title {height: 100%; padding: 0; justify-content: left;}


        /* .mainBtn .row1:hover .img {height: 40px; position: relative; z-index: 1;}
        .mainBtn .row1:hover .txt {display: flex; flex-direction: row; align-items: center;}
        .mainBtn .row1:hover .txt span {font-size: 30px; padding-right: 5px; transition: all .3s ease;}
        .mainBtn .row1:hover .title {height: auto; justify-content: center; padding: 10px 0;}
        .mainBtn .row1:hover .cont {display: grid; grid-template-columns: repeat(2,1fr);}
        .mainBtn .row1.guild:hover .cont {display: grid; grid-template-columns: repeat(3,1fr);}
        */

        
        .mainBtn .row1 .cont li {border-radius: 20px; margin: 2.5%; font-weight: bold; cursor: pointer; height: 10vw; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 14px; width: 45%; border: 1px solid rgba(255,255,255,1); box-sizing: border-box;
            box-shadow: 1px 1px 10px rgba(0,0,0,0.4); background: linear-gradient(90deg,#d6d7d9, #fcfcfc) ; transform-style: preserve-3d; color: #FFF;
        }
        .mainBtn .row1 .cont li div {color: #000; font-family: var(--ffKor);}
        .mainBtn .row1 .cont li:before {text-shadow: 1px 1px 1px #000; position: absolute; content: ""; height: 80%; width: 80%; border-radius: 20px; box-shadow: 1px 1px 3px rgba(0,0,0,0.7); z-index: -1; background: linear-gradient(130deg,#fafafa 39%, #eee 40% )}

        /* .mainBtn .row1 .cont li:nth-child(4n+1):before {background: linear-gradient(130deg,#49C9AD 39%, #1cbb9b 40% );}
        .mainBtn .row1 .cont li:nth-child(4n+2):before {background: linear-gradient(130deg,#f3607c 39%, #ef3d5f 40% );}
        .mainBtn .row1 .cont li:nth-child(4n+3):before {background: linear-gradient(130deg,#4fb9f3 39%, #23a7f1 40% );}
        .mainBtn .row1 .cont li:nth-child(4n):before {background: linear-gradient(130deg,#f5d657 39%, #f0c30e 40% );} */

        .mainBtn .row1 .cont li:before {background-size: 200% 100% !important; transition: all .3s ease;}
        .mainBtn .row1 .cont li:hover:before {background-size: 100% 100% !important; transition: all .3s ease;}
        .mainBtn .row1.active .cont li:hover:before {background-size: 100% 100% !important; transition: all .3s ease;}
        .mainBtn .row1 .cont li img {width: 50%; transform: translateZ(20px); }
        

        
        /* topRanking */
        
        .top_list_wrap {padding: 0 2.3333rem; margin: 1%; top: 70px; position: relative;}
        .top_list_wrap.active {transition: all .3s ease; transform: scale(1);}

        .top_list_cont {display: flex; background: url('/img/toplayer_bg.jpg') center left no-repeat; background-size: cover; 
        justify-content: space-around; border-radius: 7px; }

        .top_list {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 0.5rem; align-items: start; margin: 1%;}
        .top_list dl {background: rgba(0,0,0,0.5); padding: 0.5rem; border-radius: 7px; color: #fff;}

        .top_list dt {font-size: 20px; display: flex; align-items: center; justify-content: center; font-weight: bold; position: relative;}
        .top_list dt span {padding-right: 5px;}
        .top_list dt b {color: #f4a200; font-family: var(--ffEng); font-size: 25px; padding: 0 5px;}
        .top_list dd {font-weight: normal; font-size: 17px; display: flex; align-items: center;}
        .top_list .list_dd dd img {height: 40px; margin-right: 5px;}

        /* 
        .top_list dd div span {color: #c46900; font-weight: 900;}
        .top_list dd div:nth-child(2) {font-family: var(--ffEng); font-size: 20px;} */
        .top_list dd div {font-family: var(--ffKor); font-size: 11px;}
        .top_list dd div.desc {display: flex; align-items: center; width: 100%; justify-content: space-between;}
        .top_list dd div.desc div       {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5px;}
        .top_list dd div.desc .user span     {color: #f4a200; font-weight: 900;}
        .top_list dd div.desc .amount   {width: auto; font-family: var(--ffEng); font-size: 17px;}
        .top_list dd div.desc div:first-child .amount {font-size: 15px;}
        .top_list dd div.desc .provider {width: auto; color: #c46900; font-size: 13px; font-weight: bold; margin: 0 5px;}
        .top_list dd div.desc .date     {width: auto; color: #ccc; font-size: 11px;}

        .list_dd {display: grid; grid-template-columns: repeat(1,1fr); grid-gap: .2rem; padding-top: 1rem; height: 92px; overflow: hidden;}
        .list_dd.active {height: 100%;}
        .top_list_close {font-size: 25px; position: absolute; right: 0; top: -5px; cursor: pointer;}


        /* .list_dd_style2 {padding-top: 1rem;}
        .list_dd_style2 img {width: 20px; background: #000; border-radius: 50%;}
        .list_dd_style2 dd {padding-bottom: 0.5rem;}
        .list_dd_style2 dd div {font-size: 12px; padding-right: 10px; font-weight: bold;}
        .list_dd_style2 dd .name {font-weight: bold; color: #c46900; font-size: 15px;}
        .list_dd_style2 dd .amount {font-family: var(--ffEng); font-weight: bold; font-size: 18px;}
        .list_dd_style2 dd div:last-child {padding-right: 0px; color: #555;}
        .list_dd_style2 dd div span {font-size: 11px; font-weight: normal;} */

        .top_title {width: 30%; display: flex; justify-content: center; align-items: center; position: relative;}
        .top_title .title {display: flex; align-items: center; position: relative; height: 100%;}
        .top_title .img {height: 100px; position: absolute; margin-left: calc(0% - 200px); margin-top: calc(0% - 100px); z-index: 2; overflow: hidden;}
        .top_title .img img {height: 100%; transform: rotate(300deg);}

        .top_title .txt {display: flex; flex-direction: column;font-size: 20px; font-family: var(--ffKor); z-index: 1; text-shadow: 0px 0px 10px #000; color: #fff; font-weight: bold; text-align: center; padding: 10px;}
        .top_title .txt span {font-size: 45px; padding-bottom: 10px; font-family: var(--ffEng); color: #fff;}
        .top_title .txt b {color: #f4a200;}

        @media(max-width: 900px) {
            .top_list_wrap {padding: 0 1rem;}
            .top_list {grid-template-columns: 1fr;}
            .top_list dl {padding: 0.5rem; width: calc(100% - 1rem);}
            .top_list_cont {flex-direction: column;}
            .top_title {width: 100%; margin: 30px 0;}
            .top_title .img {height: 70px;}

        }





        .mainBtn .row2 {padding: 0.5% 1%; width: 29.333%; margin: 1%; height: auto; position: relative; z-index: 1;}
        .mainBtn .row2:hover .cont {
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            position: absolute;
            width: 95%;
            padding: 0 2.5% 1.5% 2.5% ;
            background: #ececec;
            left: 0;
            box-shadow: 0px 10px 10px rgba(0,0,0,.4); 
            border-radius: 0 0 15px 15px;
        }


        .mainBtn .row2 .title {display: flex; position: relative; height: auto; padding: 10px 0; font-family: var(--ffKor); font-size: 17px; font-weight: bold;}
        .mainBtn .row2 .title span {padding-right: 3px; font-weight: 900;}
        .mainBtn .row2 .cont {display: flex; flex-wrap: wrap; overflow: hidden;}
        .mainBtn .row2 .cont li {height: 11.5vw; width: 49%; display: flex; align-content: center; flex-wrap: wrap; justify-content: center; position: relative; transform-style: preserve-3d; background: #fff; border-radius: 7px; margin-bottom: 2%; cursor: pointer;}
        .mainBtn .row2 .cont li:nth-child(odd) {margin-right: 1%;}
        .mainBtn .row2 .cont li:nth-child(even) {margin-left: 1%;}
        .mainBtn .row2 .cont li:nth-child(n+5) {display: none;}
        
        
        /* campaign */
        .mainBtn .row2.campaign .cont li {color: #333; background: #fff; flex-direction: column; align-items: center; border-radius: 7px; border: 1px solid #ccc; box-sizing: border-box;}
        .mainBtn .row2.campaign .cont li .img {justify-content: center; display: flex;}
        .mainBtn .row2.campaign .cont li img {width: 5vw; padding: 0 0 0.3rem 0;}
        .mainBtn .row2.campaign .cont li .txt {display: flex; flex-direction: column; align-items: center;  flex-wrap: wrap}
        .mainBtn .row2.campaign .cont li .txt div:nth-child(1) {display: flex; flex-direction: column; align-items: center;}

        .mainBtn .row2.campaign .cont li .eng {font-family: var(--ffEng); font-weight: normal; font-size: 15px;}
        .mainBtn .row2.campaign .cont li .date {font-family: var(--ffEng); font-weight: normal; font-size: 13px; padding-top: 5px; display: flex; color: #999;}
        .mainBtn .row2.campaign .cont li .date span {font-family: var(--ffKor); font-size: 13px; padding-right: 3px;}

        /* .mainBtn .row2.campaign:hover .cont li {width: 100%;  margin: 0 0 2% 0; display: grid; grid-template-columns: 1fr 1.75fr;}
        .mainBtn .row2.campaign:hover .cont li img {padding: 0 0 0 0; width: 6.5vw;}
        .mainBtn .row2.campaign:hover .cont li .eng {padding: 0 0 0 0.5rem;}
        .mainBtn .row2.campaign:hover .cont li .txt div:nth-child(1) {flex-direction: row;}
        .mainBtn .row2.campaign:hover .cont li .txt {align-items: flex-start;} */
        
        .mainBtn .row2.campaign .cont li:hover .date {color: #fff;}
        .mainBtn .row2.campaign .cont li:hover img {transform: scale(1.2); transition: all .3s ease;}
        .mainBtn .row2.campaign .cont li:hover {color: #fff; background: #fe4543; transition: all .3s ease;}
        .mainBtn .row2.campaign:hover .cont li .eng {font-size: 18px;}



    /* gameBtn */

        .gameBtn .img {height: 70%; width: 70%; z-index: -1; overflow: hidden; border-radius: 7px;}
        .gameBtn img {width: 100%;}
        .gameBtn .gamebtn_prov .img img {width: calc(100% - 20px); padding: 0 10px;}
        .gameBtn .gamebtn_prov.fix:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            background: url(/img/superfix.png) rgba(0, 0, 0, 0.5) no-repeat center center;
            width: 100%;
            height: 100%;
            background-size: 70%;
        }
        .gameBtn .txt {color: #000; font-size: 15px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 3px 0 5px 0; width: 100%; transition: all .3s ease; font-weight: bold; background: #fff;}
        .gameBtn .txt span {font-size: 13px; height: auto; opacity: 1; transition: all .3s ease; color: #999; font-weight: normal; padding-top: 2px;}
        .gameBtn li .favBtn {position: absolute; top: 3px; right: 3px; z-index: 10; color: #fd4b00; opacity: 0;}
        .gameBtn li .rtprates {position: absolute; top: 4px; left: 4px; color: #333; opacity: 1; border: 1px solid #ffce28; background: #ffce28; font-size: 11px; padding: 0.3rem; border-radius: 5px;}
        
        
        .gameBtn li .btn {
            width: 8rem;
            height: 2rem;
            background: linear-gradient(110deg,#02a1f9,#29f19c);
            border: none;
            border-radius: 2rem;
            outline: 0;
            cursor: pointer;
            font-size: 1.2rem;
            color: #fff;
            position: absolute;
            z-index: 11!important;
            display: flex;
            align-items: center;
            justify-content: center; 
            bottom: -100%;
            transition: all .3s ease;
            opacity: 0;
        }
        .gameBtn li:hover div:nth-child(2) {transform: translateZ(0px); z-index: 10; position: relative;}
        .gameBtn li:hover .img {opacity: 0.5;}
        .gameBtn li:hover .btn {bottom: calc(50% - 1rem); transition: all .3s ease; animation: btn-bounce 0.7s ease; opacity: 1;}
        .gameBtn li:hover .favBtn {opacity: 1;}
        .gameBtn li:hover span {height: auto; opacity: 1; transition: all .3s ease;}

        /* .mainBtn .row2:hover {grid-row: span 2; transition: all .3s ease; transform: scale(1.05);} */
        .mainBtn .row2:hover .cont li:nth-child(n+5) {display: flex; transition: all .3s ease;}
        .mainBtn .row2:hover {transition: all .3s ease; transform: scale(1.05); z-index: 2;}

        /* .mainBtn .row2.recommended:hover,
        .mainBtn .row2.campaign:hover,
        .mainBtn .row2.favorite:hover {grid-row: span 2; } */

        .gameBtnListProv {display: inline-block !important;border: 1px solid transparent;position: relative !important;vertical-align: middle;width:80px !important;height:60px !important;margin-left:5px;margin-top:5px;}
        .gameBtnListProv .img {width: 100%; height: 100%; overflow: visible;}
        .gameBtnListProv img {position:absolute; top:50%; transform:translateY(-50%); padding: 5px; width: calc(100% - 10px);}

        .gameBtnListProv.fix:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            background: url(/img/superfix.png) rgba(0, 0, 0, 0.5) no-repeat center center;
            width: 100%;
            height: 100%;
            background-size: 70%;
        }

        @keyframes btn-bounce {
            0%,100%,20%,50%,80% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }

            40% {
                -webkit-transform: translateY(-1rem);
                transform: translateY(-1rem)
            }

            60% {
                -webkit-transform: translateY(-.5rem);
                transform: translateY(-.5rem)
            }
        }


    /* categories */
        .categories {padding: 0 2rem; margin: 0 3.5%; background: #e8e8e8; border-radius: 0.5714rem; display: flex; align-items: center; flex-direction: column;}
        .categories .ul_wrap {width: 100%;}
        .categories ul {padding: 1rem; display: flex; grid-gap: 0.5rem; flex-wrap: wrap; justify-content: center;}
        .categories ul li {
            word-break: keep-all;
            position: relative;
            background: #fff;
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
            box-shadow: 0 0 10px rgba(0,0,0,.2);
            padding: 0.5rem 1rem;
            font-family: var(--ffKor);
            font-size: 14px;
            font-weight: bold;
            color: #000;
            -webkit-transition: .3s ease;
            transition: .3s ease;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            border: 1px solid transparent;
            flex-direction: column;
            width: calc(16% - 0.5rem);
        }
        .categories ul li:hover,
        .categories ul li.active {color: #fff; background: #f73d3c; border-color: #ad1c1c; transition: all .3s ease}
        .categories ul li:hover i,
        .categories ul li.active i {color: #fff; transition: all .3s ease}

        .categories .search { box-shadow: none; border-radius: 5px; position: relative; display: flex; justify-content: center; align-items: center; margin: 1rem 0 0 0; width: 50%;}
        .categories .search input {border: 0; border-radius: 0.5714rem; width: 100%; height: 3rem; line-height: 1.0714rem; font-size: .9286rem; padding: 0.5rem; padding-right: 2.8571rem; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; color: #333; outline: none; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2); box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
        .categories .search span {color: #f73d3c; position: absolute; right: 8px; top: 8px; font-size: 30px;}
        .categories ul li i {margin-bottom: 6px; font-size: 25px; color: #f73d3c;}
        .categories ul li b {margin: 0 5px; font-size: 15px;}


    /* mainBtn2 */
        .mainBtn2 {position: relative; display: flex; flex-direction:column; background: #fe4543; -webkit-transition: all ease .5s; transition: all ease .5s; background: #f7f7f7; margin-bottom: 1.875rem; padding: 0 7rem 2.5rem 7rem;}
        .mainBtn2 .title {display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: 18px;}
        .mainBtn2 .title .txt i {color: #fe4543;}
        .mainBtn2 .title .txt span {font-family: var(--ffEng); font-weight: normal; font-size: 15px; color: #777;}
        
        .mainBtn2 .mySwiper {overflow: hidden;}
        .mainBtn2 ul {display: flex; flex-wrap: nowrap; overflow: visible;}
        .mainBtn2 li {height: 11.5vw; width: 200px; display: flex; align-content: center; flex-wrap: wrap; justify-content: center; position: relative; transform-style: preserve-3d; background: #fff; border-radius: 10px; margin-bottom: 0; cursor: pointer; overflow: hidden;}
        
        .arrowBtn {display: flex; align-items: center; column-gap: .3rem}
        .arrowBtn .prev,
        .arrowBtn .next {background: #fe4543; color: #fff; border-radius: 50%; font-size: 13px; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
        .arrowBtn .more {font-size: 15px; font-weight: 700; cursor: pointer;}
    
        .mainBtn2:hover {background: #fe4543; color: #fff;}
        .mainBtn2:hover .prev,
        .mainBtn2:hover .next {background: #fff; color: #fe4543;}
        .mainBtn2:hover .title .txt i {color: #fff;}
        .mainBtn2:hover .title .txt span {color: #fff;}

    
        .lightSlider_2 .gameBtn .img {display: flex; justify-content: center}
        .lightSlider_2 .gameBtn .img img {height: 100%; width: auto;}
        .lightSlider_2 .gameBtn .btn {font-family: var(--ffKor); font-size: 15px;}


    /* gameCont */
        .gameCont {display: none;}
        .gameCont2 {display: none;}

        .gameCont.active {display: block;}
        .gameCont2.active {display: block;}
        
        .gameCont2 li {height: 12vw; width: calc(20% - 0.8rem); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; transform-style: preserve-3d; background: #fff; border-radius: 10px; cursor: pointer; overflow: hidden;}
        
        .gameCont2 {padding: 0 2.3333rem; margin: 1%;}
        .gameCont2 .gameBtn {background: #e8e8e8; padding: 1.4714rem 2.5rem; display: flex; flex-wrap: wrap; grid-gap: 1rem; border-radius: 0.5714rem;}

        .cont_top {display: none !important;}
        .cont_top {position: relative; padding: 0 0 1rem 0; display: flex; justify-content: center; align-items: center;}
        .cont_top .backBtn {position: absolute; font-size: 15px; font-weight: bold; left: 10px; cursor: pointer;}
        .cont_top div:nth-child(2) {font-family: var(--ffKor); font-weight: bold; display: flex; align-items: center;}
        .cont_top div:nth-child(2) div {margin-left: 5px;}
        .cont_top div:nth-child(2) span {font-family: var(--ffEng); font-size: 15px; color: #777; font-weight: normal; margin-left: 5px;}
        .cont_top div:nth-child(2) i {color: #f73d3c; margin: 0 3px;}


/* footer */
footer {padding: 3rem 2.3333rem 0.5rem 2.3333rem; top: 50px; position: relative;}
    .footer__menu {align-items: center;display: flex;flex-wrap: wrap;justify-content: center}
    .footer__menu-item {font-size: 15px;margin: 10px 12px;position: relative;text-transform: uppercase}
    .footer__menu-item:after {background: #fec882;bottom: 0;content: "";display: block;left: -13px;position: absolute;top: 0;width: 2px}
    .footer__menu-item:first-child:after {display: none}
    .footer__menu-item a {color: #94897a}
    .footer__menu-item a:hover,.footer__menu-item--active a {color: #fec882}
    .footer__payments {padding: 30px 0 50px; position: relative}
    .footer__payments .payment-methods {text-align: center}
    .footer__payments .payment-methods__item {background: #e8e8e8;border-radius: 6px;display: inline-block;margin: 5px; cursor: pointer;}
    .footer__payments .payment-methods__item img {height: 66px;object-fit: contain;padding: 14px;width: 113px}
    .footer__payments:after {background: linear-gradient(90deg,hsla(34,98%,75%,0),#fec882 50%,hsla(34,98%,75%,0));bottom: 25px;content: "";display: block;height: 2px;left: 0;position: absolute;width: 100%}
    .footer__text {align-items: center;color: #94897a;display: flex;font-size: 13px;font-weight: 500;justify-content: space-between;line-height: 1.8}
    .footer__text p {margin: 0; padding: 0}
    .footer__text p+p {margin-top: 23px}
    .footer__text-info {margin: 0 25px}
    .footer__age-list {display: flex}
    .footer__age-icon {align-items: center; background-color: #fe5151; border-radius: 50%; color: #f6f7f9; display: flex; font-size: 14px; font-weight: 700; height: 40px; justify-content: center; min-width: 40px; position: relative; text-decoration: none; width: 40px}
    .footer__age-icon+.footer__age-icon {margin-left: 12px;}
    .footer__validators {display: flex; justify-content: center;}
    .footer__validators img {border-radius: 6px; height: 100px;}




    
    /* mobile */
    .m_wrap {display: none !important;}
    header .navBtn_icon .box.m_menu {height: 35px; width: 30px; font-size: 20px; justify-content: center;}
    header .navBtn_icon .box.m_menu .fa-x {display: none;}
    header .navBtn_icon .box.m_menu.active .fa-x {display: block;}
    header .navBtn_icon .box.m_menu.active .fa-bars {display: none;}

    
    /* popup */
    header.blur, 
    main.blur, 
    footer.blur {filter: blur(1px); object-fit: contain;}
    


    .popup_wrap {display: none; align-items: center; justify-content: center; flex-direction: column; color: #000; width: 100%; height: 100%; position: fixed; z-index: 20; border: 1px solid transparent}
    .popup_wrap.active {display: flex;}

    .popup_wrap .bg {width: 100%; height: 100%; position: absolute; background: rgba(0,0,0,0.65);border: 1px solid transparent}
    
    .popup_wrap .popup_cont .popup_step {border-right: 1px solid #ccc; background: url(/img/welcome/welcome-offer-bg.jpg) center center no-repeat; background-size: cover; border-radius: 7px 0 0 7px; color: #fff; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; justify-content: space-between; width: auto; position: relative;}

        .popup_step .stepCont {position: relative; z-index: 1; margin-right: 20px;}
        .popup_step .stepCont:before { background: #fffaf3; content: ""; display: block; height: calc(100% - 36px); position: absolute; right: 17px; top: 18px; width: 2px; z-index: 0;}
        .popup_step .stepCont li {display: flex;flex-direction: row-reverse;align-items: center;margin: 0 0 25px 0;z-index: 1;position: relative;}
        .popup_step .stepCont .num {background: #4e4842;border: 2px solid #fffaf3;border-radius: 50%;box-shadow: 0 0 0 #fec882;color: #94897a;flex: 0 0 36px; font-weight: 700;height: 36px;line-height: 32px;width: 36px;display: flex;justify-content: center;align-items: center;}
        .popup_step .stepCont li:last-child {margin: 0 0 0px 0;}
        .popup_step .stepCont li:last-child .num {border: none; box-shadow: none; position: relative; }
        .popup_step .stepCont li:last-child .num span {display: flex;justify-content: center;align-items: center;background: radial-gradient(hsla(34,98%,75%,.6),#4e4842),#4e4842;border-radius: 50%;box-shadow: 0 0 10px 0 rgba(41,37,38,.3);padding-left: 2px;color: #fec882;font-size: 30px;height: 52px;width: 52px;position: absolute;}
        .popup_step .stepCont li:last-child .num span:before {animation: animateGiftStep 5s ease 5s infinite; transform-origin: 50% 65%;}
        @keyframes animateGiftStep {
            0% {transform: rotate(10deg)}
            6% {transform: rotate(-8deg)}
            11% {transform: rotate(6deg)}
            15% {transform: rotate(-4deg)}
            18% {transform: rotate(2deg)}
            20% {transform: rotate(0)}
        }
        .popup_step .stepCont li .txt {font-size: 13px; padding-right: 20px;}
        .popup_step .stepCont li.active .num {background: #322e2f;border-color: #fec882;box-shadow: 0 0 20px #fec882;color: #fffaf3;}
        .popup_step .stepCont li.fin .num {background: #fec882;color: #b28447;cursor: pointer;}
        .popup_step .stepCont li.fin .txt {text-decoration: line-through;}


        .popup_step .stepTitle {text-align: center; position: relative; z-index: 1;}
        .popup_step .stepTitle span {font-family: var(--ffEng); font-size: 30px;}
        .popup_step .stepTitle div {font-size: 15px; margin-top: 10px;}
        .popup_step .stepTitle div b {font-size: 25px; color: #fec882; font-weight: bold;}
        .popup_step .stepTitle .btn {background: #f73d3c; border-radius: 5px; padding: 7px 10px; color: #fff; cursor: pointer; font-size: 12px; border: none; outline: none; width: 50%; margin: 10px auto 0 auto;}
        


    .popup_wrap .popup_title {display: flex; align-items: center; margin-bottom: 10px; position: relative; animation: popupAni_r .2s ease-in;}
    .popup_wrap .popup_title div:nth-child(1){color: #fec882; font-size: 30px;}
    .popup_wrap .popup_title div:nth-child(2){color: #fff; font-family: var(--ffEng); font-size: 20px; padding-left: 10px;}
    .popup_wrap .popup_cont {min-height: 400px; border-radius: 9px; position: relative; animation: popupAni .2s ease-in; display: flex;
    /* background: linear-gradient(90deg,transparent 40%,#322e2f 55%),url(/assets/img/modal-background.png) 0 no-repeat,#322e2f; */ 
    background: #fff; max-height: 70%;}
    .popup_wrap .closeBtn {position: absolute; top: -37px; right: 5px; color: #fff; font-size: 30px; cursor: pointer;}

    @keyframes popupAni {
        0% {transform: translateY(-0.5rem)}
        100% {transform: translateY(0rem);}
    }
    @keyframes popupAni_r {
        0% {transform: translateY(0.5rem)}
        100% {transform: translateY(0rem);}
    }

    .popup_wrap .popup_cont .popup_work {display: flex; flex-direction: row;}
    .popup_wrap .popup_cont .popup_form {width: 400px;}


   .coinsWrap {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 0;}
   .coinsWrap img {position: absolute; }
   .coinsWrap img:nth-child(1) {left: 0;top: 0;width: 42px; animation: floatAni1 2s infinite alternate}
   .coinsWrap img:nth-child(2) {left: -2rem; top: 330px;width: 102px; animation: floatAni2 2.5s infinite alternate}
   .coinsWrap img:nth-child(3) {right: -1.5rem;top:100px;width: 64px; animation: floatAni3 2s infinite alternate}
   .coinsWrap img:nth-child(4) {right: 0;bottom: -1rem;width: 48px; animation: floatAni4 1.5s infinite alternate}
   .coinsWrap img:nth-child(5) {left: 50px; top: -0.5rem; width: 38px; transform: rotateY(-180deg); animation: floatAni5 3s infinite alternate}
    
    @keyframes floatAni1 {0% {transform: translateY(0);} 100% {transform: translateY(10px);}}
    @keyframes floatAni2 {0% {transform: translateY(0);} 100% {transform: translateX(15px) scale(1.1);}}
    @keyframes floatAni3 {0% {transform: translateY(0);} 100% {transform: translateY(5px);}}
    @keyframes floatAni4 {0% {transform: translateY(0);} 100% {transform: translateX(10px);}}
    @keyframes floatAni5 {0% {transform: translateY(0);} 100% {transform: translateY(5px);}}
    

    .popup_form input,
    .popup_form select {width: 100%; background-color: #fffaf3; border: 1px solid #ccc; outline: none; border-radius: 5px; box-sizing: border-box; color: #4e4842; display: block; font-size: 14px; font-weight: 400; height: 55px; line-height: 49px; padding: 0 26px 0 20px;}

    .popup_form {padding: 55px 28px 35px 25px; }
    .popup_form .inputWrap {min-height: 350px; position: relative; z-index: 1;}
    .popup_form .inputDiv {display: flex; flex-direction: column; width: 100%; position: relative; margin-bottom: 20px;}
    .popup_form .inputTitle {color: #000; font-size: 18px; font-weight: bold; text-align: center; padding-bottom: 1rem;}
    .popup_form .inputBtn {background: #f73d3c; color: #fff; position: absolute; right: 10px; top: 12px; padding: 10px; font-size: 13px; border-radius: 5px; cursor: pointer;}
    .popup_form .inputBtn.point_check_btn {background: #777;}
    .popup_form .inputBtn.point_check_btn:hover,
    .popup_form .inputBtn.point_check_btn.active {background: #f73d3c;}
    .popup_form .inputBtn.point_check_btn.active:after {content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; padding-left: 5px;}











    .popup_form .inputSubmit {align-items: center; display: flex; height: 50px; justify-content: center; padding: 5px 30px;}
    .popup_form .inputSubmit_c {align-items: center; display: flex; height: 50px; justify-content: center; padding: 5px 30px;}
    .inputDesc {font-size: 11px !important; color: #999; padding-top: 5px;}
    .inputDesc span {color: #f73d3c; padding: 2px 4px; font-weight: bold;}
  
	.inputSubmit div {background: transparent; border: 1px solid #999; height: 100%; width: 80%; background: linear-gradient(160deg, #4e86f0 25%, #2956a7 76%); transition: all .3s ease; color: #fff; cursor: pointer; border-radius: 5px; font-size: 15px;  display: flex; align-items: center; justify-content: center;}
    .inputSubmit div:hover {background: linear-gradient(160deg, #2956a7 25%, #4e86f0 76%); transition: all .3s ease; }

    .inputSubmit_c div {background: transparent; border: 1px solid #999; height: 100%; width: 80%; background: linear-gradient(160deg, #dcdcdc 25%, #9e9e9e 76%); transition: all .3s ease; color: #000; cursor: pointer; border-radius: 5px; font-size: 15px;  display: flex; align-items: center; justify-content: center;}
    .inputSubmit_c div:hover {background: linear-gradient(160deg, #9e9e9e 25%, #dcdcdc 76%); transition: all .3s ease; }


    .popup_form .inputDiv.Phone {flex-direction: row; justify-content: space-between; margin-bottom: 35px;}
    .popup_form .inputDiv.Phone input {width: 31%;}
    .popup_form .inputDiv.Phone select {width: 31%;}
    .popup_form .inputDiv.Phone .inputDesc {position: absolute; bottom: -15px;}

    .popup_form .formStep[name="step2"],
    .popup_form .formStep[name="step3"],
    .popup_form .formStep[name="step4"] {display: none;}

    .popup_form .formStep[name="step4"] img {width: 60%; z-index: -1; margin: 15px auto;}
    .popup_form .formStep[name="step4"] .inputTitle {font-size: 30px;}
    .popup_form .formStep[name="step4"] p {font-size: 17px; text-align: center; font-weight: bold; background: #fff;}
    .popup_form .formStep[name="step4"] .inputSubmit div {z-index: 1;}


    /* order */
        .popup_form[name="order"] {padding: 35px 28px 15px 25px;}
        .popup_form[name="order"] .inputWrap {display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start;}
        .popup_form[name="order"] .inputWrap .inputTitle {width: 100%;}
        .popup_form[name="order"] .inputDiv {width: 49%; margin-bottom: 30px;}
        .popup_form[name="order"] .inputDiv.full {width: 100%;}
        .popup_form[name="order"] .inputDiv.bank {width: 38%;}
        .popup_form[name="order"] .inputDiv.bankBtn {width: 20%; align-items: center; display: flex; justify-content: center;}
        .popup_form[name="order"] .inputDiv.bankBtn .inputBtn {position: relative; top: auto; right: auto;}
        .popup_form[name="order"] .inputDesc {position: absolute; bottom: -15px; width: 200%;}
        .popup_form[name="order"] .inputDesc.alarm {color: #f73d3c; font-weight: bold; animation: blink 1s infinite;}
        
        @keyframes blink {0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}

        .popup_form[name="order"] .inputDiv ul {display: flex; flex-wrap: wrap; justify-content: flex-start;}
        .popup_form[name="order"] .inputDiv ul li {box-shadow: 0 0 3px rgba(0,0,0,.25); border-radius: 5px; padding: 10px 7px; margin: 3px; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; cursor: pointer; min-width: 25%; background: linear-gradient(165deg,#fafafa 49%, #eee 50% ); }

        .popup_form[name="order"] .inputDiv ul li.active,
        .popup_form[name="order"] .inputDiv ul li:hover {background: #f73d3c; color: #fff; transition: all .3s ease;}
        
        .popup_form[name="order"] .inputDiv.eventDesc {margin-bottom: 10px;}
        .popup_form[name="order"] .inputDiv.eventDesc .event_description {height: 180px; overflow-y: auto; font-size: 13px; line-height: 1.3rem; padding: 10px; border: 1px solid #ccc; border-radius: 7px; margin: 3px; background: rgba(255,255,255,0.8);}
        .popup_form[name="order"] .inputDiv.eventDesc .event_description b {font-weight: bold; font-size: 15px;}



        .popup_step .stepTitle.introBox {width: 90%; background: rgba(0,0,0,0.1); border-radius: 10px; padding: 5%; flex-direction: column;}
        .popup_step .stepTitle.introBox div {font-size: 11px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
        .popup_step .stepTitle.introBox div b {font-size: 13px;}
        .popup_step .stepTitle.introBox h5 {display: flex; justify-content: center; font-weight: bold; font-size: 14px; padding: 5px 0;}
        .introBoxDiv div {display: flex; flex-direction: row !important; justify-content: space-between !important; width: 100%;}

        .popup_step .stepTitle.popup_toplist {background: rgba(0,0,0,0.1); flex-direction: column}
        .popup_step .stepTitle.popup_toplist h5 {font-size: 15px; padding: 10px 0;}
        .popup_step .stepTitle.popup_toplist dd {display: flex; padding: 0 10px 5px 10px; align-items: flex-start;}
        .popup_step .stepTitle.popup_toplist dd img {height: 40px; margin-right: 5px;}
        .popup_step .stepTitle.popup_toplist dd div {font-size: 11px !important; margin: 0 !important;}
        .popup_step .stepTitle.popup_toplist dd div.amount {font-size: 15px !important; font-family: var(--ffEng);}

        .popup_step .stepTitle.popup_toplist dd span {font-size: 11px !important; color: #fec882;}
        .popup_step .stepTitle.popup_toplist dd .desc {display: flex; flex-direction: column; align-items: flex-start;}

        
        .popup_form[name="mypage"] {padding: 25px 25px 15px 25px; width: 500px !important;}
        .inputMypage {height: 40vh; overflow: auto; margin: 10px 0;}

        .popup_step[name="mypage"] {justify-content: flex-start !important; border-right: none !important;}
        
        .mypageBtn {background: rgba(0,0,0,0.1); padding: 0.5rem; z-index: 1; margin-top: 1rem;}
        .mypageBtn li {display: flex; align-items: center; font-size: 15px; padding: 5px; border-bottom: 1px solid rgba(0,0,0,0.2); width: 150px;}
        .mypageBtn li:last-child {border-bottom: none;}
        .mypageBtn li img {width: 30px; margin-right: 5px;}
        .mypageBtn li.active,
        .mypageBtn li:hover {background: rgba(255,255,255,0.2); cursor: pointer;}

        .popup_form .mail,
        .popup_form .coupon,
        .popup_form .myinfo,
        .popup_form .skill, 
        .popup_form .point,
        .popup_form .membership {display: none; padding-bottom: 10px;}
        .popup_form .mail.active,
        .popup_form .coupon.active,
        .popup_form .myinfo.active,
        .popup_form .skill.active, 
        .popup_form .point.active,
        .popup_form .membership.active {display: block;}

    

    /* mypage */
        .popup_form[name="mypage"] .membership {font-size: 15px; height: 50vh; overflow-y: auto; overflow-x: hidden; }
        .popup_form[name="mypage"] table {background: #ececec; text-align: center; font-size: 13px; width: 100%;}
        .popup_form[name="mypage"] table td {border: 1px solid #ccc;  height: 35px; vertical-align: middle; line-height: 17px; padding: 5px;}
        .popup_form[name="mypage"] table th {background: #555; color: #fff; border: 1px solid #222; height: 25px; vertical-align: middle; line-height: 17px; padding: 5px 0; font-size: 11px;}
        /* .popup_form[name="mypage"] .membership table {width: 600px} */
        .popup_form[name="mypage"] .membership table {font-size: 11px;}

        .popup_form[name="mypage"] .desc {font-size: 12px; line-height: 20px; padding: 10px 0;}
        .popup_form[name="mypage"] .desc p {font-weight: bold; font-size: 14px; padding-top: 10px;}

        .popup_form[name="mypage"] .point .pointTable {margin: 0 0 15px 0;}
        .popup_form[name="mypage"] .point .pointTable td:nth-child(2n) {background: #fff;}

        .popup_form[name="mypage"] .coupon table td.fin {color: #9b9b9b;}
        .popup_form[name="mypage"] .coupon table tr.used td:nth-child(1),
        .popup_form[name="mypage"] .coupon table tr.used td:nth-child(2),
        .popup_form[name="mypage"] .coupon table tr.used td:nth-child(3) {text-decoration: line-through;}
        .popup_form[name="mypage"] .coupon table td.used {color: #000;}
        .popup_form[name="mypage"] .coupon table td.use {color: #000; background: #fff; cursor: pointer;}
        .popup_form[name="mypage"] .coupon table td.use:hover {background: #f73d3c; color: #fff;}
        
        .popup_form.skill_bg {background: url('/img/skill/skill_bg.jpg') no-repeat; background-size: cover; width: 500px;}
        .popup_form.skill_bg .inputTitle {color: #fff; display: flex; align-items: center; justify-content: space-between;}
        .popup_form.skill_bg .inputTitle span {font-size: 12px; text-align: left; line-height: 15px;}
        .popup_form ul {display: flex; flex-wrap: wrap; justify-content: space-around;}
        .popup_form .skill li {width: 150px; height: 202px; background: url('/img/skill/skill_icon_bg.png') no-repeat; background-size: cover; position: relative; margin-bottom: 10px;}
        .popup_form .skill li img {width: 100%;}
        .popup_form .skill li .skillDesc {position: absolute; font-size: 17px; top: 126px; font-weight: bold; width: 95px; text-align: center; padding: 0px 30px 0 25px; line-height: 20px;}
        
        .popup_form .skill .blue {color: #003555;}
        .popup_form .skill .red {color: #6f1018;}
        .popup_form .skill .yellow {color: #69250d;}
        .popup_form .skill .green {color: #125144;}
        
        .popup_form .skill .skillBtn {color: #fff;background: linear-gradient(160deg, #ff8b8b 25%, #f73d3c 76%); padding: 10px; border-radius: 7px; right: 20px; top: 15px; font-size: 15px; cursor: pointer; border: 1px solid #f73d3c;}        
        .popup_form .skill .skillBtn:hover {background: linear-gradient(160deg, #ff8b8b 15%, #f73d3c 76%);} 
        .popup_form .skill .inputTitle span {line-height: 1.5;}
        .popup_form .skill .inputTitle b {background: #fff; color: #000; padding: 0 1px; border-radius: 3px; cursor: pointer;}
        
        .popup_form .skillList .dateLeft {position: absolute; color: #fff; top: 30px; left: -3px; font-size: 40px; width: 100%; text-shadow: 0px 0px 5px #000; text-align: center; font-family: var(--ffEng);}
        .popup_form .skillList .hover {position: absolute; background: rgba(0,0,0,0.5); width: 100%; height: 100%; top: 0; left: 0; font-size: 15px; border-radius: 7px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: all .3s ease;}
        .popup_form .skillList .hover span {font-size: 15px; transition: all .3s ease;}
        .popup_form .skillList .hover i {font-size: 15px;}
        .popup_form .skillList .hover div {background: #885dd5; border-radius: 5px; padding: 7px 10px; color: #fff; cursor: pointer; font-size: 12px; border: none; outline: none; margin: 10px auto 0 auto;}
        .popup_form .skillList .hover div.selSkill {background: #f73d3c;}
        .popup_form .skillList .hover div:hover {background: #a876ff;}
        .popup_form .skillList .hover div.selSkill:hover {background: #ff5757;}
        

        .popup_form .skillList li:hover {transform: scale(1.05);z-index: 10; transition: all .3s ease;}
        .popup_form .skillList li:hover .hover {opacity: 1; transition: all .3s ease; cursor: pointer; z-index: 1;}
        .popup_form .skillList li:hover .hover span {margin-bottom: 10px; transition: all .1s ease;}

        .popup_form .skillList li.active .hover {opacity: 1; transition: all .3s ease; cursor: pointer; z-index: 1;}
        .popup_form .skillList li.active .hover div {display: none;}
        .popup_form .skillList li.active .hover .selSkill {display: block;}
        .popup_form .skillList li.active:hover .hover div {display: block;}

        
        .popup_form  .activeSkill {color: #fff; font-size: 13px; text-align: center;}
        .popup_form  .activeSkill .blue {background: #003555;}
        .popup_form  .activeSkill .red {background: #6f1018;}
        .popup_form  .activeSkill .yellow {background: #69250d;}
        .popup_form  .activeSkill .green {background: #125144;}
        .popup_form  .activeSkill span {color: #fff !important; padding: 3px 5px; border-radius: 5px;}
        



    /* depositSkill */
        .DepositSkill {display: flex; margin-bottom: 25px; align-items: center; position: relative; z-index: 10;}
        .DepositSkill .titleBox {font-family: var(--ffKor); font-size: 11px; position: absolute; bottom: -15px; color: #999;}
        .DepositSkill div.skillBox  {width: 40px; height: 40px;  background: url(/img/skill/skill_icon_small.jpg) no-repeat;  background-size: 400%; border-radius: 50%; border: 2px solid #f73d3c; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0 3px; z-index: 1; text-shadow: 0px 0px 5px black; font-weight: bold;} 
        .DepositSkill .g1 { background-position: 0 0 !important;}
        .DepositSkill .g2 { background-position: 0 -40px !important; }
        .DepositSkill .g3 { background-position: 0 -80px !important; }
        .DepositSkill .g4 { background-position: 0 -120px !important; }
        .DepositSkill .b1 { background-position: -40px 0 !important;}
        .DepositSkill .b2 { background-position: -40px -40px !important; }
        .DepositSkill .b3 { background-position: -40px -80px !important; }
        .DepositSkill .B4 { background-position: -40px -120px !important; }        
        .DepositSkill .y1 { background-position: -80px 0 !important;}
        .DepositSkill .y2 { background-position: -80px -40px !important; }
        .DepositSkill .y3 { background-position: -80px -80px !important; }
        .DepositSkill .y4 { background-position: -80px -120px !important; }        
        .DepositSkill .r1 { background-position: -120px 0 !important;}
        .DepositSkill .r2 { background-position: -120px -40px !important; }
        .DepositSkill .r3 { background-position: -120px -80px !important; }
        .DepositSkill .r4 { background-position: -120px -120px !important; }


        .DepositSkill .tooltip {position: absolute; background: #f73d3c; color: #fff; border: 1px solid #991d1d; min-width: 120px; top: 50px; z-index: 1; text-align: center; padding: 5px; line-height: 18px; font-size: 11px; border-radius: 7px; display: none;}
        .DepositSkill .tooltip:before {position: absolute; content: "▲"; top: -13px; color: #991d1d; left: 60px;}
        .DepositSkill .skillBox:hover {transform: scale(1.1); transition: all .3s ease;}
        .DepositSkill .skillBox:hover .tooltip {display: block;}

    /* cs */
        .popup_form .notice td {font-size: 13px;}
        .popup_form .notice td:first-child {text-align: left;}
        .popup_form .notice tr {cursor: pointer;}
        .popup_form .notice tr.important {background: #fff; color: #000;}
        .popup_form .notice tr.important td:first-child:before {content: "!"; background: #f73d3c; color: #fff; margin: 0 3px 0 0; padding: 2px 6px; border-radius: 5px; font-weight: bold; animation: imponoti 0.7s infinite}
        .popup_form .notice tr:hover td {border-bottom: 1px solid #f73d3c; padding-left: 10px; transition: all .3s ease;}
        .popup_form .notice_view td {text-align: left;}
        .popup_form .notice_view td div {height: 300px; overflow: auto; padding: 10px 20px;}

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

        
        .regBtn { color: #fff; background: linear-gradient(160deg, #ff8b8b 25%, #f73d3c 76%); padding: 10px; border-radius: 7px; font-size: 15px; cursor: pointer; width: 30%; margin: 10px auto; text-align: center; border: 1px solid #f73d3c;}
        .regBtn:hover {background: linear-gradient(160deg, #ff8b8b 15%, #f73d3c 76%);} 
        .notice_view .regBtn {margin: 20px auto 10px auto;}


    /* urgent */
        .popup_title[name="urgent"] > div {display: flex;}
        .popup_title[name="urgent"] > div > span {animation: urgent_ani 1s infinite;}
        @keyframes urgent_ani {
            0% {opacity: 1; transform: scale(1);} 
            50% {opacity: 0;transform: scale(0.7);} 
            100% {opacity: 1;transform: scale(1);}
        }
        .popup_form[name="urgent"] {padding: 0; font-size: 15px; width: 550px !important;}
        .popup_form[name="urgent"] .title {display: flex; align-items: center; background: #555; color: #fff; min-height: 45px;}
        .popup_form[name="urgent"] .title div { padding: 7px;}
        .popup_form[name="urgent"] .title div:nth-child(1) {border-right: 1px solid #222; font-size: 17px; width: 100%;}
        .popup_form[name="urgent"] .title div:nth-child(2) {width: 150px; font-size: 12px; text-align: center;}
        .popup_form[name="urgent"] .cont {padding: 10px; word-break: break-all; line-height: 1.2rem; height: 320px; overflow: auto;} 



    /* quest */
        .popup_form[name="culcheck"] {width: 550px !important; z-index: 1;}
        .popup_form[name="culcheck"] { padding: 15px 20px 15px 20px;}
        .popup_form[name="culcheck"] .coinsWrap {z-index: -1;} 
        .questUl {height: 40vh; overflow: auto;}
        .questUl li {display: flex; align-items: flex-start; font-size: 15px; border-radius: 5px; border: 1px solid #999; width: 100%; background: rgba(0,0,0,0.075); margin: 5px 0; position: relative;}
        .questUl .cont{display:flex;justify-content:space-between;align-items:center;padding:10px; flex-direction: column; width: calc(100% - 150px);}
        .questUl .cont .cont_row1{display:flex; align-items:center;width: 100%;background: #fff;padding: 5px 3px; border: 1px solid #ccc;border-radius: 5px;}
        .questUl .cont .cont_row2{width:100%;}
        .questUl .cont2 {width: 130px;padding: 10px;}
        .popup_form[name="culcheck"] select {padding: 0 10px; height: 30px;}
        .questUl .diff {display: flex; align-items: center; justify-content: center; margin-right: 5px;}
        .questUl .diff img {width: 20px; height: 20px;}
        .questUl .title {font-size: 15px; font-weight: bold;}
        .questUl .reward {font-size: 11px; padding: 5px; border: 1px solid #ccc; border-radius: 7px; background: #fff; line-height: 1.1rem;}
        .questUl .desc {font-size: 13px; padding: 5px; line-height: 1.2rem; text-shadow: 1px 1px 1px #ececec;}
        .questUl .reward_sel {margin: 5px 0;}
        .questUl .inputSubmit {padding: 0; height: 28px;}
        .questUl .inputSubmit div {width: 100%; font-size: 13px;}
        
        .popup_form[name="culcheck"] .cul_desc {padding: 10px; background: #ececec; border: 1px solid #ccc; color: #555; border-radius: 3px; display: flex; flex-wrap: wrap;  font-size: 12px; line-height: 1.5em; justify-content: space-between;}
        .popup_form[name="culcheck"] .culUL {justify-content: space-between !important; margin-top: 5px; height: auto; overflow: auto;}
        .popup_form[name="culcheck"] .culUL li {
            box-shadow: 0 0 3px rgba(0,0,0,.25);
            border-radius: 5px;
            font-size: 11px;
            display: flex;
            align-items: center;
            flex-direction: column;
            word-break: keep-all;
            border: 1px solid #ccc;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            width: 19%;
            margin-bottom: 5px;
            height: 100px;
        }
        .popup_form[name="culcheck"] .culUL li.fin {background: #555; color: #fff;}
        .popup_form[name="culcheck"] .culUL li img {width: 60%; padding: 10% 20% 5% 20%;}
        .popup_form[name="culcheck"] .culUL li div {padding-bottom: 10%;}

        .popup_form[name="culcheck"] h5 {font-size: 15px; margin-top: 10px; font-family: var(--ffKor); font-weight: bold; padding-left: 0}
        .popup_form[name="culcheck"] h5:before {content: ""; width: 20px; height: 20px; display: inline-block; position: relative; top: 5px; margin-right: 2px; background: url(/img/icon/cul_box.png) no-repeat; background-size: contain;}
        .popup_form[name="culcheck"] .culh5point:before {background: url(/img/icon/point.png) no-repeat; background-size: contain; }



        /* order_complete */
        .complete {width: 650px; text-align: center;}
        .complete img {width: 250px; margin: 30px auto;}
        .complete .text {font-family: var(--ffKor); font-weight: bold; padding: 5px 0;}
        .complete .text span {font-family: var(--ffEng); font-weight: bold;}
        .complete table {font-size: 12px; width: 90%; margin: 10px auto 0 auto;}
        .complete table td {border: 1px solid #ccc; padding: 7px 0; width: 25%;}
        .complete table td:nth-child(2n-1) {background: #ececec;}

        /* double */
        .double {background: url(/img/double.jpg) no-repeat; width: 675px; height: 450px; background-size: cover; display: flex; justify-content: flex-end; flex-direction: column; align-items: center;}
        .double .doubleBtn {display: flex; width: 90%; justify-content: space-between;}
        .double .desc {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 5px; line-height: 0.85em;}
        .double .desc span {font-weight: bold; color: #fe4543; font-size: 16px;}
        .double .desc p {background: #fff; color: #000; font-size: 14px; margin: 2px 5px; padding: 5px 7px; border-radius: 5px; font-weight: bold; text-align: center;}
        .double .inputSubmit, 
        .double .inputSubmit_c {height: 45px; width: 200px; margin: 10px 0 5px 0; display: flex; justify-content: center;}
        .double .inputSubmit div,
        .double .inputSubmit_c div {width: 80%;}


    /* paging */
    .paging {display: flex;align-items: center;justify-content: center;margin-top: 20px;font-size: 10px;}
    .paging a { overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; width: 2.117em; height: 2.117em; padding: 0; margin: 0 1px; font-size: 1.4em; border-radius: 2px; color: #000; background: #ececec; border: 1px solid transparent;}
    .paging a.btn_pg_first, .paging a.btn_pg_prev, .paging a.btn_pg_next, .paging a.btn_pg_last {padding: 0; color: #555;}
    .paging a.btn_pg_prev {margin-right: 8px;}
    .paging a.btn_pg_next {margin-left: 8px;}
    .paging a:hover, .paging a.active {cursor: pointer; border: 1px solid #222; background: #555; color: #fff; }

        
    .swiper-wrapper {height: 30vw;}


    @media(max-width: 900px) {
        .pc_wrap {display: none !important;}
        .m_wrap {display: flex !important;}

        header {height: 55px; padding: 0 2px 0 5px; width: calc(100% - 7px);}
        header .navBtn_icon .box {margin: 0 2px; flex-direction: column;}
        header .navBtn_icon .box img {height: 25px;}
        header .navBtn_icon .box .tooltip { font-size: 10px;}
        header .navBtn_icon .box .tooltip::after {content: "";}
        

        main {top: 55px;}
        .mainBtn {padding: 0.3333rem 0.5rem;}
        .mainBtn .row1 {height: 75px; padding: 0 2%; width: 27.333%; }
        .mainBtn .row1 .img {right: -10px;}
        .mainBtn .row1 .cont {display: none !important;}
        .mainBtn .row1 .txt {font-size: 0.8rem;}
        .mainBtn .row1 .txt span {font-size: 1.2rem; padding-bottom: 5px;}

        .mainBtn .row1:hover {transform: scale(1);}
        .mainBtn .row1:hover .txt span {font-size: 1.5rem !important;}
        .mainBtn .row1:hover .img {transform: scale(1.05);}


        .mainBtn .row2 {width: 100%; padding: 0.5% 2%;}
        .mainBtn .row2 .cont {width: 100% !important; padding: 0 !important; box-shadow: none !important;}
        .mainBtn .row2 .cont li {height: 30vw;}
        .mainBtn .row2.campaign .cont li {height: auto; padding: 2% 0; width: 24%; margin: 1% 0.5% !important;}
        .mainBtn .row2.campaign .cont li img {width: 10vw; }
        .mainBtn .row2.campaign .cont li .txt {font-size: 0.9rem; align-items: center;}
        .mainBtn .row2.campaign .cont li .eng {font-size: 13px;}
        .mainBtn .row2.campaign .cont li .date {font-size: 11px;}
        .mainBtn .row2.campaign .cont li .date span {display: none;}
        
        
        .mainBtn .row2.campaign:hover .cont li .eng {font-size: 15px;}
        .mainBtn .row2.campaign:hover .cont li {width: 24%;  margin: 1% 0.5%; display: flex;}
        .mainBtn .row2.campaign:hover .cont li img {width: 10vw; padding: 0 0 0.3rem 0; width: 10vw;}
        .mainBtn .row2.campaign:hover .cont li .eng {padding: 0; font-size: 13px;}
        .mainBtn .row2.campaign:hover .cont li .txt { align-items: center;}
        .mainBtn .row2.campaign:hover .cont li .txt div:nth-child(1) {flex-direction: column;}
        .mainBtn .row2.campaign .cont li:hover img {transform: scale(1.2); transition: all .3s ease;}
        .mainBtn .row2.campaign .cont li:hover {color: #fff; background: #fe4543; transition: all .3s ease;}


        .mainBtn .row2:hover {transform: scale(1);}
        .mainBtn .row2:hover .cont {position: relative;}
        .mainBtn .row2 .title:after {content: '펼치기 ▼ '; position: absolute; font-size: 11px; right: 0;}

        .categories {flex-direction: column; padding: 1rem;}
        .categories .search {width: 100%; }
        .categories .search input {width: 100%;}
        .categories .ul_wrap {overflow-x: auto; width: 100%;}
        /* .categories ul {padding: 0.5rem 0.1rem; width: 615px; grid-gap: 0.3rem;} */
        .categories ul {padding: 0.5rem 0.1rem; grid-gap: 0.3rem;}
        .categories ul li {font-size: 11px; padding: 0.5rem; width: calc(33.33% - 0.2rem);}

        .mainBtn2 {padding: 0 2rem 1rem 2rem;}
        .mainBtn2 li {height: 20vw; }

        .mainBtn2 .title .txt span {font-size: 13px; display: block; padding-top: 5px;}

        footer {padding: 2rem 2.3333rem 0.5rem 2.3333rem;}
        .footer__menu-item {font-size: 11px; margin: 7px;}
        .footer__payments .payment-methods__item img {width: 55px; height: 20px;}
        .footer__text {font-size: 10px; line-height: 1.3;}


        .top_list {display: flex; flex-direction: column;}

        /* popup */
        .popup_wrap {justify-content: flex-start;}
        .popup_wrap .popup_title {margin: 10px 0;}
        .popup_wrap .popup_cont {max-height: 100%;}
        .popup_wrap .popup_cont .popup_work {flex-direction: column; overflow-x: hidden; overflow-y: auto;}
        .popup_wrap .popup_cont .popup_work.popup_toplist_adjust {flex-direction: column-reverse !important;}
       

        .popup_wrap .popup_cont .popup_step {padding: 1rem;}
        .popup_step .stepTitle.introBox {flex-wrap: wrap; justify-content: center; padding: 2.5%; width: 95%;}
        .introBoxDiv {display: flex; flex-wrap: wrap; margin: 0 !important; flex-direction: row !important;}
        .introBoxDiv div {width: auto;}
        .stepTitle > span {display: none;}
        .popup_step .stepTitle h5 {width: 100%;}
        .popup_step .stepTitle.introBox div {margin: 0 !important;}
        .popup_step .stepTitle.introBox div b {padding-left: 5px;}
        .popup_toplist {flex-wrap: wrap;}
        .popup_toplist dl {width: 100%; display: flex; flex-wrap: wrap;}
        .popup_toplist dd {width: calc(50% - 20px);}


        .popup_wrap .popup_cont .popup_form {width: calc(100% - 53px);}

        .coinsWrap img:nth-child(2) {top: 10rem;}
        .coinsWrap img:nth-child(4) {bottom: -10rem;}

        .popup_step .stepTitle.guildBtn > div {display: flex; align-items: center; justify-content: center;}
        .popup_step .stepTitle.guildBtn .btn {margin: 0 0 0 10px !important; width: auto;}
        
        .popup_cont[name="register"],
        .popup_cont[name="register"] .popup_work {width: 100%;}
        .popup_cont[name="register"] .popup_step .stepCont {margin: 15px 0; display: flex; justify-content: space-between;}
        .popup_cont[name="register"] .popup_step .stepTitle div {margin-top: 0;}
        .popup_cont[name="register"] .popup_step .stepCont li .txt {padding: 5px 0 0 0;}
        .popup_cont[name="register"] .popup_step .stepCont li {flex-direction: column; margin: 0;}
        .popup_cont[name="register"] .popup_step .stepCont:before {right: 10px; height: 2px; width: calc(100% - 30px);}
        .popup_cont[name="register"] .popup_form {padding: 25px 28px 25px 25px;}


        .popup_form[name="quest"] {width: calc(100% - 40px) !important;}
        .popup_form[name="quest"] .questUl {height: 100%;}
        .popup_form[name="quest"] .questUl li {flex-direction: column;}
        .popup_form[name="quest"] .questUl .cont,
        .popup_form[name="quest"] .questUl .cont2 {width: calc(100% - 20px);}


        .popup_form[name="culcheck"] {width: calc(100% - 50px) !important;}
        .popup_form[name="culcheck"] .culUL li {width: 24%;}


        .popup_form[name="urgent"] {width: 100% !important;}

        .double {width: 100%; background-position: center;}
        .double .desc p {margin: 5px;}


        .popup_form[name="mypage"] {width: calc(100% - 50px) !important;}
        .mypageBtn {margin-top: 0; padding: 0.1rem; display: flex; flex-wrap: wrap;}
        .mypageBtn li {width: 33.333%; padding: 0; font-size: 11px;}
        .popup_step[name="mypage"] .coinsWrap img:nth-child(2) {display: none;}
        .popup_form[name="mypage"] .activeSkill {display: flex; flex-direction: column;}
        .popup_form[name="mypage"] .activeSkill span {margin: 2px 0;}
        


        .gameCont2 {padding: 0 1rem;}
        .cont_top {padding: 0.5rem 0;}
        .cont_top .backBtn {font-size: 12px !important; left: 0;}
        .cont_top .title {font-size: 15px !important;}
        .cont_top .title span {display: none;}
        .gameCont2 .gameBtn {padding: 0.5rem; grid-gap: 0.5rem}
        .gameCont2 li {height: 30vw; width: calc(50% - 0.25rem);}


        .gameBtn li .btn {width: 7rem; height: 2rem; font-size: 1.2rem;}
        .gameBtn li:hover .btn {bottom: calc(50% - 1rem);}
        .gameBtn .txt {font-size: 15px;}
        .gameBtn .txt span {font-size: 11px;}
        

        .popup_cont[name="complete"] {width: 100%; display: flex; justify-content: center;}
        .complete {width: 100%; padding: 30px 0;}
        .complete img {width: 80%;}
        .complete table {width: 100%}

        .arrowBtn .more {font-size: 11px;}

        
        .double .inputSubmit div,
        .double .inputSubmit_c div {width: 50%;}

        .swiper-wrapper {height: 50vw !important;}
    }



    @media(max-width: 600px) {
        .mainBtn2 li {height: 30vw; }
        .swiper-wrapper {height: 60vw !important;}

        
    }


    .eventPopup {position: fixed; top: 0; z-index: 100; width: 100%;height:100%; display: flex; align-items: center; align-content: flex-start; justify-content: center; flex-wrap: wrap; background: rgba(0,0,0,0.3); padding: 70px 0;}
    .eventPopup .popupWrap {position: relative;}
    .eventPopup .closeBtn {position: absolute; top: 10px; right: 15px; cursor: pointer; color: #fff; transition: all .3s ease; font-size: 50px;}
    .eventPopup .closeBtn:hover {transform: rotate(180deg); transition: all .3s ease;}
    .eventPopup .closeBtn i {text-shadow: 0 0 2px #000;}
    .eventPopup .closeToday {position: absolute; top: 15px; left: 25px; cursor: pointer; font-size: 15px; font-weight: bold; color: #fff; text-shadow: 0 0 2px #000;}


    @media(max-width: 400px) {
        .eventPopup .popupWrap {width: 100%;}
        .eventPopup .popupWrap img {width: 100%;}
        .eventPopup .closeBtn {font-size: 30px;}
        .eventPopup .closeToday {top: 12px; left: 15px; font-size: 12px;}
    }

    .eventPopup {display: none;}

        i.fa.fa-diamond {
            font-size: 15px;
            position: relative;
            margin-bottom: 16px;
            top: 6px;
        }
        i.fa.fa-diamond:after {
            content: "";
            position: absolute;
            border: 2px solid #f73d3c;
            width: 21px;
            height: 23px;
            top: -6px;
            left: -5px;
            border-radius: 4px;
        }
        .categories ul li:hover i.fa.fa-diamond:after, .categories ul li.active i.fa.fa-diamond:after {
            border: 2px solid #fff;
        }