@charset "utf-8";
/* 당근고양이 'ㅅ' */

/* for styles */
@import url("default.css");

/* layout */
html, body {width:100%; overflow-x:hidden; word-break:keep-all; -webkit-text-size-adjust:100%;}
input[type="text"],
input[type="password"],
input[type="date"],
select,
textarea {border:#ddd 1px solid; max-width:100%; border-radius:4px; transition:.2s linear;}
input[type="text"],
input[type="password"],
input[type="date"],
select {height:30px; padding:0 10px;}
select {-webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff url('/pub/images/arrow_select.svg') no-repeat right 10px center / 10px;}
textarea {padding:10px;}
button,a {transition:.2s linear; -webkit-tap-highlight-color:transparent;}
input:focus,
select:focus,
textarea:focus {outline:0; border-color:#7966FE !important; border-width:2px !important;}
a.smoth_link {scroll-behavior:smooth;}
.imgfit img {width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;}

span.br {display:block;}
.mo_vw {display:none !important;}

.inner {width:100%; max-width:1024px; margin:0 auto; padding:0 16px;}

::-webkit-scrollbar {width:6px; height:6px;}
::-webkit-scrollbar-thumb {background-color:#6C50FF; border-radius:4px; background-clip:padding-box; border:1px solid #fff;}
::-webkit-scrollbar-track {background-color:transparent; border-radius:8px;}

a,
button,
label {-webkit-tap-highlight-color:transparent;}

/* overflow:hidden; ios 스크롤 막기 설정 */
html.over_h,body.over_h,
html.fancybox-lock, html.fancybox-lock body {touch-action:none; overflow-scrolling:none; -webkit-overflow-scrolling:none; overscroll-behavior:none;}

/* 높이값 설정 */
.height_vh {height:100vh; max-height:calc(var(--vh, 1vh) * 100);}

/* Color */
.col_ppl {color:#6C50FF !important;}

.blind_link a {position:fixed; top:0; left:0; width:100%;font-size:0; text-align:center; z-index:101;}
.blind_link a:active,
.blind_link a:focus {font-size:20px; color:#fff; background:#000; padding:20px;}


	/* 게시판 상세 */
	.board_in {border-top:#ddd 2px solid;}
	.board_in th,
	.board_in td {text-align:left; padding:10px; border-bottom:#ddd 1px solid;}
	.board_in th {color:#333;}
	.board_in td {color:#666;}
	.board_write col.w1 {width:200px;}

	/* 갤러리 목록 */
	.gall_list {overflow:hidden; margin-top:-10px;}
	.gall_list li {float:left; width:calc((100% - 30px)/4); margin:10px 0 0 10px;}
	.gall_list li:nth-child(4n-3) {margin-left:0; clear:both;}
	.gall_list li a {display:block;}
	.gall_list li .img {width:100%; height:200px; overflow:hidden;}
	.gall_list li p {display:block; height:30px; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* header */
.header {position:fixed; top:0; left:0; width:100%; z-index:100; background:#fff; transition:.2s linear;}
.header .inner {position:relative; height:50px;}
.header .logo {position:absolute; top:0; left:16px; width:67px; height:50px; font-size:0; background:linear-gradient(to right, #A27DEF, #6C50FF); mask:url('/pub/images/logo.svg') no-repeat 50% 50% / contain; -webkit-mask:url('/pub/images/logo.svg') no-repeat 50% 50% / contain;}
.header .logo h1 {font-size:0; opacity:0; width:0; height:0;}
.header .btns {position:absolute; top:0; right:10px; display:flex;}
.header .btns a {position:relative; width:40px; height:50px; background:no-repeat 50% 50% / auto 22px;}
.header .btns a span {position:absolute; top:50%; left:50%; font-size:10px; color:#fff; font-weight:700; line-height:12px; height:12px; width:12px; background:#00CC7A; border-radius:50%; text-align:center; margin:-14px 0 0 2px;}
.header .btns .mem {background-image:url('/pub/images/icon_mem.svg'); background-size:auto 19px;}
.header .btns .alarm {background-image:url('/pub/images/icon_alarm.svg');}
.header .btns .award {background-image:url('/pub/images/icon_award.svg');}
.header .title {font-size:16px; color:#393E42; font-weight:700; line-height:1; padding:17px 0; text-align:center;}
.header .back {position:absolute; top:0; left:0; width:50px; height:50px; background:url('/pub/images/btn_back.svg') no-repeat 50% 50% / 8px;}

/* footer */
.footer {position:fixed; bottom:0; left:0; width:100%; height:55px; background:#fff; z-index:102; box-shadow:rgba(0,0,0,.05) 0 -10px 15px;}
.footer ul {display:flex; background:#fff; height:inherit;}
.footer li {position:relative; width:20%;}
.footer li a {position:relative; display:block; padding-top:31px;}
.footer li i {position:absolute; top:13px; left:0; display:block; width:100%; height:13px; background:no-repeat 50% 50% / auto 13px;}
.footer li p {font-size:11px; color:#8D94A4; font-weight:700; line-height:12px; text-align:center; margin-top:5px;}
.footer li.i1 i {background-image:url('/pub/images/icon_footer01.svg');}
.footer li.i2 i {background-image:url('/pub/images/icon_footer02.svg');}
.footer li.i4 i {background-image:url('/pub/images/icon_footer04.svg');}
.footer li.i5 i {background-image:url('/pub/images/icon_footer05.svg'); background-size:auto 12px;}
.footer .btn_ccl {position:absolute; top:-19px; left:50%; width:50px; height:50px; background:#00CC7A; border:#fff 5px solid; border-radius:50%; box-shadow:rgba(0,0,0,.05) 0 -10px 15px; transform:translateX(-50%);}
.footer .btn_ccl:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/pub/images/btn_ccl.svg') no-repeat 50% 50% / 12px; transition:.2s linear;}
.footer.on .btn_ccl:before {transform:rotate(225deg);}
/* .footer.on:before {content:""; position:absolute; top:25px; left:50%; width:0; height:0; background:#00CC7A; transform:translate(-50%,-50%); opacity:0; transition:.2s linear; border-radius:50%; animation:ftc 2s forwards; z-index:-1;}
@keyframes ftc {
	0% {width:0; height:0; opacity:0;}
	10% {opacity:.3;}
	90% {width:100vw; height:100vw; opacity:0; display:block;}
	100% {display:none;}
} */

.routine_menu,
.routine_menu .dm {position:fixed; bottom:0; left:0; width:100%; height:0; opacity:0; transition:.3s linear;}
.routine_menu {z-index:-1; overflow:hidden;}
.routine_menu .dm {background:rgba(0,0,0,.8);}
.routine_menu .center {position:fixed; bottom:100px; left:50%; width:100vw; height:370px; transform:translateX(-50%); z-index:1;}
.routine_menu .center .tit {position:absolute; top:50%; left:50%; width:120px; height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; transform:translate(-50%,-50%); font-size:14px; color:#fff; font-weight:500; line-height:22px; z-index:1;}
.routine_menu .center .tit i {display:block; font-size:12px; font-weight:500; line-height:30px;  height:30px; width:60px; margin:12px auto 0; background:#6C50FF; border-radius:15px;}
.routine_menu .center .round {position:absolute; top:0; left:0; width:100%; height:100%;}
.routine_menu .center .round ul {position:absolute; top:0; left:0; width:100%; height:100%;}
.routine_menu .center .round li {position:absolute; top:50%; left:50%; width:80px; height:80px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:50%; margin:-40px 0 0 -40px; opacity:0; transition:.2s linear;}
.routine_menu .center .round li a {display:block; width:inherit; height:inherit; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:none;}
.routine_menu .center .round li img {height:25px;}
.routine_menu .center .round li p {font-size:11px; color:#fff; font-weight:500; margin-top:5px;}
/* .routine_menu .center #drag {position:absolute; top:0; left:0; width:100%; height:100%;} */
.routine_menu.on,
.routine_menu.on .dm {height:100%; opacity:1;}
.routine_menu.on {z-index:101;}
.routine_menu.on .center .tit {height:120px;}
.routine_menu.on .center .round li {opacity:1; transition:.3s linear; transition-delay:.4s;}
.routine_menu.on .center .round li.r1 {margin:-160px 0 0 -40px;}
.routine_menu.on .center .round li.r2 {margin:-107px 0 0 62px;}
.routine_menu.on .center .round li.r3 {margin:0px 0 0 74px;}
.routine_menu.on .center .round li.r4 {margin:79px 0 0 2px;}
.routine_menu.on .center .round li.r5 {margin:69px 0 0 -99px;}
.routine_menu.on .center .round li.r6 {margin:-8px 0 0 -162px;}
.routine_menu.on .center .round li.r7 {margin:-110px 0 0 -142px;}

/* 공통 */
.container {position:relative; max-width:1024px; width:100%; min-height:100vh; margin:0 auto; font-size:14px; color:#393E42; padding:50px 0 55px; overflow:hidden;}
.container.un_non {padding:0;}
.container.pb {padding-bottom:85px;}
.ne {position:relative; font-size:11px; color:#6C50FF; font-weight:700; line-height:14px; text-align:left; padding-left:16px;}
.ne:before {content:""; position:absolute; top:1px; left:0; width:12px; height:12px; background:url('/pub/images/icon_ne.svg') no-repeat 50% 50% / contain;}
label.check,
label.radio {position:relative; padding-left:28px; font-size:13px; line-height:20px; display:block;}
label.check input,
label.radio input {display:none; }
label.check i,
label.radio i {position:absolute; top:0; left:0; width:20px; height:20px; border-radius:50%; overflow:hidden; transition:.2s linear;}
label.check i {background:url('/pub/images/icon_chk.svg') #ddd no-repeat 50% 50% / 10px;}
label.check input:checked + i {background-color:#00CC7A;}

/* titles */
.stit {font-size:24px; color:#393E42; font-weight:700; line-height:30px; margin-bottom:30px;}
.stit.mb1 {margin-bottom:10px;}
p.stp {font-size:14px; color:#687178; line-height:24px; margin:12px 0 30px;}

/* splash */
.splash {position:absolute; width:100%; height:100vh; background:linear-gradient(140deg, #5D3EFF 35%, #A27DEF 100%); z-index:10; display:flex; justify-content:center; align-items:center; opacity:1; animation:splash 3s forwards; overflow:hidden;}
@keyframes splash {
	0% {opacity:1;}
	70% {opacity:1;}
	90% {opacity:0; display:flex; z-index:1;}
	100% {opacity:0; display:none; z-index:-1;}
}
.splash .txt {display:flex; flex-direction:column; justify-content:center; align-items:center;}
.splash p {font-size:5.3vw; color:#fff; line-height:8vw; text-align:center;}
.splash img {display:block; width:49vw; margin:5.3vw auto 0;}
.splash i {position:absolute; background:no-repeat 50% 50% / contain;}
.splash .bg1 {top:23vw; left:-19vw; width:39vw; height:43vw; background-image:url('/pub/images/img_splash01.png'); animation:splash_bg1 2s forwards;}
.splash .bg2 {bottom:4vw; right:-31vw; width:90vw; height:74vw; background-image:url('/pub/images/img_splash02.png'); animation:splash_bg2 2s forwards;}
@keyframes splash_bg1 {
	0% {top:23vw; left:-19vw;}
	100% {top:25vw; left:-9vw;}
}
@keyframes splash_bg2 {
	0% {bottom:4vw; right:-31vw;}
	100% {bottom:9vw; right:-21vw;}
}

.routine_icons {position:relative; display:flex; gap:12px;}
.routine_icons li {width:120px; height:120px; border-radius:12px; background:#fff; box-shadow:rgba(0,0,0,.1) 0 3px 15px; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.routine_icons li i {display:block; width:100%; height:43px; background:no-repeat 50% 50% / contain;}
.routine_icons li p {font-size:16px; color:#393E42; font-weight:700; line-height:20px; text-align:center; margin-top:13px;}
.routine_icons li.i1 i {background-image:url('/pub/images/icon_routine01.png');}
.routine_icons li.i2 i {background-image:url('/pub/images/icon_routine02.png');}
.routine_icons li.i3 i {background-image:url('/pub/images/icon_routine03.png');}
.routine_icons li.i4 i {background-image:url('/pub/images/icon_routine04.png');}
.routine_icons li.i5 i {background-image:url('/pub/images/icon_routine05.png');}
.routine_icons li.i6 i {background-image:url('/pub/images/icon_routine06.png');}
.routine_icons li.i7 i {background-image:url('/pub/images/icon_routine07.png');}
.routine_icons li.on {background:#6C50FF; box-shadow:none;}
.routine_icons li.on p {color:#fff;}

.on_board_slide_wrap {position:relative; height:100vh; max-height:calc(var(--vh, 1vh) * 100); overflow:hidden;}
.on_board_slide_wrap .btn_pass {position:absolute; top:20px; right:16px; font-size:12px; color:#393E42; font-weight:700; line-height:20px; z-index:1;}
.on_board_slide .box {position:relative; width:100vw; height:100vh; max-height:calc(var(--vh, 1vh) * 100); overflow:hidden;}
.on_board_slide .img_area {position:relative; height:calc(100vh - 290px); max-height:calc((var(--vh, 1vh) * 100) - 290px); display:flex; flex-direction:column; justify-content:center; align-items:center;}
.on_board_slide .txt_area {position:absolute; bottom:60px; left:0; width:100%; height:230px; padding:0 16px; display:flex; flex-direction:column; align-items:center; text-align:center;}
.on_board_slide .txt_area .tit {font-size:30px; color:#393E42; font-weight:700; line-height:35px;}
.on_board_slide .txt_area p {font-size:14px; color:#8D94A4; line-height:22px; margin:20px 0 24px;}
.on_board_slide .btn {position:absolute; bottom:0; left:50%; display:block; font-size:16px; color:#fff; font-weight:500; line-height:52px; height:52px; width:calc(100% - 32px); background:#6C50FF; border-radius:26px; text-align:center; transform:translateX(-50%);}
.on_board_slide_wrap .slick-dots {position:absolute; bottom:30px; left:0; width:100%; display:flex; justify-content:center; align-items:center; gap:4px; pointer-events:none; user-select:none;}
.on_board_slide_wrap .slick-dots li button {width:6px; height:6px; background:#ddd; border-radius:50%; font-size:0;}
.on_board_slide_wrap .slick-dots li.slick-active button {background:#393E42;}
.on_board_slide_wrap .routine_icons.set1 {transform:translateX(24%); margin-bottom:20px; animation:splash_icons1 8s infinite;}
.on_board_slide_wrap .routine_icons.set2 {transform:translateX(-10%); animation:splash_icons2 8s infinite;}
@keyframes splash_icons1 {
	0% {transform:translateX(24%);}
	50% {transform:translateX(18%);}
	100% {transform:translateX(24%);}
}
@keyframes splash_icons2 {
	0% {transform:translateX(-26%);}
	50% {transform:translateX(-20%);}
	100% {transform:translateX(-26%);}
}
.on_board02 .img_area {background:url('/pub/images/img_on_board02.png') no-repeat 50% 50% / auto 72%;}
.on_board02 .img_area .walk_box {position:absolute; top:50%; left:0; width:100%; height:183px; background:url('/pub/images/bg_on_board02.svg') no-repeat 50% 50% / contain; transform:translateY(-32%);}
.on_board02 .img_area .walk_box:before {content:""; position:absolute; top:50%; left:50%; width:28px; height:3px; background:#6C50FF; border-radius:2px; margin:16px 0 0 -127px;}
.on_board02 .img_area .walk_box .cha {position:absolute; top:-4px; left:50%; width:155px; height:116px; background:url('/pub/images/img_on_board02_cha.svg') no-repeat 50% 50% / contain; margin-left:-118px;}
.slick-current .on_board02 .img_area .walk_box:before {animation:splash2_bar 4s linear infinite;}
.slick-current .on_board02 .img_area .walk_box .cha {animation:splash2_cha 4s linear infinite;}
@keyframes splash2_bar {
	0% {width:28px;}
	70% {width:68px;}
	100% {width:68px;}
}
@keyframes splash2_cha {
	0% {margin-left:-118px;}
	70% {margin-left:-78px;}
	100% {margin-left:-78px;}
}
.on_board03 .img_area {background:url('/pub/images/img_on_board03.png') no-repeat 50% 50% / auto 72%;}
.on_board03 .img_area .cha {position:absolute; bottom:10%; right:0; width:58%; height:29%; background:url('/pub/images/img_on_board03_cha.png') no-repeat 50% 50% / contain;}

/* login */
.login_start {background:linear-gradient(140deg, #5D3EFF 35%, #A27DEF 100%);}
.login_start .inner {position:relative; height:100vh; max-height:calc(var(--vh, 1vh) * 100); padding-top:65px;}
.login_start .logo {width:100%; height:24px; background:url('/pub/images/logo.svg') no-repeat 0 50% / contain;}
.login_start .tit {font-size:38px; color:#fff; font-weight:300; line-height:48px; margin-top:24px;}
.login_select {position:absolute; bottom:0; left:0; width:100%; padding:0 16px 30px;}
.login_select .img {width:164px; height:170px; max-width:50%; max-height:22vh; background:url('/pub/images/img_login.png') no-repeat right bottom / contain; margin-left:calc(50% - 25px);}
.login_select .btn {position:relative; display:block; width:100%; height:44px; line-height:44px; text-align:center; font-size:14px; color:#fff; font-weight:500; border-radius:22px; background:rgba(0,0,0,.2); margin-bottom:8px;}
.login_select .btn:before {content:""; position:absolute; top:0; left:26px; height:100%; background:no-repeat 50% 50% / contain;}
.login_select .btn.i_kakao:before {width:15px; background-image:url('/pub/images/icon_kakao.svg');}
.login_select .btn.i_naver:before {width:13px; background-image:url('/pub/images/icon_naver.svg');}
.login_select .btn.i_google:before {width:15px; background-image:url('/pub/images/icon_google.svg');}
.login_select .btn.i_email:before {width:14px; background-image:url('/pub/images/icon_email.svg');}
.login_select .links {padding:15px 0 36px; display:flex; justify-content:center; align-items:center; gap:29px;}
.login_select .links a {position:relative; font-size:13px; color:#fff; line-height:20px;}
.login_select .links a:before {content:""; position:absolute; top:50%; left:-14px; width:1px; height:10px; background:#fff; transform:translateY(-50%);}
.login_select .links a:first-child:before {display:none;}
.login_select p {font-size:14px; color:#fff; line-height:22px; opacity:.8; text-align:center;}

.container.login_page {padding-top:80px;}
.login_page .btn_back {position:absolute; top:0; left:0; width:50px; height:50px; background:url('/pub/images/btn_back.svg') no-repeat 50% 50% / 8px;}
.inputs {overflow:auto; max-height:calc(100vh - 242px);}
.inputs .tt {position:relative; font-size:14px; font-weight:700; margin:20px 0 8px;}
.inputs .tt:first-child {margin-top:0;}
.inputs .tt .tar {position:absolute; bottom:0; right:0; font-size:10px; font-weight:500;}
.inputs .text {border:#ddd 1px solid; border-radius:8px;}
.inputs .text::placeholder {color:#bbb;}
.inputs input.text,
.inputs select.text {height:44px; line-height:42px;}
.inputs textarea.text {height:200px; line-height:24px;}
.inputs .auto_login {margin-top:16px;}
.inputs .flex {display:flex; gap:8px;}
.inputs .flex.mt {margin-top:16px;}
.inputs .flex.gap3 {gap:30px;}
.inputs .flex .text {width:calc(100% - 88px);}
.inputs .flex .btn {width:80px; height:44px; line-height:42px; text-align:center; font-size:13px; color:#393E42; font-weight:500; border:#393E42 1px solid; border-radius:8px;}
.inputs p.s {font-size:10px;}

.btn_btm {position:relative; bottom:0; left:0; width:100%; padding:30px 0 30px; background:#fff; transition:.2s linear;}
.btn_btm.mt8 {margin-top:100px;}
.btn_btm.pd {padding-left:16px; padding-right:16px;}
.btn_btm .btn {display:block; font-size:16px; color:#fff; font-weight:500; line-height:1; padding:18px; width:100%; border-radius:26px; background:#6C50FF; text-align:center; border:0;}
.btn_btm .links {display:flex; justify-content:center; align-items:center; gap:29px; margin-top:30px;}
.btn_btm .links a {position:relative; font-size:13px; color:#687178; line-height:20px;}
.btn_btm .links a:before {content:""; position:absolute; top:50%; left:-14px; width:1px; height:10px; background:#ddd; transform:translateY(-50%);}
.btn_btm .links a:first-child:before {display:none;}
.btn_btm .btn_pass {display:block; text-align:center; font-size:14px; font-weight:500; margin-bottom:30px;}
.btn_btm .btn_pass strong {display:inline-block; vertical-align:top;}
.btn_btm .tac {padding-bottom:30px;}
.btn_btm .tac label.check {display:inline-block; vertical-align:top; text-align:left;}
/* .btn_btm.focus {bottom:-82px;} */

/* 회원가입 */
.check_area .all {border-bottom:#EBEBEB 1px solid; padding-bottom:26px; margin-bottom:30px;}
.check_area ul {display:flex; flex-direction:column; gap:20px;}
.check_area li {display:flex; justify-content:space-between}
.check_area .btn_view {font-size:12px; color:#bbb; text-decoration:underline;}

/* 팝업들 */
.popup {position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; padding:80px 16px 30px; z-index:10; display:none;}
.popup .btn_close {position:absolute; top:0; left:0; width:50px; height:40px; background:url('/pub/images/btn_close.svg') no-repeat 50% 50% / 15px;}
.popup .con {font-size:13px; color:#393E42; line-height:20px; width:100%; height:calc(100vh - 170px); overflow:auto;}

.popup_dm,
.popup_dm .dm {position:fixed; top:0; left:0; width:100%; height:100%;}
.popup_dm {z-index:101; display:none;}
.popup_dm .dm {background:rgba(0,0,0,.5);}
.popup_dm .inbox {position:absolute; top:50%; left:50%; width:300px; max-width:calc(100% - 72px); transform:translate(-50%,-50%); background:#fff; border-radius:20px; padding:40px 10px 30px; text-align:center;}
.popup_dm .stit {text-align:center;}
.popup_dm p {font-size:14px; color:#687178; line-height:20px; margin:20px 0 30px;}
.popup_dm .btn {display:block; font-size:13px; color:#fff; font-weight:500; line-height:1; padding:15px; height:44px; width:150px; text-align:center; background:#6C50FF; border-radius:22px; border:0; margin:0 auto; display:flex; justify-content:center; align-items:center;}
.popup_dm .btn_close {position:absolute; top:0; right:0; width:50px; height:50px; background:url('/pub/images/btn_close.svg') no-repeat 50% 50% / 15px;}
.popup_dm .btns {display:flex; gap:8px;}
.popup_dm .btns .btn {width:calc(50% - 4px); margin:0;}
.popup_dm .btn_w {color:#6C50FF; background:#F0EDFF;}
.pop_join .inbox {padding-top:62px;}
.pop_join .inbox:before {content:""; position:absolute; top:-70px; left:0; width:100%; height:113px; background:url('/pub/images/icon_join_end.png') no-repeat 50% 50% / contain;}

/* 아이디/비번 찾기 */
.find_end {background:#F7F7F7; border-radius:8px; padding:52px 20px; text-align:center; font-size:16px; line-height:28px;}

/* main */
.mvisual {position:relative; width:100%; padding-bottom:65px; background:url('/pub/images/bg_mvisual.jpg') no-repeat 100% 50% / cover;}
.mvisual:before {content:""; position:absolute; top:calc(50% - 68px); right:10px; width:54px; height:82px; background:url('/pub/images/icon_mvisual.png') no-repeat 50% 50% / contain;}
.mvisual .txt {padding:32px 12px 0;}
.mvisual p {font-size:12px; color:#687178; font-weight:500; line-height:20px;}
.mvisual .tit {font-size:24px; font-weight:700; line-height:33px; margin:10px 0;}
.mvisual .btn_history {display:block; width:60px; height:38px; background:url('/pub/images/btn_history.png') no-repeat 0 50% / contain; font-size:10px; color:#393E42; font-weight:900; line-height:35px; padding:3px 0 0 20px; text-shadow:#fff 0 0 2px,#fff 0 0 2px,#fff 0 0 2px,#fff 0 0 2px,#fff 0 0 2px,#fff 0 0 2px,#fff 0 0 2px,#fff 0 0 2px;}
.mvisual .level_wrap {position:absolute; top:40px; right:0; width:170px;}
.mvisual .level_wrap i {display:block; width:110px; height:110px; background:#fff; border-radius:50%; overflow:hidden; margin:0 auto;}
.mvisual .level_wrap .level_box {position:relative; width:100px; height:14px; background:#E1E1E1; border:#fff 2px solid; border-radius:12px; margin:-10px auto 0;}
.mvisual .level_wrap .level {position:absolute; top:50%; left:-10px; width:22px; height:20px; line-height:20px; text-align:center; background:url('/pub/images/icon_level.svg') no-repeat 50% 50% / contain; font-size:10px; color:#fff; font-weight:900; z-index:1; transform:translateY(-50%); padding-top:1px;}
.mvisual .level_wrap .bar {position:absolute; top:0; left:0; height:100%; background:#00CC7A; border-radius:8px;}
.mvisual .level_wrap .exp {position:relative; font-size:10px; font-weight:700; line-height:10px; text-align:center; z-index:1;}
.mvisual .ai_txt {position:relative; width:100%; height:40px; line-height:1; text-align:center; font-size:12px; color:#fff; background:#6C50FF; border-radius:20px; display:flex; justify-content:center; align-items:center; padding:14px;}
.mvisual .ai_txt:before {content:""; position:absolute; top:-5px; right:63px; width:16px; height:16px; background:#6C50FF; border-radius:2px; transform:rotate(45deg);}
.mcon .tit {position:relative; font-size:14px; font-weight:700; line-height:20px; margin:30px 0 12px;}
.mcon .tit .btn_q {display:inline-block; vertical-align:top; width:12px; height:20px; background:url('/pub/images/icon_q.svg') no-repeat 50% 50% / contain; margin-left:4px;}
.mcon .tit .tar {position:absolute; top:0; right:0; font-size:11px; color:#8D94A4; font-weight:500; line-height:inherit;}
.mc01 {position:relative; margin-top:-45px;}
.mc01 .inner {display:flex; gap:10px;}
.mc01 a {width:calc(50% - 5px); height:90px; background:#fff; border-radius:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; box-shadow:rgba(0,0,0,.1) 0 0 15px;}
.mc01 a i {display:block; width:100%; height:39px; background:no-repeat 50% 50%;}
.mc01 a p {font-size:14px; font-weight:700; line-height:20px; text-align:center; margin-top:10px;}
.mc01 a.i1 i {background-image:url('/pub/images/icon_mc01_01.png'); background-size:auto 28px;}
.mc01 a.i2 i {background-image:url('/pub/images/icon_mc01_02.png'); background-size:auto 34px;}
.mc01.iset_diary a.i1 i {background-image:url('/pub/images/icon_routine03.png'); background-size:auto 39px;}
.step_routine {position:relative; background:#fff; border-radius:8px; box-shadow:rgba(0,0,0,.06) 0 2px 15px; padding:20px 20px 30px; overflow:hidden;}
.step_routine ul {position:absolute; bottom:30px; left:20px; width:calc(100% - 40px); display:flex; justify-content:space-between;}
.step_routine li {position:relative; font-size:10px; color:#C6C6C6; line-height:12px; height:12px; width:calc(100%/10); text-align:center;}
.step_routine li p {position:absolute; left:50%; transform:translateX(-50%);}
.step_routine li p:after {content:"단계"}
.step_routine .bar_wrap {height:98px; display:flex; align-items:flex-end; padding-bottom:15px;}
.step_routine .bar_wrap .line {position:relative; width:100%; height:4px; background:#EBEBEB; border-radius:2px;}
.step_routine .bar_wrap .line .bar {position:absolute; top:0; left:0; height:100%; background:#6C50FF; border-radius:inherit;}
.step_routine .bar_wrap .line .bar:after {content:""; position:absolute; top:-2px; right:-4px; width:8px; height:8px; background:#fff; border:#6C50FF 2px solid; border-radius:50%;}
.step_routine .bar_wrap .line .cha {position:absolute; bottom:4px; right:-38px; width:62px; height:52px; background:url('/pub/images/icon_cha.svg') no-repeat bottom center / contain;}
.step_routine .bar_wrap .line p {position:absolute; bottom:56px; left:-18px; width:140px; line-height:1; font-size:10px; color:#fff; padding:6px; border-radius:11px; background:#393E42; text-align:center; display:flex; justify-content:center; align-items:center;}
.step_routine .bar_wrap .line p:before {content:""; position:absolute; bottom:-3px; left:40px; width:6px; height:6px; background:#393E42; border-radius:2px; transform:rotate(45deg);}
.step_routine .bar_wrap.low .line p {left:0;}
.step_routine .bar_wrap.low .line p:before {left:20px;}
.step_routine .bar_wrap.low .line .cha {right:-42px;}
.step_routine .bar_wrap.rev .line p {left:auto; right:-8px;}
.step_routine .bar_wrap.rev .line p:before {left:auto; right:40px;}
.step_routine .bar_wrap.high .line p {left:auto; right:20px;}
.step_routine .bar_wrap.high .line p:before {left:auto; right:10px;}
.mc03_slide {position:relative;}
.mc03_slide .mv {position:relative; width:80px; height:80px; padding:10px; box-shadow:rgba(0,0,0,.1) 0 3px 10px; border-radius:8px;}
.mc03_slide .mv span {display:block; font-size:16px; font-weight:700; line-height:20px;}
.mc03_slide .mv p {font-size:10px; color:#8D94A4; line-height:12px;}
.mc03_slide .mv .do {display:block; font-size:10px; color:#6C50FF; font-weight:700; line-height:16px; height:16px; width:35px; text-align:center; background:rgba(108,80,255,.06); border-radius:8px; margin-top:10px;}
.mc03_slide .mv i {position:absolute; bottom:8px; right:8px; width:30px; height:27px; background:url('/pub/images/icon_anifoot.svg') no-repeat 50% 50% / contain;}
.mc03_slide .mv.today {width:110px;}
.mc03_slide .mv.today i {background-image:url('/pub/images/icon_anifoot_g.svg');}

/* 산책 시작 */
.walkmap_wrap {position:relative;}
.walkmap_wrap .massage {position:absolute; top:0; left:0; font-size:12px; color:#fff; line-height:1; padding-top:16px; height:40px; width:100%; text-align:center; display:flex; justify-content:center; align-items:flex-start; background:rgba(108,80,255,.8); z-index:1;}
.walkmap_wrap .map {position:relative; width:100%; height:calc(100vh - 340px); z-index:0;}
.walkmap_wrap.detail .map {height:calc(100vh - 250px);}
.walkmap_wrap .map > div > div > div:nth-child(6) > div {width:50px; height:50px;}
.walkmap_wrap .map > div > div > div:nth-child(6) > div:before {content:""; position:relative; top:-5px; left:-5px; display:block; width:60px; height:65px; background:url('/pub/images/icon_mappoint.svg') no-repeat 50% 50% / contain; padding:5px 5px 10px;}
.walkmap_wrap .state {position:fixed; bottom:0; left:0; width:100%; background:#fff; border-radius:20px 20px 0 0; padding:24px 0 30px; z-index:10;}
.walkmap_wrap .state.sleep {position:relative; top:40px; bottom:auto;}
.walkmap_wrap .step {display:flex; gap:8px;}
.walkmap_wrap .step span {font-size:11px; color:#fff; font-weight:500; line-height:1; padding:4px 0; height:20px; width:45px; text-align:center; background:#6C50FF; border-radius:8px;}
.walkmap_wrap .step strong {font-size:16px;}
.walkmap_wrap .walk_state {margin-top:16px; display:flex; background:#F7F7F7; border-radius:12px; padding:25px 0 28px;}
.walkmap_wrap .walk_state li {position:relative; width:50%; padding:5px 0 3px; text-align:center;}
.walkmap_wrap .walk_state li:before {content:""; position:absolute; top:0; left:0; width:1px; height:100%; background:#ddd;}
.walkmap_wrap .walk_state li:first-child:before {display:none;}
.walkmap_wrap .walk_state strong {display:block; font-size:26px; margin-bottom:12px;}
.walkmap_wrap .walk_state p {font-size:11px; color:#8D94A4; font-weight:500; line-height:20px;}
.walkmap_wrap .btns {position:relative; display:flex; gap:12px; justify-content:center; margin-top:20px;}
.walkmap_wrap .btns:before {content:""; position:absolute; top:0; left:0; width:0; height:100%; background-color:transparent; z-index:1;}
.walkmap_wrap .btns.lock:before {width:80%;}
.walkmap_wrap .btns .btn {position:relative; width:calc((100vw - 80px)/5); height:calc((100vw - 80px)/5); max-width:188px; max-height:188px; box-shadow:rgba(0,0,0,.08) 0 2px 10px; border-radius:50%; border:#fff 2px solid;}
.walkmap_wrap .btns .btn:before {content:""; display:block; width:100%; height:100%; background:no-repeat 50% 50%;}
.walkmap_wrap .btns p {position:absolute; top:-13px; left:50%; width:52px; height:20px; line-height:20px; text-align:center; font-size:10px; color:rgba(255,255,255,.8); text-align:center; background:#393E42; border-radius:8px; transform:translateX(-50%); display:none;}
.walkmap_wrap .btns p:before {content:""; position:absolute; bottom:-3px; left:50%; width:6px; height:6px; background:#393E42; border-radius:2px; transform:translateX(-50%) rotate(45deg); z-index:-1;}
.walkmap_wrap .btns .i1:before {background-image:url('/pub/images/icon_walkmap01.svg'); background-size:auto 4.3vw;}
.walkmap_wrap .btns .i2:before {background-image:url('/pub/images/icon_walkmap02.svg'); background-size:auto 3.7vw;}
.walkmap_wrap .btns .i3:before {background-image:url('/pub/images/icon_walkmap03.svg'); background-size:auto 3.7vw;}
.walkmap_wrap .btns .i4:before {background-image:url('/pub/images/icon_walkmap04.svg'); background-size:auto 4.3vw;}
.walkmap_wrap .btns .i5:before {background-image:url('/pub/images/icon_walkmap05.svg'); background-size:auto 4vw;}
.walkmap_wrap .btns .on {border-color:#7966EF;}
.walkmap_wrap .btns .on p {display:block;}
.walkmap_wrap .btns .i1.on:before {background-image:url('/pub/images/icon_walkmap01_on.svg');}
.walkmap_wrap .btns .i2.on:before {background-image:url('/pub/images/icon_walkmap02_on.svg');}
.walkmap_wrap .btns .i3.on:before {background-image:url('/pub/images/icon_walkmap03_on.svg');}
.walkmap_wrap .btns .i4.on:before {background-image:url('/pub/images/icon_walkmap04_on.svg');}
.walkmap_wrap .btns .i5.on:before {background-image:url('/pub/images/icon_walkmap05_on.svg');}

.pop_audio .inbox {top:auto; left:0; bottom:0; width:100%; max-width:100%; transform:translate(0,0); border-radius:20px 20px 0 0; padding:24px 16px; text-align:left; overflow:hidden;}
.pop_audio .tit {font-size:16px; color:#393E42; font-weight:700; line-height:22px; text-align:left;}
.pop_audio .tit + p {font-size:11px; color:#8D94A4; font-weight:500; line-height:14px; margin:12px 0 10px;}
.pop_audio .slick-list {padding-right:30%;}
.pop_audio .slick-slide {padding-top:9px; margin-right:12px;}
.pop_audio .audio_slide a {position:relative; display:block; width:200px; height:120px; padding:20px 16px; border-radius:8px;}
.pop_audio .audio_slide a:before,
.pop_audio .audio_slide a:after {content:""; position:absolute; z-index:1; transition:.2s linear;}
.pop_audio .audio_slide a:before {top:0; left:0; width:100%; height:100%; border:transparent 2px solid; border-radius:inherit;}
.pop_audio .audio_slide a:after {top:-9px; left:16px; width:18px; height:18px; background:url('/pub/images/icon_check.svg') no-repeat 50% 50% / contain; opacity:0;}
.pop_audio .audio_slide a p {font-size:14px; font-weight:700; line-height:22px; margin:0;}
.pop_audio .audio_slide a .time {position:absolute; bottom:16px; left:16px; padding:5px 10px 5px 22px; font-size:10px; color:#393E42; font-weight:700; line-height:1; height:20px; width:auto; display:flex; justify-content:center; align-items:flex-start; background:url('/pub/images/icon_time.svg') no-repeat #fff 7px 50% / 9px; text-align:center;}
.pop_audio .audio_slide a img {position:absolute; bottom:0; right:0; height:100%; z-index:-1;}
.pop_audio .audio_slide a.c1 {background:#FFF3CB;}
.pop_audio .audio_slide a.c2 {background:#FEEAF3;}
.pop_audio .audio_slide .on:before {border-color:#6C50FF;}
.pop_audio .audio_slide .on:after {opacity:1;}

.walk_end_wrap {position:relative; padding-top:30px; padding-bottom:50px; overflow:hidden auto;/*  max-height:calc(100vh - 104px); */}
.walk_end_wrap.nofoot {max-height:calc(100vh - 50px);}
.walk_end_box {border-radius:20px; margin-top:30px; padding:30px 20px; background:linear-gradient(-30deg,#6C50FF,#A27DEF);}
.walk_end_box .chabox {position:relative; width:230px; height:230px; margin:0 auto 15px; background:rgba(255,255,255,.02); border-radius:50%; padding:30px;}
.walk_end_box .chabox:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/pub/images/bg_walk_box.svg') no-repeat 50% 50% / contain;}
.walk_end_box .chabox i {display:block; width:100%; height:100%; background:rgba(255,255,255,.03); border-radius:50%; padding:24px;}
.walk_end_box .chabox img {border-radius:50%;}
.walk_end_box .level_box {position:absolute; bottom:24px; left:0; width:100%; height:20px; display:flex; justify-content:center; align-items:center; gap:4px; font-size:16px; color:#fff; font-weight:700;}
.walk_end_box .level {width:22px; height:20px; line-height:20px; text-align:center; background:url('/pub/images/icon_level.svg') no-repeat 50% 50% / contain; font-size:10px; color:#fff; font-weight:900; z-index:1; padding-top:1px;}
.walk_end_box .btns {display:flex; flex-direction:column; gap:8px;}
.walk_end_box .btns .btn {position:relative; width:100%; line-height:1; text-align:center; font-size:12px; color:#fff; font-weight:500; padding:14px;}
.walk_end_box .btns .end_cha,
.walk_end_box .btns .btn_file span {display:flex; gap:8px; justify-content:center; align-items:center; background:rgba(0,0,0,.16); border-radius:8px;}
.walk_end_box .btns .end_cha:before,
.walk_end_box .btns .btn_file span:before {content:""; display:block; height:12px; background:no-repeat 50% 50% / contain;}
.walk_end_box .btns .end_cha:before {width:12px; background-image:url('/pub/images/icon_foot.svg');}
.walk_end_box .btns .btn_file span:before {width:13px; background-image:url('/pub/images/icon_camera.svg');}
.walk_end_box .btns .btn_file input {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0;}

.pop_challenge .inbox {padding-top:72px;}
.pop_challenge .inbox:before {content:""; position:absolute; top:-52px; left:0; width:100%; height:105px; background:url('/pub/images/icon_challenge_hand.png') no-repeat 50% 50% / contain;}
.challenge_box {background:#F7F7F7; border-radius:8px; padding:16px; display:flex; justify-content:center; align-items:center; gap:24px; margin:20px auto; width:calc(100% - 40px);}
.challenge_box .day {width:87px; height:102px; /* background:url('/pub/images/icon_day.svg') no-repeat 50% 50% / contain; */ padding-top:58px; font-size:19px; color:#fff; line-height:22px; text-align:center;}
.challenge_box p {color:#393E42; font-weight:700; line-height:22px; text-align:left; margin:0 !important;}

/* 완료카드 만들기 */
.end_card_wrap {position:relative; height:calc(100vh - 50px); padding-bottom:100px;}
.end_card_wrap .inner {position:relative; height:100%; overflow:auto;}
.end_card_wrap .end_card_box {width:calc(100% - 32px); margin:30px auto; border-radius:8px; box-shadow:rgba(0,0,0,.1) 0 4px 15px; padding:16px;}
.end_card_wrap .img_area {position:relative; width:100%; height:75vw; max-width:540px; max-height:560px; background:#F7F7F7 url('/pub/images/img_wark_card.png') no-repeat 50% 50% / cover; margin:0 auto 16px; border-radius:8px; overflow:hidden; display:flex; justify-content:center; align-items:center;}
.end_card_wrap .img_area .imgfit,
.end_card_wrap .img_area > img {max-width:67%; max-height:67%; /* border:#ebebeb 1px solid; */ border-radius:50%;}
.end_card_wrap .img_area .imgfit {max-width:50vw; max-height:50vw; overflow:hidden; background:#fff;}
.end_card_wrap .img_area .imgfit img {display:block;}
.end_card_wrap .img_area .today {position:absolute; top:14px; left:14px; font-size:11px; color:#fff; font-weight:700; line-height:1; padding:5px 6px; border-radius:4px; background:rgba(0,0,0,.32); pointer-events:none; user-select:none;}
.end_card_wrap .img_area form,
.end_card_wrap .img_area .imgbox {position:relative; display:block; width:100%; height:100%;}
/* .end_card_wrap .img_area .img {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; border-radius:8px; overflow:hidden;} */
.end_card_wrap .img_area .img {position:relative; width:100%; height:75vw; max-width:540px; max-height:560px; background:#F7F7F7 url('/pub/images/img_wark_card.png') no-repeat 50% 50% / cover; margin:0 auto 16px; border-radius:8px; overflow:hidden; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:0 17%; text-align:center;}
.end_card_wrap .img_area .img > img {max-width:49vw; max-height:49vw;}
.end_card_wrap .img_area .img i {position:relative; width:100%; height:56px; background:url('/pub/images/icon_img_plus.svg') no-repeat 50% 50% / contain; margin-bottom:25px;}
.end_card_wrap .img_area .img p {font-size:14px; color:#687178;}
.end_card_wrap .img_area .img.free {padding:0;}
.end_card_wrap .img_area .img.free .round {width:50vw; height:50vw; background:#fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.end_card_wrap .img_area .img.free > img {width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;}
/* .end_card_wrap .img_area .img img {width:100%; height:100%; object-fit:cover;} */
.end_card_wrap .img_area .imgInp {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:1;}
.end_card_wrap .text {font-size:13px; line-height:30px; height:90px; border:0; text-align:center; transition:.2s linear; padding:0; overflow:hidden;}
.end_card_wrap .text::placeholder {color:#bbb;}
.end_card_wrap .text:focus {outline:0;}
.end_card_wrap textarea.text {line-height: 1.2;}
.end_card_wrap div.text {line-height:20px; text-align:left; height:auto; word-break:break-word;}
.end_card_wrap.hauto {height:auto; padding-bottom:0;}
.end_card_wrap + p.stp {margin-top:40px;}

.btn_share {display:flex; justify-content:center; align-items:center; gap:6px; font-size:13px; color:#fff; font-weight:500; line-height:44px; height:44px; width:150px; background:#6C50FF; border-radius:22px; text-align:center; margin:20px auto;}
.btn_share:before {content:""; display:block; width:12px; height:12px; background:url('/pub/images/icon_share.svg') no-repeat 50% 50% / contain;}
.line_bar {position:relative; width:100%; height:6px; background:#F7F7F7; margin:20px 0;}
.line_bar:before {content:""; position:absolute; top:0; left:50%; width:100vw; height:100%; background:inherit; transform:translateX(-50%);}

.sns_wrap.pb {padding-bottom:20px;}
.sns_wrap {display:flex; gap:8px; justify-content:center; align-items:center; margin-top:14px;}
.sns_wrap .btn {width:40px; height:40px; background:no-repeat 50% 50% / contain; border-radius:50%;}
.sns_wrap .btn_sns01 {background-image:url('/pub/images/btn_sns01.svg');}
.sns_wrap .btn_sns02 {background-image:url('/pub/images/btn_sns02.svg');}
.sns_wrap .btn_sns03 {background-image:url('/pub/images/btn_sns03.svg');}
.sns_wrap .btn_sns04 {background-image:url('/pub/images/btn_sns04.svg');}
.sns_wrap .btn_sns05 {background-image:url('/pub/images/btn_sns05.svg');}
.sns_wrap .btn_sns06 {background-image:url('/pub/images/btn_sns06.svg');}

/* 산책 루틴 알림 */
.wark_alarm_wrap {position:relative; padding-top:30px; overflow:auto; max-height:calc(100vh - 150px); background:#fff;}
.wark_alarm_wrap.mah50 {min-height:563px;}
.wark_alarm_wrap .cha {position:relative; width:100px; height:100px; border:#EBEBEB 1px solid; border-radius:50%; margin:0 auto 24px;}
.wark_alarm_wrap .cha:after {content:""; position:absolute; bottom:-10px; right:-20px; width:53px; height:50px; background:url('/pub/images/icon_alarm.png') no-repeat 50% 50% / contain;}
.push {display:flex; justify-content:space-between; align-items:center; border:#EBEBEB 1px solid; border-radius:8px; padding:0 16px; height:50px;}
label.push_chk {position:relative;}
label.push_chk input {display:none;}
label.push_chk i {position:relative; display:block; width:44px; height:20px; background:#E0E0E0; border-radius:10px; transition:.2s linear;}
label.push_chk i:before {content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.2s linear;}
label.push_chk input:checked + i {background:#6C50FF;}
label.push_chk input:checked + i:before {left:calc(100% - 18px);}
.wark_alarm_wrap .ptit {margin:20px 0 12px;}
.wark_alarm_wrap .ptit.mt {margin-top:50px;}
.wark_alarm_wrap .flex {position:relative; display:flex; text-align:center; z-index:10;}
.wark_alarm_wrap .flex .select {position:relative; width:calc(50% - 11px);}
/* .wark_alarm_wrap .flex .select:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:0; border-left:#EBEBEB 1px solid; border-right:#EBEBEB 1px solid;} */
.wark_alarm_wrap .flex .select dt {position:relative; height:44px; border:#EBEBEB 1px solid; border-radius:8px; overflow:hidden; z-index:1;}
.wark_alarm_wrap .flex .select dt input {display:block; height:42px; font-size:14px; color:#393E42; font-weight:500; text-align:center; border:0; pointer-events:none; user-select:none; width:100%;}
.wark_alarm_wrap .flex .select dt:before {content:""; position:absolute; top:0; right:15px; width:10px; height:100%; background:url('/pub/images/arrow_select.svg') no-repeat 50% 50% / contain;}
.wark_alarm_wrap .flex .select dd {position:absolute; bottom:100%; left:0; width:100%; max-height:170px; overflow:hidden scroll; border:#EBEBEB 1px solid; background:#fff; border-bottom:0; border-radius:8px 8px 0 0; padding-top:8px; display:none;}
.wark_alarm_wrap .flex .select dd button {display:block; font-weight:500; line-height:40px; width:100%; text-align:center; background:#fff;}
/* .wark_alarm_wrap .flex .select.on:after {height:8px;} */
.wark_alarm_wrap .flex .select.on dt {border-radius:0 0 8px 8px;}
.wark_alarm_wrap .select_down .select.on dt {border-radius:8px 8px 0 0;}
.wark_alarm_wrap .select_down .select dd {top:100%; bottom:auto; border-radius:0 0 8px 8px; border-top:0; border-bottom:#EBEBEB 1px solid;}
.wark_alarm_wrap .flex span {width:22px; line-height:44px; height:44px;}

.wark_alarm_wrap.mt {margin-top:40px;}
.wark_alarm_wrap .step {display:flex; gap:8px; margin-bottom:20px;}
.wark_alarm_wrap .step span {font-size:11px; color:#fff; font-weight:500; line-height:20px; height:20px; width:45px; text-align:center; background:#6C50FF; border-radius:8px;}
.wark_alarm_wrap .step strong {font-size:16px;}

.wark_alarm_wrap .flex.before_after dl:first-child {margin-right:4px;}
.wark_alarm_wrap .flex.before_after dl:last-child {margin-left:4px;}
.wark_alarm_wrap .flex.before_after dt {padding-right:25px;}
.wark_alarm_wrap.pb .btn_audiobook {bottom:120px;}
.wark_alarm_wrap.pb .btn_btm {margin-top:120px;}

.cha_wrap.after {margin-top:50px;}
.cha_wrap p {text-align:center; margin:12px 0 40px; font-size:11px; color:#8D94A4; font-weight:500;}

/* 기록 */
.tabs {display:flex; justify-content:center; align-items:center; margin-bottom:24px;}
.tabs a {display:block; font-size:13px; font-weight:700; line-height:1; padding: 10px; width:90px; max-width:50%; background:#fff; border-radius:16px; text-align:center;}
.tabs a.on {color:#fff; background:#6C50FF;}
.record_wrap {padding-top:20px;}
.month_wrap {position:relative;}
.month_wrap .to {font-size:20px; font-weight:700; line-height:24px; text-align:center; margin-bottom:30px;}
.month_wrap .arrow {position:absolute; top:0; height:24px; width:24px; background:no-repeat 50% 50%; z-index:1;}
.month_wrap .arrow:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/pub/images/arrow_prevnext.svg') no-repeat 50% 50% / 8px;}
.month_wrap .arrow.prev {left:0;}
.month_wrap .arrow.next {right:0;}
.month_wrap .arrow.next:before {transform:rotate(180deg);}
.month_wrap thead th {font-size:12px; color:#8D94A4; line-height:20px; padding-bottom:10px;}
.month_wrap tbody td {position:relative; font-size:14px; font-weight:500; line-height:40px; text-align:center;}
.month_wrap tbody td.before {color:#C6C6C6;}
.month_wrap tbody td.chk {background:url('/pub/images/icon_dayfoot.svg') no-repeat 50% 50% / 26px;}
.month_wrap tbody td.today {color:#fff;}
.month_wrap tbody td.today:before {content:""; position:absolute; top:50%; left:50%; width:34px; height:34px; background:#6C50FF; border-radius:50%; transform:translate(-50%,-50%); z-index:-1;}
.month_wrap tbody td button {display:block; text-align:center; width:100%; line-height:inherit; color:inherit;}
.routine_list {position:relative; margin:0 -16px; width:100vw; overflow:auto; padding:20px 16px; background:#F6F5FA; border-radius:20px 20px 0 0;}
.month_wrap + .routine_list {height:calc(100vh - 472px); margin-top:15px; padding-bottom:40px;}
.routine_select + .routine_list {height:calc(100vh - 168px - ((100vw - 68px)/2)); margin-top:30px;}
.routine_list ul {display:flex; flex-direction:column; gap:16px;}
.routine_list li {position:relative; background:#fff; box-shadow:rgba(0,0,0,.04) 0 2px 10px; padding:16px;}
.routine_list .tt {font-weight:700; line-height:18px; margin-bottom:6px;}
.routine_list .date {font-size:11px; color:#8D94A4; font-weight:500; line-height:14px; padding-left:16px; background:url('/pub/images/icon_month.svg') no-repeat 0 0 / auto 11px;}
.routine_list .btns {position:absolute; top:50%; right:16px; display:flex; gap:8px; transform:translateY(-50%);}
.routine_list .btns a {display:block; font-size:12px; font-weight:500; line-height:1; padding:8px; width:90px; border:#EBEBEB 1px solid; border-radius:15px; text-align:center;}
.routine_list .btns a.creat {color:#6C50FF; background:#F0EDFF; border-color:#F0EDFF;}
.routine_select {display:flex; flex-wrap:wrap; gap:12px;}
.routine_select .btn {position:relative; width:calc((100vw - 68px)/4); height:calc((100vw - 68px)/4); display:flex; flex-direction:column; justify-content:center; align-items:center; box-shadow:rgba(0,0,0,.06) 0 2px 10px; border-radius:12px; border:#fff 2px solid;}
.routine_select .btn img {height:28px; margin-bottom:10px;}
.routine_select .btn p {font-size:12px; font-weight:700; line-height:16px;}
.routine_select .btn.on {background:rgba(108,80,255,.06); border-color:#6C50FF;}

/* 완료카드 공유하기 */
.write_wrap {padding-top:10px;}
.write_wrap .tt {position:relative; font-weight:700; margin:20px 0 8px;}
.write_wrap .tt .tar {position:absolute; bottom:0; right:0; font-size:10px; font-weight:500;}
.write_wrap input.text {height:44px; padding:0 16px;}
.write_wrap textarea.text {height:200px;}
.write_wrap .flex {display:flex; gap:8px;}
.write_wrap .flex .text {width:calc(100% - 88px);}
.write_wrap .flex .btn {width:80px; height:44px; font-size:13px; font-weight:500; text-align:center; border:#393E42 1px solid; border-radius:8px;}

/* 커뮤니티 */
.community_wrap {position:relative; padding-top:30px;}
.community_list ul {display:flex; flex-direction:column; gap:16px; max-height:calc(100vh - 191px); padding-top:20px; padding-bottom:20px; overflow:auto;}
.community_list li {position:relative; box-shadow:rgba(0,0,0,.08) 0 4px 15px;}
.community_list li a {position:relative; display:block; padding:24px 20px 60px;}
.community_list li .name {display:flex;}
.community_list li .name span {position:relative; font-size:11px; color:#8D94A4; font-weight:500; line-height:14px; padding-right:8px; margin-right:8px;}
.community_list li .name span:after {content:""; position:absolute; top:50%; right:0; width:1px; height:8px; background:#8D94A4; transform:translateY(-50%);}
.community_list li .name span:last-child:after {display:none;}
.community_list li .tit,
.community_list li p {line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.community_list li .tit {display:block; font-size:16px; font-weight:700; margin:12px 0 8px;}
.community_list li p {font-size:13px; color:#687178;}
.community_list li .heart {position:absolute; bottom:24px; left:20px;}
.community_list li.in_img a {padding-right:110px;}
.community_list li.in_img img {position:absolute; top:50%; right:20px; width:80px; height:80px; border-radius:12px; transform:translateY(-50%);}
label.heart {position:relative;}
label.heart input {display:none;}
label.heart span {display:inline-block; vertical-align:top; font-size:10px; color:#FF4773; font-weight:700; line-height:20px; height:20px; background:#FFF4F7; border-radius:10px; padding:0 8px;}
label.heart span:before {content:"♡"; margin-right:5px;}
label.heart input:checked + span:before {content:"♥";}	
.btn_write {position:fixed; bottom:70px; right:16px; width:55px; z-index:1;}
.btn_write > * {display:block; width:100%;}
 .btn_write i {position:absolute; bottom:50%; left:0; height:73px; background:url('/pub/images/icon_dog.png') no-repeat 50% 0 / contain; z-index:-1;}
.btn_write span {height:55px; background:url('/pub/images/btn_write.svg') no-repeat 50% 50% / contain; z-index:1;}

.img_atc .imgbox {position:relative; width:80px; height:80px; border:#ddd 1px solid; border-radius:4px; display:block; background:#F7F7F7 url('/pub/images/bg_plus.svg') no-repeat 50% 50% / 20px;}
.img_atc .imgbox .img {width:78px; height:78px;}
.img_atc .imgbox .img img {width:100%; height:100%; object-fit:cover;}
.img_atc .imgbox .imgInp {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:1;}

.board_view {padding-top:30px;}
.board_view .tit {position:relative; margin-bottom:24px;}
.board_view .tit strong {display:block; font-size:18px; font-weight:700; line-height:22px; margin-bottom:12px;}
.board_view .tit .name {display:flex;}
.board_view .tit .name span {position:relative; font-size:11px; color:#8D94A4; font-weight:500; line-height:14px; padding-right:8px; margin-right:8px;}
.board_view .tit .name span:after {content:""; position:absolute; top:50%; right:0; width:1px; height:8px; background:#8D94A4; transform:translateY(-50%);}
.board_view .tit .name span:last-child:after {display:none;}
.board_view .tit .heart {position:absolute; bottom:0; right:0;}
.board_view .con {/* height:calc(100vh - 152px); */ width:100vw; padding:0 16px 70px; overflow:auto;}
.board_view .con.pb2 {padding:16px;}
.board_view .con img {border-radius:12px; margin-bottom:16px; max-width:100%;}
.board_view .btns {position:relative; bottom:0; padding:0 16px; display:flex; gap:10px; justify-content:flex-end; margin-top:60px;}
.board_view .btns .btn {font-size:12px; font-weight:500; line-height:28px; height:30px; width:60px; border:#EBEBEB 1px solid; border-radius:15px; display:flex; justify-content:center; align-items:center; gap:4px; background:#fff;}
.board_view .btns .btn:before {content:""; height:28px; background:no-repeat 50% 50% / contain;}
.board_view .btns .btn_modify:before {width:9px; background-image:url('/pub/images/icon_modify.svg');}
.board_view .btns .btn_delete:before {width:10px; background-image:url('/pub/images/icon_delete.svg');}
.board_view .btns.mt0 {padding-top:40px;}

.step_box {position:relative; font-size:16px; font-weight:600; line-height:20px; padding:30px 16px 20px 69px;}
.step_box .step {position:absolute; top:30px; left:12px; font-size:11px; color:#fff; font-weight:500; line-height:20px; height:20px; width:45px; text-align:center; background:#6C50FF; border-radius:10px;}
.step_box + .board_view .con {height:calc(100vh - 222px);}

/* 내 피드 */
.feed_list {display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start; overflow:auto; height:calc(100vh - 152px); padding-bottom:75px;}
.feed_list a {width:calc((100% - 10px)/3); height:calc((100vw - 42px)/3); border-radius:2px; overflow:hidden;}
.feed_list a img {width:100%; height:100%; object-fit:cover !important;}

/* 메달관리 */
.challenge_top {position:relative; padding:30px 28px 68px; border-radius:12px; background:linear-gradient(-80deg,#A27DEF,#6C50FF); margin-top:30px;}
.challenge_top i {position:absolute; top:-15px; right:20px; width:103px; height:108px; background:no-repeat 100% 50% / contain;}
.challenge_top i.trp {background-image:url('/pub/images/img_trp.png');}
.challenge_top i.medal {background-image:url('/pub/images/img_medal.png');}
.challenge_top span {display:block; font-size:12px; color:#fff; opacity:.6;}
.challenge_top .count {font-size:30px; color:#fff; margin:8px 0 36px;}
.challenge_top p {font-size:12px; color:#fff; line-height:20px;}
.challenge_top .btns {position:absolute; bottom:0; left:0; width:100%; display:flex; background:rgba(0,0,0,.08); border-radius:0 0 12px 12px;}
.challenge_top .btns a {position:relative; width:50%; font-size:12px; color:#fff; font-weight:500; line-height:1; padding: 16px; text-align:center;}
.challenge_top .btns a:before {content:""; position:absolute; top:50%; left:0; width:1px; height:16px; background:rgba(255,255,255,.5); transform:translateY(-50%);}
.challenge_top .btns a:first-child:before {display:none;}
.challenge_list {max-height:calc(100vh - 406px); overflow:auto;}
.challenge_list li {border-bottom:#ebebeb 1px solid;}
.challenge_list li:last-child {border-bottom:0;}
.challenge_list .challenge_box {gap:20px; padding:16px 0; background:none; margin:0; width:100%;}
.challenge_list .challenge_box .day {width:87px;}
.challenge_list .challenge_box .txt {width:calc(100% - 87px);}
.challenge_list .challenge_box .txt .tt {font-size:14px; font-weight:700; line-height:17px; margin-bottom:5px;}
.challenge_list .challenge_box .txt p {font-size:10px; margin:5px 0 8px;}
.challenge_list .challenge_box .txt .date {font-size:10px; color:#8D94A4; font-weight:500; line-height:12px;}
.challenge_list .routine_select {margin:20px 0;}
.challenge_list .routine_select .btn {width:calc((100vw - 74px)/4);}

/* 마이페이지 */
.mypage_wrap {padding-top:30px;}
.my_head {text-align:center; margin-bottom:30px;}
.my_head .imgfit {display:block; width:80px; height:80px; border-radius:50%; overflow:hidden; margin:0 auto;}
.my_head .btn_modify {position:relative; margin:16px 0 5px; font-size:16px; font-weight:700; display:flex; justify-content:center; align-items:center; gap:6px;}
.my_head .btn_modify i {width:20px; height:20px; background:url('/pub/images/btn_write_s.svg') no-repeat 50% 50% / 9px; border:#EBEBEB 1px solid; border-radius:50%;}
.my_head .mail {font-size:11px; color:#8D94A4; font-weight:500; line-height:20px;}
.my_head .img_modi {position:relative; width:100px; margin:0 auto;}
.my_head .img_modi .imgfit {width:100px; height:100px;}
.my_head .img_modi label.camera {position:absolute; bottom:0; right:0; width:24px; height:24px; background:url('/pub/images/icon_camera2.svg') no-repeat #fff 50% 50% / 10px; border:#ddd 1px solid; border-radius:50%; z-index:1;}
.my_head .img_modi input {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:1;}
.my_head .name {font-size:16px; font-weight:700; margin-top:12px;}

.my_head.cha_box {background:linear-gradient(#fff,#F5F2FF); width:100vw; max-width:100%; padding:30px 16px 20px;}
.my_head.cha_box .imgfit {width:120px; height:120px; border:#EBEBEB 1px solid; background:#fff; border-radius:505;}
.my_head.cha_box .level_box {position:relative; width:100px; height:14px; background:#E1E1E1; border:#fff 2px solid; border-radius:12px; margin:-10px auto 0;}
.my_head.cha_box .level_box .level {position:absolute; top:50%; left:-10px; width:22px; height:20px; line-height:20px; text-align:center; background:url('/pub/images/icon_level.svg') no-repeat 50% 50% / contain; font-size:10px; color:#fff; font-weight:900; z-index:1; transform:translateY(-50%); padding-top:1px;}
.my_head.cha_box .level_box .bar {position:absolute; top:0; left:0; height:100%; background:#00CC7A; border-radius:8px;}
.my_head.cha_box .level_box .exp {position:relative; font-size:10px; font-weight:700; line-height:1; text-align:center; z-index:1;}
.my_head.cha_box .name {font-size:16px; font-weight:700; line-height:20px; text-align:center; margin:10px 0 5px;}
.my_head.cha_box .ing {font-size:11px; color:#687178; font-weight:500; line-height:20px;}
.my_head.cha_box .btn {display:block; font-size:12px; color:#fff; font-weight:500; line-height:1; padding: 9px; width:90px; background:#6C50FF; border-radius:15px; margin:20px auto 0;}

.my_list {padding-bottom:20px;}
.my_list a {position:relative; display:flex; justify-content: space-between; align-items: center; font-size:14px; font-weight:700; line-height:18px; border-bottom:#ddd 1px solid; padding:15px 5px 15px 0;}
.my_list a:after {content:""; position: relative; display: block; height:18px; width:6px; background:url('/pub/images/arrow_link.svg') no-repeat 50% 50% / contain;}

/* 알림설정 */
.alarm_set {display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 276px); overflow:auto;}
.alarm_set li {position:relative; width:100%; height:50px; border:#EBEBEB 1px solid; border-radius:8px; padding:0 80px 0 44px; font-weight:700; line-height:48px;}
.alarm_set li:before {content:""; position:absolute; top:0; left:17px; width:18px; height:100%;  background:no-repeat 50% 50% / contain;}
.alarm_set li label.push_chk {position:absolute; top:50%; right:16px; transform:translateY(-50%);}
.alarm_set li.i1:before {background-image:url('/pub/images/icon_notice.png');}
.alarm_set li.i2:before {background-image:url('/pub/images/icon_routine01.png');}
.alarm_set li.i3:before {background-image:url('/pub/images/icon_routine03.png');}
.alarm_set li.i4:before {background-image:url('/pub/images/icon_routine05.png');}
.alarm_set li.i5:before {background-image:url('/pub/images/icon_routine07.png');}
.alarm_set li.i6:before {background-image:url('/pub/images/icon_routine04.png');}
.alarm_set li.i7:before {background-image:url('/pub/images/icon_routine02.png');}
.alarm_set li.i8:before {background-image:url('/pub/images/icon_routine06.png');}
.ne_top {font-size:13px; font-weight:700; line-height:20px; text-align:center; padding:10px 0 30px;}
.ne_top:before {content:"!"; display:block; width:20px; height:20px; line-height:1; background:#00CC7A; border-radius:50%; margin:0 auto 14px; font-size:14px; color:#fff; font-weight:900; padding: 3px 0;}

/* 캐릭터 성장기록 */
.growth_list {display:flex; flex-direction:column; max-height:calc(100vh - 365px); overflow:auto;}
.growth_list.pb {padding-bottom:65px;}
.growth_list li {position:relative; border-bottom:#EBEBEB 1px solid; min-height:92px; padding:16px 140px 16px 0; display:flex; flex-direction:column; justify-content:center;}
.growth_list strong {display:block; font-weight:700; line-height:22px;}
.growth_list .date {font-size:10px; color:#8D94A4; font-weight:500; line-height:12px;}
.growth_list .state {position:absolute; top:50%; right:0; display:flex; gap:12px; transform:translateY(-50%);}
.growth_list .state span {width:60px; height:60px; border:1px solid; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; font-size:10px; color:#8D94A4; border:#EBEBEB 1px solid; border-radius:50%;}
.growth_list .state strong {font-size:14px;}
.growth_list .state .exp {color:#00CC7A; border-color:#00CC7A;}
.growth_list .state .level {color:#F3B141; border-color:#F3B141;}
.growth_list .state .gain strong {color:#6C50FF;}
.growth_list .state .hold strong {color:#393E42;}

/* 캐릭터 관리 */
.character_management {padding:30px 0 40px; text-align:center;}
.character_management strong {display:block; font-size:24px; line-height:34px;}
.character_management p {color:#687178; line-height:20px; margin-top:10px;}
.character_list {display:flex; flex-direction:column; gap:16px;}
.character_list li {position:relative; padding:20px 20px 20px 160px; border:#EBEBEB 1px solid; border-radius:12px;}
.character_list .imgfit {position:absolute; top:50%; left:20px; width:110px; height:110px; border:#EBEBEB 1px solid; border-radius:50%; overflow:hidden; transform:translateY(-50%);}
.character_list .imgfit img {position:absolute; top:50%; left:50%; width:110px; height:110px; max-width:110px; max-height:110px; transform:translate(-50%,-50%);}
/* .character_list .imgfit.lock {padding:15px;} */
.character_list .imgfit.lock:after {content:""; position:absolute; top:50%; left:0; width:100%; height:21px; background:url('/pub/images/icon_lock.svg') no-repeat 50% 50% / contain; transform:translateY(-50%);}
.character_list .tit {font-size:18px; font-weight:700; line-height:26px; display:flex; align-items:center; gap:5px;}
.character_list .tit .btn_modify {width:20px; height:20px; background:url('/pub/images/btn_write_s.svg') no-repeat 50% 50% / 9px; border:#EBEBEB 1px solid; border-radius:50%;}
.character_list .level_box {position:relative; width:140px; height:14px; background:#E1E1E1; border:#fff 2px solid; border-radius:12px; margin:10px 0;}
.character_list .level_box .level {position:absolute; top:50%; left:-10px; width:22px; height:20px; line-height:20px; text-align:center; background:url('/pub/images/icon_level.svg') no-repeat 50% 50% / contain; font-size:10px; color:#fff; font-weight:900; z-index:1; transform:translateY(-50%); padding-top:1px;}
.character_list .level_box .bar {position:absolute; top:0; left:0; height:100%; background:#00CC7A; border-radius:8px;}
.character_list .level_box .exp {position:relative; font-size:10px; font-weight:700; line-height:1; text-align:center; z-index:1;}
.character_list .lock + .txt .level_box .level {background-image:url('/pub/images/icon_level_g.svg');}
.character_list p {font-size:12px; color:#687178; margin-bottom:14px;}
.character_list .cha {width:100%; font-size:12px; font-weight:500; line-height:1; padding:8px; text-align:center; border:#EBEBEB 1px solid; border-radius:14px;}
.character_list .cha.leader {color:#bbb; background:#F7F7F7;}
.character_list .cha.lock {color:#6C50FF; border:#6C50FF 2px solid; display:flex; justify-content:center; align-items:center; gap:4px; padding:7px;}
.character_list .cha.lock:before {content:""; display:block; width:10px; height:12px; background:url('/pub/images/icon_medal.svg') no-repeat 50% 50% / contain;}
.character_list .leader_box:before,
.character_list .leader_box:after {content:""; position:absolute; z-index:1; transition:.2s linear; pointer-events:none; user-select:none;}
.character_list .leader_box:before {top:0; left:0; width:100%; height:100%; border:#6C50FF 2px solid; border-radius:inherit;}
.character_list .leader_box:after {top:-9px; left:16px; width:18px; height:18px; background:url('/pub/images/icon_check.svg') no-repeat 50% 50% / contain;}

.pop_lock .inbox {padding-top:72px;}
.pop_lock .img {position:absolute; top:-55px; left:50%; width:110px; height:110px; background:#fff; border-radius:50%; border:#EBEBEB 1px solid; padding:0; text-align:center; transform:translateX(-50%);}
.pop_lock .img:after {content:""; position:absolute; top:50%; left:0; width:100%; height:21px; background:url('/pub/images/icon_lock.svg') no-repeat 50% 50% / contain; transform:translateY(-50%);}

/* 게시판 목록 */
.board_list {margin-top:-15px;}
.board_list a {position:relative; display:block; padding:15px 10px 15px 0; border-bottom:#ddd 1px solid;}
.board_list a:after {content:""; position:absolute; top:0; right:0; width:6px; height:100%; background:url('/pub/images/arrow_link.svg') no-repeat 50% 50% / contain;}
.board_list a:last-child {border-bottom:0;}
.board_list strong {display:block; font-size:14px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.board_list p {font-size:10px; color:#8D94A4; font-weight:500; line-height:12px; margin-top:8px;}

/* FAQ */
.faq_wrap {}
.faq_wrap dl {}
.faq_wrap dt {position:relative; line-height:19px; font-weight:700; padding:16px 15px 16px 20px; border-bottom:#ddd 1px solid; transition:.2s linear;}
.faq_wrap dt:before {content:"Q"; position:absolute; top:18px; left:0; width:15px; height:15px; line-height:15px; text-align:center; font-size:10px; color:#6C50FF; font-weight:700; background:#EBEBEB; border-radius:50%;}
.faq_wrap dt:after {content:""; position:absolute; top:0; right:0; width:6px; height:100%; background:url('/pub/images/arrow_link.svg') no-repeat 50% 50% / contain; transform:rotate(90deg); transition:.2s linear;}
.faq_wrap dd {font-size:13px; line-height:20px; padding:20px 16px; margin:0 -16px; width:100vw; background:#F7F7F7; display:none;}
.faq_wrap .on dt {border-bottom-color:#fff;}
.faq_wrap .on dt:after {transform:rotate(-90deg);}

/* 루틴 */
.routine_info {position:relative; padding-top:84px; padding-bottom:80px;}
.routine_info .inbox {position:relative; background:#F6F5FA; border-radius:20px; padding:70px 24px 30px; font-weight:500; line-height:22px;}
.routine_info .inbox:before {content:""; position:absolute; top:-40px; left:0; width:100%; height:90px; background:no-repeat 50% 50% / contain;}
.routine_info.routine01 .inbox:before {background-image:url('/pub/images/icon_routine01.png');}
.routine_info.routine02 .inbox:before {background-image:url('/pub/images/icon_routine02.png');}
.routine_info.routine03 .inbox:before {background-image:url('/pub/images/icon_routine03.png');}
.routine_info.routine04 .inbox:before {background-image:url('/pub/images/icon_routine04.png');}
.routine_info.routine05 .inbox:before {background-image:url('/pub/images/icon_routine05.png');}
.routine_info.routine06 .inbox:before {background-image:url('/pub/images/icon_routine06.png');}
.routine_info.routine07 .inbox:before {background-image:url('/pub/images/icon_routine07.png');}
.routine_info .tit {font-size:30px; font-weight:700; line-height:36px; text-align:center; margin-bottom:24px;}
.routine_info .scroll {height:calc(100vh - 455px); overflow:auto;}
.routine_info p {font-weight:500; line-height:22px;}
.routine_info .btn {position:absolute; bottom:0; left:16px; width:calc(100% - 32px); height:50px; line-height:1; padding:17px; font-size:16px; color:#fff; font-weight:600; background:#6C50FF; border-radius:25px; text-align:center;}

/* 알림내역 */
.alarm_list {display:flex; flex-direction:column; gap:16px; padding-bottom:50px;}
.alarm_list li {position:relative; background:#fff; box-shadow:rgba(0,0,0,.08) 0 4px 15px; border-radius:12px; padding:24px 20px 24px 44px;}
.alarm_list .tit {position:relative; font-weight:700;}
.alarm_list .tit:before {content:""; position:absolute; top:0; left:-24px; width:16px; height:100%; background:url('/pub/images/icon_alarm2.png') no-repeat 50% 50% / contain;}
.alarm_list p {font-size:13px; color:#687178; line-height:20px; margin-top:8px;}
.alarm_list .date {position:absolute; top:24px; right:20px; font-size:11px; color:#8D94A4; font-weight:500;}

/* Web app */
.web_app {display:none;}

/* 감사일기 작성하기 */
.diart_write_top {padding:30px 20px; text-align:center; background:#F6F5FA;}
.diart_write_top:before {content:""; display:block; width:100%; height:22px; background:url('/pub/images/icon_write.png') no-repeat 50% 50% / contain; margin-bottom:15px;}
.btn_audiobook {position:absolute; bottom:150px; right:20px; width:55px; height:55px; background:#6C50FF url('/pub/images/icon_audiobook.svg') no-repeat 50% 50% / 22px; border-radius:50%; z-index:1;}
.btn_audiobook p {position:absolute; top:-25px; right:0; width:120px; height:22px; line-height:22px; text-align:center; background:#393E42; border-radius:11px; text-align:center; font-size:11px; color:#fff; display:flex; justify-content:center; align-items:center;}
.btn_audiobook.btn_btm0 {bottom:100px;}

/*데이터 없을 경우*/
.nodata {text-align:center; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin-top:-20px;}
.nodata:before {content:""; display:block; width:100%; height:100px; background:url('/pub/images/pet_nodata.png') no-repeat 50% 50% / contain; margin-bottom:15px;}
.nodata.posr {position:relative; top:0; left:0; transform:translate(0,0); margin-top:40px;}
.pb_pet {position:relative; padding-bottom:206px;}
.pb_pet .nodata {top:auto; bottom:0; transform:translate(-50%,0);}