@charset "utf-8";
.wrapper {
    max-width: 830px;
}

.maruturn3_fd1_text_1 {
    color: #44A0F4!important
}

.maruturn3_fd1_text_1:after {
    content: '홀'
}

.maruturn3_fd1_text_2 {
    color: #ED407F!important
}

.maruturn3_fd1_text_2:after {
    content: '짝'
}

.maruturn3_fd2_text_1 {
    color: #44A0F4!important
}

.maruturn3_fd2_text_1:after {
    content: '언'
}

.maruturn3_fd2_text_2 {
    color: #ED407F!important
}

.maruturn3_fd2_text_2:after {
    content: '오'
}

.maruturn3_fd3_text_1 {
    color: #44A0F4!important
}

.maruturn3_fd3_text_1:after {
    content: '홀'
}

.maruturn3_fd3_text_2 {
    color: #ED407F!important
}

.maruturn3_fd3_text_2:after {
    content: '짝'
}

.maruturn3_fd4_text_1 {
    color: #44A0F4!important
}

.maruturn3_fd4_text_1:after {
    content: '언'
}

.maruturn3_fd4_text_2 {
    color: #ED407F!important
}

.maruturn3_fd4_text_2:after {
    content: '오'
}

.maruturn3_fd5_text_1 {
    color: #7fac49!important;
    letter-spacing: -1px;
    font-size: 12px!important
}

.maruturn3_fd5_text_1:after {
    content: '소'
}

.maruturn3_fd5_text_2 {
    color: #44A0F4!important;
    letter-spacing: -1px;
    font-size: 12px!important
}

.maruturn3_fd5_text_2:after {
    content: '중'
}

.maruturn3_fd5_text_3 {
    color: #ED407F!important;
    letter-spacing: -1px;
    font-size: 12px!important
}

.maruturn3_fd5_text_3:after {
    content: '대'
}

.maruturn3_fd1_color_1 {
    color: #44A0F4!important
}

.maruturn3_fd1_color_2 {
    color: #ED407F!important
}

.maruturn3_fd2_color_1 {
    color: #44A0F4!important
}

.maruturn3_fd2_color_2 {
    color: #ED407F!important
}

.maruturn3_fd3_color_1 {
    color: #44A0F4!important
}

.maruturn3_fd3_color_2 {
    color: #ED407F!important
}

.maruturn3_fd4_color_1 {
    color: #44A0F4!important
}

.maruturn3_fd4_color_2 {
    color: #ED407F!important
}

.maruturn3_fd5_color_1 {
    color: #7fac49!important
}

.maruturn3_fd5_color_2 {
    color: #44A0F4!important
}

.maruturn3_fd5_color_3 {
    color: #ED407F!important
}

.maruturn3_fd1_round_1 {
    color: #fff!important;
    background: #44A0F4 !important
}

.maruturn3_fd1_round_2 {
    color: #fff!important;
    background: #ED407F !important
}

.maruturn3_fd2_round_1 {
    color: #fff!important;
    background: #44A0F4 !important
}

.maruturn3_fd2_round_2 {
    color: #fff!important;
    background: #ED407F !important
}

.maruturn3_fd3_round_1 {
    color: #fff!important;
    background: #44A0F4 !important
}

.maruturn3_fd3_round_2 {
    color: #fff!important;
    background: #ED407F !important
}

.maruturn3_fd4_round_1 {
    color: #fff!important;
    background: #44A0F4 !important
}

.maruturn3_fd4_round_2 {
    color: #fff!important;
    background: #ED407F !important
}

.maruturn3_fd5_round_1 {
    color: #fff!important;
    background: #41ba1a !important
}

.maruturn3_fd5_round_2 {
    color: #fff!important;
    background: #44A0F4 !important
}

.maruturn3_fd5_round_3 {
    color: #fff!important;
    background: #ED407F !important
}

.maruturn3_fd1_1 {
    color: #fff;
    background: #44A0F4 !important
}

.maruturn3_fd1_1:after {
    content: "홀"
}

.maruturn3_fd1_2 {
    color: #fff;
    background: #ED407F !important
}

.maruturn3_fd1_2:after {
    content: "짝"
}

.maruturn3_fd2_1 {
    color: #fff;
    background: #44A0F4 !important
}

.maruturn3_fd2_1:after {
    content: "언"
}

.maruturn3_fd2_2 {
    color: #fff;
    background: #ED407F !important
}

.maruturn3_fd2_2:after {
    content: "오"
}

.maruturn3_fd3_1 {
    color: #fff;
    background: #44A0F4 !important
}

.maruturn3_fd3_1:after {
    content: "홀"
}

.maruturn3_fd3_2 {
    color: #fff;
    background: #ED407F !important
}

