@charset "utf-8";

/* color */
:root {
  --text_black: #1A1A1A;
  --text_gray:#909090;
  --main_pink: #EB083C;
  --sub_pink:#FA3C4C;
  --orange:#EA5D25;
  --yellow:#FEE500;
  --green:#169C84;
  --white:#ffffff;

  --bg_gray:#f5f5f5;
  --bg_gray2:#F9F9F9;
  --bg_gray3:#EFEFEF;
  --bg_pink:#FFE9EA;
  --bg_black:#333333;

  --box_Dblue:#8EA6C4;
  --box_blue:#E2EFFF;
  --box_oran:#FBEFDD;

  --line_gray:#e8e8e8;

  --filter_main:invert(14%) sepia(90%) saturate(6760%) hue-rotate(342deg) brightness(93%) contrast(98%);
  --filter_sub:invert(47%) sepia(100%) saturate(4080%) hue-rotate(332deg) brightness(106%) contrast(118%);

  --opacity_main:rgba(235, 8, 60, 0.1);

  --shadow:0px 0px 9px rgb(122 122 122 / 10%);
  --shadow_top:0px -6px 9px rgb(122 122 122 / 10%)
}

body{background: var(--opacity_main); font-size: 1.4rem;}
body::before {content: '';position: fixed;left: 50%;top: 0;bottom: 0;width: 393px;height: 100%;margin-left: -196.5px;background-color: #fff;}


/* -- 공용 css -- */
.width1200{width:1200px; margin:0 auto;}

.no-scroll {overflow: hidden;}
.hidden { overflow:hidden !important;}

/* margin */
.ml5 {margin-left:0.5rem;}

.mt5 {margin-top:0.5rem;}
.mt10 {margin-top:1rem;}
.mt20 {margin-top:2rem;}
.mt40 {margin-top:4rem;}

.mb10 {margin-bottom:1rem;}
.mb20 {margin-bottom:2rem;}
.mb40 {margin-bottom:4rem !important;}
.mb60 {margin-bottom:6rem !important;}
.mb80 {margin-bottom:8rem;}

.mx10 {margin:0 1rem;}

.my20 {margin:2rem 0;}
.my40 {margin:4rem 0;}
.my60 {margin:6rem 0;}
.my80 {margin:8rem 0;}

/* padding */
.p20 {padding:2rem;}
.py20 {padding:2rem 0;}
.pb40 {padding-bottom:4rem;}
.pb80 {padding-bottom:8rem;}

/* text */
.bold{font-weight:bold !important;}
.normal{font-weight:normal !important;}
.m_bold{font-weight: 400;}
.l_bold{font-weight: 700;}
.light {font-weight: 200;}

.text_center{text-align: center;}
.text_right{text-align: right;}
.titleArea ,.titleArea02 {font-size:1.8rem; font-weight: bold;} 
.titleArea {color:var(--main_pink);}
.titleArea02 {margin: 2rem auto;}

.i_style{font-size: 1.1rem !important;}
.f_s_16 {font-size: 1.6rem;}

#contents h1{font-size: 1.8rem; font-weight: 700; color:var(--text-color); margin-bottom:2rem; line-height: 1.4; }
#contents h1.h1 {line-height: 1.5;}
#contents.madeM h1 {margin-bottom:1rem;}
/* br */
.show_375 {display: none;}
.dp_none {display: none;}

/* color */
.pink{color: var(--main_pink)!important;;}
.light_pink{color: #FF7A85!important;}
.gray {color:var(--text_gray)!important; font-weight:400 !important;}
.orange {color:var(--orange)!important;;}
.white {color:var(--white) !important;}
.black{color:var(--text_black) !important;}
.shadow{position: fixed;left: 0;top: 0;background: rgba(0, 0, 0, 0.52);width: 100%;height: 100vh;display: none}

/* flex */
.flex ,.flex02 ,.flex03 ,.flex04 {display:flex; }  
.flex {justify-content: space-between;}
.flex_style01 {align-items: center;}
.flex02 {flex-flow: column; align-items:end;  }
.flex03 {align-items: center;}
.flex04 {justify-content: space-evenly; align-items: center;}

/* position */
.rel {position: relative;}

/* border */
.line_none {border:0 !important; padding: inherit !important;}

.cs_p {cursor:pointer;}


/* main */
body > section {background:var(--bg_gray); margin: 0 auto; color:var(--text_black);}

/* mobile_box */
.mobile_style {display: flex; flex-flow: column; width: -webkit-fill-available;}
.mobile_style .mobile_box{display: flex; justify-content: space-between; width: -webkit-fill-available;}
.mobile_style .mobile_box .clock {font-size: 1.3rem; font-weight: bold; width:auto; color: var(--text_black); z-index: 101;}
.top_style2 .logo {cursor: pointer;}

/* weather */
#hipple_wrap .top_logo .date_box h1 {width: auto;}
.date_box {display: flex; flex-flow: row; align-items: center; font-size: 1.6rem; font-weight: bold;}
.date_box .weather {display: none;position:relative; color:var(--text_gray); margin-left: 4rem; }
/* .date_box .weather::before {content:''; background: url(../../image/front/weather_icon.svg) no-repeat; background-size:cover; position:absolute; width:26px; height:-webkit-fill-available; left: -100%; top:0; } */
/* .date_box .weather::before {content:''; background: url(../../image/front/weather_icon.svg) no-repeat; background-size:cover; position:absolute; width:26px; height: 12px; left: -100%; top:0; } */
.date_box .weather #weather-icon {background: url() no-repeat; background-size:cover; position:absolute; width:26px; height: 26px; left: -30px; top:-5px;}
/* searchBox */
.searchBox {position:relative; width:100%;}
.searchBox input { width: 100%; border: 1px solid #d9d9d9; border-radius: 25px; padding: 1.6rem 3rem; font-size: 14px; font-weight: 500; color:var( --text_gray);}
.searchBox img {position:absolute; top:25%; right:5%;}
.searchBox input:focus {border-color:var(--main_pink); outline: none;}

/* like */
.like {position:relative; font-size: 1.6rem; padding:10px 0 10px 10px; margin-left: auto;width:5rem; text-align: end;}
.like::before {position:absolute; content: ''; background: url(../../image/front/heart02.svg) no-repeat; background-size: contain; width:2.4rem; height: 2.4rem; top:15%; right:65%; cursor: pointer;}
.like.active::before {background:url(../../image/front/heart04.svg) no-repeat; background-size: contain;}

/* lock */
.lock .img{position: relative;}
.lock .img::before {position: absolute; content: ''; top:0; left: 0; width:100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1; border-radius: 2rem 2rem  0 0;}
.lock .img::after {position: absolute; content: ''; background: url(../../image/front/sec04_img01.png) no-repeat; background-size: contain; top:40%; left: 45%; width: 15%; height: 18%; z-index: 2; background-size: contain;}  
/* close */
.close .img{position: relative;}
.close .img::before {position: absolute; content: "비공개"; font-size: 1.1rem; font-weight:600; padding:0.5rem 1.5rem; border-radius: 2rem; background:rgba(233,29,46,0.6); color:var(--white); top:10%; left:10%;}

.map_box {position:relative;width: -webkit-fill-available; height: -webkit-fill-available;}
.map_box::after {position: absolute; background: url(../../image/front/sub01-6_icon02.svg) no-repeat; content: ''; width: 1.2rem; height: 1.5rem; bottom: 2.5%; left: 2%;}
.map_box::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;}

/* kakao rank */
.kakao {position:relative; }
.kakao::before {position:absolute; content: ''; background:url(../../image/front/kakao_logo.svg)center 50% no-repeat; width:12px; height: 12px; top: 5%; left:4%; z-index: 1;}
.kakao::after {position:absolute; content: '인기'; background:var(--yellow); top: 0; padding:0.6rem 0.6rem 0.6rem 2.3rem; font-size: 1.1rem; font-weight: 800; border-radius: 4px;}

/* btn */
.btn01 {background:var(--bg_pink); border:1px solid #ffcdd1; font-size: 1.6rem; padding:1.3rem 3.6rem; text-align: center; margin:0 auto; font-weight: bold; border-radius: 99px; display:block; width:fit-content;}
.btn02 {background:var(--bg_pink); font-size: 1.4rem; font-weight: bold; color:var(--main_pink); padding:1rem 1.4rem; border-radius: 5px; border:1px solid #ffcdd1;}
.btn01.St1 {color:var(--text_gray); margin-top: 1rem;}
.btn01.St1.on {color:var(--main_pink);}

/*20241118 이어서작성 */
#Nextbtn {position:  absolute; right: 2rem; bottom:10%; background:var(--main_pink); border:1px solid #ffcdd1; color:var(--white); font-size: 1.5rem; padding:1.3rem 3rem; text-align:center; border-radius: 99px; width:fit-content; box-shadow: var(--shadow);}


/* sec03_boxarea*/
.boxarea {display: flex; flex-flow:row; justify-content: space-between; align-items: center;}
.boxarea > * {padding:1.6rem; border-radius:10px; width:calc(98% / 2); box-shadow:var(--shadow); cursor: pointer;}
.boxarea .flex {flex-flow: column;} /*20241014*/
.boxarea .flex .img {margin-bottom:2rem;}
.boxarea .flex .txt p {font-size:1.6rem; font-weight:700; margin-bottom:0.8rem;}
.boxarea .flex .txt p.p1 {font-weight: 500; margin-bottom:0;}
.boxarea .flex .txt span {font-size:1.2rem; color:var( --text_gray); letter-spacing:-0.034rem;}

.boxarea.boxarea_style2 > * {width:100%; padding:3rem 2rem; cursor: pointer;}
.boxarea.boxarea_style2 .flex {display:flex; flex-flow: row;justify-content:space-between; align-items:center;}
.boxarea.boxarea_style2 .txt_box .txt p {margin:0.8rem 0 2.7rem;}
.boxarea.boxarea_style2 .txt_box span { color:var(--box_Dblue); font-size:1.2rem;}
.boxarea.boxarea_style2 .img { margin-bottom:0;}

.boxarea02 {width:120px !important; box-shadow:var(--shadow); padding:1.4rem; border-radius:10px; }
.boxarea02 .flex {flex-flow:column;}
.boxarea02 .flex .txt p {font-size:1.4rem; line-height:1.3; font-weight:500;}
.boxarea02 .flex .img {margin-left: auto;}

/* popup_style */
.popup-2 {  opacity:0;  visibility:hidden;  transition: opacity 0.3s, visibility 0.3s;}
.popup-2.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;}
#popup.popup-3 {  opacity:0;  visibility:hidden;  transition: opacity 0.3s, visibility 0.3s;}
#popup.popup-3.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; overflow: hidden;}

.pop-wrap { /*opacity: 0; */position: relative; width:394px; margin:0 auto; background: rgba(0, 0, 0, 0.3);}


#popup_style {width:280px; margin:0 auto; padding:2rem; background:var(--white); box-shadow: var(--shadow); border-radius: 10px; position:fixed; bottom:35%; left: 44.5%; z-index: 102 ; height: fit-content; transform: translate(0, 7%);}
#popup_style .D1_pop01 {text-align: center; line-height: 1.5; position:relative;}
/* .D1_pop01::after {position:absolute; content: ''; background:url(../../image/front/ico_close.png)center 50% no-repeat; background-size: cover; width:24px; height: 24px; right:0; top:-15%;} */
.D1_btn {width:100%;}
.D1_btn img {margin-left: auto;}
#popup_style .D1_pop01 p {font-size: 1.4rem;}
#popup_style .D1_pop01 h4 {font-size: 1.6rem; font-weight: 700;}
#popup_style .D1_pop01 .num {font-size: 4.8rem; font-weight: 900; color:var(--main_pink); line-height: 1;}

/* -- 공용 css_End -- */


/* -- hipple_wrap_Start -- */
#hipple_wrap {display: flex; width: 100%; height:100vh; justify-content: center; position:relative; z-index: 2; overflow: hidden;}
#hipple_wrap >* {width: 393px; height: auto; margin-bottom: 5rem;}
#hipple_wrap .hipple_main {background:var(--bg_gray); position:relative; overflow-x:scroll;}
#hipple_wrap .hipple_main::-webkit-scrollbar {display: none;}

/* #hipple_wrap.style2 {height:100vh;} */
#hipple_wrap.style2 {height: auto;}
/* #hipple_wrap.style2 .hipple_main {background:var(--white); position:relative; overflow-x:inherit;padding-bottom: 8rem;} */
#hipple_wrap.style2 .hipple_main {background:var(--white); position:relative; overflow-x:inherit;}
#hipple_wrap.style2 .main {height: inherit;}
/* -- hipple_wrap_End -- */


/* -- hipple_main_Start -- */
#hipple_wrap .top_logo {-webkit-box-align: center; display: -webkit-box; position:sticky; top:0; width: inherit; background:var(--bg_gray); padding:2rem 2rem; z-index:101;}
#hipple_wrap .top_logo2 {background: none; padding:2rem 1rem 0;} 
#hipple_wrap .top_style2 {background: var(--white);}
#hipple_wrap .top_logo h1, #hipple_wrap  .top_logo2 h1 {text-overflow: ellipsis; word-break: break-all; white-space: nowrap; overflow: hidden; width: 72%;}
#hipple_wrap  .top_logo2 h1 {text-align: center;}
/* main */
/* #hipple_wrap .main {background:var(--bg_gray); width: 100%;  height: 100%; padding:0 2rem; } */
#hipple_wrap .main {background:var(--bg_gray); width: 100%; height: calc(100% - 8rem); padding:0 2rem;}

/* event */
#hipple_wrap .main .event {width:100%; background: #515151; color:var(--white); text-align: center; padding:1.5rem 0; border-radius: 10px; font-size: 1.4rem; font-weight: 600; cursor: pointer;} 
/* #hipple_wrap .main .event p {padding: 0 1.2rem;} */

/* sec01 */
.sec01 .text_box, .sec04 .text_box {background: var(--white); padding: 1rem; line-height: 1.3; display: flex; height: auto; flex-flow: column; justify-content: space-between;  border-radius: 0 0 1.5rem 1.5rem;font-size: 1.3rem; overflow: hidden;}
.sec01 .text_box h3, .sec04 .text_box h3 {font-size: 1.4rem; font-weight: 700;  margin-bottom: 0.5rem;  word-break: break-all; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; height: -webkit-fill-available;  height: 4rem;}
.sec01 .text_box p, .sec04 .text_box p {word-break: break-all; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;}
/* #hipple_wrap .mySwiper .swiper-wrapper .swiper-slide {display:flex; flex-direction: row; align-items: stretch; height: max-content; } */
/* .sec01 .text_box >*, .sec04 .text_box >* {word-break: break-all; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; height: -webkit-fill-available;} */
/* .sec01 .swiper-wrapper .sec01_box, .sec04 .swiper-wrapper .sec01_box {width:160px !important;} */
/* #hipple_wrap .mySwiper .swiper-wrapper .swiper-slide {display:flex; flex-direction: column; justify-content: right;} */
/* .sec01 .text_box p, .sec04 .text_box p {height: -webkit-fill-available;} */

/* sec02 */
.category_flex {display:flex; flex-flow: row wrap; align-items: center; text-align: center;  color:#434343; font-size: 1.2rem; font-weight: 500; } /*20241014*/
.category_flex > * {width:calc(100% / 5); cursor:pointer; } /*20241014*/
.category_flex > *:nth-child(-n+10) {margin-bottom:2.7rem;} /*20240927*/
.category_flex .category img {display: inline-block;}
.category_flex .category p {letter-spacing: -0.03rem;}

/* sec04 */
.title_flex {display: flex; flex-flow: row; align-items: center; justify-content: space-between; margin-bottom: 2rem;}
/* .title_flex a {width:80%;} */
.title_flex h1 {margin-bottom: 0 !important;  -webkit-line-clamp: 1 !important; width: 80%; text-overflow: ellipsis;white-space: nowrap; overflow: hidden; }
.title_flex span {font-size:1.3rem; color:var( --text_gray);}

/* sec05 */
#hipple_wrap .main .event.sec05 {background: #FFE2B6; color:#222222;}
/* -- hipple_main_End -- */


/* -- hipple_main_Menu_Start -- */
#nav_menu {position:static; bottom:0; width: auto; -webkit-box-align: center; display: -webkit-box; border-radius: 3rem 3rem 0 0; background:var(--white); padding: 2rem 5rem;  margin: 0 -2rem; z-index: 100;  box-shadow: var(--shadow_top); white-space: nowrap;}
#nav_menu .menu {display:flex; justify-content: space-between; align-items: center; text-align: center; width:100%; }

#nav_menu .menu li {color:var(--text_gray); font-size: 13px; width:100%; }
#nav_menu .menu li img {margin:0 auto;}
/* #nav_menu .menu li a.on img {filter:var(--filter_main);} */
#nav_menu .menu li a.on {margin-bottom:0;}

#nav_menu li:first-child a.on img {content:url(../../image/front/menu_icon_on01.svg);}
#nav_menu li:nth-child(2) a.on img {content:url(../../image/front/menu_icon_on02.svg);}
#nav_menu li:nth-child(3) a.on img {content:url(../../image/front/menu_icon_on03.svg);}
#nav_menu li:nth-child(4) a.on img {content:url(../../image/front/menu_icon_on04.svg);}
#nav_menu li:last-child a.on img {content:url(../../image/front/menu_icon_on05.svg);}


/* #nav_menu.style2 {background: var(--bg_gray2); margin-bottom:0;} */
#nav_menu.style2 {width: inherit; background: var(--bg_gray2); margin-bottom:0; position: fixed; bottom: 0; margin:0;}
#nav_menu.style2 .flex {display: flex; flex-flow: column; align-items: center; width: -webkit-fill-available;}
#nav_menu.style2 .flex >* {font-size: 1.3rem;}
#nav_menu.style2 .flex span {margin-top:1.8rem; width:20%; height: 4px; border-radius: 10px; background:#434343;}
/* -- hipple_main_Menu_End -- */

/* -- hipple_travel_Start -- */
.layer-wrap{display: none;  position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%;}
.layer-wrap.popup-open { display: -webkit-box; display: -ms-flexbox; display: flex;  }

.travel_box{width: 394px; position:fixed;  bottom: 0; padding: 3rem; background: var(--white); box-shadow: var(--shadow_top); z-index: 102; border-radius: 20px 20px 0 0;}
.travelWrap h1 {text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 2rem;}

/* check */
.travelWrap .checkbox{width:100%; padding-bottom:1rem;}
.travelWrap .checkbox:last-child {padding-bottom:0;}
.travelWrap .checkbox-input {clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}
.travelWrap .checkbox-input:checked + .checkbox-tile {border: none;}
.travelWrap .checkbox-input:checked + .checkbox-tile:before {background-color:var(--main_pink); border-color: var(--main_pink);}
.travelWrap .checkbox-input:checked + .checkbox-tile .checkbox-icon, .travelWrap .checkbox-input:checked + .checkbox-tile .checkbox-label {font-weight:600; letter-spacing: -0.05rem; color: var(--main_pink);}
.travelWrap .checkbox-tile {width: 100%; margin-bottom:1rem; border-radius: 0.5rem; border: none; cursor: pointer; position: relative; }

.travelWrap .checkbox-tile:before {content: ""; position: absolute; display: block; width: 2rem; height: 2rem; border: 2px solid #f5f5f5; background-color: #EFEFEF; border-radius: 50%; top: -5px; right: 0; transition: 0.25s ease; background: url('../../image/front/check_white.png') no-repeat; background-size: 10px; background-position: 50% 50%;
}
.travelWrap .checkbox-label {font-size: 1.6rem; font-weight: 400; text-align: center;}


/* line */
.travelWrap .line {position:relative; width:100%; padding: 0.8rem 0;}
.travelWrap .line:after {position:absolute; content: ''; left: 36%; width:25%; height: 3px; border-radius: 50px; background:var(--bg_black); }
/* -- hipple_travel_End -- */

/* -- hipple_introSplash_Start -- */

#hipple_wrap .hipple_main.splash {background: var(--bg_black); padding:0;}
#hipple_wrap .hipple_main.splash .top_logo {background: var(--bg_black);}
#hipple_wrap .hipple_main.splash .top_logo .mobile_style .mobile_box h1 { color:var(--white);}
#hipple_wrap .hipple_main.splash .main {background: var(--bg_black); height: 90%; display: flex; align-items: center;}
#hipple_wrap .hipple_main.splash .main img {margin: 0 auto;}
/* -- hipple_introSplash_End -- */

/* -- hipplye_local_Start -- */
.imgmap {position:relative; margin:1rem 0; }
.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%;}
/* -- hipplye_local_Start -- */


/* -- footer --*/
footer {position:relative; width: 100%; background-color: var(--bg_black); color:var(--white); padding: 4.2rem 0;}
.footer_nav {gap: 4rem; margin-bottom: 4.2rem;}
.footer_nav > li {font-size: 1.6rem; font-weight: 600; color: var(--footer-text); cursor: pointer;}
.footer_txt {font-size: 1.4rem; color: var(--footer-text); line-height: 1.5; margin-bottom: 4.2rem;}
.footer_copyright {font-size: 1.4rem; color: var(--footer-text);}
/* -- footer_End  --*/

/* -- media -- */
@media only screen and (max-width: 2000px){
  #popup_style {left:42.5%; transform: translateX(2%);}
}
@media only screen and (max-width: 1500px){
  .width1200 {width:auto;}
  #popup_style {left:41.5%; transform: translate(-7%, 0);}
}
@media (max-width: 1200px) {
  footer {padding: 3.8rem 2rem;}
  /* #nav_menu {margin: 0 auto 9rem;} */

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

  #popup_style {left:38.5%;}
}
@media only screen and (max-width: 1000px){
  #popup_starguments {transform: translate(-13%, 0);}
}
@media only screen and (max-width: 800px){
  /* hipple_menu */
  #nav_menu {/*width: -webkit-fill-available;*/ padding:2rem 3rem;}

  /* sec02 */
  .category_flex{margin:0;}

  footer {padding: 3rem 2rem;}
  .footer_copyright {font-size: 1.2rem;}
  /* #hipple_wrap {height: calc(100vh - 7rem);}
  #nav_menu {margin: 0 auto 7rem;} */
  
  /* sub_share */
  .hipple_sub .popup-2 {position:fixed; height:calc(100vh - 7rem);}
  #popup_style {left:31.5%; transform: translate(0%, 0);}
}

@media only screen and (max-width: 500px){
  body{background: var(--white);}
  #popup_style {left:10%; transform: translate(10%, 0);}
}

@media only screen and (max-width: 392px){
  /* 공용 */
  .mb40 {margin-bottom:3rem;}
  .p20 {padding: 1.5rem;}
  .show_375 {display: block;}
  .i_style{font-size: 0.9rem !important;}
  .box_style {padding:1.5rem;}

  /* hipple_wrap */
  #hipple_wrap .top_logo {width:auto;}
  
  /* date_box */
  .date_box {font-size: 1.2rem;}

  /* nav_menu */
  #nav_menu {width: -webkit-fill-available; /*bottom: 68px; margin: 0 auto 6.8rem;*/  padding:1.5rem 2rem;}
  #nav_menu.style2 {width:-webkit-fill-available;}

  /* travel */
  .travelWrap {width: -webkit-fill-available !important;}

  /* mobile */
  .mobile_style {width: 100%;}
  .mobile_style .mobile_box {width: auto;}

  /* hipple_main */
  .hipple_main >* {width: -webkit-fill-available;}
  
  /* event* */
  #hipple_wrap .main .event {font-size:1.2rem; padding: 1.2rem 0;}

  /* searchBox */
  .searchBox input {padding:1.2rem 2rem; }
  .searchBox img {top:20%;}
  /* sub_share */
  .hipple_sub .popup-2 {position:fixed; height:calc(100vh - 6.8rem);}
  
  .boxarea > *{padding:1.2rem;}
  .boxarea .flex .txt p {font-size: 1.2rem;}
  .boxarea .flex .txt span {font-size: 1rem; line-height: 1.2;}

  .boxarea.boxarea_style2 > * {padding: 2rem 1.5rem;}
  .boxarea.boxarea_style2 .txt_box span {font-size: 1rem;}
  .boxarea.boxarea_style2 .txt_box .txt p {margin: 0.8rem 0 2.3rem;}

  /* .title_flex h1 {width:90%;} */
  
  .close .img::before {font-size: 1rem;}

  /* like */  
  .like::before {width:1.8rem; height: 1.8rem;  top:-5%; right:70%;}
  .sec01 .text_box h3, .sec04 .text_box h3 {height: 3.75rem;}
  /* travel */
  .localwrap .keyword .keyword_t >* {font-size:1.3rem;}
  .travel_box {width: -webkit-fill-available; padding: 3rem 2rem; right: 0;}
  .travelWrap h1 {font-size: 1.6rem;}
  .travelWrap .checkbox-label {font-size: 1.4rem;}
  .travelWrap .checkbox-tile:before {width:1.6rem; height: 1.6rem;}

  /* popup_style  */
  #popup_style {top:35%; left: 6%; transform: translate(7%, -15%);}
  /* footer */
  footer {padding: 2.8rem 2rem}
}

@media only screen and (max-width: 350px){
  
  #popup_style {left:13.4%; transform: translate(-3.4%, 0);}
  .brandArea .brandtitle .flex, .brandArea .text {flex-flow: column; align-items: flex-start;}
}

.self_center {margin: 0 auto;}

.bannerManagement img {max-width: 100%;}