/* --------------------------------etc common------------------------------ */
section {padding: 7.5rem 0 8.75rem; color: #222; font-family: Pretendard;}
section .inner{max-width: 1056px;}
@media screen and (max-width:1024px) {
    section {padding: 5rem 0 10rem;}
}/* md */

.sec_tit {font-size:2.875rem; font-weight:900; line-height:130%; font-family: Paperlogy;}
/*약관,개인정보처리방침 공통*/
[data-layout="etc"] .top {width:100%; padding-bottom:2.5rem; border-bottom: 2px solid #222;}
[data-layout="etc"] .desc {margin: 3.5rem 0; font-size: 1.875rem; color: #6049EA; font-weight: 700; line-height: 133%;}
[data-layout="etc"] .text_wrap:not(:last-child){margin-bottom: 3.5rem;}
[data-layout="etc"] .text_box:not(:last-child){margin-bottom: 2rem;}
[data-layout="etc"] h3 {font-weight: 700; font-size: 1.5rem; line-height: 144%;}
[data-layout="etc"] h4 {font-weight: 700; font-size: 1.125rem; line-height: 144%;}
[data-layout="etc"] .text {font-weight: 400; line-height: 150%; font-size: 1rem; word-break: keep-all;}
[data-layout="etc"] .inner_text {padding-left: 1.5rem;}
[data-layout="etc"] .text p {position: relative; padding-left: 1.5rem;}
[data-layout="etc"] .text span {position: absolute; left: 0; top: 0;}

[data-layout="etc"] .table_wrap {width: 100%; margin: 1rem 0;}
[data-layout="etc"] table {width: 100%; table-layout: fixed; border-collapse: collapse;}
[data-layout="etc"] table td {padding: 1rem 2.5rem; border-right: 1px solid #E4E4E4; text-align: center;}
[data-layout="etc"] table td:last-child {border-right: 0;}
[data-layout="etc"] table .text_left {text-align: left;}
[data-layout="etc"] table .font_bold {font-weight: 500;}
[data-layout="etc"] thead td {font-weight: 600; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; background-color: #F8F8F8;}
[data-layout="etc"] tbody td {border-bottom: 1px solid #F0F0F0;}
[data-layout="etc"] tbody tr:last-child td {border-bottom: 1px outset #aaa;}

[data-layout="etc"] .link_wrap {margin-top: 1rem; padding: 2rem; background-color: #F8F8F8;}
[data-layout="etc"] .link_wrap li {position: relative; padding-left: 0.75rem; color: #666; font-size: 1rem; font-weight: 400; line-height: 150%;}
[data-layout="etc"] .link_wrap li:not(:last-child) {margin-bottom: 0.75rem;}
[data-layout="etc"] .link_wrap li a {color: #1A7DF1; font-weight: 500;}
[data-layout="etc"] .link_wrap li .middot {position: absolute; left: 0; top: 50%; width: 0.188rem; height: 0.188rem; transform: translateY(-50%); border-radius: 100%; background-color: #1A7DF1;}

@media screen and (max-width:767px){
    [data-layout="etc"] table td {padding: 1rem 0.5rem; font-size: 0.9rem;}
    [data-layout="etc"] tbody td:first-child {padding: 1rem 0}
}/* sm */
/* --------------------------------etc common end------------------------------ */


/* --------------------------------faq ----------------------------- */
.faq_list_sec{background-color: #f8f8f8; width: 100%; overflow-x: hidden;}
.faq_list_sec .tab_menu_wrap{margin-top: 2.5rem;}
.faq_list_sec .tab_cont_wrap {margin-top:1.5rem; position:relative;}
.faq_list_sec .tab_cont {display:none;}
.faq_list_sec .tab_cont.active {display:flex; flex-direction: column; gap: 1rem;}
.faq_list_sec .faq_list:not(:first-child) {margin-top: 1rem;}
.faq_list_sec .faq_item {border:2px solid #222; background-color:#FFF; cursor:pointer; padding: 2rem 2rem 2rem 2.5rem; transition:all .2s ease-in-out; position:relative;}
.faq_list_sec .faq_item dt {display:flex; justify-content:flex-start;}
.faq_list_sec .faq_item .faq_cate {min-width: 6.25rem; color: #aaa; font-size: 1.125rem; font-weight: 700; line-height: 155%; font-family: Paperlogy;}
.faq_list_sec .faq_item .faq_title {flex: 90% 0 0; color:#222; font-size:1.125rem; font-weight:600; line-height:144%; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.faq_list_sec .faq_item::after {content:''; display:block; background: #fff url(/front/images/common/ico_arrow_faq.svg) no-repeat center/100% auto; width: 2rem; height: 2rem; position:absolute; top:50%; right:2.5rem; transform: translateY(-50%);}
.faq_list_sec .faq_item dd {display:none; width: calc(100% - 2.5rem); color: #222; font-size: 1.125rem; font-weight:400; line-height:144%; padding: 2rem 2rem 0 0; word-break: keep-all;}
/*show*/
.faq_list_sec .faq_item.show {border:2px solid #6049EA;}
.faq_list_sec .faq_item.show dd{border-top: 1px solid #F0F0F0; margin-top: 2rem;}
.faq_list_sec .faq_item.show .faq_cate {color:#6049ea;}
.faq_list_sec .faq_item.show::after {transform: rotate(180deg); top: 2rem;}
.faq_list_sec .btn_wrap{margin-top: 3rem;}
.faq_list_sec .btn_more {border: 2px solid #222; background-color: #fff; font-size: 0.875rem; font-weight:700; line-height:142%;}

@media screen and (max-width:767px) {
    .faq_list_sec .tab_cont_wrap{left: 50%; transform: translateX(-50vw); width: 100vw; box-sizing: border-box;}
    .faq_list_sec .faq_item{border: none;}
    .faq_list_sec .faq_item .faq_cate {min-width: 4.5rem;}
    .faq_list_sec .faq_item .faq_title {flex: 66% 0 0; display: unset;}
    .faq_list_sec .faq_item dd{padding: 2rem 0 0 0;}

    .faq_list_sec .faq_item.show{border: none;}
}/* sm */
/* --------------------------------faq end ----------------------------- */


/* --------------------------------termsUse----------------------------- */
.terms_sec h3{margin-bottom: 2rem;}
.terms_sec .text span{left: 0.25rem;}
/* --------------------------------termsUse end----------------------------- */


/* --------------------------------privacy----------------------------- */
.privacy_sec{font-size: 1rem; font-weight: 300; line-height: 150%;}
.privacy_sec .sec_des{display: flex; gap: 1rem; margin-top: 0.5rem; color: #aaa;}
.privacy_sec .sec_des .name{position: relative;}
.privacy_sec .sec_des .name::after{display: block; content: ""; width: 1px; height: 0.625rem; background: rgba(34, 34, 34, 0.15); position: absolute; right: -0.5rem; top: 50%; transform: translateY(-50%);}
.privacy_sec .desc{margin-bottom: 0.5rem;}
.privacy_sec .next{margin: 3.5rem 0; text-align: center;}
.privacy_sec h3 {margin-bottom: 1rem;}
/* --------------------------------privacy end----------------------------- */


/* --------------------------------inquiry----------------------------- */
.inquiry_sec{width: 100%; overflow-x: hidden; background-color: #f8f8f8;}
.inquiry_sec .sec_tit{margin-bottom: 2.5rem;}
.inquiry_sec .box_01{text-align: left;}
.inquiry_sec .title{font-size: 1.5rem; font-weight: 700; line-height: 133%;}
.inquiry_sec .info{color: #888; margin-bottom: 1.5rem;}
.inquiry_sec .form_list h4{margin-bottom: 1.25rem; color: #444;}
.inquiry_sec .form_list li:not(:last-child){margin-bottom: 1.5rem;}
.inquiry_sec .radio_wrap{display: flex; justify-content: space-between; align-items: center;}
.inquiry_sec .radio_wrap li{width: calc((100% - (0.5rem * 3)) / 4); height: 2.75rem; color: #666; font-size: 0.875rem; font-weight: 600; line-height: 142%; position: relative;}
.inquiry_sec .radio_wrap input[type="radio"]{width: 100%; height: 100%;}
.inquiry_sec .radio_wrap input[type="radio"] + label{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; position: absolute; left: 0; top: 0;}
.inquiry_sec .radio_wrap input[type="radio"]:checked + label{border: 2px solid #6049ea; color: #6049ea;}
.inquiry_sec .input_wrap:has(textarea){position: relative;}
.inquiry_sec .input_wrap input::placeholder,
.inquiry_sec .input_wrap textarea::placeholder,
.inquiry_sec .charNum{color: #aaa; font-weight: 400; font-size: 0.875rem; line-height: 142%;}
@media screen and (max-width: 767px) {
    .inquiry_sec .cont_box_wrap{position: relative; box-sizing: border-box; left: 50%; transform: translateX(-50vw); width: 100vw;}
}
/* --------------------------------inquiry end----------------------------- */


/* --------------------------------notice----------------------------- */
.notice_sec .sec_tit{padding-bottom: 2.5rem; border-bottom: 2px solid #222;}
.notice_sec .notice_list{display: flex; flex-direction: column;}
.notice_sec .notice_list li{padding: 2rem 0; border-bottom: 1px solid #f0f0f0;}
.notice_sec .notice_list li a{display: flex; align-items: center; gap: 2rem;}
.notice_sec .notice_list figure{width: 11.25rem; height: 7.25rem; background-color: #ccc; background-size: cover; background-position: center;}
.notice_sec .notice_list .txt_box{flex: 1;}
.notice_sec .notice_list .tit{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #222; font-size: 1.125rem; font-weight: 700; line-height: 144%;}
.notice_sec .notice_list .dt{margin-top: 0.5rem; color: #888; font-size: 1rem; font-weight: 500; line-height: 150%;}
.notice_sec .notice_list .ico_arrow{display: inline-block; width: 2rem; height: 2rem; background: url(/front/images/common/ico_down.svg) no-repeat center/100% auto; transform: rotate(90deg);}
@media screen and (max-width: 767px) {
    .notice_sec .notice_list li a{gap: 1rem;}
    .notice_sec .notice_list figure{width: 6.875rem; height: 4.375rem;}
}

/*notice_detail*/
.notice_detail_sec .list_tit{-webkit-line-clamp: 1;}
/* --------------------------------notice end----------------------------- */


/* --------------------------------onboarding_sec end----------------------------- */
/*온보딩 공통*/
.onboarding_sec {width: 100%;}
.onboarding_sec img {display: block; width: 100%;}
.onboarding_sec .inner {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 100%; max-width: unset; min-height: calc(var(--vh, 1vh) * 100); overflow: hidden;}
/*시작화면*/
.onboarding_sec .start {width: 90%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.onboarding_sec .start .img_wrap {position: relative;}
.onboarding_sec .start .bg {position: relative; max-width: 312px; z-index: 1;}
.onboarding_sec .start [class^="img_0"] {position: absolute; background-size: 100% auto; background-position: center; background-repeat: no-repeat; z-index: 0;}
.onboarding_sec .start .img_01 {left: calc((14/312)*100%); top: calc((58/306)*100%); width: calc((142/312)*100%); height: calc((116/306)*100%); background-image: url(/front/images/etc/onboarding_start_img_1.png);}
.onboarding_sec .start .img_02 {left: calc((155/312)*100%); top: 0; width: calc((92/312)*100%); height: calc((152/306)*100%); background-image: url(/front/images/etc/onboarding_start_img_2.png);}
.onboarding_sec .start .img_03 {left: calc((22/312)*100%); top: calc((192/306)*100%); width: calc((134/312)*100%); height: calc((120/306)*100%); background-image: url(/front/images/etc/onboarding_start_img_3.png);}
.onboarding_sec .start .img_04 {left: calc((170/312)*100%); top: calc((154/306)*100%); width: calc((138/312)*100%); height: calc((148/306)*100%); background-image: url(/front/images/etc/onboarding_start_img_4.png);}
.onboarding_sec .start .text_wrap {margin: 40px 0 56px; text-align: center;}
.onboarding_sec .start .sub_tit {font-size: 22px; font-weight: 500; line-height: 145%;}
.onboarding_sec .start .tit {display: flex; justify-content: center; align-items: center; gap: 6px;}
.onboarding_sec .start .tit span {position: relative; display: inline-block; font-size: 32px; font-weight: 800; line-height: 125%;}
.onboarding_sec .start .on_btn_wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 296px;}
.onboarding_sec .go_to_step {display: block; width: 100%; padding: 16px 24px; font-size: 16px; font-weight: 700; color: #fff; line-height: 138%; background-color: #6049EA; animation: pulseBtn 1.4s ease-out infinite; transform-origin: center center;}
.onboarding_sec .go_to_step span {display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.8); line-height: 150%;}
.onboarding_sec .go_to_main {display: inline-block; margin-top: 16px; font-size: 12px; color: #aaa; font-weight: 500; border-bottom: 1px solid #aaa; line-height: 150%;}
.onboarding_sec .start .img_01 {animation: rotate_c .8s ease-in-out infinite alternate;}
.onboarding_sec .start .img_02 {animation: rotate_l .8s ease-in-out infinite alternate;}
.onboarding_sec .start .img_03 {animation: rotate_a .8s ease-in-out infinite alternate;}
.onboarding_sec .start .img_04 {animation: rotate_p .8s ease-in-out infinite alternate;}
/*스텝별 show*/
.onboarding_sec .step {opacity: 0; pointer-events: none;}
.onboarding_sec .step.is-show {opacity: 1; pointer-events: auto;}
.onboarding_sec [class^="step_"] {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; z-index: 1; pointer-events: none;}
.onboarding_sec [class^="step_"].is-current {z-index: 2; pointer-events: auto;}
/*click 요소들*/
.onboarding_sec .bot {position: absolute; bottom: 0; left: 50%; width: 100%; transform: translateX(-50%); z-index: 2;}
.onboarding_sec .click_wrap {position: relative; width: 100%; z-index: 3;}
.onboarding_sec .click_wrap .inner_box {position: relative; width: 100%; max-width: 500px; margin: 0 auto; box-shadow: 0 -6px 20px rgba(34,34,34,0.08); }
.onboarding_sec .btn_clap_wrap {position: absolute; left: calc((228/360)*100%); top: -5%; width: calc((80/360)*100%); height: calc((80/80)*100%);}
.onboarding_sec .btn_clap {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: url(/front/images/etc/clab_btn_bg.png) no-repeat center/100% auto;; border-radius: 8px; box-shadow: 4px 4px 10px rgba(0,0,0,0.1); z-index: 4;}
.onboarding_sec .btn_clap .ico {width: calc((36/80)*100%); height: calc((36/80)*100%); background: url(/front/images/etc/ico_clab.png) no-repeat center/100% auto;}
.onboarding_sec .btn_clap .num {display: block; text-align: center; font-size: 16px; font-weight: 700; color: #222; line-height: 180%;}
.onboarding_sec .btn_cmt_wrap {position: absolute; left: 50%; bottom: 3%; width: calc((296/312)*100%); height: calc((80/342)*100%); transform: translateX(-50%);}
.onboarding_sec .btn_cmt_wrap::after {content: "댓글도 칭찬 참여예요 ✍️"; position: absolute; left: 50%; top: -20px; background: url(/front/images/etc/cmt_btn_info.png) no-repeat bottom center/100% auto; z-index: 5; transform: translateX(-50%); line-height: 150%; padding: 4px 8px 12px 8px; color: #fff; font-weight: 600; font-size: 12px; white-space: nowrap;}
.onboarding_sec .btn_cmt {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: url(/front/images/etc/cmt_btn_bg.png) no-repeat center/contain; border-radius: 8px; box-shadow: 4px 4px 10px rgba(0,0,0,0.1); z-index: 4;}
.onboarding_sec .btn_cmt span {position: absolute; width: calc((264/296)*100%); height: calc((48/80)*100%); display: flex; justify-content: center; align-items: center; text-align: center; background-color: #6049EA; color: #fff; font-weight: 700; font-size: 14px;}
.onboarding_sec .post_sec .inner_box {position: relative; width: 100%; max-width: 500px; margin: 0 auto; box-shadow: 0 -6px 20px rgba(34, 34, 34, 0.08);}
.onboarding_sec .btn_post_wrap {position: absolute; right: calc((20/360)*100%);; top: 50%; transform: translateY(-50%); width: calc((88/360)*100%); height: calc((102/100)*100%);z-index: 4;}
.onboarding_sec .btn_post {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: url(/front/images/etc/post_btn_bg.png) no-repeat center/100% auto; border-radius: 8px; box-shadow: 4px 4px 10px rgba(0,0,0,0.1); z-index: 4;}
.onboarding_sec .btn_post span {position: absolute; width: calc((56/88)*100%); height: calc((80/112)*100%); display: flex; justify-content: center; align-items: center; text-align: center; background-color: #6049EA; color: #fff; font-weight: 700; font-size: 14px;}
/*버튼 효과*/
.waves {position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; background-color: rgba(255,255,255,0.2); transform:translate(-50%,-50%); opacity: 0; border-radius: 16px; z-index: 3;}
.btn_clap_wrap .waves {animation: waves1 3s ease-in-out infinite;}
.btn_cmt_wrap .waves {animation: waves2 3s ease-in-out infinite;}
.btn_post_wrap .waves {animation: waves1 3s ease-in-out infinite;}
.btn_clap_wrap .wave-1,
.btn_cmt_wrap .wave-1,
.btn_post_wrap .wave-1 {animation-delay: 0s;}
.btn_clap_wrap .wave-2,
.btn_cmt_wrap .wave-2,
.btn_post_wrap .wave-2 {animation-delay: 1s;}
.btn_clap_wrap .wave-3,
.btn_cmt_wrap .wave-3,
.btn_post_wrap .wave-3 {animation-delay: 2s;}
/*인디케이터*/
.onboarding_sec .indicate {position: relative; background: #222;}
.onboarding_sec .indicate .inner_box {width: 100%; max-width: 500px; height: calc((250/740)*100%); padding: 40px 32px 32px; margin: 0 auto;}
.onboarding_sec .indicate .paging {display: flex; gap: 4px; margin-bottom: 108px;}
.onboarding_sec .indicate .paging li {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: rgba(255,255,255,0.1); border-radius: 100%; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6);}
.onboarding_sec .indicate .paging li.on {background-color: #6049EA; color: #fff;}
.onboarding_sec .indicate .on_btn_wrap {display: flex; gap: 4px;}
.onboarding_sec .indicate .on_btn_wrap button {height: 48px;}
.onboarding_sec .indicate .btn_prev {flex: 48px 0 0; background: url(/front/images/etc/btn_prev.png) no-repeat center/100% auto;}
.onboarding_sec .indicate .btn_next {position: relative; flex: 1 0 0; font-size: 14px; font-weight: 700; color: #fff; background-color: rgba(255,255,255,0.1);}
.onboarding_sec .indicate .btn_next::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #6049EA; transform: scaleX(0); transform-origin: left top; }
.onboarding_sec .indicate .btn_next span {position: relative; z-index: 1;  color: rgba(255,255,255,0.3); transition: color 0.2s ease-in-out;}
.onboarding_sec .indicate .btn_next.on span {color: rgba(255,255,255,1); transition-delay: 0.4s;}
.onboarding_sec .indicate .btn_next.on::before {transform: scaleX(100%); transition: transform 0.5s ease-in-out;}
/*하단 텍스트*/
.onboarding_sec .text_box {position: absolute; left: 0; bottom: 120px; width: 100%; z-index: 5;}
.onboarding_sec .text_box .inner_box {width: 100%; max-width: 500px; padding: 0 32px; margin: 0 auto;}
.onboarding_sec .text_box .text {height: 56px; font-size: 20px; color: #fff; font-weight: 500; line-height: 140%; white-space: nowrap;}
.onboarding_sec .text_box span {font-weight: 700;}
.onboarding_sec .text_box .ico_clab {display: inline-block; width: 28px; height: 28px; margin-left: 4px; background: url(/front/images/etc/ico_clab_3.png) no-repeat center/100% auto; vertical-align: top;}
/*스텝 배경*/
.onboarding_sec [class^="step_" ] .bg {position: relative; width: 100%; max-width: 500px; min-height: calc(var(--vh, 1vh) * 100);}
.onboarding_sec .step_1 .bg {background: url(/front/images/etc/onboarding_step_1_bg.jpg) no-repeat top center/100% auto;}
.onboarding_sec .step_2 .bg {background: url(/front/images/etc/onboarding_step_1_bg.jpg) no-repeat top center/100% auto; will-change: opacity, transform;}
.onboarding_sec .step_3 .bg {background: url(/front/images/etc/onboarding_step_1_bg.jpg) no-repeat top center/100% auto;}
/*팝업*/
.onboarding_sec .on_popup {position: absolute; left: 50%; top: calc((100/740)*100%); width: 87%; max-width: 400px; transform: translateX(-50%); background: #fff; z-index: 5;}
/*start 효과*/
.start .sub_tit,
.start .tit span {opacity: 0; transform: translateY(10px);}
.start.is-show .sub_tit,
.start.is-show .tit span {opacity: 1; transform: translateY(0); transition: all 0.5s ease-in-out;}
.start.is-show .tit span:nth-child(1) {transition-delay: 0.3s;}
.start.is-show .tit span:nth-child(2) {transition-delay: 0.6s;}
.start.is-show .tit span:nth-child(3) {transition-delay: 0.9s;}
/* step_1 박수 버튼 사라지는 애니 */
.onboarding_sec .step_1 .btn_clap_wrap {transition: opacity 0.5s ease-out;}
.onboarding_sec .step_1 .btn_clap_wrap.is-hide {opacity: 0; pointer-events: none;}
/* step_1 팝업 페이드 */
.onboarding_sec .step_1 .on_popup {opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; display: block;}
.onboarding_sec .step_1 .on_popup.is-show {opacity: 1; pointer-events: auto;}
/* step_2 댓글 버튼 사라지는 애니 */
.onboarding_sec .step_2 .btn_cmt_wrap {transition: opacity 0.5s ease-out;}
.onboarding_sec .step_2 .btn_cmt_wrap.is-hide {opacity: 0; pointer-events: none;}
/* step_2 팝업 페이드아웃 */
.onboarding_sec .step_2 .on_popup {opacity: 1;transition: opacity 0.5s ease-out; display: block;}
.onboarding_sec .step_2 .on_popup.is-hide {opacity: 0;pointer-events: none;}
/* step_2 댓글 섹션 show */
.onboarding_sec .step_2 .bg.is-change {background-image: url(/front/images/etc/onboarding_step_2_bg.jpg);}
.onboarding_sec .step_2 .post_sec {opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out;}
.onboarding_sec .step_2 .post_sec.is-show {opacity: 1; pointer-events: auto;}
/* step_3 팝업 */
.onboarding_sec .step_3 .on_popup {top: calc(50svh - 150px); width: 92%; max-width: 450px; padding: 16px 16px 24px; border-radius: 8px; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.10); opacity: 0;pointer-events: none; transition: opacity 0.5s ease-out;}
.onboarding_sec .step_3 .on_popup.is-show {opacity: 1; pointer-events: auto;}
.onboarding_sec .step_3 .amount {display: flex; align-items: center; gap: 2px; margin-bottom: 16px;}
.onboarding_sec .step_3 .amount span {color: #222; font-weight: 700; font-size: 20px;}
.onboarding_sec .step_3 .amount p {font-size: 16px; color: #444;}
.onboarding_sec .step_3 .goal,
.onboarding_sec .step_3 .date {display: flex; justify-content: space-between; align-items: center;}
.onboarding_sec .step_3 .goal p:nth-child(1),
.onboarding_sec .step_3 .date p:nth-child(1) {font-size: 12px; color: #666; font-weight: 500;}
.onboarding_sec .step_3 .goal p:nth-child(2),
.onboarding_sec .step_3 .date p:nth-child(2) {font-size: 14px; color: #222; font-weight: 700;}
.onboarding_sec .step_3 .pg_bar {position: relative; width: 100%; height: 12px; margin: 5px 0; border: 1px solid #6049EA;}
.onboarding_sec .step_3 .bar {position: absolute; left: 0; top: 0; height: 100%; max-width: 100%; background-color: #6049EA;}
.onboarding_sec .step_3 .btn_go_campaign {display: flex; align-items: center; justify-content: center; text-align: center; flex: 1; background-color: #6049EA; color: #fff; font-size: 14px; font-weight: 700; animation: pulseBtn 1.4s ease-out infinite; transform-origin: center center}
.onboarding_sec .step_3 .ani_box {position: absolute; right: calc((8/360) * 100%); ; top: -5%; width: calc((134/360) * 100%); height: calc((76/80) * 100%); display: flex; padding: 10px 6px 6px; border-radius: 8px; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.10); background-color: #fff; opacity: 1; transition: opacity 0.4s ease-out;}
.onboarding_sec .step_3 .ani_box.is-hide {opacity: 0;pointer-events: none;}
.onboarding_sec .step_3 .ani_box::after {content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 50%; background-color: #D9D9D9; transform: translate(-50%, -50%);}
.onboarding_sec .step_3 .ani_box >div {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; height: calc((56/60) * 100%);  background-color: #fff;}
.onboarding_sec .step_3 .ani_box i {display: block; width:  calc((32/60) * 100%); height: calc((32/60) * 100%);}
.onboarding_sec .step_3 .ani_box span {font-size: 16px; color: #222; line-height: 150%; font-weight: 700;}
.onboarding_sec .step_3 .clap_num i {background: url(/front/images/etc/ico_clab_2.png) no-repeat top center/100% auto;}
.onboarding_sec .step_3 .share_num i {background: url(/front/images/etc/ico_share.png) no-repeat top center/100% auto;}
/* 공통 텍스트 페이드 */
.onboarding_sec .text {transition: opacity 0.5s ease-out;}
.onboarding_sec .text.is-fade-out {opacity: 0;}
.onboarding_sec .text.is-fade-in {opacity: 1;}
/* 이전 버튼으로 상태 초기화할 때, 잠깐 애니메이션 OFF */
.onboarding_sec.no-ani * {transition: none !important; animation: none !important;}
@keyframes rotate_c {
    0%{transform:rotate(3deg);}
    100%{transform:rotate(-3deg);}
}
@keyframes rotate_l {
    0%{transform:rotate(-4deg);}
    100%{transform:rotate(4deg);}
}
@keyframes rotate_a {
    0%{transform:rotate(2deg);}
    100%{transform:rotate(-2deg);}
}
@keyframes rotate_p {
    0%{transform:rotate(-3deg);}
    100%{transform:rotate(3deg);}
}
@keyframes waves1 {
    0%{transform:translate(-50%,-50%) scale(1.1); opacity:0;}
    50%{opacity:1;}
    100%{transform:translate(-50%,-50%) scale(1.4); opacity:0;}
}
@keyframes waves2 {
    0%{transform:translate(-50%,-50%) scaleX(1) scaleY(1); opacity:0;}
    50%{opacity:1;}
    100%{transform:translate(-50%,-50%) scaleX(1.15) scaleY(1.4);; opacity:0;}
}
@keyframes pulseBtn {
    0% {transform: scale(1);}
    70% {transform: scale(1.06);}
    100% {transform: scale(1);}
}
/* --------------------------------onboarding_sec end----------------------------- */


/* --------------------------------sec_notif----------------------------- */
.notif_sec {padding: 24px 0 48px;}
.notif_sec .tit {font-weight: 600; font-size: 14px; color: #222; line-height: 142%;}
.notif_sec .desc {margin-top: 2px; color: #666; font-size: 12px; line-height: 150%;}
/*list*/
.notif_sec[data-layout="list"] .inner {width: 100%;}
.notif_sec[data-layout="list"] .info {margin-top: 24px; font-size: 12px; color: #888; line-height: 150%; text-align: center;}
.notif_all_list >li:not(:last-child) {margin-bottom: 32px;}
.notif_all_list .date {padding: 6px 5%; font-size: 12px; line-height: 150%; font-weight: 500; color: #222; font-family:'Pretendard', sans-serif;}
.notif_list .flex_wrap {position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 5%; text-align: start;}
.notif_list .ico {display: block; width: 40px; height: 40px; border-radius: 100%; background: url(/front/images/common/ico_notification.png) no-repeat center/24px auto #fafafa;}
.notif_list .text_box {width: calc(100% - 40px - 16px - 22px);}
.notif_list .tit,
.notif_list .desc {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notif_list .unread .flex_wrap {background-color: #FAFAFE;}
.notif_list .unread .flex_wrap::after {content: ""; position: absolute; right: 5%; top: 50%; width: 4px; height: 4px; border-radius: 100%; background-color: #6049EA; transform: translateY(-50%);}
.notif_list .unread .ico {background-color: #fff}
/*setting*/
.notif_sec[data-layout="setting"] li {display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 0;}
.notif_sec[data-layout="setting"] .toggle-input {position: absolute; opacity: 0; width: 0; height: 0;}
.notif_sec[data-layout="setting"] .toggle-label {display: inline-block; position: relative; width: 30px; height: 16px; border-radius: 999px; background-color: #fff; border: 1px solid rgba(34, 34, 34, 0.15); cursor: pointer; transition: background 0.3s ease, border-color 0.25s ease;}
.notif_sec[data-layout="setting"] .toggle-knob {position: absolute; top: 50%; left: 2px; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(34, 34, 34, 0.15); transform: translateY(-50%); transition: transform 0.3s ease;}
.notif_sec[data-layout="setting"] .toggle-input:checked + .toggle-label {background-color: #6049EA; border-color: #6049EA;}
.notif_sec[data-layout="setting"] .toggle-input:checked + .toggle-label .toggle-knob {background-color: #fff; transform: translate(14px, -50%);}
/* --------------------------------sec_notif end----------------------------- */