@charset "utf-8";
/***** 체크박스 *****/
.check_box {
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin: 2px 5px 0 5px;
}
.check_box+label {
    vertical-align: middle;
    padding-right: 20px;
}
.check_box::before {
    content: "";
    display: flex;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-grayddd);
    border-radius: 50%;
    background-color: var(--color-grayddd);
}
.check_box::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    display: flex;
    width: 2px;
    height: 7px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.check_box:checked::after {
    background-color: var(--color-primary);
    transition: all .5s ease
}
.check_box:checked::before {
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    transition: all .5s ease
}
.subscript .tip {
    display: inline-block;
    font-size: 14px;
    color: #999;
    font-weight: 300;
    margin-top: 5px
}
.select_vote label {
    font-size: 1.1rem;
    font-weight: 600
}
.select_vote:hover input, .select_vote:hover label {
    opacity: .5;
}

/***** 레이아웃 *****/
.pollvote_wraps {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    background: #fff
}
.vote_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    width: 100%;
}
.vote_memo {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%;
}
.main_vote_view {
    display: flex;
    flex-direction: column;
    row-gap: 10px
}

/***** 젤리 투표하기 버튼 *****/
.pollvote_wraps .btn_votego {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 40px;
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 100px;
    background: var(--color-primary);
    /* box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; */
    transition: transform 0.3s ease-out;
}
.pollvote_wraps .btn_votego:hover {
    animation: jelly 0.6s ease-out;
}
@keyframes jelly {
    0% { transform: scale(1); }
    30% { transform: scale(1.15, 0.85); }
    50% { transform: scale(0.9, 1.1); }
    70% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1); }
}

