﻿@charset "utf-8";



:root {

    --hdH: 8rem; 
    --hdIn: 5rem;
 
    --inPd: 20px;
    --inpH: max(6rem, 50px);
    --mainIn: max(154rem, 1340px);
    --in: max(154rem, 1340px);
    --in2: max(134rem, 1140px);
    --in3: max(124rem, 1040px);
    --subVisPd: 12rem;
    --subPd: 20rem;
    --subMt: 6rem;

    --point01: #2F58E0; 
    --point02 : #32549D; 
    --black:#1F2933; 

    /* --gray1: #E8E8E8;
    --gray2: #CFCFCF;
    --gray3: #B5B5B5;
    --gray4: #9C9C9C;
    --gray5: #828282;
    --gray6: #696969;
    --gray7: #4F4F4F; 
    --gray8: #363636;
    --gray9: #1C1C1C; */

    --gray5: #F5F7FA;
    --gray10: #E4E7EB;
    --gray20: #CBD2D9;
    --gray30: #9AA5B1;
    --gray40: #7B8794;
    --gray50: #616E7C;
    --gray60: #52606D;
    --gray70: #3E4C59;
    --gray80: #323F4B;
    --gray90: #1F2933;
 
    --bg:#F5F7FA;
    --pointBg:#F3F6FF; 
    /* --line:#ECECEC; */
    --line:#E4E7EB;
     
    --radius: 2.4rem; /* 30 */ 

    --en: "Google Sans Flex", sans-serif;
    --serif: "Noto Serif KR", serif; 

    --d1:10rem; 
    --h1:6rem; 
    --h2:5.4rem; 
    --h3:4.5rem; 
    --h4:4rem; 
    --h5:3.4rem; 
    --h6:max(3rem,26px);; 
    --h7:max(2.8rem,24px); 
    --h8:max(2.5rem,22px); 

    --p1:max(2.2rem,20px); 
    --p2:max(2rem,18px);
    --p3:max(1.8rem,17px);  /* 본문 */
    --p4:max(1.6rem,15px);
    --p5:max(1.5rem,14px);
    --p6:max(1.4rem,13px);
    --p7:max(1.3rem,12px);
    --p8:max(1.2rem,12px);
    --p9:max(1.1rem,11px);

    --pd:30rem;
    --pd1:25rem;
    --pd2:20rem;
    --pd3:15rem;
    --pd4:10rem;

    --contMt1: 10rem;
    --contMt2: 8rem;
    --contMt3: 6rem;
    --contMt4: 4rem;

}


