@charset "utf-8";
/* ---- intro_css ---- */
.introArea h1.title {font-size: 2.8rem !important; line-height: 1.3;}

.introArea .introbox {display: flex; flex-flow: column; margin: 4rem 0; align-items: center; text-align: center;}
.introArea .introbox .text p{font-size: 2rem; line-height: 1.5;}
.introArea .introbox .text p b{font-weight: bold;}

.btn_box .introButton button{padding:1.6rem 0; width:100%; color:var(--white); background:var(--main_pink); font-size: 1.6rem; font-weight: bold; text-align: cetner; border-radius: 99px; margin-bottom: 2rem;}
.btn_box .text {display: flex; justify-content: center; font-size: 1.4rem; font-weight: 400; cursor: pointer;}
.btn_box .text span:nth-child(2)  {margin: 0 2rem;}
/* ---- intro_css__End ---- */

/* ---- loading_css ---- */
.loadingArea {display: flex; flex-flow: column; align-items: center; text-align: center; justify-content: center; margin-top: 11rem;}
.loadingArea h1 {font-size: 2.4rem !important; margin:0.5rem 0 1rem !important;}
.loadingArea p {font-size: 1.6rem; font-weight: bold; color:var(--text_gray); line-height: 1.3;}

.loading_sw {margin:4rem 0;}
.loading_sw .loading .load {transform: scale(0.6); }
.loading_sw .loading .swiper-slide.swiper-slide-active {transform: scale(1); transition: all .5s;}
.loading_sw .loading .load {position: relative;}
.loading_sw .loading .swiper-slide-active.load::after {position: absolute; content: ''; top: 4%; left: 4.8%; padding:12rem; border:1px solid var(--text_gray); border-radius: 999px;}
/* .loading_sw .loading .swiper-slide-active .img::after{position: absolute; content: '내 위치로부터 150m'; bottom:18%; right:28%; font-size:1.2rem; font-weight:bold; color:var(--white);} */
.loading_sw .loading .swiper-slide-active .img::before{position:absolute;  background: url(../../image/front/sub01-6_icon02.svg) no-repeat;  content: ''; width:1.2rem; height:1.5rem; bottom:18%; left: 28%;}
.loading_sw .loading .img span {display: none;}
/* .loading_sw .loading .swiper-slide-active .img span {position:absolute; top:45%; left:42%; font-size:2rem; font-weight:bold; color:var(--white); display: block;} */
.loading_sw .loading .swiper-slide-active .img span:nth-child(1) {position:absolute; top:45%; left:15px; right: 15px; text-align: center; font-size:2rem; font-weight:bold; color:var(--white); display: block;}
.loading_sw .loading .swiper-slide-active .img span:nth-child(2) {position:absolute; bottom:18%; right: 28%; text-align: center; font-size:1.2rem; font-weight:bold; color:var(--white); display: block;}
.loading_sw .loading .load .img {position: relative;}

/* ---- loading_css__End ---- */


/* ---- sub_Page_Start ---- */
/* sub-visual */
.sub_detail {display: flex; align-items: center; color:var(--white); font-size:1.6rem; font-weight:500; justify-content: space-between;}
/* .sub_top {background:url('../../image/front/sub01_visual.png') center no-repeat; background-size:cover; height:393px; position:relative; margin-top:-105px;} */
.sub_top {background:url('') center no-repeat; background-size:cover; height:393px; position:relative; margin-top:-105px;}
.sub_top::after {content:''; position:absolute; bottom:0; left:0; width:-webkit-fill-available; height: 2rem; background: var(--white); border-radius: 1rem 1rem 0 0; box-shadow: var(--shadow_top);}
.sub_search {width: fit-content; height: fit-content; position: relative;}
.visual {display: flex; align-items: center; color:var(--white); font-size:1.6rem; font-weight:500; justify-content: space-between;}

/* sub_Search*/
.box{position: relative;}
.input {padding: 10px; width: 3.2rem; height: 3.2rem; background: none;  border-radius: 50px; box-sizing: border-box; font-size: 1.2rem; color: var(--main_pink); outline: none; border: none; transition: .5s;}

.box i{position: absolute; top: 50%; right: 15%; transform: translate(-50%,-50%); font-size: 1.8rem; color: var(--white); transition: .2s;}
.box input:hover{width:345px ; background:var(--white); border-radius: 10px; border: 1px solid var(--main_pink); position: absolute; right:0; top:-1.7rem;z-index: 10;}
.box:hover i{display: none;}
.box input:focus + i {display: none;}

/* sub_sec01 */
.sub01 .shopArea h3 {color:var(--text_gray); font-size: 1.4rem; font-weight: 500;}
.shop_flex {display:flex; align-items: center; justify-content: space-between; margin:1.1rem 0;}
.shop_flex h1 {margin-bottom: 0 !important; max-width:72%; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;display: -webkit-box; text-overflow: ellipsis;}
.shop_flex .img {margin-left: 0.3rem; cursor: pointer;}
.shop_flex .img:hover .ai_title {display:block;}
.ai_title {position:relative; font-size: 1.2rem; color:var(--text-black); font-weight: 600; display: none; transition: .2s;}
.ai_title div {position:absolute; bottom:330%; right:1rem; padding-bottom:1.8rem; width: max-content; z-index: 15;}
.ai_title div::before {position:absolute; content: ''; background:url(../../image/front/sub01-1_deco.png) no-repeat; background-size: cover; width:19rem; height: 4rem; bottom:0; right:-20%; z-index: -1; }

