﻿#ClipButton1 {position: absolute;}
#page h1 {margin: 0;}

header.nav-up {top: 0;}

/* 메인 팝업 */
.newme_pop {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 300px; z-index: 999999; display: none;}
.newme_pop img {width: 100%;}
.newme_pop .newme_pop_input {text-align: center; margin-top: 20px; font-family: var(--font-l); color: #fff; font-size: 16px;}
.newme_pop .newme_pop_input img {width: 10px;}

.newme_pop .newme_close {position: absolute; top: 34px; right: 10px; width: 35px; padding: 10px; cursor: pointer;}

.newme_pop input:focus {border: 2px solid #fff; outline: none;}
.newme_pop .checkbox_label {display: flex; align-items: center; justify-content: center;}
.newme_pop .checkbox_label .checkbox_icon {cursor: pointer;}
.newme_pop .checkbox_label .checkbox_text {cursor: pointer;}
.newme_pop .checkbox_icon::before {content: ''; display: block; margin-right: 5px; display: inline-block; width: 20px; height: 20px; background-color: transparent; border: 2px solid #fff; box-sizing: border-box; position: relative; cursor: pointer; vertical-align: middle; margin-right: 10px;}
.newme_pop .checkbox_label input:checked + .checkbox_icon::before {background: url(/images/newme_check.svg) no-repeat center; border: 2px solid #fff; background-size: 11px;}

.newme_dim {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99999; display: none;}


.newme_common {padding: 50px 0 0;}
.newme_common * {font-family: var(--font-r); padding: 0; margin: 0; line-height: inherit; font-size: 16px;}
.newme_common textarea {resize: none; width: 100%;}
.newme_common .nm_detail_btn {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}


/* newme index */
.newme_index {position: relative;}
.newme_index .nm_detail_img {width: 100%; max-width: 856px; margin: 0 auto; display: block;}



/* newme 챌린지 접수 */
.chall_wrap {padding: 50px 0;}
.chall_wrap .chall_top {background: url(/images/newme_bg.png) no-repeat center 0; background-size: cover; text-align: center; padding: 100px 0;}
.chall_wrap section {padding: 20px;}
.chall_wrap section .chall_tit {font-family: var(--font-sb); margin-bottom: 10px; display: inline-block; width: 100%;}
.chall_wrap section .chall_txt {color: #414042; font-family: var(--font-l);}
.chall_wrap section .chall_txt span {font-family: var(--font-sb);}
.chall_wrap section .chall_txt i {color: #D73F24; font-family: var(--font-sb); cursor: inherit;}
.chall_wrap section .chall_red {margin-bottom: 10px; display: flex; width: 100%; align-items: flex-start;}
.chall_wrap section .chall_red i {color: #D73F24; font-family: var(--font-b); cursor: inherit;}
.chall_wrap section .chall_red img {vertical-align: middle; margin-right: 5px;}

.chall_wrap .chall_top p {font-size: 45px; color: #fff; font-family: var(--font-b); border-top: 5px solid #e0c984; border-bottom: 5px solid #e0c984; display: inline-block; padding: 15px 30px; margin-bottom: 15px;}
.chall_wrap .chall_top p i {font-size: 45px; color: #FFF896; font-family: var(--font-b);}
.chall_wrap .chall_top p b {font-size: 45px; color: #000;}
.chall_wrap .chall_top span {display: inline-block; width: 100%; font-size: 25px; color: #fff;}


.chall_wrap .chall_con1 .newme_box textarea {border: 1px solid #d9d9d9; border-radius: 5px; color: #757575; padding: 15px; height: 150px;}
.chall_wrap .chall_con1 .newme_count {text-align: right; color: #757575; font-family: var(--font-l);}

.chall_wrap .chall_con_ba ul {display: flex;}
.chall_wrap .chall_con_ba ul li {width: 100%; text-align: center; margin-right: 2px;}
.chall_wrap .chall_con_ba ul li div {position: relative;}
.chall_wrap .chall_con_ba ul li i {position: absolute; background-color: #fff; width: 25px; height: 25px; color: #222; display: flex; align-items: center; justify-content: center; top: 10px; left: 10px;}
.chall_wrap .chall_con_ba ul li:last-of-type {margin-right: 0;}
.chall_wrap .chall_con_ba ul li span {font-family: var(--font-sb); margin-bottom: 5px; display: inline-block;}
.chall_wrap .chall_con_ba ul li img {width: 100%;}


.chall_wrap .chall_con4 {display: flex; flex-wrap: wrap;}
.chall_wrap .chall_con4 .upload_section {width: calc((100% - 20px)/2); margin-right: 20px; margin-bottom: 20px;}
.chall_wrap .chall_con4 .upload_section:nth-of-type(2n) {margin-right: 0;}
.chall_wrap .chall_con4 .upload_section:nth-of-type(3) {margin-bottom: 0;}
.chall_wrap .chall_con4 .upload_section:nth-of-type(4) {margin-bottom: 0;}
.chall_wrap .chall_con4 .upload_title {font-size:16px; display:flex;align-items:center; margin-bottom: 10px; font-family: var(--font-sb);}
.chall_wrap .chall_con4 .upload_num {background:#000; color:#fff; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:14px; margin-right: 20px;}
.chall_wrap .chall_con4 .upload_container {position:relative}
.chall_wrap .chall_con4 .upload_area {position:relative; width:100%; height:60px; border:1px dashed #757575; display:flex; align-items:center; justify-content:center; cursor:pointer; background:#F4F4F4;}
.chall_wrap .chall_con4 .upload_area.dragover {border-color:#007bff; background:#e6f3ff}
.chall_wrap .chall_con4 .upload_placeholder {text-align:center; color:#8a8a8a; font-size:16px; padding:0 10px}
.chall_wrap .chall_con4 .upload_preview {position:relative; width:100%; height:300px; overflow:hidden; display:none; background:#000;}
.chall_wrap .chall_con4 .upload_preview img {width:100%; height:100%; object-fit:cover; display:block;}
.chall_wrap .chall_con4 .delete_btn {position:absolute; top:10px; right:10px; width:35px; height:35px; background:rgba(255,255,255,.5); color:#000; border:0; border-radius:50%; cursor:pointer; font-size:30px;}
.chall_wrap .chall_con4 .file_input {display:none;}


.chall_wrap input:focus {border: 2px solid #fff; outline: none;}
.chall_wrap .checkbox_label {display: flex; align-items: center; cursor: pointer; margin: 20px 0 10px;}
.chall_wrap .checkbox_icon::before {content: ''; display: block; margin-right: 5px; display: inline-block; width: 20px; height: 20px; background-color: transparent; border: 1px solid #414042; box-sizing: border-box; position: relative; cursor: pointer; vertical-align: middle; margin-right: 10px;}
.chall_wrap .checkbox_label input:checked + .checkbox_icon::before {background: #414042 url(/images/newme_check.svg) no-repeat center; border: 1px solid #414042; background-size: 12px;}

.chall_wrap .chall_con5 {border-top: 1px solid #F2F2F2; margin-top: 50px; padding-top: 60px;}
.chall_wrap .chall_btn {margin: 50px auto 0; text-align: center;}
.chall_wrap .chall_btn.on a {opacity: .6; pointer-events:none;}
.chall_wrap .chall_btn a {display: inline-block;}



.newme_common {text-align: center;}
.newme_common section {text-align: left;}

.newme_common .com_top_wrap .comp_top {background: url(/images/newme_bg.png) no-repeat center 0; background-size: cover; text-align: center; padding-bottom: 35%; position: relative;}
.newme_common .com_top_wrap .newme_com_top {margin-top: -25%; position: relative; z-index: 1; margin-bottom: 30px;}

.newme_common  .comp_txt {margin-bottom: 80px;}
.newme_common  .comp_txt p {margin-bottom: 20px;}
.newme_common  .comp_txt p span {font-family: var(--font-sb);}

.newme_common  .comp_btn {margin-bottom: 100px;}
.newme_common  .comp_btn a {display: inline-block; margin: 0 10px;}
.newme_common  .comp_btn a.go_home {margin-top: 100px;}

.newme_common_pop {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 300px; z-index: 999999; background-color: #fff; padding: 20px; display: none;}
.newme_common_pop .comp_btn {margin-bottom: 0;}
.newme_common_pop p {color: #414042; margin: 20px 0;}
.newme_common_pop span {font-family: var(--font-sb);}
.newme_common_dim {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99999; display: none;}



.vote_wrap .chall_dot {position: relative; padding-left: 10px;}
.vote_wrap .chall_dot::before {position: absolute; content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #414042; top: 50%; left: 0; transform: translateY(-50%);}
.vote_wrap .chall_dot i {color: #414042;}

.vote_wrap .vote_box {background-color: #F3F3F3; display: inline-block; margin-top: 20px; border-radius: 10px; padding: 20px 15px; text-align: center;}
.vote_wrap .vote_box > p {font-family: var(--font-sb); margin-bottom: 20px;}
.vote_wrap .vote_box ul {display: flex;}
.vote_wrap .vote_box ul li span {font-family: var(--font-sb); display: inline-block; margin-bottom: 5px; width: 100%;}
.vote_wrap .vote_btn {width: 120px; height: 30px; line-height: 30px; border-radius: 20px; border: 1px solid #000; display: inline-block; text-align: center;}
.vote_wrap .border_btn {background-color: #fff;}
.vote_wrap .black_btn {background-color: #000; color: #fff;}

.vote_wrap .chall_con2 {border-bottom: 1px solid #F2F2F2; margin-bottom: 50px; padding-bottom: 60px;}

.vote_wrap .chall_con_ba {text-align: center; border-bottom: 1px solid #f2f2f2; padding-bottom: 60px; margin-bottom: 20px;}
.vote_wrap .vote_check {position:relative;display:inline-block; cursor: pointer; margin-bottom: 30px;}
.vote_wrap .vote_check input {display: none;}
.vote_wrap .vote_check input:checked+.vote_btn {background:#000;color:#fff;}



.vote_wrap .chall_con_ba ul li {position: relative;}
.vote_wrap .chall_con_ba ul li:nth-of-type(2n-1)::after {content: "▶"; display: inline-block; color: #000; position: absolute; right: -10px; top: 0;}

.vote_wrap .chall_sticky {background-color: #000; color: #C8AF66; position: sticky; text-align: center; font-size: 18px; top: 50px; z-index: 1; padding: 15px; margin-bottom: 60px;}   


.vote_cwrap .comp_btn a.go_home {margin-top: 0px;}



/* 태블릿 */
@media screen and (max-width: 1200px) {
    .nm_detail_btn {bottom: 40px;}

    .comp_wrap .com_top_wrap .newme_com_top {margin-top: -31%;}

    .newme_common {max-width: 100%; width: 100%;}
}
/* 모바일 */
@media screen and (max-width: 767px) {
    .newme_common .nm_detail_btn {bottom: 40px;}

    .chall_wrap .chall_top {padding: 30px 0;}
    .chall_wrap .chall_top p {font-size: 26px; padding: 5px 10px; border-top: 3px solid #e0c984; border-bottom: 3px solid #e0c984; margin-bottom: 5px; letter-spacing: -1px;}
    .chall_wrap .chall_top p i {font-size: 26px;  letter-spacing: -1px;}
    .chall_wrap .chall_top p b {font-size: 26px;  letter-spacing: -1px;}
    .chall_wrap .chall_top span {font-size: 18px;}

    .chall_wrap .chall_con1 .newme_box textarea {height: 160px;}

    .chall_wrap .chall_con_ba ul {flex-wrap: wrap;}
    .chall_wrap .chall_con_ba ul li {width: calc((100% - 2px)/2); margin-bottom: 30px;}
    .chall_wrap .chall_con_ba ul li:nth-of-type(2n) {margin-right: 0;}
    .chall_wrap .chall_con_ba ul li:nth-of-type(3) {margin-bottom: 0;}
    .chall_wrap .chall_con_ba ul li:nth-of-type(4) {margin-bottom: 0;}

    .chall_wrap .chall_con4 {display: inline-block; width: 100%;}
    .chall_wrap .chall_con4 .upload_section {width: 100%; margin-right: 0; margin-bottom: 30px;}
    .chall_wrap .chall_con4 .upload_section:nth-of-type(3) {margin-bottom: 30px;}
    .chall_wrap .chall_con4 .upload_section:nth-of-type(4) {margin-bottom: 30px;}

    .chall_wrap .chall_con4 .delete_btn {font-size: 30px;}
    .chall_wrap .chall_con5 {margin-top: 0; padding-top: 40px;}

    .comp_wrap .com_top_wrap .comp_top {padding-bottom: 60%;}
    .comp_wrap .com_top_wrap .newme_com_top {width: 80%; margin-top: -56%;}

    .newme_common .comp_btn {display: flex; justify-content: center;}
    .newme_common .comp_btn a img {width: 100%;}

    .vote_wrap .vote_box {width: 100%;}

}