@charset "utf-8";


.top_img{display: none;}


.participate{background-color: var(--pointBg);}
.participate .container{padding-top: var(--hdH); padding-bottom: var(--ftH);}

.participate .form_sect{min-height: calc(100vh - var(--hdH)); padding: 5rem 0 var(--pd2); background-color: var(--pointBg); }
.participate .form_sect .cont_wrap{display: flex; flex-direction: column; align-items: center; padding: 0 var(--inPd); overflow: hidden;}



/* ===== 상단 STEP ===== */
.part_page .part_step_list{display: flex; justify-content: center; gap: 6rem; width: 50rem; max-width: 100%; margin: 0 auto 5rem;}
.part_page .part_step_list .step_item{position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 1.5rem; min-width: 0; color: var(--gray30); font-size: var(--p5); font-weight: 600; line-height: 1; text-align: center; white-space: nowrap;}
.part_page .part_step_list .step_item + .step_item::before{content: ""; position: absolute; 
    top: 1.3rem; right: calc(100% + 2rem); width: 2rem; height: 0.4rem; 
    background-image: radial-gradient(circle, var(--gray30) 0.2rem, transparent 0.24rem); 
    background-size: 0.8rem 0.4rem; background-position: -0.2rem center; background-repeat: repeat-x;}
.part_page .part_step_list .step_item.active{color: var(--gray90); font-weight: 700;}