.maruturn3_fd3_2:after {
    content: "짝"
}

.maruturn3_fd4_1 {
    color: #fff;
    background: #44A0F4 !important
}

.maruturn3_fd4_1:after {
    content: "언"
}

.maruturn3_fd4_2 {
    color: #fff;
    background: #ED407F !important
}

.maruturn3_fd4_2:after {
    content: "오"
}

.maruturn3_fd5_1 {
    border: 1px solid #23C58D;
    color: #23C58D;
    background: #edffe9 !important
}

.maruturn3_fd5_1:after {
    content: "소"
}

.maruturn3_fd5_2 {
    border: 1px solid #44A0F4;
    color: #44A0F4;
    background: #e9f5ff !important
}

.maruturn3_fd5_2:after {
    content: "중"
}

.maruturn3_fd5_3 {
    border: 1px solid #ED407F;
    color: #ED407F;
    background: #fbecf1 !important
}

.maruturn3_fd5_3:after {
    content: "대"
}

.opt_bg_0 {
    border: 1px solid #999!important;
    color: #fff!important;
    background: #aaa!important
}

.opt_bg_1 {
    border: 1px solid #44A0F4!important;
    color: #fff!important;
    background: #44A0F4 !important
}

.opt_bg_2 {
    border: 1px solid #ED407F!important;
    color: #fff!important;
    background: #ED407F !important
}

.dt_list .line_left {
    border-left: 1px solid #e1e1e1
}

.dt_list .line_bottom th {
    border-bottom: 1px solid #e1e1e1!important
}

.stats_item div.title_text {
    text-align: center;
    padding: 5px 0;
    font-size: 12px
}

.dt_list .power_the {
    padding-top: 7px
}

.dt_list tbody td .ptype,.dt_list tbody td .bsum,.dt_list tbody td .btype {
    position: relative;
    display: inline-block;
    line-height: 1;
    width: 28px;
    height: 28px;
    text-align: center;
    padding-right: 0;
    padding-top: 6px;
    margin: 1px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #aaa!important
}

.dt_list tbody td .bsum {
    padding-top: 9px
}

.period_data thead th {
    background: #f5f5f5;
    padding: 0;
    border-bottom: 1px solid #d1d1d1;
    line-height: 34px;
    height: 34px;
    font-weight: 400
}

.btn_gray {
    background: #fff!important;
    border: 1px solid #d1d1d1!important;
    color: #999!important
}

.btn_gray:hover {
    border: 1px solid #888!important;
    color: #333!important
}






.animal {
    border: none;
    display: inline-block;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    top:10px;
}

    .animal.animal_1 {
        background-image: url(/assets/res/live/maruturn/img/1.png)
    }

    .animal.animal_2 {
        background-image: url(/assets/res/live/maruturn/img/2.png)
    }

    .animal.animal_3 {
        background-image: url(/assets/res/live/maruturn/img/3.png)
    }

    .animal.animal_4 {
        background-image: url(/assets/res/live/maruturn/img/4.png)
    }

    .animal.animal_5 {
        background-image: url(/assets/res/live/maruturn/img/5.png)
    }

    .animal.animal_6 {
        background-image: url(/assets/res/live/maruturn/img/6.png)
    }

    .animal.animal_7 {
        background-image: url(/assets/res/live/maruturn/img/7.png)
    }

    .animal.animal_8 {
        background-image: url(/assets/res/live/maruturn/img/8.png)
    }

    .animal.animal_9 {
        background-image: url(/assets/res/live/maruturn/img/9.png)
    }

    .animal.animal_10 {
        background-image: url(/assets/res/live/maruturn/img/10.png)
    }

    .animal.animal_11 {
        background-image: url(/assets/res/live/maruturn/img/11.png)
    }

    .animal.animal_12 {
        background-image: url(/assets/res/live/maruturn/img/12.png)
    }

#marukhan {
    position: relative;
    z-index: 10;
    width: 220px;
    height: 220px
}

.wheel {
    width: 220px;
    height: 220px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    z-index: 100
}

.wheel-border {
    z-index: 8000;
    width: 240px;
    height: 240px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,.3),inset 0 0 5px rgba(0,0,0,.4);
    border: 10px solid #ffd951
}

.wheel-count {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    overflow: hidden;
    z-index: 9900;
    background-color: rgba(0,0,0,.9);
    align-items: center;
    justify-content: center;
    display: none
}

    .wheel-count.on {
        display: flex
    }

    .wheel-count span {
        color: #fe0;
        font-family: bmhannapro;
        font-size: 0;
        opacity: 0
    }

    .wheel-count.on span {
        animation: count 1s ease-in 0s infinite
    }

