/* font */
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* //font */

:root {
  --pr : #FFBB3E;
  --red : #EF4848;
  --red_b : #FFEEEE;
  --blue : #1592FF;
  --blue_b : #EEF7FF;
  --black_3 : #333333;
  --gray_6 : #666666;
  --gray_9 : #999999;
  --gray_d9 : #d9d9d9;
  --gray_e2 : #E2E2E2;
  --gray_dc : #DCDCDC;
  --gray_de : #DEDEDE;
  --gray_ec : #ECECEC;
  --gray_a6 : #A6A6A6;
  --gray_4d : #4D4D4D;
  --gray_be : #BEBEBE;
  --gray_db : #dbdbdb;
  --wt : #FFFFFF;
  --wt_f5 : #F5F5F5;
  --wt_f8 : #F8F8F8;
}

/* bg */
.pr { background : #FFBB3E !important;}
.red { background : #EF4848 !important;}
.red_b { background : #FFEEEE !important;}
.blue { background : #1592FF !important;}
.blue_b { background : #EEF7FF !important;}
.black_3 { background : #333333 !important;}
.gray_6 { background : #666666 !important;}
.gray_9 { background : #999999 !important;}
.gray_e2 { background : #E2E2E2 !important;}
.gray_dc { background : #DCDCDC !important;}
.gray_de { background : #DEDEDE !important;}
.gray_ec { background : #ECECEC !important;}
.gray_a6 { background : #A6A6A6 !important;}
.gray_4d { background : #4D4D4D !important;}
.gray_be { background : #BEBEBE !important;}
.wt { background : #FFFFFF !important;}
.wt_f5 { background : #F5F5F5 !important;}
.wt_f8 { background : #F8F8F8 !important;}

/* color */
.pr_c { color : #FFBB3E !important;}
.red_c { color : #EF4848 !important;}
.red_b_c { color : #FFEEEE !important;}
.blue_c { color : #1592FF !important;}
.blue_b_c { color : #EEF7FF !important;}
.black_3_c { color : #333333 !important;}
.gray_6_c { color : #666666 !important;}
.gray_9_c { color : #999999 !important;}
.gray_e2_c { color : #E2E2E2 !important;}
.gray_dc_c { color : #DCDCDC !important;}
.gray_de_c { color : #DEDEDE !important;}
.gray_ec_c { color : #ECECEC !important;}
.gray_a6_c { color : #A6A6A6 !important;}
.gray_4d_c { color : #4D4D4D !important;}
.gray_be_c { color : #BEBEBE !important;}
.wt_c { color : #FFFFFF !important;}
.wt_f5_c { color : #F5F5F5 !important;}
.wt_f8_c { color : #F8F8F8 !important;}

body {font-family: 'Pre'; background: var(--wt_f8);}
.container {padding: 0 30px; box-sizing: border-box;}
#wrap {max-width: 500px; width: 100%; margin: 0 auto; box-sizing: border-box; box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.08);}
section {padding-top: 130px; padding-bottom: 55px; background: var(--wt_f5);}

/* tit-box */
.tit-box {margin-bottom: 50px; text-align: center;}
.tit-box .tit {margin-bottom: 10px; font-size: 28px; font-weight: bold; line-height: 1; letter-spacing: -0.56px; color: var(--black_3);}
.tit-box .sub {font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: -0.32px; color: var(--gray_6);}

/* tit-box2 */
.tit-box2 {display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.tit-box2 .tit {font-size: 20px; font-weight: bold; line-height: 1; letter-spacing: -0.4px; color: var(--black_3);}
.tit-box2 select {width: 180px; height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--gray_d9); border-radius: 4px; appearance: none; background: url(./../img/select_icon.png)no-repeat calc(100% - 12px) 50%; background-size: 10px 6px; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: -0.28px; color: var(--gray_9);}

/* pager */
.pager {width: 100%; height: auto; margin-top: 70px;}
.pager ul {display: flex; align-items: center; justify-content: center; gap: 16px;}
.pager ul .arrow {}
.pager ul .arrow a {display: flex; align-items: center; justify-content: center; width: 32px; height: auto; aspect-ratio: 1/1;}
.pager ul .arrow a img {}

.pager ul .num {}
.pager ul .num a {display: flex; align-items: center; justify-content: center; width: 32px; height: auto; aspect-ratio: 1/1; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.07px; color: var(--gray_9);}
.pager ul .num.active a {border-radius: 100%; background: var(--black_3); color: var(--wt);}

/* popup */
.dim {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.85); z-index: 19;}
.popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; max-width: 360px; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.25); background-color: var(--white); overflow: hidden; z-index: 20;}
.popup .popup_hd {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: var(--wt_f5);}
.popup .popup_hd .tit {font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -0.36px; color: var(--gray_9);}
.popup .popup_hd .close_btn {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20px; height: auto;}
.popup .popup_hd .close_btn img {width: 100%; height: auto;}

.popup .popup_body {padding: 51px 40px; box-sizing: border-box; background: var(--wt); text-align: center;}
.popup .popup_body .tit {margin-bottom: 10px; font-size: 20px; font-weight: bold; line-height: 1; letter-spacing: -0.4px; color: var(--black_3);}
.popup .popup_body .txt {font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.28px; color: var(--gray_9);}

.popup .popup_body .input-box {margin-top: 30px;}
.popup .popup_body .input-box .d-flex {display: flex; align-items: center; gap: 4px;}
.popup .popup_body .input-box .d-flex input {max-width: 180px; width: 100%; height: 40px; border-radius: 4px; border: 1px solid var(--black_3); padding: 0 12px; box-sizing: border-box; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: -0.28px; color: var(--black_3);}
.popup .popup_body .input-box .d-flex input::placeholder {color: var(--gray_6);}
.popup .popup_body .input-box .d-flex .submit_btn {display: flex; align-items: center; justify-content: center; width: 96px; height: 40px; border-radius: 4px; background: var(--black_3); font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: -0.24px; color: var(--wt);}