/* --------------------------------mission list-------------------------------- */
section[data-layout="list"] .list >li >a {display:flex;flex-direction:row;align-content:center;border-radius:3vw;overflow: hidden;}
section[data-layout="list"] .list >li:not(:last-child) {margin-bottom:3.2vw}
section[data-layout="list"] .list figure {width:21.2vw;height:25.6vw;background-size:cover;background-repeat:no-repeat;background-position:center}
section[data-layout="list"] .list .text_box {display:flex;align-items:center;gap:0;flex:1 0 0}
section[data-layout="list"] .title_wrap {width:100%;padding:3.2vw 2.4vw;max-height:25.6vw}
section[data-layout="list"] .title_wrap .list_tit {color:#222;font-size:3vw;font-weight:500;line-height:142%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;word-break:break-all}
section[data-layout="list"] .title_wrap .data_box {flex-wrap: wrap; gap: 1.2vw 4vw; margin:2.4vw 0 0}
section[data-layout="list"] .data_box .parti {width: 100%;}
section[data-layout="list"] .data_box .like::after {content:"";position:absolute;right:-2vw;top:50%;width:.2vw;height:2vw;background-color:#969CB2;transform:translateY(-50%);opacity:.5}
section[data-layout="list"] .data_box .like i {background-image:url(/public/front/images/main/ico_like_grey.svg)}
section[data-layout="list"] .data_box .cmt i {background-image:url(/public/front/images/main/ico_cmt_grey.svg)}
section[data-layout="list"] .end_wrap {margin-top:3.2vw}
@media only screen and (max-width:500px) {
    section[data-layout="list"] .list >li >a {border-radius:15px;}
    section[data-layout="list"] .list >li:not(:last-child) {margin-bottom:16px}
    section[data-layout="list"] .list figure {width:106px;height:128px}
    section[data-layout="list"] .title_wrap {padding:16px 12px;max-height:128px}
    section[data-layout="list"] .title_wrap .list_tit {font-size:15px}
    section[data-layout="list"] .title_wrap .data_box {gap: 6px 20px;margin:12px 0 0}
    section[data-layout="list"] .data_box .like::after {right:-12px;width:1px;height:10px}
    section[data-layout="list"] .end_wrap {margin-top:16px}
}
/* --------------------------------mission list end-------------------------------- */


/* --------------------------------detail common-------------------------------- */
/*텍스트입력*/
section[data-layout="detail"] .input_wrap {margin-bottom: 0;}
/*참여자수*/
section[data-layout="detail"] .parti_num_wrap {display: flex; align-items: center; gap: 1.6vw; margin-bottom: 3.2vw;}
section[data-layout="detail"] .parti_num_wrap::before {content: ""; display: block; width: 10vw; height: 6.8vw; background: url(/public/front/images/etc/pf_char_multi.svg) no-repeat center/100% auto;}
section[data-layout="detail"] .parti_num_wrap p {font-size: 2.8vw; line-height: 100%;}
section[data-layout="detail"] .parti_num_wrap span {font-weight: 700}
section[data-layout="detail"] .lik_save_btn_wrap .parti_num_wrap {margin-bottom: 0;}
section[data-layout="detail"] .lik_save_btn_wrap .parti_num_wrap[data-layout="my"] {padding-top: 4vw;}
section[data-layout="detail"] .lik_save_btn_wrap .parti_num_wrap[data-layout="my"]::before {display: none;}
section[data-layout="detail"] .lik_save_btn_wrap .parti_num_wrap[data-layout="my"] figure {width: 6.8vw; height: 6.8vw; background-size: 100% auto; background-repeat: no-repeat; background-position: center;}
/*참여내역 리스트*/
section[data-layout="detail"] [class^="history_"] >li:not(:last-child) {margin-bottom: 3.2vw;}
section[data-layout="detail"] [class^="history_"] >li {padding: 3.2vw; background-color: #F8F8F8; border-radius: 3vw;}
section[data-layout="detail"] [class^="history_"] .btn_opt {position: absolute; right: -2vw; top: 50%; width: 4.8vw; height: 4.8vw; background: url(/public/front/images/etc/ico_option.svg) no-repeat center/0.6vw auto; transform: translateY(-50%);}
section[data-layout="detail"] [class^="history_"] .opt_wrap {display: none; position: absolute; right: 0; top: 6vw; border: 0.2vw solid #E4E4E4; background-color: #fff; border-radius: 2vw; z-index: 10; box-shadow: 0 0.4vw 1.6vw 0 rgba(0, 0, 0, 0.11);}
section[data-layout="detail"] [class^="history_"] .opt_wrap li:not(:last-child) {border-bottom: 0.2vw solid #EBEBEB;}
section[data-layout="detail"] [class^="history_"] .opt_wrap [class^="btn_"] {display: block; width: 20.8vw; height: 8.4vw; line-height: 8.4vw; text-align: center; font-size: 2.8vw;}
/*참여내역 없음*/
section[data-layout="detail"] [class^="history_"] .no_history {padding: 4.8vw 3.2vw; text-align: center; font-size: 2.8vw; color: #757575; line-height: 100%;}
/*참여내역 수정*/
section[data-layout="detail"] .modi_history .cmt_body {padding-left: 0;}
section[data-layout="detail"] .modi_history .flex_wrap {display: flex; align-items: flex-end; gap: 1.6vw; width: 100%;}
section[data-layout="detail"] .modi_history textarea {flex: 1; height: 26.8vw; padding: 2.4vw 3.2vw; border-radius: 2vw; border: 0.2vw solid #E4E4E4; line-height: 156%; background-color: #fff; resize: none;}
section[data-layout="detail"] .modi_history .btn_cmt {width: 10vw; height: 9.2vw; border-radius: 2.4vw; font-size: 2.8vw; font-weight: 600; background-color: #DD3636; color: #fff;}
/*연관컨텐츠*/
section[data-layout="detail"] .rec_wrap .label_wrap {margin-bottom: 0.8vw;}
/*타이틀*/
section[data-layout="detail"] .ico_title {position: relative; padding: 5.2vw 3.2vw 4.8vw; font-size: 2.8vw; border-radius: 3vw; border: 0.8vw solid #D6E4FF; background-color: #F9FBFF; color: #313647; font-weight: 500; line-height: 142%; text-align: center;}
section[data-layout="detail"] .ico_title::after {content: ""; position: absolute; left: 50%; top: -3.2vw; width: 7.2vw; height: 7.2vw; transform: translateX(-50%);}
@media only screen and (max-width:500px) {
    /*참여자수*/
    section[data-layout="detail"] .parti_num_wrap {gap: 8px; margin-bottom: 16px;}
    section[data-layout="detail"] .parti_num_wrap::before {width: 50px; height: 34px;}
    section[data-layout="detail"] .parti_num_wrap p {font-size: 14px;}
    section[data-layout="detail"] .lik_save_btn_wrap .parti_num_wrap[data-layout="my"] {padding-top: 20px;}
    section[data-layout="detail"] .lik_save_btn_wrap .parti_num_wrap[data-layout="my"] figure {width: 34px; height: 34px;}
    /*참여내역 리스트*/
    section[data-layout="detail"] [class^="history_"] >li:not(:last-child) {margin-bottom: 16px;}
    section[data-layout="detail"] [class^="history_"] >li {padding: 16px;border-radius: 15px;}
    section[data-layout="detail"] [class^="history_"] .btn_opt {right: -10px; width: 24px; height: 24px; background: url(/public/front/images/etc/ico_option.svg) no-repeat center/3px auto;}
    section[data-layout="detail"] [class^="history_"] .opt_wrap {top: 30px; border: 1px solid #E4E4E4; border-radius: 10px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.11);}
    section[data-layout="detail"] [class^="history_"] .opt_wrap li:not(:last-child) {border-bottom: 1px solid #EBEBEB;}
    section[data-layout="detail"] [class^="history_"] .opt_wrap [class^="btn_"] {width: 104px; height: 42px; line-height: 42px; font-size: 14px;}
    /*참여내역 없음*/
    section[data-layout="detail"] [class^="history_"] .no_history {padding: 24px 16px; font-size: 14px;}
    /*참여내역 수정*/
    section[data-layout="detail"] .modi_history .flex_wrap {gap: 8px;}
    section[data-layout="detail"] .modi_history textarea {height: 134px; padding: 12px 16px; border-radius: 10px; border: 1px solid #E4E4E4;}
    section[data-layout="detail"] .modi_history .btn_cmt {width: 50px; height: 46px; border-radius: 12px; font-size: 14px;}
    /*연관컨텐츠*/
    section[data-layout="detail"] .rec_wrap .label_wrap {margin-bottom: 4px;}
    /*타이틀*/
    section[data-layout="detail"] .ico_title {padding: 26px 16px 24px; font-size: 14px; border-radius: 15px; border: 4px solid #D6E4FF;}
    section[data-layout="detail"] .ico_title::after {top: -16px; width: 36px; height: 36px;}
}
/* --------------------------------detail common end-------------------------------- */


/* --------------------------------미션 detail-------------------------------- */
/*투표미션*/
.vote_wrap .ico_title {margin-bottom: 3.2vw;}
.vote_wrap .ico_title::after {background: url(/public/front/images/mission/ico_question.svg) no-repeat center/contain;}
.vote_wrap .radio_wrap li:not(:last-child) {margin-bottom: 1.6vw;}
.vote_wrap .input_wrap[data-layout="radio"] input + label {display: block; padding: 2.4vw 9.2vw 2.4vw 3.2vw; border: 0.2vw solid #F4F6F9; line-height: 156%; background-color: #F4F6F9; border-radius: 2vw; font-weight: 500; color: #61687C;}
.vote_wrap .input_wrap[data-layout="radio"] input,
.vote_wrap .input_wrap[data-layout="radio"] input + label span {left: auto; right: 3.2vw;}
.vote_wrap .input_wrap[data-layout="radio"] input + label span {background-image: url(/public/front/images/common/ico_checkbox_off_blue.svg);}
.vote_wrap .input_wrap[data-layout="radio"] input:checked + label {border: 0.2vw solid #F0A4A4; background-color: #FFF5F5; color: #222;}
.vote_wrap .input_wrap[data-layout="radio"] input:checked + label span {background-image: url(/public/front/images/common/ico_checkbox_on.svg);}
.vote_wrap .result_wrap li {display: flex; justify-content: space-between; align-items: center; position: relative; padding: 2.4vw 3.2vw; border: 0.2vw solid #EEC1C1; border-radius: 2vw; z-index: 1; overflow: hidden;}
.vote_wrap .result_wrap li:not(:last-child) {margin-bottom: 1.6vw;}
.vote_wrap .result_wrap .bg {position: absolute; left: 0; top: 0; max-width: 100%; height: 100%; background-color: #FFE9E9; z-index: -1;}
.vote_wrap .result_wrap li.on  {border: 0.4vw solid #DD3636;}
.vote_wrap .result_wrap h5 {width: calc(100% - 26vw); line-height: 156%; font-size: 2.8vw; font-weight: 500; color: #222;}
.vote_wrap .result_wrap div {display: flex; justify-content: right; align-items: center; gap: 1.2vw; width: 24vw;}
.vote_wrap .result_wrap h6 {width: 7vw; height: 4vw; line-height: 4vw; background-color: #DD3636; border-radius: 10vw; font-size: 2.4vw; color: #fff; font-weight: 700; text-align: center;}
.vote_wrap .result_wrap p {font-weight: 700; line-height: 100%; color: #222; font-size: 2.8vw;}
.vote_wrap .vote_sub_title {margin: 4.8vw 0 3.2vw; font-size: 2.8vw;color: #222; font-weight: 500; line-height: 100%;}
.vote_wrap .vote_sub_title span {color: #757575;}
.vote_wrap .vote_sub_title .emoji {height: 2.8vw;}
/*영상시청미션*/
.video_wrap{position:relative; width:100%;margin-bottom: 0;}
.video_wrap li:not(:last-child) {margin-bottom: 8vw;}
.video_youtube {position:relative; width:100%; padding-bottom:56.25%;}
.video_youtube iframe{position:absolute; width:100%; height:100%;}
/*ox퀴즈미션*/
.quiz_wrap[data-layout="ox"] >li:not(:last-child) {margin-bottom: 8vw;}
.quiz_wrap[data-layout="ox"] .ico_title::after {background: url(/public/front/images/mission/ico_question.svg) no-repeat center / contain;}
.quiz_wrap[data-layout="ox"] .quiz_box {margin-top: 3.2vw;}
.quiz_wrap[data-layout="ox"] ul {display: flex; gap: 1.6vw;}
.quiz_wrap[data-layout="ox"] li {position: relative; flex: 1;}
.quiz_wrap[data-layout="ox"] li label {position: relative; display: block; width: 100%; padding: 5vw 0; background-color: #F4F6F9; text-align: center; font-size: 6.8vw; font-weight: 700; color: #757575; line-height: 100%; border: 0.4vw solid #E5E9F0; border-radius: 3vw; cursor: pointer; z-index: 1}
.quiz_wrap[data-layout="ox"] li input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; appearance: none;}
.quiz_wrap[data-layout="ox"] li input:checked + label {border: 0.4vw solid #DD3636; background-color: #FFF5F5; color: #DD3636;}
.answer_wrap {margin-top: 3.2vw}
.answer_wrap >div {padding: 6.4vw 3.2vw; background-color: #F9FBFF; border: 0.8vw solid #D6E4FF; border-radius: 3vw; text-align: center;}
.answer_wrap figure {width: 20.4vw; margin: 0 auto;}
.answer_wrap figure img {width: 100%;}
.answer_wrap h6 {position: relative; display: inline-block; margin: 2.4vw 0; color: #313647; font-weight: 700; line-height: 100%; font-size: 3.2vw; z-index: 1;}
.answer_wrap h6::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.4vw; border-radius: 10vw; background-color: #E2ECFF; z-index: -1;}
.answer_wrap p {font-size: 2.8vw; color: #414658; line-height: 156%;}
/*주관식퀴즈미션*/
.quiz_wrap[data-layout="short"] > li:not(:last-child) {margin-bottom: 8vw;}
.quiz_wrap[data-layout="short"] .ico_title{line-height:180%}
.quiz_wrap[data-layout="short"] .ico_title::after {background: url(/public/front/images/mission/ico_question.svg) no-repeat center / contain;}
/*주관식퀴즈미션 빈칸 UI*/
.quiz_wrap[data-layout="short"] .quiz_blank_wrap{display:inline-flex;align-items:center;gap:.8vw;margin:.2vw .8vw;vertical-align:middle}
.quiz_wrap[data-layout="short"] .quiz_blank_box{display:inline-block;width:6vw;height:6vw;border:.2vw solid #BFD3FF;border-radius:1.5vw;background-color:#fff;box-sizing:border-box}
/*객관식퀴즈미션*/
.choice_wrap .ico_title {margin-bottom: 3.2vw;}
.choice_wrap .ico_title::after {background: url(/public/front/images/mission/ico_question.svg) no-repeat center/contain;}
.choice_wrap .radio_wrap li:not(:last-child) {margin-bottom: 1.6vw;}
.choice_wrap .input_wrap[data-layout="radio"] input + label {display: block; padding: 2.4vw 9.2vw 2.4vw 3.2vw; border: 0.2vw solid #F4F6F9; line-height: 156%; background-color: #F4F6F9; border-radius: 2vw; font-weight: 500; color: #61687C;}
.choice_wrap .input_wrap[data-layout="radio"] input,
.choice_wrap .input_wrap[data-layout="radio"] input + label span {left: auto; right: 3.2vw;}
.choice_wrap .input_wrap[data-layout="radio"] input + label span {background-image: url(/public/front/images/common/ico_checkbox_off_blue.svg);}
.choice_wrap .input_wrap[data-layout="radio"] input:checked + label {border: 0.2vw solid #F0A4A4; background-color: #FFF5F5; color: #222;}
.choice_wrap .input_wrap[data-layout="radio"] input:checked + label span {background-image: url(/public/front/images/common/ico_checkbox_on.svg);} .choice_wrap .result_wrap li {display: flex; justify-content: space-between; align-items: center; position: relative; padding: 2.4vw 3.2vw; border: 0.2vw solid #EEC1C1; border-radius: 2vw; z-index: 1; overflow: hidden;}
.choice_wrap .result_wrap li:not(:last-child) {margin-bottom: 1.6vw;}
.choice_wrap .result_wrap li.on {border: 0.4vw solid #DD3636; background-color: #FFF5F5;}
.choice_wrap .result_wrap li.on::after {content:''; display:block; position: absolute; left: unset; top: 50%; width: 4vw; height: 4vw; transform: translateY(-50%); right: 3.2vw; background: url(/public/front/images/common/ico_checkbox_on.svg) no-repeat center/100% auto}
.choice_wrap .result_wrap {margin-top: 3.2vw}
.choice_wrap .result_wrap >div {padding: 6.4vw 3.2vw; background-color: #F9FBFF; border: 0.8vw solid #D6E4FF; border-radius: 3vw; text-align: center;}
.choice_wrap .result_wrap h5 {position: relative; display: inline-block; margin: 0 ; color: #313647; font-weight: 700; line-height: 100%; font-size: 3.2vw; z-index: 1;}
.choice_wrap .result_wrap p {font-size: 2.8vw; color: #414658; line-height: 156%;}
.choice_wrap .answer_wrap h6 {margin: 0}
@media only screen and (max-width:500px) {
    .quiz_wrap[data-layout="short"] .quiz_blank_wrap{gap:4px;margin:1px 4px}
    .quiz_wrap[data-layout="short"] .quiz_blank_box{width:24px;height:24px;border:1px solid #BFD3FF;border-radius:6px}
}
/*약속하기미션*/
.promise_wrap .ck_wrap {margin-top: 4.8vw;}
.promise_wrap .ck_wrap li:not(:last-child) {margin-bottom: 1.6vw;}
.promise_wrap .ico_title::after {background: url(/public/front/images/mission/ico_promise.svg) no-repeat center/contain;}
.promise_wrap .input_wrap[data-layout="checkbox"] input {left: auto; right: 3.2vw;}
.promise_wrap .input_wrap[data-layout="checkbox"] input + label {display: block; padding: 2.4vw 9.2vw 2.4vw 3.2vw; border: 0.2vw solid #F4F6F9; line-height: 156%; border-radius: 2vw; font-weight: 500; color: #61687C;}
.promise_wrap .input_wrap[data-layout="checkbox"] input + label span {left: auto; right: 3.2vw; background-image: url(/public/front/images/common/ico_checkbox_off_blue.svg); background-color: transparent;}
.promise_wrap .input_wrap[data-layout="checkbox"] input:checked {background-color: transparent;}
.promise_wrap .input_wrap[data-layout="checkbox"] input:checked + label {border: 0.2vw solid #F0A4A4; background-color: #FFF5F5; color: #222;}
.promise_wrap .input_wrap[data-layout="checkbox"] input:checked + label span {background-image: url(/public/front/images/common/ico_checkbox_on.svg);}
@media only screen and (max-width:500px) {
    /*투표미션*/
    .vote_wrap .ico_title {margin-bottom: 16px;}
    .vote_wrap .radio_wrap li:not(:last-child) {margin-bottom: 8px;}
    .vote_wrap .input_wrap[data-layout="radio"] input + label {padding: 12px 46px 12px 16px; border: 1px solid #F4F6F9; border-radius: 10px;}
    .vote_wrap .input_wrap[data-layout="radio"] input,
    .vote_wrap .input_wrap[data-layout="radio"] input + label span {right: 16px;}
    .vote_wrap .input_wrap[data-layout="radio"] input:checked + label {border: 1px solid #F0A4A4;}
    .vote_wrap .result_wrap li {padding: 12px 16px; border: 1px solid #EEC1C1; border-radius: 10px;}
    .vote_wrap .result_wrap li:not(:last-child) {margin-bottom: 8px;}
    .vote_wrap .result_wrap li.on  {border: 2px solid #DD3636;}
    .vote_wrap .result_wrap h5 {width: calc(100% - 130px); font-size: 14px;}
    .vote_wrap .result_wrap div {gap: 6px; width: 120px;}
    .vote_wrap .result_wrap h6 {width: 35px; height: 20px; line-height: 20px; border-radius: 50px; font-size: 12px;}
    .vote_wrap .result_wrap p {font-size: 14px;}
    .vote_wrap .vote_sub_title {margin: 24px 0 16px; font-size: 14px;}
    .vote_wrap .vote_sub_title .emoji {height: 14px;}
    /*영상시청미션*/
    .video_wrap li:not(:last-child) {margin-bottom: 40px;}
    /*ox퀴즈미션*/
    .quiz_wrap[data-layout="ox"] >li:not(:last-child) {margin-bottom: 32px;}
    .quiz_wrap[data-layout="ox"] .quiz_box {margin-top: 3.2vw;}
    .quiz_wrap[data-layout="ox"] ul {gap: 8px}
    .quiz_wrap[data-layout="ox"] li label {padding: 25px 0; font-size: 34px; border: 2px solid #E5E9F0; border-radius: 15px;}
    .quiz_wrap[data-layout="ox"] li input:checked + label {border: 2px solid #DD3636;}
    .answer_wrap {margin-top: 16px;}
    .answer_wrap >div {padding: 32px 16px; border: 4px solid #D6E4FF; border-radius: 15px;}
    .answer_wrap figure {width: 102px;}
    .answer_wrap h6 {margin: 12px 0; font-size: 16px;}
    .answer_wrap h6::after {height: 7px; border-radius: 50px;}
    .answer_wrap p {font-size: 14px;}
    /*주관식퀴즈미션*/
    .quiz_wrap[data-layout="short"] > li:not(:last-child) {margin-bottom: 32px;}
    /*약속하기미션*/
    .promise_wrap .ck_wrap {margin-top: 24px;}
    .promise_wrap .ck_wrap li:not(:last-child) {margin-bottom: 8px;}
    .promise_wrap .input_wrap[data-layout="checkbox"] input {right: 16px;}
    .promise_wrap .input_wrap[data-layout="checkbox"] input + label {padding: 12px 46px 12px 16px; border: 1px solid #F4F6F9; border-radius: 10px;}
    .promise_wrap .input_wrap[data-layout="checkbox"] input + label span {right: 16px;}
    .promise_wrap .input_wrap[data-layout="checkbox"] input:checked + label {border: 1px solid #F0A4A4;}
    /*객관식퀴즈미션*/
    .choice_wrap .ico_title {margin-bottom: 16px;}
    .choice_wrap .radio_wrap li:not(:last-child) {margin-bottom: 8px;}
    .choice_wrap .input_wrap[data-layout="radio"] input + label {padding: 12px 46px 12px 16px; border: 1px solid #F4F6F9; border-radius: 10px;}
    .choice_wrap .input_wrap[data-layout="radio"] input,
    .choice_wrap .input_wrap[data-layout="radio"] input + label span {right: 16px;}
    .choice_wrap .input_wrap[data-layout="radio"] input:checked + label {border: 1px solid #F0A4A4;}
    .choice_wrap .result_wrap li {padding: 12px 16px; border: 1px solid #EEC1C1; border-radius: 10px;}
    .choice_wrap .result_wrap li:not(:last-child) {margin-bottom: 8px;}
    .choice_wrap .result_wrap li.on  {border: 2px solid #DD3636;}
    .choice_wrap .result_wrap li.on::after {right: 16px; width: 20px; height: 20px;}
    .choice_wrap .result_wrap {margin-top: 16px;}
    .choice_wrap .result_wrap >div {padding: 32px 16px; border: 4px solid #D6E4FF; border-radius: 15px;}
    .choice_wrap .result_wrap h5 {margin: 0; font-size: 16px;}
    .choice_wrap .result_wrap p {font-size: 14px;}
    .choice_wrap .answer_wrap h6 {margin: 0}
}
/* --------------------------------미션 detail end-------------------------------- */


/* --------------------------------장기미션 detail-------------------------------- */
/*참여버튼*/
section[data-term="long"] .btn_parti.off .camera {display: inline-block; background-image: url(/public/front/images/mission/ico_camera_off.svg);}
/*참여내역옵션*/
section[data-term="long"] [class^="history_"] .btn_opt {top: -0.8vw; transform: translateY(0);}
section[data-term="long"] [class^="history_"] .opt_wrap {top: 4vw;}
/*참여달력*/
.calendar {position: relative; width: 100%;}
.calendar::after,
.calendar::before {content: ""; position: absolute; top: 0; width: 3.2vw; height: 8vw; transform: translateY(-50%); background: url(/public/front/images/mission/calendar_top.svg) no-repeat center/100% auto}
.calendar::after {left: 8vw;}
.calendar::before {right: 8vw}
.calendar_title {width: 100%; padding: 3.2vw 0; background-color: #E8EEFF; border-radius: 8vw 8vw 0 0; border: 0.6vw solid #D6E1FF; text-align: center;}
.calendar_title .underline {position: relative; display: inline-block;}
.calendar_title .underline::before {content: ""; position: absolute; left: 50%; bottom: 0; width: 110%; height: 1.4vw; border-radius: 10vw; background-color: #FFFBD3; transform: translateX(-50%); z-index: 0;}
.calendar_title h6 {position: relative; display: inline-block; font-size: 3.2vw; font-weight: 500; color: #313647; z-index: 1}
.calendar_title span {font-weight: 700}
.calendar_cont {padding: 4.8vw 3.2vw 6.4vw 3.2vw; border: 0.6vw solid #D6E1FF; border-top: 0; border-radius: 0 0 8vw 8vw; background-color: #F8F9FF;}
.calendar_cont ul {display: flex; flex-wrap: wrap; gap: 3.6vw;}
.calendar_cont li {position: relative; width: calc((100% - (3.6vw * 3))/4); height: 0; padding-bottom: 24.5%;}
.calendar_cont li {background: url(/public/front/images/mission/calendar_ele.webp) no-repeat center/100% auto;}
.calendar_cont li span {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-37.5%); text-align: center; color: #697397; font-weight: 500; font-size: 2.8vw;}
.calendar_cont .done::after {content: ""; position: absolute; left: 50%; top: 50%; width: 129%; height: 129%; background: url(/public/front/images/mission/calendar_ele_on.webp) no-repeat center/100% auto; transform: translate(-50%,-47.5%);}
.calendar_cont li:last-child.done::after {width: 141%; height: 141%; transform: translate(-48%,-48%); background: url(/public/front/images/mission/calendar_ele_on_last.webp) no-repeat center/100% auto;}
/*짝꿍미션도전*/
.partner_banner .parti_info {display: flex; gap: 1.6vw; align-items: center; margin-bottom: 3.2vw; padding: 3.2vw; border-radius: 3vw; background-color: #FFF5F5; border: 0.2vw solid #FFC6C6;}
.partner_banner .parti_info i {display: block; width: 8vw; height: 8vw; background: url(/public/front/images/mission/partner_info_img_05.webp) no-repeat center/100% auto;}
.partner_banner .parti_info p {flex: 1; font-size: 2.8vw; color: #444; font-weight: 500; line-height: 142%;}
.partner_banner .btn_parti {margin-bottom: 8vw;}
section[data-layout="detail"] .partner_banner .btn_parti span {display: flex; justify-content: center; align-content: center; gap: 0.4vw;}
.partner_banner .btn_parti span::after,
.partner_banner .btn_parti span::before {content: ""; display: block; width: 2.8vw; height: 2.8vw; background: url(/public/front/images/common/emoji_sparkle.webp) no-repeat center/100% auto;}
.partner_banner .no_parti_info {display: flex; align-items: center; justify-content: center;}
.partner_banner .no_parti_info p {position: relative; padding: 2vw 3.2vw; border-radius: 10vw; background-color: #EBEBEB; font-size: 3.2vw; font-weight: 500; color: #525252;}
.partner_banner .no_parti_info p::after {content: ""; position: absolute; left: 50%; bottom: -1.6vw; width: 3.2vw; height: 3.2vw; background: url(/public/front/images/mission/ico_polygon.svg) no-repeat center/100% auto; transform: translateX(-50%);}

.partner_info_wrap { display: flex; flex-direction: row; align-items: flex-start; padding: 2.4vw 3.2vw; margin: 0 0 4.8vw; gap: 2vw; background: #FAFBFF; border: .2vw solid #E6E8FD; border-radius: 3vw; font-size: 2.4vw; line-height: 1.5; color: #414658;}
.partner_info_wrap dt { flex-shrink: 0; display: flex; gap: .8vw; font-weight: 600; font-size: 2.8vw; line-height: 1; color: #313647; align-items: center;}
.partner_info_wrap dt::before { content: ""; width: 3.6vw; height: 3.4vw; background: url(/public/front/images/common/ico_notice.svg) no-repeat center;}
.partner_info_wrap dd { flex: 1;}
.partner_banner .btn_wrap,
.partner_completed_wrap .btn_wrap { display: flex; gap: 1.6vw; align-items: center; justify-content: center;}
.partner_banner .btn_wrap>div,
.partner_completed_wrap .btn_wrap>div { position: relative; flex: 1 1 0;}
.partner_banner .btn_wrap .btn_round,
.partner_completed_wrap .btn_wrap .btn_round { width: 100%; height: 100%; padding: 4.2vw 0; border-radius: 3vw; font-weight: 700; font-size: 3.2vw; line-height: 1; color: #fff; background: #DD3636;}
.partner_banner .btn_wrap .btn_round span,
.partner_completed_wrap .btn_wrap .btn_round span { display: block; margin-top: 1.2vw; font-weight: 500; font-size: 2.8vw;}
.partner_banner .btn_wrap .btn_round.line,
.partner_completed_wrap .btn_wrap .btn_round.line { padding: 3.6vw 0; background: #fff; color: #DD3636; border: .6vw solid #DD3636;}
.partner_completed_wrap{padding-top: 48px; margin-bottom: 24px; border-top:1px dashed #ccc}
.partner_completed_wrap .box_round_wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; margin: 0 0 24px; gap: 6px; background: #FFF5F5; border-radius: 10px; color: #444; font-size: 12px; line-height: 1.5;}
.partner_completed_wrap .box_round_wrap .sub_title{ font-weight: 600; font-size: 16px; line-height: 1;   color: #222;}
.partner_completed_wrap .img_wrap{ width: 298px; aspect-ratio: 298/142; margin: auto; padding: 0 0 24px;}
.partner_completed_wrap .img_wrap img{ width: 100%;}
.partner_wrap .tooltip_bubble { padding: 0 3vw 1.8vw; font-size: 2vw; font-weight: 500; line-height: 1.3; overflow: visible; position: absolute; top: -2vw; left: 1vw; transform: translate(0); transition: .2s ease-in-out;}

/*매칭된미션참여내역*/
.matching .emoji {height: 3.2vw;}
.matching .bg {position: relative; z-index: 1;}
.matching .bg::before {content: ""; position: absolute; left: 50%; top: 0; width: 115%; height: 100%; background-color: #F6F7FE; z-index: -1; transform: translateX(-50%)}
.matching .title_wrap {padding: 4.8vw 0; text-align: center; color: #313647;}
.matching .title_wrap::before {border-radius: 12vw 12vw 0 0; background-color: #E8EEFF;}
.matching .title_wrap h4 {margin-bottom: 1.6vw; font-size: 3.2vw; line-height: 100%;}
.matching .title_wrap h4 span {font-weight: 600}
.matching .title_wrap h3 {font-size: 3.6vw; line-height: 100%; font-weight: 500;}
.matching .title_wrap h3 span {font-weight: 700}
.matching .user {display: flex; padding: 4.8vw 0;}
.matching .user li {position: relative; flex: 1; text-align: center;}
.matching .user li:first-child::after {content: ""; position: absolute;  right: 0; top: 50%; width: 0.4vw; height: 100%; border-radius: 4vw; background-color: #DDE4F8; transform: translateY(-50%);}
.matching .user > figure {width: 11.2vw; height: 11.2vw; margin: 0 auto; background-size: 100% auto; background-repeat: no-repeat; background-position: center;}

.matching .user .img_pf_wrap { position: relative; margin: 0 auto; width: 11.4vw; height: 11.4vw; }
.matching .user .img_pf_wrap .img { width: 11.4vw; height: 11.4vw;}
.matching .user .img_pf_wrap .badge { bottom: -1.2vw; right: -2.8vw; width: 6.8vw; height: 6.8vw; z-index: 1;}

.matching .user h6 {margin: 2.4vw 0 1.6vw 0; font-size: 3.2vw; color: #222; font-weight: 600; line-height: 100%;}
.matching .user p {display: inline-block; width: 8vw; height: 4.4vw; line-height: 4.4vw; font-size: 2.4vw; border-radius: 10vw; border: 0.2vw solid #B3B8D8; font-weight: 500; color: #6C708F;}
.matching .history li {position: relative; display: flex; width: 100%; border-radius: 3vw; background-color: #fff; box-shadow: 0 1.2vw 4vw 0 rgba(17, 19, 71, 0.06);}
.matching .history li:not(:last-child) {margin-bottom: 3.2vw;}
.matching .history li::after {content: ""; position: absolute; left: 50%; top: 2.4vw; width: 0.2vw; height: calc(100% - (2.4vw * 2)); background-color: #F3F5FD; transform: translateX(-50%);}
.matching .history .history_ele {position: relative; flex: 1; padding: 2.4vw;}
.matching .history .round {position: absolute; right: 2.4vw; top: 2.4vw; width: 8vw; height: 4.8vw; line-height: 4.8vw; background-color: #F6F6F6; color: #666; font-size: 2.4vw; font-weight: 600; border-radius: 10vw; text-align: center;}
.matching .history figure {position: relative; width: calc(100% - 8vw - 1.6vw); height: 4.8vw; border-radius: 2vw; background-size: 5.6vw auto; background-repeat: no-repeat; background-position: center; background-image: url(/public/front/images/mission/partner_history_logo.svg); background-color: #F8F8F8;}
.matching .history figure button {display: block; width: 100%; height: 100%;}
.matching .history .text_box {margin-top: 2.4vw;}
.matching .history p {margin-bottom: 1.6vw; font-size: 2.2vw; color: #757575; line-height: 100%;}
.matching .history h4 {font-size: 2.8vw; line-height: 130%;}
.matching .history h5 {color: #757575; font-size:2.4vw; font-weight: 500; line-height: 148%;}
.matching .history .btn_notice {display: flex; align-items: center; justify-content: center; gap: 0.4vw; width: 100%; padding: 1.6vw 0; border-radius: 1.2vw; background-color: #414658; color: #fff; font-size: 2.4vw; font-weight: 500;}
.matching .history .btn_notice::before {content: ""; width: 2.8vw; height: 2.8vw; background: url(/public/front/images/mission/ico_bell.svg) no-repeat center/auto 100%;}
.matching .history .on .history_ele {padding: 2.4vw 2.4vw 3.2vw;}
.matching .history .on figure {width: 11.2vw; height: 11.2vw; background-size: cover; background-image: url(/public/front/images/mission/partner_history_img.svg); background-color: transparent;}
.matching .history .retrieval figure::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/public/front/images/mission/ico_retrieval.svg) no-repeat center/4vw auto rgba(0, 0, 0, 0.6); border-radius: 2vw;}
.matching .history .done .round {background-color: #FFF1F1;  color: #8F5151;}
.matching .notice {padding: 6.4vw 0 11.2vw 0; text-align: center;}
.matching .notice::before {border-radius: 0 0 12vw 12vw;}
.matching .notice li:not(:last-child) {margin-bottom: 3.2vw;}
.matching .notice_01 >div {padding: 4vw 0; border-radius: 9.2vw 9.2vw 9.2vw 0; background-color: #E8EEFF; font-size: 2.8vw;}
.matching .notice_01 h6 {font-weight: 600; color: #313647; line-height: 120%;}
.matching .notice_01 p {margin-top: 0.8vw; line-height: 150%; color: #414658;}
.matching .notice_01 .end p {margin-top: 1.6vw;}
.matching .notice_02 figure {width: 6vw; height: 6vw; margin: 0 auto 1.6vw; border-radius: 100%; background: url(/public/front/images/common/ico_warning.svg) no-repeat center/4vw auto #F05959;}
.matching .notice_02 p {color: #5D6687; font-size: 2.8vw; line-height: 156%;}
.matching .notice_02 p:not(:last-child) {margin-bottom: 1.2vw;}
.matching .notice_02 .end figure {background-color: #3C7FE4;}
/*매칭된미션참여내역:단문,장문*/
.matching .history [data-layout="text"] .history_ele {padding: 3.6vw 2.4vw 3.2vw;}
.matching .history [data-layout="text"] .text_box {margin-top: 0;}
.matching .history [data-layout="text"] p {margin-bottom: 2.8vw;}
.matching .history [data-layout="text"] .btn_notice {margin-top: 1.6vw;}
/*매칭된미션참여내역:ox,영상*/
.matching .history [data-layout="ox"] .ox_box {display: inline-flex; flex-direction: column; gap: 0.4vw; flex-wrap: wrap; justify-content: center; width: 11.2vw; height: 11.2vw; border: 0.2vw solid #EBEBEB; background-color: #F3F3F3; border-radius: 2vw;}
.matching .history [data-layout="ox"] .ox_box::before {content: ""; display: block; width: 3.2vw; height: 3.2vw; margin: 0 auto; background: url(/public/front/images/mission/ico_check_grey.svg) no-repeat center/100% auto;}
.matching .history [data-layout="ox"] .ox_box h6 {font-size: 2.4vw; color: #CCC; font-weight: 600; line-height: 100%; text-align: center;}
.matching .history [data-layout="ox"] .text_box {margin-top: 1.6vw;}
.matching .history [data-layout="ox"] p {margin-bottom: 0;}
.matching .history [data-layout="ox"] .done .ox_box {border: 0.2vw solid #E4A6A6; background-color: #FFF5F5;}
.matching .history [data-layout="ox"] .done .ox_box::before {background: url(/public/front/images/mission/ico_check.svg) no-repeat center/100% auto;}
.matching .history [data-layout="ox"] .done .ox_box h6 {color: #C42F2F;}
@media only screen and (max-width:500px) {
    /*참여내역옵션*/
    section[data-term="long"] [class^="history_"] .btn_opt {top: -4px;}
    section[data-term="long"] [class^="history_"] .opt_wrap {top: 20px;}
    /*참여달력*/
    .calendar::after,
    .calendar::before {width: 16px; height: 40px;}
    .calendar::after {left: 40px;}
    .calendar::before {right: 40px;}
    .calendar_title {padding: 16px 0; border-radius: 40px 40px 0 0; border: 3px solid #D6E1FF;}
    .calendar_title .underline::before {height: 7px; border-radius: 50px;}
    .calendar_title h6 {font-size: 16px;}
    .calendar_cont {padding: 24px 16px 32px 16px; border: 3px solid #D6E1FF; border-top: 0; border-radius: 0 0 40px 40px;}
    .calendar_cont ul {gap: 18px}
    .calendar_cont li {width: calc((100% - (18px * 3))/4);}
    .calendar_cont li span {font-size: 14px;}
    /*짝꿍미션도전*/
    .partner_banner .parti_info {gap: 8px; margin-bottom: 16px; padding: 16px; border-radius: 15px; border: 1px solid #FFC6C6;}
    .partner_banner .parti_info i {width: 40px; height: 40px;}
    .partner_banner .parti_info p {font-size: 14px;}
    .partner_banner .btn_parti {margin-bottom: 40px;}
    section[data-layout="detail"] .partner_banner .btn_parti span {gap: 2px;}
    .partner_banner .btn_parti span::after,
    .partner_banner .btn_parti span::before {width: 14px; height: 14px;}
    .partner_banner .no_parti_info p {padding: 10px 16px; border-radius: 50px; font-size: 16px;}
    .partner_banner .no_parti_info p::after {bottom: -8px; width: 16px; height: 16px;}

    .partner_info_wrap { padding: 12px 16px; margin: 0 0 24px; gap: 10px; border-width: 1px; border-radius: 15px; font-size: 12px;}
    .partner_info_wrap dt { gap: 4px; font-size: 14px;}
    .partner_info_wrap dt::before { width: 18px; height: 17px;}
    .partner_banner .btn_wrap,
    .partner_completed_wrap .btn_wrap { gap: 8px;}
    .partner_banner .btn_wrap .btn_round,
    .partner_completed_wrap .btn_wrap .btn_round { padding: 21px 0; border-radius: 15px; font-size: 16px;}
    .partner_banner .btn_wrap .btn_round span,
    .partner_completed_wrap .btn_wrap .btn_round span { margin-top: 6px; font-size: 14px;}
    .partner_banner .btn_wrap .btn_round.line,
    .partner_completed_wrap .btn_wrap .btn_round.line { padding: 18px 0; border-width: 3px;}
    .partner_completed_wrap { padding-top: 48px; margin-bottom: 24px; border-top-width: 1px;}
    .partner_completed_wrap .box_round_wrap { padding: 16px; margin: 0 0 24px; gap: 6px; border-radius: 10px; font-size: 12px;}
    .partner_completed_wrap .box_round_wrap .sub_title { font-size: 16px;}
    .partner_completed_wrap .img_wrap { width: 298px; padding: 0 0 24px;}
    .partner_wrap .tooltip_bubble {padding: 0 15px 9px;font-size: 10px;top: -10px;transform: translate(0, 0);}
    .partner_wrap .tooltip_bubble_text {padding: 5px 0;}
    .partner_wrap .tooltip_bubble_tail {left: 26px;bottom: 1px;width: 16px;height: 9px;} 

    /*매칭된미션참여내역*/
    .matching .emoji {height: 16px;}
    .matching .title_wrap {padding: 24px 0;}
    .matching .title_wrap::before {border-radius: 60px 60px 0 0; background-color: #E8EEFF;}
    .matching .title_wrap h4 {margin-bottom: 8px; font-size: 16px;}
    .matching .title_wrap h3 {font-size: 18px;}
    .matching .user {padding: 24px 0;}
    .matching .user li:first-child::after {width: 2px; border-radius: 20px;}
    .matching .user > figure {width: 56px; height: 56px;}
    .matching .user .img_pf_wrap { width: 57px; height: 57px;}
    .matching .user .img_pf_wrap .img { width: 57px; height: 57px;}
    .matching .user .img_pf_wrap .badge { bottom: -6px; right: -14px; width: 34px; height: 34px;}
    .matching .user h6 {margin: 12px 0 8px 0; font-size: 16px;}
    .matching .user p {width: 40px; height: 22px; line-height: 22px; font-size: 12px; border-radius: 50px; border: 1px solid #B3B8D8;}
    .matching .history li {border-radius: 15px; box-shadow: 0 6px 20px 0 rgba(17, 19, 71, 0.06);}
    .matching .history li:not(:last-child) {margin-bottom: 16px;}
    .matching .history li::after {top: 12px; width: 1px; height: calc(100% - (12px * 2));}
    .matching .history .history_ele {padding: 12px;}
    .matching .history .round {right: 12px; top: 12px; width: 40px; height: 24px; line-height: 24px; font-size: 12px; border-radius: 50px;}
    .matching .history figure {width: calc(100% - 40px - 8px); height: 24px; border-radius: 10px; background-size: 28px auto;}
    .matching .history .text_box {margin-top: 12px;}
    .matching .history p {margin-bottom: 8px; font-size: 11px;}
    .matching .history h4 {font-size: 14px;}
    .matching .history h5 {font-size: 12px;}
    .matching .history .btn_notice {gap: 2px; padding: 8px 0; border-radius: 6px; font-size: 12px;}
    .matching .history .btn_notice::before {width: 14px; height: 14px;}
    .matching .history .on .history_ele {padding: 12px 12px 16px;}
    .matching .history .on figure {width: 56px; height: 56px;}
    .matching .history .retrieval figure::after {background: url(/public/front/images/mission/ico_retrieval.svg) no-repeat center/20px auto rgba(0, 0, 0, 0.6); border-radius: 10px;}
    .matching .notice {padding: 32px 0 56px 0; text-align: center;}
    .matching .notice::before {border-radius: 0 0 60px 60px;}
    .matching .notice li:not(:last-child) {margin-bottom: 16px;}
    .matching .notice_01 >div {padding: 20px 0; border-radius: 46px 46px 46px 0; font-size: 14px;}
    .matching .notice_01 p {margin-top: 4px;}
    .matching .notice_01 .end p {margin-top: 8px;}
    .matching .notice_02 figure {width: 30px; height: 30px; margin: 0 auto 8px; background: url(/public/front/images/common/ico_warning.svg) no-repeat center/20px auto #F05959;}
    .matching .notice_02 p {font-size: 14px;}
    .matching .notice_02 p:not(:last-child) {margin-bottom: 6px;}
    /*매칭된미션참여내역:단문,장문*/
    .matching .history [data-layout="text"] .history_ele {padding: 18px 12px 16px;}
    .matching .history [data-layout="text"] p {margin-bottom: 14px;}
    .matching .history [data-layout="text"] .btn_notice {margin-top: 8px;}
    /*매칭된미션참여내역:ox,영상*/
    .matching .history [data-layout="ox"] .ox_box {gap: 2px; width: 56px; height: 56px; border: 1px solid #EBEBEB; border-radius: 10px;}
    .matching .history [data-layout="ox"] .ox_box h6 {font-size: 12px;}
    .matching .history [data-layout="ox"] .ox_box::before {width: 16px; height: 16px;}
    .matching .history [data-layout="ox"] .text_box {margin-top: 8px;}
    .matching .history [data-layout="ox"] .done .ox_box {border: 1px solid #E4A6A6;}
}
/* --------------------------------장기미션 detail end-------------------------------- */


/* --------------------------------종료미션 detail-------------------------------- */
/*주관식퀴즈미션*/
/*[data-status="end"] .quiz_wrap[data-layout="short"] li {padding: 2.4vw 3.2vw; font-size: 2.8vw; line-height: 156%; border-radius: 2vw; font-weight: 500; background-color:#F6F7FE; border: 0.2vw solid #C8CDF3; color:#313647}*/
/*[data-status="end"] .quiz_wrap[data-layout="short"] li span {font-weight: 700}*/
/*@media only screen and (max-width:500px) {*/
/*    [data-status="end"] .quiz_wrap[data-layout="short"] li {padding: 12px 16px; font-size: 14px; border-radius: 10px; border: 1px solid #C8CDF3;}*/
/*}*/
/* --------------------------------종료미션 detail end-------------------------------- */


/* --------------------------------장기미션 내역 section-------------------------------- */
.history_sec_01[data-layout="detail"] {padding: 16vw 0 18vw 0;}
@media only screen and (max-width:500px) {
    .history_sec_01[data-layout="detail"] {padding: 80px 0 90px 0;}
}
/* --------------------------------장기미션 내역 section end-------------------------------- */


/* --------------------------------장기미션 업로드 section-------------------------------- */
[class^="upload_sec"] .title {font-size: 3.2vw; font-weight: 500; color: #222; line-height: 100%;}
[class^="upload_sec"] .title span {font-weight: 700;}
[class^="upload_sec"] .sub_title {font-size: 2.8vw; font-weight: 500; color: #222;}
[class^="upload_sec"] .desc {font-size: 2.4vw; color: #666; line-height: 100%;}
/*섹션1*/
.upload_sec_01[data-layout="list"] {padding-bottom: 16vw; min-height: auto;}
.upload_sec_01 .title {margin-bottom: 4.8vw;}
.upload_sec_01 .cont_wrap {margin-top: 4.8vw;}
/*섹션2*/
.upload_sec_02 {position: relative; margin-top: -8vw; padding: 8vw 0 18vw; border-radius: 8vw; z-index: 1; background-color: #fff;}
.upload_sec_02 .top {padding-bottom: 6.4vw; border-bottom: 0.2vw dashed #EBEBEB;}
.upload_sec_02 .title {margin-bottom: 1.6vw;}
.upload_sec_02 .desc {margin-bottom: 2.4vw;}
.upload_sec_02 .btn_popup {display: inline-flex; align-items: center; gap: 0.4vw; margin-bottom: 4.8vw; padding: 1.4vw 2vw; border-radius: 1.2vw; font-size: 2.4vw; font-weight: 500; color: #666; border: 0.2vw solid #666;}
.upload_sec_02 .btn_popup i {display: block; width: 2.8vw; height: 2.8vw; background: url(/public/front/images/main/ico_info.svg) no-repeat center/100% auto;}
.upload_sec_02 .bot {padding-top: 6.4vw;}
.upload_sec_02 .bot .sub_title {margin-bottom: 3.2vw;}
.upload_sec_02 .bot .input_wrap {margin-bottom: 6.4vw;}
/*이미지 등록*/
.upload_sec_02 .scroll_wrap {overflow-x: auto;}
.upload_sec_02 .scroll_wrap .flex_wrap {display: flex; flex-wrap: nowrap; gap: 1.6vw;}
.upload_sec_02 .scroll_wrap .input_wrap {margin-bottom: 0;}
@media only screen and (max-width:500px) {
    [class^="upload_sec"] .title {font-size: 16px;}
    [class^="upload_sec"] .sub_title {font-size: 14px;}
    [class^="upload_sec"] .desc {font-size: 12px;}
    /*섹션1*/
    .upload_sec_01[data-layout="list"] {padding-bottom: 80px;}
    .upload_sec_01 .title {margin-bottom: 24px;}
    .upload_sec_01 .cont_wrap {margin-top: 24px;}
    /*섹션2*/
    .upload_sec_02 {margin-top: -40px; padding: 40px 0 90px 0; border-radius: 40px;}
    .upload_sec_02 .top {padding-bottom: 32px; border-bottom: 1px dashed #EBEBEB;}
    .upload_sec_02 .title {margin-bottom: 8px;}
    .upload_sec_02 .desc {margin-bottom: 12px;}
    .upload_sec_02 .btn_popup {gap: 2px; margin-bottom: 24px; padding: 7px 10px; border-radius: 6px; font-size: 12px; border: 1px solid #666;}
    .upload_sec_02 .btn_popup i {width: 14px; height: 14px;}
    .upload_sec_02 .bot {padding-top: 32px;}
    .upload_sec_02 .bot .sub_title {margin-bottom: 16px;}
    .upload_sec_02 .bot .input_wrap {margin-bottom: 32px;}
    .upload_sec_02 .bot .input_wrap {margin-bottom: 6.4vw;}
    /*이미지 등록*/
    .upload_sec_02 .scroll_wrap .flex_wrap {gap: 8px;}
}
/* --------------------------------장기미션 업로드 section end-------------------------------- */


/* --------------------------------짝꿍미션 common-------------------------------- */
.partner_sec_01 .inner {width: 87%;}
.partner_sec_01 .box {padding: 8vw 0;}
.partner_sec_01 .box:not(:last-child) {border-bottom: 0.2vw dashed #E4E4E4;}
.partner_sec_01 .desc {font-size: 2.8vw; line-height: 156%;}
.partner_sec_01 .desc:not(:last-of-type) {margin-bottom: 1.6vw;}
.partner_sec_01 .img img {width: 100%;}
.partner_sec_01 .info_wrap li {display: flex; align-items: center; gap: 1.6vw;}
.partner_sec_01 .info_wrap li:not(:last-child) {margin-bottom: 3.2vw;}
.partner_sec_01 .info_wrap figure {width: 10vw; height: 10vw;}
.partner_sec_01 .info_wrap li:nth-child(1) figure {background: url(/public/front/images/mission/partner_info_img_01.webp) no-repeat center/100% auto;}
.partner_sec_01 .info_wrap li:nth-child(2) figure {background: url(/public/front/images/mission/partner_info_img_02.webp) no-repeat center/100% auto;}
.partner_sec_01 .info_wrap li:nth-child(3) figure {background: url(/public/front/images/mission/partner_info_img_03.webp) no-repeat center/100% auto;}
.partner_sec_01 .info_wrap li:nth-child(4) figure {background: url(/public/front/images/mission/partner_info_img_04.webp) no-repeat center/100% auto;}
.partner_sec_01 .info_wrap p {flex: 1; text-align: left;}
@media only screen and (max-width:500px) {
    .partner_sec_01 .box {padding: 40px 0;}
    .partner_sec_01 .box:not(:last-child) {border-bottom: 1px dashed #E4E4E4;}
    .partner_sec_01 .desc {font-size: 14px;}
    .partner_sec_01 .desc:not(:last-of-type) {margin-bottom: 8px;}
    .partner_sec_01 .info_wrap li {gap: 8px;}
    .partner_sec_01 .info_wrap li:not(:last-child) {margin-bottom: 16px;}
    .partner_sec_01 .info_wrap figure {width: 50px; height: 50px;}
}
/* --------------------------------짝꿍미션 common end-------------------------------- */


/* --------------------------------짝꿍미션 도전 section-------------------------------- */
.partner_sec_01[data-layout="start"] {padding: 9.6vw 0 2.4vw 0;}
.partner_sec_01[data-layout="start"] .box {text-align: center;}
.partner_sec_01[data-layout="start"] .title {font-size: 4.4vw; color: #DD3636; font-weight: 600; line-height: 100%;}
.partner_sec_01[data-layout="start"] .sub_title {display: inline-block; margin-bottom: 4.8vw; padding: 2.8vw 3.6vw; font-size: 3.6vw; border-radius: 4.8vw 4.8vw 4.8vw 0; color: #222; font-weight: 600; line-height: 130%; background-color: #F3F3F3;}
.partner_sec_01[data-layout="start"] .inner_box {position: relative;}
.partner_sec_01[data-layout="start"] .inner_box img {display: block; width: 100%;}
.partner_sec_01[data-layout="start"] .inner_box .title,
.partner_sec_01[data-layout="start"] .inner_box .desc_wrap {position: absolute; left: 50%; width: 100%; transform: translateX(-50%);}
.partner_sec_01[data-layout="start"] .inner_box .title {top: 10%;}
.partner_sec_01[data-layout="start"] .inner_box .desc_wrap {bottom: 10%;}
.partner_sec_01[data-layout="start"] .invite_wrap {display: flex; justify-content: center; gap: 4.8vw;}
.partner_sec_01[data-layout="start"] .invite_wrap li {width: 12.8vw; height: 12.8vw;}
.partner_sec_01[data-layout="start"] .invite_wrap li [class^="btn"] {display: block; width: 100%; height: 100%;}
.partner_sec_01[data-layout="start"] .invite_wrap .btn_kakao {background: url(/public/front/images/mission/ico_kakao.svg) no-repeat center/100% auto;}
.partner_sec_01[data-layout="start"] .invite_wrap .btn_url {background: url(/public/front/images/mission/ico_url.svg) no-repeat center/100% auto;}
.partner_sec_01[data-layout="start"] .input_wrap {margin: 4.8vw 0 3.2vw 0}
/*복사 버튼*/
.partner_sec_01[data-layout="start"] .btn_copy_wrap {margin: 8vw 0;}
.partner_sec_01[data-layout="start"] #btnCopy{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.2vw; width: 100%; padding: 4vw; border-radius: 2.8vw; background-color: #414658; color: #fff; font-size: 3.2vw; font-weight: 600;}
.partner_sec_01[data-layout="start"] span{display: block; text-align: center;}
.partner_sec_01[data-layout="start"] #partnerNoCopy {display: flex; justify-content: center; align-content: center; gap: 0.8vw; font-size: 2.8vw;}
.partner_sec_01[data-layout="start"] #partnerNoCopy::after {content: ""; width: 3.2vw; height: 3.8vw; background: url(/public/front/images/mission/ico_copy.svg) no-repeat center/100% auto;}
@media only screen and (max-width:500px) {
    .partner_sec_01[data-layout="start"] {padding: 48px 0 12px 0;}
    .partner_sec_01[data-layout="start"] .title {font-size: 22px;}
    .partner_sec_01[data-layout="start"] .sub_title {margin-bottom: 24px; padding: 14px 18px; font-size: 18px; border-radius: 24px 24px 24px 0;}
    .partner_sec_01[data-layout="start"] .img {width: 248px; margin: 16px auto;}
    .partner_sec_01[data-layout="start"] .invite_wrap {gap: 24px;}
    .partner_sec_01[data-layout="start"] .invite_wrap li {width: 64px; height: 64px;}
    .partner_sec_01[data-layout="start"] .input_wrap {margin: 24px 0 16px 0}
    /*복사 버튼*/
    .partner_sec_01[data-layout="start"] .btn_copy_wrap {margin: 40px 0;}
    .partner_sec_01[data-layout="start"] #btnCopy{gap: 6px; padding: 20px; border-radius: 14px; font-size: 16px;}
    .partner_sec_01[data-layout="start"] #partnerNoCopy {gap: 4px; font-size: 14px;}
    .partner_sec_01[data-layout="start"] #partnerNoCopy::after {width: 16px; height: 19px;}
}
/* --------------------------------짝꿍미션 도전 section end-------------------------------- */


/* --------------------------------짝꿍미션 info section-------------------------------- */
.partner_sec_01[data-layout="info"] .title {margin-bottom: 2.4vw; font-size: 4.8vw; font-weight: 500; color: #222; line-height: 134%;}
.partner_sec_01[data-layout="info"] .sub_title {margin-bottom: 4.8vw; font-size: 3.6vw; font-weight: 500; color: #222; line-height: 144%;}
.partner_sec_01[data-layout="info"] .title span,
.partner_sec_01[data-layout="info"] .sub_title span {font-weight: 700}
.partner_sec_01[data-layout="info"] .img {width: 100%; margin-top: 4.8vw;}
.partner_sec_01[data-layout="info"] .code_wrap {margin: 4.8vw 0; padding: 5.2vw 3.2vw; background-color: #F8F8F8; border: 0.2vw solid  #EBEBEB; border-radius: 2vw; text-align: center;}
.partner_sec_01[data-layout="info"] .code_wrap >* {line-height: 100%;}
.partner_sec_01[data-layout="info"] .code_wrap h6 {font-size: 2.8vw; font-weight: 500; color: #666;}
.partner_sec_01[data-layout="info"] .code_wrap h5 {margin: 1.6vw 0 3.6vw 0; font-size: 4.4vw; font-weight: 600; color: #222;}
.partner_sec_01[data-layout="info"] .code_wrap p {font-size: 2.4vw; font-weight: 300; color: #757575;}
.partner_sec_01[data-layout="info"] .btn_wrap {display: flex; flex-direction: column; gap: 1.6vw;}
.partner_sec_01[data-layout="info"] .btn_wrap #btnCopy::before{content: ""; display: block; width: 3.2vw; height: 3.2vw; background: url(/public/front/images/mission/ico_copy.svg) no-repeat center/100% auto;}
.partner_sec_01[data-layout="info"] .btn_wrap #btnStart::before {content: ""; display: block; width: 3.2vw; height: 3.6vw; background: url(/public/front/images/message/ico_hand.svg) no-repeat center/100% auto;}
.partner_sec_01[data-layout="info"] .mockup_wrap {padding-top: 6.4vw; background: url(/public/front/images/mission/partner_mockup_bg.svg) no-repeat center/cover; border-radius: 3vw; text-align: center;}
.partner_sec_01[data-layout="info"] .mockup_wrap h6 {margin-bottom: 4.8vw; font-size: 3.2vw; color: #313647; line-height: 120%; font-weight: 500;}
.partner_sec_01[data-layout="info"] .mockup_wrap h6 span {font-weight: 700;}
.partner_sec_01[data-layout="info"] .mockup_wrap h6 i {display: inline-block; width: 3.8vw; height: 3.6vw;}
.partner_sec_01[data-layout="info"] .mockup_wrap figure {width: 78%; margin: 0 auto;}
.partner_sec_01[data-layout="info"] .mockup_wrap figure img {width: 100%;}
.partner_sec_01[data-layout="info"] .info_wrap {margin: 6.4vw 0 8vw 0;}
@media only screen and (max-width:500px) {
    .partner_sec_01[data-layout="info"] .title {margin-bottom: 12px; font-size: 24px; }
    .partner_sec_01[data-layout="info"] .sub_title {margin-bottom: 24px; font-size: 18px;}
    .partner_sec_01[data-layout="info"] .img {margin-top: 24px;}
    .partner_sec_01[data-layout="info"] .code_wrap {margin: 24px 0; padding: 26px 16px; border: 1px solid  #EBEBEB; border-radius: 10px;}
    .partner_sec_01[data-layout="info"] .code_wrap h6 {font-size: 14px;}
    .partner_sec_01[data-layout="info"] .code_wrap h5 {margin: 8px 0 18px 0; font-size: 22px;}
    .partner_sec_01[data-layout="info"] .code_wrap p {font-size: 12px;}
    .partner_sec_01[data-layout="info"] .btn_wrap {gap: 8px;}
    .partner_sec_01[data-layout="info"] .btn_wrap #btnCopy::before {width: 16px; height: 16px;}
    .partner_sec_01[data-layout="info"] .btn_wrap #btnStart::before {width: 16px; height: 18px;}
    .partner_sec_01[data-layout="info"] .mockup_wrap {padding-top: 32px; border-radius: 15px;}
    .partner_sec_01[data-layout="info"] .mockup_wrap h6 {margin-bottom: 24px; font-size: 16px;}
    .partner_sec_01[data-layout="info"] .info_wrap {margin: 32px 0 40px 0;}
}
/* --------------------------------짝꿍미션 info section end-------------------------------- */


/* --------------------------------input color ch-------------------------------- */
.mission_sec_02 .input_wrap[data-layout="textarea"] textarea,
.mission_sec_02 .quiz_wrap .input_wrap[data-layout="text"] input {border: 0.4vw solid #FB7A79;}
@media only screen and (max-width:500px) {
    .mission_sec_02 .input_wrap[data-layout="textarea"] textarea,
    .mission_sec_02 .quiz_wrap .input_wrap[data-layout="text"] input{border: 2px solid #FB7A79;}
}
/* --------------------------------input color ch end-------------------------------- */

.mb16{ margin-bottom: 3.2vw;}
/* 짝꿍 찾기 */
.partner_find .title{ font-weight: 600; font-size: 3.2vw; line-height: 1; color: #14303C;}
.partner_find .sub_title{ margin: 0 0 0.8vw; font-weight: 700; font-size: 3.6vw; line-height: 1.56; color: #222;}
.partner_find .sub_title + .mb16{ margin-bottom: 4.8vw;}
.partner_find .desc{ font-size: 2.8vw; line-height: 1.57; color: #222;}
.partner_find .desc strong{ font-weight: 600;}
.partner_find .btn_copy { width: 2.8vw; height: 2.8vw; background: url(/public/front/images/common/ico_copy.svg) no-repeat center / 100% 100%;}
.partner_find .box_round_wrap{ position: relative; padding: 6.4vw 3.2vw; margin-top: 4.8vw; background: #fff; box-shadow: 0vw 1.2vw 4vw rgba(0, 0, 0, 0.06); border-radius: 3vw; font-weight: 600; font-size: 2.8vw; line-height: 1.14; color: #444;}
.partner_find .box_round_wrap.light{ margin: 0; padding: 3.2vw 0vw; background: #EEF1FB; border-radius: 2.4vw; box-shadow: none;}
.partner_find_sec_01{ position: relative; overflow: hidden; margin-top: 9.6vw; width: 100%; height: auto; aspect-ratio: 360/443; text-align: center; background-color: #bdebff;}
.partner_find_sec_01::before{ content: ""; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: url(/public/front/images/mission/bg_partner_mission_hero.svg) no-repeat top center / 100% auto; opacity: 0; animation: pf-fade-up 0.7s ease 0.10s both;}
.partner_find_sec_01 .inner{ display: flex; flex-direction: column; justify-content: flex-end;position: absolute;inset: 0;}
.partner_find_sec_01 .inner > div { position: absolute; width: 100%; top: 50%; transform: translateY(calc(-50% - 38px));}
.partner_find_sec_01 img { display: block; margin: auto;}
.partner_find_sec_01 .title{ margin: 0 auto 3.2vw; opacity: 0; transform: translate3d(0, 0, 0); animation: pf-fade-up 0.6s ease 0.85s both;}
.partner_find_sec_01 .title > img { width:36.8vw; margin-top: 2vw;}
.partner_find_sec_01::after{ content: ""; position: absolute; left: 0; bottom: -4.6vw; width: 100%; aspect-ratio: 360 / 214; background: url(/public/front/images/mission/deco_partner_mission_hero.webp) no-repeat bottom center / auto 100%; opacity: 0; animation: pf-fade-up 0.7s ease 0.45s both;}
.partner_find_sec_01 .desc   { opacity: 0; animation: pf-fade-up 0.6s ease 1.05s both; }
.partner_find_sec_01 .desc2{ position: relative; z-index: 1; font-size: 3.2vw; line-height: 1; font-weight: 600; margin: 0 0 2.8vw; opacity: 0; animation: pf-fade-up 0.6s ease 1.25s both;}
.partner_find_sec_01 .desc2 img { width: 23.2vw; margin-top: 1.6vw;}

.partner_find_sec_02{ background: #f8f8f8; padding: 3.2vw 0 20vw;}
.partner_find_sec_02 .box_round_wrap.light { font-weight: 600; font-size: 3.2vw; line-height: 1; color: #414658; text-align: center;}
.partner_find_sec_02 .box_round_wrap.light .code{ display: flex; margin-top: 1.6vw; justify-content: center; align-items: center; gap: .8vw}
.partner_find_sec_02 .box_round_wrap.light .code span{ display: inline-block; font-weight: 400;}
.partner_find_sec_02 .box_round_wrap.completed { padding-bottom: 6.4vw;}
.partner_find_sec_02 .box_round_wrap.completed::after{ content: ""; display: block; margin: 4.8vw auto 0;  height: auto; aspect-ratio: 298/142; background: url(/public/front/images/mission/bg_partner_find_completed.webp) no-repeat center / 100% auto;}
.partner_find_sec_02 .btn_parti { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 3.2vw 0vw; background: linear-gradient(147.93deg, #FF7575 -4.59%, #DD3636 43.02%, #C42F2F 113.69%), #EEF1FB; border-radius: 2.4vw; font-weight: 700; font-size: 3.2vw; line-height: 1; color: #fff;}
.partner_find_sec_02 .btn_parti:not(:disabled)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .6vw; background: linear-gradient(135deg, #FB7B7B, #C32727); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;}
.partner_find_sec_02 .btn_parti span { display: flex; justify-content: center; align-content: center; gap: .8vw; margin-top: 1.2vw; font-weight: 500; font-size: 2.8vw; line-height: 1; color: #EEF1FB;}
.partner_find_sec_02 .btn_parti span::after,
.partner_find_sec_02 .btn_parti span::before { content: ""; display: block; width: 2.8vw; height: 2.8vw; background: url(/public/front/images/common/emoji_sparkle.webp) no-repeat center/100% auto;}
.partner_find_sec_02 .btn_parti:disabled{ background: #F3F3F3; color: #757575}
.partner_find_sec_02 .invite_wrap { display: flex; justify-content: center; gap: 3.2vw; margin: 3.2vw auto 4.8vw;}
.partner_find_sec_02 .invite_wrap li { width: 9.6vw; height: 9.6vw;}
.partner_find_sec_02 .invite_wrap li [class^="btn"] { display: block; width: 100%; height: 100%;}
.partner_find_sec_02 .invite_wrap .btn_kakao { background: url(/public/front/images/mission/ico_kakao.svg) no-repeat center/100% auto;}
.partner_find_sec_02 .invite_wrap .btn_url { background: url(/public/front/images/mission/ico_url_grey.svg) no-repeat center/100% auto;}
.partner_find_sec_02 .input_wrap { margin: 3.2vw 0 1.6vw;}
.partner_anchor { display: flex; gap: 1.6vw;}
.partner_anchor .anchor_btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vw; flex: 1; min-width: 0; height: 15.6vw; box-sizing: border-box; border: 0.6vw solid #313647; border-radius: 3vw; background: #fff;}
.partner_anchor .anchor_btn .sub { font-weight: 500; font-size: 2.8vw; line-height: 1; color: #313647;}
.partner_anchor .anchor_btn strong { font-weight: 700; font-size: 3.2vw; line-height: 1; color: #313647;}
.partner_anchor .anchor_btn.primary { border-color: #DD3636; background: #DD3636;}
.partner_anchor .anchor_btn.primary .sub { color: #FFF5F5;}
.partner_anchor .anchor_btn.primary strong { color: #fff;}
.partner_find_sec_02 #randomBox, .partner_find_sec_02 #friendBox { scroll-margin-top: 12vw;}
@media only screen and (max-width:500px) {
    .mb16 { margin-bottom: 16px;}
    /* 짝꿍 찾기 */
    .partner_find .title { font-size: 16px;}
    .partner_find .sub_title { margin: 0 0 4px; font-size: 18px;}
    .partner_find .sub_title + .mb16 { margin-bottom: 24px;}
    .partner_find .desc { font-size: 14px;}
    .partner_find .btn_copy { width: 14px; height: 14px;}
    .partner_find .box_round_wrap { padding: 32px 16px; margin-top: 24px; box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06); border-radius: 15px; font-size: 14px;}
    .partner_find .box_round_wrap.light { padding: 16px 0px; border-radius: 12px;}
    .partner_find_sec_01 { margin-top: 48px;}
    .partner_find_sec_01 .title { margin: 0 auto 16px;}
    .partner_find_sec_01 .title>img { width:184px; margin-top: 10px;}
    .partner_find_sec_01::after { bottom: -23px;}
    .partner_find_sec_01 .desc2 { font-size: 16px; margin: 0 0 14px;}
    .partner_find_sec_01 .desc2 img { width: 116px; margin-top: 8px;}
    .partner_find_sec_02 { padding: 16px 0 100px;}
    .partner_find_sec_02 .box_round_wrap.light { font-size: 16px;}
    .partner_find_sec_02 .box_round_wrap.light .code { margin-top: 8px; gap: 4px}
    .partner_find_sec_02 .box_round_wrap.completed { padding-bottom: 32px;}
    .partner_find_sec_02 .box_round_wrap.completed::after { margin-top: 24px;}
    .partner_find_sec_02 .btn_parti { padding: 16px 0px; border-radius: 12px; font-size: 16px;}
    .partner_find_sec_02 .btn_parti:not(:disabled)::before { padding: 3px;}
    .partner_find_sec_02 .btn_parti span { gap: 4px; margin-top: 6px; font-size: 14px;}
    .partner_find_sec_02 .btn_parti span::after,
    .partner_find_sec_02 .btn_parti span::before { width: 14px; height: 14px;}
    .partner_find_sec_02 .invite_wrap { gap: 16px; margin: 16px auto 24px;}
    .partner_find_sec_02 .invite_wrap li { width: 48px; height: 48px;}
    .partner_find_sec_02 .input_wrap { margin: 16px 0 8px;}
    .partner_anchor { gap: 8px;}
    .partner_anchor .anchor_btn { gap: 6px; height: 78px; border-width: 3px; border-radius: 15px;}
    .partner_anchor .anchor_btn .sub { font-size: 14px;}
    .partner_anchor .anchor_btn strong { font-size: 16px;}
    .partner_find_sec_02 #randomBox, .partner_find_sec_02 #friendBox { scroll-margin-top: 60px;}
}
@media only screen and (min-width: 501px) and (max-width: 1180px) and (orientation: portrait) and (min-aspect-ratio: 3 / 5) {
    .partner_find_sec_01{aspect-ratio: 360 / 403;}
    .partner_find_sec_01::after{aspect-ratio: 360 / 184;}
    
}

@keyframes pf-fade-up {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .partner_find_sec_01::before,
    .partner_find_sec_01::after,
    .partner_find_sec_01 .title,
    .partner_find_sec_01 .desc,
    .partner_find_sec_01 .desc2 {
        animation: none;
        opacity: 1;
        transform: none;
    }
}