/***** 타이틀 *****/
.polltitle {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.polltitle .btn_moreview {
    position: relative;
    margin: 0 10px 0 0;
    font-size: 13px;
}
.polltitle .btn_moreview::after {
    content: "+";
    position: absolute;
    top: -3px;
    left: -14px;
    color: #e60012;
}

/***** 진행중 종료 알림 *****/
.title_ing .title {
    font-size: 1.4rem;
    font-weight: 600
}
.polltitle .total_btn {
    top: 0
}
.polltitle .title_ing {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}
.title_ing .ing, 
.title_ing .end  {
    display: flex;
    align-items: center;
    justify-content:center;
    height: 20px;
    padding: 0 15px;
    font-size: 11px;
    color:var(--color-white);
    border-radius: 10px;
}
.title_ing .ing {
    background: var(--color-gray333)
}
.title_ing .end {
    background: var(--color-gray999)
}
.title_ing .title {
    display: flex;
    gap: 10px;
    align-items: center;
}
.title_ing .title::after {
    content: "";
    display: flex;
    width: 17px;
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' version='1.1' viewBox='0 0 92 92'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%23e60012%7D%3C/style%3E%3C/defs%3E%3Cpath d='M87 25.1c-1-2-3.4-2.8-5.4-1.8-2 1-2.8 3.5-1.8 5.4 2.7 5.3 4.1 11.1 4.1 17.2 0 10.5-4.2 19.9-11.1 26.8C58 87.5 34 87.5 19.2 72.7c-14.8-14.8-14.8-38.8 0-53.6C32.6 5.7 53.7 4.3 68.8 15.6c1.8 1.3 4.3 1 5.7-.8 1.3-1.8 1-4.3-.8-5.7-18.4-13.6-44-11.9-60.2 4.4-18 18-18 47.1 0 65.1 18 18 47.1 18 65.1 0C92.7 64.5 96.1 42.9 87 25.1Z' class='st0'/%3E%3Cpath d='M46 70.4c2.2 0 4.1-1.8 4.1-4.1V50h16.3c2.2 0 4.1-1.8 4.1-4.1s-1.8-4.1-4.1-4.1H50.1V25.5c0-2.2-1.8-4.1-4.1-4.1s-4.1 1.8-4.1 4.1v16.3H25.6c-2.2 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1h16.3v16.3c0 2.2 1.8 4.1 4.1 4.1Z' class='st0'/%3E%3C/svg%3E");
    transition: all .5s ease
}
.title_ing .title:hover::after {
    transform: rotate(180deg);
    transition: all .5s ease
}

/***** 설문 제목 *****/
.vote_title {
    display: grid;
    grid-template-columns: 30px auto;
    /* gap:  10px; */
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
}
.vote_title::before {
    content:"";
    display: flex;
    overflow: hidden;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 106'%3E%3Ccircle cx='53' cy='53' r='53' style='fill:%23333'/%3E%3Cpath d='m68.8 67.2.4-.4c3.8-4.1 5.7-9.1 5.7-14.8s-2.2-11.5-6.6-15.8c-4.4-4.3-9.7-6.5-15.8-6.5s-7.8 1-11.3 3c-3.5 2-6.3 4.7-8.2 8.1-2 3.4-3 7.1-3 11.1 0 6 2.2 11.3 6.4 15.7 4.3 4.4 9.7 6.6 16.2 6.6s7.4-.9 10.5-2.5l.5-.3 4.1 5.1H76l-7.2-9.2ZM65 61l-.5.8-4.4-5.5h-8.3l7.6 9.6-.8.4c-1.9.8-3.9 1.2-6 1.2-3.7 0-7-1.2-9.8-3.4-3.7-2.9-5.6-7-5.6-12s1.5-8.3 4.4-11.2c2.9-2.9 6.6-4.4 10.9-4.4S60.3 38 63.3 41c3 3 4.5 6.7 4.5 11s-.9 6.3-2.8 9Z' style='fill:%23fff'/%3E%3C/svg%3E");
}

/***** 설문 항목 *****/
.selectarea_votes {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    width: calc(100% - 2px);
    padding: 15px;
    border-radius: 10px;
    border:1px solid #eee;
    background: #fff
}
.selectarea_votes.select {
    border: 3px solid #333
}
.selectarea_votes:hover {
    cursor: pointer;
    background: #fdfdfd;
    transition: all .05s ease
}
.selectarea_votes .check_box:checked {
    background: blue
}

.select_vote_wrap {
    display: flex;
    justify-content: space-between
}
/* 그래프 애니메이션 */
.selectarea_votes .graph {
    width: 100%;
    height: 8px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(241, 241, 241, 0.5), rgba(238, 226, 226, 0.5), rgba(247, 243, 243, 0.5), rgba(238, 238, 238, 0.5));
    background-size: 300% 100%;
    animation: gradientMove 6s linear infinite;
}
.main_vote_view .selectarea_votes:nth-child(1) .graph {
    animation: gradientMove 20s linear infinite;
}
.main_vote_view .selectarea_votes:nth-child(2) .graph {
    animation: gradientMove 17s linear infinite;
}
.main_vote_view .selectarea_votes:nth-child(3) .graph {
    animation: gradientMove 14s linear infinite;
}
@keyframes gradientMove {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}
.main_vote_view .selectarea_votes .graph {
    position: relative;
    width: 100%;
    height: 4px;
    /* background: #f8f8f8; */
    border-radius: 20px;
    overflow: hidden;
}
.main_vote_view .selectarea_votes .graph::after {
    display: none;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--graph-width, 0%);
    height: 100%;
    border-radius: 20px;
    background: var(--color-light-primary);
    transition: width 0.3s ease-in-out;
}
.main_vote_view.completion .selectarea_votes .graph::after {
    display: block;
}
.select_vote_wrap .result {
    display: none;
    font-size: 1.1rem;
    color: var(--color-gray333);
    letter-spacing: -0.08rem;
    font-weight: 600;
}
.completion .select_vote_wrap .result {
    display: flex;
    align-items: end;
}
.select_vote_wrap .result > em {
    font-size: 14px;
    color: var(--color-grayddd);
    padding: 0 5px
}
.select_vote_wrap .result > span {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
}


/*-----------------------------------------------
                    Mediaquery
-------------------------------------------------*/
@media screen and (max-width:520px) {
    .select_vote_wrap {
        flex-direction: column;
        row-gap: 10px;
    }
    .completion .select_vote_wrap .result {
        justify-content:end;
    }
}