.popup_area {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 440px; width: calc(100% - 60px); height: calc(100vh - 50px); padding: 50px 10px; background: var(--wt); box-sizing: border-box; border-radius: 20px; z-index: 10;}
.popup_area .popup_container {height: 100%; padding: 0 20px; box-sizing: border-box; overflow: auto; overflow-x: hidden;}

.popup_area .popup_container::-webkit-scrollbar{width: 7px;}
.popup_area .popup_container::-webkit-scrollbar-thumb{background-color: #333333; border-radius: 60px; background-clip: padding-box; border: 2px solid transparent;}
.popup_area .popup_container::-webkit-scrollbar-track{background-color: #D9D9D9; border-radius: 60px;}

.popup_area .popup_container .popup_box {margin-bottom: 50px;}
.popup_area .popup_container .popup_box:last-of-type {margin-bottom: 0;}
.popup_area .close_btn {position: absolute; top: 15px; right: 11px; width: 20px; height: auto;}
.popup_area .close_btn img {width: 100%; height: auto;}

.popup_area .popup_container .popup_tit {margin-bottom: 30px; text-align: center;}
.popup_area .popup_container .popup_tit .tit {font-family: 'cafe24'; font-size: 32px; font-weight: bold; line-height: 1.3; letter-spacing: -1.28px; color: var(--black_3);}
.popup_area .popup_container .popup_tit .tit.cafe24 {margin-bottom: 30px;}
.popup_area .popup_container .popup_tit .tit span {color: var(--pr);}
.popup_area .popup_container .popup_tit .sub {margin-top: 20px; font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -0.88px; color: var(--gray_6); word-break: keep-all;}
.popup_area .popup_container .popup_tit .img-box {display: flex; flex-flow: column; align-items: center; justify-content: center;}
.popup_area .popup_container .popup_tit .img-box figure {display: flex; align-items: center; justify-content: center; width: 80px; height: auto; aspect-ratio: 1/1; margin-bottom: 10px; background: var(--wt_f5); border-radius: 100%;}
.popup_area .popup_container .popup_tit .img-box figure img {width: 40px; height: auto;}
.popup_area .popup_container .popup_tit .img-box p {font-size: 18px; font-weight: bold; line-height: 1.3; letter-spacing: -0.72px; color: var(--black_3);}
.popup_area .popup_container .popup_tit .img-box p span {color: var(--pr);}

.popup_area .popup_container .popup_ct {width: 100%; height: auto; padding: 17px 20px 23px; margin-bottom: 20px; background: var(--wt_f8); border-radius: 12px; box-sizing: border-box;}
.popup_area .popup_container .popup_ct:last-of-type {margin-bottom: 0;}
.popup_area .popup_container .popup_ct .popup_ct_tit {margin-bottom: 16px; text-align: center;}
.popup_area .popup_container .popup_ct .popup_ct_tit .d-flex {display: flex; align-items: center; justify-content: center; gap: 6px;}
.popup_area .popup_container .popup_ct .popup_ct_tit .num {display: flex; align-items: center; justify-content: center; width: 22px; height: auto; aspect-ratio: 1/1; background: var(--pr); border-radius: 100%; font-size: 10px; font-weight: bold; line-height: 1; letter-spacing: -0.4px; color: var(--wt);}
.popup_area .popup_container .popup_ct .popup_ct_tit .tit {font-size: 18px; font-weight: bold; line-height: 1.3; letter-spacing: -0.72px; color: var(--black_3);}
.popup_area .popup_container .popup_ct .popup_ct_tit .txt {margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.28px; color: var(--gray_6);}

.popup_area .popup_container .popup_ct .popup_ct_txt {width: 100%; height: auto;}
.popup_area .popup_container .popup_ct .popup_ct_txt ul {display: flex; align-items: center; justify-content: center; gap: 10px;}
.popup_area .popup_container .popup_ct .popup_ct_txt ul li {width: 100%; height: auto;}
.popup_area .popup_container .popup_ct .popup_ct_txt ul li .child-box {display: flex; align-items: center; flex-flow: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100px; border-radius: 8px; padding: 14px 10px; box-sizing: border-box; text-align: center;}
.popup_area .popup_container .popup_ct .popup_ct_txt ul li:first-of-type .child-box {background: var(--pr2);}
.popup_area .popup_container .popup_ct .popup_ct_txt ul li:last-of-type .child-box {background: var(--yellow2);}
.popup_area .popup_container .popup_ct .popup_ct_txt ul li .child-box .tit {font-size: 12px; font-weight: bold; line-height: 1.3; letter-spacing: -0.24px; color: var(--black_3);}
.popup_area .popup_container .popup_ct .popup_ct_txt ul li .child-box .tit span {color: var(--pr);}
.popup_area .popup_container .popup_ct .popup_ct_txt ul li .child-box .txt {font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: -0.24px; color: var(--gray_6); word-break: keep-all;}

/* popup_ct */
.popup_area .popup_container .popup_ct2 {width: 100%; height: auto;}
.popup_area .popup_container .popup_ct2 ul {display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 10px;}
.popup_area .popup_container .popup_ct2 ul li {width: 100%; height: auto;}
.popup_area .popup_container .popup_ct2 ul li .child-box {padding: 16px 0 18px; background: var(--pr2); border-radius: 8px; box-sizing: border-box;}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_tit {display: flex; align-items: center; justify-content: space-between; padding: 0 16px; box-sizing: border-box;}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_tit .d-flex {display: flex; align-items: center; gap: 10px;}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_tit .ab {display: flex; align-items: center; justify-content: center; width: 68px; height: 30px; border-radius: 60px; background: var(--pr); font-size: 14px; font-weight: bold; line-height: 1.3; letter-spacing: -0.56px; color: var(--wt);}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_tit .tit {font-family: 'cafe24'; font-size: 16px; font-weight: bold; line-height: 1.3; letter-spacing: -0.64px; color: var(--black_3);}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_tit .toggle_btn {font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: -0.48px; color: var(--gray_9); border-bottom: 2px solid var(--gray_9);}

.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt {display: none; padding: 18px 16px 0; margin-top: 14px; box-sizing: border-box; border-top: 1px solid #cacaca; box-sizing: border-box;}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt .point_txt {width: 100%; height: auto; padding: 10px; margin-bottom: 8px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.5); border-radius: 6px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -0.28px; color: var(--black_3);}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt .point_txt span {font-weight: 400; color: var(--pr);}

.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt .dl-box {width: 100%; height: auto;}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt .dl-box dl {display: flex; align-items: center; gap: 6px;}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt .dl-box dt {}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt .dl-box dt img {width: 18px; height: auto;}
.popup_area .popup_container .popup_ct2 ul li .child-box .toggle_dt .dl-box dd {font-size: 12px; font-weight: 500; line-height: 2; letter-spacing: -0.48px; color: var(--gray_6);}

.popup_area .popup_form {width: 100%; height: auto; padding: 30px 24px; box-sizing: border-box; background: var(--wt_f5); border-radius: 20px;}
.popup_area .popup_form .popup_input {display: flex; align-items: center; gap: 15px; margin-bottom: 15px;}
.popup_area .popup_form .popup_input .tit {min-width: 68px; width: 68px; height: auto; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.64px; color: var(--black_3);}
.popup_area .popup_form .popup_input input {width: 100%; height: 46px; padding: 0 10px; box-sizing: border-box; border-radius: 8px; background: var(--wt); font-size: 14px; font-weight: 400; line-height: 1; color: var(--gray_9);}
.popup_area .popup_form .popup_input select {width: 100%; height: 46px; padding: 0 10px; box-sizing: border-box; border-radius: 8px; background: url(./../img/select_icon.png)no-repeat calc(100% - 10px); background-size: 18px; background-color: var(--wt); font-size: 14px; font-weight: 400; line-height: 1; color: var(--gray_9); appearance: none;}
.popup_area .popup_form .popup_input textarea {width: 100%; height: 107px; padding: 10px; box-sizing: border-box; border-radius: 8px; background: var(--wt); font-size: 14px; font-weight: 400; line-height: 1; color: var(--gray_9); resize: none;}


.popup_area .popup_form .popup_btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border-radius: 8px; background: var(--yellow); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.32px; color: var(--black_3);}

/* dim */
.dim {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 9;}