@charset "UTF-8";

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.popCount {
    width: 100%;
    max-width: 600px;
    position: fixed;
    z-index: 9999999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.popCount .pop_con {
    background: url('../img/bg_pop.png') center center/cover no-repeat;
}

.popCount .pop_inner {
    text-align: center;
    padding: 67px 46px 43px;
}


.ff_theface {
    color: #181818;
    font-family: "INKLIPQUID";
    font-size: 46px;
    font-weight: 400;
    line-height: 110%;
}

.popCount_tit .ff_theface {
    padding-bottom: 20px;
    display: block;
}

.popCount_tit {
    /* color: #6F35B6;
    font-family: 'Paperlogy';
    font-size: 86px;
    font-weight: 800;
    line-height: normal; */
    padding-bottom: 34px;
}

.popCount_count {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #FFF;
    font-family: Paperlogy;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    justify-content: center;
    line-height: normal;
    padding-bottom: 20px;
}

.popCount_count_num {
    display: flex;
    gap: 8px;
}

.popCount_count_txt1 {
    color: #fff;
}

.popCount_count_txt2 {
    color: #FFF;
    text-align: left;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Paperlogy';
    text-align: center;
    font-size: 52px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.popCount_count_num-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 91.864px;
    height: 133.039px;
    filter: drop-shadow(0px 0px 1.739px rgba(0, 0, 0, 0.75));
    background: url('../img/ico_count.png') center center/100% no-repeat;
}

.popCount_count_num-item .num {
    position: relative;
    width: 100%;
    /* position: absolute; */
    /* left: 50%; */
    /* top: 56%; */
    /* transform: translate(-50%, -50%); */
    color: #FFF;
    text-align: center;
    font-family: "GmarketSansMedium";
    mix-blend-mode: exclusion;
    font-size: 90px;
    height: 100%;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: normal;
}


.popCount_btn {
    position: relative;
    display: block;
    width: fit-content;
    margin: 24px auto 0;
    border-radius: 9999px;
    border: 1px solid #ffd473;
    background: linear-gradient(180deg, #6F299D 0%, rgba(12, 12, 12, 0.10) 80%);
    padding: 8px;
}

.popCount_btn .btn_inner {
    text-align: center;
    font-family: Paperlogy;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    gap: 12px;
    border-radius: 9999px;
    background: linear-gradient(149deg, #6F35B6 12.74%, #4F1B8F 84.83%);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: #FFF;
    padding: 14.411px 44.341px;
}

.popCount_btn img {
    max-width: 26px;
    max-height: fit-content;
}

.odometer-inside {
    display: block;
    width: 100%;
    text-align: center;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value {
    text-align: center;
    font-family: "GmarketSansMedium";
    mix-blend-mode: exclusion;
    font-size: 90px;
    font-weight: 700;
    color: #fff;
    display: block;
    /* margin-top: 0.2em; */
    margin-top: 26px;
    line-height: 1;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner {
    left: -2px;
    display: block;
}

.popCount .odometer.odometer-auto-theme .odometer-digit .odometer-value {
    display: flex;
    justify-content: center;
}

.odometer .odometer-digit {
    transition: transform 0.2s ease-in-out;
}

@media screen and (max-width:767px) {
    .popCount {
        width: 90%;
    }

    .popCount .pop_inner {
        text-align: center;
        padding: 50px 24px 30px;
    }

    .popCount_tit {
        padding-bottom: 0;
    }

    .popCount_tit .ff_theface {
        font-size: 34px;
    }

    .popCount_tit img {
        width: 100%;
        max-width: 310px;
        padding-bottom: 20px;
    }

    .popCount_count {
        font-size: 26px;
        justify-content: center;
    }

    .popCount_count_txt2 {
        text-align: center;
        font-size: 30px;
        text-shadow: 0px 2px 2cap rgba(0, 0, 0, 0.25)
    }

    .popCount_count_num div {
        flex: 1;
        width: 100%;
    }

    .popCount_count_num-item {
        height: 84px;
        overflow: hidden;
    }

    .popCount_btn {
        font-size: 18px;
        /* max-width: 250px; */
        width: 100%;
        max-width: 260px;
        display: block;

    }

    .popCount_btn .btn_inner {
        padding: 14.411px 0;
        justify-content: center;
        font-size: 20px;
    }

    .odometer.odometer-auto-theme .odometer-digit .odometer-value {
        font-size: 60px;
        font-weight: 800;
        margin-top: 2.4vw;
    }

    .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
    .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
    .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer,
    .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
    .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
        overflow: hidden;
    }

    .odometer-inside {
        overflow: hidden;
        height: calc(100% - 1vw);
    }
}


@media screen and (max-width:480px) {
    .odometer.odometer-auto-theme .odometer-digit .odometer-value {
        font-size: 60px;
        font-weight: 800;
        margin-top: 3.4vw;
    }

    .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
    .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
    .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer,
    .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
    .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
        overflow: hidden;
    }

    .odometer-inside {
        overflow: hidden;
        height: calc(100% - 3vw);
    }
}

/* ROULETTLE 페이지 */
.roulette_wrap {
    padding-top: 80px;
    text-align: center;
    background: url('../img/bg_event.png') center center/cover no-repeat;
}

.roulette_tit span {
    display: block;
    padding-bottom: 5px;
    font-size: 46px;
    font-weight: 400;
    line-height: 110%
}

.roulette_tit img {
    max-width: 396px;
    margin-bottom: 40px;
}

.roulette_inner {
    padding: 60px 0;
    max-width: 680px;
    margin: 0 auto;
}

.roulette_box {
    margin-bottom: 60px;
    position: relative;
}

.roulette_group {
    position: relative;
    margin: 0 auto 80px;
}

.roulette_group .roul {
    position: relative;
    width: 100%;
    max-width: 450px;
    z-index: 1;
}

.roulette_group .shadow {
    width: 100%;
    max-width: 438px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.8;
    mix-blend-mode: multiply;
}

.roulette_box .deco_group {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    bottom: -10%;
    align-items: end;
    z-index: 2;
}

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.event_form .form_wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event_form label,
.event_form a {
    color: #fff;
}

.event_form label {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.8px;
}

.event_form .input_group {
    display: flex;
    justify-content: center;
    align-items: center;
}

.event_form .input_group label {
    width: 100px;
    text-align: left;
}

.event_form input {
    border-radius: 5px;
    border: 1px solid #ECECEC;
    background: #FFF;
    padding: 3px 8px;
    line-height: 28px;
}

.event_form .agree_group {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.event_form .agree_group label {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -0.6px;
    cursor: pointer;
}

.event_form .agree_link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.event_form .agree_group input {
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: block;
    background: #fff;
    border-radius: 3px;
    position: relative;
}

.event_form .agree_group input:checked {
    background: #62367E;
    transition: 0.4s;
    border: none;
}

.event_form .agree_group input:checked:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -57%);
    background: url('../img/ico_check.svg') center center no-repeat;
    width: 18px;
    height: 20px;
}


@media screen and (max-width:767px) {
    .roulette_inner {
        padding: 60px 20px;
    }

    .roulette_tit span {
        font-size: 32px;
        /* line-height: 0px; */
    }

    .roulette_tit img {
        max-width: 270px;
        width: 100%;
    }

    .roulette_box .deco_group {
        left: 50%;
        transform: translateX(-50%);
    }

    .roulette_box .deco_group img {
        max-width: 50%;
        height: auto;
    }

    .roulette_box .deco_group img:last-child {
        max-width: 80%;
    }
}

@media screen and (max-width:480px) {
    .event_form .agree_group {
        gap: 2px 6px;
    }
}

.roulette_group {}

.the_wheel {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    height: 609px;
    position: relative;
}

.the_wheel:before {
    content: '';
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    background: url('../img/img_roulette.png') center center / 100% auto no-repeat;
}

.the_wheel canvas {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    max-width: 384px;
    width: 100%;
    height: auto;
    z-index: 0;
    margin-top: 93px;
}

.btnRoul.disabled {
    background: url(../img/img_btn_gray.png) center center / 100% 100% no-repeat;
}

.modal_roulett {
    /* display: block; */
    background-color: rgba(0, 0, 0, 0.6);
}

.modal_roulett .modal_conbox {
    text-align: center;
    max-width: 400px;
    width: 100%;
    padding: 40px;
    height: auto;
}

.modal_roulett .txt_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "GmarketSans";
}

.modal_roulett_txt1 {
    color: #62367E;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.2px;
    font-family: "GmarketSans";
}

.modal_roulett_txt2,
.modal_roulett_txt3 {
    font-size: 18px;
    font-weight: 400;
    color: #FF3F3F;
    font-family: inherit;
    line-height: normal;
    letter-spacing: -0.9px;
}

.modal_roulett_txt3 {
    color: #333;
}

.modal_roulett_txt4 {
    color: #676767;
    font-family: "GmarketSans";
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.9px;
    padding-bottom: 16px;
}

.modal_roulett .call_txt {
    color: #333;
    font-family: Paperlogy;
    font-size: 24px;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 1.2px;
    padding-bottom: 12px;
}

.modal_roulett .btn_call {
    display: flex;
    padding: 16px 30px;
    gap: 10px;
    max-width: 220px;
    margin: 0 auto 20px;
    border-radius: 999px;
    border: 1px solid #E5CA96;
    background: linear-gradient(0deg, #000 0%, #373535 100%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16);
}

.modal_roulett .btn_call p {
    color: #FFF;
    font-family: "GmarketSans";
    font-size: 20px;
    font-weight: 400;
    line-height: 160%;
}

.modal_roulett .btn_confirm {
    width: 100%;
    background: #000;
    border-radius: 5px;
    background: #62367E;
    padding: 12px;
    border: none;
    appearance: none;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}

@media screen and (max-width:780px) {
    .modal_roulett .modal_conbox {
        width: 90%;
    }

    .modal_roulett_txt1 {
        font-size: 20px;
        letter-spacing: -1px;
    }

    .modal_roulett_txt2,
    .modal_roulett_txt3 {
        font-size: 16px;
        letter-spacing: -0.8px;
    }

    .modal_roulett_txt4 {
        font-size: 16px;
        letter-spacing: -0.8px;
        padding-bottom: 16px;
    }

    .modal_roulett .call_txt {
        font-size: 24px;
        letter-spacing: 1.2px;
    }

    .modal_roulett .btn_call {}

    .modal_roulett .btn_call p {
        font-size: 20px;
        line-height: 160%;
    }

    .modal_roulett .btn_call svg {
        display: block;
    }
}


.roulette-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
}

.roulette {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.83, 0.98);
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    max-width: 384px;
    width: 100%;
    max-height: 384px;
    z-index: 0;
    margin: 94px auto 0;
}

