@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/********** RESET **********/

html, body, main, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr, textarea, button, input[type=text], input[type=radio], input[type=checkbox], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week] { margin: 0; padding: 0; border: 0; font: inherit; }
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow: auto; }
caption, figcaption { display: none; }
em, address { font-style: normal; }
label { cursor: pointer; }
legend { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; } /* for screen reader */
:focus { outline: 0 none; }
a:link { text-decoration: none; }
a, button, input { font: inherit; background: none; border: 0 none; cursor: pointer; }
a { color:inherit; }

form, fieldset { width: 100%; }

/********** COMMON **********/

:root {
	--PlutoOrange: #FF6C29;
	--PlutoGray: #2A2B2C;
}

html { height: 100%; }
body { position: relative; height: 100%; font: 400 16px/1.5 "Pretendard", sans-serif; letter-spacing: 0; color: var(--PlutoGray); background: #FFF; box-sizing: border-box; }
body.modal { overflow: hidden; }

.button { display: block; height: 56px; border-radius: 10px; font-size: 17px; font-weight: 700; line-height: 54px; text-align: center; transition: all 0.3s; }
.button.normal { background-color: #FFF; border: 1px solid #96999B; box-sizing: border-box; }
.button.strong { background-color: var(--PlutoOrange); border: 1px solid var(--PlutoOrange); color: #FFF; box-sizing: border-box; }
.button.single { display: block; width: 100%; }
.button:disabled { background-color: #D0D2D6; border-color: #D0D2D6; color: #FFF; }



label.checkbox, label.radio { position: relative; }
label.checkbox input[type=checkbox], label.radio input[type=radio] { position: absolute; width: 0; height: 0; }
label.checkbox span, label.radio span { position: relative; display: inline-block; padding: 2px 0 0 34px; font-size: 15px; color: #96999B; transition: all 0.3s; }
label.checkbox span:before,
label.radio span:before { position: absolute; display: block; width: 24px; height: 24px; left: 0; top: 0; background: #FFF; border: 1px solid #DDDFE1; border-radius: 50%; box-sizing: border-box; content: ""; transition: all 0.3s; }
label.checkbox span:after { position: absolute; display: block; width: 10px; height: 10px; left: 7px; top: 7px; background: url("test/img/checkbox.svg") center no-repeat; background-size: 100% auto; box-sizing: border-box; content: ""; transition: all 0.3s; }
label.radio span:after { position: absolute; display: block; width: 8px; height: 8px; left: 8px; top: 8px; background: #96999B; border-radius: 50%; box-sizing: border-box; content: ""; transition: all 0.3s; }
label.checkbox input[type=checkbox]:checked + span:before,
label.radio input[type=radio]:checked + span:before { background: var(--PlutoOrange); border-color: var(--PlutoOrange); }
label.checkbox input[type=checkbox]:checked + span:after { background: url("/ko/img/checkbox-on.svg") center no-repeat; }
label.radio input[type=radio]:checked + span:after { background: var(--PlutoGray); }

input[type=text],
input[type=number],
input[type=password],
select { all: unset; width: 100%; height: 56px; padding: 0 15px; background: #FFF; line-height: 54px; border: 1px solid #DDDFE1; border-radius: 10px; box-sizing: border-box; transition: all 0.3s; }
textarea { /* all: unset; */ display: block; width: 100%; padding: 15px; background: #FFF; border: 1px solid #DDDFE1; border-radius: 10px; box-sizing: border-box; word-break: break-all; resize: none; transition: all 0.3s }

select,
input[type=text].select { padding-right: 69px; background: url("/ko/img/arrow-select.svg") right+22px center no-repeat; background-size: 10px auto; }

input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus { border-color: #4E5052; }

input[type=text].error,
input[type=password].error,
select.error
textarea.error { border-color: #FF234B; }

input::placeholder, textarea::placeholder { color: #96999B; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #96999B; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #96999B; }

input:read-only, input:read-only:focus { background: #F3F4F4 !important; border-color: #DDDFE1; color: #747678 !important; }

div.btn-box { display: flex; justify-content: space-between; }

/********** LAYOUT **********/

header { position: fixed; display: flex; left: 0; right: 0; top: 0; justify-content: center; align-items: center; height: 44px; padding: 0 20px; background: #FFF; border-bottom: 1px solid rgba(0, 0, 0, 0); z-index: 10; transition: all 0.3s; }
header.scroll { border-color: rgba(0, 0, 0, 0.1); }
header h1 { flex: 0 0 auto; font-size: 17px; font-weight: 700; }
header button.back2 { position: absolute; display: block; left: 20px; width: 18px; height: 18px; background:url("/ko/img/button-back.svg") center no-repeat; background-size: 100% auto; text-indent: -9999px; }
header button.back { position: absolute; display: block; left: 20px; width: 18px; height: 18px; background:url("/ko/img/button-back.svg") center no-repeat; background-size: 100% auto; text-indent: -9999px; }
header button.next { position: absolute; display: block; right: 0; width: 75px; height: 44px; font-size: 17px; font-weight: 700; color: var(--PlutoOrange); }
header button.next:disabled { color: #DDDFE1; }
header button.close { position: absolute; display: block; right: 0; width: 44px; height: 44px; text-indent: -9999px; overflow: hidden; }
header button.close:before,
header button.close:after { position: absolute; display: block; top: 50%; left: 50%; width: 20px; height: 2px; background: var(--PlutoGray); content: ""; }
header button.close:before { transform: translate(-50%, -50%)  rotate(45deg); }
header button.close:after { transform: translate(-50%, -50%) rotate(-45deg); }
header button.add { position: absolute; display: block; right: 0; width: 44px; height: 44px; text-indent: -9999px; overflow: hidden; }
header button.add:before,
header button.add:after { position: absolute; display: block; top: 50%; left: 50%; background: var(--PlutoGray); content: ""; transform: translate(-50%, -50%); }
header button.add:before { width: 16px; height: 2px;  }
header button.add:after { width: 2px; height: 16px;  }

header.main { justify-content: space-between; }
header.main h1 { flex: 0 0 60px; height: 22px; }
header.main h1 a { display: block; width: 100%; height: 100%; background:url("/ko/img/TOV_ICON_C.png") center no-repeat; background-size: 100% auto; text-indent: -9999px; overflow: hidden; }
header.main nav { display: flex; flex: 0 0 auto; justify-content: flex-end; margin-right: -12px; }
header.main nav a { flex: 0 0 44px; height: 100%; background-position: center; background-repeat: no-repeat; background-size: auto 20px; text-indent: -9999px; overflow: hidden; }
header.main nav a:first-child { background-image: url("/ko/img/nav-aroundme.svg"); }
header.main nav a:nth-child(2) { background-image: url("/ko/img/nav-dm.svg"); }
header.main nav a:last-child { background-image: url("/ko/img/nav-notification.svg"); }

nav.main { position: fixed; display: flex; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; height: 48px; background: #FFF; border-top: 1px solid rgba(0, 0, 0, 0.1); z-index: 10; transition: all 0.3s; }
nav.main a { flex: 0 0 20%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: auto 22px; text-indent: -9999px; overflow: hidden; }
nav.main a:first-child { background-image: url("/ko/img/nav-home.svg"); }
nav.main a:nth-child(2) { background-image: url("/ko/img/nav-mypet.svg"); }
nav.main a:nth-child(3) { background-image: url("/ko/img/nav-post.svg"); }
nav.main a:nth-child(4) { background-image: url("/ko/img/nav-iot.svg"); }
nav.main a:last-child { background-image: url("/ko/img/nav-setting.svg"); }
nav.main a:first-child.on { background-image: url("/ko/img/nav-home-on.svg"); }
nav.main a:nth-child(2).on { background-image: url("/ko/img/nav-mypet-on.svg"); }
nav.main a:nth-child(3).on { background-image: url("/ko/img/nav-post-on.svg"); }
nav.main a:nth-child(4).on { background-image: url("/ko/img/nav-iot-on.svg"); }
nav.main a:last-child.on { background-image: url("/ko/img/nav-setting-on.svg"); }
main { position: relative; z-index: 0; }
main.flex { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; min-height: 100%; box-sizing: border-box; }
main.with-head { padding-top: 45px; }
main.with-nav { padding-bottom: 79px; }
main.with-function { padding-bottom: 109px; }
main.member { padding-top: 70px; }

section { position: relative; }
section.container { padding: 0 20px; }

p.text { font-size: 15px; color: #747678; }
p.alert { margin-top: 6px; font-size: 12px; font-weight: 500; color: #FF234B; }
p.note { font-size: 12px; font-weight: 500; color: #96999B; }
p.note a { text-decoration: underline; }
p.note1 { font-size: 15px; font-weight: 500; color: #96999B; }
p.note1 a { text-decoration: underline; }
/********** INTRO **********/

main.flex h1.intro { flex: 0 0 110px; height: 89px; border-radius: 15px; background:url("/ko/img/TOV_ICON_C.png") center no-repeat; background-size: 100% auto; text-indent: -9999px; }

/********** POPUP **********/
 */

div.popup-wrap { position: fixed; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; padding: 50px 0; background: rgba(0, 0, 0, 0); box-sizing: border-box; z-index:100; visibility: hidden; transition: all 0.5s; }
body.modal div.popup-wrap { background: rgba(0, 0, 0, 0.7); visibility: visible; }

div.pop-intro { position: fixed; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; padding: 50px 0; visibility: hidden; }
div.pop-intro.on { visibility: visible; }

div.pop-window { flex: 1 1 auto; height: auto; margin: 24px; background: #FFF; border-radius: 20px; box-sizing: border-box; transform: translate(0, -200px);  opacity: 0; visibility: hidden; transition: all 0.5s; }
div.pop-window.full { height: calc(100vh - 48px); }
div.pop-window.on { transform: translate(0, 0); opacity: 1.0; visibility: visible; }

div.toast-window { position: absolute; flex: 0 0 100%; left: 0; right: 0; bottom: 0; background: #FFF; border-radius: 20px 20px 0 0; box-sizing: border-box; transform: translate(0, 500px); opacity: 0; transition: all 0.5s; }
div.toast-window.on { transform: translate(0, 0); opacity: 1.0; }

div.toast-function { position: absolute; flex: 0 0 100%; left: 8px; right: 8px; bottom: 48px; box-sizing: border-box; transform: translate(0, 500px); opacity: 0; transition: all 0.5s; }
div.toast-function.on { transform: translate(0, 0); opacity: 1.0; }


div.toast-function ul.button-ul {}
div.toast-function ul.button-ul li.gray + li.gray { border-top: 1px solid rgba(84, 84, 88, 0.65); }
div.toast-function ul.button-ul li.gray button { background: rgba(249, 249, 249, 0.78); }
div.toast-function ul.button-ul li.first button { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
div.toast-function ul.button-ul li.last button { border-top-left-radius: 0; border-top-right-radius: 0; }
div.toast-function ul.button-ul li.cancel { margin-top: 8px; }
div.toast-function ul.button-ul li.cancel button { border: 0 none; }


div.popup.intro { padding: 30px; }
div.popup.intro h1 { text-align: center; font-size: 20px; font-weight: 700; color: #000; }
div.popup.intro p.text { margin-top: 10px; text-align: center; color: #747678; }
div.popup.intro h1.sinistro,
div.popup.intro p.text.sinistro { text-align: left; }
div.popup.intro div.txt-box { margin-top: 8px; padding: 14px; background: #F3F4F4; border: 1px solid #ECEDEE; border-radius: 6px; font-size: 15px; color: #4E5052; }
div.popup.intro div.txt-box + p.text { margin-top: 20px; }
div.popup.intro dl.txt-dl {}
div.popup.intro dl.txt-dl dt { font-weight: 700; }
div.popup.intro dl.txt-dl dd { margin-top: 4px; }
div.popup.intro dl.txt-dl + dl.txt-dl { margin-top: 14px; }
div.popup.intro ul.txt-ul { margin-top: 20px; font-size: 12px; color: #747678; }
div.popup.intro ul.txt-ul li { position: relative; padding-left: 10px; }
div.popup.intro ul.txt-ul li:before { position: absolute; display: block; left: 0; top: 6px; width: 4px; height: 4px; background: #747678; border-radius: 50%; content: ""; }
div.popup.intro ul.txt-ul li + li { margin-top: 10px; }
div.popup.intro ul.chk-ul { margin-top: 30px; }
div.popup.intro ul.chk-ul li + li { margin-top: 16px; }
div.popup.intro button.single { margin-top: 30px; }
div.popup.intro div.btn-box { margin-top: 30px; }
div.popup.intro div.btn-box button { flex: 1 0 calc(50% - 5px); }
div.popup.intro div.btn-box button + button { margin-left: 10px; }

div.popup.user ul.user-ul { max-height: calc(100vh - 158px); padding-bottom: 40px; box-sizing: border-box; overflow-y: scroll; }
div.popup.user ul.user-ul li { display: flex; justify-content: space-between; align-items: center; height: 62px; padding: 0 20px; }
div.popup.user ul.user-ul li div.user-box { display: flex; align-items: center; flex: 0 0 auto; }
div.popup.user ul.user-ul li div.user-box figure { flex: 0 0 38px; height: 38px; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; box-sizing: border-box; }
div.popup.user ul.user-ul li div.user-box figure img { width: 100%; height: 100%; object-fit: cover; }
div.popup.user ul.user-ul li div.user-box p { flex: 0 0 auto; margin-left: 14px; font-size: 15px; }
div.popup.user ul.user-ul li button { flex: 0 0 72px; height: 30px; background: #FFF; border: 1px solid #DDDFE1; font-size: 12px; font-weight: 500; border-radius: 4px; box-sizing: border-box; transition: all 0.3s; }
div.popup.user ul.user-ul li button.on { background: var(--PlutoOrange); border-color: var(--PlutoOrange); color: #FFF; }

div.popup.location ul.location-result { height:calc(100% - 237px); overflow: auto; }

div.popup.add-service ul.regist-form { max-height: calc(100vh - 158px); padding: 0 20px 109px; box-sizing: border-box; overflow-y: scroll; }
div.popup.add-service ul.regist-form div.star-rating { width: 150px; height: 30px; display: flex; flex-direction: row-reverse; align-items: center; }
div.popup.add-service ul.regist-form div.star-rating label.star { width: 30px; height: 30px; background-image: url("/ko/img/star-rating-single-base.svg"); background-position: center; background-repeat: no-repeat; background-size: 24px auto; text-indent: -9999px; transition: all 0.3s; }
div.popup.add-service ul.regist-form div.star-rating :checked ~ label { background-image: url("/ko/img/star-rating-single.svg"); }
div.popup.add-service ul.regist-form div.star-rating input { display:none; }

div.pop-breed { position: fixed; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; padding: 50px 0; visibility: hidden; }
div.pop-breed.on { visibility: visible; }

div.popup.comment div.comment-box { position: relative; padding: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); z-index: 99999; }
div.popup.comment div.comment-box fieldset { display: flex; }
div.popup.comment div.comment-box fieldset textarea { padding-right: 93px; line-height: 25px; }
div.popup.comment div.comment-box fieldset button.send { position: absolute; display: block; top: 0; bottom: 0; right: 16px; width: 78px; height: 56px; margin: auto 0; font-weight: 700; color: var(--PlutoOrange); box-sizing: border-box; }
div.popup.comment div.comment-box fieldset button.send:before { position: absolute; left: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: #ECEDEE; content: ""; }
div.popup.comment div.comment-box fieldset button.send:disabled { color: #DDDFE1; }
div.popup.comment div.comment-box button.ok { display: block; width: 100%; height: 56px; border: 1px solid #96999B; border-radius: 10px; font-size: 17px; font-weight: 700; box-sizing: border-box; }
div.post-function {}
div.post-function ul.button-ul {}
div.post-function ul.button-ul li.gray + li.gray { border-top: 1px solid rgba(84, 84, 88, 0.65); }
div.post-function ul.button-ul li.gray button { background: rgba(249, 249, 249, 0.78); }
div.post-function ul.button-ul li.edit button { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
div.post-function ul.button-ul li.delete button { border-top-left-radius: 0; border-top-right-radius: 0; }
div.post-function ul.button-ul li.cancel { margin-top: 8px; }
div.post-function ul.button-ul li.cancel button { border: 0 none; }

div.popup {}
div.popup h1.general { display: flex; justify-content: space-between; align-items: center; height:73px; padding: 0 20px; box-sizing: border-box; }
div.popup h1.general span { font-size: 20px; font-weight: 700; }
div.popup h1.general button { position: relative; flex: 0 0 24px; height: 24px; background: #DDDFE1; border-radius: 50%; text-indent: -9999px; overflow: hidden; transition: all 0.3s; }
div.popup h1.general button:before,
div.popup h1.general button:after { position: absolute; display: block; top: 50%; left: 50%; width: 14px; height: 2px; background: #FFF; content: ""; }
div.popup h1.general button:before { transform: translate(-50%, -50%)  rotate(45deg); }
div.popup h1.general button:after { transform: translate(-50%, -50%) rotate(-45deg); }
div.popup h1.general button:hover { background: var(--PlutoOrange); }
div.popup h1.comment { display: flex; justify-content: space-between; align-items: center; padding: 20px; box-sizing: border-box; }
div.popup h1.comment span { flex: 0 0 auto; }
div.popup h1.comment span strong { font-weight: 700; }
div.popup h1.comment button { position: relative; flex: 0 0 24px; height: 24px; margin-left: 20px; background: #DDDFE1; border-radius: 50%; text-indent: -9999px; overflow: hidden; transition: all 0.3s; }
div.popup h1.comment button:before,
div.popup h1.comment button:after { position: absolute; display: block; top: 50%; left: 50%; width: 14px; height: 2px; background: #FFF; content: ""; }
div.popup h1.comment button:before { transform: translate(-50%, -50%)  rotate(45deg); }
div.popup h1.comment button:after { transform: translate(-50%, -50%) rotate(-45deg); }
div.popup h1.comment button:hover { background: var(--PlutoOrange); }
/********** SIGN IN + SIGN UP + REGIST PET **********/

main.member h1 { width: 82px; height: 29px; margin: 0 auto; background:url("/ko/img/TOV_ICON_C.png") center no-repeat; background-size: 100% auto; text-indent: -9999px; }

section.signin-div {}
section.signin-div input[type=password] { margin-top: 10px; }
section.signin-div button.button { margin-top: 20px; }

section.signin-form { margin-top: 65px; }
section.signin-form div.link { margin-top: 30px; text-align: center; }
section.signin-form div.link a { position: relative; display: inline-block; font-size: 14px; color: #747678; }
section.signin-form div.link a + a { margin-left: 21px; }
section.signin-form div.link a + a:before { position: absolute; display: block; top: 5px; left: -11px; width: 1px; height: 12px; background: #DDDFE1; content: ""; }

section.find-form { padding-top: 30px; }
section.find-form form { margin-top: 20px; }

section.signup-div {}

section.signup-link { margin-top: 65px; }
section.signup-link a.button { padding-left: 40px; background-image:url("/ko/img/icon-email.svg"); background-position: left+20px center; background-repeat: no-repeat; background-size: 20px auto; }
section.signup-link p.text { margin-top: 30px; text-align: center; }
section.signup-link p.text a { font-weight: 500; color: var(--PlutoGray); }

section.signup-form { padding-top: 20px; padding-bottom: 30px; }
section.signup-form + section.signup-form { padding-top: 30px; border-top: 8px solid #F3F4F4; }
section.signup-form ul.regist-form + p.note { margin-top: 30px; text-align: center; color: #4E5052; }
section.signup-form ul.regist-form + p.note1 { margin-top: 30px; text-align: center; color: #4E5052; font-weight: 500;}

section.signup-completed {}
section.signup-completed figure { width: 180px; height: auto; margin: 0 auto; }
section.signup-completed figure img { width: 100%; height: 100%; object-fit: contain; }
section.signup-completed h1 { margin-top: 20px; text-align: center; font-size: 20px; font-weight: 700; }
section.signup-completed p.note { margin-top: 10px; text-align: center; font-size: 15px; }
section.signup-completed a.button { width: 240px; margin: 50px auto 0; }

section.regist-pet-div {}

section.regist-pet-link {}
section.regist-pet-link figure { width: 192px; height: auto; margin: 0 auto; }
section.regist-pet-link figure img { width: 100%; height: 100%; object-fit: contain; }
section.regist-pet-link h1 { margin-top: 35px; text-align: center; font-size: 20px; font-weight: 700; }
section.regist-pet-link a.button { width: 240px; margin: 35px auto 0; }
section.regist-pet-link p.note { margin-top: 20px; text-align: center; color: #4E5052; }

section.regist-pet-form { padding-top: 20px; padding-bottom: 30px; }
section.regist-pet-form div.profile { position: relative; width: 100px; margin: 0 auto 10px; }
section.regist-pet-form div.profile figure { width: 100px; height: 100px; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; box-sizing: border-box; }
section.regist-pet-form div.profile figure img { width: 100%; height: 100%; object-fit: cover; }
section.regist-pet-form div.profile label { position: absolute; display: block; right: 2px; bottom: 2px; width: 25px; height: 25px; }
section.regist-pet-form div.profile label span { display: block; width: 25px; height: 25px; background: #96999B url("/ko/img/icon-photo-pet.svg") center no-repeat; background-size: 13px auto; border-radius: 50%; text-indent: -9999px; overflow: hidden; cursor: pointer; }
section.regist-pet-form div.profile label input[type=file] { position: absolute; display: block; top: 0; left: 0; width: 25px; height: 25px; clip: rect(0, 0, 0, 0); }

section.breeds-form { padding-top: 12px; }
section.breeds-form ul.choice {}
section.breeds-form ul.choice li { padding: 24px 0; }
section.breeds-form ul.choice li label.radio { width: 100%; }
section.breeds-form ul.choice li label.radio span { width: 100%; padding-left: 0; }
section.breeds-form ul.choice li label.radio span:before { left: unset; right: 0; }
section.breeds-form ul.choice li label.radio span:after { left: unset; right: 8px; }

ul.regist-form {}
ul.regist-form > li { position: relative; display: flex; flex-wrap: wrap; }
ul.regist-form > li + li { margin-top: 20px; }
ul.regist-form > li label.label { flex: 1 0 100%; padding-bottom: 6px; font-size: 12px; font-weight: 500; color: #4E5052; }
ul.regist-form > li p.alert { flex: 1 0 100%; }
ul.regist-form > li label.checkbox,
ul.regist-form > li label.radio { margin-top: 10px; }
ul.regist-form > li label.checkbox:first-child,
ul.regist-form > li label.radio:first-child { margin-top: 0; }
ul.regist-form > li.with-btn button { position: absolute; display: block; top: 24px; right: 0; height: 56px; font-weight: 700; color: var(--PlutoOrange); border-radius: 0 10px 10px 0; box-sizing: border-box; }
ul.regist-form > li.with-btn button { position: absolute; display: block; top: 24px; right: 0; height: 56px; font-weight: 700; color: var(--PlutoOrange); border-radius: 0 10px 10px 0; box-sizing: border-box; }
ul.regist-form > li.with-btn button:before { position: absolute; left: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: #ECEDEE; content: ""; }
ul.regist-form > li.with-btn.verify input[type=text] { padding-right: 93px; }
ul.regist-form > li.with-btn.certify input[type=text] { margin-top: 10px; padding-right: 113px; }
ul.regist-form > li.with-btn.search input[type=text] { padding-right: 119px; }
ul.regist-form > li.with-btn.verify button { width: 78px; }
ul.regist-form > li.with-btn.certify button.first { top: 90px; width: 98px; }
ul.regist-form > li.with-btn.certify button.last { top: 156px; width: 98px; }
ul.regist-form > li.with-btn.search button { width: 104px; }
ul.regist-form > li.ymd input[type=number] { flex: 0 0 calc(30% - 10px); margin-left: 10px; }
ul.regist-form > li.ymd input[type=number]:nth-child(2) { flex: 0 0 40%; margin-left: 0; }
ul.regist-form > li.main-btn { margin-top: 30px; }
ul.regist-form > li ul.choice { flex: 1 0 100%; display: flex; flex-wrap: wrap; background: #FFF; border: 1px solid #DDDFE1; border-radius: 10px; box-sizing: border-box; }
ul.regist-form > li ul.choice li { flex: 1 0 calc(50% - 0.5px); padding: 15px; border-style: solid; border-color: #ECEDEE; box-sizing: border-box; }
ul.regist-form > li ul.choice li:nth-child(even) { border-left-width: 1px; }
ul.regist-form > li ul.choice li:nth-child(n+3) { border-top-width: 1px; }

ul.regist-form > li div.onoff { flex: 0 0 100%; display: flex; justify-content: space-between; align-items: center; }
ul.regist-form > li div.onoff p {}
ul.regist-form > li div.onoff div.toggle {}
ul.regist-form > li div.onoff div.toggle label.toggle { position: relative; padding: 0; }
ul.regist-form > li div.onoff div.toggle label.toggle input { position: absolute; width: 0; height: 0; }
ul.regist-form > li div.onoff div.toggle label.toggle span { position: relative; display: block; width: 54px; height: 32px; padding: 0; border-radius: 16px; background-color: #DDDFE1; text-indent: -9999px; transition-duration: 0.3s; }
ul.regist-form > li div.onoff div.toggle label.toggle span:before { position: absolute; left: 2px; top: 2px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background-color: #FFF; content: ""; transition-duration: 0.3s; }
ul.regist-form > li div.onoff div.toggle input:checked + span { background-color: var(--PlutoOrange); }
ul.regist-form > li div.onoff div.toggle input:checked + span:before { transform: translateX(22px); }
ul.regist-form > li div.onoff + p.note { margin-top: 12px; }

section.search { padding-top: 12px; }
section.search div.keyword { position: relative; display: flex; }
section.search div.keyword input[type=text] { padding-right: 119px; }
section.search div.keyword button { position: absolute; display: block; top: 0; right: 0; width: 104px; height: 56px; font-weight: 700; color: var(--PlutoOrange); border-radius: 0 10px 10px 0; box-sizing: border-box; }
section.search div.keyword button:before { position: absolute; left: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: #ECEDEE; content: ""; }
section.search button.button { margin-top: 20px; padding-left: 40px; background-image:url("/ko/img/icon-location.svg"); background-position: left+20px center; background-repeat: no-repeat; background-size: 20px auto; font-size: 16px; font-weight: 400; }

h1.search-result.breeds-result { margin-top: 20px; padding: 14px 24px; font-size: 12px; font-weight: 500; color: #96999B; box-sizing: border-box; }
ul.search-result.location-result { margin-top: 20px; }
ul.search-result li { padding: 18px 24px; border-bottom: 1px solid #E5E5E5; box-sizing: border-box; cursor: pointer; }
ul.search-result li strong { color: var(--PlutoOrange); }

/********** MAIN **********/


ul.filter { display: flex; padding: 12px 18px 18px; overflow-x: auto; }
ul.filter li { position: relative; flex: 0 0 auto; height: 36px; padding: 0 16px; background: #FFF; font-size: 15px; line-height: 34px; border: 1px solid #D0D2D6; border-radius: 18px; box-sizing: border-box; cursor: pointer; transition: all 0.3s; }
ul.filter li.on { background: var(--PlutoGray); border-color: var(--PlutoGray); color: #FFF; }
/*ul.filter li:last-child:after { position: absolute; display: block; top: 0; right: -18px; width: 18px; height: 36px; content: ""; }*/
ul.filter li + li { margin-left: 7px; }

/********** POST : VIEW **********/

section.post-box {}
section.post-box + section.post-box { margin-top: 30px; }
section.post-box hgroup.profile { position: relative;  display: flex; align-items: center; padding: 14px 20px; box-sizing: border-box; }
section.post-box hgroup.profile figure { flex: 0 0 35px; height: 35px; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; box-sizing: border-box; cursor: pointer; }
section.post-box hgroup.profile figure img { width: 100%; height: 100%; object-fit: cover; }
section.post-box hgroup.profile div.post-info { flex: 0 0 auto; margin-left: 10px; }
section.post-box hgroup.profile div.post-info p.name { font-size: 15px; font-weight: 500; cursor: pointer; }
section.post-box hgroup.profile div.post-info p.date { font-size: 10px; font-weight: 500; color: #96999B; }
section.post-box hgroup.profile button.menu { position: absolute; right: 14px; width: 15px; height: 22px; margin: auto 0; background: url("/ko/img/button-post-more.svg") center no-repeat; background-size: 3 auto; text-indent: -9999px; }
section.post-box div.photo { position: relative; width: 100%; padding-top: 100%; }
section.post-box div.photo figure { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
section.post-box div.photo figure img { width: 100%; height: 100%; object-fit: cover; }
section.post-box ul.feedback { display: flex; align-items: center; padding: 14px 20px; box-sizing: border-box; }
section.post-box ul.feedback > li { display: flex; align-items: center; flex: 0 0 auto; }
section.post-box ul.feedback > li + li { margin-left: 20px; }
section.post-box ul.feedback > li button { width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: auto 20px; text-indent: -9999px; transition: all 0.3s; }
section.post-box ul.feedback > li button.like { background-image: url("/ko/img/button-like.svg"); }
section.post-box ul.feedback > li button.like.on { background-image: url("/ko/img/button-like-on.svg"); }
section.post-box ul.feedback > li button.comment { background-image: url("/ko/img/button-comment.svg"); }
section.post-box ul.feedback > li span { margin-left: 5px; font-size: 15px; color: #4E5052; }
section.post-box ul.feedback > li button.like + span { margin-left: 8px; }
section.post-box ul.feedback ul.like-ul { display: flex; margin-left: 8px; padding-right: 13px; background: url("/ko/img/arrow-like.svg") right center no-repeat; background-size: 7px auto; cursor: pointer; }
section.post-box ul.feedback ul.like-ul li { flex: 0 0 22px; height: 22px; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; box-sizing: border-box; }
section.post-box ul.feedback ul.like-ul li + li { margin-left: -7px; }
section.post-box ul.feedback ul.like-ul li img { width: 100%; height: 100%; object-fit: cover; }
section.post-box p.post { padding: 0 20px; font-size: 15px; font-weight: 500; line-height: 24px; color: #4E5052; }
section.post-box p.post.preview { max-height: 48px; overflow: hidden; }
section.post-box a.more { display: inline-block; padding: 0 20px; font-size: 12px; font-weight: 500; color: #96999B; }
section.post-box div.comment-box { margin-top: 15px; padding: 0 20px; }
section.post-box div.comment-box ul {}
section.post-box div.comment-box ul li { position: relative; padding: 10px 0 0 36px; }
section.post-box div.comment-box ul li figure { position: absolute; left: 0; top: 10px; width: 36px; height: 36px; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; }
section.post-box div.comment-box ul li figure img { width: 100%; height: 100%; object-fit: cover; }
section.post-box div.comment-box ul li div.comment-info { position: relative; display: flex; padding-left: 12px; }
section.post-box div.comment-box ul li div.comment-info p.name { flex: 0 0 auto; font-size: 12px; font-weight: 500; }
section.post-box div.comment-box ul li div.comment-info p.date { position: relative; flex: 0 0 auto; margin-left: 13px; font-size: 12px; font-weight: 500; color: #BEBFC2; }
section.post-box div.comment-box ul li div.comment-info p.date:before { position: absolute; top: 6px; left: -7px; display: block; width: 3px; height: 3px; background: #D0D2D6; border-radius: 50%; content: ""; }
section.post-box div.comment-box ul li div.comment-info button.menu { position: absolute; right: 0; top: 0; width: 21px; height: 15px; background: url("/ko/img/button-comment-more.svg") center no-repeat; background-size: 15px auto; text-indent: -9999px; }
section.post-box div.comment-box ul li p.comment { padding: 0 0 8px 12px; font-size: 15px; color: #747678; }

/********** POST : WRITE **********/

section.regist-post-div {}
section.regist-post-form {}
section.regist-post-form ul.photo { display: flex; padding: 18px 20px 12px; overflow-x: auto; }
section.regist-post-form ul.photo li { position: relative; flex: 0 0 77px; height: 77px; box-sizing: border-box; }
section.regist-post-form ul.photo li + li { margin-left: 14px; }
section.regist-post-form ul.photo li label.upload { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; padding-top: 20px; background: #FBFBFB; border: 1px dashed #DDDFE1; border-radius: 8px; box-sizing: border-box; }
section.regist-post-form ul.photo li label.upload span.label { display: block; width: 18px; height: 16px; margin: 0 auto; background: url("/ko/img/icon-photo-post.svg") center no-repeat; background-size: 18px auto; text-indent: -9999px; overflow: hidden; cursor: pointer; }
section.regist-post-form ul.photo li label.upload span.count { display: block; margin-top: 8px; text-align: center; font-size:12px; font-weight: 500; color: #BEBFC2; }
section.regist-post-form ul.photo li label.upload input[type=file] { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; clip: rect(0, 0, 0, 0); }
section.regist-post-form ul.photo li figure { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; }
section.regist-post-form ul.photo li figure img { width: 100%; height: 100%; object-fit: cover; }
section.regist-post-form ul.photo li button { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; background: #BEBFC2; border-radius: 50%; text-indent: -9999px; overflow: hidden; transition: all 0.3s; }
section.regist-post-form ul.photo li button:before,
section.regist-post-form ul.photo li button:after { position: absolute; display: block; top: 50%; left: 50%; width: 12px; height: 2px; background: #FFF; content: ""; }
section.regist-post-form ul.photo li button:before { transform: translate(-50%, -50%)  rotate(45deg); }
section.regist-post-form ul.photo li button:after { transform: translate(-50%, -50%) rotate(-45deg); }
section.regist-post-form ul.photo li button:hover { background: var(--PlutoOrange); }

section.regist-post-form div.content { padding: 0 20px; }
section.regist-post-form div.content label { font-size: 12px; font-weight: 500; color: #4E5052; }
section.regist-post-form div.content textarea { width: 100%; height: calc(100vh - 304px); margin-top: 5px; line-height: 25px; resize: none; }

/********** FUNCTION **********/

div.function-box { position: fixed; left: 0; right: 0; bottom: 0; padding: 16px; background: #FFF; border-top: 1px solid rgba(0, 0, 0, 0.1); }
div.function-box fieldset { display: flex; }
div.function-box fieldset textarea { padding-right: 93px; line-height: 25px; }
div.function-box fieldset button.send { position: absolute; display: block; top: 0; bottom: 0; right: 16px; width: 78px; height: 56px; margin: auto 0; font-weight: 700; color: var(--PlutoOrange); box-sizing: border-box; }
div.function-box fieldset button.send:before { position: absolute; left: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: #ECEDEE; content: ""; }
div.function-box fieldset button.send:disabled { color: #DDDFE1; }

/********** MY PET : PROFILE : VIEW **********/

section.profile-box {}
section.profile-box hgroup.basic { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
section.profile-box hgroup.basic h1 { flex: 0 0 auto; font-size: 26px; font-weight: 800; }
section.profile-box hgroup.basic ul.pet-ul { display: flex; justify-content: flex-end; flex: 0 0 auto; padding-right: 16px; background: url("/ko/img/arrow-pet.svg") right center no-repeat; background-size: 6px auto; cursor: pointer; }
section.profile-box hgroup.basic ul.pet-ul li { flex: 0 0 34px; height: 34px; background: #ECEDEE; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; box-sizing: border-box; }
section.profile-box hgroup.basic ul.pet-ul li + li { margin-left: -4px; }
section.profile-box hgroup.basic ul.pet-ul li.over { text-align: center; font-size: 12px; font-weight: 500; line-height: 32px; color: #96999B; }
section.profile-box hgroup.basic ul.pet-ul li img { width: 100%; height: 100%; object-fit: cover; }
section.profile-box p.greetings { margin-top: 10px; padding: 0 20px; font-size: 12px; font-weight: 500; color: #747678; }
section.profile-box ul.count-ul { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding: 0 20px; }
section.profile-box ul.count-ul li { position: relative; flex: 0 0 33%; text-align: center; }
section.profile-box ul.count-ul li:nth-child(2) { flex: 0 0 34%; }
section.profile-box ul.count-ul li:nth-child(2):before,
section.profile-box ul.count-ul li:nth-child(2):after { position: absolute; display: block; top: 5px; bottom: 5px; width: 1px; background: #ECEDEE; content: ""; }
section.profile-box ul.count-ul li:nth-child(2):before { left: 0; }
section.profile-box ul.count-ul li:nth-child(2):after { right: 0; }
section.profile-box ul.count-ul li.pop { cursor: pointer; }
section.profile-box ul.count-ul li span { display: block; font-size: 12px; font-weight: 500; color: #96999B; }
section.profile-box ul.count-ul li span:first-child { font-size: 15px; font-weight: 700; color: var(--PlutoGray); }
section.profile-box div.btn-box { margin-top: 20px; padding: 0 20px; }
section.profile-box div.btn-box .button { flex: 1 0 calc(50% - 5px); height: 30px; font-size: 12px; font-weight: 500; line-height: 28px; border-radius: 4px; }
section.profile-box div.btn-box .button + .button { margin-left: 10px; }
section.profile-box ul.photo-ul { display: flex; flex-wrap: wrap; margin-top: 20px; }
section.profile-box ul.photo-ul li { position: relative; flex: 0 0 calc((100% - 2px) / 3); margin-left: 1px; }
section.profile-box ul.photo-ul li:nth-child(3n+1) { margin-left: 0; }
section.profile-box ul.photo-ul li:nth-child(n+4) { margin-top: 1px; }
section.profile-box ul.photo-ul li svg.multi { position: absolute; display: block; top: 10px; right: 10px; width: 15px; height: 15px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }
section.profile-box ul.photo-ul li figure { position: relative; width: 100%; padding-top: 100%; }
section.profile-box ul.photo-ul li figure a { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; }
section.profile-box ul.photo-ul li figure a img { width: 100%; height: 100%; object-fit: cover; }

/********** MY PET : PROFILE : EDIT **********/

section.regist-profile-div {}
section.regist-profile-form { margin-top: 20px; }
section.regist-profile-form ul.regist-form li.container,
section.regist-profile-form ul.regist-form label.container { padding: 0 20px; box-sizing: border-box; }
section.regist-profile-form ul.regist-form ul.photo { display: flex; padding: 10px 20px 12px; overflow-x: auto; }
section.regist-profile-form ul.regist-form ul.photo li { position: relative; flex: 0 0 70px; box-sizing: border-box; cursor: pointer; }
section.regist-profile-form ul.regist-form ul.photo li + li { margin-left: 10px; }
section.regist-profile-form ul.regist-form ul.photo li input[type=radio] { position: absolute; width: 0; height: 0; }
section.regist-profile-form ul.regist-form ul.photo li figure { width: 100%; height: 70px; background: #ECEDEE; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; }
section.regist-profile-form ul.regist-form ul.photo li figure img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; -webkit-filter: grayscale(100%); filter: gray; transition: all 0.3s; }
section.regist-profile-form ul.regist-form ul.photo li input[type=radio]:checked + figure img { opacity: 1.0; -webkit-filter: grayscale(0%); filter: none; }
section.regist-profile-form ul.regist-form ul.photo li p { margin-top: 6px; text-align: center; font-size: 15px; color: #96999B; transition: all 0.3s; }
section.regist-profile-form ul.regist-form ul.photo li p:before { position: absolute; display: block; width: 24px; height: 24px; right: 0; top: 0; background: #FFF; border: 1px solid #DDDFE1; border-radius: 50%; box-sizing: border-box; content: ""; transition: all 0.3s; }
section.regist-profile-form ul.regist-form ul.photo li p:after { position: absolute; display: block; width: 10px; height: 10px; right: 7px; top: 7px; background: url("/ko/img/checkbox.svg") center no-repeat; background-size: 100% auto; box-sizing: border-box; content: ""; transition: all 0.3s; }
section.regist-profile-form ul.regist-form ul.photo li input[type=radio]:checked + figure + p { font-weight: 700; color: var(--PlutoGray); }
section.regist-profile-form ul.regist-form ul.photo li input[type=radio]:checked + figure + p:before { background: var(--PlutoOrange); border-color: var(--PlutoOrange); }
section.regist-profile-form ul.regist-form ul.photo li input[type=radio]:checked + figure + p:after { background: url("/ko/img/checkbox-on.svg") center no-repeat; }
section.regist-profile-form ul.regist-form li textarea { line-height: 25px; }
section.regist-profile-form ul.regist-form li a.account { display: block; width: 100%; height: 30px; background: url("/ko/img/arrow-link.svg") right center no-repeat; background-size: 7px auto; line-height: 30px; }

/********** MY PET : PET : VIEW **********/

section.pet-box {}
section.pet-box ul.pet-ul { display: flex; padding: 10px 20px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); overflow-x: auto; }
section.pet-box ul.pet-ul li { position: relative; flex: 0 0 70px; box-sizing: border-box; cursor: pointer; }
section.pet-box ul.pet-ul li + li { margin-left: 10px; }
section.pet-box ul.pet-ul li figure { width: 100%; height: 70px; background: #ECEDEE; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; }
section.pet-box ul.pet-ul li figure img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; -webkit-filter: grayscale(100%); filter: gray; transition: all 0.3s; }
section.pet-box ul.pet-ul li.on figure img { opacity: 1.0; -webkit-filter: grayscale(0%); filter: none; }
section.pet-box ul.pet-ul li p.name { margin-top: 6px; text-align: center; font-size: 15px; color: #96999B; transition: all 0.3s; }
section.pet-box ul.pet-ul li.on p.name { font-weight: 700; color: var(--PlutoGray); }
section.pet-box div.pet-info { display: none; margin-top: 30px; padding: 0 20px; }
section.pet-box div.pet-info.on { display: block; }
section.pet-box div.pet-info ul {}
section.pet-box div.pet-info ul li { display: flex; flex-wrap: wrap; }
section.pet-box div.pet-info ul li + li { margin-top: 20px; }
section.pet-box div.pet-info ul li span.label { flex: 1 0 100%; padding-bottom: 6px; font-size: 12px; font-weight: 500; color: #4E5052; }
section.pet-box div.pet-info ul li p { flex: 1 0 100%; width: 100%; height: 56px; padding: 15px; background: #F3F4F4; color: #747678; border: 1px solid #DDDFE1; border-radius: 10px; box-sizing: border-box; }
section.pet-box div.pet-info a.button { margin-top: 30px; }

/********** SETTING **********/

section.setting-div {}
section.setting-div h1 { font-size: 26px; font-weight: 700; line-height: 34px; }
section.setting-div ul.setting-ul { margin-top: 30px; margin-right: -20px; }
section.setting-div ul.setting-ul li { padding: 24px 0; }
section.setting-div ul.setting-ul li:nth-child(2) { padding-bottom: 36px; }
section.setting-div ul.setting-ul li:nth-child(3) { padding-top: 36px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
section.setting-div ul.setting-ul li a { display: block; margin-right: 20px; background: url("/ko/img/arrow-link.svg") right center no-repeat; background-size: auto 12px; box-sizing: border-box; }

section.notice-div {}
section.notice-div ul.notice-ul { margin: 0 -20px; }
section.notice-div ul.notice-ul li { padding: 0 40px; }
section.notice-div ul.notice-ul li + li { border-top: 1px solid rgba(0, 0, 0, 0.1); }
section.notice-div ul.notice-ul li a { display: block; padding-right: 30px; background: url("/ko/img/arrow-link.svg") right 26px no-repeat; background-size: auto 12px; }
section.notice-div ul.notice-ul li dl { padding: 20px 0 20px 32px; background: url("/ko/img/icon-notice.svg") left 22px no-repeat; }
section.notice-div ul.notice-ul li dl dt { font-size: 16px; font-weight: 700; line-height: 25px; }
section.notice-div ul.notice-ul li dl dd { margin-top: 6px; font-size: 12px; line-height: 20px; color: #BEBFC2; }
section.notice-div div.notice-cnt { padding: 0 30px 0 52px; font-size: 15px; line-height: 24px; color: #747678; }

section.notification-div {}
section.notification-div ul.notification-ul {}
section.notification-div ul.notification-ul li { position: relative; padding: 20px; }
section.notification-div ul.notification-ul li.new { background-color: #FFEBE2; }
section.notification-div ul.notification-ul li:before { position: absolute; display: block; width: 32px; height: 32px; background-color: #D0D2D6; background-position: center; background-repeat: no-repeat; background-size: 14px auto; border-radius: 50%; content: ""; }
section.notification-div ul.notification-ul li.new:before { background-color: #4E5052; }
section.notification-div ul.notification-ul li.normal:before { background-image: url("/ko/img/icon-notification-user.svg"); }
section.notification-div ul.notification-ul li.pluto:before { background-image: url("/ko/img/icon-notification-pluto.svg"); }
section.notification-div ul.notification-ul li + li { border-top: 1px solid rgba(0, 0, 0, 0.1); }
section.notification-div ul.notification-ul li p.from { margin-bottom: 6px; padding-left: 44px; font-size: 12px; line-height: 20px; color: #999; }
section.notification-div ul.notification-ul li dl { padding-left: 44px; }
section.notification-div ul.notification-ul li dl dt { font-size: 16px; font-weight: 700; line-height: 25px; }
section.notification-div ul.notification-ul li dl dd { margin-top: 6px; font-size: 12px; line-height: 20px; color: #BEBFC2; }

/********** AROUND ME **********/

section.around-div { padding-top: 44px; }
/* 220210 : 탭 컨테이너 사용 불가로 인한 화면 단위 분할
section.around-div ul.around-tab { position: fixed; top:45px; left: 0; right: 0; display: flex; background: #fff; z-index: 10; }
section.around-div ul.around-tab li { position: relative; flex: 0 0 50%; height: 44px; text-align: center; line-height: 44px; color: #BEBFC2; transition: all 0.3s; }
section.around-div ul.around-tab li:after { position: absolute; display: block; left:0; right: 0; bottom: 0; height: 2px; background: var(--PlutoGray); content: ""; transition: all 0.3s; }
section.around-div ul.around-tab li:first-child:after { transform: translateX(100%); }
section.around-div ul.around-tab li:last-child:after { transform: translateX(-100%); }
section.around-div ul.around-tab li.on { font-weight: 700; color: var(--PlutoGray); }
section.around-div ul.around-tab li.on:after { transform: translateX(0); }
section.around-div div.around-map { display: none; }
section.around-div div.around-map.on { display: block; }
220210 : 탭 컨테이너 사용 불가로 인한 화면 단위 분할 */
/* 220210 : 탭 컨테이너 사용 불가로 인한 화면 단위 분할로 인한 탭 메뉴 재생성 */
section.around-div div.around-tab { position: fixed; top:45px; left: 0; right: 0; display: flex; background: #fff; z-index: 10; }
section.around-div div.around-tab a { position: relative; flex: 0 0 50%; height: 44px; text-align: center; line-height: 44px; color: #BEBFC2; transition: all 0.3s; }
section.around-div div.around-tab a.on { font-weight: 700; color: var(--PlutoGray); }
section.around-div div.around-tab a.on:after { position: absolute; display: block; left:0; right: 0; bottom: 0; height: 2px; background: var(--PlutoGray); content: ""; transition: all 0.3s; }
/* 220210 : 탭 컨테이너 사용 불가로 인한 화면 단위 분할로 인한 탭 메뉴 재생성 */
section.around-div canvas.map-container { position: fixed; left: 0; right:0; top: 0; bottom: 0; width: 100vw; height: 100vh; background: #aaa; z-index: 1; }

div.service-div { position: relative; padding-bottom: 72px; background: #FFF; border-radius: 20px 20px 0 0; overflow-x: auto; z-index: 2; }
div.service-div ul.service-tab { display: flex; padding: 12px 18px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
div.service-div ul.service-tab li { position: relative; flex: 0 0 auto; height: 36px; padding: 0 16px; font-size: 15px; line-height: 34px; border: 1px solid #D0D2D6; border-radius: 18px; box-sizing: border-box; cursor: pointer; transition: all 0.3s; }
div.service-div ul.service-tab li.on { background: var(--PlutoGray); border-color: var(--PlutoGray); color: #FFF; }
div.service-div ul.service-tab li + li { margin-left: 5px; }
div.service-div ul.service-ul { display: block; }
div.service-div ul.service-ul.on { display: block; }
div.service-div ul.service-ul li { display: flex; padding: 18px 20px; }
div.service-div ul.service-ul li figure { flex: 0 0 80px; height: 80px; background: #F3F4F4; border: 1px solid #ECEDEE; border-radius: 18px; overflow: hidden; box-sizing: border-box; }
div.service-div ul.service-ul li figure img { width: 100%; height: 100%; object-fit: cover; }
div.service-div ul.service-ul li figure.noimage { display: flex; justify-content: center; align-items: center; }
div.service-div ul.service-ul li figure.noimage span { font-size: 10px; color: #D0D2D6; }
div.service-div ul.service-ul li dl { flex: 1 1 auto; margin: 0 24px 0 14px; }
div.service-div ul.service-ul li dl dt { color: #000; }
div.service-div ul.service-ul li dl dd.info { position: relative; padding-left: 8px; font-size: 12px; color: #747678; }
div.service-div ul.service-ul li dl dd.info:before { position: absolute; top: 7px; left: 0; display: block; width: 3px; height: 3px; background: #BEBFC2; border-radius: 50%; content: ""; }
div.service-div ul.service-ul li dl dd.star-rating { width: 87px; height: 15px; margin-top: 6px; background: url("/ko/img/star-rating-base.svg") left top no-repeat; background-size: 87px auto; font-size: 0; line-height: 0; }
div.service-div ul.service-ul li dl dd.star-rating span { display: inline-block; height: 15px; background: url("/ko/img/star-rating.svg") left top no-repeat; background-size: 87px auto; }
div.service-div ul.service-ul li button.fav { flex: 0 0 16px; height: 20px; background-image: url("/ko/img/button-fav.svg"); background-position: center top; background-repeat: no-repeat; text-indent: -9999px; transition: all 0.3s; }
div.service-div ul.service-ul li button.fav.on { background-image: url("/ko/img/button-fav-on.svg"); }

div.service-div + button.add-service { position: fixed; left: 0; right: 0; bottom: 20px; width: 210px; height: 44px; margin: 0 auto; border: 1px solid #DDDFE1; border-radius: 22px; font-size: 14px; font-weight: 400; line-height: 42px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); z-index: 10; }


div.popup.document {}
div.popup.document div.txt-box { position: fixed; top: 44px; left: 0; right: 0; bottom: 0; padding: 20px; font-size: 14px; overflow-y: auto; }
div.pop-full { position: absolute; flex: 0 0 100%; top: 0; left: 0; right: 0; bottom: 0; background: #FFF; box-sizing: border-box; transform: translate(0, 500px); opacity: 0; transition: all 0.5s; }
div.pop-full.on { transform: translate(0, 0); opacity: 1.0; }

section.faq-div {}
section.faq-div dl { font-size: 15px; transition:all 0.3s; }
section.faq-div dl dt { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; min-height: 24px; padding: 20px; box-sizing: border-box; cursor: pointer; }
section.faq-div dl dt span { flex: 0 0 17px; margin-right: 12px; color: #BEBFC2; }
section.faq-div dl dt p { flex: 1 1 auto; }
section.faq-div dl dt i { flex: 0 0 20px; height: 20px; margin-left: 12px; background-image: url("/ko/img/icon-fold.svg"); background-position: center; background-repeat: no-repeat; background-size: 100%; transition: all 0.3s; }
section.faq-div dl dd { position: relative; display: none; padding: 20px 20px 20px 49px; background: #F3F4F4; color: #747678; }
section.faq-div dl.on dt i { transform: scaleY(-1.0); }


section.document-div {}
section.document-div ul.document-ul { margin-top: 30px; }
section.document-div ul.document-ul li {}
section.document-div ul.document-ul li button { display: block; width: 100%; height: 52px; background: url("/ko/img/arrow-link.svg") right center no-repeat; background-size: auto 12px; text-align: left; box-sizing: border-box; }


div.popup h1.full { position: fixed; display: flex; top: 0; left: 0; right: 0; justify-content: center; align-items: center; height:44px; padding: 0 20px; box-sizing: border-box; }
div.popup h1.full span { flex: 0 0 auto; font-size: 17px; font-weight: 700; }
div.popup h1.full button { position: absolute; display: block; top:0; right: 0; width: 44px; height: 44px; text-indent: -9999px; overflow: hidden; }
div.popup h1.full button:before,
div.popup h1.full button:after { position: absolute; display: block; top: 50%; left: 50%; width: 20px; height: 2px; background: var(--PlutoGray); content: ""; }
div.popup h1.full button:before { transform: translate(-50%, -50%)  rotate(45deg); }
div.popup h1.full button:after { transform: translate(-50%, -50%) rotate(-45deg); }


/********** DM **********/

section.dm-div {}
section.dm-div ul.dm-list {}
section.dm-div ul.dm-list li { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
section.dm-div ul.dm-list li figure { flex: 0 0 50px; height: 50px; margin-right: 18px; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; box-sizing: border-box; }
section.dm-div ul.dm-list li figure img { width: 100%; height: 100%; object-fit: cover; }
section.dm-div ul.dm-list li dl { flex: 1 1 auto; }
section.dm-div ul.dm-list li dl dt { display: flex; align-items: center; }
section.dm-div ul.dm-list li dl dt span.user { font-weight: 700; }
section.dm-div ul.dm-list li dl dt span.since { position: relative; margin-left: 12px; font-size: 12px; color: #96999B; }
section.dm-div ul.dm-list li dl dt span.since:before { position: absolute; display: block; left: -7px; top: 50%; width: 2px; height: 2px; margin-top: -1px; background: #96999B; border-radius: 50%; content: ""; }
section.dm-div ul.dm-list li dl dd { max-width: 100%; margin-top: 3px; font-size: 15px; color: #747678; }
section.dm-div ul.dm-list li dl dd span { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
section.dm-div ul.dm-list li button.menu { flex: 0 0 15px; height: 22px; margin-left: 18px; background: url("/ko/img/button-post-more.svg") center no-repeat; background-size: 3px auto; text-indent: -9999px; }
section.dm-div ul.choice { margin-top: 20px; }
section.dm-div ul.choice li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
section.dm-div ul.choice li figure { flex: 0 0 50px; height: 50px; margin-right: 18px; border: 1px solid #D0D2D6; border-radius: 50%; overflow: hidden; box-sizing: border-box; }
section.dm-div ul.choice li figure img { width: 100%; height: 100%; object-fit: cover; }
section.dm-div ul.choice li label { flex: 1 1 auto; }
section.dm-div ul.choice li label span { width: 100%; padding-left: 0; }
section.dm-div ul.choice li label span:before { left: unset; right: 0; }
section.dm-div ul.choice li label span:after { left: unset; right: 8px; }


section.iot-div {}
section.iot-div h1 { font-size: 26px; font-weight: 700; line-height: 34px; }
section.iot-div ul.iot-ul { margin-top: 30px; }
section.iot-div ul.iot-ul li { background: #FFEBE2; border-radius: 10px; overflow: hidden; }
section.iot-div ul.iot-ul li p.name { position: relative; height: 22px; padding: 22px 22px 22px 49px; background: url("/ko/img/icon-iot-device.svg") 22px center no-repeat; background-size: 22px; font-size: 12px; line-height: 22px; color: rgba(0, 0, 0, 0.5); }
section.iot-div ul.iot-ul li p.name button.menu { position: absolute; right: 14px; width: 15px; height: 22px; margin: auto 0; background: url("/ko/img/button-post-more.svg") center no-repeat; background-size: 3px auto; text-indent: -9999px; }
section.iot-div ul.iot-ul li div.time { display: flex; justify-content: center; align-items: center; height: 94px; }
section.iot-div ul.iot-ul li div.time span { font-size: 17px; font-weight: 700; }
section.iot-div ul.iot-ul li div.btn-box button { position: relative; flex: 1 1 50%; height: 55px; background: #ffe5d9; font-size: 16px; color: #DE5314; }
section.iot-div ul.iot-ul li div.btn-box button + button:before { position: absolute; top: 13px; bottom: 13px; left: -0.5px; width: 1px; background: #ffcfb9; content: ""; }
section.iot-div ul.iot-ul li + li { margin-top: 16px; }
section.iot-div button.iot-new { position: relative; display: block; width: 100%; height: 56px; margin-top: 24px; border: 1px solid #96999B; border-radius: 10px; font-size: 16px; box-sizing: border-box; }
section.iot-div button.iot-new:before { position: absolute; left: 24px; top: 20px; width: 1px; height: 13px; background: var(--PlutoGray); content: ""; }
section.iot-div button.iot-new:after { position: absolute; left: 18px; top: 26px; width: 13px; height: 1px; background: var(--PlutoGray); content: ""; }
section.iot-div + button.howtouse { position: absolute; top: 11px; right: 16px; width: 22px; height: 22px; background: url("/ko/img/button-iot-howtouse.svg") center no-repeat; background-size: 22px; border: 2px solid #BEBFC2; border-radius: 50%; text-indent: -9999px; }


div.popup.iot-report {}
div.popup.iot-report ul.report-tab { display: flex; padding: 0 20px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); z-index: 10; }
div.popup.iot-report ul.report-tab li { position: relative; height: 44px; text-align: center; line-height: 44px; color: #BEBFC2; cursor: pointer; transition: all 0.3s; }
div.popup.iot-report ul.report-tab li:first-child { flex: 0 0 33.32%; }
div.popup.iot-report ul.report-tab li:nth-child(2) { flex: 0 0 33.33%; }
div.popup.iot-report ul.report-tab li:nth-child(3) { flex: 0 0 33.35%; }
div.popup.iot-report ul.report-tab li.on { font-weight: 700; color: var(--PlutoGray); }
div.popup.iot-report ul.report-tab li.on:after { position: absolute; display: block; left:0; right: 0; bottom: 0; height: 2px; background: var(--PlutoGray); content: ""; }
div.popup.iot-report div.report-wrap { max-height: calc(100vh - 203px); padding-bottom: 109px; box-sizing: border-box; overflow-y: scroll; }
div.popup.iot-report h2.nav { display: flex; justify-content: space-between; align-items: center; padding: 20px; }
div.popup.iot-report h2.nav span { text-align: center; font-size: 15px; line-height: 24px; }
div.popup.iot-report h2.nav button { width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: 24px; text-indent: -9999px; }
div.popup.iot-report h2.nav button.prev { background-image: url("/ko/img/button-iot-chart-prev.svg"); }
div.popup.iot-report h2.nav button.prev.on { background-image: url("/ko/img/button-iot-chart-prev-on.svg"); }
div.popup.iot-report h2.nav button.next { background-image: url("/ko/img/button-iot-chart-next.svg"); }
div.popup.iot-report h2.nav button.next.on { background-image: url("/ko/img/button-iot-chart-next-on.svg"); }
div.popup.iot-report ul.iot-chart { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
div.popup.iot-report ul.iot-chart li {}
div.popup.iot-report ul.iot-chart li div.outer { position: relative; display: flex; align-items: flex-end; width: 30px; height: 240px; background: #ECEDEE; border-radius: 8px; }
div.popup.iot-report ul.iot-chart li div.outer div.inner { width: 100%; background: #FF8248; border-radius: 8px; }
div.popup.iot-report ul.iot-chart li div.outer p.number { position: absolute; bottom: 8px; width: 100%; text-align: center; font-size: 17px; font-weight: 700; color: rgba(0, 0, 0, 0.5); }
div.popup.iot-report ul.iot-chart li p.period { margin-top: 6px; text-align: center; font-size: 12px; color: #96999B; }
div.popup.iot-report div.summary { display: flex; justify-content: space-between; margin: 24px 20px 0; background: #FBFBFB; border: 1px solid #ECEDEE; border-radius: 8px; box-sizing: border-box; }
div.popup.iot-report div.summary div { position: relative; flex: 1 1 50%; padding: 20px; text-align: center; }
div.popup.iot-report div.summary div p { font-size: 12px; line-height: 15px; color: #96999B; }
div.popup.iot-report div.summary div p.strong { font-size: 17px; font-weight: 700; color: var(--PlutoGray); }
div.popup.iot-report div.summary div p + p { margin-top: 10px; }
div.popup.iot-report div.summary div + div:before { position: absolute; left: -0.5px; top: 20px; bottom: 20px; width: 1px; background: #ECEDEE; content: ""; }
section.post-box div.photo svg.multi { position: absolute; display: block; top: 10px; right: 10px; width: 15px; height: 15px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }