@charset "UTF-8";

.gameZone {background-size: cover;width: 100%;transition: all 0.4s ease-out 0s;}

.gameZone.casino > ul {width: 100%;display: grid;grid-template-columns: repeat(8, 1fr);gap: 30px;flex-wrap: wrap;}
.gameZone.casino > ul > li {width: 100%;height: 100%;border-radius: 10px;position: relative;background-size: contain;cursor: pointer;overflow: hidden;transition: all 0.4s ease 0s;padding-bottom: 100%;}
.gameZone.casino > ul > li .model {background-repeat: no-repeat;background-size: contain;background-position: center;width: 100%;height: 100%;position: absolute;margin: 0px auto;z-index: 2;border: 5px solid #c0c0c0;transition: all 0.3s ease-out 0s;border-radius: 50%;}
.gameZone.casino > ul > li:hover .model {background-position-y: 10px;}
.gameZone.casino > ul > li .logo {position: absolute;right: 50%;bottom: 1%;z-index: 3;background-size: 100%;background-repeat: no-repeat;width: 70%;transform: translate(50%, 0%);padding-bottom: 31%;transition: all 0.3s ease-out 0s;filter: drop-shadow(0px 4px 0px #000);}


.gameZone.slot .tabZone {align-items: flex-end;justify-content: space-between;}
.gameZone.slot .tabZone ul {display: grid;width: 100%;grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));gap: 4px;overflow: hidden;}
.gameZone.slot .tabZone ul li {display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;transition: .4s ease-out;width: 100%;position: relative;padding: 5px;border-radius: 3px;border: 1px solid #786f6f;}
.gameZone.slot .tabZone ul li span {font-size: 46px;background: #b4b4b4;-webkit-background-clip: text;-webkit-text-fill-color: transparent;transition: .4s ease-out;height: 72px;display: flex;align-items: center;justify-content: center}
.gameZone.slot .tabZone ul li h4 {color: var(--font01);font-size: 1rem;transition: .4s ease-out;width: 100%;text-align: center;overflow: hidden;white-space: nowrap;padding: 10px 0;}
.gameZone.slot .tabZone ul li h4.mask{position:absolute;color:white;display:none;}
.gameZone.slot .tabZone ul li.inspection .pic {opacity: 0.2;}
.gameZone.slot .tabZone ul li.inspection h4.mask{display:block;}
.gameZone.slot .tabZone ul li:hover,.gameZone.slot .tabZone ul li.active {border: 1px solid var(--main);color: var(--main);}
.gameZone.slot .tabZone ul li.active span,.gameZone.slot .tabZone ul li:hover span {background: #00a8ea;-webkit-background-clip: text;-webkit-text-fill-color: transparent}
.gameZone.slot .tabZone ul li .pic {display: flex;align-items: center;justify-content: center}
.gameZone.slot .tabZone ul li .pic img {width: 80%;display: none;}
.gameZone.slot .tabZone ul li .innerPic {width: 100%;padding-bottom: 66.3%;background-size: contain;background-repeat: no-repeat;background-position: center;transition: .4s ease-out;filter: grayscale(1);}
.gameZone.slot .tabZone ul li.maintainGo .maintain {display: flex}
.gameZone.slot .tabZone ul li .maintain {display: none;background-image: linear-gradient(0deg,rgba(0,168,234,.75),rgba(0,168,234,.75));border-radius: 10px;width: 121px;height: 90px;position: absolute;z-index: 2;align-items: center;justify-content: center;flex-direction: column;padding: 7px;cursor: none}
.gameZone.slot .tabZone ul li .maintain span,.gameZone.slot .tabZone ul .active .maintain span {font-size: 46px;background: #ffffff;-webkit-background-clip: text}
.gameZone.slot .tabZone ul li .maintain h4 {color: #ffffff;font-size: 12px;font-weight: 700;transform: scale(.8)}
.gameZone.slot .tabZone .tab-info{display:flex;justify-content: space-between;align-items: flex-end;margin-top: 10px;}
.gameZone.slot .tabZone .tab-info .title {color:white;font-size:24px}

.gameZone.slot .searchZone {position: relative;width: 300px;margin-right: 15px;}
.gameZone.slot .searchZone input {color: #a4e3ff;background-color: #0b0b11;border-radius: 6px;padding-left: 14px;-o-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;height: 35px;margin-bottom: 0;}
.gameZone.slot .searchZone input:placeholder-shown + .searchIcon .icon-search{display: block;}
.gameZone.slot .searchZone input:placeholder-shown + .searchIcon .icon-delet{display: none;}
.gameZone.slot .searchZone input:not(:placeholder-shown) + .searchIcon .icon-search{display: none;}
.gameZone.slot .searchZone input:not(:placeholder-shown) + .searchIcon .icon-delet{display: block;}
.gameZone.slot .searchZone input::placeholder {color: #b6b6b6;font-size: 14px}
.gameZone.slot .searchZone .searchIcon {position: absolute;right: 0px;top: 9px}
.gameZone.slot .searchZone .searchIcon span {color: #b4b4b4;font-size: 13px;padding: 2px;cursor: pointer;}

.gameZone.slot .slotZone {overflow: hidden;height: auto;width: 100%;padding-bottom: 11px;margin: 10px 0;min-height: 300px;}
.gameZone.slot .slotZone.off {animation-name: none}
.gameZone.slot .slotZone ul {display: grid;grid-template-columns: var(--pc-slot-cnt);gap: 12px;}
.gameZone.slot .slotZone ul li {width: 100%;position: relative;min-width: 0;}
.gameZone.slot .slotZone ul li .pic {width: 100%;height: auto;position: relative;background-color: #2e3135;border: 1px solid #304059;display: flex;align-items: center;justify-content: center;margin-bottom: 1px;overflow: hidden;border-radius: 9px;}
.gameZone.slot .slotZone ul li .pic .ppPro {position: absolute;top: 0px;left: 0px;z-index: 2}
.gameZone.slot .slotZone ul li .pic .ppPro img {width: 4.5vw}
.gameZone.slot .slotZone ul li .pic img {z-index: 1;position: relative;transition: .3s ease-out;width: 100%;height: auto}
.gameZone.slot .slotZone ul li .pic:before {content: "";position: absolute;width: 177px;height: 177px;z-index: 0;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.gameZone.slot .slotZone ul li .name {position: relative;margin: 2px auto;background: #1e1e1e;border-radius: 5px;color: white;font-size: 14px;font-weight: 600;text-align: center;padding: 10px 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.gameZone.slot .slotZone ul li .name span {z-index: 1;color: #a4e3ff;font-weight: bolder;font-size: .9vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.gameZone.slot .slotZone ul li .name span::before {margin: 0px 10px;color: #66696c;}
.gameZone.slot .slotZone ul li .name span.icon-favorfull {color: #00a8ea!important}
.gameZone.slot .slotZone ul li .mask {width: 100%;height: 100%;background-color: #000000b3;z-index: 2;position: absolute;border-radius: 5px;display: none;transition: .4s ease-out;cursor: pointer}
.gameZone.slot .slotZone ul li .mask .imgFrame {height: 24%;width: 100%!important;position: absolute;top: 50%;transform: translate(-50%,-116%);left: 50%;display: flex;align-items: center;justify-content: center}
.gameZone.slot .slotZone ul li .mask .imgFrame img {height: auto!important;width: 45px!important}
.gameZone.slot .slotZone ul li .mask .gogo {cursor: pointer;transition: .4s ease-out;background: var(--main);border-radius: 20px;position: absolute;top: 50%;transform: translate(-50%,6%);left: 50%;padding: 10px 15px;}
.gameZone.slot .slotZone ul li .mask .gogo span {color: #000000;font-size: 14px;}
.gameZone.slot .slotZone ul li:hover .mask {display: block}
.gameZone.slot .slotZone ul li .heart01 {position: absolute;top: 4px;left: -4px;cursor: pointer}
.gameZone.slot .slotZone ul li .heart01 span {transition: all .2s linear;font-size: 25px!important;font-weight: 400!important;color: #666666!important;position: absolute}
.gameZone.slot .slotZone ul li .heart:before {display: none!important}
.gameZone.slot .slotZone ul li .heart {position: absolute;top: -7px;left: -15px}
.gameZone.slot .slotZone ul li .heart label:before {display: none}

.gameZone .gameWrapper {min-height: 560px;}
.gameZone .gameWrapper ul {width: 100%;display: grid;grid-template-columns: repeat(5, 1fr);gap: 10px;}
.gameZone .gameWrapper ul li {width: 100%;height: 100%;border: 6px solid var(--main);border-radius: 50%;position: relative;background: url(../images/common/game_bg.png) center;background-size: cover;cursor: pointer;overflow: hidden;transition: all 0.4s ease 0s;padding-bottom: 91%;}
.gameZone .gameWrapper ul li .model {background-repeat: no-repeat;background-size: contain;background-position: center;width: 100%;height: 100%;top: 5%;position: absolute;margin: 0px auto;z-index: 2;/* left: 15px; */transition: all 0.3s ease-out 0s;}
.gameZone .gameWrapper ul li:hover .model {background-position-y: 12px;}
.gameZone .gameWrapper ul li .logo {position: absolute;right: 3%;top: 3%;z-index: 3;background-size: 100%;background-repeat: no-repeat;width: 30%;padding-bottom: 12%;transition: all 0.3s ease-out 0s;}
.gameZone .gameWrapper ul li .txt01 {width: 100%;z-index: 2;position: absolute;bottom: 10%;font-size: 40px;text-align: center;filter: drop-shadow(2px 3px 1px black);}
.gameZone .gameWrapper ul li .txt01 span {font-size: 12px;color: var(--main02);margin-top: 5px;}
.gameZone .gameWrapper ul li:hover {filter: drop-shadow(var(--main) 0px 0px 20px);}
.gameZone .gameWrapper ul li.maintainGo .maintain {display: flex;}
.gameZone .gameWrapper ul li .maintain {display: none;background-image: linear-gradient(0deg, rgba(0, 168, 234, 0.75), rgba(0, 168, 234, 0.75));border-radius: 8px;width: 100%;height: 100%;position: absolute;z-index: 3;align-items: center;justify-content: center;flex-direction: column;}
.gameZone .gameWrapper ul li .maintain span {font-size: 5vw;color: #ffffff;}
.gameZone .gameWrapper ul li .maintain h4 {color: #ffffff;font-size: 1vw;font-weight: 700;margin-top: 3%;}

#attendance .calendar-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
            flex-flow: column;
    gap: 0.2em;
}
#attendance .calendar-wrap .head {
    margin-top: 1em;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    font-size: 1em;
}
#attendance .calendar-wrap .head .left-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
            align-items: center;
}
#attendance .calendar-wrap .head .left-wrap select {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    font-size: 1.2em;
    padding: 0.75em;
    padding-right: 2em;
    color: #d5d5d5;
    width: 115px;
}
#attendance .calendar-wrap .head .left-wrap option {
    color: #d5d5d5;
}
#attendance .calendar-wrap .head .left-wrap select.month {
    margin-left: 0.2em;
}
#attendance .calendar-wrap .head .right-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 1.2em;
    background: var(--main);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0 1em;
    border-radius: 1em;
    color: #ffffff;
}
#attendance .calendar-wrap .head .right-wrap .ac_cnt {
    font-weight: 700;
    padding: 0 1em;
}
#attendance .calendar-wrap .calendar {
    margin-top: 1em;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
            flex-flow: column;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);
}
#attendance .calendar-wrap .calendar .cols {
    display: grid;
    -webkit-justify-content: center;
            justify-content: center;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--main);
}
#attendance .calendar-wrap .calendar .cols .cell {
    height: 3em;
    color: white;
    font-size: 1.5em;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
}
#attendance .calendar-wrap .calendar .rows {
    display: grid;
    -webkit-justify-content: center;
            justify-content: center;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    font-family: "Pretendard";
    font-size: 1.25em;
}
#attendance .calendar-wrap .calendar .rows .cell {
    height: 7em;
    color: var(--font-third);
    font-weight: 700;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
            flex-flow: column;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
}
#attendance .calendar-wrap .calendar .rows .cell:nth-child(7n+1) {
    color: var(--color-error);
}
#attendance .calendar-wrap .calendar .rows .cell:nth-child(7n) {
    color: var(--blue-04);
}
#attendance .calendar-wrap .calendar .rows .cell.today {
    color: white;
}
#attendance .calendar-wrap .calendar .rows .cell.day {
    font-weight: 700;
    padding-top: 0.5em;
    background: linear-gradient(0deg, #3f3f3f, #3c3c3c);
    border: 1px solid #060606;
}
#attendance .calendar-wrap .calendar .rows .cell.day .image {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
    -webkit-flex-grow: 1;
            flex-grow: 1;
    margin: 0.25em;
    background: url(../images/common/att2.png) no-repeat center;
    background-size: contain;
}
#attendance .calendar-wrap .calendar .rows .cell.day .image.consec {
    background-image: url(../images/common/att1.png);
}