.roulette:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: url('../img/bg_roll.svg?v=2') center center /contain no-repeat;
}

.slice {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    transform-origin: 50% 50%;
}

/* 각 조각 색상 */
.slice:nth-child(1) {
    background: transparent;
    transform: rotate(-80deg);
}

.slice:nth-child(2) {
    background: transparent;
    transform: rotate(-9deg);
}

.slice:nth-child(3) {
    background: transparent;
    transform: rotate(63deg);
}

.slice:nth-child(4) {
    background: transparent;
    transform: rotate(135deg);
}

.slice:nth-child(5) {
    background: transparent;
    transform: rotate(207deg);
}


@media screen and (max-width:480px) {
    .the_wheel {
        margin: -16px auto 0;
        height: 122vw;
    }

    .the_wheel .roulette {
        margin-top: 18vw;
        width: 94%;
    }

    .roulette_group .shadow {
        bottom: -9px;
    }
}

@media screen and (max-width:480px) {
    .roulette-container {
        height: 100vw;
    }

    .the_wheel .roulette {
        max-width: 80vw;
        max-height: 80vw;
    }

    .roulette:after {
        background: url(../img/bg_roll.svg) center center / contain no-repeat;
    }
}

.pop_rouletteBack {
    position: fixed;
    z-index: 10;
    right: 40px;
    max-width: 448px;
    bottom: 120px;
}

