@charset "utf-8";   

:root {
  --position-main: relative;    /* 메뉴 고정 설정*/ /*메뉴 스크롤 설정 fixed relative absolute*/   
  --line-height_main: 80px;     /*메뉴 높이 설정*/
  --max-width_main: 1400px;     /*메뉴 너비 설정*/
  --menu-padding_main: 0 25px;  /*메뉴 간격 설정*/
  --z-index: 100;               /*메뉴 z-index 설정*/  
  --font-size: 18px;            /*메뉴 font-size 설정*/  
  --c8
}  

.art_basic #art_gnb_1dul {background:var(--color-fff)}
.art_basic #art_gnb_1dul a {display:inline-block; }
.art_basic #art_gnb_1dul .art_gnb_1dli {position:relative;line-height:40px;text-align: left;}
.art_basic #art_gnb_1dul .art_gnb_1dli button {position:absolute;top:5px;right:0;width:40px;height:40px;overflow:hidden;border:0;font-size:1.2em;background:var(--color-fff);background:url(img/gnb_bg.png) no-repeat 50% 50%;text-indent:-9999px}
.art_basic #art_gnb_1dul .art_gnb_1dli button.btn_gnb_cl {background:url(img/gnb_bg2.png) no-repeat 50% 50%}
.art_basic #art_gnb_1dul .art_gnb_1dli .art_gnb_1da {padding:5px 20px;border-bottom:1px solid #eee;font-weight:400;font-size:1rem;width: 100%;}
.art_basic #art_gnb_1dul .art_gnb_1dli .art_gnb_1da .gnb_2dul {display:none;background:#fafafa}
.art_basic #art_gnb_1dul .art_gnb_1dli .art_gnb_1da .gnb_2da {padding-left:30px}
#gnb_close {display:block;position:absolute;right:8px;top:0px;z-index:99;font-weight:bold;margin:0;height:40px;width:40px;border:0;color:#bfb8b2;font-size:2em;background:transparent}

#gnb_empty {padding:20px 0;color:var(--color-fff);text-align:center;line-height:2em}
#gnb_empty a {display:inline;text-decoration:underline}

#hd_sch {text-align:center;padding:12px 55px 12px 15px;background:#212020}
#hd_sch h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd_sch form {position:relative;padding-right:40px}
#hd_sch #sch_stx {width:100%;height:38px;margin-left:40px;background:#464646;border:0;color:var(--color-fff)}
#hd_sch #sch_submit {position:absolute;top:0;left:0;width:40px;height:38px;border:0;border-radius:3px;cursor:pointer;color:#a6a5a5;background:#464646;font-size:1.25em}