#attendance .attendance-reward-wrap .attendance-reward-btn {
    width: 100px;
    height: 35px;
}

#roulette .roulette-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#roulette .roulette-info {
    position: relative;
    background: #fffae4;
    padding: 1em;
    top: 0;
    width: 500px;
    box-shadow: 13px 0px 20px 0px rgba(0, 0, 0, 0.49);
    z-index: -1;
    height: 600px;
}
#roulette .roulette-info::after {
    content: "";
    -webkit-mask-image: linear-gradient(102deg, black, transparent 60%);
    mask-image: linear-gradient(102deg, black, transparent 60%);
    background: url(../images/roulette/card-trail.png) left center no-repeat;
    background-size: 100% 100%;
    -webkit-filter: drop-shadow(5px 4px 6px rgba(0, 0, 0, 0.4901960784));
    filter: drop-shadow(5px 4px 6px rgba(0, 0, 0, 0.4901960784));
    position: absolute;
    display: block;
    height: 100%;
    top: 0;
    left: 100%;
    width: 26em;
    opacity: 0.8;
}

#roulette .roulette-info h2.title {
    font-size: 1.4em;
    color: #825000;
    font-weight: 700;
    padding: 1em 0;
    border-bottom: 1px solid #dcdcdc;
    width: 100%;
    text-align: center;
}
#roulette .roulette-info .content {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    height: 100%;
    margin-top: 20%;
}
#roulette .roulette-info .content .count-label {
    margin-right: 1em;
}
#roulette .roulette-info .content .coupon {
    font-size: 1.5em;
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background: #f0ac19;
    color: #fff;
    border: 1px solid #825000;
    display: flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}