/* sub_sec02 */
.sub02 {margin:2rem 0 2rem 0; padding-top:2rem; border-top: 1px solid var(--line_gray);}
/* .shop_detail {margin-bottom:2rem;} */
.shop_detail {margin-bottom:2rem;}
.shop_detail p {font-size: 1.4rem; line-height: 1.5; margin-top: 1rem; word-break: break-all; white-space: normal;}
.shop {display:flex; align-items: center;}
.shop > * {margin-right:0.8rem; color:#505050; font-size: 1.4rem; }
.shop strong {font-weight:600;}

.box_style {padding:2.4rem; background:var(--bg_gray2); border-radius: 1rem;}
.box_style .flex {display:flex; justify-content: space-between; }
.box_style span:last-child  {font-size: 1.6rem;  font-weight: normal; color:var(--text-black);}
.box_style ul li{font-size: 1.6rem; font-weight: 600; color:var(--text-black); line-height: 1.5;}
.box_style h2 {font-size:1.6rem; font-weight: 600; color:var(--main_pink);}

.box_style.box_style__01 h2 {color:var(--text_black); max-width:72%;     text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.box_style.box_style__01 span {color:var(--text_gray);} 
.box_style.box_style__01 .flex {margin-bottom:1rem;}
.box_style.box_style__01 .flex:last-child {margin-bottom:0;}

/* sub_sec03 */
.box_style2 .img {display: flex; flex-flow: column; align-items: flex-start;}
.box_style2 .img > * {margin-bottom:0.8rem;}
.box_style2 .img h2 { color:var(--green);}
.box_style2 .textbox {color:#434343; word-break: break-all;}
.box_style2 .textbox ul {margin:2rem 0;}
.box_style2 .textbox ul li {display: flex; flex-flow: row; justify-content: space-between;}
.box_style2 .textbox ul li >*:first-child{font-weight: bold; width:5%;}
.box_style2 .textbox ul li >*:last-child{width:94%;}

.box_style.box_style2 p, .box_style.box_style2 span {font-size: 1.4rem; line-height: 1.5; word-break: break-all;}
.box_style2 b {font-weight: bold;}

.box_style2 .morebox {margin-top:1rem; padding-top:1rem; border-top:1px solid var(--green); display: flex; flex-flow: column;}
.box_style2 .morebox a {font-size: 1.4rem; font-weight: bold; color:var(--green); text-align: center;}
.box_style2 .morebox .gpt_ex{padding:1rem; display: flex; font-size: 1.3rem; font-weight: 500; line-height: 1.3; color:#949896; background:#F5FFFC; border-radius: 1rem; margin-top:1rem;}
.box_style2 .morebox .gpt_ex >*:first-child {width:10%;}
.box_style2 .morebox .gpt_ex >*:last-child {width:89%;}

.box_style3 {color:var(--text-black);}

/* icon_box */
.icon_box {display: flex; justify-content: space-between; align-items: center; font-size: 1.4rem; font-weight: bold; margin:1rem 0;}
.icon_box >* {width:calc(98% /3 ); display: flex; align-items: center; justify-content: center; border-right:1px solid var(--bg_gray); padding:1rem 0; cursor: pointer;}
.icon_box >*:last-child{border:0;}
.icon_box .icon >* {margin-right:0.8rem;}
.icon_box .icon >*:last-child {margin-right:0;}

/* sub_sec06 */
/* .brandArea .brand_box {width: 258px !important;} */
.brandArea .brand_box .img {position: relative;} 
/* .brandArea .img span::before {position:absolute; content: ''; background: url(../../image/front/heart01.svg) no-repeat; width:2.4rem; height: 2.4rem; top:5%; right:4%; cursor: pointer;}  */

.brandArea .img span.on::before {background:url(../../image/front/heart03.svg) no-repeat;}
/* .brandArea .brand_box .img::before {position:absolute;   content: '내 위치로부터 150m'; padding:1rem 1rem 1rem 2.3rem; font-size: 1.2rem; font-weight: bold; background-color:rgba(0, 0, 0, 0.5); color:var(--white); bottom:0; left: 0; border-radius: 0 0.8rem 0 1rem;}
.brandArea .brand_box .img::after {position:absolute;  background: url(../../image/front/sub01-6_icon02.svg) no-repeat;  content: ''; width:1.2rem; height:1.5rem; bottom:5%; left: 2%;} */

/* text */
/* .hipple_sub .brandArea .text >* {width:calc((100% - 5px) /2);} */
.hipple_sub .brandArea .text > *:first-child {width:calc((100% - 5px) / 4 * 3);}
.hipple_sub .brandArea .text > *:nth-child(2) {width:calc((100% - 5px) / 4);}
.hipple_sub .brandArea .text h3 {color:var(--text_black); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 1;}
/* .brandArea .text {display:flex; align-items: center; justify-content: space-between; font-size: 1.2rem; color:var(--text_gray); margin:1.6rem 0;} */
.brandArea .text {display:flex; align-items: center; justify-content: space-between; font-size: 1.2rem; color:var(--text_gray); margin:1.6rem 0 0.8rem 0;}
.brandArea .text h3{font-size: 1.6rem; font-weight: 700; color:var(--white);}
.brandArea .text > div {text-align: end;}
.brandArea .text02 {font-size: 1.1rem; font-weight: 400; color: var(--text_gray);}
.brandArea .text02 h3{/*font-size: 1.6rem;*/ font-weight: 700; color:var(--text_black); margin: 0.5rem 0;}
.brandArea .text03{position:absolute; top:20px; left: 10px; color:var(--white); font-size: 1.3rem; font-weight: 400; line-height: 1.3; z-index: 1;}
.brandArea .text02 > div, .brandArea .text03 > div {width:250px;}
.brandArea .text03 h2 {font-size: 1.6rem; font-weight:600;}
.brandArea .brand_box .text03 h2 {font-size: 1.4rem; font-weight:600;}
/* .store_list .keyword, .brandArea .keyword {display: flex; align-items: center; cursor: pointer;} */
.store_list .keyword, .brandArea .keyword {display: flex; align-items: center; cursor: pointer; flex-wrap: wrap;}
/* .store_list .keyword > *, .brandArea .keyword > * {padding:0.5rem 1.2rem; border-radius: 50px; font-size: 1.2rem; font-weight: bold; border: 1px solid var(--main_pink); color:var(--main_pink); margin:0 0 0.4rem 0.4rem;}  */
.store_list .keyword > *, .brandArea .keyword > * {padding:0.5rem 0.5rem; border-radius: 50px; font-size: 1rem; font-weight: bold; border: 1px solid var(--main_pink); color:var(--main_pink); margin:0 0.4rem 0.4rem 0;} 

/* more */
div.more::before {position:absolute; content: ''; background: url(../../image/front/more_icon.svg) no-repeat; width:2.4rem; height: 2.4rem; top:5%; right:4%; cursor: pointer;} 
.more_link {display: none; opacity: 0; width: max-content; position:absolute; background:var(--white); padding:1.2rem; text-align: center; right: 5%; top:35px; border-radius: 10px; border:1px solid var(--line_gray); transition: opacity .8s ease-in;}
.more_link.active {display:block; opacity: 1; z-index: 30;}
.more_link::before {position: absolute; content: ''; background:url('../../image/front/more_deco01.png') no-repeat; background-size: contain; width: 25%; height: 25%; top:-8px; right:10%; }
.more_link li {font-size: 1.3rem; font-weight: 500; cursor: pointer;}
/* 20241118 재질문 */
/* .more_link.style02 li {color:var(--line_gray);}
.more_link.style02 li:last-child {color:var(--text-black);} */
.more_link.style02 li {color:var(--text-black);} 
.more_link.style02.logOn li {color: var(--text-black);}

/* all_view */
.all_view button {font-size: 1.6rem; font-weight: bold; background:var(--main_pink); border-radius: 10px; padding: 1.7rem; width:100%; color:var(--white); margin-top:4rem;}
.all_view button:last-child {margin:4rem 0 0 !important;}

/* sub_share */
.hipple_sub .popup-2 {position:fixed; height:calc(100vh - 9.8rem);}

/* map_wrap */
#map_wrap #map_wrap_btns {display: flex; flex-flow: row; position: absolute;left: 5px;top: 8px;z-index: 100; gap:5px;}
#map_wrap #map_wrap_btns button {border-radius: 50px; padding: 0.6rem 1rem; font-size: 1rem; color:var(--text_black); background: #fff; border:1px solid var(--line_gray); display: flex; align-items: center; font-weight: bold;}
#map_wrap #map_wrap_btns button img {margin-right:0.5rem;}
/* ---- sub_Page_End ---- */


/* ---- local_Start ---- */
#hipple_wrap .local_top {background:var(--white);}
#hipple_wrap .local_top .local_title a h1 {width:90%;}
.local_top .local_title {align-items: center;}
.local_top .local_title >* {display: flex; align-items: center;align-items: center; font-size: 1.8rem; font-weight: 500; color:var(--text-black);}
.local_top .local_title .box i {color: var(--text-black);}

/* .localwrap {position:absolute; z-index: 102; top:8%;} */
.localwrap .swiper-slide {width: fit-content !important;}
.localwrap .keyword .keyword_t{font-size: 1.5rem; font-weight: 500; color:var(--text_gray); background:var(--bg_gray); padding:0.8rem 1.2rem; border-radius: 50px; white-space: nowrap; margin-right:1rem;}
.localwrap .keyword .keyword_t >* {font-size: 1.5rem; font-weight: 500; color: inherit;}
.localwrap .keyword .keyword_t.on {background: var(--main_pink); color:var(--white);}
.localwrap .keyword .keyword_t.active {background: var(--main_pink); color:var(--white);}

/* local-swiper_foodtab */
.localwrap .foodtab {font-size: 1.8rem; font-weight: 600; color:var(--text_gray);}
.localwrap .foodtab .swiper-slide {margin:2rem 1rem; position:relative; cursor: pointer;}
.localwrap .foodtab .swiper-slide:first-child {margin:2rem 1rem 2rem 0;}

.localwrap .foodtab .swiper-slide.active {color:var(--text_black);}
.localwrap .foodtab .swiper-slide.active::after {position:absolute; content: ''; bottom:-5%; left: 0; width: 100%; height: 2px; background:var(--main_pink);}

/* local-sub02 */
.local .boxarea .flex .txt p:last-child {margin-bottom:0;}
.re_box {background:url('../../image/front/local-rebox_visual.png') center no-repeat; background-size:cover; height:80px; position:relative; text-align: center; vertical-align: middle; }
.re_box p {font-size: 1.3rem; font-weight: 600; padding-top:4rem}

.re_box.re_box02 {background:url('../../image/front/local-rebox_visual02.png') center no-repeat; position:absolute; text-align: center; top:0; width: 100%; margin: -2rem; top: 30%;}
.re_box.re_box02 p {font-size: 1.2rem; font-weight: 600; background:rgba(255,255,255,0.8); margin: 1rem auto;  padding: 1rem;  display: inline-block; width:80%;   border-radius: 100px;}

/* local-sub03 */
.local_box {position:relative; width:140px !important; }
.local_box .text {position:absolute; top:10px; left: 10px; color:var(--white); font-size: 1.3rem; font-weight: 400; line-height: 1.3; z-index: 1;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
}
.local_box .text h2 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 1;}
.local_box .text h3 {font-size: 1.6rem; font-weight:600;}
.local_box .img {position: relative;}
.local_box .img::before {position:absolute; content: ''; background: url(../../image/front/bread01.svg) no-repeat; width:3.8rem; height: 2.4rem; top:5%; right:4%; cursor: pointer;} 

/* local-sub04 */
.local .title_flex {margin-bottom:1rem;}
.local .title_flex a {width:80%;}
.local .box_style h2{
    color:var(--text-black); font-size: 1.2rem; line-height: 1.4;
    display: -webkit-box; /* 플렉스 박스를 사용한 레이아웃 */
    -webkit-box-orient: vertical; /* 박스의 방향을 수직으로 설정 */
    -webkit-line-clamp: 2; /* 최대 2줄로 제한 */
    overflow: hidden; /* 넘치는 내용 숨김 */
    text-overflow: ellipsis; /* '...' 표시 */    
}
.local .box_style .flex {justify-content: flex-start;}
.local .box_style .flex span {font-size: 1.2rem; margin-right: 0.5rem;}
.local .box_style .flex span:last-child {margin-right: 0;}

/* - local-sub01 - */
.local_sub01 .sub_visual {background-color: #f1f1f1;background:url('') center no-repeat; background-size:cover; height:393px; position:relative; margin-top:-105px; border-radius: 0 0 1rem 1rem;}
.local_sub01 .sub_visual .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    border-radius: 1rem 1rem 0 0;
    pointer-events: none; 
}
.local_brand .brandArea .sub01 .text02 h3, .local_sub01 .brandArea .text02 h3, .store_list .brandArea .text02 h3  {font-size: 1.8rem;}
.local_sub01 .brandArea .rel {align-items: flex-start;}
.local_brand .brandArea .sub01 .text02 div, .local_sub01 .brandArea .text02 div, .store_list .brandArea .text02 div {font-size:1.4rem;    line-height: 1.4;}

/* more */
.shopArea .more,
.local_brand .sub01 .more, .local_sub01 .more, .store_list .more {margin:0 1.5rem;}
.local_brand .sub01 .more::before {z-index: 10;}
.shopArea .more::before,
.local_brand .sub01 .more::before, .local_sub01 .more::before, .store_list .more::before {position:absolute; content: ''; background: url(../../image/front/more_icon01.svg) no-repeat; width:2.4rem; height: 2.4rem; bottom:0; right:4%; cursor: pointer;}
.brandArea .brand_box .more::before {position:absolute; content: ''; background: url(../../image/front/more_icon.svg) no-repeat; width:2.4rem; height: 2.4rem; bottom:0; right:4%; cursor: pointer;}

/* share_box */
.share_box .sns_share {align-items: center; justify-content: space-evenly;}
.share_box .sns_share p {font-size: 1.3rem; margin-top:0.8rem; text-align: center;}
.share_box .url_copy input[type="text"]{padding:1.6rem; color:var(--text_gray); border:1px solid var(--line_gray); border-radius: 5px; font-size:1.4rem; background:var(--bg_gray2); width:68%; margin-right:0.8rem;}
.share_box .all_view button {padding:1.6rem 2rem; width:auto; margin:0 !important; }

/* made_map */
.madeM .boxarea_style2 {background: url(../../image/front/local_img01.png) center 50% no-repeat; background-size:cover; border-radius: 10px;}
.madeM .boxarea_style2 .flex .txt {color:var(--white); line-height: 1.3;}

/* made02 */
.user p {font-size: 1.3rem; line-height: 1.3; margin-bottom: 1rem;}
.user .input_box {position: relative;}
.input_box input[type="tel"], 
.input_box input[type="text"] ,
.input_box input[type="email"] ,
.input_box input[type="password"] {width:-webkit-fill-available; color: var(--text_gray); border: none; border-bottom: 1px solid var(--line_gray); padding:1.6rem 0; font-size: 1.6rem; font-weight: 400;}

.input_box input[type="tel"]:focus, 
.input_box input[type="text"]:focus ,
.input_box input[type="email"]:focus ,
.input_box input[type="password"]:focus {color:var(--text_black); outline: none;}

.input-status-message {font-size: 1.4rem; line-height: 1.3; color:var(--main_pink); }

.user .input_box .btn02 {position:absolute; right: 0;}
.map03 .popup.active {opacity:1; visibility:visible; background: rgba(0, 0, 0, 0.3); height: 100%; position: absolute; z-index: 101;}
/* madedate */
.madedate.flex {align-items: center; justify-content: center;}
.madedate .date_input { width:100%;}
.madedate .date_input input[type="date"] {width: 100%; height: 100%; vertical-align: middle; font-size: 1.4rem; color: var(--text_gray); padding: 1.2rem 1.6rem 1.2rem 1rem; border:1px solid #D9D9D9; border-radius: 99px;position: relative; background: url('../../image/front/ico_plan.png') no-repeat center right 15px;} 
input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer;}
input[type="date"]:not(:focus):invalid {
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-year-field { -webkit-appearance: none;  display: none; }
}

/* madewrap */
.madewrap .madearea {margin:2rem 0 4rem;}
.madewrap .madearea p {font-size: 1.6rem; font-weight: bold; margin-bottom: 1rem; }
.madewrap .madearea ul {border:1px solid #d9d9d9; border-radius: 99px; padding:1.3rem; color: var(--text_gray);}

.madewrap .madearea ul li {position: relative; display: none;}
.madewrap .madearea ul li input[type="text"] {border:0;}
.madewrap .madearea ul li.active {display: block;}
.madewrap .madearea ul li:first-child {display: block; }
.madewrap .madearea ul li::after {position: absolute; content: ''; background: url(../../image/front/ico-arrow-d.svg) center 50% no-repeat; background-size: cover; width:24px; height: 24px; right:0; top:-20%;}

/* #popup.popup-3 {  opacity:0;  visibility:hidden;  transition: opacity 0.3s, visibility 0.3s;}
#popup.popup-3.active { opacity:1; visibility:visible; background: rgba(0, 0, 0, 0.3); height: 100%; position: absolute; z-index: 101;} */
/* ---- local-End ---- */

/* ---- Login-Start ---- */
.loginArea .form_group {position: relative; font-size: 1.6rem; color: var(--text_gray);}
.loginArea .form_group + .form_group {margin-top: 3rem;}
.loginArea .form_group .form_label {position: absolute; z-index: 1; left: 0; top: 5px; transition: 0.3s;}
.loginArea .form_group .form_control {width: 100%; position: relative; z-index: 3; height: 35px; background: none; border: none; padding: 5px 0; transition: 0.3s; border-bottom: 1px solid var(--line_gray); color: var(--text_gray);}
.loginArea .form_group .form_control:invalid {outline: none;}
.loginArea .form_group .form_control:focus, .loginArea .form_group .form_control:valid {outline: none; box-shadow: 0 1px var(--main_pink); border-color: var(--main_pink);}
.loginArea .form_group .form_control:focus + .form_label, .loginArea .form_group .form_control:valid + .form_label {font-size: 1.2rem; color: var(--main_pink); transform: translateY(-15px);}

.btnwrap {display: flex; justify-content: space-between; margin-bottom:4rem;}
.btnwrap .btn01 {width: 100%; }
.btnwrap .btn01:first-child{margin-right:2rem;}

.reM {display:flex;}
.reM input[type="checkbox"] {appearance: none; width:15px; height: 15px; border: 1px solid var(--line_gray); box-sizing: border-box; outline: 0; border-radius: 4px; margin-right: 0.5rem;}
.reM input[type="checkbox"]:checked {background:var(--main_pink); background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}
/* ---- Login-End ---- */

/* ---- play with-Start ---- */
.play .brandArea h3 {color:var(--text_black);}

.play_sub .visualSwiper {position:relative;}
.play_sub .visualSwiper .swiper-slide img {padding: 0 2rem;}
.play_sub .visualSwiper .swiper-pagination {position: absolute; bottom:0; left: 75%; color:var(--white); background: rgba(0,0,0,0.5); padding: 0.5rem 2rem; border-radius: 50px; transform: translate(0,-75%); width: auto;}

.writeWrap .title {align-items: center; margin-bottom:2rem;}
.writeWrap .title input, .writeWrap >.input_box textarea {border:1px solid var(--line_gray); border-radius: 1rem; padding:1.6rem;}
.writeWrap >.input_box textarea {width:100%; min-height:10rem; margin-bottom:4rem;}

#top-btn {/*display: none;*/ position: absolute; bottom: 15%; right: 2rem; z-index: 101; background: white; border: 1px solid var(--main_pink); padding: 10px; border-radius: 50%; width: 6rem; height: 6rem;  font-size: 1.4rem; font-weight: bold; color:var(--main_pink); text-align: center;}
#top-btn i {margin-bottom:0.5rem;}
/* ---- play with-End ---- */


/* ---- myPage-Start ---- */
#hipple_wrap .main.myPage .flex04 .box {text-align: center;}
#hipple_wrap .main.myPage .flex04 .box >* {font-size: 1.3rem; font-weight: 500;}

#hipple_wrap .main.myPage .event {background: var(--bg_pink); border:1px dashed var(--sub_pink); color:var(--sub_pink); display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; font-size: 1.6rem; }

.myPage .my {position:relative;}
.myPage .my::after {content: ''; background:var(--bg_gray3); height: 8px; width: -webkit-fill-available; margin:2rem -2rem; display: inline-block;}
.mySet .box {display:flex; justify-content: space-between; padding:1rem; border-bottom: 1px solid var(--line_gray);}
.mySet .box span {font-size: 1.8rem; color:var(--text_black); font-weight: 500;}

/* mypage detail */
#selectForm {margin: 2rem 0;}
#selectForm fieldset {border:0 none; vertical-align:top; display: flex; width:auto; }
.selectBox {width:100%;} 
.selectBox .select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border:0 none; width:inherit; height:-webkit-fill-available; padding:1.2rem 5rem 1.2rem 2rem;  font-size: 1.6rem; color:var(--text_gray); background: url('../image/search_icon.svg') no-repeat 100% 50%; border:1px solid var(--line_gray); border-radius: 5px; }
select::-ms-expand{display:none;}
.select:focus {border-color:var(--main_pink); outline: none; color:var(--text_gray);}
select option {padding:1rem; border: 1px solid var(--light_pink);}
/* detail */
.mydetail >* {margin-bottom:2rem; }
.mydetail h3, .mydetail p {font-size: 1.6rem; line-height: 1.5;}
.mydetail h3 {font-weight: bold;}
.mydetail .text {font-size:1.4rem; line-height: 1.5;}
.mydetail .mySet {margin-bottom:4rem;}
.mydetail .mySet .box:first-child  {border-top:1px solid var(--line_gray);}
.mydetail .mySet .box.reM {justify-content: flex-start; align-items: center;}
.mydetail .mySet .box.reM input[type="checkbox"] {width:20px; height: 20px; margin-right:1.5rem;}
.mydetail .mySet .box.reM input[type="checkbox"]:checked {border:0;}
.mydetail .mySet .box.style01 {align-items: center;}
.mydetail .mySet .box.style01 i {color:var(--text_gray); font-size: 1.4rem; display: contents;}

/* notice */
.mydetail .menu_wrap{margin-bottom:2rem;}
.mydetail .mySet .notice {display: flex; flex-flow: column;}
.mydetail .mySet .notice .f_s_16 {font-weight: bold; margin-bottom:0.5rem;}
.mydetail .mySet .notice .i_style { color:var(--text_gray); font-weight: 400;}
.mydetail p.i_style {color:var(--text_gray); font-size: 1.2rem !important; font-weight: 300; margin-top: 1rem;}

.h_New {position:relative; }
.h_New:after {content:"N"; font-size: 1rem; color:var(--white); width:20px; top: 2px; padding: 0.2rem; background:var(--sub_pink); border-radius: 50px; position:absolute; margin-left: 0.5rem; text-align: center;}

.pagenation {width:100%;    height: fit-content;}
.pagenation .paging {font-size: 0; text-align: center; display: flex; justify-content: center; height: 24px; align-items: center; width:-webkit-fill-available; }
.pagenation .paging >* {color: var(--text_gray);}
.pagenation .paging a {display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; border-radius: 50%; width: 30px; height: 30px; border: 1px solid var(--text_gray); margin: 0 20px; font-size: 1.4rem;}
.pagenation .paging .page {display: inline-block; vertical-align: middle; color: var(--text_gray); font-size: 1.5rem; }
.pagenation .paging .page >* {padding: 0 1.5rem; }
/* ---- myPage-End ---- */

/* custom */
.index-store-img {width: 100%;height: 12.5rem;background-size: cover;background-position: center;border-radius: 2rem 2rem 0 0;background-color: #d1d1d1;}
/* .map_view .sub_sec06 .img {height: 183px;background-size: cover;background-position: center;border-radius: 1.5rem;background-color: #d1d1d1;} */
.map_view .sub_sec06 .img {height: 163px;background-size: cover;background-position: center;border-radius: 1.5rem;background-color: #d1d1d1;}

.map_list .sub_sec06 .img {width: 140px;height: 140px;background-size: cover;background-position: center;border-radius: 1rem;background-color: #d1d1d1;}
.map_list .sub_sec06 .img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    border-radius: 1rem 1rem 0 0;
    pointer-events: none; /* 그라데이션이 내용 상호작용에 방해되지 않도록 설정 */
}

.store_list .imgmap {position:relative; width: 200px; height: 160px; margin:1rem 0; background-size: cover;background-position: center;border-radius: 1rem; border: 1px solid var(--bg_gray);}
.store_list .imgmap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    border-radius: 1rem 1rem 0 0;
    pointer-events: none; /* 그라데이션이 내용 상호작용에 방해되지 않도록 설정 */
}
.store_list .imgmap .label {
    position:absolute;
    padding:1rem 1rem 1rem 2.3rem;
    font-size: 1.2rem; 
    font-weight: bold; 
    background-color:rgba(0, 0, 0, 0.5); 
    color:var(--white); 
    bottom:0; left: 0; 
    border-radius: 0 0.8rem 0 1rem;
    background-image: url(../../image/front/sub01-6_icon02.svg);
    background-repeat: no-repeat;
    background-position: left 0.8rem bottom 1rem;
}
/* .imgmap::before {position:absolute;   content: '내 위치로부터 150m'; padding:1rem 1rem 1rem 2.3rem; font-size: 1.2rem; font-weight: bold; background-color:rgba(0, 0, 0, 0.5); color:var(--white); bottom:0; left: 0; border-radius: 0 0.8rem 0 1rem; width:100%;}
.imgmap::after {position:absolute;  background: url(../image/sub01-6_icon02.svg) no-repeat;  content: ''; width:1.2rem; height:1.5rem; bottom:5%; left: 2%;} */
/* .brandArea .brand_box .img::before {position:absolute;   content: '내 위치로부터 150m'; padding:1rem 1rem 1rem 2.3rem; font-size: 1.2rem; font-weight: bold; background-color:rgba(0, 0, 0, 0.5); color:var(--white); bottom:0; left: 0; border-radius: 0 0.8rem 0 1rem;} */
/* .brandArea .brand_box .img::after {position:absolute;  background: url(../../image/front/sub01-6_icon02.svg) no-repeat;  content: ''; width:1.2rem; height:1.5rem; bottom:5%; left: 2%;} */

.sub_top {margin-top: -72px;}
.sub_top::after {z-index: 10;}
.sub_top .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    border-radius: 1rem 1rem 0 0;
    pointer-events: none; /* 그라데이션이 내용 상호작용에 방해되지 않도록 설정 */
}



.top_logo {position: relative!important;}

.box_style2 .textbox {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.17px;;
    max-height: 200px;
    overflow: hidden;
}
.box_style2 .textbox.expanded {max-height: none;}
/* .top_logo2 h1 { text-overflow: ellipsis; word-break: break-all; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;display: -webkit-box;} */

#userId {font-size: 16px;}
#userPw {font-size: 16px;}
#authWrap {display: none;}
#passwordWrap {display: none;}
#completePopup {display: none;}
#completePopup.active {display: block;}

.popup-2-clone {  opacity:0;  visibility:hidden;  transition: opacity 0.3s, visibility 0.3s;}
.popup-2-clone.active { opacity:1; visibility:visible; left: 50%; margin-left: -196.5px; background: rgba(0, 0, 0, 0.3); height: 100vh; position: fixed; z-index: 102;}
.hipple_sub .popup-2-clone {position:fixed; height:calc(100vh - 9.8rem);}

.brandArea .brand_box .img .label {
    position:absolute;
    padding:1rem 1rem 1rem 2.3rem;
    font-size: 1.2rem; 
    font-weight: bold; 
    background-color:rgba(0, 0, 0, 0.5); 
    color:var(--white); 
    bottom:0; left: 0; 
    border-radius: 0 0.8rem 0 1rem;
    background-image: url(../../image/front/sub01-6_icon02.svg);
    background-repeat: no-repeat;
    background-position: left 0.8rem bottom 1rem;
}


/* .brandArea .brand_box .img::before {position:absolute;   content: '내 위치로부터 150m'; padding:1rem 1rem 1rem 2.3rem; font-size: 1.2rem; font-weight: bold; background-color:rgba(0, 0, 0, 0.5); color:var(--white); bottom:0; left: 0; border-radius: 0 0.8rem 0 1rem;} */
/* .brandArea .brand_box .img::after {position:absolute;  background: url(../../image/front/sub01-6_icon02.svg) no-repeat;  content: ''; width:1.2rem; height:1.5rem; bottom:5%; left: 2%;} */


/* ---- media ---- */
@media only screen and (max-width: 392px){
    .loadingArea {display: flex; flex-flow: column; align-items: center; text-align: center; justify-content: center; margin-top: 5.5rem;}

    /* 공용css */
    .pb80 {padding-bottom:5rem;}

    
    /* .like::before {top: -4%;} */
    .store_list .like::before,.map_view .like::before {top:20%; right:50%;}
    .like::before {top: -10%;}
    .titleArea {font-size:1.6rem;}

    .btn_box .introButton button{ font-size: 1.4rem; padding: 1.3rem;}
    /* intro */
    .introArea h1.title {font-size: 2.4rem !important;}
    .introArea .introbox .text p {font-size: 1.6rem;}

    /* localwrap */
    .localwrap .foodtab {font-size: 1.5rem; ;}
    .localwrap .keyword .keyword_t >* {font-size: 1.3rem;}

    /* loading */
    .loadingArea h1 {font-size: 2rem !important;}
    .loadingArea p {font-size: 1.4rem;}
    .loading_sw .loading .swiper-slide-active.load::after {top: 3%; padding: 11.5rem;}
    .loading_sw .loading .swiper-slide-active .img::after {right:27%;}
    

    /* .sub01 .shopArea h3 {font-size: 1.2rem;}
    .sub_top01 {width: auto;}
    .visual {font-size: 1.4rem; } */
    /* sub01 */
    /* .shop > *{font-size: 1.2rem;} */
    .box input:hover {width:30vw; min-width:86vw;}
    /* sub02 */
    .box_style {padding: 2rem; border-radius: 1.5rem;}
    .box_style h2,
    .box_style ul li,
    .box_style span:last-child {font-size: 1.4rem;}
    #popup_style.pop_Style01 .all_view button:last-child {margin:2rem 0 0 !important;}
    /* sub03 */
    /* {font-size: 1.3rem;}
    .box_style.box_style2 p, .box_style.box_style2 span {font-size: 1.2rem;}
    .box_style2 .morebox a {font-size: 1.2rem;} */

    .icon_box {font-size: 1.2rem;}
    .icon_box >* {width: calc(100% / 3);}
    .icon_box .icon >* {margin-right: 0.3rem;}

    /* all_view */
    .all_view button {padding: 1.3rem;}

    /* local */
    .local_top .local_title >* {font-size: 1.4rem;}
    .localwrap .keyword >* {font-size: 1.2rem;}
    .local_box .text {font-size: 1.2rem;}
    .title_flex .like {padding:0 0 0 10px;}
    /* shrae */
    .share_box .url_copy input[type="text"] {padding: 1.3rem 2rem; width: inherit;}    
    .share_box .all_view button {font-size: 1.4rem; padding:1.3rem 1rem; width: -webkit-fill-available;}

    /* myPage */
    #hipple_wrap .main.myPage .flex04 {justify-content: space-around;}
    #hipple_wrap .main.myPage .event {font-size: 1.4rem; padding: 1.2rem 1.5rem;}
    /* .mySet .box {padding: 1.5rem;} */
    .mySet .box span {font-size: 1.6rem;}
    /* mydetail */
    .selectBox .select, .mydetail h3, .mydetail p {font-size: 1.4rem;}
    .mydetail >* {margin-bottom:1.5rem;}
    .mydetail .localwrap .keyword .keyword_t {margin-right:0.5rem;}
    .mydetail .localwrap .keyword .keyword_t >* {font-size: 1.3rem;}
    .mydetail .text, .mySet .box span {font-size: 1.4rem;}
    .mydetail .mySet .box.reM input[type="checkbox"] {width:1.6rem; height: 1.6rem;}
    .mydetail .titleArea02 {font-size:1.6rem;}
    .mydetail .mySet .notice .i_style, .pagenation .paging a ,.mydetail p.i_style{font-size: 1rem !important;}
    .pagenation .paging a {width:24px; height: 24px; margin: 0;}
    .pagenation .paging .page {font-size: 1.3rem;}
    
    /* input_box */
    .user .input_box .btn02 {font-size: 1.2rem;}
    .input_box input[type="tel"], .input_box input[type="text"], .input_box input[type="email"], .input_box input[type="password"] { font-size:1.4rem; padding: 1.2rem 0;}
    #userId {font-size: 1.4rem;}
    #userPw {font-size: 1.4rem;}
}
@media only screen and (max-width: 320px){
    /* loading */
    .loading_sw .loading .swiper-slide-active.load::after {top: 3%; left: 4%; padding: 10rem;}
    .loading_sw .loading .swiper-slide-active .img::after {bottom:20%; right:25%; }
    .loading_sw .loading .swiper-slide-active .img::before {bottom:20%; left:22%;}

    #hipple_wrap >* {width: -webkit-fill-available;}
    #nav_menu .menu li p {display: none;}
     /* shrae */
    .share_box .all_view button {font-size: 1.2rem; padding:1rem;}
    .share_box .url_copy input[type="text"] {font-size: 1.2rem; padding: 1.3rem;}

    /* madedate */
    .madewrap .madearea {margin-bottom:3rem;}
    .madewrap .madearea p {font-size: 1.4rem;}
    .madedate .date_input input[type="date"] {font-size: 1.2rem; background-position: center right 10px;  background-size: 14%;}

    /* btn */
    .btn01 {font-size: 1.4rem;}
}

#nav_menu {margin-bottom: 0!important;}
@media (max-width: 1200px) {
    #nav_menu {margin-bottom: 0!important;}
}
@media only screen and (max-width: 800px){
    #nav_menu {margin-bottom: 0!important;}
}

@media only screen and (max-width: 500px){
    #nav_menu {margin-bottom: 0!important;}
}

@media only screen and (max-width: 392px){
    #nav_menu {margin-bottom: 0!important;}
    #map_wrap #map_wrap_btns {gap:10px;}
    #map_wrap #map_wrap_btns button {flex-flow: column; padding: 0.6rem 0.8rem;}
    #map_wrap #map_wrap_btns button img {margin: 0 0 0.5rem;}
}

#map_wrap_btns button.active {background: #FFE9EA!important;border: solid 1px #FFCDD1;color: #EB083C!important;}
#map_sub_air {
    display: none;
    position: absolute;
    top: 30px;left: 5px;right: 15px;
    background: #fff3f3;
    border: solid 1px #FFCDD1;
    padding: 10px;
}
#map_sub_air h1 b {color: #EB083C}
#map_sub_air h1, #map_sub_air p {margin-bottom: 5px}
#map_sub_air .date {text-align: right;}

.store_box {position:relative; width:200px !important; }
.store_box .text {position:absolute; top:10px; left: 10px; right: 10px;color:var(--white); font-size: 1.3rem; font-weight: 400; line-height: 1.3; z-index: 1;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
}
.store_box .text h2 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 1;}
.store_box .text h3 {font-size: 1.6rem; font-weight:600;text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 1;}
.store_box .img {position: relative;}
.store_box .img::before {position:absolute; content: ''; background: url(../../image/front/bread01.svg) no-repeat; width:3.8rem; height: 2.4rem; top:5%; right:4%; cursor: pointer;} 

.map_list_line {border: 0;background: #d1d1d1;height: 1px;}

#detail-swiper .label-secret {z-index: 99;position: absolute; bottom: 30px;right: 15px;background: #E91D2E99;color: #fff;border-radius: 5px;padding: 10px;font-weight: bold;}
.index-store-img .label-secret {z-index: 99;position: absolute; top: 10px;left: 10px;background: #E91D2E99;color: #fff;border-radius: 5px;padding: 5px;font-weight: bold;font-size: 0.8em;}
.title_flex .label-secret {vertical-align: middle;display: inline-block;margin-top: -3px;margin-right: 3px;font-size: 0.5em;background: #E91D2E99;color: #fff;border-radius: 5px;padding: 4px 3px;font-weight: bold;}
.title_flex .label-secret.dp_none {display: none!important;}

#board-list {margin: 0;padding: 0;list-style: none;border-top: solid 1px #d1d1d1;}
#board-list > li {cursor: pointer;margin: 0;padding: 17px 0;border-bottom: solid 1px #d1d1d1;}
#board-list > li > div:first-child {width: 100%;display: flex;justify-content: flex-start;}
#board-list > li > div:first-child > div:first-child {font-weight: bold;margin-right: auto;}
#board-list > li.dp_none {display: none!important;}
#board-list > li > div:nth-child(2) {display: none;margin-top: 17px;padding: 17px 7px;border-top: solid 1px #d1d1d1}

.tour_list h3 {font-size: 1.8rem;font-weight: bold;}
.tour_list .imgmap {position:relative; width: 200px; height: 160px; margin:1rem 0; background-size: cover;background-position: center;border-radius: 1rem; border: 1px solid var(--bg_gray);}
.tour_list .imgmap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    border-radius: 1rem 1rem 0 0;
    pointer-events: none; /* 그라데이션이 내용 상호작용에 방해되지 않도록 설정 */
}
.tour_list .imgmap .label {
    position:absolute;
    padding:1rem 1rem 1rem 2.3rem;
    font-size: 1.2rem; 
    font-weight: bold; 
    background-color:rgba(0, 0, 0, 0.5); 
    color:var(--white); 
    bottom:0; left: 0; 
    border-radius: 0 0.8rem 0 1rem;
    background-image: url(../../image/front/sub01-6_icon02.svg);
    background-repeat: no-repeat;
    background-position: left 0.8rem bottom 1rem;
}
.tour_list .keyword, .brandArea .keyword {display: flex; align-items: center; cursor: pointer; flex-wrap: wrap;}
.tour_list .keyword > *, .brandArea .keyword > * {padding:0.5rem 0.5rem; border-radius: 50px; font-size: 1rem; font-weight: bold; border: 1px solid var(--main_pink); color:var(--main_pink); margin:0 0.4rem 0.4rem 0;} 
.local_brand .brandArea .sub01 .text02 h3, .local_sub01 .brandArea .text02 h3, .tour_list .brandArea .text02 h3  {
    width: 100%;
    font-size: 1.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
}
.local_sub01 .brandArea .rel {align-items: flex-start;}
.local_brand .brandArea .sub01 .text02 div, .local_sub01 .brandArea .text02 div, .tour_list .brandArea .text02 div {font-size:1.4rem;    line-height: 1.4;}
.shopArea .more,
.local_brand .sub01 .more, .local_sub01 .more, .tour_list .more {margin:0 1.5rem;}
.local_brand .sub01 .more::before {z-index: 10;}
.shopArea .more::before,
.local_brand .sub01 .more::before, .local_sub01 .more::before, .tour_list .more::before {position:absolute; content: ''; background: url(../../image/front/more_icon01.svg) no-repeat; width:2.4rem; height: 2.4rem; bottom:0; right:4%; cursor: pointer;}
.brandArea .brand_box .more::before {position:absolute; content: ''; background: url(../../image/front/more_icon.svg) no-repeat; width:2.4rem; height: 2.4rem; bottom:0; right:4%; cursor: pointer;}
.tour_list .like {
    position: relative;
    font-size: 1.6rem;
    padding: 0;
    margin: 0;
    width: 2.5rem;
    text-align: end;
}
.tour_list .like:before {
    position: absolute;
    content: '';
    background: url(../../image/front/heart02.svg) no-repeat;
    background-size: contain;
    width: 2.4rem;
    height: 2.4rem;
    top: 0;
    right: 0;
    cursor: pointer;    
}
.tour_list .like.active::before {
    background: url(../../image/front/heart04.svg) no-repeat;
    background-size: contain;
}
.tour_list .brandTitle .flex > a {width: calc(100% - 2.5rem);}