@charset "UTF-8";

/* wrap */
/* **************************** S:wrap **************************** */
#wrap{background-color: transparent;overflow: hidden;z-index: 2;opacity: 0;transition: opacity .15s;}
#wrap.on_ready{opacity: 1;}
#wrap .wrap_inner{position: relative;z-index: 3;height: 100%;padding-left: 40px;overflow-y: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;scroll-behavior: smooth;}
#wrap.menu_on .wrap_inner{overflow-y: hidden;}
#wrap.filter_on .wrap_inner{overflow-y: hidden;}
/* **************************** //E:wrap  **************************** */



/* header */
/* **************************** S:header **************************** */
#header{position: fixed;left: 0;top: 0;bottom: 0;z-index: 100;width: 40px;max-width: 327px;height: 100%;background-color: var(--color-gray2);transition: width 750ms cubic-bezier(0.76, 0, 0.24, 1);}
#header::after{content: '';position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 100;opacity: 0;pointer-events: none;background-color: #E6E2DD;background-image: url('../images/common/header_bg.png');background-repeat: no-repeat;background-size: 327px auto;background-position: bottom right;transition: opacity 500ms cubic-bezier(0.76, 0, 0.24, 1);}
/* #header::after{content: '';position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 100;opacity: 0;pointer-events: none;background-color: #E6E2DD;background-image: url('../images/common/header_bg_new.png');background-repeat: no-repeat;background-size: 327px auto;background-position: bottom right;transition: opacity 500ms cubic-bezier(0.76, 0, 0.24, 1);} */
#header.menu_on{width: calc(100% - 48px);}
#header.menu_on::after{opacity: 1;}
@media (max-width: 359px){
    #header.menu_on{width: 100%;max-width: 100%;}
}

#header .hd_inner{width: 40px;height: 100%;padding: 16px 11px;position: absolute;right: 0;top: 0;bottom: 0;z-index: 101;background-color: var(--color-gray2);display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;flex-direction: column;opacity: 1;pointer-events: visible;transition: opacity 350ms cubic-bezier(0.76, 0, 0.24, 1);}
#header.menu_on .hd_inner{opacity: 0;pointer-events: none;}
#header .hd_left{flex: 0 0 auto;display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;row-gap: 16px;}
#header #hd_logo{flex: 0 0 auto;}
#header #hd_logo .logo_img_box{display: block;width: 13px;height: 156px;line-height: 0;}
#header #hd_logo .logo_img_box svg{width: 100%;height: 100%;pointer-events: none;}

/* #header .page_name_box{flex: 0 0 auto;display: inline-flex;align-items: center;flex-wrap: nowrap;flex-direction: column;}
#header .page_name_box .page_name{display: inline-block;font-size: var(--fs-15);font-weight: 400;line-height: var(--lh-13);color: var(--color-black2);letter-spacing: 0.005em;white-space: nowrap;writing-mode: sideways-rl;-moz-writing-mode: sideways-rl;-webkit-writing-mode: sideways-rl;}
#header .page_name_box .icon_and{display: inline-block;width: 11px;height: 11px;margin-left: -1px;margin-top: 3px;line-height: 0;writing-mode: sideways-rl;pointer-events: none;transform: rotate(90deg);transform-origin: center center;}
#header .page_name_box .icon_and svg{width: 100%;height: 100%;pointer-events: none;}
#header .page_name_box .icon_and svg path{fill: var(--color-black2);stroke: var(--color-black2);} */

#header .page_name_box{display: inline-block;line-height: 0;}
#header .page_name_box .icon_page_name{display: inline-block;width: 11px;height: auto;pointer-events: none;}
#header .page_name_box .icon_page_name svg{width: 100%;height: auto;pointer-events: none;}
#header .page_name_box .icon_page_name #Layer_1{margin-left: -2px;}

#header .util_box{flex: 0 0 auto;}
#header .util_box .util_list{padding-bottom: 32px;}
#header .util_box .util_item{line-height: 0;}
#header .util_box .util_item .btns{display: inline-block;line-height: 0;cursor: pointer;}
#header .util_box .util_item .btns .icon_box{display: inline-block;width: 18px;height: 18px;pointer-events: none;}
#header .util_box .util_item .btns .icon_box svg{width: 100%;height: 100%;}