#roulette .roulette-info .content .coupon .coupon-cnt {
    font-size: 1em;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    margin-right: 0.2em;
}
#roulette .roulette-info .content .coupon span {
    font-size: 0.9em;
}

#roulette .roulette-container {
    padding: 15px;
}

#roulette .roulette-container .roulette {
    max-width: 500px;
    position: relative;
    display: block;
    z-index: 1;
}
#roulette .roulette-container .roulette .wheel {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    width: 90%;
    top: 3.8%;
    left: 5%;
    transition: transform 6.5s cubic-bezier(0, 0, 0.3, var(--pt-bezier)), -webkit-transform 6.5s cubic-bezier(0, 0, 0.3, var(--pt-bezier));
}
#roulette .roulette-container .roulette .wheel.waiting {
    transition-duration: 60s;
}
#roulette .roulette-container .roulette .wheel .roulete_img {
    will-change: transform;
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
    width: 100%;
}

#roulette .roulette-container .roulette .outside {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}
#roulette .roulette-container .roulette .outside img {
    width: 100%;
    height: auto;
}
#roulette .roulette-container .roulette .roulette-btn {
    z-index: 103;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 37.5%;
    left: 50.3%;
}
#roulette .roulette-container .roulette .start-btn {
    background: url(../images/roulette/start.png) center no-repeat;
    background-size: contain;
    width: 100px;
    height: 120px;
    border-radius: 100px;
    border-style: none;
    transition: all 0.3s;
    -webkit-transform-origin: 50% 60%;
            transform-origin: 50% 60%;
}
#roulette .roulette-container .roulette .start-btn::after {
    content: "";
    position: absolute;
    display: block;
    top: 53%;
    left: 49%;
    width: 45%;
    height: 22%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 12px;
    background: rgba(59, 23, 1, 0.85);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    box-shadow: 0 0 1px 1px rgba(59, 23, 1, 0.85);
    opacity: 0;
    transition: all 0.2s;
}
#roulette .roulette-container .roulette .start-btn.disabled {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
#roulette .roulette-container .roulette .start-btn.disabled::after {
    opacity: 1;
}