.wheel-mini-box {
    position: absolute;
    z-index: 8010;
    top: 55px;
    left: 50%;
    transform: translateX(-50%)
}

.wheel-border-mini {
    z-index: 9000;
    width: 122px;
    height: 122px;
    position: absolute;
    top: 49px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,.3),inset 0 0 5px rgba(0,0,0,.4);
    border: 6px solid #ffd951
}

.wheel-pin {
    z-index: 9010;
    position: absolute;
    top: 98px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,.4);
    background-color: #ffd951;
    display: flex;
    align-items: center;
    justify-content: center
}

    .wheel-pin .pin {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0,0,0,.7),inset 0 0 5px rgba(0,0,0,.4);
        border: 6px solid #ffd951
    }

.wheel .border {
    height: 120px;
    width: 70px;
    clip-path: polygon(100% 0,50% 100%,0 0);
    position: absolute;
    transform: translateX(-50%);
    transform-origin: bottom;
    top: -10px;
    left: 75px;
    display: flex;
    background-color: #000
}

    .wheel .border.b1 {
        left: 50%
    }

    .wheel .border.b2 {
        transform: rotate(30deg)
    }

    .wheel .border.b3 {
        transform: rotate(60deg)
    }

    .wheel .border.b4 {
        transform: rotate(90deg)
    }

    .wheel .border.b5 {
        transform: rotate(120deg)
    }

    .wheel .border.b6 {
        transform: rotate(150deg)
    }

    .wheel .border.b7 {
        transform: rotate(180deg)
    }

    .wheel .border.b8 {
        transform: rotate(210deg)
    }

    .wheel .border.b9 {
        transform: rotate(240deg)
    }

    .wheel .border.b10 {
        transform: rotate(270deg)
    }

    .wheel .border.b11 {
        transform: rotate(300deg)
    }

    .wheel .border.b12 {
        transform: rotate(330deg)
    }

    .wheel .border .inbox {
        position: relative;
        height: 100%;
        width: 100%;
        clip-path: polygon(100% 0,50% 100%,0 0)
    }

        .wheel .border .inbox .item {
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            clip-path: polygon(100% 0,50% 100%,0 0);
            position: absolute;
            transform-origin: bottom;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            writing-mode: horizontal-tb;
            background-color: #fff;
            padding-top: 13px
        }

    .wheel .border.b1 .item {
        background-color: #f20d56
    }

    .wheel .border.b2 .item {
        background-color: #bf128e
    }

    .wheel .border.b3 .item {
        background-color: #7617cb
    }

    .wheel .border.b4 .item {
        background-color: #522dd1
    }

    .wheel .border.b5 .item {
        background-color: #005ade
    }

    .wheel .border.b6 .item {
        background-color: #02c4c0
    }

    .wheel .border.b7 .item {
        background-color: #58c02a
    }

    .wheel .border.b8 .item {
        background-color: #c5ef02
    }

    .wheel .border.b9 .item {
        background-color: #f2dc21
    }

    .wheel .border.b10 .item {
        background-color: #ee8f00
    }

    .wheel .border.b11 .item {
        background-color: #f45273
    }

    .wheel .border.b12 .item {
        background-color: #ef3c2e
    }

    .wheel .border .item.win {
        animation: win .5s linear infinite
    }

#marukhan .aicon {
    display: flex;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    
}

    #marukhan .aicon.a1 {
        background-image: url(/assets/res/live/maruturn/img/1.png)
    }

    #marukhan .aicon.a2 {
        background-image: url(/assets/res/live/maruturn/img/2.png)
    }

    #marukhan .aicon.a3 {
        background-image: url(/assets/res/live/maruturn/img/3.png)
    }

    #marukhan .aicon.a4 {
        background-image: url(/assets/res/live/maruturn/img/4.png)
    }

    #marukhan .aicon.a5 {
        background-image: url(/assets/res/live/maruturn/img/5.png)
    }

    #marukhan .aicon.a6 {
        background-image: url(/assets/res/live/maruturn/img/6.png)
    }

    #marukhan .aicon.a7 {
        background-image: url(/assets/res/live/maruturn/img/7.png)
    }

    #marukhan .aicon.a8 {
        background-image: url(/assets/res/live/maruturn/img/8.png)
    }

    #marukhan .aicon.a9 {
        background-image: url(/assets/res/live/maruturn/img/9.png)
    }

    #marukhan .aicon.a10 {
        background-image: url(/assets/res/live/maruturn/img/10.png)
    }

    #marukhan .aicon.a11 {
        background-image: url(/assets/res/live/maruturn/img/11.png)
    }

    #marukhan .aicon.a12 {
        background-image: url(/assets/res/live/maruturn/img/12.png)
    }