#header #gnb{display: flex;align-items: flex-start;justify-content: space-between;flex-direction: column;row-gap: 16px;width: calc(100% - 0px);height: 100%;position: relative;z-index: 101;opacity: 0;transition-property: opacity;pointer-events: none;transition-duration: 180ms;transition-delay: 150ms;transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);}
#header.menu_on #gnb{opacity: 1;pointer-events: visible;transition-delay: 350ms;}

#header #gnb .gnb_inner{width: 100%;}
#header #gnb .gnb_menu_box{}
#header #gnb .gnb_menu_box + .gnb_menu_box{border-top: 1px solid var(--color-gray3);}
#header #gnb .gnb_menu_box .box_inner{width: 100%;padding: 16px 12px;box-sizing: border-box;position: relative;}
#header #gnb .gnb_menu_box .menu_cate_box{position: absolute;left: 12px;top: 20px;line-height: 0;}
#header #gnb .gnb_menu_box .menu_cate_box .menu_cate{display: inline-block;font-size: var(--fs-8);font-weight: 400;line-height: var(--lh-11);color: var(--color-black1);letter-spacing: 0.04em;writing-mode: vertical-lr;-webkit-text-stroke-width: 0.2px;}

#header #gnb .gnb_menu_box .menu_list{padding-left: 24px;}
#header #gnb .gnb_menu_box .menu_list .menu_item{}
#header #gnb .gnb_menu_box .menu_list .menu_item + .menu_item{margin-top: 10px;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_link{display: block;line-height: 0;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name{display: inline-block;font-size: var(--fs-20);font-weight: 400;line-height: var(--lh-24);color: var(--color-black1);white-space: nowrap;}

#header #gnb .gnb_menu_box .menu_list > .menu_item .menu_name.ty_and{display: flex;align-items: center;flex-wrap: nowrap;column-gap: 2px;}
#header #gnb .gnb_menu_box .menu_list > .menu_item .menu_name.ty_and::after{content: '';display: inline-block;width: 14px;height: 16px;background-image: url('../images/icon/icon_and.svg');background-repeat: no-repeat;background-size: cover;background-position: center center;}