html.scroll_none { overflow: hidden; }
body::-webkit-scrollbar { width: 5px; height: 5px; }
body::-webkit-scrollbar-thumb { height: 5px; background: #A9A9A9; border-radius: 5px; }
body::-webkit-scrollbar-track { background-color: #fff; }

.in {position: relative; width: var(--in); max-width: 100%; padding: 0 var(--inPd); margin: 0 auto;}
.in2 {position: relative; width: var(--in2); max-width: 100%; padding: 0 var(--inPd); margin: 0 auto;}
.in3 {position: relative; width: var(--in3); max-width: 100%; padding: 0 var(--inPd); margin: 0 auto;}

.sr_only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.mo_over { display: block !important; }
.mo_only { display: none !important; }
.tab_only { display: none !important; }
.phone_only {display: none !important;}
.mini_only {display: none !important;}

.ms_preloader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #fff; z-index: 9999999; }
.page_wrap {display: flex; flex-direction: column; min-height: 100vh;}
.pin-spacer {max-width: 100%;}






/* 셀렉트 */
.nice-select {font-size: var(--p3); border-radius: 1rem; border: solid 1px var(--gray20);}
.nice-select:after { right: 1.2em; width: 0.8em;; height: 0.8em; margin-top: -0.3em; font-size: 1em; border: 0; transform: rotate(0deg); transform-origin: center; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none"><path d="M13 1L7 7L1 1" stroke="%231C1C1C" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat; transition: transform 0.3s; }
.nice-select.open:after { transform: rotate(180deg); }

.nice-select .list {min-width: 100%; box-shadow: 0 0 0 1px var(--line); top: calc(100% + 2px); background-color: #fff; border-radius: 1rem; max-height: 400px; overflow-y: auto;} 
.nice-select .list .option {height: 3em; line-height: 3em; min-height: 0; padding: 0 10px; position: relative;}

.nice-select .list::-webkit-scrollbar{display: inherit; width: 10px;}
.nice-select .list::-webkit-scrollbar-thumb{background: #BFBFBF; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px;}
.nice-select .list::-webkit-scrollbar-track{background: #fff;}
.nice-select .list::-webkit-scrollbar-button:vertical:decrement{height: 5px;}
.nice-select .list::-webkit-scrollbar-button:vertical:increment{height: 5px;}

/* Safari */
@supports (-webkit-hyphens: none) {
    .nice-select .list::-webkit-scrollbar{width: 5px;}
    .nice-select .list::-webkit-scrollbar-thumb{background: #d7d7d7; border: 0; border-radius: 999px;}
    .nice-select .list::-webkit-scrollbar-track{background: transparent; margin: 10px 0;}
    .nice-select .list::-webkit-scrollbar-button:vertical:decrement{height: 0;}
    .nice-select .list::-webkit-scrollbar-button:vertical:increment{height: 0;}
}


/* ?ㅼ??댄띁 而⑦듃濡ㅻ윭 */

.swiper_controls {display: flex; align-items: center;}
.swiper_controls .num {text-align: center; width: 1.5em; font-weight: 700;}
.swiper_controls .pagination {position: relative; width: 10rem; height: max(0.4rem,2px); background-color:#E8E8E8; margin: 0 0.5em;}
.swiper_controls .pagination .swiper-pagination-progressbar-fill {background-color: #1c1c1c;}
.swiper_controls .swiper_btn {display: flex; align-items: center; cursor: pointer; opacity: 0.3; transition: 0.3s ease-in-out;}
.swiper_controls .swiper_btn.swiper-button-disabled svg {opacity: 0.3;}
.swiper_controls .swiper_btn svg {width: 1em; height: auto;; transition: 0.3s ease-in-out;}
.swiper_controls .swiper_next {margin-left: 1em;}
.swiper_controls .swiper_prev {margin-right: 1em;}
.swiper_controls.none {display: none !important;}


/* pointer */
.pointer {position:fixed; left: 0; top: 0;  z-index: 10;  pointer-events: none; ;}
.pointer .pointer_box { display: flex; align-items: center; justify-content: center;  background: rgba(0, 45, 196, 0.50); backdrop-filter: blur(10px); border-radius: 50%; transition:all .3s ease-out;display: flex; flex-direction: column; align-items: center; justify-content: center;  color: #fff; width: 8rem; height: 8rem; opacity:0; transform: scale(0);}
.pointer svg {width: 15%; height: auto;}
.pointer .eng {font-weight: 600; font-size: var(--p4); margin-top: 1rem;}
.pointer.on .pointer_box {opacity: 1; transform: scale(1);}



/* ---------- header ---------- */
.header { position: fixed; left: 0; top: 0; width: 100%; font-size: var(--p3); background-color: #fff; z-index: 200; border-bottom: 1px solid transparent; transition: 0.3s ease-in-out }
.header.header_down {background-color:#fff; color: var(--black); box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);}
.header.down {transform: translateY(-100%); background-color:#fff; color: var(--black); box-shadow: none; }
/* .header.search,
.header.hover {background-color:#fff;} */

.header .header_in { position: relative; display: flex; gap: 0; width: 100%; max-width: 100%; height: var(--hdH); padding: 0 var(--hdIn); align-items: center; z-index: 3;}

.header .logo{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.header .logo svg{display: block; width: max(20rem, 180px); height: auto;}

.header .util_wrap { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; height: 100%; position: relative; }
.header .util_wrap .btn{position: relative;}
.header .menu .ham_btn svg,
.header .util_wrap .btn svg{display: block; width: max(2.4rem, 22px); height: max(2.4rem, 22px);}
.header .util_wrap .btn + .btn {margin-left: 2.5rem;}
.header .util_wrap .btn.cart .num{position: absolute; display: flex; align-items: center; justify-content: center; font-size: 1rem; padding-top: 0.1em; min-width: 1.8em; height: 1.8em; top: -0.6em; right: -1.1em; background-color: var(--point01); color:#fff; border-radius: 50%;}

.main .header {background-color: transparent; color: #fff;}
.main .header .logo{display: none;}
.main .header .logo path {fill: #fff; transition: 0.3s ease-in-out;}
.main .header .menu .ham_btn svg path,
.main .header .util_wrap svg path {stroke: #fff;}
.main .header.header_down {background-color:#fff; color: var(--black);}
.main .header.header_down .menu .ham_btn svg path,
.main .header.header_down .util_wrap svg path {stroke: var(--black); }

.transparent .header:not(.header_down) {background-color: transparent; color: #fff;}
.transparent.white .header {background-color: transparent; color: #fff;}
.transparent.white .header .logo path {fill: #fff; transition: 0.3s ease-in-out;}
.transparent.white .header .menu .ham_btn svg path,
.transparent.white .header .util_wrap svg path {stroke: #fff;}
.transparent.white .header.header_down {background-color:#fff; color: var(--black);}
.transparent.white .header.header_down .menu .ham_btn svg path,
.transparent.white .header.header_down .util_wrap svg path {stroke: var(--black); }

.transparent.white .header.header_down .logo path{fill: var(--point01);}

/* 로그인 후 */
.header .util_wrap .login {position: relative;}
.header .util_wrap .login .login_nav {position: absolute; right: 0; bottom: -1rem; transform: translate(0,100%); font-size: var(--p8); white-space: nowrap;background-color: #fff;box-shadow: 0 0 5px rgba(92, 103, 129, 0.3); color: #000; padding: 1em 1em; border-radius: 1.2rem; z-index: 5; opacity:0; transition: opacity 0.3s ease-in-out; pointer-events: none; }
.header .util_wrap .login .login_nav.active {opacity: 1; pointer-events: auto}
.header .util_wrap .login .login_nav li + li {margin-top: 0.4em}
.header .util_wrap .login .login_nav a {display: flex; align-items: center;  font-weight: 500; margin-right: 0;}
.header .util_wrap .login .login_nav a .login_nav_ico {width: 1em; height: 1em; margin-right: 0.6em; transform: translateY(-1px)}
.header .util_wrap .login .login_nav a .login_nav_ico svg {display: block; width: 100%; height: 100%;}

.header .util_wrap .login .chr_img{ display: flex; align-items: flex-end; justify-content: center; margin-top: -0.3rem; margin-left: -0.3rem; width: max(3.5rem, 35px); height: max(3.5rem, 35px); border-radius: 50%; overflow: hidden;}
.header .util_wrap .login .chr_img img{display: block; width: 100%; height: auto; object-fit: contain;}
.header .util_wrap .login .chr_img.ch_bg_w{border: 1px solid var(--gray10);}



/* ---------- site map ---------- */
.site_map { display: flex; flex-direction: column; justify-content: flex-start; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
.site_map.active { opacity: 1; pointer-events: visible; }

.site_map .cont_box{display: flex; flex-direction: column; position: relative; width: 100rem; max-width: 100%; height: 100%; background-color: var(--point01); padding: 5rem 7rem; z-index: 2; transform: translateX(-100%); transition: transform 0.5s ease-in-out;}
.site_map.active .cont_box{transform: translateX(0);}
.site_map .bg {position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); z-index: 1;}

.site_map .top {display: flex; justify-content: space-between; align-items: center; max-width: 100%;}
.site_map .top .logo {width: 24rem; }
.site_map .top .logo a {display: flex; align-items: center;  }
.site_map .top .link_btn {display: flex; align-items: center; gap: 1rem; font-weight: 700; margin-left: auto; font-size: var(--p4); color: #fff; padding: 1em 1.8em; border-radius: 10em; background-color: #000;}
.site_map .top .link_btn svg {width: 1em; height: auto; margin-left: 1em; ;}
.site_map .top .close_btn {width: 3rem; height: 3rem; transition: 0.3s ease-in-out; margin-left: 5rem;}
.site_map .top .close_btn svg {width: 100%; height: auto;}

.site_map .list { color: #fff;}
.site_map .cont {display: flex; flex: 1; flex-direction: column;  width: 100%;}
.site_map .cont .list { margin: 8rem 0 0; max-width: 100%; flex:1;}
.site_map .cont .list > .depth1 + .depth1 {margin-top: 4rem; padding-top: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.30); }
.site_map .cont .list > .depth1 > a { position: relative; margin-bottom: 1.6em; font-size: var(--h7); font-weight: 700; line-height: 1; text-transform: capitalize;}
.site_map .cont .list > .depth1 > a:before { content: ''; position: absolute; left: 0; top: -0.6em; width: 0.4em; height: 0.4em; border-radius: 100%; background-color: var(--blue3); transform: translateY(-300%); opacity: 0; transition: opacity 0.5s, transform 0.5s; }
.site_map .cont .box.active .depth1:before { transform: translateY(0); opacity: 1; }
.site_map .cont .depth2 { display: flex; flex-wrap: wrap; margin-top: 1.5rem; gap: 0.2em 1.1em;}
.site_map .cont .depth2 > li {  transition: color 0.6s; font-size: var(--p3);}
.site_map .cont .depth2 > li > a { position: relative; display: inline-block; white-space: nowrap;}
.site_map .cont .depth2 > li > a::after { content: ""; position: relative; display: inline-block; right: 0; top: 50%; transform: translate(100%, -50%); width: 0; height: 0.35em; border-radius: 50%; background-color: #fff; opacity: 0;}
.site_map .cont .depth2 li.active a:after {opacity: 1; width: 0.35em;}
.site_map .cont .depth2 > li > a span { position: relative; }
.site_map .cont .depth2 > li > a span:before { content: ''; position: absolute; left: 0; bottom: -0.2em; width: 0; border-bottom: 1px solid #fff; transition: width 0.6s; }
.site_map .cont .list .depth3 {margin-top: 0.5em;}
.site_map .cont .list .depth3 li a {font-size: 0.85em; position: relative;  padding-left: 1em;  opacity: 0.6; transition: 0.3s ease-in-out;}
.site_map .cont .list .depth3 li + li {margin-top: 0.65em;}
.site_map .cont .list .depth3 li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.45em; height: 2px; background-color: #fff; }


 .site_map .cont .depth2 > li.out_link > a span:after {content: ""; position: absolute; right: -10px; top: 50%; transform: translate(100%,-50%) ;display: block; width:0.8em; height: 0.8em; transition: 0.3s ease-in-out ;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 512 512"><path d="M304 24c0 13.3 10.7 24 24 24l102.1 0L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223L464 184c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24L328 0c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104L0 440c0 39.8 32.2 72 72 72l336 0c39.8 0 72-32.2 72-72l0-128c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 128c0 13.3-10.7 24-24 24L72 464c-13.3 0-24-10.7-24-24l0-336c0-13.3 10.7-24 24-24l128 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L72 32z"/></svg>') no-repeat center / contain;}


.site_map .cont .depth2 li.active { font-weight: 700;}

.site_map .cont .depth2 > li > a:hover span:before {width: 100%;}
.site_map .cont .depth2 > li .depth3 li a:hover {opacity: 1;}

/* .site_map a[href="javascript:void(0);"]{pointer-events: none;} */
.site_map a[href="javascript:void(0);"]{cursor: pointer;}


/* ---------- 통합검색 ---------- */
.header .all_search_box {position: absolute; max-width: 100%; right: calc(var(--hdIn) + max(2.4rem, 22px) + 2rem); bottom: 1px; width: 62rem; color: var(--gray70); transform: translateY(100%); opacity: 0; pointer-events: none; transition: 0.3s ease-in-out;}
.header.search .all_search_box {opacity: 1; pointer-events: all;}
.header .all_search_box .close_btn {position: absolute; right: var(--hdIn); top: var(--hdIn); width: 4.7rem; height: 4.7rem; display: flex; align-items: center; justify-content: center; transition: 0.3s ease-in-out;  display: none;}
.header .all_search_box .close_btn svg {width: 3rem; height: auto;}
.header .all_search_box .keyword_form {background-color: #fff; padding: 5rem; box-shadow: 0 0 50px 0 rgba(31, 41, 51, 0.12); border-radius: 2rem;}
.header .all_search_box .keyword_form.store_type .search input {background-color: #fff;}

.keyword_form .commonFileDeleteBtn {position: absolute; right: 4em;top: 50%;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;width: 1.5em;height: 1.5em;background-color: rgba(9,84,154,0.2);border-radius: 50%;margin-left: auto;}
.keyword_form .commonFileDeleteBtn.hide {opacity: 0; pointer-events: none;}

/* 검색창 */
.keyword_form.store_type .search { position: relative; display: flex; align-items: center; gap: 1em; width: 100%; max-width: 100%; height: 2.6em; padding: 0 0 1em 0; border-bottom: 2px solid var(--black); margin: 0 auto; }
.keyword_form.store_type .search input { height: 100%; font-size: var(--p2); width: 100%; font-weight: 600; max-width: 100%;}
.keyword_form.store_type .search input::placeholder {color: rgba(31, 41, 51, 0.50);}
.keyword_form.store_type .search .btn_search { width: 1.4em; height: 1.4em; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none"><path d="M21 21L16.1667 16.1667M18.7778 9.88889C18.7778 14.7981 14.7981 18.7778 9.88889 18.7778C4.97969 18.7778 1 14.7981 1 9.88889C1 4.97969 4.97969 1 9.88889 1C14.7981 1 18.7778 4.97969 18.7778 9.88889Z" stroke="%231F2933" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>') no-repeat center / contain;}
.keyword_form.store_type .search .btn.del { width: 1.4em; height: 1.4em;}
.keyword_form.store_type .search .btn.del svg {width: 100%; height: auto;}
.keyword_form.store_type .search .btn.del.hide {display: none;}
/* 추천검색어 */
.keyword_form .keyword_box { margin: 3rem auto 0; width: 65rem; max-width: 100%; font-size: var(--p4);}
.keyword_form .keyword_box .tit { font-weight: 700; margin-bottom: 1rem;}
.keyword_form .keyword { display: flex; flex-wrap: wrap; gap: 1rem;  max-width: 100%; }
.keyword_form .keyword .btn { display: flex; font-size: var(--p7); font-weight: 500; color: var(--black); border: 1px solid var(--gray20); border-radius: 10em; padding: 0 0.8em; height: 2.2em; line-height: 2.1em; transition: 0.3s ease-in-out;}
.keyword_form .keyword .btn.none {display: none;}
.keyword_form .keyword .btn_more {height: auto;}
.keyword_form .keyword .btn_more svg {width: 1.4em; height: 2.5em; width: 2.5em; border-radius: 50%;}
/* 최근검색어 */
.keyword_form .keyword_box.recent .tit_box{display: flex; align-items: center; justify-content: space-between;}
.keyword_form .keyword_box.recent .keyword_all_del{display: flex; align-items: center; font-size: var(--p6); margin-bottom: 1rem;}
.keyword_form .keyword_box.recent .keyword_all_del .ico svg{display: block; height: 1.3em; margin-top: -0.1em; margin-right: 0.3em;}
.keyword_form .keyword_box.recent .keyword .btn .keyword_del_btn{}
.keyword_form .keyword_box.recent .keyword .btn .keyword_del_btn svg{height: 0.7em; margin-left: 0.5em; margin-top: -0.05em;}
.keyword_form .keyword_box.recent .keyword .btn .keyword_del_btn svg path{transition: 0.3s ease-in-out;}
/* 인기검색어 */
.keyword_form .keyword_box.popular .ranking_list{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 1.5rem 4rem; font-size: var(--p4);}
.keyword_form .keyword_box.popular .ranking_list .item{display: flex; align-items: center; gap: 1rem; line-height: 1;}
.keyword_form .keyword_box.popular .ranking_list .rank{font-weight: 700; min-width: 1.2em;}
.keyword_form .keyword_box.popular .ranking_list .txt{flex: 1; min-width: 0;}
.keyword_form .keyword_box.popular .ranking_list .rank_status{margin-left: auto; width: 1em; height: 1em; background-color: red;}
.keyword_form .keyword_box.popular .ranking_list .rank_status.same{background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="2" fill="%239AA5B1"/></svg>') no-repeat center / contain;}
.keyword_form .keyword_box.popular .ranking_list .rank_status.up{background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.14251 3.42916C7.53091 2.78182 8.46909 2.78182 8.85749 3.42915L13.0913 10.4855C13.4912 11.152 13.0111 12 12.2338 12H3.76619C2.9889 12 2.50878 11.152 2.9087 10.4855L7.14251 3.42916Z" fill="%23FB5353"/></svg>') no-repeat center / contain;}
.keyword_form .keyword_box.popular .ranking_list .rank_status.down{background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.14251 12.5708C7.53091 13.2182 8.46909 13.2182 8.85749 12.5708L13.0913 5.5145C13.4912 4.84797 13.0111 4 12.2338 4H3.76619C2.9889 4 2.50878 4.84797 2.9087 5.5145L7.14251 12.5708Z" fill="%23005DFF"/></svg>') no-repeat center / contain;}


/* 통합검색 페이지 */
.all_search_page .keyword_form {padding: calc(var(--hdH) + var(--contMt3)) var(--inPd) var(--contMt3); background-color: var(--bg);}
.all_search_page .keyword_form .keyword_wrap{display: flex; justify-content: center; margin: 3rem auto 0;}
.all_search_page .keyword_form .keyword_wrap .left_box,
.all_search_page .keyword_form .keyword_wrap .right_box {width: 48rem; padding-bottom: 1.5rem;}
.all_search_page .keyword_form .keyword_wrap .left_box{border-right: 1px solid var(--line); padding-right: 3rem;}
.all_search_page .keyword_form .keyword_wrap .right_box{margin-left: 3rem;}
.all_search_page .keyword_form .keyword_wrap .keyword_box{width: 100%; margin: 0;}
.all_search_page .keyword_form .keyword_wrap .left_box .keyword_box + .keyword_box{margin-top: 3rem;}
.all_search_page .keyword_form .keyword_box {margin-top: 3.5rem;}

.all_search_page .keyword_form .cont_tit_box {text-align: center; }
.all_search_page .keyword_form .cont_tit_box .tit {font-size: var(--h4); font-weight: 700; line-height: 1.5;}
.all_search_page .keyword_form .cont_tit_box .txt {font-size: var(--p4); margin-top: 0.5em;}

.all_search_page .keyword_form .search { position: relative; width: 70rem; max-width: 100%; margin: 5rem auto 0;}
.all_search_page .keyword_form .search input {background-color: #fff; border-radius: 99rem; height: 4.5em; font-size: var(--p2); padding: 0 4em 0 1.5em; width: 84rem; font-weight: 700; max-width: 100%;}
.all_search_page .keyword_form .search input::placeholder {color: var(--black); opacity: 0.5;}
.all_search_page .keyword_form .search .btn_search {position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); width: 1.4em; height: 1.4em; background: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 23L17.6833 17.6833M20.5556 10.7778C20.5556 16.1779 16.1779 20.5556 10.7778 20.5556C5.37766 20.5556 1 16.1779 1 10.7778C1 5.37766 5.37766 1 10.7778 1C16.1779 1 20.5556 5.37766 20.5556 10.7778Z" stroke="%231C1C1C" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>') no-repeat center / contain;}
.all_search_page .keyword_form .search .btn.del {position: absolute; right: 4em; top: 50%; transform: translateY(-50%); width: 1.4em; height: 1.4em;}
.all_search_page .keyword_form .search .btn.del svg {width: 100%; height: auto;}
.all_search_page .keyword_form .search .btn.del.hide {display: none;}

/* .all_search_page .keyword_form .keyword_box{display: flex; justify-content: center;  margin: 3rem auto 0; width: 80rem;  max-width: 100%;}
.all_search_page .keyword_form .keyword_box .tit { font-size: var(--p4); font-weight: 700; margin-right: 1em; height: 2em; line-height: 2em;}
.all_search_page .keyword_form .keyword .btn {font-size: var(--p6);} */


/* 검색 콘텐츠 */
.all_search_page .result_wrap {padding-top: var(--contMt2);}
.all_search_page .result_wrap .tab_box {display: flex; flex-wrap: wrap; gap: 1rem; } /*margin-bottom: var(--pd4);*/
.all_search_page .result_wrap .tab_box::-webkit-scrollbar {display: none;}
.all_search_page .result_wrap .tab_box .btn {display: flex; align-items: center; justify-content: center; height:2.8em; padding: 0 1em;font-size: var(--p3); font-weight: 700; color: var(--gray60); border: 1px solid var(--line); border-radius: 0.8rem; transition: 0.3s ease-in-out;}
.all_search_page .result_wrap .tab_box .btn .cnt {margin-left: 0.25em;}
.all_search_page .result_wrap .tab_box .btn.active {background-color: var(--black); color:#fff; border-color: var(--black);}

.all_search_page .result_wrap .sect .tab_box{gap: 2rem;}
.all_search_page .result_wrap .sect .tab_box .btn{height: auto; color: var(--black);background: transparent; border:none; border-radius: 0; border-bottom: 2px solid var(--black);padding: 0; opacity: 0.2;}
.all_search_page .result_wrap .sect .tab_box .btn.active{opacity: 1;}

/* .all_search_page .result_wrap .sect + .sect {padding-top: var(--pd3);} */
.all_search_page .result_wrap .sect {padding-top: var(--pd4);}
.all_search_page .result_wrap .sect .sect_tit_box {margin-bottom: 3.5rem;}
.all_search_page .result_wrap .sect .sect_tit_box .tit {display: flex; align-items: flex-start; font-size:var(--h3); font-weight: 700; line-height: 1.4;}
.all_search_page .result_wrap .sect .sect_tit_box .tit .num { display: inline-block;margin-left: 0.5em; border-radius: 10em; padding: 0.4em 0.6em; text-align: center; font-size: var(--p6); line-height: 1; font-weight: 600; color: #fff; background-color: var(--point01);}

.all_search_page .result_wrap .sect .tab_box{margin-bottom: 4rem;}

.all_search_page .subject_sect .list_box > div{display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem;}
.all_search_page .subject_sect .list_box .cont {position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem 3rem 3rem; border: 1px solid var(--line); border-radius: 1.6rem; transition: 0.3s ease-in-out; overflow: hidden;}
.all_search_page .subject_sect .list_box .cont .txt_box {position: relative; z-index: 2;}
.all_search_page .subject_sect .list_box .cont .nav_txt {display: flex; align-items: center; font-size: var(--p6); font-weight: 500; color: var(--gray40); transition: 0.3s ease-in-out;}
.all_search_page .subject_sect .list_box .cont .nav_txt .ico { width: 0.7em; height: 0.7em; margin: 0 0.5em;background: url('data:image/svg+xml,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.324249 11.7373C-0.0827652 11.3643 -0.1102 10.7314 0.262726 10.3242L4.22366 6.00003L0.262725 1.67581C-0.110303 1.26864 -0.0828192 0.635821 0.324249 0.262724C0.731418 -0.110304 1.36424 -0.082821 1.73733 0.324247L6.31741 5.32327C6.66758 5.70549 6.66752 6.29256 6.31741 6.67483L1.73734 11.6758C1.36429 12.0828 0.731439 12.1103 0.324249 11.7373Z" fill="%236E6E6E"/></svg>') no-repeat center/ contain; }
.all_search_page .subject_sect .list_box .cont .tit {display: flex; align-items: center; justify-content: space-between; font-size: var(--h8); line-height: 1.4; font-weight: 700; margin-top: 0.5rem;}
.all_search_page .subject_sect .list_box .cont .tit .arr {width: 0.9em; height: 0.9em; background: url('data:image/svg+xml,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 0L14.4156 3.08437L26.6219 15.3125L0 15.3125L0 19.6875H26.6219L14.4156 31.9156L17.5 35L35 17.5L17.5 0Z" fill="%23101010"/></svg>') no-repeat center / contain; transition: 0.3s ease-in-out;}

.all_search_page .cont_basic_slide07 .slide {width:100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4rem; }
.all_search_page .cont_basic_slide07 .slide .box {background-color: var(--bg);}
.all_search_page .academy_sect .cont_tit {font-size: var(--h5); font-weight: 700; margin-bottom: var(--contMt4);}

.all_search_page .main_notice_thumbnail07 {margin-top: var(--pd4);}

.all_search_page .tab_cont .cont{display: none;}
.all_search_page .tab_cont .cont.active{display: block;}

.all_search_page .md_sect .cont_box > div {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem;}
.all_search_page .md_sect .cont_box .cont {position: relative;;display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-radius: 1.6rem; border: 1px solid var(--line); overflow: hidden;}
.all_search_page .md_sect .cont_box .cont::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--Linear, linear-gradient(180deg, #FFE96A 0%, #FFBF00 100%)); opacity: 0; pointer-events: none; transition: 0.3s ease-in-out;}
.all_search_page .md_sect .cont_box .cont .img {position: relative; padding-top: 100%; z-index: 2;}
.all_search_page .md_sect .cont_box .cont .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;} 
.all_search_page .md_sect .cont_box .cont .txt_box {position: relative; z-index: 2;display: flex; flex-direction: column; justify-content: center; padding: 0 4rem; }
.all_search_page .md_sect .cont_box .cont .txt_box .desc {color: var(--gray40); font-size: var(--p6); font-weight: 500; margin-bottom: 1rem;}
.all_search_page .md_sect .cont_box .cont .txt_box .tit {display: flex; align-items: center; font-size: var(--p1); line-height: 1.4; font-weight: 700;}
.all_search_page .md_sect .cont_box .cont .txt_box .tit .tit_txt {display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.all_search_page .md_sect .cont_box .cont .txt_box .tit .arr { flex-shrink: 0; width: 0.8em; height: 0.8em; margin-left: 0.5em; background: url('data:image/svg+xml,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 0L14.4156 3.08437L26.6219 15.3125L0 15.3125L0 19.6875H26.6219L14.4156 31.9156L17.5 35L35 17.5L17.5 0Z" fill="%23101010"/></svg>') no-repeat center / contain;}
.all_search_page .md_sect .cont_box .cont .txt_box .txt {margin-top: 2rem; font-size: var(--p4); font-weight: 500; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}

.all_search_page .report_sect .tit_wrap{margin-top: -9rem;}
.all_search_page .report_sect .tit_wrap .select{margin-left: auto;}


/* ---------- footer ---------- */
.footer {margin-top: auto; position: relative; z-index: 199;}
.footer .footer_cont{background-color: var(--gray90); color: #fff; padding: 7rem 0;}

/* .footer .footer_cont .top_box{display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem;}
.footer .footer_cont .btm_box{margin-top: 5rem;} */
.footer .footer_box {display: flex; justify-content: space-between; gap: 5rem;}
.footer .footer_box .left_box{display: flex; flex-direction: column;}
.footer .footer_box .left_box .txt_wrap{margin-top: auto;}

.footer .logo{width: 25rem;}

.footer .fnb{display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 5.2rem;}
.footer .fnb .item{font-size:var(--p4); font-weight: 700;}

.footer .terms_txt {display: flex; margin-top: 5rem;}
.footer .terms_txt a {position: relative; font-size: var(--p6); font-weight: 700; --linkPd:1.4em;}
.footer .terms_txt a + a {margin-left: var(--linkPd); padding-left: var(--linkPd);}
.footer .terms_txt a + a:before{content: ''; position: absolute; left: 0; top: 25%; width: 1px; height: 50%; background-color: #fff; opacity: 0.3;}
.footer .terms_txt a::after {content: ""; position: absolute; left: 0; bottom: -1px; width: 0%; height: 1px; background-color: #fff; transition: width 0.3s ease-in-out;}
.footer .terms_txt a + a:after{ left: var(--linkPd);}
.footer .terms_txt a[target="_blank"] {padding-right: 1.2em; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="%23fff" d="M304 24c0 13.3 10.7 24 24 24l102.1 0L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223L464 184c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24L328 0c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104L0 440c0 39.8 32.2 72 72 72l336 0c39.8 0 72-32.2 72-72l0-128c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 128c0 13.3-10.7 24-24 24L72 464c-13.3 0-24-10.7-24-24l0-336c0-13.3 10.7-24 24-24l128 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L72 32z"/></svg>') no-repeat right center / 0.8em;}

.footer .sns_list{display: flex; gap: 1.5rem;}
.footer .sns_list .sns_btn{display: inline-block; transition: 0.3s ease-in-out;}
.footer .sns_list .sns_btn svg{display: block; width: 4rem; height: 4rem;}

.footer .info_txt {margin-top: 1.2rem; color:rgba( 255, 255, 255, 0.5); font-size: var(--p6); line-height: 1.5; font-weight: 500;}
.footer .info_txt span {position: relative; display: inline-block; margin-top: 0.5rem; }
.footer .info_txt span:after{content: ' · '; position: relative; }
.footer .info_txt span:nth-child(6 ):after{display: none; }
.footer .info_txt span:last-child:after{display: none; }

.footer .copy_txt {margin-top: 0.8rem; font-size: var(--p6); color:rgba( 255, 255, 255, 0.25); width: 100%;}

.footer .cs_cont{text-align: right; margin-top: 5rem; font-size: var(--p4); line-height:1; white-space: nowrap;}
.footer .cs_cont .cs_top .cs_tel{display: inline-flex; align-items: center; font-size:var(--p2); font-weight: 700 ;}
.footer .cs_cont .cs_top .main_tel a{display: flex; font-weight: 700; align-items: center; margin-left: 0.2em;}
.footer .cs_cont .cs_top .main_tel .ico svg{display: block; height: 1.2em;}
.footer .cs_cont .cs_top .sub_tel{font-weight: 400; margin-left: 1rem;}
.footer .cs_cont .cs_top .support_tel{font-weight: 600; margin-top: 3rem;}
.footer .cs_cont .cs_top .desc,
.footer .cs_cont .cs_time .lunch{margin-top:1rem; color:rgba( 255, 255, 255, 0.5); font-size: var(--p6);}
.footer .cs_cont .email{font-weight: 600; margin-top: 2rem;}
.footer .cs_cont .cs_time{font-weight: 600; margin-top: 2rem;}

/* 퀵메뉴 */
.fix_btn_box { position: fixed; opacity: 1; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s;  }
.fix_btn_box.show{opacity: 1; pointer-events: inherit; visibility: visible;}

.fix_btn_box .txt{position: relative; display: block; margin-top: 0.4em; font-weight: 600; font-size: var(--p5); line-height: normal;}
.fix_btn_box .txt:before { content: ""; display: block; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 0; height: 1px; background-color: #fff; transition: width 0.5s; }
.fix_btn_box .btn:hover .txt:before{width: 100%;} 
/* .fix_btn_box > * + *{margin-top: 5px;} */

/* 메뉴 */
.fix_btn_box .menu_wrap{position: fixed; width: 9rem; right: 4rem; bottom: unset; top: 50%; transform: translateY(-50%);}
.fix_btn_box .menu_box { position: relative; width: 100%;  }
.fix_btn_box .menu_box > .list { overflow: hidden; display: flex; flex-direction: column; width: 100%; padding: 2rem 0; justify-content: flex-end; overflow: hidden; background: #1D40B4; border-radius: 999rem; text-align: center; transition: height 0.6s, padding 0.6s;}
.fix_btn_box .menu_box > .list > .item { display: flex; align-items: center; justify-content: center; position: relative; flex: 1; transition: opacity 0.5s;}
.fix_btn_box .menu_box > .list > .item:nth-of-type(1) { transition-delay: -0.1s; }
.fix_btn_box .menu_box > .list > .item:nth-of-type(2) { transition-delay: -0.1s; }
.fix_btn_box .menu_box > .list > .item:nth-of-type(3) { transition-delay: -0.1s; }
.fix_btn_box .menu_box > .list > .item .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; height: 100%; padding: 2rem 0; color: #fff; fill: #fff; transition: color 0.3s ease-in-out, fill 0.3s ease-in-out, background-color 0.3s ease-in-out; }
.fix_btn_box .menu_box > .list > .item .btn .ico {display: flex; align-items: center;}
.fix_btn_box .menu_box > .list > .item .btn .ico svg { display:block; width: auto; height: 2.2rem;  transition: opacity 0.3s; }
.fix_btn_box .menu_box > .list > .item .btn .txt{position: relative; display: block; margin-top: 0.625em; font-weight: 600;}
/* 메뉴 버튼 */
.fix_btn_box .menu_btn{position: relative; width: 100%; height:9rem; margin-top: 0.5rem; border-radius: 999px; color: #fff; }
.fix_btn_box .menu_btn .btn{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;background-color: #000; border-radius: 50%; overflow: hidden;}
.fix_btn_box .menu_btn .btn img{width: 40%; }
/* .fix_btn_box .menu_btn .btn.modifiy_btn{position: absolute; display: flex; align-items: center; justify-content: flex-end; inset: 0; width: 100%; height: 100%; background-color: var(--gray20); border-radius: 50%; overflow: hidden;} */
.fix_btn_box .menu_btn .btn.modifiy_btn{position: relative; border-radius: 50%; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease;}
.fix_btn_box .menu_btn .btn.modifiy_btn .hover_box{position: absolute; inset: -1px; border-radius: inherit; background-color: #000; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: 0.3s ease; z-index: 2;}
.fix_btn_box .menu_btn .btn.modifiy_btn:hover .hover_box{opacity: 1;}
.fix_btn_box .menu_btn .btn.modifiy_btn:hover .txt:before{display: none;}
.fix_btn_box .menu_btn .btn.modifiy_btn img{width: 100%; }
.fix_btn_box .menu_btn .btn.modifiy_btn .chr_box{position: relative; width: 100%; height: 100%; z-index: 1;}
.fix_btn_box .menu_btn .btn.modifiy_btn .ico{position: absolute; inset: 0; width: 100%; height: 100%;}

.fix_btn_box .btn.modifiy_btn .chr_box{border-radius: 50%; border-radius: 50%;}
.fix_btn_box .btn.modifiy_btn .chr_box.ch_bg_w{border: 1px solid var(--gray10);}
.fix_btn_box .btn.modifiy_btn .quick_chr_layers{position: absolute; width: 100%; height: 100%; inset:0;}
.fix_btn_box .btn.modifiy_btn .quick_chr_layers > *{position: absolute; width: 100%; height: auto; bottom: 0; left: 50%; transform: translateX(-50%);}
.fix_btn_box .btn.modifiy_btn .ico img{position: absolute; width: 100%; height: auto; bottom: 0; left: 50%; transform: translateX(-50%);}
.fix_btn_box .btn.modifiy_btn .txt{margin-top:0;}

/* 탑버튼 */
.fix_btn_box .top_btn { position: fixed; width: 9rem; height: 9rem; right: 4rem; bottom: 3rem; display: flex; justify-content: center; align-items: center; background:#fff; border-radius: 999px; overflow: hidden; opacity: 1; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.10); transition: height 0.3s ease, opacity 0.3s ease;}
.fix_btn_box .top_btn .ico{height: 35%;}
.fix_btn_box .top_btn .ico svg{display: block; width: auto; height: 100%; flex-shrink: 0; transition: transform 0.3s ease-in-out;}
.fix_btn_box .top_btn .ico svg path {transition:  0.3s ease-in-out;}


/* DatePicker */
body .ui-widget{font-size:16px;}
body .ui-datepicker {position: relative; border:1px solid var(--lineColor); z-index: 101 !important; width: 17em; min-width:250px; display: none; border-radius: 10px; border:1px solid var(--lineColor); background-color: #fff; padding:0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
body .ui-datepicker-trigger { display: none; }
body .ui-datepicker .ui-datepicker-header { position:relative; border-radius: 10px 10px 0 0; overflow:visible; padding: 10px; background-color: var(--point01); border-color: var(--point01);}
body .ui-datepicker table {font-size:1em; margin-bottom: 0;}
body .ui-state-default,
body .ui-widget-content .ui-state-default,
body .ui-widget-header .ui-state-default { background: none; border: 0; border-radius: 10px; transition:all 0.3s ease; }
body .ui-state-default:hover { background: #f5f5f5; }
body .ui-state-active { background: var(--point01) !important; color: #fff; }

body .ui-datepicker-today a { font-weight: 600; color: var(--point01); }
body .ui-datepicker .ui-datepicker-prev { left: 2px; cursor: pointer; }
body .ui-datepicker .ui-datepicker-next { right: 2px; cursor: pointer; }
body .ui-datepicker td span,
body .ui-datepicker td a { text-align: center; }
body .ui-datepicker .ui-datepicker-prev span,
body .ui-datepicker .ui-datepicker-next span { display:none; }

body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next { position:absolute; top:18px; top: 50%; margin-top: -10px;}
body .ui-datepicker .ui-datepicker-prev-hover,
body .ui-datepicker .ui-datepicker-next-hover {background-color: unset; border:none;}
body .ui-datepicker .ui-datepicker-prev { left:12px;}
body .ui-datepicker .ui-datepicker-prev:before {content: "";display: block;width: 20px;height: 20px;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23fff"><path d="M52.7 267.3c-6.2-6.2-6.2-16.4 0-22.6l160-160c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L86.6 256 235.3 404.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0l-160-160z"/></svg>') no-repeat center / contain;}
body .ui-datepicker .ui-datepicker-next { right:12px; }
body .ui-datepicker .ui-datepicker-next:before { content: "";display:block ; width:20px; height:20px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23fff" ><path d="M267.3 244.7c6.2 6.2 6.2 16.4 0 22.6l-160 160c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L233.4 256 84.7 107.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l160 160z"/></svg>') no-repeat center / contain;}
body .ui-datepicker .ui-datepicker-prev-hover { left:12px; }
body .ui-datepicker .ui-datepicker-next-hover { right:12px; }
body .ui-datepicker .ui-datepicker-prev span,
body .ui-datepicker .ui-datepicker-next span { position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
body .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; color: #fff; }
body .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; background-color: transparent; border: none; color: #fff;}
body .ui-datepicker .ui-datepicker-title select option { color: var(--fontColor, #1c1c1c); }
body .ui-datepicker select.ui-datepicker-month-year { width: 100%; }
body .ui-datepicker select.ui-datepicker-month,
body .ui-datepicker select.ui-datepicker-year { width: 49%; }
/* 년/월 select niceSelect 적용 시 (흰색 글자, 투명 배경) */
body .ui-datepicker .ui-datepicker-title .nice-select { display: inline-block; width: 49%; float: none; height: auto; line-height: 1.8em; padding-left: 10px; padding-right: 22px; background-color: transparent; border: none; color: #fff; font-size: 1em; text-align: left; }
body .ui-datepicker .ui-datepicker-title .nice-select:after { border: 0; right: 10px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none"><path d="M13 1L7 7L1 1" stroke="%23fff" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat; }
body .ui-datepicker .ui-datepicker-title .nice-select .list { width: 100%; max-height: 200px; overflow-y: auto; color: var(--fontColor, #1c1c1c); }
body .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: 400; border: 0; }
body .ui-datepicker td { border: 0; padding: 1px; }
body .ui-datepicker td span,
body .ui-datepicker td a { display: block; padding: .4em .2em; text-align: center; text-decoration: none; }
body .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
body .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
body .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }



/* 모달 */
.modal {display: block; overflow: auto; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 8rem 0; font-size: var(--p4); background: rgba(0,0,0,0.7); pointer-events: none; transition: 0.3s ease-in-out;}
.modal.open {opacity: 1; pointer-events: inherit; }
.modal .modal_wrap {display: table; table-layout: fixed; vertical-align: middle; margin: 0 auto; width: 100%; height: 100%; position: relative; padding: 0 2rem;}
.modal .modal_wrap .scroll_box {display: table-cell; vertical-align: middle}
.modal .modal_wrap .modal_cont {position: relative; width: 100rem; max-width: 100%; margin: 0 auto; background-color: #fff;}

.modal_wrap .modal_cont .modal_close {position: absolute; top: 2.5rem; right: 2.5rem; width: max(3rem, 22px); height: max(3rem, 22px); cursor: pointer; z-index: 2;  background-size: 1.2em; transition: transform 0.5s; background: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 4L4 21" stroke="%231C1C1C" stroke-width="2" stroke-linejoin="round"/><path d="M4 4L21 21" stroke="%231C1C1C" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain; }
.modal_wrap .modal_cont .modal_close.wh {background: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 4L4 21" stroke="%23FFF" stroke-width="2" stroke-linejoin="round"/><path d="M4 4L21 21" stroke="%23FFF" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain;}
.modal_wrap .modal_cont .modal_close.bk {background: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 4L4 21" stroke="%231C1C1C" stroke-width="2" stroke-linejoin="round"/><path d="M4 4L21 21" stroke="%231C1C1C" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain;}
.modal_wrap .modal_cont .modal_close.solo {position: absolute; right: -3rem; top: 0; transform: translateX(100%); }
/* .modal_wrap .modal_cont .modal_close {position: absolute; top: 3rem; right: 3rem; width: 3rem; height: 3rem; cursor: pointer; z-index: 2;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23fff" d="M420.7 36.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L246.6 256 443.3 452.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L224 278.6 27.3 475.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L201.4 256 4.7 59.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L224 233.4 420.7 36.7z"/></svg>') no-repeat center; background-size: 1.2em;}
.modal_wrap .modal_cont .modal_close.wh {background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23fff" d="M420.7 36.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L246.6 256 443.3 452.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L224 278.6 27.3 475.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L201.4 256 4.7 59.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L224 233.4 420.7 36.7z"/></svg>') no-repeat center/cover;}
.modal_wrap .modal_cont .modal_close.bk {background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23000" d="M420.7 36.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L246.6 256 443.3 452.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L224 278.6 27.3 475.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L201.4 256 4.7 59.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L224 233.4 420.7 36.7z"/></svg>') no-repeat center; background-size: 1.2em;} */

.modal_cont .head{display: flex; align-items: center; justify-content: space-between; padding: 2.4rem 2.4rem 2rem 2.4rem; border-radius:2.4rem 2.4rem 0 0; background:var(--point01); color:#fff;}
.modal_cont .head p{margin-right: 1.5em; font-size:var(--p2); font-weight: 700;}
.modal_cont .cont{overflow: auto; border-radius: 2.4rem;}

.modal_cont .btn_wrap{display: flex; gap: 1rem; width: 100%; justify-content: center; margin-top: 4rem;}
.modal_cont .btn_wrap a,
.modal_cont .btn_wrap .btn{ width: max(17.5rem, 140px); padding: 1.2em 0; background: var(--black); border: 1px solid var(--black); color: #fff; font-size: var(--p4); font-weight: 600; text-align: center; border-radius: 1rem; line-height: 1em; transition: background 0.25s, color 0.25s;}
.modal_cont .btn_wrap a.line,
.modal_cont .btn_wrap .btn.line{background: #fff; border-color: var(--gray20); color: var(--black);}
.modal_cont .btn_wrap .btn.only{width: 100%; max-width: 100%;}

.modal_wrap .modal_cont .head .modal_close{position:relative; top:unset; right:-0.5rem; width: max(3rem, 22px); height: max(3rem, 22px);}
.over_modal {display: block; overflow: auto; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 8rem 0; background: rgba(0,0,0,0.7); font-size: var(--p3); pointer-events: none; transition: 0.3s ease-in-out;}
.over_modal.open {opacity: 1; pointer-events: inherit; }
.over_modal .modal_wrap {display: table; table-layout: fixed; vertical-align: middle; margin: 0 auto; width: 100%; height: 100%; position: relative; padding: 0 2rem;}
.over_modal .modal_wrap .scroll_box {display: table-cell; vertical-align: middle}
.over_modal .modal_wrap .modal_cont {position: relative; width: 80rem; max-width: 100%; margin: 0 auto; background-color: #fff;}
.over_modal .modal_wrap .modal_cont.member{width: 60rem; background: none;}

.over_modal .modal_wrap .modal_cont.terms {background:transparent;}
.modal_cont.terms .head .modal_close{background: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 4L4 21" stroke="%23FFF" stroke-width="2" stroke-linejoin="round"/><path d="M4 4L21 21" stroke="%23FFF" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain;}
.modal_cont.terms .cont {overflow-y: auto; max-height: 66vh; padding: 2.4rem; background-color: #fff; border-radius: 0 0 2.4rem 2.4rem; font-size: var(--p4);}
.modal_cont.terms .cont figure  {margin: 0; overflow-x: auto; max-width: 100%;}
.modal_cont.terms .cont figure::-webkit-scrollbar {display: none;}
.modal_cont.terms .cont table {margin-top: 1rem; width: 100%;}
.modal_cont.terms .cont table th {border: 1px solid var(--gray20) !important; padding: 1rem; background-color: var(--gray5);}
.modal_cont.terms .cont table td {border: 1px solid var(--gray20) !important; padding: 1rem;}
.modal_cont.terms .cont p + p {margin-top: 0;}
.modal_cont.terms .cont h2 {font-weight: 700; font-size: var(--p3); margin-bottom: 5px;}
.modal_cont.terms .cont h3 {font-weight: 700; font-size: var(--p4); margin-bottom: 3px;}
.modal_cont.terms .cont * + h3{margin-top: 1.5rem;}
.modal_cont.terms .cont .sect + .sect {margin-top: 2rem;}
.modal_cont .cont::-webkit-scrollbar{width: 10px;}
.modal_cont .cont::-webkit-scrollbar-thumb{background: #d7d7d7; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px;}
.modal_cont .cont::-webkit-scrollbar-track{background: #fff;}
.modal_cont .cont::-webkit-scrollbar-button:vertical:decrement{height: 15px;}
.modal_cont .cont::-webkit-scrollbar-button:vertical:increment{height: 15px;}
/* Safari */
@supports (-webkit-hyphens: none) {
    .modal_cont .cont::-webkit-scrollbar{width: 5px;}
    .modal_cont .cont::-webkit-scrollbar-thumb{background: #d7d7d7; border: 0; border-radius: 999px;}
    .modal_cont .cont::-webkit-scrollbar-track{background: transparent; margin: 15px 0;}
    .modal_cont .cont::-webkit-scrollbar-button:vertical:decrement{height: 0;}
    .modal_cont .cont::-webkit-scrollbar-button:vertical:increment{height: 0;}
}

.modal_cont.terms .item {display: flex}
.modal_cont.terms .item .number {margin-right: 0.3em}
.modal_cont.terms .privacy-agree-note{margin-top: 2rem;}
.modal_cont.terms .privacy-box{margin-top: 2rem;}

/* 유튜브 모달 */
.modal_cont.youtube_view {width: max(9rem,700px); }
.modal .modal_wrap .modal_cont.youtube_view{background-color: transparent;}
.modal_cont.youtube_view .cont {max-height: 80svh; padding: 4rem; display: flex; flex-direction: column; overflow: hidden; background-color: #fff; border-radius: 0 0 2.4rem 2.4rem;}
.modal_cont.youtube_view .cont .video_box {width: 100%; padding-top: 56.25%; position: relative; border-radius: 0; overflow: hidden;}
.modal_cont.youtube_view .cont .video_box iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.modal_cont.youtube_view .cont .txt_wrap {margin-top: 3rem; flex: 1; min-height: 0; display: flex; flex-direction: column;}
.modal_cont.youtube_view .cont .txt_wrap .tit_box .tit {font-size: var(--p1); font-weight: 700;}
.modal_cont.youtube_view .cont .txt_wrap .tit_box .date {margin-top: 0.5rem; color: var(--gray40);}
.modal_cont.youtube_view .cont .txt_wrap .txt_box {display: flex; flex: 1; min-height: 0; flex-direction: column; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray90); }
.modal_cont.youtube_view .cont .txt_wrap .txt_box .tag_wrap {display: flex; flex-wrap: wrap; gap: 5px;}
.modal_cont.youtube_view .cont .txt_wrap .txt_box .tag_wrap .tag {padding: 0.2em 0.5em; font-size: var(--p6); background-color: var(--gray11); border-radius: 2rem; background-color:#EEF5FF; line-height: 1; border-radius: 5px; font-weight: 500; color: var(--point02);}
.modal_cont.youtube_view .cont .txt_wrap .txt_box .txt {margin-top: 15px; overflow-y: auto; flex: 1; min-height: 0;}
.modal_cont.youtube_view .cont .txt_wrap .txt_box .txt::-webkit-scrollbar{width:5px;}
.modal_cont.youtube_view .cont .txt_wrap .txt_box .txt::-webkit-scrollbar-thumb{background: var(--gray20); border-radius: 12px 12px 12px 12px;}
.modal_cont.youtube_view .cont .txt_wrap .txt_box .txt::-webkit-scrollbar-track {background: var(--gray5);}

.modal .modal_wrap .modal_cont.info_type,
.over_modal .modal_wrap .modal_cont.info_type {width: max(45rem, 400px);}
.modal_wrap .modal_cont.info_type .cont {display: flex; flex-direction: column; align-items: center; text-align: center; padding: 7rem 4.5rem;}
.modal_wrap .modal_cont.info_type .cont .ico {width: 7.5rem;}
.modal_wrap .modal_cont.info_type .cont .ico svg {width: 100%; height: auto;}
.modal_wrap .modal_cont.info_type .cont .logo {height: 14.4rem;}
.modal_wrap .modal_cont.info_type .cont .logo img{height: 100%;}
.modal_wrap .modal_cont.info_type .cont .logo svg {width: 100%; height: auto;}
.modal_wrap .modal_cont.info_type .cont .tit {font-size: var(--p1); font-weight: 700; margin-top: 2rem; line-height: 1.5;}
.modal_wrap .modal_cont.info_type .cont .txt {font-size: var(--p4); margin-top: 0.3em; }

/* 장바구니 담기 모달 */
.modal_wrap .modal_cont.info_type.cart_complete .cont .txt{font-size: var(--p3); font-weight: 500; color: var(--black);}
.modal_wrap .modal_cont.info_type.cart_complete .cont .btn_wrap{margin-top: 3rem;}
.modal_wrap .modal_cont.info_type.cart_complete .cont .btn_wrap .btn{width: 50%;}
.modal_wrap .modal_cont.info_type.cart_complete .cont .txt .point_c{color: var(--point01); font-weight: 700;}
.modal_wrap .modal_cont.info_type.cart_complete .cont .logo + .txt_box{margin-top: 2rem; font-weight: 700;}
.modal_wrap .modal_cont.info_type.cart_complete .cont .logo + .txt_box .txt{font-weight: 700;}
.modal_wrap .modal_cont.info_type.cart_complete .cont .info_txt{font-size: var(--p6); color: var(--gray70); margin-top: 0.5em; font-weight: 400;}
.modal_wrap .modal_cont.info_type.cart_complete.info_type .cont{padding: 4rem 3rem;}

/* 로그인/회원가입 모달 */
.modal .modal_wrap .modal_cont.member{width: max(45rem, 350px); background: #fff; border-radius: 2.4rem;}
.modal .member .join_wrap{padding: 8rem 5rem; }
.modal .member .join_wrap .txt_box{margin-bottom: 2rem; text-align: center;}
.modal .member .join_wrap .txt_box .step{margin-bottom: 0.5em; color: var(--point01); font-size: var(--p5); font-weight: 700; line-height: 1em;}
.modal .member .join_wrap .txt_box .logo{width: 13rem; margin:0 auto 1.5rem;}
.modal .member .join_wrap .txt_box .tit{font-size: var(--p1); font-weight: 700;}
.modal .member .join_wrap .txt_box .txt{font-size: var(--p4); }
.modal .member .join_wrap .txt_box .ico{margin: 0 auto 2rem;}
.modal .member .join_wrap .inp_wrap .dot_list {margin-top: 1rem; color: rgba(0,0,0,0.5); font-size: var(--p4);}
.modal .member .join_wrap .inp_wrap .dot_list li{position: relative; padding-left: 0.5em; font-size: var(--p4);}
.modal .member .join_wrap .inp_wrap .dot_list li:before{content: '· '; position: absolute; left: 0;}

.modal .member .join_wrap .inp_wrap{margin-top: 2rem;}
.modal .member .join_wrap .inp_wrap .inp_tit{display: flex; align-items: center; justify-content: space-between; font-size:var(--p4); margin-bottom: 1rem; font-weight: 600;}
.modal .member .join_wrap .inp_wrap .inp_tit p .ess{margin-left: 3px; color: var(--point01);}
.modal .member .join_wrap .inp_wrap .inp_tit a{display: flex; align-items: center; color: #9A9EA7; font-size: var(--p4); transition: color 0.25s;}
.modal .member .join_wrap .inp_wrap .inp_tit a svg{margin-left: 0.5em; fill: #9A9EA7; transition: fill 0.25s;}

.modal .member .join_wrap .inp_wrap input{width: 100%; height: var(--inpH); line-height: var(--inpH); font-size: var(--p4); padding: 0 1.2em; background-color: #fff; border:1px solid var(--gray20); border-radius: 1rem; transition: background 0.25s, border 0.25s;}
.modal .member .join_wrap .inp_wrap input:focus{border-color: #232323;}
.modal .member .join_wrap .inp_wrap input::placeholder{color: #BCBFC7;}
.modal .member .join_wrap .inp_wrap .inp {position: relative}
.modal .member .join_wrap .inp_wrap .inp input + .ico {position: absolute; right: max(5rem, 35px); top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; background-color: var(--point01); border-radius: 50%; display: none;}
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked {display: block;}
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked.enable {display: block; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="%232F58E0"/><path d="M7 10L9.5 12.5L13.5 8" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') no-repeat center center / cover}
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked.unable {display: block; background: #EC5252 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M9 3L3 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 3L9 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat 50% 50% / 70%;}

.modal .member .join_wrap .inp_wrap .flex_wrap{display: flex;}
.modal .member .join_wrap .inp_wrap .flex_wrap button{margin-left: 0.8rem ;flex-shrink: 0; height: var(--inpH); padding: 0 1.5em;  font-size: var(--p4); border-radius: 0.8rem ; color: #fff; background-color: #FFBF00; transition: background 0.25s, color 0.25s;}

/* 아이디찾기 STEP2 */
.modal .member .join_wrap.find_id .chk_id { text-align: center; padding: 1em; border-radius: 1rem; background-color: var(--bg); }
.modal .member .join_wrap.find_id .chk_id .txt{position: relative; display: flex; align-items: center; justify-content: center; font-weight: 700;}
.modal .member .join_wrap.find_id .chk_id .txt:before{content: ''; position: relative; margin-right: 0.3em; margin-top: -0.2em; display: inline-block; width: 1.1em; height: 1.1em; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.5 2C13.2614 2 15.5 4.23858 15.5 7C15.5 8.88237 14.4588 10.52 12.9219 11.373C16.1563 12.3992 18.5 15.4259 18.5 19H2.5C2.5 15.4263 4.84321 12.3995 8.07715 11.373C6.54061 10.5199 5.5 8.88207 5.5 7C5.5 4.23858 7.73858 2 10.5 2Z" fill="%231F2933"/></svg>') no-repeat center / contain;}

/* 비밀번호 변경 */
.modal .modal_wrap .modal_cont.member.pw_chg{width: 60rem;}
.modal_cont.member.pw_chg .join_wrap{padding: 0 3rem 5rem;}
.modal_cont.pw_chg .head{background-color: #fff; color: var(--black);} 
.modal_cont.pw_chg .btn_wrap{margin-top: 3rem;}

/* 가입 정보확인 */
.modal .modal_wrap .modal_cont.info_type.join_chk{width: max(60rem, 500px);}
.modal_cont.info_type.join_chk .join_chk_table{width: 100%; font-size: var(--p4); text-align: left; margin-top: 3rem; border-top: 1px solid var(--gray90);}
.modal_cont.info_type.join_chk .join_chk_table .row{display: flex; padding: 1em; border-bottom: 1px solid var(--gray20);}
.modal_cont.info_type.join_chk .join_chk_table .row .th{font-weight: 700; min-width: 10em;}

/* 가입 완료 */
.modal .member .join_wrap .join_complete{display: flex; flex-direction: column; align-items: center;}
.modal .member .join_wrap .join_complete .txt_box{margin-bottom: 0;}
.modal .member .join_wrap .join_complete .ico{display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; background: #f0f0f0; font-size: 3.6rem; border-radius: 50%;}
.modal .member .join_wrap .join_complete .ico svg{fill: var(--point01);}
.modal .member .join_wrap .join_complete .info_txt{margin-top: 0.5rem;}
.modal_cont.member .info_txt {font-size: var(--p6); margin-top: 1rem; color: var(--gray60); }


/* ---------- 튜토리얼 ---------- */
.tutorial_modal{position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1000; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity 0.3s ease; }
.tutorial_modal.open{display: block; opacity: 1; pointer-events: inherit;}
.tutorial_modal.close{ opacity: 0; pointer-events: none; }

.tutorial_modal .close_btn_wrap {position: absolute; display: flex; flex-direction: column; align-items: flex-end; top: 4rem; right: 4rem; z-index: 5;}
.tutorial_modal .modal_close { width: 4rem; height: 4rem; cursor: pointer; transition: transform 0.5s; background: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 4L4 21" stroke="%23FFF" stroke-width="2" stroke-linejoin="round"/><path d="M4 4L21 21" stroke="%23FFF" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center / contain;}
.tutorial_modal .modal_today_close{ margin-top: 3rem; font-size: var(--p2); font-weight: 600; color:#fff; cursor: pointer;}
.tutorial_modal .modal_today_close label{display: flex; align-items: center; cursor: pointer;}
.tutorial_modal .modal_today_close svg{display: block; margin-right: 0.5em; margin-top: -0.2em;}

.tutorial_modal .img_box{width: 100%; height: 100%; text-align: center; }
.tutorial_modal .img_box img{width: 100%; height: 100%; object-fit: contain; object-position: center;}
.tutorial_modal .img_box.bg_type2{background-color: #313131; }

/* 튜토리얼 진입 화면 */
.tutorial_modal .intro_view{position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; inset: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(0,0,0,0.8); z-index: 2; color: #fff; transform: scale(1); filter: blur(0); transition: opacity 0.68s ease, transform 0.88s cubic-bezier(.16, 1, .3, 1), filter 0.68s ease;}
.tutorial_modal .intro_view .img{width: auto; height: 19rem; margin-bottom: 5rem;}
.tutorial_modal .intro_view .img img{height: 100%;}
.tutorial_modal .intro_view .txt{font-size: var(--h5); font-weight: 700; line-height: 1.6;}
.tutorial_modal .intro_view .intro_btn_box {display: flex; gap: 2rem; margin-top: 5rem;}
.tutorial_modal .intro_view .intro_btn_box .btn{display: block; font-size: var(--p4); min-width: 10em; font-weight: 700; line-height: 1; color: var(--point01); text-align: center; padding: 1.25em; background-color: #FFF; border-radius: 99rem; transition: 0.3s ease;}
.tutorial_modal .intro_view .intro_btn_box .btn.pass_btn{background-color: rgba(255, 255, 255, 0.15); color: #fff; backdrop-filter: blur(10px);}
.tutorial_modal.is-starting .intro_view{opacity: 0; transform: scale(1.04); filter: blur(8px); pointer-events: none;}

.tutorial_modal .tutorial_pc_slide,
.tutorial_modal .tutorial_mo_slide{position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background-color: #333; opacity: 1; transform: scale(1); transition: opacity 0.78s ease 0.16s, transform 0.92s cubic-bezier(.16, 1, .3, 1) 0.08s;}
.tutorial_modal .tutorial_pc_slide.hide,
.tutorial_modal .tutorial_mo_slide.hide{opacity: 0; transform: scale(0.96); pointer-events: none;}
.tutorial_modal.is-slide-ready .tutorial_pc_slide,
.tutorial_modal.is-slide-ready .tutorial_mo_slide{opacity: 1; transform: scale(1);}

.tutorial_modal .tutorial_pc_slide .slide,
.tutorial_modal .tutorial_mo_slide .slide{position: relative; width: 100%;}
.tutorial_modal .tutorial_pc_slide .slide{height: 100%;}
.tutorial_modal .swiper-container{width: 100%; height: 100%; overflow: hidden;}

.tutorial_modal .tutorial_pc_slide .controls{position: absolute; bottom: 8rem; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff;}
.tutorial_modal .tutorial_pc_slide .controls .pagination{display: flex; margin: 0 auto; gap: 0.3em; text-align: center; width: max-content; font-size: var(--p6); padding: 0.3em 1em; font-weight: 600; border-radius: 99rem;background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(15px);}
.tutorial_modal .tutorial_pc_slide .controls .pagination .swiper-pagination-current{min-width: 0.7em; text-align: center;}

.tutorial_modal .tutorial_pc_slide .controls .btn_wrap{display: flex; align-items: center; gap: 3rem; margin-top: 2rem;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .btn{display: flex; align-items: center; gap: 0.3rem; font-size: var(--h6); font-weight: 700; line-height: 1;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .btn .ico svg{display: block; height: 1em;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .left_btn_box,
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .right_btn_box{display: flex; width: 6em;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .btn.hide{display: none;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .left_btn_box{opacity: 0.5; transition: opacity 0.3s ease;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .left_btn_box{position: relative; margin-left: auto; justify-content: flex-end;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .left_btn_box .btn:hover{opacity: 1;}
.tutorial_modal .tutorial_pc_slide .controls .btn_wrap .bar{ position: relative; display: block; width: 2px; height: 1em; background-color: #fff; opacity: 0.3;} 


/* 튜토리얼 모바일 */
.tutorial_modal .img_box.bg_type2{background-color: #313131; }

.tutorial_modal .tutorial_mo_slide{display: none;}
.tutorial_modal .tutorial_mo_slide .cont{display: flex; flex-direction: column; height: 100%; --tutorial-mo-visual-width: 100%;}
.tutorial_modal .tutorial_mo_slide .btm_btn{display: block; flex-shrink: 0; width: 100%; padding: 1em 0; font-size: var(--p1); background-color: #002AA1; font-weight: 700; color: #fff; z-index: 2;}
.tutorial_modal .tutorial_mo_slide .slide{flex: 1; min-height: 0;}

.tutorial_modal .tutorial_mo_slide .desc_box{position: absolute; width: calc(100% - var(--inPd) * 2); top: 10rem; left: 0; height: 110px; border-radius: 2.5rem; padding: 3rem; margin: 0 var(--inPd); background-color: #fff; z-index: 2;}
.tutorial_modal .tutorial_mo_slide .desc_box .txt{font-weight: 600; line-height: 1.5; font-size: var(--p1);}
.tutorial_modal .tutorial_mo_slide .btm_box{margin-top: 2.5rem; display: flex; justify-content: space-between; align-items: flex-end;}
.tutorial_modal .tutorial_mo_slide .btn{ background-color: var(--black); font-size: var(--p3); font-weight: 700; padding: 0.4em 1em; color: #fff; border-radius: 99rem;}
.tutorial_modal .tutorial_mo_slide .btn.start_btn{background-color: var(--point01);}
.tutorial_modal .tutorial_mo_slide .num{font-size: var(--p3); color: var(--gray30); margin-left: auto; line-height: 1;}  
.tutorial_modal .tutorial_mo_slide .num .current{color: var(--black);}  


@media screen and (max-width: 768px) {
    .tutorial_modal .modal_close{top: 3rem; right: 3rem; width: 3rem;height: 3rem;}
}

@media screen and (min-width: 601px) {
    .tutorial_modal .tutorial_mo_slide .desc_box{width: max(0px, calc(var(--tutorial-mo-visual-width) - var(--inPd) * 2)); left: calc((100% - var(--tutorial-mo-visual-width)) / 2); margin: 0 var(--inPd); transform: none;}
    /* .tutorial_modal .tutorial_mo_slide .btm_btn{width: var(--tutorial-mo-visual-width); max-width: 100%; margin: 0 auto;} */
}

@media screen and (max-width: 600px){
    
    .tutorial_modal .close_btn_wrap{top: 3rem; right: 3rem; flex-direction: row; align-items: center;}
    .tutorial_modal .modal_close {order: 2;}
    .tutorial_modal .modal_today_close{margin-top: 0; margin-right: 20px; order: 1; margin-top: 3px;}
    .tutorial_modal .img_box img{width: 100%; height: 100%; object-fit: cover; object-position: bottom;}
}



/* 알랏레이어 */
.msg_layer{display: block; justify-content: center; align-items: center; overflow: auto; position: fixed; top:0; bottom:0; left:0; right:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 50px 20px 80px; background: rgba(0, 0, 0, 0.5); pointer-events: none; transition: 0.2s ease-in-out}
.msg_layer.open{opacity: 1; pointer-events: inherit}
.msg_layer .modal_wrap{display: table; position: relative; width: 100%; height: 100%; padding: 0 3rem; margin: 0 auto; table-layout: fixed; vertical-align: middle}
.msg_layer .modal_wrap .scroll_box{display: table-cell; vertical-align: middle}
.msg_layer .modal_wrap .modal_cont {position: relative; width:42rem; max-width: 100%; margin: 0 auto; background-color: #fff; border-radius: 12px;}
.msg_layer .modal_wrap .modal_cont .cont {padding: 5rem 3rem 4.5rem}
.msg_layer .modal_wrap .modal_cont .cont p {font-size: var(--p3); text-align: center; line-height: 1.6; font-weight: 500;}
.msg_layer .modal_bot_box {display: flex; justify-content: center}
.msg_layer .modal_bot_box .btn {display: inline-block; width: 12rem; height: 4rem; line-height: 3.9rem; background-color: #000; color: #fff}
.msg_layer .modal_bot_box .btn:first-child:nth-last-child(2),
.msg_layer .modal_bot_box .btn:first-child:nth-last-child(2) ~ .btn {width: 12rem;}
.msg_layer .modal_top { display: flex; align-items: center; justify-content: space-between; padding: 4rem 4rem 2rem; display: none}
.msg_layer .modal_top.step { align-items: flex-start; }
.msg_layer .modal_top .step { font-size: var(--p4); font-weight: 600; }
.msg_layer .modal_top .step + .tit { margin-top: 10px; }
.msg_layer .modal_top .tit { font-size: 24px; font-weight: 700; }
.msg_layer .btn_wrap { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 2rem; }
.msg_layer .btn_wrap .btm_btn { cursor:pointer;display: flex; align-items: center; justify-content: center; flex: 1; max-width: 50%; height: 3em; padding: 0 1.5em; line-height: 3.1rem; font-size: var(--p4); font-weight: 600; border-radius: 1rem; background-color: var(--point01); border: 1px solid var(--point01); color: #fff; box-shadow: 0 0 0 transparent; transition: 0.3s ease-in-out; white-space: nowrap; }
.msg_layer .btn_wrap .btm_btn.wh{background-color: #fff; color: var(--point01);}
.msg_layer .btn_wrap .btm_btn:hover,
.msg_layer .btn_wrap .btm_btn.wh:hover{background: #000; color:#fff; border-color: #000;}
.msg_layer .btn_wrap .btm_btn .txt { font-weight: 600; }
/* promptLayer 입력 (common.js) */
.msg_layer .modal_cont .cont .prompt_input{display: block; width: 100%; height: 4rem; padding: 0 1.2rem; margin-top: 1.6rem; border: 1px solid #ddd; border-radius: 0.8rem; font-size: var(--p4);}
.msg_layer .modal_cont .cont .prompt_input:focus{outline: none; border-color: var(--point01);}





.tel_btn{cursor: text; white-space: nowrap;}




/* Hover */
@media screen and (min-width: 1241px) {

    .swiper_controls .swiper_btn:hover {opacity: 1;}
    .site_map .top .close_btn:hover {transform: rotate(180deg);}

    .round_btn .btn:hover{background-color: var(--black); border-color:var(--black); color:#fff;}
    .round_btn .btn:hover:after {background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23FFFFFF" d="M429.8 273l17-17-17-17L276.2 85.4l-17-17-33.9 33.9 17 17L354.9 232 24 232 0 232l0 48 24 0 330.9 0L242.2 392.6l-17 17 33.9 33.9 17-17L429.8 273z"/></svg>') no-repeat center / contain;}
    .round_btn.wht .btn:hover{background-color: #fff; border-color:#fff; color:var(--black);}
    .round_btn.wht .btn:hover:after {background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23000000" d="M429.8 273l17-17-17-17L276.2 85.4l-17-17-33.9 33.9 17 17L354.9 232 24 232 0 232l0 48 24 0 330.9 0L242.2 392.6l-17 17 33.9 33.9 17-17L429.8 273z"/></svg>') no-repeat center / contain;}
    .round_btn.out .btn:hover:after{background: url('data:image/svg+xml,<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5312 0.75H17.1562H18V1.59375V7.21875V8.0625H16.3125V7.21875V3.63281L8.47266 11.4727L7.875 12.0703L6.67969 10.875L7.27734 10.2773L15.1172 2.4375H11.5312H10.6875V0.75H11.5312H10.6875H11.5312ZM0.84375 1.875H7.03125H7.875V3.5625H7.03125H1.6875V17.0625H15.1875V11.7188V10.875H16.875V11.7188V17.9062V18.75H0.84375H0V17.9062V2.71875V1.875H0.84375H0H0.84375Z" fill="white"/></svg>') no-repeat center / contain;}

    .header .util_wrap .util_btn:not(.ico_btn):hover{ background-color: var(--black); color: #fff; border-color:var(--black);}
    .header.top .util_wrap .util_btn:not(.ico_btn):hover{ background-color: rgba(255,255,255,0.4); color: #fff; border-color:transparent;}

    .header nav .depth1 .depth2 > li > a:hover{opacity: 1;}

    .footer .terms_txt a:hover:after{width: 100%;}
    .footer .terms_txt a + a:hover:after{width: calc(100% - var(--linkPd));}
    .footer .sns_list .sns_btn:hover{ transform: translateY(-8px); }

    .footer .footer_way .map_btn:hover,
    .footer .footer_family .nice-select:hover {background-color: #000; color: #fff;}
    .footer .footer_family .nice-select:hover .current {color: #fff;}
    .footer .footer_family .nice-select:hover:after {transform: rotate(0); background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M15 7.5H0M7.5 15V0" stroke="%23fff" stroke-width="1.8" stroke-linejoin="round"/></svg>') no-repeat center / contain;}

    .footer .footer_way .map_btn svg path {transition: 0.3s ease-in-out;}
    .footer .footer_way .map_btn:hover svg path {fill: #fff;}

    .fix_btn_box .top_btn:hover .ico svg{transform: translateY(-10px);}

    .tutorial_modal .intro_view .intro_btn_box .btn.view_btn:hover{background-color: var(--point01); color: #fff;}

    .keyword_form .keyword_box.recom .keyword .btn:hover {background-color: var(--black); color: #fff; border-color: var(--black);}
    .all_search_page .result_wrap .tab_box .btn:hover {background-color: var(--black); color: #fff; border-color: var(--black);}
    .all_search_page .subject_sect .list_box .cont:hover {background-color: var(--point01); border-color:var(--point01); color: #fff;}
    .all_search_page .subject_sect .list_box .cont:hover .nav_txt{color: #fff;}
    .all_search_page .subject_sect .list_box .cont:hover .tit .arr {background: url('data:image/svg+xml,<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 0L14.4156 3.08437L26.6219 15.3125L0 15.3125L0 19.6875H26.6219L14.4156 31.9156L17.5 35L35 17.5L17.5 0Z" fill="white"/></svg>') no-repeat center / contain;}


    .modal_cont .btn_wrap .btn:hover{background:var(--point01); color:#fff; border-color:var(--point01);}



}




/* 3201 ~  */
@media screen and (min-width: 3201px) {
    html { font-size: 13px;}
}

/* 2561 ~ 3200 */
@media screen and (min-width: 2561px) and (max-width: 3200px) {
    html { font-size: clamp(0.625rem, 0.125rem + 0.3125vw, 0.75rem);}
}

/* 2560px 이하 */
@media screen and (max-width: 2560px) {
    html { font-size: clamp(0.53125rem, 0.1964rem + 0.2679vw, 0.625rem);}
}




/* 반응형 */
@media screen and (max-width: 2000px) {
    html { font-size: 8.5px; }
    :root {
        --mainIn: max(146rem, 1240px);
        --in: max(146rem, 1240px);
        
    }

    .header .util_wrap .btn.cart .num{font-size: max(1.2rem, 10px);}

    .fix_btn_box .menu_box > .list > .item .btn{padding: 1.5rem 0;}
    .fix_btn_box .menu_box > .list > .item .btn .txt,
    .fix_btn_box .txt{font-size: 13px;}

    .site_map .cont .depth2 > li{font-size: var(--p4);}
    .site_map .cont .list > .depth1 + .depth1 { margin-top: 3rem; padding-top: 3rem;}

    .footer .fnb .item{font-size: var(--p6);}
    .footer .cs_cont .cs_top .cs_tel{font-size: var(--p4);}
    .footer .sns_list{gap: 0.3rem;}

}



@media screen and (max-width: 1640px){
    html { font-size: 7px; }
    :root {
        --hdIn: var(--inPd);
        
        --p3: 16px;
    }


    .header nav .list > li > a {padding: 0 2.5em;}
    .header.on nav .list > li > a{padding: 0 3em}

    .header .util_wrap .link_btn {padding: 0.7em 1.5em; font-size: var(--p4);}

    .fix_btn_box .menu_box > .list > .item .btn .txt,
    .fix_btn_box .txt{font-size: 12px;}

    .fix_btn_box .menu_wrap,
    .fix_btn_box .menu_btn,
    .fix_btn_box .top_btn{width: 10rem;}

    .fix_btn_box .menu_btn,
    .fix_btn_box .top_btn{height: 10rem;}

    .footer .footer_cont .top_box{padding-right: 13rem;}
    
    .modal .modal_wrap .modal_cont.info_type,
    .over_modal .modal_wrap .modal_cont.info_type{width: 55rem;}
    

}


@media screen and (max-width: 1440px){
    .header nav {left: 48%;}

    .header nav .list > li > a {padding: 0 2.3em;}
    .header.on nav .list > li > a{padding: 0 2.8em}

    .header nav .depth1 .depth2 > li.out_link > a span:after {right: -5px;}

    .fix_btn_box .menu_box > .list > .item .btn .txt, .fix_btn_box .txt {font-size: 11px;}

    .footer .footer_cont{padding-right: 13rem;}

    
}




@media screen and (max-width: 1240px) {
    html { font-size: 6px; }

    :root {
        --hdH: 70px;

        --h1:40px; 
        --h2:34px; 
        --h3:30px; 
        --h4:26px; 
        --h5:24px;
        --h6:22px;
        --h7:20px; 
        --h8:18px; 

        --p1:18px; 
        --p2:16px;
        --p3:15px;  /* 본문 */  
        --p4:14px;
        --p5:13px;
        --p6:12px;
        --p7:12px;
        --p8:11px;
        --p9:11px;

        --pd:25rem;
        --pd1:25rem;
        --pd2:20rem;
        --pd3:15rem;

        --contMt:6rem

    }

    .mo_over { display: none !important; }
    .mo_only { display: block !important; }
    .tab_only{ display: block !important;}
    .mo_only.flex{display: flex !important;}

    /*.ms_preloader{display:none;}*/

    .pointer{display: none;}

    .header nav {display: none;}
    .header .logo {width: 20rem;}

    .site_map .top .logo {width: 30rem;}
    .site_map .cont .list > li > a {font-size: var(--h7);}
    .site_map .cont .depth2 {margin-top: 3rem;}
    .site_map .cont .depth2 li {font-size: var(--p2);}

    .site_map .top .link_btn {font-size: var(--p4);}

    .header .util_wrap .ham_btn {display: block;}

    .tel_btn{cursor: pointer;}

    .keyword_form .keyword_box.popular .ranking_list{gap: 2rem 4rem;}
    .all_search_page .keyword_form .keyword_wrap .left_box,
    .all_search_page .keyword_form .keyword_wrap .right_box {width: 55rem;}


}


@media screen and (max-width: 1024px){

    .footer .footer_box{flex-direction: column;}
    .footer .sns_list{margin-top: 2rem;}
    .footer .cs_cont{text-align: left;}
    .footer .footer_cont{padding-right: 0;}


}






@media screen and (max-width: 768px) {
    html {font-size: 6px;}


    :root {
        --hdH: 60px;
        --inpH: 45px;
        --inPd:15px;

        --d1:40px;
        --h1:34px; 
        --h2:28px; 
        --h3:24px; 
        --h4:22px; 
        --h5:20px;
        --h6:18px;
        --h7:18px; 
        --h8:18px; 

        --p1:16px; 
        --p2:15px;
        --p3:14px;  /* 본문 */  
        --p4:13px;
        --p5:12px;
        --p6:12px;
        --p7:11px;
        --p8:11px;
        --p9:11px;


        --pd:120px;
        --pd1:100px;
        --pd2:100px;
        --pd3:80px;
        --pd4:60px;

        --contMt1: 50px;
        --contMt2: 40px;
        --contMt3: 30px;
        --contMt4: 20px;

        --radius: 22px;
    }


    .phone_over{display: none !important;}
    .phone_only{display: block !important;}
    .phone_only.flex{display: flex !important;}

    .header .logo{display: none;}
    .header .nav .list > li > a{font-size:18px;}
    .header .nav .list > li > .depth2 > li > a{font-size:16px;}
    .header .util_wrap .link_btn.green {display: none;}
    .header .util_wrap .link_btn {font-size: var(--p5); }
    .header .util_wrap .btn svg{width: 25px; height: 25px;}
    .header .util_wrap .btn + .btn{margin-left: 17px;}

    .footer .footer_cont {padding: 40px 0 100px;}
    .footer .fnb{margin-top: 5rem;}
    .footer .fnb,
    .footer .terms_txt{flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; width: calc(100% + var(--inPd) * 2); margin-top: 20px; margin-left: calc(var(--inPd) * -1); padding: 0 var(--inPd);}
    .footer .fnb::-webkit-scrollbar,
    .footer .terms_txt::-webkit-scrollbar{display: none;}
    .footer .terms_txt a{ --linkPd: 1em;}
    .footer .info_wrap{margin-top: 10px;}
    .footer .info_wrap .info_btn{display: flex; align-items: center; gap: 0.5em; font-size: var(--p6); font-weight: 600;}
    .footer .info_wrap .info_btn svg{display: block; margin-top: -0.1em; transition: transform 0.3s ease;}
    .footer .info_wrap .info_btn + .info_txt_box{display: none;}
    .footer .info_wrap .info_btn.open svg{transform: rotate(180deg);}
    .footer .right_box{border-top:1px solid rgba(255, 255, 255, 0.20); padding-top: 30px; margin-top: 30px;}
    .footer .sns_list{margin-top: 0;}
    .footer .cs_cont .cs_top .desc,
    .footer .cs_cont .cs_time .lunch{margin-top: 10px;}
    .footer .cs_cont .cs_top .cs_tel{font-size: 18px;}
    .footer .cs_cont,
    .footer .cs_cont .cs_top .cs_tel .label{font-size: var(--p5);}

    .footer .sns_list{gap: 8px;}

    .fix_btn_box{top:unset; bottom: 0; left: 0; right:unset; transform:unset; width: 100%;}
    .fix_btn_box.open{transform: unset;}

    .fix_btn_box .menu_wrap{position: unset; width: 100%; right: inset; bottom: unset; top: 0; transform: unset;}
    .fix_btn_box .menu_box {border-radius: 0; background:var(--point01)}
    .fix_btn_box .menu_box > .list{display: flex; border-radius: 0; flex-direction: row; border:none; padding: 15px 0;}
    .fix_btn_box .menu_box ul li{flex:1;}
    .fix_btn_box .menu_box ul li + li a{padding-top: 0;}
    .fix_btn_box .menu_box > .list > .item .btn{padding: 0;}
    .fix_btn_box .top_btn{position: absolute; bottom: 80px; right: 15px; width: 8rem; height: 8rem; border-radius: 2rem; box-shadow: none; border: 1px solid var(--line);}
    .fix_btn_box .top_btn .ico{height: 50%; margin-top: -5%;}
    .fix_btn_box .menu_box > .list > .item .btn .ico svg{height: 18px;}
    .fix_btn_box .menu_box > .list > .item .btn img {height: 18px;}

    .fix_btn_box .phone_only .btn.modifiy_btn .ico{position: relative; width: 20px; height: 20px; border-radius: 50%; overflow: hidden;}
    .fix_btn_box .phone_only .btn.modifiy_btn .ico img {height: auto;}


    .fix_btn_box .txt:before{display: none;}

    .modal .modal_wrap .modal_cont.member.join{width: 75rem;}


    /* Site map */
    .site_map{justify-content: flex-start; overflow-y: auto; background-color: var(--bg); color: #101010; padding: 0}
    .site_map .top{position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 var(--inPd); height:var(--hdH); flex-shrink: 0; background-color: var(--brown);}
    .site_map .top .logo{display: block; width: 20rem; }
    .site_map .top .link_btn {font-size: var(--p5); padding: 0.7em 1.5em; background-color: var(--point01);}
    .site_map .top .link_btn .ico {display: none;}
    .site_map .top .close_btn {margin-left: 1.5em;}
    .site_map .top .close_btn {position: relative; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; cursor: pointer; border:none; border-radius: 0;}
    .site_map .top .close_btn .ico{width: 100%; height: 100%;}
    .site_map .top .right_wrap{display: flex; align-items: center;}
    .site_map .top .right_wrap .util_btn{position: relative; display: inline-block; font-size: var(--smTxt); height: 2.4em; line-height: 2.4em; margin-right: 2rem; padding: 0 1em; border-radius: 10rem;background-color: transparent; color: #fff; font-weight: 500; }
    .site_map .top .right_wrap .util_btn:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10rem; background-color: rgba(255,255,255,.2);}

    .site_map .cont_box{padding: 0;}
    .site_map .cont {position: relative; padding: 0; width: 100%; height: 100%; background-color: var(--bg); border-top: none;}
    .site_map .cont .list {flex-direction: column; max-width: 100%; padding: 0; margin-top: 0}
    .site_map .cont .list .depth1 {display: flex; padding: 0; width:100%; background-color: var(--bg);}
    .site_map .cont .list .depth1 + .depth1 {margin-top: 0; border-top: none;}
    .site_map .cont .list .depth1 > a{position:relative; display: flex; align-items: center; width: 24rem; padding: 0 1em; height: 52px; background-color: var(--bg); cursor: pointer; font-size:16px; color: var(--black); font-weight: 700; margin-bottom: 0;}
    .site_map .cont .list .depth1.active > a,
    .site_map .cont .list .depth1.on > a{background-color: #fff;}
    .site_map .cont .list .depth1 + .depth1 { margin-left: 0; padding: 0; border-left: none}

    .site_map .cont .list .depth1 > a:before{display: none;}
    .site_map .cont .list .depth1 > a span{display: inline-block; transform: translateY(0);}
    .site_map .cont .list .depth1.active > a{color: var(--black);}

    .site_map .cont .depth2 > li.out_link > a span:after {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 512 512'%3E%3Cpath d='M320 0h160v160h-32V54.6L246.6 256 224 233.4 425.4 32H320V0zM64 64h160v32H96v320h320V288h32v160H64V64z'/%3E%3C/svg%3E") no-repeat center / contain;}

    .site_map .cont .list .depth2{display: none; position: absolute; top: 0; left: 24rem; width: calc(100% - 24rem); min-height: 100%; height: max-content; margin-top:0; padding: 0 1em; padding-bottom: 80px; color: #101010; background-color: #fff;}
    .site_map .cont .list .depth2.on{display: block; height: 100%;}
    .site_map .cont .list .depth1.active .depth2 { display: block;}
    .site_map .cont .list .depth1.on .depth2 { display: block;}
    .site_map .cont .list .depth2 > li{ font-size:18px;}
    .site_map .cont .list .depth2 > li + li {margin-top: 0; border-top: 1px solid rgba(0, 0, 0, 0.1);}
    .site_map .cont .list .depth2 > li > a{position:relative; display: flex; align-items: center; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; height:52px;}
    /* .site_map .cont .list .depth2 > li:not(.no-depth3) > a:after{content:""; display: block; width: 0.8em; height: 1em; transform: translateX(0); margin-left: auto; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 26 25" fill="none"><path d="M22.8286 7.5L12.8286 17.5L2.82861 7.5" stroke="black" stroke-width="4" stroke-linecap="square"/></svg>') no-repeat center/ contain; transition: 0.3s ease-in-out} */
    /* .site_map .cont .list .depth2 > li.on > a:after,
    .site_map .cont .list .depth2 > li.active > a:after{transform: rotate(180deg); opacity: 1;} */
    .site_map .cont .depth2 > li.active > a span{color: var(--point01); padding-left: 0.8em;}
    .site_map .cont .depth2 > li > a::after{position: absolute; transform: translateY(-50%); background: var(--point01); right: unset; left: 0;}


    .site_map .cont .list .depth3{display: none; margin-top: 0; padding-bottom:1em; padding-left: 0.7em;}
    .site_map .cont .list .depth2 > li.active .depth3 {display: block}
    .site_map .cont .list .depth3 > li > a{opacity: 0.5; font-size: var(--subTxt); font-weight: 500; padding-left: 0;}
    .site_map .cont .list .depth3 li a::before {display: none;}
    .site_map .cont .list .depth3 li + li {margin-top: 0.9em;}
    .site_map .cont .list .depth3 li.active a{opacity: 1; color: var(--point01);}

    .site_map .cont .links{display: block; margin-top: auto; padding: 60px var(--inPd) 2em;}
    .site_map .cont .link a{display: flex; align-items: center; justify-content: space-between; background-color: var(--point01); border-radius: 8px; color:#fff; height: 3.7em; font-size:20px; font-weight: 600; padding: 0 1.2em}
    .site_map .cont .link a .ico svg{display: block; width: 1.2em; height:1.2em;}


    .all_search_page .subject_sect .list_box > div{ grid-template-columns: repeat(2,minmax(0,1fr));}
    .all_search_page .keyword_form .keyword_wrap .left_box, 
    .all_search_page .keyword_form .keyword_wrap .right_box{width: 50%;}


    


}


@media screen and (max-width: 600px) {

    .mini_only {display: block !important;}
    .mini_over {display: none !important;}

    :root {
        --hdH: 60px;

        --d1:30px;
        --h1:26px;
        --h2:24px; 
        --h3:22px; 
        --h4:20px;

        --p9:10px;

        --pd:80px;
        --pd1:80px;
        --pd2:80px;
        --pd3:80px;
        --pd4:60px;
        
       
        --radius: 20px;
    
    }




    .site_map .top .logo,
    .header .logo{width:140px;}
    .header .nav .list > li > a{font-size:18px;}
    .header .nav .list > li > .depth2 > li > a{font-size:16px;}
    .header .ham_btn{width:22px; height:22px;}
    .header .nav .mo_top_box .logo{width: 135px;}
    .header .nav .util_wrap .util_btn{padding:0.7em 1em}
    .header .nav .util_wrap .util_btn + .util_btn{margin-left: 0.5em;}
    .header .util_wrap .login .chr_img{width: 27px; height: 27px;}
    .header .util_wrap .login .login_nav{font-size: var(--p6);}
    
    .site_map .top .close_btn {margin-left: 20px;}
    .site_map .top .link_btn {background-color: var(--point01);}
    .site_map .top .link_btn svg {display: none;}

    .footer .terms_txt a {font-size: var(--p5)}
    .footer .info_txt span { font-size: var(--p5);}
    .footer .info_txt span + span {padding-left: 0;}
    .footer .info_txt span + span::before {display: none;}
    .footer .copy_txt {margin-top: 2.5rem;}
    .footer .info_txt span{display: inline;}
    .footer .top_btn {width: 6rem; height: 6rem;border-radius: 10px;}
    .fix_btn .top_btn{width: 40px; height: 40px;}
    .fix_btn_box .menu_box > .list{padding: 12px 0;}
    .fix_btn_box .top_btn{bottom: 75px;}

    body .ui-widget{font-size:13px;}
    
    .header .all_search_box{width: calc(100% - var(--inPd) * 2); right: 0;  margin: 0 var(--inPd);}
    .keyword_form .keyword_box{margin-top: 20px;}
    .keyword_form .keyword_box.popular .ranking_list{gap: 15px 20px;}
    .all_search_page .result_wrap .sect + .sect{padding-top: 60px;}
    .all_search_page .md_sect .cont_box > div{ grid-template-columns: repeat(1, minmax(0, 1fr));}
    .all_search_page .result_wrap .sect .sect_tit_box .tit .num{font-size: 10px;}
    .all_search_page .result_wrap .sect .sect_tit_box{margin-bottom: 2rem;}
    .all_search_page .keyword_form .cont_tit_box .tit{font-size: var(--h2);}
    .all_search_page .keyword_form{padding-top: calc(var(--hdH) + 50px);}
    .all_search_page .result_wrap{padding-top: 60px;}
    .all_search_page .md_sect .cont_box .cont .txt_box{padding: 0 15px;}
    .all_search_page .md_sect .cont_box .cont .txt_box .tit .arr{display: none;}


    .all_search_page .keyword_form .keyword_wrap{flex-direction: column; gap: 0;}
    .all_search_page .keyword_form .keyword_wrap .left_box .keyword_box + .keyword_box,
    .all_search_page .keyword_form .keyword_wrap .right_box{margin-top: 3rem;}
    .all_search_page .keyword_form .keyword_wrap .left_box, 
    .all_search_page .keyword_form .keyword_wrap .right_box{width: 100%; margin-left: 0; border-right: none; padding-right: 0;}
    

}










@keyframes textLoop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

/* 관리자 상품 미리보기 상단 띠 (_Skin/store_view.php preview=Y) */
.adm_preview_bar {position: sticky; top: 0; z-index: 1200; background: #1a1a1a; color: #fff; text-align: center; padding: 12px 16px; font-size: 14px; line-height: 1.4;}
.adm_preview_bar strong {color: #ffd233; font-weight: 700; margin-right: 10px;}
