@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('../font/style.css');

/* base */
html { font-size:10px; }
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, button, select { -webkit-appearance:none; -webkit-border-radius:0; border-radius:0; background:none; }
input:focus, textarea:focus { outline-style:none; } 
textarea::placeholder, input::placeholder { color:#000; opacity: 0.5; }
img { max-width:100%; height:auto; vertical-align:middle; border:0; }
a { text-decoration:none; color:#000; }
i, em { font-style:normal; }
body, button, h1, h2, h3, h4, h5, input, select, table, textarea { font-family: 'Noto Sans KR', sans-serif; color:#000; font-weight:normal; font-size:1.4rem; line-height:1.35; }


body.fixed { overflow:hidden; }

/* wrap */
.wrap { position:relative; max-width: 768px; min-width:290px; margin:0 auto; padding:4.5rem 0 5.5rem 0; box-sizing:border-box; }
.wrap.bg-gray { background-color:#F1F1F1; }

/* header */
#hd { position:fixed; left:0; top:0; right:0; z-index:1000; background-color:#fff; min-width:290px; }
#hd .head { position:relative; max-width: 768px; margin:0 auto; min-height: 4.5rem; background-color:#fff; }
#hd .hd-top { position:relative; height:4.5rem; text-align:center; background-color:#fff; z-index:10; }
#hd .hd-top .btn-menu { position:absolute; left:0; top:0; display:block; width:6.0rem; height:4.6rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/common/ic_menu.svg'); background-size:2.3rem auto; outline:none; cursor:pointer; border:0; }
#hd .hd-top h1 { position:relative; display:inline-block; padding-top:0.7rem; }
#hd .hd-top h1 a { display:block; width:12.0rem; height:3.2rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/common/logo.svg'); background-size:100% auto; }

#hd .hd-top .ic-user { position:absolute; right:5.5rem; top:50%; display:block; width:2.8rem; height:2.8rem; transform:translateY(-50%); }
#hd .hd-top .ic-user a { display:block; width:100%; height: 100%; }
#hd .hd-top .ic-user img { border-radius:2.6rem; overflow:hidden; object-fit: cover; width: 100%; height: 100%; }
#hd .hd-top .ic-user .new { position:absolute; right:-0.5rem; top:-0.5rem; display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; background-color:#FE0707; font-size:1.0rem; border-radius:1.0rem; overflow:hidden; color:#fff; z-index:1; }
#hd .hd-top .btn-writing { position:absolute; right:1.4rem; top:50%; display:block; width:2.5rem; height:2.5rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/common/ic_writing.svg'); background-size:100% auto; outline:none; cursor:pointer; border:0; transform:translateY(-50%); }

/* nav */
#nav { background-color:#5B009A; }
#nav .menu { position:relative; display:grid; grid-template-columns:repeat(5, 1fr); box-sizing:border-box; padding:0 2.0rem; }
#nav .menu li { text-align:center; font-size:1.3rem; }
#nav .menu li a { display:block; color:#fff; height:3.0rem; line-height:3.0rem; } 
#nav .menu li.current a { color:#FFA601; }


/* aside */
#aside { position:fixed; right:0; top:0; bottom:0; left:0; display:block; width:100%; z-index:1001; background-color:rgba(35,35,35,0.7); display:none; }
#aside .inbox { position:absolute; left:-30.0rem; top:0; bottom:0; width:30.0rem; background-color:#fff; box-sizing:border-box; z-index:10; transition:left 0.5s; }
#aside .aside-top { position:relative; height:3.5rem; }
#aside .btn-pop-close { position:absolute; right:2.0rem; top:2.0rem; display:block; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_close.svg'); background-size:100% auto; cursor:pointer; border:0; }
#aside .scroll-wr { position:relative; height:calc(100svh - 3.5rem); }
#aside .scrollbar-inner { height:100%; padding:0 3.0rem; }

#aside .aside-content { position:relative; min-height:calc(100svh - 26.0rem); padding-bottom:5.0rem; }
#aside .nav-menu { }
#aside .nav-menu > li { border-bottom:1px solid #DCDCDC; }
#aside .nav-menu > li:last-child { border-bottom:0; }
#aside .nav-menu li .idx { position:relative; display:flex; width:100%; align-items:center; cursor:pointer; border:0; font-size:1.6rem; color:#000; font-weight:500; height:4.5rem; font-family: 'LaundryGothic'; padding:0 0.5rem; }
#aside .nav-menu .sub-menu { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.0rem; max-width:18.5rem; padding-bottom:2.5rem; }
#aside .nav-menu .sub-menu li { text-align:center; font-size:1.4rem; font-weight:700; }
#aside .nav-menu .sub-menu li a { position:relative; display:block; color:#313131; }
#aside .nav-menu .sub-menu li a:before { content:""; display:block; width:100%; aspect-ratio: 1 / 1; background-color:#FFBD43; background-repeat:no-repeat; background-position:center; border-radius:100%; margin-bottom:0.4rem; }
#aside .nav-menu .sub-menu li.dog a:before { background-image:url('../img/icons/ic_dog.svg'); background-size:58% auto; }
#aside .nav-menu .sub-menu li.cat a:before { background-image:url('../img/icons/ic_cat.svg'); background-size:50% auto; }
#aside .nav-menu .sub-menu li.bird a:before { background-image:url('../img/icons/ic_bird.svg'); background-size:67% auto; }
#aside .nav-menu .sub-menu li.fish a:before { background-image:url('../img/icons/ic_fish.svg'); background-size:60% auto; }
#aside .nav-menu .sub-menu li.etc a:before { background-image:url('../img/icons/ic_etc.svg'); background-size:45% auto; }

#aside .aside-tail { border-top:1px solid #DCDCDC; padding-top:1.0rem; padding-bottom:2.0rem; }
#aside .aside-tail address { font-style:normal; font-size:1.2rem; line-height:1.45; color:#6C6C6C; }
#aside .aside-tail .content-us { margin-top:2.0rem; display:flex; gap:1.0rem; }
#aside .aside-tail .content-us li { }
#aside .aside-tail .content-us li .link { background-repeat:no-repeat; background-position:center; border-radius:4.4rem; width:4.4rem; height:4.4rem; display:flex; align-items:center; border:1px solid #5B009A; }
#aside .aside-tail .content-us li.tel .link { background-image:url('../img/icons/ic_tel.svg'); background-size:2.5rem auto; }
#aside .aside-tail .content-us li.kakao .link { background-image:url('../img/icons/ic_kakaotalk.svg'); background-size:2.7rem auto; border-color:#FAE100; }

/* quick-menu */
#quick-menu { position:fixed; left:0; bottom:0; background-color:#fff; width:100%; min-width:290px; max-width:768px; z-index:90; }
#quick-menu:before { content:""; position:absolute; left:0; right:0; top:0; display:block; width:100%; height:1px; background-color:#D9D9D9; }
#quick-menu .menu { position:relative; max-width:768px; margin:0 auto; display:flex; height:5.5rem; align-items:center; justify-content: space-around; box-sizing:border-box; padding:0 4.0rem; }
#quick-menu .menu li { }
#quick-menu .menu li a { display:block; width:5.5rem; height:5.5rem; background-repeat:no-repeat; background-position:center; font-size:0; }
#quick-menu .menu li.home a { background-image:url('../img/icons/ic_home.svg'); background-size:2.5rem auto; }
#quick-menu .menu li.place a { background-image:url('../img/icons/ic_place.svg'); background-size:2.3rem auto; }
#quick-menu .menu li.schedule a { background-image:url('../img/icons/ic_calendar.svg'); background-size:2.4rem auto; }
#quick-menu .menu li.my a { background-image:url('../img/icons/ic_my.svg'); background-size:2.7rem auto; }

#quick-menu .menu li.home.current a { background-image:url('../img/icons/ic_home_on.svg'); }
#quick-menu .menu li.place.current a { background-image:url('../img/icons/ic_place_on.svg'); }
#quick-menu .menu li.schedule.current a { background-image:url('../img/icons/ic_calendar_on.svg'); }
#quick-menu .menu li.my.current a { background-image:url('../img/icons/ic_my_on.svg'); }