.part_page .part_step_list .step_item .num{display: flex; align-items: center; justify-content: center; width: max(3rem, 20px); height: max(3rem, 20px); border-radius: 999px; background-color: var(--gray20); color: var(--gray30); font-size: var(--p6); font-weight: 700; line-height: normal;}
.part_page .part_step_list .step_item.active .num{background-color: var(--point01); color: #fff;}
/* .part_page .part_step_list .step_item.done .num{background-color: var(--point01); color: #fff;} */

/* 상단 STEP_4 */
.part_page.result_mode .part_step_list {margin-bottom: 6rem;}
.part_page.result_mode .part_step_list .step_item{color: rgba(255,255,255,0.5); font-weight: 500;}
.part_page.result_mode .part_step_list .step_item + .step_item::before{background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0.2rem, transparent 0.24rem);}
.part_page.result_mode .part_step_list .num,
.part_page.result_mode .part_step_list .step_item.done .num{background-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5);}
.part_page.result_mode .part_step_list .step_item.active{color: #fff; font-weight: 600;}
.part_page.result_mode .part_step_list .step_item.active .num{background-color: #fff; color: var(--point01);}





/* ===== 콘텐츠 ===== */
.part_page .part_form{display: flex; flex-direction: column; align-items: center; width: max(70rem, 600px); max-width: 100%; }
.part_page .part_form .part_step_cont{display: none; width: 100%; padding: 6rem; border-radius: 3rem; background-color: #fff;}
.part_page .part_form .part_step_cont.active{display: block;}


/* 타이틀 (common.css) */
.part_page .part_form .sect_tit_box .sect_txt{font-size: var(--p6); margin-top: 1.5rem; color: var(--gray90);}
.part_page .part_form .sect_tit_box .sect_txt span{color: var(--point01);} /* *필수 값 */
.part_page .part_form .sect_tit_box > *{opacity: 1; transform: none;}


/* STEP1 Form */
.part_page{
    --formRadius: 1rem;
}
.part_page .form_cont{display: flex; flex-direction: column; gap: 1.5rem; margin: 3rem 0;}

.part_page .form_row{display: flex; align-items: center; gap: 1.5rem;}
.part_page .form_row .form_label{display: flex; align-items: center; gap: 0.5rem; width: 6.25em; flex-shrink: 0; color: #1c1c1c; font-size: var(--p4); font-weight: 700; line-height: 1; white-space: nowrap;}
.part_page .form_row .form_label span{color: var(--point01); font-size: var(--p5); font-weight: 600;}

.part_page .form_row input,
.part_page .form_row select,
.part_page .form_row .nice-select{width: 100%; height: max(5.5rem, 45px); padding: 0 2rem; border-radius: var(--formRadius); border: 1px solid var(--gray20); 
    background-color: #fff; color: var(--gray90); font-size: var(--p4); font-weight: 500; line-height: calc( max(5.5rem, 45px) - 2px); transition: border-color 0.25s ease;}

.part_page .form_row input:focus,
.part_page .form_row .nice-select.open{border-color: var(--point01); border-width: 2px;}
.part_page .form_row input::placeholder{color: var(--gray90); opacity: 0.5;}

/* 핸드폰번호 — '010-' 고정 접두 + 고스트 플레이스홀더('0000-0000')
   participate.php 의 .tel_field 래퍼. .tel_ghost 는 실제 input(#partTel) 아래 깔리는 '같은 스타일의 input'
   (값 010-0000-0000, 회색, 클릭·포커스 불가). 실제 input 은 배경을 투명으로 두어 진한 '010-' 가 회색 '010-' 위에
   정확히 겹치고 남는 '0000-0000' 만 안내로 보인다 — 두 텍스트가 같은 종류의 요소라 브라우저별 세로 정렬 차이가 없다.
   흰 배경은 래퍼가 맡고, 뒤 자리를 입력하면(is_filled) 고스트를 숨긴다. */
.part_page .form_row .tel_field{position: relative; flex: 1; width: 100%; min-width: 0; border-radius: var(--formRadius); background-color: #fff;}
.part_page .form_row .tel_field input{width: 100%;}
.part_page .form_row .tel_field #partTel{position: relative; z-index: 1; background-color: transparent;}
.part_page .form_row .tel_field .tel_ghost{position: absolute; left: 0; top: 0; z-index: 0; background-color: transparent; border-color: transparent; color: var(--gray90); opacity: 0.5;
    pointer-events: none; user-select: none; transition: none;}
.part_page .form_row .tel_field #partTel:focus + .tel_ghost{border-width: 2px;}
.part_page .form_row .tel_field.is_filled .tel_ghost{display: none;}

/* 필수값 미입력 표시 — participate.php 의 validateStep1() 이 .is_error 를 토글 */
.part_page .form_row input.is_error,
.part_page .form_row select.is_error,
.part_page .form_row .nice-select.is_error{border-color: #e02b2b; border-width: 2px;}
.part_page .part_agree_box.is_error .com_form_chk .chk_box input + label .ico{border-color: #e02b2b;}

.part_page .form_row > input,
.part_page .form_row > select,
.part_page .form_row > .nice-select{flex: 1; min-width: 0;}

.part_page .nice-select:after {right: 2rem; width: 1em; height: 0.5em; border: none;transform: translateY(-50%); transform-origin: center; margin-top: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"><path d="M10.5303 0.530334L5.53027 5.53033L0.530273 0.530334" stroke="%231F2933" stroke-width="1.5"/></svg>') no-repeat center / contain;}
.part_page .nice-select.open:after{transform: translateY(-50%) rotate(-180deg);}

.part_page .nice-select .list{width: 100%; max-height: max(20rem, 150px); overflow-y: auto; border-color: var(--gray20); border-radius: var(--formRadius); top: calc(100% + 2px);}
.part_page .nice-select .list::-webkit-scrollbar { display: inherit; width: 7px; }
.part_page .nice-select .list::-webkit-scrollbar-thumb { background: #b8b8b8; border-right: 4px solid #fff; border-radius: 3px; border-top-right-radius: 10px 3px; border-bottom-right-radius: 10px 3px; }
.part_page .nice-select .list::-webkit-scrollbar-track { background: #fff; margin-block: 5px;}
.part_page .nice-select .option{min-height: max(5rem, 40px); line-height: max(5rem, 40px);}

/* 동의 */
.part_page .part_agree_box{display: flex; flex-direction: column; margin-top: 1.5rem; padding: 3rem; border-radius: var(--formRadius); background-color: var(--grayBg1);}

.part_page .part_agree_box .form_row {flex-direction: column; align-items: flex-start;}
.part_page .part_agree_box .form_row input{border-color: #fff; flex: unset;}
.part_page .part_agree_box .form_row input:focus{border-color: var(--point01);}

.part_page .part_agree_box .agree_chk{margin-top: 2.5rem;}
.part_page .part_agree_box .terms_box{padding: 2rem; margin-top: 1.5rem; background-color: #fff; color: var(--gray90); font-size: max(var(--p7), 12px); border-radius: var(--formRadius); line-height: 1.7;}
.part_page .part_agree_box .terms_box p + p{margin-top: 1.5em;}

.com_form_chk{ display: flex; align-items: flex-start; gap: 0.8rem; font-weight: 500;}
.com_form_chk + .form_chk{margin-top: 0.5em;}
.com_form_chk .chk_box{position: relative;}
.com_form_chk .chk_box label { display: flex; align-items: center; cursor: pointer; }
.com_form_chk .chk_box input{position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;}
.com_form_chk .chk_box input + label .ico { display: flex; align-items: center; justify-content: center; margin-right: 0.8rem; border-radius: 0.5rem; width:max(2rem, 20px); height:max(2rem, 20px); background-color: #fff; border:0.2rem solid rgba(0,0,0,0.3); transition: all 0.3s ease;}
.com_form_chk .chk_box input + label .ico svg{display: block; width: 100%;  height: auto;}
.com_form_chk .chk_box input + label .ico svg path {stroke: rgba(0,0,0,0.4);}
.com_form_chk .chk_box input:checked + label .ico{ fill: #fff; background-color:var(--gray90); border-color: var(--gray90);}
.com_form_chk .chk_box input:checked + label .ico path{ stroke: #fff;}
.com_form_chk .txt {font-weight: 700; font-size: var(--p4);}
.com_form_chk .txt .sm { font-weight: 400; }
.com_form_chk .txt .ess {color: var(--point01); }
.com_form_chk .chk_box + .view_btn { flex-shrink: 0; margin-left: 1em; transition: color 0.3s; font-weight: 400; line-height: 1.7; color: #828282; border-bottom: 1px solid #828282; font-size: var(--p5); transition: 0.3s ease-in-out;}


/* ===== 이벤트 종료 ===== */
.form_chk_wrap{position: relative;}

.form_end_box{display: flex; position: relative; z-index: 5; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 1rem;
    border-radius: 2rem; text-align: center; background: var(--grayBg1);}
.form_end_box .ico{display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: 1.5rem; }
.form_end_box .ico svg{width: 100%; height: 100%; fill: none; stroke: var(--point01); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;}

.form_end_box .txt_box{display: flex; flex-direction: column; align-items: center; gap: 0.8rem;}
.form_end_box .tag{display: inline-block; padding: 0.35em 1em; border-radius: 999px; background-color: var(--point01); font-size: var(--p6); 
    color: #fff; font-weight: 600; line-height: normal;}
.form_end_box .txt{font-size: var(--p1); font-weight: 700; line-height: 1.4; color: var(--gray70);}
.form_end_box .sub{ font-size: var(--p6); line-height: 1.6; color: var(--gray50);}




/* ===== 하단 버튼 ===== */
.part_page .part_btn_box{display: flex; justify-content: center; gap: 1rem; margin-top: 3rem;}
.part_page .part_prev_btn,
.part_page .part_next_btn,
.part_page .part_submit_btn{display: inline-flex; align-items: center; justify-content: center; min-width: 16rem; height: max(7rem, 45px); padding: 0 4rem; border-radius: 999px; background-color: var(--gray90); color: #fff; font-size: var(--p3); font-weight: 600; line-height: 1; transition: background-color 0.25s ease;}
.part_page .part_prev_btn{background-color: #fff; color: var(--gray90); }
.part_page .part_prev_btn,
.part_page .part_submit_btn{display: none;}
.part_page .part_next_btn:disabled{background-color: var(--gray20); color: var(--gray30); cursor: default;}


/* STEP2 단어 선택 */
.part_page .word_list{display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3rem;}

.part_page .word_card{position: relative; display: flex; flex-direction: column; padding: 3rem; border-radius: 2rem; background-color: var(--grayBg1);}
.part_page .word_card .word_top{display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem;}
.part_page .word_card .word_top .tit{color: var(--gray90); font-size: var(--p1); font-weight: 700; line-height: 1;}
.part_page .word_card .word_top .check_ico{position: absolute; right: 1.5rem; top: 1.5rem; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: var(--gray20);}
.part_page .word_card .word_top .check_ico svg{display: block; width: 40%; height: auto;}
.part_page .word_card.done .check_ico{background-color: var(--point01);} 

.part_page .word_card .word_btn_box{display: flex; gap: 1rem; width: 100%; perspective: 120rem;}
.part_page .word_card .word_btn_box .word_btn{display: block; flex: 1; min-width: 0; height: 7rem; padding: 0; border: 0; border-radius: 1.5rem; background: transparent; color: inherit; font-size: var(--p1); font-weight: 700; line-height: 1; text-align: center; perspective: 80rem;}
.part_page .word_card .word_btn_box .word_btn.changed{cursor: default;}
.part_page .word_card .word_btn_box .word_btn .word_flip{position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);}
.part_page .word_card .word_btn_box .word_btn.changed .word_flip{transform: rotateY(180deg);}
.part_page .word_card .word_btn_box .word_btn .word_face{position: absolute; inset: 0; display: flex; align-items: center; 
    justify-content: center; padding: 0 1rem; border-radius: 1.5rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;}
.part_page .word_card .word_btn_box .word_btn .word_front{border: 1px dashed var(--point01); background-color: #DFECEC; color: #B8C5C7;}
.part_page .word_card .word_btn_box .word_btn .word_back{border: 1px solid var(--point01); background-color: var(--point01); color: #fff; transform: rotateY(180deg); line-height: 1.2;}
.part_page .word_card .word_btn_box .word_btn:focus-visible{outline: 2px solid var(--point01); outline-offset: 3px;}

.part_page .word_card .desc{color: var(--gray70); font-size: var(--p4); line-height: 1.7; margin-top: 2rem;}



/* STEP3 체크박스 */
.part_page .pledge_list{display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3rem;}
.part_page .pledge_chk{position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;}
.part_page .pledge_card{display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; padding: 3rem; border-radius: 2rem; background-color: var(--grayBg1); text-align: left; cursor: pointer;}
.part_page .pledge_chk:focus-visible + .pledge_card{outline: 2px solid var(--point01); outline-offset: 3px;}
.part_page .pledge_card .txt_box{display: flex; flex-direction: column; gap: 1rem;}
.part_page .pledge_card .label{color: var(--gray40); font-size: var(--p5); font-weight: 500; line-height: 1;}
.part_page .pledge_card .txt{color: var(--gray90); font-size: var(--p2); font-weight: 700; line-height: 1.7;}
.part_page .pledge_card .check_ico{display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: var(--gray20);}
.part_page .pledge_card .check_ico svg{display: block; width: 1.4rem; height: auto;}
.part_page .pledge_card.done .check_ico{background-color: var(--point01);}



/* ===== 배너 ===== */
.part_banner{--banner-padding-y: 5rem; --banner-padding-x: 4rem; position: relative; display: flex; width: 100%; max-height: 0; min-height: 0; margin-top: 0; padding: 0 var(--banner-padding-x); border-radius: 3rem; overflow: hidden; background-color: var(--point01); color: #fff; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-1rem); transition: max-height 0.45s ease, min-height 0.45s ease, margin-top 0.45s ease, padding 0.45s ease, opacity 0.3s ease, transform 0.45s ease, visibility 0s linear 0.45s;}
.part_banner.show{max-height: 40rem; min-height: 15rem; margin-top: 3rem; padding: var(--banner-padding-y) var(--banner-padding-x); opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: max-height 0.45s ease, min-height 0.45s ease, margin-top 0.45s ease, padding 0.45s ease, opacity 0.3s ease 0.1s, transform 0.45s ease, visibility 0s;}
.part_banner .banner_bg{--banner-bg-x: 22%; --banner-bg-y: 25%; position: absolute; right: 0; bottom: 0; width: 58%; max-width: none; height: auto; transform: translate3d(var(--banner-bg-x), var(--banner-bg-y), 0);}
.part_banner.show .banner_bg{animation: bannerObjFloat 3.6s ease-in-out 0.55s infinite;}
.part_banner .banner_cont{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start;}
.part_banner .logo{width: 23.6rem; height: 5rem; margin-bottom: 4rem;}
.part_banner .logo img{width: 100%; height: 100%;}
.part_banner .tit{font-size: var(--h8); font-weight: 600; line-height: 1.5;}
.part_banner .txt{margin-top: 1.5rem; font-size: var(--p4); font-weight:300;}





/* STEP4 결과 */
.participate:has(.part_page.result_mode){background: var(--point01) url('/inc/img/sub/result_bg.jpg') no-repeat center top / cover;}
.participate:has(.part_page.result_mode) .page_wrap.basic,
.participate:has(.part_page.result_mode) .form_sect{background: transparent;}

.part_page.result_mode .part_form{width: 80rem; max-width: 100%;}
.part_page.result_mode .part_step_cont{padding: 0 !important; background-color: transparent; border-radius: 0;}

.part_page .result_tit_box{position: relative; width: 100%; color: #fff; text-align: center;}
.part_page .result_tit_box .sect_tit{font-size: var(--h2); font-weight: 700; line-height: 1.5;}
.part_page .part_form .result_tit_box .sect_txt{margin-top: 1.5rem; font-size: var(--p4); color: #fff; font-weight: 300;}

.part_page .deco{position: absolute; inset: 0; pointer-events: none;}
.part_page .deco .confetti{position: absolute; opacity: 0;}
.part_page .deco .confetti_lt{width: 24rem; top: -3rem; left: -4rem; animation: confettiPopLt 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;}
.part_page .deco .confetti_lb{width: 15.4rem; top: 12.5rem; left: 1rem; animation: confettiPopLb 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;}
.part_page .deco .confetti_rt{width: 5.4rem; top: 2.8rem; right: 5rem; animation: confettiPopRt 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;}
.part_page .deco .confetti_rb{width: 15.9rem; top: 12.5rem; right: -4rem; animation: confettiPopRb 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;}


/* 결과 카드 */
.part_page .result_card_wrap{width: 55rem; max-width: 100%; margin: 5rem auto 0; padding: 2rem 2rem 5rem; border-radius: 3rem; background-color: #fff;}

.part_page .slide{position: relative; overflow: hidden; border-radius: 2.5rem; aspect-ratio: 800 / 1000; background-color: var(--grayBg1); touch-action: pan-y;}
.part_page .slide .swiper-wrapper{height: 100%;}
.part_page .slide .result_card{height: 100%;}
.part_page .slide .result_card img{width: 100%; height: 100%; object-fit: cover;}


.part_page .result_paging{position: absolute; left: 50%; bottom: 2.4rem; z-index: 2; display: flex; gap: 1.2rem; transform: translateX(-50%);}
.part_page .result_paging button{width: 10px; height: 10px; border-radius: 50%; background-color: rgba(31,41,51,0.25);}
.part_page .result_paging button.active{background-color: var(--gray90);}

.part_page .download_btn{position: absolute; right: calc(2rem - 1px); bottom: calc(1.8rem - 1px); z-index: 2; width: max(3.7rem, 37px); height: max(3.7rem, 37px); border-radius: 50%; background: none;}
.part_page .download_btn::before{content: ""; position: absolute; inset: 1px; border-radius: 50%;
    background: var(--gray90) url('data:image/svg+xml,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0.25 0)"><path d="M11.75 8.08337V10.5278C11.75 10.852 11.6212 11.1628 11.392 11.3921C11.1628 11.6213 10.8519 11.75 10.5278 11.75H1.97222C1.64807 11.75 1.33719 11.6213 1.10798 11.3921C0.878769 11.1628 0.75 10.852 0.75 10.5278V8.08337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.19336 5.02771L6.24891 8.08327L9.30447 5.02771" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.25 8.08333V0.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>') no-repeat center / 39% auto;}



.part_page .result_card_info{padding: 3rem 2rem 0;}
.part_page .result_card_info .top{display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;}
.part_page .result_card_info .tit{color: var(--gray90); font-size: var(--h8); font-weight: 700; line-height: 1.5;}

.part_page .result_card_info .copy_btn{display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; 
    padding: 0.5em 0.8em; border-radius: 999px; background-color: var(--grayBg1); color: var(--gray40); font-size: var(--p6); font-weight: 700; line-height: normal; transition: 0.3s ease;}

.part_page .tag_box{display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem;}
/* .part_page .tag_box span{display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.8rem; border-radius: 0.5rem; border: 1px solid var(--gray20); color: var(--gray60); font-size: var(--p7); font-weight: 500; line-height: 1;} */
.part_page .tag_box span{display: inline-flex; align-items: center; justify-content: center; color: var(--gray60); font-size: var(--p7); font-weight: 500; line-height: 1;}

.part_page .btn_box{display: flex; justify-content: center; margin-top: 3rem;}
.part_page .share_btn{display: inline-flex; align-items: center; justify-content: center; width: auto; height: max(5rem, 43px); padding: 0 1.6em; border-radius: 999px; background-color: #fff; border: 1px solid var(--gray20); font-size: var(--p3); font-weight: 600; transition: 0.3s ease;}

.part_page .result_btn_box{display: flex; flex-direction: column; align-items: center; gap:max(2rem, 20px); margin-top: 3rem;}

.part_page .result_btn_box .more_btn{display: flex; align-items: center; justify-content: center; width: 55rem; max-width: 100%; height: max(6rem, 48px); padding: 0 4rem; border-radius: 999px; background-color: var(--gray90); color: #fff; font-size: var(--p3); font-weight: 600; transition: 0.3s ease;}
.part_page .result_btn_box .more_btn svg{margin-left: 0.8rem; height: 1.1em; width: auto;}

.part_page .result_btn_box .restart_btn{display: inline-flex; align-items: center; gap: 0.8rem; color: var(--gray50); font-size: var(--p4); font-weight: 500; line-height: 1; transition: 0.3s ease;}
.part_page .result_btn_box .restart_btn .ico svg{display: block; width: 1em; height: 1em; }

@keyframes confettiPopLt { 0% { opacity: 0; transform: translate3d(4rem,3rem,0) scale(0.72); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes confettiPopLb { 0% { opacity: 0; transform: translate3d(4rem,-3rem,0) scale(0.72); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes confettiPopRt { 0% { opacity: 0; transform: translate3d(-3rem,3rem,0) scale(0.72); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes confettiPopRb { 0% { opacity: 0; transform: translate3d(-4rem,-3rem,0) scale(0.72); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes bannerObjFloat { 0%, 100% { transform: translate3d(var(--banner-bg-x), var(--banner-bg-y), 0) rotate(0deg); } 50% { transform: translate3d(var(--banner-bg-x), calc(var(--banner-bg-y) - 0.8rem), 0) rotate(-1.2deg); } }

@media (prefers-reduced-motion: reduce) {
    .part_banner.show .banner_bg{animation: none;}
}





@media screen and (min-width: 1241px){
    .part_page .part_next_btn:hover,
    .part_page .part_submit_btn:hover{background-color: var(--point01);}
    .part_page .part_next_btn:disabled:hover{background-color: var(--gray20); color: var(--gray30);}
    .part_page .part_prev_btn:hover{border-color: var(--point01); color: var(--point01);}

    .part_page .result_card_info .copy_btn:hover{background-color: var(--point01); color: #fff;}

    .part_page .share_btn:hover{background-color: var(--point01); color: #fff; border-color: var(--point01);}
    .part_page .result_btn_box .more_btn:hover{background-color:var(--point01)}
    .part_page .result_btn_box .restart_btn:hover{color:var(--gray90)}

    .part_page .download_btn:hover{ background-color:var(--point01)}
}


@media screen and (max-width: 2000px){
    .part_page .word_card .word_btn_box .word_btn{font-size: var(--p2);}
}


@media screen and (max-width: 768px){
    .participate .form_sect{padding-top: 7rem;}

    .part_page .sect_tit_box:not(.result_tit_box) .sect_tit br{display: none;}
    .part_page .sect_tit_box:not(.result_tit_box) .sect_txt br{display: none;}

    .part_page .part_step_list{width: 55rem;}
    .part_page .part_step_list .step_item{font-size: 11px;}
    
    .part_page .part_form{width: max(70rem, 500px);}
    .part_page .part_form .part_step_cont{padding: 30px 20px;}
    .part_page .form_cont{margin-bottom: 30px;}
    .part_page .part_agree_box{margin-top: 15px; padding: 25px 20px 20px;}


    .part_banner .logo{width: auto; height: 6rem;}

    .part_page .result_paging button{width: 6px; height: 6px;}
    .part_page .btn_box{margin-top: 20px;}
    
}


@media screen and (max-width: 600px){
    .part_page .part_step_list{width: 95%;}
    .part_page .part_step_list .step_item{font-size: 10px;}

    .part_page .part_form .part_step_cont,
    .part_banner,
    .part_page .result_card_wrap,
    .part_page .slide{border-radius: 15px;}

    .part_page .part_form .part_step_cont{padding: 30px 15px; }
    
    .part_page .sect_tit_box:not(.result_tit_box) .sect_desc{font-size: var(--p8);}
    .part_page .sect_tit_box:not(.result_tit_box) .sect_tit{font-size: var(--h7);}
    .part_page .sect_tit_box:not(.result_tit_box) .sect_txt{margin-top: 7px;}

    .part_page .form_cont{margin-bottom: 25px;}
    .part_page .form_row{gap: 12px;}
    .part_page .form_row .form_label{width: 5em;}
    .part_page .part_agree_box{padding: 20px 15px 15px;}


    .part_page .word_card{padding: 20px 15px 15px;}
    .part_page .word_card .word_btn_box .word_btn{height: 45px; font-size: 15px;}

    .part_banner {
        --banner-padding-y: 25px;
        --banner-padding-x: 15px;
    }
    .part_banner .txt{line-height: 1.6; font-size: 12px;}
    .part_page .result_tit_box .deco{left: 50%; right: auto; width: 108rem; transform: translateX(-50%) translateY(6px) scale(0.6); transform-origin: center top;}

    
    .part_page .pledge_card{padding: 20px 15px 15px; }
    .part_page .pledge_card .txt br{display: none;}
    .part_page .word_card .desc{font-size: 12px; margin-top: 10px;}


    .part_banner .banner_bg {--banner-bg-x: 27%;}

}