#header #gnb .gnb_menu_box .menu_list .menu_item .menu_link.has_sub_txt{display: flex;align-items: flex-end;flex-wrap: nowrap;column-gap: 6px;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_link .menu_sub_name{display: inline-block;font-size: var(--fs-10);font-weight: 400;line-height: var(--lh-20);color: var(--color-black1);letter-spacing: 0.01em;white-space: nowrap;}
.is-pc #header #gnb .gnb_menu_box .menu_list .menu_item .menu_link .menu_sub_name{opacity: 0;transition: opacity .3s;}
@media (hover: hover){
    .is-pc #header #gnb .gnb_menu_box .menu_list .menu_item .menu_link:hover .menu_sub_name{opacity: 1;}
}
/* 지점 선택 영역 */
/* **************************** S:지점 선택 영역 **************************** */
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box{display: flex;align-items: flex-start;flex-wrap: nowrap;column-gap: 6px;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box > .menu_name{flex: 0 0 auto;}

#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right{flex: 1;cursor: pointer;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right.opened{}

#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_hd{display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_hd > .menu_link{flex: 0 0 auto;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_btns{padding: 4px;line-height: 0;cursor: pointer;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_btns .icon_box{display: inline-block;width: 16px;height: 16px;pointer-events: none;transform: rotate(0);transform-origin: center center;transition: transform .75s cubic-bezier(.4,0,.2,1);}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_btns.opened .icon_box{transform: rotate(-180deg);}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right.opened .acc_btns .icon_box{transform: rotate(-180deg);}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_btns .icon_box svg{width: 100%;height: 100%;pointer-events: none;}

#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_list{padding-top: 8px;pointer-events: none;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_list.opened{pointer-events: visible;}

#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_item{}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_item + .menu_name_item{margin-top: 8px;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_item .menu_link{display: block;overflow: hidden;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_item .menu_name{color: var(--color-gray5);opacity: 0;transform: translate(0, -100%);transition: opacity .65s, transform .75s cubic-bezier(.4,0,.2,1);transition-delay: 0s;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right.opened .menu_name_item .menu_name{opacity: 1;transform: translate(0, 0);}

/* 251016 희상추가 S */
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_hd .menu_name.is_new{display: flex;align-items: flex-end;flex-wrap: nowrap;column-gap: 4px;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_hd .menu_name.is_new .menu_new{display: inline-block;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-18);color: var(--color-red1);letter-spacing: 0.04em;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_item .menu_name.is_new{display: flex;align-items: flex-end;flex-wrap: nowrap;column-gap: 4px;}
#header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_item .menu_name.is_new .menu_new{display: inline-block;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-18);color: var(--color-gray5);letter-spacing: 0.04em;}
/* 251016 희상추가 E */

#header #gnb .user_menu_box{width: 100%;}
#header #gnb .user_menu_box .user_menu_inner{width: 100%;padding: 16px 12px 16px 16px;box-sizing: border-box;}
#header #gnb .user_menu_box .user_menu_list{}
#header #gnb .user_menu_box .user_menu_item{line-height: 0;}
#header #gnb .user_menu_box .user_menu_item + .user_menu_item{margin-top: 10px;}
#header #gnb .user_menu_box .user_menu_item .user_menu_link{display: inline-flex;align-items: center;flex-wrap: nowrap;column-gap: 8px;}
#header #gnb .user_menu_box .user_menu_item .user_menu_link .icon_box{flex: 0 0 auto;display: inline-block;width: 20px;height: 20px;pointer-events: none;}
#header #gnb .user_menu_box .user_menu_item .user_menu_link .icon_box svg{width: 100%;height: 100%;pointer-events: none;}
#header #gnb .user_menu_box .user_menu_item .user_menu_link .user_menu_name{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-20);color: var(--color-black1);letter-spacing: 0.005em;}

/* #header #btnMenu{position: absolute;bottom: 16px;right: 11px;z-index: 101;padding: 2px 0;cursor: pointer;line-height: 0;}
#header #btnMenu,
#header #btnMenu span {display: inline-block;transition: all .75s;box-sizing: border-box;}
#header #btnMenu .btns_inner{position: relative;width: 18px;height: 12px;}
#header #btnMenu span{position: absolute;left: 0;width: 100%;height: 1.2px;background-color: var(--color-black2);}
#header #btnMenu span:nth-of-type(1){top: 0;}
#header #btnMenu span:nth-of-type(1)::before{content: '';display: block;width: 50%;height: 1.2px;background-color: var(--color-black2);position: absolute;left: 0;opacity: 0;pointer-events: none;}
#header #btnMenu span:nth-of-type(1)::after{content: '';display: block;width: calc(50% - 2px);height: 1.2px;background-color: var(--color-black2);position: absolute;right: 0;opacity: 0;pointer-events: none;}
#header #btnMenu span:nth-of-type(2){top: 5.5px;}
#header #btnMenu span:nth-of-type(3){bottom: 0;}
#header #btnMenu.active span:nth-of-type(1) {animation: active-btnmenu-bar01 0.75s forwards;background-color: transparent;}
#header #btnMenu.active span:nth-of-type(1)::before{opacity: 1;}
#header #btnMenu.active span:nth-of-type(1)::after{opacity: 1;}
#header #btnMenu.active span:nth-of-type(3) {animation: active-btnmenu-bar03 0.75s forwards;}
#header #btnMenu.active span:nth-of-type(2) {opacity: 0;}
#header #btnMenu.deactive span:nth-of-type(1) {animation: deactive-btnmenu-bar01 0.75s forwards;}
#header #btnMenu.deactive span:nth-of-type(3) {animation: deactive-btnmenu-bar03 0.75s forwards;}
#header #btnMenu.deactive span:nth-of-type(2) {opacity: 1;}
@keyframes deactive-btnmenu-bar01 {
    0% { transform: translateY(5.5px) rotate(45deg);}
    50% { transform: translateY(5.5px) rotate(0);}
    100% { transform: translateY(0) rotate(0);}
}
@keyframes deactive-btnmenu-bar03 {
    0% { transform: translateY(-5.5px) rotate(-45deg);}
    50% { transform: translateY(-5.5px) rotate(0);}
    100% { transform: translateY(0) rotate(0);}
}
@keyframes active-btnmenu-bar01{
    0%{transform: translateY(0) rotate(0);}
    50%{transform: translateY(5.5px) rotate(0);}
    100%{transform: translateY(5.5px) rotate(45deg);}
}
@keyframes active-btnmenu-bar03{
    0%{transform: translateY(0) rotate(0);}
    50%{transform: translateY(-5.5px) rotate(0);}
    100%{transform: translateY(-5.5px) rotate(-45deg);}
} */
#header #btnMenu{position: absolute;bottom: 16px;right: 10px;z-index: 101;padding: 2px 0;cursor: pointer;line-height: 0;}
#header #btnMenu,
#header #btnMenu span{display: inline-block;transition: all 0.75s;box-sizing: border-box;}
#header #btnMenu .btns_inner{position: relative;width: 19px;height: 12px;}
#header #btnMenu span{position: absolute;left: 0;width: 100%;height: 1px;background-color: var(--color-black2);transform: scaleY(1.2);transform-origin: center;}
#header #btnMenu span:nth-of-type(1){ top: 0; }
#header #btnMenu span:nth-of-type(2){top: 50%;transform: translateY(-50%) scaleY(1.2);}
#header #btnMenu span:nth-of-type(3){ bottom: 0; }
#header #btnMenu span:nth-of-type(1)::before,
#header #btnMenu span:nth-of-type(1)::after{content: '';display: block;position: absolute;height: 1px;background-color: var(--color-black2);transform: scaleY(1.2);transform-origin: center;opacity: 0;pointer-events: none;transition: opacity 0.75s;}
#header #btnMenu span:nth-of-type(1)::before{width: 50%;left: 0;}
#header #btnMenu span:nth-of-type(1)::after{width: calc(50% - 2px);right: 0;}
#header #btnMenu.active span:nth-of-type(1){animation: active-btnmenu-bar01 0.75s forwards;background-color: transparent;}
#header #btnMenu.active span:nth-of-type(2){opacity: 0;}
#header #btnMenu.active span:nth-of-type(3){animation: active-btnmenu-bar03 0.75s forwards;}
#header #btnMenu.active span:nth-of-type(1)::before,
#header #btnMenu.active span:nth-of-type(1)::after{opacity: 1;}
#header #btnMenu.deactive span:nth-of-type(1){animation: deactive-btnmenu-bar01 0.75s forwards;}
#header #btnMenu.deactive span:nth-of-type(2){opacity: 1;}
#header #btnMenu.deactive span:nth-of-type(3){animation: deactive-btnmenu-bar03 0.75s forwards;}
@keyframes active-btnmenu-bar01 {
    0%{transform: translateY(0) rotate(0) scaleY(1.2);}
    50%{transform: translateY(5.5px) rotate(0) scaleY(1.2);}
    100%{transform: translateY(5.5px) rotate(45deg) scaleY(1.2);}
}
@keyframes active-btnmenu-bar03 {
    0%{transform: translateY(0) rotate(0) scaleY(1.2);}
    50%{transform: translateY(-5.5px) rotate(0) scaleY(1.2);}
    100%{transform: translateY(-5.5px) rotate(-45deg) scaleY(1.2);}
}

@keyframes deactive-btnmenu-bar01 {
    0%{transform: translateY(5.5px) rotate(45deg) scaleY(1.2);}
    50%{transform: translateY(5.5px) rotate(0) scaleY(1.2);}
    100%{transform: translateY(0) rotate(0) scaleY(1.2);}
}
@keyframes deactive-btnmenu-bar03 {
    0%{transform: translateY(-5.5px) rotate(-45deg) scaleY(1.2);}
    50%{transform: translateY(-5.5px) rotate(0) scaleY(1.2);}
    100%{transform: translateY(0) rotate(0) scaleY(1.2);}
}
/* **************************** //E:지점 선택 영역  **************************** */

@media (max-width: 320px){
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_name{font-size: var(--fs-18);line-height: var(--lh-22);}
    #header #gnb .gnb_menu_box .menu_list > .menu_item .menu_name.ty_and::after{width: 12px;height: 14px;}
    
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_link.has_sub_txt{column-gap: 4px;}
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_link .menu_sub_name{font-size: var(--fs-8);line-height: var(--lh-18);}
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box{column-gap: 4px;}
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_btns{padding: 2px;}
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_btns .icon_box{width: 14px;height: 14px;}
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_right .acc_hd .menu_name.is_new .menu_new{font-size: var(--fs-10);}
    #header #gnb .gnb_menu_box .menu_list .menu_item .menu_name_box .menu_name_item .menu_name.is_new .menu_new{font-size: var(--fs-10);}
}
@media (max-width: 280px){
    #header #gnb .gnb_menu_box .box_inner{padding: 14px 10px;}
    #header #gnb .gnb_menu_box .menu_list{padding-left: 22px;}
    #header #gnb .gnb_menu_box .menu_cate_box{left: 10px;top: 18px;}

    #header #gnb .user_menu_box .user_menu_inner{padding: 14px 12px 14px 14px;}
}
/* **************************** //E:header  **************************** */



/* container */
/* **************************** S:container **************************** */
#container{width: 100%;}
/* **************************** //E:container  **************************** */



/* content */
/* **************************** S:content **************************** */
/* **************************** //E:content  **************************** */



/* footer */
/* **************************** S:footer **************************** */
#footer{width: 100%;background-color: var(--color-gray4);}
#footer .ft_inner{width: 100%;padding: 50px 16px;box-sizing: border-box;}
#footer .ft_logo_box{width: 100%;line-height: 0;}
#footer #ft_logo{width: 100%;line-height: 0;}
#footer #ft_logo .logo_img_box{display: block;width: 100%;line-height: 0;}
#footer #ft_logo .logo_img_box svg{width: 100%;height: auto;pointer-events: none;}

#footer .ft_info_box{display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: nowrap;column-gap: 8px;}
#footer .ft_logo_box + .ft_info_box{margin-top: 16px;}
#footer .ft_info_box .left_cnt_box{flex: 0 0 auto;text-align: left;}
#footer .ft_info_box .right_cnt_box{flex: 0 0 auto;text-align: right;}
#footer .ft_info_box .info_cnt_box{}
#footer .ft_info_box .info_cnt_box .info_txt{font-size: var(--fs-10);font-weight: 400;line-height: var(--lh-15);color: var(--color-ivory2);letter-spacing: 0.04em;word-break: keep-all;text-transform: uppercase;}
#footer .ft_info_box .info_cnt_box .info_txt + .info_txt{}

#footer .ft_slogan_box{}
#footer .ft_info_box + .ft_slogan_box{margin-top: 42px;}
#footer .ft_slogan_box .slogan_txt{padding-top: 6px;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-16);color: var(--color-ivory2);text-align: left;word-break: keep-all;position: relative;}
#footer .ft_slogan_box .slogan_txt::before{content: '';display: block;width: 10px;height: 0.7px;background-color: var(--color-ivory2);position: absolute;left: 0;top: 0;}
/* **************************** //E:footer  **************************** */



/* dimed */
/* **************************** S:dimed **************************** */
#dimed{position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99;width: 100%;height: 100%;background-color: var(--bg-dark-area2);opacity: 0;pointer-events: none;/*cursor: pointer;*/transition: opacity 750ms cubic-bezier(0.76, 0, 0.24, 1);}
#dimed.dimed_on{opacity: 1;pointer-events: visible;}
/* **************************** //E:dimed  **************************** */



/* pageTopBtns */
/* **************************** S:pageTopBtns **************************** */
#wrap #pageTopBtns{display: flex;align-items: center;justify-content: center;line-height: 0;cursor: pointer;width: 45px;height: 45px;border-radius: 50%;background-color: rgba(0, 0, 0, .7);position: fixed;right: 16px;bottom: 14px;z-index: 98;opacity: 0;pointer-events: none;transition: opacity .35s ease-in;}
#wrap #pageTopBtns.on{opacity: 1;pointer-events: visible;}
#wrap #pageTopBtns .icon_top_arr{display: inline-block;width: 16px;height: 16px;margin-left: -2px;pointer-events: none;}
#wrap #pageTopBtns .icon_top_arr svg{width: 100%;height: 100%;pointer-events: none;}
/* **************************** //E:pageTopBtns  **************************** */


/* sort_box */
/* **************************** S:sort_box **************************** */
#sortBox{flex: 0 0 auto;position: relative;z-index: 1;}
#sortBox #btnsSort{display: flex;align-items: center;flex-wrap: nowrap;column-gap: 8px;line-height: 0;}
#sortBox #btnsSort .sort_btns_name{flex: 0 0 auto;display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-21);color: var(--color-black1);letter-spacing: 0.005em;}
#sortBox #btnsSort .icon_sort_arr{flex: 0 0 auto;display: inline-block;width: 10px;height: 6px;margin-top: 2px;pointer-events: none;transform: rotate(0);transform-origin: center center;transition: transform .45s ease;}
#sortBox #btnsSort .icon_sort_arr svg{width: 100%;height: 100%;pointer-events: none;}
#sortBox #btnsSort.actived{}
#sortBox #btnsSort.actived .icon_sort_arr{transform: rotate(-180deg);}

#sortBox .sort_list{pointer-events: none;opacity: 0;background-color: var(--color-ivory2);transform: translateY(20px);transition: all .45s ease;position: absolute;top: calc(100% + 12px);right: -16px;z-index: 2;box-shadow: -2px 3px 5px rgba(133, 122, 105, 0.1);}
#sortBox #btnsSort.actived + .sort_list{opacity: 1;transform: translateY(0);pointer-events: visible;}

#sortBox .sort_list .sort_item{padding: 10px 16px;background-color: var(--color-ivory2);cursor: pointer;transition: background-color .35s, border-color .35s;}
#sortBox .sort_list .sort_item:hover{background-color: rgba(172, 172, 172, .2);border-color: var(--color-gray3)}
#sortBox .sort_list .sort_item:hover + .sort_item{border-color: var(--color-gray3);}
#sortBox .sort_list .sort_item + .sort_item:hover{border-color: var(--color-gray3)}
#sortBox .sort_list .sort_item + .sort_item{border-top: 1px solid var(--color-gray2);}
#sortBox .sort_list .sort_item .sort_name{display: block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-21);color: var(--color-gray5);letter-spacing: 0.005em;white-space: nowrap;transition: color .35s;}
#sortBox .sort_list .sort_item.selected .sort_name{color: var(--color-black1);}
#sortBox .sort_list .sort_item:hover .sort_name{color: var(--color-black1);}
/* **************************** //E:sort_box  **************************** */

/* search input */
/* **************************** S:search input **************************** */
#srhInpWrap{width: 100%;position: relative;}
#srhInpWrap::after{content: '';display: block;width: 100%;height: 1px;background-color: var(--color-black1);position: absolute;left: 0;bottom: 0;right: 0;}
#srhInpWrap .srh_inp_box{display: flex;align-items: center;flex-wrap: nowrap;column-gap: 12px;width: 100%;padding: 12px 16px;box-sizing: border-box;background-color: var(--color-ivory2);}
#srhInpWrap .srh_inp_box #pageBackBtns{flex: 0 0 auto;line-height: 0;}
#srhInpWrap .srh_inp_box #pageBackBtns .icon_back{display: inline-block;width: 10px;height: 18px;pointer-events: none;}
#srhInpWrap .srh_inp_box #pageBackBtns .icon_back svg{width: 100%;height: 100%;pointer-events: none;}
#srhInpWrap .srh_inp_box #srhField{flex: 1 1 0%;width: 100%;height: 20px;background-color: var(--color-ivory2);font-size: var(--fs-15);font-weight: 400;line-height: var(--lh-20);color: var(--color-red1);letter-spacing: 0.01em;}
#srhInpWrap .srh_inp_box #srhField::placeholder{color: var(--color-gray3);}
#srhInpWrap .srh_inp_box #srhSubmitBtns{flex: 0 0 auto;line-height: 0;}
#srhInpWrap .srh_inp_box #srhSubmitBtns .icon_srh{display: inline-block;width: 18px;height: 18px;pointer-events: none;}
#srhInpWrap .srh_inp_box #srhSubmitBtns .icon_srh svg{width: 100%;height: 100%;pointer-events: none;}
/* **************************** //E:search input  **************************** */

/* filter */
/* **************************** S:filter **************************** */
#filterBox{flex: 0 0 auto;line-height: 0;}
#filterBox .filter_btns{display: inline-block;line-height: 0;}
#filterBox .filter_btns .btns_name{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-21);color: var(--color-black1);letter-spacing: 0.005em;}
#filterBox + .sort_box{padding-left: 11px;}
#filterBox + .sort_box::before{content: '';display: block;width: 1px;height: calc(100% - 10px);background-color: var(--color-black1);position: absolute;left: 0;top: 50%;transform: translateY(-50%);}

#filterResultWrap{width: 100%;overflow: hidden;background-color: var(--color-ivory2);position: relative;}
#filterResultWrap::after{content: '';display: block;width: 100%;height: 1px;background-color: var(--color-gray3);position: absolute;left: 0;bottom: 0;right: 0;}
#filterResultWrap .filter_result_list{display: flex;align-items: center;flex-wrap: nowrap;column-gap: 8px;width: 100%;padding: 12px 16px;overflow: hidden;overflow-x: auto;cursor: grab;user-select: none;-ms-overflow-style: none;scrollbar-width: none;}
#filterResultWrap .filter_result_list::-webkit-scrollbar {display: none;}
#filterResultWrap .filter_result_item{background-color: var(--color-gray2);}
#filterResultWrap .filter_result_item .item_inner{display: flex;align-items: center;flex-wrap: nowrap;padding: 0 0 0 8px;}
#filterResultWrap .filter_result_item .filter_name{display: inline-block;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-16);color: var(--color-black1);white-space: nowrap;}
#filterResultWrap .filter_result_item .filter_delete_btns{display: inline-block;padding: 7px 8px;line-height: 0;box-sizing: border-box;}
#filterResultWrap .filter_result_item .filter_delete_btns .icon_filter_delete{display: inline-block;width: 10px;height: 10px;pointer-events: none;}
#filterResultWrap .filter_result_item .filter_delete_btns .icon_filter_delete svg{width: 100%;height: 100%;pointer-events: none4;}

#filterWrap{position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 200;pointer-events: none;}
#filterWrap .filter_inner{width: 100%;height: 100%;pointer-events: none;}

#filterWrap .filter_inner::after{content: '';display: block;width: 100%;height: 100%;background-color: var(--bg-dark-area2);position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 200;pointer-events: none;opacity: 0;transition: opacity .65s;}
#filterWrap.opened .filter_inner{pointer-events: auto;}
#filterWrap.opened .filter_inner::after{opacity: 1;pointer-events: auto;}

#filterWrap .filter_srh_box{width: 100%;background-color: var(--color-ivory2);position: absolute;left: 0;bottom: 0;right: 0;z-index: 201;transform: translateY(100%);transition: transform .75s;}
#filterWrap.opened .filter_srh_box{transform: translateY(0);}

#filterWrap .filter_srh_box #btns_filterWrapClose{display: inline-block;padding: 8px 16px 16px;position: absolute;left: 50%;top: 0;transform: translateX(-50%);}
#filterWrap .filter_srh_box #btns_filterWrapClose .btns_bar{display: block;width: 48px;height: 3px;background-color: var(--color-gray3);pointer-events: none;}

#filterWrap .filter_srh_box .srh_box{background-color: var(--color-ivory2);}
#filterWrap .filter_srh_box .srh_box .box_inner{width: 100%;padding: 24px 16px;box-sizing: border-box;}
#filterWrap .filter_srh_box .srh_box + .srh_box .box_inner{border-top: 1px solid var(--color-gray2);}
#filterWrap .filter_srh_box .srh_box .box_hd{}
#filterWrap .filter_srh_box .srh_box .box_hd.ty_flex{display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;column-gap: 8px;}
#filterWrap .filter_srh_box .srh_box .box_bd{margin-top: 16px;}

#filterWrap .filter_srh_box .srh_box .hd_tit_box{flex: 0 0 auto;}
#filterWrap .filter_srh_box .srh_box .hd_tit_box .hd_tit{font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-20);color: var(--color-black1);letter-spacing: 0.005em;}
#filterWrap .filter_srh_box .srh_box .hd_btns_box{flex: 0 0 auto;}
#filterWrap .filter_srh_box .srh_box .hd_btns_box .select_all_btns{display: inline-flex;align-items: center;flex-wrap: nowrap;line-height: 0;}
#filterWrap .filter_srh_box .srh_box .hd_btns_box .select_all_btns .btns_name{display: inline-block;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-20);color: var(--color-gray4);letter-spacing: 0.005em;}

#filterWrap .filter_srh_box .day_list{display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;column-gap: 4px;}
/* #filterWrap .filter_srh_box .day_list .day_item{} */
#filterWrap .filter_srh_box .day_list .day_item{width: calc((100% / 7) - (24px / 7));height: 0;padding-top: calc((100% / 7) - (24px / 7));position: relative;}
#filterWrap .filter_srh_box .day_list .day_item .day_inp{}
/* #filterWrap .filter_srh_box .day_list .day_item .day_label{display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;background-color: var(--color-ivory2);border: 1px solid var(--color-gray2);border-radius: 50%;overflow: hidden;cursor: pointer;transition: border-color .45s;} */
#filterWrap .filter_srh_box .day_list .day_item .day_label{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background-color: var(--color-ivory2);border: 1px solid var(--color-gray2);border-radius: 50%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow: hidden;cursor: pointer;transition: border-color .45s;}
#filterWrap .filter_srh_box .day_list .day_item .day_label .day_txt{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-16);color: var(--color-gray4);transition: color .45s;}
#filterWrap .filter_srh_box .day_list .day_item .day_inp:checked + .day_label{border-color: var(--color-red1);}
#filterWrap .filter_srh_box .day_list .day_item .day_inp:checked + .day_label .day_txt{color: var(--color-red1);}

#filterWrap .filter_srh_box .time_range_wrap{position: relative;}
#filterWrap .filter_srh_box .range_bar{position: relative;height: 16px;}
#filterWrap .filter_srh_box .range_bar::after{content: '';display: block;width: 100%;height: 1px;background-color: var(--color-gray2);position: absolute;top: 50%;left: 0;right: 0;z-index: 1;transform: translateY(-50%) scaleY(1.2);}
#filterWrap .filter_srh_box .range_fill{position: absolute;top: 50%;height: 1px;background-color: var(--color-red1);transform: translateY(-50%) scaleY(1.2);z-index: 2;}
#filterWrap .filter_srh_box .slider {position: absolute;width: 100%;height: 16px;margin: 0;background: none;-webkit-appearance: none;pointer-events: none;z-index: 2;}
#filterWrap .filter_srh_box .slider::-webkit-slider-thumb{width: 16px;height: 16px;border: 1.2px solid var(--color-red1);background-color: var(--color-ivory2);border-radius: 50%;cursor: pointer;transform: translateY(-50%);box-shadow: none;pointer-events: auto;-webkit-appearance: none;}
#filterWrap .filter_srh_box .slider::-webkit-slider-runnable-track{height: 1.2px;background: transparent;}
#filterWrap .filter_srh_box .slider-start{z-index: 3;}
#filterWrap .filter_srh_box .slider-end{z-index: 3;}
#filterWrap .filter_srh_box .time_labels {display: flex;justify-content: space-between;margin-top: 10px;flex-wrap: nowrap;line-height: 0;}
#filterWrap .filter_srh_box .time_labels .time_label{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-16);color: var(--color-gray4);opacity: 0;transition: all 0.45s;}
#filterWrap .filter_srh_box .time_labels .time_label.always{opacity: 1;}
#filterWrap .filter_srh_box .time_labels .time_label.active{color: var(--color-red1);opacity: 1;}

#filterWrap .filter_srh_box .filter_btns_box{width: 100%;display: flex;align-items: center;flex-wrap: nowrap;}
#filterWrap .filter_srh_box #btnsFilterReset{flex: 0 0 auto;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;width: 49px;height: 44px;background-color: var(--color-black2);}
#filterWrap .filter_srh_box #btnsFilterReset .icon_filter_reset{display: inline-block;width: 18px;height: 18px;pointer-events: none;}
#filterWrap .filter_srh_box #btnsFilterReset .icon_filter_reset svg{width: 100%;height: 100%;pointer-events: none;}
#filterWrap .filter_srh_box #btnsFilterReset .icon_filter_reset svg path{fill: var(--color-gray2);}
#filterWrap .filter_srh_box #btnsFilterSubmit{flex: 1;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;height: 44px;background-color: var(--color-black2);}
#filterWrap .filter_srh_box #btnsFilterSubmit .btns_name{display: inline-block;margin-left: -49px;font-size: var(--fs-15);font-weight: 400;line-height: var(--lh-20);color: var(--color-gray2);}

@media (max-width: 360px){
    #filterWrap .filter_srh_box .srh_box .hd_tit_box .hd_tit{font-size: var(--fs-14);}
    #filterWrap .filter_srh_box .srh_box .hd_btns_box .select_all_btns .btns_name{font-size: var(--fs-14);}
    #filterWrap .filter_srh_box .day_list .day_item .day_label .day_txt{font-size: var(--fs-12);line-height: var(--lh-14);}
    #filterWrap .filter_srh_box .time_labels .time_label{font-size: var(--fs-12);}
}
@media (max-width: 320px){
    #filterWrap .filter_srh_box .srh_box .box_inner{padding: 24px 8px;}
}
@media (max-width: 300px){
    #filterWrap .filter_srh_box .srh_box .hd_tit_box .hd_tit{font-size: var(--fs-12);}
    #filterWrap .filter_srh_box .srh_box .hd_btns_box .select_all_btns .btns_name{font-size: var(--fs-12);}
    #filterWrap .filter_srh_box .day_list .day_item .day_label .day_txt{font-size: var(--fs-10);line-height: var(--lh-12);}
    #filterWrap .filter_srh_box .time_labels .time_label{font-size: var(--fs-10);}
}
/* **************************** //E:filter  **************************** */