#marukhan .anum {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: bmhannapro;
    font-size: 15px;
    color: #fff;
    padding-top: 2px;
    text-shadow: 0 0 2px rgba(0,0,0,.7)
}

.wheel-mini {
    width: 110px;
    height: 110px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff
}

    .wheel-mini .border {
        height: 65px;
        width: 44px;
        clip-path: polygon(100% 0,50% 100%,0 0);
        position: absolute;
        transform: translateX(-50%);
        transform-origin: bottom;
        top: -10px;
        left: 33px;
        display: flex;
        background-color: #000
    }

        .wheel-mini .border.b1 {
            left: 50%
        }

        .wheel-mini .border.b2 {
            transform: rotate(36deg)
        }

        .wheel-mini .border.b3 {
            transform: rotate(72deg)
        }

        .wheel-mini .border.b4 {
            transform: rotate(108deg)
        }

        .wheel-mini .border.b5 {
            transform: rotate(144deg)
        }

        .wheel-mini .border.b6 {
            transform: rotate(180deg)
        }

        .wheel-mini .border.b7 {
            transform: rotate(216deg)
        }

        .wheel-mini .border.b8 {
            transform: rotate(252deg)
        }

        .wheel-mini .border.b9 {
            transform: rotate(288deg)
        }

        .wheel-mini .border.b10 {
            transform: rotate(324deg)
        }

        .wheel-mini .border .inbox {
            position: relative;
            height: 100%;
            width: 100%;
            clip-path: polygon(100% 0,50% 100%,0 0)
        }

            .wheel-mini .border .inbox .item {
                top: 2px;
                left: 2px;
                right: 2px;
                bottom: 2px;
                clip-path: polygon(100% 0,50% 100%,0 0);
                position: absolute;
                transform-origin: bottom;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                writing-mode: horizontal-tb;
                background-color: #fff;
                padding-top: 17px
            }

        .wheel-mini .border.b1 .item {
            background-color: #f20d56
        }

        .wheel-mini .border.b2 .item {
            background-color: #7617cb
        }

        .wheel-mini .border.b3 .item {
            background-color: #522dd1
        }

        .wheel-mini .border.b4 .item {
            background-color: #005ade
        }

        .wheel-mini .border.b5 .item {
            background-color: #02c4c0
        }

        .wheel-mini .border.b6 .item {
            background-color: #58c02a
        }

        .wheel-mini .border.b7 .item {
            background-color: #f2dc21
        }

        .wheel-mini .border.b8 .item {
            background-color: #ee8f00
        }

        .wheel-mini .border.b9 .item {
            background-color: #f45273
        }

        .wheel-mini .border.b10 .item {
            background-color: #ef3c2e
        }

        .wheel-mini .border .item.win {
            filter: brightness(1);
            animation: win .5s linear infinite
        }

#marukhan .nnum {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: bmhannapro;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.7)
}

#marukhan .circle-box {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 380px;
    height: 380px;
    display: none
}

#marukhan .circle {
    position: relative;
    width: 380px;
    height: 380px
}

    #marukhan .circle::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 85px;
        left: 85px;
        right: 85px;
        bottom: 85px;
        border: 50px solid #d9ff02;
        border-radius: 50%;
        box-shadow: 0 0 70px #d9ff02;
        animation: animate -2s ease-in 0s infinite
    }

    #marukhan .circle::after {
        content: '';
        position: absolute;
        z-index: 1;
        top: 85px;
        left: 85px;
        right: 85px;
        bottom: 85px;
        border: 50px solid #d9ff02;
        border-radius: 50%;
        box-shadow: 0 0 70px #d9ff02;
        animation: animate 2s ease-in 0s infinite
    }

@keyframes count {
    from {
        font-size: 12px;
        opacity: 1
    }

    to {
        font-size: 80px;
        opacity: 0
    }
}

@keyframes win {
    0% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.5)
    }

    100% {
        filter: brightness(1)
    }
}

@keyframes animate {
    0% {
        box-shadow: 0 0 70px #d9ff02;
        filter: hue-rotate(0deg)
    }

    12.5% {
        box-shadow: 0 0 50px #d9ff02
    }

    25% {
        box-shadow: 0 0 70px #d9ff02
    }

    37.5% {
        box-shadow: 0 0 50px #d9ff02
    }

    50% {
        box-shadow: 0 0 70px #d9ff02
    }

    62.5% {
        box-shadow: 0 0 50px #d9ff02
    }

    75% {
        box-shadow: 0 0 70px #d9ff02
    }

    87.5% {
        box-shadow: 0 0 50px #d9ff02
    }

    100% {
        box-shadow: 0 0 70px #d9ff02;
        filter: hue-rotate(360deg)
    }
}

.calendarCtrl select {
    height: 28px;
    cursor: pointer
}