#user_btn1 { padding: 0px; height: 40px; border: 0; color: var(--color-fff); font-size: 1.3rem; background: none; letter-spacing: -0.1em;}
@media (min-width: 1060px) {
    #user_btn1 { display: none;  }
}
.shop_btn1 { position: relative; padding: 0px; border: 0; font-size: 1.3rem; background: none; letter-spacing: -0.1em;}
.shop_btn1 .count {position: absolute; background: #ff0000;width: 18px; height: 18px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; color: var(--color-fff); top: -5px;right: -10px; border: 1px solid var(--color-fff);}
.shop_btn1 { color: var(--color-fff); }

#user_menu {display:none;position:fixed;top:0;right:0;width:100%;height:100%;overflow-y:auto;z-index:2;background:#efefef;text-align:center}
#snb_cnt span {display:inline-block; margin-left: 10px; padding:0 7px;height:18px;margin-top:3px;line-height:18px;font-size:12px;background:#0d0c22;border-radius:4px;color:var(--color-fff)}

/* 쿠폰존 사용후기 접속자 새글 */
#cate_tnb {background:var(--color-fff);border-bottom:0px solid #efefef;margin:0; font-size: var(--font-s); font-weight: 400;}
#cate_tnb:after {display:block;visibility:hidden;clear:both;content:""}
#cate_tnb li {border-bottom:1px solid #efefef;float:left;width:50%;line-height:43px;padding:0 10px 0 50px;position:relative}
#cate_tnb li:nth-child(2n+1) {clear:both;border-right:1px solid #efefef}
#cate_tnb li i {position:absolute;top:0;left:0;width:50px;text-align:center;color:#a5a8ac;line-height:42px;font-size:16px}


/* nav_box all container */
.side_menu_container{}
.side_menu_container.open{right:0; overflow:auto;}
.side_menu_inner{position:relative;}
.side_menu_top {  line-height: 1;}
.side_menu_container a:hover{ color: var(--color-main); }

/* nav_box all close button */
.side_menu_btn{display: none;position:absolute; top:6px; right:12px; width:40px; height:40px; border:none; background:transparent;cursor: pointer;}
.side_menu_btn > span{width:100%; height:100%; position:relative;display: block;}
.side_menu_btn > span:after{content:""; position:absolute; top:0; right:0; width:100%; height:100%; 
	background:url('img/icon_close.svg') no-repeat center center; background-size: 20px auto;
    -webkit-transform: rotate(0) translateZ(0); transform:rotate(0) translateZ(0); 
	-webkit-transition:-webkit-transform .3s; transition: -webkit-transform .3s;
    transition:transform .3s; transition:transform .3s, -webkit-transform .3s;}
.side_menu_btn:hover > span:after{-webkit-transform:rotate(180deg) translateZ(0); transform:rotate(180deg) translateZ(0);}

/* side_menu_login */
.side_menu_login{margin-bottom:0px; padding:16px 24px; background:var(--color-fff);text-align: left; } 
.side_menu_login li{display:inline-block; padding-right:20px; position:relative;}
.side_menu_login li:after{content:""; position:absolute; top:3px; right:9px; width:1px; height:10px; background:#96989c;}
.side_menu_login li:last-child:after{display:none;}

/* nav_box all, mobile menu */
.side_menu_bottom{background:var(--color-fff); margin-top: 10px;} 
.side_menu_bottom_item{ position:relative;}
.side_menu_bottom_item > a{display:block; height:56px; padding:14px 24px; line-height:28px; color:#646873;}
.lnb_op_btn{position:absolute; top:13px; right:18px; width:30px; height:30px; border:0; border-radius:50%; outline:none; 
	background:url('img/select_arrow_bold.svg') no-repeat 50% 60%; 
	background-size:14px auto; background-color:#f7f7f7; cursor: pointer;
}
.nav_box_empty { margin: 10px 20px; } 
.lnb_op_btn.active{-webkit-transform:rotate(180deg); transform:rotate(180deg); -webkit-transition:rotate .3s ease; transition:rotate .3s ease;}
.lnb_all{display:none; background:#f7f7f7; padding: 0 30px; line-height: 1;}
.lnb_all_item{padding:15px 0px; border-bottom: 1px solid #e7eeef;}
.lnb_all_item:last-child{ border-bottom: 0px solid #e7eeef;} 
.m_menu.active{position:relative;}
.m_menu.active:after{content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#646873;}

/* nav_box all overlay */
.side_menu_overlay{display:none; position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(0, 0, 0, .8); z-index:5555;}
.side_menu_overlay.open{display:block;} 




/*side아웃로긴에서 가져오기*/
#side_after {
    width: calc(100% - 0px);
    margin: 0 auto;
    border: 0px solid #dde7e9;
    background: #f7f7f7;
    padding: 20px 0;
}
#side_after #login_wrap .logout_info .login_out span {
    background-color: var(--color-main);
    color: var(--color-fff);
    padding: 2px 5px;
    font-size: 12px;
    position: absolute;
    right: auto! important;
    height: 20px;
    display: flex;
    align-items: center;
    border-radius: 4px; 
    top: 0! important; 
}
/*로그인 */
#sns_login { border-top: 0px solid #edeaea; border-bottom: 1px solid #edeaea;}
.side_ol { border-top: 1px solid #edeaea; }
#side_ol.side_sns { padding: 0px 0;}
#side_ol #sns_login { margin: 0; padding: 10px;}



/* 관리게시판버튼 */
.adm_gnb_1dli {  position: relative;  line-height: 50px;height: 50px;}
.adm_gnb_1da { padding: 5px 20px; }
.adm_btns { background-color: var(--color-main); color: var(--color-fff); padding: 2px 5px; display: flex; align-items: center; border-radius: 50px; width: 100px; justify-content: center; line-height: 20px; font-size: 14px;}





#hd_sch_main .search_wrapper {
    border-radius: 60px;
    background-color: var(--color-fff);
    padding: 0 20px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
    overflow: hidden;
	border: 1px solid #e1e1e1; 
}

#hd_sch_main #search_input_btn {
    border: 0;
    cursor: pointer;
    background: transparent;
}
#hd_sch_main .search_input {
    border: none; /* 입력란 기본 테두리 제거 */
    outline: none; /* 포커스 효과 제거 */
    flex: 1;
    height: 60%;
    padding: 20px;
    font-size: 16px;
    color: #1f1c2e;
    margin: 0;
	background-color: transparent !important;
}





/* pc 메뉴보기 */

.gnb_ul2 { text-align: left; border: 1px solid #e1e1e1; border-radius: 16px; background: var(--color-fff); padding: 20px 10px; 
    -webkit-box-shadow: 0px 0px 0px 0px rgba(13,12,34,0.02), 0px 18px 39px 0px rgba(13,12,34,0.02), 0px 71px 71px 0px rgba(13,12,34,0.02), 0px 159px 95px 0px rgba(13,12,34,0.01), 0px 283px 113px 0px rgba(13,12,34,0), 0px 442px 124px 0px rgba(13,12,34,0);
    box-shadow: 0px 0px 0px 0px rgba(13,12,34,0.02), 0px 18px 39px 0px rgba(13,12,34,0.02), 0px 71px 71px 0px rgba(13,12,34,0.02), 0px 159px 95px 0px rgba(13,12,34,0.01), 0px 283px 113px 0px rgba(13,12,34,0), 0px 442px 124px 0px rgba(13,12,34,0);
}

.nav_gnb_menu_item .nav_gnb_plus:after { content: ""; display: inline-block; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; position: absolute; top: 50%; right: 0px; transform: translateY(-50%);}
/* pc 메뉴보기 끝*/


/* nav_logo*/
#logo { padding: 0; }
#logo.logo_area { }
#logo.logo_area .nav_gnb_logo .logo_color{ white-space: nowrap; font-weight: 700; font-size: 30px; z-index: 3; position: relative; line-height: 1.1; text-transform: uppercase; font-family: 'Oswald', sans-serif; }
#logo.logo_area .nav_gnb_logo .logo_text { white-space: nowrap;word-break: break-all; color: #837a7a; line-height: 1.1; text-transform: uppercase; font-size: 12px; display: block; font-weight: 500;}
#logo.logo_area .nav_gnb_logo .logo_color { color: var(--color-fff); }
#logo img{width:auto; height:50px; -webkit-transition:all .3s ease; transition:all .3s ease;}
#logo img.fixed{height:32px; filter: opacity(0.9) drop-shadow(0 0 0 #000000);}

/* nav_logo 끝*/

/* FAQ 1:1문의 접속자 새글 */
.hd_nb {background:var(--color-fff);margin-top:0px;border-bottom:1px solid var(--line_solid);}
.hd_nb:after {display:block;visibility:hidden;clear:both;content:""}
.hd_nb li {width:50%;float:left;text-align:center;line-height:25px;}
.hd_nb li a {display:block;color:#717171;text-align:left;padding:10px 15px}
.hd_nb li i {font-size:14px;margin-right:10px;color:#a5a8ac}
.hd_nb .hd_nb1 {border-right:1px solid var(--line_solid);border-bottom:1px solid var(--line_solid)}
.hd_nb .hd_nb2 {border-bottom:1px solid var(--line_solid)}
.hd_nb .hd_nb3 {border-right:1px solid var(--line_solid)}

.nav_gnb {
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%; z-index: 3;
}

@media (min-width: 950px) {
    .nav_gnb {
        position: absolute;
        top: initial;
    }
}

@media (min-width: 950px) {
    .nav_gnb_overlay {
        display: none;
    }
}

.nav_gnb_box {
    display: grid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    grid-template-columns: 30px 200px 1fr;
    grid-template-rows: 100px;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    -webkit-transition: background-color 0.25s ease-out;
    transition: background-color 0.25s ease-out;
    background-color: transparent;
    gap: 20px; z-index: 1;
}

@media (min-width: 950px) {
    .nav_gnb_box {
        grid-template-columns: 0px 1fr auto;
        gap: 40px;
    }
}

@media (min-width: 1100px) {
    .nav_gnb_box {
        grid-template-columns: 1fr 200px 1fr;
        gap: 24px; text-align: center;
    }
}

@media (max-width: 786px) { 
  .nav_gnb_box { grid-template-columns: 20px 0.5fr 1fr; padding: 0px; grid-template-rows: 70px; } 
}

.gnb_m_menu {
    padding: 0 10px;
    height: 40px;
    width: 40px;
    border: 0;
    background-size: 100%;
    color: var(--color-fff);
    background: transparent;
    font-size: 1.8rem;
    order: -10;
    margin-left: calc(-1* 6px);
	cursor: pointer;
}

@media (min-width: 1100px) {
    .gnb_m_menu { display: none; }
}

.nav_gnb_menu { --nav_gnb_menu-gap: 32px; font-weight: 600; white-space: nowrap;}
@media (max-width: 1099px) {
    .nav_gnb_menu {
        --nav_gnb_menu-gap: 24px;
        visibility: hidden;
        position: fixed;
        top: 100px;
        right: 0;
        width: 100%;
        -webkit-transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
        transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
        opacity: 0;
    }
}

.nav_gnb_menu_item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column;-ms-flex-align: start; align-items: flex-start;}
@media (min-width: 950px) {
    .nav_gnb_menu_item { -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; }
}

.nav_gnb_menu_list {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
}
.nav_gnb_menu_list { color: var(--color-fff); }
.nav_gnb_menu_list a:hover { color:var(--color-main);  }
.nav_gnb_menu_list:first-child {  margin: calc(-1*(32px / 2)) 0 0 0;}
.nav_gnb_menu_list a { padding: calc(32px / 2) 0; }
@media (min-width: 950px) {
    .nav_gnb_menu_list:first-child { margin: 0 0 0 calc(-1*(32px / 2)); }
    .nav_gnb_menu_list a { padding: 0 calc(32px / 2); }
}
.nav_gnb_menu_list2 { color: var(--color-tit); display: none; flex-direction: row; align-items: center; position: absolute; width: fit-content; padding: 25px 0;z-index: 2;top: 10px;}
.nav_gnb_menu_list:hover .nav_gnb_menu_list2 { display: block;}	
.nav_gnb_menu_list2 li { font-weight: 500; padding: 15px 8px; min-width: 180px; border-bottom: 1px dotted #e7e7e9;}
.nav_gnb_menu_list2 li:last-child { border-bottom: none; }
.nav_gnb_menu_list2 li:hover { color: var(--color-main); border-radius: 7px; background: #f3f3f4; font-weight: 500; }

@media (max-width: 949px) {
    .nav_gnb_menu_box {
        position: relative;
        z-index: var(--zi-header);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        max-height: calc(100vh - 100px); 
        padding: 32px;
        overflow-y: scroll;
        border-top: 1px solid #e7e7e9;
        background-color: var(--color-fff);
        -webkit-overflow-scrolling: touch; 
    }
}

.nav_gnb_logo {
    position: relative;
    top: -1px;
    -ms-flex-order: -1;
    order: -1;
    width: 100%; z-index: 1;
}

.nav_gnb_logo img {
    width: 100%;
    height: auto;
}

@media (min-width: 1400px) {
    .nav_gnb_logo {
        -ms-flex-order: initial;
        order: initial;
    }
}

.nav_gnb_logo svg {
    width: 100%;
    height: auto;
}

.fill-current,
.fill-current svg {
    fill: currentColor;
}

.nav_right_box {
    visibility: visible !important;
    opacity: 1 !important;
}

.nav_right_item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-column-gap: 15px;
    -moz-column-gap: 15px;
    column-gap: 15px; 
}
@media (max-width: 768px) { 
    .nav_right_item { column-gap: 13px; font-size: 14px;padding: 0 10px 0 0; }
}
.nav_search {
    display: none;
    position: relative;
    -ms-flex-align: center;
    align-items: center;
    width: 200px;
    width: clamp(200px, 17vw, 300px);
    height: 48px;
}

@media (min-width: 1060px) {
    .nav_search {
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
}

.nav_search .nav_search_input {
    width: 100%;
    height: 100%;
    padding: 0 24px 0 48px;
    border-radius: 9999999px;
    outline: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1; color: var(--color-icon);
}

.nav_search .nav_search_input,
.nav_search .nav_search_input:hover,
.nav_search .nav_search_input:active,
.nav_search .nav_search_input:focus { border: none; background: #ffffff17; -webkit-box-shadow: none;  box-shadow: none;}
.nav_search_btn { display: grid; width: 24px; height: 24px; place-items: center;}
@media (min-width: 1060px) {
    .nav_search_btn { display: none; }
}

.nav_search_svg {
    position: absolute;
    top: 50%;
    left: 24px;
    width: 16px;
    height: 16px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #6e6d7a;
}
.nav_search_svg { width: 20px; height: 20px;}
.login_text { padding: 0px; word-break: keep-all; color: var(--color-fff); } 

@media (max-width: 420px) {
    .login_text { padding: 0px; }
}

.login_btn,
a.login_btn {    
    padding: 0 24px;
    border-radius: 9999999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    line-height: 42px;
}
.login_btn,
a.login_btn { background-color: var(--color-main); color: var(--color-fff);}

@media (max-width: 786px) { 
  .login_btn, a.login_btn { 
    padding: 4px 10px; 
    line-height: 25px; 
    font-size: 12px;
  }
}

.login_btn:before,
.login_btn:after {
    content: '';
    opacity: var(--btn-loading-opacity, 0);
    background-color: #0d0c22;
    pointer-events: none;
}

.login_btn:after {
    display: -ms-flexbox;
    display: flex;
    visibility: var(--btn-loading-visibility, hidden);
    position: absolute;
    z-index: 2;
    top: calc(50% - (16px / 2));
    left: calc(50% - (16px / 2));
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    animation: loading-spin-animation 0.35s infinite linear;
    border: 1px solid var(--color-fff);
    border-radius: 50%;
    border-top-color: transparent;
    border-right-color: transparent;
}

@media (hover: hover) {
    .login_btn:hover:not([disabled]),
    .login_btn:focus-visible:not([disabled]) {
        border-color: #565564;
        background-color: #565564;
    }
}


.nav_avatar {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border: 1.5px solid transparent; cursor: pointer;
}
@media (max-width: 786px) { .nav_avatar { margin-left: 10px; } }

.nav_avatar_img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f3f3f4;
    -o-object-fit: cover;
    object-fit: cover;
    border: none;
}

.nav_profile {
    --profile-gutter: 32px;
    --profile-item-gap: 24px;
    visibility: hidden;
    position: fixed;
    top: 100px;
    right: 0;
    width: 100%;
    -webkit-transform: translateX(0px) translateY(0);
    -ms-transform: translateX(0px) translateY(0);
    transform: translateX(0px) translateY(0);
    -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    font-weight: 400;
}
@media (max-width: 786px) { .nav_profile { top: 70px; } }
.nav_profile_open {
    visibility: visible;
    -webkit-transform: translateX(0) translateY(0);
    -ms-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    opacity: 1;
    z-index: 2;
}

.nav_profile_open:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}
@media (min-width: 950px) { 
  .nav_profile_open:before {  background-color: transparent;  }
}

.nav_profile_open .nav_profile_box {
    -webkit-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    border-color: #e1e1e1;
}

@media (min-width: 950px) {
    .nav_profile {
        position: absolute;
        top: 100%;
        width: 370px;
        padding-top: 20px;
        -webkit-transform: translateX(0) translateY(-10px);
        -ms-transform: translateX(0) translateY(-10px);
        transform: translateX(0) translateY(-10px);
        -webkit-transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
        transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
        transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
        transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
    }
}

@media (min-width: 950px) {

    :hover>.nav_profile,
    .nav_profile:hover,
    .nav_profile:focus-within {
        visibility: visible;
        -webkit-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        -webkit-transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
        transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
        transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
        transition: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
        opacity: 1;
        z-index: 2;
    }
}

.nav_profile_box {
    position: relative;
    z-index: var(--zi-header-behind);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-height: calc(100vh - var(--nav_gnb-height) - 60px);
    max-height: calc(100dvh - var(--nav_gnb-height));
    padding: var(--profile-gutter);
    overflow-y: none;
    -webkit-transition: border-color 0.1s ease-in-out;
    transition: border-color 0.1s ease-in-out;
    border-top: 1px solid var(--color-fff);
    background-color: var(--color-fff);
    -webkit-box-shadow: 0px 159px 95px rgba(13, 12, 34, 0.03), 0px 71px 71px rgba(13, 12, 34, 0.05), 0px 18px 39px rgba(13, 12, 34, 0.05), 0px 0px 0px rgba(13, 12, 34, 0.05);
    box-shadow: 0px 159px 95px rgba(13, 12, 34, 0.03), 0px 71px 71px rgba(13, 12, 34, 0.05), 0px 18px 39px rgba(13, 12, 34, 0.05), 0px 0px 0px rgba(13, 12, 34, 0.05);
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 950px) {
    .nav_profile_box {
        max-height: initial;
        overflow-y: initial;
        border: 1px solid #e1e1e1;
        border-radius: 16px;
    }
}

.nav_user {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #0d0c22;
    text-decoration: none; position: relative;
}

.nav_user_img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
}

.mypage_name {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    white-space: normal;color: var(--color-tit);
}

.nav_user_hr {
    --avatar-gap: 4px;
    --avatar-border-size: 2px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: absolute;
    z-index: 2;
    top: calc(32px - 2px);
    right: calc(32px - 2px);
    -ms-flex-direction: column;
    flex-direction: column;
}

.nav_user_info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: calc(32px - 24px / 2) 0 0;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    list-style: none;
    text-align: left;
}

.nav_user_info_item {
    width: 100%;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    padding: calc(10px / 2) 0;
}

.item_divided {
    margin-top: calc(24px / 2);
    border-top: 1px solid var(--line_solid);
	padding: 20px 0;
}


/*알림*/
.notification { position: relative; font-size: 22px;}
.notification_number {
    position: absolute;
    background-color: var(--color-main);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fff);
    right: -6px;
    top: 0px; border: 1px solid var(--color-fff);
	animation: blinker 1s linear infinite;box-shadow: 0 0 10px 3px #9ec3f9;
}
@keyframes blinker { 50% {opacity:0} }

	
svg:not(:root) {
    overflow: hidden;
}

.notification svg {
    width: 22px;
    color: var(--color-icon);
    flex-shrink: 0;
}






.profile_avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f3f3f4;
    -o-object-fit: cover;
    object-fit: cover;
    border: none;

}
.nav_profile_box .nav_user img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
	background-color: #f3f3f4;
    -o-object-fit: cover;
    object-fit: cover;	
    border: none;

}
.ol_after_info1 {
    position: absolute;
    bottom: 0px;
    right: calc(50% - 35px);
    width: 25px;
    height: 25px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: var(--color-main);
    color: var(--color-fff);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.ol_after_info1:hover{ background: red; }


/*아이프레임 쪽지 스크랩 포인트 모달창*/
.iframe_art_modal { display: none; position: fixed; z-index: 101; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; box-shadow: 5px 0px 30px 0px rgba(98, 99, 100, 0.3); border-radius: 20px 20px 0 0; height: 70vh;}
@media (min-width: 992px){  .iframe_art_modal { max-width: 600px;margin: 0 auto; }  }
#memo_iframe { width: 100%;height: 95%;}
#memo_iframe iframe html { overflow: hidden;}
.modal_iframe { background-color: #fefefe; padding: 20px; border: 0px solid var(--color-icon);height: 100%;}
.modal_close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;}
.modal_close:hover,
.modal_close:focus { color: #000; text-decoration: none;}
.iframe_modal_overlay { position: fixed;top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9; display: none;}

/*전체설정 버튼 위치*/
.art_edit_wrap { top: 100px;}



/*sticky*/
#nav_sticky.sticky #user_btn1 { color: var(--color-icon);}
#nav_sticky.sticky .shop_btn1 { color: var(--color-main); }
#nav_sticky.sticky #logo.logo_area .nav_gnb_logo .logo_color { color: var(--color-main); }
#nav_sticky.sticky .nav_gnb_box {grid-template-rows: 70px;-webkit-transition: all 0.30s ease-in-out;}
#nav_sticky.sticky .gnb_m_menu { color: var(--color-icon);}
#nav_sticky.sticky .nav_gnb_menu_list { color: var(--color-tit);}
#nav_sticky.sticky .nav_search .nav_search_input { background: #f4f5fb; color: var(--color-tit); }
#nav_sticky.sticky .nav_search .nav_search_input::placeholder, 
#nav_sticky.sticky .nav_search .nav_search_input::-webkit-input-placeholder { color: var(--color-tit); opacity: 0.5;}
.nav_search .nav_search_input { color: var(--color-fff); }
.nav_search .nav_search_input::placeholder,
.nav_search .nav_search_input::-webkit-input-placeholder { color: var(--color-fff)fff; opacity: 0.5;}
.m_color_f { color:#fff; }  
#nav_sticky.sticky .m_color_f {  color: var(--color-icon);}
#nav_sticky.sticky .login_text {  color: var(--color-tit);}

.nav_sticky_wrap, #nav_sticky { -webkit-transition: all 0.30s ease-in-out;}
.nav_sticky_wrap { width: 100%; display: flex; justify-content: center;border-bottom: 1px solid var(--color-fff)fff2b; z-index: 3; height: 100px; position: absolute;}

.nav_sticky_wrap:has(.sticky) { border-bottom: 1px solid #e1e1e1; background: var(--color-fff); position: fixed; height: 70px;}
#nav_sticky.sticky { position: fixed; top: 0; z-index: 3;}
.nav_sticky_wrap #nav_sticky .nav_gnb{ position: absolute;}

.nav_sticky_wrap:has(.sticky) {  }

@media (max-width: 991px) { 
    .nav_sticky_wrap { height: 70px;  }
}
@media (max-width: 520px){ 
	#user_btn1, .shop_btn1 { font-size: 18px;  }
	.m_color_f { font-size: 22px; color: var(--color-icon); }
	#nav_sticky.sticky .nav_gnb_box {grid-template-rows: 60px;}
	.nav_sticky_wrap:has(.sticky) { height: 60px;}
}