#roulette .wheel-slice {
    font-size: 1.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 7%;
    font-weight: 900;
    text-align: center;
    -webkit-transform-origin: left center;
            transform-origin: left center;
    padding-left: 10%;
    -webkit-transform: translateY(-50%) rotate(136deg);
            transform: translateY(-50%) rotate(136deg);
    color: white;
}
#roulette .wheel-slice:nth-child(1) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 0));
            transform: translateY(-50%) rotate(calc(30deg * 0));
}
#roulette .wheel-slice:nth-child(2) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 1));
            transform: translateY(-50%) rotate(calc(30deg * 1));
}
#roulette .wheel-slice:nth-child(3) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 2));
            transform: translateY(-50%) rotate(calc(30deg * 2));
}
#roulette .wheel-slice:nth-child(4) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 3));
            transform: translateY(-50%) rotate(calc(30deg * 3));
}
#roulette .wheel-slice:nth-child(5) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 4));
            transform: translateY(-50%) rotate(calc(30deg * 4));
}
#roulette .wheel-slice:nth-child(6) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 5));
            transform: translateY(-50%) rotate(calc(30deg * 5));
}
#roulette .wheel-slice:nth-child(7) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 6));
            transform: translateY(-50%) rotate(calc(30deg * 6));
}
#roulette .wheel-slice:nth-child(8) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 7));
            transform: translateY(-50%) rotate(calc(30deg * 7));
}
#roulette .wheel-slice:nth-child(9) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 8));
            transform: translateY(-50%) rotate(calc(30deg * 8));
}
#roulette .wheel-slice:nth-child(10) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 9));
            transform: translateY(-50%) rotate(calc(30deg * 9));
}
#roulette .wheel-slice:nth-child(11) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 10));
            transform: translateY(-50%) rotate(calc(30deg * 10));
}
#roulette .wheel-slice:nth-child(12) {
    -webkit-transform: translateY(-50%) rotate(calc(30deg * 11));
            transform: translateY(-50%) rotate(calc(30deg * 11));
}
#roulette .wheel-slice:nth-child(even) {
    color: #d20000;
}
#roulette .wheel-slice .coupon {
    width: 40%;
}

@media screen and (max-width: 990px) {
    #roulette .roulette-info {
        height: auto;
        border-radius: 12px;
    }

    #roulette .roulette-info:after {
        display: none;
    }

    #roulette .roulette-info .count-wrap .content {
        margin-top: 0;
    }

    #roulette .roulette-info .count-wrap .content .coupon {
        height: auto;
        background: none;
        border: none;
        color: black;
    }
}