/* webfont */
@import url("../../resources/font/pretendard/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* reset.css */
html, body, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	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;
}

/* public */
html {background:#f3f3f3; overflow-x: hidden;}
body {height:100%; min-height:100vh; font-size:14px; font-family: 'Pretendard', sans-serif; letter-spacing:-1px; max-width: var(--max-width); margin:0 auto; background:#fff;}
fieldset,img {border:0}
ul,ol,li,dl,dt,dd {list-style:none}
a:link,a:visited,a:active {color:#000; text-decoration:none}
input, textarea, select {-webkit-border-radius:0; position:relative; font-family: 'Pretendard', sans-serif; font-size:14px;}
input[type=text], input[type=number], input[type=button], input[type=submit], select, textarea,
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; letter-spacing:-1px;}
input:focus, textarea:focus, select:focus {outline:none;}
* {-webkit-text-size-adjust:none; box-sizing:border-box; word-break:keep-all;}
.wrap {padding: 10px;}
.fixed {position:fixed !important; width:100%; top:0px; z-index:100;}
.ellipsis {width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.YellowUnder {position:relative;}
.YellowUnder::before {content:""; position:absolute; width:100%; height:4px; bottom:2px; left:0px; background:#fef47a; z-index:-1;}
.FullMode {position:relative;}
.FullMode > * {position:absolute; top: 50%; transform:translateY(-50%);}
.ListMore {display:block; width:calc(100% - 30px); height:48px; line-height:48px; text-align:center; margin:30px 15px; background:#f4f5f6; font-size:14px; color:#333; border-radius:7px;}
.ListMore::after {content:url('../../resources/images/layout/BoardMore.png'); margin-left:9px; zoom:0.5; vertical-align:-5px}

/* var */
:root{
	--color-pri1: #FF6079;
	--color-pri2: #FF8695;
	--color-pri3: #FEECEE;
	--color-Yellow1: #FEF4D1;
	--color-Yellow2: #FFD84C;
	--color-Yellow3: #FFC700;
	--color-blue1: #3478F6;
	--color-blue2: #548DDE;
	--color-blue3: #B6D3FD;
	--color-blue4: #E6F2FF;
	--color-blue5: #F5F9FF;
	--color-gray01: #181D30;
	--color-gray02: #26282C;
	--color-gray03: #404454;
	--color-gray04: #636779;
	--color-gray05: #7C8095;
	--color-gray06: #999FB7;
	--color-gray07: #B3BBCB;
	--color-gray08: #CDD1DD;
	--color-gray09: #E0E2EB;
	--color-gray10: #F2F2F6;
	--color-gray11: #F5F6F9;
	--max-width: 500px;
}

/* navigator */
.Navigator {position: relative; width: 100%; max-width: var(--max-width); height: 55px; line-height: 55px;}
.Navigator .Utill {position: absolute; top: 0; right: 0; text-align: right; padding-right: 15px; }
.Navigator .Utill a {display: inline-block; width: 24px; height: 24px; background: no-repeat; background-size: 100%; vertical-align: middle;}
.Navigator .Utill a+a {margin-left: 15px;}
.Navigator .Utill .bookmark {background-image:url('../../resources/images/layout/Bookmark48.png');}
.Navigator .Utill .bookmark.on {background-image:url('../../resources/images/layout/Bookmark48on.png');}
.Navigator .Utill .more {background-image:url('../../resources/images/layout/More3btn48.png');}
.Navigator .PageUndo {position: absolute; top: 14px; left: 16px; width: 24px; height: 24px; background: url('../../resources/images/layout/Arrowleft48.png'); background-size: 100%;}
.Navigator h1 {font-size: 17px; font-weight: 600; flex: 1;}
.Navigator h1.top {position: relative; color: var(--color-gray01); font-size: 20px; padding-left: 20px; top: 20px; line-height: normal;}
.Navigator h1 img {width: 28px; height: 28px; vertical-align: -8px;}
.Navigator .PageUndo + h1 {text-align: center;}
.Navigator.fix {position: fixed; top: 0px; background: #fff; z-index: 2;}
.Navigator.fix+section {margin-top: 55px;}

/* Popup */
.Popup {display: none; background: rgba(0,0,0,0.8); position: fixed; z-index: 100; width: 100%; height: 100%; top: 0px; left: 0px;}
.Popup.on {display: block;}
.Popup article {background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 50px); max-width: var(--max-width); border-radius: 15px; overflow: hidden;}
.Popup article .closeBtn {position: absolute; width: 24px; height: 24px; top: 10px; right: 10px; background-image: url('../../resources/images/layout/Close48.png'); background-size: 100%;}
.Popup article .btn {display: flex; height: 55px; line-height: 53px; text-align: center; border-top: solid 1px var(--color-gray11);}
.Popup article .btn input {border: none; background: #fff;}
.Popup article .btn * {flex: 1; color: var(--color-gray05); font-size: 16px; font-weight: 400;}
.Popup article .btn * + * {border-left: solid 1px var(--color-gray11) !important;}
.Popup article .btn .blue {color: var(--color-pri1);}
.Popup article .main {height: auto;}
.Popup article .main img {display: block; width: 100%;}
.Popup article .confirm {font-size: 18px; text-align: center; padding: 24px 20px; line-height: 22px;}
.Popup article .confirm h1 {margin-bottom: 20px;}
.Popup article .confirm .error {display: inline-block; width: 100%; font-size: 13px; color: var(--color-pri1); text-align: left;}
.Popup article .confirm .bold {color: var(--color-gray01); font-weight: 500;}
.Popup article .confirm .subtext {color: var(--color-gray04); font-size: 14px;}
.Popup article .confirm img {display: block; position: relative; left: 50%; transform: translateX(-50%);}
.Popup article .confirm img.ok {width: 40.5px; height: 40.5px; margin-bottom: 20px;}

/* input type */
.inputA {border:none; border-bottom:#9f9f9f solid 2px; width:100%; height:35px; transition:all 0.2s ease; font-size:12px; font-weight:400;}
.inputA::placeholder {font-weight:400;}
.inputA:focus {border-bottom-color: var(--color-pri1);}
.inputB {border:#e6e6e6 solid 1px; border-radius:5px; width:100%; height:45px; font-size:15px; font-weight:400; padding:0 15px;}
.inputB::placeholder {font-size:14px; font-weight:400;}
.inputB:focus {border-color: var(--color-pri1);}
.inputBsubmit {display:block; width:100%; height:50px; background: var(--color-pri1); color:#fff; font-size:15px; font-weight:400; border:none; border-radius:10px;}
Select.inputB {background:url('../../resources/images/layout/SelectArrow.png') no-repeat 97% center; background-size:20px;}

/* Dock */
nav {position: fixed; display: flex; justify-content: space-around; align-items: center; bottom: 0px; width: 100%; max-width: var(--max-width); height: 55px; border-top: var(--color-gray11) solid 1px; background: white; z-index: 20;}
nav a {width: 40px; height: 100%; font-size: 10px; color: var(--color-gray01); text-align: center; text-transform: uppercase; background: no-repeat center 9px; background-size: 24px 24px; line-height: 80px;}
nav .on {color: var(--color-pri1);}
nav .home {background-image:url('../../resources/images/layout/Navhome48.png');}
nav .home.on {background-image:url('../../resources/images/layout/Navhome48on.png');}
nav .map {background-image:url('../../resources/images/layout/Navmap48.png');}
nav .map.on {background-image:url('../../resources/images/layout/Navmap48on.png');}
nav .oda {background-image:url('../../resources/images/layout/Navoda48.png');}
nav .oda.on {background-image:url('../../resources/images/layout/Navoda48on.png');}
nav .my {background-image:url('../../resources/images/layout/Navmy48.png');}
nav .my.on {background-image:url('../../resources/images/layout/Navmy48on.png');}
nav .dtree {background-image:url('../../resources/images/layout/Navdtree48.png');}
nav .dtree.on {background-image:url('../../resources/images/layout/Navdtree48on.png');}

/* footer */
footer {background:#f3f3f3; padding:20px 20px 70px 20px; font-size:12px; line-height:20px;}
footer h1 {color:#000;}
footer .text {color:#707070;}
footer .text span+span {position:relative; padding-left:5px; margin-left:5px;}
footer .text span+span:before {content:''; position:absolute; top:1px; left:0px; width:1px; height:11px; background:#707070;}
footer .btn {color:#000; margin:20px 0;}
footer .btn a:first-child {font-weight:bold;}
footer .btn a+a {position:relative; padding-left:10px; margin-left:10px; }
footer .btn a+a:before {content:''; position:absolute; top:1px; left:0px; width:1px; height:11px; background:#707070;}

/* search */
.SearchBar {position: relative; margin: 12px 20px;}
.SearchBar input[type=text] {width: 100%; height: 40px; border: none; padding: 0px 40px; border-radius: 6px; background: var(--color-gray11);}
.SearchBar input[type=text]::placeholder {color: #A8ADBF;}
.SearchBar input[type=submit] {position: absolute; top: 10px; left: 12px; width: 20px; height: 20px; background: url('../../resources/images/layout/Search40.png'); background-size: 100%; border: none; z-index: 1;}

/* WriterLevel */
.WriterLevel .Lv {display: inline-block; background: var(--color-gray11); padding: 0 4px; height: 16px; line-height: 16px; border-radius: 3px; letter-spacing: 0px; font-size: 10px; font-weight: 500; color: var(--color-gray06); vertical-align: 1px;}
.WriterLevel .d1 {background: #fff url(../../resources/images/layout/WriterDocter24.png) no-repeat; background-size: 12px; width: 12px; height: 12px; vertical-align: 0px;}

/* FloatingBtn */
a.FloatingBtn {position: fixed; display: block; font-size: 14px; width: 100px; height: 45px; bottom: 75px; right: 16px; background: var(--color-pri1) url('../../resources/images/layout/FloatingBtn48.png') no-repeat 16px 10px; background-size: 24px; color: #FFF; border-radius: 50px; line-height: 21px; padding: 11px 16px 11px 44px; box-shadow: 0px 3px 10px 0px #FF60794D; z-index:11;}
a.FloatingBtn.one {padding-top:21px;}
a.FloatingBtn.flot {bottom:20px}
a.FloatingBtn.reply {bottom:90px;}
a.FloatingBtn.none {display:none;}

/* SelectBottom */
.SelectBottom {display: none; background: rgba(25, 25, 25, 0.4); position: fixed; z-index: 100; width: 100%; height: 100%; top: 0px; left: 0px;}
.SelectBottom.on {display: block;}
.SelectBottom article {background: #FFF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; border-radius: 30px 30px 0 0; overflow: hidden; max-width: var(--max-width); min-height: 100px;}
.SelectBottom .indicator {display: block; background: var(--color-gray08); width: 70px; height: 4px; margin: 16px auto 0 auto; border-radius: 4px;}
.SelectBottom .close {position: absolute; width: 24px; height: 24px; top: 24px; right: 24px; background: url('../../resources/images/layout/Close48.png'); background-size: 100%;}
.SelectBottom .hidden {display: none;}
.SelectBottom .map .chk {font-weight: 600; background: url('../../resources/images/layout/SelectBottomChk48.png') no-repeat center right; background-size: 24px;}
.SelectBottom h1 {font-size: 18px; font-weight: 500; line-height: 27px; color: var(--color-gray02); padding: 26px 0 0 26px;}
.SelectBottom div {padding: 24px; font-size: 15px; line-height: 22px;}
.SelectBottom div a {display: block; margin-bottom: 20px; color: var(--color-gray02);}
.SelectBottom div a:last-child {margin-bottom: 0;}

/*BtnBottom*/
.BtnBottom {position: fixed; display: flex; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-width); height: 75px; padding: 12px 15px; background: #FFF; box-shadow: 0px -8px 16px 0px #D3D3E540; z-index: 9;}
.BtnBottom a {flex: 1; border-radius: 6px; font-size: 16px; font-weight: 600; line-height: 52px; text-align: center;}
.BtnBottom a+a {margin-left: 8px;}
.BtnBottom .pri1 {background: var(--color-pri1); color: #FFF;}
.BtnBottom .pri3 {background: var(--color-pri3); color: var(--color-pri1);}