/* 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 : #9747FF;
  --pr2 : #BEA1FD;
  --pr3 : #5b2f84;
  --yellow : #FBE902;
  --red : #D70000;
  --new : #ABB5FD;
  --hot : #F05CD2;
  --black_3 : #333333;
  --gray_d9 : #D9D9D9;
  --gray_9 : #999999;
  --gray_6 : #666666;
  --gray_e5 : #E5E5E5;
  --wt : #ffffff;
  --wt_fc : #FCFCFC;
  --wt_fa : #FAFAFA;
  --wt_f5 : #F5F5F5;
}

/* background */
.pr {background: #9747FF !important;}
.pr2 {background: #BEA1FD !important;}
.pr3 {background: #5b2f84 !important;}
.yellow {background: #FBE902 !important;}
.red {background: #D70000 !important;}
.new {background: #ABB5FD !important;}
.hot {background: #F05CD2 !important;}
.black_3 {background: #333333 !important;}
.gray_d9 {background: #D9D9D9 !important;}
.gray_9 {background: #999999 !important;}
.gray_6 {background: #666666 !important;}
.gray_e5 {background: #E5E5E5 !important;}
.wt {background: #ffffff !important;}
.wt_fc {background: #FCFCFC !important;}
.wt_fa {background: #FAFAFA !important;}
.wt_f5 {background: #F5F5F5 !important;}

/* color */
.pr_c {color: #9747FF !important;}
.pr2_c {color: #BEA1FD !important;}
.pr3_c {color: #5b2f84 !important;}
.yellow_c {color: #FBE902 !important;}
.red_c {color: #D70000 !important;}
.new_c {color: #ABB5FD !important;}
.hot_c {color: #F05CD2 !important;}
.black_3_c {color: #333333 !important;}
.gray_d9_c {color: #D9D9D9 !important;}
.gray_9_c {color: #999999 !important;}
.gray_6_c {color: #666666 !important;}
.gray_e5_c {color: #E5E5E5 !important;}
.wt_c {color: #ffffff !important;}
.wt_fc_c {color: #FCFCFC !important;}
.wt_fa_c {color: #FAFAFA !important;}
.wt_f5_c {color: #F5F5F5 !important;}

body {font-family: 'Pre';}
.container {max-width: 1280px; width: 100%; margin: 0 auto; box-sizing: border-box;}
section {padding: 120px 0;}
section.sub {padding-top: 190px;}

/* top_box */
.top_box {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 60px;}
.top_box .tit-box {margin-bottom: 0;}

/* tit-box */
.tit-box {margin-bottom: 60px;}
.tit-box.flex {display: flex; align-items: flex-end; justify-content: space-between;}
.tit-box .tit {font-size: 40px; font-weight: 400; line-height: 1.3; letter-spacing: -1.6px; color: var(--black_3);}
.tit-box .tit b {font-weight: bold;}
.tit-box .sub {margin-bottom: 15px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.72px; color: var(--pr);}
.tit-box a {display: flex; align-items: center; gap: 2px; margin-top: 15px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.72px; color: var(--pr);}
.tit-box a img {width: 20px; height: auto;}
.tit-box .current_num {font-size: 16px; font-weight: bold; line-height: 1; color: var(--black_3);}
.tit-box .current_num span {font-size: 20px; color: var(--pr);}
.tit-box .mark {display: flex; align-items: center; gap: 10px; margin-top: 15px;}
.tit-box .mark span {display: flex; align-items: center; justify-content: center; gap: 6px; width: 90px; height: 30px; border: 1px solid var(--pr); border-radius: 16px;}
.tit-box .mark span img {width: 22px; height: auto;}

.tit-box .mark input {display: none;}
.tit-box .mark label {display: flex; align-items: center; justify-content: center; gap: 6px; width: 90px; height: 30px; border: 1px solid var(--pr); border-radius: 16px;}
.tit-box .mark label img {width: 22px; height: auto;}
.tit-box .mark input:checked + label {background: var(--pr); color: var(--wt);}

/* tit-box2 */
.tit-box2 {text-align: center; margin-bottom: 60px;}
.tit-box2 .tit {font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: 3.6px; color: rgba(255, 255, 255, 0.5);}

.slide_btns {display: flex; align-items: center; gap: 20px;}
.slide_btns button {position: relative; width: 60px; height: auto; border-radius: 100%;}
.slide_btns button img {width: 100%; height: auto;}
.slide_btns button img.on {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all .3s; z-index: 5;}
.slide_btns button:hover img + .on {opacity: 1;}

/* side_menu */
.side_menu {max-width: 310px; width: 100%; height: auto; padding: 60px 0; border: 1px solid var(--gray_d9); border-radius: 20px;}
.side_menu::-webkit-scrollbar,
.side_menu::-webkit-scrollbar-thumb,
.side_menu::-webkit-scrollbar-track {display:none;}

.side_menu .filter {padding: 0 20px; box-sizing: border-box;}
.side_menu .item {padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid var(--gray_d9);}
.side_menu .item:last-of-type {padding-bottom: 0; margin-bottom: 0; border: none;}
.side_menu .filter .filter_tit {margin-bottom: 50px;}
.side_menu .filter .filter_tit .sub {margin-bottom: 4px; font-size: 14px; font-weight: bold; line-height: 1; color: var(--gray_9);}
.side_menu .filter .filter_tit .tit {display: flex; align-items: center; justify-content: space-between;}
.side_menu .filter .filter_tit .tit p {font-size: 22px; font-weight: bold; line-height: 1; color: var(--black_3);}
.side_menu .filter .filter_tit .tit .reset_btn {display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: bold; line-height: 1; color: var(--pr);}
.side_menu .filter .filter_tit .tit .reset_btn img {width: 16px; height: auto;}

.side_menu .filter .price_filter {display: flex; align-items: center; flex-wrap: wrap; gap: 15px 0; margin: 0 -5px;}
.side_menu .filter .pf_tit {margin-bottom: 20px; font-size: 18px; font-weight: bold; line-height: 1; color: var(--black_3);}
.side_menu .filter .price_filter .price_btn {width: calc(100% / 2); height: auto; padding: 0 5px; box-sizing: border-box;}
.side_menu .filter .price_filter .price_btn span {display: flex; align-items: center; justify-content: center; width: 100%; height: 37px; background: var(--wt_f5); border-radius: 60px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--gray_9);}
.side_menu .filter .price_filter .price_btn.active span {background: var(--pr); color: var(--wt);}

.side_menu .filter .ckd-box {display: flex; align-items: center; flex-wrap: wrap; gap: 15px 0; margin: 0 -5px;}
.side_menu .filter .ckd-box input {display: none;}
.side_menu .filter .ckd-box label {width: calc(100% / 2); height: auto; padding: 0 5px; box-sizing: border-box;}
.side_menu .filter .ckd-box label span {display: flex; align-items: center; justify-content: center; width: 100%; height: 37px; background: var(--wt_f5); border-radius: 60px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--gray_9);}
.side_menu .filter .ckd-box input:checked + label span {background: var(--pr); color: var(--wt);}

.side_menu .filter .toggle_tit.off {margin: -20px 0;}
.side_menu .filter .toggle_tit {position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 1px 0; background: var(--wt); z-index: 2;}
.side_menu .filter .toggle_tit .tit {font-size: 18px; font-weight: bold; line-height: 1; color: var(--black_3);}
.side_menu .filter .toggle_tit .toggle_btn {position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 100%;}
.side_menu .filter .toggle_tit .toggle_btn:before {content: ''; display: block; width: 20px; height: auto; aspect-ratio: 1; background: url(./../img/toggle_up_icon.png)no-repeat 50% 50%; background-size: cover;}
.side_menu .filter .toggle_tit.off .toggle_btn:before {transform: rotate(180deg);}

.side_menu .filter .toggle_txt {display: none; padding-top: 20px;}
.side_menu .filter .toggle_txt dl {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.side_menu .filter .toggle_txt dl:last-of-type {margin-bottom: 0;}
.side_menu .filter .toggle_txt dl dt {font-size: 16px; font-weight: 400; line-height: 1; color: var(--black_3);}
.side_menu .filter .toggle_txt dl dd {font-size: 16px; font-weight: 400; line-height: 1; color: var(--gray_9);}

.side_menu .filter .toggle_txt input {display: none;}
.side_menu .filter .toggle_txt label {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.side_menu .filter .toggle_txt label:last-of-type {margin-bottom: 0;}
.side_menu .filter .toggle_txt label .dt {font-size: 16px; font-weight: 400; line-height: 1; color: var(--black_3);}
.side_menu .filter .toggle_txt label .dd {font-size: 15px; font-weight: 400; line-height: 1; color: var(--gray_9);}
.side_menu .filter .toggle_txt input:checked + label .dt {font-weight: 500; color: var(--pr);}
.side_menu .filter .toggle_txt input:checked + label .dd {font-weight: 500; color: var(--pr);}

/* search_box */
.search_box {display: flex; align-items: center; width: 100%; height: 65px; border: 3px solid var(--pr); background: var(--wt); box-sizing: border-box;}
.search_box input {width: 100%; height: 100%; padding: 20px; background: var(--wt); font-size: 18px; font-weight: bold; line-height: 1; color: var(--black_3); outline: none; box-sizing: border-box;}
.search_box input::placeholder {color: var(--gray_d9);}
.search_box .submit_btn {display: flex; align-items: center; justify-content: center; width: 220px; height: 100%; background: var(--pr); box-sizing: border-box; font-size: 18px; font-weight: bold; line-height: 1; color: var(--wt);}

/* po_btns */
.po_btns {display: flex; align-items: center; justify-content: flex-end; margin: 30px 0 15px;}
.po_btns select {width: auto; height: auto; padding-right: 26px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--black_3); appearance: none; background: url(./../img/select_icon2.png)no-repeat 100% 50%; background-size: 16px; outline: none;}

/* pager */
.pager {width: 100%; height: auto; margin-top: 60px;}
.pager ul {display: flex; align-items: center; justify-content: center; gap: 16px;}
.pager ul li {width: 32px; height: 32px;}
.pager ul li a {display: block;}
.pager ul .arrow1 .prev {width: 100%; height: auto;}
.pager ul .arrow1 .prev img {width: 100%; height: auto;}
.pager ul .arrow1 .next {width: 100%; height: auto;}
.pager ul .arrow1 .next img {width: 100%; height: auto;}

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

/* state */
.state {position: absolute; top: 15px; right: 15px; display: flex; align-items: center; gap: 6px;}
.state span {display: flex; align-items: center; justify-content: center; width: 35px; height: auto; aspect-ratio: 1; border-radius: 100%; font-size: 10px; font-weight: 600; line-height: 1; color: var(--wt);}
.state span.b {background: var(--pr);}
.state span.n {background: var(--new);}
.state span.h {background: var(--hot);}

.filter_search_btn_box {display: flex; align-items: center; justify-content: center;}
.side_menu .btn_call_filter_search {width: calc(100% - 20px) !important; margin: 0 auto 0;}

.mo_btn2 {display: none;}