.pop_roulette_close {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -46px;
    right: 4px;
}

.pop_rouletteBack img {
    /* width: 100%; */
}

.btn_back {
    position: relative;
    padding: 7px 26px 0 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    background: url(/img/roul_img2.png) center center/cover no-repeat;
    border-radius: 20px;
    box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.25) inset, 1px 1px 1px 0px rgba(255, 255, 255, 0.60) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
}

.btn_back:before {
    content: '';
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background-blend-mode: plus-lighter, normal, normal;
}

.btn_back p,
.btn_back>img {
    /* flex: 1; */
}

.btn_back>img {
    max-width: 135px;
}

.btn_back p {
    color: #6F35B6;
    font-family: Paperlogy;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pop_rouletteBack p img {
    max-width: 26px;
}

.pop_roulette_close {
    cursor: pointer;
}

@media screen and (max-width:1240px) {
    .pop_rouletteBack {
        max-width: 350px;
        top: 120px;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        bottom: unset;
        width: 90%;
    }

    .btn_back {
        border-radius: 15px;
        padding: 7px 12px 0 2px;
    }

    .btn_back>img {
        max-width: 104px;
    }

    .btn_back p {
        font-size: 18px;
        line-height: 150%;
    }

    .pop_roulette_close {
        top: -38px;
    }
}

@media screen and (max-width:400px) {
    .btn_back {
        gap: 12px;
    }

    .btn_back>img {
        max-width: 78px;
    }
}