.confirm_logo a span {font-size: 48px; font-weight: bold;}


/* 1차 선정 투표 */
.confirm_inner {max-width: 100%; position: relative; margin: 0 auto; box-sizing: border-box; padding: 0 20px;}

.confirm_logo {text-align: center; padding-top: 50px;}
.confirm_category {margin: 100px 0 30px 0; position: relative;}
.confirm_category ul li {display: inline-block;}
.confirm_category ul li a {
    display: inline-block;
    font-size: 14px; 
    font-weight: bold;
    width: 125px; 
    height: 40px; 
    line-height: 40px; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    margin-right: 10px; 
    text-align: center;
}
.confirm_category ul li.active a {background-color: #FBF4F4; border-color: #ef4d4d; color: #ef4d4d;}

.confirm_final_btn {display: none; position: absolute; right: 0; top: 0;}
.confirm_final_btn.active {display: block;}
.confirm_final_btn.active.on {opacity: 30%;}
.confirm_final_btn a {
    display: inline-block;
    font-size: 14px; 
    font-weight: bold;
    width: 125px; 
    height: 40px; 
    line-height: 40px;  
    border-radius: 5px; 
    text-align: center;
    background-color: #ef4d4d;
    color: #fff;
}

.confirm_total {padding-bottom: 30px;}
.confirm_total h4 {font-weight: bold; font-size: 20px;}
.confirm_total h4 span {}


.confirm_login {width: 350px; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.confirm_login input {width: 100%;}

.confirm_login .confirm_logo_box {text-align: center;}

.confirm_login .confirm_id_box {padding-top: 40px;}
.confirm_login .confirm_pw_box {padding-top: 10px;}

.confirm_login .confirm_login_box {padding-top: 15px;}
.confirm_login .confirm_login_box a {width: 100%; height: 45px; font-weight: bold; line-height: 44px; background-color: #ef4d4d; display: inline-block; color: #fff; text-align: center; border-radius: 5px;}

.confirm_select_btn {display: block; text-align: center;}
.confirm_select_btn a {
    display: block; 
    border-radius: 5px; 
    height: 45px; 
    line-height: 45px; 
    border: 1px solid #ddd;
    font-weight: bold;
    transition: 0.3s;
    font-size: 14px;
}
/* .confirm_select_btn a:hover {background-color: #ef4d4d; color: #fff;} */
.confirm_select_btn a.active {transition: 0.3s; background-color: #ef4d4d; color: #fff;}

.confirm_bottom {padding-bottom: 200px;}
.confirm_bottom .pagination {padding-top: 0; padding-bottom: 50px;}

/* 대국민 투표 */
.vote_banner_box {width: 100%; min-height: 180px; height: 100%; display: block; position: relative;}
.vote_banner_box img {width: 100%; object-fit: cover; min-height: 180px; height: 100%;}
.vote_banner_box .text_box {width: 100%;; position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50% , -50%)}
.vote_banner_box .text_box h3 {color: #fff; font-size: 20px;}
.vote_banner_box .text_box h2 {color: #fff; padding: 10px 0 15px 0; font-size: 50px; font-weight: bold;}
.vote_banner_box .text_box p {color: #fff; font-size: 20px;}


.vote_inner {max-width: 1200px; width: 100%; position: relative; margin: 0 auto;}
.vote_inner2 {max-width: 1080px; width: 100%; position: relative; margin: 0 auto;}
.vote_header {position: relative; width: 100%; height: 67px; border-bottom: 1px solid #eee;}
.vote_logo {position: absolute; top: 50%; transform: translate(0% , -50%); left: 20px;}

.vote_exit {position: absolute; top: 50%; transform: translate(0% ,-50%); right: 10px;}
.vote_exit a {
    display: inline-block; 
    border: 1px solid #eee; 
    width: 100px; 
    height: 40px; 
    background-color: #ef4d4d; 
    text-align: center; 
    border-radius: 5px; 
    line-height: 40px;
}
.vote_exit a span {font-size: 13px; color: #fff; font-weight: bold;}

.vote_title {}
.vote_title h2 {font-size: 24px; font-weight: bold; position: relative;}
.vote_title em {font-weight: bold; position: absolute; right: 0; top: 50%; transform: translate(0% , -50%);  color: #999; font-size: 16px;}

.vote_step {
    margin-left: 30px;
    position: absolute;
    top: 0;
    right: 0;
}
.vote_step ul {}
.vote_step ul li {
    display: inline-block;
    width: 75px;
    text-align: center;
}
.vote_step ul li > span {display: inline-block; margin-top: 5px; font-size: 14px; color: #ef4d4d;}

.vote_step ul li .step_circle {
    margin: 0 auto;
    position: relative; 
    width: 35px; 
    height: 35px; 
    border: 1px solid #ef4d4d; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ef4d4d;
}
.vote_step ul li .step_circle.active {background-color: #ef4d4d;}
.vote_step ul li .step_circle.active span {color: #fff;}
.vote_step ul li .step_circle svg {width: 16px; height: 16px;}

.vote_box {display: none;}
.vote_box1 {}
.vote_box2 {}
.vote_box3 {}
.vote_container {}

.vote_box1 {margin-bottom: 50px; padding-top: 40px;}
.vote_box1 .vote_top {display: flex; padding-top: 30px;}
.vote_box1 .img_box {max-width: 590px; max-height: 443px; border-radius: 10px; overflow: hidden;}
.vote_box1 .img_box img {width: 100%; height: 100%;}

.vote_box1 .text_box {margin-left: 30px; max-width: calc(100% - 590px);}
.vote_box1 .text_box h3 {padding: 5px 0 30px 0; font-weight: bold; font-size: 24px;}

.vote_box1 .text_box ul li {padding-bottom: 15px;}
.vote_box1 .text_box ul li p {font-weight: bold; font-size: 20px;}
.vote_box1 .text_box ul li p span {font-weight: normal; padding-left: 10px;}
.vote_box1 .text_box ul li .sub_text_box {padding: 15px 0 0 43px;}
.vote_box1 .text_box ul li .sub_text_box p {line-height: 1.2; padding-bottom: 12px; font-weight: normal;}

.shortform_script {font-size: 20px !important; line-height: 1.6;}
.shortform_script a {color: #187BBE; display: inline-block;}
.shortform_script p {font-size: 20px; padding-bottom: 5px;}

.vote_btn {padding: 50px 0; text-align: center;}
.vote_btn a {
    display: inline-block; 
    border: 1px solid #eee; 
    width: 280px; 
    height: 52px; 
    background-color: #ef4d4d; 
    text-align: center; 
    border-radius: 5px; 
    line-height: 52px;
}
.vote_btn a span {font-size: 16px; color: #fff; font-weight: bold;}

/* .vote_box2 .vote_banner {position: relative; width: 100%; max-height: 140px; background-color: #eee; margin: 50px 0 30px; border-radius: 5px; overflow: hidden;}
.vote_box2 .vote_banner img {max-width: 100%;}
.vote_box2 .vote_banner .text_box {width:100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.vote_box2 .vote_banner .text_box p {display: block; color: #fff; font-size: 30px; font-weight: bold;} */

.vote_box2 {padding-top: 40px;}
.vote_box2 .vote_data {padding: 32px 0; display: flex;}
.vote_box2 .vote_data .data_box {padding-right: 50px;}
.vote_box2 .vote_data .data_box h4 {font-size: 12px; padding-bottom: 5px; color: #999;}
.vote_box2 .vote_data .data_box p {font-size: 24px; font-weight: bold;}

.vote_list ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 20px;
}
.vote_list ul li {}
.vote_list ul li:nth-child(3n) {margin-right: 0;}
.vote_list ul li .vote_list_box .img_box {
    cursor: pointer; 
    position: relative; 
    width: 100%;
    height: 0;
    padding-top: 56.75%;
    border-radius: 5px; 
    overflow: hidden;
    background-color: #333;
}
.vote_list ul li .vote_list_box .img_box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100%; 
    object-fit: cover;
    /* height: auto; */
}
.vote_list ul li .vote_list_box .img_box .vote_play {
    position: absolute; 
    bottom: 10px;
    right: 10px;
}
.vote_list ul li .vote_list_box2 .img_box {}
.vote_list ul li .vote_list_box2 .img_box img {
    position: absolute;
    top :50% !important;
    left: 50% !important;
    transform: translate(-50% , -50%) !important;
    width: auto;
    height: 101%;
}

.vote_list ul li .vote_list_box .img_box:hover svg circle {fill: #ef4d4d; fill-opacity: 1; transition: 0.2s;}

.vote_list ul li .vote_list_box .text_box {padding: 18px 0;}
.vote_list ul li .vote_list_box .text_box p {position: relative; font-weight: bold;}
.vote_list ul li .vote_list_box .text_box span {font-size: 14px; position: absolute; top: 0; right: 0; color: #999; font-weight: normal;}

.vote_list ul li .vote_list_box .text_box2 {padding: 10px 0 15px 0; position: relative;}
.vote_list ul li .vote_list_box .text_box2 p {font-size: 14px;}
.vote_list ul li .vote_list_box .text_box2 p em {color: #4d7fef; font-size: 16px; font-weight: bold;}

.vote_list ul li .vote_list_box .text_box2 .score_box {position: absolute; right: 0; top: 70%; transform: translate(0 , -50%);}
.vote_list ul li .vote_list_box .text_box2 .score_box span {color: #187BBE; font-size: 18px; font-weight: bold;}

.vote_list ul li .vote_list_box .btn_box {position: relative;}
.vote_list ul li .vote_list_box .btn_box a {
    display: block;
    background-color: #fff;
    padding: 19px 0;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    color: #999;
    font-weight: bold;
    border: 1px solid #eee;
    transition: 0.2s;
    background-color: #eee;
    color: #333;
}
.vote_list ul li .vote_list_box .btn_box a span {display: inline-block; vertical-align: middle;}
.vote_list ul li .vote_list_box .btn_box a img {display: inline-block; vertical-align: middle; padding-left: 3px;}
.vote_list ul li .vote_list_box .btn_box a.active {
    background-color: #fff;
    color: #ef4d4d;
    border: 1px solid #ef4d4d;
    /* opacity: 30%; */
}
/* .vote_list ul li .vote_list_box .btn_box:hover a {
    background-color: #ef4d4d;
    border: 1px solid #ef4d4d;
    color: #fff;
    opacity: 100%;
} */

.vote_list ul li .vote_list_box .btn_box .check_box {position: absolute; top: 50%; right: 0%; transform: translate(-50% ,-50%);}
.vote_list ul li .vote_list_box .btn_box .check_box.active {}
.vote_list ul li .vote_list_box .btn_box .check_box img {}

.vote_modal {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: none;
}
.vote_modal.active {display: block;}
.vote_hidden_btn {display: none;}

.vote_modal .vote_content {
    background-color: #fff;
    margin: auto;
    padding: 30px 30px 0 30px;
    border: 1px solid #888;
    max-width: 400px; /* 모달 창의 최대 너비 지정 */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
}
.vote_modal .vote_content .text_box {text-align: center; padding-bottom: 30px;}
.vote_modal .vote_content .text_box h2 {font-size: 30px;}
.vote_modal .vote_content .text_box h3 {font-size: 18px; padding: 15px 0 10px 0; font-weight: bold;}

.vote_modal .vote_content .img_box {
    border-radius: 10px;
    max-width: 285px;
    height: 160px;
    margin: 0 auto;
    overflow: hidden;
}
.vote_modal .vote_content .img_box img {display: block;; width: 100%; height: 100%;}
.vote_modal .vote_content .btn_box {padding: 30px 0; display: flex;}
.vote_modal .vote_content .btn_box a {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    padding: 12px 0;
    width: calc(50% - 1%);
    border: 1px solid #eee;
    box-sizing: border-box;
    margin-right: 2%;
    border-radius: 5px;
}

.vote_modal .vote_content .btn_box a:first-child {
    color: #999;
}
.vote_modal .vote_content .btn_box a:last-child {
    color: #fff;
    background-color: #ef4d4d;
    margin-right: 0;
}

.vote_video_modal {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: none;
}
.vote_modal_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: rgba(0,0,0,0.9);
    /* background-color: #333; */
}
.vote_video_modal.active {display: block;}
.vote_video_modal .vote_content {
    position: relative;
    width: 100%;
    max-width: 1440px;
    aspect-ratio: 16/9;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    background-color: transparent;
    display: none;
}
.vote_video_modal .vote_content.active {display: block;}
.vote_video_modal .vote_content video { border-radius: 10px; width: 100%; height: auto; max-height: 100vh;}
.vote_video_modal .loading_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
.vote_video_modal .loading_box.active {display: none;}
.vote_video_modal .loading_box img {width: 70px; height: 70px;}

.vote_success {max-width: 390px; margin: 0 auto; text-align: center; padding-top: 150px;}
.vote_success h2 {font-size: 30px; padding-bottom: 15px;}
.vote_success h3 {font-size: 18px; font-weight: bold; padding-bottom: 15px;}
.vote_success p {font-size: 14px; line-height: 1.4; padding-bottom: 15px;}
.vote_success a {
    display: block; 
    font-size: 14px; 
    padding: 15px 0; 
    border-radius: 20px; 
    color: #fff; 
    background-color: #ef4d4d;
    font-weight: bold;
}

/* 투표 모바일 */
@media (max-width : 1200px){

    .confirm_logo a span {font-size: 36px;}
    
    .vote_inner {padding: 0 15px;}
    .vote_inner2 {padding: 0 15px; box-sizing: border-box; margin-bottom: 70px;}
    .vote_container .vote_inner {padding-bottom: 50px;} 
    .vote_sub_header h2 {font-size: 16px; box-sizing: border-box;}
    .vote_sub_header h2 em {font-size: 12px; font-weight: lighter;}

    .vote_box1 .vote_top {display: block;}
    .vote_box1 .img_box {width: 100%;}
    .vote_box1 .text_box {margin-left: 0px; max-width: 100%; padding: 40px 0 20px 0;}
    .shortform_script {font-size: 16px !important;}

    /* .vote_btn {
        position: fixed;
        width: 100%; 
        bottom: 75px;
        left: 50%; 
        padding: 0 20px; 
        box-sizing: border-box;
        transform: translate(-50% , -50%);
    } */
    .vote_btn {padding-top: 0;}
    .vote_btn a {width: 100%;}

    .vote_box2 .vote_banner {margin: 20px 0 20px 0;}
    .vote_box2 .vote_banner .text_box {}
    .vote_box2 .vote_banner .text_box p {font-size: 20px;}
    .vote_box2 .vote_data .data_box p {font-size: 15px;}
    .vote_box2 .vote_data .data_box {padding-right: 35px;}

    .vote_list ul {grid-template-columns: repeat(2, 1fr);}
    .vote_list ul li {width: 100%;}
    .vote_list ul li .vote_list_box .text_box {padding: 13px 0;}
    .vote_list ul li .vote_list_box .text_box p {font-size: 14px;}
    
    .vote_modal .vote_content .img_box {max-width: 285px; height: auto; max-height: 160px;}

    .vote_success {padding-top: 150px}

    /* 1차 참가작 리스트 */
    .confirm_login {padding: 0 10px; box-sizing: border-box; width: 320px;}
    .confirm_middle .confirm_logo img {max-width: 400px;}
    .confirm_category {margin-top: 60px;}
    .confirm_inner {padding: 0 10px; box-sizing: border-box;}
    .confirm_category {}
    .confirm_final_btn {}
}

@media (max-width : 500px){

    .confirm_logo a span {font-size: 24px;}
    
    .vote_list ul {grid-template-columns: repeat(1, 1fr);}
    .vote_box1 .text_box ul li p {font-size: 16px;}

    .vote_banner_box .text_box h3 {font-size: 20px;}
    .vote_banner_box .text_box h2 {font-size: 32px;}
    .vote_banner_box .text_box p {font-size: 16px;}

    .vote_box2 .vote_banner .text_box {}
    .vote_box2 .vote_banner .text_box p {font-size: 16px;}

    .confirm_middle .confirm_logo img {max-width: 310px;}
    .confirm_category ul li a {width: 70px;}
    .confirm_category ul li a {margin-right: 5px;}
    
}